:root {
  --pink-bg: #f8d5e3;
  --cream-bg: #fff9e9;
  --page-bg: #fff5f9;
  --text-blue: #252a70;
  --text-brown: #8a4a10;
  --pink: #ef5a9b;
  --pink-light: #ff9bc8;
  --blue: #78bff4;
  --blue-deep: #4aa7df;
  --purple: #8d61c6;
  --line-purple: #35315e;
  --border-pink: #ffabd0;
  --border-blue: #8fcaff;
  --shadow-soft: 0 12px 22px rgba(80, 50, 90, 0.12);
  --cta-pre-gap: clamp(56px, 5vw, 96px);
  --font-rounded: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", YuGothic, "Meiryo", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  color: var(--text-blue);
  background: var(--page-bg);
  font-family: var(--font-rounded);
  font-weight: 500;
  line-height: 1.6;
}

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

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

button {
  font: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: relative;
  z-index: 10;
  background: rgba(255, 255, 255, 0.96);
  border-top: 4px solid rgba(77, 45, 53, 0.18);
  border-bottom: 3px solid #f5c8d9;
  box-shadow: 0 3px 10px rgba(81, 63, 76, 0.08);
  transition: background-color 0.22s ease, box-shadow 0.22s ease;
}

.header-inner {
  width: min(100%, 1700px);
  min-height: 96px;
  margin: 0 auto;
  padding: 12px 20px;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 276px;
  align-items: center;
  gap: 16px;
}

.header-logo {
  display: block;
  width: 280px;
}

.header-logo img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 2px 0 rgba(255, 255, 255, 0.8));
}

.global-nav {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 18px;
  min-width: 0;
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  color: #221f1f;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.nav-link--active {
  gap: 1px;
}

.nav-link--home {
  flex-direction: column;
  gap: 1px;
}

.nav-link--active::after {
  content: "";
  position: absolute;
  right: 6px;
  bottom: -13px;
  left: 6px;
  height: 8px;
  border-radius: 8px;
  background: #1d1d1d;
}

.home-icon {
  width: 25px;
  height: 25px;
  color: #171717;
}

.home-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

