@charset "utf-8";

/*ヘッダー内コンテンツ　※レイアウトに関わる部分（.haed_txt , header）はcommon.cssに記述
==================================================================================================================*/

/* ロゴ */

#hdr_logo { width: 100%; margin: 0 auto 1em; text-align: center;}
#hdr_logo h1 { max-width: 210px; margin: auto; text-align: center;}
#hdr_logo h2 { display: none; margin: 0;}
#hdr_logo a { display: block;}

@media (max-width:899px){
	#hdr_logo { display: flex; flex-wrap: wrap; align-items: center; width: calc(100% - 60px ); margin: 0 auto 0 0;}
	#hdr_logo img { max-height: 50px; width: auto;}
	#hdr_logo h1 { width: auto; margin: 0 1em 0 0;}
	#hdr_logo h2 { display: block;}
}

@media (max-width:399px) {
	#hdr_logo h1 { margin-left: 0.5em;}
	#hdr_logo h2 { max-width: 40vw;}
}





/* グローバルメニュー */

#g-nav p {
	width: 80%;
	margin: 0 auto 1em;
	padding-bottom: .5em;
	border-bottom: 1px solid #111;
	font-size: clamp(1.125rem, 1.057rem + 0.34vw, 1.313rem);
	letter-spacing: 0.2em;
}

.nav_menu li {
	text-align: center;
	font-size: clamp(1rem, 0.886rem + 0.57vw, 1.313rem);
}

.nav_menu li:not(:last-child) {
	margin-bottom: 1em;
}

.nav_menu li .small {
	display: block;
	font-size: clamp(0.75rem, 0.705rem + 0.23vw, 0.875rem);
}

@media (max-width:999px){
	.nav_menu li .small { letter-spacing: 0;}
}

/* 899px以下で格納（ハンバーガーメニュー） */
@media (max-width:899px){
	#g-nav p {
		width: 100%;
		font-size: clamp( 21px, 7vw, 30px );
	}
	#g-nav-list {
		display: none;
		flex-wrap: wrap;
		align-content: center;
		width: 100%;
		height: 100vh;
		margin: auto;
		padding: 10px 80px;
		position: fixed;
		z-index: 99;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
	#g-nav ul {
		width: 100%;
		margin: auto;
		opacity: 0;
	}
	#g-nav ul li {
		width: 100%;
		font-size: clamp( 18px, 5vw, 30px );
		text-align: center;
	}
	#g-nav ul li:not(:last-child) {
		margin-bottom: 1em;
	}
	.nav_menu li .small {
		font-size: clamp( 14px, 60%, 18px );
	}
	#g-nav.panelactive {
		width: 100%;
		height: 100vh;
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
	}
	#g-nav.panelactive #g-nav-list {
		display: flex;
	}
	#g-nav.panelactive ul {
		opacity: 1;
	}
	#g-nav.panelactive p, #g-nav.panelactive ul li {
		animation-name: gnaviAnime;
		animation-duration: 1s;
		animation-delay: .2s;
		animation-fill-mode: forwards;
		opacity: 0;
	}
	@keyframes gnaviAnime {
		0% { opacity: 0;}
		100% { opacity: 1;}
	}
}

@media (max-width:599px){
	#g-nav p { line-height: 40px;}
	#g-nav ul { line-height: 1.4;}
	#g-nav-list { align-content: flex-start; padding: 10px;}
}



/* ハンバーガーボタン・メニュー背景（899px以下で表示） */

.openbtn1 {
	display: none;
	width: 40px;
	height: 26px;
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	z-index: 998;
	cursor: pointer;
}

.openbtn1 span {
	display: inline-block;
	width: 40px;
	height: 3px;
	background-color: #fff;
	border-radius: 2px;
	position: absolute;
	left: 0;
	transition: all .4s;
}
.openbtn1 span:nth-of-type(1) { top: 0;}
.openbtn1 span:nth-of-type(2) { top: 13px;}
.openbtn1 span:nth-of-type(3) { top: 26px;}

.circle-bg {
	display: none;
	width: 100px;
	height: 100px;
	background: #73C4CE;
	border-radius: 50%;
	position: fixed;
	right: -50px;
	top: calc(50% - 50px);
	z-index: 3;
	transform: scale(0);
	transition: all .8s;
}

/* 展開時 */
.openbtn1.active { z-index: 9999;}
.openbtn1.active span { background-color: #333; width: 40px; left: 0;}
.openbtn1.active span:nth-of-type(1) { top: 6px; transform: translateY(6px) rotate(-45deg);}
.openbtn1.active span:nth-of-type(2) { opacity: 0;}
.openbtn1.active span:nth-of-type(3) { top: 19px; transform: translateY(-6px) rotate(45deg);}
.circle-bg.circleactive { width: 50%; transform: scale(50);}

@media (max-width:899px){
	.openbtn1, .circle-bg { display: block;}
}

@media (max-width:399px) {
	.openbtn1 { width: 30px; height: 20px;}
	.openbtn1 span { height: 2px; width: 30px;}
	.openbtn1 span:nth-of-type(2) { top: 10px;}
	.openbtn1 span:nth-of-type(3) { top: 20px;}
	.openbtn1.active span:nth-of-type(1) { top: 2px;}
	.openbtn1.active span:nth-of-type(3) { top: 15px;}
}





/* 以下　グローバルメニューが多くて入りきらない場合コメントアウト解除 */
/*
header { padding: 10px;}
#hdr_logo { margin-bottom: 0.5em;}
#g-nav p { line-height: 1; margin: 0 auto 0.5em;}
.nav_menu li { line-height: 1.4;}
.nav_menu li:not(:last-child) { margin-bottom: 0.8em;}
*/
/* グローバルメニューが多くて入りきらない場合コメントアウト解除ここまで */