/* =========================================================
   Suitcase Collection LP — デザインあり（SP-first 375 → PC 1440）
   scope: .sc-lp
   ========================================================= */
.sc-lp {
  --vw375: calc(100vw / 375);
  --ink: #1a1a1a;
  --muted: #767676;
  --line: #e3e3e3;
  --ph-bg: #eeedeb;
  --accent-blue: #98BEE5;   /* ブランド共通アクセント：Bright Blue */
  --accent-red: #FF6E5C;    /* ブランド共通アクセント：Horizon Red */
  font-family: "hiragino-kaku-gothic-pron", "Hiragino Kaku Gothic ProN", sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.8;
  font-size: calc(13 * var(--vw375));
  overflow-x: clip;
}
.sc-lp img { display: block; width: 100%; height: auto; }
.sc-lp a { color: inherit; }

.sc-en { font-family: "Alte Haas Grotesk", "alte-haas-grotesk", sans-serif; font-weight: 700; letter-spacing: .02em; }

/* ---- fade in ---- */
.js-fade { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; }
.js-fade.is-active { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-fade { opacity: 1; transform: none; transition: none; }
}

/* ---- MV ---- */
.sc-mv__image img { aspect-ratio: 4 / 5; object-fit: cover; }

/* ---- header block ---- */
.sc-head { text-align: center; padding: calc(28 * var(--vw375)) calc(20 * var(--vw375)) 0; }
.sc-head__title { margin: 0; font-size: calc(30 * var(--vw375)); line-height: 1.3; font-weight: 500; }
.sc-head__date { margin: calc(10 * var(--vw375)) 0 0; font-weight: 600; font-size: calc(12 * var(--vw375)); line-height: 2; }
.sc-head__lead { margin: calc(18 * var(--vw375)) 0 0; font-size: calc(12 * var(--vw375)); font-weight: 300; line-height: 2; letter-spacing: .05em; }

/* ---- section（FB: 帯・下線なし、見出しweight500・padding除去・margin残す） ---- */
.sc-section__title { margin: calc(80 * var(--vw375)) 0 calc(20 * var(--vw375)); text-align: center; font-size: calc(24 * var(--vw375)); font-weight:500; position: relative; }
.sc-section__title::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: calc(34 * var(--vw375)); height: calc(3 * var(--vw375)); background: var(--accent-red); }
.sc-section__sub { margin: 0 0 calc(16 * var(--vw375)); text-align: center; font-size: calc(15 * var(--vw375)); font-weight: 400; }
.sc-section__lead { max-width: calc(335 * var(--vw375)); margin: 0 auto calc(24 * var(--vw375)); text-align: center; font-size: calc(13 * var(--vw375)); line-height: 2; font-weight: 400; }
.sc-section__note { margin: calc(8 * var(--vw375)) auto 0; padding: 0 calc(20 * var(--vw375)); font-size: calc(10 * var(--vw375)); color: var(--muted); text-align: center; }

