/* ============================================================
   kochi.css — 高知専用LP（sorato風・アーティスティックなスクロール演出版）
   ・モチーフ「空と海」：淡青グラデ基調・濃紺の明朝見出し・広い余白
   ・自己完結（styles.css / top.css を参照しない）
   ・クラスは kc- 接頭辞で他ページと衝突しないよう分離
   ・演出（パララックス/リビール）は html.kc-js が付いたときだけ有効化。
     JS未読込・prefers-reduced-motion 時は kc-js が付かず、全要素が即表示される
   ============================================================ */

:root {
  /* --- 空と海の青（濃→淡） --- */
  --kc-ink: #12335f;            /* 見出し（濃紺） */
  --kc-blue-deep: #1a4f9c;      /* 濃いブルー */
  --kc-blue: #1e6fe0;           /* メインブルー（リンク・アイコン） */
  --kc-blue-bright: #2f7ff0;    /* CTAボタン明側 */
  --kc-blue-cta: #1763d6;       /* CTAボタン暗側 */
  --kc-blue-soft: #e9f2fc;      /* 淡いブルー背景 */
  --kc-blue-softer: #f4f9ff;    /* さらに淡いブルー背景 */
  --kc-sky-top: #dcefff;        /* 空色（グラデ上端） */

  /* --- 背景・文字 --- */
  --kc-bg: #ffffff;
  --kc-text: #1c2b3a;
  --kc-text-muted: #5a6b7d;
  --kc-border: #e3ebf3;

  /* --- タイポ --- */
  --kc-font-sans: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kc-font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --kc-font-en: "Montserrat", "Inter", system-ui, sans-serif;

  --kc-container-max: 1120px;
  --kc-container-pad: clamp(20px, 5vw, 48px);
  --kc-radius: 18px;
  --kc-radius-sm: 12px;
  --kc-header-h: 68px;

  --kc-shadow-sm: 0 2px 10px rgba(18, 51, 95, 0.06);
  --kc-shadow-md: 0 14px 36px rgba(18, 51, 95, 0.10);
  --kc-shadow-lg: 0 24px 60px rgba(18, 51, 95, 0.16);

  --kc-section-y: clamp(80px, 11vw, 150px);
}

/* --- リセット・ベース --- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
/* スムーススクロールはLenisが担うため、演出有効時はネイティブを無効化 */
html.kc-js { scroll-behavior: auto; }

body {
  margin: 0;
  font-family: var(--kc-font-sans);
  color: var(--kc-text);
  background: var(--kc-bg);
  line-height: 1.85;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* 行頭に句読点（。、）が来ないよう厳格な行分割規則を適用 */
  line-break: strict;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

:target { scroll-margin-top: calc(var(--kc-header-h) + 16px); }

.kc-container {
  width: 100%;
  max-width: var(--kc-container-max);
  margin-inline: auto;
  padding-inline: var(--kc-container-pad);
}

.kc-br-pc { display: inline; }

/* ============================================================
   改行制御ユーティリティ
   ・.nb = 文節（意味のまとまり）を折り返し単位にする。
     inline-block は内部で改行されない atomic ボックスとなり、
     隣接 .nb 境界だけが折り返し機会になる → 「を。」だけの行を防ぐ
   ・見出し系は text-wrap: balance で行長を均等化（未対応ブラウザでは無害）
   ・本文系は text-wrap: pretty で最終行の孤立を緩和
   ============================================================ */
.nb { display: inline-block; }

.kc-h2,
.kc-contact-title { text-wrap: balance; }

.kc-intro-lead,
.kc-head-lead,
.kc-service-desc,
.kc-flow-desc,
.kc-price-sub,
.kc-price-tag,
.kc-local-text,
.kc-local-card-text,
.kc-faq-text,
.kc-contact-note { text-wrap: pretty; }

/* ============================================================
   リビール（演出）
   ・既定（kc-js無し）は完全表示。演出有効時のみ初期状態を隠す
   ============================================================ */
html.kc-js [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
html.kc-js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* 写真などのクリップリビール（下から立ち上がる） */
html.kc-js [data-reveal="clip"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.05s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: clip-path;
}
html.kc-js [data-reveal="clip"].is-revealed {
  clip-path: inset(0 0 0 0);
}

/* 見出しのマスクリビール */
html.kc-js [data-reveal="mask"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 105% 0);
  transition: clip-path 1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: clip-path;
}
html.kc-js [data-reveal="mask"].is-revealed {
  clip-path: inset(0 0 -8% 0);
}

/* 文節（.nb）単位のテキストリビール（data-reveal="lines"）
   ・親要素自体はブロックフェードさせず、直下の .nb を時間差で出す（JS駆動）
   ・.nb は display:inline-block なので transform / filter が効き、
     かつ改行の単位は変わらない（行送り・折り返し位置に影響しない）
   ・kc-js無し／JS失敗時（kc-js除去）はこのブロックが効かず全表示 */
html.kc-js [data-reveal="lines"] {
  opacity: 1;
  transform: none;
  transition: none;
}
html.kc-js [data-reveal="lines"] > .nb {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
}
html.kc-js [data-reveal="lines"].is-revealed > .nb {
  opacity: 1;
  transform: none;
  filter: none;
}

/* 写真枠のクリップ立ち上がり＋中のimgズームアウト（data-reveal="frame"）
   clip-path は枠側、scale は img 側。枠は overflow:hidden 済み。
   枠の transform はパララックス（yPercent/rotation）が使うため触らない */
html.kc-js [data-reveal="frame"] {
  opacity: 1;
  transform: none;
  /* transform は scrub 駆動なので CSS transition は付けない（補間が二重になる） */
  transition: none;
  clip-path: inset(0 0 100% 0);
}
html.kc-js [data-reveal="frame"].is-revealed {
  clip-path: inset(0 0 0 0);
}

/* カード群のスタガー出現（演出有効時のみ初期状態を隠す。JSがgsapで順次表示）
   ・[data-stagger] グループ内の [data-stagger-item] が対象
   ・kc-js無し／JS失敗時（kc-js除去）は隠さない＝全表示 */
html.kc-js [data-stagger-item] {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
}

/* ============================================================
   オープニング演出
   ・既定は display:none。JSが初回訪問時のみ .is-playing を付与して再生する
   ・JS無効／2回目以降は表示されず、通常のヒーローが即見える
   ・淡青オーバーレイ内でヒーロー空撮を円形マスク拡張で現出（clip-path/opacity/scaleはJS駆動）
   ============================================================ */
.kc-opening { display: none; }
.kc-opening.is-playing {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 200; /* ヘッダー(100)より前面 */
  overflow: hidden;
  background: linear-gradient(180deg, var(--kc-sky-top) 0%, #eef7ff 45%, #cfe6fb 100%);
}
.kc-opening-bg {
  position: absolute;
  inset: 0;
  background-image: url("images/kochi_art_hero.webp");
  background-size: cover;
  background-position: center 55%;
  opacity: 0;
  clip-path: circle(0% at 50% 50%);
  -webkit-clip-path: circle(0% at 50% 50%);
  will-change: clip-path, transform, opacity;
}

/* ============================================================
   ボタン
   ============================================================ */
.kc-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--kc-font-sans);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.kc-btn-primary {
  background: var(--kc-blue);
  color: #fff;
  padding: 12px 22px;
}
.kc-btn-primary:hover { background: var(--kc-blue-deep); }

.kc-btn-cta {
  background: linear-gradient(135deg, var(--kc-blue-bright), var(--kc-blue-cta));
  color: #fff;
  box-shadow: 0 12px 26px rgba(23, 99, 214, 0.34);
}
.kc-btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(23, 99, 214, 0.42);
}
.kc-btn-lg { padding: 18px 32px; font-size: 1.05rem; }
.kc-btn-ico { width: 22px; height: 22px; flex: none; }
.kc-btn-arrow { font-size: 1.1em; transition: transform 0.25s ease; }
.kc-btn-cta:hover .kc-btn-arrow { transform: translateX(4px); }

