@charset "UTF-8";

/* =====================================================================
 * main
 * =================================================================== */
#headerInner {
	background: url(images/bg_image.png) no-repeat right top;
	background-size: 960px auto;
}
h3 {
	display: block;
	margin: 0 auto 30px;
	min-height: 36px;
	text-indent: 200%;
	white-space: nowrap;
	overflow: hidden;
}
h3#rutinTtl {
	width: 244px;
	background: url(images/section2_ttl.svg) no-repeat;
}
h3#powerTtl {
	width: 754px;
	background: url(images/section3_ttl.svg) no-repeat;
}
h3#nutritionTtl {
	width: 386px;
	min-height: 36px;
	background: url(images/section4_ttl2020.svg) no-repeat;
}
h3#technologyTtl {
	width: 394px;
	background: url(images/section5_ttl.svg) no-repeat;
}
#rutin-list {
	margin: 15px 0;
	padding: 15px 20px;
	font-size: 108%;
	background-color: #ffffff;
	border: solid 1px #b5ab73;
	border-radius: 5px;  
	-webkit-border-radius: 5px; 
	-moz-border-radius: 5px;
}
#rutin-list li {
	margin-left: 15px;
	list-style: disc;
}
.rutinTxt {
	width: 145px;
}
p a.graph {
	display: block;
	width: 100%;
	max-width: 320px;
}
#nutritionBox {
	margin-bottom: 40px;
	height: 320px;
	background: url(images/section4_img.png) no-repeat center top;
	background-size: 320px auto;
}
#nutritionBox dl {
	margin-top: 35px;
	padding: 20px;
	width: 332px;
	background-color: #ffffff;
	border: solid 1px #b5ab73;
	border-radius: 5px; 
	-webkit-border-radius: 5px; 
	-moz-border-radius: 5px;
}
#nutritionBox dt {
	text-align: center;
	margin-bottom: 5px;
	text-align: center;
	font-size: 153.9%;
	color: #a37a44;
}
#nutritionBox dt span {
	display: inline-block;
}
#tb-nutrition {
	position: relative;
	margin-bottom: 8px;
	width: 960px;
}
#tb-nutrition caption {
	margin-bottom: 10px;
	text-align: center;
	font-size: 153.9%;
	color: #a37a44;
}
#tb-nutrition caption span {
	margin-left: 0.3em;
}
#tb-nutrition,
#tb-nutrition tr {
	border: solid 1px #cccccc;
}
#tb-nutrition th,
#tb-nutrition td {
	padding: 4px 0;
	border-right: solid 1px #cccccc;
	vertical-align: middle;
}
#tb-nutrition th br {
	display: none;
}
#tb-nutrition td {
	padding-right: 25px;
	width: 172px;
	text-align: right;
	font-size: 108%;
}
#tb-nutrition colgroup:nth-of-type(1) {
	background-color: #ffffe4;
}
#tb-nutrition colgroup:nth-of-type(2) {
	background-color: #fff3f3;
}
#tb-nutrition colgroup:nth-of-type(3) {
	background-color: #ffffff;
}
#tb-nutrition th:nth-of-type(1) {
	padding: 4px 25px;
}
#tb-nutrition th:nth-of-type(2) {
	background-color: #fed9d9;
	text-align: center;
	font-size: 108%;
	color: #ec5066;
}
#tb-nutrition td:nth-of-type(1) {
	font-size: 123.1%;
}
#tb-nutrition th:nth-of-type(3),
#tb-nutrition th:nth-of-type(4),
#tb-nutrition th:nth-of-type(5) {
	background-color: #ffffe4;
	text-align: center;
}
.note {
	text-align: right;
	font-size:85%;
}
.amount {
	position: absolute;
	top: 20px;
	right: 0;
	font-size: 62%;
	color: #444444;
}
@media screen and (max-width: 980px) {
	#headerInner {
		background-size: cover;
		background-position: -70px bottom;
	}
	h3#powerTtl {
		width: 490px;
		min-height: 80px;
		background: url(images/section3_ttl_sp.svg) no-repeat;
	}
	#rutin-list {
		margin: 15px auto;
		width: 100%;
		max-width: 500px;
	}
	p a.graph {
		margin: 0 auto 20px;
	}
	.sobaIllust.fr {
		float: none;
		text-align: center;
	}
	#nutritionBox {
		height: auto;
		min-height: 270px;
		background-size: 270px;
	}
	#nutritionBox dl {
		margin-top: 0;
		width: 35%;
	}
	#nutritionBox dt {
		margin-bottom: 10px;
		line-height: 1.4;
	}
	#tb-nutrition {
		width: 100%;
	}
	#tb-nutrition th,
	#tb-nutrition td,
	#tb-nutrition th:nth-of-type(1) {
		padding: 6px 15px;
		line-height: 1.4;
	}
	#tb-nutrition td {
		width: 18.5%;
	}
	#tb-nutrition th br {
		display: block;
	}
}
@media screen and (max-width: 767px) {
	#headerInner {
		background-position: center -5px;
	}
	h3#powerTtl {
		width: 380px;
		height: 128px;
		background: url(images/section3_ttl_sp2.svg) no-repeat;
	}
	#nutritionBox {
		padding-top: 265px;
		background-size: 250px;
	}
	#nutritionBox .fr, #nutritionBox .fl {
		float: none;
	}
	#nutritionBox dl {
		width: 100%;
	}
	#nutritionBox dl:first-child {
		margin-bottom: 10px;
	}
	.amount {
		position: static;
		display: block;
	}
}
@media screen and (max-width: 480px) {
	h3 {
		margin: 0 auto 25px;
		padding-top: 7.8%;
		min-height: 0;
		height: 0;
	}
	h3#rutinTtl, h3#powerTtl, h3#nutritionTtl, h3#technologyTtl {
		min-height: 0;
		background-size: 100%!important;	
	}
	h3#rutinTtl {
		width: 53%;
	}
	h3#powerTtl {
		padding-top: 27.8%;
		width: 82.6%;
		height: 0;
	}
	h3#nutritionTtl {
		width: 83.9%;
	}
	h3#technologyTtl {
		width: 85.6%;
	}
	#nutritionBox {
		margin-bottom: 30px;
	}
	#tb-nutrition caption {
		font-size: 146.5%;
		line-height: 1.4;
	}
	#tb-nutrition caption span {
		display: block;
		margin-left: 0;
	}
	#tb-nutrition thead {
		display: none;
	}
	#tb-nutrition th,
	#tb-nutrition td,
	#tb-nutrition th:nth-of-type(1) {
		padding: 9px 20px 8px;
	}
	#tb-nutrition th,
	#tb-nutrition td {
		display: block;
		width: 100%;
		border-right: none;
		text-align: left;
		font-size: 100%;
	}
	#tb-nutrition th {
		border-bottom: solid 1px #cccccc;
	}
	#tb-nutrition td:nth-of-type(1) {
		font-size: 108%;
		color: #f86479;
		background-color: #fff3f3;
	}
	#tb-nutrition td:nth-of-type(2), #tb-nutrition td:nth-of-type(3), #tb-nutrition td:nth-of-type(4) {
		padding: 7px 20px 0;
		background-color: #ffffff;		
	}
	#tb-nutrition td:nth-of-type(4) {
		padding-bottom: 10px;		
	}
	#tb-nutrition td:nth-of-type(1):before { content: "ダッタンそば（全層粉）："; }
	#tb-nutrition td:nth-of-type(2):before { content: "そば（全層粉）："; }
	#tb-nutrition td:nth-of-type(3):before { content: "米（精白米）："; }
	#tb-nutrition td:nth-of-type(4):before { content: "小麦（強力一等粉）："; }
	.note {
		text-align: left;
	}
	.amount {
		margin-top: 0.3em;
	}
}
@media screen and (max-width: 413px) {
	#headerInner {
		background-size: 580px auto;
		background-position: -78px -4px;
	}
	h3 {
		margin: 0 auto 20px;
	}
}
@media screen and (max-width: 320px) {
	#tb-nutrition caption {
		font-size: 131%;
	}
	.amount {
		font-size: 70%;
	}
}