@charset "UTF-8";

/* =========================================================
   N.O.R.C 2026 WINTER LOOKBOOK
   - SP: calc(● * (100vw / 375))  /  PC(768px以上): rem (1rem = 10px)
   - line-height 単位なし / letter-spacing em
   ========================================================= */

/* パンくず下の余白 (PC。LP はパンくずと MV の間に余白がないため) */
@media only screen and (min-width: 768px) {
  .breadcrumb__list {
    padding-bottom: 1.6rem;
  }
}

/* ===== カスタムプロパティ (:root 不可・.p-feature に適用) ===== */
.p-feature {
  --c-black: #000;
  --c-white: #ffffff;
  --c-staff: #3e3a39;
  --c-winter: #af9c79; /* 原稿指定の背景色 (SP リード文 / MV 読み込み中の下地) */
  --font-eng: var(--helvetica-neue), "Hiragino Kaku Gothic ProN", sans-serif;
  --font-body: "Helvetica Neue", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-jp: "Hiragino Kaku Gothic ProN", var(--hirakaku), sans-serif;
}

/* 必須: 画像・SVG の基本 */
.p-feature :where(img, svg) {
  width: 100%;
  height: auto;
}

.p-feature {
  color: var(--c-black);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
}
.p-feature img {
  display: block;
}

/* スクリーンリーダー用テキスト (SVG ロゴの代替テキスト) */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   アニメーション
   ========================================================= */
/* スクロール連動フェード (.js-intersection + fade-up) */
.fade-up {
  transition: opacity 1s ease, transform 1s ease;
  will-change: opacity, transform;
}
/* JS 有効時のみ初期状態を隠す (JS 不発時はそのまま表示 = no-JS フォールバック) */
.js .fade-up {
  opacity: 0;
  transform: translateY(4rem);
}
.fade-up.is-active {
  opacity: 1;
  transform: none;
}

