@charset "UTF-8";

@media all {
	.main-section-ttl {
		text-align: center;
	}
	.artist-content {
		margin-top: 50rem;
		font-weight: bold;
	}
	.artist-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.artist-thumb {overflow: hidden;}
	.artist-dd-thumb img {
		width: 100%;
		aspect-ratio: 3 / 2;
		object-fit: cover;
		transition: transform .3s;
	}
	.artist-item:hover .artist-dd-thumb img {
		transform: scale(1.1);
	}
	.artist-name {font-weight: 500;}
	.loading-icon,
	.artist-info,
	.artist-official,
	.artist-sns {
		display: none;
	}
	.artist-50-header {
		margin: 3em auto 0;
		padding: .6em 0 .4em;
		width: 14em;
		background-color: rgba(237,76,140, 1);
		border-radius: 2em;
		font-weight: bold;
		color: #fff;
		text-align: center;
		line-height: 1;
	}
	.artist-50-header:nth-child(4n-1) {background-color: #1eb8cb;}

	.artist-lead {
		margin-top: 3em;
		text-align: center;
	}
	.genre-nav {
		position: relative;
		border: 2rem solid #ccc;
	}
	.genre-nav::before {
		content: '';
		position: absolute;
		display: block;
		background: center / contain no-repeat url(../img/artist/hook.svg);
	}
	.genre-ttl {
		flex-shrink: 0;
		line-height: 1.4;
	}
	.genre-item {
		display: inline-block;
		padding: .3334em .5em;
		color: #fff;
		background-color: #999;
		border-radius: 9em;
		transition: .3s;
	}
	.genre-item.active {background-color: #1eb8cb;}

	.artist-genre {text-align: right;}
	.genre {
		display: inline-block;
		padding: .25em .75em .2em;
		color: #fff;
		background-color: #999;
		font-size: 13rem;
		font-weight: 500;
		border-radius: 2em;
	}
	.genre + .genre {margin-left: .5em;}

	.artist-dd-thumb {overflow: hidden;}
	.artist-thumb,
	.lightbox .artist-dd-thumb {display: none;}

	.lightbox .artist-thumb {display: block;}


	/* sp & tab */
	@media screen and (max-width: 1024px) {}
	
	/* sp */
	@media only screen and (max-width: 767px) {
		.artist-list {
			margin: 0 auto;
			width: calc(100% - 28rem);
			row-gap: 30rem;
		}
		.artist-item {
			width: 47.5%;
			font-size: 14rem;
		}
		.artist-name {
			margin-top: 6rem;
			line-height: 1.4;
		}
	
		.genre-nav {
			margin: 15rem auto 0;
			padding: 20rem 10rem;
			width: calc(100% - 32rem);
			border-radius: 10rem;
		}
		.genre-nav::before {
			top: -18rem;
			left: -15rem;
			width: 30rem;
			height: 33rem;
		}
		.genre-ttl {text-align: center;}
		.genre-list {
			font-size: 12rem;
			text-align: center;
		}
		.genre-item {
			margin-top: 10rem;
			margin-right: 6rem;
			padding-top: .35em;
		}
		.artist-dd-thumb {
			margin-top: 6rem;
			border-radius: 15rem;
		}
		.genre {
			margin-top: 6rem;
			font-size: 12rem;
		}

		.site-footer {margin-top: 100rem;}
	}
	
	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.artist-50-header {font-size: 24rem;}
		.artist-list {
			margin: 0 auto;
			width: 100%;
			max-width: 980rem;
		}
		.artist-list::after {
			content: '';
			display: block;
			width: 300rem;
		}
		.artist-item {
			margin: 40rem 10rem 0;
			width: 300rem;
			cursor: pointer;
		}

		.genre-nav {
			display: flex;
			align-items: center;
			margin: 15rem auto 0;
			padding: 25rem 35rem;
			width: calc(100% - 40rem);
			max-width: 880rem;
			border-radius: 15rem;
		}
		.genre-nav::before {
			top: -22rem;
			left: -19rem;
			width: 39rem;
			height: 44rem;
		}
		.genre-ttl {width: 90rem;}
		.genre-list {
			margin-top: -15rem;
			font-size: 18rem;
		}
		.genre-item {
			margin-top: 15rem;
			margin-right: 8rem;
		}
		.genre-item:hover {
			background-color: #1eb8cb;
			cursor: pointer;
		}
		.artist-dd-thumb {
			margin: 10rem 0 4rem;
			border-radius: 20rem;
		}


		.site-footer {margin-top: 200rem;}


		/* tab */
		@media only screen and (max-width: 1024px) {
			.artist-list {
				margin-left: 40rem;
				width: calc(100% - 70rem);
			}
			.artist-list::after {
				width: 30%;
			}
			.artist-item {
				width: 30%;
				margin: 30rem 0 0;
			}
		}
		
		/* pc */
		@media print, (min-width: 1025px) {
		}
		
		@media (min-width: 1450px) {
			.artist-list {
				display: grid;
				max-width: 1340rem;
				grid-template-columns: 300rem 300rem 300rem 300rem;
			}
			.artist-list::after {
				content: '';
				display: block;
				clear: both;
			}
		}
	}
	
}


/* genre-select */
@media all {
	.artist-content {transition: opacity .3s;}
	body.list-hidden .artist-content {opacity: 0;}
	body.selected .artist-item {display: none;}
	body.genre-classic .artist-item.classic,
	body.genre-jazz .artist-item.jazz,
	body.genre-pops .artist-item.pops,
	body.genre-rock .artist-item.rock,
	body.genre-R_B .artist-item.R_B,
	body.genre-anison .artist-item.anison,
	body.genre-world .artist-item.world,
	body.genre-acappella .artist-item.acappella,
	body.genre-alternative .artist-item.alternative,
	body.genre-folk .artist-item.folk,
	body.genre-kids .artist-item.kids,
	body.genre-other .artist-item.other {display: flex;}

	body.genre-classic .genre.classic,
	body.genre-jazz .genre.jazz,
	body.genre-pops .genre.pops,
	body.genre-rock .genre.rock,
	body.genre-R_B .genre.R_B,
	body.genre-anison .genre.anison,
	body.genre-world .genre.world,
	body.genre-acappella .genre.acappella,
	body.genre-alternative .genre.alternative,
	body.genre-folk .genre.folk,
	body.genre-kids .genre.kids,
	body.genre-other .genre.other {background-color: #1eb8cb;}
}

/* lightbox base */
@media all {
.lightbox , .lightbox-shadow {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	cursor: pointer;
}
.lightbox {
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: .3s opacity;
	pointer-events: none;
}
/* .lightbox-shadow {background: rgba(234,232,220,.5)} */
.lightbox-shadow {
	background: rgba(204,202,190,.5);
	/* backdrop-filter: blur(2rem); */
}
.lightbox-inner {
	position: relative;
	width: 98dvw;
	max-height: 80vh;
	background: #fff;
	border-radius: 0;
	z-index: 1;
	cursor: auto;
}
.lightbox-close {
	position: absolute;
	top: 4rem;
	right: 8rem;
	font-size: 45rem;
	color: #ccc;
	cursor: pointer;
}
.lbx {overflow: hidden}
.lbx .lightbox {
	opacity: 1;
	z-index: 100000;
	transition: .3s opacity;
}
.lightbox.open {pointer-events: all;}
.lightbox-inner .keynote-period, .lightbox-inner .keynote-speaker, .lightbox-inner .keynote-title, .lightbox-inner .keynote-detail {opacity: 1}
.lightbox-inner .speaker-positions, .lightbox-inner .keynote-detail, .lightbox-inner .keynote-notice  {display: block}
.lightbox-inner .keynote-title, .lightbox-inner .keynote-detail {text-align: left}
.lightbox-inner .to-detail {display: none}
.lightbox-inner .to-video {
	width: 200rem;
	height: auto;
	border-radius: 20rem;
}
.lightbox-inner .two-speakers+.two-speakers {position: relative}
.lightbox-inner .two-speakers+.two-speakers::before {
	content: '';
	position: absolute;
	top: 0;
	left: 8%;
	width: 84%;
	border-bottom: 1rem solid #fff;
}
.lightbox-inner .two-speakers .speaker-positions {
	margin-bottom: 0;
	padding-bottom: 0;
	border: none;
	line-height: 1.6;
}
.lightbox-inner .two-speakers .speaker-name {padding-bottom: 0}
.lightboxOnly {display: none}
.lightbox-inner .lightboxOnly {display: block}
.lightbox-inner .lightboxHide {display: none}
}

/* lightbox open */
@media all {
	.lightbox-inner {
		position: relative;
		padding: 0 20rem;
	}
	.lightbox-inner .loading-icon {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		aspect-ratio: 3 / 2;
		max-height: 400rem;
		display: flex;
		align-items: center;
		justify-content: center;
		pointer-events: none;
		transition:opacity .5s;
	}
	.lightbox-inner.loaded .loading-icon {opacity: 0;}
	.lightbox-inner .artist-thumb {
		opacity: 0;
		transition: opacity .5s;
	}
	.lightbox-inner.loaded .artist-thumb,
	.lightbox-inner.loaded .artist-dl {
		opacity: 1;
	}
	.lightbox-inner .loading-icon img {
		width: 50rem;
		height: auto;
	}
	.lightbox-inner .artist-thumb img {
		object-fit: contain;
	}
	.lightbox-inner .artist-info,
	.lightbox-inner .artist-official {
		display: block;
	}
	.lightbox-inner .artist-info {line-height: 2.25;}
	.lightbox-inner .artist-official a {
		display: block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		transition: opacity .3s;
	}
	.lightbox-inner .artist-official a:hover {opacity: .5;}
	.lightbox-inner .artist-sns {
		display: flex;
		align-items: center;
	}
	.lightbox-inner .artist-sns a {
		display: block;
		width: 43rem;
	}
	.lightbox-inner .artist-sns a + a {
		margin-left: 16rem;
	}

	.artist-official > p {
		display: flex;
		align-items: center;
	}
	.artist-official > p + p {margin-top: 1em;}
	.artist-official > p::before {
		content: '';
		display: inline-block;
		margin-right: .5em;
		width: 1.25em;
		height: 1.25em;
		background: center / contain no-repeat;
	}
	.artist-official p.link::before {background-image: url(../img/artist/link.svg);}
	.artist-official p.x::before {background-image: url(../img/artist/X.svg);}
	.artist-official p.insta::before {background-image: url(../img/artist/insta.png);}
	.artist-official p.yt::before {background-image: url(../img/artist/youtube.png);}
	.artist-official p.fb::before {background-image: url(../img/artist/facebook.png);}
}

/* lightbox open - SP - */
@media screen and (max-width: 939px) {
	.lightbox-inner {
		padding: 50rem 0 20rem;
		height: 80vh;
		width: calc(100% - 28rem);
		max-width: 400rem;
		border-radius: 15rem;
	}
	.lightbox-inner-content {
		padding: 0 16rem;
		width: 100%;
		height: 100%;
		overflow: auto;
	}
	.lightbox-close {
		font-size: 30rem;
	}
	.lightbox-inner .artist-thumb img {aspect-ratio: 4 / 3;}
	.lightbox-inner .artist-name {
		margin: 10rem 0 16rem;
		font-size: 18rem;
		text-align: center;
	}
	.lightbox-inner .artist-info {
		margin-bottom: 10rem;
	}
	.lightbox-inner .artist-official {
		margin-bottom: 16rem;
	}
	.lightbox-inner .artist-sns a {
		width: 30rem;
	}
}
/* lightbox open - PC & TAB - */
@media (min-width: 940px) {
	.lightbox-inner {
		padding: 40rem 20rem;
		border-radius: 20rem;
		height: 490rem;
		max-width: 1000rem;
	}
	.lightbox-inner-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100%;
	}
	.lightbox-inner .loading-icon {
		width: 60%;
	}
	.lightbox-inner .artist-thumb img {height: 100%;}
	.lightbox-inner .artist-thumb {
		width: 440rem;
		height: 330rem;
	}
	.lightbox-inner .artist-dl {
		padding: 40rem 20rem 40rem 0;
		width: calc(100% - 470rem);
		height: 100%;
		overflow: auto;
	}
	.lightbox-inner .artist-name {
		font-size: 20rem;
	}
	.lightbox-inner .artist-genre,
	.lightbox-inner .artist-info {
		margin-top: 10rem;
	}
	.lightbox-inner .artist-official {
		margin-top: 40rem;
	}
}


/* pre */
.artist-pre-content {
	text-align: center;
	line-height: 2;
}