/*
  KYOTO COCO CITY 物件特集ページ専用CSS
  接頭辞: kc- （積水ハウス既存の pb / b- とは競合しない案件固有クラス）
  適用ルート: .kc-page
  余白・配色・タイポグラフィは Figma「PC_説明」「SP_説明」フレーム、および
  lp-rules-summary-v3.md の余白スケール（PC:15/30/45/60/75px、SP:5/15/25/40px、
  line-height 本文2・リンク1.6）に準拠。
  区画情報・物件概要・来場予約・資料請求などの実リンク先URL、3D VR TOURのリンク先は
  未確定のため仮の値（要確認コメント付き）を設定している。
*/

/* ---------- Design tokens ---------- */
.kc-page {
  --kc-green1: #e4eff0; /* セクション背景（薄緑） */
  --kc-green2: #106d78; /* 見出し・来場予約ボタン（ティール） */
  --kc-blue: #4b7ea9; /* 資料請求ボタン */
  --kc-dark: #242424; /* 基本テキスト・黒ボタン */
  --kc-table-bg: #ebedef; /* ロケーション背景 */
  --kc-white: #ffffff;
  --kc-gold: #dcbe5d; /* お問い合わせREAD MORE：ご契約までの流れ（STEP01-05）のアクセント色 */
  --kc-step-blue: #5381b2; /* お問い合わせREAD MORE：家が建つまでの流れ（STEP06-10）のアクセント色。資料請求ボタンの--kc-blueとは別トーン */
  --kc-gap-base-pc: 75px; /* PC基本セクション余白 */
  --kc-gap-wide-pc: 150px; /* PC例外セクション余白（ゼロカーボンシティ/社名帯） */
  --kc-gap-base-sp: 60px; /* SP基本セクション余白 */
  --kc-gap-narrow-sp: 45px; /* SP例外セクション余白（トップ/コンセプト） */

  /* フォント（積水ハウス デザインガイドライン準拠。共通CSS(bunjou.css)実装済みの
     フォールバックチェーンをそのまま採用。Google Fonts等の外部CDN読込は行わない） */
  --kc-font-gothic: "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "meiryo", "Helvetica Neue", "arial", sans-serif;
  --kc-font-mincho: "Times New Roman", "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho", serif; /* 見出し・ボタン（Zen Antique→Times、PC/SP共通） */
}
@media screen and (max-width: 767px) {
  .kc-page { --kc-font-gothic: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "meiryo", "Helvetica Neue", "arial", sans-serif; }
}

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

.kc-section {
  padding: var(--kc-gap-base-pc) 20px;
}

/* ---------- スクロール表示演出 ----------
   JSが正常に初期化できた場合だけ有効化する。セクション背景は動かさず、
   直下の内容だけを参考サイト相当（100px／0.7秒）でフェードアップする。 */
