@charset "utf-8";

/* 複数ページで使い回すコンポーネント（`.c-*`）。詳細: _claude/css-architecture.md 6章 */

/* ============================================================
 * .c-hero — 下層ページのヒーロー
 * ============================================================ */
/* 文字・装飾・高さは画面幅によらず固定（Figma 1440 の寸法）。
   広い画面で伸びるのは右側の写真の横幅だけ（リキッド表示はやらない・2026-09-15） */
.c-hero {
  position: relative;
  overflow: hidden;
  height: 330px;
  background: var(--color-white);
}

.c-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 100%;
  max-width: var(--width-container);
  margin-inline: auto;
  padding-inline: var(--padding-inline);
}

.c-hero__title-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 600px;
}

.c-hero__eyebrow {
  font-size: var(--font-size-title);
  font-weight: 700;
  line-height: var(--line-height-label);
  color: var(--color-brand);
}

.c-hero__heading-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.c-hero__icon {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
}

.c-hero__icon span {
  display: block;
  width: 22px;
  height: 3px;
}

.c-hero__icon span:nth-child(1) { background: var(--color-brand); }
.c-hero__icon span:nth-child(2) { background: var(--color-brand-light); }
.c-hero__icon span:nth-child(3) { background: var(--color-accent-gold); }

.c-hero__title {
  font-size: var(--font-size-display);
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--color-ink);
}

/* 右側に回り込む写真。左端は本文の中央基準（1440で x740＝Figma）、右は画面外まで伸ばす
   ＝画面が広いほど横幅だけ伸び、高さは固定のまま object-fit で上下が見切れる。
   440px は最長の見出し（建築・省エネ・創エネ）に重ならない下限 */
.c-hero__photo {
  position: absolute;
  top: -51px;
  right: -100px;
  left: max(calc(50% + 20px), 440px);
  height: 380px;
  border-bottom-left-radius: 160px;
  overflow: hidden;
}

.c-hero__photo img {
  position: absolute;
  top: 13.39%;
  left: -2.5%;
  width: 102.49%;
  height: 96.55%;
  max-width: none;
  object-fit: cover;
  object-position: 100% 50%; /* 幅が縮んだとき左から見切れる */
}

.c-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--gradient-scrim-hero);
}

/* 写真なし（'photo' => false・2026-10-02 先方「とりあえず画像なし」）。弧の形だけ薄い水色の面で残す */
.c-hero__photo--blank {
  background: var(--color-brand-tint);
}

.c-hero__photo--blank::after {
  content: none;
}

/* ============================================================
 * .c-section-heading — セクション見出し（英字アイブロー＋和文h2）
 * ============================================================ */
.c-section-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.c-section-heading__eyebrow {
  font-size: var(--font-size-title);
  font-weight: 700;
  line-height: var(--line-height-label);
  color: var(--color-brand);
}

.c-section-heading__title {
  font-size: var(--font-size-heading-1);
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--color-ink);
}

/* ============================================================
 * .c-subsection-heading — 子セクションの見出し（3色スラッシュ＋中央揃え）
 * Figma: Heading/SlashCenter（1399:154）／Icon/Slashes（1399:147）
 * ============================================================ */
.c-subsection-heading {
  --title-font-size: var(--font-size-heading-2);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-12);
}

/* 中央に来るのは文字だけにする（装飾は左にぶら下げる）。
   右に装飾と同じ幅の見えない余白を置いて左右対称にする */
.c-subsection-heading::after {
  content: "";
  flex-shrink: 0;
  width: 28px;
}

/* 28×28 の枠に、幅3×高さ20の棒を20°傾けて7px間隔で3本。
   折り返したときも1行目の高さの中央に揃える（1行なら上下中央と同じ） */
.c-subsection-heading__icon {
  position: relative;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-top: calc((var(--title-font-size) * var(--line-height-heading) - 28px) / 2);
}

.c-subsection-heading__icon span {
  position: absolute;
  top: 4px;
  width: 3px;
  height: 20px;
  border-radius: 1.5px;
  transform: rotate(20deg);
}

