@charset "utf-8";
/* ==========================================================================
   株式会社Arigatou ／ B案（コーポレート型）共通CSS
   全6ページがこの1枚を読む。トークンは docs/03b_bplan_design.md §8 が正。
   値を変えない・増やさない（変更禁止リスト①）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. トークン（docs/03b §8 をそのまま）
   -------------------------------------------------------------------------- */
:root{
  /* 名刺・ロゴ由来（B案専用。A案のトークンと混同しない） */
  --cream:#f6f1e3;        /* 名刺の地・ページ地 */
  --cream-2:#efe8d6;      /* 面（カード＝窓の地） */
  --forest:#143a2e;       /* 名刺の深緑＝支配面 */
  --forest-deep:#0e2a21;  /* フッター・scrim濃部 */
  --gold:#c39a4d;         /* 罫線・弧・アイコン（面塗り禁止・文字色にしない） */
  --gold-lit:#d9b76a;     /* 深緑面「上」の英字ラベル専用（AA確保） */
  --navy:#1b3157;         /* ロゴのA＝見出し文字色 */
  --ink:#17263c;          /* 本文（紺墨） */
  --muted:#6b7386;        /* キャプション・注記 */
  --line:#d9cfb6;         /* クリーム上の罫線 */
  --on-forest:#f6f1e3;    /* 深緑面上の文字 */

  --font-display:"Shippori Mincho B1", serif;   /* 和文見出し 600 */
  --font-latin:"Cormorant Garamond", serif;     /* 英字小ラベル 500 */
  --font-body:"Zen Kaku Gothic New", sans-serif;/* 本文 400/700 */

  --radius:2px;                 /* 名刺の直線的な角。丸ピル999px禁止 */
  --shadow:0 1px 2px rgba(20,58,46,.10);   /* 薄く1段のみ */
  --space-lg:clamp(5rem,12vw,10rem);   /* 広：FV下・about・story章間 */
  --space:clamp(3.5rem,8vw,7rem);      /* 標準 */
  --space-sm:clamp(2.4rem,5vw,4rem);   /* 密：会社概要・内訳列挙 */
  --gutter:clamp(1.2rem,5vw,2.5rem);
}

/* --------------------------------------------------------------------------
   2. リセット＋日本語改行（japanese_linebreak_standard §1）
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  font-size:16px;
  line-height:1.9;
  letter-spacing:.01em;
}
body,p,li,dt,dd,h1,h2,h3,h4,figcaption,a,th,td,summary,blockquote{
  line-break:strict;
  text-wrap:pretty;
  word-break:normal;
  overflow-wrap:anywhere;
}
h1,h2,h3,h4,p,figure,dl,dd,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit}
.nobr{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ロゴ画像（透過PNG。深緑面には -white 版、クリーム面には通常版を使う） */
.logo-img{display:block;height:auto}

/* --------------------------------------------------------------------------
   3. 版面・セクション余白（3段階を用途固定で使う）
   -------------------------------------------------------------------------- */
.wrap{width:min(1180px,100%);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{width:min(768px,100%)}
.sec{padding-block:var(--space)}          /* 標準：4事業・写真帯・ご連絡先 */
.sec--lg{padding-block:var(--space-lg)}   /* 広：FV直下（代表挨拶） */
.sec--sm{padding-block:var(--space-sm)}   /* 密：会社概要・内訳列挙 */
.sec--forest{background:var(--forest);color:var(--on-forest)}
.sec--deep{background:var(--forest-deep);color:var(--on-forest)}
.sec[id]{scroll-margin-top:64px}

/* --------------------------------------------------------------------------
   4. 文字階層（和文明朝600 ÷ 本文400 ＝ 2.2倍以上）
   -------------------------------------------------------------------------- */
.h1,.h2,.h3{font-family:var(--font-display);font-weight:600;letter-spacing:.02em;color:var(--navy)}
.h1{font-size:clamp(2.4rem,9.4vw,4.2rem);line-height:1.34}
.h2{font-size:clamp(2.4rem,8vw,3.5rem);line-height:1.38}
.h3{font-size:clamp(2.3rem,7vw,2.9rem);line-height:1.4}
.sec--forest .h1,.sec--forest .h2,.sec--forest .h3,
.sec--deep .h1,.sec--deep .h2,.sec--deep .h3{color:var(--on-forest)}

.label-en{
  font-family:var(--font-latin);font-weight:500;
  font-size:clamp(.9rem,2.8vw,.95rem);
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--navy);margin-block-end:.55em;
}
.sec--forest .label-en,.sec--deep .label-en,.fv .label-en{color:var(--gold-lit)}

