﻿/* ===================== Common STYLE ===================== */
/* ===================== Second Page STYLE ===================== */
.dv_h2 {
    background: url(../common_img/br.png) no-repeat center top;
    height: 180px;
    display: table;
    width: 100%;
}

    .dv_h2 h2 {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }



.brc {
    margin: 15px 0 70px;
}

    .brc a {
        color: #52bb8b;
    }

.tt1 {
    text-align: center;
    margin: 100px 0 40px 0;
}

.center {
    text-align: center;
}

.tb_form {
    width: 100%;
    margin-top: 30px;
}

    .tb_form th, .tb_form td {
        display: block;
        vertical-align: top;
        text-align: left;
        padding: 15px;
        vertical-align: top;
    }

    .tb_form tr:nth-child(2n+2) th, .tb_form tr:nth-child(2n+2) td {
        background: #e9faf2;
    }

    .tb_form th {
        padding-bottom: 0;
    }


        .tb_form th.do:before {
            content: '必須';
            color: #fff;
            background: #f61515;
            padding: 2px 8px;
            margin-right: 10px;
            font-weight: normal;
        }

        .tb_form th.xanh:before {
            content: '任意';
            color: #fff;
            background: #25685f;
            padding: 2px 8px;
            margin-right: 10px;
            font-weight: normal;
        }

    .tb_form input[type=text] {
        width: 100%;
        height: 30px;
        text-indent: 5px;
    }

    .tb_form select {
        width: 100%;
        margin-top: 10px;
        height: 35px;
    }

.ip_address {
    width: 180px !important;
}

.tb_form li {
    float: left;
    margin-right: 60px;
}

.tb_form textarea {
    width: 100%;
    height: 100px;
}

.bold {
    font-weight: bold;
}

.ul_pp {
    margin: 30px 0;
    padding: 15px;
    background: url(../contact/images/br.png) no-repeat right bottom #e7f8f0;
    background-size: 50%;
}

    .ul_pp li {
        margin: 10px 0;
        text-indent:-20px;
        padding-left:20px;
    }

#footer {
    margin-top: 100px;
}

aside {
    margin-top: 30px;
}

.content_page {
}

.ul_battery {
    border: 1px solid #a9e1ce;
    margin-top: -6px;
    padding: 8px;
    padding-top: 20px;
    margin-bottom: 25px;
}

    .ul_battery li {
        border-bottom: 1px dashed #e5e5e5;
        padding-bottom: 10px;
        margin-bottom: 10px;
        display: table;
        width: 48%;
        position: relative;
        float: left;
    }

        .ul_battery li:nth-child(2n+2) {
            float: right;
        }



        .ul_battery li p {
            display: table-cell;
            vertical-align: middle;
            padding-right: 20px;
        }

        .ul_battery li a {
            width: 70px;
            display: table-cell;
            vertical-align: middle;
        }

        .ul_battery li p:last-child {
            background: url(../common_img/sb_arr.png) no-repeat center right 10px;
        }

    .ul_battery a:before {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        content: '';
    }

.sb_box {
    background: #dcf6ee;
    margin-left: 10px;
    margin-top: -30px;
    padding: 10px;
    padding-top: 35px;
}

    .sb_box ul {
        margin-top: 10px;
    }

    .sb_box li {
        background: url(../common_img/sb_arr2.png) no-repeat top 4px left;
        margin-top: 5px;
        padding-left: 15px;
    }

    .sb_box a {
        text-decoration: none;
    }

.box_battery h3 {
    font-size: 20px;
    margin-bottom: 30px;
}

.batter_list li {
    float: left;
    padding: 10px;
    border: 2px solid #fff;
    background: #88d0b8;
    position: relative;
    font-style: italic;
    width: 33.3%;
    text-align: center;
    display: grid;
    align-items: center;
}
.batter_list li:nth-child(4){
	width:66.6%;
}

    .batter_list li a {
        text-decoration: none;
        color: #fff;
        font-weight: bold;
        font-style: italic;
    }

        .batter_list li a:before {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            content: '';
        }

    .batter_list li.active {
        background: #145346;
    }

    .batter_list li:last-child {
        width: 33.3%;
    }


