@charset "UTF-8";
/* ==========================================================================
   コーティングG 公式サイト — スタイルシート
   デザインは支給された参考サイトのトーン（淡いシアン地 × ほぼ白のカード ×
   余白多め × 極小アイブロウラベル）に準拠。配色はロゴ coatingG のティール
   グラデーション（#208696〜#42BDC7）を基準にしています。

   目次
     01. デザイントークン
     02. ベース・リセット
     03. 共通レイアウト（コンテナ・セクション）
     04. 共通パーツ（アイブロウ・見出し・ボタン・カード・注記）
     05. ヘッダー
     06. ファーストビュー
     07. 信頼バー（実績ダイジェスト）
     08. コーティングGとは（動画）
     09. 選ばれる理由ダイジェスト
     10. サービス一覧
     11. 施工事例
     12. お客様の声
     13. 料金ダイジェスト
     14. 施工の流れ
     15. FAQ
     16. コラム
     17. 店舗情報・CTA帯
     18. フッター
     19. スマホ固定CTA
     20. モーション
   ========================================================================== */


/* ==========================================================================
   01. デザイントークン
   値は参考サイトのスクリーンショットを実測して抽出したもの
   ========================================================================== */
:root {
  /* 地 */
  --bg-base: #F2FCFD;
  --bg-glow: #D2F6FB;          /* 右上に置く淡いシアンの光 */
  --surface: #FAFEFE;          /* カード・パネル（ほぼ白） */
  --surface-alt: #F4F8F9;      /* 情報ストリップ・テーブル地 */

  /* 線 */
  --line: #DFEDEF;             /* カード枠・区切り線 */
  --line-strong: #C9E2E5;      /* テーブル罫線など少し濃いめ */

  /* 文字 */
  --ink: #102126;              /* 見出し・本文 */
  --muted: #566A6F;            /* 補助テキスト */
  --faint: #86999E;            /* 注記・キャプション */

  /* アクセント */
  --accent: #37E0E0;           /* ミントシアン：主CTA塗り・ドット */
  --accent-soft: #B9F3F3;      /* ホバー地・タグ */
  --accent-ink: #00313A;       /* ミント上に乗る文字 */
  --brand: #208696;            /* ロゴ濃色：数値強調・リンク */
  --brand-deep: #14606D;
  --line-green: #06C755;       /* LINEボタン専用 */

  /* レイアウト */
  --header-h: 76px;            /* 追従ヘッダーの高さ。ドロワーの開始位置と共有する */
  --container: 1280px;
  --container-narrow: 1040px;
  --radius: 10px;
  --radius-lg: 16px;
  --section-pad: clamp(72px, 8.5vw, 148px);
  --gutter: clamp(20px, 4vw, 48px);

  /* タイポ */
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-en: "Barlow", "Helvetica Neue", Arial, sans-serif;
}


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

html {
  scroll-behavior: smooth;
  /* 追従ヘッダーの下に見出しが隠れないようにする */
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 0.9375rem;         /* 15px */
  line-height: 1.9;
  color: var(--ink);
  background-color: var(--bg-base);
  /* 右上から差し込む淡いシアン。参考サイトの地の作り方に合わせている */
  background-image:
    radial-gradient(1100px 720px at 88% -8%, var(--bg-glow) 0%, rgba(210, 246, 251, 0) 62%),
    radial-gradient(900px 600px at 6% 4%, #FFFFFF 0%, rgba(255, 255, 255, 0) 55%);
  background-repeat: no-repeat;
  background-attachment: fixed, fixed;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
  /* 英数字を単語の途中で切らず、はみ出す場合のみ折り返す */
  overflow-wrap: break-word;
  word-break: normal;
  line-break: strict;
}

img,
video { max-width: 100%; height: auto; display: block; }

a { color: var(--brand); text-decoration: none; transition: color .2s ease, opacity .2s ease; }
a:hover { color: var(--brand-deep); }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, table { margin: 0; padding: 0; }
ul, ol { list-style: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* スクリーンリーダー専用 */
.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   03. 共通レイアウト
   ========================================================================== */
.l-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.l-container--narrow { max-width: var(--container-narrow); }

.l-section { padding-block: var(--section-pad); }

/* セクション間はヘアライン1本のみで区切る（影や塗り分けは使わない） */
.l-section + .l-section { position: relative; }
.l-section + .l-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100% - var(--gutter) * 2, var(--container));
  height: 1px;
  background: var(--line);
}


