/* =========================================================
   あつこ＆タニケン ハッピードレミ♬ハウス — 10th Anniversary LP
   ========================================================= */

:root {
  --font-rounded: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
  --font-jp: 'Noto Sans JP', sans-serif;

  --color-bg-cream: #fffaef;
  --color-bg-pink-soft: #fff8fa;
  --color-text-brown: #4e3629;
  --color-text-dark: #2c1e1a;
  --color-text-muted: #7a6f62;
  --color-text-muted2: #6b5a55;
  --color-pink: #e85d9e;
  --color-gold-border: #d1b87f;
  --color-line-pink: #ffbbd4;

  --page-max: 1440px;
  --content-max: 1200px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg-cream);
  color: var(--color-text-brown);
  font-family: var(--font-jp);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

hr { border: none; }

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 0 20px;
}

.section-head__eyebrow {
  font-family: var(--font-rounded);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0;
}

.section-head__eyebrow--pink { color: var(--color-pink); }

.section-head__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 38px);
  letter-spacing: 0.05em;
  margin: 0;
  color: var(--color-text-brown);
}

.section-head__line {
  width: 80px;
  height: 4px;
  margin-top: 4px;
}

/* ---------- floating animation ---------- */
.floaty {
  animation: floaty 5.5s ease-in-out infinite;
  will-change: transform;
}
.floaty--slow { animation-duration: 7.5s; }

@keyframes floaty {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(0, -16px) rotate(2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .floaty { animation: none; }
}

/* =========================================================
   Hero — photos, cloud bank and title overlap in one stage
   (positions derived from the Figma composition, in % of a
   1440 x 1036 reference box so everything scales together)
   ========================================================= */
.hero {
  position: relative;
  z-index: 2;
  background: var(--color-bg-cream);
}

.hero__stage {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 1440 / 1036;
  /* Content inside (.hero__content, .hero__title-banner-inner) is capped
     at 1440px wide, but this box's height keeps growing with width past
     that point via aspect-ratio — capping height here too stops the
     percentage-based vertical gaps inside from stretching out on very
     wide screens. The background still crops in nicely via object-fit. */
  max-height: 1036px;
  overflow: visible;
}

.hero__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 78.19%;
  object-fit: cover;
  z-index: 1;
}

/* The striped background is free to stretch full-bleed, but the people
   and decorations stay capped so they don't blow up on ultra-wide
   screens — same 1440-wide reference as the rest of the page. */
.hero__content {
  position: absolute;
  inset: 0;
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
}

.hero__person {
  position: absolute;
  z-index: 2;
}

.hero__person--taniken {
  left: 45%;
  top: 11%;
  width: 45.63%;
  z-index: 2;
  animation: heroFadeUp 0.9s ease-out 1.0s both;
}

.hero__person--atsuko {
  left: 4%;
  top: 11%;
  width: 50%;
  z-index: 3;
  animation: heroFadeUp 0.9s ease-out 0.3s both;
}

/* Cloud bank + title: overlaps the lower part of the photos. Sits
   outside .hero__content so the cloud shape spans the same full-bleed
   width as the striped background — only the text inside it is capped. */
.hero__title-banner {
  position: absolute;
  left: 0;
  top: 47.1%;
  width: 100%;
  height: 52.9%;
  z-index: 4;
}

.hero__title-banner-inner {
  position: absolute;
  inset: 0;
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
}

