@charset "UTF-8";

/* ===============================
	category / recipe
 =============================== */
em {
	font-weight: bold;
}

.ttl {
	display: inline-block;
	min-width: 7em;
	color: #fff;
	font-weight: bold;
	padding: 0.2em 0.8em;
	margin-bottom: 1em;
	text-align: center;
	border-radius: 4px;
}

.ttl span {
	font-size: 0.88em;
	line-height: 1.2em;
}

.dial {
	display: block;
	width: 200px;
}

#linkList {
	width: 242px;
	margin: 60px auto 0;
}

#caution {
	font-size: 0.9em;
	line-height: 1.4em;
	margin-top: 5em;
}

#caution h4 {
	font-weight: bold;
	margin-bottom: 0.2em;
}

#caution .box {
	border: solid 1px #333;
}

table {
	width: 100%;
	border-collapse: separate;
}

table th {
	padding: 0.5em 1em;
}

table td {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 1em;
}

table th.titleBold {
	padding: 0.5em 0;
	font-weight: bold;
}

table th.group {
	width: 1em;
	padding: 0.5em;
	color: #fff;
	text-align: center;
}

table th.group.line {
	border-top: dashed 1px #fff;
}

#recipeName h3 {
	font-size: 1.36em;
	line-height: 1.6em;
	font-weight: bold;
	padding-left: 0.5em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

#recipeName .cal {
	display: inline-block;
	padding: 0 1em;
	background: #fff;
	border-radius: 4px;
}

#recipeName .cal span {
	font-weight: bold;
	font-size: 1.24em;
}

#ingredient table td {
	width: 8.6em;
}

#process {
	margin-top: 2em;
}

.processTop {
	position: relative;
}

.processTop .dial {
	display: block;
	width: 200px;
	position: absolute;
	top: -2px;
	left: 8em;
}

#process .caption {
	margin-top: 0.5em;
}

#process table th {
	width: 2em;
	padding: 0.5em 0;
	text-align: center;
	vertical-align: top;
}

#process table td {
	padding-left: 0;
}

#process .caution {
	color: red;
}

#process .caution:BEFORE {
	content: "\3054\6ce8\610f";
	display: inline-block;
	border: solid 1px red;
	padding: 0 0.2em;
	margin-right: 0.5em;
}

.onePoint {
	margin-top: 1em;
	background: #fff;
	color: #000;
	padding: 1em;
}

/* Color Setting : green */
article.green table th.group,article.green .ttl {
	background: #085415;
}

article.green table {
	border-top: dashed 1px #085415;
}

article.green table th,article.green table td {
	border-bottom: dashed 1px #085415;
}

article.green #recipeName h3 {
	border-top: solid 1px #085415;
	border-bottom: solid 1px #085415;
}

article.green em,article.green table th.titleBold,article.green #recipeName h3,article.green #recipeName .cal
	{
	color: #085415;
}

article.green #ingredient table td {
	border-left: solid 1px #085415;
}

/* Color Setting : juice */
article.juice table th.group,article.juice .ttl {
	background: #cc4c06;
}

article.juice table {
	border-top: dashed 1px #cc4c06;
}

article.juice table th,article.juice table td {
	border-bottom: dashed 1px #cc4c06;
}

article.juice #recipeName h3 {
	border-top: solid 1px #cc4c06;
	border-bottom: solid 1px #cc4c06;
}

article.juice table th.titleBold,article.juice #recipeName h3,article.juice #recipeName .cal
	{
	color: #cc4c06;
}

article.juice #ingredient table td {
	border-left: solid 1px #cc4c06;
}

/* Color Setting : fiber */
article.fiber table th.group,article.fiber .ttl {
	background: #074f70;
}

article.fiber table {
	border-top: dashed 1px #074f70;
}

article.fiber table th,article.fiber table td {
	border-bottom: dashed 1px #074f70;
}

