@charset "UTF-8";


body:not(#cuisine) footer{
	margin-top: 0;
}

section{
	padding: 0 0 50px;
}

/* 料理の基本
===================================== */
.title_round,
.title_count{
	text-indent: -1.3em;
	padding-left: 1.3em;
	margin: 0 0 10px;
	color: #BC5137;
	font-size: 20px;
	font-weight: bold;
}
.title_count{
	text-indent: -1em;
	padding-left: 1em;
}
	.title_round::before{
		content: "●";
		margin-right: 5px;
	}

.read_txt{
	margin: 0 0 40px;
	color: #4A340A;
	font-weight: bold;
	text-align: center;
}
.txt_brn{
	color: #4A340A;
}
.page_link{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	counter-reset: item;
	list-style-type: none;
	margin: -10px 0 60px;
}
	.page_link li{
		margin-top: 10px;
		width: 50%;
		text-indent: -1.7em;
		padding-left: 1.7em;
	}
	.page_link li::before{
		counter-increment: item;
		content: counter(item);
		background: #BC5137;
		border-radius: 50%;
		display: inline-block;
		width: 20px;
		height: 20px;
		margin-right: 3px;
		color: #fff;
		font-size: 12px;
		text-align: center;
		vertical-align: middle;
		text-indent: 0;
	}
	.page_link li a{
		color: #000;
		text-decoration: underline;
	}
	.page_link li.active a{
		color: #BC5137;
		text-decoration: none;
	}
	.page_link li a:hover{
		text-decoration: none;
		opacity: 1;
	}

.box_bg{
	background: #FCF7E7;
	padding: 30px 20px;
	margin-bottom: 40px;
	counter-reset: item;
	list-style-type: none;
	text-align: center;
}

.box_bg > p{
	display: inline-block;
	margin: 0 0 30px;
	color: #4A340A;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	position: relative;
}
	.box_bg > p::before,
	.box_bg > p::after{
		background: #4A340A;
		height: 100%;
		width: 2px;
		content: "";
		position: absolute;
		top: 50%;
	}
	.box_bg > p::before{
		transform: rotate(-20deg)translateY(-50%);
		left: 0;
	}
	.box_bg > p::after{
		transform: rotate(20deg)translateY(-50%);
		right: 0;
	}

.tips_list{
	border: 1px solid #4A340A;
}
	.tips_list ul{
		display: flex;
		flex-wrap: wrap;
		margin: -10px 30px 15px;
	}
	.tips_list ul li{
		width: 50%;
		margin-top: 10px;
	}
	.tips_list ul li a{
		position: relative;
		text-decoration: underline;
	}
	.tips_list ul li a:hover{
		opacity: 1;
		text-decoration: none;
	}
	.tips_list ul li a::before{
		content: "";
		background: #BC5137;
		border-radius: 50%;
		display: inline-block;
		width: 20px;
		height: 20px;
		margin-right: 3px;
		text-align: center;
		vertical-align: middle;
		text-indent: 0;
	}
	.tips_list ul li a::after{
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 5px 0 5px 6px;
		border-color: transparent transparent transparent #fff;
		line-height: 0px;
		position: absolute;
		top: 7px;
		left: 8px;
	}

.cuisine_list{
	width: 100%;
	list-style: none;
	counter-reset: cnt;
}
	.cuisine_list li{
		background: #fff;
		padding: 20px;
	}
	.cuisine_list li:not(:last-child){
		margin: 0 0 20px;
	}
	.cuisine_list li .list_title{
		color: #BC5137;
		font-size: 16px;
		font-weight: bold;
		text-indent: -25px;
		padding-left: 25px;
	}
	.cuisine_list li .list_title::before{
		counter-increment: item;
		content: counter(item)'.';
		font-size: 22px;
		margin-right: 5px;
	}
	.cuisine_list li p:not(.list_title){
		padding-left: 20px;
	}


