/**
 * LP全体の結合済みスタイルです。
 *
 * @description
 * このファイルは `src/styles` 配下の分割CSSから自動生成されます。
 * 直接編集せず、元ファイルを更新して `npm run build:css` を実行してください。
 */

/* src/styles/foundation/reset.css */
/**
 * LP全体のリセットスタイルです。
 *
 * @description
 */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

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

a {
  color: inherit;
}

/* src/styles/foundation/variables.css */
/**
 * @description
 * `--pc` / `--sp` は `npm run build:css` 時に PostCSS が通常の @media に展開します。
 */
:root {

  /* フォント */
  --font-family-base: 游ゴシック, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Noto Sans JP", メイリオ, Meiryo, sans-serif;
  --font-family-gill-sans-nova: gill-sans-nova, sans-serif;
  --font-family-bianca: bianca, sans-serif;
  --font-family-chiaro: "fot-chiaro-std", sans-serif;

  /**
   * フォントサイズ（Figma 監査ベース・小さい順）です。
   */
  --font-size-xs: 0.625rem;
  --font-size-sm: 0.75rem;
  --font-size-md: 0.8125rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.375rem;
  --font-size-3xl: 1.5rem;
  --font-size-4xl: 1.5625rem;
  --font-size-5xl: 1.625rem;
  --font-size-6xl: 2rem;
  --font-size-7xl: 2.1875rem;
  --font-size-8xl: 2.375rem;
  --font-size-9xl: 2.5rem;
  --font-size-10xl: 3rem;
  --font-size-11xl: 6.5rem;
  --font-size-12xl: 7.8125rem;

  /**
   * フォントウェイトです。
   */
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;

  /* カラー */
  --color-text: #333333;
  --color-primary: #5c76a6;
  --color-primary-dark: #4a6290;
  --color-secondary: #e56e2e;
  --color-white: #ffffff;
  --color-blue-light: #f3f6fd;
  --color-gray: #e7e7e7;
  --color-gray-bg: #f6f7f9;
  --color-caption: #999999;
  --color-overlay: rgb(0 0 0 / var(--opacity));
  /** 白背景に 50% 黒を重ねた見え方の単色（Safari 実機向け）です。 */
  --color-overlay-solid: #808080;

  /**
   * スペーシング（8px 刻み）です。
   */
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-56: 3.5rem;
  --space-64: 4rem;

  /* レイアウト */
  --lp-content-min-width-pc: 68.75rem;
  /** SP で 375px 箱を見せる下限幅（これ未満は画面幅いっぱい）です。 */
  --layout-tablet-min: 600Px;
  --layout-side-height: max(
    0px,
    calc(100svh - var(--layout-header-height)),
    calc(100dvh - var(--layout-header-height))
  );
  --layout-header-height: 0px;

  /**
   * clampサイズ計算用のデザイン基準幅です。
   * `--lp-content-min-width-pc` は表示レイアウト用、`--design-width-pc` は clamp 計算用です。
   */
  --design-width-sp: 375Px;
  /** SP 流体計算（calc 除算）用の単位なし基準幅です。 */
  --design-width-sp-num: 375;
  /** SP 流体計算の下限幅（320px 端末向け）です。 */
  --design-width-sp-min: 320Px;
  --design-width-pc: 1280Px;
  --design-width-range: calc(var(--design-width-pc) - var(--design-width-sp));
  --design-width-sp-range: calc(var(--design-width-sp) - var(--design-width-sp-min));
  --clamp-ratio: calc((100vw - var(--design-width-sp)) / var(--design-width-range));

  /**
   * アニメーション・トランジションです。
   * 時間とイージングは個別変数で管理し、`--transition-*` でまとめて指定できます。
   */
  --ease-default: ease;
  --ease-in: ease-in;
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;
  --ease-dive: cubic-bezier(0.34, 1.35, 0.54, 1);
  /** CodePen Principle 6（Slow in and Slow out）用です。 */
  --ease-slow-in-out: cubic-bezier(0.5, 0, 0.5, 1);

  --duration-fast: 180ms;
  --duration-moderate: 600ms;
  --duration-slow: 1s;

  /** modal・KV など長めのアニメーション用（後方互換）です。 */
  --duration: var(--duration-slow);

  --transition-fast: var(--duration-fast) var(--ease-default);
  --transition-moderate: var(--duration-moderate) var(--ease-default);
  --transition-slow: var(--duration-slow) var(--ease-default);

  /** 矢印アイコン hover / focus 時の移動量です。 */
  --icon-hover-translate-y: 0.125rem;
  --icon-hover-translate-x: 0.125rem;

  --scale: 0.92;
  /** 半透明・disabled・hover 減光などに共通で使う不透明度です。 */
  --opacity: 0.6;

  /* 行送り */
  --leading-trim: calc((1em - 1lh) / 2);
}

@supports not (top: 1lh) {
  :root {
    --leading-trim: 0px; /* `px`などの単位が必要 */
  }
}

/** SP: 899px 以下 / PC: 900px 以上（900px ちょうどで SP/PC が重ならないよう整数 px を使用） */
/** タブレット: 600px 以上 899px 以下（大きめスマホは含めず、375px 箱はここだけ） */

/* src/styles/foundation/content.css */
/**
 * 特集 LP のコンテンツ枠（ラッパー）スタイルです。
 *
 * @description
 * LPコンテンツ枠のリセットと基本スタイルを定義します。
 */
.l-header-pc {
  margin-bottom: 2.375rem !important;
}

.o-special-header__info {
  position: relative;
  z-index: 30;
}

#ba_omo2607 {
  position: relative;
  font-family: var(--font-family-base);
  font-optical-sizing: auto;
  font-weight: var(--font-weight-400);
  font-feature-settings: "palt";
  font-style: normal;
  z-index: 1;
  min-height: 100dvh;
  isolation: isolate;
  background-color: var(--color-overlay-solid);
}


@media (min-width: 900px) {
  #ba_omo2607 {
    min-width: var(--lp-content-min-width-pc);
  }
}

@media (max-width: 899px) {
  #ba_omo2607 {
    min-width: 0;
  }
}

/**
 * overflow-x: clip は Safari 実機で sticky / サイド塗りを壊すため、
 * 600px 未満（スマホ全幅）に限定します。
 */
@media (max-width: 599px) {
  #ba_omo2607 {
    overflow-x: clip;
  }
}

#ba_omo2607 * {
  box-sizing: border-box;
  list-style: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


#ba_omo2607 picture {
  overflow: clip;
}



/* 行送り使い方
* h2 {
*  デザインカンプで取得した余白が32pxの場合
*  margin-block-start: calc(32px + var(--leading-trim));
* }
*
* トランジション使い方
* .c-example {
*  transition: opacity var(--transition-moderate);
*  transition: background-color var(--transition-fast);
* }
*/

/* src/styles/foundation/responsive.css */
/**
 * SP 向けレスポンシブ基盤スタイルです。
 *
 * @description
 * 900px 未満（`--sp`）での clamp 計算や流体スケール用変数を定義します。
 * 参考: BAILA 特集 LP（ba_nissan2511 等）の 375px 基準 SP デザインです。
 */

