/* ---------- 節の地 ----------
   下層は白と beige を節ごとに交互に敷く。beige の節では beige の面を持つ部品を白に反転する */
.section--brand{background:var(--color-surface-brand)}
.section--brand .card,
.section--brand .quote,
.section--brand .info-card{background:var(--color-surface)}

/* ---------- パンくず ---------- */
.breadcrumb{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);
  font-size:var(--text-xs);color:var(--color-text-subtle);
}
.breadcrumb a{transition:color var(--motion-fast) var(--ease-standard)}
.breadcrumb a:hover{color:var(--color-text)}
.breadcrumb [aria-current="page"]{color:var(--color-text)}

/* ---------- ページヒーロー ---------- */
.page-hero{background:var(--color-surface-brand);padding:var(--space-6) 0 var(--space-12)}
/* パンくず直後の要素だけを離す。入れ子の .section-head に二重に効かせない */
.breadcrumb + .section-head{margin-top:var(--space-8)}
.page-hero__title{
  font-size:var(--text-4xl);line-height:var(--leading-4xl);letter-spacing:.08em;
  color:var(--color-text-heading);
}
.page-hero__lead{max-width:672px;color:var(--color-text-subtle)}
/* 個別ページ：本文と図版の2カラム */
.page-hero__split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:var(--space-9);
  align-items:center;margin-top:var(--space-8);
}
.page-hero__media img{border-radius:var(--radius-lg);border:1px solid var(--color-border)}
.page-hero__actions{display:flex;gap:var(--space-4);margin-top:var(--space-7)}
.page-hero__points{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);margin-top:var(--space-7)}
.page-hero__point{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text);
}
.page-hero__point .ic{color:var(--color-brand-gold)}

/* ---------- タブ（一覧のソリューション型の切り替え。挙動 → assets/js/tabs.js） ----------
   segmented control。選択中は surface-inverse の塗り。青の塗りは CTA に予約 */
.tabs{
  display:inline-flex;gap:var(--space-1);padding:var(--space-1);
  background:var(--color-overlay-neutral);border-radius:var(--radius-md);
}
.tab{
  /* btn--wide（200px）より広く、縦は .btn と同じ 8px＝横長のセグメント */
  min-width:260px;
  padding:var(--space-2) var(--space-7);border:0;border-radius:var(--radius-sm);
  background:transparent;color:var(--color-text);cursor:pointer;
  font-family:var(--font-sans);font-size:var(--text-md);font-weight:var(--weight-medium);line-height:1.8;
  transition:background var(--motion-fast) var(--ease-standard),
             color var(--motion-fast) var(--ease-standard);
}
.tab:hover{color:var(--color-text-heading)}
.tab:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.tab.is-active{
  background:var(--color-surface-inverse);color:var(--color-on-surface-inverse);
  font-weight:var(--weight-bold);
}
.tab.is-active:hover{color:var(--color-on-surface-inverse)}
.tabpane{display:none}
.tabpane.is-active{display:block;animation:tabpane-in var(--motion-slow) var(--ease-decelerate)}
@keyframes tabpane-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- ソリューション群（一覧） ---------- */
.section-lead{max-width:var(--max-text);color:var(--color-text-subtle)}
.tabpane .section-lead{margin-top:var(--space-5)}
.tabpane .solution-cards{margin-top:var(--space-8)}
/* 左右 padding は持たない＝タブ・リード文と左端を揃える（トップの .solution-group__cards とはここだけ違う） */
.solution-cards{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);
  margin-top:var(--space-6);padding:0 0 var(--space-4);
}

/* ---------- 導入事例一覧 ---------- */
/* 見出しが sr-only のため、節見出しぶんの上余白を持たない（トップは section-head の下に置く） */
.sr-only + .card-grid-3{margin-top:0}

/* ---------- 情報カード（課題・特徴・活用シーン） ----------
   リンクでない面（radius-xl・金 2px の枠）。金枠は主張したい1節（特徴）に限り、他は --quiet */
