@charset "UTF-8";
/*----------------------------------------

	- useful
		- useful_link
		- useful_box
			- item_list
			- side_menu
			- pagination

-----------------------------------------*/

/*----------------------------------------
tag_list共通
-----------------------------------------*/

.tag_list li {
	font-size: var(--font-size14);
	font-weight: var(--font-size400);
	letter-spacing: var(--letter-spacing005);
	line-height: var(--line-height175);
}

.tag_list li:not(:has(a)),
.tag_list li a {
	display: flex;
	align-items: center;
	gap: 4px;
}

.tag_list li:not(:has(a)) {
	color: var(--color_cmn-text-3);
}

.tag_list li a {
	color: var(--color_sapphire-500);
}

.tag_list li:not(:has(a))::before,
.tag_list li a::before {
	content: "";
	width: 0.85rem;
	height: 1lh;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	flex-shrink: 0;
}

.tag_list li:not(:has(a))::before {
	background-image: var(--ic_tag);
}

.tag_list li a::before {
	background-image: var(--ic_tag-link);
}

@media (hover: hover) {
	.tag_list li a:hover::before {
		background-color: var(--color_aquamarine-500);
		background-image: unset;
		mask-image: var(--ic_tag-link);
		mask-size: contain;
		mask-position: center;
		mask-repeat: no-repeat;
	}
}

/* sp */
@media screen and (max-width: 800px) {
	.tag_list li:not(:has(a)) {
		font-size: var(--font-size12);
	}
}

/*----------------------------------------
useful
-----------------------------------------*/
.useful {
	margin-top: 48px;
}

/* sp */
@media screen and (max-width: 800px) {
	.useful {
		margin-top: 32px;
	}
}

/*----------------------------------------
useful_link
-----------------------------------------*/
.useful_link {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 64px;
}

.useful_link li {
	flex-shrink: 0;
}

.useful_link .ic_arrow--after {
	justify-content: center;
	gap: 8px;
}

/* sp */
@media screen and (max-width: 800px) {
	.useful_link {
		justify-content: flex-start;
		gap: 16px 32px;
	}

	.useful_link .heading_s3 {
		font-size: var(--font-size16);
	}
}

/*----------------------------------------
useful_box
-----------------------------------------*/
.useful_box {
	margin-top: 47px;
	padding-top: 64px;
	border-top: 1px solid var(--color_cmn-line);
	container: useful / inline-size;
}

.useful_box .useful_inner {
	display: grid;
	grid-template-columns: 1fr 256px;
	gap: 80px 64px;
}

.useful_box .item_list {
	display: grid;
	grid-template-columns: 1fr;
}

.useful_box .item:not(:first-of-type) {
	padding-top: 32px;
	border-top: 1px solid var(--color_cmn-line);
}

.useful_box .item:not(:last-of-type) {
	padding-bottom: 31px;
}

.useful_box .item a {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 32px;
}

.useful_box .item.new figure::before {
	content: "NEW";
	position: absolute;
	top: -1rem;
	right: -1rem;
	width: 48px;
	height: 48px;
	background-color: var(--color_raspberry-500);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--color_white);
	font-size: var(--font-size12);
	font-weight: var(--font-weight700);
	letter-spacing: var(--letter-spacing005);
	z-index: 1;
}

.useful_box .item figure {
	position: relative;
	width: 100%;
	display: flex;
	align-items: flex-start;
	border-radius: 8px;

}

.useful_box .item img {
	aspect-ratio: 3/2;
	width: 100%;
	object-fit: cover;
	border-radius: 8px;
}

@media (hover: hover) {
	.useful_box .item a:hover figure {
		background-color: var(--color_sapphire-500);
	}
	.useful_box .item a:hover img {
		opacity: 0.33;
	}
}

.useful_box .item div {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.useful_box .item .tag_list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 12px;
}

/* 中間サイズ */
@container useful (inline-size < 800px) {
	.useful_box .useful_inner {
		display: flex;
		flex-direction: column;
	}

	.useful_box .item_list {
		order: 1;
	}

	.useful_box .side_menu {
		order: 3;
	}

	.useful_box .pagination {
		order: 2;
	}
}

/* sp */
@media screen and (max-width: 800px) {
	.useful_box {
		margin-top: 31px;
		padding-top: 48px;
	}

	.useful_box .useful_inner {
		gap: 64px;
	}

	.useful_box .item div {
		gap: 7px;
	}

	.useful_box .item_list {
		grid-template-columns: 1fr;
	}

	.useful_box .item:not(:first-of-type) {
		padding-top: 24px;
	}

	.useful_box .item:not(:last-of-type) {
		padding-bottom: 24px;
	}

	.useful_box .item a {
		display: grid;
		grid-template-columns: 152px 1fr;
		gap: 24px;
	}

	.useful_box .item.new figure::before {
		top: -0.9rem;
		right: -0.9rem;
		width: 42px;
		height: 42px;
		font-size: var(--font-size11);
	}

	.useful_box .item .heading_s3 {
		font-size: var(--font-size16);
	}

	.useful_box .item .tag_list {
		row-gap: 0;
	}

	.useful_box .tag_list li {
		min-height: 25px;
	}
}

/*----------------------------------------
side_menu
-----------------------------------------*/

.side_menu {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.side_menu .gray_box {
	padding: 24px;
	width: 100%;
}

.side_menu div.gray_box p:has([class*="btn_"]) {
	margin-top: 24px;
}

.side_menu div.gray_box .btn_xs1 {
	width: 100%;
}

.side_menu .tag_list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5px;
}

/* 中間サイズ */
@container useful (inline-size < 800px) {
	.side_menu {
		max-width: 480px;
		width: 100%;
		margin-inline: auto;
	}

	.side_menu div.gray_box p:has([class*="btn_"]) {
		max-width: 240px;
		margin-inline: auto;
	}

	.side_menu .tag_list {
		display: flex;
		flex-wrap: wrap;
		gap: 8px 16px;
	}
}

/* sp */
@media screen and (max-width: 800px) {
	.side_menu .gray_box:not(.sand) {
		padding-inline: 15px;
	}
	.side_menu .gray_box:not(.sand) .font16 {
		font-size: var(--font-size14);
		letter-spacing: 0;
		text-align: center;
	}
}

/*----------------------------------------
pagination
-----------------------------------------*/

.pagination {
	grid-area: 2/1/2/3;
}

.pagination li:not(.current) {
	background-color: var(--color_mist-300);
}