@charset "UTF-8";



/* gallery --------------------------------------------------------------- */
#gallery {
	width: 100%;
	height: 100vh;
	background-color: #000000;
	position: fixed;
	left: 0;
	top: 0;
	}

	#gallery .top,
	#gallery .middle,
	#gallery .bottom {
		height: calc(100vh/3);
		}

	#gallery .top,
	#gallery .middle,
	#gallery .bottom {
		width: 100%;
		}

		#gallery .top p,
		#gallery .middle p,
		#gallery .bottom p {
			float: left;
			width: calc(100%/4);
			height: 100%;
			box-sizing: border-box;
			overflow: hidden;
			}

			#gallery .top p img,
			#gallery .middle p img,
			#gallery .bottom p img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				filter: grayscale(1);
				}

@media(max-width: 1024px){
	#gallery .top p,
	#gallery .middle p,
	#gallery .bottom p {
		width: calc(100%/1.5);
		}
	}



/* wrapper --------------------------------------------------------------- */
#wrapper {
	background-color: #ffffff;
	}

@media(max-width: 1024px){
	#wrapper {
		width: calc(100vw - 30px);
		margin: 0 auto 0 0;
		}
	}




/* movie --------------------------------------------------------------- */
#movie {
	width: 100%;
	height: 100vh;
	position: relative;
	}

	#movie video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		position: absolute;
		left: 0;
		top: 0;
		}
	
	#movie #mask {
		width: 100%;
		height: 100vh;
		background-color: #000000;
		opacity: 0.35;
		position: absolute;
		left: 0;
		top: 0;
		}

	#movie h1 {
		display: inline-block;
		color: #ffffff;
		line-height: 1;
		transform: translate(0, -50%);
		position: absolute;
		left: 20%;
		top: 46.2%;
		}

		#movie h1 span:first-of-type {
			font-size: 19px;
			line-height: 1;
			letter-spacing: 5px;
			}

		#movie h1 span:last-of-type {
			font-size: 120px;
			line-height: 1;
			letter-spacing: 5px;
			}

@media(max-width: 1024px){
		#movie h1 {
			width: 100%;
			text-align: center;
			transform: translate(-50%, -50%);
			left: 50%;
			top: 50%;
			}

			#movie h1 span:first-of-type {
				font-size: 16px;
				}

			#movie h1 span:last-of-type {
				font-size: 70px;
				}
	}



/* profile --------------------------------------------------------------- */
#profile {
	width: 100%;
	height: 100vh;
	position: relative;

	background-image: url("../../img/home/profile.jpg");
	background-position: right center;
	background-size: auto 100%;
	}

	#profile .profile {
		width: 610px;
		position: absolute;
		left: 10%;
		top: 50%;
		transform: translate(0, -50%);
		}

		#profile .profile h2 {
			margin-bottom: 10px;
			font-size: 14px;
			line-height: 1.3;
			}

			#profile .profile h2 span {
				display: inline-block;
				font-size: 40px;
				letter-spacing: 3px;
				}

		#profile .profile p {
			text-align: justify;
			}

		#profile .profile #discography {
			float: left;
			width: 475px;
			padding-top: 30px;
			overflow: hidden;
			}
			
			#profile .profile #discography ul {
				}

				#profile .profile #discography ul li {
					float: left;
					width: 100px;
					margin: 0 25px 0 0;
					position: relative;
					}

				#profile .profile #discography ul li:last-of-type {
					margin-right: 0;
					}

					#profile .profile #discography ul li p {
						text-align: center;
						}

					#profile .profile #discography ul li p:first-of-type {
						margin-bottom: 10px;
						}

					#profile .profile #discography ul li p:last-of-type {
						line-height: 1.3;
						font-size: 14px;
						}

						#profile .profile #discography ul li p span {
							font-size: 12px;
							}

						#profile .profile #discography ul li p img {
							width: 100%;
							padding: 9px;
							box-sizing: border-box;
							border: #ddd solid 1px;
							border-radius: 10px;
							}
		
		#profile .profile .sns {
			float: right;
			width: 95px;
			margin-top: 37px;
			overflow: hidden;
			}

			#profile .profile .sns a {
				float: left;
				width: 35px;
				margin: 0 15px 15px 0;
				}

			#profile .profile .sns a:nth-of-type(even) {
				margin-right: 0;
				}

				#profile .profile .sns a img {
					width: 100%;
					}

