@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%;
}

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

/*******************************
fadeInSetting
*******************************/
#MO240808LOOK .fadeInBlock,
#MO240808LOOK .fadeInBlockPC{
  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 .fadeInBlockPC.view{
  visibility: visible;
  transform: translateY(0);
  opacity: 1;
  pointer-events: inherit;
}


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

#MO240808LOOK .creditLinks{
  display: block;
  /*
  font-feature-settings: "palt";
  */
  text-align: left;
}

#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(13 * (100vw / 1200));
  letter-spacing: 0.06em;
  line-height: 2;
  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.spView + a,
#MO240808LOOK .creditLinks >  br.spView + span{
  margin-left: 0.5em;
}


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

#MO240808LOOK .creditArea.overRay .openBtn{display: none;}

#MO240808LOOK .creditArea.overRay .creditLinks{
  display: block;
  position: absolute;
  bottom: calc(12 * (100vw / 1200));
  left: calc(20 * (100vw / 1200));
}

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

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

#MO240808LOOK .figSlider .container,
#MO240808LOOK .figSliderPC .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 .figSliderPC .sliderWrapper{}

#MO240808LOOK .figSlider .slider,
#MO240808LOOK .figSliderPC .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 .figSliderPC .slider.swiper-slide-active{
  pointer-events: auto;
}

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


#MO240808LOOK .figSlider ul.sliderPager,
#MO240808LOOK .figSliderPC ul.sliderPager{
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: flex-start;
  width: 100%;
  margin-top: calc(50 * (100vw / 1200));
  gap: 0 calc(20 * (100vw / 1200));
}

#MO240808LOOK .figImgBox.figRight .figSlider ul.sliderPager,
#MO240808LOOK .imgOuter + .figSlider ul.sliderPager{justify-content: flex-end;}

#MO240808LOOK .figSlider ul.sliderPager > li,
#MO240808LOOK .figSliderPC ul.sliderPager > li{
  display: block;
  width: calc(12 * (100vw / 1200));
  height: calc(12 * (100vw / 1200));
  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 .figSliderPC ul.sliderPager > li.swiper-pagination-bullet-active{
  background: #535353;
  pointer-events: 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 / 1200));
  height: calc(40 * (100vw / 1200));
  cursor: pointer;
  background: url(../img/sound_off.svg) no-repeat;
  background-size: 100% auto;
  position: absolute;
  right: calc(26 * (100vw / 1200));
  bottom: calc(18 * (100vw / 1200));
  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: -1px auto calc(150 * (100vw / 1200));
  padding-top: calc(98 * (100vw / 1200));
  padding-bottom: calc(44 * (100vw / 1200));
  position: relative;
  z-index: 1;
  overflow: hidden;
}

#sec01::after{
  content: '';
  display: block;
  width: calc(625 * (100vw / 1200));
  height: 100%;
  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: flex;
  justify-content: space-between;
  align-items: flex-start;
}


#sec01 .wrapper .text{
  order: 2;
  display: block;
  width: calc(625 * (100vw / 1200));
  padding-top: calc(30 * (100vw / 1200));
  text-align: center;
}
#sec01 .wrapper .text > h3{
  display: block;
  text-transform: uppercase;
  font-size: calc(17 * (100vw / 1200));
  letter-spacing: 0.04em;
  line-height: 1.852941176470588;
  color: #231815;
  text-align: center;
}


#sec01 .wrapper .imgBox{
  order: 1;
  display: block;
  width: calc(575 * (100vw / 1200));
  text-align: center;
}

#sec01 .img01{
  display: block;
  width: calc(450 * (100vw / 1200));
  margin: 0 auto;
}

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

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

#sec01 .img01 .creditArea{
  text-align: left;
}

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


#sec02 .img01{
  width: calc(525 * (100vw / 1200));
  margin: 0 auto;
}

/*******************************
sec03
*******************************/
#sec03{
  display: block;
  width: 100%;
  margin: 0 auto calc(144 * (100vw / 1200));
  padding-top: calc(32 * (100vw / 1200));
  padding-bottom: calc(26 * (100vw / 1200));
  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 .wrapper{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}


