@charset "utf-8";



/* Header - solid over hero, solid after */

#header {
  position: sticky;
  top: 0;
  z-index: 120;
  width: 100%;
  background: #ffffff;
  box-shadow: none;
  color: #0a81b3;
  transition:
    background 0.35s ease,
    color 0.35s ease,
    box-shadow 0.35s ease;
  border-bottom: none;
}

body.is-header-solid #header {
  background: #ffffff;
  color: #0a81b3;
  box-shadow: 0 16px 36px rgba(10, 129, 179, 0.14);
  border-bottom: 1px solid rgba(10, 129, 179, 0.12);
}

/* PC copy readability */
@media screen and (min-width: 768px) {
  body {
    word-break: normal;
    overflow-wrap: anywhere;
    word-wrap: normal;
  }
}

/* Remove decorative arrows around section headings */
.sectionTitle::before,
.sectionTitle::after {
  content: none !important;
  display: none !important;
}

.ctaYokoBanner {
  position: fixed;
  bottom: clamp(16px, 4vw, 24px);
  right: clamp(16px, 4vw, 24px);
  width: clamp(200px, 40vw, 280px);
  z-index: 150;
  pointer-events: none;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.ctaYokoBanner__link {
  pointer-events: auto;
}

.ctaYokoBanner__link {
  display: block;
  text-decoration: none;
  pointer-events: auto;
}

.ctaYokoBanner__link:focus-visible {
  outline: none;
}

.ctaYokoBanner__link:focus-visible .ctaYokoBanner__card {
  transform: translateY(-2px);
  box-shadow:
    0 26px 50px rgba(10, 129, 179, 0.3),
    0 0 0 3px rgba(10, 129, 179, 0.3);
}

.ctaYokoBanner__card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 22px 46px rgba(10, 129, 179, 0.26);
  overflow: hidden;
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease;
}

.ctaYokoBanner__top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 14px;
  color: #0a81b3;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ctaYokoBanner__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.ctaYokoBanner__headline {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.4;
}

.ctaYokoBanner__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  background: #0a81b3;
  color: #ffffff;
  font-weight: 600;
  font-size: clamp(13px, 0.95vw, 14px);
  letter-spacing: 0.08em;
}

.ctaYokoBanner__arrow {
  font-size: 18px;
  line-height: 1;
  transform: translateY(-1px);
}

@media (hover: hover) {
  .ctaYokoBanner__link:hover .ctaYokoBanner__card,
  .ctaYokoBanner__link:focus-visible .ctaYokoBanner__card {
    transform: translateY(-4px);
    box-shadow: 0 28px 54px rgba(10, 129, 179, 0.32);
  }
}

.header__inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: var(--header-padding-block) clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: clamp(24px, 3vw, 40px);
  color: inherit;
}

@media screen and (min-width: 768px) {
  .header__inner {
    column-gap: clamp(32px, 4vw, 48px);
  }
}

.header__logo {
  display: flex;
  align-items: center;
  min-width: 0;
}

.header__logoLink {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.header__logo img {
  display: block;
  height: clamp(42px, 5vw, 56px);
  width: auto;
}

.header__nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
}

@media screen and (min-width: 768px) {
  .header__nav {
    margin-right: clamp(16px, 2vw, 24px);
  }
}

.headerNav {
  gap: clamp(16px, 2.5vw, 32px);
}

.headerNav__link {
  position: relative;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: inherit;
  padding: 6px 4px;
  background-color: transparent;
  font-size: clamp(14px, 1.2vw, 16px);
  text-shadow: none;
  transition: color 0.25s ease, opacity 0.25s ease, text-shadow 0.25s ease;
}

.headerNav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 18px;
  height: 2px;
  background: rgba(10, 129, 179, 0.9);
  border-radius: 999px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease, opacity 0.25s ease;
  opacity: 0;
}

.headerNav__link:focus-visible,
.headerNav__link:hover {
  color: #065a84;
  text-shadow: none;
  background-color: transparent;
}

.headerNav__link:focus-visible::after,
.headerNav__link:hover::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

@media screen and (min-width: 768px) {
  body.is-header-hero #header {
    background: transparent;
    color: #ffffff;
    box-shadow: none;
    border-bottom: none;
  }

  body.is-header-hero .headerNav__link {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
  }

  body.is-header-hero .headerNav__link::after {
    background: rgba(255, 255, 255, 0.85);
  }

  body.is-header-hero .headerNav__link:focus-visible,
  body.is-header-hero .headerNav__link:hover {
    color: #ffffff;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
  }
}

.header__button {
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  background: #ffffff;
  color: #0a81b3;
  box-shadow: 0 18px 34px rgba(10, 129, 179, 0.18);
  padding: clamp(10px, 1.5vw, 14px) clamp(20px, 2.6vw, 30px);
  min-height: 44px;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  font-weight: 700;
  font-size: clamp(13px, 1.3vw, 15px);
  display: inline-flex;
  align-items: center;
  outline: none;
}

.header__button:focus-visible,
.header__button:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 48px rgba(10, 129, 179, 0.26);
  filter: none;
}

.headerCta {
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 1vw, 14px);
  font-size: clamp(12px, 1.3vw, 14px);
}

.headerCta__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0.2em 0.8em;
  border-radius: 999px;
  background: #0a81b3;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.82em;
  letter-spacing: 0.045em;
  box-shadow: 0 10px 24px rgba(10, 129, 179, 0.24);
}

.headerCta__label {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #0a81b3;
  text-shadow: none;
  white-space: nowrap;
}

@media (max-width: 1280px) {
  .headerCta {
    gap: clamp(6px, 0.8vw, 10px);
  }

  .header__button {
    padding-inline: clamp(18px, 2.8vw, 26px);
  }
}

@media (max-width: 1024px) {
  .header__inner {
    padding: clamp(16px, 2.4vw, 22px) clamp(24px, 4vw, 40px);
    column-gap: clamp(24px, 3.5vw, 40px);
  }

  .headerNav {
    gap: clamp(12px, 2vw, 20px);
  }
  
  .header__nav {
    margin-right: clamp(12px, 1.5vw, 20px);
  }

  .headerCta__badge {
    padding: 0.22em 0.8em;
    box-shadow: 0 8px 18px rgba(10, 129, 179, 0.18);
  }
}

@media (max-width: 767px) {
  #header {
    background: #ffffff;
  }

  .header__inner {
    display: flex;
    padding: 12px 16px;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }

  .header__logo {
    flex: 1 1 auto;
    min-width: 0;
  }

  .header__nav {
    display: none;
  }

  .header__button {
    padding: 5.6px 16px;
    box-shadow: 0 14px 26px rgba(10, 129, 179, 0.22);
  }

  .headerCta {
    gap: 8px;
  }

  .headerCta__badge {
    font-size: 0.78em;
    padding: 0.18em 0.6em;
  }

  .headerCta__label {
    font-size: 13px;
    text-shadow: none;
  }

  .heroSection--fullscreen {
    height: min(100dvh, 640px);
    min-height: 520px;
  }

  .heroSection__bg {
    object-position: center 18%;
  }
}

.anchorTarget {
  position: relative;
  top: -140px;
  display: block;
  width: 1px;
  height: 1px;
  visibility: hidden;
}

@media (max-width: 767px) {
  .anchorTarget {
    top: -100px;
  }
}


/* Reservation Complete Page
   --------------------------------------------- */

.thanksPage {
  background: #f0f4f8;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.thanksPage #wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.thanksPage #main {
  flex: 1;
}

