@charset "utf-8";





#main{background:#000;}



/* main Visual */
.mainVisual-v{position:relative;  height:100vh; overflow:hidden;}
.mainVisual-v.area2{margin-bottom:50px;}
.mainVisual-v:after{position:absolute; top:0; left:0; width:100%; height:100%; background:#000; content:""; opacity:0.3; z-index:11;}
.mainVisual-v .img{position:absolute;  top:0; left:0; width:100%; height:100%; z-index:10; }
.mainVisual-v .img img{width:100%; height:100%; object-fit:cover; object-position:center;}
.mainVisual-v .in-center{position:absolute;  top:50%; left:0; width:100%;  transform:translateY(-50%); text-align:center; z-index:13;}
.mainVisual-v .item{}
.mainVisual-v .vimeo-area{position:static;}
.mainVisual-v .vimeo-area iframe{min-height:102vh; min-width:180vh;  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:10;}
.mainVisual-v .txt{}
.mainVisual-v .txt h2{font-size:25px; font-weight:500; margin:15px 0; line-height:1.3; color:#fff; }
.mainVisual-v .txt h2 b{font-weight:800; }
.mainVisual-v .txt p{font-size:14px;  color:#fff; }
.mainVisual-v .move {position:absolute;  bottom:50px; left:50%;  margin-left:-15px; text-align:center;  cursor:pointer;  animation:bounce1 1s infinite;  z-index:20;}
.mainVisual-v .move i {font-size:30px; color:#fff; font-weight:100;}

@media all and (min-aspect-ratio:16/9){
  .mainVisual-v .vimeo-area iframe{width:102vw; height:180vw;}
}

@media all and (max-width:1300px){

  @media all and (min-aspect-ratio:16/9){
    .mainVisual-v .vimeo-area iframe{width:220vw; height:120vw;}
  }

  @media all and (max-aspect-ratio:16/9){
    .mainVisual-v .vimeo-area iframe{width:300vh; height:200vh;}
  }

}

@media all and (min-width:768px){
  .mainVisual-v.area2{margin-bottom:100px;}
  .mainVisual-v .txt h2{font-size:80px;  margin:15px 0; }
  .mainVisual-v .txt p{font-size:27px; }
}

@media all and (min-width:1000px){
  .mainVisual-v .txt h2{font-size:50px;}
}





@keyframes bounce1 {
  0%{
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  50% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100%{
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

}








#mainVisual .pc{display:none;}
#mainVisual .mo{display:block;}



#main{}
#main>.in{}
#main .top-title{position:relative;  margin-bottom:30px;  }
#main .top-title h2{font-size:25px; font-weight:600;}
#main .top-title h3{font-size:20px; font-weight:500;}
#main .top-title h4{font-size:17px; font-weight:500;}
#main .top-title p{font-size:13px; color:#666;}
#main .top-title strong{color:var(--c1);}
#main .top-title a.more{font-size:12px; color:#666;}
#main .top-title a.more:hover{color:var(--c1);}
#main .top-title .upper{text-transform:uppercase;}
#main .top-title.center{text-align:center;}
#main .top-title.w{color:#fff;}

#main .top-title.img{}
#main .top-title.img img{max-width:50px;}
#main .top-title.img img:nth-child(1){position:relative; top:10px; right:-10px}
#main .top-title.img img:nth-child(2){position:relative; top:-25px; left:-10px;}


@media all and (min-width:768px){
  #main .top-title{margin-bottom:60px;  }
  #main .top-title h2{font-size:75px;}
  #main .top-title h3{font-size:53px;}
  #main .top-title h4{font-size:29px;}
  #main .top-title p{font-size:16px;}
  #main .top-title a.more{position:absolute; bottom:20px; right:0; font-size:16px;}
  #main .top-title.img img{max-width:100%;}
  #main .top-title.img img:nth-child(1){right:-10px;}
  #main .top-title.img img:nth-child(2){  top:-55px; left:-10px; }
}


.main-section{margin-bottom:50px; padding-left:10px; padding-right:10px; box-sizing:border-box;}
.main-section.full{padding-left:0; padding-right:0;}
.main-section.mb-200{margin-bottom:100px;}
.main-section>.in{}
.main-section .max{max-width:1400px; margin:0 auto;}

@media all and (min-width:768px){
  .main-section{ margin-bottom:100px; padding-left:20px; padding-right:20px;}
  .main-section.mb-200{margin-bottom:200px;}
}





.cardBanner{}
.cardBanner .item{}
.cardBanner .item .img{height:200px;}
.cardBanner .item .img img{width:100%; height:100%; object-fit:cover; object-position:center;  }
.cardBanner .item .txt{box-sizing:border-box; padding:10px; background:#fff;}
.cardBanner .item .txt span{font-size:12px; margin-bottom:5px;}
.cardBanner .item .txt h2{font-size:17px; margin-bottom:15px; font-weight:500;}
.cardBanner .item .txt p{font-size:13px;}

.cardBanner .item.a01 .txt{background:#;}
.cardBanner .item.a02 .txt{background:#efefef;}
.cardBanner .item.a03 .txt{background:#e5e5e5;}
.cardBanner .item.a04 .txt{background:#e5e5e5;}

.cardBanner .item.a05 .txt{background:#cbeffd;}
.cardBanner .item.a06 .txt{background:#57cbfe;}
.cardBanner .item.a07 .txt{background:#15a7f0;}
.cardBanner .item.a08 .txt{background:#1086ce;}

.cardBanner .item.a09 .txt{background:#fccbbc;}
.cardBanner .item.a10 .txt{background:#fa8a65;}
.cardBanner .item.a11 .txt{background:#fa522d;}
.cardBanner .item.a12 .txt{background:#d64822;}

.cardBanner .item.a13 .txt{background:#fff2d5;}
.cardBanner .item.a14 .txt{background:#ffd66a;}
.cardBanner .item.a15 .txt{background:#ffca3c;}

.cardBanner .item.a16 .txt{background:#cad1ee;}
.cardBanner .item.a17 .txt{background:#9daad7;}
.cardBanner .item.a18 .txt{background:#5b6cbc;}
.cardBanner .item.a19 .txt{background:#384ba7;}



@media all and (min-width:768px){
  .cardBanner .item .img{height:280px;}
  .cardBanner .item .txt{  padding:20px;}
  .cardBanner .item .txt span{font-size:14px; margin-bottom:10px;}
  .cardBanner .item .txt h2{font-size:27px; margin-bottom:30px;}
  .cardBanner .item .txt p{font-size:16px;}

}




.main-cont{}
.main-cont .cont{position:relative;}
.main-cont .left{position:absolute;  height:100%; top:0; left:-100px; width:100px; box-sizing:border-box; padding-right:2%;}
.main-cont .left>.in{position:sticky; top:50px;}
.main-cont .left .txt{}
.main-cont .left .txt.w{color:#fff;}
.main-cont .left .txt h3{font-size:15px; font-weight:400; margin-bottom:5px;}
.main-cont .left .txt h2{font-size:25px;}
.main-cont .left .img{}
.main-cont .left .img img{}
.main-cont .cont{width:100%; box-sizing:border-box; padding-left:100px;}
.main-cont .cont .area{position:relative; display:flex; flex-wrap:wrap;}
.main-cont .cont .area + .area{margin-top:30px;}
.main-cont .cont .area .box{width:100%;}
.main-cont .cont .area .box + .box{margin-top:30px;}
.main-cont .cont .area .box .img{width:100%; height:150px; margin-bottom:10px;}
.main-cont .cont .area .box .img img{width:100%; height:100%; object-fit:cover; object-position:center; border-radius:10px;}
.main-cont .cont .area .box .txt{ color:#fff; box-sizing:border-box;}
.main-cont .cont .area .box .txt h2{font-size:17px;; font-weight:500; margin-bottom:5px;}
.main-cont .cont .area .box .txt p{font-size:13px; }

.main-cont .cont .area.txt-1 .box .txt h2{font-size:20px;}
.main-cont .cont .area.txt-1 .box .txt h2 span{display:inline-block; margin-left:5px; font-size:12px; padding:5px 10px; background:#fff; color:#111; border-radius:5px; vertical-align:middle;}
.main-cont .cont .area.txt-1 .box .txt p{}

.main-cont .cont .area.txt-2 .box + .box{margin-top:50px;}
.main-cont .cont .area.txt-2{padding-bottom:100px;}

.main-cont .mCSB_container{overflow:visible;}
.main-cont .mCSB_scrollTools{left:380px; right:auto; opacity:1;}
.main-cont .mCS-rounded.mCSB_scrollTools .mCSB_draggerRail{background:#fff;}
.main-cont .mCSB_scrollTools .mCSB_dragger{min-height:25px;}
.main-cont .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{min-height:25px; background:#fff;}


@media all and (max-width:768px){
  .main-cont .left>.in{top:200px;}
  .main-cont .left .txt{transform:rotate(-90deg); white-space:nowrap; line-height:1;}
  .main-cont .left .img{margin-top:50px;}
  .main-cont .cont .area{padding-bottom:100px;}

}


@media all and (min-width:768px){
  .main-cont .left{left:-450px; width:450px; left:0;}
  .main-cont .left>.in{ top:0;}
  .main-cont .left .txt{}
  .main-cont .left .txt h3{font-size:29px; margin-bottom:10px;}
  .main-cont .left .txt h2{font-size:60px;}
  .main-cont .left .img{margin-top:150px;}
  .main-cont .left .img img{}
  .main-cont .cont{max-height:700px; overflow-y:auto; padding-left:0;}
  .main-cont .cont .area{box-sizing:border-box; padding-left:450px; padding-top:100px; padding-bottom:200px;}
  .main-cont .cont .area + .area{margin-top:0;}
  .main-cont .cont .area .box{display:flex; align-items:center;}
  .main-cont .cont .area .box + .box{margin-top:70px;}
  .main-cont .cont .area .box .img{margin-bottom:0; width:170px; height:170px;}
  .main-cont .cont .area .box .txt{padding-left:30px; width:calc(100% - 170px)}
  .main-cont .cont .area .box .txt h2{font-size:30px; margin-bottom:10px;}
  .main-cont .cont .area .box .txt p{font-size:20px;}

  .main-cont .cont .area.txt-1 .box .txt h2{font-size:50px;}
  .main-cont .cont .area.txt-1 .box .txt h2 span{ font-size:20px; padding:5px 10px;   margin-left:10px; }
  .main-cont .cont .area.txt-1 .box .txt p{}

  .main-cont .cont .area.txt-2 .box + .box{margin-top:150px;}
  .main-cont .cont .area.txt-2{padding-bottom:300px;}

}




.main-board{margin-right:-10px;}
.main-board + .main-board{margin-top:50px;}
.main-board .left{margin-bottom:20px;}
.main-board .left .txt.w{color:#fff;}
.main-board .left .txt h3{font-size:15px; font-weight:400; margin-bottom:5px;}
.main-board .left .txt h2{font-size:25px;}
.main-board .right{}
.main-board .right .swiper{overflow:visible;}
.main-board .right .swiper-container{overflow:hidden;}
.main-board .right .swiper-wrapper{}
.main-board .right .item{max-width:400px;}
.main-board .right .item a{}
.main-board .right .item a img{}
.main-board .swiper{}
.main-board .bottom{position:absolute;  top:-50px; right:10px; text-align:center;}
.main-board .bottom>.in{display:inline-block; position:relative; width:65px; }
.main-board .swiper-pagination{bottom:auto; top:0; color:var(--c1); font-size:14px; height:30px; letter-spacing:0;}
.main-board .swiper-button-prev{left:0; right:auto; top:-4px; margin:0; height:30px; font-size:0; line-height:0; text-indent:-9999px; transition:0.3s;}
.main-board .swiper-button-next{left:auto; right:0; top:-4px; margin:0; height:30px; font-size:0; line-height:0; text-indent:-9999px; transition:0.3s;}
.main-board .swiper-button-prev:hover,
.main-board .swiper-button-next:hover{opacity:0.7;}


@media all and (min-width:768px){
  .main-board{margin-right:-20px; padding-left:calc(((100% - 1400px)/2) + 1px);}
  .main-board + .main-board{margin-top:200px;}
  .main-board .left{margin-bottom:0;}
  .main-board .left .txt h3{font-size:29px; margin-bottom:10px;}
  .main-board .left .txt h2{font-size:60px;}
  .main-board .right{margin-top:-100px; box-sizing:border-box; padding-left:400px;}
  .main-board .bottom{top:auto; right:auto; bottom:40px; left:-400px;}
  .main-board .bottom>.in{width:130px;}
  .main-board .swiper-button-prev,
  .main-board .swiper-button-next{width:55px; height:55px;}
}



.main-05{text-align:center; margin-bottom:0;}
.main-05 .bg{position:relative; }
.main-05 .plane{position:absolute; bottom:-5px; left:50%; transform:translateX(-50%);}
.main-05 .plane-wrap{animation-fill-mode:forwards;}




.main-06{}
.main-06 .cont{}
.main-06 .cont .img{}
.main-06 .cont .txt{box-sizing:border-box; padding:40px 15px;}
.main-06 .cont .txt .logo{margin-bottom:40px; width:300px;}
.main-06 .cont .txt .box{color:#fff;}
.main-06 .cont .txt .box + .box{margin-top:30px;}
.main-06 .cont .txt .box h2{}
.main-06 .cont .txt .box p{margin-bottom:10px;}
.main-06 .cont .txt .box p span{}
.main-06 .cont .txt .box p + p{}



@media all and (min-width:768px){


  .main-06 .cont{display:flex;}
  .main-06 .cont .img{width:645px;}
  .main-06 .cont .txt{display:flex; flex-direction:column; width:calc(100% - 645px); padding:50px 60px;}
  .main-06 .cont .txt .logo{margin-bottom:auto; width:auto;}
  .main-06 .cont .txt .box.r{text-align:right; margin-top:100px;}
  .main-06 .cont .txt .box h2{font-size:25px;}
  .main-06 .cont .txt .box p{font-size:20px; margin-bottom:20px;}
  .main-06 .cont .txt .box p span{}
  .main-06 .cont .txt .box p + p{}



}





.main-07{}
.main-07 .cont{}
.main-07 .item{max-width:350px;}
.main-07 .item .img{margin-bottom:10px;}
.main-07 .item .txt{color:#fff;}
.main-07 .item .txt h2{font-size:15px; margin-bottom:5px;}
.main-07 .item .txt p{font-size:13px; line-height:1.4; margin-bottom:10px;}
.main-07 .item .txt span{font-size:11px; color:#888;}



@media all and (min-width:768px){

  .main-07 .item .img{margin-bottom:20px;}
  .main-07 .item .txt h2{font-size:29px;; margin-bottom:10px;}
  .main-07 .item .txt p{font-size:24px; margin-bottom:30px;}
  .main-07 .item .txt span{font-size:16px; }
}






.main-08 ul{display:flex;}
.main-08 ul li{transition:0.3s;}
.main-08 ul li + li{margin-left:20px;}
.main-08 ul li:hover{opacity:0.6;}

@media all and (min-width:768px){

  .main-08{padding:80px 20px; box-sizing:border-box;  }
  .main-08 ul li + li{margin-left:50px;}

}













































/**/