@charset "UTF-8";
/*
 * 銭湯グルり 暖簾アニメーション
 * CSS 設計：FLOCSS（Foundation / Layout / Object[c- p- u-] + BEM）
 *
 * Foundation 層は2段構成。
 *   1段目：destyle.css v3.0.2（同ディレクトリ・upstream と1バイトも違わない）＝リセット
 *   2段目：このファイルの Foundation セクション          ＝ベーススタイル
 * index.html では destyle → style の順で読み込む。逆にするとリセットが上書き側を潰す。
 * destyle が担う指定（box-sizing / margin 除去 / text-size-adjust / button の中和など）は
 * このファイルに書かない。二重定義は「どちらが効いているか」を読めなくするため。
 * ただし destyle が「ブラウザ既定に戻すべき指定まで消してしまう」箇所は別で、
 * 消えた指定を明示で戻す。該当は 3 箇所
 *   ・h1 の font-weight
 *   ・.c-button の text-align
 *   ・末尾の Vendor override（lil-gui）
 *
 * vendor CSS のライセンス表記は destyle.LICENSE.txt（同ディレクトリ）。
 * 同一ベース名＋サフィックスで対応が取れるので、1本のうちは直下に置く。
 * ※ 2本目の vendor CSS を入れる時点で assets/css/vendor/<name>/ へ揃えること
 *   （js 側の assets/js/vendor/<name>/ と同じ形にする）。
 *
 * 文字サイズは対象年齢層の指定が無いため「汎用」を採用（PC 18px / SP 16px）。
 * 本文 16px・注記 12px の絶対下限は下回らないこと。
 */

/* =========================================================================
   Foundation
   ========================================================================= */

:root {
  --noren-color-bg: #0a1420;
  --noren-color-text: #f2f6fa;
  --noren-color-accent: #c73a18;
  --main-color: #1d415f;
  --main-light-color: #93c4de;
  --accent-color: #c73a18;
  --white-color: #ffffff;
  --gray-color: #cccccc;

  --content-width: 1048px;
  --pc-gutter: 48px;
  --sp-gutter: 48px;

  /*
   * 暗幕（.p-kv__veil）の色。2026-08-31 シンヤさん確定＝黒。
   * 「背景（.l-fv）を暗幕として使う」設計はやめ、背景は白のまま独立に確定した一方、
   * 暗幕は単純な黒の独立レイヤーにする方式へ変更（ご本人の指示：「暗幕の色は黒。
   * 見た目が変わってもよい」）。.l-fv の背景色とは無関係な値なので、二重管理ではない
   * （.l-fv の背景色を変えても、この変数を追随させる必要はない）。
   */
  --noren-kv-veil-color: #000000;

  /* JS（main.js applyCssVars）から上書きされる。ここは JS 未実行時の保険 */
  --noren-canvas-fade-delay: 1200ms;
  --noren-canvas-fade-duration: 800ms;
  --noren-kv-fade-delay: 500ms;
  --noren-kv-fade-duration: 900ms;
  --noren-total-duration: 3000ms;
  /*
   * 待機中の KV の明るさ（0 = 見えない）。config.js timeline.kvIdleOpacity から来る。
   * 0 より大きいと、暖簾の継ぎ目と裾の下に KV が透けて見える。
   */
  --noren-kv-idle-opacity: 0.16;
  --noren-kv-idle-fade-duration: 600ms;
  /* 「暗い→明るい」のカーブ。config.js timeline.kvFadeEasing から来る */
  --noren-kv-fade-easing: cubic-bezier(0.32, 0, 0.67, 0);

  /*
   * 「くぐる」ボタンのマークの回転。config.js button.spinDegPerSec から来る。
   * JS 側は「度/秒」で持ち、CSS には1回転あたりの秒数に直して渡す（360 / 度毎秒）。
   * 停止は duration を 0 にせず play-state: paused で止める
   *   （duration 0 + iteration-count infinite は長さ0の反復を無限に積む形になるため避ける）。
   * ※ config.js の既定値と下の2行は二重管理。片方だけ直さないこと（kvIdleOpacity と同じ扱い）。
   */
  --noren-button-spin-duration: 15s;
  --noren-button-spin-state: running;

  /*
   * 構図（main.js applyCssVars → config.js resolveLayout の結果）。
   * ここは JS 未実行時の保険なので、おおよその見た目になる値を置いてある。
   */
  --noren-top-px: -24px;
  /*
   * 裾の画面下端からの位置＝床の高さ。「くぐる」ボタンはこれを基準に置く。
   * config.js の layout.floorRatioPc（PC 側の値）と合わせてある。SP は 20vh 相当だが、
   * ここは JS 未実行時にしか効かず、その場合は暖簾自体が描かれないので PC 値だけ置く。
   */
  --noren-hem-from-bottom: 6.25vh;
  /* ボタンを裾からどれだけ下へずらすか（ボタンの高さに対する比・負で裾より上へ） */
  --noren-button-overlap: -0.1733;
  /*
   * ボタンの bottom の上限（＝ロゴに被らせないための下押し）。
   * main.js が SP のときだけ実測値（ロゴ下端 - 間隔）を入れる。
   * PC と JS 未実行時はこの 100000px のままで、min() は必ず裾基準の側を選ぶ＝上限なし。
   * （PC の位置はカンプ合わせ込みで確定しているので、構造的に動かないようにしてある）
   */
  --noren-button-logo-limit: 100000px;
  /*
   * ボタンの bottom の下限（画面下端に近づきすぎないための最終ガード）。
   * 変更前から 8px を直書きしていたものを変数に出した。PC と JS 未実行時は 8px のままで、
   * main.js が SP のときだけ 24px を入れる（下押しの結果がホームバー等に寄らないように）。
   * 縦持ちの SP では効かない（いちばん寄るのが 320x480 の 25.1px で、24px に届かない）。
   * 実際に効くのは横持ち（844x390 / 932x430）だけ。
   */
  --noren-button-min-bottom: 8px;
  --noren-stage-width: 100%;
  --noren-stage-height: auto;

  --noren-ease-in-cubic: cubic-bezier(0.32, 0, 0.67, 0);
  --noren-ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --noren-ease-in-out: cubic-bezier(0.45, 0, 0.15, 1);
}

/*
 * ボタンのラベル（「準備中」「くぐる」）専用の書体（Noto Sans JP Black / weight 900）。
 *
 * ■ 自己ホストにした理由
 * この実装は外部へのリクエストが1件も無い（three.js も lil-gui も自己バンドル。HANDOFF §7）。
 * Google Fonts から読むとその方針が崩れ、SRI ルールの発動条件にも触れる。
 * ラベルは「準備中」「くぐる」の6文字だけなので、サブセットなら 2,308 バイトで済む。
 *
 * ■ 中身
 * Google Fonts CSS API v2 の text= サブセット（準／備／中／く／ぐ／る／濁点／空白の8字）をそのまま保存したもの。
 * 改変していない。出所・SHA-256・ライセンス全文は assets/fonts/NotoSansJP.LICENSE.txt。
 * SIL Open Font License 1.1（three.js / lil-gui / destyle と同じく全文同梱で対応）。
 *
 * ■ ファミリ名を "Noto Sans JP" にしていない理由
 * このフェイスは weight 900 の1本しか無い。同名にすると、この family を含む
 * body の font-family 経由で「準・備・中・く・ぐ・る」の6文字だけが本文でも Black で描かれてしまう（「中」は本文でも使う字）
 * （フォントマッチングは weight 400 の要求に対しても、その family 内で最も近い 900 を選ぶ）。
 * 用途をボタン1か所に閉じるため別名にしてある。
 *
 * ■ font-display: swap の理由
 * block（最大3秒 文字が出ない）だと、回線が遅いときにボタンのラベルが空になる。
 * ラベルは押せることを伝える唯一の文字情報なので、代替書体で先に出す側に倒す。
 * 差し替わる瞬間のちらつきは index.html の preload で潰してある。
 */
@font-face {
  font-family: "Noto Sans JP Button";
  src: url("../fonts/noto-sans-jp-black-button.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020, U+304F-3050, U+308B, U+3099, U+4E2D, U+5099, U+6E96;
}

/*
 * box-sizing: border-box / html の -webkit-text-size-adjust / body の margin 除去は
 * destyle.css が担当するため、ここには書かない。
 */
html {
  scroll-behavior: smooth;
}
body {
  color: var(--noren-color-text);
  background-color: #ffffff;
  font-family:
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
    "Yu Gothic Medium", "Yu Gothic", Meiryo, system-ui, sans-serif;
  font-size: 18px;
  /* 汎用モードの規定は 1.5-1.6（knowledge/web-frontend/font-size-rule.md）。上限の 1.6 を採用 */
  line-height: 1.6;
  letter-spacing: 0.04em;
  transition: background-color 0.6s;
  overflow-x: hidden;
}
img {
  width: 100%;
}
.u-visually-hidden {
  visibility: hidden;
}
.__sp-only {
  display: block;
}
@media screen and (min-width: 768px) {
  .__sp-only {
    display: none;
  }
}
/* メニュー */

header {
  display: flex;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
  padding: 16px;
  justify-content: flex-end; /* right より flex-end が標準的です */
  z-index: 99999;
  visibility: visible;
  opacity: 1;
  transition: 1s;
}
@media screen and (min-width: 768px) {
  header {
    padding: 32px 24px;
    justify-content: flex-end; /* right より flex-end が標準的です */
  }
}
body.u-noscroll header {
  /* display: none; */
  visibility: hidden;
  opacity: 0;
}

header #headder-btn-menu {
  display: block;
  width: 64px;
  height: auto;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: 0.6s;
}

/* リンク ホバー */
a.sns-link {
  transition: 0.6s;
}
.menu-list a:hover {
  transform: scale(1.025) translateY(-2px);
}
a.sns-link:hover,
.p-footer-btn-contact:hover,
.p-about-content-btn:hover,
.p-unforgettable-card:hover,
header #headder-btn-menu:hover::before {
  transform: scale(1.025) translateY(-2px);
  filter: drop-shadow(0 4px 4px rgba(77, 77, 77, 0.6));
}

@media screen and (min-width: 768px) {
  header #headder-btn-menu {
    width: 104px;
  }
}

/* open/close 共通の疑似要素スタイル */
header #headder-btn-menu::before {
  content: "";
  display: block; /* 必須：疑似要素にサイズを持たせるため */
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: opacity 0.3s ease; /* ふんわり切り替えたい場合 */
}

/* open時の画像 */
header #headder-btn-menu.open::before {
  background-image: url("../images/header-btn-menu@2x.webp");
  transition: 0.6s;
}

/* close時の画像 */
header #headder-btn-menu.close::before {
  background-image: url("../images/header-btn-close@2x.webp");
  transition: 0.6s;
}
/*
 * --- メニュー本体（円形に広がって開く）---
 * メニューボタン（header #headder-btn-menu）の中心を起点に、円（clip-path: circle）が広がって画面を覆う。
 * 円の起点は、ボタンの中心の位置（SP: 右から48px・上から48px ／ PC: 右から76px・上から84px）。
 * ボタンの大きさ・位置（header の padding）を変えたら、ここの起点も合わせること。
 * 開く：円が 0.9秒で広がる（ゆっくり止まる）＋不透明度 0→1（0.2秒）。閉じる：不透明度が 0.2秒で 0 になる（円の縮小は見えない）。
 * 閉じている間は visibility:hidden（フォーカスもされない）。JS が .is-active の付け外しと inert を切り替える（header-btn.js）。
 */
.sp-menu {
  --sp-menu-origin: calc(100% - 48px) 48px; /* 円の起点（SP） */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #e6f2ff; /* タイル調の背景設定例 */
  /* background-image:
    linear-gradient(#fff 2px, transparent 2px),
    linear-gradient(90deg, #fff 2px, transparent 2px); */
  /* background-size: 40px 40px; */
  background-image: url("../images/sp-nav-menu-bg@2x.webp");
  background-size: cover;
  visibility: hidden;
  opacity: 0;
  clip-path: circle(0 at var(--sp-menu-origin));
  transition:
    clip-path 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.2s linear,
    visibility 0s linear 0.9s; /* 閉じる間は、円の縮小が終わってから非表示にする */
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
}
@media screen and (min-width: 768px) {
  .sp-menu {
    --sp-menu-origin: calc(100% - 76px) 84px; /* 円の起点（PC） */
    background-image: url("../images/pc-nav-menu-bg@2x.webp");
  }
}

/* メニューが開いている時のスタイル */
.sp-menu.is-active {
  visibility: visible;
  opacity: 1;
  clip-path: circle(150% at var(--sp-menu-origin));
  transition:
    clip-path 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.2s linear,
    visibility 0s;
}

/*
 * メニュー内の項目（リンク3つ・外部ボタン・SNS）：開いたとき、下から少し上がりながら、順に弾むように出る。
 * 1つ 0.6秒（行き過ぎて戻る）。開始は 120ms + 順番 × 90ms ずらす。
 * hover の動き（.menu-list a:hover など）と重ならないよう、動かすのはリンクの外側の要素（li・外部ボタンの囲み・SNS の囲み）。
 * 閉じたときは、アニメーションが外れて、すぐ透明に戻る。
 */
.menu-list li:nth-child(1) {
  --menu-item-index: 0;
}
.menu-list li:nth-child(2) {
  --menu-item-index: 1;
}
.menu-list li:nth-child(3) {
  --menu-item-index: 2;
}
.menu-external {
  --menu-item-index: 3;
}
.menu-sns {
  --menu-item-index: 4;
}
.menu-list li,
.menu-external,
.menu-sns {
  opacity: 0;
  transform: translateY(24px);
}
.sp-menu.is-active .menu-list li,
.sp-menu.is-active .menu-external,
.sp-menu.is-active .menu-sns {
  animation: sp-menu-item-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: calc(120ms + var(--menu-item-index) * 90ms);
}
@keyframes sp-menu-item-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 動きを減らす設定のときは、開閉の動き（円・順に出る動き）をなくす。開閉そのものはできる */
@media (prefers-reduced-motion: reduce) {
  .sp-menu,
  .sp-menu.is-active {
    transition: none;
  }
  .menu-list li,
  .menu-external,
  .menu-sns {
    opacity: 1;
    transform: none;
  }
  .sp-menu.is-active .menu-list li,
  .sp-menu.is-active .menu-external,
  .sp-menu.is-active .menu-sns {
    animation: none;
  }
}

