@charset "utf-8";


.l-footer {
	margin-top: 0;
}

.p-splash {
	display: grid;
	place-content: center;
	z-index: 10;
	position: fixed;
	inset: 0;
	background: black;
}
.p-splash.is-skip,
.p-splash.is-ended {
	opacity: 0;
}
.p-splash video {
	min-width: 1920px;
	object-fit: cover;
	transform: scale(.8);
	will-change: transform;
	backface-visibility: hidden;
}
.p-splash video.is-play {
	animation: zoomOut 5.5s linear backwards;
}
.p-splash.is-ended video {
	transform: scale(.7);
}
.p-splash.is-anim {
	transition: opacity .4s cubic-bezier(.1,1,.3,1);
}
.p-splash.is-anim.is-ended {
	transition-duration: .6s;
}
.p-splash.is-anim.is-ended video {
	transition: transform .6s cubic-bezier(.1,1,.3,1);
}
@keyframes zoomOut {
	0% { transform: none; }
	to { transform: scale(.8); }
}
@media screen and (max-width: 767px) {
	.p-splash video {
		min-width: calc(1920vw / 7.68);
	}
}

/**
 * TOP
 * ---------------------------------------- */
.main_visual {
	z-index: 1;
	position: relative;
	min-height: 100vh;
}
.main_visual .visual {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sponsor_container {
	margin-top: 24px;
}

.home_section {
	max-width: 1060px;
	margin: 200px auto;
	padding: 0 20px;
	text-align: center;
}
.home_section .c-button {
	margin-top: 40px;
}
@media screen and (max-width: 767px) {
	.home_section {
		margin: 120px auto;
	}
}

/**
 * STREAM NOW
 * ---------------------------------------- */
.p-stream .c-title {
	z-index: 1;
	position: relative;
	max-width: 10em;
	margin: 0 auto -24px;
}
.p-stream .c-title .main {
	font-size: 48px;
}
.streamlist {
	margin: 0 calc(50% - 50vw);
}
.stream_item {
	width: 160px;
}
.stream_item {
	width: 200px;
	padding: 0 12px 32px;
}
.stream_preview {
	aspect-ratio: 160 / 348;
	box-shadow: 0 8px 24px rgba(214,38,38,.5);
}
.stream_preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(.6) brightness(.8);
}
.stream_player {
	position: absolute;
	bottom: 0;
	left: 25%;
	width: 50%;
	line-height: 1.2;
	font-family: "Fabrikat", sans-serif;
	font-weight: 900;
}
.stream_player figcaption {
	margin: 0 calc(-25% - 12px);
}
.stream_player .name {
	display: block;
	font-size: 24px;
}
.stream_player .team {
	font-size: 10px;
}
@media screen and (min-width: 768px) {
	.p-stream {
		display: none;
	}
}


/**
 * NEWS
 * ---------------------------------------- */
.p-news {
	max-width: 1096px;
}
.p-news .newslist {
	display: flex;
	flex-wrap: wrap;
	margin: 40px auto 0;
}
.p-news .news_item:nth-child(n+3) .subject {
	right: 16px;
	bottom: 0;
	left: 16px;
	height: 48px;
	width: calc(100% - 32px);
}
.p-news .news_item:nth-child(n+3) .category {
	bottom: 46px;
	left: 16px;
}
.p-news .news_item:nth-child(n+3) .date {
	bottom: 46px;
	right: 16px;
}
@media screen and (min-width: 768px) {
	.p-news .news_item {
		flex-basis: calc(50% - 48px);
	}
	.p-news .news_item:nth-child(n+3) {
		flex-basis: calc(33.333% - 32px);
	}
	.p-news .news_item:nth-child(2) {
		margin: 64px 0 0 64px;
	}
	.p-news .news_item:nth-child(n+4) {
		margin-left: 48px;
	}
	.p-news .news_item:nth-child(4) {
		margin-top: 40px;
	}
	.p-news .news_item:nth-child(5) {
		margin-top: 80px;
	}
	.p-news .news_item:nth-child(n+3) .subject {
		height: 42px;
		font-size: 13px;
	}
	.p-news .news_item:nth-child(n+3) .category,
	.p-news .news_item:nth-child(n+3) .date {
		bottom: 40px;
		height: 32px;
	}
	.p-news .news_item .date {
		font-size: 12px;
	}
	.p-news .news_item:nth-child(n+3) .date {
		font-size: 10px;
	}
}
@media screen and (max-width: 767px) {
	.p-news .newslist {
		flex-direction: column;
		max-width: 480px;
		margin-top: 24px;
	}
	.p-news .news_item .subject {
		font-size: 13px;
	}
	.p-news .news_item .category {
		font-size: 14px;
	}
	.p-news .news_item .date {
		font-size: 10px;
	}
	.p-news .news_item:nth-child(n+2) {
		margin-top: 32px;
	}
	.p-news .news_item:nth-child(n+4) {
		display: none;
	}
}


/**
 * MEMBER
 * ---------------------------------------- */
