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

@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-weight: 400;
  font-style: normal;
}
.kalnia-700{
  font-family: "Kalnia", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

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

-----------*/
.cnt{width: 95%; max-width: 1700px; margin: 300px auto;}
a.btn{border-color:var(--btn);padding: 1.2em 2.5em; border-radius: 0 30px 0 30px}
a.btn::after {content: "";position: absolute;top: calc(50% - .3em);right: 1.5em;width: .5em;height: .5em;background: none;border: 1px solid var(--btn-color);border-width: 2px 2px 0 0; clip-path:none;transform: rotate(45deg);
}
a.btn:hover::after{background: none; border-color: var(--btn);}
a.btn .small{display: none;}

.inner{max-width: 2000px; width: 90%; margin: 0 auto; position: relative;}

article{margin-top: -10%;}
/*-----------
icon common
-----------*/
.icon_img{position: absolute;}

@keyframes anime01 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/*-----------
body
-----------*/
body{background: #fff; background-image: url(../images/bg.jpg); background-repeat: no-repeat; background-size: 100% auto; background-position: top center;}

/*-----------
mv
-----------*/
#mv {width: 100%; max-width: 2560px; margin: 0 auto;}
#mv .flex{flex-direction: row-reverse; align-items: center;}
#mv h1{font-size: 7.3vw; line-height: 1; }
#mv h1 span.large{color: #fff;-webkit-text-stroke: .3vw #d01d2a; text-stroke: .3vw #d01d2a; paint-order: stroke; filter: drop-shadow(3px 3px 0 #d01d2a);}
#mv h1 span.small{color: #d01d2a;font-size: .4em; line-height:1; display: block;}
#mv .mv_img{width: 56%; margin-left: -6%;}
#mv .text_wrap{width: 40%; margin: -15% 0 0 10%;}
#mv a.btn{margin: 1em 0 0 0;}

#mv .lead_icon_01{width: 3%;top: 16%;left: 4.5%; animation: anime01 15s linear infinite;}
#mv .lead_icon_02{width: 5%;bottom: 40%;right: 4.5%; animation: anime01 20s linear infinite;}
#mv .lead_icon_03{width: 2%;top: 20%; left: 7.5%; animation: anime01 25s linear infinite;}
/*-----------
header
-----------*/
header .inner{align-items:flex-start;margin: 0 auto; max-width: 2560px; width: 100%;}
header .language{padding: .7em 1.5em .6em; background: var(--sub2-color); border-radius: 100px; color: var(--sub1-color); margin-left: auto;font-size: 12px; border: 1px solid var(--sub1-color);}
header .language li{line-height: 1; padding: .25em 0;}
header .language li:first-of-type{margin-right: .5em;}
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;}
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: 36px; height: 36px;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: var(--sub2-color); border: 1px solid var(--sub1-color);}
.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{max-width: 2000px; align-items: center; margin-top: 10em;width: 90%;position: relative;}
#lead .lead_img{width: 40%; border-radius: 50px;filter: drop-shadow(10px 10px 0 var(--btn)); border: 5px solid var(--btn);transform: translateZ(0);}
#lead .text_wrap{width: calc(60% - 40px); margin-left: 40px;}
#lead h3{font-size: 3em; color: var(--btn);}
#lead p{margin-top: 1em; font-size: 1.2em;line-height: 2;}

#lead .lead_icon_01{width: 5%; top: -5%;left: 2.5%; animation: anime01 15s linear infinite;}
#lead .lead_icon_02{width: 1.8%; top: 7%;left: 2%;animation: anime01 10s linear infinite;}
#lead .lead_icon_03{width: 3.4%; top:97%;left: 36%;animation: anime01 15s linear infinite;}
#lead .lead_icon_04{width: 2.3%; top: 102%;left: 33%; animation: anime01 10s linear infinite;}

