@charset "UTF-8";
.sec-top img {
	width: 100%;
	height: auto;
}
.sec-top .inner {
	width: 100%;
	margin: 0 auto;
}
@media only screen and (min-width: 768px) {
	.sec-top .inner {
		max-width: 680px;
		padding-top: 70px;
	}
}
@media only screen and (max-width: 767px) {
	.sec-top .inner {
		padding: 9.1264667536vw 4.5632333768vw 0;
	}
}
.sec-top .inner > .title {
	opacity: 0;
	transition: opacity 0.6s cubic-bezier(0, 0, 0.25, 1);
}
.sec-top .inner > .title.in {
	opacity: 1;
	transition-delay: 0s;
}
.sec-top .step-label,
.sec-top .txt,
.sec-top .point,
.sec-top .riten,
.sec-top .qa {
	font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "HGS明朝E", "メイリオ", Meiryo, serif;
}
@media only screen and (min-width: 768px) {
	.sec-top .recipe-wrap {
		display: flex;
		justify-content: space-between;
		margin-top: 78px;
		margin-bottom: 48px;
	}
}
@media only screen and (max-width: 767px) {
	.sec-top .recipe-wrap {
		margin-top: 9.3872229465vw;
		margin-bottom: 7.8226857888vw;
	}
}
.sec-top .recipe-wrap .item {
	opacity: 0;
	transform: translateY(5%);
	transition: opacity 0.6s cubic-bezier(0, 0, 0.25, 1) 0.4s, transform 0.6s cubic-bezier(0.46, 0.05, 0.5, 1.45) 0.4s;
}
@media only screen and (min-width: 768px) {
	.sec-top .recipe-wrap .item {
		width: 44.1176470588%;
		padding: 0 2.2058823529%;
	}
}
@media only screen and (max-width: 767px) {
	.sec-top .recipe-wrap .item {
		padding: 0 5.2151238592vw;
	}
	.sec-top .recipe-wrap .item + .item {
		margin-top: 9.1264667536vw;
	}
}
.sec-top .recipe-wrap .item.in {
	opacity: 1;
	transform: translate(0, 0);
}
.sec-top .recipe-wrap .title {
	font-size: 21px;
	font-weight: bold;
	position: relative;
	margin-bottom: 45px;
}
@media only screen and (max-width: 767px) {
	.sec-top .recipe-wrap .title {
		font-size: 6.258148631vw;
		text-align: center;
		margin-bottom: 5.8670143416vw;
	}
}
.sec-top .recipe-wrap .title:after {
	content: "";
	display: block;
	width: 100%;
	height: 4px;
	background: #917000;
	background: -moz-linear-gradient(left, #917000 0%, #a28d30 100%);
	background: -webkit-linear-gradient(left, #917000 0%, #a28d30 100%);
	background: linear-gradient(to right, #917000 0%, #a28d30 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#917000", endColorstr="#a28d30",GradientType=1 );
	position: absolute;
	left: 0;
	bottom: 0;
}
@media only screen and (max-width: 767px) {
	.sec-top .recipe-wrap .title:after {
		height: 2px;
	}
}
.sec-top .recipe-wrap .txt {
	font-size: 13px;
	font-weight: bold;
	margin-top: 10px;
}
@media only screen and (max-width: 767px) {
	.sec-top .recipe-wrap .txt {
		font-size: 3.1290743155vw;
		margin-top: 1.3037809648vw;
	}
}
@media only screen and (max-width: 767px) {
	.sec-top .step {
		padding: 0 7.8226857888vw;
	}
}
.sec-top .step + .step {
	margin-top: 45px;
}
@media only screen and (max-width: 767px) {
	.sec-top .step + .step {
		margin-top: 6.518904824vw;
	}
}
.sec-top .step .step-label {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 0.5em;
}
@media only screen and (max-width: 767px) {
	.sec-top .step .step-label {
		font-size: 4.3024771838vw;
	}
}
.sec-top .other {
	background: url(../img/recipe/icon-other.png) 50% 0 no-repeat;
	background-size: 34.7058823529% auto;
	font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "HGS明朝E", "メイリオ", Meiryo, serif;
	text-align: center;
	line-height: 1.6;
	padding-top: 3em;
	padding-bottom: 5em;
}
@media only screen and (max-width: 767px) {
	.sec-top .other {
		background-size: 40% auto;
		padding-top: 2em;
		padding-bottom: 3em;
	}
}
.sec-top .other .label {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 0.2em;
}
@media only screen and (max-width: 767px) {
	.sec-top .other .label {
		font-size: 4.4328552803vw;
	}
}
.sec-top .other li {
	font-size: 20px;
	font-weight: bold;
}
@media only screen and (max-width: 767px) {
	.sec-top .other li {
		font-size: 3.6505867014vw;
		white-space: nowrap;
	}
}
.sec-top .point {
	padding: 30px 0;
	position: relative;
	display: flex;
	align-items: center;
	flex-direction: column;
	opacity: 0;
	transform: translateY(5%);
	transition: opacity 0.6s cubic-bezier(0, 0, 0.25, 1) 0.4s, transform 0.6s cubic-bezier(0.46, 0.05, 0.5, 1.45) 0.4s;
}
@media only screen and (max-width: 767px) {
	.sec-top .point {
		padding: 5.2151238592vw 0 4.6936114733vw;
	}
}
.sec-top .point.in {
	opacity: 1;
	transform: translate(0, 0);
}
.sec-top .point:before, .sec-top .point:after {
	content: "";
	display: block;
	width: 100%;
	height: 4px;
	background: #917000;
	background: -moz-linear-gradient(left, #917000 0%, #a28d30 100%);
	background: -webkit-linear-gradient(left, #917000 0%, #a28d30 100%);
	background: linear-gradient(to right, #917000 0%, #a28d30 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#917000", endColorstr="#a28d30",GradientType=1 );
	position: absolute;
	left: 0;
}
.sec-top .point:before {
	top: 0;
}
.sec-top .point:after {
	bottom: 0;
}
.sec-top .point .label {
	font-size: 24px;
	font-weight: bold;
	letter-spacing: 0.06em;
	margin-bottom: 0.3em;
}
@media only screen and (max-width: 767px) {
	.sec-top .point .label {
		font-size: 3.9113428944vw;
		letter-spacing: 0.03em;
	}
}
.sec-top .point p {
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 0.06em;
}
@media only screen and (max-width: 767px) {
	.sec-top .point p {
		font-size: 3.3898305085vw;
		letter-spacing: 0.03em;
	}
}
.sec-top .point p span {
	background: #917000;
	background: -moz-linear-gradient(left, #917000 0%, #a28d30 100%);
	background: -webkit-linear-gradient(left, #917000 0%, #a28d30 100%);
	background: linear-gradient(to right, #917000 0%, #a28d30 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#917000", endColorstr="#a28d30",GradientType=1 );
	color: #fff;
}
.sec-top .riten {
	position: relative;
	border-left: 4px solid #917000;
	border-right: 4px solid #a28d30;
	padding: 10px 6px;
	margin-top: 7em;
	opacity: 0;
	transform: translateY(5%);
	transition: opacity 0.6s cubic-bezier(0, 0, 0.25, 1) 0.4s, transform 0.6s cubic-bezier(0.46, 0.05, 0.5, 1.45) 0.4s;
}
@media only screen and (max-width: 767px) {
	.sec-top .riten {
		border-width: 2px;
		padding: 7px 5px;
		margin-top: 3em;
	}
}
.sec-top .riten.in {
	opacity: 1;
	transform: translate(0, 0);
}
.sec-top .riten:before, .sec-top .riten:after {
	content: "";
	display: block;
	width: 100%;
	height: 4px;
	background: #917000;
	background: -moz-linear-gradient(left, #917000 0%, #a28d30 100%);
	background: -webkit-linear-gradient(left, #917000 0%, #a28d30 100%);
	background: linear-gradient(to right, #917000 0%, #a28d30 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#917000", endColorstr="#a28d30",GradientType=1 );
	position: absolute;
	left: 0;
}
@media only screen and (max-width: 767px) {
	.sec-top .riten:before, .sec-top .riten:after {
		height: 2px;
	}
}
.sec-top .riten:before {
	top: 0;
}
.sec-top .riten:after {
	bottom: 0;
}
.sec-top .riten .riten-wrap {
	position: relative;
	border-left: 2px solid #917000;
	border-right: 2px solid #a28d30;
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 18% 0 7%;
}
@media only screen and (max-width: 767px) {
	.sec-top .riten .riten-wrap {
		padding: 19.556714472vw 0 7.8226857888vw;
		border-width: 1px;
	}
}
.sec-top .riten .riten-wrap:before, .sec-top .riten .riten-wrap:after {
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background: #917000;
	background: -moz-linear-gradient(left, #917000 0%, #a28d30 100%);
	background: -webkit-linear-gradient(left, #917000 0%, #a28d30 100%);
	background: linear-gradient(to right, #917000 0%, #a28d30 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#917000", endColorstr="#a28d30",GradientType=1 );
	position: absolute;
	left: 0;
}
@media only screen and (max-width: 767px) {
	.sec-top .riten .riten-wrap:before, .sec-top .riten .riten-wrap:after {
		height: 1px;
	}
}
.sec-top .riten .riten-wrap:before {
	top: 0;
}
.sec-top .riten .riten-wrap:after {
	bottom: 0;
}
.sec-top .riten .label {
	position: absolute;
	left: -16px;
	top: -42px;
	width: 59.3939393939%;
}
@media only screen and (max-width: 767px) {
	.sec-top .riten .label {
		width: 65.4498044329vw;
		left: 50%;
		transform: translateX(-50%);
		top: -6%;
	}
}
.sec-top .riten .label img {
	width: 100%;
}
.sec-top .riten .list {
	width: 71.2121212121%;
	margin-left: auto;
	margin-right: auto;
}
@media only screen and (max-width: 767px) {
	.sec-top .riten .list {
		width: 76.0104302477vw;
	}
}
.sec-top .riten .list li + li {
	margin-top: 1.5em;
}
.sec-top .riten .list li:nth-child(1) {
	width: 86.170212766%;
}
.sec-top .riten .list li:nth-child(2) {
	width: 85.1063829787%;
}
.sec-top .riten .list li:nth-child(3) {
	width: 82.9787234043%;
}
.sec-top .riten .list li:nth-child(4) {
	width: 100%;
}
.sec-top .qa {
	max-width: 740px;
	width: 100%;
	margin: 64px auto 0;
	padding-bottom: 96px;
	opacity: 0;
	transform: translateY(5%);
	transition: opacity 0.6s cubic-bezier(0, 0, 0.25, 1) 0.4s, transform 0.6s cubic-bezier(0.46, 0.05, 0.5, 1.45) 0.4s;
}
@media only screen and (max-width: 767px) {
	.sec-top .qa {
		margin: 8.2138200782vw auto 0;
		padding: 0 5.2151238592vw 12.5162972621vw;
	}
}
.sec-top .qa.in {
	opacity: 1;
	transform: translate(0, 0);
}
.sec-top .qa .qa-head,
.sec-top .qa .qa-body {
	font-size: 23px;
	font-weight: bold;
}
@media only screen and (max-width: 767px) {
	.sec-top .qa .qa-head,
.sec-top .qa .qa-body {
		font-size: 3.6505867014vw;
	}
}
.sec-top .qa .qa-head .qa-inner,
.sec-top .qa .qa-body .qa-inner {
	display: flex;
	align-items: flex-start;
	padding: 20px;
}
@media only screen and (max-width: 767px) {
	.sec-top .qa .qa-head .qa-inner,
.sec-top .qa .qa-body .qa-inner {
		padding: 3.9113428944vw;
	}
}
.sec-top .qa .qa-head .qa-inner:before,
.sec-top .qa .qa-body .qa-inner:before {
	content: "";
	display: block;
	width: 40px;
	height: 40px;
	margin-right: 10px;
	background-size: contain;
	background-position: 0 0;
	background-repeat: no-repeat;
}
@media only screen and (max-width: 767px) {
	.sec-top .qa .qa-head .qa-inner:before,
.sec-top .qa .qa-body .qa-inner:before {
		width: 7.8226857888vw;
		height: 7.8226857888vw;
		margin-right: 2.6075619296vw;
	}
}
.sec-top .qa .qa-head .qa-titl,
.sec-top .qa .qa-body .qa-titl {
	flex: 1;
	width: calc(100% - 60px);
}
.sec-top .qa .qa-head {
	border: 2px solid #1A1311;
	margin-bottom: -2px;
	padding-right: 40px;
	position: relative;
	z-index: 1;
	cursor: pointer;
}
@media only screen and (max-width: 767px) {
	.sec-top .qa .qa-head {
		padding-right: 3.9113428944vw;
	}
}
.sec-top .qa .qa-head .qa-inner:before {
	background-image: url(../img/recipe/reitou-recipe-icon-q.png);
}
.sec-top .qa .qa-head:before, .sec-top .qa .qa-head:after {
	content: "";
	display: block;
	width: 24px;
	height: 4px;
	background-color: #1A1311;
	position: absolute;
	right: 18px;
	top: calc(50% - 2px);
}
@media only screen and (max-width: 767px) {
	.sec-top .qa .qa-head:before, .sec-top .qa .qa-head:after {
		width: 5.2151238592vw;
		height: 2px;
		right: 2.6075619296vw;
		top: calc(50% - 1px);
	}
}
.sec-top .qa .qa-head:after {
	transform: rotate(90deg);
	transition: transform 0.3s, opacity 0.3s;
}
.sec-top .qa .qa-head.is-open:after {
	opacity: 0;
	transform: rotate(0);
}
.sec-top .qa .qa-body {
	display: none;
	border: 2px solid #795A39;
	position: relative;
	z-index: 2;
}
.sec-top .qa .qa-body .qa-inner {
	flex-wrap: wrap;
}
.sec-top .qa .qa-body .qa-inner:before {
	background-image: url(../img/recipe/reitou-recipe-icon-a.png);
}
.sec-top .qa .qa-body .qa-titl {
	color: #8a6e4b;
}
.sec-top .qa-note {
	width: 100%;
	font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "HGS明朝E", "メイリオ", Meiryo, serif;
	font-size: 16px;
	font-weight: bold;
	margin-top: 1.2em;
}
@media only screen and (max-width: 767px) {
	.sec-top .qa-note {
		font-size: 2.8683181226vw;
	}
}

@media only screen and (max-width: 767px) {
	.sec-recipe {
		padding-top: 1px;
	}
}
.sec-recipe .reitou-recipe-label {
	background: #917000;
	background: -moz-linear-gradient(left, #917000 0%, #a28d30 100%);
	background: -webkit-linear-gradient(left, #917000 0%, #a28d30 100%);
	background: linear-gradient(to right, #917000 0%, #a28d30 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#917000", endColorstr="#a28d30",GradientType=1 );
	padding: 24px 0;
	opacity: 0;
	transition: opacity 0.6s cubic-bezier(0, 0, 0.25, 1);
}
@media only screen and (max-width: 767px) {
	.sec-recipe .reitou-recipe-label {
		padding: 4.5632333768vw 0;
	}
}
.sec-recipe .reitou-recipe-label.in {
	opacity: 1;
	transition-delay: 0.6s;
}
.sec-recipe .reitou-recipe-label img {
	width: auto;
	height: 31px;
	margin-left: auto;
	margin-right: auto;
}
@media only screen and (max-width: 767px) {
	.sec-recipe .reitou-recipe-label img {
		height: 3.9113428944vw;
	}
}
.sec-recipe .link-list li {
	opacity: 0;
	transition: opacity 0.6s cubic-bezier(0, 0, 0.25, 1);
}
.sec-recipe .link-list li.in {
	opacity: 1;
	transition-delay: 0.6s;
}
.sec-recipe .link-list li:nth-child(1) .txt, .sec-recipe .link-list li:nth-child(2) .txt {
	left: 5%;
}
@media only screen and (max-width: 767px) {
	.sec-recipe .link-list li:nth-child(1) .txt, .sec-recipe .link-list li:nth-child(2) .txt {
		left: 2.7379400261vw;
	}
}
.sec-recipe .link-list li:nth-child(3) .txt {
	right: 5%;
}
@media only screen and (max-width: 767px) {
	.sec-recipe .link-list li:nth-child(3) .txt {
		right: 2.7379400261vw;
	}
}
.sec-recipe .link-list a {
	display: block;
	position: relative;
	overflow: hidden;
}
.sec-recipe .link-list a:not(.coming-soon):hover .bg {
	transform: scale(1.05);
}
.sec-recipe .link-list a.coming-soon {
	cursor: default;
	position: relative;
}
.sec-recipe .link-list a.coming-soon:before, .sec-recipe .link-list a.coming-soon:after {
	content: "";
	display: block;
	position: absolute;
}
.sec-recipe .link-list a.coming-soon:before {
	width: 40.5%;
	padding-top: 13.5%;
	background: url(../img/recipe/txt-coming.png) 0 0 no-repeat;
	background-size: contain;
	top: 50%;
	left: 50%;
	z-index: 4;
	transform: translate(-50%, -50%);
}
.sec-recipe .link-list a.coming-soon:after {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 3;
	background-color: #000;
	opacity: 0.3;
}
.sec-recipe .link-list .bg {
	position: relative;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: transform 0.6s cubic-bezier(0, 0, 0.25, 1);
}
.sec-recipe .link-list .txt {
	position: absolute;
	z-index: 2;
	bottom: 10%;
}
@media only screen and (max-width: 767px) {
	.sec-recipe .link-list .txt {
		bottom: 3.9113428944vw;
	}
}
.sec-recipe .link-list .txt.txt01 {
	width: 53.6%;
}
.sec-recipe .link-list .txt.txt02 {
	width: 55.1%;
}
.sec-recipe .link-list .txt.txt03 {
	width: 43.4%;
}
.sec-recipe .link-list .txt.txt04 {
	width: 45.8%;
}

.sub-title-wrap {
	background: url(../img/point-bg.png) 0 0 repeat;
	background-size: 2% auto;
	padding: 5% 0;
}
.sub-title-wrap .sub-title {
	width: 58.1%;
	margin: 0 auto;
	opacity: 0;
	transform: translateY(25%);
	transition: opacity 0.6s cubic-bezier(0, 0, 0.25, 1) 0s, transform 0.6s cubic-bezier(0.46, 0.05, 0.5, 1.45) 0s;
}
.sub-title-wrap .sub-title.in {
	opacity: 1;
	transform: translate(0, 0);
}

.recipe-card-wrap {
	display: flex;
	flex-wrap: wrap;
}
.recipe-card-wrap .label {
	position: absolute;
	z-index: 2;
	opacity: 0;
	transition: opacity 0.6s cubic-bezier(0, 0, 0.25, 1);
}
.recipe-card-wrap .label.top {
	top: 2.5em;
}
@media only screen and (max-width: 767px) {
	.recipe-card-wrap .label.top {
		top: 1em;
	}
}
.recipe-card-wrap .label.bottom {
	bottom: 2.5em;
}
@media only screen and (max-width: 767px) {
	.recipe-card-wrap .label.bottom {
		bottom: 1em;
	}
}
.recipe-card-wrap .bg {
	position: relative;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: transform 0.6s cubic-bezier(0, 0, 0.25, 1);
}
.recipe-card-wrap .recipe-card {
	width: 50%;
}
.recipe-card-wrap .recipe-card a {
	position: relative;
	display: block;
	overflow: hidden;
}
.recipe-card-wrap .recipe-card a:hover .bg {
	transform: scale(1.05);
}
.recipe-card-wrap .recipe-card.in .label {
	opacity: 1;
	transition-delay: 0.3s;
}