/* =========================================================
   ABSOLUTE RULES（編集しない前提の土台）
   - 幅420px固定（SPファースト）
   - PC時のみ body::before で背景（LAVA方式）
   - セクション余白：上56px / 下32px
   - 疑似要素の幅は常に420pxで中央寄せ（雲の左右切れ防止）
   ========================================================= */

/* =======================
   Tokens（色・数値）
======================= */
:root{
  --wrap: min(420px, 100vw);
  --pad: 20px;

  --lavender: #f3e8f7;
  --lav: var(--lavender); /* 省略名 */
  --pink: #E95B8E;
  --accent: #EF87AE;

  --text: #6b6363;
  --ink:  var(--text);   /* 本文色の別名 */
  --ink-weak: #777;
  --muted: #999;

  --bubbleOverlap: 16px; /* セクション仕切りバブルの重なり量 */
}

/* =======================
   Reset / Base
======================= */
*{ box-sizing:border-box; margin:0; padding:0; }
img{ max-width:100%; height:auto; display:block; }
a{ text-decoration:none; color:inherit; }

html, body{ overflow-x:hidden; }

body{
  font-family:'Noto Sans JP', sans-serif;
  color:var(--text);
  line-height:1.7;
  background:#fff;
}

/* =======================
   Layout（共通レイアウト）
======================= */
.wrap{
  width:var(--wrap);
  margin:0 auto;
  padding:0 var(--pad);
  box-sizing:border-box;
}
.section{
  position:relative;
  padding:40px 0 24px;
  isolation:isolate; /* 三角やバブルの重なりをセクション内で完結 */
}

/* iPad含むタブレット以上で最背面背景（LAVA） */
@media (min-width: 600px){
  body{ position:relative; }
  body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;

    /* フォールバック：image-setは使わない（@2x無し想定） */
    background-color: var(--lavender);          /* PC背景をラベ統一 */
    background-image: url("../images/mykonpcbg.png");
    background-position: center;
    background-repeat: no-repeat;               /* “1枚背景”なら no-repeat */
    background-size: cover;                     /* 以前の見え方に合わせる */
  }
}

/* ================================
   h2見出し：統一ルール
================================ */
#intro h2{
  color:var(--text);
  font-size:20px;
  font-weight:700;
  text-align:center;
  line-height:1.6;
  margin-bottom:16px;
  margin-top:0;
}

/* 解決・Flow・最終CTA（ピンク #EF87AE に統一） */
#solution h2,
#flow h2,
#final h2{
  color:#EF87AE;
  font-size:22px;
  font-weight:800;
  text-align:center;
  margin-bottom:16px;
  line-height:1.3;
}

/* 選ばれる理由・FAQ（白文字／強調） */
#reasons h2,
#faq h2{
  color:#fff;
  font-size:24px;
  font-weight:800;
  text-align:center;
  margin-bottom:24px;
  line-height:1.3;
}

/* サブ見出し（why内で利用） */
.why-copy{
  text-align:center;
  font-size:18px;
  font-weight:800;
  color:#EF87AE;  /* ピンク統一 */
}



/* =======================
   共通ユーティリティ
======================= */

/* セクションタイトル画像（はみ出し完全防止） */
.section-title-img{
width:100%;
max-width:var(--wrap);
height:auto;
margin:6px auto 18px;
display:block;
position:static;
left:auto;
transform:none;
}

/* wrapの外に置く“白バブル”の標準化 */
.bubble-img{
  width:100%;
  max-width:var(--wrap);
  height:auto;
  margin:0 auto;
  display:block;
}

/* 汎用サブタイトル */
.sec-ttl{
  font-weight:800;
  font-size:20px;
  text-align:center;
  margin:0 0 16px;
}

/* =======================
   セクション区切り（デコ）
======================= */


/* CSS三角の区切り */
.why-tri{
  width:var(--wrap);
  height:55px;
  margin:0 auto;
  background:var(--lav);
  display:block;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  position:relative;
  z-index:1;
  pointer-events:none;
}
/* 逆三角（切り欠き風） */
.cut-triangle{
  height:46px;
  background: radial-gradient(100% 220% at 50% -20%, transparent 52%, var(--lav) 53%);
}

