@charset "utf-8";

/* 
-------------------------------------------
custom property
-------------------------------------------
*/
@import url(./../base/var.css);


/* 
-------------------------------------------
header h-inner h-gnavの設定
-------------------------------------------
*/
.h-gnav__list {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 24px;
	margin: 0 32px 0 0;
	height: 96px;
}

.h-gnav__item {
	height: 100%;
	display: flex;
	align-items: center;
}

.h-gnav__item .h-gnav__menu .h-gnav__menu--box .h-gnav__menu--list a {
	display: inline-block;
}

.h-gnav__item a {
	text-decoration: none;
	position: relative;
	display: block;
	text-align: left;

	font-size: 100%;
	font-display: swap;
}

.h-gnav__item a:hover {
	color: #D6151F
}

.h-gnav__item:hover > a {
	color: #D6151F
}

/* PC表示時の調整 */
.h-gnav__item .search__box--link {
	display: block;
}

.h-gnav__menu_search.h-gnav__menu--search {
	display: none;
}

.h-gnav__item:hover .h-gnav__menu--search .h-gnav__menu_search {
	display: block;
}

/* リンクホバー時のリング設定 */
.h-gnav__item > a::after,
.h-gnav__item--info a::after,
.h-gnav__item.search__item .search__box--link::after {
	content: "";
	display: inline-block;
	text-align: center;
	width: 10px;
	height: 10px;
	position: absolute;
	border-radius: 50%;
	bottom: -50%;
	transform: translateX(-50%);
	opacity: 0;
	border: solid 1px #D6151F;
	box-sizing: border-box;
}

.h-gnav__item.search__item .search__box--link::after {
	left: 50%;
	bottom: -86%;
	transform: translateX(-50%);
	/* transform: translateX(50%); */
}

.h-gnav__item .language__btn::after {
	bottom: -50%;
}

.h-gnav__item > a:hover::after,
.h-gnav__item--info a:hover::after,
.h-gnav__item.search__item .search__box--link:hover::after {
	opacity: 1;
	border: solid 2px #D6151F;
}

.h-gnav__item > a:hover::after,
.h-gnav__item--info a:hover::after {
	opacity: 1;
	border: solid 2px #D6151F;
}


/* 検索ボックスの設定 */
.search__item {
	padding: 0 24px;
	margin: 0 -24px;
}

.search__box {
	width: 100%;
	border: none;
	border-radius: 6px;
	padding: 10px;
	border: 1px solid transparent;
}

.search__box:focus {
	border: 1px solid #D6151F;
	outline: 0;
}

/* 検索ボックスに虫眼鏡アイコンを入れる設定 */
.search__input {
	display: inline-block;
	position: relative;
	width: 100%;
}

#search__submit {
	content: "";
	width: 16px;
	height: 16px;
	background: url(./../../img/search.svg) no-repeat center center / auto 100%;
	display: inline-block;
	position: absolute;
	top: 50%;
	right: 1%;
	transform: translateY(-50%);
	border: none;
}

/* 
	-------------------------------------------
	sub menu accordion button
	-------------------------------------------
	*/
	.sub_menu {
		display: none;
	}

/* 
-------------------------------------------
1180px以上の設定
-------------------------------------------
*/
/*
---------------h-gnav mega menuの設定----------------
*/
.h-gnav__box {
	width: 1136px;
	margin: 60px auto;
	transition: all .2s ease;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 32px;
}

.h-gnav__menu{
	background: #f5f5f5;
	left: 0;
	margin: 0 calc(50% - 50vw);
	padding: 60px calc(100% - 84.50704225352113%);
	width: 100vw;
	position: absolute;
	top: 96px;
	opacity: 0;
	visibility: hidden;
	transition: all .2s ease;
	box-sizing: border-box;
}

.h-gnav__menu--box {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 32px;
}

.h-gnav__menu--list {
	flex: 1;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	text-align: left;
}


/* リストにマウスオーバーすると開く動き */
.h-gnav__item:hover .h-gnav__menu,
.h-gnav__item:hover .h-gnav__menu_search	 {
	opacity: 1;
	visibility: visible;
}

.h-gnav__item > a::after,
.h-gnav__item--info a::after {
	left: 50%;
}


/* h-gnav__menu--listの設定 */
.h-gnav__menu--list ul.h-gnav__submenu {
	margin: 20px 0 0 0;
}

.h-gnav__menu--list ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
}


/* 製品番号の設定 */
.h-gnav__menu--list .h-gnav__menu--number {
	margin: 20px 0 0 0;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

.h-gnav__menu--number li {
	width: 20px;
	height: 20px;
}


/* 虫眼鏡アイコンのマウスオーバー設定 */
.search__box--link {
	width: 16px;
	height: 16px;
	display: block;
	position: relative;
	cursor: pointer;
}

.search__box--link img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	display: block;
	transition: all .2s;
}

.search__box--link:hover img:nth-of-type(2) {
	opacity: 0;
}

.search__box--link:hover {
	opacity: 1 !important;
}


/* お問い合わせ、お知らせの設定 */
.h-gnav__item--info ul {
	display: flex;
	align-items: center;
	gap: 24px;
}



/* 
-------------------------------------------
hamburger menuの設定
-------------------------------------------
*/
.humberger {
	position: fixed;
	top: -120%;
	right: 0;
}




/* 
-------------------------------------------
768px以上のメニュー配置を調整
-------------------------------------------
*/
/* @media screen and (min-width: 770px) and (max-width: 1180px){


	.h-gnav {
		margin: 96px 0 0 0;
	}

	.humberger {
		top: 36px;
	}
} */