@charset "utf-8";

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

common.css

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


/*-------------------------------------
 reset
-------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img {
	max-width: 100%;
	line-height: 0;
	vertical-align: bottom;
}
iframe {
	vertical-align: bottom;
	border: 0;
}


/*-------------------------------------
 setting
-------------------------------------*/
html {
	height: 100%;
}
body {
	position: relative;
	height: 100%;
	min-height: 100%;
	color: #000;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo;
	font-size: 16px;
	line-height: 1.8;
	background: #fff;
	-webkit-text-size-adjust: 100%;
}
a {
	color: #000;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}

strong {
	font-weight: bold;
}
em {
	font-style: normal;
}


/*-------------------------------------
 wrapper
-------------------------------------*/
#wrapper {
	position: relative;
	overflow: hidden;
}
.inner {
	position: relative;
	max-width: 768px;
	margin: 0 auto;
	box-sizing: border-box;
	overflow: hidden;
}
.inner:after {
	clear: both;
	display: block;
	content: "";
}


/*-------------------------------------
 header
-------------------------------------*/
#header .inner {
	display: table;
	width: 100%;
	height: 77px;
	border-top: 6px solid #B20019;
	border-bottom: 1px solid #B20019;
}
.headerLogo01 {
	display: table-cell;
	padding: 4px 6px 6px 18px;
	vertical-align: top;
}
.headerLogo02 {
	display: table-cell;
	padding: 6px;
	text-align: right;
	vertical-align: top;
}

/*-------------------------------------
 modal
-------------------------------------*/
/* modalNav
-------------------------------------*/
.modalNav {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	max-width: 768px;
	margin: 0 auto;
	z-index: 5000;
	padding: 96px 60px;
	background: rgba(35,24,21,0.95);
	box-sizing: border-box;
}
.modalNav .close {
	position: absolute;
	top: 28px;
	left: 22px;
	width: 23px;
	height: 23px;
	cursor: pointer;
	text-indent: 100%;
	white-space: nowrap;
	background: url(../images/icn_close.png) no-repeat 0 0;
	background-size: 23px 23px;
	overflow: hidden;
}
.modalNav ul {
	border-top: 1px solid #fff;
}
.modalNav ul li {
	border-bottom: 1px solid #fff;
}
.modalNav ul li a {
	display: block;
	padding: 16px 5px 16px 75px;
	color: #fff;
	background: url(../images/icn_menu.png) no-repeat 30px 23px;
	background-size: 21px 13px;
}

/* modalSearch
-------------------------------------*/
.modalSearch {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	max-width: 768px;
	margin: 83px auto 0 auto;
	z-index: 5000;
	background: rgba(35,24,21,0.95);
	box-sizing: border-box;
}
.modalSearch .btn {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	max-width: 768px;
	margin: auto;
	padding: 12px 12px 15px 23px;
  background: rgba(35,24,21,0.95);
	overflow: hidden;
	box-sizing: border-box;
}
.modalSearch .search,
.modalSearch .clear {
	float: right;
	width: 54px;
	height: 54px;
	margin: 0 0 0 12px;
	color: #fff;
	font-size: 13px;
	font-weight: bold;
	line-height: 54px;
	text-align: center;
	cursor: pointer;
	border-radius: 100%;
}
.modalSearch .search {
	border: 1px solid #B20019;
	background: #B20019;
}
.modalSearch .clear {
	border: 1px solid #fff;
}
.modalSearch .close {
	float: left;
	width: 23px;
	height: 23px;
	margin: 16px 0 0 0;
	cursor: pointer;
	text-indent: 100%;
	white-space: nowrap;
	background: url(../images/icn_close.png) no-repeat 0 0;
	background-size: 23px 23px;
	overflow: hidden;
}
.modalSearch dl dt {
	margin: 0 0 25px 0;
	padding: 5px 20px;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	border-top: 1px solid #fff;
	border-bottom: 2px solid #B20019;
	box-shadow: 0 3px 0 #C6C6C6;
}
.modalSearch dl dd ul {
	letter-spacing: -0.4em;
	text-align: center;
}
.modalSearch dl dd ul li {
	display: inline-block;
	max-width: 33.3%;
	margin: 0 0 25px 0;
	padding: 0 20px;
	letter-spacing: normal;
	text-align: center;
	vertical-align: top;
	box-sizing: border-box;
}
.modalSearch dl dd ul li .icn {
	max-width: 76px;
	max-height: 76px;
	padding: 8px;
	cursor: pointer;
	border-radius: 100%;
	border: 1px solid transparent;
	box-sizing: border-box;
}
.modalSearch dl dd ul li .icn img {
	width: 57px;
}
.modalSearch dl dd ul li p {
	padding: 3px 0 0 0;
	color: #fff;
	font-size: 11px;
}
.modalSearch dl dd ul li.select .icn {
	border: 1px solid #fff;
}