.lead{font-size:clamp(1rem,4vw,1.12rem);line-height:1.85}
.note{font-size:1rem;color:var(--muted);line-height:1.8}
.sec--forest .note,.sec--deep .note{color:rgba(246,241,227,.78)}

/* 金の極細罫（面で塗らない） */
.rule-gold{width:100%;height:1px;border:0;margin:0;background:var(--gold);opacity:.85}
.rule-gold--short{width:64px}

/* --------------------------------------------------------------------------
   5. 窓（深緑の面に浮くクリームの矩形）／イラスト枠
   -------------------------------------------------------------------------- */
.window{
  background:var(--cream);
  border:1px solid var(--gold);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  color:var(--ink);
}
.ill{
  background:var(--cream-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(1rem,4.4vw,1.7rem);
  color:var(--gold);          /* 線画は金の1本線（docs/03b §6-3） */
}
.ill svg{width:100%;height:auto;display:block}
.ill figcaption{margin-block-start:.7em;font-size:1rem;color:var(--muted);line-height:1.7}

/* --------------------------------------------------------------------------
   6. ボタン（角丸2px・丸ピル禁止）
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:.6em 1.5em;
  border:1px solid var(--gold);border-radius:var(--radius);
  background:transparent;color:var(--navy);
  font-weight:700;font-size:1rem;line-height:1.5;
  text-decoration:none;text-align:center;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease;
}
.btn--on-forest{color:var(--on-forest)}
.btn:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.sec--forest .btn:focus-visible,.sec--deep .btn:focus-visible,.fv .btn:focus-visible{outline-color:var(--gold-lit)}
@media (hover:hover){
  .btn:hover{background:var(--forest);border-color:var(--forest);color:var(--on-forest)}
  .btn--on-forest:hover{background:var(--cream);border-color:var(--cream);color:var(--forest)}
}
.tel-btn{
  display:flex;align-items:center;justify-content:center;gap:.4em;
  width:100%;max-width:34rem;min-height:56px;padding:.7em 1.2em;
  border:1px solid var(--gold);border-radius:var(--radius);
  background:var(--forest);color:var(--on-forest);
  font-weight:700;font-size:clamp(1rem,4.2vw,1.15rem);line-height:1.5;
  text-decoration:none;
  transition:background-color .25s ease;
}
.tel-btn:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
@media (hover:hover){.tel-btn:hover{background:var(--forest-deep)}}

/* --------------------------------------------------------------------------
   7. 引用（明朝・鍵括弧大）
   -------------------------------------------------------------------------- */
.quote{
  position:relative;
  padding:clamp(1.6rem,6vw,2.4rem) clamp(1.3rem,5.5vw,2.4rem);
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.18rem,4.6vw,1.55rem);line-height:1.9;
  color:var(--navy);
}
.quote p+p{margin-block-start:.5em}

/* --------------------------------------------------------------------------
   8. ギャラリー（縦1列／PCは2〜3列・等高にしない）
   -------------------------------------------------------------------------- */
.gallery{display:grid;gap:clamp(.9rem,3.6vw,1.3rem)}
.gallery figcaption{margin-block-start:.55em;font-size:1rem;color:var(--muted);line-height:1.7}
.sec--forest .gallery figcaption,.sec--deep .gallery figcaption{color:rgba(246,241,227,.78)}
.ph{width:100%;border-radius:var(--radius)}
.ph--tall{aspect-ratio:4/5;object-fit:cover}
.ph--wide{aspect-ratio:16/9;object-fit:cover}
.ph--free{height:auto}
@media (min-width:840px){
  .gallery--2{grid-template-columns:1.25fr .95fr;align-items:start}
  .gallery--3{grid-template-columns:1.35fr .9fr;align-items:start}
}

