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

/* LPコンテンツ */
/* ===============================================### 
初期設定
###=============================================== */
.lp_barbie{
  --font-ja: var(--yugothic);
  --font-en: var(--hkgrotesk);
  --color-black: #0E1A16;
  color: #0E1A16;
}

.lp_barbie img{
  width: 100%;
  height: auto;
}


/* ===============================================### 
アニメーション設定
###=============================================== */
/*** fade-in ***/
.lp_barbie .js-fade-in{
  opacity: 0;
  transition: 1s ease;
  transition-property: opacity;
}

.lp_barbie .js-fade-in.show{
  opacity: 1;
}

/*** fade-up ***/
.lp_barbie .js-fade-up{
  opacity: 0;
  transform: translateY(30px);
  transition: 1s ease;
  transition-property: opacity, transform;
}

.lp_barbie .js-fade-up.show{
  opacity: 1;
  transform: translateY(0);
}

/*** js-slide ***/
.lp_barbie .js-slide{
  clip-path: inset(0 100% 0 0);
  overflow: hidden;
  transition: clip-path 0.5s cubic-bezier(0.37, 0, 0.63, 1);
  transition-delay: 0.2s;
}

.lp_barbie .js-slide.show{
  clip-path: inset(0);
  opacity: 1;
}

.lp_barbie .js-slide a{
  transition: all 0.3s ease-in;
}

