@charset "UTF-8";


@media screen and (max-width:767px) {
  :root {
    --lpSetSize: (100vw / 750);
    /*
    --lpHeaderHeight: 35.4062px;
    --lpHeadBannerHeight: 50px;
    */
  }
  
  .main-area{
    overflow: inherit;
  }
  
  .main-area .main-inner{
    width: 100%;
  }
  
}

.main-area{
  overflow-x: clip;
}

:root{
  --scrollbarSize: 0;
}

/* .bredlist.lp{
  display: none;
} */


@media screen and (min-width:768px) and (max-width:1400px) {
  :root {
    --lpSetSize: (100vw / 1400) * 0.56;
    /*
    --lpHeaderHeight: 98.031px;
    --lpHeadBannerHeight: 60px;
    */
  }
}

@media screen and (min-width:1401px){
  :root {
    --lpSetSize: 0.56px;
    /*
    --lpHeaderHeight: 98.031px;
    --lpHeadBannerHeight: 60px;
    */
  }
}




/*******************************
LB250812wear
*******************************/
#LB250812wear{
  --color-bg-beige: #efece6;
  --color-brown: #843513;
  --font-nimbus: "nimbus-sans-extended", sans-serif;
  --font-yu: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;

  --pc-width: 1400;
  --sp-width: 750;
  --pc-artboard-width: 700;
  --sp-artboard-width: 750;

  font-weight: 400;
  font-style: normal;
  display: block;
  width: 100%;
  box-sizing: border-box;

}

@media (min-width: 2100px) {
  #LB250812wear {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));
    --variable: 1px;
  }

  #LB250812wear .hidden-small {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 2100px) {
  #LB250812wear {
    --ratio: 1;
    --variable: calc(100vw / var(--sp-width));
  }
}

@media screen and (min-width: 768px) {
  #LB250812wear {
    --reference-value: .1rem;
    --dsesktop-rate: calc(100vw / 1400);
    --rate: calc(100cqi / 750);
  }

  #LB250812wear .hidden-large {
    display: none !important;
  }
}

#LB250812wear *{box-sizing: border-box;}

@media (hover: hover) {
  #LB250812wear a:hover{
    opacity: .6;
  }
}

@media (hover: none) {
  #LB250812wear a:hover{
    opacity: 1;
  }
}

/*******************************
img setting
*******************************/
#LB250812wear img,
#LB250812wear picture{
  display: block;
  width: 100%;
  height: auto;
}

.imgOuter{
  display: block;
  height: auto;
}

/* #LB250812wear .imgOuter > a{
  display: block;
  width: 100%;
  height: auto;
  pointer-events: auto;
} */


/*******************************
creditLinks
*******************************/
/* overCredit **********/
#LB250812wear .overCredit{
  display: flex;
  align-items: flex-start;
  justify-content: left;
  flex-wrap: wrap;
  gap: calc(16 * var(--lpSetSize)) calc(24 * var(--lpSetSize));
  padding-top: calc(31 * var(--lpSetSize));
  }

#LB250812wear .overCredit > a{
  display: inline;
  font-family: var(--font-nimbus);
  font-size: calc(22 * var(--lpSetSize));
  letter-spacing: 0.05em;
  line-height: 1;
  font-weight: 400;
  font-style: normal;
  color: #000;
  font-feature-settings: "palt";
}


/*******************************
lpWrap
*******************************/
#LB250812wear{}

#LB250812wear .lpWrap{
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: calc(200 * var(--lpSetSize));
}

#LB250812wear #mvBlock{
  display: block;
  width: 100%;
  position: relative;
}

  
#LB250812wear #mvBlock .mvInner{
  display: block;
  width: 100%;
}

#LB250812wear #mvBlock .text_upper{
  position: absolute;
  top: calc(43 * var(--lpSetSize));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}

#LB250812wear #mvBlock .text_upper .textInner{
  width: calc(280 * var(--lpSetSize));
}

#LB250812wear #mvBlock .text_bottom{
  position: absolute;
  bottom: calc(88 *  var(--lpSetSize));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}

#LB250812wear #mvBlock .text_bottom .textInner{
  width: calc(688.5967 *  var(--lpSetSize));
}