@media (max-width: 899px) {
  :root {
    /**
     * 320px〜375px の範囲で 0→1 に正規化します。
     * 375px 超の SP 幅では 1 を超えますが、各 clamp() の max で上限がかかります。
     */
    --clamp-ratio: max(
      0,
      calc((100vw - var(--design-width-sp-min)) / var(--design-width-sp-range))
    );

    /** 375px デザインカンプに対する SP 幅の比率です。 */
    --sp-scale: calc(100vw / var(--design-width-sp));
  }
}

/* src/styles/foundation/utilities.css */
/**
 * LP向けユーティリティクラスです。
 *
 * @description
 * `u-` 接頭辞の単機能クラスを定義します。
 * `.lp-content` 内での利用を想定しています。
 *
 * @example
 * .c-hero__title {
 *   --clamp-min: 32px;
 *   --clamp-max: 52px;
 * }
 * .c-hero__title.u-clamp-text { ... }
 */

.u-clamp-text {
  --clamp-range: calc(var(--clamp-max) - var(--clamp-min));
  --clamp-preferred: calc(var(--clamp-min) + var(--clamp-range) * var(--clamp-ratio));
  font-size: clamp(var(--clamp-min), var(--clamp-preferred), var(--clamp-max));
}

/* text-align */
.u-text-left {
  text-align: left;
}

.u-text-center {
  text-align: center;
}

.u-text-right {
  text-align: right;
}

.u-text-nowrap {
  white-space: nowrap;
}

.u-letter-spacing-n02 {
  letter-spacing: -0.02em;
}

/* font-weight */
.u-font-weight-400 {
  font-weight: var(--font-weight-400);
}

.u-font-weight-500 {
  font-weight: var(--font-weight-500);
}

.u-font-weight-600 {
  font-weight: var(--font-weight-600);
}

.u-font-weight-700 {
  font-weight: var(--font-weight-700);
}

/* webfont（Adobe Fonts） */
.u-font-gill-sans-nova {
  font-family: var(--font-family-gill-sans-nova);
}

.u-font-bianca {
  font-family: var(--font-family-bianca);
}

.u-font-chiaro {
  font-family: var(--font-family-chiaro);
}

/* color（text） */
.u-text-primary {
  color: var(--color-primary);
}

.u-text-secondary {
  color: var(--color-secondary);
}

.u-text-white {
  color: var(--color-white);
}

.u-text-blue-light {
  color: var(--color-blue-light);
}

.u-text-gray {
  color: var(--color-gray);
}

.u-text-gray-bg {
  color: var(--color-gray-bg);
}

/* color（background） */
.u-bg-primary {
  background-color: var(--color-primary);
}

.u-bg-secondary {
  background-color: var(--color-secondary);
}

.u-bg-white {
  background-color: var(--color-white);
}

.u-bg-blue-light {
  background-color: var(--color-blue-light);
}

.u-bg-gray {
  background-color: var(--color-gray);
}

.u-bg-gray-bg {
  background-color: var(--color-gray-bg);
}

/* spacing（margin） */
#ba_omo2607 .u-mt-8 { margin-top: var(--space-8); }
#ba_omo2607 .u-mt-16 { margin-top: var(--space-16); }
#ba_omo2607 .u-mt-24 { margin-top: var(--space-24); }
#ba_omo2607 .u-mt-32 { margin-top: var(--space-32); }
#ba_omo2607 .u-mt-40 { margin-top: var(--space-40); }
#ba_omo2607 .u-mt-48 { margin-top: var(--space-48); }
#ba_omo2607 .u-mt-56 { margin-top: var(--space-56); }
#ba_omo2607 .u-mt-64 { margin-top: var(--space-64); }

#ba_omo2607 .u-mb-8 { margin-bottom: var(--space-8); }
#ba_omo2607 .u-mb-16 { margin-bottom: var(--space-16); }
#ba_omo2607 .u-mb-24 { margin-bottom: var(--space-24); }
#ba_omo2607 .u-mb-32 { margin-bottom: var(--space-32); }
#ba_omo2607 .u-mb-40 { margin-bottom: var(--space-40); }
#ba_omo2607 .u-mb-48 { margin-bottom: var(--space-48); }
#ba_omo2607 .u-mb-56 { margin-bottom: var(--space-56); }
#ba_omo2607 .u-mb-64 { margin-bottom: var(--space-64); }

#ba_omo2607 .u-ml-8 { margin-left: var(--space-8); }
#ba_omo2607 .u-ml-16 { margin-left: var(--space-16); }
#ba_omo2607 .u-ml-24 { margin-left: var(--space-24); }
#ba_omo2607 .u-ml-32 { margin-left: var(--space-32); }
#ba_omo2607 .u-ml-40 { margin-left: var(--space-40); }
#ba_omo2607 .u-ml-48 { margin-left: var(--space-48); }
#ba_omo2607 .u-ml-56 { margin-left: var(--space-56); }
#ba_omo2607 .u-ml-64 { margin-left: var(--space-64); }

#ba_omo2607 .u-mr-8 { margin-right: var(--space-8); }
#ba_omo2607 .u-mr-16 { margin-right: var(--space-16); }
#ba_omo2607 .u-mr-24 { margin-right: var(--space-24); }
#ba_omo2607 .u-mr-32 { margin-right: var(--space-32); }
#ba_omo2607 .u-mr-40 { margin-right: var(--space-40); }
#ba_omo2607 .u-mr-48 { margin-right: var(--space-48); }
#ba_omo2607 .u-mr-56 { margin-right: var(--space-56); }
#ba_omo2607 .u-mr-64 { margin-right: var(--space-64); }

#ba_omo2607 .u-mx-8 { margin-inline: var(--space-8); }
#ba_omo2607 .u-mx-16 { margin-inline: var(--space-16); }
#ba_omo2607 .u-mx-24 { margin-inline: var(--space-24); }
#ba_omo2607 .u-mx-32 { margin-inline: var(--space-32); }
#ba_omo2607 .u-mx-40 { margin-inline: var(--space-40); }
#ba_omo2607 .u-mx-48 { margin-inline: var(--space-48); }
#ba_omo2607 .u-mx-56 { margin-inline: var(--space-56); }
#ba_omo2607 .u-mx-64 { margin-inline: var(--space-64); }

#ba_omo2607 .u-my-8 { margin-block: var(--space-8); }
#ba_omo2607 .u-my-16 { margin-block: var(--space-16); }
#ba_omo2607 .u-my-24 { margin-block: var(--space-24); }
#ba_omo2607 .u-my-32 { margin-block: var(--space-32); }
#ba_omo2607 .u-my-40 { margin-block: var(--space-40); }
#ba_omo2607 .u-my-48 { margin-block: var(--space-48); }
#ba_omo2607 .u-my-56 { margin-block: var(--space-56); }
#ba_omo2607 .u-my-64 { margin-block: var(--space-64); }

