﻿.header {
    background: url(../images/main/header-bg.jpg) repeat-x;
    width: 100%;
    height: 92px;
}

.box {
    max-width: 1000px;
    width: 100%;
    margin: 0px auto;
}

.white-bg {
    background-color: #fff;
    padding: 28px 0px;
}

.box-line {
    box-shadow: 0px 0px 5px #B8B8B8;
    max-width: 1000px;
    width: 100%;
    background-color: #fff;
    margin: 0px auto;
    padding: 20px 20px 40px 20px;
    min-height: 460px;
}

.title-01 {
    color: #0e8c67;
    font-size: 1.3em;
    font-weight: bold;
    background: url(../images/main/icon01.jpg) no-repeat left 4px;
    padding: 5px 0 5px 20px;
    margin: 12px 0 10px 0;
    width: 100%;
    display: block;
    overflow: hidden;
    line-height: 26px;
}

.title-02 {
    color: #444;
    font-size: 1.3em;
    font-weight: bold;
    border-left: 4px solid #0e8c67;
    padding: 4px 0 4px 10px;
    line-height: 22px;
}

.title-03 {
    color: #016940;
    font-size: 1em;
    font-weight: bold;
    padding: 8px 12px;
    background-color: #e6f0eb;
    border: 1px solid #e6e5e5;
    display: inline-block;
}

.row {
    overflow: hidden;
}

.w-30 {
    width: 29%;
    float: left;
    margin-left: 15px;
}

    .w-30 input {
    }

.w-70 {
    width: 65.5%;
    float: right;
}

.bnt-box01 {
    width: 100%;
    overflow: hidden;
    margin: 25px 0;
}

    .bnt-box01 a {
        width: 48%;
        margin: 0 0.5%;
    }

.bnt-01 {
    color: #fff;
    font-size: 1.1em;
    background: url(../images/main/bnt01.jpg) repeat-x;
    height: 45px;
    line-height: 45px;
    border: 1px solid #4ca380;
    border-radius: 4px;
    display: inline-block;
    text-align: center;
}

    .bnt-01:hover {
        opacity: 0.7;
    }

.bnt-02 {
    color: #fff;
    font-size: 1.1em;
    background-color: #6d6d6d;
    height: 45px;
    line-height: 45px;
    border: 1px solid #939393;
    border-radius: 4px;
    display: inline-block;
    text-align: center;
}

    .bnt-02:hover {
        opacity: 0.7;
    }

.table-01 {
    width: 100%;
    border-left: 1px solid #c6c9c6;
    border-right: 1px solid #c6c9c6;
}

    .table-01 th {
        background: #c6c9c6;
        font-size: 1.1em;
        color: #fff;
        padding: 18px 10px;
        font-weight: bold;
    }

    .table-01 img {
        position: relative;
        top: 5px;
        margin-left: 2px;
    }

    .table-01 td {
        color: #444;
        padding: 14px 10px;
        font-size: 1em;
        border-bottom: 1px solid #c6c9c6;
    }

.text01 {
    color: #888;
    font-size: 0.9em;
    line-height: 20px;
    margin: 15px 0;
}

.text02 {
    color: #666;
    line-height: 20px;
    font-size: 1em;
    margin-top: 15px;
    line-height: 1.4em;
}

    .text02 li {
        background: url(../images/main/icon02.jpg) no-repeat left 7px;
        padding: 0 0 0 12px;
        margin-bottom: 8px;
    }

.text03 {
    color: #666;
    font-size: 0.9em;
}

.w-30 > .text03 input {
    width: 20px;
}

.text04 {
    color: #188cd6;
}

#id {
    background: url(../images/id.jpg) no-repeat 9px 7px;
    color: #666666;
    font-size: 0.9em;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    padding: 2px 8px 2px 30px;
    width: 100%;
    margin-bottom: 10px;
}

    #id input {
        color: #666666;
        font-size: 1.1em;
        border: 1px solid #fff;
        padding: 7px 0;
    }

#password {
    /*position: relative;*/
    z-index: 1;
    background: url(../images/password.jpg) no-repeat 9px 7px;
    overflow: hidden;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    width: 100%;
    margin-bottom: 10px;
    padding: 2px 8px 2px 30px;
}

    #password::before {
        content: "";
        position: absolute;
        z-index: 9999;
        top: 10px;
        right: 0;
        /*background: url(../images/display.png) no-repeat;*/
        width: 30px;
        height: 14px;
    }

    #password input {
        color: #666666;
        font-size: 1.0em;
        border: 1px solid #fff;
        padding: 7px 0;
		width: 150px;
    }


