@charset "utf-8";
/* ============================================================
   共通スタイル
   合同会社ElevenPeat コーポレートサイト刷新
   規範: ../README.md §6（配色・タイポ・余白）
         ../サイト情報設計.md（構成・文言）
         ../elevenpeat-brand/brand-guide.html（ブランドの正本）
         ../資料デザイン規範.md
   ------------------------------------------------------------
   本番データ。screen-mockup/ からモック専用の要素を落として起こした。
   ============================================================ */

/* ---------- 1. 色（README §6-1 の採用パレット） ---------- */
:root{
  /* 🔴 地は白（2026-08-11 変更）。生成り #F7F5F2 からの切り替え。
     白が地になったぶん、カードは「一段沈む面」で見せる。
     読みやすさは実測済み：墨16.39 / 補足5.41 / 黄の強調文字5.56（いずれも基準4.5以上）。 */
  --base      : #FFFFFF;   /* 白。既定の地 */
  --surface   : #FFFFFF;   /* カード・表の地。地と同じなので、罫線で形を見せる */
  --surface2  : #F7F5F2;   /* 一段沈む面。セクションの明暗リズムはこれで作る */
  --border    : #E0DCD6;   /* 低コントラストの罫線 */
  --text      : #251E1C;   /* 墨（純黒 #000 は使わない） */
  /* 🔴 #77716C は生成りの上で 4.42、一段沈む面の上で 4.12 しかなく、
     読みやすさの基準（4.5）に届いていなかった（実測448箇所）。
     色相は保ったまま最小限だけ暗くして 4.97 / 5.41 / 4.63 にした。 */
  --muted     : #6F6964;   /* 補足 */

  --dark      : #0C0D10;   /* 濃色ブロック（FV・ポジション・原則） */
  --dark-text : #E8E6E3;   /* 生成り（純白 #FFF は使わない） */
  --dark-line : #2A2D34;
  --dark-mute : #8A8A90;

  --accent    : #CDCF2B;   /* 黄。線・強調・CTA。★白地の文字色には使わない */
  --accent-bg : #F2F3D2;   /* 面 */
  --accent-tx : #6B6C13;   /* 白地での強調文字 */

  --btn-gray-bg : #6F6964;  /* グレーボタンの地。白文字と 5.41:1。
                               🔴 --muted を参照すると .sec--dark で --dark-mute（#8A8A90）に
                                  差し替わり、白文字が 3.43:1 まで落ちるため専用トークンに固定する
                                  （.sec--dark はこのトークンを再代入しない）。 */

  /* 機能色。ブランド4色ではないので、可否の記号にだけ使う
     （参照実装 elevenpeat-brand/brand-guide.html と同じ扱い） */
  --no        : #C0392B;
  --yes       : #5C7A29;

  /* 🔴 セクションの上下 padding（2026-08-14 に 160→88px）。
     この値は「セクション間の余白」ではなく「片側の padding」。
     隣り合うセクションで足し算になるので、160px だと実際の間隔は 320px になり、
     規範（README §6-3・japanese-lp-design §2-7）が言う 120〜200px を大きく超えていた。
     ユーザーから「空白なスペースが散見される」と報告された実体がこれ。
     88px にすると 隣接で 176px となり、規範の範囲の真ん中に入る。 */
  --gap-sec   : 88px;      /* 隣接すると 176px（README §6-3：120〜200px） */
  --gap-sec-sp: 48px;      /* 同じく SP は 96px */
  --wrap      : 1180px;
  /* ヘッダーの高さ。ドロワーの上端（§19）がここに乗るので、
     直値ではなく変数で持つ。SP では §16 で 60px に落とす */
  --head-h    : 68px;
}

/* ---------- 2. 下地 ---------- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--base);
  color:var(--text);
  /* 🔴 和文を必ず後ろに連結する。欧文だけ指定するとシステムフォールバックに落ちる */
  font-family:"IBM Plex Sans JP","IBM Plex Sans","Hiragino Sans","Yu Gothic",sans-serif;
  font-size:15px;
  line-height:1.9;            /* 日本語は 1.8 以上 */
  letter-spacing:.06em;
  font-weight:400;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

/* 見出しは palt。太字を乱発しない（README §6-2） */
h1,h2,h3,h4{
  margin:0;
  font-weight:500;
  letter-spacing:.04em;
  line-height:1.5;
  font-feature-settings:"palt";
}