@media screen and (min-width:768px){
  #LB250812wear .lpWrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    padding: 0;
  }
  
  #LB250812wear #mvBlock{
    width: 50%;
    height: 100vh;
    z-index: 10;
    position: sticky;
    left: 0;
    top: 0;
  }

  /* #LB250812wear .mv-img{
    position: relative;
    width: 100% !important;
    height: 100vh !important;
    display: inline-block !important;
    z-index: 1;
  } */
  
  #LB250812wear #mvBlock .mvInner{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
  }
  
  #LB250812wear #mvBlock .mvInner:after{
    content: "";
    position: absolute;
    background-image: url(../img/svg/mv-ttl-pc.svg);
    z-index: 12;
    width: calc(617.8794 * (100vw /1400));
    height: calc(15.4242 * (100vw /1400));
    top:47.8%;
    left: 50%;
    transform: translate(-50%, 50%);
    pointer-events: none;
    background-repeat: no-repeat;
  }

  #LB250812wear #mvBlock .mvInner > a{
    display: block;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    position: sticky;
    left: 0;
    top: 0;
  }

  #LB250812wear #mvBlock .mvInner > a > picture{
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  #LB250812wear #mvBlock .mvInner > a > picture > img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }

  #LB250812wear #mvBlock .text_upper{
    position: absolute;
    top: calc(30 * (100vw /1400));
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
  }

  #LB250812wear #mvBlock .text_upper .textInner{
    width: calc(190 * (100vw /1400));
  }

  #LB250812wear #mvBlock .text_bottom{
    position: absolute;
    bottom: calc(24 * (100vw /1400));
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
  }

  #LB250812wear #mvBlock .text_bottom .textInner{
    width: calc(608.1445 * (100vw /1400));
  }

  #LB250812wear .lpMain{
    display: block;
    width: 50%;
    overflow-x: clip;
  }

  #LB250812wear .lpMain .lpMainInner{
    display: block;
    width: calc(750 * var(--lpSetSize));
    margin: 0 auto;
    position: relative;
  }
}

/*******************************
stickyArea
*******************************/
/* #LB250812wear .stickyArea{
  display: block;
  width: 100%;
  background: #FFFFFF;
  position: sticky;
  left: 0;
  top: 0;
  z-index: 1;
} */

/*******************************
firstLede
*******************************/
.sub_ttl{
  width: calc(698.3975 * var(--lpSetSize));
  margin: calc(105 * var(--lpSetSize)) auto calc(92 *var(--lpSetSize));
}

#LB250812wear .firstLede{
  display: block;
  width: 100%;
  margin: calc(66 *var(--lpSetSize)) 0 calc(95 * var(--lpSetSize));
}

#LB250812wear .firstLede > p{
  font-family: var(--font-yu);
  font-size: calc(26 * var(--lpSetSize));
  color: #000;
  font-style: normal;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.06em;
  text-align: center;
  font-feature-settings: normal;
}

@media screen and (min-width:768px){
  #LB250812wear .firstLede{
    padding-top: calc(106 * var(--lpSetSize));
  }
}

/*******************************
sec 共通
*******************************/
.item__wrapper{
  position: relative;
  z-index: 1;
  padding-top: calc(100 * var(--lpSetSize));
}

.item__wrapper::after{
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: calc(742 * var(--lpSetSize));
  background-color: var(--color-bg-beige);
  top: 0;
}

.sec-item01{
  width: calc(200 * var(--lpSetSize));
  margin: 0 auto calc(29 * var(--lpSetSize));
}

.sec-item_name{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: calc(62 * var(--lpSetSize));
  font-family: var(--font-nimbus);
  line-height: 1;
  color: var(--color-brown);
  letter-spacing: 0.05em;
}

.sec-item_name a:nth-of-type(1){
  font-size: calc(36 * var(--lpSetSize));
  text-align: center;
  margin-bottom: calc(25 * var(--lpSetSize));
  letter-spacing: 0.05em;
}

.sec-item_name a:nth-of-type(2){
  font-family: var(--font-nimbus);
  font-size: calc(22 * var(--lpSetSize));
  text-align: center;
  letter-spacing: 0.05em;
}


