@charset "UTF-8";
/* ============================================================
  LeSportsac × MARITHÉ FRANÇOIS GIRBAUD  LP
  デザインあり / design01 準拠：SP幅の単一カラム
  ・ブルーの見出し帯（section label）＋各ブロックに「アイテムを見る」ボタン
  ・ギンガムチェックをアクセント（見出し帯・区切り）
  スコープ: .LS_marithe（グローバル汚染なし）
  流体スケール: calc(N * var(--variable) * var(--ratio))  ※デザインpx = N
============================================================ */
.LS_marithe *,
.LS_marithe *::before,
.LS_marithe *::after { box-sizing: border-box; }

.LS_marithe {
  /* --- collab palette（依頼キャプチャ指定値：商品のブラウン＋ブルー） --- */
  --mfg-brown: #423622;
  --mfg-brown-deep: #2e2618;
  --mfg-blue: #7c879f;
  --mfg-blue-deep: #5d6577;
  --mfg-blue-light: #bdc3cf;
  --mfg-cream: #efe7dc;
  --mfg-paper: #f6f2ec;
  --mfg-white: #ffffff;
  --color-text: #3a2f27;

  --font-en: var(--font-alte-haas-grotesk, "Alte Haas Grotesk", sans-serif);
  --font-century: "century-gothic", var(--font-en);
  --font-ja: "hiragino-kaku-gothic-pron", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  --fw-regular: 400;
  --fw-bold: 700;

  /* 単一カラム基準：SP 375 / PC は 500 幅のカラムを中央寄せ */
  --pc-width: 1600;
  --sp-width: 375;
  --pc-artboard-width: 500;
  --sp-artboard-width: 375;

  font-family: var(--font-ja);
  font-feature-settings: "palt";
  color: var(--color-text);
  background-color: var(--mfg-cream);
  overflow: visible;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1600px) {
  .LS_marithe { --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); --variable: 1px; }
}
@media (min-width: 768px) and (max-width: 1600px) {
  .LS_marithe { --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); --variable: calc(100vw / var(--pc-width)); }
}
@media (max-width: 767px) {
  .LS_marithe { --ratio: 1; --variable: calc(100vw / var(--sp-width)); }
}

.LS_marithe img,
.LS_marithe picture,
.LS_marithe video { display: block; width: 100%; height: auto; vertical-align: bottom; }
.LS_marithe a { color: inherit; text-decoration: none; }
.LS_marithe h1, .LS_marithe h2, .LS_marithe h3, .LS_marithe p { margin: 0; }
.LS_marithe section { position: relative; }
.LS_marithe .u-en { font-family: var(--font-en); font-weight: var(--fw-bold); letter-spacing: .04em; }

/* ---- 単一カラム：中央寄せ ---- */
.LS_marithe .lp_column {
  width: calc(375 * var(--variable) * var(--ratio));
  max-width: 100%;
  margin: 0 auto;
  background-color: var(--mfg-white);
  padding-bottom: calc(90 * var(--variable) * var(--ratio)); /* randr準拠: セクション間75-100px */
}

/* ============================================================
  ギンガムチェック（アクセント）
============================================================ */
.LS_marithe .gingham {
  --g: calc(7 * var(--variable) * var(--ratio));
  background-color: var(--mfg-blue-light);
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.55) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.55) 75%),
    linear-gradient(45deg, rgba(255,255,255,.55) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.55) 75%);
  background-size: var(--g) var(--g);
  background-position: 0 0, calc(var(--g)/2) calc(var(--g)/2);
}

