@charset "UTF-8";

/* ページ内スクロール位置調整 */
[id]::before {
	content: "";
	display: block;
	height: 120px; 
	margin-top: -120px;
}
/* ページリンク */
.feature_link {
	display: flex;
	flex-wrap: wrap;
	justify-content: center; 
	font-size: 0.9rem; 
	line-height: 1.6; 
}
.feature_link a {
	width: 100%; 
	position: relative; 
	display: block;
 	padding: 0.5em 2em 0.5em 1em; 
	text-decoration: none; 
	background: rgb(238,242,248); 
	color: rgb(51,51,51);
	border: solid 2px rgb(51,51,51); 
	// white-space: nowrap;
	// overflow: hidden;
	// text-overflow: ellipsis;
}
.feature_link a p {
	position: relative; 
	top: 50%; 
	transform: translate(0, -50%); 
}
.feature_link a:hover {
	opacity: 0.7; 
	transition: all 0.25s;
}
.feature_link a:after {
	position: absolute; 
	top: 50%; 
	transform: translate(0, -50%);
	right: 0.5em; 
	content: '\f054';
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: rgb(51,51,51); 
}
.feature_link .col3,
.feature_link .col3:nth-child(-n+3) {
	width: 100%; 
	margin: 2% 0 0 0; 
}
.feature_link .col3:first-child {
	margin-top: 0; 
}
.feature_link .current {
	pointer-events : none;
 	padding: 0.5em 1em; 
	color: white; 
	background: rgb(51,51,51); 
}
.feature_link .current:after {
	content: '';
}
.sub {
	margin: 3em auto 2em; 
}
.sub a {
	background: white; 
}

/* フロアマップ */
.map_link {
	width: 100%; 
	max-width: 640px; 
	margin: 0 auto; 
	padding: 1.25em 16px 0.75em; 
}
#soon {
	display: none;
}
.soon_box {
	z-index: 999; 
	position: absolute;
	background: white;
	padding: 1em;
	border-radius: 1em;
	box-shadow: 0px 2px 2px rgb(204,204,204);
}
.soon:hover {
	cursor: default; 
}
.work h1,
.work p {
	margin: 0; 
	line-height: 1.6; 
}
.work article {
	margin: 1rem 0; 
}
.work_back {
	position: fixed; 
	top: 25%; left: 0; 
	z-index: 1; 
}
.work_back a {
	padding: 1em; 
	background: rgb(102,102,102); 
	color: white; 
	line-height: 1.6; 
	text-decoration: none; 
}
.work_back i {
	margin-right: 0.25em; 
}
.work div {
	text-align: center; 
}
video {
	width: 100%; 
	max-width: 640px; 
}
.work_video {
	max-width: 640px; 
	margin: 0 auto; 
}
.work_video p {
	line-height; 1.6;
	text-align: left; 
}
.work_video p:first-of-type {
	margin-top: 0.5em; 
}

/* 部屋へリンク */
#map_menu div {
	display: flex; 
	flex-wrap: wrap; 
	justify-content: center; 
	align-items: stretch; 
}
#map_menu div a {
	width: 25%; 
	margin-bottom: 1.5em; 
	text-align: center; 
	border-left: solid 1px rgb(102,102,102); 
	font-size: 0.9em; 
	line-height: 1.6; 
	display: flex; 
	justify-content: center; 
	align-items: center; 
	padding: 0 1em; 
}
#map_menu div a:nth-child(4n) {
	border-right: solid 1px rgb(102,102,102); 
}
#map_menu div a:last-child {
	border-right: solid 1px rgb(102,102,102); 
	border-left: solid 1px rgb(102,102,102); 
}
#map_menu .current {
	color: rgb(182,182,182);
	pointer-events: none; 
}

/* 開催イベント記事へリンク */
.introduction_link a {
	position: relative; 
	display: flex;
	flex-direction: column;
	text-decoration: none; 
	border: solid 2px rgb(102,102,102); 
	background: rgb(238,242,248); 
}
.introduction_link p {
	width: 100%; 
	position: relative; 
	display: block;
 	padding: 0.75em 2em 0.75em 1em; 
	color: rgb(51,51,51);
	line-height: 1.6; 
	flex-grow: 1;
}
.introduction_link p:after {
	position: absolute; 
	top: 50%; 
	transform: translate(0, -50%);
	right: 0.5em; 
	content: '\f054';
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: rgb(51,51,51); 
}

/* 賞典タブ（同じ内容がsearch.cssにもあります） */
.award_tab {
	width: calc(100% - 7em); 
	margin-left: calc( calc(100% - 7em) * 0.35 ); 
	padding: 0.25em 1em 0 0; 
}
.excellence,
.brighton,
.award {
	display: inline-block; 
	margin: 0 0.25em 0.25em 0; 
	padding: 0.25em 0.5em; 
	color: white; 
	font-size: 0.9em; 
}
.excellence {
	background: rgb(204,0,0); 
}
.brighton {
	background: rgb(0,51,182); 
}
.award {
	background: rgb(102,102,102); 
}
p + .excellence,
p + .brighton,
p + .award {
	margin-top: 1em; 
}

/* 作品ページ mp4のサムネイルに再生ボタンを付ける */
.play_button {
	position: absolute; 
	top: 50%; 
	left: 50%; 
	font-size: 3em; 
	color: white; 
	transform: translate(-50%, -50%);
}


/* PC */
@media only screen and (min-width: 961px) { 
#map_menu div a {
	width: 12.5%; 
	}
#map_menu div a:nth-child(4n) {
	border-right: 0; 
	}
#map_menu div a:last-child {
	border-right: solid 1px rgb(102,102,102) !important; 
}
#map_menu div a:nth-child(8n) {
	border-right: solid 1px rgb(102,102,102); 
	}
.feature_link {
	font-size: 1rem; 
}
.feature_link .col3,
.feature_link .col3:nth-child(2n) {
	width: 32%; 
	margin: 2% 2% 0 0; 
	}
.feature_link .col3:nth-child(-n+3) {
	width: 32%; 
	margin: 0 2% 0 0; 
	}
.feature_link .col3:nth-child(3n) {
	margin-right: 0; 
	}
.column .col2 {
	margin-top: 0; 
	}
}