@charset "UTF-8";
/********************************************************************************

comp-header.css　ヘッダーコンポーネント用css

********************************************************************************/
/*============================================================
 CSS変数　※ここのみ編集
*============================================================*/
/* for PCモード
---------------------------------------- */
#site-header-pc,
#content-header-pc {
	--header-height: 56px;
    --logo-width: 196px;
	--padding: 4px 0;
	--background-color: #fff;
	--scrolled-background-color: rgba(255, 255, 255, 0.7);
}
.gnav {
	--gnav-inner-max-width: 1280px; 
	--gnav-inner-padding: 0 32px;

	--gnav-menu-font-weight: 500;
	--gnav-menu-font-size: 14px;
	--gnav-menu-line-height: 20px;
	--gnav-menu-padding: 0;
	--gnav-menu-margin: 0 32px 0 0;
	--gnav-menu-letter-spacing: unset;
	--gnav-menu-color: #252525;
}
#content-header-pc .gnav {
	--gnav-menu-color: #fff;
}

/* for SPモード
---------------------------------------- */
#site-header-sp,
#content-header-sp {
	--header-height: 56px;
    --logo-width: 160px;
	--padding: 4px 0;
	--background-color: #fff;
	--scrolled-background-color: rgba(255, 255, 255, 0.7);
	/* --box-shadow: 0px 2px 5px rgb(0 0 0 / 20%); */
}
.gnav {
	--tablet-gnav-inner-padding: 0 0 0 16px; 
	--sp-gnav-inner-padding: 0 0 0 16px;
	--hamburger-width: 48px;
	--hamburger-height: 48px;
	--hamburger-background-color: transparent;
	--hamburger-line-width: 24px;
	--hamburger-line-color: #252525;
}
#content-header-sp .gnav {
	--hamburger-line-color: #fff;
}
.gnav-sp-menu {
	--width: 70%;
	--background-color: #fff;
	--gnav-logo-display: none;
	--menu-font-weight: bold;
	--menu-font-size: 16px;
	--menu-line-height: 23px;
	--menu-padding: 0;
	--menu-margin: 0 0 24px 0;
	--menu-letter-spacing: unset;
	--menu-color: #252525;
}


/*============================================================
 for PCモード
*============================================================*/
/* SP用は非表示 
---------------------------------------- */
#site-header-sp,
#content-header-sp {
    display: none;
}

/* PC用　※コンテンツ内ヘッダー用(トップページなどヘッダーが隠れているとき用)
---------------------------------------- */
#content-header-pc {
	width: 100%;
	padding: var(--padding);
    height: var(--header-height);
}

/* PC用　※通常ヘッダー用
---------------------------------------- */
#site-header-pc {
    width: 100%;
	padding: var(--padding);
    background-color: var(--background-color);
    position: fixed;
    -webkit-transition: top 0.3s;
    -moz-transition: top 0.3s;
    -o-transition: top 0.3s;
    -ms-transition: top 0.3s;
    transition: top 0.3s;
    z-index: 999999;
    top: calc(var(--header-height) * -1);
    left: 0;
    height: var(--header-height);
    overflow: hidden;
    box-shadow:  var(--box-shadow);
}
/* スクロール時 */
#site-header-pc.scrolled {
    top: 0;
    background-color: var(--scrolled-background-color);
}
/* 固定表示 */
#site-header-pc[data-type="static"] {
	position: static;
}
/* トップページ初期状態で表示 */
#site-header-pc[data-pc-top-ini="visible"] {
	top: 0;
}
/* gnav */
.gnav {
    width: 100%;
}
.gnav .gnav-inner {
	width: 100%;
	max-width: var(--gnav-inner-max-width);
	padding: var(--gnav-inner-padding);
	margin: 0 auto;
}
.gnav .gnav-left {
}
.gnav .gnav-left .gnav-logo {
    width: var(--gnav-logo-width);
    margin-bottom: 0;
    line-height: unset;
}
.gnav .gnav-right {
}
.gnav .gnav-right .gnav-menu {
}
.gnav .gnav-right .gnav-menu li {
    font-weight: var(--gnav-menu-font-weight);
    font-size: var(--gnav-menu-font-size);
    line-height: var(--gnav-menu-line-height);
    padding: var(--gnav-menu-padding);
    margin: var(--gnav-menu-margin);
    letter-spacing: var(--gnav-menu-letter-spacing);;
	color: var(--gnav-menu-color);
	position: relative;
}
.gnav .gnav-right .gnav-menu li:last-child {
    margin-right: 0;
}
.gnav .gnav-right .gnav-menu li.active::after {
	content: "";
	width: 32px;
	height: 2px;
	background-color: #252525;
	position: absolute;
	bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}
/* コンテンツ内ヘッダー用 */
#content-header-pc .gnav .gnav-right .gnav-menu li.active::after {
	background-color: #fff;
}