/* ============================================================
  HERO — 変化するキービジュアル（ギンガム縁取り）
============================================================ */
.LS_marithe .hero { position: relative; overflow: hidden; aspect-ratio: 375 / 480; }
.LS_marithe .hero_slider { position: absolute; inset: 0; }
.LS_marithe .hero_slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; will-change: opacity; }
.LS_marithe .hero_slide.is-active { opacity: 1; }
.LS_marithe .hero_slide img { width: 100%; height: 100%; object-fit: cover; }
.LS_marithe .lp_fixed { display: none; }
.LS_marithe .hero_logo {
  position: absolute; z-index: 3; left: 50%; bottom: calc(34 * var(--variable) * var(--ratio));
  transform: translateX(-50%); display: flex; flex-direction: column; align-items: center;
  gap: calc(10 * var(--variable) * var(--ratio)); width: auto;
  filter: drop-shadow(0 calc(1 * var(--variable) * var(--ratio)) calc(9 * var(--variable) * var(--ratio)) rgba(0,0,0,.35));
}
.LS_marithe .hero_logo__les { width: calc(120 * var(--variable) * var(--ratio)); height: auto; }
.LS_marithe .hero_logo__x { color: var(--mfg-white); font-size: calc(9 * var(--variable) * var(--ratio)); line-height: 1; }
.LS_marithe .hero_logo__mfg { width: calc(100 * var(--variable) * var(--ratio)); height: auto; }
/* PC: randr踏襲 — 左ロゴ・右テーマをsticky固定(100vh)、中央のlp_columnだけスクロール */
@media (min-width: 768px) {
  .LS_marithe { overflow: visible; }
  .LS_marithe .lp_frame { display: flex; align-items: flex-start; justify-content: center; background: var(--mfg-cream); }
  .LS_marithe .lp_fixed {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: sticky; top: 0; height: 100vh; flex: 1 1 0; min-width: 0;
    padding: calc(30 * var(--variable) * var(--ratio)); box-sizing: border-box;
  }
  .LS_marithe .lp_column { flex: 0 0 calc(375 * var(--variable) * var(--ratio)); }
  .LS_marithe .hero_mark { width: calc(300 * var(--variable) * var(--ratio)); height: auto; }
  .LS_marithe .hero_theme { font-size: calc(30 * var(--variable) * var(--ratio)); font-weight: var(--fw-bold); letter-spacing: .04em; color: var(--color-black); text-align: center; }
  .LS_marithe .hero_seeall {
    display: inline-block; margin-top: calc(24 * var(--variable) * var(--ratio));
    font-size: calc(15 * var(--variable) * var(--ratio)); letter-spacing: .06em; color: var(--color-black);
    text-decoration: underline; text-underline-offset: calc(5 * var(--variable) * var(--ratio)); text-decoration-thickness: 1px;
  }
  .LS_marithe .hero_logo { bottom: calc(24 * var(--variable) * var(--ratio)); }
}

/* ============================================================
  SECTION LABEL — ブルーの見出し帯（ギンガムのアンダーライン）
============================================================ */
.LS_marithe .band {
  background-color: var(--mfg-blue);
  color: var(--mfg-white);
  text-align: center;
  padding: calc(20 * var(--variable) * var(--ratio)) calc(20 * var(--variable) * var(--ratio));
  border-bottom: calc(6 * var(--variable) * var(--ratio)) solid transparent;
}
.LS_marithe .band__en { font-size: calc(22 * var(--variable) * var(--ratio)); letter-spacing: .08em; }
.LS_marithe .band__ja { font-size: calc(12 * var(--variable) * var(--ratio)); letter-spacing: .12em; margin-top: calc(6 * var(--variable) * var(--ratio)); opacity: .9; }
.LS_marithe .band_gingham { height: calc(8 * var(--variable) * var(--ratio)); }