/* --------------------------------------------------------------------------
   9. ヘッダー（無操作時は深緑実体。FV最上部でのみ透明）
   -------------------------------------------------------------------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:40;
  color:var(--on-forest);
  background:var(--forest);
  border-block-end:1px solid rgba(195,154,77,.45);
  transition:background-color .3s ease,border-color .3s ease;
}
.site-header.is-top{background:transparent;border-block-end-color:transparent}
.header-inner{
  display:flex;align-items:center;gap:10px;
  min-height:56px;
  padding-inline:clamp(.9rem,4.4vw,2.5rem);
}
.brand{display:flex;align-items:center;gap:9px;min-width:0;min-height:44px;text-decoration:none;color:inherit;margin-inline-end:auto}
.brand img{height:30px;width:auto;flex:none}
.brand-name{display:none;font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:560px){.brand-name{display:inline-block}}
.hdr-tel{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;padding:0 .8em;
  border:1px solid var(--gold);border-radius:var(--radius);
  color:var(--on-forest);text-decoration:none;font-weight:700;font-size:1rem;
}
.hdr-tel .pc{display:none}
.nav-inline{display:none}

/* メニュー（JSなしで開閉できる details） */
.menu{position:relative}
.menu>summary{
  display:flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;padding:0 .7em;
  border:1px solid rgba(246,241,227,.55);border-radius:var(--radius);
  font-size:1rem;font-weight:700;letter-spacing:.06em;
  cursor:pointer;list-style:none;
}
.menu>summary::-webkit-details-marker{display:none}
.menu[open]>summary{border-color:var(--gold)}
.menu-panel{
  position:absolute;top:calc(100% + 10px);right:0;z-index:41;
  width:min(19rem,calc(100vw - 2 * var(--gutter)));
  padding:.6rem .9rem 1rem;
  background:var(--forest-deep);
  border:1px solid var(--gold);border-radius:var(--radius);
}
.menu-panel a{display:flex;align-items:center;min-height:46px;text-decoration:none;font-size:1rem}
.menu-panel li+li{border-block-start:1px solid rgba(246,241,227,.16)}
.menu-tel{
  display:flex;align-items:center;justify-content:center;
  min-height:50px;margin-block-start:.9rem;
  border:1px solid var(--gold);border-radius:var(--radius);
  font-weight:700;text-decoration:none;
}

/* --------------------------------------------------------------------------
   10. FV（100svh・PCは左7：右5の非対称）
   -------------------------------------------------------------------------- */
.fv{
  position:relative;overflow:hidden;
  display:flex;align-items:flex-end;
  min-height:640px;min-height:100svh;
  padding-block:calc(56px + 1.1rem) 1.1rem;
  background:var(--forest);color:var(--on-forest);
}
.fv-media{position:absolute;inset:0;z-index:0;margin:0}
.fv-media img{width:100%;height:100%;object-fit:cover;object-position:58% 42%}
.fv-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,42,33,.30) 0%,rgba(14,42,33,.50) 20%,rgba(20,58,46,.72) 42%,rgba(14,42,33,.90) 64%,rgba(14,42,33,.96) 100%);
}
/* FV 動画（静止画に重ね、再生が始まったら不透明にする＝失敗時も画が残る） */
.fv-media .fv-still{width:100%;height:100%;object-fit:cover;object-position:58% 42%}
.fv-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:58% 42%;
  opacity:0;transition:opacity .9s ease;
}
.fv-video.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){ .fv-video{display:none} }

/* 停止ボタン（WCAG 2.2.2）*/
.fv-vctrl{
  position:absolute;right:var(--gutter);top:calc(56px + .7rem);z-index:2;
  display:inline-flex;align-items:center;gap:.5em;
  min-height:44px;min-width:44px;padding:.4em .9em;
  border:1px solid var(--gold);border-radius:var(--radius);
  background:rgba(14,42,33,.72);color:var(--on-forest);
  font-size:.92rem;font-weight:700;line-height:1;cursor:pointer;
}
.fv-vctrl:focus-visible{outline:2px solid var(--gold-lit);outline-offset:3px}
.fv-vctrl-ico{width:12px;height:12px;border-inline:3px solid currentColor;box-sizing:content-box}
.fv-vctrl.is-paused .fv-vctrl-ico{
  width:0;height:0;border:0;
  border-block:7px solid transparent;border-inline-start:12px solid currentColor;
}
@media (max-width:479px){ .fv-vctrl .fv-vctrl-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} }
@media (min-width:900px){ .fv-vctrl{top:auto;bottom:calc(var(--gutter) + 1.4rem);right:calc(var(--gutter) + 14px)} }
/* 見出しは日本語の通常改行（禁則あり）。anywhere は使わない＝英数字を語中で割らない */
.h1,.h2,.h3{overflow-wrap:normal;word-break:normal}
/* japanese_linebreak_standard v0.3 §1 */
:lang(ja){line-break:strict}
:is(h1,h2,h3,h4):lang(ja){text-wrap:initial}
p{text-wrap:pretty}
/* BudouXを焼き込んだ要素は「ゼロ幅スペースの位置でだけ改行」させる。
   keep-all が無いと ZWSP は"改行機会の追加"にとどまり、既定の語中改行が残る
   （iPhone Safari は word-break:auto-phrase 非対応のため、この組が必須）。
   overflow-wrap:anywhere は、1文節が版面より長いときの最後の逃がし＝はみ出し防止。 */