/* --- メニュー内部要素 --- */
.menu-content {
  text-align: center;
  width: 80%;
  max-width: 320px;
}
.menu-inner {
  width: 100%;
  max-width: 375px;
  margin-inline: auto;
  padding: 160px 40px 0px;
}
.menu-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  row-gap: 40px;
  margin-bottom: 40px;
}
.menu-list a {
  /* 全プロパティ（transition: 0.6s）にすると、メニューが開く瞬間に継承される visibility も 0.6秒かけて切り替わり、
     開いた直後の focus() が効かない。hover で動かすのは transform だけなので、transform に絞る */
  transition: transform 0.6s;
}
.menu-link {
  display: block;
  width: fit-content;
  height: 24px;
}
.sp-menu .p-about-content-btn {
  margin-inline: unset;
  margin-left: 0;
  margin-right: auto;
}
/* 橙色のアクションボタン */
.btn-external {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #c83c1c;
  color: #fff;
  text-decoration: none;
  padding: 14px 20px;
  border-radius: 30px;
  font-weight: bold;
  margin-bottom: 30px;
}

/* SNSアイコンエリア */
.menu-sns {
  display: flex;
  width: fit-content;

  margin-top: 40px;
  margin-left: 0;
  margin-right: auto;
  /* justify-content: center; */
  gap: 16px;
}

.sns-link {
  display: block;
  width: 64px;
  height: auto;
  aspect-ratio: 64/64;
}
/*  */
.l-container {
  width: min(100% - (var(--sp-gutter)), var(--content-width));
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  /* スクリーンサイズが768px以上の場合に適用 */
  .l-container {
    width: min(100% - (var(--pc-gutter) * 2), var(--content-width));
  }
}
body.u-noscroll {
  /* background-color: var(--noren-color-bg); */
  overflow: hidden;
}
/*
 * 2026-08-31 シンヤさん指示で削除。
 * ここに `#noren::after`（固定・全画面・opacity 0.8 固定・状態クラスと無連動）を
 * 追加で重ねていたが、既存の `.p-kv__veil`（状態連動・GUIスライダ連動が実測済み）と
 * 二重に効いてしまい、①暗幕が2枚重なる ②`.p-kv__veil` の方が奥（背面）になるため
 * 「待機中の背景の明るさ」スライダを振っても手前の `#noren::after` に隠れて画面上変化しない、
 * という不具合になっていた（ツバサ 2026-08-30 実測）。暗幕は `.p-kv__veil` の1枚に統合する。
 */

body.u-noscroll .l-fv {
  position: relative;
  overflow: auto;
}
body.u-noscroll .p-kv {
  position: relative;
  overflow: auto;
}
body.u-noscroll .p-kv__media {
  position: relative;
}

/* destyle は img に vertical-align しか当てないので、この3行は残す */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/*
 * html に font-size を置いていないので 1rem = 16px（body の 18px は rem の基準にならない）。
 * knowledge/web-frontend/font-size-rule.md の H1 規定は PC 40-48px / SP 32-36px・
 * line-height 1.1-1.2 なので、16px 基準で換算した値を直接書く。
 * 44 / 16 = 2.75rem、34 / 16 = 2.125rem。
 *
 * ※ destyle は h1-h6 に font-size: inherit / font-weight: inherit を当てる。
 *   このブロックが destyle より後に読まれることが H1 の 44px / 34px の前提。
 *   読み込み順を入れ替えると H1 が本文サイズまで落ち、上記規定を外れる。
 *   margin: 0 は destyle 側にあるのでここには書かない。
 */

section {
  min-height: 200px;
}

section.l-fv {
  height: auto;
  background-color: #ffffff;
}

h1 {
  font-size: 2.75rem;
  /* destyle が font-weight: inherit を当てるため、ブラウザ既定の bold を明示で戻す */
  font-weight: 700;
  line-height: 1.2;
}

@media (max-width: 959px) {
  body {
    font-size: 16px;
  }

  h1 {
    font-size: 2.125rem;
  }
}

/* =========================================================================
   Layout
   ========================================================================= */

.l-fv {
  /* position: fixed; */
  inset: 0;
  /* overflow: hidden; */
  isolation: isolate;
  height: clamp(1px, calc(981 / 1280 * 100vw), 981px);
}
.l-section {
  display: block;
  position: relative;
  width: 100%;
  margin-top: clamp(1px, calc(80 / 1280 * 100vw), 80px);
  margin-bottom: clamp(1px, calc(200 / 1280 * 100vw), 200px);
}

/*
 * カードスライド（#slide）の表示領域。
 * assets/js/slide.js が .p-cards を複製して画面幅より広くするため、
 * はみ出した分をここでクリップする（クリップしないとページ全体が横に伸びる）。
 */
.l-slide {
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: calc(64 / 375 * 100vw);
}

@media screen and (min-width: 768px) {
  .l-slide {
    padding-top: clamp(1px, calc(80 / 1280 * 100vw), 80px);
  }
}

/* =========================================================================
   Object / Component
   ========================================================================= */

/*
 * border 除去・背景の透明化・font と color の継承・cursor（:disabled 含む）は
 * destyle が button 要素に対して当てるので、ここには書かない。
 * 残しているのは「このコンポーネント固有の並べ方」だけ。
 *
 * text-align: center もその「並べ方」に含まれる。
 * ブラウザ既定の button は中央寄せだが destyle が text-align: inherit で外すため、
 * 明示で戻す。inline-flex の justify-content が効くのは「行ボックスの並び」までで、
 * ラベルが折り返して複数行になった瞬間、行の中の文字揃えは text-align が決める。
 * ※ 実測：この1行が無いと、幅 100px でラベルが2行になった時点で左寄せになる。
 *   現在の文言（「準備中」「くぐる」）が1行に収まっているのは destyle が
 *   padding を外した結果であって、中央寄せが要らなくなったわけではない。
 */
.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/*
 * ラベル。回転するのはマークだけで、この文字は正立したまま動かない。
 *
 * 書体・ウェイト・サイズ・色はシンヤさん指定（Noto Sans JP / weight 900 / 24px / #ffffff）。
 * letter-spacing 0.18em と text-indent は変更前からの継続（末尾の字間ぶん左に寄るのを戻す）。
 *
 * ■ フォールバックの順番と、読めなかったときに何になるか
 *   1. Noto Sans JP Button … 同梱のサブセット（準／備／中／く／ぐ／る）。通常はこれ
 *   2. Noto Sans JP         … 端末に入っている場合のみ（Windows 11 の日本語補助フォント等）
 *   3. Hiragino Sans        … macOS は W9 を持つので 900 が実在する。iOS は W6 止まりで合成太字
 *   4. Yu Gothic / Meiryo   … Bold(700) しか無いため、900 の要求に対しては
 *                             ブラウザが Bold を選び、さらに合成太字が掛かることがある
 *   5. system-ui / sans-serif
 * 3 以降に落ちた場合、字面は Noto より細く見える。日本語のウェイト900 は代替が効きにくいので、
 * 「同じ太さにはならない」ことを前提にしたうえで可読性だけは確保する並びにしてある。
 */
.c-button__label {
  position: relative;
  /* 回転するマーク（position: absolute）より前面に置く */
  z-index: 1;
  font-family:
    "Noto Sans JP Button", "Noto Sans JP", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, system-ui,
    sans-serif;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-indent: 0.18em;
}

/*
 * 「くぐる」ボタンは画面下端ではなく「暖簾の裾」を基準に置く。
 * 床の量を全ビューポートで揃えた（構図の高さ基準フィット）結果、下端固定だと
 * ボタンが暖簾に載る割合がビューポートごとにばらつくため。裾基準なら常に同じ載り方になる。
 * ※ 下端固定に戻すなら bottom を 5vh（SP は 10vh）に書き換えるだけでよい。
 *
 * ■ 寸法（2026-08-27・シンヤさん指定）
 * 素材 btn-open.svg の原寸 157x150 をそのまま使う。正方形ではないため 150x150 に
 * 押し込むと横が 7px 潰れて絵が歪む。「回転で中心がずれないなら 157x150 でよい」という
 * 条件つきの許可なので、下の transform-origin の実測が寸法の根拠そのものになっている。
 * デザインカンプ（design/opan.png・1280x832）のボタンも実測 157x150 で、原寸と一致する。
 *
 * 変更前は 124px（SP 108px）の円だった。直径が 124 → 150（高さ）に増えたぶん、
 * bottom の計算に使う値も直径から「高さ」に変えてある（横 157 ではなく縦 150 が基準）。
 *
 * ■ 位置（2026-08-27・カンプに合わせて変更）
 * カンプではボタンが裾より上の白い布の上に完全に載っている（裾から 26px 上）。
 * config.js の layout.buttonHemOverlapRatio を +0.12 → -0.1733 にしたので、
 * 下の calc は「裾 -（150px x -0.1733）」＝ 裾から 26px 上、になる。
 *
 * ■ SP だけロゴに被らないよう下へ押す（2026-08-28・シンヤさん指摘）
 * bottom は「裾基準の位置」と「ロゴから離す上限」の min() を採る。
 * --noren-button-logo-limit は main.js が SP のときだけ実測値を入れ、
 * PC と JS 未実行時は 100000px なので min() は必ず裾基準の側になる（PC は1pxも動かない）。
 * 間隔が足りている SP でも裾基準の側が選ばれるので、位置が上へ動くことはない。
 * 間隔の値は config.js の layout.buttonLogoMinGapSpPx（既定 32px・GUI で可変）。
 * 外側の max(--noren-button-min-bottom, ...) は押した結果が画面下端に近づきすぎないための
 * 最終ガード。PC は変更前と同じ 8px、SP だけ 24px。
 * 縦持ちのSPでは効かない（いちばん寄る 320x480 で 25.1px。よくある機種は 100px 以上ある）。
 * 実際に効くのは横持ち（844x390 / 932x430）で、
 * そこでは白い布の高さ（ロゴ下端〜裾で92px）よりボタン（150px）のほうが高く、
 * 「ロゴを避ける」と「下端から離す」を両立できない。下端から離すほうを優先している。
 *
 * ■ ボタンは画面サイズによらず 157x150 のまま（＝構図と一緒には拡大縮小しない）
 * 暖簾側は画面高に比例して拡大縮小するため、画面が高いほどボタンは相対的に小さく見える。
 * カンプ基準（150 / 832 = 18.0%）に対し 1920x1080 では 13.9%、1440x900 では 16.7%。
 * 「157x150px」というシンヤさんの寸法指定をそのまま守った結果で、
 * 構図と一緒に拡大したい場合は上の2行を
 *   --c-button-width: 18.8702vh;  --c-button-height: 18.0288vh;
 * に置き換えれば、カンプの縦横比のまま画面高に追従する（未採用・要判断）。
 *
 * ■ 変更前にあった円（border 1px + backdrop-filter blur + 半透明の地）は外した
 * マークそのものがボタンの外形になったため。円を残すと花びらの外に白い輪が出る。
 * これに伴い、WCAG 1.4.11 の対象は「半透明の円 vs 白い布」から
 * 「濃紺の輪郭 #1D415F vs 白い布／濃紺の床」に変わる（実測値は報告に記載）。
 *
 * ■ タップ時のフィードバック（destyle からの申し送りへの対応）
 * destyle の html { -webkit-tap-highlight-color: transparent } でタップ時の既定の
 * ハイライトがページ全体で出ない。グローバルの指定は戻さず、このボタンに :active を定義して補う。
 * :hover は @media (hover: hover) で囲ってある（タッチ端末で hover が貼り付くのを避けるため）。
 */
.c-button--enter {
  position: absolute;
  z-index: 3;
  left: 50%;
  /* 素材の原寸。歪ませないため縦横を別々に持つ */
  --c-button-width: 157px;
  --c-button-height: 150px;
  bottom: max(
    var(--noren-button-min-bottom),
    min(
      calc(
        var(--noren-hem-from-bottom) - var(--c-button-height) *
          var(--noren-button-overlap)
      ),
      calc(var(--noren-button-logo-limit) - var(--c-button-height))
    )
  );
  width: var(--c-button-width);
  height: var(--c-button-height);
  transform: translateX(-50%);
  color: #ffffff;
  opacity: 0;
  transition:
    opacity 600ms var(--noren-ease-out-cubic),
    transform 400ms var(--noren-ease-out-cubic);
}
@media screen and (min-width: 768px) {
  .c-button--enter {
    bottom: 300px;
  }
}
/*
 * 回転するマーク。
 *
 * ■ transform-origin を 50% 50% にしてよい根拠（実測・2026-08-27）
 * btn-open.svg を 8倍／16倍／24倍にラスタライズし、図形を白・背景を黒に置き換えて
 * 「輝度＝被覆率」となる状態で面積重心を測った結果は
 *   8倍 (78.4987, 75.0003) / 16倍 (78.4996, 75.0001) / 24倍 (78.4995, 75.0001)
 * ＝ 157x150 の幾何中心 (78.5, 75.0) と 0.0005 単位まで一致する。
 * したがって 50% 50%（＝78.5px 75px）が重心であり、回転しても重心は動かない。
 * ※ 外形は10枚の花びら（重心からの半径-角度プロファイルの FFT で k=10 が振幅 4.05 単位、
 *   次の成分 k=20 が 0.17 とほぼ1成分だけ）。半径は 70.06〜78.52 の間で波打つので、
 *   外接矩形は回転すると数px 呼吸する。動かないのは重心であって外接矩形ではない。
 * ※ 素材を差し替えたら、この重心の一致は保証されない。必ず測り直すこと。
 *
 * 回転速度は config.js の button.spinDegPerSec（度/秒）から
 * 1回転あたりの秒数に直して --noren-button-spin-duration に入る。
 * 0 にすると --noren-button-spin-state が paused になり、その角度で止まる。
 */
.c-button__mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  animation: c-button-spin var(--noren-button-spin-duration, 15s) linear
    infinite;
  animation-play-state: var(--noren-button-spin-state, running);
  transition: filter 200ms linear;
  will-change: transform;
}

/* 時計回り。CSS の座標系は y 軸が下向きなので、正の rotate がそのまま時計回りになる */
@keyframes c-button-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/*
 * 動きを減らす設定のときは回さない。
 * このページは同設定で導入演出自体をスキップする（main.js boot）ため、
 * ここが効くのは ?replay=1 で強制再生した場合。挙動を揃えるために書いておく。
 */
@media (prefers-reduced-motion: reduce) {
  .c-button__mark {
    animation: none;
  }
}

.c-button--enter:not(:disabled) {
  opacity: 1;
}

.c-button--enter:disabled {
  opacity: 0.55;
}

/*
 * 押せない状態の文言は、もとは「読み込み中」の5文字で、24px のままだと花びらの幅（重心からの半径 70〜78px）に対して
 * 端が布へはみ出した（現在は「準備中」の3文字。18px の指定は変えていない）。指定のあるラベル「くぐる」の 24px は変えず、押せない状態だけ落とす。
 * 18px は本文サイズと同値で、絶対下限（16px）を下回らない。
 */
.c-button--enter:disabled .c-button__label {
  font-size: 18px;
}