.p-member .c-title .main {
	font-size: 117px;
}
.p-member .c-title .sub {
	margin-bottom: .4em;
	font-size: 20px;
}
.p-member .c-title::before {
	display: none;
}
.member_container {
	position: relative;
	margin: -64px calc(50% - 50vw) 0;
}
.member_container::before,
.member_container::after {
	content: "";
	z-index: 1;
	position: absolute;
	bottom: 0;
	width: 80px;
	height: 120%;
	pointer-events: none;
}
.member_container::before {
	left: 0;
	background: linear-gradient(to right, black, transparent);
}
.member_container::after {
	right: 0;
	background: linear-gradient(to left, black, transparent);
}
@media screen and (min-width: 768px) {
	.p-member .c-button {
		margin-top: 56px;
	}
}
@media screen and (max-width: 767px) {
	.p-member .c-title .main {
		font-size: 64px;
	}
	.p-member .c-title .sub {
		font-size: 16px;
	}
	.member_container {
		margin-top: -40px;
	}
}
@media screen and (max-width: 479px) {
	.member_container::before,
	.member_container::after {
		width: 40px;
	}
}
/* << >> */
.home_section .flickity_arrow.-prev .ar {
	margin-right: -16px;
	filter: drop-shadow(24px 0 0 white) drop-shadow(-6px 0 0 #d62626);
}
.home_section .flickity_arrow.-next .ar {
	margin-right: -16px;
	filter: drop-shadow(-24px 0 0 white) drop-shadow(6px 0 0 #d62626);
}
@media screen and (max-width: 479px) {
	.home_section .flickity_arrow.-prev .ar {
		filter: drop-shadow(16px 0 0 white) drop-shadow(-4px 0 0 #d62626);
	}
	.home_section .flickity_arrow.-next .ar {
		filter: drop-shadow(-16px 0 0 white) drop-shadow(4px 0 0 #d62626);
	}
}


/**
 * CRCUP
 * ---------------------------------------- */
.crcup_banner {
	max-width: 960px;
	margin: 40px auto 0;
}
@media screen and (max-width: 767px) {
	.crcup_banner {
		margin-top: 24px;
	}
}
@media screen and (max-width: 479px) {
	.crcup_banner {
		margin-right: -20px;
		margin-left: -20px;
	}
}


/**
 * VIDEO
 * ---------------------------------------- */
.p-video {
	position: relative;
	max-width: 1120px;
}
.video_container {
	position: relative;
	overflow: hidden;
	margin-right: calc(50% - 50vw);
	margin-left: -40px;
}
.video_container::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 40px;
	background: linear-gradient(to left, transparent, black 80%);
}
.p-video .flickity-viewport {
	overflow: visible;
}
.videolist {
	margin-top: 40px;
	padding: 0 24px 0 40px;
	text-align: left;
}
.video_item {
	width: 514px;
	margin-right: 48px;
}
.video_item figcaption {
	margin-top: 1em;
	font-size: 18px;
	line-height: 1.6;
}
.video_item img {
	box-shadow: 0 8px 24px rgba(214,38,38,.5);
}
@media screen and (max-width: 767px) {
	.videolist {
		margin-top: 24px;
	}
	.video_item figcaption {
		font-size: 15px;
	}
}
@media screen and (max-width: 479px) {
	.video_item {
		width: calc(100% - 40px);
		margin-right: 24px;
	}
}


/**
 * STORE
 * ---------------------------------------- */
.storelist {
	display: flex;
	flex-wrap: wrap;
	max-width: 960px;
	margin: 0 auto;
}
.storelist .store_main {
	flex-basis: 100%;
}
.storelist .store_sub {
	margin-top: 32px;
}
.storelist img {
	box-shadow: 0 8px 24px rgba(214,38,38,.5);
}
@media screen and (min-width: 768px) {
	.storelist {
		justify-content: space-between;
		margin-top: 40px;
	}
	.storelist .store_sub {
		flex-basis: calc(50% - 16px);
	}
}
@media screen and (max-width: 767px) {
	.storelist {
		margin-top: 24px;
	}
}
@media screen and (max-width: 479px) {
	.storelist {
		margin-right: -20px;
		margin-left: -20px;
	}
	.storelist .store_sub {
		margin-top: 24px;
	}
}


/**
 * COLLABO
 * ---------------------------------------- */
.collabolist {
	display: flex;
	margin: 0 auto;
}
.collabolist img {
	box-shadow: 0 8px 24px rgba(214,38,38,.5);
}
@media screen and (min-width: 768px) {
	.collabolist {
		margin-top: 40px;
	}
	.collabolist li:nth-child(2n) {
		margin-left: 48px;
	}
}
@media screen and (max-width: 767px) {
	.collabolist {
		flex-direction: column;
		max-width: 480px;
	}
	.collabolist,
	.collabolist li:nth-child(n+2) {
		margin-top: 24px;
	}
}


/**
 * ABOUT
 * ---------------------------------------- */
.p-about {
	max-width: 1000px;
	margin-top: 312px;
	text-align: left;
}
.p-about .content p {
	margin-top: 32px;
	text-align: justify;
}
.p-about .signature {
	font-size: 13px;
	text-align: right;
}
.p-about .c-button {
	max-width: 376px;
}
@media screen and (min-width: 768px) {
	.p-about .content p {
		line-height: 2.6;
	}
	.p-about .signature {
		float: right;
		margin-top: 104px;
	}
	.p-about .c-button {
		margin-top: 112px;
	}
}
@media screen and (max-width: 767px) {
	.p-about {
		margin-top: 200px;
	}
	.p-about .content p {
		margin-top: 1em;
	}
	.p-about .signature {
		margin-top: 40px;
	}
	.p-about .c-button {
		margin-top: 40px;
	}
}