/* ==========================================================================
   04. 共通パーツ
   ========================================================================== */

/* --- アイブロウラベル（● SECTION LABEL） --- */
.c-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-en);
  font-size: 0.6875rem;         /* 11px */
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1;
  color: var(--brand);
  text-transform: uppercase;
  margin-bottom: 22px;
}

.c-eyebrow::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* --- 見出し --- */
.c-title {
  font-size: clamp(1.65rem, 2.9vw, 3.15rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--ink);
}

/* カテゴリ別詳細・中間CTAなど、セクション見出しより一段下の階層 */
.c-title--sm { font-size: clamp(1.375rem, 2.1vw, 2.125rem); }

.c-title--hero {
  /* 360px幅でも1920px幅でも「気に入って選んだものを」が1行に収まる値。
     上限は左カラム幅（約618px）÷ 11文字から逆算している */
  font-size: clamp(1.7rem, 7.2vw, 3.2rem);
  line-height: 1.38;
  letter-spacing: .005em;
}

.c-lead {
  margin-top: 24px;
  max-width: 42em;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 2;
}

/* セクション見出しブロック（アイブロウ＋見出し＋リード） */
.c-sectionhead { margin-bottom: clamp(36px, 4vw, 60px); }
.c-sectionhead .c-lead { margin-top: 20px; }

/* --- ボタン --- */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 30px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.4;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

.c-btn:hover { transform: translateY(-2px); }

/* 主CTA：LINE。CV導線のためLINEブランド色を使用 */
.c-btn--line {
  background: var(--line-green);
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(6, 199, 85, .22);
}
.c-btn--line:hover { background: #05B44D; color: #FFFFFF; box-shadow: 0 10px 24px rgba(6, 199, 85, .28); }

/* 準主CTA：サイトのアクセント（ミント塗り＋濃ティール文字） */
.c-btn--accent {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 6px 18px rgba(55, 224, 224, .28);
}
.c-btn--accent:hover { background: #23D6D6; color: var(--accent-ink); box-shadow: 0 10px 24px rgba(55, 224, 224, .34); }

/* 副CTA：白地＋極薄枠 */
.c-btn--ghost {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.c-btn--ghost:hover { background: #FFFFFF; color: var(--ink); border-color: var(--brand); }

/* 濃い地のCTA帯に置く副ボタン */
.c-btn--onDark {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, .55);
}
.c-btn--onDark:hover { background: rgba(255, 255, 255, .12); color: #FFFFFF; border-color: #FFFFFF; }

.c-btn--sm { min-height: 44px; padding: 0 22px; font-size: 0.8125rem; }

.c-btn__icon { flex: none; width: 17px; height: 17px; fill: currentColor; }

.c-btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

/* テキストリンク（→付き） */
.c-textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--brand);
}
.c-textlink::after {
  content: "";
  width: 16px; height: 1px;
  background: currentColor;
  transition: width .2s ease;
}
.c-textlink:hover::after { width: 26px; }

.c-center { text-align: center; }
/* 語の途中で改行させたくない箇所（ブランド名など）に付ける */
.u-nobr { white-space: nowrap; }
.c-center .c-btnrow { justify-content: center; }

/* --- カード --- */
.c-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 26px 28px;
  transition: border-color .25s ease, transform .25s ease;
}

a.c-card:hover,
.c-card--hover:hover { border-color: var(--accent); transform: translateY(-3px); }

.c-card__label {
  font-family: var(--font-en);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--brand);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.c-card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
}

.c-card__text {
  margin-top: 10px;
  font-size: 0.8125rem;
  line-height: 1.95;
  color: var(--muted);
}

