/* =========================================================
   資フェス Vol.2 in Kitakyushu — LP styles
   - Mobile-first (~750px design base)
   - PC enhancements via @media (min-width: 1024px)
   ========================================================= */

:root {
  --bg-dark: #71341c;          /* hero auburn */
  --bg-dark-2: #5a1d12;        /* footer */
  --bg-cream: #f3e6cb;         /* body cream */
  --bg-cream-2: #ede1c5;
  --card-bg: #f7ecd4;
  --text-dark: #2a1812;
  --text-cream: #fcf7ed;       /* extracted (252,247,237) */
  --gold-title: #fdf3a0;       /* extracted (252,242,158) - 資フェス Vol.2 in K */
  --gold-shout: #f7e68a;       /* extracted (247,230,138) - 開催決定 */
  --burnt-orange: #c45233;     /* extracted (196,82,51) - ? / etc */
  --dark-brown: #693822;       /* extracted (105,56,33) - story title */
  --card-title-red: #873d24;   /* extracted (135,61,36) - card titles */
  --card-body-red: #75392c;    /* extracted (117,59,46) */
  --accent-red: #d23a1f;       /* apply button */
  --accent-red-shadow: #311f14;
  --accent-brown: #7a3826;
  --wave-navy: #0e1a4a;
}

* { box-sizing: border-box; }

/* ============================================================
   FONT MAPPING (from PSD analysis)
   ------------------------------------------------------------
   PSD uses these typefaces (Morisawa):
     - PKanteiryuStdN-Ultra (勘亭流) → all decorative headings
     - PShueiMGoStd-B / PShueiMGoStdN-B (秀英丸ゴシック B) → sub-headings
     - PShueiMGoStd-L / PShueiMGoStdN-L (秀英丸ゴシック L) → body copy

   Closest free web substitutes:
     - Kanteiryu  → "Reggae One" (Google Fonts) — heavy stroked Japanese display
                    fallback chain to Yusei Magic, then system 勘亭流 if installed.
     - 秀英丸B    → "M PLUS Rounded 1c" @ weight 700-900
     - 秀英丸L    → "M PLUS Rounded 1c" @ weight 300-400
   ============================================================ */

:root {
  --font-kantei: "Reggae One", "Kaisei Decol", "Yusei Magic",
                 "勘亭流", "PKanteiryuStd-Ultra", "M PLUS Rounded 1c",
                 "Hiragino Sans", sans-serif;
  --font-marugo: "M PLUS Rounded 1c", "Zen Maru Gothic",
                 "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic",
                 "Noto Sans JP", sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-marugo);
  font-weight: 400;  /* L (Light) — matches 秀英丸L body default */
  color: var(--text-dark);
  background: var(--bg-dark);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* (Top padding removed — the sukesan-udon header below is sticky and
   takes its space in normal flow, so the body content already sits
   under it without extra padding.) */

/* Utility: apply Kanteiryu treatment to any heading element */
.font-kantei { font-family: var(--font-kantei); font-weight: 400; }
.font-marugo-b { font-family: var(--font-marugo); font-weight: 700; }
.font-marugo-l { font-family: var(--font-marugo); font-weight: 400; }

/* ============================================================
   IMAGE-BASED TITLES (rasterized from PSD's PKanteiryu-Ultra)
   For Kanteiryu (勘亭流) — no free Web font equivalent exists,
   so we use PNG renders straight out of the PSD. Source assets
   are 2x for crisp display on retina.
   ============================================================ */
.img-title {
  margin: 0;
  text-align: center;
  line-height: 0;          /* kill inline-img baseline gap */
}
.img-title img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

/* Per-section sizing — width % is of the parent container */
.img-title--sukefes-en img { width: 86%; max-width: 480px; }
.img-title--kaisai img     { width: 64%; max-width: 360px; margin-top: 4px; }
.img-title--events img     { width: 60%; max-width: 360px; }
.img-title--card img       { width: 88%; max-width: 460px; }
.img-title--limited img    { width: 60%; max-width: 240px; margin-bottom: 4px; }
.img-title--souvenir img   { width: 92%; max-width: 360px; margin-bottom: 6px; }
.img-title--hero-intro img { width: calc(100% + 48px); max-width: none; margin-left: -24px; margin-bottom: 6px; }
.img-title--intro-combo img { width: 100%; max-width: 690px; margin: 18px auto 24px; }

/* (PC img-title overrides removed — center content uses SP sizes verbatim) */

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* =========================================================
   Site chrome (PC-only)
   ========================================================= */
.site-chrome { display: none; }

