@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho&display=swap');
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	word-break: break-word;
}


/* 大枠 */

html,
body {
	height: 100%;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
	-webkit-overflow-scrolling: touch !important;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
}

body {
	color: #000;
	font-size: 14px;
	line-height: 1.6;
}

body.wrap {
	overflow: hidden;
}

#wrapper {
	width: 100%;
	margin: 0 auto;
	position: relative;
}

body>#wrapper {
	height: auto;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	content: " ";
	clear: both;
	height: 0;
}

@media print {
	html,
	html body {
		overflow: visible !important;
	}
}


/* アクセシビリティ */

.guidance {
	left: -999px;
	position: absolute;
	width: 990px;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}


/* レスポンシブ対応 */

img {
	vertical-align: bottom;
	box-shadow: #000 0 0 0;
	/* ロールオーバー対応 */
}

img,
x:-moz-any-link,
x:default {
	box-shadow: #000 0 0 0;
	/* IE7対応 */
}


/* リンク */

a:link {
	color: #4A340A;
	text-decoration: none;
}

a:visited {
	color: #4A340A;
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

a:active {
	text-decoration: none;
}

.mincho {
	font-family: 'Noto Serif JP', serif;
	position: relative;
	font-weight: normal;
}

.container {
	width: 100%;
	max-width: 640px;
	padding: 0 15px;
	margin: 0 auto;
	position: relative;
}
.contain{
	max-width: 1000px;
	padding: 40px 15px 0;
	margin: 0 auto;
}

.area_wrap{
	padding: 40px 0 0;
}
.area_wrap02:not(:last-of-type){
	padding-bottom: 40px;
}


/* スライド　共通 */
.slider,
.thumb,
.recommend_list,
.slider_video,
.recipe_slide,
.slider02,.slider03,.slider04,
.thumbnail{
	display: none;
}
.slick-initialized{
	display: block; /*slick-initializedが付与されたら表示*/
}

.slick-prev::before,
.slick-next::before{
	opacity: 1;
}
.sp_max{
	display: none;
}
@media screen and (max-width:490px) {
	.sp_max{
		display: block;
	}
}
/*　■ 共通タイトル
------------------------------------------- */

#site_title {
	overflow: hidden;
	height: 60px;
	width: 100%;
	position: relative;

}

h2.title,
.title02 {
	margin: 0 0 30px;
	color: #4A340A;
	font-size: 20px;
	text-align: center;
	position: relative;
}
	h2.title:after,
	.title02::after{
		content: "";
		width: 30px;
		border-bottom: 4px solid #BC5137;
		position: absolute;
		transform: translateX(-50%);
		bottom: -10px;
		left: 50%;
	}
.btm_line{
	border-bottom: 2px solid #4A340A;
	color: #4A340A;
	font-size: 22px;
	padding-bottom: 5px;
	margin-bottom: 20px;
}

.form_title{
	color: #4A340A;
	font-size: 18px;
	margin: 0 0 10px;
}


/*　■ セカンドページ共通
------------------------------------------- */

.title_wrap{
	display: table;
	background: #FAF2EC;
	height: 90px;
	width: 100%;
	color: #4A340A;
	font-size: 18px;
	text-align: center;
	position: relative;
}
	.title_wrap .page_title,
	.title_wrap .subpage_title{
		display: table-cell;
		vertical-align: middle;
		width: 100%;
		text-align: center;
		padding: 0 15px;
	}
	.title_wrap span + .subpage_title{
		padding: 0 70px;
	}
	.title_wrap .page_title::after{
		display: block;
		content: "";
		width: 30px;
		border-bottom: 4px solid #BC5137;
		margin: 5px auto 0;
	}
	.back_btn{
		font-size: 16px;
		font-weight: normal;
		text-align: center;
	}
	.back_btn a::before,
	.title_wrap .back_btn a::after{
		display: inline-block;
		content: "";
		width: 8px;
		height: 8px;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		vertical-align: middle;
	}
	.back_btn a::before{
		border-bottom: 1px solid #4A340A;
		border-left: 1px solid #4A340A;
		margin: 0 3px 2px 0;
	}
	.title_wrap .back_btn{
		transform: translateY(-50%);
		position: absolute;
		top: 50%;
		left: 15px;
	}

.title_wrap.bg_change{
	background: #A38787;
	color: #fff;
}
	.title_wrap.bg_change .back_btn a{
		color: #fff;
	}
	.title_wrap.bg_change .back_btn a::before{
		border-color: #fff;
	}

.bg_title {
	background: #FAF2EC;
	padding: 10px 20px;
	margin: 0 auto 20px;
	color: #4A340A;
	font-size: 20px;
	text-align: center;
}
	.bg_title.txt_left {
		text-align: left;
	}


/*　■ 赤下線なしのセカンドページ見出し
------------------------------------------- */

.title_group {
	display: table;
	width: 100%;
	background: #FAF2EC;
	position: relative;
	text-align: center;
}

.history_back {
	display: table-cell;
	padding: 20px 0px 20px 30px;
	vertical-align: middle;
	position: relative;
	z-index: 1;
	width: 70px;
	vertical-align: middle;
}

.history_back:before {
	content: "";
	margin: auto;
	vertical-align: middle;
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	left: 15px;
	width: 7px;
	height: 7px;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
}


/*　■ ヘッダー
============================================ */

#screen {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 10000;
}

header {
	width: 100%;
	padding: 0;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	overflow: visible;
}

.header_inner {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
	height: 61px;
	background: #fff;
	border-bottom: 1px solid #ccc;
	position: relative;
	top: 0;
	left: 0;
	z-index: 99999;
	background: #000000;
}

.header_inner>:first-child {
	margin-right: auto;
}

.header_inner a {
	display: block;
	text-align: center;
	vertical-align: middle;
	background: #fff;
}

.header_inner h1 img {
	vertical-align: middle;
	width: 100%;
	max-width: 245px;
	padding: 0 7px;
}

.header_inner h1 a {
	padding: 19px 0;
}
#site_title{
	position: relative;
}
#site_title a .outer_span{
	font-size: 14px;
	color: #000;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	display: flex;
	justify-content: center;
	font-family: 'Shippori Mincho', serif;
	font-style: oblique 14deg;
	font-weight: 100;
	letter-spacing: -2px;
	line-height: 1em;
}
#site_title a .inner_span{
	position: relative;
	display: flex;
	align-items: center;
}
#site_title a .inner_span img{
	height: 40px;
	width: 55px;
}

@media screen and (max-width:490px){
	#site_title a .outer_span{
		justify-content: flex-start;
	}
}
.header_inner h1,
.header_inner .search_icon,
.header_inner .login_icon,
.header_inner .mypage_icon {
	background-color: #fff;
}


.logoutbutton {
	height: 18px;
}
#mypage_logon #gnav {
	padding-top: 93px;
}



/*　■ 検索ボタン・ログインボタン・マイページボタン
------------------------------------------- */

.search_icon,
.login_icon a,
.mypage_icon a {
	display: block;
	width: 60px;
	height: 60px;
	background: #ffffff;
	border-left: 1px solid #ccc;
	z-index: 2000;
}

.search_icon {}

.search_icon:before {
	content: "検索";
	color: #4A340A;
	width: 60px;
	display: block;
	z-index: 2985;
	font-size: 10px;
	text-align: center;
	padding: 44px 0 0 0;
	background: url('../img/header_icon01.png') no-repeat center top 13px;
	background-size: 28px 28px;
}

.login_icon a {}

