@charset "UTF-8";

/*******************************
MO240808LOOK
*******************************/
#MO240808LOOK{
  display: block;
  width: 100%;
  /*font-family: "游ゴシック体", "Yu Gothic", YuGothic, "yu-gothic-pr6n", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;*/
  font-family: "neuzeit-grotesk", sans-serif;
  font-style: normal;
  color: #231815;
  box-sizing: border-box;
}

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

/*******************************
imgSetting
*******************************/
#MO240808LOOK .imgOuter{
  display: block;
  width: 100%;
  background: #FFFFFF;
}

#MO240808LOOK .imgOuter a,
#MO240808LOOK .imgOuter span,
#MO240808LOOK .imgOuter picture,
#MO240808LOOK .imgOuter img{display: block; width: 100%;}

/*******************************
fadeInSetting
*******************************/
#MO240808LOOK .fadeInBlock,
#MO240808LOOK .fadeInBlockSP{
  visibility: hidden;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.43, 0.05, 0.17, 1) 0.3s;
  pointer-events: none;
}

#MO240808LOOK .fadeInBlock.view,
#MO240808LOOK .fadeInBlockSP.view{
  visibility: visible;
  transform: translateY(0);
  opacity: 1;
  pointer-events: inherit;
}


/*******************************
creditLinks
*******************************/
#MO240808LOOK .creditArea{
  display: block;
  padding-top: calc(20 * (100vw / 750));
}

#MO240808LOOK .creditLinks{
  display: block;
  text-align: left;
  font-size:  calc(20 * (100vw / 750));
  transform: scale(0.8);
  transform-origin: left top;
}

#MO240808LOOK .creditLinks >  a,
#MO240808LOOK .creditLinks >  span{
  display: inline-block;
  white-space: nowrap;
  font-family: "elza", sans-serif;
  font-weight: 200;
  font-style: normal;
  font-size:  calc(20 * (100vw / 750));
  letter-spacing: 0.06em;
  line-height: 1.625;
  color: #535353;
  text-decoration: none;
  /*
  font-feature-settings: "palt";
  */
}

#MO240808LOOK .creditLinks >  a + a,
#MO240808LOOK .creditLinks >  span + a,
#MO240808LOOK .creditLinks >  span + span,
#MO240808LOOK .creditLinks >  a + span,
#MO240808LOOK .creditLinks >  br.pcView + a,
#MO240808LOOK .creditLinks >  br.pcView + span{
  margin-left: 0.5em;
}


#MO240808LOOK .creditArea.overRay{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

#MO240808LOOK .creditArea.overRay::before{
  content: '';
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,.6);
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .3s ease;
}

#MO240808LOOK .creditArea.overRay.active::before{opacity: 1;}

#MO240808LOOK .creditArea.overRay .openBtn{
  display: block;
  width: calc(30 * (100vw / 750));
  height: calc(30 * (100vw / 750));
  position: absolute;
  right: calc(10 * (100vw / 750));
  bottom: calc(12 * (100vw / 750));
  z-index: 2;
  pointer-events: auto;
}

#MO240808LOOK .creditArea.overRay .openBtn::before,
#MO240808LOOK .creditArea.overRay .openBtn::after{
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: #FFFFFF;
  position: absolute;
  left: 0;
  top: calc(50%);
  transition: transform .3s ease,opacity .3s ease,background .3s ease;
}

#MO240808LOOK .creditArea.overRay .openBtn::after{
  transform: rotate(90deg);
}

#MO240808LOOK .creditArea.overRay.active .openBtn::before,
#MO240808LOOK .creditArea.overRay.active .openBtn::after{background: #000000;}
#MO240808LOOK .creditArea.overRay.active .openBtn::after{transform: rotate(0); opacity: 0;}


#MO240808LOOK .creditArea.overRay .creditLinks{
  display: block;
  position: absolute;
  bottom: calc(6 * (100vw / 750));
  left: calc(20 * (100vw / 750));
  transform-origin: left bottom;
  z-index: 3;
  opacity: 0;
  transition: opacity .3s ease;
}
#MO240808LOOK .creditArea.overRay.active .creditLinks{
  opacity: 1;
  pointer-events: auto;
}


