@charset "UTF-8";

/* =============================================================================
 * AUTUMN TRAVEL OUTFIT (260918_autumntravel) — 全ブランド共通LP
 *
 * 【SP特化型デザイン】
 *   デザインは SP（アートボード幅 375）のみで、PC は同じレイアウトを
 *   コンテンツ幅 480px で中央に置き、左右にロゴ／アンカーナビを追従配置する
 *   （Figma 仕様注釈:「PC、SPデザイン共通使用 コンテンツはば480pxでお願い致します」
 *     「PCの場合、アンカーリンクを右エリアに位置変更してください。
 *       左右のロゴとアンケーリンクは追従してください。」）。
 *
 * 【単位】中央コンテンツは 375 基準のデザイン値をそのまま使い、基準幅だけを
 *   ブレークポイントで切り替える（--lp-w）。
 *     SP  : --lp-w = 100vw  → calc(● * (100vw / 375))  … 規約どおり
 *     PC  : --lp-w = 48rem  → calc(● * (48rem / 375))  … rem 基準 (1rem = 10px)
 *   左右サイドエリアは PC 専用要素のため rem を直接使う。
 * ========================================================================== */

/* パンくず下の余白（規約） */
@media only screen and (min-width: 768px) {
  .breadcrumb__list {
    padding-bottom: 1.6rem;
  }
}

/* -----------------------------------------------------------------------------
 * トークン・基本設定
 * -------------------------------------------------------------------------- */
.p-feature {
  /* 中央コンテンツの基準幅（デザイン 375 に対する実寸） */
  --lp-w: 100vw;

  /* 色（Figma 変数） */
  --lp-black: #191d1f;
  --lp-brown: #80462b;
  --lp-beige: #e9d9bb;
  --lp-buy-bg: #050505;

  /* 追従要素の上端オフセット（サイト共通ヘッダー #Head は position: fixed）。
     --lp-header-h は script.js が #Head の実寸から設定する。 */
  --lp-sticky-top: calc(var(--lp-header-h, var(--headerHeight, 0px)) + 2rem);

  /* 欧文指定だが和文が混在する箇所用のスタック */
  --lp-font-en-jp: "Inter", "Noto Sans JP", sans-serif;
  --lp-font-script: "Allura", cursive;

  font-family: var(--noto-sans);
  color: var(--lp-black);
  background-color: #fff;
}

/* 規約：必須指定 */
.p-feature :where(img, svg) {
  width: 100%;
  height: auto;
}

/* color は指定しない。`.p-feature a` は「1クラス + 1要素」で
   `.section-item__product-button` 等の「1クラス」より詳細度が高くなり、
   ボタンの文字色 (#fff) を打ち消してしまうため
   （リンクの色の継承はサイト共通 destyle.css の `a { color: inherit }` が担う）。 */
.p-feature a {
  text-decoration: none;
}

/* -----------------------------------------------------------------------------
 * レイアウト
 * -------------------------------------------------------------------------- */
.project-layout__aside--logo {
  /* SP では MV 画像にロゴが焼き込まれているため非表示。
     左右サイドエリアは幅 480px + 左右 325px/300px が収まる 1200px 以上でのみ表示するため、
     767/768px 境界の .hidden-phone ではなくメディアクエリで制御する。 */
  display: none;
}

/* -----------------------------------------------------------------------------
 * メインビジュアル
 * -------------------------------------------------------------------------- */
.project-mainvisual img {
  display: block;
}

/* -----------------------------------------------------------------------------
 * リード文
 * -------------------------------------------------------------------------- */
.project-lead {
  margin-top: calc(60 * (var(--lp-w) / 375));
  text-align: center;
}

.project-lead__text {
  font-size: calc(13 * (var(--lp-w) / 375));
  line-height: 2;
  letter-spacing: 0.05em;
}

/* デザイン上は段落間に 1 行分（13px × line-height 2）の空きがある */
.project-lead__text + .project-lead__text {
  margin-top: calc(26 * (var(--lp-w) / 375));
}

/* -----------------------------------------------------------------------------
 * アイテム別アンカーナビ
 * -------------------------------------------------------------------------- */
.project-nav {
  margin-top: calc(60 * (var(--lp-w) / 375));
}

.project-nav__list {
  width: calc(345 * (var(--lp-w) / 375));
  margin: 0 auto;
}

.project-nav__item + .project-nav__item {
  margin-top: calc(10 * (var(--lp-w) / 375));
}