/*============================================================
 for SP(Tablet含)
*============================================================*/
@media screen and (max-width: 1279px) {
	/* PC用は非表示　
	---------------------------------------- */
	#site-header-pc,
	#content-header-pc {
	    display: none;
	}
	/* SP用　※コンテンツ内ヘッダー用(トップページなどヘッダーが隠れているとき用)
	---------------------------------------- */
	#content-header-sp {
	    display: block;
		width: 100%;
		height: var(--header-height);
		padding: var(--padding);
	}

	/* SP用　※通常ヘッダー用
	---------------------------------------- */
	#site-header-sp {
	    display: block;
		width: 100%;
	    height: var(--header-height);
		padding: var(--padding);
		background-color: var(--background-color);
	    position: fixed;
	    -webkit-transition: all 0.3s;
	    -moz-transition: all 0.3s;
	    -o-transition: all 0.3s;
	    -ms-transition: all 0.3s;
	    transition: all 0.3s;
	    z-index: 999999;
		top: calc(var(--header-height) * -1);
	    left: 0;
	    overflow: hidden;
	    box-shadow: 0px 2px 5px rgb(0 0 0 / 20%);
	}
	/* スクロール時 */
	#site-header-sp.scrolled {
		top: 0;
		background-color: var(--scrolled-background-color);
	}
	/* 固定表示 */
	#site-header-sp[data-type="static"] {
		position: static;
	}
	/* トップページ初期状態で表示 */
	#site-header-sp[data-ini="visible"] {
		top: 0;
	}
	/* gnav(PC用の設定がベース) */
	.gnav {
	    /* height: var(--header-height); */
	}
	.gnav .gnav-inner {
		padding: var(--tablet-gnav-inner-padding);
	}
	.gnav .gnav-left .gnav-logo {
	    width: var(--logo-width);
	}
	
	/***** メニューclose時 *****/
	/* ハンバーガー */
	.gnav .gnav-right .gnav-hamburger {
	    width: var(--hamburger-width);
	    height: var(--hamburger-height);
	    padding: 8px 0 0 0;
	    background-color: var(--hamburger-background-color);
	}
	.gnav .gnav-right .gnav-hamburger:hover {
		cursor: pointer;
	}
	.gnav .gnav-right .gnav-hamburger span {
	    display: block;
	    width: var(--hamburger-line-width);
	    height: 2px;
	    background-color: var(--hamburger-line-color);
	    margin: 0 auto 6px auto;
	    border-radius: 100%;
	}
	/* メニューオーバーレイ */
	.gnav-sp-menu-overlay {
		width: 100%;
		height: 100%;
	    background-color: rgba(0, 0, 0, 0.4);
	    position: fixed;
	    top: 0;
		left: 0;
	    z-index: 999998;
		display: none;
	}
	/* メニュー */
	.gnav-sp-menu {
	    width: var(--width);
	    height: 100%;
	    background-color: var(--background-color);
	    position: fixed;
	    top: 0;
	    right: -100%;
	    -webkit-transition: right 0.3s;
	    -moz-transition: right 0.3s;
	    -o-transition: right 0.3s;
	    -ms-transition: right 0.3s;
	    transition: right 0.3s;
	    z-index: 999999;
	}

	/***** メニューopen時 *****/
	/* ハンバーガー */
	.gnav-sp-menu-open .gnav .gnav-right .gnav-hamburger {
	    position: relative;
	}
	.gnav-sp-menu-open .gnav .gnav-right .gnav-hamburger span {
	    margin: 0;
	    position: absolute;
	    top: 24px;
	    left: calc(50% - 10px);
	}
	.gnav-sp-menu-open .gnav .gnav-right .gnav-hamburger span:nth-child(1) {
	    transform: rotate(45deg);
	}
	.gnav-sp-menu-open .gnav .gnav-right .gnav-hamburger span:nth-child(2) {
	    display: none;
	}
	.gnav-sp-menu-open .gnav .gnav-right .gnav-hamburger span:nth-child(3) {
	    transform: rotate(-45deg);
	}
	/* メニューオーバーレイ */
	.gnav-sp-menu-open .gnav-sp-menu-overlay {
		display: block;
	}
	/* メニュー */
	.gnav-sp-menu-open .gnav-sp-menu {
	    right: 0;
	}
	.gnav-sp-menu .gnav .gnav-left .gnav-logo {
		display: var(--gnav-logo-display);
	}
	.gnav-sp-menu .inner {
	    padding: 24px;
		height: calc(100% - var(--header-height));
		overflow: auto;
	}
	.gnav-sp-menu ul li {
	}
	.gnav-sp-menu ul li a {
	    display: block;
		font-weight: var(--menu-font-weight);
		font-size: var(--menu-font-size);
		line-height: var(--menu-line-height);
		letter-spacing: var(--menu-letter-spacing);
		color: var(--menu-color);
	    padding: var(--menu-padding);
	    margin: var(--menu-margin);
	}

}
@media screen and (max-width: 767px) {
	/* gnav(PC用の設定がベース) */
	.gnav .gnav-inner {
		padding: var(--sp-gnav-inner-padding);
	}
}