/* ==========================================================================
   K9-Web preview/index.html ローカルスタイル
   出典: 元 inline <style>（line 23-220）の切り出し（2026-04-30 Phase 1 day 1）
   方針: design-spec.md §17.8.7 step 3 に準拠、外部 CSS 化のみで内容無変更
   ローカル独自トークンは Phase 1 day 2 以降で variables.css のトークンに置換予定
   ========================================================================== */

/* レガシー変数を k9-liff 準拠 token への alias に変換（source-of-truth は variables.css の 9 段階スケール） */
:root{
  /* ターコイズ（ブランドメイン）: 旧 --turquoise-400 = brand 500 */
  --turquoise-400: var(--color-k9-turquoise-500);
  --turquoise-100: var(--color-k9-turquoise-100);
  --turquoise-50:  var(--color-k9-turquoise-50);
  /* ディープオーシャン（サブ） */
  --ocean-500: var(--color-k9-ocean-500);
  --ocean-800: var(--color-k9-ocean-800);
  /* コッパー（警告色専用） */
  --copper-500: var(--color-k9-copper-500);
  /* 派生背景・テキスト（variables.css の token を再利用） */
  --off-white: var(--c-base-washi);
  --ink: var(--c-text-sumi);
  --muted: var(--c-text-gray);
  --section-border: var(--c-border-color);

  /* 派生シェード短縮エイリアス補完（2026-05-25 AUD-12、variables.css 正準値=index 準拠。既存 --turquoise-400=brand-500 レガシーは保持） */
  --turquoise-200: var(--color-k9-turquoise-200);
  --turquoise-300: var(--color-k9-turquoise-300);
  --turquoise-600: var(--color-k9-turquoise-600);
  --turquoise-700: var(--color-k9-turquoise-700);
  --turquoise-800: var(--color-k9-turquoise-800);
  --turquoise-900: var(--color-k9-turquoise-900);
  --ocean-50:  var(--color-k9-ocean-50);
  --ocean-100: var(--color-k9-ocean-100);
  --ocean-200: var(--color-k9-ocean-200);
  --ocean-300: var(--color-k9-ocean-300);
  --ocean-400: var(--color-k9-ocean-400);
  --ocean-600: var(--color-k9-ocean-600);
  --ocean-700: var(--color-k9-ocean-700);
  --ocean-900: var(--color-k9-ocean-900);
  --copper-50:  var(--color-k9-copper-50);
  --copper-100: var(--color-k9-copper-100);
  --copper-200: var(--color-k9-copper-200);
  --copper-300: var(--color-k9-copper-300);
  --copper-400: var(--color-k9-copper-400);
  --copper-600: var(--color-k9-copper-600);
  --copper-700: var(--color-k9-copper-700);
  --copper-800: var(--color-k9-copper-800);
  --copper-900: var(--color-k9-copper-900);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans-jp);background:var(--off-white);color:var(--ink);line-height:1.7}
