@charset "UTF-8";

/*
.main-area{padding: 0;}*/
.main-area .main-inner{
  max-width: inherit;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}


/*******************************
st240405look
*******************************/
#st240405look{
  display: block;
  width: 100%;
  padding: 0 0 0;
  box-sizing: border-box;
  overflow: hidden;
  font-family: acumin-pro, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック","游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "メイリオ", sans-serif;
  font-weight: 400;
  font-style: normal;
}

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

#st240405look picture,
#st240405look figure,
#st240405look img{
  display: block;
  width: 100%;
  height: auto;
}

#st240405look .imgOuter > a,
#st240405look .imgOuter > span{display: block; width: 100%; height: auto;}

/*******************************
lpContentsWrap
*******************************/
#st240405look .lpContentsWrap{
  display: block;
  width: 100%;
  margin: 0 auto 0;
}

/*******************************
mv
*******************************/
#st240405look .mv{
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: calc(120 * (100vw / 750));
}

#st240405look .mv .outer{
  display: block;
  width: 100%;
  position: relative;
}

#st240405look .mv a.outer{color: #FFFFFF; text-decoration: none;}

#st240405look .mv .outer picture{
  display: block;
  width: 100%;
  position: relative;
  z-index: 1;
}


#st240405look .mv .outer .lpMainTTL{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}

#st240405look .mv .outer .lpMainTTL > span,
#st240405look .mv .outer .lpMainTTL > span > span{
  display: block;
  font-size: calc(44 * (100vw / 750));
  font-weight: 700;
  position: relative;
  z-index: 2;
}

#st240405look .mv .outer .lpMainTTL > span > em,
#st240405look .mv .outer .lpMainTTL > span > span > em{
  font-size: calc(45 * (100vw / 750));
  font-style: normal;
  font-weight: 700;
}

#st240405look .mv .outer .lpMainTTL > span > span{
  display: block;
  width: 100%;
  text-shadow: 0 0 6px rgba(71,65,59,.3);
  mix-blend-mode: multiply;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
  z-index: -1;
}

/*******************************
lpMainTTLBlock
*******************************/
#st240405look #movieBlock{
  display: block;
  width: 100%;
  padding-bottom: 177.7777733333333%;
  margin-bottom: calc(120 * (100vw / 750));
  position: relative;
}

#st240405look #movieBlock .movie{
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

#st240405look #movieBlock .movie > video{
  display: block;
  width: 100%;
}

#st240405look #movieBlock > .soundBtnArea{
  display: block;
  width: calc(34 * (100vw / 750));
  height: calc(30 * (100vw / 750));
  position: absolute;
  right: calc(34 * (100vw / 750));
  bottom: calc(48 * (100vw / 750));
  transition: opacity .3s ease,background .3s ease;
  cursor: pointer;
  z-index: 3;
}

#st240405look #soundBtn{
  display: block;
  width: 100%;
  height: 100%;
  background: url("../img/icon_sound_off.svg") center center no-repeat;
  background-size: 100% auto;
}

#st240405look #soundBtn.on{
  background: url("../img/icon_sound.svg") center center no-repeat;
  background-size: 100% auto;
}

#st240405look #movieBlock .scrollGuide{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: calc(28 * (100vw / 750)) 0;
  height: calc(153 * (100vw / 750));
  width: 100%;
  text-align: center;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}

#st240405look #movieBlock .scrollGuide::after{
  content: '';
  display: block;
  width: 1px;
  height: calc(100 * (100vw / 750));
  background: #FFFFFF;
  animation: scrollGuide 2s ease-in-out 0s infinite normal;
}

@keyframes scrollGuide {
	0% {
		transform: scale(1, 1);
		transform-origin: center bottom;
	}
	20% {
		transform: scale(1, 1);
		transform-origin: center bottom;
	}
	50% {
		transform: scale(1, 0);
		transform-origin: center bottom;
	}
	50.1% {
		transform: scale(1, 0);
		transform-origin: center top;
	}
	80% {
		transform: scale(1, 1);
		transform-origin: center top;
	}
	100% {
		transform: scale(1, 1);
		transform-origin: center top;
	}
}