.project-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(60 * (var(--lp-w) / 375));
  padding: 0 calc(5 * (var(--lp-w) / 375));
  /* 1px のヘアラインはスケール対象外（拡大すると線が太って見えるため意図的に固定） */
  border: 1px solid var(--lp-black);
  border-radius: calc(73 * (var(--lp-w) / 375));
  background-color: #fff;
  font-family: var(--inter);
  font-size: calc(16 * (var(--lp-w) / 375));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.08em;
  transition: opacity 0.3s;
}

.project-nav__arrow {
  position: absolute;
  top: 50%;
  right: calc(19 * (var(--lp-w) / 375));
  width: calc(20 * (var(--lp-w) / 375));
  height: calc(20 * (var(--lp-w) / 375));
  transform: translateY(-50%);
}

/* -----------------------------------------------------------------------------
 * セクション（アイテム紹介）
 * -------------------------------------------------------------------------- */
.section-item {
  margin-top: calc(60 * (var(--lp-w) / 375));
  /* ハッシュ付きURLの直アクセス・戻る/進む・ポストバック復帰では JS の補正が走らないため、
     固定ヘッダー (#Head) に見出しが隠れないよう CSS 側でも飛び先の余白を確保する。
     --lp-header-h は script.js が #Head の実寸から設定する（未設定時はサイト共通の --headerHeight）。 */
  scroll-margin-top: var(--lp-sticky-top);
}

.section-item__heading {
  width: calc(345 * (var(--lp-w) / 375));
  margin: 0 auto;
  padding-bottom: calc(20 * (var(--lp-w) / 375));
  text-align: center;
}

.section-item__number,
.section-item__name,
.section-item__brand {
  font-family: var(--inter);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
}

.section-item__number {
  font-size: calc(20 * (var(--lp-w) / 375));
}

.section-item__name {
  margin-top: calc(7 * (var(--lp-w) / 375));
  color: var(--lp-brown);
  font-size: calc(36 * (var(--lp-w) / 375));
}

.section-item__brand {
  margin-top: calc(7 * (var(--lp-w) / 375));
  font-size: calc(12 * (var(--lp-w) / 375));
}

.section-item__catch {
  margin-top: calc(20 * (var(--lp-w) / 375));
  font-size: calc(13 * (var(--lp-w) / 375));
  line-height: 2;
  letter-spacing: 0.05em;
}

.section-item__figure {
  width: calc(345 * (var(--lp-w) / 375));
  height: calc(450 * (var(--lp-w) / 375));
  margin: 0 auto;
  overflow: hidden;
}

.section-item__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-item__product {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(345 * (var(--lp-w) / 375));
  margin: 0 auto;
  padding-top: calc(20 * (var(--lp-w) / 375));
}

.section-item__product-info {
  /* 長い連続 ASCII の商品名が flex アイテムを押し広げてページに横スクロールを出さないようにする */
  min-width: 0;
}

.section-item__product-brand {
  font-family: var(--inter);
  font-size: calc(12 * (var(--lp-w) / 375));
  line-height: 1;
  letter-spacing: 0.08em;
}

.section-item__product-name {
  margin-top: calc(8 * (var(--lp-w) / 375));
  font-size: calc(12 * (var(--lp-w) / 375));
  line-height: 1.5;
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
}

.section-item__product-button {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: calc(10 * (var(--lp-w) / 375));
  padding: calc(6 * (var(--lp-w) / 375)) calc(8 * (var(--lp-w) / 375));
  background-color: var(--lp-buy-bg);
  color: #fff;
  font-family: var(--inter);
  font-size: calc(13 * (var(--lp-w) / 375));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  transition: opacity 0.3s;
}

/* -----------------------------------------------------------------------------
 * セクション（コーデ紹介 TRAVEL OUTFIT IDEAS）
 * -------------------------------------------------------------------------- */
.section-outfit__heading {
  width: calc(345 * (var(--lp-w) / 375));
  margin: 0 auto;
  padding-top: calc(40 * (var(--lp-w) / 375));
  text-align: center;
}

.section-outfit__lead {
  color: var(--lp-brown);
  font-size: calc(13 * (var(--lp-w) / 375));
  line-height: 1;
  letter-spacing: 0.05em;
}

.section-outfit__title {
  margin-top: calc(15 * (var(--lp-w) / 375));
  font-family: var(--inter);
  font-size: calc(24 * (var(--lp-w) / 375));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
}

