@charset "UTF-8";

body{
    font-size: 100%;
    line-height: 1.8;
}
#contentsInner{
    min-height: auto;
}


.yellow_line {
    background:linear-gradient(transparent 60%, #ff6 60%);
}
.site-underline a{
    text-decoration: underline;
}

h1.pageTitle{
    font-size: 160%;
    margin-top:15px;
}
.site-fit-img {
    width: 100%;
    height: auto;
}
h2.site-h2{
    font-size: 150%;
    padding-bottom: 5px;
    border-bottom: solid 3px #ddd;
    text-align: center;
    display: inline-block;
    color: #444;
    letter-spacing: 1px;
}
h3.site-h3{
    font-size: 150%;
    color: #333;
    margin-top: 1.5em;
    line-height: 1.5;
    border-left: solid 6px #21bfcf;
    padding-left: 15px;
}
h3.title{
    margin-top:40px
}


.screenBox img{
    width: 100%;
    height: auto;
    border:solid 1px #ccc;
    margin-bottom: 20px;
}

.screenBox2 img{
    width: 100%;
    height: auto;
    border: solid 1px #ccc;
    margin-bottom: 0;
}
.screenBox2 .source{
    display: inline-block;
    font-size: 70%;
    color:#888;
    line-height: 1;
    margin-top: 7px;
}
.screenBox2 .caption{
    display: inline-block;
    margin-top: 7px;
    line-height: 1.2;
    font-size: 130%;
    color:#111;
}
.screenBox2 .source a{
    color: #777;
}




.btnLink2{
    display: inline-block;
    background-color: #444;
    color: #fff;
    line-height:1;
    padding:10px 20px;
    margin: 3px 0;
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.btnLink2:hover{
    background-color: #333;
    text-decoration: none;
}


.site-new-icon{
    background-color: #ff4679;
    color: #fff;
    font-size:11px;
    line-height: 1;
    padding:2px 4px;
    margin-left:8px;
    border-radius: 3px;
    letter-spacing: normal;
    font-weight: normal;
    vertical-align: middle;
}
.site-new-icon:before{
    content: "NEW";
}


.pricingTableOverflow{
    width: 100%;
    overflow: auto;
}
.pricingTable{
    width: 100%;
    background-color: #faf9f1;
    collapse: 0;
}
.pricingTable th, .pricingTable td{
    text-align: center;
    padding: 7px 9px;
    border:solid 1px #bcbab5;
}
.pricingTable th{
    min-width: 90px;
    font-weight: normal;
    background-color: #ecebe2;
}
.pricingTable .plan-name th{
    font-size: 124%;
    font-weight: bold;
    color: #222;
    padding: 15px 9px;
    line-height: 1.5;
}
.pricingTable td.highlight{
    background-color: #fceead;
}
.pricingTable td.desc{
    text-align:left!important;
    font-size:94%;
    vertical-align:top;
}
.pricingTable .icom-cross{
    color: #ccc;
}
.pricingTable .priceNum{
    font-size: 160%;
    font-weight: bold;
}
.pricingTable .icom-radio-unchecked{
    font-size: 120%;
    color: #62ba0c;
}
.pricingTable .extPriceList li{
    width: 45%;
    min-width: 320px;
    float: left;
    white-space:nowrap;
}


.desc-table{
    width: 100%;
    background-color: #f5f4ec;
    border:solid 1px #dbdad3;
    collapse: 0;
}
.desc-table tr{
    border-bottom:solid 1px #dbdad3;
}
.desc-table th, .desc-table td{
    padding: 15px;
    vertical-align: top;
    text-align: left;
}
.desc-table .right{
    text-align: right!important;
}
.desc-table th{
    padding: 5px 15px;
    font-size: 90%;
    font-weight: normal;
    background-color: #eae9e1;
}
.desc-table li{
    padding: 0;
}



.func-item{
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    background-color: #f3f5ff;
    border-radius: 5px;
    padding: 20px 0 0 0;
    text-align: center;
    width: 145px;
    max-width: 145px;
    height: 115px;
    line-height: 120%;
    margin: 0 5px 5px 0;
    font-weight: bold;
}
.func-item:hover{
    text-decoration: none;
    color: #fff;
    background-color: #0083ae;
    /*background-color: #eaedfd;*/
}
.func-item:hover .icon{
    color: #fff;
}
@media screen and (max-width: 700px) {
    .func-item{
        width: 104px;
        height: 92px;
    }
    .func-item .icon{
        font-size: 34px!important;
    }
    .func-item .name{
        font-size: 13px;
    }
    .func-item .font-small{
        font-size: 80%;
    }
}
.func-item .icon{
    font-size: 50px;
    color: #046b9b;
    line-height: 1;
}
.func-item .name{
    padding-top: 12px;
}
.func-item .site-new-icon{
    display: block;
    position: absolute;
    top:0;
    padding:3px 6px;
    margin: 0;
    border-radius: unset;
}


.func-filter{
    text-align: center;
    margin-bottom: 5px;
}
.func-filter .btnLink2{
    line-height: 28px;
    padding: 0 10px;
    margin-right: 3px;
    font-size: 94%;
    border-radius: 6px;
    background-color: #046b9b;
}
.func-filter .act{
    background-color: #ff6200;
}
._ff_base, ._ff_asp{ background-color: #ffefcd
}


.kolg-features .title{
    font-size: 170%;
    border-left: none;
    padding:0;
    color: #333;
}
.kolg-features img{
    float: right;
    border: solid 1px #ccc;
    max-width: 400px;
    height: auto;
    margin-left: 12px;
}
.kolg-features img:hover{
    border-color: #555;
}
@media screen and (max-width: 700px){
    .kolg-features .title{
        font-size: 140%;
    }
    .kolg-features img{
        float: none;
        max-width: 100%;
        margin-left: 0;
    }
}


.site-order-flow{
    padding:20px 10px
}
.site-order-flow .icom-chevron-right{
    display: inline-block;
    padding: 0 7px;
}


.flat-body{
    max-width:1000px;
    margin:0 auto;
}
.flat-body-padding{
    padding: 0 10px;
}
#pcview .flat-body-padding{
    padding: 0 15px;
}





.flat-btn{
    display: inline-block;
    border: solid 1px #046b9b;
    border-radius: 3px;
    padding: 5px 15px;
    margin: 0 0 5px 0;
    color: #046b9b;
    letter-spacing: 1px;
}
.flat-btn:hover{
    text-decoration: none;
    color: #fff;
    background-color: #0083ae;
}


.flat-bg-gray{
    background-color: #eee;
}
.flat-bg-gray2{
    background-color: #f5f4ec;
}


.site-article h2{
    color:#333;
    font-size:180%;
    margin-bottom: 0;
    text-align: center;
    letter-spacing: 1px;
}
.site-article p{font-size:110%}

.site-page-desc{
    font-size:120%;
    line-height: 1.6;
}
.site-page-desc a{
    color: #111;
    text-decoration: underline;
}

.site-info-box {
    border: solid 1px #c6c5bf;
    border-radius: 10px;
    background-color: #f5f4ec;
    padding: 20px;
    margin-bottom: 15px;
}
.site-info-box h3 {
    font-weight: bold;
    font-size: 130%;
    margin: 0 0 7px 0;
}



@media screen and (max-width: 500px) {
    body{
        font-size: 14px;
        line-height: 1.6;
    }
    .site-br{display: none}
    .site-article h2{font-size:20px}
    .site-article h3.site-h3{font-size:18px}
    .site-article p, .site-page-desc{font-size:14px}
    .site-info-box {
        font-size:14px;
        padding:12px;
    }
    .site-info-box h3{font-size:18px}

    .flat-btn{
        font-size: 14px;
        padding: 5px 10px;
        letter-spacing: normal;
    }
    .site-new-icon{
        font-size:9px;
        padding:1px 3px;
    }
}




.site-formBox{
    background-color: #faf9f2;
    border: solid 3px #a09f9b;
    border-radius: 10px;
    padding: 10px 10px 50px 10px;
}
.site-formBox table{
    width: 100%;
    background-color: #f5f4ec;
    /*border:solid 1px #c3c3ba;*/
    border:solid 1px #dbdad3;
    collapse: 0;
}
.site-formBox tr{
    border-bottom:solid 1px #dbdad3;
}
.site-formBox th, .site-formBox td{
    padding: 15px;
    text-align: left;
    vertical-align: top;
}
.site-formBox td{
    min-width: 320px;
}
.site-formBox th{
    width:160px;
    min-width: 160px;
    font-weight: bold;
    color:#333;
    background-color: #eae9e1;
    line-height: 1.5;
}
.site-formBox th.center{
    text-align: center!important;
}
.site-formBox th img{
    margin-top: 7px;
}
.site-formBox .form-desc{
    margin-top:5px;
    font-size: 96%;
    color: #333;
}
.site-formBox input[type="text"], .site-formBox input[type="email"]{
    width: 100%;
}
.site-formBox label{
    background-color: #555;
    border-radius: 30px;
    padding: 4px 18px 4px 8px;
    margin-bottom: 3px;
    color: #fff;
    display: inline-block;
}
.site-formBox input:checked ~ span{
    font-weight: bold;
}
.site-formBox .submitBtn input{
    font-size: 130%;
    min-width: 200px;
}


/******************************/

@media print{
    #globalNavi, #globalHeader, #footer, #site_footer{display:none}
    #mainInner{margin:0}
    body {
        background-color: #fff;
        background-image: none;
    }
    #contents, #contentsInner{
        border: none;
        padding: 0!important;
    }
}