@charset "UTF-8";
/* ============================================================
260812FID New In Denim（FRAY I.D）
ベース: templates/feature_base.html（PCフレーム＝左sticky＋中央本文）
寸法: docs/recipes/dual-scale-units.md の --u 単一ソース方式
全値は SPカンプ(750px)の実測px そのまま。縮尺は --u だけが持つ
PC = 460/750 ÷10 = 0.0613333rem（右カラム内側460px@1400）
SP = 1/2/10 = 0.05rem （カンプ750 → 実機375）
★指示書: 画面幅1400px以上は固定・1400px以下は可変（右カラム）
左カラムのMV画像・タイトルは画面幅で可変（キャップ無し＝vwで記述）
============================================================ */
body { margin: 0; }
/* ===== CMS組み込み用の必須リセット（規約 §6 / docs/cms-embed.md §3）=====
LP本体（.feature 配下）ではなく CMS側の器に当てるので .feature で包まない。
・共通CSS(p/common/style.css)の .l-container{width:1140px} を全幅に戻す
・共通CSS(p/shared/common/style.css・header-footer.css)のフッター余白を落とす
・.l-container:after{content:'.'} の旧式クリアフィックスが最下部に作る白帯を消す（#97。float回収は残す）
いずれも共通CSS側は素のクラス1個・!important なし、LPのCSSは共通CSSより後に読まれる＝上書きできる。
SP系統(s/…)には .l-container / .l-footer / .pc-footer の宣言が無いのでメディアクエリで囲む必要はない。 */
.l-container {
width: 100%;
}
.l-footer,.pc-footer {
margin: 0;
padding: 0;
}
.l-container::after {
content: "";
}
/* ===== リキッド基準 ===== */
html { scroll-behavior: smooth; font-size: 0.714286vw; } /* 1rem=10px@1400 */
@media screen and (min-width: 1400px) { html { font-size: 10px; } } /* ★指示書: 1400px以上は固定 */
@media screen and (max-width: 768px) { html { font-size: 2.66667vw; } } /* 1rem=10px@375 */
/* ===== フェードイン(inview) ===== */
.js-fade { opacity: 0; transition: opacity 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.js-fade.is-active { opacity: 1; }
/* FV（PC左カラム・SP MV）は .leftcont__Box / .mv を1つの点火元にして、
写真＋キャプション（写真に焼き込まれていた要素）を先に、
タイトル（New In Denim）とロゴ（FRAY I.D）を 1 秒遅らせて重ねる。
★指示書「New In Denim と FRAY I.D のロゴは画像と時差で」＝2026-08-03 に復帰
（2026-07-31 に担当者判断で時差なしにしていたのは誤り）。
時差 1.0 秒は同ブランドの既存LP（2026/260428_office）の実測値に合わせた
＝あちらは画像 0s・テキスト transition-delay 1s の 1.2s フェード。
遅延は「子自身を .js-fade にする」のではなく親の is-active に連動させる。
子を .js-fade にすると軽いSVGテキストが重い写真より先に点火して順序が逆転する
（script.js の whenImagesReady ＝ FVは画像が decode できるまで点火を待つゲート）。 */
.js-fade .-d1 { opacity: 0; transition: opacity 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-delay: 1s; }
.js-fade.is-active .-d1 { opacity: 1; }
/* QA検証用フック(?noanim)＝全アニメを完了状態で固定 */
.is-noanim .js-fade,
.is-noanim .js-fade .-d1 { transition: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
.is-noanim .xfade__Link { transition: none !important; }
/* reduced-motion フォールバック＝OSの「視差効果を減らす」設定では完了状態で見せる（a11y） */
@media (prefers-reduced-motion: reduce) {
.js-fade,
.js-fade .-d1 { transition: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
.xfade__Link { transition: none !important; }
}
/* ===== 特集共通枠 ===== */
.feature { box-sizing: border-box; color: #fff; margin: 0 auto; overflow: clip; position: relative; width: 100%;
font-family: "dnp-shuei-gothic-kin-std", sans-serif; font-weight: 400; font-style: normal; font-feature-settings: "palt";
background: #831922; /* ページ全体＝ワインレッド（見本実測 #831922／All Items文字色と同値） */
--u: 0.0613333rem; /* PC: 460/750 ÷10 */
--header-h: 80px; /* サイト側追従ヘッダー高（USAGI ONLINE / FRAY I.D 実測・docs/brand-specs.md） */ }
.feature * { margin: 0; padding: 0; border: 0; vertical-align: baseline; box-sizing: border-box; scroll-margin-top: 50px; }
.feature .sp { display: none; }
.feature a { color: inherit; text-decoration: none; }
/* ホバー透過はPCだけ＝@media (hover: hover) で包む（coding-rules §8-7）。
素の a:hover はタッチ端末でタップ時に発火し、指を離しても薄いまま張り付く */
@media (hover: hover) {
.feature a img { transition: .6s; }
.feature a:hover img { opacity: .7; }
}
/* height:auto ＝ width/height属性（CLS対策で入れている）が presentational hint として残り
幅だけCSSで変えると縦横比が崩れるのを防ぐ。実寸を持たせる要素は個別に height を上書きする */
.feature img { vertical-align: bottom; max-width: 100%; height: auto; }
.feature ul, .feature ol { list-style: none; }
/* ============================================================
▼PCフレーム（左sticky MV ＋ 中央本文）
============================================================ */
.feature .frame { display: flex; align-items: stretch; justify-content: center; }
.feature .frame > .pc { display: contents; }
.feature .frame-main { flex: 0 0 auto; width: 50%; background: #831922; }
.feature .frame-main__Inner { overflow: clip; width: 46rem; margin: auto; }
.feature .frame-side { position: relative; flex: 1 1 0; }
.feature .frame-side__Inner { position: sticky; top: var(--header-h); }
/* --- PC左sticky: 画面半分のフルハイトMV --- */
.feature .frame-side.-mv { flex: 0 0 auto; width: 50%; }
.feature .frame-side.-mv .frame-side__Inner { height: calc(100vh - var(--header-h)); width: 100%; }
.feature .leftcont__Box { position: relative; height: 100%; width: 100%; }
.feature .leftcont__Thum { height: 100%; width: 100%; }
.feature .leftcont__Thum img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* タイトル・ロゴ・キャプションは「画面幅で可変」＝キャップの掛かる rem ではなく vw（PCカンプ1400px基準）。
下2つは紙面下端基準、上2つ（キャプション）はMV上端基準で置く */
.feature .leftcont__Ttl { position: absolute; left: 5.59286vw; bottom: 8.14286vw; width: 38.74286vw; }
.feature .leftcont__Logo { position: absolute; left: 17.53571vw; bottom: 4.34286vw; width: 14.92143vw; }
.feature .leftcont__Cap { position: absolute; }
.feature .leftcont__Cap.-year { left: 1.93571vw; top: 1.8vw; width: 10.58571vw; }
.feature .leftcont__Cap.-lead { left: 24.17857vw; top: 1.7vw; width: 23.88429vw; }
.feature .leftcont__Cap img { display: block; width: 100%; }
/* ============================================================
▼SP専用MV（カンプ y122 を基準0とする）
============================================================ */
.feature .mv { position: relative; }
.feature .mv__Thum img { display: block; width: calc(var(--u) * 750); height: calc(var(--u) * 1000); object-fit: cover; }
.feature .mv__Ttl { position: absolute; left: calc(var(--u) * 57.2); top: calc(var(--u) * 784.2); width: calc(var(--u) * 634.6); }
.feature .mv__Logo { position: absolute; left: calc(var(--u) * 266.5); top: calc(var(--u) * 904.3); width: calc(var(--u) * 217.1); }
/* 写真に焼き込まれていたキャプションを分離してSVGで重ねる（.aiのアウトライン実測そのまま） */
.feature .mv__Cap { position: absolute; }
.feature .mv__Cap.-year { left: calc(var(--u) * 26.8); top: calc(var(--u) * 30.3); width: calc(var(--u) * 166.9); }
.feature .mv__Cap.-lead { left: calc(var(--u) * 416.8); top: calc(var(--u) * 30.2); width: calc(var(--u) * 307); }
/* 行ボックスの余白を出さない＝pの高さ＝画像の高さにする（絶対配置の基準ズレ防止） */
.feature .mv__Ttl img, .feature .mv__Logo img, .feature .mv__Cap img,
.feature .leftcont__Ttl img, .feature .leftcont__Logo img { display: block; width: 100%; }
/* ============================================================
▼本文（ワインレッド地）
============================================================ */
.feature .main { background: #831922; padding-top: calc(var(--u) * 107.8); padding-bottom: calc(var(--u) * 147); }
/* --- 導入文 --- */
.feature .lead { font-family: "dnp-shuei-gothic-kin-std", sans-serif; font-weight: 500; font-style: normal;
font-size: calc(var(--u) * 24); line-height: 2; letter-spacing: .05em; text-align: center; color: #fff; }
/* --- ルック写真 --- */
.feature .style { display: flow-root; } /* margin相殺の遮断（セクション先頭の margin-top を逃がさない） */
.feature .style01 { margin-top: calc(var(--u) * 149.2); }
.feature .style02 { margin-top: calc(var(--u) * 193.2); }
.feature .style03 { margin-top: calc(var(--u) * 194.2); }
.feature .style04 { margin-top: calc(var(--u) * 192.2); }
.feature .look { position: relative; }
.feature .look img { display: block; width: calc(var(--u) * 750); height: calc(var(--u) * 1125); object-fit: cover; }
.feature .look.-last { margin-top: calc(var(--u) * 20); }
.feature .look.-last img { height: calc(var(--u) * 500); }
/* --- 縦書き「2026 Denim Collection」（写真に重なる）
ライブテキスト＋writing-mode ではカーニングがカンプと合わないのでSVG画像にした
（位置・寸法は .ai のアウトライン実測そのまま） --- */
.feature .vtxt { position: absolute; top: calc(var(--u) * 33.6); left: calc(var(--u) * 29.7);
width: calc(var(--u) * 29.1); pointer-events: none; }
.feature .vtxt.-right { left: auto; right: calc(var(--u) * 29.9); top: calc(var(--u) * 31.4); }
/* ★height / object-fit を明示する＝同じ .look 配下にある写真用ルール
（.feature .look img の height:1125u ＋ object-fit:cover）に潰されるのを防ぐ */
.feature .vtxt img { display: block; width: 100%; height: calc(var(--u) * 313.1); object-fit: fill; }
/* --- 画像切替（2枚がふわっとクロスフェード・ドット操作可）
1枚目・2枚目はそれぞれ別リンク（構成書のリンクリストが別番号）＝aごと重ねて切り替える。
visibility を遅延で落として、隠れている側がキーボードのタブ順に残らないようにする --- */
.feature .xfade { width: calc(var(--u) * 750); height: calc(var(--u) * 1125); }
.feature .xfade__Link { display: block; position: absolute; inset: 0;
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity 1.2s ease, visibility 0s linear 1.2s; }
.feature .xfade__Link.is-current { opacity: 1; visibility: visible; pointer-events: auto;
transition: opacity 1.2s ease, visibility 0s; }
.feature .xfade__Img { display: block; width: 100%; height: 100%; object-fit: cover; }
.feature .xfade__Dots { position: absolute; right: calc(var(--u) * 20); top: calc(var(--u) * 1042);
width: calc(var(--u) * 14); z-index: 2; }
.feature .xfade__Dot { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.feature .xfade__Dot + .xfade__Dot { margin-top: calc(var(--u) * 35); }
.feature .xfade__Dot button { display: block; width: 100%; height: 100%; border-radius: 50%;
border: calc(var(--u) * 2) solid #fff; background: none; cursor: pointer; }
.feature .xfade__Dot.is-active button { background: #fff; }
/* --- クレジット（構造は全案件固定＝ul.credit > li.item > a.link > span.txt + span.price／規約8-3）
★改行は
を使わず「器の幅による自然折り返し」で作る。
CMSの credit.inc は TSV をループして同じ形の li を並べるだけ＝リストの途中に
も
行ごとの別クラスも入れられない（＝本番では必ず自然折り返しになる）。
そこで li は完全に等質なまま、折り返し位置は .credit の幅ひとつで決める。
幅の決め方（カンプ＝本番Oggレンダの実測から算出。単位はカンプpx）:
4項目のクレジット … 1行目 384〜427 / 3つ目を足すと 556〜613 → その中間の 490 を採る
5項目のクレジット … 1行目 585 / 4つ目を足すと 757 → その中間の 665 を採る
どちらも上下に約14%の余裕がある＝フォント差で折り返しが動きにくい値。
ずれたときは下の --credit-w / --credit-w5 の数値1つだけを直せばよい（クラスは増やさない）。 */
.feature .credit { --credit-w: 490; --credit-w5: 665;
display: flex; flex-wrap: wrap; justify-content: center;
column-gap: calc(var(--u) * 12); /* インク間で約14.5px＝カンプの語間ダブルスペース相当 */
width: calc(var(--u) * var(--credit-w)); margin-inline: auto;
font-family: "ogg", serif; font-weight: 400; font-style: normal;
font-size: calc(var(--u) * 23); line-height: 1.8; letter-spacing: .05em; text-align: center; color: #fff; }
/* 項目が5つ以上あるクレジットだけ「3個/行」に収まる幅へ広げる（カンプの 3/2 折り） */
.feature .credit:has(.item:nth-child(5)) { --credit-w: var(--credit-w5); }
.feature .credit .item { border-bottom: none; } /* このカンプは下線なし＝CMS共通CSSが引く場合の打ち消しも兼ねる */
.feature .credit .item .link { color: #fff; }
.feature .style01 .credit { margin-top: calc(var(--u) * 22); }
.feature .style02 .credit { margin-top: calc(var(--u) * 21); }
.feature .style03 .credit { margin-top: calc(var(--u) * 22); }
.feature .style04 .credit { margin-top: calc(var(--u) * 21); }
/* --- ALL ITEMS（枠・地色・文字ごと1枚のSVG＝btn-01.svg。地色はSVG内の白80%＝下のワインが透ける） --- */
.feature .allitems { width: calc(var(--u) * 484); margin: calc(var(--u) * 195.2) auto 0; }
.feature .allitems__Link { display: block; }
.feature .allitems__Link img { display: block; width: 100%; }
/* --- STAFF --- */
/* 113.4 → 114.7 ＝ ALL ITEMS をSVG化してボックス高が 122→121（.aiの正値）になったぶんの取り直し */
.feature .staff {margin-top: calc(var(--u) * 114);}
.feature .staff__Ttl {
position: relative;
padding-left: calc(var(--u) * 189);
font-family: "ogg", serif;
font-weight: 400;
font-style: normal;
font-size: calc(var(--u) * 34);
line-height: 1.48;
letter-spacing: .05em;
color: #fff;
}
.feature .staff__Ttl::after {
content: "";
position: absolute;
left: calc(var(--u) * 315);
top: calc(var(--u) * 23.1);
width: calc(var(--u) * 245);
height: calc(var(--u) * 1);
background: #fff;
}
.feature .staff__List {
margin-top: calc(var(--u) * 13.48);
margin-left: calc(var(--u) * 191.4);
font-family: "ogg", serif;
font-weight: 400;
font-style: normal;
font-size: calc(var(--u) * 24);
line-height: 1.8;
letter-spacing: 0.05em;
color: #fff;
}
/* ============================================================
▼SP(768px以下)
============================================================ */
@media screen and (max-width: 768px) {
.feature .pc, .feature .frame > .pc { display: none; }
.feature .sp { display: block; }
.feature .frame { display: block; }
.feature .frame-main { width: 100%; }
.feature .frame-main__Inner { width: 100%; }
.feature { --u: 0.05rem; } /* SP: カンプ750 → 実機375 */
}