.login_icon a:before {
	content: "ログイン";
	color: #4A340A;
	width: 60px;
	display: block;
	z-index: 2985;
	font-size: 10px;
	text-align: center;
	padding: 44px 0 0 0;
	background: url('../img/header_icon02.png') no-repeat center top 10px;
	background-size: 27px 32px;
}

.mypage_icon a {
	/*background:url('../img/header_icon03.png') no-repeat center top 10px;*/
}

.mypage_icon a:before {
	content: "マイページ";
	background: color: #4A340A;
	width: 60px;
	display: block;
	z-index: 2985;
	font-size: 10px;
	text-align: center;
	padding: 44px 0 0 0;
	background: url('../img/header_icon03.png') no-repeat center top 13px;
	background-size: 25px 25px;
}

.search_close {
	background: #000000;
	width: 100%;
	height: 60px;
	position: absolute;
	top: 0;
	z-index: 99999;
	display: none;
}


/*　■ メニューボタン
------------------------------------------- */

.menu {
	display: block;
	width: 60px;
	height: 60px;
	background: #4A340A;
	border-left: 1px solid #ccc;
	top: 0;
	right: 0;
	z-index: 2000;
}

.menu:before {
	content: "メニュー";
	color: #fff;
	width: 60px;
	display: block;
	z-index: 2985;
	font-size: 10px;
	text-align: center;
	padding: 44px 0 0 0;
}

.menu_close:before {
	content: "とじる";
	color: #fff;
	width: 60px;
	display: block;
	z-index: 2985;
	font-size: 10px;
	text-align: center;
	padding: 44px 0 0 0;
}

.menu span {
	display: block;
	position: absolute;
	top: 14px;
	right: 14px;
	width: 30px;
	height: 22px;
	background: #fff;
	border-top: 10px solid #4A340A;
	border-bottom: 10px solid #4A340A;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.menu span:before {
	content: '';
	position: absolute;
	width: 30px;
	height: 2px;
	background: #fff;
	top: -9px;
	right: 0;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.menu span:after {
	content: '';
	position: absolute;
	width: 30px;
	height: 2px;
	background: #fff;
	bottom: -9px;
	right: 0;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.menu span.active {
	background: #4A340A;
}

.menu span.active:before {
	-moz-transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
	top: 0;
	right: 0;
}

.menu span.active:after {
	-moz-transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	bottom: 0;
	right: 0;
}

.menu_fixed {
	position: fixed;
	width: 100%;
	height: 100%;
}


/*　■ グローバルナビゲーション
------------------------------------------- */

#gnav {
	display: block!important;
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	float: none;
	width: 100%;
	max-height: 100vh;
	padding-top: 61px;
	padding-bottom: 50px;
	margin: 0;
	position: absolute;
	top: -1000px;
	left: 0;
	z-index: 1000;
	overflow: auto;
}

#gnav .gnav_btn {
	height: 50px;
	background: #ffffff;
	border-bottom: 1px solid #ccc;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

#gnav .gnav_btn a {
	display: block;
	width: 43%;
	line-height: 30px;
	border-radius: 3px;
	box-sizing: border-box;
	text-align: center;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
}

#gnav .gnav_btn a {
	background: #4A340A;
}
#gnav .gnav_btn a::before{
	content: "ログイン";
}

#gnav .gnav_btn a {
	background: #BC5137;
	width: 70%;
}

#gnav.open {
	-moz-transform: translateY(1000px);
	-webkit-transform: translateY(1000px);
	transform: translateY(1000px);
}

#gnav ul {
	clear: both;
}
	#gnav ul > li {
		display: table;
		background: #fff;
		border-bottom: 1px solid #ccc;
		width: 100%!important;
		max-width: 100%!important;
		height: 50px;
		color: #4A340A;
		text-indent: 0;
		line-height: 1.2;
	}
	#gnav ul > li > a {
		position: relative;
		display: table-cell;
		height: 100%;
		padding: 0 15px;
		vertical-align: middle;
		color: #4A340A;
		}
		#gnav ul > li > a:hover {
			text-decoration: none;
			opacity: 1;
		}
	#gnav ul > li > a::after {
		content: "";
		margin: auto;
		width: 7px;
		height: 7px;
		border-top: 1px solid #4A340A;
		border-right: 1px solid #4A340A;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		position: absolute;
		top: 0;
		bottom: 0;
		right: 20px;
		vertical-align: middle;
	}

#gnav .main_nav li span{
	display: inline-block;
	vertical-align: middle;
}
#gnav .main_nav li img{
	width: 20px;
	margin-right: 10px;
	vertical-align: middle;
}
#gnav ul.main_nav li li a::before{
	content: "";
	background: url(../img/nav_inner_icon01_sp.png) no-repeat center/contain;
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 10px;
	border: none;
	vertical-align: middle;
}
	#gnav ul.main_nav li li:nth-child(2) a::before{
		background: url(../img/nav_inner_icon02_sp.png) no-repeat center/contain;
	}
	#gnav ul.main_nav li li:nth-child(3) a::before{
		background: url(../img/nav_inner_icon03_sp.png) no-repeat center/contain;
	}

/* アコーディオン */
#gnav > ul > li > p {
	display: block;
	border-bottom: 1px solid #ccc;
	padding: 0 15px;
	line-height: 50px;
}
	#gnav ul.main_nav > li > p.open {
		border-bottom: none;
		position: relative;
	}
	#gnav ul.main_nav > li > p.open:after {
		content: "";
		position: absolute;
		top: 15px;
		right: 13px;
		background-image: url(../img/open.png);
		width: 20px;
		height: 20px;
		background-size: contain;
	}
	#gnav ul.main_nav > li > p.close {
		border-bottom: 1px solid #ccc;
		position: relative;
	}
	#gnav ul.main_nav > li > p.close:after {
		content: "";
		position: absolute;
		top: 15px;
		right: 13px;
		background-image: url(../img/close.png);
		width: 20px;
		height: 20px;
		background-size: contain;
	}
#gnav ul.main_nav > li ul {
	display: none;
}
	#gnav ul.main_nav > li ul li:last-child {
		border-bottom: 0px none;
	}
	#gnav ul.main_nav > li ul li{
		background: #FAF2EC;
	}
	#gnav ul.main_nav > li ul li a{
		padding-left: 40px;
	}

#gnav .nav_bnr{
	background: #fff;
	height: 100%!important;
	padding: 20px;
}
	#gnav .nav_bnr a{
		height: 100%!important;
		padding: 0;
	}
	#gnav .nav_bnr a.sp{
		display: block;
	}
	#gnav .nav_bnr a.pc{
		display: none;
	}
	#gnav .nav_bnr li{
		border: none;
	}
	#gnav .nav_bnr li:not(:last-child){
		margin-bottom: 20px;
	}
	#gnav .nav_bnr a::after{
		display: none;
	}
	#gnav .nav_bnr img{
		width: 100%;
	}


/*　■ ログイン時
------------------------------------------- */

.login_index #header_search {
	padding-top: 93px;
}

.login_index #main {
	margin-top: 93px;
}

/* 会員表示 */
.login_name {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	background: #EDE8DE;
	padding: 5px 10px;
	position: relative;
	z-index: 999999;
}

.login_name li a {
	text-decoration: underline;
}

.login_index #gnav .gnav_btn{
	padding: 0 15px;
	justify-content: space-between;
}
.login_index #gnav .gnav_btn a{
	width: 48%;
}
.login_index #gnav .gnav_btn a::before{
	content: "";
}


