@charset "utf-8";

/* ==================================================
Common CSS
================================================== */

@media(min-width:641px){
/*STYLE*/
.bg {
    width:100%;
    height:100%;
    background:url(../img/bg.jpg) center;
    background-size:cover;
    position:fixed;
    z-index:-1;
    top:0;
    left:0;
}
}



/*STYLE*/
.wrap {
background:#000;
}

.pc {
    display:none;
}

.wrap {
    max-width:640px;
    margin:auto;
}

.bg {
}

.cts {
width:90%;
}

.titles {
padding-bottom:30px;
text-align:center;
position:relative;
}

.titles .icon {
    width:30px;
    margin:0 auto 10px;
}

.titles h2 {
font-size:160%;
font-weight:bold;
line-height:135%;
color:#fff;
}



/*HEADER*/
header {
    width:25px;
    position:fixed;
    top:12px;
    left:12px;
    z-index:999;
}


/*MV*/
.mv {
    background:url(../img/mv_bg.jpg) center;
    background-size:cover;
    padding:25px 0;
    position:relative;
}

.mv h2 {
    font-size:135%;
    font-weight:600;
    line-height:150%;
    color:#fff;
    text-align:center;
    margin-bottom:20px;
}

.mv .mv_cts {
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:15px;
}

.mv .scenes {
    width:35%;
    position:absolute;
    right:0;
}

.mv .scenes .scene {
}

.mv .product {
    max-width:36%;
    position:relative;
}

.mv .copies {
    width:32%;
    display:flex;
    justify-content:center;
    position:relative;
    flex-direction:row-reverse;
}

.mv .copies .copy {
    width:18px;
    margin:0 5px;
}

.mv .blank {
    width:32%;
}

.mv .logo_cts {
    width:90%;
    margin:0 auto 15px;
}

.mv .logo_cts .logo_sub {
    width:90%;
    margin:0 auto 10px;
}

.mv .logo_cts h1 {
    margin:0 auto 5px;
}

.mv .logo_cts .logo_jp {
    width:70%;
    margin:auto;
}

.mv .price {
    width:80%;
    margin:0 auto 10px;
    padding-left:30px;
}

.mv .cta_btn {
    width:90%;
    margin:auto;
    animation:cta 1s ease infinite alternate;
    -webkit-animation:cta 1s ease infinite alternate;
}

.mv .cta_btn img {
    border-radius:15px;
}



/*ABOUT*/
#about {
    background:#000;
    position:relative;
    padding:50px 0 0;
}

#about .about_bg {
    width:100%;
    height:100vw;
    position:absolute;
    top:0;
    left:0;
    right:0;
    margin:auto;
    background:url(../img/about_bg.jpg) no-repeat;
    background-size:100%;
    background-position:top center;
    z-index:0;
    animation:thunder 2s infinite alternate;
    animation-delay:2s;
}

#about .cts {
    width:100%;
}

#about .intro {
    width:90%;
    margin:0 auto 25px;
}

#about .ex {
    position:relative;
}

#about .experiment {
    background:#1e1e1e;
    padding-bottom:50px;
    position:relative;
}

#about .experiment .item {
    background:#464646;
    font-weight:600;
    color:#fff;
    text-align:center;
    padding:10px;
    margin-bottom:20px;
}

#about .experiment .details {
    width:90%;
    margin:auto;
}

#about .experiment .details .detail {
    margin-bottom:50px;
}

#about .experiment .details .detail:last-child {
    margin-bottom:0;
}

#about .experiment .details .detail h3 {
    border:#fff 1px solid;
    color:#fff;
    line-height:100%;
    text-align:center;
    padding:10px;
    margin-bottom:15px;
}

#about .experiment .details .detail .explain {
    margin-bottom:20px;
}

#about .experiment .details .detail .status {
    background:#e6321e;
    font-weight:600;
    color:#fff;
    padding:7px 10px;
    text-align:center;
    margin-bottom:20px;
}

#about .experiment .details .detail .result {
    margin-bottom:20px;
}



/*FEATURE*/
#feature {
    padding:50px 0 0;
    background:url(../img/feature_bg.jpg) no-repeat bottom center;
    background-size:100%;
    overflow:hidden;
}

#feature .features {
    margin-bottom:30px;
}

#feature .features .feature {
    margin-bottom:12px;
    display:flex;
    background:rgba(40,40,40,0.7);
}

#feature .features .feature:last-child {
    margin-bottom:0;
}

#feature .features .feature .number {
    width:40px;
    height:auto;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#e6321e;
    color:#000;
    font-weight:600;
}

#feature .features .feature .tx {
    width:calc(100% - 40px);
    font-weight:600;
    padding:10px 15px;
}

#feature .product {
    width:60%;
    margin:auto;
}