/*-------------------------------------
 layout
-------------------------------------*/
/* recipeTitle
-------------------------------------*/
.recipeTitle .inner {
	padding: 0 0 20px 0;
	border-top: 6px solid #B20019;
	background: url(../images/recipe_ttl_bg.jpg) no-repeat 0 0;
	background-size: 100% auto;
}
.recipeTitle h1 {
	width: 60%;
	margin: 0 0 10px 5%;
	/*padding: 0 35% 0 0;*/
}
.recipeTitle p {
	position: relative;
	margin: 0 -40% 5px 5%;
	padding: 0 0 0 33px;
	font-size: 18px;
}
.recipeTitle p:after {
	position: absolute;
	top: 0.8em;
	left: 0;
	width: 27px;
	height: 1px;
	content: "";
	background: #000;
}
.btnSearch {
	display: inline-block;
	cursor: pointer;
	width: 70%;
	/*padding: 0 35% 0 0;*/
}
.btnMenu {
	position: absolute;
	top: 16px;
	right: 18px;
	width: 30px;
	cursor: pointer;
	text-align: center;
}
.btnMenu span {
	display: block;
	width: 30px;
	height: 4px;
	margin: 0 0 4px 0;
	background: #000;
}
.btnMenu em {
	display: block;
	font-size: 10px;
  font-weight: bold;
	line-height: 1;
}


/* recipeIndex
-------------------------------------*/
.recipeIndex .recipeList {
	padding: 0 15px;
	letter-spacing: -0.4em;
}
.recipeIndex .recipeList .recipeCard {
	position: relative;
	display: inline-block;
	width: 25%;
	max-width: 184px;
	padding: 0 5px 20px 5px;
	letter-spacing: normal;
	vertical-align: top;
	box-sizing: border-box;
}
.recipeIndex .recipeList .recipeCard,
.recipeIndex .recipeList .recipeCard a {
	color: #231815;
	text-decoration: none;
}
.recipeIndex .recipeList .recipeCard .pic {
	position: relative;
}
.recipeIndex .recipeList .recipeCard .pic:before {
	position: absolute;
	top: -8px;
	left: 0;
	width: 50px;
	height: 36px;
	content: "";
	background: url(../images/icn_staple.png) no-repeat 0 0;
	background-size: 100% auto;
}
.recipeIndex .recipeList .recipeCard .pic .min {
	position: absolute;
	bottom: 6px;
	right: 6px;
	width: 25%;
	max-width: 43px;
}
.recipeIndex .recipeList .recipeCard .item {
	position: relative;
	background: url(../images/recipe_bg01.png) repeat center center #fff;
}
.recipeIndex .recipeList .recipeCard .item:after{
	box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.7);
	position: absolute;
	content: '';
	background: transparent;
	bottom: 20px;
	right: 19px;
	width: 70%;
	height: 70%;
	transform: rotate(5deg) skew(10deg);
	z-index: -2;
}
.recipeIndex .recipeList .recipeCard .item:before{
	box-shadow: 11px 11px 32px rgba(255, 255, 255, 0.7);
	position: absolute;
	content: '';
	background: transparent;
	bottom: 56px;
	right: 51px;
	width: 50%;
	height: 50%;
	transform: rotate(20deg) skew(45deg);
	z-index: -1;
}
.recipeIndex .recipeList .recipeCard .item .season {
	float: left;
	width: 28px;
	margin: 10px 0 0 0;
}
.recipeIndex .recipeList .recipeCard .item .ttl {
	position: relative;
	background: url(../images/recipe_bg03.png) repeat-x center bottom;
}
.recipeIndex .recipeList .recipeCard .item .ttl:before {
	position: absolute;
	top: -0.6em;
	left: 0;
	width: 100%;
	height: 18px;
	content: "";
	background: url(../images/recipe_bg02.png) no-repeat center top;
	background-size: auto 18px;
}
.recipeIndex .recipeList .recipeCard .item h3 {
	position: relative;
	min-height: 40px;
	padding: 15px 5px 10px 7px;
	font-size: 13px;
	line-height: 1.4;
	overflow: hidden;
}
.recipeIndex .recipeList .recipeCard .item p {
	padding: 10px 5px 10px 10px;
	font-size: 12px;
	line-height: 1.6;
}
.star {
	color: #E60012;
}


