@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@500;700;800&family=Yomogi&family=Zen+Kurenaido&display=swap");

:root {
  --rl-ink: #12324a;
  --rl-muted: rgba(18, 50, 74, 0.68);
  --rl-soft: #f7fcff;
  --rl-paper: #ffffff;
  --rl-sky: #dff5ff;
  --rl-sky-strong: #36b8ff;
  --rl-blue: #2478ff;
  --rl-cyan: #00d5ff;
  --rl-lime: #b8f45c;
  --rl-yellow: #ffe477;
  --rl-green: #0f463b;
  --rl-line: rgba(38, 127, 198, 0.18);
  --rl-shadow: 0 24px 60px rgba(45, 125, 190, 0.18);
  --rl-hand: "Yomogi", "Zen Kurenaido", "Segoe Print", "Yu Gothic", sans-serif;
  --rl-body: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  --rl-display: "Outfit", "Noto Sans JP", sans-serif;
  --rl-scroll: 0;
}

* {
  letter-spacing: 0 !important;
}

html {
  background: var(--rl-soft) !important;
}

body {
  background:
    linear-gradient(180deg, rgba(229, 248, 255, 0.92) 0%, rgba(255, 255, 255, 0.96) 36%, #f8fdff 100%) !important;
  color: var(--rl-ink) !important;
  font-family: var(--rl-body) !important;
  overflow-x: hidden;
}

body::before {
  opacity: 0.55 !important;
  background:
    repeating-linear-gradient(0deg, rgba(31, 133, 201, 0.035) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(90deg, rgba(31, 133, 201, 0.03) 0 1px, transparent 1px 18px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(206, 242, 255, 0.28)) !important;
  mix-blend-mode: multiply !important;
}

body::after {
  display: none !important;
}

.text-chalk,
.text-white,
.text-gray-50 {
  color: var(--rl-ink) !important;
}

.text-chalk\/85,
.text-chalk\/75,
.text-chalk\/70,
.text-chalk\/60,
.text-chalk\/50,
.text-gray-400,
.text-gray-500 {
  color: var(--rl-muted) !important;
}

.text-accent {
  color: var(--rl-blue) !important;
}

.bg-accent {
  background: linear-gradient(135deg, var(--rl-blue), var(--rl-cyan)) !important;
}

.hover\:bg-accent-hover:hover {
  background: linear-gradient(135deg, #1467f6, #00c3ea) !important;
}

.border-chalk,
.border-chalk\/30,
.border-chalk\/20,
.border-chalk\/10 {
  border-color: rgba(31, 125, 196, 0.24) !important;
}

.bg-chalkboard,
.bg-chalkboard-dark,
.bg-chalkboard-dark\/80,
.bg-chalkboard-dark\/95,
.bg-accent\/10 {
  background: transparent !important;
}

section {
  color: var(--rl-ink);
}

section::before {
  background: none !important;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

nav {
  background: rgba(255, 255, 255, 0.78) !important;
  border-bottom: 1px solid rgba(52, 160, 226, 0.18) !important;
  box-shadow: 0 12px 34px rgba(66, 146, 203, 0.12) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
}

nav.nav-scrolled {
  background: rgba(255, 255, 255, 0.9) !important;
}

nav img,
footer img {
  filter: drop-shadow(0 8px 14px rgba(0, 149, 205, 0.18));
}

nav .text-xl,
footer .text-lg {
  color: var(--rl-ink) !important;
  font-family: var(--rl-hand) !important;
  font-weight: 700 !important;
}

nav .bg-accent,
#hero-download-btn,
#pricing button {
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  box-shadow: 0 16px 30px rgba(36, 120, 255, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

.ideology-btn,
.mobile-download-guide-btn {
  background: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(36, 120, 255, 0.18) !important;
  color: var(--rl-ink) !important;
}

#fx-progress {
  background: rgba(255, 255, 255, 0.6) !important;
}

#fx-progress > div {
  background: linear-gradient(90deg, var(--rl-blue), var(--rl-cyan), var(--rl-lime)) !important;
  box-shadow: 0 0 18px rgba(0, 213, 255, 0.45) !important;
}

#fx-grain {
  opacity: 0.035 !important;
  mix-blend-mode: multiply !important;
}

#hero {
  min-height: calc(100svh - 34px) !important;
  padding: 96px 0 62px !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  background:
    linear-gradient(90deg, rgba(247, 252, 255, 0.94) 0%, rgba(247, 252, 255, 0.67) 34%, rgba(255, 255, 255, 0.12) 64%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(223, 245, 255, 0.34)),
    url("./assets/youth-hero-sky-ui.png") center top / cover no-repeat !important;
  isolation: isolate;
}

#hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 58%, rgba(247, 252, 255, 0.94) 100%),
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px 26px) !important;
  opacity: 1 !important;
}

#hero::after {
  content: "";
  position: absolute;
  left: 5%;
  bottom: 38px;
  width: min(520px, 42vw);
  height: 110px;
  z-index: 0;
  pointer-events: none;
  clip-path: polygon(0 24%, 15% 8%, 32% 20%, 48% 5%, 66% 24%, 86% 12%, 100% 30%, 94% 82%, 72% 92%, 50% 78%, 26% 96%, 6% 78%);
  background: linear-gradient(135deg, rgba(0, 213, 255, 0.2), rgba(184, 244, 92, 0.18));
  transform: rotate(-1.5deg);
}

#hero .chalk-particle,
#hero .raku-hero-icon-mark,
#hero .raku-chalk-tools,
#hero .raku-chalk-canvas {
  display: none !important;
}

#hero .relative.z-10 {
  width: min(560px, calc(100% - 40px)) !important;
  max-width: 560px !important;
  margin: 0 auto 0 clamp(28px, 6vw, 92px) !important;
  padding: 0 !important;
  text-align: left !important;
  color: var(--rl-ink) !important;
}

#hero .hero-kicker-wrap {
  margin-bottom: 12px !important;
}

#hero .hero-kicker-pill {
  display: inline-flex !important;
  align-items: center;
  min-height: 34px;
  padding: 7px 14px !important;
  border: 1px solid rgba(36, 120, 255, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: #145c9a !important;
  font-family: var(--rl-hand) !important;
  font-size: 1rem !important;
  box-shadow: 7px 9px 0 rgba(184, 244, 92, 0.22);
  transform: rotate(-1.2deg);
}

#hero .mobile-hero-headline {
  display: block !important;
  margin: 0 0 18px !important;
  color: var(--rl-ink) !important;
  font-family: var(--rl-hand) !important;
  font-size: 3rem !important;
  font-weight: 700 !important;
  line-height: 1.24 !important;
  text-shadow: 0 3px 0 rgba(255, 255, 255, 0.74), 0 18px 34px rgba(34, 116, 170, 0.16) !important;
}

#hero .hero-flow-copy {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin: 0 0 22px !important;
}

#hero .hero-flow-section {
  position: relative;
  padding: 15px 17px 16px !important;
  border: 1px solid rgba(36, 120, 255, 0.2) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(239, 250, 255, 0.82)) !important;
  box-shadow: 0 16px 34px rgba(45, 125, 190, 0.13) !important;
  clip-path: polygon(0 4%, 98% 0, 100% 92%, 4% 100%);
}

#hero .hero-flow-section--after {
  border-color: rgba(0, 213, 255, 0.42) !important;
  transform: rotate(0.8deg);
}

#hero .hero-flow-section--current {
  transform: rotate(-0.6deg);
}

#hero .hero-flow-divider {
  display: none !important;
}

#hero .hero-flow-label {
  display: inline-flex !important;
  margin-bottom: 9px !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  background: rgba(255, 228, 119, 0.48) !important;
  color: #6a5b00 !important;
  font-family: var(--rl-hand) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
}

#hero .hero-flow-label--accent {
  background: rgba(184, 244, 92, 0.5) !important;
  color: #245a18 !important;
}

#hero .hero-flow-text,
#hero .hero-flow-text--accent,
#hero .hero-flow-row {
  display: grid !important;
  gap: 6px !important;
  color: var(--rl-ink) !important;
  font-family: var(--rl-hand) !important;
  font-size: 1.3rem !important;
  line-height: 1.38 !important;
}

#hero .hero-flow-row {
  font-size: inherit !important;
  line-height: inherit !important;
  display: block !important;
}

#hero .hero-flow-highlight {
  color: var(--rl-blue) !important;
  text-decoration: underline;
  text-decoration-thickness: 5px;
  text-decoration-color: rgba(0, 213, 255, 0.28);
  text-underline-offset: -2px;
}

#hero .flex.flex-col {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

#hero button {
  font-family: var(--rl-body) !important;
  border-radius: 999px !important;
}

#hero #btn-3min {
  background: rgba(255, 255, 255, 0.76) !important;
  color: var(--rl-blue) !important;
  border-color: rgba(36, 120, 255, 0.32) !important;
  box-shadow: 0 14px 26px rgba(36, 120, 255, 0.12) !important;
}

#hero .mobile-hero-feature-list li {
  background: rgba(255, 255, 255, 0.76) !important;
  border-color: rgba(36, 120, 255, 0.2) !important;
  color: var(--rl-ink) !important;
}

.rl-hero-handline {
  position: absolute;
  z-index: 2;
  right: max(26px, 7vw);
  top: 82px;
  width: min(520px, 40vw);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 8px 18px rgba(255, 255, 255, 0.42));
}

.rl-hero-handline text {
  font-family: var(--rl-hand);
  font-size: 34px;
  font-weight: 700;
  fill: rgba(18, 50, 74, 0);
  stroke: #16446d;
  stroke-width: 1.2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 820;
  stroke-dashoffset: 820;
  animation: rlWriteStroke 2.8s 0.4s ease forwards, rlFillInk 0.5s 2.9s ease forwards;
}

.rl-hero-handline path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 560;
  stroke-dashoffset: 560;
  animation: rlWriteStroke 1.8s 2.1s ease forwards;
}

@keyframes rlWriteStroke {
  to { stroke-dashoffset: 0; }
}

@keyframes rlFillInk {
  to { fill: rgba(18, 50, 74, 0.96); }
}

#rl-concept-target-section,
#lecture-cost,
#features,
#showcase,
#messaging,
#faq,
#pricing {
  position: relative !important;
  overflow: hidden !important;
  padding-top: 96px !important;
  padding-bottom: 106px !important;
  background: var(--rl-paper) !important;
}

#rl-concept-target-section {
  min-height: 760px !important;
  justify-content: flex-start !important;
  padding-left: max(24px, 7vw) !important;
  padding-right: max(24px, 44vw) !important;
  background:
    linear-gradient(180deg, #f7fcff 0%, #e7f8ff 48%, #ffffff 100%) !important;
}

#rl-concept-target-section::before,
#features::before,
#faq::before,
#pricing::before {
  content: "";
  position: absolute;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(0, 213, 255, 0.16), rgba(184, 244, 92, 0.16));
  clip-path: polygon(5% 20%, 24% 8%, 45% 22%, 70% 4%, 96% 30%, 82% 76%, 54% 92%, 26% 82%, 0 62%);
  transform: rotate(-7deg);
  opacity: 0.8;
}

#rl-concept-target-section::before {
  width: 520px;
  height: 260px;
  left: -120px;
  top: 76px;
}

.rl-concept-container {
  position: relative !important;
  z-index: 2 !important;
  width: min(620px, 100%) !important;
  margin: 0 !important;
  padding: 34px 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#rl-concept-text {
  color: var(--rl-ink) !important;
  font-family: var(--rl-hand) !important;
  font-size: 1.48rem !important;
  line-height: 2.08 !important;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.86) !important;
}

.rl-concept-chalk {
  background: var(--rl-blue) !important;
  box-shadow: 0 0 0 8px rgba(0, 213, 255, 0.12) !important;
}

.rl-youth-photo {
  position: absolute;
  z-index: 1;
  margin: 0;
  pointer-events: none;
}

.rl-youth-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.02);
}

.rl-youth-photo::before {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -1;
  background: rgba(255, 255, 255, 0.78);
  clip-path: inherit;
  transform: rotate(-2deg);
  box-shadow: var(--rl-shadow);
}

