@charset "utf-8";
/*--基本--*/
:root{
	--font-size:15px;
	--max-width:1200px;
	--color: #000;/*文字色*/
	--color-hover: #FF008D;/*マウスオーバー時の文字色・色を変えない場合は「color」と同値にする*/
  --sub1-color:#FF008D;
  --sub2-color:#000;
  --lang-active: #000;
	--background: #FF008D;/*背景*/
  --spec-border: #ff899f;
  --btn:#FFD000;/*ボタンの色*/
  --btn-hover:#FFD000;/*ボタンの色:hover*/
  --btn-color:#000;/*ボタンの文字色*/
  --btn-color-hover:#000;/*ボタンの文字色:hover*/
  --btn-max-w:600px;/*ボタンの最大幅*/
  --border-radiue:0;/*ボタンの角R。角Rにしない時は0・可愛くしたい時は100*/
  --slider-btn: #FF008D;/*スライダー矢印*/
  --slider-page: #FF008D;/*スライダーページネーション*/
}

/* @media screen and (max-width: 1200px){
	:root{
        --font-size:13px;
    }
} */

@media screen and (max-width: 768px){
	:root{
      --font-size:12px;
      --btn-max-w:100%;/*ボタンの最大幅*/
    }
}


/*---------
　Font
---------*/
.noto-sans-jp{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 600;
}

.vdl-logojrblack{
  font-family: "vdl-logojrblack", sans-serif;
  font-weight: 900;
  font-style: normal;}

.dotgothic16-regular {
font-family: "DotGothic16", sans-serif;
font-weight: 400;
font-style: normal;
}