/* カード内の写真 */
.c-card__media {
  margin: -26px -26px 20px;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  background: var(--surface-alt);
  aspect-ratio: 4 / 3;
}
.c-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
a.c-card:hover .c-card__media img { transform: scale(1.04); }

/* --- グリッド --- */
.c-grid { display: grid; gap: 20px; }
.c-grid--2 { grid-template-columns: repeat(2, 1fr); }
.c-grid--3 { grid-template-columns: repeat(3, 1fr); }
.c-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* --- 注記 --- */
.c-note {
  margin-top: 18px;
  font-size: 0.75rem;
  line-height: 1.85;
  color: var(--faint);
}

/* --- 数値表示 --- */
.c-figure {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-en);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
}
.c-figure__num { font-size: clamp(1.75rem, 2.4vw, 2.375rem); line-height: 1.1; }
/* 「25cm → 75cm」のように長い数値は、カード幅で折り返さないよう一段小さくする */
.c-figure--range .c-figure__num { font-size: clamp(1.375rem, 1.9vw, 1.875rem); }
.c-figure__unit { font-size: 0.9375rem; font-weight: 600; color: var(--brand); }

/* --- データテーブル --- */
.c-table {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.875rem;
}
.c-table th,
.c-table td {
  padding: 16px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.c-table tr:last-child th,
.c-table tr:last-child td { border-bottom: 0; }
.c-table th {
  width: 30%;
  font-weight: 700;
  background: var(--surface-alt);
  color: var(--ink);
  white-space: nowrap;
}


/* ==========================================================================
   05. ヘッダー
   ========================================================================== */
.p-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  background: rgba(242, 252, 253, .78);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background-color .3s ease;
}
.p-header.is-scrolled {
  border-bottom-color: var(--line);
  background: rgba(247, 253, 253, .92);
}

.p-header__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: var(--header-h);
}

.p-header__logo { flex: none; display: block; }
.p-header__logo img { width: clamp(124px, 13vw, 158px); height: auto; }

/* LPのためグローバルナビは持たない。出口はLINEと電話だけに絞る */
.p-header__cta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  margin-left: auto;
}

.p-header__tel { text-align: right; line-height: 1.35; }
.p-header__tel a {
  font-family: var(--font-en);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink);
}
.p-header__tel span { display: block; font-size: 0.625rem; color: var(--faint); letter-spacing: .02em; }

/* スマホ用のアイコンのみの電話ボタン（PCでは電話番号を出すので非表示） */
.p-header__icon {
  display: none;
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  place-items: center;
}
.p-header__icon svg { width: 19px; height: 19px; fill: var(--ink); }


/* ==========================================================================
   06. ファーストビュー
   ========================================================================== */
.p-hero { padding-block: clamp(48px, 6vw, 96px) clamp(56px, 6vw, 90px); }

.p-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 4vw, 60px);
  align-items: center;
}

.p-hero__lead {
  margin-top: 28px;
  max-width: 30em;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 2.05;
}

/* --- 写真クラスター --------------------------------------------------------
   支給素材の解像度が低いため、1枚を大きく引き伸ばさず、
   主カット＋素材感カット2枚を重ねる構成にしている
   ------------------------------------------------------------------------ */
.p-hero__visual {
  position: relative;
  aspect-ratio: 1 / 0.94;
}

.p-hero__shot {
  position: absolute;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-alt);
  box-shadow: 0 18px 44px rgba(16, 33, 38, .1);
}
.p-hero__shot img { width: 100%; height: 100%; object-fit: cover; }

.p-hero__shot--main {
  top: 0; right: 0;
  width: 74%; height: 72%;
}
.p-hero__shot--leather {
  left: 0; bottom: 0;
  width: 46%; height: 48%;
  border: 5px solid var(--bg-base);
}

