/* ============================================================
   SP版レイアウト（900px以下）

   PC版は 1920px のデザインを画面幅に比例縮小しているだけなので、
   375px では本文30px が 5.9px まで縮んで読めない。SP は別物として組む。

   ■ 前回の失敗と、その反省
     クラス名のホワイトリストで position:static を当て、DOM順に流していた。
     (a) 挙げ忘れたクラスが PC座標のまま取り残される（.foot を忘れて
         フッター下に2万pxの空白ができた）
     (b) XD は「同種要素をまとめて書き出す」ので DOM順＝読み順ではない
         （VALUE が「挑 自 リ 戦 責自走 スペクト」と読めていた）
     という2点で原理的に破綻していた。

   ■ 今回の方針
     ・リセットは :where(*) で全子孫に効かせる（挙げ忘れが起きない）
     ・並び順は HTML の data-o と CSS の order で作る（DOMは動かさない）
     ・トーンは縮めるのではなく振り切る。巨大英字は裁ち落とし、
       写真と色面はフルブリード、流れる写真帯は残す

   ■ PC版には一切影響しない（全部このメディアクエリの中）
   ============================================================ */

@media (max-width: 900px) {

/* ------------------------------------------------------------
   1. トークン
   ------------------------------------------------------------ */
:root {
  /* 文字：型スケールの段にだけ着地させる（landing-page-design B1）。
     以前は 11/13/15/17/19/22/26/34/44/56/64px が場当たりに混ざっていた */
  --t-xs:   1.2rem; --lh-xs:   1.6rem;
  --t-sm:   1.4rem; --lh-sm:   2rem;
  --t-base: 1.6rem; --lh-base: 2.4rem;
  --t-lg:   1.8rem; --lh-lg:   2.8rem;
  --t-xl:   2rem;   --lh-xl:   2.8rem;
  --t-2xl:  2.4rem; --lh-2xl:  3.2rem;
  --t-3xl:  3rem;   --lh-3xl:  3.6rem;
  --t-4xl:  3.6rem; --lh-4xl:  4rem;
  --t-5xl:  4.8rem; --lh-5xl:  1;
  --t-6xl:  6rem;   --lh-6xl:  1;
  /* 和文が複数行に流れるところだけ行送りを緩める。
     スケールの組行送り（16/24 など）は欧文向けで、日本語では詰まって読めない */
  --lh-ja: 1.8;

  /* 役割への割り当て */
  --sp-display:   var(--t-6xl);   /* 節の巨大英字 */
  --sp-sub:       var(--t-5xl);   /* MERIT1 など節の中の英字 */
  --sp-name:      var(--t-4xl);   /* 社員名 */
  --sp-h2:        var(--t-3xl);   /* 英字を持たない節の見出し */
  --sp-statement: var(--t-2xl);
  --sp-label:     var(--t-xl);    /* 色帯に乗る和文ラベル */
  --sp-lead:      var(--t-lg);
  --sp-body:      var(--t-base);
  --sp-small:     var(--t-sm);
  --sp-caption:   var(--t-xs);

  /* 余白：この13段以外は使わない（B2） */
  --sp-25: .2rem;   --sp-50: .4rem;   --sp-75: .8rem;  --sp-100: 1.2rem;
  --sp-200: 1.6rem; --sp-300: 2.4rem; --sp-400: 3.2rem; --sp-500: 4rem;
  --sp-600: 4.8rem; --sp-700: 6.4rem; --sp-800: 8rem;   --sp-900: 9.6rem;
  --s1: var(--sp-75);  --s2: var(--sp-200); --s3: var(--sp-300);
  --s4: var(--sp-500); --s5: var(--sp-700); --s6: var(--sp-900);

  /* 角丸：規定値のみ（B3）。入れ子は inner = outer - gap */
  --r-sm: .2rem; --r-md: .6rem; --r-lg: .8rem; --r-xl: 1.2rem; --r-full: 9999px;

  /* 動き：既定のイージングは使わない（B7） */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur:  450ms;   /* 800ms は体感が重かった */

  --sp-pad: var(--sp-300);  /* 文字の左右余白。写真と色面は 0 */
}

html { font-size: 10px; }
body { overflow-x: hidden; }

/* ------------------------------------------------------------
   2. 土台：絶対配置をやめる
   ホワイトリストではなく全子孫。挙げ忘れが起きない。
   ------------------------------------------------------------ */
.page:has(.sec) { position: static; width: auto; height: auto; margin: 0; }
body:has(.sec) .body-layer { position: static; width: auto; top: auto; }
body:has(.sec) .kv { position: relative; }

.sec, .sec :where(*) {
  position: static;
  left: auto; top: auto; right: auto; bottom: auto;
  width: auto; height: auto; max-width: 100%;
  margin: 0;
}
/* XD再現の transform（.a.r の translateX(-100%)、.dl の scaleX()）を止める。
   :where() は詳細度0なので (0,3,0) の .a.r.dl に負ける。ここだけ実セレクタで書く。
   translate / scale は出現演出が使うプロパティなので触らない */
.sec .a, .sec .a.r, .sec .a.c, .sec .a.dl, .sec .a.r.dl, .sec .a.c.dl,
.sec .b, .sec .ol, .sec .card, .sec .fill, .sec .rule,
.sec .opt, .sec .opt--check, .sec .req, .sec .inp, .sec .file, .sec .submit {
  transform: none;
}
.sec .a { white-space: normal; text-align: left; }
.sec .a.w { white-space: pre-line; }   /* 空行で段落を作っている本文だけ改行を残す */
/* JS が空行で割った段落。画面幅で自然に折り返させる */
.sec .sp-p { display: block; white-space: normal; }
.sec .sp-p + .sp-p { margin-top: var(--s2); }
/* 社員プロフィールは「ラベル＋値」を1行1項目で保つ */
.sec .a.member-prof { white-space: pre-line; }
/* スパン保持方式の段落切れ目 */
.sec .sp-gap { display: block; height: var(--sp-300); }
/* 本文の強調。--s（PCの字面拡大）はSPでは inherit で殺しているので、
   相対値で一回り立てる。太さと色はそのまま通る */
.sec .a span.em { font-size: 1.15em !important; }
/* 代表メッセージ見出しの「選ばれる」（明朝・墨）はさらに立てる */
.sec--message h3 span.mi { font-size: 1.35em !important; }
.sec img { max-width: 100%; }

/* SPで出さないもの：PC専用の骨組みと、狭い画面で邪魔になる装飾 */
.sec :where(.tick, .dots, .tri, .rule, .card.pill, .value-plate, .flow__arrow),
.sec .form-card,           /* PC用の赤い角丸枠。高さが固定なので残すと空白になる */
.sec .u--rail,
.sec .fill,
.sec .card.rad10 { display: none; }

/* ------------------------------------------------------------
   3. セクションとユニット
   ------------------------------------------------------------ */
/* 直下の子にも order を効かせたいので flex にする（ONE DAY の導入文の繰り上げ）。
   間隔は margin ではなく gap で作る。`* + *` は DOM順で数えるので、
   非表示の .fill が先頭にいる節だけ余白が1段ぶん増えてしまう */
.sec {
  display: flex; flex-direction: column;
  --gap: var(--s5); gap: var(--gap);   /* 帯の食い込み量が gap に依存するので変数で持つ */
  padding: var(--s5) 0;
  background: var(--base);
  overflow: hidden;              /* 裁ち落とした見出しの横あふれを切る */
}
.sec > * { padding-inline: var(--sp-pad); }

.u { display: flex; flex-direction: column; gap: var(--s3); padding-inline: var(--sp-pad); }
.sec > .u { padding-inline: 0; }
.u > * { padding-inline: var(--sp-pad); }
.u--head { gap: var(--sp-50); }

/* 並び順は data-o で指定（DOMは動かさない）
   詳細度をセレクタごとに揃えること。`.sec [data-o]` は (0,2,0) で
   `[data-o="1"]` (0,1,0) より強く、既定値が全部を上書きしてしまう */
.sec [data-o="1"]{order:1}  .sec [data-o="2"]{order:2}  .sec [data-o="3"]{order:3}
.sec [data-o="4"]{order:4}  .sec [data-o="5"]{order:5}  .sec [data-o="6"]{order:6}
.sec [data-o="7"]{order:7}  .sec [data-o="8"]{order:8}  .sec [data-o="9"]{order:9}
.sec [data-o="10"]{order:10} .sec [data-o="11"]{order:11} .sec [data-o="12"]{order:12}
.sec [data-o="13"]{order:13} .sec [data-o="14"]{order:14}

/* ------------------------------------------------------------
   4. 文字
   ------------------------------------------------------------ */
.sec .a {
  font-size: var(--sp-body); line-height: var(--lh-ja);
  letter-spacing: .02em; font-weight: 400; color: var(--ink-3);
  text-wrap: pretty;            /* 最終行に語がひとつだけ残らないように（B1） */
}
.sec .a span { font-size: inherit !important; line-height: inherit; }
.sec .a span.mi { font-family: var(--mincho); font-weight: 800;
                  white-space: nowrap; }  /* 「存在意義」の途中で折らない */

/* 巨大英字。左端まで裁ち落とす。これがこのサイトの主役 */
.sec .a.dl {
  font-family: var(--display); font-weight: 400;
  font-size: var(--sp-display); line-height: var(--lh-6xl);
  letter-spacing: -.02em; color: var(--red); text-wrap: balance;
  margin-inline-start: calc(var(--sp-pad) * -1 - var(--sp-50));
  padding-inline: 0; padding-inline-start: var(--sp-pad);
}
/* 見出し直下の和文ラベル。
   XDでは「789x135 の色ベタ帯の上に和文が乗り、巨大英字がその上端に食い込む」
   という型が全セクションで繰り返されている。SPでもその帯ごと再現する。
   帯は画面左端まで裁ち落とし、文字幅ぶんで終わらせる。
   巨大英字は .a.r.disp.gray.dl のような形でここにも当たるので .dl を外す */
.sec .a.r.disp:not(.dl):not([data-role="lead"]),
.sec .a.c.disp:not(.dl):not([data-role="lead"]),
.sec .a.disp:not(.dl):not([data-role="lead"]) {
  align-self: start; width: fit-content; max-width: 100%;
  font-size: var(--sp-label); font-weight: 700;
  letter-spacing: .04em; line-height: var(--lh-xl);
  background: var(--red); color: var(--base);
  /* 帯そのものは画面端まで抜くが、文字は本文と同じ位置まで入れる
     （負のマージンを足すと文字が端に貼り付いて窮屈になる） */
  padding: var(--sp-100) var(--sp-pad);
}
.sec > .a.r.disp:not(.dl):not([data-role="lead"]),
.sec > .a.c.disp:not(.dl):not([data-role="lead"]),
.sec > .a.disp:not(.dl):not([data-role="lead"]) {
  margin-top: calc(var(--gap) * -1 + var(--sp-50));   /* 節直下は gap を打ち消して英字に寄せる */
}
/* 帯と文字の配色は、XDが既にクラスで書き分けている。
   灰地の節 → 赤い帯に灰文字（.disp.gray）／赤地の節 → 灰の帯に赤文字（.disp.red）*/
.sec .a.disp.gray:not(.dl):not([data-role="lead"]) { background: var(--red);  color: var(--base); }
.sec .a.disp.red:not(.dl):not([data-role="lead"])  { background: var(--base); color: var(--red);  }
/* 900/black は使わない（B1）。XD の w9 も 700 で止める */
.sec .a.w7, .sec .a.w8, .sec .a.w9 { font-weight: 700; }
/* 巨大英字を持たない節の見出し（会社概要・採用情報）。本文と同じ15pxでは見出しに見えない */
.sec > h2.a:not(.dl) {
  font-size: var(--sp-h2); line-height: var(--lh-3xl); font-weight: 700;
  color: var(--red); letter-spacing: .04em; text-wrap: balance;
}
.sec h3.a.w7 { font-size: var(--sp-statement); line-height: var(--lh-ja);
               color: var(--ink); text-wrap: balance; }
.sec .a.w8   { font-size: var(--sp-lead); line-height: var(--lh-ja); }

/* アウトライン文字（VISION / MISSION / VALUE のラベル、フッターのリンク） */
.sec .ol { display: block; }
.sec .ol svg { width: auto; height: var(--t-2xl); display: block; max-width: 100%; }

/* ------------------------------------------------------------
   5. 写真：全部フルブリード（左右の余白を切らない）
   ------------------------------------------------------------ */
.sec .b {
  display: block; padding-inline: 0;
  width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
}
.sec .b > img { width: 100%; height: 100%; object-fit: cover; }

/* 流れる写真帯は残す。横に流れる帯は縦スクロールのSPでこそ効く */
.sec .clip-x.strip {
  display: block; position: relative; padding-inline: 0;
  /* style.css の .page .clip-x (0,2,0) が top:calc(--boxy) を持っている。
     relative でも offset は効くので、明示的に打ち消さないと
     PC座標ぶん（数千px）下の別セクションへ流れてしまう */
  top: 0; left: 0;
  width: 100%; height: var(--sp-900); overflow: hidden;
}
.sec .strip__track {
  position: absolute; top: 0; left: 0; height: 100%;
  display: flex; opacity: .3;
}
.sec .strip__track img {
  flex: none; width: 16rem; height: var(--sp-900);
  margin-right: var(--sp-50); object-fit: cover;
}

/* ------------------------------------------------------------
   6. ヘッダー
   ------------------------------------------------------------ */
.head-abs { position: fixed; left: 0; width: 100%; height: var(--sp-700); }
.head-shift { position: static; width: auto; height: 100%; translate: none; }
.head-bar { position: absolute; left: 0; top: 0; width: 100%; height: var(--sp-700);
            border-radius: 0; opacity: .95; }
.head-abs .ol, .head-abs .head__btn { display: none; }
/* 「RECRUIT SITE」はPC座標のまま残るとヘッダー帯の外に浮く。
   56pxの帯にロゴと並べる余地は無いので、SPでは出さない */
.head-abs .a { display: none; }
.head-abs, .head-abs--top { color: var(--red); }
.head-abs--top .head-bar { opacity: .95; }
.head-abs--top .logo-swap__on-kv  { opacity: 0; }
.head-abs--top .logo-swap__on-bar { opacity: 1; }
/* ロゴ。entry / privacy のヘッダーは .logo-swap を持たない素の a.b なので、
   直下セレクタでも同じ位置・同じ大きさに揃える（トップと統一） */
.head-abs .logo-swap,
.head-abs .head-shift > a.b {
  position: absolute; left: var(--sp-pad); top: var(--sp-200);
  width: var(--sp-900); height: var(--sp-400);
}
.head-abs .logo-swap img,
.head-abs .head-shift > a.b img {
  position: absolute; inset: 0; width: 100%; height: auto;
}
.burger {
  /* style.css の left:182.9rem を消さないと画面外に出たままになる */
  position: absolute; left: auto; right: var(--sp-75); top: 0;
  width: var(--sp-600); height: var(--sp-700);
  display: grid; align-content: center; justify-items: center;
}
.burger i {
  width: var(--sp-300); height: var(--sp-25); margin-bottom: var(--sp-75);
  transition: rotate var(--dur) var(--ease), translate var(--dur) var(--ease),
              opacity 300ms var(--ease), scale 300ms var(--ease);
}
.burger i:last-child { margin-bottom: 0; }
/* 開くと線が回ってXになる。消えて別の×が出るのではない（B7） */
body:has(#site-menu:popover-open) .burger i:first-child { translate: 0 var(--sp-100); rotate: 45deg; }
body:has(#site-menu:popover-open) .burger i:nth-child(2) { opacity: 0; scale: .4 1; }
body:has(#site-menu:popover-open) .burger i:last-child { translate: 0 calc(var(--sp-100) * -1); rotate: -45deg; }

/* ------------------------------------------------------------
   6b. ハンバーガーメニュー
   style.css は max(px, rem) で下限を持たせているが、SPでは
   1rem = 10px 固定なので rem 側が採用されて全部が大きすぎる。
   （リンクのSVGは 5.2rem = 52px 高 → 最長ラベルが 578px になって画面外へ）
   ------------------------------------------------------------ */
.menu { transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease),
                    overlay var(--dur) allow-discrete, display var(--dur) allow-discrete; }
.menu::backdrop { backdrop-filter: blur(2.4rem); background: rgba(0, 0, 0, .5); }
.menu__inner {
  padding: var(--sp-800) var(--sp-pad) var(--sp-500);
  justify-content: center; gap: var(--sp-500);
}
.menu__logo { top: var(--sp-200); width: var(--sp-900); }
.menu__close {
  top: var(--sp-75); right: var(--sp-75);
  width: var(--sp-600); height: var(--sp-600);   /* 48px = 指で押せる */
}
/* 閉じる× はハンバーガーと同じ中心（右8px・高さ中央）に置いてある。
   開いた瞬間は水平2本＝ハンバーガーの姿から始めて、回してXにする。
   ポップオーバーは最前面に出るので本体のバーガーは隠れる。
   「線が回ってXになる」体験はこちらで受け持つ（B7） */
.menu__close i {
  left: var(--sp-100); width: var(--sp-300); height: var(--sp-25);
  transition: rotate var(--dur) var(--ease), translate var(--dur) var(--ease);
}
.menu:popover-open .menu__close i:first-child { rotate: 45deg;  translate: 0 0; }
.menu:popover-open .menu__close i:last-child  { rotate: -45deg; translate: 0 0; }
@starting-style {
  .menu:popover-open .menu__close i:first-child { rotate: 0deg; translate: 0 calc(var(--sp-75) * -1); }
  .menu:popover-open .menu__close i:last-child  { rotate: 0deg; translate: 0 var(--sp-75); }
}
.menu__list { gap: var(--sp-300); }
/* リンクは見えない箱の下から順に立ち上がる（B7 staggered mask reveal） */
.menu__list li { overflow: hidden; }
.menu__list li a, .menu__entry {
  translate: 0 var(--sp-600); opacity: 0;
  transition: translate var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.menu:popover-open .menu__list li a,
.menu:popover-open .menu__entry { translate: 0 0; opacity: 1; }
.menu__list li:nth-child(1) a { transition-delay: 40ms; }
.menu__list li:nth-child(2) a { transition-delay: 80ms; }
.menu__list li:nth-child(3) a { transition-delay: 120ms; }
.menu__list li:nth-child(4) a { transition-delay: 160ms; }
.menu__list li:nth-child(5) a { transition-delay: 200ms; }
.menu__list li:nth-child(6) a { transition-delay: 240ms; }
.menu__list li:nth-child(7) a { transition-delay: 280ms; }
.menu__list li:nth-child(8) a { transition-delay: 320ms; }
.menu__entry { transition-delay: 360ms; }
/* 最長ラベル（RYOMAで働くメリット）の比率は 325.34:29.25。
   高さ 2.4rem なら 26.7rem で、左右余白を引いた 32.7rem に収まる */
.menu__list svg { height: var(--t-2xl); max-width: 100%; }
.menu__list a { display: block; padding: var(--sp-50) 0; }
.menu__entry {
  width: min(100%, 24rem); height: var(--sp-600);
  font-size: var(--t-lg); font-weight: 700; border-radius: var(--r-md);
}
.menu__splatter { width: 20rem; }

/* ------------------------------------------------------------
   7. FV
   ------------------------------------------------------------ */
/* 横長の kv.webp（2880x1620・4人が横並び）を、縦画面では 2x2 に組み直す。
   画像そのものは触らず background-position だけで4分割する。
   background-size の X は 400%、Y は auto にして縦横比を保つ */
body:has(.sec) .kv {
  margin-top: var(--sp-700);        /* 固定ヘッダーと重ねない */
  height: 78svh; min-height: 48rem;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 0; background: var(--ink);   /* 写真は継ぎ目なしで敷き詰める */
}
body:has(.sec) .kv > img { display: none; }
/* 白いロゴタイプを乗せるので、写真は一段落とす。
   グラデーションは使わず一様な暗幕（B4）。絶対配置なのでグリッドの升は増えない */
body:has(.sec) .kv::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(11, 2, 0, .38); pointer-events: none;
}
body:has(.sec) .kv-tile {
  display: block; min-width: 0; min-height: 0;
  background-image: url(../assets/img/kv.webp);
  /* 元画像は写真4枚の間に仕切り線が焼き込まれている（実測 715 / 1445px）。
     4等分の窓（400%）だと仕切りをまたいで黒い縁が写るため、
     420% に拡大して各写真の内側だけを窓に収める */
  background-size: 420% auto; background-repeat: no-repeat;
}
body:has(.sec) .kv-tile:nth-of-type(1) { background-position: 0.7%  28%; }
body:has(.sec) .kv-tile:nth-of-type(2) { background-position: 33.6% 28%; }
body:has(.sec) .kv-tile:nth-of-type(3) { background-position: 66.6% 28%; }
body:has(.sec) .kv-tile:nth-of-type(4) { background-position: 99.2% 28%; }

/* ロゴタイプが赤い RYOMA RECRUIT の上端に食い込む。
   PC実測で 92px の字箱に 54px（59%）入っているので、その比率を再現する。
   DOM順が .a → .b なので、重ねれば白いロゴタイプが自然に前へ出る */
body:has(.sec) .fv-text {
  position: absolute; top: var(--sp-700); left: 0; right: 0; bottom: auto;
  height: 78svh; min-height: 48rem;
  /* 広告と同じく、文字は 2x2 の継ぎ目（中央）に重ねる */
  display: grid; align-content: center; justify-items: stretch;
  padding: 0; pointer-events: none;
}
body:has(.sec) .fv-text .b {
  order: 1; position: static; height: auto; aspect-ratio: auto;
  width: 92%; margin: 0 auto;     /* 広告はほぼ全幅・中央揃え */
  z-index: 1;   /* order は描画順も変える。重なりでは白ロゴタイプを最前面に */
}
body:has(.sec) .fv-text .b img { position: static; width: 100%; height: auto; }
body:has(.sec) .fv-text .a.kv-recruit {
  order: 2; position: static; display: block; text-align: center;
  width: 100%;   /* 箱が字幅に縮むと text-align が中央に効かない */
  font-size: var(--t-6xl); line-height: var(--lh-6xl);   /* 60px。375px幅に収まる */
  letter-spacing: -.02em; white-space: nowrap;
  transform: none; translate: none; opacity: .9;
  /* ロゴタイプの下端に少しだけ潜り込ませる */
  margin: calc(var(--sp-300) * -1) 0 0; padding: 0;
}

/* SCROLL キュー。FV下端の中央で、線が上から伸びて消える */
body:has(.sec) .fv-text .scroll-cue {
  display: flex; position: absolute;
  left: 50%; bottom: var(--sp-200); translate: -50% 0;
  flex-direction: column; align-items: center; gap: var(--sp-75);
  color: #fff; font-family: var(--display); font-weight: 400;
  font-size: var(--sp-caption); line-height: var(--lh-xs);
  letter-spacing: .3em; text-indent: .3em;   /* 字送りぶんの中心ずれを戻す */
  margin: 0;
}
body:has(.sec) .fv-text .scroll-cue::after {
  content: ""; width: .2rem; height: var(--sp-500); background: #fff;
  transform-origin: top;
  animation: sp-scroll-cue 1.8s var(--ease) infinite;
}
@keyframes sp-scroll-cue {
  0%   { scale: 1 0; opacity: 1; }
  45%  { scale: 1 1; opacity: 1; }
  100% { scale: 1 1; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body:has(.sec) .fv-text .scroll-cue::after { animation: none; }
}

/* ------------------------------------------------------------
   8. 動きと状態（B7 / B9）
   既定のイージングは使わない。出現は重さのあるフェードアップに統一する。
   ------------------------------------------------------------ */
.js .sec [data-rv] {
  transition-property: opacity, translate, scale, clip-path, filter;
  transition-duration: var(--dur);
  transition-timing-function: var(--ease);
  translate: 0 var(--sp-300);      /* 24px 下から。64px は待たされ感が出る */
  filter: blur(.6rem);
  opacity: 0;
}
.js .sec [data-rv].is-in { translate: 0 0; filter: blur(0); opacity: 1; }
.js .sec [data-rv="reveal"] > img { transition: var(--dur) var(--ease); }

/* 長文の折りたたみ（JSがSPでだけ付与する）。
   下端は節の地色へフェードさせて「続きがある」ことを見せる */
.sec .sp-clamp { max-height: 20rem; overflow: hidden; position: relative; }
.sec .sp-clamp::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--sp-700); pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--fade, var(--base)));
}
.sec--member .sp-clamp::after { --fade: var(--red); }
.sec .sp-hidden { display: none; }
.sp-more {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-50);
  min-height: var(--sp-600);                      /* 48px = 指で押せる */
  margin: calc(var(--sp-200) * -1) var(--sp-pad) 0;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--gothic); font-weight: 700;
  font-size: var(--sp-small); line-height: var(--lh-sm);
  letter-spacing: .12em; color: var(--red);
  transition: scale 300ms var(--ease);
}
.sp-more::after { content: "＋"; font-weight: 400; }
.sp-more:active { scale: .96; }
.sec--member .sp-more { color: #fff; }

/* 触ったときの手応え（B9） */
.burger, .cta, .submit, .menu__entry, .menu__close,
.sec--footer .foot-link, .qa summary {
  transition: scale 300ms var(--ease), background-color 300ms var(--ease);
}
.burger:active, .cta:active, .submit:active,
.menu__entry:active, .menu__close:active,
.sec--footer .foot-link:active, .qa summary:active { scale: .98; }

@media (prefers-reduced-motion: reduce) {
  .js .sec [data-rv],
  .js .sec [data-rv].is-in { translate: none; filter: none; transition: none; }
  .menu__list li a, .menu__entry { translate: none; opacity: 1; transition: none; }
}

} /* @media */