/* ========== Base ========== */
:root{
  --bg:#0b0d10;
  --panel:#12161b;
  --ink:#e8eef6;
  --ink-dim:#b9c4d1;
  --brand:#39d98a;
  --brand-ink:#0d2b1d;
  --line:#233040;
  --accent:#17202a;
  --shadow:0 10px 30px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color:var(--ink);
  background: radial-gradient(1200px 900px at 70% -10%, #0f1720 0%, var(--bg) 60%);
  line-height:1.8;
}

/* containers */
.container{width:min(1120px, 92%); margin-inline:auto}

/* Utilities */
.center{text-align:center}
.sp-break{display:none}
.note{color:var(--ink-dim); font-size:.95rem}
.meta-list{list-style:none; padding:0; margin:1rem 0; color:var(--ink-dim)}
.meta-list li+li{margin-top:.25rem}

/* ========== Header ========== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,13,16,.7); backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{
  display:grid;
  grid-template-columns:auto 1fr auto; /* 左:ブランド / 中:ナビ / 右:アクション */
  align-items:center;
  gap:1rem;
  padding:.8rem 0;
  min-height:56px;
}
.brand{font-weight:800; letter-spacing:.08em; text-decoration:none; color:goldenrod}

/* ナビ */
.nav{display:flex; gap:1.2rem; justify-self:center; flex-wrap:wrap}
.nav a{color:var(--ink); text-decoration:none; opacity:.9}
.nav a:hover{opacity:1}

/* 右端：予約数＋ボタンの塊 */
.header-actions{display:flex; align-items:center; gap:.75rem}

/* ヘッダー内の予約カウンタ（小さめ＆幅ブレ防止） */
.site-header .reserve-box{
  display:inline-flex; align-items:baseline; gap:.35rem;
  padding:.25rem .6rem; border:1px solid var(--line);
  border-radius:999px; background:rgba(255,255,255,.05);
}
.site-header .reserve-label{ color:var(--ink-dim); font-size:.9rem; white-space:nowrap }
.site-header #reserve-counter,
.site-header .reserve-num{
  font-weight:800; color:#fff; font-variant-numeric:tabular-nums;
  font-size:1.1rem; min-width:5ch; text-align:right; /* 桁ぶれ防止 */
}
.site-header .reserve-unit{ color:#fff; opacity:.9 }

/* 共通ボタン */
.btn{
  display:inline-block; padding:.7rem 1rem; border-radius:999px; text-decoration:none; border:1px solid var(--line);
  transition:transform .05s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--brand); color:#08120c; border-color:transparent; font-weight:700}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}

/* ========== Hero ========== */
.hero{padding:6rem 0 3rem; background:linear-gradient(180deg, rgba(57,217,138,.07), transparent 40%)}
.hero-inner{display:grid; grid-template-columns: 1.25fr .9fr; gap:3rem; align-items:center}
.hero-copy h1{font-size: clamp(2rem, 2.7vw, 3rem); line-height:1.2; margin:0 0 .4rem}
.author{color:var(--ink-dim); margin:0 0 1rem}
.tagline{font-size:1.3rem}
.sub{color:var(--ink-dim)}
.hero-cta{margin:1.5rem 0}
.hero-visual .mock{
  background:linear-gradient(145deg, #10161d, #0b0f14); border:1px solid var(--line);
  border-radius:20px; box-shadow:var(--shadow); overflow:hidden
}
.hero-visual img{
  display:block; width:100%; height:auto; object-fit:cover;
  max-width:350px; margin:0 auto;
}

/* ========== Sections ========== */
.section{padding:4rem 0}
.section-accent{background:linear-gradient(180deg, rgba(35,48,64,.35), rgba(23,32,42,.15))}
.section-title{
  font-size: clamp(1.6rem, 2.1vw, 2.2rem);
  margin:0 0 1.2rem;
  position:relative;
}
.section-title::after{
  content:""; display:block; width:98%; height:3px; background:var(--brand);
  margin:.6rem 0 0; border-radius:3px;
}

/* Feature grid */
.feature-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:1.6rem }
.feature-card{
  background:#202020; border:1px solid #2b2b2b; border-radius:18px; overflow:hidden;
  box-shadow:var(--shadow);
  display:grid; grid-template-columns: 1fr 1.2fr; min-height:240px;
}
.feature-media img{
  display:block; width:100%; height:auto; max-width:350px; margin:0 auto;
  border:none; border-radius:4px; background:grey; object-fit:cover;
}
.feature-body{padding:1.2rem 1.2rem 1.4rem}
.feature-body h3{margin:.2rem 0 .4rem}

/* Benefits */
.benefit-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem; margin-top:.8rem }
.benefit-card{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:1.2rem; box-shadow:var(--shadow) }
.benefit-card h3{margin:.2rem 0 .4rem}