/* ============================================================
   ヘッダー
   ============================================================ */
.kc-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--kc-header-h);
  z-index: 100;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0);
  backdrop-filter: saturate(160%) blur(0px);
  -webkit-backdrop-filter: saturate(160%) blur(0px);
  transition: box-shadow 0.35s ease, background 0.35s ease, backdrop-filter 0.35s ease;
}
.kc-header.is-scrolled {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  box-shadow: var(--kc-shadow-sm);
}
.kc-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kc-brand-name {
  font-family: var(--kc-font-en);
  font-weight: 600;
  letter-spacing: 0.14em;
  font-size: 1.05rem;
  color: var(--kc-ink);
}
.kc-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 34px);
}
.kc-nav-link {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--kc-text);
  transition: color 0.2s ease;
}
.kc-nav-link:hover { color: var(--kc-blue); }
.kc-nav-cta { margin-left: 6px; }

.kc-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.kc-nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  margin-inline: auto;
  background: var(--kc-ink);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ============================================================
   ヒーロー（全画面・空撮背景＋雲レイヤー・縦組み明朝見出し）
   ============================================================ */
.kc-hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
}

/* 背景メディア（グラデ→画像の順で重ね、画像欠損時もグラデで成立） */
.kc-hero-media {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: linear-gradient(180deg, var(--kc-sky-top) 0%, #eef7ff 42%, #cfe6fb 100%);
}
.kc-hero-bg {
  position: absolute;
  inset: -4%;
  background-image: url("images/kochi_art_hero.webp");
  background-size: cover;
  background-position: center 55%;
  will-change: transform;
}
/* ヒーロー下端をリード節の色へ溶かす帯。
   終端色を #intro 上端の帯と同じ var(--kc-blue-softer) に合わせることで、
   境界に色段差（1pxの直線）が出ない。transparent からの補間は
   ブラウザが premultiplied alpha で行うためグレーを経由しない */
.kc-hero-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(120px, 18vh, 260px);
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, var(--kc-blue-soft) 82%, var(--kc-blue-soft) 100%);
}

/* 空と海のトーンを整えるヴェール（文字の可読性確保） */
.kc-hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(220,239,255,0.30) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 62%, rgba(207,230,251,0.35) 100%),
    linear-gradient(90deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 45%);
}

/* 雲レイヤー（透過PNG。欠損時は背景なしで透明＝無害）
   ・雲PNGは実寸 1536x1024（3:2）。要素の縦横比を画像と一致させることで
     background-size:contain の余白が消え、マスク楕円の中心・端が画像の中心・端と揃う
     （縦横を別指定していた頃は画像が要素内で中央に寄り、マスクが端まで届かず
      矩形の切断面が残っていた）
   ・width は max(％, vh) で指定：横長画面では％、縦長のスマホでは vh 側が勝ち、
     どちらでも雲が小さくなりすぎない
   ・マスクは端で確実にアルファ0へ落とす（46%→80%） */
.kc-cloud {
  position: absolute;
  aspect-ratio: 3 / 2;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  pointer-events: none;
  will-change: transform;
  opacity: 0.9;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 46%, transparent 80%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 46%, transparent 80%);
}
.kc-cloud--a {
  top: 3%; left: -3%;
  width: max(52%, 42vh);
  background-image: url("images/kochi_art_cloud_a.webp");
  opacity: 0.82;
}
.kc-cloud--b {
  top: 15%; right: -4%;
  width: max(50%, 40vh);
  background-image: url("images/kochi_art_cloud_b.webp");
  opacity: 0.72;
}
.kc-cloud--c {
  top: 44%; left: -2%;
  width: max(46%, 36vh);
  background-image: url("images/kochi_art_cloud_c.webp");
  opacity: 0.66;
}
.kc-cloud--d {
  bottom: 2%; right: -2%;
  width: max(48%, 38vh);
  background-image: url("images/kochi_art_cloud_d.webp");
  opacity: 0.76;
}
/* e/f は既存4種のPNGを左右反転・サイズ違い・低い不透明度で再利用して枚数を増やす。
   反転を要素本体に掛けるとGSAPのtransform（parallax/drift）と衝突するため、
   背景を持つ疑似要素側で scaleX(-1) する */
.kc-cloud--e {
  top: 27%; right: 8%;
  width: max(38%, 30vh);
  opacity: 0.55;
}
.kc-cloud--f {
  top: 54%; left: 10%;
  width: max(42%, 33vh);
  opacity: 0.48;
}
/* 疑似要素にもマスクを明示（親のマスクと二重になるが端がより確実に落ちる）。
   inset:0 なので親ボックスをはみ出さない */
.kc-cloud--e::before,
.kc-cloud--f::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transform: scaleX(-1);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 46%, transparent 80%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 46%, transparent 80%);
}
.kc-cloud--e::before { background-image: url("images/kochi_art_cloud_b.webp"); }
.kc-cloud--f::before { background-image: url("images/kochi_art_cloud_a.webp"); }