.tt2 {
    margin: 55px 0 40px 0;
    font-size: 30px;
    position: relative;
    font-style: italic;
}

    .tt2:before {
        width: 100px;
        height: 3px;
        content: '';
        background: #85eaaa;
        position: absolute;
        bottom: -10px;
        left: 0;
    }

    .tt2 span {
        font-size: 20px;
    }

.ov_hide {
    overflow: hidden;
}

.box_battery .clearfix {
    margin-bottom: 20px;
}

    .box_battery .clearfix > img {
        float: left;
        margin-right: 20px;
    }

.box_battery th, .box_battery td {
    vertical-align: top;
    text-align: left;
    font-weight: normal;
    padding-bottom: 5px;
}

.box_battery tr:first-child td {
    font-weight: bold;
}

.box_battery th {
    font-weight: bold;
}

.box_battery table {
    margin: 20px 0;
    width: 100%;
	margin:0 auto;
}
.box_battery.detail table {
	width:94%;
	margin:0 auto;
}
.box_battery.detail .clearfix > img {
	margin:0 auto; 
	display:block;
	width:94%;
	float:none;
}

.box_battery th, .box_battery td {
    display: block;
}

.box_battery td {
    border-bottom: 1px dotted #d2d2d2;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.box_contact {
    position: relative;
    margin-top: 30px;
}

    .box_contact a.bn_tel {
        position: absolute;
        top: 53%;
        left: 0%;
        width: 50%;
        height: 20%;
        text-indent: -999999px;
    }

    .box_contact a.bn_contact {
        position: absolute;
        top: 58%;
        left: 56%;
        width: 43%;
        height: 25%;
        text-indent: -999999px;
    }


.box_battery.detail th, .box_battery.detail td {
    border-bottom: 1px dashed #e6e6e6;
    padding: 10px 0;
}

.box_battery.detail tr:last-child th, .box_battery.detail tr:last-child td {
    border-bottom: none;
}

.dv_back .back {
    position: absolute;
    top: 0;
    left: calc(50% - 103px);
}

.dv_back {
    position: relative;
}

.banner_battery {
    position: relative;
    margin-bottom: 40px;
}



    .banner_battery .time {
        position: absolute;
        top: 155px;
        left: 113px;
        font-size: 12px;
        color: #fff;
    }

.banner_contact {
    text-align: center;
    position: relative;
}

    .banner_contact a {
        position: absolute;
        top: 75%;
        left: 3%;
        width: 50%;
        height: 20%;
        text-indent: -99999px;
    }



.tt3 {
    font-size: 18px;
    color: #14534a;
}

.nt_battery {
    margin-top: 20px;
}

    .nt_battery div {
        padding: 20px;
        background: rgba(220, 246, 238, 0.9);
    }

.tt4 {
    margin: 20px 0;
    font-size: 18px;
    position: relative;
    text-align: right;
}

    .tt4:before {
        width: 100px;
        height: 3px;
        content: '';
        background: #85eaaa;
        position: absolute;
        bottom: -10px;
        right: 0;
    }

    .tt4 span {
        transform: skewX(-10deg);
        display: inline-block;
    }

.dv_battery {
    background: url(../battery/images/br2.png) no-repeat center top;
    margin-top: 20px;
    padding: 15px;
    color: #fff;
}

.tt5 {
    font-size: 20px;
    position: relative;
    text-align: center;
    margin-bottom: 20px;
}

    .tt5:before {
        width: 100px;
        height: 3px;
        content: '';
        background: #85eaaa;
        position: absolute;
        bottom: -10px;
        left: calc(50% - 50px);
	
    }
	
	.supportpage  .tt5:before { 
		display:none;
	}

    .tt5 span {
        font-size: 20px;
    }

