@charset "UTF-8";
/* A04698 CELFORD AW2先行 カミスン（USAGI ONLINE）＝templates/feature_base.html から複製
   寸法は SPカンプ(750px幅)の正値 px ÷ 10 の rem（1rem＝カンプ10px）。PCの縮尺は html{font-size} の1行だけが持つ。
   余白（margin-top）は draft-measure の flow-margins が書く＝手で直さない（残差は src/text/draft-measure.json の corrections）。 */

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; }

/* ===== 出現（ピンク枠＝ふわっと表示）＝その場で opacity だけ切り替える（動かさない・仕上げの指示）
   時間と緩急は参考 celford 260710 の .fadeInBlock と同値＝1.6s cubic-bezier(0.25,0.46,0.45,0.94)。
   transform は触らない＝要素自前の transform を潰さない（anim-scroll-reveal 落とし穴1）。
   点火は is-inview（is-active は Splide と衝突・規約§8-11）。初期非表示は html.js-anim 越しだけ。 */
html.js-anim .js-reveal { opacity: 0;
  transition: opacity 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
html.js-anim .js-reveal.is-inview { opacity: 1; }

/* 潰して出す演出の2枚組（テンプレの既定・この案件では未使用だが消さない） */
.js-wipe { transition: clip-path 1.4s cubic-bezier(0.37, 0, 0.63, 1) var(--d, 0s); }
.js-wipe.-fromLeft   { clip-path: inset(0 100% 0 0); }
.js-wipe.-fromRight  { clip-path: inset(0 0 0 100%); }
.js-wipe.-fromTop    { clip-path: inset(0 0 100% 0); }
.js-wipe.-fromBottom { clip-path: inset(100% 0 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; }
.is-noanim .js-wipe { transition: none !important; clip-path: none !important; }

/* QA検証用フック(?noanim)＝全アニメを完了状態で固定 */
.is-noanim .js-reveal, .is-noanim .js-anime { transition: none !important; opacity: 1 !important; }
.is-noanim .leftcont__box { transition: none !important; opacity: 1 !important; filter: none !important; transform: 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; transform: 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) { scroll-behavior: auto; }
}

/* ===== 特集共通枠（ここに overflow を置かない＝中の sticky がスマホで震える・#1771） ===== */
.feature { box-sizing: border-box; color: #000; margin: 0 auto; position: relative; width: 100%;
  /* 書体＝構成書 FONT（キット sfl5ncx：游ゴシック体 Pr6N R / Bodoni Moda Variable / Scotch Display Compressed）
     ★書体名は変数にしない＝書体の検査（probe / font-check）は font-family の宣言を文字のまま読む */
  --wine: #802F43;
  --tone: #F2F2EE;
  font-family: yu-gothic-pr6n, "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "Hiragino Kaku Gothic ProN", meiryo, sans-serif;
  font-weight: 400; font-style: normal;
  /* ★この案件は和文が全部「仮名だけ詰まった」字幅（カンプ画素の実測＝リード4行目 645px に対し palt あり 644px／なし 761px。
     漢字だけの字幅は詰まっていない＝字送りではなく palt）。欧文の Bodoni / Scotch には効かない。 */
  font-feature-settings: "palt";
  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, .feature .frame > .pc, .feature .frame-main__inner > .pc { display: none; } /* 既定＝SP。PCブロックで反転する */
.feature a { color: #000; text-decoration: none; }
/* ホバー透過は PC だけ（§8-7）＝写真は写真だけ・文字リンクとボタンは要素ごと */
@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; }

/* Bodoni Moda は可変フォント＝太さは wght 軸（Medium 500 / SemiBold 600）。光学サイズは構成書の指定 "opsz" 11 */
.feature .box01__date, .feature .box01__card, .feature .box01__point, .feature .box01__btn,
.feature .txt27, .feature .dlv01__btn, .feature .credit .link, .feature .txt39, .feature .txt45, .feature .txt46 {
  font-family: bodoni-moda-variable, "Bodoni Moda", serif; font-variation-settings: "opsz" 11;
  /* キットの @font-face は太さ normal の1面だけ＝font-weight 600 に偽の太字を重ねさせない（太さは wght 軸で出す） */
  font-synthesis-weight: none; }
.feature .allitems__txt, .feature .btn01__link { font-family: scotch-display-compressed, serif; font-weight: 400; }

/* ============================================================
   ▼本文（SP/PC共用）
   ============================================================ */
.feature .frame-main__inner { display: flow-root; width: 100%; margin: auto; background: #fff; }
/* 本文の直接子は relative＝描画順をDOM順に固定（§8-2） */
.feature .look, .feature .sl, .feature .pin, .feature .credit, .feature .unit,
.feature .ttl01, .feature .txt12, .feature .box01, .feature .ttl03, .feature .txt39, .feature .ttl04 { position: relative; }
.feature .look a { display: block; }
.feature .look img, .feature .sl img, .feature .pin__over img { width: 100%; }
/* 額縁（写真と同じ箱に重ねる枠のPNG） */
.feature .look__frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.feature .look36 .look__frame.-white { top: .5rem; left: .634rem; width: 64.732rem; height: 81.5rem; }
/* 背景の淡い写真＝動かさない（※背景アニメーション無し）。親の .unit に絶対配置 */
.feature .bgphoto { position: absolute; pointer-events: none; }
.feature .bg07 { top: 20rem; left: 0; width: 75rem; }
.feature .bg13 { top: -5rem; left: 42rem; width: 33rem; }
.feature .bg32 { top: 20rem; left: 0; width: 75rem; }
.feature .bg66 { top: 20rem; left: 0; width: 64rem; }

/* --- FV（SPのみ） --- */
.feature .look01 { margin-top: 0rem; width: 75rem; }

/* --- タイトル（Palace Script・Scotch Light＝キット外＝.ai のアウトラインからSVG） --- */
.feature .ttl01 { margin-top: 10rem; margin-left: 10.1rem; width: 58.6rem; }
.feature .txt12 { margin-top: 8.2rem; text-align: center; font-size: 2.5rem; line-height: 5.5rem; letter-spacing: .05em; color: #000; }

/* --- PRE-ORDER の囲み（えんじ・内側9px/16pxの白の二重線） --- */
.feature .box01 { margin-top: 12.5rem; display: flow-root; background: var(--wine); color: #fff; text-align: center;
  padding: 5.63rem 0 5.61rem; }
.feature .box01::before, .feature .box01::after { content: ""; position: absolute; border: .2rem solid #fff; pointer-events: none; }
.feature .box01::before { top: .9rem; right: .9rem; bottom: .9rem; left: .9rem; }
.feature .box01::after { top: 1.6rem; right: 1.6rem; bottom: 1.6rem; left: 1.6rem; }
.feature .box01__date { font-size: 4.5rem; line-height: 9.585rem; letter-spacing: .004em; } /* 字間はカンプ（＝アウトライン版）のインク幅 292px に合わせた */
.feature .box01__date .-sm { font-size: .756em; line-height: 0; } /* 正値の run＝カッコ 34px・thu 40px（本体 45px）。小さい字で行の高さを押し広げない */
.feature .box01__date .-th { font-size: 1.176em; }
.feature .box01__ttl { margin: 3.28rem 0 0 12.9rem; width: 52.66rem; }
.feature .box01__rule { display: block; width: 12rem; height: .2rem; margin: 2.8rem 0 0 31.5rem; background: #fff; }
.feature .box01__card { margin-top: 4.69rem; font-size: 3.6rem; font-weight: 600; font-variation-settings: "opsz" 11, "wght" 600; line-height: 6.3rem; letter-spacing: -.01em; }
.feature .box01__point { margin-top: -.55rem; font-size: 5rem; font-weight: 500; font-variation-settings: "opsz" 11, "wght" 500; line-height: 10.2rem; letter-spacing: -.03em; } /* 字間はアウトライン版のインク幅 563px に合わせた（.txt27 と同じ理由） */
.feature .box01__point .-lg { font-size: 1.28em; line-height: 0; } /* 正値の run＝「10」64px・「%」45px（本体 50px） */
.feature .box01__point .-pct { font-size: .9em; line-height: 0; margin-right: .28em; } /* カンプは「10%」と「CAMPAIGN」の間が空く（画素実測 約14px） */
/* 赤枠＝view more のアコーディオン（参考 snidel 0703＝max-height 0 ↔ scrollHeight・0.5s ease-in-out） */
.feature .box01__acc { max-height: 0; overflow: hidden; transition: max-height .5s ease-in-out; }
.feature .box01__lead { padding-top: 1.36rem; font-size: 2.5rem; line-height: 5.5rem; letter-spacing: .05em; }
.feature .box01__note { margin-top: 3rem; padding-bottom: 2rem; font-size: 2.1rem; line-height: 4.2rem; letter-spacing: .05em; } /* 正値（txt_open）＝注記 21px・行送り 42px・CLOSE の上端 y2800 */
.feature .box01__btn { position: relative; display: block; margin: 1.75rem auto 0; padding: 0; background: none; border: 0;
  color: #fff; cursor: pointer; font-size: 2.4rem; font-weight: 600; font-variation-settings: "opsz" 11, "wght" 600; line-height: 4.8rem; letter-spacing: .015em; }
.feature .box01__btn .-close { display: none; }
.feature .box01.is-open .-more { display: none; }
.feature .box01.is-open .-close { display: inline; }
.feature .box01__btn::after { content: ""; position: absolute; left: 50%; top: 4.1rem; width: 1.6rem; height: 1.6rem;
  border-right: .2rem solid #fff; border-bottom: .2rem solid #fff; transform: translateX(-50%) rotate(45deg); }
.feature .box01.is-open .box01__btn::after { top: 5.05rem; transform: translateX(-50%) rotate(-135deg); }

/* --- DELIVERY DATE と入荷時期ボタン（オレンジ枠＝各入荷時期のページへ） --- */
.feature .txt27 { margin-top: 9.978rem; text-align: center; color: var(--wine); font-size: 6rem; font-weight: 500; font-variation-settings: "opsz" 11, "wght" 500; line-height: 10.5rem; letter-spacing: -.05em; }
/* ↑字間は正値（-.005em）でなくアウトライン版のインク幅 460px に合わせた＝正値の幅は書体の無い生テキスト版から取られていて当てにならない（太さは weight-probe で 500 と確認） */
.feature .txt29 { margin-top: -1.08rem; text-align: center; color: var(--wine); font-size: 2.4rem; line-height: 4.8rem; letter-spacing: .05em; }
.feature .dlv01 { margin-top: 4.7rem; margin-left: 3.4rem; display: flex; gap: 1.4rem; }
.feature .dlv01__btn { position: relative; display: flex; align-items: center; justify-content: center; width: 16rem; height: 5.4rem;
  background: #765d56; color: #fff; font-size: 3.5rem; font-weight: 600; font-variation-settings: "opsz" 11, "wght" 600; line-height: 1; }
.feature .dlv01__btn::before, .feature .dlv01__btn::after { content: ""; position: absolute; top: 0; bottom: 0; width: .2rem; background: #fff; }
.feature .dlv01__btn::before { left: .4rem; }
.feature .dlv01__btn::after { right: .4rem; }

/* --- ALL ITEMS CHECK（水色枠）＝fixed 禁止の代替＝高さを持つ sticky 層＋負の margin-bottom でフローを動かさない
   SP＝設置位置（本文y2932・右5）から付いて来て、右下（参考 260907：10デザインpx）で留まる。最後の写真の下端で消える。 */
.feature .allitems { position: sticky; z-index: 50; pointer-events: none; }
.feature .allitems.-sp { top: calc(100dvh - 34rem - 66px); height: 34rem; margin-bottom: -34rem; }
/* ↑ 丸の下端＝画面の下から 66px＝掲載先のページトップボタン（fixed・36px 角・下から 20px＝px 固定）の上端より 10px 上（被らないように・仕上げの指示 2026-10-02） */
.feature .allitems .allitems__btn { position: absolute; display: flex; align-items: center; justify-content: center;
  width: 24rem; height: 24rem; padding-top: 2.1rem; border-radius: 50%; background: var(--wine); color: #fff;
  opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.feature .allitems.-sp .allitems__btn { top: 10rem; right: .5rem; }
.feature .allitems.is-visible .allitems__btn { opacity: 1; pointer-events: auto; }
.feature .allitems__btn::before { content: ""; position: absolute; top: .6rem; right: .6rem; bottom: .6rem; left: .6rem;
  border: .2rem solid #fff; border-radius: 50%; }
.feature .allitems__txt { text-align: center; font-size: 5.2rem; line-height: 1.15; letter-spacing: -.035em; }

/* --- 写真（ピンク枠＝ふわっと表示） --- */
.feature .look02 { margin-top: 18rem; margin-left: 2.5rem; width: 70rem; }
.feature .look08 { margin-top: 8.5rem; margin-left: 7rem; width: 68rem; }
.feature .look12 { margin-top: 8.45rem; margin-left: 5.5rem; width: 64rem; }
.feature .look20 { margin-top: 8.6rem; width: 75rem; }
.feature .look22 { margin-top: 15.865rem; margin-left: 4.5rem; width: 66rem; }
.feature .look28 { margin-top: 15.865rem; margin-left: 5rem; width: 70rem; }
.feature .look36 { margin-top: 15.875rem; margin-left: 4.5rem; width: 66rem; }
.feature .look41 { margin-top: 8.4rem; width: 75rem; }
.feature .look57 { width: 75rem; }
.feature .look58 { margin-top: 9.548rem; width: 64rem; }
.feature .look59 { margin-top: 8.5rem; margin-left: 15rem; width: 60rem; }
.feature .look60 { margin-top: 15.865rem; margin-left: 1.5rem; width: 72rem; }
.feature .look65 { margin-top: 15.875rem; margin-left: 9rem; width: 66rem; }
.feature .look67 { margin-top: 8.5rem; margin-left: 2.5rem; width: 70rem; }
.feature .look69 { margin-top: 15.865rem; margin-left: 11rem; width: 64rem; }
.feature .look70 { margin-top: 15.865rem; width: 64rem; }
.feature .look71 { margin-top: 8.5rem; margin-left: 15rem; width: 60rem; }
.feature .look75 { margin-top: 15.875rem; width: 75rem; }

/* --- ★＝自動／ふわっと切替（参考 celford 260605＝Splide fade・3.5秒ごと・1秒のクロスフェード）
   横線＝ページ送り（pagination）を横線にして、今の写真の線だけ ::before の幅を 0→100% へ 3.5秒 linear で満たす。 */
.feature .sl01 { margin-top: 15.865rem; width: 66rem; }
.feature .sl02 { margin-top: 15.865rem; width: 75rem; }
.feature .sl03 { margin-top: 15.875rem; width: 70rem; }
.feature .sl04 { margin-top: 15.875rem; margin-left: 5rem; width: 70rem; }
.feature .sl05 { margin-top: 8.5rem; width: 66rem; }
.feature .sl06 { margin-top: 15.875rem; width: 66rem; }
.feature .sl07 { margin-top: 8.6rem; margin-left: 7rem; width: 68rem; }
.feature .sl08 { margin-top: 15.865rem; width: 64rem; }
.feature .sl09 { margin-top: 15.865rem; margin-left: 9rem; width: 66rem; }
.feature .sl10 { margin-top: 8.5rem; width: 70rem; }
.feature .sl11 { margin-top: 15.875rem; width: 64rem; }
.feature .sl12 { margin-top: 15.875rem; width: 68rem; }
.feature .sl .splide { position: relative; }
.feature .splide__slide a { display: block; }
/* クロスフェード＝参考 260605 の Splide 既定と同値（opacity 1s cubic-bezier(0.25,1,0.5,1)） */
.feature .sl .splide__slide { transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1); }
/* 外部CDNが届かなくても並びが保つ（Issue #1744）＝core CSS と同じ宣言 */
.feature .js-slider .splide__track { overflow: hidden; position: relative; z-index: 0; }
.feature .js-slider .splide__list { display: flex; margin: 0; padding: 0; }
.feature .js-slider .splide__slide { flex-shrink: 0; list-style-type: none; margin: 0; position: relative; width: 100%; }
.feature .sl .splide__pagination { position: absolute; top: 2rem; bottom: auto; z-index: 1; display: flex; gap: 1rem; width: auto; margin: 0; padding: 0; }
.feature .sl.-barR .splide__pagination { right: 1.5rem; left: auto; }
.feature .sl.-barL .splide__pagination { left: 1.5rem; right: auto; }
.feature .splide__pagination li { display: block; line-height: 0; }
.feature .sl .splide__pagination__page { position: relative; display: block; width: 6.4rem; height: .4rem; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: rgba(255, 255, 255, .45); opacity: 1; transform: none; cursor: pointer; }
.feature .sl .splide__pagination__page::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: #fff; }
.feature .sl .splide__pagination__page.is-active::before { animation: sl-bar 3.5s linear forwards; }
@keyframes sl-bar { from { width: 0; } to { width: 100%; } }
.is-noanim .sl .splide__pagination__page.is-active::before { animation: none; width: 100%; }

/* --- 青枠＝一時固定（参考 celford 260710＝sticky・次の写真が上を通る）
   全景（under）を可視領域の中央で留め、寄り（over）が画面下端から上がって内側の位置に着地したら解ける。
   正本 docs/recipes/sticky-freeze-cover.md（内側型＝塊は under 1枚・--v は over の負の margin-top）。 */
.feature .pin .stack { --header-h: 51px;
  --stack-top: calc((100svh + var(--header-h)) / 2 - var(--under-h) / 2);
  --pin: calc(var(--stack-top) + var(--under-h));
  --runway: calc(100svh - var(--pin) + var(--v)); }
.feature .pin01 .stack, .feature .pin02 .stack, .feature .pin03 .stack { --under-h: 93.75rem; }
.feature .pin01 .stack { --v: 86.87rem; }
.feature .pin02 .stack { --v: 84.37rem; }
.feature .pin03 .stack { --v: 88.12rem; }
/* pin02 はクレジット cr13 ごと天地中央へ＝解けた瞬間に cr13 が画面下で見切れない（--tail は JS が実測で入れる） */
.feature .pin02 .stack { --stack-top: calc((100svh + var(--header-h)) / 2 - (var(--under-h) + var(--tail, 0px)) / 2); }
.feature .stack-stick { position: sticky; top: calc(var(--pin) - var(--stick-h, 99999px)); }
.feature .stack-runway { height: 0; }
.has-stack-js .feature .stack-runway { height: var(--runway); }
.feature .pin__over { position: relative; z-index: 1; }
/* 器を閉じる＝寄りの写真の margin-bottom（全景の下端までの戻し）を器の外へ抜かせない */
.feature .pin { display: flow-root; }
/* 寄りの写真の縁の線（画素実測＝5px・pin01/03 は白・pin02 はえんじ）＝画像でなく線で描く（拡大しても粗れない） */
.feature .pin__over.-lineWhite::after, .feature .pin__over.-lineWine::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  border: .5rem solid #fff; pointer-events: none; }
.feature .pin__over.-lineWine::after { border-color: var(--wine); }
.feature .pin__over a { display: block; }
.feature .pin01 { margin-top: 15.865rem; width: 75rem; }
.feature .pin01 .pin__over { margin: -86.87rem 0 6.87rem 5.5rem; width: 64rem; }
.feature .pin02 { margin-top: 15.875rem; width: 75rem; }
.feature .pin02 .pin__over { margin: -84.37rem 0 9.37rem 7.5rem; width: 60rem; }
.feature .pin03 { margin-top: 15.875rem; width: 75rem; }
.feature .pin03 .pin__over { margin: -88.12rem 0 5.62rem 4.5rem; width: 66rem; }
.feature .look27, .feature .look56, .feature .look68 { width: 75rem; }
/* QA(?noanim)＝カンプ（通常の状態＝寄りの写真が出る前）で静止させる・走路0・貼り付きを外す */
.is-noanim .feature .stack-runway { height: 0 !important; }
.is-noanim .feature .stack-stick { position: static; }
.is-noanim .feature .pin__over { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim) .feature .stack-runway { height: 0 !important; }
  html:not(.is-forceanim) .feature .stack-stick { position: static; }
}

/* --- せり上がり（sp_03 の写真 look-57 の上端から）＝前の節を下端で留め、地色の節が上を覆う
   正本 docs/recipes/fv-scroll-cover.md（fixed 禁止＝sticky。覆う側は1枚の不透明シート） */
/* 包み＝前の節が留まるのは覆う側が終わるまで（本文の最後まで留めると、留まった節のクレジットの下線が本文の下端から出てフッターの上に線が2本見えた） */
.feature .cover-wrap { position: relative; display: flow-root; }
.feature .cover-prev { position: sticky; top: calc(min(var(--cp-stop, 100svh), 100svh) - var(--cp-h, 99999px)); } /* 中の青枠が解けた瞬間に止まる（--cp-stop は JS） */
.feature .cover-tone { position: relative; z-index: 1; display: flow-root; margin-top: 15.575rem; padding: 0 0 11.97rem; background: var(--tone); } /* 上の padding は外した（仕上げの指示・2026-10-06） */
/* 止まってから被るまでの溜め＝画面の高さの半分ぶん余計にスクロールさせる（仕上げの指示）。
   節が止まる環境だけ＝止まらない環境（?noanim・視差を減らす）では素の空白になるので足さない */
.has-stack-js .feature .cover-tone { margin-top: calc(15.575rem + 50svh); }
.feature .ending { position: relative; z-index: 1; display: flow-root; padding-top: 10.045rem; padding-bottom: 18rem; background: #fff; } /* 上の空きは padding＝margin だと地色が途切れ、留まっている前の節が透けて見える */
.is-noanim .feature .cover-prev { position: static; }
.is-noanim .feature .cover-tone { margin-top: 15.575rem; }
@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim) .feature .cover-prev { position: static; }
  html:not(.is-forceanim) .feature .cover-tone { margin-top: 15.575rem; }
}

/* --- Early Bloom（写真がふわっと出たあとに文字＝時間差） --- */
.feature .ttl03 { margin-top: -3.08rem; margin-left: 9.15rem; width: 58.4rem; }
.feature .txt39 { margin-top: 1.471rem; text-align: center; color: var(--wine); font-size: 1.8rem; line-height: 3.204rem; letter-spacing: -.025em; }
html.js-anim .feature .ttl03.js-reveal, html.js-anim .feature .txt39.js-reveal { transition-delay: .8s; }

/* --- 結び --- */
.feature .ttl04 { width: 53.3rem; margin-left: 12.7rem; }
.feature .txt45 { margin-top: 3.939rem; text-align: center; color: var(--wine); font-size: 2.2rem; font-weight: 500; font-variation-settings: "opsz" 11, "wght" 500; line-height: 3.19rem; letter-spacing: -.024em; } /* アウトライン版のインク幅 419px に合わせた */
.feature .txt46 { margin-top: 8.3rem; text-align: center; color: #121212; font-size: 2.4rem; line-height: 4.392rem; }
.feature .btn01 { margin-top: 9.309rem; margin-left: 7.5rem; width: 60rem; }
.feature .btn01__link { position: relative; display: flex; align-items: center; justify-content: center; height: 14.2rem;
  background: var(--wine); color: #fff; font-size: 6.4rem; line-height: 1; letter-spacing: -.036em; } /* アウトライン版のインク幅 416px に合わせた */
.feature .btn01__link::before { content: ""; position: absolute; top: .5rem; right: .5rem; bottom: .5rem; left: .5rem; border: .2rem solid #fff; pointer-events: none; }

/* ===== クレジット(credit.inc相当)＝構造は ul.credit > li.item > a.link > span.txt + span.price（規約§8-3）
   Bodoni Moda 22px #121212・下線つき。行構成は器幅の自然折り返し（tune-credits が幅と高さを書く） ===== */
.feature .credit { display: flex; flex-wrap: wrap; align-content: flex-start; column-gap: 2rem; row-gap: 2.45rem; }
.feature .credit.-center { justify-content: center; margin-left: auto; margin-right: auto; }
.feature .credit .item { position: relative; display: block; margin-right: 0; padding-bottom: .2rem; border-bottom: .15rem solid #121212;
  line-height: 2.4rem; letter-spacing: 0; color: #121212; white-space: nowrap; }
.feature .credit .link { font-size: 2.2rem; color: #121212; letter-spacing: .02em; }
.feature .credit .item.-noline { border-bottom: none; }
.feature .cr01 { margin-top: 5.084rem; margin-left: 2.5rem; max-width: 57.06rem; height: 7.95rem; }
.feature .cr02 { margin-top: 5.084rem; margin-left: 7rem; max-width: 57.53rem; height: 7.95rem; }
.feature .cr03 { margin-top: 5.184rem; max-width: 54.37rem; height: 13.15rem; }
.feature .cr04 { margin-top: 5.174rem; margin-left: 2.5rem; max-width: 61.5rem; height: 7.95rem; }
/* cr04 はカンプの行構成（2＋3）が幅だけでは作れない（窓が負）＝2項目めの右を空けて1行目を2項目で折る。
   幅は本番の価格（CMSが描く・ダミー品番では全品 25,300yen）でも2行目の3項目が入るよう広げた＝スマホは字が約4%太く出て 58.84 では3行に折れた（仕上げの指示・2026-10-02） */
.feature .cr04 .item:nth-child(2) { margin-right: 8rem; }
.feature .cr05 { margin-top: 5.134rem; max-width: 56.55rem; height: 7.95rem; }
.feature .cr06 { margin-top: 5.084rem; margin-left: 2.5rem; max-width: 55.33rem; height: 7.95rem; }
.feature .cr07 { margin-top: 5.134rem; max-width: 51.22rem; height: 7.95rem; }
.feature .cr08 { margin-top: 4.784rem; margin-left: 5rem; max-width: 51.74rem; height: 7.95rem; }
.feature .cr09 { margin-top: 5.174rem; margin-left: 7rem; max-width: 63.65rem; height: 7.95rem; }
.feature .cr10 { margin-top: 5.184rem; max-width: 42.04rem; height: 7.95rem; }
.feature .cr11 { margin-top: 5.134rem; max-width: 56.03rem; height: 7.95rem; }
.feature .cr12 { margin-top: 5.084rem; margin-left: 2.5rem; max-width: 57.67rem; height: 7.95rem; }
.feature .cr13 { margin-top: 5.134rem; max-width: 50.81rem; height: 7.95rem; }
.feature .cr14 { margin-top: 5.084rem; margin-left: 15rem; max-width: 49.02rem; height: 7.95rem; }
.feature .cr15 { margin-top: 5.084rem; max-width: 50.56rem; height: 7.95rem; }
.feature .cr16 { margin-top: 5.084rem; margin-left: 2.5rem; max-width: 49.32rem; height: 7.95rem; }
.feature .cr17 { margin-top: 5.084rem; max-width: 48.99rem; height: 7.95rem; }
.feature .cr18 { margin-top: 5.134rem; max-width: 67.94rem; height: 7.95rem; }
.feature .cr19 { margin-top: 5.184rem; margin-left: 11rem; max-width: 41.55rem; height: 2.75rem; }
.feature .cr20 { margin-top: 5.084rem; margin-left: 15rem; max-width: 49.83rem; height: 7.95rem; }
.feature .cr21 { margin-top: 5.084rem; margin-left: 2.5rem; max-width: 72.52rem; height: 7.95rem; }
.feature .cr22 { margin-top: 5.034rem; max-width: 48.65rem; height: 7.95rem; }

/* ===== SP：出し分けの器は箱を作らない（sticky の走路を器で切らない・規約§2） ===== */
@media screen and (max-width: 750px) {
  .feature .frame-main__inner > .sp { display: contents; }
}

/* ============================================================
   ▼PCブロック(751px以上)＝縮尺と、PC専用のフレームだけを持つ
   左エリア＝写真を横縦100%（sticky）／右エリア＝中央に本文 460px（1400px以上は固定・未満は可変＝指示PDF p.3）
   ============================================================ */
@media screen and (min-width: 751px) {
  html { font-size: min(0.4380952vw, 6.1333333px); } /* 1rem=6.1333px@1400（=カンプ10px を460px幅で描く）・1400px以上で止める */

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

  .feature { --pcu: min(0.0714286vw, 1px); --rail-top: 80px; }
  .feature .frame { display: flex; align-items: stretch; }
  .feature .frame-main { flex: 1 1 0; min-width: 0; }
  .feature .frame-main__inner { width: 75rem; margin: 0 auto; }

  /* 左エリア（レール）＝写真が下端まで覆う形＝下の余白は0（#1768） */
  .feature .frame-side { position: relative; flex: 1 1 0; }
  .feature .frame-side.-mv { flex: 0 0 auto; width: 50%; z-index: 2; }
  .feature .frame-side__inner { position: sticky; top: var(--rail-top); }
  .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 { opacity: 0; filter: blur(calc(10 * var(--pcu))); transition: transform .8s, opacity .8s, filter .8s; }
  .feature .leftcont__box.is-inview { opacity: 1; transform: translate(0,0) scale(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_firstview の正値＝面 700×800）。面の寸法は器（container）から取る＝
     上の帯は幅基準（写真と同じく上端・幅で決まる）、下のタイトルは幅と高さの小さいほう基準で下端に留める
     ＝横長でも縦長でも画面内に収まる。下のタイトルの SVG は光彩ぶん大きい（インクの外に約60）＝左と下へ少しはみ出して切れる */
  .feature .leftcont__box { position: relative; height: var(--rail-h); overflow: hidden; container-type: size; }
  .feature .leftcont__box::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(268 * min(100cqw / 700, 100cqh / 800));
    background: linear-gradient(to top, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0)); pointer-events: none; } /* 正値＝白 100%→0%・不透明度6% */
  .feature .leftcont__top { position: absolute; z-index: 1; top: calc(12.5 * 100cqw / 700); left: calc(16 * 100cqw / 700); width: calc(668.417 * 100cqw / 700); margin: 0; }
  .feature .leftcont__ttl { --s: min(100cqw / 700, 100cqh / 800);
    position: absolute; z-index: 1; bottom: calc(-4 * var(--s)); left: calc(50% - 371 * var(--s)); width: calc(730 * var(--s)); margin: 0; }
  .feature .leftcont__top img, .feature .leftcont__ttl img { display: block; width: 100%; height: auto; }

  /* 青枠の留まる位置＝PCの追従ヘッダー 80px を除いた可視領域の中央 */
  .feature .pin .stack { --header-h: 80px; }

  /* 地色 #F2F2EE の入った節は右エリアの横幅100%（指示PDF p.3）＝影を左右へ広げて縦は切る（スクロール幅は増えない）。
     左エリアはこの影より上（z-index 2）。 */
  .feature .cover-tone { box-shadow: 0 0 0 100vw var(--tone);
    clip-path: polygon(-100vw 0, calc(100% + 100vw) 0, calc(100% + 100vw) 100%, -100vw 100%); }

  /* 入荷時期ボタン（PC）＝字のインクが上下中央より 0.5px（.08rem）上に出る（Chrome 系・WebKit とも実測）＝字だけ .08rem 下げる（仕上げの指示・2026-10-07）。
     padding では Chrome 系が字の位置を 1px 単位に丸めて動かない＝1px 未満でも効く transform で下げる */
  .feature .dlv01__txt { display: block; transform: translateY(.08rem); }

  /* ALL ITEMS CHECK（PC）＝SP版の比率のまま画面の右下（右・下とも 20 PCカンプpx）。
     DELIVERY DATE が画面に入ったら translateY(6rem)→0 と opacity を 0.6s ease で出し、最後の写真の下端で消す（参考 260907）。 */
  .feature .allitems.-pc { top: calc(100dvh - 24rem - 20 * var(--pcu)); height: 24rem; margin-bottom: -24rem; }
  .feature .allitems.-pc .allitems__btn { top: 0; right: calc((75rem - 50vw) / 2 + 20 * var(--pcu));
    transform: translateY(6rem); transition: opacity .6s ease, transform .6s ease; }
  .feature .allitems.-pc.is-visible .allitems__btn { transform: translateY(0); }
}

/* ALL ITEMS CHECK の静止（?noanim）＝SPはカンプの設置位置に出す・PCは出さない（カンプ pc_firstview に無い） */
.is-noanim .feature .allitems { position: relative; top: 0; } /* static だと z-index が効かず後ろの写真に潜る・sticky の top を relative のずらしにしない */
.is-noanim .allitems.-sp .allitems__btn { opacity: 1; transition: none; }
.is-noanim .allitems.-pc .allitems__btn { opacity: 0; transition: none; }

/* 掲載先CMSのシステム通知を隠す（仕上げの指示・2026-10-02） */
.efs-system-notification {
  display: none !important;
}

/* 掲載先のフッターを本文より前面へ＝本文とフッターの境目に本文の線が出ないように（仕上げの指示・2026-10-02） */
.l-footer {
  position: relative;
  z-index: 100;
}