.kc-page.kc-reveal-ready .kc-section.kc-reveal > * {
  opacity: 0;
  transform: translate3d(0, 100px, 0);
  will-change: opacity, transform;
}
.kc-page.kc-reveal-ready.kc-reveal-animate .kc-section.kc-reveal > * {
  transition:
    opacity 0.7s cubic-bezier(0.39, 0.575, 0.565, 1),
    transform 0.7s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.kc-page.kc-reveal-ready .kc-section.kc-reveal.is-visible > * {
  opacity: 1;
  transform: none;
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  .kc-page.kc-reveal-ready .kc-section.kc-reveal > * {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

.kc-section--wide {
  padding: var(--kc-gap-wide-pc) 20px;
}
.kc-section--green1 { background: var(--kc-green1); }
.kc-section--white { background: var(--kc-white); }
/* お問い合わせ：Figma実データ確認（塗り＝パターン100%）。細かいドット柄を再現 */
.kc-section--dotted {
  background-color: var(--kc-white);
  background-image: radial-gradient(circle, #d9d9d9 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  background-repeat: repeat; /* 共通base.cssの `*{background-repeat:no-repeat}` リセットで無効化されていたため明示的に上書き */
}
.kc-section--table { background: var(--kc-table-bg); }
.kc-section--dark { background: var(--kc-dark); color: var(--kc-white); }
/* コンセプトセクション：Figma指定の放射状グラデーション（中心:白 → 外周:green1） */
.kc-section--concept-bg {
  background: radial-gradient(ellipse closest-side at center, #ffffff 0%, var(--kc-green1) 100%); /* 上下左右の端でgreen1に到達（隣接セクションと継ぎ目なし） */
}
/* ゼロカーボンシティ：航空写真＋green1→白のグラデーションオーバーレイ */
.kc-section--zerocarbon-bg {
  position: relative;
  background: linear-gradient(var(--kc-green1) 0%, rgba(241, 247, 247, 0.85) 24%, rgba(255, 255, 255, 0.9) 100%),
    url("../img/zerocarbon-bg.jpg") center / cover no-repeat;
}
/* モデルハウス：Figma支給の薄いテクスチャ背景 */
.kc-section--modelhouse-bg {
  background: url("../img/modelhouse-bg-texture.jpg") center / cover no-repeat, var(--kc-white);
}

.kc-inner {
  max-width: 1240px;
  margin: 0 auto;
}
.kc-inner--narrow {
  max-width: 850px;
  margin: 0 auto;
}

/* ---------- 見出し（英語＋日本語） ---------- */
/* Figma共通見出し：英字・日本語とも行高20px、間隔PC20px/SP15px（この箱構造にするとFigmaの見た目の間隔と一致する）。
   見出し下の余白は各セクション側（末尾の「縦リズム」ブロック）で指定 */
.kc-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 0 auto;
  text-align: center;
}
.kc-heading_en {
  font-family: var(--kc-font-mincho);
  font-size: 38px;
  line-height: 20px;
  letter-spacing: 1px;
  color: var(--kc-green2);
  margin: 0;
}
.kc-heading_ja {
  font-family: var(--kc-font-gothic);
  font-size: 15px;
  line-height: 20px;
  color: var(--kc-dark);
  margin: 0;
}
.kc-section--dark .kc-heading_ja { color: var(--kc-white); }

/* コンセプトの「KYOTO COCO CITY」カラーワードマーク */
.kc-concept-wordmark {
  width: 600px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 30px;
}

/* ---------- 本文 ---------- */
.kc-lead {
  font-family: var(--kc-font-gothic);
  font-size: 15px;
  line-height: 30px;
  letter-spacing: 0.8px;
  text-align: center;
  color: var(--kc-dark);
  margin: 0 auto 30px;
}
.kc-gx-lead { margin-top: 30px; }
.kc-note {
  margin: 0; /* <p>要素はUAデフォルトで margin-block:1em を持つ。共通リセット(base.css)頼みだと環境によって効かず画像/タイトルとの間に上下1em分の余白が入るため、ここで明示的に0にする */
  font-family: var(--kc-font-gothic);
  font-size: 12px;
  line-height: 24px; /* Figma実データ：幅288pxのテキストボックス高さ24px */
  letter-spacing: 0.5px;
  color: var(--kc-dark);
  text-wrap: pretty; /* 「概測です。」のような1〜2文字だけの孤立行を避ける（非対応ブラウザでは従来通りの折り返し） */
}

/* ---------- 共通ボタン基底（中央配置をここ1箇所で担保） ---------- */
/* display:inline-flex に margin:auto は効かないため、中央寄せが必要なボタンは
   常にこの .kc-btn-row（display:flex; justify-content:center）でラップして揃える。 */
.kc-btn-row {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* ---------- READ MORE ボタン（PC:335×70 / SP:200×40、右端は＋アイコン） ---------- */
.kc-btn-readmore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  width: 335px;
  height: 70px;
  background: var(--kc-dark);
  color: var(--kc-white);
  font-family: var(--kc-font-mincho);
  font-size: 18px;
  letter-spacing: 3px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  flex: none;
}
.kc-btn-readmore:hover { background: #4c4c4c; }

/* ＋アイコン（開閉で−へ、縦棒だけフェードアウト。Figma実データ：展開時アイコンは横棒のみのUnion＝×回転ではなく＋/−） */
.kc-btn-readmore_icon {
  position: relative;
  width: 15px;
  height: 15px;
  flex: none;
}
.kc-btn-readmore_icon::before,
.kc-btn-readmore_icon::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.kc-btn-readmore_icon::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
.kc-btn-readmore_icon::after {
  left: 50%; top: 0; height: 100%; width: 1.5px; transform: translateX(-50%);
  transition: opacity 0.2s ease;
}
.kc-btn-readmore[aria-expanded="true"] .kc-btn-readmore_icon::after { opacity: 0; }

/* 外部リンク型ボタン（区画情報CTA・3D VR TOURなど、開閉しないリンク） */
.kc-btn-external {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  width: 335px;
  height: 70px;
  background: var(--kc-dark);
  color: var(--kc-white);
  font-family: var(--kc-font-gothic);
  font-size: 18px;
  letter-spacing: 1px;
  text-decoration: none;
  flex: none;
}
.kc-btn-external:hover { background: #4c4c4c; }
.kc-btn-external img { width: 15px; height: 15px; }

/* ---------- ジャンプボタン（4色、＞アイコン） ---------- */
.kc-jumpnav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 60px;
}
.kc-jumpnav_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  width: 265px;
  height: 70px;
  color: var(--kc-white);
  font-family: var(--kc-font-gothic);
  font-size: 22px;
  letter-spacing: 1px;
  text-decoration: none;
}
.kc-jumpnav_btn img { width: 15px; height: 15px; }
.kc-jumpnav_btn--kukaku,
.kc-jumpnav_btn--gaiyo { background: var(--kc-dark); }
.kc-jumpnav_btn--yoyaku { background: var(--kc-green2); }
.kc-jumpnav_btn--shiryo { background: var(--kc-blue); }

/* ---------- キャッチコピー（PC:1行／SP:2行を同一DOMで。Figma実座標） ---------- */
.kc-catch { text-align: center; }
.kc-catch_group {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-areas: "l1 x l2" "sub sub sub";
  justify-content: center;
  width: fit-content;
  margin: 0 auto;
  text-align: left;
}
.kc-catch_l1,
.kc-catch_l2,
.kc-catch_tagline {
  font-family: var(--kc-font-mincho);
  font-weight: 600;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  margin: 0;
}
.kc-catch_l1 { grid-area: l1; background-image: linear-gradient(108deg, #0070b2 6%, #00ab72 94%); }
.kc-catch_l2 { grid-area: l2; background-image: linear-gradient(100deg, #0070b2 6%, #00ab72 94%); }
.kc-catch_l1,
.kc-catch_l2 {
  font-size: 32px;
  line-height: 48px;
  white-space: nowrap;
  align-self: center;
}
.kc-catch_num { font-size: 48px; font-weight: 400; }
.kc-catch_mark { font-size: 20.64px; vertical-align: super; line-height: 0; }
.kc-catch_x {
  grid-area: x;
  width: 48px;
  height: 48px;
  margin: 0 21px 0 27px;
  display: block;
}
.kc-catch_sub {
  grid-area: sub;
  transform: translateY(-12px);
}
.kc-catch_tagline {
  font-size: 32px;
  line-height: 34px;
  background-image: linear-gradient(103deg, #0070b2 6%, #00ab72 94%);
  margin: 15px 0 0;
}
.kc-sp-br { display: none; }

/* ---------- コンセプト本文（Figma実座標） ---------- */
.kc-concept_title {
  font-family: var(--kc-font-gothic);
  font-weight: bold;
  font-size: 22px;
  line-height: 20px;
  letter-spacing: 1px;
  text-align: center;
  color: var(--kc-dark);
  margin: 0 0 30px;
}
.kc-concept_note {
  max-width: 505px;
  margin: 0 auto 75px;
  text-align: center;
}
.kc-concept_value {
  font-family: var(--kc-font-mincho);
  font-weight: 600;
  font-size: 32px;
  line-height: 32px;
  text-align: center;
  background-image: linear-gradient(113deg, #0070b2 6%, #00ab72 94%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 33px;
}
.kc-concept_visual { width: 850px; max-width: 100%; height: auto; margin: 0 auto 45px; }
.kc-concept_visual-sp { max-width: 340px; margin: 0 auto 45px; }
.kc-concept_visual-sp img { display: block; width: 100%; }
.kc-concept_visual-sp img:first-child { width: 250px; margin: 0 auto; }
.kc-concept_visual-sp img:nth-child(2) { margin-top: 15px; }
/* SP用書き出し素材は、Figma上で各パーツが50px重なる一続きの図版として設計されている。 */
.kc-concept_visual-sp img:nth-child(n+3) { margin-top: -50px; }

/* ---------- 8枚カード（ランドプラン用） ---------- */
.kc-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 288px)); /* 共通body{min-width:1160px}（コンテンツ幅1120px）に収まるよう縮小可。広い画面では288pxのまま */
  gap: 30px;
  justify-content: center;
  margin-top: 60px;
}
.kc-feature-card_img {
  width: 100%;
  max-width: 288px;
  height: auto;
  aspect-ratio: 288 / 206;
  object-fit: cover;
  background: #83838c;
  display: block;
}
.kc-feature-card_title {
  font-family: var(--kc-font-gothic);
  font-weight: bold;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0.5px;
  color: var(--kc-dark);
  margin: 0; /* Figma：キャプション直下にタイトル（余白なし） */
}
.kc-feature-card_text {
  font-family: var(--kc-font-gothic);
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.5px;
  color: var(--kc-dark);
  margin: 0;
}

/* ---------- ロケーションカード（PC:4列×2段／SP:2列×4段, 170px） ---------- */
.kc-location-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 272px));
  gap: 30px;
  justify-content: center;
}
.kc-location-card {
  background: var(--kc-white);
  border-radius: 10px;
  padding-bottom: 30px;
  overflow: hidden;
}
.kc-location-card_img {
  width: 100%;
  max-width: 272px;
  height: auto;
  aspect-ratio: 272 / 181;
  object-fit: cover;
  display: block;
  background: #83838c;
}
.kc-location-card_date {
  font-size: 15px;
  color: var(--kc-dark);
  text-align: right;
  padding: 0 15px;
  margin: 0 0 5px;
}
.kc-location-card_body { padding: 0 15px; }
.kc-location-card_name {
  font-family: var(--kc-font-gothic);
  font-weight: bold; /* Figma 9/22更新：Medium→Bold */
  font-size: 18px;
  line-height: 24px; /* Figma実データ：カード内テキストは全てleading-24pxで統一。未指定だったため見出し→距離が詰まっていた */
  color: var(--kc-dark);
  margin: 0 0 5px;
}
.kc-location-card_dist {
  font-size: 15px;
  line-height: 24px;
  color: var(--kc-dark);
  margin: 0 0 5px;
}
.kc-location-card_desc {
  font-size: 15px;
  line-height: 24px;
  color: var(--kc-dark);
  margin: 0;
}

/* ---------- お問い合わせ STEP（PC:横並び／SP:縦積み or 横スライド） ---------- */
.kc-step-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 21px;
}
.kc-step-card {
  background: var(--kc-white);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  width: 265px;
  padding-bottom: 30px;
  min-height: 349px; /* Figma PC：カード高さ 349px */
  text-align: center;
  flex: none;
}
.kc-step-card_num {
  position: relative;
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--kc-white);
  background-color: var(--kc-dark);
  background-size: cover;
  background-position: center;
}
.kc-step-card_num--contact {
  background-size: 164% auto;
  background-position: 86% 97%;
}
.kc-step-card_num--visit {
  background-size: 134% auto;
  background-position: 46% 98%;
}
.kc-step-card_num::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.kc-step-card_num span {
  position: relative;
  font-family: var(--kc-font-mincho);
  display: block;
}
.kc-step-card_step { font-size: 20px; font-weight: 400; }
.kc-step-card_no { font-size: 48px; }
.kc-step-card_title {
  font-family: var(--kc-font-gothic);
  font-weight: bold;
  font-size: 15px;
  color: var(--kc-green2);
  margin: 15px 0 15px;
}
.kc-step-card_text {
  font-size: 14px;
  line-height: 24px;
  color: var(--kc-dark);
  text-align: left;
  padding: 0 18px;
  margin: 0;
}
.kc-step-arrow {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* ---------- お問い合わせ READ MORE：ご契約までの流れ／家が建つまでの流れ（STEP01-10） ---------- */
.kc-timeline-groups {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 75px;
  width: 100%;
}
.kc-timeline-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px; /* Figma実座標：見出しブロック→カード列。PC=60px */
  width: 100%;
}
.kc-timeline-group_heading {
  display: flex;
  flex-direction: column;
  align-items: center;
} /* タイトルと期間は同一ブロック内の連続行（Figma実座標：gap無し・隣接） */
.kc-timeline-group_title {
  font-family: var(--kc-font-gothic);
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 1px;
  text-align: center;
  color: var(--kc-dark);
  margin: 0;
}
.kc-timeline-group_period {
  font-family: var(--kc-font-gothic);
  font-weight: normal;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 1px;
  text-align: center;
  color: var(--kc-dark);
  margin: 0;
}
.kc-timeline-flow {
  display: flex;
  align-items: stretch; /* 固定heightは幅が狭くなるほど本文の折り返し行数が増え、下paddingが潰れる（1160px幅で実測6pxまで縮小）ため、
    「一番背の高いカードに揃える」挙動を固定pxでなくstretchに任せる。どの画面幅でも自動追従する */
  justify-content: center;
  gap: 10px;
  flex-wrap: nowrap; /* カード5枚を共通テンプレートの内幅へ収めるため、下の計算幅と組み合わせて1列を維持する */
}
.kc-timeline-flow .kc-timeline-card {
  /* カード5枚＋矢印4個＋gap8箇所を親幅に収め、矢印左右の余白を抑えた分だけ各カードへ均等配分する */
  width: calc((100% - 4 * 15px - 8 * 10px) / 5);
  height: auto; /* align-items:stretchに高さを委ねる（固定px指定はしない） */
}
.kc-timeline-arrow {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  align-self: center; /* 親のstretchはカードだけに効かせ、矢印は常に縦中央のまま */
}
.kc-timeline-card {
  --kc-timeline-accent: var(--kc-dark);
  background: var(--kc-white);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  width: 265px;
  min-height: 371px; /* Figma PC：カード高さ371px */
  padding: 45px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  flex: none;
}
.kc-timeline-card--gold { --kc-timeline-accent: var(--kc-gold); }
.kc-timeline-card--blue { --kc-timeline-accent: var(--kc-step-blue); }
.kc-timeline-card_step {
  margin: 0;
  font-family: var(--kc-font-mincho);
  color: var(--kc-timeline-accent);
  text-align: center;
}
.kc-timeline-card_step-label { display: block; font-size: 20px; line-height: 20px; font-weight: 400; }
.kc-timeline-card_step-no { display: block; font-size: 48px; line-height: 20px; margin-top: 15px; }
.kc-timeline-card_divider {
  width: 100%;
  height: 2px;
  background: #d8d8d8;
  flex: none;
}
.kc-timeline-card_title {
  font-family: var(--kc-font-gothic);
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 1px;
  text-align: center;
  color: var(--kc-timeline-accent);
  margin: 0;
}
.kc-timeline-card_text {
  font-family: var(--kc-font-gothic);
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.8px;
  color: var(--kc-dark);
  margin: 15px 0 0;
}

/* ---------- TOP(KV) ---------- */
/* 画像A（PC_TOP/SP_トップ：ロゴ＋モチーフ）→画像B（トップ：路線・駅名・現地光）を一定間隔でクロスフェード。免責文は画像Aの時点から常時表示 */
.kc-hero {
  background: var(--kc-green1);
}
.kc-hero_stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1340;
  overflow: hidden;
}
.kc-hero_layer {
  position: absolute;
  inset: 0;
  display: block;
}
.kc-hero_layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kc-hero_layer--b {
  opacity: 0;
  animation: kc-hero-fade 15s ease-in-out infinite;
}
.kc-hero_note {
  font-family: var(--kc-font-gothic);
  font-size: 12px;
  line-height: 24px;
  letter-spacing: 0.5px;
  text-align: right;
  color: var(--kc-dark);
  margin: 15px 0 0;
  padding: 0 1em 75px 0; /* 右余白はFigma文末の全角スペース分 */
}
@keyframes kc-hero-fade {
  0%, 30% { opacity: 0; }
  40%, 85% { opacity: 1; }
  95%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .kc-hero_layer--b { animation: none; opacity: 1; }
}

/* ---------- ランドプラン：装飾ぼかし円（背景）。Figma実データ確認：単色ではなく白地+ぼかしグロー2枚 ---------- */
.kc-landplan-wrap {
  position: relative;
  overflow: hidden;
}
.kc-landplan-wrap::before,
.kc-landplan-wrap::after {
  content: "";
  position: absolute;
  aspect-ratio: 1 / 1;
  background: url("../img/landplan-bg-glow.png") center / contain no-repeat;
  pointer-events: none;
  z-index: 0;
}
/* Figma実座標（セクション1920×2156に対する比率）。どちらもセクション内で収まる配置で、
   次セクションへはみ出さない設計だった。以前の bottom:-8%/left:-28% はこの実座標から
   外れており、グローがセクション下端を172px超え、overflow:hiddenでフェード完了前に
   クリップされ境目に見えていた（原因はグロー画像の輪郭ではなくこの配置ズレ）。 */
.kc-landplan-wrap::before { width: 81.8%; top: 0%; right: -31%; }
.kc-landplan-wrap::after { width: 68.7%; top: 35.3%; left: -34.4%; }
.kc-landplan-wrap > .kc-inner,
.kc-landplan-wrap > .kc-heading {
  position: relative;
  z-index: 1;
}

/* ---------- 準備中セクション ---------- */
.kc-pending {
  text-align: center;
  padding: 60px 20px;
  color: #666;
  font-size: 14px;
  border: 1px dashed #bbb;
}

/* ---------- PC/SP出し分け ---------- */
.kc-pc-only { display: block; }
.kc-sp-only { display: none; }
.kc-access-sp-images {
  display: none;
  flex-direction: column;
  gap: 30px;
}
.kc-access-sp-images img:nth-child(2) { margin-top: 15px; } /* Figma実座標：全景→詳細1枚目だけ45px（gap30px+15px）、以降は30pxのまま */
.kc-map-sp-images {
  display: none;
  flex-direction: column;
  gap: 30px;
}

/* ---------- 画像+本文の横並び行（ゼロカーボンシティ本文／コンセプトREAD MORE用） ---------- */
.kc-split-row {
  display: flex;
  gap: 60px;
  align-items: flex-start;
  width: 100%;
}
.kc-split-row--reverse { flex-direction: row-reverse; }
.kc-split-row_media {
  flex: none;
  width: 400px;
}
.kc-split-row_media img {
  width: 400px;
  height: 300px;
  object-fit: cover;
  display: block;
  background: #83838c;
}
#kc-concept-expand .kc-split-row_media img {
  background: none; /* Figma実データ：4カットは背景透過PNGイラスト。ページのグラデ背景に馴染ませる（写真系split-rowの背景色は維持） */
}
/* マイカー利用（IC案内図）：Figma実データではPC 520×315固定、画像はIC案内図（車写真ではない） */
.kc-split-row--access-car .kc-split-row_media { width: 520px; }
.kc-split-row--access-car .kc-split-row_media img { width: 520px; height: 315px; background: #fff; }
.kc-split-row_media .kc-note { text-align: left; } /* Figma PC実データ：通常行（画像左）は左揃え */
.kc-split-row--reverse .kc-split-row_media .kc-note { text-align: right; } /* Figma PC実データ：反転行（画像右）は画像と同じ右側に揃える */
.kc-split-row_body {
  flex: 1;
  padding: 30px 0;
}
.kc-split-row_title {
  font-family: var(--kc-font-gothic);
  font-weight: bold;
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--kc-dark);
  margin: 0 0 30px;
}
.kc-access-transit_title { margin-bottom: 15px; }
.kc-access-transit { display: flex; flex-direction: column; gap: 30px; }
.kc-split-row_text {
  font-family: var(--kc-font-gothic);
  font-size: 15px;
  line-height: 30px;
  letter-spacing: 0.8px;
  color: var(--kc-dark);
  margin: 0;
}

