@charset "utf-8";
/* 下層ページ（本文のブロック） */

.page_body{
	padding-bottom: 120px;
}

/* ブロックの上の余白は、どの型も同じにする（大見出しだけ広く） */
.page_body > *{
	margin-top: 70px;
}

.page_body > .block_heading{
	margin-top: 90px;
}

/* 大見出し（中央） */
.block_heading{
	font-size: 30px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-align: center;
}

/* 中見出し（薄い水色の帯。左に青い線） */
.block_subheading{
	padding: 16px 30px 16px 33px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.08em;
	background-color: #f1fffe;
	border-left: 17px solid #0b5ab4;
}

/* 写真と文章とリンク（薄い水色の箱） */
.block_card{
	display: flex;
	align-items: flex-start;
	gap: 58px;
	padding: 52px 58px 50px;
	background-color: #ecfffe;
	border-radius: 20px;
}

.card_img{
	flex-shrink: 0;
	width: 483px;
	max-width: 45%;
}

.card_img img,
.media_img img{
	display: block;
	width: 100%;
	aspect-ratio: 483 / 283;
	object-fit: cover;
	border-radius: 14px;
}

.card_body{
	flex: 1;
	min-width: 0;
}

.card_title{
	padding-bottom: 18px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.08em;
	border-bottom: 2px solid #9dd5de;
}

.card_body p{
	margin-top: 22px;
	font-size: 15px;
	line-height: 1.75;
}

.card_btn{
	margin-top: 32px;
	text-align: right;
}

/* 写真と文章（左右） */
.block_media{
	display: flex;
	align-items: flex-start;
	gap: 56px;
	padding: 0 58px;
}

.block_media_reverse{
	flex-direction: row-reverse;
}

.media_img{
	flex-shrink: 0;
	width: 483px;
	max-width: 45%;
}

.media_body{
	flex: 1;
	min-width: 0;
	padding-top: 20px;
}

/* 小見出し（青い四角の印と下線） */
.media_title{
	position: relative;
	padding: 0 0 14px 34px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.08em;
	border-bottom: 2px solid #abbdd2;
}

.media_title::before{
	content: "";
	position: absolute;
	top: 0.45em;
	left: 0;
	width: 18px;
	height: 18px;
	background-color: #0b5ab4;
}

.block_media p,
.block_text p,
.block_plain p{
	margin-top: 22px;
	font-size: 15px;
	line-height: 1.75;
}

.block_text,
.block_plain,
.block_photos{
	padding: 0 58px;
}

/* 写真2枚（下に青い説明） */
.block_photos{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 38px;
}

.photos_item img{
	display: block;
	width: 100%;
	aspect-ratio: 523 / 283;
	object-fit: cover;
	border-radius: 14px;
}

.photos_item p{
	margin-top: 16px;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	color: #0b5ab4;
}

/* ボタン（中央） */
.block_button{
	text-align: center;
}





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

	.block_card{
		gap: 36px;
		padding: 40px 36px;
	}

	.block_media,
	.block_text,
	.block_plain,
	.block_photos{
		padding: 0;
	}
}





/* ------ スマホ・タブレット ------ */
@media screen and (max-width: 900px){

	.page_body{
		padding-bottom: 60px;
	}

	.page_body > *{
		margin-top: 40px;
	}

	.page_body > .block_heading{
		margin-top: 50px;
	}

	.block_heading{
		font-size: 20px;
	}

	.block_subheading{
		padding: 10px 14px;
		font-size: 18px;
		border-left-width: 8px;
	}

	.block_card,
	.block_media,
	.block_media_reverse{
		flex-direction: column;
		gap: 0;
	}

	.block_card{
		padding: 24px 20px 28px;
		border-radius: 14px;
	}

	.card_img,
	.media_img{
		width: 100%;
		max-width: none;
	}

	.card_body,
	.media_body{
		width: 100%;
		padding-top: 22px;
	}

	.card_title{
		padding-bottom: 12px;
		font-size: 18px;
	}

	.card_body p,
	.block_media p,
	.block_text p,
	.block_plain p{
		margin-top: 16px;
		font-size: 14px;
	}

	.card_btn{
		margin-top: 24px;
		text-align: center;
	}

	.media_title{
		padding: 0 0 10px 24px;
		font-size: 17px;
	}

	.media_title::before{
		width: 13px;
		height: 13px;
	}

	.block_photos{
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}

	.photos_item p{
		margin-top: 10px;
		font-size: 14px;
	}
}