@charset "UTF-8";

/* ====================================
	変数定義
==================================== */
:root {
	--marker-color: #FFEF0E;
	--page-common-footer-row-gap: 1rem;
	--page-common-footer-border-radius: 10px;
	--transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ====================================
	共通スタイル
==================================== */
/* アイコン */
.icon-chevron-up,
.icon-chevron-down {
	inline-size: 0.8em;
	block-size: 1lh;
}

.icon-chevron-left,
.icon-chevron-right {
	inline-size: 0.6em;
	block-size: 1lh;
}

.icon-new-window {
	inline-size: 0.8em;
	block-size: 1lh;
	vertical-align: bottom;
}

/* ページ */
.page-basic {
	padding-bottom: 10rem;
}

.page-bottom-navi-inner {
	border-top: solid 1px #000;
}

.page-header--padding-top {
	padding-top: 4rem;
}

.page-header--padding-bottom {
	padding-bottom: 6rem;
}

.page-header--padding-bottom:has(.skip-navi:last-child) {
	padding-bottom: 8rem;
}

.page-header__main-title {
	font-size: 2.6rem;
	font-weight: 700;
}

.page-section--padding-top {
	padding-top: 6rem;
}

.page-section__title {
	font-size: 2rem;
	font-weight: 700;
}

.page-section__item {
	margin-top: 2rem;
}

/* ページ内リンク */
.skip-navi__item {
	.icon-chevron-down {
		margin-left: 0.5em;
		color: var(--sharp-red);
	}
}

.page-header .skip-navi__container {
	margin-top: 2.6rem;
}

.skip-navi__container {
	padding: 0.8em 5%;
	border: solid 1px var(--light-gray);
	border-radius: 10px;
}

.skip-navi__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 4rem;
}

.skip-navi__item {
	a {
		display: block;
		font-size: 1.4rem;
		font-weight: 400;
	}
}

/* ページネーション */
.pagination {
	margin-top: 8rem;
}

.pagination__list {
	display: grid;
	grid-template-columns: 1fr;
	padding-top: 2rem;
	border-top: 1px solid #000;
}

.pagination__list>li {
	align-self: center;
}

.pagination__list>li>a {
	display: inline-block;
	font-size: 1.7rem;
}

.pagination__next {
	justify-self: end;
}

.pagination__prev {
	justify-self: start;
}

.pagination__number {
	font-size: 1.4rem;
	color: var(--charcoal-gray);
	justify-self: center;
}

:is(.pagination__next, .pagination__prev) a {
	position: relative;
}

.pagination__next a {
	padding-right: 1.8em;
}

.pagination__prev a {
	padding-left: 1.8em;
}

:is(.pagination__next, .pagination__prev) a::before {
	content: '';
	display: block;
	position: absolute;
	aspect-ratio: 1/ 1;
	block-size: 0.8lh;
	top: 50%;
	background: url('/business/assets/template2025/images/navigation-arrow.svg') no-repeat center/contain;
}

.pagination__next a::before {
	right: 0;
	transform: translateY(-50%);
}

.pagination__prev a::before {
	left: 0;
	transform: translateY(-50%) rotate(180deg);
}

/* ページネーション・前後ページ送りあり */
.pagination__list--between:not(:has(.pagination__number)) {
	grid-template-columns: 1fr 1fr;
}

.pagination__list--between:has(.pagination__number) {
	grid-template-columns: 1fr auto 1fr;
}

/* 共通フッター */
.page-common-footer {
	padding-block: 4rem;
	background-color: var(--white-gray);
}

.page-common-footer__title {
	font-size: 2.4rem;
	font-weight: 700;
	text-align: center;
}

.page-common-footer__text {
	margin-top: 1em;
	text-align: center;
}

/* 共通フッター：サポート・お問い合わせ */
.page-common-footer__support-list {
	margin-top: 3rem;
}

.page-common-footer__support-list-anchor {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 2rem;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	padding: 1rem 1.5rem;
	background: #fff;
	border-radius: var(--page-common-footer-border-radius);
	box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.25);
	min-block-size: 7rem;
}

.page-common-footer__support-list-icon {
	display: flex;
	place-items: center;
	justify-self: center;
	inline-size: 5rem;
	block-size: 5rem;
	aspect-ratio: 1 / 1;
	/* padding: 1rem; */
	/* background: var(--white-gray); */
	border-radius: 50%;
}

