@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&family=Yomogi&display=swap');

body {
  font-family: 'Noto Sans JP', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg {
  max-width: 100%;
}

main,
section,
article,
form,
label,
select {
  min-width: 0;
}

select {
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-photo {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .88) 38%, rgba(255, 255, 255, .25) 68%, rgba(255, 255, 255, .04) 100%),
    url('https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?auto=format&fit=crop&w=1800&q=85');
  background-position: center right;
  background-size: cover;
}

.select-row:focus-within {
  border-color: #38bdf8;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, .18);
}

.coming-soon-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(16, 32, 51, .56);
  color: #fff;
  font-size: clamp(1rem, 4vw, 1.7rem);
  font-weight: 900;
  letter-spacing: .08em;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .28);
  pointer-events: none;
}

.coming-soon-overlay--small {
  font-size: clamp(.8rem, 3vw, 1.15rem);
  letter-spacing: .06em;
}

.hero-badge {
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 9999px;
  background: #7dd3fc;
  box-shadow: 0 10px 28px rgba(7, 89, 133, .12);
}

.handwritten-title {
  font-family: 'Yomogi', 'Noto Sans JP', cursive;
  letter-spacing: .0em;
}

.cta-banner {
  background-color: #e0f7ff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='8' opacity='.55'%3E%3Cpath d='M0 90 L30 90 L30 55 L55 55 L55 90 L85 90 L85 40 L110 40 L110 90 L140 90 L140 65 L165 65 L165 90 L195 90 L195 50 L220 50 L220 90 L250 90 L250 70 L275 70 L275 90 L305 90 L305 45 L330 45 L330 90 L360 90 L360 60 L385 60 L385 90 L415 90 L415 35 L440 35 L440 90 L470 90 L470 75 L495 75 L495 90 L525 90 L525 55 L550 55 L550 90 L580 90 L580 40 L605 40 L605 90 L635 90 L635 65 L660 65 L660 90 L690 90 L690 50 L715 50 L715 90 L745 90 L745 70 L770 70 L770 90 L800 90 L800 45 L825 45 L825 90 L855 90 L855 60 L880 60 L880 90 L910 90 L910 35 L935 35 L935 90 L965 90 L965 75 L990 75 L990 90 L1020 90 L1020 55 L1045 55 L1045 90 L1075 90 L1075 40 L1100 40 L1100 90 L1130 90 L1130 65 L1155 65 L1155 90 L1200 90'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: 1200px 80px;
}

.section-block {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.section-block--hero {
  padding-top: 2.5rem;
  padding-bottom: 5rem;
}

@media (min-width: 1024px) {
  .section-block {
    padding-top: 3.5rem;
    padding-bottom: 4.5rem;
  }

  .section-block--hero {
    padding-top: 3rem;
    padding-bottom: 3.5rem;
  }
}

@media (max-width: 640px) {
  .hero-photo {
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .92) 52%, rgba(255, 255, 255, .72) 100%),
      url('https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?auto=format&fit=crop&w=900&q=85');
    background-position: center;
  }
}