@charset "UTF-8";
/* =====================================================
   AU260805MCFC 大人のためのMCFCスモールバッグコレクション
   - SP特化型（PCパターンA: 左カラム画像固定 / 右カラム SPコンテンツ）
   - 単位・命名などの規約は coding-guidelines.md を参照
   ===================================================== */
.header .information {
  height: auto;
}

.header__wrapper {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: var(--zindex-header);
}
@media screen and (min-width: 768px) {
  #header .header__inner svg {
    fill: #fff;
  }
  #header .cls-4 {
    stroke: #fff;
  }
  #header.header .navigation__list {
    color: #fff;
  }
  #header:not(.is-open).header .drawer-btn__border {
    background: #fff;
  }
  #header:not(.is-open).header .drawer-btn__border::after {
    background: #fff;
  }
  #header:not(.is-open).header .drawer-btn__border::before {
    background: #fff;
  }
}
@media (max-width: 767px) {
  .header__wrapper {
    position: absolute;
    top: calc(80 * var(--formula));
    width: 100%;
    padding: 0 6vw 0;
    margin: 8vw 0 6vw;
  }
  #header:not(.is-open) .header__inner svg {
    fill: #fff;
  }
  #header:not(.is-open) .cls-4 {
    stroke: #fff;
  }
  #header:not(.is-open).header .navigation__list {
    color: #fff;
  }
  #header:not(.is-open).header .drawer-btn__border {
    background: #fff;
  }
  #header:not(.is-open).header .drawer-btn__border::after {
    background: #fff;
  }
  #header:not(.is-open).header .drawer-btn__border::before {
    background: #fff;
  }
}
@font-face {
  font-family: "Nimbus Sans";
  src: url("/fonts/NimbusSans-Regular.woff2") format("woff2"),
       url("/fonts/NimbusSans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* ▼ -----------可変設定---------- ▼ */
.lp_variable {
  /*デザインの値*/
  --pc-width: 1400;/*PCデザイン幅*/
  --sp-width: 750;/*SPデザイン幅*/
  --pc-artboard-width: 565;/*PC時の中央コンテンツ列の幅*/
  --sp-artboard-width: 750;/*SP時の中央コンテンツ列の幅*/
 /*可変率の計算式*/
  --formula: calc(var(--variable) * var(--ratio));/*SP,PC共通箇所の可変割合の計算式*/
  --formula_pc: calc(var(--variable) * 1);/*PCデザインの可変割合の計算式*/
 }

/* PC画面幅 1400px以上 固定 */
@media (min-width: 1401px) {
  .lp_variable {
  --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比率 */
  --variable: 1px; /* 固定値（可変しない） */
  }
 }

 /* PC画面幅 768～1400px 可変 */
 @media (min-width: 768px) and (max-width: 1400px) {
  .lp_variable {
  --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比率 */
  --variable: calc(100vw / var(--pc-width)); /* 画面幅に基づく可変値 */
  }
 }

 /* SP画面幅 767px以下 可変
    ※ 上限は 767.98px。ブラウザズームや OS のスケーリングで幅が小数（例 767.5px）になると
      767px 指定では PC 側の 768px にも当たらず、--formula が未定義になってレイアウトが崩れる */
 @media (max-width: 767.98px) {
  .lp_variable {
  --ratio: 1; /* 比率は1（変わらない） */
  --variable: calc(100vw / var(--sp-width)); /* 画面幅に基づく可変値 */
  }
 }
/* ▲ -----------可変設定---------- ▲ */

/* ▼ -----------カスタムプロパティ---------- ▼ */
#AU260805MCFC {
  --color-text: #000;
  --color-white: #fff;
  --color-bg: #e1d2c8;
  /* Nimbus Sans は Adobe Fonts 未導入のためフォールバック（Helvetica 系＝メトリクス互換） */
  --font-en: "Nimbus Sans", sans-serif;
  /* デザインの和文は HiraginoSans-W5。"Hiragino Kaku Gothic ProN" は W3/W6 しか持たず
     font-weight:500 では W3 に落ちるため、W5 を持つ "Hiragino Sans" を先に置く */
  --font-ja: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-base: var(--font-ja);
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
}
/* ▲ -----------カスタムプロパティ---------- ▲ */

/* ▼ -----------LPスコープ リセット---------- ▼ */
#AU260805MCFC * {
  box-sizing: border-box;
  font: inherit; /* font-family / size / weight / style / line-height を継承（フォーム部品含む） */
  letter-spacing: inherit; /* font ショートハンドに含まれないため明示 */
  font-feature-settings: "palt";
}

