/* ========================================
  Tokens
======================================== */
:root {
  /* 1rem = 10px 基準 */
  font-size: 62.5%;

  /* コンテナ拡大比率（SP / PC） SP基準幅 345px → 345/375=0.92 */
  --container-scale: 0.92; /* 345 / 375 */
  --gutter: 1.4rem;
  --section-spacing: calc(0.213333 * 100vw); /* SP: 80px / 375px = 0.213333 */

  /* カラーパレット */
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-text: #222;
  --color-muted: #707070;
  --color-background: #fff;
  --color-surface: #f7f7f7;

  /* 装飾トークン */
  --shadow-soft: 0 1.2rem 3.2rem rgba(15, 23, 42, 0.08);
  --radius-md: 2rem;
  --radius-lg: 1.6rem;

  /* Intro セクション比率トークン (SP用: 直接vw基準) */
  --intro-standard-sp-ratio: 0.84; /* 315 / 375 (container-scale不使用) */
  --intro-dual-sp-ratio: 0.448; /* 168 / 375 (container-scale不使用) */
  --intro-gap-sp-ratio: 0.0127; /* 16 / 375 (container-scale不使用) */

  /* Standard Features セクション比率トークン (SP基準345px) */
  --sf-text-sp-ratio: 0.942029; /* 325 / 345 */
  --sf-image-sp-ratio: 0.875362; /* 302 / 345 */
  --sf-icon-sp-ratio: 0.2; /* 69 / 345 */

  /* Fare Table 色トークン */
  --fare-header-simple: #e0f2fe;
  --fare-header-standard: #dbeafe;
  --fare-header-flex: #ede9fe;
  --fare-row-label-bg: #0E7AD9;
  --fare-cell-bg-light: #f7f7f7;
  --fare-cell-bg-dark: #efefef;
  --fare-gap: 1.2rem;
  --fare-radius: clamp(2rem, 0.5rem + 3.125vw, 3rem);

  /* 運賃タイプ固有カラー */
  --standard-color: #082694;
  --simple-color: #315adc;
  --flex-color: #031763;

  /* Intro 特徴アイテム SP 最小幅 / PC 最小幅 */
  --intro-feature-min-width-sp: 9.6rem; /* 96px */
  --intro-feature-min-width-pc: 10.4rem; /* 104px */

  /* Intro 特徴アイコンサイズ比率 (SP:48px /345px) */
  --intro-feature-icon-sp-ratio: 0.13913; /* 48 / 345 */
  --intro-feature-icon-sp-ratio2: 0.19913;

  /* Intro 特徴アイテム共通ギャップ */
  --intro-feature-gap: 0;

  /* Intro 矢印幅比率 (SP基準345px) */
  --intro-arrow-sp-ratio: 0.284058; /* 98 / 345 */

  /* Conversion Button サイズトークン (基準: PC=1920px / SP=375px ビューポート幅) */
  /* PC 幅 110px / 1920px */
  --conversion-btn-pc-width-vw: 0.057292; /* 110 / 1920 */
  /* PC 高さ 345px / 1920px */
  --conversion-btn-pc-height-vw: 0.179688; /* 345 / 1920 */
  /* SP 幅 346px / 375px */
  --conversion-btn-sp-width-vw: 0.922667; /* 346 / 375 */
  /* SP 高さ 70px / 375px */
  --conversion-btn-sp-height-vw: 0.186667; /* 70 / 375 */

  /* Intro Plan Illustration サイズトークン (SP基準345px) */
  /* スタンダード: 88×119 */
  --intro-plan-illust-standard-sp-width: 0.255072; /* 88 / 345 */
  --intro-plan-illust-standard-sp-height: 0.344928; /* 119 / 345 */

  /* シンプル: 61×116 */
  --intro-plan-illust-simple-sp-width: 0.176812; /* 61 / 345 */
  --intro-plan-illust-simple-sp-height: 0.336232; /* 116 / 345 */

  /* フレックス: 54×117 */
  --intro-plan-illust-flex-sp-width: 0.156522; /* 54 / 345 */
  --intro-plan-illust-flex-sp-height: 0.33913; /* 117 / 345 */
}

@media (min-width: 1025px) {
  :root {
    /* 1200pxまでは100%、それ以上は1200px固定 */
    --container-scale: 1; /* 固定幅1200pxを基準とする */
    --gutter: 24px;
    --section-spacing: 150px;
  }
}

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

html,
body {
  height: 100%;
}

figure {
  margin: 0;
}

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

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

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

a:hover,
a:focus-visible {
  text-decoration: underline;
}

/* ========================================
  Base Typography & Body
======================================== */
body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体",
    "Yu Gothic", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.6rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--color-text);
  background-color: var(--color-background);
  text-rendering: optimizeLegibility;
  position: relative; /* CVボタンの absolute 固定用基準コンテナ */
}

/* PC表示時はSP専用brを非表示 */
@media (min-width: 1025px) {
  .sp-only-br {
    display: none;
  }
}

@media (min-width: 1200px) {
  .tb-only-br {
    display: none;
  }
}

/* SP表示時はPC専用brを非表示 */
@media (max-width: 1024px) {
  .pc-only-br {
    display: none;
  }

  .tb-only-br {
    display: none;
  }
}

@media (min-width: 1025px) {
  body {
    font-size: 1.8rem;
  }
}

h1,
h2,
h3 {
  font-weight: 700;
  line-height: 1.2;
  margin: auto;
}

/* ========================================
  Section Headings
======================================== */
.section__header h2 {
  position: relative;
  display: inline-block;
  color: #031763;
  font-size: clamp(2.4rem, 1.6rem + 2.5vw, 4.4rem);
  line-height: 1.18;
  font-weight: 700;
  line-height: 1.291667;
}
.section__header h2::after {
  content: "";
  display: block;
  width: 6rem;
  height: 0.4rem;
  background: linear-gradient(
    90deg,
    #031763 0%,
    #031763 33.333%,
    #315adc 33.333%,
    #315adc 66.666%,
    #031763 66.666%,
    #031763 100%
  );
  margin: 0.8rem auto 0;
  border-radius: 999rem;
}
.section__header h2>span {
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
}
.section.banners h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  color: #031763;
  line-height: 2;
  font-weight: 700;
  margin: 4rem 0 1rem 0;
}

