/*
  Raside HP 共通スタイル(site.css)
  出典: hp-strategy/_source/index-onepage.html の <style> ブロックを移植し、
  hp-strategy/multipage-spec.md §2 のタイポグラフィ・トークンを機械的に適用したもの。
  全ページからこの1ファイルを <link> する。

  方向B: ウォーム・クラフト
  ブランドトークンは DESIGN.md §1 のCSS変数をそのまま採用。フォントは Zen Maru Gothic を第一候補にし、
  フォールバックとして Hiragino Maru Gothic ProN を指定(Windows環境では既定フォントに、Apple環境では
  ヒラギノ丸ゴにフォールバックする設計)。
  色の意味の一貫性メモ: このHPには成功/エラーの状態表現は無いため緑=成功/赤=エラーの出番は無い。
  ナビの「現在地」表示、AI研修レベル帯図の「提供中」タグ、章バッジ等の"進捗・状態"表現はすべて
  primary(暖色)の塗り/縁取りで統一し、「開発中」は muted のアウトラインで表現する(正誤の判定ではなく
  提供状況の説明であるため、緑・赤は使わない)。
*/

:root {
  /* ブランド(現行 index.html と同一) */
  --bg:#FAF6F0;
  --surface:#FFFFFF;
  --text:#3D3229;
  --muted:#6E5F4F;
  --line:#CFC0AB;          /* 2026-07-19: #E8DFD3(対白1.32:1で枠が消失)→暖色グレーベージュへ濃色化。対surface 1.78:1・対bg 1.66:1 */
  --line-strong:#8A7A66;   /* 2026-07-19 新設: 枠線が唯一の識別手段のUI部品(btn-outline等)用。WCAG 1.4.11の3:1を満たす(対bg 3.86:1・対surface 4.15:1)。装飾枠の--lineとは役割を分ける */
  --primary:#A54A07;       /* 2026-07-19: #B45309(対bg 4.66:1でギリギリ)→1段濃色化。対bg 5.44:1・対surface 5.86:1・白文字5.86:1・対#FDF0E1 5.23:1 */
  --primary-strong:#8A3A05;/* 2026-07-19 新設: hover用の濃色。対bg 7.26:1・対surface 7.81:1・白文字7.81:1。旧hover色--accent(#D97706, 対bg2.96:1)はAA未達のため置換 */
  --accent:#D97706;        /* 対bg2.96:1のためテキストには使わない。装飾(wordmarkドット・hero-blob)専用 */
  --on-primary:#FFFFFF;
  --radius:14px;
  --radius-btn:999px;
  --font-display:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Arial Rounded MT Bold",sans-serif;
  --font-body:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN",sans-serif;

  /* 文字サイズ(7段。これ以外の font-size を新設しない) */
  --fs-xs: 0.875rem;    /* 14px 注記・キャプション(最小。11/12/13px系はすべてここへ。2026-07-19: デジタル庁基準「14px未満は原則不可」により13px→14px) */
  --fs-sm: 0.875rem;    /* 14px メタ・タグ・ナビ・フッター */
  --fs-base: 1rem;      /* 16px 本文・ボタン */
  --fs-lead: 1.125rem;  /* 18px リード文 */
  --fs-h3: 1.25rem;     /* 20px H3・カード見出し */
  --fs-h2: clamp(1.5rem, 3vw, 1.75rem);      /* 24→28px セクション見出し */
  --fs-h1: clamp(1.875rem, 4.6vw, 2.625rem); /* 30→42px ヒーロー */

  /* 行間 */
  --lh-body: 1.8;
  --lh-heading: 1.4;
  --lh-ui: 1.5;

  /* 字間 */
  --ls-body: 0.02em;
  --ls-heading: 0.01em;

  /* 行長・余白(8pxスケール: 8/16/24/32/48/64/96) */
  --measure: 48em;        /* 読み物ブロック(実例カード・privacy等の複数文段落)用 */
  --measure-lead: 66em;   /* リード・紹介文用(2026-07-19 2段階化で合意)。1120px窓なら67字の文まで句読点で行を終えられる幅 */
  --section-pad: 68px;    /* C案(2026-07-19) 96px→68px。モバイル(max-width:720px)では 56px */
  --para-gap: 1.5em;
}