.img01{
  position: relative;
  z-index: 10;
}

.img01,
.img02{
  margin: 0 auto calc(100 * var(--lpSetSize));
}

.sec02 .sec-item01,
.sec05 .sec-item01{
  width: calc(240 * var(--lpSetSize));
}

.img01::after,
.img02::after{
  background-repeat: no-repeat;
  pointer-events: none;
  background-size: cover;
}


/*******************************
sec01
*******************************/
.sec01 .img01,
.sec01 .img02{
  width: calc(690 * var(--lpSetSize));
}


.sec01 .img02 .imgOuter{
  position: relative;
  z-index: 1;
}

.sec01 .img02 .imgOuter::after{
  content: "";
  position: absolute;
  z-index: 10;
  background-image: url(../img/SVG/autumn.svg);
  width: calc(24.4766 * var(--lpSetSize));
  height: calc(860.1836 * var(--lpSetSize));
  right: calc(22 * var(--lpSetSize));
  top: calc(30 * var(--lpSetSize));
  background-repeat: no-repeat;
  pointer-events: none;
}

#LB250812wear .sec01 .img01 .overCredit{
  width: calc(470 * var(--lpSetSize));
}

#LB250812wear .sec01 .img02 .overCredit{
  padding-top: calc(33 * var(--lpSetSize));
}

/*******************************
sec02
*******************************/

.sec02 .img01 .imgOuter{
  width: 100%;
  position: relative;
  z-index: 1;
}

.sec02 .img01 .imgOuter::after{
  content: "";
  position: absolute;
  z-index: 10;
  background-image: url(../img/SVG/summer.svg);
  width: calc(24.4766 * var(--lpSetSize));
  height: calc(939.2002 * var(--lpSetSize));
  left: calc(29 * var(--lpSetSize));
  top: calc(32 * var(--lpSetSize));
  background-repeat: no-repeat;
  pointer-events: none;
}

.sec02 .img02 {
  width: calc(650 * var(--lpSetSize));

}

.sec02 .img02 .imgOuter{
  position: relative;
}

.sec02 .img02 .imgOuter::after{
  content: "";
  position: absolute;
  z-index: 10;
  background-image: url(../img/SVG/autumn.svg);
  width: calc(24.4766 * var(--lpSetSize));
  height: calc(806.1836 * var(--lpSetSize));
  right: calc(22 * var(--lpSetSize));
  top: calc(30 * var(--lpSetSize));
  background-repeat: no-repeat;
  pointer-events: none;
}

#LB250812wear .sec02 .img01 .overCredit{
  width: calc(720 * var(--lpSetSize));
  padding-left: calc(30 * var(--lpSetSize));
}

#LB250812wear .sec02 .img01 .carouselPager{
  right: calc(30 * var(--lpSetSize))!important;
}

#LB250812wear .sec02 .img02 .overCredit{
  padding-top: calc(31 * var(--lpSetSize));
  width: calc(480 * var(--lpSetSize));
}


/*******************************
sec03
*******************************/
.sec03 .img01{
  width: calc(670 * var(--lpSetSize));
}

.sec03 .img02 .imgOuter{
  width: 100%;
  position: relative;
  z-index: 1;
}

.sec03 .img02 .imgOuter::after{
  content: "";
  position: absolute;
  z-index: 10;
  background-image: url(../img/SVG/autumn02.svg);
  width: calc(24.4775 * var(--lpSetSize));
  height: calc(940.1836 * var(--lpSetSize));
  left: calc(27 * var(--lpSetSize));
  top: calc(30 * var(--lpSetSize));
  background-repeat: no-repeat;
  pointer-events: none;
}

#LB250812wear .sec03 .img02 .overCredit{
  width: calc(700 * var(--lpSetSize));
  padding-left: calc(30 * var(--lpSetSize));
  padding-top: calc(32 * var(--lpSetSize));
}

.sec03 .img02 .carouselPager{
  right: calc(50 * var(--lpSetSize))!important;
}


/*******************************
sec04
*******************************/

.sec04 .sec-item_name{
  padding-bottom: calc(65 * var(--lpSetSize));
}