@media (min-width: 1024px) {
  .site-chrome {
    display: block;
    background: #fff;
    border-bottom: 1px solid #eee;
    position: relative;
    z-index: 10;
  }
  .site-chrome__inner {
    max-width: 1480px;
    margin: 0 auto;
    padding: 14px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  .site-chrome__brand img { height: 44px; width: auto; }
  .site-chrome__nav { display: flex; gap: 28px; }
  .site-chrome__nav a {
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    color: #1d1d1d;
    letter-spacing: .04em;
  }
  .site-chrome__nav a:hover { color: var(--accent-red); }
  .site-chrome__crumbs {
    background: var(--wave-navy);
    color: #fff;
    padding: 8px 32px;
    font-size: 12px;
    display: flex;
    gap: 12px;
    align-items: center;
  }
  .site-chrome__crumbs a { text-decoration: underline; }
}

/* =========================================================
   PC HERO  (only shown at ≥1024px)
   Mirrors the PC PSD's header area: 3-column layout with the
   round 資フェス stamp on the left, big calligraphic logo in the
   center, and the QR code box on the right. Plus scattered
   fireworks decorations and waves at the bottom.
   ========================================================= */
.pc-hero { display: none; }

@media (min-width: 1024px) {
  .pc-hero {
    display: block;
    position: relative;
    background: var(--bg-dark);
    padding: 30px 0 0;
    overflow: hidden;
    min-height: 640px;
  }
  .pc-hero__fw {
    position: absolute;
    opacity: .85;
    pointer-events: none;
    z-index: 1;
  }
  .pc-hero__fw--tl  { top: 30px;  left: 1.5%;  width: 12%; max-width: 250px; }
  .pc-hero__fw--ml  { top: 240px; left: 22%;   width: 8%;  max-width: 160px; }
  .pc-hero__fw--tr2 { top: 80px;  right: 22%;  width: 11%; max-width: 220px; }
  .pc-hero__fw--tr  { top: 30px;  right: -1%;  width: 16%; max-width: 320px; }

  .pc-hero__intro {
    position: relative;
    z-index: 3;
    text-align: center;
  }
  .pc-hero__intro .img-title { margin: 0 0 6px; }
  .pc-hero__intro img {
    display: inline-block;
    height: auto;
    max-width: 460px;
    width: 32%;
    min-width: 360px;
  }

  .pc-hero__main {
    display: grid;
    grid-template-columns: 1fr 1.7fr 1fr;
    align-items: center;
    gap: 24px;
    max-width: 1480px;
    margin: 24px auto 0;
    padding: 0 32px;
    position: relative;
    z-index: 3;
  }
  .pc-hero__col {
    text-align: center;
  }

  .pc-hero__stamp {
    width: 64%;
    max-width: 240px;
    margin: 0 auto;
    display: block;
  }
  .pc-hero__vol {
    color: var(--text-cream);
    font-family: var(--font-kantei);
    margin: 14px 0 0;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .pc-hero__vol-num {
    color: var(--accent-red);
    font-size: 28px;
    letter-spacing: .04em;
  }
  .pc-hero__vol-date {
    color: var(--text-cream);
    font-size: 16px;
    letter-spacing: .02em;
  }

  .pc-hero__bigLogo {
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
    display: block;
  }
  .pc-hero__date {
    display: block;
    width: 55%;
    max-width: 320px;
    margin: 6px auto 0;
  }

  .pc-hero__qrLabel {
    display: block;
    margin: 0 auto 10px;
    width: 100%;
    max-width: 200px;
  }
  .pc-hero__qrBox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 180px;
    margin: 0 auto;
    background: var(--bg-cream);
    border-radius: 6px;
    color: var(--text-dark);
    font-family: var(--font-marugo);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,.2);
    transition: transform .15s ease;
  }
  .pc-hero__qrBox:hover { transform: translateY(-2px); }
  .pc-hero__qrPlaceholder {
    color: #999;
    font-size: 13px;
  }

  .pc-hero__wave {
    position: absolute;
    bottom: -1px;
    z-index: 2;
    width: 52%;
    max-width: 1000px;
    height: auto;
  }
  .pc-hero__wave--l { left: -2%; }
  .pc-hero__wave--r { right: -2%; }
}

/* =========================================================
   SP brand bar (mobile only)
   ========================================================= */
.sp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 10px 14px;
  border-bottom: 1px solid #eee;
}
.sp-header__menu {
  background: transparent;
  border: 0;
  font-size: 28px;
  line-height: 1;
  color: #8a3b14;
  cursor: pointer;
  padding: 4px 8px;
}
.sp-header__brand img { height: 38px; width: auto; }
.sp-header__shop {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  font-size: 11px;
  color: #444;
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 6px;
  padding: 4px 8px;
  flex-direction: column;
}
.sp-header__pin { font-size: 14px; }
.sp-header__shoplabel { font-size: 10px; }

@media (min-width: 1024px) {
  .sp-header { display: none; }
}

/* =========================================================
   PC fixed side panels (≥1024px only)
   Navy background reproduces the PC PSD's frame. Each panel has:
     - middle image (centered vertically): fireworks + stamp/QR
     - bottom image: navy wave
   ========================================================= */
.pc-side { display: none; }

