@charset "utf-8";

/* =============== 基本 =============== */

/* 非表示 */
#pankuzu_wrap,
.content_header_wrap {
	display: none !important;
}
div[class^="detail_"]::before,
div[class^="detail_"]::after {
	content: none;
}

/* ヘッダイメージ */
#skip + div[class^="detail_image_"] {
	margin-bottom: 60px;
	overflow: hidden;
}
#skip + div[class^="detail_image_"] img {
	display: block;
	max-width: 100%;
	max-height: 60vh;
	margin: 0;
	position: relative;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

/* 見出し */
#main_body h2,
#main_body h3,
#main_body h4,
#main_body h5,
#main_body h6 {
	margin-top: 60px;
}

/* =============== 見出し下のGridレイアウト =============== */

.split_wrap {
	display: grid;
	margin: 1em clamp(20px, 5%, 50px);
	grid-template-columns: 3fr 4fr;
	grid-template-rows: auto;
	grid-column-gap: clamp(20px, 5%, 50px);
	grid-row-gap: 0;
}
.split_left  { grid-area: 1 / 1 / 2 / 2; }
.split_right { grid-area: 1 / 2 / 2 / 3; }

/* 横並びレイアウトの枠内配置 */

.split_left,
.split_right {
	display: flex;
	flex-direction: column;
	align-content: center;
	align-items: flex-start;
}
.split_left {
	justify-content: flex-start;
}
.split_right {
	justify-content: center;
}

/* 左側：画像 */

#main_body .split_wrap .split_left p {
	margin: 0;
}
#main_body .split_wrap .split_left img {
	max-width: 100%;
	height: auto !important;
	vertical-align: top;
}

/* 右側：テキスト ※Gridレイアウトにするためmarginを半分にする */

#main_body .split_wrap .split_right p {
	margin: 1em 0 0;
}
#main_body .split_wrap .split_right p:first-child {
	margin-top: 0;
}
#main_body .split_wrap .split_right p:last-child {
	margin-bottom: 0;
}

/* =============== リスト（横並び） =============== */

#main_body ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: flex-start;
	gap: clamp(10px, 2vw, 30px);
}
#main_body ul li {
	margin: 0;
	padding: 0;
	width: calc(16.6666% - clamp(10px, 2vw, 30px));
}
#main_body ul li a {
	display: block;
	margin: 0;
	padding: 13px 5px;
	border-radius: 25px;
	background: var(--baseDarkCol);
	color: #fff;
	letter-spacing: .05em;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	outline: 5px solid rgb(3 130 143 / 0);
	transition: outline .3s ease-out;
}
#main_body ul li a:hover,
#main_body ul li a:focus {
	text-decoration: underline;
	outline: 5px solid rgb(3 130 143 / .35);
}

/**********************************************************************************/
/* タブレット */
/**********************************************************************************/
@media screen and (max-width : 1199px) {

	#skip + div[class^="detail_image_"] {
		margin: 0 -20px 40px;
	}

	/* =============== リスト（横並び） =============== */
	#main_body ul li {
		width: calc(20% - clamp(10px, 2vw, 30px));
	}

}

@media screen and (max-width: 780px) {

	/* =============== リスト（横並び） =============== */
	#main_body ul li {
		width: calc(25% - clamp(10px, 2vw, 30px));
	}

}
/**********************************************************************************/
/* タブレット ここまで */
/**********************************************************************************/



/**********************************************************************************/
/* スマートフォン */
/**********************************************************************************/
@media screen and (max-width: 640px){

	/* ヘッダイメージ */
	#skip + div[class^="detail_image_"] {
		margin: -10px -20px 40px;
	}
	#skip + div[class^="detail_image_"] img {
		max-width: 100%;
	}

	/* =============== 見出し下のGridレイアウト→解除 =============== */

	.split_wrap {
		display: block;
		margin: 1em 0;
		padding-left: 0;
		padding-right: 0;
	}
	.split_left,
	.split_right {
		display: block;
	}
	#main_body .split_wrap .split_right p {
		margin: 1em 0;
	}
	#main_body .split_wrap .split_right p:first-child {
		margin-top: 1em;
	}

	/* =============== リスト（横並び） =============== */
	#main_body ul li {
		width: calc((100% - (clamp(10px, 2vw, 30px) * 2)) / 3);
	}

}