#AU260805MCFC h2,
#AU260805MCFC h3,
#AU260805MCFC p {
  margin: 0;
}

#AU260805MCFC a {
  color: inherit;
  text-decoration: none;
}

#AU260805MCFC a:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

#AU260805MCFC img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  transition: unset;
}

#AU260805MCFC picture {
  display: block;
}

/* ※ 表示制御ユーティリティ（.is-hidden--desktop / --mobile）は本LPで使用しないため
      雛形から削除している（!important を残さないため）。必要になれば src/template/style.css から戻す。 */
/* ▲ -----------LPスコープ リセット---------- ▲ */

/* ▼ -----------ベーススタイル---------- ▼ */
#AU260805MCFC {
  color: var(--color-text);
  background-color: var(--color-bg);
  font-family: var(--font-base);
  font-weight: var(--fw-medium);
  line-height: 1.5;   /* line-height は単位なし */
  letter-spacing: 0;  /* letter-spacing は em */
  overflow-x: clip;   /* 100vw 基準の可変幅による横スクロールを閉じる（clip は sticky を壊さない） */
}
/* ▲ -----------ベーススタイル---------- ▲ */

/* ▼ -----------出現アニメーション---------- ▼
   MV: DOMContentLoaded から 500ms ステップで順次（js-mvImage → js-mvLogo → js-mvLead）
   MV以下: IntersectionObserver で is-active を付与
     - 画像 .js-fadeUp   … opacity + 上方向スライド 0.7s
     - 文字 .js-fadeText … 左から右へのワイプ 0.75s
   初期状態（非表示）は .js-enabled 配下のみに適用する。
   JS 無効・script.js 読み込み失敗時はコンテンツが最初から見える状態になる。 */
#AU260805MCFC .js-mvLogo {
  display: block;
  overflow: hidden; /* ロゴのスライドアップ用マスク（JS の有無に関わらず必要） */
}

.js-enabled #AU260805MCFC .js-mvImage {
  opacity: 0;
  transition: opacity 1.2s ease;
}

.js-enabled #AU260805MCFC .js-mvImage.is-active {
  opacity: 1;
}

.js-enabled #AU260805MCFC .js-mvLogo img {
  opacity: 0;
  translate: 0 90%;
  transition: opacity 1.5s ease, translate 1.5s ease;
}

.js-enabled #AU260805MCFC .js-mvLogo.is-active img {
  opacity: 1;
  translate: 0 0;
}

.js-enabled #AU260805MCFC .js-mvLead,
.js-enabled #AU260805MCFC .js-fadeUp {
  opacity: 0;
  translate: 0 20px;
  transition: opacity 0.7s, translate 0.7s;
}

.js-enabled #AU260805MCFC .js-mvLead.is-active,
.js-enabled #AU260805MCFC .js-fadeUp.is-active {
  opacity: 1;
  translate: 0 0;
}

.js-enabled #AU260805MCFC .js-fadeText {
  clip-path: inset(-10% 100% 0 0);
  transition: clip-path 0.75s ease-out;
}

