@charset "UTF-8";

#main{  }
#main .main_set{ position: relative; }
#main .main_set h1{ display: block; width: 654px; height: 57px; position: absolute; left: calc(50% - 328px); top: calc(50% - 29px); overflow: hidden; }
#main .main_set h1:before { content: ""; display: block; width: 655px; height: 58px; background-image: url(../img/h1.svg); background-repeat: no-repeat; background-position: left top; }

#main .sub_set{ position: relative; }
#main #txt01.sub_set h2{ display: block; width: 395px; height: 90px; position: absolute; left: calc(50% - 198px); top: calc(50% - 45px); overflow: hidden; opacity: 0; }
#main #txt01.sub_set h2:before { content: ""; display: block; width: 395px; height: 90px; background-image: url(../img/txt01.png); background-repeat: no-repeat; background-position: left top; background-size: 100%; }

#main #txt02.sub_set h2{ display: block; width: 450px; height: 90px; position: absolute; left: calc(50% - 225px); top: calc(50% - 45px); overflow: hidden; opacity: 0; }
#main #txt02.sub_set h2:before { content: ""; display: block; width: 450px; height: 90px; background-image: url(../img/txt02.png); background-repeat: no-repeat; background-position: left top; background-size: 100%; }

#main #txt03.sub_set h2{ display: block; width: 438px; height: 90px; position: absolute; left: calc(50% - 219px); top: calc(50% - 45px); overflow: hidden; opacity: 0; }
#main #txt03.sub_set h2:before { content: ""; display: block; width: 438px; height: 90px; background-image: url(../img/txt03.png); background-repeat: no-repeat; background-position: left top; background-size: 100%; }