.section-outfit__sub {
  margin-top: calc(15 * (var(--lp-w) / 375));
  font-size: calc(13 * (var(--lp-w) / 375));
  line-height: 1;
  letter-spacing: 0.05em;
}

.section-outfit__tap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * (var(--lp-w) / 375));
  width: calc(345 * (var(--lp-w) / 375));
  height: calc(48 * (var(--lp-w) / 375));
  margin: calc(20 * (var(--lp-w) / 375)) auto 0;
  padding: 0 calc(5 * (var(--lp-w) / 375));
  border-radius: calc(73 * (var(--lp-w) / 375));
  background-color: var(--lp-black);
  color: #fff;
  font-size: calc(14 * (var(--lp-w) / 375));
  line-height: 1.25;
  letter-spacing: 0.08em;
}

/* 仕様注釈:「矢印が点滅するアニメーション」 */
.section-outfit__tap-arrow {
  flex-shrink: 0;
  width: calc(16 * (var(--lp-w) / 375));
  height: calc(16 * (var(--lp-w) / 375));
  animation: lp-blink 1.4s ease-in-out infinite;
}

@keyframes lp-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.15;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-outfit__tap-arrow {
    animation: none;
  }
}

.section-outfit__days {
  display: flex;
  width: calc(375 * (var(--lp-w) / 375));
  margin: calc(30 * (var(--lp-w) / 375)) auto 0;
}

.section-outfit__day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(125 * (var(--lp-w) / 375));
  padding-bottom: calc(10 * (var(--lp-w) / 375));
  font-family: var(--inter);
  font-size: calc(15 * (var(--lp-w) / 375));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
}

/* コーデ画像（透過PNGの切り抜き素材）
 *
 * デザインでは 3 点の切り抜きが左右にわずかに重なって配置されており、そのまま <a> を
 * 画像の矩形に合わせると重なり帯（実測で ink 同士が約 15px 重なる）で隣の DAY の
 * リンクを踏んでしまう。そこで
 *   ・当たり判定 (.section-outfit__coordinate-item) = DAY 列と同じ 3 等分（125px ずつ・重なりなし）
 *   ・描画位置   (.section-outfit__coordinate-frame) = デザインどおりの座標
 * に分離している。重なり順は DOM 順（DAY.1 → DAY.2 → DAY.3）で Figma のレイヤー順と一致。
 */
.section-outfit__coordinate {
  position: relative;
  width: calc(375 * (var(--lp-w) / 375));
  height: calc(300 * (var(--lp-w) / 375));
  margin: 0 auto;
}

/* 当たり判定：DAY 列に合わせた 3 等分 */
.section-outfit__coordinate-item {
  position: absolute;
  top: 0;
  display: block;
  width: calc(125 * (var(--lp-w) / 375));
  height: calc(300 * (var(--lp-w) / 375));
  transition: opacity 0.3s;
}

.section-outfit__coordinate-item--01-1,
.section-outfit__coordinate-item--02-1,
.section-outfit__coordinate-item--03-1,
.section-outfit__coordinate-item--04-1 {
  left: 0;
}

.section-outfit__coordinate-item--01-2,
.section-outfit__coordinate-item--02-2,
.section-outfit__coordinate-item--03-2,
.section-outfit__coordinate-item--04-2 {
  left: calc(125 * (var(--lp-w) / 375));
}

.section-outfit__coordinate-item--01-3,
.section-outfit__coordinate-item--02-3,
.section-outfit__coordinate-item--03-3,
.section-outfit__coordinate-item--04-3 {
  left: calc(250 * (var(--lp-w) / 375));
}

/* 描画位置：デザイン座標（当たり判定の 3 等分からのオフセットで指定） */
.section-outfit__coordinate-frame {
  position: absolute;
  top: 0;
  display: block;
}

.section-outfit__coordinate-frame img {
  width: 100%;
  height: 100%;
}

.section-outfit__coordinate-item--01-1 .section-outfit__coordinate-frame {
  left: calc(2.23 * (var(--lp-w) / 375));
  width: calc(120.55 * (var(--lp-w) / 375));
  height: calc(300 * (var(--lp-w) / 375));
}

.section-outfit__coordinate-item--01-2 .section-outfit__coordinate-frame {
  left: calc(-20.88 * (var(--lp-w) / 375));
  width: calc(118.77 * (var(--lp-w) / 375));
  height: calc(300 * (var(--lp-w) / 375));
}