.kc-hero-inner {
  position: relative;
  width: 100%;
  max-width: var(--kc-container-max);
  margin-inline: auto;
  padding-inline: var(--kc-container-pad);
}

/* 縦書き見出し（右寄せ・明朝・字間広め・2行組み）
   ・writing-mode:vertical-rl ＋ 各spanをblockにして「1span＝1列」で2列に組む
   ・line-height が列間（横方向の間隔）を担う */
.kc-hero-title {
  position: absolute;
  top: calc(var(--kc-header-h) + clamp(20px, 5vh, 56px));
  right: var(--kc-container-pad);
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--kc-font-serif);
  font-weight: 600;
  /* 幅基準の clamp。svh 対応ブラウザでは高さ基準の上限も併用し、
     画面が低いとき（~700px）でも各行8〜9文字が1列に収まり2列以内を保つ */
  font-size: clamp(1.9rem, 5.2vw, 3.6rem);
  font-size: min(clamp(1.9rem, 5.2vw, 3.6rem), 7.2svh);
  line-height: 1.9;
  letter-spacing: 0.1em;
  color: var(--kc-ink);
  text-shadow: 0 1px 20px rgba(255, 255, 255, 0.6);
}
.kc-hero-title span { display: block; margin: 0; }
.kc-hero-title .kc-hero-title-em { color: var(--kc-blue-deep); }

/* 英字eyebrow（左下） */
.kc-hero-eyebrow {
  position: absolute;
  left: var(--kc-container-pad);
  bottom: clamp(84px, 14vh, 132px);
  font-family: var(--kc-font-en);
  font-weight: 600;
  font-size: clamp(0.66rem, 1.4vw, 0.92rem);
  letter-spacing: 0.3em;
  /* 空撮背景から分離させるため濃紺＋白の光彩で可読性を確保 */
  color: var(--kc-ink);
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.9), 0 1px 3px rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  writing-mode: horizontal-tb;
}
.kc-hero-eyebrow::before {
  content: "";
  display: inline-block;
  width: 40px; height: 1px;
  margin-right: 14px;
  vertical-align: middle;
  background: var(--kc-ink);
  opacity: 0.8;
}

/* SCROLLインジケータ（下端中央） */
.kc-scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 4vh, 40px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 2;
}
.kc-scroll-label {
  font-family: var(--kc-font-en);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  color: var(--kc-blue-deep);
}
.kc-scroll-line {
  position: relative;
  width: 1px;
  height: 54px;
  background: rgba(26, 79, 156, 0.28);
  overflow: hidden;
}
.kc-scroll-line::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 40%;
  background: var(--kc-blue-deep);
  animation: kc-scroll-run 1.9s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes kc-scroll-run {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(160%); }
  100% { transform: translateY(160%); }
}

/* ============================================================
   リード節（明朝・中央寄せ・広い余白）
   ============================================================ */
.kc-intro {
  padding-block: clamp(96px, 16vw, 200px);
  /* 上端はヒーローの溶け込み色から始め、白を経てまた淡青へ。
     ヒーロー側の .kc-hero-fade と同じ色で接続するので境界に段差が出ない */
  background: linear-gradient(180deg, var(--kc-blue-soft) 0%, #ffffff 22%, var(--kc-blue-softer) 100%);
  text-align: center;
}
/* 上端の淡青ヘイズ（上から滲ませる。背景のグラデと重ねて境界をぼかす） */
.kc-intro::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(100px, 14vh, 220px);
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, var(--kc-blue-soft) 0%, transparent 100%);
}
.kc-intro-lead {
  max-width: 760px;
  margin-inline: auto;
  font-family: var(--kc-font-serif);
  font-weight: 500;
  font-size: clamp(1.15rem, 2.6vw, 1.85rem);
  line-height: 2.2;
  letter-spacing: 0.04em;
  color: var(--kc-ink);
}

/* --- リード節境界の雲レイヤー（scrubで流入/流出。装飾のため pointer-events:none） ---
   上端＝画面外から定位置へ流入、下端＝定位置から画面外へ流出（アニメはJS）
   セクションからはみ出す分は .kc-intro の overflow:hidden で切る */
.kc-intro { position: relative; overflow: hidden; }
.kc-intro > .kc-container { position: relative; z-index: 1; } /* リード文を雲の前面へ */
.kc-intro-clouds {
  position: absolute;
  left: 0; right: 0;
  height: 48%;
  pointer-events: none;
  z-index: 0;
}
.kc-intro-clouds--top { top: 0; }
.kc-intro-clouds--bottom { bottom: 0; }
/* ヒーローの雲と同じ考え方: 縦横比を画像(3:2)に合わせ、マスクを端まで落とす。
   .kc-intro が overflow:hidden なのでセクション端でクリップされるが、
   その位置ではマスクでアルファがほぼ0になっているため直線的な切断面が出ない */
.kc-intro-cloud {
  position: absolute;
  aspect-ratio: 3 / 2;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; /* マスク中心と画像中心を揃える */
  opacity: 0.9;
  will-change: transform, opacity;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 46%, transparent 80%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 46%, transparent 80%);
}
/* 上側（流入）: 画像・幅・位置を散らして単調さを避ける */
.kc-intro-cloud--t1 { left: -6%;  top: 2%;   width: 46%; background-image: url("images/kochi_art_cloud_a.webp"); }
.kc-intro-cloud--t2 { right: -7%; top: 10%;  width: 42%; background-image: url("images/kochi_art_cloud_b.webp"); }
.kc-intro-cloud--t3 { left: 16%;  top: -12%; width: 34%; background-image: url("images/kochi_art_cloud_c.webp"); opacity: 0.78; }
.kc-intro-cloud--t4 { right: 18%; top: -4%;  width: 30%; background-image: url("images/kochi_art_cloud_d.webp"); opacity: 0.82; }
/* 下側（流出） */
.kc-intro-cloud--b1 { left: -5%;  bottom: 2%;   width: 44%; background-image: url("images/kochi_art_cloud_c.webp"); }
.kc-intro-cloud--b2 { right: -7%; bottom: 8%;   width: 44%; background-image: url("images/kochi_art_cloud_d.webp"); }
.kc-intro-cloud--b3 { left: 18%;  bottom: -12%; width: 34%; background-image: url("images/kochi_art_cloud_a.webp"); opacity: 0.78; }
.kc-intro-cloud--b4 { right: 16%; bottom: -4%;  width: 30%; background-image: url("images/kochi_art_cloud_b.webp"); opacity: 0.82; }

