/* Reusable responsive building blocks for subpages on body[data-layout="fluid"].
   Tokens (--container, --edge, --fs-*, --section-y) live in chrome.css. */
body[data-layout="fluid"][data-page]{max-width:none}
body[data-layout="fluid"] #app{color:var(--navy)}
body[data-layout="fluid"] #app :is(h1,h2,h3,h4,p,ul,dl,dd){margin:0}
body[data-layout="fluid"] #app ul{list-style:none;padding:0}

.f-section{padding-block:var(--section-y)}
.f-band{background:var(--band)}
.f-stack{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,1.4vw,20px)}
.f-eyebrow{font:700 var(--fs-xs)/1.6 "Noto Sans JP",sans-serif;letter-spacing:.08em;color:var(--navy)}
.f-title{font:400 var(--fs-h2)/1.5 "Noto Serif JP",serif;color:var(--navy)}
.f-title-s{font:400 var(--fs-h2s)/1.55 "Noto Serif JP",serif;color:var(--navy)}
.f-body{font:400 var(--fs-body)/1.95 "Noto Serif JP",serif;color:var(--ink)}
/* 高さは各ページの aspect-ratio に任せる。img の height 属性に負けないよう auto を明示する。 */
.f-media{width:100%;height:auto;object-fit:cover;border-radius:4px}
.f-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:center}
.f-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;border-radius:999px;font:700 15px/1 "Noto Sans JP",sans-serif;white-space:nowrap;background:var(--navy);color:white}
.f-button-outline{background:white;color:var(--navy);border:1px solid #21456f}
/* 主要CTA。既存トークンのテラコッタで、紺一色のページから前に出す。高さは large(56px)。 */
.f-button-cta{min-height:56px;padding:0 32px;background:var(--terracotta)}
/* Hover/focus (lift, shadow, arrow, color) for .f-button/.f-button-outline live in interactions.css. */
.f-link{display:inline-flex;gap:8px;font:700 var(--fs-sm)/1.8 "Noto Sans JP",sans-serif;color:inherit;text-decoration:underline;text-underline-offset:4px}

/* Page hero: photo bleeds right, copy aligns with the header. */
/* Same height on every subpage: proportional to width, so photos match across pages. */
.f-hero{position:relative;display:flex;align-items:stretch;min-height:clamp(580px,48.5vw,780px);overflow:hidden;background:white}
.f-hero-media{position:absolute;inset:0 0 0 40%;width:60%;height:100%;object-fit:cover}
/* 白のかぶせは、写真の位置ではなく文章の塊に合わせる。見出しが長いページでは
   自然に広がり、短いページでは写真が広く見える。 */
.f-hero:after{content:"";position:absolute;inset:0 auto 0 36%;width:18%;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.f-hero-copy{position:relative;width:fit-content}
.f-hero-copy::before{content:"";position:absolute;z-index:-1;top:-100vh;bottom:-100vh;left:calc(-1 * var(--edge) - 50vw);right:-14%;background:linear-gradient(90deg,#fff 0%,#fff 88%,rgba(255,255,255,0) 100%)}
/* 1行目にパンくず、残りに文字の塊。器を縦いっぱいにするので、パンくずの高さは
   文章量に関わらずどのページでも同じになる。 */
.f-hero-inner{position:relative;z-index:1;display:grid;grid-template-rows:auto 1fr;padding-block:clamp(24px,2.6vw,36px) clamp(40px,3.5vw,64px)}
.f-hero-inner > .pg-breadcrumb{align-self:start}
.f-hero-copy{align-self:center}
.f-hero-copy{max-width:640px;gap:clamp(16px,1.8vw,24px)}
.f-hero h1{font:400 var(--fs-h1)/1.4 "Noto Serif JP",serif;letter-spacing:.03em;color:var(--navy)}
.f-hero .f-body{font-size:var(--fs-lead)}
body[data-layout="fluid"] .pg-breadcrumb{font-size:var(--fs-xs);line-height:1.6;gap:8px}
/* ヒーローの中では、文章量に関わらずヘッダー直下の同じ高さに置く。 */


/* Full-bleed photo band with copy on a dark gradient. */
.f-photo-band{position:relative;display:flex;align-items:center;min-height:clamp(380px,36vw,600px);overflow:hidden;color:white}
.f-photo-band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.f-photo-band:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,20,33,.78),rgba(5,20,33,.5) 38%,rgba(5,20,33,0) 70%)}
.f-photo-band .l-container{position:relative;z-index:1;padding-block:var(--section-y)}
.f-photo-band :is(.f-eyebrow,.f-title,.f-body){color:white}
.f-photo-band .f-body{font-family:"Noto Sans JP",sans-serif}

/* Closing contact band (pageCta) in the responsive layout. */
body[data-layout="fluid"] .pg-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px;min-height:0;padding:clamp(48px,5.5vw,96px) var(--edge)}
/* 白のかぶせは、帯全体ではなく文章の塊に付ける。こうすると文章量に応じて
   かぶせの幅も変わり、短い文では写真が広く見え、長い文でも文字が読める。 */