/* spacing（padding） */
#ba_omo2607 .u-pt-8 { padding-top: var(--space-8); }
#ba_omo2607 .u-pt-16 { padding-top: var(--space-16); }
#ba_omo2607 .u-pt-24 { padding-top: var(--space-24); }
#ba_omo2607 .u-pt-32 { padding-top: var(--space-32); }
#ba_omo2607 .u-pt-40 { padding-top: var(--space-40); }
#ba_omo2607 .u-pt-48 { padding-top: var(--space-48); }
#ba_omo2607 .u-pt-56 { padding-top: var(--space-56); }
#ba_omo2607 .u-pt-64 { padding-top: var(--space-64); }

#ba_omo2607 .u-pb-8 { padding-bottom: var(--space-8); }
#ba_omo2607 .u-pb-16 { padding-bottom: var(--space-16); }
#ba_omo2607 .u-pb-24 { padding-bottom: var(--space-24); }
#ba_omo2607 .u-pb-32 { padding-bottom: var(--space-32); }
#ba_omo2607 .u-pb-40 { padding-bottom: var(--space-40); }
#ba_omo2607 .u-pb-48 { padding-bottom: var(--space-48); }
#ba_omo2607 .u-pb-56 { padding-bottom: var(--space-56); }
#ba_omo2607 .u-pb-64 { padding-bottom: var(--space-64); }

#ba_omo2607 .u-pl-8 { padding-left: var(--space-8); }
#ba_omo2607 .u-pl-16 { padding-left: var(--space-16); }
#ba_omo2607 .u-pl-24 { padding-left: var(--space-24); }
#ba_omo2607 .u-pl-32 { padding-left: var(--space-32); }
#ba_omo2607 .u-pl-40 { padding-left: var(--space-40); }
#ba_omo2607 .u-pl-48 { padding-left: var(--space-48); }
#ba_omo2607 .u-pl-56 { padding-left: var(--space-56); }
#ba_omo2607 .u-pl-64 { padding-left: var(--space-64); }

#ba_omo2607 .u-pr-8 { padding-right: var(--space-8); }
#ba_omo2607 .u-pr-16 { padding-right: var(--space-16); }
#ba_omo2607 .u-pr-24 { padding-right: var(--space-24); }
#ba_omo2607 .u-pr-32 { padding-right: var(--space-32); }
#ba_omo2607 .u-pr-40 { padding-right: var(--space-40); }
#ba_omo2607 .u-pr-48 { padding-right: var(--space-48); }
#ba_omo2607 .u-pr-56 { padding-right: var(--space-56); }
#ba_omo2607 .u-pr-64 { padding-right: var(--space-64); }

#ba_omo2607 .u-px-8 { padding-inline: var(--space-8); }
#ba_omo2607 .u-px-16 { padding-inline: var(--space-16); }
#ba_omo2607 .u-px-24 { padding-inline: var(--space-24); }
#ba_omo2607 .u-px-32 { padding-inline: var(--space-32); }
#ba_omo2607 .u-px-40 { padding-inline: var(--space-40); }
#ba_omo2607 .u-px-48 { padding-inline: var(--space-48); }
#ba_omo2607 .u-px-56 { padding-inline: var(--space-56); }
#ba_omo2607 .u-px-64 { padding-inline: var(--space-64); }

#ba_omo2607 .u-py-8 { padding-block: var(--space-8); }
#ba_omo2607 .u-py-16 { padding-block: var(--space-16); }
#ba_omo2607 .u-py-24 { padding-block: var(--space-24); }
#ba_omo2607 .u-py-32 { padding-block: var(--space-32); }
#ba_omo2607 .u-py-40 { padding-block: var(--space-40); }
#ba_omo2607 .u-py-48 { padding-block: var(--space-48); }
#ba_omo2607 .u-py-56 { padding-block: var(--space-56); }
#ba_omo2607 .u-py-64 { padding-block: var(--space-64); }

@media (max-width: 899px) {
  .lp-content .u-only-pc {
    display: none !important;
  }
}

@media (min-width: 900px) {
  .lp-content .u-only-sp {
    display: none !important;
  }
}

/* src/styles/layout/layout.css */
/**
 * LP全体のレイアウトスタイルです。
 *
 * @description
 * ページ全体や汎用セクションなど、コンポーネントをまたぐ配置を定義します。
 * ブレークポイントは 900px / 899px / 600px（タブレット）です。
 * 左右カラムはグリッド行いっぱいに伸ばし、内側を sticky で固定します。
 * `.l-side__inner` は viewport 高（`--layout-side-height`）で sticky 固定します。
 * 列全体の白抜けは `.l-side` 背景で埋めます。
 * タブレット（600〜899px）ではサイド列を使わず `.l-main-contents` に単色背景を敷き、
 * 中央 375px の白箱だけを見せます（Safari の sticky / min-height 問題を回避）。
 */

.l-main-contents {
  width: 100% !important;
}

.l-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(23.4375rem, 100%) minmax(0, 1fr);
  align-items: stretch;
}

.l-content {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  background-color: var(--color-white);
}

.l-content__section {
  background-color: var(--color-white);
}


.l-side {
  grid-row: 1;
}

.l-side--left {
  grid-column: 1;
}

.l-side--right {
  grid-column: 3;
}

.l-side__inner {
  position: sticky;
  top: var(--layout-header-height);
  width: 100%;
  height: var(--layout-side-height);
  overflow: clip;
  background-color: var(--color-white);
}

.l-side__panel {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: stretch;
  opacity: 0;
  transition: opacity var(--transition-moderate);
}

#ba_omo2607 .l-side__panel img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: contain;
  object-position: center center;
}

#ba_omo2607 .l-side--right .l-side__panel img {
  height: 100%;
  min-height: 100%;
  object-position: center center;
  object-fit: cover;
}

.l-side__panel.is-active {
  opacity: 1;
}

.l-side__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--color-overlay);
  pointer-events: none;
}

.l-side__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  color: var(--color-white);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  isolation: isolate;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.l-side--right .l-side__content img{
  max-width: 23.125rem;
  width: 100%;
  object-fit: contain;
}


@media (prefers-reduced-motion: reduce) {
  .l-side__panel {
    transition: none;
  }
}

@media (min-width: 900px) {
  .l-layout {
    display: grid;
  }

  .l-side {
    display: block;
  }
}

@media (max-width: 899px) {
  .l-main-contents {
    width: 100% !important;
  }

  .l-layout {
    display: block;
  }

  .l-content {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
  }

  .l-side {
    display: none;
  }
}

/**
 * タブレット（600px〜899px）: 375px 白箱 + `.l-main-contents` 単色背景。
 * サイド列・sticky・overlay は使わず、SP と同じ block レイアウトに寄せます。
 */
@media (min-width: 600px) and (max-width: 899px) {
  .l-main-contents {
    background-color: var(--color-overlay-solid);
  }

  .l-content {
    max-width: min(23.4375rem, 100%);
    margin-inline: auto;
  }
}

/* src/styles/components/anchor.css */
/**
 * ページ内アンカーリンクセクションのスタイルです。
 *
 * @description
 * `.c-anchor__link` は行全体がクリック領域です。区切り線は左右に余白を取って表示します。
 */

.c-anchor {
  padding: var(--space-16) 0;
}

.c-anchor__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-anchor__item {
  position: relative;
}

