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

:root {
  --bg-dark: #6b2418;          /* 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: #7a1d0a;
  --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 for the host site's (sukesanudon.com) fixed header.
   Mobile (≤767px): 50px / PC (≥768px): 74px
   Breakpoint matches the parent site's mobile↔PC convention.
   ============================================================ */
body { padding-top: 50px; }
@media (min-width: 768px) {
  body { padding-top: 74px; }
}

/* 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: 75%; max-width: 380px; 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: 1024px) {
  .pc-side {
    display: block;
    position: fixed;
    /* offset by host site header height (74px on PC) so the panels start
       BELOW the parent site's fixed 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 {
  /* SP-view max width (also used as the centered column on PC) */
  max-width: 430px;
  margin: 0 auto;
  background: var(--bg-dark);
  position: relative;
  overflow: hidden;
}

/* PC: body sections stay narrow — SP design lives centered, surrounded by
   navy that matches the PC PSD's frame color. */
@media (min-width: 1024px) {
  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 198px;
  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: 8px 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: -10%;
  width: 42%;
  z-index: 2;
}
/* (PC chopsticks override removed) */

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

/* PC: switch vw → values pegged to .lp's max width (430px) so the wave
   doesn't blow up on wide viewports. */
@media (min-width: 1024px) {
  .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 50px;
  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);
  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 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 22px 24px;
  line-height: 0;
}
.btn-apply--img img {
  width: 100%;
  height: auto;
  display: block;
}
/* (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; }

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

/* =========================================================
   Brand story section
   ========================================================= */
.sec-story {
  background: var(--bg-cream);
  color: var(--text-dark);
  padding: 80px 24px 60px;
  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: 50px;
  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: 100% 100%;
  background-repeat: no-repeat;
}

.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 {
  font-family: var(--font-marugo);
  font-weight: 400;
  font-size: 14px;
  line-height: 2;
  margin: 0 0 30px;
  text-align: left;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  color: var(--dark-brown);
}

/* photo-row & chef-row: shop / chef photos sit on the right and bleed
   past the section's right padding (matches PSD where these images
   extend past the 750-wide canvas). */
.sec-story__photo-row,
.sec-story__chef-row {
  display: grid;
  gap: 12px;
  align-items: start;
  max-width: none;
  margin: 0 0 30px;
  text-align: left;
}
/* shop photo column ~50% so the image (115% of column) bleeds nicely past edge */
.sec-story__photo-row { grid-template-columns: 1fr 50%; }
/* chef photo column shrinks to image's actual width, text takes the rest */
.sec-story__chef-row  { grid-template-columns: 1fr auto; }

/* The right-column image overflows further past the column edge.
   Drop shadow is baked into the PNG (photo_shop_shadow.png) so it
   follows the tilted polaroid outline instead of the rectangular box. */
.sec-story__photo-row > img {
  width: 115%;
  max-width: none;
  margin-right: -5%;
  transform: translateX(-5%);
}
.sec-story__chef-row > img {
  /* 画面幅の約18%で表示。max-width で PC でも SP サイズ感に固定。
     SP 375vw → 67.5px / PC では max でクランプ */
  width: 18vw;
  max-width: 80px;
  height: auto;
  justify-self: end;
  margin-right: 0;
}

/* 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;
  width: 115%;
  max-width: none;
  height: auto;
  margin: 0 -7.5% 22px;     /* center the 115%-wide image over the section */
  filter: drop-shadow(4px 6px 12px rgba(0, 0, 0, .22));
}
.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 — cream bump dipping into brown events */
.sec-events::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 50px;
  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='%23f3e6cb'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.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: 60px 24px 50px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Wave divider — brown bump dipping into cream souvenir */
.sec-souvenir::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 50px;
  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='%236b2418'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Fireworks decorations — sizes/positions derived from PSD bboxes:
   花火  (left):  bbox=[20, 7432, 216, 7630] → 196/750 ≈ 26% wide, x≈3%
   花火２(right): bbox=[573, 7506, 710, 7638] → 137/750 ≈ 18% wide, x≈76%, y offset ≈ 10px */
.sec-souvenir__fw1,
.sec-souvenir__fw2 {
  position: absolute;
  height: auto;
  z-index: 2;
}
.sec-souvenir__fw1 {
  /* left firework — larger */
  left: 2%;
  top: 6px;
  width: 26%;
  max-width: 200px;
}
.sec-souvenir__fw2 {
  /* right firework — smaller, slightly lower */
  right: 5%;
  top: 28px;
  width: 18%;
  max-width: 140px;
}

/* Souvenir bag — the bag PNG already includes Tshirt + ? + etc + titles + body. */
.sec-souvenir__bag-img {
  display: block;
  width: 86%;
  max-width: 540px;
  margin: 0 auto;
  height: auto;
}

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

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

.sec-summary__title {
  /* Center the block within the section (so it aligns with the dl below
     which is also max-width: 520px), but left-align the bar + image inside it. */
  margin: 0 auto 28px;
  max-width: 520px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  line-height: 0;
}
.sec-summary__title .bar {
  display: inline-block;
  width: 6px;
  height: 32px;
  background: var(--text-cream);
}
.sec-summary__title img {
  width: auto;
  height: 32px;
}
/* (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;
}

/* PC: anchor wave sizing to .lp's max width (430px) instead of viewport */
@media (min-width: 1024px) {
  .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;
  }
}