/* ========================================
  Components
======================================== */

/* =============================
  Hero visual
============================= */
.hero {
  position: relative;
}
.hero__visual {
  margin: 0;
}

.hero__visual img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media (min-width: 1025px) {
  .hero__visual img {
    aspect-ratio: 5 / 2;
  }
}

@media (max-width: 1024px) {
  .hero__visual img {
    aspect-ratio: 15 / 17;
  }
}

/* =============================
  新しい国内線運賃のご紹介
============================= */

#intro {
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding-block-end: calc(0.37 * 100vw);
}
#intro::before,
#intro::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 0;
  opacity: 0.9;
}
/* 右上: primary */
#intro::before {
  top: 0;
  right: 0;
  aspect-ratio: 1 / 1; /* 楕円（元画像の余白前提）。縦横可変の場合は適宜調整 */
  transform: translate(18%, -22%); /* 画像の大半を外側へ出し一部だけ露出 */
  background-image: url("/ja/jp/domestic/theme/standard/images/bg-intro_polka-dots_primary.png");
}
/* 左下: secondary */
#intro::after {
  left: 0;
  bottom: 0;
  aspect-ratio: 1 / 1;
  transform: translate(-26%, 28%); /* 下方向と左方向へ押し出し */
  background-image: url("/ja/jp/domestic/theme/standard/images/bg-intro_polka-dots_secondary.png");
}

/* SP用のサイズ指定 */
@media (max-width: 1024px) {
  #intro {
    padding-inline: 0.2rem;
  }
  #intro::before {
    width: 84vw; /* 315 / 375 = 0.84 */
    top: 0%;
    right: -17%;
  }
  #intro::after {
    width: 53.8667vw; /* 202 / 375 = 0.538667 */
    bottom: 13%;
    left: -5%;
  }
}

/* PC用のサイズ指定 */
@media (min-width: 1025px) {
  #intro::before {
    width: 721px;
    top: -14%;
  }
  #intro::after {
    width: 517px;
    top: 28%;
    left: 5%;
  }
}
/* 前景コンテンツを常に上に (バナー含む) */
#intro .intro__plans,
#intro .intro__cta-banner {
  position: relative;
  z-index: 1;
}

.intro__plans {
  /* 標準ボックス/デュアルボックスを縦に積むコンテナ */
  display: flex;
  flex-direction: column;
  margin-inline: auto;
}

/* 全ての box 共通スタイル */
.intro__box {
  border: 0.2rem solid var(--color-primary);
  border-radius: var(--radius-md); /* 1.2rem */
  background: var(--color-background);
  box-shadow: var(--shadow-soft);
  overflow: visible; /* イラストをはみ出し許容 */
  display: flex;
  flex-direction: column;
  min-height: 100%;
  position: relative;
}

/* 見出し: 背景を青 */
.intro__plan-heading {
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  padding: 1.2rem 1.6rem;
  font-size: 1.6rem;
  line-height: 1.4;
  text-align: center;
  position: relative; /* 画像絶対配置用 */
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  margin: -0.2rem -0.2rem 0 -0.2rem;
  padding: calc(1.2rem + 0.2rem) calc(1.6rem + 0.2rem) 1.2rem
    calc(1.6rem + 0.2rem);
}

.intro__box--standard {
  border-color: var(--standard-color);
}
.intro__box--standard .intro__plan-heading {
  background: var(--standard-color);
}

.intro__box--simple {
  border-color: var(--simple-color);
}
.intro__box--simple .intro__plan-heading {
  background: var(--simple-color);
}

.intro__box--flex {
  border-color: var(--flex-color);
}
.intro__box--flex .intro__plan-heading {
  background: var(--flex-color);
}

.intro__plan-contents {
  background: transparent;
  padding: 1.6rem 1.6rem 2rem;
  font-size: 1.4rem;
  line-height: 1.6;
  flex: 1 1 auto;
}

.intro__features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--intro-feature-gap) var(--intro-feature-gap);
  justify-content: space-between;
}
.intro__feature {
  flex: 1 1 var(--intro-feature-min-width-sp);
  display: flex;
  justify-content: center;
  min-width: var(--intro-feature-min-width-sp);
}
.intro__feature-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.2rem;
  text-align: center;
}
.intro__feature-icon img {
  width: calc(
    var(--container-scale) * var(--intro-feature-icon-sp-ratio) * 100vw
  );
  height: calc(
    var(--container-scale) * var(--intro-feature-icon-sp-ratio) * 100vw
  );
  object-fit: contain;
  max-width: none;
  flex: 0 0 auto;
}
@media (max-width: 410px) {
  .intro__feature-icon img {
    width: calc(
      var(--container-scale) * var(--intro-feature-icon-sp-ratio2) * 100vw
    );
    height: calc(
      var(--container-scale) * var(--intro-feature-icon-sp-ratio2) * 100vw
    );
  }
}
@media (min-width: 1025px) {
  #intro {
    padding-block-end: calc(0.114583 * 100vw);
  }
  .intro__features {
    --intro-feature-gap-effective: clamp(
      0.6rem,
      0.9vw,
      var(--intro-feature-gap)
    );
    gap: var(--intro-feature-gap-effective);
  }
  .intro__feature {
    flex: 1 1 calc((100% - (var(--intro-feature-gap-effective) * 5)) / 6);
    max-width: calc((100% - (var(--intro-feature-gap-effective) * 5)) / 6);
    min-width: 7.6rem;
    justify-content: center;
  }
  .intro__feature-icon {
    white-space: nowrap;
  }
  .intro__feature-icon img {
    width: 58px;
    height: 58px;
    max-width: none;
  }
}
@media (max-width: 1024px) {
  .intro__features {
    align-content: flex-start;
    justify-content: space-around;
    gap: 0;
  }
  .intro__box--standard .intro__features {
    justify-content: space-around;
  }
  .intro__feature {
    flex: 0 0 calc((100% - (var(--intro-feature-gap) * 2)) / 3);
    max-width: calc((100% - (var(--intro-feature-gap) * 2)) / 3);
    min-width: 0;
    /* white-space: nowrap; */
  }
  .intro__box--standard .intro__feature {
    flex: 0 0 calc((100% - (1.2rem * 2)) / 3);
    max-width: calc((100% - (1.2rem * 2)) / 3);
  }
  .intro__boxes--dual .intro__feature-icon {
    font-size: 1rem;
  }
}