/* 旧 .tabs（開発メモ用 dev tabs）は HTML 側で削除済、CSS も撤去 */
body{padding-top:50px}
.rationale{background:var(--c-brand-white);padding:20px 32px;border-bottom:2px solid var(--turquoise-400);font-size:var(--fs-t3)}
.rationale h2{font-size:var(--fs-t5);color:var(--ocean-500);margin-bottom:6px}
.rationale .meta{display:grid;grid-template-columns:140px 1fr;gap:6px 14px;margin-top:8px}
.rationale .meta dt{color:var(--ocean-500);font-weight:600}
.hero{position:relative;height:100dvh;min-height:640px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#000}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;animation:hero-zoom 24s ease-in-out infinite alternate;transform-origin:center center}
@keyframes hero-zoom{
  from{transform:scale(1)}
  to{transform:scale(1.18)}
}
@media (prefers-reduced-motion: reduce){
  .hero-video{animation:none}
}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.45) 0%,rgba(47,93,98,0.55) 50%,rgba(0,0,0,0.7) 100%);z-index:2;pointer-events:none}
/* HERO header: 初期は HERO 動画上の透過、スクロール後は白地へゆっくりフェード */
.hero-header{position:fixed;top:0;left:0;right:0;padding:20px 60px;display:flex;justify-content:space-between;align-items:center;z-index:300;color:#fff;background:transparent;transition:background 0.9s cubic-bezier(0.16,1,0.3,1),color 0.9s cubic-bezier(0.16,1,0.3,1),padding 0.7s cubic-bezier(0.16,1,0.3,1),box-shadow 0.9s cubic-bezier(0.16,1,0.3,1)}
.hero-header .logo{display:inline-flex;align-items:center;text-decoration:none}
.hero-header .logo img{height:44px;width:auto;display:block}
.hero-header nav a,.hero-header .reserve{transition:color 0.9s cubic-bezier(0.16,1,0.3,1),border-color 0.9s cubic-bezier(0.16,1,0.3,1),background 0.9s cubic-bezier(0.16,1,0.3,1)}
/* HERO header reserve（体験予約 cta）— hover 時にブランドカラー（ターコイズ） */
.hero-header .reserve:hover{background:var(--turquoise-400);border-color:var(--turquoise-400);color:#fff}

/* スクロール後: 白地・墨色テキスト */
.hero-header.is-scrolled{background:rgba(255,255,255,0.96);color:var(--c-text-sumi);box-shadow:var(--shadow-header-border);padding:14px 60px;backdrop-filter:blur(8px)}
.hero-header.is-scrolled nav a{color:var(--c-text-sumi)}
.hero-header.is-scrolled .reserve{color:var(--c-text-sumi);border-color:rgba(47,93,98,0.4)}
.hero-header.is-scrolled .reserve:hover{background:var(--turquoise-400);color:#fff;border-color:var(--turquoise-400)}

@media (max-width:767px){
  .hero-header{padding:14px 20px}
  .hero-header.is-scrolled{padding:10px 20px}
  .hero-header .logo img{height:34px}
}
.hero-header nav{display:flex;gap:28px}
.hero-header nav a{color:#fff;text-decoration:none;font-size:var(--fs-t2);letter-spacing:0.1em;position:relative}
/* hover 時: 下にターコイズ線が 0.9s でフェードイン/アウト（HERO header 他のトランジションと足並み統一） */
.hero-header nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--turquoise-400);opacity:0;transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1)}
.hero-header nav a:hover::after{opacity:1}
.hero-header .reserve{padding:8px 20px;border:1px solid rgba(255,255,255,0.5);font-size:var(--fs-t2);color:#fff;text-decoration:none;letter-spacing:0.1em}
.hero-content{position:relative;z-index:5;text-align:center;color:#fff;padding:0 40px;max-width:900px}
/* trial-badge: アウトライン（ブランド白枠＋透明背景＋ブランド白文字、CTA との視覚ヒエラルキー確立） */
.hero-content .trial-badge{display:inline-block;padding:6px 16px;background:transparent;border:1px solid var(--c-brand-white);color:var(--c-brand-white);font-size:var(--fs-t2);letter-spacing:0.1em;margin-bottom:20px;font-weight:600}
.hero-content h1{font-size:var(--fs-t9);line-height:var(--lh-h1);font-weight:300;margin-bottom:24px}
.hero-content .lead{font-size:var(--fs-t4);font-weight:300;max-width:560px;margin:0 auto 20px;opacity:0.95;line-height:1.8}
.hero-content .diff-badges{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:20px 0 32px}
.hero-content .diff-badges span{background:rgba(255,255,255,0.12);color:#fff;padding:5px 12px;font-size:var(--fs-t2);letter-spacing:0.1em;border:1px solid rgba(255,255,255,0.25)}
.hero-content .cta-wrap{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-content .cta-primary{padding:14px 32px;background:var(--turquoise-400);color:#fff;text-decoration:none;font-size:var(--fs-t3);letter-spacing:0.1em}
.hero-content .cta-secondary{padding:14px 32px;background:transparent;border:1px solid rgba(255,255,255,0.6);color:#fff;text-decoration:none;font-size:var(--fs-t3);letter-spacing:0.1em}
.hero-scroll-hint{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,0.6);font-size:var(--fs-t2);letter-spacing:0.2em}
.sec-header{text-align:center;margin-bottom:48px}
.arc-tag{font-size:var(--fs-t1);letter-spacing:0.3em;color:var(--ocean-500);display:block;margin-bottom:12px;font-weight:700}
.sec-tag{font-size:var(--fs-t1);letter-spacing:0.2em;color:var(--muted);display:block;margin-bottom:8px}
.sec-header h2{font-size:var(--fs-h2);line-height:var(--lh-h2);color:var(--ocean-500);font-weight:500;margin-bottom:14px}
.sec-header .subtitle{font-size:var(--fs-t4);color:var(--c-text-gray);max-width:620px;margin:0 auto}
.size-badge{position:absolute;top:20px;right:20px;background:rgba(47,93,98,0.8);color:#fff;font-size:var(--fs-t1);padding:4px 10px;letter-spacing:0.1em;border-radius:var(--radius-xs);z-index:10}
/* （旧 .empathy 単独定義を撤去、unified rule で統一管理） */
/* H2 dead CSS 削除（v0.9.8、2026-05-04）: .empathy-grid / .empathy-card / .diagnosis-bar は HTML 未使用のため削除 */
/* METHOD: 200vh sticky-pin、縦書き 3 ステップが scroll 進捗で fade in/out */
.method{
  position:relative;
  min-height:200dvh;
  background:linear-gradient(180deg,rgba(26,58,61,0.55) 0%,rgba(47,93,98,0.75) 100%),url("https://placedog.net/1280/720?id=33") center/cover no-repeat fixed;
  color:#fff;
}
.method-inner{
  position:sticky;
  top:0;
  height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 60px;
  overflow:hidden;
}
.method-content{
  position:relative;
  width:100%;
  max-width:1100px;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
/* v0.9.13j-fix123（2026-06-02）: LP eyebrow を fix111 規約と同等化（serif italic 16px + copper line、文言は LP 独自維持）
   v0.9.13j-fix130（2026-06-02）: LP eyebrow font-family を Top (index) と統一（serif-en → serif-jp、Noto Serif JP italic） */
.method-eyebrow{
  position:absolute;
  top:var(--header-clear);
  left:60px;
  font-family:var(--font-serif-jp);
  font-style:italic;
  font-size:16px;
  letter-spacing:0.05em;
  color:var(--color-k9-turquoise-800, #306c6b);
  font-weight:400;
}
.method-section-h2{
  position:absolute;
  bottom:80px;
  left:5%;
  right:5%;
  font-family:var(--font-serif-jp);
  font-size:var(--fs-t8);
  color:rgba(255,255,255,0.85);
  font-weight:500;
  letter-spacing:0.04em;
  line-height:1.4;
  margin:0;
  word-break:keep-all;
  overflow-wrap:break-word;
}

/* 縦書き 3 ステップ: 重ねて配置、active のみ表示。
   レイアウト: 本文を左カラム、見出し（番号＋タイトル）を右カラムに固定。
   writing-mode: vertical-rl の中で flex-direction: row-reverse を使い
   DOM 順（本文 → 見出し）のまま視覚的に左／右へ振り分ける。 */
.method-steps-tate{
  position:relative;
  width:100%;
  max-width:1000px;
  height:65dvh;
}
.method-step-tate{
  position:absolute;
  inset:0;
  writing-mode:vertical-rl;
  -webkit-writing-mode:vertical-rl;
  text-orientation:mixed;
  display:flex;
  flex-direction:column-reverse;  /* DOM [body, heading] → 視覚: body 左／heading 右 */
  align-items:flex-start;         /* inline 軸の先頭（TOP）揃え → 本文と見出しの 1 文字目が同じ高さ */
  justify-content:space-between;
  gap:60px;
  padding:80px 0;                 /* 上下に余白を取って先頭が viewport 上端に貼り付かないように */
  opacity:0;
  transform:translateY(16px);
  transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1),transform 0.9s cubic-bezier(0.16,1,0.3,1);
  pointer-events:none;
}
.method-step-tate.active{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* 本文（左カラム）: 行間広めで息のあるリズム */
.method-tate-body{
  font-family:var(--font-serif-jp);
  font-size:var(--fs-t6);
  line-height:2.8;                /* 縦書きの「行間」= 文字ピッチ */
  letter-spacing:0.16em;
  color:rgba(255,255,255,0.92);
  margin:0;
  flex:0 0 auto;                  /* 中央寄せのため伸縮しない */
  min-width:0;
}

/* 見出し（右カラム）: 番号 + タイトル。height: 100% を撤去し本文と先頭揃え */
.method-tate-heading{
  display:flex;
  flex-direction:row-reverse;     /* 番号を上、タイトルを下に（vertical-rl 内で） */
  align-items:flex-start;
  gap:24px;
  flex:0 0 auto;
}
.method-tate-num{
  font-family:var(--font-sans-en);
  font-size:var(--fs-t3);
  letter-spacing:0.3em;
  color:var(--turquoise-400);
  font-weight:600;
  writing-mode:horizontal-tb;
  -webkit-writing-mode:horizontal-tb;
  flex-shrink:0;
}
.method-tate-title{
  font-family:var(--font-serif-jp);
  font-size:var(--fs-t9);
  font-weight:500;
  letter-spacing:0.18em;
  color:#fff;
  margin:0;
  line-height:1.4;
  white-space:nowrap;
}

/* モバイル: 縦書きを横書きへ切替し、上下に積む（読みやすさ優先） */
@media (max-width:767px){
  .method-steps-tate{height:auto;max-width:100%}
  .method-step-tate{
    position:absolute;
    inset:0;
    writing-mode:horizontal-tb;
    -webkit-writing-mode:horizontal-tb;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:24px;
    padding:0 8px;
    text-align:left;
  }
  .method-tate-heading{flex-direction:row;align-items:baseline;height:auto;gap:16px}
  .method-tate-num{font-size:var(--fs-t2)}
  .method-tate-title{font-size:var(--fs-t8);letter-spacing:0.08em}
  .method-tate-body{font-size:var(--fs-t4);line-height:1.9;letter-spacing:0.04em;height:auto}
}

.method-progress{
  position:absolute;
  bottom:48px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
}
.method-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(255,255,255,0.25);
  transition:background 0.4s,width 0.4s;
}
.method-dot.active{
  background:var(--turquoise-400);
  width:24px;
  border-radius:var(--radius-sm);
}

@media (max-width:767px){
  /* iOS Safari は background-attachment: fixed が安定しないため scroll に切替 */
  .method{background-attachment:scroll}
  .method-inner{padding:0 24px}
  .method-eyebrow{top:var(--header-clear);left:24px}
  .method-progress{bottom:24px}
  .method-step-tate{gap:24px}
  .method-tate-title{font-size:var(--fs-t9);letter-spacing:0.12em}
  .method-tate-body{font-size:var(--fs-t4);line-height:2.2;letter-spacing:0.08em;max-height:55vh}
}
.why-voices{background:var(--c-brand-white)}
.why-voices .sec-header h2{font-size:var(--fs-t8)}
.why-voices-inner{width:100%;max-width:1200px;margin:0 auto}
.wv-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:40px}
/* 2026-06-27: お客様の声(VOICE列)が5件未満で非表示のとき1列・中央寄せ（pricing と同じレビュー件数ゲート。why-voices が wv-grid--single を付与）。 */
.wv-grid.wv-grid--single{grid-template-columns:1fr;max-width:680px;margin-left:auto;margin-right:auto}
/* Google レビュー（k9h_render_google_reviews 出力）。pricing.css から共通 style.css へ移設（2026-06-27・pricing/LP 両方で使用）。白禁止=#FAFAFA基調・星はコパー。 */
.google-reviews{margin:0}
.google-reviews-summary{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 14px;margin:0 0 28px;padding:18px 22px;background:var(--c-base-washi,#FAFAFA);border:1px solid var(--section-border,#e8eced);border-radius:8px}
.google-reviews-score{font-size:clamp(28px,4vw,36px);font-weight:600;color:var(--ocean-500,#2F5D62);line-height:1;letter-spacing:0.02em}
.google-reviews-stars{font-size:18px;letter-spacing:2px;color:var(--c-accent-copper,#C87A56);line-height:1}
.google-reviews-count{font-size:12px;color:var(--muted,#555);letter-spacing:0.04em}
.google-reviews-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:768px){.google-reviews-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.google-reviews-grid{grid-template-columns:1fr 1fr 1fr}}
.google-review-card{background:var(--c-brand-white,#FAFAFA);border:1px solid var(--section-border,#e8eced);border-radius:8px;padding:24px;display:flex;flex-direction:column;gap:12px}
.google-review-stars{color:var(--c-accent-copper,#C87A56);font-size:14px;letter-spacing:2px;line-height:1}
.google-review-text{font-size:14px;line-height:1.8;flex:1;color:var(--ink,#333);margin:0}
.google-review-meta{font-size:12px;color:var(--muted,#555);border-top:1px solid var(--section-border,#e8eced);padding-top:10px}
/* 2026-06-15: tablet(768-1023px)では2列=右列のお客様の声が幅256px→証言本文が88pxに潰れるため1列。2列はdesktop(≥1024)のみ（§25.4.2 ② / k9-harmony 専用） */
@media (min-width:768px) and (max-width:1023px){.wv-grid{grid-template-columns:1fr;gap:40px}}
.wv-col h3{font-size:var(--fs-t2);letter-spacing:0.2em;color:var(--muted);margin-bottom:20px;font-weight:700;text-transform:uppercase}
.promises-list{display:flex;flex-direction:column;gap:16px}
.promise-item{background:var(--off-white);border-left:4px solid var(--turquoise-400);padding:32px 36px;font-size:var(--fs-t4);line-height:1.9}
.promise-item .num{color:var(--turquoise-400);font-weight:700;margin-right:12px;font-size:var(--fs-t5)}
.voice-list{display:flex;flex-direction:column;gap:16px}
.voice-item{background:var(--off-white);padding:28px 32px;display:grid;grid-template-columns:80px 1fr;gap:24px;align-items:flex-start}
.voice-photo{aspect-ratio:1;background:linear-gradient(135deg,#C87A56,#8b5a3e);border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.5);font-size:var(--fs-t1)}
.voice-photo img{width:100%;height:100%;object-fit:cover;display:block}
.voice-text .stars{color:#E8B84A;font-size:var(--fs-t3)}
.voice-text p{font-size:var(--fs-t3);color:var(--c-text-body);margin:6px 0;line-height:1.7}
.voice-text .name{color:var(--muted);font-size:var(--fs-t2)}
/* H2 dead CSS 削除（v0.9.8、2026-05-04）: .conviction-strip / .benefits-summary は HTML 未使用のため削除 */
.benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.benefit{background:var(--c-brand-white);padding:14px;text-align:center;border:1px solid var(--section-border);font-size:var(--fs-t2);color:#555}
.benefit .b-icon{font-size:var(--fs-t5);margin-bottom:6px;display:block}
.pricing-process{background:var(--off-white)}
.pp-inner{width:100%;max-width:1200px;margin:0 auto}
.process-block{margin-bottom:60px}
.process-block h3{font-size:var(--fs-t2);letter-spacing:0.2em;color:var(--muted);margin-bottom:24px;font-weight:700;text-align:center;text-transform:uppercase}
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
.process-steps::before{content:"";position:absolute;top:30px;left:12%;right:12%;height:2px;background:var(--turquoise-400);opacity:0.4;z-index:1}
.process-step{background:var(--c-brand-white);border:1px solid var(--section-border);padding:24px 16px;text-align:center;position:relative;z-index:2}
.process-step .step-num{width:60px;height:60px;background:var(--ocean-500);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-t5);font-weight:700;margin:0 auto 12px}
.process-step h4{font-size:var(--fs-t4);color:var(--ocean-500);margin-bottom:6px;font-weight:600}
.process-step p{font-size:var(--fs-t2);color:var(--c-text-gray)}
.pricing-block{margin-bottom:40px}
.pricing-block h3{font-size:var(--fs-t2);letter-spacing:0.2em;color:var(--muted);margin-bottom:24px;font-weight:700;text-align:center;text-transform:uppercase}
.pricing-divider{display:flex;align-items:center;gap:14px;max-width:560px;margin:0 auto 24px;font-size:var(--fs-t2);letter-spacing:0.18em;color:var(--muted);text-transform:uppercase}
.pricing-divider::before,.pricing-divider::after{content:"";flex:1;height:1px;background:var(--section-border)}
.pricing-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1100px;margin:0 auto}
@media (max-width:1023px){.pricing-cards{grid-template-columns:1fr}}
.pricing-card{background:var(--c-brand-white);border:1px solid var(--section-border);padding:48px 32px;text-align:center;position:relative}
.pricing-card.trial{border-color:var(--copper-500);border-width:2px;box-shadow:var(--shadow-glow-copper)}
.pricing-card.trial::before{content:"初めての方はまずこちら";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--copper-500);color:#fff;padding:4px 14px;font-size:var(--fs-t2);letter-spacing:0.08em;white-space:nowrap}
.pricing-card.featured{border-color:var(--turquoise-400);border-width:2px;box-shadow:var(--shadow-glow-turquoise)}
.pricing-card.featured::before{content:"一番人気";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--turquoise-400);color:#fff;padding:4px 14px;font-size:var(--fs-t2);letter-spacing:0.1em}
.pricing-card .plan-name{font-size:var(--fs-t5);color:var(--ocean-500);font-weight:600;margin-bottom:12px}
.pricing-card .price{font-size:var(--fs-t8);color:var(--copper-500);margin:14px 0;font-weight:300}
.pricing-card .price small{font-size:var(--fs-t3);color:var(--muted)}
.pricing-card .per-session{font-size:var(--fs-t2);color:#777;margin-bottom:4px}
.pricing-card .savings{font-size:var(--fs-t2);color:var(--copper-500);margin-bottom:14px}
.pricing-card .duration{font-size:var(--fs-t2);color:var(--c-text-gray);margin-bottom:16px}
.pricing-card .pick{display:block;padding:12px;background:var(--ocean-500);color:#fff;text-decoration:none;font-size:var(--fs-t3);letter-spacing:0.1em}
.pricing-card.trial .pick{background:var(--copper-500)}
.pricing-card .plan-tagline{font-size:var(--fs-t2);color:var(--turquoise-400);letter-spacing:0.1em;margin-bottom:6px;font-weight:600}
.pricing-card .plan-types{margin-top:14px;padding-top:14px;border-top:1px dashed var(--section-border);font-size:var(--fs-t2);color:#777;text-align:left;line-height:1.7}
.pricing-card .plan-types-label{font-size:var(--fs-t1);color:var(--muted);letter-spacing:0.1em;margin-bottom:4px;display:block}
.pricing-card .plan-types-list{font-size:var(--fs-t2);color:#555}
.pricing-card .plan-types-list span{display:inline-block;background:var(--turquoise-50);color:var(--ocean-500);padding:2px 8px;margin:2px 3px 2px 0;border-radius:var(--radius-xs);font-size:var(--fs-t1)}
.pricing-card .card-photo{margin:-36px -24px 16px;height:140px;background:linear-gradient(135deg,var(--turquoise-100) 0%,var(--turquoise-50) 100%);display:flex;align-items:center;justify-content:center;color:var(--ocean-500);position:relative;overflow:hidden}
.pricing-card .card-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* （旧 .diagnosis-link-row は v0.7.22 で .pricing-cta に置換、削除済） */
.pricing-cta{display:flex;align-items:center;gap:6px;width:fit-content;margin:12px 0 0 auto;color:var(--ocean-500);text-decoration:none;font-size:var(--fs-t3);letter-spacing:0.1em;background:var(--c-brand-white);border:1px solid var(--turquoise-400);padding:14px 28px;border-radius:var(--radius-pill);transition:background 0.25s ease,color 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease}
.pricing-cta:hover{background:var(--turquoise-400);color:#fff;border-color:var(--turquoise-400);box-shadow:var(--shadow-glow-turquoise-soft)}
@media (max-width:1023px){.pricing-cta{margin:16px auto 0}}
@media (max-width:767px){.pricing-cta{font-size:var(--fs-t2);padding:12px 22px}}
/* fix142: 料金プラン注意事項は枠線・背景なしの素テキスト（2026-06-04 平田淳氏指示、LP のみ使用） */
.pricing-notes{max-width:900px;margin:24px auto 0;font-size:var(--fs-t2);color:var(--muted);line-height:1.9}
.pricing-notes ul{list-style:none;padding:0;margin:0}
.pricing-notes li{padding:2px 0 2px 14px;position:relative}
.pricing-notes li::before{content:"※";position:absolute;left:0;color:var(--muted)}
.upgrade-note{margin-top:32px;padding:20px;background:#FFF9F4;border-left:4px solid var(--copper-500);font-size:var(--fs-t3);color:#555;max-width:900px;margin-left:auto;margin-right:auto}
.upgrade-note strong{color:var(--copper-500)}
.pricing-info{margin-top:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:900px;margin-left:auto;margin-right:auto;font-size:var(--fs-t2)}
/* 2026-06-15: tablet(768-1023px)では3列=各182pxが窮屈なため1列。3列はdesktop(≥1024)のみ（§25.4.2 ② / fix150 1列化の積み残し） */
@media (min-width:768px) and (max-width:1023px){.pricing-info{grid-template-columns:1fr}}
.info-card{background:var(--c-brand-white);padding:14px;border:1px solid var(--section-border);text-align:center}
.info-card .label{font-size:var(--fs-t1);color:var(--muted);letter-spacing:0.1em;margin-bottom:4px}
.info-card .val{color:var(--ocean-500);font-weight:600}
/* v0.9.13j-fix139（2026-06-03）: 旧 .cta-final 視覚ブロック（背景/グラデ/inner/h2/lead）を削除。
   footer CTA は .home-cta-area（ファイル末尾 fix139 ブロック）に移行済。.inline-qa/.qa-* は .lp-faq が再利用するため保持。 */
.inline-qa{margin-top:40px;padding-top:30px;border-top:1px solid rgba(255,255,255,0.2)}
.inline-qa h3{font-size:var(--fs-t2);letter-spacing:0.2em;color:rgba(255,255,255,0.7);margin-bottom:20px;font-weight:700;text-align:center;text-transform:uppercase}
.qa-list{max-width:800px;margin:0 auto;text-align:left}
.qa-item{border-bottom:1px solid rgba(255,255,255,0.15);padding:18px 0}
.qa-q{font-size:var(--fs-t4);color:#fff;font-weight:600;position:relative;padding-right:40px}
.qa-q::after{content:"+";position:absolute;right:0;top:0;font-size:var(--fs-t5);color:var(--turquoise-400)}
.qa-a{font-size:var(--fs-t3);color:rgba(255,255,255,0.8);margin-top:10px;line-height:1.8}
/* fix139: 旧 .cta-group / .cta-final a.primary|secondary|line / .arc-tag（2 ボタン群）を削除（.home-cta-area の単一 CTA + text-link に移行） */
.footer-b{background:var(--c-brand-white);color:var(--ink);padding:80px 60px 30px;font-size:var(--fs-t3);border-top:1px solid var(--section-border)}
.footer-b .grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;max-width:1100px;margin:0 auto}
.footer-b .brand-col .logo{font-size:var(--fs-t6);letter-spacing:0.2em;color:var(--ocean-500);margin-bottom:16px;font-weight:300}
.footer-b .brand-col .tagline{color:#555;font-size:var(--fs-t3);line-height:1.9;max-width:380px;margin-bottom:20px}
.footer-b .brand-col .area-line{font-size:var(--fs-t2);color:var(--turquoise-400);letter-spacing:0.15em;text-transform:uppercase}
.footer-b .info-col{text-align:right}
.footer-b .nav-line{display:flex;gap:24px;justify-content:flex-end;margin-bottom:20px;font-size:var(--fs-t2);letter-spacing:0.1em}
.footer-b .nav-line a{color:var(--ocean-500);text-decoration:none;transition:color 0.2s ease}
.footer-b .nav-line a:hover{color:var(--turquoise-400)}
.footer-b .contact-line{font-size:var(--fs-t2);color:#555;line-height:2;margin-bottom:14px}
.footer-b .contact-line a{color:#555;text-decoration:none;border-bottom:1px solid transparent;transition:color 0.2s ease, border-bottom-color 0.2s ease}
.footer-b .contact-line a:hover{color:var(--turquoise-400);border-bottom-color:var(--turquoise-400)}
.footer-b .sns-bottom{display:flex;gap:14px;justify-content:center;align-items:center;margin-top:40px}
.footer-b .sns-bottom a{width:42px;height:42px;background:var(--turquoise-50);border:1px solid var(--turquoise-100);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ocean-500);text-decoration:none;transition:all 0.2s;font-size:var(--fs-t5)}
.footer-b .sns-bottom a:hover{background:var(--turquoise-400);border-color:var(--turquoise-400);color:#fff;transform:translateY(-2px)}
.footer-b .legal{max-width:1100px;margin:60px auto 0;padding-top:24px;border-top:1px solid var(--section-border);text-align:center;font-size:var(--fs-t1);color:var(--muted);letter-spacing:0.05em;line-height:2}
.footer-b .legal .links a{color:var(--muted);text-decoration:none;margin:0 10px;transition:color 0.2s ease}
.footer-b .legal .links a:hover{color:var(--turquoise-400)}
/* fix145: 登録番号と © の間で改行（縦並び、2026-06-06 平田淳氏指示） */
.footer-b .legal .reg-copy{margin-top:8px;display:flex;flex-direction:column;align-items:center;gap:4px}
@media (max-width:767px){.footer-b{padding:60px 24px 20px}.footer-b .grid{grid-template-columns:1fr;gap:32px}.footer-b .info-col{text-align:left}.footer-b .nav-line{justify-content:flex-start;flex-wrap:wrap;gap:12px}}
/* H2 dead CSS 削除（v0.9.8、2026-05-04）: .footer-placeholder は HTML 未使用のため削除 */
@media (max-width:767px){
  .hero-header{padding:16px 20px}
  .hero-header nav{display:none}
  .empathy,.why-voices,.pricing-process{padding:60px 24px}
  .method{padding:60px 24px}
  .benefits-grid{grid-template-columns:repeat(2,1fr)}
  .process-steps{grid-template-columns:1fr;gap:16px}
  .process-steps::before{display:none}
  .wv-grid{grid-template-columns:1fr;gap:40px}
  .pricing-cards{grid-template-columns:1fr}
  .pricing-info{grid-template-columns:1fr}
  .voice-item{grid-template-columns:60px 1fr;gap:12px}
  .rationale .meta{grid-template-columns:1fr}
  /* H2 dead CSS 削除（v0.9.8）: .empathy-grid / .footer-placeholder .fake-grid / .conviction-strip メディア内記述削除 */
}

/* ============================================================================
   Lucide アイコン（SVG）サイズ調整
   ============================================================================ */
.icon-box svg{width:28px;height:28px;color:var(--ocean-500);stroke-width:1.5}
.b-icon svg{width:22px;height:22px;color:var(--turquoise-400);stroke-width:1.5;display:inline-block;vertical-align:middle;margin-bottom:6px}
.card-photo svg{width:64px;height:64px;color:var(--ocean-500);stroke-width:1.2}
.sns-bottom a svg{width:18px;height:18px;color:var(--ocean-500);stroke-width:1.5;transition:color 0.2s ease}
.sns-bottom a:hover svg{color:#fff}

/* ============================================================================
   FAQ アコーディオン（Q のみ表示、押下で A 展開）
   ============================================================================ */
.qa-q{cursor:pointer;user-select:none;outline:none}
.qa-q:focus-visible{outline:2px solid var(--turquoise-400);outline-offset:4px}
.qa-q::after{content:"+";transition:transform 0.3s ease}
.qa-item .qa-a{max-height:0;overflow:hidden;margin-top:0;opacity:0;transition:max-height 0.4s ease,opacity 0.3s ease,margin-top 0.3s ease}
.qa-item.is-open .qa-a{max-height:600px;opacity:1;margin-top:10px}
.qa-item.is-open .qa-q::after{transform:rotate(45deg)}

/* ============================================================================
   Issey Miyake トップ準拠: 1 スクロール = 1 セクション切替（scroll-snap）
   ＋ A: 白基調・大型画像・ミニマル余白
   ＋ C: フルブリード没入セクション
   ============================================================================ */
html{
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
}
body{padding-top:0}

/* ============================================================================
   全セクション共通の header オーバーラップ対策（root レベル変数）
   - --header-h: fixed header の実高さ。これに基づき全 section の絶対 top 要素を配置
   - --header-clear: header 下端 + 余白（絶対 top 要素はこの値以上を使う）
   ============================================================================ */
:root{
  --header-h:84px;
  --header-clear:calc(var(--header-h) + 36px);   /* = 120px、header 下端 + 36px 余白 */
}
@media (max-width:767px){
  :root{
    --header-h:64px;
    --header-clear:calc(var(--header-h) + 28px); /* = 92px on mobile */
  }
}

/* ============================================================================
   Section 2 EMPATHY 基本構造（旧 Section 2 比較タブ機能は 2026-05-02 削除済）
   ============================================================================ */
.empathy{position:relative;background:var(--c-brand-white)}
/* v0.9.13j-fix123（2026-06-02）: LP eyebrow を fix111 規約と同等化
   v0.9.13j-fix130（2026-06-02）: font-family serif-en → serif-jp（Top index と統一） */
.empathy-eyebrow,
.concerns-eyebrow{position:absolute;top:var(--header-clear);left:60px;font-family:var(--font-serif-jp);font-style:italic;font-size:16px;letter-spacing:0.05em;color:var(--color-k9-turquoise-800, #306c6b);font-weight:400;display:block;z-index:3;margin:0}
/* 背景写真: opacity 0.18 即時、IntersectionObserver で section 入場時に 10 秒かけてゆっくりズームイン */
.empathy-bg-photo{position:absolute;inset:0;background:url("https://placedog.net/1280/720?id=99") center/cover no-repeat;opacity:0.18;transform:scale(1);transform-origin:center center;transition:transform 10s cubic-bezier(0.16,1,0.3,1);z-index:0;pointer-events:none;will-change:transform}
.empathy.is-bg-zoomed .empathy-bg-photo{transform:scale(1.15)}
.empathy-inner{position:relative;z-index:2}

@media (prefers-reduced-motion: reduce){
  .empathy-bg-photo{transition:none}
  .empathy.is-bg-zoomed .empathy-bg-photo{transform:none}
}

@media (max-width:767px){
  .empathy-eyebrow,
  .concerns-eyebrow{top:var(--header-clear);left:24px}
}

/* ============================================================================
   見出し・引用・価値宣言の明朝化（3 ロール提案の Top 採用範囲）
   - コピーライティング: HERO h1／3 つの約束／お客様の声 quote
   - UX タイポ: 各セクション h2／METHOD step-title
   - ブランド識別: Footer brand logo テキスト／cta-final h2
   ============================================================================ */
.hero-content h1,
.sec-header h2,
.method-content h2,
.promise-item,
.voice-text p,
.footer-b .brand-col .logo{
  font-family:var(--font-serif-jp);
  font-weight:500;
  letter-spacing:0.1em;
  line-height:1.7;
}
/* メタ情報や数字・データは明朝対象外（ゴシック維持） */
.voice-text .name,
.voice-text .stars,
.promise-item .num{
  font-family:var(--font-sans-jp);
  letter-spacing:normal;
}

/* スナップ対象セクション（METHOD は 200vh sticky-pin のため除外、入口のみ snap） */
.hero,
.empathy,
.why-voices,
.pricing-process,
.footer-b{
  scroll-snap-align:start;
  scroll-snap-stop:always;
  min-height:100dvh;
  position:relative;
}
/* footer はスナップ対象だが 100vh 固定にしない（コンテンツ量で伸縮） */
.footer-b{min-height:auto}
/* METHOD は入口でだけスナップ、内部 200vh は自由スクロールしステップ swap を機能 */
.method{scroll-snap-align:start;scroll-snap-stop:normal}
/* HERO・empathy は厳密に 1 viewport（C: 没入） */
.hero,.empathy{height:100dvh;overflow:hidden}

/* セクション内余白（root レベル変数で header クリアを保証）
   - top/bottom = var(--header-clear)（= 84+36 = 120px）で header の下から content 開始
   - flex-start で コンテンツが膨らんでも上端は padding-top で固定。center だと content > 100dvh 時に上下にはみ出して header に隠れるため不採用 */
.empathy,.why-voices,.pricing-process{
  padding:var(--header-clear) 80px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:48px;
}
.empathy{justify-content:center!important;gap:48px;padding-top:calc(var(--header-clear) + 48px)!important}
@media (max-width:1023px){.empathy,.why-voices,.pricing-process{padding:var(--header-clear) 40px!important;gap:36px}}
@media (max-width:767px){.empathy,.why-voices,.pricing-process{padding:var(--header-clear) 24px!important;gap:24px}}

/* v0.9.13j-fix136（2026-06-02）: why-voices / pricing-process / cta-final の padding/min-height を Top と統一。
   Top の section は padding:60px 0（+ .container padding:0 60px）で min-height なし（home.css L146/L152）。
   LP は header-clear(120px) 80px + min-height:100dvh で、見出し削除後にコンテンツ下の空白が過大だった。
   Top 基準に合わせ上下左右 60px・min-height:auto に統一（左右 60px = Top container の横 inset と一致）。
   スクロール挙動への影響なし: lp-scroll-hijack.js は live getBoundingClientRect を参照し（L49/L161）、
   これら 3 セクションは非 snap（自由スクロール）。高さ依存の snap 計算は hero/empathy/footer-b/method のみで対象外。
   empathy は snap 用に 100dvh 維持のため本規約の対象外。モバイル余白は @media（上記）を維持（端末別は後工程）。 */
.why-voices,
.pricing-process {
  min-height: auto !important;
  padding: 60px 0 !important;
}

/* v0.9.13j-fix137（2026-06-02）: コンテンツ幅を Top の .container（max-width:90%; padding:0 60px）と統一。
   原因: LP の inner は max-width 1200px（why-voices/pricing）/ 900px（cta-final）固定で、Top の 90% 流体より狭く、
   広い画面ほど差が出ていた。解決: section 横 padding を 0（上 fix136 改定）にし、inner を Top container と同値
   （width:100%; max-width:90%; margin:0 auto; padding:0 60px; box-sizing:border-box）に統一。
   sec-header も同値にして eyebrow/見出しを content と同じ左端に保つ（fix133 の max-width:1200px を上書き）。 */
.why-voices-inner,
.pp-inner,
.why-voices .sec-header,
.pricing-process .sec-header {
  width: 100%;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 60px;
  padding-right: 60px;
  box-sizing: border-box;
}

/* fix149: pricing 幅は 1100px に確定（dc-toggle 比較トグル削除、2026-06-06）。pp-wide/dc-toggle 規則は不要のため除去 */

/* why-voices に新しい trust-line（旧 conviction-strip の代替）控えめ表示 */
.trust-line{margin-top:32px;text-align:center;font-size:var(--fs-t2);letter-spacing:0.2em;color:var(--c-text-gray);text-transform:uppercase}

/* Trial プラン LEFT + 利用の流れ RIGHT の側並列レイアウト
   align-items: stretch で両カラム同じ高さ。process は flex で 4 ステップを均等配置。 */
.trial-process-row{
  display:flex;
  flex-direction:row;
  gap:56px;
  max-width:1100px;
  margin:0 auto;
  align-items:stretch;
}
.trial-process-col{min-width:0}
.trial-process-col.trial-col{max-width:380px;flex:0 0 auto;display:flex;align-items:stretch}
.trial-process-col.trial-col .pricing-card{flex:1 1 auto;display:flex;flex-direction:column}
.trial-process-col.process-col{flex:1 1 auto;display:flex;flex-direction:column}
.trial-process-row .process-block{margin-top:0;display:flex;flex-direction:column;flex:1 1 auto}
.trial-process-row .process-block h3{font-size:var(--fs-t2);letter-spacing:0.2em;color:var(--muted);margin:0 0 28px;font-weight:700;text-align:left;text-transform:uppercase}

/* 4 ステップを縦に均等配置、ステップ間に細い縦線で流れを表現 */
.trial-process-row .process-steps{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:24px;
  position:relative;
  flex:1 1 auto;
  padding-left:0;
}
.trial-process-row .process-steps::before{
  content:"";
  display:block;
  position:absolute;
  left:22px;
  right:auto;
  top:46px;
  bottom:46px;
  height:auto;
  width:1px;
  /* 流れるグラデーション: 上から下へ光が伝う動きを 4 秒ループ */
  background:linear-gradient(180deg,
    var(--turquoise-100) 0%,
    var(--turquoise-400) 35%,
    var(--turquoise-400) 65%,
    var(--turquoise-100) 100%);
  background-size:100% 240%;
  background-position:0% 100%;
  animation:process-line-flow 4s linear infinite;
  opacity:1;
  z-index:1;
  pointer-events:none;
}
@keyframes process-line-flow{
  0%{background-position:0% 100%}
  100%{background-position:0% -140%}
}
@media (prefers-reduced-motion: reduce){
  .trial-process-row .process-steps::before{animation:none;background-position:0% 50%}
}
.trial-process-row .process-step{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:20px;
  text-align:left;
  padding:0;
  background:transparent;
  border:none;
  position:relative;
  min-width:0;
  z-index:2;
}
.trial-process-row .process-step .step-num{
  width:44px;
  height:44px;
  font-size:var(--fs-t4);
  margin:0;
  flex-shrink:0;
  background:var(--ocean-500);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  letter-spacing:0.05em;
  position:relative;
  z-index:3;
  /* 白い ring で線を切らない。num の固体円が線を覆うだけで十分 */
}
.trial-process-row .process-step .step-text{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:14px 22px;
  background:var(--c-brand-white);
  border:1px solid var(--section-border);
  border-radius:var(--radius-xs);
}
.trial-process-row .process-step h4{
  margin:0;
  font-family:var(--font-serif-jp);
  font-size:var(--fs-t4);
  line-height:1.5;
  font-weight:500;
  color:var(--ocean-500);
  letter-spacing:0.04em;
}
.trial-process-row .process-step p{font-size:var(--fs-t2);line-height:1.7;color:var(--c-text-body);margin:0}

@media (max-width:1023px){
  .trial-process-row{flex-direction:column;gap:32px}
  .trial-process-col.trial-col{max-width:100%}
}

/* benefits-mini: pricing-process 配下の縮小型特典リスト */
.benefits-mini{margin-top:48px;padding:36px 44px;background:var(--c-brand-white);border:1px solid var(--c-border-light);max-width:900px;margin-left:auto;margin-right:auto}
.benefits-mini-title{font-family:var(--font-serif-jp);font-size:var(--fs-t3);letter-spacing:0.15em;color:var(--ocean-500);font-weight:500;text-align:center;margin:0 0 16px}
.benefits-mini-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px 18px}
.benefits-mini-list li{display:flex;align-items:center;gap:8px;font-size:var(--fs-t2);color:var(--c-text-body);line-height:1.5}
.benefits-mini-list li svg{width:14px;height:14px;color:var(--turquoise-400);stroke-width:1.6;flex-shrink:0}
@media (max-width:1023px){
  .benefits-mini-list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .benefits-mini{padding:16px 18px}
  .benefits-mini-list{grid-template-columns:1fr;gap:8px}
}

/* ============================================================================
   Section 2 empathy: タイポグラフィ志向ミニマル（番号付き 4 行）
   ============================================================================ */
.empathy-inner{max-width:1100px;width:100%;display:flex;flex-direction:column;gap:48px;flex:1}
.empathy-head{display:flex;justify-content:space-between;align-items:flex-end;gap:60px}
.empathy-head h2{font-family:var(--font-serif-jp);font-size:var(--fs-t8);line-height:var(--lh-h2);color:var(--ocean-500);font-weight:500;letter-spacing:0.1em;margin:0}
.empathy-list{list-style:none;padding:0;margin:0 auto;display:flex;flex-direction:column;gap:8px;max-width:720px;align-self:center}
.empathy-list li{display:grid;grid-template-columns:60px 1fr;gap:24px;align-items:baseline;padding:6px 0}
.empathy-num{font-family:var(--font-sans-en);font-size:var(--fs-t3);letter-spacing:0.3em;color:var(--turquoise-400);font-weight:600}
.empathy-text{font-family:var(--font-serif-jp);font-size:var(--fs-t6);color:var(--c-text-sumi);font-weight:500;letter-spacing:0.1em;line-height:1.8}
.empathy-cta{position:absolute;right:80px;bottom:60px;z-index:5;display:inline-flex;align-items:center;gap:6px;color:var(--ocean-500);text-decoration:none;font-size:var(--fs-t3);letter-spacing:0.1em;background:var(--c-brand-white);border:1px solid var(--turquoise-400);padding:14px 28px;border-radius:var(--radius-pill);transition:background 0.25s ease,color 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease}
@media (max-width:1023px){.empathy-cta{right:40px;bottom:40px}}
@media (max-width:767px){.empathy-cta{right:24px;bottom:24px}}
.empathy-cta:hover{background:var(--turquoise-400);color:#fff;border-color:var(--turquoise-400);box-shadow:var(--shadow-glow-turquoise-soft)}

/* ============================================================================
   Section 4a promises: 3 つの約束（大判明朝、番号付き縦並び）
   ============================================================================ */
.promises{background:var(--c-base-washi)}
.promises-list{list-style:none;padding:0;margin:48px 0 0;display:flex;flex-direction:column;border-top:1px solid var(--c-border-color)}
.promises-list li{display:grid;grid-template-columns:80px 1fr;gap:32px;align-items:baseline;padding:32px 0;border-bottom:1px solid var(--c-border-color)}
.promise-text{font-family:var(--font-serif-jp);font-size:var(--fs-t6);color:var(--ocean-500);font-weight:500;letter-spacing:0.04em;line-height:1.6}

/* ============================================================================
   Section 4b voices: お客様の声（フルブリード写真＋大判明朝引用）
   ============================================================================ */
.voices{background:var(--c-brand-white)}
.voices-inner{max-width:1200px;width:100%}
.voice{display:flex;flex-direction:column;gap:20px}

/* ============================================================================
   Section 4c benefits: 共通の 4 大特典（雑誌的編集レイアウト）
   ============================================================================ */
.benefits{background:var(--c-bg-mist)}
.benefits-list{display:flex;flex-direction:column;margin-top:48px;border-top:1px solid var(--c-border-color)}
.benefit-num{font-family:var(--font-sans-en);font-size:var(--fs-t3);letter-spacing:0.2em;color:var(--turquoise-400);font-weight:600}

/* ============================================================================
   Section 2/4a/4b/4c レスポンシブ
   ============================================================================ */
@media (max-width:1023px){
  .empathy,.promises,.voices,.benefits{padding:60px 40px}
}
@media (max-width:767px){
  .empathy,.promises,.voices,.benefits{padding:48px 20px}
  .empathy-head{flex-direction:column;align-items:flex-start;gap:16px}
  .empathy-list li{grid-template-columns:50px 1fr;gap:16px}
}

/* （旧 METHOD 200vh sticky-pin スタイルは前段の .method-step-section で完全置換済み、ここは削除） */

/* HERO は full-bleed のため padding 0 */
.hero{padding:0}

/* グリッド最大幅 */
/* H2 dead CSS 削除（v0.9.8）: .empathy-grid 残存記述削除 */
.benefits-grid{max-width:1100px;width:100%}

/* モバイル時のスナップ緩和（縦長セクションが切れないように） */
@media (max-width:767px){
  html{scroll-snap-type:y proximity}
  .method{padding:0 var(--header-clear)}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-snap-type:none;scroll-behavior:auto}
}

/* ============================================================================
   コッパー警告色限定化（カラー階層を正規化）
   - ブランド主色: turquoise（CTA／ハイライト／差別化）
   - サブ色: ocean（見出し・落ち着いた強調）
   - 警告: copper（キャンセル料・遅延・注意喚起のみ）
   ============================================================================ */
.pricing-card.trial{border-color:var(--turquoise-400);border-width:2px;box-shadow:var(--shadow-glow-turquoise)}
.pricing-card.trial::before{background:var(--turquoise-400);color:#fff}
.pricing-card .price{color:var(--c-text-sumi)}
.pricing-card .savings{color:var(--turquoise-400);font-weight:600}
.pricing-card.trial .pick{background:var(--turquoise-400);color:#fff}
.upgrade-note{border-left-color:var(--turquoise-400);background:#F0FAFA}
.upgrade-note strong{color:var(--turquoise-400)}

/* HERO h1 ブランドキーワード強調（「愛犬」のみターコイズ） */
.hero-keyword{color:var(--turquoise-400)}

/* HERO trust signal（動物取扱業登録、cta-primary 直下）— 認可前は「申請中」、認可後は番号反映 */
.hero-trust{display:inline-block;margin-top:18px;font-size:var(--fs-t2);color:rgba(255,255,255,0.7);letter-spacing:0.15em;font-weight:300;padding:4px 12px;border-top:1px solid rgba(255,255,255,0.2);border-bottom:1px solid rgba(255,255,255,0.2)}

/* METHOD 深掘りリンク */
.method-deep-link{
  position:absolute;
  bottom:32px;
  right:5%;
  display:none;
  font-family:var(--font-sans-jp);
  font-size:var(--fs-t3);
  letter-spacing:0.1em;
  color:var(--turquoise-400);
  text-decoration:none;
  border-bottom:1px solid var(--turquoise-400);
  padding-bottom:2px;
  writing-mode:horizontal-tb;
  -webkit-writing-mode:horizontal-tb;
  transition:color 0.3s,border-bottom-color 0.3s;
}
.method-deep-link.is-active{display:inline-block}
.method-deep-link:hover{color:#fff;border-bottom-color:#fff}
@media (max-width:767px){
  .method-deep-link{font-size:var(--fs-t2)}
}

/* FAQ 内深掘りリンク（動物行動学／フランス式 → About 誘導） */
.qa-deep-link{display:inline-block;margin-top:6px;font-family:var(--font-sans-jp);font-size:var(--fs-t2);letter-spacing:0.08em;color:var(--turquoise-400);text-decoration:none;border-bottom:1px solid rgba(87,195,194,0.5);padding-bottom:2px;transition:color 0.3s ease, border-bottom-color 0.3s ease}
.qa-deep-link:hover{color:#fff;border-bottom-color:#fff}

/* 「決めかねている方へ — 3 つの安心」ボックス */
.reassurance-box{margin:0 auto 32px;max-width:900px;padding:28px 36px;background:var(--c-brand-white);border:1px solid var(--turquoise-100);border-left:4px solid var(--turquoise-400);box-shadow:var(--shadow-glow-turquoise-soft)}
.reassurance-box-title{font-family:var(--font-serif-jp);font-size:var(--fs-t4);letter-spacing:0.12em;color:var(--ocean-500);font-weight:500;margin:0 0 16px;text-align:center}
.reassurance-box-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* 2026-06-15: tablet(768-1023px) — 3列153pxは窮屈・1列だけだと間延びのため、1列かつ各boxを横並び(番号左+本文右)にして横幅を活用（提案②）。3列はdesktop(≥1024)のみ（k9-harmony 専用） */
@media (min-width:768px) and (max-width:1023px){
  .reassurance-box-list{grid-template-columns:1fr;gap:10px}
  /* base .reassurance-box-list li{flex-direction:column} が後段同詳細度のため、親 .reassurance-box を足して詳細度(0,2,1)で確実に上書き */
  .reassurance-box .reassurance-box-list li{flex-direction:row; align-items:center; gap:14px}
  .reassurance-box .reassurance-box-list .reassurance-num{flex-shrink:0}
}
.reassurance-box-list li{display:flex;flex-direction:column;gap:6px;padding:14px 16px;background:var(--turquoise-50);border-radius:var(--radius-xs)}
.reassurance-box-list .reassurance-num{font-family:var(--font-sans-en);font-size:var(--fs-t2);letter-spacing:0.2em;color:var(--turquoise-400);font-weight:700}
.reassurance-box-list .reassurance-text{font-family:var(--font-sans-jp);font-size:var(--fs-t3);color:var(--c-text-body);line-height:1.6}
@media (max-width:767px){
  .reassurance-box{padding:20px 18px}
  .reassurance-box-list{grid-template-columns:1fr;gap:10px}
}

/* ============================================================================
   Sticky CTA Bar（v0.7.17 確定、Section 4 起点 + 最小限スタイル + 透過 78%）
   ============================================================================ */
.sticky-cta{
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:200;
  background:linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(212,239,239,0.25) 100%);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-top:1px solid rgba(255,255,255,0.4);
  box-shadow:0 -4px 24px rgba(87,195,194,0.08), inset 0 1px 0 rgba(255,255,255,0.4);
  transform:translateY(100%);
  opacity:0;
  transition:transform 0.6s cubic-bezier(0.16,1,0.3,1), opacity 0.6s cubic-bezier(0.16,1,0.3,1);
  pointer-events:none;
}
.sticky-cta.is-visible{transform:translateY(0); opacity:1; pointer-events:auto}
.sticky-cta[hidden]{display:none}
.sticky-cta-inner{
  max-width:1100px;
  margin:0 auto;
  padding:6px 20px;
  display:flex;
  align-items:center;
  gap:16px;
  height:44px;
}
.sticky-cta-text{
  flex:1 1 auto;
  font-family:var(--font-sans-jp);
  font-size:var(--fs-t2);
  color:var(--c-text-sumi);
  letter-spacing:0.04em;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sticky-cta-button{
  flex:0 0 auto;
  padding:7px 18px;
  background:var(--turquoise-400);
  color:#fff;
  text-decoration:none;
  font-family:var(--font-sans-jp);
  font-size:var(--fs-t2);
  font-weight:600;
  letter-spacing:0.05em;
  border-radius:var(--radius-pill);
  transition:background 0.2s, transform 0.2s;
}
.sticky-cta-button:hover{background:var(--turquoise-600); transform:translateY(-1px)}
.sticky-cta-close{
  flex:0 0 auto;
  width:28px; height:28px;
  background:transparent;
  border:none;
  font-size:var(--fs-t5);
  color:var(--c-text-gray);
  cursor:pointer;
  border-radius:50%;
  transition:background 0.2s;
}
.sticky-cta-close:hover{background:var(--c-bg-mist)}
.sticky-cta-close:focus-visible{outline:2px solid var(--turquoise-400); outline-offset:2px}

@media (max-width:767px){
  .sticky-cta-inner{padding:6px 16px; gap:10px; height:40px}
}

@media (prefers-reduced-motion: reduce){
  .sticky-cta{transition:none}
}

/* ===========================================
   A7 アクセシビリティ補強（Phase A day 1, 2026-05-04 v0.9.7）
   skip link / focus-visible / 読み上げ補助
=========================================== */

/* skip link: キーボード Tab 操作時のみ表示、本文へジャンプ */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  padding: 12px 20px;
  z-index: 9999;
  text-decoration: none;
  font-size: var(--fs-t3);
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
}

/* focus-visible: キーボード操作時のフォーカスリング */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-k9-turquoise-500, #57C3C2);
  outline-offset: 2px;
  border-radius: 4px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

/* sr-only: スクリーンリーダー専用テキスト */
.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;
}

/* ===========================================
   H3 インライン style 抽出（v0.9.8、2026-05-04）
   k9-harmony.html line 46 / 193 / 243 / 252 の inline style を class 化
=========================================== */

/* line 46: HERO 直下の出張エリア注記の追加スタイル */
.service-area-note {
  margin-top: 18px;
  font-size: var(--fs-t2);
  letter-spacing: 0.08em;
  opacity: 0.75;
  font-weight: 300;
}

/* line 193: pricing-block の上部マージン拡張版 */
.pricing-block.is-spaced {
  margin-top: 48px;
}

/* line 243: pricing 注釈テキスト（「単発でもご利用可〜」） */
.pricing-note-line {
  text-align: left;
  font-size: var(--fs-t3);
  color: #666;
  margin-top: 18px;
}

/* line 252: PAYMENT info-card の値を一段細かく */
.info-card .val.val-fine {
  font-size: var(--fs-t3);
}

/* ============================================================================
   B8-fix37 inline style 共通 class 化（2026-05-12）
   ============================================================================ */
.icon-sm{width:14px;height:14px}
.icon-md{width:16px;height:16px}
.icon-lg{width:18px;height:18px}
.icon-inline{vertical-align:middle}
.icon-warn{color:var(--copper-500)}
.col-w-14{width:14%}
.col-w-28{width:28%}
.col-w-30{width:30%}
.draft-actions{display:flex;gap:8px}
.hidden{display:none}
.fg-mb-12{margin-bottom:12px}

/* ============================================================================
   v0.9.13j-fix123（2026-06-02）: R6 LP 改修反映
   - eyebrow ::before copper line（fix111 子ページ規約と同等）
   - line-height 案 B 共通規約（fix118 home.css 規約を LP セクションに転載）
   - 文言「— ABOUT YOUR DOG」「METHOD」は LP 独自演出として現状維持
   ============================================================================ */

/* eyebrow copper line（::before）
   v0.9.13j-fix123: 初期版 inline-block
   v0.9.13j-fix131（2026-06-02）: Top index と統一、display: block で別行配置（base.css L75-79 と同等） */
.empathy-eyebrow::before,
.concerns-eyebrow::before,
.method-eyebrow::before {
  content: "";
  display: block;
  width: 20px;
  height: 1px;
  background-color: var(--color-k9-copper-500, #C87A56);
  margin-bottom: 8px;
}

/* v0.9.13j-fix131（2026-06-02）: LP の共通 `.eyebrow` を Top (home.css fix129 + h2.eyebrow) と統一
   base.css L67 の sans-en uppercase 11px copper を、Top と同じ serif-jp italic 16px turquoise-800 に上書き
   ::before の copper line は base.css L75 規定（block + 20×1px copper）をそのまま流用 */
.eyebrow {
  font-family: var(--font-serif-jp);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--color-k9-turquoise-800, #306c6b);
  font-weight: 400;
  margin: 3px 0 12px;
}

/* v0.9.13j-fix132（2026-06-02）: LP eyebrow を Top (index) と完全整合
   - A-1: why-voices / pricing-process の eyebrow を左寄せ化
     （`.sec-header{text-align:center}` 継承で中央寄せだったのを Top の `.eyebrow{text-align:left}` (home.css L160) に合わせる）
   - A-2: cta-final の eyebrow を白文字 + 左寄せ化
     （暗背景グラデ上で turquoise-800 は視認性不足。Top の `.home-cta-area .eyebrow{color:#fff}` (home.css L888) と同パターン） */
.why-voices .sec-header .eyebrow,
.pricing-process .sec-header .eyebrow {
  text-align: left;
}

/* v0.9.13j-fix133（2026-06-02）: why-voices / pricing-process の sec-header をコンテンツコンテナ幅に揃え左寄せ
   原因: `.why-voices` / `.pricing-process` は flex `align-items:center`（L542）のため、幅指定のない `.sec-header`
         がコンテンツ幅に縮んで中央配置され、全幅の `.why-voices-inner` / `.pp-inner`（max-width:1200px margin:0 auto）の
         左端（「3つの約束」等）と揃っていなかった。
   解決: sec-header を inner と同じ width:100% / max-width:1200px / margin:0 auto の全幅ブロックにし、text-align:left で
         eyebrow + h2 を 1200px コンテナの左端に揃える。fix132 の eyebrow text-align:left は本規約に内包される。 */
.why-voices .sec-header,
.pricing-process .sec-header {
  width: 100%;
  max-width: 90%; /* fix137: Top の .container（90%）と統一。eyebrow/見出しを inner content と同じ左端に揃える */
  margin-left: auto;
  margin-right: auto;
  padding-left: 60px;
  padding-right: 60px;
  box-sizing: border-box;
  text-align: left;
}

/* v0.9.13j-fix134（2026-06-02）: LP のアイブロウを Top と同じ <h2 class="eyebrow"> に変更（タグを h タグ化）。
   Top の section eyebrow は <h2 class="eyebrow">（NEWS/SERVICE AREA/FAQ、computed 16px 維持）。LP は <p class="eyebrow">
   だったため h タグ化。ただし `.why-voices .sec-header h2`（L296 fs-t8）/ `.sec-header h2`（L108 ocean fs-h2）/
   `.cta-final h2`（L372 #fff fs-h2）がアイブロウ h2 に当たって大きく・別色になるため、h2.eyebrow を 16px・
   アイブロウ色に戻して Top の見た目（16px serif-jp italic）に一致させる。既存の大見出し h2 は非破壊で維持。 */
.why-voices .sec-header h2.eyebrow,
.pricing-process .sec-header h2.eyebrow {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  margin: 3px 0 12px;
  color: var(--color-k9-turquoise-800, #306c6b);
}

/* line-height 案 B 統一（fix118 規約を LP 全セクションに適用）
   対象: empathy / method / process / pricing / cta-final / faq / その他 section
   h=1.4 / lead=1.8 / p=1.9 / li,dd=1.8 */
section h1, section h2, section h3,
.empathy h1, .empathy h2, .empathy h3,
.method h1, .method h2, .method h3 {
  line-height: 1.4 !important;
}
section .lead, section .section-lead, section .hero-lead,
.empathy .lead, .method .lead {
  line-height: 1.8 !important;
}
section p, .empathy p, .method p {
  line-height: 1.9 !important;
}
section li, section dd,
.empathy li, .method li,
.empathy dd, .method dd {
  line-height: 1.8 !important;
}

/* ============================================================================
   v0.9.13j-fix126（2026-06-02）: scroll-snap CSS 完全停止、JS hijack に移管
   経緯:
   - fix124（3 セクション snap-align: none）と fix125（mandatory → proximity）を試行
   - 純 CSS では「snap セクション間 1 切替 + non-snap セクション自由スクロール」両立不可能と判明
   - proximity: 停止位置中間で止まる症状（snap point 吸着力不足）
   - mandatory: 隣接 snap point に強制吸着で戻される症状
   解決策:
   - CSS の scroll-snap を完全停止
   - JS（/assets/js/lp-scroll-hijack.js）で wheel event hijack して制御
   - snap セクション（hero / empathy / footer-b）: wheel 1 段階 = 1 セクション切替
   - non-snap セクション（method / why-voices / pricing-process / cta-final）: 自由スクロール
   - prefers-reduced-motion: reduce では JS hijack 自動無効化
   - モバイル touchscroll はデフォルト挙動維持
   ============================================================================ */
/* 2026-07-05: fix126 の snap 無効化を desktop 限定に変更。モバイル(≤767)は 785 行の
   y proximity スナップを復活させる（wheel hijack はタッチ入力経路が無く、モバイルの
   ページ送り機構が全滅していたバグの修正。fix126 で棄却されたのは desktop wheel の吸着感）。 */
@media (min-width: 768px) {
html {
  scroll-snap-type: none !important;
}
.hero,
.empathy,
.method,
.why-voices,
.pricing-process,
.lp-faq,
.home-cta-area,
.footer-b {
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}
}
/* 2026-07-05: CONCERN（2026-06-30新設）は snap-align 対象リスト漏れ（モバイル proximity 用・入口整列） */
.lp-concerns { scroll-snap-align: start; scroll-snap-stop: normal; }
/* 2026-07-05: モバイルは全ページ共通 footer への吸着点を作らない（proximity 復活のサイト全体への漏れ遮断） */
@media (max-width: 767px) { .footer-b { scroll-snap-align: none; } }
/* min-height: 100dvh は維持（snap CSS とは独立、各セクション高さ確保のため） */

/* ============================================================================
   v0.9.13j-fix139（2026-06-03）: LP 締めを子ページ統一の footer CTA（home-cta-area）へ統合
   - 目的: LP の CV=予約 最大化（主 CTA 予約 1 本に集約 / 診断・問合せは text-link 降格 / 上段リスクリバーサル + 信頼行）
   - LP は home.css 非読込のため、子ページ home-cta-area（home.css L835-966 + base L146/187/198）を
     style.css に依存ごと自己完結移植（.container/.cta-primary/.lg を本ブロック内で完結、グローバル汚染なし）
   - 旧 cta-final（FAQ+CTA 同居）を廃し FAQ=.lp-faq（明背景）/ CTA=.home-cta-area（暗グラデ）に分離
   - scroll: lp-scroll-hijack.js SECTION_SELECTORS に .lp-faq / .home-cta-area を追加（非 snap・自由スクロール）
   - 根拠: fix104/fix114（Aman/Hermès/Diptyque footer + HBR Storytelling + NN/G Hierarchy of Trust）
           + 単一主 CTA（Hick's Law）+ CTA 直前リスクリバーサル（既存 reassurance-box と同文言で整合）
   ============================================================================ */

/* --- FAQ セクション（明背景・暗文字、Top/子 faq と同系統） --- */
.lp-faq{background:var(--c-brand-white,#FAFAFA);padding:60px 0}
.lp-faq-inner{width:100%;max-width:90%;margin:0 auto;padding:0 60px;box-sizing:border-box}
.lp-faq h2.eyebrow{display:block;font-family:var(--font-serif-jp);font-style:italic;font-size:16px;font-weight:400;line-height:1.4;letter-spacing:0.05em;margin:3px 0 20px;color:var(--color-k9-turquoise-800,#306c6b);text-align:left}
.lp-faq .inline-qa{margin-top:0;padding-top:0;border-top:0}
.lp-faq .qa-list{max-width:900px;margin:0 auto;text-align:left}
.lp-faq .qa-item{border-bottom:1px solid var(--section-border)}
/* fix143: FAQ 質問を標準ゴシック（body と同じ sans-jp・weight 400）に揃える（旧 .qa-q font-weight:600 を上書き、2026-06-04 平田淳氏指示） */
.lp-faq .qa-q{color:var(--c-text-sumi,#333);font-family:var(--font-sans-jp);font-weight:400}
.lp-faq .qa-q::after{color:var(--turquoise-400)}
.lp-faq .qa-a{color:#555}
.lp-faq .qa-deep-link{color:var(--ocean-500);border-bottom:1px solid var(--turquoise-400)}
/* fix141: アコーディオン展開時の修飾を「質問インデックス＝ターコイズ背景＋ブランドホワイト文字（フェード 0.45s）」に変更（fix140 の ocean 文字／青い左罫・下罫は廃止）。
   背景は turquoise-800（#306c6b）採用: ブランドメイン turquoise-500（#57C3C2）+ 白は contrast 約 2:1 で WCAG AA 不適合のため、
   AA 達成（約 5.9:1）かつアイブロウ fix56 と同 precedent の deep turquoise を使用（brand 基準運用ルール fix55 の 3 条件充足）。 */
.lp-faq .qa-item{padding:0}
.lp-faq .qa-q{padding:16px 44px 16px 16px;border-radius:4px;transition:background-color 0.45s ease,color 0.45s ease}
.lp-faq .qa-q::after{right:16px;top:16px;transition:transform 0.3s ease,color 0.45s ease}
/* fix144: 回答（qa-a）に上下 20px padding を追加（2026-06-04 平田淳氏指示。質問ヘッダーではなく回答側）。
   閉じた qa-a は max-height:0 でも上下 padding が領域を残すため、展開時（.is-open）のみ上下 20px を適用。 */
.lp-faq .qa-a{padding:0 16px}
.lp-faq .qa-item.is-open .qa-a{padding:20px 16px}
.lp-faq .qa-item.is-open .qa-q{background:var(--color-k9-turquoise-800,#306c6b);color:var(--c-brand-white,#FAFAFA)}
.lp-faq .qa-item.is-open .qa-q::after{color:var(--c-brand-white,#FAFAFA)}
/* fix140: 最下部右下の FAQ 全件リンク（qa-list と同じ 900px 列の右端に揃える） */
.lp-faq-more{display:block;max-width:900px;margin:24px auto 0;text-align:right;color:var(--ocean-500);text-decoration:none;font-size:var(--fs-t3);letter-spacing:0.04em;transition:color 0.2s ease}
.lp-faq-more:hover{color:var(--turquoise-400)}

/* --- footer CTA（暗グラデ・白文字、home-cta-area 自己完結移植） --- */
.home-cta-area{position:relative;text-align:center;color:#fff;overflow:hidden;isolation:isolate;padding:80px 0}
.home-cta-area .container{width:100%;max-width:90%;margin:0 auto;padding:0 60px;box-sizing:border-box}
.home-cta-area::before{content:'';position:absolute;inset:0;background-image:url('https://images.unsplash.com/photo-1601758124277-f0086d5ab050?w=1920&h=1080&fit=crop&auto=format');background-size:cover;background-position:center;z-index:-2;transform:scale(1.04);transition:transform 12s ease-in-out}
.home-cta-area:hover::before{transform:scale(1.08)}
.home-cta-area::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(47,93,98,0.88) 0%,rgba(87,195,194,0.78) 100%);z-index:-1}
@media (prefers-reduced-motion: reduce){.home-cta-area::before{transition:none!important;transform:none!important}}
/* eyebrow: 白 + copper 罫（子ページ home.css L888 と同パターン、左寄せ） */
.home-cta-area .eyebrow{display:block;text-align:left;color:var(--c-brand-white,#FAFAFA);position:relative;padding-top:8px;font-family:var(--font-serif-jp);font-style:italic;font-size:16px;letter-spacing:0.05em;font-weight:400;margin:0 0 24px}
.home-cta-area .eyebrow::before{content:'';position:absolute;top:0;left:0;width:20px;height:1px;background:var(--c-accent-copper,#C87A56);display:block}
/* 物語 h2（serif-jp、白、line-height 1.8） */
.home-cta-area h2{font-family:var(--font-serif-jp);font-size:var(--fs-t8);font-weight:500;line-height:1.8;letter-spacing:0.02em;color:#fff;margin:0 0 24px}
/* 上段 文脈（リスクリバーサル）— 区切り線で下段と分離 */
.home-cta-area .cta-context-row{margin-bottom:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,0.2)}
.home-cta-area .cta-context-heading{font-family:var(--font-serif-jp);font-size:var(--fs-t5);font-weight:400;color:rgba(255,255,255,0.95);margin:0 0 20px;letter-spacing:0.02em;line-height:1.6}
.home-cta-area .cta-reassure-row{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center}
.home-cta-area .cta-reassure{color:rgba(255,255,255,0.92);font-size:var(--fs-t3);letter-spacing:0.04em;position:relative;padding-left:22px}
.home-cta-area .cta-reassure::before{content:'\2713';position:absolute;left:0;top:0;color:var(--turquoise-400);font-weight:700}
/* 主 CTA 単独 lg（base .cta-primary + .lg を本ブロック内で完結） */
.home-cta-area .cta-main{display:flex;justify-content:center;margin-bottom:24px}
.home-cta-area .cta-primary{display:inline-block;padding:20px 48px;background:var(--c-main-turquoise);color:#fff;font-size:var(--fs-t5);letter-spacing:0.08em;font-weight:600;text-decoration:none;border:0.5px solid #fff;border-radius:0;transition:background 0.3s ease,color 0.3s ease,border-color 0.3s ease}
.home-cta-area .cta-primary:hover{background:#fff;color:var(--c-main-turquoise);border-color:var(--c-main-turquoise)}
/* サブ text-link */
.home-cta-area .cta-sub-links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;margin-bottom:28px}
.home-cta-area .cta-text-link{color:rgba(255,255,255,0.9);text-decoration:none;font-size:var(--fs-t2);letter-spacing:0.04em;border-bottom:1px solid rgba(255,255,255,0.85);padding-bottom:2px;transition:border-color 0.3s ease}
.home-cta-area .cta-text-link:hover{border-bottom-color:#fff}
.home-cta-area .cta-sep{color:rgba(255,255,255,0.4);font-size:var(--fs-t2)}
/* 信頼行 */
.home-cta-area .cta-trust-row{margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.25);display:flex;flex-direction:column;gap:8px;text-align:center}
.home-cta-area .cta-trust-item{color:rgba(255,255,255,0.88);font-size:var(--fs-t2);letter-spacing:0.04em}
/* レスポンシブ */
@media (max-width:1023px){.home-cta-area .container,.lp-faq-inner{padding:0 40px}}
@media (max-width:767px){.home-cta-area{padding:60px 0}.lp-faq{padding:48px 0}.home-cta-area .container,.lp-faq-inner{padding:0 24px}.home-cta-area .cta-reassure-row{flex-direction:column;align-items:center;gap:10px}}

/* CTA 矢印ホバー統一 (2026-06-19): A範囲の矢印リンクで hover 時に矢印を右へ4pxスライド (cycle-more と統一)。先頭矢印型は対象外。 */
.cta-arrow{display:inline-block;transition:transform .2s ease, color .2s ease}
a:hover .cta-arrow{transform:translateX(4px)}

/* ===== 2026-06-26: 決済ロゴ（共通・reservation / pricing 共有）。Square 統合素材(square-payments.png)は無改変・等倍縮小のみ／Apple Pay・Google Pay は各社公式マークを等高掲出（パリティ）。 ===== */
.pay-logos { margin-top: 14px; }
.pay-logos-caption {
  font-size: 12px; color: var(--muted, #555);
  margin: 0 0 8px; letter-spacing: 0.02em;
}
.pay-logos-sheet {
  display: block; width: 100%; max-width: 560px; height: auto;
}
.pay-logos-wallets {
  display: flex; align-items: center; gap: 14px;
  margin-top: 12px; flex-wrap: wrap;
}
.pay-logos-wallets img { height: 28px; width: auto; display: block; }