.dv_battery .clearfix {
    margin: 30px 0;
}

    .dv_battery .clearfix div {
        width: 300px;
        background: url(../battery/images/icon.png) no-repeat top left;
        padding-left: 25px;
        font-size: 12px;
    }

.dv_battery a {
    color: #fff;
}

.dv_battery .clearfix div span {
    font-weight: bold;
    font-size: 16px;
}

.dv_battery .center span {
    color: #07b379;
    font-weight: bold;
}
    .dv_battery .center span a {
        color: #07b379;
    }
    .mr80 {
        margin-right: 80px;
    }

.nt_about {
   
  
    position: relative;
    margin: 30px 0;
}

    .nt_about div {
        padding: 25px;
        position: relative;
 
            background: rgba(220, 246, 238, 0.92);
          
        }

    .nt_about p {
        position: relative;
        z-index: 9;
    }

.ln2 {
    line-height: 2;
}

.v_about {
    padding: 10px;
    border: 2px solid #32b16c;
    float: left;
    margin-right: 15px;
    width: 54%;
}

    .v_about p {
        background: url(../about/images/v.png) no-repeat center left;
        padding-left: 25px;
    }

.box_about {
    padding: 20px;
    text-align: center;
    background: url(../about/images/br2.png) no-repeat center bottom;
    margin: 30px 0;
    color: #fff;
}

.tt6 {
    font-size: 20px;
    color: #f27e11;
    text-align: center;
}

.box_line {
    background: url(../about/images/line.png) no-repeat center top, url(../about/images/line.png) no-repeat center bottom;
    padding: 20px;
    margin: 20px 0;
}

.relative {
    position: relative;
}

.ab_logo {
    background: #fce3d2;
    padding: 10px;
    line-height: 2;
}

.ab_nt {
    margin-top: 10px;
    font-weight: bold;
}

.mt70 {
    margin-top: 70px;
}

.tb_about {
    width: 100%;
}

    .tb_about th, .tb_about td {
        border-bottom: 1px dashed #e6e6e6;
        padding: 10px;
        vertical-align: top;
        display: block;
    }

    .tb_about th {
        text-align: left;
        border-bottom: none;
        padding-bottom: 0;
    }

.tt7 {
    background: url(../about/images/icon2.png) no-repeat top 7px left;
    padding-left: 20px;
    font-size: 16px;
    margin: 35px 0 20px 0;
    border-bottom: 1px dashed #d2d2d2;
    max-width: 360px;
    padding-bottom: 5px;
}

.list_sp1 {
    overflow: hidden;
}

    .list_sp1 p {
        border-left: 6px solid #f9e7a9;
        margin-bottom: 30px;
        font-size: 16px;
        padding-left: 10px;
        font-weight: bold;
    }

        .list_sp1 p:nth-child(2) {
            border-color: #efd577;
        }

        .list_sp1 p:nth-child(3) {
            border-color: #e6bf32;
        }

        .list_sp1 p:nth-child(4) {
            border-color: #c49d0f;
        }

.about_contact {
    position: relative;
    margin-top: 30px;
}


    .about_contact a.tel {
        position: absolute;
        top: 56%;
        left: 0%;
        width: 51%;
        height: 20%;
        text-indent:-99999px;
    }

    .about_contact a.contact {
        position: absolute;
        top: 74%;
        left: 26%;
        width: 48%;
        height: 20%;
        text-indent:-99999px;
    }

.list_sp2 {
    overflow: hidden;
}

    .list_sp2 p {
        border-left: 6px solid #ccfaa3;
        margin-bottom: 30px;
        font-size: 16px;
        padding-left: 10px;
        font-weight: bold;
    }

        .list_sp2 p:nth-child(2) {
            border-color: #9ded55;
        }

        .list_sp2 p:nth-child(3) {
            border-color: #67c413;
        }

