/* ============================================================
   株式会社蒼空地所 — design tokens
   生の hex / px は :root 内だけ。実装側は必ず var() 経由。
   タイポと余白の刻みは lassie.ai の実測値に合わせてある。
   ============================================================ */
:root{
  /* ── color ── */
  --ink:        #0D1B2E;
  --ink-2:      #2E3A4A;   /* 明朝は線が細いぶん、本文はやや濃く */
  --muted:      #6E6A60;
  --paper:      #F6F4EF;
  --paper-2:    #FFFFFF;
  --paper-3:    #EDEAE1;
  --rule:       #E0DCD2;
  --sky:        #1D6BB0;
  --sky-deep:   #0E3D74;
  --sky-mid:    #58A6DA;
  --sky-pale:   #C9E2F4;
  --sky-mist:   #DCEDFA;
  --on-dark:    #FFFFFF;
  --on-dark-2:  #C9E2F4;
  --on-dark-3:  #BFCCDB;
  --field:      #071426;
  --scrim:      rgba(6,22,44,.42);

  /* ── type ──
     Lassie 実測: h1 86/lh.95, h2 58/lh1.05, h3 25/lh1.1, body 15/lh1.33, weight 350
     和文は行間だけ広げる（1.33 では潰れる） */
  /* 書体は Zen Old Mincho の 1 本。
     Lassie は 3 書体（abcMarist / DM Sans / DM Mono）だが、あれは全文英語だから成立する。
     和文で DM Sans や DM Mono を混ぜると、日本語の字が入っていないぶんが黙って
     システムのフォントに落ち、そこだけ字面が変わる。だから和欧文とも 1 書体で通す。 */
  --ff-display: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --ff-body:    var(--ff-display);
  --ff-mono:    var(--ff-display);

  /* ヒーローのタグラインだけに使う。1440px で 88px。
     ここは 2026-08-24 に「ヒーローは洗練されていていい」と採用された寸法（触らない） */
  --fs-display: clamp(1.875rem, 6.2vw, 5.5rem);
  --lh-hero:    1.16;
  --ls-hero:    -0.04em;
  --fs-h1:      clamp(1.75rem, 4vw, 3.5rem);
  --fs-h2:      clamp(1.125rem, 1.7vw, 1.5rem);
  --fs-lead:    clamp(1rem, 1.2vw, 1.0625rem);
  --fs-body:    clamp(0.9375rem, 1.12vw, 1.0625rem);
  --fs-sm:      0.875rem;
  --fs-label:   0.6875rem;
  --fs-metre:   clamp(7rem, 24vw, 22rem);
  --fs-mark:    clamp(5rem, 21vw, 17rem);

  --lh-display: 1.16;
  --lh-h1:      1.24;
  --lh-h2:      1.44;
  --lh-body:    1.8;
  --ls-display: -0.025em;
  --ls-label:   0.1em;
  /* タグラインの英字。和文の約 1/3 に落とし、字間を開けて帯に見せる */
  --fs-tag-en:  clamp(0.72rem, 2.1vw, 1.8rem);
  --ls-tag-en:  0.34em;

  /* ── space (4px 階段) ── */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px; --s11:160px;
  --s12:200px; --s13:256px;

  /* ── control / line ── */
  --tap:44px;
  --ctl:52px;
  --hair:1px;
  --hair-2:1.5px;
  --logo-h:30px;
  --icon-sm:14px;
  --fs-fig-num:11px;   /* SVG 内は相対単位が使えないので px */
  --fs-fig-cap:10px;
  --rise:20px;
  --lift:-2px;
  --dot:3px;

  /* ── radius ── */
  --r-sm:10px; --r-md:18px; --r-lg:28px; --r-xl:40px; --r-full:999px;

  /* ── shadow（光源は上） ── */
  --sh-sm: 0 1px 2px rgba(13,27,46,.05), 0 2px 8px rgba(13,27,46,.04);
  --sh-md: 0 2px 4px rgba(13,27,46,.05), 0 12px 28px rgba(13,27,46,.07);
  --sh-lg: 0 4px 8px rgba(13,27,46,.06), 0 24px 60px rgba(13,27,46,.10);
  --sh-xl: 0 8px 16px rgba(13,27,46,.08), 0 40px 90px rgba(13,27,46,.16);

  /* ── layout ── */
  --wrap:1180px;
  --wrap-narrow:820px;
  /* ヒーローと見出し帯だけ、本文の柱より広く取る */
  --wrap-wide:1440px;
  --gut:var(--s5);
  --ease: cubic-bezier(.22,.61,.24,1);

}

@media (min-width:768px){ :root{ --gut:var(--s7); --logo-h:38px; } }
@media (min-width:1200px){ :root{ --gut:var(--s8); } }

/* ============================================================
   base
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
/* scroll-behavior:smooth はここでは掛けない。読み込み時の #付きURL の着地を
   ブラウザのスムーススクロールが潰すため、main.js が load 後に付ける */
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* 最終行が極端に短くなる折り返しを避ける。「1文字だけ次の行」対策 */
p,li,dd,dt{ text-wrap:pretty; }
/* button / input / textarea は既定でフォントを継承しない。
   ここが無いと送信ボタンだけ Arial に落ちて、和文の字面が割れる（fonts.mjs が検出する） */
button,input,textarea,select{ font-family:inherit; }
/* 見出しは行を均す。これが無いと「1文字だけ次の行」が出る（orphan.mjs が検出する）。
   本文の pretty と役割が違うので、両方いる */
h1,h2,h3{ text-wrap:balance; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-weight:400; }   /* Lassie は weight 350。明朝は 400 が最軽量 */
p{ margin:0; }
dl,dd,dt,ul,ol,li{ margin:0; padding:0; }
ul,ol{ list-style:none; }

:focus-visible{ outline:2px solid var(--sky); outline-offset:3px; border-radius:var(--r-sm); }
section[id]{ scroll-margin-top:var(--s9); }

.skip{
  position:absolute; left:var(--s4); top:calc(var(--s4) * -6);
  z-index:100; padding:var(--s3) var(--s5);
  background:var(--paper-2); color:var(--ink);
  border-radius:var(--r-full); box-shadow:var(--sh-md);
  transition:top .2s var(--ease);
}
.skip:focus{ top:var(--s4); }

/* 桁が揃うように数字を等幅にするだけのクラス（書体は切り替えない） */
.tnum{ font-weight:400; font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }

/* 広い画面だけで改行する。狭い画面では自然な折り返しに任せる
   （和文の見出しは 1 行 10 字を超えると 375px で横にあふれる） */
.br-md{ display:none; }
@media (min-width:768px){ .br-md{ display:inline; } }

