/* ==========================================================
     0. Design tokens
     明るい印象への刷新版。地色は白・オフホワイトを基調にし、
     黒はヘッダー/フッターの帯だけに絞って「締め」として使う。
     赤はCTAと数字・アイコンなど「意思決定を後押しする箇所」に
     集中して使い、ページ全体のエネルギーを保つ。
     ========================================================== */
  :root{
    --c-bg:        #FFFFFF;
    --c-bg-soft:   #F6F4F1; /* セクション交互用のごく薄い暖色グレー */
    --c-ink:       #1A1B1F; /* 見出し・本文の基本色(純黒は使わない) */
    --c-ink-soft:  #5C6270; /* 本文サブ */
    --c-ink-faint: #9498A2; /* 補助・キャプション */
    --c-line:      #E7E4DF;
    --c-charcoal:  #17181C; /* ヘッダー/フッターのみで使用 */
    --c-charcoal-text: #C7CAD1;
    --c-white:     #FFFFFF;
    --c-accent:    #D72638;
    --c-accent-deep:#9F1D2A;
    --c-accent-tint: rgba(215,38,56,.08);
    --c-accent-tint-strong: rgba(215,38,56,.16);

    --font-display: 'Zen Kaku Gothic New','Noto Sans JP',system-ui,-apple-system,'Hiragino Kaku Gothic ProN',sans-serif;
    --font-body: 'Noto Sans JP',system-ui,-apple-system,'Hiragino Kaku Gothic ProN',sans-serif;

    --max-w: 1120px;
    --pad-x: clamp(20px, 5vw, 48px);
    --radius: 4px;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  }
  body{
    margin:0;
    background: var(--c-bg);
    color: var(--c-ink-soft);
    font-family: var(--font-body);
    font-feature-settings:"palt";
    line-height:1.85;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  img,svg{ display:block; max-width:100%; }
  a{ color:inherit; }
  h1,h2,h3,h4{
    font-family:var(--font-display);
    color:var(--c-ink);
    margin:0 0 .6em;
    line-height:1.4;
    text-wrap:balance;
    letter-spacing:.01em;
  }
  p{ margin:0 0 1em; }
  ul{ margin:0; padding:0; list-style:none; }
  button{ font-family:inherit; }

  .container{ max-width:var(--max-w); margin:0 auto; padding-left:var(--pad-x); padding-right:var(--pad-x); }

  .section{ padding: clamp(56px,9vw,104px) 0; position:relative; }
  .section--white{ background:var(--c-bg); }
  .section--soft{ background:var(--c-bg-soft); }

  .eyebrow{
    display:inline-flex; align-items:center; gap:.6em;
    font-size:.85rem; font-weight:700; letter-spacing:.14em;
    color:var(--c-accent); margin-bottom:1.1em;
  }
  .eyebrow::before{ content:""; width:22px; height:2px; background:var(--c-accent); display:inline-block; }

  .h2{ font-size:clamp(1.5rem,3.6vw,2.3rem); font-weight:900; }
  .lead{ font-size:clamp(1rem,2vw,1.1rem); max-width:640px; color:var(--c-ink-soft); }

  /* ---- CTA button ---- */
  .cta{
    display:inline-flex; align-items:center; justify-content:center; gap:.5em;
    background:linear-gradient(180deg,var(--c-accent),var(--c-accent-deep));
    color:var(--c-white); font-weight:700; font-size:1.08rem;
    padding:1.1em 2.05em; border-radius:var(--radius); text-decoration:none;
    box-shadow:0 10px 24px -12px rgba(215,38,56,.5);
    border:1px solid rgba(255,255,255,.1);
    transition:transform .18s ease, box-shadow .18s ease;
    white-space:nowrap;
  }
  .cta:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(215,38,56,.6); }
  .cta:active{ transform:translateY(0); }
  .cta--ghost{
    background:transparent; box-shadow:none; color:var(--c-ink);
    border:1px solid var(--c-line-strong,#D8D4CE); font-weight:700;
  }
  .cta--ghost:hover{ border-color:var(--c-accent); color:var(--c-accent); }
  .cta--on-dark{ }
  .cta-note{ font-size:.88rem; color:var(--c-ink-faint); margin-top:.9em; }
  .cta-note ul{ display:flex; flex-wrap:wrap; gap:.4em 1.2em; }
  .cta-note li{ position:relative; padding-left:1.1em; }
  .cta-note li::before{ content:"✓"; position:absolute; left:0; color:var(--c-accent); }

  /* ---- Header(締め=黒) ---- */
  .site-header{
    position:sticky; top:0; z-index:50;
    background:rgba(23,24,28,.92); backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:14px; padding-bottom:14px; }
  .brand{ display:flex; flex-direction:column; line-height:1.2; text-decoration:none; }
  .brand strong{ font-family:var(--font-display); color:var(--c-white); font-weight:700; font-size:1rem; letter-spacing:.02em; }
  .brand span{ font-size:.74rem; color:var(--c-charcoal-text); letter-spacing:.06em; }
  .header-ctas{ display:flex; align-items:center; gap:10px; }
  .site-header .cta{ padding:.78em 1.3em; font-size:.92rem; }
  /* ヘッダーに2つ並んだCTAが画面幅に収まりきらない場合は、ブランド名の下に折り返して
     横スクロールが出ないようにする(現状は暫定対応。レスポンシブの本格調整は別途対応予定) */
  @media(max-width:640px){
    .site-header .container{ flex-wrap:wrap; row-gap:10px; }
    .header-ctas{ width:100%; }
    .header-ctas .cta{ flex:1 1 0; padding-left:.7em; padding-right:.7em; font-size:.82rem; }
  }

  /* LINE用CTA(公式LINEカラーで、通常のCTAとひと目で区別できるようにする) */
  .cta--line{
    background:linear-gradient(180deg,#06C755,#04a648);
    box-shadow:0 10px 24px -12px rgba(6,199,85,.55);
  }
  .cta--line:hover{ box-shadow:0 14px 28px -10px rgba(6,199,85,.65); }
  .line-badge{
    display:inline-flex; align-items:center; justify-content:center; flex:none;
    width:30px; height:17px; border-radius:4px; background:var(--c-white);
    color:#06C755; font-size:.62rem; font-weight:800; letter-spacing:-.02em;
  }

  /* ---- Hero(明るく) ---- */
  .hero{ padding-top:clamp(28px,7vw,88px); padding-bottom:clamp(36px,8vw,88px); background:var(--c-bg); overflow:hidden; position:relative; }
  /* スマホ幅でも「見出し左・スマホ画像右」の2カラムを維持する。
     画像側の幅は clamp() で画面幅にゆるやかに追従させつつ上限を抑え(PCで大きくなりすぎないように)、
     見出し側(1fr)に幅を優先的に残すことで、見出しの改行を「距離は、/信用に勝てない。」の1回だけに保つ。 */
  .hero-grid{
    display:grid; grid-template-columns:1fr clamp(88px,24vw,300px); gap:16px;
    grid-template-areas:"head photo" "rest photo";
    align-items:start; position:relative; z-index:2;
  }
  .hero-head{ grid-area:head; min-width:0; }
  .hero-photo-col{ grid-area:photo; min-width:0; }
  .hero-rest{ grid-area:rest; min-width:0; }
  @media(min-width:520px){ .hero-grid{ gap:28px; } }
  @media(min-width:900px){ .hero-grid{ gap:56px; align-items:center; } }
  .hero-kicker{ font-size:.85rem; font-weight:700; letter-spacing:.12em; color:var(--c-ink-faint); margin-bottom:1.2em; }
  .hero-kicker b{ color:var(--c-ink); }
  .hero h1{ font-size:clamp(1.45rem,7vw,3.9rem); font-weight:900; letter-spacing:.01em; margin-bottom:0; }
  .hero h1 .accent{ color:var(--c-accent); }
  .hero .lead{ max-width:560px; font-size:clamp(1rem,2vw,1.15rem); margin-top:.9em; }
  .hero-ctas{ margin-top:1.8em; display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
  /* タグは折り返して縦積みにならないよう、常に1行(必要ならその場だけ横スクロール)で表示する */
  .hero-tags{ display:flex; flex-wrap:nowrap; gap:.5em; margin-top:2em; overflow-x:auto; padding-bottom:2px; -webkit-overflow-scrolling:touch; }
  .hero-tags span{ flex:0 0 auto; white-space:nowrap; font-size:.82rem; color:var(--c-ink-soft); border:1px solid var(--c-line); background:var(--c-bg-soft); padding:.4em .8em; border-radius:99px; }
  /* 幅が狭い間はCTAボタンの文言を折り返し可にして、はみ出し(横スクロール)を防ぐ */
  @media(max-width:519px){ .hero-ctas .cta{ white-space:normal; text-align:center; padding:.9em 1.3em; } }

  /* ---- ヒーロー右: スマホ実機イメージ(背景透過の切り抜き画像をそのまま浮かせて配置。カラム幅いっぱいまで表示) ---- */
  .hero-photo-col{ display:flex; justify-content:center; padding-top:.2em; }
  @media(min-width:900px){ .hero-photo-col{ justify-content:flex-end; } }
  .hero-phone{ display:block; width:100%; height:auto; filter:drop-shadow(0 14px 26px rgba(23,24,28,.16)); }

  /* ---- ヒーロー背景装飾: 車のシルエットライン画(静的・視認性強め、常時表示) ---- */
  .hero-car{ position:absolute; z-index:1; pointer-events:none; right:-20px; bottom:-10px; width:320px; opacity:.22; display:block; }
  .hero-car img{ display:block; width:100%; height:auto; }
  @media(min-width:480px){ .hero-car{ width:400px; } }
  @media(min-width:700px){ .hero-car{ width:560px; } }
  @media(min-width:900px){ .hero-car{ width:760px; } }
  @media(min-width:1300px){ .hero-car{ width:860px; right:-10px; } }

  /* ---- Placeholder image blocks(明るいグレー) ---- */
  .ph{
    position:relative; width:100%; border-radius:var(--radius);
    background:var(--c-bg-soft);
    border:1px solid var(--c-line);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7em;
    color:var(--c-ink-faint); text-align:center; padding:1.5em;
    overflow:hidden;
  }
  .ph svg{ width:34px; height:34px; stroke:var(--c-accent); opacity:.9; }
  .ph-label{ font-size:.84rem; letter-spacing:.03em; position:relative; z-index:1; }
  .ph-label b{ display:block; color:var(--c-ink-soft); font-size:.88rem; margin-bottom:.15em; }
  .ph--16-9{ aspect-ratio:16/9; }
  .ph--4-5{ aspect-ratio:4/5; }
  .ph--1-1{ aspect-ratio:1/1; }

  /* ---- CTA band ---- */
  .cta-band{ background:linear-gradient(90deg,var(--c-accent-deep),var(--c-accent)); padding:26px 0; }
  .cta-band .container{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
  .cta-band p{ margin:0; color:#fff; font-weight:700; font-size:clamp(1.1rem,2.4vw,1.4rem); }
  .cta-band .cta{ background:#fff; color:var(--c-accent-deep); box-shadow:none; border:none; }
  .cta-band .cta:hover{ background:#f6f6f6; box-shadow:none; }

  /* ---- 課題カード(番号+アイコンを添えた、控えめなアウトラインカード) ---- */
  .challenge-grid{ display:grid; grid-template-columns:1fr; gap:16px; margin:2.4em 0 0; }
  @media(min-width:640px){ .challenge-grid{ grid-template-columns:1fr 1fr; gap:18px; } }
  @media(min-width:1000px){ .challenge-grid{ grid-template-columns:repeat(4,1fr); } }
  .challenge-item{
    position:relative; overflow:hidden;
    background:var(--c-white); border:1px solid var(--c-line); border-top:3px solid var(--c-accent);
    border-radius:var(--radius); padding:1.5em 1.3em 1.6em;
  }
  .challenge-item::after{
    content:""; position:absolute; right:0; bottom:0; width:26px; height:26px;
    background:linear-gradient(135deg, transparent 50%, var(--c-bg-soft) 51%);
    border-left:1px solid var(--c-line); border-top:1px solid var(--c-line);
  }
  .challenge-item .row-top{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1.1em; }
  .challenge-item .ic{ flex:none; width:38px; height:38px; border-radius:50%; background:var(--c-accent-tint); display:flex; align-items:center; justify-content:center; }
  .challenge-item .ic svg{ width:19px; height:19px; stroke:var(--c-accent); }
  .challenge-item .num{ font-family:var(--font-display); font-weight:900; font-size:1.9rem; color:var(--c-line-strong,#D8D4CE); line-height:1; }
  .challenge-item p{ margin:0; font-size:1.03rem; color:var(--c-ink); font-weight:700; line-height:1.6; }

  .two-col{ display:grid; grid-template-columns:1fr; gap:48px; align-items:center; }
  @media(min-width:900px){ .two-col{ grid-template-columns:1fr 1fr; gap:64px; } }

  /* ---- 選ばれる理由(番号バッジ+グラデーションヘッダーのカード) ---- */
  .reasons-grid{ display:grid; grid-template-columns:1fr; gap:24px; margin-top:2.8em; }
  @media(min-width:800px){ .reasons-grid{ grid-template-columns:repeat(3,1fr); gap:28px; } }
  .reason{
    background:var(--c-white); border-radius:var(--radius); overflow:hidden;
    border:1px solid var(--c-line);
    box-shadow:0 16px 32px -24px rgba(23,24,28,.35);
    display:flex; flex-direction:column;
  }
  .reason-head{
    display:flex; align-items:center; gap:.9em;
    padding:1.3em 1.3em 1.2em;
    background:linear-gradient(135deg,var(--c-accent-deep),var(--c-accent));
  }
  .reason-num{
    flex:0 0 auto; width:2.5em; height:2.5em; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.14); border:1.5px solid rgba(255,255,255,.45);
    font-family:var(--font-display); font-weight:900; font-size:1.15rem; color:#fff; line-height:1;
  }
  .reason-head h4{ margin:0; color:#fff; font-size:1.14rem; font-weight:800; line-height:1.4; }
  .reason-body{ padding:1.35em 1.3em 1.5em; flex:1; }
  .reason-body p{ font-size:1.03rem; color:var(--c-ink-soft); margin:0; line-height:1.75; }

  /* ---- 提供価値(コンパクトなチップ列) ---- */
  .value-strip{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:2em; }
  @media(min-width:640px){ .value-strip{ grid-template-columns:repeat(4,1fr); } }
  .value-chip{ background:var(--c-white); border:1px solid var(--c-line); border-radius:var(--radius); padding:1.2em 1.2em; font-size:1.08rem; color:var(--c-ink); font-weight:700; text-align:center; }

  /* ---- チェックリスト ---- */
  .check-grid{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:2em; }
  @media(min-width:700px){ .check-grid{ grid-template-columns:1fr 1fr; } }
  .check-item{
    display:flex; gap:.8em; align-items:flex-start;
    background:var(--c-white); border:1px solid var(--c-line); border-radius:var(--radius);
    padding:1.15em 1.25em; font-size:1.08rem; font-weight:500; color:var(--c-ink);
  }
  .check-item .mark{ color:var(--c-accent); font-weight:900; flex:none; }

  /* ---- サービス内容(グルーピング済み) ---- */
  .service-grid{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:2.2em; }
  @media(min-width:640px){ .service-grid{ grid-template-columns:1fr 1fr; } }
  @media(min-width:960px){ .service-grid{ grid-template-columns:repeat(3,1fr); } }
  .service-item{
    display:flex; align-items:flex-start; gap:.8em;
    padding:1.1em 1.2em; background:var(--c-white); border:1px solid var(--c-line);
    border-radius:var(--radius); font-size:.96rem; color:var(--c-ink);
  }
  .service-item .dot{ width:6px; height:6px; border-radius:50%; background:var(--c-accent); flex:none; margin-top:.55em; }

  /* ---- 流れ(左から右へ読む、グループ見出し付きフロー) ---- */
  .flow-wrap{ margin-top:2.6em; }

  /* グループ見出しバー(集客診断/ブランド設計/成果) : 5列表示できる幅(1100px)以上でのみ表示 */
  .flow-groupbar{ display:none; }
  @media(min-width:1100px){
    /* margin-bottomは、カード上部にはみ出す番号バッジ(top:-18px、直径36px→カード上端から18px上に突出)と
       重ならないよう、その突出量(18px)より少し余裕を持たせた値にしている */
    .flow-groupbar{ display:grid; grid-template-columns:repeat(5,1fr); gap:26px; margin-bottom:30px; }
    .flow-group{
      grid-column:span var(--span,1);
      background:linear-gradient(135deg,var(--c-ink),#33353c);
      color:#fff; text-align:center; font-weight:800; font-size:.92rem; letter-spacing:.02em;
      padding:.85em 1em; border-radius:999px;
      display:flex; align-items:center; justify-content:center; gap:.55em;
    }
    .flow-group svg{ width:16px; height:16px; flex:none; stroke:currentColor; }
    .flow-group--result{ background:linear-gradient(135deg,var(--c-accent-deep),var(--c-accent)); }
  }

  .flow-cards{ display:grid; grid-template-columns:1fr; gap:34px; }
  @media(min-width:640px) and (max-width:1099px){ .flow-cards{ grid-template-columns:1fr 1fr; gap:24px; } }
  @media(min-width:1100px){ .flow-cards{ grid-template-columns:repeat(5,1fr); gap:22px; } }

  .flow-card{
    position:relative; background:var(--c-white); border:1px solid var(--c-line); border-radius:var(--radius);
    padding:1.7em 1.2em 1.5em; text-align:center;
  }
  .flow-card--result{ background:var(--c-accent-tint); border-color:var(--c-accent-tint-strong,var(--c-accent)); }

  /* 1100px以上: カードの右側に矢印を添えて「流れ」を示す */
  @media(min-width:1100px){
    .flow-card:not(:last-child)::after{
      content:"›"; position:absolute; top:50%; right:-22px; transform:translateY(-50%);
      font-size:1.7rem; font-weight:700; color:var(--c-line-strong,#D8D4CE); line-height:1;
    }
  }

  /* 5列レイアウトになる前は、グループ名をカード内の小さなラベルとして表示(見出しバーの代わり) */
  .flow-card-group{
    display:inline-block; font-size:.76rem; font-weight:700; color:var(--c-accent-deep);
    background:var(--c-accent-tint); padding:.3em .85em; border-radius:99px; margin-bottom:1em;
  }
  @media(min-width:1100px){ .flow-card-group{ display:none; } }

  .flow-num{
    position:absolute; top:-18px; left:50%; transform:translateX(-50%);
    width:36px; height:36px; border-radius:50%; background:var(--c-ink); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:800; font-size:1.02rem;
  }
  .flow-card--result .flow-num{ background:var(--c-accent); }

  .flow-ic{ width:68px; height:68px; border-radius:50%; background:var(--c-accent-tint); display:flex; align-items:center; justify-content:center; margin:0 auto 1em; }
  .flow-ic svg{ width:34px; height:34px; stroke:var(--c-accent); }

  .flow-card h4{ font-size:1.28rem; margin:0 0 .55em; }
  .flow-card .rule{ width:28px; height:0; border-top:1px dashed var(--c-line-strong,#D8D4CE); margin:0 auto .7em; }
  .flow-card p{ font-size:.9rem; color:var(--c-ink-soft); line-height:1.6; margin:0; }

  /* ---- 無料集客診断(明るいカード) ---- */
  .diagnosis-card{
    background:var(--c-white);
    border:1px solid var(--c-accent-tint-strong); border-radius:8px;
    padding:clamp(28px,5vw,56px); position:relative; overflow:hidden;
    box-shadow:0 24px 60px -30px rgba(159,29,42,.25);
  }
  .diagnosis-card::before{
    content:""; position:absolute; width:340px; height:340px; border-radius:50%;
    background:radial-gradient(circle, rgba(215,38,56,.08), transparent 70%);
    top:-140px; right:-120px;
  }
  .diagnosis-cols{ display:grid; grid-template-columns:1fr; gap:32px; margin-top:2em; position:relative; z-index:1; }
  @media(min-width:800px){ .diagnosis-cols{ grid-template-columns:1fr 1fr; } }
  .diagnosis-cols h4{ font-size:.95rem; color:var(--c-accent); letter-spacing:.06em; margin-bottom:.8em; }
  .diagnosis-points{ display:flex; flex-direction:column; gap:8px; position:relative; z-index:1; }

  .promise-line{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.05rem,2.2vw,1.3rem); color:var(--c-ink); max-width:640px; margin:0 auto 1.6em; }

  .final-cta{ text-align:center; }
  .final-cta .h2{ max-width:760px; margin-left:auto; margin-right:auto; }
  .final-cta .lead{ max-width:560px; margin-left:auto; margin-right:auto; }
  .final-cta .cta-note ul{ justify-content:center; }

  /* ---- お問い合わせフォーム(ページ最下部・ここで完結させて離脱を防ぐ) ---- */
  /* ヘッダーがposition:stickyのため、CTAボタンからのアンカージャンプで
     セクション上部がヘッダーの裏に隠れないよう、余白を確保しておく
     (640px以下はヘッダーのCTAボタンが折り返して縦に長くなるため、より大きめの値にしている) */
  #contact-form{ scroll-margin-top:100px; padding-top:clamp(32px,5vw,56px); padding-bottom:clamp(32px,5vw,56px); }
  @media(max-width:640px){ #contact-form{ scroll-margin-top:132px; } }

  .contact-card{
    display:grid; grid-template-columns:1fr; border-radius:8px; overflow:hidden;
    box-shadow:0 24px 60px -30px rgba(23,24,28,.3);
    border-top:5px solid var(--c-accent);
  }
  @media(min-width:860px){ .contact-card{ grid-template-columns:.92fr 1.08fr; } }

  /* 以前はここを黒基調のダークパネルにしていたが、サイト全体が「明るい」トーンで
     統一されている(暗い配色はヘッダー・フッターのみ)ため、他セクションと浮いてしまっていた。
     白ベース+赤のアクセントに変更し、全体のトンマナに合わせている。 */
  .contact-promo{
    background:
      repeating-linear-gradient(124deg, rgba(215,38,56,.04) 0 2px, transparent 2px 34px),
      radial-gradient(circle at 88% 4%, rgba(215,38,56,.14), transparent 55%),
      var(--c-white);
    color:var(--c-ink); padding:clamp(26px,4vw,44px); position:relative; overflow:hidden;
    display:flex; flex-direction:column; justify-content:center; gap:1em;
  }
  .contact-promo::before{
    content:""; position:absolute; width:300px; height:300px; border-radius:50%;
    background:radial-gradient(circle, rgba(215,38,56,.12), transparent 70%);
    bottom:-150px; left:-120px;
  }
  .contact-promo > *{ position:relative; z-index:1; }

  .contact-cost{ line-height:1; position:relative; }
  .contact-cost .cost-label{
    display:inline-flex; align-items:center; gap:.5em; font-size:.78rem; font-weight:800;
    letter-spacing:.12em; color:var(--c-accent-deep); background:var(--c-accent-tint);
    border:1px solid var(--c-accent-tint-strong); border-radius:999px; padding:.35em .9em; margin-bottom:.6em;
  }
  .contact-cost .cost-label::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--c-accent); flex:none; }
  .contact-cost .cost-figure{
    display:block; font-family:var(--font-display); font-weight:900;
    font-size:clamp(2.6rem,5.6vw,3.6rem); color:var(--c-ink); letter-spacing:0;
  }
  .contact-cost .cost-figure b{
    color:var(--c-accent); font-size:1.2em; font-weight:900; margin-right:.06em;
    text-shadow:0 8px 20px rgba(215,38,56,.3);
  }

  .contact-heading{
    font-family:var(--font-display); font-weight:800;
    font-size:clamp(1.35rem,2.8vw,1.75rem); line-height:1.35; color:var(--c-ink); margin:0;
  }
  .contact-heading em{
    font-style:normal; color:#fff; white-space:nowrap;
    background:linear-gradient(135deg,var(--c-accent-deep),var(--c-accent));
    padding:.08em .28em; border-radius:3px;
  }

  .contact-tag{
    display:inline-flex; align-self:flex-start; align-items:center; gap:.5em;
    background:linear-gradient(135deg,var(--c-accent-deep),var(--c-accent));
    color:#fff; font-weight:800; font-size:.82rem;
    padding:.55em 1.05em; border-radius:999px; box-shadow:0 8px 16px -10px rgba(215,38,56,.55);
  }
  .contact-tag svg{ width:15px; height:15px; flex:none; stroke:#fff; }
  .contact-promo .cta{ align-self:flex-start; }

  .contact-form-panel{ background:var(--c-bg-soft); padding:clamp(26px,4vw,44px); }
  .form-panel-title{ font-family:var(--font-display); font-weight:800; font-size:1.1rem; color:var(--c-ink); margin-bottom:.3em; }
  .form-panel-lead{ font-size:.88rem; color:var(--c-ink-soft); margin-bottom:1.2em; }

  .form-field{ display:flex; flex-direction:column; gap:.45em; margin-bottom:.9em; }
  .form-field label{ font-weight:700; font-size:.94rem; color:var(--c-ink); }
  .required-mark{
    display:inline-flex; align-items:center; color:var(--c-accent); font-weight:800;
    font-size:.72rem; letter-spacing:.05em; margin-left:.5em; background:var(--c-accent-tint);
    border-radius:4px; padding:.2em .5em; vertical-align:middle;
  }

  .input-wrap{ position:relative; }
  .input-wrap .field-icon{
    position:absolute; left:1em; top:50%; transform:translateY(-50%);
    width:19px; height:19px; color:var(--c-ink-faint); stroke:currentColor; pointer-events:none;
  }
  .input-wrap--textarea .field-icon{ top:.9em; transform:none; }

  .form-field select,
  .form-field input[type="text"],
  .form-field input[type="tel"],
  .form-field input[type="email"],
  .form-field textarea{
    border:1.5px solid var(--c-line-strong,#D8D4CE); border-radius:var(--radius);
    padding:.75em 1.1em .75em 3.1em; font-size:.98rem; font-family:inherit; color:var(--c-ink);
    background:var(--c-white); width:100%; appearance:none;
    box-shadow:0 1px 2px rgba(23,24,28,.03);
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .form-field textarea{ min-height:5.5em; line-height:1.6; resize:vertical; }
  .form-field select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6270' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 1.1em center; background-size:16px;
    padding-right:2.8em;
  }
  .form-field select:focus,
  .form-field input:focus,
  .form-field textarea:focus{ outline:none; border-color:var(--c-accent); box-shadow:0 0 0 3px var(--c-accent-tint); }
  .form-field input::placeholder,
  .form-field textarea::placeholder{ color:var(--c-ink-faint); }
  .form-field select:invalid{ color:var(--c-ink-faint); }
  /* 送信を試みて未入力の必須項目があった場合のみ、赤枠で分かりやすく示す
     (触れる前から全項目が赤くなってしまわないよう、JS側でform.was-validatedを付けてから効かせる) */
  #contactForm.was-validated select:invalid,
  #contactForm.was-validated input:invalid,
  #contactForm.was-validated textarea:invalid{
    border-color:var(--c-accent); box-shadow:0 0 0 3px var(--c-accent-tint);
  }
  .char-count{ align-self:flex-end; font-size:.8rem; color:var(--c-ink-faint); }
  .char-count.is-over{ color:var(--c-accent); font-weight:700; }

  .form-consent{ display:flex; align-items:flex-start; gap:.6em; font-size:.88rem; color:var(--c-ink-soft); margin-bottom:1.1em; }
  .form-consent input{ margin-top:.25em; flex:none; width:17px; height:17px; accent-color:var(--c-accent); }
  .form-consent a{ color:var(--c-accent); text-decoration:underline; }
  .form-submit-note{
    font-size:.86rem; font-weight:700; color:var(--c-ink-soft); background:var(--c-bg-soft);
    border:1px solid var(--c-line); border-radius:var(--radius); padding:.7em 1em; margin-bottom:.9em;
  }
  .form-submit-note.is-error{
    color:var(--c-accent-deep); background:var(--c-accent-tint); border-color:transparent;
  }
  .contact-form-panel .cta{
    width:100%; border:none; cursor:pointer; font-family:inherit;
    font-size:1rem; padding:.95em 2em;
  }

  .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.is-visible{ opacity:1; transform:none; }

  /* ---- Mobile sticky CTA bar(明るく) ---- */
  .sticky-cta{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
    border-top:1px solid var(--c-line);
    box-shadow:0 -8px 24px -16px rgba(0,0,0,.2);
    padding:10px var(--pad-x); display:flex; justify-content:center;
    transform:translateY(120%); transition:transform .3s ease;
  }
  .sticky-cta.is-visible{ transform:translateY(0); }
  .sticky-cta .cta{ width:100%; max-width:420px; padding:1em 1.1em; }
  @media(min-width:900px){ .sticky-cta{ display:none; } }

  /* ---- Footer(締め=黒) ---- */
  .site-footer{ background:var(--c-charcoal); padding:48px 0 90px; }
  @media(min-width:900px){ .site-footer{ padding-bottom:48px; } }
  .footer-top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:32px; padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,.1); }
  .footer-brand strong{ font-family:var(--font-display); color:var(--c-white); font-size:1.05rem; }
  .footer-brand p{ font-size:.9rem; color:var(--c-charcoal-text); max-width:320px; margin-top:.5em; }
  .footer-links h5{ font-size:.82rem; letter-spacing:.08em; color:var(--c-charcoal-text); margin-bottom:.9em; }
  .footer-links a{ display:block; font-size:.92rem; color:#fff; text-decoration:none; margin-bottom:.6em; opacity:.85; }
  .footer-links a:hover{ opacity:1; color:var(--c-accent); }
  .footer-bottom{ padding-top:20px; font-size:.82rem; color:var(--c-charcoal-text); display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; }

  .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

  :focus-visible{ outline:2px solid var(--c-accent); outline-offset:2px; }

  /* ---- THANKS(送信完了)ページ専用 ---- */
  .thanks-header .container{ justify-content:space-between; }
  .thanks-section{ padding:clamp(64px,11vw,120px) 0; }
  .thanks-card{ max-width:600px; margin:0 auto; text-align:center; }
  .thanks-icon{
    width:76px; height:76px; margin:0 auto 1.5em; border-radius:50%;
    background:linear-gradient(135deg,var(--c-accent-deep),var(--c-accent));
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 22px 44px -18px rgba(215,38,56,.55);
  }
  .thanks-icon svg{ width:34px; height:34px; stroke:#fff; stroke-width:2.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
  .thanks-card .eyebrow{ justify-content:center; }
  .thanks-card .h2{ margin-bottom:.55em; }
  .thanks-card .lead{ max-width:none; margin:0 auto 2em; }
  .thanks-meta{
    text-align:left; background:var(--c-bg-soft); border:1px solid var(--c-line);
    border-radius:8px; padding:1.3em 1.5em; margin:0 0 2.2em;
  }
  .thanks-meta h3{ font-family:var(--font-display); font-size:.92rem; color:var(--c-ink); margin:0 0 .8em; }
  .thanks-meta ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.65em; }
  .thanks-meta li{ display:flex; gap:.7em; align-items:flex-start; font-size:.92rem; color:var(--c-ink-soft); line-height:1.6; }
  .thanks-meta li svg{ width:16px; height:16px; margin-top:.2em; flex:none; stroke:var(--c-accent); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
  .thanks-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
  .thanks-actions .cta{ min-width:220px; }