@media (max-width: 767px) {
  .kc-intro-clouds { display: none; } /* モバイルは負荷・横溢れ回避で非表示 */
}

/* --- ヒーロー↔リード節の境界をまたぐ雲 ---
   両セクションの overflow:hidden の外側（.kc-seam-zone 直下）に置くのでクリップされない。
   z-index は両セクション（position:relative / z-index:auto）より前面になるため、
   帯の位置をヒーローのテキスト帯（eyebrow / SCROLL）より下に取り、
   さらにマスクで上端のアルファを落として可読性を損なわないようにしている */
.kc-seam-zone { position: relative; }
.kc-seam-clouds {
  position: absolute;
  left: 0; right: 0;
  top: calc(100svh - 4vh); /* ヒーローは min-height:100svh。その下端の少し上から */
  height: 26vh;
  z-index: 1;
  pointer-events: none;
}
.kc-seam-cloud {
  position: absolute;
  display: block;
  aspect-ratio: 3 / 2;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  will-change: transform;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 40%, transparent 76%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 40%, transparent 76%);
}
.kc-seam-cloud--1 {
  left: -10%; top: -46%;
  width: min(84%, 900px);
  background-image: url("images/kochi_art_cloud_c.webp");
  opacity: 0.7;
}
.kc-seam-cloud--2 {
  right: -12%; top: -18%;
  width: min(76%, 820px);
  background-image: url("images/kochi_art_cloud_a.webp");
  opacity: 0.58;
}
.kc-seam-cloud--3 {
  left: 22%; top: 6%;
  width: min(62%, 660px);
  background-image: url("images/kochi_art_cloud_d.webp");
  opacity: 0.55;
}

/* --- リード節の風景写真 ---
   既定（<1024px）: リード文の上に横並びで縮小表示（テキストと重ならない）
   ≥1024px: 左下・右上に絶対配置して浮かせる（JSでパララックス） */
.kc-intro-photos {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 3vw, 20px);
  max-width: 760px;
  margin: 0 auto clamp(28px, 6vw, 44px);
  padding-inline: var(--kc-container-pad);
}
.kc-intro-photo {
  margin: 0;
  width: min(40vw, 220px);
  border-radius: var(--kc-radius-sm);
  overflow: hidden;
  box-shadow: var(--kc-shadow-md);
}
.kc-intro-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

@media (min-width: 1024px) {
  /* 絶対配置レイヤー化。中央のリード文(760px)から左右に離した角へ置く。
     縦方向はセクションの広い余白帯に収め、テキスト帯と重ならないようにする */
  .kc-intro-photos {
    position: absolute;
    inset: 0;
    z-index: 0; /* リード文(.kc-container z-index:1)の背面。角に置くため干渉しない */
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    pointer-events: none;
  }
  .kc-intro-photo {
    position: absolute;
    width: clamp(240px, 22vw, 320px);
    border-radius: var(--kc-radius);
    box-shadow: var(--kc-shadow-lg);
    will-change: transform;
  }
  .kc-intro-photo--coast { top: clamp(20px, 5vh, 60px);  right: clamp(8px, 2.4vw, 44px); }
  .kc-intro-photo--bridge { bottom: clamp(20px, 5vh, 60px); left: clamp(8px, 2.4vw, 44px); }
}

/* ============================================================
   セクション共通
   ============================================================ */
.kc-section { padding-block: var(--kc-section-y); }

.kc-head { text-align: center; max-width: 780px; margin-inline: auto; }
.kc-eyebrow {
  display: inline-block;
  font-family: var(--kc-font-en);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  color: var(--kc-blue);
  margin-bottom: 18px;
  white-space: nowrap; /* eyebrowは記号（＼ ／）を含め常に1行 */
  max-width: 100%;
}
.kc-eyebrow--jp {
  font-family: var(--kc-font-sans);
  font-weight: 700;
  letter-spacing: 0.04em;
  /* 375px幅でも「／」が2行目に落ちないよう縮小（下限で1行に収まる） */
  font-size: clamp(0.74rem, 3.3vw, 0.95rem);
}
.kc-h2 {
  font-family: var(--kc-font-serif);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.8vw, 2.7rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--kc-ink);
}
.kc-head-lead {
  margin-top: 22px;
  color: var(--kc-text-muted);
  font-size: 1.02rem;
}

/* ============================================================
   サービス3カード
   ============================================================ */
.kc-services { background: linear-gradient(180deg, var(--kc-blue-softer) 0%, #fff 100%); }
.kc-services-grid {
  margin-top: clamp(44px, 5vw, 66px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 30px);
}
.kc-service-card {
  /* padding をCSS変数化し、写真ヘッダーの逆マージンでカード端まで拭き出す */
  --kc-card-pad-y: clamp(28px, 3vw, 40px);
  --kc-card-pad-x: clamp(22px, 2.6vw, 32px);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--kc-border);
  border-radius: var(--kc-radius);
  padding: var(--kc-card-pad-y) var(--kc-card-pad-x);
  box-shadow: var(--kc-shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 角丸に沿って写真ズームをクリップ */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.kc-service-card:hover { transform: translateY(-4px); box-shadow: var(--kc-shadow-md); }

/* サービスカードの写真ヘッダー（16:10・ホバーでゆっくりズーム） */
.kc-service-media {
  margin: calc(-1 * var(--kc-card-pad-y)) calc(-1 * var(--kc-card-pad-x)) 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--kc-radius) var(--kc-radius) 0 0;
}
.kc-service-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* 出現ズーム（GSAP）は完了時に clearProps でインラインtransformを外すため、
   ここのホバーtransformが効く状態に戻る */
.kc-service-card:hover .kc-service-media img,
.kc-service-card:focus-within .kc-service-media img { transform: scale(1.06); }

.kc-service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--kc-blue-soft);
  color: var(--kc-blue);
  margin: clamp(22px, 2.6vw, 30px) auto 0; /* 写真ヘッダーとの間隔 */
}
.kc-service-icon svg { width: 30px; height: 30px; }
.kc-service-title {
  text-align: center;
  margin-top: 20px;
  font-family: var(--kc-font-serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--kc-blue-deep);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--kc-border);
}
.kc-service-desc {
  margin-top: 16px;
  color: var(--kc-text);
  font-size: 0.97rem;
  line-height: 1.9;
}
.kc-check-list { margin-top: 16px; display: grid; gap: 10px; }
.kc-check-list li {
  position: relative;
  padding-left: 28px;
  font-size: 0.94rem;
  color: var(--kc-text);
}
.kc-check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 5px;
  width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%231e6fe0'/%3E%3Cpath fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l3.6 3.6L18 8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.kc-service-link {
  margin-top: 22px;
  align-self: flex-start;
  color: var(--kc-blue);
  font-weight: 700;
  font-size: 0.95rem;
  display: inline-flex;
  gap: 6px;
}
.kc-service-link:hover { color: var(--kc-blue-deep); }
.kc-service-link span { transition: transform 0.2s ease; }
.kc-service-link:hover span { transform: translateX(4px); }

