@charset "UTF-8";

body {
	background-color: #f7f7f7;
}


.decorate_title-container {
	display: flex;
	max-width: 800px;
	width: 95%;
	margin: 0 auto;
	padding-bottom: 15px;
	border-bottom: 1px solid #707070;
	flex-direction: column;
	align-items: center;
}

.page-title__container {
	margin-bottom: 20px;
}

.common_list-container_list-container {
	margin-top: 40px;
}

.common_list-container {
	display: block;
	max-width: 1000px;
	margin: 0 auto;
}

.common_list-container h3 {
	max-width: 845px;
	width: 100%;
	margin: 0 auto;
}

.common_list-container h3 img {
	width: 100%;
}

.common_list-nav {
	display: block;
	width: 100%;
	margin-top: 35px;
}

.common-category-list {
	display: flex;
	max-width: 1000px;
	width: 95%;
	margin: auto;
	column-gap: 20px;
	flex-wrap: wrap;

	row-gap: 12px;
}

.category_wrap {
	display: flex;
	max-width: fit-content;
	padding: 9px 30px;
	border-radius: 23px;
	color: #ffffff;
	font-weight: 900;
	font-size: 20px;
	letter-spacing: 0.1em;
	transition: all 0.3s;
}

.category_wrap:hover {
	opacity: 0.7;
}

.common_list-wrapper {
	display: flex;
	max-width: 1000px;
	width: 95%;
	margin: auto;
	column-gap: 5%;
	flex-wrap: wrap;
	justify-content: space-between;

	row-gap: 50px;
}

.common_list-item {
	max-width: 300px;
	width: 30%;
}

.common_list-contents {
	position: relative;
	width: 100%;
}

.common_list-img {
	overflow: hidden;
	max-width: 100%;
	margin-bottom: 20px;
	border-radius: 10px;
	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);

	aspect-ratio: 3/2;
}

.common_list-img a {
	display: flex;
	height: 100%;
	background-color: #ffffff;
	justify-content: center;
	align-items: center;
}

.common_list-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.common_list-detail {
	width: 100%;
	border-radius: 10px;
	transition: all 0.3s;
}

.common_category {
	display: flex;
	max-width: fit-content;
	padding: 5px 30px;
	border-radius: 15px;
	color: #ffffff;
	font-weight: 900;
	font-size: 14px;
}

