/* ============================================================
   四国巡りんく stamp rally — hand-written stylesheet
   mobile-first / breakpoints:
     768px+  = tablet & desktop shared (2-col grids, sticky nav)
     1100px+ = desktop (3-col prizes, larger nav)
     1280px+ = wide desktop (2-col coupons, original 1440 design scale)
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --font-body: "Zen Kaku Gothic Antique", sans-serif;

  --bg: #f6f4ef;
  --ink: #2b2a28;
  --muted: #999;
  --accent: #d97a4a;   /* orange (benefit B / highlights) */
  --indigo: #4753a2;   /* indigo (benefit A / buttons) */
  --brown: #8b6b4a;    /* prize title brown */
  --flag-red: #e2685f; /* prize flag */
  --purple: #8b7cc8;
  --green: #73b6a1;
  --olive: #a8b96b;

  --coupon-a-bg: #eaeaef;
  --coupon-a-border: #d2d7e3;
  --coupon-a-band: #d9d9de;
  --coupon-b-bg: #f3efe6;
  --coupon-b-border: #f1e8d5;
  --coupon-b-band: #e4ded4;
  --panel: #fbf8f7;
  --paper: #fdfbf9;
  --prize-bg: #e7ddd0;
  --hashtag-bg: #ddedea;
  --nav-active: #efeae4;
  --footer-bg: #858585;
  --footer-ink: #f1f1f1;
  --footer-link: #f5f5f5;

  --rule: rgba(43, 42, 40, 0.3);
  --shadow-card: 0 6px 10px rgba(0, 0, 0, 0.08);

  --container: 1200px;
  --nav-h: 0px; /* the mobile nav is not sticky */
}
@media (min-width: 768px) {
  :root { --nav-h: 60px; }
}
@media (min-width: 1100px) {
  :root { --nav-h: 84px; }
}
@media (min-width: 1280px) {
  :root { --nav-h: 100px; }
}

/* ---------- base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
html,
body {
  /* clip instead of hidden so the sticky nav keeps working
     (clip does not create a scroll container) */
  overflow-x: clip;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