/* ============================================================
   対面サポート — sticky＋スクロールスクラブのズームアウト地図演出
   ・既定（kc-js無し）: .kc-local-stage は通常フロー。見出し＋説明＋
     地図＋3枚のカードが縦に並び、全内容が読める（フォールバック）
   ・演出有効（html.kc-js）: stage を sticky 化し、計測ゾーン(head/main/foot)で
     ズームアウト・背景転調・説明のアコーディオン・カードの mask リビールを駆動
   ============================================================ */
.kc-local {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, var(--kc-blue-soft) 100%);
  border-top: 1px solid var(--kc-border);
  border-bottom: 1px solid var(--kc-border);
}
/* 海景を薄く（画像欠損時はグラデのみで成立。フォールバック用） */
.kc-local::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("images/kochi_art_ocean.webp");
  background-size: cover;
  background-position: center;
  opacity: 0.14;
}

/* 表示層（フォールバックでは通常フロー） */
.kc-local-stage { position: relative; }
.kc-local-stage-bg { display: none; }

.kc-local-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

/* --- コピー --- */
.kc-local-text {
  margin-top: 22px;
  color: var(--kc-text);
  font-size: 1.04rem;
  line-height: 1.95;
}
.kc-local-points { margin-top: 26px; display: grid; gap: 12px; }
.kc-local-points li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  color: var(--kc-ink);
}
.kc-local-points svg { width: 22px; height: 22px; flex: none; color: var(--kc-blue); }
/* li は flex なので、文節スパン(.nb)は1つのラッパーに入れて折り返させる
   （.nb を直接 li の子にすると各スパンが flex アイテムになり横並びになる） */
.kc-local-point-text { min-width: 0; text-wrap: pretty; }
.kc-local-hint {
  margin-top: 20px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--kc-blue-deep);
  display: none; /* 演出時のみ表示 */
}

/* --- 地図（translate=平行移動+scale / rotate=回転 の2重ラッパー） --- */
.kc-local-map { position: relative; }
.kc-map-rotate { position: relative; transform-origin: 50% 55%; }
.kc-map-translate { position: relative; transform-origin: 46% 55%; }
.kc-map-svg { width: 100%; height: auto; display: block; }
/* 県境は実データ（667頂点）のため、拡大時に線が太らないよう非スケールストロークにする */
.kc-map-shape {
  fill: rgba(30, 111, 224, 0.12);
  stroke: var(--kc-blue);
  stroke-width: 1.5;
  stroke-dasharray: 5 6;
  vector-effect: non-scaling-stroke;
}
.kc-map-route {
  fill: none;
  stroke: var(--kc-blue-deep);
  stroke-width: 2;
  stroke-dasharray: 2 8;
  stroke-linecap: round;
  opacity: 0.8;
  vector-effect: non-scaling-stroke;
}

/* エリアピン（HTMLボタン。%座標でSVG上に重ねる） */
.kc-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  display: none; /* フォールバックでは非表示（カードは下部に静的表示） */
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--kc-font-sans);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--kc-blue-deep);
  line-height: 1;
}
/* 実座標（同じ投影で算出）。viewBox 420x260 に対する百分率 */
.kc-pin--central { left: 53.0%; top: 28.9%; } /* 高知市   SVG(222.7, 75.0)  */
.kc-pin--east    { left: 79.3%; top: 51.0%; } /* 室戸市   SVG(333.0, 132.6) */
.kc-pin--west    { left: 27.6%; top: 75.5%; } /* 四万十市 SVG(115.9, 196.3) */
.kc-pin-mark {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--kc-blue-deep);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(18, 51, 95, 0.35);
}
.kc-pin-label {
  background: rgba(255, 255, 255, 0.92);
  padding: 2px 9px;
  border-radius: 999px;
  box-shadow: var(--kc-shadow-sm);
}
.kc-pin:hover .kc-pin-mark { background: var(--kc-blue); }
.kc-pin:focus-visible { outline: 3px solid var(--kc-blue); outline-offset: 3px; border-radius: 8px; }

/* --- エリア写真カード（フォールバック: 下部に横並び） --- */
.kc-local-cards {
  margin-top: clamp(40px, 6vw, 72px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 3vw, 28px);
}
.kc-local-overlay { display: none; }
.kc-local-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--kc-border);
  border-radius: var(--kc-radius);
  overflow: hidden;
  box-shadow: var(--kc-shadow-md);
}
.kc-local-card-close { display: none; }
.kc-local-card-media {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.kc-local-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kc-local-card-cover { display: none; }
.kc-local-card-body { padding: 16px 18px 20px; }
.kc-local-card-area {
  display: inline-block;
  font-family: var(--kc-font-en);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--kc-blue);
  margin-bottom: 6px;
}
.kc-local-card-text { color: var(--kc-text); font-size: 0.96rem; line-height: 1.8; }

/* --- スクロール計測ゾーン（フォールバックでは領域を持たない） --- */
.kc-local-zone { display: none; }

/* ============================================================
   対面サポート — 演出（html.kc-js が付いたときだけ有効）
   ============================================================ */
html.kc-js .kc-local {
  padding-block: 0;
  overflow: visible; /* sticky を効かせるため親の overflow:hidden を解除 */
  background: none;
  border: 0;
}
html.kc-js .kc-local::before { display: none; }

/* 表示層を画面に固定（計測ゾーンをスクロールする間ここが見え続ける） */
html.kc-js .kc-local-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: center;
  z-index: 1;
  background: #ffffff; /* 初期は白。ズームアウトで淡青へ転調 */
  transition: background-color 0.6s ease;
}
html.kc-js .kc-local-stage.bg-active { background: var(--kc-blue-soft); }
html.kc-js .kc-local-stage-bg {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("images/kochi_art_ocean.webp");
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.6s ease;
}
html.kc-js .kc-local-stage.bg-active .kc-local-stage-bg { opacity: 0.12; }