@media (max-width: 720px) {
  :root {
    --section-pad: 56px;
  }
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  font-size: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0;
}

p { margin: 0; }

/* 和文にイタリックはないため em は太字で強調(疑似斜体の防止) */
em { font-style: normal; font-weight: 700; }

ul, ol { margin: 0; padding: 0; list-style: none; }

table { border-collapse: collapse; }

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}
.contact-card a:focus-visible,
.contact-card button:focus-visible {
  outline-color: var(--on-primary); /* 2026-07-19: primary背景の帯内ではprimaryリングが同化して不可視のため白に */
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  background: var(--primary);
  color: var(--on-primary);
  padding: 10px 18px;
  border-radius: var(--radius-btn);
  font-size: var(--fs-sm);
  z-index: 100;
  transition: top .2s ease;
}
.skip-link:focus {
  top: 12px;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 14px;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.03em;
  font-size: var(--fs-h3); /* 旧22px→wordmarkは20pxに統一(仕様書§2 対応表) */
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wordmark .logo-mark {
  /* 2026-07-19: CSS丸ポチをブランドシンボル(弧が円を抱く)に置換。原本=deliverables/logo/raside-symbol.svg。色はブランド原色固定(#B45309/#D97706) */
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.site-nav a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--radius-btn);
  text-decoration: none;
  font-size: 0.9375rem; /* 15px。2026-07-19: 主要ナビは付随情報ではないため14px(--fs-sm)から1段上げ(7段スケール外の例外。デジタル庁基準対応) */
  font-weight: 700;
  color: var(--text);
  position: relative;
}
.site-nav a:hover {
  background: var(--surface);
}
/* 現在地: 旧 [aria-current="true"](IntersectionObserverでJS付与)から
   静的な [aria-current="page"](各ページのheader.htmlに直書き)へ変更 */
.site-nav a[aria-current="page"] {
  color: var(--on-primary);
  background: var(--primary);
}
/* 2026-07-19: ナビ7項目が3段に折れるためgap/padding/字サイズ/字間を詰めて2段以内へ(字サイズ下限14pxは維持)。
   基底 .site-nav a より後方に置くこと(同詳細度のためファイル先頭のメディアブロックに書くと基底に負ける) */
@media (max-width: 720px) {
  .site-header .wrap {
    padding-left: 16px;  /* 24px→16px。375px幅で「自社プロダクト+代表プロフィール+お問い合わせ」を2段目に収めるための横幅確保 */
    padding-right: 16px;
  }
  .site-nav ul { gap: 4px 2px; }
  .site-nav a {
    padding: 7px 6px;
    font-size: var(--fs-sm); /* 15px→14px(モバイルのみ。下限ちょうど) */
    letter-spacing: 0;       /* 0.02em→0。7項目合計で約12pxの節約 */
  }
}
@media (max-width: 370px) {
  /* 2026-07-19: 360px級(Android主流)でナビが3段化するため追加圧縮。320pxは3段を許容(14px下限を割らない範囲の限界) */
  .site-header .wrap { padding-left: 12px; padding-right: 12px; }
  .site-nav ul { gap: 2px 0; }
  .site-nav a { padding: 7px 4px; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--section-pad) 0; /* 旧 88px 0 96px → section-padに統一(heroも同じ、仕様書§2) */
}
.hero-blob {
  position: absolute;
  top: -140px;
  right: -120px;
  width: 520px;
  height: 520px;
  z-index: 0;
  opacity: 0.5;
}
.hero .wrap {
  position: relative;
  z-index: 1;
}
/* .eyebrow はトップヒーローのブランドチップ「Raside（ラシイド）」専用(2026-07-19 確定)。
   セクションラベルには使わない(そちらは .section-label のアクセントバー意匠に一本化) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm); /* 旧15px(タグ相当) */
  font-weight: 700;
  color: var(--primary);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 6px 16px;
  border-radius: var(--radius-btn);
  margin-bottom: 28px;
}
.hero h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  max-width: 20em; /* 仕様書§2: 20emは維持 */
  margin-bottom: 24px;
}
.hero-desc {
  font-size: var(--fs-lead);
  max-width: var(--measure); /* 2026-07-19: 48em=18px基準で864px。第1文「〜手がけています。」(842px)が句点で行を終え、右上の装飾円に文字が重ならない幅。文言変更時は要再確認 */
  margin-bottom: 36px;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-btn);
  font-weight: 700;
  font-size: var(--fs-base); /* 旧15px(.btn系) */
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
}
.btn-primary:hover {
  background: var(--primary-strong); /* 2026-07-19: 旧#953f06のハードコードを変数化。白文字7.81:1 */
}
.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong); /* 2026-07-19: 枠線が唯一の識別手段のためWCAG 1.4.11の3:1が必要。--line(1.78:1)→--line-strong(対bg3.86:1・対surface4.15:1) */
}
.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ---------- section shared ---------- */
section {
  padding: var(--section-pad) 0;
}
.section-head {
  max-width: var(--measure-lead); /* 見出し+リードの器(2026-07-19から本文と同幅) */
  margin-bottom: 32px; /* C案(2026-07-19) 48→32px: 見出しと本文の関連を近接で示す */
}
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--primary);
  margin-bottom: 12px;
}
.section-label::before {
  content: "";
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent); /* C案(2026-07-19): 枠を減らした分、暖色バーで構造の手がかりを補強(装飾のためコントラスト対象外) */
}
.section-head h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  margin-bottom: 16px;
}
.section-head h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0 0 16px;
}
.section-lead {
  font-size: var(--fs-base);
  color: var(--text);
  max-width: var(--measure-lead);
}