/* recipeDetail
-------------------------------------*/
.recipeDetail h2 {
	padding: 12px 0 15px 67px;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.4;
	border-top: 1px solid #B20019;
	background: url(../images/icn_flag01.png) no-repeat 22px 0;
	background-size: 31px 45px;
}

/* pic */
.recipeDetail .pic {
	text-align: center;
}
.recipeDetail .pic img {
	width: 100%;
}

/* summary */
.recipeDetail .summary {
	position: relative;
	padding: 10px;
	text-align: center;
	border-top: 4px solid #ED75A5;
	background: url(../images/recipe_bg01.png) repeat center center #fff;
}

/* category */
.recipeDetail .category {
	margin: 0 0 20px 0;
	padding: 15px 0 13px 0;
	background: #F297BB;
}
.recipeDetail .category ul {
	letter-spacing: -0.4em;
	text-align: center;
}
.recipeDetail .category ul li {
	display: inline-block;
	max-width: 25%;
	padding: 0 10px;
	letter-spacing: normal;
	vertical-align: top;
	box-sizing: border-box;
}
.recipeDetail .category ul li .icn {
	max-width: 75px;
	max-height: 75px;
	padding: 8px 5px;
	border-radius: 100%;
	border: 1px solid #fff;
	box-sizing: border-box;
}
.recipeDetail .category ul li .icn img {
	width: 57px;
}
.recipeDetail .category ul li p {
	padding: 3px 0 0 0;
	color: #fff;
	font-size: 11px;
}

/* creator */
.recipeDetail .creator {
	margin: 0 0 15px 0;
	padding: 0 0 20px 0;
	border-bottom: 1px solid #E9528E;
}
.recipeDetail .creator dl {
	padding: 5px 0 5px 60px;
	font-size: 13px;
	line-height: 1.3;
	background: url(../images/creator_icn.png) no-repeat 8px 0;
	background-size: 39px 56px;
}
.recipeDetail .creator .mark {
	color: #B20019;
}

/* ingredients */
.recipeDetail .ingredients {
	padding: 0 0 50px 0;
	background: url(../images/ingredients_bg.jpg) no-repeat right top;
}
.recipeDetail .ingredients h3 {
	padding: 8px 0 18px 48px;
	font-weight: bold;
	background: url(../images/ingredients_ttl.png) no-repeat 8px 0;
	background-size: 31px 45px;
}
.recipeDetail .ingredients table {
	margin: 0 25% 0 10px;
}
.recipeDetail .ingredients table th {
	padding: 0 50px 3px 0;
	text-align: left;
}
.recipeDetail .ingredients table td {
	padding: 0 0 3px 0;
	text-align: right;
}

/* step */
.recipeDetail .step {
	padding: 0 0 40px 0;
}
.recipeDetail .step h3 {
	padding: 8px 0 18px 48px;
	font-weight: bold;
	background: url(../images/step_ttl.png) no-repeat 8px 0;
	background-size: 31px 45px;
}
.recipeDetail .step ul {
	background-image: linear-gradient(to left, #000 0%, #000 16%, transparent 17%, transparent 100%);
	background-repeat: repeat-x;
	background-position: center top;
	background-size: 6px 1px;
}
.recipeDetail .step ul li {
	padding: 8px;
	line-height: 1.7;
	background-image: linear-gradient(to left, #000 0%, #000 16%, transparent 17%, transparent 100%);
	background-repeat: repeat-x;
	background-position: center bottom;
	background-size: 6px 1px;
	overflow: hidden;
}
.recipeDetail .step ul li .pic {
	position: relative;
	z-index: 1;
	float: right;
	padding: 0 0 0 20px;
	max-width: 40%;
}
.recipeDetail .step ul li .item p {
	position: relative;
	padding: 0 0 0 1.6em;
}
.recipeDetail .step ul li .mark {
	position: absolute;
	top: 0.3em;
	left: 0;
	display: inline-block;
	min-width: 1.6em;
	min-height: 1.6em;
	margin: 0 3px 0 0;
	color: #fff;
	font-size: 0.7em;
	font-weight: bold;
	line-height: 1.6em;
	text-align: center;
	vertical-align: middle;
	background: #B20019;
	border-radius: 50%;
}
#bigPic {
	display: block;
	position: absolute;
	left: 0;
	z-index: 2501;
	width: 100%;
	height: 100vh;
	text-align: center;
}
#bigPic img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
#bigPic .close {
	color: #fff;
	font-size: 46px;
	position: absolute;
	top: 0;
	right: 10px;
	cursor: pointer;
}