p {
  margin: 0;
}
h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  font-size: inherit;
}
ul, ol, dl, dd, figure {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
b, strong {
  font-weight: 700;
}
iframe {
  border: 0;
}

/* ---------- utilities ---------- */
.container {
  max-width: calc(var(--container) + 80px);
  margin-inline: auto;
  padding-inline: 16px;
}
@media (min-width: 768px) {
  .container { padding-inline: 40px; }
}

/* Breakpoint visibility helpers (sp = <768 / pc = >=768) */
.pc-only { display: none; }
.br-pc { display: none; }
@media (min-width: 768px) {
  .pc-only { display: block; }
  .br-pc { display: inline; }
  .br-sp { display: none; }
}

/* Prevent min-width:auto blowout on grid items — stops the intrinsic
   width of images inside cards from pushing tracks wider */
.hero__photo,
.step-card,
.coupon-card,
.prize-card,
.polaroid,
.insta-zone > * {
  min-width: 0;
}

/* Clickable elements: slightly transparent on hover (only on devices
   with a real pointer — on touch, :hover would stick after a tap) */
.hover-dim {
  cursor: pointer;
  transition: opacity 0.2s ease;
}
@media (hover: hover) {
  .hover-dim:hover { opacity: 0.7; }
}

/* ---------- shared component: buttons ---------- */
/* Outline button — per the design spec the filled (dark) state is hover/pressed */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 60px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 28px;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
@media (hover: hover) {
  .btn:hover {
    background-color: var(--ink);
    color: #fff;
  }
}
.btn:active {
  background-color: var(--ink);
  color: #fff;
}
@media (min-width: 1100px) {
  .btn {
    font-size: 24px;
    line-height: 36px;
  }
}

/* Pill button (coupon 店舗一覧) — hover fills the background and swaps the icon to white */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-radius: 30px;
  border: 1px solid currentColor;
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
@media (min-width: 1280px) {
  .btn-pill {
    gap: 14px;
    padding: 10px 18px;
    font-size: 18px;
  }
}
.btn-pill__icon,
.btn-follow__icon {
  position: relative;
  flex: none;
}
.btn-pill__icon {
  width: 12px;
  height: 12px;
}
.btn-pill__icon img,
.btn-follow__icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.2s ease;
}
.icon-hover { opacity: 0; }
.btn-pill--purple { color: var(--purple); background: #f3f0fb; }
.btn-pill--green  { color: var(--green);  background: #eef8f4; }
.btn-pill--olive  { color: var(--olive);  background: #f5f8ec; }
@media (hover: hover) {
  .btn-pill--purple:hover { background: var(--purple); color: #fff; }
  .btn-pill--green:hover  { background: var(--green);  color: #fff; }
  .btn-pill--olive:hover  { background: var(--olive);  color: #fff; }
  .btn-pill:hover .icon-hover,
  .btn-follow:hover .icon-hover { opacity: 1; }
  .btn-pill:hover .icon-base,
  .btn-follow:hover .icon-base { opacity: 0; }
}
.btn-pill--purple:active { background: var(--purple); color: #fff; }
.btn-pill--green:active  { background: var(--green);  color: #fff; }
.btn-pill--olive:active  { background: var(--olive);  color: #fff; }
.btn-pill:active .icon-hover,
.btn-follow:active .icon-hover { opacity: 1; }
.btn-pill:active .icon-base,
.btn-follow:active .icon-base { opacity: 0; }

/* Instagram follow button */
.btn-follow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
  border: 1px solid var(--indigo);
  border-radius: 4px;
  background: var(--paper);
  color: var(--indigo);
  font-weight: 500;
  font-size: 15px;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-follow__icon {
  width: 24px;
  height: 24px;
}
@media (hover: hover) {
  .btn-follow:hover {
    background: var(--indigo);
    color: var(--paper);
  }
}
.btn-follow:active {
  background: var(--indigo);
  color: var(--paper);
}
@media (min-width: 1100px) {
  .btn-follow {
    gap: 8px;
    padding: 8px 20px;
    border-width: 1.5px;
    border-radius: 8px;
    font-size: 24px;
  }
  .btn-follow__icon {
    width: 64px;
    height: 64px;
  }
}

/* ---------- shared component: sections ---------- */
.section {
  padding-block: 28px;
  /* top offset for anchor jumps (>=768 accounts for the sticky nav height) */
  scroll-margin-top: 16px;
}
/* Mobile: coupon CTA button → prize section boundary is 56px (>=768: 100px below) */
.section--coupon { padding-bottom: 56px; }
@media (min-width: 768px) {
  .section {
    padding-block: 50px;
    scroll-margin-top: calc(var(--nav-h) + 24px);
  }
  /* Original spacing per section boundary (colored-background edges use a 100px rhythm) */
  .section--coupon { padding-bottom: 100px; }
  .section--prize {
    padding-top: 100px;
    padding-bottom: 70px;
  }
  .section--map { padding-block: 100px; }
  .section--hashtag { padding-block: 100px; }
}

.section__head {
  text-align: center;
  margin-bottom: 28px;
}
@media (min-width: 768px) {
  .section__head { margin-bottom: 48px; }
}
.section__title {
  display: inline-block;
  font-size: 24px;
  line-height: 38px;
  letter-spacing: 0.02em;
  text-align: center;
}
/* Hand-drawn underline: the SVG stretches to match the title width */
.section__title::after {
  content: "";
  display: block;
  height: 9px;
  margin-top: 8px;
  margin-inline: -0.75em;
  width: calc(100% + 1.5em);
  background: url("../assets/imgUnion.svg") center / 100% 100% no-repeat;
}
.section__title--long::after {
  background-image: url("../assets/imgUnion2.svg");
}
@media (min-width: 768px) {
  .section__title {
    font-size: 32px;
    line-height: 1.4;
  }
}
@media (min-width: 1100px) {
  .section__title { font-size: 40px; }
  .section__title::after {
    margin-top: 12px;
    margin-inline: -1.5em;
    width: calc(100% + 3em);
  }
}

.section__lead {
  text-align: center;
  font-size: 14px;
  line-height: 26px;
}
@media (min-width: 768px) {
  .section__lead { font-size: 18px; }
}
@media (min-width: 1100px) {
  .section__lead {
    font-size: 24px;
    line-height: 38px;
  }
}

/* Section-bottom CTA button placement */
.section__cta {
  margin-top: 32px;
  text-align: center;
}
@media (min-width: 768px) {
  .section__cta { margin-top: 56px; }
}

/* ============================================================
   hero
   ============================================================ */
.hero {
  position: relative;
  max-width: 1440px;
  margin-inline: auto;
  padding: 20px 16px 0;
}
@media (min-width: 768px) {
  .hero { padding: 20px 20px 0; }
}
.hero__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
@media (min-width: 768px) {
  .hero__photos { gap: 12px; }
}
.hero__photo {
  position: relative;
  aspect-ratio: 176 / 132;
  background: #d9d9d9;
  overflow: hidden;
}
@media (min-width: 768px) {
  .hero__photo { aspect-ratio: 694 / 404; }
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__credit {
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-size: 8px;
  line-height: 1;
  color: #909090;
  opacity: 0.6;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .hero__credit {
    right: 20px;
    bottom: 24px;
    font-size: 14px;
    transform: rotate(1deg);
  }
}
/* Center stamp badge = page title (h1), overlaps the 4 photos */
.hero__badge {
  position: absolute;
  left: 50%;
  top: 26%;
  transform: translateX(-50%);
  width: clamp(154px, 32vw, 464px);
  aspect-ratio: 1;
  pointer-events: none;
}
.hero__badge img {
  width: 100%;
  height: auto;
}
/* Top-right stamp mark — the SVG has no intrinsic size (width/height=100%):
   size it explicitly (mobile 80×48, PC 200×116) */
.hero__stamp {
  position: absolute;
  right: 4px;
  top: 29px;
  width: 80px;
  height: 48px;
}
@media (min-width: 768px) {
  .hero__stamp {
    right: 0;
    top: 48px;
    width: clamp(120px, 14vw, 200px);
    height: auto;
    aspect-ratio: 200 / 116;
  }
}
/* Top-left せとうち魅力発見 banner */
.hero__setouchi {
  position: absolute;
  left: 24px;
  top: 29px;
  width: 116px;
}
@media (min-width: 768px) {
  .hero__setouchi {
    left: 40px;
    top: 44px;
    width: 232px;
  }
}

/* ============================================================
   intro
   ============================================================ */
.intro {
  padding-top: 20px;
}
.intro__inner {
  text-align: center;
  font-size: 14px;
  line-height: 26px;
}
/* Intro–nav divider: centered on the content width at all breakpoints
   (previously the container border-bottom drew full-bleed) */
.intro__inner::after {
  content: "";
  display: block;
  width: 100%;
  max-width: 360px;
  height: 1px;
  margin: 24px auto 0;
  background: var(--rule);
}
.intro__inner p + p {
  margin-top: 14px;
}
@media (min-width: 768px) {
  .intro { padding-top: 60px; }
  .intro__inner {
    font-size: 16px;
    line-height: 32px;
  }
  .intro__inner::after { max-width: none; margin-top: 48px; }
  .intro__inner p + p { margin-top: 0; }
}
@media (min-width: 1280px) {
  .intro__inner::after { margin-top: 60px; }
}
@media (min-width: 1100px) {
  .intro__inner {
    font-size: 20px;
    line-height: 36px;
  }
}

/* ============================================================
   category nav (scrollspy)
   ============================================================ */
.cat-nav {
  padding: 24px 16px;
}
.cat-nav__list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  max-width: 360px;
  margin-inline: auto;
}
/* Lay the 5 buttons out as 3 on top, 2 centered below (figma_mo) */
.cat-nav__list li { display: flex; }
.cat-nav__list li:nth-child(1) { grid-column: 1 / 3; }
.cat-nav__list li:nth-child(2) { grid-column: 3 / 5; }
.cat-nav__list li:nth-child(3) { grid-column: 5 / 7; }
.cat-nav__list li:nth-child(4) { grid-column: 2 / 4; }
.cat-nav__list li:nth-child(5) { grid-column: 4 / 6; }
.cat-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 64px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--bg);
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
  text-align: center;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.cat-nav__icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
/* Figma text boxes are min 4em (賞品 is also 96px) and centered */
.cat-nav__label {
  text-align: center;
}
.cat-nav__item.is-active {
  background: var(--nav-active);
  border-color: var(--nav-active);
  font-weight: 700;
}
@media (min-width: 768px) {
  /* Gap between the divider and the nav is a margin — when the nav sticks,
     only the bar (padding area) remains and the margin stays in place */
  .cat-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--bg);
    margin-top: 24px;
    margin-bottom: 8px;
    padding: 8px 16px;
    transition: box-shadow 0.25s ease;
  }
  .cat-nav.is-stuck {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  }
  /* Cell width = content-based + leftover space shared evenly. With 5 equal
     cells the active highlight (content + 30px each side) of the long labels
     STAMP MAP / ハッシュタグ would fill the cell and touch the separators */
  .cat-nav__list {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    max-width: 1440px;
  }
  .cat-nav__list li {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Separators: a 60px line, shorter than the Figma bar (100px), vertically
     centered (scaled down proportionally on lower breakpoints) */
  .cat-nav__list li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: clamp(36px, calc(36px + (100vw - 768px) * 0.0422), 50px);
    background: var(--rule);
  }
  /* Scale icon/label/padding with the viewport across 768→1100 (items looked
     too small on tablets; 1100px+ keeps the tier values below) */
  .cat-nav__item {
    flex-direction: row;
    gap: clamp(6px, calc(6px + (100vw - 768px) * 0.006), 8px);
    width: auto;
    height: auto;
    padding: clamp(6px, calc(6px + (100vw - 768px) * 0.006), 8px)
             clamp(14px, calc(14px + (100vw - 768px) * 0.0241), 22px);
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-size: clamp(14px, calc(14px + (100vw - 768px) * 0.01205), 18px);
    white-space: nowrap;
  }
  .cat-nav__icon {
    width: clamp(32px, calc(32px + (100vw - 768px) * 0.0482), 48px);
    height: clamp(32px, calc(32px + (100vw - 768px) * 0.0482), 48px);
  }
  .cat-nav__label {
    min-width: 4em;
  }
  .cat-nav__item.is-active {
    background: var(--nav-active);
  }
}
@media (min-width: 1100px) {
  .cat-nav {
    margin-top: 32px;
    margin-bottom: 16px;
    padding-block: 10px;
  }
  .cat-nav__list li + li::before {
    height: 50px;
  }
  .cat-nav__item {
    gap: 8px;
    padding: 8px 22px;
    font-size: 18px;
  }
  .cat-nav__icon {
    width: 48px;
    height: 48px;
  }
}
@media (min-width: 1280px) {
  .cat-nav {
    margin-top: 40px;
    margin-bottom: 30px;
  }
  .cat-nav__list li + li::before {
    height: 60px;
  }
  .cat-nav__item {
    /* Active highlight = content + 30px each side (Figma category_over 228×80) */
    padding: 8px 30px;
    font-size: 24px;
  }
  .cat-nav__icon {
    width: 64px;
    height: 64px;
  }
}

/* ============================================================
   参加方法 (step cards)
   ============================================================ */
.step-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .step-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}
.step-card {
  position: relative;
  padding: 16px 16px 28px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
}
@media (min-width: 768px) {
  /* Ticket-shaped background (shadow baked into the SVG) + zigzag top strip.
     Keep the original card ratio so the notches/corners of the background
     SVG stay aligned (the card grows automatically if content is taller).

     --tw ("ticket width") mirrors the real card width — 2 columns inside
     the container (40px padding each side, 36px gap), capped at the 582px
     Figma card. All type and spacing below scales from it, so the content
     height stays inside the 582:962 ticket ratio at every viewport width.
     (Fixed px sizes previously made content overflow the ratio at 768–850px,
     pushing the perforation line into the tag.) */
  .step-card {
    --tw: min(582px, calc((100vw - 116px) / 2));
    aspect-ratio: 582 / 962;
    /* text inset 48/582 (images use 40/582 — widened via negative margins on media) */
    padding: 8% 8.25% 9%;
    background: none;
    border: 0;
    border-radius: 0;
  }
  .step-card::before {
    content: "";
    position: absolute;
    inset: -0.7% -2.5% -1.5% -1.1%;
    background: url("../assets/imgBg2.svg") 0 0 / 100% 100% no-repeat;
    z-index: -1;
  }
  .step-card--3::before { background-image: url("../assets/imgBg1.svg"); }
  .step-card--4::before { background-image: url("../assets/imgBg.svg"); }
  .step-card::after {
    content: "";
    position: absolute;
    top: 2.2%;
    left: 50%;
    transform: translateX(-50%);
    width: 87%;
    height: calc(var(--tw) * 0.0412);
    background: url("../assets/imgVector.svg") center / 100% 100% no-repeat;
  }
  .step-card--1::after { background-image: url("../assets/imgVector2.svg"); }
  .step-card--2::after { background-image: url("../assets/imgVector1.svg"); }
}
.step-card__media {
  position: relative;
  aspect-ratio: 326 / 200;
  overflow: hidden;
}
@media (min-width: 768px) {
  /* Figma: image top 81/582 (= padding 8% + 6%), side inset 40 (8px wider than the 48 text inset) */
  .step-card__media {
    aspect-ratio: 502 / 360;
    margin-top: 6%;
    margin-inline: -1.65%;
  }
}
.step-card__media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.step-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.step-card__step {
  position: absolute;
  top: 0;
  left: 0;
  padding: 8px;
  background: #fff;
  border-bottom-right-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}
@media (min-width: 768px) {
  .step-card__step {
    padding: calc(var(--tw) * 0.0069) calc(var(--tw) * 0.0206);
    font-size: calc(var(--tw) * 0.0412);
    line-height: 1.875;
  }
}
.step-card__rule {
  display: none;
}
@media (min-width: 768px) {
  /* Perforation line: absolutely positioned to pass exactly through the
     semicircular side notches baked into the ticket SVG (at 51.66% of the
     card height). The dashes use the original asset as-is (2px round dots,
     13px spacing) */
  .step-card__rule {
    display: block;
    position: absolute;
    left: 8%;
    right: 8%;
    top: 51.66%;
    height: 2px;
    background: url("../assets/imgLine.svg") 0 0 / 100% 100% no-repeat;
  }
}
.step-card__tag {
  display: inline-flex;
  margin-top: 16px;
  padding: 8px;
  background: var(--indigo);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}
@media (min-width: 768px) {
  .step-card__tag {
    /* The perforation line is out of flow, so create the image→tag gap
       directly at the original ratio (112px / 582 card width = 19.2%;
       % resolves against the card width). The line (51.66%) passes through
       the exact middle of that gap (56/56) */
    margin-top: 19.2%;
    padding: calc(var(--tw) * 0.0069) calc(var(--tw) * 0.0206);
    font-size: calc(var(--tw) * 0.0412);
    line-height: 1.875;
  }
}
.step-card__heading {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.3;
}
@media (min-width: 768px) {
  .step-card__heading {
    margin-top: calc(var(--tw) * 0.0481);
    font-size: calc(var(--tw) * 0.055);
    line-height: 1.25;
  }
}
.step-card__text {
  margin-top: 16px;
  font-size: 14px;
  line-height: 22px;
}
@media (min-width: 768px) {
  .step-card__text {
    margin-top: calc(var(--tw) * 0.0515);
    /* Figma body text box is 465px at the 582 card — keeps line-break points */
    max-width: calc(var(--tw) * 0.799);
    font-size: calc(var(--tw) * 0.0412);
    line-height: 1.667;
  }
}
/* STEP2 flow strip: アンケート回答 → 参加登録完了 → … */
.step-card__flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  row-gap: 4px;
  margin-top: 24px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
}
.step-card__flow-seg {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
@media (min-width: 768px) {
  .step-card__flow-seg { gap: calc(var(--tw) * 0.0275); }
}
.step-card__flow .is-em {
  color: var(--accent);
  font-weight: 700;
}
/* The arrow SVG has no intrinsic size (width/height=100%) — without an
   explicit height it collapses vertically; keep the original 24×6 ratio */
.step-card__flow-arrow {
  width: 12px;
  height: 3px;
  flex: none;
}
@media (min-width: 768px) {
  .step-card__flow {
    column-gap: calc(var(--tw) * 0.0275);
    row-gap: calc(var(--tw) * 0.0069);
    margin-top: calc(var(--tw) * 0.0687);
    font-size: calc(var(--tw) * 0.0412);
    line-height: 1.667;
  }
  .step-card__flow-arrow {
    width: calc(var(--tw) * 0.0412);
    height: auto;
    aspect-ratio: 24 / 6;
  }
}

/* ============================================================
   クーポン
   ============================================================ */
.coupon-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  /* Tablets show one card at a time (centered, 640px); 2 columns from 1280 like the original */
  .coupon-grid {
    max-width: 640px;
    margin-inline: auto;
    gap: 36px;
  }
}
@media (min-width: 1280px) {
  /* Figma: A/B cards share the same height (836) and terms-band position */
  .coupon-grid {
    grid-template-columns: 1fr 1fr;
    max-width: none;
  }
}
.coupon-card {
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  overflow: hidden; /* clip the bottom band to the card radius */
}
.coupon-card--a {
  background: var(--coupon-a-bg);
  border: 1px solid var(--coupon-a-border);
}
.coupon-card--b {
  background: var(--coupon-b-bg);
  border: 1px solid var(--coupon-b-border);
}
@media (min-width: 768px) {
  .coupon-card {
    border-radius: 12px;
    border-width: 2px;
  }
}
.coupon-card__body {
  flex: 1; /* pins the band to the card bottom (card B has empty space under the example box) */
  padding: 20px;
}
@media (min-width: 768px) {
  .coupon-card__body { padding: 32px; }
}
@media (min-width: 1280px) {
  .coupon-card__body { padding: 56px 56px 40px; }
}
.coupon-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.coupon-card__head img {
  width: 24px;
  height: 24px;
}
@media (min-width: 1280px) {
  .coupon-card__head { gap: 12px; }
  .coupon-card__head img {
    width: 48px;
    height: 48px;
  }
}
.coupon-card__title {
  font-size: 18px;
  letter-spacing: 0.1em;
}
@media (min-width: 1280px) {
  .coupon-card__title { font-size: 32px; }
}
.coupon-card--a .coupon-card__title,
.coupon-card--a .coupon-card__lead { color: var(--indigo); }
.coupon-card--b .coupon-card__title,
.coupon-card--b .coupon-card__lead { color: var(--accent); }
.coupon-card__lead {
  margin-top: 14px;
  font-weight: 500;
  font-size: 16px;
}
@media (min-width: 1280px) {
  .coupon-card__lead {
    margin-top: 20px;
    font-size: 24px;
  }
}
.coupon-card__desc {
  margin-top: 14px;
  font-size: 14px;
  line-height: 22px;
}
@media (min-width: 768px) {
  .coupon-card__desc { font-size: 16px; line-height: 1.6; }
}
@media (min-width: 1280px) {
  .coupon-card__desc {
    margin-top: 24px;
    font-size: 24px;
    line-height: 38px;
  }
  /* Figma: the first line of the B description (21 chars) slightly invades
     the padding to stay on one line (only at 1280+ where the card is fixed at 582) */
  .coupon-card--b .coupon-card__desc {
    white-space: nowrap;
  }
}

/* Panel top label chip: sits on the line, hiding it with the card background */
.coupon-card__panel-label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 5px 8px;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
}
@media (min-width: 1280px) {
  .coupon-card__panel-label {
    padding: 8px 16px;
    font-size: 20px;
    line-height: 1.6;
  }
}
.coupon-card--a .coupon-card__panel-label {
  background: var(--coupon-a-bg);
  color: var(--indigo);
}
.coupon-card--b .coupon-card__panel-label {
  background: var(--coupon-b-bg);
  color: var(--accent);
}

/* Benefit A: divider (label chip rides the line) + light panel */
.coupon-card__divider {
  position: relative;
  margin-top: 34px;
  border-top: 1px solid var(--indigo);
}
@media (min-width: 1280px) {
  .coupon-card__divider { margin-top: 48px; }
}
.tier-list {
  margin-top: 26px;
  padding-inline: 16px;
  background: var(--panel);
  border: 1px solid #e6e4e6;
  border-radius: 4px;
}
@media (min-width: 1280px) {
  .tier-list {
    margin-top: 36px;
    padding-inline: 32px;
  }
}
.tier {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 16px;
}
.tier + .tier {
  border-top: 1px dashed rgba(0, 0, 0, 0.3);
}
@media (min-width: 1280px) {
  .tier {
    gap: 16px;
    padding-block: 12px;
  }
}
.tier__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  background: url("../assets/imgSubtract.svg") center / 100% 100% no-repeat;
  font-weight: 700;
  font-size: 20px;
}
.tier--2 .tier__num { background-image: url("../assets/imgSubtract1.svg"); }
.tier--3 .tier__num { background-image: url("../assets/imgSubtract2.svg"); }
.tier--1 .tier__num { color: var(--purple); }
.tier--2 .tier__num { color: var(--green); }
.tier--3 .tier__num { color: var(--olive); }
@media (min-width: 1280px) {
  .tier__num {
    width: 56px;
    height: 56px;
    font-size: 24px;
  }
}
.tier__value {
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  white-space: nowrap;
}
.tier__value small {
  font-size: 16px;
  font-weight: 700;
}
@media (min-width: 1280px) {
  .tier__value { font-size: 28px; }
}
.tier .btn-pill {
  margin-left: auto;
}

/* Benefit B: dashed box (label chip rides the box border) */
.example-box {
  position: relative;
  margin-top: 30px;
  padding: 28px 12px 20px;
  border: 1px dashed var(--accent);
  border-radius: 4px;
}
@media (min-width: 1280px) {
  .example-box {
    margin-top: 48px;
    padding: 40px 24px 28px;
  }
}
.example-list {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  gap: 8px;
}
.example {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  font-size: 12px;
  line-height: 16px;
}
.example img {
  width: 60px;
  height: 60px;
}
@media (min-width: 1280px) {
  .example {
    font-size: 14px;
    line-height: 24px;
  }
  .example img {
    width: 80px;
    height: 80px;
  }
}

/* Bottom terms band (the card body's padding-bottom provides the gap) */
.coupon-card__terms {
  padding: 16px 32px 20px;
}
.coupon-card--a .coupon-card__terms { background: var(--coupon-a-band); }
.coupon-card--b .coupon-card__terms { background: var(--coupon-b-band); }
@media (min-width: 1280px) {
  .coupon-card__terms {
    min-height: 200px; /* Figma band height — aligns the A/B band start lines */
    padding: 32px 40px 28px;
  }
}
.coupon-card__terms-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 1.3;
}
.coupon-card__terms-title img {
  width: 20px;
  height: 20px;
}
.coupon-card--a .coupon-card__terms-title { color: var(--indigo); }
.coupon-card--b .coupon-card__terms-title { color: var(--accent); }
@media (min-width: 1280px) {
  .coupon-card__terms-title { font-size: 20px; }
  .coupon-card__terms-title img {
    width: 28px;
    height: 28px;
  }
}
.coupon-card__terms ul {
  margin-top: 12px;
}
.coupon-card__terms li {
  position: relative;
  padding-left: 12px;
  font-size: 14px;
  line-height: 24px;
}
.coupon-card__terms li + li {
  margin-top: 4px;
}
.coupon-card__terms li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink);
}
@media (min-width: 1280px) {
  .coupon-card__terms ul { margin-top: 12px; }
  .coupon-card__terms li {
    padding-left: 16px;
    font-size: 18px;
    line-height: 32px;
  }
  .coupon-card__terms li::before { top: 14px; }
}
/* Mobile: the narrow band makes items wrap to two lines (especially the 2nd
   item of benefit A), so keep the 14px type and only reduce the band's side
   padding to gain width. Padding 8px + bullet inset 12px → the text aligns
   with the body area (20px padding). Width-wise a single line only holds on
   screens of about 382px and up (two lines below that) */
