@charset "utf-8";

/* ----------------------------------------------------------------------------- */

#above_body {
	background-color: #fffef3;
}

#header {
	width: 900px;
	background: url(/images/header_bgc.jpg) repeat-x left bottom;
}

#header_logo {
	margin-right: 185px;
}


h2#contact {
    background-color: #dbf4ff;
}
#contact {
    border: 1px solid #dbf4ff;
    margin: 20px auto 0;
    text-indent: 1.0em;
    width: 900px;
	
}
#contact-txt {
    border: 1px solid #dbf4ff;
    width: 900px;
    text-indent: 1.0em;
    margin: 0 auto 30px;
    display: block;
}
#pageup {
    padding: 0px;
    height: 25px;
    width: 945px;
    margin: 30px auto;
    text-align: center;
}

#recipe_topbox {
	width: 900px;
	margin: 0 auto;
}

#recipe_topbox a {
	float: left;
}

#recipe_topbox:after {
	content:'';
	clear: both;
	display: block;
	visibility: hidden;
}

#recipe_contents_body {
	clear: both;
	margin: 10px auto;
	padding: 0;
	width: 900px;
	box-sizing: border-box;
/*	border: 4px #8eb4e3 solid;*/
	border-radius: 16px;
	padding: 20px;
}

.recipe_top_contents {
	width: 95%;
	margin: 0 auto;
}

.recipe_top_contents>h1 {
	font-size: 36px;
	background-color: #f00;
	color: #fff;
	width: 15%;
	margin-right: 5%;
	padding: 0.3em 0.3em;
	float: left;
	text-align: center;
	box-sizing: border-box;
	line-height: 1.1;
	font-family:"HG行書体","HGP行書体","HG正楷書体-PRO",cursive;
	border: 8px double white;
}

.nihon .recipe_top_contents>h1 {
	background-color: #5270a6;
	font-family:"HG正楷書体-PRO","HG教科書体",cursive;
}

.description {
	width: 58%;
	float: left;
	line-height: 1.7;
}

.balloon {
 	position: relative;
 	margin: 0 0 0.5em 0;
	padding: 0.6em 1em;
 	color: #111;
	font-size: 110%;
	background: #FFCC99;
	border-radius: 1em;
}

.balloon:before{
	content: "";
	position: absolute;
	top: 70%;
	left: 100%;
 	margin-top: -18px;
	border: 15px solid transparent;
	border-left: 18px solid #FFCC99;
}


.recipe_top_contents>img {
	width: 19%;
	float: right;
}

.profile {
	border: 2px solid #bb8f86;
/*	border-radius: 1em;*/
	padding: 0.8em 1em 0.5em;
	line-height: 1.6;
	font-size: 95%;
	margin-top: 5px;
}

.profile>h3 {
	font-size: 120%;
	border-bottom: 7px solid #EDDEDF;
	margin: 0 auto;
	text-align: center;
	line-height: 0.8;
	width: 13.5em;
}

.profile+p {
	text-align: right;
}

.recipe_contents>h2 {
	width: 95%;
	background-color: #fff6db;
	margin: 0 auto;
	padding-left: 1.5em;
	font-weight: bold;
	box-sizing: border-box;
	font-size: 110%;
	margin-bottom: 3px;
}

.recipe_contents>ul {
	list-style: none;
	width: 95%;
	margin: 0 auto;
	padding: 0;
}

.recipe_contents>ul:after {
	display: block;
	content: '';
	clear: both;
	visibility: hidden;
}


.recipe_contents>ul>li {
	width: 19.2%;
	margin: 0 0 0 0.7%;
	float: left;
	line-height: 1.4;
	padding-top: 5px;
}

.recipe_contents>ul>li>a>img {
	width: 100%;
	height: 130px;
}

.recipe_contents>ul>li>a:hover>img {
	opacity: 0.5;
}

.recipe_contents>ul>li>a {
	color: #f5781f;
}

.recipe_contents>ul>li>a:visited {
	color: #551a8b;
}


.recipe_contents>ul>li>a>p {
	padding: 0 0 0 1.3em;
	position: relative;
/*	color: #f5662f;*/
}

.recipe_contents.seiyo>ul>li>a>p {
	min-height: 4.2em;
}

.recipe_contents>ul>li>a>p:after {
	position: absolute;
	top: 0.2em;
	left: 0.2em;
	content: '';
	display: block;
	border-left: 0.8em solid #f7a148;
	border-top: 0.5em solid transparent;
	border-bottom: 0.5em solid transparent;
}

.recipe_contents>.pagelink>li {
	font-size: 200%;
	padding-bottom: 1em;
	font-family:"HG行書体","HGP行書体","HG正楷書体-PRO",cursive;
	padding-right: 0.5em;
	box-sizing: border-box;
}

