* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .72) 0 70px, transparent 260px),
    radial-gradient(circle at 14% 14%, rgba(221, 205, 255, .74) 0 42px, transparent 150px),
    radial-gradient(circle at 88% 23%, rgba(178, 229, 255, .54) 0 38px, transparent 150px),
    radial-gradient(circle at 10% 58%, rgba(255, 255, 255, .78) 0 9px, transparent 38px),
    radial-gradient(circle at 91% 69%, rgba(255, 244, 253, .92) 0 26px, transparent 94px),
    radial-gradient(circle at 30% 84%, rgba(210, 190, 255, .5) 0 36px, transparent 135px),
    radial-gradient(circle at 76% 88%, rgba(185, 238, 255, .42) 0 30px, transparent 120px),
    linear-gradient(180deg, #ffd6ea 0%, #f7b3d1 36%, #eadcff 72%, #fff5fb 100%);
  background-attachment: fixed;
}

body {
  min-height: 100%;
  margin: 0;
  color: #4f4141;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", serif;
  line-height: 1.8;
  overflow-x: hidden;
}

body::before,
body::after {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  content: "";
}

body::before {
  opacity: .9;
  background-image:
    radial-gradient(circle at 7% 8%, rgba(255, 255, 255, .86) 0 3px, transparent 13px),
    radial-gradient(circle at 22% 16%, rgba(255, 255, 255, .7) 0 2px, transparent 10px),
    radial-gradient(circle at 82% 11%, rgba(255, 255, 255, .78) 0 3px, transparent 14px),
    radial-gradient(circle at 13% 28%, rgba(255, 255, 255, .84) 0 7px, transparent 25px),
    radial-gradient(circle at 38% 24%, rgba(255, 255, 255, .68) 0 4px, transparent 17px),
    radial-gradient(circle at 91% 31%, rgba(255, 255, 255, .72) 0 5px, transparent 19px),
    radial-gradient(circle at 18% 49%, rgba(255, 255, 255, .9) 0 4px, transparent 18px),
    radial-gradient(circle at 54% 45%, rgba(220, 205, 255, .56) 0 24px, transparent 82px),
    radial-gradient(circle at 84% 55%, rgba(255, 255, 255, .82) 0 7px, transparent 26px),
    radial-gradient(circle at 10% 70%, rgba(255, 255, 255, .74) 0 3px, transparent 15px),
    radial-gradient(circle at 31% 76%, rgba(255, 255, 255, .86) 0 6px, transparent 22px),
    radial-gradient(circle at 67% 74%, rgba(202, 235, 255, .5) 0 28px, transparent 86px),
    radial-gradient(circle at 89% 82%, rgba(255, 255, 255, .78) 0 4px, transparent 18px),
    radial-gradient(circle at 43% 93%, rgba(255, 255, 255, .72) 0 3px, transparent 13px);
  animation: shimmer-stars 10s ease-in-out infinite alternate;
}

body::after {
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 14%, rgba(255, 255, 255, .66), transparent 34%),
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, .32), transparent 42%),
    linear-gradient(115deg, transparent 0 28%, rgba(255, 255, 255, .24) 32%, transparent 41%),
    linear-gradient(65deg, transparent 0 58%, rgba(220, 205, 255, .24) 63%, transparent 72%),
    linear-gradient(90deg, rgba(255, 255, 255, .46), transparent 20%, transparent 80%, rgba(255, 255, 255, .46));
}

@keyframes shimmer-stars {
  from {
    opacity: .68;
    transform: translateY(-4px);
  }

  to {
    opacity: .96;
    transform: translateY(8px);
  }
}

.page {
  position: relative;
  width: min(100%, 430px);
  min-height: 2440px;
  margin: 0 auto;
  overflow: hidden;
  background: url("images/h.jpg") top center / 100% 100% no-repeat;
  box-shadow: 0 0 40px rgba(230, 82, 138, .2);
}

.page::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 10% 21%, rgba(255, 255, 255, .9) 0 5px, transparent 20px),
    radial-gradient(circle at 84% 29%, rgba(255, 255, 255, .82) 0 6px, transparent 22px),
    radial-gradient(circle at 21% 43%, rgba(255, 255, 255, .75) 0 7px, transparent 24px),
    radial-gradient(circle at 73% 51%, rgba(255, 255, 255, .86) 0 4px, transparent 19px),
    radial-gradient(circle at 16% 64%, rgba(255, 255, 255, .75) 0 5px, transparent 22px),
    radial-gradient(circle at 86% 76%, rgba(255, 255, 255, .82) 0 6px, transparent 24px);
  opacity: .82;
}

section {
  position: relative;
  z-index: 1;
}

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

.hero {
  min-height: 430px;
  margin-top: 16px;
  padding: 72px 36px 0;
  text-align: center;
}

.brand-mark {
  position: absolute;
  top: 8px;
  left: -18px;
  width: 150px;
}

.wish {
  position: absolute;
  top: 52px;
  right: 5px;
  width: 96px;
  height: auto;
  margin: 0;
}

.crystal {
  position: absolute;
  top: 168px;
  left: 6px;
  width: 122px;
}

.hero-title {
  width: 214px;
  margin: 0 auto;
}

.lead {
  position: relative;
  margin: 8px 0 22px;
  color: #ad9553;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.75;
}

.lead::before {
  position: absolute;
  inset: -8px 24px -7px;
  z-index: -1;
  border-radius: 999px;
  content: "";
  background:
    radial-gradient(ellipse at center, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .72) 45%, rgba(255, 255, 255, 0) 72%);
  filter: blur(5px);
}