/* 説明ブロックはJSでアコーディオン展開（初期は閉じる） */
html.kc-js .kc-local-detail { overflow: hidden; }
html.kc-js .kc-local-hint { display: block; }

/* --- 地図を stage 全面に大きく置き、コピーはガラスパネルで上に重ねる ---
   2カラムグリッドだと地図が右半分に収まって窮屈なため、演出時は
   地図を stage いっぱいの絶対配置レイヤーにし、テキストを左に浮かせる。
   ※ .kc-local-inner は position:static のままにする
     （positionを付けると .kc-local-map の inset:0 が container基準になり全面化しない） */
html.kc-js .kc-local-inner {
  display: block; /* grid（1fr 1fr）を解除 */
}
html.kc-js .kc-local-map {
  position: absolute;
  inset: 0;
  z-index: 0;
  max-width: none;
  width: auto;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* ピンは is-explore 時にのみ有効化する */
}
html.kc-js .kc-local-map.is-explore { pointer-events: auto; }
/* 地図本体のサイズ。ズームアウト完了時に画面幅の 85〜94% を占める。
   158vh の上限は縦の低い画面で地図が stage からはみ出さないための保険 */
html.kc-js .kc-map-rotate {
  width: min(1180px, 94vw, 158vh);
  transform-origin: 53% 28.9%; /* 高知市のピン位置＝ズームの基点 */
}
html.kc-js .kc-map-translate {
  width: 100%;
  transform-origin: 53% 28.9%;
}
/* テキストは地図の上。半透明白＋blurのパネルで可読性を確保する */
html.kc-js .kc-local-copy {
  position: relative;
  z-index: 2;
  max-width: min(460px, 92%);
  padding: clamp(18px, 2.2vw, 30px) clamp(18px, 2.4vw, 32px);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: var(--kc-radius);
  background: rgba(255, 255, 255, 0.74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: var(--kc-shadow-md);
}

/* 白地図スタイル：初期は輪郭transparent → ズームアウトで白フェード */
html.kc-js .kc-map-shape {
  fill: rgba(255, 255, 255, 0.5);
  stroke: transparent;
  stroke-dasharray: none;
  stroke-width: 1.5;
  transition: stroke 0.5s ease, fill 0.5s ease;
}
html.kc-js .kc-local-map.is-zoomed .kc-map-shape {
  fill: rgba(255, 255, 255, 0.62);
  stroke: rgba(255, 255, 255, 0.95);
}
html.kc-js .kc-map-route { opacity: 0; transition: opacity 0.8s ease; }
html.kc-js .kc-local-map.is-explore .kc-map-route { opacity: 0.85; }

/* ピンは探索フェーズ（foot）でのみ出現・クリック可能 */
html.kc-js .kc-pin {
  display: inline-flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
html.kc-js .kc-local-map.is-explore .kc-pin {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* カードは最前面のモーダル風オーバーレイ（初期は非表示） */
html.kc-js .kc-local-cards {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  margin: 0;
  pointer-events: none;
}
html.kc-js .kc-local-overlay {
  display: block;
  position: absolute;
  inset: 0;
  background: rgba(11, 31, 59, 0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
html.kc-js .kc-local-overlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
html.kc-js .kc-local-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(440px, 84vw);
  margin: 0;
  transform: translate(-50%, -46%) scale(0.96);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: var(--kc-shadow-lg);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
html.kc-js .kc-local-card.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
html.kc-js .kc-local-card-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: var(--kc-ink);
  cursor: pointer;
  box-shadow: var(--kc-shadow-sm);
}
html.kc-js .kc-local-card-close svg { width: 18px; height: 18px; }
/* カバー：mask で下→上に拭き取られて写真が現れる（maskはJSで設定） */
html.kc-js .kc-local-card-cover {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--kc-blue-soft);
}

/* 計測ゾーン：head=100vh(margin-top:-100vhでstageに重ねる) / main=140vh / foot=190vh
   head は stage(100vh) と同じ高さでなければ重ね合わせがずれるため固定。
   main/foot は「エリア写真に到達するまでが長い」との指摘で 200/300 から短縮した */
html.kc-js .kc-local-zone {
  display: block;
  position: relative;
  z-index: 0;
  pointer-events: none;
}
html.kc-js .kc-local-zone--head { height: 100vh; margin-top: -100vh; }
html.kc-js .kc-local-zone--main { height: 140vh; }
html.kc-js .kc-local-zone--foot { height: 190vh; }

/* ============================================================
   支援の流れ（3ステップ）
   ============================================================ */
.kc-flow { background: #fff; }
.kc-flow-row {
  margin-top: clamp(44px, 5vw, 60px);
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
}
.kc-flow-card {
  flex: 1 1 0;
  max-width: 320px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--kc-border);
  border-radius: var(--kc-radius);
  padding: 36px 24px 30px;
  text-align: center;
  box-shadow: var(--kc-shadow-sm);
  position: relative;
}
.kc-flow-num {
  position: absolute;
  top: -18px; left: 50%;
  transform: translateX(-50%);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--kc-blue);
  color: #fff;
  font-family: var(--kc-font-en);
  font-weight: 600;
}
.kc-flow-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--kc-blue-soft);
  color: var(--kc-blue);
  margin-top: 8px;
}
.kc-flow-icon svg { width: 28px; height: 28px; }
.kc-flow-title {
  margin-top: 16px;
  font-family: var(--kc-font-serif);
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--kc-blue-deep);
}
.kc-flow-desc { margin-top: 12px; color: var(--kc-text-muted); font-size: 0.95rem; }
.kc-flow-arrow {
  align-self: center;
  color: var(--kc-blue);
  font-size: 1.6rem;
  font-weight: 700;
  flex: none;
}

/* ============================================================
   料金の目安
   ============================================================ */