.recipe_contents>.pagelink>li>a {
	color: #f00;
	display: block;
	border: 1px solid;
	text-align: center;
	width: 100%;
	text-decoration: none;
	background-color: #fee;
}

.recipe_contents>.pagelink>li:first-child>a:hover {
	color: white;
	background-color: #f00;
}

.recipe_contents>.pagelink>li:nth-child(2)>a {
	font-family:"HG正楷書体-PRO","HG教科書体",cursive;
	color: #5270a6;
	background-color: #DEE7F9;
}

.recipe_contents>.pagelink>li:nth-child(2)>a:hover {
	color: white;
	background-color: #5270a6;
}

.recipe_contents>.pagelink>li:last-child>a {
	font-family:"HG正楷書体-PRO","HG教科書体",cursive;
	color: #52a678;
	background-color: #E4EDE8;
}

.recipe_contents>.pagelink>li:last-child>a:hover {
	color: white;
	background-color: #52a678;
}


#recipe_detail_body {
	background: url(/images/haikei1.gif);
	width: 900px;
	box-sizing: border-box;
	margin: 5px auto 0;
	border-top: 2px solid black;
	padding: 30px;
	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W5","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
}

#recipe_detail_body.nihon {
	background-image: url(/images/haikei2.gif);
}

#recipe_detail {
	background-color: white;
	padding: 10px 20px;
	box-shadow: 4px 4px 6px 0px #ccc;
}

#recipe_detail>h2 {
	font-size: 320%;
	color: #24ac3a;
	border-bottom: #42b855 2px solid;
	line-height: 1.3;
	font-weight: bold;
	padding-bottom: 6px;
}

.nihon>#recipe_detail>h2 {
	color: #e18d01;
	border-bottom-color: #dd8a00;
	height: 100px;
	padding-bottom: 0;
	line-height: 1.2;
}


/*
#recipe_detail>h2>ruby {
	display: block;
	font-size: 70%;
	margin-top: 0.3em;
}
*/
ruby {
    display: inline-table;
    white-space: nowrap;
    vertical-align: 0.9em;
    text-align: center;
    line-height: 1;
	text-indent: 0;
	font-size: 70%;
}

ruby>rt {
    display: table-header-group;
    font-size: 50%;
    line-height: 1;
    text-align: center;
}



#recipe_detail>h2>img {
	float: right;
	width: 100px;
	vertical-align: top;
}

#recipe_detail>.gaiyou {
	color: #825224;
	font-size: 180%;
	line-height: 1.4;
	margin: 15px 0;
}

#recipe_detail>.gaiyou:after {
	content: '';
	display: block;
	clear: both;
	visibility: hidden;
}

#recipe_detail>.gaiyou>.nanido {
	float: right;
	width: 180px;
/*	background-color: #ff9;*/
	border-radius: 15px;
	margin-left: 15px;
}

#recipe_detail>.gaiyou>.nanido>img {
	width: 100%;
}

.zairyo {
	margin-bottom: 1em;
}


.zairyo>.left {
	float: left;
	width: 49%;
}

.zairyo>.right {
	float: right;
	width: 49%;
}

.zairyo>.left>img {
	width: 100%;
}

.zairyo>.left>p {
	border: 2px solid #6ac471;
	box-sizing: border-box;
	padding-left: 0.5em;
	font-weight: bold;
	font-size: 120%;
}

.nihon .zairyo>.left>p {
	border-color:#dd8a00;
}

.zairyo>.right>h3, .tsukurikata>h3 {
	background-color: #23ac39;
	color: white;
	font-size: 150%;
	padding: 0.2em 1em;
	border-radius: 1em;
	font-weight: bold;
	margin-bottom: 0.5em;
}

.nihon .zairyo>.right>h3, .nihon .tsukurikata>h3 {
	background-color: #C98006;
}

.zairyo:after {
	content: '';
	display: block;
	clear: both;
	visibility: hidden;
}

.right>ul {
	font-size: 140%;
	padding: 0;
	margin: 0;
	list-style: none;
}

.right>p {
	font-size: 130%;
	margin-top: 0.7em;
}

.nihon .zairyo p>strong, .nihon .tsukurikata strong {
	color: #E40000;
}


.right>ul>li {
	background: url(/images/dot.gif) repeat-x center;
  clear: both; /* 回り込み解除 */
  text-align: right; /* テキストを右寄せ */
}

.right>ul>li>strong {
  float: left; /* 回り込み指定 */
  background: #fff; /* 背景を白に */
  font-weight: normal; /* 太字をノーマルに */
}

