@charset "utf-8";
header {
	width: 92.5%;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	z-index: 1000;
}
header nav {
	top: 0.4vw;
	right: 4vw;
	transform: rotate(90deg);
}
header nav p a,
header nav.show p a {
	display: inline-block!important;
	font-size: 1.1vw;
}
@media (max-width: 1023.98px) {
	header nav {
		transform: rotate(90deg) translateX(-10%) translateY(7vw);
		opacity: 0!important;
		transition: transform .3s ease, opacity .3s ease;
	}
	header nav.show {
		transform: rotate(90deg) translateX(0) translateY(7vw);
		opacity: 1!important;
	}
	header .menu-trigger {
		display: inline-block;
		position: absolute;
		width: 10vw;
		height: 4vw;
		top: 8vw;
		right: -3vw;
		margin: 0;
		padding: 0;
		background: none;
		border: none;
		appearance: none;
		pointer-events: auto;
		z-index: 1040;
		transform: rotate(90deg);
	}
	header .menu-trigger span {
		display: inline-block;
		position: absolute;
		left: 0;
		width: 10vw;
		height: .4vw;
		background-color: #231815;
		border-radius: 1px;
		line-height: 1;
		transition: all .5s ease;
	}
	header .menu-trigger span:nth-of-type(1) { top: 0; }
	header .menu-trigger span:nth-of-type(2) { top: 1.8vw; }
	header .menu-trigger span:nth-of-type(3) { top: 3.6vw; }
	header .menu-trigger.active span:nth-of-type(1) { top: 1.6vw; transform: rotate(20deg);}
	header .menu-trigger.active span:nth-of-type(2) { display: none; }
	header .menu-trigger.active span:nth-of-type(3) { top: 1.6vw; transform: rotate(-20deg);}
	.navbar-toggler:focus { box-shadow: none!important; }
	header nav p a {
		font-size: 3.5vw;
		display: none!important;
	}
	header nav.show { right: 5vw; }
	header nav.show p a {
		font-size: 3.5vw;
		display: inline-block!important;
	}
}
@media (max-width: 575.98px) {
	header nav { transform: rotate(90deg) translateX(-10%) translateY(12vw); }
	header nav.show { transform: rotate(90deg) translateX(-4.2vw) translateY(12vw); }
	header nav.show p a { display: inline-block!important; }
}







@media (max-width: 1023.98px) {
	header .menu-trigger.new {
		display: inline-block;
		position: absolute;
		width: 8vw;
		height: 8vw;
		top: 5.5vw;
		right: 0;
		margin: 0;
		padding: 0;
		background: none;
		border: none;
		appearance: none;
		pointer-events: auto;
		z-index: 1040;
		border-radius: 0;
	}
	header .menu-trigger.new span {
		display: inline-block;
		position: absolute;
		left: 0;
		width: 8vw;
		height: .6vw;
		background-color: #231815;
		line-height: 1;
		border-radius: 0;
		transition: all .5s ease;
	}
	header .menu-trigger.new span:nth-of-type(1) { top: 3.6vw; }
	header .menu-trigger.new span:nth-of-type(2) { top: 3.6vw; transform: rotate(90deg); }

	header .menu-trigger.new.active {
		width: 4vw;
		height: 4vw;
		top: 5vw;
		right: 0;
	}
	header .menu-trigger.new.active span { width: 4vw; }
	header .menu-trigger.new.active span:nth-of-type(1) { top: 1.8vw; transform: rotate(45deg); }
	header .menu-trigger.new.active span:nth-of-type(2) { display: block; top: 1.8vw; transform: rotate(135deg); }
	.navbar-toggler:focus { box-shadow: none!important; }
	header nav p a {
		font-size: 3.5vw;
		display: none!important;
	}
	header nav.show p a {
		font-size: 3.5vw;
		display: inline-block!important;
	}
}
@media (max-width: 575.98px) {
	header nav { transform: rotate(90deg) translateX(-10%) translateY(12vw); }
	header nav.show { transform: rotate(90deg) translateX(-4.2vw) translateY(12vw); }
	header nav.show p a { display: inline-block!important; }
}



