.kc-pricing { background: linear-gradient(180deg, #fff 0%, var(--kc-blue-softer) 100%); }
.kc-pricing-grid {
  margin-top: clamp(44px, 5vw, 60px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 30px);
  max-width: 1080px;
  margin-inline: auto;
}
.kc-price-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--kc-border);
  border-radius: var(--kc-radius);
  /* 3列になり横幅が狭まるため2カード時より内側の余白を詰める */
  padding: clamp(26px, 2.6vw, 36px);
  box-shadow: var(--kc-shadow-sm);
}
.kc-price-card--accent { border-color: var(--kc-blue); box-shadow: var(--kc-shadow-md); }
.kc-price-name {
  font-family: var(--kc-font-serif);
  font-size: 1.28rem;
  font-weight: 600;
  color: var(--kc-blue-deep);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--kc-border);
}
.kc-price-main {
  margin-top: 18px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--kc-ink);
}
.kc-price-num { font-family: var(--kc-font-en); font-size: 2.4rem; font-weight: 600; margin-right: 2px; }
.kc-price-sub { margin-top: 12px; color: var(--kc-text-muted); font-size: 0.97rem; }
.kc-price-tag {
  margin-top: 16px;
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--kc-blue-soft);
  color: var(--kc-blue-deep);
  font-weight: 700;
  font-size: 0.9rem;
}
.kc-price-link {
  margin-top: 18px;
  display: inline-flex;
  gap: 6px;
  color: var(--kc-blue);
  font-weight: 700;
}
.kc-price-link:hover { color: var(--kc-blue-deep); }
.kc-price-link span { transition: transform 0.2s ease; }
.kc-price-link:hover span { transform: translateX(4px); }
.kc-price-note {
  margin-top: clamp(24px, 2.6vw, 32px);
  text-align: center;
  color: var(--kc-text-muted);
  font-size: 0.88rem;
}

/* ============================================================
   よくあるご質問（faq / 開閉なし・全文表示）
   ・上端の背景色は .kc-pricing の終端色（--kc-blue-softer）から始めて
     境界に色段差が出ないようにする
   ============================================================ */
.kc-faq { background: linear-gradient(180deg, var(--kc-blue-softer) 0%, #fff 100%); }
.kc-faq-list {
  margin-top: clamp(44px, 5vw, 60px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.6vw, 30px);
  max-width: 1080px;
  margin-inline: auto;
}
.kc-faq-item {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--kc-border);
  border-radius: var(--kc-radius);
  padding: clamp(26px, 2.6vw, 34px);
  box-shadow: var(--kc-shadow-sm);
}
.kc-faq-q,
.kc-faq-a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.kc-faq-q {
  font-family: var(--kc-font-serif);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.7;
  color: var(--kc-blue-deep);
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--kc-border);
}
.kc-faq-a {
  color: var(--kc-text-muted);
  font-size: 0.97rem;
}
/* Q/Aバッジ。丸を潰さないため flex-shrink:0 と等幅・等高を維持する */
.kc-faq-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--kc-blue);
  color: #fff;
  font-family: var(--kc-font-en);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
}
.kc-faq-mark--a {
  background: var(--kc-blue-soft);
  color: var(--kc-blue-deep);
}

/* ============================================================
   CTA / お問い合わせ
   ============================================================ */
.kc-contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* 画像欠損時もこのグラデで成立（フォールバック） */
  background: linear-gradient(135deg, var(--kc-blue-deep), var(--kc-ink));
  color: #fff;
}
/* 夕暮れ空の背景写真＋濃紺スクリム（白文字のコントラスト比を確保） */
.kc-contact-media {
  position: absolute;
  inset: -8%; /* パララックス(yPercent -5)で下端に隙間が出ないよう外側に拡張 */
  z-index: -1;
  overflow: hidden;
}
.kc-contact-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
}
.kc-contact-scrim {
  position: absolute;
  inset: 0;
  /* 濃紺グラデを高不透明度で重ね、白文字(#fff)で4.5:1以上を維持 */
  background: linear-gradient(135deg, rgba(26, 79, 156, 0.88), rgba(18, 51, 95, 0.94));
}
.kc-contact-inner { position: relative; text-align: center; max-width: 720px; margin-inline: auto; }
.kc-contact-title {
  font-family: var(--kc-font-serif);
  font-size: clamp(1.6rem, 3.8vw, 2.5rem);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: #fff;
}
.kc-contact-note {
  margin-top: 22px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.02rem;
  line-height: 1.95;
}
.kc-contact-actions { margin-top: 36px; }
.kc-contact .kc-btn-cta {
  background: #fff;
  color: var(--kc-blue-cta);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}
.kc-contact .kc-btn-cta:hover { background: #f2f7ff; }

/* ============================================================
   フッター
   ============================================================ */
.kc-footer {
  background: #fff;
  border-top: 1px solid var(--kc-border);
  padding-block: 40px;
}
.kc-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}
.kc-footer-brand {
  font-family: var(--kc-font-en);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--kc-ink);
}
.kc-footer-nav { display: flex; gap: 24px; flex-wrap: wrap; }
.kc-footer-nav a { color: var(--kc-text-muted); font-size: 0.92rem; transition: color 0.2s ease; }
.kc-footer-nav a:hover { color: var(--kc-blue); }
.kc-footer-copy { margin-left: auto; color: var(--kc-text-muted); font-size: 0.82rem; }

/* ============================================================
   モバイル追従CTA
   ============================================================ */