.note_about {
    margin: 60px 0 10px 0;
    font-size: 18px;
    color: #ee1020;
    font-weight: bold;
}

    .note_about img {
        vertical-align: middle;
        margin-right: 10px;
    }

.ul_about {
    background: #fbe3e5;
    padding: 15px;
    margin-top: 15px;
}

    .ul_about li {
        padding: 10px 0;
        text-indent: -20px;
        margin-left: 20px;
    }

.tt8 {
    font-size: 20px;
    text-align: center;
    color: #0f9683;
    margin-bottom: 20px;
}

    .tt8 span {
        color: #f77015;
    }

.dv_maint {
    position: relative;
}

    .dv_maint div {
        color: #fff;
        background: #666666;
        padding:20px;
        margin-top:-1px;
    }

    .dv_maint p {
      
    }

.box_maint .box {
    margin-top: 30px;
}

    .box_maint .box p img {
        float: left;
        width:40%;
        margin-right: 10px;
    }

    .box_maint .box:nth-child(2n+2) p img {
        float: right;
        margin-right: 0;
        margin-left: 10px;
    }
     .box_maint .box:nth-child(2n+1) h4{
         text-align:right;
     }
.box_maint h4 {
    font-size: 18px;
    margin-bottom: 20px;
    padding-top: 15px;
    position: relative;
}

    .box_maint h4:before {
        content: '';
        width: 100px;
        height: 3px;
        background: #03ddbd;
        position: absolute;
        top: 0;
        right: 0;
    }

    .box_maint h4 span {
        transform: skewX(-10deg);
        display: block;
    }

.box_maint .box:nth-child(2n+2) h4:before {
    left: 0;
    right: auto;
}

.box_maint .box:nth-child(2) h4:before {
    background: #03acdd;
}

.box_maint .box:nth-child(3) h4:before {
    background: #f3c351;
}

.box_maint .box:nth-child(4) h4:before {
    background: #fa8904;
}

.box_maint .box:nth-child(5) h4:before {
    background: #fb3cac;
}

.box_maint .box:nth-child(6) h4:before {
    background: #fa041b;
}

.box_maint .box:nth-child(7) h4:before {
    background: #8637e8;
}

.dv_tb_high {
  
}

    .dv_tb_high p {
        text-align: right;
        font-size: 12px;
        margin-bottom: 10px;
    }

    .dv_tb_high table {
        width: 100%;
    }

    .dv_tb_high th, .dv_tb_high td {
        vertical-align: middle;
        text-align: center;
        border: 1px solid #e8e8e8;
        font-size: 12px;
        padding: 5px 0;
    }

    .dv_tb_high tr:first-child th {
        color: #fff;
        background: #62bda1;
    }

    .dv_tb_high th {
        background: #e6fdf6;
        width: 15px;
    }

.list_sp3 {
    overflow: hidden;
}

    .list_sp3 h4 {
        border-left: 6px solid #a9e1ce;
        margin-bottom: 5px;
        font-size: 16px;
        padding-left: 10px;
        font-weight: bold;
    }

        .list_sp3 h4:nth-child(3) {
            border-color: #98e2c9;
        }

        .list_sp3 h4:nth-child(5) {
            border-color: #31c593;
        }

    .list_sp3 p {
        margin-bottom: 30px;
        padding-left: 16px;
    }
.case_list{
    margin:0 -3px;
}
.case_list li {
    float: left;
    width:50%;
    padding:10px;
    border:3px solid #fff;
    background: #88d0b8;
    position: relative;
    font-style: italic;
    text-align:center;
    margin-top:20px;
    display:grid;
    align-items:center;
}

    .case_list li a {
        text-decoration: none;
        color: #fff;
    }

        .case_list li a:before {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            content: '';
        }

  

      

    .case_list li img {
        position: absolute;
        top: -21px;
        left: 5px;
    }

