@charset "utf-8";




.header {
	width: 100%;
	height: auto;
	position: relative;
}


/* 
-------------------------------------------
header h-innerの設定
-------------------------------------------
*/
/* headerのレイアウト調整 */
.h-inner {
	height: 96px;
	width: 100%;
	background-color: #ffffff;
	position: fixed	;
	top: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 10;
}

/* ロゴのレイアウト調整 */
.logo {
	margin: 0 0 0 32px;
}

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

/* 
-------------------------------------------
mainの設定
-------------------------------------------
*/
.main {
	padding: 96px 0 0 0;
	width: 100%;
	height: auto;
	display: grid;
	grid-template-columns: 1fr 1136px 1fr;
	grid-template-rows:
	[h-mv] auto
	[m-news] auto
	[m-card] auto
	[m-seal-nav] auto
	[m-cm-library] auto
	[gdpr] auto
	;
	row-gap: 100px;
}

/*
---------------main gridの設定----------------
*/
.h-mv,
.m-card {
	grid-column: 1 / -1;
}

.m-news,
.m-seal-nav,
.m-cm-library {
	grid-column: 2 / -2;
}

.h-mv {
	grid-row: h-mv;
	position: relative;
}

.m-news {
	grid-row: m-news;
	max-width: 1136px;
	width: 100%;
 margin: 0 auto;
}

.m-card {
	grid-row: m-card;
}

.m-seal-nav {
	grid-row: m-seal-nav;
	max-width: 1136px;
	width: 100%;
 margin: 20px auto;
}

.m-cm-library {
	grid-row: m-cm-library;
}




/* 
-------------------------------------------
footerの設定
-------------------------------------------
*/
.footer {
	background-color: #191919;
	color: #fff;
	display: grid;
	grid-template-columns: 1fr 1136px 1fr;
	grid-template-rows:
	[footer] auto
	;
}

.f-nav {
	grid-column: 2 / -2;
	grid-row: footer;
}


/* 
-------------------------------------------
width1280までの設定
-------------------------------------------
*/
@media screen and (max-width: 1280px){

	/* body active */
	body.active {
		height: 100%;
		overflow: hidden;
	}

	/* logoの設定 */
	.logo {
		margin: 0 0 0 18px;
	}

	/* 全体 */
	.main,
	.footer {
		grid-template-columns: 5.6% 1fr 5.6%;
	}
}


/* 
-------------------------------------------
width768までの設定
-------------------------------------------
*/
@media screen and (max-width: 769px){

	/* body active */
	body.active {
		height: 100vh;
		height: 100dvh;
		overflow: hidden;
		position: fixed;
		top: 0;
		left: 0;
		overflow-y: auto;
	}

	/* logoの設定 */
	.logo {
		margin: 0 0 0 18px;
		width: 204px;
	}

	/* 全体 */
	.main,
	.footer {
		grid-template-columns: 5.6% 1fr 5.6%;
	}

	.main {
		padding: 64px 0 0 0;
		row-gap: 84px;
	}

	/* 
	-------------------------------------------
	h-innerの設定
	-------------------------------------------
	*/
	/* headerのレイアウト調整 */
	.h-inner {
		height: 64px;
	}

	.m-card {
		margin: 0 0 0 0;
	}

	.m-cm-library {
		margin: 0 auto 0;
	}

	/* 
	-------------------------------------------
	m-seal-navの設定
	-------------------------------------------
	*/
	.m-seal-nav {
		margin: 0px auto;
	}
}








/* 
-------------------------------------------
custom property
-------------------------------------------
*/
/* 
-------------------------------------------
header h-inner h-gnavの設定
-------------------------------------------
*/
.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;
}

.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;
}

.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:hover > a::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(/images/search_black.png) no-repeat center center / auto 100%;
	display: inline-block;
	position: absolute;
	top: 50%;
	right: 1%;
	transform: translateY(-50%);
	border: none;
}

/* 
-------------------------------------------
1180px以上の設定
-------------------------------------------
*/
/*
---------------h-gnav mega menuの設定----------------
*/
@media screen and (min-width: 1180px) {
	.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__menu--list h2 {
		padding: 0;
	}


	/* リストにマウスオーバーすると開く動き */
	.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;
}