.kc-mobile-cta {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 90;
  display: none;
  text-align: center;
  padding: 15px;
  border-radius: 999px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--kc-blue-bright), var(--kc-blue-cta));
  box-shadow: 0 12px 26px rgba(23, 99, 214, 0.4);
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 900px) {
  .kc-services-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .kc-local-inner { grid-template-columns: 1fr; }
  .kc-local-map { max-width: 460px; margin-inline: auto; width: 100%; }
  .kc-local-cards { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .kc-flow-row { flex-direction: column; align-items: center; gap: 30px; }
  .kc-flow-arrow { transform: rotate(90deg); }
  .kc-flow-card { max-width: 420px; width: 100%; }
  /* 3列だとこの幅から窮屈になるため他グリッドと同じく1列に落とす */
  .kc-pricing-grid { grid-template-columns: 1fr; max-width: 460px; }
  /* 2列だとQ/Aバッジ＋本文で1行が短くなりすぎるため1列に落とす */
  .kc-faq-list { grid-template-columns: 1fr; max-width: 560px; }
}

@media (max-width: 767px) {
  .kc-nav {
    position: fixed;
    top: var(--kc-header-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 20px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--kc-shadow-md);
    transform: translateY(-140%);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    max-height: calc(100vh - var(--kc-header-h));
    overflow-y: auto;
  }
  .kc-nav.is-open { transform: translateY(0); }
  .kc-nav-link { padding: 14px 4px; border-bottom: 1px solid var(--kc-border); }
  .kc-nav-cta { margin: 14px 0 0; justify-content: center; }
  .kc-nav-toggle { display: flex; }

  /* ヒーロー：縦書き見出しをやや小さく（低い画面では高さ基準の上限も併用） */
  .kc-hero-title { font-size: clamp(1.9rem, 9vw, 3rem); }
  .kc-hero-title { font-size: min(clamp(1.9rem, 9vw, 3rem), 7.2svh); }
  .kc-hero-eyebrow { bottom: clamp(96px, 16vh, 132px); letter-spacing: 0.2em; }

  /* SCROLLインジケータは追従CTAバーと重なるためモバイルでは非表示 */
  .kc-scroll { display: none; }

  .kc-mobile-cta { display: block; }
  /* 追従CTAと重ならないよう最終セクションに余白 */
  .kc-contact { padding-bottom: calc(var(--kc-section-y) + 72px); }

  .kc-br-pc { display: none; }

  /* ============================================================
     対面サポート演出（モバイル ≤767px）
     狭い画面に地図とテキストを同時に置くと必ず重なるため、
     stage 内で「上=地図 / 下=テキスト」に分け、スクロールで主役を交代させる。
     ・フェーズ1(head): 地図ドアップ→ズームアウト。見出しのみ（地図の上に載る）
     ・フェーズ2(main): 地図を上半分へ退かせ、空いた下半分で説明を展開
     ・フェーズ3(foot): 説明を退かせ、地図を中央へ戻してピン/ルートを出す
     移動量はJS（kochi.js の buildMobileScrollAnimation）が stage 実測高さから算出する
     ============================================================ */
  html.kc-js .kc-local-map {
    opacity: 0.95; /* 地図が主役のフェーズがあるので薄くしすぎない */
  }
  /* 地図はやや大きめに。縦長画面では 150vh 側で上限を掛ける */
  html.kc-js .kc-map-rotate { width: min(112vw, 150vh); }

  /* コピーは stage 全高にまたぐ絶対配置にして、見出し=上端／説明=下端に振り分ける。
     追従CTAバー(72px)と重ならないよう下端に余白を確保する */
  html.kc-js .kc-local-copy {
    position: absolute;
    top: 8vh;
    bottom: calc(72px + 16px); /* 追従CTAバー(72px)＋余白16px */
    left: var(--kc-container-pad);
    right: var(--kc-container-pad);
    z-index: 2;
    max-width: none;
    display: flex;
    flex-direction: column;
    /* 見出し=上端に固める / 説明=margin-top:auto で下端へ寄せる。
       space-between だと見出しと説明の間に地図が入る余地が作れない */
    justify-content: flex-start;
    text-align: center;
    /* 上下に振り分ける配置なのでパネル装飾は外す（見出しは地図の上に直接載せる） */
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  /* 見出しブロック（上端）: 地図のドアップに載るので白背景側に光彩を持たせる。
     1行に収めて縦を節約する（地図と説明の場所を確保するため） */
  html.kc-js .kc-local-eyebrow,
  html.kc-js .kc-local-title {
    text-shadow: 0 1px 14px rgba(255, 255, 255, 0.9);
  }
  html.kc-js .kc-local-title { font-size: clamp(1.3rem, 6vw, 1.7rem); }

  /* 説明ブロック（下端）: 地図が退いた領域で読ませる。半透明パネルで下地から分離。
     行間・余白を詰めて、地図の退避先（上半分）を圧迫しない高さに収める */
  html.kc-js .kc-local-detail {
    margin-top: auto;
    padding: 12px 16px 14px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--kc-radius);
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  html.kc-js .kc-local-text { margin-top: 0; font-size: 0.95rem; line-height: 1.8; }
  html.kc-js .kc-local-points { margin-top: 14px; gap: 7px; justify-items: center; }
  html.kc-js .kc-local-points li { justify-content: center; text-align: left; font-size: 0.93rem; }
  html.kc-js .kc-local-points svg { width: 18px; height: 18px; }
  /* ヒントは copy の最下端に絶対配置。フレックスの縦スペースを食わないので
     説明パネルの取れる高さが減らない（＝地図の退避先を圧迫しない） */
  html.kc-js .kc-local-hint {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    margin-top: 0;
    font-size: 0.85rem;
  }

  /* 白背景に白塗りだと輪郭が見えないため、フェーズ2以降は淡青＋濃い輪郭にする
     （フェーズ1のドアップ中は共通ルールの白のまま） */
  html.kc-js .kc-local-map.is-zoomed .kc-map-shape {
    fill: rgba(26, 79, 156, 0.1);                                  /* = --kc-blue-deep 10% */
    fill: color-mix(in srgb, var(--kc-blue-deep) 10%, transparent);
    stroke: rgba(26, 79, 156, 0.45);
    stroke: color-mix(in srgb, var(--kc-blue-deep) 45%, transparent);
  }

  /* ピンのタップ領域を44x44px以上にする。
     min-height ではなく疑似要素で広げる（.kc-pin は translate(-50%,-100%) で
     位置決めしているため、ボックス自体を大きくすると見た目の位置がずれる） */
  html.kc-js .kc-pin::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
  html.kc-js .kc-local-points { justify-items: center; }
  html.kc-js .kc-local-points li { justify-content: center; text-align: left; }
}

@media (max-width: 400px) {
  .kc-btn-lg { padding: 15px 22px; font-size: 0.98rem; gap: 8px; }

  /* 英字eyebrowが右端で欠けないよう字間・装飾線を詰める */
  .kc-hero-eyebrow { letter-spacing: 0.14em; }
  .kc-hero-eyebrow::before { width: 26px; margin-right: 10px; }
}

/* ============================================================
   モーション配慮：演出を全停止し即時表示（保険。JS側でも制御）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kc-scroll-line::after { animation: none; }
  html.kc-js [data-reveal],
  html.kc-js [data-reveal="clip"],
  html.kc-js [data-reveal="mask"],
  html.kc-js [data-reveal="lines"],
  html.kc-js [data-reveal="frame"] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  /* 文節スパン・枠内imgも最終状態（表示済み・scale 1・ぼけなし）で静止させる */
  html.kc-js [data-reveal="lines"] > .nb,
  html.kc-js [data-reveal="frame"] img,
  html.kc-js .kc-service-media img,
  html.kc-js .kc-local-card-media img {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}