.intro__box--standard {
  width: 100%;
  margin-inline: auto;
}

.intro__boxes--dual {
  display: grid;
  gap: 1.6rem;
  align-items: stretch;
  justify-content: center;
  margin-inline: auto;
  width: 100%;
}

@media (min-width: 1025px) {
  .intro__box--standard {
    width: 720px;
    max-width: 100%;
  }
  .intro__boxes--dual {
    grid-template-columns: repeat(2, minmax(0, 580px));
    gap: clamp(2rem, 3.33%, 4rem);
    justify-content: center;
    overflow: visible;
  }
  .intro__box--dual-item {
    width: 100%;
    max-width: 580px;
  }
}

@media (max-width: 1024px) {
  .intro__plan-contents {
    padding: 1rem 0.2rem;
  }
  .intro__box--standard {
    max-width: calc(var(--intro-standard-sp-ratio) * 100vw);
  }
  .intro__boxes--dual {
    grid-auto-flow: initial;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--intro-gap-sp-ratio) * 100vw);
    overflow: visible;
  }
  .intro__box--dual-item {
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
  }
}

.intro__plan-contents > *:last-child {
  margin-bottom: 0;
}

.intro__feature--unavailable {
  opacity: 0.3;
}
.intro__feature--unavailable .intro__feature-icon figcaption {
  color: var(--color-muted);
}

.intro__feature-highlight {
  background: linear-gradient(
    transparent 0%,
    transparent 40%,
    #fff176 40%,
    #fff176 90%,
    transparent 90%,
    transparent 100%
  );
  padding: 0 0.2rem;
  display: inline-block;
}