.c-anchor__item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: var(--space-16);
  bottom: 0;
  left: var(--space-16);
  height: 1px;
  background: var(--color-gray);
}

.c-anchor__link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: var(--space-8) var(--space-16);
  color: inherit;
  text-decoration: none;
}

.c-anchor__content {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  text-align: center;
}

.c-anchor__title {
  font-family: var(--font-family-gill-sans-nova);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-500);
  line-height: 1;
}

.c-anchor__description {
  font-size: var(--font-size-sm);
  line-height: 1.2;
}

.c-anchor__button {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  color: var(--color-primary);
  background: var(--color-white);
  pointer-events: none;
}

.c-anchor__arrow-icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  transition: transform var(--duration-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .c-anchor__link:hover .c-anchor__arrow-icon {
    transform: translateY(var(--icon-hover-translate-y));
  }
}

.c-anchor__link:focus-visible {
  outline: 0.125rem solid var(--color-primary);
  outline-offset: 0.125rem;
}

.c-anchor__link:focus-visible .c-anchor__arrow-icon {
  transform: translateY(var(--icon-hover-translate-y));
}

/* src/styles/components/button.css */
/**
 * ブロック型リンクボタン（公式サイト CTA）です。
 *
 * @description
 * 2行テキストを中央寄せし、右端に矢印を配置します。
 * 左右 16px のマージンはコンポーネント内で付与します（`width: 100%` + `u-mx-*` は使わないでください）。
 */
#ba_omo2607 .c-link-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: var(--space-16);
  min-height: 3.75rem;
  padding: var(--space-8) calc(var(--space-24) + 1.25rem + var(--space-8));
  color: var(--color-white);
  font-size: var(--font-size-md);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  background-color: var(--color-primary);
  transition:
    background-color var(--duration-moderate) var(--ease-out),
    opacity var(--duration-moderate) var(--ease-out),
    transform var(--duration-moderate) var(--ease-out),
    clip-path var(--duration-slow) var(--ease-out);
}

.c-link-button__text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.c-link-button__label,
.c-link-button__sublabel {
  display: block;
}

.c-link-button__icon {
  position: absolute;
  top: 50%;
  right: var(--space-24);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  translate: 0 -50%;
  color: var(--color-white);
}

.c-link-button__arrow-icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

@media (hover: hover) and (pointer: fine) {
  #ba_omo2607 .c-link-button:hover {
    background-color: var(--color-primary-dark);
  }
}

#ba_omo2607 .c-link-button:active {
  background-color: var(--color-primary-dark);
}

#ba_omo2607 .c-link-button:focus-visible {
  outline: 0.125rem solid #2563eb;
  outline-offset: 0.1875rem;
}

/* src/styles/components/comic.css */
/**
 * 斜めラベル付き枠コンポーネントのスタイルです。
 *
 * @description
 * `.c-frame__label` は絶対配置、` .c-frame__body` は枠線付きコンテンツ領域です。
 * ラベルの位置は個別の `translate` / `rotate` で調整し、レイアウト上の基点は左上に固定します。
 */

.c-comic {
  overflow: visible;
}

.c-comic__header {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.c-comic__title {
  display: block;
}

.c-comic__title-main {
  display: block;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: pretty;
  word-break: auto-phrase;
}

.c-comic__icon {
  width: 5.625rem;
  height: 5.625rem;
  flex-shrink: 0;
}

@media (max-width: 899px) {
  .c-comic__header {
    gap: var(--space-8);
  }

  .c-comic__icon {
    width: clamp(72Px, calc(90 / var(--design-width-sp-num) * 100vw), 90Px);
    height: clamp(72Px, calc(90 / var(--design-width-sp-num) * 100vw), 90Px);
  }

  /**
   * SP では見出し幅が狭いため、XL 固定サイズを clamp で縮小します。
   * `.c-heading--xl` より詳細度を上げて font-size を上書きします。
   */
  .c-comic .c-comic__title-main {
    --clamp-min: 0.875rem;
    --clamp-max: var(--font-size-xl);
    --clamp-range: calc(var(--clamp-max) - var(--clamp-min));
    --clamp-preferred: calc(var(--clamp-min) + var(--clamp-range) * var(--clamp-ratio));
    font-size: clamp(var(--clamp-min), var(--clamp-preferred), var(--clamp-max));
  }
}

/* src/styles/components/footer.css */
/**
 * LP フッターブロックのスタイルです。
 *
 * @description
 * ブランド名・問い合わせ先・CTA・クレジットを中央寄せで配置します。
 */

.c-footer {
  text-align: center;
  margin-block: var(--space-48) 0;
}

.c-footer__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}
.c-footer__title,
.c-footer__contact-label,
.c-footer__contact-tel {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-md);
}

.c-footer__links {
  margin-top: var(--space-24);
}

.c-footer__credit {
  margin: var(--space-16) 0 0;
  color: var(--color-text);
  font-size: var(--font-size-xs);
  line-height: 1.6;
}

/* src/styles/components/frame.css */
/**
 * 斜めラベル付き枠コンポーネントのスタイルです。
 *
 * @description
 * `.c-frame__label` は絶対配置、` .c-frame__body` は枠線付きコンテンツ領域です。
 * ラベルの位置は個別の `translate` / `rotate` で調整し、レイアウト上の基点は左上に固定します。
 */

.c-frame {
  position: relative;
  border: 1px solid var(--color-gray);
}

.c-frame--borderless {
  border: none;
}

.c-frame__label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  margin: 0;
  line-height: 1;
  width: max-content;
  translate: var(--frame-label-left) var(--frame-label-top);
  rotate: var(--frame-label-rotate);
  transform-origin: left bottom;
}

.c-frame__label--lg {
  font-size: var(--font-size-7xl);
  letter-spacing: 0.07em;
}

.c-frame__label--sm {
  font-size: var(--font-size-4xl);
  /* letter-spacing: 0.07em; */
}

.c-frame__body {
  position: relative;
}

@media (max-width: 899px) {
  .c-frame__label--lg {
    font-size: clamp(28Px, calc(35 / var(--design-width-sp-num) * 100vw), 35Px);
  }

  .c-frame__label--sm {
    font-size: clamp(20Px, calc(25 / var(--design-width-sp-num) * 100vw), 25Px);
  }

  .c-frame__body {
    padding: var(--space-24) 0;
  }
}

/* src/styles/components/heading.css */
/**
 * 見出しコンポーネントのスタイルです。
 *
 * @description
 * `--font-size-*` 変数に対応する見出しサイズ修飾子を定義します。
 * 各修飾子は固定サイズです。将来 PC カンプで可変にする場合は
 * `u-clamp-text` と `--clamp-min` / `--clamp-max` を利用してください。
 */
.c-heading {
  font-size: var(--font-size-base);
}

.c-heading--md {
  font-size: var(--font-size-md);
}

.c-heading--lg {
  font-size: var(--font-size-lg);
}

.c-heading--xl {
  font-size: var(--font-size-xl);
}

.c-heading--2xl {
  font-size: var(--font-size-2xl);
}

.c-heading--4xl {
  font-size: var(--font-size-4xl);
}

.c-heading--5xl {
  font-size: var(--font-size-5xl);
}

