@charset "UTF-8";

.main-area .main-inner{width: 100%; padding: 0; overflow: visible;}
.main-area{overflow: visible!important;}

body.no_scroll {
  overflow: hidden;
}
body.no_scroll .go-top{display: none!important;}

.header__nav {
  display: none;
}
.bredlist.lp {
  display: none;
}

#header {
  position: fixed;
  top: 0;
  background: transparent;
}

/*******************************
LB240809catalog
*******************************/
#LB240809catalog{
  display: block;
  width: 100%;
  padding: 0 0 calc(200 * (100vw / 750));
  box-sizing: border-box;
}

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


#LB240809catalog .lpWrap {
  display: block;
  margin: 0 auto;
  padding-top: calc(100.5* (100vw /375));
}


/*******************************
lpStickyBlock
*******************************/
#LB240809catalog .lpStickyBlock{
  display: block;
  width: 100%;
}

#LB240809catalog .lpStickyBlock .mainTTLBlock{
  display: block;
  width: 100%;
  margin: 0 auto;
  /* position: sticky; */
  /* top: 0; */
  z-index: 1;
}
#LB240809catalog .lpStickyBlock .mainTTLBlock a {
  display: block;
  position: relative;
}
#LB240809catalog .lpStickyBlock .mainTTLBlock a video {
  width: calc(750* (100vw /750));
  object-fit: cover;
}
#LB240809catalog .lpStickyBlock .mainTTLBlock a .lp_main_ttl {
  width: calc(526* (100vw /600));
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#LB240809catalog .lpStickyBlock .mainTTLBlock .outer,
#LB240809catalog .lpStickyBlock .mainTTLBlock a.outer,
#LB240809catalog .lpStickyBlock .mainTTLBlock picture,
#LB240809catalog .lpStickyBlock .mainTTLBlock img{display: block; width: 100%; height: auto;}



#LB240809catalog .lpStickyBlock #lpCatalogBlock{
  display: block;
  width: 100%;
  /* position: sticky; */
  top: 0;
  z-index: 2;
}

/*viewText ***/
#lpCatalogBlock #viewText{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  height: 100dvh;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: calc(80 * (100vw / 750)) calc(38 * (100vw / 750)) calc(80 * (100vw / 750));
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}

#lpCatalogBlock #viewText.fixed{
  opacity: 1;
}

#lpCatalogBlock #viewText.fixed.bottom{
  position: absolute;
  height: auto;
}

#lpCatalogBlock #viewText .numCredit{
  display: block;
  pointer-events: auto;
}

#lpCatalogBlock #viewCredit{
  display: block;
  transition: opacity .3s ease;
}
#lpCatalogBlock #viewCredit.hide{opacity: 0;}


#lpCatalogBlock #viewText .viewNum{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  font-family: "Times New Roman";
  font-style: italic;
  font-size: calc(23 * (100vw / 750));
  color: #FFFFFF;
  text-align: left;
}

#lpCatalogBlock #viewText .viewNum .text{display: none;}




#lpCatalogBlock #viewCredit .creditLinks{
  display: none;
}


#lpCatalogBlock #viewText .pcViewNav{
  display: block;
  font-family: "Times New Roman";
  font-style: italic;
  font-size: calc(23 * (100vw / 750));
  text-align: right;
  pointer-events: auto;
  color: #FFFFFF;
}

#lpCatalogBlock #viewText .pcViewNav::after{
  content: 'Playful Heritage';
}

#lpCatalogBlock #viewText .pcViewNav > p{
  display: none;
}


/*expansionList ***/
#LB240809catalog .lpStickyBlock ul#expansionList{
  display: block;
  /* padding: calc(19 * (100vw / 750)); */
  background: #FFFFFF;
  position: relative;
  z-index: 1;
}

#LB240809catalog .lpStickyBlock ul#expansionList > li{
  display: block;
  width: 100%;
  margin: 0 auto;
}

#LB240809catalog .lpStickyBlock ul#expansionList > li + li{
  /* margin-top: calc(19 * (100vw / 750)); */
}
#LB240809catalog .lpStickyBlock ul#expansionList > li .imgOuter video {
  width: calc(750* (100vw /750));
}
#LB240809catalog .lpStickyBlock ul#expansionList > li .imgOuter,
#LB240809catalog .lpStickyBlock ul#expansionList > li picture,
#LB240809catalog .lpStickyBlock ul#expansionList > li img{display: block; width: 100%; height: auto;}

#LB240809catalog .lpStickyBlock ul#expansionList > li picture{
  transition: opacity .3s ease;
  cursor: pointer;
}

#LB240809catalog .lpStickyBlock ul#expansionList > li picture:hover{opacity: .8;}


/*******************************
overViewBox
*******************************/
#overViewBox{
  display: none;
}

/*******************************
modalSlider
*******************************/
#creditModal .modalBox{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  width: 100svw;
  height: 100dvh;
  opacity: 0;
  overflow-y: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  pointer-events: none;
  transition: opacity 0.3s ease;
  transform: translate(100vw,0);
  backface-visibility: hidden;
}

#creditModal .modalBox.active{
  transform: translate(0,0);
  opacity: 1;
  pointer-events: inherit;
}

