@charset "utf-8";
/* CSS Document */
@font-face {
	font-family: 'mamelon';
	font-weight: normal;
	src: url("../font/Mamelon-3HiRegular.woff2") format('woff2');
}
* {
	padding: 0;
	margin: 0;
}
html, body {
	height: 100%;
	font-family: 'Yu Gothic';
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	color: #4C4948;
}
#box_main a:link,
#box_main a:visited {
	color: #06C;
}
.box {
	width: 1000px;
	margin: 0 auto;
}
#wrapper {
	min-height: 100%;
}
header {
	display: block;
	height: 120px;
	background-color: #952123;
	color: #FFF;
	font-family: 'mamelon', 'Yu Gothic', sans-serif;
}
	#inner_header {
		position: relative;
		width: 100%;
		height: 120px;
		max-width: 1400px;
		margin: 0 auto;
	}
	h1#logo {
		display: block;
		width: 420px;
		height: 70px;
		font-size: 16px;
		font-weight: normal;
		line-height: 24px;
		background-image: url("../img/desktop/logo_header.png");
		background-repeat: no-repeat;
		background-position: center bottom;
		text-align: center;
		position: absolute;
		left: 20px;
		top: 20px;		
	}
		h1 a {
			display: block;
			width: 100%;
			height: 100%;
			color: #FFF;
			text-decoration: none;
		}
	header nav {
		width: 600px;
		height: 70px;
		position: absolute;
		right: 20px;
	}
		header nav > ul {
			text-align: right;
		}
			header nav > ul > li {
				display: inline-block;
				font-size: 20px;
				padding: 70px 20px 0;
			}
				header nav ul li a {
					color: #FFF;
					text-decoration: none;
				}
#box_main {
	display: block;
	box-sizing: border-box;
	max-width: 1400px;
	padding: 40px 20px;
	margin: 0 auto;
}
	#box_main .heading {
		font-family: 'mamelon';
		font-size: 30px;
		font-weight: bold;
		line-height: 40px;
		margin-bottom: 20px;
	}
	#box_main .paging {
		text-align: center;
		margin-bottom: 20px;
	}
		#box_main .paging span,
		#box_main .paging a {
			display: inline-block;
			width: 40px;
			height: 40px;
			border-radius: 20px;
			text-align: center;
			line-height: 40px;
			font-weight: bold;
			margin: 0 10px;
		}
		#box_main .paging span {
			background-color: #952123;
			color: #FFF;
		}
		#box_main .paging a {
			text-decoration: none;
			background-color: #EEE;
		}
#box_linkup {
	display: flex;
	max-width: 1000px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding: 20px 0;
	margin: 0 auto;
}
	#box_linkup > a {
		display: block;
		background-size: contain;
		margin: 20px 20px;
	}
	#linkup_event {
		flex: 0 0 413px;
		width: 413px;
		height: 501px;
		background-image: url("../img/linkup_recipe.png");
	}
	#linkup_ec {
		flex: 0 0 calc(502px * 0.8);
		width: calc(502px * 0.8);
		height: calc(374px * 0.8);
		background-image: url("../img/linkup_ec.jpg");
	}
	#linkup_column {
		flex: 0 0 calc(503px * 0.8);
		width: calc(503px * 0.8);
		height: calc(375px * 0.8);
		background-image: url("../img/linkup_column.jpg");
	}
	#linkup_yamaguchi {
		flex: 0 0 calc(503px * 0.8);
		width: calc(503px * 0.8);
		height: 300px;
		background-image: url("../img/linkup_yamaguchi.jpg");
	}
	#box_linkup > a > span {
		display: none;		
	}
footer {
	display: flex;
	background-color: #952123;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	padding: 20px 0;
}
	footer > a > span {
		display: none;
	}
	#badge_recipe {
		display: block;
		width: calc(382px * 0.9);
		height: calc(191px * 0.9);
		background-image: url("../img/desktop/badge_recipe.jpg");
		background-size: 100% 100%;
		margin: 20px 50px;
	}
	#logo_footer {
		display: block;
		width: calc(370px * 0.8);
		height: calc(201px * 0.8);
		background-image: url("../img/desktop/logo_footer.png");
		background-size: 100% 100%;
		margin: 20px 50px;
	}
	#badge_qr {
		display: block;
		width: calc(348px * 1);
		height: calc(175px * 1);
		background-image: url("../img/desktop/badge_qr.png");
		background-size: 100% 100%;
		margin: 20px 50px;
	}
nav#menu_footer {
	display: flex;
	justify-content: center;
	padding: 20px;
	background-color: #952123;
}
	nav#menu_footer > a {
		text-decoration: none;
		color: #FFF;
		margin: 0 20px;
	}
	nav#menu_footer > a:before {
		content: '▶ ';
	}
#copyright {
	background-color: #952123;
	text-align: center;
	color: #FFF;
	padding: 10px;
}
.bg_footer {
	width: 100%;
	height: 52px;
	background-repeat: repeat-x;
	background-image: url("../img/desktop/bg_footer.png");
	border-top: solid 8px #952123;
}

/* 汎用flex */
.box_flex {
	display: flex;
	max-width: 1400px;
	justify-content: center;
	flex-wrap: wrap;
}

/* 汎用ボタン */
.button_white {
	display: block;
	width: 200px;
	height: 60px;
	font-size: 20px;
	line-height: 60px;
	text-align: center;
	text-decoration: none;
	color: inherit;
	border: solid 1px #CCC;
	border-radius: 5px;
	margin: 0 auto;
	cursor: pointer;
}

         
.button_orange {
	background-image: linear-gradient(to right, #FF512F 0%, #F09819  51%, #FF512F  100%);
	margin: 0 auto;
	width: 400px;
	height: 60px;
	line-height: 60px;
	font-size: 20px;
	font-family: 'mamelon';
	text-align: center;
	transition: 0.5s;
	background-size: 200% auto;
	color: white;
	border-radius: 5px;
	display: block;
	cursor: pointer;
	border: none;
}

.button_orange:hover {
	background-position: right center; /* change the direction of the change here */
	color: #fff;
	text-decoration: none;
}
         

/* 調理時間 */
/* 動画あり */
.time_5,
.time_10, 
.time_20,
.time_30,
.has_movie {
	display: inline-block;
	width: 100px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	color: #FFF;
	font-weight: bold;
	border-radius: 5px;
}
.time_5 {
	background-color: #86BC43;
}
.time_10 {
	background-color: #678CA3;
}
.time_20 {
	background-color: #D360A0;
}
.time_30 {
	background-color: #EF832E;
}
.has_movie {
	background-color: #DD382D;
}

/* text */
.text_blue {
	color: #0070B7;
}
.text_red {
	color: #B72700;
}
.text_green {
	color: #5A8F00;
}
.text_orange {
	color: #EF832E;
}
/* box */
.box_blue {
	background-color: #E0EDF7;	
}
.box_red {
	background-color: #FAE6EA;
}
.box_green {
	background-color: #EEF2DE;
}
.box_yellow {
	background-color: #FFF7DE;
}
.clear {
	clear: both;
	height: 0;
	line-height: 0;
	visibility: hidden;
}