/* 日本語と英字を同一フォントの実際のBlackウェイトで表示する。 */
@font-face {
  font-family: "KB Park Rounded";
  src: url("./assets/fonts/kb-park-rounded-black.ttf") format("truetype");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --green: #32d74b;
  --text-green: #187a36;
  --mint: #f0fff4;
  --ink: #333333;
  --red: #ff514b;
  --yellow: #ffdc26;
  --blue: #3983ee;
}

* { box-sizing: border-box; }
html { min-width: 280px; background: #ffffff; }
body {
  margin: 0;
  color: var(--ink);
  font-family: "KB Park Rounded", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 900;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}
.cushion-page {
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  border-top: 8px solid var(--green);
}
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: calc(100vh - 8px);
  min-height: calc(100svh - 8px);
  padding: 56px 24px 80px;
  overflow: hidden;
  background: #ffffff;
}
.hero__content {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  width: min(100%, 1000px);
  text-align: center;
}
h1 {
  margin: 0;
  color: var(--text-green);
  font-size: clamp(62px, 8.5vw, 116px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.045em;
  white-space: nowrap;
  text-shadow: 3px 4px 0 #ddf9e3;
}
.title-confetti {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  height: 16px;
}
.title-confetti span { display: block; width: 32px; height: 13px; border-radius: 7px; }
.title-confetti span:nth-child(1) { background: var(--red); transform: rotate(12deg); }
.title-confetti span:nth-child(2) { background: var(--yellow); transform: translateY(3px) rotate(-5deg); }
.title-confetti span:nth-child(3) { background: var(--blue); transform: rotate(-12deg); }
.lead {
  margin: 32px 0 0;
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.035em;
}
.line-button {
  display: block;
  width: min(100%, 680px);
  margin-top: 30px;
  border-radius: 24px;
  line-height: 0;
  filter: drop-shadow(0 7px 0 rgba(24, 122, 54, 0.16));
  transition: transform 160ms ease, filter 160ms ease;
  -webkit-tap-highlight-color: transparent;
  transform-origin: center;
  position: relative;
  animation: line-button-pulse 1.8s ease-in-out infinite;
}
/* CTA画像の緑色の面に沿って、時々細い光が横切る。 */
.line-button::after {
  content: "";
  position: absolute;
  inset: 12% 1% 12.5% 1%;
  border-radius: clamp(4px, 1vw, 16px);
  pointer-events: none;
  background: linear-gradient(110deg, transparent 43%, rgba(255, 255, 255, 0.12) 47%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0.12) 53%, transparent 57%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  animation: line-button-shine 5s ease-in-out 0.5s infinite;
}
@keyframes line-button-shine {
  0% { background-position: 100% 0; opacity: 0; }
  2.16% { background-position: 100% 0; opacity: 1; }
  23.76% { background-position: 0% 0; opacity: 1; }
  25.92%, 100% { background-position: 0% 0; opacity: 0; }
}
@keyframes line-button-pulse {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.025); }
}
.line-button img { display: block; width: 100%; height: auto; }
@media (hover: hover) {
  .line-button:hover {
    animation: none;
    transform: translateY(-3px);
    filter: brightness(1.04) drop-shadow(0 10px 0 rgba(24, 122, 54, 0.16));
  }
}
.line-button:active { animation: none; transform: translateY(2px); }
.line-button:focus-visible { animation: none; outline: 4px solid var(--text-green); outline-offset: 6px; }
.contact-text {
  margin: 16px 0 0;
  font-size: clamp(17px, 2.1vw, 25px);
  font-weight: 900;
  line-height: 1.6;
}

.contact-text span { display: inline-block; }

/* 白と緑を主役に、画面の端にだけ小さな原色のアクセントを置く。 */
.decoration { position: absolute; z-index: 0; pointer-events: none; }
.decoration--bubble {
  width: clamp(280px, 34vw, 460px);
  aspect-ratio: 1;
  top: -150px;
  left: -180px;
  border-radius: 44% 56% 58% 42%;
  background: var(--mint);
  border: 6px solid #d4f8de;
  transform: rotate(-20deg);
}
.decoration--bubble::after {
  content: "";
  position: absolute;
  width: 56px;
  height: 56px;
  right: 22px;
  bottom: 35px;
  background: var(--green);
  border: 7px solid #ffffff;
  border-radius: 50%;
}
.decoration--star {
  width: 78px;
  aspect-ratio: 1;
  top: 9%;
  right: 8%;
  background: var(--yellow);
  clip-path: polygon(50% 0, 70% 30%, 100% 50%, 70% 70%, 50% 100%, 30% 70%, 0 50%, 30% 30%);
  transform: rotate(14deg);
}
.decoration--triangle {
  width: 46px;
  height: 48px;
  left: 8%;
  bottom: 16%;
  background: var(--red);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform: rotate(-18deg);
}
.decoration--ring {
  width: 62px;
  aspect-ratio: 1;
  right: 8%;
  bottom: 18%;
  border: 14px solid var(--blue);
  border-radius: 50%;
}
.decoration--floor {
  left: -10%;
  bottom: -162px;
  width: 120%;
  height: 220px;
  border-radius: 50% 50% 0 0;
  background: var(--mint);
  border-top: 6px solid #d4f8de;
  transform: rotate(-3deg);
}
.decoration--floor::before,
.decoration--floor::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--green);
}
.decoration--floor::before { width: 23px; height: 23px; top: -12px; left: 25%; }
.decoration--floor::after { width: 13px; height: 13px; top: -27px; left: 27%; }

@media (max-width: 600px) {
  .cushion-page { border-top-width: 6px; }
  .hero {
    min-height: calc(100vh - 6px);
    min-height: calc(100svh - 6px);
    padding: 88px 22px 116px;
  }
  h1 { font-size: clamp(48px, 13.7vw, 76px); text-shadow: 2px 3px 0 #ddf9e3; }
  .title-confetti { margin-top: 14px; gap: 9px; height: 13px; }
  .title-confetti span { width: 25px; height: 10px; }
  .lead { margin-top: 29px; font-size: clamp(23px, 6vw, 32px); }
  .line-button { width: min(100%, 420px); margin-top: 24px; border-radius: 14px; }
  .contact-text { margin-top: 14px; font-size: clamp(14px, 4vw, 20px); }
  .decoration--bubble { width: 270px; top: -150px; left: -160px; }
  .decoration--bubble::after { width: 40px; height: 40px; border-width: 5px; right: 19px; bottom: 19px; }
  .decoration--star { width: 48px; top: 8%; right: 9%; }
  .decoration--triangle { width: 30px; height: 33px; left: 9%; bottom: 13%; }
  .decoration--ring { width: 38px; border-width: 10px; right: 9%; bottom: 14%; }
  .decoration--floor { height: 170px; bottom: -126px; }
}
@media (max-height: 600px) and (min-width: 601px) {
  .hero { padding: 40px 24px 64px; }
  h1 { font-size: 68px; }
  .title-confetti { margin-top: 10px; }
  .lead { margin-top: 18px; font-size: 24px; }
  .line-button { width: 440px; margin-top: 14px; }
  .contact-text { margin-top: 10px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .line-button { animation: none; transition: none; }
  .line-button::after { animation: none; opacity: 0; }
}