/* =======================
   セクション固有（最低限）
======================= */

/* 導入：白→ラベンダーの縦グラデ */
#intro{
  background:linear-gradient(180deg, #fff 0%, var(--lavender) 100%);
}
#intro{ 
  padding-bottom: 24px;
  margin-bottom: 0;
}


/* 最終CTA：白→ラベンダー（カード無し） */

#final h2{ color:#EF87AE; }
#final p{ font-size:15px; margin-bottom:20px; }



.container{ width:100%; max-width:var(--wrap); margin:0 auto; background:#fff; }

.section-divider{
  display:block;
  width:var(--wrap);
  height:auto;
  margin:0 auto;
  background:no-repeat center bottom / 100% 100%;
  aspect-ratio:800/294;           /* 画像の実寸比率 */
  position:relative;
  z-index:2;
  pointer-events:none;
}

.section-divider--lavender{
  background-image:image-set(
    url("../images/lavenderbubble.png") 1x
  );
  margin-bottom:-4px;
}

.section-divider{ background-color:#EAC0CF; }




/* =======================
   Header（ヘッダー）
======================= */

/* =======================
   Hero（ヒーロー）
======================= */

/* Hero（背景は白） */
#hero{ background:#fff; padding:0; }
#hero img{ width:100%; }

/* =======================
   Hero CTA（ヒーロー直下CTA）
======================= */

/* CTA（白カード＋画像ボタン） */
.cta-btn{ text-align:center; margin:12px 0 0; padding:0; background:#fff; }
.cta-btn img{ width:min(320px,90%); margin:0 auto; transition:transform .2s; cursor:pointer; }
.cta-btn img:hover{ transform:scale(1.05); }

/* =======================
   Worries（お悩みセクション）
======================= */

#worries{
  background:var(--lavender);
  padding-bottom:10px;     /* しっぽの深さ。70〜100pxで微調整OK */
  position:relative;
  overflow:visible;
}
#worries.section{
  padding:6px 0 10px;
}

/* worries：タイトル画像を視覚フル幅に（左右パディング分だけ拡張） */
#worries .section-title-img{
  display:block;
  width:calc(100% + (var(--pad) * 2));
  margin:0 calc(-1 * var(--pad)) 16px;
  height:auto;
}


/* =======================
   Solution（解決セクション）
======================= */

#solution{
  background:#EAC0CF;
  padding:4px 0 8px;
}

/* =======================
   Trend（なぜ今相談所が人気なのか）
======================= */

/* グラデ終了→三角→白リボン（テキストに非干渉） */
#why{
  background:none;           /* セクション本体は透明 */
  padding:0;
  position:relative;
  overflow:visible;
}

.why-grad{
  background:linear-gradient(180deg,#fff 0%, var(--lavender) 100%);
  margin: 0 calc(-1 * var(--pad)) -2px;   
  padding:24px var(--pad) 0;
  position:relative;
  z-index:2;
}

.why-grad img{ display:block; }
/* 白リボン：三角の“下”に来るよう最背面に */
.ribbon-white{
  background:#fff;
  margin:0;
  padding:16px 0 8px;
  position:relative;
  z-index:0;
}

#why .ribbon-white p:last-child{ margin-bottom:6px; }
#why.section{ padding-bottom:0; }

/* =======================
   Reason（選ばれる理由）
======================= */
/* 親セクションは全幅。中身の幅は .wrap が面倒を見る */
#reasons{ background:#fff; padding-bottom:10px;}
/* グラデ帯：上部にピンク→オレンジのグラデを再統合 */
#reasons .reasons__titleband{
  /* 既存のまま */
  background: linear-gradient(135deg,#E95B8E 0%,#FF9F6E 100%);
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:3; width:100%; margin:0; overflow:visible;

  /* ← ここだけ数値UP */
  padding: 16px 0;     /* 10px → 14px  にUP（12〜16の間で好み調整OK） */
  min-height: 120px;    /* 52px → 60px にUP（56〜66で微調整OK） */
}

/* h2は現状のまま（line-height:1; margin:0; width:100%）でOK */


/* タイトル帯の中身（h2）を帯いっぱいにして中央に */
#reasons .reasons__title{
  margin: 0 !important;
  padding: 0;
  width: 100%;             /* ← これが肝 */
  display: block;          /* inline-block をやめる */
  text-align: center;      /* テキスト中央 */
  color: #fff;
  font-weight: 800;
  font-size: clamp(18px, 5.2vw, 22px);
  line-height: 1.35;
  letter-spacing: .02em;
}