/*　■ tab
------------------------------------------- */
.tab_wrap {
	border: 1px solid #4A340A;
	padding: 0;
	margin: 0 auto 40px;
}

	input[type="radio"] {
		display: none;
	}

	.tab_area {
		border-top: 5px solid #4A340A;
		display: flex;
		justify-content: space-between;
		font-size: 0;
	}

	.tab_area label {
		display: table;
		border-bottom: none;
		height: 100%;
		width: 50%;
		color: #fff;
		font-size: 14px;
		font-weight: 500;
		text-align: center;
		position: relative;
		cursor: pointer;
	}

	.tab_area label span {
		background: #4A340A;
		display: table-cell;
		vertical-align: middle;
		height: 45px;
		width: 100%;
		color: #fff;
		text-align: center;
	}
	.tab_area label span::after{
		display: inline-block;
		content: "";
		width: 8px;
		height: 8px;
		border-bottom: 1px solid #fff;
		border-right: 1px solid #fff;
		transform: rotate(45deg);
		margin: 0 0 3px 10px;
	}

	.panel_area {
		background: #fff;
	}

	.tab_panel {
		display: none;
		clear: both;
		width: 100%;
		padding: 30px 15px;
	}
	.tab_panel .page_link{
		margin-bottom: 0;
	}

	#tab_1:checked~.tab_area .tab_1_label,
	#tab_2:checked~.tab_area .tab_2_label{
		background: #fff;
	}

	#tab_1:checked~.panel_area #panel_1,
	#tab_2:checked~.panel_area #panel_2{
		display: block;
	}

	#tab_1:checked:checked~.tab_area .tab_1_label span,
	#tab_2:checked:checked~.tab_area .tab_2_label span{
		color: #000;
		background: #fff;
	}
	#tab_1:checked:checked~.tab_area .tab_1_label span::after,
	#tab_2:checked:checked~.tab_area .tab_2_label span::after{
		border-color: #4A340A;
	}

.search_box{
	background: url(../img/cuisine/search_bg.jpg) no-repeat center/cover;
	padding: 40px 15px;
	text-align: center;
}
	.search_box .desc{
		display: inline-block;
		padding: 0 30px;
		margin: 0 0 20px;
		color: #4A340A;
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		position: relative;
	}
	.search_box .desc::before,
	.search_box .desc::after{
		content: "";
		border-left: 2px solid #4A340A;
		height: 100%;
		position: absolute;
		top: 0;
	}
	.search_box .desc::before{
		left: 15px;
		transform: rotate(-15deg);
	}
	.search_box .desc::after{
		right: 15px;
		transform: rotate(15deg);
	}

.search_box .list{
	width: 80%;
	margin: 0 auto;
}
	.search_box .list li:not(:last-child){
		margin: 0 0 10px;
	}


.table{
	border: 1px solid #4A340A;
	width: 100%;
}
	.table th,
	.table td{
		padding: 15px 10px;
		vertical-align: middle;
	}
	.table th{
		background: #FAF2EC;
		text-align: center;
	}
	.table tr:first-of-type th{
		font-weight: normal;
	}
	.table tr:not(:last-of-type) th,
	.table tr:not(:last-of-type) td{
		border-bottom: 1px solid #B4B4B4;
	}
	.table th:not(:first-of-type),
	.table td{
		border-left: 1px dashed #B4B4B4;
	}
	.table th.w_8{
		width: 8em;
	}
	.table th.w20{
		width: 30%;
	}
	.table th.w_10{
		min-width: 10em;
	}

	.table tr:not(:first-of-type) th{
		background: none;
		color: #4A340A;
	}
	.table.th_bg tr:not(:first-of-type) th{
		background: #FFFBF5;
		color: #4A340A;
	}


.table_area{
	max-width: 740px;
	width: 100%;
	margin: 0 auto 10px;
}
	.table_area .table{
		margin: 0 0 10px;
	}
	.table_area .table td{
		text-align: center;
	}
	.table_area .table th.w01{
		width: 10em;
	}

.bg_list{
	background: #FAF2EC;
	padding: 0 15px;
}
	.bg_list li{
		display: flex;
		flex-wrap: wrap;
		padding: 20px 0;
	}
	.bg_list li:not(:last-child){
		border-bottom: 1px dashed #B4B4B4;
	}