.info-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6);margin-top:var(--space-9)}
.info-cards--4{grid-template-columns:repeat(4,1fr)}
/* 3列は 720px まで折らない＝3項目しかなく、2列にすると最後の1枚が半幅で残る */
.info-cards--3{grid-template-columns:repeat(3,1fr)}
.info-card{
  display:flex;flex-direction:column;gap:var(--space-3);
  padding:var(--space-7) var(--space-6);
  background:var(--color-surface-brand);
  border:2px solid color-mix(in srgb,var(--color-brand-gold) 30%,transparent);
  border-radius:var(--radius-xl);
}
.info-card--quiet{border:0}
/* 番号は見出しの中の span。文字として読ませるため gold-700（.step__num と同じ。gold-400 は 2.2:1 で AA 不適合） */
.info-card__num{font-family:var(--font-en);font-weight:var(--weight-semibold);font-size:var(--text-2xl);line-height:1;color:var(--color-brand-secondary)}
.info-card__title{
  display:flex;align-items:center;gap:var(--space-4);
  font-size:var(--text-lg);letter-spacing:.04em;line-height:1.5;color:var(--color-text-heading);
}
/* 導入効果の印。番号と同じ位置・大きさで置く。文字として読ませないため装飾の金 */
.info-card__check{width:1.5rem;height:1.5rem;color:var(--color-brand-gold)}
.info-card__text{font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--color-text-subtle)}
/* 箇条書きを持つカード（検知できる危険行動）。項目のマーカーは金の縦罫 2px（.step と同じ） */
.info-card__list{display:flex;flex-direction:column;gap:var(--space-3)}
.info-card__list li{
  padding-left:var(--space-4);border-left:2px solid var(--color-brand-gold);
  font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--color-text-subtle);
}

/* ---------- 導入企業概要（事例のラベルと値の対） ----------
   カードにしない＝1項目が1行で、器を与えると読む単位が増える。罫だけで行を区切る */
.spec-list{max-width:var(--max-list);margin:var(--space-9) 0 0;border-top:1px solid var(--color-border)}
.spec-list__row{
  display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--space-6);
  padding:var(--space-5) 0;border-bottom:1px solid var(--color-border);
}
.spec-list__label{
  font-size:var(--text-sm);font-weight:var(--weight-medium);letter-spacing:.04em;
  color:var(--color-text-heading);
}
.spec-list__value{margin:0;font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--color-text-subtle)}

/* ---------- ラベル付きのタグの行（事例と関連ソリューションの紐付け） ----------
   タグは <a>。カードを立てず、この行から個別ページへ送る */
.tag-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-top:var(--space-7)}
.tag-row__label{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-heading)}
/* ヒーローでは一回り大きくし、矢印を添えてリンクだと示す */
.tag-row .tag{gap:var(--space-2);padding:var(--space-2) var(--space-4);font-size:var(--text-sm)}

/* ---------- お客様の声（事例） ----------
   金の縦罫は従属見出しに予約しているため、面で持つ（→ README §色） */
/* 左が話者（丸＋肩書き）、右が本文。figcaption は figure の直下でないと不正なため、
   DOM 順（丸・本文・肩書き）は変えずグリッドの配置で左へ寄せる */
.quote{
  /* 本文の幅は文字数で決める。em は本文自身の font-size 基準のため 40em＝1行40字 */
  display:grid;grid-template-columns:auto minmax(0,40em);
  /* 2行目を 1fr にして本文の余りをそちらへ逃がす＝丸と肩書きが離れない */
  grid-template-rows:auto 1fr;
  column-gap:var(--space-6);row-gap:var(--space-2);align-items:start;
  /* 地を中身の幅に合わせ、余りは左右へ等分する。container より狭いときだけ効き、
     幅狭では fit-content が使える幅まで広がる */
  width:fit-content;margin:var(--space-12) auto 0;padding:var(--space-7) var(--space-8);
  background:var(--color-surface-brand);border-radius:var(--radius-xl);
}
/* 話者の丸。地は文字色の α のため、白の節でも beige の節でも同じに出る */
.quote__avatar{
  grid-column:1;grid-row:1;justify-self:center;
  display:grid;place-items:center;
  width:var(--space-12);height:var(--space-12);border-radius:var(--radius-full);
  background:var(--color-overlay-neutral);color:var(--color-text-subtle);
}
/* 隣接するテキストが無いため rem で固定する（→ README §アイコン） */
.quote__avatar .ic{width:2.5rem;height:2.5rem}
.quote__text{grid-column:2;grid-row:1 / 3;margin:0;font-size:var(--text-lg);line-height:1.8;color:var(--color-text-heading)}
.quote__cite{grid-column:1;grid-row:2;align-self:start;text-align:center;font-size:var(--text-sm);color:var(--color-text-subtle)}