/*----------
point
-----------*/
#point .inner{max-width: 2000px; margin-top: 15%; width: 90%; }
#point .box_wrap{width: 100%;position: relative; gap: 40px;}
#point .box {margin-left: 0;position: relative;}
#point .box a{border-radius: 50px; overflow: hidden; border: 5px solid var(--btn); filter: drop-shadow(8px 8px 0 var(--btn)); display: block;line-height: 0;transform: translateZ(0);}
#point .box a::after {right: 1em;bottom: 1em;}
#point p{margin-top: 1em; }

#point .box img{transform: scale(1); transition: all 0.3s linear;}
#point .box img:hover{transform: scale(1.05); transition: all 0.3s linear;}

#point .box .box_inner{line-height: 0; position: relative;}
#point .box .lead_icon_01{width: 12%; top: -8%;left: 10%; animation: anime01 15s linear infinite;}
#point .box .lead_icon_02{width: 7.5%; top: 5%;left: 5%;animation: anime01 10s linear infinite;}
#point .box .lead_icon_03{width: 9%; top:83%;left: -4.5%;animation: anime01 15s linear infinite;}
#point .box .lead_icon_04{width: 5.7%; top: 92%;left: 5%; animation: anime01 10s linear infinite;}
#point .box .lead_icon_05{width: 18%; top:-10%; right: 87%;animation: anime01 15s linear infinite;}
#point .box .lead_icon_06{width: 5.4%; top: 10%;right: 85%; animation: anime01 10s linear infinite;}

/*-----------
movie
-----------*/
#movie {position: relative;}
#movie .inner{margin: 20% auto 0; border: 5px solid var(--btn); border-radius: 50px; overflow: hidden; line-height: 0;filter: drop-shadow(8px 8px 0 var(--btn));transform: translateZ(0);}
.movie-inner{line-height: 0; position: relative;}
.movie-inner:hover{cursor: pointer;}
.movie-wrap {position: relative;padding-bottom: 56.25%;height: 0;overflow: hidden;}
.movie-wrap iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

.movie-wrap img{transform: scale(1); transition: all 0.3s linear;}
.movie-wrap img:hover{transform: scale(1.05); transition: all 0.3s linear;}


#movie .lead_icon_01{width: 6%; top: -15%;right: 8%; animation: anime01 15s linear infinite;}
#movie .lead_icon_02{width: 3%; top: 7%;right: 3.8%;animation: anime01 10s linear infinite; z-index: 10;}

/*----------
comment
-----------*/
#comment { position: relative; margin-top: 15%;}
#comment .illust,
#comment .figure{padding: 10% 0 8%; position: relative;}
#comment .illust{background: var(--sub2-color) url(../images/prof_bg01.png) no-repeat; background-position: right 60%;background-size: 80% auto;}
#comment .figure{background: #f9ae59 url(../images/prof_bg02.png) no-repeat;background-position: -10% 15%; background-size: 85% auto;}

#comment .inner{margin: 0 auto;}
#comment .inner p{ text-shadow: 0 0 2px #fff;}
#comment .text_wrap{width: 50%;}

#comment .figure .text_wrap{margin-left: 50%;}
#comment .figure .text_wrap .box:last-of-type{border: 1px solid #ffffff48; border-width: 1px 0 0 0; margin-top: 3em; padding-top: 2em;}
#comment .figure h4{color: #fff;font-size: 2.5em; font-weight: 700; text-shadow: 2px 2px 0 var(--sub1-color);}
#comment .figure h4 span{font-size: .8em; margin-right: .5em;}
#comment .illust h4{font-size: 1.8em; text-shadow: 0 0 2px #fff,0 0 2px #fff; margin-top: .5em;}
#comment .illust h4 span{font-size:.7em;}
#comment .illust h5{color: #1e84a9;font-size: 3em; font-weight: 700; text-shadow: 2px 2px 0 #fff; line-height: 1;}

#comment .prf{margin-top: 3em;}

