@charset "utf-8";

/* =======================================

	RecipeDetail CSS

========================================== */
/*要素を非表示に*/
.detail #localContents,
#recipeName p.btn {
	display: none;
}




body.recipeList #page {
	padding-bottom: 100px;
}

.recipe.detail #page #entryBox {
	width: 750px;
}




/* 左カラム (商品写真+カテゴリーボタン)
-----------------------------------------*/
/* 左カラム 商品写真*/
.recipe #page #localNav .localNav_pdt {
	background: #f5eed6;
	padding: 10px 15px;
	border-radius: 4px;
	border: 1px solid #f6f3ed;
	float: left;
	display: inline;
	width: 150px;
	text-align: center;
}
.recipe.type-categoryBtn #page #localNav .localNav_pdt {
	background: none;
	border: none;
}
.recipe #page #localNav .localNav_pdt a {
    display: block;
    text-align: center;
}
.recipe #page #localNav .localNav_pdt a span {
    display: block;
    padding-top: 8px;
}
.recipe #page #localNav {
	width: 185px;
	padding-right: 0;
}



/* 左カラム カテゴリーボタン*/
.recipe #page #localNav ul {
}
.recipe #page #localNav ul li {
	display: block;
	margin-bottom: 13px;
}
.recipe #page #localNav ul li a {
	padding: 14px 0 14px 15px;
	display: block;
	width: 175px;
	background: #f5eed6;
border-radius: 4px 4px 2px 2px;
color: #8b6d34;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
text-decoration: none;
box-shadow: 0 3px 3px -3px rgba(139,109,52,0.6);
}
.recipe #page #localNav ul li.long a {
	letter-spacing: 3px;
}
.recipe #page #localNav ul li a:hover {
	background: #ffdda1;
}


/* 白だし 左カラム バナー*/





/* ページネーション
-----------------------------------------*/
.holder {
	clear: both;
	width: auto;
	margin: 0 10px 10px;
	padding: 0 0 3px;
	background: #fff;
	text-align: right;
}

#page .holder span,
#page .holder a {
	display: inline-block;
	margin: 0 3px 0 0;
	padding: 5px 8px;
	text-decoration: none;
	vertical-align: middle;
	background: #FFF;
	border: 1px solid #E5E5E5;
	cursor: pointer;
}

#page .holder a:hover {
	color: #666;
	background: #FCDACB;
	text-decoration: none;
}

#page .holder .jp-current {
	color: #666;
	background: #FCDACB;
	text-decoration: none;
}


#page .holder a.jp-disabled,
#page .holder a.jp-disabled:hover {
	cursor: default;
	color: #666;
	background: none;
	text-decoration: none;
}

#holderHeader {
	float: right;
	display: inline;
	margin: -33px 13px 0 10px;
}

#holderHeaderOmotenashi {
	clear: both;
}








#mainImg p#lead {
	text-shadow:0px 3px 1px #fff,0px 2px 1px #fff,1px 2px 1px #fff,2px 2px 1px #fff,2px 1px 1px #fff,2px 0px 1px #fff,3px 0px 1px #fff,2px -1px 1px #fff,2px -2px 1px #fff,2px -3px 1px #fff,1px -3px 2px #fff,0px -3px 2px #fff,-1px -3px 2px #fff,-2px -3px 2px #fff,-3px -3px 2px #fff,-3px -2px 2px #fff,-3px -1px 2px #fff,-3px 0px 2px #fff,-3px 1px 2px #fff,-3px 2px 2px #fff,-2px 2px 2px #fff,-1px 2px 2px #fff;
}

p.lead sub {font-size: 8px !important;}

#contents {
	margin-top: 50px !important;
}
.recipe.detail #contents {
	width: 100%;
}

.recipe.detail #contents h1 {
	margin-bottom: 0;
}

.recipe.detail .categoryTit {
    font-family: 'フォーク M', 'Folk Medium', sans-serif;
}
.recipe.detail .categoryTit a {
	border-top: 2px dotted #ea3a00;
    border-bottom: 2px dotted #ea3a00;
    color: #ea3a00 !important;
    font-size: 28px;
    font-weight: bold;
    text-decoration: none !important;
    display: block;
    padding: 10px 20px;
}