/* 欧文ラベル・数値は Mono（「エンジニアリング」の記号） */
.mono{
  font-family:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  letter-spacing:.12em;
}

.wrap{ width:min(var(--wrap), calc(100% - 48px)); margin-inline:auto; }
.sec{ padding-block:var(--gap-sec); }
.sec--tight{ padding-block:calc(var(--gap-sec) * .62); }

/* ---------- 3. セクション見出し ---------- */
.eyebrow{
  font-family:"IBM Plex Mono","IBM Plex Sans",monospace;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted);
  display:flex; align-items:center; gap:12px;
  margin-bottom:22px;
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:var(--accent); flex:none;
}
.h-sec{ font-size:31px; margin-bottom:20px; }
.lead{ color:var(--muted); max-width:40em; margin:0; }

/* ---------- 4. ヘッダー（サイト情報設計 §2-1） ---------- */
.head{
  position:sticky; top:0; z-index:50;
  /* 🔴 不透過の白（2026-08-13）。半透明＋ぼかしだと、下を流れる文字や
     濃色セクションが透けてロゴ・ナビが読みにくくなっていた。
     backdrop-filter も外した。不透過の背後をぼかしても見た目に効かないうえ、
     この指定は position:fixed の子の包含ブロックを作ってしまう副作用がある
     （§19-2 の引き出しがヘッダーの高さに潰れた原因がこれ）。 */
  background:var(--base);
  border-bottom:1px solid var(--border);
}
/* 🔴 ヘッダーは全幅にして、ロゴを左端・CTA を右端に置く（2026-08-11）。
   1180px の中央寄せだったため、広い画面で
   ロゴが画面中央寄り（1920px で左端 363px）に浮き、
   全幅の FV とは左端が 332px ズレていた。 */
.head__in{
  width:100%; padding-inline:clamp(18px, 2vw, 30px);
  height:var(--head-h); display:flex; align-items:center; gap:34px;
}
/* ロゴは正本 SVG（elevenpeat-brand）。文字で組まない */
.head__logo{ display:block; flex:none; line-height:0; }
/* 🔴 ロゴは一回り大きく（2026-08-13）。26px では小さく見えていた。
   ヘッダーは 68px なので 32px でも上下に 18px ずつ余白が残る。
   ブランド規範の最小サイズ（画面上で幅120px）も満たす（32px で幅約176px）。 */
.head__logo img{ height:32px; width:auto; }
/* 🔴 ナビを隠す幅では、CTA 自身が右へ寄る（2026-08-11）。
   押し出しをナビの margin-left:auto だけに頼っていたため、
   ナビが display:none になる 767px 以下で押し出す力ごと消え、
   CTA がロゴのすぐ隣に来ていた（375px でも 414px でも右端 292px）。
   ※ nav と btn の両方に auto を付けると余白が二等分され、
     ロゴとナビの間が空くので、片方ずつ効かせる。 */
.head__nav{ display:flex; gap:26px; margin-left:auto; font-size:13.5px; }
.head__nav a{ text-decoration:none; color:var(--muted); padding-block:6px; }
.head__nav a:hover{ color:var(--text); }
.head__nav a[aria-current]{ color:var(--text); box-shadow:inset 0 -2px 0 var(--accent); }

/* ---------- 5. ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; gap:14px;
  padding:15px 28px; text-decoration:none;
  background:var(--accent); color:var(--text);
  font-size:14px; letter-spacing:.1em; font-weight:500;
  border:0; cursor:pointer;
  /* 🔴 ボタンの中では改行しない。320px でヘッダーの「相談する」が
     「相談す / る」と2行に割れていた。 */
  white-space:nowrap;
}
.btn:hover{ filter:brightness(1.06); }
.btn--sm{ padding:10px 20px; font-size:13px; }
.btn--ghost{ background:transparent; border:1px solid var(--border); }

/* ---------- 6. FV（top のみ。fv-mockup/index.html の縮図） ---------- */
.fv{
  background:var(--dark); color:var(--dark-text);
  min-height:560px; display:flex; align-items:center;
  position:relative; overflow:hidden;
}
.fv__note{
  position:absolute; right:22px; bottom:18px;
  font-size:11px; color:var(--dark-mute);
  font-family:"IBM Plex Mono",monospace; letter-spacing:.1em;
}
.fv h1{ font-size:clamp(38px,6vw,72px); letter-spacing:.02em; margin-bottom:26px; }
.fv p{ color:var(--dark-mute); max-width:34em; margin:0 0 34px; }
.fv__tag{ font-size:12.5px; color:var(--dark-mute); margin-bottom:34px; max-width:none; }

