/* ============================================================
   identity.css — このサイト固有のアイデンティティ層
   （骨格の components.css とは分離。ここがこのサイトの「顔」）

   採用案:「夜の菫紺 × 出口の緑」。色・サイズは必ずトークン経由。
   装飾のための装飾はしない。要素は道案内・可読性・構造の反映に奉仕する。
   ============================================================ */

/* --- ヒーロー -----------------------------------------------
   写真は置かない。読者は「自分の状況」を探しに来ていて、
   イメージ写真は判断の役に立たないうえ LCP を重くする。
   菫紺の面と明朝の見出しだけで主題を出す。 */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--color-brand-strong);
  color: #fff;
  padding-block: var(--space-16) var(--space-12);
  overflow: hidden;
  border-bottom: 3px solid var(--color-accent);
  /* 背景写真。狭い画面では軽いほうを読む。画像が落ちても brand-strong のベタで成立する */
  --hero-img: url("/assets/images/hero-sm.webp");
}
@media (min-width: 48rem) {
  .hero { --hero-img: url("/assets/images/hero.webp"); }
}
/* 夜明け前の窓。写真の上に必ず濃藍を重ね、本文が乗る左を濃く、窓の光がある右へ向けて薄くする。
   写真が想定より明るくても暗くても、白文字のコントラストが崩れないようにするため。 */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(26, 63, 114, 0.96) 0%,
      rgba(26, 63, 114, 0.90) 30%,
      rgba(26, 63, 114, 0.62) 62%,
      rgba(26, 63, 114, 0.38) 100%),
    radial-gradient(90% 70% at 100% 100%, rgba(15, 125, 89, 0.18) 0%, rgba(15, 125, 89, 0) 60%),
    var(--hero-img) center right / cover no-repeat;
}
/* 狭い画面では窓の明るい部分だけが切り出され、白文字のコントラストが 2:1 台まで落ちる。
   写真の暗い側（部屋）を見せる位置に寄せ、被せも強めて実測 4.5:1 以上を確保する。 */
@media (max-width: 47.99rem) {
  .hero::before {
    background:
      linear-gradient(170deg,
        rgba(20, 48, 88, 0.82) 0%,
        rgba(20, 48, 88, 0.77) 55%,
        rgba(20, 48, 88, 0.68) 100%),
      var(--hero-img) 78% center / cover no-repeat;
  }
}
.hero__text { max-width: 36rem; }
.hero__title {
  color: #fff;
  font-size: clamp(1.6875rem, 4.4vw, 2.375rem);
  line-height: 1.55;
  max-width: 18em;
}
/* 各フレーズは途中で折り返さない（nowrap）。改行は wbr のあるフレーズ境界だけで起きる */
.hero__seg { white-space: nowrap; }
.hero__lede {
  color: #d6e1f0;
  font-size: var(--text-base);
  max-width: var(--measure);
  margin-top: var(--space-6);
}

/* --- 見出し（明朝。細い罫で階層を示す） -------------------- */
.section__title,
.article__body > h2 {
  border-bottom: 2px solid var(--color-brand-tint);
  padding-bottom: var(--space-2);
}
/* h3 は菫紺の左罫で h2 への従属を示す */
.article__body > h3 {
  border-inline-start: 3px solid var(--color-brand);
  padding-inline-start: var(--space-3);
}

/* --- 状況の振り分けカード（トップの主導線） ---------------- */
.pillars {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 34rem) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .pillars { grid-template-columns: repeat(4, 1fr); } }

.pillar {
  margin: 0;
  border: var(--border-width) solid var(--color-border);
  border-top: 3px solid var(--color-brand);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
/* padding はリンク側に持たせ、タイルの隅まで確実にクリックできるようにする */
.pillar__link {
  display: block;
  height: 100%;
  padding: var(--space-6);
  color: inherit;
  text-decoration: none;
}
.pillar:hover {
  border-color: var(--color-brand);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
/* リンクであることを名前の行で示す。矢印は色だけに頼らない手がかり */
.pillar__link .pillar__name::after {
  content: "→";
  color: var(--color-accent);
  margin-inline-start: var(--space-2);
}
.pillar__link:hover .pillar__name { text-decoration: underline; }
/* キーボード操作時は枠全体を光らせる（内側のリンクだけが光ると位置が分かりにくい） */
.pillar:has(.pillar__link:focus-visible) { border-color: var(--color-brand); }
.pillar__icon {
  width: 40px;
  height: 40px;
  color: var(--color-brand);
  margin-bottom: var(--space-3);
}
.pillar__name {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-2);
}
.pillar__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* --- カードのホバー（触れる感触） ------------------------- */
.card {
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.card:hover {
  border-color: var(--color-brand);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* --- 「目的から探す」の導線カード（矢印で行き先を示す） --- */
.card--action .card__title a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--color-brand);
}
.card--action .card__title a::after {
  content: "→";
  flex: none;
  color: var(--color-accent);
  font-weight: var(--weight-bold);
}

/* --- シグネチャー: 依頼先ごとの対応範囲（本文の [[scope]]） ---
   このサイトの核。○×記号だけに頼らず語で書く（色や記号だけで情報を伝えない）。 */
.scope {
  margin-block: var(--space-8);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.scope__caption {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  margin-bottom: var(--space-3);
}
.scope__scroll { overflow-x: auto; }
.scope__table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.scope__table th,
.scope__table td {
  border: var(--border-width) solid var(--color-border);
  padding: var(--space-3);
  text-align: start;
  vertical-align: top;
}
.scope__table thead th {
  background: var(--color-brand-tint);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  color: var(--color-text);
}
.scope__table tbody th {
  background: var(--color-surface);
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--text-base);
}
/* 可否は色だけで示さない。語が主で、色は補助 */
.scope__table td[data-scope="yes"] { color: var(--color-accent-hover); font-weight: var(--weight-medium); }
.scope__table td[data-scope="no"] { color: var(--color-text-muted); }
.scope__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-top: var(--space-3);
  margin-bottom: 0;
}
.scope__src {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
}