.page-common-footer__support-list-title {
	font-size: 1.7rem;
	font-weight: 700;
}

.page-common-footer__support-sub-list {
	margin-top: var(--page-common-footer-row-gap);
}

.page-common-footer__support-sub-list-anchor {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.5rem;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
	padding: 1rem 0.8rem;
	background: #fff;
	border-radius: var(--page-common-footer-border-radius);
	box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.25);
}

.page-common-footer__support-sub-list-icon {
	display: flex;
	place-items: center;
	justify-self: center;
	inline-size: 3.4rem;
	block-size: 3.4rem;
	/* padding: 0.5rem; */
	/* background: var(--white-gray); */
	border-radius: 50%;
}

.page-common-footer__support-sub-list-title {
	font-size: 1.5rem;
	line-height: 1.2;
	font-weight: 700;
}

/* 共通フッター：サポート・お問い合わせ：電話番号 */
.page-common-footer__support-tell {
	inline-size: 100%;
	margin-top: var(--page-common-footer-row-gap);
	padding: 1.5rem 2rem;
	background: #fff;
	border-radius: var(--page-common-footer-border-radius);
	box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.25);
}

.page-common-footer__support-tell__title {
	margin-bottom: 0.5em;
	font-size: 1.5rem;
	text-align: center;
}

.tell-number-anchor {
	display: flex;
	justify-content: center;
	font-size: 2.8rem;
	line-height: 1;
	font-weight: 700;
	pointer-events: none;

	img {
		block-size: 3rem;
		margin-right: 0.5rem;
	}

	&.enabled {
		pointer-events: auto;
	}
}

.navi-dial {
	display: block;
	padding-top: 0.5em;
	font-size: 1.2rem;
	font-weight: 400;
	text-align: center;
}

.page-common-footer__support-tell__text {
	margin-top: 1em;
	font-size: 1.2rem;
	text-align: center;
}

.freedial-text {
	font-size: 1.2rem;
}

/* マーカー */
.marker {
	background: linear-gradient(transparent 60%, var(--marker-color) 50%);
}

/* ボタン */
.button-text--bk {
	display: grid;
	justify-content: center;
	align-items: center;
	inline-size: fit-content;
	block-size: fit-content;
	padding: .75em 1em;
	background-color: #000;
	color: #fff;
	font-size: 1.6rem;
	font-weight: 400;
	border: 1px solid #000;
}

.button-text--bk.arrow-left {
	grid-template-columns: 1fr auto 1fr;
	grid-column-gap: .8em;
}

.button-text--bk.arrow-left::after {
	content: '';
}

.button-text--bk.arrow-left svg {
	inline-size: 0.6em;
	block-size: 1em;
}

.button-m {
	inline-size: min(100%, 380px);
}

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

	/* 汎用ホバー：テキストを赤に */
	.hover-text--red {
		a {
			transition: background-size var(--transition), color var(--transition);
		}

		:hover,
		a:hover {
			color: var(--sharp-red);
		}
	}

	/* 汎用ホバー：テキストアンダーライン */
	.hover-text--underline a:not(:has(.hover-text-wrap)),
	.hover-text--underline .hover-text-wrap {
		background-image: linear-gradient(var(--sharp-red), var(--sharp-red));
		background-position: 100% 100%;
		background-repeat: no-repeat;
		background-size: 0 1px;
		transition: background-size var(--transition), color var(--transition);
	}

	.hover-text--underline a:not(:has(.hover-text-wrap)):hover,
	.hover-text--underline a:hover .hover-text-wrap {
		background-position: 0 100%;
		background-size: 100% 1px;
		color: var(--sharp-red);
	}

	/* テキストボタン */
	.button-text--bk:hover {
		color: #000;
		background-color: #fff;
		text-decoration: none;
		transition: background-color var(--transition), color var(--transition);
	}
}

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

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

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

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

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

	/* 共通フッター：サポート・お問い合わせ */
	.page-common-footer__support-list {
		>li:not(:first-child) {
			margin-top: 1rem;
		}
	}

	/* .page-common-footer__support-list-title {
		.icon-chevron-right {
			display: none;
		}
	} */

	.page-common-footer__support-sub-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		>li {
			inline-size: 48.5%;
		}

		>li:not(:nth-child(-n + 2)) {
			margin-top: 1rem;
		}
	}

	/* .page-common-footer__support-sub-list-title {
		.icon-chevron-right {
			display: none;
		}
	} */
}

