@charset "UTF-8";
@import url(cmn.css);
@import url(base.css);

main{
	background-color: transparent;
}

/*-------------*/

#mv{
	height: 95vw;
	position: relative;
	z-index: 3;
}
#mv:after{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	transition: 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
	clip-path: polygon(0 0, 100% 0, 100% 160%, 0 100%);
	z-index: 5;
}
.loaded #mv:after{ 
	clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
#bg{
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
	pointer-events: none;
}
#bg img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: 10% 0;
	transform: rotate(20deg) scale(1.5);
	transition: 1s cubic-bezier(0.23, 1, 0.32, 1);
}
.loaded #bg img{
	transform: rotate(0) scale(1);
}
#kobe{
	position: absolute;
	z-index: 4;
	top: 0;
	left: 0;
	width: 100%;
	pointer-events: none;
}
#kobe img{
	display: block;
	max-width: 90%;
	margin: 0 auto;
	transform-origin: 50% 10%;
	transform: rotate(20deg) scale(1.8);
	transition: 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.loaded #kobe img{
	transform: rotate(0) scale(1);
}
.m #kibe{
	transition: 0.3s ease-out;
}
#t,
#t2{
	color: #fff;
	position: relative;
	z-index: 3;
	text-transform: uppercase;
	text-align: center;
	text-align: right;
	line-height: 0.8;
	font-size: 10vw;
	padding: 30vw 5vw 0;
	opacity: 0;
	transition: 1.8s cubic-bezier(0.23, 1, 0.32, 1);
	transform: translateX(100px);
	pointer-events: none;
}
#t2{
	position: absolute;
	top: 0;
	right: 0;
	z-index: 5;
	width: 100%;
}
#t img,
#t2 img{
	display: block;
	width: 80%;
	margin-left: 20%;
}
.loaded #t,
.loaded #t2{
	opacity: 1;
	transform: translateY(0);
}
#ar{
	display: block;
	background: url(../images/bg.jpg) 50% 0% no-repeat;
	background-size: cover;
	width: 100%;
	height: 30vw;
	position: absolute;
	bottom: -55vw;
	left: 0;
	z-index: 1;
	opacity: 0;
	filter: brightness(50) blur(5px);
	clip-path: polygon(0 200%, 0 0, 0 0, 0 120%);
	transition: 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s;
	pointer-events: none;
}
#ar.delayActive{
	filter: brightness(1) blur(5px);
	opacity: 1;
	clip-path: polygon(0 0, 100% 90%, 100% 100%, 0 60%);
}
@media screen and (max-width: 1200px){
	#mv{
		height: 110vw;
	}
	#kobe{
		padding-top: 50px;
	}
	#t,
	#t2{
		padding: 60px 30px 0;
		height: 87%;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: flex-end;
	}
}
@media screen and (max-width: 850px){
	#t img,
	#t2 img{
		width: 90%;
		margin-left: 10%;
	}
	#kobe img{
		max-width: 97%;
	}
	#t,
	#t2{
		padding-left: 20px;
		padding-right: 20px;
	}
}
@media screen and (max-width: 700px){
	#mv{
		height: 105vw;
	}
}
@media screen and (max-width: 600px){
	#mv{
		height: 170vw;
	}
	#t,
	#t2{
		height: 80%;
	}
	#t img,
	#t2 img{
		width: 80%;
		margin-left: 30%;
	}
	#kobe{
		padding-top: 50px;
	}
	#kobe img{
		max-width: none;
		width: 140%;
		margin-left: -11vw;
	}
}

/*-------------*/

#s1{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	position: relative;
	pointer-events: none;
	z-index: 4;
}
	
