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

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

********************************************************************************/
/*============================================================
 css変数
*============================================================*/
:root {
	--comp-header-max-width: var(--common-inner-max-width);
	--comp-header-height: var(--common-header-height);
	--comp-header-inner-padding: min(24px, var(--common-inner-padding));
	--comp-header-color-main: var(--common-color-main);
	--gnav-menu-font-family: var(--common-font-family-kiwi);
    --gnav-menu-active-color: var(--common-color-accent);
}

/*============================================================
 固定ヘッダー
*============================================================*/
/* PC、Tablet用
---------------------------------------- */
#content-header {
	width: 100%;
    background-color: transparent;
	overflow: hidden;
}

/*============================================================
 追従ヘッダー
*============================================================*/
#fixed-header {
    width: 100%;
    background-color: var(--comp-header-color-main);
    /* overflow: hidden; */
    position: fixed;
    z-index: 999999;
    top: -100%;
    left: 0;
    -webkit-transition: top 0.3s;
    transition: top 0.3s;
}
/* スクロール時
---------------------------------------- */
#fixed-header.scrolled {
    top: 0;
}

/*============================================================
 Gナビ
*============================================================*/
.gnav {
	max-width: var(--comp-header-max-width);
	padding: 0 var(--comp-header-inner-padding);
	margin: 0 auto;
}
/* Gナビ(1段目)
---------------------------------------- */
.gnav .gnav-main {
	padding: 24px 0;
	position: relative;
}
/* ロゴ */
.gnav .gnav-main .gnav-left .gnav-logo {
    width: 293px;
    margin-bottom: 0;
    line-height: unset;
}
.gnav .gnav-main .gnav-left .gnav-logo img {
	vertical-align: middle;
}
/* サイト内検索(入力エリア) */
.gnav .gnav-main form .search-wrap {
	position: relative;
	height: 48px;
}
.gnav .gnav-main form .search-wrap::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	background-image: url(../../library/images/common/icon-search-bg.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px auto;
	position: absolute;
	top: 14px;
	left: 8px;
}
.gnav .gnav-main form input {
	width: 300px;
	padding-left: 36px;
}
.gnav .gnav-main form button {
	padding: 0;
}
/* サイト内検索(アイコン) */
.gnav .gnav-main .gnav-right .gnav-search-icon {
	height: 48px;
	margin-right: 12px;
}
.gnav .gnav-main .gnav-right .gnav-search-icon:hover {
	cursor: pointer;
}
/* ハンバーガー */
.gnav .gnav-main .gnav-right .gnav-hamburger {
	height: 48px;
}
.gnav .gnav-main .gnav-right .gnav-hamburger {
	cursor: pointer;
}
/* トグル要素　サイト内検索(入力エリア) */
.gnav .gnav-main .gnav-search-sp {
	display: none;
	position: absolute;
	top: 100%;
	right: calc(-1 * var(--comp-header-inner-padding));
	padding: 0 var(--comp-header-inner-padding) 8px var(--comp-header-inner-padding);
	background-color: var(--comp-header-color-main);
	z-index: 100;
}

/* Gナビ(2段目)
---------------------------------------- */
.gnav .gnav-menu {
	padding: 24px 0 36px 0;
}
.gnav .gnav-menu .menu-list {
	gap: 24px;
}
.gnav .gnav-menu .menu-list li {
	font-family: var(--gnav-menu-font-family);
	font-size: 16px;
	line-height: 23px;
	position: relative;
}
.gnav .gnav-menu li.active::after {
    content: "";
    width: 100%;
    height: 4px;
    background-color: var(--gnav-menu-active-color);
    position: absolute;
    bottom: calc(-8px - 4px);
	left: 0;
}

/*============================================================
 Gナビ　表示パターン調整
*============================================================*/
/* トップページ
---------------------------------------- */
/* Gナビ(2段目)非表示 */
#page-top .gnav .gnav-menu {
	display: none;
}

/* 固定ヘッダー用
---------------------------------------- */
/* Gナビ(1段目)サイト内検索(アイコン)非表示 */
#content-header .gnav .gnav-main .gnav-search-icon {
	display: none;
}
/* Gナビ(1段目)ハンバーガー非表示 */
#content-header .gnav .gnav-main .gnav-hamburger {
	display: none;
}
/* Gナビ(1段目)サイト内検索(アイコン)色変更 */
#content-header .gnav .gnav-main .gnav-search-icon .parts-icon {
	--icon-color: var(--comp-header-color-main);
}
/* Gナビ(1段目)ハンバーガー色変更 */
#content-header .gnav .gnav-main .gnav-hamburger .parts-icon {
	--icon-color: var(--comp-header-color-main);
}
/* トグル要素　サイト内検索(入力エリア) */
#page-top #content-header .gnav .gnav-main .gnav-search-sp {
	background-color: #fff;
}