@media (max-width: 767px) {
  .coupon-card__terms {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* ============================================================
   賞品 (prize)
   ============================================================ */
.section--prize {
  background: var(--prize-bg);
}
.prize-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 32px;
}
@media (min-width: 768px) {
  .prize-grid {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 56px;
  }
}
@media (min-width: 1100px) {
  .prize-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.prize-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 16px 24px;
  background: #fff;
  border-radius: 4px;
}
@media (min-width: 768px) {
  .prize-card {
    gap: 24px;
    padding: 24px;
    border-radius: 8px;
    box-shadow: var(--shadow-card);
  }
  /* Reproduce the scattered Figma layout: slight per-card rotation */
  .prize-card--1 { transform: rotate(1.2deg); }
  .prize-card--2 { transform: rotate(-1deg); }
  .prize-card--3 { transform: rotate(1deg); }
  .prize-card--4 { transform: rotate(-1deg); }
  .prize-card--5 { transform: rotate(1deg); }
  .prize-card--6 { transform: rotate(-1.2deg); }
  /* Masking-tape decoration (top center, rotates with the card) */
  .prize-card--1::before,
  .prize-card--6::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 32px;
    background: url("../assets/imgMaskingTape1.webp") center / cover no-repeat;
    opacity: 0.5;
  }
  .prize-card--6::before {
    background-image: url("../assets/imgMaskingTape2.webp");
  }
}
.prize-card__media {
  position: relative;
  aspect-ratio: 326 / 200;
  overflow: hidden;
}
@media (min-width: 768px) {
  .prize-card__media { aspect-ratio: 336 / 300; }
}
.prize-card__media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.prize-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prize-card__flag {
  position: absolute;
  top: 8px;
  right: 12px;
  padding: 10px;
  border-radius: 20px;
  background: var(--flag-red);
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .prize-card__flag {
    top: 12px;
    padding: 10px 16px;
    border-radius: 30px;
    font-weight: 500;
    font-size: 16px;
  }
}
@media (min-width: 1280px) {
  .prize-card__flag {
    padding: 10px 20px;
    font-size: 20px;
  }
}
.prize-card__req {
  position: absolute;
  right: 12px;
  bottom: 16px;
  padding: 10px 14px;
  border-radius: 20px;
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .prize-card__req {
    right: 16px;
    border-radius: 30px;
    font-weight: 500;
    font-size: 16px;
  }
}
@media (min-width: 1280px) {
  .prize-card__req { font-size: 20px; }
}
.prize-card__req--orange { background: var(--accent); }
.prize-card__req--blue   { background: #7fa7c6; }
.prize-card__req--pink   { background: #c6a4b8; }
.prize-card__req--indigo { background: var(--indigo); }
.prize-card__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  row-gap: 4px;
  color: var(--brown);
  font-size: 14px;
  line-height: 1;
}
.prize-card__title .u-normal {
  font-weight: 400;
}
.prize-card__sep {
  width: 1px;
  height: 8px;
  background: var(--brown);
}
@media (min-width: 768px) {
  .prize-card__title {
    column-gap: 16px;
    font-size: 20px;
    line-height: 32px;
  }
  .prize-card__title .u-normal { font-size: 16px; }
  .prize-card__sep {
    width: 2px;
    height: 20px;
  }
  .prize-card__title--break .prize-card__name {
    flex-basis: 100%;
  }
}
.prize-card__desc {
  font-size: 14px;
  line-height: 22px;
}
@media (min-width: 1280px) {
  /* Figma body text boxes (344–351px) are wider than the card content (336px)
     and slightly invade the padding — extra room to match line-break points */
  .prize-card__desc {
    margin-right: -16px;
  }
}
.prize-card__desc .u-caution {
  display: block;
  color: var(--accent);
}
@media (min-width: 768px) {
  .prize-card__desc {
    font-size: 18px;
    line-height: 30px;
  }
  .prize-card__desc .u-caution { font-size: 16px; }
}
.prize-card__value {
  position: relative;
  margin-top: auto;
  padding-left: 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 24px;
}
.prize-card__value::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--muted);
}
.prize-notes {
  margin-top: 24px;
  color: var(--muted);
  font-size: 12px;
  line-height: 20px;
}
@media (min-width: 768px) {
  .prize-notes {
    margin-top: 48px;
    font-size: 14px;
    line-height: 24px;
  }
}