/* ====================================
	1080px以上専用スタイル
==================================== */
@media print,
screen and (1080px <=width) {

	/* ページ */
	.page-basic {
		padding-bottom: 10rem;
	}

	.page-header--padding-top {
		padding-top: 5rem;
	}

	.page-header--padding-bottom {
		padding-bottom: 8rem;
	}

	.page-header--padding-bottom:has(.skip-navi:last-child) {
		padding-bottom: 10rem;
	}

	.page-header__main-title {
		font-size: 3.6rem;
	}

	.page-section--padding-top {
		padding-top: 10rem;
	}

	.page-section__title {
		font-size: 2.2rem;
	}

	.page-section__item {
		margin-top: 3rem;
	}

	/* ページ内リンク */
	.page-header .skip-navi__container {
		margin-top: 8rem;
	}

	.skip-navi__container {
		padding: 2rem 4%;
	}

	.skip-navi__list {
		display: flex;
		flex-wrap: wrap;
		gap: 1.6rem 4rem;
	}

	.skip-navi__item {

		a {
			font-size: 1.4rem;
			font-weight: 400;
		}

		.menu-arrow {
			inline-size: 12px;
			block-size: 1lh;
			margin-left: 0.6em;
		}
	}

	/* ページネーション */
	.pagination {
		margin-top: 10rem;
	}

	.pagination__list a {
		font-size: 1.7rem;
	}

	.pagination__next a {
		padding-right: 2em;
	}

	.pagination__prev a {
		padding-left: 2em;
	}

	:is(.pagination__next, .pagination__prev) a::before {
		block-size: 0.82lh;
	}

	/* 共通フッター */
	.page-common-footer {
		padding-block: 5rem;
	}

	.page-common-footer__title {
		font-size: 4rem;
	}

	/* 共通フッター：サポート・お問い合わせ */
	.page-common-footer__support-list {
		margin-top: 6rem;
	}

	.page-common-footer__support-list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(380px, 35%));
		justify-content: center;
		column-gap: 2%;
		row-gap: 1rem;
	}

	.page-common-footer__support-list-anchor {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
		column-gap: 5%;
		row-gap: 1.5rem;
		block-size: 100%;
		padding: 2.5rem 1em;
	}

	.page-common-footer__support-list-icon {
		inline-size: 6rem;
		block-size: 6rem;
		/* padding: 1.2rem; */
	}

	.page-common-footer__support-list-title {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		font-size: 2rem;
		text-align: center;

		/* .icon-chevron-right, */
		.icon-new-window {
			flex-shrink: 0;
		}
	}

	.page-common-footer__support-sub-list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 2%;
		row-gap: 1rem;
	}

	.page-common-footer__support-sub-list-anchor {
		display: grid;
		align-items: center;
		grid-template-columns: auto 1fr;
		column-gap: 2rem;
		padding: 1.6rem 10.5%;
	}

	.page-common-footer__support-sub-list-icon {
		inline-size: 5rem;
		block-size: 5rem;
	}

	.page-common-footer__support-sub-list-title {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		font-size: 1.8rem;

		/* .icon-chevron-right, */
		.icon-new-window {
			flex-shrink: 0;
		}
	}

	/* 共通フッター：サポート・お問い合わせ：電話番号 */
	.page-common-footer__support-tell {
		display: grid;
		align-items: center;
		justify-content: center;
		grid-template-columns: auto auto auto;
		column-gap: 2.5rem;
		padding: 4rem 2rem;
		background: none;
		border-radius: 0;
		box-shadow: none;
	}

	.page-common-footer__support-tell__title {
		margin-bottom: 0;
		font-size: 2rem;
		font-weight: 700;
		text-align: left;
	}

	.tell-number-anchor {
		font-size: 3.6rem;

		img {
			block-size: 4rem;
			margin-right: 1.2rem;
		}
	}

	.page-common-footer__support-tell__text {
		margin-top: 0;
	}

	.freedial-text {
		text-align: center;
	}
}