@charset "UTF-8";
/*
 * components.css — コンポーネント・レイアウト・ページ固有スタイル
 *
 * 依存: elements.css（CSS変数・リセット・ユーティリティ）
 *
 * 目次:
 *  [1]    dialog（ダイアログ共通）
 *  [1-2]  .c-dialog-modal（モーダル）
 *  [1-3]  js-dialog カスタマイズ
 *  [2]    .c-nav（ページ内ナビゲーション）
 *  [3]    ul.asterisk / dl.table（リスト）
 *  [4]    img
 *  [5]    .btn（ボタン）
 *  [5-2]  .btn extensions
 *  [6]    page layout（ページレイアウト）
 *  [7]    .item / .img / .txt / .link
 *  [8]    .section-ttl
 *  [9]    swiper
 *  [9-2]  .s-card（Swiper専用カード）
 *  [10]   #fv
 *  [11]   PC responsive
 *  [12]   .c-card（汎用カードコンポーネント）
 *  [12-2] .c-card--sm（スモールバリアント）
 *  [12-3] .c-card__link（カード内リンクエリア）
 *  [12-4] .c-card-group（カード群ラッパー）
 *  [12-5] .c-card PC responsive
 *  [13]   #hotels
 *  [14]   #cms-gourmetfair
 *
 * 命名規約:
 *  c-*     CSSコンポーネント（スタイリング用）
 *  js-*    JS制御用（CSSでスタイリングしない）
 *  page__* レイアウト構造
 *  #id     ページ固有スタイル
 */


/* =============================================
   [1] dialog（ダイアログ共通）
============================================= */


/* ダイアログ開時に背景のスクロールを禁止 */
html:has(dialog[open]) {
	overflow: hidden;
}

/* ダイアログにCSSトランジションを設定 */
dialog {
	transition: 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

/* ダイアログ開時の背景 */
dialog::backdrop {
	background: rgba(0, 0, 0, 0.3);
}

/* ダイアログメニュー */
dialog.js-dialog-menu {
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	width: 50%;
	left: auto;
	margin: 0;
	border: 0;
	outline: 0;
	padding: 0;
}

/* ダイアログメニューの表示前 */
dialog.js-dialog-menu.show-from,
dialog.js-dialog-menu.hide-to {
	translate: 100% 0%;
}

/* ダイアログメニューの表示前・非表示後の背景を透明にする */
dialog.js-dialog-menu.show-from::backdrop,
dialog.js-dialog-menu.hide-to::backdrop {
	opacity: 0;
}



.dialog-menu-btn {
	position: relative;
	width: 32px;
	height: 20px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	border: 0;
}

.dialog-menu-btn span {
	position: relative;
	width: 32px;
	height: 1px;
	background-color: #000;
	transition: transform .2s cubic-bezier(.27, 1.2, .6, 1);
}


@media (any-hover: hover) {
	.dialog-menu-btn:hover span:nth-child(1) {
		transform: translateY(3px)
	}

	.dialog-menu-btn:hover span:nth-child(3) {
		transform: translateY(-3px)
	}
}

.dialog-menu-btn.js-dialog-menu-close {
	background: #000;
	padding: 10px;
	height: 56px;
	width: 56px;
	margin: 0 0 0 auto;
	align-items: center;
}

.dialog-menu-btn.js-dialog-menu-close span {
	position: absolute;
	background-color: #fff;
}

.dialog-menu-btn.js-dialog-menu-close span:nth-child(1) {
	transform: translateY(18px) rotate(-45deg);
}

.dialog-menu-btn.js-dialog-menu-close span:nth-child(2) {
	opacity: 0;
}

.dialog-menu-btn.js-dialog-menu-close span:nth-child(3) {
	transform: translateY(18px) rotate(45deg);
}


/* =============================================
   [1-2] .c-dialog-modal（モーダル）
============================================= */

.js-dialog-modal {
	border-radius: 20px;
	width: 90%;
	max-width: 780px;
	max-height: 85vh;
	background: #fff;
	margin: auto;
	padding: 0;
	border: 0;
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
	transform: scale(0.95);
	overflow: hidden;
}

.js-dialog-modal[open] {
	opacity: 1;
	transform: scale(1);
}

.js-dialog-modal.hide-to,
.js-dialog-modal.show-from {
	opacity: 0;
	transform: scale(0.95);
}

dialog.js-dialog-modal.show-from::backdrop,
dialog.js-dialog-modal.hide-to::backdrop {
	opacity: 0;
}

/* c-dialog-modal: flexコンテナ（✕固定 + スクロール領域） */
.c-dialog-modal {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	max-height: 85vh;
}

/* ✕ 閉じるボタン（右上固定・スクロールしない） */
.c-dialog-modal__close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 36px;
	height: 36px;
	background: #fff;
	border: 2px solid #333;
	border-radius: 50%;
	cursor: pointer;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.c-dialog-modal__close::before,
.c-dialog-modal__close::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 2px;
	background: #333;
	border-radius: 1px;
}

.c-dialog-modal__close::before {
	transform: rotate(45deg);
}

.c-dialog-modal__close::after {
	transform: rotate(-45deg);
}

/* スクロール領域 */
.c-dialog-modal__body {
	overflow-y: auto;
	flex: 1;
	padding: 30px 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}


/* ヘッダー */
.c-dialog-modal__header {
	font-weight: 500;
	font-size: var(--font-size-base);
	line-height: 160%;
	text-align: center;
	background: #D9D9D9;
	padding: 6px;
	width: 100%;
}

/* コンテンツ */
.c-dialog-modal__content ul {
	list-style: disc;
	font-weight: 400;
	font-size: var(--font-size-sm);
	line-height: 170%;
}

.c-dialog-modal a {
	text-align: center;
	color: #000;
	border-bottom: 1px #000 solid;
	text-decoration: none;
}

.c-dialog-modal .dialog-control {
	display: flex;
	gap: 1.5rem;
	align-items: center;
	justify-content: center;
	padding-top: 10px;
}

.c-dialog-modal .js-dialog-prev,
.c-dialog-modal .js-dialog-next {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid #333;
	background: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.c-dialog-modal .js-dialog-prev::before,
.c-dialog-modal .js-dialog-next::before {
	content: "";
	width: 10px;
	height: 10px;
	border-top: 2px solid #333;
	border-right: 2px solid #333;
	display: block;
}

/* 次へ：右矢印 */
.c-dialog-modal .js-dialog-next::before {
	transform: rotate(45deg);
	margin-left: -3px;
}

/* 前へ：左矢印 */
.c-dialog-modal .js-dialog-prev::before {
	transform: rotate(-135deg);
	margin-right: -3px;
}

/* =============================================
   [1-3] js-dialog カスタマイズ
============================================= */


.c-nav__menu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
}