:is(h1,h2,h3,p,li,dd,figcaption,blockquote):lang(ja){
  word-break:keep-all;
  overflow-wrap:anywhere;
}
/* FVの見出しは .nobr で句を守り、句と句の間だけで改行させる（keep-allにすると改行機会が消えて溢れる） */
.fv-copy{position:relative;z-index:1}
.fv-logo{display:block;width:min(126px,38vw);margin-inline:auto;margin-block-end:.85rem;filter:drop-shadow(0 2px 10px rgba(8,24,19,.55))}
.fv .h1{color:var(--on-forest);margin-block-end:.55rem}
.fv-lead{margin-block-end:1.1rem;max-width:34em}
.fv-lead p{font-size:clamp(1rem,4vw,1.1rem);line-height:1.8}
.fv-cue{
  display:inline-flex;align-items:center;gap:.6em;
  min-height:44px;margin-block-start:.2rem;
  font-size:1rem;letter-spacing:.06em;text-decoration:none;
  color:rgba(246,241,227,.86);
}
.fv-cue::after{content:"";width:34px;height:1px;background:var(--gold)}
.fv-arc{position:absolute;right:-2.5rem;bottom:-3.5rem;width:min(210px,46vw);color:var(--gold);opacity:.5;z-index:0;pointer-events:none}
.fv-arc svg{width:100%;height:auto;display:block}

/* 4窓口（2×2・各72px以上・gap8px） */
.gates{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gate{
  display:flex;flex-direction:column;gap:.25rem;
  min-height:72px;padding:.65rem .7rem;
  background:rgba(14,42,33,.74);
  border:1px solid var(--gold);border-radius:var(--radius);
  color:var(--on-forest);text-decoration:none;
  transition:background-color .25s ease;
}
.gate svg{width:24px;height:24px;color:var(--gold)}
.gate-ja{font-family:var(--font-display);font-weight:600;font-size:16px;line-height:1.4}
.gate-en{font-family:var(--font-latin);font-weight:500;font-size:11px;letter-spacing:.18em;color:var(--gold-lit);line-height:1.3}
.gate:focus-visible{outline:2px solid var(--gold-lit);outline-offset:2px}
@media (hover:hover){.gate:hover{background:rgba(14,42,33,.94)}}

@media (min-width:900px){
  .fv{padding-block:calc(56px + 3rem) 2.6rem}
  .fv-logo{margin-block-end:1.3rem}
  .fv-lead{margin-block-end:1.6rem}
  .fv-cue{margin-block-start:1rem}
  .fv-grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(2rem,4.5vw,4rem);align-items:end}
  .fv-media{position:relative;grid-column:2;grid-row:1;align-self:end;padding:6px;border:1px solid var(--gold);background:rgba(14,42,33,.55)}
  .fv-media::after{display:none}
  .fv-media img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
  .fv-copy{grid-column:1;grid-row:1}
  .fv-logo{margin-inline:0 auto;width:min(196px,22vw)}
  .gates{grid-template-columns:repeat(4,1fr)}
  .fv-arc{right:auto;left:calc(58% - 3rem);bottom:-4rem;width:230px}
}

/* --------------------------------------------------------------------------
   11. about（代表挨拶の冒頭）
   -------------------------------------------------------------------------- */
.about-lead{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.5rem,5.4vw,2.05rem);line-height:1.75;
  color:var(--navy);margin-block:1.2rem 1.6rem;
}
.about-body p{font-size:16.5px;line-height:1.95;margin-block:1.1em}
.about-body p:first-child{margin-block-start:0}
.about-cta{margin-block-start:2rem}

/* --------------------------------------------------------------------------
   12. 4事業ブロック（写真枚数・高さを事業ごとに変える＝等高にしない）
   -------------------------------------------------------------------------- */