.c-heading--6xl {
  font-size: var(--font-size-6xl);
  line-height: 1;
}

.c-heading--7xl {
  font-size: var(--font-size-8xl);
  line-height: 1;
}

.c-heading--8xl {
  font-size: var(--font-size-9xl);
  line-height: 1;
}

/* src/styles/components/kv.css */
/**
 * KV コンポーネントのスタイルです。
 *
 * @description
 * 各 `.c-kv__layer` をデザイン座標で配置し、`kvReveal` と連動してランダムな順でフェードインします。
 * `.c-kv` はヘッダー除きのビューポート高さ（`--layout-header-height`）を確保します。
 */

/* .c-kv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  min-height: calc(100svh - var(--layout-header-height));
} */

.c-kv__content {
  position: relative;
  width: 100%;
  height: calc(var(--kv-content-height) * 1px);
  container-type: inline-size;
}

.c-kv__layer {
  position: absolute;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
  top: calc(var(--kv-top) * 1px);
  left: calc(var(--kv-left) * 1px);
  width: calc(var(--kv-width) * 1px);
  height: calc(var(--kv-height) * 1px);
  opacity: 0;
}

#ba_omo2607 .c-kv__layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#ba_omo2607 .c-kv h2 ruby rt {
  font-family: var(--font-family-chiaro);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-400);
  letter-spacing: -4em;
  margin-left: 1.5em
}

#ba_omo2607 .c-kv__title-line {
  --kv-byline-top: 3em;
  display: inline-block;
  padding-bottom: 0.6em;
}

#ba_omo2607 .c-kv__title-place {
  position: relative;
}

#ba_omo2607 .c-kv__title-place::after {
  content: "by 星野リゾート";
  display: inline-block;
  position: absolute;
  right: 0;
  top: var(--kv-byline-top);
  font-family: var(--font-family-chiaro);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-400);
  line-height: 1;
  white-space: nowrap;
}

#ba_omo2607 .c-kv__content.is-active .c-kv__layer {
  animation: c-kv-reveal var(--duration-moderate) var(--ease-in) forwards;
  animation-delay: calc(var(--kv-index) * 0.2s);
}

@keyframes c-kv-reveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-kv__layer {
    opacity: 1;
  }

  #ba_omo2607 .c-kv__content.is-active .c-kv__layer {
    animation: none;
  }
}

@media (max-width: 899px) {
  .c-kv__content {
    height: auto;
    aspect-ratio: var(--kv-stage-ratio);
  }

  /**
   * SP では top / height の % が「親の高さ」基準になるため、
   * 375px カンプ基準の % とズレて縦に伸びる。
   * 横寸法（cqw）基準に統一して比率を保つ。
   */
  .c-kv__layer {
    top: calc(var(--kv-top) / var(--design-width-sp-num) * 100cqw);
    left: calc(var(--kv-left) / var(--design-width-sp-num) * 100cqw);
    width: calc(var(--kv-width) / var(--design-width-sp-num) * 100cqw);
    height: calc(var(--kv-height) / var(--design-width-sp-num) * 100cqw);
  }
}

/* src/styles/components/modal.css */
/**
 * dialog（modal）コンポーネントのスタイルです。
 *
 * @description
 * 汎用的な `data-modal` マークアップに対応する最小デザインを定義します。
 * 複数インスタンスが同時に存在しても見た目が崩れないよう、クラス単位でスコープします。
 */

.c-modal-trigger {
  width: min(70rem, calc(100% - 2.5rem));
  margin: 0 auto;
  padding-bottom: 1.5rem;
}

.c-modal {
  position: fixed;
  inset: 0;
  width: min(47.5rem, calc(100% - 3rem));
  max-height: calc(100dvh - 3rem);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 1rem;
  overflow: visible;
  opacity: 0;
  scale: var(--scale);
  background: transparent;
  z-index: 10000;
  transition:
    display var(--transition-slow) allow-discrete,
    overlay var(--transition-slow) allow-discrete,
    opacity var(--transition-slow),
    scale var(--transition-slow);
}

.c-modal[open] {
  opacity: 1;
  scale: 1;

  @starting-style {
    opacity: 0;
    scale: var(--scale);
  }
}

.c-modal[open]::backdrop {
  opacity: 1;

  @starting-style {
    opacity: 0;
  }
}

.c-modal::backdrop {
  background: rgb(15 23 42 / 72%);
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.c-modal,
.c-modal * {
  box-sizing: border-box;
}

.c-modal__inner {
  width: 100%;
  max-height: calc(100dvh - 3rem);
  margin: 0;
  padding: 1.5rem;
  border-radius: 1rem;
  overflow-y: auto;
  background: #ffffff;
  -webkit-overflow-scrolling: touch;
}

.c-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.c-modal__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
}

.c-modal__close {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid #94a3b8;
  border-radius: 62.4375rem;
  color: #0f172a;
  background: #ffffff;
  cursor: pointer;
}

.c-modal__close:focus-visible {
  outline: 0.125rem solid #2563eb;
  outline-offset: 0.1875rem;
}

@media (max-width: 899px) {
  .c-modal-trigger {
    padding-bottom: 1rem;
  }

  .c-modal {
    width: calc(100% - 2rem);
    max-height: calc(100dvh - 2rem);
  }

  .c-modal__inner {
    max-height: calc(100dvh - 2rem);
    padding: 1rem;
  }
}

/* src/styles/components/opening.css */
/**
 * オープニングオーバーレイのスタイルです。
 *
 * @description
 * ヘッダー高さを差し引いた表示領域に演出を重ね、タイトルを遅延表示します。
 * `.is-opening` 解除時はフェードアウトして操作をページへ戻します。
 */

.c-opening {
  position: fixed;
  inset-inline: 0;
  top: var(--layout-header-height);
  z-index: 40;
  display: grid;
  place-items: center;
  width: 100%;
  height: calc(100svh - var(--layout-header-height));
  background-color: var(--color-white);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow-x: hidden;
  overflow-x: clip;
  transition:
    opacity 0.8s var(--ease-out),
    visibility 0s linear 0.8s;
}

.is-opening .c-opening {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: none;
}

.is-opening .c-opening.is-active {
  transition-delay: 0s;
}

.c-opening.is-complete {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#ba_omo2607 .l-main-contents {
  transition: opacity 0.6s var(--ease-out);
}

#ba_omo2607.is-opening .l-main-contents {
  opacity: 0;
  visibility: hidden;
}

#ba_omo2607.is-ready .l-main-contents {
  opacity: 1;
  visibility: visible;
}

.c-opening__copy {
  text-align: center;
  color: var(--color-text);
  font-family: var(--font-family-chiaro);
  width: min(100%, 40rem);
  padding-inline: var(--space-16);
  white-space: normal;
  overflow-wrap: anywhere;
  overflow-x: clip;
}

.c-opening__line {
  margin: 0;
  letter-spacing: 0.03em;
}

.c-opening__line span {
  display: inline-block;
  opacity: 0;
  transform: translateY(1.5rem);
}

.c-opening__line--main {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-500);
}

.c-opening__line--sub {
  margin-top: var(--space-8);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-500);
}

