@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:wght@300;400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap");
/*------------------------------------------------------------
	デフォルトスタイル
------------------------------------------------------------*/
body {
	min-width: 1366px;
}

.en {
	font-family: "Averia Serif Libre", cursive;
}

.digit {
	font-family: "Montserrat", sans-serif;
}

.baskerville {
	font-family: "Libre Baskerville", serif;
}

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

@media screen and (max-width: 768px) {
	body {
		min-width: inherit;
	}
}

/*------------------------------------------------------------
	汎用スタイル
------------------------------------------------------------*/
/* clearfix */
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

/* flex */
.flex,
.flexA,
.flexB,
.flexC {
	display: flex;
	flex-wrap: wrap;
}

.flexA {
	justify-content: space-around;
}

.flexB {
	justify-content: space-between;
}

.flexC {
	justify-content: center;
}

/*------------------------------------------------------------
	レイアウト
------------------------------------------------------------*/
#recipe_container {
	box-sizing: border-box;
	padding-bottom: 98px;
	text-align: left;
	color: #333;
	font-size: 14px;
	font-weight: 500;
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", meiryo, sans-serif;
	line-height: 1.5;
	background: url("../img/bg01.webp") no-repeat center center/cover;
	position: relative;
	z-index: 10;
}

#recipe_container a {
	text-decoration: none;
}

@media screen and (max-width: 768px) {
	#recipe_container {
		/* padding: 60px 0; */
		padding: 90px 0 60px;
	}
	#recipe_container a:hover {
		opacity: 1 !important;
	}
}

/*------------------------------------------------------------
	navi_wrap
------------------------------------------------------------*/
#navi_wrap {
	position: relative;
	z-index: 100;
	height: 84px;
}

@media screen and (max-width: 768px) {
	#navi_wrap {
		transition: top 0.3s;
		top: calc(120 * 100vw / 768);
	}
}

@media screen and (min-width: 769px) {
	#navi_wrap.is-header-hidden nav.fixed {
		top: 0;
	}
}

@media screen and (max-width: 768px) {
	#navi_wrap.is-header-hidden {
		top: 0;
	}
}

#navi_wrap .nav_content {
	margin: 0 auto;
	padding: 26px 0;
	max-width: 1368px;
	display: flex;
	align-items: center;
}

#navi_wrap nav {
	background: #a08f62;
	opacity: 1;
}

#navi_wrap nav.fixed {
	position: fixed;
	left: 0;
	width: 100%;
}

@media screen and (min-width: 769px) {
	#navi_wrap nav.fixed {
		top: 110px;
	}
}

#navi_wrap nav.UpMove {
	opacity: 0;
	transition: all 0.5s;
	transform: translateY(-100%);
}

#navi_wrap nav.DownMove {
	opacity: 1;
	transition: all 0.5s;
	transform: translateY(0);
}

#navi_wrap .nav_content {
	margin: 0 auto;
	padding: 26px 0;
	max-width: 1368px;
	display: flex;
	align-items: center;
}

#navi_wrap h2 {
	margin: 0;
	padding: 0;
	width: 262px;
}

#navi_wrap ul {
	width: calc(100% - 532px);
	align-items: center;
}

#navi_wrap li {
	margin: 0 25px;
}

#navi_wrap li a {
	display: block;
	position: relative;
	color: #fff;
	line-height: 2.14;
}

#navi_wrap li a:hover {
	color: #fff;
}

#navi_wrap li a::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 100%;
	height: 1px;
	background: #fff;
	transition: all 0.3s;
	transform: translateX(-50%) scale(0, 1);
	transform-origin: center top;
}

#navi_wrap li.current a::after,
#navi_wrap li a:hover::after {
	transform: translateX(-50%) scale(1, 1);
}

@media screen and (min-width: 769px) and (max-width: 1000px) {
	#navi_wrap ul {
		width: calc(100% - 262px);
	}
}

@media screen and (max-width: 768px) {
	#navi_wrap {
		width: 100%;
		height: auto;
		position: fixed;
		left: 0;
		top: calc(120 * 100vw / 768);
	}
	#navi_wrap nav {
		opacity: 1 !important;
	}
	#navi_wrap .nav_content {
		padding: 0 10px 0 15px;
		max-width: inherit;
		height: 60px;
		text-align: center;
	}
	#navi_wrap h2 {
		padding: 0;
		width: 100px;
		font-size: 0;
		line-height: 0;
	}
	#navi_wrap ul {
		width: calc(100% - 100px);
		flex-wrap: nowrap;
	}
	#navi_wrap li {
		margin: 0;
		width: auto;
	}
	#navi_wrap li a {
		padding: 10px 5px;
		color: #fff;
		font-size: 12px;
		line-height: 1.5;
		letter-spacing: 0;
	}
	#navi_wrap li a img {
		vertical-align: top;
	}
	#navi_wrap li a:hover {
		color: #fff;
	}
	#navi_wrap li a::after {
		display: none;
	}
}

@media screen and (max-width: 359px) {
	#navi_wrap li a {
		padding: 10px 3px;
		font-size: 3.2vw;
	}
}

/*------------------------------------------------------------
	pagePath
------------------------------------------------------------*/
#pagePath {
	margin: 0 auto;
	padding: 21px 0;
	max-width: 1360px;
	display: flex;
	color: #333;
	font-size: 12px;
	letter-spacing: 0.1em;
}

#pagePath li:not(:last-child) {
	margin-right: 19px;
}

#pagePath li a {
	padding-right: 13px;
	color: #a08f62;
}

#pagePath li a:hover {
	text-decoration: underline;
}

@media screen and (max-width: 768px) {
	#pagePath {
		padding: 15px;
		max-width: inherit;
		position: relative;
		z-index: 1;
		font-size: 12px;
		overflow: auto;
		white-space: nowrap;
	}
	#pagePath li:not(:last-child) {
		margin-right: 8px;
	}
	#pagePath li a {
		padding-right: 8px;
	}
	#pagePath li a:hover {
		text-decoration: none;
	}
}

/*------------------------------------------------------------
	footer
------------------------------------------------------------*/
footer {
	position: relative;
	z-index: 1;
}

/*------------------------------------------------------------
	animation
------------------------------------------------------------*/
.wrap {
	animation: fadein 3s forwards;
}

@keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/*------------------------------------------------------------
	content
------------------------------------------------------------*/
.content {
	margin: 0 auto;
	width: 1122px;
}

@media screen and (max-width: 768px) {
	.content {
		margin: 0 15px;
		width: auto !important;
	}
}

/*------------------------------------------------------------
	headLine01
------------------------------------------------------------*/
.headLine01 {
	margin-bottom: 43px;
	overflow: hidden;
	text-align: center;
}

.headLine01 .en {
	box-sizing: border-box;
	margin-bottom: 9px;
	padding: 0 10px;
	min-width: 300px;
	display: inline-block;
	position: relative;
	vertical-align: top;
	font-size: 42px;
	letter-spacing: 0.07em;
	line-height: 1;
}

.headLine01 .en::before {
	width: 100vh;
	height: 1px;
	position: absolute;
	right: 100%;
	bottom: 50%;
	background: #ac9e77;
	content: "";
}

.headLine01 .en::after {
	width: 100vh;
	height: 1px;
	position: absolute;
	left: 100%;
	bottom: 50%;
	background: #ac9e77;
	content: "";
}

.headLine01 .jp {
	display: block;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.1em;
}

@media screen and (max-width: 768px) {
	.headLine01 {
		margin-bottom: 20px;
	}
	.headLine01 .en {
		min-width: 200px;
		font-size: 30px;
	}
	.headLine01 .jp {
		font-size: 14px;
	}
}

/*------------------------------------------------------------
	headLine02
------------------------------------------------------------*/
.headLine02 {
	margin-bottom: 33px;
	text-align: center;
	color: #333;
	font-weight: 500;
	font-size: 20px;
}

@media screen and (max-width: 768px) {
	.headLine02 {
		margin-bottom: 20px;
		font-size: 18px;
	}
}

