/* パンくず 追加スタイル PC */
@media only screen and (min-width: 768px){
  .breadcrumb__list{
    padding-bottom: 1.6rem;
  }
}

/* LPコンテンツ */

/* ===============================================### 
初期設定
###=============================================== */
.lp_sheer{
  --font-ja: var(--hirakaku);
  --font-en: "Figtree", sans-serif;
  --fw-thin: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi-bold: 600;
  --fw-bold: 700;
  --color-black: #000000;
  --color-white: #ffffff;
  color: #000000;
  overflow: clip;
}

.lp_sheer img,
.lp_sheer svg{
  width: 100%;
  height: auto;
}

.main-area * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


/* ===============================================### 
アニメーション設定
###=============================================== */
/*** fade-up ***/
.lp_sheer .js-anime-trigger .js-fade-up {
  opacity: 0;
  will-change: opacity;
  transition: ease-in, opacity 1000ms, transform 1000ms;
  transform: translateY(100px);
}

.lp_sheer .js-anime-trigger.show .js-fade-up{
  opacity: 1;
  transform: translate(0, 0);
}

/*** slide-in ***/
.lp_sheer .js-anime-trigger .js-slide-in.ltr {
  opacity: 0;
  will-change: opacity;
  transition: ease-in, opacity 1000ms, transform 1000ms;
  transform: translateX(-100px);
}

.lp_sheer .js-anime-trigger .js-slide-in.rtl {
  opacity: 0;
  will-change: opacity;
  transition: ease-in, opacity 1000ms, transform 1000ms;
  transform: translateX(100px);
}

.lp_sheer .js-anime-trigger.show .js-slide-in.ltr,
.lp_sheer .js-anime-trigger.show .js-slide-in.rtl {
  opacity: 1;
  transform: translate(0, 0);
}

.lp_sheer .js-anime-trigger.show .js-slide-in.js-anime-delay{
  transition-delay: 0.5s;
}

/*** info_detail ***/
.lp_sheer .info_detail {
  display: none;
  /* margin-top: calc(8 * (100vw / 375));
  padding-right: calc(10 * (100vw / 375));
  border-right: 1px solid #000;
  text-align: right; */
}

.lp_sheer .info_detail.is-open {
  display: block;
}


/* ===============================================### 
コンテンツ共通設定
###=============================================== */
.lp_sheer .content__inner{
  width: 110rem;
  margin-inline: auto;
}

.lp_sheer .flex-wrap{
  display: flex;
}

.lp_sheer .grid-wrap{
  display: grid;
}

/************** text **************/
.lp_sheer .content .content__title{
  font-family: var(--font-ja);
  font-size: 1.4rem;
  font-weight: var(--fw-regular);
  line-height: 2;
  letter-spacing: 0.08em;
  text-align: center;
}