/* ============================================================
   STAMP MAP
   ============================================================ */
.map-board {
  position: relative;
  margin-top: 24px;
  aspect-ratio: 358 / 325;
}
@media (min-width: 768px) {
  .map-board {
    margin-top: 48px;
    aspect-ratio: 1200 / 740;
  }
}
/* Shadow strip under the torn-paper frame */
.map-board::before {
  content: "";
  position: absolute;
  left: -1.4%;
  right: -1.4%;
  bottom: -2%;
  height: 14%;
  background: url("../assets/imgTornPaperShadow.svg") center / 100% 100% no-repeat;
}
.map-board__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Semi-transparent photo texture inside the frame */
.map-board__photo {
  position: absolute;
  inset: 0;
  background: url("../assets/imgImage7.webp") center / cover no-repeat;
  -webkit-mask-image: url("../assets/imgImage6.svg");
  mask-image: url("../assets/imgImage6.svg");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0.5;
}
.map-board__pin {
  position: absolute;
  left: 50%;
  top: -13px;
  width: 24px;
  transform: translateX(-50%) rotate(7.55deg);
}
@media (min-width: 768px) {
  .map-board__pin {
    top: -23px;
    width: 47px;
  }
}
.map-board__iframe {
  position: absolute;
  left: 3.3%;
  top: 3.7%;
  width: 93.4%;
  height: 84.3%;
  background: #d9d9d9;
}
@media (min-width: 768px) {
  .map-board__iframe {
    top: 5.4%;
    height: 77.8%;
  }
}

