@charset "UTF-8";
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

html {
  visibility: hidden; }

html.wf-active {
  visibility: visible; }

body {
  color: #40210f;
  font-family: "A1MinchoStd Bold-83pv-RKSJ-H", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  line-height: 1;
  background: #fff;
  margin: 0;
  padding: 0; }

main {
  overflow-x: hidden; }

img {
  vertical-align: top;
  max-width: 100%;
  height: auto; }

a {
  text-decoration: none;
  color: inherit; }
  a:hover {
    text-decoration: none;
    opacity: .85; }

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0; }

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0; }

.u-mt-24 {
  margin-top: 24px !important; }

.u-mt-40 {
  margin-top: 40px !important; }

.u-mt-64 {
  margin-top: 64px !important; }

@media screen and (min-width: 768px) {
  .spOnly {
    display: none !important; } }

@media screen and (max-width: 767px) {
  .pcOnly {
    display: none !important; } }

.l-inner {
  width: 1040px;
  margin: 0 auto;
  position: relative; }
  @media screen and (max-width: 767px) {
    .l-inner {
      width: auto;
      margin: 0 16px; } }

.breadcrumb {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ W3", "メイリオ", Meiryo, Osaka, "sans-serif"; }
  .breadcrumb__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 12px 0; }
  .breadcrumb__item {
    font-size: 13px;
    color: #000;
    line-height: 1.6; }
    .breadcrumb__item:not(:first-child)::before {
      content: '>';
      margin-right: 8px;
      color: #000; }
  .breadcrumb__link {
    color: #000;
    text-decoration: underline; }
    .breadcrumb__link:hover {
      text-decoration: none; }



/* ==========================================================================
   ダブルジャケット特集 (p-double-jacket-*)
   ========================================================================== */

/* --- 共通変数 --- */
.p-double-jacket {
  --p-double-jacket-red: #b41e00;
  --p-double-jacket-black: #333333;
  --p-double-jacket-outer-bg: #fff; /* 外側余白の背景色（後から変更可） */
  --p-double-jacket-stripe-w: 30px; /* 斜線装飾の幅 */
  --p-double-jacket-font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --p-double-jacket-font-serif: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif;

  background: var(--p-double-jacket-outer-bg);
  color: var(--p-double-jacket-black);
  font-family: var(--p-double-jacket-font-sans);
  line-height: 1.6;

  @media screen and (max-width: 767px) {
    --p-double-jacket-stripe-w: 3vw;
  }

}

/* 中央コンテンツ領域 */
.p-double-jacket__inner {
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
}

/* 斜線装飾つきボディ（MV直下から最下部まで） */
.p-double-jacket__body {
  position: relative;
  padding-bottom: 60px;

  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--p-double-jacket-stripe-w);
    background: repeating-linear-gradient(
      135deg,
      #fff 0 4px,
      var(--p-double-jacket-red) 4px 6px
    );
    pointer-events: none;
  }

  &::before {
    left: 0;
  }

  &::after {
    right: 0;
  }
}

/* --- MV --- */
.p-double-jacket-mv__title {
  font-size: 0;
  line-height: 0;
}

.p-double-jacket-mv img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- イントロ --- */
.p-double-jacket-intro {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2%;
  padding: 100px 9.4% 50px 10%;

  @media screen and (max-width: 767px) {
    gap: 1%;
    padding: clamp(40px, 15vw, 64px) 4.5% 24px 5.5%;
  }
}

.p-double-jacket-intro__text {
  flex: 1 1 auto;
  min-width: 0;
}

.p-double-jacket-intro__title {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.08em;

  @media screen and (max-width: 767px) {
    font-size: clamp(16px, 4.6vw, 20px);
    letter-spacing: 0.04em;
  }
}

.p-double-jacket-intro__lead {
  margin-top: 24px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.04em;

  @media screen and (max-width: 767px) {
    margin-top: 12px;
    font-size: clamp(11px, 3vw, 13px);
    letter-spacing: 0;
  }
}