.lp_sheer .credit{
  font-family: var(--font-en);
  font-size: 1.4rem;
  font-weight: var(--fw-regular);
  line-height: 2.1428571429;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.lp_sheer .credit .flex-wrap{
  justify-content: end;
  align-items: center;
  gap: 1.9rem;
}

.lp_sheer .credit li:not(:first-child){
  margin-top: 0.5rem;
}

.lp_sheer .credit .credit__icon{
  display: block;
  width: 4.8rem;
  /* display: grid;
  place-content: center;
  padding: 3px 0 0;
  width: 4rem;
  height: 2rem;
  font-family: var(--font-en);
  text-align: center;
  letter-spacing: 0.05em;
  font-size: 1.2rem;
  font-weight: var(--fw-medium);
  color: var(--color-white);
  background-color: var(--color-black); */
}

/************** image **************/
.lp_sheer .content .content__title{
}

.lp_sheer .content .content__title span{
  display: block;
  width: fit-content;
  margin-inline: auto;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .content .content__inner{
    width: calc(375 * (100vw / 375));
  }

  /************** text **************/
  .lp_sheer .content .content__title{
    font-size: calc(14 * (100vw / 375));
  }

  .lp_sheer .credit{
    font-size: calc(13 * (100vw / 375));
  }

  .lp_sheer .credit .flex-wrap{
    gap: calc(19 * (100vw / 375));
  }

  .lp_sheer .credit .credit__icon{
    display: block;
    width: calc(45 * (100vw / 375));
  }

  .lp_sheer .credit .info_detail {
    margin-top: calc(5 * (100vw / 375));
    padding-right: calc(12 * (100vw / 375));
  }

  /************** image **************/
  .lp_sheer .content .content__title{
  }

  .lp_sheer .content .content__title span{
  }
}


/* ===============================================### 
MV
###=============================================== */
.lp_sheer .mv{
  padding-bottom: 9.6rem;
  border-bottom: solid 4px #E9E7DB;
}

.lp_sheer .mv__inner{
  width: fit-content;
  margin-inline: auto;
}

/************** function-icon-list **************/
.lp_sheer .function-icon-list{
  width: 59.9rem;
  margin: 4.1rem auto 0;
}

.lp_sheer .function-icon-list.flex-wrap{
}

/************** text **************/
.lp_sheer .mv__text{
  margin-top: 5rem;
  font-family: var(--font-ja);
  font-size: 1.4rem;
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-align: center;
}

/************** image **************/
.lp_sheer .mv__image{
  width: 140rem;
}

.lp_sheer .function-icon__image{
  width: 100%;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .lp_sheer .mv{
    padding-bottom: calc(46 * (100vw / 375));
  }

  .lp_sheer .mv__inner{
  }

  /************** function-icon-list **************/
  .lp_sheer .function-icon-list{
    width: calc(341 * (100vw / 375));
    margin: calc(25 * (100vw / 375)) auto 0;
  }

  .lp_sheer .function-icon-list.flex-wrap{
  }

  /************** text **************/
  .lp_sheer .mv__text{
    margin-top: calc(40 * (100vw / 375));
    font-size: calc(14 * (100vw / 375));
  }

  /************** image **************/
  .lp_sheer .mv__image{
    width: calc(375 * (100vw / 375));
  }
}

/* ===============================================### 
Season Switch - Item 01
###=============================================== */
.content {
  margin-top: 10.4rem;
}

/************** Header (Title) **************/
.content .item-header {
  text-align: center;
  margin-bottom: 5.5rem;
}
.content .item-header__subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #000000;
}
.content .item-header__title {
  font-family: 'Poppins', sans-serif;
  font-size: 2.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-top: 1rem;
}
.content .item-header__divider {
  width: 3.5rem;
  height: 1px;
  background-color: #000000;
  margin: 2rem auto;
  transform: rotate(-30deg);
}
.content .item-header__name {
  font-size: 2.4rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  margin-top: 2.1rem;
}

/************** Body Layout **************/
.content .item-body.flex-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 5rem;
}

/************** Left: Product **************/
.content .item-product {
  width: 45rem;
  /* max-width: 450px; */
}
.content .item-product__image img {
  width: 100%;
  height: auto;
  display: block;
}
.content .item-product__text {
  margin-top: 1.5rem;
  font-size: 1.4rem;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #000000;
}

/************** Right: Models (3分割) **************/
.content .item-models {
  width: 55rem;
  /* max-width: 550px; */
}
.content .item-models__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  margin-left: 0.4rem;
}

.content .model-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.content .model-col.now,
.content .model-col.autumn {
  width: 20rem;
}

/* Slickのチラつき防止 */
.content .model-col__image {
  width: 100%;
}
.content .model-col__image img {
  width: 100%;
  height: auto;
  display: block;
}

.content .model-col__label {
  font-family: 'Poppins', sans-serif;
  font-size: 2rem;
  font-weight: 600;
  margin-top: 1.5rem;
  text-align: center;
  letter-spacing: 0.1em;
}