.product{ width: 960px; margin-left: auto; margin-right: auto; padding-bottom: 138px; }
.product .inner{ padding-top: 155px; width: 923px; }
.product .inner .lf{ display: table-cell; padding-right: 30px; }
.product .inner .lf img{ margin-bottom: 35px; }
.product .inner .lf p.name{ font-size: 20px; font-weight: normal; color: #8cbe41; min-height: 65px; }
.product .inner .lf p.name .sp{ display: none; }
.product .inner .lf p{ width: 370px; margin-left: auto; margin-right: auto; }
.product .inner .lf p.procode{ font-size: 18px; font-weight: normal; color: #4b4b4d; padding-bottom: 35px; }
.product .inner .lf .cartbtn{ text-align: center; }
.product .inner .lf .cartbtn .btn{  }
.product .inner .lf .cartbtn .btn input[type=image]{ border-radius: 0px; }
.product .inner .lf .cartbtn .btn:hover{ opacity: .7; }
.product .inner .lf .cartbtn p{ font-size: 14px; padding-top: 4px; }


.product .inner .ri{ display: table-cell; padding-left: 30px; }
.product .inner .ri img{ margin-bottom: 35px; }
.product .inner .ri p{ width: 370px; margin-left: auto; margin-right: auto; }
.product .inner .ri p.name{ font-size: 20px; font-weight: normal; color: #d95e26; min-height: 65px; }
.product .inner .ri p.name .sp{ display: none; }
.product .inner .ri p.name span{ font-size: 18px; font-weight: normal; }
.product .inner .ri p.procode{ font-size: 18px; font-weight: normal; color: #4b4b4d; padding-bottom: 35px; }
.product .inner .ri .cartbtn{ text-align: center; }
.product .inner .ri .cartbtn .btn{  }
.product .inner .ri .cartbtn .btn:hover{ opacity: .7; }
.product .inner .ri .cartbtn p{ font-size: 14px; padding-top: 4px; }
.product .inner{ margin-bottom: 60px; }

.product .inner:after { content: ""; display: block; visibility: hidden; overflow: hidden; height: 0; clear: both; }

.toiawase{ width: 636px; margin-left: auto; margin-right: auto; }
.toiawase p.txt{ color: #4b4b4d; font-size: 18px; font-weight: normal; float: left; padding-top: 39px; line-height: 1em; }
.toiawase p.free_dial a,
.toiawase p.free_dial span{ width: 347px; height: 57px; overflow: hidden; float: right; }
.toiawase p.free_dial a:before,
.toiawase p.free_dial span:before{ content: ""; display: block; width: 347px; height: 57px; background-image: url(../img/free_dial.png); background-repeat: no-repeat; background-position: left top; background-size: 347px auto; }

.toiawase p.free_dial.pc{ display: block; }
.toiawase p.free_dial.sp{ display: none; }

.toiawase:after { content: ""; display: block; visibility: hidden; overflow: hidden; height: 0; clear: both; }

#product2{ padding-bottom: 80px; }

#spec{ padding-top: 95px; }
#spec table{ border-bottom: none; }
#spec table tr{ border-top: solid 1px #4b4b4d; }
#spec table tr th{ width: 145px; }
#spec table tr th,
#spec table tr td{ text-align: left; font-size: 13px; padding-top: 14px; padding-bottom: 14px; }
#spec .lf{ width: 460px; float: left; }
#spec .ri{ width: 460px; float: right; }
#spec dl{ clear: both; border-top: solid 1px #4b4b4d; border-bottom: solid 1px #4b4b4d; }
#spec dl dt{ font-size: 13px; padding-top: 14px; padding-bottom: 14px; display: table-cell; width: 145px; font-weight: normal; }
#spec dl dd{ font-size: 12px; line-height: 1.5em; padding-top: 14px; padding-bottom: 14px; display: table-cell; }


#concept{ border-top: solid 1px #bff30b; border-bottom: solid 1px #bff30b; padding-top: 125px; padding-bottom: 125px; }
#concept .inner{ width: 790px; margin-left: auto; margin-right: auto; }
#concept .inner h2{ display: block; width: 489px; height: 40px; overflow: hidden; margin-bottom: 57px; }
#concept .inner h2:before{ content: ""; display: block; width: 489px; height: 40px; background-image: url(../img/concept_ttl.svg); background-repeat: no-repeat; background-repeat: no-repeat; background-size: 100%; }
#concept .inner p{ font-size: 20px; line-height: 1.9em; font-weight: normal; color: #4b4b4d; letter-spacing: 0.035em; }

#effect{}
#effect .inner{ width: 960px; margin-left: auto; margin-right: auto; padding-top: 117px; }
#effect .inner .hd{ padding-bottom: 115px; }
#effect .inner .hd .logo { display: block; width: 292px; height: 71px; float: left; overflow: hidden; }
#effect .inner .hd .logo:before { content: ""; display: block; width: 292px; height: 71px; background-image: url(../img/logo.svg); background-repeat: no-repeat; background-position: left top; background-size: 100%; }

#effect .inner .hd .txt{ text-align: right; float: right; padding-top: 5px; }
#effect .inner .hd .txt p{ margin: 0px; width: 265px; height: 58px; overflow: hidden; }
#effect .inner .hd .txt p:before { content: ""; display: block; width: 265px; height: 58px; background-image: url(../img/hd_txt.svg); background-repeat: no-repeat; background-position: left top; }
#effect .inner .hd:after { content: ""; display: block; visibility: hidden; overflow: hidden; height: 0; clear: both; }


#effect .inner h2{ width: 427px; height: 40px; overflow: hidden; margin-left: auto; margin-right: auto; margin-bottom: 90px; }
#effect .inner h2:before { content: ""; display: block; width: 427px; height: 40px; background-image: url(../img/effect_ttl.png); background-repeat: no-repeat; background-position: left top; background-size: 100%; }
#effect .inner ul{ margin-bottom: 160px; }
#effect .inner ul li{ width: 280px; height: 280px; list-style: none; overflow: hidden; display: block; float: left; }

#effect .inner ul li.ef1{ float: left; }
#effect .inner ul li.ef1:before{ content: ""; display: block; width: 280px; height: 280px; background-image: url(../img/effect1.png); background-repeat: no-repeat; background-size: 100%; }
#effect .inner ul li.ef2{ margin-left: 60px; }
#effect .inner ul li.ef2:before{ content: ""; display: block; width: 280px; height: 280px; background-image: url(../img/effect2.png); background-repeat: no-repeat; background-size: 100%; }
#effect .inner ul li.ef3{ float: right; }
#effect .inner ul li.ef3:before{ content: ""; display: block; width: 280px; height: 280px; background-image: url(../img/effect3.png); background-repeat: no-repeat; background-size: 100%; }
#effect .inner ul:after { content: ""; display: block; visibility: hidden; overflow: hidden; height: 0; clear: both; }

#effect .inner p img{ width: 960px; height: auto; }
#effect .inner p .sp{ display:none; }
#effect .inner p .pc{ display:block; }
#effect .inner p.txt1{ padding-bottom: 167px; }
#effect .inner p.txt2{ padding-bottom: 172px; }
#effect .inner p.txt3{ padding-bottom: 165px; }
#effect .inner p.txt4{ padding-bottom: 0px; }
#effect .inner p.txt5{ padding-bottom: 100px; padding-top: 165px; }
#effect .inner p.txt6{ padding-bottom: 45px; }

#message{ background-color: #bff30b; padding-top: 80px; padding-bottom: 80px; }
#message .inner { width: 800px; margin-left: auto; margin-right: auto; background-color: #fff; padding: 80px;  }
#message .inner h2{ display: block; width: 438px; height: 40px; margin-bottom: 90px; }
#message .inner h2:before { content: ""; display: block; width: 438px; height: 40px; background-image: url(../img/message_ttl.png); background-repeat: no-repeat; background-position: left top; background-size: 100%; }
#message .inner h3{ color: #008e68; font-size: 26px; line-height: 1.6em; font-weight: normal; margin-bottom: 30px; }
#message .inner p{ font-size: 20px; color: #4b4b4d; line-height: 1.6em; margin-bottom: 65px; font-weight: normal; }
#message .inner p span{ background-color: #bff30b; }

#message .inner p:last-child{ margin-bottom: 15px; }

@media screen and (max-width:740px) {
    
    #main .main_set{ position: relative; }
    #main .main_set h1{ display: block; width: 327px; height: 29px; position: absolute; left: calc(50% - 163px); top: calc(50% - 15px); overflow: hidden; opacity: 1; padding-left: 0px; }
    #main .main_set h1:before { content: ""; display: block; width: 327px; height: 29px; background-image: url(../img/h1.svg); background-repeat: no-repeat; background-position: left top; background-size: 100%; }

    #main .sub_set{ position: relative; }
    #main #txt01.sub_set h2{ display: block; width: calc(395px / 2); height: 45px; position: absolute; left: calc(50% - calc(198px / 2)); top: calc(50% - (45px / 2)); overflow: hidden; opacity: 1; }
    #main #txt01.sub_set h2:before { content: ""; display: block; width: calc(395px / 2); height: 45px; background-image: url(../img/txt01.png); background-repeat: no-repeat; background-position: left top; background-size: 100%; }

    #main #txt02.sub_set h2{ display: block; width: calc(450px / 2); height: 45px; position: absolute; left: calc(50% - calc(225px / 2)); top: calc(50% - (45px / 2)); overflow: hidden; opacity: 1; }
    #main #txt02.sub_set h2:before { content: ""; display: block; width: calc(450px / 2); height: 45px; background-image: url(../img/txt02.png); background-repeat: no-repeat; background-position: left top; background-size: 100%; }

    #main #txt03.sub_set h2{ display: block; width: calc(438px / 2); height: 45px; position: absolute; left: calc(50% - calc(219px / 2)); top: calc(50% - (45px / 2)); overflow: hidden; opacity: 1; }
    #main #txt03.sub_set h2:before { content: ""; display: block; width: calc(438px / 2); height: 45px; background-image: url(../img/txt03.png); background-repeat: no-repeat; background-position: left top; background-size: 100%; }


    .product{ width: auto; max-width: 320px; margin-left: auto; margin-right: auto; padding-bottom: 34px; }
    .product .inner{ padding-top: 40px; }
    .product .inner .lf{ display: block; padding-right: 0px; padding-bottom: 60px; }
    .product .inner .lf img{ margin-bottom: 15px; width: calc(100% - 30px); height: auto; margin-left: 10px; margin-right: 10px; }
    .product .inner .lf p.name{ font-size: 18px; font-weight: normal; color: #8cbe41; min-height:inherit; padding-bottom: 10px; }
    .product .inner .lf p.name .sp{ display: block; }
    .product .inner .lf p{ width: auto; margin-left: 10px; margin-right: 10px; }
    .product .inner .lf p.procode{ font-size: 16px; font-weight: normal; color: #4b4b4d; padding-bottom: 35px; }
    .product .inner .lf .cartbtn{ text-align: center; }
    .product .inner .lf .cartbtn .btn{  }
    .product .inner .lf .cartbtn .btn:hover{ opacity: .7; }


    .product .inner .ri{ display: block; padding-left: 0px; }
    .product .inner .ri img{ margin-bottom: 15px; width: calc(100% - 30px); height: auto; margin-left: 10px; margin-right: 10px; }
    .product .inner .ri p{ width: auto; margin-left: 10px; margin-right: 10px; }
    .product .inner .ri p.name{ font-size: 18px; font-weight: normal; color: #d95e26; min-height:inherit; padding-bottom: 10px; }
    .product .inner .ri p{ width: auto; margin-left: 18px; margin-right: 20px; }
    .product .inner .ri p.name .sp{ display: block; }
    .product .inner .ri p.name span{ font-size: 16px; font-weight: normal; }
    .product .inner .ri p.procode{ font-size: 16px; font-weight: normal; color: #4b4b4d; padding-bottom: 35px; }
    .product .inner .ri .cartbtn{ text-align: center; }
    .product .inner .ri .cartbtn .btn{  }
    .product .inner .ri .cartbtn .btn:hover{ opacity: .7; }
    .product .inner{ margin-bottom: 30px; width: auto; }

    .product .inner:after { content: ""; display: block; visibility: hidden; overflow: hidden; height: 0; clear: both; }

    .toiawase{ width: auto; margin-left: auto; margin-right: auto; }
    .toiawase p.txt{ color: #4b4b4d; font-size: 16px; font-weight: normal; float: none; padding-top: 18px; line-height: 1em; text-align: center; margin-bottom: 17px; }
    
    .toiawase p.free_dial{ width: 250px; margin-left: auto; margin-right: auto; }
    .toiawase p.free_dial a,
    .toiawase p.free_dial span{ width: 250px; height: 46px; overflow: hidden; float: none; display: block; }
    .toiawase p.free_dial a:before,
    .toiawase p.free_dial span:before{ content: ""; display: block; width: 250px; height: 46px; background-image: url(../img/free_dial.png); background-repeat: no-repeat; background-position: left top; background-size: 250px auto; }

    .toiawase p.free_dial.pc{ display: none; }
    .toiawase p.free_dial.sp{ display: block; }

    .toiawase:after { content: ""; display: block; visibility: hidden; overflow: hidden; height: 0; clear: both; }

    #spec{ padding-top: 95px; }
    #spec table{ border-bottom: solid 1px #4b4b4d; }
    #spec table tr{ border-top: solid 1px #4b4b4d; }
    #spec table tr th{ width: auto; }
    #spec table tr th{ text-align: left; font-size: 13px; line-height: 1.7em; padding-top: 14px; padding-bottom: 0px; display: block; }
    #spec table tr td{ text-align: left; font-size: 13px; line-height: 1.7em; padding-top: 0px; padding-bottom: 14px; display: block; }
    #spec .lf{ width: 100%; float: none; }
    #spec table.lf{ border-bottom: none; }
    #spec .ri{ width: 100%; float: none; }
    #spec dl{ clear: both; border-bottom: solid 1px #4b4b4d; border-top: none; }
    #spec dl dt{ font-size: 13px; padding-top: 14px; padding-bottom: 0px; display: block; width: auto; }
    #spec dl dd{ font-size: 12px; line-height: 1.5em; padding-top: 0px; padding-bottom: 14px; display: block; }
    

    #concept{ border-top: solid 1px #bff30b; border-bottom: solid 1px #bff30b; padding-top: 62px; padding-bottom: 62px; }
    #concept .inner{ width: auto; margin-left: 40px; margin-right: 40px; }
    #concept .inner h2{ display: block; width: 245px; height: 20px; overflow: hidden; margin-bottom: 27px; }
    #concept .inner h2:before{ content: ""; display: block; width: 245px; height: 20px; background-image: url(../img/concept_ttl.svg); background-repeat: no-repeat; background-repeat: no-repeat; background-size: 245px auto; }
    #concept .inner p{ font-size: 16px; line-height: 1.8em; font-weight: normal; color: #4b4b4d; letter-spacing: 0.035em; }

    #effect{}
    #effect .inner{ width: auto; margin-left: auto; margin-right: auto; padding-top: 30px; }
    #effect .inner .hd{ padding-bottom: 30px; padding-left: 15px; padding-right: 15px; }
    #effect .inner .hd .logo { display: block; width: calc(292px / 2); height: calc(71px / 2); float: left; overflow: hidden; }
    #effect .inner .hd .logo:before { content: ""; display: block; width: calc(292px / 2); height: calc(71px / 2); background-image: url(../img/logo.svg); background-repeat: no-repeat; background-position: left top; background-size: 100%; }

    #effect .inner .hd .txt{ text-align: right; float: right; padding-top: 2px; }
    #effect .inner .hd .txt p{ margin: 0px; width: calc(265px / 2); height:  calc(58px / 2); overflow: hidden; }
    #effect .inner .hd .txt p:before { content: ""; display: block; width: calc(265px / 2); height:  calc(58px / 2); background-image: url(../img/hd_txt.svg); background-repeat: no-repeat; background-position: left top; }
    #effect .inner .hd:after { content: ""; display: block; visibility: hidden; overflow: hidden; height: 0; clear: both; }


    #effect .inner h2{ width: calc(427px / 2); height: calc(40px / 2); overflow: hidden; margin-left: auto; margin-right: auto; margin-bottom: 45px; }
    #effect .inner h2:before { content: ""; display: block; width: calc(427px / 2); height: calc(40px / 2); background-image: url(../img/effect_ttl.png); background-repeat: no-repeat; background-position: left top; background-size: 100%; }
    #effect .inner ul{ margin-bottom: 60px; padding-left: 0px; padding-right: 0px; width: 300px; margin-left: auto; margin-right: auto; }
    #effect .inner ul li{ width: 90px; height: 90px; list-style: none; overflow: hidden; display: block; float: left; }

    #effect .inner ul li.ef1{ float: left; }
    #effect .inner ul li.ef1:before{ content: ""; display: block; width: 90px; height: 90px; background-image: url(../img/effect1.png); background-repeat: no-repeat; background-size: 100%; }
    #effect .inner ul li.ef2{ margin-left: 16px; }
    #effect .inner ul li.ef2:before{ content: ""; display: block; width: 90px; height: 90px; background-image: url(../img/effect2.png); background-repeat: no-repeat; background-size: 100%; }
    #effect .inner ul li.ef3{ float: right; }
    #effect .inner ul li.ef3:before{ content: ""; display: block; width: 90px; height: 90px; background-image: url(../img/effect3.png); background-repeat: no-repeat; background-size: 100%; }
    #effect .inner ul:after { content: ""; display: block; visibility: hidden; overflow: hidden; height: 0; clear: both; }

    #effect .inner p{ margin-left: 20px; margin-right: 20px; }
    #effect .inner p img{ width: 100%; height: auto; }
    #effect .inner p .sp{ display:block; width: 100%; height: auto; }
    #effect .inner p .pc{ display:none; }
    #effect .inner p.txt1{ padding-bottom: 70px; }
    #effect .inner p.txt2{ padding-bottom: 70px; }
    #effect .inner p.txt3{ padding-bottom: 67px; }
    #effect .inner p.txt4{ padding-bottom: 0px; }
    #effect .inner p.txt5{ padding-bottom: 50px; padding-top: 83px; }
    #effect .inner p.txt6{ padding-bottom: 20px; }

    #message{ background-color: #bff30b; padding-top: 20px; padding-bottom: 20px; }
    #message .inner { width: auto; margin-left: 20px; margin-right: 20px; background-color: #fff; padding: 25px;  }
    #message .inner h2{ display: block; width: calc(438px / 2); height: calc(40px / 2); margin-bottom: 23px; }
    #message .inner h2:before { content: ""; display: block; width: calc(438px / 2); height: calc(40px / 2); background-image: url(../img/message_ttl.png); background-repeat: no-repeat; background-position: left top; background-size: 100%; }
    #message .inner h3{ color: #008e68; font-size: 18px; line-height: 1.6em; font-weight: normal; margin-bottom: 15px; }
    #message .inner p{ font-size: 16px; color: #4b4b4d; line-height: 1.6em; margin-bottom: 32px; font-weight: normal; }
    #message .inner p span{ background-color: #bff30b; }

    #message .inner p:last-child{ margin-bottom: 15px; }
}


@media screen and (max-width:320px) {
    
    #main .main_set{ position: relative; }
    #main .main_set h1{ display: block; width: 290px; height: 26px; position: absolute; left: calc(50% - 145px); top: calc(50% - 13px); overflow: hidden; }
    #main .main_set h1:before { content: ""; display: block; width: 290px; height: 26px; background-image: url(../img/h1.svg); background-repeat: no-repeat; background-position: left top; background-size: 290px auto; }
    
    .product{ width: auto; max-width: none; margin-left: 5%; margin-right: 5%; padding-bottom: 34px; }
}

/* cartBox */
.cartBox{ width: 241px;position: fixed;right: 0;bottom: 0;height: 405px;background: url(../../images/cartBoxBg.png) no-repeat top left;}
.smcart{display: none;}
.cartBox .btnBloc{margin: 0;padding: 0;position: absolute;bottom: 10px;left: 10px; height: 150px;width:219px;}
.cartBox .btnBloc table{border-collapse: collapse;border-spacing: 0;margin: 0;padding: 0;}
.cartBox .btnBloc td{padding: 0;margin: 0;}
.cartBox .btnBloc td form{margin: 0 0 8px 0;padding: 0;}
.cartBox .btnBloc td form:hover{opacity: .7;}
@media screen and (max-width:756px) {
.cartBox{ display: none;}
.smcart{display: block;width: 100%;position: fixed;bottom: 0;background-color: #fff;}
.smcart table{width: 100%;border-collapse: collapse;border-spacing: 0;margin: 0;padding: 0;border-top: 1px solid #E8E8E8;}
.smcart td.image{width: 23.7%;}
.smcart td.price{width: 38.5%;}
.smcart td.cart{width: 37.7%;}
.smcart td img{width: 100%;}
.smcart td from{width: 100%;margin: 0;}
.smcart td input{width: 100%;margin: 0;}
.smcart td form:hover{opacity: .7;}
}