/* ============================================================
  INTRO PANEL — CONCEPT / ABOUT / INFORMATION
  randr実測: テキスト幅335px（= (375-335)/2 = 左右20pxパディング）、見出し→本文37px
============================================================ */
.LS_marithe .intro { padding: calc(50 * var(--variable) * var(--ratio)) calc(20 * var(--variable) * var(--ratio)); }
.LS_marithe .intro__block { margin-bottom: calc(56 * var(--variable) * var(--ratio)); }
.LS_marithe .intro__block:last-child { margin-bottom: 0; }
/* randr踏襲だがCONCEPT/ABOUTはテキストのQ数・行間・ブロック間隔を詰めてコンパクトに */
.LS_marithe .intro__block--compact { margin-bottom: calc(48 * var(--variable) * var(--ratio)); }
.LS_marithe .intro__block--compact .intro__label { margin-bottom: calc(14 * var(--variable) * var(--ratio)); }
/* randr detail流用：見出しはブラウンの中央揃えテキスト（下線アクセントなし） */
.LS_marithe .intro__label {
  font-size: calc(16 * var(--variable) * var(--ratio)); line-height: 2.125; letter-spacing: .1em;
  color: var(--mfg-brown); text-align: center; margin-bottom: calc(6 * var(--variable) * var(--ratio));
  font-weight: var(--fw-bold); font-family: var(--font-en);
}
.LS_marithe .intro__sub__label {
  font-size: calc(18 * var(--variable) * var(--ratio)); line-height: 1; letter-spacing: .1em;
  color: var(--mfg-brown); text-align: center;
  margin: calc(14 * var(--variable) * var(--ratio)) 0 calc(16 * var(--variable) * var(--ratio));
  font-weight: var(--fw-bold); font-family: var(--font-en);
}
.LS_marithe .intro__body {
  font-size: calc(13 * var(--variable) * var(--ratio)); line-height: 2.15; letter-spacing: .045em;
  font-weight: 300; font-feature-settings: normal; /* randr: 本文はpalt解除 */
  text-align: center;
}
.LS_marithe .intro__block--compact .intro__body {
  font-size: calc(11.5 * var(--variable) * var(--ratio)); line-height: 1.9;
}
.LS_marithe .intro__mfglogo { display: inline-block; width: calc(132 * var(--variable) * var(--ratio)); height: auto; }
.LS_marithe .intro__mfgname {
  font-size: calc(17 * var(--variable) * var(--ratio)); letter-spacing: .05em; color: var(--mfg-brown);
  text-align: center; margin: calc(14 * var(--variable) * var(--ratio)) 0 calc(16 * var(--variable) * var(--ratio)); line-height: 1.5;
}
/* randr detail_about踏襲：ABOUTは薄ブラウン地をカラム幅いっぱいに敷く */
.LS_marithe .intro__block--about {
  background-color: var(--mfg-cream);
  margin-left: calc(-20 * var(--variable) * var(--ratio));
  margin-right: calc(-20 * var(--variable) * var(--ratio));
  padding: calc(50 * var(--variable) * var(--ratio)) calc(20 * var(--variable) * var(--ratio));
}
.LS_marithe .intro__block--compact .intro__mfgname {
  font-size: calc(15 * var(--variable) * var(--ratio)); margin-bottom: calc(12 * var(--variable) * var(--ratio));
}
.LS_marithe .intro__insta {
  display: flex; align-items: center; justify-content: center;
  column-gap: calc(6 * var(--variable) * var(--ratio));
  width: fit-content; margin: calc(18 * var(--variable) * var(--ratio)) auto 0;
  font-size: calc(13 * var(--variable) * var(--ratio)); color: var(--mfg-blue); letter-spacing: .08em;
}
.LS_marithe .intro__insta-icon { display: block; width: calc(15 * var(--variable) * var(--ratio)); height: calc(15 * var(--variable) * var(--ratio)); flex: 0 0 auto; }
.LS_marithe .intro__insta-icon svg { display: block; width: 100%; height: 100%; }
.LS_marithe .intro__insta-text { text-decoration: underline; text-underline-offset: calc(3 * var(--variable) * var(--ratio)); text-decoration-skip-ink: none; }
.LS_marithe .intro__block--compact .intro__insta { margin-top: calc(12 * var(--variable) * var(--ratio)); font-size: calc(12 * var(--variable) * var(--ratio)); }

