@charset "UTF-8";

/* ====================================
	グローバル：リセットスタイル
 ==================================== */
:root {
	scroll-behavior: auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure {
	margin: 0;
	line-height: inherit;
}

img,
video {
	inline-size: 100%;
	block-size: auto;
	vertical-align: middle;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

em {
	font-style: normal;
	font-weight: bold;
}

hr {
	margin: 0;
	opacity: 1;
	border: none;
	border-top: solid 1px #bfbfbf;
}

button {
	appearance: none;
	background: transparent;
	border: none;
	border-radius: 0;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
	color: #000;
}

:focus {
	outline: none;
}

/* ====================================
	グローバル：ベーススタイル
 ==================================== */
:root {
	--sharp-red: #e6000d;
	--sharp-red-dark: #be0009;
	--focus-indicator: #116aff;
	--caption-color: #0a50c5;
	--charcoal-gray: #535353;
	--steel-gray: #767676;
	--silver-gray: #a0a0a0;
	--light-gray: #d9d9d9;
	--white-gray: #f5f5f5;
	--base-color: #f5f5f5;
	--breadcrumb-color: #e6e6e6;
	--border-radius-small: 10px;
	--border-radius-medium: 20px;
	--border-radius-large: 30px;
}

html {
	font-size: 62.5%;
}

body {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.6rem;
	line-height: 1.6;
	font-weight: 300;
	color: #000;
	background: var(--base-color);
}

a {
	color: #000;
	text-decoration: none;
}

/* フォーカスインジケータ― */
*:focus-visible {
	outline: 2px solid var(--focus-indicator);
	outline-offset: 1px;
}

/* ==========================================
	ホバー、マウスポインタがサポートされている環境
=========================================== */
@media (hover:hover) and (pointer: fine) {

	a:hover {
		color: #000;
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	.hover-fade a,
	a.hover-fade,
	a.hover-parent.hovering .hover-trigger.fade {
		transition: opacity .3s ease 0s;
	}

	.hover-fade a.hovering,
	a.hover-fade.hovering,
	a.hover-parent.hovering .hover-trigger.fade {
		opacity: .7;
	}

	a.hover-parent {
		display: block;
		pointer-events: none;
		text-decoration: none;
	}

	a.hover-parent .hover-trigger {
		pointer-events: auto;
	}

	a.hover-parent span.hover-trigger {
		display: inline-block;
	}

	a.hover-parent.hovering .hover-trigger {
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	/* ブロックスキップリンク	 */
	.block-skip__anchor:hover {
		text-decoration: none;
	}

	/* ページトップに戻る */
	.page-top__anchor:hover {
		background-image: url('/assets/common/images/chevron-up-solid.svg');
		background-color: #fff;
		transition: background-color .3s ease;
	}

	/* ボタンリンク */
	.btn-has-arrow-left:hover {
		color: #fff;
		background-color: #000;
		text-decoration: none;
		transition: background-color .3s ease;
	}

	/* グローバルフッター・お問い合わせボタンリンク */
	.global-footer__inquiry a {
		text-decoration: none;
	}
}

/* ====================================
	共通スタイル
===================================== */

/* パンくずリスト */
.breadcrumb {
	background: var(--breadcrumb-color);
}

.breadcrumb__list {
	font-size: 1.2rem;
	font-weight: 400;
	padding-block: .5em;
}

.breadcrumb__list>li {
	display: inline;
}

.breadcrumb__list>li:not(:first-child)::before {
	content: '\03e';
	margin-inline: 0.5em;
}

.breadcrumb__website-title {
	display: inline;
	font-size: inherit;
	font-weight: inherit;
}

/* 新規ウィンドウアイコン */
.icon-window {
	inline-size: auto;
	block-size: 0.6lh;
	margin-left: 0.2em;
}

/* スクロール禁止指定 */
.scroll-prevent {
	position: fixed;
	inline-size: 100%;
	block-size: 100%;
	overflow-y: scroll;
}

/* ブロックスキップリンク */
.block-skip {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	left: -100%;
	top: -100%;
	z-index: -1;
}

.block-skip:focus-within {
	position: absolute;
	inline-size: fit-content;
	block-size: fit-content;
	left: 20px;
	top: 20px;
	z-index: 10;
}

.block-skip__anchor:focus-visible {
	font-weight: 400;
	padding: .4em;
	background-color: #fff;
}

/* グローバルヘッダー */
.global-header {
	background: #fff;
}

.global-header__container {
	display: flex;
	justify-content: center;
	align-items: center;
	block-size: 56px;
}

/* グローバルヘッダー・サイトロゴ */
.global-header__logo {
	inline-size: 96px;
}

/* グローバルヘッダー・サイト内検索アイコン */
.global-site-search__button-open {
	inline-size: 30px;
}

/* グローバルヘッダー：検索フォーム */
.global-site-search__form {
	display: flex;
	--global-site-search-height: 4rem;
	block-size: var(--global-site-search-height);
	background: #fff;
	color: #716f63;
	position: relative;
}

.global-site-search__input {
	inline-size: calc(100% - var(--global-site-search-height));
	block-size: 100%;
	border: none;
	padding: 0.4em 0 0.4em 1em;
	font-size: 1.4rem;
}

.global-site-search__form .poplink {
	top: var(--global-site-search-height);
}

.global-site-search__input:focus-visible {
	outline-color: #000;
}

.global-site-search__button-submit {
	display: grid;
	place-items: center;
	block-size: 100%;
	aspect-ratio: 1/ 1;
	background-color: #000;
}

.global-site-search__button-submit img {
	inline-size: 24px;
}

/* ページトップに戻るボタン */
.page-top {
	padding-block: 2rem;
	text-align: right;
	position: sticky;
	bottom: 6.5rem;
	z-index: 10;
	font-size: 0;
}

.page-top__anchor {
	display: inline-block;
	inline-size: 4rem;
	block-size: 3rem;
	border-radius: 5px;
	border: 1px solid var(--charcoal-gray);
	background: var(--charcoal-gray) url('/assets/common/images/chevron-up-solid-w.svg') no-repeat center center/18px auto;
}


/* グローバルフッター・会社情報 */
.global-footer__sitemap {
	display: none;
}

.global-footer__navi {
	background: #403c32;
	padding-block: 1.1rem;
}

.global-footer__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	--global-footer-navi-gap: 0.5rem;
	gap: var(--global-footer-navi-gap);
}

.global-footer__list a {
	display: block;
	--global-footer-navi-color: #c3c2bb;
	color: var(--global-footer-navi-color);
	font-size: 1.1rem;
	font-weight: 500;
}

.global-footer__list li:not(:last-of-type) a {
	border-right: 1px solid var(--global-footer-navi-color);
	padding-right: var(--global-footer-navi-gap);
}

.copy-right {
	background: #403c32;
	border-top: 1px solid #79776f;
	padding-block: 0.8rem;
}

.copy-right a {
	display: block;
	font-size: 1.1rem;
	font-weight: 500;
	color: #c3c2bb;
	text-align: center;
	inline-size: fit-content;
	margin-inline: auto;
}

/* 注釈 */
.caption__list.inline>li>span {
	color: var(--caption-color);
	margin-right: 0.5em;
}

/* 注釈・その他共通 */
.caption__list>li::before {
	margin-right: 0.5em;
}

:is(.caption__list.ast, .caption__list.dia, .caption__list.kome, .caption__list.star, .caption__list.normal)>li::before {
	color: var(--caption-color);
}

/* 注釈・「・」 */
.caption__list.normal>li::before {
	content: "\30fb";
}

/* 注釈・「●」 */
.caption__list.disc>li::before {
	content: "\25cf";
}

/* 注釈・「◆」*/
.caption__list.dia>li::before {
	content: "\25c6";
}

/* 注釈・「＊」*/
.caption__list.ast>li::before {
	content: "\ff0a";
}

/* 注釈・「★」*/
.caption__list.star>li::before {
	content: "\2605";
}

/* 注釈・「※」 */
.caption__list.kome>li::before {
	content: "\203b";
}

/* 注釈テキスト設定 */
.caption__list {
	font-size: 1.2rem;
}

/* 注釈カウンター設定 */
.caption__list.counter>li {
	counter-increment: caption-number;
}

/* 注釈・「＊」カウンター設定 */
.caption__list.counter.ast>li::before {
	content: "\ff0a"counter(caption-number)"";
}

/* 注釈・「※」カウンター設定 */
.caption__list.counter.kome>li::before {
	content: "\203b"counter(caption-number)"";
}

/* ====================================
	スマートフォン専用スタイル（～768px）
===================================== */
@media screen and (width <768px) {

	.desktop-only,
	.pc-only {
		display: none;
	}

	.base-width-sp,
	.base-width {
		padding-inline: 5%;
	}

	.star>li>span,
	.single>li>span {
		margin-right: .5em;
	}

	/* 注釈（※） */
	.kome>li::before {
		content: "\203b";
		margin-right: 0.5em;
	}

	/* グローバヘッダー */
	.global-header-container {
		block-size: 56px;
		padding-top: 14px;
		padding-bottom: 9px;
		position: relative;
	}

	.global-header__button {
		display: grid;
		place-items: center;
		inline-size: 24px;
		position: absolute;
		top: 16px;
		left: 5%;
	}

	.global-header__button img:not(.is-active) {
		display: none;
	}

	/* グローバヘッダー：グローバルナビゲーション */
	.global-header-navi {
		display: none;
		position: fixed;
		inline-size: 100%;
		block-size: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		overflow: auto;
		top: 56px;
		left: 0;
		z-index: 100;
	}

	.list-header-navi li,
	.list-header-sub-navi li {
		background-color: #fff;
	}

	.global-header-navi__list,
	.global-header-navi__sub-list,
	.global-header-navi__social {
		inline-size: 100%;
		background: #fff;
		position: relative;
	}

	.global-header-navi__list>li,
	.global-header-navi__sub-list>li {
		border-top: var(--light-gray) 1px solid;
	}

	.global-header-navi__list>li>a,
	.global-header-navi__sub-list>li>a {
		display: block;
		padding: 16px 40px 16px 20px;
		font-size: 1.4rem;
		font-weight: 500;
		position: relative;
	}

	.global-header-navi__list>li>a::before,
	.global-header-navi__sub-list>li>a::before {
		content: '';
		display: block;
		inline-size: 1.2rem;
		block-size: 1.4rem;
		background: url('/assets/common/images/chevron-right-solid.svg') no-repeat center/contain;
		position: absolute;
		top: 50%;
		right: 2rem;
		transform: translateY(-50%);
	}

	.global-header-navi__list a[data-accordion-target]::before {
		background-image: url('/assets/common/images/plus-solid.svg');
	}

	.global-header-navi__list a.is-open[data-accordion-target]::before {
		background-image: url('/assets/common/images/minus-solid.svg');
	}

	.global-header-navi__accordion {
		padding-inline: 20px;
		background: var(--white-gray);
		border-top: solid 1px var(--light-gray);
		display: none;
	}

	.global-header-navi__accordion a {
		display: block;
		padding-inline: 16px;
		font-size: 1.2rem;
		font-weight: 500;
	}

	.global-header-navi__accordion--list>li>a {
		padding-block: 1em;
	}

	.global-header-navi__accordion--list>li:not(:last-of-type)>a {
		border-bottom: solid 1px var(--light-gray);
	}

	.global-header-navi__accordion--list svg {
		margin-left: 0.2em;
		inline-size: auto;
		block-size: 0.6lh;
	}

	/* グローバルヘッダー：検索フォーム */
	.global-site-search {
		inline-size: 100%;
		padding: 15px 5%;
		background-color: var(--white-gray);
	}

	.global-site-search:focus {
		outline: none;
	}

	/* グローバル製品フッター */
	#globalProductsFooter {
		display: none;
	}
}

/* ====================================
	TAB、PC、印刷専用スタイル（768px～）
===================================== */
@media print,
screen and (width >=768px) {
	.sp-only {
		display: none;
	}

	body {
		line-height: 1.5;
	}

	.outer-base-width {
		padding-inline: 1.5%;
	}

	/* グローバルヘッダー */
	.global-header {
		font-size: 1.5rem;
	}

	.global-header__container {
		justify-content: space-between;
		column-gap: 2rem;
		block-size: 7.2rem;
		min-block-size: 72px;
	}

	/* グローバルヘッダー・サイトロゴ */
	.global-header__logo {
		inline-size: 125px;
	}

	/* スマホ表示用・グローバルナビメニュー開閉ボタン */
	.global-header__button {
		display: none;
	}

	/* スマホ表示用・グローバルナビメニュー法人のお客様 */
	.global-header-navi__accordion {
		display: none;
	}

	/* グローバルナビゲーション */
	.global-header-navi-wrap {
		display: contents;
	}

	.global-header-navi {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: end;
		flex: 1 0;
		column-gap: 2rem;
		font-size: 1.5rem;
		font-weight: 400;
		block-size: 100%;
		padding-block: 0.5em;
	}

	.global-header-navi__container,
	.global-header-navi__list {
		display: contents;
	}

	.global-header-navi__sub-list {
		display: contents;
		font-size: .8em;
	}

	.global-header-navi__sub-list li:first-of-type a {
		border-left: 1px solid #000;
		padding-left: 1.4em;
	}

	/* サイト内検索フォーム */
	.global-site-search__overlay {
		display: none;
		position: fixed;
		inline-size: 100%;
		block-size: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		top: 7.2rem;
		left: 0;
		z-index: 11;
	}

	.global-site-search__container {
		background: #59574B;
		padding-block: 4.5rem 2.5rem;
	}

	.global-site-search__form {
		inline-size: 620px;
		--global-site-search-height: 5rem;
		margin-inline: auto;
	}

	.global-site-search__button-close {
		display: block;
		inline-size: fit-content;
		margin: 4rem auto 0;
		font-size: 1.4rem;
		font-weight: 500;
		color: var(--light-gray);
	}

	.global-site-search__button-submit img {
		inline-size: 28px;
	}

	/* サイト内検索モーダル内・クイックリンク */
	.quick-link {
		max-inline-size: 620px;
		margin: 4rem auto 0;
	}

	.quick-link__label {
		font-size: 1.2rem;
		font-weight: 500;
		color: var(--light-gray);
	}

	.quick-link__list {
		margin-top: 2rem;
	}

	.quick-link__list>li:not(:first-child) {
		margin-top: 0.8em;
	}

	.quick-link__list>li>a {
		display: inline-block;
		font-size: 1.4rem;
		font-weight: 500;
		color: #fff;
		padding-left: 1.4em;
		background: url('/assets/common/images/chevron-right-solid-w.svg') no-repeat left center/0.7lh auto;
	}

	/* グローバルページタイトル */
	#globalPageTitle {
		margin-bottom: 0;
		border-bottom: none;
	}

	.global-page-title {
		font-size: 3rem;
		padding-block: 1.3em;
	}

	/* パンくずリスト */
	.breadcrumb__list>li::before {
		margin-inline: 0.8em;
	}

	/* グローバルフッター・サイトマップ */
	.global-footer__sitemap {
		display: block;
		background: #59574b;
		padding-block: 3rem;
	}

	.global-footer__sitemap a {
		color: #fff;
	}

	.global-footer__inquiry svg {
		inline-size: auto;
		block-size: 0.7lh;
		margin-left: 0.2em;
	}

	.global-footer__sitemap-container {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"lineup solution group1 group2"
			"lineup solution inquiry inquiry";
		gap: 6rem 3%;
	}

	.global-footer__sitemap-category {
		font-size: 1.6rem;
		font-weight: 500;
		padding-bottom: 0.8rem;
		border-bottom: 1px solid #79776f;
	}

	.global-footer__sitemap-list {
		display: flex;
		flex-direction: column;
		row-gap: 0.4em;
		margin-top: 1.4rem;
		font-size: 1.2rem;
		font-weight: 300;
	}

	.global-footer__sitemap-lineup {
		grid-area: lineup;
	}

	.global-footer__sitemap-solution {
		grid-area: solution;
	}

	.global-footer__sitemap-group1 {
		grid-area: group1;
		display: flex;
		flex-direction: column;
		row-gap: 1.8rem;
	}

	.global-footer__sitemap-group2 {
		grid-area: group2;
		display: flex;
		flex-direction: column;
		row-gap: 1.8rem;
	}

	.global-footer__inquiry {
		grid-area: inquiry;
	}

	.global-footer__inquiry a {
		display: block;
		background: #fff;
		color: #000;
		border-radius: 10px;
		text-align: center;
		font-size: 1.6rem;
		font-weight: 500;
		padding: 1em;
	}

	/* スマホ専用ナビを非表示 */
	.global-header-navi__social {
		display: none;
	}

	/* グローバルフッター・会社情報以下 */
	.global-footer__navi {
		padding-block: 1.4rem;
	}

	.global-footer__list {
		--global-footer-navi-col-gap: 1.8rem;
		column-gap: var(--global-footer-navi-col-gap);
	}

	.global-footer__list a {
		font-size: 1.2rem;
	}

	.global-footer__list li:not(:last-of-type) a {
		padding-right: var(--global-footer-navi-col-gap);
	}

	.copy-right {
		padding-block: 1.3rem;
	}

	.copy-right a {
		font-size: 1.2rem;
	}

	/* 注釈 */
	.caption__list {
		padding-left: 2em;
	}

	.caption__list>li {
		text-indent: -2em;
	}

	/* 注釈・その他 */
	/* .caption__list.disc,
	.caption__list.ast,
	.caption__list.dia,
	.caption__list.star,
	.caption__list.kome,
	.caption__list.normal {
		padding-left: 1.5em;
	} */

	/* :is(.caption__list.disc, .caption__list.ast, .caption__list.dia, .caption__list.kome, .caption__list.star, .caption__list.normal)>li::before {
		text-indent: -1.5em;
	} */

	/* ページトップに戻る */
	.page-top {
		bottom: 0;
		block-size: 8rem;
	}

	.page-top__anchor {
		inline-size: 6rem;
		block-size: 4rem;
	}
}

/* ====================================
	タブレット専用スタイル（768px～1079px）
===================================== */
@media screen and (768px <=width < 1080px) {
	.desktop-only {
		display: none;
	}

	.global-footer__list {
		padding-inline: 10%;
	}
}

/* ====================================
	PC専用スタイル（1080px～）
===================================== */
@media print,
screen and (1080px <=width) {

	.outer-base-width.base90 {
		padding-inline: 5%;
	}

}

/* ====================================
	大画面PC専用スタイル（1200px～）
===================================== */
@media screen and (1200px <=width) {

	.base-width-pc,
	.base-width {
		max-inline-size: 1200px;
		margin-inline: auto;
	}

	.outer-base-width.base90 .base-width {
		max-inline-size: 1080px;
	}
}

/* ====================================
	印刷専用スタイル
===================================== */
@media print {
	body {
		inline-size: 960px;
		margin-inline: auto;
	}
}