.section-outfit__coordinate-item--01-3 .section-outfit__coordinate-frame {
  left: calc(-21.9 * (var(--lp-w) / 375));
  width: calc(146.79 * (var(--lp-w) / 375));
  height: calc(300 * (var(--lp-w) / 375));
}

.section-outfit__coordinate-item--02-1 .section-outfit__coordinate-frame {
  left: calc(16.14 * (var(--lp-w) / 375));
  width: calc(98.73 * (var(--lp-w) / 375));
  height: calc(300 * (var(--lp-w) / 375));
}

.section-outfit__coordinate-item--02-2 .section-outfit__coordinate-frame {
  left: calc(7.78 * (var(--lp-w) / 375));
  width: calc(100.48 * (var(--lp-w) / 375));
  height: calc(300 * (var(--lp-w) / 375));
}

.section-outfit__coordinate-item--02-3 .section-outfit__coordinate-frame {
  left: calc(-2.11 * (var(--lp-w) / 375));
  width: calc(112.25 * (var(--lp-w) / 375));
  height: calc(300 * (var(--lp-w) / 375));
}

.section-outfit__coordinate-item--03-1 .section-outfit__coordinate-frame {
  left: calc(8.55 * (var(--lp-w) / 375));
  width: calc(103.9 * (var(--lp-w) / 375));
  height: calc(300 * (var(--lp-w) / 375));
}

.section-outfit__coordinate-item--03-2 .section-outfit__coordinate-frame {
  left: calc(-9 * (var(--lp-w) / 375));
  width: calc(133 * (var(--lp-w) / 375));
  height: calc(301 * (var(--lp-w) / 375));
}

.section-outfit__coordinate-item--03-3 .section-outfit__coordinate-frame {
  left: calc(1.87 * (var(--lp-w) / 375));
  width: calc(109.05 * (var(--lp-w) / 375));
  height: calc(293.01 * (var(--lp-w) / 375));
}

.section-outfit__coordinate-item--04-1 .section-outfit__coordinate-frame {
  left: calc(4.41 * (var(--lp-w) / 375));
  width: calc(114.18 * (var(--lp-w) / 375));
  height: calc(300 * (var(--lp-w) / 375));
}

.section-outfit__coordinate-item--04-2 .section-outfit__coordinate-frame {
  left: calc(18.01 * (var(--lp-w) / 375));
  width: calc(86.99 * (var(--lp-w) / 375));
  height: calc(301 * (var(--lp-w) / 375));
}

.section-outfit__coordinate-item--04-3 .section-outfit__coordinate-frame {
  left: calc(3.29 * (var(--lp-w) / 375));
  width: calc(105.42 * (var(--lp-w) / 375));
  height: calc(300 * (var(--lp-w) / 375));
}

/* 03 DAY.2 のみデザイン上で上端がトリミングされている */
.section-outfit__coordinate-item--03-2 .section-outfit__coordinate-frame {
  overflow: hidden;
}

.section-outfit__coordinate-item--03-2 .section-outfit__coordinate-frame img {
  position: absolute;
  top: -8.31%;
  left: 2.57%;
  width: 95.92%;
  height: 106.08%;
}

.section-outfit__details {
  display: flex;
  align-items: flex-start;
  gap: calc(3 * (var(--lp-w) / 375));
  width: calc(375 * (var(--lp-w) / 375));
  margin: 0 auto;
}

.section-outfit__detail {
  flex: 1 1 0;
  min-width: 1px;
  padding: 0 calc(10 * (var(--lp-w) / 375));
}