#st240405look #movieBlock .scrollGuide > span{
  font-size: calc(30 * (100vw / 750));
  font-weight: 200;
  color: #FFFFFF;
}

/*******************************
creditLinks
*******************************/
#st240405look .credit{}
#st240405look .credit > .openBtn{
  display: block;
  width: calc(40 * (100vw / 750));
  height: calc(40 * (100vw / 750));
  position: absolute;
  right: calc(35*(100vw / 750));
  bottom: calc(28*(100vw / 750));
  z-index: 3;
  cursor: pointer;
}
#st240405look .credit > .openBtn::before,
#st240405look .credit > .openBtn::after{
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: #FFFFFF;
  position: absolute;
  left: 0;
  top: calc(50% - 1px);
  transition: transform .6s ease,opacity .6s ease;
}
#st240405look .credit > .openBtn::after{
  transform: rotate(90deg);
}
#st240405look .credit > .openBtn.open::after{
  transform: rotate(0);
  opacity: 0;
}


#st240405look .creditLinks{
  display: block;
  width: 100%;
  padding: 0 calc(35*(100vw / 750)) calc(31*(100vw / 750));
  font-size: calc(22*(100vw / 750));
  font-weight: 200;
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-align: left;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transform: translateY(100%);
  transition: transform .6s ease,opacity .6s ease;
}

#st240405look .credit > .openBtn.open + .creditLinks{
  transform: translateY(0);
  opacity: 1;
  pointer-events: inherit;
}

#st240405look .credit .creditLinks::after{
  content: '';
  display: block;
  width: 100%;
  height: calc(152 * (100vw / 750));
  background: linear-gradient(to top, rgba(0,0,0,.2) 40%, rgba(0,0,0,0));
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity .6s ease;
}
#st240405look .credit > .openBtn.open + .creditLinks::after{opacity: 1;}

#st240405look .creditLinks >  a,
#st240405look .creditLinks >  span{
  display: inline-block;
  white-space: nowrap;
  color: #FFFFFF;
  font-weight: 200;
  text-decoration: none;
}



/*******************************
imageList
*******************************/
#st240405look .imageList{
  display: block;
  width: 100%;
  margin-bottom: calc(120 * (100vw / 750));
}

#st240405look .imageList .imgOuter{
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
}


#st240405look .imageList .img01{ margin-bottom: calc(120 * (100vw / 750));}
#st240405look .imageList .img02{ margin-bottom: calc(120 * (100vw / 750));}
#st240405look .imageList .img03{}
#st240405look .imageList .img04{ margin-bottom: calc(120 * (100vw / 750));}
#st240405look .imageList .img05{}
#st240405look .imageList .img06{ margin-bottom: calc(120 * (100vw / 750));}
#st240405look .imageList .img07{ margin-bottom: calc(120 * (100vw / 750)); padding: 0 calc(120 * (100vw / 750));}
#st240405look .imageList .img08{ margin-bottom: calc(120 * (100vw / 750));}
#st240405look .imageList .img09{ margin-bottom: calc(120 * (100vw / 750)); padding: 0 calc(120 * (100vw / 750));}
#st240405look .imageList .img10{}
#st240405look .imageList .img11{ margin-bottom: calc(120 * (100vw / 750));}
#st240405look .imageList .img12{ margin-bottom: calc(120 * (100vw / 750)); padding: 0 calc(140 * (100vw / 750));}
#st240405look .imageList .img13{}
#st240405look .imageList .img14{ margin-bottom: calc(120 * (100vw / 750));}
#st240405look .imageList .img15{ margin-bottom: calc(120 * (100vw / 750)); padding: 0 calc(90 * (100vw / 750));}
#st240405look .imageList .img16{ margin-bottom: calc(120 * (100vw / 750));}
#st240405look .imageList .img17{ margin-bottom: calc(120 * (100vw / 750)); padding: 0 calc(140 * (100vw / 750));}
#st240405look .imageList .img18{ margin-bottom: calc(120 * (100vw / 750));}
#st240405look .imageList .img19{ margin-bottom: calc(120 * (100vw / 750));}
#st240405look .imageList .img20{ margin-bottom: calc(120 * (100vw / 750)); padding: 0 calc(120 * (100vw / 750));}
#st240405look .imageList .img21{ margin-bottom: calc(120 * (100vw / 750));}
#st240405look .imageList .img22{ margin-bottom: calc(120 * (100vw / 750));}
#st240405look .imageList .img23{ margin-bottom: calc(120 * (100vw / 750));}
#st240405look .imageList .img24{ margin-bottom: calc(120 * (100vw / 750)); padding: 0 calc(120 * (100vw / 750));}
#st240405look .imageList .img25{}
#st240405look .imageList .img26{ margin-bottom: calc(120 * (100vw / 750));}
#st240405look .imageList .img27{ margin-bottom: calc(120 * (100vw / 750));}
#st240405look .imageList .img28{}
#st240405look .imageList .img29{}