#s1 .t{
	width: 45%;
	position: relative;
	z-index: 3;
	padding-left: calc((100vw - 1550px)/2);
	overflow: visible;
	text-align: right;
	padding-left: 60px;
}
#s1 .t .inner{
	width: 110%;
}
#s1 .p{
	width: 55%;
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	z-index: 2;
	pointer-events: none;
}
#s1 .t h3{
	margin-top: 40px;
	font-size: 9rem;
	letter-spacing: -0.07em;
}
#s1 .t h3 i{
	line-height: 0.8;
}
#s1 .t h3 span.y{
	color: #f3fc00;
}
#s1 .t p{
	margin-top: 10px;
	line-height: 1.6;
	font-size: 2.6rem;
	font-weight: bold;
}
#s1 .t p span{
	display: inline-block;
}
@media screen and (max-width: 1350px){
	#s1 .t .inner{
		width: 120%;
	}
	#s1 .t h3{
		font-size: 7.2vw;
	}
	#s1 .t p{
		font-size: 2.4rem;
	}
}
@media screen and (max-width: 850px){
	#s1{
		margin-top: -5vw;
		flex-wrap: wrap;
	}
	#s1 .p{
		width: 70%;
		order: 1;
	}
	#s1 .t{
		width: 100%;
		order: 2;
		padding: 0 20px;
		margin-top: -30vw;
	}
	#s1 .t .inner{
		width: 100%;
		text-align: left;
	}
	#s1 .t h3{
		font-size: 10vw;
	}
	#s1 .t p{
		font-size: 2.6rem;
	}
}
@media screen and (max-width: 600px){
	#s1 .t h3{
		font-size: 13vw;
	}
}

/*-------------*/

#cheep{
	margin-top: -8vw;
}
#touchspot{
	position: relative;
	margin-top: 60px;
	width: 100%;
}
#touchspot a{
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 1000px;
}
#touchspot img{
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: none;
}
#cheep:has(#touchspot){
	padding-bottom: 60px;
	margin-bottom: 410px;
}
@media screen and (max-width: 1200px){
	#touchspot a{
		max-width: 80%;
	}
	#cheep:has(#touchspot){
		padding-bottom: 4vw;
		margin-bottom: 36vw;
	}
}
@media screen and (max-width: 768px){
	#touchspot{
		margin-top: 50px;
	}
	#touchspot a{
		max-width: 100%;
	}
	#cheep:has(#touchspot){
		margin-bottom: 39vw;
	}
}

/*-------------*/