.rl-photo-concept {
  right: max(26px, 7vw);
  top: 122px;
  width: min(520px, 36vw);
  height: 410px;
  clip-path: polygon(8% 0, 94% 8%, 100% 78%, 72% 100%, 4% 92%, 0 18%);
  transform: rotate(2.4deg);
}

.rl-photo-features {
  left: max(20px, 5vw);
  top: 62px;
  width: min(300px, 22vw);
  height: 220px;
  clip-path: polygon(0 14%, 78% 0, 100% 30%, 90% 92%, 20% 100%, 7% 68%);
  transform: rotate(-4deg);
  opacity: 0.94;
}

.rl-photo-messaging {
  right: max(24px, 7vw);
  bottom: 56px;
  width: min(390px, 30vw);
  height: 300px;
  clip-path: polygon(12% 5%, 100% 0, 92% 86%, 58% 100%, 0 86%, 6% 34%);
  transform: rotate(3deg);
  opacity: 0.94;
}

#lecture-cost {
  background:
    linear-gradient(180deg, #ffffff 0%, #f0fbff 100%) !important;
}

#lecture-cost > div:first-of-type {
  background:
    linear-gradient(90deg, rgba(0, 213, 255, 0.08) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(36, 120, 255, 0.06), transparent) !important;
  background-size: 28px 100%, auto !important;
}

#lecture-cost > div[style*="max-width:680px"] {
  max-width: 760px !important;
}

#lecture-cost h2 {
  color: var(--rl-ink) !important;
  font-family: var(--rl-hand) !important;
  font-size: 2.55rem !important;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.92) !important;
}

#lecture-cost p,
#lecture-cost label,
#lecture-cost span {
  color: var(--rl-muted) !important;
}

#lecture-cost > div[style*="max-width:680px"] > div[style*="background:linear-gradient"] {
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(36, 120, 255, 0.2) !important;
  border-radius: 8px !important;
  box-shadow: var(--rl-shadow) !important;
}

#lecture-cost input {
  background: #f7fcff !important;
  color: var(--rl-ink) !important;
  border-color: rgba(36, 120, 255, 0.2) !important;
  border-radius: 8px !important;
}

#calc-result {
  background: linear-gradient(135deg, rgba(36, 120, 255, 0.11), rgba(0, 213, 255, 0.16)) !important;
  color: var(--rl-blue) !important;
  border-color: rgba(0, 213, 255, 0.35) !important;
  border-radius: 8px !important;
  text-shadow: none !important;
}

#features {
  background: linear-gradient(180deg, #f0fbff 0%, #ffffff 100%) !important;
}

#features::before {
  width: 420px;
  height: 190px;
  right: -100px;
  top: 38px;
}

.compare-grid {
  position: relative;
  z-index: 2;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 28px !important;
}

.compare-card {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(36, 120, 255, 0.18) !important;
  border-radius: 8px !important;
  box-shadow: var(--rl-shadow) !important;
  color: var(--rl-ink) !important;
  transform: none !important;
}

.compare-card::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 18px;
  height: 14px;
  background: linear-gradient(90deg, rgba(255, 228, 119, 0.6), rgba(184, 244, 92, 0.44));
  clip-path: polygon(0 28%, 18% 0, 42% 30%, 64% 4%, 100% 34%, 96% 100%, 4% 78%);
  pointer-events: none;
}

.compare-card h3,
#showcase h2,
#messaging h3,
#faq h2,
#pricing h2 {
  font-family: var(--rl-hand) !important;
  font-weight: 700 !important;
  line-height: 1.32 !important;
}

.compare-card h3 {
  font-size: 2rem !important;
}

.compare-card p {
  color: var(--rl-muted) !important;
}

.compare-icon {
  width: 118px !important;
  height: 86px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  clip-path: polygon(4% 8%, 100% 0, 92% 90%, 24% 100%, 0 60%);
  box-shadow: 0 12px 26px rgba(44, 132, 198, 0.18);
}

#showcase {
  background:
    linear-gradient(180deg, #ffffff 0%, #eaf9ff 100%) !important;
}

#showcase h2 {
  font-size: 2.9rem !important;
}

#showcase .relative.rounded-xl {
  border-radius: 8px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(211, 245, 255, 0.62)) !important;
  padding: 18px !important;
  clip-path: polygon(0 4%, 98% 0, 100% 88%, 74% 100%, 4% 96%);
  box-shadow: 0 32px 72px rgba(20, 89, 145, 0.2) !important;
}

#showcase img {
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 22px 46px rgba(8, 48, 42, 0.18);
}

#showcase #btn-save-flow,
#pricing button,
#hero button,
.raku-faq-chip {
  transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease, border-color 220ms ease !important;
}

#showcase #btn-save-flow {
  background: rgba(255, 255, 255, 0.82) !important;
  color: var(--rl-blue) !important;
  border-color: rgba(36, 120, 255, 0.3) !important;
}

#showcase #btn-save-flow:hover,
#hero button:hover,
#pricing button:hover {
  transform: translateY(-3px) rotate(-0.4deg) !important;
}

#messaging {
  background: linear-gradient(180deg, #eaf9ff 0%, #ffffff 100%) !important;
}

#messaging > div > div {
  position: relative;
  z-index: 2;
}

#messaging > div > div > div {
  max-width: 760px;
  padding: 26px 30px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(36, 120, 255, 0.15) !important;
  border-radius: 8px !important;
  box-shadow: 16px 18px 0 rgba(0, 213, 255, 0.08), var(--rl-shadow) !important;
  transform: rotate(-0.7deg);
}

#messaging > div > div > div:nth-child(2) {
  margin-left: auto;
  transform: rotate(0.8deg);
}

#messaging > div > div > div:nth-child(3) {
  margin-left: auto;
  margin-right: auto;
  transform: rotate(-0.2deg);
}

#messaging h3 {
  font-size: 2.65rem !important;
}

#messaging > div > div > div h3 {
  color: #16324a !important;
  text-shadow: none !important;
}

#messaging > div > div > div p {
  color: rgba(22, 50, 74, 0.74) !important;
  text-shadow: none !important;
}

.chalk-underline::after {
  background: linear-gradient(90deg, var(--rl-cyan), var(--rl-lime)) !important;
  height: 6px !important;
  border-radius: 999px;
  opacity: 0.5;
}

#faq {
  background:
    linear-gradient(180deg, #ffffff 0%, #f1fbff 100%) !important;
}

#faq::before {
  width: 470px;
  height: 210px;
  left: -130px;
  bottom: 40px;
  top: auto;
}

#faq h2,
#pricing h2 {
  font-size: 2.9rem !important;
}

.raku-faq-chip {
  height: 38px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  border-color: rgba(36, 120, 255, 0.18) !important;
  color: var(--rl-ink) !important;
  box-shadow: 0 8px 16px rgba(36, 120, 255, 0.08);
}

.raku-faq-chip.is-active {
  background: linear-gradient(135deg, var(--rl-blue), var(--rl-cyan)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.raku-faq-item {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(36, 120, 255, 0.17) !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 28px rgba(36, 120, 255, 0.08);
}

.raku-faq-item.is-open {
  background: #ffffff !important;
  border-color: rgba(0, 213, 255, 0.58) !important;
}

.raku-faq-accent {
  background: linear-gradient(180deg, var(--rl-cyan), var(--rl-lime)) !important;
}

.raku-faq-qicon,
.raku-faq-aicon {
  background: rgba(0, 213, 255, 0.15) !important;
  color: var(--rl-blue) !important;
  font-family: var(--rl-display) !important;
}

.raku-faq-qtext,
.raku-faq-atext {
  color: var(--rl-ink) !important;
}

#pricing {
  background:
    linear-gradient(180deg, #f1fbff 0%, #ffffff 58%, #e8f8ff 100%) !important;
}

#pricing::before {
  width: 520px;
  height: 240px;
  right: -170px;
  bottom: 40px;
  top: auto;
  transform: rotate(8deg);
}

#pricing .shadow-card {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(36, 120, 255, 0.2) !important;
  border-radius: 8px !important;
  box-shadow: 0 30px 74px rgba(36, 120, 255, 0.18) !important;
  overflow: visible !important;
}

#pricing .shadow-card::before {
  content: "";
  position: absolute;
  left: 34px;
  right: 34px;
  top: -13px;
  height: 28px;
  background: linear-gradient(90deg, rgba(255, 228, 119, 0.74), rgba(255, 255, 255, 0.55), rgba(184, 244, 92, 0.55));
  clip-path: polygon(0 28%, 18% 0, 34% 26%, 54% 4%, 72% 28%, 100% 10%, 96% 100%, 4% 82%);
}

#pricing li {
  color: var(--rl-muted) !important;
}

footer {
  background: linear-gradient(180deg, #e8f8ff, #ffffff) !important;
  border-top-color: rgba(36, 120, 255, 0.15) !important;
}

footer a,
footer .text-sm {
  color: var(--rl-muted) !important;
}

.rl-scroll-note {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--rl-blue);
  background:
    conic-gradient(var(--rl-cyan) calc(var(--rl-scroll) * 1turn), rgba(36, 120, 255, 0.1) 0),
    rgba(255, 255, 255, 0.82);
  box-shadow: 0 14px 30px rgba(36, 120, 255, 0.16);
  pointer-events: none;
}

.rl-scroll-note::before {
  content: "";
  width: 38px;
  height: 38px;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.94);
}

.rl-scroll-note::after {
  content: "↓";
  position: absolute;
  font-family: var(--rl-hand);
  font-size: 1.6rem;
  animation: rlFloatTiny 1.8s ease-in-out infinite;
}

.rl-doodle-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.rl-doodle-layer svg {
  position: absolute;
  width: 180px;
  height: 180px;
  overflow: visible;
  opacity: 0.42;
}

.rl-doodle-layer .d1 { left: 4%; top: 18%; transform: rotate(-10deg); }
.rl-doodle-layer .d2 { right: 6%; top: 42%; transform: rotate(8deg); }
.rl-doodle-layer .d3 { left: 10%; bottom: 16%; transform: rotate(4deg); }

.rl-doodle-layer path {
  fill: none;
  stroke: rgba(36, 120, 255, 0.46);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
}

.rl-youth-ready .rl-doodle-layer path {
  animation: rlWriteStroke 3s ease forwards;
}

.rl-youth-reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 760ms ease, transform 760ms ease;
}

.rl-youth-reveal.is-inview {
  opacity: 1;
  transform: translateY(0);
}

.rl-float-soft {
  animation: rlFloatSoft 7s ease-in-out infinite;
}

@keyframes rlFloatSoft {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--rl-rotate, 0deg)); }
  50% { transform: translate3d(0, -12px, 0) rotate(calc(var(--rl-rotate, 0deg) + 1deg)); }
}

@keyframes rlFloatTiny {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(4px); }
}

