/* ==========================================================
   ひだまりベーカリー 夏休み限定クーポン特設ページ
   ========================================================== */

:root{
  /* --- Color tokens --- */
  --sea:        #1EA7DA;   /* 夏空・海の青 */
  --tide:       #0B5E8C;   /* 深い海の青 */
  --cream:      #FFF7E4;   /* パンの生地色 */
  --ember:      #F0563E;   /* トマト/金魚すくいの赤 */
  --sunshine:   #FFC93C;   /* ひまわり/レモンの黄 */
  --crust:      #3B2B20;   /* こんがり焼き色(本文) */
  --crust-soft: #6b5847;

  /* --- Type tokens --- */
  --font-display: 'Yomogi', sans-serif;
  --font-body: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', sans-serif;

  --radius-lg: 28px;
  --radius-md: 18px;
  --shadow-card: 0 10px 24px rgba(59,43,32,.12);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--crust);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-family:var(--font-display); font-weight:400; }
p{ margin:0; }
.container{ max-width:1080px; margin:0 auto; padding:0 24px; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

button, .btn{ font-family:var(--font-body); cursor:pointer; }
:focus-visible{ outline:3px solid var(--tide); outline-offset:3px; }

/* ================= HEADER ================= */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:10px 24px;
  background:rgba(255,247,228,.9);
  backdrop-filter:blur(6px);
  border-bottom:3px solid var(--sunshine);
}
.site-header .logo{ height:44px; width:auto; }
.site-nav{ display:flex; gap:6px; align-items:center; }
.site-nav a{
  text-decoration:none;
  font-weight:700;
  font-size:.92rem;
  color:var(--tide);
  padding:8px 14px;
  border-radius:999px;
  transition:background .2s ease, color .2s ease;
  white-space:nowrap;
}
.site-nav a:hover{ background:var(--sea); color:#fff; }
.site-nav .nav-kiyaku{ color:var(--ember); }

/* ================= BUNTING (旗) ================= */
.bunting{
  display:flex;
  overflow:hidden;
  height:26px;
  line-height:0;
}
.bunting span{
  flex:1 0 34px;
  height:26px;
  clip-path:polygon(0 0,100% 0,50% 100%);
  margin-right:4px;
}
.bunting span:nth-child(4n+1){ background:var(--ember); }
.bunting span:nth-child(4n+2){ background:var(--sunshine); }
.bunting span:nth-child(4n+3){ background:var(--sea); }
.bunting span:nth-child(4n+4){ background:#fff; }

/* ================= HERO ================= */
.hero{
  position:relative;
  padding:56px 0 120px;
  background:linear-gradient(180deg, var(--sea) 0%, #56C4EA 55%, #BEE9F7 100%);
  overflow:hidden;
  color:#fff;
  text-align:center;
}
.hero .cloud{
  position:absolute;
  background:#fff;
  border-radius:100px;
  opacity:.85;
  filter:blur(.3px);
  animation:drift 40s linear infinite;
}
.hero .cloud::before, .hero .cloud::after{
  content:'';
  position:absolute;
  background:#fff;
  border-radius:100px;
}
.cloud-a{ width:120px; height:40px; top:12%; left:-10%; }
.cloud-a::before{ width:60px; height:60px; top:-30px; left:15px; }
.cloud-a::after{ width:50px; height:50px; top:-22px; left:60px; }
.cloud-b{ width:90px; height:32px; top:28%; left:60%; animation-duration:55s; animation-delay:-10s; }
.cloud-b::before{ width:44px; height:44px; top:-22px; left:12px; }
.cloud-b::after{ width:36px; height:36px; top:-16px; left:46px; }
@keyframes drift{
  from{ transform:translateX(0); }
  to{ transform:translateX(130vw); }
}
.hero .sun{
  position:absolute;
  top:-70px; right:-40px;
  width:220px; height:220px;
  animation:spin 50s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.hero-inner{ position:relative; z-index:2; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.6);
  padding:6px 18px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.08em;
  margin-bottom:22px;
}
.hero h1{
  font-size:clamp(2.1rem, 5.4vw, 3.4rem);
  line-height:1.5;
  text-shadow:0 4px 18px rgba(11,94,140,.35);
  margin-bottom:18px;
}
.hero h1 em{
  font-style:normal;
  color:var(--sunshine);
  -webkit-text-stroke:1px var(--tide);
}
.hero p.lead{
  max-width:560px; margin:0 auto 30px;
  font-size:1.02rem;
  line-height:1.9;
  color:#eafbff;
}
.hero-ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:44px; }

.btn{
  display:inline-block;
  border:none;
  border-radius:999px;
  padding:15px 34px;
  font-weight:900;
  font-size:1rem;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 8px 0 rgba(0,0,0,.15);
}
.btn:active{ transform:translateY(4px); box-shadow:0 4px 0 rgba(0,0,0,.15); }
.btn-primary{ background:var(--ember); color:#fff; }
.btn-primary:hover{ transform:translateY(-2px); }
.btn-ghost{ background:#fff; color:var(--tide); }
.btn-small{ padding:11px 22px; font-size:.88rem; box-shadow:0 5px 0 rgba(0,0,0,.15); border-radius:999px; }

/* countdown */
.countdown{
  display:inline-flex; gap:10px; flex-wrap:wrap; justify-content:center;
  background:rgba(11,94,140,.35);
  border:1px solid rgba(255,255,255,.5);
  padding:16px 22px;
  border-radius:var(--radius-md);
}
.countdown .cd-label{
  width:100%;
  font-size:.82rem;
  font-weight:700;
  margin-bottom:4px;
  letter-spacing:.05em;
}
.countdown .cd-box{
  background:#fff; color:var(--tide);
  border-radius:12px;
  min-width:58px; padding:8px 4px;
  text-align:center;
}
.countdown .cd-num{ font-size:1.5rem; font-weight:900; line-height:1; display:block; }
.countdown .cd-unit{ font-size:.68rem; font-weight:700; }

/* wave divider */
.wave{ display:block; width:100%; height:80px; margin-top:-2px; }
.wave path{ fill:var(--cream); }

/* ================= SCHEDULE STRIP ================= */
.schedule{ padding:10px 0 70px; }
.schedule h2{ text-align:center; font-size:1.9rem; color:var(--tide); margin-bottom:10px; }
.schedule .sub{ text-align:center; color:var(--crust-soft); margin-bottom:36px; }
.timeline{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  position:relative;
}
.timeline .gap-note{
  grid-column:1/-1;
  text-align:center;
  font-size:.85rem;
  color:var(--crust-soft);
  margin:-4px 0 4px;
}
.t-card{
  background:#fff;
  border:2px solid #ffe3ae;
  border-radius:var(--radius-md);
  padding:18px;
  text-align:center;
  box-shadow:var(--shadow-card);
  position:relative;
  transition:transform .2s ease;
}
.t-card:hover{ transform:translateY(-4px); }
.t-card .term{ font-size:.75rem; font-weight:700; color:var(--ember); letter-spacing:.05em; }
.t-card h3{ font-size:1.5rem; margin:6px 0 4px; color:var(--tide); }
.t-card .dates{ font-weight:700; margin-bottom:10px; }
.t-card .nickname{ font-size:.82rem; color:var(--crust-soft); margin-bottom:12px; }
.status-badge{
  display:inline-block;
  font-size:.72rem; font-weight:900;
  padding:4px 12px; border-radius:999px;
  background:#eee; color:#888;
}
.t-card[data-status="active"] .status-badge{ background:var(--ember); color:#fff; }
.t-card[data-status="active"]{ border-color:var(--ember); box-shadow:0 0 0 4px rgba(240,86,62,.15), var(--shadow-card); }
.t-card[data-status="upcoming"] .status-badge{ background:var(--sunshine); color:var(--crust); }
.t-card[data-status="ended"] .status-badge{ background:#e7e0d3; color:#a99a86; }
.t-card[data-status="ended"]{ opacity:.6; }

/* ================= PERIOD SECTIONS ================= */
.period{ padding:76px 0; }
.period:nth-of-type(odd){ background:#fff; }
.period-head{ text-align:center; max-width:640px; margin:0 auto 44px; }
.period-head .term{ font-weight:700; color:var(--ember); letter-spacing:.08em; font-size:.85rem; }
.period-head h2{ font-size:clamp(1.8rem,4vw,2.5rem); color:var(--tide); margin:8px 0; }
.period-head .dates{ font-weight:700; font-size:1.05rem; margin-bottom:10px; }
.period-head .desc{ color:var(--crust-soft); line-height:1.8; }

.coupon-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:22px;
  margin-bottom:34px;
}
.coupon-card{
  background:var(--cream);
  border:2px dashed #e6c98a;
  border-radius:var(--radius-md);
  padding:26px 22px;
  position:relative;
}
.coupon-card::before{
  content:'';
  position:absolute; left:-9px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%;
  background:var(--cream);
  box-shadow: inset 0 0 0 2px #e6c98a;
}
.coupon-card::after{
  content:'';
  position:absolute; right:-9px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%;
  background:var(--cream);
  box-shadow: inset 0 0 0 2px #e6c98a;
}
.coupon-icon{ font-size:1.8rem; margin-bottom:10px; }
.coupon-card .value{
  font-family:var(--font-display);
  font-size:1.7rem;
  color:var(--ember);
  line-height:1.4;
  margin-bottom:6px;
}
.coupon-card .cond{ font-weight:700; color:var(--tide); margin-bottom:8px; }
.coupon-card .note{ font-size:.82rem; color:var(--crust-soft); line-height:1.7; }

.period-cta{ text-align:center; }
.period-cta .note{ margin-top:12px; font-size:.82rem; color:var(--crust-soft); }

/* ================= ROULETTE ================= */
.roulette-block{
  background:#fff;
  border-radius:var(--radius-lg);
  padding:32px 24px;
  margin:0 0 34px;
  box-shadow:var(--shadow-card);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:32px;
}
.roulette-copy{ max-width:280px; }
.roulette-copy h3{ font-size:1.3rem; color:var(--tide); margin-bottom:8px; }
.roulette-copy p{ color:var(--crust-soft); font-size:.9rem; line-height:1.8; margin-bottom:14px; }

.wheel-wrap{ position:relative; width:200px; height:200px; }
.wheel-pointer{
  position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  width:0; height:0;
  border-left:12px solid transparent;
  border-right:12px solid transparent;
  border-top:20px solid var(--crust);
  z-index:3;
}
.wheel{
  width:200px; height:200px; border-radius:50%;
  border:6px solid var(--crust);
  transition: transform 3.2s cubic-bezier(.15,.75,.1,1);
  box-shadow:0 6px 18px rgba(0,0,0,.2);
}
.wheel-result{
  min-height:1.4em;
  font-weight:900;
  color:var(--ember);
  font-size:1.1rem;
  margin-top:14px;
  text-align:center;
}

@media (prefers-reduced-motion: reduce){
  .hero .cloud, .hero .sun{ animation:none; }
  .wheel{ transition:none; }
}

/* ================= NOTES ================= */
.notes{ background:var(--tide); color:#fff; padding:64px 0; }
.notes h2{ text-align:center; font-size:1.6rem; margin-bottom:28px; }
.notes-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px; margin-bottom:30px;
}
.notes-grid li{
  list-style:none;
  background:rgba(255,255,255,.08);
  border-radius:var(--radius-md);
  padding:18px;
  font-size:.9rem;
  line-height:1.8;
}
.notes-cta{ text-align:center; }

/* ================= FOOTER ================= */
.site-footer{
  background:var(--crust);
  color:#f3e9db;
  padding:44px 0 26px;
  text-align:center;
  font-size:.86rem;
}
.site-footer .foot-logo{ height:34px; margin:0 auto 14px; filter:brightness(0) invert(1); }
.site-footer a{ text-decoration:underline; }
.site-footer .fine{ opacity:.6; margin-top:20px; font-size:.75rem; }

@media (max-width:760px){
  .timeline{ grid-template-columns:1fr; }
  .site-nav a{ padding:8px 10px; font-size:.82rem; }
  .roulette-block{ flex-direction:column; text-align:center; }
}