.c-opening.is-playing .c-opening__line--main span {
  animation: c-opening-text-rise 1s var(--ease-out) forwards 0.2s;
}

.c-opening.is-playing .c-opening__line--sub span {
  animation: c-opening-text-rise 1.1s var(--ease-out) forwards 0.7s;
}

@keyframes c-opening-text-rise {
  0% {
    opacity: 0;
    transform: translateY(1.5rem);
  }

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

@media (max-width: 899px) {
  .c-opening__line--main {
    font-size: clamp(16Px, calc(20 / var(--design-width-sp-num) * 100vw), 20Px);
  }

  .c-opening__line--sub {
    margin-top: clamp(6Px, calc(8 / var(--design-width-sp-num) * 100vw), 8Px);
    font-size: clamp(13Px, calc(16 / var(--design-width-sp-num) * 100vw), 16Px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-opening {
    transition: none;
  }

  .c-opening__line span {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* src/styles/components/pagetop.css */
/**
 * ページトップ固定ボタンのスタイルです。
 *
 * @description
 * 中央 375px コンテンツ列の右下に追従表示します。
 * `.c-sns` に到達したら `.l-content` 内で `absolute` に切り替えます。
 * 追従中の `right` は `pageTop.ts` が `.l-content` 基準で inline 指定します。
 * 下記の `calc` は JS 無効時のフォールバックです。
 * PC・タブレットは中央 375px 列（`.l-content`）右端から 16px、スマホは幅 100% 右端から 16/375（%）です。
 * 色・サイズは `.c-slider__button` と揃えています。
 */

.c-pagetop {
  --pagetop-offset-x: var(--space-16);
  --pagetop-offset-y: var(--space-24);
  position: fixed;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  color: var(--color-primary);
  background: rgb(255 255 255 / var(--opacity));
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--transition-fast),
    visibility var(--transition-fast);
}

.c-pagetop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.c-pagetop:not(.is-anchored) {
  bottom: var(--pagetop-offset-y);
  right: calc(50% - min(var(--design-width-sp), 100vw) / 2 + var(--pagetop-offset-x));
}

.c-pagetop.is-anchored {
  position: absolute;
  bottom: var(--pagetop-offset-y);
  right: var(--pagetop-offset-x);
}

.c-pagetop.is-visible:hover {
  opacity: var(--opacity);
}

.c-pagetop__icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  transition: transform var(--duration-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .c-pagetop:hover .c-pagetop__icon {
    transform: translateY(calc(-1 * var(--icon-hover-translate-y)));
  }
}

.c-pagetop:focus-visible {
  outline: 0.125rem solid var(--color-primary);
  outline-offset: 0.1875rem;
}

.c-pagetop:focus-visible .c-pagetop__icon {
  transform: translateY(calc(-1 * var(--icon-hover-translate-y)));
}

@media (prefers-reduced-motion: reduce) {
  .c-pagetop,
  .c-pagetop__icon {
    transition: none;
  }
}

@media (max-width: 899px) {
  .c-pagetop {
    --pagetop-offset-y: clamp(
      calc(24 / var(--design-width-sp-num) * var(--design-width-sp-min)),
      calc(24 / var(--design-width-sp-num) * 100vw),
      var(--space-24)
    );
  }
}

/** スマホ（〜599px）: `.l-content` が画面幅いっぱいのため % 指定です。 */
@media (max-width: 599px) {
  .c-pagetop {
    --pagetop-offset-x: calc(16 / var(--design-width-sp-num) * 100%);
  }

  .c-pagetop:not(.is-anchored) {
    right: var(--pagetop-offset-x);
  }
}

/** タブレット（600〜899px）: `.l-content` は 375px 中央寄せのため列基準で配置します。 */
@media (min-width: 600px) and (max-width: 899px) {
  .c-pagetop {
    --pagetop-offset-x: var(--space-16);
  }

  .c-pagetop:not(.is-anchored) {
    right: calc(50% - min(var(--design-width-sp), 100vw) / 2 + var(--pagetop-offset-x));
  }
}

/* src/styles/components/paragraph.css */
/**
 * 段落コンポーネントのスタイルです。
 *
 * @description
 * `--font-size-*` 変数に対応する見出しサイズ修飾子を定義します。
 */

.c-paragraph {
  font-size: var(--font-size-md);
}

/* src/styles/components/profile.css */
/**
 * プロフィールコンポーネントのスタイルです。
 *
 * @description
 * `.c-profile__image` は円形のプロフィール画像を表示します。
 */

.c-profile__image {
  width: 9.375rem;
  height: 9.375rem;
  margin-inline: auto;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--color-gray);
  border: 0.125rem solid var(--color-text);
}

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

/* src/styles/components/reveal.css */
/**
 * スクロールリビール（scrollReveal）のスタイルです。
 *
 * @description
 * `.js-reveal` に種別クラスを付与し、JS が `is-revealed` を付けたときにアニメーションします。
 * オープニング中（`.is-opening`）は初期状態を維持します。
 */

.js-reveal {
  opacity: 0;
  transition:
    opacity var(--duration-moderate) var(--ease-out),
    transform var(--duration-moderate) var(--ease-out),
    clip-path var(--duration-slow) var(--ease-out);
}

.js-reveal.is-revealed {
  opacity: 1;
}

/* 下から + opacity */
.js-reveal-fade-up {
  transform: translateY(1.5rem);
}

.js-reveal-fade-up.is-revealed {
  transform: translateY(0);
}

/* 左から + opacity（Slow in / Slow out） */
.js-reveal-fade-left {
  transform: translateX(-2.5rem);
  transition:
    opacity var(--duration-slow) var(--ease-slow-in-out),
    transform var(--duration-slow) var(--ease-slow-in-out);
}

.js-reveal-fade-left.is-revealed {
  transform: translateX(0);
}

/* 右から + opacity（Slow in / Slow out） */
.js-reveal-fade-right {
  transform: translateX(2.5rem);
  transition:
    opacity var(--duration-slow) var(--ease-slow-in-out),
    transform var(--duration-slow) var(--ease-slow-in-out);
}

.js-reveal-fade-right.is-revealed {
  transform: translateX(0);
}

/* clip-path 右から */
.js-reveal-clip-right {
  clip-path: inset(0 100% 0 0);
}

.js-reveal-clip-right.is-revealed {
  clip-path: inset(0 0 0 0);
}

/* clip-path 左から */
.js-reveal-clip-left {
  clip-path: inset(0 0 0 100%);
}

.js-reveal-clip-left.is-revealed {
  clip-path: inset(0 0 0 0);
}

/* 回転登場（ギャラリーは --spot-gallery-rotate を最終角度に利用） */
.js-reveal-rotate {
  transform: rotate(calc(var(--spot-gallery-rotate, 0deg) - 8deg)) scale(0.92);
}

.js-reveal-rotate.is-revealed {
  transform: rotate(var(--spot-gallery-rotate, 0deg)) scale(1);
}

/* イラスト飛び込み */
.js-reveal-dive {
  opacity: 0;
  animation: none;
}

.js-reveal-dive.is-revealed {
  animation: c-reveal-dive 1.05s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/**
 * CodePen（donovanh / QwzYOz）の bounce を参考にした縦方向バウンスです。
 * 右方向の移動・回転は使わず、上から落下して減衰しながら定位置へ収束します。
 */
@keyframes c-reveal-dive {
  0% {
    opacity: 0;
    transform: translateY(-2.5rem);
    animation-timing-function: cubic-bezier(0.24, 0, 0.22, 1);
  }

  22% {
    opacity: 1;
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  36% {
    transform: translateY(-0.5rem);
    animation-timing-function: cubic-bezier(0.24, 0, 0.22, 1);
  }

  55%,
  100% {
    opacity: 1;
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.19, 1, 0.7, 1);
  }
}

/** イラスト飛び込み用のラッパーです。 */
.c-reveal-dive-wrap {
  overflow: hidden;
}

/* pin 見出し色（scrollReveal 連動） */
.js-pin-color {
  color: var(--color-primary);
  transition: color 1s var(--ease-out);
}

.js-pin-trigger.is-revealed .js-pin-color {
  color: var(--color-blue-light);
}

.is-opening .js-reveal,
.is-opening .js-reveal.is-revealed {
  opacity: 0;
  animation: none;
  transition: none;
}

@media (max-width: 899px) {
  .js-reveal-fade-up {
    transform: translateY(1rem);
  }

  .js-reveal-fade-left {
    transform: translateX(-1.5rem);
  }

  .js-reveal-fade-right {
    transform: translateX(1.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-pin-color {
    transition: none;
  }

  .js-reveal {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
    animation: none;
  }

  .js-reveal.is-revealed {
    opacity: 1;
    transform: none;
    clip-path: none;
    animation: none;
  }
}

/* src/styles/components/slider.css */
/**
 * スライダーコンポーネントのスタイルです。
 *
 * @description
 * 汎用的な `data-slider` マークアップと Swiper 用の最小デザインを定義します。
 * modal内外を問わず、複数インスタンスが同時に存在しても見た目が崩れないようクラス単位でスコープします。
 */

.c-slider {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-rows: auto auto;
  overflow: visible;
}

.c-slider__stage {
  grid-area: 1 / 1;
  width: 100%;
  min-width: 0;
}

.c-slider__viewport {
  width: 100%;
  min-width: 0;
}

.c-slider__slide {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.c-slider__image {
  display: block;
  width: 100%;
}

.c-slider__controls {
  grid-area: 1 / 1;
  z-index: 2;
  pointer-events: none;
}

.c-slider__pagination {
  grid-row: 2;
  position: static;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  margin-top: var(--space-16);
  padding: 0;
}

.c-slider__pagination.swiper-pagination-horizontal {
  bottom: auto;
  left: auto;
}

.c-slider__pagination .swiper-pagination-bullet {
  width: 0.5rem;
  height: 0.5rem;
  margin: 0 !important;
  border-radius: 50%;
  opacity: 1;
  background-color: var(--color-gray);
  transition: background-color var(--duration-fast) var(--ease-out);
}

.c-slider__pagination .swiper-pagination-bullet-active {
  background-color: var(--color-primary);
}

.c-slider__button {
  position: absolute;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  color: var(--color-primary);
  background: rgb(255 255 255 / var(--opacity));
  cursor: pointer;
  pointer-events: auto;
}

.c-slider__button[data-slider-prev] {
  left: 0;
  translate: 0 -50%;
}

.c-slider__button[data-slider-next] {
  right: 0;
  translate: 0 -50%;
}

.c-slider__arrow-icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  transition: transform var(--duration-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .c-slider__button[data-slider-prev]:not(:disabled):hover .c-slider__arrow-icon {
    transform: translateX(calc(-1 * var(--icon-hover-translate-x)));
  }

  .c-slider__button[data-slider-next]:not(:disabled):hover .c-slider__arrow-icon {
    transform: translateX(var(--icon-hover-translate-x));
  }
}

.c-slider__button[data-slider-prev]:not(:disabled):focus-visible .c-slider__arrow-icon {
  transform: translateX(calc(-1 * var(--icon-hover-translate-x)));
}

.c-slider__button[data-slider-next]:not(:disabled):focus-visible .c-slider__arrow-icon {
  transform: translateX(var(--icon-hover-translate-x));
}

.c-slider__button:disabled {
  opacity: var(--opacity);
  cursor: not-allowed;
}

.c-slider__button:focus-visible {
  outline: 0.125rem solid var(--color-primary);
  outline-offset: 0.1875rem;
}

.swiper {
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}

.swiper-wrapper {
  position: relative;
  display: flex;
  width: 100%;
  transition-property: transform;
}

.swiper-slide {
  display: block;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  transition-property: transform;
}

/* src/styles/components/sns.css */
/**
 * SNSシェアリンクのスタイルです。
 *
 * @description
 * フッター直下に X / Facebook / LINE を中央寄せで並べます。
 * 各SNSアイコンは 26px 四方です。
 */

.c-sns {
  padding-block: var(--space-24);
}

.c-sns__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-24);
  margin: 0;
  padding: 0;
  list-style: none;
}

/**
 * common `parts.css` の `m-official__sn` 指定が入っても、
 * LP 側の SNS レイアウトを優先します。
 */
.c-sns .c-sns__list.m-official__sn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: var(--space-24);
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.c-sns .c-sns__list.m-official__sn > li {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0;
}

.c-sns__item {
  margin: 0;
}

.c-sns__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  transition: opacity var(--transition-fast);
}

.c-sns__link:hover {
  opacity: var(--opacity);
}

.c-sns__icon {
  display: block;
  width: 1.625rem;
  height: 1.625rem;
  object-fit: contain;
}

.c-sns__link--x {
  background-color: #000000;
  padding: 0.3125rem;
}

.c-sns__link--x .c-sns__icon {
  width: 100%;
  height: 100%;
}

.c-sns__link--facebook {
  background-color: #0866ff;
  padding: 0.25rem 0.375rem;
}

.c-sns__link--facebook .c-sns__icon {
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .c-sns__link {
    transition: none;
  }
}

/* src/styles/components/spot.css */
/**
 * スポット紹介ブロック（c-spot）のスタイルです。
 *
 * @description
 * あしらい見出し・施設ブロック・Information 枠の静的レイアウトを定義します。
 * `.c-spot__deco` を背面に重ね、GSAP pin で foreground が手前を流れる構成です（SP / PC 共通）。
 * アニメーション用フックは `.js-reveal-*` クラス（`revealClass` prop）を参照してください。
 */

.c-spot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-40) 0;
  overflow: visible;
}

.c-spot__deco,
.c-spot__foreground {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  width: 100%;
}

.c-spot__deco {
  z-index: 0;
  pointer-events: none;
}

.c-spot__foreground {
  z-index: 1;
  padding-top: var(--spot-deco-en-height, 7.5rem);
}

/* あしらい見出し（eyebrow + name-en） */
/* .c-spot__deco {
  padding-inline: var(--space-16);
} */

.c-spot__deco-en {
  position: relative;
  overflow: clip;
}

.c-spot__foreground {
  position: relative;
}

.c-spot__deco-body {
  margin-top: 0;
  padding-bottom: var(--space-16);
}

.c-spot__eyebrow {
  font-size: var(--font-size-9xl);
  line-height: 0.85;
  letter-spacing: 0.02em;
  margin-inline-start: var(--spot-eyebrow-margin-x, 0);
}

.c-spot__eyebrow-initial {
  font-size: 2.6em;
  font-weight: var(--font-weight-400);
  line-height: 0.85;
}

.c-spot__eyebrow-rest {
  font-size: 1em;
  font-weight: var(--font-weight-400);
  line-height: 0.85;
}

/**
 * TOWN セクションのみ、`T` と `OWN` の詰めを強めます。
 */
.l-content__section--town .c-spot__eyebrow-rest {
  position: relative;
  left: -0.4em;
}

.c-spot__name-en {
  margin-top: var(--space-8);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-400);
  line-height: 0.79;
  margin-inline-start: var(--spot-name-en-margin-x, 0);
}

.c-spot__name-ja {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-500);
  line-height: 1.4;
}