/* ---------- READ MORE 展開パネル ---------- */
.kc-expand {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
  width: 100%;
}
.kc-expand.is-open { grid-template-rows: 1fr; }
.kc-expand_inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
  min-height: 0;
  overflow: hidden;
  padding-block: 0;
  transition: padding 0.3s ease;
}
.kc-expand_inner--gx { gap: 0; }
.kc-expand.is-open .kc-expand_inner { padding-block: 60px 10px; }
#kc-contact-expand.is-open .kc-expand_inner { overflow: visible; }

/* ---------- モデルハウス 360°VRカード（PC） ---------- */
.kc-vr-card {
  display: flex;
  width: 100%;
  background: var(--kc-white);
  border-radius: 25px;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.kc-vr-card_media {
  flex: none;
  width: 520px;
  height: 390px;
  object-fit: cover;
  display: block;
}
.kc-vr-card_body {
  flex: 1;
  padding: 60px 45px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
}
.kc-vr-card_title {
  font-family: var(--kc-font-gothic);
  font-weight: bold;
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--kc-green2);
  margin: 0;
}
.kc-vr-card_text {
  font-family: var(--kc-font-gothic);
  font-size: 15px;
  line-height: 30px;
  letter-spacing: 0.8px;
  color: var(--kc-dark);
  margin: 0;
}
.kc-vr-card .kc-btn-external,
.kc-vr-card--sp .kc-btn-external { font-family: var(--kc-font-mincho); }
.kc-vr-card_body .kc-btn-external { margin-top: 30px; }

