* {
  box-sizing: border-box;
}

:root {
  --product-inner-max: 1620px;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  color: #222;
  font-family: "Murecho", sans-serif;
  overflow-x: hidden;
}

.t18-container {
  background-color: #faf9fa;
}

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

.hero {
  position: relative;
  width: 100%;
  max-width: 1620px;
  margin-left: auto;
  margin-right: auto;
  container-type: inline-size;
  overflow: hidden;
}

.hero-image {
  width: 100%;
  height: auto;
  position: relative;
}

.hero-heading {
  position: absolute;
  top: 70px;
  left: 40px;
  z-index: 2;
  margin: 0;
  font-family: "Murecho", sans-serif;
  font-weight: 700;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
  line-height: 1.1;
}

.hero-heading__ja {
  display: block;
  color: #faf9fa;
  font-size: 64px;
  letter-spacing: 5.12px;
}

.hero-heading__en {
  display: block;
  margin-top: 16px;
  color: #FFFE36;
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: 3.2px;
}

/* Hero overlay (asset images & buttons) — positions are % of KV (1243x776) */
.hero-asset {
  position: absolute;
  z-index: 2;
  height: auto;
  pointer-events: none;
}

.hero-asset--origami   { top: 15.5%;  left: 85.6%; width: 13.5%; z-index: 999;}
.hero-asset--movie     { top: 13.7%; left: 46.9%; width: 8.4%; }
.hero-asset--ar        { top: 33.3%; left: 22.6%; width: 13.9%;z-index: 999; }
.hero-asset--nurie     { top: 35.7%; left: 61.2%; width: 25.5%;z-index: 999; }
.hero-asset--koujichu       { top: 29.6%; left: 55.7%; width: 7.3%; z-index: 999; }
.hero-asset--koujichu-quiz  { top: 80.1%; left: 23.2%; width: 7.3%;z-index: 999; }
.hero-asset--koujichu-event { top: 77.1%; left: 59.7%; width: 7.3%; z-index: 999; }
.hero-asset--quiz      { top: 66.4%; left: 13.4%; width: 9.8%;z-index: 999; }
.hero-asset--event     { top: 77.2%; left: 39.4%; width: 8.5%; z-index: 999; }
.hero-asset--kakurenbo { top: 62.6%; left: 87.3%; width: 10.6%; z-index: 999; }
.hero-asset--kikikyu   { top: 4%;    width: 5%;    animation: hero-cross 48s linear infinite, hero-wobble 3.5s ease-in-out infinite; z-index: 1; }
.hero-asset--batibati  { top: 368px; left: 35px; width: 5%; transform-origin: 50% 50%; animation: hero-stretch 1.4s ease-in-out infinite; z-index: 4; }
.hero-asset--palasol   { top: 23%;   left: 77%;  width: 9%;  transform-origin: 50% 50%; animation: hero-spin 7.6s linear infinite; z-index: 998; }

@keyframes hero-sway {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}

@keyframes hero-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

@keyframes hero-drive {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(8%); }
}

@keyframes hero-drive-rev {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-6%); }
}

@keyframes hero-tilt {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-4deg); }
}

@keyframes hero-hop {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-14%); }
  60%      { transform: translateY(-8%); }
}

@keyframes hero-bounce {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50%      { transform: translateY(-8%) scale(0.95, 1.05); }
}

@keyframes hero-bounce-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7%); }
}

@keyframes hero-peek {
  0%, 100% { transform: translateY(0) scaleY(1); }
  45%      { transform: translateY(8%) scaleY(0.9); }
  55%      { transform: translateY(8%) scaleY(0.9); }
}

@keyframes hero-cross {
  0%   { left: -10%; }
  100% { left: 110%; }
}

@keyframes hero-wobble {
  0%, 100% { transform: translateY(-25%); }
  50%      { transform: translateY(25%); }
}

@keyframes hero-stretch {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(0.85); }
}

@keyframes hero-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-asset {
    animation: none !important;
  }
}

/* Floating nurie image that crosses the viewport on all kids pages */
.kids-floating-nurie {
  position: fixed;
  top: auto;
  bottom: 6%;
  left: 0;
  width: 110px;
  height: auto;
  z-index: 9999;
  pointer-events: none;
  will-change: transform;
  animation: kids-nurie-cross 32s linear infinite;
}