/* point */
.recipeDetail .point {
	margin: 0 0 60px 0;
	padding: 0 80px 10px 80px;
	line-height: 1.9;
	background: url(../images/point_bg01.png) repeat-y left top, url(../images/point_bg02.png) repeat-y right top;
	background-size: 78px auto, 78px auto;
}
.recipeDetail .point h3 {
	margin: 0 0 20px 0;
	text-align: center;
}
.recipeDetail .point h3 img {
	width: 131px;
}

/* specialist */
.recipeDetail .specialist {
	padding: 0 0 30px 0;
}
.recipeDetail .specialist h3 {
	margin: 0 0 20px 0;
	text-align: center;
}
.recipeDetail .specialist h3 img {
	width: 187px;
}
.recipeDetail .specialist h4 {
	margin: 0 0 30px 0;
	font-size: 17px;
	font-weight: bold;
	text-align: center;
}
.recipeDetail .specialist ul {
	padding: 0 3px;
	letter-spacing: -0.4em;
	text-align: center;
}
.recipeDetail .specialist ul li {
	display: inline-block;
	max-width: 50%;
	margin: 0 0 20px 0;
	padding: 0 5px;
	letter-spacing: normal;
	vertical-align: top;
	box-sizing: border-box;
}
.recipeDetail .specialist ul li p {
	padding: 5px 0 0 0;
	font-size: 14px;
	line-height: 1.6;
}
.recipeDetail .specialist ul li p em {
	font-size: 16px;
}
.recipeDetail .specialist blockquote {
	position:relative;
	padding: 40px 50px;
}
.recipeDetail .specialist blockquote:before {
	position:absolute;
	top: 0;
	left: 10px;
	content: "";
	width: 39px;
	height: 30px;
	background: url(../images/specialist_bg01.png) no-repeat 0 0;
	background-size: 39px 30px;
}
.recipeDetail .specialist blockquote:after {
	position:absolute;
	bottom: 0;
	right: 10px;
	content: "";
	width: 39px;
	height: 30px;
	background: url(../images/specialist_bg02.png) no-repeat 0 0;
	background-size: 39px 30px;
}

/* supervisor */
.recipeDetail .supervisor {
	padding: 0 0 30px 0;
}
.recipeDetail .supervisor ul {
	padding: 0 3px;
	letter-spacing: -0.4em;
	text-align: center;
}
.recipeDetail .supervisor ul li {
	display: inline-block;
	max-width: 50%;
	margin: 0 0 20px 0;
	padding: 0 5px;
	letter-spacing: normal;
	vertical-align: top;
	box-sizing: border-box;
}
.recipeDetail .supervisor ul li p {
	padding: 5px 0 0 0;
	font-size: 14px;
	line-height: 1.6;
	text-align: left;
}
.recipeDetail .supervisor ul li p em {
	font-size: 16px;
}
.recipeDetail .supervisor blockquote {
	padding: 15px;
}

