/*reset css*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form,
fieldset, input, textarea, p, blockquote, th, td{
    margin: 0 ;
    padding: 0;
    vertical-align: baseline;
}
html{
    overflow-y: scroll;
}
h1, h2, h3, h4, h5, h6{
    font-style: normal;
    font-weight: normal;
    font-size: 1.0em;
}
ol, ul{
    list-style:none;
}
fieldset, img{
     border:0;
}
table{
    border-collapse: collapse;
    border-spacing:0;
}
caption, th{
    text-align: left;
}
a{
     text-decoration:none;
}
img{
     line-height:0;
     vertical-align:bottom;
     border:none;
     text-decoration:none;
}
body {
  font-size: 100%;
  line-height: 1.6em;
  color: #333;
}
*,
*:after,
*:before {
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-font-smoothing:antialiased;
    font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}


.matestimate_area {
    width: 100%;
    max-width: 800px;
    border: 1px solid #ea7b1f;
    -webkit-border-radius: 10px;
            border-radius: 10px;
    margin: 0 auto;
    overflow: hidden;
}

.matestimate_area h1{
    font-size: 120%;
    color: #FFF;
    background: #EA7B1F;
    padding: 20px;
    -webkit-border-radius: 10px 10px 0 0;
            border-radius: 10px 10px 0 0;
    text-align: center;

}

.matestimate_area .areaIn{
    overflow: hidden;
    padding: 30px;
}

.matestimate_area .left{
    width: 100%;
    float: left;
}

.matestimate_area .left dl{
    margin-bottom: 10px;
}

.matestimate_area .left dt{
    border-bottom: #EA7B1F 1px dashed;
    margin-bottom: 10px;
}

.matestimate_area .left dd ul li{
    display: inline-block;
}

.selection-wrap ul {
    margin-top: 10px;
}

.quote-wrap {
    margin-top: 30px;
}

.quote-container {
    width: 40%;
    padding-top: 10px;
}

.quote-container ul {
    text-align: center;
}

.quote-container ul li {
    padding-bottom: 10px;
}

.quote-container-img {
    width: 100%;
}

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

input[type="radio"]:checked+label {
    background: #EA7B1F;
    color: #ffffff;
}

input[type=radio]:hover {
    opacity: 0.8;
}

input[type=radio]:active {
    -webkit-transform: translate(0, 2px);
    -moz-transform: translate(0, 2px);
    transform: translate(0, 2px);
    border-bottom: none;
}

label {
    display: block;
    margin: 5px;
    width: 120px;
    height: 45px;
    padding-left: 5px;
    padding-right: 5px;
    color: #000;
    text-align: center;
    line-height: 45px;
    cursor: pointer;
    border: 2px solid #d96d00;
    border-radius: 5px;
}


.calcbutton {
    display: inline-block;
    width: 100%;
    padding: 10px;
    text-decoration: none;
    border: none;
    background: #ea7b1f;
    /*ボタン色*/
    color: #FFF;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 20px;
    cursor: pointer;
}

.calcbutton:active {
    /*ボタンを押したとき*/
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    /*下に動く*/
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
    /*影を小さく*/
    border-bottom: none;
}

#calculesionQ_output span{
    font-style: normal;
    font-weight: bold;
    border-bottom: 1px solid #ea7b1f ;
    display: inline-block;
}

input[type=text]{
    padding: 5px;
}

.sizeinput_area ul,.tatamiinput_area ul{
    margin-bottom: 10px;
}

.sizeinput_area li{
    margin-bottom: 5px;
}

.result-description {
    font-size: 1.3rem;
    font-weight: bold;
}

.result-number {
    color: red;
}

#show_result {
    display: none;
}

#number_ofsheet {
    color: red;
    font-size: 1.4rem;
    font-weight: bold;
}



@media screen and (max-width: 768px) {
    .matestimate_area .left{
    width: 100%;
    float: none;
    margin-bottom: 20px;
}

    .matestimate_area .right{
    width: 100%;
    float: none;
}

}