/* .categoryTitの商品ごとの色 ------------------*/
.shirodashi .categoryTit a 		{color:#93ca28 !important; border-color:#93ca28;}
.oyster .categoryTit a 			{color:#6c533f !important; border-color:#6c533f;}
.teien .categoryTit a 			{color:#60b64b !important; border-color:#60b64b;}
.mensoup .categoryTit a 		{color:#ea6e24 !important; border-color:#ea6e24;}
.bannou .categoryTit a 			{color:#a90e12 !important; border-color:#a90e12;}
.maropon .categoryTit a 		{color:#00ad3c !important; border-color:#00ad3c;}
.tamapon .categoryTit a 		{color:#bb5620 !important; border-color:#bb5620;}
.bukkake .categoryTit a 		{color:#5eb5d9 !important; border-color:#5eb5d9;}
.nabe .categoryTit a 			{color:#e65f21 !important; border-color:#e65f21;}
.karushio .categoryTit a 		{color:#51a239 !important; border-color:#51a239;}
.tetsu .categoryTit a 			{color:#212996 !important; border-color:#212996;}
.udonsoup-lowsalt .categoryTit a {color:#2ba715 !important; border-color:#2ba715;}
.m-oven .categoryTit a 			{color:#ed6e05 !important; border-color:#ed6e05;}
.donburi .categoryTit a 		{color:#a4361f !important; border-color:#a4361f;}
.baby .categoryTit a 			{color:#f08f9a !important; border-color:#f08f9a;}






#page p, #page th, #page td, #page li {
	font-size: 13px;
}

#page .att {
	font-size: 12px;
}

.recipe.detail p#topicPath {
	margin: 5px auto;
	position: relative;
	top: -105px;
	font-size: 12px;
}

.recipe p#topicPath {
	margin: 5px auto;
	position: relative;
	top: -105px;
	font-size: 12px;
}


/* RecipeDetail */
#recipeDetail {
	width: 100%;
	margin: 0 0 30px 0;
}

#recipeDetail.all {
	width: 565px;
	margin: 0 0 15px 0;
}

#recipeDetail:after { /* for Modern Browser */
	content: "."; display: block; clear: both; height: 0; visibility: hidden; font-size: 0;
}

#recipeDetail #date {display: none;}

#recipeDetail p#photo {
	margin-right: 16px;
	float: left;
	display: inline;
	width: 340px;
}

#recipeDetail p#photo img {
	width: 100%;
	height: auto;
	border: 1px solid #d1b07c;
}

#recipeName {
	position: relative;
	float: right;
	display: inline;
    padding-top: 40px;
	width: 370px;
	height: 214px;
}

#recipeName h1 {
	height: 90px;
	font-size: 184.8%;
	line-height: 1.3;
	font-size: 26px !important;
	font-weight: bold;
}

.all #recipeName h2 {
	height: 60px;
}

#recipeName h2 span {
	font-size: 77%;
}

#recipeName span.small {
	font-size: 77%;
}

#recipeName p.btn img.movie {
	padding-right: 10px;
}

#recipeName #number {
	margin-bottom: 10px;
}

#recipeName #number,
#recipeName #number-sub {
	overflow: hidden;
}

#recipeName #number.number-top {
	padding-bottom: 15px;
}

#recipeName #number p,
#recipeName #number-sub p {
	padding: 0 15px 5px 0;
	float: left;
	display: inline;
}

#recipeName #number.with-title p,
#recipeName #number-sub.with-title p {
	width: 8em;
}

#recipeName #number p span,
#recipeName #number-sub p span {
	display: inline-block;
	margin: 12px 0 0 3px;
	font-size: 16px;
}

#recipeName #number p span span,
#recipeName #number-sub p span span {
	position: relative;
	margin: 0;
	top: -6px;
	font-size: 11px;
	line-height: 1;
}

#recipeName #number p span.all {
	margin-top: 8px;
}

#recipeName #number p img {
	border-radius: 2px;
}

#recipeName p.title {
	width: 110px;
	color: #993333;
	font-weight: bold;
}