/* ---------- モデルハウス 360°VRカード（SP：写真を背景に敷いてテキストを重ねる） ---------- */
.kc-vr-card--sp {
  position: relative;
  width: 340px;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 25px;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  background: var(--kc-white);
  padding: 49px 30px 40px;
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.kc-vr-card--sp::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/modelhouse-360.jpg") left center / cover no-repeat;
  opacity: 0.25;
}
.kc-vr-card--sp > * { position: relative; }
.kc-vr-card--sp .kc-vr-card_title { font-size: 18px; text-align: center; }
.kc-vr-card--sp .kc-vr-card_text { font-size: 15px; line-height: 28px; }

/* ---------- 3枚横並びカード（ゼロカーボンシティGX志向型住宅など） ---------- */
.kc-trio-grid {
  display: flex;
  gap: 60px;
  justify-content: center;
  width: 100%;
}
.kc-trio-card { flex: 0 1 373px; width: 373px; min-width: 0; }
.kc-trio-card_img {
  width: 100%;
  max-width: 373px;
  height: auto;
  aspect-ratio: 373 / 224;
  object-fit: cover;
  display: block;
  background: #83838c;
}
.kc-trio-card_title {
  font-family: var(--kc-font-gothic);
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 0.5px;
  color: var(--kc-dark);
  margin: 15px 0 0;
}
.kc-trio-card_text {
  font-family: var(--kc-font-gothic);
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0.5px;
  color: var(--kc-dark);
  margin: 0;
}

