@charset "UTF-8";
/* CSS Document */

/* =================================
 ●shop event & campaign ショップイベント・キャンペーン
================================= */

div#wrapper_fair {
	background: url(../images/bg_cp.jpg);
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	/* 
	background-size: cover;
	overflow: hidden;
	background-attachment: fixed; */
}

/*//////////////////////////////////////
ナビメニュー
//////////////////////////////////////*/

#shopcp .floornav {
	width: 100%;
	margin-block: clamp(10px, 8vw, 30px);
}

#shopcp .floornav__list {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

#shopcp .floornav__item {
	flex: 1;
}

#shopcp .floornav__item a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100px;
	color: #fff;
	text-shadow: 0 0 8px rgb(0, 0, 0, 0.2);
	text-decoration: none;
	font-size: clamp(14px, 4vw, 22px);
	font-weight: bold;
	border-right: 1px dotted #fff;
	transition:
		opacity 0.2s ease,
		background-color 0.2s ease;

	background: linear-gradient(0deg, #DAAF08 0%, #DAAF08 45%, #fddf70 100%, #DAAF08 85%, #DAAF08 90% 100%);

}

/* ホバー */
#shopcp .floornav__item a:hover {
	opacity: 0.5;
}



@media screen and (max-width: 768px) {
	#shopcp .floornav__item a {
		min-height: 55px;
		padding: 10px 4px;
		font-size: clamp(12px, 3vw, 16px);
	}
}

/* --------------------------------
  固定フロアナビ
-------------------------------- */

#shopcp .floornav--fixed {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100;

	width: 100%;
	margin: 0;

	opacity: 0;
	visibility: hidden;
	transform: translateY(100%);

	transition:
		opacity 0.3s ease,
		visibility 0.3s ease,
		transform 0.3s ease;
}

#shopcp .floornav--fixed.is-show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

#shopcp h3 {
	color: #fff;
	text-align: center;
	padding: clamp(14px, 4vw, 28px);
	font-size: clamp(14px, 4vw, 22px);
	margin-top: 100px;
}

@media screen and (max-width: 768px) {
	#shopcp h3 {
		margin-top: 50px;
	}

}

#shopcp h3 {
	background: linear-gradient(135deg,
			#e83333 0%,
			#f77f31 25%,
			#e36ab3 50%,
			#1d9fe2 75%,
			#2ec841 100%);
}



/*//////////////////////////////////////
ショップ情報
//////////////////////////////////////*/

/* カード全体のコンテナ */
.event-card {
	display: flex;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	background-color: #FFF;
	padding: 4% 2.5%;
	box-sizing: border-box;
	line-height: 1.6;
	letter-spacing: 0.05em;
	font-weight: 600;
}

/* 左側のロゴエリア（％指定で画面幅に合わせて自動縮小） */
.event-card__logo {
	width: 20%;
	margin: 0;
	padding-right: 3%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.event-card__logo img {
	width: 100%;
	height: auto;
	max-width: 150px;
}

/* 右側のテキスト情報エリア */
.event-card__info {
	width: 80%;
	border-left: 1px dotted #ccc;
	padding-left: 4%;
	box-sizing: border-box;
}

/* イベントバッジ */
.event-card__badge {
	display: inline-block;
	background-color: #6a2267;
	color: #fff;
	font-size: clamp(0.7rem, 1.2vw, 0.85rem);
	/* 画面サイズに応じて文字盤が縮小 */
	padding: 0.3em 0.8em;
	margin-bottom: 1em;
}

/* タイトル */
.event-card__title {
	color: #6a2267;
	font-size: clamp(0.95rem, 2vw, 1.2rem);
	/* 画面サイズに応じて流動的に縮小 */
	font-weight: bold;
	margin: 0 0 0.8em 0;
	word-break: break-word;
}

/* 詳細テキスト */
.event-card__desc {
	color: #333;
	font-size: clamp(0.95rem, 1.4vw, 0.95rem);
	margin: 0 0 1em 0;
	font-weight: 500;
}

/* 期間テキスト */
.event-card__period {
	color: #a82424;
	font-size: clamp(0.75rem, 1.4vw, 0.95rem);
	margin: 0 0 1.5em 0;
}

/* 店舗名 */
.event-card__shop-name {
	color: #333;
	font-size: clamp(0.75rem, 1.4vw, 0.95rem);
	margin: 0;
}

span.Note {
	color: #a82424;
}