#MO240808LOOK .creditArea.overRay .creditLinks > a,
#MO240808LOOK .creditArea.overRay .creditLinks > span{color: #000000;}


/*******************************
figSlider
*******************************/
#MO240808LOOK .figSlider,
#MO240808LOOK .figSliderSP{
	position: relative;
}

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

#MO240808LOOK .figSlider .sliderWrapper,
#MO240808LOOK .figSliderSP .sliderWrapper{}

#MO240808LOOK .figSlider .slider,
#MO240808LOOK .figSliderSP .slider{
  display: block;
  width: 100%;
}

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

#MO240808LOOK .slider a img,
#MO240808LOOK .slider a picture{
  display: block;
  width: 100%;
  height: auto;
}

#MO240808LOOK .figSlider .slider.swiper-slide-active,
#MO240808LOOK .figSliderSP .slider.swiper-slide-active{
  pointer-events: auto;
}

#MO240808LOOK .figSliderPC .sliderWrapper{
  display: block;
}


#MO240808LOOK .figSlider ul.sliderPager,
#MO240808LOOK .figSliderSP ul.sliderPager{
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0 calc(20 * (100vw / 750));
  position: absolute;
  right:  calc(40 * (100vw / 750));
  bottom:  calc(-60 * (100vw / 750));
}

#MO240808LOOK .figSlider ul.sliderPager > li,
#MO240808LOOK .figSliderSP ul.sliderPager > li{
  display: block;
  width: calc(12 * (100vw / 750));
  height: calc(12 * (100vw / 750));
  border-radius: 50%;
  margin: 0;
  background: #FFFFFF;
  border: 1px solid #535353;
  transition: background 0.3s ease;
  cursor: pointer;
  opacity: 1;
}

#MO240808LOOK .figSlider ul.sliderPager > li.swiper-pagination-bullet-active,
#MO240808LOOK .figSliderSP ul.sliderPager > li.swiper-pagination-bullet-active{
  background: #535353;
  pointer-events: none;
}

#MO240808LOOK .figSliderPC ul.sliderPager{display: none;}


/*******************************
movieBlock
*******************************/
#MO240808LOOK #movieBlock{
  display: block;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

#MO240808LOOK #movieBlock a{display: block; width: 100%; height: auto;}

#MO240808LOOK #movieBlock .movie{
  display: block;
  width: 100%;
  /*
  height: 100%;
  overflow: hidden;
  */
}

#MO240808LOOK #movieBlock .movie > video{
  display: block;
  width: 100%;
  /*
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  */
}

#MO240808LOOK #movieBlock > #soundBtn{
  display: block;
  width: calc(40 * (100vw / 750));
  height: calc(40 * (100vw / 750));
  cursor: pointer;
  background: url(../img/sound_off.svg) no-repeat;
  background-size: 100% auto;
  position: absolute;
  right: calc(18 * (100vw / 750));
  bottom: calc(8 * (100vw / 750));
  z-index: 1;
}

#MO240808LOOK #movieBlock > #soundBtn.on{
  background: url(../img/sound_on.svg) no-repeat;
  background-size: 100% auto;
}


/*******************************
sec01
*******************************/
#sec01{
  display: block;
  width: 100%;
  margin: 0 auto calc(98 * (100vw / 750));
  padding-top: calc(109 * (100vw / 750));
  position: relative;
  z-index: 1;
  overflow: hidden;
}

#sec01::after{
  content: '';
  display: block;
  width: 100%;
  height: calc(125 * (100vw / 750));
  background: #C1CBA3;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.5s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0s;
}

#sec01.active::after{
  clip-path: inset(0 0 0 0);
}

#sec01 .wrapper{
  display: block;
}