/* ---- INFORMATION（randr踏襲：枠付きボックスの販売店舗リスト） ---- */
.LS_marithe .intro__label--plain {
  color: var(--color-text); letter-spacing: .12em; padding-bottom: 0; margin-bottom: calc(14 * var(--variable) * var(--ratio));
}
.LS_marithe .intro__label--plain::after { display: none; }
.LS_marithe .info__hr { border: none; border-top: calc(1 * var(--variable) * var(--ratio)) solid var(--color-text); margin: calc(14 * var(--variable) * var(--ratio)) 0; }
.LS_marithe .info__date {
  text-align: center; font-size: calc(14 * var(--variable) * var(--ratio)); letter-spacing: .06em;
  color: var(--color-text); font-weight: var(--fw-bold); margin: 0; padding: calc(2 * var(--variable) * var(--ratio)) 0;
}
.LS_marithe .info__box {
  margin-top: calc(24 * var(--variable) * var(--ratio));
  border: calc(4 * var(--variable) * var(--ratio)) solid rgb(124 135 159 / 20%);
  padding: calc(24 * var(--variable) * var(--ratio)) calc(20 * var(--variable) * var(--ratio));
}
.LS_marithe .info__stores-h {
  font-size: calc(13 * var(--variable) * var(--ratio)); letter-spacing: .1em; color: var(--mfg-blue);
  margin-bottom: calc(16 * var(--variable) * var(--ratio)); text-align: center; font-weight: var(--fw-bold);
}
.LS_marithe .info__store-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: calc(5 * var(--variable) * var(--ratio)); row-gap: calc(10 * var(--variable) * var(--ratio));
  font-size: calc(12 * var(--variable) * var(--ratio)); line-height: 1.85; letter-spacing: .06em;
  font-weight: var(--fw-regular);
}
.LS_marithe .info__store-list li { position: relative; padding-left: 1.1em; }
.LS_marithe .info__store-list li::before {
  content: "\2022"; position: absolute; left: 0; top: 0; color: var(--mfg-blue);
}
.LS_marithe .info__store-divider { border: none; border-top: calc(1 * var(--variable) * var(--ratio)) dashed var(--mfg-blue); margin: calc(16 * var(--variable) * var(--ratio)) 0; }
/* ============================================================
  VISUAL — スタイリング画像（段違い・重ね）
============================================================ */
/* ============================================================
  VISUAL — 薄ブラウン地・コラボ名タイトル（帯廃止 / ブラウンにブルー文字）
============================================================ */
.LS_marithe .visual { background-color: var(--mfg-cream); padding: calc(56 * var(--variable) * var(--ratio)) calc(20 * var(--variable) * var(--ratio)) calc(56 * var(--variable) * var(--ratio)); }
.LS_marithe .visual_title {
  text-align: center; color: var(--mfg-brown); margin-bottom: calc(32 * var(--variable) * var(--ratio));
  font-family: var(--font-century); font-weight: var(--fw-bold); letter-spacing: .02em; line-height: 1;
}
.LS_marithe .visual_title__les { display: block; font-size: calc(40 * var(--variable) * var(--ratio)); }
.LS_marithe .visual_title__x { display: block; font-size: calc(18 * var(--variable) * var(--ratio)); margin: calc(14 * var(--variable) * var(--ratio)) 0; opacity: .85; }
.LS_marithe .visual_title__mfg { display: block; font-size: calc(40 * var(--variable) * var(--ratio)); }
.LS_marithe .visual_stack { position: relative; }
.LS_marithe .visual_big { width: 82%; }
.LS_marithe .visual_mid { width: 56%; margin: calc(-46 * var(--variable) * var(--ratio)) 0 0 auto; position: relative; z-index: 2; border: calc(4 * var(--variable) * var(--ratio)) solid var(--mfg-white); }
.LS_marithe .visual_wide { width: 100%; margin-top: calc(18 * var(--variable) * var(--ratio)); }
.LS_marithe .visual_row  { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--variable) * var(--ratio)); margin-top: calc(12 * var(--variable) * var(--ratio)); }
.LS_marithe .visual_row .swiper-wrapper {
  justify-content: space-between!important;
}
.LS_marithe .visual_row .swiper-slide {
  width: 48.5%!important;
  margin-right: 0!important;
}