/* ---- placeholder (素材追って納品) ---- */
.sc-ph { position: relative; background: var(--ph-bg); display: grid; place-items: center; }
.sc-ph::after { content: attr(data-label); font-size: calc(11 * var(--vw375)); color: #9b9893; letter-spacing: .08em; text-align: center; white-space: pre-line; }

/* ---- LINEUP switcher（参考実装①：フェード切替・クレジット固定） ---- */
.sc-lineup__stage { position: relative; margin: 0 auto; width: calc(335 * var(--vw375)); }
.sc-switch { position: relative; aspect-ratio: 8000 / 4267; overflow: hidden; }
.sc-switch__frame { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.sc-switch__frame.is-active { opacity: 1; }
.sc-switch__frame img, .sc-switch__frame .sc-ph { width: 100%; height: 100%; object-fit: cover; }
.sc-switch__frame .sc-ph { display: grid; }
.sc-lineup__credits { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--vw375)); margin: calc(14 * var(--vw375)) auto 0; width: calc(335 * var(--vw375)); text-align: center; }
.sc-credit { font-size: calc(10.5 * var(--vw375)); line-height: 1.7; }
.sc-credit__name { margin: 0; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sc-credit__price { margin: calc(4 * var(--vw375)) 0 0; }

/* ---- SIZE GUIDE ---- */
.sc-size__block { margin-top: calc(56 * var(--vw375)); }
.sc-size__block:first-of-type { margin-top: 0; }
.sc-size__name { margin: 0; text-align: center; font-size: calc(18 * var(--vw375)); font-weight: 500; }
.sc-size__cap { margin: calc(2 * var(--vw375)) 0 calc(16 * var(--vw375)); text-align: center; font-size: calc(11 * var(--vw375)); font-weight: 600; }
.sc-size__pair { display: grid; grid-template-columns: 1fr 1fr; gap: calc(7 * var(--vw375)); width: calc(335 * var(--vw375)); margin: 0 auto; }
.sc-size__image img, .sc-size__image .sc-ph { aspect-ratio: 605 / 906; width: 100%; object-fit: cover; display: block; }

/* ---- FUNCTIONAL / zoom grid（Theory参考：右下＋ボタン→拡大・キャプション） ---- */
.sc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(4 * var(--vw375)); padding: 0 calc(4 * var(--vw375)); }
.sc-zoom { position: relative; }
.sc-zoom img, .sc-zoom .sc-ph { aspect-ratio: 5 / 7; width: 100%; object-fit: cover; display: block; }
.sc-zoom__btn { position: absolute; right: calc(8 * var(--vw375)); bottom: calc(8 * var(--vw375)); width: calc(28 * var(--vw375)); height: calc(28 * var(--vw375)); border: none; border-radius: 50%; background: rgba(255, 255, 255, .92); cursor: pointer; padding: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.sc-zoom__btn::before, .sc-zoom__btn::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--ink); transform: translate(-50%, -50%); }
.sc-zoom__btn::before { width: calc(12 * var(--vw375)); height: 1.5px; }
.sc-zoom__btn::after { width: 1.5px; height: calc(12 * var(--vw375)); }

/* ---- CARRY ON ---- */
.sc-carry__main { margin: 0 auto calc(28 * var(--vw375)); width: calc(335 * var(--vw375)); }
.sc-carry__main img { width: 100%; height: auto; display: block; }
.sc-carry__main .sc-ph { aspect-ratio: 621 / 933; width: 100%; }

/* FB反映：自動ループ＋矢印は位置が中途半端→矢印非表示・スワイプ（ピーク）に */
.sc-slider { position: relative; }
.sc-slider__viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: calc(4 * var(--vw375)); width: calc(335 * var(--vw375)); margin: 0 auto;}
.sc-slider__viewport::-webkit-scrollbar { display: none; }
.sc-slider__track { display: flex; }
.sc-slider__item { flex: 0 0 calc(100% / 1.5); padding: 0 calc(6 * var(--vw375)); box-sizing: border-box; scroll-snap-align: center; }
.sc-slider__nav { display: none; }
.sc-slider__item .sc-ph { aspect-ratio: 1 / 1; }
.sc-slider__item img { width: 100%; height: auto; display: block; }
.sc-slider__item a { display: block; text-decoration: none; color: inherit; }
.sc-slider__name { margin: calc(10 * var(--vw375)) 0 0; text-align: center; font-size: calc(11 * var(--vw375)); font-weight: 700; line-height: 1.6; }
.sc-slider__credit { margin: calc(2 * var(--vw375)) 0 0; text-align: center; font-size: calc(10 * var(--vw375)); color: var(--muted); }