/*
 * hover / focus / active は、マークの明るさを下げる方向でしか変えない。
 * 白文字が乗っているので、明るくすると文字とのコントラストが落ちるため
 * （暗くする側は必ずコントラストが上がる＝どの状態でも AA を割らない）。
 */
@media (hover: hover) {
  .c-button--enter:not(:disabled):hover {
    transform: translateX(-50%) scale(1.06);
  }

  .c-button--enter:not(:disabled):hover .c-button__mark {
    filter: brightness(0.94);
  }
}

.c-button--enter:not(:disabled):focus-visible {
  transform: translateX(-50%) scale(1.06);
}

.c-button--enter:not(:disabled):focus-visible .c-button__mark {
  filter: brightness(0.94);
}

/*
 * フォーカスリング。
 * 変更前は白 2px だったが、ボタンが載るのは白い暖簾なので白い輪は見えにくい。
 * 内側に白のにじみ・外側に濃紺の輪を置いた二重の輪にして、
 * 白い布の上でも（濃紺の輪が見える）、濃紺の床の上でも（白のにじみが見える）成立させる。
 * 濃紺 #1D415F は素材の輪郭線と同じ色で、新しい色を持ち込んでいない。
 * border-radius はここでだけ効かせる（outline と box-shadow が角丸に沿う）。
 */
.c-button--enter:focus-visible {
  border-radius: 50%;
  outline: 3px solid #1d415f;
  outline-offset: 4px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92);
}

/* 押下（タップ・クリック）。:hover より後に置いて上書きさせる */
.c-button--enter:not(:disabled):active {
  transform: translateX(-50%) scale(0.97);
  transition: transform 100ms linear;
}

.c-button--enter:not(:disabled):active .c-button__mark {
  filter: brightness(0.86);
}

.c-button--enter.is-hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--noren-ease-in-cubic);
}

/*
 * 演出をとばしたとき（下層ページからの内部遷移など）は、main.js の hardRelease() が
 * ボタンに hidden 属性を付けて隠す。ところが .c-button の display: inline-flex が
 * ブラウザ標準の [hidden] { display: none } に勝ってしまい、「準備中」のボタンが
 * 押せないまま残っていた。属性セレクターを足した分、詳細度が .c-button（0,1,0）より高くなり、
 * メディアクエリに関わらず確実に隠れる。
 */
.c-button--enter[hidden] {
  display: none;
}
.c-kv-obj {
  position: absolute;
}

/* =========================================================================
   Object / Project
   ========================================================================= */

/* ---- 奥のコンテンツ（KV。2026-08-26 受領） ----
 *
 * コピーは画像に焼き込まれているため、この領域にテキスト要素は置かない
 * （＝写真の上に白文字を重ねる構図ではないので、文字コントラストの論点は無い）。
 *
 * 横位置KV（2560x1962）と縦位置KV（802x1408）の出し分けは index.html の picture 側。
 * どちらの素材もビューポートの縦横比に近い比のものが選ばれるため、cover で切れる量が
 * 小さく収まる。以前 SP だけ contain にしていた暫定対応（縦長画面に横位置KVを載せると
 * 画面の6割が暗部として残る問題への対処）は、縦位置KVの受領により不要になった。
 *
 * ■ 状態は3つ（2026-08-26 シンヤさん指示「背景にKVの部分が見えるように変更して」）
 *   .p-kv              デコード前。KVはこの時点から不透明だが、暗幕（.p-kv__veil）が opacity 1 で覆う
 *   .p-kv.is-ready     待機中。暗幕が opacity = 1 − --noren-kv-idle-opacity（薄い黒がKVにかかる）
 *   .p-kv.is-visible   開いたあと。暗幕が opacity 0（透明・KVがそのまま見える）
 *   .p-kv.is-instant   演出スキップ時。暗幕が opacity 0・トランジションなし
 * 後ろの3つは詳細度が同じなので、この記述順がそのまま優先順になる。並べ替えないこと
 *   （.p-kv__veil 側も同じ理由で3つの記述順を揃えてある）。
 *
 * ■ 暗幕（.p-kv__veil）について（2026-08-30 シンヤさん指示で「KVのopacityを下げる」方式から変更）
 * 変更前は .p-kv 自体の opacity を下げて「暗く見せる」構造だった（KVの背面が地色 #0a1420 のため、
 * KVを薄めること自体が「濃紺の暗幕を1枚かける」のと同じ絵になっていた）。
 * ご指示は「上から 暖簾 / 薄い黒（暖簾が開いたら透明） / KV」という重ね順にすること。
 * KV自体を薄める方式をやめ、KVは常に opacity: 1（下記）のまま、KVの上に独立した
 * 暗幕レイヤー（このブロック）を重ね、暗幕側の opacity を 0〜1 で動かす方式にした。
 *
 * 重ね順は z-index ではなく DOM/スタッキングコンテキストで担保している：
 * .p-kv__veil は #kv（.p-kv）の最後の子要素で、.p-kv__media やその中の
 * 各 .c-kv-obj（暗幕を持たない）より後に描画される。
 * 暖簾canvas（.p-noren・z-index: 2）が暗幕（z-index: auto）より前面に来るのは、
 * 両者が .l-fv（isolation: isolate）の作る同一スタッキングコンテキストに属し、
 * 2 > auto(=0) となるため。#kv の z-index: 1 はこの担保には要らない
 *   （.p-kv の position: absolute は現在コメントアウト中で、
 *     z-index: 1 は body.u-noscroll .p-kv { position: relative } が効いている間しか成立しない。
 *     暖簾が開き切ると main.js が u-noscroll を外すため、その時点で無効になる）。
 *
 * ■ 暗幕の色（2026-08-31 シンヤさん確定・改訂）
 * 旧方式はここで「暗幕の色 Bc を、KVの背後に実際に見えている色 B と一致させて
 * 見た目のピクセル等価性（Result が変更前と一致すること）を保つ」ことを条件にしていたが、
 * ご本人の指示「暗幕の色は黒。見た目が変わってもよい」により、この等価性の担保は
 * 撤回されている。したがって Bc=B のような裏付けは不要で、--noren-kv-veil-color
 * （現在は黒）を変えるだけで暗幕の色を変更できる。.l-fv の背景色（白・こちらも確定）とは
 * 独立した値であり、二重管理ではない。
 */

.p-kv {
  /* position: absolute; */
  height: calc(700 / 375 * 100vw);
  z-index: 1;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* overflow: hidden; */
  /*
   * KV自体は常に不透明（2026-08-30 シンヤさん指示）。
   * 「暗く見せる」役割は完全に .p-kv__veil（暗幕）へ移した。ここでは opacity を動かさない。
   */
  opacity: 1;
  background-image: url("../images/sp-fv-bg@2x.webp");
  background-size: cover;
  background-position: center top;
}
@media screen and (min-width: 768px) {
  .p-kv {
    height: clamp(1px, calc(1121 / 1280 * 100vw), 1121px);
    background-size: contain;
    background-image: url("../images/pc-fv-bg@2x.webp");
  }
}

/*
 * 暗幕（KVの上・暖簾canvasの下に重ねる独立レイヤー）。#kv の最後の子として置く。
 * 詳細は直前の「■ 暗幕（.p-kv__veil）について」を参照。
 */
.p-kv__veil {
  position: absolute;
  inset: 0;
  background-color: var(--noren-kv-veil-color);
  /* デコード前（.is-ready も .is-visible も付く前）＝暗幕は完全に不透明でKVを隠す */
  opacity: 1;
  pointer-events: none;
}

/*
 * 待機中。KV のデコードが終わった時点（＝ボタンが押せるようになる瞬間）で main.js が付ける。
 * デコード前から出しておくと、回線が遅いときに暖簾の隙間だけが唐突に光る。
 * kvIdleOpacity（GUI「フェード」→「待機中の背景の明るさ」）が大きいほど暗幕は薄くなる
 * （calc(1 − kvIdleOpacity) なので、旧方式の .p-kv { opacity: kvIdleOpacity } と
 * 見た目の対応関係・スライダの操作感が同じになる）。
 */
.p-kv.is-ready .p-kv__veil {
  opacity: calc(1 - var(--noren-kv-idle-opacity));
  transition: opacity var(--noren-kv-idle-fade-duration) linear;
}

.p-kv.is-visible .p-kv__veil {
  opacity: 0;
  transition: opacity var(--noren-kv-fade-duration) var(--noren-kv-fade-delay)
    var(--noren-kv-fade-easing);
}

.p-kv.is-instant .p-kv__veil {
  opacity: 0;
  transition: none;
}

/*
 * 2026-08-31 シンヤさん指示：KVの子要素（.c-kv-obj・.kv-catch・.kv-obj.tile 等）に
 * z-index が入ると KV が暗幕（.p-kv__veil）より前面に出る問題への対処。
 *
 * isolation: isolate は position の有無に関係なく新しいスタッキングコンテキストを作る。
 * これにより .p-kv__media の中身（.c-kv-obj 一式）がまるごと1個の密閉された単位になり、
 * 中でどれだけ大きい z-index を付けても、.p-kv__media の外（＝兄弟要素の .p-kv__veil）を
 * 追い越せなくなる。.p-kv__veil は .p-kv__media より後の兄弟要素なので、
 * 両者とも z-index:auto のままなら DOM順（veil が最後）で veil が常に上に来る。
 *
 * ※ body.u-noscroll .p-kv { position: relative }（シンヤさんの作業中の記述）には
 *   依存していない。isolation は .p-kv 自身が position を持つかどうかに関係なく効くため、
 *   その行が変更・削除されても本対処の効力は変わらない。
 */
.p-kv__media {
  position: relative;
  isolation: isolate;
  inset: 0;
  width: 100%;
  max-width: 1280px;
  height: calc(700 / 375 * 100vw);
  overflow-x: hidden;
}
@media screen and (min-width: 768px) {
  .p-kv__media {
    /* height: clamp(1px, calc(981 / 1280 * 100vw), 981px); */
    height: clamp(1px, calc(1121 / 1280 * 100vw), 1121px);
    overflow-x: unset;
  }
}
.p-kv__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 2400ms var(--noren-ease-out-cubic);
}

.p-kv.is-visible .p-kv__image {
  transform: scale(1);
}

/* ---- 暖簾 ---- */

.p-noren {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
}

.p-noren__canvas {
  display: block;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 768px) {
  .p-noren__canvas {
    height: 80%;
  }
}

.p-noren.is-opening {
  opacity: 0;
  transition: opacity var(--noren-canvas-fade-duration)
    var(--noren-canvas-fade-delay) var(--noren-ease-in-cubic);
}

.p-noren.is-finished {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.p-noren.is-skipped {
  display: none;
}

/* ---- 暖簾：WebGL 非対応時のフォールバック ---- */

.p-noren__fallback {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* top / width / height と各パネルの flex は fallback.js が resolveLayout() の結果から直接書く */
.p-noren__fallback-stage {
  position: absolute;
  top: var(--noren-top-px);
  left: 50%;
  width: var(--noren-stage-width);
  height: var(--noren-stage-height);
  display: flex;
  /*
   * 素材の地色。パネル幅が小数になるため、隣り合う img の境目に 1px 未満の隙間が生じて
   * 背景の紺色が縦線として抜ける（1440x900 で 2px 幅の線を実測）。
   * 地色を敷いておけば、抜けても布の色のままになる。
   * ※ WebGL 版の継ぎ目は「4枚が独立して揺れる」設計どおりの見え方なので塞がない。
   */
  background-color: #fefefe;
  transform: translateX(-50%) scale(1);
  transform-origin: 50% 30%;
}

.p-noren__fallback-panel {
  width: 100%;
  height: 100%;
  /* 外側2枚は無地なので、割り当てられた幅いっぱいに引き伸ばしてよい */
  object-fit: fill;
  min-width: 0;
  transform-origin: 50% 0;
  animation: p-noren-sway 3600ms var(--noren-ease-in-out) infinite;
  animation-delay: var(--noren-sway-delay, 0s);
  will-change: transform;
}

@keyframes p-noren-sway {
  0%,
  100% {
    transform: skewX(0deg) rotate(0deg);
  }

  35% {
    transform: skewX(0.7deg) rotate(0.28deg);
  }

  70% {
    transform: skewX(-0.5deg) rotate(-0.2deg);
  }
}

/* フォールバックはスライドが終わってから消す（WebGL 版より遅らせる） */
.p-noren--fallback.is-opening {
  opacity: 0;
  transition: opacity 900ms calc(var(--noren-total-duration) - 900ms)
    var(--noren-ease-in-cubic);
}

/*
 * 開いている間だけ地色を外す。
 * 地色は「待機中に隣り合う img の境目から背景が縦線として抜ける」ことへの手当てなので、
 * パネルが左右へ退いたあとまで残しておくと、退いたはずの中央が白いままになり、
 * WebGL 版（隙間から奥の KV が覗く）と見え方が食い違う。
 * 退いている最中の境目は動いているため、ここで地色が無くても縦線は目に付かない。
 */
.p-noren--fallback.is-opening .p-noren__fallback-stage {
  background-color: transparent;
  transform: translateX(-50%) scale(1.45);
  transition: transform var(--noren-total-duration) var(--noren-ease-in-cubic);
}

.p-noren--fallback.is-opening .p-noren__fallback-panel {
  animation: none;
  transition: transform 1800ms var(--noren-ease-in-out);
}

.p-noren--fallback.is-opening .p-noren__fallback-panel[data-side="left"] {
  transform: translateX(-118%) rotate(-1.6deg);
}

.p-noren--fallback.is-opening .p-noren__fallback-panel[data-side="right"] {
  transform: translateX(118%) rotate(1.6deg);
}

@media (prefers-reduced-motion: reduce) {
  .p-noren__fallback-panel {
    animation: none;
  }

  .p-kv__image {
    transition: none;
  }
}

/* ---- スクリプト無効時の案内 ---- */

.p-noscript {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 6vh;
  width: min(560px, calc(100% - 40px));
  padding: 16px 20px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  background-color: rgba(10, 20, 32, 0.8);
  font-size: 16px;
  text-align: center;
}

/* KVアニメーション */

/* モクモク */
.c-kv-obj.center-mokumoku {
  width: calc(620 / 375 * 100vw);
  height: auto;
  aspect-ratio: 620/588;
  top: calc(24 / 375 * 100vw);
  left: 50%;
  transform: translate(-50%, 0);
}
@media screen and (min-width: 768px) {
  .c-kv-obj.center-mokumoku {
    width: clamp(1px, calc(950 / 1280 * 100vw), 950px);
    aspect-ratio: 950/900;
    top: clamp(-54px, calc(-54 / 1280 * 100vw), -1px);
  }
}
.mokumoku {
  animation: animation-mokumoku 10s ease-in-out infinite;
}
@keyframes animation-mokumoku {
  0% {
    /* transform: scale(1) translate(-50%, 0) rotate(0deg); */
    transform: scale(1) translate(-50%, 0);
    opacity: 0.6;
  }
  25% {
    /* 少し大きく膨らみ、わずかに上・右へ */

    /* transform: scale(1.15) translate(-50%, 0px) rotate(0deg); */
    transform: scale(1.08) translate(-46%, 0);
    opacity: 1;
  }
  50% {
    /* 元より少し小さく縮み、微調整 */

    /* transform: scale(0.9) translate(-50%, 0px) rotate(0deg); */
    transform: scale(0.96) translate(-52%, 0);
    opacity: 0.5;
  }
  75% {
    /* 再び大きくなり、少し左上へ */

    /* transform: scale(1.1) translate(-50%, 0px) rotate(0deg); */
    transform: scale(1.02) translate(-49%, 0);
    opacity: 0.9;
  }
  100% {
    /* 最初の状態に戻る */

    /* transform: scale(1) translate(-50%, 0) rotate(0deg); */
    transform: scale(1) translate(-50%, 0);
    opacity: 0.8;
  }
}

/* フワフワ */
.c-kv-obj.left-fuwafuwa {
  width: calc(152 / 375 * 100vw);
  height: auto;
  aspect-ratio: 152/157;
  top: calc(364 / 375 * 100vw);
  left: calc(22 / 375 * 100vw);
}
@media screen and (min-width: 768px) {
  .c-kv-obj.left-fuwafuwa {
    width: clamp(1px, calc(244 / 1280 * 100vw), 244px);
    aspect-ratio: 244/252;
    top: clamp(1px, calc(20 / 1280 * 100vw), 20px);
    left: clamp(1px, calc(24 / 1280 * 100vw), 24px);
  }
}

.c-kv-obj.right-fuwafuwa {
  width: calc(152 / 375 * 100vw);
  height: auto;
  aspect-ratio: 152/157;
  top: calc(342 / 375 * 100vw);
  right: calc(9 / 375 * 100vw);
}
@media screen and (min-width: 768px) {
  .c-kv-obj.right-fuwafuwa {
    width: clamp(1px, calc(244 / 1280 * 100vw), 244px);
    aspect-ratio: 244/252;
    top: clamp(1px, calc(52 / 1280 * 100vw), 52px);
    right: clamp(1px, calc(24 / 1280 * 100vw), 24px);
  }
}
/* フワフワ アニメーション */

/* --- 1. 外側：上への昇華 ＋ 徐々に消滅 --- */
.fuwafuwa-up {
  /* 湯気なのでゆったりした周期（例: 4秒） */
  animation: animation-up 4s ease-out infinite;
}

@keyframes animation-up {
  0% {
    transform: translateY(0);
    opacity: 0; /* 最初は透明 */
  }
  20% {
    opacity: 1; /* ふっと出現する */
  }
  80% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-50px); /* 上に登る量（調整可） */
    opacity: 0; /* 上に到達したら完全に消える */
  }
}

