.case-page{background:var(--light)}.case-header{position:absolute;inset:0 0 auto;z-index:10;height:94px;padding:0 var(--pad);display:flex;justify-content:space-between;align-items:center;color:var(--white)}.case-header>a:last-child{font:12px var(--display);letter-spacing:.12em}.case-header>a:last-child span{font-size:20px;margin-left:12px}.case-hero{height:100svh;min-height:680px;position:relative;color:var(--white);overflow:hidden}.case-hero-image{position:absolute;inset:0}.case-hero-image::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0b0c0a66,#0b0c0a12 45%,#0b0c0ab3)}.case-hero-title{position:absolute;left:var(--pad);bottom:12vh}.case-hero-title>p{font:10px var(--display);letter-spacing:.2em}.case-hero h1{font:400 clamp(68px,12vw,170px)/.66 var(--display);letter-spacing:-.025em;margin-top:38px}.case-hero h1 em{margin-left:10vw}.case-hero-title>div{display:flex;gap:60px;margin-top:55px;font:10px var(--display);letter-spacing:.16em}.case-scroll{position:absolute;right:var(--pad);bottom:42px;font:10px var(--display);letter-spacing:.16em}.case-overview{padding:clamp(110px,15vw,210px) var(--pad);display:grid;grid-template-columns:1.15fr .85fr;gap:12vw}.case-intro h2,.case-story h2,.case-result h2{font-size:clamp(30px,4vw,58px);font-weight:400;line-height:1.75;margin-top:22px}.case-data dl{border-top:1px solid var(--line)}.case-data dl div{display:grid;grid-template-columns:110px 1fr;padding:13px 0;border-bottom:1px solid var(--line);font:11px var(--display)}.case-data dt{color:var(--muted)}.case-data>p{margin-top:45px;font-size:13px;color:#5f5f58}.case-wide{padding:0 var(--pad)}.case-wide img{height:min(72vw,900px)}.case-wide>p{margin-top:12px;font:9px var(--display);letter-spacing:.15em;color:var(--muted)}.case-story{padding:clamp(110px,14vw,190px) 12vw;display:grid;grid-template-columns:1.1fr .9fr;gap:10vw}.case-story>div:last-child{padding-top:50px;font-size:13px;color:#5f5f58}.case-story>div:last-child p+p{margin-top:28px}.case-duo{display:grid;grid-template-columns:.8fr 1.2fr;gap:7vw;align-items:end;padding:0 var(--pad) clamp(130px,17vw,240px)}.case-duo figure:first-child{width:86%}.case-duo figure:first-child img{aspect-ratio:2/3}.case-duo figure:last-child img{aspect-ratio:4/3}.case-duo figcaption{padding-top:10px;font:9px var(--display);letter-spacing:.14em;color:var(--muted)}.case-feature{background:var(--ink);color:var(--paper);display:grid;grid-template-columns:.8fr 1.2fr;min-height:850px}.case-feature-copy{padding:clamp(80px,11vw,160px) clamp(30px,8vw,120px);align-self:center}.case-feature h2{font-size:clamp(30px,4vw,58px);font-weight:400;line-height:1.75;margin-top:25px}.case-feature-copy>p:last-child{font-size:12px;color:#99998f;margin-top:40px}.case-grid{padding:clamp(110px,15vw,210px) var(--pad);display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.case-grid img{aspect-ratio:3/2}.case-result{padding:0 var(--pad) clamp(130px,17vw,240px);max-width:1050px}.case-result>p:last-child{max-width:650px;margin:40px 0 0 auto;color:#5f5f58;font-size:13px}.case-next{background:var(--paper);padding:90px var(--pad)}.case-next>p{font:10px var(--display);letter-spacing:.2em;color:var(--muted)}.case-next a{display:flex;justify-content:space-between;align-items:end;margin-top:30px;padding-bottom:20px;border-bottom:1px solid var(--ink)}.case-next a span{font:clamp(35px,7vw,90px)/1 var(--display)}.case-next a b{font-size:12px;font-weight:400}.case-footer{padding:55px var(--pad) 30px;background:var(--ink);color:var(--paper);display:grid;grid-template-columns:1fr auto;gap:35px}.case-footer div b{display:block;font:22px var(--display);letter-spacing:.2em}.case-footer div span,.case-footer a{font:10px var(--display);letter-spacing:.13em;color:#999}.case-footer small{grid-column:1/-1;border-top:1px solid #ffffff20;padding-top:22px;font:9px var(--display);color:#666}
@media(max-width:800px){.case-overview,.case-story{grid-template-columns:1fr}.case-feature{grid-template-columns:1fr}.case-feature img{min-height:65svh}.case-data{margin-top:20px}}
@media(max-width:600px){.case-header{height:74px}.case-header .brand small{display:none}.case-hero h1{font-size:68px;line-height:.74}.case-hero h1 em{margin-left:7vw}.case-hero-title>div{gap:30px;margin-top:45px}.case-scroll{display:none}.case-overview{padding-block:100px;gap:55px}.case-intro h2,.case-story h2,.case-result h2{font-size:24px;line-height:1.85;letter-spacing:.03em}.case-wide{padding:0}.case-wide img{height:70svh}.case-wide>p{padding:0 20px}.case-story{padding:100px 20px}.case-story>div:last-child{padding-top:0}.case-duo{grid-template-columns:1fr;gap:80px;padding-bottom:120px}.case-duo figure:first-child{width:82%}.case-duo figure:last-child{width:92%;margin-left:auto}.case-feature{min-height:0}.case-feature-copy{padding:90px 25px}.case-feature h2{font-size:26px;line-height:1.8;letter-spacing:.03em}.case-grid{grid-template-columns:1fr;padding-block:100px}.case-grid img{aspect-ratio:4/3}.case-next a{display:block}.case-next a span{font-size:34px;line-height:1.1}.case-next a b{display:block;margin-top:25px}.case-footer{grid-template-columns:1fr}.case-footer small{grid-column:auto}}

/* ============================================================
   日本語の改行制御（index と同じルールを実例ページにも適用）
   ============================================================ */
.case-intro h2,.case-story h2,.case-feature h2,.case-result h2,
.case-data p,.case-story p,.case-feature-copy p,.case-result p,
.case-wide p{
  word-break:auto-phrase;
  line-break:strict;
}
.case-intro h2,.case-story h2,.case-feature h2,.case-result h2{text-wrap:balance}
.case-data p,.case-story p,.case-feature-copy p,.case-result p{text-wrap:pretty}

/* 見出しがカラム幅に対して大きすぎて、作者が <br> で意図した2行が
   3〜4行に割れていた。画面幅(vw)ではなく「その見出しが入る段の幅」を
   基準にサイズを決めることで、2段組→1段組の切り替わりでも破綻しない。 */
.case-story>div:first-child{container-type:inline-size}
.case-feature-copy{container-type:inline-size}
.case-story h2{font-size:clamp(21px,7.6cqw,40px)}
.case-feature h2{font-size:clamp(23px,10cqw,35px)}
@media(max-width:359px){
  .case-intro h2,.case-result h2{font-size:21.5px}
}

/* 2段組のままの中間幅では、左右パディングが段幅を圧迫して
   見出しが入りきらなくなるため、その帯だけ余白を詰める */
@media(min-width:601px) and (max-width:1000px){
  .case-feature-copy{padding-inline:clamp(26px,4.2vw,52px)}
}