/* ── buttons ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--ctl); padding:0 var(--s6);
  border-radius:var(--r-full);
  font-size:var(--fs-sm); font-weight:500;
  text-decoration:none; white-space:nowrap;
  transition:transform .25s var(--ease), background-color .25s var(--ease);
}
.btn--solid{ background:var(--paper-2); color:var(--ink); box-shadow:var(--sh-md); }
/* 空の中間色の上に置くため、塗りで文字の、白い輪郭で部品のコントラストを確保する */
.btn--ghost{
  background:rgba(6,22,44,.55); color:var(--on-dark);
  box-shadow:inset 0 0 0 var(--hair-2) rgba(255,255,255,.95);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.btn:hover{ transform:translateY(var(--lift)); }
/* 紙の地の上に置く戻るボタン。空の上に置く .btn--solid とは地が違う */
.btn--back{ background:var(--ink); color:var(--on-dark); box-shadow:var(--sh-md); }
.btn--back:hover{ background:var(--ink-2); }
.thanks__back{ margin-top:var(--s8); text-align:center; }
.btn--ghost:hover{ background:rgba(6,22,44,.72); }

/* ============================================================
   nav — Lassie に倣って項目は絞る
   ============================================================ */
.nav{
  position:fixed; inset:var(--s4) 0 auto; z-index:60;
  /* 帯ひとつを中央に置くだけ。お問い合わせも帯の中（会社概要の隣）に入れてある
     （2026-08-25 airoku「帯の外に出ていると浮いて見える」） */
  display:grid; grid-template-columns:auto; justify-content:center; align-items:center;
  padding:0 var(--gut);
  pointer-events:none;
}
.nav__bar{
  grid-column:1; pointer-events:auto;
  display:flex; align-items:center; gap:var(--s1);
  padding:var(--s1);
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-radius:var(--r-full); box-shadow:var(--sh-md);
  max-width:100%;
}
.nav__brand{
  display:flex; align-items:center;
  height:var(--tap); padding:0 var(--s4) 0 var(--s3);
  border-radius:var(--r-full);
}
.nav__brand img{ height:var(--logo-h); width:auto; }
.nav__links{ display:flex; align-items:center; gap:var(--s1); }
.nav__links a{
  display:flex; align-items:center; height:var(--tap); padding:0 var(--s4);
  border-radius:var(--r-full);
  font-size:var(--fs-sm); text-decoration:none; color:var(--ink-2);
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.nav__links a:hover{ background:var(--paper-3); color:var(--ink); }
/* ロゴを大きくしたぶん、広い画面ではピルの内側に余白を足して窮屈さを消す */
@media (min-width:768px){ .nav__bar{ padding:6px; } }
/* お問い合わせは帯の中・会社概要の隣で、**他の項目とまったく同じ見た目**にする
   （2026-08-25 airoku「白で他と合わせて大丈夫」）。一度ここだけ濃紺で塗ったが戻した。
   .nav__links-cta の class は残してあるが、これは検証ツール（tools/）の目印と
   折りたたみでの並び順のためだけ。**色や塗りを足さないこと。** */
.nav__toggle{ display:none; }

/* お問い合わせを帯の中へ入れたぶん帯が広くなった（1440px で 898px）。
   899px 区切りのままだと 900〜1023px で項目がつぶれるので、
   ここだけ折りたたみへの切り替えを 1079px まで上げてある（他の 899px 区切りとは別物） */
@media (max-width:1079px){
  .nav{ inset:var(--s3) 0 auto; grid-template-columns:1fr; padding:0 var(--s4); }
  .nav__bar{ grid-column:1; width:100%; justify-content:space-between; }
  .nav__toggle{
    display:flex; flex-direction:column; justify-content:center; gap:var(--s1);
    width:var(--tap); height:var(--tap); padding:0 var(--s3);
    background:transparent; border:0; cursor:pointer; border-radius:var(--r-full);
  }
  .nav__toggle span{ display:block; height:var(--hair-2); background:var(--ink); border-radius:var(--r-full); transition:transform .25s var(--ease); }
  .nav__toggle[aria-expanded="true"] span:first-child{ transform:translateY(5px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:last-child{ transform:translateY(-5px) rotate(-45deg); }
  .nav__links{
    position:absolute; top:calc(100% + var(--s2)); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    padding:var(--s2);
    /* 親の .nav__bar が backdrop-filter を持つのでここのブラーは効かない。不透明で塗る */
    background:var(--paper-2);
    border-radius:var(--r-lg); box-shadow:var(--sh-lg);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  .nav__links.is-open{ opacity:1; visibility:visible; transform:none; }
  .nav__links a{ height:var(--ctl); padding:0 var(--s5); }
}

/* ============================================================
   sky — ヒーローと CTA で共有
   ============================================================ */
.sky{
  position:absolute; inset:0;
  background:
    radial-gradient(78% 22% at 22% 72%, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 72%),
    radial-gradient(64% 17% at 79% 60%, rgba(255,255,255,.15) 0%, rgba(255,255,255,0) 74%),
    radial-gradient(130% 78% at 50% 112%, var(--sky-mist) 0%, rgba(220,237,250,0) 62%),
    linear-gradient(178deg,
      var(--field) 0%, var(--sky-deep) 19%, var(--sky) 45%,
      var(--sky-mid) 71%, var(--sky-pale) 89%, var(--sky-mist) 100%);
}
.sky__glow{
  position:absolute; left:50%; top:58%;
  width:160vmax; height:70vmax; transform:translate(-50%,-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 68%);
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{
  from{ transform:translate(-58%,-52%) scale(1); }
  to  { transform:translate(-42%,-46%) scale(1.14); }
}
/* フィルムの粒子感。ベタ塗りのグラデに見せない */
.sky__grain{
  position:absolute; inset:0; opacity:.22; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* ============================================================
   hero — signature: 間口（アパーチャ）が開く
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  /* 中央ではなく下端に置く。上を大きく空けたほうが地の波が効く */
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--s11) var(--gut) clamp(72px, 10vh, 132px);
  background:var(--field); overflow:hidden; isolation:isolate;
}
.hero__field{ position:absolute; inset:0; z-index:-2; }
.hero__aperture{
  position:absolute; inset:0;
  clip-path:inset(0 46% 0 46% round var(--r-full));
  animation:aperture 1.5s var(--ease) .15s forwards;
}
@keyframes aperture{ to{ clip-path:inset(0 0 0 0 round 0px); } }
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    var(--scrim) 0%, rgba(6,22,44,.30) 44%, rgba(6,22,44,.14) 68%, rgba(6,22,44,.56) 100%);
}
.hero__inner{
  position:relative; z-index:1;
  width:100%; max-width:var(--wrap-wide); margin:0 auto;
  opacity:0; animation:rise 1.1s var(--ease) .85s forwards;
}
@keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

.hero__title{
  font-family:var(--ff-display);
  font-size:var(--fs-display);
  line-height:var(--lh-hero);
  letter-spacing:var(--ls-hero);
  color:var(--on-dark);
}
/* ブランドのタグライン。和文がメイン、英字はその下に小さく従える。
   letter-spacing の最後のひと粒は .ln の overflow:hidden が刈るので、
   中央寄せのズレ補正は要らない（入れると逆に右へ寄る。実測で確認済み） */
.hero__ja{
  display:block;
  font-size:var(--fs-display); line-height:var(--lh-hero);
  letter-spacing:var(--ls-hero);
}
/* 和文は 1 行ずつ独立させる（横に流すと広い画面で 1 行に繋がってしまう）。
   英字は語ごとなので inline のまま */
.hero__ja .ln{ display:block; }
.hero__en{
  display:block; margin-top:clamp(20px, 2.6vw, 38px);
  font-size:var(--fs-label); line-height:1.4;
  letter-spacing:.34em;
  color:var(--sky-pale);
}
/* ヒーロー下端の一列。会社が何をしているかを事実だけで1行に置く */
.hero__foot{
  position:relative; z-index:1;
  width:100%; max-width:var(--wrap-wide); margin:clamp(40px, 6vh, 80px) auto 0;
  padding-top:var(--s5);
  border-top:var(--hair) solid rgba(255,255,255,.22);
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s9);
  font-size:var(--fs-sm); letter-spacing:.1em; color:var(--on-dark-2);
}
.hero__lead{
  max-width:30em; margin:var(--s6) auto 0;
  color:var(--on-dark); font-size:var(--fs-lead); line-height:1.8; opacity:.92;
}
.hero__actions{
  display:flex; flex-wrap:wrap; gap:var(--s3); justify-content:center;
  margin-top:var(--s7);
}

/* 縦に入れ替わるティッカー。Lassie のヒーロー下部と同じ仕掛け */
.hero__ticker{
  position:absolute; left:0; right:0; bottom:var(--s7); z-index:1;
  display:flex; justify-content:center; padding:0 var(--gut);
  opacity:0; animation:rise 1.1s var(--ease) 1.2s forwards;
}
.ticker{
  height:1.9em; overflow:hidden;
  font-size:var(--fs-sm);
  /* 写真を敷くと下端が人物になるため、濃紺ではなく白 */
  color:var(--on-dark);
}
.ticker__lane{ display:block; animation:roll 21s var(--ease) infinite; }
.ticker__lane span{ display:block; height:1.9em; line-height:1.9em; text-align:center; white-space:nowrap; }
/* % は「リスト全体の高さ」に対する割合なので 1 行ぶんにならない。
   行の高さ（1.9em）の倍数で送る。リストは 6 行を 2 周ぶん並べてあるので、
   6 行送った位置と先頭が同じ絵になり、繰り返しの継ぎ目が見えない */
@keyframes roll{
   0%,   13.0%{ transform:translateY(0); }
  16.6%, 29.6%{ transform:translateY(-1.9em); }
  33.3%, 46.3%{ transform:translateY(-3.8em); }
  50.0%, 63.0%{ transform:translateY(-5.7em); }
  66.6%, 79.6%{ transform:translateY(-7.6em); }
  83.3%, 96.3%{ transform:translateY(-9.5em); }
 100%         { transform:translateY(-11.4em); }
}

/* ============================================================
   写真
   ファイルが無いときは JS が .no-photo を付け、CSS で描いた空に戻る
   ============================================================ */
.hero__photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
  /* この写真は3人が画面のど真ん中に来るため、素のままだと大見出しが顔に重なる。
     上を原点に拡大して人物を画面下部へ逃がし、上半分は空とスカイラインにする。
     横長の画面と縦長の画面で切り取られ方がまったく違うので、倍率と位置は別に持つ。
     写真を差し替えたらこの2組の数値は必ず見直すこと。 */
  transform:scale(1.52);
  transform-origin:45% 0%;
}
/* 縦長の画面では横が大きく切られる。等倍だと1人の後頭部だけが大写しになるため、
   横位置を人物側へ寄せたうえで控えめに拡大し、2人が入って顔が見える切り取りにする */
@media (max-width:899px){
  .hero__photo{
    object-position:55% 50%;
    transform:scale(1.15);
    transform-origin:50% 0%;
  }
}
/* 現行サイトの「薄く敷く」感じ。ただし全面を均一に飛ばすと見出しが読めなくなるので、
   上は蒼空の濃紺で沈め、下へ行くほど写真が出てくる勾配にしてある */
.hero__wash{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,
      rgba(7,20,38,.88)    0%,
      rgba(14,61,116,.72) 26%,
      rgba(29,107,176,.52) 52%,
      rgba(88,166,218,.40) 76%,
      rgba(201,226,244,.34) 100%),
    linear-gradient(rgba(29,107,176,.18), rgba(29,107,176,.18));
}
.hero.no-photo .hero__photo,
.hero.no-photo .hero__wash{ display:none; }

