@charset "utf-8";

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

// template css

// PC

html,body{
	max-width: 100%;
	overflow-x: clip;
	overflow-y: visible;
	font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
}

:root{
	font-size: 1.25vw;
}

body {
	@include dff;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	color: #444;
}

a{
	color: inherit;
	text-decoration: none;
	transition: all .6s ease 0s;
	
	&:hover{
		opacity: .7;
	}
	
}

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

// form reset for iOS	
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    outline: none;
	padding-right: 1em !important;
    background: url("../img/selectArrow.svg") right .5em center no-repeat;
	background-size: .5em auto;
}

button,
input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
}

#preloader{
	background-color: #fff;
	position: fixed;
	width: 100%; height: 100%;
	z-index: 99999;
	top: 0; left: 0;
}

#mainHeader{
	position: fixed;
	width: 100%;
	height: 5rem;
	top: 0; left: 0;
	z-index: 99;
	
	h1{
		position: absolute;
		line-height: 0;
		top: 1.625rem; left: 2rem;
		margin-bottom: 0;
		z-index: 101;
		transition: all .6s ease 0s;
		
		img{
			width: 6.25rem; height: auto;
		}
	}
	
	#menu_btn{
		position: absolute;
		top: 0; right: 0;
		width: 5rem; height: 5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 102;
		
		i{
			width: 2.75rem; height: 1.5rem;
			border-top: solid 0.125rem #000;
			border-bottom: solid 0.125rem #000;
			position: relative;
			transition: all .6s ease 0s;
			
			&::before,&::after{
				content: "";
				width: 100%; height: 0.125rem;
				background-color: #000;
				position: absolute;
				top: 0; left: 0; right: 0; bottom: 0;
				margin: auto;
				transition: all .6s ease 0s;
			}
		}
	}
	
	#mainNav{
		position: fixed;
		top: 0; right: 0;
		background: url("../img/bg_mv.webp") right bottom no-repeat $c1;
		background-size: 42% auto;
		color: #fff;
		box-sizing: border-box;
		width: 100%;
		height: 100dvh;
		padding: 7.5rem 0;
		display: flex;
		align-items: center;
		transition: all .6s ease 0s;
		opacity: 0;
		z-index: -1;
		pointer-events: none;
		
		ul{
			margin-left: 11%;
			li{
				margin-bottom: p2r(50);
				
				strong{
					display: inline-block;
					@include din(4);
					@include fs(60,60,0);
					margin-right: .25em;
				}
				
				span{
					@include fs(12,12,.1);
				}
			}
		}
		
		p.copy{
			@include fs(12,12,.05);
			font-weight: 100;
			position: absolute;
			bottom: p2r(30); left: p2r(50);
		}
	}
	
	#sns-link{
		position: fixed;
		bottom: 2.5rem; right: 1rem;
		z-index: 101;
		line-height: 0;
		
		a{
			display: inline-block;
			padding: 0.375rem;
			
			img{
				width: 1.75rem;
			}
		}
	}
	
	&.open{
		h1{
			filter: brightness(0) invert(1);
		}
		
		#menu_btn{
			i{
				border-color: transparent;
				
				&::before,&::after{
					background-color: #fff;
				}
				
				&::before{
					transform: rotate(-135deg);
				}
				&::after{
					transform: rotate(-225deg);
				}
			}
		}
		
		#mainNav{
			opacity: 1;
			z-index: 100;
			pointer-events: auto;
		}

		#sns-link{
			filter: invert(1);
		}
	}
}

#mainContent{
	
}

#mainFooter{
	padding: p2r(56) 0;
	
	.logo{
		line-height: 0;
		
		img{
			width: p2r(124);
		}
	}
	
	address{
		margin: p2r(40) auto;
		color: #777;
		
		p{
			@include fs(12,20,.075);
			margin: 0;
		}
	}
	
	#copy{
		color: #000;
		font-weight: 100;
		@include fs(12,34,.05);
	}
}

@media (min-width: 1280px) {
	:root{
		font-size: 16px;
	}
}

// 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) {

:root{
	font-size: 2.13vw;
}

.container{
	max-height:100%;
}

body{
	max-height:100%;
	@include fs(26);
}

#mainHeader{
	height: p2r(100);
	
	h1{
		top: p2r(30); left: p2r(36);
		
		img{
			width: p2r(140);
		}
	}
	
	#menu_btn{
		width: p2r(100); height: p2r(100);
		
		i{
			width: p2r(40); height: p2r(24);
			border-top: solid p2r(2) #000;
			border-bottom: solid p2r(2) #000;
			
			&::before,&::after{
				height: p2r(2);
			}
		}
	}
	
	#mainNav{
		background-size: 73% auto;
		padding: p2r(100) 0;
		
		ul{
			margin-left: 16%;
			li{
				margin-bottom: p2r(60);
				
				strong{
					display: block;
					@include fs(75,75,0);
					margin-right: 0;
				}
				
				span{
					@include fs(22,38,.1);
				}
			}
		}
		
		p.copy{
			@include fs(20,59,.05);
			bottom: p2r(35); left: p2r(60);
		}
	}
	
	#sns-link{
		top: 0; bottom: 0;
		
		a{
			padding: p2r(4);
			
			img{
				width: p2r(28);
			}
		}
		
		ul{
			margin-bottom: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 100%;
			gap: p2r(20);
		}
	}
}

#mainContent{
	
}

#mainFooter{
	padding: p2r(80) 0;
	
	.logo{
		img{
			width: p2r(216);
		}
	}
	
	address{
		margin: p2r(70) auto;
		
		p{
			@include fs(22,36,.075);
		}
	}
	
	#copy{
		@include fs(20,59,.05);
	}
}

	
	
}


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