#comment .lead_icon_01{width: 6%; top: -3%;left: 3%; animation: anime01 15s linear infinite; z-index: 10;}
#comment .lead_icon_02{width: 1.8%; top: 5%;left: 8%;animation: anime01 10s linear infinite; z-index: 10;}
/*-----------
product
-----------*/
.bg{background:url(../images/product_bg.jpg) no-repeat ; background-position: center center; background-size: 100% auto;}
.swiper-slide{border-radius: 20px; line-height: 0;overflow: hidden; }
.swiper-slide a{line-height: 0;}
.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; font-weight: 500;}
.preorder p{font-size: 2.3em; font-weight: 600;}
.bonus,
.specifications{border: 5px solid var(--btn); border-radius: 50px; width:90%; max-width: 800px; margin: 5em auto 0; padding: 50px; position: relative; z-index: 1; background: rgba(255,255,255,0.7);}
.bonus h4,
.specifications h4{font-size: 1.5em; font-weight: 700; line-height: 1; padding: .25em 0 .25em 1.5em; background: url(../images/icon_ttl.png) no-repeat; background-position: left .25em;}

.bonus .inner{width: 100%; justify-content: space-between;align-items: center; margin-top: 2em;}
.bonus .img_bonus{width: 100%;}
.bonus .text_wrap{width: 100%;font-size: 1.2em; text-align: center; margin-top: 1em;}
.bonus .text_wrap span{/* display: block;  */font-size: 1.2em;}

.specifications dl{margin-top: 1.5em;}
.specifications dd{border-color: var(--btn);}

.bonus .lead_icon_01{width: 13%; bottom: 15%;right: -3%; animation: anime01 20s linear infinite;}
.bonus .lead_icon_02{width: 6%; bottom: -5%;right: 7%;animation: anime01 7s linear infinite;}

/*-----------
preorder_btn
-----------*/
#preorder_btn{position: fixed; right: 10px; bottom: 0px; width: 120px; display: none;}
#preorder_btn.show{display: block;}
/*-----------
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;}
aside .social .text{width: 100%;text-align: center;}

/*-----------
footer
-----------*/
footer{border: none; padding: 3em 0 5em; }
footer .logo_wrap{margin: 0 auto 1.5em; justify-content: center;}
footer .copyright{text-align: center;}
footer .copyright span{margin-left: .5em;}

/*-----------
preorder_btn
-----------*/
.btn_fixd{width: 150px; position: fixed; right: 10px; bottom: 10px; z-index: 200; line-height: 0; display: block;}
.btn_fixd a{position: relative; z-index: 5;display: block; list-style: none;}
.btn_fixd .btn_bg{position: absolute; left: 0; top: 0; width: 100%;z-index: 1;}
.btn_fixd:hover{opacity: .8;}
.btn_fixd:hover .btn_bg{animation: kaiten 5s linear infinite;}

@keyframes kaiten {
  from {
    transform: rotate(0deg);
  }
  to {
   transform: rotate(360deg);
  }
}