/*MODE*/
#mode {
    padding:50px 0 30px;
    background:#1e1e1e;
}

#mode .intro {
    margin-bottom:25px;
}

#mode .modes {

}

#mode .modes .mode {
    margin-bottom:15px;
    background:#000;
    padding:25px;
}

#mode .modes .mode:last-child {
    margin-bottom:0;
}

#mode .modes .mode .mode_title {
    display:flex;
    align-items:center;
    margin-bottom:15px;
}

#mode .modes .mode .mode_title .display {
    width:80px;
    margin-right:20px;
}

#mode .modes .mode .mode_title .name {
}

#mode .modes .mode .mode_title .name .item {
    font-size:135%;
    font-weight:bold;
    padding-bottom:5px;
}

#mode .modes .mode .mode_title .name .hz {

}

#mode .modes .mode .mode_title .name .hz span:first-child {
    font-size:80%;
    font-weight:500;
    line-height:100%;
    border:#787878 1px solid;
    color:#787878;
    padding:3px 7px;
    margin-right:10px;
}




/*ACCESSORY*/
#accessory {
    padding:50px 0;
}

#accessory .accessories {
}

#accessory .accessories .accessory {
    margin-bottom:50px;
}

#accessory .accessories .accessory:last-child {
    margin-bottom:0;
}

#accessory .accessories .accessory .photo {
    margin-bottom:20px;
}

#accessory .accessories .accessory h3 {
    font-size:120%;
    font-weight:bold;
    line-height:100%;
    text-align:center;
    padding-bottom:15px;
}

#accessory .accessories .accessory .tx {
}




/*SAFETY*/
#safety {
    padding:50px 0 30px;
    background:#1e1e1e url(../img/safety_bg.png) no-repeat bottom center;
    background-size:100%;
}

#safety .cts {
    width:100%;
}

#safety .intro {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
}

#safety .intro .product {
    width:25%;
    margin-left:5%;
    position:relative;
}

#safety .safeties {

}

#safety .safeties .safety {
    background:rgba(150,190,60,0.7);
    margin-bottom:15px;
    padding:18px 20px;
}

#safety .intro .safeties .safety {
    padding:18px 15px 18px;
}

#safety .intro .safeties {
    width:65%;
}

#safety .safeties .safety:last-child {
    margin-bottom:0;
}

#safety .safeties .safety3 {
    width:95%;
}

#safety .safeties .safety4 {
    width:95%;
    margin:0 0 0 auto;
}

#safety .safeties .safety h3 {
    font-size:110%;
    font-weight:bold;
    line-height:100%;
    padding-bottom:7px;
}

#safety .intro .safeties .item h3 {
    padding-bottom:3px;
}

#safety .safeties .safety .en {
    font-size:70%;
    font-style:italic;
    color:#000;
    display:none;
}

#safety .safeties .safety .tx {
}



/*FAQ*/
#faq {
    padding:50px 0;
    background:#1e1e1e;
}

#faq .faqs {

}

#faq .faqs .faq {
    margin-bottom:50px;
}

#faq .faqs .faq:last-child {
    margin-bottom:0;
}

#faq .faqs .faq .question {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}

#faq .faqs .faq .question .item {
    width:45px;
    height:45px;
    background:#ff961e;
    border-radius:10vw;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:110%;
    font-weight:600;
    line-height:100%;
    color:#000;
}

#faq .faqs .faq .question h3 {
    width:calc(100% - 55px);
    font-size:110%;
    font-weight:bold;
    color:#ff961e;
}

#faq .faqs .faq .answer {
    display:flex;
    justify-content:space-between;
}

#faq .faqs .faq .answer .item {
    width:45px;
    height:45px;
    border:#787878 1px solid;
    border-radius:10vw;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:110%;
    font-weight:600;
    line-height:100%;
    color:#787878;
}

#faq .faqs .faq .answer .tx {
    width:calc(100% - 55px);
}




/*SPEC*/
#spec {
    padding:50px 0 30px;
}

#spec .product {
    margin-bottom:20px;
}

#spec .specs {
}

#spec .specs .spec {
    display:flex;
    justify-content:space-between;
    padding:12px 0;
    border-bottom:#464646 1px solid;
}

#spec .specs .spec:first-child {
}

#spec .specs .spec .item {
    width:30%;
    font-weight:600;
    color:#787878;
}

#spec .specs .spec .detail {
    width:65%;
}

#spec .caution {
    padding:12px 0;
}

#spec .caution .item {
    font-weight:600;
    color:#787878;
    padding-bottom:3px;
}

#spec .caution .tx {
    font-size:90%;
    padding-bottom:3px;
}

#spec .caution .detail {
    font-size:90%;
    color:#787878;
}



/*FOOTER*/
footer {
    font-size:70%;
    text-align:center;
    padding-top:30px;
}