@media (max-width: 1024px) {
  #hero {
    background-position: 58% top !important;
  }

  .rl-hero-handline {
    display: none;
  }

  #hero .relative.z-10 {
    width: min(520px, calc(100% - 32px)) !important;
    margin-left: 24px !important;
  }

  #rl-concept-target-section {
    min-height: auto !important;
    padding-right: 24px !important;
  }

  .rl-photo-concept,
  .rl-photo-features,
  .rl-photo-messaging {
    position: relative;
    inset: auto;
    width: min(100%, 520px);
    height: 300px;
    margin: 32px auto 0;
    display: block;
  }

  .compare-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  #hero {
    min-height: calc(100svh - 20px) !important;
    padding: 82px 16px 44px !important;
    justify-content: flex-end !important;
    background:
      linear-gradient(180deg, rgba(247, 252, 255, 0.05) 0%, rgba(247, 252, 255, 0.22) 34%, rgba(247, 252, 255, 0.98) 68%),
      url("./assets/youth-hero-sky-ui.png") center 60px / auto 62% no-repeat,
      linear-gradient(180deg, #c9efff 0%, #f7fcff 100%) !important;
  }

  #hero .relative.z-10 {
    width: 100% !important;
    margin: 0 !important;
    padding: 14px !important;
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(36, 120, 255, 0.18);
    border-radius: 8px;
    box-shadow: 0 18px 38px rgba(35, 117, 180, 0.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    clip-path: polygon(0 3%, 98% 0, 100% 94%, 4% 100%);
  }

  #hero .mobile-hero-headline {
    font-size: 1.82rem !important;
    line-height: 1.26 !important;
    margin-bottom: 10px !important;
    text-shadow: none !important;
  }

  #hero .hero-kicker-wrap {
    margin-bottom: 8px !important;
  }

  #hero .hero-kicker-pill {
    min-height: 28px !important;
    padding: 4px 10px !important;
    font-size: 0.86rem !important;
  }

  #hero .hero-flow-copy {
    gap: 8px !important;
  }

  #hero .hero-flow-section {
    padding: 10px 12px !important;
    background: rgba(255, 255, 255, 0.94) !important;
  }

  #hero .hero-flow-label {
    margin-bottom: 5px !important;
    font-size: 0.84rem !important;
  }

  #hero .hero-flow-text,
  #hero .hero-flow-text--accent,
  #hero .hero-flow-row {
    color: var(--rl-ink) !important;
    font-size: 0.98rem !important;
    line-height: 1.3 !important;
    text-shadow: none !important;
  }

  #hero .hero-flow-highlight {
    color: var(--rl-blue) !important;
  }

  #hero .flex.flex-col {
    width: 100% !important;
    display: flex !important;
    min-height: 0 !important;
  }

  #hero button {
    width: 100% !important;
    min-width: 0 !important;
  }

  #rl-concept-target-section,
  #lecture-cost,
  #features,
  #showcase,
  #messaging,
  #faq,
  #pricing {
    padding: 72px 18px !important;
  }

  #rl-concept-text {
    font-size: 1.12rem !important;
    line-height: 1.9 !important;
  }

  #lecture-cost h2,
  #showcase h2,
  #faq h2,
  #pricing h2 {
    font-size: 2rem !important;
  }

  #messaging h3,
  .compare-card h3 {
    font-size: 1.75rem !important;
  }

  #lecture-cost div[style*="grid-template-columns:1fr 32px 1fr 32px 1fr"] {
    grid-template-columns: 1fr !important;
  }

  #lecture-cost div[style*="grid-template-columns:1fr 32px 1fr 32px 1fr"] > span {
    margin-top: 0 !important;
  }

  #showcase .relative.rounded-xl {
    padding: 10px !important;
    clip-path: polygon(0 3%, 100% 0, 100% 96%, 5% 100%);
  }

  #messaging > div > div > div {
    padding: 20px !important;
  }

  .rl-scroll-note,
  .rl-doodle-layer {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .rl-youth-reveal {
    opacity: 1;
    transform: none;
  }
}

/* RakuLetter hotfix: stop top blank area and keep hero attached to nav */
#ai-context {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#root,
#rl-view-index,
#rl-view-index > .relative {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

nav + #hero,
#hero {
  margin-top: 0 !important;
  transform: none !important;
}

#hero {
  position: relative !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  min-height: calc(100svh - 64px) !important;
  padding-top: clamp(72px, 8svh, 96px) !important;
  background:
    linear-gradient(90deg, rgba(247, 252, 255, 0.94) 0%, rgba(247, 252, 255, 0.67) 34%, rgba(255, 255, 255, 0.12) 64%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(223, 245, 255, 0.34)),
    url("./assets/youth-hero-sky-ui.png") center top / cover no-repeat !important;
}

/* RakuLetter hotfix 2: remove visible top blank inside the hero.
   The hero itself was attached to the nav, but its flex content still used
   justify-content:flex-end, so large screens showed an empty upper area. */
:root {
  --raku-nav-height: 64px;
}

#hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  min-height: calc(100svh - var(--raku-nav-height)) !important;
  padding-top: calc(var(--raku-nav-height) + clamp(20px, 4svh, 44px)) !important;
  padding-bottom: clamp(48px, 7svh, 84px) !important;
  background-position: center top !important;
}

#hero .relative.z-10 {
  margin-top: 0 !important;
}

@media (max-width: 768px) {
  #hero {
    justify-content: flex-start !important;
    padding-top: calc(var(--raku-nav-height) + 18px) !important;
  }
}

/* RakuLetter hotfix 3: hard-stop hero vertical drift.
   Do not let flex alignment or an oversized hero child create a blank first view. */
html,
body {
  margin-top: 0 !important;
  padding-top: 0 !important;
  overflow-x: hidden !important;
}

#ai-context {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

#root,
#rl-view-index,
#rl-view-index > .relative {
  margin-top: 0 !important;
  padding-top: 0 !important;
  transform: none !important;
}

/* The nav is fixed, so the hero must manage its own top offset.
   Use block layout instead of flex so justify-content cannot push the copy down. */
#hero {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100svh !important;
  margin: 0 !important;
  padding: clamp(112px, 11svh, 140px) 0 clamp(56px, 7svh, 88px) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transform: none !important;
  align-items: initial !important;
  justify-content: initial !important;
  background:
    linear-gradient(90deg, rgba(247, 252, 255, 0.92) 0%, rgba(247, 252, 255, 0.62) 34%, rgba(255, 255, 255, 0.06) 64%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(223, 245, 255, 0.20)),
    url("./assets/youth-hero-sky-ui.png") center top / cover no-repeat !important;
}

#hero > .relative.z-10 {
  display: block !important;
  position: relative !important;
  z-index: 20 !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: min(560px, calc(100% - 40px)) !important;
  max-width: 560px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto 0 clamp(28px, 6vw, 92px) !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  text-align: left !important;
  color: var(--rl-ink) !important;
}

#hero .hero-kicker-wrap,
#hero .mobile-hero-headline,
#hero .hero-flow-copy,
#hero .flex.flex-col,
#hero .mobile-hero-feature-list {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

@media (max-width: 768px) {
  #hero {
    display: block !important;
    min-height: 100svh !important;
    padding: 92px 16px 44px !important;
    background:
      linear-gradient(180deg, rgba(247, 252, 255, 0.02) 0%, rgba(247, 252, 255, 0.16) 34%, rgba(247, 252, 255, 0.96) 70%),
      url("./assets/youth-hero-sky-ui.png") center 0 / auto 70% no-repeat,
      linear-gradient(180deg, #c9efff 0%, #f7fcff 100%) !important;
  }

  #hero > .relative.z-10 {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 14px !important;
  }
}

/* ========== final patch: scroll progress bar ========== */
.scroll-progress {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 999999 !important;
  width: 100% !important;
  height: 4px !important;
  background: linear-gradient(90deg, #20d6e6, #2f7cf6, #ff4e9b) !important;
  box-shadow: 0 0 18px rgba(32, 214, 230, 0.55) !important;
  pointer-events: none !important;
  transform: scaleX(0) translateZ(0) !important;
  transform-origin: left center !important;
  will-change: transform !important;
}

/* ========== final patch: nav should not cover hero ========== */

#rl-view-index nav {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
}

/* navが通常フローに戻るので、heroは画面からnav分だけ引く */
#hero {
  min-height: calc(100svh - 57px) !important;
}

/* モバイル側の最後の上書きも潰す */
@media (max-width: 768px) {
  #hero {
    min-height: calc(100svh - 57px) !important;
    background-position:
      center top,
      center top,
      center top !important;
  }
}

/* ========== final patch: transparent nav on first view, translucent after hero ========== */
/* ファーストビューでは、バーの背景・影・境界線だけを完全透明化。
   navのロゴ/テキスト/ボタンは残す。
   JSが .nav-after-hero を付けたら、2画面目以降だけ半透明バーに戻す。 */

:root {
  --raku-nav-height: 64px;
}

/* nav自体は常に追従 */
#rl-view-index nav,
body > nav,
nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 99990 !important;
}

/* ファーストビューでは、バー背景だけでなく左上ブランドも非表示。
   JSが .nav-after-hero を付けたら、2画面目以降だけ半透明バーに戻す。 */

#rl-view-index nav:not(.nav-after-hero),
body > nav:not(.nav-after-hero),
nav:not(.nav-after-hero),
#rl-view-index nav.nav-scrolled:not(.nav-after-hero),
body > nav.nav-scrolled:not(.nav-after-hero),
nav.nav-scrolled:not(.nav-after-hero) {
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}



/* 2画面目以降: 半透明バー */
#rl-view-index nav.nav-after-hero,
body > nav.nav-after-hero,
nav.nav-after-hero {
  background: rgba(240, 253, 255, 0.54) !important;
  border-bottom: 1px solid rgba(52, 160, 226, 0.15) !important;
  box-shadow: 0 10px 28px rgba(66, 146, 203, 0.09) !important;
  backdrop-filter: blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
}

/* fixed navなので、hero本文だけはnavの下に逃がす */
#hero {
  padding-top: calc(var(--raku-nav-height) + clamp(28px, 5svh, 58px)) !important;
}

/* スクロール進捗バーはnavより上 */
.scroll-progress {
  z-index: 999999 !important;
}

@media (max-width: 768px) {
  :root {
    --raku-nav-height: 57px;
  }

  #hero {
    padding-top: calc(var(--raku-nav-height) + 35px) !important;
  }

  #rl-view-index nav.nav-after-hero,
  body > nav.nav-after-hero,
  nav.nav-after-hero {
    background: rgba(240, 253, 255, 0.52) !important;
    box-shadow: 0 8px 22px rgba(66, 146, 203, 0.08) !important;
  }
}

/* ========== final patch: show the full first-view hero image ========== */
/* 原因: youth-hero-sky-ui.png を background-size: cover で敷いているため、
   画面比率によって画像の下側（ノートPC下部）が hero の終端で切れる。
   画像を横幅100%基準で表示し、hero 自体の高さを画像比率ぶん確保する。 */
:root {
  --raku-hero-image-ratio: 0.58; /* 画像の高さ ÷ 幅。下がまだ切れる場合は 0.60〜0.64 に上げる */
}

#hero {
  min-height: max(100svh, calc(100vw * var(--raku-hero-image-ratio))) !important;
  background-image:
    linear-gradient(90deg, rgba(247, 252, 255, 0.92) 0%, rgba(247, 252, 255, 0.62) 34%, rgba(255, 255, 255, 0.06) 64%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(223, 245, 255, 0.20)),
    url("./assets/youth-hero-sky-ui.png") !important;
  background-position:
    center top,
    center top,
    center top !important;
  background-size:
    cover,
    cover,
    100% auto !important;
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat !important;
}

@media (max-width: 1024px) {
  #hero {
    background-position:
      center top,
      center top,
      center top !important;
    background-size:
      cover,
      cover,
      auto 100% !important;
  }
}

@media (max-width: 768px) {
  #hero {
    min-height: max(100svh, calc(100vw * 1.55)) !important;
    background-image:
      linear-gradient(180deg, rgba(247, 252, 255, 0.05) 0%, rgba(247, 252, 255, 0.22) 34%, rgba(247, 252, 255, 0.98) 72%),
      url("./assets/youth-hero-sky-ui.png"),
      linear-gradient(180deg, #c9efff 0%, #f7fcff 100%) !important;
    background-position:
      center top,
      center top,
      center top !important;
    background-size:
      cover,
      100% auto,
      cover !important;
    background-repeat:
      no-repeat,
      no-repeat,
      no-repeat !important;
  }
}

/* =========================================
   Hero: 画面高さごとに最適化して
   スクロールしなくても全体が見えるようにする
========================================= */

:root {
  --raku-hero-top-pad: clamp(68px, 8svh, 96px);
  --raku-hero-bottom-pad: clamp(12px, 2.2svh, 28px);
}

/* ベース */
#hero {
  position: relative !important;
  min-height: 100svh !important;
  height: 100svh !important;
  padding: var(--raku-hero-top-pad) 0 var(--raku-hero-bottom-pad) !important;
  overflow: hidden !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;

  background:
    linear-gradient(90deg, rgba(247, 252, 255, 0.94) 0%, rgba(247, 252, 255, 0.67) 34%, rgba(255, 255, 255, 0.12) 64%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(223, 245, 255, 0.34)),
    url("./assets/youth-hero-sky-ui.png") center bottom / contain no-repeat !important;
}

