@charset "UTF-8";
/* ============================================================
  THE NEW BASIC — THE NYLON WEAR (26aw_wear_ny)【デザインあり】
  スコープ .LS_nywear ／ randr実測基準（docs/randr-reference.md）
  流体スケール: calc(N * var(--u))  N=375アートボードのデザインpx
  指定色: タイトル・ボタン #000022（依頼表）— 価格下線にも限定使用
  PC: 2分割（左=KV+タイトル sticky／右=LP本体）※依頼表「PCは２分割の右側LPのデザイン」
============================================================ */
.LS_nywear *, .LS_nywear *::before, .LS_nywear *::after { box-sizing: border-box; }
.LS_nywear {
  --key: #000022;
  --color-white: #fff;
  --color-text: #38383B;
  --font-century: "century-gothic", "Alte Haas Grotesk", "Helvetica Neue", sans-serif;
  --font-en: "avenir-lt-pro", "Alte Haas Grotesk", "Helvetica Neue", sans-serif;
  --font-ja: "hiragino-kaku-gothic-pron", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --pc-width: 1600; --pc-artboard-width: 500; --sp-width: 375;
  --u: calc(var(--variable) * var(--ratio));
  font-family: var(--font-ja);
  text-align: left; /* 本番Theme/base.cssのtext-align:justify継承を遮断（字間が不自然に広がるため） */
  font-feature-settings: "palt";
  color: var(--color-text);
  background-color: var(--color-white);
  overflow: clip;
  -webkit-font-smoothing: antialiased;
}
/*@media (min-width: 1600px) { .LS_nywear { --ratio: calc(var(--pc-artboard-width) / var(--sp-width)); --variable: 1px; } }*/
@media (min-width: 1600px) { .LS_nywear { --ratio: calc(var(--pc-artboard-width) / var(--sp-width)); --variable: calc(100vw / var(--pc-width)); } }
@media (min-width: 768px) and (max-width: 1600px) { .LS_nywear { --ratio: calc(var(--pc-artboard-width) / var(--sp-width)); --variable: calc(100vw / var(--pc-width)); } }
@media (max-width: 767px) { .LS_nywear { --ratio: 1; --variable: calc(100vw / var(--sp-width)); } }
.LS_nywear img, .LS_nywear picture { display: block; width: 100%; height: auto; vertical-align: bottom; }
.LS_nywear a { color: inherit; text-decoration: none; }
.LS_nywear a:hover { opacity: .6; transition: opacity .3s; }
.LS_nywear h1, .LS_nywear h2, .LS_nywear p, .LS_nywear ul, .LS_nywear figure { margin: 0; padding: 0; }
.LS_nywear ul { list-style: none; }
.LS_nywear section { position: relative; }
.LS_nywear .u-en { font-family: var(--font-en); }
.LS_nywear .lp_inner { width: calc(335 * var(--u)); margin-left: auto; margin-right: auto; }
.LS_nywear [id] { scroll-margin-top: var(--header-full-height, 178px); }

/* ============================================================
  骨格 — SP: 縦一列 ／ PC: 2分割（左 sticky・右はアートボード幅を中央固定）
  † 右カラムの内容幅を calc(375*--u) に固定し、テキスト(335u)と画像(375u)の
    比率をrandrの中央カラム構造と一致させる
============================================================ */
.LS_nywear .ny_body { width: calc(375 * var(--u)); margin: 0 auto; padding-bottom: calc(115 * var(--u)); }
@media (min-width: 768px) {
  .LS_nywear { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; --ny-reserved: calc(345 * var(--u)); }
  .LS_nywear .ny_head, .LS_nywear .ny_body { min-width: 0; max-width: 100%; }
  /*.LS_nywear .ny_head { --u: calc(var(--variable) * var(--ratio) * 1.3); } /* 左カラムはPCで1.3倍（playfulweb比率準拠：KVがカラム幅の約6割） */
  .LS_nywear .ny_head { position: sticky; top: var(--header-full-height, 178px); height: calc(100vh - var(--header-full-height, 178px)); display: flex; align-items: center; justify-content: center; overflow: hidden; } /* transformはレイアウト高さを変えないため autoだと内部スクロールが出る。JS等比縮小で必ず収まる前提のhidden */
  .LS_nywear .ny_head__inner { width: calc(335 * var(--u)); }
  /* KVはデザイン比率固定。低背画面は ny_head__inner 全体をJSで等比スケール（構図不変） */
  .LS_nywear .ny_kv { width: calc(270 * var(--u)); margin: 0 auto; }
  .LS_nywear .ny_head__inner { transform-origin: 50% 50%; }
}
@media (max-width: 767px) { .LS_nywear .ny_kv { width: 100%; } }