/* ============================================================
   ハッシュタグキャンペーン
   ============================================================ */
.section--hashtag {
  background: var(--hashtag-bg);
}
@media (min-width: 1100px) {
  /* Hashtag lead/intro is 20px in the original */
  .section--hashtag .section__lead {
    font-size: 20px;
    line-height: 36px;
  }
}
.ig-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "avatar meta"
    "note   note"
    "follow follow";
  align-items: center;
  column-gap: 16px;
  padding: 16px;
  background: var(--paper);
  border-radius: 4px;
}
@media (min-width: 768px) {
  .ig-card {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "avatar meta follow"
      "avatar note follow";
    align-items: start;
    column-gap: 32px;
    max-width: 1060px;
    margin-inline: auto;
    padding: 24px 32px;
    border: 1px solid #d5e1e1;
    border-radius: 12px;
  }
}
@media (min-width: 1100px) {
  .ig-card {
    column-gap: 48px;
    padding: 40px 48px;
  }
}
.ig-card__avatar {
  grid-area: avatar;
  position: relative;
  width: 72px;
  height: 72px;
}
@media (min-width: 1100px) {
  .ig-card__avatar {
    width: 160px;
    height: 160px;
  }
}
.ig-card__face {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.ig-card__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ig-card__meta {
  grid-area: meta;
  align-self: center;
}
.ig-card__handle {
  display: inline-block;
  color: var(--indigo);
  font-weight: 700;
  font-size: 16px;
}
.ig-card__name {
  margin-top: 10px;
  font-weight: 500;
  font-size: 14px;
}
@media (min-width: 768px) {
  .ig-card__handle { font-size: 20px; }
  .ig-card__name { font-size: 16px; }
}
@media (min-width: 1100px) {
  .ig-card__handle { font-size: 24px; }
  .ig-card__name {
    margin-top: 12px;
    font-size: 20px;
  }
}
.ig-card__note {
  grid-area: note;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e6e6e6;
  color: var(--muted);
  font-size: 14px;
}
@media (min-width: 768px) {
  .ig-card__note {
    align-self: start;
    margin-top: 8px;
    padding-top: 0;
    border-top: 0;
    font-size: 16px;
  }
}
@media (min-width: 1100px) {
  .ig-card__note {
    margin-top: 12px;
    font-size: 18px;
  }
}
.ig-card__follow-wrap {
  grid-area: follow;
  display: flex;
  margin-top: 16px;
}
.ig-card__follow-wrap .btn-follow {
  flex: 1;
}
@media (min-width: 768px) {
  /* Desktop: follow button behind a vertical divider */
  .ig-card__follow-wrap {
    align-self: stretch;
    align-items: center;
    margin-top: 0;
    padding-left: 32px;
    border-left: 1px solid #e6e6e6;
  }
  .ig-card__follow-wrap .btn-follow { flex: none; }
}
@media (min-width: 1100px) {
  .ig-card__follow-wrap { padding-left: 48px; }
}

.hashtag-lead {
  margin-top: 32px;
}
@media (min-width: 768px) {
  .hashtag-lead { margin-top: 48px; }
}
.hashtag-lead p + p {
  margin-top: 14px;
}
@media (min-width: 768px) {
  .hashtag-lead p + p { margin-top: 0; }
}
.hashtag-note {
  margin-top: 24px;
  color: var(--indigo);
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  line-height: 26px;
}
@media (min-width: 768px) {
  .hashtag-note {
    margin-top: 32px;
    font-weight: 500;
    font-size: 18px;
    line-height: 38px;
  }
}

/* Widget and fallback are stacked in the same grid cell and swapped once the
   widget renders. Before that, max-height clips the invisible widget to the
   fallback height; once shown, the clip is released so 続きを見る can grow
   the list downward */
.insta-zone {
  display: grid;
  margin-top: 32px;
}
@media (min-width: 768px) {
  .insta-zone { margin-top: 48px; }
}
.insta-zone > * {
  grid-area: 1 / 1;
}
/* Gap between the Instagram grid and the 続きを見る button (independent of
   other section CTAs). While the widget is live, the last row's card
   margin-bottom (sp 14 / pc 20) remains as residual space, so offset it to
   make the values below the real gap. */
#instaCta { margin-top: 28px; }
body.insta-live #instaWidget { margin-bottom: -14px; }
@media (min-width: 768px) {
  #instaCta { margin-top: 72px; }
  body.insta-live #instaWidget { margin-bottom: -20px; }
}
#instaWidget {
  max-height: 444px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
@media (min-width: 768px) {
  #instaWidget { max-height: 688px; }
}
body.insta-live #instaWidget {
  max-height: none;
  overflow: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.4s ease;
}
body.insta-live #instaFallback {
  display: none;
}

