@charset "UTF-8";
/************************************************************
/*  initpage - ページファイル用の初期設定
/*  各ページファイルで @use './initpage' as *; で使用
/*  utils と Sass組み込みモジュール（map, meta, list）を提供
/*  共通スタイル（global, helpers, header, footer, layouts）も読み込み
************************************************************/
/***********************************************************
/*  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判定
*******************************************************************/
/******************************************************************
* アニメーション制御
* ユーザーのアニメーション制御設定による判定分け
*******************************************************************/
/* アニメーション制限をしていない場合
----------------------------------------------------------------- */
/* OSやブラウザでアニメーション減らす設定をしている場合
----------------------------------------------------------------- */
/******************************************************************
* 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を記載する
*******************************************************************/
/******************************************************************
 * カルーセル用アニメーション
 * 動かす要素は半分で連結できる形を準備。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%);
  }
}
/******************************************************************
* page - top
*******************************************************************/
/* mv
----------------------------------------------------------------- */
.section_mv {
  overflow: hidden;
}

.un_mv {
  position: relative;
  /* PC用設定: 画面いっぱい表示 */
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  /* スマホ（SP）時の設定 */
}
@media screen and (width < 960px) {
  .un_mv {
    /* 1. vh / dvh を完全に無効化し、親枠の高さを画像サイズに自動追従させる */
    height: auto !important;
    min-height: 0 !important;
  }
}
.un_mv_img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  aspect-ratio: 1440/840;
}
.un_mv_img picture {
  display: block;
  width: 100%;
  height: 100%;
}
@media screen and (width < 960px) {
  .un_mv_img {
    /* 2. SP用アスペクト比を設定し、高さを自動にする */
    width: 100%;
    height: auto !important;
    aspect-ratio: 390/600;
  }
}
.un_mv_img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}
@media screen and (width < 960px) {
  .un_mv_img img {
    /* 3. 画像自体が引き伸ばされないよう比率通りに整える */
    height: auto !important;
    -o-object-fit: contain;
       object-fit: contain;
  }
}
.un_mv_logo {
  position: absolute;
  top: calc(202 * var(--liq-unit));
  left: calc(518 * var(--liq-unit));
  z-index: 1;
  width: calc(402 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_mv_logo {
    top: calc(188 * var(--liq-unit));
    left: calc(129 * var(--liq-unit));
    width: calc(167 * var(--liq-unit));
  }
}
.un_mv_logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* textLiner
----------------------------------------------------------------- */
.un_textLiner {
  background-color: var(--color-background-brand);
  overflow: hidden;
  height: calc(68 * var(--liq-unit));
  border-top: calc(6 * var(--liq-unit)) solid var(--color-border-white);
  border-bottom: calc(6 * var(--liq-unit)) solid var(--color-border-white);
}
@media screen and (width < 960px) {
  .un_textLiner {
    height: calc(40 * var(--liq-unit));
    border-width: calc(4 * var(--liq-unit));
  }
}
.un_textLiner_viewport {
  overflow: hidden;
  height: 100%;
}
.un_textLiner_track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  height: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .un_textLiner_track {
    -webkit-animation: carousel-to-left 40s linear infinite normal 0s;
            animation: carousel-to-left 40s linear infinite normal 0s;
  }
}
.un_textLiner_lane {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  gap: calc(16 * var(--liq-unit));
  height: 100%;
  padding-inline: calc(8 * var(--liq-unit));
}
.un_textLiner_item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  gap: calc(16 * var(--liq-unit));
}
.un_textLiner_magma {
  width: calc(267 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_textLiner_magma {
    width: calc(156 * var(--liq-unit));
  }
}
.un_textLiner_magma picture,
.un_textLiner_magma img {
  display: block;
  width: 100%;
  height: auto;
}
.un_textLiner_star {
  display: block;
  width: calc(16 * var(--liq-unit));
  height: auto;
  aspect-ratio: 16/15;
}
@media screen and (width < 960px) {
  .un_textLiner_star {
    width: calc(10 * var(--liq-unit));
    aspect-ratio: 1;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .un_textLiner.__reverse .un_textLiner_track {
    -webkit-animation: carousel-to-right 40s linear infinite normal 0s;
            animation: carousel-to-right 40s linear infinite normal 0s;
    position: relative;
    left: 100%;
  }
}

/* about
----------------------------------------------------------------- */
.section_about {
  background-image: url(../../assets/images/compression/top_aboutBg.png);
}
@supports (background-image: url(../../assets/images/webp/top_aboutBg.webp)) {
  .section_about {
    background-image: url(../../assets/images/webp/top_aboutBg.webp);
  }
}
@supports (background-image: url(../../assets/images/avif/top_aboutBg.avif)) {
  .section_about {
    background-image: url(../../assets/images/avif/top_aboutBg.avif);
  }
}
.section_about {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  overflow: hidden;
}
@media screen and (width < 960px) {
  .section_about {
    background-image: url(../../assets/images/compression/top_aboutBg_sp.png);
  }
  @supports (background-image: url(../../assets/images/webp/top_aboutBg_sp.webp)) {
    .section_about {
      background-image: url(../../assets/images/webp/top_aboutBg_sp.webp);
    }
  }
  @supports (background-image: url(../../assets/images/avif/top_aboutBg_sp.avif)) {
    .section_about {
      background-image: url(../../assets/images/avif/top_aboutBg_sp.avif);
    }
  }
  .section_about {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
  }
}

.un_about_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: calc(59 * var(--liq-unit));
  max-width: calc(1597 * var(--liq-unit));
  margin-inline: auto;
  padding-block: calc(76 * var(--liq-unit)) calc(132 * var(--liq-unit));
  padding-inline: calc(157 * var(--liq-unit)) calc(214 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_about_inner {
    display: block;
    max-width: none;
    margin-inline: 0;
    padding-block: calc(12 * var(--liq-unit)) calc(114 * var(--liq-unit));
    padding-inline: 0;
  }
}
.un_about_title {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: calc(519 * var(--liq-unit));
  margin: 0;
}
@media screen and (width < 960px) {
  .un_about_title {
    width: auto;
    height: calc(202 * var(--liq-unit));
    max-width: none;
    margin-left: calc(-51 * var(--liq-unit));
  }
}
.un_about_titleImg {
  width: 100%;
}
@media screen and (width < 960px) {
  .un_about_titleImg {
    width: auto;
    height: 100%;
  }
}
.un_about_titleImg img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (width < 960px) {
  .un_about_titleImg img {
    width: auto;
    height: 100%;
  }
}
.un_about_text {
  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(36 * var(--liq-unit));
  width: calc(491 * var(--liq-unit));
  padding-top: calc(206 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_about_text {
    gap: calc(36 * var(--liq-unit));
    width: 100%;
    padding-top: 0;
    max-width: calc(390 * var(--liq-unit));
    margin-top: calc(53 * var(--liq-unit));
    padding-inline: calc(18 * var(--liq-unit)) calc(25 * var(--liq-unit));
  }
}
.un_about_lead, .un_about_body, .un_about_catch, .un_about_closingLead, .un_about_closingBody {
  margin: 0;
  padding-top: calc(6 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_about_lead, .un_about_body, .un_about_catch, .un_about_closingLead, .un_about_closingBody {
    padding-top: 0;
  }
}
.un_about_lead picture,
.un_about_lead img, .un_about_body picture,
.un_about_body img, .un_about_catch picture,
.un_about_catch img, .un_about_closingLead picture,
.un_about_closingLead img, .un_about_closingBody picture,
.un_about_closingBody img {
  display: block;
}
.un_about_lead picture,
.un_about_lead img {
  width: calc(418 * var(--liq-unit));
  max-width: 100%;
  aspect-ratio: 418/81;
}
@media screen and (width < 960px) {
  .un_about_lead picture,
  .un_about_lead img {
    width: calc(347 * var(--liq-unit));
    aspect-ratio: 347/67;
  }
}
.un_about_body picture,
.un_about_body img {
  width: calc(479 * var(--liq-unit));
  max-width: 100%;
  aspect-ratio: 479/124;
}
@media screen and (width < 960px) {
  .un_about_body picture,
  .un_about_body img {
    width: calc(299 * var(--liq-unit));
    aspect-ratio: 299/175;
  }
}
.un_about_catch picture,
.un_about_catch img {
  width: calc(474 * var(--liq-unit));
  max-width: 100%;
  aspect-ratio: 474/102;
}
@media screen and (width < 960px) {
  .un_about_catch picture,
  .un_about_catch img {
    width: calc(206 * var(--liq-unit));
    aspect-ratio: 206/120;
  }
}
.un_about_closing {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.un_about_closingLead picture,
.un_about_closingLead img {
  width: calc(491 * var(--liq-unit));
  max-width: 100%;
  aspect-ratio: 491/82;
}
@media screen and (width < 960px) {
  .un_about_closingLead picture,
  .un_about_closingLead img {
    width: calc(279 * var(--liq-unit));
    aspect-ratio: 279/103;
  }
}
.un_about_closingBody picture,
.un_about_closingBody img {
  width: calc(499 * var(--liq-unit));
  max-width: 100%;
  aspect-ratio: 499/49;
}
@media screen and (width < 960px) {
  .un_about_closingBody picture,
  .un_about_closingBody img {
    width: calc(279 * var(--liq-unit));
    aspect-ratio: 279/73;
  }
}

/* start
----------------------------------------------------------------- */
.section_start {
  position: relative;
  z-index: 1;
  overflow: visible;
}

.un_start {
  position: relative;
}
.un_start_character {
  position: absolute;
  top: calc(-183 * var(--liq-unit));
  left: calc(161 * var(--liq-unit));
  z-index: 2;
  width: calc(249 * var(--liq-unit));
  aspect-ratio: 249/220;
}
@media screen and (width < 960px) {
  .un_start_character {
    top: calc(-110 * var(--liq-unit));
    left: calc(11 * var(--liq-unit));
    width: calc(166 * var(--liq-unit));
    aspect-ratio: 166/147;
  }
}
.un_start_character img {
  display: block;
  width: 100%;
  height: auto;
}
.un_start_band {
  width: 100%;
}
.un_start_band picture,
.un_start_band img {
  display: block;
  width: 100%;
  height: auto;
}
.un_start_bandSp {
  width: 100%;
}
.un_start_bandSp picture,
.un_start_bandSp img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 390/200;
}

/* account
----------------------------------------------------------------- */
.section_account {
  background-image: url(../../assets/images/compression/top_accountBg.png);
}
@supports (background-image: url(../../assets/images/webp/top_accountBg.webp)) {
  .section_account {
    background-image: url(../../assets/images/webp/top_accountBg.webp);
  }
}
@supports (background-image: url(../../assets/images/avif/top_accountBg.avif)) {
  .section_account {
    background-image: url(../../assets/images/avif/top_accountBg.avif);
  }
}
.section_account {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  overflow: hidden;
}
@media screen and (width < 960px) {
  .section_account {
    background-image: url(../../assets/images/compression/top_accountBg_sp.png);
  }
  @supports (background-image: url(../../assets/images/webp/top_accountBg_sp.webp)) {
    .section_account {
      background-image: url(../../assets/images/webp/top_accountBg_sp.webp);
    }
  }
  @supports (background-image: url(../../assets/images/avif/top_accountBg_sp.avif)) {
    .section_account {
      background-image: url(../../assets/images/avif/top_accountBg_sp.avif);
    }
  }
  .section_account {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
  }
}
.section_account.__renew {
  background-image: url(../../assets/images/compression/top_entryBg.png);
}
@supports (background-image: url(../../assets/images/webp/top_entryBg.webp)) {
  .section_account.__renew {
    background-image: url(../../assets/images/webp/top_entryBg.webp);
  }
}
@supports (background-image: url(../../assets/images/avif/top_entryBg.avif)) {
  .section_account.__renew {
    background-image: url(../../assets/images/avif/top_entryBg.avif);
  }
}
.section_account.__renew {
  background-size: 100% 100%;
  background-position: center top;
  background-repeat: no-repeat;
  overflow: hidden;
}
@media screen and (width < 960px) {
  .section_account.__renew {
    background-image: url(../../assets/images/compression/top_entryBg_sp.png);
  }
  @supports (background-image: url(../../assets/images/webp/top_entryBg_sp.webp)) {
    .section_account.__renew {
      background-image: url(../../assets/images/webp/top_entryBg_sp.webp);
    }
  }
  @supports (background-image: url(../../assets/images/avif/top_entryBg_sp.avif)) {
    .section_account.__renew {
      background-image: url(../../assets/images/avif/top_entryBg_sp.avif);
    }
  }
  .section_account.__renew {
    background-size: 100% 100%;
    background-position: center top;
    background-repeat: no-repeat;
  }
}

@media screen and (width < 960px) {
  .un_account {
    padding-bottom: calc(225 * var(--liq-unit));
  }
}
.un_account_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(40 * var(--liq-unit));
  max-width: calc(1440 * var(--liq-unit));
  margin-inline: auto;
  padding-block: calc(96 * var(--liq-unit));
  padding-inline: calc(80 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_account_inner {
    max-width: none;
    padding-block: calc(64 * var(--liq-unit));
    padding-inline: calc(20 * var(--liq-unit));
  }
}
.un_account_title {
  width: 100%;
  margin: 0;
}
@media screen and (width < 960px) {
  .un_account_title {
    width: calc(339 * var(--liq-unit));
  }
}
.un_account_titleImg {
  width: 100%;
}
.un_account_titleImg picture,
.un_account_titleImg img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (width < 960px) {
  .un_account_titleImg picture,
  .un_account_titleImg img {
    aspect-ratio: 339/126;
  }
}
.un_account_text {
  margin: 0;
  padding-top: calc(10 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_account_text {
    padding-top: 0;
  }
}
.un_account_text picture,
.un_account_text img {
  display: block;
  width: calc(532 * var(--liq-unit));
  max-width: 100%;
  aspect-ratio: 532/121;
  margin-inline: auto;
}
@media screen and (width < 960px) {
  .un_account_text picture,
  .un_account_text img {
    width: calc(289 * var(--liq-unit));
    aspect-ratio: 289/157;
  }
}
.un_account_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) {
  .un_account_btns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: calc(24 * var(--liq-unit));
  }
}
@media screen and (width < 960px) {
  .un_account.__renew {
    padding-bottom: 0;
  }
}
.un_account.__renew .un_account_entry {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-inline: auto;
  padding-block: calc(96 * var(--liq-unit)) calc(80 * var(--liq-unit));
  padding-inline: calc(80 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_account.__renew .un_account_entry {
    /*padding-block: s(64) s(240);*/ /* アコーディオン追加前 */
    padding-block: calc(64 * var(--liq-unit)) calc(50 * var(--liq-unit)); /* アコーディオン追加後 */
    padding-inline: calc(20 * var(--liq-unit));
  }
}
.un_account.__renew .un_account_entryHead {
  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: 0;
  text-align: center;
}
.un_account.__renew .un_account_entryLabel {
  width: calc(99 * var(--liq-unit));
}
.un_account.__renew .un_account_entryLabel picture,
.un_account.__renew .un_account_entryLabel img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (width < 960px) {
  .un_account.__renew .un_account_entryLabel {
    width: calc(80 * var(--liq-unit));
  }
}
.un_account.__renew .un_account_entryTitle {
  margin: 0;
}
.un_account.__renew .un_account_entryTitleImg {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}
.un_account.__renew .un_account_entryTitleImg picture,
.un_account.__renew .un_account_entryTitleImg img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (width < 960px) {
  .un_account.__renew .un_account_entryTitleImg {
    width: calc(339 * var(--liq-unit));
  }
}
.un_account.__renew .un_account_entryLead {
  position: relative;
  z-index: 2;
  width: calc(473 * var(--liq-unit));
  max-width: 100%;
  margin-block: calc(40 * var(--liq-unit)) 0;
  margin-inline: auto;
}
.un_account.__renew .un_account_entryLead picture,
.un_account.__renew .un_account_entryLead img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (width < 960px) {
  .un_account.__renew .un_account_entryLead {
    width: calc(320 * var(--liq-unit));
    margin-block: calc(24 * var(--liq-unit)) 0;
  }
}
.un_account.__renew .un_account_entryEnd {
  position: relative;
  z-index: 2;
  width: calc(852 * var(--liq-unit));
  max-width: 100%;
  margin-block: calc(32 * var(--liq-unit)) 0;
  margin-inline: auto;
}
.un_account.__renew .un_account_entryEnd picture,
.un_account.__renew .un_account_entryEnd img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (width < 960px) {
  .un_account.__renew .un_account_entryEnd {
    width: calc(335 * var(--liq-unit));
    margin-block: calc(20 * var(--liq-unit)) 0;
  }
}
.un_account.__renew .un_account_entryVisual {
  position: relative;
  z-index: 1;
  height: 0;
}
.un_account.__renew .un_account_entryChara {
  position: absolute;
  pointer-events: none;
}
.un_account.__renew .un_account_entryChara picture,
.un_account.__renew .un_account_entryChara img {
  display: block;
  width: 100%;
  height: auto;
}
.un_account.__renew .un_account_entryChara.__left {
  top: calc(-180 * var(--liq-unit));
  left: calc(105 * var(--liq-unit));
  width: calc(247 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_account.__renew .un_account_entryChara.__left {
    top: calc(540 * var(--liq-unit));
    left: calc(-8 * var(--liq-unit));
    width: calc(180 * var(--liq-unit));
  }
}
.un_account.__renew .un_account_entryChara.__right {
  top: calc(-280 * var(--liq-unit));
  right: calc(70 * var(--liq-unit));
  width: calc(253 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_account.__renew .un_account_entryChara.__right {
    top: calc(520 * var(--liq-unit));
    right: calc(-8 * var(--liq-unit));
    width: calc(180 * var(--liq-unit));
  }
}
.un_account.__renew .un_account_entrySteps {
  position: relative;
  z-index: 2;
  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(36 * var(--liq-unit));
  width: calc(928 * var(--liq-unit));
  max-width: 100%;
  margin-block: calc(80 * var(--liq-unit)) 0;
  margin-inline: auto;
}
@media screen and (width < 960px) {
  .un_account.__renew .un_account_entrySteps {
    gap: calc(24 * var(--liq-unit));
    margin-block: calc(32 * var(--liq-unit)) 0;
  }
}
.un_account.__renew .un_account_entryStep {
  margin: 0;
  width: 100%;
}
.un_account.__renew .un_account_entryStep picture,
.un_account.__renew .un_account_entryStep img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}
.un_account.__renew .un_account_entryStep:first-child picture,
.un_account.__renew .un_account_entryStep:first-child img {
  max-width: 100%;
}
.un_account.__renew .un_account_entryStep:last-child picture,
.un_account.__renew .un_account_entryStep:last-child img {
  max-width: 100%;
}
.un_account.__renew .un_account_entryBtns {
  position: relative;
  z-index: 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;
  gap: calc(40 * var(--liq-unit));
  width: 100%;
  margin-top: calc(60 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_account.__renew .un_account_entryBtns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: calc(24 * var(--liq-unit));
    margin-top: calc(40 * var(--liq-unit));
  }
}
.un_account.__renew .un_account_entryDetail {
  position: relative;
  z-index: 2;
  width: calc(833 * var(--liq-unit));
  max-width: 100%;
  margin-block: calc(38 * var(--liq-unit)) 0;
  margin-inline: auto;
}
@media screen and (width < 960px) {
  .un_account.__renew .un_account_entryDetail {
    width: calc(350 * var(--liq-unit));
    margin-block: calc(280 * var(--liq-unit)) 0;
  }
}
.un_account.__renew .un_account_entryDetailBtn {
  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, 32 * var(--liq-unit));
  line-height: 1.25;
  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(16 * var(--liq-unit));
  width: 100%;
  padding-block: calc(14 * var(--liq-unit));
  color: var(--color-text-body);
  background-color: var(--color-background-canvas);
  border-radius: calc(100 * var(--liq-unit));
  cursor: pointer;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
@media screen and (width < 960px) {
  .un_account.__renew .un_account_entryDetailBtn {
    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.4;
    gap: calc(10 * var(--liq-unit));
    padding-block: calc(12 * var(--liq-unit));
  }
}
@media (hover: hover) and (pointer: fine) {
  .un_account.__renew .un_account_entryDetailBtn:hover {
    opacity: 0.7;
  }
}
@media (hover: none) and (pointer: coarse) {
  .un_account.__renew .un_account_entryDetailBtn:active {
    opacity: 0.7;
  }
}
@media (prefers-reduced-motion: reduce) {
  .un_account.__renew .un_account_entryDetailBtn {
    -webkit-transition: none;
    transition: none;
  }
}
.un_account.__renew .un_account_entryDetailInput:focus-visible + .un_account_entryDetailBtn {
  outline: calc(2 * var(--liq-unit)) solid var(--color-ui-focus-outline);
  outline-offset: calc(4 * var(--liq-unit));
}
.un_account.__renew .un_account_entryDetailIcon {
  position: relative;
  display: block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: calc(24 * var(--liq-unit));
  aspect-ratio: 1;
}
@media screen and (width < 960px) {
  .un_account.__renew .un_account_entryDetailIcon {
    width: calc(16 * var(--liq-unit));
  }
}
.un_account.__renew .un_account_entryDetailIcon::before, .un_account.__renew .un_account_entryDetailIcon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: calc(5 * var(--liq-unit));
  background-color: currentColor;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
@media screen and (width < 960px) {
  .un_account.__renew .un_account_entryDetailIcon::before, .un_account.__renew .un_account_entryDetailIcon::after {
    height: calc(3 * var(--liq-unit));
  }
}
@media (prefers-reduced-motion: reduce) {
  .un_account.__renew .un_account_entryDetailIcon::before, .un_account.__renew .un_account_entryDetailIcon::after {
    -webkit-transition: none;
    transition: none;
  }
}
.un_account.__renew .un_account_entryDetailIcon::after {
  -webkit-transform: translateY(-50%) rotate(90deg);
          transform: translateY(-50%) rotate(90deg);
}
.un_account.__renew .un_account_entryDetailInput:checked + .un_account_entryDetailBtn .un_account_entryDetailIcon::after {
  -webkit-transform: translateY(-50%) rotate(0deg);
          transform: translateY(-50%) rotate(0deg);
}
.un_account.__renew .un_account_entryDetailContents {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 0fr;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: grid-template-rows 0.5s ease, opacity 0.5s ease, visibility 0s linear 0.5s;
  transition: grid-template-rows 0.5s ease, opacity 0.5s ease, visibility 0s linear 0.5s;
  transition: grid-template-rows 0.5s ease, opacity 0.5s ease, visibility 0s linear 0.5s, -ms-grid-rows 0.5s ease;
}
@media (prefers-reduced-motion: reduce) {
  .un_account.__renew .un_account_entryDetailContents {
    -webkit-transition: none;
    transition: none;
  }
}
.un_account.__renew .un_account_entryDetailInput:checked ~ .un_account_entryDetailContents {
  -ms-grid-rows: 1fr;
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  -webkit-transition: grid-template-rows 0.5s ease, opacity 0.5s ease, visibility 0s linear 0s;
  transition: grid-template-rows 0.5s ease, opacity 0.5s ease, visibility 0s linear 0s;
  transition: grid-template-rows 0.5s ease, opacity 0.5s ease, visibility 0s linear 0s, -ms-grid-rows 0.5s ease;
}
@media (prefers-reduced-motion: reduce) {
  .un_account.__renew .un_account_entryDetailInput:checked ~ .un_account_entryDetailContents {
    -webkit-transition: none;
    transition: none;
  }
}
.un_account.__renew .un_account_entryDetailInner {
  min-height: 0;
  overflow: hidden;
}
.un_account.__renew .un_account_entryDetailImg {
  width: calc(760 * var(--liq-unit));
  max-width: 100%;
  margin-inline: calc(37 * var(--liq-unit)) auto;
  padding-top: calc(20 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_account.__renew .un_account_entryDetailImg {
    width: 100%;
    margin-inline: 0;
    padding-top: calc(38 * var(--liq-unit));
  }
}
.un_account.__renew .un_account_entryDetailImg picture,
.un_account.__renew .un_account_entryDetailImg img {
  display: block;
  width: 100%;
  height: auto;
}
.un_account.__renew .un_account_examples {
  position: relative;
  z-index: 1;
  max-width: calc(1440 * var(--liq-unit));
  margin-inline: auto;
  padding-block: calc(40 * var(--liq-unit)) calc(80 * var(--liq-unit));
  padding-inline: calc(80 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_account.__renew .un_account_examples {
    padding-block: calc(24 * var(--liq-unit)) calc(48 * var(--liq-unit));
    padding-inline: calc(20 * var(--liq-unit));
  }
}
.un_account.__renew .un_account_examplesTitle {
  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, 32 * var(--liq-unit));
  line-height: 1.8;
  position: relative;
  z-index: 1;
  margin-block: 0;
  margin-inline: auto;
  padding-inline: calc(24 * var(--liq-unit));
  color: var(--color-text-body);
  background-color: var(--color-background-canvas);
  border-radius: calc(11 * var(--liq-unit));
  text-align: center;
  padding-block: calc(6 * var(--liq-unit));
  max-width: calc(1071 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_account.__renew .un_account_examplesTitle {
    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, 22 * var(--liq-unit));
    line-height: 1.8;
  }
}
.un_account.__renew .un_account_examplesList {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: calc(8 * var(--liq-unit));
  margin: calc(40 * var(--liq-unit)) 0 0;
  padding: 0;
  list-style: none;
}
@media screen and (width < 960px) {
  .un_account.__renew .un_account_examplesList {
    -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(16 * var(--liq-unit));
    margin-top: calc(32 * var(--liq-unit));
  }
}
.un_account.__renew .un_account_examplesItem {
  position: relative;
  width: calc(371 * var(--liq-unit));
}
.un_account.__renew .un_account_examplesItem:nth-child(2) {
  z-index: 2;
}
.un_account.__renew .un_account_examplesItem:nth-child(3) {
  z-index: 3;
}
@media screen and (width < 960px) {
  .un_account.__renew .un_account_examplesItem {
    width: min(100%, 320 * var(--liq-unit));
    z-index: auto;
  }
}
.un_account.__renew .un_account_examplesHead {
  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;
  margin-bottom: calc(16 * var(--liq-unit));
  text-align: center;
}
.un_account.__renew .un_account_examplesCategory {
  width: auto;
}
.un_account.__renew .un_account_examplesCategory picture,
.un_account.__renew .un_account_examplesCategory img {
  display: block;
  width: auto;
  height: calc(58 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_account.__renew .un_account_examplesCategory picture,
  .un_account.__renew .un_account_examplesCategory img {
    height: calc(52 * var(--liq-unit));
  }
}
.un_account.__renew .un_account_examplesLabel {
  margin: 0;
  width: auto;
  max-width: 100%;
}
.un_account.__renew .un_account_examplesLabel picture,
.un_account.__renew .un_account_examplesLabel img {
  display: block;
  width: auto;
  height: calc(25 * var(--liq-unit));
  max-width: 100%;
}
.un_account.__renew .un_account_examplesCard {
  position: relative;
  min-height: calc(342 * var(--liq-unit));
}
.un_account.__renew .un_account_examplesBubble {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.un_account.__renew .un_account_examplesBubble picture,
.un_account.__renew .un_account_examplesBubble img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 371/342;
}
.un_account.__renew .un_account_examplesText {
  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.99375;
  position: relative;
  z-index: 1;
  margin: 0;
  padding: calc(94 * var(--liq-unit)) calc(48 * var(--liq-unit)) calc(100 * var(--liq-unit)) calc(64 * var(--liq-unit));
  color: var(--color-text-body);
}
@media screen and (width < 960px) {
  .un_account.__renew .un_account_examplesText {
    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, 14 * var(--liq-unit));
    line-height: 2;
    padding: calc(82 * var(--liq-unit)) calc(45 * var(--liq-unit)) calc(88 * var(--liq-unit)) calc(45 * var(--liq-unit));
  }
}
.un_account.__renew .un_account_examplesChara {
  position: absolute;
  bottom: calc(-100 * var(--liq-unit));
  left: calc(-18 * var(--liq-unit));
  z-index: 2;
  width: calc(104 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_account.__renew .un_account_examplesChara {
    bottom: 0;
  }
}
.un_account.__renew .un_account_examplesChara picture,
.un_account.__renew .un_account_examplesChara img {
  display: block;
  width: 100%;
  height: auto;
  /*aspect-ratio: 104 / 118;*/
}
@media screen and (width < 960px) {
  .un_account.__renew .un_account_examplesChara {
    width: calc(90 * var(--liq-unit));
    bottom: calc(-30 * var(--liq-unit));
    left: calc(-18 * var(--liq-unit));
  }
}
.un_account.__renew .un_account_campaign {
  position: relative;
  z-index: 1;
  max-width: calc(1440 * var(--liq-unit));
  margin-inline: auto;
  padding-block: calc(96 * var(--liq-unit)) calc(80 * var(--liq-unit));
  padding-inline: calc(80 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_account.__renew .un_account_campaign {
    padding-block: calc(48 * var(--liq-unit)) calc(48 * var(--liq-unit));
    padding-inline: calc(20 * var(--liq-unit));
  }
}
.un_account.__renew .un_account_campaignHead {
  position: relative;
  z-index: 1;
  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;
  text-align: center;
}
.un_account.__renew .un_account_campaignLabel {
  width: calc(159 * var(--liq-unit));
}
.un_account.__renew .un_account_campaignLabel picture,
.un_account.__renew .un_account_campaignLabel img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (width < 960px) {
  .un_account.__renew .un_account_campaignLabel {
    width: calc(128 * var(--liq-unit));
  }
}
.un_account.__renew .un_account_campaignTitle {
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.un_account.__renew .un_account_campaignTitle picture,
.un_account.__renew .un_account_campaignTitle img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (width < 960px) {
  .un_account.__renew .un_account_campaignTitle {
    width: calc(282 * var(--liq-unit));
  }
}
.un_account.__renew .un_account_campaignLead {
  position: relative;
  z-index: 1;
  width: calc(1027 * var(--liq-unit));
  max-width: 100%;
  margin-block: calc(40 * var(--liq-unit)) 0;
  margin-inline: auto;
}
.un_account.__renew .un_account_campaignLead picture,
.un_account.__renew .un_account_campaignLead img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (width < 960px) {
  .un_account.__renew .un_account_campaignLead {
    margin-block: calc(24 * var(--liq-unit)) 0;
  }
}
.un_account.__renew .un_account_campaignPrizes {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: calc(86 * var(--liq-unit));
  margin: calc(80 * var(--liq-unit)) 0 0;
  padding: 0;
  list-style: none;
}
@media screen and (width < 960px) {
  .un_account.__renew .un_account_campaignPrizes {
    -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));
    margin-top: calc(48 * var(--liq-unit));
  }
}
.un_account.__renew .un_account_campaignPrize {
  width: calc(481 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_account.__renew .un_account_campaignPrize {
    width: min(100%, 340 * var(--liq-unit));
  }
}
.un_account.__renew .un_account_campaignPrize:first-of-type .un_account_campaignPrizeBody img {
  width: calc(381 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_account.__renew .un_account_campaignPrize:first-of-type .un_account_campaignPrizeBody img {
    width: 100%;
  }
}
.un_account.__renew .un_account_campaignPrize:last-of-type .un_account_campaignPrizeBody img {
  width: calc(377 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_account.__renew .un_account_campaignPrize:last-of-type .un_account_campaignPrizeBody img {
    width: 100%;
  }
}
.un_account.__renew .un_account_campaignPrizeMedia {
  width: 100%;
  aspect-ratio: 481/291;
  overflow: hidden;
  background-color: var(--color-background-neutral-02);
}
.un_account.__renew .un_account_campaignPrizeMedia picture,
.un_account.__renew .un_account_campaignPrizeMedia img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.un_account.__renew .un_account_campaignPrizeBody {
  margin-top: calc(16 * var(--liq-unit));
  text-align: center;
}
.un_account.__renew .un_account_campaignPrizeBody picture,
.un_account.__renew .un_account_campaignPrizeBody img {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
}
.un_account.__renew .un_account_campaignNote {
  position: relative;
  z-index: 1;
  width: calc(1040 * var(--liq-unit));
  max-width: 100%;
  margin-block: calc(40 * var(--liq-unit)) 0;
  margin-inline: auto;
}
.un_account.__renew .un_account_campaignNoteHead, .un_account.__renew .un_account_campaignNoteText {
  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.8;
  margin: 0;
  color: var(--color-text-body);
  text-align: left;
}

/* howGroup
----------------------------------------------------------------- */
.section_howGroup {
  overflow: hidden;
  position: relative;
  background-color: var(--color-background-brand);
}
.section_howGroup::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../../assets/images/compression/top_howBg.png);
}
@supports (background-image: url(../../assets/images/webp/top_howBg.webp)) {
  .section_howGroup::before {
    background-image: url(../../assets/images/webp/top_howBg.webp);
  }
}
@supports (background-image: url(../../assets/images/avif/top_howBg.avif)) {
  .section_howGroup::before {
    background-image: url(../../assets/images/avif/top_howBg.avif);
  }
}
.section_howGroup::before {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: 0;
}
@media screen and (width < 960px) {
  .section_howGroup::before {
    background-image: url(../../assets/images/compression/top_howBg-2_sp.png);
  }
  @supports (background-image: url(../../assets/images/webp/top_howBg-2_sp.webp)) {
    .section_howGroup::before {
      background-image: url(../../assets/images/webp/top_howBg-2_sp.webp);
    }
  }
  @supports (background-image: url(../../assets/images/avif/top_howBg-2_sp.avif)) {
    .section_howGroup::before {
      background-image: url(../../assets/images/avif/top_howBg-2_sp.avif);
    }
  }
  .section_howGroup::before {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
  }
}

.un_howGroup_flow {
  position: relative;
  z-index: 1;
}
.un_howGroup_flowInner {
  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));
  max-width: calc(1440 * var(--liq-unit));
  margin-inline: auto;
  padding-block: calc(96 * var(--liq-unit));
  padding-inline: calc(80 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_howGroup_flowInner {
    max-width: none;
    padding-block: calc(80 * var(--liq-unit));
    padding-inline: calc(20 * var(--liq-unit));
  }
}
.un_howGroup_flowIntro {
  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(16 * var(--liq-unit));
  width: 100%;
}
.un_howGroup_flowTitle {
  width: 100%;
  margin: 0;
}
.un_howGroup_flowTitleImg {
  width: 100%;
}
.un_howGroup_flowTitleImg picture,
.un_howGroup_flowTitleImg img {
  display: block;
  width: 100%;
  height: auto;
}
.un_howGroup_flowText {
  margin: 0;
  padding-top: calc(5 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_howGroup_flowText {
    padding-top: 0;
  }
}
.un_howGroup_flowText picture,
.un_howGroup_flowText img {
  display: block;
  width: calc(548 * var(--liq-unit));
  max-width: 100%;
  aspect-ratio: 548/101;
  margin-inline: auto;
}
@media screen and (width < 960px) {
  .un_howGroup_flowText picture,
  .un_howGroup_flowText img {
    width: calc(314 * var(--liq-unit));
    aspect-ratio: 314/169;
  }
}
.un_howGroup_flowList {
  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(8 * var(--liq-unit));
  width: 100%;
  max-width: calc(1080 * var(--liq-unit));
  margin: 0;
  padding: 0;
  list-style: none;
}
@media screen and (width < 960px) {
  .un_howGroup_flowList {
    gap: calc(16 * var(--liq-unit));
    max-width: none;
  }
}
.un_howGroup_flowItem {
  position: relative;
  width: 100%;
  padding-top: calc(57 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_howGroup_flowItem:nth-of-type(n + 2) .un_howGroup_flowImg {
    width: calc(295 * var(--liq-unit));
  }
}
.un_howGroup_flowItem:nth-child(2) {
  -webkit-transition-delay: 0.12s;
          transition-delay: 0.12s;
}
.un_howGroup_flowItem:nth-child(3) {
  -webkit-transition-delay: 0.24s;
          transition-delay: 0.24s;
}
.un_howGroup_flowItem:nth-child(4) {
  -webkit-transition-delay: 0.36s;
          transition-delay: 0.36s;
}
.un_howGroup_flowNumber {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: calc(97 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_howGroup_flowNumber {
    width: calc(111 * var(--liq-unit));
  }
}
.un_howGroup_flowNumber picture,
.un_howGroup_flowNumber img {
  display: block;
  width: 100%;
  height: auto;
}
.un_howGroup_flowCard {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: calc(40 * var(--liq-unit));
  width: 100%;
  padding: calc(32 * var(--liq-unit)) calc(40 * var(--liq-unit));
  background-color: var(--color-background-canvas);
  border: calc(3 * var(--liq-unit)) solid var(--color-border-default);
  border-radius: calc(24 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_howGroup_flowCard {
    -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(16 * var(--liq-unit));
    padding: calc(24 * var(--liq-unit));
  }
}
.un_howGroup_flowImg {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: calc(260 * var(--liq-unit));
}
.un_howGroup_flowImg picture,
.un_howGroup_flowImg img {
  display: block;
  width: 100%;
  height: auto;
}
.un_howGroup_flowImg img {
  aspect-ratio: 260/173;
  -o-object-fit: cover;
     object-fit: cover;
}
.un_howGroup_flowBody {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: calc(12 * var(--liq-unit));
  min-width: 0;
}
@media screen and (width < 960px) {
  .un_howGroup_flowBody {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
  }
}
.un_howGroup_flowHead {
  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(8 * var(--liq-unit));
  width: 100%;
}
@media screen and (width < 960px) {
  .un_howGroup_flowHead {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: calc(12 * var(--liq-unit));
  }
}
.un_howGroup_flowDate {
  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-accent);
}
@media screen and (width < 960px) {
  .un_howGroup_flowDate {
    text-align: center;
  }
}
.un_howGroup_flowLabel {
  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;
  margin: 0;
  color: var(--color-text-body);
}
@media screen and (width < 960px) {
  .un_howGroup_flowLabel {
    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.2;
    text-align: center;
  }
}
.un_howGroup_flowDesc {
  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.8;
  margin: 0;
  color: var(--color-text-body);
}
.un_howGroup_special {
  position: relative;
  z-index: 1;
}
.un_howGroup_specialInner {
  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(19 * var(--liq-unit));
  max-width: calc(1440 * var(--liq-unit));
  margin-inline: auto;
  padding-block: 0;
  padding-inline: calc(80 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_howGroup_specialInner {
    gap: calc(16 * var(--liq-unit));
    max-width: none;
    padding-inline: calc(20 * var(--liq-unit));
  }
}
.un_howGroup_specialTitle {
  width: calc(1070 * var(--liq-unit));
  max-width: 100%;
  margin: 0;
}
@media screen and (width < 960px) {
  .un_howGroup_specialTitle {
    width: calc(350 * var(--liq-unit));
  }
}
.un_howGroup_specialTitle picture,
.un_howGroup_specialTitle img {
  display: block;
  width: 100%;
  height: auto;
}
.un_howGroup_specialBody {
  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(30 * var(--liq-unit));
  width: 100%;
}
@media screen and (width < 960px) {
  .un_howGroup_specialBody {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: calc(26 * var(--liq-unit));
  }
}
.un_howGroup_specialFig {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: calc(354 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_howGroup_specialFig {
    width: calc(198 * var(--liq-unit));
  }
}
.un_howGroup_specialFig picture,
.un_howGroup_specialFig img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 354/380;
}
.un_howGroup_specialContent {
  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;
  gap: calc(43 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_howGroup_specialContent {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: calc(30 * var(--liq-unit));
    width: 100%;
  }
}
.un_howGroup_specialText {
  margin: 0;
}
.un_howGroup_specialText picture,
.un_howGroup_specialText img {
  display: block;
  width: calc(533 * var(--liq-unit));
  max-width: 100%;
  height: auto;
  aspect-ratio: 533/122;
}
@media screen and (width < 960px) {
  .un_howGroup_specialText picture,
  .un_howGroup_specialText img {
    width: calc(330 * var(--liq-unit));
    aspect-ratio: 737/416;
    margin-inline: auto;
  }
}
.un_howGroup_specialBtns {
  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(28 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_howGroup_specialBtns {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: calc(24 * var(--liq-unit));
    width: 100%;
  }
}
.un_howGroup_specialBtn.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: calc(544 * var(--liq-unit));
  height: calc(65 * var(--liq-unit));
  padding-block: 0;
}
@media screen and (width < 960px) {
  .un_howGroup_specialBtn.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, 17 * var(--liq-unit));
    line-height: 1.2;
    gap: calc(14 * var(--liq-unit));
    width: 100%;
    max-width: calc(350 * var(--liq-unit));
    height: calc(75 * var(--liq-unit));
  }
}
.un_howGroup_ambassador {
  position: relative;
  z-index: 1;
}
@media screen and (width < 960px) {
  .un_howGroup_ambassador {
    padding-block: calc(75 * var(--liq-unit)) calc(30 * var(--liq-unit));
  }
}
.un_howGroup_ambassadorInner {
  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));
  max-width: calc(1230 * var(--liq-unit));
  margin-inline: auto;
  padding-block: calc(96 * var(--liq-unit));
  padding-inline: calc(80 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_howGroup_ambassadorInner {
    gap: calc(40 * var(--liq-unit));
    max-width: none;
    padding-block: calc(80 * var(--liq-unit)) calc(97 * var(--liq-unit));
    padding-inline: calc(20 * var(--liq-unit));
  }
}
.un_howGroup_ambassadorIntro {
  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(16 * var(--liq-unit));
  width: 100%;
}
.un_howGroup_ambassadorTitle {
  width: 100%;
  margin: 0;
}
.un_howGroup_ambassadorTitleImg {
  width: 100%;
}
.un_howGroup_ambassadorTitleImg picture,
.un_howGroup_ambassadorTitleImg img {
  display: block;
  width: 100%;
  height: auto;
}
.un_howGroup_ambassadorText {
  margin: 0;
  padding-top: calc(12 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_howGroup_ambassadorText {
    padding-top: 0;
  }
}
.un_howGroup_ambassadorText picture,
.un_howGroup_ambassadorText img {
  display: block;
  width: calc(616 * var(--liq-unit));
  max-width: 100%;
  aspect-ratio: 616/65;
  margin-inline: auto;
}
@media screen and (width < 960px) {
  .un_howGroup_ambassadorText picture,
  .un_howGroup_ambassadorText img {
    width: calc(296 * var(--liq-unit));
    aspect-ratio: 296/110;
  }
}
.un_howGroup_ambassadorList {
  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;
  gap: calc(56 * var(--liq-unit)) calc(40 * var(--liq-unit));
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media screen and (width < 960px) {
  .un_howGroup_ambassadorList {
    gap: calc(18 * var(--liq-unit)) calc(18 * var(--liq-unit));
  }
}
.un_howGroup_ambassadorItem {
  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;
  width: calc(330 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_howGroup_ambassadorItem {
    width: calc((100% - calc(18 * var(--liq-unit))) / 2);
  }
}
.un_howGroup_ambassadorHead {
  position: relative;
  z-index: 1;
  width: calc(231 * var(--liq-unit));
  margin-bottom: calc(-48 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_howGroup_ambassadorHead {
    width: calc(150 * var(--liq-unit));
    margin-bottom: calc(-31 * var(--liq-unit));
  }
}
.un_howGroup_ambassadorBubble {
  width: 100%;
}
.un_howGroup_ambassadorBubble img {
  display: block;
  width: 100%;
  height: auto;
}
.un_howGroup_ambassadorMeta {
  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(4 * var(--liq-unit));
  position: absolute;
  top: calc(30 * var(--liq-unit));
  left: 50%;
  z-index: 1;
  width: 100%;
  text-align: center;
  -webkit-transform: translateX(-50%) rotate(-5.95deg);
          transform: translateX(-50%) rotate(-5.95deg);
}
@media screen and (width < 960px) {
  .un_howGroup_ambassadorMeta {
    gap: calc(2 * var(--liq-unit));
    top: calc(14 * var(--liq-unit));
  }
}
.un_howGroup_ambassadorRole {
  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.4;
  margin: 0;
  color: var(--color-text-accent);
  white-space: nowrap;
  -webkit-text-stroke: calc(8 * var(--liq-unit)) var(--color-border-white);
  paint-order: stroke fill;
}
@media screen and (width < 960px) {
  .un_howGroup_ambassadorRole {
    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.4;
    -webkit-text-stroke: calc(6 * var(--liq-unit)) var(--color-border-white);
    min-height: 30px;
  }
}
.un_howGroup_ambassadorName {
  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, 24 * var(--liq-unit));
  line-height: 1.4;
  margin: 0;
  color: var(--color-text-body);
  white-space: nowrap;
  -webkit-text-stroke: calc(8 * var(--liq-unit)) var(--color-border-white);
  paint-order: stroke fill;
}
@media screen and (width < 960px) {
  .un_howGroup_ambassadorName {
    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, 18 * var(--liq-unit));
    line-height: 1.4;
    -webkit-text-stroke: calc(6 * var(--liq-unit)) var(--color-border-white);
  }
}
.un_howGroup_ambassadorBody {
  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(16 * var(--liq-unit));
  width: 100%;
}
@media screen and (width < 960px) {
  .un_howGroup_ambassadorBody {
    gap: calc(8 * var(--liq-unit));
  }
}
.un_howGroup_ambassadorFig {
  width: 100%;
  padding-inline: 1.36%;
  position: relative;
  z-index: 1;
}
@media screen and (width < 960px) {
  .un_howGroup_ambassadorFig {
    padding-inline: 2.73%;
  }
}
.un_howGroup_ambassadorFig picture {
  display: block;
  width: 100%;
}
.un_howGroup_ambassadorFig img {
  display: block;
  width: 100%;
  height: auto;
}
.un_howGroup_ambassadorLink {
  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;
  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(8 * var(--liq-unit));
  padding-block: calc(8 * var(--liq-unit));
  padding-inline: calc(16 * var(--liq-unit));
  color: var(--color-text-brand-blue);
  background-color: var(--color-background-canvas);
  border: calc(1 * var(--liq-unit)) solid var(--color-border-brand-blue);
  border-radius: calc(27 * var(--liq-unit));
  text-decoration: none;
  -webkit-transition: color 0.3s, background-color 0.3s, border-color 0.3s;
  transition: color 0.3s, background-color 0.3s, border-color 0.3s;
}
@media screen and (width < 960px) {
  .un_howGroup_ambassadorLink {
    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, 11 * var(--liq-unit));
    line-height: 1.4;
    gap: calc(4 * var(--liq-unit));
    padding-block: calc(6 * var(--liq-unit));
    padding-inline: calc(16 * var(--liq-unit));
  }
}
@media (hover: hover) and (pointer: fine) {
  .un_howGroup_ambassadorLink:hover {
    color: var(--color-text-inverse);
    background-color: var(--color-background-brand);
    border-color: var(--color-border-white);
  }
  .un_howGroup_ambassadorLink:hover img {
    -webkit-filter: brightness(0) invert(1);
            filter: brightness(0) invert(1);
  }
}
@media (hover: none) and (pointer: coarse) {
  .un_howGroup_ambassadorLink:active {
    opacity: 0.7;
  }
}
@media (prefers-reduced-motion: reduce) {
  .un_howGroup_ambassadorLink {
    -webkit-transition: none;
    transition: none;
  }
}
.un_howGroup_ambassadorLinkIcon {
  display: block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: calc(20 * var(--liq-unit));
  aspect-ratio: 1;
}
@media screen and (width < 960px) {
  .un_howGroup_ambassadorLinkIcon {
    width: calc(14 * var(--liq-unit));
  }
}
.un_howGroup_ambassadorLinkIcon 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) {
  .un_howGroup_ambassadorLinkIcon img {
    -webkit-transition: none;
    transition: none;
  }
}

/* sns
----------------------------------------------------------------- */
.section_sns {
  background-image: url(../../assets/images/compression/top_snsBg.png);
}
@supports (background-image: url(../../assets/images/webp/top_snsBg.webp)) {
  .section_sns {
    background-image: url(../../assets/images/webp/top_snsBg.webp);
  }
}
@supports (background-image: url(../../assets/images/avif/top_snsBg.avif)) {
  .section_sns {
    background-image: url(../../assets/images/avif/top_snsBg.avif);
  }
}
.section_sns {
  background-size: 100% auto;
  background-position: center bottom;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative;
}
.section_sns::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1728/829;
  background-image: url(../../assets/images/compression/top_snsBg.png);
}
@supports (background-image: url(../../assets/images/webp/top_snsBg.webp)) {
  .section_sns::before {
    background-image: url(../../assets/images/webp/top_snsBg.webp);
  }
}
@supports (background-image: url(../../assets/images/avif/top_snsBg.avif)) {
  .section_sns::before {
    background-image: url(../../assets/images/avif/top_snsBg.avif);
  }
}
.section_sns::before {
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  pointer-events: none;
}
@media screen and (width < 960px) {
  .section_sns {
    background-image: url(../../assets/images/compression/top_snsBg_sp.png);
  }
  @supports (background-image: url(../../assets/images/webp/top_snsBg_sp.webp)) {
    .section_sns {
      background-image: url(../../assets/images/webp/top_snsBg_sp.webp);
    }
  }
  @supports (background-image: url(../../assets/images/avif/top_snsBg_sp.avif)) {
    .section_sns {
      background-image: url(../../assets/images/avif/top_snsBg_sp.avif);
    }
  }
  .section_sns {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    overflow: visible;
  }
  .section_sns::before {
    content: none;
  }
}

.un_sns {
  position: relative;
  z-index: 1;
}
@media screen and (width < 960px) {
  .un_sns {
    padding-bottom: calc(241 * var(--liq-unit));
  }
}
.un_sns_character {
  position: absolute;
  top: calc(-110 * var(--liq-unit));
  left: calc(-7 * var(--liq-unit));
  z-index: 1;
  width: calc(147 * var(--liq-unit));
  pointer-events: none;
}
.un_sns_characterImg {
  width: 100%;
  aspect-ratio: 147/162;
}
.un_sns_characterImg picture,
.un_sns_characterImg img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.un_sns_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(40 * var(--liq-unit));
  max-width: calc(1440 * var(--liq-unit));
  margin-inline: auto;
  padding-block: calc(96 * var(--liq-unit));
  padding-inline: calc(80 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_sns_inner {
    max-width: none;
    padding-block: calc(56 * var(--liq-unit));
    padding-inline: calc(20 * var(--liq-unit));
  }
}
.un_sns_title {
  width: 100%;
  margin: 0;
}
@media screen and (width < 960px) {
  .un_sns_title {
    width: calc(339 * var(--liq-unit));
  }
}
.un_sns_titleImg {
  width: 100%;
}
.un_sns_titleImg picture,
.un_sns_titleImg img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (width < 960px) {
  .un_sns_titleImg picture,
  .un_sns_titleImg img {
    aspect-ratio: 339/126;
  }
}
.un_sns_text {
  margin: 0;
}
.un_sns_text picture,
.un_sns_text img {
  display: block;
  width: calc(532 * var(--liq-unit));
  max-width: 100%;
  aspect-ratio: 532/121;
  margin-inline: auto;
}
@media screen and (width < 960px) {
  .un_sns_text picture,
  .un_sns_text img {
    width: calc(289 * var(--liq-unit));
    aspect-ratio: 289/157;
  }
}
.un_sns_end {
  width: calc(852 * var(--liq-unit));
  max-width: 100%;
  margin-inline: auto;
}
.un_sns_end picture,
.un_sns_end img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (width < 960px) {
  .un_sns_end {
    width: calc(335 * var(--liq-unit));
    margin-top: -6px;
  }
}
.un_sns_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) {
  .un_sns_btns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: calc(24 * var(--liq-unit));
  }
}

/* contact
----------------------------------------------------------------- */
.section_contact {
  position: relative;
  z-index: 1;
}
.section_contact::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../../assets/images/compression/top_contactBg.png);
}
@supports (background-image: url(../../assets/images/webp/top_contactBg.webp)) {
  .section_contact::before {
    background-image: url(../../assets/images/webp/top_contactBg.webp);
  }
}
@supports (background-image: url(../../assets/images/avif/top_contactBg.avif)) {
  .section_contact::before {
    background-image: url(../../assets/images/avif/top_contactBg.avif);
  }
}
.section_contact::before {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: -1;
}
@media screen and (width < 960px) {
  .section_contact::before {
    background-image: url(../../assets/images/compression/top_contactBg_sp.png);
  }
  @supports (background-image: url(../../assets/images/webp/top_contactBg_sp.webp)) {
    .section_contact::before {
      background-image: url(../../assets/images/webp/top_contactBg_sp.webp);
    }
  }
  @supports (background-image: url(../../assets/images/avif/top_contactBg_sp.avif)) {
    .section_contact::before {
      background-image: url(../../assets/images/avif/top_contactBg_sp.avif);
    }
  }
  .section_contact::before {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
  }
}

.un_contact {
  position: relative;
  z-index: 1;
}
@media screen and (width < 960px) {
  .un_contact {
    padding-bottom: calc(74 * var(--liq-unit));
  }
}
.un_contact_character {
  position: absolute;
  bottom: calc(-17 * var(--liq-unit));
  left: calc(206 * var(--liq-unit));
  z-index: 1;
  width: calc(269 * var(--liq-unit));
  pointer-events: none;
}
@media screen and (width < 960px) {
  .un_contact_character {
    width: calc(224 * var(--liq-unit));
    bottom: calc(-14 * var(--liq-unit));
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
.un_contact_characterImg {
  width: 100%;
  aspect-ratio: 269/123;
}
.un_contact_characterImg picture,
.un_contact_characterImg img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.un_contact_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(40 * var(--liq-unit));
  margin-inline: auto;
  padding-block: calc(80 * var(--liq-unit));
  padding-inline: calc(0 * var(--liq-unit));
}
@media screen and (width < 960px) {
  .un_contact_inner {
    gap: calc(24 * var(--liq-unit));
    max-width: calc(390 * var(--liq-unit));
    padding-inline: calc(20 * var(--liq-unit));
  }
}
.un_contact_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(16 * var(--liq-unit));
  width: 100%;
  text-align: center;
}
@media screen and (width < 960px) {
  .un_contact_body {
    gap: calc(0 * var(--liq-unit));
  }
}
.un_contact_title {
  width: 100%;
  margin: 0;
}
.un_contact_titleImg {
  width: 100%;
  max-width: calc(498 * var(--liq-unit));
  margin-inline: auto;
}
.un_contact_titleImg picture,
.un_contact_titleImg img {
  display: block;
  width: 100%;
  height: auto;
}
.un_contact_text {
  font-family: "M PLUS 1p", "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: 0;
  margin-top: calc(16 * var(--liq-unit));
  color: var(--color-text-body);
  text-align: center;
}
@media screen and (width < 960px) {
  .un_contact_text {
    font-family: "M PLUS 1p", "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, 18 * var(--liq-unit));
    line-height: 1.8;
  }
}