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

   採用案:「常磐緑 × 琥珀」。士業事務所の佇まい。
   基本方針は写真・イラストの装飾を持たず、明朝の見出しと罫線・面の整理だけで
   硬質さと誠実さを出すこと。色・サイズは必ずトークン経由。
   シグネチャー要素は「相談から解決までのフロー」（funnel-steps）。

   例外（2026-07-28・特別対応）: トップのヒーローとOGP画像だけは実写1枚
   （静かな朝の相談室の窓辺）を採用する。人物を写さず、恐怖訴求にしない
   構図を発注したもの。他のページ・記事に写真を広げる方針転換ではない。
   ============================================================ */

/* --- ヒーロー（実写＋暗幕グラデーションで白文字の可読性を確保） --- */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--color-brand-strong); /* 画像読込前・失敗時のフォールバック */
  color: #fff;
  padding-block: var(--space-16) var(--space-12);
  overflow: hidden;
  /* 下端に琥珀の細いライン1本だけ。事務所の看板の一筆 */
  border-bottom: 3px solid var(--color-accent);
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% center; /* 被写体（窓辺）は右寄り。左を文字用に空ける */
  z-index: -2;
}
/* 濃常磐のグラデーションで左を暗くし、白文字のコントラスト(AAA)を確保 */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(19, 46, 36, 0.92) 0%,
    rgba(19, 46, 36, 0.82) 34%,
    rgba(19, 46, 36, 0.45) 62%,
    rgba(19, 46, 36, 0.1) 100%
  );
}
/* モバイルは全体を均一に沈めて、狭い画面でも本文が必ず読める */
@media (max-width: 52rem) {
  .hero::before {
    background: linear-gradient(180deg, rgba(19, 46, 36, 0.86), rgba(19, 46, 36, 0.86));
  }
}
.hero__text { max-width: 44rem; }
.hero__title {
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.6vw, 2.625rem);
  font-weight: var(--weight-bold);
  line-height: 1.5;
}
/* 各フレーズは途中で折り返さない（nowrap）。改行は wbr のあるフレーズ境界だけで起きる */
.hero__seg { white-space: nowrap; }
.hero__lede {
  color: #cfdcd4;               /* 濃常磐に対して十分な明度 */
  font-size: var(--text-lg);
  max-width: var(--measure);
  margin-top: var(--space-4);
}

/* --- 見出し（明朝＋細い下線。色棒やアイコンで飾らない） ----- */
.section__title,
.article__body > h2 {
  font-family: var(--font-display);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-width) solid var(--color-border-strong);
}
/* h3 は下線を持たず、明朝と字下げなしの淡い左罫で従属を示す */
.article__body > h3 {
  font-family: var(--font-display);
  border-inline-start: 3px solid var(--color-brand);
  padding-inline-start: var(--space-3);
}

/* --- 目次は本文カラム内（ポイント直下）。PCでも折りたたみ式を使う ---
   （components.css は SP 専用として PC で隠しているが、このサイトは
     サイドカラムを提携先バナー用に確保するため、目次は本文内に置く） */
@media (min-width: 60rem) {
  .toc--collapsible { display: block; }
}

/* --- 本文の箇条書きは面で見せる（斜め読み用のボックス） ---
   急いで読んでいる読者が、リスト＝要点のまとまりだと一目で分かるようにする。
   コンポーネント内のリスト（key-points / cta__points / toc 等）は対象外。 */
.article__body > ul,
.article__body > ol {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  margin-block: var(--space-6);
  padding: var(--space-4) var(--space-6);
  padding-inline-start: calc(var(--space-6) + 1.2em);
}
.article__body > ul > li::marker,
.article__body > ol > li::marker {
  color: var(--color-brand);
  font-weight: var(--weight-bold);
}

/* --- 4本柱カード（アイコンで即座に見分ける） ---------------- */
.pillars {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 40rem) { .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: 2px solid var(--color-brand);
  border-radius: var(--radius);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
/* カード全体をリンクにする（分野名だけでなく面のどこを押しても遷移する） */
.pillar__link {
  display: block;
  height: 100%;
  padding: var(--space-6);
  color: inherit;
  text-decoration: none;
}
.pillar:hover {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-md);
}
.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);
  margin-bottom: var(--space-2);
}
.pillar__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* --- セクション末尾の補助リンク（一覧の続きへ） --- */
.section__more {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
}

/* --- カードのホバー（控えめに。浮かせず、輪郭で応える） ----- */
.card {
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.card:hover {
  border-color: var(--color-brand);
  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);
}

