@charset "utf-8";

/* ========================================================
	BOOKアニメーション
====================================================== */

.ksc-book-container{
    padding-top: 120px;
}

/* ── Book ───────────────────────────────────── */
.ksc-book-shell{
  width:min(1100px,100%);
  aspect-ratio:16/9;
  position:relative;
  margin: 0 auto;
}
#ksc-book{
  width:100%;height:100%;
  position:relative;
  perspective:2000px;
  perspective-origin:50% 50%;
  box-shadow:0 20px 56px rgba(0,0,0,0.18);
}

/* ── テキスト ──────────────────────────────── */
#ksc-book-baseText, #ksc-book-curText{
  position:absolute;
  left:0;top:0;width:28%;height:100%;
  overflow:hidden;
  z-index:1;
}
#ksc-book-curText{ z-index:2; }

/* ── 下レイヤー画像（28%〜100%、z:1）─────────── */
#ksc-book-baseImg{
  position:absolute;
  left:28%;top:0;width:72%;height:100%;
  z-index:1;
}
#ksc-book-baseImg .ksc-book-bg-inner{
  position:absolute;
  left:0;top:0;width:100%;height:100%;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:brightness(.88) saturate(.85);
}
#ksc-book-baseImg .ksc-book-ov{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(5,3,2,.52) 0%,transparent 50%);
}
#ksc-book-baseImg .ksc-book-cap{
  position:absolute;
  bottom:clamp(12px,2vw,28px);right:clamp(14px,2.2vw,28px);
  text-align:right;
}

/* ── 静止左半分（28%〜50%、z:2）─────────────── */
#ksc-book-staticImgLeft{
  position:absolute;
  left:28%;top:0;
  width:calc(22% + 1px);
  height:100%;
  z-index:2;
  overflow:hidden;
}
#ksc-book-staticImgLeft .ksc-book-bg-inner{
  position:absolute;
  left:0;top:0;
  width:327.27%;
  height:100%;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:brightness(.88) saturate(.85);
}

/* ── フリップカード（50%〜100%、z:3）────────── */
#ksc-book-flipCard{
  position:absolute;
  left:50%;top:0;width:50%;height:100%;
  z-index:3;
  transform-origin:left center;   /* スパイン = book の50% */
  transform-style:preserve-3d;
  will-change:transform;
}
#ksc-book-flipFace{
  position:absolute;inset:0;
  overflow:hidden;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
#ksc-book-flipFace .ksc-book-bg-inner{
  position:absolute;
  left:-44%;top:0;
  width:144%;
  height:100%;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:brightness(.88) saturate(.85);
}
#ksc-book-flipFace .ksc-book-ov{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(5,3,2,.52) 0%,transparent 50%);
}
#ksc-book-flipFace .ksc-book-cap{
  position:absolute;
  bottom:clamp(12px,2vw,28px);right:clamp(14px,2.2vw,28px);
  text-align:right;
}

#ksc-book-flipShadow{
  position:absolute;inset:0;
  background:linear-gradient(to left,
    rgba(0,0,0,.34) 0%,
    rgba(0,0,0,.10) 32%,
    transparent 62%
  );
  opacity:0;
  pointer-events:none;
  z-index:1;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}


/* ── スパイン影 ─────────────────────────────── */
.ksc-book-spine-shadow{
  position:absolute;top:0;bottom:0;
  left:calc(50% - 12px);width:24px;
  background:linear-gradient(to right,
    transparent 0%,
    rgba(0,0,0,.09) 28%,
    rgba(0,0,0,.28) 47%,
    rgba(0,0,0,.28) 53%,
    rgba(0,0,0,.09) 72%,
    transparent 100%
  );
  z-index:10;pointer-events:none;
}

/* ── Page-left ──────────────────────────────── */
.ksc-book-page-left{
  width:100%;
  height:100%;
  background:#fff;
  font-size: clamp(0.9rem,3vw,1rem);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(12px,20%,80px);
  position:relative;
}
.ksc-book-page-left::after{
  content:'';position:absolute;right:0;top:10%;bottom:10%;
  width:1px;background:#c9b98e;opacity:0.4;
}
.ksc-book-l-eye  {font-size:clamp(8px,1vw,10px);letter-spacing:.38em;color:#c9b98e;text-transform:uppercase;margin-bottom:clamp(10px,3vw,24px);font-weight:300;}
.ksc-book-l-kanji{font-size:clamp(48px,8vw,96px);line-height:1;color:#111;font-weight:300;margin-bottom:clamp(6px,1.5vw,14px);}
.ksc-book-l-kanji img {
  height: clamp(48px, 15vw, 180px);
  width: auto;
  display: block;
  margin-bottom: clamp(6px, 1.5vw, 14px);
}
.ksc-book-l-roman{font-size:clamp(16px,2.2vw,24px);letter-spacing:.1.2em;color:#777;font-weight:300;margin-bottom:clamp(8px,1.8vw,18px);text-align: center;}
.ksc-book-l-rule {width:50%;height:1px;background:#c9b98e;margin: 0 auto clamp(8px, 3.6vw, 38px);}
.ksc-book-l-desc {font-size:clamp(9px,1.1vw,11px);line-height:clamp(12px,2vw,20px);color:var(--gray05);font-weight:300;margin: 0 auto clamp(8px, 3.6vw, 38px);}
.ksc-book-l-num  {position:absolute;bottom:clamp(10px,2.5%,18px);right:clamp(12px,3%,28px);font-size:9px;letter-spacing:.22em;color:#c9b98e;}
.ksc-book-cap-cat  {display:block;font-size:clamp(8px,.9vw,10px);letter-spacing:.32em;color:#c9b98e;text-transform:uppercase;margin-bottom:5px;}
.ksc-book-cap-title{font-size:clamp(14px,2.4vw,24px);color:#fff;font-weight:300;letter-spacing:.06em;line-height:1.25;}

/* ── Dots ───────────────────────────────────── */
.ksc-book-dots{display:flex;justify-content:center;gap:8px;margin-top:20px;}
.ksc-book-dot{width:18px;height:1px;background:#c9b98e;opacity:.3;transition:opacity .4s,width .4s;}
.ksc-book-dot.ksc-book-on{opacity:1;width:30px;}