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

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

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



.swiper-slide{border-radius: 10px; line-height: 0;overflow: hidden;}
.swiper-slide a{line-height: 0;}
/*---------
　Font
---------*/
/*Noto Sans Japanese・Noto Serif Japanese以外はここに記載。**/

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

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

a.btn.pink{color: #fff;background: #FF899F;
background: linear-gradient(180deg,#ff899f 0%, #fbbac6 100%);border-color: #ff899f;}
a.btn.pink::after{border-color: #fff;}
a.btn.pink:hover{background: linear-gradient(180deg,#fbbac6 0%, #ff899f 100%);}
a.btn.pink:hover::after{border-color: #fff;}

a.btn .small{display: none;}

/*-----------
body
-----------*/
body{background: url(../images/bg.jpg) no-repeat; background-size: 100% auto; background-position: center top;}
/* .font_notosans-jp{font-weight: 400;} */


/*-----------
mv
-----------*/
#mv{overflow: hidden;}
#mv .inner{max-width: 1700px; width: 95%; margin: 0 auto; padding-top: 2em ; position: relative; z-index: 10;}
#mv h1{position: relative; z-index: 50;}
#mv h1.en{max-width: 883px; margin: 0 auto;}
#mv .mv_img{width: 47.83%; }
#mv .text_wrap{width: 52.17%;margin-top: 14%; text-shadow: 0 0 10px #fff;}
#mv .text_wrap p{margin-top: 1em;}
#mv .lead.inner{margin-top: 2em;}
#mv .lead.inner.sp_box{display: none;}

/*-----------
header
-----------*/
header .inner{align-items:flex-start;margin: 0 auto;}
header .language{padding: .7em 1em; background: #fff; border-radius: 100px; color: #4a83dc; margin-left: auto;/* border:1px solid #261951; */font-size: 12px;}
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 #4a83dc; color: #4a83dc; padding:0 .5em;}
header .language li.active a{color: #ff899f;} 
header .language li a:hover{color: #ff899f;text-decoration: none;}
header .language li:last-of-type a{border: none; padding-right: 0;}
.menu_sp{display: none;}

.fabs {top: 0;/* position: absolute; */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: #fff;}
.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;}


/*-----------
comcept
-----------*/
#comcept{position: relative;z-index: 10;}
#comcept.cnt{margin-top: 0;}
#comcept h3{max-width: 462px; line-height: 1; width: 27.17%;}
#comcept p{margin-top: 3em; line-height: 2;}
#comcept h3 + p{margin-top: 1.5em;}
#comcept .inner{margin-top: 3em;}
#comcept .inner figure{width: calc(50% - 15px);line-height: 1;}
#comcept .inner figure:first-of-type{margin-right: 30px;}
#comcept .inner figure figcaption{font-size: 1.5em; line-height: 1.8;}
#comcept .inner figure figcaption span{font-size: .8em;}
#comcept .inner figure figcaption br.sp{display: none;}

/*----------
renewal
-----------*/
#point h3{max-width: 819px; width: 48.17%;}
#point p{margin-top: 3em; line-height: 2;}
#point h3 + p{margin-top: 1.5em;}
#point .column-2 p{text-align: center; line-height: 1; width: 250px; margin: 1.5em auto;}
#point .box_wrap{margin-top: 3em;}
#point .box_wrap:first-of-type{margin-top: -2em;}
#point .column-2 a{pointer-events: none;cursor: default;}

/*-----------
survey
-----------*/
#survey{padding: 20em 0 5em;}
#survey h3{max-width: 380px; width: 22.35%;}
#survey h4{font-size: 1.5em; margin-top: 1.5em;}
#survey p{margin-top: 1em;}
#survey p span{font-size: .8em;}
#survey p span a{color: #ff899f;}
#survey a.btn{margin: 3em 0 0; max-width: 500px;}
.bg_survey{background: url(../images/survey_bg.jpg) no-repeat; margin-top: -15em; background-position: right top; width: 100%; background-size: 60% auto;}

/*-----------
product
-----------*/
.preorder{margin-top: 150px}
.preorder p{font-weight: 900;}
.preorder h4{flex-wrap: 500;}
.preorder h4 + p{font-weight: 600;}

.specifications{border: 1px solid #ff899f; padding: 3em; border-radius: 20px;} 
.specifications h4::before{display: none;}
.specifications dt{border-color: #ff899f;}


/*-----------
aside
-----------*/
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; margin-top: 3em;}
footer .logo_wrap{margin: 0 auto; justify-content: center;}
footer .copyright{text-align: center;}


/*-----------
fall
-----------*/
.hana {
  position: absolute;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hana li{
  position: absolute;
  list-style: none;
  top: -50px;
  background: #ffdbed;
  border-radius: 0% 70%;  
  animation: fall 10s linear infinite, sway 7s ease-in-out infinite alternate;
}


@keyframes fall {
  to {
    top: 120%;
  }
}

@keyframes sway1 {
  from {
    transform: translateX(0px) rotate(0deg);
  }
  to {
    transform: translateX(200px) rotate(-45deg);
  }
}

@keyframes sway2 {
  from {
    transform: translateX(200px) rotate(-45deg);
  }
  to {
    transform: translateX(0px) rotate(0deg);
  }
}

.hana li:nth-child(1){
  left: 0%;
  width: 24px;
  height: 15px;
  animation: fall 15s linear infinite,
             sway1 3s ease-in-out infinite alternate;
  animation-delay: 2s;
}

.hana li:nth-child(2){
  left: 5%;
  width: 10px;
  height: 5px;
  animation: fall 20s linear infinite,
             sway1 2s ease-in-out infinite alternate;
  animation-delay: 8s;
}

.hana li:nth-child(3){
  left: 15%;
  width: 16px;
  height: 10px;
  animation: fall 14s linear infinite,
             sway1 3.5s ease-in-out infinite alternate;
  animation-delay: 13s;
}

.hana li:nth-child(4){
  left: 30%;
  width: 16px;
  height: 10px;
  animation: fall 10s linear infinite,
             sway2 4s ease-in-out infinite alternate;
  animation-delay: 7s;
}
.hana li:nth-child(5){
  left: 40%;
  width: 16px;
  height: 10px;
  animation: fall 15s linear infinite,
             sway1 4s ease-in-out infinite alternate;
  animation-delay: 0s;
}
.hana li:nth-child(6){
  left: 55%;
  width: 18px;
  height: 12px;
  animation: fall 11s linear infinite,
             sway2 3s ease-in-out infinite alternate;
  animation-delay: 3s;
}
.hana li:nth-child(7){
  left: 65%;
  width: 16px;
  height: 10px;
  animation: fall 12s linear infinite,
             sway2 3.5s ease-in-out infinite alternate;
  animation-delay: 7s;
}
.hana li:nth-child(8){
  left: 50%;
  width: 13px;
  height: 9px;
  animation: fall 24s linear infinite,
             sway1 6s ease-in-out infinite alternate;
  animation-delay: 3s;
}
.hana li:nth-child(9){
  left: 80%;
  width: 12px;
  height: 8px;
  animation: fall 15s linear infinite,
             sway2 5s ease-in-out infinite alternate;
  animation-delay: 4s;
}



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

    body{background-size: 120% auto;}
    a.btn{font-size: 1.2em;}
    /*-----------
    mv
    -----------*/
    #mv .text_wrap{margin-top: 18%;}
    #mv .inner{padding-top: 60px;}
    #mv .inner .pc{display: none;}
    #mv .lead.inner.sp_box{display: block;}

    #mv .lead.inner{margin-top: 0; padding-top: 0;text-shadow: 0 0 10px #fff;}
    #mv .lead.inner p{line-height: 2;}

    /*-----------
    comcept
    -----------*/
    #comcept.cnt{margin-top: 10em;}
    #comcept h3{max-width: 100%; width: 38%; line-height: 1;}
    #comcept .inner figure figcaption{font-size: 1.2em;}

    /*-----------
    renewal
    -----------*/
    #point h3{max-width: 100%;width: 68.25%;}
    #point .box_wrap:first-of-type{margin-top: 0;}
    #point .column-2 p{width: 50%; margin: 1em auto 0;}

    /*-----------
    survey
    -----------*/
    #survey {padding-bottom:0; padding-top: 10em; }
    #survey h3{max-width: 100%; width: 31.66%;}
    #survey .inner h4,
    #survey .inner p{text-shadow: 0 0 10px #fff;}
    
    .bg_survey{background-size: 80% auto;background-position: 200% top; margin-top: -15em;}

}



@media screen and (max-width: 768px){
  body{background-size: 200% auto;}
/*-----------
header
-----------*/
header.flex{padding-right: 1%;}
.btn_nav{display: flex; background: #fff;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: #4a83dc; display: flex; position: relative; align-items: center;} 
.btn_nav span::before,
.btn_nav span::after{content: "";display: block; width: 100%; height: 2px;background: #4a83dc;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: #7cd9f8e9; 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 .inner{width: 100%; position: relative; flex-direction: column-reverse; align-content: center;}
  #mv .inner .mv_img{width: 80%; margin: 0 auto;}
  #mv .inner .text_wrap{width: 90%; margin-top: -10%;}
  #mv .lead.inner.sp_box{width: 95%; margin: 3em auto 0;}

  /*-----------
  comcept
  -----------*/
  #comcept h3{width: 47%;}
  #comcept .inner figure figcaption br.sp{display: block;}


  /*-----------
  renewal
  -----------*/
  #point.cnt{margin-top: 5em; margin-top: 150px;}
  #point h3{width: 68.17%;}

  #survey.cnt{margin-bottom: 150px;}
  .bg_survey{margin-top: -20em;}

  /*-----------
  product
  -----------*/
  .specifications{border-color: #ff899f;}
  #point .box_wrap{margin-top: 15px;}
  #point .box a{margin-top: 0;}
  #point .box{margin-top: 15px;}
  #point .box.column-2:last-of-type{margin-top: 50px;}
  #point .column-2 p{width: 40%;}

    

}

@media screen and (max-width: 600px){
  .cnt{width: 90%;}
  #mv .lead.inner.sp_box{width: 90%;}
  a.btn{width: 100%;font-size: 1em;}

  #comcept .inner{flex-direction: column; margin-top: 0;/* align-items: center; justify-content: center; */}
  #comcept .inner figure{width: 100%; margin-top: 1.5em; }
  #comcept .inner figure:first-of-type{margin-right: 0;}
  /*-----------
    survey
    -----------*/
    .bg_survey{background: none;}
    #survey {padding: 0; margin-bottom: 0;}
    #survey a.btn{max-width: 100%; margin: 3em auto 0; width: 100%;}
    #survey h3{width: 46.34%;}
    #point h3{width: 99.39%;}
    #comcept h3{width: 56.34%;}
    /* #survey h3{width: 32%;}
    #survey .inner h4,
    #survey .inner p{text-shadow: 0 0 10px #fff;} */

    .preorder{width: 90%; margin-top: 50px;}
    .specifications{width: 90%; font-size: 1em;}
    .specifications h4{font-size: 1.5em;}
    .specifications dl{margin-top: 1.5em;}

    
}

@media screen and (max-width: 375px){
  a.btn .small{display: block;}
}