:root{
  --bg:#0b0f14;
  --fg:#f3f4f6;
  --muted: rgba(243,244,246,.72);
  --accent:#d9c28a;
  --stroke: rgba(255,255,255,.14);
  --shadow: 0 18px 50px rgba(0,0,0,.55);
  --radius: 18px;

  --gradA:#f7e7b3;
  --gradB:#ffffff;
  --gradC:#b7d6ff;
  --gradD:#d9c28a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 900px at 60% 10%, rgba(217,194,138,.18), transparent 55%),
    radial-gradient(900px 800px at 20% 40%, rgba(120,170,255,.10), transparent 55%),
    var(--bg);
  color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 18px;}

@keyframes dot{
  0%{opacity:.2; transform:translate(-50%,0)}
  50%{opacity:1; transform:translate(-50%,9px)}
  100%{opacity:.2; transform:translate(-50%,0)}
}
@keyframes gradMove{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 100% 50%; }
}

/* ===== HERO ===== */
.hero{
  position:relative;
  height:100vh;
  min-height:700px;
  display:flex;
  align-items:flex-end;
  padding-bottom:80px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.00) 0%,
      rgba(0,0,0,.38) 55%,
      rgba(0,0,0,.55) 100%
    ),
    radial-gradient(1200px 700px at 35% 25%, rgba(217,194,138,.22), transparent 60%),
    radial-gradient(900px 650px at 80% 70%, rgba(120,170,255,.14), transparent 60%),
    url("image/hero.png");
  background-size:cover;
  background-position:center;
  filter: brightness(1.12) contrast(1.04) saturate(1.06);
  transform:scale(1.06);
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  backdrop-filter: blur(1px);
  background: radial-gradient(900px 500px at 50% 35%,
      rgba(0,0,0,.06),
      rgba(0,0,0,.22) 65%,
      rgba(0,0,0,.40) 100%
  );
  pointer-events:none;
}
.heroInner{position:relative;z-index:2;width:100%;}

.kicker{
  display:inline-flex; gap:10px; align-items:center;
  padding:8px 12px;
  border:1px solid var(--stroke);
  border-radius:999px;
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
  font-weight:900;
  letter-spacing:.04em;
  color:var(--muted);
}
.dot{
  width:8px; height:8px; border-radius:999px;
  background: var(--accent);
  box-shadow: 0 0 22px rgba(217,194,138,.55);
}

.gradText{
  background: linear-gradient(90deg, var(--gradA), var(--gradB), var(--gradC), var(--gradD));
  background-size: 220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  text-shadow:
    0 10px 30px rgba(0,0,0,.45),
    0 0 28px rgba(217,194,138,.20);
}

.heroTitle{
  margin:14px 0 10px 0;
  font-size: clamp(28px, 3.6vw, 56px);
  line-height:1.05;
  letter-spacing:.02em;
  font-weight:1000;
  animation: gradMove 4.5s linear infinite;
}
.heroDesc{
  margin:0;
  font-size: clamp(14px, 1.4vw, 18px);
  color:var(--muted);
  line-height:1.8;
  max-width:46em;
}

.ctaRow{
  margin-top:22px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 18px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow);
  font-weight:900;
  letter-spacing:.02em;
  cursor:pointer;
  user-select:none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.24);}
.btnPrimary{
  background: linear-gradient(180deg, rgba(217,194,138,.95), rgba(217,194,138,.72));
  color:#121418;
  border-color: rgba(217,194,138,.35);
}
.btnPrimary:hover{background: linear-gradient(180deg, rgba(217,194,138,1), rgba(217,194,138,.78));}

.hint{
  margin:10px 0 0 0;
  font-size:12px;
  color: rgba(243,244,246,.60);
  letter-spacing:.06em;
  display:flex; align-items:center; gap:10px;
}
.scrollIcon{
  width:18px; height:28px; border-radius:99px;
  border:1px solid rgba(255,255,255,.25);
  position:relative;
}
.scrollIcon::after{
  content:"";
  width:4px; height:6px; border-radius:4px;
  background: rgba(255,255,255,.55);
  position:absolute; left:50%; top:6px;
  transform:translateX(-50%);
  animation: dot 1.2s infinite ease-in-out;
}

/* ===== STORY ===== */
.story{position:relative;}
.panel{
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:60px 0;
  position:relative;
  border-top:1px solid rgba(255,255,255,.06);
}
.panelInner{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:22px;
  align-items:center;
}
.frame{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
  position:relative;
  aspect-ratio: 16 / 10;
}
.frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.08);
  filter: contrast(1.05) saturate(1.05);
}
.frameGlow{
  position:absolute; inset:0;
  background:
    radial-gradient(800px 400px at 30% 20%, rgba(217,194,138,.18), transparent 60%),
    radial-gradient(800px 400px at 80% 70%, rgba(120,170,255,.14), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.35));
  pointer-events:none;
}