/* ---------- 7. カード・罫線（README §6-3：細い罫線で区切る） ---------- */
.grid{ display:grid; gap:1px; background:var(--border); border:1px solid var(--border); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
.cell{ background:var(--base); padding:34px 30px; }
.cell h3{ font-size:17px; margin-bottom:10px; }
.cell p{ margin:0; font-size:13.5px; color:var(--muted); }
.cell__no{
  font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.2em; color:var(--muted); display:block; margin-bottom:14px;
}

/* ---------- 7-2. 原則を1文で言い切るブロック（brand-guide.html の .rule） ----------
   価値観を形容詞で書かず、判断の基準そのものを置く。README §2-4・原則4 の実装。 */
.rule{
  background:var(--dark); color:var(--dark-text);
  padding:30px 34px; margin:44px 0 0; max-width:44em;
  font-size:18px; line-height:1.75; letter-spacing:.03em;
}
.rule small{
  display:block; color:var(--dark-mute); font-size:11px; letter-spacing:.18em;
  margin-bottom:12px; font-family:"IBM Plex Mono",ui-monospace,monospace;
}
.rule b{ color:var(--accent); font-weight:500; }  /* 濃色地なら黄を文字色に使ってよい（11.6:1） */

.card{ background:var(--surface); border:1px solid var(--border); padding:36px 34px; }
.card h3{ font-size:19px; margin-bottom:18px; line-height:1.6; }
.card dl{ margin:0; display:grid; grid-template-columns:8.5em 1fr; gap:12px 20px; font-size:13.5px; }
.card dt{ color:var(--muted); font-size:12px; letter-spacing:.1em; }
.card dd{ margin:0; }
.card dd b{ font-weight:500; background:linear-gradient(transparent 62%, var(--accent-bg) 62%); }

/* ---------- 9. 一覧（お知らせ・記事） ---------- */
.list{ border-top:1px solid var(--border); }
.list a{
  display:grid; grid-template-columns:9em 8em 1fr; gap:22px; align-items:baseline;
  /* 🔴 左に余白を入れる（2026-08-13）。日付が枠の端に貼り付いて窮屈だった。
     日付・タグ・見出しをまとめて字下げする（日付だけ動かすと列がずれて見える） */
  padding:26px 4px 26px 20px; border-bottom:1px solid var(--border);
  text-decoration:none;
}
.list a:hover{ background:var(--surface); }
.list time{ font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--muted); }
.list .tag{
  font-size:11px; letter-spacing:.1em; color:var(--accent-tx);
  background:var(--accent-bg); padding:3px 10px; justify-self:start;
}
.list h3{ font-size:15.5px; font-weight:400; }

/* ---------- 10. 本文（記事の個別ページ） ---------- */
.prose{ max-width:38em; }
.prose h2{ font-size:22px; margin:64px 0 18px; padding-top:22px; border-top:1px solid var(--border); }
.prose h3{ font-size:17px; margin:38px 0 12px; }
.prose p{ margin:0 0 22px; }
/* 🔴 行頭記号は em ダッシュ。「•」の多用は避ける（資料デザイン規範 §4-5） */
.prose ul,.deny ul,.todo ul{ list-style:none; padding-left:0; margin:0 0 22px; }
.prose li,.deny li,.todo li{ margin-bottom:8px; padding-left:1.5em; position:relative; }
.prose li::before,.deny li::before,.todo li::before{
  content:"—"; position:absolute; left:0; color:var(--muted);
}

/* ---------- 11. フォーム ---------- */
/* 🔴 上の余白はフォーム自身に持たせる（2026-08-14）。それまでは直前にあった
   「受けられないご相談」ブロックの margin が代わりを務めていたので、
   そのブロックを消した時点でリード文とフォームがくっついた。 */
.form{ max-width:38em; margin-top:56px; }
.field{ margin-bottom:26px; }
.field label{ display:block; font-size:13px; margin-bottom:8px; }
.field .req{ color:var(--accent-tx); font-size:11px; margin-left:8px; }
/* 🔴 ラジオ・チェックボックスを外す（2026-08-11）。
   input を種類で分けずに width:100% を当てていたため、
   ラジオの丸が親いっぱいに伸び（実測 195px）、
   すぐ横にあるはずの文言が右端まで押し出されて折り返していた。 */
