:root {
	--color-primary: #704f3a;
	--color-primary-rgb: 112,79,58;
	--color-primary-shade: #634633;
	--color-primary-tint: #7e614e;
	--color-secondary: #faea26;
	--color-secondary-rgb: 250,234,38;
	--color-secondary-shade: #dcce21;
	--color-secondary-tint: #fbec3c;
	--color-tertiary: #c22b1d;
	--color-tertiary-rgb: 194,43,29;
	--color-tertiary-shade: #ab261a;
	--color-tertiary-tint: #c84034;
	--color-light: #f2e8d8;
	--color-light-rgb: 242,232,216;
	--color-light-shade: #dcd8d0;
	--color-light-tint: #faf5ec;
	--color-dark: #5a4334;
	--color-dark-rgb: 90,67,52;
	--color-dark-shade: #4f3b2e;
	--color-dark-tint: #6b5648;
}

* {
	zoom: 1;
}

ul, ol, li {
	zoom: normal;
}

.clearfix::after {
	content: "";
	clear: both;
	display: table;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

.spB10 {
	margin-bottom: 10px;
}

.spB20 {
	margin-bottom: 20px;
}

.top_ttl_under {
	margin: 25px 0 40px;
}

.area-body-inner-full {
	width: 100%;
}

.area_inner_noimg {
	width: 980px;
	margin: 0 auto;
	text-align: left;
}

/*----------------------

customize

----------------------*/

.block {
	display: block;
}

.mt20 {
	margin-top: 20px;
}

.mt40 {
	margin-top: 40px;
}

.mb20 {
	margin-bottom: 20px;
}

h2, h3, h4 {
	color: #704f3a;
	color: var(--color-primary);
	line-height: 1.2;
}

li {
	list-style-type: none;
}

a {
	transition: .3s color;
}

a:link {
	color: #c22b1d;
	color: var(--color-tertiary);
}

a:visited {
	color: #7c45a5;
}

a:hover {
	color: #faea26;
	color: var(--color-secondary);
	text-decoration: none;
}

picture {
	display: block;
}

.secondary {
	color: #faea26;
	color: var(--color-secondary);
}

.tertiary {
	color: #c22b1d;
	color: var(--color-tertiary);
}

.fz-240 {
	font-size: 240%;
}

.fz-smaller {
	font-size: smaller;
}

.f-bold {
	font-weight: 700;
}

.t-center {
	text-align: center;
}

a.btn {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	-webkit-align-items: center;
	        align-items: center;
	gap: 10px;
	position: relative;
	width: -webkit-fit-content;
	width:    -moz-fit-content;
	width:         fit-content;
	margin-inline: auto;
	padding: 16px 24px;
	background-color: #c22b1d;
	background-color: var(--color-tertiary);
	border: 3px solid #c22b1d;
	border: 3px solid var(--color-tertiary);
	border-radius: 100vmax;
	color: #fff;
	font-size: 120%;
	font-weight: bold;
	text-align: center;
	transition: .3s background-color, .3s border-color, .3s color;
}

a.btn:before {
	content: "";
}

a.btn::after {
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	border-top: 3px solid currentColor;
	border-right: 3px solid currentColor;
	rotate: 45deg;
	transition: .3s -webkit-transform;
	transition: .3s transform;
	transition: .3s transform, .3s -webkit-transform;
}

main {
	background: radial-gradient(at 15% 20%, #fff9f0 0px, transparent 50%), radial-gradient(at 85% 15%, #f6dfc2 0px, transparent 50%), radial-gradient(at 75% 75%, #efd7b7 0px, transparent 50%), radial-gradient(at 20% 80%, #f8eedf 0px, transparent 50%), radial-gradient(at 50% 50%, #f2e8d8 0px, #f2e8d8 100%);
}

.contents {
	width: max(100%, 1000px);
	color: #5a4334;
	color: var(--color-dark);
	font-family: "Kosugi Maru", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Sans", Meiryo, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 20px;
	line-height: 1.5;
	text-align: justify;
	text-justify: inter-ideograph;
	text-wrap: pretty;
	word-wrap: break-word;
	word-break: break-all;
	overflow-wrap: anywhere;
	font-feature-settings: "palt" 1;
	print-color-adjust: exact;
}

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

.contents img {
	width: 100%;
	height: auto;
}

.kv {
	width: 100%;
}

.bg-border {
	position: relative;
}

.bg-border::before, .bg-border::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	background: #c22b1d url(../img/bg_border.png) 0 0;
	background: var(--color-tertiary) url(../img/bg_border.png) 0 0;
	background-size: 150px 150px;
	z-index: -1;
}

.bg-border::before {
	top: 0;
	height: 100px;
}

.bg-border::after {
	top: 104px;
	height: 8px;
}

.contents-inner {
	width: min(100%, 1680px);
	margin-inline: auto;
	padding: 40px 0 80px;
}

.ttl-wrap {
	margin-bottom: 40px;
	text-align: center;
}

.ttl-wrap h2 {
	display: grid;
	place-content: center;
	width: min(100%, 664px);
	margin-bottom: 20px;
	margin-inline: auto;
	background: url(../img/bg_ttl.png) no-repeat 0 0;
	background-size: 100% auto;
	aspect-ratio: 664/223;
}

.line-up {
	position: relative;
	width: 100%;
	overflow: hidden;
	z-index: 0;
}

.steam-area {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: -1;
}

.steam {
	display: block;
	position: absolute;
	bottom: -10%;
	opacity: 0;
}

.steam1 {
	left: -10%;
	width: 557px;
	height: 469px;
	-webkit-animation: steam 9s infinite ease-out;
	        animation: steam 9s infinite ease-out;
}

.steam2 {
	left: 20%;
	width: 276px;
	height: 261px;
	-webkit-animation: steam 11s infinite ease-out 1s;
	        animation: steam 11s infinite ease-out 1s;
}

.steam3 {
	left: 50%;
	width: 273px;
	height: 271px;
	-webkit-animation: steam 10s infinite ease-out 3s;
	        animation: steam 10s infinite ease-out 3s;
}

.steam4 {
	left: 80%;
	width: 470px;
	height: 420px;
	-webkit-animation: steam 12s infinite ease-out 2s;
	        animation: steam 12s infinite ease-out 2s;
}

[class*=swiper]:focus {
	outline: none;
}

.line-up-swiper {
	position: relative;
	box-sizing: content-box;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 100px;
}

.line-up-swiper .swiper {
	overflow: visible;
}

.line-up-swiper .swiper-button-prev, .line-up-swiper .swiper-button-next {
	display: grid;
	place-content: center;
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	width: 80px;
	height: 80px;
	margin: auto;
	cursor: pointer;
}

.line-up-swiper .swiper-button-prev {
	left: -40px;
}

.line-up-swiper .swiper-button-next {
	right: -40px;
}

.line-up-swiper .swiper-button-prev::before, .line-up-swiper .swiper-button-next::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: "";
	background-color: rgba(194,43,29, .6);
	background-color: rgba(var(--color-tertiary-rgb), .6);
	border-radius: 50%;
	transition: .3s background-color;
}