@media (min-width: 751px) {
  .pc-side {
    display: block;
    position: fixed;
    /* offset by the sukesan-udon header height (74px ≥ 768px) so the
       panels start BELOW the sticky header */
    top: 74px;
    height: calc(100vh - 74px);
    /* Side panel width = half of the area outside .lp (max 430px). */
    width: calc((100vw - 430px) / 2);
    z-index: 30;
    overflow: hidden;
    pointer-events: none;
    background: transparent;   /* navy bg comes from <body> */
  }
  .pc-side--left  { left: 0; }
  .pc-side--right { right: 0; }

  /* Middle image: horizontally centered, anchored toward the upper portion
     of the panel (about 1/3 from top). */
  .pc-side__middle {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 420px;
    height: auto;
    display: block;
  }
  /* QR side gets extra real estate so the code stays scannable
  .pc-side--right .pc-side__middle {
    width: 100%;
    max-width: 660px;
  } */

  /* Wave: anchored to the bottom of the panel. Shifted DOWN by 50% of its
     own height so only the TOP HALF is visible — the bottom half overflows
     past the panel and gets clipped by .pc-side { overflow: hidden }. */
  .pc-side__wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    display: block;
    transform: translateY(50%);
  }
}

/* =========================================================
   Main LP container
   ========================================================= */
.lp {
  /* ≤750px viewport: fill the whole screen */
  max-width: none;
  margin: 0 auto;
  background: var(--bg-dark);
  position: relative;
  overflow: hidden;
}

/* >750px: lock .lp to 430px centered, switch on the navy background +
   PSD-frame side panels. */