@keyframes kids-nurie-cross {
  0%   { transform: translate(calc(100vw + 120px), 0); }
  10%  { transform: translate(calc(90vw + 96px), -12px); }
  20%  { transform: translate(calc(80vw + 72px), 12px); }
  30%  { transform: translate(calc(70vw + 48px), -12px); }
  40%  { transform: translate(calc(60vw + 24px), 12px); }
  50%  { transform: translate(50vw, -12px); }
  60%  { transform: translate(calc(40vw - 24px), 12px); }
  70%  { transform: translate(calc(30vw - 48px), -12px); }
  80%  { transform: translate(calc(20vw - 72px), 12px); }
  90%  { transform: translate(calc(10vw - 96px), -12px); }
  100% { transform: translate(-120px, 0); }
}

@media (max-width: 767px) {
  .kids-floating-nurie {
    width: 70px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kids-floating-nurie {
    animation: none;
    display: none;
  }
}

/* Buttons (220x74 / 294x74 in 1243x776 frame) */
.hero-btn {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 17.7%;
  aspect-ratio: 220 / 74;
  padding: 0 10px;
  background: #faf9fa;
  border: clamp(2px, 0.4cqi, 5px) solid #FFB6F6;
  border-radius: 9999px;
  font-family: "Murecho", sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 2.2vw, 24px);
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.25));
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

@supports (font-size: 1cqi) {
  .hero-btn {
    border-width: clamp(2px, 0.4cqi, 5px);
    font-size: clamp(11px, 1.93cqi, 24px);
  }
}

.hero-btn:hover {
  transform: translateY(-6px);
  border-color: #f14dde;
}

/* .hero-btn--origami:hover   { background: #3156a5; }
.hero-btn--movie:hover     { background: #333; }
.hero-btn--ar:hover        { background: #ed8a0b; }
.hero-btn--nurie:hover     { background: #057232; }
.hero-btn--quiz:hover      { background: #dd2cf4; }
.hero-btn--event:hover     { background: #ff3198; }
.hero-btn--kakurenbo:hover { background: #ff3198; } */

.hero-asset--origami,
.hero-asset--movie,
.hero-asset--ar,
.hero-asset--nurie,
.hero-asset--quiz,
.hero-asset--event,
.hero-asset--kakurenbo {
  transition: transform 0.3s ease;
}

.hero:has(.hero-btn--origami:hover) .hero-asset--origami,
.hero:has(.hero-btn--movie:hover) .hero-asset--movie,
.hero:has(.hero-btn--ar:hover) .hero-asset--ar,
.hero:has(.hero-btn--nurie:hover) .hero-asset--nurie,
.hero:has(.hero-btn--quiz:hover) .hero-asset--quiz,
.hero:has(.hero-btn--event:hover) .hero-asset--event,
.hero:has(.hero-btn--kakurenbo:hover) .hero-asset--kakurenbo {
  transform: translateY(-8px) scale(1.06);
}

.hero-btn__sub {
  display: block;
  font-size: 0.583em; /* 14/24 */
  font-weight: 700;
  margin-bottom: 0.1em;
}

.hero-btn__label {
  display: block;
}

