@charset "UTF-8";

*{
    font-family: 'Noto Sans Japanese',   sans-serif;
    box-sizing: border-box;
}

body{
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    background-image: url(img/body-brown.png);
    background-repeat: repeat;
    min-width: 1100px;
}

a{
    transition-duration: 0.3s;    
}

header{
	background-color:#FFF;
}

img{
    width: 100%;
    display: block;
}

.thankstext{
    margin:30px;
}

.sp-block{
	display: none!important;
}

article,
h2{
    margin-bottom:80px;
}

h2{
    text-align: center;
    font-size: 40px;
    margin: 0px 0;
    padding: 0px 0 0 0;
}

.h2-title:first-letter{
    color:#5fa001;
}

h2 img{
    max-width: 85px;
    margin: 0 auto;
}

h2 span{
    display: inline-block;
    color: #3e3232;
    line-height: 120%;
    margin: 20px 0 80px 0;
}

h3{
    font-size: 200%;
    margin: 0 0 20px 0;
    line-height: 1.4;
    border-bottom: solid 5px #8d0400;
    padding: 0 0 5px 0;
}

h4{
    font-size: 130%;
    border-left: solid 5px #ffb51e;
}

.w-wrap{
    width: 1100px;
    overflow: hidden;
    margin: 0 auto;
}

.logo {
    float: left;
    width: 306px;
    margin: 10px 0;
}

.header-right{
    float: right;
    width: 40%;
    overflow: hidden;
    margin: 20px 0;
}

.header-right p{
    float: right;
    margin: 0 20px 0 0;
    font-size: 20px;
    color: #332d27;
}

.header-right p img{
    max-width: 26px;
    float: left;
    margin-right: 7px;
    margin-top: 1px;
}

.header-right a{
    color: #5ea202;
    background-color: #fff;
    border: solid 1px #5ea202;
    border-radius: 20px;
    padding: 3px 30px;
    text-decoration: none;
    float: right;
}

.header-right a:hover{
    background-color:#5ea202;
    color:#FFF;
}

.main{
    background:url(img/mainback.png) no-repeat center top;
    background-size: cover;
}

.main-content{
    padding: 50px 0;
    width: 1100px;
    margin: 0 auto;
}

.main img{
    width: 100%;
    margin:0 auto;
}

.main a{
    display: block;
    width: 100%;
    margin: 0 auto;
}

.main a img{
    width: 100%;
}

.contactbox{
    overflow: hidden;
}

.contactbox a{
    width: 600px;
    text-align: center;
    background-color: #5fa100;
    color: #FFF;
    text-decoration: none;
    border-radius: 30px;
    padding: 15px 0;
    font-size: 20px;
    margin: 50px auto 20px;
    box-sizing: border-box;
    border: solid 1px #5fa100;
    position: relative;
}

.contactbox a:hover{
    color:#5fa100;
    background-color:#FFF;
    border:solid 1px #5fa100;
}

.contactbox a i{
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -10px;
}

.contactbox p{
    width: 600px;
    margin: 0 auto;
    background: #fff;
    border-radius: 30px;
    padding: 0px 30px;
    font-size: 16px;
    border: solid 1px #e60112;
    overflow: hidden;
}

.contactbox p span:nth-of-type(1){
    margin: 18px 0;
    display: inline-block;
}

.contactbox p span:nth-of-type(2){
    float: right;
    color: #e60112;
    font-size: 32px;
    margin: 5px 0;
    line-height: 50px;
}

.contactbox p img{
    float: left;
    width:50px;
    margin-right: 10px;
    max-width: fit-content;
}

.message{
    text-align: center;
    background: url(img/massage-back.png) no-repeat center top;
    background-size: cover;
    color: #FFF;
    padding: 80px 0;
}

.message h2 span{
    color:#FFF;
}

.message .w-wrap{
    width: 740px;
    text-align: left;
    font-weight: normal;
}

.message h3{
    font-size: 24px;
}

.message ul{
    list-style: none;
    padding: 0;
}

.double{
    overflow: hidden;
}

.interview .doubleback:nth-of-type(2) .double{
    flex-flow: row-reverse;
}

.double .left{
    float: left;
}

.double .right,{
    float: right;
}

.interview h2 img,
.requirement h2 img{
    max-width: 142px;
}

.interview h3{
    border: none;
}

.interview .doubleback{
    padding: 0px 0px;
    background-image: url(img/body-white.png);
    border-top: solid 7px #000;
}

.interview .double{
    margin: 1px auto 0 auto;
    border-top: solid 1px #000;
    border-bottom: solid 6px #e8d9bc;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.interview .left{
    width: 48%;
}

.interview .right{
    width: 52%;
    padding: 0 5%;
    margin: 0 0;
    box-sizing: border-box;
    position: relative;
}

.interview .right p{
    font-size:16px;
    font-weight: normal;
}

