html,body{margin:0;padding:0}img{max-width:100%}[hidden]{display:none!important}
:root{
  color-scheme:light;
  --red:#8f0000; --mustard:#dcb84f; --ink:#2d2d2d; --paper:#ebe5d9;
  --brown:#6b3329; --teal:#5b8fa3; --night:#2e1f33; --fire:#c8361b; --amber:#f7b84b;
  --paper-2:#f4efe6; --muted:#5e554d; --enji:#9e2a36;
  --title:"Yu Gothic","YuGothic","游ゴシック体","游ゴシック","Hiragino Sans",sans-serif;
  --body:"Zen Kaku Gothic New","Yu Gothic","YuGothic","Hiragino Sans",sans-serif;
  --num:"Anton","Impact","Arial Narrow",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.9;
  background-image:radial-gradient(color-mix(in srgb,var(--ink) 7%,transparent) 1px,transparent 1.2px);background-size:5px 5px}
a{color:inherit}
:focus-visible{outline:3px solid var(--fire);outline-offset:3px}

/* 共通 */
.sec{padding-inline:16px;padding-block:72px}
.inner{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:32px}
.label{display:flex;align-items:center;gap:14px}
.label .en{font-family:var(--num);font-size:15px;letter-spacing:.2em;background:var(--ink);color:var(--paper);padding:2px 12px}
.label h2{font-family:var(--title);font-weight:700;font-size:clamp(26px,4.4vw,38px);margin:0;letter-spacing:.06em;text-wrap:balance}

/* カウントダウン */
.cd{background:var(--ink);color:var(--paper);padding-inline:16px;padding-block:48px 56px;position:relative}
.cd::before,.cd::after{content:"";position:absolute;left:0;right:0;height:10px;background:repeating-linear-gradient(-45deg,var(--mustard) 0 14px,var(--ink) 14px 28px)}
.cd::before{top:0}.cd::after{bottom:0}
.cd .inner{align-items:center;text-align:center;gap:20px}
.cd .ttl{font-family:var(--title);font-weight:700;font-size:clamp(18px,3vw,24px);letter-spacing:.1em;margin:0}
.cd .ttl b{color:var(--mustard)}
.cd .date{font-family:var(--num);font-size:clamp(22px,4vw,30px);letter-spacing:.06em;color:var(--mustard)}
.cd .date small{font-family:var(--title);font-weight:700;font-size:.6em;margin-inline:.3em;color:var(--paper)}
.digits{display:flex;gap:clamp(6px,2vw,16px);justify-content:center;flex-wrap:nowrap}
.digit{display:flex;flex-direction:column;align-items:center;gap:6px}
.digit .n{font-family:var(--num);font-variant-numeric:tabular-nums;font-size:clamp(46px,12vw,112px);line-height:1;background:var(--paper);color:var(--red);padding:10px clamp(8px,2vw,18px) 6px;min-width:1.6em;text-align:center;box-shadow:5px 5px 0 var(--fire);position:relative}
.digit .n::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--ink);opacity:.25}
.digit .u{font-family:var(--title);font-weight:700;font-size:13px;letter-spacing:.2em}
.cd .cta{display:inline-flex;align-items:center;gap:10px;font-family:var(--title);font-weight:700;font-size:17px;letter-spacing:.08em;background:var(--mustard);color:var(--ink);text-decoration:none;padding:12px 28px;box-shadow:4px 4px 0 var(--fire)}
.sns{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:8px}
.sns p{margin:0;font-family:var(--title);font-weight:700;font-size:15px;letter-spacing:.08em}
.sns ul{list-style:none;margin:0;padding:0;display:flex;gap:14px}
.sns a{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--paper);color:var(--ink);transition:background .15s,color .15s}
.sns a:hover{background:var(--mustard)}
.sns svg{width:22px;height:22px;fill:currentColor}


.kv{margin:0;line-height:0}.kv picture,.kv img{display:block;width:100%;height:auto}