.line-button {
  display: block;
  width: min(100%, 290px);
  margin: 0 auto;
  filter: drop-shadow(0 8px 8px rgba(184, 78, 101, .28));
  animation: fluffy-button 3s ease-in-out infinite;
  transform-origin: center;
  will-change: transform, filter;
}

.line-button:hover,
.line-button:focus-visible {
  animation-duration: 1.5s;
  filter: drop-shadow(0 10px 12px rgba(184, 78, 101, .36)) brightness(1.04);
}

@keyframes fluffy-button {
  0%,
  100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 8px 8px rgba(184, 78, 101, .28));
  }

  50% {
    transform: translateY(-7px) scale(1.025);
    filter: drop-shadow(0 14px 14px rgba(184, 78, 101, .38));
  }
}

.panel {
  width: calc(100% - 74px);
  margin: 0 auto;
  padding: 24px 22px 24px;
  border-radius: 8px;
  background:
    linear-gradient(rgba(255, 255, 255, .84), rgba(255, 255, 255, .84)),
    url("images/kira.png") center / cover no-repeat;
  text-align: center;
}

.intro.panel {
  overflow: visible;
  min-height: 252px;
  margin-top: 8px;
  padding: 40px 20px 44px;
  background: transparent;
}

.intro.panel::before {
  position: absolute;
  inset: 14px -20px 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background: url("images/tensi.png") center top / 100% 100% no-repeat;
  mix-blend-mode: multiply;
  opacity: .92;
}

.intro h1 {
  margin: 0;
  color: #df4c83;
  font-size: 17px;
  line-height: 1.4;
}

.intro .sub {
  margin: 2px 0 16px;
  color: #e882a9;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.6;
}

.intro-copy {
  margin: 0;
  padding: 0 4px;
  font-size: 12px;
  line-height: 1.85;
  text-align: center;
}

.flow {
  padding: 10px 12px 0;
}

.section-label {
  width: 150px;
  margin: 0 auto 22px;
}

.flow-list {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.flow-icons {
  width: 112px;
}

.flow-copy {
  padding-top: 0;
}

.flow-copy article {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 128px;
}

.flow-copy h2 {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 700;
}

.flow-copy p {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.75;
}

.plans {
  padding: 18px 24px 0;
  text-align: center;
}

.session-label {
  margin-bottom: 4px;
}

.plan-lead {
  margin: 0 0 -8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.65;
}

.circle-card {
  position: relative;
  width: min(100%, 350px);
  aspect-ratio: 1 / .9;
  margin: -12px auto -4px;
}

.circle-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.circle-content {
  position: absolute;
  inset: 10% 13% 19%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.circle-content h2 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.35;
}

.circle-content p {
  margin: 0 0 12px;
  font-size: 11px;
  line-height: 1.7;
}

dl {
  display: grid;
  width: 72%;
  gap: 4px;
  margin: 0 auto;
}

dl div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 22px;
}

dt,
dd {
  margin: 0;
  font-size: 14px;
  font-feature-settings: "palt" 1;
  line-height: 1.3;
  letter-spacing: 0;
}

dt {
  text-align: left;
}

dd {
  text-align: left;
}

dt span {
  font-size: 10px;
}

.yellow {
  margin-top: -46px;
}

.yellow .circle-content {
  inset: 10% 13% 18%;
}

.note {
  width: calc(100% - 18px);
  margin: 6px auto 0;
  border: 1px solid #ef5f92;
  border-radius: 6px;
  background: rgba(255, 255, 255, .9);
  text-align: center;
}

.note h2 {
  width: 144px;
  margin: -15px auto 6px;
  padding: 3px 12px;
  border-radius: 999px;
  background: #f05d91;
  color: white;
  font-size: 11px;
  font-weight: 400;
}

.note p {
  margin: 0;
  padding: 0 12px 11px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.9;
}

.contact {
  width: calc(100% - 32px);
  margin: 34px auto 0;
  padding: 30px 24px 36px;
  background: url("images/ten.png") center / 100% 100% no-repeat;
  text-align: center;
}

.contact p {
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
  color: #e65b92;
  font-size: 15px;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(255, 255, 255, .95);
}

.contact p::before {
  position: absolute;
  inset: -10px -22px;
  z-index: -1;
  border-radius: 999px;
  content: "";
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .72) 46%, rgba(255, 255, 255, 0) 75%);
  filter: blur(6px);
}

.contact .line-button {
  width: min(100%, 290px);
}

.message {
  padding: 40px 14px 22px;
  text-align: center;
}

.message-label {
  margin-bottom: 8px;
}

.message p {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.9;
  white-space: nowrap;
}

.message .signature {
  margin: 2px 38px 4px 0;
  text-align: right;
}

.footer-ornament {
  width: 62px;
  margin: 4px auto 8px;
}

small {
  display: block;
  color: rgba(125, 82, 88, .42);
  font-size: 6px;
  line-height: 1.4;
}

@media (max-width: 360px) {
  .page {
    min-height: 2300px;
  }

  .hero {
    padding-inline: 28px;
  }

  .panel {
    width: calc(100% - 52px);
  }

  .flow-copy h2 {
    font-size: 13px;
  }

  .flow-copy p,
  .note p {
    font-size: 9px;
  }

  .message {
    padding-inline: 10px;
  }
}

@media (min-width: 1000px) {
  .page {
    transform: scale(2.3256);
    transform-origin: top center;
    margin-bottom: 3182px;
  }
}