.reasons__titleband{
  display:flex;
  align-items:center;
  justify-content:center;
}


.reasons__lead{
  color:var(--text);
  text-align:center;
  line-height:1.9;
  padding:24px 16px 8px;
  font-size:13.5px;
}

.reason{padding:32px 16px 8px;}
.reason--pt{padding-top:16px;}
.pointbadge{
  display:block;
  width:120px;
  height:auto;
  margin:0 auto 16px;
}
.reason__heading{
  font-family:"Hiragino Mincho ProN","游明朝","YuMincho","Times New Roman",serif;
  font-weight:600;
  font-size:18px;
  line-height:1.8;
  letter-spacing:.04em;
  color:#E17696;
  text-align:center;
}


/* 受賞パネル：確実センター＆少しワイドに */
.award{
  width: min(400px, calc(100% - 24px));
  margin: 8px auto 12px !important;     /* ← 中央揃え・下余白整える */
  text-align:center;
  position:relative; left:0; right:0;   /* 万一のズレをゼロに */
}
.award img{ display:block; width:100%; height:auto; margin:0 auto; }


/* KPIカード：左右ピンク統一 */
.kpi.kpi--twins{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:16px;
}
.kpiCard{
  background:#fff;
  border:1.5px solid #ee80a1;
  border-radius:18px;
  overflow:hidden;
}
.kpiCard__head{
  background:#ee80a1;
  color:#fff;
  text-align:center;
  font-weight:800;
  font-size:14px;
  line-height:1.35;
  padding:12px 10px;
}
.kpiCard__body{
  padding:8px 12px 10px;
  display:grid;
  place-items:center;
}
.kpiCard__value{
  color:#4A4A4A;
  font-weight:700;
  font-size:44px;
  letter-spacing:.01em;
}
/* メモ風タイトル */
.datacta-tape{
  width:240px;
  padding:14px 10px 12px;
  margin:32px auto 28px;
  background:#fff7fa;
  color:#E17696;
  box-shadow:2px 2px 6px rgba(0,0,0,0.05);
  text-align:center;
  border:1.2px solid #f2c8d4;
  position:relative;
}
.datacta-tape__mask{
  width:46%;
  height:24px;
  margin:-20px auto 0;
  background:#e9bccc;
  transform:rotate(-3deg);
  opacity:.35;
}
.datacta-tape__title{
  margin:8px 0 0;
  font-size:15px;
  font-weight:700;
  letter-spacing:.05em;
  line-height:1.6;
}
/* IBJブロック */
.ibjblock{padding:6px 16px 24px;text-align:center;}
.ibjTitle{
  display:block;
  width:300px;
  max-width:calc(100% - 40px);
  margin:8px auto 10px;
  height:auto;
}
.ibjList{
  width:320px;
  max-width:calc(100% - 40px);
  margin:10px auto 0;
  list-style:none;
  padding:0;
}
.ibjList li{
  display:flex;
  justify-content:center;
  align-items:baseline;
  padding:6px 0;
}
.ibjList .k{
  margin-right:1.2em;
  font-weight:600;
  font-size:16px;
  color:#4A4A4A;
}
.ibjList .v{
  font-weight:600;
  font-size:20px;
  color:#F59BB3;
}
.ibjSub{margin:2px auto 6px;font-size:12px;color:#777;line-height:1;}
.ibjNote{
  margin:8px auto 4px;
  width:320px;
  max-width:calc(100% - 40px);
  font-size:13px;
  color:#6A6A6A;
  line-height:1.9;
}
/* 付箋ラベル */
.labelgroup{text-align:center;}
.labelbar{
  position:relative;
  display:inline-block;
  width:var(--labelbar-w,18ch);
  margin:24px auto 12px;
  padding:8px 2em;
  text-align:center;
  font-weight:700;
  color:#7c5c68;
  background:#f3e8f7;
}
.labelbar::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:8px;
  background:#c786bb;
}
.chart{
  display:block;
  max-width:calc(var(--wrap) - 32px);
  width:100%;
  margin:8px auto 0;
  height:auto;
  border-radius:12px;
}
.caption{
  width:calc(var(--wrap) - 32px);
  margin:8px auto 0;
  text-align:center;
  color:#777;
  font-size:12px;
}