.footer {
    max-width: 1000px;
    width: 100%;
    font-size: 12px;
    color: #fff;
    padding:20px 0;
    margin: 0px auto;
    letter-spacing: 0;
}

    .footer samp {
        margin-right: 8px;
    }

.footer-r {
    float: right;
}

.link-01 {
    color: #0e8c67;
    text-decoration: underline;
    display: inline-block;
}

.r {
    float: right;
}

.text05 {
    background-color: #f2f2f2;
    font-size: 1em;
    color: #666;
    padding: 15px;
    line-height: 22px;
    letter-spacing: 0.5px;
    margin: 5px 0;
}

.text06 {
    padding: 15px;
    margin-top: 5px !important;
}

    .text06 li {
        font-size: 1em;
        line-height: 22px;
        color: #666;
        margin-bottom: 12px;
        overflow: hidden;
    }

.text06-w01 {
    /*width: 2.5%;*/
    width: 80px;
    float: left;
    text-align: right;
}

.text06-w02 {
    width: 88%;
    float: left;
    margin-left: 20px;
}

.line-01 {
    width: 100%;
    background: url(../images/line-01.jpg) repeat-x;
    margin: 25px 0;
    height: 1px;
}

.text07 {
    width: 100%;
    text-align: right;
    color: #888888;
    font-size: 1em;
    margin-bottom: 20px;
}

.bnt-w01 {
    max-width: 320px;
    margin: auto;
}

.bnt-w02 {
    max-width: 160px;
    margin: auto;
}

    .bnt-w02 a {
        width: 100%;
        display: inline-block;
    }

.row-2 {
    overflow: hidden;
    width: 99.6%;
    margin: 0 auto 30px auto;
}

.bnt-w03 {
    max-width: 480px;
    margin: 25px auto;
    width: 100%;
    overflow: hidden;
}

    .bnt-w03 a {
        width: 48%;
        margin: 0 0.5%;
    }

.l-list01 {
    width: 100%;
    margin: 20px 0 35px 0;
}

    .l-list01 li {
        overflow: hidden;
        border-bottom: 1px solid #edeef1;
    }

        .l-list01 li h1 {
            width: 35.5%;
            float: left;
            font-size: 1.1em;
            color: #444444;
            padding: 15px 0 15px 13px;
        }

        .l-list01 li h2 {
            width: 64.5%;
            float: left;
            font-size: 1.1em;
            color: #666;
            padding: 17px 0 17px 0px;
        }

        .l-list01 li h8 {
            width: 64.5%;
            float: left;
            font-size: 0.9em;
            color: #666;
            padding: 17px 0 17px 0px;
        }


.l-list02 {
    width: 100%;
}

    .l-list02 li {
        overflow: hidden;
        padding: 5px 0;
    }

        .l-list02 li h1 {
            width: 17%;
            float: left;
            font-size: 1.1em;
            color: #444444;
            padding-left: 13px;
            line-height: 31px;
        }

        .l-list02 li h6 {
            width: 7%;
            float: left;
            font-size: 1.1em;
            color: #444444;
            line-height: 31px;
            padding-left: 13px;
        }

        .l-list02 li h2 {
            /*width: 23%;*/
            width: 30%;
            float: left;
            margin-right: 1%;
        }

        .l-list02 li h8 {
            width: 50%;
            float: left;
            margin-right: 1%;
        }

        .l-list02 li h9 {
            width: 8%;
            float: left;
            margin-right: 1%;
        }

        .l-list02 li h3 {
            width: 7%;
            float: left;
            margin-right: 1%;
        }

        .l-list02 li h4 {
            /*width: 19%;*/
            width: 18%;
            float: left;
        }

        .l-list02 li input {
            color: #666666;
            font-size: 1.1em;
            border: 1px solid #d1d1d1;
            border-radius: 4px;
            padding: 9px 8px;
            width: 100%;
            background-color: #fff;
        }

        .l-list02 li select {
            color: #999;
            font-size: 1.1em;
            border: 1px solid #d1d1d1;
            border-radius: 4px;
            padding: 7px 8px;
            width: 100%;
            background-color: #fff;
        }

    .l-list02 samp {
        color: #de1313;
    }

    .l-list02 li h5 {
        font-size: 13px;
        color: #de1313;
        margin: -3px 0 6px 17%;
        line-height: 20px;
    }

    .l-list02 .h7 {
        font-size: 12px;
        color: #888;
        margin: -3px 0 6px 17%;
        line-height: 20px;
    }