/*　■ 検索(ヘッダー)
------------------------------------------- */
.pc_close{
	display: none
}
.search_close_btn {
	display: none;
	width: 60px;
	height: 60px;
	background-color: #4A340A;
	background-image: none;
	border-left: 1px solid #ccc;
	top: 0;
	right: 0;
	z-index: 2000;
	position: absolute;
}

.search_close_btn:before {
	content: "とじる";
	color: #fff;
	width: 60px;
	display: block;
	z-index: 2985;
	font-size: 10px;
	text-align: center;
	padding: 44px 0 0 0;
}

.search_close_btn span {
	display: block;
	position: absolute;
	top: 14px;
	right: 14px;
	width: 30px;
	height: 22px;
	background: #fff;
	border-top: 10px solid #4A340A;
	border-bottom: 10px solid #4A340A;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.search_close_btn span:before {
	content: '';
	position: absolute;
	width: 30px;
	height: 2px;
	background: #fff;
	top: -9px;
	right: 0;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.search_close_btn span:after {
	content: '';
	position: absolute;
	width: 30px;
	height: 2px;
	background: #fff;
	bottom: -9px;
	right: 0;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.search_close_btn span.active {
	background: #4A340A;
}

.search_close_btn span.active:before {
	-moz-transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
	top: 0;
	right: 0;
}

.search_close_btn span.active:after {
	-moz-transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	bottom: 0;
	right: 0;
}

#header_search.search_open {
	-moz-transform: translateY(1000px);
	-webkit-transform: translateY(1000px);
	transform: translateY(1000px);
}

#header_search {
	display: block;
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	float: none;
	width: 100%;
	max-height: 100vh;
	padding: 61px 0 30px;
	margin: 0;
	position: absolute;
	top: -1000px;
	left: 0;
	z-index: 1000;
	overflow: auto;
	font-weight: bold;
	font-size: 16px
}

h2.search_title {
	background: #FAF2EC;
	padding: 12px 0;
	margin: 0 0 20px;
	color: #4A340A;
	font-size: 20px;
	text-align: center;
	background-image: url(../img/header_icon01.png);
	background-repeat: no-repeat;
	background-position: calc(50% + -85px) 15px;
	background-size: 28px 28px;
}
#header_search h2.search_title{
	margin: 0;
}

.search_inner table {
	width: 100%;
}

.search_inner th,
.search_inner td {
	display: block;
	width: 100%;
}

#header_search .search_inner {
	padding: 15px;
	width: 100%;
	margin: 0 auto;
}

#header_search .search_inner {
	padding-bottom: 50px;
	margin-bottom: 50px;
	background: #fff;
}

.search_inner > div {
	margin: 20px auto 0;
	font-weight: bold;
	font-size: 16px;
	 text-align: center;
}

.search_inner th {
	margin: 0 0 10px 0;
}

.search_inner td {
	margin: 0 0 30px 0;
}

.search_inner .search_day .selectwrap {
	width: 80%;
	display: inline-block;
	margin: 0 10px 0 0;
}

.search_inner .search_day .selectwrap:first-of-type {
	margin: 0 10px 10px 0;
}

.search_inner .search_target td {
	display: inline-block;
	width: 50%;
	margin: 0 0 20px 0;
	position: relative;
}

.search_inner input[type="radio"] {
	position: relative;
	z-index: 1000;
}

.search_inner .search_btn a {
	display: block;
	padding: 12px 10px 10px 15px;
	margin: 0 auto;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	background-color: #BC5137;
	border-radius: 5px;
	position: relative;
	text-align: center;
	background-repeat: no-repeat;
	background-size: 20px 20px;
	background-position: 10px center;
	width: 90%;
}

.search_btn a:before,
.search_btn a:after {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}

