/* ============================================================
   んめぇ青森フェス2026 LP — clean static stylesheet
   見本(React/Babel/support.js版)を素のHTML+外部CSSで忠実に再現。
   support.js が設定していたCSS変数は既定値を焼き込み済み。
   ============================================================ */

:root {
  /* support.js 既定値の焼き込み（navy / rounded / warm） */
  --img-radius: 16px;
  --photo-filter: saturate(1.06) contrast(1.03);
  --hero-photo-opacity: 0;

  /* fonts */
  --font-mincho: 'Shippori Mincho B1', "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif;
  --font-gothic: 'Noto Sans JP', system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  --font-mono: 'SF Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* palette */
  --navy-darkest: #08202F;
  --navy: #0E2A42;
  --navy-light: #14405F;
  --navy-map: #0b2336;
  --cream: #F6EFE0;
  --offwhite: #FBF6EA;
  --gold: #C19A3E;
  --gold-light: #E7CF94;
  --red: #BE2B2B;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--navy-darkest); }
::selection { background: var(--gold); color: var(--navy-darkest); }
img { display: block; }

@keyframes amf-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* ページ全体の枠 */
.page {
  font-family: var(--font-gothic);
  color: #20303A;
  background: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(1140px, 92vw); margin: 0 auto; }
.wrap--narrow { width: min(1080px, 92vw); margin: 0 auto; }
.mincho { font-family: var(--font-mincho); }

/* セクション共通の小見出しラベル */
.eyebrow { font-size: 13px; letter-spacing: 0.2em; font-weight: 700; }
.section-head { text-align: center; }
.section-head h2 {
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: clamp(24px, 4vw, 40px);
  line-height: 1.4;
  margin: 12px 0 0;
}

/* ============ STICKY HEADER ============ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8, 32, 47, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(193, 154, 62, 0.35);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; height: 62px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__logo { height: 40px; width: 40px; object-fit: contain; }
.brand__name {
  font-family: var(--font-mincho); font-weight: 700; color: var(--offwhite);
  font-size: clamp(15px, 2vw, 18px); letter-spacing: 0.04em; white-space: nowrap;
}
.brand__name .year { color: var(--gold); }
.site-nav { display: flex; align-items: center; gap: clamp(10px, 2vw, 22px); }
.site-nav__link {
  text-decoration: none; color: #D8E0E6; font-size: 13px; font-weight: 500;
  display: none; /* 見本に忠実: 通常リンクは非表示 */
}
.site-nav__cta {
  text-decoration: none; background: var(--gold); color: var(--navy-darkest);
  font-weight: 700; font-size: 13px; padding: 9px 16px; border-radius: 999px; white-space: nowrap;
}