/* Hero Area */
.thanksHero {
  background: linear-gradient(180deg, #ffffff 0%, #f0f4f8 100%);
  padding: clamp(60px, 10vw, 100px) 20px clamp(40px, 6vw, 60px);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.thanksHero::before {
  content: "";
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1200px;
  height: 200%;
  background: radial-gradient(circle, rgba(10, 129, 179, 0.05) 0%, rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
  z-index: 0;
}

.thanksHero__inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

/* Success Icon */
.thanksHero__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a81b3;
  box-shadow: 
    0 10px 30px rgba(10, 129, 179, 0.15),
    0 0 0 1px rgba(10, 129, 179, 0.05);
}

.thanksHero__icon svg {
  width: 40px;
  height: 40px;
  stroke-width: 2.5px;
}

.thanksHero__eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: clamp(9px, 1.2vw, 11px);
  font-weight: 700;
  color: #0a81b3;
  margin-bottom: 16px;
  background: rgba(10, 129, 179, 0.08);
  padding: 6px 16px;
  border-radius: 999px;
}

.thanksHero__title {
  font-size: clamp(20px, 4vw, 30px);
  margin-bottom: 24px;
  line-height: 1.3;
  color: #0f3e55;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.thanksHero__message {
  color: #4a5d68;
  font-size: clamp(10px, 1.4vw, 12px);
  line-height: 1.8;
  max-width: 640px;
  margin: 0 auto;
}

.thanksHero__message strong {
  color: #0a81b3;
  background: linear-gradient(transparent 70%, rgba(10, 129, 179, 0.1) 70%);
}

/* Main Section Layout */
.thanksSection {
  padding: 0 20px clamp(60px, 10vw, 100px);
}

.thanksSection__inner {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Split Layout for Cards */
@media (min-width: 960px) {
  .thanksSection__inner--split {
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
  }
  
  .thanksSection__inner--split > .thanksCard {
    flex: 1;
  }
  
  /* Make the steps card slightly wider */
  .thanksSection__inner--split > .thanksCard:first-child {
    flex: 1.4;
  }
}

/* Cards Styling */
.thanksCard {
  background: #ffffff;
  border-radius: 24px;
  padding: clamp(32px, 5vw, 48px);
  box-shadow: 
    0 20px 40px -10px rgba(10, 50, 80, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.03);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.thanksCard--sub {
  background: #ffffff;
  border: 1px solid rgba(10, 129, 179, 0.1);
  box-shadow: 0 10px 30px -10px rgba(10, 50, 80, 0.05);
}

.thanksCard__title {
  margin-bottom: 32px;
  font-size: clamp(16px, 2vw, 20px);
  color: #0f3e55;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
}

.thanksCard__title::before {
  content: "";
  display: block;
  width: 6px;
  height: 24px;
  background: #0a81b3;
  border-radius: 3px;
}

/* Steps Timeline */
.thanksSteps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.thanksSteps__item {
  position: relative;
  padding-left: 40px;
  padding-bottom: 40px;
  border-left: 2px solid rgba(10, 129, 179, 0.15);
}

.thanksSteps__item:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.thanksSteps__item::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  border: 4px solid #0a81b3;
  z-index: 1;
}

.thanksSteps__item h3 {
  font-size: clamp(11px, 2vw, 13px);
  margin: -4px 0 8px;
  color: #0a81b3;
  font-weight: 700;
}

.thanksSteps__item p {
  margin: 0;
  color: #4a5d68;
  line-height: 1.7;
  font-size: clamp(10px, 1.6vw, 12px);
}

/* Contact Support inside Card */
.contact-support {
  margin-top: auto;
  padding-top: 32px;
  border-top: 1px solid #f0f4f8;
}

.contact-support__title {
  font-size: clamp(11px, 2vw, 13px);
  font-weight: 700;
  color: #0f3e55;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-support__title::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: #eef2f6;
  color: #0a81b3;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
}

.contact-support__text {
  font-size: clamp(10px, 1.8vw, 12px);
  color: #6b7c88;
  line-height: 1.6;
}

/* Checklist Section */
.thanksSection--check .thanksSection__inner {
  max-width: 800px;
}

.thanksChecklist {
  background: #eef8fc;
  border-radius: 20px;
  padding: clamp(32px, 4vw, 40px);
  border: 1px solid rgba(10, 129, 179, 0.1);
}

.thanksChecklist h2 {
  margin-bottom: 18px;
  color: #0a81b3;
  font-size: clamp(13px, 2.4vw, 16px);
  font-weight: 700;
  text-align: center;
}

.thanksChecklist ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
}

.thanksChecklist li {
  position: relative;
  padding-left: 32px;
  color: #0f3e55;
  line-height: 1.6;
  font-size: clamp(11px, 2vw, 13px);
  font-weight: 500;
}

.thanksChecklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 20px;
  height: 10px;
  border-left: 3px solid #0a81b3;
  border-bottom: 3px solid #0a81b3;
  transform: rotate(-45deg) scale(0.8);
}

/* Actions & Buttons */
.thanksSection--cta {
  margin-top: -20px;
  text-align: center;
}

.thanksSection__lead {
  font-size: clamp(12px, 2vw, 14px);
  color: #4a5d68;
  margin-bottom: 24px;
  font-weight: 700;
}

.thanksCard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 32px;
}

.thanksButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: clamp(11px, 2vw, 13px);
  background: #0a81b3;
  color: #ffffff;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 10px 20px rgba(10, 129, 179, 0.2);
  min-width: 200px;
}

.thanksButton--ghost {
  background: #ffffff;
  color: #0a81b3;
  border: 1px solid #0a81b3;
  box-shadow: none;
}

.thanksButton:hover,
.thanksButton:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(10, 129, 179, 0.3);
}

.thanksButton--ghost:hover,
.thanksButton--ghost:focus-visible {
  background: #f0f8fc;
  box-shadow: 0 5px 15px rgba(10, 129, 179, 0.1);
}

/* Animations */
.fade-in-up {
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
  transform: translateY(30px);
}
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile Adjustments */
@media (max-width: 767px) {
  .thanksHero__icon {
    width: 64px;
    height: 64px;
  }
  .thanksHero__icon svg {
    width: 32px;
    height: 32px;
  }
  
  .thanksCard {
    padding: 24px;
    border-radius: 20px;
  }
  
  .thanksSteps__item {
    padding-left: 24px;
  }
  
  .thanksSteps__item::before {
    width: 12px;
    height: 12px;
    border-width: 3px;
    left: -7px;
  }
  
  .thanksCard__actions {
    flex-direction: column;
  }
  
  .thanksButton {
    width: 100%;
  }
}



/* Hero Section - True Fullscreen with Animation */

.heroSection--fullscreen {

  width: min(100%, 100vw);

  height: 100vh;

  height: 100dvh; /* Dynamic viewport height for mobile */

  margin: 0 !important;

  padding: 0 !important;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative !important;

  top: auto !important;

  left: auto !important;

  right: auto !important;

  overflow: hidden;

  background: linear-gradient(135deg, #e8f4f8 0%, #f0f9ff 50%, #fef6f0 100%);

}

.heroSection--fullscreen + * {

  margin-top: 0 !important;

}

* + .heroSection--fullscreen {

  margin-top: 0 !important;

}

#header + #main .heroSection--fullscreen:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media screen and (min-width: 768px) {
  #header + #main .heroSection--fullscreen:first-child {
    margin-top: calc(-1 * var(--header-height)) !important;
  }
}

.heroSection__bg {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  animation: heroImageReveal 1.6s cubic-bezier(0.16, 0.85, 0.45, 1) forwards;

  opacity: 0;

  transform: scale(1.08);

  z-index: 0;

}




@keyframes heroImageReveal {

  0% {

    opacity: 0;

    transform: scale(1.08);

  }

  100% {

    opacity: 1;

    transform: scale(1);

  }

}



/* Scroll Indicator - Floating inside hero image */