.content .model-col.arrow {
  margin-top: 0.4rem;
  margin-left: -0.4rem;
}
.content .model-col.arrow img {
  width: 11.6rem;
  height: auto;
}

/* ===========### responsive (SP) ###=========== */
@media screen and (max-width: 767px) {
  .content {
    margin-top: calc(54 * (100vw / 375));
  }
  .content .content__inner {
    padding-inline: 0;
  }
  .content .item-header {
    margin-bottom: calc(20 * (100vw / 375));
  }
  .content.content-item01 .item-header {
    margin-bottom: calc(37 * (100vw / 375));
  }
  .content .item-header__subtitle {
    font-size: calc(13 * (100vw / 375));
  }
  .content .item-header__title {
    font-size: calc(23 * (100vw / 375));
    margin-top: calc(11 * (100vw / 375));
  }
  .content .item-header__divider {
    width: calc(35 * (100vw / 375));
    margin: calc(17 * (100vw / 375)) auto;
  }
  .content .item-header__name {
    font-size: calc(20 * (100vw / 375));
    margin-top: calc(17 * (100vw / 375));
    line-height: 1.6;
  }

  .content-item01 .item-header__name {
    margin-top: calc(20 * (100vw / 375));
    line-height: 1;
  }

  .content .item-body.flex-wrap {
    flex-direction: column;
    align-items: center;
    gap: calc(40 * (100vw / 375));
  }

  .content .item-product {
    width: calc(335 * (100vw / 375));
  }

  .content .item-product__image {
    width: calc(300 * (100vw / 375));
    margin: 0 auto;
  }

  .content .item-product__text {
    margin-top: calc(20 * (100vw / 375));
    font-size: calc(14 * (100vw / 375));
  }

  .content.content-item02 .item-product .item-product__text {
    margin-top: calc(15 * (100vw / 375));
  }
  .content.content-item03 .item-product .item-product__text {
    width: calc(334 * (100vw / 375));
    margin-top: calc(15 * (100vw / 375));
  }

  .content.content-item04 .item-product .item-product__text {
    width: calc(337 * (100vw / 375));
    margin-top: calc(15 * (100vw / 375));
  }

  .content .item-models {
    width: calc(350 * (100vw / 375));
  }
  
  /* SP時のマージン・横幅 個別調整（画面内に収める） */
  .content .item-models__inner {
    justify-content: space-between; /* 両端揃えにして間に矢印を配置 */
    gap: 0;
  }

  .content .model-col.now,
  .content .model-col.autumn {
    width: calc(145 * (100vw / 375)); /* SP画面内に収まるように画像サイズ調整 */
  }

  .content .model-col__label {
    font-size: calc(14 * (100vw / 375));
    margin-top: calc(10 * (100vw / 375));
  }
  
  /* SP時の矢印配置 */
  .content .model-col.arrow {
    width: calc(60 * (100vw / 375));
    margin-top: calc(2 * (100vw / 375));
    margin-left: calc(-1 * (100vw / 375));
  }
  .content .model-col.arrow img {
    width: 100%;
  }
}

/* ===============================================### 
   スタイリング解説エリア (Now / Autumn)
###=============================================== */
.content .styling-section {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 10.5rem;
  margin-top: 9.7rem;
  padding-bottom: 8rem;
}

/* 背景のグレー帯（疑似要素で画面幅いっぱいに敷く） */
.content .styling-section::before {
  content: "";
  position: absolute;
  top: 27.9%;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 65rem;
  background-color: #e9e7db; /* グレーベージュ色 */
  z-index: -1;
}

.content .styling-col {
  width: 40rem; /* PC画像の最大幅 */
}

/* --- 画像エリア --- */
.content .styling-col__image {
  position: relative;
  width: 100%;
}
.content .styling-col__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* 縦文字 (Now / Autumn) */
.content .styling-col__season-label {
  position: absolute;
  top: -1.9rem;
  right: 1rem;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: 'Poppins', sans-serif;
  font-size: 4rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #000000;
}