.lp_barbie .js-slide img{
  transform: scale(1.2);
  transition: 1.5s;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.lp_barbie .js-slide.show img{
  transform: none;
}



/* ===============================================### 
コンテンツ共通設定
###=============================================== */
.lp_barbie .grid-wrap{
  display: grid;
}

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

.lp_barbie .image-wrap{
  width: fit-content;
  position: relative;
}

.lp_barbie .image-wrap .copy-text{
  position: absolute;
  bottom: 0.9rem;
  right: 0.9rem;
  z-index: 1;
  pointer-events: none;
}

/************** text **************/
.lp_barbie .section-title{
  font-family: var(--font-en);
  font-size: 3.2rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.15em;
  text-align: center;
}

.lp_barbie .copy-text{
  font-family: var(--arial);
  font-weight: var(--font-weight-regular);
  font-size: 1.3rem;
  text-align: center;
  color: #000000;
}

.lp_barbie .copy-text.color-white{
  color: #fff;
}

.lp_barbie .copy-text.text-large{
  margin-top: 3rem;
  font-size: 1.5rem;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .lp_barbie .image-wrap .copy-text{
    bottom: calc(5 * (100vw / 375));
    right: calc(5 * (100vw / 375));
  }
  
  /************** text **************/
  .lp_barbie .section-title{
    font-size: calc(28 * (100vw / 375));
    letter-spacing: 0.15em;
  }
  
  .lp_barbie .copy-text{
    font-size: calc(10 * (100vw / 375));
  }
  
  .lp_barbie .copy-text.text-large{
    margin-top: calc(20 * (100vw / 375));
    font-size: calc(14 * (100vw / 375));
  }
}



/* ===============================================### 
MV
###=============================================== */
.lp_barbie .mv{
}

.lp_barbie .mv__inner{
}

.lp_barbie .mv__image{
  width: 100%;
}



/* ===============================================### 
lead-area
###=============================================== */
.lp_barbie .lead-area{
  margin-top: 6.3rem;
}

.lp_barbie .lead-area__inner{
}

/************** text **************/
.lp_barbie .lead-title{
  font-family: var(--font-en);
  font-size: 3.6rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.15em;
  text-align: center;
}

.lp_barbie .lead-text{
  font-family: var(--font-ja);
  font-size: 1.5rem;
  font-weight: var(--font-weight-regular);
  line-height: 2;
  letter-spacing: 0.07em;
  text-align: center;
}

.lp_barbie .lead-text.text01{
  margin-top: 2.7rem;
}

.lp_barbie .lead-text.text02{
  margin-top: 3rem;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .lp_barbie .lead-area{
    margin-top: calc(42 * (100vw / 375));
  }
  
  .lp_barbie .lead-area__inner{
  }
  
  /************** text **************/
  .lp_barbie .lead-title{
    font-size: calc(30 * (100vw / 375));
    letter-spacing: 0.15em;
  }
  
  .lp_barbie .lead-text{
    font-size: calc(14 * (100vw / 375));
    letter-spacing: 0.07em;
  }
  
  .lp_barbie .lead-text.text01{
    margin-top: calc(24 * (100vw / 375));
  }
  
  .lp_barbie .lead-text.text02{
    margin-top: calc(28 * (100vw / 375));
  }
}



/* ===============================================### 
item-area
###=============================================== */
.lp_barbie .item-area{
  margin-top: 8.4rem;
}

.lp_barbie .item-area__inner{
  width: 92rem;
  margin-inline: auto;
}

.lp_barbie .item-area .grid-wrap{
  grid-template-columns: repeat(2, 1fr);
  column-gap: 3.8rem;
  row-gap: 5.7rem;
  margin-top: 3.2rem;
}

.lp_barbie .item-area .grid-item{
}

.lp_barbie .item-area .item-image a{
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/************** text **************/
.lp_barbie .item-area .credit{
  margin-top: 1.5rem;
  font-family: var(--font-ja);
  font-size: 1.4rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
}

/************** image **************/
.lp_barbie .item-area .item-image{
  width: 44rem;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .lp_barbie .item-area{
    margin-top: calc(55 * (100vw / 375));
  }
  
  .lp_barbie .item-area__inner{
    width: calc(355 * (100vw / 375));
  }
  
  .lp_barbie .item-area .grid-wrap{
    column-gap: calc(11 * (100vw / 375));
    row-gap: calc(38 * (100vw / 375));
    margin-top: calc(22 * (100vw / 375));
  }
  
  .lp_barbie .item-area .grid-item{
  }
  
  /************** text **************/
  .lp_barbie .item-area .credit{
    margin-top: calc(9 * (100vw / 375));
    font-size: calc(13 * (100vw / 375));
  }
  
  /************** image **************/
  .lp_barbie .item-area .item-image{
    width: calc(172 * (100vw / 375));
  }
}



/* ===============================================### 
gallery
###=============================================== */
.lp_barbie .gallery-area{
  margin-top: 9rem;
}

.lp_barbie .gallery-area__inner{
  width: 60rem;
  margin-inline: auto;
}

.lp_barbie .gallery-area .gallery-item:not(:nth-of-type(1)){
  margin-top: 1.6rem;
}

.lp_barbie .gallery-area .gallery-item.item01{
  margin-top: 3.2rem;
}

.lp_barbie .gallery-area .flex-wrap{
  gap: 1.6rem;
}

/************** image **************/
.lp_barbie .gallery-area .gallery-image{
  width: 60rem;
}

.lp_barbie .gallery-area .gallery-image.image-small{
  width: 29.2rem;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .lp_barbie .gallery-area{
    margin-top: calc(63 * (100vw / 375));
  }
  
  .lp_barbie .gallery-area__inner{
    width: calc(355 * (100vw / 375));
    margin-inline: auto;
  }
  
  .lp_barbie .gallery-area .gallery-item:not(:nth-of-type(1)){
    margin-top: calc(10 * (100vw / 375));
  }
  
  .lp_barbie .gallery-area .gallery-item.item01{
    margin-top: calc(22 * (100vw / 375));
  }
  
  .lp_barbie .gallery-area .flex-wrap{
    gap: calc(11 * (100vw / 375));
  }
  
  /************** image **************/
  .lp_barbie .gallery-area .gallery-image{
    width: calc(355 * (100vw / 375));
  }
  
  .lp_barbie .gallery-area .gallery-image.image-small{
    width: calc(172 * (100vw / 375));
  }
}



/* ===============================================### 
top-button-area
###=============================================== */
.lp_barbie .top-button-area{
  margin-top: 5rem;
  margin-bottom: 8.4rem;
}

.lp_barbie .top-button{
  display: block;
  margin-inline: auto;
  width: 30rem;
  height: 5rem;
  padding: 1.7rem;
  font-family: var(--font-ja);
  font-size: 1.4rem;
  letter-spacing: 0.075em;
  text-align: center;
  color: #fff;
  background-color: #000;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .lp_barbie .top-button-area{
    margin-top: calc(50 * (100vw / 375));
    margin-bottom: calc(96 * (100vw / 375));
  }
  
  .lp_barbie .top-button{
    width: calc(266 * (100vw / 375));
    height: calc(50 * (100vw / 375));
    padding: calc(17 * (100vw / 375));
    font-size: calc(14 * (100vw / 375));
  }
}