@media(max-width: 1024px){
	#profile {
		height: auto;
		background-image: none;
		}

		#profile .image {
			width: 100%;
			}

			#profile .image img {
				width: 100%;
				}

		#profile .profile {
			width: 90%;
			position: static;
			margin: 0 auto;
			transform: none;
			}

				#profile .profile h2 span {
					font-size: 45px;
					}

			#profile .profile p {
				}

			#profile .profile #discography {
				float: none;
				width: 100%;
				margin: 0 auto 10px auto;
				padding-top: 20px;
				}

				#profile .profile #discography ul {
					}

					#profile .profile #discography ul li {
						width: 47%;
						height: auto;
						margin-right: 6%;
						margin: 0 6% 20px 0;
						}
					
					#profile .profile #discography ul li:last-of-type {
						margin-right: 6%;
						}
					
					#profile .profile #discography ul li:nth-of-type(even) {
						margin-right: 0;
						}

						#profile .profile #discography ul li p:first-of-type {
							margin-bottom: 10px;
							}

						#profile .profile #discography ul li p:last-of-type {
							font-size: 15px;
							}

							#profile .profile #discography ul li p span {
								font-size: 13px;
								}
			
			#profile .profile .sns {
				float: none;
				width: 170px;
				margin: 0 auto;
				}

				#profile .profile .sns a {
					float: left;
					width: 40px;
					margin: 0 25px 0 0;
					}

				#profile .profile .sns a:nth-of-type(even) {
					margin-right: 25px;
					}
				
				#profile .profile .sns a:last-of-type {
					margin-right: 0;
					}
	}



/* schedule --------------------------------------------------------------- */
#schedule {
	width: 1200px;
	margin: 0 auto 100vh auto;
	padding: 50px 0 70px 0;
	overflow: hidden;
	position: relative;
	}

	#schedule .schedule {
		float: left;
		width: 580px;
		height: 200px;

		margin: 0 40px 30px 0;
		border-radius: 50px 20px 20px 20px;
		overflow: hidden;
		position: relative;

		background-color: #efefef;
		}

	#schedule .schedule:nth-of-type(2n) {
		margin-right: 0;
		}

		#schedule .schedule .date {
			float: left;
			width: 200px;
			height: 200px;

			margin-bottom: 10px;
			background-image: url("../../img/home/schedule_date.png");
			background-position: left top;
			background-size: 100% 100%;
			position: relative;
			}

			#schedule .schedule .date p {
				text-align: center;
				line-height: 1;

				position: absolute;
				transform: translate(-50%, 0);
				}

			#schedule .schedule .date p:first-of-type {
				font-size: 50px;
				left: 26%;
				top: 15px;
				}

			#schedule .schedule .date p:last-of-type {
				font-size: 100px;
				left: 63%;
				bottom: 20px;
				}

				#schedule .schedule .date p span {
					font-size: 18px;
					}

		#schedule .schedule .data {
			width: 350px;
			padding: 0 20px 0 0;
			box-sizing: border-box;
			position: absolute;
			right: 0;
			top: 50%;
			transform: translate(0, -50%);
			}
		
			#schedule .schedule .data h2 {
				font-size: 20px;
				font-weight: bold;
				line-height: 1.3;
				margin-bottom: 10px;
				}

			#schedule .schedule .data dl {
				width: 100%;
				display: table;
				line-height: 1.3;
				}

				#schedule .schedule .data dl dt,
				#schedule .schedule .data dl dd {
					display: table-cell;
					vertical-align: top;
					}
				
				#schedule .schedule .data dl dt {
					width: 0;
					}

				#schedule .schedule .data dl:first-of-type {
					margin-bottom: 3px;
					font-size: 18px;
					}
				
				#schedule .schedule .data dl:nth-of-type(2) {
					margin-bottom: 10px;
					padding-bottom: 10px;
					font-size: 15px;
					border-bottom: #fff solid 3px;
					}

					#schedule .schedule .data dl dt a,
					#schedule .schedule .data dl dd a {
						display: inline;
						font-size: 85%;
						line-height: 1.3;
						text-decoration: underline;
						}

			#schedule .schedule .data p,
			#schedule .schedule .data p a {
				line-height: 1.2;
				}

			#schedule .schedule .data p.sml {
				font-size: 13px;
				line-height: 1.2;
				margin-top: 3px;
				}
				
				#schedule .schedule .data p.sml a {
					font-size: inherit;
					text-decoration: underline;
					}