.intro__standard-wrapper {
  position: relative;
  width: fit-content;
  margin-inline: auto;
  margin-block-start: calc(0.426667 * 100vw);
}
@media (min-width: 1025px) {
  .intro__standard-wrapper {
    margin-block-start: calc(0.041667 * 100vw);
  }
  .intro__arrows {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .intro__arrow {
    position: absolute;
    top: 72%;
    width: 205px;
    max-width: 205px;
    transform: translateY(-50%);
  }
  .intro__arrow--primary {
    left: 1%;
    transform: translate(-100%, -50%);
    z-index: -1;
  }
  .intro__arrow--secondary {
    right: 1%;
    transform: translate(100%, -50%);
    z-index: -1;
  }
  .intro__arrow img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

@media (max-width: 1024px) {
  .intro__standard-wrapper {
    --intro-standard-box-width: calc(var(--intro-standard-sp-ratio) * 100vw);
  }
  .intro__arrows {
    position: static;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2vw;
    margin: -1rem 0 1rem 0;
  }
  .intro__arrow {
    position: static;
    width: calc(var(--container-scale) * var(--intro-arrow-sp-ratio) * 100vw);
    max-width: calc(
      var(--container-scale) * var(--intro-arrow-sp-ratio) * 100vw
    );
    transform: none;
  }
  .intro__arrow img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

.intro__plan-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.intro__plan-illustration img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
@media (min-width: 1025px) {
  .intro__plan-heading {
    position: relative;
    display: block;
    overflow: visible;
  }
  .intro__box .intro__plan-illustration {
    position: absolute;
    top: 13%;
    right: 6%;
    transform: translateY(-50%);
    pointer-events: none;
  }
  .intro__box--standard .intro__plan-illustration {
    width: 88px;
    height: 119px;
  }
  .intro__box--simple .intro__plan-illustration {
    width: 61px;
    height: 116px;
  }
  .intro__box--flex .intro__plan-illustration {
    width: 54px;
    height: 117px;
  }
  .intro__plan-title {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  .intro__plan-title-desc {
    font-size: clamp(1.4rem, 0.8rem + 0.8333vw, 1.6rem);
    line-height: clamp(2.1rem, 1.2rem + 1.25vw, 2.4rem);
    font-weight: 700;
  }
  .intro__plan-title-name {
    font-size: clamp(2.2rem, 1.3rem + 1.25vw, 3.2rem);
    line-height: clamp(3.9rem, 3.9rem + 0vw, 3.9rem);
    font-weight: 700;
  }
}
@media (max-width: 1024px) {
  .intro__box {
    position: relative;
    overflow: visible;
  }
  .intro__box .intro__plan-illustration {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .intro__box--standard .intro__plan-illustration {
    width: calc(
      var(--container-scale) * var(--intro-plan-illust-standard-sp-width) *
        100vw
    );
    height: calc(
      var(--container-scale) * var(--intro-plan-illust-standard-sp-height) *
        100vw
    );
    max-width: calc(
      var(--container-scale) * var(--intro-plan-illust-standard-sp-width) *
        100vw
    );
    max-height: calc(
      var(--container-scale) * var(--intro-plan-illust-standard-sp-height) *
        100vw
    );
    top: calc(-0.15 * var(--container-scale) * 100vw);
  }
  .intro__box--simple .intro__plan-illustration {
    width: calc(
      var(--container-scale) * var(--intro-plan-illust-simple-sp-width) * 100vw
    );
    height: calc(
      var(--container-scale) * var(--intro-plan-illust-simple-sp-height) * 100vw
    );
    max-width: calc(
      var(--container-scale) * var(--intro-plan-illust-simple-sp-width) * 100vw
    );
    max-height: calc(
      var(--container-scale) * var(--intro-plan-illust-simple-sp-height) * 100vw
    );
    top: calc(-0.145 * var(--container-scale) * 100vw);
    left: calc(0.11 * var(--container-scale) * 100vw);
  }
  .intro__box--flex .intro__plan-illustration {
    width: calc(
      var(--container-scale) * var(--intro-plan-illust-flex-sp-width) * 100vw
    );
    height: calc(
      var(--container-scale) * var(--intro-plan-illust-flex-sp-height) * 100vw
    );
    max-width: calc(
      var(--container-scale) * var(--intro-plan-illust-flex-sp-width) * 100vw
    );
    max-height: calc(
      var(--container-scale) * var(--intro-plan-illust-flex-sp-height) * 100vw
    );
    top: calc(-0.145 * var(--container-scale) * 100vw);
    left: calc(0.37 * var(--container-scale) * 100vw);
  }
  .intro__plan-title {
    margin-top: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  .intro__plan-title-desc {
    font-size: clamp(1.4rem, 0.8rem + 0.8333vw, 1.6rem);
    line-height: clamp(2.1rem, 1.2rem + 1.25vw, 2.4rem);
    font-weight: 700;
  }
  .intro__plan-title-name {
    font-size: clamp(2.2rem, 1.3rem + 1.25vw, 3.2rem);
    line-height: clamp(3.9rem, 3.9rem + 0vw, 3.9rem);
    font-weight: 700;
  }
}

#middle-sec {
  position: relative;
}

.intro__cta-banner {
  position: absolute;
  left: 0;
  right: 0;
  top: -28vw;
  width: calc(var(--container-scale) * 0.943 * 100vw);
  max-width: none;
  margin: auto;
  text-align: center;
  z-index: 2;
}
@media (min-width: 1025px) {
  .intro__cta-banner {
    width: 508px;
    margin: 0 auto -2vw;
    position: absolute;
    left: 0;
    right: 0;
    top: -8vw;
  }
}
.intro__cta-banner__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.intro__cta-banner__caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  font-size: clamp(1.6rem, 2.2vw, 2.4rem);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.intro__plans {
  position: relative;
}
.intro__plans::before {
  content: "";
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--container-scale) * 100vw);
  aspect-ratio: 375 / 379;
  background: url("/ja/jp/domestic/theme/standard/images/bg-intro-dot_small.png")
    center top / 100% 100% no-repeat;
  z-index: 0;
  pointer-events: none;
}
.intro__plans > * {
  position: relative;
  z-index: 1;
}

@media (min-width: 1025px) {
  .intro__plans {
    gap: 4rem;
  }

  .intro__plans::before {
    width: 782px;
    aspect-ratio: 782 / 790;
    background-image: url("/ja/jp/domestic/theme/standard/images/bg-intro-dot_large.png");
    background-size: 100% 100%;
    top: 8%;
  }
}

/* ========================================
  スタンダード運賃の特徴
======================================== */
.standard-features {
  position: relative;
  background: url("/ja/jp/domestic/theme/standard/images/bg-standard-features_small.png")
    top center / cover no-repeat;
  padding-top: clamp(4rem, 8vh, 8rem);
}
.standard-features__list {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.standard-feature {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  overflow: visible;
}
.standard-feature__media {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
}
.standard-feature__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.standard-feature__text-box {
  background: var(--color-background);
  padding: 3.2rem 3.2rem 3.6rem;
  box-shadow: var(--shadow-soft);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.standard-feature__subtitle {
  margin: 0;
  font-size: clamp(2.2rem, 2.2vw, 3rem);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  position: relative;
  color: #082694;
}
.standard-feature__subtitle::after {
  content: "";
  display: block;
  width: 4rem;
  height: 0.3rem;
  background: #209ddb;
  margin: 0.8rem auto 0;
  border-radius: 999rem;
}
.standard-feature__body {
  margin: 0;
  font-size: clamp(1.8rem, 1.6rem + 0.5vw, 2rem);
  line-height: 2;
  color: var(--color-muted);
}

.standard-feature__point-icon {
  position: absolute;
  z-index: 3;
  display: block;
}
.standard-feature__point-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 1024px) {
  .standard-features__list {
    margin-block-start: calc(0.186667 * 100vw);
  }
  .standard-feature {
    display: block;
  }
  .standard-features {
    overflow: visible;
  }
  .standard-feature__media {
    width: calc(var(--container-scale) * var(--sf-image-sp-ratio) * 100vw);
    max-width: calc(var(--container-scale) * var(--sf-image-sp-ratio) * 100vw);
  }
  .standard-features__list
    .standard-feature:nth-child(odd)
    .standard-feature__media {
    margin-left: auto;
    margin-right: calc((100vw - var(--container-scale) * 100vw) / -2);
  }
  .standard-features__list
    .standard-feature:nth-child(even)
    .standard-feature__media {
    margin-right: auto;
    margin-left: calc((100vw - var(--container-scale) * 100vw) / -2);
  }
  .standard-feature__text-box {
    width: calc(var(--container-scale) * var(--sf-text-sp-ratio) * 100vw);
    max-width: calc(var(--container-scale) * var(--sf-text-sp-ratio) * 100vw);
    margin-inline: auto;
    padding: 3.4rem 3.4rem 3.1rem;
    margin-top: -2.2rem;
    position: relative;
  }

  .standard-features__list
    .standard-feature:nth-child(odd)
    .standard-feature__text-box {
    border-radius: 4rem 0 4rem 4rem;
  }

  .standard-features__list
    .standard-feature:nth-child(even)
    .standard-feature__text-box {
    border-radius: 0 4rem 4rem 4rem;
  }
  .standard-feature__point-icon {
    width: calc(var(--container-scale) * var(--sf-icon-sp-ratio) * 100vw);
    height: calc(var(--container-scale) * var(--sf-icon-sp-ratio) * 100vw);
    top: -42vw;
    left: 0;
  }
  .standard-features__list
    .standard-feature:nth-child(odd)
    .standard-feature__point-icon {
    left: 0;
    right: auto;
  }
  .standard-features__list
    .standard-feature:nth-child(even)
    .standard-feature__point-icon {
    right: 0;
    left: auto;
  }
  .standard-feature__subtitle::after {
    width: 3.2rem;
  }
}

@media (min-width: 1025px) {
  .standard-features__list {
    margin-block-start: calc(0.041667 * 100vw);
  }
  .standard-features {
    background: url("/ja/jp/domestic/theme/standard/images/bg-standard-features_large.png")
      top center / cover no-repeat;
  }
  .standard-feature__text-box {
    position: relative;
    width: 550px;
    max-width: 550px;
    padding: 6rem 5rem;
  }
  .standard-features__list
    .standard-feature:nth-child(odd)
    .standard-feature__text-box {
    border-radius: 5rem 5rem 0 5rem;
  }
  .standard-features__list
    .standard-feature:nth-child(even)
    .standard-feature__text-box {
    border-radius: 5rem 5rem 5rem 0;
  }
  .standard-feature__media {
    width: 800px;
    max-width: 800px;
  }
  .standard-features__list {
    gap: 3rem;
  }
  .standard-features__list
    .standard-feature:nth-child(odd)
    .standard-feature__media {
    order: 2;
  }
  .standard-features__list
    .standard-feature:nth-child(odd)
    .standard-feature__text-box {
    order: 1;
  }
  .standard-features__list
    .standard-feature:nth-child(even)
    .standard-feature__media {
    order: 1;
  }
  .standard-features__list
    .standard-feature:nth-child(even)
    .standard-feature__text-box {
    order: 2;
  }
  .standard-features__list
    .standard-feature:nth-child(odd)
    .standard-feature__text-box {
    margin-right: -181.5px;
  }
  .standard-features__list
    .standard-feature:nth-child(even)
    .standard-feature__text-box {
    margin-left: -181.5px;
  }
  .standard-feature__point-icon {
    width: 116px;
    height: 116px;
    top: -2.1vw;
    left: -2.4vw;
  }
}

/* ========================================
  Standard Services (Fare Table)
=========================================== */
.standard-services {
  position: relative;
  background-color: var(--color-background);
}
.fare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: var(--fare-gap);
  table-layout: auto;
  font-size: 1.4rem;
}
.fare-table caption {
  text-align: left;
  padding: 0 0 1.2rem;
  font-weight: 700;
}
.fare-table thead th {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3;
  padding: 1.2rem 1.2rem 1.4rem;
  color: #fff;
}
.fare-table__corner {
  background: transparent;
  padding: 0;
}
.fare-table__col {
  border-radius: var(--fare-radius) var(--fare-radius) 0.5rem 0.5rem;
  position: relative;
}
.fare-table__col--simple {
  background: var(--simple-color);
}
.fare-table__col--standard {
  background: var(--standard-color);
  position: relative;
  width: calc(0.333333 * 100vw);
}
.fare-table__col--standard::before {
  content: "";
  position: absolute;
  top: calc(-0.05333 * 100vw);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--standard-color);
  border-radius: var(--fare-radius) var(--fare-radius) 0 0;
}
.fare-table__col--standard .fare-table__col-desc,
.fare-table__col--standard .fare-table__col-title {
  position: relative;
  z-index: 1;
  transform: translateY(calc(-0.03333 * 100vw));
}
.fare-table__col--flex {
  background: var(--flex-color);
}

.fare-table__col-title {
  display: block;
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  font-weight: 700;
  margin-top: 1.5rem;
}
.fare-table__col-desc {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
}
.fare-table__col-desc-line {
  display: block;
}

@media (max-width: 1024px) {
  .fare-table-wrapper {
    margin-block-start: calc(0.183333 * 100vw);
  }
  .fare-table__col {
    padding-bottom: 2rem;
    position: relative;
  }
  .fare-table__col-desc {
    position: relative;
    padding-top: 0.8rem;
    padding-bottom: 1.2rem;
  }
  .fare-table__col-desc::after {
    content: "";
    position: absolute;
    bottom: -0.6rem;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 0.8rem;
    background: #fff;
    clip-path: polygon(
      0 0,
      calc(50% - 0.6rem) 0,
      50% 0.6rem,
      calc(50% + 0.6rem) 0,
      100% 0,
      100% 0.2rem,
      calc(50% + 0.6rem) 0.2rem,
      50% 0.8rem,
      calc(50% - 0.6rem) 0.2rem,
      0 0.2rem
    );
  }
  .fare-table thead.fixed {
    top: -10.4rem;
    padding: 1rem 0;
  }
  .fare-table .fare-table__col-desc-line {
    /* white-space: nowrap; */
  }
  .fare-table thead.fixed .fare-table__col--standard .fare-table__col-desc,
  .fare-table thead.fixed .fare-table__col--standard .fare-table__col-title {
    transform: translateY(-0);
  }
}
@media (max-width: 350px) {
  .fare-table .fare-table__col-desc-line {
    white-space: normal;
  }
}

@media (min-width: 1025px) {
  .fare-table-wrapper {
    margin-block-start: calc(0.060625 * 100vw);
  }
  .fare-table__col {
    padding: 1.6rem 1.2rem 2rem;
  }
  .fare-table__col-desc {
    position: relative;
    margin-bottom: 2rem;
    padding: 0.8rem 1rem;
    background: #fff;
    border-radius: 3rem;
    font-size: 1.4rem;
    width: 90%;
    margin: auto;
  }
  .fare-table__col-desc::after {
    content: "";
    position: absolute;
    bottom: -0.7rem;
    left: 23%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 1.5rem 0.02rem 0 2rem;
    border-color: #fff transparent transparent transparent;
  }
  .fare-table__col--simple .fare-table__col-desc {
    color: var(--simple-color);
  }
  .fare-table__col--standard .fare-table__col-desc {
    color: var(--standard-color);
  }
  .fare-table__col--flex .fare-table__col-desc {
    color: var(--flex-color);
  }
}

@media (min-width: 1025px) {
  .fare-table {
    table-layout: fixed;
    position: relative;
  }

  .fare-table__col--simple,
  .fare-table__col--flex {
    width: 26.3%;
  }

  .fare-table__col--standard {
    width: 28%;
  }

  .fare-table__col--standard::before {
    top: calc(-0.015625 * 100vw) !important;
    bottom: 0;
  }
  .fare-table__col--standard .fare-table__col-desc,
  .fare-table__col--standard .fare-table__col-title {
    transform: translateY(calc(-0.008 * 100vw)) !important;
  }

  .fare-table::before {
    content: "";
    position: absolute;
    pointer-events: none;
    border: 0.4rem solid var(--standard-color);
    border-radius: var(--fare-radius) var(--fare-radius) 1rem 1rem;
    z-index: 1;
    top: -1%;
    left: 46.2%;
    width: 27%;
    bottom: 0;
    box-sizing: border-box;
  }
}

.fare-table__row-label {
  background: var(--fare-row-label-bg);
  border-radius: var(--fare-radius) 0.5rem 0.5rem var(--fare-radius);
  text-align: left;
  vertical-align: middle;
  padding: 1.2rem 1rem;
  font-weight: 700;
  font-size: clamp(1.6rem, 1.4rem + 0.625vw, 1.8rem);
  color: #fff;
  display: table-cell;
}
.fare-table__row-label:focus-visible {
  outline: 0.2rem solid var(--color-primary);
  outline-offset: 0.2rem;
}
.fare-table__row-icon {
  display: inline-block;
  vertical-align: middle;
  width: calc(0.10133 * 100vw);
  height: calc(0.10133 * 100vw);
  margin-right: 0.8rem;
  flex-shrink: 0;
}
.fare-table__row-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.fare-table__row-text {
  display: inline-block;
  vertical-align: middle;
}

.fare-table__row-label--fare-example {
  display: flex;
  align-items: flex-start;
}

.fare-table__row-label--fare-example .fare-table__row-text {
  display: block;
}

.fare-example__header {
  display: block;
}

.fare-example__main {
  font-size: clamp(1.6rem, 1.4rem + 0.625vw, 1.8rem);
  display: inline;
}

.fare-example__main-separator {
  display: inline;
}

.fare-example__route {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
  font-size: clamp(1rem, 0.8rem + 0.625vw, 1.4rem);
}

.fare-example__route-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  /* white-space: nowrap; */
}

.fare-example__route-label {
  /* white-space: nowrap; */
  display: flex;
  justify-content: center;
  align-items: end;
}

.fare-example__route-location {
  font-size: clamp(1.6rem, 1.2rem + 1.25vw, 2rem);
  /* white-space: nowrap; */
}

.fare-example__route-separator {
  display: inline;
}

.fare-example__date,
.fare-example__note {
  display: block;
  font-size: clamp(1.2rem, 1.2rem + 0vw, 1.2rem);
  line-height: 1.5;
}

@media (min-width: 1025px) {
  .fare-table__row-icon {
    width: 3.8rem;
    height: 3.8rem;
  }

  .fare-table__row-label--fare-example .fare-table__row-text {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 0.4rem;
  }

  .fare-example__header {
    display: flex;
    flex-direction: column;
  }

  .fare-example__main-separator {
    display: none;
  }

  .fare-example__main {
    display: block;
  }

  .fare-example__route {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .fare-example__route-separator {
    display: inline;
  }

  .fare-example__route-separator::before {
    content: "|";
  }

  .fare-example__route-separator {
    font-size: 0;
    line-height: 0;
  }

  .fare-example__route-separator::before {
    font-size: clamp(1rem, 0.8rem + 0.625vw, 1.4rem);
    line-height: 1.5;
  }

  .fare-example__date,
  .fare-example__note {
    flex-basis: auto;
  }
}

.fare-table td:not(.fare-table__corner) {
  background: var(--fare-cell-bg-light);
  border-radius: 0.5rem;
  padding: 1.2rem 0;
  text-align: center;
  line-height: 1.5;
}

.fare-table__cell--text-medium {
  font-size: clamp(1.5rem, 1.4rem + 0.3125vw, 1.6rem);
}

.fare-table__cell--text-large {
  font-size: clamp(1.8rem, 1.7rem + 0.3125vw, 2rem);
}

.fare-table__cell--highlight {
  color: #002db5;
  font-weight: 700;
}

.fare-table .fare-table__cell--fare-price {
  color: #e80000;
  font-size: clamp(1.8rem, 1.2rem + 1.875vw, 3rem);
  font-weight: 700;
  flex-direction: row;
  word-break: break-all;
}

.fare-table__price-unit {
  font-size: clamp(1.2rem, 0.525rem + 2.10938vw, 1.8rem);
}

.fare-table__symbol {
  display: block;
  width: 2rem;
  height: 2rem;
  margin: 0 auto 0.4rem;
  position: relative;
}

.fare-table__symbol--unavailable {
  color: #999999;
  line-height: 2rem;
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
}

.fare-table__symbol--available {
  border: 0.25rem solid #002db5;
  border-radius: 50%;
}

.fare-table__symbol--excellent {
  border: 0.25rem solid #002db5;
  border-radius: 50%;
  position: relative;
  box-sizing: border-box;
}

.fare-table__symbol--excellent::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 0.6rem);
  height: calc(100% - 0.6rem);
  border: 0.15rem solid #002db5;
  border-radius: 50%;
  box-sizing: border-box;
}