.c-spot__lead {
  margin-top: var(--space-24);
  font-size: var(--font-size-md);
  line-height: 1.8;
}

/* スポットブロック */
.c-spot__block {
  margin-top: 0;
  padding-top: var(--space-40);
}

.c-spot__block--intro {
  margin-top: 0;
  padding-top: var(--space-16);
}

.c-spot__category {
  padding: 0;
}

.c-spot__block--line-right .c-spot__category {
  padding-left: var(--space-16);
}

.c-spot__block--line-left .c-spot__category {
  padding-right: var(--space-16);
}

.c-spot__category-label {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-600);
  line-height: 1;
}

.c-spot__block--line-right .c-spot__category-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-primary);
}

.c-spot__block--line-left .c-spot__category-label::before {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-primary);
}

.c-spot__category-meta {
  margin-top: var(--space-8);
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.c-spot__category-meta-inner {
  display: inline-flex;
  align-items: center;
  gap: 1.6px;
}

.c-spot__category-meta-icon {
  display: block;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

.c-spot__category-meta-text{
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-700);
}

.c-spot__intro {
  margin-top: var(--space-16);
  padding-inline: var(--space-16);
}

.c-spot__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-700);
  line-height:1.28;
}

.c-spot__lead {
  margin-top: var(--space-16);
  font-size: var(--font-size-md);
  line-height: 1.8;
}

