/* ==========================================================
   海の日セミナー2026 LP — ネイビー×ゴールド プレミアム講義調
   スマホ正本（モバイルファースト）
   ========================================================== */

:root{
  --navy-900:#0b1533;
  --navy-800:#12204a;
  --navy-700:#1a2c5e;
  --gold:#c9a44a;
  --gold-light:#e9cd82;
  --red:#a31f2b;
  --cream:#faf6ec;
  --white:#ffffff;
  --ink:#26293a;
  --ink-soft:#4c5165;
  --line:rgba(201,164,74,.35);

  --font-head:"Shippori Mincho","Hiragino Mincho ProN",serif;
  --font-body:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;

  --sp-xs:.5rem; --sp-sm:1rem; --sp-md:2rem; --sp-lg:3.5rem; --sp-xl:5.5rem;
  --container-max:1080px;
  --container-narrow:720px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--ink);
  line-height:1.9;
  font-size:16px;
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.container{max-width:var(--container-max);margin:0 auto;padding:0 20px}
.container.narrow,.narrow{max-width:var(--container-narrow);margin-left:auto;margin-right:auto}
.sp-only{display:inline}
@media(min-width:768px){.sp-only{display:none}}

/* ---------- 汎用 ---------- */
.sec{padding:var(--sp-xl) 0}
.sec-cream{background:var(--cream)}
.sec-white{background:var(--white)}
.sec-navy{background:linear-gradient(160deg,var(--navy-900),var(--navy-800));color:#f3efe2}
.sec-title{
  font-family:var(--font-head);
  font-size:clamp(1.5rem,4.6vw,2.3rem);
  font-weight:800;
  text-align:center;
  line-height:1.55;
  margin-bottom:var(--sp-md);
  letter-spacing:.04em;
}
.sec-navy .sec-title,.sec-final .sec-title{color:var(--gold-light)}
.sec-cream .sec-title,.sec-white .sec-title{color:var(--navy-800)}
.sec-title::after{
  content:"";display:block;width:56px;height:2px;
  background:var(--gold);margin:.9rem auto 0;
}
.sec-lead{text-align:center;margin-bottom:var(--sp-md);color:inherit}
.sec-tag{
  text-align:center;font-weight:700;letter-spacing:.2em;
  color:var(--red);margin-bottom:var(--sp-xs);font-size:.95rem;
}

.prose p{margin-bottom:1.4em}
.prose p:last-child{margin-bottom:0}
.prose-invert{color:#e9e5d6}
.prose .marker{
  font-weight:700;color:var(--navy-800);
  background:linear-gradient(transparent 62%,rgba(201,164,74,.4) 62%);
  padding:0 .1em;
}
.gold{color:var(--gold-light);font-weight:700}
.center{text-align:center}
.mini-title{
  font-family:var(--font-head);font-size:1.25rem;color:var(--gold-light);
  text-align:center;margin-bottom:1rem;letter-spacing:.06em;
}

/* ---------- CTAボタン ---------- */
.cta-wrap{text-align:center;margin-top:var(--sp-md)}
.btn-cta{
  display:inline-block;
  background:linear-gradient(180deg,#d9b45e,#b8923a);
  color:var(--navy-900);
  font-weight:900;
  font-size:1.15rem;
  letter-spacing:.06em;
  text-decoration:none;
  padding:1.05em 2.6em;
  border-radius:999px;
  box-shadow:0 6px 22px rgba(184,146,58,.45),inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .18s ease,box-shadow .18s ease;
}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(184,146,58,.55),inset 0 1px 0 rgba(255,255,255,.55)}
.btn-cta-big{font-size:1.25rem;padding:1.15em 2.2em;line-height:1.5}
.btn-cta-big .btn-sub{display:block;font-size:.78rem;font-weight:700;letter-spacing:.05em;margin-top:.35em}
.btn-cta-small{font-size:.95rem;padding:.75em 1.6em;white-space:nowrap}
.cta-note{text-align:center;font-size:.85rem;margin-top:.8rem;opacity:.85}

/* ---------- ヒーロー ---------- */
.hero{
  background:
    radial-gradient(1200px 500px at 50% -10%,rgba(201,164,74,.18),transparent 60%),
    linear-gradient(165deg,var(--navy-900) 0%,var(--navy-800) 55%,var(--navy-700) 100%);
  color:#f3efe2;
  padding:var(--sp-lg) 0 var(--sp-lg);
  border-bottom:3px solid var(--gold);
}
.hero-label{
  text-align:center;letter-spacing:.28em;font-size:.85rem;font-weight:700;
  color:var(--gold-light);margin-bottom:var(--sp-sm);
}
.hero-title{
  font-family:var(--font-head);
  text-align:center;
  font-size:clamp(1.7rem,6vw,3rem);
  font-weight:800;
  line-height:1.5;
  letter-spacing:.03em;
  margin-bottom:var(--sp-sm);
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.hero-title .x{color:var(--gold-light);padding:0 .08em}
.hero-sub{text-align:center;font-size:clamp(.92rem,2.6vw,1.05rem);opacity:.94;margin-bottom:var(--sp-md)}
.hero-visual{max-width:920px;margin:0 auto var(--sp-md)}
.hero-visual img{
  border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  border:1px solid var(--line);
}
.hero-badges{
  list-style:none;
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  max-width:680px;margin:0 auto;
}
.hero-badges li{
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  border-radius:8px;
  padding:.6em .9em;
  font-size:.88rem;font-weight:500;
  display:flex;align-items:center;gap:.6em;
}
.badge-head{
  flex:none;font-size:.72rem;font-weight:700;color:var(--navy-900);
  background:var(--gold-light);border-radius:4px;padding:.1em .5em;letter-spacing:.1em;
}
.badge-deadline{border-color:var(--gold);background:rgba(201,164,74,.16)}
.badge-deadline .badge-head{background:var(--red);color:#fff}
@media(min-width:768px){
  .hero-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
  .hero-badges li{white-space:nowrap}
}

/* ---------- 実績（証拠） ---------- */
.proof{max-width:820px;margin:var(--sp-md) auto}
.proof-title{
  font-family:var(--font-head);font-size:1.15rem;color:var(--navy-800);
  text-align:center;margin-bottom:var(--sp-sm);letter-spacing:.05em;
}
.stat-row{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:640px){.stat-row{grid-template-columns:repeat(3,1fr)}}
.stat{
  background:var(--white);
  border:1px solid var(--gold);
  border-radius:12px;
  padding:1.3em 1em 1.1em;
  box-shadow:0 4px 18px rgba(38,41,58,.08);
  text-align:center;
}
.stat-label{
  display:block;font-size:.82rem;font-weight:700;color:var(--ink-soft);
  letter-spacing:.08em;margin-bottom:.2em;
}
.stat-value{
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(2rem,6vw,2.6rem);color:var(--navy-800);line-height:1.3;
}
.stat-value small{font-size:.45em;font-weight:700;margin-left:.1em}
.proof-note{text-align:center;font-size:.78rem;color:var(--ink-soft);margin-top:1em}
.proof-grid{display:grid;gap:14px;grid-template-columns:1fr 1fr;margin-top:14px}
.proof-item{
  background:var(--white);
  border:1px solid #e4ddc9;
  border-radius:10px;
  padding:12px;
  box-shadow:0 3px 14px rgba(38,41,58,.08);
  display:flex;flex-direction:column;margin:0;
}
.proof-item img{border-radius:6px;margin:auto}
.proof-small img{max-width:220px}
.proof-item figcaption{
  margin-top:.7em;font-size:.8rem;font-weight:700;color:var(--navy-800);
  text-align:center;line-height:1.6;
}
@media(max-width:640px){
  .proof-grid{grid-template-columns:1fr}
  .proof-small{flex-direction:row;align-items:center;gap:12px}
  .proof-small img{max-width:170px;margin:0}
  .proof-small figcaption{margin-top:0;text-align:left}
}

/* ---------- 冒頭フック ---------- */
.pain-list{list-style:none;margin:1.6em 0;display:grid;gap:10px}
.pain-list li{
  background:var(--white);
  border-left:4px solid var(--red);
  border-radius:6px;
  padding:.8em 1.1em;
  box-shadow:0 2px 10px rgba(38,41,58,.07);
  font-weight:500;
  display:flex;align-items:flex-start;gap:.7em;
}
.pain-icon{flex:none;width:20px;height:20px;color:var(--red);margin-top:.35em}
.declaration{
  font-family:var(--font-head);
  font-size:clamp(1.12rem,3.4vw,1.4rem);
  font-weight:800;color:var(--navy-800);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:1.1em .2em;text-align:center;margin-top:2em;
}

/* ---------- 転換（対比・数字） ---------- */
.compare{
  display:grid;gap:16px;max-width:880px;margin:0 auto var(--sp-md);
}
@media(min-width:768px){.compare{grid-template-columns:1fr 1fr}}
.compare-card{
  border-radius:12px;padding:1.6em 1.4em;
}
.compare-old{background:#f2f1ee;border:1px solid #dcdad2;color:var(--ink-soft)}
.compare-new{
  background:linear-gradient(160deg,var(--navy-800),var(--navy-700));
  color:#f3efe2;border:1px solid var(--gold);
  box-shadow:0 10px 30px rgba(18,32,74,.28);
}
.compare-card h3{
  font-family:var(--font-head);font-size:1.1rem;margin-bottom:.7em;letter-spacing:.05em;
  display:flex;align-items:center;gap:.55em;
}
.compare-new h3{color:var(--gold-light)}
.compare-icon{flex:none;width:24px;height:24px;opacity:.9}
.formula{
  font-weight:700;background:rgba(0,0,0,.06);
  border-radius:8px;padding:.7em .9em;margin-bottom:.9em;font-size:.95rem;
}
.compare-new .formula{background:rgba(255,255,255,.1)}
.compare-new strong{color:var(--gold-light)}

blockquote{
  font-family:var(--font-head);
  font-size:clamp(1.02rem,3vw,1.2rem);
  font-weight:700;color:var(--navy-800);
  border-left:4px solid var(--gold);
  padding:.4em 0 .4em 1.1em;
  margin:1.8em 0;line-height:2;
}

.bignum{text-align:center;margin:var(--sp-lg) auto;max-width:640px}
.bignum-lead{font-weight:500}
.bignum-value{
  font-family:var(--font-head);
  font-size:clamp(4rem,16vw,7rem);
  font-weight:800;color:var(--navy-800);
  line-height:1.1;
  background:linear-gradient(180deg,var(--navy-700),var(--navy-900));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.bignum-value span{font-size:.32em;letter-spacing:.05em}
.bignum-tail{font-size:.95rem;color:var(--ink-soft);margin-top:.6em}

/* ---------- アジェンダ（4パート） ---------- */
.agenda{
  list-style:none;display:grid;gap:16px;max-width:880px;margin:0 auto;
  counter-reset:agenda;
}
@media(min-width:768px){.agenda{grid-template-columns:1fr 1fr}}
.agenda li{
  position:relative;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  border-radius:12px;
  padding:1.6em 1.4em 1.4em;
}
.agenda-num{
  position:absolute;top:-0.85em;left:1.1em;
  font-family:var(--font-head);font-weight:800;font-size:1.15rem;
  color:var(--navy-900);background:linear-gradient(180deg,var(--gold-light),var(--gold));
  width:1.9em;height:1.9em;border-radius:50%;
  display:grid;place-items:center;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}
.agenda-icon{
  display:grid;place-items:center;
  width:56px;height:56px;border-radius:50%;
  background:rgba(233,205,130,.1);
  border:1px solid var(--line);
  color:var(--gold-light);
  margin:.3em 0 .7em;
}
.agenda-icon svg{width:30px;height:30px}
.agenda h3{
  font-family:var(--font-head);font-size:1.12rem;color:var(--gold-light);
  margin:.2em 0 .5em;letter-spacing:.05em;
}
.agenda p{font-size:.94rem;opacity:.94}
#feature .narrow{margin-top:var(--sp-md)}

/* ---------- 講師 ---------- */
.teacher-figure{width:180px;margin:0 auto var(--sp-sm)}
.teacher-figure img{filter:drop-shadow(0 12px 26px rgba(11,21,51,.2))}
@media(min-width:768px){.teacher-figure{width:210px}}

/* ---------- 講師タイムライン ---------- */
.timeline{
  list-style:none;max-width:720px;margin:0 auto var(--sp-md);
  position:relative;padding-left:0;display:grid;gap:14px;
}
.timeline li{
  position:relative;
  background:var(--white);
  border:1px solid #e8e2d2;
  border-radius:10px;
  padding:1em 1.2em 1em 1.2em;
  box-shadow:0 2px 12px rgba(38,41,58,.06);
  line-height:1.8;
}
.tl-badge{
  display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.08em;
  color:var(--white);background:var(--navy-700);
  border-radius:4px;padding:.15em .7em;margin-right:.8em;vertical-align:.12em;
}
.timeline li:nth-child(4) .tl-badge{background:var(--red)}
.timeline li:last-child{border:1px solid var(--gold);background:#fffdf5}
.timeline li:last-child .tl-badge{background:var(--gold);color:var(--navy-900)}

/* ---------- 特典 ---------- */
.gifts{display:grid;gap:26px;max-width:880px;margin:0 auto var(--sp-md)}
@media(min-width:768px){
  .gifts{grid-template-columns:1fr 1fr}
  .gift-wide{grid-column:1/-1;max-width:720px;margin:0 auto}
}

/* 紹介動画（P.S.の直前・YouTube限定公開の埋め込み 2026-07-08） */
#video{margin-top:56px}
.video-figure{max-width:880px;margin:28px auto 44px}
.video-embed{
  aspect-ratio:16/9;
  border-radius:12px;
  border:1px solid var(--line);
  box-shadow:0 18px 50px rgba(11,21,51,.22);
  background:#000;
  overflow:hidden;
}
.video-embed iframe{width:100%;height:100%;display:block;border:0}
.gift img{
  border-radius:10px;
  box-shadow:0 10px 30px rgba(11,21,51,.22);
  border:1px solid rgba(201,164,74,.4);
}
.gift figcaption{margin-top:.8em;font-size:.92rem;line-height:1.8;color:var(--ink-soft)}
.gift figcaption strong{
  display:block;color:var(--navy-800);font-size:1rem;margin-bottom:.15em;
}

/* ---------- 開催概要 ---------- */
.outline-card{
  max-width:760px;margin:0 auto var(--sp-md);
  background:rgba(255,255,255,.04);
  border:1px solid var(--gold);
  border-radius:14px;
  padding:1.2em 1.4em;
  box-shadow:0 14px 40px rgba(0,0,0,.3);
}
.outline-card dl{display:grid;gap:0}
.outline-card dl>div{
  display:grid;grid-template-columns:7em 1fr;gap:.6em;
  padding:.85em .2em;
  border-bottom:1px dashed rgba(201,164,74,.35);
  align-items:baseline;
}
.outline-card dl>div:last-child{border-bottom:none}
.outline-card dt{
  font-size:.82rem;font-weight:700;color:var(--gold-light);letter-spacing:.14em;
}
.outline-card dd{font-size:.98rem}
.outline-card .price{
  font-family:var(--font-head);font-size:2rem;color:var(--gold-light);font-weight:800;
}
.outline-card .price span{font-size:.5em;font-weight:700}
@media(max-width:480px){
  .outline-card dl>div{grid-template-columns:1fr;gap:.1em;padding:.75em .2em}
}
#outline .narrow{margin-top:var(--sp-md)}

/* ---------- ステップ ---------- */
.steps{list-style:none;display:grid;gap:16px;max-width:880px;margin:0 auto}
@media(min-width:768px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{
  background:var(--white);
  border-top:4px solid var(--gold);
  border-radius:10px;
  padding:1.4em 1.3em;
  box-shadow:0 4px 18px rgba(38,41,58,.08);
  text-align:center;
}
.step-num{
  display:inline-block;font-weight:900;letter-spacing:.18em;font-size:.8rem;
  color:var(--gold);border:1px solid var(--gold);
  border-radius:999px;padding:.15em 1em;margin-bottom:.8em;
}
.step-icon{
  display:grid;place-items:center;
  width:56px;height:56px;border-radius:50%;
  background:#fffdf5;
  border:1px solid var(--gold);
  color:var(--navy-700);
  margin:0 auto .7em;
}
.step-icon svg{width:30px;height:30px}
.steps h3{
  font-family:var(--font-head);font-size:1.08rem;color:var(--navy-800);
  margin-bottom:.5em;letter-spacing:.03em;
}
.steps p{font-size:.9rem;color:var(--ink-soft);text-align:left}

/* ---------- FAQ ---------- */
.faq{
  background:var(--cream);
  border:1px solid #eadfc4;
  border-radius:10px;
  margin-bottom:12px;
  overflow:hidden;
}
.faq summary{
  cursor:pointer;list-style:none;
  font-weight:700;color:var(--navy-800);
  padding:1em 2.8em 1em 2.9em;
  position:relative;line-height:1.7;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
  content:"Q";position:absolute;left:1em;top:.95em;
  font-family:var(--font-head);font-weight:800;color:var(--gold);font-size:1.05rem;
}
.faq summary::after{
  content:"＋";position:absolute;right:1em;top:.95em;color:var(--gold);font-weight:700;
  transition:transform .2s ease;
}
.faq[open] summary::after{content:"−"}
.faq p{padding:0 1.2em 1.2em 2.9em;font-size:.94rem;color:var(--ink-soft)}

/* ---------- 最終CTA ---------- */
.sec-final{
  background:
    radial-gradient(900px 400px at 50% 0%,rgba(201,164,74,.22),transparent 65%),
    linear-gradient(180deg,var(--navy-800),var(--navy-900) 70%);
  color:#f3efe2;
  padding:var(--sp-xl) 0;
  border-top:3px solid var(--gold);
}
.final-title{
  font-family:var(--font-head);
  font-size:clamp(1.45rem,5vw,2.2rem);
  font-weight:800;color:var(--gold-light);
  text-align:center;line-height:1.7;margin-bottom:var(--sp-md);
}
.ps{
  max-width:560px;margin:var(--sp-lg) auto 0;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  border-radius:12px;
  padding:1.6em 1.6em;
  font-size:.93rem;line-height:2;
}
.ps p{margin-bottom:1em}
.ps p:last-child{margin-bottom:0}
.ps .sign{text-align:right;font-family:var(--font-head);font-size:1.05rem;letter-spacing:.2em}

/* ---------- フッター ---------- */
.footer{
  background:#070d20;color:#9aa1b8;
  padding:var(--sp-md) 0 6.5rem;
  font-size:.8rem;text-align:center;line-height:2.2;
}
.footer a{color:#c2c8da}
.disclaimer{max-width:640px;margin:0 auto .4em}

/* ---------- 追従CTA ---------- */
.float-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  transform:translateY(110%);
  transition:transform .3s ease;
  pointer-events:none;
}
.float-cta.show{transform:translateY(0);pointer-events:auto}
.float-cta-inner{
  background:rgba(11,21,51,.96);
  border-top:2px solid var(--gold);
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:.7em 16px calc(.7em + env(safe-area-inset-bottom));
}
.float-cta-text{
  color:#f3efe2;font-size:.8rem;font-weight:700;line-height:1.5;
}
@media(min-width:768px){.float-cta-text br.sp-only{display:none}}

/* ---------- スクロール表示 ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}