.js-dialog-menu-open {
	width: 30px;
	height: 30px;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	cursor: pointer;
}

.dialog-menu-btn.js-dialog-menu-close {
	background: transparent;
}


.js-dialog-menu {
	width: 100%;
}

.dialog-menu-btn span {
	background-color: var(--color-dialog-menu-btn);
}

.dialog-menu-btn.js-dialog-menu-close span {
	background-color: var(--color-dialog-menu-btn);
}

.js-dialog-menu {
	background: var(--color-dialog-menu-bg);
}

.js-dialog-menu .body {
	padding: 0 24px;
	width: 100%;
}

.js-dialog-menu .body>ul {
	margin: 30px 0 60px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.js-dialog-menu .body>ul>li {
	border-bottom: 1px #CBE6E4 solid;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.js-dialog-menu .body>ul li a,
.js-dialog-menu .body>ul li dt {
	font-weight: 700;
	font-size: var(--font-size-md);
	line-height: 100%;
	vertical-align: middle;
	color: var(--color-dialog-menu-link);
	text-decoration: none;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	height: 100%;
	background: transparent;
	padding: 0;
	padding-bottom: 24px;
	cursor: pointer;
}

.js-dialog-menu .body>ul>li>ul a,
.js-dialog-menu .body>ul>li>dl dd a {
	font-weight: 500;
	font-size: var(--font-size-xs);
	line-height: 100%;
	vertical-align: middle;
	color: var(--color-black);
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	height: 100%;
}

.js-dialog-menu .body ul>li a:after {
	content: "";
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	background-color: currentColor;
	background-repeat: no-repeat;
	background-position: center;
	width: 16px;
	height: 16px;
	display: block;
	mask-image: url(data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20123.93%20123.93%22%3E%20%3Cg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1-2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%3E%20%3Cpath%20d%3D%22M61.97%2C0C27.74%2C0%2C0%2C27.74%2C0%2C61.97s27.74%2C61.97%2C61.97%2C61.97%2C61.97-27.74%2C61.97-61.97S96.19%2C0%2C61.97%2C0ZM81.11%2C65.62l-23.24%2C23.24c-1.01%2C1.01-2.33%2C1.51-3.65%2C1.51s-2.64-.5-3.65-1.51c-2.02-2.02-2.02-5.29%2C0-7.3l19.59-19.59-19.59-19.59c-2.02-2.02-2.02-5.29%2C0-7.3s5.29-2.02%2C7.3%2C0l23.24%2C23.24c2.02%2C2.02%2C2.02%2C5.29%2C0%2C7.3Z%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E);
}

.js-dialog-menu .body>ul li dt:after {
	content: "";
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	background-color: currentColor;
	background-repeat: no-repeat;
	background-position: center;
	width: 16px;
	height: 16px;
	display: block;
	mask-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2015.5%2015.5%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20none%3B%20stroke%3A%20%23fff%3B%20stroke-linecap%3A%20round%3B%20stroke-linejoin%3A%20round%3B%20stroke-width%3A%201.5px%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1-2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%3E%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M7.75.75v14%22%2F%3E%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M.75%2C7.75h14%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
	color: var(--color-dialog-menu-link);
	position: relative;
	top: 0;
	right: 0;
	transform: unset;
}

.js-dialog-menu .body>ul li dt.active:after {
	mask-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2015.5%201.5%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20none%3B%20stroke%3A%20%23281815%3B%20stroke-linecap%3A%20round%3B%20stroke-linejoin%3A%20round%3B%20stroke-width%3A%201.5px%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1-2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%3E%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M.75.75h14%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
}

.js-dialog-menu .body>ul li dd {
	padding: 0;
	background: transparent;
	border: 0;
}



.js-dialog-menu .dialog-menu__cta {
	display: grid;
	margin: 0 24px;
	gap: 4px;
	grid-template-columns: 1fr 1fr;
}

/* =============================================
   [2] .c-nav（ページ内ナビゲーション）
============================================= */

.c-nav {
	display: none;
	position: sticky;
	left: 0;
	top: 0;
	z-index: 99;
	opacity: 0;
	transition: opacity 0.4s;
	background: #000;
	border-bottom: 1px rgb(255 255 255 / 41%) solid;
	max-height: 79px;
	gap: 1rem;
	grid-template-areas: "c-nav__logo c-nav__menu-toggle";
	grid-template-columns: auto auto;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.6rem;
}

.scroll .c-nav {
	top: 81px;
	opacity: 1;
	display: grid;
}

.upfixed .c-nav {
	top: 137px;
}

.c-nav__logo {
	grid-area: c-nav__logo;
}

.c-nav__logo img {
	max-height: 40px;
	width: auto;
}

.c-nav__menu-toggle {
	grid-area: c-nav__menu-toggle;
}

@media screen and (min-width: 768px) {

	.scroll .c-nav,
	.upfixed .c-nav {
		top: 81px;
		display: grid;
	}

	.c-nav {
		grid-template-columns: auto auto;
		max-height: 79px;
		gap: 40px;
		grid-template-areas: "c-nav__logo c-nav__menu-toggle";
		align-items: center;
		padding: 13px 40px;
	}


	.js-dialog-menu-open {
		width: 36px;
		height: 36px;
	}


	.js-dialog-menu {
		width: 450px;
	}




}



/* =============================================
   [3] ul.asterisk / dl.table（リスト）
============================================= */

ul.asterisk {
	text-align: left;
	font-weight: 400;
	letter-spacing: 0;
	gap: 2px;
}

ul.asterisk li {
	list-style-type: none;
	margin: 0;
	padding: 0 0 0 15px;
	position: relative;
}

ul.asterisk li:before {
	content: "※";
	display: block;
	left: 0;
	margin: auto;
	padding: 0;
	position: absolute;
	top: 0;
}

ul.asterisk.midpoint li:before {
	content: "・";
}

ul.asterisk.circle li:before {
	content: "●";
}


/* =============================================
   [4] img
============================================= */

img {
	object-fit: cover;
	position: relative;
	width: 100%;
	max-width: 100%;
	transition: 0.6s all;
	margin: 0 auto;
	display: block;
}


img.mercisbv {
	margin: 0px 0 0px auto;
	position: absolute !important;
	bottom: 0;
	right: 0;
	aspect-ratio: auto !important;
	width: 76px !important;
	height: auto !important;
	z-index: 1;
	height: auto;
	top: auto;
	padding: 3px;
}

dl.table {
	display: grid;
	justify-content: flex-start;
	align-items: start;
	margin: 10px auto;
	position: relative;
	gap: 10px;
	grid-template-columns: auto 1fr;
	width: 100%;
}

dl.table dt {
	width: 100px;
	display: block;
	background: #484747;
	color: #fff;
	border-radius: 5px;
	margin-right: 10px;
	padding: 3px 10px;
	line-height: 1.2;
	text-align: center;
}

/* =============================================
   [5] .btn（ボタン）
============================================= */

.btn {
	background-color: var(--color-htb-orange);
	border: none;
	display: flex;
	color: #fff;
	text-decoration: none;
	position: relative;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	padding: 1.5rem 3rem;
	font-family: YakuHanJP, "Zen Kaku Gothic New", sans-serif !important;
}

.btn.enjoy-border {
	background-color: var(--color-white);
	border-color: var(--color-htb-enjoy);
	color: var(--color-htb-enjoy);
}

.btn.expass-border {
	background-color: var(--color-white);
	border-color: var(--color-htb-event);
	color: var(--color-htb-event);
}

.btn span {
	line-height: 100%;
	text-align: center;
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	line-height: 1.4;
}

a.btn span:after {
	content: "";
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	background-color: currentColor;
	background-repeat: no-repeat;
	background-position: center;
	width: 15px;
	height: 15px;
	display: block;
	mask-image: url(data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20123.93%20123.93%22%3E%20%3Cg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1-2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%3E%20%3Cpath%20d%3D%22M61.97%2C0C27.74%2C0%2C0%2C27.74%2C0%2C61.97s27.74%2C61.97%2C61.97%2C61.97%2C61.97-27.74%2C61.97-61.97S96.19%2C0%2C61.97%2C0ZM81.11%2C65.62l-23.24%2C23.24c-1.01%2C1.01-2.33%2C1.51-3.65%2C1.51s-2.64-.5-3.65-1.51c-2.02-2.02-2.02-5.29%2C0-7.3l19.59-19.59-19.59-19.59c-2.02-2.02-2.02-5.29%2C0-7.3s5.29-2.02%2C7.3%2C0l23.24%2C23.24c2.02%2C2.02%2C2.02%2C5.29%2C0%2C7.3Z%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E);
}

a.btn.btn-textlink {
	background-color: transparent !important;
	border: 0 !important;
	border-bottom: 2px solid !important;
	border-radius: 0 !important;
	padding: 0.3rem;
	color: #000 !important;
}

a.btn.btn-textlink span:after {
	mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%207.86%2012.78%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20none%3B%20stroke%3A%20%23fff%3B%20stroke-miterlimit%3A%2010%3B%20stroke-width%3A%202px%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22_%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%22%20data-name%3D%22%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%22%3E%20%3Cpolyline%20class%3D%22cls-1%22%20points%3D%22.71%20.71%206.44%206.44%20.81%2012.08%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
	width: 12px;
	height: 12px;
}

a.btn.btn-textlink.btn-anc span:after {
	transform: rotate(90deg);
}

a.btn.btn-modal span:after {
	mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20186.78%20169.5%22%3E%20%3Cg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1-2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%3E%20%3Cg%3E%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M182.78%2C135.29H39.12c-2.21%2C0-4-1.79-4-4V4c0-2.21%2C1.79-4%2C4-4h143.66c2.21%2C0%2C4%2C1.79%2C4%2C4v127.29c0%2C2.21-1.79%2C4-4%2C4ZM43.12%2C127.29h135.66V8H43.12v119.29Z%22%2F%3E%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M81.48%2C169.5H4c-2.21%2C0-4-1.79-4-4v-77.04c0-2.21%2C1.79-4%2C4-4s4%2C1.79%2C4%2C4v73.04h73.48c2.21%2C0%2C4%2C1.79%2C4%2C4s-1.79%2C4-4%2C4Z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
	width: 12px;
	height: 12px;
}

a.btn:hover {
	opacity: 0.7;
}



/* =============================================
   [6] page layout（ページレイアウト）
============================================= */

.section {
	padding: var(--space-section) 0;
	overflow-x: clip;
}

.page__header {
	position: relative;
	z-index: 1;
}

.page__header__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-gap);
	align-items: center;
	padding: 0 var(--space-x-sm) var(--space-y);
	text-align: center;
}

