/* ==========================================================================
   秦野市本町商店会連合会 共通プレミアム商品券 2026 LP
   ========================================================================== */

:root {
  --brand-orange: #e8791f;
  --brand-orange-dark: #c8600f;
  --brand-orange-light: #fdf1e2;
  --brand-green: #1a7a4c;
  --brand-green-dark: #125c39;
  --brand-red: #d92b2b;
  --brand-cream: #fff8ee;
  --brand-navy: #2c2a26;
  --radius-lg: 1rem;
  --radius-md: .6rem;
}

body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  color: var(--brand-navy);
  background-color: #fffdf9;
}

a { color: var(--brand-orange-dark); }
a:hover { color: var(--brand-red); }

/* ---------- Header ---------- */
.site-header {
  background: #fff;
  border-bottom: 3px solid var(--brand-orange);
}

.site-header .navbar-brand {
  font-weight: 700;
  line-height: 1.3;
  color: var(--brand-navy);
}

.site-header .navbar-brand small {
  display: block;
  font-size: .68rem;
  font-weight: 500;
  color: var(--brand-green-dark);
  letter-spacing: .05em;
}

.site-header .nav-link {
  font-weight: 600;
  color: var(--brand-navy);
  white-space: nowrap;
}

.site-header .navbar-nav {
  flex-wrap: wrap;
  row-gap: .25rem;
  column-gap: 1rem;
}

@media (min-width: 992px) and (max-width: 1300px) {
  .site-header .navbar-nav {
    font-size: .92rem;
  }
  .site-header .navbar-nav.gap-lg-3 {
    gap: .75rem !important;
  }
}

.site-header .nav-link:hover {
  color: var(--brand-orange-dark);
}

/* ---------- Hero (modern) ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fff3df 0%, #fffdf9 100%);
  padding: 4rem 0 6.5rem;
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}

.hero-blob-1 {
  width: 26rem;
  height: 26rem;
  top: -9rem;
  right: -7rem;
  background: radial-gradient(circle, rgba(232,121,31,.35) 0%, rgba(232,121,31,0) 70%);
}

.hero-blob-2 {
  width: 20rem;
  height: 20rem;
  bottom: -8rem;
  left: -6rem;
  background: radial-gradient(circle, rgba(26,122,76,.20) 0%, rgba(26,122,76,0) 70%);
}

.hero > .container {
  position: relative;
  z-index: 1;
}

.hero-badge {
  display: inline-block;
  background: #fff;
  border: 1.5px solid var(--brand-orange);
  color: var(--brand-orange-dark);
  font-weight: 700;
  border-radius: 50rem;
  padding: .4rem 1.1rem;
  font-size: .85rem;
  box-shadow: 0 3px 10px rgba(200, 96, 15, .12);
}

.hero-title {
  font-weight: 800;
  letter-spacing: .01em;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  line-height: 1.35;
}

.btn-hero-primary {
  background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-dark) 100%);
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: 50rem;
  padding: .75rem 1.75rem;
  box-shadow: 0 8px 20px rgba(18, 92, 57, .28);
  transition: transform .15s ease, box-shadow .15s ease;
}

.btn-hero-primary:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(18, 92, 57, .32);
}

.btn-hero-ghost {
  background: rgba(255, 255, 255, .6);
  color: var(--brand-navy);
  font-weight: 700;
  border: 1.5px solid var(--brand-navy);
  border-radius: 50rem;
  padding: .75rem 1.75rem;
  transition: background .15s ease, transform .15s ease;
}

.btn-hero-ghost:hover {
  background: var(--brand-navy);
  color: #fff;
  transform: translateY(-2px);
}

.premium-badge {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  background: linear-gradient(135deg, #f2c14e, #d99a1f);
  color: #5a3a00;
  font-weight: 800;
  border-radius: 50rem;
  padding: .3rem 1.1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

.price-panel {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(6px);
  border-radius: 1.4rem;
  box-shadow: 0 20px 45px rgba(120, 80, 20, .16);
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, .6);
}

.price-panel .big-num {
  color: var(--brand-red);
  font-weight: 800;
  line-height: 1;
}

.price-panel .plus {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brand-navy);
}

.price-panel .value-num {
  color: var(--brand-green-dark);
  font-weight: 800;
}

.price-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
}

.price-stat {
  background: var(--brand-orange-light);
  border-radius: .9rem;
  padding: .85rem 1rem;
  text-align: left;
}

.price-stat-label {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  color: var(--brand-orange-dark);
  letter-spacing: .04em;
  margin-bottom: .2rem;
}

.price-stat-value {
  display: block;
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--brand-navy);
  line-height: 1.3;
}

.usage-period-bar {
  background: var(--brand-red);
  color: #fff;
  border-radius: 50rem;
  font-weight: 700;
  padding: .6rem 1.3rem;
  box-shadow: 0 6px 16px rgba(217, 43, 43, .25);
}

/* ---------- Section titles ---------- */
.section-title {
  font-weight: 800;
  position: relative;
  padding-bottom: .6rem;
  margin-bottom: 1.75rem;
}