#recipeName p.title span {
	display: block !important;
	margin: 0 !important;
}

#recipeName #number-sub p span em {
	font-size: 93%;
	line-height: 1em;
	display: block;
}

#recipeName p#recipeTitle { display: none;}

#recipeName .with-title {
	margin-bottom: 5px;
	border-bottom: 1px dotted #CCC;
}

#recipeName .with-title.last {
	border: none;
}

#recipeName p.att {
	margin-right: 10px;
	float: left;
}


/* Material */
#material {
	margin-bottom: 35px;
	float: left;
	display: inline;
	width: 317px;
	padding-right: 16px;
}

#material h3,
#howto h3,
#recipe_parts h3 {
	width: auto;
	margin-bottom: 13px;
	padding: 9px 10px 7px;
	font-size: 16px;
	border-bottom: 2px solid #d1b07c;
	font-weight: bold;
	font-family: 'フォーク M', 'Folk Medium', sans-serif;
}

#material .font12 {
		font-size:92.4%;
	}
#material h3 span {
	font-size: 80%;
	line-height: 1.8;
}

#material table {
	margin: 0 auto;
	width: 98%;
}

#material table th,
#material table td {
	padding: 8px 5px;
	border-bottom: 1px dotted #999999;
}



#material table td {
	width: 40%;
	text-align: right;
	vertical-align: middle;
}

#material table span.br{
	display: block;
}

#page #material table span.ex {
	font-size: 11px;
}

#material table .spot a {
	text-decoration: none;
}

#material table .spot a:hover {
	text-decoration: underline;
}

#material table .spot a:visited {
	color: #c30;
}

/*材料が入れ子になっている場合*/
#material div.tableIn {padding: 0;}

#material div.tableIn p.sauceTit {
	margin-left: 22px;
	margin-top: 3px;
	padding: 2px 0 2px 10px;
	width: 286px;
	line-height: 1em;
	background-color: #ffe8bc;
}

#material div.tableIn table {
	margin-bottom: 5px;
	width: 90%;
	margin-left: 22px;
}

p.sTit {
	margin: 15px 0 0 0;
	padding: 5px 0 5px 5px;
	font-weight: bold;
	font-weight: bold;
	background-color: #FFFCCC;
}




/*Sauce*/
p.sauceTit {
	width: 286px;
	margin: 25px auto 0;
	padding: 5px 0 5px 15px;
	font-weight: bold;
	background-color: #FFF2AD;
}

p.sauceTitS {
	width: auto;
	margin: 13px 0 0 0;
	padding: 0 0 0 15px;
	font-weight: bold;
	background-color: #FFF2AD;
}



#material table th.sauceTit,
#material table td.sauceTit {
	font-weight: bold;
	background-color: #FFFCCC;
	border: none;
}

#material table.sauce {
    margin: 0 auto 10px;
    width: 300px;
	background: #FFFEF1;
	border: 1px solid #F8E787;
}

#material table.sauce th {
	padding-left: 14px;
}


/*タイトル*/
p.sauceStit {
	width: auto;
	margin: 13px 0 0 12px;
	padding: 5px 0 5px 10px;
	font-weight: bold;
	background-color: #FFFCCC;
}

 /*テーブル*/
#material table.sauceS {
	width: 220px;
	margin: 0 0 0 14px;
}

#material table.sauceS td.l {
	text-align: left;
}

#material table.sauceS td.stit {
	font-weight: bold;
	vertical-align: middle;
}

#material table.under {
	margin-top: 20px;
}



/*材料が入れ子になっている場合*/

#material .inner p.sauceTit {
	margin: 10px 0 0 13px;
	padding: 2px 0 2px 7px;
	background: #FFE993;
	line-height: 1.2;
}

#material .inner table.sauce {
	margin-bottom: 3px;
	background: #FFF9E0;
}





/* Howto */
#howto {
	margin-bottom: 35px;
	float: right;
	display: inline;
	width: 390px;
}
.tetsu #howto {width: 320px;}

#howto ol {
	padding: 5px;
}

