@charset "UTF-8";
/* A04825 gelato pique Sleep LOOK AW2（複製元 templates/feature_base.html）
   寸法は SPカンプ(750px幅)の実測px ÷10 の rem。PC の縮尺は下の PC ブロックの html{font-size} 1行だけが持つ。
   紙面はコラージュ＝節ごとに高さを持つ箱（.sec）＋中身は節の上端からの絶対配置（.p）。値の出どころは
   src/text/layout.json（転記表 _tools/out/sec-dump.txt）。 */
body { margin: 0; } /* プレビュー用 */

/* ===== CMS組み込み用の必須リセット（規約§6 / docs/cms-embed.md §3）＝案件で消さない ===== */
.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） */

/* ===== 出現アニメ（指示「写真や文字やイラストは下からフェードイン」）=====
   値は参考URL（260406 は公開終了＝同シリーズ 260715 の .js-fadeUp で代用・reference-check.json）の実測＝
   30px 下から・1s ease・画面下25%で点火（点火の位置は script.js の rootMargin）。
   移動量は実px の固定値（参考の 30px は画面幅で伸び縮みしない）。transform は使わず translate で書く
   ＝中央寄せ等の transform と喧嘩しない。 */
html.js-anim .js-reveal { opacity: 0; translate: 0 30px; transition: opacity 1s ease, translate 1s ease; }
html.js-anim .js-reveal.is-inview { opacity: 1; translate: 0 0; }

/* 潰して出す演出は2枚組（器＝見張り・中身＝潰して開く）＝テンプレの型そのまま */
.js-wipe { transition: clip-path 1s ease-in-out var(--d, 0s); }
.js-wipe.-fromLeft   { clip-path: inset(0 100% 0 0); } /* 左から右へ開く */
.js-wipe-box.is-inview > .js-wipe { clip-path: inset(0); }
.js-wipe.is-inview   { clip-path: inset(0); }
.js-wipe-box { position: relative; }
.js-wipe-box > .js-wipe { display: block; }

/* ===== 指示 #4・#5「徐々に画像が出てくる」（緑の枠・参考 NUSET の (A) 型）=====
   参考は地色の板に縦グラデの mask を掛けて送る型。ここは同じ見え方を**写真自身の mask** で作る
   ＝板の色が要らない（look-33 は毛皮の写真帯の上に乗るので、単色の板だと四角が浮く）。
   mask は上が不透明・下が透明の縦グラデを 300% の高さで敷き、位置を下端→上端へ 1.5s で送る
   ＝写真が上から下へにじみ出る。写真の不透明度は 1s・点火は器が画面の上から70%（script.js）。 */
