@charset "UTF-8";

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


/*******************************
st240724look
*******************************/
#st240724look{
  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;
}

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

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

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

#st240724look .pcOnly{
  display: none;
}

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

/*******************************
mv
*******************************/
#st240724look .mv{
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

#st240724look .mv .outer{
  display: block;
  width: 100%;
  /* position: relative; */
}

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

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

#st240724look .mv .outer .lpMainTTL{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  padding-top: calc(55*(100vw / 750));
  left: 0;
  bottom: 0;
  z-index: 2;
}
#st240724look .lpMainTTL .mv-logo,
#st240724look .lpMainTTL .ttl{
  display: block;
  font-weight: 700;
}
#st240724look .lpMainTTL .mv-logo{
  width: calc(132 * (100vw / 750));
  height: calc(280*(100vw / 750));
  margin-bottom: calc(47*(100vw / 750));
}
#st240724look .lpMainTTL .ttl{
  width: calc(588.9248 * (100vw / 750));
}


/*******************************
.introBlock
*******************************/


#st240724look .intro{
  font-size: calc(24 * (100vw / 750));
  text-align: center;
  line-height: 1.1428571429;
  margin: calc(112*(100vw / 750)) 0 calc(140*(100vw / 750));
}
#st240724look .txt-adjust{
  display: inline-block;
  padding-top: calc(16*(100vw / 750));
}

/*******************************
#movieBlock
*******************************/

#st240724look .mainVisual-video{
  position: relative;
  width: 100%;
  margin-bottom: calc(180 * (100vw / 750));
}

#st240724look video.mvWrap__movie{
  width: 100%;
}
#st240724look .top__visual{
  width: 100%;
}
#st240724look .music {
  position: absolute;
  bottom: calc(40 * (100vw / 750));
  right: calc(27 * (100vw / 750));
  z-index: 99;
}

#st240724look .music .off {
  width: calc(44 * (100vw / 750));
  height: calc(40 * (100vw / 750));
}

#st240724look .music .on {
  width: calc(44 * (100vw / 750));
  height: calc(40 * (100vw / 750));
}

#st240724look .music:hover {
  cursor: pointer;
}

#st240724look .music span {
  display: none;
}

#st240724look .music span.active {
  display: block;
}



/* #st240724look video {
  object-fit: cover;
  object-position: top center;
  width: 100%;
  height: 100%;
  display: block;
  line-height: 0;
}
#st240724look video.pc_only {
  display: none;
}

.volume__icon .on,
.volume__icon .off {
  display: none;
}
.volume__icon[data-sound-state="on"] .off,
.volume__icon[data-sound-state="off"] .on {
  display: block;
}
#st240724look  .mainVisual-video{
  position: relative;
  margin-bottom: calc(180 * (100vw / 750));
}
#SN230421SS2nd .music span {
  display: none;
}
#SN230421SS2nd .music span.active {
  display: block;
} */
/* #st240724look .mvWrap__soundBtnWrap {
  position: absolute;
  display: block;
  right: calc(25*(100vw / 750));
  bottom: calc(35*(100vw / 750));
  cursor: pointer;
  z-index: 1;
}

#st240724look .mvWrap__soundBtnWrap:hover{
  opacity: .7;
} */

/* #st240724look .js-button{
  width: calc(44 * (100vw / 750));
  height: calc(40 * (100vw / 750));
  padding: calc(5 * (100vw / 750));
}
#st240724look .soundBtnInner__button{
  width: calc(34 * (100vw / 750));
  height: calc(30 * (100vw / 750));
}
#st240724look .soundBtnWrap-inner{
  position: absolute;
  display: block;
  right: calc(25*(100vw / 750));
  bottom: calc(35*(100vw / 750));
  cursor: pointer;
  z-index: 1;
} */

@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;
	}
}
/*******************************
creditLinks
*******************************/


#st240724look .img__wrap.sec01-img03_sp .credit,
#st240724look .img__wrap.sec04-img02 .credit,
#st240724look .sec15-img02 .credit{
  position: absolute;
  z-index: 10;
  bottom: 0;
  width: 100vw;
  right: 0;
}


#st240724look .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;
}
#st240724look .credit > .openBtn::before,
#st240724look .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;
}
#st240724look .credit > .openBtn::after{
  transform: rotate(90deg);
}
#st240724look .credit > .openBtn.open::after{
  transform: rotate(0);
  opacity: 0;
}


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

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

#st240724look .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;
}
#st240724look .credit > .openBtn.open + .creditLinks::after {
  opacity: 1;
}


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

#st240724look .creditLinks > span{
  display: block;
  white-space: nowrap;
  color: #FFFFFF;
  font-weight: 200;
  font-size: calc(22*(100vw / 750));
  letter-spacing: 0.05em;
  text-decoration: none;
}


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

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


/*******************************
sec__wrap
*******************************/

/* #st240724look .flex_cont > .img__wrap a{
  pointer-events: none;
}
#st240724look .flex_cont > .img__wrap.js-open a{
  pointer-events: all;
} */

#st240724look .sec{
  margin-bottom: calc(100*(100vw / 750));
}

#st240724look .sec15{
  margin-bottom: calc(145*(100vw / 750));
}


#st240724look .sec09__wrap{
  width: 100%;
  height: calc(1000* (100vw / 750));
  position: relative;
  overflow: hidden;
}

#st240724look .img__wrap{
  width: calc(750* (100vw / 750));
}
#st240724look .img__wrap.sec01-img03_sp,
#st240724look .img__wrap.sec04-img02,
#st240724look .sec15-img02{
  width: calc(1333.3333* (100vw / 750));
}

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

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

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

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

#st240724look .lpStaffList > dl > dd{
  font-weight: 200;
  line-height: 1.39;
  letter-spacing: 0.04em;
}

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

#st240724look .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
*******************************/
#st240724look .lpCautionBox{
  display: block;
  width: 100%;
  margin: calc(97*(100vw / 750)) auto 0;
  padding: 0 calc(32*(100vw / 750)) 0 calc(35*(100vw / 750));
}

#st240724look .lpCaution > li{
  font-size: calc(16 * (100vw / 750));
  font-weight: 400;
  text-align: left;
  letter-spacing: 0.035em;
  line-height: 1.375;
  font-feature-settings: "palt";
}


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

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

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

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


/*******************************
GSAP
*******************************/

#st240724look .scroll_container{
  width: 100%;
  height: calc(1000* (100vw / 750));
  position: relative;
  overflow: hidden;
}
#st240724look .scroll_wrap{
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}
#st240724look .scroll_box {
  /* font-size: 30px; */
  font-weight: 700;
  color: #000000;
  background-color: #eeeeee;
  /* width: 320px; */
  /* height: 400px; */
  display: flex;
  justify-content: center;
  align-items: center;
}
/*******************************
overRide
*******************************/
#st240724look .pcView{display: none;}