@charset "UTF-8";
/* =========================================================
   260917_A04638_FURFUR_ふわもこ企画 ／ 掲載先: USAGI ONLINE
   ベース: templates/feature_base.html（1rem = SPカンプ10px・本文の器 75rem）
   寸法は src/text/elements.txt の正値から。推測値は書かない。
   ========================================================= */

body { margin: 0; } /* 外部CSSへ出しても落とさない（規約§7-1・#667） */

/* ===== CMS組み込み用の必須リセット（規約§6 / docs/cms-embed.md §3）＝案件で消さない =====
   当てる相手はLP本体でなくCMS側の器なので .feature で包まない。 */
.l-container { width: 100%; }
.l-footer, .pc-footer { margin: 0; padding: 0; }
.l-container::after { content: ""; }
sup, sub { position: static; top: auto; }

/* ===== リキッド基準＝SPカンプ(750px)の実測px ÷10 で書く（1rem = カンプ10px） ===== */
html { scroll-behavior: smooth; font-size: 1.3333333vw; } /* 1rem=5px@375（=カンプ10px） */

/* =========================================================
   出現アニメ（anim-scroll-reveal）
   HTML側は目印クラスだけ・JSは .is-inview を付けるだけ・動きはここが持つ。
   点火クラスは is-inview（is-active は Splide が自動付与して衝突する＝規約§8-11）。
   ========================================================= */
html.js-anim .js-reveal { opacity: 0; transition: opacity 1s ease-out, filter 1s ease-out; }
html.js-anim .js-reveal.is-inview { opacity: 1; }

/* 青枠＝その場でふわっと表示（移動なし・ぼかしから）＝指示書 I-05。
   参考ページ(260313)の .js-blur は blur(10 * --formula) ＝ カンプ10px = 1rem */
html.js-anim .js-blur { filter: blur(1rem); }
html.js-anim .js-blur.is-inview { filter: blur(0); }

/* 緑枠＝矢印の方向へふわっと表示＝指示書 I-06。
   ★オフセットは監視対象（外側）でなく中の img に掛ける
   （anim-scroll-reveal 落とし穴6＝祖先の overflow: clip で交差が消えると永久に発火しない）。
   向きは指示書の矢印の頭と引き出し線の位置関係で確定（_tools 側の実測・phase5-plan.md §3）。 */
html.js-anim .js-fade-to-left img,
html.js-anim .js-fade-to-right img { transition: transform 1s ease-out, opacity .3s; }
html.js-anim .js-fade-to-left img { transform: translateX(3rem); }   /* 右から左へ入る（矢印←） */
html.js-anim .js-fade-to-right img { transform: translateX(-3rem); } /* 左から右へ入る（矢印→） */
html.js-anim .js-fade-to-left.is-inview img,
html.js-anim .js-fade-to-right.is-inview img { transform: none; }

/* QA検証用フック(?noanim)＝全アニメを完了状態で固定 */
.is-noanim .js-reveal { transition: none !important; opacity: 1 !important; filter: none !important; }
.is-noanim .js-fade-to-left img, .is-noanim .js-fade-to-right img { transition: none !important; transform: none !important; }
.is-noanim .leftcont__box { transition: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }

/* reduced-motion フォールバック＝OSの「視差効果を減らす」設定では完了状態で見せる（a11y）。
   :not(.is-forceanim) は実機切り分け用フック ?anim=1（Issue #228）。 */
@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim).js-anim .js-reveal { transition: none !important; opacity: 1 !important; filter: none !important; }
  html:not(.is-forceanim).js-anim .js-fade-to-left img,
  html:not(.is-forceanim).js-anim .js-fade-to-right img { transition: none !important; transform: none !important; }
  html:not(.is-forceanim) .leftcont__box { transition: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
  html:not(.is-forceanim) { scroll-behavior: auto; }
}

/* =========================================================
   特集共通枠
   ========================================================= */