@media (min-width: 1181px) {
  .nav-link {
    transition:
      color 200ms ease,
      transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .nav-link:hover,
  .nav-link:focus-visible {
    transform: translateY(-2px);
  }

  .nav-link--active {
    color: var(--text-brown);
    font-weight: 800;
  }

  .nav-link--active::after {
    right: auto;
    bottom: -11px;
    left: 50%;
    width: clamp(32px, 72%, 78px);
    height: 5px;
    background: linear-gradient(90deg, #ef5a9b 0%, #f6b7d2 48%, #78bff4 100%);
    border-radius: 999px;
    box-shadow: 0 2px 5px rgba(177, 94, 143, 0.2);
    transform: translateX(-50%);
    transform-origin: center;
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .nav-link--active:hover::after,
  .nav-link--active:focus-visible::after {
    transform: translateX(-50%) scaleX(1.08);
  }

  .nav-link--active .home-icon {
    color: #d95792;
  }
}

.header-apply {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 276px;
  min-height: 68px;
  padding: 12px 16px;
  color: #fff;
  background: linear-gradient(180deg, #f469a8 0%, #e85191 100%);
  border-radius: 999px;
  box-shadow: 0 4px 0 rgba(218, 97, 147, 0.24);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.circle-arrow {
  --chevron-size: 7px;
  --chevron-stroke: 3px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  color: #ef5a9b;
  background: #fff;
  border-radius: 50%;
  font-size: 0;
  line-height: 1;
}

.circle-arrow::before {
  content: "";
  width: var(--chevron-size);
  height: var(--chevron-size);
  border-top: var(--chevron-stroke) solid currentColor;
  border-right: var(--chevron-stroke) solid currentColor;
  transform: translateX(-1px) rotate(45deg);
}

.menu-button {
  display: none;
}

.hero {
  overflow: hidden;
  background: #f5d1e0;
}

.hero img {
  width: 100%;
  min-height: 360px;
  margin: 0 auto;
  object-fit: cover;
  object-position: center top;
}

.top-entry {
  background: var(--cream-bg);
  padding: 66px clamp(20px, 6vw, 116px) 68px;
}

.entry-buttons {
  width: min(100%, 1700px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(28px, 8vw, 170px);
}

.image-button {
  display: block;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.image-button__surface {
  width: 100%;
  aspect-ratio: 4 / 1;
  padding: 0 clamp(14px, 1.7vw, 28px);
  display: grid;
  grid-template-columns: 20% minmax(0, 64%) 16%;
  align-items: center;
  overflow: hidden;
  background: var(--image-button-background);
  border: clamp(2px, 0.2vw, 4px) solid rgba(255, 255, 255, 0.94);
  border-radius: inherit;
  box-shadow:
    0 clamp(4px, 0.5vw, 8px) 0 rgba(70, 54, 84, 0.27),
    0 clamp(7px, 0.8vw, 13px) clamp(8px, 1vw, 16px) rgba(70, 54, 84, 0.15),
    inset 0 clamp(2px, 0.2vw, 4px) 0 rgba(255, 255, 255, 0.28);
}

.image-button__surface.home-banner-motion,
.image-button__surface.site-banner-motion {
  display: grid;
}

.image-button--pink {
  --image-button-background: linear-gradient(180deg, #fe8ec3 0%, #fe73ab 52%, #ff609a 100%);
  --image-button-accent: #f45c9d;
}

.image-button--blue {
  --image-button-background: linear-gradient(180deg, #a8b3f9 0%, #9196fb 55%, #9492f9 100%);
  --image-button-accent: #8094ee;
}

.image-button__icon {
  width: auto;
  max-width: 100%;
  height: clamp(36px, 7vw, 98px);
  justify-self: center;
  object-fit: contain;
  transform: translateX(clamp(1px, 0.3vw, 3px));
}

.image-button__label {
  display: block;
  min-width: 0;
  justify-self: center;
  color: #fff;
  font-size: clamp(21px, 3.1vw, 50px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-align: center;
  text-shadow: 0 2px 0 rgba(91, 75, 111, 0.08);
  white-space: nowrap;
}

.image-button__arrow {
  position: relative;
  display: block;
  width: clamp(34px, 5vw, 72px);
  aspect-ratio: 1;
  justify-self: center;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(83, 67, 103, 0.08);
}

.image-button__arrow::before {
  position: absolute;
  top: 50%;
  left: 47%;
  width: 25%;
  aspect-ratio: 1;
  content: "";
  border-top: clamp(3px, 0.32vw, 6px) solid var(--image-button-accent);
  border-right: clamp(3px, 0.32vw, 6px) solid var(--image-button-accent);
  transform: translate(-50%, -50%) rotate(45deg);
}

@media (min-width: 1024px) {
  .image-button__icon {
    transform: translateX(8px);
  }

  .image-button__label,
  .image-button__arrow {
    transform: translateX(6px);
  }
}

.image-button:hover,
.image-button:focus-visible {
  transform: translateY(-3px);
  filter: brightness(1.03);
}

.exam-section {
  padding: 34px clamp(20px, 5.8vw, 112px) 0;
  padding-bottom: var(--cta-pre-gap);
  background: linear-gradient(180deg, #fff7fb 0%, #fff6fa 100%);
}

.exam-card {
  position: relative;
  width: min(100%, 1664px);
  margin: 0 auto;
  padding: clamp(58px, 5.7vw, 108px) clamp(42px, 5.6vw, 96px)
    clamp(68px, 6.4vw, 122px);
  background:
    linear-gradient(rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.96)) padding-box,
    linear-gradient(115deg, #ff68ad, #72cef5, #ffe36f, #c98ce8, #ff68ad) border-box;
  background-position: 0 0, 0% 50%;
  background-size: 100% 100%, 220% 220%;
  border: 4px solid transparent;
  border-radius: clamp(42px, 5vw, 70px);
  box-shadow:
    0 0 13px rgba(255, 83, 163, 0.2),
    inset 0 0 60px rgba(255, 222, 238, 0.22);
  animation: top-card-neon 11s ease-in-out infinite alternate;
}

@keyframes top-card-neon {
  0% {
    background-position: 0 0, 0% 50%;
    box-shadow:
      0 0 13px rgba(255, 83, 163, 0.22),
      inset 0 0 60px rgba(255, 222, 238, 0.24);
  }
  100% {
    background-position: 0 0, 100% 50%;
    box-shadow:
      0 0 16px rgba(72, 188, 239, 0.24),
      inset 0 0 60px rgba(224, 239, 255, 0.22);
  }
}

.exam-heading {
  text-align: center;
  margin-bottom: clamp(38px, 4.4vw, 74px);
}

.exam-heading img {
  width: clamp(236px, 21vw, 338px);
  margin: 0 auto 26px;
}

.exam-heading p {
  margin: 0;
  color: #34307d;
  font-size: clamp(20px, 2vw, 34px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.04em;
}

.date-venue-card {
  position: relative;
  min-height: 260px;
  margin: 0 auto clamp(44px, 5vw, 72px);
  padding: 40px 152px 36px 52px;
  display: grid;
  grid-template-columns: 304px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 42px;
  align-items: start;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(115deg, #8fd4ff, #ffacd0, #fff0a1, #bba9ef, #8fd4ff) border-box;
  border: 4px solid transparent;
  border-radius: 42px;
  box-shadow: var(--shadow-soft);
}

.date-venue-labels {
  display: contents;
}

.date-venue-labels span {
  width: 100%;
  display: grid;
  place-items: center;
  align-self: center;
  min-height: 76px;
  color: #fff;
  background: linear-gradient(180deg, #6379e3 0%, #3566bd 100%);
  border-radius: 999px;
  font-size: clamp(22px, 1.8vw, 33px);
  font-weight: 900;
  letter-spacing: 0.04em;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.25);
}

.date-venue-labels span:first-child {
  grid-column: 1;
  grid-row: 1;
  transform: translateY(clamp(7px, 1.1vw, 21px));
}

.date-venue-labels span:last-child {
  grid-column: 1;
  grid-row: 2;
}

.date-venue-content {
  display: contents;
}

.date-row,
.venue-row {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 48px;
  row-gap: 8px;
}

.date-row {
  grid-row: 1;
  align-self: center;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: clamp(8px, 1.1vw, 14px);
  align-items: start;
}

.venue-row {
  grid-row: 2;
  align-self: center;
}

.date-row strong {
  color: var(--pink);
  font-size: clamp(52px, 5.2vw, 88px);
  line-height: 1;
  letter-spacing: 0.03em;
  font-weight: 700;
}

.date-row span {
  color: #34307d;
  font-size: clamp(18px, 1.65vw, 29px);
}

.venue-row strong {
  width: 100%;
  color: #1e2d78;
  font-size: clamp(38px, 4.2vw, 70px);
  line-height: 1.15;
}

.venue-row span {
  color: #2a3481;
  font-size: clamp(18px, 1.8vw, 31px);
  letter-spacing: 0.03em;
}

.date-venue-icon {
  position: absolute;
  right: 36px;
  bottom: 34px;
  width: clamp(82px, 8vw, 140px);
}

.fee-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(38px, 3.5vw, 70px);
  margin-bottom: clamp(56px, 6vw, 88px);
}

.fee-card {
  position: relative;
  min-height: 430px;
  padding: clamp(36px, 3.2vw, 58px) clamp(36px, 4vw, 62px)
    clamp(42px, 4vw, 68px);
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.8) 48%, rgba(255, 249, 252, 0.95) 100%) padding-box,
    linear-gradient(115deg, #ff8fc3, #ffc6dc, #fff0a8, #dcb8f2, #ff8fc3) border-box;
  border: 4px solid transparent;
  border-radius: 42px;
  box-shadow: var(--shadow-soft);
}

.fee-card--online {
  background:
    radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.82) 48%, rgba(247, 252, 255, 0.96) 100%) padding-box,
    linear-gradient(115deg, #62bff1, #bceaff, #fff0a8, #c9b7f0, #62bff1) border-box;
}

.fee-card::after {
  content: "";
  position: absolute;
  right: 58px;
  bottom: 26px;
  left: 58px;
  height: 36px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(245, 247, 249, 0));
  opacity: 0.6;
}

.fee-card h3 {
  display: grid;
  place-items: center;
  min-height: 84px;
  margin: 0 0 clamp(46px, 4vw, 68px);
  color: #fff;
  background: linear-gradient(180deg, #f66eaa 0%, #e84086 100%);
  border-radius: 999px;
  font-size: clamp(27px, 2.8vw, 48px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.05em;
}

.fee-card--online h3 {
  background: linear-gradient(180deg, #5fbdf1 0%, #329dd6 100%);
}

.fee-card ul {
  position: relative;
  z-index: 2;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: clamp(30px, 3.3vw, 58px);
}

.fee-card li {
  position: relative;
  display: grid;
  grid-template-columns: 124px 34px minmax(0, 1fr);
  align-items: baseline;
  padding-left: 48px;
  color: #172565;
  font-size: clamp(28px, 2.8vw, 46px);
  line-height: 1.2;
  letter-spacing: 0.03em;
}

.fee-card li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: clamp(22px, 2vw, 34px);
  height: clamp(22px, 2vw, 34px);
  border-radius: 50%;
  background: #ff9fc8;
  transform: translateY(-50%);
}

.fee-card--online li::before {
  background: #8cccf8;
}

.fee-card li b {
  font-weight: 900;
}

.fee-card li strong {
  font-size: clamp(27px, 2.45vw, 42px);
  white-space: nowrap;
}

.access-panel {
  position: relative;
  padding: clamp(80px, 5.8vw, 112px) clamp(28px, 3vw, 48px)
    clamp(34px, 3.4vw, 52px);
  background:
    linear-gradient(180deg, #fffef9 0%, #fff8eb 100%) padding-box,
    linear-gradient(115deg, #ffd08d, #ffadd0, #a8ddff, #f4df88, #ffd08d) border-box;
  border: 4px solid transparent;
  border-radius: 42px;
  transition: padding-bottom 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.access-panel.is-collapsed {
  padding-bottom: clamp(0px, 4vw, 68px);
}

.access-toggle {
  position: absolute;
  top: -48px;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, 60%);
  min-height: 96px;
  padding: 8px clamp(18px, 2vw, 34px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(48px, 4.2vw, 62px);
  align-items: center;
  gap: clamp(8px, 1.2vw, 18px);
  margin: 0;
  color: #fff;
  background: linear-gradient(180deg, #a56dd0 0%, #7c4ab5 100%);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 5px 0 rgba(134, 95, 154, 0.22);
  cursor: pointer;
  transition:
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 260ms ease,
    box-shadow 520ms ease;
}

.access-panel.is-access-open .access-toggle {
  transform: translateX(-50%) translateY(-2px) scale(1.015);
  box-shadow: 0 7px 0 rgba(134, 95, 154, 0.18);
}

.access-toggle-text {
  min-width: 0;
  font-size: clamp(32px, 3.2vw, 58px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-align: center;
  white-space: nowrap;
}

.access-toggle-icon {
  position: relative;
  display: block;
  width: clamp(42px, 3.4vw, 54px);
  aspect-ratio: 1;
  justify-self: center;
  background: #fff;
  border: 4px solid #f3d7ff;
  border-radius: 50%;
  box-shadow: inset 0 -3px 0 rgba(124, 74, 181, 0.12);
  transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.access-toggle-icon::before,
.access-toggle-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52%;
  height: 4px;
  background: #7c4ab5;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.access-toggle-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.access-toggle[aria-expanded="true"] .access-toggle-icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
}

.access-toggle[aria-expanded="true"] .access-toggle-icon {
  transform: rotate(180deg) scale(1.04);
}

.access-toggle:hover,
.access-toggle:focus-visible {
  filter: brightness(1.04);
}

.access-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translate3d(0, -14px, 0) scale(0.985);
  transform-origin: center top;
  transition:
    max-height 480ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 300ms ease,
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.access-panel.is-access-open .access-content {
  max-height: var(--access-content-height, 2400px);
  opacity: 1;
  transform: none;
  transition-duration: 720ms, 460ms, 650ms;
}

.access-footer-character {
  display: block;
  width: clamp(172.573248px, 16.978981vw, 283.910828px);
  max-width: 100%;
  height: auto;
  margin: clamp(18px, 2vw, 28px) auto 8px;
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(0.9);
  transform-origin: center bottom;
  transition:
    opacity 260ms ease,
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.access-panel.is-access-open .access-footer-character {
  opacity: 1;
  transform: none;
  transition-duration: 520ms, 820ms;
  transition-delay: 420ms;
}

.access-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 2.4vw, 36px);
}

.access-card {
  padding: clamp(32px, 3.2vw, 54px) clamp(16px, 1.4vw, 26px)
    clamp(28px, 3vw, 44px);
  text-align: center;
  background:
    linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)) padding-box,
    linear-gradient(115deg, #ff8fbd, #ffc6dc, #fff0a8, #dfaee9, #ff8fbd) border-box;
  border: 4px solid transparent;
  border-radius: 34px;
  opacity: 0;
  transform: translate3d(0, -16px, 0) scale(0.955);
  transform-origin: center top;
  transition:
    opacity 280ms ease,
    transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

.access-panel.is-access-open .access-card {
  opacity: 1;
  transform: none;
  transition-duration: 460ms, 720ms;
}

.access-panel.is-access-open .access-card:nth-child(1) {
  transition-delay: 130ms;
}

.access-panel.is-access-open .access-card:nth-child(2) {
  transition-delay: 230ms;
}

.access-panel.is-access-open .access-card:nth-child(3) {
  transition-delay: 330ms;
}

.access-card--blue {
  background:
    linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)) padding-box,
    linear-gradient(115deg, #72c7f2, #bce9ff, #fff0a8, #beaef0, #72c7f2) border-box;
}

.access-card--purple {
  background:
    linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)) padding-box,
    linear-gradient(115deg, #c28bd8, #e4b8ef, #ffd3e4, #a9dfff, #c28bd8) border-box;
}

.date-venue-card,
.fee-card,
.access-panel,
.access-card {
  background-position: 0 0, 0% 50%;
  background-size: 100% 100%, 220% 220%;
  animation: detail-card-neon 12s ease-in-out infinite alternate;
}

.fee-card--online,
.access-card--blue {
  animation-delay: -3s;
}

.access-panel,
.access-card--purple {
  animation-delay: -6s;
}

@keyframes detail-card-neon {
  0% {
    background-position: 0 0, 0% 50%;
    box-shadow:
      0 10px 24px rgba(116, 75, 100, 0.08),
      0 0 11px rgba(255, 74, 158, 0.22);
  }
  100% {
    background-position: 0 0, 100% 50%;
    box-shadow:
      0 10px 24px rgba(74, 100, 126, 0.08),
      0 0 15px rgba(65, 185, 238, 0.24);
  }
}

.line-name {
  display: grid;
  place-items: center;
  min-height: 70px;
  margin-bottom: 30px;
  color: #fff;
  background: linear-gradient(180deg, #4f497c 0%, #2e2b58 100%);
  border-radius: 999px;
  font-size: clamp(20px, 1.75vw, 30px);
  line-height: 1.15;
  letter-spacing: 0.02em;
}

.access-card img {
  width: clamp(52px, 6vw, 92px);
  height: clamp(52px, 6vw, 92px);
  object-fit: contain;
  margin: 0 auto 18px;
}

.access-panel.is-access-open .access-card img {
  animation: access-train-arrive 920ms cubic-bezier(0.22, 1, 0.36, 1) 180ms both;
  transform-origin: center bottom;
}

.access-panel.is-access-open .access-card:nth-child(2) img {
  animation-delay: 280ms;
}

.access-panel.is-access-open .access-card:nth-child(3) img {
  animation-delay: 380ms;
}

@keyframes access-train-arrive {
  0% {
    opacity: 0;
    transform: translate3d(-18px, 5px, 0) rotate(-4deg) scale(0.88);
  }
  58% {
    opacity: 1;
    transform: translate3d(3px, -2px, 0) rotate(1.5deg) scale(1.06, 0.97);
  }
  80% {
    transform: translate3d(-1px, 1px, 0) rotate(-0.5deg) scale(0.99, 1.01);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.access-card h4 {
  min-height: 164px;
  margin: 0;
  color: #202a72;
  font-size: clamp(25px, 2.15vw, 38px);
  line-height: 1.3;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.access-card small {
  font-size: 0.72em;
}

.nowrap {
  white-space: nowrap;
}

.access-card p {
  position: relative;
  margin: 30px 0 0;
  padding-top: 32px;
  color: #273078;
  font-size: clamp(22px, 1.95vw, 32px);
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.access-card p::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  border-top: 6px dotted #ff8dbc;
}

.access-card--blue p::before {
  border-top-color: #55b6ed;
}

.access-card--purple p::before {
  border-top-color: #bd83cd;
}

.choose-section {
  --cta-dot-shift: 0px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  padding: clamp(76px, 6.3vw, 118px) clamp(20px, 5.8vw, 112px)
    clamp(76px, 6.8vw, 128px);
  background: linear-gradient(180deg, #fffdf7 0%, var(--cream-bg) 52%, #fffaf0 100%);
}

.choose-section::before {
  position: absolute;
  inset: -72px 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(244, 147, 188, 0.09) 0 20px, transparent 21px) 12px 0 / 218px 184px repeat,
    radial-gradient(circle, rgba(112, 190, 230, 0.075) 0 16px, transparent 17px) 108px 78px / 242px 204px repeat,
    radial-gradient(circle, rgba(237, 196, 75, 0.07) 0 11px, transparent 12px) 36px 116px / 270px 226px repeat;
  transform: translate3d(0, var(--cta-dot-shift), 0);
  will-change: transform;
}

.choose-heading {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  text-align: center;
  margin-bottom: clamp(42px, 4vw, 72px);
}

.choose-heading h2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  margin: 0 0 20px;
  color: var(--text-brown);
  font-size: clamp(40px, 4.3vw, 76px);
  line-height: 1.1;
  letter-spacing: 0.1em;
  overflow-wrap: anywhere;
}

.choose-heading p {
  max-width: 100%;
  margin: 0;
  color: var(--text-brown);
  font-size: clamp(18px, 1.7vw, 30px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.16em;
  overflow-wrap: anywhere;
}

.choose-character {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  width: clamp(231.019108px, 22.729299vw, 380.063694px);
  height: auto;
  margin: 0 auto clamp(18px, 2vw, 32px);
}

.entry-buttons--choose {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  grid-row: 3;
}

.event-page {
  background: var(--page-bg);
}

.event-hero {
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(226, 239, 255, 0.9), rgba(255, 248, 196, 0.85), rgba(255, 222, 236, 0.9)),
    #fff3f9;
}

.event-hero img {
  width: 100%;
  min-height: 360px;
  margin: 0 auto;
  object-fit: cover;
  object-position: center top;
}

.event-section {
  padding: clamp(28px, 3vw, 56px) clamp(20px, 5.8vw, 112px) 0;
  background: var(--page-bg);
}

.event-photo-section {
  padding-top: clamp(38px, 4vw, 72px);
}

.event-shop-section {
  padding-bottom: var(--cta-pre-gap);
}

.event-panel {
  width: min(100%, 1840px);
  margin: 0 auto;
  padding: clamp(34px, 3.8vw, 72px) clamp(28px, 4.3vw, 78px)
    clamp(38px, 4.3vw, 78px);
  border-radius: clamp(24px, 2.5vw, 38px);
  box-shadow: 0 10px 22px rgba(164, 110, 153, 0.08);
}

.event-panel--photo {
  background: linear-gradient(180deg, #fff8fc 0%, #fff2f8 100%);
  border: 4px solid #ffc3dc;
}

.event-panel--greeting {
  background: linear-gradient(180deg, #fcf8ff 0%, #fff8ff 100%);
  border: 4px solid #e4c6ff;
}

.event-panel--shop {
  background: linear-gradient(180deg, #f4fbff 0%, #eef8ff 100%);
  border: 4px solid #b9dfff;
}

.event-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.8vw, 28px);
  margin-bottom: clamp(8px, 1vw, 14px);
  text-align: center;
}

.event-heading img {
  width: clamp(54px, 5vw, 86px);
  height: auto;
  object-fit: contain;
}

.event-heading--pink img {
  width: clamp(239.312102px, 23.545223vw, 393.707006px);
}

.event-heading--blue img {
  width: clamp(131.503185px, 12.938217vw, 216.343949px);
}

.event-heading--purple img {
  width: clamp(131.898089px, 12.97707vw, 216.993631px);
}

.event-heading h2 {
  min-width: 0;
  margin: 0;
  font-size: clamp(38px, 4vw, 72px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.04em;
}

.event-heading--pink h2 {
  color: #ef4f94;
}

.event-heading--purple h2 {
  color: #8054a1;
}

.event-heading--blue h2 {
  color: #1d8ee4;
}

.event-heading .event-shop-title {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.18em;
  font-size: clamp(32px, 3.1vw, 54px);
  white-space: nowrap;
}

.event-shop-title span {
  white-space: nowrap;
}

.event-lead {
  margin: 0 0 clamp(26px, 2.8vw, 48px);
  color: #3b4597;
  font-size: clamp(18px, 1.55vw, 28px);
  font-weight: 900;
  line-height: 1.55;
  text-align: center;
  letter-spacing: 0.06em;
}

.photo-spot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(34px, 4.2vw, 76px);
}

.photo-spot-card {
  position: relative;
  padding: clamp(28px, 3.4vw, 46px) clamp(28px, 3.8vw, 68px)
    clamp(82px, 7.4vw, 138px);
  text-align: center;
  background: rgba(255, 255, 255, 0.72);
  border: 3px solid #ffc6de;
  border-radius: clamp(24px, 2.4vw, 36px);
}

.photo-card-ribbon {
  position: static;
  display: grid;
  place-items: center;
  margin-bottom: clamp(16px, 1.8vw, 28px);
}

.photo-card-label {
  width: clamp(250px, 27vw, 380px);
  margin: 0 auto;
}

.photo-card-icon {
  position: absolute;
  bottom: clamp(18px, 2vw, 34px);
  width: clamp(64px, 5.3vw, 104px);
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.photo-card-icon--left {
  left: clamp(18px, 2vw, 34px);
}

.photo-card-icon--right {
  right: clamp(18px, 2vw, 34px);
}

.coming-soon-image {
  width: min(100%, 514px);
  margin: 0 auto;
  border-radius: 20px;
}

.photo-spot-card .coming-soon-image {
  width: min(78%, 420px);
}

.photo-spot-card p {
  margin: clamp(28px, 3.5vw, 52px) 0 0;
  padding: 0 clamp(48px, 5vw, 90px);
  color: #3045a2;
  font-size: clamp(17px, 1.35vw, 24px);
  font-weight: 900;
  line-height: 1.7;
}

.event-panel--shop .event-lead {
  margin-bottom: clamp(16px, 1.8vw, 28px);
  color: #1b55b9;
}

.event-shop-hours {
  display: flex;
  width: min(100%, 620px);
  margin: 0 auto clamp(24px, 2.8vw, 42px);
  padding: clamp(12px, 1.2vw, 18px) clamp(20px, 2.4vw, 38px);
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2vw, 32px);
  background: rgba(255, 255, 255, 0.92);
  border: 3px solid #8dccf5;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(29, 142, 228, 0.1);
}

.event-shop-hours dt {
  padding: 0.35em 0.9em;
  color: #fff;
  font-size: clamp(16px, 1.25vw, 22px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.08em;
  background: #1d8ee4;
  border-radius: 999px;
}

.event-shop-hours dd {
  display: inline-flex;
  margin: 0;
  align-items: baseline;
  gap: 0.12em;
  color: #1b55b9;
  font-size: clamp(28px, 2.6vw, 44px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.event-shop-hours__spoken {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.event-page .contents-section {
  padding-top: clamp(58px, 5vw, 92px);
}

.bookcafe-page {
  background: #fff2f7;
}

.bookcafe-hero {
  overflow: hidden;
  background: #b9d9f2;
}

.bookcafe-hero img {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.bookcafe-info-section {
  padding: clamp(24px, 2.2vw, 40px) clamp(20px, 5.8vw, 112px)
    clamp(26px, 2.5vw, 46px);
  background: #fff6fa;
}

.bookcafe-info-grid {
  width: min(100%, 1840px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(26px, 2.6vw, 48px);
}

.bookcafe-info-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  place-items: center;
  min-height: clamp(250px, 17vw, 320px);
  padding: clamp(28px, 2.6vw, 48px) clamp(24px, 3.2vw, 56px)
    clamp(34px, 3vw, 54px);
  row-gap: clamp(16px, 1.6vw, 30px);
  overflow: hidden;
  text-align: center;
  background: rgba(255, 255, 255, 0.88);
  border: 3px solid #ffc5d6;
  border-radius: clamp(34px, 3.2vw, 52px);
  box-shadow: 0 10px 24px rgba(203, 136, 167, 0.08);
}

.bookcafe-info-card--overview {
  border-color: #f3d5ff;
}

.bookcafe-card-ribbon {
  width: min(58%, 340px);
}

.bookcafe-info-comingsoon {
  width: min(64%, 360px);
  height: auto;
}

.bookcafe-menu-section {
  padding: clamp(20px, 2.5vw, 48px) clamp(20px, 5.8vw, 112px)
    clamp(26px, 3vw, 58px);
  background: #fff4eb;
}

.bookcafe-menu-panel {
  width: min(100%, 1840px);
  margin: 0 auto;
  padding: clamp(30px, 3.2vw, 58px) clamp(30px, 3.6vw, 66px)
    clamp(36px, 3.7vw, 70px);
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.95), rgba(255, 250, 242, 0) 28%),
    linear-gradient(180deg, #fffaf4 0%, #fff0e6 100%);
  border: 3px solid #ffe3d7;
  border-radius: clamp(32px, 3.5vw, 56px);
  box-shadow: 0 12px 24px rgba(177, 116, 86, 0.08);
}

.bookcafe-menu-heading {
  margin-bottom: clamp(26px, 2.6vw, 48px);
  text-align: center;
}

.bookcafe-menu-logo {
  display: block;
  width: min(80%, 400px);
  height: auto;
  margin: 0 auto clamp(18px, 1.8vw, 32px);
}

.bookcafe-menu-heading h2 {
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 1.4vw, 24px);
  margin: 0 0 clamp(10px, 1vw, 18px);
  color: #7a4030;
  font-size: clamp(40px, 4.5vw, 82px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
}

.bookcafe-menu-heading h2::before,
.bookcafe-menu-heading h2::after {
  content: "";
  display: block;
  width: clamp(44px, 4vw, 78px);
  height: 2px;
  background: #d79f45;
}

.bookcafe-menu-heading p {
  margin: 0;
  color: #7a4030;
  font-size: clamp(15px, 1.25vw, 24px);
  font-weight: 900;
  letter-spacing: 0.08em;
}

.bookcafe-menu-grid {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
}

.bookcafe-menu-grid img {
  width: 100%;
  max-width: 514px;
  height: auto;
  border-radius: clamp(18px, 1.7vw, 28px);
  filter: drop-shadow(0 10px 18px rgba(178, 107, 98, 0.08));
}

.bookcafe-store-section {
  padding: clamp(28px, 3vw, 58px) clamp(20px, 5.8vw, 112px)
    clamp(38px, 4.2vw, 78px);
  background: #fff6fa;
}

.bookcafe-store-section img {
  width: min(100%, 1840px);
  margin: 0 auto;
  border-radius: clamp(24px, 2.5vw, 42px);
  filter: drop-shadow(0 12px 24px rgba(144, 99, 179, 0.1));
}

.bookcafe-page .contents-section {
  padding-top: clamp(42px, 4vw, 76px);
  background: #fff2f7;
}

.bookcafe-page .recommend-section {
  background: #fff2f7;
}

.tokuten-page {
  background: #fff5f9;
}

.tokuten-content-section {
  padding: clamp(40px, 4vw, 76px) clamp(18px, 1.8vw, 34px)
    var(--cta-pre-gap);
  background:
    linear-gradient(180deg, #fff 0%, #fff 8%, #fffdf7 8%, #fff7fb 100%);
}

.tokuten-stack {
  width: min(100%, 1880px);
  margin: 0 auto;
  display: grid;
  gap: clamp(18px, 1.35vw, 26px);
}

.tokuten-panel {
  position: relative;
  overflow: visible;
  padding: clamp(52px, 4.4vw, 84px) clamp(44px, 5.4vw, 104px)
    clamp(52px, 4.4vw, 84px);
  background: rgba(255, 255, 255, 0.78);
  border: 3px solid var(--tokuten-border, #f5a7c7);
  border-radius: clamp(18px, 1.6vw, 30px);
}

.tokuten-panel--goods {
  --tokuten-border: #ff8d68;
  background: #fffaf0;
}

.tokuten-panel--pass {
  --tokuten-border: #ffc1d7;
  background: #fff2f7;
}

.tokuten-panel--failed {
  --tokuten-border: #7dbfff;
  background: #fff7fb;
}

.tokuten-panel--ticket {
  --tokuten-border: #a9d67a;
  background: #fffdf5;
}

.tokuten-panel--wallpaper {
  --tokuten-border: #f2cf73;
  background: #fff9e7;
}

.tokuten-panel--filecase {
  --tokuten-border: #9fd9d1;
  background: #f3fffd;
}

.tokuten-panel--filecase .tokuten-section-heading h2 {
  white-space: nowrap;
}

.tokuten-panel--pinbadge {
  --tokuten-border: #f3bea7;
  background: #fff7f2;
}

.tokuten-panel--pinbadge .tokuten-section-heading h2 {
  width: min(100%, 800px);
  min-width: 0;
  font-size: clamp(22px, 2.35vw, 44px);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.tokuten-panel--card {
  --tokuten-border: #b990df;
  background: #fbf6ff;
}

.tokuten-panel--meishi {
  --tokuten-border: #ffba78;
  background: #fff8f1;
}

.tokuten-panel--meishi .tokuten-section-heading h2 {
  width: min(100%, 720px);
  min-width: 0;
  font-size: clamp(24px, 2.5vw, 46px);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.tokuten-panel--limited {
  --tokuten-border: #ff9fc0;
  background: #fff6f9;
}

.tokuten-goods-layout {
  display: grid;
  grid-template-columns: minmax(300px, 562px) minmax(0, 1fr);
  gap: clamp(58px, 6.4vw, 122px);
  align-items: center;
  width: min(100%, 1460px);
  margin: 0 auto;
}

.tokuten-goods-main {
  width: min(100%, 562px);
  border-radius: clamp(14px, 1.5vw, 28px);
  filter: drop-shadow(0 9px 0 rgba(255, 150, 112, 0.16));
}

.tokuten-goods-body {
  color: #6f4b34;
}


.tokuten-goods-body p {
  width: min(100%, 720px);
  margin: 0 0 clamp(12px, 1.1vw, 20px);
  color: #6a563f;
  font-size: clamp(16px, 1.05vw, 20px);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.tokuten-coming-button {
  display: grid;
  grid-template-columns: clamp(62px, 6.1vw, 102px) minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  gap: clamp(12px, 1.1vw, 20px);
  width: min(100%, 620px);
  min-height: clamp(76px, 6vw, 112px);
  margin-top: clamp(28px, 2.8vw, 54px);
  padding: 10px clamp(24px, 2.8vw, 54px);
  color: #fff;
  background: #ff7f56;
  border-radius: 999px;
  box-shadow: 0 7px 0 rgba(194, 101, 76, 0.28);
  font-size: clamp(27px, 2.2vw, 42px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.06em;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.tokuten-coming-button:hover,
.tokuten-coming-button:focus-visible {
  transform: translateY(-3px);
  filter: brightness(1.03);
}

.tokuten-coming-button img {
  width: 100%;
  height: auto;
}

.tokuten-section-heading {
  display: flex;
  justify-content: center;
  margin: clamp(-54px, -2.8vw, -28px) 0 clamp(22px, 1.8vw, 34px);
}

.tokuten-section-heading h2 {
  min-width: clamp(220px, 20vw, 382px);
  margin: 0;
  padding: clamp(8px, 0.7vw, 14px) clamp(28px, 2.6vw, 52px);
  color: #fff;
  text-align: center;
  background: var(--tokuten-heading, var(--pink));
  border-radius: 999px;
  font-size: clamp(27px, 2.8vw, 52px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.1em;
}

.tokuten-section-heading--pink {
  --tokuten-heading: #f25d99;
}

.tokuten-section-heading--blue {
  --tokuten-heading: #59aae8;
}

.tokuten-section-heading--green {
  --tokuten-heading: #95c85f;
}

.tokuten-section-heading--purple {
  --tokuten-heading: #a278cb;
}

.tokuten-section-heading--yellow {
  --tokuten-heading: #d9a72b;
}

.tokuten-section-heading--mint {
  --tokuten-heading: #68bcae;
}

.tokuten-section-heading--coral {
  --tokuten-heading: #e58e70;
}

.tokuten-section-heading--goods {
  --tokuten-heading: #e77f5c;
}

.tokuten-panel--goods .tokuten-section-heading h2 {
  width: min(100%, 900px);
  min-width: 0;
  font-size: clamp(28px, 2.2vw, 42px);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.tokuten-goods-title-line {
  display: inline;
}

.tokuten-section-heading--orange {
  --tokuten-heading: #ff9f45;
}

.tokuten-lead,
.tokuten-choice,
.tokuten-note {
  margin: 0 auto clamp(28px, 2.4vw, 46px);
  color: #6f6b50;
  text-align: center;
  font-size: clamp(16px, 1.35vw, 26px);
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: 0.06em;
}

.tokuten-panel--pass .tokuten-lead {
  color: #6b6169;
}

.tokuten-panel--failed .tokuten-lead {
  color: #4778a7;
}

.tokuten-panel--wallpaper .tokuten-lead {
  color: #8a6930;
}

.tokuten-panel--filecase .tokuten-lead {
  color: #477c76;
}

.tokuten-panel--pinbadge .tokuten-lead {
  color: #8a5a49;
}

.tokuten-panel--card .tokuten-lead {
  color: #6f4b92;
}

.tokuten-panel--card .tokuten-section-heading h2 {
  width: min(100%, 800px);
  min-width: 0;
  font-size: clamp(22px, 2.35vw, 44px);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.tokuten-panel--meishi .tokuten-lead,
.tokuten-panel--limited .tokuten-lead {
  color: #8a5e39;
}

.tokuten-card-grid {
  margin: 0 auto;
  display: grid;
  align-items: end;
  justify-items: center;
}

.tokuten-card-grid--two {
  width: min(100%, 1490px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(64px, 9vw, 172px);
}

.tokuten-card-grid--three {
  width: min(100%, 1440px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(42px, 6vw, 112px);
}

.tokuten-image-card {
  position: relative;
  display: grid;
  justify-items: center;
  width: 100%;
}

.tokuten-image-card img {
  width: min(100%, 635px);
  height: auto;
  filter: drop-shadow(0 8px 12px rgba(146, 86, 121, 0.08));
}

.tokuten-card-grid--three .tokuten-image-card img {
  width: min(100%, 349px);
}

.tokuten-card-grid--certification {
  align-items: start;
  row-gap: clamp(32px, 3vw, 56px);
}

.tokuten-card-grid--certification .tokuten-certification-card--beginner {
  grid-column: 1;
}

.tokuten-card-grid--certification .tokuten-certification-card--intermediate {
  grid-column: 2;
}

.tokuten-card-grid--certification .tokuten-certification-card--advanced {
  grid-column: 3;
}

.tokuten-card-grid--certification .tokuten-certification-card--front {
  grid-row: 1;
}

.tokuten-card-grid--certification .tokuten-certification-card--back {
  grid-row: 2;
}

.tokuten-card-grid--certification .tokuten-image-card img {
  height: auto;
}

.tokuten-panel--failed .tokuten-image-card img {
  background: #fff;
}


.tokuten-image-card--meishi img {
  width: min(100%, 438px);
}

.tokuten-label {
  display: inline-grid;
  place-items: center;
  min-width: clamp(86px, 7.5vw, 142px);
  min-height: clamp(30px, 2.35vw, 44px);
  margin-bottom: clamp(10px, 1vw, 18px);
  padding: 3px clamp(16px, 1.4vw, 28px);
  color: #fff;
  border-radius: 999px;
  font-size: clamp(16px, 1.35vw, 25px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
}

.tokuten-label--pink {
  background: #f45f9d;
}

.tokuten-label--blue {
  background: #55a8e4;
}

.tokuten-label--orange {
  background: #ff9c32;
}

.tokuten-wide-image {
  width: min(100%, 721px);
  margin: 0 auto;
  filter: drop-shadow(0 8px 12px rgba(112, 148, 66, 0.08));
}

.tokuten-pinbadge-image {
  width: min(100%, 635px);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 8px 12px rgba(153, 91, 66, 0.08));
}

.tokuten-wallpaper-lead {
  width: min(100%, 1180px);
  margin-bottom: clamp(26px, 2.6vw, 48px);
}

.tokuten-wallpaper-delivery-note {
  width: min(100%, 980px);
  margin: 0 auto clamp(30px, 3vw, 52px);
  padding: clamp(15px, 1.5vw, 22px) clamp(22px, 3vw, 46px);
  color: #7b5d25;
  background: linear-gradient(135deg, #fffdf4 0%, #fff4c9 100%);
  border: 2px solid #e9c45f;
  border-radius: clamp(16px, 1.6vw, 24px);
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.72),
    0 8px 18px rgba(139, 101, 33, 0.08);
  text-align: center;
  font-size: clamp(15px, 1.3vw, 22px);
  font-weight: 900;
  line-height: 1.65;
  letter-spacing: 0.04em;
}

.tokuten-wallpaper-previews {
  display: grid;
  grid-template-columns: minmax(0, 960px) clamp(180px, 17vw, 300px);
  gap: clamp(28px, 3vw, 56px);
  align-items: center;
  justify-content: center;
  width: 100%;
}

.tokuten-wallpaper-preview {
  display: grid;
  gap: clamp(12px, 1.2vw, 20px);
  justify-items: center;
  width: 100%;
  margin: 0;
}

.tokuten-wallpaper-preview-label {
  display: inline-grid;
  place-items: center;
  min-width: clamp(92px, 8vw, 142px);
  min-height: clamp(34px, 3vw, 50px);
  padding: 6px clamp(18px, 1.8vw, 30px);
  color: #fff;
  background: linear-gradient(135deg, #e4b53e 0%, #cc9323 100%);
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  box-shadow:
    0 0 0 2px rgba(220, 168, 47, 0.25),
    0 6px 14px rgba(139, 101, 33, 0.12);
  font-size: clamp(14px, 1.25vw, 22px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.tokuten-wallpaper-image {
  display: block;
  height: auto;
  border-radius: clamp(16px, 1.4vw, 26px);
  filter: drop-shadow(0 10px 16px rgba(122, 79, 112, 0.08));
}

.tokuten-wallpaper-image[data-protected-image] {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.tokuten-wallpaper-image--pc {
  width: min(100%, 960px);
}

.tokuten-wallpaper-image--sp {
  width: min(100%, 300px);
}

.tokuten-wallpaper-note {
  margin: clamp(20px, 2vw, 34px) auto 0;
  color: #8a774f;
  text-align: center;
  font-size: clamp(13px, 1vw, 18px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.tokuten-meishi-divider {
  width: calc(100% + clamp(88px, 10.8vw, 208px));
  height: 3px;
  margin: clamp(42px, 4vw, 76px) clamp(-104px, -5.4vw, -44px)
    clamp(24px, 2.2vw, 42px);
  background: #ffd8b0;
}

.tokuten-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(12px, 1.4vw, 24px);
  align-items: center;
  width: min(100%, 760px);
  margin-bottom: clamp(26px, 2.4vw, 46px);
  color: #8c714a;
}

.tokuten-choice::before,
.tokuten-choice::after {
  content: "";
  height: 1px;
  background: #e6c59d;
}

.tokuten-small-grid {
  width: min(100%, 1120px);
  margin: 0 auto clamp(28px, 2.4vw, 46px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.5vw, 68px) clamp(48px, 7vw, 136px);
  justify-items: center;
}

.tokuten-small-grid--five {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: clamp(24px, 4vw, 64px);
}

.tokuten-small-grid--five .tokuten-small-card {
  grid-column: span 2;
  width: 100%;
}

.tokuten-small-grid--five .tokuten-small-card:nth-child(4) {
  grid-column: 2 / span 2;
}

.tokuten-small-grid--five .tokuten-small-card span {
  white-space: nowrap;
}

.tokuten-small-card {
  display: grid;
  gap: clamp(8px, 0.8vw, 14px);
  justify-items: center;
  color: #7c6d60;
  font-size: clamp(15px, 1.3vw, 24px);
  font-weight: 900;
}

.tokuten-small-card img {
  width: min(100%, 274px);
  height: auto;
  filter: drop-shadow(0 6px 10px rgba(171, 105, 75, 0.06));
}

.tokuten-note {
  margin-bottom: 0;
  color: #6f6250;
  font-size: clamp(15px, 1.25vw, 23px);
}

.tokuten-certificate-note {
  margin-top: clamp(18px, 1.8vw, 34px);
}

.tokuten-product-grid {
  width: min(100%, 1240px);
  margin: 0 auto clamp(28px, 2.4vw, 46px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(60px, 8.4vw, 162px);
  align-items: start;
  justify-items: center;
}

.tokuten-product-card {
  display: grid;
  gap: clamp(22px, 2.2vw, 42px);
  justify-items: center;
  width: 100%;
}

.tokuten-product-card h3 {
  margin: 0;
  color: #f05b97;
  text-align: center;
  font-size: clamp(21px, 2vw, 38px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.06em;
}

.tokuten-product-card:nth-child(2) h3 {
  color: #a580c8;
}

.tokuten-product-card img {
  width: auto;
  max-width: min(100%, 357px);
  max-height: clamp(310px, 28vw, 464px);
  filter: drop-shadow(0 10px 16px rgba(122, 79, 112, 0.08));
}

.tokuten-product-card:nth-child(2) img {
  max-width: min(100%, 301px);
}

.tokuten-product-grid--comingsoon {
  width: min(100%, 520px);
  grid-template-columns: 1fr;
  gap: 0;
  margin-bottom: 0;
}

.tokuten-product-card--comingsoon img,
.tokuten-product-card--comingsoon:nth-child(2) img {
  width: 100%;
  max-width: 480px;
  max-height: none;
  border-radius: clamp(16px, 1.4vw, 26px);
  filter: drop-shadow(0 10px 16px rgba(122, 79, 112, 0.08));
}

.tokuten-page .contents-section {
  padding-top: clamp(56px, 4.8vw, 90px);
  background: var(--page-bg);
}

.practice-page {
  background: #fff5ee;
}

.practice-hero {
  overflow: hidden;
  background: #fff4df;
}

.practice-hero img {
  width: 100%;
  min-height: 360px;
  margin: 0 auto;
  object-fit: cover;
  object-position: center top;
}

.page-hero {
  width: 100%;
  overflow: hidden;
  background: var(--page-hero-bg, #f5d1e0);
}

.page-hero img {
  display: block;
  width: 100%;
  max-width: 1700px;
  height: auto;
  margin: 0 auto;
}

.page-hero--top {
  --page-hero-bg: #f5d1e0;
}

.page-hero--event {
  --page-hero-bg: #a3add6;
  background-color: var(--page-hero-bg);
  background-image: linear-gradient(
    180deg,
    #f6c4da 0%,
    #e8c0da 10%,
    #d5b8d7 20%,
    #bfb0d5 30%,
    #a7a8d4 40%,
    #a2add8 50%,
    #97a6d3 60%,
    #96abd4 70%,
    #96b4d5 80%,
    #95c0d4 90%,
    #93ced0 100%
  );
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.page-hero--practice {
  --page-hero-bg: #daeac4;
}

.page-hero--bookcafe {
  --page-hero-bg: #b9d9f2;
}

.page-hero--tokuten {
  --page-hero-bg: #e9e2e9;
  background-color: var(--page-hero-bg);
  background-image:
    linear-gradient(
      180deg,
      #f7dde1 0%,
      #f4dee4 10%,
      #efe0e7 20%,
      #e8e0eb 30%,
      #e3e1ef 40%,
      #dfe1f1 50%,
      #dde2f2 60%,
      #dee2f2 70%,
      #e3e2f1 80%,
      #eae2ef 90%,
      #f1e2ee 100%
    ),
    linear-gradient(
      180deg,
      #daeceb 0%,
      #dcebe7 10%,
      #e0ebe2 20%,
      #e9eadc 30%,
      #f3e9d7 40%,
      #fbe7d4 50%,
      #fbe4d7 60%,
      #f3e2e0 70%,
      #eae1e9 80%,
      #e4e1f0 90%,
      #e3e2f1 100%
    );
  background-position: left, right;
  background-size: 50% 100%;
  background-repeat: no-repeat;
}

@media (min-width: 1701px) {
  .page-hero--tokuten {
    position: relative;
  }

  .page-hero--tokuten::before {
    position: absolute;
    inset: 0;
    content: "";
    background-image:
      linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0 3.54px, transparent 3.54px),
      linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0 3.54px, transparent 3.54px);
    background-position:
      calc(50% - 809.94px) 0,
      0 36.3px;
    background-size: 44.71px 44.71px;
    pointer-events: none;
  }

  .page-hero--tokuten img {
    position: relative;
    z-index: 1;
  }
}

.practice-scope,
.official-text-section {
  padding: clamp(28px, 3.4vw, 60px) clamp(20px, 5.8vw, 112px) 0;
  background: #fff9ef;
}

.official-text-section {
  padding-bottom: clamp(34px, 3.6vw, 64px);
}

.practice-panel {
  width: min(100%, 1840px);
  margin: 0 auto;
  padding: clamp(36px, 3.5vw, 62px) clamp(28px, 4.2vw, 76px)
    clamp(38px, 4vw, 72px);
  background: rgba(255, 255, 255, 0.86);
  border: 4px solid #f5a7c7;
  border-radius: clamp(26px, 3vw, 42px);
  box-shadow: 0 10px 22px rgba(197, 110, 151, 0.08);
}

.practice-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.4vw, 24px);
  margin-bottom: clamp(22px, 2.5vw, 38px);
  text-align: center;
}

.practice-heading img {
  width: clamp(42px, 4.2vw, 72px);
  height: auto;
  object-fit: contain;
}

.practice-heading h2 {
  min-width: 0;
  margin: 0;
  font-size: clamp(32px, 3.2vw, 54px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.06em;
}

.practice-heading--blue h2 {
  color: #4a4e8e;
}

.practice-heading--pink h2 {
  color: #ef689d;
}

.practice-heading--orange h2 {
  color: #d78311;
}

.practice-lead {
  margin: 0 0 clamp(26px, 2.7vw, 46px);
  color: #5a4c45;
  font-size: clamp(18px, 1.55vw, 28px);
  font-weight: 800;
  line-height: 1.6;
  text-align: center;
  letter-spacing: 0.08em;
}

.scope-list {
  display: grid;
  gap: 0;
}

.scope-card {
  --scope-accent: #f6a6c8;
  --scope-link: #b94c7c;
  --scope-ribbon-top: #f8bad0;
  --scope-ribbon-bottom: #eb8daf;
  --scope-ribbon-tail: #e39ab7;
  position: relative;
  display: grid;
  grid-template-columns: clamp(66.738854px, 6.566242vw, 109.796178px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: clamp(22px, 2.6vw, 50px);
  align-items: center;
  min-height: clamp(150px, 11vw, 210px);
  padding: clamp(24px, 2.4vw, 42px) clamp(28px, 3.8vw, 70px);
  background: transparent;
  border: 0;
  border-radius: 0;
}

.scope-card + .scope-card::before {
  position: absolute;
  top: 0;
  right: clamp(8px, 2vw, 34px);
  left: clamp(8px, 2vw, 34px);
  height: 2px;
  content: "";
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--scope-accent) 72%, white) 18%,
    var(--scope-accent) 50%,
    color-mix(in srgb, var(--scope-accent) 72%, white) 82%,
    transparent
  );
  opacity: 0.82;
}

.scope-card--middle {
  --scope-accent: #98b4f5;
  --scope-link: #3768c8;
  --scope-ribbon-top: #b6cff4;
  --scope-ribbon-bottom: #83a9e1;
  --scope-ribbon-tail: #91b2e3;
}

.scope-card--upper {
  --scope-accent: #b897eb;
  --scope-link: #7650b2;
  --scope-ribbon-top: #ccb7eb;
  --scope-ribbon-bottom: #a789d4;
  --scope-ribbon-tail: #b19adb;
}

.scope-character {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 100%;
  max-height: 118px;
  object-fit: contain;
  justify-self: center;
}


.scope-card--first .scope-character,
.scope-card--middle .scope-character,
.scope-card--upper .scope-character {
  height: auto;
  max-height: none;
}

/* Keep each character at the relative scale of its exported artwork. */
.scope-card--middle .scope-character {
  width: 92.899408%;
}

.scope-card--upper .scope-character {
  width: 65.088757%;
}

.scope-body {
  display: contents;
  min-width: 0;
}

.scope-rank {
  position: relative;
  z-index: 0;
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  place-items: center;
  justify-self: center;
  width: clamp(210px, 17vw, 240px);
  min-height: clamp(60px, 4.9vw, 70px);
  margin: 0 0 clamp(12px, 1.2vw, 18px);
  padding: 5px 22px 7px;
  color: #fff;
  font-size: clamp(24px, 1.9vw, 30px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.12em;
  text-align: center;
  text-indent: 0.12em;
  text-shadow: 0 2px 3px rgb(86 54 75 / 28%);
  background: linear-gradient(180deg, var(--scope-ribbon-top) 0%, var(--scope-ribbon-bottom) 100%);
  border: 2px solid rgb(255 255 255 / 88%);
  border-radius: 18px;
  box-shadow:
    inset 0 3px 0 rgb(255 255 255 / 22%),
    0 0 0 3px color-mix(in srgb, var(--scope-accent) 30%, transparent),
    0 8px 14px color-mix(in srgb, var(--scope-ribbon-tail) 18%, transparent);
}

.scope-rank span {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  width: 100%;
  min-height: 42px;
  padding: 4px 9px;
  white-space: nowrap;
  border: 0;
  border-radius: 0;
}

.scope-rank span::before,
.scope-rank span::after {
  color: #fff6bd;
  font-size: 0.55em;
  line-height: 1;
  content: "✦";
  filter: drop-shadow(0 0 4px rgb(255 255 255 / 70%));
}

.scope-copy {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  color: #5b514d;
  font-size: clamp(14px, 1.2vw, 21px);
  font-weight: 700;
  line-height: 1.75;
  text-align: left;
}

.scope-copy p {
  margin: 0;
}

.scope-source {
  margin-top: clamp(14px, 1.4vw, 24px);
  padding-top: clamp(12px, 1.2vw, 20px);
  border-top: 2px dashed var(--scope-accent);
}

.scope-source-title {
  margin: 0 0 clamp(6px, 0.7vw, 10px);
  color: var(--scope-link);
  font-size: clamp(15px, 1.3vw, 22px);
  font-weight: 900;
  line-height: 1.4;
}

.scope-source-links {
  display: grid;
  gap: clamp(7px, 0.7vw, 12px);
  margin: clamp(10px, 1vw, 16px) 0 0;
  padding-left: 1.35em;
  font-size: 0.92em;
}

.scope-source-links li::marker {
  color: var(--scope-link);
}

.scope-source-links a {
  color: var(--scope-link);
  font-weight: 800;
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}

.scope-source-links a:hover {
  text-decoration-thickness: 2px;
}

.scope-source-links a:focus-visible {
  outline: 3px solid var(--scope-accent);
  outline-offset: 4px;
  border-radius: 3px;
}

.scope-link-tail {
  white-space: nowrap;
}

.scope-external-icon {
  display: inline-block;
  margin-left: 0.15em;
  font-size: 0.9em;
}

.practice-panel--official {
  padding-bottom: clamp(46px, 4.8vw, 82px);
}

.official-text-section .practice-heading img {
  width: clamp(133.082802px, 13.093631vw, 218.942676px);
}

.official-product-grid {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  margin: 0 auto;
  gap: 0;
}

.official-product-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(270px, 32%) minmax(0, 1fr);
  gap: clamp(30px, 4.2vw, 68px);
  align-items: stretch;
  min-width: 0;
  padding: clamp(34px, 3.4vw, 56px) clamp(8px, 1.5vw, 24px);
  background: transparent;
  border: 0;
  border-radius: 0;
}

.official-product-card + .official-product-card::before {
  position: absolute;
  top: 0;
  right: clamp(6px, 1.4vw, 22px);
  left: clamp(6px, 1.4vw, 22px);
  height: 2px;
  content: "";
  background: linear-gradient(90deg, transparent, #f3a9c5 24%, #d9aee8 56%, #b89be5 80%, transparent);
  opacity: 0.82;
}

.official-product-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 112px;
  min-height: 42px;
  padding: 7px 22px;
  justify-self: center;
  color: #fff;
  font-size: clamp(15px, 1.25vw, 20px);
  font-weight: 900;
  letter-spacing: 0.08em;
  background: #f08fb2;
  border-radius: 999px;
}

.official-product-card--upcoming .official-product-label {
  background: #9b79cc;
}

.official-product-media {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(18px, 2.2vw, 30px);
  place-items: center;
  min-width: 0;
}

.official-product-image {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(300px, 27vw, 390px);
  object-fit: contain;
}

.official-product-image--published {
  width: auto;
}

.official-product-image--upcoming {
  width: auto;
}

.official-product-body {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  align-content: center;
  gap: clamp(14px, 1.5vw, 22px);
  min-width: 0;
  color: #6a564e;
  text-align: left;
}

.official-product-body h3 {
  margin: 0;
  color: #6a564e;
  font-size: clamp(21px, 1.8vw, 29px);
  font-weight: 900;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.official-product-lead {
  margin: 0;
  color: #b94c7c;
  font-size: clamp(17px, 1.4vw, 23px);
  font-weight: 900;
  line-height: 1.55;
}

.official-product-description-text {
  margin: 0;
  font-size: clamp(14px, 1.15vw, 19px);
  font-weight: 700;
  line-height: 1.85;
}

.official-product-description-text--upcoming {
  align-self: center;
}

.official-product-description-text strong {
  display: block;
  margin-bottom: 0.5em;
  color: #7650b2;
  font-size: 1.08em;
  font-weight: 900;
}

.official-product-footer {
  display: grid;
  justify-items: center;
  align-self: end;
  gap: clamp(12px, 1.3vw, 18px);
  width: 100%;
  padding-top: clamp(4px, 0.6vw, 10px);
}

.official-product-price {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.4em;
  margin: 0;
  color: #765f56;
  font-size: clamp(18px, 1.5vw, 24px);
  font-weight: 900;
  line-height: 1.4;
}

.official-product-price span {
  font-size: 0.72em;
}

.official-product-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1vw, 16px);
  width: min(100%, 680px);
  margin: 0;
}

.official-product-facts > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 11px 16px;
  background: #fbf7ff;
  border: 2px solid #e2d0f4;
  border-radius: 16px;
}

.official-product-facts dt {
  padding: 4px 10px;
  color: #fff;
  font-size: clamp(12px, 0.9vw, 15px);
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  background: #9b79cc;
  border-radius: 999px;
}

.official-product-facts dd {
  min-width: 0;
  margin: 0;
  color: #765f56;
  font-size: clamp(15px, 1.15vw, 19px);
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
}

.official-product-facts dd span {
  font-size: 0.75em;
}

.official-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 390px);
  min-height: 58px;
  padding: 12px 26px;
  color: #fff;
  font-size: clamp(16px, 1.45vw, 22px);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-align: center;
  text-shadow: 0 1px 2px rgb(128 61 86 / 35%);
  background: linear-gradient(180deg, #ffb1c8 0%, #f783a6 100%);
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: 0 0 0 2px #f7a6c1;
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.official-button:hover,
.official-button:focus-visible {
  transform: translateY(-3px);
  filter: brightness(1.03);
  box-shadow: 0 0 0 4px rgb(247 166 193 / 45%);
}

.official-button:focus-visible {
  outline: 3px solid #7a5aa8;
  outline-offset: 5px;
}

.official-external-icon {
  margin-left: 0.4em;
  font-size: 0.85em;
}

.official-product-notice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: min(100%, 390px);
  min-height: 58px;
  margin: 0;
  padding: 12px 26px;
  overflow: hidden;
  color: #fff;
  font-size: clamp(16px, 1.45vw, 22px);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 2px rgb(83 53 123 / 35%);
  cursor: default;
  background: linear-gradient(135deg, #d7c0f4 0%, #bd99e8 52%, #a77bdc 100%);
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow:
    0 0 0 2px #c3a5eb,
    0 8px 18px rgb(116 83 164 / 18%);
}

.official-notice-star {
  flex: 0 0 auto;
  width: 0.62em;
  height: 0.62em;
  background: #fff6c7;
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  filter: drop-shadow(0 0 4px rgb(255 255 255 / 85%));
}

.official-notice-star:first-child {
  margin-right: 0.65em;
}

.official-notice-star:last-child {
  margin-left: 0.65em;
}

@media (min-width: 981px) {
  .official-product-price {
    font-size: clamp(30px, 2.15vw, 34px);
  }

  .official-button,
  .official-product-notice {
    width: min(100%, 680px);
    min-height: 84px;
    padding: 18px 42px;
    font-size: clamp(24px, 1.9vw, 30px);
    border-width: 3px;
  }
}

.practice-campaign-section {
  padding: 0 clamp(20px, 5.8vw, 112px) clamp(88px, 7vw, 132px);
  background: #fff9ef;
}

.practice-campaign-panel {
  position: relative;
  isolation: isolate;
  width: min(100%, 1840px);
  margin: 0 auto;
  padding: clamp(48px, 4.6vw, 78px) clamp(34px, 5vw, 84px)
    clamp(42px, 4.4vw, 72px);
  overflow: hidden;
  background:
    linear-gradient(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94)) padding-box,
    linear-gradient(120deg, #f4a7c6, #ffd38f, #f5e89e, #e3b6e8, #f4a7c6) border-box;
  border: 4px solid transparent;
  border-radius: clamp(30px, 3.4vw, 48px);
  box-shadow: 0 14px 30px rgba(184, 103, 139, 0.12);
}

.practice-campaign-character {
  grid-column: 1;
  grid-row: 1;
  width: clamp(239.312104px, 23.545223vw, 393.707005px);
  height: auto;
  margin: 0 auto clamp(12px, 1.4vw, 22px);
}

.practice-campaign-heading {
  max-width: 100%;
  margin: clamp(30px, 3vw, 48px) auto clamp(28px, 3vw, 48px);
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.practice-campaign-heading h2 {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  color: #df5c91;
  font-size: clamp(30px, 3.2vw, 52px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.04em;
}

.practice-campaign-heading p {
  grid-column: 1;
  grid-row: 3;
  margin: clamp(14px, 1.5vw, 24px) 0 0;
  color: #6b4e42;
  font-size: clamp(17px, 1.55vw, 25px);
  font-weight: 800;
  line-height: 1.65;
}

.practice-campaign-heading strong {
  color: #e9578f;
  font-size: 1.25em;
}

.practice-campaign-info {
  margin: 0 0 clamp(34px, 3.5vw, 56px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 1.8vw, 28px);
}

.practice-campaign-info > div {
  min-width: 0;
  min-height: clamp(152px, 12vw, 210px);
  padding: clamp(24px, 2.8vw, 42px);
  display: grid;
  align-content: center;
  gap: clamp(14px, 1.4vw, 22px);
  background: linear-gradient(135deg, #fffaf2 0%, #fff4f8 100%);
  border: 3px solid #f5c4d6;
  border-radius: 26px;
  box-shadow: 0 8px 18px rgba(197, 110, 151, 0.08);
  text-align: center;
}

.practice-campaign-info dt {
  color: #b54f7b;
  font-size: clamp(18px, 1.5vw, 25px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.08em;
}

.practice-campaign-info dd {
  margin: 0;
  color: #59483f;
  font-size: clamp(15px, 1.3vw, 21px);
  font-weight: 800;
  line-height: 1.55;
}

.practice-campaign-period-dates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1vw, 18px);
}

.practice-campaign-period-dates time {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  max-width: 100%;
  column-gap: 0.3em;
  color: #dc5b8c;
  font-size: clamp(21px, 2.1vw, 35px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: normal;
}

.practice-campaign-period-date,
.practice-campaign-period-time {
  white-space: nowrap;
}

.practice-campaign-period-separator {
  color: #76635a;
  font-size: clamp(20px, 1.8vw, 30px);
  font-weight: 900;
}

.practice-campaign-period-dates small {
  flex-basis: 100%;
  color: #76635a;
  font-size: clamp(12px, 1vw, 16px);
  font-weight: 700;
}

.practice-campaign-prize-showcase {
  margin-bottom: clamp(34px, 3.5vw, 56px);
  padding: clamp(22px, 2.8vw, 42px);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.88),
    rgba(255, 249, 242, 0.74)
  );
  border: 0;
  border-radius: 26px;
  text-align: center;
}

.practice-campaign-prize-heading {
  width: 100%;
  margin-bottom: clamp(18px, 2vw, 30px);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.practice-campaign-prize-label {
  display: inline-block;
  padding: 6px 22px;
  color: #fff;
  background: linear-gradient(180deg, #ff8eb8 0%, #ed6299 100%);
  border-radius: 999px;
  font-size: clamp(14px, 1.1vw, 18px);
  font-weight: 900;
  letter-spacing: 0.08em;
}

.practice-campaign-prize-showcase h3 {
  margin: 10px 0 0;
  color: #d94f87;
  font-size: clamp(20px, 1.8vw, 30px);
  font-weight: 900;
  line-height: 1.5;
}

.practice-campaign-prize-shipping {
  margin: 8px 0 0;
  color: #76635a;
  font-size: clamp(12px, 0.95vw, 15px);
  font-weight: 700;
  line-height: 1.6;
}

.practice-campaign-prize-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(20px, 2.5vw, 44px);
}

.practice-campaign-prize-products {
  min-width: 0;
}

.practice-campaign-prize-choice {
  margin: 0 0 clamp(12px, 1.2vw, 18px);
  color: #59483f;
  font-size: clamp(14px, 1.2vw, 19px);
  font-weight: 800;
  line-height: 1.5;
}

.practice-campaign-prize-choice span {
  display: inline-block;
  margin-right: 0.35em;
  padding: 4px 12px;
  color: #a84770;
  background: #fff0b8;
  border-radius: 999px;
  font-weight: 900;
}

.practice-campaign-prize-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.5vw, 24px);
}

.practice-campaign-prize-item {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-width: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(118, 82, 94, 0.1);
}

.practice-campaign-prize-item img {
  display: block;
  width: calc(100% - clamp(24px, 2.8vw, 44px));
  height: calc(100% - clamp(24px, 2.8vw, 44px));
  max-width: none;
  max-height: none;
  padding: 0;
  object-fit: contain;
  object-position: center;
}

.practice-campaign-prize-example {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  width: 100%;
  margin: 0;
}

.practice-campaign-prize-example-media {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 18px;
}

.practice-campaign-prize-example-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
}

.practice-campaign-prize-example figcaption {
  margin: 0 auto clamp(12px, 1.2vw, 18px);
  padding: clamp(7px, 0.8vw, 11px) clamp(24px, 2.4vw, 42px);
  color: #fff;
  background: linear-gradient(180deg, #f469a8 0%, #e85191 100%);
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: 0 4px 0 rgba(218, 97, 147, 0.24);
  font-size: clamp(16px, 1.4vw, 23px);
  font-weight: 900;
  letter-spacing: 0.08em;
}

@media (min-width: 981px) {
  .practice-campaign-prize-layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }

  .practice-campaign-prize-products,
  .practice-campaign-prize-example {
    display: grid;
    row-gap: clamp(12px, 1.2vw, 18px);
    grid-template-rows: clamp(54px, 4vw, 68px) minmax(0, 1fr);
    align-self: stretch;
    min-height: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .practice-campaign-prize-choice {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    margin: 0;
    text-align: center;
  }

  .practice-campaign-prize-example figcaption {
    align-self: center;
    margin: 0 auto;
  }

  .practice-campaign-prize-grid {
    align-self: start;
  }

  .practice-campaign-prize-example-media {
    align-self: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    border: 0;
    border-radius: 18px;
  }

  .practice-campaign-prize-example-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
}

@media (max-width: 980px) {
  .practice-campaign-prize-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .practice-campaign-prize-example {
    width: min(100%, 720px);
    margin: 0 auto;
  }
}

.practice-campaign-prize-link {
  margin: clamp(18px, 2vw, 28px) 0 0;
  color: #59483f;
  font-size: clamp(15px, 1.25vw, 20px);
  font-weight: 800;
  line-height: 1.7;
}

.practice-campaign-prize-link a {
  color: #b54f7b;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.practice-campaign-prize-link a:hover,
.practice-campaign-prize-link a:focus-visible {
  color: #dc5b8c;
}

.practice-campaign-prize-note {
  margin: 14px 0 0;
  color: #76635a;
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 700;
  line-height: 1.6;
}

.practice-campaign-howto {
  margin-bottom: clamp(22px, 2.4vw, 36px);
  padding: clamp(26px, 2.8vw, 44px);
  background: #fff5d9;
  border: 3px solid #f4d58e;
  border-radius: 26px;
}

.practice-campaign-howto h3 {
  margin: 0 0 clamp(20px, 2vw, 32px);
  color: #b66b0b;
  font-size: clamp(23px, 2.2vw, 34px);
  font-weight: 900;
  text-align: center;
}

.practice-campaign-howto ol {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 28px);
  list-style: none;
}

.practice-campaign-howto li {
  min-width: 0;
  min-height: clamp(96px, 8vw, 132px);
  padding: clamp(16px, 1.8vw, 26px);
  display: grid;
  grid-template-columns: clamp(42px, 4vw, 60px) minmax(0, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
  align-items: center;
  background: #fff;
  border-radius: 18px;
}

.practice-campaign-step {
  display: grid;
  place-items: center;
  width: clamp(42px, 4vw, 60px);
  aspect-ratio: 1;
  color: #fff;
  background: #ef78a6;
  border-radius: 50%;
  box-shadow: 0 4px 0 rgba(190, 84, 126, 0.18);
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 900;
}

.practice-campaign-howto li:nth-child(2) .practice-campaign-step {
  background: #eca844;
}

.practice-campaign-howto li:nth-child(3) .practice-campaign-step {
  background: #a879c9;
}

.practice-campaign-howto p {
  margin: 0;
  color: #5e4c43;
  font-size: clamp(14px, 1.2vw, 19px);
  font-weight: 800;
  line-height: 1.6;
}

.practice-campaign-howto a {
  color: #d44f87;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.practice-campaign-entry-note {
  margin: 0 0 clamp(22px, 2.4vw, 34px);
  padding: 14px 18px;
  color: #744d1d;
  background: #fff3bf;
  border-radius: 14px;
  font-size: clamp(14px, 1.15vw, 18px);
  font-weight: 900;
  line-height: 1.55;
  text-align: center;
}

.practice-campaign-terms {
  overflow: hidden;
  background: #fff;
  border: 3px solid #efd2de;
  border-radius: 18px;
}

.practice-campaign-terms summary {
  position: relative;
  min-height: 64px;
  padding: 14px 64px 14px 24px;
  display: flex;
  align-items: center;
  color: #8b4b66;
  background: #fff5f9;
  cursor: pointer;
  font-size: clamp(16px, 1.3vw, 21px);
  font-weight: 900;
  list-style: none;
}

.practice-campaign-terms summary::-webkit-details-marker {
  display: none;
}

.practice-campaign-terms summary::after {
  position: absolute;
  top: 50%;
  right: 24px;
  width: 14px;
  height: 14px;
  content: "";
  border-right: 3px solid #cb6f95;
  border-bottom: 3px solid #cb6f95;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}

.practice-campaign-terms[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
}

.practice-campaign-terms summary:focus-visible {
  outline: 4px solid rgba(239, 120, 166, 0.3);
  outline-offset: -4px;
}

.practice-campaign-terms-body {
  padding: clamp(20px, 2.2vw, 34px);
  border-top: 2px solid #f5dce6;
}

.practice-campaign-terms-body ul {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px clamp(20px, 2vw, 32px);
  list-style: none;
}

.practice-campaign-terms-body li {
  position: relative;
  padding-left: 1.35em;
  color: #675750;
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 700;
  line-height: 1.7;
}

.practice-campaign-terms-body li::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "※";
  color: #df6e9a;
  font-weight: 900;
}

.practice-quiz-section {
  --practice-quiz-next-bg: var(--cream-bg);
  position: relative;
  padding: clamp(72px, 5.6vw, 108px) clamp(20px, 5.8vw, 112px)
    clamp(56px, 5vw, 96px);
  background: #fffabc;
}

.practice-quiz-section::before {
  content: "";
  position: absolute;
  top: -33px;
  right: 0;
  left: 0;
  height: 34px;
  background:
    radial-gradient(circle at 17px 40px, #fffabc 22px, transparent 23px) 0 0 / 34px 34px repeat-x;
  pointer-events: none;
}

.practice-quiz-section::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 34px;
  background:
    radial-gradient(circle at 17px -6px, transparent 22px, var(--practice-quiz-next-bg) 23px) 0 0 / 34px 34px repeat-x;
  pointer-events: none;
}

.quiz-grid {
  width: min(100%, 1840px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 3vw, 58px) clamp(78px, 7vw, 134px);
}

.quiz-card {
  min-height: clamp(430px, 31vw, 574px);
  padding: clamp(24px, 2.2vw, 38px) clamp(26px, 2.8vw, 52px)
    clamp(26px, 2.7vw, 48px);
  display: grid;
  grid-template-rows: auto minmax(128px, 1fr) auto;
  row-gap: clamp(12px, 1.2vw, 20px);
  background: #fffef7;
  border: 4px solid #d9962a;
  border-radius: clamp(18px, 2vw, 26px);
  box-shadow: 0 8px 16px rgba(166, 103, 13, 0.08);
}

.quiz-title {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.3vw, 22px);
  min-width: 0;
}

.quiz-title span {
  display: inline-grid;
  place-items: center;
  min-width: clamp(60px, 5.2vw, 88px);
  min-height: clamp(42px, 3.4vw, 58px);
  padding: 4px 12px;
  color: #fff;
  background: #e58700;
  border-radius: 11px;
  font-size: clamp(24px, 2.3vw, 38px);
  font-weight: 900;
  line-height: 1;
}

.quiz-title h3 {
  margin: 0;
  color: #594c45;
  font-size: clamp(18px, 1.55vw, 28px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.04em;
}

.quiz-image {
  align-self: center;
  justify-self: center;
  width: clamp(128px, 16vw, 260px);
  max-height: clamp(138px, 17vw, 276px);
  object-fit: contain;
}

.quiz-image--rilakkuma {
  width: clamp(134.267516px, 13.210191vw, 220.89172px);
}

.quiz-image--theme {
  height: auto;
  max-width: 100%;
}

.quiz-image.quiz-image--scaled {
  --quiz-character-scale: 2.045454545;
  width: min(calc(var(--quiz-character-width) * var(--quiz-character-scale)), 100%);
  height: auto;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
}

.quiz-image--q1 {
  --quiz-character-width: calc(209px / 3);
}

.quiz-image--q2 {
  --quiz-character-width: calc(170px / 3);
}

.quiz-image--q3 {
  --quiz-character-width: calc(429px / 3);
}

.quiz-image--q4 {
  --quiz-character-width: calc(332px / 3);
}

.quiz-image--korilakkuma {
  width: clamp(110px, 11vw, 150px);
}

.quiz-image--kiiroitori {
  width: clamp(49.363057px, 4.856688vw, 81.210191px);
}

.quiz-image--chairoikoguma {
  width: clamp(65.949045px, 6.488535vw, 108.496815px);
}

.quiz-image--group {
  width: clamp(231.019108px, 22.729299vw, 380.063694px);
}


.quiz-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1vw, 16px);
}

.quiz-options label {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: clamp(40px, 3.1vw, 55px);
  padding: 6px clamp(14px, 1.6vw, 28px);
  color: #5b514d;
  background: #fff;
  border: 2px solid #d8b464;
  border-radius: 999px;
  font-size: clamp(17px, 1.45vw, 26px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.06em;
}

.quiz-options input {
  appearance: none;
  width: clamp(20px, 1.8vw, 30px);
  height: clamp(20px, 1.8vw, 30px);
  margin: 0 clamp(14px, 1.4vw, 22px) 0 0;
  display: inline-grid;
  place-items: center;
  background: #fffefa;
  border: 2px solid #d79a2f;
  border-radius: 50%;
  flex: 0 0 auto;
}

.quiz-options input::before {
  content: "";
  width: 58%;
  height: 58%;
  border-radius: 50%;
  background: #e78a00;
  transform: scale(0);
  transition: transform 0.12s ease;
}

.quiz-options input:checked {
  border-color: #7c4b18;
  background: #fff6d6;
}

.quiz-options input:checked::before {
  transform: scale(1);
}

.quiz-bottom {
  width: min(100%, 1840px);
  margin: clamp(48px, 4.4vw, 82px) auto 0;
  position: relative;
  min-height: clamp(400px, 30vw, 580px);
  padding: clamp(26px, 2.8vw, 52px) 0 clamp(200px, 14vw, 280px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.quiz-bottom-character {
  width: clamp(180px, 22vw, 434px);
  position: absolute;
  bottom: clamp(10px, 1.2vw, 24px);
  left: 0;
  z-index: 0;
}

.answer-button {
  position: relative;
  z-index: 1;
  width: min(58vw, 850px);
  min-height: clamp(90px, 8vw, 138px);
  padding: clamp(12px, 1.5vw, 24px) clamp(24px, 3vw, 58px);
  display: grid;
  grid-template-columns: clamp(94px, 9vw, 154px) minmax(0, 1fr) clamp(46px, 4.8vw, 78px);
  gap: clamp(14px, 2vw, 34px);
  align-items: center;
  color: #fff;
  background: linear-gradient(180deg, #f4a100 0%, #de7900 100%);
  border: 5px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  box-shadow: 0 6px 0 rgba(167, 97, 0, 0.18);
  font-size: clamp(34px, 3.8vw, 68px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.answer-button > span:nth-child(2) {
  white-space: nowrap;
  text-align: center;
}

.answer-button:hover,
.answer-button:focus-visible {
  transform: translateY(-3px);
  filter: brightness(1.03);
}

.answer-face {
  display: grid;
  place-items: center;
  width: clamp(94px, 9vw, 154px);
}

.answer-face img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.answer-arrow {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(46px, 4.8vw, 78px);
  aspect-ratio: 1;
  color: #d78311;
  background: #fff;
  border-radius: 50%;
  font-size: 0;
  line-height: 1;
  letter-spacing: 0;
}

.answer-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34%;
  height: clamp(4px, 0.55vw, 8px);
  background: currentColor;
  border-radius: 999px;
  transform: translate(-56%, -50%) rotate(45deg);
  transform-origin: calc(100% - 1px) 50%;
}

.answer-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34%;
  height: clamp(4px, 0.55vw, 8px);
  background: currentColor;
  border-radius: 999px;
  transform: translate(-56%, -50%) rotate(-45deg);
  transform-origin: calc(100% - 1px) 50%;
}

.answer-page {
  background: #fff8ed;
  color: #5c3f2a;
}

.answer-main {
  overflow: hidden;
  background:
    radial-gradient(circle, rgba(238, 186, 125, 0.25) 1.8px, transparent 2.4px) 0 0 / 28px 28px,
    linear-gradient(180deg, #fffaf1 0%, #fff7e9 100%);
}

.answer-result-section {
  padding: clamp(82px, 8vw, 144px) clamp(20px, 5.8vw, 112px) 0;
}

.answer-result-panel,
.answer-check-panel {
  width: min(100%, 1460px);
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.93);
  border: 3px solid #fde5bf;
  border-radius: clamp(28px, 3.4vw, 46px);
  box-shadow: 0 15px 36px rgba(170, 114, 42, 0.1);
}

.answer-result-panel {
  position: relative;
  padding: clamp(42px, 5vw, 84px) clamp(28px, 5vw, 92px)
    clamp(52px, 5.2vw, 92px);
}

.answer-result-character {
  position: relative;
  z-index: 6;
  width: clamp(239.312102px, 23.545223vw, 393.707006px);
  margin: clamp(-100px, -7vw, -54px) auto 14px;
}

.answer-title {
  margin: 0 0 clamp(22px, 2.4vw, 40px);
  color: #6f3f18;
  text-align: center;
  font-size: clamp(38px, 4vw, 70px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.06em;
}

.answer-score-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 1.4vw, 24px);
  margin-bottom: clamp(34px, 3.8vw, 66px);
}

.answer-score-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: clamp(44px, 3.6vw, 62px);
  padding: 0 clamp(20px, 2.4vw, 36px);
  color: #715030;
  background: rgba(255, 255, 255, 0.88);
  border: 3px solid #fde1ba;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(186, 121, 36, 0.08);
  font-size: clamp(15px, 1.3vw, 22px);
  font-weight: 900;
  line-height: 1.1;
}

.answer-score-pill strong {
  color: #f09100;
  font-size: clamp(24px, 2.2vw, 38px);
  line-height: 0.9;
}

.answer-score-pill--percent strong {
  color: #8277ec;
}

.answer-score-pill--rank {
  background: #fff7e8;
}

.answer-share-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
  gap: clamp(34px, 4vw, 72px);
  align-items: center;
}

.answer-campaign-notice {
  margin: 0 0 clamp(18px, 2vw, 28px);
  padding: clamp(16px, 1.8vw, 24px);
  display: grid;
  gap: 5px;
  color: #744d1d;
  background: #fff3bf;
  border: 3px solid #f0d17b;
  border-radius: 16px;
  line-height: 1.55;
}

.answer-campaign-notice strong {
  color: #c45c28;
  font-size: clamp(15px, 1.2vw, 19px);
  font-weight: 900;
}

.answer-campaign-notice span {
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 700;
}

.answer-share-label {
  margin: 0 0 14px;
  color: #4f3a2a;
  font-size: clamp(17px, 1.3vw, 23px);
  font-weight: 900;
}

.answer-share-text {
  min-height: clamp(136px, 11vw, 192px);
  margin: 0 0 clamp(22px, 2.4vw, 40px);
  padding: clamp(22px, 2.5vw, 42px);
  display: flex;
  align-items: center;
  color: #5a4638;
  background: #fff;
  border: 3px solid #f9ddb9;
  border-radius: 20px;
  font-size: clamp(17px, 1.5vw, 26px);
  font-weight: 900;
  line-height: 1.75;
  white-space: pre-line;
}

.answer-share-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 1.4vw, 22px);
}

.answer-share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(48px, 4.2vw, 68px);
  padding: 8px 16px;
  border: 3px solid #f7dbb7;
  border-radius: 999px;
  box-shadow: 0 5px 0 rgba(158, 100, 24, 0.12);
  font-size: clamp(14px, 1.2vw, 20px);
  font-weight: 900;
  line-height: 1.1;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.answer-share-button:hover,
.answer-share-button:focus-visible {
  transform: translateY(-3px);
  filter: brightness(1.03);
}

.answer-share-button--x {
  color: #fff;
  background: linear-gradient(180deg, #f4a100 0%, #de7900 100%);
  border-color: rgba(255, 255, 255, 0.92);
}

.answer-share-card {
  padding: clamp(14px, 1.8vw, 26px);
  background: #fff;
  border: 4px solid #ffebcf;
  border-radius: 24px;
  box-shadow: 0 10px 22px rgba(180, 116, 35, 0.12);
}

.answer-share-card img {
  width: 100%;
  border-radius: 16px;
}

.answer-check-section {
  padding: clamp(28px, 3vw, 54px) clamp(20px, 5.8vw, 112px)
    clamp(42px, 4.4vw, 78px);
}

.answer-check-panel {
  position: relative;
  padding: clamp(44px, 5vw, 82px) clamp(28px, 5vw, 88px)
    clamp(46px, 5vw, 88px);
}

.answer-check-character {
  position: relative;
  z-index: 6;
  width: clamp(238.522293px, 23.467516vw, 392.407643px);
  margin: clamp(-76px, -5vw, -34px) auto 10px;
}

.answer-check-title {
  margin: 0 0 clamp(30px, 3.4vw, 58px);
  color: #6f3f18;
  text-align: center;
  font-size: clamp(36px, 3.6vw, 64px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.06em;
}

.answer-list {
  display: grid;
  gap: clamp(16px, 1.8vw, 26px);
}

.answer-review-card {
  display: grid;
  grid-template-columns: clamp(76px, 7.5vw, 118px) minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 40px);
  align-items: center;
  padding: clamp(18px, 2vw, 32px);
  background: rgba(255, 255, 255, 0.96);
  border: 3px solid #fbe0bd;
  border-radius: 22px;
}

.answer-review-number {
  display: grid;
  place-items: center;
  width: clamp(72px, 7vw, 110px);
  aspect-ratio: 1;
  color: #df8400;
  background: #fff4d7;
  border: 3px solid #ffedc9;
  border-radius: 50%;
  font-size: clamp(30px, 3.2vw, 54px);
  font-weight: 900;
  line-height: 1;
}

.answer-review-body {
  min-width: 0;
}

.answer-review-body h3 {
  margin: 0 0 clamp(14px, 1.5vw, 24px);
  color: #5c4634;
  font-size: clamp(18px, 1.55vw, 27px);
  font-weight: 900;
  line-height: 1.45;
}

.answer-comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
  gap: clamp(16px, 2.2vw, 36px);
  margin-bottom: clamp(12px, 1.5vw, 22px);
}

.answer-user,
.answer-correct {
  min-height: clamp(58px, 5vw, 86px);
  padding: 12px clamp(16px, 2vw, 32px);
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fffaf0;
  border-radius: 16px;
}

.answer-correct {
  background: #fff7e4;
}

.answer-status {
  display: grid;
  place-items: center;
  width: clamp(30px, 2.8vw, 44px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  color: #fff;
  background: #abb2bd;
  border-radius: 50%;
  font-size: clamp(18px, 1.8vw, 28px);
  font-weight: 900;
  line-height: 1;
}

.is-correct .answer-status {
  background: #24c34a;
}

.is-incorrect .answer-status {
  background: #ff9b16;
}

.answer-mini-label {
  display: block;
  margin-bottom: 2px;
  color: #6a5a4d;
  font-size: clamp(12px, 1vw, 16px);
  font-weight: 900;
  line-height: 1.2;
}

.answer-user strong,
.answer-correct strong {
  display: block;
  color: #22a744;
  font-size: clamp(16px, 1.45vw, 24px);
  font-weight: 900;
  line-height: 1.35;
}

.answer-correct strong {
  color: #f08b00;
}

.is-incorrect .answer-user strong {
  color: #cc6e00;
}

.is-direct .answer-user strong {
  color: #718092;
}

.answer-option-image {
  display: block;
  width: 96px;
  height: 96px;
  max-width: 100%;
  object-fit: contain;
  flex-shrink: 0;
  margin-top: 8px;
}

.answer-correct:has(.answer-option-image) {
  flex-wrap: wrap;
}

.quiz-card.quiz-card--image-options {
  grid-template-rows: auto auto 1fr;
  gap: 16px;
}

.quiz-image-instruction {
  margin: 0;
  color: #766052;
  font-size: 14px;
}

.quiz-options.quiz-options--images {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.quiz-options--images label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  cursor: pointer;
  min-width: 0;
}

.quiz-options--images label:has(input:checked) {
  background: #fff0be;
  border-color: #a66000;
}

.quiz-options--images label:focus-within {
  outline: 3px solid #a66000;
  outline-offset: 3px;
}

.quiz-options--images input {
  margin: 0;
}

.quiz-options--images img {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100px;
  height: 100px;
  max-width: 100%;
  object-fit: contain;
}

@media (max-width: 900px) {
  .answer-share-layout,
  .answer-comparison {
    grid-template-columns: 1fr;
  }

  .answer-result-panel,
  .answer-check-panel {
    padding-right: clamp(18px, 5vw, 34px);
    padding-left: clamp(18px, 5vw, 34px);
  }

  .answer-share-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .answer-result-section {
    padding-top: 72px;
  }

  .answer-result-panel,
  .answer-check-panel {
    border-width: 2px;
    border-radius: 22px;
  }

  .answer-result-panel,
  .answer-check-panel {
    padding-right: 12px;
    padding-left: 12px;
  }

  .answer-result-character {
    width: 136px;
    margin-top: -74px;
  }

  .answer-title,
  .answer-check-title {
    font-size: clamp(29px, 8vw, 38px);
    letter-spacing: 0.03em;
  }

  .answer-score-pills {
    margin-bottom: 20px;
  }

  .answer-share-layout {
    gap: 20px;
  }

  .answer-share-text {
    min-height: 122px;
    padding: 18px;
    font-size: 15px;
    border-radius: 16px;
  }

  .answer-campaign-notice {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding: 18px 10px;
    justify-items: center;
    text-align: center;
    background: linear-gradient(180deg, #fff6c9 0%, #ffe89c 100%);
    border: 3px solid #eabd4c;
    border-radius: 18px;
    box-shadow: 0 5px 0 rgba(194, 117, 24, 0.14);
  }

  .answer-campaign-notice strong {
    display: block;
    color: #c94f1d;
    font-size: clamp(13px, 4vw, 17px);
    line-height: 1.4;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .answer-campaign-notice span {
    display: none;
  }

  .answer-share-card {
    order: -1;
    width: min(96%, 420px);
    margin: 0 auto;
    justify-self: center;
  }

  .answer-share-button {
    min-height: 48px;
    font-size: 15px;
  }

  .answer-check-section {
    padding-top: 28px;
  }

  .answer-check-character {
    width: 150px;
    margin-top: -56px;
  }

  .answer-review-card {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 12px 16px;
    border-width: 2px;
    border-radius: 18px;
  }

  .answer-review-number {
    width: 66px;
    justify-self: center;
    font-size: 28px;
  }

  .answer-review-body h3 {
    text-align: center;
    font-size: 15px;
  }

  .answer-user,
  .answer-correct {
    min-height: 54px;
    padding: 10px 12px;
    border-radius: 12px;
  }

  .answer-user strong,
  .answer-correct strong {
    font-size: 15px;
  }

}

.contents-section,
.recommend-section {
  background: var(--page-bg);
  padding-right: clamp(20px, 5.8vw, 112px);
  padding-left: clamp(20px, 5.8vw, 112px);
}

.contents-section {
  padding-top: clamp(64px, 5.2vw, 96px);
  padding-bottom: clamp(58px, 4.8vw, 88px);
}

.recommend-section {
  padding-top: clamp(10px, 1.3vw, 26px);
  padding-bottom: clamp(82px, 6.9vw, 132px);
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.1vw, 34px);
  margin-bottom: clamp(44px, 4.6vw, 86px);
  text-align: center;
}

.section-heading img {
  height: auto;
}

.contents-section .section-heading img {
  width: clamp(62px, 6.1vw, 102px);
}

.recommend-section .section-heading img {
  width: clamp(43.43949px, 4.273885vw, 71.464968px);
}

.section-heading h2 {
  margin: 0;
  color: #8054a1;
  font-size: clamp(36px, 3.8vw, 68px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.03em;
}

.contents-section .section-heading {
  margin-bottom: clamp(28px, 2.8vw, 52px);
}

.contents-layout {
  width: min(100%, 1556px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(420px, 573px) minmax(0, 1fr);
  gap: clamp(30px, 3vw, 54px);
  align-items: stretch;
}

.contents-banner-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 1.8vw, 30px) clamp(24px, 2.4vw, 44px);
  align-content: start;
}

.banner-card {
  display: block;
  border-radius: 22px;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.banner-card img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 16px rgba(96, 61, 88, 0.08));
}

.banner-card:hover,
.banner-card:focus-visible {
  transform: translateY(-4px);
  filter: brightness(1.02);
}

.recommend-grid {
  width: min(100%, 1556px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(46px, 4.4vw, 82px) clamp(52px, 5vw, 88px);
}

.recommend-grid .banner-card:nth-child(n + 4) {
  display: none;
}

.news-social-section {
  position: relative;
  padding: clamp(72px, 6vw, 116px) clamp(20px, 5.8vw, 112px)
    clamp(78px, 6vw, 118px);
  background: #fff;
}

.news-social-section::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 28px;
  background:
    radial-gradient(circle at 14px -4px, transparent 17px, #f8d5e3 18px) 0 0 / 28px 28px repeat-x;
}

.news-social-layout {
  width: min(100%, 1730px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(48px, 4.2vw, 84px);
  align-items: start;
}

.news-panel,
.x-panel {
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 247, 251, 0.96), rgba(255, 255, 255, 0.98));
  border-radius: 24px;
  box-shadow: 0 12px 26px rgba(170, 117, 150, 0.12);
}

.panel-heading {
  min-height: 110px;
  padding: 24px clamp(26px, 3vw, 52px) 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.panel-title {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.panel-title img {
  height: auto;
}

.news-panel .panel-title img {
  width: clamp(66.738854px, 6.566242vw, 109.796178px);
}

.x-panel .panel-title img {
  width: clamp(62px, 6.1vw, 102px);
}

.panel-title h2 {
  margin: 0;
  color: #8054a1;
  font-size: clamp(34px, 3.4vw, 58px);
  line-height: 1;
  letter-spacing: 0.03em;
}

.panel-link {
  color: #5f65b0;
  font-size: clamp(17px, 1.4vw, 24px);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
}

.news-list {
  max-height: clamp(360px, 28vw, 500px);
  margin: 0 24px 28px;
  padding: 16px clamp(18px, 2vw, 34px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #ef8fbd #ffe7f1;
  scrollbar-width: thin;
  background: #fff;
  border: 4px solid #ffe1ef;
  border-radius: 18px;
}

.news-list::-webkit-scrollbar {
  width: 12px;
}

.news-list::-webkit-scrollbar-track {
  background: #ffe7f1;
  border-radius: 999px;
}

.news-list::-webkit-scrollbar-thumb {
  background: #ef8fbd;
  border: 3px solid #ffe7f1;
  border-radius: 999px;
}

.news-list::-webkit-scrollbar-thumb:hover {
  background: #e56aa7;
}

.news-item {
  position: relative;
  display: grid;
  grid-template-columns: clamp(96px, 8vw, 146px) minmax(0, 1fr);
  gap: clamp(20px, 2vw, 34px);
  align-items: center;
  min-height: 180px;
  padding: 22px 4px;
  color: var(--text-blue);
}

.news-item + .news-item {
  border-top: 3px solid #f8d8e8;
}

.news-item--link {
  padding-right: clamp(44px, 4vw, 68px);
  border-radius: 14px;
  cursor: pointer;
  transition: background-color 180ms ease, transform 180ms ease;
}

.news-item--link::after {
  position: absolute;
  top: 50%;
  right: clamp(10px, 1.2vw, 20px);
  width: clamp(28px, 2.4vw, 38px);
  aspect-ratio: 1;
  content: "";
  background: #ef78ac url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 2.5 10.5 8 5 13.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 42% 42% no-repeat;
  border-radius: 50%;
  transform: translateY(-50%);
}

.news-item--link:hover {
  background: #fff6fa;
  transform: translateX(3px);
}

.news-item--link:hover .news-body h3 {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.news-item--link:focus-visible {
  outline: 3px solid #7259b8;
  outline-offset: 3px;
  background: #fff6fa;
}

.news-item > img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
}

.news-item--link > img {
  box-sizing: border-box;
  padding: clamp(3px, 0.35vw, 6px);
  object-fit: contain;
  background: #fffaf6;
  border: 1px solid #f7dce9;
}

#practice-campaign,
#practice-quiz {
  scroll-margin-top: 110px;
}

.news-body {
  min-width: 0;
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.news-meta time {
  color: #565a7a;
  font-size: clamp(15px, 1.2vw, 20px);
}

.news-tag {
  display: inline-grid;
  place-items: center;
  min-width: 86px;
  min-height: 30px;
  padding: 3px 12px;
  color: #fff;
  border-radius: 999px;
  font-size: clamp(12px, 1vw, 16px);
  line-height: 1;
}

.news-tag--pink {
  background: #f06ca9;
}

.news-tag--blue {
  background: #72bde9;
}

.news-tag--purple {
  background: #9470ca;
}

.news-body h3 {
  margin: 0 0 8px;
  color: #e94687;
  font-size: clamp(20px, 1.8vw, 29px);
  line-height: 1.35;
}

.news-body p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #4c4b62;
  font-size: clamp(14px, 1.15vw, 18px);
  font-weight: 500;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.news-arrow {
  color: #ff8cbd;
  font-family: var(--font-rounded);
  font-size: 42px;
  line-height: 1;
}

.x-embed {
  min-height: 610px;
  margin: 0 24px 28px;
  padding: clamp(22px, 2.5vw, 42px);
  background: #fff;
  border: 4px solid #ffe1ef;
  border-radius: 18px;
}

.twitter-tweet {
  max-width: 100% !important;
  margin: 0 auto !important;
  color: #1f2937;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 700;
  line-height: 1.7;
}

.twitter-tweet a {
  color: #2694e7;
  text-decoration: none;
}

.site-footer {
  padding: clamp(78px, 6vw, 116px) clamp(20px, 5.8vw, 112px)
    clamp(42px, 4vw, 72px);
  background: #f8d5e3;
}

.footer-inner {
  width: min(100%, 1530px);
  margin: 0 auto clamp(26px, 2.8vw, 48px);
  display: grid;
  grid-template-columns: minmax(250px, 420px) minmax(0, 1fr);
  gap: clamp(60px, 9vw, 180px);
  align-items: end;
}

.footer-logo {
  width: clamp(188px, 17vw, 292px);
  margin-bottom: 14px;
}

.footer-character {
  width: clamp(156px, 15vw, 236px);
}

.footer-info {
  color: #2e2b2c;
  font-size: clamp(18px, 1.8vw, 30px);
  font-weight: 500;
  line-height: 1.55;
}

.footer-info p {
  margin: 0;
}

.copyright {
  margin: 0;
  color: #2f2b2c;
  text-align: center;
  font-family: var(--font-rounded);
  font-size: clamp(17px, 1.8vw, 28px);
  font-weight: 700;
  line-height: 1.3;
}

.fixed-entry-button {
  position: fixed;
  right: clamp(16px, 3vw, 54px);
  bottom: clamp(16px, 3vw, 48px);
  z-index: 20;
  display: block;
  width: clamp(112px, 13vw, 218px);
  border-radius: 50%;
  filter: drop-shadow(0 8px 15px rgba(68, 96, 170, 0.22));
  transition: transform 0.2s ease, filter 0.2s ease;
}

.fixed-entry-button:hover,
.fixed-entry-button:focus-visible {
  transform: translateY(-4px);
  filter: drop-shadow(0 12px 18px rgba(68, 96, 170, 0.28)) brightness(1.02);
}

.fixed-entry-button img {
  width: 100%;
  height: auto;
}

@media (max-width: 1400px) {
  .top-entry {
    padding-top: 46px;
    padding-bottom: 48px;
  }

  .date-venue-card {
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 32px;
    padding-right: 124px;
  }

  .fee-card li {
    grid-template-columns: 74px 26px minmax(0, 1fr);
    padding-left: 38px;
  }

  .access-card h4 {
    min-height: 138px;
  }

  .contents-layout,
  .recommend-grid {
    width: min(100%, 1180px);
  }

  .contents-layout {
    grid-template-columns: minmax(360px, 470px) minmax(0, 1fr);
  }

  .contents-banner-grid {
    gap: 24px 30px;
  }

  .recommend-grid {
    gap: 34px;
  }

  .news-social-layout {
    width: min(100%, 1180px);
    gap: 34px;
  }

  .official-product-grid {
    width: min(100%, 1080px);
  }

  .quiz-grid {
    gap: 34px 54px;
  }

  .answer-button {
    letter-spacing: 0.1em;
  }

  .news-list,
  .x-embed {
    margin-right: 18px;
    margin-left: 18px;
  }

  .news-item {
    min-height: 148px;
  }
}

@media (min-width: 1181px) and (max-width: 1600px) {
  .fee-grid {
    gap: clamp(24px, 2.2vw, 34px);
  }

  .fee-card {
    padding-right: clamp(22px, 2.5vw, 38px);
    padding-left: clamp(22px, 2.5vw, 38px);
  }

  .fee-card li {
    grid-template-columns: 64px 20px minmax(0, 1fr);
    padding-left: 30px;
    font-size: 32px;
    letter-spacing: 0;
  }

  .fee-card li strong {
    font-size: 30px;
    letter-spacing: 0;
  }

  .tokuten-panel--goods {
    padding-right: clamp(38px, 4vw, 70px);
    padding-left: clamp(38px, 4vw, 70px);
  }

  .tokuten-goods-layout {
    width: min(100%, 1320px);
    grid-template-columns: minmax(260px, 470px) minmax(0, 1fr);
    gap: clamp(36px, 4vw, 64px);
  }

  .tokuten-goods-main {
    width: min(100%, 470px);
  }


  .tokuten-coming-button {
    width: min(100%, 560px);
    font-size: 34px;
    letter-spacing: 0;
  }

  .bookcafe-info-grid {
    gap: clamp(22px, 2.2vw, 36px);
  }

  .bookcafe-info-card {
    padding-right: clamp(22px, 2.4vw, 42px);
    padding-left: clamp(22px, 2.4vw, 42px);
  }

}

@media (max-width: 1180px) {
  .site-header {
    position: sticky;
    top: 0;
  }

  .header-inner {
    grid-template-columns: 1fr auto auto;
    min-height: 78px;
    padding: 10px 14px;
    gap: 12px;
  }

  .header-logo {
    width: min(52vw, 250px);
  }

  .menu-button {
    position: relative;
    top: auto;
    right: auto;
    z-index: auto;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 10px;
    background: #fff;
    border: 2px solid #f2aeca;
    border-radius: 14px;
    box-shadow: 0 3px 8px rgba(215, 102, 155, 0.08);
    transition:
      border-color 260ms ease,
      box-shadow 320ms ease;
  }

  .menu-button::before {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(135deg, #fff0f7 0%, #eef8ff 100%);
    border-radius: inherit;
    opacity: 0;
    transition: opacity 260ms ease;
    pointer-events: none;
  }

  .menu-button span:not(.visually-hidden) {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 22px;
    height: 3px;
    background: #e95798;
    border-radius: 999px;
    transform-origin: center;
    transition:
      opacity 180ms ease,
      transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
      background-color 260ms ease;
  }

  .menu-button span:not(.visually-hidden):nth-child(1) {
    transform: translate(-50%, calc(-50% - 7px));
  }

  .menu-button span:not(.visually-hidden):nth-child(2) {
    transform: translate(-50%, -50%);
  }

  .menu-button span:not(.visually-hidden):nth-child(3) {
    transform: translate(-50%, calc(-50% + 7px));
  }

  body.nav-open .menu-button {
    border-color: #eb8fbc;
    box-shadow:
      0 5px 14px rgba(215, 102, 155, 0.18),
      0 0 0 3px rgba(120, 191, 244, 0.1);
  }

  body.nav-open .menu-button::before {
    opacity: 1;
  }

  body.nav-open .menu-button span:not(.visually-hidden) {
    background: #d95792;
  }

  body.nav-open .menu-button span:not(.visually-hidden):nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  body.nav-open .menu-button span:not(.visually-hidden):nth-child(2) {
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(0.2);
  }

  body.nav-open .menu-button span:not(.visually-hidden):nth-child(3) {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .global-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    max-height: calc(100vh - 78px);
    padding: 12px 14px 16px;
    background: linear-gradient(
      180deg,
      rgba(255, 250, 253, 0.985) 0%,
      rgba(244, 250, 255, 0.985) 100%
    );
    border-bottom: 3px solid #f5c8d9;
    border-radius: 0 0 22px 22px;
    box-shadow: 0 10px 22px rgba(91, 61, 86, 0.13);
    overflow-y: auto;
    justify-content: stretch;
    visibility: hidden;
    opacity: 0;
    transform: translate3d(0, -12px, 0) scaleY(0.96);
    transform-origin: top center;
    pointer-events: none;
    transition:
      opacity 180ms ease,
      transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 300ms;
  }

  body.nav-open .global-nav {
    visibility: visible;
    opacity: 1;
    transform: translate3d(0, 0, 0) scaleY(1);
    pointer-events: auto;
    transition:
      opacity 220ms ease,
      transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0s;
  }

  .nav-link {
    justify-content: flex-start;
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    background: #fff7fb;
    border: 2px solid #f8d6e6;
    border-radius: 12px;
    box-shadow: 0 3px 0 rgba(238, 172, 205, 0.16);
    font-size: 13px;
  }

  body.nav-open .global-nav .nav-link {
    animation: mobile-nav-item-pop 440ms cubic-bezier(0.18, 0.89, 0.32, 1.18) both;
  }

  body.nav-open .global-nav .nav-link:nth-child(1) {
    animation-delay: 45ms;
  }

  body.nav-open .global-nav .nav-link:nth-child(2) {
    animation-delay: 90ms;
  }

  body.nav-open .global-nav .nav-link:nth-child(3) {
    animation-delay: 135ms;
  }

  body.nav-open .global-nav .nav-link:nth-child(4) {
    animation-delay: 180ms;
  }

  body.nav-open .global-nav .nav-link:nth-child(5) {
    animation-delay: 225ms;
  }

  .nav-link--active,
  .nav-link--home {
    flex-direction: row;
    gap: 8px;
  }

  .nav-link--active {
    padding-left: 26px;
    color: var(--text-brown);
    background: linear-gradient(90deg, #ffedf5 0%, #fff7fb 100%);
    border-color: #f2aeca;
    box-shadow: 0 3px 0 rgba(238, 172, 205, 0.22);
    font-weight: 800;
  }

  .nav-link--active::after {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 10px;
    width: 5px;
    height: 24px;
    background: linear-gradient(180deg, #ef5a9b 0%, #78bff4 100%);
    border-radius: 999px;
    transform: translateY(-50%);
  }

  .header-apply {
    width: auto;
    min-height: 48px;
    padding: 10px 14px;
    gap: 7px;
    font-size: 12px;
    letter-spacing: 0.03em;
  }

  @keyframes mobile-nav-item-pop {
    0% {
      opacity: 0;
      transform: translate3d(0, -9px, 0) scale(0.985);
    }
    68% {
      opacity: 1;
      transform: translate3d(0, 2px, 0) scale(1.008, 0.992);
    }
    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }
  }

  .circle-arrow {
    --chevron-size: 6px;
    --chevron-stroke: 2px;
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 980px) {
  .answer-result-character {
    width: 223.872611px;
  }

  .answer-check-character {
    width: 223.133758px;
  }

  .hero img {
    min-height: 300px;
  }

  .top-entry,
  .exam-section,
  .choose-section,
  .bookcafe-info-section,
  .bookcafe-menu-section,
  .bookcafe-store-section,
  .practice-scope,
  .official-text-section,
  .practice-quiz-section,
  .contents-section,
  .recommend-section,
  .news-social-section,
  .site-footer {
    padding-right: 12px;
    padding-left: 12px;
  }

  .entry-buttons {
    gap: 18px;
  }

  .practice-hero img {
    min-height: 300px;
  }

  .event-hero img {
    min-height: 300px;
  }

  .bookcafe-info-grid {
    width: min(100%, 650px);
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .bookcafe-info-card {
    min-height: 240px;
    padding: 28px 22px 34px;
    row-gap: 18px;
    border-width: 3px;
    border-radius: 28px;
  }

  .bookcafe-menu-panel {
    width: min(100%, 650px);
    padding: 34px 22px 38px;
    border-width: 3px;
    border-radius: 28px;
  }

  .bookcafe-menu-grid {
    gap: 14px;
  }

  .bookcafe-store-section img {
    width: min(100%, 650px);
    border-radius: 28px;
  }

  .event-section {
    padding-right: 12px;
    padding-left: 12px;
  }

  .event-panel {
    padding: 34px 22px 38px;
    border-width: 3px;
    border-radius: 28px;
  }

  .event-heading {
    gap: 14px;
  }

  .event-heading h2 {
    font-size: clamp(28px, 5.7vw, 48px);
  }

  .event-heading .event-shop-title {
    flex-direction: column;
    align-items: center;
    gap: 0;
    font-size: clamp(24px, 3.7vw, 36px);
    line-height: 1.2;
    white-space: normal;
  }

  .event-heading--pink img {
    width: 223.872611px;
  }

  .event-heading--blue img {
    width: 123.019108px;
  }

  .event-heading--purple img {
    width: 123.388535px;
  }

  .event-lead {
    margin-bottom: 24px;
    font-size: clamp(15px, 3vw, 22px);
  }

  .event-shop-hours {
    width: min(100%, 520px);
    margin-bottom: 28px;
    padding: 14px 24px;
    gap: 18px;
    border-width: 2px;
  }

  .photo-spot-grid {
    width: min(100%, 650px);
    margin: 0 auto;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .photo-spot-card {
    padding: 30px 22px 82px;
    border-width: 3px;
    border-radius: 24px;
  }

  .access-footer-character {
    width: 161.43949px;
    margin-top: 18px;
  }

  .practice-panel {
    padding: 34px 22px 38px;
    border-width: 3px;
    border-radius: 28px;
  }

  .scope-card {
    grid-template-columns: 62.433121px minmax(0, 1fr);
    padding: 24px 22px;
  }

  .official-text-section .practice-heading img {
    width: 124.496815px;
  }

  .practice-campaign-character {
    width: 223.872611px;
  }

  .official-product-grid {
    grid-template-columns: 1fr;
    width: min(100%, 760px);
    margin: 0 auto;
    gap: 0;
  }

  .official-product-card {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 22px;
  }

  .official-product-image {
    height: min(52vw, 360px);
  }

  .official-product-body {
    grid-template-rows: auto;
    gap: 14px;
  }

  .official-product-body h3,
  .official-product-lead {
    text-align: center;
  }

  .official-product-footer {
    margin-top: 4px;
  }

  .quiz-grid {
    width: min(100%, 650px);
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .quiz-card {
    min-height: 0;
  }

  .quiz-image--rilakkuma {
    width: 125.605096px;
  }

  .quiz-image--korilakkuma {
    width: 62.433121px;
  }

  .quiz-image--kiiroitori {
    width: 46.178344px;
  }

  .quiz-image--chairoikoguma {
    width: 61.694268px;
  }

  .quiz-image--group {
    width: 216.11465px;
  }

  .quiz-bottom {
    width: min(100%, 650px);
    min-height: 290px;
    padding-bottom: 145px;
    gap: 10px;
  }

  .exam-card {
    padding-right: 22px;
    padding-left: 22px;
  }

  .date-venue-card {
    min-height: 0;
    grid-template-columns: 134px minmax(0, 1fr);
    gap: 18px;
    row-gap: 16px;
    padding: 24px 78px 24px 24px;
    border-width: 3px;
    border-radius: 28px;
  }

  .date-venue-labels {
    display: contents;
  }

  .date-venue-labels span {
    min-height: 48px;
  }

  .date-row,
  .venue-row {
    column-gap: 18px;
  }

  .date-venue-icon {
    right: 18px;
    bottom: 18px;
  }

  .fee-grid {
    gap: 18px;
  }

  .fee-card {
    min-height: 0;
    padding: 26px 18px 38px;
    border-width: 3px;
    border-radius: 28px;
  }

  .fee-card h3 {
    min-height: 56px;
    margin-bottom: 30px;
  }

  .fee-card ul {
    gap: 24px;
  }

  .fee-card li {
    grid-template-columns: 50px 20px minmax(0, 1fr);
    padding-left: 26px;
  }

  .fee-card li strong {
    white-space: normal;
  }

  .access-panel {
    padding: 66px 16px 24px;
    border-width: 3px;
    border-radius: 30px;
  }

  .access-toggle {
    top: -32px;
    width: min(520px, 70%);
    min-height: 66px;
    grid-template-columns: minmax(0, 1fr) 38px;
    padding: 6px 14px;
    gap: 8px;
  }

  .access-toggle-text {
    font-size: clamp(24px, 5.2vw, 42px);
    letter-spacing: 0.04em;
  }

  .access-toggle-icon {
    width: 34px;
    border-width: 3px;
  }

  .access-grid {
    gap: 14px;
  }

  .access-card {
    padding: 24px 12px 24px;
    border-width: 3px;
    border-radius: 24px;
  }

  .line-name {
    min-height: 50px;
    margin-bottom: 18px;
  }

  .access-card h4 {
    min-height: 110px;
    font-size: clamp(16px, 2.5vw, 24px);
    line-height: 1.28;
  }

  .nowrap {
    white-space: normal;
  }

  .access-card p {
    margin-top: 18px;
    padding-top: 20px;
  }

  .contents-section {
    padding-top: 46px;
    padding-bottom: 44px;
  }

  .recommend-section {
    padding-top: 0;
    padding-bottom: 72px;
  }

  .section-heading {
    margin-bottom: 34px;
    gap: 14px;
  }

  .contents-section .section-heading {
    margin-bottom: 24px;
  }

  .choose-character {
    width: 216.11465px;
  }

  .contents-section .section-heading img {
    width: 58px;
  }

  .recommend-section .section-heading img {
    width: 40.636943px;
  }

  .section-heading h2 {
    font-size: clamp(28px, 5.7vw, 48px);
  }

  .contents-layout {
    grid-template-columns: 1fr;
    width: min(100%, 600px);
    gap: 16px;
  }

  .contents-banner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .recommend-grid {
    width: min(100%, 650px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .recommend-grid .banner-card:nth-child(4) {
    display: block;
  }

  .banner-card {
    border-radius: 14px;
  }

  .news-social-section {
    padding-top: 54px;
    padding-bottom: 72px;
  }

  .news-social-layout {
    width: min(100%, 650px);
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .panel-heading {
    min-height: 109px;
    padding: 16px 20px 10px;
  }

  .panel-title {
    gap: 10px;
  }

  .news-panel .panel-title img {
    width: 62.433121px;
  }

  .x-panel .panel-title img {
    width: 58px;
  }

  .panel-title h2 {
    font-size: clamp(28px, 8vw, 42px);
  }

  .panel-link {
    font-size: 14px;
  }

  .news-list,
  .x-embed {
    margin: 0 12px 14px;
    border-width: 3px;
  }

  .news-list {
    max-height: 320px;
  }

  .news-item {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 12px;
    min-height: 118px;
    padding: 14px 0;
  }

  .news-meta {
    gap: 8px;
    margin-bottom: 6px;
  }

  .news-tag {
    min-width: 64px;
    min-height: 22px;
    padding: 2px 8px;
  }

  .news-body h3 {
    margin-bottom: 4px;
  }

  .news-body p {
    -webkit-line-clamp: 1;
  }

  .news-arrow {
    font-size: 28px;
  }

  .x-embed {
    min-height: 360px;
    padding: 18px;
  }

  .footer-inner {
    width: min(100%, 650px);
    grid-template-columns: 1fr;
    gap: 28px;
    justify-items: center;
    text-align: center;
  }

  .footer-logo,
  .footer-character {
    margin-right: auto;
    margin-left: auto;
  }

  .footer-info {
    font-size: clamp(16px, 4vw, 22px);
  }
}

@media (max-width: 640px) {
  .answer-result-character {
    width: 162.11465px;
  }

  .answer-check-character {
    width: 161.579618px;
  }

  .site-header {
    transition:
      background-color 560ms ease,
      border-color 560ms ease,
      box-shadow 560ms ease;
  }

  .site-header::after {
    position: absolute;
    right: 18%;
    bottom: -3px;
    left: 18%;
    height: 4px;
    content: "";
    background: linear-gradient(90deg, #f7c8dc, #ef72aa, #f5bd76, #f7c8dc);
    border-radius: 999px;
    opacity: 0;
    transform: scaleX(0.45);
    transform-origin: center;
    transition:
      opacity 480ms ease,
      transform 680ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }

  .header-inner {
    position: relative;
    grid-template-columns: 1fr auto;
    transition:
      min-height 620ms cubic-bezier(0.22, 1, 0.36, 1),
      padding 620ms cubic-bezier(0.22, 1, 0.36, 1),
      gap 620ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .header-logo {
    transform-origin: left center;
    transition: width 620ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .header-logo img {
    transition: filter 520ms ease;
  }

  .menu-button {
    transform-origin: center;
    transition:
      width 620ms cubic-bezier(0.22, 1, 0.36, 1),
      height 620ms cubic-bezier(0.22, 1, 0.36, 1),
      padding 620ms cubic-bezier(0.22, 1, 0.36, 1),
      border-radius 620ms cubic-bezier(0.22, 1, 0.36, 1),
      border-color 260ms ease,
      box-shadow 520ms ease;
  }

  body.header-compact .site-header {
    background: rgba(255, 253, 249, 0.985);
    border-bottom-color: #efabc9;
    box-shadow: 0 7px 20px rgba(102, 72, 91, 0.14);
  }

  body.header-compact .site-header::after {
    opacity: 0.88;
    transform: scaleX(1);
  }

  body.header-compact .header-inner {
    min-height: 58px;
    padding-top: 6px;
    padding-bottom: 6px;
    gap: 8px;
  }

  body.header-compact .header-logo {
    width: clamp(160px, 44vw, 190px);
    animation: sp-header-logo-settle 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  body.header-compact .header-logo img {
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.8));
  }

  body.header-compact .menu-button {
    width: 40px;
    height: 40px;
    padding: 8px;
    background: #fff9fc;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(215, 102, 155, 0.14);
    animation: sp-header-menu-settle 680ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  body.header-compact .global-nav {
    max-height: calc(100vh - 58px);
  }

  .header-apply {
    display: none;
  }

  .menu-button {
    grid-column: 2;
    grid-row: 1;
  }

  @keyframes sp-header-logo-settle {
    0% {
      transform: translate3d(0, -2px, 0) scale(0.975);
    }
    58% {
      transform: translate3d(0, 1px, 0) scale(1.018, 0.99);
    }
    82% {
      transform: translate3d(0, -0.5px, 0) scale(0.996, 1.004);
    }
    100% {
      transform: none;
    }
  }

  @keyframes sp-header-menu-settle {
    0% {
      transform: rotate(-2deg) scale(0.94);
    }
    55% {
      transform: rotate(1.2deg) scale(1.045, 0.97);
    }
    80% {
      transform: rotate(-0.4deg) scale(0.99, 1.01);
    }
    100% {
      transform: none;
    }
  }

  .hero img {
    min-height: 240px;
  }

  .practice-hero img {
    min-height: 230px;
  }

  .event-hero img {
    min-height: 230px;
  }

  .bookcafe-info-section {
    padding-top: 18px;
    padding-bottom: 20px;
  }

  .bookcafe-info-card {
    min-height: 0;
    padding: 22px 14px 24px;
    row-gap: 14px;
    border-width: 2px;
    border-radius: 22px;
  }

  .bookcafe-card-ribbon {
    width: min(78%, 260px);
  }

  .bookcafe-info-comingsoon {
    width: min(72%, 300px);
  }

  .bookcafe-menu-section {
    padding-top: 22px;
    padding-bottom: 24px;
  }

  .bookcafe-menu-panel {
    padding: 24px 12px 26px;
    border-width: 2px;
    border-radius: 22px;
  }

  .bookcafe-menu-heading {
    margin-bottom: 18px;
  }

  .bookcafe-menu-heading h2 {
    gap: 10px;
    margin-bottom: 8px;
    font-size: clamp(30px, 8vw, 42px);
  }

  .bookcafe-menu-heading h2::before,
  .bookcafe-menu-heading h2::after {
    width: 34px;
  }

  .bookcafe-menu-heading p {
    font-size: clamp(10px, 2.8vw, 13px);
    letter-spacing: 0.04em;
  }

  .bookcafe-menu-grid {
    grid-template-columns: 1fr;
  }

  .bookcafe-menu-grid img {
    border-radius: 16px;
  }

  .bookcafe-store-section {
    padding-top: 22px;
    padding-bottom: 30px;
  }

  .bookcafe-store-section img {
    border-radius: 18px;
  }

  .top-entry {
    padding-top: 26px;
    padding-bottom: 28px;
  }

  .entry-buttons {
    width: min(100%, 280px);
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .image-button__surface {
    box-shadow:
      0 4px 0 rgba(70, 54, 84, 0.25),
      0 6px 9px rgba(70, 54, 84, 0.13),
      inset 0 2px 0 rgba(255, 255, 255, 0.28);
  }

  .exam-section {
    padding-top: 20px;
  }

  .exam-card {
    padding: 36px 12px 40px;
    border-width: 2px;
    border-radius: 28px;
  }

  .exam-heading {
    margin-bottom: 24px;
  }

  .exam-heading img {
    width: 190px;
    margin-bottom: 12px;
  }

  .exam-heading p {
    font-size: 13px;
  }

  .date-venue-card {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px;
    row-gap: 10px;
    margin-bottom: 24px;
    padding: 14px 33px 14px 12px;
    border-radius: 20px;
  }

  .date-venue-labels {
    display: contents;
  }

  .date-venue-labels span {
    min-height: 34px;
    font-size: 12px;
  }

  .date-venue-content {
    gap: 10px;
  }

  .date-row {
    column-gap: 7px;
  }

  .date-row strong {
    font-size: clamp(24px, 8vw, 34px);
  }

  .date-row span {
    font-size: clamp(10px, 2.6vw, 13px);
  }

  .venue-row strong {
    font-size: clamp(20px, 5.8vw, 27px);
  }

  .venue-row span {
    font-size: clamp(10px, 2.8vw, 13px);
  }

  .date-venue-icon {
    right: 9px;
    bottom: 11px;
    width: 23px;
  }

  .fee-grid {
    gap: 9px;
    margin-bottom: 34px;
  }

  .fee-card {
    padding: 14px 5px 24px;
    border-width: 2px;
    border-radius: 18px;
  }

  .fee-card::after {
    right: 18px;
    bottom: 10px;
    left: 16px;
    height: 18px;
  }

  .fee-card h3 {
    min-height: 34px;
    margin-bottom: 18px;
    font-size: clamp(13px, 3.7vw, 18px);
  }

  .fee-card ul {
    gap: 15px;
  }

  .fee-card li {
    grid-template-columns: 30px 11px minmax(0, 1fr);
    padding-left: 14px;
    font-size: clamp(14px, 3.6vw, 18px);
  }

  .fee-card li::before {
    width: 8px;
    height: 8px;
  }

  .fee-card li strong {
    font-size: clamp(12px, 3.2vw, 16px);
  }

  .nowrap {
    white-space: normal;
  }

  .access-panel {
    padding: 46px 8px 14px;
    border-width: 2px;
    border-radius: 20px;
  }

  .access-toggle {
    top: -24px;
    width: 78%;
    min-height: 48px;
    grid-template-columns: minmax(0, 1fr) 28px;
    gap: 5px;
    padding: 4px 8px;
  }

  .access-toggle-text {
    font-size: clamp(17px, 5vw, 24px);
    letter-spacing: 0.03em;
  }

  .access-toggle-icon {
    width: 26px;
    border-width: 2px;
  }

  .access-toggle-icon::before,
  .access-toggle-icon::after {
    height: 3px;
  }

  .access-grid {
    gap: 6px;
  }

  .access-card {
    padding: 13px 5px 13px;
    border-width: 2px;
    border-radius: 14px;
  }

  .line-name {
    min-height: 34px;
    margin-bottom: 10px;
    font-size: clamp(10px, 2.7vw, 13px);
  }

  .access-card img {
    width: 33px;
    height: 33px;
    margin-bottom: 8px;
  }

  .access-card h4 {
    min-height: 66px;
    font-size: clamp(12px, 3.2vw, 16px);
    line-height: 1.25;
  }

  .access-card p {
    margin-top: 10px;
    padding-top: 12px;
    font-size: clamp(11px, 3vw, 14px);
  }

  .access-card p::before {
    border-top-width: 3px;
  }

  .access-footer-character {
    width: 116.904459px;
    margin-top: 14px;
  }

  .choose-section {
    grid-template-columns: 1fr;
    column-gap: 0;
    padding-top: 44px;
    padding-bottom: 46px;
  }

  .practice-scope,
  .official-text-section {
    padding-top: 22px;
  }

  .event-section {
    padding-top: 22px;
  }

  .event-photo-section {
    padding-top: 30px;
  }

  .official-text-section {
    padding-bottom: 30px;
  }

  .event-panel {
    padding: 22px 10px 24px;
    border-width: 2px;
    border-radius: 22px;
  }

  .event-heading {
    flex-direction: column;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
  }

  .event-heading img {
    width: 38px;
  }

  .event-heading--pink img {
    width: 162.11465px;
  }

  .event-heading--blue img {
    width: 89.082803px;
  }

  .event-heading--purple img {
    width: 89.350318px;
  }

  .event-heading h2 {
    font-size: clamp(24px, 7vw, 32px);
    letter-spacing: 0.01em;
  }

  .event-heading .event-shop-title {
    font-size: clamp(19px, 6.2vw, 25px);
  }

  .event-lead {
    margin-bottom: 18px;
    font-size: clamp(12px, 3.5vw, 15px);
    letter-spacing: 0.03em;
  }

  .event-panel--shop .event-lead {
    margin-bottom: 14px;
  }

  .event-shop-hours {
    flex-direction: column;
    width: min(100%, 330px);
    margin-bottom: 20px;
    padding: 12px 16px 14px;
    gap: 7px;
    border-radius: 18px;
  }

  .event-shop-hours dt {
    font-size: 13px;
  }

  .event-shop-hours dd {
    font-size: clamp(23px, 7vw, 30px);
  }

  .photo-spot-grid {
    gap: 12px;
  }

  .photo-spot-card {
    padding: 24px 12px 60px;
    border-width: 2px;
    border-radius: 16px;
  }

  .photo-card-ribbon {
    margin-bottom: 12px;
  }

  .photo-card-label {
    width: min(82%, 300px);
  }

  .photo-card-icon {
    top: auto;
    bottom: 12px;
    width: 48px;
  }

  .photo-card-icon--left {
    left: 10px;
  }

  .photo-card-icon--right {
    right: 10px;
  }

  .photo-spot-card .coming-soon-image {
    width: min(84%, 320px);
  }

  .photo-spot-card p {
    margin-top: 18px;
    padding: 0 46px;
    font-size: 11px;
    line-height: 1.55;
  }

  .practice-panel {
    padding: 22px 10px 24px;
    border-width: 2px;
    border-radius: 22px;
  }

  .practice-heading {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
  }

  .practice-heading img {
    width: 36px;
  }

  .practice-heading h2 {
    font-size: clamp(21px, 6.2vw, 27px);
    letter-spacing: 0.01em;
  }

  .practice-lead {
    margin-bottom: 18px;
    font-size: clamp(12px, 3.5vw, 15px);
    letter-spacing: 0.03em;
  }

  .scope-list {
    gap: 0;
  }

  .scope-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 10px;
    min-height: 0;
    padding: 20px 12px;
    text-align: center;
  }

  .scope-card--first,
  .scope-card--middle,
  .scope-card--upper {
    grid-template-columns: 1fr;
  }

  .scope-character {
    grid-column: 1;
    grid-row: 2;
    width: 88px;
  }

  .scope-card--first .scope-character {
    width: 45.210191px;
  }

  .scope-card--middle .scope-character {
    width: 42px;
  }

  .scope-card--upper .scope-character {
    width: 29.426752px;
  }

  .official-text-section .practice-heading img {
    width: 90.152866px;
  }

  .scope-rank {
    grid-column: 1;
    grid-row: 1;
    width: clamp(140px, 44vw, 160px);
    min-height: 50px;
    margin-bottom: 8px;
    padding: 5px 20px 6px;
    font-size: clamp(19px, 5.8vw, 23px);
    border-width: 2px;
    border-radius: 14px;
  }

  .scope-rank span {
    min-height: 36px;
    padding: 4px 7px;
    border-width: 0;
    border-radius: 0;
  }

  .scope-copy {
    grid-column: 1;
    grid-row: 3;
    font-size: 12px;
    line-height: 1.65;
  }

  .scope-source {
    margin-top: 10px;
    padding-top: 9px;
  }

  .scope-source-title {
    margin-bottom: 4px;
    font-size: 13px;
  }

  .scope-source-links {
    gap: 6px;
    margin-top: 8px;
    padding-left: 1.25em;
    font-size: 1em;
  }

  .official-product-grid {
    gap: 0;
  }

  .official-product-card {
    gap: 18px;
    padding: 24px 12px;
  }

  .official-product-label {
    min-width: 94px;
    min-height: 34px;
    padding: 5px 16px;
    font-size: 13px;
  }

  .official-product-media {
    min-height: 0;
    padding: 18px 0;
  }

  .official-product-image {
    width: auto;
    max-width: 100%;
    height: min(74vw, 290px);
  }

  .official-product-body {
    gap: 10px;
  }

  .official-product-body h3 {
    font-size: 17px;
  }

  .official-product-body .official-product-title {
    font-size: clamp(14px, 4.7vw, 17px);
    line-height: 1.55;
    overflow-wrap: normal;
    word-break: keep-all;
  }

  .official-product-title__line {
    display: block;
    white-space: nowrap;
  }

  .official-product-lead {
    font-size: 15px;
  }

  .official-product-description-text {
    font-size: 12px;
    line-height: 1.75;
  }

  .official-product-price {
    font-size: 16px;
  }

  .official-product-facts {
    grid-template-columns: 1fr;
    width: min(100%, 310px);
    gap: 8px;
  }

  .official-product-facts > div {
    padding: 9px 12px;
    border-radius: 13px;
  }

  .official-button,
  .official-product-notice {
    width: min(100%, 310px);
    min-height: 48px;
    padding: 10px 18px;
    font-size: 15px;
  }

  .official-product-card--upcoming .official-product-notice {
    padding-right: 12px;
    padding-left: 12px;
    font-size: clamp(12px, 3.8vw, 14px);
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .official-product-card--upcoming .official-notice-star:first-child {
    margin-right: 0.35em;
  }

  .official-product-card--upcoming .official-notice-star:last-child {
    margin-left: 0.35em;
  }

  .practice-campaign-section {
    padding: 0 12px 74px;
  }

  .practice-campaign-panel {
    padding: 24px 12px 28px;
    border-width: 2px;
    border-radius: 22px;
  }

  .practice-campaign-character {
    grid-column: 1;
    grid-row: 1;
    width: 162.114649px;
    margin: 0 auto 8px;
  }

  .practice-campaign-heading {
    max-width: none;
    margin: 14px auto 22px;
    grid-template-columns: 1fr;
  }

  .practice-campaign-heading h2 {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    font-size: clamp(23px, 6.5vw, 32px);
    letter-spacing: 0.01em;
  }

  .practice-campaign-heading p {
    grid-column: 1;
    grid-row: 3;
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.65;
  }

  .practice-campaign-heading p br {
    display: none;
  }

  .practice-campaign-info {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 22px;
  }

  .practice-campaign-info > div {
    min-height: 0;
    padding: 16px 12px;
    gap: 7px;
    border-width: 2px;
    border-radius: 14px;
  }

  .practice-campaign-info dt,
  .practice-campaign-info dd {
    font-size: 14px;
  }

  .practice-campaign-info dt {
    font-size: 17px;
  }

  .practice-campaign-period-dates {
    gap: 3px;
  }

  .practice-campaign-period-dates time,
  .practice-campaign-period-separator {
    width: 100%;
  }

  .practice-campaign-period-dates time {
    font-size: clamp(18px, 5.2vw, 22px);
  }

  .practice-campaign-period-separator {
    font-size: 18px;
    line-height: 1;
  }

  .practice-campaign-period-dates small {
    margin-top: 4px;
    font-size: 12px;
  }

  .practice-campaign-prize-showcase {
    margin-bottom: 22px;
    padding: 18px 12px;
    border-radius: 16px;
  }

  .practice-campaign-prize-showcase h3 {
    margin: 8px 0 0;
    font-size: 21px;
  }

  .practice-campaign-prize-heading {
    margin-bottom: 16px;
  }

  .practice-campaign-prize-label {
    padding: 5px 18px;
    font-size: 14px;
  }

  .practice-campaign-prize-shipping {
    margin-top: 6px;
    font-size: 12px;
  }

  .practice-campaign-prize-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .practice-campaign-prize-choice {
    margin-bottom: 10px;
    font-size: 13px;
  }

  .practice-campaign-prize-choice span {
    padding: 3px 9px;
  }

  .practice-campaign-prize-layout {
    gap: 16px;
  }

  .practice-campaign-prize-item,
  .practice-campaign-prize-example-media {
    border-radius: 12px;
  }

  .practice-campaign-prize-example {
    width: 100%;
    margin: 0 auto;
  }

  .practice-campaign-prize-example figcaption {
    margin-bottom: 12px;
    padding: 7px 24px;
    font-size: 16px;
  }

  .practice-campaign-prize-link {
    margin-top: 16px;
    font-size: 14px;
  }

  .practice-campaign-prize-note {
    margin-top: 10px;
    font-size: 12px;
  }

  .practice-campaign-howto {
    margin-bottom: 16px;
    padding: 18px 10px;
    border-width: 2px;
    border-radius: 16px;
  }

  .practice-campaign-howto h3 {
    margin-bottom: 14px;
    font-size: 21px;
  }

  .practice-campaign-howto ol {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .practice-campaign-howto li {
    min-height: 0;
    padding: 12px;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    border-radius: 12px;
  }

  .practice-campaign-step {
    width: 42px;
    font-size: 21px;
  }

  .practice-campaign-howto p,
  .practice-campaign-entry-note {
    font-size: 14px;
  }

  .practice-campaign-entry-note {
    margin-bottom: 16px;
    padding: 12px 10px;
  }

  .practice-campaign-terms {
    border-width: 2px;
    border-radius: 14px;
  }

  .practice-campaign-terms summary {
    min-height: 54px;
    padding: 12px 50px 12px 14px;
    font-size: 16px;
  }

  .practice-campaign-terms summary::after {
    right: 18px;
    width: 12px;
    height: 12px;
  }

  .practice-campaign-terms-body {
    padding: 16px 12px;
  }

  .practice-campaign-terms-body ul {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .practice-campaign-terms-body li {
    font-size: 14px;
  }

  .practice-quiz-section {
    padding-top: 50px;
    padding-bottom: 30px;
  }

  .practice-quiz-section::before,
  .practice-quiz-section::after {
    height: 20px;
  }

  .practice-quiz-section::before {
    top: -19px;
    background:
      radial-gradient(circle at 10px 24px, #fffabc 13px, transparent 14px) 0 0 / 20px 20px repeat-x;
  }

  .practice-quiz-section::after {
    background:
      radial-gradient(circle at 10px -4px, transparent 13px, var(--practice-quiz-next-bg) 14px) 0 0 / 20px 20px repeat-x;
  }

  .quiz-grid {
    gap: 14px;
  }

  .quiz-card {
    grid-template-rows: auto 112px auto;
    padding: 14px 12px 16px;
    border-width: 2px;
    border-radius: 16px;
  }

  .quiz-title {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 30px;
    padding: 0 50px;
    gap: 8px;
  }

  .quiz-title span {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    min-width: 42px;
    min-height: 30px;
    border-radius: 8px;
    font-size: 17px;
  }

  .quiz-title h3 {
    font-size: 13px;
    letter-spacing: 0.02em;
    text-align: center;
  }

  .quiz-image,
  .quiz-image--rilakkuma,
  .quiz-image--korilakkuma,
  .quiz-image--kiiroitori,
  .quiz-image--chairoikoguma,
  .quiz-image--group {
    width: auto;
    max-width: 160px;
    max-height: 104px;
  }

  .quiz-image.quiz-image--scaled {
    --quiz-character-scale: 1;
  }

  .quiz-image--rilakkuma {
    width: 90.955414px;
  }

  .quiz-image--korilakkuma {
    width: 45.210191px;
  }

  .quiz-image--kiiroitori {
    width: 33.43949px;
  }

  .quiz-image--chairoikoguma {
    width: 44.675159px;
  }

  .quiz-image--group {
    width: 156.496815px;
  }

  .quiz-options {
    gap: 6px;
  }

  .quiz-options label {
    min-height: 28px;
    padding: 4px 10px;
    border-width: 1px;
    font-size: 12px;
  }

  .quiz-options--images img {
    width: 80px;
    height: 80px;
  }

  .quiz-card--image-options .quiz-image-instruction {
    font-size: 12px;
  }

  .quiz-options input {
    width: 16px;
    height: 16px;
    margin-right: 8px;
  }

  .quiz-bottom {
    margin-top: 24px;
    min-height: 138px;
    padding: 8px 0 72px;
    gap: 6px;
  }

  .quiz-bottom-character {
    width: 82px;
    bottom: 8px;
    left: 16px;
    transform: none;
  }

  .answer-button {
    width: min(72%, 260px);
    min-height: 58px;
    padding: 7px 10px;
    grid-template-columns: 40px minmax(0, 1fr) 30px;
    gap: 8px;
    border-width: 3px;
    font-size: clamp(17px, 4.2vw, 30px);
    letter-spacing: 0.08em;
  }

  .answer-face {
    width: 40px;
  }

  .answer-arrow {
    width: 30px;
  }

  .choose-heading {
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 26px;
  }

  .choose-heading h2 {
    margin-bottom: 8px;
    font-size: clamp(25px, 7.6vw, 37px);
    letter-spacing: 0.05em;
  }

  .choose-heading p {
    font-size: clamp(10px, 2.9vw, 13px);
    letter-spacing: 0.06em;
  }

  .choose-character {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    width: 156.496815px;
    margin: 0 auto 12px;
  }

  .entry-buttons--choose {
    grid-row: 3;
  }

  .contents-section {
    padding-top: 36px;
    padding-bottom: 38px;
  }

  .recommend-section {
    padding-bottom: 52px;
  }

  .section-heading {
    margin-bottom: 24px;
    gap: 10px;
  }

  .contents-section .section-heading {
    margin-bottom: 18px;
  }

  .contents-section .section-heading img {
    width: 42px;
  }

  .recommend-section .section-heading img {
    width: 29.426752px;
  }

  .section-heading h2 {
    font-size: clamp(24px, 7vw, 32px);
  }

  .contents-layout {
    gap: 12px;
  }

  .contents-banner-grid {
    gap: 8px;
  }

  .recommend-grid {
    gap: 12px;
  }

  .banner-card img {
    filter: drop-shadow(0 5px 8px rgba(96, 61, 88, 0.08));
  }

  .news-social-section {
    padding-top: 40px;
    padding-bottom: 54px;
  }

  .news-social-section::after {
    height: 18px;
    background:
      radial-gradient(circle at 9px -3px, transparent 11px, #f8d5e3 12px) 0 0 / 18px 18px repeat-x;
  }

  .news-panel,
  .x-panel {
    border-radius: 16px;
  }

  .panel-heading {
    min-height: 86px;
  }

  .news-panel .panel-title img {
    width: 45.210191px;
  }

  .x-panel .panel-title img {
    width: 42px;
  }

  .news-list {
    max-height: 260px;
    padding: 8px 12px;
  }

  .news-item {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 9px;
    min-height: 96px;
  }

  .news-item--link {
    padding-right: 34px;
  }

  .news-item--link::after {
    right: 3px;
    width: 24px;
    font-size: 22px;
  }

  #practice-campaign,
  #practice-quiz {
    scroll-margin-top: 76px;
  }

  .news-meta time {
    font-size: 10px;
  }

  .news-tag {
    min-width: 50px;
    min-height: 18px;
    font-size: 9px;
  }

  .news-body h3 {
    font-size: 13px;
  }

  .news-body p {
    font-size: 10px;
  }

  .x-embed {
    min-height: 280px;
    padding: 12px;
  }

  .twitter-tweet {
    font-size: 12px;
  }

  .site-footer {
    padding-top: 52px;
    padding-bottom: 96px;
  }

  .footer-logo {
    width: 180px;
  }

  .footer-character {
    width: 156px;
  }

  .copyright {
    font-size: 12px;
  }

  .fixed-entry-button {
    right: 10px;
    bottom: 10px;
    width: 82px;
  }
}

@media (max-width: 390px) {
  .header-logo {
    width: 210px;
  }

  .fee-card h3 {
    font-size: 12px;
  }

  .fee-card li {
    grid-template-columns: 27px 9px minmax(0, 1fr);
    font-size: 12px;
    padding-left: 12px;
  }

  .fee-card li strong {
    font-size: 11px;
  }

  .access-card h4 {
    font-size: 11px;
    line-height: 1.25;
  }

  .access-card p,
  .line-name {
    font-size: 8px;
  }
}

@media (max-width: 980px) {
  .tokuten-content-section {
    padding-top: 44px;
  }

  .tokuten-stack {
    gap: 18px;
  }

  .tokuten-panel {
    padding: 44px 28px 42px;
    border-width: 2px;
    border-radius: 18px;
  }

  .tokuten-goods-layout {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }

  .tokuten-goods-main {
    width: min(72%, 390px);
    margin: 0 auto;
  }

  .tokuten-goods-body p,
  .tokuten-coming-button {
    margin-right: auto;
    margin-left: auto;
  }


  .tokuten-goods-body p {
    font-size: 15px;
    line-height: 1.75;
  }

  .tokuten-coming-button {
    width: min(100%, 420px);
    min-height: 64px;
    grid-template-columns: 58px minmax(0, 1fr);
    font-size: clamp(22px, 5vw, 34px);
  }

  .tokuten-section-heading {
    margin-top: -32px;
  }

  .tokuten-section-heading h2 {
    min-width: 180px;
    font-size: clamp(24px, 5vw, 38px);
  }

  .tokuten-lead,
  .tokuten-choice,
  .tokuten-note {
    font-size: 14px;
  }

  .tokuten-card-grid--two {
    gap: 28px;
  }

  .tokuten-card-grid--three {
    gap: 22px;
  }

  .tokuten-label {
    min-width: 76px;
    min-height: 28px;
    font-size: 14px;
  }

  .tokuten-meishi-divider {
    width: calc(100% + 56px);
    margin-right: -28px;
    margin-left: -28px;
  }

  .tokuten-small-grid {
    gap: 24px 34px;
  }

  .tokuten-product-grid {
    gap: 36px;
  }

  .tokuten-wallpaper-previews {
    grid-template-columns: minmax(0, 1fr) clamp(150px, 24vw, 220px);
    gap: 24px;
  }
}

@media (max-width: 640px) {
  .tokuten-content-section {
    padding: 30px 8px var(--cta-pre-gap);
  }

  .tokuten-panel {
    padding: 38px 18px 34px;
    border-radius: 14px;
  }

  .tokuten-goods-main {
    width: min(86%, 300px);
  }


  .tokuten-goods-body p {
    font-size: 13px;
    letter-spacing: 0.02em;
  }

  .tokuten-coming-button {
    min-height: 54px;
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 8px 20px;
    font-size: clamp(19px, 6vw, 26px);
  }

  .tokuten-section-heading {
    margin-top: -26px;
    margin-bottom: 12px;
  }

  .tokuten-section-heading h2 {
    min-width: 150px;
    padding: 7px 22px;
    font-size: clamp(20px, 6vw, 28px);
    letter-spacing: 0.08em;
  }

  .tokuten-panel--meishi .tokuten-section-heading h2 {
    padding: 7px 12px;
    font-size: clamp(18px, 5.4vw, 22px);
    letter-spacing: 0.03em;
  }

  .tokuten-panel--card .tokuten-section-heading h2 {
    padding: 7px 8px;
    font-size: clamp(16px, 4.6vw, 20px);
    letter-spacing: 0.01em;
  }

  .tokuten-panel--filecase .tokuten-section-heading h2 {
    padding: 7px 12px;
    font-size: clamp(18px, 5.4vw, 22px);
    letter-spacing: 0.03em;
  }

  .tokuten-panel--pinbadge .tokuten-section-heading h2 {
    padding: 7px 8px;
    font-size: clamp(15px, 4.5vw, 19px);
    letter-spacing: 0.01em;
  }

  .tokuten-lead,
  .tokuten-choice,
  .tokuten-note {
    margin-bottom: 22px;
    font-size: 12px;
    letter-spacing: 0.04em;
  }

  .tokuten-card-grid--two,
  .tokuten-card-grid--three,
  .tokuten-product-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .tokuten-card-grid--certification .tokuten-certification-card {
    grid-column: auto;
    grid-row: auto;
  }

  .tokuten-image-card img,
  .tokuten-card-grid--three .tokuten-image-card img,
  .tokuten-image-card--meishi img {
    width: min(100%, 310px);
  }


  .tokuten-label {
    min-width: 68px;
    min-height: 24px;
    margin-bottom: 8px;
    font-size: 12px;
  }

  .tokuten-wide-image {
    width: min(100%, 320px);
  }

  .tokuten-wallpaper-previews {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .tokuten-wallpaper-delivery-note {
    margin-bottom: 28px;
    padding: 13px 15px;
    border-width: 2px;
    border-radius: 14px;
    font-size: 12px;
    line-height: 1.7;
    letter-spacing: 0.02em;
  }

  .tokuten-wallpaper-preview {
    gap: 10px;
  }

  .tokuten-wallpaper-preview-label {
    min-width: 82px;
    min-height: 30px;
    padding: 5px 16px;
    font-size: 12px;
  }

  .tokuten-wallpaper-image {
    border-radius: 14px;
  }

  .tokuten-wallpaper-image--pc {
    width: 100%;
  }

  .tokuten-wallpaper-image--sp {
    width: min(82%, 280px);
  }

  .tokuten-wallpaper-note {
    margin-top: 18px;
    font-size: 11px;
  }

  .tokuten-meishi-divider {
    width: calc(100% + 36px);
    margin: 28px -18px 20px;
  }

  .tokuten-choice {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .tokuten-choice::before,
  .tokuten-choice::after {
    width: 120px;
    margin: 0 auto;
  }

  .tokuten-small-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .tokuten-small-grid--five .tokuten-small-card,
  .tokuten-small-grid--five .tokuten-small-card:nth-child(4) {
    grid-column: auto;
  }

  .tokuten-small-grid--five .tokuten-small-card:nth-child(5) {
    grid-column: 1 / -1;
    width: calc((100% - 18px) / 2);
    justify-self: center;
  }

  .tokuten-small-card {
    font-size: 12px;
  }

  .tokuten-product-card {
    gap: 16px;
  }

  .tokuten-product-card h3 {
    font-size: 18px;
  }

  .tokuten-product-card img,
  .tokuten-product-card:nth-child(2) img {
    max-width: min(82%, 240px);
    max-height: 280px;
  }

  .tokuten-product-card--comingsoon img,
  .tokuten-product-card--comingsoon:nth-child(2) img {
    max-width: min(100%, 280px);
    max-height: none;
  }
}

/* 2027年開催情報・料金表 */
.date-venue-card {
  min-height: 0;
  padding: clamp(28px, 3.2vw, 52px) clamp(110px, 10vw, 170px)
    clamp(28px, 3.2vw, 52px) clamp(24px, 3.4vw, 56px);
  display: block;
}

.exam-info-list {
  margin: 0;
  display: grid;
  gap: clamp(18px, 2vw, 30px);
}

.exam-info-row {
  display: grid;
  grid-template-columns: clamp(150px, 17vw, 280px) minmax(0, 1fr);
  gap: clamp(18px, 2.8vw, 46px);
  align-items: center;
}

.exam-info-row dt {
  min-height: clamp(52px, 5vw, 76px);
  margin: 0;
  padding: 10px 18px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(180deg, #6379e3 0%, #3566bd 100%);
  border-radius: 999px;
  font-size: clamp(18px, 1.8vw, 30px);
  font-weight: 900;
  text-align: center;
}

.exam-info-row dd {
  min-width: 0;
  margin: 0;
  display: grid;
  gap: 8px;
  color: #2a3481;
  font-size: clamp(17px, 1.55vw, 27px);
  line-height: 1.45;
}

.exam-info-item {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px clamp(12px, 1.5vw, 24px);
  align-items: baseline;
}

.exam-info-item + .exam-info-item {
  padding-top: 8px;
  border-top: 1px dashed rgba(42, 52, 129, 0.2);
}

.exam-info-label {
  min-width: clamp(110px, 12vw, 190px);
  color: #1e2d78;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
}

.exam-info-value {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.25em;
}

.exam-info-time {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.4em;
}

.exam-time-range,
.exam-open-time,
.exam-date,
.exam-weekday {
  white-space: nowrap;
}

.exam-open-time,
.exam-info-address,
.exam-weekday {
  color: #58619a;
  font-size: 0.82em;
  font-weight: 600;
}

.exam-open-time {
  line-height: 1.35;
}

.exam-info-row--date dd strong {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.16em;
  color: var(--pink);
  font-size: clamp(34px, 4.4vw, 72px);
  line-height: 1.1;
}

.exam-info-row--date .exam-weekday {
  font-size: 0.58em;
}

.exam-info-row--deadline dd {
  justify-items: start;
  text-align: left;
}

.exam-deadline-date {
  display: inline-flex;
  align-items: baseline;
  gap: 0 0.16em;
  color: var(--pink);
  font-size: clamp(34px, 4.4vw, 72px);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.exam-deadline-date .exam-weekday {
  color: #58619a;
  font-size: 0.58em;
  line-height: 1.2;
}

.exam-info-row--venue dd strong {
  color: #1e2d78;
  font-size: clamp(24px, 2.8vw, 46px);
  line-height: 1.2;
}

@media (min-width: 1181px) {
  .date-venue-card {
    padding: 40px 140px 40px 48px;
  }

  .exam-info-list {
    gap: 24px;
  }

  .exam-info-row {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 40px;
  }

  .exam-info-row dt {
    min-height: 68px;
  }

  .exam-info-label {
    min-width: 180px;
  }
}

@keyframes detail-card-neon-subtle {
  0% {
    background-position: 0 0, 0% 50%;
    box-shadow:
      0 10px 24px rgba(116, 75, 100, 0.07),
      0 0 6px rgba(230, 130, 177, 0.12);
  }
  100% {
    background-position: 0 0, 100% 50%;
    box-shadow:
      0 10px 24px rgba(74, 100, 126, 0.07),
      0 0 8px rgba(111, 187, 220, 0.14);
  }
}

@media (min-width: 761px) {
  .date-venue-card {
    background:
      linear-gradient(#fff, #fff) padding-box,
      linear-gradient(115deg, #c8e6f7, #f5d6e4, #f9efc9, #ddd4ee, #c8e6f7) border-box;
    background-position: 0 0, 0% 50%;
    background-size: 100% 100%, 220% 220%;
    animation-name: detail-card-neon-subtle;
  }

  .fee-card {
    background:
      radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.8) 48%, rgba(255, 249, 252, 0.95) 100%) padding-box,
      linear-gradient(115deg, #f2bfd4, #f8dce6, #f8edc9, #e7d8ee, #f2bfd4) border-box;
    background-position: 0 0, 0% 50%;
    background-size: 100% 100%, 220% 220%;
    animation-name: detail-card-neon-subtle;
  }

  .fee-card--online {
    background:
      radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.82) 48%, rgba(247, 252, 255, 0.96) 100%) padding-box,
      linear-gradient(115deg, #b9dff2, #d9edf7, #f8efcf, #ded9ee, #b9dff2) border-box;
    background-position: 0 0, 0% 50%;
    background-size: 100% 100%, 220% 220%;
  }

  .exam-info-row--time dd {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 1.2vw, 18px);
  }

  .exam-info-row--time .exam-info-item,
  .exam-info-row--time .exam-info-item + .exam-info-item {
    grid-template-columns: 1fr;
    gap: 6px;
    align-items: center;
    padding: clamp(18px, 1.6vw, 26px) clamp(10px, 1.2vw, 20px);
    border-radius: 14px;
    text-align: center;
  }

  .exam-info-row--time .exam-info-item,
  .exam-info-row--time .exam-info-item + .exam-info-item {
    background: #fbf9ff;
    border: 1px solid #ddd1f3;
  }

  .exam-info-row--time .exam-info-label {
    min-width: 0;
    font-size: clamp(21px, 1.55vw, 28px);
    text-align: center;
  }

  .exam-info-row--time .exam-info-time {
    display: grid;
    justify-items: center;
    gap: 3px;
  }

  .exam-info-row--time .exam-time-range {
    font-size: clamp(24px, 1.9vw, 34px);
  }

  .exam-info-row--time .exam-open-time {
    font-size: clamp(16px, 1.3vw, 22px);
  }
}

.fee-card {
  min-height: 0;
  padding: clamp(28px, 2.8vw, 46px) clamp(24px, 3vw, 46px)
    clamp(38px, 3.6vw, 58px);
}

.fee-card h3 {
  min-height: clamp(58px, 5vw, 78px);
  margin-bottom: 18px;
  padding: 10px 20px;
  font-size: clamp(24px, 2.3vw, 38px);
}

.fee-card-note {
  position: relative;
  z-index: 2;
  min-height: 2.8em;
  margin: 0 0 clamp(22px, 2.5vw, 36px);
  color: #b32768;
  font-size: clamp(16px, 1.35vw, 23px);
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

.fee-card-note--placeholder {
  visibility: hidden;
}

.fee-card--online h3 + ul {
  margin-top: calc(clamp(22px, 2.5vw, 36px) + 2.8em);
}

.fee-card ul {
  gap: clamp(16px, 1.8vw, 28px);
}

.fee-card li {
  grid-template-columns: max-content minmax(0, 1fr);
  gap: clamp(18px, 1.8vw, 28px);
  align-items: baseline;
  padding-left: clamp(24px, 2.5vw, 40px);
  font-size: clamp(18px, 1.7vw, 28px);
  line-height: 1.3;
}

.fee-card li > span {
  font-weight: 800;
  white-space: nowrap;
}

.fee-card li strong {
  display: inline-flex;
  align-items: baseline;
  gap: 0.08em;
  font-size: clamp(20px, 1.85vw, 31px);
  line-height: 1.25;
  white-space: nowrap;
}

.fee-tax {
  font-size: 0.65em;
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
}

.fee-comparison {
  display: none;
}


/* 各コンテンツをPC・SPとも2列×2行で表示 */
.contents-layout {
  width: min(100%, 1100px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 36px);
  align-items: start;
}

.contents-banner-grid {
  display: contents;
}

/* ブックカフェ非公開中の3リンク配置。公開時はHTMLの専用クラスと併せて解除する。 */
.contents-layout--three {
  width: min(100%, 1320px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 32px);
}

@media (max-width: 980px) {
  .contents-layout--three {
    width: min(100%, 600px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .contents-layout--three > .banner-card--feature {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .contents-layout--three {
    gap: 8px;
  }
}

@media (max-width: 760px) {
  .date-venue-card {
    padding: 18px 38px 20px 14px;
  }

  .exam-info-list {
    gap: 0;
  }

  .exam-info-row {
    grid-template-columns: clamp(72px, 21vw, 112px) minmax(0, 1fr);
    gap: clamp(8px, 2.6vw, 16px);
    padding-bottom: 14px;
    border-bottom: 2px dotted #b9d9f5;
    align-items: center;
  }

  .exam-info-row + .exam-info-row {
    padding-top: 14px;
  }

  .exam-info-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .exam-info-row dt {
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 6px 5px;
    font-size: clamp(10px, 3.1vw, 14px);
    line-height: 1.2;
    letter-spacing: 0;
  }

  .exam-info-row dd {
    width: 100%;
    gap: 6px;
    padding: 0 2px;
    font-size: clamp(12px, 3.4vw, 16px);
    line-height: 1.4;
  }

  .exam-info-item {
    grid-template-columns: 1fr;
    gap: 4px;
    align-items: start;
  }

  .exam-info-label {
    min-width: 0;
    font-size: 0.92em;
  }

  .exam-info-time {
    gap: 0 0.35em;
  }

  .exam-deadline-date {
    gap: 0 0.08em;
    font-size: clamp(18px, 5.8vw, 28px);
  }

  .exam-info-row--deadline dd {
    justify-items: center;
    text-align: center;
  }

  .exam-info-row--time dd {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .exam-info-row--time .exam-info-item,
  .exam-info-row--time .exam-info-item + .exam-info-item {
    padding: 8px 5px;
    background: #fbf9ff;
    border: 1px solid #ddd1f3;
    border-radius: 10px;
  }

  .exam-info-row--time .exam-info-label {
    width: 100%;
    font-size: clamp(9.5px, 2.9vw, 12px);
    letter-spacing: -0.02em;
    text-align: center;
  }

  .exam-info-row--time .exam-info-time {
    display: grid;
    gap: 2px;
  }

  .exam-info-row--time .exam-time-range {
    font-size: clamp(9.5px, 2.8vw, 12px);
  }

  .exam-info-row--time .exam-open-time {
    font-size: clamp(8px, 2.3vw, 10px);
    line-height: 1.25;
  }

  .exam-info-row--date dd strong {
    flex-wrap: nowrap;
    gap: 0 0.08em;
    font-size: clamp(18px, 5.8vw, 28px);
    white-space: nowrap;
  }

  .exam-info-row--date dd {
    justify-items: center;
    text-align: center;
  }

  .exam-info-row--venue dd strong {
    font-size: clamp(15px, 4.6vw, 22px);
  }

  .exam-info-row--venue dd {
    justify-items: center;
    padding: 0 4px 30px;
    text-align: center;
  }

  .exam-info-row--venue .exam-info-address {
    font-size: clamp(6px, 2.05vw, 8.5px);
    letter-spacing: -0.055em;
    white-space: nowrap;
  }

  .date-venue-icon {
    right: 8px;
    bottom: 12px;
    width: 26px;
  }

  .fee-grid {
    display: none;
  }

  .fee-comparison {
    display: block;
    margin-bottom: 34px;
  }

  .fee-comparison-benefit {
    width: 100%;
    max-width: 100%;
    margin: 0 0 12px;
    padding: 10px 8px;
    color: #fff;
    background: linear-gradient(180deg, #f66eaa 0%, #e84086 100%);
    border: 0;
    border-radius: 999px;
    box-shadow: 0 4px 0 rgba(218, 97, 147, 0.24);
    font-size: clamp(9px, 2.65vw, 12px);
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: -0.035em;
    text-align: center;
    white-space: nowrap;
  }

  .fee-comparison table {
    width: 100%;
    overflow: hidden;
    table-layout: fixed;
    border: 2px solid #c8b9df;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 14px;
    background: #fff;
    color: #1e2d78;
    font-size: clamp(10px, 3vw, 13px);
    line-height: 1.25;
  }

  .fee-comparison th,
  .fee-comparison td {
    padding: 9px 3px;
    border-right: 1px solid #e0d8ec;
    border-bottom: 1px solid #e0d8ec;
    text-align: center;
    white-space: nowrap;
  }

  .fee-comparison tr > :last-child {
    border-right: 0;
  }

  .fee-comparison tbody tr:last-child > * {
    border-bottom: 0;
  }

  .fee-comparison thead th {
    padding-top: 10px;
    padding-bottom: 10px;
    color: #fff;
    background: #7660aa;
    font-weight: 900;
  }

  .fee-comparison thead th:first-child {
    width: 32%;
  }

  .fee-comparison .fee-comparison-venue {
    background: #e75b98;
  }

  .fee-comparison .fee-comparison-online {
    background: #4ca9df;
  }

  .fee-comparison tbody th {
    background: #faf7ff;
    font-weight: 800;
  }

  .fee-comparison tbody td {
    font-weight: 700;
  }

  .fee-comparison-note {
    margin: 7px 2px 0;
    color: #58619a;
    font-size: 10px;
    font-weight: 600;
    text-align: right;
  }

  .contents-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}

@media (max-width: 640px) {
  .line-name--long {
    padding-right: 1px;
    padding-left: 1px;
    font-size: clamp(5.5px, 1.8vw, 8px);
    letter-spacing: -0.1em;
    white-space: nowrap;
  }
}

/* TOP page gentle motion */
.home-page {
  overflow-x: clip;
}

.home-page .news-social-section {
  overflow-x: clip;
}

.home-page.is-home-motion-ready [data-home-reveal] {
  --home-reveal-delay: 0ms;
}

.home-page.is-home-motion-ready [data-home-reveal]:not(.is-home-revealed) {
  pointer-events: none;
}

.home-page.is-home-motion-ready [data-home-reveal].is-home-revealed {
  pointer-events: auto;
}

.home-page.is-home-motion-ready
  [data-home-reveal]:not([data-home-reveal="action"]):not(
    [data-home-reveal="banner"]
  ):not([data-home-reveal="character"]) {
  --home-reveal-duration: 920ms;
  --home-reveal-y: 22px;
  opacity: 0;
  visibility: visible;
  translate: 0 var(--home-reveal-y);
  transition:
    opacity var(--home-reveal-duration) cubic-bezier(0.22, 1, 0.36, 1),
    translate var(--home-reveal-duration) cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear var(--home-reveal-duration);
  will-change: opacity, translate;
}

.home-page.is-home-motion-ready [data-home-reveal="heading"] {
  --home-reveal-duration: 850ms;
  --home-reveal-y: 18px;
}

.home-page.is-home-motion-ready [data-home-delay="1"] {
  --home-reveal-delay: 110ms;
}

.home-page.is-home-motion-ready [data-home-delay="2"] {
  --home-reveal-delay: 220ms;
}

.home-page.is-home-motion-ready [data-home-delay="action-1"] {
  --home-reveal-delay: 120ms;
}

.home-page.is-home-motion-ready [data-home-delay="content-1"] {
  --home-reveal-delay: 160ms;
}

.home-page.is-home-motion-ready [data-home-delay="content-2"] {
  --home-reveal-delay: 270ms;
}

.home-page.is-home-motion-ready [data-home-delay="content-3"] {
  --home-reveal-delay: 380ms;
}

.home-page.is-home-motion-ready
  [data-home-reveal]:not([data-home-reveal="action"]):not(
    [data-home-reveal="banner"]
  ):not([data-home-reveal="character"]).is-home-revealed {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition-delay: var(--home-reveal-delay), var(--home-reveal-delay), 0s;
  will-change: auto;
}

.home-banner-motion,
.home-cta-motion {
  display: block;
}

.home-page [data-home-reveal="action"],
.home-page [data-home-reveal="banner"] {
  --home-banner-duration: 650ms;
  --home-banner-start-y: 22px;
  --home-banner-start-scale-x: 0.94;
  --home-banner-start-scale-y: 0.94;
  --home-banner-peak-scale-x: 1.025;
  --home-banner-peak-scale-y: 0.98;
  --home-banner-settle-scale-x: 0.995;
  --home-banner-settle-scale-y: 1.01;
  --home-banner-start-rotate: 0deg;
  --home-banner-peak-rotate: 0deg;
  --home-banner-settle-rotate: 0deg;
  --home-banner-shadow: rgba(111, 77, 105, 0.18);
  position: relative;
  isolation: isolate;
}

.home-page [data-home-reveal="action"] {
  --home-banner-duration: 720ms;
  --home-banner-start-y: 26px;
  --home-banner-start-scale-x: 0.92;
  --home-banner-start-scale-y: 0.92;
  --home-banner-peak-scale-x: 1.04;
  --home-banner-peak-scale-y: 0.97;
  --home-banner-settle-scale-x: 0.99;
  --home-banner-settle-scale-y: 1.015;
}

.home-page .image-button--pink[data-home-reveal="action"] {
  --home-banner-start-rotate: -0.8deg;
  --home-banner-peak-rotate: 0.7deg;
  --home-banner-settle-rotate: -0.3deg;
  --home-banner-shadow: rgba(235, 110, 164, 0.2);
}

.home-page .image-button--blue[data-home-reveal="action"] {
  --home-banner-start-rotate: 0.8deg;
  --home-banner-peak-rotate: -0.7deg;
  --home-banner-settle-rotate: 0.3deg;
  --home-banner-shadow: rgba(74, 137, 217, 0.2);
}

.home-page [data-home-reveal="action"]::after,
.home-page [data-home-reveal="banner"]::after {
  position: absolute;
  content: "";
  z-index: -1;
  inset: 14% 5% 2%;
  border-radius: inherit;
  background: var(--home-banner-shadow);
  opacity: 0.1;
  filter: blur(13px);
  transform: translate3d(0, 8px, 0) scale(1);
  pointer-events: none;
  transition: opacity 500ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.home-page.is-home-motion-ready [data-home-reveal="action"],
.home-page.is-home-motion-ready [data-home-reveal="banner"] {
  opacity: 0;
  visibility: visible;
  translate: 0 var(--home-banner-start-y);
}

.home-page.is-home-motion-ready [data-home-reveal="action"]::after,
.home-page.is-home-motion-ready [data-home-reveal="banner"]::after {
  opacity: 0;
  transform: translate3d(0, 5px, 0) scale(0.9);
}

.home-page.is-home-motion-ready
  [data-home-reveal="action"].is-home-revealed,
.home-page.is-home-motion-ready
  [data-home-reveal="banner"].is-home-revealed {
  visibility: visible;
  animation: home-banner-rise var(--home-banner-duration) cubic-bezier(0.22, 1, 0.36, 1)
    var(--home-reveal-delay) both;
}

.home-page.is-home-motion-ready
  [data-home-reveal="action"].is-home-revealed
  .home-banner-motion,
.home-page.is-home-motion-ready
  [data-home-reveal="banner"].is-home-revealed
  .home-banner-motion {
  animation: home-banner-mochi var(--home-banner-duration) cubic-bezier(0.22, 1, 0.36, 1)
    var(--home-reveal-delay) both;
}

.home-page.is-home-motion-ready
  [data-home-reveal="action"].is-home-revealed::after,
.home-page.is-home-motion-ready
  [data-home-reveal="banner"].is-home-revealed::after {
  animation: home-banner-shadow var(--home-banner-duration) cubic-bezier(0.22, 1, 0.36, 1)
    var(--home-reveal-delay) both;
}

@keyframes home-banner-rise {
  0% {
    opacity: 0;
    translate: 0 var(--home-banner-start-y);
  }
  1% {
    opacity: 0;
    translate: 0 var(--home-banner-start-y);
  }
  58% {
    opacity: 1;
    translate: 0 -3px;
  }
  82% {
    opacity: 1;
    translate: 0 1px;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes home-banner-mochi {
  0% {
    transform: scale(
        var(--home-banner-start-scale-x),
        var(--home-banner-start-scale-y)
      )
      rotate(var(--home-banner-start-rotate));
  }
  58% {
    transform: scale(
        var(--home-banner-peak-scale-x),
        var(--home-banner-peak-scale-y)
      )
      rotate(var(--home-banner-peak-rotate));
  }
  82% {
    transform: scale(
        var(--home-banner-settle-scale-x),
        var(--home-banner-settle-scale-y)
      )
      rotate(var(--home-banner-settle-rotate));
  }
  100% {
    transform: none;
  }
}

@keyframes home-banner-shadow {
  0% {
    opacity: 0;
    transform: translate3d(0, 5px, 0) scale(0.9);
  }
  58% {
    opacity: 0.2;
    transform: translate3d(0, 10px, 0) scale(1.05);
  }
  100% {
    opacity: 0.1;
    transform: translate3d(0, 8px, 0) scale(1);
  }
}

.home-page.is-home-motion-ready [data-home-reveal="character"] {
  opacity: 0;
  visibility: visible;
  transform-origin: center bottom;
}

.home-page.is-home-motion-ready
  [data-home-reveal="character"].is-home-revealed {
  visibility: visible;
  animation: home-character-pop 1100ms cubic-bezier(0.22, 1, 0.36, 1)
    var(--home-reveal-delay) both;
}

@keyframes home-character-pop {
  0% {
    opacity: 0;
    transform: translate3d(0, 32px, 0) rotate(-4deg) scale(0.82);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -5px, 0) rotate(2deg) scale(1.07);
  }
  80% {
    transform: translate3d(0, 2px, 0) rotate(-0.8deg) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.home-page.is-home-motion-ready
  [data-home-reveal="heading"].is-home-revealed
  > img {
  animation: home-heading-icon-pop 900ms cubic-bezier(0.22, 1, 0.36, 1)
    var(--home-reveal-delay) both;
  transform-origin: center bottom;
}

@keyframes home-heading-icon-pop {
  0% {
    transform: translate3d(0, 12px, 0) rotate(-2.5deg) scale(0.9);
  }
  64% {
    transform: translate3d(0, -2px, 0) rotate(1deg) scale(1.04);
  }
  84% {
    transform: translate3d(0, 1px, 0) rotate(-0.3deg) scale(0.995);
  }
  100% {
    transform: none;
  }
}

.home-page.is-home-motion-ready
  [data-home-reveal].is-home-motion-complete {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  rotate: 0deg;
  scale: 1;
  animation: none;
  transition: none;
  will-change: auto;
}

.home-page.is-home-motion-ready
  [data-home-reveal].is-home-motion-complete
  .home-banner-motion {
  animation: none;
}

.home-page.is-home-motion-ready
  [data-home-reveal].is-home-motion-complete
  > img {
  transform: none;
  animation: none;
}

.home-page.is-home-motion-ready
  [data-home-reveal].is-home-motion-complete::after {
  opacity: 0.1;
  transform: translate3d(0, 8px, 0) scale(1);
  animation: none;
}

.home-page .image-button,
.home-page .banner-card,
.home-page .image-button:hover,
.home-page .image-button:focus-visible,
.home-page .banner-card:hover,
.home-page .banner-card:focus-visible {
  transform: none;
  filter: none;
}

.home-page .home-banner-motion {
  position: relative;
  z-index: 1;
  transform-origin: center;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), filter 500ms ease;
}

.home-page .image-button:hover .home-banner-motion,
.home-page .image-button:focus-visible .home-banner-motion,
.home-page .banner-card:hover .home-banner-motion,
.home-page .banner-card:focus-visible .home-banner-motion {
  transform: translate3d(0, -5px, 0) scale(1.035);
  filter: brightness(1.02);
  transition-duration: 420ms;
}

.home-page .image-button:hover::after,
.home-page .image-button:focus-visible::after,
.home-page .banner-card:hover::after,
.home-page .banner-card:focus-visible::after {
  opacity: 0.18;
  transform: translate3d(0, 10px, 0) scale(1.05);
  transition-duration: 420ms;
}

.home-page .image-button:focus-visible,
.home-page .banner-card:focus-visible,
.home-page .fixed-entry-button:focus-visible {
  outline: 3px solid rgba(29, 78, 171, 0.92);
  outline-offset: 4px;
}

.home-page.is-home-motion-ready .fixed-entry-button {
  --home-cta-start-y: 18px;
  --home-cta-start-scale: 0.88;
  --home-cta-start-rotate: -4deg;
  --home-cta-peak-y: -5px;
  --home-cta-peak-scale: 1.1;
  --home-cta-peak-rotate: 5deg;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: none;
  transition:
    opacity 320ms ease,
    visibility 0s linear 320ms,
    transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 500ms ease;
  will-change: opacity;
}

.home-page.is-home-motion-ready
  .fixed-entry-button.is-home-cta-visible:not(.is-home-cta-suppressed) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.home-page.is-home-motion-ready .fixed-entry-button.is-home-cta-suppressed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.home-page.is-home-motion-ready .fixed-entry-button:hover,
.home-page.is-home-motion-ready .fixed-entry-button:focus-visible {
  transform: translate3d(0, -5px, 0) scale(1.025);
  filter: drop-shadow(0 11px 17px rgba(68, 96, 170, 0.26)) brightness(1.015);
  transition-duration: 420ms;
}

.home-page .home-cta-motion {
  transform-origin: center bottom;
}

.home-page.is-home-motion-ready
  .fixed-entry-button.is-home-cta-entering
  .home-cta-motion {
  animation: home-cta-enter 1150ms linear both;
}

.home-page.is-home-motion-ready
  .fixed-entry-button.is-home-cta-motion-complete
  .home-cta-motion {
  opacity: 1;
  transform: none;
  animation: none;
}

@keyframes home-cta-enter {
  0% {
    opacity: 0;
    transform: translate3d(0, var(--home-cta-start-y), 0)
      rotate(var(--home-cta-start-rotate)) scale(var(--home-cta-start-scale));
  }
  28% {
    opacity: 1;
    transform: translate3d(0, var(--home-cta-peak-y), 0)
      rotate(var(--home-cta-peak-rotate)) scale(var(--home-cta-peak-scale));
  }
  46% {
    opacity: 1;
    transform: translate3d(0, 3px, 0) rotate(-2.5deg) scale(0.97);
  }
  64% {
    opacity: 1;
    transform: translate3d(0, -2px, 0) rotate(1.3deg) scale(1.035);
  }
  80% {
    opacity: 1;
    transform: translate3d(0, 1px, 0) rotate(-0.6deg) scale(0.99);
  }
  92% {
    opacity: 1;
    transform: translate3d(0, -0.5px, 0) rotate(0.2deg) scale(1.008);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 640px) {
  .home-page [data-home-reveal="action"]::after,
  .home-page [data-home-reveal="banner"]::after {
    filter: blur(9px);
  }

  .home-page.is-home-motion-ready .fixed-entry-button {
    --home-cta-start-y: 14px;
    --home-cta-start-scale: 0.91;
    --home-cta-start-rotate: -3deg;
    --home-cta-peak-y: -4px;
    --home-cta-peak-scale: 1.07;
    --home-cta-peak-rotate: 4deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .exam-card,
  .date-venue-card,
  .fee-card,
  .access-panel,
  .access-card {
    animation: none;
  }

  .choose-section::before {
    transform: none;
    will-change: auto;
  }

  .home-page .home-banner-motion,
  .home-page .home-cta-motion,
  .home-page.is-home-motion-ready [data-home-reveal="heading"] > img {
    animation: none;
    transform: none;
    transition: none;
  }

  .home-page.is-home-motion-ready [data-home-reveal],
  .home-page.is-home-motion-ready [data-home-reveal].is-home-revealed {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    rotate: 0deg;
    scale: 1;
    transform: none;
    animation: none;
    transition: none;
    will-change: auto;
  }

  .home-page [data-home-reveal="action"]::after,
  .home-page [data-home-reveal="banner"]::after {
    opacity: 0.1;
    transform: translate3d(0, 8px, 0) scale(1);
    animation: none;
    transition: none;
  }

  .home-page.is-home-motion-ready .fixed-entry-button {
    transition: none;
  }

  .home-page .image-button,
  .home-page .banner-card {
    transition: none;
  }

  .home-page .image-button:hover,
  .home-page .image-button:focus-visible,
  .home-page .banner-card:hover,
  .home-page .banner-card:focus-visible {
    transform: none;
  }

  .home-page .image-button:hover .home-banner-motion,
  .home-page .image-button:focus-visible .home-banner-motion,
  .home-page .banner-card:hover .home-banner-motion,
  .home-page .banner-card:focus-visible .home-banner-motion {
    transform: none;
    filter: none;
  }

  .home-page .image-button:hover::after,
  .home-page .image-button:focus-visible::after,
  .home-page .banner-card:hover::after,
  .home-page .banner-card:focus-visible::after {
    opacity: 0.1;
    transform: translate3d(0, 8px, 0) scale(1);
  }

  .home-page.is-home-motion-ready .fixed-entry-button:hover,
  .home-page.is-home-motion-ready .fixed-entry-button:focus-visible {
    transform: none;
  }

  .home-page.is-home-motion-ready .fixed-entry-button.is-home-cta-visible:not(.is-home-cta-suppressed) {
    opacity: 1;
  }
}

/* Recipient-only wallpaper download page */
.wallpaper-download-page {
  background: #fff6fb;
}

.wallpaper-download-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(62px, 7vw, 116px) clamp(20px, 5vw, 86px);
  background:
    radial-gradient(circle at 12% 22%, rgba(255, 255, 255, 0.9) 0 5px, transparent 6px),
    radial-gradient(circle at 88% 68%, rgba(255, 255, 255, 0.86) 0 7px, transparent 8px),
    linear-gradient(120deg, #fff0f7 0%, #f4eaff 48%, #e9f8ff 100%);
}

.wallpaper-download-hero::before,
.wallpaper-download-hero::after {
  position: absolute;
  color: rgba(255, 255, 255, 0.9);
  content: "✦";
  text-shadow:
    54px 32px 0 rgba(255, 255, 255, 0.62),
    -34px 74px 0 rgba(255, 255, 255, 0.48);
  pointer-events: none;
}

.wallpaper-download-hero::before {
  top: 18%;
  left: 8%;
  font-size: clamp(24px, 3.2vw, 52px);
  transform: rotate(-12deg);
}

.wallpaper-download-hero::after {
  right: 10%;
  bottom: 18%;
  font-size: clamp(20px, 2.8vw, 44px);
  transform: rotate(15deg);
}

.wallpaper-download-hero__inner {
  position: relative;
  z-index: 1;
  width: min(100%, 1320px);
  margin: 0 auto;
  text-align: center;
}

.wallpaper-download-hero__label {
  display: inline-grid;
  place-items: center;
  min-height: clamp(40px, 4vw, 58px);
  margin: 0 0 clamp(18px, 2vw, 30px);
  padding: 8px clamp(24px, 3vw, 48px);
  color: #fff;
  background: linear-gradient(135deg, #f27fac 0%, #a47ad3 100%);
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  box-shadow:
    0 0 0 3px rgba(232, 154, 195, 0.18),
    0 8px 20px rgba(126, 91, 151, 0.12);
  font-size: clamp(16px, 1.6vw, 26px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.08em;
}

.wallpaper-download-hero h1 {
  margin: 0;
  color: #7b579b;
  font-size: clamp(44px, 5.8vw, 88px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0.06em;
  text-shadow: 0 4px 0 rgba(255, 255, 255, 0.92);
}

.wallpaper-download-hero h1 span {
  display: block;
  margin-top: 0.14em;
  color: #e85f98;
  font-size: 0.78em;
}

.wallpaper-download-hero__lead {
  margin: clamp(28px, 3.2vw, 48px) auto 0;
  color: #655260;
  font-size: clamp(16px, 1.65vw, 26px);
  font-weight: 800;
  line-height: 1.9;
  letter-spacing: 0.04em;
}

.wallpaper-download-section {
  padding: clamp(48px, 5.8vw, 96px) clamp(16px, 3.2vw, 58px)
    clamp(70px, 7vw, 118px);
  background:
    linear-gradient(180deg, #fffdf8 0%, #fff8ee 45%, #fff4fa 100%);
}

.wallpaper-download-inner {
  width: min(100%, 1580px);
  margin: 0 auto;
}

.wallpaper-download-guide {
  width: min(100%, 1240px);
  margin: 0 auto clamp(34px, 4vw, 62px);
  padding: clamp(30px, 3.5vw, 54px) clamp(22px, 4vw, 62px);
  background: rgba(255, 255, 255, 0.88);
  border: 3px solid #efb2cf;
  border-radius: clamp(22px, 2.6vw, 38px);
  box-shadow: 0 12px 26px rgba(172, 107, 143, 0.08);
  text-align: center;
}

.wallpaper-download-guide h2 {
  margin: 0 0 clamp(22px, 2.4vw, 34px);
  color: #784f6d;
  font-size: clamp(26px, 3vw, 46px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.05em;
}

.wallpaper-download-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.7vw, 24px);
  width: min(100%, 900px);
  margin: 0 auto;
}

.wallpaper-download-nav__item {
  display: grid;
  place-items: center;
  min-height: clamp(54px, 5vw, 72px);
  padding: 10px 14px;
  color: #fff;
  text-decoration: none;
  border: 2px solid rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  box-shadow:
    0 0 0 2px var(--wallpaper-nav-ring),
    0 8px 16px rgba(95, 75, 107, 0.1);
  font-size: clamp(17px, 1.9vw, 28px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.08em;
  transition:
    transform 180ms ease,
    filter 180ms ease;
}

.wallpaper-download-nav__item--colorful {
  --wallpaper-nav-ring: rgba(187, 172, 116, 0.26);
  background: linear-gradient(110deg, #e5a6b9 0%, #a4c5df 48%, #b9cf82 100%);
}

.wallpaper-download-nav__item--blue {
  --wallpaper-nav-ring: rgba(103, 132, 199, 0.24);
  background: linear-gradient(135deg, #7fbde0 0%, #9186d1 100%);
}

.wallpaper-download-nav__item--pink {
  --wallpaper-nav-ring: rgba(225, 106, 159, 0.24);
  background: linear-gradient(135deg, #f39bbd 0%, #df72a3 100%);
}

.wallpaper-download-nav__item:hover,
.wallpaper-download-nav__item:focus-visible {
  filter: brightness(1.04);
  transform: translateY(-3px);
}

.wallpaper-download-nav__item:focus-visible,
.wallpaper-download-preview:focus-visible,
.wallpaper-download-button:focus-visible {
  outline: 4px solid #3e62b4;
  outline-offset: 5px;
}

.wallpaper-download-instructions {
  width: min(100%, 940px);
  margin: clamp(28px, 3vw, 42px) auto 0;
  padding-top: clamp(22px, 2.2vw, 32px);
  color: #675c64;
  border-top: 2px dashed #e7bfd1;
  text-align: left;
  font-size: clamp(14px, 1.3vw, 20px);
  font-weight: 700;
  line-height: 1.75;
}

.wallpaper-download-instructions > p {
  margin: 0 0 8px;
  text-align: center;
  font-weight: 900;
}

.wallpaper-download-instructions ul {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding-left: 1.4em;
}

.wallpaper-download-list {
  display: grid;
  gap: clamp(24px, 3vw, 46px);
}

.wallpaper-download-card {
  --wallpaper-accent: #d781a8;
  --wallpaper-accent-dark: #b95e88;
  --wallpaper-card-bg: #fff6fa;
  scroll-margin-top: 120px;
  padding: clamp(38px, 4.5vw, 72px) clamp(24px, 5vw, 82px)
    clamp(42px, 5vw, 78px);
  background: var(--wallpaper-card-bg);
  border: 3px solid var(--wallpaper-accent);
  border-radius: clamp(24px, 2.8vw, 42px);
  box-shadow: 0 14px 28px rgba(107, 83, 103, 0.08);
}

.wallpaper-download-card--colorful {
  --wallpaper-accent: #b7b995;
  --wallpaper-accent-dark: #829765;
  --wallpaper-card-bg: linear-gradient(120deg, #fff5f7 0%, #f2f8ff 48%, #f8fae8 100%);
}

.wallpaper-download-card--blue {
  --wallpaper-accent: #8faada;
  --wallpaper-accent-dark: #687fb8;
  --wallpaper-card-bg: linear-gradient(120deg, #f5f2ff 0%, #eef8ff 100%);
}

.wallpaper-download-card--pink {
  --wallpaper-accent: #e79aba;
  --wallpaper-accent-dark: #c86591;
  --wallpaper-card-bg: linear-gradient(120deg, #fff2f7 0%, #fff8fb 100%);
}

.wallpaper-download-card__heading {
  margin-bottom: clamp(30px, 3.4vw, 50px);
  text-align: center;
}

.wallpaper-download-card__heading h2 {
  display: inline-grid;
  place-items: center;
  min-width: clamp(180px, 18vw, 290px);
  min-height: clamp(54px, 5.4vw, 78px);
  margin: 0 0 clamp(14px, 1.5vw, 22px);
  padding: 8px 28px;
  color: #fff;
  background: linear-gradient(135deg, var(--wallpaper-accent) 0%, var(--wallpaper-accent-dark) 100%);
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wallpaper-accent) 25%, transparent);
  font-size: clamp(25px, 2.8vw, 43px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.08em;
}

.wallpaper-download-card__heading p {
  margin: 0;
  color: #655b62;
  font-size: clamp(15px, 1.45vw, 23px);
  font-weight: 800;
  line-height: 1.7;
  letter-spacing: 0.04em;
}

.wallpaper-download-options {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) clamp(200px, 21vw, 320px);
  gap: clamp(30px, 4.5vw, 72px);
  align-items: center;
}

.wallpaper-download-option {
  display: grid;
  gap: clamp(14px, 1.8vw, 26px);
  justify-items: center;
  min-width: 0;
}

.wallpaper-download-option h3 {
  margin: 0;
  color: var(--wallpaper-accent-dark);
  font-size: clamp(20px, 2.1vw, 32px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.06em;
}

.wallpaper-download-preview {
  display: grid;
  gap: 12px;
  justify-items: center;
  width: 100%;
  color: var(--wallpaper-accent-dark);
  text-decoration: none;
  font-size: clamp(13px, 1.15vw, 17px);
  font-weight: 800;
  line-height: 1.4;
}

.wallpaper-download-preview img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(14px, 1.5vw, 24px);
  box-shadow: 0 12px 24px rgba(79, 61, 77, 0.12);
  transition:
    transform 200ms ease,
    box-shadow 200ms ease;
}

.wallpaper-download-option--pc .wallpaper-download-preview img {
  max-width: 920px;
}

.wallpaper-download-option--sp .wallpaper-download-preview img {
  max-width: 280px;
}

.wallpaper-download-preview:hover img,
.wallpaper-download-preview:focus-visible img {
  box-shadow: 0 16px 30px rgba(79, 61, 77, 0.18);
  transform: translateY(-4px);
}

.wallpaper-download-button {
  display: grid;
  place-items: center;
  width: min(100%, 460px);
  min-height: clamp(58px, 5.5vw, 76px);
  padding: 12px clamp(18px, 2.5vw, 38px);
  color: #fff;
  text-align: center;
  text-decoration: none;
  background: linear-gradient(135deg, var(--wallpaper-accent) 0%, var(--wallpaper-accent-dark) 100%);
  border: 2px solid rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--wallpaper-accent) 22%, transparent),
    0 9px 18px rgba(88, 67, 84, 0.12);
  font-size: clamp(15px, 1.55vw, 23px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.04em;
  transition:
    transform 180ms ease,
    filter 180ms ease;
}

.wallpaper-download-button:hover,
.wallpaper-download-button:focus-visible {
  filter: brightness(1.05);
  transform: translateY(-3px);
}

.wallpaper-download-page .contents-section {
  padding-top: clamp(56px, 4.8vw, 90px);
  background: #fff2f7;
}

@media (max-width: 980px) {
  .wallpaper-download-hero__lead br {
    display: none;
  }

  .wallpaper-download-options {
    grid-template-columns: minmax(0, 1fr) clamp(170px, 25vw, 230px);
    gap: 28px;
  }

  .wallpaper-download-card {
    padding-right: clamp(22px, 4.5vw, 44px);
    padding-left: clamp(22px, 4.5vw, 44px);
  }

  .wallpaper-download-option--sp .wallpaper-download-preview img {
    max-width: 230px;
  }
}

@media (max-width: 640px) {
  .wallpaper-download-hero {
    padding: 44px 18px 48px;
  }

  .wallpaper-download-hero::before,
  .wallpaper-download-hero::after {
    opacity: 0.54;
  }

  .wallpaper-download-hero__label {
    min-height: 36px;
    margin-bottom: 16px;
    padding: 7px 20px;
    font-size: 13px;
  }

  .wallpaper-download-hero h1 {
    font-size: clamp(35px, 11vw, 48px);
    letter-spacing: 0.03em;
  }

  .wallpaper-download-hero__lead {
    margin-top: 24px;
    font-size: 13px;
    line-height: 1.8;
  }

  .wallpaper-download-section {
    padding: 32px 8px 64px;
  }

  .wallpaper-download-guide {
    margin-bottom: 22px;
    padding: 26px 16px;
    border-width: 2px;
    border-radius: 20px;
  }

  .wallpaper-download-guide h2 {
    margin-bottom: 20px;
    font-size: 22px;
  }

  .wallpaper-download-nav {
    gap: 7px;
  }

  .wallpaper-download-nav__item {
    min-height: 44px;
    padding: 8px 5px;
    font-size: clamp(12px, 4vw, 15px);
    letter-spacing: 0.03em;
  }

  .wallpaper-download-instructions {
    margin-top: 24px;
    padding-top: 18px;
    font-size: 12px;
  }

  .wallpaper-download-list {
    gap: 18px;
  }

  .wallpaper-download-card {
    scroll-margin-top: 90px;
    padding: 30px 18px 36px;
    border-width: 2px;
    border-radius: 20px;
  }

  .wallpaper-download-card__heading {
    margin-bottom: 28px;
  }

  .wallpaper-download-card__heading h2 {
    min-width: 150px;
    min-height: 48px;
    margin-bottom: 12px;
    padding: 7px 20px;
    font-size: 23px;
  }

  .wallpaper-download-card__heading p {
    font-size: 12px;
  }

  .wallpaper-download-options {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .wallpaper-download-option {
    gap: 12px;
  }

  .wallpaper-download-option h3 {
    font-size: 18px;
  }

  .wallpaper-download-option--pc .wallpaper-download-preview img {
    width: 100%;
  }

  .wallpaper-download-option--sp .wallpaper-download-preview img {
    width: min(82%, 280px);
    max-width: 280px;
  }

  .wallpaper-download-preview {
    font-size: 12px;
  }

  .wallpaper-download-button {
    width: min(100%, 330px);
    min-height: 52px;
    padding: 10px 16px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wallpaper-download-nav__item,
  .wallpaper-download-preview img,
  .wallpaper-download-button {
    transition: none;
  }

  .wallpaper-download-nav__item:hover,
  .wallpaper-download-nav__item:focus-visible,
  .wallpaper-download-preview:hover img,
  .wallpaper-download-preview:focus-visible img,
  .wallpaper-download-button:hover,
  .wallpaper-download-button:focus-visible {
    transform: none;
  }
}

/* Shared gentle motion for all pages except TOP */
.site-motion-page {
  overflow-x: clip;
}

.site-motion-page .news-social-section {
  overflow-x: clip;
}

.site-banner-motion,
.site-cta-motion {
  display: block;
}

.site-motion-page.is-site-motion-ready [data-site-reveal] {
  --site-reveal-delay: 0ms;
}

.site-motion-page.is-site-motion-ready [data-site-reveal]:not(.is-site-revealed) {
  pointer-events: none;
}

.site-motion-page.is-site-motion-ready [data-site-reveal].is-site-revealed {
  pointer-events: auto;
}

.site-motion-page.is-site-motion-ready
  [data-site-reveal]:not([data-site-reveal="action"]):not(
    [data-site-reveal="banner"]
  ):not([data-site-reveal="character"]) {
  --site-reveal-duration: 920ms;
  --site-reveal-y: 22px;
  opacity: 0;
  visibility: visible;
  translate: 0 var(--site-reveal-y);
  transition:
    opacity var(--site-reveal-duration) cubic-bezier(0.22, 1, 0.36, 1),
    translate var(--site-reveal-duration) cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear var(--site-reveal-duration);
  will-change: opacity, translate;
}

.site-motion-page.is-site-motion-ready [data-site-reveal="heading"] {
  --site-reveal-duration: 850ms;
  --site-reveal-y: 18px;
}

.site-motion-page.is-site-motion-ready
  [data-site-reveal]:not([data-site-reveal="action"]):not(
    [data-site-reveal="banner"]
  ):not([data-site-reveal="character"]).is-site-revealed {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition-delay: var(--site-reveal-delay), var(--site-reveal-delay), 0s;
  will-change: auto;
}

.site-motion-page [data-site-reveal="action"],
.site-motion-page [data-site-reveal="banner"] {
  --home-banner-duration: 650ms;
  --home-banner-start-y: 22px;
  --home-banner-start-scale-x: 0.94;
  --home-banner-start-scale-y: 0.94;
  --home-banner-peak-scale-x: 1.025;
  --home-banner-peak-scale-y: 0.98;
  --home-banner-settle-scale-x: 0.995;
  --home-banner-settle-scale-y: 1.01;
  --home-banner-start-rotate: 0deg;
  --home-banner-peak-rotate: 0deg;
  --home-banner-settle-rotate: 0deg;
  --site-banner-shadow: rgba(111, 77, 105, 0.18);
  position: relative;
  isolation: isolate;
}

.site-motion-page [data-site-reveal="action"] {
  --home-banner-duration: 720ms;
  --home-banner-start-y: 26px;
  --home-banner-start-scale-x: 0.92;
  --home-banner-start-scale-y: 0.92;
  --home-banner-peak-scale-x: 1.04;
  --home-banner-peak-scale-y: 0.97;
  --home-banner-settle-scale-x: 0.99;
  --home-banner-settle-scale-y: 1.015;
}

.site-motion-page .image-button--pink[data-site-reveal="action"] {
  --home-banner-start-rotate: -0.8deg;
  --home-banner-peak-rotate: 0.7deg;
  --home-banner-settle-rotate: -0.3deg;
  --site-banner-shadow: rgba(235, 110, 164, 0.2);
}

.site-motion-page .image-button--blue[data-site-reveal="action"] {
  --home-banner-start-rotate: 0.8deg;
  --home-banner-peak-rotate: -0.7deg;
  --home-banner-settle-rotate: 0.3deg;
  --site-banner-shadow: rgba(74, 137, 217, 0.2);
}

.site-motion-page [data-site-reveal="action"]::after,
.site-motion-page [data-site-reveal="banner"]::after {
  position: absolute;
  content: "";
  z-index: -1;
  inset: 14% 5% 2%;
  border-radius: inherit;
  background: var(--site-banner-shadow);
  opacity: 0.1;
  filter: blur(13px);
  transform: translate3d(0, 8px, 0) scale(1);
  pointer-events: none;
  transition: opacity 500ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-motion-page.is-site-motion-ready [data-site-reveal="action"],
.site-motion-page.is-site-motion-ready [data-site-reveal="banner"] {
  opacity: 0;
  visibility: visible;
  translate: 0 var(--home-banner-start-y);
}

.site-motion-page.is-site-motion-ready
  [data-site-reveal="action"].is-site-revealed,
.site-motion-page.is-site-motion-ready
  [data-site-reveal="banner"].is-site-revealed {
  visibility: visible;
  animation: home-banner-rise var(--home-banner-duration) cubic-bezier(0.22, 1, 0.36, 1)
    var(--site-reveal-delay) both;
}

.site-motion-page.is-site-motion-ready
  [data-site-reveal="action"].is-site-revealed
  .site-banner-motion,
.site-motion-page.is-site-motion-ready
  [data-site-reveal="banner"].is-site-revealed
  .site-banner-motion {
  animation: home-banner-mochi var(--home-banner-duration) cubic-bezier(0.22, 1, 0.36, 1)
    var(--site-reveal-delay) both;
}

.site-motion-page.is-site-motion-ready
  [data-site-reveal="action"].is-site-revealed::after,
.site-motion-page.is-site-motion-ready
  [data-site-reveal="banner"].is-site-revealed::after {
  animation: home-banner-shadow var(--home-banner-duration) cubic-bezier(0.22, 1, 0.36, 1)
    var(--site-reveal-delay) both;
}

.site-motion-page.is-site-motion-ready [data-site-reveal="character"] {
  opacity: 0;
  visibility: visible;
  transform-origin: center bottom;
}

.site-motion-page.is-site-motion-ready
  [data-site-reveal="character"].is-site-revealed {
  visibility: visible;
  animation: home-character-pop 1100ms cubic-bezier(0.22, 1, 0.36, 1)
    var(--site-reveal-delay) both;
}

.site-motion-page.is-site-motion-ready
  [data-site-reveal="heading"].is-site-revealed
  > img {
  animation: home-heading-icon-pop 900ms cubic-bezier(0.22, 1, 0.36, 1)
    var(--site-reveal-delay) both;
  transform-origin: center bottom;
}

.site-motion-page.is-site-motion-ready [data-site-reveal].is-site-motion-complete {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  rotate: 0deg;
  scale: 1;
  animation: none;
  transition: none;
  will-change: auto;
}

.site-motion-page.is-site-motion-ready
  [data-site-reveal].is-site-motion-complete
  .site-banner-motion,
.site-motion-page.is-site-motion-ready
  [data-site-reveal].is-site-motion-complete
  > img {
  transform: none;
  animation: none;
}

.site-motion-page.is-site-motion-ready
  [data-site-reveal="action"].is-site-motion-complete::after,
.site-motion-page.is-site-motion-ready
  [data-site-reveal="banner"].is-site-motion-complete::after {
  opacity: 0.1;
  transform: translate3d(0, 8px, 0) scale(1);
  animation: none;
}

.site-motion-page .image-button,
.site-motion-page .banner-card,
.site-motion-page .image-button:hover,
.site-motion-page .image-button:focus-visible,
.site-motion-page .banner-card:hover,
.site-motion-page .banner-card:focus-visible {
  transform: none;
  filter: none;
}

.site-motion-page .site-banner-motion {
  position: relative;
  z-index: 1;
  transform-origin: center;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), filter 500ms ease;
}

.site-motion-page .image-button:hover .site-banner-motion,
.site-motion-page .image-button:focus-visible .site-banner-motion,
.site-motion-page .banner-card:hover .site-banner-motion,
.site-motion-page .banner-card:focus-visible .site-banner-motion {
  transform: translate3d(0, -5px, 0) scale(1.035);
  filter: brightness(1.02);
  transition-duration: 420ms;
}

.site-motion-page .image-button:hover::after,
.site-motion-page .image-button:focus-visible::after,
.site-motion-page .banner-card:hover::after,
.site-motion-page .banner-card:focus-visible::after {
  opacity: 0.18;
  transform: translate3d(0, 10px, 0) scale(1.05);
  transition-duration: 420ms;
}

.site-motion-page .image-button:focus-visible,
.site-motion-page .banner-card:focus-visible,
.site-motion-page .fixed-entry-button:focus-visible {
  outline: 3px solid rgba(29, 78, 171, 0.92);
  outline-offset: 4px;
}

.site-motion-page.is-site-motion-ready .fixed-entry-button {
  --home-cta-start-y: 18px;
  --home-cta-start-scale: 0.88;
  --home-cta-start-rotate: -4deg;
  --home-cta-peak-y: -5px;
  --home-cta-peak-scale: 1.1;
  --home-cta-peak-rotate: 5deg;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: none;
  transition:
    opacity 320ms ease,
    visibility 0s linear 320ms,
    transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 500ms ease;
  will-change: opacity;
}

.site-motion-page.is-site-motion-ready
  .fixed-entry-button.is-site-cta-visible:not(.is-site-cta-suppressed) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.site-motion-page.is-site-motion-ready .fixed-entry-button.is-site-cta-suppressed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.site-motion-page.is-site-motion-ready .fixed-entry-button:hover,
.site-motion-page.is-site-motion-ready .fixed-entry-button:focus-visible {
  transform: translate3d(0, -5px, 0) scale(1.025);
  filter: drop-shadow(0 11px 17px rgba(68, 96, 170, 0.26)) brightness(1.015);
  transition-duration: 420ms;
}

.site-motion-page .site-cta-motion {
  transform-origin: center bottom;
}

.site-motion-page.is-site-motion-ready
  .fixed-entry-button.is-site-cta-entering
  .site-cta-motion {
  animation: home-cta-enter 1150ms linear both;
}

.site-motion-page.is-site-motion-ready
  .fixed-entry-button.is-site-cta-motion-complete
  .site-cta-motion {
  opacity: 1;
  transform: none;
  animation: none;
}

/* TOP-style pastel frame effect for secondary pages */
.site-motion-page .has-site-frame-effect {
  position: relative;
  isolation: isolate;
}

.site-motion-page .has-site-frame-effect > span.site-frame-effect {
  --site-frame-opacity-from: 0.52;
  --site-frame-opacity-to: 0.72;
  position: absolute;
  z-index: 5;
  inset: 0;
  padding: clamp(2px, 0.22vw, 4px);
  background: linear-gradient(
    115deg,
    #eeb7d0,
    #c3e4f4,
    #f3e6ad,
    #ddc8eb,
    #f2bfd6,
    #bfe0f1
  );
  background-position: 0% 50%;
  background-size: 240% 240%;
  border-radius: inherit;
  opacity: var(--site-frame-opacity-from);
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.site-motion-page
  .has-site-frame-effect.has-site-frame-effect--soft
  > span.site-frame-effect {
  --site-frame-opacity-from: 0.32;
  --site-frame-opacity-to: 0.5;
  padding: 2px;
}

.site-motion-page
  .has-site-frame-effect.is-site-frame-active
  > .site-frame-effect {
  animation: site-frame-pastel-flow 12s ease-in-out var(--site-frame-delay, 0s) infinite
    alternate;
}

@keyframes site-frame-pastel-flow {
  0% {
    background-position: 0% 50%;
    opacity: var(--site-frame-opacity-from);
  }
  100% {
    background-position: 100% 50%;
    opacity: var(--site-frame-opacity-to);
  }
}

@supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .site-motion-page .has-site-frame-effect > span.site-frame-effect {
    padding: 0;
    background: none;
    border: 3px solid rgba(221, 174, 211, 0.56);
  }

  .site-motion-page
    .has-site-frame-effect.has-site-frame-effect--soft
    > span.site-frame-effect {
    border-width: 2px;
    border-color: rgba(195, 216, 235, 0.44);
  }
}

/* One-time character accents inside event and practice content */
.site-motion-page .event-heading > img,
.site-motion-page .photo-card-icon,
.site-motion-page .practice-heading > img,
.site-motion-page .scope-character,
.site-motion-page .practice-campaign-character {
  --site-peek-x: 0px;
  --site-peek-rotate: -2deg;
  --site-peek-delay: 150ms;
  transform-origin: center bottom;
}

.site-motion-page .photo-card-icon--left {
  --site-peek-x: -14px;
  --site-peek-rotate: -3deg;
}

.site-motion-page .photo-card-icon--right {
  --site-peek-x: 14px;
  --site-peek-rotate: 3deg;
}

.site-motion-page .photo-card-icon {
  --site-peek-delay: 240ms;
}

.site-motion-page .scope-card:nth-child(1) .scope-character {
  --site-peek-delay: 180ms;
}

.site-motion-page .scope-card:nth-child(2) .scope-character {
  --site-peek-delay: 280ms;
}

.site-motion-page .scope-card:nth-child(3) .scope-character {
  --site-peek-delay: 380ms;
}

.site-motion-page .practice-campaign-character {
  --site-peek-delay: 220ms;
}

.site-motion-page.is-site-motion-ready
  .event-panel.is-site-revealed
  .event-heading
  > img,
.site-motion-page.is-site-motion-ready
  .practice-panel.is-site-revealed
  .practice-heading
  > img,
.site-motion-page.is-site-motion-ready
  .practice-panel.is-site-revealed
  .scope-character,
.site-motion-page.is-site-motion-ready
  .practice-campaign-panel.is-site-revealed
  .practice-campaign-character {
  animation: site-character-peek 780ms cubic-bezier(0.22, 1, 0.36, 1)
    var(--site-peek-delay) both;
}

.site-motion-page.is-site-motion-ready
  .event-panel.is-site-revealed
  .photo-card-icon--left {
  animation: photo-icon-float-tilt 1050ms cubic-bezier(0.22, 1, 0.36, 1) 240ms both;
}

.site-motion-page.is-site-motion-ready
  .event-panel.is-site-revealed
  .photo-card-icon--right {
  animation: photo-icon-pancake-pop 1100ms cubic-bezier(0.22, 1, 0.36, 1) 360ms both;
}

@keyframes photo-icon-float-tilt {
  0% {
    opacity: 0;
    transform: translate3d(-14px, 18px, 0) rotate(-9deg) scale(0.84);
  }
  54% {
    opacity: 1;
    transform: translate3d(3px, -7px, 0) rotate(7deg) scale(1.06);
  }
  72% {
    opacity: 1;
    transform: translate3d(-2px, -1px, 0) rotate(-5deg) scale(0.98);
  }
  86% {
    opacity: 1;
    transform: translate3d(1px, -2px, 0) rotate(2deg) scale(1.015);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes photo-icon-pancake-pop {
  0% {
    opacity: 0;
    transform: translate3d(14px, 18px, 0) rotate(5deg) scale(0.84);
  }
  50% {
    opacity: 1;
    transform: translate3d(0, -8px, 0) rotate(-2deg) scale(1.035);
  }
  68% {
    opacity: 1;
    transform: translate3d(0, 2px, 0) rotate(1.5deg) scale(1.07, 0.93);
  }
  84% {
    opacity: 1;
    transform: translate3d(0, -2px, 0) rotate(-0.8deg) scale(0.985, 1.025);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes site-character-peek {
  0% {
    opacity: 0;
    transform: translate3d(var(--site-peek-x), 22px, 0)
      rotate(var(--site-peek-rotate)) scale(0.86);
  }
  62% {
    opacity: 1;
    transform: translate3d(0, -4px, 0) rotate(1deg) scale(1.045);
  }
  82% {
    opacity: 1;
    transform: translate3d(0, 1px, 0) rotate(-0.4deg) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* BOOK CAFE logo settles like a small hanging sign */
.site-motion-page.is-site-motion-ready
  .bookcafe-menu-panel.is-site-revealed
  .bookcafe-menu-logo {
  transform-origin: 50% 4%;
  animation: bookcafe-logo-sign-swing 820ms cubic-bezier(0.22, 1, 0.36, 1) 190ms both;
}

@keyframes bookcafe-logo-sign-swing {
  0% {
    opacity: 0;
    transform: translate3d(0, -8px, 0) rotate(-2.4deg) scale(0.95);
  }
  55% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(1.2deg) scale(1.015);
  }
  76% {
    opacity: 1;
    transform: rotate(-0.55deg) scale(0.995);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* Soft, touch-friendly "muni" press feedback */
.header-apply,
.official-button,
.answer-button,
.answer-share-button {
  transform-origin: center;
}

.header-apply {
  transition:
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 200ms ease;
}

.header-apply:active,
.official-button:active,
.answer-button:active,
.answer-share-button:active {
  transform: translate3d(0, 2px, 0) scale(0.98, 0.95);
  filter: brightness(0.98);
  transition-duration: 110ms;
}

.home-page .image-button:not(:active) .home-banner-motion,
.home-page .banner-card:not(:active) .home-banner-motion,
.site-motion-page .image-button:not(:active) .site-banner-motion,
.site-motion-page .banner-card:not(:active) .site-banner-motion {
  transition-duration: 240ms;
}

.home-page .image-button:active .home-banner-motion,
.home-page .banner-card:active .home-banner-motion,
.site-motion-page .image-button:active .site-banner-motion,
.site-motion-page .banner-card:active .site-banner-motion {
  transform: translate3d(0, 2px, 0) scale(0.98, 0.95);
  filter: brightness(0.985);
  transition-duration: 110ms;
}

.home-page .fixed-entry-button .home-cta-motion,
.site-motion-page .fixed-entry-button .site-cta-motion {
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 220ms ease;
}

.home-page .fixed-entry-button:active .home-cta-motion,
.site-motion-page .fixed-entry-button:active .site-cta-motion {
  transform: translate3d(0, 2px, 0) scale(0.97, 0.94);
  filter: brightness(0.985);
  transition-duration: 110ms;
}

/* Practice choice feedback */
.quiz-options input {
  transition: border-color 220ms ease, background-color 220ms ease;
}

.quiz-options input::before {
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.quiz-options label.is-quiz-choice-picked {
  animation: quiz-choice-pick 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.quiz-card.is-quiz-choice-active .quiz-title span {
  animation: quiz-number-pokko 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes quiz-choice-pick {
  0% {
    transform: none;
  }
  44% {
    transform: translate3d(0, -2px, 0) scale(1.015);
  }
  72% {
    transform: translate3d(0, 1px, 0) scale(0.995);
  }
  100% {
    transform: none;
  }
}

@keyframes quiz-number-pokko {
  0% {
    transform: scale(1);
  }
  46% {
    transform: translate3d(0, -2px, 0) scale(1.06, 0.96);
  }
  74% {
    transform: translate3d(0, 1px, 0) scale(0.985, 1.015);
  }
  100% {
    transform: none;
  }
}

/* Answer result and review feedback */
.answer-page.is-answer-motion-ready .answer-result-panel {
  isolation: isolate;
}

.answer-page.is-answer-motion-ready .answer-result-panel > * {
  position: relative;
  z-index: 1;
}

.answer-page.is-answer-motion-ready
  .answer-result-panel
  > .answer-result-character,
.answer-page .answer-check-panel > .answer-check-character {
  position: relative;
  z-index: 6;
}

.answer-page .answer-result-panel > .answer-fanfare {
  --fanfare-scale: 1.12;
  position: absolute;
  z-index: 0;
  top: -52px;
  left: 50%;
  width: min(96%, 880px);
  height: clamp(340px, 31vw, 440px);
  transform: translateX(-50%) scale(var(--fanfare-scale));
  transform-origin: center top;
  pointer-events: none;
}

.answer-fanfare::before,
.answer-fanfare::after {
  position: absolute;
  top: 42%;
  left: 50%;
  content: "";
  opacity: 0;
  pointer-events: none;
}

.answer-page.is-answer-celebrating.is-answer-motion-visible .answer-fanfare::before {
  width: clamp(260px, 31vw, 410px);
  aspect-ratio: 1;
  background: repeating-conic-gradient(
    from -8deg,
    rgba(255, 203, 77, 0.5) 0deg 8deg,
    transparent 8deg 18deg,
    rgba(239, 126, 174, 0.35) 18deg 24deg,
    transparent 24deg 36deg
  );
  border-radius: 50%;
  animation: answer-fanfare-rays 1650ms cubic-bezier(0.22, 1, 0.36, 1) 230ms both;
}

.answer-page.is-answer-celebrating.is-answer-motion-visible .answer-fanfare::after {
  width: clamp(122px, 15vw, 196px);
  aspect-ratio: 1;
  border: 5px solid rgba(255, 201, 61, 0.62);
  border-radius: 50%;
  box-shadow:
    0 0 0 12px rgba(239, 126, 174, 0.27),
    0 0 34px 18px rgba(255, 221, 117, 0.24);
  animation: answer-fanfare-ring 1350ms cubic-bezier(0.22, 1, 0.36, 1) 300ms both;
}

.answer-fanfare-piece {
  position: absolute;
  top: 42%;
  left: 50%;
  opacity: 0;
  pointer-events: none;
}

.answer-fanfare-piece--confetti {
  width: 9px;
  height: 17px;
  background: var(--fanfare-color);
  border: 2px solid rgba(255, 255, 255, 0.66);
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(109, 75, 42, 0.12);
}

.answer-fanfare-piece--confetti.answer-fanfare-piece--round {
  width: 13px;
  height: 13px;
  border-radius: 50%;
}

.answer-fanfare-piece--accent {
  z-index: 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 4px 4px rgba(126, 78, 54, 0.14));
}

.answer-fanfare-piece--star {
  width: clamp(38px, 3.8vw, 56px);
  aspect-ratio: 75 / 67;
  background-image: url("../images/rkm-star-img.png");
}

.answer-fanfare-piece--heart {
  width: clamp(30px, 3.2vw, 44px);
  aspect-ratio: 61 / 55;
  background-image: url("../images/rkm-hart-img.png");
}

.answer-page.is-answer-celebrating.is-answer-motion-visible
  .answer-fanfare-piece--confetti {
  animation: answer-fanfare-confetti 1600ms cubic-bezier(0.16, 0.82, 0.28, 1)
    calc(330ms + var(--fanfare-delay)) both;
}

.answer-page.is-answer-celebrating.is-answer-motion-visible
  .answer-fanfare-piece--accent {
  animation: answer-fanfare-accent 1850ms cubic-bezier(0.16, 0.82, 0.28, 1)
    calc(300ms + var(--fanfare-delay)) both;
}

@keyframes answer-fanfare-rays {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-12deg) scale(0.3);
  }
  46% {
    opacity: 0.88;
    transform: translate(-50%, -50%) rotate(3deg) scale(1.06, 0.96);
  }
  72% {
    opacity: 0.54;
    transform: translate(-50%, -50%) rotate(-1deg) scale(0.99, 1.01);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg) scale(1.08);
  }
}

@keyframes answer-fanfare-ring {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.42);
  }
  42% {
    opacity: 0.82;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.75);
  }
}

@keyframes answer-fanfare-confetti {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(0.45);
  }
  18% {
    opacity: 1;
  }
  64% {
    opacity: 1;
    transform: translate3d(
        calc(-50% + var(--fanfare-x)),
        calc(-50% + var(--fanfare-y)),
        0
      )
      rotate(var(--fanfare-rotate)) scale(1.04);
  }
  100% {
    opacity: 0;
    transform: translate3d(
        calc(-50% + var(--fanfare-x)),
        calc(-50% + var(--fanfare-y) + 34px),
        0
      )
      rotate(calc(var(--fanfare-rotate) + 80deg)) scale(0.9);
  }
}

.answer-page .answer-result-panel::before {
  position: absolute;
  z-index: 4;
  inset: -5px;
  content: "";
  border: clamp(3px, 0.35vw, 6px) solid rgba(244, 153, 196, 0.72);
  border-radius: inherit;
  box-shadow:
    0 0 0 0 rgba(255, 219, 111, 0),
    0 0 0 rgba(147, 203, 238, 0);
  opacity: 0;
  transform: scale(0.99);
  pointer-events: none;
}

.answer-page.is-answer-celebrating.is-answer-motion-visible
  .answer-result-panel::before {
  animation: answer-panel-celebration-frame 2400ms ease-out 80ms both;
}

@keyframes answer-fanfare-accent {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0)
      rotate(calc(var(--fanfare-rotate) - 16deg)) scale(0.2);
  }
  20% {
    opacity: 1;
  }
  62% {
    opacity: 1;
    transform: translate3d(
        calc(-50% + var(--fanfare-x)),
        calc(-50% + var(--fanfare-y)),
        0
      )
      rotate(var(--fanfare-rotate)) scale(1.13);
  }
  78% {
    opacity: 0.96;
    transform: translate3d(
        calc(-50% + var(--fanfare-x)),
        calc(-50% + var(--fanfare-y) - 7px),
        0
      )
      rotate(calc(var(--fanfare-rotate) - 5deg)) scale(0.96);
  }
  100% {
    opacity: 0;
    transform: translate3d(
        calc(-50% + var(--fanfare-x)),
        calc(-50% + var(--fanfare-y) + 20px),
        0
      )
      rotate(calc(var(--fanfare-rotate) + 24deg)) scale(0.72);
  }
}

@keyframes answer-panel-celebration-frame {
  0% {
    border-color: rgba(244, 153, 196, 0);
    box-shadow:
      0 0 0 0 rgba(255, 219, 111, 0),
      0 0 0 rgba(147, 203, 238, 0);
    opacity: 0;
    transform: scale(0.99);
  }
  24% {
    border-color: rgba(255, 191, 79, 0.9);
    box-shadow:
      0 0 0 7px rgba(255, 222, 125, 0.28),
      0 0 30px rgba(244, 153, 196, 0.36);
    opacity: 1;
    transform: scale(1.006);
  }
  48% {
    border-color: rgba(135, 201, 239, 0.86);
    box-shadow:
      0 0 0 5px rgba(166, 219, 244, 0.22),
      0 0 35px rgba(255, 206, 98, 0.32);
    opacity: 0.92;
    transform: scale(1);
  }
  72% {
    border-color: rgba(237, 135, 188, 0.82);
    box-shadow:
      0 0 0 4px rgba(246, 177, 211, 0.2),
      0 0 28px rgba(168, 153, 227, 0.24);
    opacity: 0.76;
  }
  100% {
    border-color: rgba(244, 153, 196, 0);
    box-shadow:
      0 0 0 0 rgba(255, 219, 111, 0),
      0 0 0 rgba(147, 203, 238, 0);
    opacity: 0;
    transform: scale(1);
  }
}

.answer-page.is-answer-motion-ready .answer-result-panel::after {
  position: absolute;
  z-index: 0;
  top: 3%;
  left: 50%;
  width: min(72%, 860px);
  aspect-ratio: 2.4 / 1;
  content: "";
  background: radial-gradient(ellipse, rgba(255, 226, 162, 0.42), transparent 69%);
  opacity: 0;
  transform: translateX(-50%) scale(0.72);
  pointer-events: none;
}

.answer-page.is-answer-motion-ready:not(.is-answer-motion-visible)
  .answer-result-panel,
.answer-page.is-answer-motion-ready:not(.is-answer-motion-visible)
  .answer-result-character,
.answer-page.is-answer-motion-ready:not(.is-answer-motion-visible) .answer-title,
.answer-page.is-answer-motion-ready:not(.is-answer-motion-visible)
  .answer-score-pill,
.answer-page.is-answer-motion-ready:not(.is-answer-motion-visible)
  .answer-share-copy,
.answer-page.is-answer-motion-ready:not(.is-answer-motion-visible)
  .answer-share-card {
  opacity: 0;
  visibility: visible;
}

.answer-page.is-answer-motion-ready.is-answer-motion-visible .answer-result-panel {
  animation: answer-panel-arrive 820ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.answer-page.is-answer-motion-ready.is-answer-motion-visible
  .answer-result-panel::after {
  animation: answer-soft-puff 1050ms cubic-bezier(0.22, 1, 0.36, 1) 90ms both;
}

.answer-page.is-answer-motion-ready.is-answer-motion-visible
  .answer-result-character {
  transform-origin: center bottom;
  animation: answer-character-arrive 1050ms cubic-bezier(0.22, 1, 0.36, 1) 100ms both;
}

.answer-page.is-answer-celebrating.is-answer-motion-ready.is-answer-motion-visible
  .answer-result-character {
  animation: answer-character-celebrate 1480ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both;
}

.answer-page.is-answer-motion-ready.is-answer-motion-visible .answer-title {
  animation: answer-copy-arrive 760ms cubic-bezier(0.22, 1, 0.36, 1) 230ms both;
}

.answer-page .answer-score-pill {
  --answer-pill-spark-delay: 0ms;
  position: relative;
  overflow: visible;
  isolation: isolate;
}

.answer-page .answer-score-pill:nth-child(2) {
  --answer-pill-spark-delay: 110ms;
}

.answer-page .answer-score-pill:nth-child(3) {
  --answer-pill-spark-delay: 220ms;
}

.answer-page .answer-score-pill::before,
.answer-page .answer-score-pill::after {
  position: absolute;
  z-index: 2;
  width: clamp(22px, 2.2vw, 32px);
  aspect-ratio: 75 / 67;
  content: "";
  background: url("../images/rkm-star-img.png") center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
}

.answer-page .answer-score-pill::before {
  --answer-pill-spark-start: -28deg;
  --answer-pill-spark-end: 18deg;
  top: -18px;
  left: -8px;
}

.answer-page .answer-score-pill::after {
  --answer-pill-spark-start: 30deg;
  --answer-pill-spark-end: -16deg;
  top: -14px;
  right: -10px;
}

.answer-page.is-answer-motion-ready.is-answer-motion-visible .answer-score-pill {
  transform-origin: center bottom;
  animation: answer-score-pokko 580ms cubic-bezier(0.22, 1, 0.36, 1) 350ms both;
}

.answer-page.is-answer-celebrating.is-answer-motion-ready.is-answer-motion-visible
  .answer-score-pill::before {
  animation: answer-pill-sparkle 760ms cubic-bezier(0.22, 1, 0.36, 1)
    calc(500ms + var(--answer-pill-spark-delay)) both;
}

.answer-page.is-answer-celebrating.is-answer-motion-ready.is-answer-motion-visible
  .answer-score-pill::after {
  animation: answer-pill-sparkle 760ms cubic-bezier(0.22, 1, 0.36, 1)
    calc(620ms + var(--answer-pill-spark-delay)) both;
}

.answer-page.is-answer-motion-ready.is-answer-motion-visible
  .answer-score-pill:nth-child(2) {
  animation-delay: 460ms;
}

.answer-page.is-answer-motion-ready.is-answer-motion-visible
  .answer-score-pill:nth-child(3) {
  animation-delay: 570ms;
}

.answer-page.is-answer-motion-ready.is-answer-motion-visible .answer-share-copy {
  animation: answer-copy-arrive 850ms cubic-bezier(0.22, 1, 0.36, 1) 680ms both;
}

.answer-page.is-answer-motion-ready.is-answer-motion-visible .answer-share-card {
  transform-origin: center bottom;
  animation: answer-share-mochi 880ms cubic-bezier(0.22, 1, 0.36, 1) 800ms both;
}

.answer-page.is-answer-motion-ready.is-answer-motion-complete
  .answer-result-panel,
.answer-page.is-answer-motion-ready.is-answer-motion-complete
  .answer-result-character,
.answer-page.is-answer-motion-ready.is-answer-motion-complete .answer-title,
.answer-page.is-answer-motion-ready.is-answer-motion-complete .answer-score-pill,
.answer-page.is-answer-motion-ready.is-answer-motion-complete .answer-share-copy,
.answer-page.is-answer-motion-ready.is-answer-motion-complete .answer-share-card {
  opacity: 1;
  visibility: visible;
  transform: none;
  animation: none;
}

.answer-page.is-answer-motion-ready.is-answer-motion-complete
  .answer-result-panel::after {
  opacity: 0.42;
  transform: translateX(-50%) scale(1);
  animation: none;
}

@keyframes answer-panel-arrive {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes answer-soft-puff {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.72);
  }
  52% {
    opacity: 0.78;
    transform: translateX(-50%) scale(1.05, 0.96);
  }
  100% {
    opacity: 0.42;
    transform: translateX(-50%) scale(1);
  }
}

@keyframes answer-character-arrive {
  0% {
    opacity: 0;
    transform: translate3d(0, 28px, 0) rotate(-3deg) scale(0.86);
  }
  62% {
    opacity: 1;
    transform: translate3d(0, -4px, 0) rotate(1.5deg) scale(1.06);
  }
  82% {
    transform: translate3d(0, 1px, 0) rotate(-0.5deg) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes answer-character-celebrate {
  0% {
    opacity: 0;
    transform: translate3d(0, 30px, 0) rotate(-5deg) scale(0.78);
  }
  34% {
    opacity: 1;
    transform: translate3d(0, -17px, 0) rotate(3deg) scale(1.12, 0.94);
  }
  51% {
    transform: translate3d(0, 3px, 0) rotate(-1deg) scale(0.97, 1.04);
  }
  69% {
    transform: translate3d(0, -9px, 0) rotate(-2deg) scale(1.07, 0.97);
  }
  84% {
    transform: translate3d(0, 1px, 0) rotate(1deg) scale(0.99, 1.01);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes answer-copy-arrive {
  0% {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes answer-score-pokko {
  0% {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(0.86);
  }
  58% {
    opacity: 1;
    transform: translate3d(0, -2px, 0) scale(1.05, 0.98);
  }
  80% {
    transform: translate3d(0, 1px, 0) scale(0.99, 1.01);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes answer-pill-sparkle {
  0% {
    opacity: 0;
    transform: translate3d(0, 7px, 0) rotate(var(--answer-pill-spark-start)) scale(0.16);
  }
  42% {
    opacity: 1;
    transform: translate3d(0, -7px, 0) rotate(0deg) scale(1.14);
  }
  70% {
    opacity: 0.92;
    transform: translate3d(0, -9px, 0) rotate(-4deg) scale(0.94);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -18px, 0) rotate(var(--answer-pill-spark-end)) scale(0.62);
  }
}

@keyframes answer-share-mochi {
  0% {
    opacity: 0;
    transform: translate3d(0, 20px, 0) scale(0.94);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -3px, 0) scale(1.025, 0.98);
  }
  82% {
    transform: translate3d(0, 1px, 0) scale(0.995, 1.01);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.answer-page.is-answer-motion-ready [data-answer-reveal] {
  opacity: 0;
  visibility: visible;
  transform: translate3d(0, 18px, 0);
}

.answer-page.is-answer-motion-ready [data-answer-reveal].is-answer-revealed {
  animation: answer-review-arrive 860ms cubic-bezier(0.22, 1, 0.36, 1)
    var(--answer-reveal-delay, 0ms) both;
}

.answer-page.is-answer-motion-ready
  [data-answer-reveal].is-answer-card-motion-complete {
  opacity: 1;
  visibility: visible;
  transform: none;
  animation: none;
}

.answer-page.is-answer-motion-ready
  [data-answer-reveal].is-answer-revealed:not(.is-direct)
  .answer-status {
  transform-origin: center;
  animation: answer-status-stamp 520ms cubic-bezier(0.22, 1, 0.36, 1)
    calc(var(--answer-reveal-delay, 0ms) + 240ms) both;
}

.answer-page .answer-status {
  position: relative;
  overflow: visible;
  isolation: isolate;
}

.answer-page .answer-status::before,
.answer-page .answer-status::after {
  position: absolute;
  z-index: 1;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
}

.answer-page .answer-status::before {
  --answer-status-spark-start: -28deg;
  --answer-status-spark-end: 16deg;
  top: -16px;
  left: -18px;
  width: clamp(22px, 2vw, 30px);
  aspect-ratio: 75 / 67;
}

.answer-page .answer-status::after {
  --answer-status-spark-start: 26deg;
  --answer-status-spark-end: -14deg;
  right: -17px;
  bottom: -13px;
  width: clamp(20px, 1.8vw, 27px);
  aspect-ratio: 61 / 55;
}

.answer-page .is-correct .answer-status::before,
.answer-page .is-correct .answer-status::after {
  aspect-ratio: 75 / 67;
  background-image: url("../images/rkm-star-img.png");
}

.answer-page .is-incorrect .answer-status::before,
.answer-page .is-incorrect .answer-status::after {
  aspect-ratio: 61 / 55;
  background-image: url("../images/rkm-hart-img.png");
}

.answer-page.is-answer-motion-ready
  [data-answer-reveal].is-answer-revealed:not(.is-direct)
  .answer-status::before {
  animation: answer-status-kirakira 760ms cubic-bezier(0.22, 1, 0.36, 1)
    calc(var(--answer-reveal-delay, 0ms) + 420ms) both;
}

.answer-page.is-answer-motion-ready
  [data-answer-reveal].is-answer-revealed:not(.is-direct)
  .answer-status::after {
  animation: answer-status-kirakira 760ms cubic-bezier(0.22, 1, 0.36, 1)
    calc(var(--answer-reveal-delay, 0ms) + 540ms) both;
}

@keyframes answer-review-arrive {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes answer-status-kirakira {
  0% {
    opacity: 0;
    transform: translate3d(0, 5px, 0) rotate(var(--answer-status-spark-start)) scale(0.18);
  }
  44% {
    opacity: 1;
    transform: translate3d(0, -5px, 0) rotate(0deg) scale(1.15);
  }
  72% {
    opacity: 0.94;
    transform: translate3d(0, -7px, 0) rotate(-3deg) scale(0.94);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -14px, 0) rotate(var(--answer-status-spark-end)) scale(0.64);
  }
}

@keyframes answer-status-stamp {
  0% {
    opacity: 0;
    transform: scale(0.72);
  }
  58% {
    opacity: 1;
    transform: scale(1.08, 0.96);
  }
  80% {
    transform: scale(0.98, 1.02);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 640px) {
  .answer-page .answer-result-panel > .answer-fanfare {
    --fanfare-scale: 0.78;
    top: -28px;
    width: 100%;
    height: 330px;
  }

  .answer-page .answer-result-panel::before {
    inset: -3px;
    border-width: 3px;
  }

  .answer-page .answer-score-pill::before {
    top: -13px;
    left: -4px;
  }

  .answer-page .answer-score-pill::after {
    top: -11px;
    right: -5px;
  }

  .site-motion-page [data-site-reveal="action"]::after,
  .site-motion-page [data-site-reveal="banner"]::after {
    filter: blur(9px);
  }

  .site-motion-page.is-site-motion-ready .fixed-entry-button {
    --home-cta-start-y: 14px;
    --home-cta-start-scale: 0.91;
    --home-cta-start-rotate: -3deg;
    --home-cta-peak-y: -4px;
    --home-cta-peak-scale: 1.07;
    --home-cta-peak-rotate: 4deg;
  }
}

.home-page.is-home-motion-ready
  .access-panel.is-home-revealed:not(.is-home-motion-complete) {
  transition:
    opacity var(--home-reveal-duration) cubic-bezier(0.22, 1, 0.36, 1)
      var(--home-reveal-delay),
    translate var(--home-reveal-duration) cubic-bezier(0.22, 1, 0.36, 1)
      var(--home-reveal-delay),
    visibility 0s linear 0s,
    padding-bottom 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.home-page.is-home-motion-ready .access-panel.is-home-motion-complete {
  transition: padding-bottom 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .answer-fanfare {
    display: none;
  }

  .answer-page .answer-result-panel::before,
  .answer-page .answer-score-pill::before,
  .answer-page .answer-score-pill::after,
  .answer-page .answer-status::before,
  .answer-page .answer-status::after {
    content: none;
    opacity: 0;
    animation: none;
  }

  .site-motion-page .has-site-frame-effect > span.site-frame-effect,
  .site-motion-page
    .has-site-frame-effect.is-site-frame-active
    > .site-frame-effect {
    background-position: 50% 50%;
    opacity: var(--site-frame-opacity-from);
    animation: none;
  }

  .site-header,
  .site-header::after,
  .header-inner,
  .header-logo,
  .header-logo img,
  .menu-button,
  .menu-button::before,
  .menu-button span:not(.visually-hidden),
  .global-nav,
  .home-page .access-panel,
  .home-page .access-toggle,
  .home-page .access-toggle-icon,
  .home-page .access-content,
  .home-page .access-card,
  .home-page .access-footer-character {
    transition: none;
  }

  body.header-compact .header-logo,
  body.header-compact .menu-button,
  body.nav-open .global-nav .nav-link,
  .home-page .access-panel.is-access-open .access-card img {
    animation: none;
  }

  .home-page .access-card,
  .home-page .access-footer-character {
    opacity: 1;
    transform: none;
  }

  .nav-link,
  .nav-link:hover,
  .nav-link:focus-visible,
  .nav-link--active::after,
  .nav-link--active:hover::after,
  .nav-link--active:focus-visible::after {
    transition: none;
  }

  .nav-link:hover,
  .nav-link:focus-visible {
    transform: none;
  }

  .nav-link--active:hover::after,
  .nav-link--active:focus-visible::after {
    transform: translateX(-50%);
  }

  .home-page.is-home-motion-ready
    .access-panel.is-home-motion-complete {
    transition: none;
  }

  .site-motion-page .site-banner-motion,
  .site-motion-page .site-cta-motion,
  .site-motion-page.is-site-motion-ready [data-site-reveal="heading"] > img,
  .site-motion-page.is-site-motion-ready [data-site-reveal],
  .site-motion-page.is-site-motion-ready [data-site-reveal].is-site-revealed,
  .answer-page.is-answer-motion-ready .answer-result-panel,
  .answer-page.is-answer-motion-ready .answer-result-character,
  .answer-page.is-answer-motion-ready .answer-title,
  .answer-page.is-answer-motion-ready .answer-score-pill,
  .answer-page.is-answer-motion-ready .answer-share-copy,
  .answer-page.is-answer-motion-ready .answer-share-card,
  .answer-page.is-answer-motion-ready [data-answer-reveal],
  .answer-page.is-answer-motion-ready [data-answer-reveal].is-answer-revealed,
  .answer-page.is-answer-motion-ready .answer-status,
  .quiz-options label.is-quiz-choice-picked,
  .quiz-card.is-quiz-choice-active .quiz-title span,
  .site-motion-page .event-heading > img,
  .site-motion-page .photo-card-icon,
  .site-motion-page .practice-heading > img,
  .site-motion-page .scope-character,
  .site-motion-page .practice-campaign-character,
  .site-motion-page .bookcafe-menu-logo {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    transform: none;
    animation: none;
    transition: none;
  }

  .site-motion-page .image-button:hover::after,
  .site-motion-page .image-button:focus-visible::after,
  .site-motion-page .banner-card:hover::after,
  .site-motion-page .banner-card:focus-visible::after {
    opacity: 0.1;
    transform: translate3d(0, 8px, 0) scale(1);
  }

  .site-motion-page [data-site-reveal="action"]::after,
  .site-motion-page [data-site-reveal="banner"]::after {
    opacity: 0.1;
    transform: translate3d(0, 8px, 0) scale(1);
    animation: none;
    transition: none;
  }

  .quiz-options input,
  .quiz-options input::before {
    transition: none;
  }

  .answer-page.is-answer-motion-ready .answer-result-panel::after {
    opacity: 0.42;
    transform: translateX(-50%) scale(1);
    animation: none;
  }

  .site-motion-page.is-site-motion-ready .fixed-entry-button {
    transition: none;
  }

  .site-motion-page.is-site-motion-ready .fixed-entry-button:hover,
  .site-motion-page.is-site-motion-ready .fixed-entry-button:focus-visible,
  .site-motion-page .image-button:hover .site-banner-motion,
  .site-motion-page .image-button:focus-visible .site-banner-motion,
  .site-motion-page .banner-card:hover .site-banner-motion,
  .site-motion-page .banner-card:focus-visible .site-banner-motion {
    transform: none;
    filter: none;
  }

  .header-apply:active,
  .official-button:active,
  .answer-button:active,
  .answer-share-button:active,
  .home-page .image-button:active .home-banner-motion,
  .home-page .banner-card:active .home-banner-motion,
  .site-motion-page .image-button:active .site-banner-motion,
  .site-motion-page .banner-card:active .site-banner-motion,
  .home-page .fixed-entry-button:active .home-cta-motion,
  .site-motion-page .fixed-entry-button:active .site-cta-motion {
    transform: none;
    filter: brightness(0.98);
    transition: none;
  }
}

/* Tokuten plush product carousel */

.tokuten-goods-layout {
  width: min(100%, 1420px);
  grid-template-columns: minmax(260px, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 68px);
  align-items: start;
  text-align: left;
}

.tokuten-goods-carousel {
  position: relative;
  width: min(100%, 620px);
  margin: 0 auto;
  color: #6f4b34;
}

.tokuten-goods-carousel-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 3895 / 2758;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 238, 246, 0.96), rgba(232, 246, 255, 0.96)),
    #fff;
  border: 3px solid #ffc99e;
  border-radius: clamp(16px, 1.6vw, 26px);
  box-shadow: 0 10px 22px rgba(163, 97, 72, 0.12);
}

.tokuten-goods-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms ease, visibility 320ms ease;
}

.tokuten-goods-slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
}

.tokuten-goods-slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

.tokuten-goods-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}

.tokuten-goods-slide--cover img {
  object-fit: cover;
  object-position: center;
}

.tokuten-goods-slide--zoom img {
  transform: scale(1.08);
  transform-origin: center;
}

.tokuten-goods-slide figcaption {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  padding: 6px 14px;
  color: #75442e;
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid rgba(255, 184, 150, 0.76);
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(110, 74, 54, 0.1);
  font-size: clamp(12px, 1vw, 16px);
  font-weight: 900;
  line-height: 1.1;
}

.tokuten-goods-carousel-button {
  position: absolute;
  z-index: 3;
  top: calc(50% - 22px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: #d56e49;
  background: rgba(255, 255, 255, 0.94);
  border: 2px solid #ffc19f;
  border-radius: 50%;
  box-shadow: 0 5px 12px rgba(117, 70, 48, 0.18);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform 180ms ease, background-color 180ms ease;
}

.tokuten-goods-carousel-button:hover {
  background: #fff5ec;
  transform: translateY(-50%) scale(1.06);
}

.tokuten-goods-carousel-button:focus-visible,
.tokuten-goods-carousel-dots button:focus-visible,
.tokuten-goods-carousel:focus-visible {
  outline: 3px solid #7b69c8;
  outline-offset: 3px;
}

.tokuten-goods-carousel-button--prev {
  left: 12px;
}

.tokuten-goods-carousel-button--next {
  right: 12px;
}

.tokuten-goods-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 8px;
}

.tokuten-goods-carousel-dots button {
  position: relative;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.tokuten-goods-carousel-dots button::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  content: "";
  background: #d8cbd7;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  transition: width 180ms ease, background-color 180ms ease;
}

.tokuten-goods-carousel-dots button.is-active::before {
  width: 22px;
  background: #ef8a68;
}

.tokuten-goods-body {
  display: grid;
  gap: clamp(14px, 1.4vw, 22px);
  align-content: start;
  color: #6f4b34;
}

.tokuten-goods-body .tokuten-goods-intro {
  width: 100%;
  margin: 0;
  font-size: clamp(15px, 1.05vw, 19px);
  line-height: 1.75;
}

.tokuten-goods-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 0.8vw, 14px);
  margin: 0;
}

.tokuten-goods-facts div {
  min-width: 0;
  padding: clamp(12px, 1.1vw, 18px) clamp(10px, 1vw, 16px);
  text-align: center;
  background: #fffaf5;
  border: 2px solid #ffd2b9;
  border-radius: clamp(12px, 1.2vw, 18px);
}

.tokuten-goods-facts dt {
  margin-bottom: 7px;
  color: #9b5b3d;
  font-size: clamp(12px, 0.95vw, 16px);
  font-weight: 900;
  letter-spacing: 0.06em;
}

.tokuten-goods-facts dd {
  margin: 0;
  color: #634b3c;
  font-size: clamp(13px, 1vw, 18px);
  font-weight: 800;
  line-height: 1.45;
}

.tokuten-goods-facts dd strong {
  color: #e35f3e;
  font-size: 1.16em;
  white-space: nowrap;
}

.tokuten-goods-body .tokuten-goods-shipping-note {
  width: 100%;
  margin: -4px 0 0;
  color: #7b6758;
  font-size: clamp(12px, 0.9vw, 15px);
  line-height: 1.5;
}

.tokuten-goods-body .tokuten-goods-status {
  width: fit-content;
  margin: 0;
  padding: 9px 20px;
  color: #fff;
  background: #ef7f5c;
  border-radius: 999px;
  font-size: clamp(14px, 1vw, 17px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.06em;
}

@media (max-width: 980px) and (min-width: 641px) {

  .tokuten-goods-layout {
    grid-template-columns: minmax(250px, 0.95fr) minmax(0, 1.05fr);
    gap: 26px;
  }

  .tokuten-goods-body .tokuten-goods-intro {
    font-size: 14px;
    line-height: 1.65;
  }

  .tokuten-goods-facts {
    gap: 7px;
  }

  .tokuten-goods-facts div {
    padding: 10px 7px;
  }

  .tokuten-goods-facts dt {
    font-size: 11px;
  }

  .tokuten-goods-facts dd {
    font-size: 12px;
  }
}

@media (max-width: 640px) {

  .tokuten-goods-layout {
    grid-template-columns: 1fr;
    gap: 18px;
    text-align: left;
  }

  .tokuten-goods-carousel {
    width: 100%;
  }

  .tokuten-goods-carousel-viewport {
    border-width: 2px;
    border-radius: 14px;
  }

  .tokuten-goods-carousel-button {
    top: calc(50% - 19px);
    width: 38px;
    height: 38px;
    font-size: 31px;
  }

  .tokuten-goods-carousel-button--prev {
    left: 8px;
  }

  .tokuten-goods-carousel-button--next {
    right: 8px;
  }

  .tokuten-goods-slide figcaption {
    right: 8px;
    bottom: 8px;
    padding: 5px 10px;
    border-width: 1px;
    font-size: 11px;
  }

  .tokuten-goods-carousel-dots {
    margin-top: 5px;
  }

  .tokuten-goods-body {
    gap: 12px;
  }

  .tokuten-goods-body .tokuten-goods-intro {
    font-size: 13px;
    line-height: 1.65;
    letter-spacing: 0.02em;
  }

  .tokuten-goods-facts {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .tokuten-goods-facts div {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    padding: 8px 11px;
    text-align: left;
    border-radius: 11px;
  }

  .tokuten-goods-facts dt {
    margin: 0;
    font-size: 11px;
  }

  .tokuten-goods-facts dd {
    font-size: 12px;
  }

  .tokuten-goods-body .tokuten-goods-shipping-note {
    font-size: 11px;
  }

  .tokuten-goods-body .tokuten-goods-status {
    justify-self: center;
    padding: 8px 18px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tokuten-goods-slide,
  .tokuten-goods-carousel-button,
  .tokuten-goods-carousel-dots button::before {
    transition: none;
  }
}
.tokuten-goods-carousel-button span {
  display: block;
  width: 12px;
  height: 12px;
  border-top: 4px solid currentColor;
  border-right: 4px solid currentColor;
  font-size: 0;
  line-height: 0;
  transform-origin: center;
}

.tokuten-goods-carousel-button--prev span {
  transform: translateX(2px) rotate(-135deg);
}

.tokuten-goods-carousel-button--next span {
  transform: translateX(-2px) rotate(45deg);
}

@media (max-width: 640px) {
  .tokuten-goods-carousel-button span {
    width: 10px;
    height: 10px;
    border-width: 3px;
  }
}
@media (max-width: 980px) {
  .tokuten-panel--goods .tokuten-section-heading h2 {
    width: min(100%, 720px);
    font-size: clamp(24px, 4vw, 34px);
    line-height: 1.18;
    white-space: normal;
  }

  .tokuten-goods-title-line {
    display: block;
  }
}

@media (max-width: 640px) {
  .tokuten-panel--goods .tokuten-section-heading h2 {
    padding: 7px 14px;
    font-size: clamp(19px, 5.5vw, 24px);
    letter-spacing: 0.02em;
  }
}
/* Greeting event schedule */
.greeting-schedule {
  width: min(100%, 1560px);
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 26px);
  list-style: none;
}

.greeting-schedule-card {
  min-width: 0;
  height: 100%;
  padding: clamp(18px, 1.8vw, 28px) clamp(12px, 1.4vw, 22px);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(14px, 1.3vw, 20px);
  color: #5f4775;
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid #d9b8f2;
  border-radius: clamp(16px, 1.5vw, 24px);
  box-shadow: 0 7px 15px rgba(116, 76, 145, 0.1);
}

.greeting-schedule-card h3 {
  margin: 0;
  padding: 8px 12px;
  color: #fff;
  font-size: clamp(16px, 1.25vw, 22px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.03em;
  white-space: nowrap;
  background: linear-gradient(180deg, #a980ce, #8660ae);
  border-radius: 999px;
}

.greeting-schedule-card dl {
  margin: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}

.greeting-schedule-time {
  padding-top: 12px;
  border-top: 1px dashed #d6b8e9;
}

.greeting-schedule-time:first-child {
  padding-top: 0;
  border-top: 0;
}

.greeting-schedule-time dt {
  margin-bottom: 5px;
  color: #8054a1;
  font-size: clamp(12px, 0.95vw, 16px);
  font-weight: 900;
  letter-spacing: 0.08em;
}

.greeting-schedule-time dd {
  margin: 0;
  color: #5f5266;
  font-size: clamp(18px, 1.45vw, 26px);
  font-weight: 900;
  line-height: 1.25;
  white-space: nowrap;
}

.greeting-schedule-time--main dd {
  color: #75479a;
  font-size: clamp(22px, 1.8vw, 32px);
}

.greeting-schedule-note {
  width: min(100%, 1400px);
  margin: clamp(22px, 2.3vw, 38px) auto 0;
  padding: clamp(16px, 1.7vw, 26px) clamp(18px, 2.4vw, 38px);
  color: #5f5266;
  text-align: center;
  background: #f3e9fc;
  border: 2px solid #d8b9ef;
  border-radius: clamp(14px, 1.4vw, 22px);
}

.greeting-schedule-note-title {
  margin: 0 0 8px;
  color: #8054a1;
  font-size: clamp(15px, 1.15vw, 20px);
  font-weight: 900;
}

.greeting-schedule-note p:not(.greeting-schedule-note-title) {
  margin: 0;
  font-size: clamp(13px, 1vw, 17px);
  font-weight: 700;
  line-height: 1.7;
}

@media (max-width: 980px) {
  .greeting-schedule {
    width: min(100%, 900px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .greeting-schedule {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .greeting-schedule-card {
    width: 100%;
    padding: 15px 12px;
    gap: 11px;
    border-width: 2px;
    border-radius: 14px;
  }

  .greeting-schedule-card h3 {
    font-size: 15px;
  }

  .greeting-schedule-time {
    padding-top: 9px;
  }

  .greeting-schedule-time dd {
    font-size: 18px;
  }

  .greeting-schedule-time--main dd {
    font-size: 23px;
  }

  .greeting-schedule-note {
    margin-top: 18px;
    padding: 14px 12px;
    border-radius: 14px;
  }

  .greeting-schedule-note p:not(.greeting-schedule-note-title) {
    font-size: 12px;
  }
}
/* Sponsor recruitment banners are intentionally non-interactive. */
.banner-card--sponsor {
  cursor: default;
}

.banner-card--sponsor:hover,
.banner-card--sponsor:active {
  transform: none;
  filter: none;
}

.home-page .banner-card--sponsor:hover .home-banner-motion,
.home-page .banner-card--sponsor:active .home-banner-motion,
.site-motion-page .banner-card--sponsor:hover .site-banner-motion,
.site-motion-page .banner-card--sponsor:active .site-banner-motion {
  transform: none;
  filter: none;
}

.home-page .banner-card--sponsor:hover::after,
.home-page .banner-card--sponsor:active::after,
.site-motion-page .banner-card--sponsor:hover::after,
.site-motion-page .banner-card--sponsor:active::after {
  opacity: 0.1;
  transform: translate3d(0, 8px, 0) scale(1);
}

/* Chairoikoguma venue-first plush */

.tokuten-panel--chairoikoguma {
  --tokuten-border: #9bd9cf;
  scroll-margin-top: 110px;
  background: linear-gradient(145deg, #f3fffb 0%, #fffdf7 100%);
}

.tokuten-section-heading--chairoikoguma h2 {
  display: flex;
  width: min(100%, 1120px);
  min-width: 0;
  flex-direction: column;
  gap: 0.18em;
  font-size: clamp(22px, 2.1vw, 39px);
  line-height: 1.25;
  letter-spacing: 0.035em;
}

.chairoikoguma-product-catch {
  width: fit-content;
  margin: 0 auto clamp(22px, 2.5vw, 38px);
  padding: 7px clamp(18px, 2vw, 32px);
  color: #287f74;
  background: rgba(211, 247, 238, 0.86);
  border-radius: 999px;
  font-size: clamp(16px, 1.45vw, 24px);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-align: center;
}

.chairoikoguma-product-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(28px, 4vw, 68px);
  width: min(100%, 1420px);
  margin: 0 auto;
}

.chairoikoguma-product-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 24px);
}

.chairoikoguma-product-gallery figure {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: clamp(10px, 1vw, 16px);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.82);
  border-radius: clamp(16px, 1.5vw, 24px);
  box-shadow: 0 8px 20px rgba(65, 141, 128, 0.1);
}

.chairoikoguma-product-gallery figure > span {
  position: absolute;
  top: clamp(12px, 1.1vw, 18px);
  left: 50%;
  z-index: 1;
  padding: 5px 16px;
  color: #fff;
  background: #63b9ab;
  border-radius: 999px;
  font-size: clamp(12px, 0.95vw, 16px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.08em;
  transform: translateX(-50%);
}

.chairoikoguma-product-gallery img {
  width: 100%;
  height: auto;
  border-radius: clamp(12px, 1.1vw, 18px);
}

.chairoikoguma-product-gallery picture {
  display: block;
  width: 100%;
}

.chairoikoguma-product-body {
  display: grid;
  align-content: center;
  gap: clamp(18px, 1.8vw, 28px);
  color: #5f5146;
}

.chairoikoguma-product-intro {
  margin: 0;
  font-size: clamp(15px, 1.05vw, 19px);
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.04em;
}

.chairoikoguma-product-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 0.8vw, 13px);
  margin: 0;
}

.chairoikoguma-product-facts div {
  min-width: 0;
  padding: clamp(13px, 1.2vw, 19px) clamp(8px, 0.9vw, 14px);
  background: rgba(255, 255, 255, 0.76);
  border-radius: 16px;
  text-align: center;
}

.chairoikoguma-product-facts dt {
  margin-bottom: 8px;
  color: #318f82;
  font-size: clamp(12px, 0.95vw, 16px);
  font-weight: 900;
  letter-spacing: 0.06em;
}

.chairoikoguma-product-facts dd {
  margin: 0;
  color: #5d4f45;
  font-size: clamp(13px, 1vw, 17px);
  font-weight: 800;
  line-height: 1.5;
}

.chairoikoguma-product-facts dd strong {
  color: #e15e88;
  font-size: 1.16em;
  white-space: nowrap;
}

.chairoikoguma-product-note {
  margin: 0;
  color: #75675d;
  font-size: clamp(12px, 0.95vw, 15px);
  font-weight: 700;
  line-height: 1.65;
}

@media (min-width: 981px) {
  .chairoikoguma-product-layout {
    align-items: start;
  }

  .chairoikoguma-product-gallery {
    width: min(100%, 620px);
    margin: 0;
    justify-self: start;
  }

  .chairoikoguma-product-body {
    align-content: start;
  }
}

.event-shop-product {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 3.4vw, 52px);
  width: min(100%, 980px);
  margin: 0 auto;
  padding: clamp(18px, 2vw, 30px);
  background: rgba(255, 255, 255, 0.7);
  border-radius: clamp(20px, 2vw, 30px);
  text-align: left;
}

.event-shop-product-image {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-width: 0;
  padding: clamp(12px, 1.2vw, 18px);
  overflow: hidden;
  background: #fff;
  border: 2px solid #d6ecfa;
  border-radius: clamp(14px, 1.4vw, 22px);
  box-shadow: 0 7px 18px rgba(58, 127, 167, 0.08);
}

.event-shop-product-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  object-position: center;
}

.event-shop-product-image picture {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.event-shop-product-body {
  display: grid;
  justify-items: start;
  gap: clamp(12px, 1.2vw, 18px);
  min-width: 0;
}

.event-shop-product-badge {
  margin: 0;
  padding: 6px 18px;
  color: #fff;
  background: #61b9ab;
  border-radius: 999px;
  font-size: clamp(13px, 1vw, 17px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.08em;
}

.event-shop-product h3 {
  margin: 0;
  color: #287f99;
  font-size: clamp(23px, 2vw, 36px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.035em;
}

.event-shop-product-price {
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  margin: 0;
  color: #5a6470;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 800;
  line-height: 1.4;
}

.event-shop-product-price strong {
  color: #e15e88;
  font-size: clamp(24px, 2vw, 34px);
  white-space: nowrap;
}

.event-shop-product-summary {
  display: grid;
  gap: 5px;
  margin: 0;
  color: #4f6475;
  font-size: clamp(13px, 1.05vw, 17px);
  font-weight: 800;
  line-height: 1.6;
}

.event-shop-product-note {
  margin: 0;
  color: #61707d;
  font-size: clamp(11px, 0.85vw, 14px);
  font-weight: 700;
  line-height: 1.6;
}

.event-shop-more-note {
  width: fit-content;
  max-width: 100%;
  margin: clamp(18px, 2vw, 30px) auto 0;
  padding: 9px clamp(18px, 2vw, 28px);
  color: #287f99;
  background: rgba(232, 248, 255, 0.9);
  border-radius: 999px;
  font-size: clamp(14px, 1.15vw, 19px);
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: center;
}

@media (max-width: 980px) {
  .tokuten-section-heading--chairoikoguma h2 {
    font-size: clamp(21px, 3.9vw, 32px);
  }

  .chairoikoguma-product-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .chairoikoguma-product-gallery {
    width: min(100%, 700px);
    margin: 0 auto;
  }

  .chairoikoguma-product-body {
    width: min(100%, 760px);
    margin: 0 auto;
    text-align: center;
  }

  .chairoikoguma-product-intro {
    font-size: 14px;
    line-height: 1.65;
  }

  .event-shop-product {
    grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
    gap: 26px;
  }

  .event-shop-product h3 {
    font-size: clamp(22px, 3.2vw, 32px);
  }
}

@media (max-width: 640px) {
  .tokuten-panel--chairoikoguma {
    scroll-margin-top: 76px;
  }

  .tokuten-section-heading--chairoikoguma h2 {
    padding: 8px 12px;
    font-size: clamp(17px, 5vw, 22px);
    letter-spacing: 0.015em;
  }

  .chairoikoguma-product-catch {
    margin-bottom: 18px;
    padding: 6px 13px;
    font-size: 13px;
  }

  .chairoikoguma-product-gallery {
    gap: 8px;
  }

  .chairoikoguma-product-gallery figure {
    padding: 6px;
    border-radius: 13px;
    box-shadow: 0 5px 12px rgba(65, 141, 128, 0.08);
  }

  .chairoikoguma-product-gallery figure > span {
    top: 9px;
    padding: 4px 11px;
    font-size: 10px;
  }

  .chairoikoguma-product-intro {
    font-size: 13px;
    line-height: 1.65;
    letter-spacing: 0.02em;
    text-align: left;
  }

  .chairoikoguma-product-facts {
    grid-template-columns: 1fr;
  }

  .chairoikoguma-product-facts div {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    padding: 8px 11px;
    text-align: left;
    border-radius: 11px;
  }

  .chairoikoguma-product-facts dt {
    margin: 0;
    font-size: 11px;
  }

  .chairoikoguma-product-facts dd {
    min-width: 0;
    font-size: 12px;
  }

  .chairoikoguma-product-note {
    font-size: 11px;
    text-align: left;
  }

  .event-shop-product {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px 12px 20px;
    text-align: center;
  }

  .event-shop-product-image {
    width: min(78%, 280px);
    margin: 0 auto;
  }

  .event-shop-product-body {
    justify-items: center;
    gap: 11px;
  }

  .event-shop-product h3 {
    font-size: clamp(21px, 6.6vw, 28px);
  }

  .event-shop-product-price strong {
    font-size: 26px;
  }

  .event-shop-product-summary {
    gap: 3px;
    font-size: 12px;
    text-align: center;
  }

  .event-shop-product-note {
    font-size: 10px;
    text-align: left;
  }

  .event-shop-more-note {
    margin-top: 16px;
    padding: 8px 14px;
    border-radius: 16px;
    font-size: 12px;
    line-height: 1.55;
  }
}