.fare-table tbody tr:nth-child(even) td {
  background: var(--fare-cell-bg-dark);
}

@media (max-width: 1024px) {
  .standard-services {
    overflow: visible !important;
  }
  .standard-services .container {
    overflow: visible !important;
  }
  .fare-table-wrapper {
    position: relative;
    overflow: visible;
  }
  .fare-table {
    display: block;
    border-spacing: 0;
  }
  .fare-table thead {
    position: sticky;
    top: 0;
    z-index: 999;
    display: flex;
    gap: 0.5rem;
    background: var(--color-background);
    margin-block-end: 1rem;
  }
  .fare-table thead tr {
    display: contents;
  }
  .fare-table thead th {
    flex: 1;
    margin: 0;
    border-radius: var(--fare-radius) var(--fare-radius) 0.5rem 0.5rem;
    padding: 1rem 0.2rem;
  }
  .fare-table thead th.fare-table__col--standard {
    flex: 0 0 auto;
    width: calc((125 / 375) * 100vw);
  }
  .fare-table thead .fare-table__corner {
    display: none;
  }

  .fare-table tbody {
    display: block;
  }
  .fare-table tbody tr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--fare-gap);
    row-gap: var(--fare-gap);
    align-items: stretch;
    background: none;
    margin: 0 0 1rem;
  }
  .fare-table tbody tr:last-child {
    margin-bottom: 0;
  }
  .fare-table__row-label {
    display: flex;
    align-items: center;
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    border-radius: 0.5rem;
    margin: 0;
    justify-content: flex-start;
  }
  .fare-table td {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0;
    min-height: 7rem;
  }
  .fare-table tbody tr:nth-child(even) td {
    background: var(--fare-cell-bg-dark);
  }
  .fare-table td::before {
    display: none;
  }
}