.field input:not([type="radio"]):not([type="checkbox"]),
.field textarea,.field select{
  width:100%; padding:13px 15px; font:inherit; font-size:14px;
  background:var(--surface); border:1px solid var(--border); color:var(--text);
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:2px solid var(--accent); outline-offset:-2px;
}
.radios{ display:flex; flex-wrap:wrap; gap:10px; }
.radios label{
  border:1px solid var(--border); background:var(--surface);
  padding:10px 16px; font-size:13px; cursor:pointer; margin:0;
  display:flex; align-items:center; gap:9px;
}
.radios input{ width:auto; flex:none; margin:0; }

/* ---------- 12. 末尾CTA（サイト情報設計 §2-3：ページ末尾に1本） ---------- */
.cta{ background:var(--dark); color:var(--dark-text); padding-block:110px; }
.cta h2{ font-size:30px; margin-bottom:16px; }
.cta p{ color:var(--dark-mute); margin:0 0 34px; max-width:36em; }
/* CTA の周辺に所要時間・費用・営業電話の有無を書く（BtoB 実測 0 件の打ち手） */
.cta__micro{ list-style:none; padding:0; margin:26px 0 0;
  display:flex; flex-wrap:wrap; gap:10px 26px; font-size:12.5px; color:var(--dark-mute); }
.cta__micro li{ display:flex; align-items:center; gap:8px; }
.cta__micro li::before{ content:""; width:5px; height:5px; background:var(--accent); flex:none; }

/* ---------- 12-2. モバイルの追従 CTA（lp-build §2） ---------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:none; align-items:center; gap:16px;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  background:rgba(12,13,16,.95); backdrop-filter:blur(8px);
  border-top:2px solid var(--accent);
  transform:translateY(110%); transition:transform .22s ease;
}
.sticky-cta.is-on{ transform:translateY(0); }
.sticky-cta__txt{ font-size:11.5px; line-height:1.55; color:var(--dark-text); }
.sticky-cta__txt span{ color:var(--dark-mute); font-size:10.5px; }
.sticky-cta .btn{ margin-left:auto; flex:none; }
@media (max-width:767.98px){ .sticky-cta{ display:flex; } }

/* ---------- 13. フッター ---------- */
.foot{ border-top:1px solid var(--border); padding-block:64px 44px; font-size:13px; }
.foot__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.foot h4{ font-size:11px; letter-spacing:.2em; color:var(--muted); margin-bottom:16px;
  font-family:"IBM Plex Mono",monospace; }
.foot ul{ list-style:none; padding:0; margin:0; }
.foot li{ margin-bottom:9px; }
.foot a{ text-decoration:none; color:var(--muted); }
.foot a:hover{ color:var(--text); }
.foot__addr{ color:var(--muted); line-height:1.9; }
.foot__law{ margin-top:44px; padding-top:22px; border-top:1px solid var(--border);
  color:var(--muted); font-size:11.5px; display:flex; justify-content:space-between; gap:20px; }

/* ---------- 16. 狭い画面 ----------
   🔴 2026-08-11 全面的に組み直した。
      それまで、多段グリッドを解く指定の多く（.card dl / .list a / .foot__grid /
      .grid--2,3,4）が **359.98px の指定にしか入っていなかった**。
      実機の iPhone は 375〜430px なので、この帯がまるごと抜けていた。実測：
        - 実績カードの本文が 幅134px（1行8文字）で、縦に419px の帯になっていた
        - お知らせ一覧の見出しが 幅32px（1行1文字）で 419px の縦棒になっていた
      段組みを解く境目は 767.98px に統一し、359.98px は「そこからさらに詰める」
      ためだけに使う。 */
