@charset "UTF-8";
/* A04759 emmi 26'WINTER COLLECTION PRE ORDER（複製元 templates/feature_base.html）
   寸法＝SPカンプ(750px幅)の正値px ÷10 の rem（1rem=カンプ10px）。PCは html{font-size} の1行だけが縮尺を持つ。 */
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 ===== */
html { scroll-behavior: smooth; font-size: 1.3333333vw; } /* 1rem=5px@375（=カンプ10px） */
/* クレジットのモーダルを開いている間は背面を止める（参考 Mila Owen 0521＝overflow hidden＋スクロールバー幅の詰め物） */
html.is-modal-open { overflow: hidden; padding-right: var(--sbw, 0px); }

/* ===== 出現（指示書の凡例どおり3種＋文字）=====
   ピンク枠 -up＝下から 20px 上がる（参考 baycrews 16445：1s ease・threshold .3）
   オレンジ枠 -inRight / -inLeft＝矢印の側から 40px 入る（参考 milaowen 0514：1s ease-out・下 20% を除いた範囲）
   水色枠／※ -text＝文字の塊ごとに opacity だけ（参考 emmi atelier：1.5s cubic-bezier(.39,.575,.565,1)）
   点火は script.js の IntersectionObserver（種類ごとに参考の発火位置）。初期非表示は html.js-anim 越しだけ。 */
html.js-anim .js-reveal { opacity: 0; transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
html.js-anim .js-reveal.-up { transform: translateY(20px); transition: opacity 1s ease, transform 1s ease; }
html.js-anim .js-reveal.-inRight { transform: translateX(40px); transition: opacity 1s ease-out, transform 1s ease-out; }
html.js-anim .js-reveal.-inLeft { transform: translateX(-40px); transition: opacity 1s ease-out, transform 1s ease-out; }
html.js-anim .js-reveal.-text { transition: opacity 1.5s cubic-bezier(0.39, 0.575, 0.565, 1); }
html.js-anim .js-reveal.is-inview { opacity: 1; transform: none; }
/* QA検証用フック(?noanim)＝全アニメを完了状態で固定。transform を戻すのは出現の変種だけ（センタリングの translate は持っていない） */
.is-noanim .js-reveal { transition: none !important; opacity: 1 !important; }
.is-noanim .js-reveal.-up, .is-noanim .js-reveal.-inRight, .is-noanim .js-reveal.-inLeft { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim) .js-reveal { transition: none !important; opacity: 1 !important; transform: none !important; }
  html:not(.is-forceanim) { scroll-behavior: auto; }
}

/* ===== 特集共通枠 ===== */
/* 地色＝.ai の base レイヤーのグラデーション（正値・角度90＝下端が段0）を本文上端からの rem 位置で敷く。
   ピンク sp01 y132〜3350（段0=透明が下端・25%から上は不透明）／黄 sp02 全高8454（両端透明・25〜75%不透明）／
   灰 sp03 全高8700（同・レイヤー不透明度85%）。地は #F0EEEA。PCも同じ段が全幅に乗る（pc 面の段＝SP×490/750 と一致）。
   スクロールすると画面に見える地色が段に沿って徐々に変わる（指示 ※背景色をグラデーションで徐々に）。 */
