/* =============================================================
   ラフ×ラフ 全国巡業記念 ／ ご当地盛り上げキャンペーン LP
   Tone & manner: pastel diagonal stripe (#EAAAB7 / #ECBCC6) + floating clouds
   ============================================================= */

:root {
  --pink-a: #EAAAB7;
  --pink-b: #ECBCC6;
  --ink: #5B3242;
  --ink-soft: #8a5f6d;
  --cream: #FFF8F6;
  --white: #FFFFFF;
  --shadow: 0 20px 45px -20px rgba(91, 50, 66, 0.35);
  --radius-lg: 32px;
  --radius-md: 20px;
  --content-w: 1200px;

  /* DS-mambo is the brand display font per spec; font file supplied was empty,
     so it falls back to Zen Maru Gothic / Baloo 2 until a real webfont file is added. */
  --font-display: "DS-mambo", "Baloo 2", "Zen Maru Gothic", sans-serif;
  --font-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--pink-b);
  background-image: repeating-linear-gradient(
    -45deg,
    var(--pink-a) 0px,
    var(--pink-a) 22px,
    var(--pink-b) 22px,
    var(--pink-b) 44px
  );
  background-attachment: fixed;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.page-frame { position: relative; }

/* ---------------- cloud layer (shared) ---------------- */

.cloud-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.cloud {
  position: absolute;
  width: var(--size);
  will-change: transform, opacity;
  transition: opacity 1.1s ease-out;
}

.cloud-img {
  width: 100%;
  display: block;
  filter: drop-shadow(0 8px 10px rgba(91, 50, 66, 0.12));
  animation: floaty var(--dur, 9s) ease-in-out var(--delay, 0s) infinite alternate;
  transform-origin: center;
}

@keyframes floaty {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-22px); }
}

/* ---------------- KV ---------------- */

.kv {
  position: relative;
  min-height: 94vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px 40px;
  overflow: hidden;
}

.kv-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  max-width: 640px;
}