@media (max-width:1023.98px){
  :root{ --gap-sec:64px; }   /* 隣接で 128px */
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .foot__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:767.98px){
  :root{ --gap-sec:var(--gap-sec-sp); --head-h:60px; }
  .form{ margin-top:34px; }

  /* --- 16-1. 段組みを解く --------------------------------------------------
     🔴 数字は gap 付きの3列のまま縮まらず、360px で 29px はみ出していた。 */
  .grid{ grid-template-columns:1fr !important; }
  .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:1fr; gap:30px; }

  /* --- 16-2. 見切り・内側の余白 --------------------------------------------
     縦の余白（--gap-sec-sp）を 88 → 76px に。SP は 1 カラムで縦に伸びるので、
     PC と同じ比率で空けるとスクロール量だけが増える。
     セクション間 > 要素間 の関係は保つ（要素間は 20px 前後）。 */
  .wrap{ width:calc(100% - 36px); }
  .cell{ padding:26px 22px; }
  .card{ padding:26px 22px; }
  .rule{ padding:24px 22px; font-size:16px; margin-top:34px; }
  .sec--tight{ padding-block:calc(var(--gap-sec) * .72); }

  /* --- 16-3. 見出し --------------------------------------------------------
     31px は 390px 幅だと 12文字で折り返す。vw に連動させて、
     どの実機でも 1行 14〜16文字に収まるようにする。 */
  .h-sec{ font-size:clamp(23px, 6.2vw, 31px); }
  .eyebrow{ margin-bottom:18px; }
  .lead{ font-size:14px; }

  /* --- 16-4. 実績カード：ラベルを上、本文を下に積む ------------------------
     8.5em のラベル列が 390px 幅で 115px を占め、本文が 134px しか残らなかった。
     ラベルを行の上に逃がして、本文にカード幅をまるごと渡す。 */
  .card h3{ font-size:17px; margin-bottom:14px; }
  .card dl{ grid-template-columns:1fr; gap:0; font-size:14px; }
  .card dt{
    margin-top:20px; font-size:11px; letter-spacing:.14em;
    font-family:"IBM Plex Mono",ui-monospace,monospace;
  }
  .card dt:first-of-type{ margin-top:0; }
  .card dd{ margin-top:5px; }

  /* --- 16-5. 一覧：日付とタグを1行目、見出しを2行目に ----------------------
     9em + 8em + 1fr の3列が、390px では 135 / 120 / 32px に潰れていた。 */
  .list a{ grid-template-columns:auto 1fr; gap:8px 12px; padding:18px 2px 18px 14px; }
  .list time{ grid-row:1; grid-column:1; }
  .list .tag{ grid-row:1; grid-column:2; }
  .list h3{ grid-row:2; grid-column:1 / -1; font-size:15px; line-height:1.7; }

  /* --- 16-6. ヘッダー：ナビはドロワーへ（§19）------------------------------ */
  .head__in{ padding-inline:16px; gap:12px; }
  .head__nav{ display:none; }
  .head .btn{ margin-left:auto; }
  /* ハンバーガーを出すのは §19 の側。ここで display:flex にしても、
     §19 が後ろにあるぶん base の display:none に上書きされて消える */

  /* --- 16-7. フォーム ------------------------------------------------------
     🔴 16px 未満の入力欄は、iOS Safari がフォーカス時に勝手に拡大する。
        拡大されると指で戻さないと全体が見えなくなり、そのまま離脱する。
        入力欄だけは 16px を下回らせない。 */
  /* 除外はここでも書く。`.field input` と書くとラジオまで拾い直して、
     せっかく §11 で外した padding が戻ってしまう */
  .field input:not([type="radio"]):not([type="checkbox"]),
  .field textarea,.field select{ font-size:16px; padding:14px 15px; }
  .field{ margin-bottom:22px; }
  /* 🔴 中央寄せにしない。ラジオの丸が左端、文字が右端に離れて
     「まだ何も決まっていない」が3行に折れた（実測）。
     丸のすぐ横に文字を置いて、余りは右に流す。 */
  .radios{ gap:8px; }
  .radios label{
    flex:1 1 100%; min-height:48px; padding:10px 14px;
    display:flex; align-items:center; gap:10px; text-align:left;
  }

  /* --- 16-8. 押せるものは 44px 以上（指の当たり） -------------------------- */
  .btn{ min-height:48px; justify-content:center; padding:14px 24px; }
  .btn--sm{ min-height:42px; padding:10px 16px; }
  .foot a{ display:inline-block; padding-block:9px; }
  .foot li{ margin-bottom:0; }
  /* ロゴは高さ26pxの画像そのままで、当たりが26pxしか無かった */
  .head__logo{ display:flex; align-items:center; height:44px; }
  .prose a,.related a{ padding-block:2px; }

  /* --- 16-9. 末尾 CTA ------------------------------------------------------ */
  .cta{ padding-block:72px; }
  .cta h2{ font-size:25px; }
  .cta p{ font-size:14px; }
  .cta .btn{ width:100%; }
  .cta__micro{ gap:8px 18px; margin-top:22px; }

  /* --- 16-10. フッター ------------------------------------------------------
     追従 CTA（§12-2）が最下部を覆うので、その分だけ足元を空ける。
     追従 CTA を出していない /contact/ では空けない。 */
  .foot{ padding-block:52px 40px; }
  body:has(.sticky-cta) .foot{ padding-bottom:calc(40px + 76px + env(safe-area-inset-bottom)); }
  .foot__law{ flex-direction:column; gap:8px; margin-top:34px; }
}