.page__header__inner h2 {
	font-size: calc(var(--font-size-2xl) * 1);
	font-weight: 700;
	line-height: 140%;

}

.page__header__inner p {
	font-size: calc(var(--font-size-md) * 1);
}

.page__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-y);
	width: 100%;
	overflow-x: clip;
}

.page__body__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 var(--space-x);
	gap: var(--space-y);
	max-width: var(--content-max-width);
	width: 100%;
	margin: 0 auto;
}

/* フルサイズ（左右余白なし、max-width制限なし） */
.page__body__inner--full {
	padding-left: 0;
	padding-right: 0;
	max-width: none;
}

.btn {
	font-size: calc(var(--font-size-md) * 0.9);
}


@media screen and (min-width: 1024px) {
	.page__body__inner--full {
		padding-left: 4rem;
		padding-right: 4rem;
	}

}


/* =============================================
   [5-2] .btn extensions
============================================= */


.btn.btn-recommend:before {
	content: "おすすめ";
	position: absolute;
	top: -12px;
	left: auto;
	font-size: var(--font-size-xxs);
	background: #FFEB3B;
	color: #000;
	border-radius: 9999px;
	border: 2px solid;
	padding: 0.5rem 1rem;
	line-height: 1;
	font-weight: 900;
	animation: blinking 1s ease-in-out infinite alternate;
}

@keyframes blinking {
	0% {
		background: #FFEB3B;
	}

	100% {
		background: yellow;
	}
}

.btn.btn-appeal {
	background: #f06358 !important;
	overflow: hidden;
}

.btn.btn-appeal::before {
	content: "";
	display: block;
	width: 70px;
	height: 160px;
	background-color: rgba(255, 255, 255, 0.4);
	position: absolute;
	top: -100%;
	left: -30%;
	transform: rotate(30deg);
	animation: shine 2s infinite linear;
}

@keyframes shine {
	17% {
		left: 120%;
	}

	100% {
		left: 120%;
	}
}

.btn-rotate-border {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	height: 60px;
	border: none;
	background: transparent;
	cursor: pointer;
	border-radius: 9999px;
	overflow: hidden;
	padding: 0;
}

