@charset "UTF-8";

/* L1 ########################################  ######################################## */
/* L2 ****************************************  **************************************** */
/* L3 ========================================  ======================================== */
/* L4 ----------------------------------------  ---------------------------------------- */

/* #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# PC・スマホ 共通設定 #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# */

body {
	background: linear-gradient(-45deg, #f9c2eb, #a8c2ee, #c2f9d0, #ffdea5) fixed;
	background-size: 800% 800%;
 	animation: gradient-body 25s ease infinite;
 	font-size: 16px !important;
}


@keyframes gradient-body {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

/* L1 ######################################## コンテンツ ######################################## */

#contents {
	position: relative;
    margin-inline: auto;
    padding-inline: 4%;
    
    font-size: 100%;
}

/* L1 ######################################## タイトル ######################################## */

#title {
	width: 100%;
	margin: 0 auto;
	padding: 5em 0 0 0;
	color: #008ccf;
	text-align: center;
	line-height: 1.2;
}

#title p.main {
	font-family: "Ubuntu Condensed";
	font-size: clamp(2rem, 1.111rem + 5.93vw, 10rem);
}

#title p.sub {
	font-family: "Kosugi Maru";
	font-size: clamp(1.5rem, 1.222rem + 1.85vw, 4rem);
}

/* L1 ######################################## コンセプト ######################################## */

#concept {
	width: 100%;
	max-width: 1200px;
	margin: 2em auto;
	padding: 0 4%;
	color: #333333;
	font-size: clamp(1rem, 0.833rem + 1.11vw, 2.5rem);
	text-align: center;
	
	box-sizing: border-box;
}

#concept br.mobile {
	display: none;
}


/* L1 ######################################## バナー ######################################## */

section.banner {
	margin: clamp(4rem, 3.333rem + 4.44vw, 10rem) 0;
	color: #ffffff;
	text-align: center;
}

section.banner img {
	max-width: 950px;
	width: 100%;
}


/* L1 ######################################## ラインナップ ######################################## */

#line-up {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	gap: 50px 15px;
	font-size: clamp(1rem, 0.782rem + 1.09vw, 1.6rem);
	box-sizing: border-box;
	
	opacity: 1;
	transition: opacity 0.2s linear;
}

/* L2 **************************************** タイトル **************************************** */

#line-up > h2 {
	position: relative;
	color: #008040;
	margin-bottom: 0.5em;
	padding: 0.4em 0;
	font-family: "Kosugi Maru";
	font-weight: normal;
	text-align: center;
	line-height: 1.0;
}
#line-up > h2::before {
	content: "\f001";
	display: inline-block;
	margin-right: 0.6em;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
}

/* L2 **************************************** 個別 **************************************** */

div.item {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 6;
	gap: 0;
	position: relative;
	border: 1px solid #999999;
	background: rgba(240, 240, 240, 0.85);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
}