/* ================================
   Reason：POINT03 データ＆円グラフ一式
================================ */
#reasons #reason-03{ text-align:center; }

/* テープ付きメモ（箱は水平、テープのみ斜め） */
#reasons .datacta-tape{
  width:240px;
  padding:14px 10px 12px;
  margin:32px auto 28px;
  background:#fff7fa;
  color:#E17696;
  box-shadow:2px 2px 6px rgba(0,0,0,0.05);
  text-align:center;
  word-break:keep-all;
  border:1.2px solid #f2c8d4;
  position:relative;
}
#reasons .datacta-tape__mask{
  width:50%;
  height:22px;
  margin:-20px auto 0;  /* 紙の上端に少し食い込ませる */
  background:#e9bccc;
  transform:rotate(-3deg);
  opacity:.35;
  border-radius:2px;
}
#reasons .datacta-tape__title{
  margin:8px 0 0;
  font-size:15px;
  font-weight:700;
  letter-spacing:.05em;
  line-height:1.6;
}

/* 成婚数/会員数ブロック */
#reasons .ibjblock{ padding:6px 16px 24px; }
#reasons .ibjTitle{
  display:block; width:420px; max-width:calc(100% - 40px);
  margin:8px auto 10px; height:auto;
}
#reasons .ibjList{
  width:320px; max-width:calc(100% - 40px);
  margin:10px auto 0; padding:0; list-style:none;
}
#reasons .ibjList li{
  display:flex; justify-content:center; align-items:baseline;
  padding:6px 0;
}
#reasons .ibjList .k{
  flex:none; margin-right:1.2em;
  font-weight:600; font-size:16px; color:#4A4A4A; letter-spacing:.01em;
}
#reasons .ibjList .v{
  flex:none; font-weight:600; font-size:20px; color:#F59BB3; letter-spacing:.01em;
}
#reasons .ibjNote{
  width:100%;
  max-width:calc(100% - 24px); /* 両側12px余白のイメージ */
}

/* 見出し付箋（左細線＋帯、角丸なし／幅は --labelbar-w で揃える） */
#reasons .labelbar{
  position:relative; 
  display:inline-block;
  width:var(--labelbar-w, 18ch);
  margin:24px auto 10px;
  padding:6px 1em; /* ★padding少し減らした */
  text-align:center;
  font-weight:700;
  font-size:14px;  /* ★少しだけ小さく */
  color:#7c5c68;
  background:#f3e8f7;
  white-space:nowrap; /* ★改行禁止 */
}


/* 円グラフ画像・注記 */
#reasons .chart{
  display:block; max-width:calc(var(--wrap) - 8px); /* 両サイド4pxだけ余白 */; max-width:560px;
  margin:8px auto 0; height:auto;
}
#reasons .ibjChartNote{
  margin:6px auto 8px; width:calc(100% - 40px); max-width:560px;
  font-size:12px; color:#777; line-height:1.6; text-align:center;
}


/* =======================
   About（マイさん紹介）
======================= */


/* Counselor section (prefix: counselor-) */
#counselor .wrap{ padding:0; }               /* 画像を“横いっぱい”に見せる */

.counselor{ position:relative; }

.counselor-bg{
  position:absolute;
  inset:0;                                    /* セクション内いっぱい */
  width:100%; height:100%;
  object-fit:cover;
  opacity:.95;                                /* 濃さは .90〜1.00で調整可 */
  z-index:0;
  pointer-events:none;
}

/* 人物＋ベージュ帯＋サイン（透過PNG） */
.counselor-photo{
  position:relative;
  display:block;
  width:100%;
  height:auto;
  z-index:1;
}

