@charset "UTF-8";
/* ========================================
   White Dress Feature Page - ページ固有スタイル
   依存: base.css, ec.css
======================================== */

/* ========================================
   CSS変数
======================================== */
:root {
  --color-text: #353535;
  --color-light: #f5f3f0;
  --color-white: #ffffff;
  --color-border: #d8d3cc;
  --font-en: 'EB Garamond', 'Cormorant Garamond', serif;
  --font-jp: 'Noto Sans JP', "メイリオ", "Meiryo", sans-serif;
}

/* ========================================
   基本リセット補完
======================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.lp_01 {
  background-color: var(--color-white);
  color: var(--color-text);
  font-family: var(--font-jp);
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: 2;
}

.lp_01 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp_01 a {
  color: var(--color-white);
  text-decoration: none;
}

.lp_01 a:hover {
  text-decoration: none;
  opacity: 0.8;
}

/* ========================================
   ヒーローセクション
======================================== */
.hero {
  position: relative;
  width: 100%;
  background-color: #ede9e3;
  overflow: hidden;
}

.hero__img-wrap {
  width: 100%;
  height: 100vh;
  max-height: 800px;
  position: relative;
}

.hero__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: brightness(1.02);
}

.hero__text-overlay {
  position: absolute;
  top: 0;
  right: 5%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
}

.hero__label {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--color-text);
  writing-mode: horizontal-tb;
  margin-bottom: 16px;
  opacity: 0.7;
  line-height: 1.6;
  text-align: right;
}

.hero__title-vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--font-en);
  font-size: clamp(52px, 8vw, 96px);
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--color-white);
  line-height: 1;
  mix-blend-mode: difference;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.05);
}

/* ========================================
   セクション共通
======================================== */
.sample_lp .section {
  padding: 60px 0;
}

.section--light {
  background-color: var(--color-light);
}

/* ========================================
   アイテム共通テキスト
======================================== */
.item-category {
  font-family: var(--font-en);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}

.item-category span {
  font-style: normal;
  font-weight: 400;
}

.item-pdtit{
  font-family:"Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--color-text);
  margin-bottom: 6px;
  line-height: 1.8;
}

.item-pdtext {
  font-family:"Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--color-text);
  margin-bottom: 20px;
  line-height: 1.8;
}

.item-name {
  font-family: var(--font-jp);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--color-text);
  margin-bottom: 6px;
  line-height: 1.8;
}

.item-price {
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: 0.05em;
  color: #888;
  /*margin-bottom: 32px;*/
  margin-bottom: 16px;
}

.item-price span {
  font-size: 11px;
}

/* ========================================
   CHECK ITEMボタン
======================================== */
.btn-check {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background-color: #2a2a2a;
  color: var(--color-white);
  padding: 12px 24px;
  width: fit-content;
  transition: background 0.3s ease;
}

.btn-check::after {
  content: '›';
  font-size: 16px;
  line-height: 1;
}

.btn-check:hover {
  background-color: #555;
  opacity: 1;
}

/* ========================================
   Lace×Sheer セクション
======================================== */
.lace-sheer {
  padding: 0;
  background-color: var(--color-white);
}

.lace-sheer__inner {
  display: grid;
  grid-template-columns: 55% 45%;
  min-height: 600px;
}

.lace-sheer__images {
  position: relative;
}

.lace-sheer__img-main {
  width: 100%;
  /*height: 540px; 初期設定*/
  height: inherit;
}

.lace-sheer__img-detail {
  width: 60%;
  height: 220px;
  position: absolute;
  bottom: -60px;
  right: -30px;
  border: 6px solid var(--color-white);
  z-index: 2;
}