.common_list-detail h4 {
	overflow: hidden;
	padding-top: 5px;
	font-weight: bold;
	font-size: clamp(1.188rem, 0.719rem + 1.5vw, 1.563rem);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.common_list-detail p {
	display: -webkit-box;
	overflow: hidden;
	margin-top: 10px;
	font-size: clamp(0.813rem, 0.656rem + 0.5vw, 0.938rem);
	line-height: 25px;
	text-align: justify;
	-webkit-box-orient: vertical;

	-webkit-line-clamp: 2;
}


.single-link {
	display: flex;
	width: fit-content;
	margin-top: 15px;
	margin-left: auto;
	color: #084288;
	font-weight: 500;
	font-size: 15px;
	align-items: center;
}

.common_list-item a:hover {
	opacity: 0.8;
}


.common_list-item a i {
	margin-left: 10px;
}

.store_icon {
	display: block;
	width: 40px;
	background-color: #FA7412;
	transition: all 0.5s;

	aspect-ratio: 40/27;
	mask-position: center bottom;
	-webkit-mask-position: center bottom;
	mask-image: url(../images/store_link-arrow.png);
	-webkit-mask-image: url(../images/store_link-arrow.png);
	mask-size: 100%;
	-webkit-mask-size: 100%;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
}

.common_list-detail a:hover .store_icon {
	opacity: 0.8;
}

.event_program-link {
	display: block;
	position: relative;
	width: 250px;
	height: 60px;
	margin: 30px auto 0;
	font-weight: 500;
	font-size: 15px;
	transition: all 0.5s;
}

.event_program-link:hover {
	padding-top: 5px;
	padding-left: 5px;
}

.event_program-link dl {
	display: flex;
	height: 55px;
	border-radius: 5px;
}

.event_program-link dl::after {
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: -1;
	width: calc(100% - 5px);
	height: calc(100% - 5px);
	border-radius: 5px;
	background-color: #e3e3e3;
	content: "";
}

.event_program-link dt {
	display: flex;
	width: 170px;
	padding-left: 15px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	background-color: #FA7412;
	color: #ffffff;
	align-items: center;
}

.event_program-link dd {
	display: flex;
	width: 75px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	background-color: #ffffff;
	justify-content: center;
	align-items: center;
}

.event_program-icon {
	display: block;
	width: 15px;
	background-color: #FA7412;

	aspect-ratio: 15/22;
	mask-position: center bottom;
	-webkit-mask-position: center bottom;
	mask-image: url(../images/event_program-arrow.png);
	-webkit-mask-image: url(../images/event_program-arrow.png);
	mask-size: 100%;
	-webkit-mask-size: 100%;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
}

.pages-of {
	display: none !important;
}

.archive_pagination {
	max-width: 1000px;
	margin: auto;
}

.nav-links {
	display: flex;
	margin-top: 40px;
	column-gap: 10px;
	justify-content: flex-end;
}

.nav-links li a {
	display: flex;
	width: 42px;
	height: 42px;
	border: 2px solid #FA7412;
	border-radius: 5px;
	background-color: #FA7412;
	color: #ffffff;
	font-weight: 700;
	font-size: 21px;
	justify-content: center;
	align-items: center;
	transition: all 0.3s;
}

.nav-links li a {
	/* display: block; */
	color: #ffffff;
}

.nav-links li.current {
	display: flex;
	width: 42px;
	height: 42px;
	border: 2px solid #FA7412;
	border-radius: 5px;
	background-color: #FA7412;
	color: #ffffff;
	font-weight: 700;
	font-size: 21px;
	justify-content: center;
	align-items: center;
	transition: all 0.3s;
	background-color: #ffffff;
	color: #FA7412;
}

.nav-links li a:hover {
	background-color: #ffffff;
	color: #FA7412;
}

.no-post {
	max-width: 1000px;
	margin: auto;
	width: 90%;
}

@media screen and (min-width: 768px) {
	.main_container {
		padding-bottom: 160px;
	}

	.decorate_title-container {
		width: 95%;
		margin-bottom: 130px;
	}

	.common_list-container {
		width: 95%;
	}

	.event_list-container {
		position: relative;
		margin-bottom: 190px;
	}

	.gourmet_list-container {
		margin-bottom: 150px;
	}

	.common_list-container h3 {
		margin-bottom: 70px;
	}

	.common_list-wrapper {
		column-gap: 2.75%;

		row-gap: 100px;
	}

	.common_list-item {
		width: 31.5%;

		row-gap: 20px;
	}

	.common_list-wrapper::after {
		display: block;
		width: 31.5%;
		content: "";
	}

	.common_list-img {
		margin-bottom: 25px;
	}

	@media screen and (min-width: 1570px) {
		.event_program-link {
			position: absolute;
			top: 445px;
			left: calc(100% + clamp(1.25rem, -7.161rem + 8.57vw, 3.125rem));
			margin-top: 0;
		}
	}
}

@media screen and (max-width: 767px) {
	.main_container {
		padding-bottom: 80px;
	}

	.category_wrap {
		padding: 6px 25px;
		font-size: 16px;
	}

	.common-category-list {
		width: 90%;
	}

	.decorate_title-container {
		width: calc(100% - 60px);
		margin-bottom: 60px;
	}

	.common_list-container {
		width: 100%;
		padding: 0 30px;
	}

	.event_list-container, .gourmet_list-container {
		margin-bottom: 90px;
	}

	.common_list-container h3 {
		margin-bottom: 50px;
	}

	.common_list-nav {
		max-width: 660px;
		margin: 0 auto;
		margin-top: 20px;
	}

	.common_list-wrapper {
		row-gap: 50px;
	}

	.common_list-item {
		row-gap: 10px;
	}


	.common_list-img {
		margin-bottom: 15px;
	}

	.common_list-detail p {
		line-height: 1.5;
	}

	.nav-links li {
		width: 33px;
		height: 33px;
		font-size: 15px;
	}

	@media screen and (min-width: 501px) {
		.common_list-wrapper {
			column-gap: 4.5455%;
		}

		.common_list-item {
			width: 47.7273%;
		}
	}

	@media screen and (max-width: 500px) {
		.common_list-wrapper {
			flex-direction: column;
			align-items: center;
		}

		.common_list-item {
			width: 100%;
		}
	}
}

/* ==========================================================================
   出店情報一覧 / カテゴリーアーカイブ
   design/出店情報一覧.svg 準拠（viewBox 0 0 390 1507）
   ========================================================================== */

/* SVG 背景 #fffaef */
.shop-archive {
	background-color: #fffaef;
}

/* --- ページヘッダー --------------------------------------------------- */
/* SVG: BOOTH INFO 19px #e83318 ls.35em / 出店情報 25px #535353 w800 ls.05em */
.shop-archive__header {
	width: min(100% - 40px, 1000px);
	margin: 26px auto 0;
	text-align: center;
}

.shop-archive .page-title_wrap {
	margin: 0;
	line-height: 1.5;
}

.shop-archive .title_en {
	color: #e83318;
	font-family: "Impact";
	font-size: clamp(1.188rem, 1.099rem + 0.38vw, 1.375rem);
	letter-spacing: 0.35em;
}

.shop-archive .title_jp {
	color: #535353;
	font-weight: 800;
	font-size: clamp(1.563rem, 1.339rem + 0.96vw, 2.031rem);
	letter-spacing: 0.05em;
}

/* SVG: リードテキスト 16px #535353 w600 ls.03em / 行送り 30px */
.shop-archive__lead {
	margin-top: 20px;
	color: #535353;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.875;
	letter-spacing: 0.03em;
}

.shop-archive__lead p {
	margin: 0;
}

/* --- カテゴリーフィルター --------------------------------------------- */
/* SVG(SP): 3ボタン 104x82 rx9 (y384) が上段、すべて表示 330x29.9 rx7 (y478) が下段。
   SVG(PC): 3ボタン 139x106 の右横に「すべて表示」をテキストリンクで並べ、1行として中央寄せ。*/
.shop-filter {
	margin: 32px auto 0;
}

.shop-filter__list {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	gap: 9px;
	justify-content: center;
	list-style: none;
}

.shop-filter__item {
	flex: 0 0 auto;
}

.shop-filter__btn {
	display: flex;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	width: 104px;
	height: 82px;
	border-radius: 9px;
	background-color: var(--shop-filter-bg, #ffa700);
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.161);
	color: #ffffff;
	text-decoration: none;
	justify-content: center;
	align-items: flex-end;
	transition: opacity 0.3s, transform 0.2s;
}

/* SVG: 62px Hiragino Sans W6 の漢字が背面（中央やや上）*/
.shop-filter__mark {
	position: absolute;
	top: 50%;
	left: 50%;
	font-weight: 600;
	font-size: 62px;
	line-height: 1;
	transform: translate(-50%, -58%);
	pointer-events: none;
}

/* SVG: ラベル 16px w800、下端から 10px 程度 */
.shop-filter__label {
	position: relative;
	z-index: 1;
	margin-bottom: 8px;
	font-weight: 800;
	font-size: 16px;
	line-height: 1;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.shop-filter__all {
	margin: 12px 0 0;
	text-align: center;
}

/* SVG: 330x29.894 rx7 #aaa、文字 15px w800 ls.1em */
.shop-filter__btn-all {
	display: inline-flex;
	box-sizing: border-box;
	width: 100%;
	max-width: 330px;
	height: 30px;
	border-radius: 7px;
	background-color: #aaaaaa;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.161);
	color: #ffffff;
	font-weight: 800;
	font-size: 15px;
	letter-spacing: 0.1em;
	text-decoration: none;
	justify-content: center;
	align-items: center;
	transition: opacity 0.3s, transform 0.2s;
}

.shop-filter__btn:hover,
.shop-filter__btn-all:hover {
	opacity: 0.85;
}

.shop-filter__btn:focus-visible,
.shop-filter__btn-all:focus-visible {
	outline: 3px solid #535353;
	outline-offset: 2px;
}

/* カテゴリーボタンのアクティブ表現は design のフラットな見た目を崩さないよう内側のリングで表現 */
.shop-filter__btn.is-active {
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.161), inset 0 0 0 2px rgba(255, 255, 255, 0.9);
}

/* 「すべて表示」は白枚リングなしで design 通りフラットのまま */
.shop-filter__btn-all.is-active {
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.161);
}

