/* ==================== 水の大切さ ==================== */

.water {
	border-radius: 2em;
	border: 1px solid #99cdff;
	margin-top: 2em;
}
.water h3 {
	margin: 0;
}
.water *:last-child {
	margin-bottom: 0;
}

@media all and (max-width: 640px) {
	.water {
		padding: 1.5em;
	}
	.water img[src*="pic1"] {
		display: inline-block;
		margin: 1em 0;
	}
}

@media all and (min-width: 641px) {
	.water {
		padding: 2em;
	}
}

/* ==================== 自然をもとに発酵させてできた調味料 ==================== */

.miso,
.others {
	margin-top: 3em;
}

.copyright p {
	text-align: right;
	color: #999;
}

@media all and (max-width: 640px) {
	.copyright p {
		font-size: 0.7em;
	}
}

@media all and (min-width: 641px) {
	.shoyu .head > div,
	.miso .head > div {
		vertical-align: bottom;
	}
	.copyright p {
		font-size: 0.6em;
	}
}

/* ==================== しょうゆの種類 ==================== */

.shoyuType {
	overflow: hidden;
	border: 1px solid #b02300;
}
.shoyuType .title {
	background: #ffd9bf;
}

.shoyuType > div > div {
	padding: 1em;
}

.JcCnt .shoyuType h4,
.JcCnt .shoyuType h5 {
	margin: 0;
}

.shoyuType p {
	margin-bottom: 0;
}

@media all and (max-width: 640px) {
	.shoyuType {
		border-radius: 1.5em;
		margin-top: 2em;
	}
	
	.shoyuType .column {
		direction: rtl;
		display: table;
		table-layout: fixed;
		width: 100%;
	}
	.shoyuType .column > div {
		direction: ltr;
		display: table-cell;
		vertical-align: top;
	}
	
	.shoyuType > div > div:not(.title) {
		border-top: 1px solid #b02300;
	}
}

@media all and (min-width: 641px) {
	.shoyu {
		margin-top: -4em;
	}

	.shoyuType {
		display: table;
		position: relative;
		table-layout: fixed;
		width: 100%;
		border-radius: 2em;
	}
	.shoyuType::after {
		content: none;
	}

	.shoyuType > div {
		display: table-row-group;
	}
	.shoyuType > div::after {
		content: none;
	}
	
	.shoyuType .title {
		border-top-left-radius: 2em; /* for IE11 */
	}
	
	.shoyuType > div > div {
		display: table-cell;
		vertical-align: top;
	}
	
	.shoyuType .column > div {
		vertical-align: top;
	}
	
	.shoyuType > div:nth-of-type(n+2) > div {
		border-top: 1px solid #b02300;
	}
	.shoyuType > div > div:nth-of-type(1) {
		border-right: 1px solid #b02300;
	}

	.JcCnt .shoyuType h4,
	.JcCnt .shoyuType h5 {
		text-align: center;
	}
	.shoyuType figure {
		margin: 0;
	}
}

/* ==================== しょうゆの原料 ==================== */

@media all and (max-width: 640px) {
	.shoyuMaterial .column {
		border-bottom: 1px solid #dfa799;
	}
	.shoyuMaterial .column > div {
		border-top: 1px solid #dfa799;
	}
	.shoyuMaterial .column > div::after {
		content: '';
		clear: both;
		display: block;
	}
	.shoyuMaterial .column figure,
	.shoyuMaterial .column p {
		width: 50%;
	}
	.shoyuMaterial .column figure {
		float: left;
	}
	.shoyuMaterial .column p {
		float: right;
	}
}

@media all and (min-width: 641px) {
	.JcCnt .shoyuMaterial .column > div {
		vertical-align: top;
		padding: 0 1em;
		border: solid #dfa799;
		border-width: 0 1px;
	}
}

/* ==================== みそ ==================== */

@media all and (max-width: 640px) {
	.misoType .column {
		border-bottom: 1px solid #ebd099;
	}
	.misoType .column > div {
		border-top: 1px solid #ebd099;
	}
}

@media all and (min-width: 641px) {
	.misoType .column > div {
		border: solid #ebd099;
		border-width: 0 1px;
		padding: 0 1em;
	}
}

/* ==================== その他の発行調味料 ==================== */

.others h4 {
	text-align: center;
}

@media all and (max-width: 640px) {
	.others .column {
		border-bottom: 1px solid #bcd199;
	}
	.others .column > div {
		border-top: 1px solid #bcd199;
	}
	.others .column > div::after {
		content: '';
		clear: both;
		display: block;
	}
	.others .column figure,
	.others .column p {
		width: 50%;
	}
	.others .column figure {
		float: left;
	}
	.others .column p {
		float: right;
	}
}
@media all and (min-width: 641px) {
	.others .column {
		width: 66%;
		margin: 0 auto;
	}
	.others .column > div {
		vertical-align: top;
		border: solid #bcd199;
		border-width: 0 1px;
		padding: 0 1em;
	}
}

/* ==================== 外国から来た野菜 ==================== */

.s4 .body {
	margin: 0 auto;
}

@media all and (max-width: 640px) {
	.s4 .body {
		width: 21em;
	}
}

@media all and (min-width: 641px) {
	.s4 .body {
		width: 35em;
	}
}