/* Fallback: stamp-frame polaroids (8 on desktop / 4 on mobile) */
#instaFallback {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  align-content: start;
}
@media (min-width: 768px) {
  #instaFallback {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }
}
.polaroid {
  padding: 8% 8% 5%;
  background: url("../assets/imgVector6.svg") center / 100% 100% no-repeat;
}
.polaroid img {
  width: 100%;
  aspect-ratio: 216 / 248;
  object-fit: cover;
}
.polaroid__date {
  display: none;
  margin-top: 8px;
  color: #555;
  text-align: right;
  font-size: 14px;
  line-height: 24px;
}
@media (min-width: 768px) {
  .polaroid__date { display: block; }
}

/* ============================================================
   banner
   ============================================================ */
.banner {
  display: block;
  width: min(840px, 100% - 32px);
  margin: 28px auto 0;
}
@media (min-width: 768px) {
  .banner { margin-top: 100px; }
}
.banner img {
  width: 100%;
}

/* ============================================================
   footer
   ============================================================ */
.footer {
  margin-top: 28px;
  padding: 24px 0 40px;
  background: var(--footer-bg);
  color: var(--footer-ink);
}
/* The original footer content is wider (1240px, x 100–1340) than the body (1200) */
.footer .container {
  max-width: 1320px;
  /* Footer gutter is 40px on every breakpoint (wider than the 16px body gutter on SP) */
  padding-inline: 40px;
}
@media (min-width: 768px) {
  .footer {
    margin-top: 100px;
    padding: 44px 0 56px;
  }
}
.footer__top {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
@media (min-width: 768px) {
  .footer__top {
    flex-direction: row;
    align-items: center;
    gap: 40px;
  }
}
.footer__logo {
  width: 140px;
}
@media (min-width: 768px) {
  .footer__logo { width: 252px; }
}
.footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-weight: 500;
  font-size: 14px;
  line-height: 25px;
  letter-spacing: 0.015em;
}
.footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--footer-link);
}
.footer__links img {
  width: 16px;
  height: 20px;
}
@media (min-width: 768px) {
  .footer__links {
    flex-direction: row;
    gap: 0;
    margin-left: auto;
  }
  .footer__links li {
    display: flex;
    align-items: center;
  }
  .footer__links li + li {
    border-left: 1px solid var(--footer-link);
  }
  .footer__links a {
    padding-inline: 20px;
  }
}
.footer__sns {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font-size: 10px;
}
.footer__sns img {
  width: 36px;
  height: 36px;
}
/* Keep 公式SNS on one line (it used to shrink and wrap on narrow widths) */
.footer__sns p { white-space: nowrap; }
@media (min-width: 768px) {
  .footer__sns {
    position: static;
    margin-left: 24px;
    /* In the row layout, keep SNS from being squeezed along with the links */
    flex-shrink: 0;
  }
}
/* Wide tablets to PC (e.g. iPad Pro portrait, 1024px): links on one line, same
   as pcfooter. The link group used to get squeezed and labels wrapped mid-way
   → no shrinking + nowrap */