.c-subsection-heading__icon span:nth-child(1) { left: 3px;  background: var(--color-brand-light); }
.c-subsection-heading__icon span:nth-child(2) { left: 10px; background: var(--color-brand); }
.c-subsection-heading__icon span:nth-child(3) { left: 17px; background: var(--color-accent-gold); }

.c-subsection-heading__title {
  font-size: var(--title-font-size);
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--color-ink);
}

/* ============================================================
 * .c-photo-banner — 写真＋青スクリム＋白文字のバナー
 * 既定＝セクション冒頭の大バナー（440px）
 * --plan 修飾子＝各ブロック冒頭のキー画像（300px）
 * ============================================================ */
.c-photo-banner {
  position: relative;
  height: 440px;
  border-radius: var(--radius-16);
  overflow: hidden;
  box-shadow: var(--shadow-banner);
}

.c-photo-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center; /* 幅が狭くなったら左から見切れる */
}

.c-photo-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--gradient-scrim-strong);
}

.c-photo-banner__body {
  position: absolute;
  z-index: 1;
  left: 46px;
  bottom: 44px;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.c-photo-banner__eyebrow {
  font-size: var(--font-size-label-small);
  font-weight: 700;
  line-height: var(--line-height-label);
  letter-spacing: 1.8px;
  color: var(--color-text-on-photo);
}

.c-photo-banner__statement {
  max-width: 560px;
  font-size: var(--font-size-heading-2);
  font-weight: 700;
  line-height: var(--line-height-heading);
  letter-spacing: .54px;
  color: var(--color-white);
  text-shadow: var(--shadow-text-on-photo);
}

/* 動き（2026-09-16 ユーザー決定「あなたの案で行こう」）。写真だけを動かし、文字は動かさない
 * HTML：<div class="c-photo-banner c-photo-banner--zoom" data-fade-in>（セクション冒頭の大バナーだけ。--plan には付けない）
 *   画面に入ると JS（common.js 3.）が is-visible を付ける。見た目はここ（.u-fade-in は使わない）
 * --zoom：写真が 1.06倍 → 等倍へ 6秒かけてゆっくり戻る（奥行きが出るだけで装飾に見えない）
 * （斜めのめくり --wipe は同日試して不採用・削除。経緯は _claude/js-architecture.md 8章）
 * JS が動かない環境では隠さない（<html>.is-script-enabled があるときだけ最初の状態にする） */
.c-photo-banner--zoom img {
  transition: transform 6s var(--ease-base); /* 強い ease-out だと2秒で止まって見えたので、標準の ease で6秒使い切る */
}

.is-script-enabled .c-photo-banner--zoom img {
  transform: scale(1.06);
}

.is-script-enabled .c-photo-banner--zoom.is-visible img {
  transform: scale(1);
}

.c-photo-banner--plan {
  height: 300px;
  border-radius: var(--radius-10);
  box-shadow: none;
}

.c-photo-banner--plan img {
  object-position: center;
}

.c-photo-banner--plan::after {
  background-image: var(--gradient-scrim-soft);
}

.c-photo-banner--plan .c-photo-banner__body {
  left: 30px;
  bottom: 19px;
  gap: 11px;
}

.c-photo-banner__rule {
  width: 38px;
  height: 3px;
  background: var(--color-white);
}

.c-photo-banner__label-row {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

.c-photo-banner__label {
  font-size: var(--font-size-heading-2);
  font-weight: 700;
  line-height: var(--line-height-heading);
  letter-spacing: 2.08px;
  color: var(--color-white);
}

/* kyodo_icon('floor-plan' | 'sparkle' | 'shield-simple', 'c-photo-banner__icon')。
   スプライトの <svg> は縦横比を持たないので、アイコンごとに Figma の実寸を指定し、--icon-scale で縮める */
.c-photo-banner__icon {
  --icon-scale: 1;
  flex-shrink: 0;
  width: calc(var(--icon-width) * var(--icon-scale));
  height: calc(var(--icon-height) * var(--icon-scale));
  color: var(--color-white);
}

.c-photo-banner__icon.icon-floor-plan    { --icon-width: 48.8px; --icon-height: 44.8px; }
.c-photo-banner__icon.icon-sparkle       { --icon-width: 48.8px; --icon-height: 48.8px; }
.c-photo-banner__icon.icon-shield-simple { --icon-width: 41.8px; --icon-height: 46.8px; }

/* ============================================================
 * .c-numbered-heading — 番号ピル＋英字＋和文タイトル＋アクセント罫
 * Figma: plan-head（1778:210）。リフォームのプラン見出し・外壁の STEP 見出しで共通
 * ============================================================ */
.c-numbered-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.c-numbered-heading__top {
  display: flex;
  align-items: center;
  gap: var(--space-18);
}

.c-numbered-heading__number {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 26px; /* 正円ではなく 56×26 のピル（Figma） */
  padding-bottom: 4px; /* Noto Sans JP の字面は約0.07em下寄り（22pxで2px）→ 下に余白を足して持ち上げる。理由は css-architecture.md 4章 */
  border-radius: var(--radius-full);
  background: var(--color-brand);
  font-size: var(--font-size-title);
  font-weight: 700;
  line-height: 1;
  color: var(--color-white);
}

.c-numbered-heading__titles {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.c-numbered-heading__eyebrow {
  font-size: var(--font-size-label);
  font-weight: 700;
  line-height: var(--line-height-label);
  letter-spacing: 1.2px;
  color: var(--color-brand);
}

.c-numbered-heading__title {
  font-size: var(--font-size-heading-2);
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--color-ink);
}

.c-numbered-heading__rule {
  position: relative;
  height: 3px;
}

.c-numbered-heading__rule::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 1px;
  height: 2px;
  background: var(--color-border-table);
}

.c-numbered-heading__rule::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  height: 3px;
  background: var(--color-brand);
}