/* メイン画像（clip-path 予定） */
.c-spot__main {
  margin-top: var(--space-24);
}

.c-spot__main--clip {
  overflow: hidden;
}

.c-spot__main--padded {
  padding-inline: var(--space-16);
}

.c-spot__block--intro .c-spot__main {
  margin-top: var(--space-32);
}

.c-spot__main-image {
  display: block;
  width: 100%;
}

.c-spot__main-caption {
  margin-top: var(--space-4);
  padding-inline: var(--space-16);
  font-size: var(--font-size-xs);
  line-height: 1.2;
  color: var(--color-caption);
}

/* サブ画像・コメント画像ギャラリー（absolute 配置） */
.c-spot__gallery {
  margin-top: var(--space-16);
  padding-inline: var(--space-16);
  overflow-x: clip;
  overflow-y: visible;
}

.c-spot__gallery-stage {
  position: relative;
  width: 100%;
}

.c-spot__gallery-stage--ratio {
  aspect-ratio: var(--spot-gallery-ratio);
  height: auto;
}

.c-spot__gallery-item {
  position: absolute;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: auto;
  top: calc(var(--spot-gallery-top) * 1px);
  right: calc(var(--spot-gallery-right) * 1px);
  bottom: calc(var(--spot-gallery-bottom) * 1px);
  left: calc(var(--spot-gallery-left) * 1px);
  width: calc(var(--spot-gallery-width) * 1px);
  z-index: var(--spot-gallery-z, 1);
  overflow: visible;
  pointer-events: none;
}

.c-spot__gallery-image {
  display: block;
  width: 100%;
}

.c-spot__gallery-caption {
  margin-top: var(--space-4);
  font-size: var(--font-size-xs);
  line-height: 1.2;
  color: var(--color-caption);
}

/* 本文 */
.c-spot__body {
  padding-inline: var(--space-16);
}

.c-spot__body-text + .c-spot__body-text {
  margin-top: var(--space-16);
}

.c-spot__body-text {
  font-size: var(--font-size-md);
  line-height: 1.8;
}

/* Information 枠 */
.c-spot__info {
  margin-top: var(--space-40);
}

.c-spot__info-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.c-spot__info-title {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-700);
  text-decoration: underline;
}

.c-spot__info-thumb {
  max-width: 12.5rem;
  width: 100%;
  margin-inline: auto;
}

.c-spot__info-thumb img {
  display: block;
  width: 100%;
}

.c-spot__info-list {
  margin: 0;
}

.c-spot__info-term {
  margin: 0;
}

.c-spot__info-list dd + dt {
  margin-block-start: calc(var(--space-16) + var(--leading-trim));
}

.c-spot__info-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 1.125rem;
  padding-inline: var(--space-8);
  border-radius: 62.4375rem;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: 1;
  white-space: nowrap;
  background: var(--color-gray);
}

.c-spot__info-detail {
  font-size: var(--font-size-sm);
  line-height: 1.58;
}

.c-spot__info-note {
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: 1.5;
}

.c-spot__info-footer {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.c-spot__info-link {
  display: block;
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-700);
  text-decoration: underline;
}

.c-spot__info-link:focus-visible {
  outline: 0.125rem solid var(--color-primary);
  outline-offset: 0.125rem;
}

@media (max-width: 899px) {
  .c-spot {
    padding-block: var(--space-40);
  }

  .c-spot__eyebrow {
    font-size: clamp(34Px, calc(40 / var(--design-width-sp-num) * 100vw), 40Px);
  }

  .c-spot__name-en {
    font-size: clamp(22Px, calc(26 / var(--design-width-sp-num) * 100vw), 26Px);
  }

  .c-spot__gallery {
    overflow-x: clip;
  }

  /**
   * 配置値はカンプ上の px（ステージ幅・高さ基準）です。
   * 横（left / right / width）はステージ幅、縦（top / bottom）はステージ高さに対する % に換算します。
   */
  .c-spot__gallery-stage--ratio .c-spot__gallery-item {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto;
    top: calc(var(--spot-gallery-top) / var(--spot-gallery-ratio-height) * 100%);
    right: calc(var(--spot-gallery-right) / var(--spot-gallery-ratio-width) * 100%);
    bottom: calc(var(--spot-gallery-bottom) / var(--spot-gallery-ratio-height) * 100%);
    left: calc(var(--spot-gallery-left) / var(--spot-gallery-ratio-width) * 100%);
    width: calc(var(--spot-gallery-width) / var(--spot-gallery-ratio-width) * 100%);
  }
}

/* src/styles/components/tag.css */
/**
 * タグコンポーネントのスタイルです。
 */
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 0.25rem 0.75rem;
  border-radius: 1.25rem;
  color: var(--color-white);
  font-weight: 700;
  text-decoration: none;
  background: var(--color-primary);
}