#sec03 .wrapper .text01{
  order: 1;
  display: block;
  width: 100%;
  padding-bottom: calc(162 * (100vw / 1200));
  text-align: center;
}
#sec03 .wrapper .text01 > h3{
  display: block;
  text-transform: uppercase;
  font-size: calc(17 * (100vw / 1200));
  letter-spacing: 0.04em;
  line-height: 1.852941176470588;
  color: #231815;
  text-align: center;
}


#sec03 .img01,
#sec03 .img02,
#sec03 .img03{
  display: block;
  width: 33.3333333333333333333333333333%;
  margin: 0 auto;
  position: relative;
}

#sec03 .img01{order: 2;}
#sec03 .img02{order: 4;}
#sec03 .img03{order: 3;}

#sec03 .img01:hover .creditArea,
#sec03 .img02:hover .creditArea,
#sec03 .img03:hover .creditArea{
  opacity: 1;
}

#sec03 .img01 .creditArea .creditLinks,
#sec03 .img02 .creditArea .creditLinks,
#sec03 .img03 .creditArea .creditLinks{
  bottom: calc(4 * (100vw / 1200));
  left: calc(12 * (100vw / 1200));
}


#sec03 .img01:hover .creditArea .creditLinks,
#sec03 .img02:hover .creditArea .creditLinks,
#sec03 .img03:hover .creditArea .creditLinks{
  pointer-events: auto;
}



#sec03 .text02{
  display: block;
  width: 100%;
  padding-top: calc(196 * (100vw / 1200));
  order: 5;
}

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


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


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

#MO240808LOOK #sec04 .figSliderSP .sliderWrapper{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

#sec04 .img01 .slider{
  display: block;
  width: calc(450 * (100vw / 1200));
}

#sec04 .img01 .slider:nth-of-type(1){order:2;}
#sec04 .img01 .slider:nth-of-type(2){order:1;}

#sec04 .creditArea{text-align: left;}



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

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

#sec05 .img01{
  order: 2;
  width: 100%;
}

#sec05 .img02{
  order: 1;
  width: 100%;
  margin-bottom: calc(10 * (100vw / 1200));
}

#sec05 .creditArea{
  order: 3;
  text-align: left;
}


/*******************************
sec06
*******************************/
#sec06{
  display: block;
  width: 100%;
  margin: 0 auto calc(144 * (100vw / 1200));
  padding-top: calc(50 * (100vw / 1200));
  padding-bottom: calc(167 * (100vw / 1200));
  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(454 * (100vw / 1200));
  position: absolute;
  left: 0;
  top: calc(398 * (100vw / 1200));
  z-index: 0;
}

#sec06 .img01{
  width: calc(525 * (100vw / 1200));
  margin: 0 auto calc(103 * (100vw / 1200));
  position: relative;
}



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

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


#sec06 .img01:hover .creditArea,
#sec06 .img02:hover .creditArea,
#sec06 .img03:hover .creditArea,
#sec06 .img04:hover .creditArea{
  opacity: 1;
}

#sec06 .img01 .creditArea .creditLinks,
#sec06 .img02 .creditArea .creditLinks,
#sec06 .img03 .creditArea .creditLinks,
#sec06 .img04 .creditArea .creditLinks{
  bottom: calc(4 * (100vw / 1200));
  left: calc(12 * (100vw / 1200));
}

#sec06 .img01:hover .creditArea .creditLinks,
#sec06 .img02:hover .creditArea .creditLinks,
#sec06 .img03:hover .creditArea .creditLinks,
#sec06 .img04:hover .creditArea .creditLinks{
  pointer-events: auto;
}


#sec06 .img02 .figSliderPC ul.sliderPager{
  display: none;
}

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

#sec07 .img01{position: relative;}



#MO240808LOOK #sec07 .img01 .figSlider ul.sliderPager{
  position: absolute;
  width: auto;
  bottom: calc(-60 * (100vw / 1200));
  right: calc(0 * (100vw / 1200));
}


#MO240808LOOK #sec07 .creditArea{
  padding-top: calc(16 * (100vw / 1200));
}