/* 2026-07-19: 枠と面の分離。--line枠のカード群に控えめな影を足し、bg上でsurfaceが浮くようにする(枠線だけに頼らない)。
   C案適用により .about-card/.region-card/.premise-card/.policy-section は枠なし化し本リストから除外。
   末尾4つ(.story-card/.product-card/.doc-note/table.disclosure)は services/tokushoho の各HTML内<style>定義のカード */
.level-card,
.diff-card,
.steps-list li,
.info-table,
.axis-card,
.biz-card,
.profile-card,
.flow-list li,
.story-card,
.product-card,
.doc-note,
table.disclosure {
  box-shadow: 0 1px 3px rgba(61, 50, 41, 0.06), 0 4px 12px rgba(61, 50, 41, 0.04);
}

/* ---------- about ---------- */
/* C案(2026-07-19): 単一テキストブロックを箱で囲まない(カードは不均一情報専用)。枠を捨て余白で区切る */
.about-card {
  padding: 0;
  max-width: var(--measure-lead); /* 紹介文系のため広い方の器(句読点で行を終えるため) */
}
.about-card p + p {
  margin-top: 16px;
}
.about-card p {
  font-size: var(--fs-base);
}

/* ---------- training section ---------- */
.training-block {
  padding-top: 56px;
  margin-top: 56px;
  border-top: 1px solid var(--line);
}
.training-block:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}
.training-block h2,
.training-block h3 {
  /* h2 は training.html で「AI研修」page h1 昇格に伴い、配下見出しをh3→h2昇格した際の受け皿
     (multipage-spec.md §5 /training)。視覚サイズは旧h3のfs-h3を維持し据え置く。 */
  font-size: var(--fs-h3); /* 旧21px */
  margin-bottom: 8px;
}

/* report link (training.html 追加1): 「進め方」STEP5直後の /sample-report 導線。仕様書§5 */
.report-link {
  margin-top: 20px;
}
.training-block-sub {
  font-size: var(--fs-sm);
  color: var(--muted);
  max-width: var(--measure-lead); /* 2026-07-19深夜: 見出し直下のサブリードのため66em化(長い定義文が句点で行を終えるため。旧48em) */
  margin-bottom: 24px;
}

