@charset "UTF-8"; /* ============================================================= russet 2026 AUTUMN / PC 1366px ・ SP 375px（rem リキッド） Adobe XD : russet_26AW_nyu/design_fix_pc.xd アートボード : 1366 x 9911 (x=1990 / y=0) ・数値はすべて XD の実測値（1rem = 10px 換算） ・font-family : Cal Sans / Zen Kaku Gothic New (XD指定どおり) ・letter-spacing は XD 上で未設定のためすべて 0 ============================================================= */ /* ------------------------------------------------------------- base ------------------------------------------------------------- */ /* リキッド（rem）の基準 1rem = 10px 相当。PC は 1366px、SP は 375px を基準幅として画面幅に等比追従する。 上限なし（画面が広いほど等比で拡大する）。 ※ CSS の 100vw はスクロールバーを含むため、 の小さなスクリプトが スクロールバーを除いた実幅で font-size を上書きする（JS 無効時はこの値が効く） */ html { font-size: calc(100vw / 136.6); /* タップ時にリンクや + ボタンの矩形が青く塗られる（モバイル既定の タップハイライト）のを消す。継承するので html に一度だけ指定する。 キーボード操作時のフォーカスリング（:focus-visible）は残る */ -webkit-tap-highlight-color: transparent; } body { width: 136.6rem; margin: 0 auto; background: #fff; color: #000; font-family: "Cal Sans", "Zen Kaku Gothic New", sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; } img { display: block; border: 0; } /* ------------------------------------------------------------- 共通パーツ ------------------------------------------------------------- */ /* 画像ラッパー : サイズ・位置はラッパー側で指定する */ .fig { position: absolute; overflow: hidden; } .fig img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* 背景の色面 / 白抜き */ .band { position: absolute; background: #9c1f25; } /* 罫線 (XD : 線 179 / 1px / #000) */ .rule { position: absolute; display: block; height: 1px; background: #000; } /* テキスト共通 --fs : XD の font-size --lh : XD の line-height --lead : XD のテキストフレーム上端を top に指定するための補正値 XD は「フレーム上端 + ascent」を 1 行目のベースラインとして扱うが、 CSS ではそこに行ボックスのハーフレディングが加算される。 その差分を margin-top で打ち消す。 A = round(ascent × font-size) Cal Sans asc 1.0 / desc 0.3 D = round(descent × font-size) Zen Kaku Gothic New asc 1.16 / desc 0.288 --lead = -floor((line-height - (A + D)) / 2) 14/17 → 1px 10/12 → 1px 130/103 → 33px 32/103 → -30px 25/103 → -35px 21/19 → 4px 15/19 → 1px 15/20 → 0px 35/33 → 7px 12/16 → 0px 10/14 → 0px 42/19 → 18px 13/17 → 0px 11/17(JP) → 0px */ .txt { position: absolute; font-family: "Cal Sans", "Zen Kaku Gothic New", sans-serif; font-weight: 400; font-size: var(--fs); line-height: var(--lh); letter-spacing: 0; white-space: pre-wrap; word-break: normal; overflow-wrap: normal; margin-top: var(--lead, 0rem); } /* reset.css が span に word-break:break-all を当てているため、 テキスト内のインライン要素にも単語途中で折らない指定を継承させる */ .txt span, .txt a { word-break: normal; overflow-wrap: normal; } /* 和文 (Zen Kaku Gothic New / Bold) */ .txt--jp { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; } /* 縦組み (XD 上で -90° / +90° 回転しているテキスト) ハーフレディング補正は回転後のローカル軸に効かせたいので padding で持たせる */ .rot { transform-origin: 0 0; transform: rotate(-90deg); margin-top: 0; padding-top: var(--lead, 0rem); } .rot--cw { transform: rotate(90deg); } /* 商品名キャプション (XD : Cal Sans 15px / 行送り 20px / 下線) */ .item-note { --fs: 1.5rem; --lh: 2rem; --lead: 0rem; } /* リンク共通のホバー（フッターのロゴ・SNS） 下線・色・位置は変えず、ふわっと薄くなるだけにする */ .link-fade { color: inherit; transition: opacity .4s ease; } .link-fade:hover, .link-fade:focus-visible { opacity: .6; } /* クレジット (外部リンク / 別タブ) 【 】も一緒に色が変わるようリンク範囲に含め、 下線だけを内側の .item-note__u に持たせている (XD でも 【 に下線なし) 仕様書：ホバーで色を変える／背景白は #9C1F25、背景赤は #000000 */ .item-note__link { color: inherit; transition: color .35s ease; } .item-note__link:hover, .item-note__link:focus-visible { color: #9c1f25; } .item-note--red .item-note__link:hover, .item-note--red .item-note__link:focus-visible { color: #000; } .item-note__u { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 1px; } /* 台紙付き写真 (XD : 内側 border で台紙を表現 / PC 12px・SP 5px) */ .photo-frame { box-sizing: border-box; border: 1.2rem solid #f8faed; } /* ------------------------------------------------------------- SP : クレジット表示の ＋ ボタン XD : 18 x 18 の十字 (1px) / タップ領域は 36 x 36 に拡張 ------------------------------------------------------------- */ .plus { width: 3.6rem; height: 3.6rem; margin: -1.8rem 0 0 -1.8rem; padding: 0; position: absolute; border: 0; background: none; color: #000; cursor: pointer; } .plus::before, .plus::after { width: 1.8rem; height: 1px; margin: -0.5px 0 0 -0.9rem; position: absolute; left: 50%; top: 50%; background: currentColor; content: ""; } .plus::after { width: 1px; height: 1.8rem; margin: -0.9rem 0 0 -0.5px; } /* ------------------------------------------------------------- SP : 商品クレジットモーダル XD : russet_26AW_SP_Credit-1 〜 16 (375 x 668) ------------------------------------------------------------- */ .credit-modal { width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 100; background: #9c1f25; overflow-y: auto; -webkit-overflow-scrolling: touch; opacity: 0; transition: opacity .4s ease; } .credit-modal[hidden] { display: none; } .credit-modal:focus { outline: none; } .credit-modal.is-open { opacity: 1; } /* 中身は少し小さい状態からふわっと開く */ .credit-modal__inner { width: 37.5rem; min-height: 66.8rem; height: 100%; margin: 0 auto; position: relative; opacity: 0; transform: scale(.96); transition: opacity .45s ease .05s, transform .45s cubic-bezier(.16, 1, .3, 1) .05s; } .credit-modal.is-open .credit-modal__inner { opacity: 1; transform: scale(1); } /* 動きを減らす設定の環境ではアニメーションしない */ @media (prefers-reduced-motion: reduce) { .credit-modal, .credit-modal__inner, .credit-modal__item, .credit-modal__nav { transition: none; } } /* 閉じる (XD : 30px の線を ±45° / 中心 347.68, 31.22) */ .credit-modal__close { width: 4.4rem; height: 4.4rem; padding: 0; position: absolute; right: 0.532rem; top: 0.922rem; border: 0; background: none; cursor: pointer; } .credit-modal__close::before, .credit-modal__close::after { width: 3rem; height: 1px; margin: -0.5px 0 0 -1.5rem; position: absolute; left: 50%; top: 50%; background: #fff; content: ""; transform: rotate(45deg); } .credit-modal__close::after { transform: rotate(-45deg); } /* スライドは同じ位置に重なっているので、前後送りは opacity のクロスフェードにする (li 自体は高さを持たず、中身は __inner 基準の絶対配置) 全件を常時 display させると 16 枚の画像を先読みしてしまうため、 表示中と退場中の 2 枚だけ is-shown を付けて描画する (制御は JS 側) */ .credit-modal__item { display: none; opacity: 0; transition: opacity .35s ease; } .credit-modal__item.is-shown { display: block; } .credit-modal__item.is-active { opacity: 1; } .credit-modal__visual { width: 30rem; height: 43.1rem; position: absolute; left: 3.8rem; top: 6rem; overflow: hidden; } .credit-modal__visual--wide { width: 37.5rem; height: 30rem; left: 0; top: 14rem; } .credit-modal__visual img { width: 100%; height: 100%; display: block; object-fit: cover; } .credit-modal__note { width: 30rem; position: absolute; left: 3.8rem; top: 52.2rem; --fs: 1.2rem; --lh: 1.8rem; --lead: -0.1rem; color: #fff; } /* 前後送り (XD : 11 x 15 のシェブロン / 端では #000 = 無効) */ .credit-modal__nav { width: 4.4rem; height: 4.4rem; padding: 0; position: absolute; bottom: 0.6rem; border: 0; background: none; color: #fff; cursor: pointer; transition: color .35s ease; } .credit-modal__nav--prev { left: 0; } .credit-modal__nav--next { right: 0; } .credit-modal__nav svg { position: absolute; top: 1.45rem; } .credit-modal__nav--prev svg { left: 1.45rem; } .credit-modal__nav--next svg { right: 1.35rem; } .credit-modal__nav[disabled] { color: #000; cursor: default; } /* マウス操作時のフォーカスリングは出さない (キーボード操作時は残す) */ .plus:focus:not(:focus-visible), .credit-modal__close:focus:not(:focus-visible), .credit-modal__nav:focus:not(:focus-visible) { outline: none; } /* body スクロールロック（html 側は JS がインライン指定＝スムーススクロールの一時停止も兼ねる） */ .is-modal-open { overflow: hidden; } /* SP は写真タップでもクレジットを開く */ @media only screen and (max-width: 767px) { .fig[data-credit] { cursor: pointer; } } .credit-modal__visual { cursor: pointer; } /* ------------------------------------------------------------- PC / SP 表示切り替え ------------------------------------------------------------- */ @media only screen and (min-width: 768px) { .pc_none { display: none !important; } } @media only screen and (max-width: 767px) { .sp_none { display: none !important; } } /* ------------------------------------------------------------- HERO XD : y0 - y818 ------------------------------------------------------------- */ /* XD のアートボード外はデザイン上クリップされる。 傾けた写真や 1px はみ出す画像がアートボード幅を越えるため、 各セクション（＝アートボード幅）で横方向だけ切り落とす。 overflow-x:clip は縦方向に影響せず、スクロールコンテナも作らないので セクションからの縦のはみ出しや position:fixed のモーダルを壊さない。 */ .hero, .lookbook01, .lookbook02, .lookbook03, .lookbook04, .lookbook05, .site-footer { overflow-x: clip; } .hero { position: relative; height: 81.8rem; } .hero__lead { left: 5rem; top: 3.5rem; width: 70.7rem; --fs: 1.4rem; --lh: 1.7rem; --lead: 0.1rem; } .hero__note { left: 72.3rem; top: 64.6rem; width: 24.9rem; --fs: 1rem; --lh: 1.2rem; --lead: 0.1rem; } .hero__visual { left: 5rem; top: 9.4rem; width: 70.7rem; height: 51.4rem; } .hero__title { left: 2.9rem; top: 47.7rem; width: 65.4rem; --fs: 13rem; --lh: 10.3rem; --lead: 3.3rem; } .hero__brand { left: 3.4rem; top: 70.4rem; width: 13.4rem; --fs: 3.2rem; --lh: 10.3rem; --lead: -3rem; } .hero__season { left: 40rem; top: 71.1rem; width: 26.3rem; --fs: 2.5rem; --lh: 10.3rem; --lead: -3.5rem; text-align: right; } .hero__tilt { left: 80.3rem; top: 5rem; width: 53.4rem; height: 65.7rem; transform-origin: 50% 50%; transform: rotate(7deg); } /* ------------------------------------------------------------- LOOKBOOK 01 XD : y818 - y2729 ------------------------------------------------------------- */ .lookbook01 { position: relative; height: 191.1rem; } .lookbook01__band { left: 0; top: 0; width: 68.3rem; height: 191.1rem; } .lookbook01__vtext01 { left: 70.3rem; top: 14.4rem; width: 14.4rem; --fs: 2.1rem; --lh: 1.9rem; --lead: 0.4rem; } .lookbook01__vtext02 { left: 130rem; top: 81.8rem; width: 19.5rem; --fs: 2.1rem; --lh: 1.9rem; --lead: 0.4rem; } .lookbook01__photo01 { left: 3.5rem; top: 3.5rem; width: 61.3rem; height: 80.3rem; } .lookbook01__photo02 { left: 80.5rem; top: 10rem; width: 43.9rem; height: 55.2rem; } .lookbook01__photo03 { left: 68.3rem; top: 83.8rem; width: 68.3rem; height: 107.3rem; } .lookbook01__photo04 { left: 22.2rem; top: 90.8rem; width: 24rem; height: 30rem; } .lookbook01__photo05 { left: 22.2rem; top: 120.8rem; width: 24rem; height: 30rem; } .lookbook01__photo06 { left: 22.2rem; top: 150.8rem; width: 24rem; height: 30rem; } .lookbook01__note01 { left: 3.5rem; top: 85.8rem; width: 61.3rem; --lh: 1.9rem; --lead: 0.1rem; color: #fff; } .lookbook01__note02 { left: 79.5rem; top: 68.2rem; width: 32.8rem; } .lookbook01__note03 { left: 0; top: 182.8rem; width: 68.3rem; --lh: 1.9rem; --lead: 0.1rem; color: #fff; text-align: center; } .lookbook01__note04 { left: 68.3rem; top: 186.8rem; width: 68.3rem; --lh: 1.9rem; --lead: 0.1rem; color: #fff; text-align: center; } .lookbook01__vtext03 { left: 70.3rem; top: 130.9rem; width: 20.2rem; --fs: 2.1rem; --lh: 1.9rem; --lead: 0.4rem; } .lookbook01__vtext04 { left: 70.3rem; top: 189.1rem; width: 14.4rem; --fs: 2.1rem; --lh: 1.9rem; --lead: 0.4rem; } /* ------------------------------------------------------------- LOOKBOOK 02 XD : y2729 - y5088 ------------------------------------------------------------- */ .lookbook02 { position: relative; height: 235.9rem; } .lookbook02__photo01 { left: 0; top: 0; width: 136.6rem; height: 99rem; } .lookbook02__copy { left: 3.6rem; top: 5rem; width: 54.9rem; --fs: 3.5rem; --lh: 3.3rem; --lead: 0.7rem; } .lookbook02__rule { left: 3.5rem; top: 18.4rem; width: 40.4rem; } .lookbook02__note01 { left: 3.5rem; top: 19.45rem; width: 40.4rem; } .lookbook02__photo02 { left: 0; top: 99rem; width: 68.3rem; height: 98.4rem; } .lookbook02__photo03 { left: 80.5rem; top: 107.8rem; width: 43.9rem; height: 50.5rem; } .lookbook02__vtext01 { left: 70.3rem; top: 111.7rem; width: 12.7rem; --fs: 2.1rem; --lh: 1.9rem; --lead: 0.4rem; } .lookbook02__vtext02 { left: 130rem; top: 158.3rem; width: 18.2rem; --fs: 2.1rem; --lh: 1.9rem; --lead: 0.4rem; } .lookbook02__photo04 { left: 72.6rem; top: 173.9rem; width: 64rem; height: 47rem; } .lookbook02__note02 { left: 3.5rem; top: 200.4rem; width: 32.8rem; } .lookbook02__note03 { left: 35.5rem; top: 214.9rem; width: 32.8rem; text-align: right; } /* ------------------------------------------------------------- LOOKBOOK 03 XD : y5088 - y7134 ------------------------------------------------------------- */ .lookbook03 { position: relative; height: 204.6rem; } .lookbook03__band { left: 0; top: 0; width: 68.3rem; height: 204.6rem; } .lookbook03__gap01, .lookbook03__gap02 { position: absolute; left: 32.4rem; width: 3.5rem; height: 94rem; background: #fff; } .lookbook03__gap01 { top: 0; } .lookbook03__gap02 { top: 110.6rem; } .lookbook03__photo01 { left: 2rem; top: 9rem; width: 64.3rem; height: 88.8rem; } .lookbook03__photo02 { left: 2rem; top: 106.8rem; width: 64.3rem; height: 88.8rem; } .lookbook03__photo03 { left: 75.8rem; top: 9.1rem; width: 53.3rem; height: 81rem; } .lookbook03__vtext01 { left: 70.3rem; top: 10.7rem; width: 10.7rem; --fs: 2.1rem; --lh: 1.9rem; --lead: 0.4rem; } .lookbook03__vtext02 { left: 130rem; top: 59.3rem; width: 19.5rem; --fs: 2.1rem; --lh: 1.9rem; --lead: 0.4rem; } .lookbook03__note01 { left: 17rem; top: 100.3rem; width: 34.3rem; color: #fff; } .lookbook03__note02 { left: 75.8rem; top: 93.1rem; width: 28.3rem; } .lookbook03__photo04 { left: 87.3rem; top: 117.6rem; width: 45.8rem; height: 33.6rem; } .lookbook03__photo05 { left: 87.3rem; top: 151.2rem; width: 45.8rem; height: 33.6rem; } .lookbook03__note03 { left: 87.3rem; top: 187.8rem; width: 45.8rem; } .lookbook03__vtext03 { left: 70.3rem; top: 144.4rem; width: 20.2rem; --fs: 2.1rem; --lh: 1.9rem; --lead: 0.4rem; } .lookbook03__vtext04 { left: 70.3rem; top: 202.6rem; width: 14.4rem; --fs: 2.1rem; --lh: 1.9rem; --lead: 0.4rem; } /* ------------------------------------------------------------- LOOKBOOK 04 XD : y7134 - y8258 ------------------------------------------------------------- */ .lookbook04 { position: relative; height: 112.4rem; background: #fff; } .lookbook04__photo01 { left: 54.1rem; top: 0; width: 82.5rem; height: 108.9rem; } .lookbook04__note01 { left: 58.1rem; top: 4rem; width: 37.3rem; } /* 台紙付き写真 (XD : 12px の #F8FAED 枠は画像素材に含まれる) */ .lookbook04__photo02 { left: 15.2rem; top: 46rem; width: 34rem; height: 50.4rem; } .lookbook04__photo03 { left: 4.63163rem; top: 42.38546rem; width: 34rem; height: 50.4rem; transform-origin: 50% 50%; transform: rotate(-5deg); } .lookbook04__note02 { left: 6.9rem; top: 98.7rem; width: 34.9rem; } /* ------------------------------------------------------------- LOOKBOOK 05 XD : y8258 - y9782 ------------------------------------------------------------- */ .lookbook05 { position: relative; height: 152.4rem; } .lookbook05__band { left: 68.3rem; top: 0; width: 68.3rem; height: 152.4rem; } .lookbook05__gap01, .lookbook05__gap02 { position: absolute; left: 100.7rem; width: 3.5rem; height: 68.2rem; background: #fff; } .lookbook05__gap01 { top: 0; } .lookbook05__gap02 { top: 84.2rem; } .lookbook05__photo01 { left: 0; top: 0; width: 48rem; height: 73rem; } .lookbook05__note01 { left: 3.5rem; top: 76.012rem; width: 28.1rem; } .lookbook05__photo02 { left: 39.4rem; top: 19.7rem; width: 85.3rem; height: 131.8rem; } .lookbook05__note02 { left: 106.2rem; top: 146.612rem; width: 26.9rem; color: #fff; } .lookbook05__staff { left: 3.5rem; top: 145.5rem; width: 36rem; --fs: 1rem; --lh: 1.4rem; --lead: 0rem; } .lookbook05__title { left: 3.3rem; top: 116.7rem; width: 41.7rem; --fs: 4.2rem; --lh: 1.9rem; --lead: 1.8rem; color: #9c1f25; } .lookbook05__lead-en { left: 3.5rem; top: 132rem; width: 36rem; --fs: 1.2rem; --lh: 1.6rem; --lead: 0rem; } .lookbook05__lead-jp { left: 3.5rem; top: 122.6rem; width: 36rem; --fs: 1.1rem; --lh: 1.7rem; --lead: 0rem; } .lookbook05__rule { left: 3.5rem; top: 143.5rem; width: 36rem; } .lookbook05__note03 { left: 106.2rem; top: 57.5rem; width: 26.9rem; color: #fff; } .lookbook05__photo03 { left: 100.7rem; top: 0; width: 35.9rem; height: 54.5rem; } .lookbook05__vtext01 { left: 65.3rem; top: 0; width: 14.4rem; --fs: 2.1rem; --lh: 1.9rem; --lead: 0.4rem; } .lookbook05__vtext02 { left: 65.3rem; top: 41rem; width: 20.2rem; --fs: 2.1rem; --lh: 1.9rem; --lead: 0.4rem; } /* ------------------------------------------------------------- FOOTER XD : y9782 - y9911 ------------------------------------------------------------- */ .site-footer { position: relative; height: 12.9rem; background: #fff; } .site-footer__logo { left: 3.5rem; top: 5rem; width: 13.05rem; height: 2.9rem; } .site-footer__follow { left: 22.5rem; top: 5.7rem; --fs: 1.3rem; --lh: 1.7rem; --lead: 0rem; } .site-footer__sns-item { position: absolute; top: 5rem; width: 3rem; height: 3rem; } .site-footer__sns-link { display: block; width: 100%; height: 100%; } .site-footer__sns-item img { width: 100%; height: 100%; object-fit: contain; } .site-footer__sns-item--insta { left: 30.86rem; } .site-footer__sns-item--fb { left: 35.36rem; } .site-footer__sns-item--x { left: 39.862rem; } .site-footer__sns-item--line { left: 44.365rem; } .site-footer__sns-item--bag { left: 48.867rem; top: 5.2rem; height: 2.6rem; } .site-footer__copy { left: 97.1rem; top: 6.2rem; width: 36rem; --fs: 1.3rem; --lh: 1.7rem; --lead: 0rem; text-align: right; } /* ============================================================= SP (max-width: 767px) Adobe XD : アートボード russet_26AW_SP (375 x 3963 / x=3941) ・数値はすべて XD の実測値 ・クレジットは ＋ ボタン → モーダル表示に置き換わる ============================================================= */ @media only screen and (max-width: 767px) { /* ---- base ---- 375px のデザインをビューポート幅に対して等比で伸縮させる（リキッド） 1rem = 100vw / 37.5 → 375px 幅のとき 1rem = 10px となり XD 実測値と一致する */ html { font-size: calc(100vw / 37.5); } body { width: 100%; } /* PC 用のクレジット文言・罫線は SP では出さない (＋ボタン → モーダル) */ .item-note, .lookbook02__rule { display: none; } /* 台紙の内側 border : PC 12px → SP 5px */ .photo-frame { border-width: 0.5rem; } .hero { height: 69.8rem; } .lookbook01 { height: 65.6rem; } .lookbook02 { height: 62.7rem; } .lookbook03 { height: 56.3rem; } .lookbook04 { height: 33.1rem; } .lookbook05 { height: 82.9rem; } .site-footer { height: 25.9rem; } /* ---------------- HERO XD: y0 - y698 ---------------- */ .hero__lead { left: 1.5rem; top: 1.5rem; width: 33.1rem; --fs: 1.2rem; --lh: 1.4rem; --lead: 0.1rem; } .hero__note { left: 1.5rem; top: 51.666rem; width: 18.2rem; --fs: 0.9rem; --lh: 1.1rem; --lead: 0.1rem; z-index: 1; } .hero__visual { left: 0; top: 8.2rem; width: 37.5rem; height: 26rem; z-index: 3; } .hero__title { left: 1.2rem; top: 28.8rem; width: 34.7rem; --fs: 6.8rem; --lh: 5.8rem; --lead: 1.5rem; z-index: 4; } .hero__brand { left: 1.5rem; top: 41.682rem; width: 13.4rem; --fs: 1.7rem; --lh: 10.3rem; --lead: -4rem; z-index: 4; } .hero__season { left: 21rem; top: 41.882rem; width: 13.4rem; --fs: 1.5rem; --lh: 10.3rem; --lead: -4.1rem; z-index: 4; } .hero__tilt { left: 13.3rem; top: 38.5rem; width: 23rem; height: 28.3rem; z-index: 2; } /* ---------------- LOOKBOOK 01 XD: y698 - y1354 ---------------- */ .lookbook01__band { left: 0; top: 0; width: 18.8rem; height: 63rem; } .lookbook01__vtext01 { left: 19.1rem; top: 6.2rem; width: 6.2rem; --fs: 0.9rem; --lh: 0.8rem; --lead: 0.2rem; } .lookbook01__vtext02 { left: 35.2rem; top: 28.5rem; width: 8.1rem; --fs: 0.9rem; --lh: 0.8rem; --lead: 0.2rem; } .lookbook01__photo01 { left: 1rem; top: 1rem; width: 16.8rem; height: 24.2rem; } .lookbook01__photo02 { left: 22.2rem; top: 7.2rem; width: 12.1rem; height: 15.2rem; } .lookbook01__photo03 { left: 18.8rem; top: 29.5rem; width: 18.8rem; height: 33.5rem; } .lookbook01__photo04 { left: 4.5rem; top: 26.2rem; width: 9.9rem; height: 12.3rem; } .lookbook01__photo05 { left: 4.5rem; top: 38.5rem; width: 9.9rem; height: 12.2rem; } .lookbook01__photo06 { left: 4.5rem; top: 50.7rem; width: 9.9rem; height: 12.3rem; } .lookbook01__vtext03 { left: 19.1rem; top: 45.3rem; width: 8.5rem; --fs: 0.9rem; --lh: 0.8rem; --lead: 0.2rem; } .lookbook01__vtext04 { left: 19.1rem; top: 62.6rem; width: 4.7rem; --fs: 0.9rem; --lh: 0.8rem; --lead: 0.2rem; } /* ---------------- LOOKBOOK 02 XD: y1354 - y1981 ---------------- */ .lookbook02__photo01 { left: 0; top: 0; width: 37.5rem; height: 27.2rem; z-index: 2; } .lookbook02__copy { left: 1.5rem; top: 0; width: 19.4rem; z-index: 3; --fs: 1.6rem; --lh: 1.4rem; --lead: 0.4rem; } .lookbook02__photo02 { left: 0; top: 26.9rem; width: 18.8rem; height: 27.1rem; } .lookbook02__photo03 { left: 22.159rem; top: 30.4rem; width: 11.8rem; height: 13.6rem; } .lookbook02__vtext01 { left: 19.1rem; top: 32.4rem; width: 5.5rem; --fs: 0.9rem; --lh: 0.8rem; --lead: 0.2rem; } .lookbook02__vtext02 { left: 35.1rem; top: 44rem; width: 7.7rem; --fs: 0.9rem; --lh: 0.8rem; --lead: 0.2rem; } .lookbook02__photo04 { left: 20rem; top: 47.5rem; width: 17.6rem; height: 12.9rem; } /* ---------------- LOOKBOOK 03 XD: y1981 - y2544 ---------------- */ .lookbook03__band { left: 0; top: 0; width: 18.8rem; height: 56.3rem; } .lookbook03__gap01 { left: 9rem; top: 0; width: 0.9rem; height: 25.8rem; } .lookbook03__gap02 { left: 9rem; top: 30.5rem; width: 0.9rem; height: 25.8rem; } .lookbook03__photo01 { left: 0.551rem; top: 2.457rem; width: 17.7rem; height: 24.4rem; } .lookbook03__photo02 { left: 0.6rem; top: 29.4rem; width: 17.7rem; height: 24.4rem; } .lookbook03__photo03 { left: 21rem; top: 2.5rem; width: 14.4rem; height: 21.9rem; } .lookbook03__vtext01 { left: 19.1rem; top: 4.6rem; width: 4.6rem; --fs: 0.9rem; --lh: 0.8rem; --lead: 0.2rem; } .lookbook03__vtext02 { left: 35.2rem; top: 17.5rem; width: 8rem; --fs: 0.9rem; --lh: 0.8rem; --lead: 0.2rem; } .lookbook03__photo04 { left: 24rem; top: 32.2rem; width: 12.6rem; height: 9.3rem; } .lookbook03__photo05 { left: 24rem; top: 41.5rem; width: 12.6rem; height: 9.3rem; } .lookbook03__vtext03 { left: 19.1rem; top: 36.9rem; width: 8.5rem; --fs: 0.9rem; --lh: 0.8rem; --lead: 0.2rem; } .lookbook03__vtext04 { left: 19.1rem; top: 55.8rem; width: 4.7rem; --fs: 0.9rem; --lh: 0.8rem; --lead: 0.2rem; } /* ---------------- LOOKBOOK 04 XD: y2544 - y2875 ---------------- */ .lookbook04__photo01 { left: 14.9rem; top: 0; width: 22.7rem; height: 30rem; } .lookbook04__photo02 { left: 4rem; top: 11.5rem; width: 9.7rem; height: 14.2rem; } .lookbook04__photo03 { left: 1.10035rem; top: 10.52428rem; width: 9.7rem; height: 14.2rem; } /* ---------------- LOOKBOOK 05 XD: y2875 - y3704 ---------------- */ .lookbook05__band { left: 18.8rem; top: 0; width: 18.7rem; height: 42rem; } .lookbook05__gap01 { left: 27.8rem; top: 0; width: 0.9rem; height: 18.8rem; } .lookbook05__gap02 { left: 27.8rem; top: 23.2rem; width: 0.9rem; height: 18.8rem; } .lookbook05__photo01 { left: 0; top: 0; width: 13.2rem; height: 20rem; } .lookbook05__photo02 { left: 10.863rem; top: 5.464rem; width: 23.506rem; height: 36.283rem; } .lookbook05__title { left: 1.3rem; top: 46rem; width: 36rem; --fs: 3.3rem; --lh: 1.9rem; --lead: 1.2rem; } .lookbook05__lead-jp { left: 1.5rem; top: 51.4rem; width: 34.5rem; --fs: 1.1rem; --lh: 1.7rem; --lead: 0rem; } .lookbook05__lead-en { left: 1.5rem; top: 60.8rem; width: 34.5rem; --fs: 1.2rem; --lh: 1.6rem; --lead: 0rem; } .lookbook05__rule { left: 1.5rem; top: 74rem; width: 34.5rem; } .lookbook05__staff { left: 1.5rem; top: 76rem; width: 34.5rem; --fs: 1rem; --lh: 1.4rem; --lead: 0rem; } .lookbook05__photo03 { left: 27.8rem; top: 0; width: 9.7rem; height: 14.7rem; } .lookbook05__vtext01 { left: 18.4rem; top: 0; width: 4.7rem; --fs: 0.9rem; --lh: 0.8rem; --lead: 0.2rem; } .lookbook05__vtext02 { left: 18.4rem; top: 12.3rem; width: 8.6rem; --fs: 0.9rem; --lh: 0.8rem; --lead: 0.2rem; } /* ---------------- FOOTER XD: y3704 - y3963 ---------------- */ .site-footer__logo { left: 1.5rem; top: 5rem; width: 13.05rem; height: 2.9rem; } .site-footer__follow { left: 1.5rem; top: 10.8rem; --fs: 1.3rem; --lh: 1.7rem; --lead: 0rem; } .site-footer__sns-item { top: 13.5rem; } .site-footer__sns-item--insta { left: 1.5rem; } .site-footer__sns-item--fb { left: 6.5rem; } .site-footer__sns-item--x { left: 11.503rem; } .site-footer__sns-item--line { left: 16.506rem; } .site-footer__sns-item--bag { left: 21.508rem; top: 13.7rem; } .site-footer__copy { left: 1.5rem; top: 19.5rem; width: 34.5rem; --fs: 1.3rem; --lh: 1.7rem; --lead: 0rem; text-align: left; } /* ---------------- ＋ ボタン ---------------- */ .plus--01 { left: 16.4rem; top: 23.8rem; color: #fff; } .plus--02 { left: 32.9rem; top: 21rem; color: #fff; } .plus--03 { left: 15.8rem; top: 61.6rem; color: #fff; } .plus--04 { left: 35.6rem; top: 61.164rem; color: #fff; } .plus--05 { left: 35.1rem; top: 25rem; color: #000; z-index: 3; } .plus--06 { left: 17.4rem; top: 52.6rem; color: #000; } .plus--07 { left: 21.4rem; top: 59rem; color: #000; } .plus--08 { left: 34rem; top: 23rem; color: #fff; } .plus--09 { left: 16.9rem; top: 52.4rem; color: #000; } .plus--10 { left: 35.2rem; top: 40.1rem; color: #000; } .plus--11 { left: 35.2rem; top: 49.4rem; color: #fff; } .plus--12 { left: 16.8rem; top: 1.9rem; color: #000; } .plus--13 { left: 2.4rem; top: 26.6rem; color: #000; } .plus--14 { left: 11.8rem; top: 18.6rem; color: #fff; } .plus--15 { left: 29.2rem; top: 13.3rem; color: #fff; } .plus--16 { left: 32.9rem; top: 39.2rem; color: #fff; } }