/* --- 2. 内側：湯気が広がる（大小）動き --- */
.fuwafuwa-scale {
  transform-origin: center bottom; /* 下を支点にして上に広がるイメージ */
  animation: animation-fuwafuwa-scale 4s ease-out infinite;
}

@keyframes animation-fuwafuwa-scale {
  0% {
    transform: scale(0.8); /* はじめは少し小さめ */
  }
  50% {
    transform: scale(1.1); /* 途中で少しふんわり膨らむ */
  }
  100% {
    transform: scale(1.25); /* 消え際に向けてさらに大きく広がる */
  }
}

/* 暖簾ゆ */
.c-kv-obj.noren-yu {
  width: calc(60 / 375 * 100vw);
  height: auto;
  aspect-ratio: 60/46;
  top: calc(115 / 375 * 100vw);
  left: calc(13 / 375 * 100vw);
}
@media screen and (min-width: 768px) {
  .c-kv-obj.noren-yu {
    width: clamp(1px, calc(180 / 1280 * 100vw), 180px);
    aspect-ratio: 180/158;
    top: clamp(1px, calc(67 / 1280 * 100vw), 67px);
    left: clamp(1px, calc(133 / 1280 * 100vw), 133px);
  }
}
/* ==============================================
   ゆらゆらアニメーション (.yureyure)
   ============================================== */
.yureyure-updown {
  transform-origin: center bottom;
  animation: animation-yurayura-updown 12s ease-in-out infinite;
}
@keyframes animation-yurayura-updown {
  0%,
  100% {
    transform: translateY(calc(10 / 375 * 100vw));
  }
  50% {
    transform: translateY(calc(-10 / 375 * 100vw));
  }
}
@media screen and (min-width: 768px) {
  @keyframes animation-yurayura-updown {
    0%,
    100% {
      transform: translateY(clamp(1px, calc(10 / 1280 * 100vw), 10px));
    }
    50% {
      transform: translateY(clamp(-10px, calc(-10 / 1280 * 100vw), -1px));
    }
  }
}
.yureyure-rotation {
  transform-origin: center bottom;
  animation: animation-yurayura-rotation 4s ease-in-out infinite;
}

@keyframes animation-yurayura-rotation {
  0%,
  100% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
}

/* アニメーション開始をずらすクラス */
.delay-1 {
  animation-delay: -1s; /* マイナス指定がおすすめ */
}

.delay-2 {
  animation-delay: -2s;
}

.delay-3 {
  animation-delay: -3s;
}

/* パスタ */
.c-kv-obj.pasta {
  width: calc(80 / 375 * 100vw);
  height: auto;
  aspect-ratio: 80/41;
  top: calc(94 / 375 * 100vw);
  left: calc(146 / 375 * 100vw);
}
@media screen and (min-width: 768px) {
  .c-kv-obj.pasta {
    width: clamp(1px, calc(160 / 1280 * 100vw), 160px);
    aspect-ratio: 160/82;
    top: clamp(1px, calc(54 / 1280 * 100vw), 54px);
    left: clamp(1px, calc(560 / 1280 * 100vw), 560px);
  }
}
/* おけ */
.c-kv-obj.oke {
  width: calc(55 / 375 * 100vw);
  height: auto;
  aspect-ratio: 55/48;
  top: calc(126 / 375 * 100vw);
  right: calc(13 / 375 * 100vw);
}
@media screen and (min-width: 768px) {
  .c-kv-obj.oke {
    width: clamp(1px, calc(125 / 1280 * 100vw), 125px);
    aspect-ratio: 125/108;
    top: clamp(1px, calc(105 / 1280 * 100vw), 105px);
    right: clamp(1px, calc(213 / 1280 * 100vw), 213px);
  }
}

/* カレー */
.c-kv-obj.curry {
  width: calc(70 / 375 * 100vw);
  height: auto;
  aspect-ratio: 170/99;
  top: calc(370 / 375 * 100vw);
  left: calc(-14 / 375 * 100vw);
}
@media screen and (min-width: 768px) {
  .c-kv-obj.curry {
    width: clamp(1px, calc(170 / 1280 * 100vw), 170px);
    top: clamp(1px, calc(288 / 1280 * 100vw), 288px);
    left: clamp(1px, calc(35 / 1280 * 100vw), 35px);
  }
}
/* レバニラ */
.c-kv-obj.rebanira {
  width: calc(70 / 375 * 100vw);
  height: auto;
  aspect-ratio: 70/30;
  top: calc(371 / 375 * 100vw);
  right: calc(-11 / 375 * 100vw);
}
@media screen and (min-width: 768px) {
  .c-kv-obj.rebanira {
    width: clamp(1px, calc(169 / 1280 * 100vw), 169px);
    aspect-ratio: 169/94;
    top: clamp(1px, calc(327 / 1280 * 100vw), 327px);
    right: clamp(1px, calc(36 / 1280 * 100vw), 36px);
  }
}
/* あひる */
.c-kv-obj.ahiru {
  width: calc(50 / 375 * 100vw);
  height: auto;
  aspect-ratio: 50/44;
  top: calc(511 / 375 * 100vw);
  right: calc(128 / 375 * 100vw);
}
@media screen and (min-width: 768px) {
  .c-kv-obj.ahiru {
    width: clamp(1px, calc(131 / 1280 * 100vw), 131px);
    aspect-ratio: 131/100;
    top: clamp(1px, calc(621 / 1280 * 100vw), 621px);
    right: clamp(1px, calc(273 / 1280 * 100vw), 273px);
  }
}
/* プカプカ アニメーション */
/* ==============================================
   アヒルのジグザグ左右往復アニメーション
   ============================================== */

/* 1. 一番外側：左右の移動 */
.pukapuka-x {
  display: inline-block;
  animation: ahiru-move-x 120s ease-in-out infinite;
}

/* 2. 真ん中：上下のジグザグ移動 */
.pukapuka-y {
  display: inline-block;
  /* 左右が半分の位置（折り返しの4秒）までに2回上下にジグザグするよう2秒周期に設定 */
  animation: ahiru-zigzag-y 4s ease-in-out infinite;
}

/* 3. 一番内側（画像）：向きの反転 */
.ahiru-img {
  display: block;
  animation: ahiru-flip 120s steps(1) infinite;
}

/* --- 各アニメーションの定義 --- */

/* 左右往復（左に進んで右に戻る） */
@keyframes ahiru-move-x {
  0%,
  100% {
    transform: translateX(0); /* 初期位置 */
  }
  50% {
    /* transform: translateX(-360px);  */
    /* 左に進む距離（お好みで調整） */
    transform: translateX(
      calc(-80 / 375 * 100vw)
    ); /* 左に進む距離（お好みで調整） */
  }
}
@media screen and (min-width: 768px) {
  @keyframes ahiru-move-x {
    0%,
    100% {
      transform: translateX(0); /* 初期位置 */
    }
    50% {
      /* transform: translateX(-360px);  */
      /* 左に進む距離（お好みで調整） */
      transform: translateX(
        calc(-80 / 375 * 100vw)
      ); /* 左に進む距離（お好みで調整） */
    }
  }
}

/* 上下ジグザグ */
@keyframes ahiru-zigzag-y {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(
      calc(8 / 375 * 100vw)
    ); /* 跳ね上がる高さ（お好みで調整） */
  }
}
@media screen and (min-width: 768px) {
  @keyframes ahiru-zigzag-y {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(
        clamp(1px, calc(8 / 1280 * 100vw), 8px)
      ); /* 跳ね上がる高さ（お好みで調整） */
    }
  }
}
/* 向きの反転（50%のタイミングでパッと右を向く） */
@keyframes ahiru-flip {
  0% {
    transform: scaleX(1); /* 左向き */
  }
  50% {
    transform: scaleX(-1); /* 右向きに反転 */
  }
}

/* 角顔くん */
.c-kv-obj.kakugao-kun {
  width: calc(125 / 375 * 100vw);
  height: auto;
  aspect-ratio: 300/300;
  top: calc(426 / 375 * 100vw);
  left: 0px;
}
@media screen and (min-width: 768px) {
  .c-kv-obj.kakugao-kun {
    width: clamp(1px, calc(300 / 1280 * 100vw), 300px);
    top: clamp(1px, calc(417 / 1280 * 100vw), 417px);
    left: clamp(1px, calc(24 / 1280 * 100vw), 24px);
  }
}
/* タイル */
.c-kv-obj.tile {
  width: 100%;
  aspect-ratio: 375/150;
  height: auto;
  top: calc(551 / 375 * 100vw);
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
  .c-kv-obj.tile {
    width: clamp(1px, calc(1920 / 1280 * 100vw), 1920px);
    max-height: 412px;
    aspect-ratio: 1920/412;
    top: clamp(1px, calc(709 / 1280 * 100vw), 709px);
  }
}
/*
 * 画面幅が 1920px を超えるときだけ、KV 全体を縦横比を保ったまま画面幅に合わせて拡大する。
 * KV の各素材は「1280px 幅基準の値に px の上限（clamp）」で置いてあり、幅 1280px 以上では
 * KV 本体（.p-kv__media）が 1280x1121px で頭打ちになる（タイルだけ 1920px 幅）。
 * 1920px 幅のときの見た目を基準（倍率 1）とし、画面幅が 1920px を超えた分だけ
 * .p-kv__media を拡大する。1920px 以下の指定は変えない。
 *   --kv-scale  = 100vw / 1920px（単位なしの倍率）。tan(atan2()) で長さ同士の比を取る。
 *   .p-kv       高さを倍率に合わせて伸ばす（拡大は transform で見た目だけなので、
 *               レイアウト上の高さはこちらで確保する）。上詰めにして拡大の起点と揃える
 *   .p-kv__media 上辺中央を起点に拡大する（タイルは 1920px 幅なので、拡大後は 100vw になる）
 *
 * 暖簾（.p-noren）と「くぐる」ボタンは KV の拡大に連れて伸ばさず、
 * 高さを「KV の高さと画面の高さの小さい方」（＝暖簾の表示中に見えている範囲）に収める。
 *   理由：暖簾の WebGL は画面（innerWidth x innerHeight）の大きさで描かれ、PC では
 *   canvas を .p-noren の 80% の高さで表示している（裾は .p-noren の高さの 0.75 倍の位置）。
 *   KV と一緒に伸ばすと、横長の画面（3440x1440 等）で
 *   裾とボタンが画面の下にはみ出し、暖簾の表示中はスクロールできないためボタンが押せなくなる。
 *   KV の高さが画面の高さ以下なら、これまでどおり KV と同じ高さになる。
 *   ボタンは 1920px 幅（暖簾の高さ 1121px）のときの位置 ((1121 - 300) / 1121) を比率で保つ
 *   （bottom: 300px 固定のままだと、暖簾の高さが変わったとき裾との位置関係がずれるため）。
 *   ※ 1121 は .p-kv の高さ（上の .p-kv の height）、300 は PC の .c-button--enter の
 *     bottom: 300px と同じ値。どちらかを変えたら、下の --kv-base-height / --enter-bottom-pc も直す。
 *
 * 暖簾の表示中（body.u-noscroll）は、既定では .p-kv が overflow: auto になる。拡大後の高さの
 * 小数（例：1121px x 1.3333 のあふれ 0.34px）や、タイルの 100vw でスクロールバーが出るため、
 * 1921px 以上では hidden にする（この間はページ自体がスクロールできない＝隠れて困るものはない）。
 */