/* --filled：青の帯に白文字（番号は白地に青）。罫は使わない。
   リフォームのプラン見出し（2026-09-18 先方「タイトルなのでベース色を入れて目立たす」）。外壁の STEP 見出しは従来どおり */
.c-numbered-heading--filled .c-numbered-heading__top {
  padding: var(--space-18) var(--space-24);
  border-radius: var(--radius-8);
  background: var(--color-brand);
}

.c-numbered-heading--filled .c-numbered-heading__number {
  background: var(--color-white);
  color: var(--color-brand);
}

.c-numbered-heading--filled .c-numbered-heading__eyebrow { color: var(--color-text-on-photo); }
.c-numbered-heading--filled .c-numbered-heading__title   { color: var(--color-white); }
.c-numbered-heading--filled .c-numbered-heading__rule    { display: none; }

@media (max-width: 767px) {
  .c-numbered-heading--filled .c-numbered-heading__top {
    gap: var(--space-14);
    padding: var(--space-14) var(--space-16);
  }
}

/* ============================================================
 * .c-pill / .c-chip — 小ラベル
 * Figma: リフォーム事例行 case-01（1795:209）の pill「CASE 01」／chip「施工後の室内・Before・After」
 * ============================================================ */
.c-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--space-10) 5px; /* 上下4pxを3/5にして字面を1px持ち上げる（Noto Sans JP 対策） */
  border-radius: var(--radius-3);
  background: var(--color-brand);
  font-size: var(--font-size-label);
  font-weight: 700;
  line-height: var(--line-height-label);
  letter-spacing: .56px;
  color: var(--color-white);
}

.c-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-10) 4px; /* 上下3pxを2/4にして字面を1px持ち上げる（Noto Sans JP 対策） */
  border-radius: var(--radius-3);
  background: var(--color-brand);
  font-size: var(--font-size-label);
  font-weight: 700;
  line-height: var(--line-height-label);
  color: var(--color-white);
}

.c-chip--neutral {
  background: var(--color-chip-neutral);
}

/* 薄い水色地に青文字（外壁 caption-chip） */
.c-chip--light {
  padding: var(--space-4) var(--space-10);
  background: var(--color-brand-tint);
  color: var(--color-brand);
}

/* ============================================================
 * .c-button — ボタン
 * Figma: Section/FinalCta 内の Button（155:74）。高さ50＝上下16＋文字18
 * ホバー：青地×白文字 → 白地×青文字に反転し、矢印（kyodo_icon('chevron-right', 'c-button__arrow')）が右へ4px
 * ============================================================ */