.search_btn a:before {
	right: 17px;
	width: 7px;
	height: 7px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.custom_form .submitButtonSP {
	border: none!important;
	max-width: 400px;
	color: #fff !important;
	font-size: 20px !important;
	font-weight: bold !important;
	background-color: #BC5137 !important;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-webkit-appearance: none;
	cursor: pointer;
}

.search_inner label {
	font-weight: bold;
}

.search_accepting td {
	display: inline-block;
	vertical-align: text-top;
	width: 50%;
	min-height: 32px;
	padding: 0;
	margin: 0 0 25px 0;
	position: relative;
}

.search_accepting label {
	display: inline-block;
	vertical-align: middle;
	padding: 0 0 0 40px;
}

.search_accepting label:after {
	position: absolute;
	content: "";
	display: block;
	top: 0;
	left: 0;
	width: 30px;
	height: 30px;
	border: 1px solid #ccc;
	border-radius: 5px;
	background: -moz-linear-gradient(top, #ffffff 0%, #eeeeee 100%);
	background: -webkit-linear-gradient(top, #ffffff 0%, #eeeeee 100%);
	background: linear-gradient(to bottom, #ffffff 0%, #eeeeee 100%);
}

.search_accepting label:before {
	position: absolute;
	content: "";
	display: block;
	left: 11px;
	top: 5px;
	margin-top: 0;
	width: 10px;
	height: 15px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.search_date .date_twrap input.datepicker {
	background: transparent;
	width: 250px;
	margin-right: 8px;
	position: relative;
	padding: 10px 43px 10px 15px;
	cursor: pointer;
}

.search_date .date_twrap input.datepicker::-webkit-calendar-picker-indicator {
	color: transparent;
	position: relative;
	background: transparent;
	height: 50px;
	width: 100%;
	position: absolute;
}

.search_date .date_twrap input.datepicker::-webkit-inner-spin-button,
.search_date .date_twrap input.datepicker::-webkit-clear-button {
	-webkit-appearance: none;
	appearance: none;
}

.date_twrap {
	position: relative;
	margin-bottom: 10px;
	width: 100%;
}

.date_twrap::before,
.date_twrap::after {
	position: absolute;
	top: 0;
	bottom: 0;
	content: "";
	vertical-align: middle;
}

.date_twrap:before {
	top: 20px;
	left: 225px;
	width: 7px;
	height: 7px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	z-index: 2000;
}

.date_twrap:after {
	position: absolute;
	left: 210px;
	background: #4A340A;
	height: 50px;
	width: 40px;
	border-radius: 0 5px 5px 0 / 0 5px 5px 0;
}

/* IE safari */
#ui-datepicker-div{
	z-index: 100000!important;
}

/*　■ カスタマイズフォーム共通
============================================ */


/*　■ セレクトボックス右側の矢印用
	　※セレクトボックス右側に矢印を配置するため、<div class="selectwrap"></div>で<select>を囲む
------------------------------------------- */

.selectwrap {
	position: relative;
	z-index: 10;
}

.selectwrap::before,
.selectwrap::after {
	position: absolute;
	top: 0;
	bottom: 0;
	content: "";
	vertical-align: middle;
}

.selectwrap:before {
	top: 20px;
	right: 17px;
	width: 7px;
	height: 7px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	z-index: 1;
}

.selectwrap:after {
	right: 0;
	background: #4A340A;
	height: 50px;
	width: 40px;
	border-radius: 0 5px 5px 0 / 0 5px 5px 0;
}


/* firefox用 */

.selectwrap select {
	background: transparent;
	outline: none;
	-moz-appearance: none;
	text-indent: 0.01px;
	text-overflow: '';
	vertical-align: middle;
	font-size: inherit;
	color: inherit;
	-webkit-appearance: button;
	-moz-appearance: button;
	appearance: button;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 1px solid #ccc;
	margin-right: -8px;
	padding: 10px 20px;
	background-image: url(../);
	background-repeat: no-repeat;
	background-position: 85% center;
	cursor: pointer;
}

.selectwrap select::-ms-expand {
	display: none;
}


/*　■ その他セレクトボックス
------------------------------------------- */

.custom_form select,
.find_more select {
	width: 100%;
	height: 50px;
	border: 1px solid #707070;
	padding: 12px 50px 12px 10px;
	background: transparent;
	position: relative;
	font-size: 16px;
	color: #333;
	border-radius: 5px;
	z-index: 1000;
}

/* ■ ラジオボタン、チェックボックス用
-------------------------------------------  */
.custom_form input {
	width: 100%;
	height: 50px;
	border: 1px solid #707070!important;
	padding: 10px 15px;
	background: #fff;
	position: relative;
	font-size: 16px;
	color: #333;
	border-radius: 5px!important;
	z-index: 1000;
}

.custom_form input[type="radio"] {
	visibility: hidden;
	height: 0;
	width: 0;
	padding: 0;
	margin: 0;
}

/* 書き換えラジオボタン
------------------------------------------------------------------------- */
.custom_form input[type="radio"]+label:only-of-type {
	display: inline-block;
	margin: 0 0.1em 0 0;
	padding-left: 35px;
	cursor: pointer;
	z-index: 1;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.custom_form input[type="radio"]+label:only-of-type::before {
	position: absolute;
	content: "";
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	background: -moz-linear-gradient(top, #ffffff 0%, #eeeeee 100%);
	background: -webkit-linear-gradient(top, #ffffff 0%, #eeeeee 100%);
	background: linear-gradient(to bottom, #ffffff 0%, #eeeeee 100%);
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 50%;
	width: 1.7em;
	height: 1.7em;
	display: block;
	transition: 0.5s;
}

.custom_form input[type="radio"]+label:only-of-type::after {}

.custom_form input[type="radio"]:checked+label:only-of-type::after {
	position: absolute;
	content: "";
	top: 50%;
	left: 0;
	transform: translateX(40%) translateY(-50%);
	background: #1CC2FF;
	border-radius: 50%;
	width: 1em;
	height: 1em;
	border: none;
	display: block;
}
/* ------------------------------------------------------------------------- */
.custom_form input[type="checkbox"] {
	display: none;
}

.custom_form input[type=checkbox]:checked+label:only-of-type:before {
	z-index: 1000;
}

.custom_form input[type=checkbox]:checked+label:only-of-type:after {
	background: #1CC2FF;
}

/* input[type="submit"]iOSでのデフォルトスタイルをリセット */
input[type="submit"] {
	border: none!important;
	border-radius: 0;
	-webkit-box-sizing: content-box;
	-webkit-appearance: button;
	appearance: button;
	border: none;
	box-sizing: border-box;
	cursor: pointer;
}
	input[type="submit"]::-webkit-search-decoration {
		display: none;
	}
	input[type="submit"]::focus {
		outline-offset: -2px;
	}


/*　■ 条件を指定して絞り込む
------------------------------------------- */

.find_more {
	display: none;
	text-align: center;
	max-width: 100%;
	padding: 0;
	font-size: 16px;
}

.featherlight .featherlight-content {
	padding: 40px 15px;
}

.featherlight .featherlight-close-icon {
	background: #4A340A;
	font-size: 25px;
	color: #fff;
	width: 40px;
	height: 40px;
	line-height: 40px;
	top: 10px;
	right: 10px;
}

.find_more .search_inner,
.find_more .search_accepting label {
	padding: 0;
}

.find_more .search_accepting label:before,
.find_more .search_accepting label:after {
	display: none;
}

.find_more input[type="checkbox"] {
	float: left;
}

.radio-icon {
	padding-left: 35px;
	position: relative;
	font-weight: bold;
}

.find_more input {
	width: 100%;
	height: 50px;
	border: 1px solid #707070!important;
	padding: 10px 15px;
	background: transparent;
	position: relative;
	font-size: 16px;
	color: #333;
	border-radius: 5px!important;
	z-index: 1000;
}

.find_more input[type="radio"] {
	padding: 0;
	margin: 0;
}

.find_more input[type="radio"]+span::before {
	position: absolute;
	content: "";
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	background: -moz-linear-gradient(top, #ffffff 0%, #eeeeee 100%);
	background: -webkit-linear-gradient(top, #ffffff 0%, #eeeeee 100%);
	background: linear-gradient(to bottom, #ffffff 0%, #eeeeee 100%);
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 50%;
	width: 1.7em;
	height: 1.7em;
	display: block;
	transition: 0.5s;
}

.find_more input[type="radio"],
.find_more input[type="checkbox"],
.find_more .search_accepting label:after {
	visibility: hidden;
	height: 0;
	width: 0;
	margin: 0;
	padding: 0;
}

.find_more input[type="radio"]:checked+span::after {
	position: absolute;
	content: "";
	top: 50%;
	left: 0;
	transform: translateX(40%) translateY(-50%);
	background: #1CC2FF;
	border-radius: 50%;
	width: 1em;
	height: 1em;
	border: none;
	display: block;
}

.find_more .parts {
	display: block;
	position: relative;
	padding: 7px 0 0 40px;
}

.find_more .parts:after {
	position: absolute;
	content: "";
	display: block;
	top: 0;
	left: 0;
	width: 30px;
	height: 30px;
	border: 1px solid #ccc;
	border-radius: 5px;
	background: -moz-linear-gradient(top, #ffffff 0%, #eeeeee 100%);
	background: -webkit-linear-gradient(top, #ffffff 0%, #eeeeee 100%);
	background: linear-gradient(to bottom, #ffffff 0%, #eeeeee 100%);
}

.find_more .parts:before {
	position: absolute;
	content: "";
	display: block;
	left: 11px;
	top: 5px;
	margin-top: 0;
	width: 10px;
	height: 15px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
}

.find_more input[type=checkbox]:checked+.parts:before {
	z-index: 1000;
}

.find_more input[type=checkbox]:checked+.parts:after {
	background: #1CC2FF;
}


/*　■ 最近チェックしたレッスン
============================================ */

#browse_history{
	border-top: 10px solid #FAF2EC;
	padding: 0;
}

#check .slider_area,
#browse_history .slider_area {
	margin: 0 5px;
}

#check .slick-list.draggable,
#browse_history .slick-list.draggable {
	/* padding: 0 44% 0 0!important; */
	/* slidesToShow: 1 のままでマージン有りの複数枚表示用 */
	margin: 0 15px;
}

#check .slick-list li,
#browse_history .slick-list li {
	padding: 0 10px ;
}

#check .slick-list li a,
#browse_history .slick-list li a {
	display: block;
}

#check .slick-list li a p.check_txt,
#browse_history .slick-list li a p.check_txt {
	padding: 0 5px 5px 0;
	font-size: 16px;
	font-weight: bold;
	text-decoration: underline;
}

#check .slick-list li a span.check_icon,
#browse_history .slick-list li a span.check_icon {
	background: #4A340A;
	padding: 1px 15px;
	color: #fff;
	font-weight: bold;
}

#check .slick-prev,
#browse_history .slick-prev {
	left: 0;
}

#check .slick-next,
#browse_history .slick-next {
	right: 0;
}

#check .slick-prev,
#check .slick-next,
#browse_history .slick-prev,
#browse_history .slick-next {
	transform: translateY(-50%);
	top: calc(50% - 60px);
	width: 15px;
	height: 60px;
}

#check .slick-prev:before,
#check .slick-prev:after,
#browse_history .slick-prev:before,
#browse_history .slick-prev:after {
	content: "";
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	vertical-align: middle;
}

#check .slick-prev:before,
#browse_history .slick-prev:before {
	width: 7px;
	height: 7px;
	left: 5px;
	border-top: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
	z-index: 100;
}

#check .slick-prev:after,
#browse_history .slick-prev:after {
	content: "";
	width: 15px;
	height: 60px;
	background: #4A340A;
	left: 0;
}

#check .slick-next:before,
#check .slick-next:after,
#browse_history .slick-next:before,
#browse_history .slick-next:after {
	content: "";
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	vertical-align: middle;
}

