body { font-family: "Hiragino Sans", "Noto Sans JP", sans-serif; line-height: 1.8; margin: 0; padding: 0; background: #fafafa; }
.container { max-width: 800px; margin: 0 auto; padding: 20px; background: #fff; }
.header img { width: 100%; height: auto; display: block; }
/* 以下、他のCSSもここに移動 */

:root{
  --brand:#d6336c;      /* ピンク */
  --line:#06c755;       /* LINEグリーン */
  --ink:#222;
  --muted:#666;
  --bg:#fafafa;
  --card:#fff;
}

/* ベース */
*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  color:var(--ink);
  line-height:1.85;
  background:var(--bg);
}
img{max-width:100%;height:auto;display:block}

/* ヘッダー画像（確実にレスポンシブ） */
.hero{width:100%}
.hero img{width:100%;height:auto;display:block}

/* レイアウト */
.wrap{max-width:980px;margin:0 auto}
.section{padding:28px 20px}
.section + .section{margin-top:-12px}   /* セクション間を少し詰める */

.card{
  background:var(--card);
  border-radius:8px;                   /* 角丸：控えめ */
  padding:22px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.card>*:last-child{margin-bottom:0}

/* タイポ */
h1{
  margin:0 0 .6em;
  font-size:clamp(22px,3.6vw,34px);
  text-align:center;
  color:var(--brand);
}
h2{
  margin:0 0 .6em;
  font-size:clamp(18px,2.6vw,24px);
}
p,ul{margin:.7em 0}
.note{color:var(--muted);font-size:.92rem}

/* 料金表 */
.price{width:100%;border-collapse:collapse;margin-top:10px}
.price th,.price td{border:1px solid #ddd;padding:12px;text-align:center}
.price th{background:#f6f6f6}

/* ここは既存の変数・ベース・レイアウト・タイポ等そのままでOK */

/* CTA（楕円ボタン：.btn と .btn-pill の両方を同一スタイルに） */
.cta{text-align:center;margin-top:18px}
.btn-pill, .btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--line);color:#fff;text-decoration:none;
  padding:14px 26px;border-radius:9999px;font-weight:700;
  box-shadow:0 4px 14px rgba(6,199,85,.25);
}
.btn-pill:hover, .btn:hover{opacity:.92}
.btn-pill img, .btn img{width:22px;height:22px;display:inline-block}

/* QR（大きすぎ防止） */
.qr{width:180px;max-width:60vw;height:auto;margin:12px auto 0}

/* ヘッダー画像のレスポンシブが必ず効く指定（念のため） */
.hero{width:100%}
.hero img{width:100%;height:auto;display:block}


/* スマホ調整 */
@media (max-width:820px){
  .section{padding:22px 16px}
  .card{padding:18px}
}

/* ---- フッターCTA帯（ピンク帯） ---- */
.band{
  background:#ffe8f0;                 /* 薄いピンク */
  border-top:1px solid #ffd1e0;
  border-bottom:1px solid #ffd1e0;
  padding:24px 20px;
}
.band .wrap{max-width:980px;margin:0 auto;text-align:center}
.band .lead{margin:0 0 14px;font-weight:700}
.band .lead b{color:var(--brand)}
.band .btn-pill, .band .btn{        /* 楕円ボタンを中央に */
  margin:8px auto 12px;
}
.band .qr{
  width:180px;            /* 大きすぎ防止（スマホでは自然に縮む） */
  max-width:48vw;
  height:auto;
  display:block;
  margin:8px auto 12px;
}
.band .copy{
  color:#999;
  font-size:.85rem;
  margin:6px 0 0;
}

/* ==== FAQ（質問ボックス） ==== */
details{
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:8px;
  margin:12px 0;
  overflow:hidden;
}

/* 質問の行（summary）をボタン風に */
details summary{
  list-style:none;                 /* 先頭の黒い▲を消す */
  cursor:pointer;
  font-weight:700;
  padding:14px 16px;
  position:relative;
}
details summary::-webkit-details-marker{ display:none; } /* Safari/Chrome対策 */

/* 開いたときの見た目変化 */
details[open]{ 
  border-color:#ffd1e0;
  box-shadow:0 2px 12px rgba(214,51,108,.08);
}
details[open] summary{ 
  background:#fff5f9;              /* 薄ピンクの行背景 */
}

/* ▼アイコン（CSSで描く） */
details summary::after{
  content:"";
  width:10px; height:10px;
  border-right:2px solid #333;
  border-bottom:2px solid #333;
  transform:rotate(-45deg);        /* ▶ */
  position:absolute; right:16px; top:50%;
  margin-top:-7px;
  transition:transform .2s ease;
}
details[open] summary::after{
  transform:rotate(45deg);         /* ▼ */
}

/* 回答部分（summary以外の中身すべて） */
details > *:not(summary){
  padding:14px 16px;
  border-top:1px solid #eee;
  color:#444;
  background:#fff;
  margin:0;                        /* 余計な余白を消す */
}

/* 画像上に“透明ボタン”を重ねる */
.hero-cta{ position:relative; }
.hero-cta .hotspot{
  position:absolute;
  /* ↓ ボタン範囲を%で指定（位置＆大きさはサイトの画像に合わせて微調整） */
  left:63%;          /* 画像左端からの距離（%） */
  bottom:10%;        /* 画像下端からの距離（%） */
  width:22%;         /* ボタンの幅（%） */
  height:9%;         /* ボタンの高さ（%） */

  /* デバッグ用：位置合わせに使ってOK。合わせ終わったらコメントアウト */
  /* background: rgba(255,0,0,.18); border:1px dashed rgba(255,0,0,.4); */

  border-radius:9999px; /* 楕円のクリック面に */
  display:block;
}

/* 画面が小さい時は少し大きめにする例（必要なら調整） */
@media (max-width: 768px){
  .hero-cta .hotspot{
    left:58%;
    bottom:9%;
    width:28%;
    height:11%;
  }
}