@keyframes kvPopIn {
  0% { opacity: 0; transform: translateY(22px) scale(0.82); }
  60% { opacity: 1; transform: translateY(-5px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.kv-logo {
  width: min(88vw, 560px);
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(91, 50, 66, 0.28));
  animation: kvPopIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes kvPopInFlat {
  0% { opacity: 0; transform: translateY(18px); }
  60% { opacity: 1; transform: translateY(-5px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* The white line and gradient shadow are separate sibling layers, not
   negative z-index pseudo-elements: a stacking-context root's own
   background always paints *before* (behind) every descendant of that
   context, negative z-index included — so a -1 pseudo-element can never
   actually sit behind its own parent's background. Painting order for
   plain in-flow siblings follows DOM order instead, which is reliable. */
.kv-title-anim {
  position: relative;
  display: inline-block;
  animation: kvPopInFlat 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}

.kv-title-shadow,
.kv-title-frame {
  position: absolute;
  border-radius: 18px;
}

.kv-title-shadow {
  inset: 0;
  transform: translate(7px, 7px);
  background: linear-gradient(135deg, #9B6FDE, #F17FA6);
}

.kv-title-frame {
  inset: -3px;
  background: var(--white);
}

.kv-title {
  position: relative;
  margin: 0;
  color: var(--white);
  font-weight: 700;
  font-size: clamp(16px, 2.4vw, 18px);
  line-height: 1.6;
  padding: 12px 32px;
  border-radius: 18px;
  background: linear-gradient(135deg, #9B6FDE, #F17FA6);
}

.kv-cross {
  color: currentColor;
  padding: 0 2px;
}

.kv-badge {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 6vw, 46px);
  line-height: 1.5;
  color: var(--white);
  text-shadow: 0 2px 0 var(--pink-a), 0 6px 18px rgba(91, 50, 66, 0.35);
  letter-spacing: 0.02em;
  animation: kvPopIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

/* ---------------- generic section / card ---------------- */

.section {
  position: relative;
  padding: 56px 20px;
}

.container {
  position: relative;
  z-index: 2;
  max-width: var(--content-w);
  margin: 0 auto;
  background: var(--cream);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 48px clamp(20px, 6vw, 56px);
  border: 3px solid var(--white);
}

/* 02 only: frosted-glass card */
#areas .container {
  background: rgba(255, 248, 246, 0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* 02: gradient corner accents on the top-left / bottom-right of the card,
   traced with the same radius as the card's own rounded corner */
.corner-accent {
  position: absolute;
  z-index: 3;
  width: 150px;
  height: 150px;
  overflow: visible;
  pointer-events: none;
}

.corner-tl { top: -7px; left: -7px; }

.corner-br {
  bottom: -7px;
  right: -7px;
  transform: rotate(180deg);
}

/* 01: no card framing, text sits directly on the striped background */
#about .container {
  background: none;
  box-shadow: none;
  border: none;
}

#about.section {
  padding-top: 24px;
}

/* full-bleed band: no side margins, no card framing, flush with the page bottom */
#schedule.section {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

#schedule .container {
  max-width: none;
  width: 100%;
  margin: 0;
  border-radius: 0;
  border: none;
  border-top: 3px solid var(--white);
  border-bottom: 3px solid var(--white);
  box-shadow: none;
}

.reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  transition: opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* cards pop in individually, exactly when each one scrolls into view
   (not tied to the section's own reveal, so items further down the
   grid don't finish animating before they're actually visible) */
.event-item,
.schedule-card {
  opacity: 0;
  transform: translateY(26px) scale(0.9);
  transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.event-item.in-view,
.schedule-card.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.event-item.in-view:nth-child(2) { transition-delay: 0.06s; }
.event-item.in-view:nth-child(3) { transition-delay: 0.12s; }
.event-item.in-view:nth-child(4) { transition-delay: 0.18s; }

.schedule-card.in-view:nth-child(2) { transition-delay: 0.12s; }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  margin: 0 0 20px;
  color: #D6478C;
}

.lead {
  margin: 0 0 14px;
  font-size: clamp(17px, 3vw, 21px);
  font-weight: 700;
  line-height: 1.7;
  color: var(--ink);
}

#about .lead {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 5vw, 30px);
  line-height: 1.5;
  color: #D6478C;
  -webkit-text-stroke: 4px var(--white);
  paint-order: stroke fill;
  text-shadow: 2px 2px 0 var(--white);
}

.body-text {
  margin: 0;
  font-size: 17px;
  line-height: 2;
  color: var(--ink);
}

.body-text.small { font-size: 16px; line-height: 1.9; margin-bottom: 8px; }

.pc-only { display: inline; }
.sp-only { display: none; }

@media (max-width: 640px) {
  .pc-only { display: none; }
  .sp-only { display: inline; }
}

.section-head {
  max-width: var(--content-w);
  margin: 0 auto;
  text-align: center;
}

/* ---------------- 02 event visual grid ---------------- */

.event-grid {
  margin: 40px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.event-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.event-card {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 18px;
  border-radius: var(--radius-md);
  border: 4px solid var(--card-border, var(--area-color, var(--pink-a)));
  box-shadow: 0 14px 30px -16px rgba(91, 50, 66, 0.45);
  background: var(--white);
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px -14px rgba(91, 50, 66, 0.55);
}

.event-badge {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  background: var(--area-color, var(--pink-a));
  color: var(--white);
  font-weight: 700;
  font-size: 14px;
  padding: 7px 20px;
  border-radius: 999px;
  border: 3px solid var(--white);
  white-space: nowrap;
  box-shadow: 0 6px 14px -6px rgba(91, 50, 66, 0.5);
}

.event-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 16px;
}

.event-name {
  margin: 14px 0 0;
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  text-align: center;
}

@media (max-width: 900px) {
  .event-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .event-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------------- 03 schedule ---------------- */

.schedule-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 640px) {
  .schedule-grid { grid-template-columns: 1fr; }
}

.schedule-card {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 30px 20px 24px;
  text-align: center;
  box-shadow: 0 14px 30px -18px rgba(91, 50, 66, 0.4);
}

.schedule-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--white);
  background: linear-gradient(135deg, var(--pink-a), var(--pink-b));
  padding: 7px 22px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.badge-num {
  font-size: 1.7em;
  margin: 0 3px;
}

.schedule-date {
  margin: 0 0 16px;
  font-weight: 700;
  font-size: 25px;
  color: var(--ink);
}

.schedule-date .dow {
  font-size: 20px;
  font-weight: 500;
  color: var(--ink-soft);
}

.schedule-members {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.schedule-members span {
  background: var(--chip-color, var(--pink-a));
  border: none;
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
}