/*
---------------width1180までの設定----------------
*/
@media screen and (max-width: 1180px){

	/* 
	-------------------------------------------
	global menu list position started
	-------------------------------------------
	*/
	.h-gnav__item {
		position: relative;
	}

	/* 
	-------------------------------------------
	global menu hover disabled
	-------------------------------------------
	*/
	.h-gnav__item > a::after,
	.h-gnav__item--info a::after,
	.h-gnav__item.search__item .search__box--link::after {
		content: none;
	}

	/* 
	-------------------------------------------
	humberger menu
	-------------------------------------------
	*/
	.humberger {
		position: inherit;
		top: 21px;
		right: 24px;
		width: 32px;
		height: 22px;
		cursor: pointer;
		z-index: 99;
		background-color: #fff;
	}

	.humberger span {
		display: block;
		width: 32px;
		height: 2px;
		background-color: #333333;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		transition: all .2s;
	}

	/* hamburger menu barの設定 */
	.humberger span:nth-last-of-type(1) {
		top: 0;
	}

	.humberger span:nth-last-of-type(2) {
		top: 10px
	}

	.humberger span:nth-last-of-type(3) {
		bottom: 0;
	}

	/* hamburger menu bar openの設定 */
	.humberger.open span:nth-last-of-type(1) {
		transform: translate(-16px, 10px) rotate(45deg);
	}

	.humberger.open span:nth-last-of-type(2) {
		background-color: transparent;
	}

	.humberger.open span:nth-last-of-type(3) {
		transform: translate(-16px, -10px) rotate(-45deg);		
	}


	/* 
	-------------------------------------------
	humberger menu open
	-------------------------------------------
	*/
	.h-gnav {
		position: fixed;
		top: -40px;
		left: 0;
		margin: 64px 0 0 0;
		width: 100vw;
		height: 100vh;
		visibility: hidden;
		opacity: 0;
	}

	.h-gnav__list {
		width: 100%;
		height: 100%;
		overflow: auto;
		flex-direction: column;
		justify-content: stretch;
		margin: 0;
		gap: 0;
	}

	.h-gnav.panelopen {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 9;
  background-color: #f5f5f5;
		visibility: visible;
		opacity: 1;
		transition: all .2s ease;
	}

	/* ナビのボーダー */
	.h-gnav__item:first-child,
	.h-gnav__item + .h-gnav__item {
		border-bottom: 1px solid #ebebeb;
	}

	.h-gnav__item--info,
	.h-gnav__menu--search {
		width: 100%;
	}


	.h-gnav__item {
		width: 100%;
		height: auto;
		display: block;
	}

	.h-gnav__item > a,
	.h-gnav__item--info a {
		display: block;
		padding: 14px 21px;
		width: 100%;
	}


	/* 
	-------------------------------------------
	global sub menu accordion
	-------------------------------------------
	*/
	.h-gnav__menu {
		display: none;
	}

	.h-gnav__menu--list {
		width: calc(100% / 2 - 6px);
		text-align: left;
	}

	.h-gnav__menu--list .product__head {
		margin: 0 0 20px 0;
	}

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

	.h-gnav__menu--list.full-size {
		width: 100%;
	}

	.h-gnav__menu--list .h-gnav__menu--number {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: stretch;
		align-items: stretch;
		gap: 10px;
	}

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


	.h-gnav__menu--tandem {
		width: 100%;
		margin: 20px 0 0 0;
	}


	/* サブメニューの文字サイズ */
 .h-gnav__menu--bold {
		font-weight: bold;
		font-size: .875rem;
	}
	

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

	.h-gnav__item--info ul li {
		flex: 1;
	}

	.h-gnav__item--info ul li + li {
		border-left: 1px solid #ebebeb;
	}

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

	.search__input {
		padding: 16px 21px;
	}

	.search__box {
		width: 100%;
		display: block;
  margin: 0 auto;
	}

	#search__submit {
		right: 36px;
	}


	/* 
	-------------------------------------------
	global menu accordion
	-------------------------------------------
	*/
	.h-gnav__menu--box {
		display: flex;
		align-items: stretch;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 10px;
		background-color: #ebebeb;
		width: 100vw;
		margin: 0 calc(50% - 50vw);
		padding: 21px;
	}

	/* 
	-------------------------------------------
	sub menu accordion button
	-------------------------------------------
	*/
	.sub_menu {
		display: block;
		position: absolute;
		top: 0;
		margin: 0;
		padding: 0;
		right: 12px;
		width: 56px;
		height: 56px;
		z-index: +1;
		border: none;
		background-color: transparent;
		cursor: pointer;
		opacity: 0;
	}

	.sub_menu span {
		display: block;
		margin: 0;
		padding: 0;
		width: 16px;
		height: 2px;
		background-color: #191919;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.sub_menu span:last-child {
		width: 2px;
		height: 16px;
	}

	.sub_menu.open span:last-child {
		opacity: 0;
	}

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

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

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


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

	.humberger {
		top: 36px;
	}
}

/* 
-------------------------------------------
custom property
-------------------------------------------
*/

/* Box sizing rules */
*,
*::before,
*::after {
	/* box-sizing: border-box; */
	/* font-family: var(--ja-text-family); */
	/* font-size: 100%; */
	font-display: swap;
}

/* alphabet */
.alphabet {
	font-family: var(--en-text-family);
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
main,
header,
section,
article,
aside,
footer,
dl,
dd,
ul,
ol,
li {
	margin: 0;
	padding: 0;
	color: var(--font-color);
}

button {
	/* margin: 0; */
	/* padding: 0; */
	/* color: var(--font-color); */
	/* border: none; */
}

/* list style none */
ul,
ol,
li {
	list-style: none;
}

/* image reset */
img,
picture {
	max-width: 100%;
	height: auto;
	display: block;
	border: none;
}

/* a link reset */
a {
	color: var(--font-color);
	text-decoration: none;
}

/* input style reset */

input,
button,
textarea,
select {
	font: inherit;
}

/* 全体の設定 */
.wrapper {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}


@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}