/* 浮かせるデータチップ */
.p-hero__chip {
  position: absolute;
  left: 0;
  top: 16%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(16, 33, 38, .08);
  backdrop-filter: blur(6px);
}
.p-hero__chip strong {
  font-family: var(--font-en);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .01em;
}
.p-hero__chip span { font-size: 0.6875rem; color: var(--faint); line-height: 1.5; }

/* ファーストビュー直下の要点バッジ。スマホの一画面内に「何の店か」が収まるよう
   短い語だけを並べる */
.p-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}
.p-hero__badges span {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--line);
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.6;
}


/* ==========================================================================
   07. 共感・課題
   ========================================================================== */
.p-problem__close {
  margin-top: clamp(28px, 3vw, 40px);
  max-width: none;
}


/* ==========================================================================
   08. コーティングGとは（動画）
   ========================================================================== */
.p-about__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  padding: clamp(28px, 3.4vw, 52px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .55));
  /* 参考サイトのパネルに合わせた極薄グリッド */
  background-image:
    linear-gradient(rgba(32, 134, 150, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 134, 150, .045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .52));
  background-size: 34px 34px, 34px 34px, 100% 100%;
}

/* --- 動画ファサード（クリックするまで動画を読み込まない） --- */
.p-video {
  position: relative;
  /* 支給動画（960×540）と同じ比率にして、再生時に切り取られないようにする */
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(140deg, #0E4A55 0%, #1B7C8B 48%, #3FC3CC 100%);
  border: 0;
  width: 100%;
  display: block;
  color: #FFFFFF;
  text-align: left;
}

.p-video::after {
  /* 表面の光沢。コーティングの被膜イメージ */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 78% 12%, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}

.p-video__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 74px; height: 74px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  display: grid;
  place-items: center;
  transition: transform .25s ease, background-color .25s ease;
}
.p-video__play svg { width: 22px; height: 22px; fill: var(--brand-deep); margin-left: 3px; }
.p-video:hover .p-video__play { transform: translate(-50%, -50%) scale(1.08); background: #FFFFFF; }

.p-video__caption {
  position: absolute;
  left: 24px; right: 24px; bottom: 22px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: .02em;
  z-index: 1;
}
.p-video__caption span {
  display: block;
  margin-top: 4px;
  font-size: 0.6875rem;
  font-weight: 400;
  color: rgba(255, 255, 255, .78);
}

.p-video video { width: 100%; height: 100%; object-fit: cover; }


/* ==========================================================================
   09. 選ばれる理由ダイジェスト
   ========================================================================== */
.p-reason__card { display: flex; flex-direction: column; }
.p-reason__card .c-figure { margin-bottom: 14px; }
.p-reason__source {
  margin-top: auto;
  padding-top: 16px;
  font-size: 0.6875rem;
  color: var(--faint);
  line-height: 1.7;
}


/* ==========================================================================
   10. サービス一覧
   ========================================================================== */
.p-service__grid { grid-template-columns: repeat(3, 1fr); }

.p-service__card { display: flex; flex-direction: column; }
.p-service__card .c-card__text { flex: 1; }

.p-service__more {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  background:
    linear-gradient(150deg, rgba(55, 224, 224, .16) 0%, rgba(32, 134, 150, .06) 100%);
  border-color: var(--accent-soft);
  text-align: left;
}
.p-service__more .c-card__title { font-size: 1.125rem; }
.p-service__more .c-btn { align-self: flex-start; }


/* ==========================================================================
   11. 施工事例
   ========================================================================== */
.p-works__grid { grid-template-columns: repeat(3, 1fr); }

.p-works__card { padding: 0; overflow: hidden; }
.p-works__card .c-card__media { margin: 0; border-radius: 0; aspect-ratio: 3 / 2; }
.p-works__body { padding: 20px 22px 24px; }


/* ==========================================================================
   12. カテゴリ別詳細（5カテゴリ・写真とテキストを交互に配置）
   ========================================================================== */
.p-detail__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 68px);
  align-items: center;
  /* 追従ヘッダーの下に見出しが潜らないよう、アンカー着地位置をずらす */
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.p-detail__item + .p-detail__item { margin-top: clamp(56px, 7vw, 112px); }