.btn-rotate-border::before {
	content: "";
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: conic-gradient(#ff007f,
			#7f00ff,
			#00bfff,
			transparent 60%);
	animation: rotate-border 3s linear infinite;
}

.btn-rotate-border span {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(100% - 6px);
	height: calc(100% - 6px);
	background: #fff;
	color: #03A9F4;
	font-weight: bold;
	border-radius: 9999px;
	z-index: 1;
	transition: background 0.3s, color 0.3s;
}

.btn-rotate-border:hover span {
	background: #333;
	color: #fff;
}

@keyframes rotate-border {
	100% {
		transform: rotate(360deg);
	}
}


/* =============================================
   [7] .item / .img / .txt / .link
============================================= */

.item {
	position: relative;
	position: sticky;
	top: 0;
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 0 0 calc(var(--space-x-sm) * 1);
	border-radius: var(--corner-radius);
}

.img {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.img img {
	aspect-ratio: 4 / 3;
}

.link {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.link.multiple {
	gap: 2rem;
	flex-direction: row;
	flex-wrap: wrap;
}

.txt {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: var(--space-x-sm);
	gap: var(--space-x-sm);
}

.item.column .txt dl {
	font-size: calc(var(--font-size-base) * 0.7);
}

.item.column {
	padding: var(--space-y) var(--space-x-sm);
}

.item.column>div {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}


/* =============================================
   [8] .section-ttl
============================================= */

.section-ttl {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: column;
	width: auto;
	align-items: center;
	position: relative;
	margin: 0 2rem;
}

.section-ttl>div {
	position: relative;
	padding: 1.6rem 0rem;
	border-top: 1px dotted;
	border-bottom: 1px dotted;
}

.section-ttl>div:before,
.section-ttl>div:after {
	content: "";
	height: 3px;
	width: 20%;
	background: #fff;
	position: absolute;
	left: 0;
	top: 0;
}

.section-ttl>div:after {
	right: 0;
	left: auto;
	top: auto;
	bottom: 0;
}


.section-ttl>div h3 {
	font-size: calc(var(--font-size-xl) * 1);
	font-weight: 700;
	line-height: 140%;

}

.section-ttl>div p {
	font-size: calc(var(--font-size-base) * 1);
}

.section-ttl>div p small {
	font-size: 70%;
	display: block;
	max-width: 780px;
	margin: 1rem auto 0;
}


/* =============================================
   [9] swiper
============================================= */

#app-container .swiper {
	width: 100%;
	min-width: 0;
}

#app-container .swiper-slide {
	min-width: 0;
	display: flex !important;
	height: auto;
	justify-content: center;
}

#app-container .swiper-wrapper {
	display: flex !important;
	justify-content: flex-start;
	height: auto;
}


#app-container .swiper-horizontal>.swiper-pagination-bullets,
#app-container .swiper-pagination-bullets.swiper-pagination-horizontal,
#app-container .swiper-pagination-custom,
.swiper-pagination-fraction {
	position: relative;
	margin-top: 4rem;
	bottom: 0;
	top: 0;
}

#app-container .swiper-pagination-bullet-active {
	opacity: var(--swiper-pagination-bullet-opacity, 1);
	background: var(--color-black);
}

#app-container .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	display: inline-block;
}

#app-container .swiper-button-next,
#app-container .swiper-button-prev {
	position: absolute;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 0px solid #333;
	background: #000;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

#app-container .swiper-button-next:after,
#app-container .swiper-button-prev:after {
	content: "";
	width: 10px;
	height: 10px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	display: block;
}

#app-container .swiper-button-next {
	right: -30px;
}

#app-container .swiper-button-next:after {
	transform: rotate(45deg);
	margin-left: -24px;
}

#app-container .swiper-button-prev {
	left: -30px;
}

#app-container .swiper-button-prev:after {
	transform: rotate(-135deg);
	margin-right: -24px;
}

/* スライド不足時はボタン非表示（Swiperデフォルト動作を尊重） */
#app-container .swiper-button-lock {
	display: none;
}

#app-container .js-swiper-loop .swiper-wrapper {
	transition-timing-function: linear;
}


/* =============================================
   [10] #fv
============================================= */

section.page__kv {
	position: relative;
}

.page__kv__txt {
	position: absolute;
	top: 10%;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 100%;
	text-align: center;
}

.page__kv__txt img {
	margin: 0 auto;
	max-width: 800px;
	width: 100%;
}

.page__kv__batch {
	position: absolute;
	bottom: 20px;
	right: 20px;
}

.ph__img__16x8 img {
	position: relative;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 8;
	object-fit: cover;
}

@media screen and (max-width: 736px) {
	.page__kv__txt {
		top: 25%;
	}

	.ph__img__3x4-sp img {
		aspect-ratio: 3 / 3.5;
	}

	.page__kv__txt img {
		object-position: 90% !important;
	}

	.page__kv__batch {
		position: absolute;
		bottom: 10px;
		right: 10px;
		max-width: 20%;
	}

}


/* =============================================
   [9-2] .s-card（Swiper専用カード）
============================================= */

.s-card {
	--scard-font-size: var(--font-size-base);
	--scard-gap: 1.2rem;
	--scard-padding: 2rem;
	--scard-color: inherit;
	--scard-bg: transparent;
	--scard-radius: 2rem;

	display: flex;
	flex-direction: column;
	position: relative;
	background: var(--scard-bg);
	color: var(--scard-color);
	border-radius: var(--scard-radius);
	overflow: hidden;
	height: 100%;
}

/* 画像エリア */
.s-card__img {
	width: 100%;
	overflow: hidden;
}

.s-card__img img {
	width: 100%;
	aspect-ratio: 1000 / 667;
	object-fit: cover;
}

.s-card__logo {
	--scard-logo-height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--scard-padding);
	margin: calc(var(--scard-padding) * -1) calc(var(--scard-padding) * -1) 0;
	width: auto;
	min-height: var(--scard-logo-height);
	font-size: calc(var(--scard-font-size) * 1.3);
	font-weight: 700;
	line-height: 140%;
	text-align: center;
}


/* テキストエリア */
.s-card__txt {
	padding: var(--scard-padding);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--scard-gap);
	flex: 1;
	position: relative;
}

/* 説明テキスト */
.s-card__text {
	text-align: left;
	font-size: calc(var(--scard-font-size) * 0.9);
	line-height: 170%;

}

/* リンクエリア */
.s-card__link {
	align-self: center;
	margin-top: auto;
	padding: 0 var(--scard-padding) var(--scard-padding);
}