/* 右上寄せテキスト（顔に被らないよう幅制限） */
.counselor-content{
  position:absolute;
  top:clamp(16px, 5vw, 28px);
  right:16px;
  max-width:60%;                               /* 55〜64%で微調整 */
  z-index:2;
  text-align:left;
}

.counselor-divider{
  height:1px; border:0; margin:6px 0 10px;
  background:#dcd3d1;
}
.counselor-desc{
  margin:0; font-size:14px; line-height:1.9; color:var(--ink);
}

/* 狭幅端末の読みやすさ微調整 */
@media (max-width:380px){
  .counselor-content{ right:12px; max-width:64%; }
  .counselor-desc{ font-size:13.5px; line-height:1.85; }
}

#counselor .counselor-title,
#counselor .counselor-sub {
  color:#fff;                 /* ← 白に固定 */
  -webkit-text-fill-color:#fff; /* ← iOS対策 */
  text-shadow:0 2px 6px rgba(0,0,0,0.12); /* 読みやすさ維持 */
}

/* Counselor typography */
#counselor .counselor-title {
  font-size: clamp(22px, 5.6vw, 28px);  /* 見出し */
  font-weight: 800;
  letter-spacing: .05em;
}

#counselor .counselor-sub {
  font-size: clamp(12px, 3.4vw, 14px);  /* サブ */
  font-weight: 700;
  letter-spacing: .1em;
}

/* Counselor description text size */
#counselor .counselor-desc {
  font-size: clamp(11px, 3.2vw, 13px);
  line-height: 1.9;
}

/* counselor 上端の白フェード（前景オーバーレイ） */
#counselor .wrap::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:clamp(24px, 10vw, 64px); /* ← フェードの深さ調整 */
  background:linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 100%);
  z-index:1;            /* 背景/写真の上、テキストの下 */
  pointer-events:none;
}


/* =======================
   Flow（成婚の流れ）
======================= */

/* Flow：説明ボックス体裁 */
#flow .flow-text{
  background:#fff;
  padding:20px;
  border-radius:16px;
  margin-bottom:24px;
}
/* <p>で囲んでなくても同じ見た目に */
#flow .flow-text, #flow .flow-text p{
  font-size:14px;
  margin:0;
}

/* Flow：余白と位置調整 */
#flow.section{ padding-bottom:0; }
#flow{ padding-top:0; padding-bottom:0; position:relative; }


/* Flow：グラデ全幅（横pad 0固定） */
#flow .flow-grad{
  background:linear-gradient(
    180deg,
    #fc9d7a 0%,
    rgba(252,157,122,0.96) 20%,
    #ee6587 100%
  );
  padding:24px 0 0 !important;
}



#flow .flow-grad img{
  border-radius:0;
  box-shadow:none;
}

/* =======================
   Plan（料金プラン）
======================= */

/* セクション背景＆Flowとの密着 */
#pricing{ background:var(--lavender); padding-bottom:6px; }

#pricing.section{ padding-top:0; }  /* Flow→Pricingのみ密着 */

/* 表の横スクロールラッパー */
.pricing-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin-top:24px;
}

/* テーブル本体 */
.pricing-v2{
  border-collapse:separate;
  border-spacing:0;
  min-width:720px;  /* 横スクロール基点 */
  width:100%;
  text-align:center;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 8px 28px rgba(233,91,142,.10);
  background:#fff;
}

/* セル：崩れ防止＆改行制御 */
.pricing-v2 th,
.pricing-v2 td{
  display:table-cell !important;   /* display崩れ保険（強制） */
  padding:16px;
  border-bottom:1px solid #efdfdf;
  border-right:1px solid #e0d6d6;
  color:var(--ink);
  white-space:nowrap;              /* ← 改行でセル高が暴れるのを防止 */
}
.pricing-v2 th:last-child,
.pricing-v2 td:last-child{ border-right:none; }

/* thead/tbodyのdisplay保険 */
.pricing-v2 thead{ display:table-header-group !important; }
.pricing-v2 tbody{ display:table-row-group !important; }
.pricing-v2 tr{ display:table-row !important; }