/* 全幅の写真帯 */
.figband{
  margin:0 auto; padding:0 var(--gut);
  max-width:var(--wrap);
}
.figband__img{
  width:100%; height:auto;
  aspect-ratio:16/9; object-fit:cover; object-position:50% 40%;
  border-radius:var(--r-xl);
  box-shadow:var(--sh-lg);
}
.figband.no-photo{ display:none; }

/* 経営の言葉に添える顔写真 */
/* 顔写真は名前の横に置く。
   引用の横や上に置くと、写真のある列だけ行幅や開始位置がずれて左右が揃わない
   （二人並ぶうち片方しか写真が無いため）。名前の横なら片方だけでも不自然にならない。 */
.voice__photo{
  width:4.25rem; height:4.25rem;
  object-fit:cover; object-position:50% 28%;
  border-radius:var(--r-full);
  box-shadow:var(--sh-sm);
  order:-1;
}
.voice--withPhoto.no-photo .voice__photo{ display:none; }

/* ── 扱う不動産の幅 ──
   コピー →「物件の特徴」（6）→「売却時の事情」（6）。
   幅を見せるのが目的なので、12 項目を減らさないこと。
   **英字は置かない**（ご高齢のお客様にも直感的に伝わるように・2026-08-24 指示）。
   2026-08-24：画面を固定してスクロールで積み上げる演出は外した（airoku 判断）。 */
.scope{
  max-width:var(--wrap-narrow); margin:0 auto;
  display:grid; gap:var(--s9);
}
.scope__label{
  font-size:var(--fs-sm); letter-spacing:.08em;
  color:var(--sky); margin-bottom:var(--s4);
}
/* 罫線区切りの索引。カードでは並べない（README「価値観の項目をカードで並べない」と同じ）。
   flex で流すと 6 項目が 5＋1 に割れて、余った 1 個が散らかって見える。
   3 列 × 2 行の矩形に固定して、どの幅でも余りが出ないようにしてある
   （狭い画面は 2 列 × 3 行）。列幅は最長項目より広いので罫線からはみ出さない */