.section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3.2rem;
  height: 4px;
  background: var(--brand-orange);
  border-radius: 3px;
}

.section-title.text-center::after {
  left: 50%;
  transform: translateX(-50%);
}

section { scroll-margin-top: 90px; }

.bg-cream { background-color: var(--brand-cream); }

/* ---------- Poster (modern showcase, overlaps hero) ---------- */
.poster-section {
  position: relative;
  z-index: 2;
  margin-top: -4rem;
  padding-bottom: 3rem;
}

.poster-showcase {
  position: relative;
  max-width: 460px;
  background: #fff;
  border-radius: 1.4rem;
  padding: .6rem;
  box-shadow: 0 24px 50px rgba(44, 42, 38, .22);
}

.poster-ribbon {
  position: absolute;
  top: -.75rem;
  left: 1.25rem;
  background: var(--brand-red);
  color: #fff;
  font-weight: 800;
  font-size: .82rem;
  padding: .35rem 1rem;
  border-radius: 50rem;
  box-shadow: 0 4px 10px rgba(217, 43, 43, .35);
  z-index: 1;
}

.poster-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
}

/* ---------- Remaining-stock widget ---------- */
.stock-card {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid #f0e2cb;
  box-shadow: 0 6px 18px rgba(120, 80, 20, .08);
  padding: 1.75rem;
}

.stock-figure {
  font-weight: 800;
  color: var(--brand-green-dark);
}

.stock-figure .unit {
  font-size: 1.1rem;
  font-weight: 700;
  margin-left: .2rem;
}

.stock-progress {
  height: 1.15rem;
  border-radius: 50rem;
  background: #f1e6d2;
}

.stock-progress .progress-bar {
  background: linear-gradient(90deg, var(--brand-orange), var(--brand-green));
}

.stock-meta {
  font-size: .85rem;
  color: #6b6155;
}

.stock-status-badge {
  font-weight: 700;
  font-size: .8rem;
}

#stockError {
  display: none;
}

#stockLoading {
  display: none;
}

/* ---------- Schedule timeline ---------- */
.timeline-card {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid #f0e2cb;
  box-shadow: 0 6px 16px rgba(120, 80, 20, .07);
  height: 100%;
}

.timeline-card .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--brand-green);
  color: #fff;
  font-weight: 800;
  flex-shrink: 0;
}

.timeline-card .card-header {
  background: var(--brand-orange-light);
  border-bottom: 1px solid #f0e2cb;
  font-weight: 700;
}

.timeline-card .date-range {
  color: var(--brand-red);
  font-weight: 800;
  font-size: 1.15rem;
}

.note-box {
  background: #fff4f0;
  border: 1px solid #f3c9be;
  border-radius: var(--radius-md);
  padding: .8rem 1rem;
  font-size: .92rem;
}

.note-box.warn strong { color: var(--brand-red); }

.tbd-box {
  background: #fff9e8;
  border: 1px solid #ecdb9e;
  border-radius: var(--radius-md);
  padding: .8rem 1rem;
  font-size: .92rem;
}

/* ---------- Terms list ---------- */
.terms-list li {
  margin-bottom: .55rem;
  padding-left: 1.6rem;
  position: relative;
}