@media screen and (min-width: 1921px) {
  .p-kv {
    --kv-scale: tan(atan2(100vw, 1920px));
    height: calc(1121px * var(--kv-scale));
    align-items: flex-start;
  }
  .p-kv__media {
    transform: scale(var(--kv-scale));
    transform-origin: 50% 0;
  }
  .p-noren {
    bottom: auto;
    height: min(100%, 100vh);
  }
  .c-button--enter {
    /* 単位なしの px 値（比を取るため）。上のコメント参照 */
    --kv-base-height: 1121;
    --enter-bottom-pc: 300;
    bottom: auto;
    top: calc(
      (1 - var(--enter-bottom-pc) / var(--kv-base-height)) * min(100%, 100vh) -
        var(--c-button-height)
    );
  }
  body.u-noscroll .p-kv {
    overflow: hidden;
  }
}
/* 丸顔くん */
.c-kv-obj.marugao-kun {
  width: calc(115 / 375 * 100vw);
  height: auto;
  aspect-ratio: 300/300;
  top: calc(449 / 375 * 100vw);
  right: 0px;
}
@media screen and (min-width: 768px) {
  .c-kv-obj.marugao-kun {
    width: clamp(1px, calc(300 / 1280 * 100vw), 300px);
    top: clamp(1px, calc(459 / 1280 * 100vw), 459px);
    right: clamp(1px, calc(24 / 1280 * 100vw), 24px);
  }
}
/* キャッチ */
.c-kv-obj.kv-catch {
  width: calc(340 / 375 * 100vw);
  height: auto;
  aspect-ratio: 340/182;
  top: calc(183 / 375 * 100vw);
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
  .c-kv-obj.kv-catch {
    width: clamp(1px, calc(729 / 1280 * 100vw), 792px);
    aspect-ratio: 792/414;
    top: clamp(1px, calc(157 / 1280 * 100vw), 157px);
  }
}

/* スライド */

/*
 * assets/js/slide.js が .p-card の幅・個数・column-gap を実測して、
 * 複製カードの複製枚数・ループの移動距離（--p-cards-shift）・アニメーション秒数
 * （--p-cards-duration）を算出している。
 * 幅や column-gap をメディアクエリ等で画面サイズごとに変えると、
 * その実測値との前提が崩れて継ぎ目にズレが出るおそれがある。
 * 変更する場合は assets/js/slide.js のコメント（実測の仕組み）も合わせて確認すること。
 */
.p-cards {
  display: flex;
  width: fit-content;
  column-gap: calc(16 / 375 * 100vw);
}
@media screen and (min-width: 768px) {
  .p-cards {
    column-gap: clamp(1px, calc(40 / 1280 * 100vw), 40px);
  }
}
.l-slide .p-card {
  display: flex;
  width: calc(314 / 375 * 100vw);
  /* height: clamp(1px, calc(283 / 1280 * 100vw), 283px); */
  height: auto;
  aspect-ratio: 314/277;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  .l-slide .p-card {
    width: clamp(1px, calc(320 / 1280 * 100vw), 320px);
    /* height: clamp(1px, calc(283 / 1280 * 100vw), 283px); */
    aspect-ratio: 320/283;
  }
}
/*
 * 上下互い違い（ジグザグ）の配置。
 * 本来は assets/js/slide.js が p-card--upper / p-card--lower を各カードへ付けることで
 * 決まる（奇数枚を複製してループさせても、つなぎ目で向きが反転しないようにするため。
 * DOM位置の nth-child だけで決めると、複製後の位置によって奇数枚のときに向きがズレる）。
 * 以下の nth-child は JS が動かない場合だけのフォールバックで、モディファイアが付いた
 * カードには :not() で効かないようにしてある（JS実行後は完全にモディファイア側に
 * 置き換わり、nth-child 側は一切効かなくなる）。
 */