/* タイトル */
.s-card__title {
	font-size: calc(var(--scard-font-size) * 1.3);
	font-weight: 500;
	line-height: 140%;
	text-align: center;
	border-bottom: 1px solid;
	width: 100%;
}

/* ラベル（Point01 等） */
.s-card__label {
	position: absolute;
	top: -20px;
	left: 0;
	right: 0;
	margin: 0 auto;
	display: table;
	background: #936939;
	border-radius: 9999px;
	padding: 1rem 3rem;
	line-height: 100%;
	color: #fff;
	font-size: var(--scard-font-size);
	z-index: 1;
	text-align: center;
}

/* リンクエリア */
.s-card__link {
	margin-top: auto;
	padding: 0 var(--scard-padding) var(--scard-padding);
}


/* =============================================
   [11] PC responsive
============================================= */

@media screen and (min-width: 1024px) {
	.txt {
		height: auto;
	}

	.section-ttl {
		font-size: calc(var(--font-size-xl) * 1);
	}
}

/* =============================================
   [12] .c-card（汎用カードコンポーネント）
============================================= */

.c-card {
	--card-font-size: clamp(1.5rem, 1.157rem + 0.71vw, 1.8rem);
	--card-gap: var(--space-x-sm, 1.6rem);
	--card-padding: var(--space-x-sm, 1.6rem);
	--card-radius: var(--corner-radius, 2rem);
	--card-accent: var(--color-primary, #61bffc);
	--card-bg: transparent;
	--card-color: inherit;
	--card-dl-label-bg: #9E9E9E;
	--card-dl-label-color: #fff;

	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin: 0 auto;
	color: var(--card-color);
	background: var(--card-bg);
	border-radius: var(--card-radius);
	overflow: hidden;
}

/* 画像エリア */
.c-card__img {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	font-size: calc(var(--card-font-size) * 0.7);
}

/* テキストエリア */
.c-card__txt {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: calc(var(--card-gap) * 1.2);
	font-size: var(--card-font-size);
	padding: calc(var(--card-padding) * 1.5) calc(var(--card-padding) * 2);
}

/* ヘッダー */
.c-card__header {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: calc(var(--card-gap) *1);
	font-size: calc(var(--card-font-size) * 1);
}

.c-card__header>*,
.c-card__body>* {
	width: 100%;
	text-align: center;
}

.c-card__header picture,
.c-card__header img,
.c-card__logo picture,
.c-card__logo img {
	width: 100%;
}

/* キャッチコピー */
.c-card__catch {
	text-wrap: pretty;
	word-break: auto-phrase;
	text-align: center;
	font-size: 170%;
	font-weight: 600;
	line-height: 130%;
}

.c-card__catch:after {
	content: "";
	position: relative;
	display: block;
	border-bottom: 2px dotted;
	width: 100%;
	margin: 1rem auto 0;
}

.c-card__catch span {
	text-wrap: pretty;
	word-break: auto-phrase;
	position: relative;
}

.c-card__catch span:before {
	content: attr(data-text);
	background: var(--card-accent);
	font-size: calc(var(--card-font-size) * 0.5);
	line-height: 1;
	padding: 0.5rem;
	color: var(--color-white, #fff);
	border-radius: 1rem;
	display: table;
}

/* タイトル*/
.c-card__title {
	text-wrap: pretty;
	word-break: auto-phrase;
	text-align: center;
	font-size: 140%;
	font-weight: 600;
	line-height: 140%;
}

/* 開催日*/
.c-card__date {
	text-wrap: pretty;
	word-break: auto-phrase;
	text-align: center;
	font-size: calc(var(--card-font-size) * 1.4);
	font-weight: 600;
	line-height: 140%;
	border-top: 1px solid;
	border-bottom: 1px solid;
	padding: 0.5rem;
	width: auto;
}
.c-card__date em{
	font-size:130%;
}

.c-card__notice{
	font-size:80%;
}

/* ポイント*/
.c-card__point {
	text-align: center;
	font-size: calc(var(--card-font-size) * 1.3);
	font-weight: 600;
	line-height: 140%;
}

.c-card__label {
	margin: 0 auto;
	display: table;
	background: #000;
	border-radius: 9999px;
	padding: 1rem 3rem;
	line-height: 100%;
	color: #fff;
	font-size: var(--card-font-size);
	z-index: 1;
	text-align: center;
}

/* ロゴエリア（SP用ロゴ表示） */
.c-card__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--card-padding);
	width:auto;
	max-width: 420px;
	font-size: calc(var(--card-font-size) * 2);
	font-weight: 900;
	text-align: center;
}

/* ボディ */
.c-card__body {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: calc(var(--card-gap) * 0.8);
	font-size: calc(var(--card-font-size) * 0.9);
}

.c-card__body .text {
	text-align: left;
}

.c-card__body a {
	font-size: calc(var(--card-font-size) * 0.9);
}

/* 定義リスト（c-card / s-card 共通）*/
.c-card dl,
.s-card dl {
	display: grid;
	justify-content: flex-start;
	align-items: stretch;
	position: relative;
	gap: 10px;
	grid-template-columns: auto 1fr;
	width: auto;
	font-size: calc(var(--scard-font-size) * 1);
}

.c-card dl dt,
.s-card dl dt {
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--card-dl-label-bg);
	color: var(--card-dl-label-color);
	border-radius: 5px;
	padding: 3px 10px;
	line-height: 1.2;
	text-align: center;
	max-width: 100px;
	font-size: 85%;
}

.c-card dl dd,
.s-card dl dd {
	text-align: left;
}


/* =============================================
   [12-2] .c-card--sm（スモールバリアント）
============================================= */

.c-card--sm {
	align-items: normal;
	justify-content: normal;
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	max-width: 550px;
}

.c-card--sm .c-card__img,
.c-card--sm .c-card__txt {
	width: auto;
}

.c-card--sm .c-card__img img {
	height: 100%;
}

.c-card--sm .c-card__txt {
	padding: calc(var(--card-padding) * 0.5) calc(var(--card-padding) * 1);
	gap: calc(var(--card-gap) * 0.5);
	justify-content: flex-start;
	align-content: center;
}

.c-card--sm .c-card__header {
	font-size: calc(var(--card-font-size) * 0.7);
}

.c-card--sm .c-card__body {
	font-size: calc(var(--card-font-size) * 0.75);
	line-height: 130%;
}

.c-card--sm .c-card__header,
.c-card--sm .c-card__body {
	gap: calc(var(--card-gap) * 0.5);
	justify-content: flex-start;
}