/* level band */
.level-track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.level-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.level-card.is-live {
  border-color: var(--primary);
  /* inset枠(現状維持)+共通カード影の合成。box-shadowは上書き合戦になるため両方明記(2026-07-19) */
  box-shadow: inset 0 0 0 1px var(--primary), 0 1px 3px rgba(61, 50, 41, 0.06), 0 4px 12px rgba(61, 50, 41, 0.04);
}
.level-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3); /* 旧22px */
  color: var(--primary);
}
.level-card.is-dev .level-num {
  color: var(--muted);
}
.level-name {
  font-size: var(--fs-xs); /* 旧12.5px */
  font-weight: 700;
  line-height: var(--lh-ui);
  min-height: 2.6em;
}
.level-status {
  display: inline-block;
  font-size: var(--fs-xs); /* 旧11px */
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-btn);
}
.level-status.live {
  background: var(--primary);
  color: var(--on-primary);
}
.level-status.dev {
  background: transparent;
  border: 1px solid var(--line-strong); /* 2026-07-19: --lineでは枠が実質不可視のため */
  color: var(--muted);
}
.level-legend {
  margin-top: 18px;
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* diff points */
.diff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
.diff-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.diff-card h3,
.diff-card h4 {
  font-size: var(--fs-base); /* 旧16px */
  line-height: var(--lh-heading);
  margin-bottom: 10px;
}
.diff-card p {
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* steps */
.steps-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.steps-list li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 16px;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
  font-size: var(--fs-xs); /* 旧12px */
  margin-bottom: 12px;
}
.step-title {
  font-weight: 700;
  font-size: var(--fs-sm);
  margin-bottom: 4px;
}
.step-desc {
  font-size: var(--fs-xs); /* 旧12.5px */
  color: var(--muted);
}

/* info table */
.info-table {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.info-table th,
.info-table td {
  text-align: left;
  padding: 16px 22px;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.info-table th {
  width: 34%;
  color: var(--muted);
  font-weight: 700;
}
.info-table tr:last-child th,
.info-table tr:last-child td {
  border-bottom: none;
}
@media (max-width: 640px) {
  .info-table th,
  .info-table td {
    display: block;
    width: 100%;
  }
  .info-table th {
    border-bottom: none;
    padding-bottom: 6px;
  }
  .info-table td {
    padding-top: 6px;
  }
}
.info-note {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 14px;
}

/* axis */
.axis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}
.axis-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}
.axis-card h3,
.axis-card h4 {
  font-size: var(--fs-base);
  margin-bottom: 8px;
}
.axis-card p {
  font-size: var(--fs-xs); /* 旧13.5px */
  color: var(--muted);
}
.axis-note {
  font-size: var(--fs-sm);
  color: var(--text);
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 16px 20px;
}
.textbook-figure {
  margin: 0 0 20px;
}
.textbook-figure img {
  display: block;
  width: 100%;
  max-width: 680px;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(61, 50, 41, 0.10);
}
.textbook-figure figcaption {
  font-size: var(--fs-xs); /* 旧12px */
  color: var(--muted);
  margin-top: 8px;
}

/* 日本語の改行制御(2026-07-19 合意版): 見出し=文節折返し。
   本文・リードはPCで「文節折返し+両端揃え」(熟語が割れず、行長も揃う)。
   モバイルは行が短く文節折返しだと字間が開きすぎるため「自然折返し+両端揃え」に切替。
   auto-phrase非対応ブラウザ(Safari等)も自然折返し+両端揃えになる */
.nb { display: inline-block; }
@media (max-width: 720px) {
  /* 2026-07-19深夜: .nb はPCの文節折返し補助。モバイルは自然折返し方針のため inline に退行させる。
     inline-block のままだと長い .nb(例: services「企業コミュニケーション支援会社」15字)が
     375px幅を突き破りページ全体に横スクロールを発生させる(実測 scrollWidth 389px の事故) */
  .nb { display: inline; }
}
p, li, dd, td, .hero-desc, .section-lead { text-align: justify; }
@supports (word-break: auto-phrase) {
  h1, h2, h3, h4 { word-break: auto-phrase; }
  @media (min-width: 721px) {
    p, li, dd, td, .hero-desc, .section-lead { word-break: auto-phrase; }
    /* 幅の狭い器(1行30字未満のカード列)では文節折返し+両端揃えだと字間が伸びすぎるため自然折返しへ。justifyは維持
       (.contact-card p / .product-card p は器が広い(1カラム化・48em)ため2026-07-19に除外=文節折返しに復帰) */
    .biz-card p, .diff-card p, .axis-card p, .level-card, .flow-list li, .steps-list li { word-break: normal; }
  }
}

/* flow */
.flow-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
}
.flow-list li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  font-size: var(--fs-sm);
  flex: 1 1 180px;
}
.flow-list .flow-label {
  display: block;
  font-size: var(--fs-xs); /* 旧11px */
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

/* training cta repeat */
.training-cta {
  text-align: center;
}
.training-cta p {
  font-size: var(--fs-base);
  color: var(--muted);
  margin-bottom: 20px;
}

/* ---------- region ---------- */
.region-card {
  /* C案(2026-07-19): 1段落カードの枠を撤去。アイコン+テキストの横並びは維持 */
  padding: 0;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  max-width: none; /* 2026-07-19: 62字の文を句読点まで1行で通すため上限撤廃(.wrapが実質上限) */
}
.region-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #FDF0E1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}
.region-icon svg { width: 26px; height: 26px; }
.region-card p {
  font-size: var(--fs-base);
  letter-spacing: 0; /* 2026-07-19: about.htmlの62字文「拠点は〜対面で対応します。」を1120px窓で句点まで1行に収めるため(0.02em分≒20pxの節約)。training.htmlのregion-cardにも波及するが実害なし。この文言を変えたら見直すこと */
}
.region-card p + p { margin-top: 10px; }

/* ---------- products ---------- */
.business-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.biz-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* .biz-icon(汎用SVGチップ)は2026-07-19に実アプリアイコン(.biz-icon-img)へ全置換済みのため削除 */
.biz-icon-img {
  /* 2026-07-19: 自社プロダクトカードは汎用SVGチップの代わりに実アプリアイコンを表示 */
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: block;
}
.biz-card h2,
.biz-card h3 {
  font-size: var(--fs-lead); /* 旧19px */
}
.biz-card p {
  font-size: var(--fs-sm); /* 旧14.5px */
  color: var(--text);
}
.biz-status {
  display: inline-block;
  align-self: flex-start;
  font-size: var(--fs-xs); /* 旧12px */
  font-weight: 700;
  color: var(--muted);
  border: 1px solid var(--line-strong); /* 2026-07-19: --lineでは枠が実質不可視のため */
  border-radius: var(--radius-btn);
  padding: 4px 12px;
}
.biz-card .btn {
  margin-top: auto;
  align-self: flex-start;
  padding: 10px 20px;
  font-size: var(--fs-sm); /* 旧14px */
}
/* 2026-07-19 キービジュアル(A+B合成・ユーザー指定): プロダクトカード上部いっぱいにカバー画像(1200x630)。
   カバーにアイコン+ロゴが含まれるため、アイコン単体行(.biz-icon-img)は置かない */
.biz-card--cover {
  padding-top: 0;
  overflow: hidden; /* フルブリード画像をカード角丸でクリップ */
}
.biz-cover {
  width: calc(100% + 56px); /* biz-card の左右padding 28px ぶんを打ち消してフルブリード */
  max-width: none; /* 共通 img{max-width:100%} がフルブリード幅をクランプするため解除 */
  margin: 0 -28px;
  aspect-ratio: 1200 / 420; /* HP用は余白を詰めた1200x420版(2026-07-19 本人要望で500→420に再圧縮)。OGP用の630版とは別画像 */
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--line);
}