/* --- テキストエリア --- */
.content .styling-col__desc {
  margin-top: 2rem;
  padding-left: 0.2rem;
}
.content .styling-col__title {
  font-size: 1.8rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: #000000;
  margin-bottom: 1.8rem;
}
.content .styling-col__text {
  font-size: 1.4rem;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #000000;
  margin-bottom: 2.6rem;
}

/* --- アイテムリスト (BUY / INFO ボタン) --- */
.content .styling-items {
  width: 100%;
}
.content .styling-items__row .credit-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  width: 100%;
}
.content .styling-items__name {
  font-family: 'Poppins', 'Hiragino Kaku Gothic ProN', sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
}

/* ボタン共通 */
.content .styling-items__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5rem;
  height: 2.4rem;
  font-family: 'Poppins', sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-indent: 0.25em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: none;
  box-sizing: border-box;
}

/* BUYボタン（黒背景） */
.content .btn-buy {
  background-color: #000;
  color: #fff;
}

.content .credit__item {
  position: relative;
  width: 100%;
}

/* --- INFOボタン --- */
.content .btn-info {
  background-color: #000;
  color: #fff;
  border: 1px solid #000;
  transition: all 0.3s ease; /* ふわっと色が変わる */
}
/* 押下時 */
.content .btn-info.is-active {
  background-color: transparent;
  color: #000;
}

/* --- INFO プルダウン (絶対配置でレイアウト崩れを防ぐ) --- */
.content .styling-info-pulldown {
  /* position: absolute は使わず、通常の配置に戻す */
  position: static; 
  width: 100%;
  text-align: right;
  background-color: transparent;
  
  /* ▼ここからスライドダウンの仕掛け▼ */
  max-height: 0;       /* 高さを0にする */
  overflow: hidden;    /* はみ出たテキストを隠す */
  opacity: 0;          /* 透明にする */
  padding: 0 1.5rem;   /* 上下の余白を0に */
  margin-top: 0;
  margin-bottom: 0;
  
  /* 開閉時のアニメーション速度（0.4秒でスムーズに動く） */
  transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease, margin 0.4s ease, border-width 0.4s ease;
}

/* JSで is-open が付与されたら表示 */
.content .styling-info-pulldown.is-open {
  max-height: 20rem;
  opacity: 1;
  padding: 1rem 0 1rem 0;
}
.content .styling-info-pulldown p {
  font-family: 'Poppins', 'Hiragino Kaku Gothic ProN', sans-serif;
  font-size: 1.3rem;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: #000000;
}


/* ===========### responsive (SP) ###=========== */
@media screen and (max-width: 767px) {
  .content .styling-section {
    flex-direction: column; /* 縦並びに */
    align-items: center;
    gap: calc(48 * (100vw / 375));
    margin-top: calc(100 * (100vw / 375));
    padding-bottom: calc(30 * (100vw / 375));
  }

  .content.content-item01 .styling-section {
    padding-bottom: calc(28 * (100vw / 375));
  }

  .content.content-item03 .styling-section {
    padding-bottom: calc(28 * (100vw / 375));
  }

  /* SP: グレー背景を画像の下（テキストエリア）に敷く */
  .content .styling-section::before {
    top: -3.3%;
    bottom: 0;
    height: auto;
    min-height: 0;
  }

  .content.content-item02 .styling-section::before {
    top: -3.6%;
    bottom: 0;
    height: auto;
    min-height: 0;
  }

  .content.content-item03 .styling-section::before {
    top: -3.4%;
    bottom: 0;
    height: auto;
    min-height: 0;
  }

  .content.content-item04 .styling-section::before {
    top: -3.4%;
    bottom: 0;
    height: auto;
    min-height: 0;
  }

  .content .styling-col {
    width: 100%;
  }

  .content .styling-col__season-label {
    top: calc(-17 * (100vw / 375));
    right: calc(9 * (100vw / 375));
    font-size: calc(40 * (100vw / 375));
  }

  .content .styling-col__desc {
    width: calc(336 * (100vw / 375));
    margin: calc(18 * (100vw / 375)) auto 0;
  }
  .content .styling-col__title {
    font-size: calc(18 * (100vw / 375));
    margin-bottom: calc(20 * (100vw / 375));
  }
  .content .styling-col__text {
    font-size: calc(14 * (100vw / 375));
    margin-bottom: calc(25 * (100vw / 375));
  }

  .content .styling-items__row .credit-wrap {
    margin-bottom: calc(5 * (100vw / 375));
  }
  .content .styling-items__name {
    font-size: calc(13 * (100vw / 375));
  }
  
  .content .styling-items__btn {
    width: calc(50 * (100vw / 375));
    height: calc(24 * (100vw / 375));
    font-size: calc(13 * (100vw / 375));
  }

  .content .styling-info-pulldown {
    padding: 0 calc(10 * (100vw / 375));
  }
  
  /* SP時の開いた状態の余白調整 */
  .content .styling-info-pulldown.is-open {
    padding: calc(10 * (100vw / 375)) 0;
    margin-top: calc(5 * (100vw / 375));
    margin-bottom: calc(15 * (100vw / 375));
  }
  .content .styling-info-pulldown p {
    font-size: calc(12 * (100vw / 375));
  }
}