#sec01 .wrapper .text{
  display: block;
  width: 100%;
  margin-bottom: calc(100 * (100vw / 750));
  text-align: center;
}
#sec01 .wrapper .text > h3{
  display: block;
  text-transform: uppercase;
  font-size: calc(28 * (100vw / 750));
  letter-spacing: 0.04em;
  line-height: 1;
  color: #231815;
  text-align: center;
}


#sec01 .wrapper .imgBox{
  display: block;
  width: 100%;
}

#sec01 .img01{
  width: 100%;
}

#sec01 .img01 .slider{
  display: block;
  width: 100%;
}

#sec01 .img01 .slider + .slider{
  margin-top: calc(10 * (100vw / 750));
}

#sec01 .img01 .creditArea{
  text-align: left;
  padding-left: calc(22 * (100vw / 750));
}

/*******************************
sec02
*******************************/
#sec02{
  display: block;
  width: 100%;
  margin: 0 auto calc(98 * (100vw / 750));
  position: relative;
  z-index: 1;
  overflow: hidden;
}


#sec02 .img01{
  width: 100%;
  margin: 0 auto;
}

#sec02 .creditArea{
  text-align: left;
  padding-left: calc(20 * (100vw / 750));
}


/*******************************
sec03
*******************************/
#sec03{
  display: block;
  width: 100%;
  margin: 0 auto calc(125 * (100vw / 750));
  position: relative;
  z-index: 1;
  overflow: hidden;
}

#sec03::after{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: #94101E;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 0.5s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0s;
}

#sec03.active::after{
  clip-path: inset(0 0 0 0);
}

#sec03::before{
  content: '';
  display: block;
  width: 50%;
  height: calc(900 * (100vw / 750));
  background: #FFFFFF;
  position: absolute;
  right: 0;
  top: calc(500 * (100vw / 750));
  z-index: 1;
}

#sec03 .wrapper{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  position: relative;
  z-index: 2;
}


#sec03 .wrapper .text01{
  order: 2;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-end;
  width: 50%;
  text-align: center;
  padding-bottom: calc(8 * (100vw / 750));
}
#sec03 .wrapper .text01 > h3{
  display: block;
  text-transform: uppercase;
  font-size: calc(25 * (100vw / 750));
  letter-spacing: 0.04em;
  line-height: 1.26;
  color: #231815;
  text-align: center;
}


#sec03 .img01{
  order: 1;
  display: block;
  width: 50%;
  position: relative;
}

#sec03 .img02{
  order: 3;
  display: block;
  width: calc(500 * (100vw / 750));
  margin: calc(114 * (100vw / 750)) auto calc(118 * (100vw / 750));
  position: relative;
}

#MO240808LOOK #sec03 .img02 .creditArea.overRay .creditLinks{
  bottom: calc(12*(100vw / 750));
  left: calc(18*(100vw / 750));
}

#sec03 .text02{
  order: 4;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-end;
  width: 50%;
  text-align: center;
  padding-bottom: calc(8 * (100vw / 750));
}

#sec03 .text02 > p{
  display: block;
  text-transform: uppercase;
  font-size: calc(25 * (100vw / 750));
  letter-spacing: 0.04em;
  line-height: 1.26;
  color: #231815;
  text-align: center;
}


#sec03 .img03{
  order: 5;
  width: 50%;
}


/*******************************
sec04
*******************************/
#sec04{
  display: block;
  width: 100%;
  margin: 0 auto calc(104 * (100vw / 750));
  position: relative;
  z-index: 1;
  overflow: hidden;
}


#sec04 .img01{
  display: block;
  width: 100%;
  margin: 0 auto;
}

#sec04 .creditArea{
  text-align: left;
  padding-left: calc(20 * (100vw / 750));
}

#MO240808LOOK #sec04 .img01 .figSliderSP ul.sliderPager{
  right: calc(42 * (100vw / 750));
  bottom: calc(-48 * (100vw / 750));
}

/*******************************
sec05
*******************************/
#sec05{
  display: block;
  width: 100%;
  margin: 0 auto calc(98 * (100vw / 750));
  position: relative;
  z-index: 1;
  overflow: hidden;
}

