/* ========== Base ========== */
:root{
  --bg:#0b0d10;
  --panel:#12161b;
  --ink:#e8eef6;
  --ink-dim:#b9c4d1;
  --brand:#9984c5;
  --brand-ink:#281e38;
  --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:#171020; 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(153,132,197,.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(153,132,197,.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(153,132,197,.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:#9984c5; color:#171020;
  padding:.4em .9em; border-radius:6px; text-decoration:none; font-weight:600;
}
.contact-link:hover{ background:#b5a0d2 }


/* Compact text features and page sample */
a,a:visited{color:var(--brand)}
a:hover{text-decoration:underline}
.brand,.brand:visited{color:goldenrod}
.nav a,.nav a:visited{color:var(--ink)}
.btn-primary,.btn-primary:visited{color:#171020}
.btn-ghost,.btn-ghost:visited{color:var(--ink)}
.header-inner{display:flex;flex-wrap:wrap;gap:1rem}
.nav{margin-left:auto;gap:1rem}
.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.feature-card{display:block;min-height:0;border-radius:14px}
.feature-body{padding:1.2rem 1.4rem}
.feature-body h3{margin:0 0 .6rem;font-size:1.1rem;line-height:1.55}
.feature-body p{margin:0;font-size:.96rem;line-height:1.85}
.bpa-sample{display:block;width:100%;height:auto;border:1px solid #666;box-shadow:0 0 12px rgba(255,255,255,.08)}
.sample-figure{margin:0}
.sample-figure figcaption{margin-top:.7rem;color:var(--ink-dim);font-size:.9rem}
.reserve-inner{display:block}
.hero-visual .mock{margin:0}
.hero-copy h1{line-height:1.45}
.hero-copy h1 small{display:block;font-size:.65em;margin-top:.35rem}
.timeline li{grid-template-columns:180px 1fr}
.price-table{min-width:0}
section[id]{scroll-margin-top:90px}
@media(max-width:980px){.hero-inner{grid-template-columns:1fr;gap:2rem}.hero-visual{max-width:400px;margin:auto}.method-grid{grid-template-columns:1fr}.nav{gap:.7rem;font-size:.9rem}}
@media(max-width:600px){.nav{display:none}.header-inner{justify-content:space-between}.hero{padding:3rem 0 1.5rem}.section{padding:2.5rem 0}.feature-grid{grid-template-columns:1fr}.feature-body{padding:1.1rem 1.2rem}.timeline li{grid-template-columns:1fr;gap:.3rem}.price-table th,.price-table td{padding:.75rem .8rem}.hero-copy h1{font-size:1.8rem}.hero-cta{display:flex;flex-wrap:wrap;gap:.6rem}}

/* カバーの外枠を画像幅に合わせ、左右の余白をなくす */
.hero-visual .mock{width:100%;max-width:350px;margin:0 auto;border-radius:0;background:none}
.hero-visual img{width:100%;max-width:none;margin:0}

/* 同じ縦横比の写真を揃え、文章量が違っても画像の上端を合わせる */
.feature-card{display:flex;flex-direction:column}
.feature-photo{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1754 / 1240;
  object-fit:contain;
  flex-shrink:0;
  margin: auto 0 0;
  border-top:1px solid #2b2b2b;
}

/* 写真キャプション */
p.cp,
.feature-body p.cp{
  margin:.65rem 0 0;
  font-size:.78rem;
  line-height:1.6;
  font-weight:400;
  color:var(--ink-dim);
}
.feature-card > p.cp{
  margin:0;
  padding:.65rem 1.2rem .9rem;
}

/* 写真付きの2カードは本文・画像・キャプションの行を共有 */
.feature-grid > .feature-card:nth-child(-n+2){
  display:grid;
  grid-row:span 3;
  grid-template-rows:subgrid;
  row-gap:0;
}
.feature-grid > .feature-card:nth-child(-n+2) > .feature-photo{
  margin:0;
  align-self:start;
}
@media(max-width:600px){
  .feature-grid > .feature-card:nth-child(-n+2){
    display:flex;
    flex-direction:column;
    grid-row:auto;
  }
}

/* 写真付きカードを1列のグリッドにし、写真を枠いっぱいに表示 */
.feature-grid > .feature-card:nth-child(-n+2){
  grid-template-columns:minmax(0,1fr);
}
.feature-grid > .feature-card:nth-child(-n+2) > .feature-photo{
  width:100%;
  max-width:none;
  min-width:0;
  justify-self:stretch;
}

/* カバー直下のキャプションは画像と同じ幅 */
.hero-visual .mock > p.cp{
  width:100%;
  max-width:none;
  margin:.65rem 0 0;
  padding:0;
  text-align:left;
}

/* 境界線は写真のみ。キャプションは枠の外側に置く */
.hero-visual .cover-block{width:100%;max-width:350px;margin:0 auto}
.hero-visual .cover-block .mock{width:100%;max-width:none;margin:0}
.hero-visual .cover-block > p.cp{width:100%;margin:.65rem 0 0;padding:0;text-align:left}

/* 予約部数カウンター */
.reservation-counter{display:flex;align-items:baseline;gap:.35rem;flex-wrap:wrap;padding:.35rem .75rem;border:1px solid var(--brand);border-radius:12px;background:rgba(153,132,197,.1);font-size:.9rem}
.reservation-counter strong{font-size:1.2rem;color:var(--brand);font-variant-numeric:tabular-nums}
.reservation-counter small{color:var(--ink-dim);font-size:.75rem}
@media(max-width:720px){.reservation-counter{order:3;width:100%;justify-content:center}}