#s2{
	padding-bottom: 10vw;
	margin-top: -8vw;
}
#cheep+#s2{
	margin-top: 0;
	padding-top: 100px;
}
#s2 h3{
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 30px;
}
#s2 .inner{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0 auto;
	position: relative;
}
#s2 .t{
	width: 48%;
	max-width: 744px;
	margin-left: 4%;
	order: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	position: relative;
	z-index: 3;
	padding-right: 30px;
	opacity: 0;
	transform: scale(1.4);
	transform-origin: 20% 50%;
	transition: 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
}
#s2_2 .t{
	transform-origin: 80% 50%;
}
#s2 .delayActive2 .t{
	opacity: 1;
	transform: scale(1);
}
#s2 .t>*{
	width: 100%;
	text-shadow: 5px 5px 20px rgba(0,0,0,0.2);
}
#s2 .t h4{
	font-size: 9.2rem;
	line-height: 0.9;
	order: 2;
	font-weight: 900;
	letter-spacing: -0.05em;
}
#s2 .t h4 span{
	color: #f3fc00;
}
#s2 .t p{
	order: 3;
	font-size: 2.5rem;
	font-weight: bold;
}
#s2 .t i{
	order: 1;
	font-size: 4rem;
	font-weight: 900;
	letter-spacing: -0.05em;
}
#s2 .t div{
	order: 4;
}
#s2 .p{
	width: 48%;
	max-width: 744px;
	order: 1;
	position: relative;
	z-index: 2;
}
#s2 .p span{
	position: relative;
	display: block;
	width: 100%;
	height: 0;
	padding-bottom: 130%;
	transition: 0.3s ease-out;
}
#s2 .p span a{
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#s2 .p span a img{
	position: absolute;
	top: 0;
	left: 0;
	max-width: none;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: 0.3s ease-out;
}
#s2 .p span a:hover img{
	top: -5%;
	left: -5%;
	width: 110%;
	height: 110%;
}
#s2_2,
#s2_3{
	margin-top: -50px !important;
}
#s2_2 .t{
	order: 1;
	width: 56%;
	max-width: 868px;
	margin-left: 0;
	margin-right: 4%;
	text-align: right;
	padding-right: 0;
	padding-left: 30px;
}
#s2_2 .p{
	order: 2;
	width: 40%;
	max-width: 620px;
}
#s2_3 .t,
#s2_3 .p{
	max-width: 624px;
}
#s2 .ar{
	display: block;
	background: url(../images/bg.jpg) 50% 10% no-repeat;
	background-size: cover;
	width: 100%;
	height: 30vw;
	position: absolute;
	bottom: 10vw;
	left: 0;
	z-index: 1;
	filter: brightness(50) blur(5px) opacity(0);
	clip-path: polygon(20% 100%, 20% 80%, 20% 0, 20% 50%);
	transition: 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
	pointer-events: none;
}
#s2 .p:hover~.ar{
	transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
	filter: brightness(1) blur(5px) opacity(1);
	clip-path: polygon(-5% 95%, 120% 0, 100% 70%, -5% 95%);
}
#s2_2 .ar{
	bottom: 5vw;
	background: url(../images/bg.jpg) 50% 50% no-repeat;
	background-size: cover;
	clip-path: polygon(80% 100%, 80% 80%, 80% 0, 80% 50%);
}
#s2_2 .p:hover~.ar{
	clip-path: polygon(-5% 10%, 120% 90%, 100% 70%, -5% 50%);
}
#s2_3 .ar{
	bottom: 15vw;
	background: url(../images/bg.jpg) 50% 80% no-repeat;
	background-size: cover;
	clip-path: polygon(20% 100%, 20% 80%, 20% 0, 20% 50%);
}
#s2_3 .p:hover~.ar{
	clip-path: polygon(-5% 95%, 120% 0, 100% 70%, -5% 95%);
}
#s2 .pf{
	order: 5;
	margin: 20px 0 0;
	overflow: hidden;
}
#s2 .pf img{
	display: block;
	max-width: 100%;
	max-height: 20px;
}
#s2_2 .pf{
	text-align: right;
}
#s2_2 .pf img{
	margin: 0 0 0 auto;
}
#s2_3 .pf{
	width: 98.5%;
	max-width: 498px;
}
#s2_3 .pf img{
	max-width: none;
	width: 119%;
	max-height: none;
}
@media screen and (max-width: 1400px){
	#s2 .t h4{
		font-size: 6.5vw;
	}
	#s2 .t i{
		font-size: 3vw;
	}
}
@media screen and (max-width: 1050px){
	#s2 .t p{
		font-size: 2.3vw;
	}
}
@media screen and (max-width: 850px){
	#s2{
		margin-top: 100px;
	}
	#s2 h3{
		padding: 0 20px;
	}
	#s2 .inner{
		flex-wrap: wrap;
	}
	#s2_1.inner,
	#s2_2.inner{
		margin-bottom: 10vw;
	}
	#s2_2.inner,
	#s2_3.inner{
		margin-top: 0 !important;
	}
	#s2 .t{
		order: 2;
		max-width: none;
		width: 80%;
		padding: 0 20px !important;
		margin: -15vw auto 0;
	}
	#s2 .t h4{
		font-size: 8vw;
	}
	#s2 .p{
		order: 1;
		max-width: none;
		width: 70%;
		padding: 0 30px !important;
		margin: 0 auto;
	}
	#s2 .p span:before{
		content: "";
		display: block;
		width: 100%;
		height: 40%;
		position: absolute;
		bottom: 0;
		left: 0;
		background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.7));
		z-index: 1;
		pointer-events: none;
	}
	#s2 .ar{
		height: 50vw;
	}
	#s2_1 .ar{
		bottom: 30vw;
	}
	#s2_2 .ar{
		bottom: 25vw;
	}
	#s2_3 .ar{
		bottom: 35vw;
	}
	#s2_3 .pf{
		width: 83.5%;
	}
	#s2_3 .pf img{
		max-height: 19.7px;
	}
}
@media screen and (max-width: 700px){
	#cheep+#s2{
		padding-top: 80px;
	}
	#s2 .t{
		width: 95%;
		margin-top: -20vw;
	}
	#s2 .t h4{
		font-size: 12vw;
	}
	#s2 .t i{
		font-size: 5vw;
	}
	#s2 .t p{
		font-size: 4vw;
	}
	#s2 .p{
		margin-right: 30%;
		padding: 0 !important;
	}
	#s2_2 .p{
		margin-left: 30%;
		margin-right: 0;
	}
	#s2 .ar{
		height: 60vw;
	}
	#s2_1 .ar{
		bottom: 40vw;
	}
	#s2_2 .ar{
		bottom: 35vw;
	}
	#s2_3 .ar{
		bottom: 45vw;
	}
	#s2_1 .p:hover~.ar,
	.m #s2_1.delayActive .ar{
		clip-path: polygon(-5% 95%, 120% 0, 100% 70%, -5% 95%);
	}
	#s2_2 .p:hover~.ar,
	.m #s2_2.delayActive .ar{
		clip-path: polygon(-5% 0, 120% 90%, 100% 70%, -5% 70%);
	}
	#s2_3 .p:hover~.ar,
	.m #s2_3.delayActive .ar{
		clip-path: polygon(-5% 95%, 120% 0, 100% 70%, -5% 95%);
	}
	.m #s2_1.delayActive .ar,
	.m #s2_2.delayActive .ar,
	.m #s2_3.delayActive .ar{
		transition: 0.5s ease-out 0.5s;
		filter: brightness(1) blur(5px) opacity(1);
	}
}
@media screen and (max-width: 400px){
	#s2 .t{
		width: 100%;
	}
}