@media (min-width: 1024px) {
  .footer__links { flex-shrink: 0; }
  .footer__links a { white-space: nowrap; }
}
/* Narrow tablets (768–1023): logo + links don't fit on one line, so drop the
   links to a full-width second row and keep each label on one line. SNS stays
   top right */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .footer__top { flex-wrap: wrap; }
  .footer__sns { margin-left: auto; }
  .footer__links {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
    margin-top: 4px;
    flex-shrink: 0;
  }
  .footer__links a { white-space: nowrap; }
}
.footer__body {
  margin-top: 32px;
}
@media (min-width: 768px) {
  /* Partner logos sit only next to the 主催 row (row 1); the 協力 row spans the full width */
  .footer__body {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 48px;
    margin-top: 28px;
  }
  .footer__body .org-list {
    display: contents;
  }
  .footer__body .org-list__row {
    grid-column: 1;
  }
  .footer__body .org-list__row:last-child {
    grid-column: 1 / -1;
  }
  .footer__body .footer__partners {
    /* Logos span the 主催/後援 rows — they don't push the row heights, so the
       主催/後援/協力 gaps stay a uniform 16px */
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: start;
  }
}
/* The forced breaks (br-pc) in the 協力 dd only apply at 1400px+ where the
   nowrap 3-line layout kicks in. On 768–1399 tablets hide them and let the
   text wrap naturally, avoiding ragged short tail lines */