article.fiber #recipeName h3 {
	border-top: solid 1px #074f70;
	border-bottom: solid 1px #074f70;
}

article.fiber em,article.fiber table th.titleBold,article.fiber #recipeName h3,article.fiber #recipeName .cal
	{
	color: #074f70;
}

article.fiber #ingredient table td {
	border-left: solid 1px #074f70;
}

/* Color Setting : soy */
article.soy table th.group,article.soy .ttl {
	background: #837316;
}

article.soy table {
	border-top: dashed 1px #837316;
}

article.soy table th,article.soy table td {
	border-bottom: dashed 1px #837316;
}

article.soy #recipeName h3 {
	border-top: solid 1px #837316;
	border-bottom: solid 1px #837316;
}

article.soy table th.titleBold,article.soy #recipeName h3,article.soy #recipeName .cal
	{
	color: #837316;
}

article.soy #ingredient table td {
	border-left: solid 1px #837316;
}

/* Color Setting : soup */
article.soup table th.group,article.soup .ttl {
	background: #537942;
}

article.soup table {
	border-top: dashed 1px #537942;
}

article.soup table th,article.soup table td {
	border-bottom: dashed 1px #537942;
}

article.soup #recipeName h3 {
	border-top: solid 1px #537942;
	border-bottom: solid 1px #537942;
}

article.soup em,article.soup table th.titleBold,article.soup #recipeName h3,article.soup #recipeName .cal
	{
	color: #537942;
}

article.soup #ingredient table td {
	border-left: solid 1px #537942;
}

/* Color Setting : ginger */
article.ginger table th.group,article.ginger .ttl {
	background: #924915;
}

article.ginger table {
	border-top: dashed 1px #924915;
}

article.ginger table th,article.ginger table td {
	border-bottom: dashed 1px #924915;
}

article.ginger #recipeName h3 {
	border-top: solid 1px #924915;
	border-bottom: solid 1px #924915;
}

article.ginger em,article.ginger table th.titleBold,article.ginger #recipeName h3,article.ginger #recipeName .cal
	{
	color: #924915;
}

article.ginger #ingredient table td {
	border-left: solid 1px #924915;
}

/* ===============================
	device setting
 =============================== */
@media print , screen and (min-width: 415px) {
	#photo {
		width: 450px;
	}
	#recipeName {
		margin-bottom: 2.4em;
		position: relative;
	}
	#recipeName .rbox {
		position: absolute;
		top: 0.5em;
		right: 0;
	}
	#recipeName .rbox .icons {
		display: inline-block;
		vertical-align: middle;
	}
	#recipeName .rbox .icons span {
		display: inline-block;
		width: 40px;
	}
	#recipeName .cal {
		position: absolute;
		top: 1.24em;
		right: 0;
	}
	#recipeName .rbox .cal {
		position: relative;
		top: auto;
		right: auto; display : inline-block;
		vertical-align: middle;
		margin-left: 0.5em;
		display: inline-block;
	}
	#ingredient {
		width: 500px;
		padding-left: 40px;
	}
	#ingredient .txt {
		margin-bottom: 1em;
	}
}

@media screen and (max-width: 414px) {
	article {
		padding-top: 2em;
	}
	#recipeName {
		margin-bottom: 1em;
	}
	#recipeName .rbox {
		margin-top: 0.5em;
	}
	#recipeName .rbox:AFTER {
		content: "";
		display: block;
		clear: both;
	}
	#recipeName .rbox .icons {
		float: right;
	}
	#recipeName .rbox .icons span {
		display: inline-block;
		width: 40px;
	}
	#recipeName .cal {
		margin-top: 1em;
	}
	#recipeName .rbox .cal {
		float: left;
		margin-top: 10px;
	}
	#ingredient {
		margin-top: 1em;
	}
	#ingredient .txt {
		margin-bottom: 1.5em;
	}
	#caution .box {
		padding: 1em;
	}
}