/*-----------

-----------*/
a.btn{padding: 1.8em 3em 1.8em 2.5em;display: block; overflow: hidden;border: none; max-width: 100%; width: 100%;margin-top: 1.5em;transform: skewX(-20deg);box-shadow: 5px 5px 0 #000; }
a.btn span{transform: skewX(20deg); display: inline-block;font-weight: 700;}
a.btn::after { content: "";position: absolute;top: calc(50% - .4em);right: 1em;width: .1em;height: .1em;background: none;border:.5em solid #000; display: block;border-width: .5em .8em; border-color: transparent transparent transparent #000;transform: skewX(20deg) ;
}
a.btn:hover{transform: skewX(-20deg) translate(5px, 5px); box-shadow: none;}

a.btn:hover::after{ background: none;border:.5em solid #000; display: block;border-width: .5em .8em; border-color: transparent transparent transparent #000;}
a.btn .small{display: none;}

article{max-width: 2560px; margin: -10% auto 0; width: 100%; overflow: hidden;}
#lead .inner,
#point .inner{width: 100%; max-width: 100%; /* overflow: hidden; */}

.bg_wrap{max-width: 2560px; margin: -10% auto 0; width: 100%; overflow: hidden; position: relative; padding:10% 0 0 0;}
.bg_wrap .img_aiming{position: absolute; z-index: -1; width: 80%; top:0; left: -10%; animation: aiming 190s linear infinite;}

@keyframes aiming{
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}


.swiper-button-next, .swiper-button-prev{text-shadow: 1px 1px 0 #000;}


/*-----------
body
-----------*/
body{font-family: "Zen Maru Gothic", sans-serif; font-style: normal;font-weight: 700; background-color: var(--background); background: url(../images/bg.jpg);background-attachment:fixed;background-position: top center; background-size: 100% auto;}
.logo_dangan{width: 60%; filter: drop-shadow(0 0 5px #ffffff57); margin-top: 1em; margin-left: .5em;}

/*-----------
mv
-----------*/
#mv {width: 100%; max-width: 2560px; margin: 0 auto; line-height: 1; position: relative; overflow: hidden;}
#mv .text_wrap{position: absolute; left: 0; top: 16%; width: 100%;}
#mv .ttl{ width: 100%; transform: skewY(-7.5deg); background: #000; padding: 0 2.5% 4%;position: relative;}
#mv .ttl::after,
#mv .ttl::before{content: ""; display: block; width: 100%; position: absolute; left: 0; background: #000;}
#mv .ttl::after{height: 2.5em; bottom: -4em;}
#mv .ttl::before{height: 1.5em; bottom: -7em;}
#mv h1{font-size: 9.8vw; line-height:.6;color: #fff; transform:skewY(7.5deg) rotate(-7.5deg); }
#mv h1 span.small{font-size: 32%;}
#mv h1 span.scale{font-size: 32%; padding-bottom: 1.2em;display: inline-block;}
#mv h1.en{line-height: 1; font-size: 7.8vw; padding-top: 5%;}
#mv h1.en span{display: block; margin-top: -2%;}
#mv h1.en span.small{line-height: 0; margin-top: 3%;font-size: 38%;}
#mv h1.en span.scal{padding-bottom: 0;font-size: 38%;}

#mv .btn{margin: 14em 0 0 7.5%; width: 40%;}
#mv .mv_img{width: 50%; margin-left: 50%; position: relative;z-index: 10; padding-top: 1em;}
#mv .img_aiming{position: absolute; z-index: -1; width: 80%; top:-10%; right: -10%; animation: aiming 190s linear infinite; }

@keyframes aiming{
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/*-----------
header
-----------*/
header .inner{align-items:flex-start;margin: 0 auto; max-width: 2560px; width: 100%; padding: 0 ;}
header .language{padding: .65em 1.5em .6em; background: #000; border-radius: 100px; color: var(--sub1-color); margin-left: auto;font-size: .9em; border: 1px solid var(--background);}
header .language li{line-height: 1; padding: .25em 0;font-weight: 400;}
header .language li:first-of-type{margin-right: .5em; font-weight: 700;}
header .language li a{display: block; border-right:1px solid var(--sub1-color); color: var(--sub1-color); padding:0 .5em;}
header .language li a:hover{text-decoration: none; color: #fff;}
header .language li.active a{color: #fff;}
header .language li:last-of-type a{border: none; padding-right: 0;}

.menu_sp{display: none;}

.fabs {top: 0;margin:0 0 1em .5em;right: 0;z-index: 100;}
.fab {display: block;width: 40px; height: 40px;border-radius: 50%;text-align: center;color: white;margin: 0 auto 15px;cursor: pointer;-webkit-transition: all .1s ease-out;transition: all .1s ease-out;position: relative;}
.fab > img {line-height: 60px;transition: all .2s ease-in-out;transition-delay: 2s;}
.fab.share {background: #000;border: 1px solid var(--background);}
.fab:active,
.fab:focus,
.fab:hover {box-shadow: 0 0 4px rgba(255, 255, 255, .14), 0 4px 8px rgba(255, 255, 255, .28);}
.fab:not(:first-child) {width: 2em; height: 2em;margin: 10px auto 0;opacity: 0;}
.fab:not(:first-child) > i {font-size: 18px;line-height: 40px;transition: all .3s ease-in-out;}
.fabs:hover .fab:not(:first-child) {opacity: 1;width: 2em; height: 2em;margin: 10px auto 0;}
.fab:nth-last-child(1) {-webkit-transition-delay: 25ms;transition-delay: 25ms;}
.fab:not(:last-child):nth-last-child(2) {-webkit-transition-delay: 20ms;transition-delay: 20ms;}
.fab:not(:last-child):nth-last-child(3) {-webkit-transition-delay: 40ms;transition-delay: 40ms;}
.fab:not(:last-child):nth-last-child(4) {-webkit-transition-delay: 60ms;transition-delay: 60ms;}
.fab:not(:last-child):nth-last-child(5) {-webkit-transition-delay: 80ms;transition-delay: 80ms;}

/*-----------
lead
-----------*/
#lead .inner.flex{align-items: center;}
#lead .lead_img{width: 60%;}
#lead .text_area{width: 50%; margin-left: -10%; padding-right: 2.5%;text-shadow: 0.5px 0.5px 0 #ffffffdf; margin-top: -10%;}
#lead .text_area h2{font-size: 2em;}
#lead .text_area p{font-size: 1.3em;font-weight: 500;}

/*----------
point
-----------*/
#point{margin-top: -20%;}
#point h3{position: relative; padding: .7em 50px .6em 2.5%; color: #fff; max-width: 90%; display: inline-block;font-weight: 700;font-size: 1.8em;}
#point h3 .ttl_bg{position: absolute; top: 0; left: 0; overflow: hidden; width: 100%; height: 100%;}
#point h3 .ttl_bg:after {position: absolute;display: block;width: 100%;height: 100%;content: "";left: 0%;top: 0%;transform: skewX(-14deg);transform-origin: 100% 0;background: #000;}
#point h3 span { position: relative; display: inline-block; z-index: 1;
}

#point .andmore{transform: skewX(-20deg);background: #000; color: #fff; font-size: 1.5em; padding: .5em 3% .6em;margin: 0 auto; width: 50%;text-shadow: none; font-weight: 500;}
#point .andmore span{transform: skewX(20deg);display: inline-block; text-align: center; width: 100%;}
#point .inner{width: 95%; margin: 2em auto;}
#point .box{margin: 0;}
#point .box a:hover{transform: translate(-5px,-5px); box-shadow: 5px 5px 0 #000; background: #000;}
#point p{/* font-weight: 500;  text-shadow: .5px .5px 0 #fff;*/ margin: 1em 0 2em;font-size: 1.1em;}


/*-----------
movie
-----------*/
#movie .inner{max-width: 1200px; width: 95%; margin: 5em auto 0; padding: 30px; background: #000; transform: rotate(-1.5deg)}
.movie-wrap {
  transform: rotate(1.5deg);
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.movie-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/*-----------
product
-----------*/
#produt{margin-top: 10em;}
.swiper_wrap{position: relative; transform: skewY(6.5deg); border:30px solid #000; padding: .8em 0; border-width: 40px 0; margin-top: 10em; position: relative;} 
.swiper_wrap::after,
.swiper_wrap::before{content: ""; width: 100%; height: 20px; background: #000; display: block; left: 0; position: absolute;}
.swiper_wrap::after{top: calc(-60px + -.8em);}
.swiper_wrap::before{bottom: calc(-60px + -.8em);}
.swiper_inner{background: #000; padding: 8em 0;}
.swiper{transform: skewY(-6.5deg)}
.swiper-slide a{line-height: 0;display: block; overflow: hidden;}
.swiper-slide img{transform: scale(1); transition: all 0.3s linear;}
.swiper-slide:hover img{transform: scale(1.05); transition: all 0.3s linear;}

.preorder {margin-top: 5em;}
.preorder h4{font-size: 1.5em;/* text-shadow: 1px 1px 0 #fff; */}
.preorder p{font-size: 2.5em; font-weight: 900;/* text-shadow: 1px 1px 0 #fff; */}
.preorder .small{display: none;}
.preorder a.btn{max-width: 600px; width: 80%;}

.specifications{width: 80%; max-width: 800PX;background: #fff;padding: 50px;position: relative; z-index: 10; margin-top: 5em;}
.specifications dl{margin-top: 0; position: relative;font-weight: 500;}
.specifications dl::after{content: ""; display: block; width: 2px; height: 100%; position: absolute; left: 200px; top: 0; background: var(--background);}
.specifications  dt{text-align: right;padding-right: 30px;}

/*-----------
online
-----------*/
#online {max-width: 800px; width: 80%; background: #fff;padding: 50px; margin: 4em auto 0;}
#online hr{border: 1px solid var(--color-hover); margin: 25px 0; width: 100%; border-width: 2px 0 0 0 ;}
#online h4{font-size: 1.6em; font-weight: 700;}
#online p{margin-top: 1em;font-weight: 500;}

/*-----------
aside
-----------*/
aside,footer{padding: 2em 0 0 0;}
aside .social{justify-content: center; max-width: 500px; margin: 3em auto 0;}
aside .social li{width: 40px; margin: .5em .25em 0; line-height: 1;}
aside .social li a{display: block;}
aside .social .text{width: 100%;text-align: center;font-size: 1.2em;}
.bnr{line-height: 1;}
.bnr a{display: block; line-height: 1; max-width: 600px; width: 80%; margin: 0 auto;}

/*-----------
footer
-----------*/
footer{border: none; padding: 4em 0 5em; }
footer .logo_wrap{margin: 0 auto 1.5em; flex-direction: column; justify-content: center;align-items: center;}
.logo_wrap a{margin-right: 0;}
.logo_wrap a:first-of-type{margin-bottom: 1.5em; width: 8%; min-width: 140px;}
footer .copyright{text-align: center; line-height: 1.4;}
footer .copyright span{margin-left: .5em;}


@media screen and (max-width: 1300px){
  #mv{padding-top: 50px;}
  #movie{overflow: hidden;}
  /* #movie .inner{margin-left: 4%;} */
}


@media screen and (max-width: 900px){
  article{margin-top: -5%;}
  #mv .btn{margin: 14em 0 0 5%; width: 40%; padding: 1em;}
  #mv .text_wrap a.btn.en{padding: 1em 3em 1em 1.5em; width: 45%; margin-left: 3%;}
  #mv .btn br.small{display: block;}
  #mv .text_wrap a.btn.en br.small{display: none;}
  #mv .btn span{line-height: 1.5;}
}

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

  body{background: var(--background); background-image: url(../images/bg_sp.jpg); background-repeat: no-repeat; background-size: 120% auto; background-position: bottom center;}
  body::before{content: ""; width: 100%; height: 100vh; background-image: url(../images/bg_sp.jpg); background-repeat: no-repeat; background-size: cover; background-position: top center;display: block;position: fixed; top: 0; left: 0;z-index: -1;}
  a.btn{font-size: 1em;}
  a.btn span {font-size: 1.2em; line-height: 1.3;}
  a.btn .small{display: block;}

  article{margin-top: 0;}
  /*-----------
  header
  -----------*/
  header.flex{padding-right: 1%;}
  header.absolute{padding: 0;}
  header .inner{padding: 10px;}
  .btn_nav{display: flex; background:#000;border: 1px solid var(--sub1-color); width: 40px; height: 40px; border-radius: 100px;margin-left: auto; z-index: 200; padding: 5px; justify-content: center; align-items: center;}
  .btn_nav:hover{cursor: pointer;}
  .btn_nav.active{background: #000;}
  .btn_nav span{width: 80%; height: 2px; background:var(--sub1-color); display: flex; position: relative; align-items: center;} 
  .btn_nav span::before,
  .btn_nav span::after{content: "";display: block; width: 100%; height: 2px;background:var(--sub1-color);position: absolute;transition: all 0.2s linear;}
  .btn_nav span::before{top: -8px;}
  .btn_nav span::after{bottom: -8px;}
  .btn_nav.active span::before{transform: rotate(-45deg);top: calc(50% - 1px);transition: all 0.2s linear; background: var(--sub1-color);}
  .btn_nav.active span::after{transform: rotate(45deg);bottom: calc(50% - 1px);transition: all 0.2s linear;background: var(--sub1-color);}
  .btn_nav.active span{background: #ffffff00;}

  .menu_sp{background:#ff008dc2; width: 100%; height:100vh; position: absolute; top: 0; left: 0; transition: all 0.2s linear; display: flex; opacity: 0; z-index: -1;pointer-events: none; flex-direction: column; justify-content: center;}
  .menu_sp.active{top: 0;transition: all 0.2s linear; opacity: 1; z-index: 100;pointer-events: auto;}

  .menu_sp .language_sp{text-align: center; flex-wrap: wrap;justify-content: center;}
  .menu_sp .language_sp li{padding: 0 2em; border: 1px #000 solid; border-width: 0 1px 0 0;line-height: 1;}
  .menu_sp .language_sp li a{color: #000;}
  .menu_sp .language_sp li:first-child{width: 100%; margin-bottom: 1em;border: none; color: #000;}
  .menu_sp .language_sp li:last-child{border-right: none;}
  .menu_sp .language_sp li.active a{color: #fff;}

  .fabs_sp{margin-top: 2em; justify-content: center;}
  .fabs_sp p{width: 100%; text-align: center;color: #000; margin-bottom: 1em;}
  .fabs_sp a{width: 40px; margin: .5em .5em 0; line-height: 1;}
  .fabs_sp .fab{opacity: 1; margin: 0 .5em;}
  .language,.fabs{display: none;}

  /*-----------
  mv
  -----------*/
  #mv {padding-top: 0; padding-bottom: 5px;}
  #mv .flex{flex-direction: column; overflow: hidden;align-items: flex-start;}
  #mv .mv_img{width: 90%; margin-left: 5%; padding-top: 50px;}
  #mv .text_wrap{width: 100%; position: relative; margin-top: -10%;z-index: 20; }
  #mv .text_wrap a.btn{margin: 20% auto 0;padding: 1.5em;width: 90%;}
  #mv .text_wrap a.btn.en{padding: 2em 3em 2em 1.5em; width: 90%;}
  #mv .text_wrap a.btn.en br.small{display: none;}
  #mv h1{font-size: 18vw; text-align: center; margin-left: -.1em; padding-bottom: 3%;}
  #mv h1.en{font-size: 14.5vw; margin-left: -.25em;}
  #mv h1.en span{margin-top: -5%;}
  #mv h1.en span.scale{margin-top: 0;}
  #mv .img_aiming{position: absolute; z-index: -1; width: 170%; top:0%; left: -35%;}


  /*-----------
  lead
  -----------*/
  #lead{padding-top: 4em;}
  #lead .inner{max-width: 100%;width: 100%;display: inline;}
  #lead .lead_img{display: none;}
  #lead .text_area{width: 95%; margin: 0 auto; padding: 0;}

  /*----------
  point
  -----------*/
  #point{padding: 0;margin:10% 0 0;}
  #point .andmore{width: 90%;}

  /*-----------
  online
  -----------*/
  #online {padding: 4em 3em; margin: 4em auto 0; width: 80%;}

  /*-----------
  produt
  -----------*/
  #produt{margin-top: 5em; }
  #produt h4,
  #produt p{text-shadow: 1px 1px 0 #fff;}
  #produt .small{display: block;}

  /*-----------
  specifications
  -----------*/
  .specifications{width: 80%;}
  .specifications .inner{padding: 2em 3em 4em;}
  .specifications dt{border-width:0; text-align: center;padding-right: 0; font-weight: 900; margin-top: 2em;}
  .specifications dd{text-align: center; padding-top: 0;}
  .specifications dl::after{display: none;}

  .bg_wrap{margin-top: 0;}
  .bg_wrap .img_aiming{width: 120%; top: -5em;}
}

@media screen and (max-width: 550px){
  #mv{padding-top: 40px;}
  #online,
  .specifications{width: 90%;}
}


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


    #point h3{height: auto; line-height: 1.4; width: 100%;}
    #point h3::before{display: none;}

}