.biz+.biz{margin-block-start:clamp(3rem,9vw,5.5rem);padding-block-start:clamp(3rem,9vw,5.5rem);border-block-start:1px solid var(--line)}
.biz-body{margin-block:.9rem;font-size:1rem;line-height:1.9}
.biz-list{
  margin-block:1rem;padding-block:.8rem;
  border-block:1px solid var(--line);
  font-size:1rem;line-height:1.85;color:var(--ink);
}
.biz-media{margin-block-start:1.4rem}
.biz-cta{margin-block-start:1.4rem}
@media (min-width:900px){
  .biz{display:grid;grid-template-columns:5.6fr 6.4fr;gap:clamp(2rem,4vw,3.4rem);align-items:start}
  .biz-media{margin-block-start:0}
  .biz--flip .biz-text{grid-column:2}
  .biz--flip .biz-media{grid-column:1;grid-row:1}
}

/* --------------------------------------------------------------------------
   13. S3b（深緑の面にクリームの窓）
   -------------------------------------------------------------------------- */
.creed-body{margin-block:1.2rem;max-width:38em}
.creed-body p+p{margin-block-start:.9em}
.creed-quote{margin-block-start:2rem;max-width:38rem}

/* --------------------------------------------------------------------------
   14. 現場の写真帯（縦1列・左右をずらす）
   -------------------------------------------------------------------------- */
.strip{display:grid;gap:clamp(1.6rem,6vw,2.6rem);margin-block-start:1.8rem}
.strip figure{margin:0}
@media (min-width:840px){
  .strip figure{width:min(560px,72%)}
  .strip figure:nth-child(even){margin-inline-start:auto}
}

/* --------------------------------------------------------------------------
   15. 会社概要（密）
   -------------------------------------------------------------------------- */
.company{margin-block-start:1.6rem;border-block-start:1px solid var(--line)}
.company>div{padding-block:.85rem;border-block-end:1px solid var(--line)}
.company dt{font-size:.92rem;font-weight:700;letter-spacing:.08em;color:var(--muted)}
.company dd{font-size:1rem;line-height:1.8}
.company dd a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
@media (min-width:720px){
  .company>div{display:grid;grid-template-columns:10rem 1fr;gap:1.2rem;align-items:baseline}
}

/* --------------------------------------------------------------------------
   16. ご連絡先
   -------------------------------------------------------------------------- */
.contact-window{padding:clamp(1.4rem,6vw,2.6rem);margin-block-start:1.8rem;max-width:44rem}
.contact-window p{font-size:1rem;line-height:1.9}
.contact-window .tel-btn{margin-block-start:1.4rem}

/* --------------------------------------------------------------------------
   17. フッター
   -------------------------------------------------------------------------- */
.site-footer{background:var(--forest-deep);color:var(--on-forest);padding-block:var(--space-sm)}
.footer-logo{width:168px;margin-block-end:1.1rem}
.footer-name{font-family:var(--font-display);font-weight:600;font-size:1.1rem;letter-spacing:.04em}
.footer-tagline{font-size:1rem;color:rgba(246,241,227,.86);margin-block-start:.3rem}
.footer-nav{margin-block-start:1.8rem;display:grid;gap:2px;max-width:22rem}
.footer-nav a{display:flex;align-items:center;min-height:44px;text-decoration:none;font-size:1rem}
.footer-tel{display:inline-flex;align-items:center;min-height:44px;margin-block-start:1.4rem;font-weight:700;text-decoration:none;font-size:1.05rem}
.footer-copy{margin-block-start:1.8rem;padding-block-start:1.2rem;border-block-start:1px solid rgba(246,241,227,.2);font-size:1rem;color:rgba(246,241,227,.82)}
@media (min-width:840px){
  .footer-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:2.5rem;align-items:start}
  .footer-nav{margin-block-start:0}
}

/* --------------------------------------------------------------------------
   18. 表示ゆらぎの抑制
   -------------------------------------------------------------------------- */