@media (min-width: 751px) {
  html, body { background: #000546; }   /* navy (PSD wave/frame color) */
  .lp { max-width: 430px; }
  .pc-hero { display: none; }            /* hide the PC-specific 3-column hero */
  /* SP hero stays visible inside .lp */
}

/* helper for ! mark (red emphasis on cream sections) */
.excl { color: var(--accent-red); display: inline; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  padding: 24px 24px 30%;
  background: var(--bg-dark);
  color: var(--text-cream);
  text-align: center;
  overflow: visible;
  background: #000546;
}

/* (PC .hero override removed — uses SP padding/sizing verbatim) */

.hero__deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.hero__fw1, .hero__fw2, .hero__fw3 {
  position: absolute;
  opacity: .85;
}
.hero__fw1 { top: 80px;  left: -10px; width: 30%; }
.hero__fw2 { top: 240px; left: 30px;  width: 18%; }
.hero__fw3 { top: 110px; right: 18px; width: 22%; }

/* (PC fireworks override removed — uses SP positions verbatim) */

.hero__intro {
  position: relative;
  z-index: 2;
  font-family: var(--font-marugo);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .06em;
  margin-bottom: 14px;
  color: var(--text-cream);
}
.hero__intro p { margin: 0; }
.hero__intro .excl { color: var(--accent-red); }

/* (PC hero__intro override removed — uses SP sizing) */

.hero__logo-wrap {
  position: relative;
  z-index: 4;
  margin: 0 auto 8px;
  max-width: 480px;
}
.hero__logo {
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.hero__date {
  display: block;
  margin: 32px auto 0;
  max-width: 56%;
  position: relative;
  z-index: 5;
}

/* (PC hero logo overrides removed — uses SP sizing) */

.hero__chopsticks {
  position: absolute;
  right: -24%;
  bottom: -16%;
  width: 42%;
  z-index: 2;
}
/* (PC chopsticks override removed) */

.hero__wave {
  position: absolute;
  bottom: -10%;
  left: -4vw;
  z-index: 3;
  width: 108vw;
  max-width: none;
  display: block;
}

/* >750px: switch vw → values pegged to .lp's max width (430px) so the
   wave doesn't blow up on wide viewports. */
@media (min-width: 751px) {
  .hero__wave {
    width: 464px;         /* 108% of 430 */
    left: -17px;          /* -4% of 430 */
  }
}

/* =========================================================
   Intro section (after hero)
   ========================================================= */
.sec-intro {
  /* PSD has a linear "グラデーション 1" layer that produces this top-to-bottom
     transition over the intro section. Sampled directly from the SP composite:
       y=1100 #c73d00 (bright orange-red) → y=2000 #71341c (dark brown). */
  background: linear-gradient(
    to bottom,
    #c73d00 0%,
    #bd3e00 30%,
    #993a13 55%,
    #7d3619 80%,
    #71341c 100%
  );
  color: var(--text-cream);
  padding: 64px 24px 0;
  text-align: center;
  position: relative;
}

.sec-intro__photos {
  display: flex;
  justify-content: space-between;
  margin: -30px -8px 14px;
}
.sec-intro__photos img {
  width: 30%;
  height: auto;
}
.sec-intro__photos img:first-child { transform: rotate(-6deg); }
.sec-intro__photos img:last-child  { transform: rotate(6deg); }

.sec-intro__lede {
  font-family: var(--font-marugo);
  font-size: 19px;
  font-weight: 800;
  margin: 0;
  letter-spacing: .04em;
}

.sec-intro__title-en {
  font-family: var(--font-kantei);
  font-size: 22px;
  font-weight: 400;
  margin: 0;
  letter-spacing: .04em;
  color: var(--gold-title);
}

.sec-intro__title-jp {
  font-family: var(--font-kantei);
  font-size: 46px;
  font-weight: 400;
  margin: 0 0 24px;
  color: var(--gold-shout);
  letter-spacing: .06em;
  text-shadow:
    -3px 3px 0 rgba(0,0,0,.35),
    -1px 1px 0 rgba(0,0,0,.5);
}
.sec-intro__title-jp .excl { color: inherit; }
.sec-intro__title-en .excl,
.hero__intro .excl { color: var(--accent-red); }

.sec-intro__body {
  font-family: var(--font-marugo);
  font-weight: 400;
  font-size: 14px;
  line-height: 2;
  margin: 0 0 28px;
}

/* (PC sec-intro overrides removed) */

/* =========================================================
   Apply button
   ========================================================= */
.btn-apply {
  display: inline-block;
  /* background: var(--accent-red); */
  background: #888888;
  color: #fff !important;
  font-family: var(--font-kantei);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: .02em;
  padding: 0 14px;
  border-radius: 80px;
  text-decoration: none;
  text-align: center;
  width: 92%;
  height: 80px;
  max-width: 560px;
  white-space: nowrap;
  box-shadow: 0 6px 0 var(--accent-red-shadow), 0 8px 16px rgba(0,0,0,.25);
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-apply--img {
  /* 背景・角丸・影は画像に焼き込み済みのためリセット */
  background: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  height: auto;
  line-height: 0;
}
.btn-apply--img img {
  width: 92%;
  max-width: 560px;
  height: auto;
  display: block;
  margin: 0 auto;
}
/* (PC btn-apply--img override removed) */
.btn-apply:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--accent-red-shadow), 0 4px 8px rgba(0,0,0,.25);
}
.btn-apply .excl { color: #fff; }

/* 応募終了：ボタン無効化 + オーバーレイ */
.btn-apply-wrap {
  position: relative;
  display: inline-block;
  width: 92%;
  max-width: 560px;
}
.btn-apply--disabled {
  pointer-events: none;
  cursor: default;
}
.btn-apply--disabled img {
  filter: grayscale(100%) brightness(2.5);
}
.btn-apply-closed {
  position: absolute;
  top: calc(50% - 8px);
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-family: var(--font-marugo);
  font-weight: 900;
  font-size: 18px;
  color: #111;
  text-shadow: 0 1px 3px rgba(255,255,255,.8);
  pointer-events: none;
}

/* (PC btn-apply override removed) */

/* =========================================================
   Brand story section
   ========================================================= */
.sec-story {
  background: url("img/story-background.png") center top / cover repeat-y, var(--bg-cream);
  color: var(--text-dark);
  padding: 128px 24px 120px;
  position: relative;
  text-align: center;
}
.sec-story::before {
  /* Wave divider — brown bump dipping into cream story.
     SVG path mirrors the PSD's intro→story wave boundary. */
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 120px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,30 C1200,68 1020,8 720,32 C420,56 240,4 0,28 Z' fill='%2371341c'/%3E%3C/svg%3E");
  background-size: 200% 200%;
  background-repeat: no-repeat;
}
/* Wave divider — sec-events (brown) bleeding up into sec-story (cream) bottom */
.sec-story::after {
  content: "";
  position: absolute;
  bottom: -60px;
  left: 0;
  right: 0;
  height: 120px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,30 C1200,68 1020,8 720,32 C420,56 240,4 0,28 Z' fill='%2371341c'/%3E%3C/svg%3E");
  background-size: 200% 200%;
  background-repeat: no-repeat;
  transform: scale(-1, -1);
  pointer-events: none;
}

.sec-story__hero-photo {
  width: 60%;
  max-width: 320px;
  margin: 0 auto 24px;
  display: block;
}

.sec-story__title {
  /* 秀英丸ゴシックN-B in PSD */
  font-family: var(--font-marugo);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.6;
  margin: 0 0 28px;
  letter-spacing: .02em;
  color: var(--dark-brown);
}

.sec-story__body {
  /* Now rendered as <img> — max-width/margin handled by img.sec-story__body below */
  color: var(--dark-brown);
}

/* photo-row & chef-row: text image fills the full LP canvas width (750 px);
   shop / chef photo is placed absolutely at its PSD-canvas coordinates.
   Negate sec-story's 24 px horizontal padding so container = LP width,
   matching the 750 px PSD canvas from which % positions are derived. */
.sec-story__photo-row,
.sec-story__chef-row {
  position: relative;
  width: calc(100% + 48px);
  margin-left: -24px;
  margin-right: -24px;
  margin-bottom: 30px;
  overflow: visible;
}

/* Text images: 750 px wide → width 100% = correct PSD-canvas scale */
.sec-story__photo-text,
.sec-story__chef-text {
  display: block;
  width: 100%;
  height: auto;
}

/* Shop photo: absolute at PSD position (% of 750 px canvas).
   Shadow bbox: x=352, y=2847; text viewport top y=2883, height=431
   → left=352/750  top=(2847-2883)/431  width=501/750 */
.sec-story__photo-row > img:not(.sec-story__photo-text) {
  position: absolute;
  top: -8.35%;
  left: 46.93%;
  width: 66.8%;
  height: auto;
  max-width: none;
}

/* Chef photo: absolute at PSD position.
   Bbox: x=556-706, y=3993-4268; text viewport top y=3962, height=484
   → left=556/750  top=31/484  width=150/750 */
.sec-story__chef-row > img:not(.sec-story__chef-text) {
  position: absolute;
  top: 6.4%;
  left: 74.13%;
  width: 20%;
  height: auto;
  max-width: none;
}

/* dashi-row: single combined PNG (出汁 + カツオ) sized to bleed past both
   section edges, matching the PSD where the layers extend past the 750
   canvas width on both sides. Source PNG is 859x381 ≈ 114% of 750. */
.sec-story__dashi-row {
  display: block;
  /* 24px×2でpaddingを打ち消し、さらに左3%・右15%はみ出す */
  width: calc(100% + 48px + 4.5% + 15%);
  max-width: none;
  height: auto;
  margin: 0 0 22px calc(-24px - 4.5%);
  /* shadow is baked into dashi_combo_shadow.png — follows the tilted
     polaroid outlines instead of the rectangular bounding box */
}
.sec-story__photo-row p,
.sec-story__chef-row p {
  font-family: var(--font-marugo);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.9;
  margin: 0;
  color: var(--dark-brown);
}

/* (removed conflicting fallback rules — sizing handled by `> img` rules above) */

.sec-story__50th {
  width: 38%;
  max-width: 220px;
  margin: 8px auto 0;
}

/* (PC sec-story overrides removed) */

/* =========================================================
   Events section
   ========================================================= */
.sec-events {
  background: var(--bg-dark);
  color: var(--text-cream);
  padding: 60px 18px 50px;
  text-align: center;
  position: relative;
}
/* (Wave divider for sec-events is defined on .sec-story::after — see above) */

.sec-events__title {
  /* font-family etc. left for any non-image fallback; underline now baked
     into title_event_contents.png alongside the text. */
  font-family: var(--font-kantei);
  font-size: 24px;
  font-weight: 400;
  margin: 0 0 6px;
  letter-spacing: .12em;
  color: var(--text-cream);
  position: relative;
  display: inline-block;
}
.sec-events__lede {
  font-family: var(--font-marugo);
  font-size: 16px;
  line-height: 1.7;
  margin: 12px 0 26px;
  color: var(--text-cream);
  font-weight: 700;
}

/* (PC sec-events overrides removed) */

/* =========================================================
   Event card
   ========================================================= */

/* Each card is rendered as a single composite PNG straight out of the PSD
   (image includes background cushion, badge, illustrations, title, and
   body text). Below CSS just sizes & spaces them. */
.event-card-img {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 24px auto 0;
}
.event-card-img:first-of-type { margin-top: 0; }

/* (PC event-card-img override removed) */

.event-card {
  position: relative;
  background: var(--card-bg);
  border: 3px solid var(--dark-brown);
  border-radius: 26px;
  padding: 40px 20px 26px;
  margin: 36px auto 0;
  max-width: 640px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.event-card__no {
  position: absolute;
  top: -28px;
  left: 18px;
  width: 64px;
  height: 64px;
}

.event-card__illusts {
  position: relative;
  height: 130px;
  margin: 4px auto 14px;
  max-width: 540px;
}
.event-card__illusts img {
  position: absolute;
  bottom: 0;
}
.event-card__illusts--1 img:nth-child(1) { left: 8%;  bottom: 12px; width: 22%; }
.event-card__illusts--1 img:nth-child(2) { left: 38%; bottom: 20px; width: 24%; }
.event-card__illusts--1 img:nth-child(3) { right: 6%; bottom: 0;    width: 28%; }

.event-card__illusts--2 > img:nth-child(1) { left: 6%;   bottom: 18px; width: 18%; }
.event-card__illusts--2 .event-card__qbowl {
  position: absolute;
  left: 36%; bottom: 8px; width: 30%;
  z-index: 2;
}
.event-card__illusts--2 .event-card__qbowl img {
  position: static;
  width: 100%;
  display: block;
}
.event-card__illusts--2 .event-card__qbowl span {
  position: absolute;
  top: 42%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-marugo);
  font-size: 50px;
  font-weight: 900;
  color: var(--burnt-orange);
}
.event-card__illusts--2 > img:nth-child(3) { right: 4%;  bottom: 18px; width: 18%; }
.event-card__illusts--2 > img:nth-child(4) { left: 22%;  bottom: 0;    width: 22%; z-index: 3; }
.event-card__illusts--2 > img:nth-child(5) { right: 16%; bottom: 0;    width: 22%; z-index: 3; }

.event-card__illusts--3 img:nth-child(1) { left: 50%;  top: 4px; transform: translateX(-50%); width: 32%; }
.event-card__illusts--3 img:nth-child(2) { left: 50%;  bottom: 0; transform: translateX(-90%); width: 26%; z-index: 2; }
.event-card__illusts--3 img:nth-child(3) { left: 50%;  bottom: 0; transform: translateX(10%); width: 32%; z-index: 3; }

.event-card__title {
  font-family: var(--font-kantei);
  font-size: 21px;
  font-weight: 400;
  color: var(--card-title-red);
  line-height: 1.5;
  margin: 0 0 16px;
  letter-spacing: .02em;
}

.event-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  font-family: var(--font-marugo);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  color: var(--card-body-red);
}
.event-card__list li {
  position: relative;
  padding-left: 1.2em;
  margin-bottom: 8px;
}
.event-card__list li::before {
  content: "●";
  color: var(--card-body-red);
  position: absolute;
  left: 0;
  font-size: .8em;
  top: .35em;
}

.event-card__body {
  font-family: var(--font-marugo);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  margin: 0;
  color: var(--card-body-red);
}

/* (PC event-card legacy overrides removed) */

/* =========================================================
   Souvenir section
   ========================================================= */
.sec-souvenir {
  color: var(--text-dark);
  padding: 40px 18px 50px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* tshirt_bag.png — fireworks + bag + all content in one image */
.sec-souvenir__bag-img {
  display: block;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  height: auto;
}

/* (PC sec-souvenir overrides removed) */

/* =========================================================
   Summary section
   ========================================================= */
.sec-summary {
  background: var(--bg-dark);
  color: var(--text-cream);
  padding: 16px 28px 50px;
  text-align: center;
  position: relative;
}

.sec-summary__title {
  margin: 0 auto 28px;
  max-width: 520px;
  line-height: 0;
  text-align: left;
}
.sec-summary__title img {
  display: inline-block;
  width: 35%;
  height: auto;
}
/* (PC sec-summary__title override removed) */

.sec-summary__list {
  font-family: var(--font-marugo);
  font-weight: 400;
  margin: 0 auto 30px;
  padding: 0;
  max-width: 520px;
  text-align: left;
  font-size: 15px;
  line-height: 1.7;
}
.sec-summary__list > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.4);
  align-items: start;
}

