@charset "utf-8";

/* --------------------------------------------

header

---------------------------------------------- */

#header {
	position: fixed;
	width: 100%;
	/* min-width: 1024px; */
	padding: 1.5rem 4rem 1.5rem 2rem;
	background-color: rgba(255, 255, 255, 0.6);
	transition: 0.3s;
	z-index: 999;
}

#header.is-scroll {
    padding: 1rem 2rem 1rem 1.5rem;
	transition: 0.3s;
}

.headerInner {
	align-items: center;
	flex-wrap: nowrap;
	gap: 2rem;
	width: 100%;
}

@media screen and (max-width:640px) {
	#header,
	#header.is-scroll {
        padding: 2rem 1.2rem;
    }
}


/* --------------------------------------------

ロゴ

---------------------------------------------- */

.headerLogo {
	white-space: nowrap;
	flex-shrink: 0;  
}

.headerLogo a.-flex {
	justify-content: flex-start;
	align-items: center;
	gap: 2rem;
}

.headerLogo a img {
	width: 38%;
	max-width: 170px;
	transition: 0.3s;
}

#header.is-scroll .headerLogo img {
    max-width: 150px;
}

.headerLogo a h1 {
	width: 62%;
	font-weight: var(--fw-bold);
}

.headerLogo a h1 span {
	display: block;
	line-height: 1;
	white-space: nowrap;
	transition: 0.3s;
}

@media (hover:hover) {
	.headerLogo a:hover h1 span {
		color: var(--c-green);
		transition: 0.3s;
	}
}
.headerLogo a h1 span:nth-of-type(1) {
	padding-bottom: 0.3rem;
	font-size: var(--fz-3xl);
}

.headerLogo a h1 span:nth-of-type(2) {
	padding-bottom: 1rem;
	font-size: var(--fz-xl);
	font-weight: var(--fw-bold);
}

.headerLogo a h1 span:nth-of-type(3) {
	font-size: 1.5rem;
}

#header.is-scroll .headerLogo a.-flex {
	gap: 1.6rem;
}

#header.is-scroll .headerLogo a h1 span:nth-of-type(1) {
	font-size: var(--fz-xxl);
}

#header.is-scroll .headerLogo a h1 span:nth-of-type(2) {
	font-size: var(--fz-l);
}

#header.is-scroll .headerLogo a h1 span:nth-of-type(3) {
	font-size: var(--fz-s);
}

@media screen and (max-width:1500px) {
	.headerLogo a.-flex{
		gap: 1.5rem;
	}

	.headerLogo a img {
		max-width: 150px;
	}

	.headerLogo a h1 span:nth-of-type(1) {
		padding-bottom: 0.3rem;
		font-size: 2.6rem;
	}

	.headerLogo a h1 span:nth-of-type(2) {
		padding-bottom: 1rem;
		font-size: var(--fz-l);
	}

	.headerLogo a h1 span:nth-of-type(3) {
		font-size: var(--fz-s);
	}
}

@media screen and (max-width:640px) {
	.headerLogo {
		width: 100%;
	}

	.headerLogo a.-flex,
	#header.is-scroll .headerLogo a.-flex {
		flex-wrap: nowrap;
        gap: 1rem;
    }

    .headerLogo a img,
	#header.is-scroll .headerLogo img {
        max-width: 120px;
        width: auto;
    }

    .headerLogo a h1 {
        width: auto;
    }

	.headerLogo a h1 span:nth-of-type(1) {
		padding-bottom: 0;
		font-size: var(--fz-xxl);
	}

    .headerLogo a h1 span:nth-of-type(2),
    .headerLogo a h1 span:nth-of-type(3) {
        display: none;
    }
}


/* --------------------------------------------

ナビゲーション

---------------------------------------------- */

.headerNav.-flex {
	justify-content: flex-end;
	align-self: flex-end;
	flex: 1 1 auto;
	min-width: 0; 
	margin: 0;
}

.headerMenu.-flex {
	justify-content: flex-end;
	gap: 4rem;
	margin: 0;
}

.headerMenu li {}

.headerMenu li a {
	display: block;
	line-height: 3;
}

#header.is-scroll .headerMenu.-flex {
	gap: 3rem;
}

@media (hover:hover) {
	.headerMenu a:hover {
		color: var(--c-green);
	}
}

@media screen and (max-width:1600px) {
	.headerMenu.-flex { 
		gap: 3rem;
	}
}

@media screen and (max-width:1500px) {
	.headerMenu.-flex,
	#header.is-scroll .headerMenu.-flex { 
		row-gap: 0;
		column-gap: 2.5rem;
	}
}

@media screen and (max-width:1200px) {
	.headerNav {
		display: none;
	}
}

@media screen and (max-width:640px) {

}


/* --------------------------------------------

header　印刷時

---------------------------------------------- */

@media print {
	#header {
	display: none;
	}
}