/* =========================================================================
   /web（HP制作のページ）を明るい地にする（2026-10-16 本人「暗い感じなので明るく」）
   style.css の後に、web.html だけが読む。濃い紺の地だった
   ヒーロー・開業記念の料金・「このままだと」・見本の帯・細い帯・フッターを、
   生成りと白の地＋濃い文字に置き換える。色の役（金＝目印・青＝利点・赤＝注意）は変えない。
   元に戻すときは web.html の <link> を1行消す。
   ========================================================================= */
:root{
  --lt-ink:#0a2f38;        /* 見出し・強い文字 */
  --lt-text:#3a4a4d;       /* 本文 */
  --lt-soft:#5f6f72;       /* 補足 */
  --lt-gold:#8a6a10;       /* 明るい地で読める金 */
  --lt-blue:#1565C0;       /* 利点 */
  --lt-red:#C0392B;        /* 注意 */
  --lt-card:#ffffff;
  --lt-line:rgba(168,132,28,.28);
}

/* ---- ヒーロー：動画はうっすら残し、白っぽく洗う ---- */
.hero{ color:var(--lt-ink); }
.hero-fallback{
  background:
    radial-gradient(1000px 600px at 75% 15%, rgba(201,162,39,.14) 0%, rgba(201,162,39,0) 60%),
    linear-gradient(150deg,#fbf8f2 0%,#f4efe4 100%);
}
.hero-bg{ opacity:.35; filter:saturate(.7); }
.hero-overlay{
  background:linear-gradient(180deg, rgba(251,248,242,.80) 0%, rgba(251,248,242,.72) 45%, rgba(251,248,242,.94) 100%);
}
.hero-grain{ display:none; }
.hero .eyebrow{ color:var(--lt-gold); }
.hero .eyebrow::before{ background:var(--lt-gold); }
.hero h1, .hero h1 .l2{ color:var(--lt-ink); text-shadow:none; }
.hero h1 .l1{ color:var(--lt-soft); }
.hero h1 .l2 em{ color:var(--lt-gold); }
.hero-sub{ color:var(--lt-text); }
.hero-sub strong{ color:var(--lt-blue); }
.hero-price b{ color:var(--lt-ink); }
.hero-cond{ color:var(--lt-soft); }
.hero-thumbs img{ border-color:rgba(10,47,56,.14); background:#fff; box-shadow:0 2px 8px rgba(10,47,56,.08); }
.hero-thumbs .more{ color:var(--lt-gold); }
.hero-stats{ color:var(--lt-soft); border-top-color:rgba(10,47,56,.12); }
.hero-stats strong{ color:var(--lt-blue); }
.scroll-hint{ color:var(--lt-soft); }
.hero .btn-outline{ border:1.5px solid var(--lt-gold); color:var(--lt-gold); font-weight:700; }
.hero .btn-outline:hover{ background:var(--lt-gold); color:#fff; border-color:var(--lt-gold); }

/* ---- 開業記念の料金 ---- */
.launch-offer{ background:linear-gradient(160deg,#fffaf0 0%,#f6efdf 100%); }
.launch-ribbon{ box-shadow:0 4px 14px rgba(201,162,39,.25); }
.launch-top-lead{ color:var(--lt-text); }
.launch-arrow{ color:rgba(10,47,56,.3); }
.launch-price-card{ background:var(--lt-card); border-color:rgba(10,47,56,.12); box-shadow:0 8px 24px rgba(10,47,56,.07); }
.launch-price-zero{ border-color:rgba(201,162,39,.55); }
.launch-price-monthly{ border-color:rgba(21,101,192,.35); }
.launch-price-limit{ border-color:rgba(192,57,43,.35); }
.lpc-label{ color:var(--lt-soft); }
.lpc-strike{ color:var(--lt-red); }
.lpc-price-big, .launch-price-monthly .lpc-price-big{ color:var(--lt-blue); text-shadow:none; }
.lpc-note{ color:var(--lt-blue); }
.lpc-slot.used{ background:rgba(10,47,56,.06); color:rgba(10,47,56,.4); }
.lpc-slot.open{ background:rgba(192,57,43,.08); color:var(--lt-red); border-color:rgba(192,57,43,.4); }
.launch-reason{ background:var(--lt-card); }
.launch-reason p{ color:var(--lt-text); }
.launch-reason strong{ color:var(--lt-gold); }
.launch-cta-sub{ color:var(--lt-soft); }

/* ---- 料金比べの表の中の「事業スタート限定価格」の行 ---- */
.cost-row-launch{ background:linear-gradient(135deg,#fffaf0 0%,#f6efdf 100%); }
.cost-launch-badge{ color:var(--lt-gold); border-bottom-color:var(--lt-line); }
.cost-launch-label{ color:var(--lt-soft); }
.cost-launch-num{ color:var(--lt-ink); }
.cost-launch-num strong{ color:var(--lt-blue); }
.cost-launch-sep{ color:rgba(10,47,56,.35); }
.cost-launch-sub{ color:var(--lt-soft); }
.cost-launch-detail{ color:var(--lt-blue); }

/* ---- 「このままだと」：写真は薄く、地は生成り ---- */
.section-future{ background:#f7f3ea; color:var(--lt-text); }
.section-future::before{
  background:
    linear-gradient(180deg, rgba(247,243,234,.78) 0%, rgba(247,243,234,.90) 38%, rgba(247,243,234,.98) 70%, #f7f3ea 100%),
    url('assets/future-bg.webp');
  background-size:cover, cover;
  background-position:center top, center 22%;
  background-repeat:no-repeat, no-repeat;
}
.future-eyebrow{ color:var(--lt-gold); }
.future-title{ color:var(--lt-ink); }
.section-future .section-lead{ color:var(--lt-text); }
.future-stat-card{ background:var(--lt-card); border-color:var(--lt-line); box-shadow:0 10px 28px rgba(10,47,56,.08); }
.fsc-num{
  background:linear-gradient(180deg,#c9a227 0%,#a8841c 55%,#8a6a10 100%);
  -webkit-background-clip:text; background-clip:text; text-shadow:none;
}
.fsc-label{ color:var(--lt-text); }
.fsc-src{ color:var(--lt-soft); }
.future-timeline-title{ color:var(--lt-ink); }
.future-steps{ border-left-color:rgba(10,47,56,.14); }
.future-step::before{ border-color:#f7f3ea; }
.fstep-year{ color:var(--lt-gold); }
.fstep-tag{ background:rgba(201,162,39,.12); color:var(--lt-gold); border-color:var(--lt-line); }
.future-step-final .fstep-tag.danger{ background:rgba(192,57,43,.1); color:var(--lt-red); }
.fstep-body{ color:var(--lt-text); }
.fstep-body strong{ color:var(--lt-ink); background:linear-gradient(transparent 62%, rgba(201,162,39,.28) 0); }
.future-step-final .fstep-body strong{ color:var(--lt-red); background:linear-gradient(transparent 62%, rgba(192,57,43,.16) 0); }
.future-cta-box{ background:var(--lt-card); border-color:var(--lt-line); }
.future-cta-box p{ color:var(--lt-ink); }

/* ---- 見本の帯：地を白に。写真の上の名札は読みやすさのため暗いまま ---- */
.shots, .shots-cap, .shots-more{ background:#fff; }
.shots-cap{ color:var(--lt-text); }
.shots-cap b{ color:var(--lt-ink); }
.shots-more a{ color:var(--lt-ink); border-bottom-color:rgba(10,47,56,.35); }
.shots-more a:hover{ border-bottom-color:var(--lt-ink); }
.shot{ background:#eef0f0; }

/* ---- 見出しと2行だけの帯 ---- */
.section-narrow{ background:#efe7d4; color:var(--lt-text); }
.section-narrow .section-title{ color:var(--lt-ink); }
.section-narrow .section-title::after{ background:linear-gradient(90deg,var(--gold),transparent); }

/* ---- フッター ---- */
.site-footer{ background:#efe7d4; color:var(--lt-ink); border-top:1px solid var(--lt-line); }
.site-footer .note{ color:var(--lt-soft); }
.site-footer a{ color:var(--lt-ink); }

/* =========================================================================
   月額と売り切りを左右に並べて選べる欄（2026-10-16 本人）。#offer の中。
   スマホは上下、720px から左右。左＝月額（金の線）・右＝売り切り（青の線）
   ========================================================================= */
.plan-choice-title{ margin-bottom:10px; }
.plan-choice{
  display:grid; grid-template-columns:1fr; gap:18px;
  max-width:980px; margin:0 auto 32px;
}
@media (min-width:720px){ .plan-choice{ grid-template-columns:1fr 1fr; gap:24px; } }
.plan-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--lt-card); border-radius:16px;
  border:1.5px solid rgba(10,47,56,.12); border-top:6px solid var(--gold);
  box-shadow:0 10px 28px rgba(10,47,56,.08);
  padding:26px 22px 24px;
}
.plan-buyout{ border-top-color:var(--lt-blue); }
.plan-kind{ font-family:var(--goth); font-weight:900; font-size:20px; color:var(--lt-ink); margin:0 0 8px; text-align:center; }
.plan-ribbon{
  align-self:center; display:inline-block; font-size:12px; font-weight:700;
  padding:4px 14px; border-radius:999px; background:rgba(201,162,39,.16); color:var(--lt-gold);
  margin-bottom:16px;
}
.plan-ribbon-own{ background:rgba(21,101,192,.1); color:var(--lt-blue); }
/* 制作費と毎月は同じ大きさ・同じ下端でそろえる（2026-10-18 本人「大きさや位置がそろっていない」） */
.plan-prices{ display:flex; justify-content:center; align-items:flex-end; gap:28px; flex-wrap:wrap; margin-bottom:8px; }
.plan-prices p{ margin:0; text-align:center; }
.plan-plabel{ display:block; font-size:12px; font-weight:700; color:var(--lt-soft); }
.plan-big{ font-family:var(--goth); font-weight:900; font-size:44px; line-height:1.1; color:var(--lt-blue); white-space:nowrap; }
.plan-big small{ font-size:16px; font-weight:700; margin-left:2px; }
.plan-big-sub{ font-size:30px; }
.plan-cond{ font-size:12px; color:var(--lt-soft); text-align:center; line-height:1.7; margin:6px 0 14px; }
.plan-points{ list-style:none; padding:0; margin:0 0 14px; }
.plan-points li{ position:relative; padding:8px 0 8px 22px; font-size:14px; line-height:1.75; color:var(--lt-text); border-bottom:1px dashed rgba(10,47,56,.12); }
.plan-points li::before{ content:"✓"; position:absolute; left:2px; top:8px; color:var(--lt-blue); font-weight:900; }
.plan-points b{ color:var(--lt-ink); }
.plan-for{ font-size:13px; font-weight:700; color:var(--lt-ink); background:#f7f3ea; border-radius:8px; padding:10px 12px; margin:0 0 14px; }
.plan-btn{ margin-top:auto; text-align:center; }
.plan-btn-buyout{ background:var(--lt-blue); color:#fff; border-radius:6px; box-shadow:0 10px 24px rgba(21,101,192,.22); }
.plan-btn-buyout:hover{ box-shadow:0 14px 30px rgba(21,101,192,.3); }
@media (max-width:719px){ .plan-big{ font-size:38px; } .plan-big-sub{ font-size:26px; } }

/* 料金比べの表の「売り切り」の行 */
.cost-row-buyout{ background:#f1f6fd; }
.cost-row-buyout td{ color:var(--lt-ink); }
.cost-row-buyout td:first-child{ color:var(--lt-blue); }
.cost-sub{ font-size:11px; font-weight:400; color:var(--lt-soft); }

/* 料金の比べ表（上の表だけ）：スマホでは1社ずつ縦に積む。
   列が細いと「800,000円〜」が途中で折れて読めないため（2026-10-18） */
@media (max-width: 600px){
  .cost-cmp, .cost-cmp tbody, .cost-cmp tr, .cost-cmp td{ display:block; width:100%; }
  .cost-cmp thead{ display:none; }
  .cost-cmp tr{ border-bottom:1px solid #e3eced; padding:12px 16px; }
  .cost-cmp tr.cost-row-launch{ padding:0; }
  .cost-cmp td{ border:0; padding:4px 0; text-align:left; }
  .cost-cmp tbody td:first-child{ font-size:15px; padding-bottom:6px; }
  .cost-cmp td[data-label]{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
  .cost-cmp td[data-label]::before{ content:attr(data-label); font-size:12px; color:var(--lt-soft); flex:none; }
  .cost-cmp td[data-label] .cost-sub{ flex-basis:100%; text-align:left; font-size:12px; line-height:1.6; }
  .cost-cmp td[data-label] br{ display:none; }
  .cost-cmp .cost-launch-inner{ padding:20px 16px !important; }
}