#creditModal .modalBox .modalBg{
  display: block;
  width: 100%;
  height: 100dvh;
  position: fixed;
  background: rgba(255, 255, 255,1);
  opacity: 0;
  transition: opacity 0.2s ease;
  backface-visibility: hidden;
  z-index: -1;
}

#creditModal .modalBox.active .modalBg{opacity: 1;}

#creditModal .modalBox .closeBtn{
  display: block;
  width: calc(30 *(100vw / 600));
  height: calc(30 *(100vw / 600));
  position: absolute;
  top: calc(24.7 * (100vw / 600));
  right: calc(30.3 *(100vw / 600));
  cursor: pointer;
}

#creditModal .modalBox .closeBtn > img{display: none;}

#creditModal .modalBox .closeBtn::before,
#creditModal .modalBox .closeBtn::after{
  content: '';
  display: block;
  width: calc(42.43 *(100vw / 600));
  height: 0.75px;
  background: #2B2E34;
  position: absolute;
  left: calc(-12.43 * (100vw / 600) / 2);
  top: 50%;
  transform-origin: 50% 50%;
}

#creditModal .modalBox .closeBtn::before{transform: rotate(45deg);}
#creditModal .modalBox .closeBtn::after{transform: rotate(-45deg);}


#creditModal .modalBox .lookWrap{
  display: block;
  width: 100%;
  padding-top: calc(80 *(100vw / 600));
  padding-bottom: calc(30 * (100vw / 600));
  background: #FFFFFF;
}


/*slider setting**/
#creditModal .modalSlide{
  width: 100%;
  margin-bottom: calc(27.6 * (100vw / 600));
  position: relative;
}

#creditModal .modalSlide .continer{
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}

#creditModal .modalSlide .continer .sliderWrapper{
  align-items: center;
}

#creditModal .modalSlide .continer .slider{
  display: block;
  width: 100%;
  margin: 0;
}

/* img ***/
#creditModal .continer .slider .outer{display: block;}
#creditModal .continer .slider .outer video {
  width: calc(750* (100vw /750));
}
#creditModal .continer .slider picture{
  display: block;
}

#creditModal .continer .slider picture > img{
  display: block;
  width: 100%;
  height: auto;
}


#creditModal .modalSlide ul.pager{
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0 calc(6.9 * (100vw / 600));
  position: absolute;
  right: calc(30 * (100vw / 600));
  bottom: calc(-40 * (100vw / 600));
  z-index: 1;
  pointer-events: none;
}

#creditModal .modalSlide ul.pager > li{
  display: block;
  width: calc(9.58 * (100vw / 600));
  height: calc(9.58 * (100vw / 600));
  border-radius: 50%;
  margin: 0;
  background-color: #D2D2D2;
  transition: background 0.3s ease;
  cursor: pointer;
  opacity: 1;
  pointer-events: inherit;
}

#creditModal .modalSlide ul.pager > li.swiper-pagination-bullet-active{
  background: #525252;
  pointer-events: none;
}



/* credit **/

#creditModal .creditLinks{
  display: block;
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 calc(150 * (100vw / 600)) 0 calc(30 * (100vw / 600));
}

#creditModal .creditLinks .credit{
  /*
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  */
  text-align: left;
}

#creditModal .creditLinks .credit > a{
  /*display: block;*/
  font-family: "Times New Roman";
  font-style: italic;
  font-size: calc(21 * (100vw / 600));
  line-height: 1.25;
  letter-spacing: 0;
  color: #000000;
  white-space: nowrap;
}

#creditModal .creditLinks .credit > a:not(:nth-last-of-type(1))::after{
  content: '/';
  padding: 0 0.15em;
}


#creditModal .creditLinks .itemListBtn{
  display: block;
  padding-top: calc(26.5 * (100vw / 600));
}

#creditModal .creditLinks .itemListBtn > a{
  font-family: "Times New Roman";
  font-size: calc(18 * (100vw / 600));
  line-height: 1.2;
  letter-spacing: 0;
  color: #000000;
  font-style: italic;
  white-space: nowrap;
  text-align: left;
}


/*******************************
allItemBtn
*******************************/
#LB240809catalog .allItemBtn{
  display: block;
  width: calc(563 * (100vw / 750));
  margin: calc(160 * (100vw / 750)) auto 0;
  padding: 0;
  position: relative;
}

#LB240809catalog .allItemBtn > a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(75 * (100vw / 750));
  border: 1px solid #000000;
  font-family: "Times New Roman";
  font-style: italic;
  font-size: calc(23 * (100vw / 750));
  text-align: center;
  letter-spacing: 0;
  color: #000000;
}



/*******************************
staffList
*******************************/
#LB240809catalog .staffList{
  display: block;
  padding-bottom: 0;
  padding-top: calc(76 * (100vw / 750));
} 

#LB240809catalog .staffList p{
  display: block;
  font-family: "Times New Roman";
  font-style: italic;
  font-size: calc(22 * (100vw / 750));
  line-height: 1.25; 
  text-align: center;
}

/*******************************
overRide
*******************************/
#LB240809catalog .pcView{display: none;}