/* =========================================================
   鈴木Web製作所 制作サンプル：パーソナルジム「そらいろ」LP型（1ページ）
   /samples/gym-sorairo-lp/
   noindex ／ 架空・汎用の見本
   ========================================================= */
:root{
  --ink:#1a1a1a; --ink-soft:#4a4a4a; --ink-sub:#7a7a7a;
  --black:#141414; --black-2:#222;
  --yellow:#f5b41d; --yellow-d:#d99a06; --yellow-l:#fdf3dc;
  --bg:#ffffff; --bg-soft:#f6f6f6;
  --line:#e2e2e2; --line-green:#06C755; --red:#e0402f;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:66px}
body{font-family:'Zen Kaku Gothic New',sans-serif;background:var(--bg);color:var(--ink);line-height:1.8;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1080px;margin:0 auto;padding:0 1.4rem}
section{padding:4.4rem 0}
@media(max-width:760px){section{padding:3rem 0}}

/* サンプルバナー（追従させない） */
.sample-banner{background:var(--black);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);text-align:center;padding:8px 16px;font-size:.88rem;font-weight:800;letter-spacing:.04em}

/* ヘッダー（これだけ追従） */
header.site{position:sticky;top:0;z-index:100;background:rgba(20,20,20,.96);color:#fff}
header.site .inner{max-width:1180px;margin:0 auto;padding:.7rem 1.2rem;display:flex;align-items:center;gap:1rem}
header.site .brand{font-weight:900;font-size:1.05rem;letter-spacing:.02em;line-height:1.25}
header.site .brand small{display:block;font-weight:400;font-size:.66rem;color:#b9b9b9;letter-spacing:.02em}
header.site nav{margin-left:auto;display:flex;gap:1.1rem;font-size:.83rem;font-weight:700}
header.site nav a:hover{color:var(--yellow)}
header.site .h-cta{display:flex;gap:.5rem;align-items:center;margin-left:.8rem}
.h-tel{font-weight:900;font-size:1.02rem;letter-spacing:.02em;white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;font-weight:800;border-radius:6px;padding:.75rem 1.3rem;font-size:.92rem;line-height:1.3}
.btn.y{background:var(--yellow);color:#1a1a1a;box-shadow:0 4px 0 var(--yellow-d)}
.btn.line{background:var(--line-green);color:#fff;box-shadow:0 4px 0 #05a544}
.btn.sm{padding:.55rem 1rem;font-size:.82rem;box-shadow:none}
@media(max-width:1000px){header.site nav{display:none}}
@media(max-width:600px){.h-tel{display:none}}

/* ヒーロー */
/* 2026-09-09 鈴木さん指摘：ヒーローの文字をもう少し下へ（全体的に） */
.hero{position:relative;min-height:78svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--black)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .veil{position:absolute;inset:0;background:linear-gradient(100deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.15) 45%,rgba(0,0,0,0) 75%),linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.28) 100%)} /* 2026-09-07 鈴木さん判断：暗幕を最小に（D案） */
.hero .inner{position:relative;z-index:2;max-width:1080px;margin:0 auto;padding:3rem 1.4rem 3.6rem;color:#fff;width:100%}
/* 2026-09-09：縦が低いPC（670px前後）でヒーローが画面からはみ出していたので詰める */
/* 幅900px以下×縦が低い端末（横向きスマホ・小さいタブレット）も同様に詰める */
@media (max-width:900px) and (max-height:720px){
  .hero{min-height:0;height:calc(100svh - 126px)}
  .hero .inner{padding:1.2rem 1.4rem 1.6rem}
  .hero h1{font-size:1.8rem}
  .hero .kicker{margin-bottom:.7rem;font-size:.76rem}
  .hero .cta{margin-top:1rem}
}
@media (min-width:901px) and (max-height:720px){
  .hero{min-height:0;height:calc(100svh - 100px)}
  .hero .inner{padding:1.6rem 1.4rem 2rem}
  .hero h1{font-size:2.2rem}
  .hero .sub{margin-top:.6rem;font-size:.94rem}
  .hero .marks{margin-top:.9rem}
  .hero .cta{margin-top:1.1rem}
}
.hero .kicker{display:inline-block;background:var(--yellow);color:#1a1a1a;font-weight:900;font-size:.82rem;padding:.35rem .9rem;border-radius:3px;margin-bottom:1.1rem}
.hero h1{font-family:'Shippori Mincho B1',serif;font-size:clamp(2rem,4.6vw,3.5rem);font-weight:700;line-height:1.28;letter-spacing:.06em;text-shadow:0 2px 10px rgba(0,0,0,.45)} /* 2026-09-07 鈴木さん判断：見出しは細身の明朝（3案） */
.hero h1 em{font-style:normal;color:var(--yellow)}
.hero .sub{font-family:'Shippori Mincho B1',serif;margin-top:1rem;font-size:1.02rem;font-weight:600;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.hero .marks{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.hero .marks span{background:rgba(255,255,255,.94);color:#1a1a1a;font-weight:800;font-size:.8rem;border-radius:999px;padding:.4rem .9rem}
.hero .cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}

/* キャンペーン帯 */
.campaign{background:var(--black);color:#fff;padding:2.2rem 0}
.campaign .box{border:2px solid var(--yellow);border-radius:10px;padding:1.4rem 1.2rem;text-align:center}
.campaign .lb{display:inline-block;background:var(--red);color:#fff;font-weight:900;font-size:.82rem;padding:.3rem .9rem;border-radius:3px;margin-bottom:.7rem}
.campaign h2{font-size:clamp(1.3rem,3vw,2rem);font-weight:900;letter-spacing:.01em}
.campaign .price{margin-top:.6rem;font-size:1.05rem;font-weight:700}
.campaign .price del{color:#a9a9a9;font-weight:500;margin-right:.5rem}
.campaign .price b{font-size:clamp(2.2rem,6vw,3.4rem);color:var(--yellow);letter-spacing:-.01em;vertical-align:-.06em}
.campaign .note{margin-top:.5rem;font-size:.78rem;color:#b5b5b5}

/* 見出し */
.sec-head{text-align:center;margin-bottom:2.4rem}
.sec-head h2{font-size:clamp(1.5rem,3.2vw,2.1rem);font-weight:900;line-height:1.4}
.sec-head h2 em{font-style:normal;color:var(--yellow-d)}
.sec-head p{margin-top:.6rem;color:var(--ink-soft);font-size:.95rem}
.sec-head .bar{width:56px;height:5px;background:var(--yellow);border-radius:3px;margin:.9rem auto 0}

/* 悩み */
.worry{background:var(--bg-soft)}
.worry ul{max-width:720px;margin:0 auto;list-style:none}
.worry li{background:#fff;border-left:5px solid var(--yellow);border-radius:4px;padding:.9rem 1.1rem;margin-bottom:.7rem;font-weight:700;font-size:1rem}
.worry li::before{content:"✓";color:var(--yellow-d);font-weight:900;margin-right:.6rem}
.worry .after{text-align:center;margin-top:1.8rem;font-size:1.1rem;font-weight:900}
.worry .after em{font-style:normal;background:linear-gradient(transparent 62%,var(--yellow) 62%)}

/* 選ばれる理由 */
.reasons .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media(max-width:900px){.reasons .grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.reasons .grid{grid-template-columns:1fr}}
.reason{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.reason img{aspect-ratio:4/3;object-fit:cover;width:100%}
.reason .body{padding:1rem 1.1rem 1.3rem}
.reason .n{display:inline-block;background:var(--black);color:var(--yellow);font-weight:900;font-size:.78rem;padding:.2rem .6rem;border-radius:3px;margin-bottom:.5rem}
.reason h3{font-size:1.08rem;font-weight:900;line-height:1.5}
.reason p{margin-top:.5rem;font-size:.9rem;color:var(--ink-soft)}

/* ビフォーアフター */
.results{background:var(--black);color:#fff}
.results .sec-head h2,.results .sec-head p{color:#fff}
.results .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media(max-width:900px){.results .grid{grid-template-columns:1fr}}
.result{background:#1f1f1f;border-radius:10px;padding:1.1rem}
.result .ba{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.result .ph{aspect-ratio:3/4;background:repeating-linear-gradient(45deg,#2b2b2b,#2b2b2b 10px,#333 10px,#333 20px);border-radius:6px;display:flex;align-items:center;justify-content:center;color:#8b8b8b;font-size:.78rem;font-weight:700;text-align:center;padding:.5rem}
.result .num{margin-top:.9rem;text-align:center}
.result .num b{display:block;font-size:2.2rem;font-weight:900;color:var(--yellow);line-height:1.2}
.result .num small{color:#b5b5b5;font-size:.8rem}
.results .disc{margin-top:1.6rem;text-align:center;font-size:.8rem;color:#b0b0b0}

/* 料金 */
.price-wrap{max-width:760px;margin:0 auto}
.plan{border:2px solid var(--black);border-radius:10px;overflow:hidden;margin-bottom:1.2rem}
.plan.reco{border-color:var(--yellow-d)}
.plan .ph{background:var(--black);color:#fff;padding:.8rem 1.1rem;font-weight:900;display:flex;justify-content:space-between;align-items:center}
.plan.reco .ph{background:var(--yellow-d)}
.plan .ph .tag{background:var(--yellow);color:#1a1a1a;font-size:.72rem;padding:.2rem .6rem;border-radius:3px}
.plan .pb{padding:1.2rem 1.2rem 1.4rem;text-align:center}
.plan .pb .amt{font-size:2.6rem;font-weight:900;letter-spacing:-.01em}
.plan .pb .amt small{font-size:1rem;font-weight:700}
.plan .pb ul{list-style:none;margin-top:.8rem;font-size:.92rem;color:var(--ink-soft)}
.plan .pb li::before{content:"・"}

/* 声 */
.voices{background:var(--bg-soft)}
.voices .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media(max-width:900px){.voices .grid{grid-template-columns:1fr}}
.voice{background:#fff;border-radius:10px;padding:1.2rem;border:1px solid var(--line)}
.voice .who{font-weight:900;margin-bottom:.5rem;font-size:.95rem}
.voice p{font-size:.92rem;color:var(--ink-soft)}

/* 流れ */
.flow .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:860px){.flow .steps{grid-template-columns:repeat(2,1fr)}}
.step{background:#fff;border:1px solid var(--line);border-radius:10px;padding:1.1rem;text-align:center}
.step .n{width:34px;height:34px;border-radius:50%;background:var(--yellow);color:#1a1a1a;font-weight:900;display:flex;align-items:center;justify-content:center;margin:0 auto .6rem}
.step h3{font-size:1rem;font-weight:900}
.step p{font-size:.86rem;color:var(--ink-soft);margin-top:.4rem}

/* Q&A */
.qa details{background:#fff;border:1px solid var(--line);border-radius:8px;margin-bottom:.7rem;padding:.9rem 1.1rem}
.qa summary{font-weight:800;cursor:pointer;font-size:.98rem}
.qa p{margin-top:.6rem;font-size:.92rem;color:var(--ink-soft)}

/* アクセス */
.access-table{width:100%;border-collapse:collapse;font-size:.93rem}
.access-table th,.access-table td{border:1px solid var(--line);padding:.75rem .9rem;text-align:left}
.access-table th{background:var(--bg-soft);width:28%;white-space:nowrap}
.map-wrap{margin-top:1.2rem;border-radius:10px;overflow:hidden}
.map-wrap iframe{width:100%;height:340px;border:0;display:block}

/* 最終CTA */
.last{background:var(--yellow);text-align:center}
.last h2{font-size:clamp(1.4rem,3.4vw,2.2rem);font-weight:900;line-height:1.4}
.last p{margin-top:.7rem;font-weight:700}
.last .cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.4rem}
.last .btn.y{background:#1a1a1a;color:#fff;box-shadow:0 4px 0 #000}
.note{font-size:.78rem;color:var(--ink-sub);margin-top:1rem}

/* フッター */
footer.site{background:var(--black);color:#cfcfcf;padding:2rem 0 5.5rem;font-size:.85rem;text-align:center}

/* スマホ下部固定CTA */
.fixed-cta{position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;gap:.5rem;padding:.55rem .7rem;background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:0 -4px 14px rgba(0,0,0,.1)}
.fixed-cta .btn{flex:1;box-shadow:none;padding:.8rem}
@media(max-width:760px){.fixed-cta{display:flex}}

/* ===== スマホのヒーロー整理（2026-09-07 鈴木さん判断・他社4社の実測に合わせる）：写真の上はキャッチ＋ボタン1つ、説明文とタグは写真の下の帯へ ===== */
.marks-strip{display:none}
@media(max-width:600px){
  .hero{min-height:68svh}
  /* 2026-09-09 鈴木さん指摘（2回目）：スマホはもっと下でよい */
  .hero .inner{padding-bottom:4.6rem}
  .hero .sub,.hero .marks{display:none}
  .hero .cta .btn.line{display:none}
  .hero .cta .btn.y{width:100%;text-align:center}
  .hero h1{font-size:2.15rem}
  .marks-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem .6rem;padding:.9rem 1rem;background:#141414}
  .marks-strip span{color:#fff;font-size:.8rem;font-weight:700;padding:.55rem .6rem;border:1px solid rgba(255,255,255,.35);border-radius:6px;text-align:center}
  .marks-strip span:last-child{grid-column:1/-1;background:var(--yellow);color:#1a1a1a;border-color:var(--yellow)}
}