/*------------------------------------------------------------
	headLine03
------------------------------------------------------------*/
.headLine03 {
	margin-bottom: 45px;
	text-align: center;
	color: #333;
	font-weight: bold;
	font-size: 24px;
}

@media screen and (max-width: 768px) {
	.headLine03 {
		margin-bottom: 30px;
		font-size: 18px;
	}
}

/*------------------------------------------------------------
	headLine04
------------------------------------------------------------*/
.headLine04 {
	margin: 0 89px 30px 90px;
	text-align: left;
	color: #333;
	font-weight: 500;
	font-size: 20px;
	border-bottom: 1px dotted #ac9e77;
	padding-bottom: 11px;
	padding-left: 24px;
	position: relative;
}

.headLine04::before {
	content: "▼";
	color: #000;
	font-size: 16px;
	position: absolute;
	top: 4px;
	left: 0;
}

.headLine04 .small {
	font-size: 14px;
	margin-left: 20px;
}

@media screen and (max-width: 768px) {
	.headLine04 {
		/* margin: 0 89px 45px 90px; */
		margin: 0 !important;
		font-size: 16px;
	}
	.headLine04 .small {
		font-size: 12px;
		margin-left: 0;
	}
}

/*------------------------------------------------------------
	comFeatureList
------------------------------------------------------------*/
.comFeatureList {
	margin: -54px 0 125px;
}

.comFeatureList::after {
	content: "";
	width: 360px;
	display: block;
}

.comFeatureList li {
	margin-top: 54px;
	width: 360px;
}

.comFeatureList li a {
	display: block;
	color: #333;
	transition: 0.3s ease-in-out;
}

.comFeatureList li a:hover {
	opacity: 0.8;
}

.comFeatureList li .pho {
	margin-bottom: 24px;
}

.comFeatureList li .pho img {
	width: 100%;
}

.comFeatureList li p {
	margin: 0 10px;
	font-size: 14px;
	line-height: 1.6;
}

.comFeatureList li .ttl {
	margin-bottom: 14px;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.3;
}

@media screen and (max-width: 768px) {
	.comFeatureList {
		margin: 0 0 60px;
		display: block;
	}
	.comFeatureList::after {
		display: none;
	}
	.comFeatureList li {
		margin: 0 0 25px;
		width: auto;
	}
	.comFeatureList li:last-child {
		margin-bottom: 0;
	}
	.comFeatureList li .pho {
		margin-bottom: 20px;
	}
	.comFeatureList li p {
		font-size: 13px;
	}
	.comFeatureList li .ttl {
		margin-bottom: 10px;
		font-size: 16px;
	}
}

/*------------------------------------------------------------
	comRecipeList
------------------------------------------------------------*/
.comRecipeList {
	margin-top: -34px;
}

.comRecipeList li {
	margin: 34px 27px 0 0;
	width: 260px;
}

.comRecipeList li:nth-child(4n) {
	margin-right: 0;
}

.comRecipeList li a {
	display: block;
	text-align: center;
	color: #333;
	transition: 0.3s ease-in-out;
}

.comRecipeList li a:hover {
	color: #333;
	opacity: 0.8;
}

.comRecipeList li img {
	width: 100%;
}

.comRecipeList li .txt {
	margin-top: 20px;
	display: block;
	font-size: 16px;
}

@media screen and (max-width: 768px) {
	.comRecipeList {
		margin-top: -15px;
		justify-content: space-between;
	}
	.comRecipeList li {
		margin: 40px 0 0;
		width: 48%;
	}
	.comRecipeList li .txt {
		margin-top: 10px;
		font-size: 14px;
	}
}

/*------------------------------------------------------------
	comBtn
------------------------------------------------------------*/
.comBtn {
	margin: 0 auto;
	width: 334px;
}

.comBtn a {
	padding: 18px 20px 14px;
	display: block;
	position: relative;
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-align: center;
	border-radius: 50px;
	background: #a08f62;
	overflow: hidden;
}

.comBtn a:before {
	width: 0;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	border-radius: 50px;
	background: #b3a783;
	transition: width 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
	content: "";
	overflow: hidden;
}

.comBtn a span {
	position: relative;
	z-index: 1;
}

@media screen and (min-width: 769px) {
	.comBtn a:hover:before {
		width: 100%;
		right: auto;
		left: 0;
	}
}

@media screen and (max-width: 768px) {
	.comBtn {
		max-width: 100%;
	}
	.comBtn a {
		padding: 15px;
		font-size: 14px;
	}
}

/*------------------------------------------------------------
	comShareBtn
------------------------------------------------------------*/
.comShareBtn {
	text-align: center;
}

.comShareBtn a {
	padding: 6px 31px 4px 0;
	display: inline-block;
	color: #808080;
	font-size: 13px;
	letter-spacing: 0.14em;
	background: url(../img/icon01.webp) no-repeat right 0 center/18px auto;
	transition: 0.3s ease-in-out;
}

.comShareBtn a:hover {
	opacity: 0.8;
}

/*------------------------------------------------------------
	recipe
------------------------------------------------------------*/
#main_top {
	position: relative;
	z-index: 1;
}

#main_top .mainVisual {
	margin-bottom: 87px;
	background: #fff;
}

#main_top .mainVisual .slick-list {
	padding: 0 16.15vw !important;
}

#main_top .mainVisual .slick-slide {
	margin: 0 3px;
}

#main_top .mainVisual li {
	vertical-align: top;
	background: #000;
}

#main_top .mainVisual li img {
	width: 100%;
	opacity: 0.8;
}

#main_top .mainVisual .slick-center img {
	opacity: 1;
}

#main_top .mainVisual .slick-arrow {
	margin-top: 13px;
	font-size: 0;
	line-height: 0;
	position: absolute;
	top: 50%;
	display: block;
	width: 70px;
	height: 70px;
	padding: 0;
	cursor: pointer;
	color: transparent;
	border: none;
	outline: none;
	background-color: transparent;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	transform: translateY(-50%);
	z-index: 100;
}

#main_top .mainVisual .slick-prev {
	margin-left: -35px;
	left: 16.15vw;
	background-image: url("../img/prev_arrow.webp");
}

#main_top .mainVisual .slick-next {
	margin-right: -35px;
	right: 16.15vw;
	background-image: url("../img/next_arrow.webp");
}

#main_top .mainVisual .slick-dots {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 30px;
	text-align: center;
	display: block;
	font-size: 0;
	line-height: 0;
}

#main_top .mainVisual .slick-dots li {
	margin: 0 12px;
	display: inline-block;
	vertical-align: top;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: #e4e4e4;
}

#main_top .mainVisual .slick-dots li button {
	display: none;
}

#main_top .mainVisual .slick-dots li.slick-active {
	background-color: #808080;
}

#main_top .content {
	width: 1300px;
	max-width: 100%;
}

#main_top .feature {
	margin-bottom: 107px;
}

#main_top .feature .comFeatureList {
	margin-bottom: 89px;
}

#main_top .feature .comFeatureList::after {
	width: 420px;
}

#main_top .feature .comFeatureList li {
	width: 420px;
}

#main_top .feature .comFeatureList li .pho {
	margin-bottom: 15px;
}

#main_top .feature .comFeatureList li p {
	margin: 0 26px;
}

#main_top .feature .comFeatureList li .ttl {
	margin-bottom: 15px;
}

#main_top .recipeBox {
	position: relative;
}

#main_top .recipeBox .headLine01 {
	margin-bottom: 48px;
}

#main_top .recipeBox .comRecipeList {
	margin: -34px 89px 80px 90px;
}

#main_top .recipeBox .comRecipeList li:nth-child(n + 21) {
	display: none;
}

#main_top .recipeBox .comBtn {
	margin-bottom: 123px;
}

#main_top .linkList {
	padding-top: 104px;
	border-top: #ac9e77 1px solid;
}

#main_top .linkList.noBorder {
	border-top: none;
}

#main_top .linkList li {
	margin-bottom: 50px;
	padding-right: 5px;
	text-align: center;
}