/* 偶数番は写真を右へ。単調な繰り返しに見えないようにする */
.p-detail__item--rev .p-detail__media { order: 2; }

.p-detail__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-alt);
  aspect-ratio: 4 / 3;
}
.p-detail__media img { width: 100%; height: 100%; object-fit: cover; }

.p-detail__spec {
  margin-top: 28px;
  border-top: 1px solid var(--line);
}
.p-detail__spec dt {
  margin-top: 16px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--brand);
}
.p-detail__spec dd {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  line-height: 1.9;
  color: var(--muted);
}

/* --- 車・バイクの詳細だけは施工可否と使用薬剤を併記するため、
       写真＋本文の下に全幅の補足ブロックを敷く --- */
.p-detail__extra {
  grid-column: 1 / -1;
  margin-top: clamp(30px, 3.6vw, 48px);
  padding-top: clamp(30px, 3.6vw, 48px);
  border-top: 1px solid var(--line);
}
.p-detail__extra .c-card { height: 100%; }

.p-detail__cardhead {
  margin: 0 0 13px;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
}

.p-detail__list { margin: 0; padding: 0; list-style: none; }
.p-detail__list li {
  position: relative;
  padding-left: 16px;
  font-size: 0.8125rem;
  line-height: 1.9;
  color: var(--muted);
}
.p-detail__list li + li { margin-top: 7px; }
/* 行頭の点はベタ塗り＋角丸の円で表現する（アイコン画像は使わない） */
.p-detail__list li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--accent);
}
.p-detail__list--ng li::before { background-color: var(--line-strong); }
.p-detail__list b {
  font-weight: 700;
  color: var(--ink);
}

.p-detail__extranote {
  margin: 14px 0 0;
  font-size: 0.75rem;
  line-height: 1.85;
  color: var(--faint);
}
/* 文中に置くリンク。.c-textlink は末尾に線が入るため、ここでは使わない */
.p-detail__back {
  grid-column: 1 / -1;
  margin: 22px 0 0;
  font-size: 0.8125rem;
}
.p-detail__back a {
  color: var(--brand);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.p-detail__extranote a {
  color: var(--brand);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ==========================================================================
   13. 料金表
   ========================================================================== */
.c-table--price th[scope="col"] { width: auto; }
.c-table--price thead th {
  font-size: 0.75rem;
  letter-spacing: .08em;
  color: var(--brand);
  background: var(--surface-alt);
}
.c-table--price tbody th { width: 46%; }

.c-price {
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
}
.c-price__sub { margin-left: 4px; font-size: 0.8125rem; color: var(--muted); }


/* ==========================================================================
   14. 施工の流れ
   ========================================================================== */
.p-flow__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.p-flow__item {
  position: relative;
  padding: 24px 20px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.p-flow__step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-en);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--brand);
  margin-bottom: 14px;
}
.p-flow__step::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--accent);
}

/* 項目間をつなぐ矢印 */
.p-flow__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -12px;
  width: 8px; height: 8px;
  border-top: 1.5px solid var(--line-strong);
  border-right: 1.5px solid var(--line-strong);
  transform: translateY(-50%) rotate(45deg);
}


/* ==========================================================================
   15. FAQ
   ========================================================================== */
.p-faq__list { display: grid; gap: 12px; }

.p-faq__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .25s ease;
}
.p-faq__item.is-open { border-color: var(--accent); }

.p-faq__q {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: 22px 24px;
  text-align: left;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--ink);
}

/* Q・Aの識別記号。Barlowだと Q が 0 に見えるため日本語フォント側の字形を使う */
.p-faq__mark {
  flex: none;
  width: 1.1em;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--brand);
  line-height: 1.7;
}

.p-faq__icon {
  flex: none;
  margin-left: auto;
  position: relative;
  width: 16px; height: 16px;
  margin-top: 6px;
}
.p-faq__icon::before,
.p-faq__icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--brand);
  transition: transform .3s ease;
}
.p-faq__icon::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
.p-faq__icon::after { width: 1.5px; height: 14px; transform: translate(-50%, -50%); }
.p-faq__item.is-open .p-faq__icon::after { transform: translate(-50%, -50%) scaleY(0); }