/* --- カードグリッド --------------------------------------------------- */
/* SVG: カード 165x120（画像）＋165x120（説明パネル）、左右余白20px、gap 20px */
.shop-archive__container {
    max-width: 1000px;
	margin: 40px auto 0;
}

.shop-grid {
	display: grid;
	margin: 0;
	padding: 0;
	gap: 20px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
}

.shop-card {
	display: flex;
}

.shop-card__link {
	display: flex;
	width: 100%;
	border-radius: 3px;
	color: inherit;
	text-decoration: none;
	flex-direction: column;
	transition: transform 0.3s, box-shadow 0.3s;
}

/* カード高さを行内で揃える（カテゴリー色パネルの下端を揃える）*/
.shop-grid > .shop-card {
	height: 100%;
}

.shop-card__thumb {
	overflow: hidden;
	border-radius: 3px 3px 0 0;
	background-color: #ffffff;

	aspect-ratio: 165 / 120;
}

.shop-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.shop-card__thumb-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background-color: rgba(83, 83, 83, 0.08);
}

/* SVG: 説明パネルはカテゴリー色 opacity 0.202 の塗り、165x120 */
.shop-card__body {
	display: flex;
	box-sizing: border-box;
	padding: 12px 10px 14px;
	border-radius: 0 0 3px 3px;
	background-color: color-mix(in srgb, var(--shop-card-color, #ffa700) 20%, #fffaef);
	flex-direction: column;
	flex-grow: 1;

	min-height: 120px;
}

.shop-card__cat-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	white-space: nowrap;

	clip-path: inset(50%);
}

/* SVG: 店名 18px w700 #000、2行で省略（カード高さを揃える）*/
.shop-card__title {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	color: #000000;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.35;
	letter-spacing: 0;
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;

	-webkit-line-clamp: 2;
}

/* SVG: 説明 14px regular、行送り 23px、3行で省略 */
.shop-card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	margin: 8px 0 0;
	color: #000000;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.643;
	-webkit-box-orient: vertical;

	-webkit-line-clamp: 3;
}