.right>ul>li>span {
	background: #fff; /* 背景を白に */
	padding-left: 0.5em;
}

.right>ul.group {
	border-left: 2px solid #3eb54e;
	border-radius: 1em;
	padding-left: 1em;
}

.nihon .right>ul.group {
	border-left-color: #dd8a00;
}

.tsukurikata {
	margin-bottom: 1em;
}

.tsukurikata:after {
	content: '';
	clear: both;
	display: block;
	visibility: hidden;
}


.tsukurikata>ol {
	font-size: 140%;
	margin: 0;
	padding-left: 1.5em;
}

.tsukurikata>ol>li {
	margin-bottom: 0.3em;
}

.point {
	background-color: #EBBCC0;
	position: relative;
	font-weight: bold;
}

.point:after {
	content: '';
	width: 69px;
	height: 46px;
	position: absolute;
	top: -46px;
	left: 0;
	background: url(/images/point.gif) no-repeat center center;
	background-size: contain;
}

.index {
	font-size: 130%;
	border: 1px #6abfdc solid;
    background-color: #e1f4fc;
    clear: both;
    padding: 10px 10px 10px 20px;
}

.index>ul {
	list-style: none;
	margin: 0;
	padding-left: 1em;
}

.hi {
	padding-left: 1em;
	text-indent: -1em;
}

.hi>small {
	font-size: 90%;
}

@media only screen and (max-width: 49em) {
	#above_body {
		background-image: none;
	}
	#header {
		width: auto;
		background-color: white;
	}
	#header_logo {
    	margin-right: 0;
	}
	#recipe_topbox {
		width: 100%;
	}
	#recipe_topbox>a:first-child {
		width: 16.6%;
	}
	#recipe_topbox>a:last-child, #recipe_topbox>img {
		width: 83.3%;
	}
	#recipe_topbox>a>img {
		max-width: 100%;
		height: auto;
	}
	#recipe_contents_body {
		width: 100%;
	}
	#recipe_detail_body {
		width: 100%;
		padding: 10px;
	}
	#contact {
		width: 95%;
		box-sizing: border-box;
	}
	#contact-txt {
		width: 95%;
		padding: 0 0.7em;
		text-indent: 0;
		box-sizing: border-box;
	}
	#pageup {
		width: auto;
	}
	#recipe_detail>h2 {
		font-size: 200%;
	}
	#recipe_detail>h2>img {
		max-width: 20%;
	}
	#recipe_detail>.gaiyou {
		font-size: 150%;
	}
	#recipe_detail>.gaiyou>.nanido {
		max-width: 40%;
	}
	.point:after {
		background-image: url(/images/point_s.gif);
	}
	.recipe_contents>ul>li>a>img {
		height: 110px;
	}
	.recipe_contents>ul>li:nth-child(6) {
		clear: left;
	}

}

@media only screen and (max-width: 32em) {
	.zairyo>.left, .zairyo>.right {
		width: 100%;
		margin-bottom: 1em;
	}
	#recipe_contents_body {
		padding: 5px;
	}
	.recipe_top_contents>h1 {
		width: auto;
		float: none;
		margin-right: 0;
		margin-bottom: 10px;
	}
	.recipe_top_contents>img {
		width: 39%;
	}
	.profile>h3 {
		width: auto;
	}
	.nosmp {
		display: none;
	}
	.recipe_contents>ul>li {
		width: 49.6%;
	}
	.recipe_contents>ul>li:nth-child(odd) {
		margin-left: 0;
		clear: left;
	}
	.recipe_contents>ul>li:nth-child(6) {
		clear: none;
	}
	.recipe_contents>ul>li>a>img {
		height: 130px;
	}
	
}

@media only screen and (max-width: 22em) {
	.profile, .profile+p {
		margin-right: -72%;
	}
}

/* ----------------------------------------------------------------------------- */
.seiyo .recipe_top_contents>h1 {
	background-color: #52a678;
	font-family:"HG正楷書体-PRO","HG教科書体",cursive;
}

#recipe_detail_body.seiyo {
	background-image: url(/images/haikei3.gif);
}

.seiyo>#recipe_detail>h2 {
	color: #ec5256;
	border-bottom-color: #5571c5;
	height: 100px;
	padding-bottom: 0;
	line-height: 1.2;
}

.seiyo .zairyo>.left>p {
	border-color:#f1adb2;
}

.seiyo .zairyo>.right>h3, .seiyo .tsukurikata>h3 {
	background-color: #ec5256;
}


.seiyo .right>ul.group {
	border-left-color: #ec5256;
}

.hi2 {
	padding-left: 1em;
	text-indent: -1em;
	font-size: 140%;
}