@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
#container {
	padding-top: 11rem;
}
#main .checkBox {
	margin-bottom: 6.3rem;
	border-bottom: 1px solid #0975AA;
}
#main .checkBox ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 0;
	justify-content: center;
}
.checkBox li input[type="checkbox"] {
    display: none;
}
.checkBox li input[type="checkbox"] + span {
	background: url(../img/common/check01.webp) no-repeat left 2rem center;
	background-size: 2.0rem 2.0rem;
	border-radius: 0;
    display: flex;
	align-items: center;
    line-height: 2rem;
	cursor: pointer;
	min-width: 15rem;
	height: 6.5rem;
	line-height: 1.14;
	font-size: 2.1rem;
    padding: 0.4rem 2rem 0.4rem 5rem;
}
.checkBox li input[type="checkbox"]:checked + span {
	background-image: url("../img/common/check01_on.webp");
	background-color: #0975AA;
	color: #fff;
}
.checkBox .li02 input[type="checkbox"] + span {
	background-image: url(../img/common/check02.webp);
}
.checkBox .li02 input[type="checkbox"]:checked + span {
	background-image: url(../img/common/check02_on.webp);
}
.checkBox .li03 input[type="checkbox"] + span {
	background-image: url(../img/common/check03.webp);
}
.checkBox .li03 input[type="checkbox"]:checked + span {
	background-image: url(../img/common/check03_on.webp);
}
.checkBox .li04 input[type="checkbox"] + span {
	background-image: url(../img/common/check04.webp);
}
.checkBox .li04 input[type="checkbox"]:checked + span {
	background-image: url(../img/common/check04_on.webp);
}
.checkBox .li05 input[type="checkbox"] + span {
	background-image: url(../img/common/check05.webp);
}
.checkBox .li05 input[type="checkbox"]:checked + span {
	background-image: url(../img/common/check05_on.webp);
}
#main .checkList {
	padding: 0 4.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 2.4rem 2.4rem;
}
#main .checkList li {
	width: calc((100% - 4.9rem) / 3);
}
#main .checkList li a {
	display: block;
	padding: 0 2.4rem 2rem;
	border: 1px solid #0975AA;
	background: url(../img/common/icon05.webp) no-repeat right 2.4rem bottom 2.3rem;
	background-size: 5.2rem auto;
}
#main .checkList li a:hover {
	opacity: 0.7;
}
#main .checkList .ttl {
	margin-bottom: 3.2rem;
	display: flex;
	flex-wrap: wrap;
}
#main .checkList .ttl span {
	min-width: 7.9rem;
	display: inline-block;
	font-size: 1.6rem;
	font-weight: 600;
	text-align: center;
	color: #fff;
	background-color: #F5AA5F;
	font-family: "hiragino-kaku-gothic-pron", sans-serif;
	font-family: "Noto Sans JP", sans-serif;
}
#main .checkList .ttl .green {
	background-color: #A5DC8C;
}
#main .checkList .photo {
	margin-bottom: 1rem;
	position: relative;
}
#main .checkList .photo:after {
	width: 100%;  
	height: 8rem;
	background: url(../img/field/bg.webp) no-repeat center top;
	background-size: 100% 100%;
	position: absolute;  
	top: 0;
	left: 0;
	content: ""; 
}
#main .checkList .photo .txtSpan {
	display: block;
	position: absolute;
	top: -1.8rem;
	left: 0;
	z-index: 1;
	font-size: 2.2rem;
	color: #1A1A1A;
	letter-spacing: 0.06em;
	line-height: 1.17;
	font-weight: 400;
	font-family: "Noto Serif JP", serif;
}
#main .checkList .photo .txtSpan small {
	display: block;
	font-size: 1.8rem;
}
#main .checkList .txt {
	padding-left: 3rem;
	font-size: 1.6rem;
	color: #333333;
	background: url(../img/field/img01.webp) no-repeat left top;
	background-size: 2rem auto;
	font-family: "hiragino-kaku-gothic-pron", sans-serif;
	font-family: "Noto Sans JP", sans-serif;
}
#main .checkList .txt02 {
	background-image: url(../img/field/img02.webp);
}
@media all and (max-width: 896px) {
	#container {
		padding-top: 6.0rem;
	}
	#main .mainImg{
		padding-bottom: 0.5rem;
		background-image: url(../img/field/main_img_sp.webp);
	}
	#main .mainImg h2 {
		margin-bottom: 3.5rem;
	}
	#main .checkBox ul {
		gap: 1.8rem 0;
		justify-content: flex-start;
	}
	#main .checkBox li {
		margin-bottom: -1px;
		border-bottom: 1px solid #0975AA;
	}
	#main .checkBox .li03 {
		flex: 1;
	}
	.checkBox li input[type="checkbox"] + span {
		height: 5rem;
		min-width: 12.5rem;
		font-size: 1.6rem;
		padding-left: 3.8rem;
		background-position: left 1.5rem center;
		background-size: 1.6rem auto;
	}
	#main .checkBox {
		margin-bottom: 2.8rem;
		overflow: hidden;
	}
	#main .checkList {
		padding: 0;
		gap: 1.4rem 1.4rem;
	}
	#main .checkList li {
		width: calc((100% - 1.4rem) / 2);
	}

	#main .checkList li a {
		height: 100%;
		padding: 0 0.9rem 0.8rem;
		background-size: 2.3rem auto;
		background-position: right 1rem bottom 1.2rem;
	}
	#main .checkList .ttl {
		margin-bottom: 1.5rem;
	}
	#main .checkList .ttl span {
		min-width: 4.5rem;
		font-size: 1rem;
	}
	#main .checkList .photo .txtSpan {
		font-size: 1.4rem;
		line-height: 1.14;
		top: -0.8rem;
		letter-spacing: 0.03em;
	}
	#main .checkList .photo .txtSpan small {
		font-size: 1.1rem;
		line-height: 1.18;
	}
	#main .checkList .photo::after {
		height: 11.3vw;
	}
	#main .checkList .photo img {
		width: 100%;
	}
	#main .checkList .txt {
		font-size: 1rem;
		padding-left: 1.6rem;
		background-size: 1.2rem auto;
		background-position: left top 0.1rem;
	}
	#main .checkList .photo {
		margin-bottom: 0.5rem;
	}
}

@media all and (min-width: 897px) and (max-width: 1279px) {
	.content {
		width: 88.5%;
	}
	#main .checkList li {
		width: calc((100% - 2.4rem) / 2);
	}
	.checkBox li input[type="checkbox"] + span {
		padding-right: min(0.6vw,1rem);
		min-width: min(14.7vw,13.5rem);
	}
}