ul.bg_list p:first-of-type{
	width: 100%;
	margin: 0 0 5px;
	color: #4A340A;
	font-weight: bold;
}
ol.bg_list{
	counter-reset: item;
}
	ol.bg_list li:not(.no) p:first-of-type{
		padding-left: 1.5em;
		text-indent: -1.5em;
	}
	ol.bg_list li:not(.no) p:first-of-type::before {
		display: inline-block;
		counter-increment: item;
		content: counter(item)'.';
		width: 1.5em;
		flex-shrink: 0;
		text-indent: 0;
	}
	ol.bg_list li .photo{
		width: 150px;
		flex-shrink: 0;
		margin: 15px auto 0;
	}

.notes{
	font-size: 12px;
}
	.notes a{
		color: #BC5137;
		text-decoration: underline;
	}
	.notes a:hover{
		text-decoration: none;
		opacity: 1;
	}


/* ［料理基礎編］包丁の使い方 basic_03 */
.flex_list{
	margin: 10px 0 40px;
}
	.flex_list li{
		display: flex;
		align-items: center;
	}
	.flex_list li:not(:last-child){
		margin-bottom: 20px;
	}
	.flex_list li img{
		width: 96px;
		flex-shrink: 0;
		margin-right: 20px;
	}

/* ［料理基礎編］野菜の切り方 basic_06 */
.page_nav{
	display: flex;
	flex-wrap: wrap;
	padding-left: 1px;
	margin: -15px 0 30px;
}
	.page_nav li{
		width: 33%;
		border-left: 1px solid #4A340A;
		border-right: 1px solid #4A340A;
		margin: 15px 0 0;
		line-height: 1.3;
	}
	.page_nav li:nth-child(n+1){
		margin-left: -1px;
	}

	.page_nav a{
		display: block;
		text-align: center;
		text-decoration: underline;
	}
	.page_nav a:hover{
		text-decoration: none;
		opacity: 1;
	}

.box_wrap > div{
	background: #FAF2EC;
	padding: 20px 15px;
	margin: 0 0 20px;
}
.box_wrap > li{
	background: #FAF2EC;
	padding: 20px 15px;
}
.box_wrap > li:nth-child(even){
	background: #FFFBF5;
}
	.box_wrap > div:last-of-type,
	.box_wrap > li:last-of-type{
		margin: 0;
	}

	.box_wrap > div > p:not(.txt):first-of-type,
	.box_wrap > li > p:not(.txt):first-of-type{
		width: 100%;
		color: #4A340A;
		font-weight: bold;
	}
	.box_wrap .photo,
	.box_wrap .photo02,
	.box_wrap .photo03{
		width: 45%;
		flex-shrink: 0;
		margin: 15px auto 0;
	}
	.box_wrap .photo02{
		width: 100%;
	}
	.box_wrap .photo03{
		width: 90%;
	}
	.box_wrap ol.bg_list{
		padding: 0;
		flex: 1;
	}
	.box_wrap ol.bg_list li{
		padding: 0;
	}
	.box_wrap ol.bg_list li:not(:last-child){
		padding-bottom: 25px;
		margin-bottom: 25px;
	}

/* ［魚料理編］魚のおろし方 fish_03 */
.flex_box{
	margin: 0 0 20px;
}
	.flex_box .photo{
		width: 45%;
		flex-shrink: 0;
		margin: 0 auto 15px;
	}
	.flex_box dt{
		float: left;
		clear: both;
		font-weight: bold;
	}
	.flex_box dd{
		padding-left: 6em;
	}

/* ［魚料理編］焼き魚のコツ fish_05 */
.line_box{
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 15px;
	margin: 0 0 40px;
}

/* ［魚料理編］魚のおろし方 fish_06 */
.flex_box .photo02{
	width: 45%;
	flex-shrink: 0;
	margin: 15px auto 0;
}