/* ============================================================
  PRODUCT — 商品名＋価格＋説明＋画像＋「アイテムを見る」ボタン
============================================================ */
.LS_marithe .product { padding: calc(100 * var(--variable) * var(--ratio)) calc(20 * var(--variable) * var(--ratio)) 0; }
/* LINE UP — 帯廃止・ブラウン文字見出し・セクション間を広く */
.LS_marithe .lineup_title {
  text-align: center; color: var(--mfg-brown); font-size: calc(24 * var(--variable) * var(--ratio));
  letter-spacing: .1em; margin: calc(88 * var(--variable) * var(--ratio)) 0 0;
}
/* LINE UP見出し直後の最初の商品は上余白を詰める（見出し→商品の二重積み防止） */
.LS_marithe .lineup_title + .product { padding-top: calc(30 * var(--variable) * var(--ratio)); }
.LS_marithe .product_main { width: 100%; }
.LS_marithe .product_main.is-cutout { background: var(--mfg-paper); }
.LS_marithe .product_slider {
  display: flex; gap: calc(10 * var(--variable) * var(--ratio)); overflow-x: auto;
  scroll-snap-type: x mandatory; padding: calc(16 * var(--variable) * var(--ratio)) 0 calc(6 * var(--variable) * var(--ratio));
  margin-top: calc(14 * var(--variable) * var(--ratio)); scrollbar-width: none;
}
.LS_marithe .product_slider::-webkit-scrollbar { display: none; }
.LS_marithe .product_slide { flex: 0 0 46%; scroll-snap-align: start; }
.LS_marithe .product_slide.is-cutout { background: var(--mfg-paper); }
.LS_marithe .product_head { margin-top: calc(22 * var(--variable) * var(--ratio)); text-align: center; }
.LS_marithe .product_name {
  font-size: calc(15 * var(--variable) * var(--ratio)); letter-spacing: .15em; font-weight: 600; color: var(--mfg-brown-deep);
  text-decoration: underline; text-underline-offset: calc(5 * var(--variable) * var(--ratio)); text-decoration-thickness: calc(1 * var(--variable) * var(--ratio));
}
.LS_marithe .product_price {
  display: block; font-size: calc(14 * var(--variable) * var(--ratio)); letter-spacing: .04em; color: var(--color-text);
  margin-top: calc(12 * var(--variable) * var(--ratio)); font-weight: var(--fw-regular);
}
.LS_marithe .product_lead {
  font-size: calc(13 * var(--variable) * var(--ratio)); line-height: 2.15; letter-spacing: .05em;
  font-weight: 300; font-feature-settings: normal;
  text-align: justify; margin-top: calc(18 * var(--variable) * var(--ratio));
}

/* ============================================================
  VISUAL — 赤枠3枚（mid=車 / wide=大 / row=ペア）をそれぞれ sticky で
  同じ top に pin し、z-index 昇順で後の画像が前の画像の上に重なって
  積み上がる挙動（randrの重なり演出を踏襲）。
  visual_big（先頭）から sticky で pin し、mid→wide→row が z-index 昇順で
  上に重なって積み上がる（randrの重なり演出を踏襲）。
============================================================ */
.LS_marithe .visual_big,
.LS_marithe .visual_mid {
  position: sticky;
  top: calc(100 * var(--variable) * var(--ratio));
}
.LS_marithe .visual_wide,
.LS_marithe .visual_row {
  position: relative;
}
.LS_marithe .visual_big  { z-index: 1; }
.LS_marithe .visual_mid  { z-index: 2; }
.LS_marithe .visual_wide { z-index: 3; }
.LS_marithe .visual_row  { z-index: 4; }
@media (prefers-reduced-motion: reduce) {
  .LS_marithe .visual_big,
  .LS_marithe .visual_mid,
  .LS_marithe .visual_wide,
  .LS_marithe .visual_row { position: relative; }
}