.shop-card__link:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14);
}

.shop-card__link:focus-visible {
	outline: 3px solid #535353;
	outline-offset: 3px;
}

.shop-archive .no-post {
	width: 100%;
	margin: 0;
	text-align: center;
}

/* --- PC（768px 以上）: 3カラム ---------------------------------------- */
@media screen and (min-width: 768px) {
	.shop-archive__header {
		margin-top: 40px;
	}

	.shop-archive__lead {
		margin-top: 28px;
		font-size: 18px;
	}

	/* SVG(PC): 3ボタンの右に「すべて表示」が並び、両者を1行として中央寄せする（SP は従来どおり縦積み）*/
	.shop-filter {
		display: flex;
		margin-top: 48px;
		gap: 16px;
		justify-content: center;
		align-items: flex-end;
	}

	.shop-filter__list {
		gap: 16px;
	}

	/* SVG(PC): 139x106 rx9、漢字 82px・ラベル 21px */
	.shop-filter__btn {
		width: 139px;
		height: 106px;
	}

	.shop-filter__mark {
		font-size: 82px;
	}

	.shop-filter__label {
		margin-bottom: 10px;
		font-size: 21px;
	}

	.shop-filter__all {
		margin: 0;
	}

	/* SVG(PC): 塗り・角丸なしのテキストリンク 20px #535353。ボタン下端に揃う */
	.shop-filter__btn-all {
		width: auto;
		max-width: none;
		height: auto;
		border-radius: 0;
		background-color: transparent;
		box-shadow: none;
		color: #535353;
		font-size: 20px;
		letter-spacing: 0;
	}

	.shop-filter__btn-all:hover {
		opacity: 1;
		text-decoration: underline;
	}

	/* テキストリンク化に伴い、下段ボタン時の影を打ち消す。
	   design には現在地の装飾が無いため見た目は変えず、aria-current で伝える。*/
	.shop-filter__btn-all.is-active {
		box-shadow: none;
	}

	.shop-archive__container {
		margin-top: 60px;
	}

	.shop-grid {
		gap: 28px 25px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.shop-card__title {
		font-size: 18px;
	}

	.shop-card__excerpt {
		font-size: 14px;
	}

	/* SVG(PC): 説明パネルは 251x112。テキスト量に応じて伸びるよう下限のみ指定 */
	.shop-card__body {
		padding: 16px 16px 18px;

		min-height: 112px;
	}
}

/* --- design の PC 幅（1920）: カード 251px を 4 列・内容幅 1080px --------- */
/* design は 390 と 1920 の 2 枚のみ。その中間では 4 列にするとカードが 171px まで
   潰れて見出しが読めなくなるため、4 列は 1200px 以上に限定し、それ未満は 3 列に保つ。*/
@media screen and (min-width: 1200px) {
	.shop-archive__container {
		max-width: 1080px;
	}

	.shop-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* --- 360px 未満の極小端末: ボタン折り返し ------------------------------ */
@media screen and (max-width: 359px) {
	.shop-filter__btn {
		width: 96px;
	}

	.shop-filter__mark {
		font-size: 54px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.shop-filter__btn,
	.shop-filter__btn-all,
	.shop-card__link {
		transition: none;
	}

	.shop-card__link:hover {
		transform: none;
	}
}