.textBox{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow);
  padding:22px;
}
.label{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: rgba(243,244,246,.74);
  font-weight:900;
  letter-spacing:.06em;
  font-size:12px;
  margin-bottom:10px;
}
.headline{
  margin:0 0 10px 0;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height:1.15;
  letter-spacing:.01em;
  font-weight:1000;
  animation: gradMove 6.5s linear infinite;
  filter: drop-shadow(0 12px 35px rgba(0,0,0,.35));
}
.desc{
  margin:0;
  color: var(--muted);
  font-size:14px;
  line-height:1.9;
}
.bigWords{
  margin-top:16px;
  padding-top:14px;
  border-top:1px dashed rgba(255,255,255,.18);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.pill{
  padding:7px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  font-weight:900;
  font-size:12px;
  letter-spacing:.02em;
}

.imgBottle{ object-position: 65% 88%; }

/* ===== FINAL ===== */
.final{
  padding:80px 0 90px 0;
  text-align:center;
  border-top:1px solid rgba(255,255,255,.08);
  background: radial-gradient(900px 450px at 50% 0%, rgba(217,194,138,.16), transparent 70%);
  position: relative;
  z-index: 50;
}
.finalTitle{
  margin:0 0 12px 0;
  font-size: clamp(22px, 2.7vw, 38px);
  letter-spacing:.02em;
}
.finalDesc{
  margin:0 auto 22px auto;
  color: var(--muted);
  max-width: 52ch;
  line-height:1.9;
  font-size:14px;
}
.divider{
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  margin-top:22px;
}

/* ===== MORE ===== */
.more{
  padding:70px 0 90px 0;
  border-top:1px solid rgba(255,255,255,.08);
  background: var(--bg);
  position:relative;
  overflow:hidden;
}
.more::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-120px;
  height:340px;
  background: radial-gradient(900px 450px at 50% 0%, rgba(217,194,138,.10), transparent 70%);
  pointer-events:none;
}
.more > .wrap{ position: relative; z-index: 1; }

.moreTitle{
  margin:0 0 10px 0;
  font-size: clamp(20px, 2.6vw, 34px);
  letter-spacing:.02em;
}
.moreLead{
  margin:0 0 26px 0;
  color: rgba(243,244,246,.72);
  line-height:1.9;
  font-size:14px;
  max-width:60ch;
}

.moreBlock{
  margin-top:26px;
  padding:18px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
}
.moreSub{
  margin:0 0 14px 0;
  font-size:16px;
  letter-spacing:.02em;
  color: rgba(243,244,246,.92);
}

.gridCards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.card{
  display:block;
  padding:16px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.08);
  border-color: rgba(217,194,138,.28);
}
.cardTitle{ font-weight:1000; letter-spacing:.02em; margin-bottom:6px; }
.cardText{ color: rgba(243,244,246,.70); line-height:1.8; font-size:13px; }

.moreBottom{ margin-top:22px; text-align:center; }

/* fadeIn 初期状態（JSで外す/アニメさせる前提） */
.fadeIn{ opacity:0; transform: translateY(16px); }

/* ===== LIST BLOCK ===== */
.listBlock{
  margin-top:26px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.10);
}
.listHead{ margin-bottom:10px; }
.listTitle{
  margin:0;
  font-size:22px;
  font-weight:1100;
  letter-spacing:.02em;
}
.listMoreRow{
  margin-top:12px;
  display:flex;
  justify-content:center;
}
.listMoreBtn{
  display:inline-block;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(243,244,246,.92);
  font-weight:900;
  font-size:12px;
}
.listMoreBtn:hover{ background: rgba(255,255,255,.09); }

/* 商品カード（2枚=約800px帯で中央） */
.productGrid{
  margin-top:12px;
  display:flex;
  justify-content:center;
  gap:16px;
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
  flex-wrap:wrap;
}
.pCard{
  flex: 0 0 392px;
  max-width:392px;
  width:392px;

  display:block;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  overflow:hidden;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.pCard:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.09);
  border-color: rgba(217,194,138,.28);
}
.pThumb{
  aspect-ratio: 1 / 1;
  background: rgba(255,255,255,.04);
}
.pThumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.pBody{ padding:12px 12px 14px; }
.pName{ font-weight:1000; font-size:13px; line-height:1.5; }
.clamp2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.pFoot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
}
.pPrice{ font-weight:1000; letter-spacing:.02em; }
.pBtn{
  display:inline-block;
  padding:9px 12px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(217,194,138,.95), rgba(255,255,255,.85));
  color:#111;
  font-weight:1100;
  font-size:12px;
  white-space:nowrap;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}

