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

.cate-wrap .cate1{
	padding-top: 0;
}
.cate-wrap .cate1 .imgbox{
	overflow: auto;
}
.cate-wrap .cate1 .imgbox .point{
	display: none;
}
.cate-wrap .cate1 .imgbox img{
	min-width: 1000px;
}
.cate-wrap .cate2{
	background-color: #EAFCEF;
}
.cate-wrap .cate2 .boxwrap{
	padding: 5%;
	background-color: #fff;
	max-width: 1280px;
	margin: 0 auto;
}
.cate-wrap .cate2 .boxwrap .box .titlebox p{
	color: #1FA192;
}
.cate-wrap .cate2 .boxwrap .box .gridwrap .gridbox{
	align-items: stretch;
}
.cate-wrap .cate2 .boxwrap .box .gridwrap .gridbox > div{
	padding: 15px;
}
.cate-wrap .cate2 .boxwrap .box .gridwrap .gridbox .grid-4{
	background-color: #1FA192;
}
.cate-wrap .cate2 .boxwrap .box .gridwrap .gridbox .grid-4 h4{
	color: #fff;
}
.cate-wrap .cate2 .boxwrap .box .gridwrap .gridbox:not(:last-of-type) .grid-4{
	border-bottom: 1px solid #fff;
}
.cate-wrap .cate2 .boxwrap .box .gridwrap .gridbox:first-of-type .grid-8{
	border-top: 1px solid #DEDEDE;
}
.cate-wrap .cate2 .boxwrap .box .gridwrap .gridbox .grid-8{
	border-bottom: 1px solid #DEDEDE;
}
.cate-wrap .cate2 .boxwrap .box input[type="text"]{
	border: 1px solid #D1D1D1;
	border-radius: 2px;
	width: 70px;
	padding: 5px;
	text-align: right;
}
.cate-wrap .cate2 .boxwrap .box label{
	margin-bottom: 0;
}
.cate-wrap .cate2 .boxwrap .box input[type="text"]::placeholder{color: #D1D1D1;;}
.cate-wrap .cate2 .boxwrap .arrow{
	padding: 50px 0;
	text-align: center;
}
.cate-wrap .cate2 .boxwrap .arrow img{
	width: 10%;
	max-width: 40px;
}
.cate-wrap .cate2 .boxwrap .simulation3 input[type="text"]{
	width: 120px;
}
.cate-wrap .cate2 .boxwrap .box .btbox{
	background-color: #BEE6E2;
	padding: 15px 5%;
	cursor: pointer;
}
.cate-wrap .cate2 .boxwrap .box .btbox h3{
}
.cate-wrap .cate2 .boxwrap .box .btbox .icon{
	width: 28px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-color: #1FA192;
	position: relative;
}
.cate-wrap .cate2 .boxwrap .box .btbox .icon::before,.cate-wrap .cate2 .boxwrap .box .btbox .icon::after{
	content: "";
	aspect-ratio: 1 / 1;
	background-color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	transition: ease 0.3s;
}
.cate-wrap .cate2 .boxwrap .box .btbox .icon::before{
	width: 60%;
	height: 2px;
}
.cate-wrap .cate2 .boxwrap .box .btbox .icon::after{
	height: 60%;
	width: 2px;
}
.cate-wrap .cate2 .boxwrap .box .btbox.active .icon::after{
	transform: translate(-50%,-50%) rotate(90deg);
}
.cate-wrap .cate2 .boxwrap .box .simulation4{
	border:1px solid #DEDEDE;
}
body.on .cate-wrap .cate2 .boxwrap .box .simulation4{
	display: none;
}
.cate-wrap .cate2 .boxwrap .box .simulation4 .itemwrap{
	padding: 5%;
	gap: 30px 40px;
	max-width: 800px;
}
.cate-wrap .cate2 .more .simulation_bt{
	position: relative;
	min-width: 260px;
	border-radius: 200px;
	justify-content: space-between;
	padding: 10px 20px;
	background-color: #F6F6F6;
	border: 1px solid #C4E8D9;
	cursor: pointer;
}
.cate-wrap .cate2 .more .simulation_bt > div{
	position: relative;
	z-index: 2;
	border-radius: 10px;
	padding: 10px;
	gap: 15px;
	justify-content: space-between;
    width: 100%;
}
.cate-wrap .cate2 .more .simulation_bt .icon{
	width: 30px;
	aspect-ratio: 1 / 1;
	background-color: #017138;
	border-radius: 50%;
	transition: ease 0.3s;
}
.cate-wrap .cate2 .more .simulation_bt:hover .icon{
	transform: translateX(3px);
}
.cate-wrap .cate2 .more .simulation_bt .icon i{
	color: #FAF9F5;
	font-size: 15px;
}
.cate-wrap .cate2 .more .simulation_bt p{
	font-family: "Noto Sans JP",  sans-serif;
	line-height: 1;
	font-weight: 500;
}
.cate-wrap .cate2 .more3 .simulation_bt{
	mix-width: 700px;
	background-color: #017138;
	padding: 10px 50px;
}
.cate-wrap .cate2 .more3 .simulation_bt .icon{
	background-color: #F6F6F6;
}
.cate-wrap .cate2 .more3 .simulation_bt .icon i{
	color: #017138;
}
.cate-wrap .cate2 .result-box{
	display: none;
	padding: 5%;
	border: 5px solid #017138;
	background-color: #EAFCEF;
}

.cate-wrap .cate3 .boxwrap .box{
	max-width: 1280px;
	margin: 0 auto;
	background-color: #BEE7E2;
	border-radius: 10px;
	padding: 5%;
	padding-top: 0;
	gap: 30px;
}
.cate-wrap .cate3 .boxwrap .box:not(:last-of-type){
	margin-bottom: 80px;
}
.cate-wrap .cate3 .boxwrap .box:first-of-type{
	margin-top: 50px;
}
.cate-wrap .cate3 .boxwrap .box .numbox{
	width: 76px;
	transform: translateY(-50%);
	margin-bottom: -50px;
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	background-color: #818181;
}
.cate-wrap .cate3 .boxwrap .box .numbox p{
	color: #fff;
	line-height: 1;
}
.cate-wrap .cate3 .boxwrap .box .itemwrap{
	width: 100%;
	gap: 20px;
}
.cate-wrap .cate3 .boxwrap .box .itemwrap > div{
	background-color: #fff;
	border-radius: 10px;
	padding: 3%;
}
.cate-wrap .cate3 .boxwrap .box .itemwrap .item{
	position: relative;
	width: calc(100% / 3 - 40px / 3);
}
.cate-wrap .cate3 .boxwrap .box .itemwrap .item h4{
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%,-50%);
}
.cate-wrap .cate3 .boxwrap .box .itemwrap .item .span-green span{font-size: 1.8rem;padding: 0 5px;}
.cate-wrap .cate3 .boxwrap .box .itemwrap .itembottm{
	width: 100%;
}
.cate-wrap .cate3 .boxwrap .box .itemwrap .itembottm p{
	color: #1F8C55;
}
@keyframes hand_point {
	0% {
		opacity: 0;
		left: 20%;
	}
	50%{
		opacity: 0.9;
	}
	100% {
		opacity: 0;
		left: 80%;
	}
}