div.item.new::before {
	content: "new";
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	inset-block-start: 5px;
	inset-inline-start: 5px;
	z-index: 10;
	width: 60px;
	color: #ffffff;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	line-height: 1.0;
	white-space: nowrap;
	background: linear-gradient(#ff6600, #cc0000);
	animation: r 5s infinite;
	
	aspect-ratio: 1;
	clip-path: polygon(100% 50%,94.75% 54.7%,98.91% 60.4%,92.8% 63.91%,95.68% 70.34%,88.97% 72.5%,90.45% 79.39%,83.44% 80.11%,83.46% 87.16%,76.45% 86.41%,75% 93.3%,68.3% 91.11%,65.45% 97.55%,59.36% 94.02%,55.23% 99.73%,50% 95%,44.77% 99.73%,40.64% 94.02%,34.55% 97.55%,31.7% 91.11%,25% 93.3%,23.55% 86.41%,16.54% 87.16%,16.56% 80.11%,9.55% 79.39%,11.03% 72.5%,4.32% 70.34%,7.2% 63.91%,1.09% 60.4%,5.25% 54.7%,0% 50%,5.25% 45.3%,1.09% 39.6%,7.2% 36.09%,4.32% 29.66%,11.03% 27.5%,9.55% 20.61%,16.56% 19.89%,16.54% 12.84%,23.55% 13.59%,25% 6.7%,31.7% 8.89%,34.55% 2.45%,40.64% 5.98%,44.77% 0.27%,50% 5%,55.23% 0.27%,59.36% 5.98%,65.45% 2.45%,68.3% 8.89%,75% 6.7%,76.45% 13.59%,83.46% 12.84%,83.44% 19.89%,90.45% 20.61%,88.97% 27.5%,95.68% 29.66%,92.8% 36.09%,98.91% 39.6%,94.75% 45.3%);
}

@keyframes r {
	0%{
		rotate: -45deg;
	}
	
	50% {
		rotate: 45deg;
	}
	
	100% {
		rotate: -45deg;
	}
}

/* L3 ======================================== カバー  ======================================== */

div.item img {
	width: 100%;
}

/* L3 ======================================== タイトル・カテゴリー  ======================================== */

div.item div.playlist {
	padding: 0.8em 4%;
	background: rgba(0, 0, 0, 0.1);
}

div.item p.title {
	color: #cc0000;
	font-size: 150%;
	font-weight: bold;
	line-height: 1.4;
}

div.item p.category {
	color: #333333;
	font-size: 120%;
	font-weight: bold;
}

div.item p.category::before {
	content: "\f025";
	position: relative;
	margin-inline-end: 0.5em;
	font-family: "FontAwesome";
}

div.item p.category a {
	color: #333333 !important;
}

/* L3 ======================================== インフォ ======================================== */

div.item p.info {
	margin: 0.5em 4%;
}

/* L3 ======================================== リンクファイア ======================================== */

div.item p.link {
	position: relative;
	z-index: 1;
	margin-block-end: 0.5em;
	text-align: center;
    background: #336699;
	background-image: linear-gradient(45deg, transparent 0%, transparent 45%, rgba(255, 255, 255, 0.6) 50%, transparent 55%, transparent 100%);
	background-size: 1200% 400%;
	animation: gradient-link 10s infinite cubic-bezier(0.62, 0.28, 0.23, 0.99) both;
}

div.item p.link::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
    background-image: linear-gradient(0, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.05) 100%);
}

@keyframes gradient-link {
  0% {
    background-position: 0% 50%;
  }
  
  20% {
    background-position: 0% 50%;
  }
  
  70% {
    background-position: 100% 50%;
  }
  
  100% {
    background-position: 100% 50%;
  }
}

/*
div.item p.link::before {
	content: "";
	position: absolute;
	content: '';
	inset-block-start: 100%;
	inset-inline-start: 0;
	border-block-end: solid 3px transparent;
	border-inline-end: solid 6px rgb(51, 102, 153, 0.5);
}

div.item p.link::after {
	position: absolute;
	content: '';
	inset-block-start: 100%;
	inset-inline-end: 0;
	border-block-end: solid 3px transparent;
	border-inline-start: solid 6px rgb(51, 102, 153, 0.5);
}
*/

div.item p.link a {
	position: relative;
	z-index: 3;
    display: block;
    padding-block: 1em;
    color: #ffffff;
    font-weight: bold;
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2);
    transition: color 0.3s linear;
}

div.item p.link a::before {
	content: "\f0c1";
	display: inline-block;
	position: relative;
	margin-inline-end: 0.3em;
	font-family: "FontAwesome";
}

div.item p.link a:hover {
    color: #ffff00;
}

/* L3 ======================================== プレイヤーセレクタ ======================================== */

div.item ul.selecter {
	list-style-type: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	align-content: start;
	gap: 2px;
	margin: 0.5em;
}

div.item ul.selecter li {
	cursor: pointer;
	padding-block: 0.2em;
	font-family: "Ubuntu Condensed";
	font-size: 95%;
	text-align: center;
	white-space: nowrap;
	border: 1px solid #666666;
	border-radius: 5px;
	box-sizing: border-box;
	transition: background-color 0.3s linear;
}

div.item ul.selecter li:hover {
	background-color: #ffffff;
}

div.item ul.selecter li.selected {
	color: #cc0000;
	background: linear-gradient(rgba(0, 0, 0, 0.1), transparent);
}

div.item ul.selecter li.selected::before {
	content: "\f00c";
	position: relative;
	margin-inline-end: 0.3em;
	font-family: "FontAwesome";
}

/* L3 ======================================== プレイヤー ======================================== */

div.item div.players {
	margin: 0.5em;
}

div.item div.group {
	position: relative;
	height: 450px;
	content-visibility: auto;
	contain-intrinsic-size: 450px;
}

div.item div.group div {
	display: none;
	position: relative;
	z-index: 10;
}

div.item div.group div.selected {
	display: block;
	z-index: 20;
}

div.item iframe {
	position: absolute;
	overflow:hidden;
	width: 100%;
	height: 450px;
	border-radius: 10px;
}

/* #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# PC・スマホ 共通設定 ここまで #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# */