/* クッキングのコツ
============================================ */
body#cooking footer{
	margin-top: 50px;
}
.tips_list{
	border: 1px solid #4A340A;
	margin: 0 0 30px;
}
	.tips_list ul{
		display: flex;
		flex-wrap: wrap;
		margin: 5px 30px 15px;
	}
	.tips_list ul li{
		width: 50%;
		margin-top: 10px;
	}
	.tips_list ul li a{
		color: #000;
		position: relative;
		text-decoration: underline;
	}
	.tips_list ul li.active a{
		color: #BC5137;
		text-decoration: none;
	}
	.tips_list ul li a:hover{
		opacity: 1;
		text-decoration: none;
	}
	.tips_list ul li a::before{
		content: "";
		background: #BC5137;
		border-radius: 50%;
		display: inline-block;
		width: 20px;
		height: 20px;
		margin-right: 3px;
		text-align: center;
		vertical-align: middle;
		text-indent: 0;
	}
	.tips_list li a::after{
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 5px 0 5px 6px;
		border-color: transparent transparent transparent #fff;
		line-height: 0px;
		position: absolute;
		top: 7px;
		left: 8px;
	}

.list_wrap li{
	border-bottom: 1px solid #B4B4B4;
	margin: 0 0 10px;
	padding: 0 0 10px;
}
	.list_wrap li:last-child{
		margin: 0;
	}
	.list_wrap li a{
		color: #000;
		text-decoration: underline;
	}
	.list_wrap li a:hover{
		opacity: 1;
		text-decoration: none;
	}


/* クッキングのコツ詳細
============================================ */
.recipe_wrap p{
	margin: 0 0 5px;
	color: #BC5137;
	font-weight: bold;
}

.recipe_wrap ul,
.recipe_wrap ol{
	margin: 0 0 40px;
}
	.ingredient span{
		display: inline-block;
		width: 50%;
	}

.recipe{
	justify-content: space-between;
	counter-reset: item;
}
	.recipe li,
	.point_list li{
		text-indent: -1em;
		padding-left: 1em;
	}
	.recipe li::before{
		counter-increment: item;
		content: counter(item)'.';
		margin-right: .3em;
	}

	.point_list li::before{
		content: "・";
	}

