@charset "UTF-8";

/* ====================================
	共通スタイル
==================================== */
/* リセット */
main {
	font-weight: 400;

	a:hover {
		text-decoration: initial;
	}
}

/* ====================================
	480px以上専用スタイル
==================================== */
@media screen and (width >=480px) {
	.disp-xs {
		display: none;
	}
}

/* ====================================
	768px未満専用スタイル
==================================== */
@media screen and (width <768px) {
	.disp-lm {
		display: none;
	}
}

/* ====================================
	768px以上専用スタイル
==================================== */
@media screen and (width >=768px) {}

/* ====================================
	768px以上1080px未満専用スタイル
==================================== */
@media screen and (768px <=width < 1080px) {}

/* ====================================
	1080px未満専用スタイル
==================================== */
@media screen and (width <1080px) {
	.disp-m {
		display: none;
	}

	/* ローカルナビ */
	.local-navi-pc {
		display: none;
	}

	.local-navi-accordion {
		display: none;
	}

	.local-navi__list {
		font-size: 1.4rem;
	}

	.local-navi__list>li {
		border-top: 1px solid #d9d9d9;
	}

	.local-navi__list>li:last-child {
		border-bottom: 1px solid #d9d9d9;
	}

	.local-navi__list a {
		display: block;
		position: relative;
	}

	.local-navi__list>li:not(:has(button))>a {
		padding: 1.1em 0;
	}

	/* ローカルナビ：開閉ボタン */
	.local-navi__button {
		display: block;
		inline-size: 100%;
		text-align: left;
		font-weight: inherit;
		padding: 1.1em 0;
		position: relative;
	}

	/* ローカルナビ：アコーディオン要素 */
	.local-navi-accordion__list {
		font-size: 1.2rem;
		padding-left: 1em;
		border-top: 1px solid #d9d9d9;
	}

	.local-navi-accordion__list>li:not(:first-child) {
		border-top: 1px solid #d9d9d9;
	}

	.local-navi-accordion__list>li>a {
		padding: 1em 0 1em 0.5em;
	}

	.local-navi-accordion__list>li>a.active {
		color: var(--sharp-red);

		&::before {
			background-image: url('/assets/common/images/chevron-right-solid-r.svg');
		}
	}

	/* ローカルナビ：アイコン定義 */
	.local-navi__list a::before,
	.local-navi__button::before {
		content: '';
		display: block;
		inline-size: 12px;
		block-size: 14px;
		position: absolute;
		right: 5px;
		top: 50%;
		transform: translateY(-50%);
	}

	.local-navi__button::before {
		background: url('/assets/common/images/plus-solid.svg') no-repeat center center/auto 100%;
	}

	.local-navi__button.is-open::before {
		background: url('/assets/common/images/minus-solid.svg') no-repeat center center/auto 100%;
	}

	.local-navi__list>li:not(:has(button))>a::before,
	.local-navi-accordion__list>li>a::before {
		background: url('/assets/common/images/chevron-right-solid.svg') no-repeat center center/auto 100%;
	}
}

/* ====================================
	1080px以上専用スタイル
==================================== */
@media print,
screen and (1080px <=width) {
	.disp-s {
		display: none;
	}

	/* ローカルナビ */
	.local-navi-mobile {
		display: none;
	}

	.local-navi-pc {
		min-block-size: 40px;
		background-color: var(--white-gray);
	}

	.local-navi__list {
		display: flex;
		flex-wrap: wrap;
		gap: 0 1.5em;
	}

	.local-navi__list a {
		display: inline-block;
		font-size: 1.3rem;
		font-weight: 400;
		padding: 0.8em 0;
		text-decoration: none;
	}

	.local-navi__list a.active {
		font-weight: 700;
	}
}

/* ====================================
	1200px以上専用スタイル
==================================== */
@media screen and (1200px <=width) {
	.base-width {
		max-inline-size: 120rem;
	}
}

/* ====================================
	1280px未満専用スタイル
==================================== */
@media screen and (width <1280px) {
	.disp-l {
		display: none;
	}
}

/* ====================================
	ホバー、マウスポインタが有効なデバイス
==================================== */
@media (hover:hover) and (pointer: fine) {

	.local-navi__list a:hover {
		font-weight: 700;
	}
}