.c-card--sm .c-card__header>*,
.c-card--sm .c-card__body>* {
	text-align: left;
}


/* =============================================
   [12-3] .c-card__link（カード内リンクエリア）
============================================= */

.c-card__link {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
}

.c-card__link.multiple {
	gap: 1.5rem;
	flex-direction: row;
	flex-wrap: wrap;
}

/* カード内ボタンのフォントサイズ調整 */
.c-card__link .btn {
	font-size: calc(var(--card-font-size) * 0.8);
}

.c-card--sm .c-card__link .btn {
	font-size: calc(var(--card-font-size) * 0.7);
	padding: 1rem 2rem;
}


/* =============================================
   [12-4] .c-card-group（カード群ラッパー ─ 必須親要素）
   
   パターン:
   - c-card-group              … c-card × N、PC時偶数カード左右反転
   - c-card-group--grid        … c-card--sm × N、PC時2列グリッド（縦カード維持）
============================================= */

.c-card-group {
	display: flex;
	flex-direction: column;
	gap:calc(var(--card-gap) * 1.4);;
	width: 100%;
}

.c-card-group .c-card__link {
	width: 100%;
}

/* --grid: SP時も縦並び、PC時2列グリッド */
.c-card-group--grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--card-gap);
}



/* =============================================
   [12-5] .c-card PC responsive
============================================= */

@media screen and (min-width: 1024px) {

	/* c-card-group内のカード: PC時横並び */
	.c-card-group>.c-card {
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100%;
	}

	.c-card-group>.c-card>.c-card__img {
		width: 60%;
	}

	.c-card-group>.c-card>.c-card__txt {
		width: 40%;
		padding: var(--card-padding);
	}

	/* 偶数カード: 左右反転 */
	.c-card-group>.c-card:nth-child(even) {
		flex-direction: row-reverse;
	}

	/* --grid: PC時2列、カードは縦並び維持 */
	.c-card-group--grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.c-card-group--grid>.c-card {
		flex-direction: column;
	}

	.c-card-group--grid>.c-card>.c-card__img,
	.c-card-group--grid>.c-card>.c-card__txt {
		width: 100%;
	}

	.c-card-group--grid>.c-card:nth-child(even) {
		flex-direction: column;
	}
	.c-card__logo {
		width: 100%;
		padding: 0;
	}

}


/* =============================================
   [13] #hotels
============================================= */


.js-swiper-loop .swiper-wrapper {
	transition-timing-function: linear;
}

article#hotels .swiper {
	width: 100%;
	min-width: 0;
}

article#hotels .swiper-slide {
	min-width: 0;
	display: flex;
	height: auto;
}

article#hotels .swiper-wrapper {
	display: flex !important;
	justify-content: flex-start;
	height: auto;
	z-index: -1;
}

article#hotels {
	position: relative;
	overflow: hidden;
	--color-hotels: #11133f;
	background: #F0ECCD;
	color: var(--color-hotels);
}

article#hotels:before {
	content: "";
}

article#hotels .section-ttl>div:before,
article#hotels .section-ttl>div:after {
	background: var(--color-hotels);
}

article#hotels .c-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4rem;
	text-align: center;
}




article#hotels .text-heading {
	color: var(--color-navy);
}

article#hotels .enjoy {
	display: grid;
	gap: 2rem;
	text-align: center;
	color: var(--color-navy);
}

article#hotels .enjoy .img {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

article#hotels .enjoy img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center center;
}

article#hotels .enjoy img:last-child {
	grid-column: 1 / 3;
}

article#hotels .enjoy img:last-child {
	aspect-ratio: 16 / 9;
}




article#hotels .s-card {
	--scard-bg: var(--color-hotels);
	--scard-color: #fff;
	transition: 0.6s all;
}

article#hotels .swiper-slide:not(.swiper-slide-active) .s-card {
	transform: scale(0.95);
}

article#hotels .swiper-slide-active .s-card img {
	transform-origin: bottom;
}

article#hotels .btn {
	background-color: #fff;
	color: #000;
	max-width: 260px;
	margin: 0 auto;
}

article#hotels .js-swiper-hotels {
	padding-left: 3.4rem;
}

article#hotels .s-card>.s-card__txt:first-of-type {
	flex: 1;
	justify-content: center;
}

article#hotels .fivehotels {
	display: grid;
	gap: 2rem;
	text-align: center;
}

article#hotels .fivehotels .s-card .s-card__title {
	color: #fff;
	padding: 0rem 0 1rem;
}



article#hotels .tokuten {
	background: #e7d8bd;
	padding: 3rem 0;
	border-radius: 10rem 0rem 10rem 0rem;
	display: grid;
	gap: 3rem;
	text-align: center;
	margin: 4rem auto 0;
}

article#hotels .js-swiper-tokuten .s-card {
	--scard-color: #000;
	--scard-bg: rgb(255 255 255 / 70%);
	border: 0;
}

article#hotels .tokuten .s-card__img {
	border-radius: 2rem 2rem 0 0;
}

article#hotels .tokuten .s-card .s-card__title {
	color: var(--color-hotels);
	padding: 2rem 0 1rem;
	line-height: 1.4;
}

article#hotels .tokuten .s-card .s-card__title em {
	font-size: 60%;
	display: block;
	background: #000;
	color: #fff;
}

article#hotels .tokuten .s-card .s-card__txt {
	color: var(--color-hotels);
}

article#hotels .tokuten .s-card img {
	aspect-ratio: 800 / 532;
}


article#hotels .plan {
	display: flex;
	gap: 3rem;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

article#hotels .plan .c-card__title{
	font-size: calc(var(--card-font-size) * 1.2);
}

article#hotels .plan .c-card {
	background: #fff;
	padding: var(--card-padding);
	border-radius: var(--card-radius);
}

article#hotels .plan .c-card .c-card__txt {
    padding: 0 0 0 var(--card-padding);
  }

article#hotels .plan .c-card .btn {
	background: #c3923a;
	color: #fff;
}


@media screen and (min-width: 1024px) {
	article#hotels .enjoy img {
		aspect-ratio: 16 / 9;
	}

	article#hotels .swiper-slide:not(.swiper-slide-active) .s-card {
		transform: scale(1);
	}

	article#hotels .swiper-slide-active .s-card img {
		transform: scale(1);
	}


	article#hotels .tokuten {
		padding: 6rem;
		width: 100%;
		max-width: 1440px;
	}


}




/* =============================================
   [14] #cms-gourmetfair
============================================= */