.js-enabled #AU260805MCFC .js-fadeText.is-active {
  clip-path: inset(-10% 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .js-enabled #AU260805MCFC .js-mvImage,
  .js-enabled #AU260805MCFC .js-mvLogo img,
  .js-enabled #AU260805MCFC .js-mvLead,
  .js-enabled #AU260805MCFC .js-fadeUp,
  .js-enabled #AU260805MCFC .js-fadeText {
    opacity: 1;
    translate: 0 0;
    clip-path: none;
    transition: none;
  }
}
/* ▲ -----------出現アニメーション---------- ▲ */

/* ▼ -----------レイアウト（2カラム）---------- ▼ */
#AU260805MCFC {
  --lp-header-offset: 0px; /* サイト共通ヘッダー高（追従サブの逃げ） */
}

/* 中央コンテンツ列の幅（SP: sp-artboard-width / PC: pc-artboard-width） */
#AU260805MCFC .lp-inner {
  width: calc(var(--sp-artboard-width) * var(--formula));
  margin-inline: auto;
  padding-top: calc(137 * var(--formula)); /* SP: MV下端からリード文まで */
}
@media (min-width: 768px) {
  #AU260805MCFC .lp-inner {
    width: calc(var(--pc-artboard-width) * var(--formula_pc));
    padding-top: calc(321.4 * var(--formula_pc)); /* PC: 右カラム上端からリード文まで */
  }
}

/* グリッド本体（PCのみ grid 化。SPは通常フロー） */
@media (min-width: 768px) {
  #AU260805MCFC .lp-layout { display: grid; align-items: start; }
  #AU260805MCFC .lp-layout--col-2 { grid-template-columns: 1fr 1fr; }
}

/* 中央（スクロールする本体）: 横はみ出しを閉じる */
#AU260805MCFC .lp-layout__primary { overflow-x: clip; }

/* 左右サブ（PC追従／SP非表示。本LPは MV に使用し SP でも表示する） */
#AU260805MCFC .lp-layout__sub { display: none; }
@media (min-width: 768px) {
  #AU260805MCFC .lp-layout__sub {
    display: grid;
    place-items: center;
    position: sticky;
    top: var(--lp-header-offset, 0px);
    height: calc(100dvh - var(--lp-header-offset, 0px));
    overflow: hidden;
  }
}
/* ▲ -----------レイアウト（2カラム）---------- ▲ */

/* =====================================================
   セクションスタイル
   ===================================================== */

/* ▼ -----------MV（PC: 左カラム固定 / SP: 先頭）---------- ▼ */
#AU260805MCFC .lp-mv {
  display: block; /* SP でも表示する（.lp-layout__sub の display:none を打ち消す） */
}

#AU260805MCFC .lp-mv__link {
  display: block;
  position: relative;
}

#AU260805MCFC .lp-mv__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#AU260805MCFC .lp-mv__cell {
  aspect-ratio: 375 / 525;
  overflow: hidden;
}

#AU260805MCFC .lp-mv__cell img {
  height: 100%;
}

#AU260805MCFC .lp-mv__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: calc(359 * var(--formula));
  z-index: 1;
}

@media (min-width: 768px) {
  /* .lp-layout__sub の grid（place-items: center）だと暗黙トラックが auto になり
     子の height:100% が循環して解決できないため、block にして高さを継承させる */
  #AU260805MCFC .lp-mv {
    display: block;
  }

  #AU260805MCFC .lp-mv__link {
    width: 100%;
    height: 100%;
  }

  /* PC は左カラムの高さ（100dvh）にフィットさせる */
  #AU260805MCFC .lp-mv__grid {
    height: 100%;
    grid-template-rows: 1fr 1fr;
  }

  #AU260805MCFC .lp-mv__cell {
    aspect-ratio: auto;
  }

  #AU260805MCFC .lp-mv__logo {
    width: calc(339 * var(--formula_pc));
  }
}
/* ▲ -----------MV---------- ▲ */

/* ▼ -----------リード文---------- ▼ */
#AU260805MCFC .lp-lead {
  text-align: center;
  line-height: 1;
}

