/* generated by ~/.codex/tools/build-page.mjs. Do not edit directly. */

@import url("https://fonts.googleapis.com/css2?family=Gidole&display=swap");

/* source:start src/styles/site.css */
@charset "UTF-8";

:root {
  --opt-color-navy: #001e55;
  --opt-color-blue: #07588f;
  --opt-color-blue-dark: #00365f;
  --opt-color-gold: #aea307;
  --opt-color-paper: #f0f4f9;
  --opt-color-white: #fff;
  --opt-font-sans: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

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

body {
  min-width: 20rem;
  margin: 0;
  color: var(--opt-color-navy);
  font-family: var(--opt-font-sans);
  font-weight: 500;
  letter-spacing: 0;
  background: var(--opt-color-white);
  -webkit-font-smoothing: antialiased;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
}

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

p,
h1,
h2,
h3,
h4,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

.opt-page {
  width: 100%;
  overflow: clip;
}

.opt-section {
  position: relative;
  width: 100%;
}

.opt-section__inner {
  position: relative;
  width: min(100%, 105rem);
  margin-inline: auto;
}

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

.pc {
  display: initial;
}

.sp {
  display: none;
}

@media (width < 768px) {
  html {
    font-size: 3.8647342995vw;
  }

  .pc {
    display: none;
  }

  .sp {
    display: initial;
  }
}

@media (width >= 768px) and (width <= 1399px) {
  html {
    font-size: calc((100vw - 768px) / 632 * 3 + 13px);
  }
}

@media (width > 1680px) {
  html {
    font-size: 0.9523809524vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.opt-image {
  width: 100%;
  height: auto;
}

.opt-image--cover {
  height: 100%;
  object-fit: cover;
}

.opt-bg-word {
  position: absolute;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 9.5rem;
  font-weight: 700;
  letter-spacing: 1.425rem;
  white-space: nowrap;
  pointer-events: none;
}

.opt-cta {
  display: inline-block;
  border: 0;
}

.opt-cta:focus-visible {
  outline: 0.1875rem solid var(--opt-color-white);
  outline-offset: 0.25rem;
}

.opt-cta-fee {
  margin: 0.5rem 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.54;
  letter-spacing: 0.0688rem;
  text-align: center;
}

/* Visitor CTA hover: button face → #7E7003 (text / decorations unchanged) */
.opt-price__cta-link--visitor {
  position: relative;
}

.opt-hero__visitor-cta::after,
.opt-salon-visitor__link::after,
.opt-price__cta-link--visitor::after,
.opt-cta-footer__cta::after,
.opt-follow-cta::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  content: "";
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
}

.opt-hero__visitor-cta::after {
  background-image: url("../img/hero-visitor-cta-hover.webp");
}

.opt-salon-visitor__link::after,
.opt-price__cta-link--visitor::after,
.opt-cta-footer__cta::after,
.opt-follow-cta::after {
  background-image: url("../img/visitor-cta-hover.webp");
}

@media (hover: hover) and (pointer: fine) {
  .opt-hero__visitor-cta:hover::after,
  .opt-salon-visitor__link:hover::after,
  .opt-price__cta-link--visitor:hover::after,
  .opt-cta-footer__cta:hover::after,
  .opt-follow-cta:hover::after {
    opacity: 1;
  }
}

.opt-hero__visitor-cta:focus-visible::after,
.opt-salon-visitor__link:focus-visible::after,
.opt-price__cta-link--visitor:focus-visible::after,
.opt-cta-footer__cta:focus-visible::after,
.opt-follow-cta:focus-visible::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .opt-hero__visitor-cta::after,
  .opt-salon-visitor__link::after,
  .opt-price__cta-link--visitor::after,
  .opt-cta-footer__cta::after,
  .opt-follow-cta::after {
    transition: none;
  }
}

/* SP follow CTA: show after FV, hide before final footer content */
.opt-follow-cta {
  display: none;
}

@media (width < 768px) {
  .opt-follow-cta {
    position: fixed;
    z-index: 100;
    right: 0;
    bottom: 1.5rem;
    left: 0;
    display: block;
    width: 22.1875rem;
    max-width: calc(100% - 2.5rem);
    margin-inline: auto;
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.75rem);
    transition:
      opacity 220ms ease,
      transform 220ms ease;
  }

  .opt-follow-cta.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .opt-follow-cta__image {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
  }
}

/* Uneven direct-child frame offsets: positive gaps use the upper section's
   margin-bottom; negative values are intentional overlaps (SP2/SP3/P3b). */
.opt-page:not(#opt-preview) > .opt-activities {
  margin-bottom: -0.125rem;
}

.opt-page:not(#opt-preview) > .opt-salon {
  margin-bottom: -0.0166rem;
}

.opt-page:not(#opt-preview) > .opt-mtlc {
  margin-bottom: 0.1953rem;
}

.opt-page:not(#opt-preview) > .opt-global {
  margin-bottom: 0.377rem;
}

.opt-page:not(#opt-preview) > .opt-voice {
  margin-bottom: 0.0645rem;
}

.opt-page:not(#opt-preview) > .opt-project-faq {
  margin-bottom: 0.0059rem;
}