.p-card:not(.p-card--upper):not(.p-card--lower):nth-child(odd) {
  align-items: end;
}
.p-card:not(.p-card--upper):not(.p-card--lower):nth-child(even) {
  align-items: start;
}
.p-card--lower {
  align-items: end;
}
.p-card--upper {
  align-items: start;
}
.p-card-photo {
  display: flex;
  position: relative;
  width: calc(314 / 375 * 100vw);
  /* height:  calc(237/375 * 100vw); */
  height: auto;
  aspect-ratio: 314/237;
  justify-content: center;
  padding: calc(6 / 375 * 100vw) calc(7 / 375 * 100vw);
  border-radius: calc(16 / 375 * 100vw);
  border: 2px solid var(--main-color);
  background-color: #ffffff;
}
@media screen and (min-width: 768px) {
  .p-card-photo {
    width: clamp(1px, calc(320 / 1280 * 100vw), 320px);
    /* height: clamp(1px, calc(243 / 1280 * 100vw), 243px); */
    aspect-ratio: 320/243;
    padding: clamp(1px, calc(6 / 1280 * 100vw), 6px);
    border-radius: clamp(1px, calc(16 / 1280 * 100vw), 16px);
  }
}
.p-card .p-card-photo_img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(16 / 375 * 100vw);
}
@media screen and (min-width: 768px) {
  .p-card .p-card-photo_img {
    border-radius: clamp(1px, calc(16 / 1280 * 100vw), 16px);
  }
}
.c-upper-kakugao-kun,
.c-upper-marugao-kun,
.c-lower-kakugao-kun,
.c-lower-marugao-kun {
  position: absolute;
  z-index: 10;
}
.c-upper-kakugao-kun::before {
  content: "";
  position: absolute;
  width: calc(93 / 375 * 100vw);
  height: auto;
  aspect-ratio: 93/80;
  top: calc(-76 / 375 * 100vw);
  left: calc(113 / 375 * 100vw);
  background-image: url("../images/slide-03-kakugao-kun@2x.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}
@media screen and (min-width: 768px) {
  .c-upper-kakugao-kun::before {
    width: clamp(1px, calc(93 / 1280 * 100vw), 93px);
    top: clamp(-76px, calc(-76 / 1280 * 100vw), -1px);
    left: clamp(1px, calc(113 / 1280 * 100vw), 113px);
  }
}
.c-upper-marugao-kun::before {
  content: "";
  position: absolute;
  width: calc(93 / 375 * 100vw);
  height: auto;
  aspect-ratio: 93/70;
  top: calc(-67 / 375 * 100vw);
  left: calc(114 / 375 * 100vw);
  background-image: url("../images/slide-05-marugao-kun@2x.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}
@media screen and (min-width: 768px) {
  .c-upper-marugao-kun::before {
    width: clamp(1px, calc(93 / 1280 * 100vw), 93px);
    top: clamp(-67px, calc(-67 / 1280 * 100vw), -1px);
    left: clamp(1px, calc(114 / 1280 * 100vw), 114px);
  }
}

.c-lower-kakugao-kun::before {
  content: "";
  position: absolute;
  width: calc(84 / 375 * 100vw);
  height: auto;
  aspect-ratio: 84/130;
  bottom: calc(-42 / 375 * 100vw);
  right: calc(5 / 375 * 100vw);
  background-image: url("../images/slide-08-kakugao-kun@2x.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}
@media screen and (min-width: 768px) {
  .c-lower-kakugao-kun::before {
    width: clamp(1px, calc(84 / 1280 * 100vw), 84px);
    bottom: clamp(-42px, calc(-42 / 1280 * 100vw), -1px);
    right: clamp(1px, calc(5 / 1280 * 100vw), 5px);
  }
}
.c-lower-marugao-kun::before {
  content: "";
  position: absolute;
  width: calc(66 / 375 * 100vw);
  height: auto;
  aspect-ratio: 66/120;
  bottom: calc(-43 / 375 * 100vw);
  left: calc(9 / 375 * 100vw);
  background-image: url("../images/slide-10-marugao-kun@2x.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}
@media screen and (min-width: 768px) {
  .c-lower-marugao-kun::before {
    width: clamp(1px, calc(66 / 1280 * 100vw), 66px);
    bottom: clamp(-43px, calc(-43 / 1280 * 100vw), -1px);
    left: clamp(1px, calc(9 / 1280 * 100vw), 9px);
  }
}
/* intro */
.p-intro {
  margin-top: calc(100 / 375 * 100vw);
}
@media screen and (min-width: 768px) {
  .p-intro {
    margin-top: clamp(1px, calc(200 / 1280 * 100vw), 200px);
    margin-bottom: clamp(1px, calc(200 / 1280 * 100vw), 200px);
  }
}
.p-intro_lo {
  display: flex;
  flex-direction: column;
  row-gap: calc(80 / 375 * 100vw);
}
@media screen and (min-width: 768px) {
  .p-intro_lo {
    row-gap: clamp(1px, calc(104 / 1280 * 100vw), 104px);
  }
}
.p-intro_lo-item {
  display: flex;
  flex-direction: column;
  row-gap: calc(48 / 375 * 100vw);
}
.p-intro_lo-item__img,
.p-intro_lo-item__text {
  flex: 1;
}
.p-intro_lo-item__img canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 300/300;
}
.p-intro_lo-item__text {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-intro_lo-item__text {
    display: block;
    justify-content: left;
    text-align: left;
  }
}
.p-intro_lo-item__text p {
  color: var(--main-color);
  font-size: calc(14 / 375 * 100vw);
  font-weight: bold;
  line-height: 2;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 768px) {
  .p-intro_lo-item__text p {
    font-size: clamp(1px, calc(20 / 1280 * 100vw), 20px);
  }
}

.p-intro_lo-item__text_red {
  font-size: calc(20 / 375 * 100vw);
  color: var(--accent-color);
}
@media screen and (min-width: 768px) {
  .p-intro_lo-item__text_red {
    font-size: clamp(1px, calc(32 / 1280 * 100vw), 32px);
  }
}
@media screen and (min-width: 768px) {
  .p-intro_lo-item {
    flex-direction: row;
    column-gap: clamp(1px, calc(20 / 1280 * 100vw), 20px);
  }
}
/* 忘れられない */
.l-section.p-unforgettable {
  position: relative;
  margin-bottom: 0;
  margin-top: 0;
  z-index: 5;
}
.p-unforgettable-body {
  /*
   * 背景の固定レイヤー（.p-unforgettable-body__bg-objects、z-index:-1）を、この要素の背景色より前・内容より後ろに置くため、
   * この要素を独立した重ね合わせの文脈にする（isolation がないと、雲がこの背景色の裏に隠れて見えなくなる）。
   */
  position: relative;
  isolation: isolate;
  /*
   * 下の余白（青い余白）の高さ。変数にして、.p-unforgettable-body__cards-area（キャラクターの sticky の範囲）と共有する。
   * ※ padding-bottom は 0 にしない。0 にすると、__cards-area の負の margin-bottom が親の外へ抜けて（余白と相殺されて）
   *   セクションの高さが変わり、キャラクターの下端も body の下端からずれる。
   */
  --unforgettable-body-pb: clamp(1px, calc(200 / 1280 * 100vw), 200px);
  padding-bottom: var(--unforgettable-body-pb);
  background-color: #e4f0f6;
  /*
   * NEW バッヂ（.c-card-new-badge::before）が回転・拡大するとき、画像の透明な部分を含む箱の外接範囲が
   * 画面の右端を越え、ページが横に広がる（スマホで縮小表示される）のを防ぐ。
   * 画像の見える部分は箱より内側に収まるので切れない。overflow-x:clip が使えない古いブラウザは hidden に落ちる。
   */
  overflow-x: hidden;
  overflow-x: clip;
  /*
   * 背景の固定レイヤー（雲）は、このセクションの終わりで止まる時に、レイヤーの高さ（100vh）ぶん
   * セクションの下へはみ出す（margin-bottom:-100vh のため）。そのはみ出しが次のセクション（私たちについて）の
   * 上に出ないよう、縦方向もこの要素の範囲で切る。キャラクターは下端がこの要素の範囲に収まるので切れない。
   */
  overflow-y: clip;
}

/*
 * 背景の固定レイヤー（雲5つ）。#sec-intro の .p-intro__bg-objects と同じ仕組み。
 * sticky で画面に固定され、カード（前面）がその上をスクロールする。重ね順は 雲 < キャラクター < カード。
 * ※ sticky は overflow-x:clip（.p-unforgettable-body）の下でも効く。clip が使えず hidden に落ちる古いブラウザでは固定されない。
 */
.p-unforgettable-body__bg-objects {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  margin-bottom: -100vh; /* 高さ打ち消し */
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.p-unforgettable-body__bg-obj {
  position: absolute;
}
.p-unforgettable-body__bg-obj img {
  width: 100%;
  height: auto;
  display: block;
}

/*
 * カード一覧からセクションの下端まで（.p-unforgettable-body__cards-area）。キャラクター（下の __characters）の sticky の範囲。
 * sticky の要素は、親（この要素）の外へは出ない。この要素はカード一覧の上端から始まるので、キャラクターは
 * タイトル・説明文（この要素より上）には重ならない。
 * 高さは「カード一覧 + 下の余白（--unforgettable-body-pb）」。下の余白ぶんは、.p-unforgettable-body の padding-bottom の上に
 * 重ねる（負の margin-bottom）ので、セクションの高さは増えない。この要素の下端が body の下端（余白の下）と一致する。
 * ※ 負の margin-bottom は、親（.p-unforgettable-body）の padding-bottom があることが前提。padding-bottom を 0 にしないこと。
 * ※ 親の「雲の層」の sticky の範囲（親の content box）は、余白を除いたまま変わらない（雲の挙動を変えないため）。
 */
.p-unforgettable-body__cards-area {
  margin-bottom: calc(var(--unforgettable-body-pb) * -1);
}
/*
 * カード一覧の下端。キャラクターの要素（__characters）の高さぶんを、負の margin-bottom で相殺する（余白は上のとおり
 * 「キャラクターの高さ - この負のマージン」の差で、下の余白 --unforgettable-body-pb になる）。
 * この margin-bottom と __characters の height は必ずセット。片方だけ変えると、余白の高さが変わる。
 */
.p-unforgettable-body__cards {
  margin-bottom: calc(
    var(--unforgettable-body-pb) - var(--unforgettable-chars-h)
  );
}

/*
 * キャラクター（角顔くん・丸顔くん）。.p-unforgettable-body__cards-area の最後の子で、sticky（bottom:0）で画面の下に固定する。
 * 途中は画面の左下・右下に固定され、セクションの終わりでは、この要素の自然な位置（＝ .p-unforgettable-body の下端）に
 * 乗ったまま、次のセクションと一緒に上へ流れる（境目で切れない）。入口では、カード一覧の上端が画面に入った後に現れる。
 * 高さは、キャラクターの高さ（--unforgettable-chars-h。幅から計算）と同じにする。キャラクターが要素の上へはみ出さないので、
 * sticky の範囲（カード一覧の上端以降）の外に出ない。
 * 高さのぶんは、直前の __cards の負のマージンで相殺している（上のコメント）。重ね順は 雲（z-index:-1、先に書かれた方が後ろ）より前、
 * カード・タイトルより後ろ。位置・大きさは、下の「シンヤさん微調整用」（--kakugao / --marugao）。bottom:0 はこの要素の下端が基準。
 */
.p-unforgettable-body__characters {
  position: sticky;
  bottom: calc(80 / 375 * 100vw);
  height: var(--unforgettable-chars-h);
  /* z-index: -1; */
  z-index: 999;
  pointer-events: none;
}

/*
 * ■ シンヤさん微調整用：雲・キャラクターの位置と大きさ（ここだけ触れば調整できる）
 *   上の定義（SP）と、下の @media（PC：768px以上）の2か所。
 *   キャラクターの bottom:0 は、.p-unforgettable-body__characters の下端（＝画面の下端。セクションの終わりでは body の下端）が基準。
 *   キャラクターの幅は、下の変数（--unforgettable-kakugao-w / --unforgettable-marugao-w）で変える。
 *   追従の範囲（要素の高さ --unforgettable-chars-h）が、この幅から自動で決まる（画像の縦横比 204:511 / 202:404）。
 *   雲 ul・uc・ur は #sec-intro の雲（.p-intro__bg-obj--*）と同じ値。dl・dr は画面の端に付ける（画像の1倍サイズ）。
 *   キャラクターは画像（2倍書き出し）の1倍サイズ。角顔くん＝左下、丸顔くん＝右下。
 */
.p-unforgettable-body {
  /* --unforgettable-kakugao-w: calc(102 / 375 * 100vw); */
  --unforgettable-kakugao-w: calc(44 / 375 * 100vw);
  /* --unforgettable-marugao-w: calc(101 / 375 * 100vw); */
  --unforgettable-marugao-w: calc(44 / 375 * 100vw);
  --unforgettable-chars-h: calc(
    max(
        calc(var(--unforgettable-kakugao-w) * 511 / 204),
        calc(var(--unforgettable-marugao-w) * 404 / 202)
      ) -
      calc(90/375 * 100vw)
  );
}
.p-unforgettable-body__bg-obj--ul {
  width: calc(154 / 375 * 100vw);
  aspect-ratio: 154/159;
  top: calc(48 / 375 * 100vw);
  left: calc(-20 / 375 * 100vw);
}
.p-unforgettable-body__bg-obj--uc {
  width: calc(53 / 375 * 100vw);
  aspect-ratio: 53/51;
  top: calc(41 / 375 * 100vw);
  left: 42%;
}
.p-unforgettable-body__bg-obj--ur {
  width: calc(105 / 375 * 100vw);
  aspect-ratio: 105/111;
  top: calc(122 / 375 * 100vw);
  right: calc(8 / 375 * 100vw);
}
.p-unforgettable-body__bg-obj--dl {
  width: calc(63 / 375 * 100vw);
  aspect-ratio: 364/399;
  bottom: 0;
  left: 0;
}
.p-unforgettable-body__bg-obj--dr {
  width: calc(146 / 375 * 100vw);
  aspect-ratio: 568/545;
  bottom: 0;
  right: 0;
}
.p-unforgettable-body__bg-obj--kakugao {
  width: var(--unforgettable-kakugao-w);
  aspect-ratio: 204/511;
  bottom: calc(40 / 375 * 100vw);
  left: calc(8 / 375 * 100vw);
}
.p-unforgettable-body__bg-obj--marugao {
  width: var(--unforgettable-marugao-w);
  aspect-ratio: 202/404;
  bottom: calc(40 / 375 * 100vw);
  right: calc(8 / 375 * 100vw);
}
@media screen and (min-width: 768px) {
  .p-unforgettable-body {
    --unforgettable-kakugao-w: clamp(1px, calc(102 / 1280 * 100vw), 102px);
    --unforgettable-marugao-w: clamp(1px, calc(101 / 1280 * 100vw), 101px);
    --unforgettable-chars-h: calc(
      max(
        calc(var(--unforgettable-kakugao-w) * 511 / 204),
        calc(var(--unforgettable-marugao-w) * 404 / 202)
      )
    );
  }
  .p-unforgettable-body__bg-obj--ul {
    width: clamp(1px, calc(340 / 1280 * 100vw), 340px);
    aspect-ratio: 340/432;
    top: clamp(1px, calc(160 / 1280 * 100vw), 160px);
    left: 0px;
  }
  .p-unforgettable-body__bg-obj--uc {
    width: clamp(1px, calc(157 / 1280 * 100vw), 157px);
    aspect-ratio: 157/153;
    top: clamp(1px, calc(121 / 1280 * 100vw), 121px);
  }
  .p-unforgettable-body__bg-obj--ur {
    width: clamp(1px, calc(291 / 1280 * 100vw), 291px);
    aspect-ratio: 291/309;
    top: clamp(1px, calc(104 / 1280 * 100vw), 104px);
    right: clamp(1px, calc(16 / 1280 * 100vw), 16px);
  }
  .p-unforgettable-body__bg-obj--dl {
    width: clamp(1px, calc(182 / 1280 * 100vw), 182px);
  }
  .p-unforgettable-body__bg-obj--dr {
    width: clamp(1px, calc(284 / 1280 * 100vw), 284px);
  }
  .p-unforgettable-body__bg-obj--kakugao {
    left: max(
      calc((100vw - 1280px) / 2 + 60px),
      clamp(1px, calc(40 / 1280 * 100vw), 40px)
    );
    bottom: calc(var(--unforgettable-body-pb) / 2);
  }
  .p-unforgettable-body__bg-obj--marugao {
    right: max(
      calc((100vw - 1280px) / 2 + 60px),
      clamp(1px, calc(40 / 1280 * 100vw), 40px)
    );
    bottom: calc(var(--unforgettable-body-pb) / 2);
  }
}
.p-unforgettable-body__icon {
  width: calc(60 / 375 * 100vw);
  margin-inline: auto;
  aspect-ratio: 60/27;
  margin-bottom: calc(16 / 375 * 100vw);
}
@media screen and (min-width: 768px) {
  .p-unforgettable-body__icon {
    width: clamp(1px, calc(110 / 1280 * 100vw), 110px);
    aspect-ratio: 110/50;
    margin-bottom: clamp(1px, calc(32 / 1280 * 100vw), 32px);
  }
}
.p-unforgettable-body__title {
  width: calc(263 / 375 * 100vw);
  margin-inline: auto;
  aspect-ratio: 263/32;
  margin-bottom: calc(24 / 375 * 100vw);
}
@media screen and (min-width: 768px) {
  .p-unforgettable-body__title {
    width: clamp(1px, calc(489 / 1280 * 100vw), 489px);
    aspect-ratio: 489/57;
    margin-bottom: clamp(1px, calc(48 / 1280 * 100vw), 48px);
  }
}
.p-unforgettable-body__text {
  margin-bottom: calc(72 / 375 * 100vw);
}
@media screen and (min-width: 768px) {
  .p-unforgettable-body__text {
    margin-bottom: clamp(1px, calc(48 / 1280 * 100vw), 48px);
  }
}

.p-unforgettable-body__text p {
  text-align: center;
  font-size: calc(14 / 375 * 100vw);
  font-weight: bold;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--main-color);
}
@media screen and (min-width: 768px) {
  .p-unforgettable-body__text p {
    font-size: clamp(1px, calc(18 / 1280 * 100vw), 18px);
  }
}
.p-unforgettable-body__text p span {
  color: var(--accent-color);
}
.p-unforgettable-cards {
  display: flex;
  width: 100%;
  flex-direction: column;
  row-gap: calc(24 / 375 * 100vw);
}
@media screen and (min-width: 768px) {
  .p-unforgettable-cards {
    display: grid;
    grid-template-columns: repeat(2, clamp(1px, calc(432 / 1280 * 100vw), 432px));
    column-gap: clamp(1px, calc(35 / 1280 * 100vw), 35px);
    row-gap: clamp(1px, calc(32 / 1280 * 100vw), 32px);
    justify-content: center;
  }
}

.p-unforgettable-card {
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  width: calc(327 / 375 * 100vw);
  min-height: calc(350 / 375 * 100vw);
  position: relative;
  padding: calc(24 / 375 * 100vw);
  border: solid 3px var(--main-color);
  border-radius: calc(16 / 375 * 100vw);
  background-color: var(--white-color);
  z-index: 1;
  transition: 0.6s;
}

@media screen and (min-width: 768px) {
  .p-unforgettable-card {
    width: clamp(1px, calc(432 / 1280 * 100vw), 432px);
    min-height: clamp(1px, calc(450 / 1280 * 100vw), 450px);
    margin-inline: unset;
    padding: clamp(1px, calc(32 / 1280 * 100vw), 32px)
      clamp(1px, calc(24 / 1280 * 100vw), 24px);
    border-radius: clamp(1px, calc(16 / 1280 * 100vw), 16px);
  }
}
.c-card-new-badge::before {
  content: "";
  display: block;
  width: calc(72 / 375 * 100vw);
  height: auto;
  aspect-ratio: 98/98;
  background-image: url("../images/unforgettable-card-badge@2x.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  top: calc(12 / 375 * 100vw);
  right: calc(12 / 375 * 100vw);
  z-index: 2;
  transform: translate(50%, -50%);
  /* 約5秒に1回、約0.95秒だけ動き、残りは静止する。ずっと繰り返す。複数カードに付けるときは --new-badge-delay でずらす */
  animation: c-card-new-badge-spin 5s infinite;
  animation-delay: var(--new-badge-delay, 0s);
}
@media screen and (min-width: 768px) {
  .c-card-new-badge::before {
    width: clamp(1px, calc(98 / 1280 * 100vw), 98px);
    top: clamp(1px, calc(24 / 1280 * 100vw), 24px);
    right: clamp(1px, calc(12 / 1280 * 100vw), 12px);
  }
}
/*
 * NEW バッヂ：くるっと1回転してから、少し膨らんで弾む。
 * 先頭の translate(50%, -50%) は、バッヂを角に載せる既存の位置指定。全キーフレームに書くこと（書かないと位置がずれる）。
 * 回転と拡大は、箱の中心（画像の見える部分の中心と一致）を軸にする。
 * 0% 〜 9%  ：回転（約0.45秒）。逆さに見える時間を短くするため、真ん中が速いイージング
 * 9% 〜 19% ：拡大（1.15倍）→ 縮む → 戻る、の弾み（約0.5秒）
 * 19% 〜 100%：静止（約4秒）。rotate は 360deg のまま止める（0 に戻すと逆回転して見えるため）
 */
@keyframes c-card-new-badge-spin {
  0% {
    transform: translate(50%, -50%) rotate(0deg) scale(1);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  9% {
    transform: translate(50%, -50%) rotate(360deg) scale(1);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  13% {
    transform: translate(50%, -50%) rotate(360deg) scale(1.15);
    animation-timing-function: ease-in-out;
  }
  15.5% {
    transform: translate(50%, -50%) rotate(360deg) scale(0.95);
    animation-timing-function: ease-in-out;
  }
  17.5% {
    transform: translate(50%, -50%) rotate(360deg) scale(1.04);
    animation-timing-function: ease-in-out;
  }
  19%,
  100% {
    transform: translate(50%, -50%) rotate(360deg) scale(1);
  }
}
/* 動きを減らす設定のときは動かさない（静止時の位置・見た目のまま） */
@media (prefers-reduced-motion: reduce) {
  .c-card-new-badge::before {
    animation: none;
  }
}
.p-unforgettable-card__haed {
  display: flex;
  column-gap: calc(16 / 375 * 100vw);
  margin-bottom: calc(16 / 375 * 100vw);
}

@media screen and (min-width: 768px) {
  .p-unforgettable-card__haed {
    margin-bottom: clamp(1px, calc(24 / 1280 * 100vw), 24px);
    column-gap: clamp(1px, calc(16 / 1280 * 100vw), 16px);
  }
}
.p-unforgettable-card__haed-icon {
  width: calc(90 / 375 * 100vw);
  height: auto;
  aspect-ratio: 120/120;
  border-radius: 9999px;
}
.p-unforgettable-card__haed-icon img {
  border-radius: 50%;
}

@media screen and (min-width: 768px) {
  .p-unforgettable-card__haed-icon {
    width: clamp(1px, calc(120 / 1280 * 100vw), 120px);
  }
}
.p-unforgettable-card__haed-text {
  padding: clamp(1px, calc(21 / 1280 * 100vw), 21px) 0
    clamp(1px, calc(21 / 1280 * 100vw), 21px)
    clamp(1px, calc(16 / 1280 * 100vw), 16px);
}
.p-unforgettable-card__haed-text-number {
  font-size: calc(10 / 375 * 100vw);
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--accent-color);
}
@media screen and (min-width: 768px) {
  .p-unforgettable-card__haed-text-number {
    font-size: clamp(1px, calc(12 / 1280 * 100vw), 12px);
  }
}
.p-unforgettable-card__haed-text-combi {
  font-size: calc(12 / 375 * 100vw);
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--main-color);
}
@media screen and (min-width: 768px) {
  .p-unforgettable-card__haed-text-combi {
    font-size: clamp(1px, calc(16 / 1280 * 100vw), 16px);
  }
}
.p-unforgettable-card__haed-text-name {
  font-size: calc(16 / 375 * 100vw);
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--main-color);
}
@media screen and (min-width: 768px) {
  .p-unforgettable-card__haed-text-name {
    font-size: clamp(1px, calc(20 / 1280 * 100vw), 20px);
  }
}
.p-unforgettable-card__body {
  display: flex;
  column-gap: calc(16 / 375 * 100vw);
}
@media screen and (min-width: 768px) {
  .p-unforgettable-card__body {
    column-gap: clamp(1px, calc(16 / 1280 * 100vw), 16px);
  }
}
.c-my-gurumet-card {
  display: block;
  flex: 1;
}
.c-my-gurumet-card-img {
  width: 100%;
  height: auto;
}
.c-my-gurumet-card-text-tag {
  font-size: calc(10 / 375 * 100vw);
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--accent-color);
  font-weight: bold;
}
@media screen and (min-width: 768px) {
  .c-my-gurumet-card-text-tag {
    font-size: clamp(1px, calc(12 / 1280 * 100vw), 12px);
  }
}
.c-my-gurumet-card-text_p {
  font-size: calc(12 / 375 * 100vw);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--main-color);
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  .c-my-gurumet-card-text_p {
    font-size: clamp(1px, calc(14 / 1280 * 100vw), 14px);
  }
}
.p-unforgettable-card-btn_a {
  display: flex;
  position: absolute;
  width: max-content;
  padding: calc(8 / 375 * 100vw) calc(24 / 375 * 100vw);
  bottom: calc(24 / 375 * 100vw);
  background-color: var(--accent-color);
  align-items: center;
  row-gap: calc(8 / 375 * 100vw);
  border-radius: 9999px;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
  .p-unforgettable-card-btn_a {
    padding: clamp(1px, calc(8 / 1280 * 100vw), 8px)
      clamp(1px, calc(24 / 1280 * 100vw), 24px);
    bottom: clamp(1px, calc(32 / 1280 * 100vw), 32px);
    row-gap: clamp(1px, calc(8 / 1280 * 100vw), 8px);
  }
}

.p-unforgettable-card-btn_a p {
  font-size: calc(14 / 375 * 100vw);
  font-weight: bold;
  line-height: 1.3;
  letter-spacing: 0.05em;
  color: var(--white-color);
}
@media screen and (min-width: 768px) {
  .p-unforgettable-card-btn_a p {
    font-size: clamp(1px, calc(14 / 1280 * 100vw), 14px);
  }
}
.p-unforgettable-card-btn_a img {
  width: calc(12 / 375 * 100vw);
  height: auto;
  aspect-ratio: 12/12;
}
@media screen and (min-width: 768px) {
  .p-unforgettable-card-btn_a img {
    width: clamp(1px, calc(12 / 1280 * 100vw), 12px);
  }
}
/* 私たちについて */
.l-section.p-about {
  width: 100%;
  height: auto;
  margin-top: 0;
  margin-bottom: 0;
  /* padding: calc(80 / 375 * 100vw) calc(24 / 375 * 100vw); */
  padding: calc(80 / 375 * 100vw) 0;
  border-top: solid calc(4 / 375 * 100vw) var(--main-color);
  border-bottom: solid calc(4 / 375 * 100vw) var(--main-color);
  background-image: url("../images/pc-about-bg@2x.webp");
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 100% auto;
}
@media screen and (min-width: 768px) {
  .l-section.p-about {
    padding: clamp(1px, calc(104 / 1280 * 100vw), 104px)
      clamp(1px, calc(32 / 1280 * 100vw), 32px);
    border-top: solid clamp(1px, calc(4 / 1280 * 100vw), 4px) var(--main-color);
    border-bottom: solid clamp(1px, calc(4 / 1280 * 100vw), 4px)
      var(--main-color);
    /* background-image: url("../images/pc-about-bg@2x.webp"); */
    /* background-repeat: no-repeat; */
    background-position: top center;
    /* background-size: cover; */
    background-image: url("../images/tile-about.webp");
    background-repeat: repeat;
    background-size: 1021px 176px;
  }
}

.p-about-content {
  width: 100%;
  height: auto;
  position: relative;
  padding: calc(40 / 375 * 100vw) calc(24 / 1280 * 100vw);
  background-color: var(--white-color);
  border-radius: calc(24 / 375 * 100vw);
  justify-content: center;
}
@media screen and (min-width: 768px) {
  .p-about-content {
    width: 100%;
    height: auto;
    position: relative;
    padding: clamp(1px, calc(80 / 1280 * 100vw), 80px)
      clamp(1px, calc(32 / 1280 * 100vw), 32px);
    background-color: var(--white-color);
    border-radius: clamp(1px, calc(24 / 1280 * 100vw), 24px);
    justify-content: center;
  }
}

.p-about-head {
  display: flex;
  margin-bottom: calc(32 / 375 * 100vw);
  flex-direction: column;
  row-gap: calc(16 / 375 * 100vw);
  align-items: center;
}
@media screen and (min-width: 768px) {
  .p-about-head {
    margin-bottom: clamp(1px, calc(40 / 1280 * 100vw), 40px);
    row-gap: clamp(1px, calc(24 / 1280 * 100vw), 24px);
  }
}

.p-about-head-icon {
  width: calc(60 / 375 * 100vw);
  height: auto;
  aspect-ratio: 60/38;
}
@media screen and (min-width: 768px) {
  .p-about-head-icon {
    width: clamp(1px, calc(110 / 1280 * 100vw), 110px);
    aspect-ratio: 110/50;
  }
}
.p-about-head h2 {
  display: block;
  width: calc(221 / 375 * 100vw);
  height: auto;
}
@media screen and (min-width: 768px) {
  .p-about-head h2 {
    width: clamp(1px, calc(415 / 1280 * 100vw), 415px);
  }
}
.p-about-text {
  margin-bottom: calc(32 / 375 * 100vw);
}
@media screen and (min-width: 768px) {
  .p-about-text {
    margin-bottom: clamp(1px, calc(40 / 1280 * 100vw), 40px);
  }
}
.p-about-text p {
  font-size: calc(14 / 375 * 100vw);
  /* font-weight: 500; */
  font-weight: bold;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--main-color);
  margin-bottom: calc(16 / 375 * 100vw);
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-about-text p {
    font-size: clamp(1px, calc(16 / 1280 * 100vw), 16px);
    margin-bottom: clamp(1px, calc(24 / 1280 * 100vw), 24px);
  }
}
.p-about-content-btn {
  display: flex;
  width: fit-content;
  margin-inline: auto;
  column-gap: calc(16 / 1280 * 100vw);
  align-items: center;
  padding: calc(16 / 375 * 100vw) calc(40 / 375 * 100vw);
  background-color: var(--accent-color);
  border-radius: 9999px;
  transition: 0.6s;
}

@media screen and (min-width: 768px) {
  .p-about-content-btn {
    column-gap: clamp(1px, calc(16 / 1280 * 100vw), 16px);
    padding: clamp(1px, calc(24 / 1280 * 100vw), 24px)
      clamp(1px, calc(40 / 1280 * 100vw), 40px);
  }
}
.p-about-content-btn p {
  display: block;
  font-size: calc(16 / 375 * 100vw);
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--white-color);
}
@media screen and (min-width: 768px) {
  .p-about-content-btn p {
    font-size: clamp(1px, calc(20 / 1280 * 100vw), 20px);
  }
}
.p-about-content-btn img {
  width: calc(18 / 375 * 100vw);
  height: auto;
  aspect-ratio: 18/18;
}
@media screen and (min-width: 768px) {
  .p-about-content-btn img {
    width: clamp(1px, calc(28 / 1280 * 100vw), 28px);
    aspect-ratio: 28/28;
  }
}
.p-about-content-left-img {
  width: calc(64 / 375 * 100vw);
  height: auto;
  position: absolute;
  /* top: calc(46 / 375 * 100vw); */
  bottom: calc(-56 / 375 * 100vw);
  left: calc(-16 / 375 * 100vw);
}
@media screen and (min-width: 768px) {
  .p-about-content-left-img {
    width: clamp(1px, calc(160 / 1280 * 100vw), 160px);
    top: unset;
    left: clamp(-38px, calc(-38 / 1280 * 100vw), -1px);
    bottom: clamp(-13px, calc(-13 / 1280 * 100vw), -1px);
  }
}
.p-about-content-right-img {
  width: calc(72 / 375 * 100vw);
  height: auto;
  position: absolute;
  /* top: calc(32 / 375 * 100vw); */
  bottom: calc(-56 / 375 * 100vw);
  right: calc(-16 / 375 * 100vw);
}
@media screen and (min-width: 768px) {
  .p-about-content-right-img {
    top: unset;
    width: clamp(1px, calc(180 / 1280 * 100vw), 180px);
    right: clamp(-47px, calc(-47 / 1280 * 100vw), -1px);
    bottom: clamp(-13px, calc(-13 / 1280 * 100vw), -1px);
  }
}
/* フッター */
.l-footer {
  width: 100%;
  height: auto;
  margin-top: 0;
  padding: calc(80 / 375 * 100vw) 0 calc(40 / 375 * 100vw);
  background-color: rgba(236, 244, 245, 0.5);
}
@media screen and (min-width: 768px) {
  .l-footer {
    padding: clamp(1px, calc(104 / 1280 * 100vw), 104px) 0
      clamp(1px, calc(40 / 1280 * 100vw), 40px);
  }
}
.p-footer-content {
  display: flex;
  flex-direction: column;
  row-gap: calc(48 / 375 * 100vw);
  align-items: center;
  justify-content: space-around;
}
@media screen and (min-width: 768px) {
  .p-footer-content {
    row-gap: clamp(1px, calc(48 / 1280 * 100vw), 48px);
  }
}

.p-footer-contect-icon {
  width: calc(200 / 375 * 100vw);
  height: auto;
  aspect-ratio: 200/120;
}
@media screen and (min-width: 768px) {
  .p-footer-contect-icon {
    width: clamp(1px, calc(250 / 1280 * 100vw), 250px);
    aspect-ratio: 250/150;
  }
}
.p-footer-contect-sns {
  display: flex;
  width: fit-content;
  column-gap: calc(16 / 375 * 100vw);
}
@media screen and (min-width: 768px) {
  .p-footer-contect-sns {
    column-gap: clamp(1px, calc(16 / 1280 * 100vw), 16px);
  }
}

.p-footer-content .sns-link {
  display: block;
  width: calc(64 / 375 * 100vw);
  height: auto;
  aspect-ratio: 64/64;
}
@media screen and (min-width: 768px) {
  .p-footer-content .sns-link {
    width: clamp(1px, calc(64 / 1280 * 100vw), 64px);
  }
}
.p-footer-btn-contact {
  display: flex;
  width: fit-content;
  padding: calc(16 / 375 * 100vw) calc(40 / 375 * 100vw);
  column-gap: calc(16 / 375 * 100vw);
  align-items: center;
  background-color: var(--main-color);
  border-radius: 9999px;
  transition: 0.6s;
}
@media screen and (min-width: 768px) {
  .p-footer-btn-contact {
    padding: clamp(1px, calc(24 / 1280 * 100vw), 24px)
      clamp(1px, calc(40 / 1280 * 100vw), 40px);
    column-gap: clamp(1px, calc(16 / 1280 * 100vw), 16px);
  }
}
.p-footer-btn-contact img {
  display: block;
  width: calc(24 / 375 * 100vw);
  height: auto;
  aspect-ratio: 24/19;
}
@media screen and (min-width: 768px) {
  .p-footer-btn-contact img {
    width: clamp(1px, calc(24 / 1280 * 100vw), 24px);
  }
}

.p-footer-btn-contact p {
  font-size: calc(16 / 375 * 100vw);
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--white-color);
}
@media screen and (min-width: 768px) {
  .p-footer-btn-contact p {
    font-size: clamp(1px, calc(20 / 1280 * 100vw), 20px);
  }
}
.p-footer-producer {
  display: flex;
  flex-direction: column;
  row-gap: calc(16 / 375 * 100vw);
  align-items: center;
}
@media screen and (min-width: 768px) {
  .p-footer-producer {
    row-gap: clamp(1px, calc(16 / 1280 * 100vw), 16px);
  }
}
.p-footer-producer-produced {
  width: calc(67 / 375 * 100vw);
  height: auto;
  aspect-ratio: 67/16;
}
@media screen and (min-width: 768px) {
  .p-footer-producer-produced {
    width: clamp(1px, calc(93 / 1280 * 100vw), 93px);
    aspect-ratio: 93/22;
  }
}
.p-footer-producer-logo {
  width: calc(140 / 375 * 100vw);
  height: auto;
  aspect-ratio: 140/25;
}
@media screen and (min-width: 768px) {
  .p-footer-producer-logo {
    width: clamp(1px, calc(168 / 1280 * 100vw), 168px);
    aspect-ratio: 138/30;
  }
}
.p-footer-ig {
  width: 64px;
  height: auto;
  aspect-ratio: 64/64;
  margin-inline: auto;
}
.p-footer-copyright {
  display: block;
  font-size: calc(12 / 375 * 100vw);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--main-color);
}
@media screen and (min-width: 768px) {
  .p-footer-copyright {
    font-size: clamp(1px, calc(12 / 1280 * 100vw), 12px);
  }
}
.p-footer-memo {
  display: block;
  width: 100%;
  font-size: calc(12 / 375 * 100vw);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--main-color);
  text-align: justify;
}
@media screen and (min-width: 768px) {
  .p-footer-memo {
    font-size: clamp(1px, calc(12 / 1280 * 100vw), 12px);
  }
}
/*
 * カードスライドの無限横スクロール。
 * assets/js/slide.js が元の .p-card 一式を複製して .p-cards の末尾に追加し、
 * このクラスと下の2つのカスタムプロパティ（--p-cards-shift / --p-cards-duration）を
 * .p-cards へ付与する。JS が動かない環境ではこのクラスが付かず、
 * 元の並びが静止表示のまま残る（マーキー機能のみのプログレッシブエンハンスメント）。
 *
 * 複製は「1セット目」と「1セット目より後の追加セット」で役割が違う。
 *   ・1セット目の複製＝ループの基準。--p-cards-shift はこの複製の先頭カードの
 *     開始位置までの実測px（負の値）。元の並びと1セット目の複製は完全に同一のため、
 *     0 → shift へ動き切った瞬間、複製の先頭が元の開始位置とぴったり重なり、
 *     継ぎ目のジャンプ・空白が出ない。
 *   ・1セット目より後に追加されるセットは、画面右端に空白が出ないよう見た目を
 *     埋めるためだけのもの。移動距離（--p-cards-shift）には影響しない。
 * どちらも assets/js/slide.js のコメントに詳細がある。
 *
 * ％指定（-50%）を使わない理由：
 * -50% はトラック全体の幅の半分で、1セット分の幅とは一致しない（セットが2つのときは
 * gap の半分＝20px、画面幅が広い・枚数が少ないなどでセットが3つ以上になると大きく
 * ずれる）。よって実測pxを使う。
 *
 * ▼ 速度の調整は assets/js/slide.js の SPEED_PX_PER_SEC で行う（1か所）。
 *   --p-cards-duration はそこから算出してJSが渡す値で、ここでは直接いじらない。
 */