.heroScrollIndicator {

  --hero-scroll-indicator-scale: 1;

  position: absolute;

  bottom: clamp(48px, 8vh, 88px);

  left: 50%;

  transform: translateX(-50%) scale(var(--hero-scroll-indicator-scale, 1));

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 12px;

  z-index: 20;

  animation: heroScrollFadeIn 1s 0.4s cubic-bezier(0.16, 0.85, 0.45, 1) forwards, heroScrollFloat 7s 1.4s ease-in-out infinite;

  opacity: 0;

  cursor: pointer;

  border: none;

  background: transparent;

  padding: 0;

  font: inherit;

  color: inherit;

}



.heroScrollIndicator__text {

  font-size: clamp(10px, 1.5vw, 12px);

  font-weight: 700;

  letter-spacing: 0.2em;

  color: rgba(255, 255, 255, 0.95);

  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), 0 0 40px rgba(255, 255, 255, 0.3);

  transition: all 0.3s ease;

}



.heroScrollIndicator:hover .heroScrollIndicator__text {

  letter-spacing: 0.26em;

  color: rgba(255, 255, 255, 1);

  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 60px rgba(255, 255, 255, 0.5);

}



.heroScrollIndicator__line {

  width: 2px;

  height: clamp(40px, 6vh, 56px);

  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));

  border-radius: 999px;

  box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);

  animation: heroScrollLineMove 2s ease-in-out infinite;

  transform-origin: top;

}



@keyframes heroScrollFadeIn {

  0% {

    opacity: 0;

    transform: translateX(-50%) translateY(24px) scale(var(--hero-scroll-indicator-scale, 1));

  }

  100% {

    opacity: 1;

    transform: translateX(-50%) translateY(0) scale(var(--hero-scroll-indicator-scale, 1));

  }

}



@keyframes heroScrollFloat {

  0% {

    transform: translateX(-50%) translateY(0) scale(var(--hero-scroll-indicator-scale, 1));

  }

  25% {

    transform: translateX(-50%) translateY(-10px) scale(var(--hero-scroll-indicator-scale, 1));

  }

  50% {

    transform: translateX(-50%) translateY(0) scale(var(--hero-scroll-indicator-scale, 1));

  }

  75% {

    transform: translateX(-50%) translateY(10px) scale(var(--hero-scroll-indicator-scale, 1));

  }

  100% {

    transform: translateX(-50%) translateY(0) scale(var(--hero-scroll-indicator-scale, 1));

  }

}



@keyframes heroScrollLineMove {

  0%, 100% {

    transform: scaleY(0.8);

    opacity: 0.6;

  }

  50% {

    transform: scaleY(1.2);

    opacity: 1;

  }

}



@media (max-width: 767px) {

  .heroSection--fullscreen {

    height: auto;

    min-height: 0;

    align-items: flex-start;

    justify-content: flex-start;

    padding-top: 0;

    margin-top: 0 !important;

  }

  .heroSection__bg {

    position: relative;

    width: 100%;

    height: auto;

    object-fit: contain;

    object-position: top center;

    top: 0;

    left: 0;

    transform: none;

    max-height: none;

    opacity: 1;

    transform-origin: center top;

    animation: none;

  }



  /* Remove main padding when heroSection--fullscreen exists */

  #main:has(.heroSection--fullscreen) {

    padding-bottom: 0 !important;

  }



  .heroScrollIndicator {

    bottom: clamp(12px, 5vh, 36px);

    --hero-scroll-indicator-scale: 0.8;

  }



  .heroScrollIndicator__text {

    font-size: 10px;

    letter-spacing: 0.16em;

  }



  .heroScrollIndicator__line {

    height: 40px;

  }

}



@media (max-height: 600px) {

  .heroScrollIndicator {

    bottom: 12px;

    gap: 8px;

  }



  .heroScrollIndicator__text {

    font-size: 9px;

  }



  .heroScrollIndicator__line {

    height: 32px;

  }

}



/* Accessibility: Reduced Motion */

@media (prefers-reduced-motion: reduce) {

  *,

  *::before,

  *::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;

  }



  .heroSection__bg {

    opacity: 1;

    transform: none;

    animation: none;

  }



  .heroScrollIndicator {

    opacity: 1;

    transform: translateX(-50%) scale(var(--hero-scroll-indicator-scale, 1));

    animation: none;

  }



  .heroScrollIndicator__line {

    animation: none;

  }

}



/* Design Tokens - Spacing & Typography System */

:root {

  /* Spacing Scale */

  --space-xs: clamp(8px, 1vw, 12px);

  --space-sm: clamp(16px, 2vw, 20px);

  --space-md: clamp(24px, 3vw, 32px);

  --space-lg: clamp(40px, 5vw, 56px);

  --space-xl: clamp(64px, 8vw, 96px);

  --space-2xl: clamp(80px, 10vw, 128px);



  /* Section Spacing */

  --section-padding-block: var(--space-xl);

  --section-padding-inline: var(--space-sm);

  --section-gap: var(--space-lg);

  /* Header dimensions */
  --header-padding-block: clamp(18px, 2.4vw, 28px);
  --header-logo-height: clamp(42px, 5vw, 56px);
  --header-height: calc(var(--header-padding-block) * 2 + var(--header-logo-height));

  /* Typography Scale */

  --font-size-h1: clamp(32px, 5vw, 52px);

  --font-size-h2: clamp(26px, 4vw, 38px);

  --font-size-h3: clamp(20px, 3vw, 28px);

  --font-size-body-lg: clamp(16px, 2.4vw, 18px);

  --font-size-body: clamp(14px, 2vw, 16px);

  --font-size-body-sm: clamp(13px, 1.8vw, 14px);



  --line-height-tight: 1.25;

  --line-height-normal: 1.6;

  --line-height-relaxed: 1.9;

}



.seqLead__title {

  font-size: var(--font-size-h1);

  line-height: var(--line-height-tight);

  font-weight: 800;

}



.sectionTitle__inner {

  font-size: var(--font-size-h2);

  line-height: var(--line-height-tight);

  font-weight: 800;

}



.pointItem__head p,

.coachingOverview__lead {

  font-size: var(--font-size-h3);

  line-height: var(--line-height-tight);

  font-weight: 700;

}



/* Color Contrast Improvements */

body,

p,