/* 前後ボタン（travel_pr参考：外側配置・シンプルなアウトライン矢印） */
.sc-slider__nav {
  position: absolute; top: calc(50% - calc(20 * var(--vw375)));
  width: calc(28 * var(--vw375)); height: calc(28 * var(--vw375));
  border: none; background: transparent; cursor: pointer; padding: 0;
  transform: translateY(-50%); z-index: 2;
}
.sc-slider__nav::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: calc(14 * var(--vw375)); height: calc(14 * var(--vw375));
  border-top: 2px solid var(--ink); border-right: 2px solid var(--ink);
}
.sc-slider__nav--prev { left: calc(2 * var(--vw375)); }
.sc-slider__nav--prev::before { transform: rotate(-135deg); left: 4px; }
.sc-slider__nav--next { right: calc(2 * var(--vw375)); }
.sc-slider__nav--next::before { transform: rotate(45deg); right: 4px; }
.sc-slider__nav:disabled { opacity: .25; cursor: default; }
/* フォーカス：ブラウザ既定の四角い枠を消し、キーボード操作時のみ丸リング */
.sc-slider__nav { border-radius: 50%; }
.sc-slider__nav:focus { outline: none; }
.sc-slider__nav:focus-visible { outline: 2px solid var(--navy, #0f1f4d); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .sc-slider__track { transition: none; } }

/* ---- CTA ---- */
.sc-cta { padding: calc(44 * var(--vw375)) calc(20 * var(--vw375)) calc(56 * var(--vw375)); text-align: center; }
.sc-cta__button { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-width: calc(280 * var(--vw375)); min-height: calc(52 * var(--vw375)); padding: calc(12 * var(--vw375)) calc(28 * var(--vw375)); border-radius: 999px; background: #1a1a1a; color: #fff; text-decoration: none; font-weight: 700; font-size: calc(13 * var(--vw375)); }
.sc-cta__button::after { content: ""; width: .5em; height: .5em; border-top: 1.5px solid #fff; border-right: 1.5px solid #fff; transform: rotate(45deg); flex: none; }

/* ---- modal（theory.co.jp参考：スムーズなスケール＋フェード） ---- */
.sc-modal {
  position: fixed; inset: 0; z-index: 100000;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0);
  visibility: hidden; opacity: 0;
  transition: opacity .35s ease, background-color .35s ease, visibility 0s linear .35s;
}
.sc-modal.is-open {
  visibility: visible; opacity: 1;
  background: rgba(255, 255, 255, .96);
  transition: opacity .35s ease, background-color .35s ease, visibility 0s linear 0s;
}
.sc-modal__body {
  position: relative; width: min(90vw, 640px); max-height: 90vh; overflow: auto;
  transform: scale(.94); opacity: 0;
  transition: transform .5s cubic-bezier(.22,.61,.36,1), opacity .35s ease;
}
.sc-modal.is-open .sc-modal__body { transform: scale(1); opacity: 1; }
.sc-modal__img { width: 100%; }
.sc-modal__img[hidden] { display: none; }
.sc-modal__phbox { aspect-ratio: 4 / 5; width: 100%; }
.sc-modal__phbox[hidden] { display: none; }
.sc-modal__caption { margin: 1em 0 0; font-size: calc(11 * var(--vw375)); font-weight: 300; line-height: 2.05; letter-spacing: .05em; }
.sc-modal__close { position: absolute; z-index: 3; top: calc(14 * var(--vw375)); right: calc(14 * var(--vw375)); display: grid; place-items: center; width: calc(40 * var(--vw375)); height: calc(40 * var(--vw375)); border: 1px solid var(--ink); border-radius: 50%; background: #fff; font-size: calc(18 * var(--vw375)); line-height: 1; cursor: pointer; color: var(--ink); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .sc-modal, .sc-modal__body, .sc-modal__close { transition: none; }
}

/* =========================================================
   PC（min-width: 768px）— 1440 viewport基準
   ========================================================= */
@media (min-width: 768px) {
  /* PC: 1920 viewport / 1400 content。type・spacingは1400基準で頭打ち。
     コンテンツは中央寄せ・左右は余白（クリアスペース）。全幅はMVと自動スクロールのみ。 */
  .sc-lp {
    --vw375: min(calc(100vw / 1400), 1px);
    --content: min(1080px, calc(100vw - 160px)); /* 中央カラム（余白たっぷり） */
    font-size: clamp(11px, calc(15 * 100vw / 1400), 15px);
  }

  /* 全セクション共通の中央カラム。full-bleed要素だけ後で解除 */
  .sc-head,
  .sc-section > .sc-section__title,
  .sc-section > .sc-section__sub { max-width: var(--content); margin-left: auto; margin-right: auto; }

  .sc-mv__image img { aspect-ratio: 2 / 1; }

  .sc-head { padding-top: min(calc(48 * 100vw / 1400), 48px); }
  .sc-head__title { font-size: clamp(30px, calc(48 * 100vw / 1400), 48px); }
  .sc-head__date { font-size: clamp(11px, calc(14 * 100vw / 1400), 14px); }
  .sc-head__lead { font-size: clamp(13px, calc(16 * 100vw / 1400), 16px); }

  .sc-section { padding-top: min(calc(88 * 100vw / 1400), 88px); }
  .sc-section__title { font-size: clamp(24px, calc(30 * 100vw / 1400), 30px); }
  .sc-section__sub { font-size: clamp(15px, calc(18 * 100vw / 1400), 18px); }
  .sc-section__lead { max-width: min(760px, var(--content)); margin: 0 auto 44px; font-size: clamp(13px, calc(15 * 100vw / 1400), 15px); line-height: 2.1; }
  .sc-section__note { font-size: 11px; }

  /* LINEUP — 中央カラム内、切替画像は程よいサイズに */
  .sc-lineup__stage, .sc-lineup__credits { width: min(760px, var(--content)); }
  .sc-credit { font-size: clamp(10px, calc(13 * 100vw / 1400), 13px); }

  /* SIZE GUIDE — バナー化せず中央カラム幅で */
  .sc-size__block { margin-top: min(calc(80 * 100vw / 1400), 80px); }
  .sc-size__block:first-of-type { margin-top: 0; }
  .sc-size__name { font-size: clamp(18px, calc(22 * 100vw / 1400), 22px); }
  .sc-size__cap { font-size: clamp(10px, calc(13 * 100vw / 1400), 13px); }
  .sc-size__pair { width: min(760px, var(--content)); gap: 20px; }
  .sc-size__image { margin: 0; }

  /* FUNCTIONAL — 3列、中央カラム内 */
  .sc-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0; width: var(--content); margin: 0 auto; }
  .sc-zoom__btn { width: 36px; height: 36px; right: 12px; bottom: 12px; }

  .sc-carry__main { width: min(680px, var(--content)); margin-bottom: 40px; }

  /* FB反映スライダー（PCのみ）：矢印を復活、3列さっきり表示（SPはタッチピークのまま） */
  .sc-slider { width: min(1080px, calc(100vw - 160px)); margin: 0 auto; padding: 0 44px; }
  .sc-slider__viewport { width: 100%; }
  .sc-slider__item { flex-basis: calc(100% / 3); padding: 0 12px; }
  .sc-slider__name { font-size: clamp(10px, calc(13 * 100vw / 1400), 13px); margin-top: 14px; }
  .sc-slider__credit { font-size: clamp(9px, calc(12 * 100vw / 1400), 12px); margin-top: 4px; }
  .sc-slider__nav {
    display: block; width: 40px; height: 40px;
    top: 50%; transform: translateY(-50%);
  }
  .sc-slider__nav::before { width: 16px; height: 16px; border-width: 2px; }
  .sc-slider__nav--prev { left: -8px; }
  .sc-slider__nav--next { right: -8px; }

  /* セクション見出し→コンテンツの間に呼吸を */
  .sc-section__title { margin: 0 0  28px; }
  .sc-section__sub { margin-bottom: 32px; }
  .sc-carry .sc-section__title { margin-bottom: 12px; }

  .sc-cta { padding: 60px 20px 72px; }

  /* ボタンも流体スケール＋文字下限（中間PC幅での2行折り返し・巨大化防止） */
  .sc-cta__button {
    min-width: min(calc(360 * 100vw / 1400), 360px);
    min-height: min(calc(56 * 100vw / 1400), 56px);
    padding: min(calc(12 * 100vw / 1400), 12px) min(calc(28 * 100vw / 1400), 28px);
    font-size: clamp(12px, calc(15 * 100vw / 1400), 15px);
    white-space: nowrap;
  }
  .sc-modal__caption { font-size: 13px; }
  .sc-modal__close { width: 48px; height: 48px; top: 24px; right: 24px; font-size: 20px; }
}


/* ===== 最新Excel（260703）反映オーバーライド ===== */
/* ボタン：ダークネイビー #0f1f4d / 白文字（指示書カラー）
   ※ .sc-lp a { color: inherit } より強いセレクタで白文字を確定させる */
.sc-lp { --navy: #0f1f4d; }
.sc-lp a.sc-cta__button { background: var(--navy); box-shadow: none; color: #fff; }
.sc-cta__button::after { border-color: #fff; }
/* ホバー：サイト共通の opacity フェード（transition 0.3s / hover 0.6相当） */
.sc-lp a.sc-cta__button, .sc-float a, .sc-slider__nav { transition: opacity .3s ease; }
.sc-lp a.sc-cta__button:hover, .sc-float a:hover, .sc-slider__nav:hover { opacity: .6; }
/* CTA下の淡いアクセントは残しつつ主張は控えめ */
.sc-section__title::after { background: var(--accent-blue); }

/* SIZE GUIDE も拡大対象（sc-zoom を流用） */
.sc-size__image.sc-zoom { position: relative; }
.sc-size__image.sc-zoom img, .sc-size__image.sc-zoom .sc-ph { aspect-ratio: 605 / 906; }

/* モーダル：商品名（リンク付き）＋スペック */
.sc-modal__name { display: inline-block; margin: 1em 0 .2em; font-weight: 700; font-size: calc(13 * var(--vw375)); color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.sc-modal__spec { margin: .4em 0 0; font-size: calc(11.5 * var(--vw375)); line-height: 1.9; white-space: pre-line; color: var(--ink); }
@media (min-width:768px){ .sc-modal__name{ font-size:14px; } .sc-modal__spec{ font-size:12.5px; } }

/* 右下フローティング「アイテムをすべて見る」（実装③ floating相当） */
.sc-float { position: fixed; right: calc(16 * var(--vw375)); bottom: calc(16 * var(--vw375)); z-index: 90; }
.sc-float a { display: inline-flex; align-items: center; gap: .5em; padding: calc(12 * var(--vw375)) calc(20 * var(--vw375)); border-radius: 999px; background: var(--navy); color: #fff; font-weight: 700; font-size: calc(12 * var(--vw375)); text-decoration: none; box-shadow: 0 calc(3 * var(--vw375)) calc(14 * var(--vw375)) rgba(0,0,0,.28); }
.sc-float a::after { content: ""; width: .5em; height: .5em; border-top: 1.5px solid #fff; border-right: 1.5px solid #fff; transform: rotate(45deg); }
@media (min-width:768px){ .sc-float{ right:24px; bottom:24px; } .sc-float a{ padding:14px 24px; font-size:13px; } }

/* CTAが見えている間はフローティングを退避（同一導線の二重表示を回避） */
.sc-float { transition: opacity .3s ease, transform .3s ease; }
.sc-float.is-hidden { opacity: 0; transform: translateY(8px); pointer-events: none; }

.sc-modal__caption {
  white-space: pre-wrap;
}