.p-cards--marquee {
  animation: p-cards-marquee var(--p-cards-duration, 40s) linear infinite;
}

@keyframes p-cards-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(var(--p-cards-shift, -50%));
  }
}

/*
 * 動きを減らす設定では、カードスライドを止める。
 * animation を外すと transform は初期値（動いていない状態＝先頭の並び）に戻るため、
 * 複製した分は .l-slide の overflow: hidden でクリップされ、
 * 見た目は「静止したカード一覧」になる（崩れない）。
 */
@media (prefers-reduced-motion: reduce) {
  .p-cards--marquee {
    animation: none;
  }
}

/* =========================================================================
   Utility
   ========================================================================= */

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

.u-noscroll-menu,
.u-noscroll {
  overflow: hidden;
}

/* =========================================================================
   Vendor override（lil-gui）

   FLOCSS に Vendor 層は無い。3層（Foundation / Layout / Object）のいずれにも
   属さないため、独立したセクションとして切り出している。
   knowledge/web-frontend/flocss-rule.md の要件5 は「プレフィックスが衝突した場合に
   名前空間を切るか例外として混ぜない」という規定で、本件に .lil-gui との
   プレフィックス衝突は無いため、この節を積極的に許可も禁止もしていない。
   FLOCSS 公式にも同ルールにも Vendor 層の定義は無い、というのが正確なところ。

   lil-gui のクラス名は借りるだけで、ライブラリ本体には手を入れない。
   ここに置いてよいのは「destyle のリセットが lil-gui を壊した箇所の修復」だけで、
   見た目の作り込みを足す場所ではない。
   ========================================================================= */