/* ヘッダ配色（2列目を主役） */
.pricing-v2 thead th{
  font-weight:800;
  color:var(--ink);
  border-bottom:1px solid #e0d6d6;
}
.pricing-v2 thead th:first-child{ background:#FFF0F4; }
.pricing-v2 thead th:nth-child(2){
  background:linear-gradient(90deg,#EF5D88 0%, #FFA174 100%);
  color:#fff;
}
.pricing-v2 thead th:nth-child(3),
.pricing-v2 thead th:nth-child(4){ background:#FFF0F4; }

/* 行内スタイル（本文） */
.pricing-v2 tbody th{
  text-align:center;
  font-weight:800;
  color:var(--ink);
  background:#fff;
}
.pricing-v2 tbody td:nth-child(2){
  background:#FFF1F6;
  font-weight:700;
  color:#FF6C93;
}
.pricing-v2 tbody td:nth-child(3),
.pricing-v2 tbody td:nth-child(4){
  background:#fff;
  color:var(--ink);
}

/* バッジ・強調価格 */
.badge-now{
  display:inline-block;
  margin-left:8px;
  padding:2px 8px;
  border:2px solid #FF6C93;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  color:#FF6C93;
  background:#fff;
}
.price-strong{
  display:inline-block;
  font-size:20px;
  font-weight:900;
  color:#FF6C93;
  line-height:1.1;
}
.price-sub{
  display:block;
  font-size:12px;
  color:var(--ink);
  margin-top:6px;
}

/* （任意）左端の“項目”だけは改行OKにしたい場合は有効化
.pricing-v2 th:first-child,
.pricing-v2 td:first-child{ white-space:normal; }
*/

/* =======================
   Include（含まれるもの）
======================= */

/* whitebubble：#included の下端／#voices 冒頭（画像でOK） */
#included{ background:#fff; padding-top:8px; padding-bottom:0; position:relative; }

/* 含まれるものタイル */
/* /* =======================
   Include（含まれるもの）
======================= */

/* whitebubble：#included の下端／#voices 冒頭（画像でOK） */
#included{
  background:#fff;
  padding-top:8px;
  padding-bottom:0;
  position:relative;
}

/* 3等分グリッド（幅は自動で完全一致） */
#included .grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  margin-bottom:24px;
}

/* タイル：縦横サイズ“固定”、中央寄せ、見た目揃え */
#included .item{
  box-sizing:border-box;
  background:#fff;
  border:2px solid #f0f0f0;
  border-radius:12px;
  padding:14px 8px;     /* 上下の厚み */
  height:116px;         /* 高さ固定（100〜120の範囲で微調OK） */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
}

/* アイコン：固定サイズ */
#included .item img{
  width:44px;
  height:44px;
  flex:0 0 auto;
  margin:0 auto;
}

/* ラベル：文字サイズ統一＋1行固定（長文は…で省略） */
#included .item div{
  font-size:12.5px;
  font-weight:600;
  color:#EF87AE;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 狭幅端末だけ微縮（任意・保険） */
@media (max-width:380px){
  #included .item div{ font-size:12px; }
}

/* =======================
   Voices（会員の声）whitebubble は #voices 先頭（wrap外）／上paddingゼロで密着
======================= */

/* 背景と上余白の硬化パッチ（密着） */
#voices{ background: var(--lavender); }
#voices.section{ padding-top:0; }  /* ← wrapの外のバブルをすぐ見せる */

/* ラップ外の共通バブル画像（標準化が別所にある場合はそれを優先） */
.bubble-img{
  width:100%;
  max-width:var(--wrap);
  height:auto;
  margin:0 auto;
  display:block;
}

/* スライダー本体 */
#voices .vs__viewport{ overflow:hidden; border-radius:16px; }
#voices .vs__track{
  display:flex; gap:0;
  transition:transform .36s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
#voices .vs__slide{ flex:0 0 100%; min-width:100%; box-sizing:border-box; }
#voices .vs__slide img{ display:block; width:100%; border-radius:12px; }

/* ドット */
#voices .vs__dots{ display:flex; gap:8px; justify-content:center; margin-top:12px; }
#voices .vs__dot{
  width:10px; height:10px; border:none; border-radius:999px;
  background:#F6B2C6; opacity:.7;
}
#voices .vs__dot.is-active{ background:#E95B8E; opacity:1; }