/* 折りたたみ */
.moreHidden{ display:none; }
.moreHidden.isOpen{ display:contents; }
.moreToggle{
  margin-top:12px;
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(243,244,246,.92);
  font-weight:900;
}
.moreToggle:hover{ background: rgba(255,255,255,.09); }

/* ===== Responsive ===== */
@media (max-width: 920px){
  .panelInner{grid-template-columns:1fr; gap:16px;}
  .hero{min-height:680px}
  .gridCards{ grid-template-columns: 1fr; }
}
@media (max-width: 860px){
  .pCard{
    flex: 1 1 100%;
    max-width: 520px;
    width: 100%;
  }
}


/* ===== SET CONTENT ===== */
.bundle{
  padding: 70px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(900px 450px at 50% 0%, rgba(217,194,138,.10), transparent 70%);
}
.bundleTitle{
  margin:0 0 10px 0;
  font-size: clamp(20px, 2.6vw, 34px);
  letter-spacing:.02em;
}
.bundleLead{
  margin:0 0 18px 0;
  color: rgba(243,244,246,.72);
  line-height:1.9;
  font-size:14px;
  max-width:60ch;
}
.bundleGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.bCard{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow);
  padding: 16px 14px;
}
.bTop{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.bIcon{ font-size:18px; }
.bLabel{
  font-weight:1100;
  letter-spacing:.02em;
}
.bText{
  color: rgba(243,244,246,.72);
  line-height:1.8;
  font-size:13px;
}
.bundleCta{
  margin-top: 16px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ===== FAQ ===== */
.faq{
  padding: 70px 0 80px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: var(--bg);
}
.faqTitle{
  margin:0 0 10px 0;
  font-size: clamp(20px, 2.6vw, 34px);
  letter-spacing:.02em;
}
.faqLead{
  margin:0 0 18px 0;
  color: rgba(243,244,246,.72);
  line-height:1.9;
  font-size:14px;
  max-width:60ch;
}
.faqBox{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.qa{
  border-top: 1px solid rgba(255,255,255,.10);
}
.qa:first-child{ border-top: none; }
.qa summary{
  list-style:none;
  cursor:pointer;
  padding: 16px 16px;
  font-weight: 1000;
  letter-spacing:.01em;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{
  content:"＋";
  float:right;
  color: rgba(243,244,246,.70);
}
.qa[open] summary::after{ content:"－"; }
.qaBody{
  padding: 0 16px 16px;
  color: rgba(243,244,246,.72);
  line-height:1.9;
  font-size:13px;
}
.faqBottom{
  margin-top: 16px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* ===== FOOTER ===== */
.siteFooter{
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding: 26px 0 18px;
}
.footerInner{
  display:flex;
  justify-content:space-between;
  gap: 18px;
  flex-wrap: wrap;
  align-items:flex-start;
}
.footerTitle{
  font-weight:1100;
  letter-spacing:.02em;
  margin-bottom:6px;
}
.footerText{
  color: rgba(243,244,246,.70);
  font-size:13px;
  line-height:1.8;
}
.footerNav{
  display:flex;
  gap: 12px 16px;
  flex-wrap: wrap;
}
.footerNav a{
  color: rgba(243,244,246,.78);
  font-size:12px;
}
.footerNav a:hover{ text-decoration: underline; }
.footerBottom{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(243,244,246,.55);
  font-size:12px;
}

@media (max-width: 920px){
  .bundleGrid{ grid-template-columns: 1fr; }
}



/* FINAL：黒を固定して、金は上だけ */
.final{
  position: relative;
  z-index: 1;                 /* 50やめる（重なり事故を減らす） */
  padding: 80px 0 90px;
  text-align:center;
  border-top: 1px solid rgba(255,255,255,.08);

  /* まず“黒”を確定させる */
  background: var(--bg);
}

/* 上だけ金のスポット */
.final::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(900px 450px at 50% 0%,
    rgba(217,194,138,.16), transparent 70%
  );
  pointer-events:none;
}

/* 下端を黒に溶かして次セクションと繋ぐ */
.final::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height: 120px;
  background: linear-gradient(180deg, rgba(11,15,20,0), rgba(11,15,20,1));
  pointer-events:none;
}