.footer__body .org-list__row:last-child dd .br-pc { display: none; }
@media (min-width: 1400px) {
  /* 協力 name list: the original draws it nowrap, overflowing the container
     by ~50px (x156–1393 at 1440). Reproduce only at widths where it fully fits */
  .footer__body .org-list__row:last-child dd {
    white-space: nowrap;
  }
  .footer__body .org-list__row:last-child dd .br-pc { display: inline; }
}
.org-list__row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.org-list__row + .org-list__row {
  margin-top: 16px;
}
.org-list__row dt {
  position: relative;
  flex: none;
  padding-left: 12px;
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
}
.org-list__row dt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--footer-ink);
}
.org-list__row dd {
  font-size: 12px;
  line-height: 23px;
  letter-spacing: 0.015em;
}
/* SP: the 協力 name list goes full-width below its label row (Figma) */
.org-list__row:last-child {
  display: block;
}
.org-list__row:last-child dd {
  margin-top: 12px;
  /* Left-aligned with the label text (12px bullet inset, Figma) */
  padding-left: 12px;
  font-size: 12px;
  line-height: 21px;
}
@media (min-width: 768px) {
  .org-list__row:last-child {
    display: flex;
  }
  .org-list__row:last-child dd {
    margin-top: 0;
    padding-left: 0;
    font-size: 12px;
    line-height: 23px;
  }
}
.org-list__logo {
  display: block;
  width: 239px;
}
@media (min-width: 768px) {
  .org-list__logo { width: 359px; }
}
.footer__partners {
  display: flex;
  gap: 16px;
  margin-top: 24px;
  margin-left: 12px;
}
@media (min-width: 768px) {
  .footer__partners { margin-top: 4px; }
}
.partner-logo {
  position: relative;
  display: block;
  flex: none;
  width: 56px;
  height: 56px;
  padding: 2px;
  background: #fff;
  border-radius: 2px;
  overflow: hidden;
}
.partner-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 2px;
}
/* Oversized source logo used cropped (しあわせ、まるっと四国) */
.partner-logo--crop {
  padding: 0;
}
.partner-logo--crop img {
  position: absolute;
  left: -78%;
  top: -34%;
  width: 254%;
  height: auto;
  max-width: none;
}
@media (min-width: 768px) {
  .partner-logo {
    width: 68px;
    height: 68px;
    padding: 3px;
    border-radius: 4px;
  }
}

/* ============================================================
   Instagram hashtag widget (camtsuku) skin
   Skins the cmtin-* DOM injected by the widget into stamp-frame cards.
   The widget script injects !important styles at runtime, so the rules
   here also use !important + tag-qualified selectors to win specificity.
   ============================================================ */
#instaWidget div.cmtin-wrap-caption ul.cmtin-boxset > li {
  padding: 14px 16px !important;
  height: auto !important;
  margin-bottom: 14px !important;
  background: url("../assets/imgVector6.svg") center / 100% 100% no-repeat !important;
  background-color: transparent !important;
  border: 0 !important;
}
#instaWidget .cmtin-wrap-caption .cmtin-boxset > li .cmtin-inner {
  height: 146px !important;
  margin-bottom: 6px !important;   /* photo ↔ nickname gap reduced (widget default 10px) */
}
#instaWidget .cmtin-wrap-caption .cmtin-boxset > li .cmtin-info {
  height: 36px !important;
  overflow: hidden !important;
  margin-bottom: 5px !important;   /* nickname ↔ likes/date gap reduced (widget default 8px) */
}
/* Reduced top margin of the likes/date row (widget default 11px) */
#instaWidget div.cmtin-wrap-caption ul.cmtin-boxset > li .cmtin-attribute {
  margin-top: 7px !important;
}
#instaWidget .cmtin-wrap-caption .cmtin-boxset > li .cmtin-post {
  /* Hide the caption/location area — keeps the card heights uniform */
  display: none !important;
}
#instaWidget div.cmtin-wrap-caption ul.cmtin-boxset > li .cmtin-name,
#instaWidget div.cmtin-wrap-caption ul.cmtin-boxset > li .cmtin-attribute {
  font-family: "Zen Kaku Gothic Antique", sans-serif !important;
}
#instaWidget div.cmtin-wrap-caption ul.cmtin-boxset > li .cmtin-post-date,
#instaWidget div.cmtin-wrap-caption ul.cmtin-boxset > li .cmtin-post-date a {
  color: #555 !important;
}
/* The built-in もっと見る button stays hidden; the section's 続きを見る
   (#instaMore) forwards clicks to it */
#instaWidget .cmtin-andmore {
  display: none !important;
}
@media (min-width: 768px) {
  #instaWidget div.cmtin-wrap-caption ul.cmtin-boxset > li {
    padding: 24px 28px !important;
    margin-bottom: 20px !important;
  }
  #instaWidget .cmtin-wrap-caption .cmtin-boxset > li .cmtin-inner {
    height: 224px !important;
  }
  #instaWidget .cmtin-wrap-caption .cmtin-boxset > li .cmtin-info {
    height: 40px !important;
  }
}

/* ============================================================
   back-to-top
   ============================================================ */
#toTop {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
@media (min-width: 768px) {
  #toTop {
    right: 40px;
    bottom: 40px;
  }
}
#toTop.show {
  opacity: 1;
  pointer-events: auto;
}
@media (hover: hover) {
  #toTop.show:hover { opacity: 0.8; }
}
.to-top__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.to-top__arrow {
  position: absolute;
  left: 50%;
  top: 13px;
  width: 14.8px;
  height: 17.6px; /* the SVG has no intrinsic size — it stretches vertically if unset */
  transform: translateX(-50%);
}
.to-top__label {
  position: absolute;
  left: 50%;
  top: 32px;
  transform: translateX(-50%);
  color: #6b7280;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.04em;
}