#howto ol li {
	padding: 0 0 1em 1.2em;
	line-height: 1.5;
	text-indent: -1.2em;
}

#howto ol li span {
	padding: 0 2px;
	font-weight: bold;
}

#howto ol li.sTit {
	margin: 0 0 5px 0;
	padding: 5px 0 5px 5px;
	font-weight: bold;
	text-indent: 0;
	background-color: #FFFCCC;
}

#howto p.caption {
	width: 85%;
	margin: 0 auto;
	padding: 5px;
	border: 1px solid #CCC;
}

#howto p.caption span.stit {
	color: #FF6600;
}

#howto ul.abc {
	width: auto;
	margin-top: -1.45em;
	padding: 0;
}

#howto ul.abc li {
	padding: 0 1em 0.4em 1.3em;
	line-height: 1.3;
}

#howto p.notes {
    padding: 12px 1em 0.4em 1.3em;
	text-indent: -1.2em;
    font-size: 11px;
    line-height: 1.5;
	border-top: 1px dotted #ccc;
}

#howto p#orangepageRogo,
#howto p#tieupLogo {
	float: right;
	margin-top: 20px;
	border-top: 1px dotted #ccc;
    width: 100%;
    text-align: right;
}

#howto .border {
	margin-top: 10px;
	padding: 10px;
	border: none;
	background-color: #ffdca3;
	border-radius: 5px;
}

#howto .border:first-child {
	margin-top: 0;
}

#howto .border p.strong {
	margin-bottom: 5px;
	padding: 0 2px 5px;
	border-bottom: 1px dotted #F96F00;
	color: #F96F00;
	font-size: 13px;
	border-radius: 5px 5px 0 0;
}

#howto .border ol {
	padding: 5px;
	background: white;
	border-radius: 4px;
}

#howto .border ol li {
	padding: 5px 0 5px 1.2em;
}

#howto .border ol li.no-number {
	padding-left: 0;
	text-indent: 0 !important;
}

/* topic */
.topic {
	position: relative;
	padding: 10px;
	background: #E6EFAC;
	border-radius: 5px;
}

#howto .topic h3 {
	margin-bottom: 5px;
	padding: 3px 0 8px 3px;
	border: none;
	border-bottom: 1px dotted #62B24D;
	background-image: none;
}

.topic h3 span {
	padding-right: 5px;
	font-weight: bold;
	color: #62B24D;
}

.topic p {
	padding: 8px;
	background: #FCFFE5;
	border-radius: 5px;
}

.topic p.image {
	padding: 0;
	background: none;
}

.topic p.image img {
	position: absolute;
	top: 2px;
	right: 15px;
	padding: 0;
	background: none;
}


.material_howto_wrap {
	margin-bottom: 30px;
	overflow: hidden;
}





/* recipe_parts */
#recipe_parts {
	margin-bottom: 35px;
	width: 560px;
}

#recipe_parts h3 {
	width: 538px;
    color: #f86900;
    font-weight: bold;
    letter-spacing: 1px;
}

#recipe_parts h3 span {
    position: relative;
    display: inline-block;
    top: -1px;
    background: #ff7800;
    color: #fff;
    left: -5px;
    width: 15px;
    height: 15px;
    padding: 4px 0 0 4px;
    border-radius: 9px;
    font-size: 12px;
}

#recipe_parts ul {
	margin-top: 20px;
	width: 560px;
	overflow: hidden;
}

#recipe_parts ul li {
	position: relative;
    margin: 0 0 15px 18px;
    float: left;
    width: 126px;
    height: 130px;

}

#recipe_parts ul li:hover {

}

#recipe_parts ul li.top {
	margin-left: 0;
}

#recipe_parts ul li a img {
	width: 126px;
	height: 130px;
	transition: 0.4s;
	opacity: 1;
    box-sizing: border-box;
	border: 1px solid #fff;
}

#recipe_parts ul li a:hover img {
	opacity: 0.9;
	border: 1px solid #f86900;
}

#recipe_parts ul li a p {
	margin: 1px;
	position: absolute;
	padding: 3px 0 3px 3px;
    bottom: 0;
    width: 121px;
    transition: 0.4s;
    background: rgba(72,34,0,0.4);
    color: #fff;
    font-size: 14px;
    line-height: 1.1;
    text-align: center;
}