#MO240808LOOK #sec07 .creditLinks > a,
#MO240808LOOK #sec07 .creditLinks > span{
  font-size: calc(13 * (100vw / 1200));
  letter-spacing: 0.06em;
  line-height: 2;
}

#MO240808LOOK #sec07 creditLinks >  a + a,
#MO240808LOOK #sec07 .creditLinks >  span + a,
#MO240808LOOK #sec07 .creditLinks >  span + span,
#MO240808LOOK #sec07 .creditLinks >  a + span,
#MO240808LOOK #sec07 .creditLinks >  br.spView + a,
#MO240808LOOK #sec07 .creditLinks >  br.spView + span{
  margin-left: 0.7em;
}

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

#sec08::after{
  content: '';
  display: block;
  width: 100%;
  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: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}


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

#sec08 .img01{
  order: 2;
  width: 33.3333333333333333333333333333%;
}
#sec08 .img02{
  order: 1;
  width: 33.3333333333333333333333333333%;
}


#sec08 .img03{
  display: block;
  width: 100%;
  position: relative;
}

#MO240808LOOK #sec08 .img03 .figSliderSP .sliderWrapper{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}
#MO240808LOOK #sec08 .img03 .figSliderSP .sliderWrapper .slider{
  width: 33.3333333333333333333333333333%;
}


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

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



#sec08 .img0102:hover .creditArea,
#sec08 .img03:hover .creditArea,
#sec08 .img0506:hover .creditArea{
  opacity: 1;
}


#sec08 .img0102 .creditArea .creditLinks{
  bottom: calc(4 * (100vw / 1200));
  left: calc(15 * (100vw / 1200));
}
#sec08 .img03 .creditArea .creditLinks{
  width: auto;
  bottom: calc(4 * (100vw / 1200));
  right: calc(15 * (100vw / 1200));
  left: auto;
}
#sec08 .img0506 .creditArea .creditLinks{
  bottom: calc(4 * (100vw / 1200));
  left: calc(15 * (100vw / 1200));
}

#sec08 .img0102:hover .creditArea .creditLinks,
#sec08 .img03:hover .creditArea .creditLinks,
#sec08 .img0506:hover .creditArea .creditLinks{
  pointer-events: auto;
}

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

#sec09 .wrapper{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

#sec09 .img01,
#sec09 .img02{
  width: calc(450 * (100vw / 1200));
  position: relative;
}

#MO240808LOOK #sec09 .img02 .sliderPager{
  width: auto;
  padding: 0;
  position: absolute;
  right: 0;
  bottom: calc(-60 * (100vw / 1200));
}

#sec09 .creditArea{
  width: 100%;
  text-align: left;
}



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

#sec10::after{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: #015442;
  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;
}

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


#sec10 .wrapper{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: calc(130 * (100vw / 1200)) 0;
}


#sec10 .img0102{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(100% - 33.3333333333333333333333333333%);
  order: 1;
  position: relative;
}


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

#sec10 .img03{
  width: 33.3333333333333333333333333333%;
  order: 2;
  position: relative;
}

#sec10 .text02{
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 33.3333333333333333333333333333%;
  padding-bottom: calc(24 * (100vw / 1200));
  order: 4;
}

#sec10 .text02 > p{
  text-transform: uppercase;
  font-size: calc(17 * (100vw / 1200));
  letter-spacing: 0.04em;
  line-height: 1.852941176470588;
  color: #231815;
  text-align: center;
}



#sec10 .img0405{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(100% - 33.3333333333333333333333333333%);
  order: 3;
  position: relative;
}

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



#sec10 .img0102:hover .creditArea,
#sec10 .img03:hover .creditArea,
#sec10 .img0405:hover .creditArea{
  opacity: 1;
}

#sec10 .img0102 .creditArea .creditLinks,
#sec10 .img03 .creditArea .creditLinks,
#sec10 .img0405 .creditArea .creditLinks{
  bottom: calc(4 * (100vw / 1200));
  left: calc(15 * (100vw / 1200));
}

#sec10 .img0102:hover .creditArea .creditLinks,
#sec10 .img03:hover .creditArea .creditLinks,
#sec10 .img0405:hover .creditArea .creditLinks{
  pointer-events: auto;
}



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

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

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

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



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


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

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


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

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

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



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