/* Timeline */
.timeline{list-style:none; padding:0; margin:1rem 0}
.timeline li{
  display:grid; grid-template-columns: 120px 1fr; gap:1rem;
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:1rem 1rem; margin:.8rem 0;
}
.timeline .time{font-weight:700; color:var(--brand); min-width:120px; white-space:nowrap}
.timeline .event strong{color:#fff}

/* Price table */
.table-wrap{overflow:auto; border:1px solid var(--line); border-radius:16px; background:var(--panel); box-shadow:var(--shadow)}
.price-table{width:100%; border-collapse:collapse; min-width:620px}
.price-table th, .price-table td{padding:.9rem 1rem; border-bottom:1px solid var(--line)}
.price-table thead th{background:rgba(57,217,138,.08); text-align:left}
.price-table tbody tr:hover{background:rgba(255,255,255,.03)}

/* Method */
.method-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; margin-top:.6rem }
.method-card{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:1.2rem; box-shadow:var(--shadow) }

/* Reserve */
.reserve{ background:linear-gradient(180deg, rgba(57,217,138,.07), rgba(35,48,64,.25)) }
.reserve-inner{display:grid; grid-template-columns:1.1fr 1fr; gap:2rem; align-items:center}
.reserve .checklist{margin:1rem 0; padding-left:1.1em}
.reserve .checklist li{margin:.2rem 0}
.reserve-visual img{width:100%; height:auto; display:block; border-radius:18px; border:1px solid var(--line); box-shadow:var(--shadow)}

/* FAQ */
.faq{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:1rem; margin:.8rem 0; box-shadow:var(--shadow)}
.faq summary{cursor:pointer; font-weight:700; outline:none}
.faq .faq-body{color:var(--ink-dim); margin-top:.6rem}

/* Footer */
.site-footer{
  border-top:1px solid rgba(255,255,255,.08);
  background:#0b0f14;
  padding:2rem 0;
  margin-top:2rem;
  color:var(--ink-dim);
  text-align:center;
}
.site-footer .notice{ font-size:.9rem; margin-bottom:1.2rem; color:#aaa }
.site-footer .footer-brand{ margin-bottom:.8rem }
.site-footer .brand{ font-weight:800; font-size:1.3rem; color:goldenrod; letter-spacing:.05em }
.site-footer .copy{ font-size:.85rem; color:#777 }

/* Buttons sizing */
.btn-lg{padding:1rem 1.25rem; font-size:1.05rem}

/* 連絡先ボタン（任意） */
.contact-link{
  display:inline-block; background:#39d98a; color:#08120c;
  padding:.4em .9em; border-radius:6px; text-decoration:none; font-weight:600;
}
.contact-link:hover{ background:#5ff0aa }

/* ==== 大きな数字を使う場合（ヘッダー以外で） ==== */
/* ページ本文などで大きく見せたい時だけ、親要素に .counter-large を付与 */
.counter-large #reserve-counter{
  font-size:64px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums;
}
.counter-large .unit{
  font-size:32px; color:#fff; margin-left:8px;
}

/* ========== Responsive ========== */
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr; gap:2rem}
  .feature-grid{grid-template-columns:1fr}
  .feature-card{grid-template-columns:1fr}
  .benefit-grid{grid-template-columns: repeat(2, 1fr)}
  .method-grid{grid-template-columns:1fr}
  .reserve-inner{grid-template-columns:1fr}
  .timeline{margin-top:1rem}

  /* ヘッダー2段構成 */
  .header-inner{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand actions"
      "nav   nav";
    row-gap:.5rem;
  }
  .brand{ grid-area: brand; }
  .nav{ grid-area: nav; justify-self:start; gap:.9rem }
  .header-actions{ grid-area: actions; justify-self:end }
}
@media (max-width: 560px){
  .sp-break{display:inline}
  .nav{display:none}
  .section{padding:3rem 0}
  .benefit-grid{grid-template-columns:1fr}
  .section-title::after{width:98%}

}

