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

@media (max-width: 600px) {
 :root{
  --font-size:12px;
 }
  
}

/*---------
　style
---------*/
html{scroll-behavior: smooth;}
body{position: relative; background: var(--background);}

/*---------
font
---------*/
.zen-kaku-gothic-antique-regular {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/*---------
common
---------*/
a.btn{border: none; position: relative;transition: .3s; overflow: hidden;}
a.btn::before {content: ""; width: 100%; height: 100%; display: block;position: absolute;top: 0; left: 0; z-index: 1; background: linear-gradient(88deg, #00D3DE 0%, #FF42DF 98.79%) ; opacity: 0; transition: .3s;}
a.btn:hover::before{opacity: 1;}
a.btn span{position: relative;z-index: 10;}


/* a.btn.pdf{font-weight: 400; width: 100%; max-width: 100%; padding: 1em 0; margin: 1em 0;}
a.btn.pdf::after,
a.btn.pdf::before{content: ""; width: 1em; height: 1em; border: 2px solid #fff; display: block; position: absolute;transition: all 1s linear;}
a.btn.pdf::after{left: 0; bottom: 0;border-color:transparent transparent #fff #fff ;}
a.btn.pdf::before{right: 0; top: 0; border-color: #fff #fff transparent transparent;}
a.btn.pdf:hover::after{left: -.5em; bottom: -.5em;}
a.btn.pdf:hover::before{right:-.5em; top: -.5em;} */

.pdf_wrap{font-weight: 400; width: 100%; max-width: 100%; padding: 0; margin: 1em 0;position: relative;}
.pdf_wrap::after,
.pdf_wrap::before{content: ""; width: 1em; height: 1em; border: 2px solid #fff; display: block; position: absolute;transition: all .5s linear; z-index: 10;}
.pdf_wrap::after{left: 0; bottom: 0;border-color:transparent transparent #fff #fff ;}
.pdf_wrap::before{right: 0; top: 0; border-color: #fff #fff transparent transparent;}
.pdf_wrap:hover::after{left: -.5em; bottom: -.5em;}
.pdf_wrap:hover::before{right:-.5em; top: -.5em;}
.pdf_wrap a.btn.pdf{width: 100%;}


hr{width: 60%; max-width: 1200px; position: relative; height: 1px; border: 1px solid #fff; background: #fff; margin: 0 auto;overflow: unset;border-width: 1px 0 0 0;}
hr::after,
hr::before{content: ""; display: inline-block; width: 1em; height: 1em; }
hr::after{background: url(../images/icon_kira.svg );background-size: 100% auto; background-position: top center; position: absolute; left: -1.5em; top: -.5em;}
hr::before{background: url(../images/icon_kira.svg );background-size: 100% auto; background-position: top center; position: absolute; right: -1.5em; top: -.5em;}

/*-----------
#mv
-----------*/
#mv{overflow: hidden;}
#mv .inner::before{content: ""; background: linear-gradient(0deg, #000000, transparent); width: 100%; height: 20%; position: absolute; bottom: 0; left: 0;display: block;}
#mv .inner{position: relative;}
#mv .inner .text_area{position: absolute; bottom: 10%; left: 8%;}
#mv .inner .text_area h1{color: #fff; font-size: 5em;line-height: 1.1; }
#mv .inner .text_area h1 .small{font-size: 30%;letter-spacing: 0.5em;}
#mv .inner .text_area h1 .product_name{letter-spacing: 0.3em;}
#mv figure{line-height: 0;}

header{padding: 20px;}

.fixd_wrap{position: fixed; right: 35px; top: 20px;z-index: 20; /* flex-wrap: nowrap; */width: 300px;align-items: center;}

.btn_nav{width: 35px; height: 35px; display: block; display: flex; align-items: center; margin-left: auto;/* margin:15px 15px 0 auto; */ }
.btn_nav span{width: 100%; height: 5px; background: #fff; display: block;border-radius: 100px; position: relative;}
.btn_nav:hover{cursor: pointer;}
.btn_nav span::after,
.btn_nav span::before{content:"" ; display: block;width:35px; height: 5px; border-radius: 100px; position: absolute; background: #fff;left: 0;}
.btn_nav span::after{top: -12.5px;}
.btn_nav span::before{bottom: -12.5px;}
.btn_nav.active span{background: #00000000; margin-top: 2em;}
.btn_nav.active span::after,
.btn_nav.active span::before{background: #000;top: 0px; }
.btn_nav.active span::after{transform: rotate(45deg);}
.btn_nav.active span::before{transform: rotate(-45deg);}

.menu_sp{display: none;}
.menu_sp.active{display: block; position: absolute; right: 20px; top: 20px; background: #fff; border-radius: 10px; max-width: 340px; width: 24%;padding: 50px; position: fixed; }
.menu_sp .menu li {margin-top: 2vw;}
.menu_sp .menu li:first-of-type{margin-top: 0;}
.menu_sp .menu li a{display: block; font-size: 1.1em; color: #000; font-weight: 500;}

.menu_sp .btn,
.fixd_wrap .btn{width: 100%; border-radius: 100px; font-weight: 600; font-size: 1.5em; padding:10px 20px; margin-top: 1em;}
.fixd_wrap .btn{width: calc(100% - 55px); margin:0 20px 0 0; padding:5px 20px; font-size: 1.2em; display: block;}
.fixd_wrap .btn.active{display: none;}

.menu_sp .language {width: 100%; justify-content: space-around; margin-top: 2vw;}
.menu_sp .language a{color: #000; font-size: 1.2vw;}
.menu_sp .language a.active{color: var(--color-hover);}
.menu_sp .language a:hover,
.menu_sp .language a.active{text-decoration: underline;}
header .language li{padding: 0;}
.menu_sp .share h5{color: #000;text-align: center; font-size: 1.2vw; margin: 1em 0 .5em;}
.menu_sp .share ul{gap: 20px; justify-content: center;}
.menu_sp .share li{width: calc((100% - 40px) / 3); line-height: 1; max-width: 50px;}
.menu_sp .share li a{display: block;}
.menu_sp hr{border-color: #000; margin-top: 2em; width: 100%; border-width: 1px 0 0 0;}

header p.logo{line-height: 1;}
/*-----------
#lead
-----------*/
#lead{background: #090B1A; position: relative;overflow: hidden; padding: 2em 0 0;}
#lead::before{content: ''; width:50vw; height: 100vh; position: absolute; left: calc(50% - 25vw); top: -50vh;border-radius: 1044px;opacity: 0.7;background: radial-gradient(50% 50% at 50% 50%, #a0a0a0 0%, #090B1A 100%);}
#lead .inner{position: relative; align-items: center;}
#lead  .text_area{width: 50%; font-size: 1.2em;}
#lead  .text_area p{line-height: 2; margin-top: 2em;}
#lead  figure{width: 50%;}

/*-----------
#point
-----------*/
#point{background-image: url(../images/bg_point.png);background-color: #000;padding: 150px 0;position: relative; overflow: hidden;background-size: cover;}
#point::before{content: ''; width:70vw; height: 140vh; position: absolute; left: calc(50% - 35vw); bottom: -70vh;border-radius: 1044px;opacity: 0.7;background: radial-gradient(50% 50% at 50% 50%, #6e6a76 0%, #ffffff00 100%);}
#point .inner{width: 90%;}
#point .box_wrap{gap: 52px;position: relative;}
#point .column-3{width: calc((100% - 104px) / 3);}
#point .box{margin: 0;}
#point p{margin-top: 1.2em; font-weight: 400;}

/*-----------
p-info
-----------*/
#p-info{background: #090B1A;background-image: url(../images/bg_preorder.png);background-position: bottom center; background-repeat: no-repeat; padding-bottom: 150px;}

/*-----------
#bonu2
-----------*/
#bonu2{padding: 150px 0;}
#bonu2 .inner {max-width: 1200px; width: 90%; margin: 0 auto; align-items: center;}
#bonu2 .inner .img_bonu2{width: 47.25%;}
#bonu2 .inner .text_area{width: calc(52.75% - 135px); margin-left: 135px;}

#bonu2 .inner .text_area h4{font-size: 1.3em;}
#bonu2 .inner .text_area p{line-height: 2; margin-top: 2em; /* font-size: 1.1em;  */font-weight: 400;}
#bonu2 .inner .text_area p span{font-size: 80%;}
/*-----------
#movie
-----------*/
#movie .inner{max-width: 1200px; width: 90%; margin: 150px auto;}
.youtube{position: relative;width: 100%;padding-top: 56.25%;}
.youtube iframe{ position: absolute;top: 0;right: 0;width: 100% !important;height: 100% !important;}

/*-----------
#preorder
-----------*/
#preorder .inner{max-width: 1200px; width: 90%; margin: 150px auto 50px; font-weight: 600;text-align: center;}
#preorder h4{font-size: 1.8em;font-weight: 600;}
#preorder h4 br,
#preorder .data br{display: none;}
#preorder .data{font-size: 1.6em;letter-spacing: .2em;font-weight: 600; margin-top: 1.5em;}
#preorder .data span{font-size: 1.8em;}

#gsc{background: rgba(255, 255, 255, 0.80); color: #000; max-width: 1000px; padding: 80px 50px;position: relative; margin: 0 auto;}  
#gsc::after,
#gsc::before{content: ""; display: block; width: 100%; height: 1px; position: absolute;  background: rgba(255, 255, 255, 0.80); left: 0;}
#gsc::after{top: -2px;}
#gsc::before{bottom: -2px;}
#gsc h4{text-align: center; font-size: 1.5em;}
#gsc p{font-weight: 400; margin-top: 1em;}
#gsc hr{margin: 3em auto;width: 80%;}


/*-----------
#bonus
-----------*/
#bonus{box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); z-index: 5; position: relative; max-width: 1200px; width: 90%;margin: 100px auto 0;}
#bonus::after{content: ""; display: block; width: 100%; height: 100%; background: linear-gradient(264deg, #00D3DE 0.39%, #FF00D4 98.34%); position: absolute; z-index: -1; bottom: -10px; right: -10px;}
#bonus:hover{transform: translate(10px,10px);}
#bonus:hover::after{display: none;}
#bonus a{display: block; position: relative; z-index: 100;border: 1px solid #fff; background: #000; padding: 33px;}
#bonus a:hover{text-decoration: none;}
#bonus .inner{align-items: center; }
#bonus .inner .img_booklet{width: 340px;line-height: 0;}
#bonus .inner .text_area{width: calc(100% - 430px); margin-left: 90px; align-self: stretch; align-items: center;}
#bonus .inner .text_area .box{width: 100%;}
#bonus .inner .text_area h4{font-size: 1.5em;text-align: center;width: 100%; margin-top: 4em;}
#bonus .inner .text_area h4 br{display: none;}
#bonus .inner .text_area p{font-size: 1.8em;font-weight: 900;text-align: center;width: 100%;/*  margin-top: -1em; */}
#bonus .inner .text_area p.reserve{font-size: 1.5em; font-weight: 600; margin-top: auto; text-align: right;}
#bonus .inner .text_area p.reserve span img{width: 1.2em; vertical-align: sub;}
#bonus .inner .text_area p.reserve.en span{margin-left: .25em;}

/*-----------
#swiper_wrap
-----------*/
#product-img{background: linear-gradient(180deg, #FFF 0%, #B4B4B4 100%);  /* margin-top: -10%; */}
.swiper_wrap{background-image: url(../images/bg_slider.png); /* padding: calc(200px + 10%) 0 250px; */padding: 10% 0 250px;background-position: bottom center;overflow: hidden;}
#product-img .swiper-button-next, #product-img .swiper-button-prev{top:calc(100% + 30px); border: 2px solid #fff; width: 50px; height: 50px; border-radius: 100px; display: block;}
.swiper{overflow:unset !important;}
.swiper-pagination{bottom: -30px !important;}

.swiper-button-prev:after{content: '';display: block; background: url(../images/icon-arrow_slider_left.png) no-repeat;width: 100%; height: 1.1em; background-size: 50% auto; background-position: center center;}
.swiper-button-next:after{content: '';display: block; background: url(../images/icon-arrow_slider_right.png) no-repeat;width: 100%; height: 1.1em; background-size: 50% auto; background-position: center center;}

/*-----------
#sleeve
-----------*/
#sleeve{background: url(../images/bg_sleeve.png) top center no-repeat; padding: 150px 0; background-size: 100% auto;}
#sleeve .inner{max-width: 1200px; width: 90%; margin: 0 auto; text-align: center;}
#sleeve h4{font-size: 1.6em; /* text-align: center; */}
#sleeve figure{width: 80%; max-width: 465px; margin: 5em auto 0;}
#sleeve p{margin-top: 1em; font-weight: 400;}

/*-----------
#specifications
-----------*/
.specifications{background: rgba(255, 255, 255, 0.80); color: #000; max-width: 1000px; padding: 50px 80px;position: relative;}  
.specifications::after,
.specifications::before{content: ""; display: block; width: 100%; height: 1px; position: absolute;  background: rgba(255, 255, 255, 0.80); left: 0;}
.specifications::after{top: -2px;}
.specifications::before{bottom: -2px;}
.specifications dt{font-weight: 600;}
.specifications dd{border-left:none; font-weight: 400;}


/*-----------
aside
-----------*/
aside {padding: 0 20px;}
aside h5{text-align: center;font-size: 1.2em;}
aside ul{gap: 20px; justify-content: center; margin-top: 1.5em;}
aside ul li{width: 45px; line-height: 1;}
aside ul li a{display: block;}

/*-----------
footer
-----------*/
footer{border: none; padding: 5em 20px 30px;}
footer p.copyright{text-align: center; font-size: .7em;}


/*-----------
fixd
-----------*/
#fixd{display: none;}
#fixd.active{display: block;}
#change{position: fixed; width: 73px;line-height: 0; bottom: 20px; left: 30px; z-index: 100;}
#change a{display: block; position: relative; z-index: 10;}
#change:hover{cursor: pointer;}
#change .bg_change{line-height: 1;position: absolute; top: 0;left: 0;}

#change:hover .bg_change{transform: rotate(360deg);transition: all .5s;}

#pagetop{position: fixed; width: 33px;line-height: 0; bottom: 36px; left: 120px;transition: all 1s;z-index: 100;}
#pagetop:hover{bottom: 41px;transition: all .5s;}
#change .bg_change img,
#pagetop img{filter: drop-shadow(0 0 5px #000);}

@media (max-width: 1440px) {

  /*-----------
  #mv
  -----------*/
  #mv .inner .text_area h1{color: #fff; font-size: 5vw;}
  .menu_sp.active{padding: 5%;}
  .menu_sp .menu li {margin-top: 2vw;}
  .menu_sp .btn,.fixd_wrap .btn{font-size: 1.5vw;}
  .menu_sp .menu li a{font-size: 1.1vw}

  /*-----------
    #mv
  -----------*/
  #bonus .inner .img_booklet{width: 28%;}
  #bonus .inner .text_area{width: calc(72% - 20px); margin-left: 20px;}
}

@media (max-width: 1200px) {
  /*-----------
  #bonu2
  -----------*/
  #bonu2 .inner .text_area{width: calc(52.75% - 80px); margin-left: 80px;}

  #bonus .inner .text_area h4 br{display: block;}
  #bonus .inner .img_booklet{width: 35%;}
  #bonus .inner .text_area{width: calc(65% - 20px); margin-left: 20px; margin-top: -1em;}
}
@media (max-width: 768px) {
  .btn_nav.active span{margin-top: 1em;} 
  .menu_sp.active{ max-width: 100%; width: 90%;right: 5%;}
  .menu_sp .menu li{margin-top: 1.2em; text-align: center;}
  .menu_sp .menu li:first-of-type{margin-top: 2em;}
  .menu_sp .menu li a{font-size: 1.2em; }
  .menu_sp .btn, .fixd_wrap .btn{font-size: 1.2em; width: 80%; }
  .menu_sp .language{margin-top: 1.2em; justify-content: center; gap: 20px;}
  .menu_sp .language a{font-size: 1.2em; }
  .menu_sp .share h5{font-size: 1.2em; }
  .menu_sp .share li {width: 40px;}
  .fixd_wrap{width: 260px; right: 15px;}
  .fixd_wrap .btn{width: 200px;}
  .btn_nav.active{margin-right: 1.2em;}

  /*-----------
  #mv
  -----------*/
  #mv .inner .text_area{width: 100%;  left: 0;}
  #mv .inner .text_area h1{font-size: 10vw; text-align: center;}
  #mv .inner figure{width: 200%; margin-left: -25%;}

  /*-----------
  #lead
  -----------*/
  #lead{padding-top: 5em;}
  #lead .text_area{width: 95%; font-size: 1.1em;}
  #lead  figure{width: 90%; margin-top: 2em; margin-left: 5%;}

  /*-----------
  #lead
  -----------*/
  #point .box_wrap{gap: 20px;}
  #point .column-3{width: calc((100% - 20px) / 2);}

  /*-----------
  bonu2
  -----------*/
  #bonu2{padding: 3em 0;}
  #bonu2 .inner{flex-direction: column;}
  #bonu2 .inner .img_bonu2{width: 80%;}
  #bonu2 .inner .text_area{margin-left: 0; margin-top: 2em; width: 100%; }

  #movie .inner{margin: 3em auto;}

  /*-----------
  #preorder
  -----------*/
  #preorder .inner{margin: 3em auto;}
  #preorder h4 br,
  #preorder .data br{display: block;}
  #preorder .data{margin-top: .5em; font-size: 1.2em;}

  /*-----------
  #bonus
  -----------*/
  #bonus a{padding: 50px 33px;}
  #bonus .inner{flex-direction: column; }
  #bonus .inner .img_booklet{width: 60%;}
  #bonus .inner .text_area{width: 100%; margin-left: 0;font-size: 1em;}
  #bonus .inner .text_area br{display: block;}
  #bonus .inner .text_area h4{margin-top: 2em;}
  #bonus .inner .text_area p{margin-top: .5em; font-size: 2em;}
  #bonus .inner .text_area p.reserve{text-align: center; margin-top: .5em;}


  .specifications dt{border-color: #a4a4a4;}
  .specifications{padding: 50px 40px;}


  /*-----------
  footer
  -----------*/
  footer{padding-bottom: 120px;}

}


@media (max-width: 550px) {
  header p.logo{width: 30%;}
  .fixd_wrap{width: 200px;}
  .fixd_wrap .btn{width: 150px; margin-right: 10px;}

  #gsc{padding: 40px 25px;}
  #gsc h4{font-size: 1.2em;}
  #gsc p{font-size: .9em;}
  #bonus a {padding: 25px 33px;}


  /*-----------
  fixd
  -----------*/
  #change{left: 30px;}
  #pagetop{left: auto; right: 30px;bottom: 26px;}
}