.scope__set{
  margin:0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:0 var(--s6);
}
.scope__set li{
  padding:var(--s3) 0;
  border-top:var(--hair) solid var(--rule);
  font-family:var(--ff-display);
  font-size:var(--fs-lead); line-height:1.5;
  letter-spacing:var(--ls-display);
}
@media (max-width:899px){ .scope__set{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:699px){
  .scope{ gap:var(--s7); }
  .scope__set{ gap:0 var(--s5); }
  .scope__set li{ padding:var(--s2) 0; }
  .scope__label{ margin-bottom:var(--s3); }
}

/* ============================================================
   band — 見出しはすべて中央、余白は Lassie 実測に合わせて大きく
   ============================================================ */
.band{ padding:var(--s13) var(--gut); }
.band__title{
  max-width:min(90vw, 40rem); margin:0 auto var(--s11);
  text-align:center;
  font-family:var(--ff-display);
  font-size:var(--fs-h1); line-height:var(--lh-h1);
  letter-spacing:var(--ls-display);
}
.band__lead{
  max-width:min(90vw, 43rem); margin:calc(var(--s11) * -1 + var(--s8)) auto var(--s11);
  text-align:center; color:var(--ink-2);
  font-size:var(--fs-lead); line-height:1.9;
  word-break:auto-phrase;
}

/* ── ワンストップの工程。ここは順序に意味があるので番号を振る ── */
.steps{
  max-width:var(--wrap); margin:0 auto;
  display:grid; gap:var(--s7); grid-template-columns:1fr;
  counter-reset:none;
}
@media (min-width:900px){ .steps{ grid-template-columns:repeat(4,1fr); gap:var(--s6); } }
.step{ position:relative; padding-top:var(--s5); border-top:var(--hair) solid var(--rule); }
.step__no{
  font-size:var(--fs-label); letter-spacing:var(--ls-label);
  color:var(--sky); margin-bottom:var(--s4);
}
.step__name{
  font-family:var(--ff-display);
  font-size:var(--fs-h2); line-height:var(--lh-h2);
  letter-spacing:var(--ls-display);
  margin-bottom:var(--s3);
}
.step__desc{ color:var(--ink-2); }

/* ── ミッション。カードを置かず、見出しと本文だけで持たせる ── */
.creed{
  max-width:var(--wrap-narrow); margin:0 auto;
  padding:var(--s13) var(--gut);
  text-align:center;
}
.creed__title{
  font-family:var(--ff-display);
  font-size:var(--fs-h1); line-height:var(--lh-h1);
  letter-spacing:var(--ls-display);
  margin-bottom:var(--s9);
}
.creed__body{
  display:grid; gap:var(--s5);
  max-width:34rem; margin:0 auto;
  text-align:left; color:var(--ink-2);
  font-size:var(--fs-lead); line-height:1.95;
  word-break:auto-phrase;
}
/* 締めの2行。太字だけだと明朝では差が出にくいので、地の色まで戻して前に出す */
.creed__close{
  margin-top:var(--s3);
  color:var(--ink); font-weight:600;
}

.cards{
  max-width:var(--wrap); margin:0 auto;
  display:grid; gap:var(--s5); grid-template-columns:1fr;
}
@media (min-width:820px){
  .cards--2{ grid-template-columns:repeat(2,1fr); gap:var(--s6); }
}
.card{
  background:var(--paper-2);
  border-radius:var(--r-lg);
  padding:var(--s7);
  box-shadow:var(--sh-sm);
  transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
.card:hover{ box-shadow:var(--sh-md); transform:translateY(var(--lift)); }
/* Lassie はここにプロダクトの画面写真が入る。うちは敷地図と同じ線の言語で図を置く */
.card__fig{
  background:var(--paper);
  border-radius:var(--r-md);
  padding:var(--s6) var(--s5);
  margin-bottom:var(--s7);
}
.card__fig svg{ width:100%; height:auto; display:block; }
.flow-line{ fill:none; stroke:var(--ink); stroke-width:1; opacity:.32; }
.flow-self{ fill:rgba(29,107,176,.10); stroke:var(--sky); stroke-width:1.25; }
.flow-arrow{ fill:none; stroke:var(--sky); stroke-width:1.25; }
.flow-cap{ fill:var(--ink-2); font-family:var(--ff-body); font-size:var(--fs-fig-num); text-anchor:middle; }
.flow-cap--on{ fill:var(--sky); }
.flow-note{ fill:var(--muted); font-family:var(--ff-mono); font-size:var(--fs-fig-cap); letter-spacing:.06em; }
.card__kicker{
  font-family:var(--ff-display); font-size:var(--fs-sm);
  color:var(--sky); margin-bottom:var(--s4);
}
.card__name{
  font-family:var(--ff-display);
  font-size:var(--fs-h2); line-height:var(--lh-h2);
  letter-spacing:var(--ls-display);
  margin-bottom:var(--s4);
}
.card__desc{ color:var(--ink-2); }

/* ── MISSION / VISION ──
   カードで囲わず、余白と字の大きさだけで持たせる。
   英字ラベルは小さく、主役は和文のコピー。 */
/* 「使命 / 目指す姿 / 行動指針」。英字ラベル（MISSION 等）は 2026-08-24 に和文へ置き換えた */
.mvv-label{
  font-family:var(--ff-display);
  font-size:var(--fs-sm); letter-spacing:.16em;
  color:var(--sky); text-align:center;
  margin-bottom:var(--s5);
}
.mvv{
  max-width:var(--wrap-narrow); margin:0 auto;
  /* 下は 0。続く VALUE（.band）の上余白と足し合わさないため */
  padding:var(--s13) var(--gut) 0;
  display:grid; gap:var(--s12);
  text-align:center;
}
.mvv__copy{
  font-family:var(--ff-display);
  font-size:var(--fs-h1); line-height:var(--lh-h1);
  letter-spacing:var(--ls-display);
  word-break:auto-phrase;
}
.mvv__desc{
  max-width:34rem; margin:var(--s7) auto 0;
  text-align:left; color:var(--ink-2);
  font-size:var(--fs-lead); line-height:1.95;
  word-break:auto-phrase;
}

/* ── VALUE ──
   5 つを横並びのカードにすると数だけが目立つので、
   罫線で区切った索引の組み方にする（.step / .qa と同じ言語）。 */
.values .band__title{ margin-bottom:var(--s9); }
.values__list{ max-width:var(--wrap); margin:0 auto; display:grid; }
.value{
  display:grid; gap:var(--s4); grid-template-columns:1fr;
  padding:var(--s7) 0;
  border-top:var(--hair) solid var(--rule);
}
.value:last-child{ border-bottom:var(--hair) solid var(--rule); }
@media (min-width:900px){
  .value{
    grid-template-columns:4rem minmax(0,1fr) minmax(0,1.15fr);
    gap:var(--s7); align-items:start;
    padding:var(--s8) 0;
  }
}
.value__no{
  font-size:var(--fs-label); letter-spacing:var(--ls-label);
  color:var(--sky);
}
/* 和文が主役。支給の英文（MOVE FAST. 等）は小ラベルに落とす
   （旧版は英字のほうが大きかった。2026-08-24「英語を装飾で乱用しない」指示で逆転） */
.value__ja{
  font-family:var(--ff-display);
  font-size:var(--fs-h2); line-height:var(--lh-h2);
  letter-spacing:var(--ls-display);
}
.value__en{
  margin-top:var(--s2);
  font-family:var(--ff-display);
  font-size:var(--fs-label); letter-spacing:var(--ls-label);
  color:var(--sky);
}
.value__desc{ color:var(--ink-2); }

/* ── 経営の言葉 ── */
.voices{
  max-width:var(--wrap); margin:0 auto;
  padding:var(--s11) var(--gut) var(--s13);
  display:grid; gap:var(--s11); grid-template-columns:1fr;
}
@media (min-width:900px){ .voices{ grid-template-columns:repeat(2,1fr); gap:var(--s9); } }
.voice blockquote{
  margin:0;
  font-family:var(--ff-display);
  font-size:clamp(1.125rem, 1.9vw, 1.625rem);
  line-height:1.75; letter-spacing:var(--ls-display);
}
.voice blockquote::before{ content:"「"; }
.voice blockquote::after{ content:"」"; }
.voice__who{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4);
  margin-top:var(--s6);
  font-family:var(--ff-display);
}
.voice__who .tnum{
  font-family:var(--ff-mono);
  font-size:var(--fs-label); letter-spacing:var(--ls-label); color:var(--muted);
}

/* ── FAQ ── */
.faq{ padding:var(--s12) var(--gut) var(--s13); }
.faq .band__title{ margin-bottom:var(--s9); }
.faq__list{ max-width:var(--wrap-narrow); margin:0 auto; }
.qa{ border-top:var(--hair) solid var(--rule); }
.qa:last-child{ border-bottom:var(--hair) solid var(--rule); }
.qa summary{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s5);
  min-height:var(--ctl); padding:var(--s5) 0;
  cursor:pointer; list-style:none;
  font-family:var(--ff-display);
  font-size:var(--fs-h2); line-height:var(--lh-h2);
  transition:color .2s var(--ease);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--sky); }