#sec05 .wrapper{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

#sec05 .img01{
  width: 100%;
  margin-bottom: calc(20 * (100vw / 750));
}

#sec05 .img02{
  width: 100%;
}

#sec05 .creditArea{
  text-align: left;
  padding-left: calc(20 * (100vw / 750));
}


/*******************************
sec06
*******************************/
#sec06{
  display: block;
  width: 100%;
  margin: 0 auto calc(125 * (100vw / 750));
  padding-top: calc(117 * (100vw / 750));
  position: relative;
  z-index: 1;
  overflow: hidden;
}

#sec06::after{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: #5C4E9B;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.5s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0s;
}

#sec06.active::after{
  clip-path: inset(0 0 0 0);
}


#sec06::before{
  content: '';
  display: block;
  width: 100%;
  height: calc(450 * (100vw / 750));
  background: #FFFFFF;
  position: absolute;
  left: 0;
  top: calc(450 * (100vw / 750));
  z-index: 1;
}

#sec06 .img01{
  width: calc(500 * (100vw / 750));
  margin: 0 auto calc(117 * (100vw / 750));
  position: relative;
  z-index: 2;
}



#sec06 .wrapper{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}

#sec06 .img02{
  width: 100%;
  position: relative;
}
#sec06 .img02 .sliderWrapper{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
#sec06 .img02 .sliderWrapper .slider{width: 50%;}


#sec06 .img03,
#sec06 .img04{
  display: block;
  width: 50%;
  margin: 0 auto;
  position: relative;
}


/*******************************
sec07
*******************************/
#sec07{
  display: block;
  width: 100%;
  margin: 0 auto calc(98 * (100vw / 750));
  position: relative;
  z-index: 1;
  overflow: hidden;
}


#sec07 .creditArea{
  text-align: left;
  padding-left: calc(20 * (100vw / 750));
}

#sec07 .creditArea > a,
#sec07 .creditArea > span{
  font-size: calc(16 * (100vw / 1200));
}


/*******************************
sec08
*******************************/
#sec08{
  display: block;
  width: 100%;
  margin: 0 auto calc(122 * (100vw / 750));
  position: relative;
  z-index: 1;
  overflow: hidden;
}

#sec08::after{
  content: '';
  display: block;
  width: 50%;
  height: 100%;
  background: #737577;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 0.5s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0s;
}

#sec08.active::after{
  clip-path: inset(0 0 0 0);
}


#sec08 .wrapper{
  display: block;
}


#sec08 .img0102{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  position: relative;
}

#sec08 .img01{
  width: 50%;
}
#sec08 .img02{
  width: 50%;
}


#sec08 .img03{
  display: block;
  width: calc(500 * (100vw / 750));
  margin: calc(117 * (100vw / 750)) auto calc(120 * (100vw / 750));
  position: relative;
}

#MO240808LOOK #sec08 .img03 .sliderPager{display: none;}

#MO240808LOOK #sec08 .img03 .creditArea.overRay .creditLinks{
  bottom: calc(12*(100vw / 750));
  left: calc(18*(100vw / 750));
}



#sec08 .img0506{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  position: relative;
}

#sec08 .img05{
  width: 50%;
}
#sec08 .img06{
  width: 50%;
}



/*******************************
sec09
*******************************/
#sec09{
  display: block;
  width: 100%;
  margin: 0 auto calc(98 * (100vw / 750));
  position: relative;
  z-index: 1;
  overflow: hidden;
}

#sec09 .wrapper{}

#sec09 .img01,
#sec09 .img02{
  width: 100%;
  position: relative;
}

#sec09 .img01{
  margin-bottom: calc(20 * (100vw / 750));
}


#sec09 .creditArea{
  width: 100%;
  text-align: left;
  padding-left: calc(20 * (100vw / 750));
}



/*******************************
sec10
*******************************/
#sec10{
  display: block;
  width: 100%;
  margin: 0 auto calc(107 * (100vw / 750));
  position: relative;
  z-index: 1;
  overflow: hidden;
}