@media (min-width:900px){
  .hdr-tel .sp{display:none}
  .hdr-tel .pc{display:inline}
  .menu{display:none}
  .nav-inline{display:flex;align-items:center;gap:clamp(.9rem,1.8vw,1.6rem);margin-inline-end:1rem}
  .nav-inline a{display:inline-flex;align-items:center;min-height:44px;font-size:.95rem;text-decoration:none}
  .nav-inline a:hover{text-decoration:underline;text-underline-offset:.3em}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ===== storyページ用（05x） ===== */
/* --------------------------------------------------------------------------
   19. story（代表のはなし）＝クリーム地・1カラム・本文17px／行間1.95／最大幅34em
   -------------------------------------------------------------------------- */

/* ページヒーロー（深緑面。固定ヘッダー56pxぶんを空ける） */
.story-hero{padding-block:calc(56px + clamp(2rem,7vw,3.4rem)) clamp(2.2rem,7vw,3.6rem)}
.story-lead{margin-block-start:1.2rem}
.story-lead+.story-lead{margin-block-start:.25rem}

/* パンくず（storyページ限定の名前空間） */
.story-crumbs{margin-block-end:1.6rem;font-size:1rem;line-height:1.7;color:rgba(246,241,227,.82)}
.story-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 .55rem}
.story-crumbs li{display:flex;align-items:center;gap:.55rem}
.story-crumbs li+li::before{content:"\FF1E";opacity:.55}
.story-crumbs a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
@media (hover:hover){.story-crumbs a:hover{text-decoration:underline;text-underline-offset:.3em}}

/* 版面：本文は34emの読み物幅、図版はそれより広く取って左右にリズムを作る */
.story-wrap{width:min(58rem,100%);margin-inline:auto;padding-inline:var(--gutter)}
.story-wrap>*+*{margin-block-start:clamp(1.8rem,6vw,2.6rem)}
.story-wrap>*+.story-ch{margin-block-start:var(--space-lg)}
.story-wrap>*+.story-arc,.story-wrap>*+.story-sign{margin-block-start:var(--space)}

.story-body{font-size:17px;line-height:1.95;max-width:34em}
.story-body p{font-size:17px;line-height:1.95;margin-block:1.15em}
.story-body p:first-child{margin-block-start:0}
.story-body p:last-child{margin-block-end:0}

/* 章（小見出し＝明朝＋金のヘアライン。本文17pxとのサイズ差は2.2倍以上） */
.story-ch{scroll-margin-top:64px}
.story-h{
  font-family:var(--font-display);font-weight:600;color:var(--navy);
  font-size:clamp(2.4rem,7vw,2.9rem);line-height:1.4;letter-spacing:.02em;
  max-width:18em;padding-block-end:.5rem;margin-block-end:1.5rem;
  border-block-end:1px solid var(--gold);
}

/* 章0（導入） */
.story-doc-title{font-family:var(--font-display);font-weight:600;font-size:1.05rem;letter-spacing:.16em;line-height:1.8;color:var(--muted)}
.story-open{
  font-family:var(--font-display);font-weight:600;color:var(--navy);
  font-size:clamp(1.55rem,5.4vw,2.15rem);line-height:1.75;
  max-width:22em;margin-block:.9rem 1.8rem;
}

/* 図版（写真は縁なし・イラストはクリーム地の窓＝.ill） */
.story-fig{max-width:44em}
.story-fig figcaption{margin-block-start:.6em;font-size:1rem;color:var(--muted);line-height:1.7}
.story-fig.ill{max-width:30em}
.story-fig--pair{max-width:44em}
@media (min-width:840px){
  .story-fig--pair{grid-template-columns:1.15fr .85fr;align-items:start}
}
@media (min-width:960px){
  .story-fig{margin-inline-start:clamp(0px,5vw,5rem)}
}

/* 金の弧（このページで1回だけ・章4と章5のあいだ） */
.story-arc{color:var(--gold);opacity:.55}
.story-arc svg{display:block;width:min(200px,42vw);height:auto;margin-inline-start:auto;margin-inline-end:clamp(0px,7vw,5rem)}

/* 署名 */
.story-sign{max-width:34em}
.story-sign p{font-family:var(--font-display);font-weight:600;font-size:1.15rem;line-height:1.9;color:var(--navy)}
.story-divider{font-family:var(--font-body);font-weight:400;font-size:17px;letter-spacing:.1em;color:var(--muted);margin-block-end:1.2rem}

/* 末尾：4つの事業を見る */
.story-outro-h{font-family:var(--font-display);font-weight:600;font-size:clamp(1.35rem,4.8vw,1.75rem);line-height:1.7;margin-block-end:1.6rem}
.story-outro .gates{max-width:52rem}
.story-outro .tel-btn{margin-block-start:1.8rem;background:var(--forest-deep)}
@media (hover:hover){
  .story-outro .tel-btn:hover{background:var(--cream);color:var(--forest)}
}