/* (PC sec-summary__list grid override removed) */
.sec-summary__list > div:last-child { border-bottom: 0; }
.sec-summary__list dt {
  font-weight: 700;
  white-space: nowrap;
}
.sec-summary__list dt::after { content: "："; }
.sec-summary__list dd { margin: 0; }
.sec-summary__list a { color: var(--text-cream); text-decoration: underline; }

/* (PC sec-summary overrides removed) */

/* =========================================================
   Footer wave
   ========================================================= */
/* Wrapper clips the wave so only its TOP HALF is visible — the bottom half
   spills past the wrapper's bottom and is hidden by overflow: hidden. */
.footer-wave-clip {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* natural image aspect 4.66 → full height would be width / 4.66.
     Divide by 2 → show only the top half of the wave. */
  height: calc(100vw / 4.66 / 2);
  background: var(--bg-dark);
  margin-top: -10px;
}

.footer-wave {
  /* Mirror .hero__wave: 104vw centered to viewport. transform: scale(...)
     from the top center grows the wave past the wrapper's sides; the
     wrapper's overflow: hidden clips the (scaled) bottom and the sides. */
  width: 104vw;
  max-width: none;
  margin-left: calc(50% - 52vw);
  display: block;
  transform: scale(1.3);
  transform-origin: top center;
}

