@charset "UTF-8";

/* ====================================
	共通スタイル
==================================== */
.mt-1em {
	margin-top: 1em;
}

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

.icon-new-window {
	inline-size: 1em;
	block-size: 0.6lh;
	margin-left: 0.5em;
}

/* ページ */
.page-basic {
	padding-top: 6rem;
	font-weight: 400;
}

.page-title {
	font-size: 2.4rem;
	font-weight: bold;
	text-align: center;
}

.page-title+p {
	font-size: 1.5rem;
}

/* カードリスト */
.card-list {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem 3rem;
	margin-top: 6rem;

	li {
		inline-size: 100%;
		padding: 1em 5%;
		font-size: 1.6rem;
		font-weight: bold;
		background: #fff;
		border-radius: 10px;
		box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.25);
	}

	a {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 1rem 2rem;
		block-size: 100%;
	}
}

.card-list-icon {
	inline-size: 6rem;
}

.card-list-text {
	inline-size: 100%;
}

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

/* ====================================
	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) {}

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

	/* ページ */
	.page-basic {
		padding-top: 13rem;
	}

	.page-title {
		font-size: 4rem;
	}

	.page-title+p {
		font-size: 1.6rem;
	}

	/* カードリスト */
	.card-list {
		flex-wrap: nowrap;

		li {
			min-block-size: 15rem;
			padding: 2rem 1rem;
			font-size: 1.8rem;
			text-align: center;
		}

		a {
			flex-direction: column;
		}
	}
}

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

	/* カードリスト */
	.card-list a:hover {
		text-decoration: none;
	}
}