@charset "UTF-8";
/***********************************************************
/*  animations/mixins
************************************************************/
/******************************************************************
* アニメーション制御
* ユーザーのアニメーション制御設定による判定分け
*******************************************************************/
/* アニメーション制限をしていない場合
----------------------------------------------------------------- */
/* OSやブラウザでアニメーション減らす設定をしている場合
----------------------------------------------------------------- */
/******************************************************************
 * カルーセル用アニメーション
 * 動かす要素は半分で連結できる形を準備。transformで半分動かしてループさせる

 * $_direction：方向　to-top, top-bottom, top-left, to-right
 ******************************************************************/
@-webkit-keyframes carousel-to-top {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
@keyframes carousel-to-top {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
@-webkit-keyframes carousel-to-bottom {
  from {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  to {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
@keyframes carousel-to-bottom {
  from {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  to {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
@-webkit-keyframes carousel-to-left {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@keyframes carousel-to-left {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@-webkit-keyframes carousel-to-right {
  from {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  to {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@keyframes carousel-to-right {
  from {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  to {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
/******************************************************************
 * フェードアニメーション（汎用）
 * モーダル等、表示切替で使う。JS は is_xxx クラスを付けるだけ。CSS でアニメーションを適用する。
 ******************************************************************/
/**
 * フェード用の transition を指定する mixin
 * @param {number|string} $duration - アニメーション時間（例: 400ms, 0.4s）
 * @param {string} $ease - イージング（例: ease, ease-out）
 */
/**
 * フェードイン用の初期状態（非表示）
 * transition と併用する。is_xxx 付与で opacity: 1; visibility: visible; をブロック側で指定する
 */
/**
 * フェード表示状態（is_xxx 付与時用）
 * ブロックの .is_active 等で @include fade-visible する
 */
/***********************************************************
/*  animations/keyframes
************************************************************/
/***********************************************************
/*  animations/contracts
************************************************************/
/******************************************************************
 * アコーディオンコンテンツの表示・非表示処理
 * - accordion.jsの処理によって付与されるis_activeと連動してアコーディオンのコンテンツを表示・非表示する
 * - 親：has_accordion　コンテンツ：has_accordion_contents
 * ※中のコンテンツにpadding-top margin-topを付ける場合、contentsの中にinnerを1つ格納し、その中の要素に対してpadding、marginを付ける
 ******************************************************************/
.has_accordion_contents {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 0fr;
  grid-template-rows: 0fr;
  -webkit-transition: grid-template-rows 0.5s ease, opacity 0.55s ease;
  transition: grid-template-rows 0.5s ease, opacity 0.55s ease;
  transition: grid-template-rows 0.5s ease, opacity 0.55s ease, -ms-grid-rows 0.5s ease;
  opacity: 0;
}
.has_accordion_contents > * {
  min-height: 0;
  overflow: hidden;
}
.has_accordion.is_active .has_accordion_contents {
  -ms-grid-rows: 1fr;
  grid-template-rows: 1fr;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .has_accordion_contents {
    -webkit-transition: none;
    transition: none;
  }
}

/***********************************************************
/*  foundation/functions
************************************************************/
/******************************************************************
* get-scrollbar-width　スクロールバー幅を返す
* JS が :root の --scrollbar-width にセットする値を参照する
* JS無効時は scrollbar-width-set のフォールバック値が使われる
*  例) width: calc(100vw - get-scrollbar-width());
*******************************************************************/
/******************************************************************
* strip-unit　単位を除去する、または指定した単位に変換する
* @param $value 単位を除去したい値(単位有)
* @param $unit オプション: 変換したい単位(単位有) 例: 1px, 1rem, 1%
*  例) strip-unit(32px) → 32
*  例) strip-unit(32px, 1rem) → 2rem
*******************************************************************/
/******************************************************************
* get-viewport-unit　スクロールバー除外幅の等分単位を返す
* JS が :root の --viewport-unit にセットする値（画面幅の1%）を参照する
* @param $_scale 倍率（単位無し。省略時 1 = 1%、100 = 全幅）
*  例) width: get-viewport-unit(100);
*  例) right: calc((get-viewport-unit(100) - s(1080)) / 2);
*******************************************************************/
/******************************************************************
* height-string　行の高さを取得する
* @param $_line 行数
* @param $_font-size フォントサイズ (単位あり)
* @param $_line-height 行間
* 例) 3行 サイズ16px 行間1.5 (3, 16px, 1.5);
*******************************************************************/
/******************************************************************
* setVw　vw値を返す
* @param $_size 計算したい値(単位無し)
* @param $_base 基準となる値(単位無し)
* @param $_min	最小値(単位有)　※値がマイナスでも、大小は絶対値で考える
* @param $_min	最大値(単位有)　※値がマイナスでも、大小は絶対値で考える
*******************************************************************/
/******************************************************************
* scrollbar-width-set
* jsから渡される--scrollbar-widthのフォールバック
* スクロールバー幅（JSで実測値に更新。JS無効時は$width-scrollbarがフォールバック）
* 参照時は get-scrollbar-width() を使用する
* @example
*   @include scrollbar-width-set;
*******************************************************************/
/******************************************************************
* 変数・取得設定
* Mapの取得用functionがある場合は、該当のfunctionを使用して値を設定します。
* (スニペット使用推奨)
*******************************************************************/
/* base font size
----------------------------------------------------------------- */
/* size
----------------------------------------------------------------- */
/* breakpoint
----------------------------------------------------------------- */
/* 中
/*
----------------------------------------------------------------- */
/* style
----------------------------------------------------------------- */
/* section
----------------------------------------------------------------- */
/* content space
----------------------------------------------------------------- */
/* container
----------------------------------------------------------------- */
/* color
/* _color-themes.scss 「mod()」にて、data-theme属性を元に色を出し分け可能
/* ①-1 モード切り替えあり - 自動色変換
/*     ⇒ ・$colorsにモード毎の色を定義
/*        ・_color-themes.scss generate-color-themes()にて
            data-theme属性毎に、$colorsの色をCSSに設定(globalで呼び出し)
/*        ・get-color(①)で、設定したCSS変数を取得する
/* ①-2 モード切り替えあり - mod()を使用して手動で変換
/*     ⇒ ・上記のCSS生成不要(generate-color-themes()不要)
/*        ・※下記のカラー実装パターン参照
/* ②   モード切り替えなし
/*     ⇒ ・※下記のカラー実装パターン参照
/*
/* <カラー実装パターン>
/* ・役割毎に色が管理されている場合
/*   ⇒ $colorsを使用する(モード切り替えがない場合でもdefaultで運用)
/* ・役割毎に管理されていない場合
/*   ⇒ $color-paletteを直接参照するget-color(②)を使用する
----------------------------------------------------------------- */
/* font
----------------------------------------------------------------- */
/* image
----------------------------------------------------------------- */
/* height
----------------------------------------------------------------- */
/* transition
----------------------------------------------------------------- */
/* border radius
----------------------------------------------------------------- */
/* border width
----------------------------------------------------------------- */
/* effects
----------------------------------------------------------------- */
/* z-index
----------------------------------------------------------------- */
/******************************************************************
* s　リキッド対応の値変換（s()の仕様も統合）
* CSS変数(--liq-unit)を使用して、各ブレイクポイントで自動的に計算が変更される
* $style-settingsの設定に基づいて、以下の4つのタイプに対応:
*   - type="liquid" => リキッド（vw）
*   - type="responsive" => レスポンシブ（rem、s()の仕様を統合）
*   - type="fixed" => 前時点のリキッドでの固定化
*   - type="none" => 変更しない（前の値を継承）
* @param $_number 数値（デザイン上のスケール値）
* @param $_min 省略可。算出値の下限（単位付き推奨。例: 9px）
* @param $_max 省略可。算出値の上限（単位付き推奨）
*  例) padding: s(30);
*  例) font-size: s(10, 9px, 24px); → clamp(9px, calc(...), 24px)
*******************************************************************/
/******************************************************************
* sh　画面高さ(lvh)を考慮したリキッド対応の値変換
* s() と同じ --liq-unit を基準とし、横長端末では比率に基づく lvh 換算で縮小する
*
* 算出:
*   min(
*     s() の値,
*     s() の値 × aspect-ratio × var(--lvh-vw-ratio)
*   )
*
* 横長 (100vw / 100lvh > aspect-ratio) のとき lvh 側が小さくなり縮小する。
* 縦長のとき lvh 側は s() 以上になるため、s() が上限として維持される。
* --lvh-vw-ratio は通常 100lvh / 100vw。
* $style-settings の 'min-height' 指定時は
* max(100lvh, min-height) / 100vw となり、その高さ未満ではそれ以上縮めない
* （コンテンツがビューポートを超える場合はブラウザのスクロールに任せる）。
* 呼び出しの $_min-height 指定時は、その値で高さフロアを個別指定する
* （全体の --lvh-vw-ratio は使わない）。$_min（算出値の下限）とは別物。
* calc() 内に clamp をネストしない（ブラウザが不正値と判定するため）。
*
* @param $_number 数値（デザイン上のスケール値）
* @param $_min 省略可。s() と同様（算出結果の下限）
* @param $_max 省略可。s() と同様
* @param $_aspect-ratio 省略可。比率基準（幅/高さ）
*   - 数値: 375 / 667 の結果（例: 0.562）
*   - リスト: (375, 667)
*   省略時は CSS 変数 --aspect-ratio-threshold を使用
* @param $_min-height 省略可。この算出だけに適用する画面高さフロア（単位なし px 相当）
*  例) height: sh(600);
*  例) gap: sh(40, null, null, (16, 9));
*  例) height: sh(600, $_min-height: 1000);
*******************************************************************/
/******************************************************************
* %計算
* @param $number 数値
* @param $basis %を計算するための基準値(幅)
* 例) 値1000に対して50の%値 (50, 1000);
*******************************************************************/
/******************************************************************
* vw(%)指定時、指定幅時点の固定値取得
* @param $number 数値
* @param $basis vw(%)を計算するための基準幅
* @param $width 求めたい時点の幅
* 例) 画面幅1280px時点で100pxとなるvw変化において、画面幅1400px時点での値を取得する。(100, 1280, 1400);
*******************************************************************/
/******************************************************************
* width-string　行の高さを取得する
* @param $num 文字数
* @param $font_size フォントサイズ (単位あり)
* @param $letter-spacing 文字間
* 例) 30文字の横幅 サイズ16px 文字間0.03em (30, 16px, 0.03em);
*******************************************************************/
/***********************************************************
/*  foundation/mixins/setup
************************************************************/
/******************************************************************
* メディアクエリ
* $media-query-strategy で 'sp-first' または 'pc-first' を切り替え可能
*******************************************************************/
/* 連番ベースの汎用メディアクエリ
* $key: ブレイクポイントのキー（文字列）または具体的な値（数値）
* $max-key: オプション。範囲指定の場合の最大キー（文字列）または具体的な値（数値）
* variablesで設定した順序に応じて適用
*
* sp-first: 1が最小、数が大きくなるほど画面サイズが大きい
*
* pc-first: 1が最大、数が大きくなるほど画面サイズが小さい
*   注意: 範囲指定の場合、引数の順序は任意（実際の値の大小関係で自動判定）
*
* sp-first pc-first関係なく常に「以上」「未満」の指定
*
* 使用例（sp-first）:
*   @include media('tab') { ... }        // tab以上
*   @include media('pc') { ... }         // pc以上
*   @include media('tab', 'pc') { ... }  // tab以上、pc未満（範囲指定）
*   @include media('default', 'tab') { ... }  // tab未満（デフォルトの指定のない領域からtabまで）
*   @include media(768px) { ... }        // 768px以上（具体的な値を直接指定）
*   @include media(768px, 1024px) { ... }  // 768px以上、1024px未満（具体的な値での範囲指定）
*
* 使用例（pc-first）:
*   @include media('pc') { ... }         // pc未満
*   @include media('pcLL', 'pc') { ... }  // pcLL未満、pc以上（範囲指定）
*   @include media('default', 'tab') { ... }  // tab以上（tab以上の画面サイズに適用）
*   @include media(768px) { ... }        // 768px未満（具体的な値を直接指定）
*   @include media(768px, 1024px) { ... }  // 768px以上、1024px未満（具体的な値での範囲指定）
*
* variablesで定義した文字列キーに自動的に依存します
* 数値が渡された場合は、その値を直接使用します
----------------------------------------------------------------- */
/* 高さメディアクエリ
$break $break以上の高さで適用
----------------------------------------------------------------- */
/* 高さメディアクエリ
$break $break以下の高さで適用
----------------------------------------------------------------- */
/* 印刷時
----------------------------------------------------------------- */
/* アニメーション制御設定　ay11対応
----------------------------------------------------------------- */
/******************************************************************
* border-radius-vars border-radius用のCSS変数を生成する
* $border-radiusesに基づいて、各ブレイクポイントで:rootにCSS変数を設定
* @example
*   @include border-radius-vars;
*******************************************************************/
/******************************************************************
* border-width-vars border-width用のCSS変数を生成する
* $border-widthに基づいて、各ブレイクポイントで:rootにCSS変数を設定
* @example
*   @include border-width-vars;
*******************************************************************/
/******************************************************************
* style-settings-vars　値をセットするfunction(s / sv)のためのCSS変数を生成する
* $style-settingsに基づいて、各ブレイクポイントで:rootにCSS変数を設定
*   - --liq-unit                 : s() / sh() の横幅基準
*   - --aspect-ratio-threshold   : sh() の比率基準（幅/高さ）
*   - --lvh-vw-ratio             : sh() の lvh/vw 換算係数
*     （'min-height' 指定時は max(100lvh, min-height) / 100vw）
* sh() の lvh 換算は s() の値 × 比率 × var(--lvh-vw-ratio) で算出する
* 各設定方法については、変数$style-settingsの箇所に記載する
* @example
*   @include style-settings-vars;
*******************************************************************/
/******************************************************************
* viewport-unit-set
* jsから渡される--viewport-unitのフォールバック
* スクロールバー除外幅の1%（JSで実測値に更新。JS無効時は100vw - --scrollbar-widthから算出）
* 参照時は get-viewport-unit() を使用する
* @example
*   @include viewport-unit-set;
*******************************************************************/
/***********************************************************
/*  foundation/mixins/judgement
************************************************************/
/******************************************************************
* 訪問判定　jsでbodyに付与(セッション判定)
*******************************************************************/
/******************************************************************
* body-scroll-rock
* bodyのスクロール固定時にbodyにつくクラス。
* 本mixinを使用することで、ロック時のスタイルを定義できる
* bodyScrollControll.jsによるクラス付与
* var(--scrollbar-width)で、スクロールバー分の幅をjsから受け取る
* 例: @include body-scroll-rock { .header { ... } }
*******************************************************************/
/******************************************************************
* DOMContentLoaded jsでbodyに付与
*******************************************************************/
/******************************************************************
* hover判定
*******************************************************************/
/* hover 非hover
----------------------------------------------------------------- */
/* hoverのみ
----------------------------------------------------------------- */
/* 非hover端末のactiveのみ
----------------------------------------------------------------- */
/******************************************************************
* no-js判定
*******************************************************************/
/******************************************************************
* page判定
* body.page_xxx が付与されている場合にスタイルを適用する
* 例: @include page(top) { ... }
*     @include page('works-detail') { ... }
*******************************************************************/
/******************************************************************
* windowLoaded jsでbodyに付与
*******************************************************************/
/***********************************************************
/*  foundation/mixins/base
************************************************************/
/******************************************************************
* define-color-vars CSS変数を一括定義する mixin
* @param $mode モード名（default | dark など）
* ネスト map をフラットな CSS変数に変換する
* 例) @include define-color-vars('default');
*     → --color-text-primary: #2B2D31;
*     → --color-bg-base: #FFFFFF;
*******************************************************************/
/******************************************************************
* generate-color-themes テーマ全体を生成する mixin
* defaultモードを:rootに、それ以外のモードを[data-theme="モード名"]に出力する
* $colorsマップにモードを追加するだけで、自動的にすべてのテーマが生成される
* 例) @include generate-color-themes;
*     → :root { --color-text-primary: ...; }
*     → [data-theme="dark"] { --color-text-primary: ...; }
*******************************************************************/
/******************************************************************
* mode テーマモード別のスタイルを定義する mixin
* @param $mode モード名（'default' | 'dark' など）
* defaultモードの場合は親セレクタそのまま、それ以外は[data-theme="モード名"]で出力
*
* 使用例:
* .my-element {
*   color: red;
*
*   @include mode('dark') {
*     color: white;
*   }
* }
*
* 出力結果:
* .my-element {
*   color: red;
* }
*
* [data-theme="dark"] .my-element {
*   color: white;
* }
*******************************************************************/
/******************************************************************
* container　コンテナの余白と最大幅を設定する
* @param $_type コンテナの種類（_variables.scssの$container-sizesで定義）
* $media-query-strategy で 'sp-first' または 'pc-first' を切り替え可能
*   - 'sp-first': SPをデフォルト、大きい画面で上書き
*   - 'pc-first': PCをデフォルト、小さい画面で上書き
*
* $container-sizesのキー名は$breakpointsのキー名と統一されています
*******************************************************************/
/******************************************************************
* content-space コンテンツ余白を設定する
* @param $_type 大きさのタイプ（_variables.scssの$content-spaceで定義）
* @param $_margin padding(pd)・margin(mg)
* @param $_important オプション: '!important'を付与する場合に指定
* $media-query-strategy で 'sp-first' または 'pc-first' を切り替え可能
*   - 'sp-first': SPをデフォルト、大きい画面で上書き
*   - 'pc-first': PCをデフォルト、小さい画面で上書き
*
* $content-spaceのキー名は$breakpointsのキー名と統一されています
*******************************************************************/
/******************************************************************
* _effect-apply-styles プロパティマップを出力する
* @param $_styles (property: value, ...)
*******************************************************************/
/******************************************************************
* set-effect エフェクトのスタイルを適用する
* @param $_type-key エフェクト種類キー（$effectsのキー）
* @param $_pattern-key エフェクトパターンキー（種類内のキー）
*
* $_effect-styles のパターン値は次の構造:
*   (
*     'default': (property: value, ...),
*     $breakpointsキー: (property: value, ...), // 任意
*   )
* $media-query-strategy の差分は media() 側で吸収
*******************************************************************/
/******************************************************************
* font フォントスタイルを設定する
* @param $_size サイズ
* @param $_line 行間（`normal` / 数値なら px 相当値 ÷ font-size、% 付きなら ÷ 100）
* @param $_space 文字間（単位なし/% = PERCENT→em、px = PIXELS→s()）
* @param $_weight 太さ（$_key 未指定時は必須・CSS 数値。$_key 指定時は $text-styles の weight キーを使用）
* @param $_family フォント（null 時は $base_font。$_key 指定時に渡すと font-family を上書き）
* @param $_font-key $font-configs のキー（$_key 指定時の get-font-weight 用。null 時は $base_font_key）
* @param $_min-size font-size の下限（リキッド換算の結果がこれ未満にならない）
* @param $_max-size font-size の上限（省略時は上限なし）
* @param $_use-sh true のとき font-size に sh() を使用（横長端末で lvh 基準に縮小）
* @param $_aspect-ratio sh() 用の比率基準（幅/高さ）。省略時は --aspect-ratio-threshold
* @param $_min-height sh() 用の画面高さフロア（単位なし px 相当）。省略時は $style-settings の 'min-height' に従う
* @param $_key Figma テキストスタイルキー（指定時は size/line/space/weight をマップから取得）
* 下限の適用範囲は $font-size-min-media で制御（大きい画面側のみ適用）
*******************************************************************/
/******************************************************************
* スクロールバーデザイン
*******************************************************************/
/* scrollbar
* スクロールバーのスタイルを設定する（Firefox対応）
* @param $_thumb-color スクロールバーのつまみの色（デフォルト: $color-scroll-handle）
* @param $_track-color スクロールバーのトラックの色（デフォルト: $color-scroll-track）
* @param $_type スクロールバーの幅タイプ（auto/thin/none、デフォルト: auto）
*  例) @include scrollbar();
*  例) @include scrollbar(red, blue, thin);
----------------------------------------------------------------- */
/* origin-scrollbar
* Webkit系ブラウザ向けのスクロールバーのスタイルを設定する（Chrome/Safari対応）
* @param $_thumb-color スクロールバーのつまみの色（デフォルト: $color-scroll-handle）
* @param $_track-color スクロールバーのトラックの色（デフォルト: $color-scroll-track）
*  例) @include origin-scrollbar();
*  例) @include origin-scrollbar(#ff0000, #000000);
----------------------------------------------------------------- */
/* scrollbar_none
* スクロールバーを非表示にする（Webkit系ブラウザ向け）
*  例) @include scrollbar_none;
----------------------------------------------------------------- */
/******************************************************************
* section　section余白を設定する
* @param $_type 大きさのタイプ（_variables.scssの$section-sizesで定義）
* @param $_margin padding(pd)・margin(mg)
* $media-query-strategy で 'sp-first' または 'pc-first' を切り替え可能
*   - 'sp-first': SPをデフォルト、大きい画面で上書き
*   - 'pc-first': PCをデフォルト、小さい画面で上書き
*
* $section-sizesのキー名は$breakpointsのキー名と統一されています
*******************************************************************/
/***********************************************************
/*  foundation/mixins/util
************************************************************/
/******************************************************************
* background-image　背景画像を設定する
* @param $_filename ファイル名
* @param $_size background-size
* @param $_type 拡張子 jpg or png(デフォルト)
* @param $_position background-position
* @param $_repeat background-repeat
* @param $_important オプション: '!important'を付与する場合に指定
*******************************************************************/
/******************************************************************
* dashed-line　破線の線を設定する（4方向対応・複数辺の組み合わせ可）
* @param $_width 線の太さ（デフォルト: 1px）
* @param $_dash-length 線の長さ（デフォルト: 8px）
* @param $_gap 間隔（デフォルト: 4px）
* @param $_color 線の色（デフォルト: currentColor）
* @param $_direction 線の方向（デフォルト: bottom）
*   単一: top / right / bottom / left / all
*   複数: top bottom / left right / (top, left) など
*  例) @include dashed-line(2px, 8px, 4px, #000);
*  例) @include dashed-line(1px, 8px, 4px, #000, all);
*  例) @include dashed-line(1px, 8px, 4px, #000, top bottom);
*******************************************************************/
/******************************************************************
* flex-size　flex要素のサイズを計算する（均等割り）
* @param $num 並べる個数
* @param $gap 間の余白（rem, px）
* @param $important オプション: '!important'を付与する場合に指定
*  例) @include flexSize(3, 1rem);
*******************************************************************/
/******************************************************************
* ommision　行数による末尾「...」省略
* @param $_line:行数
* @param $_font-size:フォントサイズ 単位あり
* @param $_line-height:行間 (例 1.5)
* @param $_height-set:heightに高さを設定するかどうか(設定する場合true)
*******************************************************************/
/******************************************************************
* ruled-underline　行ごとにボックス幅いっぱいの破線下線を設定する
* 要素に line-height を設定し、1行＝1タイルとして破線背景を分割
* マスクで各タイルの最下部のみ見せる → 行間に線が出ない
* 背景は ::after に描画し、テキストはマスク対象外（消えない）
* @param $color 色（デフォルト: #000）例: #0d47a1 または var(--colors-main) 形式の RGB 変数名（中身が "R,G,B"）
* @param $alpha 不透明度（デフォルト: 0.4、0〜1）
* @param $dash-on 破線の線の長さ（デフォルト: 5px）
* @param $dash-off 破線の空白の長さ（デフォルト: 10px）
* @param $thickness 下線の太さ（デフォルト: 1px）
* @param $offset 文字ベースラインからの下げ量（デフォルト: 3px）
* @param $line-height 行高（デフォルト: 1.8、数値指定を推奨）
* @param $z-index 擬似要素の z-index（デフォルト: -1、背面にしたいので通常は -1）
*  例) @include ruled-underline(#000, 0.4, 5px, 10px, 1px, 3px, 1.8, -1);
*******************************************************************/
/******************************************************************
* svg-line　svg画像を使用して下線を引く
　※画像は下線の1線部分を画像化する
* @param $_filename 使用する画像名
* @param $_width 画像の幅　単位あり
* @param $_height 画像の高さ 単位あり
* @param $_gap 間隔　単位あり
*******************************************************************/
/******************************************************************
* text-trimming 
* figmaのテキスト上下トリミングを実現する
*******************************************************************/
/******************************************************************
* width-string-set　文字数による横幅を取得し、最大幅にセットする
* @param $_num 文字数
* @param $_font-size フォントサイズ (単位あり)
* @param $_letter-spacing letter spacing
*******************************************************************/
/***********************************************************
/*  foundation/variables
************************************************************/
/***********************************************************
/*  foundation/project
************************************************************/
/******************************************************************
* プロジェクト固有のutilsを記載する
*******************************************************************/
/******************************************************************
 * GSAP関連の共通処理　契機スタイル
 ******************************************************************/
/* smoothScroll
/* rootを起点として、その中のwrapper、contentに対して適用する
 ----------------------------------------------------------------- */
body:not(:has(.noJs)) .has_gsap_smooth_root.__page .has_gsap_smooth_wrapper {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body:not(:has(.noJs)) .has_gsap_smooth_root.__content .has_gsap_smooth_wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  body:not(:has(.noJs)) .has_gsap_smooth_root.__page .has_gsap_smooth_wrapper,
  body:not(:has(.noJs)) .has_gsap_smooth_root.__content .has_gsap_smooth_wrapper {
    position: static;
    height: auto;
    overflow: visible;
  }
}

/* pin アニメーション
/* pinアニメーションは基本的に以下のDOM構造で実装する
/* trigger > pin > target > 要素
/* trigger：アニメーションのタイミングや範囲を管理(js側のtriggerに一致)
/* pin：pinで固定するフレーム(js側のpinに一致)
/* target：実際にアニメーションを付与するフレーム(js側のtargetに一致)
/* 要素：中身の要素
----------------------------------------------------------------- */
body:not(:has(.noJs)) {
  /* pinアニメ共通
  ----------------------------------------------------------------- */
}
body:not(:has(.noJs)) .has_gsap_pin_trigger {
  position: relative;
}
body:not(:has(.noJs)) .has_gsap_pin {
  position: relative;
  height: 100dvh;
  overflow: hidden;
}
body:not(:has(.noJs)) .has_gsap_pin.__allowOverflow {
  overflow: visible;
}
body:not(:has(.noJs)) {
  /* 横スクロールモーション
  ----------------------------------------------------------------- */
}
body:not(:has(.noJs)) .has_gsap_hscroll_target {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}
body:not(:has(.noJs)) .has_gsap_hscroll_section {
  width: 100vw;
  height: 100%;
  display: -ms-grid;
  display: grid;
  place-items: center;
  padding-block: 0 !important;
  margin-block: 0 !important;
}
body:not(:has(.noJs)) {
  /* カードスタック(sticky風モーション)
  ----------------------------------------------------------------- */
}
body:not(:has(.noJs)) .has_gsap_cardStack_item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: top;
          transform-origin: top;
}
@media screen and (width < 960px) {
  body:not(:has(.noJs)) .has_gsap_cardStack_item {
    margin-top: 0 !important;
  }
}
body:not(:has(.noJs)) {
  /* DOM移動（Flip）
  ----------------------------------------------------------------- */
}
body:not(:has(.noJs)) .has_gsap_domMove_node {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}
body:not(:has(.noJs)) .has_gsap_domMove_node picture,
body:not(:has(.noJs)) .has_gsap_domMove_node img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/******************************************************************
 * IntersectionObserver（scrollObserver）連動アニメーション
 * - scrollObserver.js が is_active を付与
 * - has_observer_xxxx でアニメーション種別を選択
 ******************************************************************/
body:not(:has(.noJs)) .has_observer_fade {
  -webkit-transition: opacity 1.2s ease-out, visibility 1.2s ease-out;
  transition: opacity 1.2s ease-out, visibility 1.2s ease-out;
  opacity: 0;
  visibility: hidden;
}
body:not(:has(.noJs)) .has_observer_fade.is_active {
  opacity: 1;
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  body:not(:has(.noJs)) .has_observer_fade {
    -webkit-transition: none;
    transition: none;
    opacity: 1;
    visibility: visible;
    -webkit-transform: none;
            transform: none;
  }
}
body:not(:has(.noJs)) .has_observer_fadeUp {
  -webkit-transition: opacity 1.2s ease-out, visibility 1.2s ease-out;
  transition: opacity 1.2s ease-out, visibility 1.2s ease-out;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 1.2s ease-out, visibility 1.2s ease-out, -webkit-transform 1.2s ease-out;
  transition: opacity 1.2s ease-out, visibility 1.2s ease-out, -webkit-transform 1.2s ease-out;
  transition: opacity 1.2s ease-out, visibility 1.2s ease-out, transform 1.2s ease-out;
  transition: opacity 1.2s ease-out, visibility 1.2s ease-out, transform 1.2s ease-out, -webkit-transform 1.2s ease-out;
  -webkit-transform: translateY(calc(24 * var(--liq-unit)));
          transform: translateY(calc(24 * var(--liq-unit)));
}
body:not(:has(.noJs)) .has_observer_fadeUp.is_active {
  opacity: 1;
  visibility: visible;
  -webkit-transform: none;
          transform: none;
}
@media (prefers-reduced-motion: reduce) {
  body:not(:has(.noJs)) .has_observer_fadeUp {
    -webkit-transition: none;
    transition: none;
    opacity: 1;
    visibility: visible;
    -webkit-transform: none;
            transform: none;
  }
}
body:not(:has(.noJs)) .has_observer_fadeRight {
  -webkit-transition: opacity 1.2s ease-out, visibility 1.2s ease-out;
  transition: opacity 1.2s ease-out, visibility 1.2s ease-out;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 1.2s ease-out, visibility 1.2s ease-out, -webkit-transform 1.2s ease-out;
  transition: opacity 1.2s ease-out, visibility 1.2s ease-out, -webkit-transform 1.2s ease-out;
  transition: opacity 1.2s ease-out, visibility 1.2s ease-out, transform 1.2s ease-out;
  transition: opacity 1.2s ease-out, visibility 1.2s ease-out, transform 1.2s ease-out, -webkit-transform 1.2s ease-out;
  -webkit-transform: translateX(calc(24 * var(--liq-unit)));
          transform: translateX(calc(24 * var(--liq-unit)));
}
body:not(:has(.noJs)) .has_observer_fadeRight.is_active {
  opacity: 1;
  visibility: visible;
  -webkit-transform: none;
          transform: none;
}
@media (prefers-reduced-motion: reduce) {
  body:not(:has(.noJs)) .has_observer_fadeRight {
    -webkit-transition: none;
    transition: none;
    opacity: 1;
    visibility: visible;
    -webkit-transform: none;
            transform: none;
  }
}
body:not(:has(.noJs)) .has_observer_fadeLeft {
  -webkit-transition: opacity 1.2s ease-out, visibility 1.2s ease-out;
  transition: opacity 1.2s ease-out, visibility 1.2s ease-out;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 1.2s ease-out, visibility 1.2s ease-out, -webkit-transform 1.2s ease-out;
  transition: opacity 1.2s ease-out, visibility 1.2s ease-out, -webkit-transform 1.2s ease-out;
  transition: opacity 1.2s ease-out, visibility 1.2s ease-out, transform 1.2s ease-out;
  transition: opacity 1.2s ease-out, visibility 1.2s ease-out, transform 1.2s ease-out, -webkit-transform 1.2s ease-out;
  -webkit-transform: translateX(calc(-1 * calc(24 * var(--liq-unit))));
          transform: translateX(calc(-1 * calc(24 * var(--liq-unit))));
}
body:not(:has(.noJs)) .has_observer_fadeLeft.is_active {
  opacity: 1;
  visibility: visible;
  -webkit-transform: none;
          transform: none;
}
@media (prefers-reduced-motion: reduce) {
  body:not(:has(.noJs)) .has_observer_fadeLeft {
    -webkit-transition: none;
    transition: none;
    opacity: 1;
    visibility: visible;
    -webkit-transform: none;
            transform: none;
  }
}
body:not(:has(.noJs)) .has_observer_scaleIn {
  -webkit-transition: opacity 0.6s ease-out, -webkit-transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: opacity 0.6s ease-out, -webkit-transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 0;
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}
body:not(:has(.noJs)) .has_observer_scaleIn.is_active {
  opacity: 1;
  visibility: visible;
  -webkit-transform: none;
          transform: none;
}
@media (prefers-reduced-motion: reduce) {
  body:not(:has(.noJs)) .has_observer_scaleIn {
    -webkit-transition: none;
    transition: none;
    opacity: 1;
    visibility: visible;
    -webkit-transform: none;
            transform: none;
  }
}

/******************************************************************
 * ページ遷移時のアニメーション処理(クラス)
 * - body.is_pageUnmount … 同一オリジン遷移直前（JS: features/pageUnmountOnLink.js）
 ******************************************************************/
/* 画面表示アニメーション
----------------------------------------------------------------- */
.has_pageInit {
  opacity: 0;
  -webkit-transition: opacity 0.45s 0.05s ease-in-out;
  transition: opacity 0.45s 0.05s ease-in-out;
}
.has_pageInit.is_domLoaded {
  opacity: 1;
}
body:has(.noJs).has_pageInit {
  opacity: 1;
}

.is_domLoaded .has_pageInit {
  opacity: 1;
}

/* 画面遷移時アニメーション
----------------------------------------------------------------- */
.has_pageUnmountOnLink {
  -webkit-transition: opacity 0.45s;
  transition: opacity 0.45s;
}

.is_unMount {
  opacity: 0 !important;
}

/******************************************************************
 * タブコンテンツの表示・非表示（フェード）
 * - tab.js の is_active と連動
 * - has_tab_contents でパネルを同一セルに重ね、has_tabContent でクロスフェード
 ******************************************************************/
.has_tab_contents {
  display: -ms-grid;
  display: grid;
}

.has_tabContent {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: 1/1;
  -webkit-transition: opacity 0.8s ease, visibility 0.8s ease;
  transition: opacity 0.8s ease, visibility 0.8s ease;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.has_tabContent.is_active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}
.has_tabContent:not(.is_active) {
  height: 0;
}
@media (prefers-reduced-motion: reduce) {
  .has_tabContent {
    -webkit-transition: none;
    transition: none;
  }
}

/******************************************************************
 * トップページ固有アニメーション
 ******************************************************************/
@-webkit-keyframes top-mv-logo-boyoyoon {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.4);
            transform: scale(0.4);
  }
  55% {
    opacity: 1;
    -webkit-transform: scale(1.22);
            transform: scale(1.22);
  }
  78% {
    -webkit-transform: scale(0.94);
            transform: scale(0.94);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes top-mv-logo-boyoyoon {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.4);
            transform: scale(0.4);
  }
  55% {
    opacity: 1;
    -webkit-transform: scale(1.22);
            transform: scale(1.22);
  }
  78% {
    -webkit-transform: scale(0.94);
            transform: scale(0.94);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
/* mv logo — はずむスケールイン（sample/test.html を少し滑らかに）
----------------------------------------------------------------- */
.has_top_mvLogo {
  opacity: 0;
  -webkit-transform: scale(0.4);
          transform: scale(0.4);
  -webkit-animation: top-mv-logo-boyoyoon 1.2s 1s cubic-bezier(0.22, 0.9, 0.32, 1.12) forwards;
          animation: top-mv-logo-boyoyoon 1.2s 1s cubic-bezier(0.22, 0.9, 0.32, 1.12) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .has_top_mvLogo {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
    -webkit-animation: none;
            animation: none;
  }
}

/***********************************************************
/*  helpers
************************************************************/
/******************************************************************
* helper
*******************************************************************/
/* text-align
----------------------------------------------------------------- */
.hp_tac {
  text-align: center !important;
}

/* display - 基本クラス
----------------------------------------------------------------- */
.hp_block {
  display: block !important;
}

.hp_hidden {
  display: none !important;
}

.hp_visuallyHidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* hidden ブレイクポイントベースの非表示クラス
----------------------------------------------------------------- */
@media screen and (960px <= width) {
  .hp_hidden_default_sp {
    display: none !important;
  }
}

@media screen and (width < 960px) {
  .hp_hidden_sp_ {
    display: none !important;
  }
}

/* visible ブレイクポイントベースの表示クラス（指定範囲のみ表示）
----------------------------------------------------------------- */
.hp_visible_default_sp {
  display: none !important;
}
@media screen and (960px <= width) {
  .hp_visible_default_sp {
    display: revert !important;
  }
}

.hp_visible_sp_ {
  display: none !important;
}
@media screen and (width < 960px) {
  .hp_visible_sp_ {
    display: revert !important;
  }
}

/***********************************************************
/*  utils
************************************************************/
/******************************************************************
* utils
*******************************************************************/
/* margin / padding ユーティリティ
* 2-8: 2の倍数 / 8-32: 4の倍数 / 32以降: 8の倍数
----------------------------------------------------------------- */
.ut_m_2 {
  margin: calc(2 * var(--liq-unit));
}

.ut_mT_2 {
  margin-top: calc(2 * var(--liq-unit));
}

.ut_mB_2 {
  margin-bottom: calc(2 * var(--liq-unit));
}

.ut_mL_2 {
  margin-left: calc(2 * var(--liq-unit));
}

.ut_mR_2 {
  margin-right: calc(2 * var(--liq-unit));
}

.ut_mY_2 {
  margin-block: calc(2 * var(--liq-unit));
}

.ut_mX_2 {
  margin-inline: calc(2 * var(--liq-unit));
}

.ut_p_2 {
  padding: calc(2 * var(--liq-unit));
}

.ut_pT_2 {
  padding-top: calc(2 * var(--liq-unit));
}

.ut_pB_2 {
  padding-bottom: calc(2 * var(--liq-unit));
}

.ut_pL_2 {
  padding-left: calc(2 * var(--liq-unit));
}

.ut_pR_2 {
  padding-right: calc(2 * var(--liq-unit));
}

.ut_pY_2 {
  padding-block: calc(2 * var(--liq-unit));
}

.ut_pX_2 {
  padding-inline: calc(2 * var(--liq-unit));
}

.ut_m_4 {
  margin: calc(4 * var(--liq-unit));
}

.ut_mT_4 {
  margin-top: calc(4 * var(--liq-unit));
}

.ut_mB_4 {
  margin-bottom: calc(4 * var(--liq-unit));
}

.ut_mL_4 {
  margin-left: calc(4 * var(--liq-unit));
}

.ut_mR_4 {
  margin-right: calc(4 * var(--liq-unit));
}

.ut_mY_4 {
  margin-block: calc(4 * var(--liq-unit));
}

.ut_mX_4 {
  margin-inline: calc(4 * var(--liq-unit));
}

.ut_p_4 {
  padding: calc(4 * var(--liq-unit));
}

.ut_pT_4 {
  padding-top: calc(4 * var(--liq-unit));
}

.ut_pB_4 {
  padding-bottom: calc(4 * var(--liq-unit));
}

.ut_pL_4 {
  padding-left: calc(4 * var(--liq-unit));
}

.ut_pR_4 {
  padding-right: calc(4 * var(--liq-unit));
}

.ut_pY_4 {
  padding-block: calc(4 * var(--liq-unit));
}

.ut_pX_4 {
  padding-inline: calc(4 * var(--liq-unit));
}

.ut_m_6 {
  margin: calc(6 * var(--liq-unit));
}

.ut_mT_6 {
  margin-top: calc(6 * var(--liq-unit));
}

.ut_mB_6 {
  margin-bottom: calc(6 * var(--liq-unit));
}

.ut_mL_6 {
  margin-left: calc(6 * var(--liq-unit));
}

.ut_mR_6 {
  margin-right: calc(6 * var(--liq-unit));
}

.ut_mY_6 {
  margin-block: calc(6 * var(--liq-unit));
}

.ut_mX_6 {
  margin-inline: calc(6 * var(--liq-unit));
}

.ut_p_6 {
  padding: calc(6 * var(--liq-unit));
}

.ut_pT_6 {
  padding-top: calc(6 * var(--liq-unit));
}

.ut_pB_6 {
  padding-bottom: calc(6 * var(--liq-unit));
}

.ut_pL_6 {
  padding-left: calc(6 * var(--liq-unit));
}

.ut_pR_6 {
  padding-right: calc(6 * var(--liq-unit));
}

.ut_pY_6 {
  padding-block: calc(6 * var(--liq-unit));
}

.ut_pX_6 {
  padding-inline: calc(6 * var(--liq-unit));
}

.ut_m_8 {
  margin: calc(8 * var(--liq-unit));
}

.ut_mT_8 {
  margin-top: calc(8 * var(--liq-unit));
}

.ut_mB_8 {
  margin-bottom: calc(8 * var(--liq-unit));
}

.ut_mL_8 {
  margin-left: calc(8 * var(--liq-unit));
}

.ut_mR_8 {
  margin-right: calc(8 * var(--liq-unit));
}

.ut_mY_8 {
  margin-block: calc(8 * var(--liq-unit));
}

.ut_mX_8 {
  margin-inline: calc(8 * var(--liq-unit));
}

.ut_p_8 {
  padding: calc(8 * var(--liq-unit));
}

.ut_pT_8 {
  padding-top: calc(8 * var(--liq-unit));
}

.ut_pB_8 {
  padding-bottom: calc(8 * var(--liq-unit));
}

.ut_pL_8 {
  padding-left: calc(8 * var(--liq-unit));
}

.ut_pR_8 {
  padding-right: calc(8 * var(--liq-unit));
}

.ut_pY_8 {
  padding-block: calc(8 * var(--liq-unit));
}

.ut_pX_8 {
  padding-inline: calc(8 * var(--liq-unit));
}

.ut_m_12 {
  margin: calc(12 * var(--liq-unit));
}

.ut_mT_12 {
  margin-top: calc(12 * var(--liq-unit));
}

.ut_mB_12 {
  margin-bottom: calc(12 * var(--liq-unit));
}

.ut_mL_12 {
  margin-left: calc(12 * var(--liq-unit));
}

.ut_mR_12 {
  margin-right: calc(12 * var(--liq-unit));
}

.ut_mY_12 {
  margin-block: calc(12 * var(--liq-unit));
}

.ut_mX_12 {
  margin-inline: calc(12 * var(--liq-unit));
}

.ut_p_12 {
  padding: calc(12 * var(--liq-unit));
}

.ut_pT_12 {
  padding-top: calc(12 * var(--liq-unit));
}

.ut_pB_12 {
  padding-bottom: calc(12 * var(--liq-unit));
}

.ut_pL_12 {
  padding-left: calc(12 * var(--liq-unit));
}

.ut_pR_12 {
  padding-right: calc(12 * var(--liq-unit));
}

.ut_pY_12 {
  padding-block: calc(12 * var(--liq-unit));
}

.ut_pX_12 {
  padding-inline: calc(12 * var(--liq-unit));
}

.ut_m_16 {
  margin: calc(16 * var(--liq-unit));
}

.ut_mT_16 {
  margin-top: calc(16 * var(--liq-unit));
}

.ut_mB_16 {
  margin-bottom: calc(16 * var(--liq-unit));
}

.ut_mL_16 {
  margin-left: calc(16 * var(--liq-unit));
}

.ut_mR_16 {
  margin-right: calc(16 * var(--liq-unit));
}

.ut_mY_16 {
  margin-block: calc(16 * var(--liq-unit));
}

.ut_mX_16 {
  margin-inline: calc(16 * var(--liq-unit));
}

.ut_p_16 {
  padding: calc(16 * var(--liq-unit));
}

.ut_pT_16 {
  padding-top: calc(16 * var(--liq-unit));
}

.ut_pB_16 {
  padding-bottom: calc(16 * var(--liq-unit));
}

.ut_pL_16 {
  padding-left: calc(16 * var(--liq-unit));
}

.ut_pR_16 {
  padding-right: calc(16 * var(--liq-unit));
}

.ut_pY_16 {
  padding-block: calc(16 * var(--liq-unit));
}

.ut_pX_16 {
  padding-inline: calc(16 * var(--liq-unit));
}

.ut_m_20 {
  margin: calc(20 * var(--liq-unit));
}

.ut_mT_20 {
  margin-top: calc(20 * var(--liq-unit));
}

.ut_mB_20 {
  margin-bottom: calc(20 * var(--liq-unit));
}

.ut_mL_20 {
  margin-left: calc(20 * var(--liq-unit));
}

.ut_mR_20 {
  margin-right: calc(20 * var(--liq-unit));
}

.ut_mY_20 {
  margin-block: calc(20 * var(--liq-unit));
}

.ut_mX_20 {
  margin-inline: calc(20 * var(--liq-unit));
}

.ut_p_20 {
  padding: calc(20 * var(--liq-unit));
}

.ut_pT_20 {
  padding-top: calc(20 * var(--liq-unit));
}

.ut_pB_20 {
  padding-bottom: calc(20 * var(--liq-unit));
}

.ut_pL_20 {
  padding-left: calc(20 * var(--liq-unit));
}

.ut_pR_20 {
  padding-right: calc(20 * var(--liq-unit));
}

.ut_pY_20 {
  padding-block: calc(20 * var(--liq-unit));
}

.ut_pX_20 {
  padding-inline: calc(20 * var(--liq-unit));
}

.ut_m_24 {
  margin: calc(24 * var(--liq-unit));
}

.ut_mT_24 {
  margin-top: calc(24 * var(--liq-unit));
}

.ut_mB_24 {
  margin-bottom: calc(24 * var(--liq-unit));
}

.ut_mL_24 {
  margin-left: calc(24 * var(--liq-unit));
}

.ut_mR_24 {
  margin-right: calc(24 * var(--liq-unit));
}

.ut_mY_24 {
  margin-block: calc(24 * var(--liq-unit));
}

.ut_mX_24 {
  margin-inline: calc(24 * var(--liq-unit));
}

.ut_p_24 {
  padding: calc(24 * var(--liq-unit));
}

.ut_pT_24 {
  padding-top: calc(24 * var(--liq-unit));
}

.ut_pB_24 {
  padding-bottom: calc(24 * var(--liq-unit));
}

.ut_pL_24 {
  padding-left: calc(24 * var(--liq-unit));
}

.ut_pR_24 {
  padding-right: calc(24 * var(--liq-unit));
}

.ut_pY_24 {
  padding-block: calc(24 * var(--liq-unit));
}

.ut_pX_24 {
  padding-inline: calc(24 * var(--liq-unit));
}

.ut_m_28 {
  margin: calc(28 * var(--liq-unit));
}

.ut_mT_28 {
  margin-top: calc(28 * var(--liq-unit));
}

.ut_mB_28 {
  margin-bottom: calc(28 * var(--liq-unit));
}

.ut_mL_28 {
  margin-left: calc(28 * var(--liq-unit));
}

.ut_mR_28 {
  margin-right: calc(28 * var(--liq-unit));
}

.ut_mY_28 {
  margin-block: calc(28 * var(--liq-unit));
}

.ut_mX_28 {
  margin-inline: calc(28 * var(--liq-unit));
}

.ut_p_28 {
  padding: calc(28 * var(--liq-unit));
}

.ut_pT_28 {
  padding-top: calc(28 * var(--liq-unit));
}

.ut_pB_28 {
  padding-bottom: calc(28 * var(--liq-unit));
}

.ut_pL_28 {
  padding-left: calc(28 * var(--liq-unit));
}

.ut_pR_28 {
  padding-right: calc(28 * var(--liq-unit));
}

.ut_pY_28 {
  padding-block: calc(28 * var(--liq-unit));
}

.ut_pX_28 {
  padding-inline: calc(28 * var(--liq-unit));
}

.ut_m_32 {
  margin: calc(32 * var(--liq-unit));
}

.ut_mT_32 {
  margin-top: calc(32 * var(--liq-unit));
}

.ut_mB_32 {
  margin-bottom: calc(32 * var(--liq-unit));
}

.ut_mL_32 {
  margin-left: calc(32 * var(--liq-unit));
}

.ut_mR_32 {
  margin-right: calc(32 * var(--liq-unit));
}

.ut_mY_32 {
  margin-block: calc(32 * var(--liq-unit));
}

.ut_mX_32 {
  margin-inline: calc(32 * var(--liq-unit));
}

.ut_p_32 {
  padding: calc(32 * var(--liq-unit));
}

.ut_pT_32 {
  padding-top: calc(32 * var(--liq-unit));
}

.ut_pB_32 {
  padding-bottom: calc(32 * var(--liq-unit));
}

.ut_pL_32 {
  padding-left: calc(32 * var(--liq-unit));
}

.ut_pR_32 {
  padding-right: calc(32 * var(--liq-unit));
}

.ut_pY_32 {
  padding-block: calc(32 * var(--liq-unit));
}

.ut_pX_32 {
  padding-inline: calc(32 * var(--liq-unit));
}

.ut_m_40 {
  margin: calc(40 * var(--liq-unit));
}

.ut_mT_40 {
  margin-top: calc(40 * var(--liq-unit));
}

.ut_mB_40 {
  margin-bottom: calc(40 * var(--liq-unit));
}

.ut_mL_40 {
  margin-left: calc(40 * var(--liq-unit));
}

.ut_mR_40 {
  margin-right: calc(40 * var(--liq-unit));
}

.ut_mY_40 {
  margin-block: calc(40 * var(--liq-unit));
}

.ut_mX_40 {
  margin-inline: calc(40 * var(--liq-unit));
}

.ut_p_40 {
  padding: calc(40 * var(--liq-unit));
}

.ut_pT_40 {
  padding-top: calc(40 * var(--liq-unit));
}

.ut_pB_40 {
  padding-bottom: calc(40 * var(--liq-unit));
}

.ut_pL_40 {
  padding-left: calc(40 * var(--liq-unit));
}

.ut_pR_40 {
  padding-right: calc(40 * var(--liq-unit));
}

.ut_pY_40 {
  padding-block: calc(40 * var(--liq-unit));
}

.ut_pX_40 {
  padding-inline: calc(40 * var(--liq-unit));
}

.ut_m_48 {
  margin: calc(48 * var(--liq-unit));
}

.ut_mT_48 {
  margin-top: calc(48 * var(--liq-unit));
}

.ut_mB_48 {
  margin-bottom: calc(48 * var(--liq-unit));
}

.ut_mL_48 {
  margin-left: calc(48 * var(--liq-unit));
}

.ut_mR_48 {
  margin-right: calc(48 * var(--liq-unit));
}

.ut_mY_48 {
  margin-block: calc(48 * var(--liq-unit));
}

.ut_mX_48 {
  margin-inline: calc(48 * var(--liq-unit));
}

.ut_p_48 {
  padding: calc(48 * var(--liq-unit));
}

.ut_pT_48 {
  padding-top: calc(48 * var(--liq-unit));
}

.ut_pB_48 {
  padding-bottom: calc(48 * var(--liq-unit));
}

.ut_pL_48 {
  padding-left: calc(48 * var(--liq-unit));
}

.ut_pR_48 {
  padding-right: calc(48 * var(--liq-unit));
}

.ut_pY_48 {
  padding-block: calc(48 * var(--liq-unit));
}

.ut_pX_48 {
  padding-inline: calc(48 * var(--liq-unit));
}

.ut_m_56 {
  margin: calc(56 * var(--liq-unit));
}

.ut_mT_56 {
  margin-top: calc(56 * var(--liq-unit));
}

.ut_mB_56 {
  margin-bottom: calc(56 * var(--liq-unit));
}

.ut_mL_56 {
  margin-left: calc(56 * var(--liq-unit));
}

.ut_mR_56 {
  margin-right: calc(56 * var(--liq-unit));
}

.ut_mY_56 {
  margin-block: calc(56 * var(--liq-unit));
}

.ut_mX_56 {
  margin-inline: calc(56 * var(--liq-unit));
}

.ut_p_56 {
  padding: calc(56 * var(--liq-unit));
}

.ut_pT_56 {
  padding-top: calc(56 * var(--liq-unit));
}

.ut_pB_56 {
  padding-bottom: calc(56 * var(--liq-unit));
}

.ut_pL_56 {
  padding-left: calc(56 * var(--liq-unit));
}

.ut_pR_56 {
  padding-right: calc(56 * var(--liq-unit));
}

.ut_pY_56 {
  padding-block: calc(56 * var(--liq-unit));
}

.ut_pX_56 {
  padding-inline: calc(56 * var(--liq-unit));
}

.ut_m_64 {
  margin: calc(64 * var(--liq-unit));
}

.ut_mT_64 {
  margin-top: calc(64 * var(--liq-unit));
}

.ut_mB_64 {
  margin-bottom: calc(64 * var(--liq-unit));
}

.ut_mL_64 {
  margin-left: calc(64 * var(--liq-unit));
}

.ut_mR_64 {
  margin-right: calc(64 * var(--liq-unit));
}

.ut_mY_64 {
  margin-block: calc(64 * var(--liq-unit));
}

.ut_mX_64 {
  margin-inline: calc(64 * var(--liq-unit));
}

.ut_p_64 {
  padding: calc(64 * var(--liq-unit));
}

.ut_pT_64 {
  padding-top: calc(64 * var(--liq-unit));
}

.ut_pB_64 {
  padding-bottom: calc(64 * var(--liq-unit));
}

.ut_pL_64 {
  padding-left: calc(64 * var(--liq-unit));
}

.ut_pR_64 {
  padding-right: calc(64 * var(--liq-unit));
}

.ut_pY_64 {
  padding-block: calc(64 * var(--liq-unit));
}

.ut_pX_64 {
  padding-inline: calc(64 * var(--liq-unit));
}

.ut_m_72 {
  margin: calc(72 * var(--liq-unit));
}

.ut_mT_72 {
  margin-top: calc(72 * var(--liq-unit));
}

.ut_mB_72 {
  margin-bottom: calc(72 * var(--liq-unit));
}

.ut_mL_72 {
  margin-left: calc(72 * var(--liq-unit));
}

.ut_mR_72 {
  margin-right: calc(72 * var(--liq-unit));
}

.ut_mY_72 {
  margin-block: calc(72 * var(--liq-unit));
}

.ut_mX_72 {
  margin-inline: calc(72 * var(--liq-unit));
}

.ut_p_72 {
  padding: calc(72 * var(--liq-unit));
}

.ut_pT_72 {
  padding-top: calc(72 * var(--liq-unit));
}

.ut_pB_72 {
  padding-bottom: calc(72 * var(--liq-unit));
}

.ut_pL_72 {
  padding-left: calc(72 * var(--liq-unit));
}

.ut_pR_72 {
  padding-right: calc(72 * var(--liq-unit));
}

.ut_pY_72 {
  padding-block: calc(72 * var(--liq-unit));
}

.ut_pX_72 {
  padding-inline: calc(72 * var(--liq-unit));
}

.ut_m_80 {
  margin: calc(80 * var(--liq-unit));
}

.ut_mT_80 {
  margin-top: calc(80 * var(--liq-unit));
}

.ut_mB_80 {
  margin-bottom: calc(80 * var(--liq-unit));
}

.ut_mL_80 {
  margin-left: calc(80 * var(--liq-unit));
}

.ut_mR_80 {
  margin-right: calc(80 * var(--liq-unit));
}

.ut_mY_80 {
  margin-block: calc(80 * var(--liq-unit));
}

.ut_mX_80 {
  margin-inline: calc(80 * var(--liq-unit));
}

.ut_p_80 {
  padding: calc(80 * var(--liq-unit));
}

.ut_pT_80 {
  padding-top: calc(80 * var(--liq-unit));
}

.ut_pB_80 {
  padding-bottom: calc(80 * var(--liq-unit));
}

.ut_pL_80 {
  padding-left: calc(80 * var(--liq-unit));
}

.ut_pR_80 {
  padding-right: calc(80 * var(--liq-unit));
}

.ut_pY_80 {
  padding-block: calc(80 * var(--liq-unit));
}

.ut_pX_80 {
  padding-inline: calc(80 * var(--liq-unit));
}

.ut_m_88 {
  margin: calc(88 * var(--liq-unit));
}

.ut_mT_88 {
  margin-top: calc(88 * var(--liq-unit));
}

.ut_mB_88 {
  margin-bottom: calc(88 * var(--liq-unit));
}

.ut_mL_88 {
  margin-left: calc(88 * var(--liq-unit));
}

.ut_mR_88 {
  margin-right: calc(88 * var(--liq-unit));
}

.ut_mY_88 {
  margin-block: calc(88 * var(--liq-unit));
}

.ut_mX_88 {
  margin-inline: calc(88 * var(--liq-unit));
}

.ut_p_88 {
  padding: calc(88 * var(--liq-unit));
}

.ut_pT_88 {
  padding-top: calc(88 * var(--liq-unit));
}

.ut_pB_88 {
  padding-bottom: calc(88 * var(--liq-unit));
}

.ut_pL_88 {
  padding-left: calc(88 * var(--liq-unit));
}

.ut_pR_88 {
  padding-right: calc(88 * var(--liq-unit));
}

.ut_pY_88 {
  padding-block: calc(88 * var(--liq-unit));
}

.ut_pX_88 {
  padding-inline: calc(88 * var(--liq-unit));
}

.ut_m_96 {
  margin: calc(96 * var(--liq-unit));
}

.ut_mT_96 {
  margin-top: calc(96 * var(--liq-unit));
}

.ut_mB_96 {
  margin-bottom: calc(96 * var(--liq-unit));
}

.ut_mL_96 {
  margin-left: calc(96 * var(--liq-unit));
}

.ut_mR_96 {
  margin-right: calc(96 * var(--liq-unit));
}

.ut_mY_96 {
  margin-block: calc(96 * var(--liq-unit));
}

.ut_mX_96 {
  margin-inline: calc(96 * var(--liq-unit));
}

.ut_p_96 {
  padding: calc(96 * var(--liq-unit));
}

.ut_pT_96 {
  padding-top: calc(96 * var(--liq-unit));
}

.ut_pB_96 {
  padding-bottom: calc(96 * var(--liq-unit));
}

.ut_pL_96 {
  padding-left: calc(96 * var(--liq-unit));
}

.ut_pR_96 {
  padding-right: calc(96 * var(--liq-unit));
}

.ut_pY_96 {
  padding-block: calc(96 * var(--liq-unit));
}

.ut_pX_96 {
  padding-inline: calc(96 * var(--liq-unit));
}

.ut_m_104 {
  margin: calc(104 * var(--liq-unit));
}

.ut_mT_104 {
  margin-top: calc(104 * var(--liq-unit));
}

.ut_mB_104 {
  margin-bottom: calc(104 * var(--liq-unit));
}

.ut_mL_104 {
  margin-left: calc(104 * var(--liq-unit));
}

.ut_mR_104 {
  margin-right: calc(104 * var(--liq-unit));
}

.ut_mY_104 {
  margin-block: calc(104 * var(--liq-unit));
}

.ut_mX_104 {
  margin-inline: calc(104 * var(--liq-unit));
}

.ut_p_104 {
  padding: calc(104 * var(--liq-unit));
}

.ut_pT_104 {
  padding-top: calc(104 * var(--liq-unit));
}

.ut_pB_104 {
  padding-bottom: calc(104 * var(--liq-unit));
}

.ut_pL_104 {
  padding-left: calc(104 * var(--liq-unit));
}

.ut_pR_104 {
  padding-right: calc(104 * var(--liq-unit));
}

.ut_pY_104 {
  padding-block: calc(104 * var(--liq-unit));
}

.ut_pX_104 {
  padding-inline: calc(104 * var(--liq-unit));
}

.ut_m_112 {
  margin: calc(112 * var(--liq-unit));
}

.ut_mT_112 {
  margin-top: calc(112 * var(--liq-unit));
}

.ut_mB_112 {
  margin-bottom: calc(112 * var(--liq-unit));
}

.ut_mL_112 {
  margin-left: calc(112 * var(--liq-unit));
}

.ut_mR_112 {
  margin-right: calc(112 * var(--liq-unit));
}

.ut_mY_112 {
  margin-block: calc(112 * var(--liq-unit));
}

.ut_mX_112 {
  margin-inline: calc(112 * var(--liq-unit));
}

.ut_p_112 {
  padding: calc(112 * var(--liq-unit));
}

.ut_pT_112 {
  padding-top: calc(112 * var(--liq-unit));
}

.ut_pB_112 {
  padding-bottom: calc(112 * var(--liq-unit));
}

.ut_pL_112 {
  padding-left: calc(112 * var(--liq-unit));
}

.ut_pR_112 {
  padding-right: calc(112 * var(--liq-unit));
}

.ut_pY_112 {
  padding-block: calc(112 * var(--liq-unit));
}

.ut_pX_112 {
  padding-inline: calc(112 * var(--liq-unit));
}

.ut_m_120 {
  margin: calc(120 * var(--liq-unit));
}

.ut_mT_120 {
  margin-top: calc(120 * var(--liq-unit));
}

.ut_mB_120 {
  margin-bottom: calc(120 * var(--liq-unit));
}

.ut_mL_120 {
  margin-left: calc(120 * var(--liq-unit));
}

.ut_mR_120 {
  margin-right: calc(120 * var(--liq-unit));
}

.ut_mY_120 {
  margin-block: calc(120 * var(--liq-unit));
}

.ut_mX_120 {
  margin-inline: calc(120 * var(--liq-unit));
}

.ut_p_120 {
  padding: calc(120 * var(--liq-unit));
}

.ut_pT_120 {
  padding-top: calc(120 * var(--liq-unit));
}

.ut_pB_120 {
  padding-bottom: calc(120 * var(--liq-unit));
}

.ut_pL_120 {
  padding-left: calc(120 * var(--liq-unit));
}

.ut_pR_120 {
  padding-right: calc(120 * var(--liq-unit));
}

.ut_pY_120 {
  padding-block: calc(120 * var(--liq-unit));
}

.ut_pX_120 {
  padding-inline: calc(120 * var(--liq-unit));
}

.ut_m_128 {
  margin: calc(128 * var(--liq-unit));
}

.ut_mT_128 {
  margin-top: calc(128 * var(--liq-unit));
}

.ut_mB_128 {
  margin-bottom: calc(128 * var(--liq-unit));
}

.ut_mL_128 {
  margin-left: calc(128 * var(--liq-unit));
}

.ut_mR_128 {
  margin-right: calc(128 * var(--liq-unit));
}

.ut_mY_128 {
  margin-block: calc(128 * var(--liq-unit));
}

.ut_mX_128 {
  margin-inline: calc(128 * var(--liq-unit));
}

.ut_p_128 {
  padding: calc(128 * var(--liq-unit));
}

.ut_pT_128 {
  padding-top: calc(128 * var(--liq-unit));
}

.ut_pB_128 {
  padding-bottom: calc(128 * var(--liq-unit));
}

.ut_pL_128 {
  padding-left: calc(128 * var(--liq-unit));
}

.ut_pR_128 {
  padding-right: calc(128 * var(--liq-unit));
}

.ut_pY_128 {
  padding-block: calc(128 * var(--liq-unit));
}

.ut_pX_128 {
  padding-inline: calc(128 * var(--liq-unit));
}

.ut_m_136 {
  margin: calc(136 * var(--liq-unit));
}

.ut_mT_136 {
  margin-top: calc(136 * var(--liq-unit));
}

.ut_mB_136 {
  margin-bottom: calc(136 * var(--liq-unit));
}

.ut_mL_136 {
  margin-left: calc(136 * var(--liq-unit));
}

.ut_mR_136 {
  margin-right: calc(136 * var(--liq-unit));
}

.ut_mY_136 {
  margin-block: calc(136 * var(--liq-unit));
}

.ut_mX_136 {
  margin-inline: calc(136 * var(--liq-unit));
}

.ut_p_136 {
  padding: calc(136 * var(--liq-unit));
}

.ut_pT_136 {
  padding-top: calc(136 * var(--liq-unit));
}

.ut_pB_136 {
  padding-bottom: calc(136 * var(--liq-unit));
}

.ut_pL_136 {
  padding-left: calc(136 * var(--liq-unit));
}

.ut_pR_136 {
  padding-right: calc(136 * var(--liq-unit));
}

.ut_pY_136 {
  padding-block: calc(136 * var(--liq-unit));
}

.ut_pX_136 {
  padding-inline: calc(136 * var(--liq-unit));
}

.ut_m_144 {
  margin: calc(144 * var(--liq-unit));
}

.ut_mT_144 {
  margin-top: calc(144 * var(--liq-unit));
}

.ut_mB_144 {
  margin-bottom: calc(144 * var(--liq-unit));
}

.ut_mL_144 {
  margin-left: calc(144 * var(--liq-unit));
}

.ut_mR_144 {
  margin-right: calc(144 * var(--liq-unit));
}

.ut_mY_144 {
  margin-block: calc(144 * var(--liq-unit));
}

.ut_mX_144 {
  margin-inline: calc(144 * var(--liq-unit));
}

.ut_p_144 {
  padding: calc(144 * var(--liq-unit));
}

.ut_pT_144 {
  padding-top: calc(144 * var(--liq-unit));
}

.ut_pB_144 {
  padding-bottom: calc(144 * var(--liq-unit));
}

.ut_pL_144 {
  padding-left: calc(144 * var(--liq-unit));
}

.ut_pR_144 {
  padding-right: calc(144 * var(--liq-unit));
}

.ut_pY_144 {
  padding-block: calc(144 * var(--liq-unit));
}

.ut_pX_144 {
  padding-inline: calc(144 * var(--liq-unit));
}

.ut_m_152 {
  margin: calc(152 * var(--liq-unit));
}

.ut_mT_152 {
  margin-top: calc(152 * var(--liq-unit));
}

.ut_mB_152 {
  margin-bottom: calc(152 * var(--liq-unit));
}

.ut_mL_152 {
  margin-left: calc(152 * var(--liq-unit));
}

.ut_mR_152 {
  margin-right: calc(152 * var(--liq-unit));
}

.ut_mY_152 {
  margin-block: calc(152 * var(--liq-unit));
}

.ut_mX_152 {
  margin-inline: calc(152 * var(--liq-unit));
}

.ut_p_152 {
  padding: calc(152 * var(--liq-unit));
}

.ut_pT_152 {
  padding-top: calc(152 * var(--liq-unit));
}

.ut_pB_152 {
  padding-bottom: calc(152 * var(--liq-unit));
}

.ut_pL_152 {
  padding-left: calc(152 * var(--liq-unit));
}

.ut_pR_152 {
  padding-right: calc(152 * var(--liq-unit));
}

.ut_pY_152 {
  padding-block: calc(152 * var(--liq-unit));
}

.ut_pX_152 {
  padding-inline: calc(152 * var(--liq-unit));
}

.ut_m_160 {
  margin: calc(160 * var(--liq-unit));
}

.ut_mT_160 {
  margin-top: calc(160 * var(--liq-unit));
}

.ut_mB_160 {
  margin-bottom: calc(160 * var(--liq-unit));
}

.ut_mL_160 {
  margin-left: calc(160 * var(--liq-unit));
}

.ut_mR_160 {
  margin-right: calc(160 * var(--liq-unit));
}

.ut_mY_160 {
  margin-block: calc(160 * var(--liq-unit));
}

.ut_mX_160 {
  margin-inline: calc(160 * var(--liq-unit));
}

.ut_p_160 {
  padding: calc(160 * var(--liq-unit));
}

.ut_pT_160 {
  padding-top: calc(160 * var(--liq-unit));
}

.ut_pB_160 {
  padding-bottom: calc(160 * var(--liq-unit));
}

.ut_pL_160 {
  padding-left: calc(160 * var(--liq-unit));
}

.ut_pR_160 {
  padding-right: calc(160 * var(--liq-unit));
}

.ut_pY_160 {
  padding-block: calc(160 * var(--liq-unit));
}

.ut_pX_160 {
  padding-inline: calc(160 * var(--liq-unit));
}

.ut_m_168 {
  margin: calc(168 * var(--liq-unit));
}

.ut_mT_168 {
  margin-top: calc(168 * var(--liq-unit));
}

.ut_mB_168 {
  margin-bottom: calc(168 * var(--liq-unit));
}

.ut_mL_168 {
  margin-left: calc(168 * var(--liq-unit));
}

.ut_mR_168 {
  margin-right: calc(168 * var(--liq-unit));
}

.ut_mY_168 {
  margin-block: calc(168 * var(--liq-unit));
}

.ut_mX_168 {
  margin-inline: calc(168 * var(--liq-unit));
}

.ut_p_168 {
  padding: calc(168 * var(--liq-unit));
}

.ut_pT_168 {
  padding-top: calc(168 * var(--liq-unit));
}

.ut_pB_168 {
  padding-bottom: calc(168 * var(--liq-unit));
}

.ut_pL_168 {
  padding-left: calc(168 * var(--liq-unit));
}

.ut_pR_168 {
  padding-right: calc(168 * var(--liq-unit));
}

.ut_pY_168 {
  padding-block: calc(168 * var(--liq-unit));
}

.ut_pX_168 {
  padding-inline: calc(168 * var(--liq-unit));
}

.ut_m_176 {
  margin: calc(176 * var(--liq-unit));
}

.ut_mT_176 {
  margin-top: calc(176 * var(--liq-unit));
}

.ut_mB_176 {
  margin-bottom: calc(176 * var(--liq-unit));
}

.ut_mL_176 {
  margin-left: calc(176 * var(--liq-unit));
}

.ut_mR_176 {
  margin-right: calc(176 * var(--liq-unit));
}

.ut_mY_176 {
  margin-block: calc(176 * var(--liq-unit));
}

.ut_mX_176 {
  margin-inline: calc(176 * var(--liq-unit));
}

.ut_p_176 {
  padding: calc(176 * var(--liq-unit));
}

.ut_pT_176 {
  padding-top: calc(176 * var(--liq-unit));
}

.ut_pB_176 {
  padding-bottom: calc(176 * var(--liq-unit));
}

.ut_pL_176 {
  padding-left: calc(176 * var(--liq-unit));
}

.ut_pR_176 {
  padding-right: calc(176 * var(--liq-unit));
}

.ut_pY_176 {
  padding-block: calc(176 * var(--liq-unit));
}

.ut_pX_176 {
  padding-inline: calc(176 * var(--liq-unit));
}

.ut_m_184 {
  margin: calc(184 * var(--liq-unit));
}

.ut_mT_184 {
  margin-top: calc(184 * var(--liq-unit));
}

.ut_mB_184 {
  margin-bottom: calc(184 * var(--liq-unit));
}

.ut_mL_184 {
  margin-left: calc(184 * var(--liq-unit));
}

.ut_mR_184 {
  margin-right: calc(184 * var(--liq-unit));
}

.ut_mY_184 {
  margin-block: calc(184 * var(--liq-unit));
}

.ut_mX_184 {
  margin-inline: calc(184 * var(--liq-unit));
}

.ut_p_184 {
  padding: calc(184 * var(--liq-unit));
}

.ut_pT_184 {
  padding-top: calc(184 * var(--liq-unit));
}

.ut_pB_184 {
  padding-bottom: calc(184 * var(--liq-unit));
}

.ut_pL_184 {
  padding-left: calc(184 * var(--liq-unit));
}

.ut_pR_184 {
  padding-right: calc(184 * var(--liq-unit));
}

.ut_pY_184 {
  padding-block: calc(184 * var(--liq-unit));
}

.ut_pX_184 {
  padding-inline: calc(184 * var(--liq-unit));
}

.ut_m_192 {
  margin: calc(192 * var(--liq-unit));
}

.ut_mT_192 {
  margin-top: calc(192 * var(--liq-unit));
}

.ut_mB_192 {
  margin-bottom: calc(192 * var(--liq-unit));
}

.ut_mL_192 {
  margin-left: calc(192 * var(--liq-unit));
}

.ut_mR_192 {
  margin-right: calc(192 * var(--liq-unit));
}

.ut_mY_192 {
  margin-block: calc(192 * var(--liq-unit));
}

.ut_mX_192 {
  margin-inline: calc(192 * var(--liq-unit));
}

.ut_p_192 {
  padding: calc(192 * var(--liq-unit));
}

.ut_pT_192 {
  padding-top: calc(192 * var(--liq-unit));
}

.ut_pB_192 {
  padding-bottom: calc(192 * var(--liq-unit));
}

.ut_pL_192 {
  padding-left: calc(192 * var(--liq-unit));
}

.ut_pR_192 {
  padding-right: calc(192 * var(--liq-unit));
}

.ut_pY_192 {
  padding-block: calc(192 * var(--liq-unit));
}

.ut_pX_192 {
  padding-inline: calc(192 * var(--liq-unit));
}

.ut_m_200 {
  margin: calc(200 * var(--liq-unit));
}

.ut_mT_200 {
  margin-top: calc(200 * var(--liq-unit));
}

.ut_mB_200 {
  margin-bottom: calc(200 * var(--liq-unit));
}

.ut_mL_200 {
  margin-left: calc(200 * var(--liq-unit));
}

.ut_mR_200 {
  margin-right: calc(200 * var(--liq-unit));
}

.ut_mY_200 {
  margin-block: calc(200 * var(--liq-unit));
}

.ut_mX_200 {
  margin-inline: calc(200 * var(--liq-unit));
}

.ut_p_200 {
  padding: calc(200 * var(--liq-unit));
}

.ut_pT_200 {
  padding-top: calc(200 * var(--liq-unit));
}

.ut_pB_200 {
  padding-bottom: calc(200 * var(--liq-unit));
}

.ut_pL_200 {
  padding-left: calc(200 * var(--liq-unit));
}

.ut_pR_200 {
  padding-right: calc(200 * var(--liq-unit));
}

.ut_pY_200 {
  padding-block: calc(200 * var(--liq-unit));
}

.ut_pX_200 {
  padding-inline: calc(200 * var(--liq-unit));
}

.ut_m_208 {
  margin: calc(208 * var(--liq-unit));
}

.ut_mT_208 {
  margin-top: calc(208 * var(--liq-unit));
}

.ut_mB_208 {
  margin-bottom: calc(208 * var(--liq-unit));
}

.ut_mL_208 {
  margin-left: calc(208 * var(--liq-unit));
}

.ut_mR_208 {
  margin-right: calc(208 * var(--liq-unit));
}

.ut_mY_208 {
  margin-block: calc(208 * var(--liq-unit));
}

.ut_mX_208 {
  margin-inline: calc(208 * var(--liq-unit));
}

.ut_p_208 {
  padding: calc(208 * var(--liq-unit));
}

.ut_pT_208 {
  padding-top: calc(208 * var(--liq-unit));
}

.ut_pB_208 {
  padding-bottom: calc(208 * var(--liq-unit));
}

.ut_pL_208 {
  padding-left: calc(208 * var(--liq-unit));
}

.ut_pR_208 {
  padding-right: calc(208 * var(--liq-unit));
}

.ut_pY_208 {
  padding-block: calc(208 * var(--liq-unit));
}

.ut_pX_208 {
  padding-inline: calc(208 * var(--liq-unit));
}

.ut_m_216 {
  margin: calc(216 * var(--liq-unit));
}

.ut_mT_216 {
  margin-top: calc(216 * var(--liq-unit));
}

.ut_mB_216 {
  margin-bottom: calc(216 * var(--liq-unit));
}

.ut_mL_216 {
  margin-left: calc(216 * var(--liq-unit));
}

.ut_mR_216 {
  margin-right: calc(216 * var(--liq-unit));
}

.ut_mY_216 {
  margin-block: calc(216 * var(--liq-unit));
}

.ut_mX_216 {
  margin-inline: calc(216 * var(--liq-unit));
}

.ut_p_216 {
  padding: calc(216 * var(--liq-unit));
}

.ut_pT_216 {
  padding-top: calc(216 * var(--liq-unit));
}

.ut_pB_216 {
  padding-bottom: calc(216 * var(--liq-unit));
}

.ut_pL_216 {
  padding-left: calc(216 * var(--liq-unit));
}

.ut_pR_216 {
  padding-right: calc(216 * var(--liq-unit));
}

.ut_pY_216 {
  padding-block: calc(216 * var(--liq-unit));
}

.ut_pX_216 {
  padding-inline: calc(216 * var(--liq-unit));
}

.ut_m_224 {
  margin: calc(224 * var(--liq-unit));
}

.ut_mT_224 {
  margin-top: calc(224 * var(--liq-unit));
}

.ut_mB_224 {
  margin-bottom: calc(224 * var(--liq-unit));
}

.ut_mL_224 {
  margin-left: calc(224 * var(--liq-unit));
}

.ut_mR_224 {
  margin-right: calc(224 * var(--liq-unit));
}

.ut_mY_224 {
  margin-block: calc(224 * var(--liq-unit));
}

.ut_mX_224 {
  margin-inline: calc(224 * var(--liq-unit));
}

.ut_p_224 {
  padding: calc(224 * var(--liq-unit));
}

.ut_pT_224 {
  padding-top: calc(224 * var(--liq-unit));
}

.ut_pB_224 {
  padding-bottom: calc(224 * var(--liq-unit));
}

.ut_pL_224 {
  padding-left: calc(224 * var(--liq-unit));
}

.ut_pR_224 {
  padding-right: calc(224 * var(--liq-unit));
}

.ut_pY_224 {
  padding-block: calc(224 * var(--liq-unit));
}

.ut_pX_224 {
  padding-inline: calc(224 * var(--liq-unit));
}

.ut_m_232 {
  margin: calc(232 * var(--liq-unit));
}

.ut_mT_232 {
  margin-top: calc(232 * var(--liq-unit));
}

.ut_mB_232 {
  margin-bottom: calc(232 * var(--liq-unit));
}

.ut_mL_232 {
  margin-left: calc(232 * var(--liq-unit));
}

.ut_mR_232 {
  margin-right: calc(232 * var(--liq-unit));
}

.ut_mY_232 {
  margin-block: calc(232 * var(--liq-unit));
}

.ut_mX_232 {
  margin-inline: calc(232 * var(--liq-unit));
}

.ut_p_232 {
  padding: calc(232 * var(--liq-unit));
}

.ut_pT_232 {
  padding-top: calc(232 * var(--liq-unit));
}

.ut_pB_232 {
  padding-bottom: calc(232 * var(--liq-unit));
}

.ut_pL_232 {
  padding-left: calc(232 * var(--liq-unit));
}

.ut_pR_232 {
  padding-right: calc(232 * var(--liq-unit));
}

.ut_pY_232 {
  padding-block: calc(232 * var(--liq-unit));
}

.ut_pX_232 {
  padding-inline: calc(232 * var(--liq-unit));
}

.ut_m_240 {
  margin: calc(240 * var(--liq-unit));
}

.ut_mT_240 {
  margin-top: calc(240 * var(--liq-unit));
}

.ut_mB_240 {
  margin-bottom: calc(240 * var(--liq-unit));
}

.ut_mL_240 {
  margin-left: calc(240 * var(--liq-unit));
}

.ut_mR_240 {
  margin-right: calc(240 * var(--liq-unit));
}

.ut_mY_240 {
  margin-block: calc(240 * var(--liq-unit));
}

.ut_mX_240 {
  margin-inline: calc(240 * var(--liq-unit));
}

.ut_p_240 {
  padding: calc(240 * var(--liq-unit));
}

.ut_pT_240 {
  padding-top: calc(240 * var(--liq-unit));
}

.ut_pB_240 {
  padding-bottom: calc(240 * var(--liq-unit));
}

.ut_pL_240 {
  padding-left: calc(240 * var(--liq-unit));
}

.ut_pR_240 {
  padding-right: calc(240 * var(--liq-unit));
}

.ut_pY_240 {
  padding-block: calc(240 * var(--liq-unit));
}

.ut_pX_240 {
  padding-inline: calc(240 * var(--liq-unit));
}

/* content space
----------------------------------------------------------------- */
/* text style
----------------------------------------------------------------- */
.ut_text.__center {
  text-align: center;
}
.ut_text.__right {
  text-align: right;
}

/* layout
----------------------------------------------------------------- */
.ut_layout {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.ut_layout.__center {
  margin-inline: auto;
}
.ut_layout.__right {
  margin-left: auto;
}

/***********************************************************
/*  modules/elements
************************************************************/
/******************************************************************
* element - button
*******************************************************************/
.el_button {
  font-family: "M PLUS 1p", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-weight: 700;
  letter-spacing: calc(0 / 100 * 1em);
  font-size: max(11.5px, 32 * var(--liq-unit));
  line-height: 1.2;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: calc(24 * var(--liq-unit));
  width: calc(398 * var(--liq-unit));
  padding-block: calc(20 * var(--liq-unit));
  color: var(--color-text-body);
  background-color: var(--color-background-canvas);
  border: calc(3 * var(--liq-unit)) solid var(--color-border-default);
  border-radius: calc(104 * var(--liq-unit));
  -webkit-box-shadow: calc(2 * var(--liq-unit)) calc(5 * var(--liq-unit)) 0 var(--color-border-default);
          box-shadow: calc(2 * var(--liq-unit)) calc(5 * var(--liq-unit)) 0 var(--color-border-default);
  text-decoration: none;
  -webkit-transition: color 0.3s, background-color 0.3s, -webkit-box-shadow 0.3s, -webkit-transform 0.3s;
  transition: color 0.3s, background-color 0.3s, -webkit-box-shadow 0.3s, -webkit-transform 0.3s;
  transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;
  transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s, -webkit-box-shadow 0.3s, -webkit-transform 0.3s;
}
@media screen and (width < 960px) {
  .el_button {
    font-family: "M PLUS 1p", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-weight: 700;
    letter-spacing: calc(0 / 100 * 1em);
    font-size: max(11.5px, 24 * var(--liq-unit));
    line-height: 1.2;
    width: 100%;
    max-width: calc(350 * var(--liq-unit));
  }
}
@media (hover: hover) and (pointer: fine) {
  .el_button:hover {
    color: var(--color-text-inverse);
    background-color: var(--color-background-brand);
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transform: translate(calc(2 * var(--liq-unit)), calc(5 * var(--liq-unit)));
            transform: translate(calc(2 * var(--liq-unit)), calc(5 * var(--liq-unit)));
  }
  .el_button:hover img {
    -webkit-filter: brightness(0) invert(1);
            filter: brightness(0) invert(1);
  }
}
@media (hover: none) and (pointer: coarse) {
  .el_button:active {
    opacity: 0.7;
  }
}
@media (prefers-reduced-motion: reduce) {
  .el_button {
    -webkit-transition: none;
    transition: none;
  }
}
.el_button.__primary {
  font-family: "M PLUS 1p", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-weight: 900;
  letter-spacing: calc(0 / 100 * 1em);
  font-size: max(11.5px, 27 * var(--liq-unit));
  line-height: 1;
  width: auto;
  min-width: calc(403 * var(--liq-unit));
  height: calc(92 * var(--liq-unit));
  color: var(--color-text-inverse);
  background-color: var(--color-background-accent-strong);
}
@media screen and (width < 960px) {
  .el_button.__primary {
    font-family: "M PLUS 1p", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-weight: 700;
    letter-spacing: calc(0 / 100 * 1em);
    font-size: max(11.5px, 24 * var(--liq-unit));
    line-height: 1;
    width: 100%;
    min-width: 0;
    max-width: calc(350 * var(--liq-unit));
    height: calc(74 * var(--liq-unit));
  }
}
@media (hover: hover) and (pointer: fine) {
  .el_button.__primary:hover {
    background-color: var(--color-background-accent-strong);
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transform: translate(calc(2 * var(--liq-unit)), calc(5 * var(--liq-unit)));
            transform: translate(calc(2 * var(--liq-unit)), calc(5 * var(--liq-unit)));
  }
  .el_button.__primary:hover img {
    -webkit-filter: none;
            filter: none;
  }
}
@media (hover: none) and (pointer: coarse) {
  .el_button.__primary:active {
    opacity: 0.7;
  }
}
.el_button_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: calc(12 * var(--liq-unit));
}
.el_button_icon {
  display: block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: calc(40 * var(--liq-unit));
  height: auto;
  aspect-ratio: 1;
}
@media screen and (width < 960px) {
  .el_button_icon {
    width: calc(30 * var(--liq-unit));
  }
}
.el_button_icon img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-transition: -webkit-filter 0.3s;
  transition: -webkit-filter 0.3s;
  transition: filter 0.3s;
  transition: filter 0.3s, -webkit-filter 0.3s;
}
@media (prefers-reduced-motion: reduce) {
  .el_button_icon img {
    -webkit-transition: none;
    transition: none;
  }
}
.el_button_icon.__threads {
  width: calc(36 * var(--liq-unit));
  aspect-ratio: 36/40;
}
@media screen and (width < 960px) {
  .el_button_icon.__threads {
    width: calc(26 * var(--liq-unit));
    aspect-ratio: 26/29;
  }
}
.el_button_label {
  margin: 0;
}
.el_button_arrow {
  display: block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: calc(24 * var(--liq-unit));
  height: auto;
  aspect-ratio: 24/26;
}
@media screen and (width < 960px) {
  .el_button_arrow {
    width: calc(20 * var(--liq-unit));
    aspect-ratio: 20/21;
  }
}
.el_button_arrow img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-transition: -webkit-filter 0.3s;
  transition: -webkit-filter 0.3s;
  transition: filter 0.3s;
  transition: filter 0.3s, -webkit-filter 0.3s;
}
@media (prefers-reduced-motion: reduce) {
  .el_button_arrow img {
    -webkit-transition: none;
    transition: none;
  }
}

/***********************************************************
/*  modules/blocks
************************************************************/
/******************************************************************
* block - infoModal
* magmayakiimotram.com FAQ「マグマシティとは」「マグニョンとは」相当
*******************************************************************/
.bl_infoModal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}
.bl_infoModal.is_active {
  display: block;
  pointer-events: auto;
}
.bl_infoModal_overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background-color: var(--color-background-overlay);
  cursor: default;
  opacity: 0;
  -webkit-transition: opacity 0.4s cubic-bezier(0.4, 0.4, 0, 1);
  transition: opacity 0.4s cubic-bezier(0.4, 0.4, 0, 1);
}
@media (prefers-reduced-motion: reduce) {
  .bl_infoModal_overlay {
    -webkit-transition: none;
    transition: none;
  }
}
.bl_infoModal_frame {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  width: 100%;
  height: 100%;
  padding: calc(20 * var(--liq-unit));
  opacity: 0;
  -webkit-transform: translateY(calc(100 * var(--liq-unit)));
          transform: translateY(calc(100 * var(--liq-unit)));
  -webkit-transition: opacity 0.4s cubic-bezier(0.4, 0.4, 0, 1), -webkit-transform 0.4s cubic-bezier(0.4, 0.4, 0, 1);
  transition: opacity 0.4s cubic-bezier(0.4, 0.4, 0, 1), -webkit-transform 0.4s cubic-bezier(0.4, 0.4, 0, 1);
  transition: opacity 0.4s cubic-bezier(0.4, 0.4, 0, 1), transform 0.4s cubic-bezier(0.4, 0.4, 0, 1);
  transition: opacity 0.4s cubic-bezier(0.4, 0.4, 0, 1), transform 0.4s cubic-bezier(0.4, 0.4, 0, 1), -webkit-transform 0.4s cubic-bezier(0.4, 0.4, 0, 1);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .bl_infoModal_frame {
    -webkit-transition: none;
    transition: none;
    -webkit-transform: none;
            transform: none;
  }
}
.bl_infoModal.is_active.is_visible .bl_infoModal_overlay {
  opacity: 1;
}
.bl_infoModal.is_active.is_visible .bl_infoModal_frame {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  pointer-events: auto;
}
.bl_infoModal_panel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  position: relative;
  width: auto;
  max-width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--color-background-canvas);
  border-radius: calc(10 * var(--liq-unit));
  -webkit-box-shadow: 0 calc(6 * var(--liq-unit)) calc(15 * var(--liq-unit)) 0 var(--color-background-modal-shadow);
          box-shadow: 0 calc(6 * var(--liq-unit)) calc(15 * var(--liq-unit)) 0 var(--color-background-modal-shadow);
  pointer-events: auto;
  -webkit-overflow-scrolling: touch;
}
@media screen and (width < 960px) {
  .bl_infoModal_panel {
    width: 100%;
  }
}
.bl_infoModal_close {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  top: calc(30 * var(--liq-unit));
  right: calc(30 * var(--liq-unit));
  z-index: 1;
  width: calc(48 * var(--liq-unit));
  height: calc(48 * var(--liq-unit));
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
@media screen and (width < 960px) {
  .bl_infoModal_close {
    top: calc(15 * var(--liq-unit));
    right: calc(15 * var(--liq-unit));
    width: calc(28 * var(--liq-unit));
    height: calc(28 * var(--liq-unit));
  }
}
@media (prefers-reduced-motion: reduce) {
  .bl_infoModal_close {
    -webkit-transition: none;
    transition: none;
  }
}
@media (hover: hover) and (pointer: fine) {
  .bl_infoModal_close:hover {
    opacity: 0.7;
  }
}
@media (hover: none) and (pointer: coarse) {
  .bl_infoModal_close:active {
    opacity: 0.7;
  }
}
.bl_infoModal_close img {
  display: block;
  width: 100%;
  height: 100%;
}
.bl_infoModal_body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: calc(40 * var(--liq-unit));
  position: relative;
  width: calc(940 * var(--liq-unit));
  max-width: 100%;
  padding: calc(60 * var(--liq-unit));
  padding-bottom: calc(60 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .bl_infoModal_body {
    gap: calc(30 * var(--liq-unit));
    width: 100%;
    padding: calc(20 * var(--liq-unit));
    padding-bottom: calc(50 * var(--liq-unit));
  }
}
.bl_infoModal_title {
  font-family: "M PLUS 1p", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-weight: 700;
  letter-spacing: calc(0 / 100 * 1em);
  font-size: max(11.5px, 48 * var(--liq-unit));
  line-height: 1.25;
  margin: 0;
  color: var(--color-text-body);
  text-align: center;
}
@media screen and (width < 960px) {
  .bl_infoModal_title {
    font-family: "M PLUS 1p", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-weight: 700;
    letter-spacing: calc(0 / 100 * 1em);
    font-size: max(11.5px, 28 * var(--liq-unit));
    line-height: 1.25;
  }
}
.bl_infoModal_imgWrap {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.bl_infoModal_imgWrap.__magmacity {
  width: calc(444 * var(--liq-unit));
  max-width: 100%;
}
.bl_infoModal_imgWrap picture,
.bl_infoModal_imgWrap img {
  display: block;
  width: 100%;
  height: auto;
}
.bl_infoModal_text {
  font-family: "M PLUS 1p", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-weight: 700;
  letter-spacing: calc(0 / 100 * 1em);
  font-size: max(11.5px, 28 * var(--liq-unit));
  line-height: 1.6;
  margin: 0;
  color: var(--color-text-body);
  text-align: left;
}
@media screen and (width < 960px) {
  .bl_infoModal_text {
    font-family: "M PLUS 1p", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-weight: 700;
    letter-spacing: calc(0 / 100 * 1em);
    font-size: max(11.5px, 18 * var(--liq-unit));
    line-height: 1.6;
  }
}
.bl_infoModal_chars {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: calc(40 * var(--liq-unit));
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bl_infoModal_char {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: calc(10 * var(--liq-unit));
  width: calc(50% - calc(20 * var(--liq-unit)));
}
@media screen and (width < 960px) {
  .bl_infoModal_char {
    width: 100%;
  }
}
.bl_infoModal_charVisual {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: calc(300 * var(--liq-unit));
  height: calc(300 * var(--liq-unit));
  background-color: var(--color-background-magnon-sky);
  border-radius: 50%;
}
@media screen and (width < 960px) {
  .bl_infoModal_charVisual {
    width: calc(240 * var(--liq-unit));
    height: calc(240 * var(--liq-unit));
  }
}
.bl_infoModal_charImg {
  width: calc(240 * var(--liq-unit));
  max-width: 80%;
}
@media screen and (width < 960px) {
  .bl_infoModal_charImg {
    width: calc(200 * var(--liq-unit));
  }
}
.bl_infoModal_charImg.__meganyon {
  width: calc(220 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .bl_infoModal_charImg.__meganyon {
    width: calc(200 * var(--liq-unit));
  }
}
.bl_infoModal_charImg.__rikinyon {
  width: calc(200 * var(--liq-unit));
  margin-bottom: calc(40 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .bl_infoModal_charImg.__rikinyon {
    width: calc(150 * var(--liq-unit));
    margin-bottom: 0;
  }
}
.bl_infoModal_charImg.__bebinyon {
  width: calc(190 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .bl_infoModal_charImg.__bebinyon {
    width: calc(200 * var(--liq-unit));
  }
}
.bl_infoModal_charImg picture,
.bl_infoModal_charImg img {
  display: block;
  width: 100%;
  height: auto;
}
.bl_infoModal_charName {
  font-family: "M PLUS 1p", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-weight: 700;
  letter-spacing: calc(0 / 100 * 1em);
  font-size: max(11.5px, 36 * var(--liq-unit));
  line-height: 1.4;
  margin: 0;
  color: var(--color-text-body);
  text-align: center;
}
@media screen and (width < 960px) {
  .bl_infoModal_charName {
    font-family: "M PLUS 1p", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-weight: 700;
    letter-spacing: calc(0 / 100 * 1em);
    font-size: max(11.5px, 24 * var(--liq-unit));
    line-height: 1.4;
  }
}
.bl_infoModal_charDesc {
  font-family: "M PLUS 1p", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-weight: 700;
  letter-spacing: calc(0 / 100 * 1em);
  font-size: max(11.5px, 16 * var(--liq-unit));
  line-height: 1.4;
  margin: 0;
  color: var(--color-text-body);
  text-align: center;
}
@media screen and (width < 960px) {
  .bl_infoModal_charDesc {
    font-family: "M PLUS 1p", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-weight: 700;
    letter-spacing: calc(-5 / 100 * 1em);
    font-size: max(11.5px, 14 * var(--liq-unit));
    line-height: 1.4;
  }
}

/***********************************************************
/*  modules/footer
************************************************************/
/******************************************************************
* footer
*******************************************************************/
.footer {
  background-color: var(--color-background-soft);
}
.footer_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: calc(56 * var(--liq-unit));
  padding-block: calc(96 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .footer_inner {
    gap: calc(56 * var(--liq-unit));
    padding-block: calc(96 * var(--liq-unit));
    padding-inline: calc(20 * var(--liq-unit));
  }
}
.footer_info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: calc(56 * var(--liq-unit));
  width: 100%;
}
.footer_infoTitle {
  width: 100%;
  margin: 0;
}
.footer_infoTitleImg {
  width: 100%;
  max-width: calc(1440 * var(--liq-unit));
  margin-inline: auto;
}
@media screen and (width < 960px) {
  .footer_infoTitleImg {
    max-width: calc(350 * var(--liq-unit));
  }
}
.footer_infoTitleImg picture,
.footer_infoTitleImg img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440/104;
}
@media screen and (width < 960px) {
  .footer_infoTitleImg picture,
  .footer_infoTitleImg img {
    aspect-ratio: 350/72;
  }
}
.footer_infoList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: calc(40 * var(--liq-unit));
  width: 100%;
  max-width: calc(715 * var(--liq-unit));
  margin: 0;
}
@media screen and (width < 960px) {
  .footer_infoList {
    gap: calc(32 * var(--liq-unit));
    max-width: none;
  }
}
.footer_infoRow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 100%;
}
@media screen and (width < 960px) {
  .footer_infoRow {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: calc(24 * var(--liq-unit));
  }
}
.footer_infoTerm {
  font-family: "M PLUS 1p", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-weight: 900;
  letter-spacing: calc(0 / 100 * 1em);
  font-size: max(11.5px, 16 * var(--liq-unit));
  line-height: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: calc(200 * var(--liq-unit));
  margin: 0;
  padding-block: calc(4 * var(--liq-unit));
  padding-inline: calc(24 * var(--liq-unit));
  color: var(--color-text-inverse);
  background-color: var(--color-icon-decoration-accent);
  border-radius: calc(12 * var(--liq-unit));
  text-align: center;
}
@media screen and (width < 960px) {
  .footer_infoTerm {
    font-family: "M PLUS 1p", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-weight: 900;
    letter-spacing: calc(0 / 100 * 1em);
    font-size: max(11.5px, 16 * var(--liq-unit));
    line-height: 1;
    width: 100%;
    padding-block: calc(6 * var(--liq-unit));
    height: calc(36 * var(--liq-unit));
    padding-inline: calc(24 * var(--liq-unit));
  }
}
.footer_infoDesc {
  font-family: "M PLUS 1p", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-weight: 700;
  letter-spacing: calc(0 / 100 * 1em);
  font-size: max(11.5px, 20 * var(--liq-unit));
  line-height: 1.8;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin: 0;
  padding-block: calc(4 * var(--liq-unit)) 0;
  padding-inline: calc(32 * var(--liq-unit));
  color: var(--color-text-brand);
}
@media screen and (width < 960px) {
  .footer_infoDesc {
    font-family: "M PLUS 1p", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-weight: 700;
    letter-spacing: calc(0 / 100 * 1em);
    font-size: max(11.5px, 15 * var(--liq-unit));
    line-height: 1.8;
    width: 100%;
    padding-block: 0;
    padding-inline: 0;
    text-align: center;
  }
}
@media screen and (width < 960px) {
  .footer_infoDesc.__dates {
    text-align: left;
  }
}
.footer_snsLinks {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: calc(40 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .footer_snsLinks {
    gap: calc(32 * var(--liq-unit));
    width: 100%;
  }
}
.footer_snsLink {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: calc(8 * var(--liq-unit));
  padding-bottom: calc(8 * var(--liq-unit));
  color: var(--color-text-brand);
  border-bottom: calc(2 * var(--liq-unit)) solid var(--color-text-brand);
  text-decoration: none;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
@media screen and (width < 960px) {
  .footer_snsLink {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    min-width: 0;
  }
}
@media (hover: hover) and (pointer: fine) {
  .footer_snsLink:hover {
    opacity: 0.75;
  }
}
@media (hover: none) and (pointer: coarse) {
  .footer_snsLink:active {
    opacity: 0.7;
  }
}
@media (prefers-reduced-motion: reduce) {
  .footer_snsLink {
    -webkit-transition: none;
    transition: none;
  }
}
.footer_snsIcon {
  display: block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: calc(24 * var(--liq-unit));
  height: auto;
  aspect-ratio: 1;
}
@media screen and (width < 960px) {
  .footer_snsIcon {
    width: calc(20 * var(--liq-unit));
  }
}
.footer_snsIcon img {
  display: block;
  width: 100%;
  height: auto;
}
.footer_snsIcon.__threads {
  width: calc(22 * var(--liq-unit));
  aspect-ratio: 22/24;
}
@media screen and (width < 960px) {
  .footer_snsIcon.__threads {
    width: calc(18 * var(--liq-unit));
    aspect-ratio: 18/20;
  }
}
.footer_snsLabel {
  font-family: "M PLUS 1p", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-weight: 700;
  letter-spacing: calc(0 / 100 * 1em);
  font-size: max(11.5px, 20 * var(--liq-unit));
  line-height: 1.2;
}
@media screen and (width < 960px) {
  .footer_snsLabel {
    font-family: "M PLUS 1p", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-weight: 700;
    letter-spacing: calc(0 / 100 * 1em);
    font-size: max(11.5px, 16 * var(--liq-unit));
    line-height: 1.2;
  }
}
.footer_snsArrow {
  display: block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: calc(13 * var(--liq-unit));
  height: auto;
  aspect-ratio: 13/14;
  -webkit-transform: rotate(140deg);
          transform: rotate(140deg);
}
.footer_snsArrow img {
  display: block;
  width: 100%;
  height: auto;
}
.footer_bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: calc(56 * var(--liq-unit));
  width: 100%;
}
.footer_logo {
  width: calc(320 * var(--liq-unit));
  max-width: 100%;
}
.footer_logo picture,
.footer_logo img {
  display: block;
  width: 100%;
  height: auto;
}
.footer_btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: calc(40 * var(--liq-unit));
  width: 100%;
}
@media screen and (width < 960px) {
  .footer_btns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: calc(24 * var(--liq-unit));
  }
}
.footer_btns .el_button {
  width: calc(440 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .footer_btns .el_button {
    width: 100%;
    max-width: none;
  }
}
@media (hover: hover) and (pointer: fine) {
  .footer_btns .el_button:hover {
    background-color: var(--color-background-footer);
  }
}
@media (hover: none) and (pointer: coarse) {
  .footer_btns .el_button:active {
    opacity: 0.7;
  }
}
.footer_copy {
  font-family: "fot-rodin-pron", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-weight: 900;
  letter-spacing: calc(0 / 100 * 1em);
  font-size: max(11.5px, 14 * var(--liq-unit));
  line-height: 1;
  margin: 0;
  padding-block: calc(16 * var(--liq-unit));
  color: var(--color-text-inverse);
  background-color: var(--color-background-footer);
  text-align: center;
}
@media screen and (width < 960px) {
  .footer_copy {
    font-family: "M PLUS 1p", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-weight: 900;
    letter-spacing: calc(0 / 100 * 1em);
    font-size: max(11.5px, 14 * var(--liq-unit));
    line-height: 1;
  }
}

/***********************************************************
/*  modules/header
************************************************************/
/******************************************************************
* header
*******************************************************************/
body.is-scroll-locked .header_inner {
  width: calc(100% - var(--scrollbar-width));
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .header {
    -webkit-transition: none;
    transition: none;
  }
}
.header.is_visible, .is_nojs .header {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.header_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
  z-index: 4;
  width: 100%;
  height: calc(80 * var(--liq-unit));
  padding: calc(12 * var(--liq-unit)) calc(32 * var(--liq-unit));
  background-color: var(--color-background-header);
}
@media screen and (width < 960px) {
  .header_inner {
    height: calc(80 * var(--liq-unit));
    padding: calc(12 * var(--liq-unit)) calc(16 * var(--liq-unit));
  }
}
.header_logo {
  display: block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: calc(240 * var(--liq-unit));
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
@media (prefers-reduced-motion: reduce) {
  .header_logo {
    -webkit-transition: none;
    transition: none;
  }
}
@media (hover: hover) and (pointer: fine) {
  .header_logo:hover {
    opacity: 0.75;
  }
}
@media (hover: none) and (pointer: coarse) {
  .header_logo:active {
    opacity: 0.7;
  }
}
.header_logoImg {
  width: 100%;
  aspect-ratio: 240/56;
}
.header_logoImg img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.header_nav {
  height: 100%;
}
.header_navList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: calc(16 * var(--liq-unit));
  height: 100%;
}
.header_navItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}
.header_navItem.__star {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.header_navStar {
  width: calc(16 * var(--liq-unit));
  aspect-ratio: 16/15;
}
.header_navStar img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.header_navLink {
  font-family: "M PLUS 1p", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-weight: 900;
  letter-spacing: calc(0 / 100 * 1em);
  font-size: max(11.5px, 20 * var(--liq-unit));
  line-height: 1.7;
  color: var(--color-text-brand);
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}
@media (prefers-reduced-motion: reduce) {
  .header_navLink {
    -webkit-transition: none;
    transition: none;
  }
}
@media (hover: hover) and (pointer: fine) {
  .header_navLink:hover {
    color: var(--color-text-accent);
  }
}
@media (hover: none) and (pointer: coarse) {
  .header_navLink:active {
    opacity: 0.7;
  }
}
@media (hover: hover) and (pointer: fine) {
  .header_navLink.__color2:hover {
    color: var(--color-text-brand-blue);
  }
}
@media (hover: none) and (pointer: coarse) {
  .header_navLink.__color2:active {
    opacity: 0.7;
  }
}
.header_menuBtn {
  display: none;
}
@media screen and (width < 960px) {
  .header_menuBtn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: calc(6 * var(--liq-unit));
    position: relative;
    z-index: 4;
    width: calc(40 * var(--liq-unit));
    height: calc(24 * var(--liq-unit));
    padding: 0;
    border: 0;
    background-color: transparent;
    cursor: pointer;
  }
  .header_menuBtn span {
    display: block;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 100%;
    height: calc(4 * var(--liq-unit));
    background-color: var(--color-icon-decoration-brand);
    -webkit-transition: background-color 0.3s, opacity 0.3s ease, -webkit-transform 0.3s ease;
    transition: background-color 0.3s, opacity 0.3s ease, -webkit-transform 0.3s ease;
    transition: background-color 0.3s, transform 0.3s ease, opacity 0.3s ease;
    transition: background-color 0.3s, transform 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease;
  }
}
@media screen and (width < 960px) and (prefers-reduced-motion: reduce) {
  .header_menuBtn span {
    -webkit-transition: none;
    transition: none;
  }
}
.header_spMenu {
  display: none;
}
@media screen and (width < 960px) {
  .header_spMenu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1;
    overflow-y: auto;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background-color: transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease;
    transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease;
  }
}
@media screen and (width < 960px) and (prefers-reduced-motion: reduce) {
  .header_spMenu {
    -webkit-transition: none;
    transition: none;
  }
}
.header_spMenuHead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
  z-index: 2;
  height: calc(80 * var(--liq-unit));
  padding: calc(12 * var(--liq-unit)) calc(16 * var(--liq-unit));
  background-color: var(--color-background-header);
}
.header_spMenuBody {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  z-index: 2;
  min-height: calc(100% - calc(80 * var(--liq-unit)));
  padding: calc(40 * var(--liq-unit)) calc(20 * var(--liq-unit)) calc(45 * var(--liq-unit));
  overflow: hidden;
}
.header_spMenuBody::before {
  background-image: url(../../assets/images/compression/common_headerMenu_bg.png);
}
@supports (background-image: url(../../assets/images/webp/common_headerMenu_bg.webp)) {
  .header_spMenuBody::before {
    background-image: url(../../assets/images/webp/common_headerMenu_bg.webp);
  }
}
@supports (background-image: url(../../assets/images/avif/common_headerMenu_bg.avif)) {
  .header_spMenuBody::before {
    background-image: url(../../assets/images/avif/common_headerMenu_bg.avif);
  }
}
.header_spMenuBody::before {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  content: "";
  position: absolute;
  bottom: calc(230 * var(--liq-unit));
  left: 0;
  z-index: 0;
  width: 100%;
  height: calc(538 * var(--liq-unit));
  pointer-events: none;
}
.header_spNav {
  position: relative;
  z-index: 1;
}
.header_spNavList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: calc(16 * var(--liq-unit));
}
.header_spNavLink {
  font-family: "M PLUS 1p", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-weight: 900;
  letter-spacing: calc(0 / 100 * 1em);
  font-size: max(11.5px, 28 * var(--liq-unit));
  line-height: 1.7142857143;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: calc(12 * var(--liq-unit));
  color: var(--color-text-inverse);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
@media (prefers-reduced-motion: reduce) {
  .header_spNavLink {
    -webkit-transition: none;
    transition: none;
  }
}
@media (hover: hover) and (pointer: fine) {
  .header_spNavLink:hover {
    opacity: 0.75;
  }
}
@media (hover: none) and (pointer: coarse) {
  .header_spNavLink:active {
    opacity: 0.7;
  }
}
.header_spNavStar {
  display: block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: calc(16 * var(--liq-unit));
  aspect-ratio: 16/15;
}
.header_spNavStar img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.header_spSns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: calc(45 * var(--liq-unit));
}
.header_spSnsIllust {
  width: calc(200 * var(--liq-unit));
  aspect-ratio: 200/154;
}
.header_spSnsIllust img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.header_spSnsText {
  font-family: "fot-rodin-pron", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-weight: 800;
  letter-spacing: calc(0 / 100 * 1em);
  font-size: max(11.5px, 20 * var(--liq-unit));
  line-height: 1.8;
  margin-top: calc(16 * var(--liq-unit));
  color: var(--color-text-accent);
  text-align: center;
}
.header_spSnsLinks {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: calc(32 * var(--liq-unit));
  margin-top: calc(16 * var(--liq-unit));
}
.header_spSnsLink {
  display: block;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
@media (prefers-reduced-motion: reduce) {
  .header_spSnsLink {
    -webkit-transition: none;
    transition: none;
  }
}
@media (hover: hover) and (pointer: fine) {
  .header_spSnsLink:hover {
    opacity: 0.75;
  }
}
@media (hover: none) and (pointer: coarse) {
  .header_spSnsLink:active {
    opacity: 0.7;
  }
}
.header_spSnsLink img {
  display: block;
  width: auto;
  height: calc(40 * var(--liq-unit));
}
.header_spMenuWave {
  position: absolute;
  left: calc(-54 * var(--liq-unit));
  bottom: calc(-158 * var(--liq-unit));
  z-index: 0;
  width: calc(524 * var(--liq-unit));
  pointer-events: none;
}
.header_spMenuWave img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (width < 960px) {
  .header.is_active .header_spMenu {
    z-index: 3;
    background-color: var(--color-background-brand);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}
@media screen and (width < 960px) {
  .header.is_active .header_menuBtn span:nth-child(1) {
    -webkit-transform: translateY(calc(100% + calc(6 * var(--liq-unit)))) rotate(28deg);
            transform: translateY(calc(100% + calc(6 * var(--liq-unit)))) rotate(28deg);
  }
  .header.is_active .header_menuBtn span:nth-child(2) {
    opacity: 0;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  .header.is_active .header_menuBtn span:nth-child(3) {
    -webkit-transform: translateY(calc(-100% - calc(6 * var(--liq-unit)))) rotate(-28deg);
            transform: translateY(calc(-100% - calc(6 * var(--liq-unit)))) rotate(-28deg);
  }
}

/***********************************************************
/*  modules/layouts
************************************************************/
/******************************************************************
* layout - container
* $container-sizesで定義されたサイズごとにモディファイアクラスを生成
* 例）ly_container __medium, __large,  __small, ・・・
*******************************************************************/
@media screen and (width < 960px) {
  .ly_container.__spWide {
    max-width: none !important;
    width: 100% !important;
    padding-inline: 0 !important;
  }
}

/******************************************************************
* layout - main
*******************************************************************/
.ly_main.__hidden {
  overflow: hidden;
}

/******************************************************************
* layout - section
* $section-sizesで定義されたサイズごとにモディファイアクラスを生成
* デフォルトはpadding marginにしたい場合は「__mg」を付与
* デフォルトは上下余白　上だけにしたい場合「__top」 下だけにしたい場合「__bottom」付与
* 例）ly_section __normal,  __large,  __small, ・・・
*******************************************************************/