@charset 'utf-8';

body{ background-color: #000; }

.mt0{ margin-top: 0 !important;  }
.mb30{ margin-bottom: 30px !important;}
.mb20{ margin-bottom: 20px !important;}


.head-type-main1{ text-align: center; margin-bottom: 75px;  }
.head-type-main1 .h_1{font-size: 70px;font-weight: 900;line-height: 1;}
.head-type-main1 .t_1{font-size: 20px;font-weight: 600;line-height: 1.4;margin-top: 10px;}

.pagination-type1{ margin-top: 60px; text-align: center;}
.pagination-type1 .swiper-pagination-bullet{ background-color: #000; width: 10px; height: 10px; margin: 0 7px; }
.pagination-type1.white{margin-top: 30px;}
.pagination-type1.white .swiper-pagination-bullet{ background-color: #fff;}

.cont-main1{ display: flex; margin-top: 30px; }
.cont-main1 .ico{ min-width:40px; width: 40px; display: block; }
.cont-main1 .txt{ margin-left: 27px; display: block; flex-grow: 1; }
.cont-main1 .t_1{ font-size: 19px; line-height: 200; line-height: 1.4; display: block; }
.cont-main1 .date{ font-size: 13px; margin-top: 15px; line-height: 1; display: block; }

@media screen and (max-width: 840px){

  
  .inr-c{ max-width: none; margin: 0 4.6vw;  }

  .head-type-main1{ text-align: center; margin-bottom: 8vw;  }
  .head-type-main1 .h_1{ font-size: 11vw; }
  .head-type-main1 .t_1{ font-size: 5vw; margin-top: 3vw; }

  .pagination-type1{ margin-top: 60px; text-align: center;}
  .pagination-type1 .swiper-pagination-bullet{ background-color: #000; width: 10px; height: 10px; margin: 0 7px; }
  .pagination-type1.white{margin-top: 30px;}
  .pagination-type1.white .swiper-pagination-bullet{ background-color: #fff;}

  .cont-main1{ display: flex; margin-top: 7vw; }
  .cont-main1 .ico{ min-width:8vw; width: 8vw; display: block; }
  .cont-main1 .txt{ margin-left: 5vw; display: block; flex-grow: 1; }
  .cont-main1 .t_1{ font-size: 4vw; overflow: hidden;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient:vertical; word-break:break-all;}
  .cont-main1 .date{ font-size: 3vw; margin-top: 5vw; }

}


#site-header .mid .logo{
  background-image: url(../images/common/h_logo.png);
}
.fake_header{display: none;}
@media screen and (max-width: 840px){
   #site-header .mid .logo{
        background-image: url(../images/common/h_logo_mo.png);
        width: 7.2vw;
        height: 8.4vw;
        display: block;
        background-size:contain;
        background-repeat:no-repeat;
    }
}

.wrap-kv-video-top{ position: relative; height: 100vh; min-height: 600px;  background-color: #fff; display: flex; align-items: center; overflow: hidden; }

.wrap-kv-video-top > .bg-video:after{ position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); content:""; }
.wrap-kv-video-top > .bg-video .video-background:after{ background-color: rgba(0, 0, 0, 0.7); }
.wrap-kv-video-top > .bg-video > *{}

#spot.main .cont{position: absolute;left: 5%;bottom: 100px;z-index: 1;color: #fff;z-index: 5;mix-blend-mode: difference;text-decoration: none;-moz-transform: scale(1);-webkit-transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1);transform: scale(1);transform-origin: top left;}
#spot.main .cont .h_1{
  font-size: 5.7vw;
  line-height: 0.8;
  font-weight: 800;
  mix-blend-mode: difference;
  white-space:nowrap;
}
#spot.main .cont .t_1{margin-top: 1.8vw;font-size: 1.9vw;line-height: 1;font-weight: 300;}
#spot.main .cont:hover .h_1{ width: 0;  }

@media screen and (min-width: 2560px) {
  #spot.main .cont .h_1 { font-size: 140px; }
  #spot.main .cont .t_1{margin-top: 50px;font-size: 50px;}
}

@media screen and (max-width: 840px){
  #spot.main .cont{ left: 4.6vw; bottom: auto; top: 50%;}
  #spot.main .cont .h_1{ font-size: 8vw; line-height: 1.05; }
  #spot.main .cont .t_1{margin-top: 3vw;font-size: 4vw; max-width:70vw; line-height:1.4; }
}



.section_2{ position: relative;  background-color: #000; height:100vh;  overflow: hidden; }
.section_2 .inner_section{}
.section_2 .bg1{position: absolute;right: -2vw;top: -6vw;width: 40vw;z-index: 1;opacity: 0.3; display: none;}
.section_2 .head{ position: absolute; left: 0; top: 0; width: 100%; height: 100vh; z-index: 5; display: flex; align-items: center; justify-content: center;  }
.section_2 .head > .inner{ text-align: center; }

.section_2 .txt{position: absolute;left: 0;bottom: 4vw;text-align: center;width: 100%;} 
.section_2 .txt p{ font-size: 42px; font-size: 2.2vw; font-weight: 200;line-height: 1.2; }

.section_2_2{ position: relative;  background-color: #000; min-height:100vh;  overflow: hidden; }
.section_2_2 .inner_section{}
.section_2_2 .bg1{position: absolute;left: -2vw;top: -6vw;width: 40vw;z-index: 1;opacity: 0.2;}
.section_2_2 .head{ position: absolute; left: 0; top: 0; width: 100%; height: 100vh; z-index: 5; display: flex; align-items: center; justify-content: center;  }
.section_2_2 .head > .inner{ text-align: center; }

@media screen and (max-width: 840px){

  .section_2,
  .section_2 .inner_section{ height:200vw; }
  .section_2 .bg1{position: absolute;right: -2vw;top: -6vw;width: 60vw;z-index: 1;opacity: 0.3;}
  .section_2 .head{ position: absolute; left: 0; top: 0; width: 100%; height: 200vw; z-index: 5; display: flex; align-items: center; justify-content: center;  }
  .section_2 .head > .inner{ text-align: center; }

  .section_2 .txt{position: absolute;left: 0; bottom: 22vw;text-align: center;width: 100%; line-height: 1.6;}  
  .section_2 .txt p{ font-size: 4vw; }
  .section_2 .cover_mo{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; }

  .section_2_2{ position: relative;  background-color: #000; min-height:auto;  overflow: hidden; }
  .section_2_2 .inner_section{
    height: 170vw;
  }
  .section_2_2 .bg1{position: absolute;left: -2vw;top: -6vw;width: 48vw;z-index: 1;opacity: 0;}
  .section_2_2 .head{ height: 150vw; z-index: 5; display: flex; align-items: center; justify-content: center;  }
  .section_2_2 .head > .inner{ text-align: center; }
}




.txt-ani-type1{font-size: 110px;position: relative;display: inline-flex;line-height: 0.85;  text-align: left; font-size: 6.4vw;}
.txt-ani-type1 > p{  position: relative; z-index: 0; white-space:nowrap; font-weight: 800; color: #4e4e4e;  opacity: 0.5; text-transform:uppercase;}
.txt-ani-type1 .mot{position: absolute; left: 0; top: 0; z-index: 1; width: 0; color: #fff; overflow: hidden; opacity: 1;
  transition: all 500ms cubic-bezier(0.865, -0.025, 0.405, 0.990); /* custom */
  transition-timing-function: cubic-bezier(0.865, -0.025, 0.405, 0.990); /* custom */
}
.txt-ani-type1.on .mot{ width: 100%;  }


.txt-ani-type2{font-size: 110px;position: relative;display: inline-flex;line-height: 1;  text-align: left;}
.txt-ani-type2 > p{  position: relative; z-index: 0; white-space:nowrap; font-weight: 800; color: #4e4e4e;  opacity: 0.5; text-transform:uppercase;}
.txt-ani-type2 .mot{position: absolute; left: 0; top: 0; z-index: 1; width: 0; color: #fff; overflow: hidden; opacity: 1;
  transition: all 500ms cubic-bezier(0.865, -0.025, 0.405, 0.990); /* custom */
  transition-timing-function: cubic-bezier(0.865, -0.025, 0.405, 0.990); /* custom */
}
.txt-ani-type2.on .mot{ width: 100%;  }


.section_2_2 .txt{position: absolute;left: 0;bottom: 4vw;text-align: center;width: 100%; z-index: 10;}  
.section_2_2 .txt p{font-size: 3.6vw;font-size: 6vh;font-weight: 300;line-height: 1.1;}

@media screen and (max-width: 840px){
  .section_2_2 .txt{position: absolute;left: 0;bottom: 30vw;} 
  .section_2_2 .txt p{font-size: 4.8vw;}
}


.pin-wrap-list1{
  width:100vw;
  height:100vh;
  display:flex;
  justify-content: center;
  align-items: center;
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  -o-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  position: relative; z-index: 5;
}
.pin-wrap-list1 > .inner{ display:flex; margin-top: -12vw; }
.pin-wrap-list1 .item{ text-align:center; min-width:22vw; }
.pin-wrap-list1 .item .thumb{ margin-bottom:1px;  }
.pin-wrap-list1 .item .thumb img{ height:17vw; }
.pin-wrap-list1 .item .cont{ color:#fff; font-size:19px; font-weight: 600; text-transform: uppercase; }
.pin-wrap-list1 .item .cont .mnu-no{ display: none; }

@media screen and (max-width: 840px){
  .pin-wrap-list1{
    width:100vw;
    height: auto;
    display:flex;
    justify-content: center;
    align-items: center;
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    position: relative;
    z-index: 5;
    flex-wrap: wrap;
  }
  .pin-wrap-list1 > .inner{display:flex;flex-wrap: wrap;margin-top: 0;width: 90vw;}
  .pin-wrap-list1 .item{text-align:center;min-width:auto;width: 45vw;text-align:center;margin-top: 17vw;}
  .pin-wrap-list1 .item .thumb{ margin-bottom:1.5vw;  }
  .pin-wrap-list1 .item .thumb img{height: 28vw;}
  .pin-wrap-list1 .item .cont{color:#fff;font-size: 4vw;font-weight: 600;text-transform: uppercase;margin-top: 4vw;}
}

.section2_3{height: 63vw;background-color: #000;overflow: hidden;}

/*.section2_3 > .inner{height: 100vh;margin-top: -25.5vh;-moz-transform: scale(10);-webkit-transform: scale(10);-o-transform: scale(10);-ms-transform: scale(10);transform: scale(2.6);}*/
.section2_3 > .inner{height: 100vh;margin-top: -8vh;}
.section2_3 > .inner .col{ display: flex; }
.section2_3 > .inner .col{}
.section2_3 > .inner .col.n1{ margin-left: -50vw; }
.section2_3 > .inner .col.n2{margin-left: -11.1vw;}
.section2_3 > .inner .col.n3{margin-left: -48.1vw;}
.section2_3 > .inner .movie,
.section2_3 > .inner .img{min-width: 40vw;min-height: 35.5vh;position: relative;background-repeat: no-repeat;background-size: cover;overflow: hidden;margin-right: 2vh;margin-bottom: 2vh;}
.section2_3 > .inner .movie:after{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: 2;  content:"";}

.section2_3 > .inner .img.n1_1{ background-image: url(https://d216tbzc6vszqx.cloudfront.net/html/xo/resources/images/main/img3_1.jpg); }
.section2_3 > .inner .img.n1_2{ background-image: url(https://d216tbzc6vszqx.cloudfront.net/html/xo/resources/images/main/img3_2.jpg); }
.section2_3 > .inner .img.n1_3{ background-image: url(https://d216tbzc6vszqx.cloudfront.net/html/xo/resources/images/main/img3_1.jpg); }
.section2_3 > .inner .img.n1_4{ background-image: url(https://d216tbzc6vszqx.cloudfront.net/html/xo/resources/images/main/img3_3.jpg); }

.section2_3 > .inner .img.n2_1{ background-image: url(https://d216tbzc6vszqx.cloudfront.net/html/xo/resources/images/main/img3_9.jpg); }
.section2_3 > .inner .img.n2_2{ background-image: url(https://d216tbzc6vszqx.cloudfront.net/html/xo/resources/images/main/img3_10.jpg); }

.section2_3 > .inner .img.n3_1{ background-image: url(https://d216tbzc6vszqx.cloudfront.net/html/xo/resources/images/main/img3_5.jpg); }
.section2_3 > .inner .img.n3_2{ background-image: url(https://d216tbzc6vszqx.cloudfront.net/html/xo/resources/images/main/img3_8.jpg); }
.section2_3 > .inner .img.n3_3{ background-image: url(https://d216tbzc6vszqx.cloudfront.net/html/xo/resources/images/main/img3_7.jpg); }
.section2_3 > .inner .img.n3_4{ background-image: url(https://d216tbzc6vszqx.cloudfront.net/html/xo/resources/images/main/img3_6.jpg); }

.section2_3 .cont{position: absolute;left: 0;top: 50%;width: 100%;color: #fff;z-index: 5;text-align: center;mix-blend-mode:difference;margin-top: -10vw;}
.section2_3 .cont p{ 
  opacity: 0;
  -moz-transform: translateY(90px);
  -webkit-transform: translateY(90px);
  -o-transform: translateY(90px);
  -ms-transform: translateY(90px);
  transform: translateY(90px);
  transition: all 500ms cubic-bezier(0.705, 0.180, 0.230, 0.900); /* custom */
  transition-timing-function: cubic-bezier(0.705, 0.180, 0.230, 0.900); /* custom */
}


.section2_3 .cont .inner_cont{}
.section2_3 .cont .h_1{
  font-size: 120px;
  font-weight: 900;
  line-height: 1;
    /*  opacity: 0;
    -moz-transform: translateY(40px);
    -webkit-transform: translateY(40px);
    -o-transform: translateY(40px);
    -ms-transform: translateY(40px);
    transform: translateY(40px);*/
    font-size: 6.2vw;
  }
  .section2_3 .cont .t_1{
    font-size: 31px;
    font-weight: 600;
    margin-top: 0;
  }
  .section2_3 .cont .t_2{
    font-size: 30px;
    line-height: 1.2;
    margin-top: 30px;
    font-weight:200;
  }

  .section2_3 .cont.active p{ 
    opacity: 1;
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);

  }

  .section2_3 .cont.active p:nth-child(1){  transition-delay: 0ms;}
  .section2_3 .cont.active p:nth-child(2){  transition-delay: 50ms;}
  .section2_3 .cont.active p:nth-child(3){  transition-delay: 100ms;}


  @media screen and (max-width: 840px){
    .section2_3{height: 100vh;}
    .section2_3 > .inner{height: 100vh;margin-top: 0;}
    .section2_3 > .inner .col{ display: flex; }
    .section2_3 > .inner .col{ width: 270vw; }
    .section2_3 > .inner .col.n1{margin-left: -50vw;}
    .section2_3 > .inner .col.n2{margin-left: -50.1vw;}
    .section2_3 > .inner .col.n3{margin-left: -48.1vw;}
    .section2_3 > .inner .movie,
    .section2_3 > .inner .img{min-width: auto;min-height: auto; width:40vw; height: 35.5vh; position: relative;background-repeat: no-repeat;background-size: cover;overflow: hidden;margin-right: 2vh;margin-bottom: 2vh;}
    .section2_3 > .inner .movie:after{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: 2;  content:"";}
    .section2_3 > .inner .movie{ width:100%; height:100%; position:absolute; left:0; top:0; }
    .section2_3 > .inner .img.n1_1,
    .section2_3 > .inner .img.n1_2,
    .section2_3 > .inner .img.n1_3,
    .section2_3 > .inner .img.n1_4{ width:120vw;  height:20vh; }

    .section2_3 > .inner .col.n2 > *{width:120vw;height: 53vh;position: relative;}

    .section2_3 > .inner .img.n3_1,
    .section2_3 > .inner .img.n3_2,
    .section2_3 > .inner .img.n3_3,
    .section2_3 > .inner .img.n3_4{ width:120vw; height:20vh; }
    .section2_3 .cont{margin-top: -10vw;}
    .section2_3 .cont .inner_cont{}
    .section2_3 .cont .h_1{font-size: 13.2vw;}
    .section2_3 .cont .t_1{font-size: 7vw;margin-top: 4vw;line-height: 1;}
    .section2_3 .cont .t_2{font-size:4vw;margin-top: 6vw;max-width: 80vw;margin-left: 10vw;line-height: 1.4;}
    .section2_3 .cont .t_2 br{ display:none; }



  }


/*.group_pin_sec3{ height: 100vh; overflow: hidden; }*/

.section_3{background-color: #fff;position: relative;z-index: 2;padding-bottom: 100px; overflow: hidden;}

.section_4{ min-height: 100vh; background-color: #111; position: relative; z-index: 2; overflow: hidden;  }

.section_5{ min-height: 100vh; background-color: #000; position: relative; z-index: 3; overflow: hidden; }

.section_6{ padding: 110px 0; background-color: #fff; overflow: hidden; }

.section_7{ height: 100vh; background-color: #111; overflow: hidden;  }

@media screen and (max-width: 840px){
  .section_3{ padding-bottom: 16vw;}
  .section_5 > .inner{position:relative; padding-top: 30vw; min-height: 260vw;}

  .section_6{ padding: 14vw 0; min-height: auto; height: auto; }
}



.head-type2{ position: absolute; left: 0; top: 120px; width: 100%; color: #fff;  text-align: center; color: #fff; text-align: center;  z-index: 6; mix-blend-mode: difference;}
.head-type2 .h_1 p{font-size: 40px;font-weight: 600;text-align: center;}
.head-type2 .h_2 { margin-top:20px; }
.head-type2 .h_2 p{margin-top: 0;font-size: 70px;font-weight: 800;text-align: center;line-height: 1;}
.head-type2 .t_1{font-size:17px;margin-top: 24px;line-height: 1.4;font-weight:200;}

.section_5 .wrap_swiper_type3{ display: inline-block; width: 1200px; }

@media screen and (max-width: 840px){
  .section_5{ overflow:visible;}
  .section_5 .wrap_swiper_type3{ display: inline-block; width: 100%; }

  .head-type2{top: 20vw;left:4.6vw;width: 90.8vw;position: sticky;padding-bottom: 20vw;mix-blend-mode: inherit;}
  .head-type2 .h_1 p{font-size: 5vw;}
  .head-type2 .h_2 { margin-top:8vw; }
  .head-type2 .h_2 p{font-size: 8vw;line-height:1.3;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient:vertical;}
  .head-type2 .t_1{font-size:3.6vw;margin-top: 7vw;padding:0 10vw;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient:vertical;}
  .head-type2 .t_1 br{ display:none; }
}


.js-top-mo{ 
  opacity: 0; 
  -moz-transform: translateX(0px) translateY(30px);
  -webkit-transform: translateX(0px) translateY(30px);
  -o-transform: translateX(0px) translateY(30px);
  -ms-transform: translateX(0px) translateY(30px);
  transform: translateX(0px) translateY(30px);
  transition: all 500ms cubic-bezier(0.690, 0.010, 0.450, 0.990); /* custom */
  transition-timing-function: cubic-bezier(0.690, 0.010, 0.450, 0.990); /* custom */
}
.js-top-mo.on{ 
  opacity: 1; 
  -moz-transform: translateX(0px) translateY(0);
  -webkit-transform: translateX(0px) translateY(0);
  -o-transform: translateX(0px) translateY(0);
  -ms-transform: translateX(0px) translateY(0);
  transform: translateX(0px) translateY(0);
}


.lst-img-sponsored{ padding: 100px 0; border-top: 1px solid transparent; }
.lst-img-sponsored .item{ text-align: right; }
.lst-img-sponsored .item .pic{ display: inline-flex; overflow: hidden; }
.lst-img-sponsored .item .pic img{ 
  -moz-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  -o-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
}
.lst-img-sponsored .item:nth-child(odd){ text-align: left; }

.lst-img-sponsored .item.n1{margin-top: 0;margin-left: 5vw;}
.lst-img-sponsored .item.n1 img{ height:30vw; }
.lst-img-sponsored .item.n2{margin-top: -20vw;margin-right: 5vw;}
.lst-img-sponsored .item.n2 img{height: 31vw;}
.lst-img-sponsored .item.n3{margin-top: -10vw;margin-left: 10vw;}
.lst-img-sponsored .item.n3 img{height: 32vw;}
.lst-img-sponsored .item.n4{ margin-top: -9vw; margin-right: 0; }
.lst-img-sponsored .item.n4 img{height: 34vw;}

@media screen and (max-width: 840px){
  .lst-img-sponsored{ padding: 20vw 0;position: absolute;left: 0;top: 0;width: 100%; opacity: 0.6; }
  .lst-img-sponsored .item{ text-align: right; }
  .lst-img-sponsored .item .pic{ display: inline-flex; overflow: hidden; }
  .lst-img-sponsored .item .pic img{ 
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
  }
  .lst-img-sponsored .item:nth-child(odd){ text-align: left; }
  
    .lst-img-sponsored .item.n1{margin-top: 8vw;margin-left: 5vw;}
  .lst-img-sponsored .item.n1 img{height: auto;width: 52vw;}
  .lst-img-sponsored .item.n2{margin-top: 6vw;margin-right: 5vw;}
  .lst-img-sponsored .item.n2 img{height: auto;width: 43vw;}
  .lst-img-sponsored .item.n3{margin-top: 0;margin-left: 10vw;}
  .lst-img-sponsored .item.n3 img{height: auto;width: 34vw;}
  .lst-img-sponsored .item.n4{margin-top: -20px;margin-right: 0;}
  .lst-img-sponsored .item.n4 img{height: auto; width:50vw; }  
}



.navi_main{width: 0; position: fixed; right: 0; top: 0; height: 100vh; z-index: 20;}
.navi_main > .inner{  position: relative; right: 0;top: 0;background-color: rgba(0, 0, 0, 0.9);height: 100vh;z-index: 1;display: flex;justify-content: center;align-items: center;color: #fff;width: 290px; 
  transition: all 300ms cubic-bezier(0.865, -0.025, 0.405, 0.990); /* custom */
  transition-timing-function: cubic-bezier(0.865, -0.025, 0.405, 0.990); /* custom */
}

.navi_main .btn_open{ 
  position: absolute; left: -50px; top: 50%; color:#ffd42b; font-size:40px; 
  transition: all 300ms cubic-bezier(0.865, -0.025, 0.405, 0.990); /* custom */
  transition-timing-function: cubic-bezier(0.865, -0.025, 0.405, 0.990); /* custom */
}
.navi_main .btn_open:hover{
  left: -55px;
  opacity:0.8;
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

.navi_main.active > .inner{ right: 290px; }
.navi_main.active .btn_open{ 
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}


.navi_main .inner{
  padding: 40px 40px 40px 50px; box-sizing: border-box;
}
.navi_main .inner ul{}
.navi_main .inner ul li{ margin-top:20px; }
.navi_main .inner ul li a{ 
  font-size:14px; font-weight:600; color:#fff; text-transform:uppercase; opacity:0.5; position:relative; padding-left:20px; display:block; 
  -webkit-transition: all 300ms ease-in;
  -moz-transition: all 300ms ease-in;
  -ms-transition: all 300ms ease-in;
  -o-transition: all 300ms ease-in;
  transition: all 300ms ease-in;
}
.navi_main .inner ul li a i{ 
  position:absolute; left:-10px; top:0; font-size:20px; color:#ffd42b; opacity:0; 
  -webkit-transition: all 300ms ease-in;
  -moz-transition: all 300ms ease-in;
  -ms-transition: all 300ms ease-in;
  -o-transition: all 300ms ease-in;
  transition: all 300ms ease-in;
}

.navi_main .inner ul li.on a{ opacity:1;}
.navi_main .inner ul li.on a i{ opacity:1; left:0; }

@media (hover: hover) {
  .navi_main .inner ul li a:hover{ opacity:1;}
  .navi_main .inner ul li a:hover i{ opacity:1; left:0; }
}





@media screen and (max-width: 840px){
  .navi_main{ display: none; }
}


.section_4 > .inner{  position: relative; height: 100vh;  }
.section_4 .cont{position: absolute;left: calc(50% - 450px);bottom: 19vh;text-align: center;width: 100%;z-index: 10;width: 900px; mix-blend-mode: difference;}
.section_4 .cont .h_2{margin-top: 20px;font-size: 30px;color: #fff;} .section_4 .cont .logo_exo img{ width:30vw; }
.section_4 .cont .h_2 p{ text-transform:none;font-weight: 600; }
.section_4 .cont .t_1{font-size:17px; font-weight:200; color:#fff;line-height: 1.3;margin-top: 25px;}

@media screen and (max-width: 840px){
  .section_4 > .inner{  height: 100vh;  }
  .section_4 .cont{position: absolute;left: 8vw;bottom: 19vh;text-align: center;width: 100%;z-index: 5;width: 84vw;mix-blend-mode: difference;}
  .section_4 .cont .h_2{margin-top: 8vw;font-size: 8.6vw;color: #fff;line-height: 1;} 
  .section_4 .cont .h_2 p{text-transform: uppercase;}
  .section_4 .cont .logo_exo img{width: 70vw;}
  .section_4 .cont .t_1{font-size: 4vw;margin-top: 8vw;line-height: 1.6;}
}



.section_7 > .inner{  position: relative; height: 100vh;  }
.section_7 .cont{position: absolute;left: calc(50% - 450px);bottom: 20vh;text-align: center;width: 100%;z-index: 10;width: 900px;}
.section_7 .cont .txt-ani-type1 p{ font-size:4.2vw; line-height:0.95;  }
.section_7 .cont .h_1{ font-size:70px; color:#fff; line-height: 1; font-weight: 800; }
.section_7 .cont .t_1{font-size:17px;font-size: 0.95vw;color:#fff;line-height: 1.5;margin-top: 25px;}

@media screen and (max-width: 840px){
  .section_7 > .inner{  position: relative; height: 100vh;  }
  .section_7 .cont{ position: absolute; left: 5vw; top: 50%; bottom: auto; text-align: center; z-index: 10; width: 90vw; }
  .section_7 .cont .h_1{ font-size: 9vw; }
  .section_7 .cont .t_1{ font-size:3.5vw; margin-top: 5vw; }
}

.btns-type1{ margin-top: 30px;  }
.btns-type1 > a{ margin: 0 5px; font-size: 15px; font-weight: 400; }
.btn-type1{ min-width: 190px; height:50px; border: 1px solid rgba(255,255,255,0.5); display: inline-flex; align-items: center; justify-content: center;  color: #fff; text-transform: uppercase;  
  transition: all 300ms cubic-bezier(0.880, 0.005, 0.105, 1.000); /* custom */
  transition-timing-function: cubic-bezier(0.880, 0.005, 0.105, 1.000); /* custom */
}
@media (hover: hover) {
  .btn-type1:hover{ background-color: #fff; color: #000; border-color: #000; font-weight: 600; }
}

@media screen and (max-width: 840px){
  .btns-type1{margin-top: 12vw;}
  .btns-type1 > a{ margin: 0 1vw; font-size: 3vw;}
  .btn-type1{ min-width: 35vw; height:12vw;}
}



#canvas{ position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 5;  }


.wrap-lifestyle{
}
.wrap-lifestyle .bg-lifestyle .headline{font-size: 60px;color: #fff;position: absolute;left: 0;top: 200px;text-align: center;width: 100%;font-weight: var(--fw-m);text-transform: uppercase;z-index: 2;line-height: 1.2; pointer-events: none;}
.wrap-lifestyle .bg-lifestyle{
  background: #000;
  height: 50vh;
  min-height: 540px;
  position: relative;
  max-height: 710px;
}
.wrap-lifestyle .bg-lifestyle .item{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0;  }
.wrap-lifestyle .bg-lifestyle .item:after{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; content:""; background-color: rgba(0, 0, 0, 0.5);  }
.wrap-lifestyle .bg-lifestyle .item .bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; background-size:cover; }

.wrap-lifestyle .bg-lifestyle .item{
 opacity: 0; 
 transition: all 500ms cubic-bezier(0.850, 0.020, 0.170, 0.975); /* custom */

 transition-timing-function: cubic-bezier(0.850, 0.020, 0.170, 0.975); /* custom */
}
.wrap-lifestyle .bg-lifestyle .item.on{ opacity: 1; }

@media screen and (max-width: 840px){
  .slider.wrap_swiper_lifestyle .item > a{ display: block; }
  .link_lifestyle_all.on{position: absolute;left: 0;top: 0;width: 100%;height: 64vw;background: transparent; z-index: 5;}
  .wrap-lifestyle .bg-lifestyle .headline{font-size: 4.4vw;left: 8vw;top: 13vw;width: 84vw;}
  .wrap-lifestyle .bg-lifestyle .headline br{ display:none; }
  .wrap-lifestyle .bg-lifestyle{height: 90vw;min-height: auto;position: relative;max-height: none;}
  .wrap-lifestyle .bg-lifestyle .item{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0;  }
  .wrap-lifestyle .bg-lifestyle .item:after{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; content:""; background-color: rgba(0, 0, 0, 0.5);  }
  .wrap-lifestyle .bg-lifestyle .item .bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; }

  
}






.wrap_swiper_lifestyle{
  margin-top: -170px;
}
.wrap_swiper_lifestyle .swiper-wrapper{}
.wrap_swiper_lifestyle .swiper-slide{
  text-align: center;
}
.wrap_swiper_lifestyle .swiper-slide img{ max-width: 347px;  }
.wrap_swiper_lifestyle .pagination-type1{margin-top: 100px;text-align: center;padding-bottom: 130px;}
.wrap_swiper_lifestyle .pagination-type1 .swiper-pagination-bullet{background-color: transparent;width: auto;height: auto;margin: 0 43px;font-size: 16px;font-weight: 600;color: #000;text-transform: uppercase;opacity:1;position: relative;text-align: center;display: inline-block;}
.wrap_swiper_lifestyle .pagination-type1 .swiper-pagination-bullet b{ font-weight: var(--fw-b); position: relative; z-index: 1; }
.wrap_swiper_lifestyle .pagination-type1 .swiper-pagination-bullet:after{
  content:"";
  width: 160px;
  height: 160px;
  background:#000;
  display: block;
  border-radius: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  -moz-transform: scale(0)  translateX(-50%) translateY(-50%);
  -webkit-transform: scale(0)  translateX(-50%) translateY(-50%);
  -o-transform: scale(0)  translateX(-50%) translateY(-50%);
  -ms-transform: scale(0)  translateX(-50%) translateY(-50%);
  transform:  scale(0) translateX(-50%) translateY(-50%);
  opacity:0;
  z-index:0;
  transition: all 300ms cubic-bezier(0.850, 0.020, 0.170, 0.975); /* custom */
  transition-timing-function: cubic-bezier(0.850, 0.020, 0.170, 0.975); /* custom */
  transform-origin: 0 0;
}
.wrap_swiper_lifestyle .pagination-type1 .swiper-pagination-bullet-active{color:#fff;}
.wrap_swiper_lifestyle .pagination-type1 .swiper-pagination-bullet-active:after{-moz-transform: scale(1) translateX(-50%) translateY(-50%);-webkit-transform: scale(1) translateX(-50%) translateY(-50%);-o-transform: scale(1) translateX(-50%) translateY(-50%);-ms-transform: scale(1) translateX(-50%) translateY(-50%);transform: scale(1) translateX(-50%) translateY(-50%);opacity:1;transform-origin: 0;CONTAIN-INTRINSIC-BLOCK-SIZE: AUTO 100px;}


@media screen and (max-width: 840px){
  .title_lifestyle_slide{font-size: 10vw;line-height: 1.2;font-weight: var(--fw-eb);text-align: center;text-transform: uppercase;margin-top: 1vw;}
  .title_lifestyle_slide .txt{ display: none;  }
  .title_lifestyle_slide .txt.on{ display: inline-block; }
  .wrap_swiper_lifestyle{ margin-top: -24vw; }
  .wrap_swiper_lifestyle .swiper-slide img{ width:50vw; }
  .wrap_swiper_lifestyle .pagination-type1{margin-top: 10vw;text-align: left;padding-bottom: 0;}
  .wrap_swiper_lifestyle .pagination-type1 .swiper-pagination-bullet{
    display: inline-flex;
    width: 40vw;
    height: 10vw;
    margin: 2vw 5vw;
    font-size: 4vw;
    justify-content: center;
    align-items: center;
    border-radius: 1.4vw;
    overflow: hidden;
  }
  .wrap_swiper_lifestyle .pagination-type1 .swiper-pagination-bullet:after{
    content:"";
    width: 100%;
    height: 100%;
    border-radius: 0;
    position: absolute;
    left:50%;
    top:0;
    -moz-transform: scale(0)  translateX(0) translateY(-50%);
    -webkit-transform: scale(0)  translateX(0) translateY(-50%);
    -o-transform: scale(0)  translateX(0) translateY(-50%);
    -ms-transform: scale(0)  translateX(0) translateY(-50%);
    transform:  scale(0) translateX(0) translateY(-50%);
    opacity:0;
    z-index:0;
    transition: all 300ms cubic-bezier(0.850, 0.020, 0.170, 0.975); /* custom */
    transition-timing-function: cubic-bezier(0.850, 0.020, 0.170, 0.975); /* custom */
    transform-origin: 0 0;
  }
  .wrap_swiper_lifestyle .pagination-type1 .swiper-pagination-bullet-active{color:#fff;}
  .wrap_swiper_lifestyle .pagination-type1 .swiper-pagination-bullet-active:after{ left:0; -moz-transform: scale(1) translateX(0) translateY(0);-webkit-transform: scale(1) translateX(0) translateY(0);-o-transform: scale(1) translateX(0) translateY(0);-ms-transform: scale(1) translateX(0) translateY(0);transform: scale(1) translateX(0) translateY(0);opacity:1;transform-origin: 0;CONTAIN-INTRINSIC-BLOCK-SIZE: AUTO 100px;}
}