.section-outfit__detail-title {
  padding-top: calc(10 * (var(--lp-w) / 375));
  color: var(--lp-brown);
  font-family: var(--lp-font-en-jp);
  font-size: calc(12 * (var(--lp-w) / 375));
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.section-outfit__detail-text {
  padding-top: calc(10 * (var(--lp-w) / 375));
  font-size: calc(12 * (var(--lp-w) / 375));
  line-height: 2;
  letter-spacing: 0.05em;
}

/* -----------------------------------------------------------------------------
 * トップページに戻る
 * -------------------------------------------------------------------------- */
.project-buttons {
  /* デザインどおりボタンの上下に 80px の余白を取る（下側はフッターとの間の余白） */
  padding: calc(80 * (var(--lp-w) / 375)) 0;
}

.project-buttons__return {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(345 * (var(--lp-w) / 375));
  height: calc(50 * (var(--lp-w) / 375));
  margin: 0 auto;
  background-color: var(--lp-black);
  color: #fff;
  font-size: calc(16 * (var(--lp-w) / 375));
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.08em;
  transition: opacity 0.3s;
}

/* -----------------------------------------------------------------------------
 * スクロール連動アニメーション（js-intersection が .is-active を付与）
 *
 * 初期状態を opacity: 0 にするのは **JS が確実に動く場合のみ**（html.js-anim）。
 * script.js が読めない・実行時に落ちる等で .is-active が付かないと
 * 見出し・リード文が消えてしまうため、既定は可視にしておく。
 * -------------------------------------------------------------------------- */
.js-anim .p-feature .fade-up {
  opacity: 0;
  transform: translateY(calc(20 * (var(--lp-w) / 375)));
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.js-anim .p-feature .fade-up.is-active {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-anim .p-feature .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =============================================================================
 * PC (768px 以上) — コンテンツ幅 480px 固定（1rem = 10px）
 * ========================================================================== */
@media only screen and (min-width: 768px) {
  .p-feature {
    /* コンテンツ幅 480px（1rem = 10px） */
    --lp-w: 48rem;
    background-color: var(--lp-beige);
  }

  .project-layout {
    width: var(--lp-w);
    margin: 0 auto;
    background-color: #fff;
  }

  .project-nav__link:hover,
  .project-buttons__return:hover,
  .section-item__product-button:hover,
  .section-outfit__coordinate-item:hover {
    opacity: var(--hover-opacity, 0.7);
  }
}

/* -----------------------------------------------------------------------------
 * サイト共通 common.css は 1200px 以下で html { font-size: calc(10 * (100vw / 1200)) }
 * と rem を可変にしている。そのままだと 768px 時にコンテンツ幅が 48rem = 307px まで
 * 縮んで本文が読めなくなるため、この範囲だけデザイン指定の 480px を固定値で維持する。
 * （1200px 超では 1rem = 10px に戻るので 48rem = 480px が成立する）
 * -------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 1200px) {
  .p-feature {
    --lp-w: 480px;
  }
}

/* =============================================================================
 * PC (1200px 以上) — 左右サイドエリア（ロゴ／アンカーナビ）を追従表示
 *   480px の中央コンテンツ + 左右サイド（ロゴ 325px / ナビ 300px）が
 *   収まる幅から 3 カラムに切り替える
 * ========================================================================== */
@media only screen and (min-width: 1200px) {
  .project-layout {
    display: grid;
    width: auto;
    max-width: 140rem;
    grid-template-columns: 1fr var(--lp-w) 1fr;
    grid-template-areas:
      "logo head nav"
      "logo main nav";
    background-color: transparent;
  }

  .project-layout__head {
    grid-area: head;
    background-color: #fff;
  }

  .project-layout__main {
    grid-area: main;
    background-color: #fff;
  }

  /* 左右サイド：ロゴ／アンカーナビを上下中央寄りで追従させる。
     ヘッダー下の可視領域いっぱいの高さを持たせ、中身を flex で上下中央に置く。 */
  .project-layout__aside--logo,
  .project-layout__nav {
    align-self: start;
    position: sticky;
    top: var(--lp-sticky-top);
    height: calc(100vh - var(--lp-sticky-top) - 2rem);
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 左サイド：ロゴ */
  .project-layout__aside--logo {
    grid-area: logo;
  }

  /* 右サイド：アンカーナビ（PC専用サイズ） */
  .project-layout__nav {
    grid-area: nav;
  }

  .project-nav__list {
    width: 30rem;
  }

  .project-nav__item + .project-nav__item {
    margin-top: 1rem;
  }

  .project-nav__link {
    height: 6rem;
    padding: 0 0.5rem;
    border-radius: 7.3rem;
    font-size: 1.6rem;
  }

  .project-nav__arrow {
    right: 1.9rem;
    width: 2rem;
    height: 2rem;
  }

  /* ロゴ本体 */
  .component-logo {
    width: 32.5rem;
    margin: 0 auto;
  }

  .component-logo__upper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .component-logo__title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32.333rem;
    /* 36px / line-height 1.25 の行ボックス。デザインでは下に -12px 詰めている */
    height: 4.5rem;
    margin-bottom: -1.2rem;
  }

  .component-logo__sub {
    color: var(--lp-brown);
    font-family: var(--lp-font-script);
    font-size: 1.6rem;
    line-height: 1.25;
    letter-spacing: 0.05em;
  }

  .component-logo__lower {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    padding: 0.5rem 0;
    background-color: var(--lp-black);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.05em;
  }
}