@charset "utf-8";
textarea,
select,
:focus {
	outline: none;
}

input[type="text"]#naname_haba,
input[type="text"]#naname_okuyuki,
input[type="text"]#naname_atsumi,
input[type="text"]#awase_haba,
input[type="text"]#awase_okuyuki,
input[type="text"]#awase_atsumi,
input[type="text"]#furoshiki_haba,
input[type="text"]#furoshiki_okuyuki,
input[type="text"]#furoshiki_atsumi,
input[type="text"].measure{
	color: #333333;
	font-size: 100%;
	border-top: #E60012 solid 1px;
	border-left: #E60012 solid 1px;
	border-right: #E60012 solid 1px;
	border-bottom: #E60012 solid 1px;
	line-height: 14px;
	margin-top: 5px;
	height: 14px;
	-webkit-appearance: none;
	box-sizing: border-box;
	border-radius: 0;
}

input.measure {
	color: #333333;
	text-align: center;
	line-height: 14px;
	height: 16px;
	width: 32px;
}

input.value {
	padding: 0px 0px 0px 4px;
	width: 270px;
}

input.answer_value {
	color: #E60012;
	background: none;
	width: 270px;
}

/*ul{
height: 42px;
}*/

#main #calculation img {
	width: 70%;
}

#main .tab {
	height: 56px;
	width: 100%;
	float: left;
}

#naname_tab,
#awase_tab,
#furoshiki_tab {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	cursor: default;
	text-align: center;
	line-height: 30px;
	border: #E60012 solid 1px;
	margin: 10px !important;
	height: 30px;
	width: 76px;
	font-size: 12px;
}

li#naname_tab,
li#awase_tab,
li#furoshiki_tab {
	color: #E5B8BB;
}

#main p#loading {
	color: #E60012;
	text-align: center;
	margin-top: 130px;
	display: block;
	cursor: default;
}

#box {
	position: relative;
	margin-top: 30px;
	height: 232px;
	width: 50%;
	float: left;
	display: none;
}

#measure_haba {
	position: absolute;
	top: 185px;
	left: 205px;
}

#measure_okuyuki {
	position: absolute;
	top: 195px;
	left: 10px;
}

#measure_atsumi {
	position: absolute;
	top: 90px;
	left: 270px;
}

.calculator {
	color: #333333;
	margin-top: 40px;
	margin-left: 5%;
	width: 45%;
	float: left;
	display: none;
}

#naname_answer,
#awase_answer,
#furoshiki_answer {
	color: #E60012 !important;
	margin-top: 6px;
	margin-left: 5%;
	width: 45%;
	float: left;
	display: none;
}

#naname_answer a,
#awase_answer a,
#furoshiki_answer a {
	color: #76C69A !important;
}

.box_value,
.paper_value {
	cursor: default;
}

.value {
	margin-bottom: 20px;
	height: 20px;
}

.answer_value {
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: #E60012 solid 1px;
	margin-bottom: 20px;
	height: 20px;
}

.jump {
	visibility: hidden;
}

#box_position {
	color: #333333;
	margin-top: -130px;
	margin-left: 180px;
	height: 170px;
	width: 156px;
	float: left;
	cursor: default;
	display: none;
}

#box_position_illust {
	height: 136px;
	width: 156px;
	float: left;
	position: relative;
}

#naname_position {
	margin-left: 10px;
	margin-top: 8px;
	height: auto;
	width: 100px;
}

#awase_position {
	margin-left: 10px;
	margin-top: 36px;
	height: auto;
	width: 100px;
}

#furoshiki_position {
	margin-left: 10px;
	margin-top: 14px;
	height: auto;
	width: 100px;
}

input.measure_tate,
input.measure_yoko {
	color: #E60012;
	background: none;
	border: none;
	text-align: center;
	line-height: 14px;
	height: 16px;
	width: 40px;
}

input.measure_tate {
	text-align: left;
}

#measure_naname_tate {
	position: absolute;
	top: 28px;
	left: 116px;
}

#measure_naname_yoko {
	position: absolute;
	top: 114px;
	left: 12px;
}