/* >750px: anchor wave sizing to .lp's max width (430px) instead of viewport */
@media (min-width: 751px) {
  .footer-wave-clip {
    height: calc(430px / 4.66 / 2);     /* half the natural display height at 430 */
  }
  .footer-wave {
    width: 447px;                        /* 104% of 430 */
    margin-left: calc(50% - 223.5px);    /* center to .lp (223.5 = 447/2) */
  }
}

/* (PC footer-wave override removed — center uses SP styles verbatim) */


/* ============================================================
   FADE-IN ANIMATIONS
   ------------------------------------------------------------
   Apply via data-animate="<type>" on any element. JS adds
   `.is-in-view` when the element scrolls into view (50%).
   ------------------------------------------------------------
   Available variants:
     - fade        : opacity only
     - fade-up     : slide up + fade
     - fade-down   : slide down + fade
     - fade-left   : slide from right → left + fade
     - fade-right  : slide from left → right + fade
     - zoom        : scale-up + fade
     - zoom-out    : scale-down + fade
     - blur        : un-blur + fade

   Optional delay: data-animate-delay="100" (ms)
   ============================================================ */

/* base: invisible & transitioning */
[data-animate] {
  opacity: 0;
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.8s ease;
  will-change: opacity, transform;
}

/* per-type starting offsets */
[data-animate="fade-up"]     { transform: translateY(40px); }
[data-animate="fade-down"]   { transform: translateY(-40px); }
[data-animate="fade-left"]   { transform: translateX(40px); }
[data-animate="fade-right"]  { transform: translateX(-40px); }
[data-animate="zoom"]        { transform: scale(0.88); }
[data-animate="zoom-out"]    { transform: scale(1.12); }
[data-animate="blur"]        { filter: blur(12px); }