/*--*/

#s2 .p span:after{
	content: "";
	display: block;
	width: 0;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #f3fc00;
	z-index: 2;
}
#s2 .delayActive2 .p span:after{
	animation: load 0.9s ease 0.5s forwards;
}
@keyframes load{
	0%{
		left: 0;
		width: 0;
		background: #f3fc00;
	}
	24%{
		left: 0;
		width: 100%;
		background: #fff;
	}
	75%{
		left: 0;
		width: 100%;
		background: #fff;
	}
	100%{
		left: 100%;
		width: 0;
		background: #f3fc00;
	}
}
#s2 .p span img{
	opacity: 0;
	transform: scale(1.2);
}
#s2 .delayActive2 .p span img{
	animation: loadimg 2.7s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s forwards;
}
@keyframes loadimg{
	0%{
		opacity: 0;
	}
	8%{
		opacity: 0;
	}
	16%{
		opacity: 1;
		transform: scale(1.2);
	}
	90%{
		opacity: 1;
		transform: scale(1);
	}
	100%{
		opacity: 1;
		transform: scale(1);
	}
}

/*-------------*/

#order{
	padding: 10vw 20px 18vw;
}
@media screen and (max-width: 500px){
	#order{
		padding: 15vw 20px 22vw;
	}
}

/*-------------*/