.tt9 {
    line-height: 1;
    font-size: 20px;
    margin:20px 0;
    background: url(../case/images/line.png) no-repeat left 60px bottom;
}

    .tt9 img {
        vertical-align: middle;
        margin-right: 15px;
    }

    .tt9 span {
        transform: skewX(-10deg);
        display: inline-block;
    }

.box_case {
    text-align:center;
}

    .box_case .case_img {
       width:80%;
       margin-bottom:30px;
    }

    .box_case .note {
        border: 1px solid #c3d24a;
        position: relative;
        padding: 20px;
        padding-top: 40px;
        margin-bottom:20px;
        text-align:left;
    }
     .box_case .ov_hide{
         overflow:inherit;
     }
        .box_case .note h5 {
            position: absolute;
            top: -10px;
            left:20px;
            background: #c3d24a;
            width: 125px;
            text-align: center;
            font-size: 16px;
            color: #fff;
            padding: 5px 0;
        }
        .box_case p{
            text-align:left;
        }


.ab_icon {
    background: url(../about/images/icon.png) no-repeat center left;
    background-size: 50px;
    padding-left: 60px;
    font-size: 15px;
    font-weight: bold;
    color: #f3872a;
    overflow: hidden;
}

.tt10 {
    margin: 20px 0 20px 0;
    font-size: 18px;
    position: relative;
}

    .tt10:before {
        width: 100px;
        height: 3px;
        content: '';
        background: #85eaaa;
        position: absolute;
        bottom: -10px;
        left: 0;
    }

    .tt10 span {
        transform: skewX(-10deg);
        display: block;
    }



.tt11 {
    margin: 55px 0 40px 0;
    font-size: 30px;
    position: relative;
}

    .tt11:before {
        width: 100px;
        height: 3px;
        content: '';
        background: #85eaaa;
        position: absolute;
        bottom: -10px;
        left: 0;
    }

    .tt11 h3 {
        transform: skewX(-10deg);
    }

        .tt11 h3 span {
            font-size: 20px;
        }

.tb_cycle {
    width: 740px;
}

    .tb_cycle tr:first-child th, .tb_cycle tr:nth-child(2) th {
        color: #fff;
        background: #959595;
    }

    .tb_cycle th, .tb_cycle td {
        border: 1px solid #d6d3d3;
        vertical-align: middle;
        text-align: center;
        font-weight: normal;
        padding: 5px 0;
    }

    .tb_cycle tr th {
        color: #fff;
        background: #8baa75;
    }

.mt60 {
    margin-top: 60px;
}

.box_step .clearfix img {
    float: right;
    margin-left: 30px;
    max-width:40%;
}

.box_step .box:nth-child(2n+2) .clearfix img {
    float: left;
    margin-right: 30px;
    margin-left: 0;
}

.box_step .clearfix {
    margin-top: 30px;
}
.box_step .clearfix p{
    overflow:hidden;
}
.box_step .box {
    margin-top: 30px;
}
.box_step .box h4{
    border-bottom:1px solid #dfeb56;
}
.box_how li {
    float: left;
    margin-bottom: 20px;
    width: 48%;
    
    background: #e7f0ee;
}
.box_how li img{
    background:#fff;
}
    .box_how li:nth-child(2n+2) {
      float:right;
    }

.box_how p {
    padding: 15px 10px;
    margin-top: -7px;
}

.nt_how {
    border: 3px dashed #4bb994;
    padding: 30px 15px;
    border-radius: 5px;
    margin: 30px 0;
}

    .nt_how p {
        margin-top: 30px;
    }

    .nt_how span {
        font-size: 16px;
        font-weight: bold;
    }

.how_product {
    background: url(../howto/images/br.jpg) no-repeat center;
    padding: 30px 0;
}

    .how_product ul {
        padding: 0 10px;
        margin-top: 35px;
    }

    .how_product li {
        float: left;
        margin-left: -22px;
    }

        .how_product li:nth-child(2n+2) {
            padding-top: 20px;
        }

        .how_product li:first-child {
            margin-left: 0;
        }