@media screen and (max-width: 1200px){
  article {margin-top: 0;}

  /*-----------
  MV
  -----------*/
  #mv .mv_img{margin-left: -10%;}
  #mv .text_wrap{margin-left: 0; width: 48%;}
  

  /*-----------
  lead
  -----------*/
  #lead .inner{align-items:flex-start}
  #lead h3{font-size: 2.5em;}
  #lead p{font-size: 1.1em;}
}

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

  body{background: #fff; background-image: url(../images/bg_sp.jpg); background-repeat: no-repeat; background-size: 100% auto; background-position: top center;}

  .bg{background-size: 100% auto; background-image: url(../images/product_bg_sp.jpg);}
  a.btn{font-size: 1em; padding: 1.2em 2em 1.2em 1.2em;}
  a.btn .small{display: block;}
  /*-----------
  header
  -----------*/
  header.flex{padding-right: 1%;}
  header.absolute{padding: 0;}
  header .inner{padding: 10px;}
  .btn_nav{display: flex; background: var(--sub2-color);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 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: 261951all 0.2s linear;}
  .btn_nav.active span::after{transform: rotate(45deg);bottom: calc(50% - 1px);transition: all 0.2s linear;}
  .btn_nav.active span{background: #ffffff00;}

  .menu_sp{background: var(--sub2-color); 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 var(--color) solid; border-width: 0 1px 0 0;line-height: 1;}
  .menu_sp .language_sp li a{color: var(--color);}
  .menu_sp .language_sp li:first-child{width: 100%; margin-bottom: 1em;border: none; color: var(--color);}
  .menu_sp .language_sp li:last-child{border-right: none;}
  .menu_sp .language_sp li.active a{color: #e3007f;}

  .fabs_sp{margin-top: 2em; justify-content: center;}
  .fabs_sp p{width: 100%; text-align: center;color: var(--color); 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 .flex{flex-direction: column; overflow: hidden;align-items: flex-start;}
  #mv .mv_img{width: 120%; margin-left: -10%;}
  #mv .text_wrap{width: 100%; text-align: center; margin: -5% 0 0 0;}
  #mv .text_wrap h1{font-size: 15vw;width: 100%;}
  #mv .text_wrap a.btn{margin: 3% auto 0; font-size: 1.2em;}

  #mv .lead_icon_01{width: 6%;top: auto; bottom: 30%; left: 3%; animation: anime01 15s linear infinite;}
  #mv .lead_icon_02{width: 10%;bottom: 35%;right: 4.5%; animation: anime01 20s linear infinite;}
  #mv .lead_icon_03{width: 4%;top: auto; bottom: 28%; left: 10%; animation: anime01 25s linear infinite;}

  /*-----------
  lead
  -----------*/
  #lead .inner{width: 100%;}
  #lead .lead_img{width: 90%; border-width: 3px 3px 3px 0; border-radius: 0 50px 50px 0;}
  #lead .text_wrap{width: 90%; margin: 2em auto 0;}

  #lead .lead_icon_01{width: 15%; top: -5%;left: 2.5%; animation: anime01 15s linear infinite;}
  #lead .lead_icon_02{width: 5%; top: 5%;left: 2%;animation: anime01 10s linear infinite;}
  #lead .lead_icon_03{width: 10%; top:52%;left: 85%;animation: anime01 15s linear infinite;}
  #lead .lead_icon_04{width: 7%; top: 45%;left: 75%; animation: anime01 10s linear infinite;}

  /*----------
  comment
  -----------*/
  #comment .illust,
  #comment .figure{padding: 15% 0; position: relative;} 
  #comment .illust{background: var(--sub2-color) url(../images/prof_bg01_sp.png) no-repeat;background-color:rgba(223 213 33 0.1);background-position: center top;background-size: 100% auto;}
  #comment .figure{background: #f9ae59 url(../images/prof_bg02_sp.png) no-repeat;background-position: center top; background-size: 100% auto;}

  #comment .illust .text_wrap,
  #comment .figure .text_wrap{ width: 100%; margin: 0 auto;}

  #comment .lead_icon_01{width: 13%; top: -2%;left: 3%; animation: anime01 15s linear infinite; z-index: 10;}
  #comment .lead_icon_02{width: 5%; top: 2%;left: 18%;animation: anime01 10s linear infinite; z-index: 10;}

  /*-----------
  point
  -----------*/
  /* #point .box_wrap{justify-content: ;} */
  #point .box_wrap .box{width: calc(50% - 20px);}

  /*-----------
  product
  -----------*/
  .bonus h4,
  .specifications h4{font-size: 1.5em; font-weight: 700; line-height: 1.5; padding-top: .15em; padding-left: 1.8em;}
  .bonus h4{padding-top: 0;}

  .bonus, .specifications{padding: 30px; border-width: 3px;}

  .bonus .inner{width: 100%; flex-direction: column;}
  .bonus .img_bonus{width: 100%; max-width: 600px;}
  .bonus .text_wrap{width: 100%; margin-top: 1em;}
  .bonus .lead_icon_01{bottom: 15%; right: 0%;}
  .bonus.en .lead_icon_01{bottom: -3%; right: 5%;}
  .bonus.en .lead_icon_02{bottom: -7%; right: 0%; z-index: 20;}

  .specifications dt{border-color: #afdad5; border-width:1px ;}

}

@media screen and (max-width: 600px){
  #point .box_wrap{flex-direction: column;}
  #point .box_wrap .box{width: 100%;}
  .bonus .img_bonus{width: 100%;}

  /* #mv .lead_icon_02{bottom: 18%;} */


}