/* MV テキストの 1 文字送り (JS が単語=.js-letter-word / 文字=.js-letter-char に分割) */
.js .js-letter {
  visibility: hidden;
}
.js .js-letter-word {
  visibility: visible;
}
.js-letter-word {
  display: inline-block;
  white-space: nowrap; /* 単語の途中で折り返さない (改行は単語間のスペースのみ) */
}
.js-letter-char {
  display: inline-block;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.js-letter.is-shown .js-letter-char {
  opacity: 1;
}

/* =========================================================
   MV
   ========================================================= */
.p-mv {
  position: relative;
  width: 100%;
  background-color: var(--c-winter);
  overflow: hidden;
}
.p-mv__image img {
  transition: opacity 2500ms ease-in;
}
/* JS 有効時のみ初期状態を隠す (JS 不発時はそのまま表示) */
.js .p-mv__image img {
  opacity: 0;
}
.p-mv.is-active .p-mv__image img {
  opacity: 1;
}
.p-mv__body {
  position: absolute;
  color: var(--c-white);
}
.p-mv__logo {
  display: block;
  color: var(--c-white);
}
.p-mv__logo-svg {
  display: block;
}
/* ロゴ: .is-shown 付与で N . O . R . C の 7 パスを 0.05s 刻みで順次フェードイン。
   初期状態で隠すのは JS 有効時のみ (.js ガード) — JS 不発時にロゴだけ白紙になるのを防ぐ */
.p-mv__logo-item {
  transition: opacity 0.3s ease;
}
.js .p-mv__logo-item {
  opacity: 0;
}
.p-mv__logo.is-shown .p-mv__logo-item {
  opacity: 1;
}
.p-mv__logo-item--01 { transition-delay: 0.05s; }
.p-mv__logo-item--02 { transition-delay: 0.10s; }
.p-mv__logo-item--03 { transition-delay: 0.15s; }
.p-mv__logo-item--04 { transition-delay: 0.20s; }
.p-mv__logo-item--05 { transition-delay: 0.25s; }
.p-mv__logo-item--06 { transition-delay: 0.30s; }
.p-mv__logo-item--07 { transition-delay: 0.35s; }

.p-mv__season {
  font-family: var(--font-eng);
  /* font-weight: var(--font-weight-medium, 500); */
  font-weight: var(--font-weight-regular, 400);
  letter-spacing: 0.02em;
}
.p-mv__lead,
.p-mv__lead-ttl,
.p-mv__lead-txt {
  font-family: var(--font-eng);
  font-weight: var(--font-weight-regular, 400);
  letter-spacing: 0.02em;
}

/* SP のみ表示するリード文 (MV 下の帯) */
.p-lead {
  background-color: var(--c-winter);
  color: var(--c-white);
}
.p-lead__ttl,
.p-lead__txt {
  font-family: var(--font-eng);
  font-weight: var(--font-weight-regular, 400);
  letter-spacing: 0.02em;
}

@media only screen and (min-width: 768px) {
  .p-mv {
    aspect-ratio: 1400 / 800;
  }
  .p-mv__image,
  .p-mv__image img {
    height: 100%;
  }
  .p-mv__image img {
    object-fit: cover;
  }
  /* Figma: Title フレーム left 905 / top 226 (アートボード 1400×800) */
  .p-mv__body {
    top: 28.25%;
    left: 64.643%;
    width: 28.3rem;
  }
  .p-mv__logo {
    width: 20rem;
  }
  .p-mv__season {
    margin-top: 2rem;
    font-size: 2.4rem;
    line-height: 1.8;
    white-space: nowrap;
  }

  .p-mv__season{
    font-weight: var(--font-weight-medium, 500);
  }
  .p-mv__lead {
    margin-top: 3rem;
  }
  .p-mv__lead-ttl,
  .p-mv__lead-txt {
    font-size: 2rem;
    line-height: 1.8;
    white-space: nowrap;
  }
  /* デザイン上の 1 行あきぶん (20px × 1.8 = 36px) */
  .p-mv__lead-txt.txt01 {
    margin-top: 3.6rem;
  }
}

@media only screen and (max-width: 767px) {
  .p-mv {
    aspect-ratio: 375 / 600;
  }
  .p-mv__image,
  .p-mv__image img {
    height: 100%;
  }
  .p-mv__image img {
    object-fit: cover;
  }
  /* Figma: Title フレーム left 20 / 下端から 20.9px。
     .p-mv__season は line-height 1.625 のため上下に 10px ずつハーフレディングが付く。
     その分を差し引いた値を margin-top / bottom に指定している。 */
  .p-mv__body {
    left: calc(20 * (100vw / 375));
    bottom: calc(11 * (100vw / 375));
    width: calc(160 * (100vw / 375));
  }
  .p-mv__logo {
    width: calc(160 * (100vw / 375));
  }
  .p-mv__season {
    margin-top: calc(10 * (100vw / 375));
    font-size: calc(32 * (100vw / 375));
    line-height: 1.625; /* 32px 文字 + 20px 行間 = 52px */
  }
  .p-lead {
    padding: calc(40 * (100vw / 375)) calc(20 * (100vw / 375));
  }
  .p-lead__ttl,
  .p-lead__txt {
    font-size: calc(14 * (100vw / 375));
    line-height: 1.8;
  }
  /* デザイン上の 1 行あきぶん (14px × 1.8 = 25.2px) */
  .p-lead__txt.txt01 {
    margin-top: calc(25.2 * (100vw / 375));
  }
}

/* =========================================================
   ルックブックグリッド (2 カラム・フル幅は --wide)
   ※ MV とこのグリッドはデザイン意図により画面端までのフルブリード
      (アートボード 1400px = 全幅。左右 padding・max-width は付けない)。
      コンテンツ幅 (1200px + padding) を適用するのは STAFF CREDIT 側のみ。
   ========================================================= */
.p-lookbook {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.p-look {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 700 / 1000;
}
.p-look img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-look--wide {
  grid-column: 1 / -1;
}
.p-look--hero {
  aspect-ratio: 1400 / 1800;
}
.p-look--band {
  aspect-ratio: 1400 / 896;
}
.p-look--tall {
  aspect-ratio: 1400 / 2016;
}
@media only screen and (max-width: 767px) {
  /* SP は 375×540 でトリミング表示 (支給画像は PC 用の 1 種のみ) */
  .p-look--hero {
    aspect-ratio: 375 / 540;
  }
}

/* ── クレジット (「+」で開閉するオーバーレイ) ── */
.p-look__credit {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.4);
  color: var(--c-white);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.p-look__credit.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.p-look__list {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 各行を右揃え (Figma 準拠) */
  width: fit-content;
  list-style: none;
  font-family: var(--font-eng);
}
.p-look__item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  white-space: nowrap;
}
.p-look__buy,
.p-look__info {
  display: inline-flex;
  align-items: center;
  color: var(--c-white);
  font-family: inherit;
  font-weight: var(--font-weight-regular, 400);
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.p-look__buy:hover,
.p-look__info:hover {
  opacity: 0.7;
}
.p-look__info {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.p-look__item-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.p-look__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor; /* ヘアライン幅は意図的に px 固定 (スケーリング対象外) */
  line-height: 1;
  letter-spacing: 0.05em;
}
.p-look__detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  width: fit-content;
  color: var(--c-white);
  border-right: 1px solid var(--c-white); /* ヘアライン幅は意図的に px 固定 */
  text-align: right;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* ── 「+」ボタン (開くと「−」になる) ── */
.p-look__plus {
  position: absolute;
  z-index: 3;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
/* タップ領域の確保。共通CSSは 768〜1400px で html の font-size を線形に縮めるため、
   768px 付近ではアイコン実寸が 12px 程度まで小さくなる。見た目は変えずに当たり判定だけ広げる */
.p-look__plus::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 44px);
  height: max(100%, 44px);
}
.p-look__plus span {
  /* + アイコンの線幅は意図的に px 固定 (ヘアライン・スケーリング対象外) */
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  margin-top: -0.5px;
  background-color: var(--c-white);
  transition: transform 0.3s ease;
}
.p-look__plus span:nth-child(2) {
  transform: rotate(90deg);
}
/* 開いた状態: 縦線を横に戻して 2 本を重ね、「−」にする */
.p-look__plus.is-active span:nth-child(2) {
  transform: rotate(0deg);
}

@media only screen and (min-width: 768px) {
  .p-look__list {
    left: 2rem;
    bottom: 2rem;
    gap: 1.5rem;
  }
  .p-look__buy,
  .p-look__info {
    font-size: 1.3rem;
    line-height: 1.8;
  }
  .p-look__item-wrap {
    gap: 1rem;
  }
  .p-look__tag {
    padding: 0.4rem 0.6rem;
    font-size: 1.3rem;
  }
  .p-look__buy .p-look__tag {
    min-width: 4.5rem; /* Figma: Button/Buy のみ幅 45px 固定 */
  }
  .p-look__detail {
    padding: 0 1rem;
    font-size: 1.2rem;
  }
  .c-accordion.is-open .p-look__detail {
    margin-top: 1rem;
  }
  .p-look__detail p + p {
    margin-top: 0.8rem;
  }
  .p-look__plus {
    right: 2rem;
    bottom: 2rem;
    width: 1.8rem;
    height: 1.8rem;
  }
}

@media only screen and (max-width: 767px) {
  /* SP はクレジットを左上基点にして下方向へ開く */
  .p-look__list {
    top: calc(15 * (100vw / 375));
    left: calc(15 * (100vw / 375));
    gap: calc(10 * (100vw / 375));
  }
  .p-look__buy,
  .p-look__info {
    font-size: calc(12 * (100vw / 375));
    line-height: 1.8;
  }
  .p-look__item-wrap {
    gap: calc(10 * (100vw / 375));
  }
  .p-look__tag {
    padding: calc(4 * (100vw / 375)) calc(6 * (100vw / 375));
    font-size: calc(12 * (100vw / 375));
  }
  .p-look__buy .p-look__tag {
    min-width: calc(45 * (100vw / 375)); /* Figma: Button/Buy のみ幅 45px 固定 */
  }
  .p-look__detail {
    padding: 0 calc(10 * (100vw / 375));
    font-size: calc(11 * (100vw / 375));
  }
  .c-accordion.is-open .p-look__detail {
    margin-top: calc(5 * (100vw / 375));
  }
  .p-look__detail p + p {
    margin-top: calc(8 * (100vw / 375));
  }
  .p-look__plus {
    right: calc(10 * (100vw / 375));
    bottom: calc(10 * (100vw / 375));
    width: calc(16 * (100vw / 375));
    height: calc(16 * (100vw / 375));
  }
}

/* =========================================================
   スタッフクレジット
   ========================================================= */
.p-staff {
  color: var(--c-staff);
}
.p-staff__heading,
.p-staff__txt {
  font-family: var(--font-eng);
  font-weight: var(--font-weight-regular, 400);
  letter-spacing: 0.02em;
}

@media only screen and (min-width: 768px) {
  .p-staff {
    display: flex;
    align-items: flex-start;
    gap: 10rem;
    max-width: 124rem; /* 実効コンテンツ幅 1160px (左右 padding 4rem を含む) */
    margin: 0 auto;
    padding: 10rem 4rem;
  }
  .p-staff__heading {
    font-size: 2.6rem;
    line-height: 1.8;
    white-space: nowrap;
  }
  .p-staff__txt {
    font-size: 1.6rem;
    line-height: 2;
    white-space: nowrap;
  }
}
@media only screen and (max-width: 767px) {
  .p-staff {
    display: flex;
    flex-direction: column;
    gap: calc(15 * (100vw / 375));
    padding: calc(40 * (100vw / 375)) calc(15 * (100vw / 375));
  }
  .p-staff__heading {
    font-size: calc(18 * (100vw / 375));
    line-height: 1.8;
  }
  .p-staff__txt {
    font-size: calc(14 * (100vw / 375));
    line-height: 2;
  }
}

/* =========================================================
   トップページに戻る
   ========================================================= */
.p-backtop {
  text-align: center;
}
.p-backtop__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-staff); /* ヘアライン幅は意図的に px 固定 */
  color: var(--c-staff);
  font-family: var(--font-jp);
  font-weight: var(--font-weight-semibold, 600);
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.p-backtop__btn:hover {
  opacity: 0.6;
}