#AU260805MCFC .lp-lead__sub {
  display: block;
  font-size: calc(24 * var(--formula));
  letter-spacing: 0.05em; /* デザインの1行目の文字幅 448 に合わせた実測値 */
}

#AU260805MCFC .lp-lead__main {
  display: block;
  margin-top: calc(26 * var(--formula)); /* 行送り 50 - 行1の font-size 24 */
  font-size: calc(29 * var(--formula));
  letter-spacing: 0.04em; /* デザインの行幅 659 に合わせた実測値 */
}
/* ▲ -----------リード文---------- ▲ */

/* ▼ -----------商品セクション---------- ▼ */
#AU260805MCFC .lp-product {
  margin-top: calc(180 * var(--formula)); /* 前セクションの着用画像から */
}

#AU260805MCFC .lp-product--first {
  margin-top: calc(142 * var(--formula)); /* リード文から */
}

/* 商品名（画像上に重ねる白文字）
   top はデザインの文字上端（画像上端 +39.5）に合わせた値。
   line-height:1 のボックス上端から文字上端までの約3px を引いてある。
   幅はテキストなりにする（.js-fadeText の左→右ワイプが余白から始まらないようにするため）。
   font-size 57 / letter-spacing はフォールバックフォント基準の実測値。
   Adobe Fonts の Nimbus Sans を導入したら font-size（デザイン表記は 60）と字送りを再調整する。 */
#AU260805MCFC .lp-product__title {
  position: absolute;
  top: calc(41 * var(--formula));
  left: 50%;
  translate: -50% 0;
  width: -webkit-max-content;
  width: max-content;
  max-width: 100%;
  z-index: 1;
  color: var(--color-white);
  font-family: var(--font-primary);
  font-size: calc(60 * var(--formula));
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* MINI SHOULDER BAG のみデザインの字幅が他より広いため個別に緩める */
#AU260805MCFC .lp-product__title--loose {
  letter-spacing: 0.005em;
}

/* MINI TOTE BAG のみデザインの文字上端が画像上端 +50 */
#AU260805MCFC .lp-product__title--lower {
  top: calc(52 * var(--formula));
}

/* 商品名（着用画像の外側にはみ出す縦組み） */
#AU260805MCFC .lp-product__title--vertical {
  top: calc(46 * var(--formula)); /* 行送りを詰めた分（half-leading が負）を足して文字上端を揃える */
  right: auto;
  left: auto;
  translate: none;
  width: auto;
  line-height: calc(50 / 60); /* 行送り 50 / font-size 57 */
  text-align: left;
}

#AU260805MCFC .lp-product__title--left {
  left: calc(-175 * var(--formula)); /* 画像左端より左へ */
}
#AU260805MCFC .lp-product--third .lp-product__title--left {
  left: calc(-170 * var(--formula)); /* 画像左端より左へ */
}

#AU260805MCFC .lp-product__title--right {
  right: calc(-171.5 * var(--formula)); /* 画像右端より右へ */
  text-align: right; /* デザインは画像の外側に向けて右揃え */
}
#AU260805MCFC .lp-product--second .lp-product__title--right {
  letter-spacing: .01em;
}

/* メイン画像（650幅・中央） */
#AU260805MCFC .lp-product__main {
  width: calc(650 * var(--formula));
  margin-inline: auto;
}

#AU260805MCFC .lp-product__main > a {
  display: block;
  position: relative;
}

/* サブ画像（550角・左右交互） */
#AU260805MCFC .lp-product__sub {
  width: calc(550 * var(--formula));
  margin-top: calc(68 * var(--formula));
}
#AU260805MCFC .lp-product--third .lp-product__sub {
  margin-top: calc(74 * var(--formula));
}
#AU260805MCFC .lp-product--force .lp-product__sub {
  margin-top: calc(70 * var(--formula));
}