/* 端末で境界に1pxのスジが出たときだけ↓をON（通常は不要）
#voices .bubble-img{ margin-top:-1px; } */



/* =======================
   FAQ（よくある質問）
======================= */

#faq{
  background:linear-gradient(135deg,#F2789F 0%, #FF9F6E 100%);
}

#faq .sec-ttl{
  text-align:center; font-weight:900; font-size:14px; color:#fff; opacity:.95;
  margin:0 0 16px;
}

/* 本体（上下余白統一） */
#faq .faq-list{ display:flex; flex-direction:column; gap:12px; }

/* カード */
#faq .faq-item{
  background:#fff;
  border:2px solid #F4EDEE;
  border-radius:12px;
  overflow:hidden;
}

/* 質問 */
#faq .faq-q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:16px;
  background:#fff;
  border:none;
  text-align:left;
  font-size:15px; font-weight:700;
  color:#555;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
#faq .faq-q:focus-visible{ outline:2px solid rgba(233,91,142,.5); }

/* FAQ：三角アイコン（くるっと回転） */
#faq .faq-q .faq-ic{
  flex:0 0 auto;
  width:0; height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:8px solid #E85A78; /* 三角の色 */
  transition: transform .2s ease, border-top-color .2s ease;
  transform: rotate(0deg);
  /* テキストは使わないので余白だけ少し */
  margin-left:8px;
}
#faq .faq-item.is-open .faq-q .faq-ic{
  transform: rotate(180deg);
  border-top-color:#E95B8E; /* 開いた時に少し色を強く */
}


/* 答え */
#faq .faq-a{
  display:none;
  padding:0 16px 16px;
  font-size:14px;
  line-height:1.7;
  color:#555;
}
#faq .faq-item.is-open .faq-a{ display:block; }
#faq .faq-item.is-open .faq-q .faq-ic{ color:#E95B8E; content:"−"; }


/* =======================
   CTA（最終CTA）
======================= */
/* 最終CTA：カード化＋ボタン映え（安全パッチ） */
/* 最終CTA（h2の色は#EF87AE） */

#final{ 
  background:linear-gradient(180deg,#fff 0%, var(--lavender) 100%); 
  text-align:center; 
  padding:24px 0 16px;
}
#final h2{ color:#EF87AE; }
#final p{ font-size:15px; margin-bottom:20px; }

/* =======================
   Footer（フッター）
======================= */

.site-footer{
  background:#FAF7F8;
  padding:32px 0;       /* ← 横0に統一（中央軸ブレ対策） */
  text-align:center;
}

.footer-links{
  margin-bottom:20px;
  font-size:13px;
}

.footer-links a{
  color:var(--text);
  text-decoration:underline;
}

.footer-sep{
  margin:0 8px;
  color:#ccc;
}

.footer-logo{
  margin-bottom:16px;
}

.footer-logo img{
  width:120px;
  margin:0 auto;
}

.footer-copy{
  font-size:12px;
  color:#999;
}

/* =========================================================
   Spacing Tighten (安全な余白の引き締め・全体）
   - 章の先頭/末尾のダブり余白を自動で潰す
   - いくつかの大きすぎる余白を控えめにする
   ========================================================= */

/* ========== セクション個別の“過剰”だけを軽減 ========== */

/* Flow：本文ブロック間とグラデ上端を控えめに */
#flow .flow-text{ margin-bottom: 16px; }

/* Pricing：テーブル前後の余白だけ圧縮 */
#pricing .pricing-wrap{ margin-top: 12px; margin-bottom: 8px; }

/* Included：タイル間隔＆末尾テキスト下の余白を軽減（バブル重なり考慮） */
#included .grid{ gap: 12px; margin-bottom: 16px; } /* 16px→12px, 24px→16px */
#included .included-text{ padding: 0 20px 16px; }  

/* Voices：スライダー直上の余白を抑える（バブル直下想定） */
#voices .vs__viewport{ margin-top: 8px; }

/* FAQ：カード間隔は現状維持、章の下端だけやや詰めたい場合の保険 */
#faq.section{ padding:24px 0 16px; }  

.reason--pt{ padding-top:16px; display:flow-root; }
.reason--pt > *:first-child{ margin-top:0; }
#final{ padding:24px 0 16px; }