/* ====================================================================
		PC breakpoint 〜768px
==================================================================== */
@media screen and (min-width: 768px) {
	.read_txt{
		font-size: 18px;
	}

	.page_link{
		justify-content: flex-start;
	}
	.page_link li::before{
		padding: 2px;
		margin-right: 5px;
	}
	#cuisine .page_link li,
	#panel_1 .page_link li{
		width: 165px;
		margin-right: 20px;
	}
		#cuisine .page_link li:last-child,
		#panel_1 .page_link li:last-child{
			margin-right: 0;
			width: auto;
			flex-shrink: 0;
		}

	#cuisine .page_link.panel_2 li{
		width: 20%;
		margin-right: 0;
	}
	#panel_2 .page_link li{
		width: 20%;
		min-width: 160px;
	}


	.box_bg{
		padding: 40px 30px;
		margin: 0 0 50px;
	}
		.box_bg > p{
			font-size: 22px;
		}
		.box_bg > p::before{
			transform: rotate(-35deg)translateY(-50%);
			left: -10px;
		}
		.box_bg > p::after{
			transform: rotate(35deg)translateY(-50%);
			right: -10px;
		}

	.tips_list{
		border: 1px solid #4A340A;
	}
		.tips_list ul{
			margin: 20px;
		}
		.tips_list ul li{
			width: auto;
			margin: 0;
		}
		.tips_list ul li:not(:last-child){
			margin: 0 40px 0 0;
		}
		.tips_list ul li a::after{
			top: 9px;
			left: 8px;
		}

	.cuisine_list li{
		background: #fff;
		padding: 20px;
	}
		.cuisine_list li .list_title{
			font-size: 18px;
		}
		.cuisine_list li .list_title::before{
			font-size: 24px;
			margin-right: 5px;
		}
		.cuisine_list li p:not(.list_title){
			padding-left: 20px;
		}


	.tab_panel {
		display: none;
		clear: both;
		width: 100%;
		padding: 30px 20px;
	}

	.search_box{
		padding: 60px 20px;
	}
		.search_box .desc{
			padding: 0 30px;
			font-size: 22px;
		}
		.search_box .desc::before{
			left: 15px;
			transform: rotate(-20deg);
		}
		.search_box .desc::after{
			right: 15px;
			transform: rotate(20deg);
		}

	.search_box .list{
		display: flex;
		justify-content: space-between;
		max-width: 870px;
		width: 100%;
		margin: 0 auto;
	}
		.search_box .list li{
			width: 31%;
		}
		.search_box .list li:not(:last-child){
			margin: 0;
		}

	.table th,
	.table td{
		padding: 20px;
	}
		.table th.w_8{
			width: auto;
		}
		.table td.pl{
			padding-left: 12%;
		}

	.table_area .table th.w01{
		width: 20em;
	}


	.detail_ill{
		max-width: 620px;
		width: 100%;
		margin: 0 auto;
	}

	.bg_list{
		padding: 0 20px;
	}
		.bg_list li{
			flex-wrap: nowrap;
			padding: 25px 0;
		}
		ul.bg_list p:first-of-type{
			width: 3em;
			margin: 0 1em 0 0;
			flex-shrink: 0;
		}
		ul.bg_list.w_5 p:first-of-type{
			width: 5em;
		}
			ul.bg_list.w_8 p:first-of-type{
				width: 8em;
			}

	ol.bg_list li:not(.no) p:first-of-type{
		flex: 1;
	}
		ol.bg_list li .photo{
			margin: 0 auto 0 20px;
		}

	.notes{
		font-size: 14px;
	}


	/* ［料理基礎編］包丁の使い方 basic_03 */
	.flex_list{
		display: flex;
	}
		.flex_list li{
			margin-right: 30px;
		}

	/* ［料理基礎編］野菜の切り方 basic_06 */
	.page_nav li{
		width: auto;
	}
		.page_nav a{
			display: block;
			padding: 0 20px;
		}

	.box_wrap > div{
		display: flex;
		padding: 20px;
		margin: 0 0 20px;
	}
		.box_wrap > div > p:not(.txt):first-of-type,
		.box_wrap > li > p:not(.txt):first-of-type{
			width: 9em;
			flex-shrink: 0;
		}
		.box_wrap p.w_14{
			width: 14em!important;
		}
		.box_wrap > li{
			display: flex;
			padding: 20px;
		}
		.box_wrap .photo,
		.box_wrap .photo02,
		.box_wrap .photo03{
			width: 150px;
			margin: 0 auto 0 20px;
		}
		.box_wrap .photo02{
			width: 340px;
		}
		.box_wrap .photo03{
			width: 308px;
		}
		.box_wrap p.txt{
			flex: 1;
		}


	/* ［魚料理編］魚のおろし方 fish_03 */
	.flex_box{
		display: flex;
		align-items: flex-end;
	}
		.flex_box .photo{
			width: 150px;
			margin: 0 20px 0 0;
		}
		.flex_box dt{
			float: left;
			clear: both;
			font-weight: bold;
		}
		.flex_box dd{
			padding-left: 6em;
		}

	/* ［魚料理編］焼き魚のコツ fish_05 */
	.line_box{
		padding: 20px;
	}

	/* ［魚料理編］魚のおろし方 fish_06 */
	#fish06 .flex_box{
			display: flex;
			align-items: flex-start;
		}
			#fish06 .flex_box .txt_area{
				flex: 1;
			}
			.flex_box .photo02{
				width: 150px;
				margin: 0 0 0 20px;
			}


	/* クッキングのコツ
	============================================ */
	.tips_list{
		border: 1px solid #4A340A;
	}
		.tips_list ul{
			margin: 20px;
		}
		.tips_list ul li{
			width: auto;
			margin: 0;
		}
		.tips_list ul li:not(:last-child){
			margin: 0 40px 0 0;
		}
		.tips_list ul li a::after{
			top:10px;
			left: 8px;
		}


	.list_wrap li{
		margin: 0 0 15px;
		padding: 0 0 15px;
	}
		.list_wrap li:last-child{
			margin: 0;
		}


	/* クッキングのコツ詳細
	============================================ */
	.recipe_wrap p{
		margin: 0 0 5px;
	}

	.recipe_wrap ul,
	.recipe_wrap ol{
		margin: 0 0 50px;
	}
		.ingredient span{
			width: 30%;
			margin-right: 20px;
		}
}

/* ====================================================================
		SP breakpoint 340px〜
==================================================================== */
@media screen and (max-width: 340px){
}