@media (width < 768px) {
  .opt-page:not(#opt-preview) > .opt-activities,
  .opt-page:not(#opt-preview) > .opt-salon,
  .opt-page:not(#opt-preview) > .opt-mtlc,
  .opt-page:not(#opt-preview) > .opt-global,
  .opt-page:not(#opt-preview) > .opt-voice,
  .opt-page:not(#opt-preview) > .opt-project-faq {
    margin-bottom: 0;
  }
}
.opt-hero {
  /* Above .opt-concept so top-left deco stays under the blue bg */
  z-index: 2;
  isolation: isolate;
  padding-block: 0 8.5rem;
  color: #fff;
}

.opt-hero::before {
  position: absolute;
  z-index: 0;
  top: 0;
  left: -2.3214vw;
  width: 104.6963vw;
  height: 100%;
  background-image: url("../img/hero-section-bg.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  content: "";
  pointer-events: none;
}

.opt-hero__inner {
  width: 90%;
  max-width: 68.625rem;
  margin-inline: auto;
}

.opt-hero__visual {
  position: relative;
  z-index: 2; /* above .opt-hero__dot-map (section-level blend layer) */
  left: 50%;
  width: 100vw;
  aspect-ratio: 1680 / 920;
  margin-bottom: 2.4285rem;
  transform: translateX(-50%);
}

/* Positioned on .opt-hero (not inside __visual) so soft-light reaches ::before */
.opt-hero__dot-map {
  position: absolute;
  z-index: 1;
  top: 19.137vw;
  left: 53.6888vw;
  width: 41.3252vw;
  height: 23.0317vw;
  max-width: none;
  mix-blend-mode: soft-light;
  opacity: 1;
  object-fit: cover;
  pointer-events: none;
}

/* SP-only second map behind 危機感 (Figma 15:41 @ y=995) */
.opt-hero__dot-map--pain {
  display: none;
}

.opt-hero__light-streak {
  position: absolute;
  top: -13.0952vw;
  left: 49.5123vw;
  display: flex;
  width: 60.248vw;
  height: 70.0136vw;
  align-items: center;
  justify-content: center;
  /* screen must sit outside transform or blend won’t hit the section bg */
  mix-blend-mode: screen;
  pointer-events: none;
}

.opt-hero__light-streak-mask {
  position: relative;
  width: 34.3448vw;
  height: 61.0157vw;
  flex: none;
  overflow: visible;
  transform: rotate(-150.01deg) scaleY(-1);
}

.opt-hero__light-streak-img {
  /* Figma inset -12.49% -22.18%; blur baked into common-color-glow.webp */
  position: absolute;
  top: -12.49%;
  left: -22.18%;
  width: 144.36%;
  max-width: none;
  height: 124.98%;
  object-fit: fill;
  opacity: 0.12;
}

.opt-hero__slider {
  position: absolute;
  top: 6.4286vw;
  left: 10.7708vw;
  width: 28.9286vw;
  /* fv-slide-0*.webp (900×1564) — shape is baked into the asset */
  aspect-ratio: 900 / 1564;
}

.opt-hero__slide {
  position: absolute;
  top: 0;
  left: 2.1429vw;
  width: 26.7857vw;
  aspect-ratio: 900 / 1564;
  overflow: visible;
  border-radius: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.opt-hero__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.opt-hero__slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

.opt-hero__slide-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.opt-hero__slider-meta {
  position: absolute;
  z-index: 5;
  top: 12.619vw;
  left: 10.7708vw;
  width: 0.8929vw;
  height: 33.8607vw;
}

.opt-hero__slider-bars {
  display: flex;
  width: 0.1833vw;
  height: 10.8168vw;
  margin-left: 0.2976vw;
  flex-direction: column;
  gap: 0.4824vw;
}

.opt-hero__slider-bars i {
  position: relative;
  display: block;
  width: 0.1833vw;
  height: 2.3424vw;
  background: #41597f;
  cursor: pointer;
}

.opt-hero__slider-bars i::before {
  position: absolute;
  inset: -0.3vw -0.6vw;
  content: "";
}

.opt-hero__slider-bars i.is-active {
  background: #fff;
}

.opt-hero__slider-bars i:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 0.1786vw;
}

.opt-hero__slider-caption {
  position: absolute;
  top: 12.0743vw;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.8929vw;
  height: 21.7857vw;
  color: #f0f0f0;
  font-size: 0.8768vw;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1754vw;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
}

.opt-hero__header {
  position: absolute;
  top: 8.0307vw;
  left: 45.3971vw;
  width: 23.9286vw;
  color: #f0f0f0;
}

.opt-hero__brand {
  margin-bottom: 0.3018vw;
  font-size: 2.9186vw;
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: 0.3041vw;
}

.opt-hero__brand span {
  font-size: 3.0405vw;
}

.opt-hero__brand-en {
  display: block;
  font-size: 1.0954vw;
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: 0.1095vw;
  white-space: nowrap;
}

.opt-hero__member-count {
  display: none;
}

.opt-hero__catch {
  position: absolute;
  top: 15.2503vw;
  left: 45.3971vw;
  width: auto;
  color: #f0f0f0;
  font-size: 3.3051vw;
  font-weight: 700;
  line-height: 1.21;
  letter-spacing: 0.4958vw;
  text-align: left;
}

.opt-hero__catch span,
.opt-hero__lead > span {
  display: block;
}

.opt-hero__lead {
  position: absolute;
  top: 26.5775vw;
  left: 45.5341vw;
  color: #fff;
  font-size: 1.7001vw;
  font-weight: 700;
  line-height: 1.4738;
  letter-spacing: 0.1871vw;
}

.opt-hero__lead strong {
  color: #b3a706;
  font-weight: 700;
}

.opt-hero__benefits {
  position: absolute;
  top: 35.0251vw;
  left: 45.1174vw;
  width: 25.8333vw;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9657vw;
  font-weight: 500;
  line-height: 1.76;
  letter-spacing: 0.1642vw;
}

.opt-hero__benefits::after {
  position: absolute;
  bottom: -0.0298vw;
  left: 1.1143vw;
  width: 10.1771vw;
  border-bottom: 0.0595vw solid rgba(255, 255, 255, 0.42);
  content: "";
}

.opt-hero__nowrap {
  white-space: nowrap;
}

.opt-hero__stats {
  position: absolute;
  top: 30.6251vw;
  left: 77.4391vw;
  display: flex;
  width: 9.8929vw;
  height: 11.7501vw;
  flex-direction: column;
  gap: 0.3917vw;
}

.opt-hero-stat {
  position: relative;
  width: 9.8929vw;
  height: 5.6797vw;
  color: #fff;
  text-align: center;
}

.opt-hero-stat__img {
  position: absolute;
  top: 0.4782vw;
  left: 0;
  width: 9.8929vw;
  height: 5.2015vw;
}

.opt-hero-stat__eyebrow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  font-size: 0.7173vw;
  font-weight: 500;
  line-height: 1.76;
  letter-spacing: 0.122vw;
}

.opt-hero-stat__label {
  position: absolute;
  top: 0.9565vw;
  left: 0;
  width: 100%;
  font-size: 1.0361vw;
  font-weight: 500;
  line-height: 1.76;
  letter-spacing: 0.1761vw;
}

.opt-hero-stat__value {
  position: absolute;
  top: 2.6302vw;
  left: 0;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.opt-hero-stat__value strong {
  font-size: 2.5505vw;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.051vw;
}

.opt-hero-stat__value span {
  margin-left: 0.119vw;
  font-size: 0.8767vw;
  font-weight: 500;
  line-height: 1.08;
}

.opt-hero-stat__value--percent {
  top: 2.7105vw;
  align-items: baseline;
}

.opt-hero-stat__value--percent span {
  margin-inline: 0.2083vw;
  font-size: 1.1158vw;
  line-height: 1.76;
  letter-spacing: 0.1897vw;
}

.opt-hero-stat__value--percent strong {
  font-size: 2.5505vw;
  letter-spacing: 0.204vw;
}

.opt-hero__actions {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.opt-hero__action-label {
  position: absolute;
  top: 43.1251vw;
  left: 48.3912vw;
  width: 13.5714vw;
  height: 1.6071vw;
  color: #fff;
  font-size: 0.9118vw;
  font-weight: 700;
  line-height: 1.76;
  letter-spacing: 0.1003vw;
  text-align: center;
}

.opt-hero__action-label-lines {
  position: absolute;
  top: 0.5357vw;
  left: 0;
  display: block;
  width: 13.5714vw;
  height: 0.8534vw;
  pointer-events: none;
}

.opt-hero__action-label-text {
  position: relative;
  z-index: 1;
  display: block;
}

.opt-hero__visitor-cta {
  position: absolute;
  top: 44.6726vw;
  left: 44.6412vw;
  width: 21.131vw;
  height: 5.5357vw;
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
  pointer-events: auto;
}

.opt-hero__visitor-cta-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.opt-hero__activities-cta {
  position: absolute;
  top: 44.9108vw;
  left: 66.3674vw;
  display: flex;
  width: 21.1905vw;
  height: 4.9405vw;
  align-items: center;
  justify-content: center;
  border: 0.0595vw solid #7793ad;
  border-radius: 11.9048vw;
  background: #012158;
  color: #e7e7e7;
  font-size: 0.9217vw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2028vw;
  pointer-events: auto;
}

.opt-hero__activities-cta strong {
  color: #bdb100;
  font-size: 1.2967vw;
  letter-spacing: 0.2853vw;
}

.opt-hero__activities-cta i {
  position: absolute;
  right: 0.8935vw;
  color: #fff;
  font-size: 1.25vw;
  font-style: normal;
  line-height: 1;
}

.opt-hero__fee {
  position: absolute;
  top: 50.7442vw;
  left: 45.1174vw;
  width: 20.2381vw;
  color: rgba(255, 255, 255, 0.9);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.6875vw;
  font-weight: 400;
  line-height: 1.54;
  letter-spacing: 0.0688vw;
  text-align: center;
}

.opt-hero__fee small {
  font-size: 0.5625vw;
}

.opt-hero__pain {
  position: relative;
  z-index: 2; /* above .opt-hero__dot-map / --pain so cards stay opaque */
}

.opt-hero__pain-header {
  position: relative;
  height: 4.6035rem;
  margin-bottom: 2.093rem;
  padding-left: 2.5576rem;
}

.opt-hero__pain-title {
  display: flex;
  width: 24.5288rem;
  height: 4.6035rem;
  margin-inline: auto;
  align-items: flex-start;
  color: #fff;
  font-size: 2.3873rem;
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: 0.3103rem;
  text-align: center;
}

.opt-hero__pain-title strong {
  display: inline-block;
  width: 10.8125rem;
  padding-bottom: 0.4844rem;
  border-bottom: 0.111rem solid #ffffff;
  margin-inline: 0.3097rem 0.9066rem;
  font-size: 3.485rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.1743rem;
  text-align: center;
  white-space: nowrap;
}

.opt-hero__pain-copy {
  display: block;
  width: 7.8125rem;
  padding-top: 0.8168rem;
  white-space: nowrap;
}

.opt-hero__pain-copy:last-child {
  width: 4.6875rem;
}

.opt-hero__pain-list {
  display: flex;
  gap: 2.0625rem;
}

.opt-hero-pain-card {
  flex: 1 1 0;
  min-width: 0;
  min-height: 23.375rem;
  padding: 0 2.625rem 1.875rem;
  border-radius: 0.9075rem;
  background: #eef4fd;
  color: #001e55;
}

.opt-hero-pain-card__media {
  display: flex;
  height: 13.9588rem;
  margin-bottom: 1.0412rem;
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
}

.opt-hero-pain-card__img {
  flex: 0 0 auto;
  mix-blend-mode: darken;
}

.opt-hero-pain-card--1 .opt-hero-pain-card__img {
  width: 11.6418rem;
  margin-bottom: -1.6623rem;
}

.opt-hero-pain-card--1 .opt-hero-pain-card__media {
  padding-top: 0.875rem;
}

.opt-hero-pain-card--2 .opt-hero-pain-card__img {
  width: 15.2295rem;
  margin-bottom: -1.2871rem;
}

.opt-hero-pain-card--2 .opt-hero-pain-card__media {
  padding-top: 1.625rem;
}

.opt-hero-pain-card--3 .opt-hero-pain-card__img {
  width: 9.6525rem;
  margin-bottom: -1.8232rem;
}

.opt-hero-pain-card--3 .opt-hero-pain-card__media {
  padding-top: 1.8125rem;
}

.opt-hero-pain-card__label {
  position: relative;
  z-index: 1;
  min-width: 10.0815rem;
  border-radius: 3.2175rem;
  background: linear-gradient(90deg, #3462ac 0%, #274a89 100%);
  color: #eef4fd;
  font-size: 1.1798rem;
  font-weight: 900;
  line-height: 2.145rem;
  letter-spacing: 0.2006rem;
  text-align: center;
}

.opt-hero-pain-card--1 .opt-hero-pain-card__label {
  min-width: 9.009rem;
}

.opt-hero-pain-card__description {
  font-size: 1.155rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.0924rem;
}

.opt-hero-pain-card__description strong {
  color: #8d850b;
  font-weight: 500;
}
@media (width < 768px) {
  .opt-hero {
    padding-block: 0 1.5625rem;
  }

  /* One continuous shape (body + chevron). Opaque base stops white bleed at the edge */
  .opt-hero::before {
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% + 4.125rem);
    background-color: #001e55;
    background-image:
      linear-gradient(to left, rgba(0, 76, 128, 0.92), rgba(0, 30, 85, 0.92)),
      url("../img/common-paper-texture.webp");
    background-repeat: no-repeat, repeat;
    background-position: center, left top;
    background-size: 100% 100%, 64rem 64rem;
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% - 4.125rem),
      50% 100%,
      0 calc(100% - 4.125rem)
    );
    /* Seal clip-path AA fringe against the white section */
    filter: drop-shadow(0 1px 0 #001e55);
  }

  .opt-hero::after {
    content: none;
  }

  .opt-hero__inner {
    width: 90%;
    max-width: 22.3125rem;
    margin-inline: auto;
  }

  .opt-hero__visual {
    left: 50%;
    width: 25.875rem;
    aspect-ratio: 414 / 1002;
    margin-bottom: 2.2875rem;
    transform: translateX(-50%);
  }

  .opt-hero__dot-map {
    /* Figma 34:1153 — was relative to __visual; offset for section positioning */
    top: 23.0375rem;
    left: calc(50% - 9.9419rem); /* visual center - half width + former left 2.9956rem */
    width: 34.7688rem;
    height: 19.3776rem;
    max-width: none;
  }

  .opt-hero__dot-map--pain {
    /* Figma 15:41 — x=-79 y=995 w=556.3 h=310 behind 危機感 */
    display: block;
    top: 62.1875rem;
    left: calc(50% - 17.875rem);
    width: 34.7688rem;
    height: 19.3776rem;
    max-width: none;
  }

  .opt-hero__light-streak {
    top: 14.5rem;
    left: 10.5625rem;
    width: 21.6082rem;
    height: 28.9516rem;
  }

  .opt-hero__light-streak-mask {
    width: 8.4789rem;
    height: 28.5343rem;
  }

  .opt-hero__slider {
    top: 6.375rem;
    /* Figma mask right edge stays at 302px; height keeps 443px marker */
    left: 0;
    width: auto;
    height: 27.6875rem;
    /* Match fv-slide-*-sp.webp (604×886) → ~302×443, no cover-zoom */
    aspect-ratio: 604 / 886;
    overflow: hidden;
    border-radius: 0 10rem 10rem 0;
  }

  .opt-hero__slide {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
  }

  .opt-hero__slide-img {
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: none;
  }

  .opt-hero__slide picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }

  .opt-hero__slider-meta {
    top: 7.8688rem;
    left: 1.1937rem;
    width: 8.1125rem;
    height: 0.1375rem;
  }

  .opt-hero__slider-bars {
    width: 8.1125rem;
    height: 0.1375rem;
    margin-left: 0;
    flex-direction: row;
    gap: 0.3619rem;
  }

  .opt-hero__slider-bars i {
    width: 1.7569rem;
    height: 0.1375rem;
    flex: 0 0 auto;
  }

  .opt-hero__slider-bars i::before {
    inset: -0.5rem -0.15rem;
  }

  .opt-hero__slider-caption {
    display: none;
  }

  .opt-hero__header {
    z-index: 4;
    top: 0.6381rem;
    left: 1.9598rem;
    width: 22.875rem;
  }

  .opt-hero__brand {
    margin-bottom: 0.2832rem;
    font-size: 2.7859rem;
    line-height: 1.06;
    letter-spacing: 0.2902rem;
  }

  .opt-hero__brand span {
    font-size: 2.9024rem;
  }

  .opt-hero__brand-en {
    font-size: 1.0456rem;
    line-height: 1.06;
    letter-spacing: 0.1046rem;
  }

  /* Figma Group 3313 — 国内外の会員数 / 150名以上 */
  .opt-hero__member-count {
    position: absolute;
    z-index: 4;
    top: 6.5rem;
    left: 15.6875rem;
    display: block;
    width: 6.1031rem;
    height: 4.3158rem;
    color: #f0f0f0;
    pointer-events: none;
  }

  .opt-hero__member-count-label {
    position: absolute;
    top: 0;
    left: 1.3365rem;
    margin: 0;
    font-size: 0.5847rem;
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: 0.0585rem;
    white-space: nowrap;
  }

  .opt-hero__member-count-value {
    position: absolute;
    top: 0.6126rem;
    left: 1.3365rem;
    margin: 0;
    font-size: 1.3588rem;
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: 0.2174rem;
    white-space: nowrap;
  }

  .opt-hero__member-count-suffix {
    position: absolute;
    top: 1.3919rem;
    left: 3.8425rem;
    margin: 0;
    font-size: 0.5847rem;
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: 0.0585rem;
    white-space: nowrap;
  }

  .opt-hero__member-count-line {
    /* Vector 37 box 97.65×31.63 + filter inset */
    position: absolute;
    top: 2.1019rem;
    left: -0.2225rem;
    display: block;
    width: 6.6229rem;
    height: 2.5106rem;
    max-width: none;
  }

  .opt-hero__catch {
    z-index: 4;
    top: 8.0268rem;
    left: 20.2279rem;
    width: 4.6221rem;
    height: 21.4809rem;
    font-size: 1.7388rem;
    line-height: 1.21;
    letter-spacing: 0.2608rem;
    text-align: left;
  }

  .opt-hero__catch span {
    position: absolute;
    width: 1.9968rem;
    writing-mode: vertical-rl;
  }

  .opt-hero__catch span:first-child {
    top: 0;
    right: 0;
  }

  .opt-hero__catch span:last-child {
    top: 4.4806rem;
    left: 0;
  }

  .opt-hero__lead {
    z-index: 3;
    top: 28.1938rem;
    left: 1rem;
    width: 18.4375rem;
    font-size: 1.1449rem;
    line-height: 1.474;
    letter-spacing: 0.1259rem;
  }

  .opt-hero__lead::before {
    position: absolute;
    z-index: -1;
    top: -0.6313rem;
    left: -1rem;
    width: 19.375rem;
    height: 6.5625rem;
    border-radius: 0 0.5rem 0.5rem 0;
    background: linear-gradient(to left, #005691, #062867);
    content: "";
  }

  .opt-hero__lead strong {
    color: #aea307;
  }

  .opt-hero__benefits {
    top: 34.75rem;
    left: 1.125rem;
    width: 21.75rem;
    font-size: 0.8125rem;
    line-height: 1.76;
    letter-spacing: 0.1381rem;
  }

  .opt-hero__benefits::after {
    bottom: 0;
    left: 0.9375rem;
    width: 8.5625rem;
    border-bottom-width: 1px;
  }

  .opt-hero__stats {
    top: 55.8125rem;
    left: 2.125rem;
    width: 21.585rem;
    height: 5.9638rem;
    flex-direction: row;
    gap: 0.8125rem;
  }

  .opt-hero-stat {
    width: 10.3862rem;
    height: 5.9638rem;
    flex: 0 0 auto;
  }

  .opt-hero-stat__img {
    top: 0.5019rem;
    width: 10.3862rem;
    height: 5.4617rem;
  }

  .opt-hero-stat__eyebrow {
    font-size: 0.7532rem;
    line-height: 1.76;
    letter-spacing: 0.128rem;
  }

  .opt-hero-stat__label {
    top: 1.0044rem;
    font-size: 1.0879rem;
    line-height: 1.76;
    letter-spacing: 0.1849rem;
  }

  .opt-hero-stat__value {
    top: 2.7619rem;
  }

  .opt-hero-stat__value strong {
    font-size: 2.678rem;
    letter-spacing: 0.0536rem;
  }

  .opt-hero-stat__value span {
    margin-left: 0.125rem;
    font-size: 0.9206rem;
  }

  .opt-hero-stat__value--percent {
    top: 2.8138rem;
  }

  .opt-hero-stat__value--percent span {
    margin-inline: 0.2188rem;
    font-size: 1.1716rem;
    letter-spacing: 0.1992rem;
  }

  .opt-hero-stat__value--percent strong {
    font-size: 2.678rem;
    letter-spacing: 0.2142rem;
  }

  .opt-hero__action-label {
    top: 41.325rem;
    left: 5.8125rem;
    width: 14.25rem;
    height: 1.6875rem;
    font-size: 0.9574rem;
    line-height: 1.76;
    letter-spacing: 0.1053rem;
  }

  .opt-hero__action-label-lines {
    top: 0.5625rem;
    width: 14.25rem;
    height: 0.896rem;
  }

  .opt-hero__visitor-cta {
    top: 43.1838rem;
    left: 1.8125rem;
    width: 22.25rem;
    height: auto;
    overflow: visible;
    border-radius: 12.5rem;
    box-shadow: none;
  }

  .opt-hero__visitor-cta-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: fill;
    content: url("../img/hero-visitor-cta.webp");
  }

  .opt-hero__activities-cta {
    /* Keep ~13px under visitor CTA image (incl. shadow), per Figma 15:908 */
    top: 49.625rem;
    left: 1.8125rem;
    width: 22.25rem;
    height: 3.5937rem;
    border-width: 1px;
    border-radius: 5rem;
    font-size: 0.9678rem;
    letter-spacing: 0.2129rem;
  }

  .opt-hero__activities-cta strong {
    font-size: 1.3616rem;
    letter-spacing: 0.2995rem;
  }

  .opt-hero__activities-cta i {
    right: 1.0431rem;
    font-size: 1.25rem;
  }

  .opt-hero__fee {
    top: 53.6875rem;
    left: 0;
    width: 25.875rem;
    font-size: 0.7219rem;
    line-height: 1.54;
    letter-spacing: 0.0722rem;
  }

  .opt-hero__fee small {
    font-size: 0.5906rem;
  }

  .opt-hero__pain-header {
    height: auto;
    margin-bottom: 1.6rem;
    padding-left: 0;
  }

  .opt-hero__pain-title {
    width: 18.4375rem;
    height: auto;
    align-items: flex-start;
    font-size: 1.8085rem;
    line-height: 1.26;
    letter-spacing: 0.2351rem;
  }

  .opt-hero__pain-title strong {
    width: 8.4938rem;
    padding-bottom: 0.0766rem;
    border-bottom-width: 0.0844rem;
    margin-inline: 0.2156rem 0.3531rem;
    font-size: 2.6401rem;
    line-height: 1.26;
    letter-spacing: 0.132rem;
  }

  .opt-hero__pain-copy {
    width: 5.9375rem;
    padding-top: 0.6188rem;
  }

  .opt-hero__pain-copy:last-child {
    width: 3.5625rem;
  }

  .opt-hero__pain-list {
    width: 100%;
    flex-direction: column;
    gap: 1.0625rem;
  }

  .opt-hero-pain-card {
    display: flex;
    min-height: 8.0625rem;
    padding: 0 1.1875rem 0 0;
    border-radius: 0.6875rem;
    align-items: center;
  }

  .opt-hero-pain-card__media {
    width: 8.8125rem;
    height: auto;
    min-height: 8.0625rem;
    margin-bottom: 0;
    flex: 0 0 8.8125rem;
    align-items: center;
    justify-content: flex-start;
  }

  .opt-hero-pain-card--1 .opt-hero-pain-card__media {
    padding-top: 0;
  }

  .opt-hero-pain-card--2 .opt-hero-pain-card__media,
  .opt-hero-pain-card--3 .opt-hero-pain-card__media {
    padding-top: 0.4375rem;
  }

  .opt-hero-pain-card--1 .opt-hero-pain-card__img {
    width: 6.7842rem;
    margin-bottom: -0.9688rem;
  }

  .opt-hero-pain-card--2 .opt-hero-pain-card__img {
    width: 8.875rem;
    max-width: none;
    margin-bottom: -0.75rem;
  }

  .opt-hero-pain-card--3 .opt-hero-pain-card__img {
    width: 5.625rem;
    margin-bottom: -1.0625rem;
  }

  .opt-hero-pain-card__label {
    min-width: 5.875rem;
    border-radius: 1.875rem;
    font-size: 0.6875rem;
    line-height: 1.25rem;
    letter-spacing: 0.1169rem;
  }

  .opt-hero-pain-card--1 .opt-hero-pain-card__label {
    min-width: 5.25rem;
  }

  .opt-hero-pain-card__description {
    min-width: 0;
    flex: 1;
    font-size: 0.875rem;
    line-height: 1.4;
    letter-spacing: 0.07rem;
  }
}
.opt-concept {
  /* Above .opt-activities so SP movie (negative margin) stays visible */
  z-index: 1;
  isolation: isolate;
  padding-block: 0.71rem 3.7481rem;
  background-color: #fff;
}

.opt-concept__deco {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.opt-concept__deco.opt-concept__deco--top-left {
  /* Figma 34:1921 @img x=0 y=-360 w=575 h=686.57 */
  top: -22.5rem;
  left: 0;
  width: 35.9375rem;
  height: auto;
  max-width: none;
}

.opt-concept__deco--right {
  top: 43.6397rem;
  right: 0;
  width: 26.1875rem;
}

.opt-concept__bottom-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -2;
  height: 27.9394rem;
  overflow: hidden;
  background-image: linear-gradient(to left, #004c80, #001e55);
}

.opt-concept__bottom-bg::before {
  position: absolute;
  top: -8.375rem;
  left: calc(50% + 1.25rem);
  z-index: 2;
  width: 113.3125rem;
  height: 19.5rem;
  content: "";
  background-image: url("../img/concept-bg-blur.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  transform: translateX(-50%);
}

.opt-concept__bottom-bg::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background-image: url("../img/common-paper-texture.webp");
  background-repeat: repeat;
  background-position: top left;
  background-size: 64rem 64rem;
  opacity: 0.08;
}

.opt-concept__inner {
  width: 90%;
  max-width: 68.3099rem;
  margin-inline: auto;
}

.opt-concept__header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 6.2167rem;
  text-align: center;
}

.opt-concept__kicker,
.opt-concept__title,
.opt-concept-value__title,
.opt-concept-value-card__label,
.opt-concept__lead,
.opt-concept__movie-title {
  color: transparent;
  background-image: linear-gradient(to left, #004c80, #001e55);
  background-clip: text;
  -webkit-background-clip: text;
}

.opt-concept__kicker {
  margin-bottom: 0.5089rem;
  font-size: 2.2363rem;
  font-weight: 700;
  line-height: 1.56;
  letter-spacing: 0.2907rem;
  transform: translateY(1.4rem);
}

.opt-concept__kicker span,
.opt-concept__title span,
.opt-concept__lead span {
  white-space: nowrap;
}

.opt-concept__title {
  margin-bottom: 0.5623rem;
  font-size: 4.2838rem;
  font-weight: 700;
  line-height: 1.56;
  letter-spacing: 0.5569rem;
}

.opt-concept__brand {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 33.0525rem;
  height: 4.29rem;
  margin-right: 2.8721rem;
  gap: 1.2651rem;
  overflow: hidden;
  color: #fff;
  background-image: linear-gradient(to left, #004c80, #001e55);
  border-radius: 7.8rem;
}

.opt-concept__brand::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image: url("../img/common-paper-texture.webp");
  background-repeat: repeat;
  background-position: top left;
  background-size: 99.84rem 99.84rem;
  opacity: 0.08;
}

.opt-concept__brand-name,
.opt-concept__brand-abbr {
  position: relative;
  z-index: 1;
  font-weight: 700;
  line-height: 1.56;
  white-space: nowrap;
}

.opt-concept__brand-name {
  font-size: 2.4313rem;
  letter-spacing: 0.1945rem;
}

.opt-concept__brand-abbr {
  font-size: 2.2363rem;
  letter-spacing: 0.1789rem;
}

.opt-concept__overview {
  position: relative;
  display: flex;
  align-items: stretch;
  margin-bottom: 0.8874rem;
  gap: 8.0632%;
}

.opt-concept__bridge-dots {
  position: absolute;
  top: 17.3812rem;
  left: calc(54.9801% + 0.6073rem);
  width: 2.5834rem;
  height: 0.4493rem;
  pointer-events: none;
}

.opt-concept__bridge-dots-image {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  width: 0.4493rem;
  height: 2.5834rem;
  transform: translate(-50%, -50%) rotate(-90deg);
}

.opt-concept__diagram {
  flex: 0 1 54.9801%;
  min-width: 0;
  padding-bottom: 1.1446rem;
  opacity: 0;
  transform: translate3d(0, 2.5rem, 0);
  transition:
    opacity 1.35s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.opt-concept__diagram.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .opt-concept__diagram {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

.opt-concept__diagram-frame {
  width: 100%;
  /* Match concept-art-03.webp (1303×1326) so the down-arrow tip isn't cropped */
  aspect-ratio: 1303 / 1326;
  margin-bottom: -3.6526rem;
  overflow: visible;
}

.opt-concept__diagram-image {
  display: block;
  max-width: none;
  /* Original Figma placement; overflow:visible keeps tips from clipping */
  width: 108.8%;
  height: auto;
  transform: translate(-7.1067%, -6.888%);
}

.opt-concept__value-column {
  display: flex;
  flex: 0 1 36.9567%;
  align-items: center;
  min-width: 0;
  padding-bottom: 0.5598rem;
}

.opt-concept-value {
  width: 100%;
  height: 24.0975rem;
  padding-top: 1.6875rem;
  background-color: rgba(238, 244, 253, 0.6);
  border-radius: 0.675rem;
}

.opt-concept-value__title {
  margin-bottom: 1.3216rem;
  font-size: 1.1432rem;
  font-weight: 700;
  line-height: 1.56;
  letter-spacing: 0.0915rem;
  text-align: center;
}

.opt-concept-value__cards {
  display: flex;
  height: 5.8708rem;
  margin-inline: 1.08rem 1.1441rem;
  margin-bottom: 1.6217rem;
  gap: 0.3208rem;
}

.opt-concept-value-card {
  position: relative;
  display: flex;
  flex: 1;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  padding-bottom: 0.3467rem;
  background-color: #fff;
  border-radius: 0.675rem;
  box-shadow: 0 0 0.2565rem rgba(0, 0, 0, 0.08);
}

.opt-concept-value-card__icon {
  position: absolute;
  left: 50%;
  max-width: 100%;
  transform: translateX(-50%);
}

.opt-concept-value-card__icon--1 {
  top: -0.2025rem;
  width: 4.9275rem;
}

.opt-concept-value-card__icon--2 {
  top: -0.2025rem;
  width: 5.13rem;
}

.opt-concept-value-card__icon--3 {
  top: 0.27rem;
  width: 4.455rem;
}

.opt-concept-value-card__icon--4 {
  top: 0.675rem;
  width: 3.3075rem;
}

.opt-concept-value-card__label {
  position: relative;
  z-index: 1;
  font-size: 0.945rem;
  font-weight: 700;
  line-height: 1.56;
  letter-spacing: 0.1418rem;
  white-space: nowrap;
}

.opt-concept-value__list {
  display: flex;
  flex-direction: column;
  width: 18.2011rem;
  max-width: calc(100% - 2rem);
  margin-inline: auto;
  gap: 0.889rem;
}

.opt-concept-value__item {
  position: relative;
  padding-left: 1.1386rem;
  color: #001e55;
  font-size: 0.945rem;
  font-weight: 500;
  line-height: 1.56;
}

.opt-concept-value__item::before {
  position: absolute;
  top: 0.4814rem;
  left: 0;
  width: 0.5897rem;
  height: 0.5897rem;
  content: "";
  background-image: url("../img/concept-curve-line.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.opt-concept__description {
  text-align: center;
}

.opt-concept__lead {
  margin-bottom: 1.2718rem;
  font-size: 1.2994rem;
  font-weight: 500;
  line-height: 2.3;
  letter-spacing: 0.065rem;
}

.opt-concept__organizer {
  margin-bottom: 1.0063rem;
  color: #001e55;
  font-size: 0.7875rem;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.0394rem;
}

.opt-concept__movie {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 56.9278rem;
  margin-inline: auto;
}

.opt-concept__movie-title {
  align-self: flex-end;
  width: 14.5rem;
  margin-right: 0.9028rem;
  margin-bottom: -1.1906rem;
  font-size: 3.5565rem;
  font-weight: 700;
  line-height: 1.56;
  letter-spacing: 0.9958rem;
  text-align: center;
  white-space: nowrap;
}

.opt-concept__movie-frame {
  position: relative;
  width: 100%;
  height: 34.2225rem;
  aspect-ratio: 910.845 / 547.56;
  overflow: clip;
  border-radius: 1.6453rem;
  background: #000;
}

.opt-concept__movie-poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
}

.opt-concept__movie-poster-img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform: scale(1.012);
}

.opt-concept__movie-frame.is-playing .opt-concept__movie-poster {
  display: none;
}

.opt-concept__movie-embed {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (width >= 768px) and (width < 900px) {
  .opt-concept-value-card__label,
  .opt-concept-value__item {
    font-size: 0.75rem;
  }

  .opt-concept-value-card__label {
    letter-spacing: 0.075rem;
  }
}

@media (width < 768px) {
  .opt-concept {
    padding-block: 5.6875rem 3.75rem;
    overflow: visible;
    isolation: auto;
  }

  .opt-concept::before,
  .opt-concept::after {
    content: none;
  }

  .opt-concept__deco.opt-concept__deco--top-left {
    /* SP: under chevron / left-cropped (z-index 0 so not behind section white bg) */
top: -8.1rem;
    left: -2.7rem;
    z-index: 0;
    width: 17.2rem;
    height: auto;
    max-width: none;
  }

  .opt-concept__deco--right {
    top: 76.625rem;
    right: -0.525rem;
    width: 13.0625rem;
  }

  /*
    Figma 15:21 — extend the blue band under the movie and carve the
    concave white scoop with the same ellipse asset as PC.
  */
  .opt-concept__bottom-bg {
    top: 100%;
    right: 0;
    bottom: auto;
    left: 0;
    z-index: 0;
    display: block;
    /* Only under the overlapping movie — taller band covered .opt-activities__label */
    height: 7rem;
  }

  .opt-concept__bottom-bg::before {
    /*
      SP scoop ≈ circle R=50.4375rem over 25.875rem viewport, sagitta 1.6875rem.
      Wider than the viewport so edge tangents stay gentle (not a V-notch).
    */
    top: -99.1875rem;
    left: 50%;
    width: 100.875rem;
    height: 100.875rem;
    background-image: url("../img/concept-bg-blur.svg");
    transform: translateX(-50%);
  }

  .opt-concept__inner {
    position: relative;
    z-index: 1;
    width: 90.3382%;
    max-width: 23.375rem;
  }

  .opt-concept__header {
    margin-bottom: 1.7432rem;
  }

  .opt-concept__kicker {
    margin-bottom: 0.3263rem;
    font-size: 1.4335rem;
    line-height: 1.56;
    letter-spacing: 0.1864rem;
    transform: none;
  }

  .opt-concept__title {
    margin-bottom: 1.495rem;
    font-size: 2.746rem;
    line-height: 1.23;
    letter-spacing: 0.357rem;
  }

  .opt-concept__title span,
  .opt-concept__lead span {
    white-space: normal;
  }

  .opt-concept__brand {
    max-width: 21.1875rem;
    height: 2.75rem;
    margin-right: 0;
    gap: 0.8125rem;
    border-radius: 5rem;
  }

  .opt-concept__brand::before {
    background-size: 64rem 64rem;
  }

  .opt-concept__brand-name {
    font-size: 1.5585rem;
    letter-spacing: 0.1247rem;
  }

  .opt-concept__brand-abbr {
    font-size: 1.4335rem;
    letter-spacing: 0.1147rem;
  }

  .opt-concept__overview {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 2.375rem;
    gap: 0;
  }

  .opt-concept__diagram {
    position: relative;
    flex: none;
    width: 26.75rem;
    margin-left: -0.75rem;
    margin-bottom: -3.4318rem;
    padding-bottom: 0;
  }

  .opt-concept__diagram-frame {
    width: 100%;
    aspect-ratio: 1303 / 1326;
    margin-bottom: 0;
    overflow: visible;
  }

  .opt-concept__bridge-dots {
    position: relative;
    top: auto;
    left: auto;
    width: 0.32rem;
    height: 1.84rem;
    margin-inline: auto;
    margin-bottom: 0.88rem;
  }

  .opt-concept__bridge-dots-image {
    width: 0.32rem;
    height: 1.84rem;
    transform: translate(-50%, -50%);
  }

  .opt-concept__value-column {
    display: block;
    flex: none;
    width: 100%;
    padding-bottom: 0;
  }

  .opt-concept-value {
    height: auto;
    padding: 1.5625rem 1rem 2.3938rem;
    background-color: #EEF4FD;
    border-radius: 0.625rem;
  }

  .opt-concept-value__title {
    margin-bottom: 1.25rem;
    font-size: 1.0585rem;
    letter-spacing: 0.0847rem;
  }

  .opt-concept-value__cards {
    height: 5.4359rem;
    margin-inline: 0;
    margin-bottom: 1.5rem;
    gap: 0.2969rem;
  }

  .opt-concept-value-card {
    padding-bottom: 0.3209rem;
    border-radius: 0.625rem;
    box-shadow: 0 0 0.2375rem rgba(0, 0, 0, 0.08);
  }

  .opt-concept-value-card__icon--1 {
    top: -0.1875rem;
    width: 4.5625rem;
  }

  .opt-concept-value-card__icon--2 {
    top: -0.1875rem;
    width: 4.75rem;
  }

  .opt-concept-value-card__icon--3 {
    top: 0.25rem;
    width: 4.125rem;
  }

  .opt-concept-value-card__icon--4 {
    top: 0.625rem;
    width: 3.0625rem;
  }

  .opt-concept-value-card__label {
    font-size: 0.875rem;
    letter-spacing: 0.1313rem;
  }

  .opt-concept-value__list {
    width: 16.8043rem;
    max-width: 100%;
    gap: 0.875rem;
  }

  .opt-concept-value__item {
    padding-left: 1.0543rem;
    font-size: 0.875rem;
    line-height: 1.56;
  }

  .opt-concept-value__item::before {
    top: 0.4457rem;
    width: 0.546rem;
    height: 0.546rem;
  }

  .opt-concept__description {
    width: 21.4375rem;
    max-width: 100%;
    margin-inline: auto;
  }

  .opt-concept__lead {
    margin-bottom: 1.0313rem;
    font-size: 1.0625rem;
    line-height: 2.3;
    letter-spacing: 0.0531rem;
  }

  .opt-concept__organizer {
    margin-bottom: 1.8625rem;
    font-size: 0.75rem;
    line-height: 1.8;
    letter-spacing: 0.0375rem;
  }

  .opt-concept__movie {
    position: relative;
    z-index: 2;
    max-width: 21.625rem;
    margin-bottom: -10.4831rem;
  }

  .opt-concept__movie-title {
    width: 9.6875rem;
    margin-right: 0.8125rem;
    margin-bottom: -0.885rem;
    font-size: 2.371rem;
    letter-spacing: 0.6639rem;
  }

  .opt-concept__movie-frame {
    height: 13rem;
    aspect-ratio: 346 / 208;
    border-radius: 0.625rem;
  }
}
@font-face {
  font-family: "42dot Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/42dotsans/v6/BXR7vFK-2v7FnQ1xTYUJy2T9rRBKbpqjqRg-ZXNVe3kASTI_bhA.woff2") format("woff2");
  unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+0304, U+0308, U+0329, U+2000-206f, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd;
}

.opt-activities {
  z-index: 0;
  padding-block: 4.5rem 17.9453rem;
  color: #fff;
  background: linear-gradient(to right, #001e55 0%, #004c80 100%);
}

.opt-activities::before {
  position: absolute;
  inset: 0;
  background-image: url("../img/common-paper-texture.webp");
  background-repeat: repeat;
  background-position: left top;
  background-size: 64rem 64rem;
  opacity: 0.08;
  content: "";
  pointer-events: none;
}

.opt-activities__inner {
  width: 90%;
  max-width: 72.875rem;
  margin-inline: auto;
}

.opt-activities__header {
  position: relative;
  width: 100%;
  max-width: 41.875rem;
  padding-left: 1.5625rem;
  margin-bottom: 3.8795rem;
}

.opt-activities__header::after {
  position: absolute;
  top: 2.7875rem;
  left: 0;
  width: 16.4375rem;
  height: 0.0875rem;
  background: #fff;
  content: "";
}

.opt-activities__label {
  position: relative;
  z-index: 1;
  margin-bottom: -0.665rem;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 1.575rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.126rem;
}

.opt-activities__title {
  display: flex;
  align-items: baseline;
  margin-bottom: -0.1697rem;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 2.7944rem;
  font-weight: 700;
  line-height: 1.56;
  letter-spacing: 0.2235rem;
}

.opt-activities__title-number {
  font-size: 4.8069rem;
  letter-spacing: 0.3846rem;
}

.opt-activities__title-tight {
  letter-spacing: -0.3353rem;
}

.opt-activities__title-dot {
  letter-spacing: -0.6148rem;
}

.opt-activities__intro {
  width: 102.5%;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.36;
  letter-spacing: 0.112rem;
  transform: scaleX(0.9756097561);
  transform-origin: left center;
}

.opt-activities__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  max-width: 69.125rem;
  margin-inline: auto;
  column-gap: 0.8737rem;
  row-gap: 0;
}

.opt-activity-card {
  --opt-activity-card-y: 0px;
  opacity: 0;
  transform: translate3d(0, 2.25rem, 0);
}

.opt-activities__list.is-revealed .opt-activity-card {
  animation: opt-activity-card-pop 0.56s cubic-bezier(0.22, 1.28, 0.36, 1) both;
}

.opt-activities__list.is-revealed .opt-activity-card:nth-child(1) {
  animation-delay: 0ms;
}

.opt-activities__list.is-revealed .opt-activity-card:nth-child(2) {
  animation-delay: 85ms;
}

.opt-activities__list.is-revealed .opt-activity-card:nth-child(3) {
  animation-delay: 170ms;
}

.opt-activities__list.is-revealed .opt-activity-card:nth-child(4) {
  animation-delay: 255ms;
}

.opt-activities__list.is-revealed .opt-activity-card:nth-child(5) {
  animation-delay: 340ms;
}

.opt-activities__list.is-revealed .opt-activity-card:nth-child(6) {
  animation-delay: 425ms;
}

.opt-activities__list.is-revealed .opt-activity-card:nth-child(7) {
  animation-delay: 510ms;
}

.opt-activities__list.is-revealed .opt-activity-card:nth-child(8) {
  animation-delay: 595ms;
}

.opt-activities__list.is-revealed .opt-activity-card:nth-child(9) {
  animation-delay: 680ms;
}

.opt-activities__list.is-revealed .opt-activity-card:nth-child(10) {
  animation-delay: 765ms;
}

.opt-activities__list.is-revealed .opt-activity-card:nth-child(11) {
  animation-delay: 850ms;
}

.opt-activities__list.is-revealed .opt-activity-card:nth-child(12) {
  animation-delay: 935ms;
}

@keyframes opt-activity-card-pop {
  0% {
    opacity: 0;
    transform: translate3d(0, 2.25rem, 0) scale(0.94);
  }

  62% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translate3d(0, var(--opt-activity-card-y), 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .opt-activity-card {
    opacity: 1;
    transform: translate3d(0, var(--opt-activity-card-y), 0);
  }

  .opt-activities__list.is-revealed .opt-activity-card {
    animation: none;
  }
}

.opt-activity-card:nth-child(-n + 4) {
  margin-bottom: 1.6955rem;
}

.opt-activity-card:nth-child(n + 5):nth-child(-n + 8) {
  margin-bottom: 2.3205rem;
}

.opt-activity-card__header {
  position: relative;
  display: flex;
  align-items: center;
  height: 3.0388rem;
  padding-left: 0.7156rem;
}

.opt-activity-card__number {
  display: flex;
  flex: 0 0 1.6981rem;
  align-items: center;
  font-family: "42dot Sans", "Noto Sans JP", sans-serif;
  font-size: 2.3237rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1162rem;
  white-space: nowrap;
}

.opt-activity-card--10 .opt-activity-card__number,
.opt-activity-card--11 .opt-activity-card__number,
.opt-activity-card--12 .opt-activity-card__number {
  flex-basis: 3.0387rem;
}

.opt-activity-card__category {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 1.2512rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.0626rem;
  white-space: nowrap;
}

.opt-activity-card__dot {
  position: absolute;
  z-index: 1;
  top: 1.7517rem;
  right: 0.8587rem;
  width: 0.4290rem;
  height: 0.4290rem;
  border-radius: 50%;
  background: #a8b5c9;
}

.opt-activity-card__panel {
  position: relative;
  min-height: 14.0782rem;
  padding: 1.6087rem 1.0732rem 1rem 1.4306rem;
  color: #001e55;
}

.opt-activity-card__panel::before {
  position: absolute;
  top: -2.2344rem;
  right: 0;
  left: 0;
  height: 16.3125rem;
  background-image: url("../img/activities-card-panel.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  content: "";
  pointer-events: none;
}

.opt-activity-card__panel > * {
  position: relative;
  z-index: 1;
}

.opt-activity-card__panel small {
  font-size: 0.9rem;
  border-bottom: solid 0.1rem;
  padding-top: 0.8rem;
  display: inline-block;
}

.opt-activity-card__title {
  margin-bottom: 0.2324rem;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 1.43rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.0715rem;
}

.opt-activity-card--without-badge .opt-activity-card__title {
  margin-bottom: 0.9116rem;
}

.opt-activity-card--11 .opt-activity-card__title,
.opt-activity-card--12 .opt-activity-card__title {
  margin-bottom: 0.5184rem;
  line-height: 1.2;
}

.opt-activity-card__badge {
  display: inline-flex;
  padding: 0.1787rem 0.4468rem 0.3031rem;
  margin-bottom: 0.8044rem;
  color: #fff;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 1.1619rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.0581rem;
  background: linear-gradient(to left, #001e55 0%, #004c80 100%);
  border-radius: 0.1787rem;
}

.opt-activity-card__badge--hot {
  background: #da213a;
}

.opt-activity-card__description {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.4;
}

.opt-activity-card__description--compact {
  letter-spacing: -0.0213rem;
}

@media (min-width: 48rem) and (max-width: 76.8125rem) {
  .opt-activities .opt-activities__list {
    grid-template-columns: repeat(auto-fit, minmax(16.625rem, 1fr));
    row-gap: 2rem;
  }

  .opt-activities .opt-activity-card:nth-child(-n + 4),
  .opt-activities .opt-activity-card:nth-child(n + 5):nth-child(-n + 8) {
    margin-bottom: 0;
  }
}

@media (width < 768px) {
  .opt-activities {
    padding-block: 9.75rem 11.25rem;
  }

  .opt-activities__inner {
    width: 92.2705%;
    max-width: 23.875rem;
  }

  .opt-activities__header {
    /* max-width: 22.4375rem; */
    padding-left: 2.125rem;
    margin-bottom: 1.8575rem;
  }

  .opt-activities__header::after {
    top: 2rem;
    left: -1rem;
    width: 13.75rem;
    height: 1px;
  }

  .opt-activities__label {
    margin-bottom: -0.475rem;
    font-size: 1.125rem;
    letter-spacing: 0.09rem;
  }

  .opt-activities__title {
    margin-bottom: -1.4813rem;
    font-size: 1.996rem;
    letter-spacing: 0.1597rem;
  }

  .opt-activities__title > span {
    flex: none;
    white-space: nowrap;
  }

  .opt-activities__title-number {
    font-size: 3.4335rem;
    letter-spacing: 0.2747rem;
  }

  .opt-activities__title-tight {
    letter-spacing: -0.2395rem;
  }

  .opt-activities__title-dot {
    letter-spacing: -0.4391rem;
  }

  .opt-activities__intro {
    width: 100%;
    padding-top: 1.36rem;
    font-size: 1rem;
    letter-spacing: 0.08rem;
    transform: none;
  }

  .opt-activities__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 23.875rem;
    column-gap: 0.625rem;
    row-gap: 0.5rem;
  }

  .opt-activity-card:nth-child(-n + 4),
  .opt-activity-card:nth-child(n + 5):nth-child(-n + 8) {
    margin-bottom: 0;
  }

  .opt-activity-card:nth-child(even) {
    --opt-activity-card-y: 1.25rem;
  }

  .opt-activity-card__header {
    align-items: center;
    height: 3.25rem;
    padding-left: 0.5rem;
    margin-bottom: 0.3rem;
  }

  .opt-activity-card__number {
    flex-basis: 1.1875rem;
    font-size: 1.625rem;
    line-height: 1;
    letter-spacing: 0.0813rem;
  }

  .opt-activity-card--10 .opt-activity-card__number,
  .opt-activity-card--11 .opt-activity-card__number,
  .opt-activity-card--12 .opt-activity-card__number {
    flex-basis: 2.125rem;
  }

  .opt-activity-card__category {
    font-size: 0.875rem;
    line-height: 1;
    letter-spacing: 0.0438rem;
  }

  .opt-activity-card__dot {
    top: 1.725rem;
    right: 0.6rem;
    width: 0.3rem;
    height: 0.3rem;
  }

  .opt-activity-card__panel {
    min-height: 10.375rem;
    padding: 0 0.75rem 0 1rem;
  }

  /* Figma SP: Subtract top = group+9, panel = group+52 → top -43px; notch 25px */
  .opt-activity-card__panel::before {
    top: -2.4875rem;
    height: 13.0625rem;
    background-image: url("../img/activities-card-panel-sp.svg");
    transform: none;
  }

  .opt-activity-card__panel small {
    font-size: 0.7rem;
    border-bottom: solid 0.08rem;
    margin-top: -1rem;
  }

  .opt-activity-card--3 .opt-activity-card__panel,
  .opt-activity-card--4 .opt-activity-card__panel {
    min-height: 9.4375rem;
  }

  .opt-activity-card--3 .opt-activity-card__panel::before,
  .opt-activity-card--4 .opt-activity-card__panel::before {
    height: 12.125rem;
  }

  .opt-activity-card--5 .opt-activity-card__panel,
  .opt-activity-card--6 .opt-activity-card__panel {
    min-height: 9.5rem;
  }

  .opt-activity-card--5 .opt-activity-card__panel::before,
  .opt-activity-card--6 .opt-activity-card__panel::before {
    height: 12.1875rem;
  }

  .opt-activity-card--7 .opt-activity-card__panel,
  .opt-activity-card--8 .opt-activity-card__panel {
    min-height: 9.6875rem;
  }

  .opt-activity-card--7 .opt-activity-card__panel::before,
  .opt-activity-card--8 .opt-activity-card__panel::before {
    height: 12.375rem;
  }

  .opt-activity-card--9 .opt-activity-card__panel,
  .opt-activity-card--10 .opt-activity-card__panel {
    min-height: 9.3125rem;
  }

  .opt-activity-card--9 .opt-activity-card__panel::before,
  .opt-activity-card--10 .opt-activity-card__panel::before {
    height: 12rem;
  }

  .opt-activity-card--11 .opt-activity-card__panel,
  .opt-activity-card--12 .opt-activity-card__panel {
    min-height: 9.25rem;
  }

  .opt-activity-card--11 .opt-activity-card__panel::before,
  .opt-activity-card--12 .opt-activity-card__panel::before {
    height: 11.9375rem;
  }

  .opt-activity-card__title {
    margin-bottom: 0.1625rem;
    font-size: 1rem;
    letter-spacing: 0.05rem;
  }

  .opt-activity-card--without-badge .opt-activity-card__title {
    margin-bottom: 0.6375rem;
  }

  .opt-activity-card--11 .opt-activity-card__title,
  .opt-activity-card--12 .opt-activity-card__title {
    margin-bottom: 0.1625rem;
  }

  .opt-activity-card__badge {
    padding: 0.125rem 0.3125rem 0.2125rem;
    margin-bottom: 0.5625rem;
    font-size: 0.8125rem;
    letter-spacing: 0.0406rem;
    border-radius: 0.125rem;
  }

  .opt-activity-card__description {
    font-size: 0.875rem;
  }

  .opt-activity-card__description--compact {
    letter-spacing: 0;
  }
}
.opt-salon {
  /* Reserve space for visitor CTA that sits on the MTLC seam */
  padding-block: 18.125rem 4.25rem;
  overflow: visible;
  background-color: #fff;
}

.opt-salon__backdrop {
  position: absolute;
  top: -0.875rem;
  left: 0;
  z-index: 0;
  width: 100%;
  overflow: hidden;
  color: #f3f4f7;
  font-size: 13.9831rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 2.0975rem;
  white-space: nowrap;
  pointer-events: none;
}

.opt-salon__backdrop-track {
  display: inline-flex;
  width: max-content;
  will-change: transform;
  animation: opt-salon-backdrop-marquee 50s linear infinite;
}

.opt-salon__backdrop-track > span {
  flex: 0 0 auto;
  padding-right: 4rem;
}

@keyframes opt-salon-backdrop-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .opt-salon__backdrop-track {
    animation: none;
    transform: none;
  }
}

.opt-salon__top-visual {
  position: absolute;
  top: -12.375rem;
  right: 5.3125rem;
  width: 47.1875rem;
  overflow: clip;
  /* Figma 39:3165 / 104:325 — tl/bl 440, tr/br 700 */
  border-radius: 27.5rem 43.75rem 43.75rem 27.5rem;
  pointer-events: none;
}

.opt-salon__top-visual-image {
  display: block;
  width: 100%;
  aspect-ratio: 755 / 395;
  object-fit: cover;
  object-position: center center;
  border-radius: inherit;
}

.opt-salon__inner {
  width: 90%;
  max-width: 71.25rem;
  margin-inline: auto;
}

.opt-salon__header {
  position: relative;
  width: 100%;
  max-width: 67.75rem;
  margin-inline: auto;
  margin-bottom: 3.625rem;
}

.opt-salon__header-line,
.opt-salon-access__header-line,
.opt-salon-social__header-line,
.opt-global__eyebrow-group::after,
.opt-project-faq__project-line {
  background: linear-gradient(270deg, #001e55 0%, #004c80 100%);
}

.opt-salon__header-line {
  display: block;
  width: 29.0625rem;
  height: 0.0875rem;
  margin-bottom: 1.1375rem;
}

.opt-salon__label {
  padding-left: 2.0125rem;
  margin-bottom: 0.3125rem;
  color: #001e55;
  font-size: 1.4819rem;
  font-weight: 700;
  line-height: 1.56;
  letter-spacing: 0.1186rem;
}

.opt-salon__title {
  padding-left: 2.0125rem;
  margin-bottom: 1.93rem;
  color: transparent;
  font-size: 2.625rem;
  font-weight: 700;
  line-height: 1.56;
  letter-spacing: 0.21rem;
  background: linear-gradient(270deg, #001e55 0%, #004c80 100%);
  background-clip: text;
  -webkit-background-clip: text;
}

.opt-salon__lead {
  padding-left: 2rem;
  color: #001e55;
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.11rem;
}

.opt-salon__programs {
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: 67.75rem;
  margin-inline: auto;
  margin-bottom: 3.8125rem;
  gap: 2.875rem;
}

.opt-salon-monthly,
.opt-salon-timeline {
  min-width: 0;
  border-radius: 0.875rem;
  background-color: #EEF4FD;
}

.opt-salon-monthly {
  position: relative;
  flex: 0 1 47.8782%;
  padding: 1.4875rem 1.9125rem 1.7rem;
}

.opt-salon-monthly__title {
  padding-left: 0.525rem;
  margin-bottom: 0.4778rem;
  color: transparent;
  font-size: 1.6569rem;
  font-weight: 700;
  line-height: 1.56;
  letter-spacing: 0.1326rem;
  background: linear-gradient(270deg, #001e55 0%, #004c80 100%);
  background-clip: text;
  -webkit-background-clip: text;
}

.opt-salon-monthly__schedule {
  padding-left: 0.525rem;
  margin-bottom: 1.39rem;
  color: #014a7e;
  font-size: 1.225rem;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.098rem;
  text-align: left;
}

.opt-salon-monthly__schedule span {
  display: flex;
  align-items: flex-start;
  column-gap: 0.625rem;
}

.opt-salon-monthly__schedule span::before {
  content: "";
  flex: 0 0 0.2625rem;
  width: 0.2625rem;
  height: 0.2625rem;
  margin-top: calc((1em * 1.7 - 0.2625rem) / 2);
  border-radius: 50%;
  background-color: #014a7e;
}

.opt-salon-monthly__photos {
  display: flex;
  flex-direction: column;
  gap: 1.1375rem;
}

.opt-salon-monthly__photo {
  aspect-ratio: 1.703125;
  overflow: clip;
  border-radius: 0.625rem;
}

.opt-salon-monthly__photo:first-child .opt-salon-monthly__photo-image {
  object-position: center bottom;
}

.opt-salon-timeline-wrap {
  flex: 0 1 47.8782%;
  min-width: 0;
}

.opt-salon-timeline {
  width: 100%;
  padding: 2.1875rem 1.3875rem 4.2713rem 2.0875rem;
  margin-bottom: 0.75rem;
}

.opt-salon-timeline__title {
  padding-left: 0.525rem;
  margin-bottom: 1.615rem;
  color: transparent;
  font-size: 1.6569rem;
  font-weight: 700;
  line-height: 1.56;
  letter-spacing: 0.1326rem;
  background: linear-gradient(270deg, #001e55 0%, #004c80 100%);
  background-clip: text;
  -webkit-background-clip: text;
}

.opt-salon-timeline__body {
  --salon-time-w: 3.5rem;
  --salon-time-h: 1.75rem;
  --salon-time-shift: 0.0875rem;
  --salon-time-center: calc(var(--salon-time-shift) + var(--salon-time-h) / 2);
  --salon-line-w: 0.175rem;
  --salon-line-color: #004c80;
  --salon-line-tip: #001e55;
  /* 18:30バッジ〜説明文の下を突き抜けて矢印まで伸ばす長さ */
  --salon-arrow-extend: 1.05rem;
  /* カンプのオープンV字矢印（線幅と同じストローク、先端角90°） */
  --salon-arrow-arm: 0.88125rem;
  position: relative;
  overflow: visible;
}

.opt-salon-timeline__list {
  position: relative;
  overflow: visible;
}

.opt-salon-timeline__item {
  --salon-item-gap: 0rem;
  position: relative;
  display: flex;
  align-items: flex-start;
  column-gap: 1.0625rem;
  overflow: visible;
}

/* 時刻バッジ中心同士をつなぐ可変縦線（アイテム高さ・余白に追従） */
.opt-salon-timeline__item:not(:last-child)::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: var(--salon-time-center);
  left: calc(var(--salon-time-w) / 2);
  width: var(--salon-line-w);
  height: calc(100% + var(--salon-item-gap));
  transform: translateX(-50%);
  background-color: var(--salon-line-color);
  pointer-events: none;
}

/* 最終項目: 18:30中心から矢印先端まで線を伸ばす */
.opt-salon-timeline__item:last-child::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: var(--salon-time-center);
  left: calc(var(--salon-time-w) / 2);
  width: var(--salon-line-w);
  /* 矢印先端まで届かせ、継ぎ目の隙間を防ぐため線幅分だけ重ねる */
  height: calc(
    100% - var(--salon-time-center) + var(--salon-arrow-extend) + var(--salon-line-w)
  );
  transform: translateX(-50%);
  background-color: var(--salon-line-color);
  pointer-events: none;
}

/* 最終項目: カンプどおりのオープンV字矢印（縦線と同太さ・先端で接合） */
.opt-salon-timeline__item:last-child::after {
  content: "";
  position: absolute;
  z-index: 0;
  /*
   * transform-origin: center のまま rotate(45deg) すると、
   * V字の先端は top + arm/2 + arm/√2 に来る。
   * 線の終端（100% + extend）と一致させる。
   */
  top: calc(
    100% + var(--salon-arrow-extend)
    - (var(--salon-arrow-arm) / 2)
    - (var(--salon-arrow-arm) / 1.914214)
  );
  left: calc(var(--salon-time-w) / 2);
  width: var(--salon-arrow-arm);
  height: var(--salon-arrow-arm);
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  border-right-width: var(--salon-line-w);
  border-bottom-width: var(--salon-line-w);
  border-right-color: var(--salon-line-tip);
  border-bottom-color: var(--salon-line-tip);
  background: transparent;
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
}

.opt-salon-timeline__item:nth-child(1),
.opt-salon-timeline__item:nth-child(2),
.opt-salon-timeline__item:nth-child(6) {
  --salon-item-gap: 1.435rem;
  margin-bottom: 1.435rem;
}

.opt-salon-timeline__item:nth-child(3),
.opt-salon-timeline__item:nth-child(4) {
  --salon-item-gap: 2.3363rem;
  margin-bottom: 2.3363rem;
}

.opt-salon-timeline__item:nth-child(5) {
  --salon-item-gap: 2.7738rem;
  margin-bottom: 2.7738rem;
}

.opt-salon-timeline__item:nth-child(7) {
  --salon-item-gap: 1.3475rem;
  margin-bottom: 1.3475rem;
}

.opt-salon-timeline__time {
  position: relative;
  z-index: 1;
  flex: 0 0 var(--salon-time-w);
  height: var(--salon-time-h);
  margin-bottom: 0;
  border-radius: var(--salon-time-h);
  color: #f5f8fe;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.084rem;
  text-align: center;
  background-color: #012f65;
  transform: translateY(var(--salon-time-shift));
}

.opt-salon-timeline__description {
  min-width: 0;
  color: #014a7e;
  font-size: 1.225rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.0613rem;
}

.opt-salon-timeline__description strong {
  color: #aea307;
  font-weight: 500;
}

.opt-salon-timeline-wrap__note {
  width: 102.83%;
  color: #001e55;
  font-size: 0.9625rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.0481rem;
}

.opt-salon-access {
  margin-bottom: 8.0188rem;
}

.opt-salon-access__header {
  position: relative;
  width: 7.875rem;
  margin-bottom: 2.75rem;
}

.opt-salon-access__title {
  padding-left: 1.6375rem;
  margin-bottom: 0.3125rem;
  color: transparent;
  font-size: 1.4819rem;
  font-weight: 700;
  line-height: 1.56;
  letter-spacing: 0.1186rem;
  background: linear-gradient(270deg, #001e55 0%, #004c80 100%);
  background-clip: text;
  -webkit-background-clip: text;
}

.opt-salon-access__header-line {
  display: block;
  width: 100%;
  height: 0.0875rem;
}

.opt-salon-access__columns {
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: 68.125rem;
  margin-inline: auto;
  column-gap: 3.578%;
}

.opt-salon-access__venue {
  flex: 0 1 47.43%;
  min-width: 0;
}

.opt-salon-access__building {
  width: 99.2%;
  margin-bottom: 1.5594rem;
  overflow: clip;
  border-radius: 0.4331rem;
  aspect-ratio: 1.6445;
}

.opt-salon-access__venue-title {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0.5225rem;
  column-gap: 0.78rem;
}

.opt-salon-access__venue-label {
  display: flex;
  flex: 0 0 8.7491rem;
  min-height: 3.3784rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.2339rem;
  color: #fff;
  font-size: 1.6632rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.1663rem;
  background: linear-gradient(270deg, #001e55 0%, #004c80 100%);
}

.opt-salon-access__venue-name {
  display: flex;
  min-width: 0;
  flex-direction: column;
  color: #001e55;
}

.opt-salon-access__venue-name strong {
  margin-bottom: -0.3463rem;
  font-size: 1.386rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.1386rem;
}

.opt-salon-access__venue-name span {
  font-size: 1.1261rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.1126rem;
}

.opt-salon-access__venue-note {
  margin-bottom: 2.1125rem;
  color: #001e55;
  font-size: 0.9529rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.0476rem;
}

.opt-salon-access__detail {
  display: grid;
  grid-template-columns: 8.3161rem minmax(0, 1fr);
  border-bottom: 0.0866rem solid #efefef;
  color: #001e55;
}

.opt-salon-access__detail:nth-child(1) {
  padding-bottom: 0.5282rem;
}

.opt-salon-access__detail:nth-child(2) {
  padding-block: 0.6938rem 0.892rem;
}

.opt-salon-access__detail:nth-child(3) {
  padding-block: 0.4331rem 0.5446rem;
}

.opt-salon-access__detail:nth-child(4) {
  padding-block: 0.4331rem 0.8037rem;
}

.opt-salon-access__detail:nth-child(5) {
  padding-top: 0.7794rem;
  border-bottom: 0;
}

.opt-salon-access__detail dt,
.opt-salon-access__detail dd {
  font-size: 1.2128rem;
  line-height: 1.5;
}

.opt-salon-access__detail dt {
  padding-left: 0.6925rem;
  font-weight: 700;
}

.opt-salon-access__detail dd {
  font-weight: 400;
  letter-spacing: 0.0849rem;
}

.opt-salon-access__detail:first-child dd {
  line-height: 1.4;
}

.opt-salon-access__detail small {
  font-size: 0.8663rem;
  line-height: 1.5;
  letter-spacing: 0.0606rem;
}

.opt-salon-access__change-note {
  display: block;
  font-size: 0.9529rem;
  line-height: 1.5;
  letter-spacing: 0;
}

.opt-salon-access__route {
  flex: 0 1 47.17%;
  min-width: 0;
}

.opt-salon-access__map {
  width: 98.21%;
  margin-bottom: 0.72rem;
  margin-inline: auto;
  overflow: clip;
  border-radius: 0.4331rem;
  aspect-ratio: 505 / 316;
}

.opt-salon-access__map-image {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.opt-salon-access__transport {
  padding: 1.386rem 2.325rem 1.28rem;
  margin-bottom: 0.694rem;
  border-radius: 0.8663rem;
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2128rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.0606rem;
  background-color: rgb(238 244 253 / 60%);
}

.opt-salon-access__transport p {
  /* white-space: nowrap; */
}

.opt-salon-access__transport-title {
  margin-bottom: 0.3531rem;
  font-size: 1.2128rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.0606rem;
}

.opt-salon-access__route-notes {
  color: #001e55;
  font-size: 0.9529rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.0476rem;
}

.opt-salon-social {
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: 64.25rem;
  margin-inline: auto;
  margin-bottom: 5.0625rem;
  column-gap: 3.1875rem;
}

.opt-salon-social__content {
  flex: 0 0 29.5rem;
  min-width: 29.5rem;
  padding-top: 2.5625rem;
}

.opt-salon-social__header {
  position: relative;
  width: max-content;
  min-width: 12.125rem;
  margin-bottom: 2.125rem;
  overflow: visible;
}

.opt-salon-social__label {
  width: max-content;
  max-width: none;
  padding-left: 2.0125rem;
  margin-bottom: 0.3125rem;
  overflow: visible;
  color: transparent;
  font-size: 1.4819rem;
  font-weight: 700;
  line-height: 1.56;
  letter-spacing: 0.1186rem;
  background: linear-gradient(270deg, #001e55 0%, #004c80 100%);
  background-clip: text;
  -webkit-background-clip: text;
}

.opt-salon-social__header-line {
  display: block;
  width: 12.125rem;
  height: 0.0875rem;
}

.opt-salon-social__label small {
  font-size: 0.9335rem;
  line-height: 1.56;
  letter-spacing: 0.0747rem;
}

.opt-salon-social__label span {
  white-space: nowrap;
}

.opt-salon-social__title {
  padding-left: 1.9375rem;
  margin-bottom: 2.5875rem;
  color: transparent;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.56;
  letter-spacing: 0.15rem;
  background: linear-gradient(270deg, #001e55 0%, #004c80 100%);
  background-clip: text;
  -webkit-background-clip: text;
}

.opt-salon-social__description {
  padding-left: 1.9375rem;
  margin-bottom: 1.3125rem;
  color: #001e55;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.09rem;
  white-space: nowrap;
}

.opt-salon-social__note {
  padding-left: 1.9375rem;
  color: #001e55;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.0438rem;
}

.opt-salon-social__photos {
  display: flex;
  flex: 0 1 31.5625rem;
  min-width: 0;
  flex-direction: column;
  row-gap: 1.1875rem;
}

.opt-salon-social__photo {
  width: 70.52%;
  overflow: clip;
  border-radius: 0.5281rem;
  aspect-ratio: 366 / 242;
}

.opt-salon-social__photo--second {
  width: 70.33%;
  margin-left: auto;
}

.opt-salon-visitor {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  width: 28.8438rem;
  margin-inline: auto;
  transform: translateY(calc(-100% + 3.75rem));
}

.opt-salon-visitor__label {
  position: relative;
  width: 18.525rem;
  margin-bottom: -0.075rem;
  margin-inline: auto;
  color: #012158;
  font-size: 1.2447rem;
  font-weight: 700;
  line-height: 1.76;
  letter-spacing: 0.1369rem;
  text-align: center;
}

.opt-salon-visitor__label::before,
.opt-salon-visitor__label::after {
  position: absolute;
  top: 50%;
  width: 0.4063rem;
  height: 1.1375rem;
  content: "";
  border-left: 0.0875rem solid #012158;
}

.opt-salon-visitor__label::before {
  left: 0;
  transform: translateY(-50%) rotate(-19.7deg);
}

.opt-salon-visitor__label::after {
  right: 0;
  transform: translateY(-50%) rotate(19.7deg);
}

.opt-salon-visitor__link {
  position: relative;
  z-index: 1;
  display: block;
}

.opt-salon-visitor__cta-artwork {
  display: block;
  aspect-ratio: 1385 / 362;
  width: 100%;
  height: auto;
}

.opt-salon-visitor .opt-cta-fee {
  margin-top: 0.375rem;
}

@media (width < 768px) {
  .opt-salon {
    /* White space for label + upper half of CTA above the MTLC seam */
    padding-block: 11rem 4.5rem;
    overflow: visible;
  }

  .opt-salon__top-visual {
    top: -6.8125rem;
    right: auto;
    left: 0;
    width: 23.9375rem;
    overflow: clip;
    border-radius: 0 12.5rem 12.5rem 0;
  }

  .opt-salon__top-visual-image {
    display: block;
    width: 100%;
    aspect-ratio: 383 / 231;
    object-fit: cover;
    object-position: center center;
    border-radius: inherit;
  }

  .opt-salon__inner {
    width: 90%;
    max-width: 21.75rem;
  }

  .opt-salon__header {
    max-width: none;
    margin-bottom: 1.3125rem;
  }

  .opt-salon__label {
    padding-left: 0;
    margin-bottom: 0.2238rem;
    color: transparent;
    font-size: 1.0585rem;
    line-height: 1.56;
    letter-spacing: 0.0847rem;
    text-align: left;
    background: linear-gradient(270deg, #001e55 0%, #004c80 100%);
    background-clip: text;
    -webkit-background-clip: text;
  }

  .opt-salon__header-line {
    position: relative;
    left: -2.0625rem;
    width: 21.375rem;
    height: 0.0625rem;
    margin-bottom: 0.8125rem;
  }

  .opt-salon__title {
    padding-left: 0;
    margin-bottom: 1.0688rem;
    font-size: 1.621rem;
    line-height: 1.56;
    letter-spacing: 0.1297rem;
  }

  .opt-salon__lead {
    padding-left: 0;
    font-size: 0.9375rem;
    line-height: 1.9;
    letter-spacing: 0.075rem;
  }

  .opt-salon__programs {
    position: relative;
    left: 50%;
    display: flex;
    width: calc(100% + 1.4375rem);
    max-width: none;
    flex-direction: column;
    margin-bottom: 3.25rem;
    gap: 1.125rem;
    transform: translateX(-50%);
  }

  .opt-salon-monthly,
  .opt-salon-timeline {
    flex: none;
    width: 100%;
    border-radius: 0.625rem;
  }

  .opt-salon-monthly {
    padding: 1.0625rem 1.375rem 1.375rem;
  }

  .opt-salon-monthly__title {
    padding-left: 0.5rem;
    margin-bottom: 0.3125rem;
    font-size: 1.1835rem;
    line-height: 1.56;
    letter-spacing: 0.0947rem;
  }

  .opt-salon-monthly__schedule {
    padding-left: 0.5rem;
    margin-bottom: 0.9375rem;
    font-size: 0.875rem;
    line-height: 1.7;
    letter-spacing: 0.07rem;
  }

  .opt-salon-monthly__schedule span {
    column-gap: 0.5rem;
  }

  .opt-salon-monthly__schedule span::before {
    flex-basis: 0.1875rem;
    width: 0.1875rem;
    height: 0.1875rem;
    margin-top: calc((1em * 1.7 - 0.1875rem) / 2);
  }

  .opt-salon-monthly__photos {
    gap: 0;
  }

  .opt-salon-monthly__photo {
    border-radius: 0.375rem;
    aspect-ratio: 327 / 192;
  }

  .opt-salon-monthly__photo:nth-child(2) {
    display: none;
  }

  .opt-salon-timeline-wrap {
    flex: none;
    width: 100%;
  }

  .opt-salon-timeline {
    padding: 1.5625rem 1rem 2.0438rem 1.5rem;
    margin-bottom: 0.625rem;
  }

  .opt-salon-timeline__title {
    padding-left: 0.375rem;
    margin-bottom: 1.125rem;
    font-size: 1.1835rem;
    line-height: 1.56;
    letter-spacing: 0.0947rem;
  }

  .opt-salon-timeline__body {
    --salon-time-w: 2.5rem;
    --salon-time-h: 1.25rem;
    --salon-time-shift: 0.0625rem;
    --salon-line-w: 0.125rem;
    --salon-arrow-extend: 0.75rem;
    --salon-arrow-arm: 0.63rem;
  }

  .opt-salon-timeline__item {
    column-gap: 0.75rem;
  }

  .opt-salon-timeline__item:nth-child(1),
  .opt-salon-timeline__item:nth-child(2),
  .opt-salon-timeline__item:nth-child(6),
  .opt-salon-timeline__item:nth-child(7) {
    --salon-item-gap: 1.025rem;
    margin-bottom: 1.025rem;
  }

  .opt-salon-timeline__item:nth-child(3),
  .opt-salon-timeline__item:nth-child(4) {
    --salon-item-gap: 1.6688rem;
    margin-bottom: 1.6688rem;
  }

  .opt-salon-timeline__item:nth-child(5) {
    --salon-item-gap: 1.9813rem;
    margin-bottom: 1.9813rem;
  }

  .opt-salon-timeline__time {
    font-size: 0.75rem;
    line-height: 1.6;
    letter-spacing: 0.06rem;
  }

  .opt-salon-timeline__description {
    font-size: 0.875rem;
    line-height: 1.45;
    letter-spacing: 0.0438rem;
  }

  .opt-salon-timeline-wrap__note {
    position: relative;
    left: 50%;
    width: 23.8125rem;
    font-size: 0.6875rem;
    line-height: 1.5;
    letter-spacing: 0;
    transform: translateX(-50%);
  }

  .opt-salon-access {
    margin-bottom: 2.8125rem;
  }

  .opt-salon-access__header {
    width: 7.9375rem;
    margin-bottom: 1.375rem;
  }

  .opt-salon-access__title {
    padding-left: 0;
    margin-bottom: 0;
    font-size: 1.1835rem;
    line-height: 1.56;
    letter-spacing: 0.0947rem;
  }

  .opt-salon-access__header-line {
    position: relative;
    left: -2.0625rem;
    width: 7.9375rem;
    height: 0.0625rem;
  }

  .opt-salon-access__columns {
    position: relative;
    left: 50%;
    width: calc(100% + 1.4375rem);
    max-width: none;
    flex-direction: column;
    transform: translateX(-50%);
  }

  .opt-salon-access__venue,
  .opt-salon-access__route {
    flex: none;
    width: 100%;
  }

  .opt-salon-access__venue {
    margin-bottom: 1.0625rem;
  }

  .opt-salon-access__building {
    width: 23.125rem;
    max-width: 100%;
    margin-bottom: 1.125rem;
    border-radius: 0.3125rem;
    aspect-ratio: 370 / 225;
  }

  .opt-salon-access__venue-title {
    align-items: flex-start;
    min-height: 2.75rem;
    margin-bottom: 0.125rem;
    column-gap: 0.5625rem;
  }

  .opt-salon-access__venue-label {
    flex-basis: 6.3125rem;
    min-height: 2.4375rem;
    border-radius: 0.1875rem;
    font-size: 1.2rem;
    line-height: 1.5;
    letter-spacing: 0.12rem;
  }

  .opt-salon-access__venue-name strong {
    margin-bottom: -0.25rem;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0.1rem;
  }

  .opt-salon-access__venue-name span {
    font-size: 0.8125rem;
    line-height: 1.5;
    letter-spacing: 0.0813rem;
  }

  .opt-salon-access__venue-note {
    margin-bottom: 1.5rem;
    font-size: 0.6875rem;
    line-height: 1.5;
    letter-spacing: 0.0344rem;
  }

  .opt-salon-access__detail {
    grid-template-columns: 6rem minmax(0, 1fr);
    border-bottom: 1px solid #efefef;
  }

  .opt-salon-access__detail:nth-child(1) {
    padding-bottom: 0.375rem;
  }

  .opt-salon-access__detail:nth-child(2) {
    padding-block: 0.4375rem 0.625rem;
  }

  .opt-salon-access__detail:nth-child(3) {
    padding-block: 0.25rem 0.5rem;
  }

  .opt-salon-access__detail:nth-child(4) {
    padding-block: 0.25rem 0.6875rem;
  }

  .opt-salon-access__detail:nth-child(5) {
    padding-top: 0.5rem;
  }

  .opt-salon-access__detail dt,
  .opt-salon-access__detail dd {
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .opt-salon-access__detail dt {
    padding-left: 0.5625rem;
  }

  .opt-salon-access__detail dd {
    letter-spacing: 0.0613rem;
  }

  .opt-salon-access__detail small {
    font-size: 0.625rem;
    line-height: 1.5;
    letter-spacing: 0.0438rem;
  }

  .opt-salon-access__change-note {
    font-size: 0.6875rem;
    line-height: 1.5;
  }

  .opt-salon-access__map {
    width: 22.75rem;
    max-width: 100%;
    margin-bottom: 0.5rem;
    border-radius: 0.3125rem;
    aspect-ratio: 364 / 198;
  }

  .opt-salon-access__transport {
    padding: 1rem calc(1.75rem - 3px) 0.9375rem;
    margin-bottom: 0.5rem;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.5;
    letter-spacing: 0;
  }

  .opt-salon-access__transport-title {
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.5;
    letter-spacing: 0.0438rem;
  }

  .opt-salon-access__route-notes {
    padding-left: 0.125rem;
    font-size: 0.6875rem;
    line-height: 1.5;
    letter-spacing: 0.0344rem;
  }

  .opt-salon-social {
    display: flex;
    max-width: none;
    flex-direction: column;
    margin-bottom: 3.5625rem;
    column-gap: 0;
  }

  .opt-salon-social__content {
    flex: none;
    width: 100%;
    min-width: 0;
    padding-top: 0;
  }

  .opt-salon-social__header {
    width: max-content;
    min-width: 10rem;
    margin-bottom: 1.1rem;
  }

  .opt-salon-social__label {
    width: max-content;
    padding-left: 0;
    margin-bottom: 0.2238rem;
    font-size: 1.0585rem;
    line-height: 1.56;
    letter-spacing: 0.0847rem;
  }

  .opt-salon-social__label small {
    font-size: 0.746rem;
    line-height: 1.56;
    letter-spacing: 0.0597rem;
  }

  .opt-salon-social__header-line {
    position: relative;
    left: -2.0625rem;
    width: 10rem;
    height: 0.0625rem;
  }

  .opt-salon-social__title {
    padding-left: 0;
    margin-bottom: 0.5rem;
    font-size: 1.621rem;
    line-height: 1.56;
    letter-spacing: 0.1297rem;
  }

  .opt-salon-social__description {
    position: relative;
    left: -0.125rem;
    padding-left: 0;
    margin-bottom: 1.4063rem;
    font-size: 0.9375rem;
    line-height: 1.9;
    letter-spacing: 0.075rem;
    white-space: normal;
  }

  .opt-salon-social__photos {
    position: relative;
    left: 50%;
    display: flex;
    width: calc(100% + 1.4375rem);
    flex: none;
    flex-direction: row;
    margin-bottom: 1.0625rem;
    gap: 0.5rem;
    transform: translateX(-50%);
  }

  .opt-salon-social__photo,
  .opt-salon-social__photo--second {
    width: calc((100% - 0.5rem) / 2);
    margin-left: 0;
    border-radius: 0.3125rem;
    aspect-ratio: 181 / 120;
  }

  .opt-salon-social__note--sp {
    width: 100%;
    padding-left: 0;
    margin: 0 auto;
    font-size: 0.75rem;
    line-height: 1.5;
    letter-spacing: 0;
    text-align: center;
  }

  .opt-salon-visitor {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin-inline: auto;
    /*
      Pull up by (buttonBottom - overlap):
      1.625 + 0.2338 + 5.1875 - 2.5463 = 4.5rem
      so the gold button straddles the MTLC seam and paints above the navy bg.
    */
    transform: translateY(-4.5rem);
  }

  .opt-salon-visitor__label {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    width: 14.25rem;
    margin-bottom: 0;
    font-size: 0.9574rem;
    line-height: 1.76;
    letter-spacing: 0.1053rem;
    transform: translateX(-50%);
  }

  .opt-salon-visitor__link {
    position: absolute;
    z-index: 1;
    top: 1.625rem;
    right: 0;
    left: 0;
  }

  .opt-salon-visitor__cta-artwork {
    width: 85.8%;
    height: auto;
    margin-inline: auto;
  }

  .opt-salon-visitor .opt-cta-fee {
    position: absolute;
    z-index: 1;
    top: 7.2rem;
    right: 0;
    left: 0;
    width: 85.8%;
    margin: 0 auto;
    font-size: 0.625rem;
    letter-spacing: 0.04rem;
  }
}
@layer opt-mtlc-font {}

.opt-mtlc {
  z-index: 1;
  /* Same as .opt-voice: keep exclusion blends inside this section's backdrop */
  isolation: isolate;
  overflow: visible;
  padding-block: 11.9564rem 11.4091rem;
  color: #fff;
  background: linear-gradient(to left, #004c80, #001e55);
}

.opt-mtlc > .opt-salon-visitor {
  /* Above section background / ::before texture */
  z-index: 5;
}

.opt-mtlc::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../img/common-paper-texture.webp");
  background-repeat: repeat;
  background-position: top left;
  background-size: 64rem 64rem;
  opacity: 0.08;
  content: "";
  pointer-events: none;
}

.opt-mtlc::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 5.1306rem;
  border-radius: 5rem 5rem 0 0;
  background: #fff;
  content: "";
  pointer-events: none;
}

.opt-mtlc__inner {
  /* No z-index: a stacking context here prevents .opt-mtlc__word
     (mix-blend-mode: exclusion) from blending with the section gradient,
     which made MTLC look darker than VOICE. */
  width: 90%;
  max-width: 73.125rem;
  margin-inline: auto;
}

.opt-mtlc__header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 19.2075rem;
  padding-inline: 2.5625rem;
  margin-bottom: 3.8931rem;
}

.opt-mtlc__glow {
  position: absolute;
  top: -12.5245rem;
  left: 22.5625rem;
  z-index: 0;
  width: 36.8986rem;
  height: 39.8057rem;
  display: flex;
  align-items: center;
  justify-content: center;
  mix-blend-mode: screen;
  pointer-events: none;
}

.opt-mtlc__glow-core {
  position: relative;
  width: 19.6593rem;
  height: 35.068rem;
  overflow: visible;
  transform: rotate(-142.67deg) scaleY(-1);
}

.opt-mtlc__glow-image {
  position: absolute;
  top: -16.04%;
  left: -28.61%;
  width: 157.22%;
  max-width: none;
  height: 132.08%;
  object-fit: fill;
  opacity: 0.12;
}

.opt-mtlc__word {
  position: absolute;
  top: -12.0869rem;
  left: 2.125rem;
  /*
    VOICE uses color:#0f2e63 + exclusion + opacity:.6 on the mid gradient.
    MTLC sits on the darker left side of the same gradient, so the same
    exclusion recipe reads much muddier. soft-light white is tuned so the
    rendered watermark matches VOICE’s apparent color on this backdrop.
  */
  color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 11.8519rem;
  font-weight: 700;
  line-height: 1.76;
  letter-spacing: 1.3037rem;
  mix-blend-mode: soft-light;
  opacity: 0.3;
  pointer-events: none;
}

.opt-mtlc__copy {
  flex: 0 1 28.75rem;
  min-width: 0;
  padding-top: 1.8256rem;
}

.opt-mtlc__title {
  margin-bottom: 0.9188rem;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.1125rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.1056rem;
}

.opt-mtlc__nowrap {
  white-space: nowrap;
}

.opt-mtlc__lead {
  width: 30rem;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2188rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.0975rem;
}

.opt-mtlc__portraits {
  display: flex;
  flex: 0 1 34.125rem;
  min-width: 0;
  align-items: flex-start;
  gap: 0.975rem;
}

.opt-mtlc__portrait-slot {
  flex: 1 1 0;
  min-width: 0;
  opacity: 0;
  transform: translate3d(0, 1.75rem, 0);
}

.opt-mtlc__portraits.is-revealed .opt-mtlc__portrait-slot {
  animation: opt-mtlc-portrait-rise 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.opt-mtlc__portraits.is-revealed .opt-mtlc__portrait-slot--3 {
  animation-delay: 0ms;
}

.opt-mtlc__portraits.is-revealed .opt-mtlc__portrait-slot--2 {
  animation-delay: 140ms;
}

.opt-mtlc__portraits.is-revealed .opt-mtlc__portrait-slot--1 {
  animation-delay: 280ms;
}

@keyframes opt-mtlc-portrait-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 1.75rem, 0);
  }

  62% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .opt-mtlc__portrait-slot {
    opacity: 1;
    transform: none;
  }

  .opt-mtlc__portraits.is-revealed .opt-mtlc__portrait-slot {
    animation: none;
  }
}

.opt-mtlc__portrait-slot--1 {
  padding-top: 3.4125rem;
}

.opt-mtlc__portrait-slot--2 {
  padding-top: 1.4625rem;
}

.opt-mtlc__portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 171.6 / 252.72;
  overflow: hidden;
  border-radius: 0.4875rem;
}

.opt-mtlc__portrait-image {
  object-position: center bottom;
}

.opt-mtlc__portrait-slot--2 .opt-mtlc__portrait-image {
  height: 100%;
}

.opt-mtlc__portrait-slot--3 .opt-mtlc__portrait-image {
  transform: scale(1.216);
  transform-origin: center bottom;
}

.opt-mtlc__sessions {
  margin-bottom: 5.775rem;
}

.opt-mtlc__sessions-header,
.opt-mtlc__attributes-header {
  position: relative;
  min-height: 3.1494rem;
}

.opt-mtlc__sessions-header {
  margin-bottom: 2.2944rem;
}

.opt-mtlc__heading-line {
  position: absolute;
  bottom: 0;
  display: block;
  height: 0.0813rem;
  background: #fff;
}

.opt-mtlc__heading-line--sessions {
  left: 1.4375rem;
  width: 17.5rem;
}

.opt-mtlc__heading-line--attributes {
  left: 0;
  width: 10.9563rem;
  transform: rotate(-0.55deg);
}

.opt-mtlc__subheading {
  padding-left: 2.9143rem;
  color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 1.4625rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.117rem;
}

.opt-mtlc__subheading--attributes {
  padding-left: 1.0393rem;
}

.opt-mtlc__sessions-body {
  padding-left: 2.8875rem;
}

.opt-mtlc__session-list {
  display: grid;
  width: 100%;
  max-width: 63.4124rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 0.7708rem;
  row-gap: 1.1438rem;
}

.opt-mtlc-session {
  min-width: 0;
  min-height: 12.7563rem;
  border-radius: 0.4063rem;
  background: #eff5f9;
}

.opt-mtlc-session__inner {
  display: flex;
  min-height: 12.7563rem;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.3rem 1.032rem 1.6813rem 1.3401rem;
}

.opt-mtlc-session__category {
  display: inline-flex;
  min-height: 1.95rem;
  align-items: center;
  padding-inline: 0.52rem;
  margin-bottom: 0.4344rem;
  border-radius: 0.1625rem;
  color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 1.04rem;
  font-weight: 700;
  line-height: 1.46;
  letter-spacing: 0.0832rem;
  background: linear-gradient(to left, #001e55, #004c80);
}

.opt-mtlc-session__title {
  color: transparent;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 1.2025rem;
  font-weight: 700;
  line-height: 1.46;
  letter-spacing: 0.0962rem;
  background: linear-gradient(to left, #001e55, #004c80);
  background-clip: text;
  -webkit-background-clip: text;
}

.opt-mtlc-session__nowrap {
  white-space: nowrap;
}

.opt-mtlc-session__meta {
  color: #001e55;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 0.975rem;
  font-weight: 500;
  line-height: 1.46;
  letter-spacing: 0.078rem;
  white-space: nowrap;
}

/* Figma 39:3432 / 15:617 — tighten 「2・」 only */
.opt-mtlc-session__meta-tight {
  letter-spacing: -0.22rem;
}

.opt-mtlc__attributes-header {
  margin-bottom: 2.5375rem;
}

.opt-mtlc__audience {
  display: flex;
  min-height: 13.0965rem;
  gap: 1.5625rem;
  padding-inline: 1.5625rem 1.5187rem;
}

.opt-mtlc-audience {
  flex: 1 1 0;
  min-width: 0;
  opacity: 0;
  transform: translate3d(0, 1.75rem, 0);
}

.opt-mtlc__audience.is-revealed .opt-mtlc-audience {
  animation: opt-mtlc-audience-rise 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.opt-mtlc__audience.is-revealed .opt-mtlc-audience--roles {
  animation-delay: 0ms;
}

.opt-mtlc__audience.is-revealed .opt-mtlc-audience--industry {
  animation-delay: 140ms;
}

.opt-mtlc__audience.is-revealed .opt-mtlc-audience--demographics {
  animation-delay: 280ms;
}

@keyframes opt-mtlc-audience-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 1.75rem, 0);
  }

  62% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .opt-mtlc-audience {
    opacity: 1;
    transform: none;
  }

  .opt-mtlc__audience.is-revealed .opt-mtlc-audience {
    animation: none;
  }
}

.opt-mtlc-audience--demographics {
  display: flex;
  flex-grow: 1.034;
  gap: 1.25rem;
}

.opt-mtlc-audience__title {
  display: flex;
  align-items: center;
  color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.86;
  letter-spacing: 0.07rem;
  white-space: nowrap;
}

.opt-mtlc-audience__title::before {
  width: 0.55rem;
  height: 0.55rem;
  flex: 0 0 0.55rem;
  margin-right: 0.3813rem;
  background: url("../img/mtlc-session-card-frame.svg") center / contain no-repeat;
  content: "";
}

.opt-mtlc-audience__title::after {
  height: 1px;
  flex: 1 1 auto;
  margin-inline-start: 0.625rem;
  content: "";
}

.opt-mtlc-audience--roles .opt-mtlc-audience__title::after,
.opt-mtlc-audience--industry .opt-mtlc-audience__title::after,
.opt-mtlc-age .opt-mtlc-audience__title::after,
.opt-mtlc-gender .opt-mtlc-audience__title::after {
  background: #fff;
}

/* Figma Line 504 / 505 / 507 / 506 */
.opt-mtlc-audience--roles .opt-mtlc-audience__title::after {
  max-width: 12.0625rem;
}

.opt-mtlc-audience--industry .opt-mtlc-audience__title::after {
  max-width: 13.0625rem;
}

.opt-mtlc-age .opt-mtlc-audience__title::after {
  flex: 0 0 1.75rem;
  width: 1.75rem;
  max-width: 1.75rem;
}

.opt-mtlc-gender .opt-mtlc-audience__title::after {
  flex: 0 0 2.4375rem;
  width: 2.4375rem;
  max-width: 2.4375rem;
}

.opt-mtlc-audience--roles .opt-mtlc-audience__title,
.opt-mtlc-age .opt-mtlc-audience__title {
  margin-bottom: 1.35rem;
}

.opt-mtlc-roles {
  width: 20.375rem;
  max-width: 100%;
  margin-left: 0.9313rem;
}

.opt-mtlc-roles__image {
  width: 20.375rem;
  max-width: 100%;
  height: auto;
}

.opt-mtlc-industry {
  padding-top: 1.1237rem;
}

.opt-mtlc-industry__image {
  width: 19.6875rem;
  max-width: 100%;
  height: auto;
}

.opt-mtlc-age,
.opt-mtlc-gender {
  flex: 1 1 0;
  min-width: 0;
}

.opt-mtlc-age__pie {
  width: 10.5625rem;
  max-width: 100%;
  margin-inline: auto;
}

.opt-mtlc-age__pie-image {
  width: 10.5625rem;
  max-width: 100%;
  height: auto;
}

.opt-mtlc-gender__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 1.3201rem;
}

.opt-mtlc-gender__item {
  display: flex;
  width: 10.6875rem;
  max-width: 100%;
  min-height: 4.6875rem;
  align-items: center;
  padding-inline: 1.1875rem 1.55rem;
  border: 0.1875rem solid rgba(255, 255, 255, 0.5);
  border-radius: 0.4125rem;
  color: #001e55;
  background: #ffffff;
  background-clip: padding-box;
}

.opt-mtlc-gender__icon {
  position: relative;
  width: 2.75rem;
  height: 3.0625rem;
  flex: 0 1 2.75rem;
  margin-right: 0.75rem;
}

.opt-mtlc-gender__icon-image {
  width: 100%;
  height: 100%;
}

.opt-mtlc-gender__value {
  font-family: "Gidole", sans-serif;
  font-size: 2.085rem;
  font-weight: 700;
  font-synthesis-weight: auto;
  line-height: 1.06;
  letter-spacing: 0.1668rem;
  white-space: nowrap;
}

.opt-mtlc-gender__item--female .opt-mtlc-gender__value {
  font-size: 1.835rem;
  letter-spacing: 0.1468rem;
}

.opt-mtlc-gender__value small {
  font-size: 1.46rem;
  letter-spacing: 0.1168rem;
}

@media (width >= 768px) and (width < 1100px) {
  .opt-mtlc__header {
    gap: 1rem;
    padding-inline: 1rem;
  }

  .opt-mtlc__word {
    left: 1.5rem;
  }

  .opt-mtlc__lead {
    width: auto;
  }

  .opt-mtlc__copy {
    flex: 0 0 30rem;
  }

  .opt-mtlc__portraits {
    flex: 1 1 0;
    gap: 0.5rem;
  }

  .opt-mtlc-session__nowrap {
    white-space: normal;
  }

  .opt-mtlc__sessions-body {
    padding-left: 1.5rem;
  }

  .opt-mtlc__audience {
    gap: 1rem;
    padding-inline: 1rem;
  }

  .opt-mtlc-audience--demographics {
    gap: 0.75rem;
  }

  .opt-mtlc-gender__item {
    padding-inline: 0.5rem;
  }

  .opt-mtlc-gender__icon {
    margin-right: 0.35rem;
  }
}

@media (width >= 768px) and (width < 900px) {
  .opt-mtlc__copy {
    flex-basis: 58%;
  }

  .opt-mtlc__title {
    font-size: 1.65rem;
  }

  .opt-mtlc__lead {
    font-size: 0.92rem;
    letter-spacing: 0.0736rem;
  }

  .opt-mtlc-session__meta {
    font-size: 0.7rem;
    letter-spacing: 0.04rem;
    white-space: normal;
  }
}

@media (width < 768px) {
  .opt-mtlc {
    padding-block: 7.4375rem 6.5625rem;
  }

  .opt-mtlc::after {
    bottom: -2.075rem;
    height: 3.8125rem;
    border-radius: 1.875rem 1.875rem 0 0;
  }

  .opt-mtlc__inner {
    width: 93.2367%;
    max-width: 24.125rem;
  }

  .opt-mtlc__header {
    flex-direction: column;
    min-height: 0;
    justify-content: flex-start;
    padding-inline: 1.0625rem;
    margin-bottom: 2.875rem;
  }

  .opt-mtlc__glow {
    top: -11.9375rem;
    left: 3.1875rem;
  }

  .opt-mtlc__word {
    top: -5.75rem;
    left: 1rem;
    font-size: 5.1449rem;
    letter-spacing: 0.566rem;
  }

  .opt-mtlc__copy {
    width: 100%;
    flex: none;
    padding-top: 0;
    margin-bottom: 1.7875rem;
  }

  .opt-mtlc__title {
    margin-bottom: 0.6625rem;
    font-size: 1.625rem;
    letter-spacing: 0.0813rem;
  }

  .opt-mtlc__lead {
    width: 22.5rem;
    max-width: none;
    font-size: 0.9375rem;
    letter-spacing: 0.075rem;
  }

  .opt-mtlc__portraits {
    width: 21.875rem;
    max-width: 100%;
    flex: none;
    gap: 0.625rem;
    margin-inline: auto;
  }

  .opt-mtlc__portrait-slot--1 {
    padding-top: 2.1875rem;
  }

  .opt-mtlc__portrait-slot--2 {
    padding-top: 0.9375rem;
  }

  .opt-mtlc__portrait {
    border-radius: 0.3125rem;
  }

  .opt-mtlc__sessions {
    margin-bottom: 4.1875rem;
  }

  .opt-mtlc__sessions-header,
  .opt-mtlc__attributes-header {
    min-height: 2.375rem;
  }

  .opt-mtlc__sessions-header,
  .opt-mtlc__attributes-header {
    margin-bottom: 1.8125rem;
  }

  .opt-mtlc__heading-line {
    height: 0.0625rem;
  }

  .opt-mtlc__heading-line--sessions {
    left: -0.875rem;
    width: 14.125rem;
  }

  .opt-mtlc__heading-line--attributes {
    left: -0.875rem;
    width: 9.4375rem;
    transform: none;
  }

  .opt-mtlc__subheading,
  .opt-mtlc__subheading--attributes {
    padding-left: 0.9341rem;
    font-size: 1.125rem;
    letter-spacing: 0.09rem;
  }

  .opt-mtlc__sessions-body {
    padding-left: 0;
  }

  .opt-mtlc__session-list {
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.625rem;
    row-gap: 0.75rem;
  }

  .opt-mtlc-session,
  .opt-mtlc-session__inner {
    min-height: 9.8125rem;
  }

  .opt-mtlc-session {
    border-radius: 0.3125rem;
  }

  .opt-mtlc-session__inner {
    padding: 1rem 0.875rem 1.2944rem 0.9413rem;
  }

  .opt-mtlc-session__category {
    min-height: 1.5rem;
    padding-inline: 0.4019rem;
    margin-bottom: 0.3331rem;
    border-radius: 0.125rem;
    font-size: 0.8rem;
    letter-spacing: 0.064rem;
  }

  .opt-mtlc-session__title {
    padding-left: 0.0894rem;
    font-size: 0.925rem;
    letter-spacing: 0.074rem;
  }

  .opt-mtlc-session__meta {
    padding-left: 0.0894rem;
    font-size: 0.75rem;
    letter-spacing: 0.06rem;
  }

  .opt-mtlc__audience {
    min-height: 0;
    flex-direction: column;
    gap: 0;
    padding-inline: 1.125rem 0.1875rem;
  }

  .opt-mtlc-audience {
    flex: none;
  }

  .opt-mtlc-audience--roles {
    margin-bottom: 2.5285rem;
  }

  .opt-mtlc-audience--industry {
    margin-bottom: 2.7441rem;
  }

  .opt-mtlc-audience--demographics {
    flex-grow: 0;
    gap: 1.3125rem;
  }

  .opt-mtlc-industry {
    width: 20.8125rem;
    max-width: 100%;
    padding: 1.3083rem 0 0 1.125rem;
  }

  .opt-mtlc-roles {
    width: 20.375rem;
    max-width: calc(100% - 0.9313rem);
  }

  .opt-mtlc-age {
    flex: 0 0 10.5625rem;
  }

  .opt-mtlc-gender {
    flex: 1 1 0;
  }

  .opt-mtlc-gender__list {
    padding: 1.3201rem 0 0 0.375rem;
  }
}
.opt-global {
  /* Above .opt-mtlc (z-index:1) so GLOBAL isn't covered by mtlc::after white seam */
  z-index: 2;
  padding-block: 2.0625rem 5.4131rem;
  color: #001e55;
  background: #ffffff;
}

.opt-global__inner {
  position: relative;
  isolation: isolate;
  width: 90%;
  max-width: 68.7rem;
  margin-inline: auto;
  overflow: visible;
}

.opt-global__header {
  position: relative;
  margin-bottom: 0.1812rem;
  overflow: visible;
}

.opt-global__word {
  position: absolute;
  top: -5.5056rem;
  right: -9.8497rem;
  z-index: 0;
  color: transparent;
  /* Gidole ≈ DIN 2014; Zen Kaku is wider and clips under background-clip:text */
  /* font-family: "Gidole", sans-serif; */
  font-size: 10.6646rem;
  font-weight: 700;
  line-height: 1.56;
  letter-spacing: 1.5997rem;
  background: linear-gradient(to left, #001e55, #004c80);
  background-clip: text;
  opacity: 0.05;
  pointer-events: none;
  -webkit-background-clip: text;
}

.opt-global__eyebrow-group {
  position: relative;
  z-index: 2;
  padding-left: 2.8125rem;
  margin-bottom: 2.3853rem;
}

.opt-global__eyebrow-group::after {
  position: absolute;
  bottom: -0.4315rem;
  left: 1.625rem;
  width: 31.5625rem;
  height: 0.0813rem;
  content: "";
  pointer-events: none;
}

.opt-global__eyebrow {
  color: transparent;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 1.3761rem;
  font-weight: 700;
  line-height: 1.56;
  letter-spacing: 0.1101rem;
  background: linear-gradient(to left, #001e55, #004c80);
  background-clip: text;
  -webkit-background-clip: text;
}

.opt-global__copy {
  position: relative;
  z-index: 2;
  padding-left: 4.3062rem;
}

.opt-global__title {
  margin-bottom: 0.4718rem;
  color: transparent;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 2.8386rem;
  font-weight: 700;
  line-height: 1.56;
  letter-spacing: 0.2271rem;
  background: linear-gradient(to left, #001e55, #004c80);
  background-clip: text;
  -webkit-background-clip: text;
}

.opt-global__lead {
  color: #001e55;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 1.2188rem;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.0975rem;
}

.opt-global__program {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  padding-inline: 2.9375rem 2.825rem;
  margin-bottom: 2.6818rem;
  gap: 3.9875rem;
}

.opt-global__map {
  position: relative;
  z-index: 1;
  flex: 1.2565 1 0;
  min-width: 0;
  aspect-ratio: 525.2 / 315.0927;
  background: transparent;
}

.opt-global__map-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}

.opt-global__itinerary {
  display: flex;
  min-width: 0;
  padding-top: 2.6875rem;
  flex: 1 1 0;
  flex-direction: column;
  gap: 0.75rem;
}

.opt-global-itinerary {
  display: flex;
  min-width: 0;
  min-height: 4.725rem;
  align-items: center;
  gap: 0.9rem;
}

.opt-global-itinerary__duration {
  display: flex;
  width: 4.725rem;
  height: 4.725rem;
  flex: 0 0 4.725rem;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: 0.09rem;
  background-image: url("../img/global-photo-frame.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  white-space: nowrap;
}

.opt-global-itinerary__detail {
  min-width: 0;
  flex: 1;
  color: #001e55;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.09rem;
}

.opt-global-itinerary__place {
  position: relative;
  padding-left: 1.35rem;
}

.opt-global-itinerary__pin {
  position: absolute;
  top: 0.0746rem;
  left: -0.075rem;
  width: 1.0378rem;
  height: 1.4907rem;
}

.opt-global-itinerary__nowrap {
  white-space: nowrap;
}

.opt-global__gallery {
  display: flex;
  gap: 1.2rem;
}

.opt-global__photo {
  min-width: 0;
  overflow: hidden;
  flex: 1 1 0;
  aspect-ratio: 353.6 / 194.48;
  border-radius: 0.325rem;
}

.opt-global__photo-image {
  height: 100%;
}

@media (width <= 1000px) {
  .opt-global-itinerary__nowrap {
    white-space: normal;
  }
}

@media (width < 768px) {
  .opt-global {
    padding-block: 2.375rem 2.5rem;
  }

  .opt-global__inner {
    width: 90%;
    max-width: 21.75rem;
  }

  .opt-global__header {
    /* Pull map up toward the lead (Figma SP overlap) */
    margin-bottom: -0.65rem;
    overflow: visible;
  }

  .opt-global__word {
    /* Figma 15:699 — vertical GLOBAL; widen/lower so A/L sit behind the map */
    top: 6.775rem;
    right: -11.25rem;
    z-index: 0;
    display: flex;
    width: max-content;
    min-width: 24.5rem;
    height: 7.125rem;
    align-items: center;
    justify-content: center;
    overflow: visible;
    font-size: 4.5585rem;
    line-height: 1.56;
    letter-spacing: 0.8205rem;
    white-space: nowrap;
    opacity: 1;
    background: linear-gradient(to left, rgb(0 30 85 / 5%), rgb(0 76 128 / 5%));
    background-clip: text;
    -webkit-background-clip: text;
    transform: rotate(90deg);
    transform-origin: center;
  }

  .opt-global__eyebrow-group,
  .opt-global__copy {
    z-index: 3;
  }

  .opt-global__eyebrow-group {
    max-width: 15.3125rem;
    padding-left: 0;
    margin-bottom: 1.8225rem;
  }

  .opt-global__eyebrow-group::after {
    bottom: -0.3225rem;
    left: -2.0625rem;
    width: 15.3125rem;
    height: 1px;
  }

  .opt-global__eyebrow {
    font-size: 1.0585rem;
    line-height: 1.56;
    letter-spacing: 0.0847rem;
  }

  .opt-global__copy {
    padding-left: 0;
  }

  .opt-global__title {
    margin-bottom: 0.3437rem;
    font-size: 2.1835rem;
    line-height: 1.56;
    letter-spacing: 0.1747rem;
  }

  .opt-global__lead {
    padding-bottom: 0.125rem;
    font-size: 0.9375rem;
    line-height: 1.9;
    letter-spacing: 0.075rem;
  }

  .opt-global__program {
    z-index: 1;
    flex-direction: column;
    padding-inline: 0;
    margin-bottom: 1.75rem;
    gap: 0;
  }

  .opt-global__map {
    /* Avoid transform so GLOBAL shows through the transparent map */
    position: relative;
    z-index: 1;
    left: auto;
    width: 25.25rem;
    max-width: none;
    margin-top: -0.35rem;
    margin-bottom: -0.25rem;
    margin-inline: calc(50% - 12.625rem);
    flex: none;
    transform: none;
    background: transparent;
  }

  .opt-global__itinerary {
    position: relative;
    left: 50%;
    width: 22.25rem;
    padding-top: 0;
    flex: none;
    gap: 0.625rem;
    transform: translateX(-50%);
  }

  .opt-global-itinerary {
    min-height: 3.9375rem;
    gap: 0.75rem;
  }

  .opt-global-itinerary__duration {
    width: 3.9375rem;
    height: 3.9375rem;
    flex-basis: 3.9375rem;
    font-size: 0.9375rem;
    line-height: 1.9;
    letter-spacing: 0.075rem;
  }

  .opt-global-itinerary__detail {
    font-size: 0.9375rem;
    line-height: 1.5;
    letter-spacing: 0.075rem;
  }

  .opt-global-itinerary__place {
    padding-left: 1.25rem;
  }

  .opt-global-itinerary__pin {
    top: 0.0625rem;
    left: -0.0625rem;
    width: 0.8648rem;
    height: 1.2422rem;
  }

  .opt-global-itinerary__nowrap {
    white-space: nowrap;
  }

  .opt-global__gallery {
    display: grid;
    width: 21.25rem;
    grid-template-columns: repeat(2, 10.3125rem);
    column-gap: 0.5625rem;
    row-gap: 0.5rem;
  }

  .opt-global__photo {
    border-radius: 0.3125rem;
  }

  .opt-global__photo--1 {
    width: 21.25rem;
    grid-column: 1 / -1;
  }

  .opt-global__photo--2,
  .opt-global__photo--3 {
    aspect-ratio: 165 / 121;
  }
}
.opt-voice {
  isolation: isolate;
  overflow: clip;
  padding-block: 8.9131rem 10.0619rem;
  background: linear-gradient(to left, #004c80, #001e55);
}

.opt-voice::before {
  position: absolute;
  inset: 0;
  background-image: url("../img/common-paper-texture.webp");
  background-position: left top;
  background-size: 83.2rem 83.2rem;
  content: "";
  opacity: 0.08;
  pointer-events: none;
}

.opt-voice__transition {
  position: absolute;
  right: 0;
  bottom: -4.5rem;
  left: 0;
  height: 9rem;
  border-radius: 5rem 5rem 0 0;
  background: #fff;
  pointer-events: none;
}

.opt-voice__glow {
  position: absolute;
  top: -4.3806rem;
  right: 21.525rem;
  display: flex;
  width: 37.6rem;
  height: 43.1261rem;
  align-items: center;
  justify-content: center;
  mix-blend-mode: screen;
  pointer-events: none;
}

.opt-voice__glow-core {
  position: relative;
  width: 22.0025rem;
  height: 37.0946rem;
  flex: 0 0 auto;
  overflow: visible;
  transform: rotate(-150.01deg) scaleY(-1);
}

.opt-voice__glow-image {
  position: absolute;
  inset: -4.0625rem;
  width: 30.1275rem;
  max-width: none;
  height: 45.2196rem;
  object-fit: fill;
  opacity: 0.12;
}

.opt-voice__inner {
  width: 90%;
  max-width: 60.75rem;
  margin-inline: auto;
}

.opt-voice__header {
  position: relative;
  margin-bottom: 2.8831rem;
  text-align: center;
}

.opt-voice__word {
  z-index: 0;
  top: -10.1687rem;
  left: 50%;
  color: #0f2e63;
  line-height: 1.76;
  mix-blend-mode: exclusion;
  opacity: 0.6;
  transform: translateX(-50%) scaleX(0.959389);
}

.opt-voice__title {
  position: relative;
  z-index: 1;
  color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 2.1938rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.1755rem;
}

.opt-voice__cards-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 0.25rem;
}

.opt-voice__cards.swiper {
  position: relative;
  width: 100%;
  overflow: visible;
}

/* PC: 3枚横並びの静的表示（Swiperなし） */
.opt-voice__cards .swiper-wrapper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 1rem;
  width: 100%;
  transform: none;
}

.opt-voice__nav {
  position: absolute;
  z-index: 2;
  /* Vertically center on the 421px card */
  top: 12.0625rem;
  display: none;
  width: 2.1875rem;
  height: 2.1875rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #a08e03;
  cursor: pointer;
  appearance: none;
}

.opt-voice__nav::before {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  box-sizing: border-box;
  border-right: 0.125rem solid #fff;
  border-bottom: 0.125rem solid #fff;
  content: "";
}

.opt-voice__nav--prev {
  left: calc(50% - 11.3438rem);
}

.opt-voice__nav--prev::before {
  margin-left: 0.1875rem;
  transform: rotate(135deg);
}

.opt-voice__nav--next {
  right: calc(50% - 11.3438rem);
}

.opt-voice__nav--next::before {
  margin-right: 0.1875rem;
  transform: rotate(-45deg);
}

.opt-voice__cards .opt-voice-card.swiper-slide {
  box-sizing: border-box;
  width: auto;
  height: auto;
  min-height: 26.3125rem;
  margin: 0;
  padding: 0.6875rem 0.625rem 1.25rem;
  border-radius: 0.625rem;
  background: #fff;
}

.opt-voice-card__media {
  position: relative;
  /* margin-bottom: 0.3rem; */
}

.opt-voice-card__photo-frame {
  aspect-ratio: 293 / 164;
  overflow: hidden;
  border-radius: 0.5rem;
}

.opt-voice-card__photo-note {
  position: absolute;
  right: 0;
  top: 100%;
  margin: 0.225rem 0 0;
  color: #001e55;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.03rem;
  pointer-events: none;
}

.opt-voice-card__content {
  margin-right: 0.9688rem;
  margin-left: 1rem;
}

/* 2枚目本文は1行目が他カードより長いため、改行位置合わせで本文幅のみ広げて左右中央寄せ */
.opt-voice-card--2 .opt-voice-card__content {
  margin-right: 0.55rem;
  margin-left: 0.55rem;
}

.opt-voice-card__header {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: flex-end;
  height: 5.15rem;
  min-height: 5.15rem;
  padding-bottom: 0.5875rem;
  margin-bottom: 0.8125rem;
}

.opt-voice-card__header::after {
  position: absolute;
  bottom: 0;
  left: -0.2249rem;
  width: calc(100% + 0.2249rem);
  height: 1px;
  background: #001e55;
  content: "";
  pointer-events: none;
}

.opt-voice-card__name {
  color: #001e55;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06rem;
}

.opt-voice-card__meta {
  color: #001e55;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 0.81rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.06rem;
}

.opt-voice-card__description {
  color: #001e55;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.07rem;
}

.opt-voice__note {
  color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.06rem;
  text-align: center;
}

.opt-voice__pagination {
  display: none;
  width: 3.6989rem;
  height: 0.5rem;
  align-items: center;
  justify-content: space-between;
  margin: 1.3375rem auto 0;
  gap: 0;
}

.opt-voice__pagination .swiper-pagination-bullet {
  flex: 0 0 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  margin: 0 !important;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  opacity: 0.3;
  cursor: pointer;
  appearance: none;
  --swiper-pagination-bullet-horizontal-gap: 0px;
}

.opt-voice__pagination .swiper-pagination-bullet-active {
  opacity: 1;
}

@media (width < 768px) {
  .opt-voice {
    padding-block: 4.9375rem 7.1263rem;
  }

  .opt-voice::before {
    background-size: 64rem 64rem;
  }

  .opt-voice__transition {
    bottom: 0;
    height: 3.8125rem;
    border-radius: 1.875rem 1.875rem 0 0;
  }

  .opt-voice__glow {
    top: -1.3514rem;
    right: auto;
    left: 38.1731rem;
    width: 28.9231rem;
    height: 33.1739rem;
  }

  .opt-voice__inner {
    max-width: 19.5625rem;
  }

  .opt-voice__header {
    margin-bottom: 1.7563rem;
  }

  .opt-voice__word {
    top: -4.9375rem;
    font-size: 5.1449rem;
    line-height: 1.76;
    letter-spacing: 0.566rem;
    transform: translateX(-50%);
  }

  .opt-voice__title {
    font-size: 1.6875rem;
    line-height: 1.7;
    letter-spacing: 0.135rem;
  }

  .opt-voice__cards-wrap {
    left: 50%;
    width: 100vw;
    max-width: 100vw;
    transform: translateX(-50%);
  }

  .opt-voice__cards.swiper {
    overflow: hidden;
  }

  .opt-voice__cards .swiper-wrapper {
    display: flex;
    grid-template-columns: none;
    gap: 0;
  }

  .opt-voice__cards .opt-voice-card.swiper-slide {
    width: 19.5625rem;
  }

  .opt-voice__nav {
    display: flex;
  }

  .opt-voice__pagination {
    display: flex;
  }

  .opt-voice-card__header::after {
    height: 1px;
    background: #001e55;
    transform: none;
  }
}
.opt-members {
  padding-block: 0.4375rem 7.6233rem;
  color: #001e55;
  background: #ffffff;
}

.opt-members__inner {
  width: 90%;
  max-width: 67.5rem;
  margin-inline: auto;
}

.opt-members__word {
  z-index: 0;
  top: 23.5625rem;
  left: -8.9125rem;
  color: transparent;
  line-height: 1.56;
  background: linear-gradient(to left, #001e55, #004c80);
  background-clip: text;
  opacity: 0.05;
  -webkit-background-clip: text;
}

.opt-members__header {
  position: relative;
  z-index: 1;
  margin-bottom: 4.5098rem;
  text-align: center;
}

.opt-members__title {
  color: transparent;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 2.3511rem;
  font-weight: 700;
  line-height: 1.56;
  letter-spacing: 0.1881rem;
  background: linear-gradient(to left, #001e55, #004c80);
  background-clip: text;
  -webkit-background-clip: text;
}

.opt-members__body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 5.7194rem;
}

.opt-members-group {
  display: flex;
  min-width: 0;
  align-items: flex-start;
}

.opt-members-group--unsuited {
  padding-top: 1.9375rem;
  flex: 0 1 27.2024rem;
  gap: 1.3162rem;
}

.opt-members-group--suited {
  padding-bottom: 2.5071rem;
  flex: 0 1 33.7838rem;
  gap: 0.8532rem;
}

.opt-members-group__header {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  flex-direction: column;
}

.opt-members-group--unsuited .opt-members-group__header {
  width: 1.6819rem;
  padding-top: 0.2194rem;
}

.opt-members-group--suited .opt-members-group__header {
  width: 1.9622rem;
  padding-top: 0.2559rem;
}

.opt-members-group__arrow {
  position: relative;
  display: block;
  flex: none;
}

.opt-members-group--unsuited .opt-members-group__arrow {
  width: 1.0769rem;
  height: 2.0475rem;
  margin-bottom: 0.5119rem;
}

.opt-members-group--suited .opt-members-group__arrow {
  width: 1.2565rem;
  height: 2.3888rem;
  margin-bottom: 1.0237rem;
}

.opt-members-group__arrow-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: none;
  transform: translate(-50%, -50%) rotate(90deg);
}

.opt-members-group--unsuited .opt-members-group__arrow-image {
  width: 2.1206rem;
  height: 1.077rem;
}

.opt-members-group--suited .opt-members-group__arrow-image {
  width: 2.4741rem;
  height: 1.2565rem;
}

.opt-members-group__title {
  color: transparent;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: 1.16;
  writing-mode: vertical-rl;
  background: linear-gradient(to left, #001e55, #004c80);
  background-clip: text;
  -webkit-background-clip: text;
}

.opt-members-group--unsuited .opt-members-group__title {
  font-size: 1.2384rem;
  letter-spacing: 0.0991rem;
}

.opt-members-group--suited .opt-members-group__title {
  font-size: 1.6155rem;
  letter-spacing: 0.1292rem;
}

.opt-members-panel {
  position: relative;
  min-width: 0;
  flex: 1;
}

.opt-members-panel--unsuited {
  padding: 1.9744rem 1.6875rem 1.717rem 1.9012rem;
  background: #cad4d9;
  border-radius: 1.0969rem;
}

.opt-members-panel--suited {
  padding: 3.4978rem 1.0203rem 3.5149rem 1.9622rem;
  background: #eff5f9;
  border-radius: 1.2797rem;
}

.opt-members-panel__item {
  display: flex;
  min-width: 0;
  align-items: center;
}

.opt-members-panel__icon {
  flex: none;
}

.opt-members-panel--unsuited .opt-members-panel__icon {
  width: 1.7769rem;
  height: 1.7769rem;
  margin-right: 0.5265rem;
}

.opt-members-panel--suited .opt-members-panel__icon {
  width: 2.3034rem;
  height: 2.3034rem;
  margin-right: 0.6825rem;
  opacity: 0;
  transform: translate3d(0, -0.9rem, 0) scale(0.55);
}

.opt-members-panel--suited.is-revealed .opt-members-panel__item--1 .opt-members-panel__icon,
.opt-members-panel--suited.is-revealed .opt-members-panel__item--2 .opt-members-panel__icon,
.opt-members-panel--suited.is-revealed .opt-members-panel__item--3 .opt-members-panel__icon,
.opt-members-panel--suited.is-revealed .opt-members-panel__item--4 .opt-members-panel__icon {
  animation: opt-members-icon-pop 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.opt-members-panel--suited.is-revealed .opt-members-panel__item--1 .opt-members-panel__icon {
  animation-delay: 0ms;
}

.opt-members-panel--suited.is-revealed .opt-members-panel__item--2 .opt-members-panel__icon {
  animation-delay: 200ms;
}

.opt-members-panel--suited.is-revealed .opt-members-panel__item--3 .opt-members-panel__icon {
  animation-delay: 400ms;
}

.opt-members-panel--suited.is-revealed .opt-members-panel__item--4 .opt-members-panel__icon {
  animation-delay: 600ms;
}

@keyframes opt-members-icon-pop {
  0% {
    opacity: 0;
    transform: translate3d(0, -0.95rem, 0) scale(0.45);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .opt-members-panel--suited .opt-members-panel__icon {
    opacity: 1;
    transform: none;
  }

  .opt-members-panel--suited.is-revealed .opt-members-panel__item--1 .opt-members-panel__icon,
  .opt-members-panel--suited.is-revealed .opt-members-panel__item--2 .opt-members-panel__icon,
  .opt-members-panel--suited.is-revealed .opt-members-panel__item--3 .opt-members-panel__icon,
  .opt-members-panel--suited.is-revealed .opt-members-panel__item--4 .opt-members-panel__icon {
    animation: none;
  }
}

.opt-members-panel__copy {
  min-width: 0;
  color: #001e55;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-weight: 500;
}

.opt-members-panel--unsuited .opt-members-panel__copy {
  font-size: 1.053rem;
  line-height: 2.7;
  letter-spacing: 0.0842rem;
}

.opt-members-panel--suited .opt-members-panel__copy {
  font-size: 1.365rem;
  line-height: 2.7;
  letter-spacing: 0.1092rem;
}

.opt-members-panel__note {
  position: absolute;
  right: -1.6495rem;
  bottom: -2.5071rem;
  width: 14.1914rem;
}

/* 意図改行はタブレット幅のみ表示。PC/SPは1行表示を維持 */
.opt-members-panel__br {
  display: none;
}

@media (width >= 1200px) {
  .opt-members-panel__nowrap {
    white-space: nowrap;
  }
}

/* 768–1199px: 語句の自然な位置で改行し、inline-block で長い行幅に縮める。
   項目同士の間隔は gap で、従来の line-height:2.7 相当のリズムを維持 */
@media (width >= 768px) and (width < 1200px) {
  .opt-members-panel__br {
    display: inline;
  }

  .opt-members-panel__list {
    display: flex;
    flex-direction: column;
  }

  .opt-members-panel--unsuited .opt-members-panel__list {
    gap: 1.2rem;
  }

  .opt-members-panel--suited .opt-members-panel__list {
    gap: 1.55rem;
  }

  .opt-members-panel--unsuited .opt-members-panel__copy {
    line-height: 1.45;
  }

  .opt-members-panel--suited .opt-members-panel__copy {
    line-height: 1.45;
  }

  .opt-members-panel__nowrap {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
  }
}

@media (width < 768px) {
  .opt-members {
    padding-block: 0 4.5rem;
  }

  /* PC-only watermark; hide on SP so the leading "W" doesn't peek out */
  .opt-members__word {
    display: none;
  }

  .opt-members__header {
    padding-left: 1.8938rem;
    margin-bottom: 1.8662rem;
    text-align: left;
  }

  .opt-members__title {
    font-size: 1.8085rem;
    line-height: 1.56;
    letter-spacing: 0.1447rem;
  }

  .opt-members__body {
    width: 105.5556%;
    margin-right: -5.5556%;
    align-items: stretch;
    flex-direction: column;
    gap: 1.8125rem;
  }

  .opt-members-group--unsuited {
    width: 100%;
    padding-top: 0;
    padding-left: 1.3313rem;
    flex: none;
    gap: 1.125rem;
  }

  .opt-members-group--suited {
    padding-bottom: 0;
    margin-left: -0.1688rem;
    flex: none;
    gap: 0.625rem;
  }

  .opt-members-group--unsuited .opt-members-group__header,
  .opt-members-group--suited .opt-members-group__header {
    width: 1.4375rem;
    padding-top: 0.1875rem;
  }

  .opt-members-group--unsuited .opt-members-group__arrow,
  .opt-members-group--suited .opt-members-group__arrow {
    width: 1.4375rem;
    height: 1.75rem;
  }

  .opt-members-group--unsuited .opt-members-group__arrow {
    margin-bottom: 0.4375rem;
  }

  .opt-members-group--suited .opt-members-group__arrow {
    margin-bottom: 0.75rem;
  }

  .opt-members-group--unsuited .opt-members-group__arrow-image,
  .opt-members-group--suited .opt-members-group__arrow-image {
    width: 1.8125rem;
    height: 0.92rem;
  }

  .opt-members-group--unsuited .opt-members-group__arrow-image {
    left: calc(50% - 0.0938rem);
  }

  .opt-members-group--suited .opt-members-group__arrow-image {
    left: calc(50% - 0.0313rem);
  }

  .opt-members-group__title {
    width: 1.4375rem;
    word-break: break-word;
    writing-mode: horizontal-tb;
  }

  .opt-members-group--unsuited .opt-members-group__title {
    font-size: 1.0585rem;
    letter-spacing: 0.0847rem;
  }

  .opt-members-group--suited .opt-members-group__title {
    font-size: 1.1835rem;
    letter-spacing: 0.0947rem;
  }

  .opt-members-panel--unsuited {
    padding: 1.6875rem 1.4063rem 1.4675rem 1.625rem;
    border-radius: 0.9375rem 0 0 0.9375rem;
  }

  .opt-members-panel--suited {
    padding: 2.5625rem 0.75rem 2.575rem 1.4375rem;
    border-radius: 0.9375rem 0 0 0.9375rem;
  }

  .opt-members-panel--unsuited .opt-members-panel__icon {
    width: 1.5188rem;
    height: 1.5188rem;
    margin-right: 0.45rem;
  }

  .opt-members-panel--suited .opt-members-panel__icon {
    width: 1.6875rem;
    height: 1.6875rem;
    margin-right: 0.5rem;
  }

  .opt-members-panel--unsuited .opt-members-panel__copy {
    font-size: 0.9rem;
    line-height: 2.7;
    letter-spacing: 0.072rem;
  }

  .opt-members-panel--suited .opt-members-panel__copy {
    font-size: 1rem;
    line-height: 2.7;
    letter-spacing: 0.08rem;
  }

  .opt-members-panel__nowrap {
    white-space: nowrap;
  }

  .opt-members-panel__note {
    right: 2.5581rem;
    bottom: -1.8375rem;
    width: 10.3935rem;
  }
}
.opt-price {
  z-index: 0;
  isolation: isolate;
  padding-block: 9.5538rem 9.2819rem;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(to left, #004c80, #001e55);
}

.opt-price::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../img/common-paper-texture.webp");
  background-repeat: repeat;
  background-position: left top;
  background-size: 64rem 64rem;
  opacity: 0.08;
  content: "";
  pointer-events: none;
}

.opt-price::after {
  position: absolute;
  right: 0;
  bottom: -4.3693rem;
  left: 0;
  z-index: 1;
  height: 9rem;
  border-radius: 5rem 5rem 0 0;
  background: #fff;
  content: "";
  pointer-events: none;
}

.opt-price__inner {
  z-index: 2;
  width: 90%;
  max-width: 59.4868rem;
  margin-inline: auto;
}

.opt-price__header {
  position: relative;
  isolation: isolate;
  margin-bottom: 3.0237rem;
  text-align: center;
}

.opt-price__word {
  z-index: 0;
  top: -10.1688rem;
  left: 50%;
  color: #fff;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 9.5rem;
  font-weight: 700;
  line-height: 1.76;
  letter-spacing: 1.425rem;
  opacity: 0.1;
  transform: translateX(-47.674%);
}

.opt-price__glow {
  position: absolute;
  top: -13.3719rem;
  left: 30.5rem;
  z-index: 1;
  display: flex;
  width: 32.5831rem;
  height: 35.2866rem;
  align-items: center;
  justify-content: center;
  mix-blend-mode: screen;
  pointer-events: none;
}

.opt-price__glow-core {
  position: relative;
  width: 21.151rem;
  height: 28.5343rem;
  flex: none;
  overflow: visible;
  transform: rotate(-150.01deg) scaleY(-1);
}

.opt-price__glow-image {
  position: absolute;
  top: -10.95%;
  left: -14.77%;
  width: 129.54%;
  max-width: none;
  height: 121.9%;
  object-fit: fill;
  opacity: 0.12;
}

.opt-price__title {
  position: relative;
  z-index: 2;
  color: #fff;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 2.1938rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.1755rem;
}

.opt-price__plans {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  max-width: 52.25rem;
  margin-inline: auto;
  margin-bottom: 2.4375rem;
  align-items: stretch;
  gap: 2.0625rem;
}

.opt-price-plan {
  min-width: 0;
  overflow: hidden;
  flex: 454 1 0;
  border-radius: 0.8125rem;
  background: #fff;
  box-shadow: 0 0 0 0.0813rem #fff;
}

.opt-price-plan__banner {
  display: flex;
  min-height: 3.4938rem;
  align-items: center;
  justify-content: center;
  padding-inline: 1rem;
  color: #fff;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.13rem;
  text-align: center;
  background: linear-gradient(to left, #00338f 1.124%, #0065a9);
}

.opt-price-plan__body {
  padding-block: 2.36rem 1.1875rem;
}

.opt-price-plan__title {
  margin-bottom: 0.7729rem;
  color: transparent;
  font-family: "Noto Sans JP", "Zen Kaku Gothic New", sans-serif;
  font-size: 1.3406rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1341rem;
  text-align: center;
  background: linear-gradient(to left, #00338f 1.124%, #0065a9);
  background-clip: text;
  -webkit-background-clip: text;
}

.opt-price-plan__price {
  display: flex;
  width: 100%;
  max-width: 21.9227rem;
  min-width: 0;
  align-items: flex-start;
  justify-content: flex-start;
  margin-inline: auto;
  margin-bottom: 1.4669rem;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  white-space: nowrap;
}

.opt-price-plan__term {
  min-width: 0;
  flex: 0 0 4.6875rem;
  margin-right: 0.6747rem;
  font-size: 2.2344rem;
  font-weight: 500;
  line-height: 2.7;
  letter-spacing: 0.1788rem;
  color: #0164a9;
  transform: scaleX(0.9711);
  transform-origin: left center;
}

.opt-price-plan__amount {
  min-width: 0;
  flex: 0 0 13.375rem;
  margin-right: 0.498rem;
  padding-top: 0.0894rem;
  padding-bottom: 0.12em;
  color: transparent;
  font-size: 4.29rem;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.3432rem;
  background: linear-gradient(to left, #00338f 1.124%, #0065a9);
  background-clip: text;
  transform: scaleX(0.9755);
  transform-origin: left center;
  -webkit-background-clip: text;
}

.opt-price-plan__unit {
  display: grid;
  min-width: 0;
  flex: 0 0 2.6875rem;
}

.opt-price-plan__yen {
  grid-area: 1 / 1;
  width: 2.25rem;
  margin-left: 0.1788rem;
  font-size: 2.2344rem;
  font-weight: 500;
  line-height: 2.7;
  letter-spacing: 0.1788rem;
  color: #013490;
  transform: scaleX(0.932);
  transform-origin: left center;
}

.opt-price-plan__tax {
  grid-area: 1 / 1;
  width: 2.6875rem;
  color: #013490;
  font-size: 0.8938rem;
  font-weight: 500;
  line-height: 2.7;
  letter-spacing: 0.0715rem;
  transform: translateY(0.1788rem) scaleX(0.989);
  transform-origin: left top;
}

.opt-price-plan__benefits {
  margin-inline: 1.2188rem 1.075rem;
  padding: 1.0138rem 0.5994rem 1.035rem 0.8131rem;
  border-radius: 0.65rem;
  color: #001e55;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 0.975rem;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.078rem;
  background: #edf9ff;
}

.opt-price-plan__benefits strong {
  color: #a08e03;
  font-weight: 500;
}

.opt-price-services {
  min-width: 0;
  overflow: hidden;
  flex: 349 1 0;
  border-radius: 0.625rem;
  background: #fff;
  box-shadow: 0 0 0 0.0625rem #fff;
}

.opt-price-services__header {
  display: flex;
  min-height: 3.5625rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #fff;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  text-align: center;
  background: #001e55;
}

.opt-price-services__title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.1rem;
}

.opt-price-services__note {
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.0688rem;
}

.opt-price-services__list {
  display: flex;
  padding: 1.4114rem 0.9375rem 1.7136rem 3.6875rem;
  flex-direction: column;
  gap: 0.9375rem;
  color: #001e55;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}

.opt-price-services__list li {
  position: relative;
}

.opt-price-services__list li::before {
  position: absolute;
  top: 0.123rem;
  right: 100%;
  width: 0.9133rem;
  height: 0.8653rem;
  margin-right: 1.2867rem;
  background: url("../img/price-card-frame.svg") center / 100% 100% no-repeat;
  content: "";
}

.opt-price__cta-row {
  display: flex;
  width: 100%;
  align-items: flex-end;
  justify-content: center;
  gap: 1.5438rem;
}

.opt-price__visitor-cta-group {
  /* Same width as when paired with member CTA (flex 465.5882 : 461.5) */
  width: calc((100% - 1.5438rem) * 465.5882 / 927.0882);
  max-width: 100%;
  min-width: 0;
  flex: none;
}

.opt-price__visitor-note {
  position: relative;
  min-height: 3.4938rem;
  color: #fff;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 1.2447rem;
  font-weight: 700;
  line-height: 1.39;
  letter-spacing: 0.0996rem;
  text-align: center;
}

.opt-price__visitor-note p {
  position: relative;
  z-index: 1;
}

.opt-price__visitor-note-line {
  position: absolute;
  top: 2.0313rem;
  left: 1.8806rem;
  width: 25.5125rem;
  height: 1.1375rem;
}

.opt-price__cta-link {
  display: block;
  width: 100%;
  max-width: none;
}

.opt-price__cta-artwork {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}

.opt-price__cta-artwork--visitor {
  aspect-ratio: 1385 / 362;
  overflow: visible;
}

.opt-price__cta-image {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

.opt-price__visitor-cta-group .opt-cta-fee {
  margin-top: 0.625rem;
}

@media (width < 768px) {
  .opt-price {
    padding-block: 5.3125rem 6.2038rem;
  }

  .opt-price::after {
    bottom: -1.0625rem;
    height: 3.8125rem;
    border-radius: 1.875rem 1.875rem 0 0;
  }

  .opt-price__inner {
    width: 90%;
    max-width: 22.5182rem;
  }

  .opt-price__header {
    margin-bottom: 1.1938rem;
  }

  .opt-price__word {
    top: -4.9375rem;
    font-size: 5.1449rem;
    line-height: 1.76;
    letter-spacing: 0.5659rem;
    transform: translateX(-51.3158%);
  }

  .opt-price__glow {
    top: -12rem;
    left: 4.8216rem;
    width: 28.9231rem;
    height: 33.1739rem;
  }

  .opt-price__glow-core {
    width: 16.925rem;
    height: 28.5343rem;
  }

  .opt-price__glow-image {
    left: -18.46%;
    width: 136.92%;
  }

  .opt-price__title {
    font-size: 1.6875rem;
    line-height: 1.7;
    letter-spacing: 0.135rem;
  }

  .opt-price__plans {
    max-width: 21.8125rem;
    margin-bottom: 2rem;
    align-items: center;
    flex-direction: column;
    gap: 1.25rem;
  }

  .opt-price-plan {
    width: 100%;
    min-height: 16.375rem;
    flex: none;
    border-radius: 0.625rem;
    box-shadow: 0 0 0 1px #fff;
  }

  .opt-price-plan__banner {
    min-height: 2.6875rem;
    font-size: 1rem;
    letter-spacing: 0.1rem;
  }

  .opt-price-plan__body {
    padding-block: 1.022rem 0.9375rem;
  }

  .opt-price-plan__title {
    margin-bottom: 0.5518rem;
    font-size: 0.9375rem;
    letter-spacing: 0.0938rem;
  }

  .opt-price-plan__price {
    max-width: 15.3262rem;
    margin-bottom: 0.02rem;
  }

  .opt-price-plan__term {
    flex: 0 0 3.25rem;
    margin-right: 0.5rem;
    font-size: 1.5625rem;
    letter-spacing: 0.125rem;
    transform: none;
  }

  .opt-price-plan__amount {
    flex: 0 0 9.25rem;
    margin-right: 0.4512rem;
    padding-top: 0.0625rem;
    font-size: 3rem;
    letter-spacing: 0.24rem;
    transform: none;
  }

  .opt-price-plan__unit {
    flex: 0 0 1.875rem;
  }

  .opt-price-plan__yen {
    width: 1.5625rem;
    margin-left: 0.125rem;
    font-size: 1.5625rem;
    letter-spacing: 0.125rem;
    transform: none;
  }

  .opt-price-plan__tax {
    width: 1.875rem;
    font-size: 0.625rem;
    letter-spacing: 0.05rem;
    transform: translateY(0.125rem);
  }

  .opt-price-plan__benefits {
    margin-inline: 0.9375rem 0.8125rem;
    padding: 0.78rem 0.5rem 0.795rem 0.6255rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.06rem;
  }

  .opt-price-plan__benefits li:nth-child(3) {
    letter-spacing: 0.0384rem;
  }

  .opt-price-services {
    width: 100%;
    min-height: 24.5rem;
    flex: none;
  }

  .opt-price__cta-row {
    align-items: center;
    flex-direction: column;
    gap: 1.125rem;
  }

  .opt-price__visitor-cta-group {
    width: 22.3841rem;
    max-width: 100%;
    flex: none;
  }

  .opt-price__visitor-note {
    min-height: 2.6875rem;
    font-size: 0.9574rem;
    line-height: 1.39;
    letter-spacing: 0.0766rem;
  }

  .opt-price__visitor-note-line {
    top: 1.5625rem;
    left: 1.4466rem;
    width: 19.625rem;
    height: 0.875rem;
  }

  .opt-price__visitor-cta-group .opt-cta-fee {
    margin-top: 0.5rem;
    font-size: 0.625rem;
    letter-spacing: 0.04rem;
  }
}
.opt-project-faq {
  overflow: clip;
  padding-block: 7.6194rem 4.2rem;
  color: #001e55;
  background: #fff;
}

.opt-project-faq__inner {
  width: 90%;
  max-width: 71.375rem;
  margin-inline: auto;
}

.opt-project-faq__project {
  display: grid;
  width: min(100%, 68.9375rem);
  margin-bottom: 11.0255rem;
  margin-left: auto;
  grid-template-columns: minmax(0, 29.5625rem) minmax(0, 34.5625rem);
  column-gap: min(4.5833vw, 4.8125rem);
}

.opt-project-faq__project-intro {
  min-width: 0;
}

.opt-project-faq__project-header {
  display: flex;
  margin-bottom: 1.6245rem;
  flex-direction: column;
}

.opt-project-faq__project-label {
  padding-left: 1.5406rem;
  margin-bottom: 0.5058rem;
  color: transparent;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 1.3761rem;
  font-weight: 700;
  line-height: 1.56;
  letter-spacing: 0.1101rem;
  background: linear-gradient(to left, #001e55, #004c80);
  background-clip: text;
  -webkit-background-clip: text;
}

.opt-project-faq__project-line {
  display: block;
  width: 100%;
  height: 0.0813rem;
  margin-bottom: 1.4975rem;
}

.opt-project-faq__project-title {
  padding-left: 1.5406rem;
  color: transparent;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 2.2698rem;
  font-weight: 700;
  line-height: 1.56;
  letter-spacing: 0.1816rem;
  background: linear-gradient(to left, #001e55, #004c80);
  background-clip: text;
  -webkit-background-clip: text;
}

/* PC幅を狭めたとき、「と」「る」だけが折れるのを防ぐ */
@media (width >= 768px) and (width <= 800px) {
  .opt-project-faq__project-title {
    padding-left: 0;
  }
}

.opt-project-faq__project-media {
  width: min(100%, 28.6812rem);
  overflow: hidden;
  margin-left: auto;
  aspect-ratio: 458.9 / 257.4;
  border-radius: 0.8125rem;
}

.opt-project-faq__project-image {
  height: 100%;
}

.opt-project-faq__project-copy {
  position: relative;
  min-width: 0;
  padding-top: 10.4375rem;
}

.opt-project-faq__project-word {
  top: -0.2444rem;
  left: -0.1875rem;
  color: transparent;
  font-size: 9.6646rem;
  line-height: 1.56;
  letter-spacing: 1.4497rem;
  background: linear-gradient(to left, #001e55, #004c80);
  background-clip: text;
  opacity: 0.05;
  -webkit-background-clip: text;
}

.opt-project-faq__project-description {
  position: relative;
  color: #001e55;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.09rem;
}

.opt-project-faq__faq {
  width: min(100%, 54.5rem);
  margin-inline: auto;
}

.opt-project-faq__faq-header {
  position: relative;
  margin-bottom: 2.8966rem;
  text-align: center;
}

.opt-project-faq__faq-word {
  top: -10.3125rem;
  left: 50%;
  color: transparent;
  line-height: 1.56;
  background: linear-gradient(to left, #001e55, #004c80);
  background-clip: text;
  opacity: 0.05;
  transform: translateX(-50%);
  -webkit-background-clip: text;
}

.opt-project-faq__faq-title {
  position: relative;
  color: transparent;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 2.2698rem;
  font-weight: 700;
  line-height: 1.56;
  letter-spacing: 0.1816rem;
  background: linear-gradient(to left, #001e55, #004c80);
  background-clip: text;
  -webkit-background-clip: text;
}

.opt-project-faq__faq-list {
  width: 100%;
}

.opt-project-faq__faq-item {
  min-width: 0;
  padding-inline: 0.4875rem 2.0563rem;
  background: linear-gradient(rgba(0, 30, 85, 0.05), rgba(0, 30, 85, 0.05)) center bottom / 100% 0.0813rem
    no-repeat;
}

.opt-project-faq__faq-item--1 {
  min-height: 12.275rem;
  margin-bottom: 1.1375rem;
}

.opt-project-faq__faq-item--2 {
  min-height: 13.1125rem;
  margin-bottom: 1.4688rem;
}

.opt-project-faq__faq-item--3 {
  min-height: 12.6563rem;
  margin-bottom: 1.7625rem;
}

.opt-project-faq__faq-item--4 {
  min-height: 12.3rem;
  margin-bottom: 1.1375rem;
}

.opt-project-faq__faq-item--5 {
  min-height: 14.7625rem;
  background: none;
}

.opt-project-faq__question {
  display: grid;
  /* Figma: Q top 876 / text top 892.8 — bottoms align, Q sits higher */
  align-items: end;
  margin-bottom: 1.2644rem;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  column-gap: 1.0188rem;
}

.opt-project-faq__question-mark {
  color: transparent;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 2.0261rem;
  font-weight: 700;
  line-height: 1.56;
  letter-spacing: 0.1621rem;
  background: linear-gradient(to left, #001e55, #004c80);
  background-clip: text;
  -webkit-background-clip: text;
}

.opt-project-faq__question-text {
  min-width: 0;
  color: transparent;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 1.3761rem;
  font-weight: 700;
  line-height: 1.56;
  letter-spacing: 0.1101rem;
  background: linear-gradient(to left, #001e55, #004c80);
  background-clip: text;
  -webkit-background-clip: text;
}

.opt-project-faq__answer {
  width: 100%;
  max-width: none;
  padding-left: 2.5188rem;
  color: #001e55;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 1.2188rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.0975rem;
}

@media (width < 768px) {
  .opt-project-faq {
    padding-block: 1.1875rem 2.8125rem;
  }

  .opt-project-faq__inner {
    width: 90%;
    max-width: 23.0625rem;
  }

  .opt-project-faq__project {
    position: relative;
    display: flex;
    width: 100%;
    margin-bottom: 6.3125rem;
    margin-left: 0;
    flex-direction: column;
  }

  .opt-project-faq__project-intro {
    position: relative;
    z-index: 1;
    margin-bottom: 1.3125rem;
  }

  .opt-project-faq__project-header {
    position: relative;
    margin-bottom: 1.0625rem;
  }

  .opt-project-faq__project-label {
    padding-left: 0.6563rem;
    margin-bottom: 1.625rem;
    font-size: 1.0585rem;
    line-height: 1.56;
    letter-spacing: 0.0847rem;
  }

  .opt-project-faq__project-line {
    position: absolute;
    top: 3.6875rem;
    left: -1.4063rem;
    width: 15.625rem;
    height: 1px;
    margin-bottom: 0;
  }

  .opt-project-faq__project-title {
    padding-left: 0.6563rem;
    font-size: 1.746rem;
    line-height: 1.56;
    letter-spacing: 0.1397rem;
  }

  .opt-project-faq__project-media {
    width: min(100%, 22.0625rem);
    margin-inline: auto;
    margin-left: auto;
    aspect-ratio: 353 / 198;
    border-radius: 0.625rem;
  }

  .opt-project-faq__project-copy {
    width: min(100%, 20.975rem);
    padding-top: 0;
    margin-inline: auto;
  }

  .opt-project-faq__project-word {
    top: -17.2813rem;
    left: 8.6563rem;
    display: flex;
    width: 24.9375rem;
    height: 7.125rem;
    align-items: center;
    color: transparent;
    font-size: 4.5585rem;
    line-height: 1.56;
    letter-spacing: 0.8205rem;
    background: linear-gradient(to left, #001e55, #004c80);
    background-clip: text;
    opacity: 0.05;
    transform: rotate(90deg);
    -webkit-background-clip: text;
  }

  .opt-project-faq__project-description {
    font-size: 0.9375rem;
    line-height: 1.9;
    letter-spacing: 0.075rem;
  }

  .opt-project-faq__faq {
    width: 100%;
  }

  .opt-project-faq__faq-header {
    margin-bottom: 2.8125rem;
  }

  .opt-project-faq__faq-word {
    top: -4.375rem;
    font-size: 4.5585rem;
    line-height: 1.56;
    letter-spacing: 0.8205rem;
  }

  .opt-project-faq__faq-title {
    font-size: 1.746rem;
    line-height: 1.56;
    letter-spacing: 0.1397rem;
  }

  .opt-project-faq__faq-item {
    padding-inline: 0.375rem 1.5625rem;
    background-size: 100% 1px;
  }

  .opt-project-faq__faq-item--1 {
    min-height: 14.3125rem;
    margin-bottom: 0.8125rem;
  }

  .opt-project-faq__faq-item--2 {
    min-height: 14rem;
    margin-bottom: 1.0625rem;
  }

  .opt-project-faq__faq-item--3 {
    min-height: 13.625rem;
    margin-bottom: 1.3125rem;
  }

  .opt-project-faq__faq-item--4 {
    min-height: 14.8125rem;
    margin-bottom: 0.8125rem;
  }

  .opt-project-faq__faq-item--5 {
    min-height: 12.3125rem;
  }

  .opt-project-faq__question {
    align-items: start;
    padding-top: 0.8125rem;
    margin-bottom: 0.25rem;
    grid-template-columns: 1.1875rem minmax(0, 1fr);
    column-gap: 0.75rem;
  }

  .opt-project-faq__question-mark {
    position: relative;
    top: -0.8125rem;
    font-size: 1.5585rem;
    line-height: 1.56;
    letter-spacing: 0.1247rem;
  }

  .opt-project-faq__question-text {
    font-size: 1.0585rem;
    line-height: 1.56;
    letter-spacing: 0.0847rem;
  }

  .opt-project-faq__answer {
    padding-left: 1.9375rem;
    padding-right: 1.7375rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    letter-spacing: 0.075rem;
  }
}
.opt-cta-footer {
  isolation: isolate;
  overflow: clip;
  padding-block: 4.0507rem 1.4494rem;
  color: #fff;
  background: linear-gradient(to left, #004c80, #001e55);
}

.opt-cta-footer::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: url("../img/common-paper-texture.webp") left top / 64rem 64rem repeat;
  content: "";
  opacity: 0.08;
  pointer-events: none;
}

.opt-cta-footer__decor-light {
  position: absolute;
  z-index: 1;
  top: -8.375rem;
  left: 50%;
  display: flex;
  width: 37.6rem;
  height: 43.1261rem;
  margin-left: 6.125rem;
  align-items: center;
  justify-content: center;
  mix-blend-mode: screen;
  pointer-events: none;
}

.opt-cta-footer__decor-light-shape {
  position: relative;
  display: block;
  width: 22.0025rem;
  height: 37.0946rem;
  overflow: visible;
  transform: rotate(-150.01deg) scaleY(-1);
}

.opt-cta-footer__decor-light-shape::before {
  position: absolute;
  inset: -19.38% -32.67%;
  background: url("../img/common-color-glow.webp") center / 100% 100% no-repeat;
  opacity: 0.14;
  content: "";
}

.opt-cta-footer__inner {
  z-index: 2;
  width: 90%;
  max-width: 56.1625rem;
  margin-inline: auto;
}

.opt-cta-footer__header {
  width: 32.7938rem;
  max-width: 100%;
  padding-left: 1.8375rem;
  margin-inline: auto;
  margin-bottom: 2.9606rem;
  text-align: center;
}

.opt-cta-footer__label {
  margin-bottom: 2.8925rem;
  color: #fff;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 1.2188rem;
  font-weight: 700;
  line-height: 1.56;
  letter-spacing: 0.2194rem;
  opacity: 0.8;
}

.opt-cta-footer__title {
  color: #fff;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 1.8636rem;
  font-weight: 700;
  line-height: 1.56;
  letter-spacing: 0.1491rem;
}

.opt-cta-footer__body {
  display: grid;
  align-items: start;
  margin-bottom: 2.9188rem;
  grid-template-columns: minmax(0, 336fr) minmax(0, 496.6fr);
  column-gap: min(4.125rem, 3.9286vw);
}

.opt-cta-footer__description {
  padding-top: 3.6875rem;
  color: #fff;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 1.2188rem;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.0975rem;
  text-align: left;
}

.opt-cta-footer__nowrap {
  white-space: nowrap;
}

.opt-cta-footer__media {
  width: 100%;
  overflow: hidden;
  aspect-ratio: 496.6 / 274.3;
  border-radius: 1.2188rem;
}

.opt-cta-footer__photo {
  height: 100%;
  object-fit: cover;
}

.opt-cta-footer__cta-wrap {
  display: flex;
  width: 29.8125rem;
  max-width: 100%;
  padding-left: 0.9688rem;
  margin-inline: auto;
  margin-bottom: 3.3247rem;
  flex-direction: column;
  align-items: flex-start;
}

.opt-cta-footer__cta-label {
  width: 18.525rem;
  padding-left: 0.2125rem;
  margin-left: 5.1188rem;
  margin-bottom: -0.0781rem;
  color: #fff;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 1.2447rem;
  font-weight: 700;
  line-height: 1.76;
  letter-spacing: 0.1369rem;
  text-align: center;
  background: url("../img/footer-cta-frame.svg") center / 100% 1.1648rem no-repeat;
}

.opt-cta-footer__cta {
  position: relative;
  width: 28.8438rem;
  max-width: 100%;
  line-height: 0;
}

.opt-cta-footer__cta::before {
  position: absolute;
  z-index: 0;
  top: 0.3038rem;
  left: 0;
  width: 100%;
  height: 6.7438rem;
  border-radius: 16.25rem;
  box-shadow: 0 0.4875rem 0 rgba(22, 39, 67, 0.7);
  content: "";
  pointer-events: none;
}

.opt-cta-footer__cta-image {
  position: relative;
  z-index: 1;
  width: 100%;
}

.opt-cta-footer__cta-wrap .opt-cta-fee {
  width: 28.8438rem;
  max-width: 100%;
  margin-top: 0.5rem;
}

.opt-cta-footer__legal {
  position: relative;
  padding-top: 0.9562rem;
  color: #fff;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 2.1;
  letter-spacing: 0.065rem;
  text-align: center;
}

.opt-cta-footer__legal::before {
  position: absolute;
  top: -1px;
  left: 50%;
  width: 100vw;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  content: "";
  transform: translateX(-50%);
}

.opt-cta-footer__links {
  display: flex;
  justify-content: center;
  column-gap: 0.8125rem;
}
@media (width < 768px) {
  .opt-cta-footer {
    padding-block: 4.0625rem 0.9375rem;
  }

  .opt-cta-footer__decor-light {
    top: -6.75rem;
    width: 28.9231rem;
    height: 33.1739rem;
    margin-left: -6rem;
  }

  .opt-cta-footer__decor-light-shape {
    width: 16.925rem;
    height: 28.5343rem;
  }

  .opt-cta-footer__decor-light-shape::before {
    inset: -10.95% -18.46%;
  }

  .opt-cta-footer__inner {
    width: 90%;
    max-width: 23.875rem;
  }

  .opt-cta-footer__header {
    position: relative;
    width: 100%;
    padding-left: 0;
    margin-bottom: 0.65rem;
  }

  .opt-cta-footer__header::after {
    display: block;
    width: 1px;
    height: 2.1875rem;
    margin: 0.69rem auto 0;
    background-color: #fff;
    content: "";
  }

  .opt-cta-footer__label {
    margin-bottom: 2.225rem;
    font-size: 0.9375rem;
    letter-spacing: 0.1688rem;
  }

  .opt-cta-footer__title {
    font-size: 1.4335rem;
    letter-spacing: 0.1147rem;
  }

  .opt-cta-footer__body {
    display: flex;
    margin-bottom: 1.4375rem;
    flex-direction: column;
  }

  .opt-cta-footer__description {
    width: 100%;
    max-width: 19.6875rem;
    padding-top: 0;
    margin-inline: auto;
    margin-bottom: 0.9375rem;
    font-size: 0.9375rem;
    letter-spacing: 0.075rem;
    text-align: center;
  }

  .opt-cta-footer__nowrap {
    white-space: normal;
  }

  .opt-cta-footer__media {
    width: min(calc(100vw - 2rem), 23.875rem);
    margin-inline: 0;
    align-self: center;
    border-radius: 0.9375rem;
  }

  .opt-cta-footer__cta-wrap {
    width: 22.1875rem;
    padding-left: 0;
    margin-bottom: 1.7475rem;
    align-items: center;
  }

  .opt-cta-footer__cta-label {
    width: 14.25rem;
    padding-left: 0;
    margin-left: 0;
    margin-bottom: -0.06rem;
    font-size: 0.9574rem;
    letter-spacing: 0.1053rem;
    background-size: 100% 0.875rem;
  }

  .opt-cta-footer__cta {
    width: 22.1875rem;
  }

  .opt-cta-footer__cta-wrap .opt-cta-fee {
    width: 22.1875rem;
    font-size: 0.625rem;
    letter-spacing: 0.04rem;
  }

  .opt-cta-footer__cta::before {
    top: 0.2338rem;
    height: 5.1875rem;
    border-radius: 12.5rem;
    box-shadow: 0 0.375rem 0 rgba(22, 39, 67, 0.7);
  }

  .opt-cta-footer__legal {
    padding-top: 0.6875rem;
    font-size: 0.625rem;
    letter-spacing: 0.05rem;
  }
}
/* source:end src/styles/site.css */