.interview-text{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 80%;
    height:260px;
    height: fit-content;
}

.requirement table{
    width: 800px;
    margin: 0 auto;
    border-collapse: collapse;
}

.requirement table th,
.requirement table td{
    border: solid 1px #ded5c6;
    padding: 20px 15px;
}

.requirement table th{
    background-color: #f9f4ee;
    color: #3e3232;
}

.requirement table td{
    background-color: #FFF;
}

.requirement table td span{
    background-color: #555;
}

#formlink{
    background-image: url(img/body-white.png);
    padding: 80px 0 30px 0;
    margin: 0;
}

.formTable{
    width: 500px;
    margin:0 auto;
}

.formTable ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.formTable ul li{
    text-align: left;
}

.formTable ul li:nth-of-type(2){
    
}

.estimate-formtitlebox{
    margin-bottom: 25px;
}

.estimate-formtitle{
    color:#3e3232;
    margin-bottom: 10px;
}

.formTable ul li input[type="text"],
.formTable ul li input[type="tel"],
.formTable ul li input[type="email"],
.formTable ul li textarea{
    padding: 10px 10px;
    width: 100%;
}

.formTable ul li input[type="number"]{
    padding: 7px;
}

.formTable ul li textarea{
    width: 100%;
    margin: 0 auto;
    min-height: 120px;
}

.required-text,
.required-text2{
    color: #FFF;
    font-size: 80%;
    padding: 3px 7px;
    margin-right: 10px;
}

.required-text{
    background-color: #d21717;
}

.required-text2{
    background-color: #1786d2;
}

button{
    background-color: #5f9f02;
    min-width: 300px;
    border: none;
    padding: 20px 0px;
    color: #fff;
    font-size: 130%;
    font-weight: bold;
    cursor: pointer;
    margin: 0 auto;
    display: block;
    transition-duration: 0.3s;
}

.planlist label {
    padding: 10px 30px;
    border-bottom:solid 1px #ddd;
    color: #aaa;
    text-align: center;
    display: block;
}


.planlist input[type="radio"] {
    display: none;
}

.planlist input[type="radio"]:checked + label{
    color: #FFF;
}

.planlist input#estimate-system-1:checked + label,
.planlist input#estimate-system-2:checked + label,
.planlist input#estimate-store-1:checked + label,
.planlist input#estimate-store-2:checked + label,
.planlist input#estimate-store-3:checked + label,
.planlist input#estimate-store-4:checked + label,
.planlist input#estimate-work-1:checked + label,
.planlist input#estimate-work-2:checked + label,
.planlist input#estimate-work-3:checked + label {
    background-color: #3e3232;
}

button:hover{
    background-color: #d31818;
}

.copyright{
    text-align: center;
    font-weight: normal;
    margin: 30px auto;
    font-size: 12px;
}

@media screen and (max-width: 600px) {
    .w-wrap{
        width: 100%;
        padding: 10px;
    }

    .logo {
	    float: none;
	    width: 100%;
	    margin: 0px auto;
    }

    .pc-block{
        display: none!important;
    }

    .sp-block{
        display: block!important;
    }

    .contactbox a{
        width: 100%;
        margin: 20px 0 0 0;
        padding: 10px 0;
        font-size: 16px;
    }

    .fottertel{
        position: fixed;
        bottom: 10px;
        right: 10px;
        z-index: 100;
    }

    .header-right,
    .contactbox p{
        display: none;
    }

    .fottertel img{

    }

    .tel{
        display: none;
    }

    .main-content{
        width: 90%;
    }

    .message{
        padding: 50px 0px;
    }

    body{
        min-width: 0;
        font-size:14px;
    }

    h2 {
        font-size: 145%;
        padding: 10px 10px 15px 10px;
        margin: 0 0 20px 0;
    }

    h2 span {
        margin: 20px 0 0px 0;
    }

    article, h2{
        margin-bottom:20px;
    }

    h3{
        font-size:120%;
    }

    p{
        text-align: left;
        line-height: 1.6;
    }

    .message h3 {
        font-size: 18px;
    }

    .interview-text{
        position: relative;
        width: 100%;
    }

    .interview .double{
        width: 100%;
        padding: 10px;
        border-bottom:none;
    }

    .interview .left{
        margin-bottom:10px;
    }

    .interview .right{
        padding: 0;
    }

    .interview h3{
        margin: 10px 0px;
        font-size: 18px;
    }

    .interview .left,
    .interview .right{
        width: 100%;
        float: none;
    }

    .interview .doubleback{
        padding: 1px 0px;
    }

    .requirement table{
        width: 90%;
    }

    .formTable ul li input[type="number"]{
        width:100%;
    }

    .formTable{
        width: 90%;
    }

    .message .w-wrap{
        width: 100%;
    }

    .interview .doubleback:nth-of-type(2) .double{
        flex-flow: column;
    }

    #formlink {
        padding: 25px 0 30px 0;
    }

}