.kv-scene{display:block;position:relative;aspect-ratio:16/9;overflow:hidden}.kv-scene picture{position:absolute;inset:0;width:100%;height:100%}.kv-scene img{width:100%;height:100%;display:block}@media(max-width:600px){.kv-scene{aspect-ratio:4/5}.kv-scene picture:not(.kv-paper){right:auto;bottom:auto;height:auto;aspect-ratio:16/9}.kv-scene .kv-paper img{object-fit:cover}.kv-scene .kv-flame{width:180%;left:-40%;top:5%}.kv-scene .kv-catch{width:100%;left:0;top:2%}.kv-scene .kv-women{width:145%;left:-22.5%;top:17%}.kv-scene .kv-apartments{width:200%;left:-50%;top:10%}.kv-scene .kv-man{width:200%;left:-6%;top:-3%;z-index:3}.kv-scene .kv-title{width:180%;left:-40%;top:15%}}


/* 監督・脚本 */
.staff{background:var(--paper);border-bottom:3px solid var(--ink)}
.staff-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 40px}
@media (max-width:760px){.staff-list{grid-template-columns:minmax(0,1fr)}}
.person{display:grid;grid-template-columns:112px minmax(0,1fr);gap:6px 20px;align-items:start;border-left:6px solid var(--enji);padding:4px 0 4px 18px;min-width:0}
.person .face{grid-row:span 3;width:112px;aspect-ratio:1;max-width:100%;border-radius:50%;overflow:hidden;background:color-mix(in srgb,var(--ink) 12%,var(--paper-2));display:grid;place-items:center;font-size:11px;color:var(--muted);text-align:center;line-height:1.4}
.person .face img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:420px){.person{grid-template-columns:minmax(0,1fr)}.person .face{grid-row:auto;width:96px}}
.person .role{font-family:var(--title);font-weight:700;font-size:13px;letter-spacing:.2em;color:var(--enji)}
.person .name{font-family:var(--title);font-weight:700;font-size:clamp(26px,4vw,34px);line-height:1.2;letter-spacing:.06em}
.person p{margin:0;font-size:14px;line-height:1.8;color:var(--muted);max-width:34em}
/* クレジット */
footer{background:var(--ink);color:var(--paper);padding-inline:16px;padding-block:48px 40px}
footer .inner{align-items:center;text-align:center;gap:22px}
footer .mark{width:min(320px,100%)}
footer .mark img{display:block;width:100%;height:auto}
footer dl{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 28px;margin:0;font-size:14px}
footer dl div{display:flex;gap:8px}
footer dt{opacity:.75}
footer dd{margin:0;font-weight:700}

/* あらすじ */
.story .inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:40px;align-items:start}
.story .label{grid-column:1/-1}
.story .text{display:flex;flex-direction:column;gap:1.1em;max-width:36em}
.story .text p{margin:0}
.story .text .hl{font-family:var(--title);font-weight:700;font-size:clamp(22px,3.4vw,30px);line-height:1.5;color:var(--red);text-wrap:balance}
.story .text .em{font-family:var(--title);font-weight:700}
.story .ad{background:var(--paper-2);border:3px solid var(--ink);padding:18px;display:flex;flex-direction:column;gap:12px;transform:rotate(1.2deg);box-shadow:6px 6px 0 var(--teal)}
.story .ad .h{font-family:var(--title);font-weight:700;font-size:22px;color:var(--red);letter-spacing:.06em;line-height:1.3;border-bottom:3px double var(--ink);padding-bottom:8px}
.story .ad ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.story .ad li{background:var(--ink);color:var(--mustard);font-family:var(--title);font-weight:700;text-align:center;padding:6px 4px;font-size:14px}
.story .ad .s{font-family:var(--title);font-weight:700;font-size:15px;color:var(--ink);margin:0;text-align:center}
@media (max-width:760px){.story .inner{grid-template-columns:minmax(0,1fr)}.story .ad{transform:none}}


