@charset "utf-8";

.basic-post-gallery { overflow:hidden; }
.basic-post-gallery .txt-normal { letter-spacing:0; }
.basic-post-gallery .txt-short { letter-spacing:-1px; padding-right:1px; }
.basic-post-gallery .post-vicon { position:absolute; left:6px; top:6px; color: #fff; font-size:20px; z-index:1; text-shadow: 1px 1px 1px #000; }
.basic-post-gallery .post-none { padding:50px 10px; text-align:center; color:#888; }
.basic-post-gallery .post-row { float:left; overflow:hidden; }
.basic-post-gallery .post-image { position:relative; transition: all 0.5s ease; }
.basic-post-gallery .post-image img { object-fit : cover; }
.basic-post-gallery .post-image:has(.ca-soldout):not(:hover) img { filter : grayscale(80%); }
.basic-post-gallery .post-image:hover { transform:scale(1.06); filter: drop-shadow(2px 2px 2px gray); outline: 2px solid white; }
.basic-post-gallery .post-image:not(:has(.ca-soldout)):hover .post-ca-name { animation: 400ms anim-lineUp ease-out; }
.basic-post-gallery .post-content { padding-top:10px; margin:-2px 0px; }
.basic-post-gallery .post-subject { overflow:hidden; letter-spacing:-1px; padding-right:1px; }
.basic-post-gallery .post-ca-name { position:absolute; right:4px; bottom:2px; color: #fff; font-size:14px; z-index:1; text-shadow: 1px 1px 1px #000; }
.basic-post-gallery .post-image:has(.ca-soldout) .post-ca-name { position:absolute; left:50%; top:50%; transform: translate(-50%, -20%); color: #fff; font-size:1.2rem; z-index:1; text-shadow: 2px 2px 3px #000; }

.basic-post-gallery .post-sp { color:#ccc; margin:0px 4px; }
.basic-post-gallery .post-text { font-size:12px; color:#888; margin-top:4px; }
.is-pc .ko .basic-post-gallery .post-ko { font-size:11px; }

.down {
	opacity : 0;
	transform : translateY(100%) scale(0.8);
	transition : all 1s ease;
}

.updown {
	opacity : 0;
	transform : translateY(-100%) scale(0.8);
	transition : all 1s ease;
}

.down.show, .updown.show {
	opacity : 1;
	transform : translateX(0) scale(1);
}

@keyframes anim-lineUp {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  50% {
    opacity: 0.5;
    transform: translateY(-30%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}