.line-up-swiper .swiper-button-prev::after, .line-up-swiper .swiper-button-next::after {
	width: 24px;
	height: 24px;
	content: "";
	border-color: 0 solid transparent;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	transition: .3s margin;
}

.line-up-swiper .swiper-button-prev::after {
	margin-left: 12px;
	-webkit-transform: rotate(-135deg);
	        transform: rotate(-135deg);
}

.line-up-swiper .swiper-button-next::after {
	margin-right: 12px;
	-webkit-transform: rotate(45deg);
	        transform: rotate(45deg);
}

.line-up-swiper .swiper-slide:not(.swiper-slide-visible) a {
	pointer-events: none;
	opacity: .3;
}

.line-up-swiper .swiper-button-disabled {
	pointer-events: none;
	opacity: 0;
}

.swiper-slide {
	display: -webkit-flex;
	display:         flex;
	height: auto;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 4px 4px 0 #c22b1d;
	box-shadow: 4px 4px 0 var(--color-tertiary);
	overflow: hidden;
	transition: .3s opacity, .3s -webkit-transform;
	transition: .3s opacity, .3s transform;
	transition: .3s opacity, .3s transform, .3s -webkit-transform;
}

.swiper-slide a {
	color: #c22b1d;
	color: var(--color-tertiary);
}