.coachingOverview__note {

  color: var(--grayscale-70, #4a5d68);

}



.seqLead__text,

.pointItem__body p {

  color: var(--grayscale-80, #2b3a44);

}



/* Footer */

#footer {

  padding: 20px 0;

  background: var(--grayscale-tint-95);

}



.footer__inner {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 20px;

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.footer__logo img {

  width: 180px;

  height: auto;

}



.footer__copyright {

  font-size: 12px;

  color: var(--grayscale-tint-50);

}



.pagetop {

  position: fixed;

  right: clamp(16px, 4vw, 48px);

  bottom: clamp(24px, 5vw, 56px);

  z-index: 102;

  filter: drop-shadow(0 8px 20px rgba(15, 39, 65, 0.18));

}



.pagetop a {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 56px;

  height: 56px;

  border-radius: 50%;

  background: #fff;

  color: var(--main-100);

  border: 1px solid rgba(8, 131, 175, 0.15);

  box-shadow: 0 16px 24px -18px rgba(8, 39, 68, 0.55);

  text-decoration: none;

  transition: transform 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, border-color 0.25s ease;

}



.pagetop a::before {

  content: "";

  width: 12px;

  height: 12px;

  border: 2px solid currentColor;

  border-left: none;

  border-bottom: none;

  transform: translateY(2px) rotate(-45deg);

  transition: transform 0.25s ease;

}



.pagetop a:hover,

.pagetop a:focus-visible {

  transform: translateY(-2px);

  box-shadow: 0 18px 30px -18px rgba(8, 39, 68, 0.55);

  color: var(--grayscale-100);

  border-color: rgba(8, 131, 175, 0.35);

}



.pagetop a:hover::before,

.pagetop a:focus-visible::before {

  transform: translateY(-1px) rotate(-45deg);

}



.pagetop a:focus-visible {

  outline: 2px solid rgba(8, 131, 175, 0.35);

  outline-offset: 4px;

}



.pagetop span {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;

}



@media (max-width: 767px) {

  .footer__inner {

    flex-direction: column;

    gap: 10px;

  }



  .pagetop {

    right: 16px;

    bottom: calc(96px + env(safe-area-inset-bottom, 0px));

  }



  .pagetop a {

    width: 52px;

    height: 52px;

  }

}



/* Hero Section ----------------------------------------------------------- */

.heroSection {

  position: sticky;

  top: 0;

  left: 0;

  right: 0;

  padding: 50px 0 72px;

  overflow: visible;

  background: transparent;

}



.heroSection::after {

  content: none;

}

.heroSection__badge {

  flex: 0 0 auto;

  align-self: stretch;

  display: flex;

  align-items: center;

  justify-content: center;

  writing-mode: vertical-rl;

  text-orientation: mixed;

  background: #ffffff;

  border: 1px solid rgba(47, 25, 9, 0.28);

  border-radius: 20px;

  padding: 24px 18px;

  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;

  font-weight: 600;

  font-size: clamp(14px, 1.5vw, 18px);

  letter-spacing: 0.16em;

  color: #2f1909;

  box-shadow: 0 24px 32px rgba(47, 25, 9, 0.12);

}



@media (max-width: 1280px) {

  .heroSection {

    padding: 80px 0 0px;

  }

  .heroSection::before {

    margin: 0 24px;

  }


}



@media (max-width: 1024px) {

  .heroSection {

    padding: 72px 0 6px;

  }

  .heroSection::before {

    margin: 0 16px;

    border-radius: 12px;

  }


  .heroSection__badge {

    border-radius: 16px;

    padding: 20px 14px;

    letter-spacing: 0.12em;

  }

}



@media (max-width: 767px) {

  .heroSection {

    padding: 48px 0 40px;

  }

  .heroSection::before {

    margin: 0;

    border-radius: 0;

  }


  .heroSection__badge {

    writing-mode: horizontal-tb;

    text-orientation: initial;

    align-self: center;

    padding: 10px 18px;

    font-size: 0.9rem;

    border-radius: 999px;

    letter-spacing: 0.08em;

    box-shadow: 0 12px 20px rgba(47, 25, 9, 0.12);

  }

}



/* CTA adjustments -------------------------------------------------------- */

.buttonBox__media,

.ctaBanner__media {

  display: block;

}



.ctaBanner { padding-top: 0; }



.buttonBox__image {

  display: block;

  width: min(100%, 420px);

  margin: 0 auto;

  height: auto;

}



.ctaBanner__button {

  display: block;

  padding: 0;

  margin: 0 auto;

  border: 0;

  background: transparent;

  cursor: pointer;

  line-height: 0;

}



.ctaBanner__image {

  display: block;

  width: min(100%, 1200px);

  margin: 0 auto;

  height: auto;

}



@media (max-width: 767px) {

  .heroSection {

    padding: 32px 0 24px;

  }



  * + .buttonBox {

    margin-top: 0.36rem;

  }



  .seqPoint {

    padding-top: 0.56rem;

  }



  .seqVoice {

    padding: 0.6rem 0;

  }



  .ctaBanner { padding-top: 0; }



  .ctaBanner__title + * {

    margin-top: 0.24rem;

  }



  .seqFaq {

    padding: 0.6rem 0 0;

    margin-bottom: 20px;

  }

}





@media (max-width: 767px) {

  body {

    overflow-x: hidden;

  }

  .buttonBox__image {

    width: min(100%, 276px);

  }



  .ctaBanner__button {

    width: 120%;

    margin: 0 -10%;

  }



  .ctaBanner__image {

    width: 100%;

    max-width: none;

  }



  .ctaBanner {

    overflow: hidden;

  }



  .heroScrollIndicator {

    display: none;

  }



  .sectionTitle.-point .sectionTitle__pointImage {

    width: min(100%, 220px);

  }



  .ctaButton {

    top: 75vh;

    right: 16px;

    left: auto;

    bottom: auto;

    width: auto;

    padding: 0;

    transform: translateY(-50%);

    border: 1px solid var(--LP-text);

    border-radius: 999px;

    box-shadow: 0 8px 16px rgba(8, 39, 68, 0.12);

  }



  .ctaButton__list {

    display: flex;

    flex-direction: column;

  }



  .ctaButton__item button {

    padding: 6px 12px;

    min-height: auto;

    font-size: 0.12rem;

    letter-spacing: 0.01rem;

  }



  .ctaButton__item button::before {

    display: none;

  }



  .ctaButton__inner {

    flex-direction: row;

    gap: 6px;

  }

}



@media (max-width: 767px) {

  .voiceItem__head img {

    width: 120px;

    height: 120px;

  }

}



.seqLead {

  padding: 0;

}



/* Accordion (FAQ) minimal fixes */

.accordion__toggle {
  cursor: pointer;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.accordion__toggle:hover {
  opacity: 0.8;
}

.accordion__toggle:active {
  opacity: 0.6;
}

/* Force hidden panels to be hidden */
.seqFaq .accordion__panel[hidden],
.accordion__panel[hidden] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

/* Force visible panels to be visible when accordion is open */
.seqFaq .accordion.is-open .accordion__panel:not([hidden]),
.accordion.is-open .accordion__panel:not([hidden]),
.seqFaq .accordion.-open .accordion__panel:not([hidden]),
.accordion.-open .accordion__panel:not([hidden]) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

.seqFaq .accordion:not(.is-open):not(.-open) .accordion__panel,
.accordion:not(.is-open):not(.-open) .accordion__panel {
  display: none !important;
  visibility: hidden !important;
}

/* Override common.css accordion styles */
.accordion__wrap .accordion .accordion__panel[hidden] {
  display: none !important;
  visibility: hidden !important;
}

.accordion.-empty .accordion__toggle { opacity: .85; }

.accordion__placeholder { color: var(--grayscale-tint-50); font-size: 0.95em; }



/* Fix for extra spacing in the title */

.seqLead__title span {

  letter-spacing: normal;

}



/* Theme Switcher */

.theme-switcher {

  display: flex;

  align-items: center;

  gap: 10px;

}



.theme-switcher p {

  font-size: 12px;

  color: var(--grayscale-tint-50);

  margin: 0;

}



.theme-switcher button {

  width: 24px;

  height: 24px;

  border-radius: 50%;

  border: 1px solid var(--grayscale-tint-80);

  cursor: pointer;

  font-size: 12px;

  background: #fff;

}



/* New Color Palettes */

body.theme-palette-1 {

  --main-100: #0883af;

  --sub-100: #2e8f75;

  --grayscale-100: #202020;

  --LP-blue: #0883af;

  --LP-yellow: #f4c85a;

}



body.theme-palette-2 {

  --main-100: #2e8f75;

  --sub-100: #f4c85a;

  --grayscale-100: #2f1909;

  --LP-blue: #2e8f75;

  --LP-yellow: #f8dca3;

}



body.theme-palette-3 {

  --main-100: #4aa6c8;

  --sub-100: #91c9b4;

  --grayscale-100: #3c2719;

  --LP-blue: #4aa6c8;

  --LP-yellow: #f0a554;

}


/* Coaching Overview: description paragraph sizing */

.coachingOverview__content > p:first-of-type {

  font-size: clamp(16px, 2.2vw, 18px);

  line-height: 1.9;

  color: var(--grayscale-100, #333);

  margin: 0 0 clamp(12px, 2vw, 16px);

}

/* Seq Lead: Coaching Overview (replaces 6-step layout) ------------------- */

#seqLead .collaborationBlock { display: none; }



.coachingOverview {

  display: grid;

  grid-template-columns: 1.2fr 1fr;

  gap: clamp(16px, 3vw, 40px);

  align-items: center;

  margin-top: clamp(16px, 3vw, 32px);

  margin-bottom: clamp(16px, 3vw, 32px);

}



.coachingOverview__media picture,

.coachingOverview__media img {

  display: block;

  width: 100%;

  height: auto;

  border-radius: var(--border-radius-4, 16px);

  box-shadow: 0 6px 18px var(--sub-alpha-15, rgba(0,0,0,.08));

}



/* Two-image layout: main + sub (overlay) */

.coachingOverview__media {
  position: static;
}

.coachingOverview__figure {
  margin: 0;
  position: static;
}

@media (min-width: 1024px) {
  .coachingOverview__media,
  .coachingOverview__figure {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
  }
}

.coachingOverview__figure.-sub {

  position: absolute;

  width: clamp(160px, 40%, 420px);

  bottom: clamp(8px, 2vw, 16px);

  right: clamp(8px, 2vw, 16px);

  z-index: 2;

}

.coachingOverview__badge {

  position: absolute;

  left: 12px;

  top: 12px;

  padding: 4px 10px;

  border-radius: 999px;

  background: rgba(0,0,0,.55);

  color: #fff;

  font-weight: 700;

  font-size: 12px;

  letter-spacing: .02em;

  box-shadow: 0 2px 6px rgba(0,0,0,.15);

}

@media (max-width: 767px) {

  .coachingOverview__figure.-sub {

    width: clamp(140px, 52%, 320px);

    bottom: clamp(8px, 3vw, 18px);

    right: clamp(8px, 3vw, 18px);

  }

}



.coachingOverview__content {

  background: var(--background-2, #fff);

  border: 1px solid var(--white-alpha-20, rgba(0,0,0,.06));

  border-radius: var(--border-radius-4, 16px);

  padding: clamp(16px, 3vw, 28px);

  box-shadow: 0 2px 0 0 var(--white-alpha-40) inset, 0 6px 24px var(--sub-alpha-10, rgba(0,0,0,.06));

}



.coachingOverview__lead {

  font-size: clamp(20px, 3vw, 30px);

  font-weight: 800;

  line-height: 1.45;

  margin: 0 0 clamp(12px, 2vw, 16px);

}



.coachingOverview__list {

  list-style: none;

  margin: 0 0 clamp(12px, 2vw, 16px);

  padding: 0;

  display: grid;

  gap: 10px;

}



.coachingOverview__list li {

  display: grid;

  grid-template-columns: auto 1fr;

  align-items: center;

  gap: 10px;

  background: var(--LP-light-blue, #eaf6ff);

  border-radius: var(--border-radius-3, 12px);

  padding: 10px 12px;

  font-weight: 700;

}



.coachingOverview__list .-label {

  display: inline-block;

  min-width: 5.5em;

  padding: 4px 8px;

  text-align: center;

  color: #fff;

  background: var(--main-100, #0aa);

  border-radius: 999px;

  font-size: 12px;

  letter-spacing: .02em;

}



.coachingOverview__list .-text {

  font-size: clamp(16px, 2.3vw, 18px);
  color: #ffffff;

}



.coachingOverview__note {

  margin: clamp(8px, 1.6vw, 12px) 0 0;

  color: var(--grayscale-tint-40, #666);

  font-size: clamp(14px, 2vw, 16px);

}



@media (max-width: 767px) {

  .coachingOverview { grid-template-columns: 1fr; }

}



/* Point Section tweaks --------------------------------------------------- */

.sectionTitle.-point .sectionTitle__pointImage {

  display: block;

  width: clamp(260px, 48vw, 360px);

  max-width: 100%;

  margin: 0 auto;

}

/* Left-align text across the points */

.seqPoint .pointItem__bodyText,

.seqPoint .pointItem__body > p,

.seqPoint .pointItem__lead p { text-align: left; }

/* Ensure legacy center modifier does not override */

.pointItem__bodyText.-pcCenter {

  text-align: left;

  max-width: none;

  width: 100%;

}



/* Replace SVG title tag with live text */

.sectionTitle.-point .sectionTitle__inner .-img {

  position: sticky;

  top: 0;

  left: 0;

  right: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: clamp(0.12rem, 2.5vw, 0.24rem);

}

.sectionTitle__pointLead {

  display: inline-flex;

  align-items: baseline;

  gap: clamp(0.12rem, 2.6vw, 0.24rem);

}

.sectionTitle.-point .sectionTitle__inner .sectionTitle__pointLead .-num {

  position: static;

  font-size: clamp(0.72rem, 7vw, 0.88rem);

  line-height: 0.95;

}

.sectionTitle.-point .sectionTitle__inner .sectionTitle__pointText {

  display: inline-flex;

  align-items: baseline;

  font-size: clamp(0.26rem, 4.3vw, 0.34rem);

  font-weight: 700;

  letter-spacing: 0.01rem;

  line-height: 1.15;

  white-space: nowrap;

}



/* Balance head/lead/body spacing */

.seqPoint .pointItem {

  --seq-point-padding-x: clamp(24px, 4vw, 40px);

  --seq-point-padding-y: clamp(18px, 3vw, 28px);

  margin-top: clamp(16px, 3vw, 28px) !important;

}

.seqPoint .pointItem__head {

  display: flex;

  align-items: center;

  gap: clamp(12px, 2vw, 20px);

  padding: var(--seq-point-padding-y) var(--seq-point-padding-x);

  margin: 0;

}

.seqPoint .pointItem__head::after { display: none; }

.seqPoint .pointItem__head p {

  margin: 0;

  color: var(--LP-text, #1a1f36);

}

.seqPoint .pointItem__lead {

  position: static;

  display: flex;

  align-items: center;

  gap: clamp(16px, 2.5vw, 32px);

  border-radius: 0;

  padding: var(--seq-point-padding-y) var(--seq-point-padding-x);

}

.seqPoint .pointItem__lead p {

  margin: 0;

  font-weight: 700;

}

.seqPoint .pointItem__leadMedia {

  margin: 0;

  flex-shrink: 0;

  width: min(38vw, 320px);

}

.seqPoint .pointItem__leadMedia picture,

.seqPoint .pointItem__leadMedia img {

  display: block;

  width: 100%;

  height: auto;

}

.seqPoint .pointItem__leadText { flex: 1 1 auto; }

.seqPoint .pointItem__body {

  padding: clamp(28px, 5vw, 48px) var(--seq-point-padding-x) clamp(36px, 6vw, 56px);

}

.seqPoint .pointItem.-purple .pointItem__body {

  padding-top: clamp(18px, 4.5vw, 38px);

}

.seqPoint .pointItem.-green .pointItem__body { display: block; }



.seqPoint .pointItem__media {

  display: flex;

  align-items: center;

  gap: clamp(20px, 3.5vw, 48px);

}



.seqPoint .pointItem__mediaText {
  flex: 1 1 0;
  padding: clamp(12px, 3vw, 24px) clamp(20px, 4vw, 36px)
    clamp(12px, 3vw, 24px) 0;
}



.seqPoint .pointItem__mediaText p {

  margin: 0;

}



.seqPoint .pointItem__mediaText p + p {

  margin-top: 1.2em;

}



.seqPoint .pointItem__mediaImage {

  flex: 0 0 auto;

  margin: 0;

}



.seqPoint .pointItem__mediaImage img {

  display: block;

  max-width: min(360px, 100%);

  height: auto;

}



@media (max-width: 767px) {

  .seqPoint .pointItem__media {

    flex-direction: column;

    align-items: flex-start;

  }



  .seqPoint .pointItem__mediaImage {

    width: 100%;

  }



  .seqPoint .pointItem__mediaImage img {

    max-width: 100%;

  }

}





/* Comfortable reading width */

.seqPoint .pointItem__lead p,

.seqPoint .pointItem__body > p,

.seqPoint .pointItem__body p,

.seqPoint .pointItem__bodyText {

  max-width: 68ch;

  line-height: 1.9;

}



.seqPoint .pointItem__bodyText.-pcCenter {

  max-width: none;

}



/* Lists inside point body: bullets + left alignment */

.pointItem__bodyText ul {

  list-style: disc;

  margin: 0.4em 0 0.8em;

  padding-left: 1.2em;

  text-align: left;

  display: block;

}

.pointItem__bodyText ul li { margin: 0.2em 0; }

@media (min-width: 768px) {
  .seqPoint .pointItem.-green .pointItem__bodyText,
  .seqPoint .pointItem.-green .pointItem__bodyText li,
  .seqPoint .pointItem.-green .pointItem__bodyText p {
    word-break: normal;
    overflow-wrap: break-word;
    text-wrap: pretty;
  }

  .seqPoint .pointItem.-green .pointItem__bodyText ul {
    max-width: none;
    width: 100%;
  }
}



@media (max-width: 767px) {

  .seqPoint .pointItem {

    --seq-point-padding-x: clamp(16px, 6vw, 24px);

    --seq-point-padding-y: clamp(14px, 5vw, 22px);

  }

  .seqPoint .pointItem__head {

    flex-direction: column;

    align-items: flex-start;

  }

  .seqPoint .pointItem__lead {

    display: block;

    padding: var(--seq-point-padding-y) var(--seq-point-padding-x);

  }

  .seqPoint .pointItem__leadMedia {

    width: clamp(180px, 60vw, 260px);

    margin: 0 auto clamp(12px, 4vw, 20px);

  }

  .pointSteps__text { max-width: 100%; }

}



/* Point 02 custom layout -------------------------------------------------- */

/* Keep original lead styling (no color override). Only add compare cards. */



/* Two-card comparison area */

.point02-compare {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: clamp(12px, 3vw, 28px);

  margin-top: clamp(16px, 3vw, 28px);

}



.point02-card {

  position: sticky;

  top: 0;

  left: 0;

  right: 0;

  background: var(--grayscale-tint-97, #f8f8f8);

  border: 1px solid var(--grayscale-tint-80, #d1d1d2);

  border-radius: var(--border-radius-4, 16px);

  padding: 12px;

  padding-top: 56px; /* space for label */

  min-height: clamp(220px, 30vw, 340px);

  box-shadow: 0 2px 0 0 var(--white-alpha-40) inset, 0 4px 16px rgba(0,0,0,.05);

}



.point02-label {

  position: absolute;

  top: 12px;

  left: 12px;

  background: #fff;

  border-radius: 999px;

  padding: 8px 12px;

  font-weight: 700;

  font-size: clamp(12px, 1.8vw, 14px);

  color: var(--grayscale-100, #333);

  box-shadow: 0 2px 8px rgba(0,0,0,.08);

}



.point02-card.-after .point02-label {

  background: linear-gradient(90deg, var(--main-100, #0883af), var(--sub-100, #2e8f75));

  color: #fff;

  box-shadow: 0 8px 18px rgba(8, 131, 175, 0.28);

}



.point02-image {

  height: calc(100% - 12px);

  background: var(--grayscale-tint-98, #fafafa);

  border: 1px solid var(--grayscale-tint-85, #ddd);

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}

.point02-image img { max-width: 92%; max-height: 92%; object-fit: contain; display: block; }



@media (max-width: 767px) {

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

}



/* Step list styling inside Point 03 */

.pointSteps {

  list-style: none;

  margin: 0.2em 0 0.8em;

  padding: 0;

  display: grid;

  gap: 10px;

  grid-template-columns: minmax(0, 1fr);

}

.seqPoint .pointItem.-purple .pointSteps {

  width: 100%;

  max-width: none;

}

.pointSteps li { display: grid; gap: clamp(6px, 1vw, 12px); }

.pointSteps__label {
  font-weight: 800;
  margin: 0;
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.pointSteps__text {
  margin: 0;
  line-height: 1.9;
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: pretty;
}



.seqPoint p.pointSteps__label,

.seqPoint p.pointSteps__text {

  max-width: none;

  width: 100%;

}



@media (max-width: 767px) {

  .seqPoint .pointItem__lead p,

  .seqPoint .pointItem__body p,

  .seqPoint .pointItem__bodyText { max-width: 100%; }

  .seqPoint .pointItem__lead {

    display: block;

    padding: var(--seq-point-padding-y) var(--seq-point-padding-x);

  }

  .seqPoint .pointItem__leadMedia {

    width: clamp(180px, 60vw, 260px);

    margin: 0 auto clamp(12px, 4vw, 20px);

  }

  .sectionTitle__pointLead {

    gap: clamp(0.08rem, 3vw, 0.14rem);

  }

  .sectionTitle__pointLead .-num {

    font-size: clamp(0.64rem, 18vw, 0.78rem);

  }

  .sectionTitle.-point .sectionTitle__inner .sectionTitle__pointText {

    font-size: clamp(0.24rem, 6vw, 0.28rem);

    letter-spacing: 0.006rem;

  }

}



/* Optional additional color variant for the 4th point */

.pointItem.-navy .pointItem__head { color: var(--LP-blue, #4F6D8A); }

.pointItem.-navy .pointItem__headLabel { border-color: var(--LP-blue, #4F6D8A); }

.pointItem.-navy .pointItem__lead { background-color: var(--LP-blue, #4F6D8A); }



/* --------------------------------------------------------------------------

   Responsive Helpers (minimal and non-conflicting)

----------------------------------------------------------------------------- */



/* PC/SP visibility helpers for <br> controls used in copy */

@media (max-width: 767px) {

  br.-pcItem { display: none !important; }

  br.-spItem { display: inline !important; }

}



@media (min-width: 768px) {

  br.-pcItem { display: inline !important; }

  br.-spItem { display: none !important; }

}

/* (dup cleanup) approachSection rules are defined above; removed duplicate block */

.heroSection:not(.heroSection--fullscreen) > .heroSection__bg {

  position: sticky;

  top: 0;

  left: 0;

  right: 0;

  z-index: 0;

  display: block;

  margin: 0 auto;

}



/* Cross-site link section ------------------------------------------------ */

.seqSiteLinks {

  padding: clamp(64px, 8vw, 120px) 20px clamp(72px, 9vw, 128px);

  background: var(--background-1, #f6f9fb);

}



.seqSiteLinks__inner {

  max-width: 1120px;

  margin: 0 auto;

  display: grid;

  gap: clamp(32px, 5vw, 56px);

}



.seqSiteLinks__head {

  text-align: center;

  display: grid;

  gap: clamp(12px, 2vw, 20px);

  color: var(--grayscale-80, #2b3a44);

}



.seqSiteLinks__eyebrow {

  font-size: clamp(12px, 1.8vw, 14px);

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--main-100, #0883af);

  margin: 0;

}



.seqSiteLinks__title {

  font-size: clamp(22px, 3.4vw, 32px);

  font-weight: 800;

  margin: 0;

  color: var(--grayscale-100, #14212f);

}



.seqSiteLinks__text {

  margin: 0 auto;

  max-width: 640px;

  line-height: 1.9;

  font-size: clamp(14px, 2.2vw, 16px);

  color: var(--grayscale-70, #4a5d68);

}



.seqSiteLinks__grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

  gap: clamp(20px, 3vw, 28px);

}



.seqSiteLinks__card {

  position: relative;

  display: flex;

  flex-direction: column;

  gap: clamp(24px, 4vw, 32px);

  padding: clamp(24px, 4vw, 36px) clamp(24px, 4vw, 40px);

  border-radius: clamp(16px, 3vw, 24px);

  background: #fff;

  border: 1px solid rgba(8, 131, 175, 0.12);

  text-decoration: none;

  color: var(--grayscale-100, #14212f);

  box-shadow: 0 28px 48px -32px rgba(12, 46, 82, 0.32);

  overflow: hidden;

  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;

}



.seqSiteLinks__card::before {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(135deg, rgba(8, 131, 175, 0.12), rgba(46, 143, 117, 0.08));

  opacity: 0.9;

  transition: opacity 0.3s ease;

}



.seqSiteLinks__card.-corporate::before {

  background: linear-gradient(135deg, rgba(8, 42, 98, 0.15), rgba(8, 131, 175, 0.1));

}



.seqSiteLinks__cardBody,

.seqSiteLinks__cta {

  position: sticky;

  top: 0;

  left: 0;

  right: 0;

  z-index: 1;

}



.seqSiteLinks__label {

  font-size: clamp(12px, 1.8vw, 14px);

  font-weight: 700;

  letter-spacing: 0.04em;

  margin: 0 0 clamp(8px, 1.6vw, 12px);

  color: var(--main-100, #0883af);

}



.seqSiteLinks__card.-corporate .seqSiteLinks__label {

  color: var(--grayscale-90, #23334b);

}



.seqSiteLinks__cardTitle {

  margin: 0;

  font-size: clamp(20px, 3vw, 26px);

  font-weight: 800;

  letter-spacing: 0.02em;

}



.seqSiteLinks__cardText {

  margin: clamp(12px, 2vw, 18px) 0 0;

  font-size: clamp(14px, 2.4vw, 16px);

  line-height: 1.9;

  color: var(--grayscale-70, #4a5d68);

}



.seqSiteLinks__cta {

  align-self: flex-start;

  display: inline-flex;

  align-items: center;

  gap: 10px;

  padding: 10px 18px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.9);

  border: 1px solid rgba(8, 131, 175, 0.3);

  font-weight: 700;

  font-size: 14px;

  color: var(--main-100, #0883af);

  transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;

}



.seqSiteLinks__cta::after {

  content: "";

  display: block;

  width: 10px;

  height: 10px;

  border: 2px solid currentColor;

  border-left: none;

  border-bottom: none;

  transform: rotate(45deg);

  transition: transform 0.3s ease;

}



.seqSiteLinks__card:hover,

.seqSiteLinks__card:focus-visible {

  transform: translateY(-6px);

  box-shadow: 0 36px 68px -34px rgba(12, 46, 82, 0.45);

  border-color: rgba(8, 131, 175, 0.35);

}



.seqSiteLinks__card:hover::before,

.seqSiteLinks__card:focus-visible::before {

  opacity: 1;

}



.seqSiteLinks__card:hover .seqSiteLinks__cta,

.seqSiteLinks__card:focus-visible .seqSiteLinks__cta {

  background: var(--main-100, #0883af);

  color: #fff;

  border-color: var(--main-100, #0883af);

}



.seqSiteLinks__card:hover .seqSiteLinks__cta::after,

.seqSiteLinks__card:focus-visible .seqSiteLinks__cta::after {

  transform: translateX(2px) rotate(45deg);

}



.seqSiteLinks__card:focus-visible {

  outline: 2px solid rgba(8, 131, 175, 0.35);

  outline-offset: 4px;

}



@media (max-width: 767px) {

  .seqSiteLinks__head {

    text-align: left;

  }



  .seqSiteLinks__title {

    font-size: clamp(20px, 7vw, 26px);

  }



  .seqSiteLinks__text {

    max-width: none;

  }



  .seqSiteLinks__card {

    gap: 20px;

  }



  .seqSiteLinks__cta {

    align-self: stretch;

    justify-content: center;

  }

}

@media (min-width: 1024px) {

  .ctaYokoBanner {

    bottom: clamp(28px, 6vh, 64px);

    right: clamp(8px, 2vw, 24px);

    width: clamp(240px, 24vw, 320px);

  }

  .pagetop {
    display: none;
  }

}

@media (max-width: 767px) {
  .ctaYokoBanner {
    bottom: clamp(80px, 12vw, 96px);
    right: clamp(12px, 3vw, 20px);
    width: clamp(180px, 45vw, 240px);
  }
  
  .pagetop {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
}

/* Trial reservation section */
.trialReserve {

  background: linear-gradient(135deg, #f0f7ff 0%, #e6f2ff 55%, #ffffff 100%);

  padding: clamp(56px, 8vw, 96px) clamp(16px, 6vw, 64px);

  margin: clamp(48px, 7vw, 96px) 0 0;

}

.trialReserve__inner {

  max-width: 960px;

  margin: 0 auto;

  display: grid;

  gap: clamp(24px, 4vw, 40px);

}

.trialReserve__head {

  display: grid;

  gap: clamp(12px, 2.4vw, 20px);

  text-align: center;

}

.trialReserve__lead {

  font-size: clamp(16px, 2vw, 20px);

  line-height: 1.7;

  color: rgba(15, 70, 120, 0.9);

}

.trialReserve__form {

  display: grid;

  gap: clamp(16px, 2.6vw, 24px);

  background-color: #ffffff;

  padding: clamp(24px, 4vw, 36px);

  border-radius: 20px;

  box-shadow: 0 24px 48px rgba(15, 70, 120, 0.12);

  border: 1px solid rgba(15, 70, 120, 0.08);

}

.trialReserve__field {

  display: grid;

  gap: 8px;

}

.trialReserve__label {

  font-weight: 600;

  letter-spacing: 0.02em;

  color: #0f4678;

  font-size: clamp(14px, 1.8vw, 16px);

}

.trialReserve__input,

.trialReserve__select {

  appearance: none;

  border: 1px solid rgba(15, 70, 120, 0.18);

  border-radius: 12px;

  padding: 14px clamp(14px, 2vw, 18px);

  font-size: clamp(15px, 1.9vw, 17px);

  line-height: 1.4;

  background-color: #f8fbff;

  color: #0c2f47;

  transition:

    border-color 0.2s ease,

    box-shadow 0.2s ease,

    background-color 0.2s ease;

}

.trialReserve__input:focus,

.trialReserve__select:focus {

  outline: none;

  border-color: #1373ce;

  background-color: #ffffff;

  box-shadow: 0 0 0 4px rgba(19, 115, 206, 0.16);

}

.trialReserve__input:disabled,

.trialReserve__select:disabled {

  opacity: 0.6;

  cursor: not-allowed;

  background-color: #f0f4f9;

}

.trialReserve__submit {

  grid-column: 1 / -1;

  justify-self: stretch;

  background: linear-gradient(135deg, #1373ce 0%, #0f58a8 100%);

  color: #ffffff;

  border: none;

  border-radius: 999px;

  padding: clamp(14px, 2.6vw, 18px);

  font-weight: 700;

  font-size: clamp(16px, 2.2vw, 18px);

  letter-spacing: 0.04em;

  cursor: pointer;

  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;

}

.trialReserve__submit:hover {

  transform: translateY(-1px);

  box-shadow: 0 16px 32px rgba(19, 115, 206, 0.28);

}

.trialReserve__submit:disabled,

.trialReserve__submit[aria-disabled="true"] {

  opacity: 0.6;

  cursor: not-allowed;

  transform: none;

  box-shadow: none;

}

.trialReserve__field--contact {

  grid-column: 1 / -1;

}

.trialReserve__choices {

  display: grid;

  gap: clamp(12px, 2vw, 16px);

}

.trialReserve__choice {

  display: grid;

  grid-template-columns: auto 1fr;

  gap: 14px;

  align-items: center;

  padding: clamp(14px, 2.2vw, 18px);

  border-radius: 16px;

  border: 1px solid rgba(15, 70, 120, 0.14);

  background: rgba(248, 251, 255, 0.9);

  box-shadow: 0 12px 24px rgba(15, 70, 120, 0.08);

  transition:

    border-color 0.25s ease,

    box-shadow 0.25s ease,

    background-color 0.25s ease;

  cursor: pointer;

}

.trialReserve__choice input[type="radio"] {

  width: clamp(18px, 2vw, 20px);

  height: clamp(18px, 2vw, 20px);

  accent-color: #1373ce;

}

.trialReserve__choice span {

  display: grid;

  gap: 6px;

  color: #0c2f47;

}

.trialReserve__choice strong {

  font-size: clamp(15px, 1.9vw, 17px);

  font-weight: 700;

  letter-spacing: 0.03em;

}

.trialReserve__choice small {

  font-size: clamp(12px, 1.6vw, 14px);

  color: rgba(15, 47, 71, 0.72);

  line-height: 1.5;

}

.trialReserve__choice:focus-within,

.trialReserve__choice:hover {

  border-color: rgba(19, 115, 206, 0.45);

  background: rgba(255, 255, 255, 0.95);

  box-shadow: 0 18px 36px rgba(19, 115, 206, 0.18);

}

.slotPicker {

  display: grid;

  gap: clamp(16px, 2.6vw, 24px);

  padding: clamp(18px, 3vw, 26px);

  border-radius: 20px;

  border: 1px solid rgba(19, 115, 206, 0.12);

  background: rgba(255, 255, 255, 0.9);

  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4),

    0 24px 48px rgba(15, 70, 120, 0.12);

}

.slotPicker__nav {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: clamp(16px, 3vw, 24px);

}

.slotPicker__navLabel {

  font-weight: 700;

  font-size: clamp(16px, 2.2vw, 20px);

  letter-spacing: 0.04em;

  color: #0f4678;

}

.slotPicker__navBtn {

  border: none;

  width: clamp(36px, 4vw, 44px);

  height: clamp(36px, 4vw, 44px);

  border-radius: 50%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background: linear-gradient(135deg, #1373ce 0%, #0f58a8 100%);

  color: #ffffff;

  font-size: clamp(18px, 2.4vw, 22px);

  cursor: pointer;

  box-shadow: 0 12px 24px rgba(19, 115, 206, 0.28);

  transition:

    transform 0.2s ease,

    box-shadow 0.2s ease,

    opacity 0.2s ease;

}

.slotPicker__navBtn:disabled {

  opacity: 0.35;

  cursor: not-allowed;

  box-shadow: none;

}

.slotPicker__navBtn:not(:disabled):hover {

  transform: translateY(-1px);

  box-shadow: 0 18px 32px rgba(19, 115, 206, 0.34);

}

.slotPicker__body {

  display: grid;

  gap: clamp(12px, 2vw, 18px);

  grid-template-columns: repeat(1, minmax(0, 1fr));

}

.slotPicker__empty {

  margin: 0;

  text-align: center;

  font-weight: 600;

  font-size: clamp(14px, 1.8vw, 16px);

  color: rgba(15, 47, 71, 0.74);

}

.slotPicker__selection {

  margin: 0;

  font-size: clamp(13px, 1.7vw, 15px);

  color: rgba(15, 70, 120, 0.75);

  text-align: center;

  display: none;

}

.slotPicker__selection.is-visible {

  display: block;

}

.slotDay {

  display: flex;

  flex-direction: column;

  gap: 12px;

  padding: clamp(16px, 2.6vw, 22px);

  border-radius: 18px;

  border: 1px solid rgba(15, 70, 120, 0.1);

  background: rgba(255, 255, 255, 0.92);

  box-shadow: 0 18px 36px rgba(15, 70, 120, 0.12);

  min-height: 164px;

}

.slotDay--empty {

  background: rgba(245, 248, 252, 0.88);

  border-style: dashed;

}

.slotDay--selected {

  border-color: rgba(19, 115, 206, 0.46);

  box-shadow: 0 22px 44px rgba(19, 115, 206, 0.28);

}

.slotDay__head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-weight: 700;

  color: #0f4678;

}

.slotDay__dow {

  font-size: clamp(14px, 1.8vw, 16px);

  letter-spacing: 0.08em;

}

.slotDay__date {

  font-size: clamp(16px, 2.3vw, 20px);

  letter-spacing: 0.06em;

}

.slotDay__slots {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

}

.slotDay__slot {

  border: 1px solid rgba(19, 115, 206, 0.16);

  background: rgba(239, 248, 255, 0.92);

  color: #0f4678;

  border-radius: 999px;

  padding: 8px 16px;

  font-size: clamp(14px, 1.8vw, 16px);

  font-weight: 600;

  cursor: pointer;

  transition:

    background-color 0.2s ease,

    color 0.2s ease,

    border-color 0.2s ease,

    box-shadow 0.2s ease;

}

.slotDay__slot:hover,

.slotDay__slot:focus-visible {

  border-color: rgba(19, 115, 206, 0.45);

  box-shadow: 0 0 0 3px rgba(19, 115, 206, 0.28);

}

.slotDay__slot.is-selected {

  background: linear-gradient(135deg, #1373ce 0%, #0f58a8 100%);

  color: #ffffff;

  border-color: transparent;

  box-shadow: 0 12px 24px rgba(19, 115, 206, 0.35);

}

.slotDay__noSlot {

  margin: 0;

  font-weight: 600;

  color: rgba(15, 47, 71, 0.5);

  font-size: clamp(13px, 1.7vw, 15px);

}

.trialReserve__result {

  text-align: center;

  font-weight: 600;

  font-size: clamp(15px, 2vw, 17px);

  line-height: 1.5;

  margin: 0 auto;

  max-width: 720px;

}

.trialReserve__result[hidden] {

  display: none !important;

}

.trialReserve__result--success {

  color: #117a4c;

}

.trialReserve__result--error {

  color: #c83b2b;

}

.trialReserve__result--warning {

  color: #b36a00;

}

.trialReserve__privacy {

  text-align: center;

  font-size: clamp(13px, 1.7vw, 15px);

  color: rgba(17, 42, 59, 0.72);

  line-height: 1.6;

}

@media (min-width: 680px) {

  .trialReserve__form {

    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: clamp(20px, 4vw, 32px);

  }

  .trialReserve__field--full {

    grid-column: 1 / -1;

  }

  .trialReserve__choices {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

  .slotPicker__body {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

  .trialReserve__submit {

    justify-self: center;

    max-width: 320px;

  }

}

@media (min-width: 900px) {

  .slotPicker__body {

    grid-template-columns: repeat(3, minmax(0, 1fr));

  }

}

@media (max-width: 679px) {

  .trialReserve__submit {

    width: 100%;

  }

  .trialReserve__choices {

    grid-template-columns: 1fr;

  }

  .slotPicker__body {

    grid-auto-flow: column;

    grid-auto-columns: minmax(210px, 1fr);

    overflow-x: auto;

    padding-bottom: 6px;

    scroll-snap-type: x proximity;

    grid-template-columns: none;

  }

  .slotDay {

    scroll-snap-align: start;

  }

}


/* Loading Spinner */
.slotPicker__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px;
  grid-column: 1 / -1;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(19, 115, 206, 0.15);
  border-top-color: #1373ce;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}