/* Button positions & per-button colors (Figma 108:6904) */
.hero-btn--origami   { top: 9.0%;  left: 77.2%; color: #4869b2; }
.hero-btn--movie     { top: 29.0%; left: 41.8%; color: #4869b2; }
.hero-btn--ar        { top: 47.3%; left: 12.4%; width: 23.7%; aspect-ratio: 294 / 74; color: #4869b2; }
.hero-btn--nurie     { top: 58.6%; left: 59.6%; color: #4869b2; }
.hero-btn--quiz      { top: 79.4%; left: 9.1%;  color: #4869b2; }
.hero-btn--event     { top: 76.4%; left: 45.6%; color: #4869b2; }
.hero-btn--kakurenbo { top: 76.0%; left: 78.4%; color: #4869b2; }

@media (min-width: 768px) and (max-width: 1024px) {
  .hero-heading {
    top: calc(70px - (1024px - 100vw) * 0.18);
    left: calc(40px - (1024px - 100vw) * 0.03);
  }

  .hero-heading__ja {
    font-size: clamp(44px, calc(28px + 2.2vw), 56px);
    letter-spacing: clamp(3px, calc(1.4px + 0.35vw), 4.4px);
  }

  .hero-heading__en {
    margin-top: clamp(8px, calc(2px + 0.9vw), 12px);
    font-size: clamp(28px, calc(16px + 1.6vw), 34px);
    letter-spacing: clamp(2px, calc(1px + 0.22vw), 2.8px);
  }
}

@media (max-width: 767px) {
  .hero {
    max-width: 100%;
    margin: 0;
  }

  .hero-heading {
    top: clamp(6px, calc(2px + 1.2vw), 12px);
    left: clamp(12px, calc(8px + 1.8vw), 20px);
  }

  .hero-heading__ja {
    font-size: clamp(34px, calc(28px + 4.2vw), 60);
    letter-spacing: clamp(1.6px, calc(0.6px + 0.8vw), 3.6px);
  }

  .hero-heading__en {
    margin-top: clamp(4px, calc(2px + 0.8vw), 8px);
    font-size: clamp(22px, calc(18px + 2.9vw), 44px);
    letter-spacing: clamp(1.2px, calc(0.4px + 0.6vw), 2.4px);
  }

  /* SP: 7 buttons stacked vertically, centered */
  .hero-btn {
    width: 66%;
    left: 17%;
    aspect-ratio: 220 / 74;
    font-size: clamp(16px, 4.8vw, 32px);
    border-width: 3px;
  }

  @supports (font-size: 1cqi) {
    .hero-btn {
      font-size: clamp(14px, 4.8cqi, 32px);
    }
  }

  .hero-btn--ar        { top: 18.5%; left: 17%; width: 66%; aspect-ratio: 220 / 74; }
  .hero-btn--origami   { top: 30%;   }
  .hero-btn--nurie     { top: 41.5%; }
  .hero-btn--kakurenbo { top: 53%;   }
  .hero-btn--quiz      { top: 64.5%; }
  .hero-btn--movie     { top: 76%;   }
  .hero-btn--event     { top: 87.5%; }

  /* SP: hero asset overlays (construction equipment) */
  .hero-asset--ar          { top: 17.5%; left: 0%;   width: 32%; }
  .hero-asset--origami     { top: 28%;  left: 60%;  width: 35%; }
  .hero-asset--nurie       { top: 40%;   left: -2%;  width: 42%; }
  .hero-asset--kakurenbo   { top: 53%;   left: 68%;  width: 28%; }
  .hero-asset--quiz        { top: 64%;   left: 2%;   width: 24%; }
  .hero-asset--movie       { top: 74%; left: 71%; width: 22%; z-index: 999; }
  .hero-asset--event       { top: 90%;   left: 18%;  width: 17%; }

  .hero-asset--koujichu        { top: 65.5%; left: 70%; width: 17%; }
  .hero-asset--koujichu-quiz   { top: 78%;   left: 10%;  width: 17%; }
  .hero-asset--koujichu-event  { top: 90%;   left: 70%; width: 17%; }

  .hero-asset--kikikyu   { top: 2%;   width: 10%; }
  .hero-asset--batibati  { top: 2.5%; left: 78%; width: 14%; }
  .hero-asset--palasol   { top: 12%;  left: 68%; width: 14%; }
}


.kids-bnr {
  display: block;
  padding: 0;
  margin: 0 auto;
  text-align: center;
  line-height: 0;
}

.kids-bnr .kids-bnr-img,
.kids-bnr-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto !important;
  border: 0;
}

.hero .kids-page-title {
  position: absolute;
  top: 6%;
  left: 4%;
  margin: 0;
  padding: 0;
  z-index: 2;
  line-height: 1.2;
}

.kids-page-title {
  font-family: "Murecho", sans-serif;
  font-weight: 700;
  font-size: 4.8rem;
  letter-spacing: 0.1em;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
  margin: 60px 0 50px;
  padding-left: 20px;
}

@media screen and (max-width: 750px) {
  .kids-page-title {
    font-size: 3.2rem;
    margin: 40px 0 30px;
    text-align: center;
    padding-left: 0;
  }
}

.section-header {
  margin: 0;
}
.section-header h1 {
  margin: 10px 0 16px 0;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #222;
}