/* ============================================================
  BUTTON — 「アイテムを見る」（randrリズム：ボタン前60px・二重積み禁止）
============================================================ */
.LS_marithe .mfg_btn {
  width: calc(335 * var(--variable) * var(--ratio)); margin: calc(60 * var(--variable) * var(--ratio)) auto 0;
}
/* ボタン直前のブロックの下マージンを殺す（margin 75 + 60 の二重積み防止） */
.LS_marithe .intro__block:has(+ .mfg_btn) { margin-bottom: 0; }
/* CTAで終わるセクションは下を広く：上60 < 下90 で「ボタンは上のコンテンツに属する」階層を作る */
.LS_marithe .intro:has(> .mfg_btn) { padding-bottom: calc(90 * var(--variable) * var(--ratio)); }
.LS_marithe .mfg_btn > a {
  display: flex; align-items: center; justify-content: center;
  padding: calc(12 * var(--variable) * var(--ratio)) 0;
  font-size: calc(14 * var(--variable) * var(--ratio)); letter-spacing: .12em; font-weight: var(--fw-bold);
  background-color: var(--mfg-blue); color: var(--mfg-white);
  border: calc(2 * var(--variable) * var(--ratio)) solid var(--mfg-blue);
  transition: opacity .3s ease;
}
.LS_marithe .mfg_btn--brown > a { background-color: var(--mfg-brown-deep); border-color: var(--mfg-brown-deep); }
.LS_marithe .mfg_btn > a:hover { opacity: .6; }
/* 商品リード文→ボタンは35dpx（テキストに寄り添う）。セクション末尾CTAの60dpxと区別 */
.LS_marithe .product .mfg_btn { margin-top: calc(35 * var(--variable) * var(--ratio)); }
/* 連続する2ボタン（商品CTA→全体CTA）は同一導線グループ：間隔40dpxに詰める */
.LS_marithe .footer_cta { padding: 0 0 calc(48 * var(--variable) * var(--ratio)); }
.LS_marithe .footer_cta .mfg_btn { margin-top: calc(40 * var(--variable) * var(--ratio)); }

/* ============================================================
  ANIMATION — 控えめなフェードイン（依頼表: 派手な動き不要）
============================================================ */
.LS_marithe .js-fade { opacity: 0; transform: translateY(calc(24 * var(--variable) * var(--ratio))); transition: opacity .9s ease, transform .9s ease; }
.LS_marithe .js-fade.is-shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .LS_marithe .js-fade { opacity: 1; transform: none; transition: none; }
  .LS_marithe .hero_slide { transition: none; }
}


/* ============================================================
  画像スライダー（randr .js-sliderImage 踏襲：連続リニアフロー）
  高さ揃え・自然幅のフィルムストリップ。product_slider / visual_row 共用
============================================================ */
.LS_marithe .js-sliderImage { overflow: hidden; }
.LS_marithe .js-sliderImage .swiper-wrapper { transition-timing-function: linear !important; align-items: center; }
.LS_marithe .js-sliderImage .swiper-slide {
  width: 46%; height: auto; aspect-ratio: 3 / 4;
  margin-right: calc(8 * var(--variable) * var(--ratio));
}
.LS_marithe .js-sliderImage .swiper-slide.is-cutout { background: var(--mfg-paper); }
.LS_marithe .js-sliderImage .swiper-slide a { display: block; width: 100%; height: 100%; }
.LS_marithe .js-sliderImage .swiper-slide img { width: 100%; height: 100%; display: block; object-fit: cover; }
.LS_marithe .js-sliderImage .swiper-slide.is-cutout img { object-fit: contain; }
.LS_marithe .visual_row.js-sliderImage { display: block; grid-template-columns: none; gap: 0; padding-top: calc(18 * var(--variable) * var(--ratio));  margin-top: 0; background: var(--mfg-cream); }

@media (max-width: 767px) {
  /* システム共通のラッパーのoverflowを強制的にvisibleにしてstickyを有効化する */
  #Wrap, 
  #Contents, 
  .main-area {
    overflow: clip !important;
    overflow-x: clip !important;
  }
}