.p-double-jacket-intro__visual {
  flex: 0 0 48%;

  @media screen and (max-width: 767px) {
    flex-basis: 54%;
  }

  img {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* --- コーディネートラインナップ --- */
.p-double-jacket-lineup {
  padding: 50px 7.5% 100px;

  @media screen and (max-width: 767px) {
    padding: 24px 6% 0;
  }
}

.p-double-jacket-lineup__title {
  color: var(--p-double-jacket-red);
  font-family: var(--p-double-jacket-font-serif);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-align: center;

  @media screen and (max-width: 767px) {
    font-size: clamp(20px, 6vw, 26px);
  }
}

.p-double-jacket-lineup__list {
  display: flex;
  justify-content: space-between;
  gap: 3.5%;
  margin-top: 28px;

  @media screen and (max-width: 767px) {
    gap: 2%;
    margin-top: 16px;
  }
}

.p-double-jacket-lineup__item {
  flex: 1 1 0;
  min-width: 0;
}

.p-double-jacket-lineup__link {
  display: block;
  text-align: center;

  img {
    display: block;
    width: 100%;
    height: auto;
  }
}

.p-double-jacket-lineup__num {
  display: block;
  margin-bottom: 12px;
  color: var(--p-double-jacket-red);
  font-family: var(--p-double-jacket-font-serif);
  font-size: 32px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;

  @media screen and (max-width: 767px) {
    margin-bottom: 6px;
    font-size: clamp(16px, 5vw, 22px);
  }
}

/* --- LOOK（共通） --- */
.p-double-jacket-look {
  position: relative;
  padding: 0 10% 100px;

  @media screen and (max-width: 767px) {
    padding: 0 9.5% 40px;
  }
}

/* 見出しエリア（番号 + 見出し） */
.p-double-jacket-look__head {
  position: relative;
  min-height: 145px;
  padding-top: 8px;

  @media screen and (max-width: 767px) {
    min-height: 21vw;
    padding-top: 6vw;
  }
}

/* 番号（Look 01 など）: 写真の角に少し重ねる */
.p-double-jacket-look__num {
  position: absolute;
  z-index: 1;
  top: 28px;
  left: -1.2%;
  width: 130px;

  @media screen and (max-width: 767px) {
    top: 5vw;
    left: -2%;
    width: 17vw;
  }

  img {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* 見出し（ピンクの背景帯） */
.p-double-jacket-look__title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 445px;
  max-width: 100%;
  aspect-ratio: 445 / 108;
  margin-inline: auto;
  background: url("../images/svg/bg_title.svg") center / 100% 100% no-repeat;

  @media screen and (max-width: 767px) {
    width: 62%;
  }
}

.p-double-jacket-look__title-text {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-align: center;

  @media screen and (max-width: 767px) {
    font-size: clamp(12px, 3.6vw, 16px);
    letter-spacing: 0.04em;
  }
}

/* 本体: 左に大きい写真 / 右に小写真 + 商品情報 */
.p-double-jacket-look__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "main sub"
    "main info";
  grid-template-rows: auto 1fr;
  column-gap: 4%;
  align-items: start;
}

.p-double-jacket-look__main {
  grid-area: main;
}

.p-double-jacket-look__sub {
  grid-area: sub;
}

.p-double-jacket-look__main img,
.p-double-jacket-look__sub img {
  display: block;
  width: 100%;
  height: auto;
}

.p-double-jacket-look__info {
  grid-area: info;
  align-self: stretch; /* 商品名・価格行を写真下端に揃える */
  display: flex;
  flex-direction: column;
  margin-top: 40px;

  @media screen and (max-width: 767px) {
    margin-top: 3vw;
  }
}

.p-double-jacket-look__text {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.1em;

  @media screen and (max-width: 767px) {
    font-size: 11px; /* 可読性のため下限固定 */
    line-height: 1.7;
    letter-spacing: 0.02em;
  }
}

.p-double-jacket-look__name {
  margin-top: auto;
  padding-top: 28px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.05em;

  @media screen and (max-width: 767px) {
    padding-top: 12px;
    font-size: 11px;
    letter-spacing: 0;
  }
}

.p-double-jacket-look__buy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 12px;

  @media screen and (max-width: 767px) {
    gap: 6px 8px;
    margin-top: 6px;
  }
}

.p-double-jacket-look__price {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
}

.p-double-jacket-look__price-num {
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;

  @media screen and (max-width: 767px) {
    font-size: 20px;
  }
}

.p-double-jacket-look__price-unit {
  margin-left: 2px;
  font-size: 14px;
  font-weight: 500;

  @media screen and (max-width: 767px) {
    font-size: 10px;
  }
}

.p-double-jacket-look__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 36px;
  border-radius: 4px;
  background: var(--p-double-jacket-red);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;

  @media screen and (max-width: 767px) {
    width: 100%;
    max-width: 130px;
    height: 30px;
    font-size: 12px;
    letter-spacing: 0.04em;
  }
}