/* recipeNa
-------------------------------------*/
.recipeNa .inner {
	background: radial-gradient(#383838, #1b1b1b);
}
.recipeNa .inner:after {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 0;
	width: 100%;
	content: "";
	background: url(../images/recipe_na_bg.png) repeat-x center top;
	background-size: auto 480px;
}
.recipeNa dl {
	position: relative;
	z-index: 2;
	padding: 350px 0 18px 0;
	min-height: 480px;
	color: #fff;
	text-align: center;
	background: url(../images/recipe_na.png) no-repeat center 13px;
	background-size: 375px 450px;
	box-sizing: border-box;
}
.recipeNa dl dt {
	font-size: 18px;
}

/* recipeRanking
-------------------------------------*/
.recipeRanking h2 {
	padding: 12px 0 15px 67px;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.4;
	border-top: 1px solid #B20019;
	background: url(../images/icn_flag01.png) no-repeat 22px 0;
	background-size: 31px 45px;
}
.recipeRanking ol {
	display: table;
	width: 100%;
}
.recipeRanking ol li {
	display: table-row;
	
}
.recipeRanking ol li div {
	display: table-cell;
	line-height: 1.4;
	vertical-align: middle;
	border-bottom: 1px solid #B20019;
}
.recipeRanking ol li .rank {
	padding: 10px 0 10px 20px;
	white-space: nowrap;
	line-height: 1;
}
.recipeRanking ol li.rank01 .rank {
	font-size: 31px;
	font-weight: bold;
}
.recipeRanking ol li.rank02 .rank {
	font-size: 29px;
	font-weight: bold;
}
.recipeRanking ol li.rank03 .rank {
	font-size: 27px;
	font-weight: bold;
}
.recipeRanking ol li.rank04 .rank {
	font-size: 25px;
}
.recipeRanking ol li.rank05 .rank {
	font-size: 23px;
}
.recipeRanking ol li .ttl {
	width: 100%;
	padding: 10px 25px 10px 45px;
	font-size: 13px;
}
.recipeRanking ol li.rank01 .ttl {
	background: url(../images/icn_rank01.png) no-repeat 13px center;
	background-size: auto 31px;
}
.recipeRanking ol li.rank02 .ttl {
	background: url(../images/icn_rank02.png) no-repeat 13px center;
	background-size: auto 31px;
}
.recipeRanking ol li.rank03 .ttl {
	background: url(../images/icn_rank03.png) no-repeat 13px center;
	background-size: auto 31px;
}
.recipeRanking ol li .link {
	padding: 10px 20px 10px 0;
	font-size: 12px;
	white-space: nowrap;
}
.recipeRanking ol li .link a {
	display: block;
	padding: 0 0 0 27px;
	background: url(../images/icn_link.png) no-repeat 0 0;
	background-size: 18px 18px;
}


/*-------------------------------------
 pagetop
-------------------------------------*/
#pagetop .inner {
	padding: 10px;
}
#pagetop a {
	position: relative;
	float: right;
	width: 55px;
	padding: 73px 0 0 0;
	font-size: 12px;
	text-align: center;
	background: url(../images/pagetop.png) no-repeat 0 0 rgba(255,255,255,0.5);
	background-size: 55px auto;
}
.pagetopL,
.pagetopR {
	position: absolute;
	top: 56px;
	width: 23px;
	height: 15px;
	line-height: 1;
}
.pagetopL {
	left: 6px;
}
.pagetopR {
	right: 3px;
}


/*-------------------------------------
 footer
-------------------------------------*/
#footer .inner {
	text-align: center;
	border-top: 1px solid #B20019;
	border-bottom: 6px solid #B20019;
	
}
#footer .footerLogo01 {
	padding: 7px 10px;
}
#footer p {
	padding: 0 10px 15px 10px;
	font-size: 11px;
	line-height: 1.7;
}

/*-------------------------------------
 hover
-------------------------------------*/
.pcWrap a,
.pcWrap .btnSearch {
	transition: opacity 0.2s linear;
	-webkit-transition: opacity 0.2s linear;
	-moz-transition: opacity 0.2s linear;
}
.pcWrap a:hover,
.pcWrap .btnSearch:hover {
	opacity: 0.8;
}







/*-------------------------------------------------------------------
 Media Queries
-------------------------------------------------------------------*/

/* 
-------------------------------------------------------------------*/
@media screen and (max-width: 680px) {

/*-------------------------------------
 layout
-------------------------------------*/
/* recipeTitle
-------------------------------------*/
/*.recipeTitle .inner {
	padding: 0 40% 20px 0;
}*/
.recipeTitle p {
	font-size: 16px;
}


/* recipeIndex
-------------------------------------*/
.recipeIndex .recipeList .recipeCard {
	width: 33.3%;
}
.recipeIndex .recipeList {
	padding: 0 10px;
}



}

/* 
-------------------------------------------------------------------*/
@media screen and (max-width: 480px) {

/*-------------------------------------
 layout
-------------------------------------*/
/* recipeTitle
-------------------------------------*/
.recipeTitle p {
	font-size: 14px;
}


/* recipeIndex
-------------------------------------*/
.recipeIndex .recipeList .recipeCard {
	width: 50%;
}
.recipeIndex .recipeList {
	padding: 0 3px;
}



}

/* 
-------------------------------------------------------------------*/
@media screen and (min-width: 500px) {

.slideArea ul li .item {
	width: 45%;
}
.recipeTitle h1 {
	width: 42%;
}
.btnSearch {
	width: 50%;
}

}


/* 
-------------------------------------------------------------------*/
@media screen and (min-width: 600px) {


.slideArea ul li .item {
	width: 43%;
}
.recipeTitle h1 {
	width: 42%;
}
.btnSearch {
	width: 50%;
}

}


/* 
-------------------------------------------------------------------*/
@media screen and (min-width: 700px) {

.slideArea ul li .item {
	width: 38%;
}
.recipeTitle h1 {
	width: 33%;
}
.btnSearch {
	width: 40%;
}

}