/* 2026-07-20: トップのダイジェスト用コンパクトカバー(1200x300専用画像)。420版のcoverトリムは文字が切れるため専用レイアウトで別画像 */
.biz-cover--sm { aspect-ratio: 1200 / 300; }

/* 2026-07-20: プロダクト画像のタップ拡大(ライトボックス)。実装は assets/site.js */
.zoomable { cursor: zoom-in; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(26, 20, 14, .84);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  cursor: zoom-out;
}
.lightbox img {
  max-width: min(1200px, 100%);
  max-height: 100%;
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
}
.lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-close:hover { background: rgba(255, 255, 255, .26); }

/* 2026-07-19 スクショ帯(A案採用): プロダクトカードの本文とボタンの間に、アプリ実画面を横長の帯で見せる */
.app-strip {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 7;
  background: #EFEBE3; /* 読み込み中・端数ピクセルの下地(サイトbgより一段濃い生成り) */
}
.app-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.app-strip--single img {
  object-position: 50% 38%; /* renomiru-app.webp の「現況/施工後イメージ」比較UIをラベルごと見せる値。画像を差し替えたら見直すこと */
}
.app-strip--multi { display: grid; grid-template-columns: repeat(3, 1fr); } /* スマホスクショちょうど3枚が前提。枚数を変えるなら列数も見直すこと */
.app-strip--multi img { object-position: top; } /* スマホスクショはヘッダー〜ヒーローが要点のため上端合わせ */
.app-strip--multi img + img { border-left: 1px solid var(--line); }