.qa summary::after{
  content:""; flex:none;
  width:var(--icon-sm); height:var(--icon-sm); margin-top:var(--s2);
  background:
    linear-gradient(var(--ink),var(--ink)) center/100% var(--hair-2) no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/var(--hair-2) 100% no-repeat;
  transition:transform .3s var(--ease);
}
.qa[open] summary::after{ transform:rotate(45deg); }
.qa__body{ padding:0 0 var(--s6); }
.qa__body p{ color:var(--ink-2); max-width:44em; }

/* ============================================================
   CTA — 全面バンドではなく、大きな角丸カードの中に空を置く
   ============================================================ */
.cta{ padding:0 var(--gut) var(--s13); }
.cta__card{
  position:relative; overflow:hidden; isolation:isolate;
  max-width:var(--wrap); margin:0 auto;
  border-radius:var(--r-xl);
  box-shadow:var(--sh-xl);
  min-height:min(78svh, 34rem);
  display:grid; place-items:center;
  padding:var(--s11) var(--s6);
}
/* ヒーローと同じ考え方で、文字塊のまわりだけ沈める。
   ただしヒーローのように .cta__inner::before に z-index:-1 で敷くと、
   空レイヤーより下に潜って見えなくなる（.cta__card が isolate している）。
   scrim 自身に円形の暗がりを重ねるのが正解。 */
/* フォームを入れてカードが縦に伸びたぶん、下端が空の淡い側（--sky-mist）に届く。
   放射状の暗がりだけだと下まで効かないので、**下端にも下限を持たせる**こと。
   ここを薄くすると受付時間の一行が真っ先に読めなくなる（実測で 1.5:1 まで落ちた） */
.cta__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(62% 44% at 50% 38%, rgba(6,22,44,.34) 0%, rgba(6,22,44,.18) 62%, rgba(6,22,44,0) 100%),
    linear-gradient(180deg, rgba(6,22,44,.52) 0%, rgba(6,22,44,.44) 46%, rgba(6,22,44,.62) 100%);
}
.cta__inner{ position:relative; text-align:center; max-width:34rem; }
.cta__title{
  font-family:var(--ff-display);
  font-size:var(--fs-h1); line-height:var(--lh-h1);
  letter-spacing:var(--ls-display);
  color:var(--on-dark); text-wrap:balance;
}
.cta__actions{
  display:flex; flex-wrap:wrap; gap:var(--s3); justify-content:center;
  margin-top:var(--s7);
}
.cta__note{
  margin-top:var(--s6);
  font-size:var(--fs-sm); letter-spacing:.06em;
  color:var(--on-dark);
}
.cta__tel{ font-size:var(--fs-h2); text-decoration:none; }
.cta__tel:hover{ text-decoration:underline; text-underline-offset:5px; }
.cta__hours{ display:block; margin-top:var(--s2); font-size:var(--fs-label); letter-spacing:var(--ls-label); opacity:.9; }

/* ============================================================
   お問い合わせフォーム
   空の上に置くので、入力欄は**白ベタ**にする。半透明や枠線だけだと
   地のグラデーションが透けて、場所によって文字が読めなくなる（実測で確認）。
   見出しは中央のまま、フォームだけ左揃え（ラベルと入力欄が対応して見えないと使えない）
   ============================================================ */
