@charset "UTF-8";

/* =========================================================
   LE SOUK HOLIDAY 2026 Autumn and Winter LOOK BOOK
   slug: 260803_lslookbook
   - SP(767px以下): calc(● * (100vw / 375))
   - PC(768px以上): rem (1rem = 10px)
   - カスタムプロパティは .p-feature に適用
   ========================================================= */

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

/* =========================
   カスタムプロパティ
   ========================= */
.p-feature {
  --white: #ffffff;
  --black: #313131;
  --gray03: #575757;
  --gray: #aaaaaa;
  --gray02: #e3e3e3;
  --beige: #e4e1ca;
  --bg: #d7c1b4;
  /* フォントはサイト共通 variables.css のカスタムプロパティを使用
     (英: Quattrocento Sans / 和: ヒラギノ角ゴ) */
  --eng: "avenir-next-lt-pro", sans-serif;
  --jp: "avenir-next-lt-pro", sans-serif;
}

/* =========================
   ベース
   ========================= */
.main-area.p-feature {
  background: var(--bg);
  overflow-x: hidden;
  color: var(--black);
  font-family: var(--jp);
}

.p-feature :where(img, svg) {
  width: 100%;
  height: auto;
}

.p-feature img {
  display: block;
}

/* スクロール連動フェード (JS 有効時=.js-anim のみ初期非表示。JS 無効/失敗時は最初から表示) */
.js-anim .p-feature .fade-up {
  opacity: 0;
  transform: translateY(100px);
  transition-property: opacity, transform;
  transition-duration: 1s;
}
.js-anim .p-feature .fade-up.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   メインビジュアル (全幅・単一画像)
   ========================= */
.lb-mv {
  width: 100%;
}

/* =========================
   ギャラリー
   ========================= */
.lb-gallery {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.lb-row {
  display: flex;
  box-sizing: border-box;
}

.lb-item {
  box-sizing: border-box;
}

/* ルック画像 + クレジットのラッパ */
.lb-figure {
  position: relative;
  margin: 0;
  overflow: hidden;
}

/* クレジット開閉ボタン (右下・円形の「+」→ 開くと 45°回転で「×」)
   ※挙動は参照LP(lesoukholiday_26ss)に準拠: アイコンを45°回転・0.3s */
.lb-credit__toggle {
  position: absolute;
  right: 0;
  bottom: 0;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
  z-index: 13;
  display: block;
  -webkit-appearance: none;
  appearance: none;
}
.lb-credit__toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
}
/* 「+」アイコン (2 本線)。開くと全体を 45° 回転して「×」に */
.lb-credit__icon {
  position: absolute;
  inset: 0;
  margin: auto;
  display: block;
  pointer-events: none;
  transition: transform 0.3s ease;
}
.lb-credit__icon .bar {
  position: absolute;
  inset: 0;
  margin: auto;
  background: #414141;
}
.lb-credit__icon .bar--v { transform: rotate(90deg); }
.is-open .lb-credit__toggle .lb-credit__icon { transform: rotate(45deg); }