.text08 {
    font-size: 1.1em;
    color: #666666;
    float: left;
    margin: 9px 0 0 8px;
}

    .text08 samp {
        color: #de1313;
    }

.text09 {
    text-align: center;
    color: #444;
    font-size: 1.1em;
    font-weight: bold;
    width: 100%;
    margin: 40px 0;
    line-height: 32px;
}

    .text09 img {
        margin-bottom: 8px;
    }


.DIvBlock {
    width: 50%;
    float: left;
}

.tel {
    width: 70% !important;
}

.tel1 {
    width: calc( 30% - 80px ) !important;
}


@media (max-width:999px) {

    .text06-w02 {
        width: 83%;
        float: left;
        margin-left: 20px;
    }

    /*IE 11*/
    _:-ms-input-placeholder, :root .box-line {
        padding: 25px 25px 40px 25px;
    }

    body:last-child .box-line {
        padding: 25px 10px 40px 10px;
    }

    .page_content {
        padding: 10px 0px !important;
    }

    _:-ms-input-placeholder, :root .row {
        overflow: hidden;
        padding-left: 15px;
        padding-right: 15px;
    }

    body:last-child .row {
        overflow: hidden;
        padding-left: 15px;
        padding-right: 15px;
    }

    .row {
        overflow: hidden;
        padding-left: 15px;
        padding-right: 15px;
    }
}
/*yen*/
.btn-default {
    width: 100px;
    padding: 6px;
}

.left {
    float: left;
}

.a_list {
    border: 1px solid #000;
    margin-left: 6px;
    padding: 5px;
    text-align: center;
}

    .a_list > a {
        color: #ccc;
    }

.tab_pc {
    margin-left: 10px;
}

.tab_mobile {
    display: none;
}

/*rwd-table*/


@media (max-width:768px) {
    .box {
        width: 96%;
        margin: 0px auto;
        max-width: none;
    }

    .box-line {
        padding: 25px 10px 40px 10px;
    }

    .w-30 {
        width: 100%;
        float: none;
        margin-left: 0;
    }

    .w-70 {
        width: 100%;
        float: none;
    }

    .title-02 {
        margin-top: 0px;
    }

    .footer {
        width: 98%;
        font-size: 12px;
        color: #fff;
        padding:20px 0;
        margin: 0px auto;
        letter-spacing: 0;
        text-align: center;
    }

        .footer samp {
            margin: 0px 0 5px 0;
            display: block;
        }

    .footer-r {
        float: none;
    }

    .table-01 {
        border-left: none;
        border-right: none;
    }


    .table-rwd {
        min-width: 100%;
    }

    .DIvBlock {
        width: 100%;
    }
    /*針對tr去做隱藏*/
    tr.tr-only-hide {
        display: none !important;
    }
    /*讓tr變成區塊主要讓他有個區塊*/
    .table-rwd tr {
        display: block;
        /*border: 1px solid #ddd;*/
        margin-top: 5px;
    }

    .table-rwd td:first-child {
        border-top: 1px solid #ddd;
    }

    .table-rwd td {
        float: left;
        text-align: left;
        font-size: 15px;
        overflow: hidden;
        width: 100%;
        display: block;
        padding: 0;
        border-right: 1px solid #c6c9c6;
        word-break: break-all;
    }

        .table-rwd td:before {
            /*最重要的就是這串*/
            content: attr(data-th) "  ";
            /*最重要的就是這串*/
            display: inline-block;
            text-transform: uppercase;
            font-weight: bold;
            margin-right: 6px;
            width: 95px;
            padding: 16px 0;
            color: #fff;
            background-color: #c6c9c6;
            text-indent: 6px;
        }
    /*當RWD縮小的時候.table-bordered 會有兩條線，所以針對.table-bordered去做修正*/
    .table-rwd.table-bordered td, .table-rwd.table-bordered th, .table-rwd.table-bordered {
        border: 0;
    }

    .bnt-w01 {
        max-width: none;
    }





    .text06-w01 {
        width: 80px;
        float: left;
    }
}