/* 横長だけど高さが低い画面向け */
@media (max-aspect-ratio: 16/10) {
  #hero {
    background-position: center bottom !important;
    background-size: auto 100% !important;
  }
}

#hero .relative.z-10 {
  width: min(560px, calc(100% - 40px)) !important;
  max-width: 560px !important;
  margin: 0 auto 0 clamp(24px, 5vw, 92px) !important;
  padding: 0 !important;
  text-align: left !important;
  align-self: flex-start !important;
}

/* 見出し */
#hero .mobile-hero-headline {
  display: block !important;
  margin: 0 0 16px !important;
  font-size: clamp(2.2rem, 4.8vw, 3rem) !important;
  line-height: 1.18 !important;
}

/* 上の小ラベル */
#hero .hero-kicker-wrap {
  margin-bottom: 10px !important;
}

#hero .hero-kicker-pill {
  min-height: 32px !important;
  padding: 6px 12px !important;
  font-size: 0.95rem !important;
}

/* 2つの比較カード */
#hero .hero-flow-copy {
  gap: 8px !important;
  margin: 0 0 16px !important;
}

#hero .hero-flow-section {
  padding: 12px 14px 13px !important;
}

#hero .hero-flow-label {
  margin-bottom: 7px !important;
  padding: 3px 8px !important;
  font-size: 0.88rem !important;
}

#hero .hero-flow-text,
#hero .hero-flow-text--accent,
#hero .hero-flow-row {
  gap: 4px !important;
  font-size: clamp(1.02rem, 2vw, 1.28rem) !important;
  line-height: 1.3 !important;
}

/* ボタン */
#hero .flex.flex-col {
  gap: 10px !important;
}

#hero button,
#hero .mobile-download-guide-btn,
#hero #hero-download-btn,
#hero #btn-3min {
  min-height: 48px !important;
  padding: 0 20px !important;
  font-size: 0.96rem !important;
}

/* 下の特徴リスト */
#hero .mobile-hero-feature-list {
  gap: 8px !important;
}

#hero .mobile-hero-feature-list li {
  padding: 8px 12px !important;
  font-size: 0.9rem !important;
}

/* 手書き文字 */
.rl-hero-handline {
  right: max(20px, 5vw) !important;
  top: 72px !important;
  width: min(470px, 37vw) !important;
}


/* =========================
   高さ 900px 以下
========================= */
@media (max-height: 900px) {
  :root {
    --raku-hero-top-pad: 60px;
    --raku-hero-bottom-pad: 18px;
  }

  #hero {
    background-size: auto 100% !important;
  }

  #hero .relative.z-10 {
    width: min(530px, calc(100% - 32px)) !important;
    margin-left: clamp(18px, 4vw, 68px) !important;
  }

  #hero .mobile-hero-headline {
    font-size: 2.35rem !important;
    margin-bottom: 12px !important;
  }

  #hero .hero-kicker-pill {
    min-height: 30px !important;
    font-size: 0.9rem !important;
  }

  #hero .hero-flow-section {
    padding: 10px 12px 11px !important;
  }

  #hero .hero-flow-label {
    font-size: 0.82rem !important;
    margin-bottom: 6px !important;
  }

  #hero .hero-flow-text,
  #hero .hero-flow-text--accent,
  #hero .hero-flow-row {
    font-size: 1rem !important;
    line-height: 1.24 !important;
  }

  #hero button,
  #hero .mobile-download-guide-btn,
  #hero #hero-download-btn,
  #hero #btn-3min {
    min-height: 45px !important;
    padding: 0 18px !important;
    font-size: 0.92rem !important;
  }

  .rl-hero-handline {
    width: min(420px, 34vw) !important;
    top: 62px !important;
  }
}


/* =========================
   高さ 820px 以下
========================= */
@media (max-height: 820px) {
  :root {
    --raku-hero-top-pad: 52px;
    --raku-hero-bottom-pad: 14px;
  }

  #hero .relative.z-10 {
    width: min(500px, calc(100% - 28px)) !important;
    margin-left: clamp(14px, 3vw, 46px) !important;
  }

  #hero .hero-kicker-wrap {
    margin-bottom: 6px !important;
  }

  #hero .mobile-hero-headline {
    font-size: 2rem !important;
    line-height: 1.12 !important;
    margin-bottom: 10px !important;
  }

  #hero .hero-flow-copy {
    gap: 6px !important;
    margin-bottom: 12px !important;
  }

  #hero .hero-flow-section {
    padding: 9px 10px 10px !important;
  }

  #hero .hero-flow-label {
    font-size: 0.78rem !important;
    margin-bottom: 5px !important;
  }

  #hero .hero-flow-text,
  #hero .hero-flow-text--accent,
  #hero .hero-flow-row {
    font-size: 0.94rem !important;
    line-height: 1.2 !important;
    gap: 3px !important;
  }

  #hero button,
  #hero .mobile-download-guide-btn,
  #hero #hero-download-btn,
  #hero #btn-3min {
    min-height: 42px !important;
    padding: 0 16px !important;
    font-size: 0.88rem !important;
  }

  #hero .mobile-hero-feature-list li {
    padding: 7px 10px !important;
    font-size: 0.84rem !important;
  }

  .rl-hero-handline {
    width: min(360px, 30vw) !important;
    top: 56px !important;
  }
}


/* =========================
   高さ 740px 以下
========================= */
@media (max-height: 740px) {
  :root {
    --raku-hero-top-pad: 44px;
    --raku-hero-bottom-pad: 10px;
  }

  #hero .relative.z-10 {
    width: min(455px, calc(100% - 24px)) !important;
  }

  #hero .mobile-hero-headline {
    font-size: 1.72rem !important;
    line-height: 1.08 !important;
    margin-bottom: 8px !important;
  }

  #hero .hero-flow-section {
    padding: 7px 9px 8px !important;
  }

  #hero .hero-flow-text,
  #hero .hero-flow-text--accent,
  #hero .hero-flow-row {
    font-size: 0.86rem !important;
    line-height: 1.15 !important;
  }

  #hero button,
  #hero .mobile-download-guide-btn,
  #hero #hero-download-btn,
  #hero #btn-3min {
    min-height: 39px !important;
    padding: 0 14px !important;
    font-size: 0.82rem !important;
  }

  .rl-hero-handline {
    width: min(300px, 26vw) !important;
    top: 48px !important;
  }
}

/* =========================================
   Final polish: attached sections only
========================================= */
:root {
  --rl-hot-pink: #ff4fa3;
  --rl-vivid-blue: #168bff;
  --rl-mint: #53f2d4;
  --rl-soft-line: rgba(22, 139, 255, 0.18);
}

#hero,
#lecture-cost,
#features,
#showcase {
  isolation: isolate;
}

#hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse 42% 28% at 74% 18%, rgba(0,190,220,0.10), transparent 70%),
    radial-gradient(ellipse 36% 24% at 16% 84%, rgba(47,104,201,0.08), transparent 72%),
    linear-gradient(120deg, rgba(255,255,255,0.1), rgba(0,213,255,0.12)) !important;
  opacity: 0.42 !important;
  mix-blend-mode: multiply;
  animation: rlAirShift 18s ease-in-out infinite;
}

#hero::after {
  content: "" !important;
  position: absolute !important;
  left: clamp(16px, 4vw, 72px) !important;
  bottom: clamp(18px, 4vw, 54px) !important;
  width: min(610px, 45vw) !important;
  height: min(240px, 24vw) !important;
  z-index: 1 !important;
  border-radius: 45% 55% 42% 58% / 58% 42% 58% 42% !important;
  background:
    radial-gradient(circle at 26% 22%, rgba(255, 79, 163, 0.22), transparent 33%),
    radial-gradient(circle at 70% 55%, rgba(0, 213, 255, 0.26), transparent 44%),
    radial-gradient(circle at 42% 76%, rgba(184, 244, 92, 0.24), transparent 38%) !important;
  filter: blur(1px);
  opacity: 0.92 !important;
  transform: rotate(-4deg);
  animation: rlBlobBreath 9s ease-in-out infinite;
}

#hero > .relative.z-10 {
  z-index: 3 !important;
  filter: drop-shadow(0 24px 45px rgba(20, 112, 184, 0.12));
}

#hero .mobile-hero-headline {
  position: relative;
  color: #0d2c46 !important;
}

#hero .mobile-hero-headline::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: -8px;
  width: min(360px, 82%);
  height: 12px;
  background: linear-gradient(90deg, rgba(0, 213, 255, 0.52), rgba(184, 244, 92, 0.55), rgba(255, 79, 163, 0.28));
  clip-path: polygon(0 34%, 10% 14%, 26% 34%, 43% 10%, 63% 42%, 86% 20%, 100% 46%, 98% 84%, 62% 72%, 31% 90%, 2% 70%);
  z-index: -1;
  transform: rotate(-1.2deg);
}

#hero .hero-flow-section {
  border-width: 1.5px !important;
  border-color: rgba(22, 139, 255, 0.28) !important;
  background:
    linear-gradient(140deg, rgba(255,255,255,0.95) 0%, rgba(236,251,255,0.9) 68%, rgba(255,244,249,0.9) 100%) !important;
  box-shadow:
    10px 12px 0 rgba(0, 213, 255, 0.08),
    0 18px 42px rgba(35, 117, 180, 0.14) !important;
}

#hero .hero-flow-section--after {
  background:
    linear-gradient(140deg, rgba(235, 255, 252, 0.96), rgba(244, 255, 216, 0.9) 56%, rgba(255, 255, 255, 0.96)) !important;
  box-shadow:
    -8px 10px 0 rgba(184, 244, 92, 0.16),
    0 18px 42px rgba(35, 117, 180, 0.14) !important;
}

#hero .hero-flow-label {
  box-shadow: 0 5px 0 rgba(255, 255, 255, 0.75) inset;
}

#hero .hero-flow-highlight {
  color: #0078ff !important;
  text-decoration-color: rgba(0, 213, 255, 0.55) !important;
}

#hero-download-btn {
  background: linear-gradient(135deg, #168bff, #00d5ff 55%, #39d7b5) !important;
}

#hero #btn-3min {
  background: rgba(255,255,255,0.92) !important;
}

.rl-section-write {
  position: absolute;
  z-index: 4;
  width: min(520px, 42vw);
  height: auto;
  pointer-events: none;
  overflow: visible;
  opacity: 0;
  transform: translateY(18px) rotate(-2deg);
  transition: opacity 520ms ease, transform 720ms cubic-bezier(.2,.82,.2,1);
}

.rl-section-write text {
  font-family: var(--rl-hand);
  font-size: 28px;
  font-weight: 700;
  fill: transparent;
  stroke: #12324a;
  stroke-width: 1px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
}

.rl-section-write path {
  fill: none;
  stroke: var(--rl-hot-pink);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 560;
  stroke-dashoffset: 560;
  opacity: 0.75;
}

.rl-section-write.is-inview {
  opacity: 1;
  transform: translateY(0) rotate(-2deg);
}

.rl-section-write.is-inview text {
  animation: rlSectionWrite 1.8s 0.08s ease forwards, rlSectionFill 0.38s 1.55s ease forwards;
}

.rl-section-write.is-inview path {
  animation: rlSectionWrite 1.35s 0.72s ease forwards;
}

.rl-section-write--lecture {
  left: clamp(18px, 5vw, 92px);
  top: clamp(22px, 4vw, 54px);
}

.rl-section-write--features {
  right: clamp(18px, 6vw, 96px);
  top: clamp(26px, 5vw, 70px);
  transform: translateY(18px) rotate(2deg);
}

.rl-section-write--features.is-inview {
  transform: translateY(0) rotate(2deg);
}

.rl-section-write--showcase {
  left: clamp(18px, 5vw, 84px);
  top: clamp(24px, 4vw, 58px);
}

#lecture-cost {
  background:
    linear-gradient(180deg, #ffffff 0%, #effbff 58%, #ffffff 100%) !important;
}