/* ---------- profile ---------- */
.profile-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 32px;
  align-items: center;
}
.profile-photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: #FDF0E1;
  border: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  overflow: hidden;
}
.profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}
/* 2026-07-19: 代表プロフィール個別ページは写真を大きく角丸で(丸140pxはindexのabout-digest用)。本人要望 */
.profile-card--page {
  grid-template-columns: 300px 1fr;
  align-items: start;
}
.profile-card--page .profile-photo {
  width: 300px;
  height: 300px;
  border-radius: 20px;
}
.profile-name {
  font-size: var(--fs-h3); /* 旧22px */
  font-weight: 700;
  margin-bottom: 2px;
}
.profile-name-en {
  font-size: var(--fs-xs); /* 旧13px */
  color: var(--muted);
  margin-bottom: 12px;
}
.profile-role {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 16px;
}
.profile-bio p {
  font-size: var(--fs-base);
  max-width: var(--measure); /* 旧60ch */
}
.profile-bio p + p {
  margin-top: 12px;
}

/* ---------- contact ---------- */
.contact-card {
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--radius);
  padding: 48px 40px;
  /* 2026-07-19: 右のメール列(ボタンとアドレス重複)を撤去し1カラム化 */
  display: block;
}
.contact-card h1,
.contact-card h2 {
  color: var(--on-primary);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  margin: 0 0 12px;
}
.contact-lead {
  font-size: var(--fs-base);
  max-width: 40em; /* 2026-07-19: 24em→40em。1カラム化に伴い「〜ご相談ください。」(35.8em)が句点で行を終えられる幅に */
  opacity: 0.95;
}
.contact-note {
  font-size: var(--fs-xs); /* 旧13.5px */
  max-width: 24em; /* 旧46ch→24em */
  opacity: 0.95; /* 2026-07-17: contact-card(--primary背景)上でのコントラスト比4.5:1確保のため0.85→0.95 */
  margin-top: 10px;
}
.contact-card .btn-primary {
  background: var(--on-primary);
  color: var(--primary);
  margin-top: 20px;
}
.contact-card .btn-primary:hover {
  background: #FDF0E1;
}
/* .contact-meta 一式は2026-07-19のメール列廃止で全ページから削除済み(死んだCSSも同時削除) */

/* ---------- footer ---------- */
footer {
  border-top: 1px solid var(--line);
  padding: 32px 0;
}
footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs); /* 旧13px */
  color: var(--text);
}
.footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-links a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-links a:hover { color: var(--primary); }

/* ---------- home digest sections(index.html 専用。凍結ソースには無い新規コンポーネント) ---------- */
.digest-cta {
  margin-top: 32px;
}
.digest-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}
.digest-links a {
  font-weight: 700;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.digest-links a:hover { color: var(--primary-strong); } /* 2026-07-19: --accent(対bg2.96:1 AA未達)→濃色hoverへ。対bg7.26:1 */

.about-digest-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}
.about-digest-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--line);
  background: #FDF0E1;
  flex-shrink: 0;
}
.about-digest-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
/* about-digest-profile 内の氏名・肩書は既存の .profile-name / .profile-role(トークン適用済み)を再利用する */

@media (max-width: 900px) {
  .steps-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .profile-card {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  .profile-card--page .profile-photo {
    width: min(100%, 300px);
  }
  /* .contact-card のgrid上書きと.contact-metaモバイル調整は1カラム化(display:block)で不要になり削除(2026-07-19) */
  .level-track {
    grid-template-columns: repeat(3, 1fr);
  }
  .region-card {
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .site-header .wrap {
    justify-content: center;
    text-align: center;
  }
  .site-nav ul {
    justify-content: center;
  }
  /* 旧 .hero{padding:64px 0 72px} / section{padding:56px 0} は
     720px以下で --section-pad:64px を再定義する上記の :root オーバーライドに統合したため削除 */
  .biz-card, .profile-card, .contact-card {
    padding: 24px; /* 2026-07-19: about-card/region-cardは枠なし化(padding:0)したため除外 */
  }
  .steps-list {
    grid-template-columns: 1fr;
  }
  .level-track {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation: none !important; }
}