/* ---------- 節内の小見出し（見出しは base.css の .subsection__title） ---------- */
.subsection{margin-top:var(--space-12)}
/* 節見出しの直後に来る従属ブロックは、カードと同じ間隔で始める */
.section-head + .subsection{margin-top:var(--space-9)}

/* ---------- ステップ（導入までの流れ） ----------
   番号は文字として読ませるため gold-700（--color-brand-secondary） */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-6);margin-top:var(--space-9)}
.step{
  display:flex;flex-direction:column;gap:var(--space-2);
  padding-left:var(--space-4);border-left:2px solid var(--color-brand-gold);
}
.step__num{font-family:var(--font-en);font-weight:var(--weight-semibold);font-size:var(--text-xs);letter-spacing:.08em;color:var(--color-brand-secondary)}
.step__title{font-size:var(--text-md);letter-spacing:.04em;color:var(--color-text-heading)}
.step__text{font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--color-text-subtle)}

/* ---------- お知らせ（個別） ----------
   日付は一覧の行（.news-row__date）と同じ書体・色。見出しは .subsection__title を使う */
.news-meta{display:flex;align-items:center;gap:var(--space-4)}
.news-meta__date{font-family:var(--font-en);font-size:var(--text-sm);color:var(--color-text-subtle)}
/* 行長は --max-article で止める。段落の間は1行ぶん、見出しの前は話の切れ目として広く空ける */
.article{max-width:var(--max-article)}
.article > * + *{margin-top:var(--space-5)}
.article > h2{margin-top:var(--space-10)}
.article > h2 + *{margin-top:var(--space-4)}
.article a{color:var(--color-accent);text-decoration:underline;text-underline-offset:.2em}


/* ---------- レスポンシブ（境界はトップと同じ 1080px・720px） ---------- */
@media (max-width:1080px){
  .solution-cards{grid-template-columns:repeat(2,1fr)}
  .info-cards--4{grid-template-columns:repeat(2,1fr)}
  /* 手順は2列に折らず縦1列＝読む向きが1方向で保たれる */
  .steps{grid-template-columns:1fr;max-width:var(--max-list)}
  .page-hero__split{grid-template-columns:1fr}
  .page-hero__media{max-width:480px}
}
@media (max-width:720px){
  .section{padding:var(--space-11) 0}
  .page-hero{padding-bottom:var(--space-11)}
  .solution-cards,
  .info-cards,
  .info-cards--3,
  .info-cards--4,
  .steps{grid-template-columns:1fr;gap:var(--space-4)}
  .page-hero__actions{flex-direction:column;align-self:stretch;max-width:var(--max-action)}
  .spec-list__row{grid-template-columns:1fr;gap:var(--space-1)}
  /* 幅狭は話者を本文の高さの中央に置く。2行を等分し、丸を下端・肩書きを上端に寄せると対で中央になる。
     本文は左寄せのまま（text-align に触れない） */
  .quote{padding:var(--space-6);grid-template-rows:1fr 1fr}
  .quote__avatar{align-self:end}
  .quote__cite{align-self:start}
  /* タブは全幅で等分し、最小幅を解く＝2つが入り切る */
  .tabs{display:flex;width:100%}
  .tab{flex:1;min-width:0;padding:var(--space-2) var(--space-2);font-size:var(--text-sm)}
}