.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  max-width: 100%; /* 長い文言は幅からはみ出さず折り返す */
  padding: var(--space-16) var(--space-32);
  border-radius: var(--radius-4);
  background: var(--color-brand);
  box-shadow: inset 0 0 0 2px var(--color-brand); /* 白地に反転しても輪郭が残るように */
  font-size: var(--font-size-label);
  font-weight: 700;
  line-height: var(--line-height-label);
  text-align: center;
  color: var(--color-white);
  transition: background-color var(--duration-base) var(--ease-base), color var(--duration-base) var(--ease-base);
}

.c-button__arrow {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  transition: transform var(--duration-base) var(--ease-base);
}

@media (hover: hover) {
  .c-button:hover {
    background: var(--color-white);
    color: var(--color-brand);
  }

  .c-button:hover .c-button__arrow {
    transform: translateX(4px);
  }
}

.c-button:focus-visible {
  outline: 3px solid rgba(var(--color-shadow-card-rgb), .35);
  outline-offset: 2px;
}

/* ============================================================
 * .c-call-to-action — ページ末尾の問い合わせ導線
 * Figma: Section/FinalCta（205:392）／SP: Section/FinalCta/Mobile（302:17）
 * ============================================================ */
/* 上下の余白を広げる（2026-09-17 ユーザー「上下の間隔が狭くてしょぼい」）。
   下は背景の街並みにボタンが重ならないよう、上より多めに取る */
.c-call-to-action {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-96) 160px;
  text-align: center;
}

/* 街並みの足元が常に下端に来るよう、下基準で敷く（上の空はCTAの高さに応じて切れる） */
.c-call-to-action__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center bottom;
}

.c-call-to-action__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-28);
  max-width: var(--width-container);
  margin-inline: auto;
  padding-inline: var(--padding-inline);
}

.c-call-to-action__accent {
  display: flex;
}

.c-call-to-action__accent span {
  display: block;
  height: 3px;
}

.c-call-to-action__accent span:nth-child(1) { width: 28px; background: var(--color-brand); }
.c-call-to-action__accent span:nth-child(2) { width: 12px; background: var(--color-brand-light); }
.c-call-to-action__accent span:nth-child(3) { width: 12px; background: var(--color-accent-gold); }

.c-call-to-action__eyebrow {
  font-size: var(--font-size-title);
  font-weight: 700;
  line-height: var(--line-height-label); /* Figma の枠の高さ24px */
  color: var(--color-brand);
}

.c-call-to-action__heading {
  margin-bottom: var(--space-12); /* ボタンの前だけ少し広く（見出し→行動の区切り） */
  font-size: var(--font-size-display); /* 余白を広げたぶん、見出しを一段大きく（2026-09-17） */
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--color-ink);
}

/* 問い合わせの手段を2つ並べる：フォームへのボタン｜電話（2026-09-17 ユーザー「余白を広げたら中身がしょぼい」）。
   電話番号と受付時間はヘッダーと同じ情報 */
.c-call-to-action__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-20) var(--space-40);
}

/* このCTAのボタンだけ大きく（押す場所だとはっきり分かるように） */
.c-call-to-action__button {
  min-height: 72px;
  padding-inline: var(--space-40);
  font-size: var(--font-size-title-small);
}

.c-call-to-action__tel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: var(--space-40);
  border-left: 1px solid var(--color-brand-soft);
  text-align: left;
}

.c-call-to-action__tel-label {
  font-size: var(--font-size-label);
  font-weight: 700;
  line-height: var(--line-height-label);
  color: var(--color-ink);
}

.c-call-to-action__tel-number {
  margin-top: var(--space-4);
  font-size: var(--font-size-heading-1);
  font-weight: 700;
  line-height: var(--line-height-label);
  letter-spacing: .02em;
  color: var(--color-brand);
  text-decoration: none;
}

.c-call-to-action__tel-hours {
  margin-top: var(--space-6);
  font-size: var(--font-size-label-small);
  line-height: var(--line-height-label);
  color: var(--color-text-mute);
}

/* 電話番号のリンクはスマホ（電話がかけられる端末）でだけ効かせる（2026-09-17 ユーザー指示）。
   マウス操作の端末（PC）ではタップ発信できないので、クリックしても何も起きない普通の文字として扱う */