#recipe_parts ul li a:hover p {
    background: rgba(72,34,0,0.55);
}






/*-- rightNav --*/
ul#localBnr {
	float: right;
}

ul#localBnr li {
	position: relative;
	margin: 0 2px 8px 0;
	width: 150px;
	border: 1px solid #ffc052;
	border-radius: 6px;
}

ul#localBnr li:hover {
	margin: 0 0 6px;
	top: -1px;
	left: -1px;
	border: 2px solid #f45c00;
}

ul#localBnr li img.bnr {
	width: 150px;
	height: 102px;
	border-radius: 5px;
}

ul#localBnr li p.pdt {
	position: absolute;
}
ul#localBnr li.No02 p.pdt {top: 29px; left: 100px;}
ul#localBnr li.No04 p.pdt {top: 9px; left: 95px;}
ul#localBnr li.No05 p.pdt {top: 37px; left: 8px;}
ul#localBnr li.No06 p.pdt {top: 13px; left: 49px;}
ul#localBnr li.No08 p.pdt {top: 3px; left: 115px;}
ul#localBnr li.No10 p.pdt {top: 3px; left: 74px; width: 70px;}
ul#localBnr li.No11 p.pdt {top: 2px; left: 114px;}

ul#localBnr li.No09 p.pdt img {position: absolute;}
ul#localBnr li.No09 p.pdt img.pdt01 {top: -57px; left: 5px;}
ul#localBnr li.No09 p.pdt img.pdt02 {top: -28px; left: 30px;}
ul#localBnr li.No10 p.pdt img.pdt01 {top: -57px; left: 5px;}


ul#localBnr li p.pdt img {
	padding: 0 !important;
}





ul#txtList {
	margin: 5px 5px 6px 7px;
	padding: 4px 0 0 0;
	background: url(../../img/common/line_orangedot.gif) repeat-x;
}

ul#txtList li {
	padding: 3px 0 8px 3px;
	text-align: left;
	background: url(../../img/common/line_orangedot.gif) repeat-x left bottom;
}


.sup {
	font-size: 77%;
	margin: 0 1px;
	vertical-align: super;
}

h3 .sup {
	vertical-align: text-top;
}

#page .notes {
	padding-left: 1.5em;
}

#keywords {
	text-indent: -9999px;
}

#words {
	margin: 20px 0 60px;
	padding: 15px 20px;
	border: 1px solid #c29753;
	background: #FFFEF5;
}

#words h3 {
	margin-bottom: 22px;
	font-size: 18px;
	letter-spacing: 1px;
	color: #ae6a00;
	font-weight: bold;
}

#words ul {
	margin-left: 2px;
	overflow: hidden;
}

#words ul li {
	margin: 0 20px 10px 0;
	float: left;
	font-weight: bold;
	font-size: 108%;
}

#words ul li a,
#words ul li a:visited {
	color: #fff;
    font-size: 16px;
    background: #f59601;
    text-decoration: none;
    padding: 7px 13px 5px 13px;
    display: block;
    border-radius: 15px;
    letter-spacing: 2px;
}

#words ul li a:hover {
    background: #ea6900;
    color: #fff !important;
}

p.banner {
	margin: 0;
	clear: both;
}

p.banner img {
	border-radius: 10px;
	box-shadow: 0 0 15px rgba(0,0,0,0.2);
}

p.banner img:hover {
	opacity: 0.9;
}











/*--------　レシピタイトルがすごく長い場合 (例：きのこのアンティパスト)
h2内span要素をtext-indentで飛ばし、htmlページにタイトルをpタグで記述---------*/

h1.longTit {
	height: 1px !important;
}

h1.longTit span {
	display: block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

p.longTit {
height: 88px;
font-size: 184.8% !important;
line-height: 1.3 !important;
}





/*新しいheaderのbackgroundを除外*/
.recipe #header.new #logoArea {
	margin: 0 auto;
	width: 100%;
	max-width: 1138px;
	height: 50px;
	background: transparent;
}