#cms-fair {
	--font-family: "Zen Kaku Gothic New", sans-serif;
	--font-family-Zen-Mi: YakuHanMP, "Zen Old Mincho", serif;
	--font-family-hind: "Zen Kaku Gothic New", sans-serif;
	--size-6xl: clamp(5rem, calc(4.8rem + 0.625vw), 5.5rem);
	--size-5xl: clamp(4.2rem, calc(4rem + 0.625vw), 4.7rem);
	--size-4xl: clamp(3.8rem, calc(3.6rem + 0.625vw), 4.3rem);
	--size-3xl: clamp(3.2rem, calc(3rem + 0.625vw), 3.7rem);
	--size-2xl: clamp(2.8rem, calc(2.6rem + 0.625vw), 3.3rem);
	--size-xl: clamp(2.4rem, calc(2.2rem + 0.625vw), 2.9rem);
	--size-lg: clamp(1.9rem, calc(1.7rem + 0.625vw), 2.4rem);
	--size-md: clamp(1.5rem, calc(1.3rem + 0.625vw), 2rem);
	--size-base: clamp(1.2rem, calc(1.1rem + 0.625vw), 1.7rem);
	--size-sm: clamp(1.1rem, calc(1rem + 0.625vw), 1.6rem);
	--size-xs: clamp(0.95rem, calc(0.85rem + 0.625vw), 1.4rem);
	--size-xxs: clamp(0.6rem, calc(0.55rem + 0.625vw), 1.1rem);
	--color-beige: #F0ECCD;
	--color-white: #fff;
}

#cms-fair img {
	max-width: 100%;
}

#cms-fair .swiper {
	width: 100%;
	min-width: 0;
}

#cms-fair .swiper-wrapper {
	display: flex !important;
	justify-content: flex-start;
}

#cms-fair .swiper-slide {
	min-width: 0;
}

.fair .infinite-slider .swiper-wrapper {
	transition-timing-function: linear;
}

.fair {}

.fair .se__inner {
	padding: 2.4rem 1.6rem;
}

.fair__fv {
	display: grid;
}

.fair .fair__fv .fair__headding {
	display: grid;
	background: var(--color-primary);
}

.fair__fv .fair__headding .txt {
	display: grid;
	gap: 1rem;
	padding: 1.6rem;
}

.fair__fv .fair__headding .txt img {
	max-width: calc(100% / 1.3) !important;
	margin: 0 auto 2rem;
	display: block;
}

.fair__fv .fair__headding .txt h2 {
	color: var(--color-white);
	font-size: var(--font-size-2xl);
	text-align: center;
	line-height: 120%;
	font-weight: 700;
}

.fair__fv .fair__headding .txt span {
	font-size: var(--font-size-xl);
	display: table;
	border: 1px #fff solid;
	border-left: 0;
	border-right: 0;
	padding: 0.8rem 1rem;
	margin: 0 auto;
	line-height: 100%;
}

.fair__fv .fair__headding .txt p {
	color: var(--color-white);
	font-size: var(--font-size-lg);
	text-align: center;
	line-height: 120%;
	font-weight: 700;
}


.fair__fv .img {
	display: grid;
	position: relative;
	height: 100%;
}

.fair__fv .img img {
	height: 100%;
	aspect-ratio: 4 / 3;
}


.fair__term {
	font-weight: 500;
	background: var(--color-beige);
	color: #6B3B0C;
}

.fair__term h3 {
	font-size: var(--font-size-xl);
	text-align: center;
	line-height: 140%;
	font-weight: 500;
	margin: 0 auto 1.6rem;
}

.fair__term p {
	font-size: var(--font-size-md);
	text-align: center;
	line-height: 180%;
	font-weight: 500;
}

.fair__body {
	background: #fff;
	color: #000;
}

.fair__panel {
	padding: 0.8rem 0.8rem;
	display: grid;
	gap: 4rem;
}

.fair__panel__item {
	display: grid;
	display: flex;
	gap: 2rem;
	align-items: start;
	flex-direction: column;
}

.fair__panel__item .img {
	flex: 0;
}

.fair__panel__item>.img img {
	aspect-ratio: 4 / 3;
}

.fair__panel__item>.txt {
	display: flex;
	gap: 1.6rem;
	flex-direction: column;
	justify-content: flex-start;
	flex: 1;
	padding: 0;
}

.fair__panel__item>.txt .title {
	font-size: var(--font-size-lg);
	text-align: center;
	line-height: 140%;
	font-weight: 500;
	color: var(--color-primary);
	color: #063a6f;

}

.fair__panel__item>.txt .date {
	font-size: var(--font-size-base);
	text-align: center;
	line-height: 140%;
	font-weight: 700;
	border: 1px solid;
	border-left: 0;
	border-right: 0;
	padding: 1rem 0.5rem;
	font-family: YakuHanJP, "Zen Kaku Gothic New", sans-serif;
}

.fair__panel__item>.txt .text {
	font-size: var(--font-size-sm);
	text-align: left;
	line-height: 180%;
	font-weight: 300;
	font-family: YakuHanJP, "Zen Kaku Gothic New", sans-serif;
}

.fair__panel__item>.txt .text .last-line {
	font-size: 110%;
	text-align: right;
	display: block;
	font-weight: 500;
}

.fair__panel__item>.shop {
	background: var(--color-beige);
	padding: 0.5rem;
	position: relative;
	width: 100%;
}

.fair__panel__item>.shop a {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 1rem;
	align-items: center;
	text-decoration: none;
	color: #000;
	position: relative;
}

.fair__panel__item>.shop a .img img {
	aspect-ratio: 1 / 1;
}

.fair__panel__item>.shop a .txt {
	font-size: var(--font-size-xs);
	text-align: left;
	line-height: 120%;
	font-weight: 500;
	font-family: YakuHanJP, "Zen Kaku Gothic New", sans-serif;
	display: grid;
	gap: 0.5rem;
	padding: 0.8rem 2rem 0.8rem 0.8rem;
}

.fair__panel__item>.shop a .txt .title {
	font-size: 130%;
	font-weight: 700;
	border-bottom: 1px #000 solid;
	padding: 0.5rem 0;
}