#AU260805MCFC .lp-product__sub--left {
  margin-left: calc(50 * var(--formula));
}

#AU260805MCFC .lp-product__sub--right {
  margin-left: auto;
  margin-right: calc(50 * var(--formula));
}

/* 着用画像（450×650・左右交互） */
#AU260805MCFC .lp-product__style {
  width: calc(450 * var(--formula));
  margin-top: calc(81 * var(--formula));
}

#AU260805MCFC .lp-product__style > a {
  display: block;
  position: relative;
}

#AU260805MCFC .lp-product__style--left {
  margin-left: calc(80 * var(--formula));
}

#AU260805MCFC .lp-product__style--right {
  margin-left: auto;
  margin-right: calc(81 * var(--formula));
}

/* 商品4 のみデザインのサブ画像→着用画像の間隔が 86（他は 80〜81） */
#AU260805MCFC .lp-product:last-of-type .lp-product__style {
  margin-top: calc(86 * var(--formula));
}

/* 商品クレジット（商品名・価格） */
#AU260805MCFC .lp-credit {
  margin-top: calc(58 * var(--formula));
  font-family: var(--font-primary);
  font-size: calc(25 * var(--formula));
  font-weight: var(--fw-regular);
  line-height: 1;
  letter-spacing: 0.05em; /* デザインの字幅 490.9 に合わせた実測値 */
  text-align: center;
}

/* inline-block にしてワイプ（.js-fadeText）の範囲をテキスト幅に合わせる */
#AU260805MCFC .lp-credit a {
  display: inline-block;
  text-decoration: underline;
  text-decoration-thickness: calc(1.5 * var(--formula));
  text-underline-offset: calc(2 * var(--formula)); /* デザインはベースライン +4。フォント既定の下線位置に加算されるため差分のみ指定 */
}

/* 商品説明文 */
#AU260805MCFC .lp-product__desc {
  width: calc(600 * var(--formula));
  margin: calc(38 * var(--formula)) auto 0;
  font-size: calc(23 * var(--formula));
  line-height: calc(43 / 23);
  letter-spacing: 0.05em; /* デザインの折り返し位置・行数（5/4/6/5行）に合わせた実測値 */
  text-align: justify;
}
/* ▲ -----------商品セクション---------- ▲ */

/* ▼ -----------VIEW ALL（PCは画面全幅の中央）---------- ▼ */
#AU260805MCFC .lp-viewall {
  margin-top: calc(195 * var(--formula));
  padding-bottom: calc(200 * var(--formula));
  font-family: var(--font-primary);
  font-size: calc(33.37 * var(--formula));
  font-weight: var(--fw-regular);
  line-height: 1;
  letter-spacing: 0.0em; /* デザインの字幅 140.5 に合わせた実測値 */
  text-align: center;
}

/* inline-block にしてワイプ（.js-fadeText）の範囲をテキスト幅に合わせる */
#AU260805MCFC .lp-viewall a {
  display: inline-block;
  text-decoration: underline;
  text-decoration-thickness: calc(1 * var(--formula));
  text-underline-offset: calc(6.5 * var(--formula)); /* デザインはベースライン +9.5。フォント既定の下線位置に加算されるため差分のみ指定 */
}

@media (max-width: 767px) {
  #Foot {
    margin-top: calc(-110*(100vw / 750))
  }
}
@media (min-width: 768px) {
  #AU260805MCFC .lp-viewall {
    margin-top: calc(219 * var(--formula_pc));
    padding-bottom: calc(177 * var(--formula_pc));
    font-size: calc(18 * var(--formula_pc));
    letter-spacing: .037em;
  }

  #AU260805MCFC .lp-viewall a {
    text-decoration-thickness: calc(1 * var(--formula_pc));
    text-underline-offset: calc(5.4 * var(--formula_pc));
  }
}
/* ▲ -----------VIEW ALL---------- ▲ */