/* in-view state — animate to natural position */
[data-animate].is-in-view {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Respect users who ask for reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1;
    transform: none !important;
    filter: none !important;
    transition: none;
  }
}

/* ============================================================
   Sukesan-udon GLOBAL HEADER (verbatim port from sukesanudon.com)
   Source: lionblog-child/css/app.css (.l-header / .p-header / .p-nav)
   Breakpoint: 767/768 (matches the parent site)
   ============================================================ */

/* Utility classes (PC/SP visibility toggle) */
.u-pc { display: block !important; }
.u-pc--inline { display: inline !important; }
.u-sp, .u-sp--inline { display: none !important; }

@media screen and (max-width: 767px) {
  .u-pc, .u-pc--inline { display: none !important; }
  .u-sp { display: block !important; }
  .u-sp--inline { display: inline !important; }
}

/* Header container */
.l-header {
  display: block;
  flex-flow: unset;
  margin: 0 auto;
  width: 100%;
}

.p-header {
  background-color: #fff;
  box-shadow: 0 0 4px rgba(0, 0, 0, .2);
  height: 74px;
  min-width: 1120px;
  position: sticky;
  top: 0;
  z-index: 200;
}
.p-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;        /* vertically center the logo / nav in the 74px bar */
  height: 100%;
  margin: 0 auto;
  font-size: 0;               /* collapse whitespace text nodes between flex items */
}

@media screen and (max-width: 767px) {
  .l-header { width: 100%; }
  .p-header {
    height: 50px;
    min-width: 100%;
  }
  .p-header__inner {
    align-items: center;
    flex-wrap: wrap;
    overflow: hidden;
    width: 100%;
  }
  .p-header__nav-btn {
    color: #9d4500;
    cursor: pointer;
    font-size: 24px;
    margin-left: 15px;
  }
  .p-header__shop-btn-wrapper {
    height: 38px;
    margin-right: 10px;
    width: auto;
  }
  .p-header__shop-btn-img {
    display: block;
    height: 38px;
    width: auto;
  }
  .p-header__shop-btn {
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: inset 0 -2px 0 #e8e8e8;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    height: 38px;
    width: 38px;
  }
  .p-header__shop-btn svg,
  .p-header__shop-btn .fas,
  .p-header__shop-btn .far,
  .p-header__shop-btn .fa {
    color: #e6370f;
    font-size: 16px;
    line-height: 1;
  }
  .p-header__shop-desc {
    line-height: 1;
    margin: 0;
    font-size: 0;
  }
  .p-header__title {
    align-items: center;
    display: flex;
    height: 50px;
  }
}

.p-header__title a { display: block; }
.p-header__title img { display: block; }
.p-header__shop-link { color: inherit; text-decoration: none; }