body[data-layout="fluid"] .pg-cta:after{display:none}
body[data-layout="fluid"] .pg-cta-copy::before{content:"";position:absolute;z-index:-1;top:-100vh;bottom:-100vh;left:calc(-1 * var(--edge) - 50vw);right:-14%;background:linear-gradient(90deg,#fff 0%,#fff 88%,rgba(255,255,255,0) 100%)}
body[data-layout="fluid"] .pg-cta-copy{position:relative;padding:0;gap:10px;width:max-content;max-width:min(100%,44em)}
body[data-layout="fluid"] .pg-cta h2{font:700 var(--fs-h2s)/1.55 "Noto Sans JP",sans-serif}
body[data-layout="fluid"] .pg-cta p{font:400 var(--fs-body)/1.8 "Noto Sans JP",sans-serif}
body[data-layout="fluid"] .pg-cta .pg-button-cta{position:relative;left:auto;top:auto;z-index:1;width:auto;height:auto;min-height:56px;min-width:220px;padding:0 32px;font-size:15px}

@media(max-width:1023px){
 .f-hero-media{left:32%;width:68%}
 .f-hero:after{left:32%;width:30%}
 .f-hero-copy{max-width:56%}
}
@media(max-width:767px){
 .f-split{grid-template-columns:1fr}
 .f-hero{flex-direction:column;align-items:stretch;min-height:0}
 .f-hero-media{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:4/3}
 /* 文章の後ろに敷く白い板は、写真と文章が横に並ぶときのもの。上下に100vhずつ伸ばしてあるので、
    縦に積むこの幅では上の写真をほぼ全部覆い、冒頭が真っ白に見えていた（全サブページ、公開時から）。 */
 .f-hero-copy::before{display:none}
 .f-hero:after{inset:auto 0 auto 0;top:calc(75vw - 80px);width:100%;height:80px;background:linear-gradient(0deg,#fff,rgba(255,255,255,0))}
 .f-hero-inner{padding-block:0 48px}
 .f-hero-copy{max-width:none}
 .f-body br{display:none}
 .f-photo-band{min-height:0}
 .f-photo-band:after{background:linear-gradient(90deg,rgba(5,20,33,.72),rgba(5,20,33,.45))}
 /* 1fr だけだと列の最小幅が中身の幅（max-content）になり、長い見出しが画面の外へ出て切れる。 */
 body[data-layout="fluid"] .pg-cta{grid-template-columns:minmax(0,1fr);padding:48px var(--gutter-x)}
 body[data-layout="fluid"] .pg-cta .pg-button-cta{justify-self:start;margin-top:0}
}

/* 404 ページ（site/pages/notfound.js） */
.nf{min-height:60vh;display:flex;align-items:center}
.nf-inner{gap:clamp(18px,2vw,28px)}
.nf-links{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:8px}