.sec04 .img01{
  width: calc(690 * var(--lpSetSize));
  margin-right: auto;
  margin-left: auto;
}


.sec04 .img01 .imgOuter:nth-of-type(1){
  margin-bottom: calc(30 * var(--lpSetSize));
}

#LB250812wear .sec04 .img02 .imgOuter:nth-of-type(1){
  width: calc(620 * var(--lpSetSize));
  margin: 0 0 calc(30 * var(--lpSetSize)) auto;
}

#LB250812wear .sec04 .img02 .imgOuter:nth-of-type(2){
  width: calc(720 * var(--lpSetSize));
  margin: 0 auto 0 0;
}

#LB250812wear .sec04 .img01 .overCredit{
  width: calc(500 * var(--lpSetSize));
}

#LB250812wear .sec04 .img02 .overCredit{
  padding-top: calc(32 * var(--lpSetSize));
  padding-left: calc(30 * var(--lpSetSize));
}

/*******************************
sec05
*******************************/
.sec05 .img01{
  width:100%;
}

.sec05 .img02 {
  width: calc(690 * var(--lpSetSize));
}

#LB250812wear .sec05 .img01 .overCredit{
  padding-top: calc(31 * var(--lpSetSize));
  padding-left: calc(30 * var(--lpSetSize));
  width: calc(600 * var(--lpSetSize));
}

#LB250812wear .sec05 .img02 .overCredit{
  width: calc(600 * var(--lpSetSize));
}

/*******************************
lpBottomArea
*******************************/
#LB250812wear .lpBottomArea{
  display: block;
  width: 100%;
  background-color: var(--color-bg-beige);
  padding: calc(100 * var(--lpSetSize)) 0 calc(200 * var(--lpSetSize));
}

.lastsec-img{
  width: calc(480 * var(--lpSetSize));
  margin: 0 auto calc(105 * var(--lpSetSize));
}

.btnAll{
  width: calc(403.0059 * var(--lpSetSize));
  margin: 0 auto calc(100 * var(--lpSetSize));
}

.staffList{
  display: flex;
  justify-content: center;
  flex-direction: column;
  row-gap: calc(17 * var(--lpSetSize));
}

.staffList li{
  font-family: var(--font-nimbus);
  font-weight: 400;
  color: #000;
  line-height: 1;
  font-size: calc(22 * var(--lpSetSize));
  text-align: center;
  letter-spacing: 0.05em;
}

/*******************************
item slide
*******************************/
.slide__image{
  width: calc(180 * var(--lpSetSize));
}

.slide-area{
  display: flex;
  gap: calc(20 * var(--lpSetSize));
}

.loop-slide{
  display: flex;
  justify-content: space-between;
  gap: calc(20 * var(--lpSetSize));
  animation: loop 20s infinite linear 0.5s both;
  will-change: transform;
}

@keyframes loop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/*******************************
js-slider
*******************************/
.carouselPager {
  position: absolute;
  bottom: calc(-44 *  var(--lpSetSize)) !important;
  right: 0!important;
  left: auto !important;
  display: flex;
  -moz-column-gap: calc(20 *  var(--lpSetSize));
  column-gap: calc(20 *  var(--lpSetSize));
  width: -webkit-fit-content !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  z-index: 10;
}
.carouselPager__dots,
.carouselPager .swiper-pagination-bullet {
  border: 1px solid var(--color-brown);
  position: relative;
  display: block;
  width: calc(14 *  var(--lpSetSize));
  height: calc(14 *  var(--lpSetSize));
  padding: 0;
  border-radius: 100vh;
  outline: none;
  background: none;
  opacity: 1;
}
.carouselPager__dots.is-active,
.carouselPager .swiper-pagination-bullet.is-active {
  background-color: var(--color-brown);
}
.carouselPager__dots-active,
.carouselPager .swiper-pagination-bullet-active {
  background-color: var(--color-brown);
}

.swiper, .sliderContainer{
  overflow: visible;
}


/*******************************
.js-fadeIn
*******************************/
.js-fadeIn {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 1s, visibility 1s;
  transition: opacity 1s, visibility 1s;
}

.js-fadeIn.visible {
  opacity: 1;
  visibility: visible;
}