@charset "utf-8";

:root{ --header-height: clamp(60rem, calc( 100 / var(--inr) * 100vw ), 100rem); }

body.drawerExpanded{ overflow: hidden; }

/* img ratio */
.landscape{ aspect-ratio: 335/224; }
.portrait{ aspect-ratio: 335/468; }
.square{ aspect-ratio: 1; }
@media(min-width:1280px){
	.img-group .portrait{ aspect-ratio: 335/465; }
}
@media(max-width:1279px) and (min-width:768px){
	:where(#img-column, .portfolio-list) .portrait{ aspect-ratio: 335/464.2; }
	.img-group .portrait{ aspect-ratio: 335/461; }
}
@media(max-width:767px){
	:where(#img-column, .portfolio-list, .img-group) .portrait{ aspect-ratio: 335/466; }
}

/* inner */
.inr{ position: relative; margin: 0 auto; max-width: calc(var(--inr) * 1rem); width: calc(var(--inr-width) * 100%); }
.inr-narrow{ max-width: calc(var(--inr-narrow) * 1rem); }
.inr-wide{ max-width: calc(var(--inr-wide) * 1rem); }
.bbsForm_data .inr{ max-width: auto; width: auto; }

header{ position: relative; inset: 0 0 auto; z-index: 10; margin-bottom: clamp(40rem, calc( 77 / var(--inr) * 100vw ), 77rem); z-index: 10; text-align: center;
	.drawerExpanded & { z-index: 12; }
	.inr{ display: flex; align-items: center; gap: 28rem; }
	.logo{
		.link{ position: relative; display: block; width: fit-content; }
		.img{ display: block; width: auto; height: 29rem; }
	}
	.lv1.isVisiting{ font-weight: 600; }
	.gnb{ display: flex;
		& > li{ position: relative; display: flex; align-items: center; }
		.lv1{ display: block; font: 300 12rem var(--font-suit); letter-spacing: .2em; text-transform: uppercase; }
	}
	.gnb .sub-menu {font: 300 12rem var(--font-suit); letter-spacing: .2em; }
	@media(prefers-reduced-motion:no-preference){
		.drawer-btn .bar, .drawer{ transition: .3s; }
	}
	@media(min-width:768px){
		&{ padding-top: 55rem; }
		.inr{ flex-direction: column; }
		.gnb{
			.separation{ margin: auto 19rem; width: 1px; height: 11rem; background: #6e6e6e; opacity: .3; }
			.lv1{ padding: 20rem; }
			.sub-menu{ position: absolute; top: 100%; left: 50%; translate: -50%; display: flex; gap: 2ch; padding: 10rem; background: #fff; white-space: nowrap; opacity: 0; }
			li:hover .sub-menu, .sub-menu:hover{ opacity: 1; }
		}
		.drawer-btn, .drawer{ display: none; }
	}
	@media(max-width:767px){
		&{ border-bottom: 1px solid #ccc; }
		.inr{ justify-content: space-between; height: 68.58rem; }
		.logo .img{ height: 20rem; }
		nav:has(.gnb){ display: none; }
		.drawer-btn{ position: relative; z-index: 1; width: 30rem; aspect-ratio: 1;
			.bar{ position: absolute; inset: 0; margin: auto; height: 2rem; background: currentColor; }
			.b1{ translate: 0 -5rem; }
			.b2{ translate: 0 5rem; }
			&[aria-expanded="true"]{
				.b1{ translate: 0; rotate: 45deg; }
				.b2{ translate: 0; rotate: -45deg; }
			}
		}
		.drawer{ position: absolute; inset: calc(100% + 1px) 0 auto; padding: 20rem 0 30rem; background: #fff; clip-path: inset(0);
			.separation{ margin: 0 20rem; border-top: 1px solid #ccc; }
			.lv1, .lv2{ display: block; padding: .5lh; }
			.sub-menu{ display: flex; justify-content: center; }
			.drawer-quick{ margin-top: 20rem; display: flex; justify-content: center; gap: 10rem; }
			.link{ display: block; padding: 10rem; }
			.icon{ display: block; width: 18rem; height: 18rem; }
		}
		.drawer:not(.isExpanded){ clip-path: inset(0 0 100%); }
	}
}

.quick{ position: fixed; top: 155rem; right: 0; z-index: 11; display: grid; gap: 18rem; padding: 23rem 12rem 27rem 16rem; background: #000;
	.link{ position: relative; display: block; }
	.link::before{ content: ''; position: absolute; inset: -8rem; }
	.icon{ display: block; width: 18rem; height: 18rem; }
	@media(min-width:768px){
		&{ top: 55rem; }
	}
}

footer{ margin-top: 108rem; padding: 56rem 0 99rem; background: #f9fbff;
	.inr{ display: grid; gap: 40rem clamp(40rem, calc(128 / var(--inr) * 100vw), 128rem); }
	.logo{ display: block; width: 75rem; height: 13rem; }
	.section-head{ margin-bottom: 10rem; font: 300 12rem var(--font-suit); letter-spacing: .2em; text-transform: uppercase; }
	.contact-list{ display: grid; gap: 8rem; }
	.contact-list > li{ display: grid; grid-template-columns: 10ch 1fr; gap: 1.7ch; }
	.contact-head{ font: 16rem var(--font-pre); }
	.contact-tel{ font: 800 16rem var(--font-suit); letter-spacing: .1em; }
	address{ display: flex; flex-wrap: wrap; gap: .5lh 20rem; font: 300 13rem var(--font-suit); }
	.copyright{ margin-top: 14rem; font: 300 13rem var(--font-suit); color: color-mix(in srgb, var(--black) 30%, #0000); }
	@media(min-width:768px){
		.inr{ grid-template-columns: auto 1fr auto; }
		.logo{ order: 3; align-self: center; }
		.section-head{ margin-bottom: 25rem; }
	}
}