/* ===============================================### 
   PC画面：クレジットエリア内で動きを完結させる
###=============================================== */
@media screen and (min-width: 768px) {
  .content .styling-items {
    /* プルダウンが開いた時の高さをあらかじめ確保しておく */
    /* ※アイテムの数や余白に合わせて数値は適宜微調整してください */
    min-height: 20rem; 
  }
}

/* ===============================================### 
コンテンツ02
###=============================================== */
.content-item02{
  margin-top: 0.2rem;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .content-item02{
    margin-top: calc(54 * (100vw / 375));
  }
}

/* ===============================================### 
コンテンツ03
###=============================================== */
.content-item03{
  margin-top: 0.1rem;
}

.content-item03 .styling-section::before {
  top: 28.6%;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .content-item03{
    margin-top: calc(54 * (100vw / 375));
  }
}

/* ===============================================### 
コンテンツ04
###=============================================== */
.content-item04{
  margin-top: 2.5rem;
}

.content-item04 .styling-section::before {
  top: 28.5%;
}

.content.content-item04 .styling-col__desc:nth-of-type(2) {
  padding-left: 0;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .content-item04{
    margin-top: calc(52 * (100vw / 375));
  }
}


/* ===============================================### 
button-area
###=============================================== */
.lp_sheer .button-area{
  margin-top: 2rem;
  margin-bottom: 9.4rem;
}

.lp_sheer .link-button{
  display: block;
  width: 34.5rem;
  margin-inline: auto;
  padding: 1.2rem 8rem;
  font-family: var(--font-en);
  font-size: 1.6rem;
  font-weight: var(--fw-medium);
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
  border: 1px solid var(--color-black);
}

.lp_sheer .link-button.item{
  background-color: var(--color-black);
  color: var(--color-white);
}

.lp_sheer .link-button.top{
  margin-top: 1rem;
  background-color: var(--color-white);
  color: var(--color-black);
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .lp_sheer .button-area{
    margin-top: calc(50 * (100vw / 375));
    margin-bottom: calc(132 * (100vw / 375));
  }

  .lp_sheer .link-button{
    width: calc(335 * (100vw / 375));
    padding: calc(11 * (100vw / 375)) calc(80 * (100vw / 375));
    font-size: calc(16 * (100vw / 375));
  }

  .lp_sheer .link-button.item{
  }

  .lp_sheer .link-button.top{
    margin-top: calc(11 * (100vw / 375));
  }
}

@media screen and (max-width: 767px) {
  .lp_sheer .sp_only{
    display: block;
  }
}
@media screen and (min-width: 768px) {
  .lp_sheer .sp_only{
    display: none;
  }
}