#lecture-cost::before,
#features::before,
#showcase::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(47,104,201,0.045) 0 1px, transparent 1px 100%),
    radial-gradient(ellipse 42% 24% at 84% 20%, rgba(0,190,220,0.10), transparent 64%),
    radial-gradient(ellipse 36% 24% at 12% 82%, rgba(47,104,201,0.08), transparent 68%) !important;
  background-size: 42px 100%, auto, auto !important;
  opacity: 0.22 !important;
  mix-blend-mode: multiply;
}

#lecture-cost::after,
#features::after,
#showcase::after {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  pointer-events: none !important;
  width: min(680px, 56vw);
  height: min(310px, 28vw);
  border-radius: 42% 58% 62% 38% / 52% 38% 62% 48%;
  background:
    radial-gradient(circle at 28% 24%, rgba(0, 213, 255, 0.18), transparent 36%),
    radial-gradient(circle at 70% 64%, rgba(255, 79, 163, 0.12), transparent 42%),
    radial-gradient(circle at 48% 76%, rgba(184, 244, 92, 0.18), transparent 40%);
  filter: blur(0.2px);
  animation: rlBlobBreath 10s ease-in-out infinite;
}

#lecture-cost::after {
  right: -140px;
  bottom: 40px;
}

#lecture-cost > div[style*="max-width:680px"] {
  z-index: 2 !important;
}

#lecture-cost h2 {
  color: #14344f !important;
  text-shadow: 0 3px 0 rgba(255,255,255,0.9), 0 18px 38px rgba(22,139,255,0.12) !important;
}

#lecture-cost > div[style*="max-width:680px"] > p:first-child {
  display: inline-flex;
  padding: 7px 14px;
  border: 1px solid rgba(22,139,255,0.2);
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  box-shadow: 6px 8px 0 rgba(0,213,255,0.08);
  color: #486f8a !important;
}

#lecture-cost > div[style*="max-width:680px"] > div[style*="background:linear-gradient"] {
  overflow: visible !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.94), rgba(235,252,255,0.9)) !important;
  border: 1px solid rgba(22,139,255,0.24) !important;
  border-radius: 8px !important;
  box-shadow:
    16px 18px 0 rgba(0,213,255,0.08),
    -12px -10px 0 rgba(184,244,92,0.1),
    0 34px 90px rgba(38,127,198,0.18) !important;
}

#lecture-cost > div[style*="max-width:680px"] > div[style*="background:linear-gradient"]::before {
  content: "1回分";
  position: absolute;
  right: clamp(18px, 4vw, 42px);
  top: -18px;
  padding: 8px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffec70, #b8f45c);
  color: #275425;
  font-family: var(--rl-hand);
  font-weight: 700;
  box-shadow: 0 14px 26px rgba(184,244,92,0.2);
  transform: rotate(2.4deg);
}

#lecture-cost input {
  background: rgba(247,252,255,0.92) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.88), 0 10px 24px rgba(22,139,255,0.06) !important;
}

#calc-result {
  background: linear-gradient(135deg, rgba(22,139,255,0.14), rgba(0,213,255,0.22), rgba(184,244,92,0.18)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 12px 28px rgba(0,213,255,0.14) !important;
}

#features {
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #effbff 48%, #ffffff 100%) !important;
}

#features::before {
  background-position: center 34px !important;
  opacity: 0.26 !important;
}

#features::after {
  left: -160px;
  top: 92px;
}

.rl-photo-features {
  left: auto !important;
  right: -110px !important;
  top: 28px !important;
  z-index: 1 !important;
  width: min(720px, 50vw) !important;
  height: 310px !important;
  clip-path: none !important;
  transform: rotate(2deg) !important;
  opacity: 0.18 !important;
  mix-blend-mode: multiply;
  filter: saturate(1.08);
}

.rl-photo-features::before {
  display: none !important;
}

.rl-photo-features img {
  object-fit: cover !important;
}

.compare-grid {
  gap: clamp(22px, 3vw, 40px) !important;
}

.compare-card {
  position: relative !important;
  z-index: 3 !important;
  overflow: visible !important;
  min-height: 540px;
  padding: clamp(22px, 3vw, 34px) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.96), rgba(237,252,255,0.9)) !important;
  border-color: rgba(22,139,255,0.22) !important;
  box-shadow:
    0 30px 76px rgba(38,127,198,0.16),
    0 1px 0 rgba(255,255,255,0.88) inset !important;
  transition: transform 360ms cubic-bezier(.2,.82,.2,1), box-shadow 360ms ease !important;
}

.compare-card:hover {
  transform: translateY(-8px) rotate(-0.4deg) !important;
  box-shadow:
    0 44px 96px rgba(38,127,198,0.22),
    0 0 0 1px rgba(0,213,255,0.2) inset !important;
}

.compare-card--lazy:hover {
  transform: translateY(-8px) rotate(0.4deg) !important;
}

.compare-card::before {
  left: clamp(28px, 4vw, 44px) !important;
  right: auto !important;
  top: -14px !important;
  width: min(230px, 54%) !important;
  height: 32px !important;
  background: linear-gradient(90deg, rgba(255,228,119,0.82), rgba(255,255,255,0.72), rgba(184,244,92,0.62)) !important;
  transform: rotate(-1.2deg);
}

.compare-card::after {
  position: absolute;
  right: 28px;
  top: 24px;
  padding: 6px 13px;
  border-radius: 999px;
  font-family: var(--rl-hand);
  font-weight: 700;
  color: #0f4e84;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(22,139,255,0.2);
  box-shadow: 0 10px 22px rgba(22,139,255,0.08);
}

.compare-card--driven::after {
  content: "ちゃんとやる派";
}

.compare-card--lazy::after {
  content: "放置しがち派";
}

.compare-card > div.mb-6 {
  width: 100% !important;
  height: clamp(160px, 18vw, 228px) !important;
  margin: 0 0 clamp(24px, 3vw, 34px) !important;
  display: block !important;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.88);
  box-shadow:
    0 18px 38px rgba(35,117,180,0.13),
    8px 10px 0 rgba(0,213,255,0.08);
  clip-path: polygon(3% 8%, 92% 0, 100% 24%, 96% 88%, 72% 100%, 8% 92%, 0 52%);
}

.compare-card--lazy > div.mb-6 {
  clip-path: polygon(0 18%, 24% 4%, 88% 0, 100% 42%, 92% 96%, 24% 100%, 5% 76%);
  box-shadow:
    0 18px 38px rgba(35,117,180,0.13),
    -8px 10px 0 rgba(184,244,92,0.16);
}

.compare-icon {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  clip-path: none !important;
  box-shadow: none !important;
  transform: scale(1.015);
  transition: transform 720ms cubic-bezier(.2,.82,.2,1), filter 720ms ease;
}

.compare-card:hover .compare-icon {
  transform: scale(1.06) rotate(0.4deg);
  filter: saturate(1.12) contrast(1.03);
}

.compare-card h3 {
  color: #10334e !important;
  text-wrap: balance;
}

.compare-card p {
  line-height: 1.9 !important;
}

.compare-card .space-y-2 {
  padding: 16px 18px;
  border: 1px dashed rgba(22,139,255,0.24);
  border-radius: 8px;
  background: rgba(247,252,255,0.76);
}

.compare-card .space-y-2 p {
  color: #24678d !important;
}

#showcase {
  overflow: hidden;
  background:
    linear-gradient(180deg, #ffffff 0%, #ecfaff 52%, #ffffff 100%) !important;
}

#showcase::before {
  background-position: center 26px !important;
  opacity: 0.2 !important;
}

#showcase::after {
  right: -170px;
  top: 220px;
}

#showcase .text-center {
  position: relative;
  z-index: 2;
}

#showcase h2 {
  color: #10334e !important;
  text-shadow: 0 3px 0 rgba(255,255,255,0.92), 0 18px 42px rgba(22,139,255,0.14) !important;
  text-wrap: balance;
}

#showcase h2::after {
  content: "";
  display: block;
  width: min(520px, 72vw);
  height: 15px;
  margin: 16px auto 0;
  background: linear-gradient(90deg, rgba(0,213,255,0.62), rgba(184,244,92,0.56), rgba(255,79,163,0.42));
  clip-path: polygon(0 40%, 12% 12%, 28% 42%, 46% 18%, 68% 48%, 88% 18%, 100% 44%, 98% 84%, 70% 72%, 42% 94%, 12% 72%);
}

#showcase p {
  color: #426a86 !important;
}

.rl-showcase-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.rl-showcase-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(22,139,255,0.2);
  background: rgba(255,255,255,0.82);
  color: #10456b;
  font-family: var(--rl-hand);
  font-weight: 700;
  box-shadow: 0 9px 20px rgba(22,139,255,0.08);
}

.rl-showcase-badges span:nth-child(2) {
  background: rgba(230,255,248,0.9);
  box-shadow: 0 9px 20px rgba(0,213,255,0.11);
}

.rl-showcase-badges span:nth-child(3) {
  background: rgba(251,255,226,0.92);
  box-shadow: 0 9px 20px rgba(184,244,92,0.12);
}

#showcase #btn-save-flow {
  border-color: rgba(22,139,255,0.28) !important;
  box-shadow:
    0 15px 28px rgba(22,139,255,0.14),
    inset 0 1px 0 rgba(255,255,255,0.86) !important;
}

#showcase .relative.max-w-6xl {
  position: relative;
  z-index: 2;
  perspective: 1200px;
}

#showcase .relative.max-w-6xl::before,
#showcase .relative.max-w-6xl::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 8px;
  pointer-events: none;
}

#showcase .relative.max-w-6xl::before {
  inset: -18px 20px 26px -22px;
  background:
    linear-gradient(135deg, rgba(0,213,255,0.2), rgba(184,244,92,0.16), rgba(255,79,163,0.12));
  transform: rotate(-2.2deg);
  clip-path: polygon(2% 9%, 98% 0, 100% 91%, 74% 100%, 0 94%);
}

#showcase .relative.max-w-6xl::after {
  inset: 22px -22px -20px 34px;
  border: 2px dashed rgba(22,139,255,0.22);
  transform: rotate(1.4deg);
}

#showcase .relative.rounded-xl {
  overflow: visible !important;
  padding: clamp(10px, 1.8vw, 20px) !important;
  border: 1px solid rgba(22,139,255,0.2);
  border-radius: 8px !important;
  clip-path: none !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.96), rgba(226,250,255,0.86)) !important;
  box-shadow:
    0 38px 94px rgba(20,89,145,0.2),
    0 0 0 1px rgba(255,255,255,0.82) inset !important;
  transform: rotate(-0.7deg);
}

#showcase img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
  clip-path: none !important;
  object-fit: contain !important;
  background: #0b332c;
  box-shadow:
    0 22px 48px rgba(8,48,42,0.18),
    0 0 0 1px rgba(255,255,255,0.78) !important;
}

#showcase .relative.max-w-6xl > p {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 34px;
  margin: 18px auto 0 !important;
  padding: 5px 15px;
  border: 1px solid rgba(22,139,255,0.2);
  border-radius: 999px;
  background: rgba(255,255,255,0.78);
  box-shadow: 0 10px 22px rgba(22,139,255,0.08);
  font-family: var(--rl-hand);
  font-size: 1rem !important;
  color: #416a86 !important;
}

#lecture-cost .rl-youth-reveal,
#features .rl-youth-reveal,
#showcase .rl-youth-reveal {
  transition:
    opacity 760ms ease,
    transform 840ms cubic-bezier(.2,.82,.2,1),
    filter 840ms ease !important;
  filter: blur(8px);
}

#lecture-cost .rl-youth-reveal.is-inview,
#features .rl-youth-reveal.is-inview,
#showcase .rl-youth-reveal.is-inview {
  filter: blur(0);
}

.compare-card.rl-youth-reveal {
  transform: translateY(36px) rotate(-1.2deg);
}

.compare-card--lazy.rl-youth-reveal {
  transform: translateY(36px) rotate(1.2deg);
  transition-delay: 90ms !important;
}

.compare-card.rl-youth-reveal.is-inview {
  transform: translateY(0) rotate(0deg) !important;
}

#showcase .relative.max-w-6xl.rl-youth-reveal {
  transform: translateY(38px) rotate(1deg) scale(0.98);
}

#showcase .relative.max-w-6xl.rl-youth-reveal.is-inview {
  transform: translateY(0) rotate(0deg) scale(1);
}