@media(max-width: 1024px){
	#schedule {
		width: 90%;
		margin: 0 auto 100vh auto;
		padding: 50px 0 0 0;
		}

		#schedule .schedule {
			float: none;
			width: 100%;
			height: auto;

			margin: 0 0 30px 0;
			padding: 0 0 20px 0;
			border-radius: 35px 20px 20px 20px;
			overflow: hidden;
			position: relative;

			background-color: #efefef;
			}

		#schedule .schedule:nth-of-type(2n) {
			margin: 0 0 30px 0;
			}

			#schedule .schedule .date {
				float: none;
				width: 150px;
				height: 150px;

				margin-bottom: 0;
				}

				#schedule .schedule .date p:first-of-type {
					font-size: 30px;
					top: 12px;
					}

				#schedule .schedule .date p:last-of-type {
					font-size: 70px;
					}

					#schedule .schedule .date p span {
						font-size: 18px;
						}

			#schedule .schedule .data {
				width: 100%;
				padding: 10px 20px;
				position: static;
				transform: none;
				}
	}



/* navigation --------------------------------------------------------------- */
#navigation {
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	}

	#navigation a {
		float: left;
		height: 60px;
		color: #ffffff;
		text-align: center;
		box-sizing: border-box;
		border-right: #111 solid 1px;

		background-image: url("../../img/navigation/bg_BK.png");
		background-repeat: repeat;

		position: relative;
		}
		
	#navigation a:last-of-type {
		border-right: 0;
		}

		#navigation a p {
			width: 100%;
			line-height: 1.2;
			letter-spacing: 1px;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			}

			#navigation a p span {
				font-size: 10px;
				opacity: 0.5;
				}

	#navigation a.home {
		width: 15%;
		}

	#navigation a.profile {
		width: 18%;
		}

	#navigation a.discography {
		width: 18%;
		}

	#navigation a.schedule {
		width: 18%;
		}

	#navigation a.contact {
		width: 25%;
		}
	
	#navigation a.pagetop {
		width: 6%;
		}

@media(max-width: 1024px){
	#navigation {
		width: 30px;
		height: calc(100dvh - 100px);
		left: auto;
		bottom: auto;

		right: 0;
		top: 100px;
		}

		#navigation a {
			float: none;
			width: 100% !important;
			border-right: 0;
			}

			#navigation a p {
				width: auto;
				font-size: 14px;
				text-align: center;
				writing-mode: vertical-rl;
				line-height: 1;
				letter-spacing: 3px;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				}
		
				#navigation a p span {
					display: none;
					}
					
		#navigation a.home {
			height: 18%;
			}

		#navigation a.profile {
			height: 18%;
			}

		#navigation a.discography {
			height: 30%;
			}

		#navigation a.schedule {
			height: 14%;
			}

		#navigation a.contact {
			height: 20%;
			}
		
		#navigation a.pagetop {
			display: none;
			}
	}

@media(max-width: 320px){
	#navigation {
		height: calc(100vh - 100px);
		}
	}