#main_top .linkList li:last-child {
	margin-bottom: 0;
}

#main_top .linkList li a {
	width: 801px;
	display: inline-block;
	vertical-align: top;
	transition: 0.3s ease-in-out;
}

#main_top .linkList li a:hover {
	opacity: 0.8;
}

#main_top .sametimecook-lead {
	display: flex;
	justify-content: space-between;
	width: 840px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 60px;
}

#main_top .sametimecook-txt {
	width: 650px;
	margin-top: 10px;
}

#main_top .sametimecook-txt-bold {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 20px;
}

#main_top .sametimecook-txt-annotion {
	font-size: 14px;
	text-indent: -14px;
	padding-left: 14px;
}

#main_top .sametimecook-img {
	width: 180px;
}

@media screen and (min-width: 769px) {
	#main_top .mainVisual .slick-prev:hover {
		background-image: url("../img/prev_arrow_on.webp");
	}
	#main_top .mainVisual .slick-next:hover {
		background-image: url("../img/next_arrow_on.webp");
	}
}

@media screen and (max-width: 768px) {
	#main_top .mainVisual {
		margin-bottom: 45px;
	}
	#main_top .mainVisual li {
		width: 100%;
	}
	#main_top .mainVisual .slick-list {
		padding: 0 !important;
	}
	#main_top .mainVisual .slick-slide {
		margin: 0;
	}
	#main_top .mainVisual li img {
		opacity: 1;
	}
	#main_top .mainVisual .slick-arrow {
		margin-top: 0;
		width: 40px;
		height: 40px;
	}
	#main_top .mainVisual .slick-prev {
		margin-left: 0;
		left: 10px;
	}
	#main_top .mainVisual .slick-next {
		margin-right: 0;
		right: 10px;
	}
	#main_top .mainVisual .slick-dots {
		bottom: 15px;
	}
	#main_top .mainVisual .slick-dots li {
		margin: 0 7px;
		width: 10px;
		height: 10px;
	}
	#main_top .content {
		width: auto;
		max-width: inherit;
	}
	#main_top .feature {
		margin-bottom: 50px;
	}
	#main_top .recipeBox .headLine01 {
		margin-bottom: 25px;
	}
	#main_top .feature .comFeatureList {
		margin-bottom: 45px;
	}
	#main_top .feature .comFeatureList li {
		width: auto;
	}
	#main_top .feature .comFeatureList li .pho {
		margin-bottom: 10px;
	}
	#main_top .feature .comFeatureList li p {
		margin: 0 10px;
	}
	#main_top .feature .comFeatureList li .ttl {
		margin-bottom: 10px;
	}
	#main_top .recipeBox .comBtn {
		margin-bottom: 50px;
	}
	#main_top .linkList {
		padding-top: 50px;
	}
	#main_top .linkList li {
		margin-bottom: 20px;
		padding-right: 0;
	}
	#main_top .linkList li:last-child {
		margin-bottom: 0;
	}
	#main_top .linkList li a {
		width: auto;
		display: block;
	}
	#main_top .linkList li a img {
		width: 100%;
	}
	#main_top .sametimecook-lead {
		display: block;
		width: 100%;
		margin-bottom: 60px;
	}
	#main_top .sametimecook-txt {
		width: 100%;
		margin-top: 10px;
	}
	#main_top .sametimecook-txt-bold {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 15px;
	}
	#main_top .sametimecook-txt-annotion {
		font-size: 12px;
		text-indent: -12px;
		padding-left: 12px;
	}
	#main_top .sametimecook-img {
		margin-top: 30px;
		width: 60%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	#main_top .recipeBox .comRecipeList {
		margin: -15px 0 80px 0;
		justify-content: space-between;
	}
}

/*------------------------------------------------------------
	recipe_details
------------------------------------------------------------*/
#main_details .mainBox {
	margin-bottom: 78px;
	padding: 79px 98px 79px;
	background: #f2f2f2;
}

#main_details .mainBox .topPhoto {
	margin: 0 15px 53px;
	text-align: center;
}

#main_details .mainBox .h3Ttl {
	margin-bottom: 18px;
	font-size: 43px;
	font-weight: 500;
}

#main_details .mainBox .h3Ttl .reservation {
	margin: 7px 0 0 30px;
	padding: 7px 5px 5px;
	width: 120px;
	display: inline-block;
	vertical-align: top;
	text-align: center;
	color: #fff;
	font-size: 20px;
	border-radius: 3px;
	background-color: #c3bda2;
}

#main_details .mainBox .subTtl {
	margin-bottom: 17px;
	font-size: 16px;
	letter-spacing: 0.08em;
}

#main_details .mainBox .textBox01 {
	margin-bottom: 53px;
	padding: 20px 0;
	border-top: 1px solid #808080;
	border-bottom: 1px solid #808080;
}

#main_details .mainBox .textBox01 .txtList {
	margin-right: 38px;
}

#main_details .mainBox .textBox01 .txtList li {
	margin-right: 15px;
	display: flex;
	align-items: center;
	font-weight: 500;
	font-size: 13px;
	color: #808080;
	letter-spacing: 0.1em;
}

#main_details .mainBox .textBox01 .txtList li:last-child {
	margin-right: 0;
}

#main_details .mainBox .textBox01 .txtList li img {
	margin-right: 4px;
}

#main_details .mainBox .textBox01 .tagList li {
	box-sizing: border-box;
	margin-right: 20px;
	margin-bottom: 10px;
	margin-top: 12px;
	padding: 7px 5px 5px;
	/* width: 112px; */
	text-align: center;
	color: #fff;
	font-size: 14px;
	line-height: 1.2;
	border-radius: 3px;
	background-color: #c3bda2;
}

#main_details .mainBox .secBox {
	margin-bottom: 100px;
}

#main_details .mainBox .secBox:last-child {
	margin-bottom: 80px;
}

#main_details .mainBox .secBox h3 {
	margin-bottom: 9px;
	font-size: 30px;
	font-weight: 500;
}

#main_details .mainBox .subSec {
	margin-bottom: 52px;
	padding: 33px 40px 49px;
	border-radius: 10px;
	background-color: #eae8de;
}

#main_details .mainBox .subSec .ttlBox {
	margin-bottom: 42px;
	padding-bottom: 10px;
	align-items: flex-start;
	border-bottom: 1px solid #808080;
}

#main_details .mainBox .subSec h4 {
	font-size: 26px;
	font-weight: 500;
	letter-spacing: 0.1em;
}

#main_details .mainBox .subSec .ttlBox dl {
	margin: 0 15px 0 0;
}

#main_details .mainBox .subSec .ttlBox dt {
	margin-right: 28px;
}

#main_details .mainBox .subSec .ttlBox dt span {
	margin-top: 1px;
	width: 118px;
	display: block;
	box-sizing: border-box;
	padding: 3px 5px 2px;
	position: relative;
	text-align: center;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	background: #7f7e7f;
}

#main_details .mainBox .subSec .ttlBox dt span::after {
	width: 10px;
	height: 100%;
	position: absolute;
	right: -10px;
	top: 0;
	background: url("../img/icon02.webp") no-repeat center center;
	background-size: 100% 100%;
	content: "";
}

#main_details .mainBox .subSec .ttlBox dd span {
	padding: 2px 13px;
	display: inline-block;
	vertical-align: top;
	border-radius: 15px;
	border: 1px solid #7f7e7f;
}

#main_details .mainBox .subSec .materialsList li {
	padding: 12px 0 13px;
	width: 407px;
	display: flex;
	justify-content: space-between;
	font-size: 16px;
	border-bottom: 1px dotted #808080;
}

#main_details .mainBox .subSec .materialsList li:nth-child(1), #main_details .mainBox .subSec .materialsList li:nth-child(2) {
	border-top: 1px dotted #808080;
}

#main_details .mainBox .subSec .materialsList li > span {
	width: 26%;
	display: block;
}

#main_details .mainBox .subSec .materialsList li .txt02 {
	text-align: right;
}

#main_details .mainBox .subSec .materialsList li .txt03 {
	width: 46%;
	text-align: center;
}