/* スマホ用レイアウト */
@media (max-width: 560px) {
  .nav { display: none; }              /* ナビは隠す */
  .header-actions {
    display: flex;
    flex-direction: column;            /* 縦に並べる */
    align-items: flex-end;
    gap: 0.4rem;
  }
  .reserve-box {
    order: -1;                         /* ボタンより上に表示 */
    font-size: 1rem;
    background: rgba(57,217,138,0.1);  /* 目立つ背景 */
    padding: 0.3em 0.6em;
    border-radius: 6px;
  }
  .reserve-label, .reserve-num, .reserve-unit {
    display: inline-block;
  }
}

/* === Header fix for mobile === */
.header-inner{
  display:flex;
  align-items:center;
  gap:12px;
}
.header-inner > *{ min-width:0; }           /* 子要素のオーバーフロー抑止 */
.nav{ margin-left:auto; }                   /* デスクトップでは右寄せ */
.header-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.reserve-box{
  display:flex;
  align-items:baseline;
  gap:6px;
  padding:.25rem .6rem;
  border-radius:999px;
  background:rgba(57,217,138,.12);
  border:1px solid var(--brand);
  line-height:1;
}
.reserve-label{ white-space:nowrap; }       /* ラベルの途中改行を防止 */
.reserve-num{ font-variant-numeric: tabular-nums; }

/* 予約数のデスクトップ表示は控えめに（ヘッダーなので） */
#reserve-counter{ font-size:1.1rem; font-weight:800; }
.reserve-unit{ font-size:1rem; }

/* スマホ時にレイアウトを1列化して必ず見える位置へ */
@media (max-width: 720px){
  .header-inner{
    display:grid;
    grid-template-columns: 1fr;
    row-gap:.5rem;
  }
  .nav{ display:none; }                     /* モバイルはナビ非表示（必要なら後でハンバーガーへ） */
  .header-actions{
    justify-content:space-between;
    gap:8px;
  }
  .reserve-box{
    order:-1;                               /* 先頭へ（ブランドの下に表示） */
    width:100%;
    justify-content:center;
    font-size:14px;
  }
  #reserve-counter{ font-size:1.1rem; }     /* 数字が大きすぎて潰れないよう抑える */
  .reserve-unit{ font-size:1rem; }
}

/* さらに狭い端末では数値群を少しタイトに */
@media (max-width: 380px){
  .reserve-box{ padding:.2rem .5rem; font-size:13px; }
}

/* === Mobile: 予約数ラベルを必ず見せる === */
@media (max-width: 720px){
  .header-inner{
    display:grid;
    grid-template-columns: 1fr;
    row-gap:.5rem;
  }
  .nav{ display:none; }

  .header-actions{
    display:grid;
    grid-template-columns: 1fr;
    row-gap:.5rem;
  }

  .reserve-box{
    display:grid;                 /* ラベルを上段へ */
    grid-template-columns: 1fr;   /* 1列化 */
    row-gap: 4px;
    width:100%;
    justify-items:center;
    text-align:center;
    padding:.35rem .6rem;
    background:rgba(57,217,138,.12);
    border:1px solid var(--brand);
    border-radius:999px;
  }

  .reserve-label{
    display:block;                /* 必ず表示 */
    white-space:normal;           /* 折り返し可に */
    font-size:13px;               /* 少し小さく */
    line-height:1.2;
    color:var(--ink);
  }

  #reserve-counter{
    font-size:1.25rem;            /* 数字はほどよく大きく */
    font-weight:800;
    font-variant-numeric: tabular-nums;
  }
  .reserve-unit{ font-size:1rem; }

  /* 数字と「部」を横並びに揃えるなら */
  .reserve-num, .reserve-unit{
    display:inline-block;
    vertical-align:baseline;
  }
}

/* かなり狭い端末のときの微調整 */
@media (max-width: 360px){
  .reserve-box{ padding:.3rem .5rem; }
  .reserve-label{ font-size:12px; }
  #reserve-counter{ font-size:1.15rem; }
}

.note.important a {
  color: #0066cc;          /* 常に青 */
  text-decoration: underline;
}
.note.important a:visited {
  color: #0066cc;          /* visited も同じ青 */
}
.note.important a:hover {
  color: #004999;          /* hover 時は少し濃い青 */
}