#measure_awase_tate {
	position: absolute;
	top: 43px;
	left: 126px;
}

#measure_awase_yoko {
	position: absolute;
	top: 80px;
	left: 58px;
}

#measure_furoshiki_tate {
	position: absolute;
	top: 15px;
	left: 125px;
}

#measure_furoshiki_yoko {
	position: absolute;
	top: 117px;
	left: 68px;
}

.attention,
.attention_bottom {
	color: #333333;
	font-size: 9px;
	line-height: 13px;
	letter-spacing: 0.03em;
	margin-left: 2px;
	margin-bottom: 3px;
	width: 100%;
	float: left;
	display: none;
}

.attention_bottom {
	margin-bottom: 10px;
}

@media (min-width: 0px) and (max-width: 690px) {
	body {
		width: 100%;
	}
	/*
.title {
margin-left: 2%;
display: block;
}

.information {
margin-left: 2%;
display: block;
}*/
	input {
		width: 30%;
	}

	ul {
		width: 100%;
	}

	input.value,
	input.answer_value {
		width: 100%;
	}

	#main .tab {
		width: 100%;
		margin-bottom: 30px;
		float: none;
		height: auto;
	}

	#loading {
		margin-top: 220px;
	}

	#box {
		margin-left: auto;
		margin-right: auto;
		float: none;
		height: 210px;
		max-width: 310px;
		width: 95%;
	}

	#measure_haba {
		top: 170px;
		left: 190px;
	}

	#measure_okuyuki {
		top: 180px;
		left: 15px;
	}

	#measure_atsumi {
		top: 74px;
		left: 260px;
	}

	#main #calculation img {
		margin-left: 10px;
		width: 240px;
	}

	#main #calculation img#furoshiki_position,
	#main #calculation img#awase_position {
		width: auto;
		max-width: 100%;
		height: auto;
	}
	.calculator {
		margin-top: 40px;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
	}

	#naname_answer,
	#awase_answer,
	#furoshiki_answer {
		margin-top: 6px;
		margin-left: auto;
		margin-right: auto;
		/*height: 202px;*/
		height: auto;
		width: 95%;
		float: none;
	}

	.box_value {
		margin-left: 3%;
		height: 62px;
		width: 30%;
		float: left;
	}

	.paper_value {
		/*margin-left: 3%;*/
		/*height: 62px;*/
		width: 100%;
		/*float: left;*/
	}

	.value {
		width: 92%;
	}

	.answer_value {
		width: 98%;
	}

	.jump {
		margin-left: 2.8%;
	}

	#box_position {
		margin-top: 0;
		margin-left: auto;
		margin-right: auto;
		height: 340px;
		width: 300px;
		float: none;
	}

	#box_position_illust {
		height: 200px;
		width: 318px;
		float: none;
		margin: auto;
	}
	#main #calculation #box_position_illust img#furoshiki_position,
	#main #calculation #box_position_illust img#awase_position {
		width: auto;
		max-width: 100%;
		height: auto;
	}

	#naname_position {
		height: auto;
		width: auto;
	}

	#measure_naname_tate {
		top: 90px;
		left: 278px;
	}

	#measure_naname_yoko {
		top: 286px;
		left: 50px;
	}

	#awase_position {
		height: auto;
		width: auto;
	}

	#measure_awase_tate {
		top: 105px;
		left: 280px;
	}

	#measure_awase_yoko {
		top: 170px;
		left: 164px;
	}

	#furoshiki_position {
		height: auto;
		width: auto;
	}

	#measure_furoshiki_tate {
		top: 33px;
		left: 278px;
	}

	#measure_furoshiki_yoko {
		top: 265px;
		left: 186px;
	}

	.attention,
	.attention_bottom {
		margin-left: auto;
		margin-right: auto;
		width: 95%;
		float: none;
	}

	#naname_attention_bottom {
		margin-top: 30px;
	}

	img {
		display: block;
		margin-right: auto;
		margin-left: auto;
		max-width: 80%;
		width: auto;
		height: auto;
	}


}