.lace-sheer__content {
  padding: 60px 40px 60px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ========================================
   Sheer×Layered セクション
======================================== */
.sheer-layered {
  background-color: var(--color-light);
  padding: 80px 0;
  overflow: visible;
}

.sheer-layered__inner {
  display: grid;
  grid-template-columns: 40% 60%;
  align-items: start;
  gap: 0;
}

.sheer-layered__content {
  padding: 180px 40px 40px 8%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.item-category--vertical {
  writing-mode: vertical-rl;
  font-family: var(--font-en);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.3;
  margin-bottom: 30px;
  color: var(--color-text);
}

.sheer-layered__images {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 8px;
}

.sheer-layered__img-main {
  grid-column: 1;
  grid-row: 1 / 3;
  height: 520px;
}

.sheer-layered__img-sub1 {
  grid-column: 2;
  grid-row: 1;
  height: 255px;
}

.sheer-layered__img-sub2 {
  grid-column: 2;
  grid-row: 2;
  height: 255px;
}

.sheer-layered__item-info {
  padding: 10px 40px 40px 8%;
}

/* ========================================
   Lace×Puff Sleeve セクション
======================================== */
.lace-puff {
  background-color: var(--color-white);
  padding: 80px 0 60px;
}

.lace-puff__inner {
  display: grid;
  grid-template-columns: 45% 55%;
  align-items: start;
}

.lace-puff__content {
  padding: 60px 8%;
  display: flex;
  flex-direction: column;
}

.lace-puff__category {
  font-size: clamp(24px, 3.5vw, 40px);
  margin-bottom: 10px;
}

.lace-puff__category-sub {
  font-size: 0.85em;
}

.lace-puff__item-name {
  margin-top: 16px;
}

.lace-puff__btn {
  margin-top: 8px;
}

.lace-puff__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.lace-puff__img-main {
  grid-column: 1;
  /*height: 560px;*/
  height: 700px;
}

.lace-puff__img-sub {
  grid-column: 2;
  /*height: 560px;*/
  height: 700px;
}

/* ========================================
   フッターバナー
======================================== */
.footer-banner {
  background-color: #2a2a2a;
  padding: 40px 5%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.footer-banner__text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

/* ========================================
   サンプル画像プレースホルダー
======================================== */
.img-placeholder {
  background-color: #e8e4df;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.img-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #ede9e3 0%, #d8d3cc 50%, #c8c2ba 100%);
}

.img-placeholder--warm::before {
  background: linear-gradient(135deg, #f0ece6 0%, #e0d8cf 60%, #cdc5bb 100%);
}

.img-placeholder--cooler::before {
  background: linear-gradient(135deg, #eaeaea 0%, #d5d0ca 50%, #bfb9b2 100%);
}

.img-placeholder__label {
  position: relative;
  z-index: 1;
  font-family: var(--font-en);
  font-size: 11px;
  color: rgba(80, 70, 60, 0.5);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* ========================================
   レスポンシブ - タブレット (960px以下)
======================================== */
@media screen and (max-width: 960px) {
  /* Lace×Sheer */
  .lace-sheer__inner {
    grid-template-columns: 1fr;
  }

  .lace-sheer__img-main {
    height: 70vw;
  }

  .lace-sheer__img-detail {
    width: 45%;
    height: 35vw;
    bottom: -40px;
    right: 10px;
  }

  .lace-sheer__content {
    padding: 80px 5% 50px;
  }

  /* Sheer×Layered */
  .sheer-layered__inner {
    grid-template-columns: 1fr;
  }

  .sheer-layered__content {
    padding: 40px 5% 20px;
    writing-mode: horizontal-tb;
  }

  .item-category--vertical {
    writing-mode: horizontal-tb;
    margin-bottom: 16px;
  }

  .sheer-layered__item-info {
    padding: 10px 5% 20px;
  }

  .sheer-layered__images {
    gap: 4px;
  }

  .sheer-layered__img-main {
    height: 60vw;
  }

  .sheer-layered__img-sub1,
  .sheer-layered__img-sub2 {
    height: 30vw;
  }

  /* Lace×Puff Sleeve */
  .lace-puff__inner {
    grid-template-columns: 1fr;
  }

  .lace-puff__content {
    padding: 40px 5% 20px;
    order: 2;
  }

  .lace-puff__images {
    order: 1;
  }

  .lace-puff__img-main,
  .lace-puff__img-sub {
    height: 55vw;
  }
}

/* ========================================
   レスポンシブ - スマートフォン (767px以下)
======================================== */
@media screen and (max-width: 767px) {
  /* Hero */
  .hero__img-wrap {
    height: 85vw;
    max-height: none;
  }

  .hero__title-vertical {
    font-size: 11vw;
  }

  .hero__label {
    font-size: 9px;
  }

  /* Lace×Sheer */
  .lace-sheer__img-main {
    height: 100vw;
  }

  .lace-sheer__img-detail {
    width: 50%;
    height: 38vw;
    right: 0;
    bottom: -30px;
  }

  .lace-sheer__content {
    padding: 60px 5% 40px;
  }

  .item-category {
    font-size: 26px;
  }

  /* Sheer×Layered */
  .sheer-layered {
    padding: 50px 0 40px;
  }

  .sheer-layered__img-main {
    height: 100vw;
  }

  .sheer-layered__img-sub1,
  .sheer-layered__img-sub2 {
    height: 49vw;
  }

  /* Lace×Puff Sleeve */
  .lace-puff__img-main,
  .lace-puff__img-sub {
    height: 100vw;
  }

  /* Footer */
  .footer-banner {
    padding: 30px 5%;
  }
}