.scroll {
	right: 5%;
	z-index: 1001;
	transition: top .3s ease;
}
.scroll.yoko { top: 70vh; }
.scroll.tate { top: 95vw; }



#first-img .bg-image {
	width: 100%;
	height: auto;
	aspect-ratio: 1920 / 2560;
	background-image: url('assets/img/top-bg.jpg');
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: top center;
}



#first-img img.logo {
	/**topの値はJSで指定**/
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	transition: transform 2.5s ease-out, opacity 2.5s ease, width .3s ease;
}
#first-img img.logo.yoko { width: 45%; }
#first-img img.logo.tate { width: 60%; }



#first-img .copy {
	bottom: 3vw;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}



#about .bg-image {
	width: 100%;
	height: auto;
	aspect-ratio: 1920 / 2620;
	background-image: url('assets/img/about-bg.jpg');
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: top center;
	}



#price article div { width: 45%; }
#price div.non-member { width: calc(100% - 2em); }
@media (max-width: 575.98px) {
	#price article div,
	#price div.non-member { width: 100%; }
}
#howtouse article div:not(:last-child){ margin-right: 1.5vw; }
#howtouse article div.yajirushi { padding-top: 0.5vw; }
#howtouse article div.yajirushi img {
	width: 1.25vw;
	height: auto;
}
@media (max-width: 575.98px) {
	#howtouse article div:not(:last-child){
		margin-right: 0;
		margin-bottom: 1vw;
	}
	#howtouse article div.yajirushi { padding-top: 0; }
	#howtouse article div.yajirushi { transform: rotate(90deg); }
}

.map {
	position: relative;
	padding-top: 100%;
	height: 0;
}

.map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



#gallery ul li { margin-bottom: calc(var(--bs-gutter-x)); }



#gallery-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,.95);
    z-index: 9999;
    overflow-y: scroll;
}
#gallery-modal .modal-inner {
    position: relative;
    width: 100%;
    padding: 4em 0 0 0;
    text-align: center;
}
#gallery-modal .modal-photo {
	display: block;
	width: auto;
	max-width: calc(90vw - 2em);
    max-height: 90vh;
    margin-bottom: 1em;
	margin-left: auto;
	margin-right: auto;
}
#gallery-modal .modal-close {
    position: fixed;
    top: 1vw;
    right: 1vw;
	font-size: 3em;
	line-height: 1;
    width: 1em;
    height: 1em;
	border: none;
	color: #231815!important;
    background: none;
	cursor: pointer;
    z-index: 10000;
}



#foot-img .bg-image {
	width: 100%;
	height: auto;
	aspect-ratio: 1920 / 1920;
	background-image: url('assets/img/foot-bg.jpg');
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: top center;
}
#foot-img .copy {
	bottom: 7.5vw;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}













#top-img {
	position: relative;
	width: 100%;
	min-height: 100vh;
	z-index: 1001;
}
#top-img.landscape {
	background: url('assets/img/top-2560-1440.jpg') center / contain;
	background-repeat: no-repeat!important;
}
#top-img.portrait {
	background: url('assets/img/top-1920-2570_tate.jpg') center / contain;
	background-repeat: no-repeat!important;
}
.ig-link {
	top: 2.5%;
	right: 2.5%;
	width: 5vw;
	max-width: 4rem;
	z-index: 1002;
}
.ig-link img {
	width: 100%;
	height: auto;
}
.ig-link:hover img { opacity: .5!important; }
.sq-link {
	display: block;
	background: #00114a;
	border: .1rem solid #00114a;
	color: #fff!important;
}
.sq-link:hover {
	background: #fff;
	color: #00114a!important;
}