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




/* ----------------------------------------------
	共通設定
------------------------------------------------- */
body {
	background-color: var(--color-event-bg);
}
.stageWrap {
	width: calc(100% - 30px);
	max-width: 1000px;
	margin: auto;
}

a#top {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	overflow: hidden;
	line-height: 0;
	font-size: 0;
	display: block;
}


/* ----------------------------------------------
	メイン画像
------------------------------------------------- */
#main {
	position: relative;
	width: 100%;
	
	background:
		url("../images/logo01.png") no-repeat left 10px top 10px / 100px 100px,
		url("../images/head_sp.png") no-repeat center bottom / cover
	;

	aspect-ratio: 375/517;
}


/* ----------------------------------------------
	イベント一覧
------------------------------------------------- */
#event {
	background-image: url("../images/bg_tile.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center bottom;
	
	padding: 30px 0 50px;
}
#event h3 {
	background-image: url("../images/img_event.png");
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center bottom;
	
	width: 340px;
	height: 65px;
	
	margin: auto;
}
#event ul {
	/*display: grid;*/
	display: flex;
	flex-wrap: wrap;
	place-content: center;
	gap: 2em;
}
#event ul li.eventItem {
	position: relative;
	width: 100%;
	max-width: 480px;
}
#event ul li.eventItem::before {
	content: '';
	
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	
	display: block;
	height: 65px;
	width: 100px;
	
	position: absolute;
	top: 10px;
	left: calc(50% - 50px);
	z-index: 10;
}
#event ul li.eventItem::before {
	background-image: url("../images/img_event00.png");
}
/*#event ul li.eventItem:nth-of-type(1)::before {
	background-image: url("../images/img_event01.png");
}
#event ul li.eventItem:nth-of-type(2)::before {
	background-image: url("../images/img_event02.png");
}*/
#event ul li.eventItem .event-list__content {
	background-color: var(--color-white);
	
	padding: 30px 20px 20px;
	margin-top: 40px;
	border-radius: 20px;
	
	filter: drop-shadow(5px 5px 5px var(--base-color));
	
	display: grid;
	gap: 1em;
}
#event ul li.eventItem .event-list__content h4 {
	color: var(--color-title-blue);
	font-size: 22px;
	font-weight: bold;
	text-align: center;
}
#event ul li.eventItem .event-list__content p strong {
	font-size: 18px;
	color: var(--color-red);
}
#event ul li.eventItem .event-list__content p img {
	width: 100%;
	aspect-ratio: 1/1;
}
#event ul li.eventItem .event-list__content .event-list__tweet {
	overflow: auto;
}
#event ul li.eventItem .event-list__content p a {
	background-image: linear-gradient(90deg, #0285f0, #000000);
	width: 100%;
	padding: 10px;
	border-radius: 50px;
	display: flex;
	place-content: center;
	color: #fff;
	font-weight: bold;
}
#event ul li.eventItem .event-list__content p a::after {
	content: '';
	background-image: url("../images/btn_link.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	
	width: 2em;
}

/* ----------------------------------------------
	住所他
------------------------------------------------- */
#detail {
	color: var(--color-white);
	
	background-color: var(--color-footer);
	padding: 50px 0;
}
#detail #address dl {
	display: grid;
	gap: 1em;
}
#detail #address dl .shop-logo {
	background-image: url("../images/logo02.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	
	display: block;
	height: 100px;
	width: 100px;
	
	margin: auto;
}
#detail #address dl dd {
	text-align: center;
}
#detail #address dl dd #shop-name {
	font-size: 20px;
	font-weight: bold;
}
#detail #address dl dd address {}
#detail #address dl dd address .postal-code {}
#detail #address dl dd address .postal-code::before {
	content: '〒'
}


/*-
	PC版（768px以上）ここから
------------------------------------------------- */
@media screen and (min-width:768px), print{
	
	/* ----------------------------------------------
		メイン画像
	------------------------------------------------- */
	#main {
		background:
			url("../images/logo01.png") no-repeat left 10% top 10% / 16% auto,
			url("../images/head_pc.png") no-repeat center bottom / contain
		;
		
		aspect-ratio: 160/116;
	}
	
	
	/* ----------------------------------------------
		イベント一覧
	------------------------------------------------- */
	#event {
		padding-top: 0;
		
		background-size: auto;
		background-repeat: repeat-x;
	}
	#event h3 {
		width: 600px;
		height: 110px;
	}
	#event ul {
		grid-template-columns: repeat(2, 1fr);
		margin-top: 20px;
	}
	#event ul li.eventItem::before {
		height: 90px;
		width: 150px;
		top: 0;
		left: calc(50% - 75px);
	}
	#event ul li.eventItem .event-list__content {
		padding: 50px 80px 40px;
		height: calc(100% - 50px);
		grid-template-rows: 5em auto 350px 3em;
	}
	#event ul li.eventItem .event-list__content h4 {
		font-size: 28px;
	}
	
	
	/* ----------------------------------------------
		住所他
	------------------------------------------------- */
	#detail {}
	#detail #address {
		width: 800px;
		margin: auto;
	}
	#detail #address dl {
		grid-template-columns: 200px auto;
		gap: 2em;
	}
	#detail #address dl .shop-logo {
		height: 200px;
		width: 200px;
	}
	#detail #address dl dd {
		text-align: left;
	}
	#detail #address dl dd #shop-name {
		margin: 1em 0;
		font-size: 26px;
	}
	
	
	
}