/* ============ Reset / Base ============ */
:root{ --header-height:86px; }
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ font-size:18px; color:#262626; background:#fff url("../images/common-bg-ptn.jpg") repeat center top; background-size:77.777em; position:relative; font-family:'Noto Serif SC', serif; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ max-width:100%; height:auto; vertical-align:bottom; }
a{ color:inherit; text-decoration:none; }
a.hv_fade{ transition:opacity .25s ease, filter .25s ease; }
a.hv_fade:hover{ opacity:.72; filter:brightness(1.04); }
ul,ol{ list-style:none; }
button{ font:inherit; }
.skip-link{ position:fixed; top:8px; left:8px; z-index:100; padding:.45em .8em; color:#fff; background:#3a3732; border-radius:.35em; transform:translateY(-150%); transition:transform .2s ease; }
.skip-link:focus{ transform:translateY(0); }
:focus-visible{ outline:3px solid #c514b8; outline-offset:3px; }
[id="Story"], [id="Character"], [id="Staffcast"], [id="Music"]{ scroll-margin-top:var(--header-height); }
.is-hidden{ display:none !important; }
.al-ct{ text-align:center; }
.pre{ white-space:pre-line; }
.fnt-b{ font-weight:700; }
.fnt-exb{ font-weight:900; }
.fnt-14{ font-size:.778em; }
.fnt-16{ font-size:.889em; }
.fnt-color-2{ color:#ca329d; }
.lh1{ line-height:1; }
.inview{ opacity:0; transform:translateY(30px); transition:opacity .9s ease, transform .9s ease; }
.inview.show{ opacity:1; transform:translateY(0); }
.cont-w1200{ max-width:1200px; margin:0 auto; padding:0 10px; }
.cont-w1200 > .inner{ padding:1em 0 1.5em; }
.grid12{ display:flex; flex-wrap:wrap; }
.grid-center{ justify-content:center; }
.col12-3{ width:25%; padding:.5em; }
.col12-4{ width:33.333%; padding:.5em; }
.col12-5{ width:41.666%; padding:.5em; }
.col12-6{ width:50%; padding:.5em; }
.col12-7{ width:58.333%; padding:.5em; }
.col12-12{ width:100%; padding:.5em; }
.pdr05{ padding-right:.5em; }
.pdr025{ padding-right:.25em; }
.mgr0b{ margin-bottom:0; }
.mgr05b{ margin-bottom:.5em; }

/* ============ Background flora ============ */
#Background{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
#Background > div{ position:absolute; background-repeat:no-repeat; background-size:contain; opacity:.5; }
.bg-flora-1{ top:5%; left:-5%; width:380px; height:380px; background:url("../images/common-flora-l.png") no-repeat center/contain; }
.bg-flora-2{ top:40%; right:-8%; width:420px; height:420px; background:url("../images/common-flora-r.png") no-repeat center/contain; }
.bg-flora-3{ bottom:5%; left:3%; width:340px; height:340px; background:url("../images/common-flora-l.png") no-repeat center/contain; }

/* ============ Header / Nav ============ */
.part-header{ position:fixed; top:0; left:0; width:100%; z-index:50; background:rgba(255,255,255,.92) url("../images/common-bg-ptn.jpg") repeat center top; background-size:77.777em; box-shadow:0 2px 10px rgba(0,0,0,.12); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:background-color .3s ease, box-shadow .3s ease; }
.part-header.is-scrolled{ background-color:rgba(255,255,255,.98); box-shadow:0 4px 18px rgba(0,0,0,.16); }
.cont-global-navi{ position:relative; }
.cont-global-navi::before{ content:""; display:block; width:100%; height:calc(6/36*1em); position:relative; border-top:calc(8/36*1em) solid #ccc; border-bottom:calc(6/36*1em) solid #ccc; box-sizing:content-box; }
.cont-global-navi::after{ content:""; display:block; width:100%; height:calc(6/36*1em); position:relative; border-top:calc(6/36*1em) solid #ccc; border-bottom:calc(8/36*1em) solid #ccc; box-sizing:content-box; }
.global-navi{ max-width:1280px; margin:0 auto; padding:4px 20px; }
.global-navi > ul{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; }
.global-navi > ul > li{ padding:.2em .6em; }
.global-navi > ul > li.logo{ margin-right:auto; }
.global-navi > ul > li.logo img{ height:54px; width:auto; }
.global-navi > ul > li a{ color:#000; display:block; }
.global-navi > ul > li a span{ font-family:'Cinzel', serif; font-size:1.1em; letter-spacing:.06em; display:block; transition:color .2s, transform .2s; }
.global-navi > ul > li a:hover span{ color:#c514b8; transform:scale(1.06); }
.global-navi > ul > li a.is-active span{ color:#c514b8; transform:scale(1.06); }
.global-navi > ul > li a.is-active::after{ content:""; display:block; height:2px; margin:3px auto 0; background:#c514b8; animation:nav-marker-in .25s ease-out both; }
@media (min-width: 901px){
  .global-navi{ display:block; padding:3px 16px; }
  .global-navi > ul{ width:100%; justify-content:flex-end; gap:.35em; }
  .global-navi > ul > li{ padding:.2em .45em; }
  .global-navi > ul > li.logo{ display:block; }
  .global-navi > ul > li a span{ font-size:1em; }
}

/* ============ Body wrapper ============ */
.part-body{ position:relative; z-index:2; padding-top:var(--header-height); }

/* ============ Main Visual ============ */
.cont-top-visual{ position:relative; }
.kv-container{ position:relative; overflow:hidden; background-color:#000; aspect-ratio:16/9; }
.kv-bg{ position:absolute; inset:0; z-index:0; }
.kv-bg img{ width:100%; height:100%; object-fit:cover; opacity:.55; }
.kv-set{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; opacity:0; transition:opacity 1.2s ease-in-out; }
.kv-set.active{ opacity:1; z-index:2; }
.kv-set.kv-holder{ position:relative; }
.kv-set.kv-holder:not(.active){ opacity:0; visibility:hidden; }
/* 底部渐变遮罩 */
.kv-gradient{ position:absolute; bottom:0; left:0; right:0; height:90px; background:linear-gradient(to top, rgba(0,0,0,.35), transparent); pointer-events:none; z-index:5; }
/* 轮播指示器 */
.kv-indicators{ position:absolute; bottom:18px; left:0; right:0; z-index:10; display:flex; justify-content:center; gap:8px; }
.kv-indicator{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; transition:all .3s ease; }
.kv-indicator{ border:0; padding:0; }
.kv-indicator.active{ width:30px; border-radius:5px; background:#fff; }
.kv-set .vis{ position:relative; width:100%; height:100%; }
.kv-set .vis img{ width:100%; height:100%; object-fit:cover; display:block; }
.kv-set .chara-a, .kv-set .chara-b, .kv-set .chara{ position:absolute; bottom:0; z-index:2; max-height:100%; }
.kv-set .chara-a img, .kv-set .chara-b img, .kv-set .chara img{ max-height:100%; object-fit:contain; }
.kv-set .chara-a{ left:0; width:46%; }
.kv-set .chara-b{ right:0; width:40%; }
.kv-set .chara{ right:6%; width:42%; }
/* 第三章右图宽高比特殊,按高度撑满并与左图底边对齐 */
.kv-set[data-kv="3"] .chara-b{ height:100%; }
.kv-set[data-kv="3"] .chara-b img{ height:100%; width:auto; }
.kv-set.active .vis img{ animation:kv-scene-in 1.35s ease-out both; }
.kv-set.active .chara-a img, .kv-set.active .chara img{ animation:kv-layer-in-left .8s .12s cubic-bezier(.22,.61,.36,1) both; }
.kv-set.active .chara-b img{ animation:kv-layer-in-right .8s .18s cubic-bezier(.22,.61,.36,1) both; }
.kv-set.active .chara-a, .kv-set.active .chara{ animation:kv-float-a 5s 1s ease-in-out infinite; }
.kv-set.active .chara-b{ animation:kv-float-b 4.5s 1.1s ease-in-out infinite; }
.kv-set .logo{ position:absolute; top:6%; left:50%; transform:translateX(-50%); z-index:3; width:60%; max-width:760px; filter:drop-shadow(0 0 18px rgba(120,180,255,.85)) drop-shadow(0 0 6px #fff); }
.kv-set .logo img{ width:100%; }
.op{ position:relative; z-index:2; text-align:center; padding:2em 1em; background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.35)); }
.op .logo{ max-width:520px; margin:0 auto 1em; filter:drop-shadow(0 0 14px rgba(120,180,255,.8)); }
.op .oa{ max-width:760px; margin:0 auto; }
.op .oa img{ width:100%; }
@keyframes kv-scene-in{
  from{ opacity:.55; transform:scale(1.045); }
  to{ opacity:1; transform:scale(1); }
}
@keyframes kv-layer-in-left{
  from{ opacity:0; transform:translate3d(-18px, 10px, 0); }
  to{ opacity:1; transform:translate3d(0, 0, 0); }
}
@keyframes kv-layer-in-right{
  from{ opacity:0; transform:translate3d(18px, 10px, 0); }
  to{ opacity:1; transform:translate3d(0, 0, 0); }
}
@keyframes kv-float-a{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}
@keyframes kv-float-b{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(5px); }
}
@keyframes nav-marker-in{
  from{ opacity:0; transform:scaleX(.2); }
  to{ opacity:1; transform:scaleX(1); }
}

/* ============ Section common ============ */
.cont-top-content{ position:relative; padding:.5em 0 2em; overflow:hidden; }
.cont-title{ display:flex; align-items:center; justify-content:center; gap:16px; text-align:center; margin:.75em 0 1em; }
.cont-title span{ display:inline-block; }
.cont-title img{ max-width:420px; width:80%; filter:drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
.cont-title::before, .cont-title::after{ content:""; flex:1 1 120px; max-width:170px; height:14px; background:url("../images/common-deco-line2.png") repeat-x center/auto 14px; opacity:.68; }
.pc-navi-padding{ height:.5em; }
.staffcast-pd{ height:1em; }
.intro-pd{ height:1em; }

/* ============ Story ============ */
.cont-top-story .cont-top-content{ background-color:#eee8dc; background-image:linear-gradient(180deg,rgba(238,232,220,.16),rgba(238,232,220,.62)), url("../images/top-story-bg.jpg"); background-position:center top; background-size:cover; }
.story-container{ position:relative; width:100%; max-width:1120px; margin:0 auto; }
.story-container::before, .story-container::after{ content:""; display:block; width:100%; background-repeat:no-repeat; background-position:center; background-size:100% auto; pointer-events:none; }
.story-container::before{ height:clamp(74px, 11.43vw, 128px); background-image:url("../images/intro-container-bgu.png"); background-position:center bottom; }
.story-container::after{ height:clamp(62px, 9.52vw, 107px); background-image:url("../images/intro-container-bgb.png"); background-position:center top; }
.story-container > #StoryCont{ position:relative; padding:0 0 1px; background:url("../images/intro-container-bgm.png") repeat-y center top/100% auto; }
.cont-subnavi{ text-align:center; margin:0 auto 1.5em; }
.cont-subnavi > nav > ul{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.cont-story-navi{ padding:0 .75em; }
.cont-story-navi > nav > ul{ gap:0; }
.cont-story-navi > nav > ul > li{ padding:.1em; }
.cont-story-navi > nav ul li a{ display:inline-block; background:rgba(255,255,255,.6); color:#3a3732; border:0; border-radius:3em; padding:.3em 0; width:2.1em; font-family:'Cinzel',serif; transition:background .25s, color .25s; }
.cont-story-navi > nav ul li a span{ display:block; font-size:1em; line-height:1; font-weight:900; }
.cont-story-navi > nav ul li.intro a{ width:auto; padding:.3em .5em; }
.cont-story-navi > nav ul li.crt a{ background:#3a3732; color:#fff; }
.cont-story-navi > nav ul li a:hover{ background:rgba(58,55,50,.82); color:#fff; }
.story-data{ position:relative; overflow:hidden; color:#3a3732; background-color:rgba(255,255,255,.3); padding:2em; margin:0 5em 2em; max-width:none; border:0; border-radius:2em; box-shadow:none; display:none; }
.story-data::before{ content:""; position:absolute; inset:10px; border:1px solid rgba(155,132,0,.14); border-radius:1.1em; pointer-events:none; }
.story-data.active{ display:block; animation:story-panel-in .65s cubic-bezier(.22,.61,.36,1) both; }
.story-data .ep-title{ position:relative; z-index:1; font-size:1.6em; text-align:center; margin:0 auto 1.4em; padding:0 0 .9em; color:#3a3732; background:url("../images/story-eptitle-line.png") no-repeat center bottom/min(100%, 36em) auto; }
.story-data .ep-title-label{ display:inline-block; background:#3a3732; color:#fff; border-radius:.4em; padding:.1em .8em; font-size:.7em; margin-right:.5em; vertical-align:middle; }
.ep-title-sub{ position:relative; z-index:1; text-align:center; font-size:1.2em; color:#9b6a00; margin:1.2em 0 .5em; }
.ep-slider-sceneImage{ position:relative; z-index:1; display:block; max-width:920px; min-height:0; aspect-ratio:16/9; box-sizing:content-box; overflow:hidden; padding:.5em; background-color:#f7f3e7; margin:0 auto 1em; filter:drop-shadow(0 0 .4em #3a3732); }
.ep-slider-sceneImage > div{ display:none; overflow:hidden; }
.ep-slider-sceneImage > div:first-child{ display:block; }
.ep-slider-sceneImage.is-ready > div:first-child{ display:none; }
.ep-slider-sceneImage.is-ready > div.is-active{ display:block; animation:story-scene-in .5s ease-out both; }
.ep-slider-sceneImage img{ width:100%; display:block; cursor:zoom-in; transition:transform .5s ease, filter .3s ease; }
.ep-slider-sceneImage img:hover{ transform:scale(1.018); filter:brightness(1.04); }
.ep-text{ position:relative; z-index:1; max-width:760px; margin:0 auto 1.6em; text-align:center; line-height:2; letter-spacing:.06em; }
.ep-staff{ position:relative; z-index:1; font-size:.85em; color:#5e5340; text-align:center; max-width:760px; margin:0 auto 1.6em; line-height:2.1; letter-spacing:.04em; }
.ep-trailer-title{ text-align:center; color:#9b6a00; margin-bottom:.5em; }
.ep-trailer{ position:relative; z-index:1; max-width:520px; padding:.4em; background-color:#f7f3e7; margin:0 auto; filter:drop-shadow(0 0 .3em #3a3732); }
.ep-trailer img{ width:100%; display:block; }
.story-slider-dots{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:7px; margin:0 auto 1.7em; }
.story-slider-dot{ width:9px; height:9px; padding:0; border:1px solid #9b8400; border-radius:50%; background:transparent; cursor:pointer; transition:transform .2s, background .2s; }
.story-slider-dot:hover{ transform:scale(1.2); }
.story-slider-dot.is-active{ background:#9b8400; transform:scale(1.25); }
@keyframes story-panel-in{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
@keyframes story-scene-in{ from{ opacity:0; transform:translateX(12px); } to{ opacity:1; transform:translateX(0); } }
.intro-text{ max-width:760px; margin:0 auto; text-align:center; line-height:2; font-size:1em; color:#3a3732; }
.story-lightbox{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:5vh 4vw; background:rgba(20,18,25,.86); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s ease, visibility .25s ease; }
.story-lightbox.open{ opacity:1; visibility:visible; pointer-events:auto; }
.story-lightbox img{ max-width:92vw; max-height:88vh; width:auto; height:auto; object-fit:contain; background:#f7f3e7; box-shadow:0 12px 42px rgba(0,0,0,.35); }
.story-lightbox-close{ position:absolute; top:18px; right:22px; width:42px; height:42px; border:1px solid rgba(255,255,255,.6); border-radius:50%; color:#fff; background:rgba(0,0,0,.25); font-size:1.8rem; line-height:1; cursor:pointer; }
.story-lightbox-close:hover{ background:rgba(255,255,255,.18); }
body.lightbox-open{ overflow:hidden; }

/* ============ Character ============ */
.cont-top-character .cont-top-content{ background-color:#00b5ff; position:relative; overflow:hidden; }
.cont-top-character .cont-w1200{ position:relative; z-index:1; }
.character-bg{ width:100%; min-height:105%; background:url("../images/top-main/3/vis.jpg") no-repeat center top; background-size:cover; opacity:.7; position:absolute; top:0; left:0; z-index:0; }
.character-bg-leaf{ width:33em; height:26.777em; background:url("../images/common-flora-r.png") no-repeat center center; background-size:contain; position:absolute; top:22em; right:0; opacity:.6; z-index:0; }
.character-bg-line{ width:100%; position:absolute; top:26em; left:0; z-index:0; opacity:.6; }
.character-bg-line::before, .character-bg-line::after{ content:""; display:block; width:100%; height:calc(25/36*1em); background:url("../images/common-deco-line2.png") repeat-x center top; background-size:auto calc(25/36*1em); position:relative; margin:0; padding:4px 0; z-index:1; }
.character-bg-line::before{ border-top:#FFF solid 2px; }
.character-bg-line::after{ border-bottom:#FFF solid 2px; }
.character-bg-line > div{ width:100%; height:18em; background:#FFF; }
.cont-character-navi{ position:relative; z-index:2; margin:0 auto 1.8em; }
.cont-character-navi > nav > ul{ display:flex; flex-wrap:wrap; justify-content:center; gap:0; }
.cont-character-navi > nav > ul li{ width:8em; margin-right:1em; }
.cont-character-navi > nav > ul li:last-child{ margin-right:0; }
.cont-character-navi > nav > ul li button{ display:block; width:100%; cursor:pointer; border:0; padding:0; background:transparent; color:inherit; }
.cont-character-navi > nav > ul li img{ width:100%; border:0; border-radius:0; box-shadow:none; transition:transform .2s ease; }
.cont-character-navi > nav > ul li button:hover img, .cont-character-navi > nav > ul li button:focus-visible img{ transform:scale(1.1); }
.cont-character-navi > nav > ul li.crt img{ transform:scale(1.1); }
.character-data{ position:relative; display:none; max-width:1080px; min-height:40em; margin:0 auto; }
.character-data.active{ display:block; animation:character-panel-in .48s cubic-bezier(.22,.61,.36,1) both; }
.chr-img{ position:relative; z-index:1; width:64%; margin:0; }
.chr-img::after{ display:none; }
.chr-img img{ width:100%; }
.chr-prof{ position:absolute; z-index:2; top:10em; right:0; width:40%; margin:0; padding:.3em; border:2px solid rgba(255,255,255,.6); line-height:1; background:transparent; box-shadow:none; border-radius:0; backdrop-filter:none; -webkit-backdrop-filter:none; }
.chr-prof > .inner{ position:relative; overflow:visible; background:rgba(255,255,255,.6); padding:1em; border:0; border-radius:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
.chr-prof > .inner::before, .chr-prof > .inner::after{ display:none; }
.character-data.active .chr-img{ animation:character-image-in .58s cubic-bezier(.22,.61,.36,1) both; }
.character-data.active .chr-prof{ animation:character-copy-in .48s .08s cubic-bezier(.22,.61,.36,1) both; }
.chr-prof .alp, .chr-prof .cv{ display:inline-block; font-size:1em; color:#3a3732; letter-spacing:0; margin:0 0 1em; }
.chr-prof .alp::after{ content:"｜"; }
.chr-prof .cv span{ font-family:inherit; }
.chr-prof .name{ font-size:2em; font-weight:900; line-height:1.2; color:#2f3440; margin:0; padding:0; border:0; }
.chr-prof .profile{ margin:0; font-size:1em; line-height:1.8; }
@keyframes character-panel-in{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes character-image-in{
  from{ opacity:0; transform:translateX(-18px) scale(.985); }
  to{ opacity:1; transform:translateX(0) scale(1); }
}
@keyframes character-copy-in{
  from{ opacity:0; transform:translateX(18px); }
  to{ opacity:1; transform:translateX(0); }
}

/* ============ Staff & Cast ============ */
.cont-top-staffcast .cont-top-content{ background-color:rgba(155,202,145,.3); }
.staffcast-container{ max-width:1100px; margin:0 auto; }
.staffcast-list{ justify-content:center; }
.staffcast-list .pos{ font-size:.85em; color:#3a6b2e; margin-bottom:.1em; }
.staffcast-list .name{ font-weight:700; }
.staffcast-list .org{ font-size:.8em; color:#5e5340; }

/* ============ Music ============ */
.cont-top-music .cont-top-content{ background-color:rgba(214,186,0,.2); }
.cont-music-navi > nav > ul{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.cont-music-navi > nav > ul li a{ display:inline-block; background:rgba(255,255,255,.6); color:#3a3732; border-radius:3em; padding:.4em 1.4em; transition:background .2s; }
.cont-music-navi > nav > ul li.crt a{ background:rgba(58,55,50,1); color:#fff; }
.cont-music-navi > nav > ul li a:hover{ background:rgba(58,55,50,.7); color:#fff; }
.music-data{ max-width:900px; margin:0 auto; display:none; }
.music-data.active{ display:block; }
.music-data .msc-img{ margin-bottom:1em; }
.music-data .msc-img img{ width:100%; }
.music-data .msc-prof{ background:rgba(255,255,255,.5); padding:1.5em; border-radius:1em; }
.music-data .title-label{ color:#c514b8; font-weight:700; }
.music-data .title{ font-size:1.6em; font-weight:900; margin:.2em 0; }
.music-data .artist{ color:#0093d7; }
.music-data .sale{ color:#9b8400; margin-bottom:.8em; }
.music-data .list{ list-style:decimal; padding-left:1.5em; }

/* ============ Footer ============ */
.part-footer{ position:relative; z-index:2; }
.cont-global-footer{ margin:0 auto; padding:0; position:relative; text-align:center; }
.cont-global-footer > .inner{ padding:.5em 0; position:relative; }
.cont-global-footer > .inner::before, .cont-global-footer > .inner::after{ content:""; display:block; width:100%; height:calc(25/36*1em); background:url("../images/common-deco-line2.png") repeat-x center top; background-size:auto calc(25/36*1em); position:relative; margin:0; padding:4px 0; z-index:1; }
.cont-global-footer > .inner::before{ border-top:#FFF solid 2px; }
.cont-global-footer > .inner::after{ border-bottom:#FFF solid 2px; }
.footer-pagetop{ position:fixed; right:20px; bottom:20px; z-index:60; cursor:pointer; display:none; }
.footer-pagetop.is-visible{ display:block; }
.footer-pagetop img{ width:50px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.footer-copyrihgt{ background-color:#FFF; padding:2em 0; text-align:center; }
.footer-copyrihgt p{ font-size:.888em; margin:0; color:#5e5340; }

/* ============ Mobile menu ============ */
.sp-btn{ display:none; cursor:pointer; width:40px; height:40px; border:none; background:transparent; position:absolute; top:50%; right:16px; transform:translateY(-50%); z-index:5; }
.sp-btn .menu-toggle-icon{ position:relative; display:block; width:22px; height:16px; margin:0 auto; }
.sp-btn .menu-line{ position:absolute; left:0; width:100%; height:2.4px; border-radius:999px; background:#2d3748; transition:top .24s ease, transform .24s ease, opacity .18s ease; }
.sp-btn .menu-line:nth-child(1){ top:1px; }
.sp-btn .menu-line:nth-child(2){ top:calc(50% - 1.2px); }
.sp-btn .menu-line:nth-child(3){ top:calc(100% - 3.4px); }
.sp-btn.is-open .menu-line:nth-child(1){ top:calc(50% - 1.2px); transform:rotate(45deg); }
.sp-btn.is-open .menu-line:nth-child(2){ opacity:0; transform:scaleX(.2); }
.sp-btn.is-open .menu-line:nth-child(3){ top:calc(50% - 1.2px); transform:rotate(-45deg); }
.sp-menu-backdrop{ position:fixed; inset:0; z-index:40; background:rgba(38,35,31,.2); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .28s ease, visibility .28s ease; }
.sp-menu-backdrop.open{ opacity:1; visibility:visible; pointer-events:auto; }
.sp-menu{ position:fixed; top:var(--header-height); left:12px; right:12px; width:auto; max-height:calc(100dvh - var(--header-height) - 16px); background:rgba(255,255,255,.96) url("../images/common-bg-ptn.jpg") repeat center top; background-size:77.777em; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); z-index:80; border:1px solid rgba(58,55,50,.14); border-radius:18px; box-shadow:0 16px 40px rgba(38,35,31,.2); overflow:auto; opacity:0; transform:translateY(-12px) scale(.98); transform-origin:top center; pointer-events:none; transition:opacity .28s ease, transform .28s cubic-bezier(.22,.61,.36,1); }
.sp-menu::before{ content:"MENU"; display:block; padding:15px 20px 9px; color:#9b8400; border-bottom:1px solid rgba(155,132,0,.18); font-family:'Cinzel',serif; font-size:.72em; letter-spacing:.18em; }
.sp-menu.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.sp-menu ul{ padding:8px 10px 12px; }
.sp-menu ul li + li{ border-top:1px solid rgba(58,55,50,.1); }
.sp-menu ul li a{ position:relative; display:flex; align-items:center; justify-content:space-between; min-height:52px; padding:12px 12px 12px 14px; color:#2f3440; border-radius:10px; font-family:'Cinzel',serif; font-size:1.02em; letter-spacing:.06em; transition:background-color .2s ease, color .2s ease, padding-left .2s ease; }
.sp-menu ul li a::after{ content:"→"; color:#9b8400; font-family:Arial,sans-serif; font-size:1.05em; opacity:.55; transition:transform .2s ease, opacity .2s ease; }
.sp-menu ul li a:hover, .sp-menu ul li a:focus-visible{ background:rgba(197,20,184,.08); color:#c514b8; padding-left:18px; }
.sp-menu ul li a:hover::after, .sp-menu ul li a:focus-visible::after{ opacity:1; transform:translateX(3px); }
.sp-menu ul li a.is-active{ background:rgba(197,20,184,.1); color:#c514b8; font-weight:700; }
.sp-menu ul li a.is-active::before{ content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:3px; background:#c514b8; }
body.sp-menu-open{ overflow:hidden; }

/* ============ Responsive ============ */
@media (max-width: 900px){
  :root{ --header-height:77px; }
  .global-navi > ul > li:not(.logo){ display:none; }
  .sp-btn{ display:block; }
  .global-navi > ul > li.logo img{ height:46px; }
  body{ font-size:16px; }
  [id="Story"], [id="Character"], [id="Staffcast"], [id="Music"]{ scroll-margin-top:var(--header-height); }
  .part-body{ padding-top:var(--header-height); }
  .col12-3,.col12-4,.col12-5,.col12-6,.col12-7{ width:100%; }
  .col12-5-sm,.col12-4-sm,.col12-3-sm{ width:50% !important; }
  .col12-12-sm{ width:100% !important; }
  .story-container{ width:111.111%; margin-left:-5.5555%; margin-bottom:0; padding:0; }
  .story-container::after{ height:clamp(34px, 9.64vw, 107px); background-color:#eee8dc; }
  .story-container > #StoryCont{ border-left:0; border-right:0; }
  .cont-top-story .cont-top-content{ padding-bottom:0; }
  .cont-top-story .cont-w1200 > .inner{ padding-bottom:0; }
  .cont-top-story .intro-pd{ height:0; }
  .cont-story-navi{ padding:0 2em; }
  .ep-slider-sceneImage{ min-height:0; }
  .cont-character-navi > nav > ul li{ width:7em; }
  .character-data{ min-height:0; }
  .chr-img{ width:100%; max-width:420px; margin:0 auto; }
  .chr-prof{ position:relative; top:auto; right:auto; width:90%; max-width:520px; margin:0 auto; }
  .chr-prof > .inner{ padding:1.2em; }
  .chr-prof .alp, .chr-prof .cv{ font-size:.98em; }
  .chr-prof .name{ font-size:1.7em; }
  .chr-prof .profile{ font-size:.92em; line-height:1.9; }
  .ep-trailer{ max-width:90%; }
  .story-data{ padding:1.5em 1em; margin:0 2em 1.5em; border-radius:1.5em; }
  .story-data::before{ inset:7px; border-radius:.8em; }
  .story-data .ep-title{ font-size:1.28em; padding-bottom:.8em; }
  .intro-text{ max-width:none; margin:0; }
  .ep-text{ max-width:none; margin:0 0 1.6em; }
  .ep-text{ font-size:1em; letter-spacing:.02em; }
  .ep-staff{ font-size:.78em; letter-spacing:0; }
  .cont-title img{ max-width:300px; }
  .cont-title{ gap:8px; }
  .cont-title::before, .cont-title::after{ flex-basis:36px; max-width:48px; height:10px; background-size:auto 10px; }
  .cont-title img{ width:min(220px, 70vw); }
  .kv-set .logo{ width:80%; }
  .spbr{ display:block; }
}
@media (min-width: 901px){
  .spbr{ display:none; }
}

/* ============ Lazy load ============ */
img.image-placeholder{
  background-color:#e7e1d8;
  background-image:linear-gradient(rgba(255,255,255,.28) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.24) 1px, transparent 1px);
  background-size:20px 20px;
  animation:imgLoading 2s infinite;
}
@keyframes imgLoading{
  0%{ background-position:0 0; }
  100%{ background-position:40px 40px; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .inview{ opacity:1; transform:none; }
}