/* --- LOOK 左右反転（02 / 04 で使用） --- */
.p-double-jacket-look--reverse {
  & .p-double-jacket-look__body {
    grid-template-areas:
      "sub main"
      "info main";
  }

  & .p-double-jacket-look__num {
    left: auto;
    right: -1.2%;

    @media screen and (max-width: 767px) {
      right: -2%;
    }
  }
}

/* LOOK 02 / 03 / 04 の微調整（キャプチャ位置に合わせる） */
.p-double-jacket-look--02,
.p-double-jacket-look--03,
.p-double-jacket-look--04 {
  & .p-double-jacket-look__head {
    padding-top: 20px;

    @media screen and (max-width: 767px) {
      padding-top: 6vw;
    }
  }

  & .p-double-jacket-look__num {
    top: 40px;

    @media screen and (max-width: 767px) {
      top: 5vw;
    }
  }
}

/* --- SET UP ITEM --- */
.p-double-jacket-setup {
  margin-top: 48px;
  text-align: center;

  @media screen and (max-width: 767px) {
    margin-top: 8vw;
  }
}

.p-double-jacket-setup__title {
  color: var(--p-double-jacket-red);
  font-family: var(--p-double-jacket-font-serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;

  @media screen and (max-width: 767px) {
    font-size: 18px;
  }
}

.p-double-jacket-setup__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 60px;
  margin-top: 20px;

  @media screen and (max-width: 767px) {
    gap: 20px 4vw;
    margin-top: 3vw;
  }
}

/* 画像・ボタンは固定幅、テキストは幅を超えても中央に揃える */
.p-double-jacket-setup__item {
  --p-double-jacket-setup-w: 180px;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  @media screen and (max-width: 767px) {
    --p-double-jacket-setup-w: min(32vw, 140px);
  }
}

.p-double-jacket-setup__img {
  display: block;
  width: var(--p-double-jacket-setup-w);
}

.p-double-jacket-setup__img img {
  display: block;
  width: 100%;
  height: auto;
}

.p-double-jacket-setup__name {
  text-align: center;
  margin-top: 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;

  @media screen and (max-width: 767px) {
    margin-top: 8px;
    font-size: 12px;
  }
}

.p-double-jacket-setup__price {
  text-align: center;
  margin-top: 6px;
  white-space: nowrap;
}

.p-double-jacket-setup__price-num {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;

  @media screen and (max-width: 767px) {
    font-size: 20px;
  }
}

.p-double-jacket-setup__price-unit {
  margin-left: 2px;
  font-size: 13px;
  font-weight: 500;

  @media screen and (max-width: 767px) {
    font-size: 10px;
  }
}