/* 追従ヘッダー用
---------------------------------------- */
/* Gナビ(1段目) */
#fixed-header .gnav .gnav-main {
	padding: 16px 0;
}
/* Gナビ(1段目)サイト内検索(入力エリア)非表示 */
#fixed-header .gnav .gnav-main .gnav-search {
	display: none;
}
/* Gナビ(2段目) */
#fixed-header .gnav .gnav-menu {
	display: none;
}

/*============================================================
 ハンバーガーメニュー
*============================================================*/
.gnav-hamburger-menu {
	width: 100%;
	height: 100%;
	padding: 24px var(--comp-header-inner-padding);
	background-color: #fff;
	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;
}
.gnav-hamburger-menu .gnav-hamburger-menu-inner {
    overflow-y: auto;
    height: calc(var(--vh) - 118px - 24px);
}
.gnav-hamburger-menu .gnav-hamburger-close {
    --icon-color: var(--comp-header-color-main);
	margin:0 0 46px calc(100% - 48px);
}
.gnav-hamburger-menu .menu-list {
	width: fit-content;
	margin: 0 auto 42px auto;
}
.gnav-hamburger-menu .menu-list li {
	margin-bottom: 40px;
	font-family: var(--common-font-family-kiwi);
	font-size: 18px;
	line-height: 26px;
	position: relative;
}
.gnav-hamburger-menu .menu-list li.active::after {
    content: "";
    width: 100%;
    height: 4px;
    background-color: var(--gnav-menu-active-color);
    position: absolute;
    bottom: calc(-8px - 4px);
	left: 0;
}
.gnav-hamburger-menu .menu-list li:last-child {
	margin-bottom: 0;
}
.gnav-hamburger-menu .logo {
	width: 238px;
	margin: 0 auto;
}

/* OPEN時
---------------------------------------- */
.gnav-hamburger-menu-open .gnav-hamburger-menu {
	right: 0;
}
/* オーバーレイ */
.gnav-hamburger-menu-open .overlay {
    display: block;
}


/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
 Tablet
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
@media screen and (max-width: 1279px) {
	/*============================================================
	 固定ヘッダー
	*============================================================*/
	/* PC、Tablet用
	---------------------------------------- */
	#content-header {
		overflow: unset;
	}

	/*============================================================
	 ヘッダー　表示パターン調整
	*============================================================*/
	/* 全ページ
	---------------------------------------- */
	/* Gナビ(1段目)サイト内検索(入力エリア)非表示 */
	.gnav .gnav-main .gnav-search {
		display: none;
	}
	/* Gナビ(1段目)サイト内検索(アイコン)表示 */
	.gnav .gnav-main .gnav-search-icon {
		display: block;
	}
	/* Gナビ(1段目)ハンバーガー表示 */
	.gnav .gnav-main .gnav-hamburger {
		display: block;
	}
	/* Gナビ(2段目)非表示 */
	.gnav .gnav-menu {
		display: none;
	}
	/* トップページ
	---------------------------------------- */
	/* 固定ヘッダー Gナビ(1段目)サイト内検索(アイコン)表示 */
	#page-top #content-header .gnav .gnav-main .gnav-search-icon {
		display: block;
	}
	/* 固定ヘッダー Gナビ(1段目)ハンバーガー表示 */
	#page-top #content-header .gnav .gnav-main .gnav-hamburger {
		display: block;
	}

	/* 下層ページ
	---------------------------------------- */
	/* 固定ヘッダー高さ変更 */
	body:not(#page-top) #content-header {
		height: 80px;
	}
	/* 固定ヘッダーGナビ非表示(追従が表示されるため) */
	body:not(#page-top) #content-header .gnav {
		display: none;
	}
	/* 追従ヘッダー 最初から表示 */
	body:not(#page-top) #fixed-header {
		top: 0;
	}

}


/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
 SP
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
@media screen and (max-width: 767px) {
	/*============================================================
	 ヘッダー　表示パターン調整
	*============================================================*/
	/* 固定ヘッダー高さ変更 */
	#content-header,
	body:not(#page-top) #content-header {
		height: 64px;
	}
	/* 固定ヘッダーGナビ非表示(追従が表示されるため) */
	#content-header .gnav {
		display: none;
	}
	/* 追従ヘッダー
	---------------------------------------- */
	/* 最初から表示 */
	#fixed-header {
		top: 0;
	}
	/* Gナビ(1段目) */
	#fixed-header .gnav .gnav-main {
		padding: 8px 0;
	}
	/* Gナビ(1段目) ロゴ */
	#fixed-header .gnav .gnav-left .gnav-logo {
		width: 160px;
	}

	/*============================================================
	 ハンバーガーメニュー
	*============================================================*/
	.gnav-hamburger-menu {
		padding: 8px var(--comp-header-inner-padding);
	}
	.gnav-hamburger-menu .gnav-hamburger-close {
		margin: 0 0 24px calc(100% - 48px);
	}
	.gnav-hamburger-menu .gnav-hamburger-menu-inner {
		height: calc(var(--vh) - 88px - 16px);
	}
	
}