#check .slick-next:before,
#browse_history .slick-next:before {
	width: 7px;
	height: 7px;
	right: 5px;
	border-top: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	z-index: 100;
}

#check .slick-next:after,
#browse_history .slick-next:after {
	content: "";
	width: 15px;
	height: 60px;
	background: #4A340A;
	right: 0;
}


/*　■ メイン 「コンテンツとサイドを囲む要素」
============================================ */

#header_inner,
#main,
#contents,
#side,
footer,
#footer_inner {
	float: none;
	width: 100%;
}

/* パンくず */
#path{
	display: none;
}
	#path li:not(:last-child)::after{
		display: inline-block;
		content: "";
		width: 7px;
		height: 7px;
		border-top: 1px solid #4A340A;
		border-right: 1px solid #4A340A;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		margin: 0 5px;
	}
	#path a{
		color: #BC5137;
		text-decoration: underline;
	}

#main {
	width: 100%;
	margin: 61px auto 0 auto;
	clear: both;
	overflow: hidden;
}
section{
	padding: 40px 0;
	overflow: hidden;
}
section.last{
	padding-bottom: 0;
}
/* テキスト */
.read {
	margin: 0 0 20px;
	font-size: 16px;
}
.txt_center{
	text-align: center;
}
.txt_red{
	color: #BC5137;
}
.txt_red02{
	color: #DE0000;
}
.txt_blue{
	color: #5A63A5;
}

.separate_border {
	border-bottom: 10px solid #FAF2EC;
}

/* リンク */
.txt_link a{
	color: #BC5137;
	text-decoration: underline;
}
	.txt_link::after{
		display: inline-block;
		content: "";
		width: 7px;
		height: 7px;
		border-top: 1px solid #BC5137;
		border-right: 1px solid #BC5137;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		margin-left: 5px;
	}
	.txt_link.no::after{
		display: none;
	}
a.txt_link02{
	color: #DE0000;
	text-decoration: underline;
}
a.link_btmline{
	color: #000;
	text-decoration: underline;
}
a.link_btmline:hover{
	text-decoration: none;
	opacity: 1;
}

.link_list li a,
.link a{
	color: #4A340A;
	font-weight: 700;
	text-decoration: underline;
}
.link02 a{
	text-decoration: underline;
	color: #BC5137;
	font-size: 18px;
	font-weight: 700;
}
	.link_list li::before,
	.link::before,
	.link02::before{
		display: inline-block;
		content: "";
		width: 7px;
		height: 7px;
		border-top: 1px solid #BC5137;
		border-right: 1px solid #BC5137;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		margin-right: 5px;
	}
	.link_list li:not(:last-child){
		margin-bottom: 10px;
	}

/* リスト */
p.indent,
.indent_list li,
ul.disc_list li,
ul.notes_list li{
	text-indent: -1em;
	padding-left: 1em;
}
	.disc_list li{
		margin: 0 0 20px;
	}
	.disc_list li::before{
		content: "・";
	}
ul.notes_list li{
	font-size: 14px;
}

.side_space{
	padding: 0 1em;
}

/* 2カラム */
.col_2{
	display: block;
}
	.col_2 > div:first-of-type{
		border-bottom: 1px solid #ccc;
		margin-bottom: 40px;
		padding-bottom: 40px;
	}

/*　■ 共通ボタン
------------------------------------------- */

.more_btn {
	background: #4A340A;
	border-radius: 5px;
	width: 260px;
	margin: 0 auto;
	font-size: 16px;
	font-weight: bold;
	position: relative;
}

.more_btn a {
	display: table;
	width: 100%;
	height: 50px;
	color: #fff;
}

.more_btn a p {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

.more_btn a p:before {
	position: absolute;
	margin: auto;
	content: "";
	vertical-align: middle;
	top: 0;
	right: 20px;
	bottom: 0;
	width: 7px;
	height: 7px;
	border-top: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}


.btn{
	background: #BC5137;
	border: 1px solid #BC5137;
	border-radius: 5px;
	max-width: 418px;
	margin: 0 auto;
	font-size: 18px;
	font-weight: 500;
	text-align: center;
	position: relative;
}
	.btn a{
		display: block;
		color: #fff;
		padding: 10px;
	}
	.btn a::after{
			content: "";
			vertical-align: middle;
			width: 8px;
			height: 8px;
			border-top: 1px solid #ffffff;
			border-right: 1px solid #ffffff;
			-webkit-transform: rotate(45deg)translateX(-50%);
			transform: rotate(45deg)translateX(-50%);
			position: absolute;
			top: 50%;
			right: 10px;
		}
		.btn.bg_white{
			background: #fff;
		}
		.btn.bg_white a{
			color: #BC5137;
		}
		.btn.bg_white a::after{
			border-color: #BC5137;
		}
.btn.back,
.btn.sm.back{
	background: #fff;
	border: 1px solid #BC5137;
}
	.btn.back a,
	.btn.sm.back a{
		color: #BC5137;
	}
	.btn.back a::after,
	.btn.sm.back a::after{
		display: none;
	}
	.btn.back a::before,
	.btn.sm.back a::before{
			content: "";
			vertical-align: middle;
			width: 8px;
			height: 8px;
			border-left: 1px solid #BC5137;
			border-bottom: 1px solid #BC5137;
			-webkit-transform: rotate(45deg)translateX(-50%);
			transform: rotate(45deg)translateX(-50%);
			position: absolute;
			top: 50%;
			left: 15px;
		}

.btn.sm2{
	background: #42AC0A;
	border: 1px solid #42AC0A;
	border-radius: 5px;
	max-width: 418px;
	margin: 0 auto;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	position: relative;
}
	.btn.sm2 a{
		display: block;
		color: #fff;
		padding: 10px;
	}
	.btn.sm2 a::after{
			content: "";
			vertical-align: middle;
			width: 8px;
			height: 8px;
			border-top: 1px solid #ffffff;
			border-right: 1px solid #ffffff;
			-webkit-transform: rotate(45deg)translateX(-50%);
			transform: rotate(45deg)translateX(-50%);
			position: absolute;
			top: 50%;
			right: 10px;
		}

.btn.sm2.back{
	background: #fff;
	border: 1px solid #42AC0A;
}
	.btn.sm2.back a{
		color: #42AC0A;
	}
	.btn.sm2.back a::after{
		display: none;
	}
	.btn.sm2.back a::before{
			content: "";
			vertical-align: middle;
			width: 8px;
			height: 8px;
			border-left: 1px solid #42AC0A;
			border-bottom: 1px solid #42AC0A;
			-webkit-transform: rotate(45deg)translateX(-50%);
			transform: rotate(45deg)translateX(-50%);
			position: absolute;
			top: 50%;
			left: 15px;
		}

.btn_wrap .btn:not(:last-of-type){
	margin-bottom: 20px;
}
.flex_btn{
	display: block;
}
	.flex_btn .btn.sm .btn.sm2{
		margin-top: 20px;
	}

/* ボタン 357px、300px */
.btn.md,
.btn.sm{
	display: block;
	background: #BC5137;
	border-radius: 5px;
	width: 90%;
	margin: 0 auto;
}

.btn.sm2{
	display: block;
	background: #42AC0A;
	border-radius: 5px;
	width: 90%;
	margin: 0 auto;
}

/* ボタン　2カラム */
.cal2_btn_area{
	display: block;
	margin-top: -20px;
	overflow: hidden;
}
	.cal2_btn_area p.btn{
		margin: 20px auto 0;
	}


/* ▼  ページャー
----------------------------------------*/
.pager{
	width:100%;
	margin:55px 0 0 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	}
	.pager a{
		width: 35px;
		height: 35px;
		color:#333;
		display:block;
		padding: 3px 0 2px 0;
		margin:0 10px 0 0;
		border:1px solid #A0A0A0;
		font-size:18px;
		text-align: center;
		}
	.pager a.active{
		color:#fff;
		background:#BC5137;
		border:none;
		}
		.pager a:hover{
			border: none;
			background: #BC5137;
			color: #fff;
			opacity: 1;
		}
		.pager a:first-of-type:hover,
		.pager a:last-of-type:hover{
			background: none;
			color: #333;
			opacity: .7;
		}
	.pager span.reader{
		border:none;
		padding:3px 5px 2px 5px;
		margin: 0 10px 0 0;
		}

/* ▼  ページャー　「前へ」
----------------------------------------*/
.pager a:first-of-type{
	width: auto;
	height: auto;
	padding-left: 12px;
	margin-right: auto;
	border:none;
	background:none;
	font-size: 16px;
	position: relative;
	}
	.pager a:first-of-type:before,
	.pager a:first-of-type:after {
		position: absolute;
		top: 2px;
		bottom: 5px;
		margin: auto;
		content: "";
		vertical-align: middle;
		}
	.pager a:first-of-type:before {
		left: 2px;
		width: 7px;
		height: 7px;
		border-top: 1px solid #4A340A;
		border-right: 1px solid #4A340A;
		-webkit-transform: rotate(-135deg);
		transform: rotate(-135deg);
		}

/* ▼  ページャー　「次へ」
----------------------------------------*/
.pager a:last-of-type{
	width: auto;
	height: auto;
	padding-right: 12px;
	margin-right: 0;
	margin-left: auto;
	border:none;
	background:none;
	font-size: 16px;
	position: relative;
	}
	.pager a:last-of-type:before,
	.pager a:last-of-type:after {
		position: absolute;
		top: 2px;
		bottom: 5px;
		margin: auto;
		content: "";
		vertical-align: middle;
		}
	.pager a:last-of-type:before {
		right: 2px;
		width: 7px;
		height: 7px;
		border-top: 1px solid #4A340A;
		border-right: 1px solid #4A340A;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		}

/*　■ SNS リンク
------------------------------------------- */

#sns {
	max-width: 470px;
	background: #fff;
	padding: 40px 0 60px;
	margin: 0 auto;
}

#sns .icon_box {
	display: flex;
	justify-content: space-between;
	max-width: 80vw;
	margin: 0 auto;
}