.p-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.p-faq__item.is-open .p-faq__a { grid-template-rows: 1fr; }
.p-faq__a > div { overflow: hidden; }

.p-faq__atext {
  display: flex;
  gap: 16px;
  padding: 0 24px 24px;
  font-size: 0.875rem;
  line-height: 1.95;
  color: var(--muted);
}


/* ==========================================================================
   16. CTA帯（中間・最終）
   薄い地の中で最も強いコントラストを持たせ、スクロール中に必ず目に入るようにする
   ========================================================================== */
.p-ctaband {
  position: relative;
  padding-block: clamp(56px, 7vw, 104px);
  margin-block: clamp(48px, 6vw, 96px);
  color: #FFFFFF;
  text-align: center;
  background: linear-gradient(140deg, #0E4A55 0%, #1B7C8B 52%, #2FAEB8 100%);
  overflow: hidden;
}
/* 被膜の光沢を思わせるハイライト */
.p-ctaband::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 70% at 82% 8%, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 58%);
  pointer-events: none;
}
.p-ctaband > * { position: relative; z-index: 1; }

.p-ctaband .c-title { color: #FFFFFF; }

.p-ctaband__lead {
  margin: 22px auto 0;
  max-width: 42em;
  font-size: 0.9375rem;
  line-height: 2;
  color: rgba(255, 255, 255, .86);
}

.p-ctaband__btns { justify-content: center; }

.p-ctaband__note {
  margin-top: 20px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, .7);
}

/* 最終CTAはフッター直前なので、下の余白を詰める */
.p-ctaband--last { margin-bottom: 0; }


/* ==========================================================================
   17. 店舗情報・CTA帯
   ========================================================================== */
.p-shop__table { margin-top: 28px; }

.p-shop__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.p-shop__map {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  background: var(--surface-alt);
}
.p-shop__map iframe { width: 100%; height: 100%; border: 0; display: block; }


/* ==========================================================================
   18. フッター
   ========================================================================== */
.p-footer {
  margin-top: clamp(64px, 7vw, 110px);
  border-top: 1px solid var(--line);
  padding-block: clamp(48px, 5vw, 76px) 0;
}

.p-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.5vw, 48px);
}

.p-footer__logo img { width: 150px; }
.p-footer__address {
  margin-top: 20px;
  font-size: 0.75rem;
  line-height: 2;
  color: var(--muted);
  font-style: normal;
}

.p-footer__heading {
  font-family: var(--font-en);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--brand);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.p-footer__links { display: grid; gap: 11px; }
.p-footer__links a { font-size: 0.8125rem; color: var(--ink); }
.p-footer__links a:hover { color: var(--brand); }

.p-footer__bottom {
  margin-top: clamp(40px, 4vw, 60px);
  padding-block: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.6875rem;
  color: var(--faint);
}
.p-footer__bottom a { color: var(--faint); }


/* ==========================================================================
   19. スマホ固定CTA
   ========================================================================== */