/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){

}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
	.cate-wrap .cate3 .boxwrap .box .itemwrap .item{
		width: calc(100% / 2 - 20px / 2);
	}
	.cate-wrap .cate3 .boxwrap .box .itemwrap .item:first-of-type{
		width: 100%;
	}
	.cate-wrap .cate1 .imgbox{
		position: relative;
	}
	.cate-wrap .cate1 .imgbox .point{
		display: block;
		opacity: 0;
		position: absolute;
		left: 20%;
		top: 50%;
		transform: translateY(-50%);
		z-index: 3;
	}
	.cate-wrap .cate1 .imgbox .point i{
		font-size: 70px;
		color: #ff9800;
	}
	.cate-wrap .cate1 .imgbox.on.active .point{
		animation-name: hand_point;
		animation-duration: 2.2s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
		animation-iteration-count: 2;
	}
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){


}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
	.more a{
		min-width: 200px;
		padding: 5px 15px;
	}
	.more a .icon {
		width: 24px;
	}
	.cate-wrap .cate2 .boxwrap .box .gridwrap .gridbox .grid-4 h4{
		font-size: 14px;
	}
	.cate-wrap .cate2 .boxwrap .box .gridwrap .gridbox > div{
		padding: 8px;
	}
	.cate-wrap .cate2 .boxwrap .box .gridwrap .gridbox .grid-8{
		flex-direction: column;
		align-items: flex-start;
	}
	.more3 .simulation_bt p{
		font-size: 14px;
		line-height: 1.5;
	}
	.cate-wrap .cate2 .boxwrap .box .btbox{
		padding: 10px;
	}
	.cate-wrap .cate2 .boxwrap .box .btbox h3{font-size: 16px;}
	.cate-wrap .cate2 .boxwrap .box .btbox .icon{
		width: 20px;
	}
	.cate-wrap .cate2 .boxwrap{
		padding: 5% 10px;
	}
	.cate-wrap .cate2 .more3 .simulation_bt{
		padding: 10px 20px;
	}
	
	.cate-wrap .cate3 .boxwrap .box .itemwrap .item{
		width: 100%;
		padding: 15px;
	}
	.cate-wrap .cate3 .boxwrap .box .itemwrap .item .span-green span{
		font-size: 1.4rem;
	}
	.cate-wrap .cate1 .imgbox .point i{
		font-size: 36px;
	}
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}