@charset "utf-8";
/* CSS Document */

/*reset css*/


*,
*:after,
*:before {
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-font-smoothing:antialiased;
    font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

.matestimate_area{
padding: 15px;
  line-height: 1.6em;
  font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: #333;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;}

.matestimate_area > div{  font-size: 100%;	background:#72b15f;    -webkit-border-radius: 10px;            border-radius: 10px;}
.matestimate_area img{width: 100%;margin-top: 10px;}

.matestimate_area p{margin: 0;}
.matestimate_area h1{
    font-size: 120%;
    color: #FFF;
    padding: 15px;
    -webkit-border-radius: 10px 10px 0 0;
            border-radius: 10px 10px 0 0;
    text-align: center;
	    border-bottom: #fff 1px dashed;
    margin:0px auto;
	text-align: center;
	font-weight: bold;
	width:80%;

}

.matestimate_area .areaIn{
    overflow: hidden;
    padding: 10px 20px;
	padding-bottom:20px;
}

.matestimate_area .left{
    width: 100%;
	text-align: center;
	color:#fff;
}

@media screen and (max-width: 375px) {.matestimate_area .left p br{display: none;}.matestimate_area .left p {text-align: justify;}.matestimate_area h1{width: 90%;}}



.matestimate_area .left dt{
    border-bottom: #666666 1px dashed;
    margin-bottom: 10px;
	padding-bottom:10px;
	text-align: center;
	font-size:18px;
	font-weight: bold;
}

.matestimate_area .left dd ul li{
    display: inline-block;
    margin-right: 0px;
	border-radius: 5px;
	letter-spacing: 0.1em;
}



.sizeinput_area{position: relative;}
.calcbutton {
    display: inline-block;
    width: 100%;
    padding: 10px;
    text-decoration: none;
    border: none;
    background: #f3ff6d;
    /*ボタン色*/
    color: #72b15f;
    border-radius: 5px;
    margin:10px 0;
}

.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;
}

#calculesion_output span,#case_output span{
    border: 2px solid #666666;
    display: inline-block;
    padding: 5px;
    margin: 0 5px;
}

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

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

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
}

input[type=number] {
     -moz-appearance:textfield;
}

.normal_tate,.normal_yoko{
position:absolute;
	display: inline-block;
	padding: 10px;
 	color: #555;
	font-size: 12px;
	background: #FFF;
 	border: solid 3px #555;
 	box-sizing: border-box;
	border-radius:7px;
	font-weight: bold;
}

.normal_tate{	bottom:42%;	left:-2%;}
.normal_yoko{   bottom:42%; right: -4%;}


@media screen and (max-width: 320px) {.normal_tate,.normal_yoko{	bottom:46%;}}



.normal_yoko:after,.normal_tate:after{
	content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #555;
  z-index: 1;
}

.normal_tate:before,.normal_yoko:before{
 content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}

input#size1,input#size2,input#size3,input#size4{width: 45px;
border:2px solid #dd2e2e;}


#resulttext{background:#fff;
    -webkit-border-radius: 10px;
            border-radius: 10px;
text-align: center;
color:#272222;
	font-weight: bold;
	letter-spacing: 0.2em;
	line-height: 1.8em;
}
#resulttext > div {padding: 20px;}
#resulttext > span{color:#dd2e2e;
font-size:1.3em;}

button#copy_button{background: #fff;
padding:10px;
    -webkit-border-radius: 10px;
            border-radius: 10px;
border:#272222 solid 2px;
margin-top:10px;}


	.ordertatami{padding: 0 15px 15px;}
	.ordertatami h2{text-align: center;margin: 0;background: #820002;color: #fff;padding: 10px 0;font-size: 16px;}
	.ordertatami p{margin: 0;padding: 15px;background: #fff;color: #000;border: 1px solid #820002;}