#main_details .mainBox .subSec .materialsBox {
	margin-top: 50px;
	position: relative;
	border-top: 1px dotted #808080;
}

#main_details .mainBox .subSec .materialsBox .enTxt {
	padding-right: 5px;
	position: absolute;
	left: 0;
	top: -0.75em;
	font-size: 16px;
	background-color: #eae8de;
}

#main_details .mainBox .subSec .materialsBox .materialsList li:nth-child(1), #main_details .mainBox .subSec .materialsBox .materialsList li:nth-child(2) {
	border-top: none;
}

#main_details .mainBox .subSec .textWrap {
	position: relative;
}

#main_details .mainBox .subSec .textWrap::after {
	width: 100%;
	height: 4px;
	position: absolute;
	left: 0;
	bottom: -2px;
	background: #eae8de;
	content: "";
	z-index: 1;
}

#main_details .mainBox .subSec .numList {
	margin: -40px 0;
	position: relative;
}

#main_details .mainBox .subSec .numList::after {
	width: 258px;
	content: "";
}

#main_details .mainBox .subSec .numList li {
	box-sizing: border-box;
	padding: 41px 0 214px 2.5em;
	width: 258px;
	position: relative;
	text-align: justify;
	font-size: 14px;
	line-height: 1.75;
	letter-spacing: -0.07em;
	border-bottom: 1px dotted #808080;
}

#main_details .mainBox .subSec .memoList {
	width: 400px;
	margin-top: 20px;
}

#main_details .mainBox .subSec .numList li .numList-icon {
	width: 24px;
}

#main_details .mainBox .subSec .numList li.no-image {
	padding: 41px 0 33px 2.5em;
}

#main_details .mainBox .subSec .numList li .num {
	position: absolute;
	left: 0;
	top: 37px;
	color: #808080;
	font-size: 29px;
}

#main_details .mainBox .subSec .numList li div {
	text-align: center;
	margin-top: 1em;
}

#main_details .mainBox .subSec .numList li div img {
	display: block;
}

#main_details .mainBox .subSec:last-of-type {
	margin-bottom: 25px;
}

#main_details .mainBox .comShareBtn {
	margin-top: 50px;
}

#main_details .otherBox .ttl {
	margin-bottom: 51px;
	font-size: 20px;
}

@media all and (-ms-high-contrast: none) {
	#main_details .mainBox .h3Ttl .reservation {
		margin-top: 2px;
		padding: 10px 5px 1px;
	}
	#main_details .mainBox .textBox01 .tagList li {
		padding: 10px 5px 2px;
	}
	#main_details .mainBox .subSec .materialsList li {
		padding: 15px 0 10px;
	}
	#main_details .mainBox .subSec .ttlBox dt span {
		padding: 5px 5px 0;
	}
	#main_details .mainBox .subSec .ttlBox dd span {
		padding: 5px 13px 0;
	}
}

@media screen and (min-width: 769px) {
	#main_details .mainBox .subSec .numList li div.making-img {
		position: absolute;
		right: 0;
		bottom: 15px;
		width: 100%;
		padding-bottom: 66.6%;
	}
	#main_details .mainBox .subSec .numList li div.making-img img {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		object-fit: cover;
	}
}

@media screen and (max-width: 768px) {
	#main_details .mainBox {
		margin-bottom: 40px;
		padding: 35px 15px;
	}
	#main_details .mainBox .subSec .numList li div.making-img {
		width: 100%;
		padding-bottom: 66.6%;
		position: relative;
	}
	#main_details .mainBox .subSec .numList li div.making-img img {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		object-fit: cover;
	}
	#main_details .mainBox .subSec .numList li .numList-icon {
		width: 20px;
	}
	#main_details .mainBox .subSec .memoList {
		width: 550px;
		margin-left: 0px;
	}
	#main_details .mainBox .topPhoto {
		margin: 0 0 30px;
	}
	#main_details .mainBox .h3Ttl {
		margin-bottom: 5px;
		font-size: 26px;
	}
	#main_details .mainBox .h3Ttl .reservation {
		margin: 7px 0 0 0;
		padding: 6px;
		width: 90px;
		display: block;
		font-size: 14px;
	}
	#main_details .mainBox .subTtl {
		margin-bottom: 10px;
		font-size: 14px;
	}
	#main_details .mainBox .textBox01 {
		margin-bottom: 20px;
		padding: 15px 0;
		display: block;
	}
	#main_details .mainBox .textBox01 .txtList {
		margin: -10px 0 5px;
	}
	#main_details .mainBox .textBox01 .txtList li {
		margin-right: 10px;
		font-size: 12px;
		letter-spacing: 0.05em;
	}
	#main_details .mainBox .textBox01 .txtList li:last-child {
		margin-right: 0;
	}
	#main_details .mainBox .textBox01 .tagList li {
		margin: 10px 15px 0 0;
		padding: 5px;
		/* width: 80px; */
		font-size: 12px;
	}
	#main_details .mainBox .secBox {
		margin-bottom: 50px;
	}
	#main_details .mainBox .secBox:last-child {
		margin-bottom: 40px;
	}
	#main_details .mainBox .secBox h3 {
		margin-bottom: 5px;
		font-size: 20px;
	}
	#main_details .mainBox .subSec {
		margin-bottom: 25px;
		padding: 20px 15px;
		border-radius: 5px;
	}
	#main_details .mainBox .subSec .ttlBox {
		margin-bottom: 25px;
		display: block;
	}
	#main_details .mainBox .subSec h4 {
		font-size: 18px;
	}
	#main_details .mainBox .subSec .ttlBox dl {
		margin: 5px 0 0;
	}
	#main_details .mainBox .subSec .ttlBox dt {
		margin-right: 20px;
	}
	#main_details .mainBox .subSec .ttlBox dt span {
		margin-top: 0;
		width: 100px;
		padding: 5px;
		font-size: 12px;
	}
	#main_details .mainBox .subSec .ttlBox dd span {
		padding: 2px 10px;
	}
	#main_details .mainBox .subSec .materialsList {
		display: block;
		border-top: 1px dotted #808080;
	}
	#main_details .mainBox .subSec .materialsList li {
		padding: 10px 0;
		width: auto;
		font-size: 14px;
	}
	#main_details .mainBox .subSec .materialsList li:nth-child(1), #main_details .mainBox .subSec .materialsList li:nth-child(2) {
		border-top: none;
	}
	#main_details .mainBox .subSec .materialsBox {
		margin-top: 25px;
		border: none;
	}
	#main_details .mainBox .subSec .materialsBox .enTxt {
		top: -0.7em;
		font-size: 14px;
	}
	#main_details .mainBox .subSec .textWrap::after {
		display: none;
	}
	#main_details .mainBox .subSec .numList {
		margin: 0;
		display: block;
	}
	#main_details .mainBox .subSec .numList li {
		margin-top: 0;
		padding: 10px 0;
		width: auto;
		padding-left: 2em;
		position: relative;
		text-align: justify;
		font-size: 13px;
		letter-spacing: 0;
		border-bottom: 1px dotted #808080;
	}
	#main_details .mainBox .subSec .numList li:nth-child(5n-2) {
		padding-bottom: 10px;
	}
	#main_details .mainBox .subSec .numList li .num {
		top: 6px;
		font-size: 20px;
	}
	#main_details .mainBox .subSec:last-of-type {
		margin-bottom: 20px;
	}
	#main_details .mainBox .comShareBtn {
		margin-top: 35px;
	}
	#main_details .otherBox .ttl {
		margin-bottom: 20px;
		font-size: 16px;
	}
}

/*------------------------------------------------------------
	pagination
------------------------------------------------------------*/
.pagination {
	display: flex;
	justify-content: center;
}

.pagination li {
	margin: 0 22px;
	position: relative;
}

.pagination a {
	color: #333;
	width: 57px;
	height: 57px;
	display: block;
	font-size: 20px;
	line-height: 55px;
	text-align: center;
	border-radius: 50%;
	border: 1px solid #a7a7a7;
	box-sizing: border-box;
	cursor: pointer;
	font-family: "Montserrat", sans-serif;
}