/* ===== 下層4ページ用（05w） ===== */
/* --------------------------------------------------------------------------
   20. 下層4ページ（sumai / jidosha / chiiki / life）
   ヘッダー・フッター・ボタン・窓・引用は index.html と同じ部品をそのまま使う。
   ここで足すのは「ページヒーロー／パンくず／リード／ギャラリー／イラスト面／窓口再掲」だけ。
   -------------------------------------------------------------------------- */

/* 1 ページヒーロー（深緑面・45svh。固定ヘッダー56pxぶんを空ける） */
.page-hero{
  position:relative;
  display:flex;align-items:flex-end;
  min-height:300px;min-height:45svh;
  padding-block:calc(56px + var(--space-sm)) var(--space-sm);
  background:var(--forest);color:var(--on-forest);
}
.page-hero .label-en{color:var(--gold-lit)}
.page-hero .h1{color:var(--on-forest);margin-block-end:.8rem}
.page-hero-list{
  max-width:34em;margin-block-end:1.3rem;
  font-size:1rem;line-height:1.85;
  color:rgba(246,241,227,.88);
}

/* パンくず（クリーム地・ヒーロー直下） */
.crumbs{padding-block:.2rem}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 .55rem;font-size:1rem;line-height:1.7;color:var(--muted)}
.crumbs li{display:flex;align-items:center;gap:.55rem;min-height:44px}
.crumbs li+li::before{content:"\FF1E";color:var(--muted);opacity:.7}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--navy);font-weight:700;text-decoration:none}
@media (hover:hover){.crumbs a:hover{text-decoration:underline;text-underline-offset:.3em}}

/* 2 リード */
.page-lead{max-width:34em}
.page-lead p+p{margin-block-start:1.05em}

/* 3 写真ギャラリー（375pxは縦1列。PCは段組＝写真ごとに高さが変わる＝等高にしない） */
.gal{margin-block-start:clamp(2rem,7vw,3rem)}
.gal figure{margin:0 0 clamp(1.5rem,5.5vw,2.2rem);break-inside:avoid;-webkit-column-break-inside:avoid}
.gal figcaption{margin-block-start:.55em;font-size:1rem;color:var(--muted);line-height:1.7}
@media (min-width:720px){
  .gal{column-count:2;column-gap:clamp(1rem,3vw,1.6rem)}
}
@media (min-width:1080px){
  .gal{column-count:3}
}

/* 3' イラスト（必ずクリーム地の窓＝.ill の中。写真は縁なし＝一目で区別できる） */
.ills{display:grid;gap:clamp(1.1rem,4.5vw,1.8rem);margin-block-start:clamp(2rem,7vw,3rem);align-items:start}
.ills .ill:nth-child(even){width:92%;margin-inline-start:auto}
.ills-note{margin-block-start:1rem}
@media (min-width:720px){
  .ills--2{grid-template-columns:.9fr 1.1fr}
  .ills--4{grid-template-columns:1.15fr .85fr}
  .ills .ill:nth-child(even){width:100%;margin-inline-start:0;margin-block-start:clamp(1.2rem,3vw,2.4rem)}
}

/* 地域貢献の締め（正直な現在地の申告） */
.closing{
  margin-block-start:clamp(2rem,6vw,2.8rem);
  padding-block-start:1.2rem;
  border-block-start:1px solid var(--line);
  max-width:34em;font-size:1.05rem;line-height:1.9;
}

/* 4 この事業の想い（深緑面に浮くクリームの窓＝引用） */
.think-quote{max-width:40rem}
.think-cta{margin-block-start:clamp(1.6rem,5vw,2.2rem)}

/* 5 お問い合わせ導線＋ほかの窓口 */
.contact-box{
  margin-block-start:1.8rem;max-width:38rem;
  padding:clamp(1.2rem,5vw,1.8rem);
  background:var(--cream-2);
  border:1px solid var(--gold);border-radius:var(--radius);
}
.contact-box .tel-btn{max-width:none;text-align:center}
.others{margin-block-start:1.6rem;font-size:1rem;line-height:1.9}
.others a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-decoration:underline;text-underline-offset:.25em}

/* 現在地（ヘッダー内メニュー） */
.nav-inline a[aria-current="page"],.menu-panel a[aria-current="page"]{text-decoration:underline;text-underline-offset:.3em;text-decoration-color:var(--gold-lit)}