#sec10::after{
  content: '';
  display: block;
  width: 100%;
  height: calc(100% - 950 * (100vw / 750));
  background: #015442;
  position: absolute;
  right: 0;
  top: calc(950 * (100vw / 750));
  z-index: -1;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.5s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0s;
}

#sec10.active::after{
  clip-path: inset(0 0 0 0);
}

/*
#sec10::before{
  content: '';
  width: 100%;
  height: calc(950 * (100vw / 750));
  background: #FFFFFF;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
*/

#sec10 .wrapper{
  display: block;
  position: relative;
  z-index: 2;
}


#sec10 .img0102{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-bottom: calc(30 * (100vw / 750));
}


#sec10 .img01,
#sec10 .img02{
  width: 50%;
}

#sec10 .text01{
  display: block;
  width: 100%;
  height:  calc(31.5 * (100vw / 750));
  overflow: hidden;
  position: relative;
  margin-bottom: calc(112 * (100vw / 750));
}

#sec10 .text01 > p{
  display: block;
  text-transform: uppercase;
  font-size: calc(25 * (100vw / 750));
  letter-spacing: 0.04em;
  line-height: 1.26;
  color: #231815;
  text-align: center;
  white-space: nowrap;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}


#sec10 .img03{
  width: calc(375 * (100vw / 750));
  margin: 0 auto calc(172 * (100vw / 750));
}


#sec10 .text02{
  display: block;
  width: 100%;
  height:  calc(31.5 * (100vw / 750));
  overflow: hidden;
  position: relative;
  margin: 0 auto calc(23 * (100vw / 750));
}

#sec10 .text02 > p{
  display: block;
  text-transform: uppercase;
  font-size: calc(25 * (100vw / 750));
  letter-spacing: 0.04em;
  line-height: 1.26;
  color: #231815;
  text-align: center;
  white-space: nowrap;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}



#sec10 .img0405{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  position: relative;
}

#sec10 .img04,
#sec10 .img05{
  width: 50%;
}



/*******************************
lpBottomSection
*******************************/
#MO240808LOOK .lpBottomSection{
  display: block;
}

#MO240808LOOK .lpBottomSection .ttl{
  display: block;
  margin-bottom: calc(84 * (100vw / 750));

}

#MO240808LOOK .lpBottomSection .ttl > span{
  display: block;
  text-transform: uppercase;
  font-size: calc(20 * (100vw / 750));
  letter-spacing: 0.04em;
  line-height: 1.26;
  color: #231815;
  text-align: center;
}

#MO240808LOOK .lpBottomSection .ttl > span:nth-of-type(2n){margin-top: calc(8 * (100vw / 750));}



#MO240808LOOK .imgBottom{
  display: block;
  width: 100%;
  padding-bottom: calc(104 * (100vw / 750));
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF calc(350 * (100vw / 750)), #C1CBA3 calc(350 * (100vw / 750)), #C1CBA3 100%);
}


#MO240808LOOK .imgBottom .imgOuter{
  display: block;
  width: calc(318 * (100vw / 750));
  margin: 0 auto;
}

#MO240808LOOK .staffListBox{
  display: block;
  background: #C1CBA3;
  padding-bottom: calc(156 * (100vw / 750));
}


#MO240808LOOK .staffListBox > dl{
  display: block;
}

#MO240808LOOK .staffListBox > dl > dt{
  display: block;
  margin-bottom: calc(24 * (100vw / 750));
  text-transform: uppercase;
  font-size: calc(20 * (100vw / 750));
  font-weight: 300;
  text-align: center;
  line-height: 1.575;
  letter-spacing: 0.04em;
}

#MO240808LOOK .staffListBox > dl > dd{
  display: block;
  text-transform: uppercase;
  font-size: calc(20 * (100vw / 750));
  font-weight: 300;
  text-align: center;
  line-height: 1.775;
  letter-spacing: 0.04em;
}



/*******************************
overRide
*******************************/
#MO240808LOOK .pcView{display: none!important;}