html.js-anim .feature .js-mask img {
  opacity: 0;
  -webkit-mask: linear-gradient(to bottom, #000 0%, #000 42%, transparent 67%, transparent 100%) 0 100% / 100% 300% no-repeat;
          mask: linear-gradient(to bottom, #000 0%, #000 42%, transparent 67%, transparent 100%) 0 100% / 100% 300% no-repeat;
  transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-mask-position 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), mask-position 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
html.js-anim .feature .js-mask.is-inview img { opacity: 1; -webkit-mask-position: 0 0; mask-position: 0 0; }

/* ===== 指示 #7「テキストが出てきて揺れる」（水色の枠・参考 フェリシモ）=====
   一瞬で現れて（フェードしない）0.8s step-start＝0.4秒だけ 3° 傾いて戻る。2枚目は 0.6s 遅れ。
   画面から出たら外す＝戻ってきたときにもう一度揺れる（参考どおり・script.js）。 */
html.js-anim .feature .js-sway { opacity: 0; }
html.js-anim .feature .js-sway.is-sway { opacity: 1; animation: gp-sway .8s step-start both; }
html.js-anim .feature .js-sway.-late { transition: opacity 0s linear .6s; }
html.js-anim .feature .js-sway.-late.is-sway { animation-delay: .6s; }
html.js-anim .feature .js-sway.is-swayed { opacity: 1; transition: none; } /* 一度揺れ終わったら画面の外へ出ても消さない（人の指示）＝次に入ったときは見えたまま揺れる */
@keyframes gp-sway { 0% { rotate: 0deg; } 50% { rotate: 3deg; } 100% { rotate: 0deg; } }

/* ===== 指示 #8「雪のキラキラのように回転」（オレンジの丸・参考 LOWRYS FARM）=====
   25/30/28/40/30s・線形・無限・右回りと左回りを交互（隣り合う結晶が同じにならないよう HTML で振る） */
.feature .snow { animation: gp-spin 30s linear infinite; }
.feature .snow.-t25 { animation-duration: 25s; }
.feature .snow.-t28 { animation-duration: 28s; }
.feature .snow.-t40 { animation-duration: 40s; }
.feature .snow.-rev { animation-direction: reverse; }
@keyframes gp-spin { to { rotate: 360deg; } }

/* ===== 指示 #1〜#3「写真が徐々に拡大しながら切り替わる」（紺の枠・参考 JUN ロペピクニック）=====
   型は docs/recipes/image-switcher.md（クラス名もレシピの規定）。値は参考の実測＝
   3s ごと・クロスフェード 1.6s cubic-bezier(0.37,0.15,0,1)・切替と同時に 1→1.08 を 5s 線形・無限。
   ⚠ FADE（1.6s）は script.js の SW_FADE と対＝片方だけ変えない。 */
.feature .switcher { overflow: hidden; }
.feature .switcher .switch-img { display: block; transition: opacity 1.6s cubic-bezier(0.37, 0.15, 0, 1); }
.feature .switcher .switch-img + .switch-img { position: absolute; inset: 0; }
.feature .switcher .switch-img:not(.is-current) { opacity: 0; pointer-events: none; }
.feature .switcher .switch-img.is-current { opacity: 1; }
.feature .switcher .switch-img.is-zoom img { animation: gp-zoom 5s linear forwards; }
@keyframes gp-zoom { from { scale: 1; } to { scale: 1.08; } }

/* QA検証用フック(?noanim)＝全アニメを完了状態で固定 */
.is-noanim .js-reveal, .is-noanim .js-anime { transition: none !important; opacity: 1 !important; translate: none !important; }
.is-noanim .leftcont__box { transition: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
.is-noanim .js-wipe { transition: none !important; clip-path: none !important; }
.is-noanim .feature .js-mask img { transition: none !important; opacity: 1 !important; -webkit-mask: none !important; mask: none !important; }
.is-noanim .feature .js-sway { opacity: 1 !important; animation: none !important; }
.is-noanim .feature .snow, .is-noanim .feature .switch-img img { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim) .js-reveal, html:not(.is-forceanim) .js-anime { transition: none !important; opacity: 1 !important; translate: none !important; }
  html:not(.is-forceanim) .js-wipe { transition: none !important; clip-path: none !important; }
  html:not(.is-forceanim) .leftcont__box { transition: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
  html:not(.is-forceanim) .feature .js-mask img { transition: none !important; opacity: 1 !important; -webkit-mask: none !important; mask: none !important; }
  html:not(.is-forceanim) .feature .js-sway { opacity: 1 !important; animation: none !important; }
  html:not(.is-forceanim) .feature .snow, html:not(.is-forceanim) .feature .switch-img img { animation: none !important; }
  html:not(.is-forceanim) { scroll-behavior: auto; }
}

/* ===== 特集共通枠（.feature に overflow は置かない＝中の sticky が震える・#1771） ===== */
.feature { box-sizing: border-box; color: #A66655; margin: 0 auto; position: relative; width: 100%;
  /* 指示書「日本語は全て平成角ゴシック Std W5」＝構成書 FONT シートの指定どおり */
  font-family: "heisei-kaku-gothic-std", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Yu Gothic", meiryo, sans-serif;
  font-weight: 500; font-style: normal;
  font-size: 2rem;
  text-spacing-trim: space-all;
  line-break: strict;
  background: #fff; }
.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: inherit; text-decoration: none; }
@media (hover: hover) {
  .feature a img, .feature a:not(:has(img:not([alt=""]))), .feature button { transition: opacity .3s; }
  .feature a:has(img:not([alt=""])):hover img { opacity: .7; }
  .feature a:not(:has(img:not([alt=""]))):hover, .feature button:hover { opacity: .7; text-decoration: none; }
}
.feature img { display: block; vertical-align: bottom; max-width: 100%; height: auto; }
.feature ul { list-style: none; }

/* 本文カラムの器＝100%（rem で書かない＝スクロールバーの分で食い違う） */
.feature .frame-main__inner { display: flow-root; width: 100%; margin: auto; background: #fff; }

/* ===== 書体（構成書 FONT シートの family 名そのまま） ===== */
.feature .f-adonis { font-family: "adonis-web", serif; font-weight: 700; }
.feature .f-lust   { font-family: "lust-sans", sans-serif; font-weight: 400; }
.feature .f-lustm  { font-family: "lust-sans", sans-serif; font-weight: 500; }
.feature .f-gara   { font-family: "garamond-premier-pro", serif; font-weight: 500; }
.feature .f-garad  { font-family: "garamond-premier-pro-display", serif; font-weight: 400; }
.feature .f-belo   { font-family: "beloved-script", sans-serif; font-weight: 700; }

/* ===== 節＝高さを持つ箱。中身は節の上端からの絶対配置 =====
   ★指示 #9〜#12「ベタ面がせり上がってくる」＝節を sticky で**下端止め**にし、後の節が DOM 順で覆う
   （参考 260715 の実物の型＝top: calc(100vh - 節の高さ)・重なりは z-index でなく並び順）。
   ★sticky の祖先に overflow を置かない＝節の外側の器は全部 overflow なし。はみ出す写真（look-34 等）は
     **節そのもの**が横だけ切る（overflow-x: clip は自分の子を切るだけ＝自分の sticky は殺さない）。 */
/* ★top は 0 を上限にする＝節が画面より低いとき（PC の lead＝532px）に calc が正になると、
     sticky は節を最初からその位置まで押し下げる。0 なら「上端で止まって次の節に覆われる」＝参考の intro と同じ。 */
/* 止まる節の下に余白 --pad（人の指示＝25vh）＝下の方の写真も「画面の下25%」の線を越えてから止まる（越えないと出ないまま次の節に覆われる）。
   border-box で高さ固定なので padding だけでは食い込むだけ＝高さと止まる位置の計算にも足す */
.feature .sec { --pad: 25vh; position: sticky; top: min(0px, calc(100vh - var(--h) - var(--pad))); height: calc(var(--h) + var(--pad)); padding-bottom: var(--pad); overflow-x: clip; z-index: 0; }
.feature .sec.-last { position: relative; top: auto; --pad: 0px; }
/* overflow: clip を知らないブラウザ（iOS Safari 15 以前）では横が切れず、はみ出す写真（look-34・moco moco）の分だけ横スクロールが出る
   ＝そこでだけ hidden で切る（節の中に sticky は無い＝自分の貼り付きは殺さない。縦にはみ出すのは moco・gift だけで、そこは元から切っている） */
@supports not (overflow: clip) { .feature .sec { overflow: hidden; } }
.feature .anchor { display: block; height: 0; }
.feature .p { position: absolute; }
.feature .p.-full { left: 0; width: 100%; text-align: center; }
.feature .p.-left { text-align: left; }
.feature .bg { position: absolute; left: 0; width: 100%; }
.feature .txt-ja { font-size: 2.5rem; line-height: 1.72; letter-spacing: .02em; }
/* 行末の「、」「。」は半角ぶん詰める＝カンプ（イラレの行末約物）は詰めた行幅で中央寄せしている。
   全角のままだと句読点で終わる行だけ 6px 左へずれる（照合 2026-10-01 の実測） */
.feature .ya { margin-right: -.5em; }

/* --- lead（白・FV〜導入〜Lineup） --- */
.feature .sec-lead { --h: 292.44rem; background: #fff; }
.feature .ld-fv { top: 0; left: 0; width: 75rem; }
.feature .ld-logo { top: 2.782rem; left: 57.604rem; width: 14.386rem; }
.feature .ld-winter { top: 78.98rem; left: 2.25rem; width: 69.5rem; } /* 位置はカンプの字に重ねて取り直した（照合 2026-10-01・写真の色を拾って 19px 下にずれていた） */
.feature .ld-intro { top: 117.119rem; font-size: 2.5rem; line-height: 1.8; letter-spacing: .02em; color: #A66655; }
.feature .ld-lineup { top: 186.28rem; left: 24.9rem; width: 24.6rem; }
.feature .ld-card { width: 30.651rem; }
.feature .ld-c1 { top: 196.173rem; left: 5.727rem; }
.feature .ld-c2 { top: 196.173rem; left: 38.622rem; }
.feature .ld-c3 { top: 233.327rem; left: 5.727rem; }
.feature .ld-c4 { top: 233.327rem; left: 38.622rem; }
.feature .ld-card__lbl { position: absolute; left: 0; width: 100%; text-align: center; color: #fff; }
.feature .ld-c1 .ld-card__lbl { top: 14.044rem; font-size: 5.448rem; line-height: .97; }
.feature .ld-c2 .ld-card__lbl { top: 14.367rem; font-size: 4.198rem; line-height: 1.1; letter-spacing: .025em; }
.feature .ld-c3 .ld-card__lbl { top: 13.001rem; font-size: 5.607rem; line-height: .9; }
.feature .ld-c4 .ld-card__lbl { top: 14.612rem; font-size: 6.969rem; line-height: .67; left: -0.7rem; rotate: -3.4921deg; } /* 傾きは layout の rotation */

/* --- ribbon（Ribbon Dog・地 #f3ede1・上角丸 75px＝asset-02 の実測） --- */
.feature .sec-ribbon { --h: 667.46rem; background: #f3ede1; border-radius: 7.5rem 7.5rem 0 0; color: #D09E7F; }
.feature .rb-ttl { top: 23.44rem; left: 12.15rem; width: 49.9rem; }
.feature .rb-dog { top: 33.044rem; left: 28.385rem; width: 16.528rem; }
.feature .rb-col { top: 49.481rem; font-size: 5.954rem; line-height: 1.3; }
.feature .rb-copy { top: 63.443rem; }
.feature .rb-l13 { top: 78.769rem; left: 0; width: 75rem; }
.feature .rb-cr { top: 178.159rem; font-size: 2.758rem; line-height: 1.47; letter-spacing: .02em; }
.feature .rb-l15 { top: 201.164rem; left: 11.2rem; width: 63.8rem; }
.feature .rb-l16 { top: 280.915rem; left: 0; width: 43.849rem; }
.feature .rb-band { top: 347.957rem; height: 167.527rem; } /* 高さは正値＝書き出しが 752px 幅に丸まっていて幅100%だと 3.8px 縮む */
/* パス上文字のクレジット＝箱は .ai の道筋（パス）の外接矩形そのもの（字は道筋の外側へはみ出す） */
.feature .rb-cush { top: 363.032rem; left: 4.772rem; width: 65.457rem; z-index: 1; }
/* 白枠は画像に焼き込まず器に付ける（拡大アニメで枠が一緒に拡大しないように）＝上辺は半円のアーチ */
.feature .rb-l17 { top: 365.294rem; left: 6.596rem; width: 61.808rem; border: 0.8rem solid #fff; border-radius: 30.904rem 30.904rem 0 0; }
.feature .rb-l17 img { width: 100%; }
.feature .rb-stor { top: 462.53rem; left: 2.321rem; width: 57.644rem; z-index: 1; }
.feature .rb-l18 { top: 465.425rem; left: 4.562rem; width: 53.164rem; }
.feature .rb-frame { top: 547.404rem; left: 4.451rem; width: 66.099rem; }
.feature .rb-vbox { top: 541.485rem; left: 16.766rem; width: 41.467rem; height: 13.349rem; background: #f3ede1; }
.feature .rb-ribbons { top: 546.599rem; left: 18.222rem; width: 38.557rem; }
.feature .rb-vttl { top: 543.79rem; font-size: 7.512rem; line-height: .94; }
.feature .rb-shih { top: 562.14rem; left: 15.5rem; width: 13.6rem; }
.feature .rb-toy { top: 562.04rem; left: 45.15rem; width: 15.6rem; }
.feature .rb-schn { top: 593.84rem; left: 30rem; width: 15.1rem; }
/* 犬種バリエーションの商品写真6枚は透過PNG（JPEG の外周の白を抜いて作り直した＝照合 2026-10-01）。
   ★乗算で白を溶かす形はやめた＝ぬいぐるみが枕に重なる所で白いぬいぐるみまで透けていた（Toy poodle）。 */
.feature .rb-l22 { top: 565.307rem; left: 7.664rem; width: 28.449rem; }
.feature .rb-l23 { top: 565.307rem; left: 37.901rem; width: 29.405rem; }
.feature .rb-l24 { top: 578.259rem; left: 20.047rem; width: 17.854rem; }
.feature .rb-l25 { top: 577.839rem; left: 51.836rem; width: 16.26rem; }
.feature .rb-l26 { top: 596.669rem; left: 20.747rem; width: 28.974rem; }
.feature .rb-l27 { top: 604.408rem; left: 44.079rem; width: 15.233rem; }

/* --- fluffy（Fluffy Heart Mood・地 #f5e5ea・上角丸 65px＝asset-05 の実測） --- */
.feature .sec-fluffy { --h: 986.93rem; background: #f5e5ea; border-radius: 6.5rem 6.5rem 0 0; color: #E085A5; }
.feature .fl-ttl { top: 19.696rem; font-size: 9.873rem; line-height: 1.09; letter-spacing: .025em; }
.feature .fl-series { top: 40.741rem; font-size: 5.056rem; line-height: 1.44; letter-spacing: .045em; }
.feature .fl-copy { top: 52.804rem; }
.feature .fl-l31 { top: 74.509rem; left: 0; width: 75rem; }
.feature .fl-band1 { top: 170.439rem; height: 278.732rem; mix-blend-mode: multiply; } /* イラレで乗算＝書き出しは素の写真（照合 2026-10-01・色が 地×写真 と一致） */
.feature .fl-cr1 { top: 174.454rem; font-size: 2.48rem; line-height: 1.49; letter-spacing: .04em; }
.feature .fl-l33 { top: 205.024rem; left: 0; width: 59.472rem; }
.feature .fl-moco { top: 267.383rem; left: 31.9rem; width: 47.1rem; z-index: 1; pointer-events: none; }
.feature .fl-l34 { top: 271.752rem; left: 33.134rem; width: 45.336rem; }
.feature .fl-l35 { top: 325.064rem; left: 5.808rem; width: 63.384rem; }
.feature .fl-l36 { top: 420.233rem; left: 0; width: 75rem; }
.feature .fl-band2 { top: 463.592rem; height: 242.521rem; background: #e5b9c6; }
.feature .fl-cr2 { top: 517.391rem; font-size: 2.48rem; line-height: 1.49; letter-spacing: .04em; color: #fff; }
.feature .fl-l38 { top: 536.329rem; left: 0; width: 61.191rem; }
.feature .fl-cr3 { top: 544.891rem; left: 32.275rem; font-size: 4.961rem; line-height: 1.09em; letter-spacing: .04em; color: #fff; }
.feature .fl-l39 { top: 612.769rem; left: 29.213rem; width: 45.787rem; }
.feature .fl-cr4 { top: 623.295rem; left: 10.098rem; width: 25.95rem; font-size: 4.961rem; line-height: 1.09em; letter-spacing: .04em; color: #fff; }
.feature .fl-band3 { top: 687.147rem; height: 173.328rem; } /* 高さは正値（書き出し 749px 幅の丸め） */
.feature .fl-cr5 { top: 701.043rem; font-size: 4.039rem; line-height: 1.05em; letter-spacing: .04em; }
.feature .fl-l40 { top: 711.044rem; left: 12.244rem; width: 50.47rem; }
.feature .fl-l41 { top: 776.992rem; left: 12.286rem; width: 50.427rem; }
.feature .fl-cr6 { top: 842.677rem; font-size: 4.039rem; line-height: 1.05em; letter-spacing: .04em; }
.feature .fl-l42 { top: 872.984rem; left: 15.1rem; width: 59.9rem; }
.feature .fl-cr7 { top: 872.984rem; left: 9.25rem; font-size: 4.039rem; line-height: 1.26; letter-spacing: .04em; writing-mode: vertical-rl; }
.feature .fl-band4 { top: 965.61rem; bottom: 0; background: #f7eaee; }

/* --- moco（Mocomoco Stripe・地 白＋asset-10 のグレーのグラデ） --- */
.feature .sec-moco { --h: 522.04rem; background: #fff; color: #4F4F4F; overflow: clip; } /* 地の mo-bg が節より長い＝sec-gift と同じ理由で節で切る */
.feature .mo-bg { top: 0; left: 0; width: 75rem; max-width: none; } /* 画像の透明な縁は削った＝節の上端から地のグラデが始まる */
.feature .mo-ttl { top: 25.441rem; font-size: 13.416rem; line-height: .85; }
.feature .mo-col { top: 50.932rem; font-size: 5.944rem; line-height: 1.3; }
.feature .mo-copy { top: 63.423rem; }
.feature .mo-l47 { top: 83.379rem; left: 2.917rem; width: 69.167rem; }
.feature .mo-cr { top: 173.411rem; font-size: 3.402rem; line-height: 1.25; }
.feature .mo-l50 { top: 203.244rem; left: 19.16rem; width: 55.84rem; z-index: 1; } /* 下の mo-l53 と 38px 重なる＝カンプはこちらが手前 */
.feature .mo-l53 { top: 269.154rem; left: 6.493rem; width: 37.401rem; }
.feature .mo-l58 { top: 328.983rem; left: 0; width: 64.223rem; }
.feature .mo-l59 { top: 409.263rem; left: 14.967rem; width: 60.033rem; }
.feature .snow { z-index: 1; pointer-events: none; }
.feature .sn43 { top: 13.056rem; left: 58.433rem; width: 6.204rem; }
.feature .sn44 { top: 17.449rem; left: 62.062rem; width: 9.053rem; }
.feature .sn45 { top: 50.082rem; left: 5.54rem; width: 14.336rem; }
.feature .sn49 { top: 191.638rem; left: 11.723rem; width: 18.909rem; }
.feature .sn51 { top: 204.035rem; left: 5.28rem; width: 9.702rem; }
.feature .sn52 { top: 215.966rem; left: 10.906rem; width: 5.651rem; }
.feature .sn54 { top: 297.04rem; left: 55.81rem; width: 8.268rem; }
.feature .sn55 { top: 302.231rem; left: 48.322rem; width: 10.44rem; }
.feature .sn56 { top: 309.151rem; left: 56.791rem; width: 6.308rem; }
.feature .sn57 { top: 314.349rem; left: 52.047rem; width: 22.104rem; }
.feature .sn60 { top: 477.655rem; left: 13.408rem; width: 17.766rem; }
.feature .sn61 { top: 479.519rem; left: 7.022rem; width: 7.227rem; }
.feature .sn62 { top: 487.688rem; left: 4.314rem; width: 10.035rem; }
.feature .sn63 { top: 494.216rem; left: 16.744rem; width: 7.09rem; }

/* --- gift（Gift Series・地 asset-12 のギンガム） --- */
.feature .sec-gift { --h: 298.31rem; background: #e4eaf1; overflow: clip; } /* 地の gf-bg が節より長い＝紙面の最後で貼り付いたままフッターとの間に覗くので節で切る（中に sticky は無い） */
.feature .sec.sec-gift { position: relative; top: auto; --pad: 0px; } /* 人の指示＝sec-end のせり上がりを無くす＝gift は貼り付かずに流れる（gift 自身のせり上がりは moco の貼り付きなので残る） */
.feature .gf-bg { top: 0; height: 345.901rem; } /* 高さは正値（書き出し 751px 幅の丸め） */
.feature .gf-ttl { top: 28.34rem; left: 11.3rem; width: 54.4rem; }
.feature .gf-l65 { top: 63.177rem; left: 0; width: 75rem; }
.feature .gf-card1 { top: 149.54rem; left: 31.139rem; width: 38.078rem; z-index: 1; pointer-events: none; }
.feature .gf-l67 { top: 183.792rem; left: 5.924rem; width: 63.152rem; }
.feature .gf-card2 { top: 256.24rem; left: 6.951rem; width: 38.111rem; z-index: 1; pointer-events: none; }
/* カードの中のクレジット＝.ai の文字（BelovedScript Bold 25.72px・行送り34.2px・字間30・縁取り0.425pt・中央揃え）。
   --ax/--ay＝1つ目の品の1行目の基準点（文字の並びの中心・カード左上から・カンプpx÷10）、--b＝ul の上端から1行目の基準線まで。
   その点を中心にカードと同じ角度へ傾ける（.ai の matrix：Feather −7.86°／Baby Moco +8.03°）。2つ目の品の1行目は 74.9px 下＝品の間 0.65rem */
.feature .credit.-card { --w: 30rem; --b: 2.45rem; position: absolute; left: calc(var(--ax) - var(--w) / 2); top: calc(var(--ay) - var(--b)); width: var(--w);
  transform-origin: 50% var(--b); rotate: var(--rot); text-align: center; font-size: 2.572rem; line-height: 3.42rem; letter-spacing: .03em;
  color: #c24644; -webkit-text-stroke: .0425rem #c24644; pointer-events: none; }
.feature .credit.-card .item { white-space: normal; }
.feature .credit.-card .item + .item { margin-top: .65rem; }
.feature .credit.-card .link { pointer-events: auto; }
.feature .credit.-card .series { display: block; } /* シリーズ名の後で改行（js/script.js が頭の2語を包む） */
.feature .gf-cr1 { --ax: 18.171rem; --ay: 7.527rem; --rot: -7.857deg; }
.feature .gf-cr2 { --ax: 19.909rem; --ay: 7.316rem; --rot: 8.03deg; }

/* --- end（VIEW ALL・Staff） --- */
.feature .sec-end { --h: 111.2rem; background: #f3ede1; color: #D09E7F; }
.feature .en-all { top: 21.93rem; left: 27.1rem; width: 20rem; height: 24.1rem; }
.feature .en-all__ttl { position: absolute; top: 0; left: 0; width: 100%; }
.feature .en-all__dog { position: absolute; top: 2.472rem; left: 2.243rem; width: 16.313rem; }
.feature .en-staff-h { top: 50.966rem; font-size: 3rem; line-height: 1.42; }
.feature .en-staff { top: 56.077rem; font-size: 3rem; line-height: 1.5; }

/* ===== クレジット(credit.inc相当) =====
   ★構造（ul.credit > li.item > a.link > span.txt + span.price）は全案件固定＝崩さない（規約§8-3）。
   この案件のクレジットは下線なし・1品1行・中央寄せ（カンプ）。書体と色は節の指定を継ぐ。 */
.feature .credit .item { display: block; position: relative; white-space: nowrap; }
.feature .credit .link { color: inherit; font: inherit; letter-spacing: inherit; }
.feature .credit .item.-noline { border-bottom: none; }
/* 1品を何行にも割るクレジット（カンプの改行＝語ごと）は器の幅で割る＝<br> は使わない（§8-3） */
.feature .credit.-stack .item { white-space: normal; }
.feature .credit.-stack .txt, .feature .credit.-stack .price { display: block; }
.feature .fl-cr3 .txt { width: min-content; }
/* 1品だけのクレジットは価格が商品名より小さい（カンプ実測で約0.55倍） */
.feature .credit.-small-price .price { font-size: .55em; }
/* パス上文字のクレジット（-arc）＝js/script.js が SVG textPath を差し込む。箱は写真に重なるので押せるのは字の形だけ */
.feature .credit.-arc, .feature .credit.-arc * { pointer-events: none; }
.feature .credit.-arc .arc-svg { display: block; width: 100%; height: auto; overflow: visible; }
.feature .credit.-arc text { font-size: 67.32px; letter-spacing: -0.083em; fill: currentColor; pointer-events: visiblePainted; } /* SVG の中の px＝カンプpx（viewBox の単位） */
.feature .credit.-arc text * { pointer-events: visiblePainted; } /* 字の形は tspan が描く＝押せるのは字の形だけ（箱の残りは下の写真のリンクへ） */
.feature .credit.-arc .arc-price { font-size: 30.294px; letter-spacing: -0.05em; } /* .ai は縦横45% */
.feature .credit.rb-stor text { letter-spacing: -0.041em; } /* 字間はカンプの文字列の長さに合わせて実測で決めた（Web版の書体は Illustrator の Adonis Bold と字幅が少し違う） */
.feature .credit.rb-stor .arc-price { letter-spacing: 0; } /* Storage Box は価格の字間0でカンプと重なる（-0.05em だと文字列が10px短くなってずれる） */
.feature .credit.rb-cush .arc-name { letter-spacing: -0.03em; } /* 人の指示（実機で見てデザインに近い値） */
.feature .credit.-arc.is-arc .txt, .feature .credit.-arc.is-arc .price { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* 読み上げ用に残す */

/* ============================================================
   ▼PCブロック(751px以上) — 縮尺と、PC専用のフレームだけを持つ
   ============================================================ */
@media screen and (min-width: 751px) {
  /* ★縮尺＝本文カラム 400px@1440（PCカンプ layout-pc.json の中央 x=520〜920）÷75 ÷1440 ×100 */
  /* 基準は「スクロールバーを除いた幅」＝使える幅1440pxで中央400px（--sbw は js/script.js が測る・無ければ0） */
  html { font-size: calc((100vw - var(--sbw, 0px)) * 0.003703704); } /* 1rem=5.3333px@1440（=カンプ10px を400px幅で描く） */

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

  .feature {
             --pcu: calc((100vw - var(--sbw, 0px)) / 1440); /* 1 PCカンプpx（カンプ幅1440・スクロールバーを除いた幅） */
             --rail-top: 80px;   /* 両端レールの貼り付き位置＝USAGI の PC 追従ヘッダー高（固定値） */ }

  .feature .frame { display: flex; align-items: stretch; justify-content: center; }
  .feature .frame-main { flex: 0 0 auto; width: 75rem; }
  .feature .frame-side { position: relative; flex: 1 1 0; }
  .feature .frame-side__inner { position: sticky; top: var(--rail-top); margin-bottom: calc(80 * var(--pcu)); }

  /* --- 左レール（指示 P1＝固定）: FV写真（原本 2518 を PC カンプと同じ切り取りで 2倍）・ロゴ・題字 --- */
  .feature .frame-side.-mv { flex: 0 0 auto; width: calc(520 * var(--pcu)); background: #e0c8a9; }
  .feature .frame-side.-mv .frame-side__inner { --rail-h: calc(100vh - var(--rail-top)); height: var(--rail-h); width: 100%; margin-bottom: 0; }
  .feature .leftcont__box { position: relative; 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: var(--rail-h); width: 100%; }
  .feature .leftcont__thum img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
  /* 縦はレールの高さの比率（PCカンプの正値 ÷ レール 810）・横は --pcu */
  .feature .leftcont__logo { position: absolute; top: calc(var(--rail-h) * 0.0336); left: calc(28 * var(--pcu)); width: calc(100 * var(--pcu)); }
  .feature .leftcont__ttl { position: absolute; top: calc(var(--rail-h) * 0.8257); left: calc(21 * var(--pcu)); width: calc(481 * var(--pcu)); }

  /* --- 右レール（指示 P2＝固定・目次）: Lineup と丸窓4枚＝SP の素材を PC 寸法で置く --- */
  /* 幅は固定にせず残りいっぱい＝100vw はスクロールバー分（Windows で15px前後）広いので、固定幅だと右へはみ出して横スクロールが出る。
     縮む分は画面の外側で吸収（中身は本文に近い左端基準なので動かない・pc-side-build「スクロールバー吸収」） */
  .feature .frame-side.-idx { flex: 1 1 0; min-width: 0; background: #e9dac9; }
  /* 下の余白はテンプレの既定（80 * --pcu）のまま＝文字・写真の目次は掲載先フッターに接しない */
  .feature .frame-side.-idx .frame-side__inner { --rail-h: calc(100vh - var(--rail-top) - 80 * var(--pcu)); height: var(--rail-h); }
  /* --lu＝SPカンプ1px を PC の目次ブロックの縮尺へ（ブロック 297.3 PCpx ÷ SP 635.46px） */
  .feature .rail-idx { --lu: calc(297.3 * var(--pcu) / 635.46); position: absolute; left: calc(111.4 * var(--pcu));
    top: calc(var(--rail-h) * 0.239); width: calc(635.46 * var(--lu)); height: calc(817.42 * var(--lu)); }
  .feature .rail-idx__ttl { position: absolute; top: 0; left: calc(191.73 * var(--lu)); width: calc(246 * var(--lu)); }
  .feature .rail-idx .ld-card { width: calc(306.51 * var(--lu)); }
  .feature .rail-idx .ld-c1 { top: calc(98.9 * var(--lu)); left: 0; }
  .feature .rail-idx .ld-c2 { top: calc(98.9 * var(--lu)); left: calc(328.95 * var(--lu)); }
  .feature .rail-idx .ld-c3 { top: calc(470.5 * var(--lu)); left: 0; }
  .feature .rail-idx .ld-c4 { top: calc(470.5 * var(--lu)); left: calc(328.95 * var(--lu)); }
  .feature .rail-idx .ld-c1 .ld-card__lbl { top: calc(140.44 * var(--lu)); font-size: calc(54.48 * var(--lu)); }
  .feature .rail-idx .ld-c2 .ld-card__lbl { top: calc(143.67 * var(--lu)); font-size: calc(41.98 * var(--lu)); }
  .feature .rail-idx .ld-c3 .ld-card__lbl { top: calc(130.01 * var(--lu)); font-size: calc(56.07 * var(--lu)); }
  .feature .rail-idx .ld-c4 .ld-card__lbl { top: calc(146.12 * var(--lu)); font-size: calc(69.69 * var(--lu)); }

  /* --- 中央の lead は PC ではロゴ＋導入文だけ（PCカンプ: ロゴ y201・導入文 y300.6・Ribbon の板 y650.4／上端 118） --- */
  .feature .sec-lead { --h: 99.83rem; }
  .feature .ld-logo.-pc { top: 15.56rem; left: 28.12rem; width: 18.75rem; }
  .feature .ld-intro { top: 33.09rem; }

  /* --- PCカンプは Ribbon Dog・Fluffy の節の末尾が SP の縮小より詰まっている（板の上端 650.4→4122.5→9348.1）
     ＝節の高さだけ PC の正値で持つ（中身の位置は SP の縮小のまま一致する＝照合 2026-10-01） --- */
  .feature .sec-ribbon { --h: 651.02rem; }
  .feature .sec-fluffy { --h: 979.8rem; }
}

/* 掲載先CMSのシステム通知を隠す（人の指示）＝器（.feature）の外の要素なので器で囲まない */
.efs-system-notification {
  display: none !important;
}