.p-double-jacket-setup__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--p-double-jacket-setup-w);
  height: 34px;
  margin-top: 8px;
  border-radius: 4px;
  background: var(--p-double-jacket-red);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;

  @media screen and (max-width: 767px) {
    height: 30px;
    font-size: 12px;
  }
}

/* --- 商品一覧・トップへのリンク --- */
.p-double-jacket-links {
  padding: 0 10% 60px;

  @media screen and (max-width: 767px) {
    padding: 8vw 9.5% 12vw;
  }
}

.p-double-jacket-links__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;

  @media screen and (max-width: 767px) {
    gap: 16px;
  }
}

.p-double-jacket-links__item {
  width: 100%;
  max-width: 510px;
}

.p-double-jacket-links__top {
  display: flex;
  justify-content: center;
  margin-top: 52px;

  @media screen and (max-width: 767px) {
    margin-top: 32px;
  }
}

/* 共通ボタン: 白地のアウトライン */
.p-double-jacket-links__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 510px;
  min-height: 46px;
  padding: 8px 16px;
  border: 2px solid var(--p-double-jacket-black);
  border-radius: 8px;
  background: #fff;
  color: var(--p-double-jacket-black);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-align: center;

  @media screen and (max-width: 767px) {
    min-height: 44px;
    border-width: 1.5px;
    font-size: 14px;
    letter-spacing: 0;
  }
}

/* トップページへ: 赤の塗りつぶし・角丸ピル */
.p-double-jacket-links__btn--top {
  border-color: var(--p-double-jacket-red);
  border-radius: 999px;
  background: var(--p-double-jacket-red);
  color: #fff;
}

/* 赤ボタンの文字色: 外部CSSのaリンク色に負けないよう状態別に白を明示 */
.p-double-jacket-look__btn:link,
.p-double-jacket-look__btn:visited,
.p-double-jacket-look__btn:hover,
.p-double-jacket-look__btn:active,
.p-double-jacket-setup__btn:link,
.p-double-jacket-setup__btn:visited,
.p-double-jacket-setup__btn:hover,
.p-double-jacket-setup__btn:active,
.p-double-jacket-links__btn--top:link,
.p-double-jacket-links__btn--top:visited,
.p-double-jacket-links__btn--top:hover,
.p-double-jacket-links__btn--top:active {
  color: #fff;
}

/* --- スクロールでふわっと表示 ---
   js/main.js の .js-scroll-trigger が、画面内に入ると .is-active を付与する */
.p-double-jacket .js-scroll-trigger {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;

  &.is-active {
    opacity: 1;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- SP: 商品名・価格・ボタンを1カラム（全幅）に ---
   説明文は写真の横カラムに残し、商品名以降は写真の下に全幅で配置 */
@media screen and (max-width: 767px) {
  .p-double-jacket-look__body {
    grid-template-areas:
      "main sub"
      "main text"
      "name name"
      "buy buy";
    grid-template-rows: auto 1fr auto auto;
  }

  .p-double-jacket-look--reverse .p-double-jacket-look__body {
    grid-template-areas:
      "sub main"
      "text main"
      "name name"
      "buy buy";
  }

  /* info を解除して子要素を直接グリッドに配置 */
  .p-double-jacket-look__info {
    display: contents;
  }

  .p-double-jacket-look__text {
    grid-area: text;
    margin-top: 3vw;
  }

  .p-double-jacket-look__name {
    grid-area: name;
    margin-top: 5vw;
    padding-top: 0;
    font-size: 13px;
    line-height: 1.6;
  }

  .p-double-jacket-look__buy {
    grid-area: buy;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 12px;
    margin-top: 2vw;
  }

  .p-double-jacket-look__price-num {
    font-size: 26px;
  }

  .p-double-jacket-look__price-unit {
    font-size: 11px;
  }

  .p-double-jacket-look__btn {
    flex: 0 1 150px;
    width: auto;
    max-width: none;
    height: 36px;
    font-size: 13px;
  }
}