#sns .icon_box li {
	text-align: center;
	min-width: 60px;
}

#sns .icon_box li p {
	margin-top: 5px;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
}

#sns .icon_box li img {
	width: 45px;
	height: 45px;
}


/*　■ フッター
============================================ */
body:not(#home) footer{
	border-top: 10px solid #FAF2EC;
	margin-top: 50px;
}

footer {
	width: 100%;
	background: #fff;
	clear: both;
	color: #4A340A;
	overflow: hidden;
}

.footer_nav{
	background: #FAF2EC;
	padding: 50px 0;
	font-size: 14px;
	font-weight: 500;
}
	.footer_nav nav{
		border-top: 1px solid #EFE6DF;
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
	.footer_nav nav > div{
		width: 50%;
	}
	.footer_nav nav > div:first-child{
		border-right: 1px solid #EFE6DF;
	}
	.footer_nav nav ul li{
		display: table;
		border-bottom: 1px solid #EFE6DF;
		height: 50px;
		width: 100%;
		position: relative;
	}
	.footer_nav nav ul li a{
		display: table-cell;
		vertical-align: middle;
		padding: 0 15px 0 10px;
	}
	.footer_nav nav ul li a::after{
		display: inline-block;
		content: "";
		width: 6px;
		height: 6px;
		border-top: 1px solid #4A340A;
		border-right: 1px solid #4A340A;
		-webkit-transform: rotate(45deg)translateY(-50%);
		transform: rotate(45deg)translateY(-50%);
		position: absolute;
		top: 50%;
		right: 10px;
	}
	.sub_nav ul{
		width: 100%;
		flex-shrink: 1;
	}

footer .footer_bottom {
	position: relative;
}
.sp.group_link{
	width: 100px;
	margin: 0 auto 10px;
}




/*　■ ページ上部へ戻る
------------------------------------------- */

.pagetop {
	position: relative;
	text-align: center;
	height: 50px;
	z-index: 2000;
	cursor: pointer;
	padding: 15px 0 0 0;
	background: url('../img/footer.png') no-repeat center bottom;
	background-size: cover;
}

footer .pagetop::before,
footer .pagetop::after {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}

footer .pagetop:before {
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	box-sizing: border-box;
	width: 10px;
	height: 2px;
	border: 6px solid transparent;
	border-left: 6px solid #4A340A;
	-webkit-transform: rotate(270deg);
	transform: rotate(270deg);
}

.footer_bottom{
	background: #FAF2EC;
}

/* コピーライト */
#copyright {
	font-size: 8px;
	color: #000;
	padding: 0 0 15px 0;
	text-align: center;
}