@media only screen and (min-width: 768px) {
  .p-backtop {
    padding: 0 0 7.8rem;
  }
  .p-backtop__btn {
    width: 34.5rem;
    height: 5rem;
    font-size: 1.6rem;
    line-height: 1.5; /* デザイン値 24px / 16px */
  }
}
@media only screen and (max-width: 767px) {
  .p-backtop {
    padding: 0 0 calc(80 * (100vw / 375));
  }
  .p-backtop__btn {
    width: calc(266 * (100vw / 375));
    height: calc(50 * (100vw / 375));
    font-size: calc(14 * (100vw / 375));
    line-height: 1.714; /* デザイン値 24px / 14px */
  }
}

/* =========================================================
   モーション低減設定 (OS の「視差効果を減らす」等)
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  /* 演出用の初期非表示は解除して、最初から見える状態にする */
  .js .fade-up,
  .js .p-mv__image img,
  .js .p-mv__logo-item,
  .p-feature .js-letter-char {
    opacity: 1 !important;
    transform: none !important;
  }
  /* 開閉・フェードのアニメーションは即時に (状態そのものは維持する) */
  .p-feature .fade-up,
  .p-feature .js-letter-char,
  .p-feature .p-mv__logo-item,
  .p-feature .p-mv__image img,
  .p-feature .p-look__credit,
  .p-feature .p-look__detail,
  .p-feature .p-look__plus span,
  .p-feature .p-look__buy,
  .p-feature .p-look__info,
  .p-feature .p-backtop__btn {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}