/*
 * lil-gui のスタイルは <style> として head の先頭（最初の link[rel=stylesheet] の直前）へ
 * 差し込まれる。よってこの link から読まれる規則は、同じ詳細度でも後勝ちになる。
 *
 * lil-gui は「ブラウザ既定のままでよい」ものを自分では指定していない箇所があり、
 * そこだけ destyle のリセットが素通しで効いてしまう。下は素通しになった4件の戻し。
 * 全70コントローラ（スライダ55・チェックボックス4・カラー4・プルダウン2・ボタン5）と
 * 全10フォルダの矩形を導入前後で突き合わせて洗い出した結果が、この4件。
 */

/*
 * パネル最上部のタイトル（＝ドラッグ／全体の開閉に使う横帯）。lil-gui では button 要素。
 * .lil-gui.root は flex column で、タイトルは flex-shrink: 1 の子。
 * パネルの中身が画面より高くなるとタイトルが潰され、その下限は min-height: auto ＝
 * 内容の最小高さで決まる。destyle の button { font: inherit } が line-height を
 * normal から 11px（.lil-gui の line-height: 1 由来）へ落とすため、この下限が下がる。
 * 実測（1440x900・全フォルダを開いた状態）：導入前 16px → 導入後 12px。
 * 帯を掴める高さが 4px 減る。line-height だけ戻せば 16px に一致する
 * （appearance を auto に戻しても 12px のままで、原因は line-height 側だと確認済み）。
 */
.lil-gui .title {
  line-height: revert;
}

/*
 * option（プルダウン）。opacity: 0 の <select> をクリック領域として .display に重ねる構造。
 *   ・destyle の appearance: none / padding: 0 と * { border-width: 0 } で
 *     ネイティブ select の内側の余白ごと潰れ、高さが 19px → 11px に縮む。
 *     20px ある行の上下 4.5px ずつがクリックに反応しなくなる（実測で確認）ので行の高さに戻す。
 *   ・destyle の select { color: inherit } で、開いた一覧の文字色が lil-gui の明るい
 *     文字色（#ebebeb）に変わる。一覧の背景は OS 既定（明るい）ため読めなくなる。
 *     select 自体は透明なので見た目に影響は無く、一覧だけブラウザ既定へ戻す。
 *   ・destyle の background: transparent も同様に一覧側へ効きうる。導入前の計算値は
 *     rgb(255,255,255)。文字色を戻せば実用上は足りる見込みだが、ネイティブの
 *     select ポップアップは OS レベルのウィンドウで、Playwright / Puppeteer の
 *     page.screenshot にも写らず実描画を観測する手段が無い。
 *     背景も戻しておけば導入前と完全に同値になり、確かめようのない差自体が消える。
 *     ※ select は opacity: 0 なので、background / color / font の3行は
 *       ページ上の見た目（＝一覧を開いていない状態）には影響しない。
 *       効くのは開いたポップアップの中だけ。
 */
.lil-gui .controller.option select {
  height: var(--widget-height);
  background: revert;
  color: revert;
  font: revert;
}

/*
 * function（実行ボタン。「開くアニメーションを再生」「JSONで書き出し」など5個）。
 * lil-gui はラベルの中央寄せをブラウザ既定の button に任せているため、
 * destyle の button { font: inherit; text-align: inherit } で左寄せ・行間 11px になる。
 */
.lil-gui .controller button {
  text-align: revert;
  line-height: revert;
}

/*  */
/* =========================================================================
   Intro Scroll Switch (画像固定・切り替え)
   ========================================================================= */

/*
 * 全体レイアウト：PC は左右に並べる（画面指定に合わせて反転）。
 * SP（767px以下）も同じ .wrapper-intro を使い、縦並び（上=テキスト／下=画像）にする。
 * SP 用の上書きは、この下の「Intro SP」のメディアクエリにまとめてある。
 */
/* 全体レイアウト：右に固定画像、左にスクロールテキスト */
.wrapper-intro {
  display: flex;
  flex-direction: row-reverse; /* 画像を右、テキストを左に配置する場合 */
  justify-content: space-between;
  position: relative;
  column-gap: clamp(1px, calc(18 / 1280 * 100vw), 18px);
}

/* スクロールするテキスト側 */
/* スクロールするテキスト側 */
.contents-intro {
  /* width: 30vw; */
  width: 100%;
}

/* スクロール量を確保するための余白設定 */
/* スクロールして中央に来るまでの間隔 */
.contents-intro div {
  /* padding-top: 50vh; */
}
/* 最後の要素が通過しきるための余白 */
.contents-intro div:last-child {
  /* padding-bottom: 50vh;  */
}

/* スクロール切り替えタイミング調整用の余白 */
.contents-intro > div {
  /* 各ステップの高さを画面の8割分確保する */
  min-height: 80vh;
  padding-top: 20vh;
}
/* 1つ目の要素を早めに表示 */
.contents-intro > div:first-child {
  padding-top: 20vh;
}
/* 最後の要素を通過させる余白 */
.contents-intro > div:last-child {
  padding-bottom: 60vh;
}

/* ★最重要：画像を画面に追従固定させるエリア */
/* 右側：スクロールで画面内に固定される画像エリア */
.images-intro {
  width: 100%;
  height: 100vh; /* 画面いっぱいの高さを確保 */
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky; /* 画面上部に張り付く指定 */
  top: 0;
}

/* 重ね合わせとアニメーションの設定 */
/* 画像の重ね合わせ（通常時は透明） */
.images-intro p {
  height: 400px;
  position: absolute; /* 画像同士をピッタリ同じ位置に重ねる */
  top: 50%;
  bottom: 0;
  left: 50%;
  right: 0;
  transform: translate(-50%, -50%);
  margin: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.6s ease,
    visibility 0.6s ease; /* 切り替わりを滑らかに */
}

/* JSで active がついたら表示する */
/* JSで active が付与されたら表示 */
.images-intro p.active {
  opacity: 1;
  visibility: visible;
}

/* 画像サイズの調整 */
.images-intro img {
  max-width: 100%;
  height: auto;
  display: block;
}
.contents-intro.p-intro_lo-item__text div {
  display: flex;
  /* height: 400px; */
  align-items: center;
}
.contents-intro.p-intro_lo-item__text div p {
  display: block;
}

/* =========================================================================
   Intro SP（767px以下）：上半分=テキスト／下半分=画像（画面の下に固定）
   PC（768px以上）には効かせない。上にある PC 向けの指定を、この中だけで上書きする。
   同じ詳しさのセレクタを上書きするため、必ず上の PC 向け指定より後ろに置くこと。
   ========================================================================= */
@media screen and (max-width: 767px) {
  /* DOM は画像が先。column-reverse で見た目は画像を下にする */
  .wrapper-intro {
    flex-direction: column-reverse;
  }

  /* テキスト側：p-intro_lo-item__text の display:flex（SP では横並びになる）を打ち消し、step を縦に積む */
  .contents-intro {
    display: block;
    flex: none;
    width: 100%;
  }
  /* 各 step の高さ＝上半分ぶん。テキストは上半分の中央に置く */
  .wrapper-intro .contents-intro > div,
  .wrapper-intro .contents-intro > div:first-child,
  .wrapper-intro .contents-intro > div:last-child {
    min-height: 50vh;
    min-height: 50svh;
    padding-top: 0;
    padding-bottom: 0;
    justify-content: center;
  }

  /*
   * 画像側：画面の下半分に固定する。
   * flex:none ... p-intro_lo-item__img の flex:1 で高さが 0 に潰れるのを防ぐ
   * top:auto  ... PC 用の top:0 が残ると上に張り付くため
   * 背景は上端 --intro-fade の高さで白へのグラデーション（テキストを境目でなじませて隠す）
   * 横幅は container の左右ガターぶん広げて画面幅いっぱいにする（雲の位置を元の画面端基準のまま使うため。
   * はみ出した雲で画面が横に広がらないよう overflow-x でクリップする。
   * overflow-x:clip が使えない古いブラウザは hidden に落ちる）
   */
  .images-intro {
    --intro-fade: 32px;
    flex: none;
    width: calc(100% + var(--sp-gutter));
    margin-inline: calc(var(--sp-gutter) / -2);
    height: 50vh;
    height: 50svh;
    position: sticky;
    top: auto;
    bottom: 0;
    z-index: 1;
    overflow-x: hidden;
    overflow-x: clip;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0,
      #fff var(--intro-fade)
    );
  }

  /* 重ね合わせの p：PC 用の height:400px / bottom:0 / right:0 を外し、中の canvas の大きさに任せて中央に置く */
  .images-intro p {
    height: auto;
    bottom: auto;
    right: auto;
  }
  /* canvas：Lottie の縦横比（480x430）のまま、下半分の高さと container の幅（画面幅 - ガター）の両方に収める */
  .images-intro canvas {
    display: block;
    width: min(100% - var(--sp-gutter), calc(50vh * 480 / 430));
    width: min(100% - var(--sp-gutter), calc(50svh * 480 / 430));
    height: auto;
    aspect-ratio: 480 / 430;
    margin-inline: auto;
  }

  /*
   * 下側の雲（dl・dr）：画像エリアの疑似要素で描く。z-index:-1 で白い背景の上・Lottie の下に入る
   * 元の .p-intro__bg-obj--dl / --dr（HTML）は SP では非表示。上側3つ（ul・uc・ur）は元のまま
   * 画像エリアは画面幅いっぱいなので、位置・大きさは元の dl・dr（画面端基準）と同じ値を使う
   */
  .images-intro::before,
  .images-intro::after {
    content: "";
    position: absolute;
    bottom: 0;
    z-index: -1;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    opacity: 0.7;
    transform-origin: center bottom;
    animation: animation-fuwafuwa-scale 4s ease-out infinite;
    pointer-events: none;
  }
  .images-intro::before {
    width: calc(66 / 375 * 100vw);
    aspect-ratio: 66 / 69;
    left: calc(14 / 375 * 100vw);
    background-image: url("../images/intro-bg-cloud-dl@2x.webp");
  }
  .images-intro::after {
    width: calc(180 / 375 * 100vw);
    aspect-ratio: 180 / 138;
    right: calc(-31 / 375 * 100vw);
    background-image: url("../images/intro-bg-cloud-dr@2x.webp");
  }
  .p-intro__bg-objects .p-intro__bg-obj--dl,
  .p-intro__bg-objects .p-intro__bg-obj--dr {
    display: none;
  }
}

/*
 * 動きを減らす設定のときは、ふわふわ（雲・湯気）の動きを止める。
 * 止めた状態は、各要素の基本の opacity・transform のまま見える（消えない・位置もずれない）。
 * .fuwafuwa-up / .fuwafuwa-scale は #sec-intro・忘れられない一軒の雲・KV の湯気に付いている。
 * .images-intro::before / ::after は #sec-intro の SP の下側の雲（同じ keyframes を使う）。
 * ※ 上の「Intro SP」ブロックの animation より後ろに置くこと（同じ詳しさのため、記述順で上書きする）。
 */
@media (prefers-reduced-motion: reduce) {
  .fuwafuwa-up,
  .fuwafuwa-scale,
  .images-intro::before,
  .images-intro::after {
    animation: none;
  }
}
/* =========================================================================
   Intro 背景オブジェクト追従固定 & 個別アニメーション
   ========================================================================= */

#sec-intro {
  position: relative;
  z-index: 1;
}

#sec-intro .l-container {
  position: relative;
  z-index: 2;
}

/* 追従固定の設定 */
.p-intro__bg-objects {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  margin-bottom: -100vh; /* 高さ打ち消し */
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.p-intro__bg-obj {
  position: absolute;
  opacity: 0.7;
}
.p-intro__bg-obj img {
  width: 100%;
  height: auto;
  display: block;
}

.p-intro__bg-obj--ul {
  width: calc(154 / 375 * 100vw);
  height: auto;
  aspect-ratio: 154/159;
  position: absolute;
  top: calc(48 / 375 * 100vw);
  left: calc(-20 / 375 * 100vw);
}
@media screen and (min-width: 768px) {
  .p-intro__bg-obj--ul {
    width: clamp(1px, calc(340 / 1280 * 100vw), 340px);
    aspect-ratio: 340/432;
    top: clamp(1px, calc(160 / 1280 * 100vw), 160px);
    left: 0px;
  }
}

.p-intro__bg-obj--uc {
  width: calc(53 / 375 * 100vw);
  height: auto;
  aspect-ratio: 53/51;
  position: absolute;
  top: calc(41 / 375 * 100vw);
  left: 42%;
}
@media screen and (min-width: 768px) {
  .p-intro__bg-obj--uc {
    width: clamp(1px, calc(157 / 1280 * 100vw), 157px);
    aspect-ratio: 157/153;
    top: clamp(1px, calc(121 / 1280 * 100vw), 121px);
  }
}

.p-intro__bg-obj--ur {
  width: calc(105 / 375 * 100vw);
  height: auto;
  aspect-ratio: 105/111;
  position: absolute;
  top: calc(122 / 375 * 100vw);
  right: calc(8 / 375 * 100vw);
}
@media screen and (min-width: 768px) {
  .p-intro__bg-obj--ur {
    width: clamp(1px, calc(291 / 1280 * 100vw), 291px);
    aspect-ratio: 291/309;
    top: clamp(1px, calc(104 / 1280 * 100vw), 104px);
    right: clamp(1px, calc(16 / 1280 * 100vw), 16px);
  }
}
.p-intro__bg-obj--dl {
  width: calc(66 / 375 * 100vw);
  height: auto;
  aspect-ratio: 66/69;
  position: absolute;
  bottom: 0px;
  left: calc(14 / 375 * 100vw);
}
@media screen and (min-width: 768px) {
  .p-intro__bg-obj--dl {
    width: clamp(1px, calc(192 / 1280 * 100vw), 192px);
    aspect-ratio: 192/199;
    left: clamp(1px, calc(120 / 1280 * 100vw), 120px);
  }
}
.p-intro__bg-obj--dr {
  width: calc(180 / 375 * 100vw);
  height: auto;
  aspect-ratio: 180/138;
  position: absolute;
  bottom: 0px;
  right: calc(-31 / 375 * 100vw);
}
@media screen and (min-width: 768px) {
  .p-intro__bg-obj--dr {
    width: clamp(1px, calc(350 / 1280 * 100vw), 350px);
    aspect-ratio: 350/272;
    right: clamp(1px, calc(40 / 1280 * 100vw), 40px);
  }
}