/* --- シグネチャー: 相談から解決までのフロー -----------------
   記事冒頭に置き、「状況の整理 → 対処 → 相談先 → 解決」の道筋を示す。
   読者は追い詰められた状態で来る。先に全体の道筋を見せることが安心になる。
   最終段（解決）だけ琥珀で示す。 */
.funnel-steps {
  margin-block: var(--space-8);
}
.funnel-steps__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);
}
.funnel-steps__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  padding: 0;
  margin: 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.funnel-step {
  margin: 0;
  padding: var(--space-3) var(--space-2);
  text-align: center;
  background: var(--color-surface);
  position: relative;
}
.funnel-step + .funnel-step { border-inline-start: var(--border-width) solid var(--color-border); }
/* 進行を示す矢印（段の間） */
.funnel-step + .funnel-step::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 50%;
  width: 12px;
  height: 12px;
  background: var(--color-surface);
  border-top: var(--border-width) solid var(--color-border);
  border-right: var(--border-width) solid var(--color-border);
  transform: translateY(-50%) rotate(45deg);
  z-index: 1;
}
.funnel-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: var(--color-brand);
  color: #fff;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-2);
}
.funnel-step__label {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
}
/* 最終段（解決）だけ琥珀で強調 */
.funnel-step:last-child .funnel-step__num { background: var(--color-accent); }

@media (max-width: 30rem) {
  .funnel-step__label { font-size: var(--text-xs); }
}

/* --- 本文の引用＝公的根拠の提示。淡色で弱めず、面で見せる ---
   （用途は writing-skill §15-2c。法令・行政の一文引用で読者を安心させる） */
.article__body blockquote {
  background: var(--color-brand-tint);
  border-inline-start: 3px solid var(--color-brand);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  font-size: var(--text-sm);
}

/* --- 固定CTAの文言は1行で見せる（375px幅で改行させない） ---
   文言側の規律: stickyNote / 既定文言は全角22字以内で書く（超えるとはみ出す） */
.sticky-cta__note { white-space: nowrap; }

/* --- 固定ページ（landing.njk）の本文。h1 直後の見出しが詰まるのを防ぐ --- */
.page__body { margin-top: var(--space-8); }
.page__body > h2 { margin-top: var(--space-10); }
.page__body > h2:first-child { margin-top: 0; }

/* --- カテゴリ一覧の導入本文 ---
   カテゴリ一覧は「闇金」「債務整理」等の検索の受け皿になるため、
   リンク集で終わらせず本文を置く（記事本文と同じ組みで読ませる）。 */
.cat-intro {
  margin-block: var(--space-8);
  max-width: var(--measure);
}
.cat-intro p + p { margin-top: var(--space-4); }

/* --- 公的な相談窓口（カテゴリ一覧） ---
   コンセプト定義書 §4 の中核。CTAより先に、面で目立たせる。 */
.gov-windows {
  margin-block: var(--space-10);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-top: 3px solid var(--color-brand);
  border-radius: var(--radius);
  padding: var(--space-6);
}
.gov-windows__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  margin: 0;
}
.gov-windows__lede {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}
.gov-windows__list {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin-top: var(--space-6);
}
@media (min-width: 48rem) {
  .gov-windows__list { grid-template-columns: repeat(2, 1fr); }
}
.gov-window {
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.gov-window__name {
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  margin: 0;
}
.gov-window__name a { color: var(--color-brand); }
/* 電話番号は琥珀で大きく。この面でいちばん取ってほしい行動 */
.gov-window__tel {
  margin-top: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
}
.gov-window__tel a {
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  text-decoration: none;
}
.gov-window__tel a:hover { text-decoration: underline; }
.gov-window__hours {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.gov-window__role {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.gov-windows__note {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* --- 記事タグ（カテゴリ横断の切り口。/tags/<slug>/ へのバッジリンク） ---
   記事では末尾（関連記事の下）に置く。ファーストビューはタイトルと本文に使う。 */
.tag-block {
  margin-block: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--color-border);
}
.tag-block__label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}
.tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin-top: var(--space-3);
}
.tag-pills a {
  display: inline-block;
  font-size: var(--text-xs);
  font-family: var(--font-ui);
  color: var(--color-brand);
  background: var(--color-brand-tint);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-full, 999px);
  padding: var(--space-1) var(--space-3);
  text-decoration: none;
}
.tag-pills a:hover { border-color: var(--color-brand); }
.tag-pills a::before { content: "#"; opacity: 0.6; }

/* --- 問い合わせフォーム（Googleフォーム埋め込み）。幅は画面に合わせて縮める --- */
.form-embed {
  max-width: 640px;
  margin-block: var(--space-6);
}
.form-embed iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 837px;
  border: none;
}

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