/* ============================================================
  リード — THE NEW BASIC（#000022）+ 和文リード + CTA
============================================================ */
.LS_nywear .ny_lead { text-align: center; }
.LS_nywear .ny_lead__title { margin-top: calc(37 * var(--u)); font-family: var(--font-century); font-weight: var(--fw-bold); font-size: calc(40 * var(--u)); line-height: 1; letter-spacing: .02em; color: var(--key); }
.LS_nywear .ny_lead__sub { display: block; margin-top: calc(12 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.36; letter-spacing: .1em; font-weight: var(--fw-medium); }
.LS_nywear .ny_lead__ja { margin-top: calc(30 * var(--u)); font-size: calc(13 * var(--u)); line-height: 2.3076923077; letter-spacing: .05em; font-weight: var(--fw-light); font-feature-settings: normal; }

/* CTA — 幅335/padding11/16semibold、リード直後35・上60<下90 */
.LS_nywear .c-btn { width: calc(335 * var(--u)); margin: calc(60 * var(--u)) auto 0; background-color: var(--key); color: var(--color-white); font-size: calc(16 * var(--u)); line-height: 2.125; letter-spacing: .1em; font-weight: var(--fw-semibold); }
.LS_nywear .c-btn > a { display: flex; justify-content: center; align-items: center; width: 100%; padding: calc(11 * var(--u)) 0; white-space: nowrap; }
.LS_nywear .ny_lead__ja + .c-btn { margin-top: calc(35 * var(--u)); }

/* ============================================================
  アイテムセクション — 左寄せ太め見出し + 機能アイコン（指示）
============================================================ */
.LS_nywear .ny_item { margin-top: calc(115 * var(--u)); }
.LS_nywear .ny_item:first-child { margin-top: calc(60 * var(--u)); }
@media (max-width: 767px) { .LS_nywear .ny_item:first-child { margin-top: calc(100 * var(--u)); } }
.LS_nywear .ny_item__no { font-family: var(--font-century); font-weight: var(--fw-bold); font-size: calc(16 * var(--u)); line-height: 1; letter-spacing: .1em; color: var(--key); }
.LS_nywear .ny_item__title { margin-top: calc(10 * var(--u)); font-family: var(--font-century); font-weight: var(--fw-bold); font-size: calc(25 * var(--u)); line-height: 1.36; letter-spacing: .06em; text-align: left; }
.LS_nywear .ny_item__title-ja { display: block; margin-top: calc(6 * var(--u)); font-family: var(--font-ja); font-size: calc(13 * var(--u)); line-height: 1.8; letter-spacing: .1em; font-weight: var(--fw-semibold); }
.LS_nywear .ny_icons { display: flex; column-gap: calc(14 * var(--u)); margin-top: calc(16 * var(--u)); }
.LS_nywear .ny_icons li { width: calc(48 * var(--u)); }
.LS_nywear .ny_icons img { display: block; width: 100%; height: auto; }
.LS_nywear .ny_icons__note { margin-top: calc(8 * var(--u)); /*font-size: calc(11 * var(--u));*/ line-height: 1.6; letter-spacing: .05em; font-weight: var(--fw-light);font-size: calc(8 * var(--u)); text-align: center;}
.LS_nywear .ny_item__main { margin-top: calc(30 * var(--u)); }
/* 下画像スライダー（お戻し0904: 2枚並び→1枚大きくスライド・●〇＋＜＞・ループ） */
.LS_nywear .ny_subs { margin-top: calc(30 * var(--u)); }
.LS_nywear .ny_subs .swiper { position: relative; width: 100%; }
.LS_nywear .ny_subs .swiper-slide { width: 100%; }
.LS_nywear .ny_subs .swiper-pagination { position: absolute; left: 0; right: 0; top: calc(448 * var(--u)); bottom: auto; z-index: 2; display: flex; justify-content: center; column-gap: calc(9 * var(--u)); }
.LS_nywear .ny_subs .swiper-pagination-bullet { display: block; width: calc(8 * var(--u)); height: calc(8 * var(--u)); margin: 0; border-radius: 50%; border: 1px solid var(--key); background: var(--color-white); opacity: 1; }
.LS_nywear .ny_subs .swiper-pagination-bullet-active { background: var(--key); }
.LS_nywear .ny_subs .swiper:not(.swiper-initialized) .swiper-wrapper { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
.LS_nywear .ny_subs .swiper:not(.swiper-initialized) .swiper-slide { flex: 0 0 100%; scroll-snap-align: start; }
.LS_nywear .ny_subs .swiper:not(.swiper-initialized) .ny_slider__nav, .LS_nywear .ny_subs .swiper:not(.swiper-initialized) .swiper-pagination { display: none; }
/* 機能紹介スライダー（お戻し0904: 既存の切替写真をスライド化・●〇ドット＋＜＞矢印で複数枚を可視化） */
.LS_nywear .ny_feature .swiper { position: relative; width: 100%; }
.LS_nywear .ny_feature .swiper-slide { width: 100%; }
.LS_nywear .ny_feature__frame { margin: 0; }
.LS_nywear .ny_feature__frame figcaption { width: calc(335 * var(--u)); margin: calc(14 * var(--u)) auto 0; font-size: calc(12 * var(--u)); line-height: 2; letter-spacing: .05em; font-weight: var(--fw-light); text-align: center; }
.LS_nywear .ny_feature .swiper-pagination { position: absolute; left: 0; right: 0; top: calc(448 * var(--u)); bottom: auto; z-index: 2; display: flex; justify-content: center; column-gap: calc(9 * var(--u)); }
.LS_nywear .ny_feature .swiper-pagination-bullet { display: block; width: calc(8 * var(--u)); height: calc(8 * var(--u)); margin: 0; border-radius: 50%; border: 1px solid var(--key); background: var(--color-white); opacity: 1; }
.LS_nywear .ny_feature .swiper-pagination-bullet-active { background: var(--key); }
.LS_nywear .ny_slider__nav { position: absolute; top: calc(234 * var(--u)); transform: translateY(-50%); z-index: 2; width: calc(38 * var(--u)); height: calc(38 * var(--u)); border: 0; padding: 0; background: rgba(255, 255, 255, .85); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.LS_nywear .ny_slider__nav::before { content: ""; width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-top: 1px solid var(--key); border-right: 1px solid var(--key); }
.LS_nywear .ny_slider__nav.-prev { left: 0; }
.LS_nywear .ny_slider__nav.-prev::before { transform: rotate(-135deg); margin-left: calc(4 * var(--u)); }
.LS_nywear .ny_slider__nav.-next { right: 0; }
.LS_nywear .ny_slider__nav.-next::before { transform: rotate(45deg); margin-right: calc(4 * var(--u)); }
.LS_nywear .ny_slider__nav:hover { opacity: .6; }
.LS_nywear .ny_feature .swiper:not(.swiper-initialized) .swiper-wrapper { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
.LS_nywear .ny_feature .swiper:not(.swiper-initialized) .swiper-slide { flex: 0 0 100%; scroll-snap-align: start; }
.LS_nywear .ny_feature .swiper:not(.swiper-initialized) .ny_slider__nav, .LS_nywear .ny_feature .swiper:not(.swiper-initialized) .swiper-pagination { display: none; }

/* クレジット（商品名14/.15em・価格18 century+2px下線） */
.LS_nywear .ny_credit { margin-top: calc(37 * var(--u)); text-align: left; }
.LS_nywear .ny_credit__date { font-size: calc(13 * var(--u)); line-height: 1.8; letter-spacing: .06em; font-weight: var(--fw-semibold); }
.LS_nywear .ny_credit__name { font-size: calc(14 * var(--u)); line-height: 1.86; letter-spacing: .15em; font-weight: var(--fw-semibold); }
.LS_nywear .ny_credit__name span { display: block; font-size: calc(12 * var(--u)); letter-spacing: .1em; font-weight: var(--fw-regular); }
.LS_nywear .ny_credit__size { margin-top: calc(8 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.6; letter-spacing: .1em; font-weight: var(--fw-medium); }
.LS_nywear .ny_credit__price { display: inline-block; margin-top: calc(8 * var(--u)); font-family: var(--font-century); font-weight: var(--fw-bold); font-size: calc(18 * var(--u)); line-height: 1.33; letter-spacing: .05em; border-bottom: 2px solid var(--key); padding-bottom: calc(2 * var(--u)); }
.LS_nywear .ny_credit__lead { margin-top: calc(18 * var(--u)); font-size: calc(13 * var(--u)); line-height: 2.3076923077; letter-spacing: .05em; font-weight: var(--fw-light); font-feature-settings: normal; }

/* ============================================================
  機能紹介切替 — クロスフェード0.8s既定（-fade）・自動・スワイプ／ドットなし（先方指示）
  画像とキャプションを同期で切替（依頼表R80・travel_pr参照指定）
============================================================ */
.LS_nywear .ny_feature { margin-top: calc(37 * var(--u)); }
.LS_nywear .p-switch { display: grid; }
.LS_nywear .p-switch__frame { grid-area: 1 / 1; margin: 0; visibility: hidden; }
.LS_nywear .p-switch__frame.is-active { visibility: visible; }
/* 切替モードB: クロスフェード（.LS_nywear に -fade 付与で有効。既定は依頼表指示の「フェードなし」） */
.LS_nywear.-fade .p-switch__frame { visibility: visible; opacity: 0; transition: opacity .8s cubic-bezier(.42,0,.58,1); pointer-events: none; }
.LS_nywear.-fade .p-switch__frame.is-active { opacity: 1; pointer-events: auto; }
.LS_nywear .p-switch__frame figcaption { width: calc(335 * var(--u)); margin: calc(14 * var(--u)) auto 0; font-size: calc(12 * var(--u)); line-height: 2; letter-spacing: .05em; font-weight: var(--fw-light); text-align: center; }

/* ============================================================
  物画像スライド — カラー展開カード（2枚並び+次がのぞく46%・ループ）
============================================================ */
.LS_nywear .ny_colors { margin-top: calc(75 * var(--u)); overflow: hidden; max-width: 100%; }
.LS_nywear .ny_colors .swiper-slide { width: 46%; margin-right: calc(10 * var(--u)); }
.LS_nywear .ny_colors .swiper-slide a { display: block; }
.LS_nywear .ny_colors .swiper-slide .ny_colors__card { display: block; } /* 10/7発売前＝リンクなしカード */
.LS_nywear .ny_colors .ny_colors__date { margin-top: calc(10 * var(--u)); font-size: calc(11 * var(--u)); line-height: 1.6; letter-spacing: .05em; font-weight: var(--fw-semibold); }
.LS_nywear .ny_colors .ny_colors__name { margin-top: calc(10 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.6; letter-spacing: .1em; font-weight: var(--fw-semibold); }
.LS_nywear .ny_colors .ny_colors__date + .ny_colors__name { margin-top: calc(2 * var(--u)); }
.LS_nywear .ny_colors .ny_colors__name span { display: block; font-size: calc(10 * var(--u)); letter-spacing: .06em; font-weight: var(--fw-regular); }
.LS_nywear .ny_colors .ny_colors__color { margin-top: calc(6 * var(--u)); font-size: calc(11 * var(--u)); letter-spacing: .1em; font-weight: var(--fw-medium); }
.LS_nywear .ny_colors .ny_colors__price { display: inline-block; margin-top: calc(4 * var(--u)); font-family: var(--font-century); font-weight: var(--fw-bold); font-size: calc(14 * var(--u)); line-height: 1.33; letter-spacing: .05em; border-bottom: 2px solid var(--key); padding-bottom: calc(1 * var(--u)); }
.LS_nywear .ny_colors .swiper { width: calc(375 * var(--u)); margin-left: auto; margin-right: auto; }
.LS_nywear .ny_colors .swiper:not(.swiper-initialized) .swiper-wrapper { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
.LS_nywear .ny_colors .swiper:not(.swiper-initialized) .swiper-slide { flex: 0 0 46%; scroll-snap-align: start; }

/* スタイリング画像 */
.LS_nywear .ny_style { margin-top: calc(50 * var(--u)); }

/* 固定CTA（依頼表追記: LPが長いため「アイテムをすべて見る」を固定表示。
   リードCTA通過後に表示・末尾CTA/SNAP表示中は非表示（JSが.is-visible付与）。
   z-indexはサイト共通ヘッダーより低く抑制 */
.LS_nywear .ny_fixedcta { position: fixed; left: 50%; bottom: calc(20 * var(--u)); width: calc(335 * var(--u)); z-index: 50; opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(calc(16 * var(--u))); transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s; }
.LS_nywear .ny_fixedcta.is-visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition: opacity .4s ease, transform .4s ease; }
.LS_nywear .ny_fixedcta a { display: flex; justify-content: center; align-items: center; width: 100%; padding: calc(11 * var(--u)) 0; background-color: var(--key); color: var(--color-white); font-size: calc(16 * var(--u)); line-height: 2.125; letter-spacing: .1em; font-weight: var(--fw-semibold); white-space: nowrap; box-shadow: 0 calc(4 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 34, .25); }
@media (min-width: 768px) { .LS_nywear .ny_fixedcta { left: 75%; } } /* PC2分割＝右カラム中央 */

/* 末尾CTA（上75・下90の非対称で次セクションと分離） */
.LS_nywear .ny_foot { margin-top: calc(75 * var(--u)); }
.LS_nywear .ny_foot .c-btn { margin-top: 0; }

/* STAFF SNAP — LEEEP埋め込み（タグ未受領・受領後差し替え） */
.LS_nywear .ny_snap { margin-top: calc(90 * var(--u)); }
.LS_nywear .ny_snap__title { font-family: var(--font-century); font-weight: var(--fw-bold); font-size: calc(25 * var(--u)); line-height: 1.36; letter-spacing: .1em; text-align: center; }
.LS_nywear .ny_snap__embed { width: calc(335 * var(--u)); margin: calc(30 * var(--u)) auto 0; min-height: calc(60 * var(--u)); }
/* LEEEPタグ受領までの仮枠（グレースケール） */
.LS_nywear .ny_snap__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(5 * var(--u)); }
.LS_nywear .ny_snap__grid li { aspect-ratio: 3 / 4; background-color: #E9E9E9; }
.LS_nywear .ny_snap__grid li:nth-child(2n) { background-color: #F2F2F2; }

/* ============================================================
  スクロールフェード（0.8s / 50px rise / rootMargin -30%）
============================================================ */
.LS_nywear .js-fade { opacity: 0; transform: translateY(calc(50 * var(--u))); transition: opacity .8s cubic-bezier(.42,0,.58,1), transform .8s cubic-bezier(.42,0,.58,1); }
.LS_nywear .js-fade.is-shown { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .LS_nywear .js-fade { opacity: 1; transform: none; transition: none; }
  .LS_nywear .ny_head { position: static; height: auto; }
  .LS_nywear .p-switch__frame { visibility: visible; grid-area: auto; }
}

/* ============================================================
  重なる動き（依頼表チェックシートR11 参考②usagi-online:
  1セクション＝1アイテムごとに重なる）— docs/sticky-overlap-pattern.md
  各itemは下端が画面下端に達した位置でピン（top=100vh−実測高。JSが--stack-hを設定し
  .is-stackを付与）→ 次のitemが上に覆い被さる。JS無効時は通常フロー。
  §0: 本番 #Wrap/#Contents/.main-area のoverflowはclipで上書き（sticky不発火の真因対策）
============================================================ */
#Wrap, #Contents, .main-area { overflow: clip !important; overflow-x: clip !important; }
/* lazy画像のロード完了フェード（ブロックfade後に読み込まれた画像がポップインするのを防ぐ。JSがクラス付与） */
.LS_nywear img.is-lazyfade { opacity: 0; }
.LS_nywear img.is-lazyfade.is-lazydone { opacity: 1; transition: opacity .8s ease; }
.LS_nywear.is-stack .ny_stack > .ny_item { position: -webkit-sticky; position: sticky; top: min(0px, calc(100vh - var(--stack-h, 100vh))); top: min(0px, calc(100svh - var(--stack-h, 100vh))); background: var(--color-white); padding-top: calc(50 * var(--u)); padding-bottom: calc(90 * var(--u)); margin-top: calc(65 * var(--u)); }
.LS_nywear.is-stack .ny_stack > .ny_item:first-child { margin-top: calc(60 * var(--u)); }
@media (max-width: 767px) { .LS_nywear.is-stack .ny_stack > .ny_item:first-child { margin-top: calc(100 * var(--u)); } }

/* スライド可視化 — 全幅スクロールバー（ドラッグ可・スライドと左端揃え） */
.LS_nywear .ny_colors .swiper { position: relative; padding-bottom: calc(28 * var(--u)); }
.LS_nywear .ny_colors .swiper-scrollbar { position: absolute; left: 0; right: 0; bottom: calc(6 * var(--u)); height: 2px; background: #E2E2E6; }
.LS_nywear .ny_colors .swiper-scrollbar-drag { height: 100%; border-radius: 0; background: var(--key); cursor: grab; }

/* 価格（税込・下線）にも商品リンク — 見た目は従来どおり */
.LS_nywear .ny_credit__price a { color: inherit; text-decoration: none; }

/*調整追記*/

.LS_nywear .ny_icons li.icon_Repellent { width: calc(48 * var(--u)); }
.LS_nywear .ny_icons li.icon_uv { width: calc(42 * var(--u)); }
.LS_nywear .ny_icons li.icon_washable { width: calc(47 * var(--u)); }

@media (max-width: 767px) {
  .LS_nywear .ny_colors .swiper {
    padding: 0 calc(20 * var(--u)) calc(28 * var(--u)) calc(20 * var(--u));
  }
}

@media (min-width: 768px) {
  .LS_nywear .ny_head {
    transition: top 0.5s, height 0.5s;
    height: auto;
  }
  .LS_nywear .js-fade.is-shown + .ny_lead * {
    opacity: 1;
    transform: translateY(0);
  }

  .LS_nywear.scroll-up .ny_head {
    top: 0;
  }
  .LS_nywear .ny_lead__title {
    margin-top: calc(20 * var(--u));
    font-size: calc(26 * var(--u));
  }
  .LS_nywear .ny_lead__ja {
    margin-top: calc(10 * var(--u));
    font-size: calc(10 * var(--u));
  }
  
  .LS_nywear .ny_head .c-btn {
    margin-bottom: calc(115 * var(--u));
  }
  .LS_nywear .ny_lead__ja + .c-btn {
    margin-top: calc(20 * var(--u));
  }

}