@media (max-width: 400px) {
  .fare-table .fare-table__cell--fare-price {
    flex-direction: column;
  }
}

.fare-table__notes {
  margin-top: 2rem;
  padding: 0 1rem;
}

.fare-table__note {
  font-size: 1.4rem;
  line-height: 1.6;
  color: #333;
  margin: 0 0 0.8rem 0;
}

.fare-table__note:last-child {
  margin-bottom: 0;
}

.fare-table-accordion {
  margin-top: 4rem;
}

.fare-table-accordion__summary {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 2rem 0;
  cursor: pointer;
  list-style: none;
  position: relative;
  border-bottom: 0.1rem solid #999999;
}

.fare-table-accordion__summary::-webkit-details-marker {
  display: none;
}

.fare-table-accordion__summary:focus-visible {
  outline: 0.2rem solid var(--color-primary);
  outline-offset: 0.4rem;
  border-radius: var(--radius-md);
}

.fare-table-accordion__title {
  font-weight: 700;
  line-height: 1.5;
  color: #00146e;
  flex: 1 1 auto;
}

.fare-table-accordion__chevron {
  position: relative;
  width: 2rem;
  height: 2rem;
  margin-left: 0.4rem;
  flex: 0 0 auto;
}

.fare-table-accordion__chevron::before,
.fare-table-accordion__chevron::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.8rem;
  height: 0.2rem;
  background: #333333;
  border-radius: 0.12rem;
  transform: translate(-50%, -50%);
  transition: background 200ms ease, opacity 200ms ease, transform 200ms ease;
}