.dv_q {
    background: #e8f7f2;
    padding: 20px;
}

    .dv_q li {
        border-bottom: 1px dashed #a1a1a1;
        padding: 20px;
        color: #047c63;
        font-size: 16px;
        font-weight: bold;
        position: relative;
        padding-left: 60px;
    }

        .dv_q li:before {
            content: "Q";
            font-size: 28px;
            position: absolute;
            top: 10px;
            left: 20px;
        }

        .dv_q li:last-child {
            border-bottom: none;
        }

.dv_a dl {
    margin-top:20px;
    border:2px solid #4ea789;
    padding:10px;
}

.dv_a dt {
    border-bottom: 1px dashed #a1a1a1;
    padding-bottom: 20px;
    padding-right:25px;
    color: #047c63;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    padding-left: 35px;
    background:url(../faq/images/cong.png) no-repeat center right;
    background-size:20px;
}
.dv_a dt.opened{
    background:url(../faq/images/tru.png) no-repeat center right;
    background-size:20px;
}
    .dv_a dt:before {
        content: "Q";
        font-size: 28px;
        position: absolute;
        top: 0;
        left: 0;
        line-height:1;
    }

.dv_a dd {
    padding-top:20px;
    position: relative;
    padding-left:35px;
    display:none;
}

    .dv_a dd:before {
        content: "A";
        color: #ffa32d;
        font-weight: bold;
        font-size: 28px;
        position: absolute;
        top: 20px;
        left: 0;
        line-height:1;
    }

a {
    color: #333;
}

.btr_detail {
    margin-bottom: 20px;
    position: relative;
}

.btn_tel {
    position: absolute;
    top: 53%;
    left: 3%;
    width: 49%;
    height: 20%;
    text-indent: -999999px;
}

.btr_detail .logo1 {
    position: absolute;
    top: 50%;
    left: 62%;
    width: 34%;
    height: 20%;
    text-indent: -999999px;
}

.btr_detail .logo2 {
    position: absolute;
    top: 74%;
    left: 62%;
    width: 34%;
    height: 20%;
    text-indent: -999999px;
}
.box_product{
    margin:0 -2%;
}
.inden{
    text-indent:-15px;
    padding-left:15px;
}
.dv_tb_cycle{
    width:100%;
    overflow:auto;
}
.dv_tb_cycle::-webkit-scrollbar {
    -webkit-appearance: none;
}

.dv_tb_cycle::-webkit-scrollbar:vertical {
    width: 12px;
}

.dv_tb_cycle::-webkit-scrollbar:horizontal {
    height: 12px;
}

.dv_tb_cycle::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}
.lastittle {
	margin-top:20px;
	margin-bottom:10px;
	padding-bottom:10px;
	border-bottom:1px dashed #ddd;
}
.dv_tb_cycle::-webkit-scrollbar-track {
    border-radius: 10px;  
    background-color: #ffffff; 
}
.ab_tel{
    position:relative;
}
    .ab_tel a {
        position: absolute;
        top: 82%;
        left: 19%;
        width: 35%;
        height: 8%;
        text-indent: -99999px;
    }
	
.listla li {
	padding-left:1px;
	margin-left:12px;
	list-style-type:decimal;
}
.aboutpage .ab_nt span:first-child{
	 height: 40px;
    display: inline-block;
    float: left;
}
	
@media only screen and (max-width:450px){
	.box_about p, .v_about p {font-size:12px}
	.tt6 {font-size: 16px;}
	.ab_logo {font-size:12px;}
	.ab_logo img {max-width:30%}
	.aboutpage .box_line {
		padding:20px 8px;
	}
	.case_list li a {font-size:12px}
}
@media only screen and (max-width:320px){
	.ab_nt {font-size:13px}
	.case_list li a {font-size:10px}
}