@keyframes rlSectionWrite {
  to { stroke-dashoffset: 0; }
}

@keyframes rlSectionFill {
  to { fill: rgba(18, 50, 74, 0.96); }
}

@keyframes rlBlobBreath {
  0%, 100% { transform: rotate(-4deg) scale(1); }
  50% { transform: rotate(-2deg) scale(1.04); }
}

@keyframes rlAirShift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -10px, 0) scale(1.02); }
}

@media (max-width: 1024px) {
  .rl-section-write {
    width: min(430px, 58vw);
  }

  .compare-card {
    min-height: auto;
  }

  .rl-photo-features {
    width: min(620px, 82vw) !important;
    height: 250px !important;
    right: -90px !important;
  }
}

@media (max-width: 768px) {
  #hero::before {
    background-size: 940px auto !important;
    background-position: center 2% !important;
    opacity: 0.32 !important;
  }

  #hero::after {
    width: 92vw !important;
    height: 34vw !important;
    left: -18vw !important;
    bottom: 18px !important;
  }

  #hero > .relative.z-10 {
    background:
      linear-gradient(145deg, rgba(255,255,255,0.9), rgba(231,250,255,0.84)) !important;
    border: 1px solid rgba(22,139,255,0.22) !important;
    box-shadow:
      10px 12px 0 rgba(0,213,255,0.08),
      0 20px 46px rgba(35,117,180,0.16) !important;
  }

  .rl-section-write {
    position: relative;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: min(100%, 360px);
    margin: 0 auto 18px;
  }

  .rl-section-write text {
    font-size: 24px;
  }

  #lecture-cost::before,
  #features::before,
  #showcase::before {
    background-size: 980px auto !important;
    opacity: 0.18 !important;
  }

  #lecture-cost::after,
  #features::after,
  #showcase::after,
  .rl-photo-features {
    display: none !important;
  }

  #lecture-cost > div[style*="max-width:680px"] > div[style*="background:linear-gradient"] {
    box-shadow:
      8px 10px 0 rgba(0,213,255,0.08),
      0 22px 56px rgba(38,127,198,0.14) !important;
  }

  .compare-card {
    padding: 20px !important;
  }

  .compare-card > div.mb-6 {
    height: 190px !important;
  }

  .compare-card::after {
    position: relative;
    display: inline-flex;
    right: auto;
    top: auto;
    margin: -4px 0 14px;
  }

  #showcase .relative.max-w-6xl::before {
    inset: -10px 10px 18px -12px;
  }

  #showcase .relative.max-w-6xl::after {
    display: none;
  }

  #showcase .relative.rounded-xl {
    transform: none;
  }
}

/* Mobile tightening for the first view and lecture heading */
@media (max-width: 768px) {
  #hero {
    height: 100svh !important;
    min-height: 100svh !important;
    padding: calc(var(--raku-nav-height, 57px) + 58px) 14px 22px !important;
    background-size:
      cover,
      100% auto,
      cover !important;
  }

  #hero > .relative.z-10 {
    padding: 10px 10px 14px !important;
    clip-path: polygon(0 3%, 98% 0, 100% 92%, 5% 100%) !important;
  }

  #hero .mobile-hero-headline {
    font-size: 2rem !important;
    line-height: 1.12 !important;
    margin-bottom: 10px !important;
  }

  #hero .hero-flow-copy {
    gap: 6px !important;
    margin-bottom: 12px !important;
  }

  #hero .hero-flow-section {
    padding: 8px 10px !important;
  }

  #hero .hero-flow-label {
    margin-bottom: 4px !important;
    font-size: 0.76rem !important;
  }

  #hero .hero-flow-text,
  #hero .hero-flow-text--accent,
  #hero .hero-flow-row {
    font-size: 0.94rem !important;
    line-height: 1.23 !important;
  }

  #hero .hero-flow-highlight {
    text-decoration-thickness: 4px !important;
  }

  #hero #btn-3min {
    min-height: 42px !important;
    font-size: 0.92rem !important;
  }

  #hero .mobile-hero-feature-list {
    display: none !important;
  }

  #lecture-cost h2 {
    font-size: clamp(1.65rem, 8.2vw, 2.05rem) !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere;
  }

  #lecture-cost h2 span {
    display: inline !important;
    white-space: normal !important;
  }

  #lecture-cost > div[style*="max-width:680px"] > p:first-child {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* =========================================
   Adult minimal revision: remove childish marks
========================================= */
:root {
  --rl-ink-blue: #2f68c9;
  --rl-faint-blue: rgba(47, 104, 201, 0.11);
  --rl-faint-cyan: rgba(0, 190, 220, 0.10);
}

.rl-doodle-layer,
.rl-photo-features {
  display: none !important;
}

nav .rl-brand-hand-logo {
  gap: 0 !important;
  min-width: clamp(128px, 13vw, 176px);
}

nav .rl-nav-hand-logo {
  width: clamp(128px, 13vw, 176px) !important;
  height: auto !important;
  max-height: 46px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 6px 14px rgba(47, 104, 201, 0.14)) !important;
}

nav .rl-brand-text-hidden {
  display: none !important;
}

#hero::before {
  background:
    linear-gradient(112deg, transparent 0 14%, rgba(255,255,255,0.34) 14.2% 14.6%, transparent 14.8% 100%),
    radial-gradient(ellipse 52% 36% at 76% 18%, rgba(255,255,255,0.34), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(235,250,255,0.22)) !important;
  opacity: 0.86 !important;
  mix-blend-mode: normal !important;
  animation: none !important;
}

#lecture-cost::before,
#features::before,
#showcase::before {
  background:
    linear-gradient(90deg, rgba(47,104,201,0.045) 0 1px, transparent 1px 100%),
    radial-gradient(ellipse 42% 24% at 84% 20%, rgba(0,190,220,0.10), transparent 64%),
    radial-gradient(ellipse 36% 24% at 12% 82%, rgba(47,104,201,0.08), transparent 68%) !important;
  background-size: 42px 100%, auto, auto !important;
  opacity: 0.72 !important;
  mix-blend-mode: multiply !important;
}

#lecture-cost::after,
#features::after,
#showcase::after,
#hero::after {
  background:
    radial-gradient(circle at 34% 32%, rgba(0,190,220,0.11), transparent 42%),
    radial-gradient(circle at 68% 62%, rgba(47,104,201,0.08), transparent 46%) !important;
  opacity: 0.58 !important;
  filter: blur(0.4px) !important;
}

.rl-section-write path {
  stroke: rgba(47, 104, 201, 0.48) !important;
  stroke-width: 3 !important;
  opacity: 0.7 !important;
}

.rl-section-write text {
  stroke: rgba(18, 50, 74, 0.78) !important;
  stroke-width: 0.8px !important;
}

.rl-section-write.is-inview text {
  animation: rlSectionWrite 1.8s 0.08s ease forwards, rlSectionFillClean 0.38s 1.55s ease forwards !important;
}

@keyframes rlSectionFillClean {
  to { fill: rgba(18, 50, 74, 0.9); }
}

.compare-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: auto !important;
  overflow: hidden !important;
  padding: clamp(24px, 3vw, 36px) !important;
  background:
    linear-gradient(150deg, rgba(255,255,255,0.97), rgba(246,252,255,0.94)) !important;
  border: 1px solid rgba(47,104,201,0.18) !important;
  box-shadow:
    0 28px 70px rgba(38,127,198,0.13),
    0 1px 0 rgba(255,255,255,0.92) inset !important;
}

.compare-card::before {
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background:
    linear-gradient(90deg, rgba(47,104,201,0.34), rgba(0,190,220,0.22), transparent 58%) !important;
  clip-path: none !important;
  transform: none !important;
  opacity: 1 !important;
  height: 3px !important;
  box-shadow: none !important;
}

.compare-card::after {
  top: 20px !important;
  right: 22px !important;
  color: rgba(18,50,74,0.68) !important;
  background: rgba(255,255,255,0.72) !important;
  border: 1px solid rgba(47,104,201,0.16) !important;
  box-shadow: 0 10px 24px rgba(47,104,201,0.08) !important;
}

.compare-card > div.mb-6 {
  width: 100% !important;
  height: clamp(188px, 19vw, 250px) !important;
  margin: 0 0 clamp(24px, 3vw, 34px) !important;
  border: 1px solid rgba(255,255,255,0.9) !important;
  box-shadow: 0 18px 38px rgba(35,117,180,0.12) !important;
  clip-path: polygon(0 10%, 88% 0, 100% 18%, 96% 88%, 70% 100%, 6% 94%) !important;
  background: #f7fcff !important;
}

.compare-card--lazy > div.mb-6 {
  clip-path: polygon(5% 0, 100% 7%, 94% 92%, 24% 100%, 0 78%) !important;
}

.compare-icon {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 38% !important;
  transform: scale(1.01) !important;
  filter: saturate(0.96) contrast(1.01) !important;
}

.compare-card--lazy .compare-icon {
  object-position: 44% 38% !important;
}

.compare-card h3 {
  max-width: 100% !important;
  margin: 0 0 18px !important;
  color: #102f48 !important;
  font-size: clamp(1.7rem, 2.2vw, 2.05rem) !important;
  line-height: 1.38 !important;
  letter-spacing: 0 !important;
  overflow: visible !important;
}

.compare-card p {
  max-width: 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  overflow: visible !important;
  clip-path: none !important;
  color: rgba(18,50,74,0.68) !important;
  line-height: 1.95 !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

.compare-card p.text-base {
  font-size: clamp(1rem, 1.18vw, 1.08rem) !important;
}

.compare-card .space-y-2 {
  margin-top: auto !important;
  padding: 16px 18px !important;
  border: 1px solid rgba(47,104,201,0.16) !important;
  border-radius: 8px !important;
  background: rgba(250,253,255,0.84) !important;
}

.compare-card .space-y-2 p {
  color: rgba(32,96,135,0.86) !important;
}

.rl-showcase-badges span {
  border-color: rgba(47,104,201,0.16) !important;
  background: rgba(255,255,255,0.72) !important;
  color: rgba(18,50,74,0.78) !important;
  box-shadow: 0 8px 20px rgba(47,104,201,0.06) !important;
}

#showcase h2::after,
#hero .mobile-hero-headline::after {
  background: linear-gradient(90deg, rgba(47,104,201,0.30), rgba(0,190,220,0.20), transparent) !important;
}

@media (max-width: 768px) {
  nav .rl-brand-hand-logo {
    min-width: 112px;
  }

  nav .rl-nav-hand-logo {
    width: 112px !important;
    max-height: 38px !important;
  }

  .compare-card {
    padding: 22px !important;
  }

  .compare-card::after {
    position: static !important;
    display: inline-flex !important;
    align-self: flex-start !important;
    margin: 0 0 12px !important;
    padding: 5px 11px !important;
    font-size: 0.82rem !important;
  }

  .compare-card > div.mb-6 {
    order: 0;
    height: 190px !important;
    margin-bottom: 20px !important;
  }

  .compare-card h3 {
    order: 1;
    font-size: 1.55rem !important;
    line-height: 1.42 !important;
  }

  .compare-card p.text-base {
    order: 2;
    font-size: 0.96rem !important;
    line-height: 1.9 !important;
  }

  .compare-card .space-y-2 {
    order: 3;
    margin-top: 18px !important;
  }
}

/* =========================================
   Hero simple: title image + two actions only
========================================= */
#hero > .relative.z-10 {
  width: min(720px, calc(100% - 44px)) !important;
  max-width: 720px !important;
  margin: 0 auto 0 clamp(24px, 6vw, 92px) !important;
  padding: clamp(18px, 3vw, 34px) 0 !important;
  text-align: left !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  clip-path: none !important;
}

#hero .hero-kicker-wrap,
#hero .hero-flow-copy,
#hero .mobile-hero-headline {
  display: none !important;
}