.fare-table-accordion__chevron::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.fare-table-accordion[open] .fare-table-accordion__chevron::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scale(0.4);
}

.fare-table-accordion[open] .fare-table-accordion__chevron::before {
  background: #333333;
}

@media (prefers-reduced-motion: reduce) {
  .fare-table-accordion__chevron::before,
  .fare-table-accordion__chevron::after {
    transition: none;
  }
}

.fare-table-accordion__content {
  padding: 2rem 0;
}

.fare-table-accordion__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fare-table-accordion__item {
  font-size: 1.4rem;
  line-height: 1.6;
  color: #6e6e6e;
  margin: 0 0 1.2rem 0;
  padding-left: 1em;
  text-indent: -1em;
}

.fare-table-accordion__item:last-child {
  margin-bottom: 0;
}

.fare-table-accordion__item::before {
  content: "*　";
}

.fare-table-accordion__link {
  color: #6e6e6e;
  text-decoration: underline;
  transition: opacity 0.2s ease;
}

/* ========================================
  よくある質問
========================================== */
.faq {
  position: relative;
  background-color: var(--color-surface);
}
.faq__list {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.faq-item {
  border-bottom: 0.1rem solid #999999;
}
.faq-item[open] {
  background: var(--color-surface);
}

.faq-item__summary {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.6rem 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.faq-item__summary::-webkit-details-marker {
  display: none;
}
.faq-item__summary:focus-visible {
  outline: 0.2rem solid var(--color-primary);
  outline-offset: 0.4rem;
  border-radius: var(--radius-md);
}
.faq-item__question {
  font-weight: 700;
  line-height: 1.5;
  color: #00146e;
  flex: 1 1 auto;
}

.faq-item__answer {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 0rem 2rem;
  animation: faq-expand 260ms ease;
}
.faq-item:not([open]) .faq-item__answer {
  display: none;
}
.faq-item__text {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--color-muted);
}
.faq-item__text a {
  text-decoration: underline;
}

.faq-item__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(4.2rem, 5vw, 4.8rem);
  height: clamp(4.2rem, 5vw, 4.8rem);
  font-size: 1.8rem;
  font-weight: 700;
  border-radius: 50%;
  background: #1c5ba7;
  color: #fff;
  letter-spacing: 0.05em;
}
.faq-item__icon--a {
  background: #209ddb;
}

/* 開閉インジケータ (+ / -) */
.faq-item__chevron {
  position: relative;
  width: 2rem;
  height: 2rem;
  margin-left: 0.4rem;
  flex: 0 0 auto;
}
.faq-item__chevron::before,
.faq-item__chevron::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.8rem;
  height: 0.2rem;
  background: #333333;
  border-radius: 0.12rem;
  transform: translate(-50%, -50%);
  transition: background 200ms ease, opacity 200ms ease, transform 200ms ease;
}
.faq-item__chevron::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.faq-item[open] .faq-item__chevron::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scale(0.4);
}
.faq-item[open] .faq-item__chevron::before {
  background: #333333;
}
@media (prefers-reduced-motion: reduce) {
  .faq-item__chevron::before,
  .faq-item__chevron::after {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item__chevron::before {
    transition: none;
  }
  .faq-item__answer {
    animation: none;
  }
}
@keyframes faq-expand {
  from {
    opacity: 0;
    transform: translateY(-0.4rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1024px) {
  .faq__list {
    margin-block-start: calc(0.146667 * 100vw);
  }
  .faq-item__summary {
    padding: 1.4rem 0;
  }
  .faq-item__answer {
    padding: 0 0rem 1.6rem;
  }
}

@media (min-width: 1025px) {
  .faq__list {
    margin-block-start: calc(0.041667 * 100vw);
  }
}

/* ========================================
  早め・往復での予約がおすすめ
======================================== */
#early-booking {
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding-bottom: 50px;
}

#early-booking > * {
  position: relative;
  z-index: 1;
}

#early-booking::before {
  content: "";
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 0;
  opacity: 0.9;
  aspect-ratio: 1 / 1;
  transform: translate(18%, -22%);
  background-image: url("/ja/jp/domestic/theme/standard/images/bg-early-booking_polka-dots_primary.png");
}

#early-booking::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 0;
  opacity: 0.9;
  aspect-ratio: 1 / 1;
  transform: translate(20%, 25%);
  background-image: url("/ja/jp/domestic/theme/standard/images/bg-early-booking_polka-dots_tertiary.png");
}

/* SP用のサイズ指定 */
@media (max-width: 1024px) {
  #early-booking::before {
    width: 71.2vw; /* 267 / 375 = 0.712 */
    top: -1%;
    right: -2%;
  }
  #early-booking::after {
    width: 36.8vw; /* 138 / 375 = 0.368 */
    right: 12%;
    bottom: 5.5%;
  }
}