@media (hover: hover) and (pointer: fine) {
  .c-call-to-action__tel-number {
    pointer-events: none;
    cursor: text;
  }
}

/* ボタンと電話が横に収まらない幅（979px以下）では、電話をボタンの下に中央揃えで置く
   （折り返したまま左の区切り線が残ると不自然なため） */
@media (max-width: 979px) {
  .c-call-to-action__actions { flex-direction: column; }

  .c-call-to-action__tel {
    align-items: center;
    padding-left: 0;
    border-left: 0;
    text-align: center;
  }
}

/* ============================================================
 * .c-feature-card — アイコン＋見出し＋説明の特長カード（枠線付き）
 * .c-feature-card-container — 並べる親（3列）
 * Figma: Card/Feature（1401:189）。外壁「外壁改修工事とは」の3特長
 * ============================================================ */
.c-feature-card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-20);
}

.c-feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-20) var(--space-16);
  border: 2px solid var(--color-brand-soft);
  border-radius: var(--radius-8);
}

.c-feature-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.c-feature-card__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  color: var(--color-brand);
}

.c-feature-card__title {
  font-size: var(--font-size-title-small);
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--color-brand);
}

.c-feature-card__text {
  max-width: 220px; /* Figma の改行位置を再現 */
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body);
  text-align: center;
  color: var(--color-ink-soft);
}

/* ============================================================
 * .c-photo-card — 写真＋見出し＋説明のカード（右下に青いずらし影）
 * .c-photo-card-container — 並べる親（4列）
 * Figma: Card/Symptom（外壁「こんな症状、見過ごしていませんか？」）
 * ============================================================ */
.c-photo-card-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 21px;
  padding-right: 8px; /* 右端のカードの影の分 */
}

.c-photo-card {
  --photo-card-shadow: 8px 8px 0 rgba(var(--color-brand-rgb), .3);
  display: flex;
  flex-direction: column;
  gap: var(--space-28);
}

.c-photo-card__photo {
  width: 100%;
  aspect-ratio: 217 / 138;
  border-radius: 5px;
  object-fit: cover;
  box-shadow: var(--photo-card-shadow);
}

.c-photo-card__body {
  flex: 1; /* 並んだカードの箱の高さを揃える */
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-height: 127px;
  padding: var(--space-8);
  border-radius: 5px;
  background: var(--color-white);
  box-shadow: var(--photo-card-shadow);
}

.c-photo-card__title {
  font-size: var(--font-size-title-small);
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--color-ink-soft);
}

.c-photo-card__text {
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body);
  color: var(--color-ink-soft);
}

/* ============================================================
 * 本文の型 — .c-lead（太字リード）／.c-text（本文）／.c-note（注記）
 * Figma: 写真バナー直後のリード（1753:251）・支え文（1493:55）・注記（1833:231）
 * ============================================================ */
/* 9.30 修正依頼「文字を大きくするかラインを引くかして目立たす」→ 両方：本文18 → 22（SP20）、文字の幅だけ青い下線。
   省エネの「気がかりな地震対策も、…」（.p-energy-earthquake-heading）も同じ見た目 */
.c-lead {
  width: fit-content;
  max-width: 100%;
  padding-bottom: var(--space-10);
  border-bottom: 2px solid var(--color-brand);
  font-size: var(--font-size-heading-3);
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--color-ink);
}

.c-text {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-ink-soft);
}

.c-note {
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body);
  color: var(--color-text-mute);
}

/* 文中・文末のテキストリンク（青の下線）。外部サイトは末尾に external-link のアイコン（.c-text-link__icon） */
.c-text-link {
  font-weight: 700;
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (hover: hover) {
  .c-text-link:hover { text-decoration: none; }
}

.c-text-link:focus-visible {
  outline: 3px solid rgba(var(--color-shadow-card-rgb), .35);
  outline-offset: 2px;
}

.c-text-link__icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 4px;
  vertical-align: -0.125em;
}

/* ============================================================
 * .c-bullet-list — 青い丸の箇条書き
 * 文字サイズは置いた場所から引き継ぐ（丸は1行目の高さの中央）
 * ============================================================ */