.slide-img {
	width: 100%;
	aspect-ratio: 1/1;
}

.slide-img img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

.slide-txt {
	-webkit-flex-grow: 1;
	        flex-grow: 1;
	padding: 10px;
	font-weight: 700;
	text-align: center;
}

.line-up-notice {
	display: -webkit-flex;
	display:         flex;
	-webkit-flex-direction: column;
	        flex-direction: column;
	-webkit-align-items: flex-end;
	        align-items: flex-end;
	width: 100%;
	padding: 20px 40px 0;
	font-size: smaller;
}

.style {
	position: relative;
	background-color: rgba(255, 255, 255, .6);
	overflow: hidden;
	z-index: 0;
}

.style-inner {
	display: -webkit-flex;
	display:         flex;
	-webkit-flex-direction: column;
	        flex-direction: column;
	gap: 80px;
	width: min(100%, 960px);
	margin-inline: auto;
	padding: 20px 40px 0;
}

.style-detail {
	position: relative;
	display: -webkit-flex;
	display:         flex;
	-webkit-align-items: center;
	        align-items: center;
	gap: 40px;
}

.style-detail-img {
	width: 52%;
}

.style-detail-img img {
	-webkit-filter: drop-shadow(4px 8px 0 #c22b1d);
	-webkit-filter: drop-shadow(4px 8px 0 var(--color-tertiary));
	        filter: drop-shadow(4px 8px 0 #c22b1d);
	        filter: drop-shadow(4px 8px 0 var(--color-tertiary));
}

.style-detail-txt {
	-webkit-flex: 1;
	        flex: 1;
	position: relative;
	padding: 40px 40px 20px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 0 8px rgba(112,79,58, .2);
	box-shadow: 0 0 8px rgba(var(--color-primary-rgb), .2);
}

.style-detail-txt p + p {
	margin-top: 1em;
}

.style-detail-ttl {
	position: absolute;
	left: 50%;
	top: 0;
	width: -webkit-fit-content;
	width:    -moz-fit-content;
	width:         fit-content;
	margin-bottom: 20px;
	margin-inline: auto;
	padding: 10px 20px;
	background-color: #faea26;
	background-color: var(--color-secondary);
	border-radius: 100vmax;
	font-size: 140%;
	text-align: center;
	-webkit-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
}

.oden-area {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
}

.oden {
	position: absolute;
	-webkit-transform: translateY(calc(0px * var(--speed) * -1)) rotate(0deg);
	-webkit-transform: translateY(calc(var(--parallax, 0px) * var(--speed) * -1)) rotate(var(--rotate, 0deg));
	        transform: translateY(calc(0px * var(--speed) * -1)) rotate(0deg);
	        transform: translateY(calc(var(--parallax, 0px) * var(--speed) * -1)) rotate(var(--rotate, 0deg));
}

.oden img {
	display: block;
}

.oden1 {
	width: 14%;
	top: 8%;
	left: -2%;
	--speed: .08;
}

.oden2 {
	width: 12%;
	top: 14%;
	right: 4%;
	--speed: .16;
}

.oden3 {
	width: 16%;
	top: 42%;
	left: 6%;
	--speed: .12;
}

.oden4 {
	width: 10%;
	top: 62%;
	right: 8%;
	--speed: .18;
}

.oden5 {
	width: 11%;
	top: 68%;
	left: 4%;
	--speed: .06;
}

.oden6 {
	width: 18%;
	top: 98%;
	right: 2%;
	--speed: .14;
}

/*

//こだわり
.quality{
	position: relative;
	width: 100%;
	background-color: rgba(var(--color-tertiary-rgb), .2);
	overflow: hidden;
	z-index: 0;
}
.quality-inner{
	display: flex;
	gap: 40px;
	padding: 0 40px;
}

.quality-detail{
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;

	picture{
		width: 40%;
		aspect-ratio: 1 / 1;
		border-radius: 100vmax;
		overflow: hidden;

		img{
			height: 100%;
			object-fit: cover;
		}
	}
}

.quality-detail-txt{
	flex: 1;
}

.quality-detail-ttl{
	margin-bottom: 20px;
	padding: 8px 16px;
	background-color: rgba(#fff, .6);
	box-shadow: 2px 2px 0 currentColor;
	color: var(--color-tertiary);
	font-size: 120%;
	text-align: center;
}

*/

/*----------------------
sns
----------------------*/

.bnr_area ul {
	display: -webkit-flex;
	display:         flex;
	-webkit-justify-content: center;
	        justify-content: center;
	-webkit-align-items: center;
	        align-items: center;
	margin-top: 50px;
	list-style-type: none;
}

.bnr_area li {
	margin: 0 1%;
	width: 30%;
}

.bnr_area img {
	width: 100%;
}

.sns_area {
	display: -webkit-flex;
	display:         flex;
	-webkit-justify-content: center;
	        justify-content: center;
	-webkit-align-items: center;
	        align-items: center;
	width: 100%;
	text-align: center;
	font-weight: bold;
	margin: 50px 0 35px 0;
	transition: .2s;
}

.sns_area h2 {
	font-size: 110%;
}

.sns_area ul {
	margin: 15px 0 0 0;
	padding: 0;
	list-style: none;
}

.sns_area ul li {
	display: inline-block;
	letter-spacing: 0;
	margin: 0 10px 0 10px;
	padding: 0;
}

.sns_area a:hover {
	opacity: .8;
}

.sns_area > div {
	margin: 0 5%;
}

@media (any-hover: hover) {
	a.btn:hover {
		background-color: #faea26;
		background-color: var(--color-secondary);
		border-color: currentColor;
		color: #c22b1d;
		color: var(--color-tertiary);
	}

	a.btn:hover::after {
		translate: 2px 0;
	}

	.line-up-swiper .swiper-button-prev:hover::before, .line-up-swiper .swiper-button-next:hover::before {
		background-color: #c22b1d;
		background-color: var(--color-tertiary);
	}

	.line-up-swiper .swiper-button-prev:hover::after {
		margin-left: 8px;
	}

	.line-up-swiper .swiper-button-next:hover::after {
		margin-right: 8px;
	}

	.swiper-slide:hover {
		-webkit-transform: scale(1.05);
		        transform: scale(1.05);
	}
}

@-webkit-keyframes steam {
	0% {
		-webkit-transform: translateX(0%) translateY(0%) scale(.8);
		        transform: translateX(0%) translateY(0%) scale(.8);
		opacity: 0;
	}

	15% {
		opacity: .8;
	}

	30% {
		-webkit-transform: translateX(-15%) translateY(-50%) scale(1);
		        transform: translateX(-15%) translateY(-50%) scale(1);
	}

	50% {
		-webkit-transform: translateX(12%) translateY(-120%) scale(1.1);
		        transform: translateX(12%) translateY(-120%) scale(1.1);
		opacity: .4;
	}

	75% {
		-webkit-transform: translateX(-10%) translateY(-180%) scale(1.3);
		        transform: translateX(-10%) translateY(-180%) scale(1.3);
	}

	100% {
		-webkit-transform: translateX(18%) translateY(-140%) scale(1.6);
		        transform: translateX(18%) translateY(-140%) scale(1.6);
		opacity: 0;
	}
}

@keyframes steam {
	0% {
		-webkit-transform: translateX(0%) translateY(0%) scale(.8);
		        transform: translateX(0%) translateY(0%) scale(.8);
		opacity: 0;
	}

	15% {
		opacity: .8;
	}

	30% {
		-webkit-transform: translateX(-15%) translateY(-50%) scale(1);
		        transform: translateX(-15%) translateY(-50%) scale(1);
	}

	50% {
		-webkit-transform: translateX(12%) translateY(-120%) scale(1.1);
		        transform: translateX(12%) translateY(-120%) scale(1.1);
		opacity: .4;
	}

	75% {
		-webkit-transform: translateX(-10%) translateY(-180%) scale(1.3);
		        transform: translateX(-10%) translateY(-180%) scale(1.3);
	}

	100% {
		-webkit-transform: translateX(18%) translateY(-140%) scale(1.6);
		        transform: translateX(18%) translateY(-140%) scale(1.6);
		opacity: 0;
	}
}