/*******************************
figSlider
*******************************/
#st240405look .figSlider{
	overflow: hidden;
	position: relative;
}

#st240405look .figSlider .container{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}

#st240405look .figSlider .sliderWrapper{}

#st240405look .figSlider .slider{
  display: block;
  width: 100%;
}

#st240405look .figSlider .slider a{
  display: block;
  width: 100%;
  height: auto;
}

#st240405look .figSlider .slider a > img{
  display: block;
  width: 100%;
  height: auto;
}

#st240405look .figSlider .slider.swiper-slide-active{
  pointer-events: auto;
}


/*******************************
lpStaffList
*******************************/
#st240405look .lpStaffList{
  display: block;
  width: 100%;
  margin: 0 auto calc(100 * (100vw / 750));
  padding: 0 0 0 calc(34 * (100vw / 750));
}

#st240405look .lpStaffList > dl{
  display: block;
  font-size: calc(21 * (100vw / 750));
  line-height: 1.35;
  letter-spacing: 0.035em;
  font-weight: 200;
}

#st240405look .lpStaffList > dl + dl{margin-top: 1em;}

#st240405look .lpStaffList > dl > dt{
  letter-spacing: 0.034em;
  font-weight: 400;
}

#st240405look .lpStaffList > dl > dd{
  font-weight: 200;
}

/*******************************
allItemBtn
*******************************/
#st240405look .allItemBtn{
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 0 calc(34 * (100vw / 750));
  text-align: center;
  position: relative;
}

#st240405look .allItemBtn > a{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(64 * (100vw / 750));
  border: 1px solid #000000;
  font-size: calc(25 * (100vw / 750));
  line-height: 1;
  font-weight: 700;
  text-align: center;
  padding-bottom: calc(3 * (100vw / 750));
}

/*******************************
lpCaution
*******************************/
#st240405look .lpCautionBox{
  display: block;
  width: 100%;
  margin: calc(100*(100vw / 750)) auto 0;
  padding: 0 0 0 calc(34*(100vw / 750));
  white-space: nowrap;
}

#st240405look .lpCaution{
  transform: scale(0.8);
  transform-origin: left top;
}

#st240405look .lpCaution > li{
  font-size: calc(20 * (100vw / 750));
  font-weight: 400;
  text-align: left;
  letter-spacing: 0.035em;
  line-height: 1.35;
}


/*******************************
fadeInSetting
*******************************/
#st240405look .fadeInBlock,
#st240405look .fadeInList .fadeInTarget{
  visibility: hidden;
  opacity: 0;
  transform: translateY(4rem);
  transition: opacity 1.5s ease, transform 1.5s ease;
  pointer-events: none;
}

#st240405look .fadeInBlock .afterMove{
  visibility: hidden;
  opacity: 0;
  transform: translateY(4rem);
  transition: opacity 1s ease 1.5s, transform 1s ease 1.5s;
  pointer-events: none;
}

#st240405look .fadeInBlock.view,
#st240405look .fadeInList .fadeInTarget.view{
  visibility: visible;
  opacity: 1;
  transform: translate(0, 0) rotateY(0);
  pointer-events: inherit;
}

#st240405look .fadeInBlock.view .afterMove{
  visibility: visible;
  opacity: 1;
  transform: translate(0, 0) rotateY(0);
  pointer-events: inherit;
}

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