.pc{
	display: none;
}

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

	.sp{
		display: none!important;
	}
	.pc{
		display: block;
	}

	.container {
		width: 100%;
		max-width: 100%;
		padding: 0;
		margin: 0;
	}

	/* hoberエフェクト
	------------------------------------------- */

	a:hover{
		opacity: .7;
	}

	.txt_link a:hover,
	#path a:hover,
	.link_list li a:hover,
	.link a:hover,
	.link02 a:hover,
	a.txt_link02:hover{
		opacity: 1;
		text-decoration: none;
	}

	.contain{
		padding-top: 0;
	}

	.area_wrap{
		max-width: 1000px;
		padding: 0 15px 40px;
		margin: 0 auto;
	}
	.area_wrap02:not(:last-of-type){
		padding-bottom: 40px;
	}
		.area_wrap02:last-of-type{
			padding-top: 40px;
		}

	/*　■ 共通タイトル
	------------------------------------------- */
	.logo_img{
		height: 150px;
		padding: 15px 15px 0;
	}
	#site_title {
		border-bottom: 1px solid #ccc;
		overflow: hidden;
		height: 40px;
		width: 100%;
	}
		#site_title a{
			/* background: url(../img/site_title_pc.png) no-repeat center/135px;
			height: 100%;
			padding: 15px; */
			position: relative;
			padding: 10px;
		}
		#site_title a .outer_span{
			top: 90%;
		}
		/* #site_title a img{
			display: none;
		} */

	h2.title {
		margin: 0 0 45px;
		font-size: 28px;
	}
	.title02 {
		margin: 0 0 40px;
		font-size: 20px;
	}

	.form_title{
		font-size: 20px;
	}

	/*　■ セカンドページ共通
	------------------------------------------- */
	.title_wrap{
		height: 150px;
		width: 100%;
		font-size: 32px;
	}
		.title_wrap .page_title,
		.title_wrap .subpage_title{
			padding: 0 15px;
		}
		.title_wrap .page_title::after{
			margin: 10px auto 0;
		}

	/*　■ ヘッダー
	============================================ */
	header{
		position: static;
		float: left;
		width: 100%;
		max-width: 180px;
	}
	.search_icon{
		cursor: pointer;
	}
	.header_inner{
		flex-wrap: wrap;
		height: auto;
		background: #fff;
	}

	#gnav{
		float: none;
		width: 100%;
		max-height: 100vh;
		padding-top: 0;
		padding-bottom: 50px;
		margin: 0;
		position: static;
		z-index: 1000;
		overflow: inherit;
	}
	#gnav ul li{
		border: none;
		font-size: 12px;
	}
	#gnav > ul.main_nav + ul{
		margin-bottom: 20px;
	}
	#gnav > ul.main_nav + ul li{
		height: 35px;
	}
		#gnav ul > li > a::after{
			display: none;
		}
		#gnav > ul > li > p{
			display: table-cell;
			vertical-align: middle;
			cursor: pointer;
			line-height: inherit;
		}
		#gnav > ul:not(.nav_bnr) > li:hover > a{
			background: #BC5137;
			color: #fff!important;
		}
		#gnav > ul > li:hover p, #gnav > ul:not(.nav_bnr) > li:hover > a {
			background: #BC5137;
			color: #fff!important;
		}

	#gnav .main_nav{
		font-size: 14px;
		font-weight: 700;
	}
		#gnav ul.main_nav li{
			color: #BC5137;
			position: relative;
			height: 40px;
		}
		#gnav ul.main_nav li li a::before{
			background: url(../img/nav_inner_icon01.png) no-repeat center/contain;
		}
			#gnav ul.main_nav li li:nth-child(2) a::before{
				background: url(../img/nav_inner_icon02.png) no-repeat center/contain;
			}
			#gnav ul.main_nav li li:nth-child(3) a::before{
				background: url(../img/nav_inner_icon03.png) no-repeat center/contain;
			}
		#gnav ul.main_nav li a{
			color: #BC5137;
		}
		#gnav ul.main_nav > li:hover a{
			color: #fff;
			font-size: 12px;
		}
		#gnav ul.main_nav > li > p.close{
			border: none;
		}
		#gnav ul.main_nav > li > p.open:after,
		#gnav ul.main_nav > li > p.close:after{
			display: none;
		}
		#gnav ul.main_nav > li ul li{
			background: none;
			height: 40px;
			position: relative;
		}
		#gnav ul.main_nav li li,
		#gnav ul.main_nav li li a{
			background: none;
			color: #fff;
		}
		#gnav ul.main_nav > li ul li a{
			padding-left: 20px;
		}
		#gnav ul.main_nav li li:not(:last-child) {
			border-bottom: 1px solid rgba(255,255,255,.3);
		}
		#gnav ul.main_nav li li:hover{
			background: #bc5137;
		}
		/* #gnav ul.main_nav li li:before {
			content: "";
			display: block;
			width: 0;
			height: 2px;
			background-color: #fff;
			transition: .3s;
			left: 20px;
			bottom: 7px;
			position: absolute;
		}
		#gnav ul.main_nav li li:hover:before {
			width: 70%;
		} アコーディオン赤背景ver */

		/*　はじめての方へ　*/
		#gnav ul.main_nav li.li_beginner li a::before{
			background: url(../img/nav_inner_icon01.png) no-repeat center/contain;
		}
			#gnav ul.main_nav li.li_beginner li:nth-child(2) a::before{
				background: url(../img/nav_inner_icon02.png) no-repeat center/contain;
			}
			#gnav ul.main_nav li.li_beginner li:nth-child(3) a::before{
				background: url(../img/nav_inner_icon03.png) no-repeat center/contain;
			}
		/*　知る・楽しむ　*/
			#gnav ul.main_nav li.li_know li a::before{
				background: url(../img/nav_inner_icon01.png) no-repeat center/contain;
			}
				#gnav ul.main_nav li.li_know li:nth-child(2) a::before{
					background: url(../img/nav_inner_icon02.png) no-repeat center/contain;
				}
				#gnav ul.main_nav li.li_know li:nth-child(3) a::before{
					background: url(../img/nav_inner_icon03.png) no-repeat center/contain;
				}
	

		/* ホバーエフェクト */
		#gnav > ul > li:nth-child(2):hover ul,
		#gnav > ul > li:nth-child(4):hover ul, 
		#gnav > ul > li:nth-child(5):hover ul{
			background: rgba(188,81,55,.8);
			display: block;
			width: 100%;
			position: absolute;
			top: 0;
			left: 180px;
			z-index: 9999;
			transition: 0.4s ease 0.4s;
		}
		/* #gnav > ul > li:nth-child(2):hover ul:before,
		#gnav > ul > li:nth-child(4):hover ul:before, 
		#gnav > ul > li:nth-child(5):hover ul:before {
			content: "";
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 200vh;
			background-color: #BC5137;
			transform: translateY(-50%);
		}
		#gnav > ul > li:nth-child(2):hover ul:after,
		#gnav > ul > li:nth-child(4):hover ul:after, 
		#gnav > ul > li:nth-child(5):hover ul:after {
			content: "";
			display: block;
			position: absolute;
			left: 0;
			top: 8%;
			transform: translateY(0%) translateX(-100%);
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 7px 10px 7px 0;
			border-color: transparent #BC5137 transparent transparent;
		}
		#gnav ul.main_nav li li a::before {
			content: none;
		} アコーディオン赤背景ver*/

	/*　■ ログイン時
	------------------------------------------- */

	.login_index #header_search {
		padding-top: 0;
	}

	.login_index #main {
		margin-top: 0;
	}

	#gnav .nav_bnr{
		padding: 0 15px;
	}
		#gnav .nav_bnr li:not(:last-child){
			margin: 0 0 10px;
		}
		#gnav .nav_bnr li:hover{
			opacity: .7;
			background: none;
		}
		
		#gnav .nav_bnr a.sp{
	        display: none;
        }
        #gnav .nav_bnr a.pc{
	        display: block;
        }

		/*　■ 会員表示
		------------------------------------------- */
		.login_name{
			display: none;
		}
		#mypage_logon #gnav {
			padding-top: 0;
		}

		.search_icon,
		.login_icon,
		.mypage_icon{
			width: 50%;
		}
		.search_icon:hover{
			opacity: .7;
		}
		.login_icon a,
		.mypage_icon a{
			width: 100%;
		}
		.search_icon::before,
		.login_icon a::before,
		.mypage_icon a::before{
			margin: 0 auto;
		}


	.menu{
		display: none;
	}

	.search_overlay{
		display: none;
		background: rgba(0,0,0,0.8);
		width: 100vw;
		height: 100%;
		position: fixed;
		top: 0;
		z-index: 99999;
	}
		.search_overlay > div{
			max-width: 1040px;
			width: 90%;
			height: 90%;
			position: relative;
			top: 5%;
			margin: 0 auto;
		}
		.pc_close{
			background: #4A340A;
			display: block;
			width: 56px;
			height: 56px;
			position: absolute;
			z-index: 999999;
			top: 0;
			right: 0;
			cursor: pointer;
		}
		.pc_close::before{
			content: "";
			background: url(../img/top/close.png) no-repeat center/contain;
			width: 15px;
			height: 15px;
			position: absolute;
			transform: translate(-50%,-50%);
			top: 50%;
			left: 50%;
		}
	#header_search{
		float: none;
		background: #fff;
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		position: static;
		z-index: 99999;
	}
	#header_search.search_open {
		-moz-transform: translateY(0);
		transform: translateY(0);
	}
	#header_search .search_inner{
		display: block;
		max-width: 750px;
		padding: 30px 15px;
	}

	.search_inner .search_target td{
		width: 49%;
	}
	#header_search .search_accepting td{
		width: 49%;
	}

	/*　■ カスタマイズフォーム共通
	============================================ */


	/*　■ セレクトボックス右側の矢印用
		　※セレクトボックス右側に矢印を配置するため、<div class="selectwrap"></div>で<select>を囲む
	------------------------------------------- */

	.selectwrap{
		max-width: 400px;
	}

	/*　■ 最近チェックしたレッスン
	============================================ */

	#browse_history{
		padding: 40px 0 0;
	}
	#check .slider_area,
	#browse_history .slider_area{
		position: relative;
	}
	.slider02{
		max-width: 862px;
		margin: 0 auto;
		position: static;
	}

	/*　■ メイン 「コンテンツとサイドを囲む要素」
	============================================ */
	#main {
		border-left: 1px solid #ccc;
		overflow: hidden;
		clear: inherit;
		width: auto;
		margin: 0;
	}

	section{
		padding: 40px 0;
	}

	/* パンくず */
	#path{
		display: flex;
		margin: 20px 0 40px;
	}

	/* 2カラム */
	.col_2{
		display: flex;
		justify-content: space-between;
		position: relative;
	}
		.col_2 > div{
			padding: 0 15px;
		}
		.col_2 > div:first-of-type{
			border-bottom: none;
			margin-bottom: 0;
			padding-bottom: 0;
		}
		.col_2 > div:first-of-type::after{
			content: "";
			border-right: 1px solid #B4B4B4;
			height: 100%;
			position: absolute;
			transform: translateX(-50%);
			top: 0;
			left: 50%;
		}

	/*　■ 共通ボタン
	------------------------------------------- */
	.btn{
		font-size: 26px;
	}
		.btn a{
			padding: 10px;
		}
		.btn a::after{
				width: 10px;
				height: 10px;
				right: 15px;
			}
	.btn.back a::before,
	.btn.sm.back a::before,
	.btn.sm2.back a::before{
		width: 10px;
		height: 10px;
		left: 20px;
	}
	.btn_wrap .btn:not(:last-of-type){
		margin-bottom: 30px;
	}

	.flex_btn{
		display: flex;
		justify-content: center;
		align-items: flex-end;
		flex-wrap: wrap;
	}
		.flex_btn .btn.sm .btn.sm2{
			margin: 20px 20px 0;
		}


	/* ボタン357px */
	.btn.md{
		max-width: 357px;
		font-size: 20px;
	}

	/* ボタン300px */
	.btn.sm,
	.btn.sm2{
		max-width: 300px;
		font-size: 20px;
	}
		.btn.sm a,
		.btn.sm2 a,
		.btn.md a{
			padding: 8px 10px;
		}
		.btn.sm a::after,
		.btn.sm2 a::after,
		.btn.md a::after {
			width: 8px;
			height: 8px;
		}
    	/* ボタン　2カラム */
	.cal2_btn_area{
		display: flex;
		justify-content: center;
		margin: 0;
	}
		.cal2_btn_area p.btn{
			margin: 0;
		}
		.cal2_btn_area p.btn:first-of-type{
			margin-right: 30px;
		}


	/* ▼  ページャー
	----------------------------------------*/
	.pager{
		margin:55px 0 0 0;
		}

	/* ▼  ページャー　「前へ」
	----------------------------------------*/
	.pager a:first-of-type{
		margin-right: 40px;
		}

	/* ▼  ページャー　「次へ」
	----------------------------------------*/
	.pager a:last-of-type{
		margin-left: 30px;
		}


	/*　■ SNS リンク
	------------------------------------------- */
	#sns .icon_box li img {
		width: 47px;
		height: 47px;
	}

	/*　■ フッター
	============================================ */
	footer {
		width: 100%;
		background: #fff;
		clear: both;
		overflow: hidden;
	}

	#sns .icon_box{
		margin: 0 auto;
	}

	footer .pagetop{
		background: none;
		padding: 15px 0 0;
		margin: 0 auto 60px;
		height: auto;
		width: 150px;
	}
		footer .pagetop:before{
			top: 0;
		}

	.footer_nav{
		padding: 50px 20px;
		position: relative;
	}
	.footer_nav::before{
		display: block;
		content: "";
		/* background: url('../img/footer_pc.png') no-repeat center bottom/auto 74px; */
		background: url('../img/footer_pc.png') no-repeat center bottom/cover;
		height: 90px;
		width: 100%;
		position: absolute;
		top: -90px;
		left: 0;
		right: 0;
	}
		.footer_nav nav{
			border: none;
			max-width: 790px;
			margin: 0 auto;
		}
		.footer_nav nav > div{
			display: flex;
			justify-content: space-between;
			width: 44%;
		}
		.footer_nav nav > div:first-child{
			border: none;
			margin-right: 12%;
		}
		.footer_nav nav ul li{
			display: block;
			border: none;
			height: auto;
			width: auto;
			position: relative;
		}
		.footer_nav nav ul li:not(:last-child){
			margin-bottom: 15px;
		}
		.footer_nav nav ul li a{
			display: block;
			padding: 0;
		}
		.footer_nav nav ul li a::after{
			display: none;
		}
	.sub_nav{
		display: flex;
		max-width: 850px;
		padding: 0 15px;
		margin: 0 auto;
	}
		.sub_nav ul{
			font-size: 14px;
			display: flex;
			justify-content: flex-start;
			margin-bottom: 30px;
		}
		.sub_nav ul li{
			border-right: 1px solid #DBC2B0;
			/* padding: 0 10px; */
			padding: 0 8px;
			font-size: 12px;
		}
		.sub_nav ul li:first-child{
			border-left: 1px solid #DBC2B0;
		}
		.sub_nav .group_link{
			width: 100px;
			border-right: none;
			padding: 0;
			margin-left: auto;
		}

}


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

	.find_more .search_accepting>p {
		margin-bottom: 20px;
	}

	/*　■ SNS リンク
	------------------------------------------- */
	.btn a{
		font-feature-settings: 'palt';
	}
		.btn a::after{
			right: 5px;
		}
		.btn.back a::before,
		.btn.sm.back a::before,
		.btn.sm2.back a::before{
			left: 10px;
		}

	/*　■ SNS リンク
	------------------------------------------- */
	#sns .icon_box {
		width: 245px;
	}
}

/*CSA追記*/
input:-ms-input-placeholder {
  color: #777777;
}

/* Edge */
input::-ms-input-placeholder {
  color: #777777;
}
::placeholder{ /* Others */
 color:#777777;
}


/* 料理の基本・レシピ詳細 */
.bottom_bnr {
	width: 375px;
	position: fixed;
	bottom: 15px;
	right: 15px;
	z-index: 2001;
}
.bottom_bnr a {
	display: block;
	position: relative;
}
.bottom_bnr .bottom_bnr_close {
	width: 20px;
	height: 20px;
	display: block;
	position: absolute;
	right: 5px;
	top: 0;
	transform: translateY(-80%);
	cursor: pointer;
	z-index: 2;
}
@media screen and (max-width: 767px) {
	.bottom_bnr {
		bottom: 0;
		right: 0;
	}
	.bottom_bnr .bottom_bnr_close {
		transform: translateY(-50%);
	}
}