@charset "utf-8";
/* ============================================================
    Lookbook専用CSS（共通CSSの後に読み込むこと）
   ============================================================ */

/* ----- ユーティリティ：SP/PC表示切替（切替ポイント750px） ----- */
.sp-only {
  display: block; /* SP時（749px以下）：表示 */
}
.pc-only {
  display: none !important; /* SP時（749px以下）：非表示 */
}
@media screen and (min-width: 750px) {
  .sp-only {
    display: none !important; /* PC時：非表示 */
  }
  .pc-only {
    display: block !important; /* PC時：表示 */
  }
}

.intro {
  padding: 16% 0 14%;
  margin: 0 4%;
  border-bottom: solid 1px #bababa;
}
.intro-container {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12vw;
}
.intro-tit {
  width: 70%;
}
.intro-text {
  width: 90%;
}
.intro-text-en {
  width: 80%;
}
@media (min-width: 750px) {
  .intro {
    padding: 8% 0;
  }
  .intro-container {
    gap: 5.5vw;
  }
  .intro-tit {
    width: 30%;
  }
  .intro-text {
    width: 40%;
  }
  .intro-text-en {
    width: 35%;
  }
}

.line-up {
  border: none !important;
}
/* lookbook.css側で上書き */
.line-up.lookbook {
  margin: 0; /* 既存の margin: 0 4% を打ち消し */
}
.line-up.lookbook .category-wrap.btn,
.line-up.lookbook .category-wrap,       /* タイトルエリア */
.line-up.lookbook .product-wrap,
.line-up.lookbook .home-view ul.category-wrap {
  margin-left: 4%;
  margin-right: 4%;
}
.line-up.lookbook .category-wrap h3 {
  margin-left: 4%;
}
.line-up.lookbook .category-wrap h3 img {
  height: 28px;
}

.line-up .category-wrap.btn {
  justify-content: center;
}

.line-up .category-wrap ul.button li {
  width: calc((100% - 10.5vw) / 3);
}

/* ----- タブボタン：picture廃止(img2枚 off/on)対応 ----- */
.line-up .category-wrap ul.button li .on {
  display: none;
}
.line-up .category-wrap ul.button li.active .on {
  display: block;
}
.line-up .category-wrap ul.button li.active .off {
  display: none;
}

/* ----- Home：ルック画像 ----- */
.line-up .home-view .look-block + .look-block {
  margin-top: 16vw;
}
.line-up .home-view .look-img {
  margin-bottom: 8vw;
}
.line-up .home-view .look-img img {
  width: 100%;
}

/* ----- Home：商品カード（既存 .product-wrap のスタイルを .home-view 用に流用） ----- */
.line-up .home-view ul.category-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: start;
  padding: 0;
  column-gap: 3.5vw;
  row-gap: 7vw;
}
.line-up .home-view ul.category-wrap > li {
  width: calc((100% - 3.5vw) / 2); /* SP：2列 */
}
.line-up .home-view ul.category-wrap li .product-url {
  display: none;
}
.line-up .home-view ul.category-wrap > li a img {
  width: 100%;
}
.line-up .home-view ul.category-wrap li .text-wrap {
  margin-top: 2vw;
}
.line-up .home-view ul.category-wrap li .text-wrap .product-name {
  color: #000;
  font-size: 3.7vw;
  letter-spacing: 0.15vw;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.line-up .home-view ul.category-wrap li .text-wrap .product-price {
  color: #000;
  font-size: 3.7vw;
  letter-spacing: 0.15vw;
}
.line-up .home-view ul.category-wrap li .text-wrap .product-price span.tax {
  font-size: 2.3vw;
  margin-left: 1vw;
}
.line-up .home-view ul.category-wrap li .text-wrap .inner {
  display: flex;
  gap: 2.5vw;
  margin-top: 1vw;
}
.line-up .home-view ul.category-wrap li .text-wrap .inner ul.color-variation {
  display: flex;
  gap: 1.2vw;
}
.line-up .home-view ul.category-wrap li .text-wrap .inner ul.color-variation li {
  width: 3vw;
  height: 3vw;
  border-radius: 100%;
}
.line-up .home-view ul.category-wrap li .text-wrap .inner ul.gender {
  display: flex;
  gap: 1vw;
}
.line-up .home-view ul.category-wrap li .text-wrap .inner ul.gender li {
  color: #000;
  font-size: 2.1vw;
  padding: 0 1.5vw;
  border-radius: 2vw;
}
.line-up .home-view ul.category-wrap li .text-wrap .inner ul.gender li.women {
  background: #eed2dc;
}
.line-up .home-view ul.category-wrap li .text-wrap .inner ul.gender li.women:after {
  content: 'women';
}
.line-up .home-view ul.category-wrap li .text-wrap .inner ul.gender li.men {
  background: #cadce0;
}
.line-up .home-view ul.category-wrap li .text-wrap .inner ul.gender li.men:after {
  content: 'men';
}

@media (min-width: 750px) {
  .home-view {
    margin-top: 7%;
  }
  .line-up.lookbook .category-wrap h3 img {
    height: 48px;
  }
  /* ルック画像 */
  .line-up .home-view .look-block + .look-block {
    margin-top: 6%;
  }
  .line-up .home-view .look-img {
    margin-bottom: 4%;
  }
  .line-up.lookbook .category-wrap {
    margin: 0;
  }
  /* ルック商品ラップ */
  .line-up.lookbook .home-view ul.category-wrap {
    margin-left: 16%;
    margin-right: 16%;
    margin-top: 6%;
  }

  /* 商品カード */
  .line-up .home-view ul.category-wrap {
    column-gap: 30px;
    row-gap: 45px;
  }
  .line-up .home-view ul.category-wrap > li {
    width: calc((100% - 60px) / 3); /* PC：3列（gap 30px×2） */
    cursor: pointer;
    -webkit-transition: all 0.3s !important;
    transition: all 0.3s !important;
  }
  .line-up .home-view ul.category-wrap li .text-wrap {
    margin-top: 6%;
  }
  .line-up .home-view ul.category-wrap li .text-wrap .product-name,
  .line-up .home-view ul.category-wrap li .text-wrap .product-price {
    font-size: 17px;
    letter-spacing: 1.5px;
  }
  .line-up .home-view ul.category-wrap li .text-wrap .product-price span.tax {
    font-size: 13px;
    margin-left: 6px;
  }
  .line-up .home-view ul.category-wrap li .text-wrap .inner {
    gap: 20px;
    margin-top: 8px;
  }
  .line-up .home-view ul.category-wrap li .text-wrap .inner ul.color-variation,
  .line-up .home-view ul.category-wrap li .text-wrap .inner ul.gender {
    gap: 5px;
  }
  .line-up .home-view ul.category-wrap li .text-wrap .inner ul.color-variation li {
    width: 13px;
    height: 13px;
  }
  .line-up .home-view ul.category-wrap li .text-wrap .inner ul.gender li {
    font-size: 10px;
    padding: 0 5px;
    border-radius: 10px;
  }
}