.p-stickycta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(247, 253, 253, .94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.p-stickycta .c-btn { flex: 1; min-height: 50px; padding: 0 12px; }
/* ファーストビューのボタンと重ならないよう、JSが is-shown を付けるまで隠す */
.p-stickycta {
  transform: translateY(100%);
  transition: transform .3s ease;
}
.p-stickycta.is-shown { transform: none; }


/* ==========================================================================
   20. モーション
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}


/* ==========================================================================
   レスポンシブ
   ========================================================================== */

/* --- タブレット --- */
@media (max-width: 1080px) {
  :root { --header-h: 68px; }

  /* 電話番号のテキスト表記はアイコンボタンへ置き換える */
  .p-header__tel { display: none; }
  .p-header__icon { display: grid; }

  .p-hero__inner { grid-template-columns: 1fr; gap: 44px; }
  .p-hero__visual { max-width: 560px; margin-inline: auto; width: 100%; }

  .p-about__panel,
  .p-shop__grid { grid-template-columns: 1fr; }

  /* 写真とテキストの左右交互は崩し、写真を常に上へ */
  .p-detail__item { grid-template-columns: 1fr; gap: 26px; }
  .p-detail__item--rev .p-detail__media { order: 0; }
  .p-detail__media { max-height: 380px; }

  .c-grid--4 { grid-template-columns: repeat(2, 1fr); }

  .p-flow__list { grid-template-columns: repeat(3, 1fr); }
  .p-flow__item:nth-child(3)::after { display: none; }

  .p-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* --- スマートフォン --- */
@media (max-width: 767px) {
  /* 下部固定CTAの高さぶんだけ余白を確保する */
  body { font-size: 0.875rem; padding-bottom: 76px; }

  :root { --header-h: 62px; }

  .p-header__inner { gap: 10px; }
  /* ボタン内の文言は省き、アイコンだけにする */
  .p-header__ctatext { display: none; }
  .p-header__cta .c-btn--sm { min-height: 44px; padding: 0 16px; }

  .p-hero { padding-block: 30px 40px; }
  .p-hero__visual { aspect-ratio: 1 / 0.8; }
  .p-hero__chip { padding: 10px 15px; gap: 9px; top: 10%; }
  .p-hero__chip strong { font-size: 0.9375rem; }
  .p-hero__chip span { font-size: 0.625rem; }
  .p-hero__shot--main { width: 82%; height: 80%; }
  .p-hero__shot--leather { width: 44%; height: 42%; }
  .p-hero__badges { gap: 6px; margin-top: 22px; }
  .p-hero__badges span { padding: 5px 11px; font-size: 0.6875rem; }

  .c-btnrow { gap: 10px; }
  .c-btnrow .c-btn { flex: 1 1 100%; }

  .c-grid--2,
  .c-grid--3,
  .c-grid--4,
  .p-service__grid { grid-template-columns: 1fr; }

  /* 施工事例は写真が主役のため、スマホでも2列に並べて縦の長さを抑える */
  .p-works__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .p-works__body { padding: 12px 13px 15px; }
  .p-works__card .c-card__title { font-size: 0.875rem; }
  .p-works__card .c-card__text { font-size: 0.75rem; line-height: 1.7; }

  .p-flow__list { grid-template-columns: 1fr; }
  .p-flow__item::after { display: none !important; }

  .p-detail__media { aspect-ratio: 3 / 2; max-height: none; }
  .p-detail__spec { margin-top: 22px; }
  .p-detail__extra { margin-top: 26px; padding-top: 26px; }

  .c-card { padding: 22px 20px 24px; }
  .c-card__media { margin: -22px -20px 18px; }
  /* 写真を全面に出すカードは、上の .c-card 指定に上書きされないよう再指定する */
  .p-works__card { padding: 0; }
  .p-works__card .c-card__media { margin: 0; }

  .c-table th,
  .c-table td { padding: 13px 15px; font-size: 0.8125rem; }
  .c-price { font-size: 1.25rem; }

  /* 料金表は右カラムが狭く4行折り返しになるため、スマホでは縦積みにする */
  .c-table--price,
  .c-table--price tbody,
  .c-table--price tr { display: block; }
  .c-table--price thead { display: none; }
  .c-table--price tbody th,
  .c-table--price tbody td {
    display: block;
    width: auto;
    white-space: normal;
    border-bottom: 0;
  }
  .c-table--price tbody th { padding: 14px 15px 0; background: transparent; }
  .c-table--price tbody td { padding: 4px 15px 14px; color: var(--muted); }
  .c-table--price tbody tr + tr { border-top: 1px solid var(--line); }

  .p-footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .p-footer__bottom { justify-content: flex-start; }

  .p-stickycta { display: flex; }
}

/* --- 印刷 --- */
@media print {
  .p-header, .p-stickycta, .p-ctaband { display: none !important; }
  body { background: #FFFFFF; }
}