/* ============================================================
   壱 ichi — 全ページ共通の土台
   デザイントークン / タイポグラフィ / ヘッダー / フッター。
   index.html（LP）と tokushoho.html（法定表示）が共有する。

   ここにあるルールは index.html の <style> から移設したもの。
   **トークンや共通要素を変えるときは、このファイルだけを直す。**
   LP固有のレイアウト（写真・セクション・PLAN・FV等）は index.html 側に残してある。
   ============================================================ */

:root{
  --bg:#111111;
  --bg-2:#252523;
  --paper:#FAFAF8;
  --paper-dim:#F0F0ED;
  --paper-2:#D8D8D5;
  --ink:#F7F7F5;
  --ink-muted:#87857F;
  --ink-dark:#151515;
  --ink-dark-muted:#5F5D58;
  --accent:#8B4B3A;
  --accent-on-dark:#B9705A;   /* 墨黒の上で使う錆色。彩度は上げない */
  --accent-soft:rgba(139,75,58,0.45);
  --line-dark:rgba(242,241,236,0.13);
  --line-paper:rgba(23,22,19,0.13);
  --serif-display:'Shippori Mincho B1','Noto Serif JP',serif;
  --serif-body:'Noto Serif JP',serif;
  --sans-label:'Noto Sans JP',sans-serif;
}

html,body{ margin:0; padding:0; background:var(--bg); }
/* ページ内リンクは滑らかに。sticky headerの下に見出しが隠れないよう余白を取る */
:target, [id]{ scroll-margin-top:84px; }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
*{ box-sizing:border-box; }

/* 日本語の改行位置の方針（2026-09-17）
   既定のCJK改行は「志／望校」のように語中で折れるため、keep-all で禁止し、
   改行してよい位置だけを <wbr> で明示する。<wbr> は BudouX（Googleの日本語文節分割）で
   本文を機械的に分割して埋め込んである（scripts/wbr.py）。単語リストのハードコードはしない。
   overflow-wrap:break-word は、1文節が行幅を超えたときだけ働く保険。これが無いと横に溢れる。 */
body{
  -webkit-font-smoothing:antialiased; font-family:var(--serif-display); color:var(--ink);
  word-break:keep-all; overflow-wrap:break-word; line-break:strict;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
a:focus-visible, summary:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.band-dark{ background:var(--bg); color:var(--ink); }
.band-paper{ background:var(--paper); color:var(--ink-dark); }
.wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }

.eyebrow{ font-family:var(--sans-label); font-size:10px; font-weight:300; letter-spacing:0.3em; margin:0 0 24px; display:flex; align-items:center; gap:12px; }
.band-dark .eyebrow{ color:var(--ink-muted); }
.band-paper .eyebrow{ color:var(--ink-dark-muted); }
h1,h2,h3{ font-family:var(--serif-display); font-weight:500; margin:0; text-wrap:balance; word-break:keep-all; }
.body-copy{ font-family:var(--serif-body); font-weight:300; font-size:15.5px; line-height:2.05; text-wrap:pretty; }
.band-dark .body-copy{ color:#D9D3C6; }
.band-paper .body-copy{ color:#3B362E; }
.band-dark .muted{ color:var(--ink-muted); }
.band-paper .muted{ color:var(--ink-dark-muted); }

.hairline-dark{ border-top:1px solid var(--line-dark); }
.hairline-paper{ border-top:1px solid var(--line-paper); }

/* 見出しの改行を意味のまとまりで固定する。<br>と違い、幅に余裕があれば1行に収まる */
.nb{ display:inline-block; }
/* 短い文が連なる段落は、文の途中ではなく文の切れ目で折る（scripts/wbr.pyが付与） */
.s{ display:inline-block; }
/* 英数字の連なり（150〜200 / 1,705 など）は途中で折らない */
.nw{ white-space:nowrap; }

/* ブランドロゴタイプ「壱 ichi」。ヘッダー・FV・フッターで同じ組み方を使う。
   ichi は読み仮名ではなく壱とセットの表記なので、真下に置かない／線で囲まない。 */
.brand{ display:inline-flex; align-items:baseline; gap:0.2em; }
.brand-ja{ font-family:var(--serif-display); font-weight:600; letter-spacing:0.02em; }
.brand-latin{
  font-family:var(--serif-body); font-style:italic; font-weight:300;
  font-size:0.44em; letter-spacing:0.03em; opacity:0.74;
}

header{ position:sticky; top:0; z-index:40; background:rgba(20,18,15,0.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-dark); transition:background 400ms ease, border-color 400ms ease; }
header .bar{ padding:16px 28px; display:flex; align-items:center; justify-content:space-between; gap:24px; transition:padding 320ms cubic-bezier(.22,.61,.36,1); }
header .logo{ font-size:22px; }
/* 小さく置くぶん、ichiだけ比率を上げないと潰れる（FVは0.31em） */
header .logo .brand-latin{ font-size:0.5em; opacity:0.78; }
header nav{ display:flex; align-items:center; gap:30px; }
header nav a.navlink{ font-family:var(--sans-label); font-size:11px; font-weight:300; letter-spacing:0.16em; color:var(--ink-muted); transition:color 400ms ease; }
header nav a.navlink:hover{ color:var(--ink); }
header nav a.navcta{ background:transparent; border:1px solid var(--line-dark); color:var(--ink); padding:9px 20px; font-size:11px; letter-spacing:0.16em; font-family:var(--sans-label); transition:border-color 400ms ease, color 400ms ease; }
header nav a.navcta:hover{ border-color:var(--ink); color:var(--ink); }
header nav a{ white-space:nowrap; }
/* 狭い画面ではテキストリンクを畳み、ロゴとCTAだけ残す（ハンバーガーは置かない） */
@media (max-width:820px){ header nav{ gap:18px; } }
@media (max-width:700px){
  header .bar{ padding:14px 20px; gap:14px; }
  header nav a.navlink{ display:none; }
  header nav a.navcta{ padding:8px 16px; font-size:10.5px; letter-spacing:0.12em; }
}

.foot-grid{ padding-top:148px; padding-bottom:44px; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:32px; }
.foot-copy{ padding-bottom:36px; }

/* ------------------------------------------------------------
   モバイル（〜859px）の共通分。LP固有の余白トークンやセクション設計は
   index.html 側の同じメディアクエリに残してある。
   ------------------------------------------------------------ */
@media (max-width:859px){
  :root{ --gut:24px; }   /* 本文のガター。全幅写真の負マージンと必ず一致させる */
  .wrap{ padding-left:var(--gut); padding-right:var(--gut); }
  h1,h2,h3{ line-break:strict; }
  .body-copy{ font-size:16px; line-height:2.02; letter-spacing:0.012em; text-wrap:pretty; }

  /* 本文のガターとロゴ・CTAの左右位置を揃える */
  header .bar{ padding:15px max(var(--gut), env(safe-area-inset-left)) 15px max(var(--gut), env(safe-area-inset-right)); }
  header .logo{ font-size:20px; }
  header nav a.navcta{ padding:7px 15px; font-size:10px; }
  /* スクロールしたら縮めて、背景を戻す（クラス付与は各ページ末尾のJS） */
  body.is-scrolled header .bar{ padding-top:9px; padding-bottom:9px; }

  .foot-grid{ padding-top:72px; padding-bottom:40px; gap:40px; }
  .foot-copy{ padding-bottom:calc(32px + env(safe-area-inset-bottom)); }

  @media (min-width:600px){
    :root{ --gut:56px; }
    header .bar{ padding-left:56px; padding-right:56px; }
  }
}