/* ベール + クレジット (参照LP準拠: opacity/visibility を 0.6s フェード) */
.lb-credit {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  background: rgba(0, 0, 0, 0.4);
  color: var(--white);
  font-family: var(--eng);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.6s ease;
}
.is-open .lb-credit {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.lb-credit__text {
  margin: 0;
  white-space: nowrap;
  line-height: 2.3;
  letter-spacing: 0.02em;
}
.lb-credit__text span {
  color: var(--white);
  font-weight: 400;
  text-decoration: none;
}
.lb-credit__text a {
  color: var(--white);
  text-decoration: none;
}
.lb-credit__jp,
.lb-credit__tax {
  font-family: var(--jp);
}

/* スクリプト(手書き風)画像セル */
.lb-script {
  display: flex;
  align-items: center;
}

/* =========================
   ブランド CTA (最下部)
   ========================= */
.lb-outro {
  width: 100%;
  box-sizing: border-box;
  /* text-align: center; */
}
.lb-outro__logo {
  font-family: var(--eng);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.3;
}
.lb-outro__figure {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}
.lb-outro__staff {
  font-family: var(--eng);
  color: var(--black);
  white-space: nowrap;
}
.lb-outro__staff-item {
  line-height: 2.1;
  letter-spacing: 0.02em;
}
.lb-shopnow {
  display: flex;
  /* display: inline-flex; */
  align-items: center;
  justify-content: center;
  background: var(--black);
  color: var(--white);
  font-family: var(--eng);
  font-weight: 400;
  letter-spacing: 0em;
  text-decoration: none;
  box-sizing: border-box;
  margin-right: auto;
  margin-left: auto;
}
.lb-shopnow:hover {
  opacity: 0.8;
}

/* =========================================================
   SP (767px 以下)  ● * (100vw / 375)
   ========================================================= */
@media only screen and (max-width: 767px) {
  .lb-gallery {
    padding: calc(50 * (100vw / 375)) 0 calc(50 * (100vw / 375));
  }
  .lb-row {
    flex-direction: column;
    align-items: center;
    margin-bottom: calc(50 * (100vw / 375));
  }
  .lb-row:last-child {
    margin-bottom: 0;
  }
  .lb-item {
    width: 100%;
    margin-bottom: calc(50 * (100vw / 375));
  }
  .lb-item:last-child {
    margin-bottom: 0;
  }
  /* SP で幅が絞られる (中央寄せ) 画像 */
  .lb-item[data-sp-w] {
    width: calc(var(--sp-w) * (100vw / 375));
  }

  .lb-credit__toggle {
    width: calc(24 * (100vw / 375));
    height: calc(24 * (100vw / 375));
    right: calc(10 * (100vw / 375));
    bottom: calc(10 * (100vw / 375));
  }
  .lb-credit__icon .bar--h { width: calc(11 * (100vw / 375)); height: 1px; }
  .lb-credit__icon .bar--v { width: calc(11 * (100vw / 375)); height: 1px; }
  .lb-credit {
    padding: 0 calc(12 * (100vw / 375)) calc(5 * (100vw / 375)) calc(15 * (100vw / 375));
    font-size: calc(12 * (100vw / 375));
  }

  .lb-script {
    justify-content: center;
    /* padding: calc(20 * (100vw / 375)) 0; */
  }
  .lb-script .lb-figure { width: 100%; }

  /* .lb-outro {
    padding: calc(30 * (100vw / 375)) calc(20 * (100vw / 375)) calc(60 * (100vw / 375));
  } */
  .lb-outro__logo {
    font-size: calc(26 * (100vw / 375));
    margin-bottom: calc(30 * (100vw / 375));
  }
  .lb-outro__figure {
    width: calc(295 * (100vw / 375));
    margin-bottom: calc(24 * (100vw / 375));
  }
  .lb-outro__staff {
    font-size: calc(12 * (100vw / 375));
    letter-spacing: 0.03em;
    margin-bottom: calc(78 * (100vw / 375));
    text-align: left;
    padding: 0 calc(17 * (100vw / 375));
  }
  .lb-shopnow {
    width: calc(266 * (100vw / 375));
    height: calc(50 * (100vw / 375));
    font-size: calc(14 * (100vw / 375));
    margin-bottom: calc(80 * (100vw / 375));
  }

  .grid-block{
    display: grid;
    grid-template-columns: calc(170 * (100vw / 375)) calc(100 * (100vw / 375)) auto;
    grid-template-rows: calc(85* (100vw /375)) calc(298* (100vw /375)) auto;
  }

  .grid-block .lb-item:first-of-type{
    position: relative;
    z-index: 99;
    width: calc(205 * (100vw / 375));
    grid-column: 2 / 4;
    grid-row: 1 / 3;
    margin-bottom: 0;
  }

  .grid-block .lb-item:nth-of-type(2){
    grid-column: 1 / 3;
    grid-row: 2 / 4;
  }

  .lb-row.flex-reverse{
    display: flex;
    flex-direction: column-reverse;
    margin-bottom: 0;
  }

  .lb-row.flex-column .lb-item:first-of-type{
    margin-bottom: 0;
  }

  .lb-row .adjust-img_20{
    margin-bottom: calc(20 * (100vw / 375));
  }

  .lb-row .adjust-img_21{
    margin-bottom: 0;
  }

  .lb-outro__figure_pc .lb-item{
    margin-bottom: calc(25 * (100vw / 375));
  }
}

/* =========================================================
   PC (768px 以上)  1rem = 10px
   ========================================================= */
@media only screen and (min-width: 768px) {
  .lb-gallery {
    max-width: 100rem; /* コンテンツ幅 1000px */
    padding: 5rem 0 2rem;
  }
  .lb-row {
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6rem;
    column-gap: 3.2rem;
  }
  .lb-row:last-child { margin-bottom: 0; }
  /* Row1 のみ DOM 昇順が 右→左 のため反転 */
  .lb-row--reverse { 
    flex-direction: row-reverse;
    justify-content: flex-end;
    column-gap: 7.5rem;
   }
  /* 中央寄せ単体行 */
  .lb-row--center { justify-content: center; }

  .lb-item {
    /* 個別に PC 幅を指定 (--pc-w %)。既定は 48.4% */
    width: var(--pc-w, 48.4%);
    /* 段違い配置のオフセット */
    margin-top: var(--pc-mt, 0);
  }

  .lb-credit__toggle {
    width: 2.4rem;
    height: 2.4rem;
    right: 1.5rem;
    bottom: 1.5rem;
  }
  .lb-credit__icon .bar--h { width: 1.1rem; height: 1px; }
  .lb-credit__icon .bar--v { width: 1.1rem; height: 1px; }
  .lb-credit {
    padding: 0 1.5rem 0.5rem;
    font-size: 1.2rem;
  }

  .lb-script { justify-content: flex-start; }

  .lb-outro {
    padding: 4rem 0 8rem;
  }
  .lb-outro__logo {
    font-size: 3.4rem;
    margin-bottom: 4rem;
  }

  .lb-outro__figure_pc{
    position: relative;
    /* display: flex;
    align-items: end;
    justify-content: end; */
    
    /* margin-right: 5.5rem; */
    width: 55rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10rem;
  }
  .lb-outro__figure_pc .lb-item{
    width: 55rem;
  }

  .lb-outro__figure {
    width: 55rem;
    margin-bottom: 3rem;
  }
  .lb-outro__staff {
    position: absolute;
    right: -37.3rem;
    bottom: 0;
    font-size: 1.2rem;letter-spacing: 0.03em;
    margin-bottom: 3.2rem;
    text-align: left;
  }
  .lb-shopnow {
    width: 34.5rem;
    height: 5rem;
    font-size: 1.6rem;
  }

  .lb-row.adjust-block_pc{
    column-gap: 7.5rem;
    justify-content: flex-start;
  }

  .lb-row.adjust-block_pc02{
    column-gap: 0;
  }

  .lb-row.reverse-block_pc{
    flex-direction: row-reverse;
  }

  .lb-row.adjust-block_pc03{
    justify-content: end;
    column-gap: 7.5rem;
  }

  .lb-row.adjust-block_pc04{
    column-gap: 1.6rem;
  }

  .lb-outro__staff{
    margin-bottom: 0;
  }
}