.c-bullet-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.c-bullet-list > li {
  position: relative;
  padding-left: calc(6px + var(--space-8));
  line-height: var(--line-height-body);
}

.c-bullet-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc((1.8em - 6px) / 2);
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-brand);
}

/* ============================================================
 * .c-check-list — 青丸に✓の項目を横に並べる
 * Figma: 外壁「改修のメリット」benefit-item（I1433:934;2022:774）
 * ============================================================ */
.c-check-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-12) var(--space-28);
}

.c-check-list > li {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--font-size-title);
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--color-ink);
}

.c-check-list__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 5px;
  border-radius: var(--radius-full);
  background: var(--color-brand);
  color: var(--color-white);
}

/* ============================================================
 * .c-rule-heading — 両側に細い罫を引いた小見出し
 * Figma: Heading/RuleDivider（1401:339）
 * ============================================================ */
.c-rule-heading {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-12);
  font-size: var(--font-size-title);
  font-weight: 700;
  line-height: var(--line-height-heading);
  letter-spacing: .04em;
  color: var(--color-ink);
}

.c-rule-heading::before,
.c-rule-heading::after {
  content: "";
  flex-shrink: 0;
  width: 40px;
  height: 2px;
  background: var(--color-border);
}

/* ============================================================
 * .c-note-box — 薄い水色の箱にラベル＋本文
 * Figma: 外壁 repair-bar（I1433:694;1793:786）
 * ============================================================ */
.c-note-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-16) var(--space-18);
  border-radius: var(--radius-8);
  background: var(--color-surface-note);
}

.c-note-box__label {
  font-size: var(--font-size-label);
  font-weight: 700;
  line-height: var(--line-height-label);
  color: var(--color-brand);
}

.c-note-box__text {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-ink-soft);
}

/* ============================================================
 * .c-step-list — 大きな番号＋見出し＋本文の縦並び（行の上下に罫）
 * Figma: 外壁「建物調査の流れ」Card/SurveyStep（I1433:526;1433:518）
 * ============================================================ */
.c-step-list {
  border-bottom: 2px solid var(--color-border-rule);
}

.c-step-list > li {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  padding-block: var(--space-28);
  border-top: 2px solid var(--color-border-rule);
}

.c-step-list__number {
  flex-shrink: 0;
  font-size: var(--font-size-display);
  font-weight: 700;
  line-height: var(--line-height-label);
  color: var(--color-brand);
}

.c-step-list__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.c-step-list__title {
  font-size: var(--font-size-title-small);
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--color-ink);
}

.c-step-list__text {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-ink-soft);
}

/* ============================================================
 * .c-photo-tile — 写真（枠線・角丸）＋太字キャプション
 * .c-photo-tile-container — 並べる親（3列）
 * Figma: 省エネ「採用実績」PhotoTile（1679:284）
 * ============================================================ */
.c-photo-tile-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
}

/* js/auto-slider.js がループ用に作る複製（先頭・末尾）は、スライドになる幅（767px以下の --slider）でだけ見せる。PCのグリッドでは出さない */
.c-photo-tile-container > [data-auto-slider-clone] {
  display: none;
}

.c-photo-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.c-photo-tile__photo {
  width: 100%;
  aspect-ratio: 297 / 200;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-8);
  object-fit: cover;
}

.c-photo-tile__caption {
  font-size: var(--font-size-label);
  font-weight: 700;
  line-height: var(--line-height-label);
  color: var(--color-ink-soft);
}

/* ============================================================
 * SP（767px以下）
 * ============================================================ */