/* PC nav — image-replaced text */
.l-nav { width: 100%; }
.p-nav {
  width: 745px;
  height: 74px;
  font-size: 0;   /* collapse whitespace text nodes so nav h = ul h */
}
.p-nav__list {
  align-items: center;
  display: flex;
  height: 74px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.p-nav__item {
  height: 74px;
  position: relative;
}
.p-nav__item:not(:last-child):after {
  background-color: #d9d9d9;
  content: "";
  height: 15px;
  position: absolute;
  right: 0;
  top: 37%;
  width: 1px;
}
.p-nav__item-link,
.p-nav__item-link--kawara,
.p-nav__item-link--kodawari,
.p-nav__item-link--menu,
.p-nav__item-link--netshop,
.p-nav__item-link--news,
.p-nav__item-link--recruit,
.p-nav__item-link--shop {
  display: block;
  height: 74px;
  line-height: 74px;
  position: relative;
  text-decoration: none;
}
.p-nav__item-link--kawara:before,
.p-nav__item-link--kodawari:before,
.p-nav__item-link--menu:before,
.p-nav__item-link--netshop:before,
.p-nav__item-link--news:before,
.p-nav__item-link--recruit:before,
.p-nav__item-link--shop:before,
.p-nav__item-link:before {
  content: "";
  height: 14px;
  left: 0;
  position: absolute;
  top: 38%;
  width: 100%;
  background: url("img/header/nav01@2x.png") no-repeat 50% / cover;
}
.p-nav__item-link--kawara:hover,
.p-nav__item-link--kodawari:hover,
.p-nav__item-link--menu:hover,
.p-nav__item-link--netshop:hover,
.p-nav__item-link--news:hover,
.p-nav__item-link--recruit:hover,
.p-nav__item-link--shop:hover,
.p-nav__item-link:hover { opacity: .7; }

.p-nav__text {
  display: block;
  height: 0;
  overflow: hidden;
  width: 0;
}

.p-nav__item-link--news    { width: 92px; }
.p-nav__item-link--news:before    { background: url("img/header/nav01@2x.png") no-repeat 50% / cover; }
.p-nav__item-link--menu    { width: 107px; }
.p-nav__item-link--menu:before    { background: url("img/header/nav02@2x.png") no-repeat 50% / cover; }
.p-nav__item-link--kodawari { width: 92px; }
.p-nav__item-link--kodawari:before { background: url("img/header/nav03@2x.png") no-repeat 50% / cover; }
.p-nav__item-link--shop    { width: 92px; }
.p-nav__item-link--shop:before    { background: url("img/header/nav04@2x.png") no-repeat 50% / cover; }
.p-nav__item-link--kawara  { width: 92px; }
.p-nav__item-link--kawara:before  { background: url("img/header/nav05@2x.png") no-repeat 50% / cover; }
.p-nav__item-link--netshop { width: 107px; }
.p-nav__item-link--netshop:before { background: url("img/header/nav06@2x.png") no-repeat 50% / cover; }
.p-nav__item-link--recruit { width: 93px; }
.p-nav__item-link--recruit:before { background: url("img/header/nav07@2x.png") no-repeat 50% / cover; }

/* SP — drawer menu */
@media screen and (max-width: 767px) {
  .p-nav {
    -webkit-overflow-scrolling: touch;
    background-color: #000546;
    height: 100vh;
    left: -100vw;
    overflow: auto;
    position: fixed;
    text-align: center;
    top: 50px;
    transform: translateX(0);
    transition: transform .3s;
    width: 100vw;
    z-index: 199;
  }
  .p-nav.is-show { transform: translateX(100vw); }
  .p-nav__list { display: block; height: auto; }
  .p-nav__item {
    height: auto;
    margin: 35px 0;
    width: 100%;
  }
  .p-nav__item:not(:last-child):after { content: none; }
  .p-nav__item-link,
  .p-nav__item-link--kawara,
  .p-nav__item-link--kodawari,
  .p-nav__item-link--menu,
  .p-nav__item-link--netshop,
  .p-nav__item-link--news,
  .p-nav__item-link--recruit,
  .p-nav__item-link--shop {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    width: 100%;
  }
  .p-nav__item-link--kawara:before,
  .p-nav__item-link--kodawari:before,
  .p-nav__item-link--menu:before,
  .p-nav__item-link--netshop:before,
  .p-nav__item-link--news:before,
  .p-nav__item-link--recruit:before,
  .p-nav__item-link--shop:before,
  .p-nav__item-link:before { content: none; }
  .p-nav__text {
    height: auto;
    width: 100%;
  }
}

/* ============================================================
   TEXT → IMAGE OVERRIDES
   ------------------------------------------------------------
   For every text block that's now rendered as an <img>, ensure:
     - the image scales to fit its container,
     - it's horizontally centered,
     - margin/spacing remains visually consistent.
   ============================================================ */

/* ── Uniform text-image sizing ───────────────────────────────────────────────
   All text images are exported at the full 750 px PSD canvas width.
   Each image negates its section's horizontal padding so it always spans
   the full LP column (= the 750 px canvas), giving identical scale everywhere.

   sec-intro  : 24 px padding → calc(100% + 48px), margin 0 -24px
   sec-story  : 24 px padding → calc(100% + 48px), margin 0 -24px
   sec-events : 18 px padding → calc(100% + 36px), margin 0 -18px
   sec-summary: 28 px padding → calc(100% + 56px), margin 0 -28px        */

img.sec-intro__lede,
img.sec-intro__body {
  display: block;
  width: calc(100% + 48px);
  max-width: none;
  height: auto;
  margin-left: -24px;
  margin-right: -24px;
}
img.sec-intro__body { margin-bottom: 28px; }

img.sec-story__body {
  display: block;
  width: calc(100% + 48px);
  max-width: none;
  height: auto;
  margin-left: -24px;
  margin-right: -24px;
  margin-bottom: 30px;
}

/* Lede / title images inside h2 wrappers (h2 inherits sec padding) */
.sec-intro__lede img,
.sec-story__title img {
  display: block;
  width: calc(100% + 48px);
  max-width: none;
  height: auto;
  margin-left: -24px;
  margin-right: -24px;
}

/* h2 wrappers: suppress inherited text styles */
.sec-intro__lede,
.sec-story__title {
  font-size: 0;
  line-height: 0;
  text-align: center;
}

img.sec-events__lede {
  display: block;
  width: calc(100% + 36px);
  max-width: none;
  height: auto;
  margin: 12px -18px 26px;
}

img.sec-summary__list {
  display: block;
  width: calc(100% + 56px);
  max-width: none;
  height: auto;
  margin: 0 -28px 30px;
}