.pagination span {
	width: 57px;
	height: 57px;
	display: block;
	font-size: 20px;
	line-height: 55px;
	text-align: center;
	border-radius: 50%;
	border: 1px solid #a7a7a7;
	box-sizing: border-box;
	cursor: pointer;
	font-family: "Montserrat", sans-serif;
}

.pagination .on a,
.pagination .on span {
	border-color: #333;
}

.pagination span {
	color: #a7a7a7;
	border-color: #a7a7a7;
}

.pagination li svg {
	display: block;
	width: 62px;
	height: 62px;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.pagination li.on svg {
	display: none;
}

.pagination li svg path {
	stroke: #333;
	stroke-width: 2px;
	fill: rgba(255, 255, 255, 0);
	stroke-dasharray: 315;
	stroke-dashoffset: 315;
}

.pagination li.loading svg path {
	stroke-dashoffset: 0;
	-webkit-transition: 0.8s 0.4s ease;
	transition: 0.8s 0.4s ease;
}

@media all and (min-width: 769px) {
	.pagination a:hover {
		background: #a7a7a7;
		border-color: #a7a7a7;
	}
	.pagination span:hover {
		background: #a7a7a7;
		border-color: #a7a7a7;
		color: #333;
	}
}

@media screen and (max-width: 768px) {
	.pagination li {
		margin: 0 10px;
	}
	.pagination a,
	.pagination span {
		width: 40px;
		height: 40px;
		font-size: 17px;
		line-height: 38px;
	}
	.pagination li svg {
		width: 42px;
		height: 42px;
	}
}

/*------------------------------------------------------------
	comBlur
------------------------------------------------------------*/
.comBlur {
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

.comBlur.show {
	animation-name: blurAnime;
}

@keyframes blurAnime {
	from {
		filter: blur(10px);
		transform: scale(1.02);
	}
	to {
		filter: blur(0);
		transform: scale(1);
	}
}

/*------------------------------------------------------------
	fade
------------------------------------------------------------*/
.fadeIn {
	opacity: 0;
}

.fadeIn.on {
	animation-name: fadeInAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes fadeInAnime {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.fadeDown {
	opacity: 0;
}

.fadeDown.on {
	animation-name: fadeDownAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}

@keyframes fadeDownAnime {
	from {
		opacity: 0;
		transform: translateY(-100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeUp {
	opacity: 0;
}

.fadeUp.on {
	animation-name: fadeUpAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}

@keyframes fadeUpAnime {
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeLeft {
	opacity: 0;
}

.fadeLeft.on {
	animation-name: fadeLeftAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}

@keyframes fadeLeftAnime {
	from {
		opacity: 0;
		transform: translateX(-100px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.fadeRight {
	opacity: 0;
}

.fadeRight.on {
	animation-name: fadeRightAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}

@keyframes fadeRightAnime {
	from {
		opacity: 0;
		transform: translateX(100px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.eachTextAnime span {
	opacity: 0;
}

.eachTextAnime.appeartext span {
	animation: text_anime_on 1s ease-out forwards;
}

@keyframes text_anime_on {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.slide-in {
	overflow: hidden;
	display: inline-block;
}

.slide-in_inner {
	display: inline-block;
}

.downAnime {
	opacity: 0;
}

.slideAnimeDownUp {
	animation-name: slideTextY100;
	animation-duration: 0.8s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes slideTextY100 {
	from {
		transform: translateY(100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.slideAnimeUpDown {
	animation-name: slideTextY-100;
	animation-duration: 0.8s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes slideTextY-100 {
	from {
		transform: translateY(-100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/*------------------------------------------------------------
	comAnimateList
------------------------------------------------------------*/
.comAnimateList li {
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}

.comAnimateList li.on {
	animation-name: fadeInUp01;
}

.comAnimateList li:nth-child(3n-1) {
	animation-delay: 0.2s;
}

.comAnimateList li:nth-child(3n) {
	animation-delay: 0.4s;
}

@-webkit-keyframes fadeInUp01 {
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInUp01 {
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/*------------------------------------------------------------
	snsPopBox
------------------------------------------------------------*/
.fancybox-is-open .fancybox-bg {
	opacity: 0.5;
}

.snsPopBox {
	width: 280px;
	display: none;
	padding: 30px;
	box-sizing: border-box;
	border-radius: 20px;
	background: #fff;
}

.snsPopBox .innerTtl {
	margin-left: 10px;
	margin-bottom: 15px;
	font-size: 18px;
	font-weight: bold;
}

.snsPopBox .snsBtnList li a {
	padding: 10px;
	display: block;
	text-decoration: none !important;
}

.snsPopBox .snsBtnList li a span {
	padding-left: 35px;
	line-height: 30px;
	display: block;
	color: #333;
	font-size: 14px;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 25px 25px;
}

.snsPopBox .snsBtnList li.pinterest {
	padding: 10px;
	display: flex;
	align-items: center;
}

.snsPopBox .snsBtnList li.pinterest .txt {
	margin-left: 5px;
	flex: 1;
}

.snsPopBox .snsBtnList li a .facebook {
	background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 58'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%234267b2;%7D.cls-2%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Ef-ogo_RGB_HEX-58%3C/title%3E%3Cpath class='cls-1' d='M54.8,0H3.2A3.2,3.2,0,0,0,0,3.2V54.8A3.2,3.2,0,0,0,3.2,58H31V35.57H23.45V26.79H31V20.33c0-7.49,4.58-11.57,11.26-11.57A64.2,64.2,0,0,1,49,9.1v7.83h-4.6c-3.64,0-4.35,1.72-4.35,4.26v5.59h8.7l-1.13,8.78H40V58H54.8A3.2,3.2,0,0,0,58,54.8V3.2A3.2,3.2,0,0,0,54.8,0Z'/%3E%3Cpath id='f' class='cls-2' d='M40,58V35.57h7.57l1.13-8.78H40V21.2c0-2.54.71-4.26,4.35-4.26H49V9.1a64.2,64.2,0,0,0-6.75-.34C35.56,8.76,31,12.84,31,20.33v6.46H23.45v8.78H31V58Z'/%3E%3C/svg%3E");
}

.snsPopBox .snsBtnList li a .twitter {
	background-size: 25px 25px;
	background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='utf-8'?%3E %3C!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 400 400' style='enable-background:new 0 0 400 400;' xml:space='preserve'%3E %3Cstyle type='text/css'%3E .st0%7Bfill:%231DA1F2;%7D .st1%7Bfill:%23FFFFFF;%7D %3C/style%3E %3Cg id='Dark_Blue'%3E %3Cpath class='st0' d='M350,400H50c-27.6,0-50-22.4-50-50V50C0,22.4,22.4,0,50,0h300c27.6,0,50,22.4,50,50v300 C400,377.6,377.6,400,350,400z'/%3E %3C/g%3E %3Cg id='Logo__x2014__FIXED'%3E %3Cpath class='st1' d='M153.6,301.6c94.3,0,145.9-78.2,145.9-145.9c0-2.2,0-4.4-0.1-6.6c10-7.2,18.7-16.3,25.6-26.6 c-9.2,4.1-19.1,6.8-29.5,8.1c10.6-6.3,18.7-16.4,22.6-28.4c-9.9,5.9-20.9,10.1-32.6,12.4c-9.4-10-22.7-16.2-37.4-16.2 c-28.3,0-51.3,23-51.3,51.3c0,4,0.5,7.9,1.3,11.7c-42.6-2.1-80.4-22.6-105.7-53.6c-4.4,7.6-6.9,16.4-6.9,25.8 c0,17.8,9.1,33.5,22.8,42.7c-8.4-0.3-16.3-2.6-23.2-6.4c0,0.2,0,0.4,0,0.7c0,24.8,17.7,45.6,41.1,50.3c-4.3,1.2-8.8,1.8-13.5,1.8 c-3.3,0-6.5-0.3-9.6-0.9c6.5,20.4,25.5,35.2,47.9,35.6c-17.6,13.8-39.7,22-63.7,22c-4.1,0-8.2-0.2-12.2-0.7 C97.7,293.1,124.7,301.6,153.6,301.6'/%3E %3C/g%3E %3C/svg%3E");
}

.snsPopBox .snsBtnList li a .line {
	background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8' standalone='no'?%3E %3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 299.99998 300.00833' height='300.00833' width='300' xml:space='preserve' version='1.1' id='svg7898'%3E%3Cmetadata id='metadata7904'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3Cdc:title%3E%3C/dc:title%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cdefs id='defs7902'%3E%3CclipPath id='clipPath7932' clipPathUnits='userSpaceOnUse'%3E%3Cpath id='path7934' d='m 0,595.28 841.89,0 L 841.89,0 0,0 0,595.28 Z' /%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='matrix(1.25,0,0,-1.25,-424.5206,605.65166)' id='g7906'%3E%3Cg id='g7928'%3E%3Cg clip-path='url(%23clipPath7932)' id='g7930'%3E%3Cg transform='matrix(1.6639441,0,0,1.6639441,535.69699,483.72129)' id='g7958'%3E%3Cpath id='path7960' style='fill:%2300b900;fill-opacity:1;fill-rule:nonzero;stroke:none' d='m 0,0 -91.246,0 c -14.327,0.019 -26.093,-11.583 -26.114,-25.914 l 0,-91.246 c -0.018,-14.332 11.585,-26.099 25.914,-26.118 l 91.247,0 c 14.33,-0.018 26.091,11.583 26.113,25.917 l 0,91.247 C 25.934,-11.782 14.333,-0.02 0,0' /%3E%3C/g%3E%3Cg transform='matrix(1.6639441,0,0,1.6639441,546.02809,375.00068)' id='g7962'%3E%3Cpath id='path7964' style='fill:%23ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none' d='m 0,0 c 0,23.342 -23.4,42.332 -52.165,42.332 -28.761,0 -52.164,-18.99 -52.164,-42.332 0,-20.926 18.558,-38.451 43.626,-41.765 1.699,-0.366 4.011,-1.12 4.596,-2.572 0.526,-1.319 0.344,-3.385 0.168,-4.717 0,0 -0.612,-3.681 -0.744,-4.465 -0.227,-1.319 -1.048,-5.158 4.518,-2.812 5.568,2.346 30.042,17.689 40.986,30.286 l -0.002,0 C -3.621,-17.755 0,-9.342 0,0' /%3E%3C/g%3E%3Cg transform='matrix(1.6639441,0,0,1.6639441,441.5933,393.76931)' id='g7966'%3E%3Cpath id='path7968' style='fill:%2300b900;fill-opacity:1;fill-rule:nonzero;stroke:none' d='M 0,0 -3.659,0 C -4.22,0 -4.676,-0.455 -4.676,-1.014 l 0,-22.73 c 0,-0.56 0.456,-1.014 1.017,-1.014 l 3.659,0 c 0.561,0 1.016,0.454 1.016,1.014 l 0,22.73 C 1.016,-0.455 0.561,0 0,0' /%3E%3C/g%3E%3Cg transform='matrix(1.6639441,0,0,1.6639441,483.49956,393.76931)' id='g7970'%3E%3Cpath id='path7972' style='fill:%2300b900;fill-opacity:1;fill-rule:nonzero;stroke:none' d='M 0,0 -3.659,0 C -4.22,0 -4.675,-0.455 -4.675,-1.014 l 0,-13.504 -10.416,14.067 c -0.024,0.036 -0.051,0.07 -0.079,0.103 l -0.007,0.006 c -0.02,0.023 -0.04,0.043 -0.061,0.063 -0.006,0.006 -0.012,0.011 -0.019,0.017 -0.017,0.016 -0.035,0.031 -0.054,0.045 -0.008,0.008 -0.017,0.014 -0.026,0.021 -0.018,0.012 -0.035,0.025 -0.053,0.036 -0.01,0.007 -0.02,0.013 -0.031,0.018 -0.018,0.011 -0.036,0.022 -0.054,0.031 -0.011,0.005 -0.021,0.011 -0.032,0.015 -0.019,0.009 -0.038,0.018 -0.058,0.025 -0.012,0.004 -0.022,0.008 -0.033,0.012 -0.02,0.007 -0.04,0.014 -0.061,0.019 -0.011,0.004 -0.023,0.006 -0.035,0.01 -0.02,0.004 -0.039,0.009 -0.058,0.013 -0.014,0.002 -0.029,0.004 -0.043,0.005 -0.018,0.004 -0.036,0.005 -0.054,0.007 -0.017,0.002 -0.034,0.002 -0.052,0.003 -0.013,0 -0.023,0.002 -0.036,0.002 l -3.658,0 c -0.561,0 -1.017,-0.455 -1.017,-1.014 l 0,-22.73 c 0,-0.56 0.456,-1.014 1.017,-1.014 l 3.658,0 c 0.562,0 1.017,0.454 1.017,1.014 l 0,13.5 10.429,-14.085 c 0.072,-0.102 0.161,-0.185 0.258,-0.251 0.003,-0.002 0.007,-0.005 0.01,-0.008 0.021,-0.013 0.042,-0.026 0.063,-0.038 0.01,-0.006 0.019,-0.01 0.029,-0.015 0.015,-0.009 0.032,-0.017 0.048,-0.024 0.017,-0.007 0.032,-0.014 0.05,-0.021 0.01,-0.004 0.02,-0.008 0.03,-0.011 0.024,-0.009 0.046,-0.016 0.069,-0.023 0.005,0 0.01,-0.002 0.015,-0.003 0.083,-0.022 0.17,-0.035 0.26,-0.035 l 3.659,0 c 0.562,0 1.016,0.454 1.016,1.014 l 0,22.73 C 1.016,-0.455 0.562,0 0,0' /%3E%3C/g%3E%3Cg transform='matrix(1.6639441,0,0,1.6639441,426.91715,362.04388)' id='g7974'%3E%3Cpath id='path7976' style='fill:%2300b900;fill-opacity:1;fill-rule:nonzero;stroke:none' d='m 0,0 -9.942,0 0,18.051 c 0,0.561 -0.455,1.016 -1.015,1.016 l -3.66,0 c -0.561,0 -1.016,-0.455 -1.016,-1.016 l 0,-22.726 0,-0.002 c 0,-0.273 0.109,-0.52 0.284,-0.702 0.004,-0.005 0.008,-0.01 0.014,-0.015 0.005,-0.005 0.01,-0.009 0.015,-0.014 0.183,-0.176 0.429,-0.284 0.702,-0.284 l 10e-4,0 14.617,0 c 0.561,0 1.014,0.456 1.014,1.017 l 0,3.659 C 1.014,-0.455 0.561,0 0,0' /%3E%3C/g%3E%3Cg transform='matrix(1.6639441,0,0,1.6639441,517.12172,384.29914)' id='g7978'%3E%3Cpath id='path7980' style='fill:%2300b900;fill-opacity:1;fill-rule:nonzero;stroke:none' d='m 0,0 c 0.561,0 1.014,0.454 1.014,1.016 l 0,3.659 C 1.014,5.236 0.561,5.692 0,5.692 l -14.617,0 -0.002,0 c -0.274,0 -0.521,-0.11 -0.704,-0.287 -0.004,-0.004 -0.009,-0.007 -0.012,-0.011 -0.006,-0.006 -0.011,-0.012 -0.016,-0.018 -0.174,-0.182 -0.282,-0.428 -0.282,-0.7 l 0,-0.001 0,-22.726 0,-0.001 c 0,-0.273 0.109,-0.52 0.284,-0.702 0.004,-0.005 0.009,-0.011 0.014,-0.015 0.004,-0.005 0.01,-0.01 0.015,-0.014 0.182,-0.175 0.429,-0.284 0.701,-0.284 l 0.002,0 14.617,0 c 0.561,0 1.014,0.456 1.014,1.016 l 0,3.66 c 0,0.56 -0.453,1.016 -1.014,1.016 l -9.941,0 0,3.842 9.941,0 c 0.561,0 1.014,0.455 1.014,1.016 l 0,3.659 c 0,0.561 -0.453,1.017 -1.014,1.017 l -9.941,0 0,3.841 L 0,0 Z' /%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

@media screen and (min-width: 769px) {
	.snsPopBox .snsBtnList li a:hover, .snsPopBox .snsBtnList li.pinterest:hover {
		background: #ccc;
	}
}

#main_top .list_content {
	padding-top: 80px;
}

@media (max-width: 768px) {
	#main_top .list_content {
		padding-top: 40px;
	}
}

.top_banner {
	max-width: 800px;
	margin: 30px auto 60px;
}

.top_banner a {
	transition: 0.2s;
}

.top_banner a:hover {
	opacity: 0.8;
}

@media screen and (min-width: 768px) {
	.PC {
		display: block;
	}
	.SP {
		display: none;
	}
}

@media screen and (max-width: 768px) {
	.PC {
		display: none;
	}
	.SP {
		display: block;
	}
}

.timeWrapInner {
	display: flex;
	border: 1px solid #7f7e7f;
}

.timeLabel {
	background: #7f7e7f;
	color: #fff;
	padding: 3px 0 3px 3px;
	position: relative;
}

.timeLabel::after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 12.5px 0 12.5px 8px;
	border-color: transparent transparent transparent #7e7e7e;
	position: absolute;
	right: -8px;
	top: 0;
}

.timeWrap .txt {
	padding: 3px 3px 3px 10px;
}

/*--220325--*/
#navi_wrap .icn_insta a figure {
	width: 33px;
	height: 33px;
}

#navi_wrap .icn_insta a::after {
	display: none !important;
}

@media screen and (max-width: 768px) {
	#navi_wrap ul {
		align-items: center;
		width: auto;
	}
	#navi_wrap .nav_content {
		display: block;
		height: auto;
	}
	#navi_wrap h2 {
		margin-right: auto;
		margin-left: auto;
		padding: 20px 0 0;
		width: 95px;
	}
	#navi_wrap li a {
		padding: 15px 10px;
	}
}

/*------------------------------------------------------------
	comSearchBox
------------------------------------------------------------*/
.comSearchBox {
	background-color: #c6bea2;
}

@media only screen and (min-width: 769px) {
	.comSearchBox {
		margin-bottom: 140px;
		padding: 70px 0;
	}
}

@media only screen and (max-width: 768px) {
	.comSearchBox {
		margin-bottom: 13.33333vw;
		padding: 10.66667vw 0;
	}
}

.comSearchBox * {
	box-sizing: border-box;
}

.comSearchBox .search_condition {
	position: absolute;
	width: 100%;
	background-color: #c6bea2;
	z-index: 9999;
}

@media only screen and (min-width: 769px) {
	.comSearchBox .search_condition__products {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 1080px;
		margin: 70px auto auto;
		padding-bottom: 50px;
	}
}

@media only screen and (max-width: 768px) {
	.comSearchBox .search_condition__products {
		width: 92vw;
		margin: 10.66667vw auto auto;
		padding-bottom: 6.66667vw;
	}
}

.comSearchBox .search_condition__products-title {
	font-weight: 700;
	display: flex;
	align-items: center;
}

@media only screen and (min-width: 769px) {
	.comSearchBox .search_condition__products-title {
		font-size: 18px;
		column-gap: 12px;
	}
}

@media only screen and (max-width: 768px) {
	.comSearchBox .search_condition__products-title {
		font-size: 4vw;
		column-gap: 1.6vw;
	}
}

.comSearchBox .search_condition__products-title--courses {
	background-color: #c6bea2;
	position: absolute;
}

@media only screen and (min-width: 769px) {
	.comSearchBox .search_condition__products-title--courses {
		top: -0.5em;
		padding-right: 0.5em;
	}
}

@media only screen and (max-width: 768px) {
	.comSearchBox .search_condition__products-title--courses {
		top: -0.6em;
		padding-right: 0.5em;
	}
}

.comSearchBox .search_condition__products-title .required {
	font-weight: 500;
	line-height: 1em;
	background-color: #333333;
	color: #fff;
}

@media only screen and (min-width: 769px) {
	.comSearchBox .search_condition__products-title .required {
		font-size: 12px;
		border-radius: 6px;
		padding: 3px;
	}
}

@media only screen and (max-width: 768px) {
	.comSearchBox .search_condition__products-title .required {
		font-size: 2.66667vw;
		border-radius: 0.66667vw;
		padding: 0.66667vw;
	}
}

@media only screen and (min-width: 769px) {
	.comSearchBox .search_condition__products-types, .comSearchBox .search_condition__products-models {
		font-size: 15px;
		flex: 0 0 524px;
	}
}

@media only screen and (max-width: 768px) {
	.comSearchBox .search_condition__products-types, .comSearchBox .search_condition__products-models {
		font-size: 3.46667vw;
		width: 100%;
	}
}

.comSearchBox .search_condition__products-types-list, .comSearchBox .search_condition__products-models-list {
	color: #333;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("../img/icon_arrow_down.svg");
	background-repeat: no-repeat;
	background-color: #fff;
	width: 100%;
	padding: 0.5em 1em;
	border: 0;
}

@media only screen and (min-width: 769px) {
	.comSearchBox .search_condition__products-types-list, .comSearchBox .search_condition__products-models-list {
		height: 50px;
		margin-top: 15px;
		background-size: 18px 14px;
		background-position: right 21px center;
		border-radius: 5px;
	}
}

@media only screen and (max-width: 768px) {
	.comSearchBox .search_condition__products-types-list, .comSearchBox .search_condition__products-models-list {
		height: 9.33333vw;
		margin-top: 2.66667vw;
		background-size: 3.33333vw 2.26667vw;
		background-position: right 2.93333vw center;
		border-radius: 1.33333vw;
	}
}

.comSearchBox .search_condition__products-types-list:disabled, .comSearchBox .search_condition__products-models-list:disabled {
	color: #b2b2b2;
	background-image: url("../img/icon_arrow_down_disabled.svg");
	background-color: #e6e6e6;
}

@media only screen and (max-width: 768px) {
	.comSearchBox .search_condition__products-models {
		margin-top: 5.33333vw;
	}
}

.comSearchBox .search_condition__products-courses {
	position: relative;
	border: solid #333;
}

@media only screen and (min-width: 769px) {
	.comSearchBox .search_condition__products-courses {
		flex: 0 0 100%;
		margin-top: 56px;
		padding: 40px 0;
		border-width: 1px 0;
	}
}

@media only screen and (max-width: 768px) {
	.comSearchBox .search_condition__products-courses {
		margin-top: 13.33333vw;
		padding: 8vw 0;
		border-width: 0.26667vw 0;
	}
}

.comSearchBox .search_condition__products-courses-list {
	display: flex;
	flex-wrap: wrap;
}

@media only screen and (min-width: 769px) {
	.comSearchBox .search_condition__products-courses-list {
		gap: 24px 40px;
	}
}

@media only screen and (max-width: 768px) {
	.comSearchBox .search_condition__products-courses-list {
		flex-wrap: wrap;
		row-gap: 5.33333vw;
	}
}

.comSearchBox .search_condition__products-courses-item {
	display: inline-flex;
	align-items: center;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
}

@media only screen and (min-width: 769px) {
	.comSearchBox .search_condition__products-courses-item {
		font-size: 15px;
		column-gap: 8px;
	}
}

@media only screen and (max-width: 768px) {
	.comSearchBox .search_condition__products-courses-item {
		font-size: 3.46667vw;
		column-gap: 1.86667vw;
		flex: 0 0 34.66667vw;
	}
}

@media only screen and (max-width: 768px) {
	.comSearchBox .search_condition__products-courses-item:nth-child(3n) {
		flex: 0 0 22vw;
	}
}

.comSearchBox .search_condition__products-courses-item .if-checked {
	background-color: #fff;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center;
}

@media only screen and (min-width: 769px) {
	.comSearchBox .search_condition__products-courses-item .if-checked {
		width: 25px;
		height: 25px;
		border-radius: 5px;
		background-size: 21px 17px;
	}
}

@media only screen and (max-width: 768px) {
	.comSearchBox .search_condition__products-courses-item .if-checked {
		width: 5.33333vw;
		height: 5.33333vw;
		border-radius: 1.33333vw;
		background-size: 4.26667vw 3.2vw;
	}
}

.comSearchBox .search_condition__products-courses-item input[type=checkbox] {
	display: none;
}

.comSearchBox .search_condition__products-courses-item input[type=checkbox]:checked + .if-checked {
	background-image: url("../img/icon-checked.svg");
}

.comSearchBox .search_condition__products-packlink {
	text-align: center;
	margin: 20px auto;
	font-size: 18px;
	font-weight: bold;
}

.comSearchBox .search_condition__products-packlink a {
	color: #333;
	text-decoration: underline !important;
}

.comSearchBox .search_condition__ingredients {
	background-color: #333;
	width: 100%;
}

@media only screen and (min-width: 769px) {
	.comSearchBox .search_condition__ingredients {
		padding: 50px 0 60px;
	}
}

@media only screen and (max-width: 768px) {
	.comSearchBox .search_condition__ingredients {
		padding: 6.66667vw 0 8vw;
	}
}

.comSearchBox .search_condition__ingredients-list {
	display: flex;
	flex-wrap: wrap;
}

@media only screen and (min-width: 769px) {
	.comSearchBox .search_condition__ingredients-list {
		gap: 15px 20px;
		width: 1080px;
		margin: 30px auto auto;
	}
}

@media only screen and (max-width: 768px) {
	.comSearchBox .search_condition__ingredients-list {
		gap: 8vw 6vw;
		width: 92vw;
		margin: 6.66667vw auto auto;
	}
}

.comSearchBox .search_condition__ingredients-item {
	display: inline-block;
	cursor: pointer;
}

@media only screen and (min-width: 769px) {
	.comSearchBox .search_condition__ingredients-item {
		flex: 0 0 200px;
		height: 50px;
	}
}

@media only screen and (max-width: 768px) {
	.comSearchBox .search_condition__ingredients-item {
		flex: 0 0 26.66667vw;
		height: 9.33333vw;
	}
}

@media only screen and (min-width: 769px) {
	.comSearchBox .search_condition__ingredients-item:hover span {
		background-color: #c4bea1;
	}
}

.comSearchBox .search_condition__ingredients-item input {
	display: none;
}

.comSearchBox .search_condition__ingredients-item input:checked + span {
	background-color: #c4bea1;
}

.comSearchBox .search_condition__ingredients-item span {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #eae7de;
	height: 100%;
	width: 100%;
	line-height: 1;
}

@media only screen and (min-width: 769px) {
	.comSearchBox .search_condition__ingredients-item span {
		border-radius: 6px;
	}
}

@media only screen and (max-width: 768px) {
	.comSearchBox .search_condition__ingredients-item span {
		border-radius: 1.33333vw;
	}
}

.comSearchBox .search_condition__ingredients input[type="text"] {
	display: block;
	margin: auto;
	box-sizing: border-box;
	border: none;
	background-color: #eae8de;
	background-image: url("../img/icon_search_gold.svg");
	background-repeat: no-repeat;
	border-radius: 9999px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: 0;
	font-weight: 500;
}

@media only screen and (min-width: 769px) {
	.comSearchBox .search_condition__ingredients input[type="text"] {
		padding-left: 56px;
		width: 450px;
		height: 50px;
		font-size: 15px;
		background-size: 22px 21px;
		background-position: 22px center;
	}
}

@media only screen and (max-width: 768px) {
	.comSearchBox .search_condition__ingredients input[type="text"] {
		padding-left: 10vw;
		width: 81.33333vw;
		height: 10.66667vw;
		font-size: 3.46667vw;
		background-size: 4.4vw;
		background-position: 4vw center;
	}
}

.comSearchBox .search_condition__ingredients input[type="text"]:disabled {
	background-color: #c3c3c3;
	color: #999;
	background-image: url("../img/icon_search_disabled.svg");
}

.comSearchBox .round-button {
	letter-spacing: 0.1em;
	margin: auto;
	font-weight: 500;
	border-radius: 9999px;
	display: block;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

@media only screen and (min-width: 769px) {
	.comSearchBox .round-button {
		font-size: 16px;
		width: 450px;
		height: 56px;
	}
}

@media only screen and (max-width: 768px) {
	.comSearchBox .round-button {
		font-size: 4vw;
		width: 81.33333vw;
		height: 12.53333vw;
	}
}

.comSearchBox .round-button span {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	z-index: 10;
}

.comSearchBox .round-button.open_search_condition {
	color: #fff;
	background-color: #333333;
}

.comSearchBox .round-button.open_search_condition span {
	background-repeat: no-repeat;
	background-image: url("../img/icon_search_white.svg");
}

@media only screen and (min-width: 769px) {
	.comSearchBox .round-button.open_search_condition span {
		background-size: 22px;
		background-position: 140px center;
	}
}

@media only screen and (max-width: 768px) {
	.comSearchBox .round-button.open_search_condition span {
		background-size: 4.4vw;
		background-position: 20vw center;
	}
}

.comSearchBox .round-button.ingredients_btn {
	background-color: #9f8f61;
	color: #fff;
}

@media only screen and (min-width: 769px) {
	.comSearchBox .round-button.ingredients_btn {
		margin-top: 30px;
	}
}

@media only screen and (max-width: 768px) {
	.comSearchBox .round-button.ingredients_btn {
		margin-top: 6.66667vw;
	}
}

.comSearchBox .round-button.ingredients_btn span::before,
.comSearchBox .round-button.ingredients_btn span::after {
	content: '';
	display: block;
	position: absolute;
	background-color: #fff;
	display: block;
	top: 50%;
	bottom: 50%;
}

@media only screen and (min-width: 769px) {
	.comSearchBox .round-button.ingredients_btn span::before,
	.comSearchBox .round-button.ingredients_btn span::after {
		width: 17px;
		height: 3px;
		right: 22px;
	}
}

@media only screen and (max-width: 768px) {
	.comSearchBox .round-button.ingredients_btn span::before,
	.comSearchBox .round-button.ingredients_btn span::after {
		width: 4vw;
		height: 0.8vw;
		right: 4.53333vw;
	}
}

.comSearchBox .round-button.ingredients_btn span::after {
	transform: rotate(90deg);
}

.comSearchBox .round-button.ingredients_btn.disabled {
	background-color: #c3c3c3;
	color: #999;
	pointer-events: none;
}

.comSearchBox .round-button.ingredients_btn.disabled::before, .comSearchBox .round-button.ingredients_btn.disabled::after {
	background-color: #999;
}

.comSearchBox .round-button.ingredients_btn.is-opened span::after {
	transform: rotate(0deg);
}

.comSearchBox .round-button.search_button {
	color: #fff;
	background-color: #9f8f61;
}

@media only screen and (min-width: 769px) {
	.comSearchBox .round-button.search_button {
		width: 334px;
		margin-top: 60px;
	}
}

@media only screen and (max-width: 768px) {
	.comSearchBox .round-button.search_button {
		width: 48vw;
		margin-top: 10.66667vw;
	}
}

.comSearchBox .round-button.search_button.disabled {
	background-color: #c3c3c3;
	color: #999;
}

@media only screen and (min-width: 769px) {
	.comSearchBox .round-button.has-hover::before {
		content: '';
		width: 0;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		border-radius: 50px;
		background: #b3a783;
		transition: width 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
		overflow: hidden;
		z-index: 0;
	}
}

.comSearchBox .round-button.has-hover:hover::before {
	width: 100%;
	right: auto;
	left: 0;
}

/*# sourceMappingURL=../../../../_map/syohin/stan/recipe/css/style.css.map */