.text06-w02 {
    width: 80%;
    float: left;
}

.l-list01 {
    width: 100%;
    float: none;
}





    .l-list01 li h1 {
        width: 20%;
        float: left font-size: 1.1em;
        padding: 15px 0 0 13px;
        margin-bottom: 5px;
        border-bottom: none;
    }

    .l-list01 li h2 {
        width: 80%;
        float: left font-size: 0.9em;
        /*padding: 0 0 15px 13px;*/
        padding: 16px 0 17px 0px;
    }

    .l-list01 li h8 {
        width: 80%;
        float: left font-size: 0.9em;
        padding: 0 0 15px 13px;
    }

.l-list02 li h1 {
    width: 100%;
    float: none;
    padding-left: 0px;
    margin-bottom: 5px;
    line-height: 22px;
}

.l-list02 li h2 {
    width: 100%;
    float: none;
    margin-right: 0%;
    margin-bottom: 7px;
}

.l-list02 li h8 {
    width: 100%;
    float: none;
    margin-right: 0%;
    margin-bottom: 7px;
}

.l-list02 li h9 {
    width: 19%;
    margin-right: 2%;
    margin-bottom: 7px;
}

.l-list02 li h3 {
    width: 19%;
    margin-right: 2%;
    margin-bottom: 7px;
}
/*.l-list02 li h4{width:80%;margin-bottom:7px;}*/
.l-list02 li h4 {
    width: 40%;
    margin-bottom: 7px;
}

.l-list02 li h6 {
    width: 17%;
    margin-bottom: 7px;
}

.l-list02 li .f4 {
    width: 25%;
    margin-bottom: 7px;
}

.l-list02 li h5 {
    margin: -5px 0 6px 0%;
}

.bnt-w02 {
    max-width: none;
}

.bnt-w03 {
    max-width: none;
}

    .bnt-w03 a {
        width: 100%;
        margin: 5px 0%;
    }

.l-list01-line {
    border-bottom: 1px solid #edeef1;
    width: 100%;
}

/*yen*/

.tab_title {
    display: none;
}


.ck_3{float:left;}
.ds_no_sm{display:none;}
.name {
    color: #0e8c67;
}

.qa-tab02-b{
    width: 144px;
    height: 49px;
    color: #000;
    font-size: 14px;
    display: inline-block;
    text-decoration: none;
    padding: 5px;
    line-height: 38px;
    text-align: center;
    /*background-color:#0e8c67;
    border:1px solid #fff;
    border-radius:5px;*/
}
.qa-tab02-bli {border:2px solid #c6c9c6;
              border-radius:5px; 
              background-color:#e6f0eb;
              padding: 5px;
              
}



.qa-tab02-bli-v{
    background-color:#0e8c67;
    border:2px solid #c6c9c6;
    border-radius:5px;     
    padding: 5px;
   
}

.qa-tab02-bli-v a{
    color:#fff;
}



.mail_td_pc {
   /* display: table;
    width: 100%;*/
}

.mail_td_mobile {
    display: none;
}

.tab_title_New, .tab_title_view {
    display: none;
}



.mail_tr_mobile {

    display:none;
}

.blank_tr_mobile {
    display: none;
}

.blank_tr_mobile_view {
    display: none;
}


.td_title_mail {
    background-color: #33a184;
    color: #fff;
    padding: 5px;
    width: 25%;
    vertical-align:middle;
}