#hero .hero-student-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 0 clamp(9px, 1.35vw, 14px) !important;
  padding: 4px 11px 5px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .18) !important;
  border: 1px solid rgba(255, 255, 255, .24) !important;
  box-shadow: 0 4px 12px rgba(18, 70, 110, .035) !important;
  color: rgba(16, 66, 104, .72) !important;
  font-family: var(--rl-body), "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif !important;
  font-size: clamp(.72rem, 1.05vw, .86rem) !important;
  font-weight: 750 !important;
  letter-spacing: .035em !important;
  line-height: 1.2 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .46) !important;
}

@media (max-width: 768px) {
  #hero .hero-student-badge {
    margin: 0 auto 10px !important;
    padding: 3px 10px 4px !important;
    font-size: clamp(.66rem, 2.75vw, .78rem) !important;
    box-shadow: 0 3px 9px rgba(18, 70, 110, .035) !important;
  }
}

#hero .hero-title-art {
  width: min(690px, 58vw) !important;
  max-width: 100% !important;
  margin: 0 0 clamp(24px, 4vw, 42px) !important;
  position: relative !important;
}

#hero .hero-title-art::after {
  content: "" !important;
  position: absolute !important;
  left: 3% !important;
  right: 12% !important;
  bottom: 8% !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(47,104,201,0.28), rgba(0,190,220,0.22), transparent) !important;
  transform: rotate(-1deg) !important;
  z-index: -1 !important;
}

#hero .hero-title-art img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  filter:
    drop-shadow(0 2px 0 rgba(255,255,255,0.86))
    drop-shadow(0 18px 34px rgba(13,71,111,0.16)) !important;
}

#hero .hero-simple-actions {
  width: min(520px, 100%) !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 16px !important;
}

#hero .flex.flex-col.hero-simple-actions {
  flex-direction: row !important;
}

#hero .hero-simple-actions button,
#hero .hero-simple-actions #hero-download-btn,
#hero .hero-simple-actions #btn-3min {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(220px, calc(50vw - 34px)) !important;
  min-width: 160px !important;
  min-height: 52px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  font-family: var(--rl-body) !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

#hero .hero-simple-actions #hero-download-btn {
  border: 0 !important;
  background: linear-gradient(135deg, #158bff, #19c9b2) !important;
  color: #ffffff !important;
  box-shadow: 0 16px 34px rgba(0,150,195,0.18) !important;
}

#hero .hero-simple-actions #btn-3min {
  position: relative !important;
  overflow: hidden !important;
  border: 1.5px solid rgba(255,255,255,0.68) !important;
  background: rgba(255,255,255,0.48) !important;
  backdrop-filter: blur(8px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.08) !important;
  color: #2367de !important;
  box-shadow:
    0 14px 30px rgba(47,104,201,0.12),
    inset 0 1px 0 rgba(255,255,255,0.55) !important;
}

#hero .hero-simple-actions #btn-3min::after {
  display: none !important;
}

@media (max-width: 768px) {
  #hero {
    justify-content: flex-start !important;
    padding: calc(var(--raku-nav-height, 57px) + 58px) 16px 28px !important;
  }

  #hero > .relative.z-10 {
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  #hero .hero-title-art {
    width: min(100%, 520px) !important;
    margin: 0 auto 22px !important;
  }

  #hero .hero-simple-actions {
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-direction: row !important;
  }

  #hero .flex.flex-col.hero-simple-actions {
    flex-direction: row !important;
  }

  #hero .hero-simple-actions button,
  #hero .hero-simple-actions #hero-download-btn,
  #hero .hero-simple-actions #btn-3min {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    font-size: 0.9rem !important;
  }
}

@media (max-width: 380px) {
  #hero .hero-simple-actions {
    flex-direction: column !important;
  }

  #hero .hero-simple-actions button,
  #hero .hero-simple-actions #hero-download-btn,
  #hero .hero-simple-actions #btn-3min {
    width: 100% !important;
  }
}


/* =========================================
   Final patch: first-view image switch
   PC: assets/youth-hero-sky-uipc.png
   Mobile: assets/youth-hero-sky-ui.png
========================================= */
:root {
  --raku-hero-image-ratio: 0.563; /* youth-hero-sky-uipc.png: 941 / 1672 */
}

#hero {
  background-image:
    linear-gradient(90deg, rgba(247, 252, 255, 0.94) 0%, rgba(247, 252, 255, 0.67) 34%, rgba(255, 255, 255, 0.12) 64%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(223, 245, 255, 0.34)),
    url("./assets/youth-hero-sky-uipc.png") !important;
  background-position:
    center top,
    center top,
    center bottom !important;
  background-size:
    cover,
    cover,
    contain !important;
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat !important;
}

@media (max-width: 768px) {
  #hero {
    background-image:
      linear-gradient(180deg,
        rgba(247, 252, 255, 0.02) 0%,
        rgba(247, 252, 255, 0.10) 42%,
        rgba(247, 252, 255, 0.38) 82%,
        rgba(247, 252, 255, 0.52) 100%
      ),
      url("./assets/youth-hero-sky-ui.png"),
      linear-gradient(180deg, #c9efff 0%, #eef9ff 100%) !important;
    background-position:
      center top,
      center top,
      center top !important;
    background-size:
      cover,
      100% auto,
      cover !important;
    background-repeat:
      no-repeat,
      no-repeat,
      no-repeat !important;
  }
}

/* =========================================
   Final patch: mobile first-view CTA
   Mobile only: hide Download button in hero and center 10-sec demo button
========================================= */
@media (max-width: 768px) {
  #hero .hero-simple-actions #hero-download-btn {
    display: none !important;
  }

  #hero .hero-simple-actions {
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #hero .hero-simple-actions #btn-3min {
    flex: 0 0 auto !important;
    width: min(220px, 72vw) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* =========================================
   Final patch: desktop hero image starts at viewport top
   PC only: keep the background image anchored to the top edge.
========================================= */
@media (min-width: 769px) {
  #hero {
    background-position:
      center top,
      center top,
      center top !important;
    background-size:
      cover,
      cover,
      cover !important;
  }
}

/* ========== final patch: hide right native scrollbar ========== */
html,
body {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

html {
  overflow-y: scroll !important;
}

body {
  overflow-x: hidden !important;
}
/* ========== end patch: hide right native scrollbar ========== */

/* ========== final patch: hide bottom-right circular down-arrow ========== */
.rl-scroll-note {
  display: none !important;
}
/* ========== end patch: hide bottom-right circular down-arrow ========== */


/* ========== First-view scroll reveal panel ========== */
#hero .rl-hero-scroll-details {
  width: min(100%, 620px);
  max-height: 0;
  opacity: 0;
  transform: translateY(42px) scale(.985);
  overflow: hidden;
  margin: 0 auto;
  pointer-events: none;
  text-align: center;
  transition:
    max-height .75s cubic-bezier(.22,1,.36,1),
    opacity .55s ease,
    transform .7s cubic-bezier(.22,1,.36,1),
    margin .65s ease;
  will-change: max-height, opacity, transform;
}

#hero.rl-hero-details-visible .rl-hero-scroll-details {
  max-height: 560px;
  opacity: 1;
  transform: translateY(0) scale(1);
  margin: clamp(10px, 1.8vw, 18px) auto clamp(14px, 2.2vw, 22px);
  pointer-events: auto;
}

#hero .rl-hero-scroll-sub {
  margin: 0 0 clamp(12px, 2vw, 18px);
  font-family: var(--rl-hand);
  font-size: clamp(1.18rem, 2.2vw, 1.72rem);
  line-height: 1.25;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 12px rgba(33, 96, 150, .34);
}

#hero .rl-hero-scroll-sub span {
  display: inline-block;
  position: relative;
  padding: 0 6px 2px;
}

#hero .rl-hero-scroll-sub span.rl-hero-scroll-sub-media {
  display: block;
  padding: 0;
}

#hero .rl-hero-scroll-sub-img {
  display: block;
  width: min(100%, 520px);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

#hero .rl-hero-scroll-sub span::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 228, 119, .80);
  transform: rotate(-1.3deg);
  z-index: -1;
}

#hero .rl-hero-scroll-card {
  width: min(100%, 620px);
  margin: 0 auto;
  border-radius: 30px;
  padding: clamp(18px, 2.5vw, 26px) clamp(18px, 2.7vw, 28px);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.86);
  box-shadow: 0 26px 58px rgba(62,133,198,.22), 0 10px 24px rgba(19,83,147,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#hero .rl-hero-scroll-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

#hero .rl-hero-scroll-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(1rem, 1.35vw, 1.24rem);
  line-height: 1.55;
  color: #173650;
  text-align: left;
  padding: 12px 0;
}

#hero .rl-hero-scroll-list li + li {
  border-top: 1px solid rgba(23,54,80,.12);
}

#hero .rl-hero-scroll-check {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(180deg, #53d9d3, #2f7cff);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  box-shadow: 0 7px 16px rgba(47,124,255,.24);
}

@media (max-width: 900px) {
  #hero .rl-hero-scroll-details {
    width: min(100%, 430px);
  }

  #hero .rl-hero-scroll-card {
    border-radius: 26px;
  }

  #hero .rl-hero-scroll-list li {
    gap: 12px;
    padding: 11px 0;
    font-size: 1.02rem;
  }

  #hero .rl-hero-scroll-check {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
    font-size: 1rem;
  }
}

@media (max-width: 640px) {
  #hero.rl-hero-details-visible .rl-hero-scroll-details {
    margin-top: 8px;
    margin-bottom: 16px;
  }

  #hero .rl-hero-scroll-sub {
    margin-bottom: 12px;
    font-size: 1.24rem;
  }

  #hero .rl-hero-scroll-card {
    padding: 16px 17px 15px;
  }

  #hero .rl-hero-scroll-list li {
    font-size: .96rem;
    line-height: 1.45;
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #hero .rl-hero-scroll-details {
    transition: none;
  }
}
/* ========== patch: keep hero CTA buttons visible after first scroll reveal on PC ========== */
@media (min-width: 769px) {
  /* 初回スクロールで説明カードが出た時だけ、縦幅をPC画面内に収める */
  #hero.rl-hero-details-visible {
    justify-content: flex-start !important;
    padding-top: calc(var(--raku-nav-height, 64px) + 18px) !important;
    padding-bottom: 24px !important;
  }

  #hero.rl-hero-details-visible > .relative.z-10 {
    width: min(760px, calc(100% - 48px)) !important;
    max-width: 760px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* メインキャッチは残したまま、表示後だけ少し詰めてボタン領域を確保 */
  #hero.rl-hero-details-visible .hero-title-art {
    width: min(560px, 46vw) !important;
    margin-bottom: 10px !important;
  }

  #hero.rl-hero-details-visible .rl-hero-scroll-details {
    width: min(100%, 680px) !important;
    margin-top: 6px !important;
    margin-bottom: 14px !important;
  }

  #hero.rl-hero-details-visible .rl-hero-scroll-sub {
    margin-bottom: 8px !important;
    font-size: clamp(1.45rem, 2.3vw, 2.15rem) !important;
    line-height: 1.18 !important;
  }

  #hero.rl-hero-details-visible .rl-hero-scroll-card {
    padding: clamp(16px, 1.7vw, 22px) clamp(22px, 2.2vw, 30px) !important;
    border-radius: 28px !important;
  }

  #hero.rl-hero-details-visible .rl-hero-scroll-list li {
    padding: 7px 0 !important;
    font-size: clamp(1.02rem, 1.18vw, 1.18rem) !important;
    line-height: 1.36 !important;
  }

  #hero.rl-hero-details-visible .rl-hero-scroll-check {
    flex: 0 0 26px !important;
    width: 26px !important;
    height: 26px !important;
    font-size: 0.95rem !important;
  }

  /* カードに押し出されてもCTA自体は必ず手前・同画面内に残す */
  #hero.rl-hero-details-visible .hero-simple-actions {
    position: relative !important;
    z-index: 8 !important;
    margin-top: 0 !important;
  }
}
/* ========== end patch: keep hero CTA buttons visible after first scroll reveal on PC ========== */

/* ========== patch: restore scroll-reveal visual style ========== */
/* PCのCTA表示調整で、見た目がチェックリスト風に戻ったため、
   元の青ドット＋水色ラインの表現に戻す。 */