@media (max-width: 767px) {
  /* 写真を上に、見出しを白い板に載せて写真の下端へ食い込ませる。板の右上の弧がPCの弧を引き継ぐ */
  .c-hero {
    display: flex;
    flex-direction: column;
    height: auto;
  }

  .c-hero__photo {
    order: -1;
    position: relative;
    inset: auto;
    width: 100%;
    height: 220px;
    border-bottom-left-radius: 0;
  }

  .c-hero__photo img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-position: 50% 0;
  }

  .c-hero__inner {
    width: 336px;
    max-width: calc(100% - 32px);
    height: auto;
    margin: -48px 0 0;
    padding: 22px var(--space-24) var(--space-24);
    align-items: flex-start;
    background: var(--color-white);
    border-top-right-radius: 48px;
  }

  /* 写真なし：面は出さず、見出しの板を普通の位置に置く */
  .c-hero__photo--blank { display: none; }

  .c-hero--no-photo .c-hero__inner {
    width: auto;
    max-width: none;
    margin: 0;
    padding: var(--space-24) var(--padding-inline);
  }

  .c-hero__heading-row { gap: var(--space-10); }
  .c-hero__icon span { width: 18px; }

  .c-section-heading { gap: var(--space-12); }

  .c-subsection-heading {
    gap: var(--space-10);
  }

  /* 高さは 375px で240 → 767px で440（PCの高さ）へ滑らかに。
     固定240にすると767pxの瞬間だけ 735×240 の細長い帯になるため */
  .c-photo-banner {
    height: clamp(240px, 51.02vw + 48.67px, 440px);
    border-radius: var(--radius-10);
  }

  .c-photo-banner__body {
    left: var(--space-20);
    right: var(--space-20);
    bottom: var(--space-20);
    gap: var(--space-8);
  }

  .c-photo-banner__statement {
    max-width: none;
    font-size: var(--font-size-title); /* SP では1行16字が入るよう1段下げる */
    letter-spacing: 0;
  }

  /* 375px で180 → 767px で300（PCの高さ） */
  .c-photo-banner--plan { height: clamp(180px, 30.61vw + 65.2px, 300px); }

  .c-photo-banner--plan .c-photo-banner__body {
    left: var(--space-20);
    bottom: var(--space-16);
    gap: var(--space-8);
  }

  .c-photo-banner__rule { width: 28px; }
  .c-photo-banner__label-row { gap: var(--space-16); }

  .c-photo-banner__label {
    letter-spacing: 1.4px;
  }

  .c-photo-banner__icon { --icon-scale: .7; }

  .c-numbered-heading { gap: var(--space-12); }
  .c-numbered-heading__top { gap: var(--space-12); }

  /* PCと同じピル型の比率（56×26）のまま縮める */
  .c-numbered-heading__number {
    width: 46px;
    height: 22px;
  }

  .c-numbered-heading__rule::after { width: 44px; }

  /* Figma SP（302:17）どおり。左右余白だけ Figma の24ではなくサイト共通の16
     （24だと375px幅で見出し1行目の340pxが収まらず3行になるため） */
  .c-call-to-action { padding-block: var(--space-56) 150px; } /* 電話の下に街並みが見えるだけの余白 */
  .c-call-to-action__inner { gap: var(--space-16); }
  .c-call-to-action__heading {
    font-size: var(--font-size-heading-3);
  }

  /* ボタンは幅いっぱい、電話との区切り線を上に */
  .c-call-to-action__actions { align-items: stretch; }

  /* SP は文言が2行になるので文字は通常のボタンと同じ大きさ（大きいと「の」だけ1行に落ちる） */
  .c-call-to-action__button {
    min-height: 64px;
    padding-inline: var(--space-20);
    font-size: var(--font-size-label);
  }

  .c-call-to-action__tel {
    padding-top: var(--space-20);
    border-top: 1px solid var(--color-brand-soft);
  }

  /* 3列 → 1列。カードは横長になるので説明文の幅制限を外す */
  .c-feature-card-container {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .c-feature-card__text { max-width: none; }

  /* 4列 → 2列。見出しは折り返しにくいよう1段小さく、本文16pxは可読性の下限として維持 */
  .c-photo-card-container {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-24) var(--space-16);
  }

  .c-photo-card { gap: var(--space-16); }
  .c-photo-card__body { min-height: 0; }

  .c-check-list { gap: var(--space-12) var(--space-20); }

  .c-note-box { padding: var(--space-14) var(--space-16); }

  .c-step-list > li {
    gap: var(--space-16);
    padding-block: var(--space-20);
  }


  /* 3列 → 1列 */
  .c-photo-tile-container {
    grid-template-columns: 1fr;
    gap: var(--space-20);
  }

  /* --slider：SPでは1列に積まず、横にスクロールするスライドにする（2026-09-16 ユーザー決定。ボタン無し・スワイプ／タップで触れる・自動送り＆ループは js/auto-slider.js）
   * 本文の左右余白を打ち消して画面端まで使い、今の写真を中央に、前後の写真を両脇に少し見せる（スナップは中央） */
  .c-photo-tile-container--slider {
    display: flex;
    gap: var(--space-12);
    margin-inline: calc(-1 * var(--padding-inline));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .c-photo-tile-container--slider::-webkit-scrollbar {
    display: none;
  }

  /* JS がゆっくり動かしている間はスナップを止める（動きの途中でスナップが引っ張って震えないように） */
  .c-photo-tile-container--slider.is-sliding {
    scroll-snap-type: none;
  }

  .c-photo-tile-container--slider > .c-photo-tile {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }

  .c-photo-tile-container--slider > [data-auto-slider-clone] {
    display: flex; /* .c-photo-tile と同じ */
  }
}

