/* ヘッダーのカスタマイズ（header-style.css) */


/*
    SWELLテーマのヘッダーのCSSを追加します。(ver.1.0.0)
*/


/* ==============================
ヘッダーのデザイン
============================== */

/* ヘッダー全体の高さを調整 */
.l-header__inner {
    height: auto; 
    display: flex;
    align-items: center;
}

/* PC */
#gnav.l-header__gnav.c-gnavWrap{
	width:auto!important;
}

/* ヘッダー幅*/
div.w-header pc_{
		width:auto!important;
}

/* ==============================
ロゴの位置
============================== */
.c-headLogo {
    width: 100%; 
    max-width: 200px; 
	  margin-left:0%;
}

.c-headLogo__img{
	margin-top:auto;
  margin-bottom:auto;
    width: 100%; 
    max-width: 200px; 
	  margin-left:0%;
}

/* ==============================
グロナビメニューのデザイン
============================== */


/* グローバルメニューの文字装飾 */
.c-gnav>.menu-item>a .ttl {
  font-weight: bold;
	font-size:0.9rem;
  letter-spacing: 1.2px;　/*文字間隔*/
}

/*メニュー間隔*/
.c-gnav>.menu-item>a {
padding: 0 0.7rem;
}

/*  グローバルメニューのアンダーライン位置　*/
.c-gnav>.menu-item>a:after{
	margin-bottom:5px; /*下からの位置*/
	width:90%;
	padding:1px; /*高さ*/
	color:var(--color_main);
}



/* ==============================
虫眼鏡のデザイン
============================== */
/* 虫眼鏡ボタン */
.icon-search:before {
  font-size: 1em;
}

.c-gnav__sBtn{
	margin-right:2px;
}

/* 虫眼鏡ホバー */
.c-gnav__sBtn:hover{
	background:none;
  color: var(--color_main);
}


.l-header__customBtn .c-iconBtn__icon {
	display: block;
}

.l-header__customBtn .c-iconBtn__icon {
	display: block;
}

.l-header__customBtn .c-iconBtn::before,
.l-header__customBtn .c-iconBtn::after {
	display: none;
}

.l-header__customBtn .c-iconBtn::after {
	display: none;
}

.c-gnav .sub-menu a:hover {
	background-color: var(--color_main);
}

.c-gnav .sub-menu a:hover .ttl {
	left: initial;
	color: var(--swl-text_color--white);
}

.c-gnav > .menu-item:hover > .sub-menu {
	transform: translate(-50%, 0.2em) !important;
}

.c-gnav > .menu-item a:hover {
	color: var(--color_main);
}

.l-header .c-gnav > .menu-item a:hover .ttl::after {
	opacity: 1;
	transform: translateY(0);
}

.l-header__customBtn .c-iconBtn__icon {
	display: block;
}

.l-header__inner,
.l-header__menuBtn {
	height: inherit;
}