/* PC用のサイズ指定 */
@media (min-width: 1025px) {
  #early-booking::before {
    width: 721px;
    top: 8%;
    right: -1%;
  }
  #early-booking::after {
    width: 301px;
    right: 3%;
    bottom: 18%;
  }
}

.early-booking__graph {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
}

.early-booking__graph::before {
  content: "";
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 0;
  opacity: 0.9;
  aspect-ratio: 1 / 1;
  transform: translate(-30%, -50%);
  background-image: url("/ja/jp/domestic/theme/standard/images/bg-early-booking_polka-dots_secondary.png");
}

/* SP用のサイズ指定 */
@media (max-width: 1024px) {
  .early-booking__graph::before {
    width: 48vw; /* 180 / 375 = 0.48 */
    top: 139%;
    left: 5%;
  }
}

/* PC用のサイズ指定 */
@media (min-width: 1025px) {
  .early-booking__graph::before {
    width: 554px;
    left: -20%;
    top: 116%;
  }
}

.early-booking__graph-media {
  position: relative;
  z-index: 1;
}
.early-booking__graph-media {
  display: block;
  width: calc(var(--container-scale) * 1.108 * 100vw);
  max-width: calc(var(--container-scale) * 1.108 * 100vw);
}
.early-booking__graph-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
@media (max-width: 1024px) {
  .early-booking__graph {
    margin-block-start: calc(0.133333 * 100vw);
  }
}
@media (min-width: 1025px) {
  .early-booking__graph {
    margin-block-start: calc(0.041667 * 100vw);
  }
  .early-booking__graph-media {
    width: 688px;
    max-width: 688px;
  }
}
.early-booking__cta-banner {
  position: relative;
  width: calc(var(--container-scale) * 0.912 * 100vw);
  margin: 7rem auto;
  text-align: center;
  z-index: 1;
}
@media (min-width: 1025px) {
  .early-booking__cta-banner {
    width: 720px;
  }
}
.early-booking__cta-banner__media img,
.early-booking__cta-banner__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.early-booking__cta-banner__caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.6rem;
  font-size: clamp(1.4rem, 2vw, 2.2rem);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.early-booking__button-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 5rem;
}

.early-booking__detail-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 0.5rem 5rem;
  background: #fff;
  color: #00146e;
  font-size: clamp(1.6rem, 1.1636rem + 1.1636vw, 2rem);
  font-weight: 700;
  text-decoration: none;
  border: 0.1rem solid #00146e;
  border-radius: 4rem;
  transition: opacity 0.2s ease;
  position: relative;
}

@media (min-width: 1025px) {
  .early-booking__button-wrapper {
    margin-top: 7rem;
  }
  .early-booking__detail-button {
    padding: 1rem 12.4rem;
  }
}

.early-booking__detail-button:hover {
  opacity: 0.8;
}

.early-booking__detail-button-arrow {
  position: absolute;
  right: 6%;
  width: 0.8em;
  height: 0.8em;
  border-top: 0.2rem solid currentColor;
  border-right: 0.2rem solid currentColor;
  transform: rotate(45deg);
}

/* ========================================
  バナーセクション
======================================== */
#banners.banners {
  position: relative;
  background-color: #eff9ff;
  padding-top: 10px;
}

.banners__list {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

@media (min-width: 1025px) {
  .banners__list {
    gap: 3.2rem;
  }
}

.banners__item {
  width: 100%;
}

.banners__link {
  display: block;
  width: 100%;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.banners__link:hover {
  opacity: 0.85;
  transform: translateY(-0.2rem);
  text-decoration: none;
}

.banners__link picture {
  display: block;
  width: 100%;
}

.banners__link img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ========================================
  Conversion Button
======================================== */
.conversion-btn {
  display: none;
  position: fixed;
  z-index: 10000;
  cursor: pointer;
  overflow: hidden;
  border: none;
  background: transparent;
  padding: 0;
}
.conversion-btn.show {
  display: block;
}

@media (min-width: 1025px) {
  .conversion-btn {
    width: calc(100vw * var(--conversion-btn-pc-width-vw));
    height: calc(100vw * var(--conversion-btn-pc-height-vw));
    top: 30vh;
    right: 0;
    transform: none;
  }
  .conversion-btn:hover .conversion-btn__img--default {
    opacity: 0;
  }
  .conversion-btn:hover .conversion-btn__img--hover {
    opacity: 1;
  }
  .conversion-btn.stopped {
    position: absolute;
    right: 0;
    top: var(--stop-top);
    z-index: 0;
  }
}

@media (max-width: 1024px) {
  .conversion-btn {
    margin: auto;
    width: calc(100vw * var(--conversion-btn-sp-width-vw));
    height: calc(100vw * var(--conversion-btn-sp-height-vw));
    left: 50%;
    bottom: 5rem;
    transform: translateX(-50%);
    background-color: transparent;
  }
  .conversion-btn__img--hover {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1024px) { 
  .conversion-btn {
    width: 54vw;
    height: 13vw;
  }
}

@media (min-width: 400px) and (max-width: 599px) { 
  .conversion-btn {
    bottom: 4.7rem;
  }
}

@media (min-width: 600px) and (max-width: 1024px) { 
  .conversion-btn {
    bottom: 4rem;
  }
}

.conversion-btn__media,
.conversion-btn__picture,
.conversion-btn__img {
  position: relative;
}
.conversion-btn__media {
  width: 100%;
  height: 100%;
  display: block;
}
.conversion-btn__picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.conversion-btn__img--hover,
.conversion-btn__img--default {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 180ms ease;
}
.conversion-btn__img--default {
  opacity: 1;
}
.conversion-btn__img--hover {
  opacity: 0;
}

/* ========================================
  Layout Helpers
======================================== */
.container {
  width: min(100%, calc(var(--container-scale) * 1200px));
  margin: 0 auto;
}

.section {
  padding-block: var(--section-spacing);
  padding-inline: var(--gutter);
  overflow: hidden;
}

.section__header.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* =====================
  Utilities
===================== */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
