/* ==========================================================
   夏の岐阜県産グルメ MENU FAIR 2026 — LP stylesheet
   ========================================================== */

:root{
  --gold: #cba25a;
  --gold-light: #e6cd94;
  --gold-deep: #9c7a3a;
  --ink: #0c0c0d;
  --ink-soft: #17171a;
  --paper: #faf7f0;
  --maroon: #7c1626;
  --maroon-light: #a3283b;
  --line: rgba(203,162,90,.35);
  --serif-jp: "Noto Serif JP", serif;
  --serif-en: "Cormorant Garamond", serif;
  --serif-num: "Yu Mincho", "YuMincho", "游明朝体", "游明朝", var(--serif-jp);
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; font-size: 120%; scroll-padding-top: 100px; }
body{
  margin:0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--serif-jp);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,ol{ margin:0; }
section{ position:relative; }

/* スマホ時のみ改行 / PC時のみ改行 */
.br-sp{ display:none; }
.br-pc{ display:inline; }
@media (max-width: 600px){
  .br-sp{ display:inline; }
  .br-pc{ display:none; }
}

/* ---------- shared ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding: .8em 1.8em;
  border-radius: 999px;
  font-size: .85rem;
  letter-spacing: .08em;
  border: 1px solid var(--gold);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.btn--ghost{ color: var(--gold-light); }
.btn--ghost:hover{ background: var(--gold); color: var(--ink); }

/* ---------- header ---------- */
.site-header{
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: linear-gradient(to bottom, rgba(10,10,11,.92), rgba(10,10,11,0));
  padding: .9rem 0;
}
.site-header__inner{
  max-width: 1180px; margin: 0 auto; padding: 0 clamp(1rem,4vw,2rem);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.brand{ display:flex; align-items:center; color: var(--gold-light); }
.brand__logo{ height: clamp(68px,9vw,88px); width:auto; display:block; }
.site-header__nav{ display:flex; gap: 2rem; font-size:.85rem; letter-spacing:.05em; }
.site-header__nav a{ opacity:.8; transition: opacity .25s; }
.site-header__nav a:hover{ opacity:1; }
.site-header__cta{ padding:.6em 1.4em; font-size:.78rem; white-space:nowrap; }
@media (max-width: 780px){
  .site-header__nav{ display:none; }
}
@media (max-width: 480px){
  .site-header__inner{ gap: .6rem; }
  .brand__logo{ height: 56px; }
  .site-header__cta{ padding:.55em 1em; font-size:.68rem; }
}

/* ---------- HERO ---------- */
.hero{
  min-height: 100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding: clamp(6rem,12vh,9rem) 1.5rem 5rem;
  background: var(--ink);
  isolation: isolate;
}
.hero__texture{
  position:absolute; inset:0; z-index:-1;
  background-color: var(--ink);
  background-image: url('../img/pg.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}

.hero__eyebrow{
  font-family: var(--serif-en); letter-spacing:.4em; font-size:.7rem;
  color: var(--gold); text-transform: uppercase; margin-bottom: 1.6rem;
}
.hero__title{ display:flex; flex-direction:column; gap: .5rem; }
.hero__title-jp{
  font-size: clamp(1.9rem, 5.4vw, 3.4rem);
  font-weight: 900; letter-spacing:.06em;
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 55%, var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 2px 30px rgba(203,162,90,.25);
}
.hero__title-en{
  font-family: var(--serif-en); font-weight:500;
  font-size: clamp(2.6rem, 9vw, 6rem);
  letter-spacing:.03em;
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 55%, var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__title-en em{ font-family: var(--serif-num); font-style: normal; font-weight:600; }

.hero__dates{
  margin-top: 2.6rem;
  display:flex; align-items:baseline; justify-content:center; gap: 1rem;
  font-family: var(--serif-num); color: var(--paper);
}
.hero__date-block{ display:inline-flex; align-items:baseline; gap:.25em; }
.hero__date-block .y{ font-size: clamp(1rem,2.4vw,1.4rem); opacity:.75; margin-right:.35em; }
.hero__date-block .m{ font-size: clamp(1.6rem,4vw,2.4rem); }
.hero__date-block .d{ font-size: clamp(2.4rem,6.5vw,4rem); font-weight:600; color: var(--gold-light); }
.hero__date-block .tag{
  font-family: var(--serif-en);
  font-size:.65rem; letter-spacing:.15em; border:1px solid var(--line);
  padding:.25em .6em; border-radius:3px; margin-left:.5em; color: var(--gold);
  align-self:center;
}
.hero__dates-arrow{ font-family: var(--serif-en); color: var(--gold); font-size:1.4rem; opacity:.7; }

.hero__note{
  margin-top: 2rem; font-size:.8rem; color: rgba(250,247,240,.65);
  letter-spacing:.03em;
}

/* wax seal badge */
.seal{
  position:absolute; top: clamp(5.5rem,10vw,7.5rem); right: clamp(1.2rem,4vw,3rem);
  z-index: 5;
  width: clamp(120px,14vw,168px);
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.55));
}
.seal img{ width:100%; height:auto; display:block; }

.scroll-cue{
  position:absolute; bottom: 2rem; left:50%; transform: translateX(-50%);
  width: 22px; height: 36px; border:1px solid var(--line); border-radius: 20px;
}
.scroll-cue span{
  position:absolute; top:6px; left:50%; width:4px; height:8px; margin-left:-2px;
  background: var(--gold); border-radius:2px;
  animation: scrollcue 1.8s infinite var(--ease);
}
@keyframes scrollcue{
  0%{ opacity:1; transform: translateY(0); }
  70%{ opacity:0; transform: translateY(14px); }
  100%{ opacity:0; }
}

/* ---------- COLLAGE ---------- */
.collage{ background: var(--ink); padding: clamp(2rem,5vw,3rem) clamp(1rem,4vw,2rem); }
.collage__grid{
  max-width: 1180px; margin:0 auto;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  aspect-ratio: 4 / 1.6;
}
.tile{
  position:relative; overflow:hidden;
  display:flex; align-items:flex-end; justify-content:center;
}
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tile__label{
  position:relative; z-index:2; margin-bottom: 1.1rem;
  font-size:.72rem; letter-spacing:.15em; color:#fff;
  background: rgba(0,0,0,.38); backdrop-filter: blur(2px);
  padding:.4em 1em; border-radius: 999px; border:1px solid rgba(255,255,255,.25);
}
.tile--nameko{ background: linear-gradient(150deg,#7a4a1a,#c98a2e 55%,#f0b94a); }
.tile--beef{ background: linear-gradient(150deg,#5a1620,#8f2b32 45%,#c96b6a 85%,#e8b3ad); }
.tile--ayu{ background: linear-gradient(150deg,#232a2e,#3f4b4f 50%,#6d7b78); }
.tile--tomato{ background: linear-gradient(150deg,#6e0f14,#b3241f 55%,#e5573b); }
@media (max-width: 720px){
  .collage__grid{ grid-template-columns: repeat(2,1fr); aspect-ratio: auto; }
  .tile{ aspect-ratio: 1; }
}

/* ---------- GOURMET / STORY ---------- */
.gourmet{
  display:grid; grid-template-columns: 1.05fr 1fr;
  background: var(--ink);
}
.gourmet__media{ position:relative; min-height: 420px; background:#111; overflow:hidden;
  background-image: linear-gradient(160deg,#1a1005,#3a2408 40%,#5c3a10 70%,#1a1005);
}
.gourmet__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gourmet__credit{
  position:absolute; left:1rem; bottom:1rem; z-index:2;
  font-size:.65rem; color: rgba(255,255,255,.7); letter-spacing:.05em;
}
.gourmet__body{
  padding: clamp(2.5rem,6vw,5rem) clamp(1.5rem,5vw,4rem);
  display:flex; flex-direction:column; justify-content:center; gap:1.4rem;
}
.gourmet__kicker{ font-family: var(--serif-en); letter-spacing:.35em; font-size:.68rem; color: var(--gold); }
.gourmet__title{ font-size: clamp(1.5rem,3vw,2.1rem); font-weight:700; color: var(--paper); }
.gourmet__title span{ color: var(--gold-light); }
.gourmet__text{ font-size:.92rem; color: rgba(250,247,240,.82); letter-spacing:.02em; }

@media (max-width: 900px){
  .gourmet{ grid-template-columns: 1fr; }
  .gourmet__media{ min-height: 260px; }
}

/* ---------- CAMPAIGN ---------- */
.campaign{ background: var(--ink); }
.campaign__banner{
  background: linear-gradient(120deg, var(--gold-deep), var(--gold) 45%, var(--gold-light) 70%, var(--gold));
  color: var(--ink); text-align:center;
  padding: clamp(1.8rem,4vw,2.6rem) 1.5rem;
}
.campaign__banner h2{
  font-size: clamp(1.15rem,3vw,1.7rem); font-weight:900; letter-spacing:.02em;
}
.campaign__banner h2 span{ display:inline-block; margin-left:.2em; }
.campaign__period{
  margin-top:.8rem; display:inline-flex; align-items:center; gap:.6em;
  font-size:.85rem; font-weight:600;
}
.campaign__period span{
  background: var(--ink); color: var(--gold-light); font-size:.7rem;
  padding:.25em .8em; border-radius:4px; letter-spacing:.1em;
}

.campaign__body{
  max-width: 1100px; margin: 0 auto;
  padding: clamp(2.5rem,6vw,4rem) clamp(1.2rem,4vw,2rem);
  display:grid; grid-template-columns: 3fr 5fr 2fr; gap: clamp(1.5rem,4vw,3rem);
  align-items:center;
}
.campaign__prize{
  background: linear-gradient(160deg, var(--maroon-light), var(--maroon));
  border-radius: 14px; padding: 1.8rem 1.6rem; text-align:center;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.campaign__prize p{ font-size:.85rem; white-space:nowrap; }
.campaign__prize-emph{ margin-top:.6rem !important; font-size:1.05rem !important; }
.campaign__prize-emph strong{ color: var(--gold-light); font-size:1.3em; }

.campaign__steps{ list-style:none; padding:0; display:flex; flex-direction:column; gap:1rem; }
.campaign__steps li{
  display:flex; align-items:center; gap:1rem;
  font-size:.92rem; color: var(--paper); white-space:nowrap;
  border-bottom: 1px solid rgba(203,162,90,.2); padding-bottom:1rem;
}
.campaign__steps li:last-child{ border-bottom:none; }
.campaign__steps .num{
  flex:none; width:2.3rem; height:2.3rem; border-radius:50%;
  background: transparent; color: var(--gold-light);
  border: 1px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--serif-num); font-style:normal; font-weight:600;
  font-size: 1.05rem; letter-spacing:.02em;
  box-shadow: inset 0 0 0 3px rgba(12,12,13,1), inset 0 0 0 4px rgba(203,162,90,.35);
}

.campaign__qr{ display:flex; gap:1.2rem; justify-content:center; }
.qr-card{ display:flex; flex-direction:column; align-items:center; gap:.6rem;  letter-spacing:.05em; color: rgba(250,247,240,.8); transition: opacity .25s; }
.qr-card:hover{ opacity:.75; }
.qr-card__code{
  width: 100px; height:100px; border-radius:10px;
  background: #fff; padding:8px;
}

.campaign__disclaimer{
  text-align:center; font-size:.7rem; color: rgba(250,247,240,.5);
  padding: 0 1.5rem 3rem;
}

@media (max-width: 860px){
  .campaign__body{ grid-template-columns: 1fr; }
  .campaign__qr{ padding-top:.5rem; }
  .campaign__prize p, .campaign__steps li{ white-space:normal; }
}

/* ---------- STORES ---------- */
.stores{ background: var(--ink); padding: 0 0 clamp(2.5rem,6vw,4rem); }
.stores__banner{
  background: linear-gradient(120deg, var(--gold-deep), var(--gold) 45%, var(--gold-light) 70%, var(--gold));
  color: var(--ink); text-align:center;
  padding: clamp(1.2rem,3vw,1.7rem) 1.5rem;
  margin-bottom: clamp(1.8rem,4vw,2.6rem);
}
.stores__banner h2{ font-size: clamp(1rem,2.4vw,1.3rem); font-weight:900; letter-spacing:.02em; }
.stores__banner h2 span{ display:inline-block; font-size:.75em; font-weight:700; margin-left:.4em; }

.stores__grid{
  max-width: 1180px; margin: 0 auto; padding: 0 clamp(1rem,4vw,2rem);
  display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem,2.5vw,1.8rem);
}
.store-card{
  background: var(--ink-soft);
  border: 1px solid rgba(203,162,90,.25);
  border-radius: 10px;
  overflow:hidden;
  display:flex; flex-direction:column;
}
.store-card__photo{
  aspect-ratio: 3/2;
  background:#1a1a1c;
  border-bottom: 1px solid rgba(203,162,90,.25);
}
.store-card__photo img{ width:100%; height:100%; object-fit:cover; }
.store-card__period{
  font-size:.68rem; letter-spacing:.08em; color: var(--gold);
  padding: .9rem 1.1rem 0;
}
.store-card__name{
  font-size:1rem; font-weight:700; color: var(--paper);
  padding: .35rem 1.1rem 0;
}
.store-card__meta{ margin:0; padding: .8rem 1.1rem 1.1rem; display:flex; flex-direction:column; gap:.3rem; }
.store-card__meta div{ display:flex; gap:.5em; font-size:.75rem; color: rgba(250,247,240,.7); }
.store-card__meta dt{ flex:none; color: rgba(250,247,240,.45); }
.store-card__meta dd{ margin:0; }

@media (max-width: 900px){
  .stores__grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px){
  .stores__grid{ grid-template-columns: 1fr; }
}

/* ---------- FOOTER ---------- */
.site-footer{
  background:#050505; text-align:center; padding: 1.6rem;
  font-size:.7rem; color: rgba(250,247,240,.45); letter-spacing:.04em;
}

/* ---------- reveal-on-scroll ---------- */
[data-reveal]{ opacity:0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:none; }