.hero__title-banner-base,
.hero__title-banner-text {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* cloud-block.png is wider (relatively) than the banner box, so
   object-fit: contain leaves a gap at the bottom that shows the section
   background below through it — stretch it vertically to fully cover
   the banner instead (a soft cloud shape hides the slight distortion) */
.hero__title-banner-base {
  object-fit: fill;
}

/* happy-doremi.svg is a tightly-cropped title graphic (no baked-in
   lettering or canvas padding); cap it at 70% of the banner width so it
   doesn't dominate, anchored toward the lower part of the cloud bank */
.hero__title-banner-text {
  inset: auto;
  left: 50%;
  bottom: 12%;
  width: 70%;
  height: auto;
  transform: translateX(-50%);
}

.hero__title-banner-name {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 42%;
  max-width: 540px;
  transform: translateX(-50%);
  z-index: 1;
}

.hero__cloud-pink {
  position: absolute;
  left: -8.3%;
  top: 84.6%;
  width: 26%;
  max-width: 340px;
  z-index: 5;
}

.hero__badge {
  position: absolute;
  left: 1.9%;
  top: 5.4%;
  width: 18.4%;
  max-width: 265px;
  z-index: 6;
  animation: heroPopIn 0.7s ease-out 1.8s both;
}

.hero__rabbit {
  position: absolute;
  right: -5%;
  top: 0;
  width: 27%;
  max-width: 340px;
  z-index: 7;
}

/* Settles down from above rather than rising from below — atsuko in
   particular has almost no clearance between her feet and the cloud
   bank below, so animating up from below would poke her past the
   section boundary while the entrance is still mid-flight. */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(-28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroPopIn {
  0%   { opacity: 0; transform: scale(0.55) rotate(-10deg); }
  70%  { opacity: 1; transform: scale(1.08) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Sparkle burst that pops right as each person lands */
.hero__spark {
  position: absolute;
  width: 22px;
  height: 22px;
  clip-path: polygon(50% 0%, 61% 35%, 100% 50%, 61% 65%, 50% 100%, 39% 65%, 0% 50%, 39% 35%);
  opacity: 0;
  z-index: 8;
  pointer-events: none;
  /* pop plays in the first 1s of a 9s cycle, then idles until the next
     one — an occasional twinkle rather than a constant flicker */
  animation: sparkPop 9s ease-out infinite backwards;
  /* white halo so the sparkle reads against any stripe color behind it */
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 7px rgba(255, 255, 255, 0.6));
}

@keyframes sparkPop {
  0%     { opacity: 0; transform: scale(0) rotate(0deg); }
  3.9%   { opacity: 1; transform: scale(1.15) rotate(20deg); }
  7.2%   { opacity: 1; transform: scale(0.9) rotate(25deg); }
  11.1%  { opacity: 0; transform: scale(0.4) rotate(30deg); }
  100%   { opacity: 0; transform: scale(0.4) rotate(30deg); }
}

.hero__spark--atsuko1 {
  left: 28%;
  top: 9%;
  width: 20px;
  height: 20px;
  background: #ffd76a;
  animation-delay: 1.05s;
}

.hero__spark--atsuko2 {
  left: 14%;
  top: 42%;
  width: 16px;
  height: 16px;
  background: #ff6fa8;
  animation-delay: 1.4s;
}

.hero__spark--taniken1 {
  left: 84%;
  top: 28%;
  width: 20px;
  height: 20px;
  background: #ffd76a;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 1)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.75));
  animation-delay: 1.75s;
}

.hero__spark--taniken2 {
  left: 60%;
  top: 32%;
  width: 18px;
  height: 18px;
  background: #4fb8a4;
  animation-delay: 2.1s;
}

@media (prefers-reduced-motion: reduce) {
  .hero__person,
  .hero__badge {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hero__spark { display: none; }
}

/* =========================================================
   Concert info
   ========================================================= */
.concert-info {
  background: var(--color-bg-pink-soft);
  padding: 64px 20px 0;
  text-align: center;
  position: relative;
  z-index: 1;
}

.concert-info__inner {
  max-width: 760px;
  margin: 0 auto;
  padding-bottom: 56px;
}

.concert-info__lead {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(22px, 3.4vw, 32px);
  margin: 0;
}

.concert-info__title {
  font-family: var(--font-rounded);
  font-weight: 700;
  font-size: clamp(24px, 3.8vw, 34px);
  margin: 4px 0;
  background: linear-gradient(90deg, #dd8da2 0%, #f88d73 32.2%, #ffa632 62%, #a3c2a7 90.9%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.concert-info__desc {
  font-family: var(--font-rounded);
  font-weight: 500;
  font-size: 16px;
  margin: 28px 0 0;
  color: var(--color-text-brown);
}

/* Seams (decorative section joins) */
.seam {
  position: relative;
  height: 0;
}

/* Ribbon straddles the gold border between concert-info and schedule —
   the knot sits higher than the image's vertical center, so it is
   shifted down further than a plain 50% centering would (~71%) to land
   the knot itself on the border line. */
.seam--info-schedule .seam__ribbon {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 130px;
  transform: translate(-50%, 71%);
  z-index: 3;
}

.seam--info-schedule .seam__cloud {
  position: absolute;
  right: -3%;
  bottom: -80px;
  width: 24%;
  max-width: 300px;
  z-index: 1;
}

.seam__cloud--schedule-tickets {
  position: absolute;
  left: -4%;
  top: -110px;
  width: 20%;
  max-width: 260px;
  z-index: 1;
}

.seam__cloud--tickets-goods {
  position: absolute;
  left: auto;
  right: -3%;
  top: -100px;
  width: 24%;
  max-width: 300px;
  z-index: 1;
}

/* =========================================================
   Schedule
   ========================================================= */
.schedule {
  position: relative;
  background: var(--color-bg-cream);
  border-top: 12px solid var(--color-gold-border);
  padding: 56px 20px 96px;
}

.schedule__note {
  max-width: var(--content-max);
  margin: 16px auto 0;
  padding: 0 4px;
  font-size: 13px;
  color: var(--color-text-muted2);
  text-align: right;
}

.schedule__grid {
  max-width: var(--content-max);
  margin: 48px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.schedule-card {
  background: #fff;
  border: 1.5px solid #e7e2d8;
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 8px 12px rgba(44, 30, 26, 0.04);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.schedule-card__head { display: flex; flex-direction: column; gap: 6px; }

.schedule-card__tag {
  font-family: var(--font-rounded);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding-left: 12px;
  position: relative;
}

.schedule-card__tag::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: currentColor;
}

.schedule-card__place-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

.schedule-card__place,
.schedule-card__venue {
  font-family: var(--font-rounded);
  font-weight: 700;
  font-size: 30px;
  margin: 0;
}

.schedule-card__place { color: var(--color-text-dark); }
.schedule-card__venue { color: currentColor; }

.schedule-card__date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid currentColor;
  border-radius: 12px;
  padding: 16px 20px;
}

.schedule-card__date span {
  font-family: var(--font-rounded);
  font-weight: 700;
  font-size: 22px;
  color: var(--color-text-dark);
}

.schedule-card__parts { display: flex; flex-direction: column; gap: 14px; }

.schedule-card__part {
  display: flex;
  align-items: center;
  gap: 24px;
}

.schedule-card__part span {
  font-family: var(--font-rounded);
  font-weight: 700;
  font-size: 14px;
  width: 48px;
  flex-shrink: 0;
}

.schedule-card__part p {
  margin: 0;
  font-family: var(--font-rounded);
  font-weight: 500;
  font-size: 15px;
  color: var(--color-text-muted2);
}

.schedule-card__parts hr {
  border-top: 1px solid #eae2d5;
  opacity: 0.6;
  margin: 0;
}

.schedule-card--sendai { color: #3c969d; }
.schedule-card--sendai .schedule-card__date { background: #f1fafa; border-color: #3c969d; }

.schedule-card--tokyo { color: #e27b88; }
.schedule-card--tokyo .schedule-card__date { background: #fff5f6; border-color: #e27b88; }

.schedule-card--toyohashi { color: #e8b361; }
.schedule-card--toyohashi .schedule-card__date { background: #fffaef; border-color: #e8b361; }

.schedule-card--osaka { color: #6ba1e4; }
.schedule-card--osaka .schedule-card__date { background: #eff6ff; border-color: #6ba1e4; }

/* =========================================================
   Tickets
   ========================================================= */
.tickets {
  position: relative;
  background: linear-gradient(130deg, #deeefc 5.7%, #f6e4f0 35%, #fff6d8 68%);
  padding: 80px 20px;
}

.ticket-card {
  max-width: 838px;
  margin: 40px auto 0;
  background: #fffafc;
  border: 2px solid #ffd6e5;
  border-radius: 32px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ticket-card__row {
  display: flex;
  align-items: center;
  gap: 16px;
}


.ticket-card__label {
  font-family: var(--font-rounded);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text-muted);
  width: 96px;
  flex-shrink: 0;
  text-align: right;
}

.ticket-card__value {
  flex: 1;
  background: #f6e4ef;
  border-radius: 8px;
  padding: 8px 16px;
  font-family: var(--font-rounded);
  font-weight: 700;
  font-size: 16px;
  color: #4a3438;
}

.ticket-card__value--head { background: #f6e4ef; padding: 8px 16px; }

.ticket-card__en {
  font-family: var(--font-rounded);
  font-size: 18px;
  color: var(--color-text-muted);
  margin: 0;
}

.ticket-card__name {
  font-family: var(--font-rounded);
  font-weight: 700;
  font-size: 22px;
  margin: 4px 0 0;
  color: #4a3438;
}

.ticket-card__name em {
  font-style: normal;
  color: var(--color-pink);
}

.ticket-card__divider {
  border-top: 1px solid #f0e2e4;
  margin: 4px 0;
}

.ticket-card__notes {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ticket-card__note {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-muted2);
}

.vendors {
  max-width: var(--page-max);
  margin: 40px auto 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
}

.vendor-card {
  background: #fff;
  border-radius: 16px;
  width: 280px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px 16px;
}

.vendor-card__logo { height: 40px; width: auto; }
.vendor-card__logo--sm { height: 38px; }

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  min-width: 176px;
  padding: 0 40px;
  border-radius: 100px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}

.pill--pink { background: var(--color-pink); color: #fff; }
.pill--muted { background: #eadbe2; color: #fff; }

/* =========================================================
   Goods
   ========================================================= */
.goods {
  position: relative;
  background: var(--color-bg-cream);
  padding: 80px 20px 56px;
}

.goods__body {
  position: relative;
  max-width: var(--content-max);
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 0 20px;
}

.goods__bear {
  position: absolute;
  left: -1%;
  top: 30px;
  width: 27%;
  max-width: 340px;
  z-index: 2;
}

.goods__coming-soon {
  width: 100%;
  max-width: 716px;
  border-radius: 32px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 280px;
  padding: 16px 32px;
  border-radius: 100px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
}

.btn--pink { background: var(--color-pink); color: #fff; }
.btn--muted { background: #eadbe2; color: #fff; cursor: default; }

.notice {
  position: relative;
  max-width: var(--content-max);
  margin: 40px auto 0;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--color-text-muted2);
  font-size: 15px;
}

.notice p { margin: 0 0 8px; }
.notice p:last-child { margin-bottom: 0; }
.notice strong { color: var(--color-text-muted2); }

.footer-glass {
  line-height: 0;
}

.footer-glass img {
  width: 100%;
}

/* =========================================================
   Responsive — tablet / mobile
   ========================================================= */
@media (max-width: 1024px) {
  .schedule__grid { grid-template-columns: 1fr; max-width: 560px; }
}

/* Line breaks / separators that only apply to the SP layout */
.break-sp { display: none; }

@media (max-width: 768px) {
  .break-sp { display: inline; }
  .sp-hide { display: none; }
  .break-pc { display: none; }

  .hero__stage { aspect-ratio: 1450 / 1390; }

  /* right:-5% is fine on PC (hero__content is capped at 1440px there),
     but on a narrow phone viewport that same percentage bleeds the
     rabbit noticeably past the right edge — pull it back in for SP. */
  .hero__rabbit { right: 0; }

  .hero__person--taniken { left: 45%; top: 11%; width: 48%; }
  .hero__person--atsuko { left: 3.93%; top: 12%; width: 52%; }

  .concert-info { padding-top: 48px; }
  .concert-info__inner { padding-bottom: 40px; }
  .concert-info__desc br { display: none; }
  .concert-info__desc { text-align: left; }

  .hero__title-banner-text { width: 88%; bottom: 15%; }

  /* The mobile stage is much closer to square, so the desktop sparkle
     spots land in different places relative to each person — nudge the
     ones that end up on top of a face or get lost in a busy corner. */
  .hero__spark--atsuko1 { left: 22%; top: 6%; }
  .hero__spark--taniken1 { left: 68%; top: 3%; }

  .seam--info-schedule .seam__ribbon { width: 96px; }
  .seam--info-schedule .seam__cloud { bottom: -10px; width: 26%; right: 0; }
  .seam__cloud--schedule-tickets { top: -70px; width: 30%; left: -2%; }
  .seam__cloud--tickets-goods { top: -60px; width: 24%; right: 1%; }

  .schedule { padding: 40px 16px 72px; }
  .schedule__grid { gap: 16px; }
  .schedule-card { padding: 24px; border-radius: 20px; }
  .schedule-card__place, .schedule-card__venue { font-size: 22px; }
  .schedule-card__date { padding: 12px 16px; }
  .schedule-card__date span { font-size: 18px; }

  .tickets { padding: 56px 16px; }
  .ticket-card { padding: 24px; border-radius: 24px; }
  .ticket-card__row { flex-direction: column; align-items: stretch; gap: 6px; }
  .ticket-card__label { width: auto; text-align: left; }

  .vendors { gap: 16px; }
  .vendor-card { width: 100%; max-width: 320px; }

  .goods { padding: 56px 16px 0; }
  .goods__bear { width: 34%; left: -6%; top: 10px; }

  .notice { align-items: flex-start; text-align: left; }
}