.cform{ margin-top:var(--s8); text-align:left; }
.cform__row{ margin-bottom:var(--s5); }
.cform__label{
  display:flex; align-items:center; gap:var(--s3);
  margin-bottom:var(--s2);
  font-size:var(--fs-sm); letter-spacing:.08em; color:var(--on-dark);
}
.cform__req{
  padding:2px var(--s2); border-radius:var(--r-sm);
  background:rgba(255,255,255,.9); color:var(--sky-deep);
  font-size:var(--fs-label); letter-spacing:var(--ls-label);
}
.cform__input{
  display:block; width:100%;
  min-height:var(--ctl); padding:var(--s3) var(--s4);
  background:var(--paper-2); color:var(--ink);
  border:0; border-radius:var(--r-sm);
  font-family:var(--ff-body); font-size:var(--fs-body); line-height:1.7;
  box-shadow:var(--sh-sm);
}
.cform__input::placeholder{ color:var(--muted); }
.cform__input:focus-visible{ outline:2px solid var(--on-dark); outline-offset:2px; }
.cform__area{ resize:vertical; min-height:9rem; }
/* 自動投稿よけ。display:none だと埋めないボットがいるので、画面の外へ出す */
.cform__trap{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}
.cform__consent{
  margin:var(--s5) 0; font-size:var(--fs-label); line-height:1.9;
  letter-spacing:.06em; color:var(--on-dark);
}
/* 文中のリンクだが、タップ領域が 24px を切らないよう縦に伸ばす（.outline dd a と同じ作法） */
.cform__consent a{
  display:inline-block; padding-block:var(--s1);
  text-decoration:underline; text-underline-offset:3px;
}
.cform__submit{ width:100%; }
.cform__submit[disabled]{ opacity:.6; cursor:progress; }
.cform__status{
  margin-top:var(--s4); min-height:1.5em;
  font-size:var(--fs-sm); line-height:1.8; color:var(--on-dark);
}
.cform__status.is-err{
  padding:var(--s3) var(--s4); border-radius:var(--r-sm);
  background:rgba(120,20,20,.55);
  box-shadow:inset 0 0 0 var(--hair-2) rgba(255,255,255,.9);
}
.cform__status.is-ok{
  padding:var(--s3) var(--s4); border-radius:var(--r-sm);
  background:rgba(8,60,40,.55);
  box-shadow:inset 0 0 0 var(--hair-2) rgba(255,255,255,.9);
}
/* 入力欄が増えたぶん、カードの下端が詰まらないように */
.cta__card{ padding-block:var(--s10); }
@media (max-width:699px){ .cta__card{ padding:var(--s8) var(--s5); } }

/* ============================================================
   footer — 巨大なワードマークが下で切れる
   ============================================================ */
.foot{ background:var(--ink); color:var(--paper); overflow:hidden; }
.foot__grid{
  max-width:var(--wrap); margin:0 auto;
  padding:var(--s11) var(--gut) var(--s8);
  display:grid; gap:var(--s8); grid-template-columns:1fr;
}
@media (min-width:900px){ .foot__grid{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:var(--s9); } }
/* 濃紺地に載せるため反転して白抜きにする */
.foot__brand img{ height:var(--logo-h); width:auto; filter:brightness(0) invert(1); }
.foot__tag{
  margin-top:var(--s5);
  font-family:var(--ff-display);
  font-size:var(--fs-h2); line-height:var(--lh-h2);
  color:var(--sky-pale);
}
/* フッターのブランド列は狭い（grid .8fr）。ヒーローと同じ寸法だと
   和文も英字も2行に折れるので、ここは一段落とした専用サイズを持つ */
.foot__tag-ja{
  display:block;
  font-size:var(--fs-h2); line-height:1.3;
  letter-spacing:var(--ls-display);
  color:var(--on-dark);
}
.foot__tag-en{
  display:block; margin-top:var(--s2);
  font-size:var(--fs-label); letter-spacing:0.2em;
}
.outline{ display:grid; }
.outline > div{
  display:grid; gap:var(--s2); grid-template-columns:1fr;
  padding:var(--s4) 0;
  border-top:var(--hair) solid rgba(255,255,255,.14);
}
.outline > div:last-child{ border-bottom:var(--hair) solid rgba(255,255,255,.14); }
@media (min-width:600px){ .outline > div{ grid-template-columns:7rem 1fr; gap:var(--s5); } }
.outline dt{
  font-family:var(--ff-mono); font-size:var(--fs-label);
  letter-spacing:var(--ls-label); color:var(--sky-pale); padding-top:var(--s1);
}
.outline dd{ font-size:var(--fs-sm); line-height:1.8; }
/* 文中のリンクだが、タップ領域が 24px を切らないよう縦に伸ばす */
.outline dd a{ display:inline-block; padding-block:var(--s1); text-decoration:none; }
.outline dd a:hover{ color:var(--sky-pale); }
.foot__base{
  max-width:var(--wrap); margin:0 auto;
  padding:var(--s5) var(--gut) var(--s7);
  display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:space-between;
  font-size:var(--fs-label); letter-spacing:var(--ls-label); color:var(--sky-pale);
}
.foot__mark{
  font-family:var(--ff-display);
  font-size:var(--fs-mark); line-height:1.02; letter-spacing:-.04em;
  text-align:center; color:rgba(201,226,244,.13);
  padding:0 var(--gut) var(--s5);
  user-select:none;
}

/* ============================================================
   reveal（シーン以外の静的セクション用）
   ============================================================ */