.feature { box-sizing: border-box; color: #000; margin: 0 auto; overflow: clip; position: relative; width: 100%;
  /* 本案件の書体は Adobe Fonts の Area Variable 1本（キット sdk8yxo）。
     可変軸は実体から読んだ＝INKT 0-100 / wght 100-900 / wdth 100-200 / slnt -10-0。
     カンプの書体名は名前付きインスタンスと一致する（例 Extended Bold ＝ wght 700 / wdth 200）。 */
  /* ⚠ 代替に hiragino-kaku-gothic-pron（Adobe Fonts の名前）を混ぜない＝このキットに無いので
     絶対に読めず、書体の実測が毎回「未読込」で鳴る。和文はOSの名前だけを並べる。 */
  font-family: "area-variable", "Yu Gothic", "游ゴシック", YuGothic,
    "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", meiryo, メイリオ, sans-serif;
  font-weight: 400; font-style: normal;
  font-size: 2rem;
  text-spacing-trim: space-all;
  line-break: strict;
  background: #fff; /* 本文の地色＝カンプ画素の実測（sp_1・sp_2 とも白一色） */ }
.feature * { margin: 0; padding: 0; border: 0; vertical-align: baseline; box-sizing: border-box; scroll-margin-top: 50px; }
.feature h1, .feature h2, .feature h3, .feature h4, .feature h5, .feature h6,
.feature strong, .feature b { font-weight: inherit; }
.feature .pc { display: none; } /* 既定＝SP。PCブロックで反転する */
.feature a { color: #000; text-decoration: none; }
/* ホバー透過は【PCだけ】＝@media (hover: hover) で必ず包む（規約§8-7）。 */
@media (hover: hover) {
  .feature a img { transition: opacity .3s; }
  .feature a:hover img { opacity: .7; }
  /* 写真以外（文字・帯）へ付けるホバーは目印クラスで配線する＝スキル anim-hover-fade の型。
     .7 と .3s は掲載先の公開LPを数えて決めた値（#1083）。
     text-decoration は掲載先の共通CSSが a:hover に下線を足す場合の備え＝手元では見えない（§8-7）。 */
  .feature .anim-hover { transition: opacity .3s; }
  .feature .anim-hover:hover { opacity: .7; text-decoration: none; }
}
.feature img { display: block; vertical-align: bottom; max-width: 100%; height: auto; }
.feature ul { list-style: none; }
/* 写真を包むアンカーは block（規約§4）＝行ボックスの余白を作らせない */
.feature .look a, .feature .mv a { display: block; }
/* 本文の直接子は全部 position: relative ＝描画順をDOM順に固定する（規約§8-2） */
.feature :where(.mv, .look, .credit, .allitems, .staff, .parallax-area) { position: relative; }

.feature .frame-main__inner { overflow: clip; display: flow-root; width: 100%; margin: auto; background: #fff;
  /* 紙面の末尾余白＝カンプの正値 200px（STAFF の字面の下端 ab1 y3820 → 掲載先の共通部品が
     始まる y4020）。規約§8-18。★書く値は 19.2rem＝最後の行の字面の下にも半leading が 8px
     ぶら下がるので、その分を引く（200 − 8）。これで紙面の総高がカンプと一致する。 */
  padding-bottom: 19.2rem; }

/* =========================================================
   FV（SP）＝全幅写真にタイトルを重ねる
   ========================================================= */
.feature .look01 { margin-top: 0rem; width: 75rem; }
.feature .mv__thum img { width: 100%; }
/* タイトル2行は行ボックスが重なる（カンプの正値がそうなっている）＝それぞれ絶対配置で置く。
   top ＝ インクのy − 半leading（fontSize × (line-height − 1) ÷ 2） */
/* ★top は半leading の式（インクy − fontSize×(行送り−1)÷2）に、実測の残差を足したもの。
   カンプと実機の白い画素の外接を同じ物差しで測ったら 9px / 8px 下に出た（_tools/ink-compare.js）
   ＝式だけでは合わない分（規約 draft-measure の ink-offset・#1514）。 */
.feature .mv__ttl-sub { position: absolute; top: 66.0725rem; left: 0; right: 0; text-align: center;
  color: #fff; font-size: 2.9rem; line-height: 5.075rem; letter-spacing: .025em;
  font-weight: 800; font-variation-settings: "wght" 800, "wdth" 100, "slnt" 0, "INKT" 0; }
.feature .mv__ttl { position: absolute; top: 68.6925rem; left: 0; right: 0; text-align: center;
  color: #fff; font-size: 9.7rem; line-height: 16.975rem; letter-spacing: .025em;
  font-weight: 900; font-variation-settings: "wght" 900, "wdth" 200, "slnt" 0, "INKT" 0; }

/* =========================================================
   コーデ写真（フロー要素は1id=1ルールに分ける＝flow-margins が値を書き戻す）
   ========================================================= */
.feature .look02 { margin-top: 12rem; margin-left: 3rem; width: 69rem; }
.feature .look03 { margin-top: 2rem; margin-left: 3rem; width: 69rem; }
.feature .look04 { margin-top: 19.3rem; margin-left: 9rem; width: 57rem; }
.feature .look05 { margin-top: 10rem; margin-left: 3rem; width: 69rem; }
.feature .look06 { margin-top: 2rem; margin-left: 3rem; width: 69rem; }
.feature .look07 { margin-top: 17.3rem; margin-left: 9rem; width: 57rem; }
.feature .look08 { margin-top: 19.5rem; margin-left: 3rem; width: 69rem; }
.feature .look09 { margin-top: 2rem; margin-left: 3rem; width: 69rem; }
/* 非表示にした look-10 のブロックぶんを詰めた箇所＝上の余白は「消したクレジットの下の余白」を残す。
   カンプ: 非表示クレジットの下端 10391 → look-11 の上端 10591 ＝ 200px（写真どうしの 20px ではない） */
.feature .look11 { margin-top: 20rem; margin-left: 3rem; width: 69rem; }
.feature .look12 { margin-top: 2rem; margin-left: 3rem; width: 69rem; }
.feature .look13 { margin-top: 10rem; margin-left: 9rem; width: 57rem; }
.feature .look14 { margin-top: 19.5rem; margin-left: 9rem; width: 57rem; }
.feature .look15 { margin-top: 19.4rem; margin-left: 3rem; width: 69rem; }
.feature .look16 { margin-top: 2.1rem; margin-left: 3rem; width: 69rem; }
.feature .look17 { margin-top: 19.5rem; margin-left: 3rem; width: 69rem; }
.feature .look img { width: 100%; }
/* look-15 だけ素材の画布が1px小さい（690×919）＝正値で高さを書く（規約§8-5・引き継ぎ③-7） */
.feature .look15 img { height: calc(100% * 919 / 920); }

/* =========================================================
   ★スライダー（Splide 4・自動フェード切替＋スワイプ＝指示書 I-02）
   ========================================================= */
.feature .js-slider .splide__slide img { width: 100%; }
.feature .js-slider .splide__track { overflow: hidden; }
/* ページャ＝カンプは写真の中の右上に小さい丸2つ（●○）。画素実測で
   14×14・間隔16px・写真の上端と右端から20px・活性は塗り／非活性は輪郭（どちらも #edbcbc）。
   ⚠ スライダーの器の中の絶対配置は z-index を明示する（規約§8-11-4）＝無いとスライドに負ける。 */
.feature .js-slider .splide__pagination { position: absolute; top: 2rem; right: 2rem; bottom: auto; left: auto;
  display: flex; gap: 1.6rem; padding: 0; z-index: 1; }
.feature .js-slider .splide__pagination li { display: flex; }
.feature .js-slider .splide__pagination__page { position: relative; width: 1.4rem; height: 1.4rem; margin: 0;
  border: .2rem solid #edbcbc; border-radius: 50%; background: none; opacity: 1; transform: none; }
.feature .js-slider .splide__pagination__page.is-active { background: #edbcbc; transform: none; }
/* 見た目を変えずにタップ面を広げる（規約§8-3）＝縦は44px確保・横は隣と重ならない30pxまで */
.feature .js-slider .splide__pagination__page::after { content: ""; position: absolute; inset: -1.5rem -0.8rem; }

/* =========================================================
   クレジット（規約§8-3 の固定構造。href はCMSの credit.inc が入れる＝初稿はダミー）
   行構成は器幅の自然折り返しで作る（<br> 禁止）＝max-width は tune-credits が実フォントで確定する
   ========================================================= */
/* ★アイテムの間隔は column-gap で持つ（margin-right だと折り返した行の行末にも余白が残り、
   その行だけ内寄せになる＝tune-credits の実測 -8px）。
   ★18px＝カンプと実機の「字の端から次の字の端まで」を同じ物差しで測って合わせた値
   （_tools/ink-cols.js＝カンプ22px／20pxだと24pxになり、1行につき右へ4〜5px伸びていた）。
   ⚠ ここを動かしたら tune-credits を回し直す（max-width が折り返しを決めているため）。 */
.feature .credit { display: flex; flex-wrap: wrap; column-gap: 1.8rem; align-content: flex-start;
  font-size: 1.8rem; line-height: 3.6rem; letter-spacing: .025em; color: #edbcbc;
  font-weight: 700; font-variation-settings: "wght" 700, "wdth" 200, "slnt" 0, "INKT" 0; }
.feature .credit .item { white-space: nowrap; }
.feature .credit .link { color: #edbcbc; }
.feature .credit01 { margin-top: 4.1rem; margin-left: 3rem; max-width: 57.5648rem; height: 10.8000rem; }
.feature .credit02 { margin-top: 4.1rem; margin-left: 3rem; max-width: 58.1031rem; height: 10.8000rem; }
.feature .credit03 { margin-top: 4.1rem; margin-left: 9rem; max-width: 15.4891rem; height: 3.6000rem; }
/* look-10 の写真は出さないが、クレジットは出す（人の指示・2026-09-15）＝カンプの2行目だけ。
   正値は x30・18px・行送り36px・#EDBCBC（layout.json）。1行なので高さは 3.6rem。 */
.feature .credit04 { margin-top: 4.1rem; margin-left: 3rem; max-width: 57rem; height: 3.6000rem; }
.feature .credit05 { margin-top: 4.1rem; margin-left: 9rem; max-width: 59.4055rem; height: 7.2000rem; }
.feature .credit06 { margin-top: 4.1rem; margin-left: 9rem; max-width: 15.2688rem; height: 3.6000rem; }
.feature .credit07 { margin-top: 4.1rem; margin-left: 3rem; max-width: 40.5438rem; height: 7.2000rem; }
.feature .credit08 { margin-top: 4.1rem; margin-left: 3rem; max-width: 57.1477rem; height: 10.8000rem; }

/* =========================================================
   ピンクの〇の飾り（指示書 I-04）＝画像を貼らずCSSの円で作る。
   器 .dot-wrap にまとめて pointer-events: none（丸がリンクを塞がない）。
   動かすのは anim-parallax の素JS（.js-plx ＋ --plx-k）＝参考ページの GSAP は使わない。
   速さ 0.07 は参考(260401)の実測から逆算（器の高さの12% ÷ (器 + 画面高)）。
   ========================================================= */
.feature .dot-wrap { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.feature .dot { position: absolute; width: 8rem; height: 8rem; border-radius: 50%; background: #edbcbc; --plx-k: 0.07; }
/* 器①＝look07 の上端が原点（カンプy 6244・本文上端相対） */
.feature .dot01 { top: -5.6rem; left: 46.9rem; }
.feature .dot02 { top: 15.9rem; left: 6.4rem; }
.feature .dot03 { top: 39.1rem; left: 63.6rem; }
.feature .dot04 { top: 80.8rem; left: 38.7rem; }
/* 器②＝look13 の上端が原点（カンプy 12344・本文上端相対） */
.feature .dot05 { top: -3.8rem; left: 14.7rem; }
.feature .dot06 { top: 42.6rem; left: 63.2rem; }
.feature .dot07 { top: 58.1rem; left: 5.5rem; }
.feature .dot08 { top: 111.6rem; left: 47.6rem; }
.feature .dot09 { top: 139.3rem; left: 3.6rem; }
.feature .dot10 { top: 189.8rem; left: 54.6rem; }

/* =========================================================
   CHECK ALL ITEMS の帯（正値に無い＝カンプ画素の実測 x85 w580 h120・内枠は白2pxを10px内側へ）
   ========================================================= */
.feature .allitems { margin-top: 19.5rem; margin-left: 8.5rem; width: 58rem; height: 12rem; background: #edbcbc; }
.feature .allitems::before { content: ""; position: absolute; inset: 1rem; border: .2rem solid #fff; pointer-events: none; }
.feature .allitems a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  color: #fff; font-size: 2.9rem; line-height: 1; letter-spacing: .025em;
  font-weight: 800; font-variation-settings: "wght" 800, "wdth" 200, "slnt" 0, "INKT" 0; }

/* ===== STAFF ===== */
.feature .staff { margin-top: 13.2rem; text-align: center; color: #edbcbc;
  font-size: 2rem; line-height: 3.6rem; letter-spacing: .025em;
  font-weight: 700; font-variation-settings: "wght" 700, "wdth" 200, "slnt" 0, "INKT" 0; }
/* 2〜4行目だけ 18px（正値 layout.json の runs＝1つの文字枠の中で字の大きさが2段）。
   ★器を18pxにして1行目だけ20pxにする形は採らない＝字送りは**継承した実px**が効くので、
     器が20pxのときだけカンプと同じ 0.5px になる（器を18pxにすると 0.45px になり行が2px縮む・実測）。
   ★top の -0.2rem は実測の残差＝カンプと実機の字の外接を同じ物差しで測ると2px下に出る
     （FV のタイトルと同じ型・行送りを変えても消えないので見た目だけずらす）。 */
.feature .staff__body { font-size: 1.8rem; position: relative; top: -0.2rem; }

/* =========================================================
   ▼PCブロック（751px以上）＝縮尺と、PC専用のフレームだけを持つ
   本文の寸法はここに書かない（上の1組がそのまま縮尺される）
   ========================================================= */
@media screen and (min-width: 751px) {
  /* ★指示書 I-07/I-08＝「SPコンテンツを450pxで流し込み、1400px以下は可変。
     1400px以上は500pxまで可変してそこで固定」＝上限つきの可変。
     本文カラム 450px@1400 → 1rem = 450/75 = 6px → 6/1400×100 = 0.428571vw。
     上限 500px → 1rem = 500/75 = 6.6666667px（到達するのは約1556px）。
     この1行が縮尺と上限の両方を持つ＝本文の rem は1つも触らない。 */
  html { font-size: min(0.428571vw, 6.6666667px); }

  .feature .pc { display: block; }
  .feature .sp, .feature .frame > .sp { display: none; }
  .feature .frame > .pc { display: contents; }

  /* --pcu ＝ 1 PCカンプpx（カンプ幅1400）。レール（本文カラムの外）の寸法はこれで書く（規約§8-1・#440） */
  /* ★--header-h ＝掲載先の追従ヘッダー高の**固定値**（USAGI ONLINE PC 80px・docs/brand-specs.md）。
     ⚠ 実測変数（--cms-header-h）に連動させない＝掲載先のヘッダーは**スクロール開始後に出る**ので、
     出た瞬間に FV の高さが 900→820 へ変わって**キュッと縮む**（人が実機で何度も指摘・レシピ
     docs/recipes/fv-scroll-cover.md のノブと同じ形にした）。告知バーの増減には追従しなくなるが、
     縮まないことを採る。 */
  .feature { --pcu: 0.0714286vw; --header-h: 80px; }

  .feature .frame { display: flex; align-items: stretch; }
  /* 左＝貼り付くモデル写真。カンプでは x0〜800（＝残りを全部取る形にして、
     レールが上限で止まったぶんはこちらが吸う） */
  .feature .frame-side { position: relative; }
  .feature .frame-side.-mv { flex: 1 1 auto; min-width: 0; }
  .feature .frame-side.-mv .frame-side__inner {
    --rail-h: calc(100svh - var(--header-h));
    position: sticky; top: var(--header-h); height: var(--rail-h); width: 100%;
    /* ★走路は本文の末尾まで伸ばす＝いちばん下でも左はFV写真のまま（人の指示・2026-09-15）。
       規約§8-18 の既定は「本文の末尾余白（115 PCカンプpx）と同じだけ走路も早く終える」だが、
       それだと最下部でFV写真の下に白が 114.8px 出る＝実機で見て変えた。
       余白が出るのは本文側だけ（右のカラムの下の 115.2px）。 */
    margin-bottom: 0; }
  /* 写真の右どなりの地色＝カンプ pc_firstview は 写真 x0〜1056 ＋ 地色 x1056〜1400 で1枚の背景。
     見えるのはレールの右外側（x1250〜1400）だけだが、**写真と同じ「初画面の背景」**なので
     貼り付く器の中へ入れる＝写真が居る間ずっと居る。色は帯の面で実測（#DEBABC・ばらつき1未満）。
     右へはみ出すぶんは .feature の overflow:clip が切る＝横スクロールは出ない。 */
  .feature .frame-side.-mv .frame-side__inner::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 100vw;
    background: #DEBABC; }
  .feature .leftcont__box { height: 100%; opacity: 0; filter: blur(calc(10 * var(--pcu)));
    transition: opacity .8s, filter .8s; }
  .feature .leftcont__box.is-inview { opacity: 1; filter: blur(0); }
  .feature .leftcont__thum { height: 100%; width: 100%; }
  .feature .leftcont__thum img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
  /* タイトルは横を --pcu・縦をレールの高さの比で置く
     （幅基準で縦を書くと、幅が広くて低い画面で下へ逃げる＝テンプレの実測） */
  /* ★left は layout の値ではなくカンプ画素の実測から入れている＝PC面のこの2行は layout の
     テキスト枠の幅が実際の字面と合わない（FLUFFY は layout 278px に対しカンプの実測 400px）。
     字面の左端がカンプと同じ位置に来るよう、左サイドベアリングぶんを引いた値を書く
     （実機で測った字面幅は 401px / 323px ＝カンプの 400px / 324px と一致している）。 */
  .feature .leftcont__ttl-sub { position: absolute; top: calc(var(--rail-h) * 0.7677);
    left: calc(175 * var(--pcu)); color: #fff;
    font-size: calc(26 * var(--pcu)); line-height: calc(45.5 * var(--pcu)); letter-spacing: .025em;
    font-weight: 800; font-variation-settings: "wght" 800, "wdth" 100, "slnt" 0, "INKT" 0; }
  /* ★top の末尾の -8*--pcu ＝ SP面と同じ「式だけでは合わない残差」（上のコメント参照）。
     カンプと実機の白い画素の外接を同じ物差しで測ったら 8px 下に出た（_tools/ink-box.js）。
     字の大きさに比例する量なので --pcu（＝幅基準）で引く＝rail-h の比では書かない。 */
  .feature .leftcont__ttl { position: absolute; top: calc(var(--rail-h) * 0.7959 - 8 * var(--pcu));
    left: calc(136 * var(--pcu)); color: #fff;
    font-size: calc(86 * var(--pcu)); line-height: calc(150.5 * var(--pcu)); letter-spacing: .025em;
    font-weight: 900; font-variation-settings: "wght" 900, "wdth" 200, "slnt" 0, "INKT" 0; }

  /* 右＝本文レール。器は 75rem 固定＝実pxは上の html{font-size} が作る。
     右の余白 150 PCカンプpx はカンプの実測（レール x800〜1250・紙面1400） */
  /* 白地を明示する＝左の地色が本文の下から透けないため（順番はDOM順＝レールが後で上に乗る） */
  .feature .frame-main { flex: 0 0 auto; width: 75rem; margin-right: calc(150 * var(--pcu));
    position: relative; background: #fff; }
  /* 指示書 I-10「上50px余白」 */
  .feature .frame-main__inner { padding-top: calc(50 * var(--pcu)); }
  /* PCではFVがレールに入らない（カンプの pc_right_1 は look-02 から始まる）＝先頭の余白を落とす */
  .feature .look02 { margin-top: 0; }
}