.feature { box-sizing: border-box; color: #81808a; margin: 0 auto; position: relative; width: 100%;
  font-family: forma-djr-micro, "Yu Gothic", "游ゴシック", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 400; font-style: normal; font-size: 2rem;
  text-spacing-trim: space-all;
  line-break: strict;
  background:
    linear-gradient(to bottom, #fcedfb 0, #fcedfb 241.35rem, rgba(252, 237, 251, 0) 321.8rem) 0 0 / 100% 321.8rem no-repeat,
    linear-gradient(to bottom, rgba(250, 252, 210, 0) 0, #fafcd2 211.35rem, #fafcd2 634.05rem, rgba(250, 252, 210, 0) 845.4rem) 0 903.8rem / 100% 845.4rem no-repeat,
    linear-gradient(to bottom, rgba(129, 128, 138, 0) 0, rgba(129, 128, 138, .85) 217.5rem, rgba(129, 128, 138, .85) 652.5rem, rgba(129, 128, 138, 0) 870rem) 0 1971.2rem / 100% 870rem no-repeat,
    #f0eeea; }
/* スクロール連動の地色（js/script.js）が動いている間は段の帯を外す＝地色1色を JS が置く（人の指示 2026-10-21）。
   ?noanim では付かない＝段の帯のまま撮る */
.feature.is-bg-linked { background-image: none; }
.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ブロックで反転する */
/* レールの列そのものも SP では出さない＝CMS は div.pc の包みだけを消す（出し分けタグ）ので、
   PC端末を狭めたときに中身だけが残らないようにする（qa cms-view の注意） */
.feature .frame-side { display: none; }
.feature a { color: #81808a; text-decoration: none; }
.feature button { background: none; font: inherit; color: inherit; cursor: pointer; }
/* ホバー透過は【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; }
.feature .u-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ============================================================
   ▼本文（SP/PC共用）
   ============================================================ */
/* 末尾余白＝STAFF の下端→掲載先フッター模擬の上端（sp04 y5518）＝179.2px（規約§8-18） */
.feature .frame-main__inner { display: flow-root; width: 100%; margin: auto; padding-bottom: 17.92rem; }

/* --- FV：動画（枠は .ai の 750×1333.33＝9:16・支給の動画も 1080×1920＝同じ比率）。地色 #ddd は読み込み前の下地 --- */
.feature .fv { position: relative; margin-top: 2.4rem; }
.feature .fv__movie { position: relative; height: 133.3333rem; background: #ddd; }
.feature .fv__video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- 導入 --- */
.feature .intro { display: flow-root; position: relative; text-align: center; }
.feature .intro__season { margin-top: 7.467rem; font-size: 2.4rem; line-height: 3.6rem; letter-spacing: .075em; white-space: pre; }
/* 照合: 字送りがカンプより均等に約1.2px広い（大きさは一致）＝字間 -.005em。縦 6px のずれは draft-measure の corrections（txt02/txt03） */
.feature .intro__ttl { margin-top: 0.906rem; font-family: ivypresto-display, serif; font-weight: 300; font-size: 13.2rem; line-height: 13.2rem; letter-spacing: -.005em; }
/* 左右の飾り線＝.ai の線（151〜216・534〜599／y1793.5・線幅2） */
.feature .intro__sub { position: relative; margin-top: 2.652rem; font-family: ivypresto-display, serif; font-weight: 300; font-size: 4.8rem; line-height: 4.8rem; letter-spacing: .025em; }
.feature .intro__sub::before, .feature .intro__sub::after { content: ""; position: absolute; top: 2.6rem; width: 6.5rem; height: .2rem; background: #81808a; }
.feature .intro__sub::before { left: 15.1rem; }
.feature .intro__sub::after { left: 53.4rem; }
/* 灰色の帯＝.ai の矩形 200×40（#81808A） */
.feature .intro__badge { margin-top: 12.544rem; margin-left: 27.5rem; width: 20rem; height: 4rem; background: #81808a; color: #fcedfb; font-size: 2.8rem; line-height: 4rem; letter-spacing: .025em; }
/* 日付＝1枠の中で字の大きさが段になる（runs: 数字54・空き24・括弧25・曜日32） */
.feature .intro__date { margin-top: 4.189rem; font-family: ivypresto-display, serif; font-weight: 300; font-size: 5.4rem; line-height: 5.022rem; letter-spacing: .035em; white-space: nowrap; }
/* ↑照合: 正値 .045em だと行が 15px 広い（両側へ均等）＝ .035em でインク幅がカンプと 1px 差 */
.feature .intro__date .-sp { font-size: 2.4rem; letter-spacing: .035em; }
.feature .intro__date .-r { font-weight: 400; font-size: 2.5rem; letter-spacing: .035em; }
.feature .intro__date .-wd { font-size: 3.2rem; letter-spacing: .035em; }
.feature .intro__note { margin-top: 3.592rem; font-family: toppan-bunkyu-gothic-pr6n, sans-serif; font-weight: 600; font-size: 2.4rem; line-height: 4.8rem; letter-spacing: .025em; font-feature-settings: "palt"; }
.feature .intro__note .-en { font-family: pragmatica, sans-serif; font-weight: 400; }

/* --- ルック写真 ---
   器＝本文幅いっぱい（横から入る40pxと縦書き見出しをこの器で切る＝§8-18）。写真の位置と幅は --x / --w。
   右下の＋＝.ai の線（4×60 の縦横2本・写真の右下から20px内側）。押すとクレジットのモーダル。
   ＋と枚数表示の色は節ごと（--c：sp02 の前半は黄 #FAFCD2・ほかはピンク #FCEDFB）。 */
.feature .look { position: relative; width: 75rem; overflow-x: clip; --c: #fcedfb; }
.feature .look.-y { --c: #fafcd2; }
.feature .look__photo { position: relative; margin-left: var(--x, 0rem); width: var(--w, 75rem); }
/* 写真リンクの下地＝白へフェード（§8-7）。1px 内側に敷く */
.feature .look__open { display: block; background: linear-gradient(#fff, #fff) center / calc(100% - 2px) calc(100% - 2px) no-repeat; }
.feature .look__open img { width: 100%; }
/* 当たり判定は44px角（§8-3）＝見た目60px（カンプ）の外側へ1.4remずつ広げる */
.feature .look__plus { position: absolute; right: .6rem; bottom: .6rem; z-index: 2; width: 8.8rem; height: 8.8rem; }
/* 棒は線（border）で描く＝太さは画素の整数にそろう。面（background の幅）で描くと、Windows の 125%・150% 表示で
   縦と横の画素のかかり方が変わり、150% では縦 4.5画素・横 3画素と太さが割れた（仕上げの指示 2026-10-16） */
.feature .look__plus::before, .feature .look__plus::after { content: ""; position: absolute; box-sizing: border-box; }
/* 太さ＝--plus-w（線の太さは端数が切り捨てられる＝PC の 2.6px が 2px に細るので、round() で四捨五入。未対応のブラウザは .4rem のまま） */
.feature .look__plus { --plus-w: .4rem; --plus-w: round(.4rem, 1px); }
.feature .look__plus::before { left: 4.2rem; top: 1.4rem; width: 0; height: 6rem; border-left: var(--plus-w) solid var(--c); }
.feature .look__plus::after { left: 1.4rem; top: 4.2rem; width: 6rem; height: 0; border-top: var(--plus-w) solid var(--c); }

.feature .look03 { margin-top: 13.104rem; --x: 0rem; --w: 75rem; }
.feature .look04 { margin-top: 8rem; --x: 0rem; --w: 57rem; }
.feature .look05 { margin-top: 2rem; --x: 22.5rem; --w: 52.5rem; }
.feature .look06 { margin-top: 16.301rem; --x: 2.25rem; --w: 70.5rem; }
.feature .look07 { margin-top: 1.87rem; --x: 2.25rem; --w: 70.5rem; }
.feature .look08 { margin-top: 15.86rem; --x: 0rem; --w: 63rem; }
.feature .look11 { margin-top: 2rem; --x: 15rem; --w: 60rem; }
.feature .look14 { margin-top: 15.611rem; --x: 3rem; --w: 69rem; }
.feature .look17 { margin-top: 8.1rem; --x: 18rem; --w: 57rem; }
.feature .look18 { margin-top: 2rem; --x: 0rem; --w: 54rem; }
.feature .look19 { margin-top: 16.301rem; --x: 6rem; --w: 69rem; }
.feature .look20 { margin-top: 2rem; --x: 0rem; --w: 61.5rem; }
.feature .look21 { margin-top: 16rem; --x: 3rem; --w: 69rem; }
.feature .look24 { margin-top: 2rem; --x: 3rem; --w: 69rem; }
.feature .look27 { margin-top: 16rem; --x: 0rem; --w: 66rem; }
.feature .look28 { margin-top: 2rem; --x: 12rem; --w: 63rem; }
.feature .look29 { margin-top: 16rem; --x: 2.25rem; --w: 70.5rem; }
.feature .look32 { margin-top: 1.86rem; --x: 2.25rem; --w: 70.5rem; }
.feature .look33 { margin-top: 15.87rem; --x: 0rem; --w: 75rem; }
.feature .look34 { margin-top: 8rem; --x: 0rem; --w: 66rem; }
.feature .look37 { margin-top: 16rem; --x: 18rem; --w: 57rem; }
.feature .look38 { margin-top: 2rem; --x: 0rem; --w: 69rem; }
.feature .look39 { margin-top: 16rem; --x: 3rem; --w: 69rem; }
.feature .look40 { margin-top: 2rem; --x: 3rem; --w: 69rem; }
.feature .look41 { margin-top: 16rem; --x: 10.5rem; --w: 54rem; }
.feature .look42 { margin-top: 16rem; --x: 0rem; --w: 66rem; }
.feature .look43 { margin-top: 2rem; --x: 6rem; --w: 69rem; }
.feature .look44 { margin-top: 16rem; --x: 0rem; --w: 60rem; }
.feature .look45 { margin-top: 2rem; --x: 9rem; --w: 66rem; }
.feature .look46 { margin-top: 16rem; --x: 3rem; --w: 69rem; }
.feature .look49 { margin-top: 16rem; --x: 0rem; --w: 69rem; }
.feature .look50 { margin-top: 2rem; --x: 15rem; --w: 60rem; }
.feature .look51 { margin-top: 16rem; --x: 4.5rem; --w: 66rem; }

/* 外部CDNが届かなくても並びが保つ（slider-build 手順3・Issue #1744）。core CSS と同じ宣言＝見た目は変わらない。
   ★.feature を付けない＝付けると詳細度が core の fade 用（.splide--fade>.splide__track>.splide__list）と並び、
     後に読む案件CSSが勝ってフェードの重ね方を壊す。 */
.js-slider .splide__track { overflow: hidden; position: relative; z-index: 0; }
.js-slider .splide__list { display: flex; margin: 0; padding: 0; }
.js-slider .splide__slide { flex-shrink: 0; list-style-type: none; margin: 0; position: relative; width: 100%; }

/* --- 写真のフェードスライダー（★＝参考 Mila Owen 0521：Splide fade・rewind・4500ms・1500ms）---
   左上の枚数表示＝.ai の四角（外寸12px・線3px／写真の左上から17px・間隔9px）。表示中が塗り。 */
.feature .js-slider .splide__pagination { position: absolute; top: 1.7rem; left: 1.7rem; z-index: 1; display: flex; gap: .9rem; padding: 0; margin: 0; }
.feature .splide__pagination > li { display: block; line-height: 0; }
.feature .js-slider .splide__pagination__page { display: block; width: 1.2rem; height: 1.2rem; border: .3rem solid var(--c, #fcedfb); border-radius: 0; background: none; opacity: 1; transform: none; margin: 0; padding: 0; }
.feature .js-slider .splide__pagination__page.is-active { background: var(--c, #fcedfb); transform: none; }

/* --- 縦書きの見出し「NIKE meets emmi」（rotation 90＝上から下へ読む・字の大きさ3段 92/54/84）---
   位置＝行ボックスの右端を正値の枠の右端へ（枠 116.86 幅・行ボックスは line-height 1 で 92px） */
.feature .look__vttl { position: absolute; top: 0; z-index: 1; pointer-events: none;
  writing-mode: vertical-rl; text-orientation: sideways; white-space: nowrap;
  font-family: ivypresto-display, serif; font-weight: 300; font-size: 9.2rem; line-height: 1; letter-spacing: .025em; color: #81808a; }
/* .ai の文字枠が不透明度80%（4本とも）＝出現アニメが箱の opacity を動かすので中の字へ掛ける */
.feature .look__vttl > span { opacity: .8; }
/* 照合: インクが3本ともカンプより 4〜5px 左（縦組みの字面の寄り）＝一律に右へ */
.feature .look__vttl { margin-left: .4rem; }
.feature .look__vttl .-l2 { font-size: 5.4rem; letter-spacing: .01em; } /* 照合: meets だけ字ごとに約1.5px広く emmi を 12px 押していた */
.feature .look__vttl .-l3 { font-size: 8.4rem; }
.feature .look05 .look__vttl { left: 11.8rem; }
.feature .look11 .look__vttl { left: 4.3rem; }
.feature .look18 .look__vttl { left: 55.986rem; }
.feature .look33 .look__vttl { left: 64.3rem; top: 3rem; color: #fcedfb; }

/* --- 写真の下の品名（Exclusive＋右へ伸びる線＝.ai の線・不透明度80%） --- */
.feature .cap { display: flow-root; position: relative; }
.feature .cap__label { position: relative; font-size: 2.6rem; line-height: 4.55rem; letter-spacing: .025em; }
.feature .cap__label::after { content: ""; position: absolute; height: .2rem; background: #81808a; }
/* 灰色の3組は .ai の文字枠が不透明度80%（Exclusive・品名とも）＝線は親の .8 を受ける */
.feature .cap05 > p, .feature .cap11 > p, .feature .cap18 > p { opacity: .8; }
.feature .cap__name { font-family: ivypresto-display, serif; font-weight: 400; font-size: 4.8rem; line-height: 4.8rem; letter-spacing: .03em; white-space: nowrap; }
/* ↑照合: 正値の字間は .045/.045/.025 だが、カンプのインク幅から逆算すると3本とも約 .03em（字を追うごとに均等にずれていた） */
.feature .cap05__label { margin-top: 1.525rem; margin-left: 22.5rem; }
.feature .cap05__label::after { top: 2.275rem; left: 12rem; right: 0; }
.feature .cap05__name { margin-top: 0.226rem; margin-left: 22.5rem; }
.feature .cap11__label { margin-top: 1.5625rem; margin-left: 15rem; font-size: 2.5rem; line-height: 4.375rem; }
.feature .cap11__label::after { top: 2.19rem; left: 11.6rem; right: 0; }
.feature .cap11__name { margin-top: 0.2615rem; margin-left: 15rem; }
.feature .cap18__label { margin-top: 1.525rem; margin-left: 2.51rem; }
.feature .cap18__label::after { top: 2.275rem; left: 11.99rem; width: 39.5rem; }
.feature .cap18__name { margin-top: 0.226rem; margin-left: 2.5rem; }

/* --- 写真の上の品名（look33・ピンク）＝.ai の位置（Exclusive y900・線 y912.5・品名 y937） --- */
.feature .look33__cap { position: absolute; top: 89.0625rem; left: 0; width: 100%; pointer-events: none; color: #fcedfb; }
.feature .look33__cap .cap__label { margin-left: 2.668rem; font-size: 2.5rem; line-height: 4.375rem; }
.feature .look33__cap .cap__label::after { top: 2.1875rem; left: 11.6rem; width: 37.93rem; background: #fcedfb; opacity: 1; }
.feature .look33__cap .cap__name { margin-top: .2625rem; margin-left: 2.5rem; letter-spacing: .025em; } /* 照合: 正値 .035em だと右端がカンプより約6px外 */

/* --- Utility Elegance の塊（look41 の右上に重なる見出し・-90°の縦書き・縦線）＝.ai sp03 y5961.62 / y6434.39 / 線 x75.5 --- */
.feature .look41__group { position: absolute; inset: 0; pointer-events: none; color: #fcedfb; }
.feature .look41__group::before { content: ""; position: absolute; left: 7.55rem; top: 0; width: .2rem; height: 42.4rem; background: #fcedfb; }
.feature .look41__ttl { position: absolute; top: -3.838rem; right: 6.5rem; margin-right: -.03em; white-space: nowrap;
  font-family: ivypresto-display, serif; font-weight: 400; font-size: 6.8rem; line-height: 1; letter-spacing: .03em; }
/* ↑照合: 正値 .04em だと左端がカンプより約10px外＝品名と同じく実効 .03em */
.feature .look41__season { position: absolute; top: 43.439rem; left: 6.309rem; transform: rotate(180deg);
  writing-mode: vertical-rl; text-orientation: sideways; white-space: nowrap; font-size: 2.5rem; line-height: 1; letter-spacing: .025em; }

/* --- VIEW ALL（.ai：左右の線 210×3・ボタン 350×90／710×95 #81808A・矢印は線幅3のピンク） --- */
.feature .viewall { display: flow-root; position: relative; text-align: center; }
.feature .viewall__ttl { position: relative; margin-top: 15.6rem; font-family: ivypresto-display, serif; font-weight: 300; font-size: 7.2rem; line-height: 7.2rem; letter-spacing: .03em; }
.feature .viewall__ttl::before, .feature .viewall__ttl::after { content: ""; position: absolute; top: 4.05rem; width: 21rem; height: .3rem; background: #81808a; }
.feature .viewall__ttl::before { left: 0; }
.feature .viewall__ttl::after { right: 0; }
.feature .viewall__head { display: block; } /* 見出しと副題をまとめて ALL の検索へ（構成書 A） */
.feature .viewall__sub { margin-top: 0.615rem; font-size: 2.6rem; line-height: 4.55rem; letter-spacing: .025em; }
.feature .viewall__btns { margin-top: 5.736rem; margin-left: 2rem; width: 71rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.feature .viewall__btns .-wide { grid-column: 1 / -1; }
.feature .viewall__btn { position: relative; display: flex; align-items: center; justify-content: center; height: 9rem; background: #81808a; color: #fcedfb; font-size: 3.8rem; line-height: 1; letter-spacing: .025em; }
.feature .viewall__btn.-wide { height: 9.5rem; }
.feature .viewall__btn::after { content: ""; position: absolute; top: 50%; right: 1.81rem; width: 1.51rem; height: 3.19rem; transform: translateY(-50%);
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.1 31.9'%3E%3Cpolyline points='1.2,1 13.6,15.95 1.2,30.9' fill='none' stroke='%23fcedfb' stroke-width='3'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

/* --- 結び（Rethink Wellness のマーク・STAFF） --- */
.feature .closing { display: flow-root; text-align: center; }
.feature .closing__mark { margin-top: 10rem; margin-left: 29.8rem; width: 15.4rem; } /* 照合: 絵の実寸 154×232（切り出し枠 158×236 を器にすると 2.6% 拡大していた） */
.feature .closing__mark img { width: 100%; }
.feature .closing__lead01 { margin-top: 0.665rem; font-size: 3rem; line-height: 5.25rem; letter-spacing: .025em; }
.feature .closing__lead02 { margin-top: -1.039rem; font-size: 3rem; line-height: 5.25rem; letter-spacing: .025em; }
.feature .closing__staff { margin-top: 12.376rem; font-size: 2.4rem; line-height: 4.2rem; letter-spacing: .05em; }

/* ============================================================
   ▼クレジットのモーダル（写真／＋で開く・全17組を縦に並べ押した組まで送る）
   fixed禁止の例外①＝画面全体を覆う一時UI（docs/cms-embed.md §1）。参考 Mila Owen 0521 の覆いの値
   （opacity・visibility を .6s ease・背面スクロール停止・余白タップで閉じる）。地と寸法は page_credit.ai の正値。
   ============================================================ */
/* 高さ＝100dvh（iOS はアドレスバー・ツールバーの分だけ 100vh が画面より高く、下端が裏に隠れて最後の組のクレジットが見切れた
   ＝人の指摘 2026-10-21・iOS Chrome）。dvh 未対応のブラウザは直前の 100vh が効く */
/* fixed禁止の例外①＝画面全体を覆う一時UI（lint:allow-fixed） */
.feature .credit-modal { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh; z-index: 10000; overflow-y: auto; overscroll-behavior: contain;
  background: #f0eeea; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .6s ease, visibility .6s ease; }
.feature .credit-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
/* ×＝page_credit.ai の 60×60（右上から45px）。当たり判定は44px角（§8-3） */
/* fixed禁止の例外①＝モーダルの×（覆いと一緒に出る・lint:allow-fixed） */
.feature .credit-modal__close { position: fixed; top: 3.1rem; right: calc(3.1rem + var(--sbw, 0px)); z-index: 2; width: 8.8rem; height: 8.8rem; padding: 1.4rem; }
.feature .credit-modal__close img { width: 100%; }
.feature .credit-modal__inner { width: 75rem; margin: 0 auto; padding-top: 16rem; padding-bottom: env(safe-area-inset-bottom, 0px); } /* ホームバーの分だけ末尾を逃がす */
.feature .credit-modal__item { padding-bottom: 15.3rem; }
.feature .credit-modal__photo { position: relative; width: 69rem; margin: 0 auto; --c: #fcedfb; }
.feature .credit-modal__photo img { width: 100%; }
.feature .credit-modal__link { display: block; } /* 写真ごとの検索リンク（構成書 1〜41） */
/* クレジット（ul.credit > li.item > a.link > span.txt + span.price＝規約§8-3 の固定構造）。
   行の組み方＝カンプの改行は「何品目の後か」で決まっていて器幅では作れない組がある
   （組01＝2行目のほうが長いのに1行目は2品で切れる・組03/06 は余裕が数pxしかない＝実フォントで実測）。
   だから <br> を使わず、行の切れ目に高さ0・幅100%のフレックス項目（::before / ::after）を並び順で差し込む。
   -b1-N＝N品目の後で1回目の改行・-b2-N＝N品目の後で2回目の改行。下線は無い意匠。 */
.feature .credit { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; column-gap: 2.16rem; margin: 2.4rem auto 0; max-width: 69rem; }
.feature .credit .item { display: block; position: relative; margin: 0; line-height: 4.8rem; white-space: nowrap; }
.feature .credit-modal .credit .item { height: 4.75rem; } /* 照合: 書体の混在で行の箱が 50px に膨らみ、カンプの行送り 47.5px と組ごとにずれていた */
/* ブランド名の器＝全品に置き、中身は丸カッコ込み（CMS では credit.tsv の4列目）。空の品は何も出ない。
   手前の空白は CSS で足す＝TSV の値の先頭の空白に頼らない（人の指示 2026-10-16・一部の品だけブランド名が付く紙面） */
.feature .credit .brand:not(:empty)::before { content: " "; }
.feature .credit .link { font-size: 2.4rem; letter-spacing: .05em; color: #81808a; }
.feature .credit .price { margin-left: .3em; }
.feature .credit .item.-noline { border-bottom: none; }
.feature .credit::before, .feature .credit::after { flex-basis: 100%; height: 0; }
.feature .credit.-b1-2::before, .feature .credit.-b1-3::before { content: ""; order: 1; }
.feature .credit.-b2-4::after, .feature .credit.-b2-5::after { content: ""; order: 3; }
.feature .credit.-b1-2 .item:nth-child(n+3) { order: 2; }
.feature .credit.-b1-3 .item:nth-child(n+4) { order: 2; }
.feature .credit.-b2-4 .item:nth-child(n+5) { order: 4; }
.feature .credit.-b2-5 .item:nth-child(n+6) { order: 4; }

/* ============================================================
   ▼PCブロック(751px以上) — 縮尺と、PC専用のフレームだけを持つ
   ============================================================ */
@media screen and (min-width: 751px) {
  /* 中央本文＝SP本文を 490px で流し込み・1400px 以上は固定・未満は 490×100vw/1400（指示書 PC版）
     ＝1rem は 490÷75＝6.5333px（@1400）。 */
  html { font-size: min(0.4666667vw, 6.5333333px); }

  .feature .pc { display: block; }
  .feature .sp { display: none; }
  .feature .frame > .pc { display: contents; }
  .feature {
             --pcu: 0.0714286vw; /* 1 PCカンプpx（カンプ幅1400） */
             --rail-top: 80px;   /* 両端レールの貼り付き位置＝USAGI の PC 追従ヘッダー高（テンプレの固定値） */ }

  .feature .frame { display: flex; align-items: stretch; justify-content: center; }
  .feature .frame-main { flex: 0 0 auto; width: 75rem; }
  /* 左右レール＝残り幅を等分・中身は画面の上下左右中央（参考 emmi atelier の .lp-left-area / .lp-right-area）。
     寸法は pc 面の正値 × --pcu（画面幅に比例＝指示書「可変サイズ」）。
     色＝地色と一緒にスクロールへ連動（script.js が --rail-color を置く＝灰の区間で #81808a → #fcedfb）・VIEW ALL を過ぎたら消す */
  .feature .frame-side { display: block; position: relative; flex: 1 1 0; }
  .feature .frame-side__inner { position: sticky; top: var(--rail-top); height: calc(100vh - var(--rail-top)); margin-bottom: calc(80 * var(--pcu));
    display: grid; place-items: center; color: var(--rail-color, #81808a); transition: opacity 1s ease; }
  .feature.is-railhide .frame-side__inner { opacity: 0; pointer-events: none; }
  /* 絵＝_ol の pc 面から書き出した SVG を本文へ埋め込み（塗り currentColor＝上の color で灰⇔ピンク）。
     CSS マスクにしない＝マスク画像は CORS で取りに行くので file:// では描かれない（手元の検査で消えた）。 */
  .feature .rail__ttl { position: relative; width: calc(348.44 * var(--pcu)); }
  /* Utility Elegance の両脇の線＝CSS の線で描く（SVG の高さ1の線は幅によって画素をまたいで薄くなった・ボタンの枠と同じ）。
     位置は元の SVG の rect（viewBox 348.437×140.36・x 41.032 幅34／x 271.032 幅39.262・y 124.448）の比 */
  .feature .rail__ttl::before, .feature .rail__ttl::after { content: ""; position: absolute; top: 88.663%; border-top: 1px solid currentColor; }
  .feature .rail__ttl::before { left: 11.776%; width: 9.758%; }
  .feature .rail__ttl::after { left: 77.785%; width: 11.268%; }
  .feature .rail__ttlsvg { display: block; width: 100%; height: auto; }
  .feature .rail__btn { display: block; position: relative; width: calc(240 * var(--pcu)); color: inherit; }
  /* 枠は CSS の線で描く＝SVG の枠（1単位）は拡大縮小で画素をまたぎ、下と右の線だけ薄く細く見えた（仕上げの指示 2026-10-15） */
  .feature .rail__btn::after { content: ""; position: absolute; inset: 0; border: 1px solid currentColor; pointer-events: none; }
  .feature .rail__btnsvg { display: block; width: 100%; height: auto; }

  /* モーダルの×＝page_pc_credit_img の 42px 角（右上から44px）＝--pcu。当たり判定は 44px 以上を保つ */
  .feature .credit-modal__close { top: calc(44 * var(--pcu) - 1px); right: calc(44 * var(--pcu) - 1px + var(--sbw, 0px)); width: calc(42 * var(--pcu) + 2px); height: calc(42 * var(--pcu) + 2px); min-width: 44px; min-height: 44px; padding: 1px; }
}