@media (max-width:620px) {
    .text06-w01 {
        text-align: left;
        line-height: 1.8em;
    }

    .text06-w02 {
        width: 100%;
        clear: both;
        margin-left: 0px;
    }
    /*yen*/

    .ck_3{float:initial; text-align:center;}
    .Cause{text-align:initial;}
    .Cause_text{display:block; margin-top:10px;}
    .rwdtable{border:1px solid #d1d1d1;}
    .rwdtable_new {
        border: none;
    }
    .ds_no_sm{display:initial;}

    /*.left {
        float: initial;
    }*/

    .a_list {
        margin-top: 10px;
    }


    .tab_pc {
        display: none;
    }

    .tab_title {
        display: table-cell;
        background-color: #33a184;
        color: #fff;
        padding: 5px;
        width: 25%;
    }




    .tab_title_New {
        display: none;
    }

    .tab_title_view {
        display: table-cell;
        padding: 5px;
        width: 25%;
        background: transparent;
        color: #333;
        box-shadow: 0 0 0 0.5px #c6c9c6;
    }


    .mail_tr_mobile {
        display: table-row;
    }


	.CheckBox_Agree label {
		display: initial;
	}

	.tab_content {
		display: table-cell;
		width: 50%;
	}


    .blank_tr_mobile:nth-child(7), .blank_tr_mobile:nth-child(10) {
        display: table-row;
    }

    .blank_tr_mobile_view {
        display: table-row;
    }

/*    .blank_tr_mobile_view:last-child {
        display: none;
    }*/

    .tab_content_new {
    }


    .tab_td{display:table; width:100%;}

    .mail_td_pc {
        display: none;
    }

    .mail_td_mobile {
        display: table;
        width: 100%;
    }

    .tab_a_br{display:block; margin:5px;}
    /*
    .tab_mobile {
        display: initial;
        width: 100%;
    }
         .rwdtable caption {
            font-size: 1.3em;
        }

        .rwdtable thead {
            border: none;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
        }

        .rwdtable tr {
            background-color: lightgrey;
            border-bottom: 3px solid #ddd;
            display: block;
            margin-bottom: .625em;
        }

        .rwdtable td {
            color: #D20B2A;
            border-bottom: 1px solid #ddd;
            display: block;
            font-size: .8em;
            text-align: right;
        }

            .rwdtable td:before {
                color: black;
                content: attr(data-label);
                float: left;
                font-weight: bold;
                text-transform: uppercase;
            }

            .rwdtable td:last-child {
                border-bottom: 0;
            }*/
}

@media (max-width:460px) {

    .tel {
        width:60% !important;
    }

    .tel1 {
        width:calc( 40% - 50px ) !important;
    }


    .l-list01 li h1 {
        width: 100%;
    }

    .l-list01 li h2 {
        width: 100%;
        padding: 0px 14px 5px 14px;
    }

    .l-list01 li h8 {
        width: 100%;
    }
}

@media (max-width:380px) {
    .bnt-box01 a {
        width: 46%;
        margin: 0 0.5%;
    }

    .bt_longtxt {
        font-size: 0.8em;
    }
    .tab_content {
    width:60%;
}

}

@media (max-width:300px) {
    .bnt-box01 a {
        width: 44%;
        margin: 0 0.5%;
    }
}

@media (min-width:769px) {
    .hidden-l {
        display: none !important;
    }
}

@media (max-width:768px) {
    .hidden-m {
        display: none !important;
    }
}







.qa-tab02 {
}

    .qa-tab02 li {
        float: left;
        margin-right: 4px;
    }

        .qa-tab02 li a {
            background: url(../images/tab-2.jpg) no-repeat;
            width: 144px;
            height: 49px;
            color: #fff;
            font-size: 14px;
            display: inline-block;
            text-decoration: none;
            padding: 5px 0 0 0px;
            line-height: 38px;
            text-align: center;
        }

            .qa-tab02 li a:hover {
                opacity: 0.6;
            }

    .qa-tab02 > .qa-tab02-v a {
        background: url(../images/tab-2-hover.jpg) no-repeat;
        width: 144px;
        height: 49px;
        color: #fff;
        font-size: 14px;
        display: inline-block;
        text-decoration: none;
        padding: 5px 0 0 0px;
        line-height: 38px;
        text-align: center;
    }

        .qa-tab02 > .qa-tab02-v a:hover {
            opacity: 1;
        }
        #capiobj{display:none;}


        .bnt-011 {
    color: #fff;
    font-size: 1.1em;
    background: url(../images/main/bnt01.jpg) repeat-x;
    height: 45px;
    line-height: 45px;
    border: 1px solid #4ca380;
    border-radius: 4px;
    display: block;
    text-align: center;
    width:100%;
    margin-bottom:10px;
}

    .bnt-011:hover {
        opacity: 0.7;
    }

.bnt-021 {
    color: #fff;
    font-size: 1.1em;
    background-color: #6d6d6d;
    height: 45px;
    line-height: 45px;
    border: 1px solid #939393;
    border-radius: 4px;
    display: block;
    text-align: center;
    width:100%;
}

    .bnt-021:hover {
        opacity: 0.7;
    }