@charset "utf-8";


#mainVisual{
  width:1000px;
  margin:0 auto 100px;
}

#mainVisual .inner{
  display:flex;
  align-items:stretch;
}


#mainVisual .mvTxt{
  width:300px;
  background-image: -moz-linear-gradient( 64deg, rgb(10,30,58) 0%, rgb(11,43,87) 100%);
  background-image: -webkit-linear-gradient( 64deg, rgb(10,30,58) 0%, rgb(11,43,87) 100%);
  background-image: -ms-linear-gradient( 64deg, rgb(10,30,58) 0%, rgb(11,43,87) 100%);
  display:flex;
  justify-content:center;
  align-items:center;
}

#mainVisual .mvTxt p{
  margin:0;
  color:#fff;
  font-size:16px;
  line-height:2.2;
  writing-mode:vertical-rl;
  text-orientation:upright;
  letter-spacing:0.15em;
}

#mainVisual .mvTxt p span{
  font-size:30px;
 position: relative;
  top: -0.5em;
}

#mainVisual .mvSlide{
  flex:1;
}

#mainVisual .mvSlide ul{
  margin:0;
  padding:0;
  list-style:none;
}

#mainVisual .mvSlide li{
  margin:0;
}

#mainVisual .mvSlide img{
  display:block;
  width:100%;
  height:auto;
}

body.OTHER #mainVisual >.inner{ display: block; position: relative;}
body.OTHER #mainVisual .mvSlide{ width: 70%;}
body.OTHER #mainVisual .mvTxt {width: auto;padding: 20px 50px; position: absolute; bottom: 60px;right:0; z-index: 2; }
body.OTHER #mainVisual .mvTxt p{ font-size:16px; line-height:2.2em; writing-mode:horizontal-tb; text-orientation:upright;text-align: center;}
body.OTHER #mainVisual .mvTxt p span {top: 0;}



@media(max-width:750px){

#mainVisual{
  width:auto;
  margin:0 auto 0;
}
#mainVisual .mvTxt{
  width:38%;
}

#mainVisual .mvTxt p{
  margin:0;
  color:#fff;
  font-size:20px;
  line-height:2.2;
  writing-mode:vertical-rl;
  text-orientation:upright;
  letter-spacing:0.15em;
}

#mainVisual .mvTxt p span{
  font-size:34px;
 position: relative;
  top: -0.5em;
}


body.OTHER #mainVisual .mvSlide li img.sp{ display: none;}
body.OTHER #mainVisual .mvSlide li img.pc{ display: block !important;}

body.OTHER #mainVisual >.inner{ display: block; position: relative;}
body.OTHER #mainVisual .mvSlide{ width: 100%;}
body.OTHER #mainVisual .mvTxt {width: auto;padding: 50px 0; position: relative; top: 0;right:0; z-index: 2; }
body.OTHER #mainVisual .mvTxt p{ font-size:16px; line-height:2.2; writing-mode:horizontal-tb; text-orientation:upright;text-align: center;}
body.OTHER #mainVisual .mvTxt p span {top: 0;}

}





#movieArea{}
#movieArea ul.movieSlide{
    width: auto;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 0;
    row-gap: 0px;
}
#movieArea ul.movieSlide li{}
#movieArea ul.movieSlide li a{ width: auto; overflow: hidden;}
#movieArea ul.movieSlide li video{   
display:block;
  width:100%;
  height:auto;
  object-fit:cover;}

.mvSlide ul{position:relative;margin:0;padding:0;list-style:none;overflow:hidden;}
.mvSlide li{position:absolute;left:0;top:0;width:100%;opacity:0;transition:opacity 1.2s ease;z-index:1;}
.mvSlide li.active{position:relative;opacity:1;z-index:2;}
.mvSlide li img{display:block;width:100%;height:auto;}


.snsLinks{ background: #162236;padding: 40px 0;}
.snsLinks{ text-align: center;}
.snsLinks li{ display: inline-block;}
.snsLinks img{width:50px;}


@media(max-width:750px){
.snsLinks img{width:80px;}


}