.reveal{ opacity:0; transform:translateY(var(--rise)); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   狭い画面：シーンは貼り付けたまま、要素を縦に組み替える
   ============================================================ */
@media (max-width:899px){
  .band{ padding:var(--s11) var(--gut); }
  .band__title{ margin-bottom:var(--s8); }
  .band__lead{ margin:calc(var(--s8) * -1 + var(--s6)) auto var(--s9); }
  .creed{ padding:var(--s11) var(--gut); }
  .creed__title{ margin-bottom:var(--s8); }
  .mvv{ padding:var(--s11) var(--gut) 0; gap:var(--s10); }
  .mvv__desc{ margin-top:var(--s6); }
  /* 長い本文は狭い画面だと文節送りの行落ちが目立ち、語の途中で切れる行も出る。
     README の方針どおり、行幅が狭いところでは文節折り返しを外す */
  .creed__body,.mvv__desc{ word-break:normal; }
  .values .band__title{ margin-bottom:var(--s8); }
  .voices{ padding:var(--s9) var(--gut) var(--s11); gap:var(--s9); }
  .faq{ padding:var(--s10) var(--gut) var(--s11); }
  .cta{ padding-bottom:var(--s11); }
}

/* ============================================================
   動きを減らす設定：シーンを解いて、ふつうの縦積みにする
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-delay:0ms !important; transition-duration:.001ms !important; }
  .hero__aperture{ clip-path:inset(0 0 0 0); }
  .hero__inner,.hero__ticker{ opacity:1; }
  .reveal{ opacity:1; transform:none; }
}
/* ============================================================
   波の地 — 写真も動画も使わずに、ブランドの青だけで場をつくる
   オープニングとヒーローと各ページの見出し帯で同じものを使う。
   周期の違う3枚を重ねてあるので、同じ絵に戻ってこない＝ループがばれない
   ============================================================ */
.wavebg{ position:absolute; inset:0; overflow:hidden; background:#0B2E5C; }
.wavebg .wave{ position:absolute; inset:-30% -20%; pointer-events:none; }
.wavebg .wave i{
  position:absolute; inset:0; display:block;
  background:repeating-linear-gradient(-11deg,
    rgba(255,255,255,.055) 0px, rgba(255,255,255,.055) 42px,
    rgba(255,255,255,0)   42px, rgba(255,255,255,0)   132px);
  filter:blur(18px);
  animation:wv1 17s ease-in-out infinite alternate;
}
.wavebg .wave i:nth-child(2){
  animation:wv2 26s ease-in-out infinite alternate; opacity:.8;
  background:repeating-linear-gradient(-15deg,
    rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 66px,
    rgba(255,255,255,0)  66px, rgba(255,255,255,0)  190px);
}
.wavebg .wave i:nth-child(3){
  animation:wv3 34s ease-in-out infinite alternate; opacity:.7;
  background:repeating-linear-gradient(-7deg,
    rgba(9,32,66,.30) 0px, rgba(9,32,66,.30) 90px,
    rgba(9,32,66,0)  90px, rgba(9,32,66,0)  240px);
}
@keyframes wv1{ from{ transform:translate3d(-3%,2%,0) } to{ transform:translate3d(4%,-3%,0) } }
@keyframes wv2{ from{ transform:translate3d(3%,-2%,0) scale(1.05) } to{ transform:translate3d(-5%,3%,0) scale(1.12) } }
@keyframes wv3{ from{ transform:translate3d(0,3%,0) } to{ transform:translate3d(-4%,-4%,0) } }
.wavebg .glow{
  position:absolute; left:50%; top:52%; width:120vmax; height:70vmax;
  transform:translate(-50%,-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(80,160,230,.34) 0%, rgba(80,160,230,0) 70%);
  animation:glowDrift 12s ease-in-out infinite alternate;
}
@keyframes glowDrift{ from{ transform:translate(-52%,-50%) scale(1) } to{ transform:translate(-48%,-52%) scale(1.14) } }
/* 粒子は質感ではなくディザ。長い濃紺のグラデは、これが無いと帯（バンディング）が出る */
.wavebg .grain{
  position:absolute; inset:0; opacity:.16; mix-blend-mode:soft-light; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* ============================================================
   見出しの入場 — 語ごとに行の外から持ち上げる
   ============================================================ */
.ln{ display:inline-block; overflow:hidden; vertical-align:bottom; padding:0 .06em; margin:0 -.06em; }
.ln > i{
  display:inline-block; font-style:normal;
  transform:translateY(115%);
  transition:transform .7s cubic-bezier(.45,.12,.04,.96);
  transition-delay:var(--d,0ms);
}
.hero.is-in .ln > i{ transform:none; }
/* MOVE. だけ横からも入る。タグラインの意味と動きを合わせている */

/* スクロールに連れて地だけ遅れて動く。JS が --py を書く */
.hero .hero__field{ transform:translate3d(0, var(--py,0px), 0); will-change:transform; }

/* ============================================================
   オープニング — マスクを左から右へ拭ってロゴを出す
   トップページのみ・1セッションに1回。地はヒーローと同じ波なので継ぎ目が出ない
   ============================================================ */
#intro{
  position:fixed; inset:0; z-index:9998;
  display:flex; align-items:center; justify-content:center;
  background:#0B2E5C; overflow:hidden;
  transition:opacity .9s ease, transform .9s cubic-bezier(.45,.12,.04,.96);
}
#intro.is-out{ opacity:0; transform:translateY(-2.5%); pointer-events:none; }
#intro .lock{ position:relative; z-index:2; display:flex; align-items:center; gap:clamp(16px,2.1vw,30px); }
#intro .lock .glyph{ width:auto; height:clamp(58px,6.6vw,96px); }
#intro .lock .word{ width:auto; height:clamp(18px,2.05vw,30px); }
#intro .mark{
  position:relative; z-index:2;
  -webkit-mask-image:linear-gradient(to right, #000 0 38%, transparent 62% 100%);
          mask-image:linear-gradient(to right, #000 0 38%, transparent 62% 100%);
  -webkit-mask-size:240% 100%; mask-size:240% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:100% 0; mask-position:100% 0;
  transition:-webkit-mask-position 2.4s cubic-bezier(.45,0,.55,1),
                     mask-position 2.4s cubic-bezier(.45,0,.55,1);
}
#intro.is-wipe .mark{ -webkit-mask-position:0 0; mask-position:0 0; }

/* ============================================================
   下層ページの見出し帯
   ============================================================ */
.pagehead{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  min-height:clamp(280px, 38vh, 420px);
  padding:var(--s10) var(--gut) var(--s8);
  background:var(--field);
}
.pagehead .wavebg{ z-index:-1; }
.pagehead__inner{ position:relative; text-align:center; max-width:var(--wrap); }
.pagehead__ja{
  font-family:var(--ff-display); font-size:var(--fs-h1); line-height:1.3;
  letter-spacing:var(--ls-display); color:var(--on-dark); margin:0;
}
.pagehead__lead{
  margin:var(--s5) auto 0; max-width:34em;
  color:var(--on-dark-2); line-height:1.9; font-size:var(--fs-sm);
}

/* ============================================================
   ページの一覧（フッター手前）と、章の小見出し
   ============================================================ */
.chapindex{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(20px,4vw,64px);
  max-width:var(--wrap); margin:0 auto;
  padding:var(--s8) var(--gut);
  border-top:var(--hair) solid var(--rule);
}
.chapindex a{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  text-decoration:none; padding:6px 2px; transition:opacity .2s ease;
}
.chapindex a:hover{ opacity:.55; }
.chapindex__ja{
  font-size:var(--fs-lead); line-height:1.4;
  letter-spacing:var(--ls-display); color:var(--ink); white-space:nowrap;
}
.chapindex__note{ font-size:var(--fs-label); letter-spacing:.1em; color:var(--muted); white-space:nowrap; }

/* 会社概要の一覧（フッターの小さな一覧とは別物） */
.outline--sec{ max-width:46rem; margin:0 auto; }
.outline--sec > div{
  display:grid; grid-template-columns:11rem 1fr; gap:var(--s3);
  padding:var(--s4) 0; border-top:var(--hair) solid var(--rule);
}
.outline--sec > div:last-child{ border-bottom:var(--hair) solid var(--rule); }
.outline--sec dt{ color:var(--ink-2); font-size:var(--fs-sm); }
.outline--sec dd{ margin:0; }
@media (max-width:699px){ .outline--sec > div{ grid-template-columns:1fr; gap:4px; } }

/* ── 読ませるページ（採用など）の段 ──
   素の .band の余白は index の見せ場に合わせた展示用の寸法（上下 256px）。
   文章と一覧が続くページでは間が空きすぎて、話が切れて見える。
   ここは上下 128px・見出しの下 64px まで詰める。
   ※ 899px 以下の .band 上書きより後ろに置くこと（同じ詳細度なので順番で決まる） */
.band--doc{ padding:var(--s10) var(--gut); }
.band--doc + .band--doc{ padding-top:0; }
.band--doc .band__title{ margin-bottom:var(--s8); }
@media (max-width:699px){
  .band--doc{ padding:var(--s9) var(--gut); }
  .band--doc .band__title{ margin-bottom:var(--s7); }
}

/* 職種ごとの説明。.step / .prose__list と同じ罫線区切りの索引に揃える
   （カードで並べない＝README「価値観の項目をカードで並べない」と同じ理由） */
.jobs{ max-width:44rem; margin:0 auto; display:grid; gap:var(--s6); }
.job{ padding-top:var(--s5); border-top:var(--hair) solid var(--rule); }
.job:last-child{ padding-bottom:var(--s6); border-bottom:var(--hair) solid var(--rule); }
.job__name{
  font-family:var(--ff-display);
  font-size:var(--fs-h2); line-height:var(--lh-h2);
  letter-spacing:var(--ls-display);
  margin-bottom:var(--s4);
}
.job p{ margin:0 0 var(--s4); line-height:2.05; color:var(--ink-2); }
.job p:last-child{ margin-bottom:0; }

/* 要項の欄が複数段落・箇条書きを持てるように */
.outline--sec dd p{ margin:0 0 var(--s3); }
.outline--sec dd p:last-child{ margin-bottom:0; }
.outline__items{ margin:var(--s3) 0 0; padding:0; list-style:none; }
.outline__items li{ line-height:1.95; color:var(--ink-2); }
.outline__items li::before{ content:"・"; color:var(--sky); }
@media (min-width:820px){ .outline__items{ columns:2; column-gap:var(--s6); } }

.pagebody{ max-width:46rem; margin:var(--s6) auto 0; text-align:center; }
/* 未提供の文言。本番公開前にゼロにすること */
.todo{ color:#B4531F; }

/* 現在いるページをナビで示す */
.nav__links a[aria-current="page"]{ color:var(--ink); text-decoration:underline; text-underline-offset:5px; }

@media (prefers-reduced-motion:reduce){
  .wavebg .wave i, .wavebg .glow{ animation:none; }
  .ln > i{ transition:none; transform:none; }
  #intro .mark{ transition:none; -webkit-mask-position:0 0; mask-position:0 0; }
}

/* 読ませる本文の段（採用メッセージなど） */
.prose{ max-width:44rem; margin:var(--s7) auto 0; }
.prose p{ margin:0 0 var(--s5); line-height:2.05; }
.prose p:last-child{ margin-bottom:0; }
.prose strong{ font-weight:600; }
.prose__list{ margin:0 0 var(--s5); padding:0; list-style:none; }
.prose__list li{
  position:relative; padding:var(--s3) 0 var(--s3) 1.2em;
  line-height:1.95; border-top:var(--hair) solid var(--rule);
}
.prose__list li:last-child{ border-bottom:var(--hair) solid var(--rule); }
.prose__list li::before{
  content:""; position:absolute; left:0; top:calc(var(--s3) + .82em);
  width:.5em; height:1px; background:var(--sky);
}
.band__title--sm{ font-size:var(--fs-h2); }

/* ── プライバシーポリシー ──
   法務文書なので**文面は一字も変えない**（現行 aoec.co.jp から全文を移植）。
   条番号が原文の時点で飛んでいる（「3.」から始まる）が、勝手に直さないこと。
   段が多いので、見出しは band__title--sm、章内の小見出しは .pp__h で受ける */
.pp__h{
  margin:var(--s7) 0 var(--s4);
  font-family:var(--ff-display);
  font-size:var(--fs-lead); line-height:1.6;
  letter-spacing:var(--ls-display); color:var(--ink);
}
.prose > .pp__h:first-child{ margin-top:0; }
.pp__note{ color:var(--muted); font-size:var(--fs-sm); line-height:1.95; }
/* フッターの小さな導線。タップ領域が 24px を切らないよう縦に伸ばす */
.foot__link{
  display:inline-block; padding-block:var(--s2);
  text-decoration:none;
  box-shadow:inset 0 -1px rgba(201,226,244,.4);
}
.foot__link:hover{ color:var(--on-dark); box-shadow:inset 0 -1px var(--on-dark); }
/* 一覧の補足行 */
.outline__sub{ display:inline-block; margin-top:4px; color:var(--ink-2); font-size:var(--fs-sm); }

/* ============================================================
   社長メッセージの署名（本文の末尾・右寄せ）
   書体は本文と同じ Zen Old Mincho。手書き系は混ぜない
   （和文の無い書体を挟むと、字が黙って別フォントに落ちる）
   ============================================================ */
.prose--message p{ text-align:justify; }
.sign{
  max-width:44rem; margin:var(--s8) auto 0; text-align:right;
  padding-top:var(--s6); border-top:var(--hair) solid var(--rule);
}
.sign__role{ display:block; font-size:var(--fs-sm); color:var(--ink-2); letter-spacing:.06em; }
/* 氏名は姓名の間で折らない。狭い画面だと「合六／彪流」に割れる */
.sign__name{
  display:block; margin-top:10px; white-space:nowrap; font-family:var(--ff-body);
  font-weight:600; font-size:clamp(1.25rem, 1.8vw, 1.5rem);
  letter-spacing:.12em; color:var(--ink);
}

/* ── 社長メッセージの調整 ─────────────────────────────
   本文が長いので、読ませる大きさへ上げる。
   見出し帯のすぐ下なので、上の余白は band の既定より詰める
   ───────────────────────────────────────────────── */
/* 見出し帯のすぐ下なので、上の余白は band の既定より大きく詰める */
.band--message{ padding-top:var(--s8); }

/* 社長メッセージ（参考 reatex を実測：本文は 800px の柱・行間2.5） */
.msg__lead{
  max-width:min(92vw, 44rem); margin:0 auto var(--s10);
  text-align:center; font-family:var(--ff-display);
  font-size:var(--fs-h1); line-height:var(--lh-h1); letter-spacing:var(--ls-display);
}
.prose--message{ max-width:50rem; margin:0 auto; }
.prose--message p{
  font-size:clamp(1rem, 1.28vw, 1.125rem);
  line-height:2.15;
  margin-bottom:var(--s6);
}
/* 本文と同じ幅の柱に載せ、罫線で本文と切る */
.band--message .sign{
  max-width:50rem; margin:var(--s8) auto 0; padding-top:var(--s6);
  border-top:var(--hair) solid var(--rule); text-align:right;
}
.band--message .sign__role{ display:block; font-size:var(--fs-sm); color:var(--ink-2); letter-spacing:.14em; }
.band--message .sign__name{ font-size:clamp(1.25rem, 1.8vw, 1.5rem); }