@charset "utf-8";

@import "compass/reset";
@import "setting";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&family=Poppins:wght@400&display=swap');

// template css

// PC

html{
	font-size:$base-font-size+px;
	line-height:$base-line-height;
}

body {
	@include dff;
	width: 100%;
	height: 100dvh;
	background-color: #000;
	color: #fff;
	position: relative;
	font-weight: 300;
}

a{
	color: inherit;
	text-decoration: none;
	@include tr;
}

img{
	max-width: 100%;
	height: auto;
}

#mainHeader{
	position: fixed;
	width: 100%;
	top: 0; left: 0;
	z-index: 99;
	
	h1{
		position: absolute;
		line-height: 0;
		height: 60px;
		top: 4dvh; left: 3vw;
		z-index: 101;
		@include tr;
		
		img{
			height: 100%;
			width: auto;
		}
	}
	
	#menu_btn{
		position: absolute;
		top: 15px; right: 15px;
		display: flex;
		border: none;
		outline: none;
		width: 60px;
		height: 60px;
		justify-content: center;
		align-items: center;
		background: transparent;
		cursor: pointer;
		z-index: 101;
		
		&:before{
			content: "MENU";
			@include pp(6);
			@include fs(10,1,.1);
			position: absolute;
			top: calc(50% - .5em); bottom: 0; right: 60px;
			color: #fff;
		}
		
		i{
			flex-basis: 50%;
			height: auto;
			aspect-ratio: 16 / 9;
			border-top: solid 2px #fff;
			border-bottom: solid 2px #fff;
			position: relative;
			@include tr;
			
			&:before,&:after{
				content: "";
				display: block;
				width: 100%; height: 2px;
				background-color: #fff;
				position: absolute;
				top: 0; bottom: 0; left: 0; right: 0; margin: auto;
				@include tr;
			}
		}
		
		&.close{
			&:before{
				content: "CLOSE";
			}
			
			i{
				border-color: transparent;
				
				&:before{
					@include rotate(-135deg);
				}
				
				&:after{
					@include rotate(-225deg);
				}
			}
		}
	}
	
	#mainNav{
		position: fixed;
		top: 0; right: -400px;
		z-index: 100;
		background-color: #080808;
		@include box-sizing;
		width: 400px;
		height: 100dvh;
		padding: 100px 30px 30px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		@include tr;
		
		ul.nav{
			@include pp(4);
			@include fs(24,1.2,.15);
			
			li{
				a{
					display: block;
					@include box-sizing;
					padding: .5em 1em;
					background-color: #080808;
					
					&:hover{
						filter: invert(1);
					}
				}
			}
		}
		
		ul.sns{
			display: flex;
			justify-content: space-around;
			@include box-sizing;
			line-height: 0;
			bottom: 0; right: 0;
			z-index: 102;
			
			li{
				flex-basis: 30px;
				a{
					display: block;
					width: 100%; height: auto;
					aspect-ratio: 1 / 1;
					
					img{
						width: 100%; height: auto;
					}
				}
			}
		}
		
		&.open{
			right: 0;
		}
	}
}

#mainContent{
	@include box-sizing;
	width: 100%; height: 100%;
	
	&.index{
		padding-bottom: 15dvh;
	}
	
	#mainWrapper{
		display: flex;
		flex-direction: column;
		width: 100%; height: 100%;
		
		h2.mainTitle{
			text-align: center;
			@include pp(6);
			@include fs(24,1.2,.15);
			margin-bottom: 1em;
		}
		
		#uc{
			text-align: center;
			
			p{
				margin-bottom: 3em;
			}
			
			a{
				@include pp(4);
			}
		}
	}
	
}

#mainFooter{
	position: absolute;
	bottom: 2%; right: 2.5%;
	
	p{
		@include pp(4);
		@include fs(10,1,.1);
		@include opacity(.6);
	}
}

// Large devices (desktops, 992px and up)
@media (max-width: 1199.98px) {
}

// Medium devices (tablets, 768px and up)
@media (max-width: 991.98px) {
}

/// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) {

.container{
	max-height:100%;
}

body{
	-webkit-text-size-adjust: 100%;
	max-height:100%;
}

#mainHeader{
	h1{
		height: 16vw;
		top: 7.5vw; left: 7.5vw;
	}
	
	#menu_btn{
		top: 0; right: 0;
	}
	
	#mainNav{
		top: 0; right: -100vw;
		width: 100vw;
		padding: 40vw 7.5vw 7.5vw;
	}
}

#mainContent{
	@include box-sizing;
	width: 100%; height: 100%;
	
	&.index{
		padding-bottom: 10dvh;
	}
	
}

#mainFooter{
	position: absolute;
	bottom: 2%; right: 5%;
	
	p{
		@include fs(9);
		@include opacity(.6);
	}
}

	
	
}


@media (max-width: 991.98px) and (min-aspect-ratio: 8/5) and (orientation: landscape) {
}