#s3{
	background: #f3fc00;
	color: #111;
	transform: skewY(-7deg);
	transform-origin: 0 0;
	padding: 7vw 30px 8vw;
}
#s3 .inner{
	transform: skewY(7deg);
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
	max-width: 1400px;
	margin: 0 auto;
}
#s3 h3{
	text-align: center;
	width: 100%;
	margin-bottom: 40px;
	font-size: 15rem;
	padding: 0 5%;
}
#s3 h3 i{
	display: block;
	line-height: 0.8;
}
#s3 .tw{
	width: 30%;
	position: relative;
	display: flex;
	align-items: stretch;
}
#s3 .tw .twitter-timeline{
	overflow: scroll;
	height: 100%;
	width: 100% !important;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 12px;
}
#s3 .tw iframe{
	max-height: 100% !important;
	width: 100% !important;
}
#s3 .outer{
	overflow: hidden;
	position: relative;
	width: 68%;
	width: 100%;
}
#s3 article{
	width: 40%;
	float: left;
}
#s3 article:nth-of-type(1){
	width: 60%;
	padding-right: 1px;
}
#s3 article:nth-of-type(2){
	padding-bottom: 1px;
}
#s3 article:nth-of-type(2),
#s3 article:nth-of-type(3){
	height: 50%;
}
#s3 article a{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	align-content: flex-end;
	justify-content: flex-start;
	position: relative;
	overflow: hidden;
	width: 100%;
	padding: 15px;
	background: #000;
}
#s3 article:nth-of-type(1) a{
	aspect-ratio: 4/3.2;
}
#s3 article:nth-of-type(2) a,
#s3 article:nth-of-type(3) a{
	height: 100%;
}
#s3 article a:before{
	content: "";
	display: block;
	width: 100%;
	height: 35%;
	background: #000;
	position: absolute;
	bottom: 0;
	left: 0;
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%);
	z-index: 2;
}
#s3 article h4,
#s3 article p{
	position: relative;
	z-index: 4;
	width: 100%;
	margin: 0;
	order: 1;
	color: #fff;
	font-size: 1.55rem;
	text-align: left;
	font-weight: bold;
}
#s3 article h4{
	order: 2;
	font-size: 2rem;
	margin-top: 5px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	line-height: 1.4;
}
#s3 article div{
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: 0.3s;
}
#s3 article a:hover div{
	width: 105%;
	height: 105%;
	top: -2.5%;
	left: -2.5%;
	opacity: 0.7;
}
#s3 article div img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}
#s3 .outer.upcoming:after{
	content: "UPCOMING!";
	position: absolute;
	top: calc(50% - 40px);
	left: calc(50% - 240px);
	background: #f3fc00;
	font-size: 7rem;
	line-height: 1;
	padding: 2px 10px;
	pointer-events: none;
	display: block;
	transform: rotate(-3deg);
	color: #000;
	z-index: 4;
	font-weight: 900;
	letter-spacing: -0.05em;
}
#s3 .upcoming a h4,
#s3 .upcoming a p{
	filter: blur(5px);
}
#s3 .upcoming a img{
	filter: grayscale(100%) brightness(0.4) blur(10px);
	transform: scale(1.1);
}
#s3 ul{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	width: 100%;
	padding-top: 40px;
}
#s3 ul li{
	display: flex;
	align-items: stretch;
	justify-content: center;
	margin: 0 10px 10px;
}
#s3 ul li a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 280px;
}
@media screen and (max-width: 1000px){
	#s3 .tw{
		width: 49%;
	}
	#s3 .outer{
		width: 49%;
	}
	#s3 article{
		height: auto !important;
	}
	#s3 article:nth-of-type(1){
		width: 100%;
		padding: 0 0 1px;
	}
	#s3 article:nth-of-type(2),
	#s3 article:nth-of-type(3){
		width: 50%;
	}
	#s3 article:nth-of-type(2){
		padding-right: 1px;
	}
	#s3 article a{
		aspect-ratio: 4/3.6;
		height: auto !important;
	}
	#s3 article:nth-of-type(1) a{
		aspect-ratio: 4/2.6 !important;
	}
	#s3 .outer.upcoming:after{
		top: calc(50% - 50px);
		left: calc(50% - 150px);
		font-size: 6rem;
	}
}
@media screen and (max-width: 850px){
	#s3{
		padding: 8vw 20px 9vw;
	}
}
@media screen and (max-width: 800px){
	#s3 h3{
		font-size: 90px;
		margin-bottom: 30px;
	}
	#s3 .tw{
		max-width: 700px;
		width: 100%;
		height: 50vw;
		min-height: 400px;
		margin: 0 auto;
	}
	#s3 .outer{
		max-width: 700px;
		width: 100%;
		margin: 0 auto 20px;
	}
	#s3 article a{
		aspect-ratio: 4/3;
	}
	#s3 article:nth-of-type(1) a{
		aspect-ratio: 4/2 !important;
	}
	#s3 ul{
		padding-top: 30px;
	}
}
@media screen and (max-width: 550px){
	#s3 article{
		width: 100% !important;
	}
	#s3 article:nth-of-type(1) a,
	#s3 article a{
		aspect-ratio: 4/3 !important;
	}
	#s3 .outer.upcoming:after{
		top: calc(50% - 20px);
		left: calc(50% - 105px);
		font-size: 4rem;
	}
}
@media screen and (max-width: 420px){
	#s3 h3{
		font-size: 18vw;
	}
	#s3 .tw{
		width: 100%;
	}
	#s3 .outer{
		width: 100%;
	}
	#s3 ul li a{
		width: 240px;
	}
}

/*-------------*/

footer{
	opacity: 0;
	pointer-events: none;
}
footer.active{
	opacity: 1;
	z-index: 2;
	pointer-events: auto;
}