@charset "utf-8";
/* CSS Document */
@import url('../css/product/common.css');

#topimage, .modal-switch{ background-color: #13406b; }
#topimage img { width: 100%; }
/*youtube*/
.modal-switch a{ display: block; }
#modal .movie_title{ line-height: 1.4em; }
/*wave*/
#specificationWrap ,#specification{ position: relative; }
#specificationWrap::before,
#specificationWrap::after,
#use::after{ position: absolute; content: ""; background-repeat:no-repeat; background-position: 0 0; background-size: 100%; 
  width: 100%; height: 162px;
}

#specification::before{ 
   position: absolute; content: ""; background-repeat:no-repeat; background-position: 0 0; background-size: 100%; 
}




#specification{ background: #fffeef; display: flex; position: relative; 
margin-left: auto; margin-right: auto; box-sizing: border-box; }
#specification ul{  display: flex;  width: 100%;}
#specification figure{ position: absolute; content: ""; top: -240px; right: 7vw; max-width: 355px;  width: 50%;}

#use{ background: #add4e8;z-index: -1; position: relative;}
#use::after{ z-index: 2;}
#use picture{ position: relative; z-index: 2; }

#info{ z-index: 1; position: relative;display: flex; justify-content: center; align-items: center; background: #fff;}
#info li:first-child{ width: 370px; }
#info li:last-child img{ width: 320px; }




/*PC
----------------------------------------------------*/
@media screen and (min-width:2001px),print{
#specificationWrap::before,#specificationWrap::after,#use::after{ max-width: inherit; }
}
@media screen and (max-width:2000px),print{
#specificationWrap::before,#specificationWrap::after,#use::after{  max-width: 2000px;}
}

@media screen and (min-width:1521px),print{
.modal-switch{ padding:130px 0 116px }
#specificationWrap h3{ padding-top: 236px; margin-bottom: 35px;}
#specification{ max-width: 1520px; border-radius:20px;  margin-bottom: 130px; padding:60px 4.5vw}
#specification::before{ max-width: 449px; width: 31%; height: 238px; top: -260px; left: 70px; }

#use::after{ margin-top: -8.4vw; }
/*#use picture img{ width: 57vw; }*/
}

@media screen and (max-width:1520px) and (min-width:1081px),print{
.modal-switch{ padding: 9vw 0 }

#specification{  border-radius:20px;  margin-bottom: 100px; padding:3.5vw 4vw}
#specification::before{  width: 29%; left: 1%; height: 56%; top: -21vw;}
#specificationWrap h3{ padding-top: 190px; margin-bottom: 3.5%;}
#specification::before, #specification figure{ background-size: 100%;}
#specification figure{  width: 26%; right: 4.5vw; top: -17vw; }
#specification li{ width: 23%; }

#use::after{ margin-top: -10vw; }
#use picture img{ width: 97%; }
}

@media screen and (min-width:1081px),print{
#modal .movie_title { width: 600px;}
#specification{ width: 96%;}
#specification::before{ background-image: url(../images/soon.png?0);}
#specification ul{ justify-content: space-between;}
#specification li{ width: 21.5%; }
#use{ padding-top: 160px; }
#use picture img{ max-width: 1489px;/*2976*/  display: block;  margin: 0 auto; }

#info li:first-child{ margin-right: 30px; }
}
    

/*Tab
--------------------------------------------------*/
@media screen and (max-width:1080px) and (min-width:751px){
.modal-switch{ padding: 8% 0;}
#modal .movie_title{ width: 46vw; }
#specification::before{  width: 100%;}
#specificationWrap h3{ padding-top: 20vw; margin-bottom: 200px; }

#use{ padding-top: 16vw; }
#use::after{ margin-top: -16vw }
#use picture img{ width: 90%; }

#info{ margin-top: -5vw; padding-top: 5%;}

}

@media screen and (max-width:1080px) and (min-width:641px){
#specification{  padding: 4vw 5vw;}
}

/*Tab&Phone
--------------------------------------------------*/
@media screen and (max-width:1080px){
.modal-switch a img{ border-radius: 6px; }

#specification{ border-radius:20px; margin-top: 7vw; margin-bottom: 10%;  width: 90%;}
#specification::before{ max-width: 554px;
   height: 238px; left: 50%; top: -90px; 
  background-image: url(../images/sp/soon_sp.png?0);
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); }

#specification ul{ flex-wrap: wrap; justify-content: center; padding:44px 3% ;}
#specification li:not(:nth-child(3)) { width: 70%;}
#specification li:nth-child(3) { width: 81%;}
#specification li:not(:last-child){ margin-bottom: 12%; }
}


@media screen and (min-width:751px){
#specificationWrap::before{ background-image: url(../images/mvwave.gif); }
#specificationWrap::after{ background-image: url(../images/howtowave.png);}
#use::after{ background-image: url(../images/footerwave.png?0); height: 233px;}
#info{ margin-bottom: 130px; }

}



@media screen and (min-width:641px){
.modal-switch a img{ border-radius: 20px; }
}

@media screen and (max-width:640px){
#use::after{ margin-top: -18vw; }
}

/*Phone
--------------------------------------------------*/
@media screen and (max-width:750px){
.modal-switch{ padding: 10% 2% 6%;}
#specificationWrap h3{ padding-top: 26vw; margin-bottom: 26vw; padding-left: 5%; padding-right: 5%; }
#specification::before{ width: 86%; height: 34vw; top: -12vw;}
#specificationWrap::before{ background-image: url(../images/sp/mvwave.gif?0); }
#specificationWrap::after{ background-image: url(../images/sp/howtowave.png?0); }
#use{ padding-top: 21vw; }
#use::after{ background-image: url(../images/sp/footerwave.png?a); height: 162px;  }
#use img{ width: 86%; }

#info{ flex-wrap: wrap; padding-top: 8%; margin-bottom: 16%; }
#info li:first-child{ order: 1; padding-left:10%; margin-right: 9%; margin-top: 8%;}
#info li:last-child{ padding:0 14% 0 17% }
}

@media screen and (max-width:750px) and (min-width:641px){
#use::after{ margin-top: -19vw; }
}

@media screen and (max-width:750px) and (min-width:531px){
#modal .movie_title{ width: 50vw; }
}

@media screen and (max-width:530px) and (min-width:405px){
#modal .movie_title{ width: 55vw; }
}
@media screen and (max-width:404px) {
#modal .movie_title{ width: 61vw; }
}