/* 予定 */
.tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;position:relative}
.tl::before{content:"";position:absolute;left:11px;top:10px;bottom:10px;width:4px;background:var(--ink)}
.tl li{display:grid;grid-template-columns:26px minmax(0,190px) minmax(0,1fr);gap:16px;align-items:baseline;padding-block:14px;border-bottom:1px dashed color-mix(in srgb,var(--ink) 40%,transparent);position:relative}
.tl li::before{content:"";width:26px;height:26px;border-radius:50%;background:var(--paper);border:4px solid var(--ink);box-sizing:border-box;align-self:center;position:relative;z-index:1}
.tl li.done::before{background:var(--ink)}
.tl li.now::before{background:var(--fire);border-color:var(--fire);box-shadow:0 0 0 5px color-mix(in srgb,var(--fire) 30%,transparent)}
.tl li.cf::before{background:var(--mustard)}
.tl .when{font-family:var(--title);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.tl .what{font-family:var(--title);font-weight:700;font-size:clamp(17px,2.4vw,20px);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tl .what .tag{font-family:var(--body);font-size:12px;font-weight:700;padding:0 8px;background:var(--fire);color:var(--paper);letter-spacing:.08em}
.tl li.cf .what .tag{background:var(--mustard);color:var(--ink)}
.tl li.cf{background:color-mix(in srgb,var(--mustard) 22%,transparent)}
@media (max-width:560px){.tl li{grid-template-columns:26px minmax(0,1fr);gap:2px 14px}.tl li::before{grid-row:span 2}.tl .when{grid-column:2}.tl .what{grid-column:2}}
.tl-note{font-size:12px;color:var(--muted);margin:0}


.cast{background:var(--paper-2);border-block:3px solid var(--ink)}.subh{font-family:var(--title);font-weight:700;font-size:17px;letter-spacing:.1em;margin:0}.cast-names{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;margin:0}.cast-names div{border-bottom:1px dashed var(--muted);padding:8px 0;min-width:0}.cast-names dt{font-size:14px;color:var(--muted)}.cast-names dd{margin:0;font-weight:700}.cast-names small{font-size:11px}.others{border-top:2px solid var(--ink);padding-top:20px}.others p{margin:0;line-height:2;font-size:14px}.thanks-list{display:grid;gap:16px}.thanks-list img{display:block;width:min(300px,70%);height:auto;margin-bottom:16px}.thanks-list p{margin:0}.thanks-list strong{font-size:18px}@media(max-width:600px){.cast-names{grid-template-columns:repeat(2,minmax(0,1fr))}}

.film-credits{padding:0;background:#211f1e;color:#f4efe6;font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN",serif}.credits-inner{max-width:1040px;margin:auto;padding:56px 16px 48px;text-align:center}.film-credits .mark{width:min(240px,70%);margin:0 auto 36px}.credit-roles{display:grid;gap:14px;font-size:14px;line-height:1.7}.credit-roles p,.credit-support p,.credit-production,.credit-heading{margin:0}.credit-thanks{margin:38px auto 0}.credit-heading{font-size:15px;letter-spacing:.08em}.credit-partners{display:flex;justify-content:center;align-items:center;gap:20px;margin:22px auto 20px;flex-wrap:wrap}.partner-showa{position:relative;width:220px;height:64px;overflow:hidden}.partner-showa img{position:absolute;width:120%;max-width:none;height:auto;left:50%;top:50%;transform:translate(-50%,-50%)}.partner-spatial{position:relative;width:220px;height:95px;overflow:hidden}.partner-spatial img{position:absolute;width:120%;max-width:none;height:auto;left:50%;top:50%;transform:translate(-50%,-50%)}.credit-support{display:flex;justify-content:center;gap:8px 28px;flex-wrap:wrap;font-size:13px;line-height:1.7}.credit-production{margin-top:40px;font-size:14px}.credit-bottom{border-top:1px solid #47433f;padding:12px max(20px,5vw);display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:Arial,sans-serif;color:#aaa}.credit-bottom small{font-size:12px}.credit-bottom img{display:block;width:48px;height:48px;object-fit:contain}@media(max-width:600px){.credits-inner{padding:44px 16px 40px}.credit-roles{font-size:13px;gap:12px}.credit-partners{gap:10px}.partner-showa{width:min(190px,48%)}.partner-spatial{width:min(190px,48%);height:86px}.credit-bottom{padding-inline:16px}.credit-bottom small{font-size:10px}.credit-bottom img{width:42px;height:42px}}

.credit-production-sal{margin-top:14px}