/* --- 図解（本文中の分岐図・対応図） -------------------------
   写真は置かない方針なので、図は「内容の構造」を写したものだけを描く。
   装飾のための図は入れない。色は必ずトークン経由（SVG側でCSS変数を参照する）。 */
.diagram {
  margin-block: var(--space-8);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.diagram svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.diagram__caption {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.diagram figcaption {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-top: var(--space-3);
  margin-bottom: 0;
}
/* SVG内で使う共通クラス。トークンを参照するのでリブランドに追従する */
.dg-box { fill: var(--color-surface); stroke: var(--color-border-strong); stroke-width: 1.5; }
.dg-box--brand { fill: var(--color-brand-tint); stroke: var(--color-brand); stroke-width: 1.5; }
.dg-box--accent { fill: var(--color-accent-tint); stroke: var(--color-accent); stroke-width: 1.5; }
.dg-line { stroke: var(--color-border-strong); stroke-width: 1.5; fill: none; }
.dg-text { fill: var(--color-text); font-family: var(--font-body); font-size: 13px; }
.dg-text--sm { fill: var(--color-text-muted); font-size: 11.5px; }
.dg-text--strong { fill: var(--color-brand-strong); font-weight: 700; font-size: 13.5px; }

/* --- 状況別に選ぶ（本文の [[services]]） --------------------
   順位ではなく「自分の状況の列」を選ばせる。3枚を横並びにして比較の負荷を下げ、
   スマホでは縦積みにする。強い枠で囲わず、面と余白で他の本文と分ける。 */
/* スマホでは囲まない。枠と内側余白で本文の横幅が削られるため、
   罫線だけで区切ってカードに幅を渡す。 */
.picks {
  margin-block: var(--space-12);
  padding-block: var(--space-6);
  border-block: var(--border-width) solid var(--color-border);
}
@media (min-width: 46rem) {
  .picks {
    padding: var(--space-6);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
  }
}
.picks__label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.picks__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-6);
}
/* 幅によらず常に1カラム。本文カラムは --measure(40rem) しかなく、3分割すると
   1枚あたり約190pxで pick__shot のキャプチャが潰れ、料金も名称も読めなくなる。
   横に並べて比較させるより、1枚ずつ読ませる。 */
.picks__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.pick {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-top: 3px solid var(--color-brand);
  border-radius: var(--radius);
  padding: var(--space-4);
}
/* 公式サイトのキャプチャ。クリックした先がどんなページかを先に見せる */
.pick__shot {
  margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 0;
  border-bottom: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
}
.pick__shot img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
  object-position: top center;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
/* PCは1カラムでカードが本文幅いっぱい(590px)まで伸びる。高さ170px固定のままだと
   3.5:1 の細長い帯になり、LPの何が写っているか分からない。16:9まで縦を出す。
   スマホは縦スクロール量を増やしたくないので170pxのまま。 */
@media (min-width: 46rem) {
  .pick__shot img {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}
.pick__shot figcaption {
  font-size: 11.5px;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  line-height: 1.6;
}
.pick__price {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.pick__price span {
  font-family: var(--font-ui);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.pick__price em {
  font-style: normal;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
}
.pick__badge {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-brand);
  font-weight: var(--weight-bold);
  margin: 0;
}
.pick__name {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  margin: 0;
}
.pick__fit {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
}
.pick__fit span {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.pick__points {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.75;
}
.pick__points li { padding-inline-start: 1.1em; position: relative; }
.pick__points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-border-strong);
}
.pick__btn { margin-top: auto; }
.picks__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.85;
  margin: var(--space-6) 0 0;
}

/* --- フッターを菫紺で締める -------------------------------- */
.site-footer {
  background: var(--color-brand-strong);
  color: #d6e1f0;
  border-top: 3px solid var(--color-accent);
}
.site-footer a { color: #fff; }
.site-footer__operator { color: #a6b7cf; }