/* Approved NOBISHIRO hero. All rules scoped to this page header and hero. */
.nobishiro-page{--fv-ink:#06152f;--fv-blue:#0754ff;--fv-title:clamp(36px,7.1vw,109px);--fv-lead:clamp(22px,3.2vw,49px);--fv-body:clamp(16px,2.15vw,33px)}
.nobishiro-page .fv-stage>.nav{background:#f0f7fd;color:var(--fv-ink);border:0;position:relative}
.nobishiro-page .fv-stage>.nav .wrap{max-width:1536px;padding:0 40px;height:86px}
.nobishiro-page .fv-stage>.nav .brand{display:block;width:220px;height:44px;overflow:hidden;flex-shrink:0;mix-blend-mode:multiply}
.nobishiro-page .fv-stage>.nav .brand img{width:240px;max-width:none;height:80px;transform:translate(-10px,-17px)}
.nobishiro-page .fv-stage>.nav .navlinks{font-weight:700;font-size:14px;gap:42px}
#hero.fv-diagnosis{background:#f3f8ff;color:var(--fv-ink);position:relative;isolation:isolate;overflow:hidden;min-height:calc(100svh - 86px);max-height:1040px;padding:clamp(80px,7.2vw,112px) 0 100px;display:flex;align-items:flex-start}
#hero .fv-gallery{position:absolute;inset:-5%;z-index:-2;pointer-events:none;animation:gallery-drift 24s ease-in-out infinite alternate;will-change:transform}
#hero .fv-gallery img{width:100%;height:100%;object-fit:cover;object-position:center}
#hero:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,transparent 20%,#ffffff40 38%,#ffffff40 62%,transparent 80%)}
#hero .split{display:block;width:100%;max-width:1536px;padding:0 24px;margin:0 auto}
#hero .fv-copy{text-align:center;margin:auto;width:100%;max-width:1100px}
#hero .eyebrow{font-size:var(--fv-lead);font-weight:800;line-height:1.45;letter-spacing:-.04em;color:var(--fv-ink);margin:0 0 42px}
#hero h1{font-size:var(--fv-title);font-weight:900;line-height:1.15;letter-spacing:-.065em;color:var(--fv-ink);white-space:nowrap}
#hero .intro{font-size:var(--fv-body);font-weight:700;line-height:1.6;letter-spacing:-.025em;color:var(--fv-ink);margin:28px auto 0}
#hero .cta{background:var(--fv-blue);color:white;width:min(560px,90%);min-width:0;min-height:88px;font-size:clamp(20px,2.5vw,32px);font-weight:800;margin-top:36px;box-shadow:0 12px 30px #0754ff18}
#hero .cta:after{content:"→";right:32px;font-size:1.15em}
#hero .cta:hover{background:#0345d8}
#hero .note{color:var(--fv-ink);font-size:clamp(11px,1.4vw,16px);font-weight:600;margin:18px auto 0}
#hero .fv-motion{position:absolute;right:22px;bottom:18px;border:1px solid #63769160;background:#ffffffd9;color:#243b59;border-radius:20px;min-height:36px;padding:4px 12px;font-size:11px;display:flex;gap:8px;align-items:center}
#hero[data-paused=true] .fv-gallery{animation-play-state:paused}
@keyframes gallery-drift{from{transform:translate3d(-.8%,-1%,0) scale(1.015)}to{transform:translate3d(.8%,1.5%,0) scale(1.065)}}
@media(max-width:700px){.nobishiro-page .fv-stage>.nav .wrap{height:68px;padding:0 20px}.nobishiro-page .fv-stage>.nav .brand{width:170px;height:38px}.nobishiro-page .fv-stage>.nav .brand img{width:186px;height:62px;transform:translate(-8px,-12px)}.nobishiro-page .fv-stage>.nav .navlinks{display:none}#hero.fv-diagnosis{min-height:min(760px,calc(100svh - 68px));max-height:none;padding:74px 0 100px}#hero .split{padding:0 18px}#hero .fv-gallery{inset:-3% -4%;opacity:.7}#hero .fv-gallery img{object-fit:fill}#hero:after{background:linear-gradient(90deg,#ffffff25,#ffffffbd 25%,#ffffffbd 75%,#ffffff25)}#hero .eyebrow{margin-bottom:32px}#hero .intro{margin-top:24px;line-height:1.8}#hero .cta{margin-top:30px;width:100%;min-height:66px;padding-left:36px;padding-right:36px}#hero .cta:after{right:20px}#hero .note{margin-top:16px}#hero .fv-motion{bottom:14px;right:16px}}
@media(prefers-reduced-motion:reduce){#hero .fv-gallery{animation:none;transform:none;will-change:auto}#hero .fv-motion{display:none}#hero .cta{transition:none}}

/* Native scroll advances the approved background video; foreground geometry stays fixed. */
#hero .fv-gallery{animation:none;transform:none;will-change:auto}
/* Header and hero share one 100svh stage that stays pinned until the background sequence ends. */
.fv-scroll-region{position:relative}
.fv-stage{position:sticky;top:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.fv-stage>#hero.fv-diagnosis{flex:1 0 auto;min-height:0;max-height:none}
@media(prefers-reduced-motion:reduce){.fv-scroll-region{height:auto!important}.fv-stage{position:relative}}

#hero .fv-gallery .fv-static{display:none}
@media(prefers-reduced-motion:reduce){#hero .fv-gallery>img{display:none}#hero .fv-gallery .fv-static{display:block}}

#hero .fv-title-art{display:block;position:relative;overflow:hidden;width:min(100%,7.2em);height:1.15em;margin:0 auto}
#hero .fv-title-art img{position:absolute;display:block;width:103.24%;max-width:none;height:auto;left:-1.95%;top:50%;transform:translateY(-49.6%)}
/* Short desktop viewports: tighten only the hero's vertical padding so the pinned 100svh stage keeps CTA and note visible. */
@media(min-width:701px) and (max-height:860px){#hero.fv-diagnosis{padding-top:clamp(28px,6vh,80px);padding-bottom:48px}#hero .eyebrow{margin-bottom:clamp(20px,3.6vh,42px)}}
/* 2026-09-15 スマホ: FVは画面の高さに固定せず中身の高さ。ロゴはボタンと同じ幅。背景の動きは固定せず通過する間に進める。 */
@media(max-width:700px){.fv-stage{position:relative;min-height:0}#hero.fv-diagnosis{min-height:0;padding:72px 0 88px}#hero .fv-title-art{width:100%;height:auto;aspect-ratio:7.2/1.15}}