/* ============ HERO ============ */
.hero {
  position: relative; color: var(--offwhite); overflow: hidden;
  background: radial-gradient(120% 90% at 50% -10%, #14405F 0%, #0E2A42 45%, #08202F 100%);
}
.hero__photo {
  position: absolute; inset: 0;
  background-image: url('../assets/media/image29.jpeg');
  background-size: cover; background-position: center;
  opacity: var(--hero-photo-opacity); /* 既定0 = ネイビーグラデのみ */
}
.hero__glow {
  position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 80% 20%, rgba(193, 154, 62, 0.18), transparent 70%);
}
.hero__inner {
  position: relative; width: min(1140px, 92vw); margin: 0 auto;
  padding: clamp(40px, 7vw, 84px) 0 clamp(36px, 5vw, 56px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero__logo {
  width: clamp(118px, 17vw, 168px); height: auto;
  animation: amf-float 6s ease-in-out infinite;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
}
.hero__kicker {
  margin-top: 18px; display: inline-flex; align-items: center; gap: 10px;
  color: var(--gold-light); font-size: clamp(12px, 1.6vw, 14px);
  letter-spacing: 0.22em; font-weight: 700;
}
.hero__kicker .rule { width: 26px; height: 1px; background: var(--gold); }
.hero__title {
  font-family: var(--font-mincho); font-weight: 800;
  font-size: clamp(28px, 5.4vw, 58px); line-height: 1.32;
  margin: 18px 0 0; letter-spacing: 0.02em; text-wrap: balance;
}
.hero__title .accent { color: var(--gold-light); }
.hero__lead {
  margin: 22px 0 0; font-size: clamp(14px, 1.8vw, 17px);
  line-height: 1.9; color: #CBD6DE; max-width: 30em;
}

.facts { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.fact {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(193, 154, 62, 0.4);
  border-radius: 14px; padding: 12px 18px;
}
.fact__label { font-size: 11px; color: var(--gold-light); letter-spacing: 0.12em; font-weight: 700; }
.fact__value { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(15px, 2.2vw, 20px); }
.fact__value small { font-size: 0.7em; opacity: 0.85; }
.fact--free { background: var(--red); gap: 8px; }
.fact--free .fact__value { font-weight: 800; color: var(--offwhite); }
.hero__note { margin: 16px 0 0; font-size: 13px; color: #AEBCC7; letter-spacing: 0.04em; }

.cta-row { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.btn {
  text-decoration: none; font-weight: 700; font-size: clamp(15px, 2vw, 17px);
  padding: 16px 30px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 9px;
}
.btn .arrow { font-size: 1.1em; }
.btn--primary {
  background: var(--gold); color: var(--navy-darkest);
  box-shadow: 0 10px 28px rgba(193, 154, 62, 0.32);
}
.btn--ghost {
  background: transparent; color: var(--offwhite);
  border: 1.5px solid rgba(251, 246, 234, 0.5);
}

.hero__teaser {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px;
}
.hero__teaser .tile { aspect-ratio: 1 / 1; background-size: cover; background-position: center; }
.tile--1 { background-image: url('../assets/media/image19.jpeg'); }
.tile--2 { background-image: url('../assets/media/image21.jpeg'); }
.tile--3 { background-image: url('../assets/media/image31.jpeg'); }
.tile--4 { background-image: url('../assets/media/image28.jpg'); }

/* ============ ABOUT ============ */
.about { background: var(--cream); padding: clamp(56px, 8vw, 104px) 0; }
.about .eyebrow { color: var(--red); }
.about .section-head h2 { color: var(--navy); }
.about__grid {
  margin-top: clamp(32px, 5vw, 56px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(28px, 4vw, 52px); align-items: center;
}
.about__text {
  margin: 0; font-size: clamp(15px, 1.9vw, 17px); line-height: 2.05; color: #33424B;
}
.about__text strong { color: var(--red); }
.about__text strong.navy { color: var(--navy); }
.about__photos {
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 10px;
}
.about__photos figure {
  margin: 0; overflow: hidden; border-radius: var(--img-radius);
  box-shadow: 0 8px 24px rgba(14, 42, 66, 0.12);
}
.about__photos figure img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); }
.about__photos .wide { grid-column: 1 / 3; aspect-ratio: 16 / 9; }
.about__photos .sq { aspect-ratio: 1 / 1; }

/* ============ OVERVIEW ============ */
.overview { background: var(--navy); color: var(--offwhite); padding: clamp(56px, 8vw, 100px) 0; }
.overview .eyebrow { color: var(--gold-light); }
.overview__list { margin: clamp(32px, 5vw, 52px) 0 0; display: grid; gap: 0; border-top: 1px solid rgba(193, 154, 62, 0.3); }
.overview__row {
  display: grid; grid-template-columns: minmax(96px, 160px) 1fr; gap: 8px;
  padding: 18px 4px; border-bottom: 1px solid rgba(193, 154, 62, 0.22); align-items: baseline;
}
.overview__row dt {
  font-family: var(--font-mincho); font-weight: 700; color: var(--gold-light);
  font-size: clamp(14px, 1.8vw, 17px);
}
.overview__row dd { margin: 0; font-size: clamp(15px, 1.9vw, 18px); line-height: 1.7; }
.overview__row dd .muted { color: #AEBCC7; font-size: 0.85em; }

/* ============ NIKU MATSURI ============ */
.niku { position: relative; background: var(--navy-darkest); color: var(--offwhite); overflow: hidden; }
.niku__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); align-items: stretch;
}
.niku__body {
  padding: clamp(48px, 7vw, 90px) clamp(24px, 5vw, 64px);
  display: flex; flex-direction: column; justify-content: center;
}
.niku__body .eyebrow { color: var(--gold-light); }
.niku__body h2 {
  font-family: var(--font-mincho); font-weight: 800;
  font-size: clamp(26px, 4.4vw, 46px); line-height: 1.3; margin: 14px 0 0;
}
.niku__body h2 .accent { color: var(--gold-light); }
.niku__lead { margin: 22px 0 0; font-size: clamp(14px, 1.8vw, 16px); line-height: 2; color: #CBD6DE; }
.niku__lead strong { color: var(--offwhite); }
.niku__banner {
  display: block; margin: 28px 0 0; max-width: 440px;
  border-radius: var(--img-radius); overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); text-decoration: none;
}
.niku__banner img { width: 100%; height: auto; }
.niku__photos {
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 4px; min-height: 340px;
}
.niku__photos figure { margin: 0; overflow: hidden; }
.niku__photos figure img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); }

/* ============ ACCESS ============ */
.access { background: var(--navy); color: var(--offwhite); padding: clamp(56px, 8vw, 100px) 0; }
.access .eyebrow { color: var(--gold-light); }
.access__grid {
  margin-top: clamp(32px, 5vw, 52px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(24px, 3.5vw, 40px); align-items: stretch;
}
.access__map {
  border-radius: var(--img-radius); overflow: hidden;
  border: 1px solid rgba(193, 154, 62, 0.4); min-height: 300px; background: var(--navy-map);
}
.access__map iframe {
  width: 100%; height: 100%; min-height: 340px; border: 0; display: block; filter: grayscale(0.1);
}
.access__info { display: flex; flex-direction: column; justify-content: center; }
.access__info h3 { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(18px, 2.4vw, 22px); margin: 0; }
.access__addr { margin: 8px 0 0; font-size: 14px; color: #CBD6DE; }
.access__list { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.access__list li { display: flex; gap: 12px; align-items: baseline; }
.access__tag {
  flex: none; font-size: 11px; font-weight: 700; color: var(--navy-darkest);
  background: var(--gold-light); border-radius: 6px; padding: 3px 8px;
}
.access__list span:last-child { font-size: 14px; line-height: 1.6; color: #E2E8ED; }
.access__caption { margin: 22px 0 0; font-size: 12px; color: #8b98a1; line-height: 1.7; }

/* ============ FOOTER ============ */
.site-footer {
  background: var(--navy-darkest); color: #CBD6DE;
  padding: clamp(48px, 6vw, 72px) 0 40px; border-top: 1px solid rgba(193, 154, 62, 0.3);
}
.site-footer__inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.site-footer__logo { width: 84px; height: 84px; object-fit: contain; }
.site-footer__name {
  font-family: var(--font-mincho); font-weight: 700; font-size: clamp(18px, 2.4vw, 24px);
  color: var(--offwhite); margin: 18px 0 0; letter-spacing: 0.04em;
}
.site-footer__meta { margin: 8px 0 0; font-size: 13px; color: #AEBCC7; }
.contact {
  margin-top: 30px; background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(193, 154, 62, 0.25); border-radius: 16px;
  padding: 24px 28px; max-width: 520px; width: 100%; text-align: left;
}
.contact__label { font-size: 11px; letter-spacing: 0.16em; color: var(--gold-light); font-weight: 700; }
.contact__org { margin-top: 10px; font-family: var(--font-mincho); font-weight: 700; font-size: 16px; color: var(--offwhite); }
.contact__rows { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; color: #B9C4CC; }
.contact__rows > div { display: flex; gap: 10px; }
.contact__rows .k { color: #7f8c95; min-width: 64px; }
.contact__rows .v { font-family: var(--font-mono); color: var(--gold-light); }
.copyright { margin: 32px 0 0; font-size: 11px; color: #5f6e78; letter-spacing: 0.04em; }
.site-footer__adguild { margin: 14px 0 0; height: 22px; width: auto; opacity: 0.9; }