.fair__panel__item>.shop a:after {
	content: "";
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	background-color: currentColor;
	background-repeat: no-repeat;
	background-position: center;
	width: 18px;
	height: 18px;
	display: block;
	mask-image: url(data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20123.93%20123.93%22%3E%20%3Cg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1-2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%3E%20%3Cpath%20d%3D%22M61.97%2C0C27.74%2C0%2C0%2C27.74%2C0%2C61.97s27.74%2C61.97%2C61.97%2C61.97%2C61.97-27.74%2C61.97-61.97S96.19%2C0%2C61.97%2C0ZM81.11%2C65.62l-23.24%2C23.24c-1.01%2C1.01-2.33%2C1.51-3.65%2C1.51s-2.64-.5-3.65-1.51c-2.02-2.02-2.02-5.29%2C0-7.3l19.59-19.59-19.59-19.59c-2.02-2.02-2.02-5.29%2C0-7.3s5.29-2.02%2C7.3%2C0l23.24%2C23.24c2.02%2C2.02%2C2.02%2C5.29%2C0%2C7.3Z%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E);
	position: absolute;
	right: 0;
}


.goods .fair__panel__item>.txt .text {
	border-top: 1px solid;
	padding-top: 1rem;
}

.fair__panel__item>.txt .price {
	display: flex;
	justify-content: center;
	margin: 0 auto;
	position: relative;
	font-size: var(--font-size-sm);
	text-align: left;
	line-height: 140%;
	font-weight: 500;
	font-family: YakuHanJP, "Zen Kaku Gothic New", sans-serif;
}

.fair__panel__item>.txt .price:before {
	content: "通常価格";
	content: "税別";
	width: 100px;
	height: 25px;
	display: block;
	border: 1px #000 solid;
	border-radius: 5px;
	font-size: var(--font-size-xs);
	line-height: 25px;
	margin-right: 10px;
	text-align: center;
}

.fair__panel__item>.shop-list {
	padding: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	background-color: #EEE !important;
	width: 100%;
}

.fair__panel__item>.shop-list a {
	min-width: auto;
	max-width: 345px;
	text-align: center;
	min-width: auto;
	max-width: 345px;
	text-align: center;
	display: block;
	position: relative;
	border-radius: 9999px;
	background: #fff;
	text-decoration: none;
	white-space: nowrap;
	color: #000;
}

.fair__panel__item>.shop-list a span {
	font-size: var(--font-size-sm);
	padding: 6px 30px 6px 10px;
	font-size: var(--font-size-xs);
	text-align: center;
	line-height: 140%;
	font-weight: 500;
	font-family: YakuHanJP, "Zen Kaku Gothic New", sans-serif;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--color-navy);

}

.fair__panel__item>.shop-list a span:before {
	content: "";
	mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2010%2013.5%22%20style%3D%22enable-background%3Anew%200%200%2010%2013.5%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23281815%3B%7D%3C%2Fstyle%3E%3Cg%20transform%3D%22translate(-1201%20-525)%22%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M1206%2C538.5c-0.1%2C0-0.3-0.1-0.3-0.2c0%2C0-1.2-1.4-2.3-3.1c-1.6-2.3-2.4-4.1-2.4-5.2%20c0-2.8%2C2.2-5%2C5-5s5%2C2.2%2C5%2C5c0%2C1.1-0.8%2C2.9-2.4%2C5.2c-1.1%2C1.7-2.3%2C3.1-2.3%2C3.1C1206.3%2C538.4%2C1206.1%2C538.5%2C1206%2C538.5z%20M1206%2C525.9%20c-2.3%2C0-4.1%2C1.9-4.1%2C4.1c0%2C1.8%2C2.7%2C5.6%2C4.1%2C7.4c1.4-1.8%2C4.1-5.6%2C4.1-7.4C1210.1%2C527.7%2C1208.3%2C525.9%2C1206%2C525.9L1206%2C525.9z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M1206%2C532c-1.1%2C0-2-0.9-2-2s0.9-2%2C2-2c1.1%2C0%2C2%2C0.9%2C2%2C2c0%2C0%2C0%2C0%2C0%2C0%20C1208%2C531.1%2C1207.1%2C532%2C1206%2C532z%20M1206%2C528.8c-0.7%2C0-1.2%2C0.5-1.2%2C1.2s0.5%2C1.2%2C1.2%2C1.2s1.2-0.5%2C1.2-1.2l0%2C0%20C1207.2%2C529.3%2C1206.7%2C528.8%2C1206%2C528.8z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	background-color: currentColor;
	width: 15px;
	height: 20px;
	display: block;
	transition: all 0.4s;
}

.fair__panel__item>.shop-list a span.amsterdamcity:before {
	color: #F382B7 !important;
}

.fair__panel__item>.shop-list a span.wellcomearea:before {
	color: #753A97 !important;
}

.fair__panel__item>.shop-list a span.flowerload:before {
	color: #F27B88 !important;
}

.fair__panel__item>.shop-list a span.towercity:before {
	color: #EE1D23 !important;
}

.fair__panel__item>.shop-list a span.attractiontown:before {
	color: #FCB814 !important
}

.fair__panel__item>.shop-list a span.harbortown:before {
	color: #2098d1 !important;
}

.fair__panel__item>.shop-list a span.fantasiacity:before {
	color: #00ABCA !important;
}

.fair__panel__item>.shop-list a span.artgarden:before {
	color: #658441 !important;
}

.fair__panel__item>.shop-list a span.forest:before {
	color: #0e4210 !important;
}

.fair__panel__item>.shop-list a span:after {
	right: 15px;
	width: 6px;
	height: 6px;
	border-top: 1px solid var(--color-navy) !important;
	border-right: 1px solid var(--color-navy) !important;
	transform: rotate(45deg);
	content: "";
	display: block;
	gap: 0.5rem
}

.fair .slick-slide {
	position: relative;
}

#cms-fair .miffy_copyright {
	padding: 2.4rem 2.4rem 0;
	display: grid;
	gap: 10px;
}

#cms-fair .miffy_copyright img {
	height: 14px;
	width: auto;
}

#cms-fair img.mercisbv {
	display: none;
}


@media screen and (min-width: 1024px) {

	.fair .fair__fv .fair__headding {
		grid-template-columns: 1fr 2fr;
		align-content: space-between;
		align-items: center;
	}

	gourmetfair .se__inner {
		padding: 4.8rem 1.6rem;
	}

	.fair__panel {
		padding: 0;
		gap: 8rem;
		max-width: 1100px;
		grid-template-columns: 1fr 1fr;
		margin: 0 auto;
	}

}

/* =============================================
   [15] #miffy-copyright
============================================= */

.miffy-copyright {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 4rem 0;
}

.miffy-copyright img {
	height: 10px;
	object-fit: contain;
}
@media screen and (min-width: 1025px) {
	.miffy-copyright img{
		height:14px;
	}
}