/* ---------- アクセス展開：交通手段カード ---------- */
.kc-divider {
  width: 100%;
  height: 2px;
  background: #d8d8d8;
  border: none;
  margin: 0;
}
@media screen and (min-width: 768px) {
  .kc-kukaku-btn { display: none; }
  #kc-access-expand .kc-divider { margin-top: 5px; }
}
.kc-mode-card {
  /* 373px×3+gap60px×2=1239pxが、親.kc-expand(overflow:hidden)の実効幅を1160〜1279px幅で上回り左右が切れていた。
     同じ.kc-trio-gridを使う.kc-trio-card（803行目付近）は既にflex:0 1 373px+min-width:0で縮小対応済みなので、同じ挙動に揃える */
  flex: 0 1 373px;
  width: 373px;
  min-width: 0;
}
.kc-mode-card_label {
  margin: 0; /* <p>要素のUAデフォルトmargin対策（.kc-noteと同じ理由） */
  background: var(--kc-dark);
  color: var(--kc-white);
  font-family: var(--kc-font-mincho);
  font-size: 18px;
  letter-spacing: 2px;
  text-align: center;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kc-mode-card_img {
  width: 100%;
  max-width: 373px;
  height: auto;
  aspect-ratio: 373 / 224; /* カードが縮小してもFigmaの縦横比を維持（.kc-trio-card_imgと同じ方式） */
  object-fit: cover;
  display: block;
  background: #83838c;
}
.kc-mode-card_info {
  font-family: var(--kc-font-gothic);
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0.5px;
  color: var(--kc-dark);
  margin: 15px 0 0;
}
.kc-mode-card_info + .kc-mode-card_info { margin-top: 10px; }
.kc-mode-card_info small { display: block; font-size: 12px; color: #666; }
.kc-accent {
  color: var(--kc-green2);
  font-weight: bold;
  font-size: 18px;
}

/* ---------- モデルハウス Gallery（未挿入プレースホルダー） ---------- */
.kc-gallery-grid {
  display: flex;
  gap: 60px;
  justify-content: center;
  width: 100%;
}
.kc-gallery-item { flex: 1; max-width: 588px; }
.kc-gallery-item_img {
  width: 100%;
  height: 406px;
  background: #83838c;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kc-white);
  font-size: 13px;
}
.kc-gallery-item_caption {
  font-family: var(--kc-font-gothic);
  color: var(--kc-dark);
  margin: 7px 0 0;
}
.kc-gallery-item_name { font-size: 15px; margin: 0 0 4px; }
.kc-gallery-item_note { font-size: 12px; color: #999; margin: 0; }

/* ---------- 社名帯 ---------- */
.kc-companyband {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}
.kc-companyband_head {
  display: flex;
  align-items: center;
  gap: 53px;
}
.kc-companyband_logo { width: 157px; height: auto; flex: none; }
.kc-companyband_name-group { display: flex; align-items: center; gap: 35px; }
.kc-companyband_wordmark { width: 340px; height: auto; }
.kc-companyband_branch {
  margin: 0; /* <p>要素のUAデフォルトmargin対策（.kc-noteと同じ理由） */
  font-family: var(--kc-font-gothic);
  font-weight: bold;
  font-size: 26px;
  color: var(--kc-dark);
  white-space: nowrap;
}
.kc-companyband_tel-row {
  display: flex;
  gap: 50px;
  flex-wrap: wrap;
  justify-content: center;
}
.kc-companyband_tel {
  margin: 0; /* <p>要素のUAデフォルトmargin対策（.kc-noteと同じ理由） */
  display: flex;
  align-items: center;
  gap: 25px;
}
.kc-companyband_tel-label {
  background: var(--kc-dark);
  color: var(--kc-white);
  font-family: var(--kc-font-gothic);
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 1px;
  width: 100px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.kc-companyband_tel-num {
  font-family: var(--kc-font-gothic);
  font-weight: bold;
  font-size: 36px;
  color: var(--kc-dark);
  text-decoration: none;
  white-space: nowrap;
}
.kc-companyband_info {
  text-align: center;
  color: var(--kc-dark);
}
.kc-companyband_hours {
  font-family: var(--kc-font-gothic);
  font-weight: bold;
  font-size: 22px;
  margin: 0 0 30px;
}
.kc-companyband_address {
  font-family: var(--kc-font-gothic);
  font-size: 15px;
  line-height: 18px;
  margin: 0;
}

/* ---------- カルーセル（SP：ランドプラン／お問い合わせSTEP） ---------- */
/* Figma実データ確認：約220px幅のカードを1枚だけセンター表示し、左右に大きめの丸矢印を配置（隣接カードは見せない） */
.kc-carousel {
  position: relative;
  width: 100%;
}
.kc-carousel_track {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 10px; /* 上下：box-shadowの余白。左右：中間カードはscroll-snapで自然に両側10pxの空きができるが、
    先頭/最終カードは前後にスクロール余地がなく詰めるため、paddingで同じ10pxの空きを常に確保し次カードが見切れないようにする */
  margin: 0 auto;
  width: 240px; /* カード実幅220px＋左右10pxずつ＝shadow分の余白。スクロール中央寄せは変わらず1枚表示 */
  scrollbar-width: none;
}
.kc-carousel_track::-webkit-scrollbar { display: none; }
.kc-carousel_track > * {
  scroll-snap-align: center;
  flex: none;
}
.kc-carousel_nav { display: contents; } /* ボタンをカード脇に絶対配置するため、nav自体はレイアウトに関与させない */
.kc-carousel_btn {
  /* 意匠は積水既存UI（bunjouform/bunjou/css/cmn_2026.css .pref-recommend-next/prev）に寄せた、LP固有スタイル。
     挙動（native scroll-snap）・ページネーション（バー等は追加しない）はFigma/現行のまま変更していない */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #e6e6e6;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  transition: opacity 0.4s ease;
}
.kc-carousel_btn:hover { opacity: 0.7; }
.kc-carousel_btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--kc-dark);
  border-right: 2px solid var(--kc-dark);
}
.kc-carousel_btn--prev::after { transform: translate(-50%, -50%) rotate(-135deg); }
.kc-carousel_btn--next::after { transform: translate(-50%, -50%) rotate(45deg); }
.kc-carousel_btn--prev { left: calc(50% - 160px); } /* Figma実測（node 292:64, gap10px+矢印半径20px=30px）に合わせてカード端から矢印中心まで30px */
.kc-carousel_btn--next { right: calc(50% - 160px); }
.kc-carousel_dots { display: none; } /* Figmaにドットページネーションはないため非表示（マークアップ・JSは維持） */

/* ---------- 縦リズム（Figma実座標。値はマニュアルの余白スケール15/30/45/60/75pxに一致） ---------- */
.kc-heading { margin-bottom: 60px; } /* 既定：見出し→本文（マップ／モデルハウス／お問い合わせ） */
#kc-concept .kc-heading { margin-bottom: 75px; }
#kc-zerocarbon .kc-heading { margin-bottom: 30px; }
#kc-landplan .kc-heading,
#kc-access .kc-heading,
#kc-location .kc-heading { margin-bottom: 45px; }
#kc-landplan .kc-lead { margin-bottom: 55px; } /* Figma PC：本文枠130px（4行分120px＋10px）→区画図。見た目の空きを合わせる */
.kc-feature-grid { gap: 60px 30px; }
#kc-access .kc-lead { margin-bottom: 45px; } /* Figma実座標で本文→画像を実測すると45pxで他の区間と同一（92pxは誤り、本文ボックスは137pxを使い切っていた） */
#kc-access .kc-btn-row { margin-top: 45px; }
#kc-location .kc-lead { margin-bottom: 45px; }
.kc-location-grid { gap: 45px 30px; }
.kc-location-card { min-height: 418px; box-sizing: border-box; } /* Figma PC：paddingを含むカード総高418px */
.kc-location_note {
  max-width: 800px; /* Figmaは768pxで1行。実フォント幅では768px超のため少し余裕を持たせ孤立行を防ぐ */
  margin: 30px auto 0;
  font-size: 12px;
  line-height: 18px;
}
#kc-contact > .kc-btn-row { margin-top: 60px; }
#kc-zerocarbon > .kc-inner > .kc-btn-row { margin-top: 30px; }
.kc-map_note { text-align: center; margin: 0 0 15px; }

/* ---------- SP対応 ---------- */
@media screen and (max-width: 767px) {
  .kc-section { padding: var(--kc-gap-base-sp) 25px; } /* Figma SP：左右余白25px（本文幅340px） */
  .kc-catch,
  .kc-section--narrow-sp { padding: var(--kc-gap-narrow-sp) 25px; } /* SP_説明：トップ／コンセプトは45px */
  .kc-section--wide { padding: var(--kc-gap-base-sp) 25px; } /* SPでは例外指定なし＝基本60pxを適用 */
  .kc-heading { gap: 15px; }
  .kc-heading_en { font-size: 24px; }
  .kc-heading_ja { font-size: 12px; }
  /* 参考サイトSP実測：上48px／下32px、ボタン間約15px、ボタン約280×67px */
  .kc-section--jump { display: block; padding: 48px 25px 32px; }
  .kc-section--jump .kc-jumpnav {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    gap: 15px;
  }
  .kc-section--jump .kc-jumpnav_btn { width: 280px; max-width: 100%; height: 67px; font-size: 15px; }
  .kc-section--jump .kc-jumpnav_btn--kukaku { display: none; }
  .kc-section--jump .kc-jumpnav_btn--yoyaku { order: 1; }
  .kc-section--jump .kc-jumpnav_btn--shiryo { order: 2; }
  .kc-section--jump .kc-jumpnav_btn--gaiyo { order: 3; }

  .kc-concept-wordmark { width: 340px; }

  .kc-feature-grid { display: none; } /* SPはカルーセル（.kc-carousel）で表示するためグリッド版は非表示 */
  .kc-location-grid {
    grid-template-columns: repeat(2, minmax(140px, 170px));
    gap: 15px;
    max-width: 355px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .kc-location-card { width: 100%; padding-bottom: 15px; min-height: 0; } /* PC共通ルールのmin-height:418pxをSPで打ち消し、Gridデフォルトのalign-items:stretchで同じ行のカード高さを揃える（文字量が違っても各カードの下余白は15pxのまま） */
  .kc-location-card_img { width: 100%; height: auto; aspect-ratio: 170 / 113; }
  .kc-location-card_date { font-size: 10px; line-height: 16px; letter-spacing: 0.8px; margin: 0 0 5px; padding: 0 10px 0 0; }
  .kc-location-card_body { padding: 0 10px; }
  .kc-location-card_name { font-size: 12px; line-height: 18px; margin: 0 0 5px; }
  .kc-location-card_dist { font-size: 10px; line-height: 16px; margin: 0 0 5px; }
  .kc-location-card_desc { font-size: 10px; line-height: 16px; }

  /* Figma実データ：お問い合わせSTEPはSPも縦積み（横スライドではない） */
  .kc-step-flow { flex-direction: column; flex-wrap: nowrap; gap: 24px; }
  .kc-step-card { width: 340px; }
  .kc-step-card_num { height: 192px; }
  .kc-step-card_text { font-size: 12px; line-height: 20px; padding: 0 15px; }
  .kc-step-arrow { transform: rotate(90deg); }
  .kc-timeline-flow { display: none; } /* SPはカルーセル表示 */
  .kc-timeline-groups { gap: 60px; }
  .kc-timeline-group { gap: 30px; } /* Figma実座標：SPは見出しブロック→カルーセル間30px */
  #kc-contact-expand .kc-carousel_track,
  #kc-landplan .kc-carousel_track { box-sizing: border-box; }

  .kc-btn-readmore,
  .kc-btn-external,
  .kc-jumpnav_btn { width: 200px; height: 40px; font-size: 14px; }
  .kc-btn-readmore { font-size: 12px; letter-spacing: 2px; }
  .kc-btn-readmore_icon { width: 12px; height: 12px; }

  .kc-pc-only { display: none; }
  .kc-sp-only { display: block; }
  .kc-access-sp-images,
  .kc-map-sp-images { display: flex; }

  .kc-split-row,
  .kc-split-row--reverse {
    flex-direction: column;
    gap: 15px;
  }
  .kc-split-row_media,
  .kc-split-row_media img { width: 100%; }
  .kc-split-row_media .kc-note,
  .kc-split-row--reverse .kc-split-row_media .kc-note { text-align: right; } /* Figma SP実データ：画像が縦積みになるSPでは行の向きに関わらず常に右揃え（PCの左右反転ルールとは別軸） */
  .kc-split-row_body { padding: 0; }
  .kc-split-row_title { font-size: 18px; margin-bottom: 15px; }
  .kc-split-row_text { font-size: 14px; line-height: 24px; }
  .kc-expand_inner { gap: 40px; }
  .kc-expand_inner--gx { gap: 0; }
  #kc-zerocarbon-expand.is-open .kc-expand_inner { padding-bottom: 0; }

  /* マイカー利用（IC案内図）：Figma実データではSPのみ見出し→本文→画像の順（画像が最後） */
  .kc-split-row--access-car { gap: 45px; }
  #kc-access .kc-expand_inner { gap: 45px; } /* trio-grid内(45px)と揃え、車→区切り線／リード文→Bus等の間隔も統一 */
  .kc-split-row--access-car .kc-split-row_media { order: 2; width: 100%; } /* PC専用の520px固定幅をSPでは打ち消す */
  .kc-split-row--access-car .kc-split-row_body { order: 1; }
  .kc-split-row--access-car .kc-split-row_title { text-align: center; } /* Figma実座標：タイトルのみ左右均等余白＝中央揃え（本文は左揃えのまま） */
  .kc-access-transit_title { margin-bottom: 30px; }
  .kc-access-transit { gap: 45px; }
  .kc-split-row--access-car .kc-split-row_media img { width: 100%; height: auto; aspect-ratio: 340 / 206; }

  .kc-vr-card { display: none; } /* SPは .kc-vr-card--sp を使用 */
  .kc-vr-card--sp { display: flex; } /* PC幅では.kc-sp-onlyのdisplay:noneが有効なため、ここでのみflex化する（記述順による上書き事故を防止） */

  .kc-hero_stage { aspect-ratio: 390 / 440; }
  .kc-hero_note {
    font-size: 10px;
    line-height: 16px;
    width: 340px;
    max-width: 100%;
    margin: 10px 0 0 auto;
    padding: 0 1em 45px 0;
  }

  .kc-gallery-grid { flex-direction: column; gap: 25px; }
  .kc-gallery-item { max-width: none; }
  .kc-gallery-item_img { height: 220px; }

  .kc-trio-grid { flex-direction: column; gap: 45px; } /* Figma実データ(node 315:108)：カード間もリード文→1枚目写真と同じ45px */
  .kc-trio-card { width: 100%; flex: none; }
  .kc-trio-card_img { width: 100%; height: auto; aspect-ratio: 373/224; }
  #kc-zerocarbon-expand .kc-trio-card > .kc-note { font-size: 10px; line-height: 24px; }
  #kc-zerocarbon-expand .kc-trio-card_title { margin-top: 0; }
  .kc-trio-card_text { margin-top: 15px; }

  .kc-mode-card { width: 100%; }
  .kc-mode-card_label,
  .kc-mode-card_img { width: 100%; }
  .kc-mode-card_img { height: auto; aspect-ratio: 373/224; }
  #kc-access-expand .kc-mode-card > .kc-note { font-size: 10px; line-height: 24px; }
  #kc-access-expand .kc-mode-card > .kc-note + .kc-mode-card_info { margin-top: 0; }

  .kc-companyband_head { flex-direction: column; gap: 20px; text-align: center; }
  .kc-companyband_name-group { flex-direction: column; gap: 10px; }
  .kc-companyband_logo { width: 110px; }
  .kc-companyband_wordmark { width: 260px; }
  .kc-companyband_branch { font-size: 20px; }
  .kc-companyband_tel-row { flex-direction: column; gap: 20px; align-items: center; }
  .kc-companyband_tel-num { font-size: 26px; }
  .kc-companyband_hours { font-size: 16px; }
  .kc-companyband_address { font-size: 12px; }


  /* ---- SP 縦リズム（Figma SP実座標） ---- */
  .kc-step-card { min-height: 0; }
  .kc-split-row_media img { height: auto; aspect-ratio: 340 / 224; }
  .kc-split-row_media .kc-note,
  .kc-split-row_text .kc-note { font-size: 10px; line-height: 16px; }
  .kc-feature-card_text { letter-spacing: 0; }
  .kc-split-row_text { font-size: 15px; line-height: 30px; }
  #kc-zerocarbon .kc-split-row { gap: 18px; }
  #kc-zerocarbon .kc-split-row_title { margin-bottom: 17px; }
  #kc-zerocarbon > .kc-inner > .kc-btn-row { margin-top: 60px; }
  .kc-pc-br { display: none; }
  .kc-sp-br { display: inline; }
  .kc-heading,
  #kc-concept .kc-heading,
  #kc-zerocarbon .kc-heading,
  #kc-landplan .kc-heading,
  #kc-access .kc-heading,
  #kc-location .kc-heading { margin-bottom: 45px; }
  #kc-map .kc-heading { margin-bottom: 30px; }

  /* キャッチ：1行目＋注記／2行目に×＋邸別自由設計／タグライン2行 */
  .kc-catch_group {
    grid-template-columns: 1fr auto auto 1fr;
    grid-template-areas: "l1 l1 l1 l1" "sub sub sub sub" ". x l2 .";
  }
  .kc-catch_l1,
  .kc-catch_l2 { font-size: 24px; line-height: 36px; }
  .kc-catch_l1 {
    justify-self: center;
    line-height: 32px;
  }
  .kc-catch_num { font-size: 32px; }
  .kc-catch_mark { font-size: 15.48px; }
  .kc-catch_x { width: 38px; height: 38px; margin: 30px 15px 0 0; }
  .kc-catch_l2 { margin-top: 30px; }
  .kc-catch_sub { font-size: 10px; line-height: 16px; margin-top: 0; transform: translateY(-4px); }
  .kc-catch_tagline { font-size: 24px; line-height: 36px; margin-top: 30px; }

  .kc-lead { text-align: left; } /* Figma実データ：PCは親コンテナのtext-centerを継承して中央揃えだが、SPは親にtext-centerが無く本文は左揃え（.kc-concept_noteと同じ仕様） */
  #kc-concept .kc-lead { text-align: center; }
  #kc-access > .kc-inner > .kc-lead { text-align: center; }
  .kc-gx-lead { margin-top: 15px; margin-bottom: 45px; }

  /* コンセプト */
  .kc-concept_title { margin-bottom: 30px; }
  .kc-concept_note { max-width: 340px; margin: 0 auto 45px; text-align: left; font-size: 10px; line-height: 16px; }
  .kc-concept_value { font-size: 24px; margin-bottom: 33px; }

  /* ランドプラン／アクセス／ロケーション／マップ／お問い合わせ */
  /* Figma SP：Landplan下端は左側の淡い水色グローが残った状態で、白いAccessへ切り替わる。 */
  #kc-landplan {
    background:
      radial-gradient(ellipse 85% 42% at 0% 82%,
        rgba(228, 239, 240, 0.9) 0%,
        rgba(228, 239, 240, 0.55) 50%,
        rgba(228, 239, 240, 0.18) 72%,
        rgba(228, 239, 240, 0) 100%),
      var(--kc-white);
  }
  #kc-landplan .kc-lead { margin-bottom: 38px; text-align: center; } /* Figma SP：本文枠173px（6行分180pxより7px低い） */
  #kc-landplan .kc-carousel { margin-top: 60px; }
  #kc-access .kc-lead { margin-bottom: 45px; }
  #kc-access .kc-btn-row { margin-top: 60px; }
  #kc-location { padding-left: 15px; padding-right: 15px; }
  #kc-location .kc-lead { max-width: 340px; margin-bottom: 40px; text-align: center; } /* Figma SP：本文枠175px（6行分180pxより5px低い） */
  .kc-location-grid { gap: 30px 15px; }
  .kc-location_note { max-width: 340px; font-size: 10px; line-height: 16px; }
  .kc-map_note { font-size: 10px; line-height: 16px; margin-bottom: 15px; }
}