/* ============================================================
 * .c-modal — モーダル（<dialog>）。画像を大きく見せる用
 * 2026-09-16 ユーザー決定：リフォーム事例の間取り図を押すと、各室の写真つきの詳細画像をモーダルで見せる（旧 colorbox の置き換え）
 * JS：assets/site/js/modal.js（開閉・背面スクロール止め）。開閉はブラウザ標準の <dialog>（Esc・フォーカス閉じ込め込み）
 * HTML：
 *   <dialog class="c-modal" id="modal-…" data-modal="dialog" aria-labelledby="modal-…-title">
 *     <div class="c-modal__inner">
 *       <button type="button" class="c-modal__close" data-modal="close" aria-label="閉じる"><span class="c-modal__close-icon" aria-hidden="true"></span></button>
 *       <p class="c-modal__title" id="modal-…-title"><span class="c-chip">After</span><span class="c-modal__title-text">CASE 01　Cマンション</span></p>
 *       <img class="c-modal__image" …>
 * ============================================================ */
.c-modal {
  width: min(960px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  margin: auto; /* 画面の中央（foundation.css のリセットで margin が 0 になるので明示） */
  padding: 0;
  border: 0;
  border-radius: var(--radius-12);
  background: var(--color-white);
  box-shadow: 0 24px 64px rgba(var(--color-shadow-card-rgb), .25);
  overflow: visible; /* 閉じるボタンを角の外に出す */
}

.c-modal::backdrop {
  background: rgba(32, 38, 42, .6);
}

/* 開くときの動き（少し小さい状態から浮かび上がる） */
.c-modal[open] {
  animation: c-modal-in var(--duration-base) var(--ease-base);
}

.c-modal[open]::backdrop {
  animation: c-modal-backdrop-in var(--duration-base) var(--ease-base);
}

@keyframes c-modal-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes c-modal-backdrop-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.c-modal__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
  max-height: calc(100vh - 32px);
  padding: var(--space-20) var(--space-24) var(--space-24);
  overflow: auto; /* 縦に収まらないときは中でスクロール */
}

.c-modal__title {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding-right: 32px; /* 閉じるボタンと重ねない */
  font-size: var(--font-size-title-small);
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--color-ink);
}

.c-modal__image {
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-6);
}

/* 閉じる：右上の角に半分はみ出す青い丸。中の×は2本の線 */
.c-modal__close {
  position: absolute;
  top: -16px;
  right: -16px;
  z-index: 1;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 3px solid var(--color-white);
  border-radius: var(--radius-full);
  background: var(--color-brand);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-base);
}

.c-modal__close-icon {
  position: absolute;
  inset: 0;
}

.c-modal__close-icon::before,
.c-modal__close-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background: var(--color-white);
  transform: translate(-50%, -50%) rotate(45deg);
}

.c-modal__close-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media (hover: hover) {
  .c-modal__close:hover {
    background: var(--color-ink);
  }
}

.c-modal__close:focus-visible {
  outline: 3px solid rgba(var(--color-shadow-card-rgb), .35);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .c-modal {
    width: calc(100% - 24px);
  }

  .c-modal__inner {
    gap: var(--space-12);
    padding: var(--space-16) var(--space-16) var(--space-16);
  }

  .c-modal__close {
    top: -12px;
    right: -8px;
    width: 40px;
    height: 40px;
  }
}