/* 320px 級：ロゴとボタンが並びきらないので、両方を少し詰める */
@media (max-width:359.98px){
  .head__in{ gap:8px; padding-inline:14px; }
  .head__logo img{ height:26px; }
  .head .btn{ padding:9px 12px; font-size:12.5px; letter-spacing:.04em; }
  .wrap{ width:calc(100% - 28px); }
  .cell,.card{ padding:24px 18px; }
}

/* ---------- 17. 本番だけに要るもの ---------- */

/* 本文へスキップ（キーボード操作） */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:var(--text); padding:12px 20px; font-size:14px;
}
.skip:focus{ left:0; }

/* 🔴 /company/ の文字画像（名前・住所・法人番号・代表者名）。
   alt は空にする。alt を書くと結局テキストとして読めてしまい、画像にした意味が無くなる。
   そのぶん読み上げでは読めないので、/contact/ から連絡できる状態を必ず保つ。 */
.txtimg{ display:inline-block; vertical-align:middle; max-width:100%; height:auto; }

/* FV のキャンバス（粒子がアイコンを組み上げる。完成版は fv-mockup/index.html） */
.fv{ position:relative; }
.fv > .wrap{ position:relative; z-index:2; }
#fvcanvas{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; z-index:1; opacity:0; transition:opacity 1.4s ease;
}
#fvcanvas.is-on{ opacity:1; }
@media (prefers-reduced-motion: reduce){ #fvcanvas{ transition:none; } }

/* フォーカスが見える状態を保つ */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}

/* ---------- 18. トップの構成変更ぶん（2026-08-11） ---------- */

/* グレーのボタン（白文字）。
   🔴 ブランドの灰 #8A827A に白文字だと 3.6:1 で基準（4.5）に届かない。
      補足色 #6F6964 なら 5.41:1 で、色味は灰のまま保てる。 */