.terms-list li::before {
  content: "○";
  position: absolute;
  left: 0;
  color: var(--brand-orange-dark);
}

/* ---------- 現金のみ 強調バッジ ---------- */
.cash-badge {
  display: inline-block;
  background: var(--brand-red);
  color: #fff;
  font-weight: 800;
  padding: .08rem .55rem;
  border-radius: .35rem;
  font-size: .95em;
  white-space: nowrap;
}

/* ---------- 商店会クイックフィルタ「すべて表示」ボタン ---------- */
.area-quick-btn-all {
  background: #fff;
  color: var(--brand-green-dark);
  border: 1px solid var(--brand-green);
  font-weight: 700;
}

.area-quick-btn-all:hover {
  background: var(--brand-green);
  color: #fff;
}

.area-quick-btn-all.active {
  background: var(--brand-green);
  color: #fff;
  border-color: var(--brand-green);
}

/* ---------- Store search ---------- */
.search-panel {
  background: #fff;
  border: 1px solid #f0e2cb;
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: 0 6px 16px rgba(120, 80, 20, .06);
  position: sticky;
  top: 72px;
  z-index: 10;
}

.area-section-title {
  background: var(--brand-navy);
  color: #fff;
  font-weight: 700;
  padding: .5rem 1rem;
  border-radius: var(--radius-md);
  display: inline-block;
}

.store-count-badge {
  background: var(--brand-green);
}

.store-card {
  background: #fff;
  border: 1px solid #eee1cc;
  border-radius: var(--radius-md);
  padding: .8rem 1rem;
  height: 100%;
  transition: box-shadow .15s ease, transform .15s ease;
}

.store-card:hover {
  box-shadow: 0 4px 12px rgba(120, 80, 20, .12);
  transform: translateY(-1px);
}

.store-card .genre-badge {
  font-size: .72rem;
  background: var(--brand-orange-light);
  color: var(--brand-orange-dark);
  border: 1px solid #f0d3a4;
  font-weight: 700;
}

.store-card .store-name {
  font-weight: 700;
}

.store-card .store-note {
  font-size: .78rem;
  color: var(--brand-red);
}

#noResults {
  display: none;
}

.result-count {
  font-weight: 700;
  color: var(--brand-green-dark);
}

/* ---------- Onsite (day-of) sale highlight section ---------- */
.onsite-section {
  background: linear-gradient(180deg, #fff4e2 0%, #fffdf9 100%);
  border-top: 1px solid #f1e3cd;
  border-bottom: 1px solid #f1e3cd;
}

.onsite-card {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid #f0e2cb;
  box-shadow: 0 8px 20px rgba(120, 80, 20, .1);
  overflow: hidden;
  height: 100%;
}

.onsite-card-head {
  padding: 1.1rem 1.25rem 0.9rem;
}

.onsite-day-badge {
  background: var(--brand-red);
  color: #fff;
  font-weight: 800;
  font-size: .9rem;
  padding: .35rem .8rem;
}

.onsite-card iframe {
  width: 100%;
  height: 100%;
}

.onsite-card-body {
  padding: 1rem 1.25rem 1.25rem;
}

.onsite-card-body li {
  padding: .15rem 0;
}

/* ---------- Google form ---------- */
.gform-wrap {
  max-width: 720px;
  background: #fff;
  border: 1px solid #f0e2cb;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.gform-wrap iframe {
  display: block;
}

/* ---------- Download cards ---------- */
.download-card {
  background: #fff;
  border: 1px solid #f0e2cb;
  border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .9rem;
  height: 100%;
}

.download-card .icon {
  font-size: 1.6rem;
  color: var(--brand-orange-dark);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--brand-navy);
  color: #efe7d8;
}

.site-footer a { color: #ffd9a0; }

.back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1030;
  display: none;
}

@media (max-width: 767.98px) {
  .search-panel { position: static; }
  .price-panel .big-num { font-size: 2.5rem; }
  .poster-section { margin-top: -2.5rem; }
  .price-stats-grid { grid-template-columns: 1fr 1fr; }
}