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

/*フォント関連*/
.line-page { font-size: 62.5%!important;
	font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
/*フォント関連ここまで*/

/*共通*/
.line-page .is_pc {
		display: block;
	}
.line-page .is_sp {
		display: none;
	}
.flex {
	display: flex;
}
.grid02 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
}
.grid03 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}
.line-page .line-h3 {
	font-size: 30px;
	color: #1b3d6b;
	font-weight: bold;
	margin-bottom: 40px;
}
.line-page .line-p {
	font-size: 14px;
}

/*共通ここまで*/

.line-h2 {
	margin-bottom: 80px;
	padding-bottom: 0;
	border-bottom: none;
}
#intro,
#merit,
#nav{
	margin-bottom: 100px;
	text-align: center;
}
#merit {
	padding: 0 30px;
}
#merit .grid02 li {
	margin-bottom: 70px;
}
#merit .grid02 h4 {
	font-size: 20px;
	color: #1b3d6b;
	display: flex;
	align-items: center; /* アイコンと文字の上下中央を揃える */
	margin-bottom: 30px;
	border-bottom: none;
}
#merit .grid02 {
	text-align: left;
}
#nav {
	text-align: center;
	margin-bottom: 40px;
}
#nav .flex {
	justify-content: space-between;
	gap: 10px;
}
#nav .flex .line-btn{
	width: 48%;
}
/*
#nav .flex .btn {
	display: block;
	background-color: #00afec;
	border-radius: 15px;
	border:  5px solid #68cbee;
	color: #fff;
	padding: 15px 40px;
	padding-right: 60px;
	font-size: 20px;
	font-weight: bold;
	align-content: center;
	position: relative;
}
#nav .flex .btn::after,
#protocol .step-box .btn02::after {
	content: "";
	display: inline-block;
	width: 19px;
	height: 15px;
	background-image: url("image/btn_icon.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 20px;
}
*/
#protocol,
#howto{
	padding: 0 30px;
}
#protocol .line-h3,
#howto .line-h3{
	border-top: 1px solid #000;
	padding-top: 40px;
	text-align: center;
	font-size: 30px;
	font-weight: bold;
	color: #00aeeb;
}
#protocol .step-box {
	margin-bottom: 80px;
}
#protocol .step-box .step,
#howto .grid03 li .step{
	font-size: 20px;
	font-weight: bold;
	color: #00aeeb;
	margin-bottom: 10px;
}
#protocol .step-box img {
	display: block;
	margin: 50px auto 5px;
}
#protocol .step-box a {
	font-size: 20px;
	display: block;
	text-align: center;
}
/*
#protocol .step-box .btn02 {
	display: block;
	background-color: #00afec;
	border-radius: 15px;
	border:  5px solid #68cbee;
	color: #fff;
	padding: 15px 40px;
	padding-right: 60px;
	font-size: 20px;
	font-weight: bold;
	align-content: center;
	position: relative;
	width: 100%;
	margin: 40px 0 30px;
}
#protocol .step-box .btn02::after {
	background-image: url("image/btn_icon02.svg");
}
*/
#protocol .step-box .btoblink {
	text-align: center;
}
#protocol .step-box .btoblink a {
	border-bottom: 1px solid #000;
	display: inline-block;
}
#howto .line-h3 {
	color: #00aeeb;
	text-align: center;
}
#howto .grid03 {
	margin: 40px 0 80px;
}
#howto .grid03 li {
    display: flex;
    flex-direction: column; /* 中身を縦に並べる */
}

#howto .grid03 li .line-p:last-of-type {
    flex-grow: 1; /* テキスト部分に余ったスペースをすべて持たせる */
}
#howto .grid03 li img {
    margin-top: auto; /* 画像を常に一番下に押し下げる */
    width: 100%;      /* 画像の幅を親に合わせる */
    height: auto;
}
#howto .grid03 li .line-p {
	margin-bottom: 20px;
}
@media (max-width: 768px) {
	.dib {
		display: inline-block;
	}
	.line-page .is_pc {
		display: none;
	}
.line-page .is_sp {
		display: block;
	}
	#intro,
#nav{
	padding: 0 30px;
}
	.line-page #intro .line-p {
		text-align: left;
	}
	.grid02,
	.grid03{
		display: block;
	}
	#nav .flex {
		display: block;
	}
	#nav .flex .line-btn {
		width: 100%;
		display: block;
	}
	#nav .flex .line-btn:first-child {
		margin-bottom: 20px;
	}
	#merit .grid02 li img {
		width: 80%;
	}
	.line-page .line-h3 {
	font-size: 26px;
}
	#howto .grid03 li{
		margin-bottom: 80px;
	}
	#howto .grid03 li:last-child {
		margin-bottom: 0;
	}
	#protocol .line-h3, #howto .line-h3 {
		font-size: 26px;
	}
	#protocol .step-box a {
		font-size: 16px;
	}
}