.btn--gray{ background:var(--btn-gray-bg); color:#FFFFFF; }
.btn--gray:hover{ filter:brightness(1.12); }

/* お悩み16項目。押せるカードなので、触れると黄の面が出る */
.troubles .trouble{ text-decoration:none; display:block; transition:background .2s; }
.troubles .trouble:hover{ background:var(--accent-bg); }
.trouble h3{ font-size:15px; line-height:1.6; margin-bottom:12px; }
.trouble__do{
  font-family:"IBM Plex Sans JP",sans-serif; font-size:12.5px;
  color:var(--accent-tx); margin:0;
}
@media (max-width:1023.98px){ .troubles{ grid-template-columns:repeat(2,1fr); } }

/* ---------- 19. スマホのドロワー（2026-08-11） ----------
   🔴 767px 以下はグローバルナビを display:none にしていただけだったので、
      スマホではロゴと「相談する」しか無く、他のページへ行くには
      フッターまでスクロールするしかなかった（トップは 7900px ある）。
      中身は HTML に出してある（build.py の header()）。ここは見た目と開閉状態だけ。 */

/* --- 19-1. ハンバーガー --- */
.head__burger{
  display:none;               /* 768px 以上では出さない（§16-6 で flex にする） */
  flex:none; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; width:44px; height:44px; margin-right:-10px; padding:0;
  background:none; border:0; cursor:pointer;
}
.head__burger span{
  display:block; width:20px; height:1.5px; background:var(--text);
  transition:transform .2s ease, opacity .2s ease;
}
.head__burger.is-open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.head__burger.is-open span:nth-child(2){ opacity:0; }
.head__burger.is-open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* --- 19-2. 引き出し本体 ---
   🔴 閉じた状態は visibility:hidden で作る（display:none ではない）。
      visibility なら読み上げとタブ移動からも同時に外れるうえ、
      transition が効くので、JS 側で hidden 属性を出し入れせずに済む。

   🔴 この要素を <header class="head"> の中に置いてはいけない（2026-08-11 実測）。
      ※ .head の backdrop-filter は 2026-08-13 に外したので直接の原因は消えたが、
        外に出しておく方針は変えない（再び付けたときに同じ形で壊れるため）。
      当時 .head は backdrop-filter を持っており、backdrop-filter は
      position:fixed の子にとっての「包含ブロック」になる。
      つまり中に入れると、fixed の基準がビューポートではなくヘッダーの箱になり、
      top/bottom がヘッダーの高さ 60px に対して解決されて、
      引き出しが 60px の帯に潰れる（実際にそうなった）。
      だから build.py 側で </header> の外に出してある。 */
.drawer{
  position:fixed; left:0; right:0; top:var(--head-h); bottom:0; z-index:55;
  display:none;               /* 768px 以上では存在しない扱い（下の @media で flex） */
  flex-direction:column;
  padding:6px 18px calc(26px + env(safe-area-inset-bottom));
  background:var(--base); border-top:1px solid var(--border);
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, visibility .18s ease, transform .18s ease;
}
.drawer.is-on{ opacity:1; visibility:visible; transform:none; }
.drawer__nav a{
  display:flex; align-items:center; gap:12px;
  min-height:58px; padding:6px 2px; text-decoration:none;
  font-size:17px; letter-spacing:.04em;
  border-bottom:1px solid var(--border);
}
.drawer__nav a .mono{ margin-left:auto; font-size:13px; color:var(--muted); }
/* 今いるページ。白地なので黄そのものではなく強調文字色を使う（配色の規範） */
.drawer__nav a[aria-current]{ color:var(--accent-tx); box-shadow:inset 3px 0 0 var(--accent); padding-left:12px; }
.drawer__nav a[aria-current] .mono{ color:var(--accent-tx); }
.drawer__cta{ margin-top:26px; width:100%; }
.drawer__micro{ margin:12px 0 0; font-size:11.5px; color:var(--muted); text-align:center; }

/* 出し入れはここに集約する（§16 側に書くと、後ろにある base の
   display:none に上書きされて、ハンバーガーが出ない） */
@media (max-width:767.98px){
  .drawer{ display:flex; }
  .head__burger{ display:flex; }
}

/* 開いている間は後ろの本文を止める。追従 CTA も引っ込める（二重に CTA が出るため） */
body.is-drawer{ overflow:hidden; }
body.is-drawer .sticky-cta{ transform:translateY(110%); }

@media (prefers-reduced-motion: reduce){
  .drawer{ transition:none; transform:none; }
  .drawer.is-on{ transform:none; }
  .head__burger span{ transition:none; }
  .sticky-cta{ transition:none; }
}

/* ---------- 20. 黒地のセクション（2026-08-12） ----------
   🔴 セクションごとに色を手で書かない。トークンごと差し替える。
      既存の .cell / .card / .grid / .list / .member は
      すべて var(--border) var(--muted) var(--accent-tx) を参照しているので、
      このクラスを付けるだけで中身が黒地仕様に変わる。
      個別対応を書き始めると、必ずどこかで規範を破る。

   🔴 黒地でだけ、黄を文字色に使ってよい（11.6:1）。
      白地では使えない（1.7:1）ので、--accent-tx の差し替えは
      このブロックの中だけに閉じること。 */
.sec--dark{
  background:var(--dark);
  color:var(--dark-text);
  --base      : var(--dark);
  --surface   : var(--dark);
  --surface2  : var(--dark);
  --border    : var(--dark-line);
  --muted     : var(--dark-mute);
  --accent-tx : var(--accent);      /* ← 黒地でだけ強調文字が黄になる */
  --accent-bg : rgba(205,207,43,.14);
}
/* 見出しと本文は color を継承させる（h2 は margin:0 のみで色を持っていない） */
.sec--dark .h-sec,
.sec--dark h3,
.sec--dark h4{ color:var(--dark-text); }
/* 押せるカードのホバー。白地は黄の面だったが、黒地では面が強すぎる */
.sec--dark .trouble:hover{ background:rgba(205,207,43,.10); }

/* ---------- 21. 図版（2026-08-12） ----------
   🔴 生成画像を <img> で貼らない。mask-image として使い、
      線の色を currentColor に追従させる。
      2026-08-12 に /company/ の名前画像で、地の色が焼き込まれた PNG が
      黒地セクションで白い長方形になる事故を起こした。
      マスクなら地が透明なので、同じ事故が原理的に起きない。 */
.fig{
  display:block;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:left center;  mask-position:left center;
  -webkit-mask-size:contain;     mask-size:contain;
  opacity:.92;
}
/* 記事・ページ冒頭の1枚絵。
   🔴 16/9 固定をやめた（2026-08-14）。mask-size:contain なので、
      縦長の絵（works-intro は 421x520）を 16/9 の箱に入れると
      520px 幅のうち 283px が空になり、箱の高さ 293px も絵の実寸と合わない。
      高さを直に決めれば、絵は必ずその高さいっぱいに描かれる。
   🔴 幅も 520→280px に詰めた。絵は必ず高さいっぱいに描かれるので、
      520px の箱では横に 250〜360px の「何も描かれない帯」が残っていた
      （実測の箱の使用率 31〜52%）。280px なら絵は1枚も縮まないまま
      使用率が 58〜96% になる。 */
.fig--hero{ width:100%; max-width:280px; height:200px; margin:0 0 30px; }
/* 3本柱の中（黒地）。柱の幅に収める。
   2026-08-12 レビューで 180px→240px。1440px 時点で柱の幅は約390pxあり収まる。
   横並びなので、絵は中央のほうが揃う（.fig の既定は本文に揃える左寄せ）。 */
.fig--pillar{ width:100%; max-width:240px; aspect-ratio:1/1; margin:0 0 20px;
  -webkit-mask-position:center; mask-position:center; }
/* 🔴 .fig--band は削除した（2026-08-13）。/works/ の A/B 帯を撤廃した時点で
   呼び出し元が無くなっていた（band-a.webp / band-b.webp も削除済み）。 */

/* セクション見出しの横に添える絵（TOP の各 h2）。
   見出しの文字ブロックと横に並べる。文字側を伸縮させ、絵は縮めない。 */
.sec-head{ display:flex; align-items:center; justify-content:space-between; gap:40px; }
.sec-head__tx{ flex:1 1 auto; min-width:0; }
/* 見出しブロックの最後の要素なので下マージンは持たせない */
.sec-head .h-sec{ margin-bottom:0; }
/* 🔴 正方形にしない。mask-size:contain なので、横長の絵（棚など）を正方形の枠に
   入れると高さに合わせて縮み、極端に小さくなる。横に広い枠にして高さで揃える。 */
.fig--sec{ flex:none; width:168px; height:112px; margin:0;
  -webkit-mask-position:center; mask-position:center; }

/* ページ冒頭の見出し＋1枚絵。作りは .sec-head と同じで、絵だけ大きい。
   🔴 絵を単独の行に置くのをやめた（2026-08-14）。絵は幅 280px しかないのに
      1行を丸ごと使うため、右に約900pxの空いた帯ができ、さらに上下の余白が
      積み上がって「空白なスペース」に見えていた。 */
/* 🔴 下の余白はここで持つ（2026-08-14）。各ページが inline で
   margin-top を持っていたが、見出しブロックを intro_head() に寄せた時点で
   「絵がある版」だけ余白が消え、リード文と本文がくっついていた。 */
.sec-head--hero{ align-items:flex-start; margin-bottom:56px; }
.sec-head--hero .fig--hero{ flex:none; margin:0;
  -webkit-mask-position:center; mask-position:center; }

@media (max-width:767.98px){
  .fig--hero{ max-width:220px; height:150px; margin-bottom:22px; }
  /* 🔴 SP でも横並びのまま。縦に積むと見出しと本文が絵で分断される。
     そのぶん絵を小さくして、見出しの文字を痩せさせない */
  .sec-head{ gap:16px; }
  .fig--sec{ width:92px; height:62px; }
  /* 🔴 SP では横に並べない。1枚絵は大きいので、横に置くと見出しが痩せる
     （375px だと見出しの幅が 200px を切り、記事タイトルが読めなくなる）。
     縦積みに戻す。1カラムなので、絵が1行使っても間延びしない。 */
  .sec-head--hero{ display:block; margin-bottom:34px; }
  .sec-head--hero .fig--hero{ margin-top:18px; }
}
@media (max-width:359.98px){
  /* 320px では絵より見出しの折り返しを優先する */
  .fig--sec{ display:none; }
}

/* 🟡 .svgfig（インライン SVG の図）の指定は削除した（2026-08-14）。
   図3本（進め方・Excel の前後・ご相談の段階）をすべて外した時点で
   呼び出し元が無くなり、build.py の svgfig() ヘルパーも消したため。
   また使うなら、地の色を焼き付けず currentColor を継ぐこと（.fig と同じ規範）と、
   SP で横に潰さず要素内で横スクロールさせることを踏襲する。 */