#hero .rl-hero-scroll-sub,
#hero.rl-hero-details-visible .rl-hero-scroll-sub {
  color: #12324a !important;
  text-shadow:
    0 2px 0 rgba(255,255,255,.74),
    0 14px 28px rgba(34,116,170,.14) !important;
}

#hero .rl-hero-scroll-sub span::after,
#hero.rl-hero-details-visible .rl-hero-scroll-sub span::after {
  left: 4px !important;
  right: 4px !important;
  bottom: -3px !important;
  height: 7px !important;
  background: linear-gradient(90deg, rgba(0,213,255,.34), rgba(128,232,255,.74), rgba(0,213,255,.34)) !important;
  box-shadow: 0 0 14px rgba(0,213,255,.18) !important;
  transform: rotate(-.7deg) !important;
  z-index: -1 !important;
}

#hero .rl-hero-scroll-sub span.rl-hero-scroll-sub-media::after,
#hero.rl-hero-details-visible .rl-hero-scroll-sub span.rl-hero-scroll-sub-media::after {
  content: none !important;
  display: none !important;
}

#hero .rl-hero-scroll-list li + li,
#hero.rl-hero-details-visible .rl-hero-scroll-list li + li {
  border-top: 0 !important;
}

#hero .rl-hero-scroll-check,
#hero.rl-hero-details-visible .rl-hero-scroll-check {
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  border-radius: 999px !important;
  background: rgba(47,124,255,.12) !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  box-shadow: 0 0 0 1px rgba(47,124,255,.08), 0 5px 14px rgba(47,124,255,.14) !important;
}

#hero .rl-hero-scroll-check::after,
#hero.rl-hero-details-visible .rl-hero-scroll-check::after {
  content: "" !important;
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: #2f7cff !important;
  box-shadow: 0 0 10px rgba(47,124,255,.42) !important;
}

@media (max-width: 640px) {
  #hero .rl-hero-scroll-check,
  #hero.rl-hero-details-visible .rl-hero-scroll-check {
    flex-basis: 18px !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
  }

  #hero .rl-hero-scroll-check::after,
  #hero.rl-hero-details-visible .rl-hero-scroll-check::after {
    width: 8px !important;
    height: 8px !important;
  }
}
/* ========== end patch: restore scroll-reveal visual style ========== */

/* ========== final patch: jpg asset fallback + fullscreen hero no-crop ========== */
:root {
  --raku-hero-pc-bg: url("./assets/youth-hero-sky-uipc.png");
  --raku-hero-mobile-bg: url("./assets/youth-hero-sky-ui.png");
}

@media (min-width: 769px) {
  #hero {
    min-height: 100svh !important;
    background-image:
      linear-gradient(90deg, rgba(247, 252, 255, 0.94) 0%, rgba(247, 252, 255, 0.67) 34%, rgba(255, 255, 255, 0.12) 64%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(223, 245, 255, 0.34)),
      var(--raku-hero-pc-bg) !important;
    background-position:
      center top,
      center top,
      center top !important;
    background-size:
      cover,
      cover,
      auto 100% !important;
    background-repeat:
      no-repeat,
      no-repeat,
      no-repeat !important;
    background-color: #eef9ff !important;
  }

  #hero.rl-hero-details-visible {
    min-height: 100svh !important;
  }
}

@media (max-width: 768px) {
  #hero {
    background-image:
      linear-gradient(180deg,
        rgba(247, 252, 255, 0.02) 0%,
        rgba(247, 252, 255, 0.10) 42%,
        rgba(247, 252, 255, 0.38) 82%,
        rgba(247, 252, 255, 0.52) 100%
      ),
      var(--raku-hero-mobile-bg),
      linear-gradient(180deg, #c9efff 0%, #eef9ff 100%) !important;
    background-position:
      center top,
      center top,
      center top !important;
    background-size:
      cover,
      100% auto,
      cover !important;
    background-repeat:
      no-repeat,
      no-repeat,
      no-repeat !important;
  }
}
/* ========== end patch: jpg asset fallback + fullscreen hero no-crop ========== */


/* ========== patch: tap-to-flip hero scroll card, visual unchanged ========== */
#hero .rl-hero-flip-card {
  cursor: pointer;
  perspective: 1200px;
}

#hero .rl-hero-flip-card:focus-visible {
  outline: 3px solid rgba(47, 124, 255, .42);
  outline-offset: 4px;
}

#hero .rl-hero-flip-inner {
  display: grid;
  transform-style: preserve-3d;
  transition: transform .72s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

#hero .rl-hero-flip-card.is-flipped .rl-hero-flip-inner {
  transform: rotateY(180deg);
}

#hero .rl-hero-flip-face {
  grid-area: 1 / 1;
  width: 100%;
  min-width: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#hero .rl-hero-flip-face--back {
  transform: rotateY(180deg);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  color: #173650;
}

#hero .rl-hero-flip-card.is-flipped .rl-hero-flip-face--front {
  pointer-events: none;
}

#hero .rl-hero-compare-label {
  display: inline-block;
  margin: 0 0 8px;
  padding: 3px 12px 4px;
  border-radius: 999px;
  font-family: var(--rl-hand), "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: clamp(1.08rem, 1.8vw, 1.42rem);
  line-height: 1.2;
  background: rgba(23, 54, 80, .08);
  color: #12324a;
}

#hero .rl-hero-compare-block--raku .rl-hero-compare-label {
  background: linear-gradient(90deg, rgba(0, 213, 255, .20), rgba(128, 232, 255, .38));
}

#hero .rl-hero-compare-line {
  font-size: clamp(1.02rem, 1.34vw, 1.22rem);
  line-height: 1.52;
  color: #173650;
}

#hero .rl-hero-compare-divider {
  height: 1px;
  margin: clamp(13px, 1.8vw, 18px) 0;
  background: linear-gradient(90deg, transparent, rgba(0, 213, 255, .58), transparent);
}

@media (max-width: 640px) {
  #hero .rl-hero-compare-label {
    font-size: 1.08rem;
  }

  #hero .rl-hero-compare-line {
    font-size: .94rem;
    line-height: 1.46;
  }
}

@media (prefers-reduced-motion: reduce) {
  #hero .rl-hero-flip-inner {
    transition: none;
  }
}
/* ========== end patch: tap-to-flip hero scroll card, visual unchanged ========== */


/* Hero bottom scroll arrow */
#hero .hero-bottom-arrow {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 3.5vh, 34px);
  z-index: 25;
  transform: translateX(-50%);
  color: #ff8a00;
  font-size: clamp(34px, 8vw, 56px);
  font-weight: 900;
  line-height: 1;
  text-shadow:
    0 2px 0 rgba(9, 30, 48, .95),
    0 0 10px rgba(255, 255, 255, .95),
    0 0 20px rgba(255, 138, 0, .78);
  pointer-events: none;
  user-select: none;
  animation: hero-bottom-arrow-bounce 1.25s ease-in-out infinite;
}

@keyframes hero-bottom-arrow-bounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(10px);
  }
}

@media (max-width: 640px) {
  #hero .hero-bottom-arrow {
    bottom: max(12px, env(safe-area-inset-bottom));
    font-size: clamp(36px, 10vw, 52px);
  }
}

/* ========== patch: mobile first-view white plate smooth slide-in ========== */
@media (max-width: 768px) {
  #hero .rl-hero-scroll-details {
    transform: translate3d(0, 34px, 0) scale(.982) !important;
    opacity: 0 !important;
    max-height: 0 !important;
    clip-path: inset(0 0 100% 0 round 28px) !important;
    transition:
      max-height 880ms cubic-bezier(.19, 1, .22, 1),
      opacity 520ms ease,
      transform 760ms cubic-bezier(.19, 1, .22, 1),
      clip-path 820ms cubic-bezier(.19, 1, .22, 1),
      margin 760ms cubic-bezier(.19, 1, .22, 1) !important;
    will-change: max-height, opacity, transform, clip-path !important;
  }

  #hero .rl-hero-scroll-card {
    opacity: 0 !important;
    transform: translate3d(0, 26px, 0) scale(.975) !important;
    transition:
      opacity 540ms ease 120ms,
      transform 760ms cubic-bezier(.19, 1, .22, 1) 90ms !important;
    will-change: opacity, transform !important;
  }

  #hero .rl-hero-scroll-list li {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition:
      opacity 420ms ease,
      transform 560ms cubic-bezier(.19, 1, .22, 1);
  }

  #hero.rl-hero-details-visible .rl-hero-scroll-details {
    max-height: 620px !important;
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    clip-path: inset(0 0 0 0 round 28px) !important;
  }

  #hero.rl-hero-details-visible .rl-hero-scroll-card {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  #hero.rl-hero-details-visible .rl-hero-scroll-list li {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  #hero.rl-hero-details-visible .rl-hero-scroll-list li:nth-child(1) { transition-delay: 190ms; }
  #hero.rl-hero-details-visible .rl-hero-scroll-list li:nth-child(2) { transition-delay: 240ms; }
  #hero.rl-hero-details-visible .rl-hero-scroll-list li:nth-child(3) { transition-delay: 290ms; }
  #hero.rl-hero-details-visible .rl-hero-scroll-list li:nth-child(4) { transition-delay: 340ms; }
  #hero.rl-hero-details-visible .rl-hero-scroll-list li:nth-child(5) { transition-delay: 390ms; }
}

@media (prefers-reduced-motion: reduce) {
  #hero .rl-hero-scroll-details,
  #hero .rl-hero-scroll-card,
  #hero .rl-hero-scroll-list li {
    transition: none !important;
    animation: none !important;
  }
}
/* ========== end patch: mobile first-view white plate smooth slide-in ========== */



/* ========== patch: mobile first-view reveal must not block first swipe + hide arrow after reveal ========== */
#hero .hero-bottom-arrow {
  transition:
    opacity 260ms ease,
    visibility 0s linear 260ms,
    transform 260ms ease !important;
}

#hero.rl-hero-details-visible .hero-bottom-arrow {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
  transform: translateX(-50%) translateY(18px) !important;
}

@media (max-width: 768px) {
  #hero .rl-hero-scroll-details {
    overflow: hidden !important;
    transform: translate3d(0, 38px, 0) scale(.985) !important;
    transition:
      max-height 920ms cubic-bezier(.19, 1, .22, 1),
      opacity 560ms ease,
      transform 820ms cubic-bezier(.19, 1, .22, 1),
      clip-path 860ms cubic-bezier(.19, 1, .22, 1),
      margin 820ms cubic-bezier(.19, 1, .22, 1) !important;
  }

  #hero.rl-hero-details-visible .rl-hero-scroll-details {
    max-height: 680px !important;
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  #hero.rl-hero-details-visible .hero-simple-actions {
    position: relative !important;
    z-index: 10 !important;
  }
}
/* ========== end patch: mobile first-view reveal must not block first swipe + hide arrow after reveal ========== */


/* ========== patch: instant first swipe + no post-reveal jump ========== */
@media (max-width: 640px) {
  body.raku-mobile-loader-enter > :not(#raku-initial-loader):not(script):not(style) {
    transform: none !important;
    filter: none !important;
    transition: opacity 520ms ease !important;
    will-change: opacity !important;
  }

  body.raku-mobile-loader-enter.raku-mobile-loader-visible > :not(#raku-initial-loader):not(script):not(style) {
    transform: none !important;
    filter: none !important;
  }
}

@media (max-width: 768px) {
  #hero .rl-hero-scroll-details {
    max-height: none !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transform: translate3d(0, 38px, 0) scale(.985) !important;
    clip-path: inset(0 0 100% 0 round 28px) !important;
    margin: clamp(10px, 2.8vw, 16px) auto clamp(14px, 3.4vw, 22px) !important;
    pointer-events: none !important;
    transition:
      opacity 560ms ease,
      transform 820ms cubic-bezier(.19, 1, .22, 1),
      clip-path 860ms cubic-bezier(.19, 1, .22, 1) !important;
    will-change: opacity, transform, clip-path !important;
  }

  #hero.rl-hero-details-visible .rl-hero-scroll-details {
    max-height: none !important;
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    clip-path: inset(0 0 0 0 round 28px) !important;
    pointer-events: auto !important;
  }
}
/* ========== end patch: instant first swipe + no post-reveal jump ========== */