@charset "utf-8";
/**
/* フレーム CSS
----------------------------------------------- */
.view{
	display: grid;
    transition: grid-template-columns .4s ease-out;
}
.view-spacer{
	position: relative;
	display: none;
	min-height: 100vh;
}
.view-side-content{
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	min-height: 100vh;
	position: sticky;
	top: 0;
}
.view-side-content .view-side-img img{
	width: 26rem;
}
.view-space{
	position: relative;
	display: none;
	min-height: 100vh;
}
.view-sticky{
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	min-height: 100vh;
	position: sticky;
	top: 0;
}
.view-side,
.view-sticky-img{
	display: none;
}
@media only screen and (min-width: 576px){
	.view{
		grid-template-columns: 1fr 500px 1fr;
	}
	.view-spacer,
	.view-space{
		display: block;
	}
}
@media only screen and (min-width: 900px){
	.view{
		position: relative;
		grid-template-columns: 5fr 500px 1fr;
	}
	.view-spacer{
		padding-right: 0.625rem;
	}
	.view-side-content{
		background: #009245;
		padding: 0 1.5rem;
	}
	.view-side{
		display: block;
	}
}
@media only screen and (min-width: 1100px){
	.view{
		position: relative;
		grid-template-columns: 1fr 500px 1fr;
	}
	.view-sticky-img{
		display: block;
		padding: 0 1.5rem;
	}
	.view-sticky-img img{
		width: 100%;
		max-width: 30rem;
	}
}
@media only screen and (min-width: 1300px){
	.view{
		position: relative;
		grid-template-columns: 1.2fr 500px 1.25fr;
	}
}
@media only screen and (min-width: 1400px){
	.view{
		position: relative;
		grid-template-columns: 1fr 500px 1.25fr;
	}
}
/**
/* 表示エリア CSS
----------------------------------------------- */
/*　　header view　　*/
.header-view .header-logo{
	background: #009245;
	padding: 0.625rem;
}
.header-view .header-logo img{
	width: 16rem;
}
.header-view .view-bottom{
	background: #009245;
	padding: 0.625rem 1.5rem 2.5rem 1.5rem;
}
.header-view .view-bottom .img{
	margin-top: -13.8rem;
}
@media only screen and (min-width: 576px){
	.header-view .header-logo{
		padding: 0.625rem;
	}
	.header-view .header-logo img{
		width: 20rem;
	}
	.header-view .view-bottom{
		padding: 0.625rem 2.25rem 4rem 2.25rem;
	}
	.header-view .view-bottom .img{
		margin-top: -16.5rem;
	}
}
/*　　section01　　*/
.section01-container{
	background: #009245;
	padding-bottom: 4rem;
}
.section01-content{
	padding: 0 1rem;
}
.section01-content .ttl{
	margin-bottom: 0.625rem;
}
.section01-content .ttl .icon{
	margin-top: -2rem;
}
.section01-content .ttl .icon img{
	width: 15rem;
}
.section01-content .ttl h2{
	color: #ffffff;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.25;
}
.section01-content .box{
	border: 1px solid #ffffff;
	border-radius: 0.625rem;
	padding: 0.375rem;
}
.section01-content .box p{
	color: #ffffff;
	font-size: 1.065rem;
	font-weight: 700;
	line-height: 1.5;
}
.section01-content .section01-list{
	padding: 0 0.375rem;
	margin-top: 5rem;
}
.section01-list .section01-items:not(:last-child){
	margin-bottom: 4rem;
}
.section01-list .section01-items .bubble{
	position: relative;
	background: #ffffff;
	color: #009245;
	font-size: 1.065rem;
	font-weight: 700;
	line-height: 1.5;
	border-radius: 3.125rem;
	padding: 0.625rem;
	margin-bottom: 1.5rem;
}
.section01-list .section01-items .bubble::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	border-style: solid;
	border-width: 0.75rem 0.375rem 0 0.375rem;
	border-color: #ffffff transparent transparent;
	translate: -50% 100%;
}
.section01-list .section01-items .icon{
	text-align: center;
	margin-bottom: 0.625rem;
}
.section01-list .section01-items .icon img{
	width: 10rem;
}
.section01-list .section01-items .text{
	color: #ffffff;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.25;
}
.section01-list .section01-items .post{
	color: #ffffff;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.5;
}
.section01-list .section01-items .name{
	color: #ffffff;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.25;
}
@media only screen and (min-width: 576px){
	.section01-content{
		padding: 0 1.875rem;
	}
	.section01-content .ttl .icon{
		margin-top: -3rem;
	}
	.section01-content .ttl .icon img{
		width: 20rem;
	}
	.section01-content .ttl h2{
		font-size: 3.25rem;
	}
	.section01-content .box p{
		font-size: 1.25rem;
	}
	.section01-content .section01-list{
		padding: 0 0.625rem;
		margin-top: 6rem;
	}
	.section01-list .section01-items .bubble{
		font-size: 1.25rem;
	}
	.section01-list .section01-items .text{
		font-size: 2.5rem;
	}
	.section01-list .section01-items .post{
		font-size: 1.25rem;
	}
	.section01-list .section01-items .name{
		font-size: 3rem;
	}
}
/*　　section02　　*/
.section02-container{
	padding: 4rem 0.625rem;
}
.section02-container .ttl{
	position: relative;
	padding-bottom: 1rem;
}
.section02-container .ttl::after{
	content: "";
	position: absolute;
	background: url(../img/ttl_border.png) no-repeat bottom center;
	background-size: contain;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 85%;
	height: 0.625rem;
}
.section02-container .ttl h2{
	color: #009245;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.25;
}
.section02-list .section02-items{
	position: relative;
	background: #ffffff;
	padding: 1rem 1.25rem 4rem 1.25rem;
}
.section02-list .section02-items{
	margin-top: 8rem;
}
.section02-list .section02-items .imgArea{
	margin-top: -7rem;
}
.section02-list .section02-items h3{
	color: #009245;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.5;
	border-bottom: 2px dashed #009245;
	margin-bottom: 1.25rem;
}
.section02-list .section02-items h3 span{
	position: relative;
	display: inline-block;
	font-size: 2.5rem;
	top: 0.15rem;
	margin-right: 0.5rem;
}
.section02-list .section02-items .text{
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1.75;
}
.section02-list .section02-items .icon{
	position: absolute;
}
.section02-list .section02-items:nth-child(1) .icon{
	right: 0;
	bottom: -1.25rem;
}
.section02-list .section02-items:nth-child(1) .icon img{
	width: 11rem;
}
.section02-list .section02-items:nth-child(2) .icon{
	right: 0;
	bottom: -1.25rem;
}
.section02-list .section02-items:nth-child(2) .icon img{
	width: 10rem;
}
.section02-list .section02-items:nth-child(3) .icon{
	left: 0;
	bottom: -0.625rem;
}
.section02-list .section02-items:nth-child(3) .icon img{
	width: 7.5rem;
}
.section02-list .section02-items:nth-child(4) .icon{
	right: 0;
	bottom: -0.625rem;
}
.section02-list .section02-items:nth-child(4) .icon img{
	width: 9rem;
}
.section02-list .section02-items:nth-child(5) .icon{
	left: 0.375rem;
	bottom: 0;
}
.section02-list .section02-items:nth-child(5) .icon img{
	width: 6rem;
}
.section02-list .section02-items:nth-child(6) .icon{
	right: 0.375rem;
	bottom: 0.375rem;
}
.section02-list .section02-items:nth-child(6) .icon img{
	width: 6.5rem;
}
@media only screen and (min-width: 576px){
	.section02-container{
		padding: 4rem 0.625rem;
	}
	.section02-container .ttl{
		padding-bottom: 1.5rem;
	}
	.section02-container .ttl::after{
		bottom: 0.375rem;
		width: 100%;
	}
	.section02-container .ttl h2{
		font-size: 3.25rem;
	}
	.section02-list .section02-items{
		padding: 1rem 1.625rem 4rem 1.625rem;
	}
	.section02-list .section02-items{
		margin-top: 9rem;
	}
	.section02-list .section02-items .imgArea{
		margin-top: -8rem;
	}
	.section02-list .section02-items h3{
		font-size: 2.5rem;
		margin-bottom: 1.5rem;
	}
	.section02-list .section02-items h3 span{
		font-size: 3.5rem;
		top: 0.25rem;
	}
	.section02-list .section02-items .text{
		font-size: 2.5rem;
	}
	.section02-list .section02-items:nth-child(1) .icon img{
		width: 15rem;
	}
	.section02-list .section02-items:nth-child(2) .icon img{
		width: 12rem;
	}
	.section02-list .section02-items:nth-child(3) .icon img{
		width: 8.5rem;
	}
	.section02-list .section02-items:nth-child(4) .icon img{
		width: 11rem;
	}
	.section02-list .section02-items:nth-child(5) .icon img{
		width: 7rem;
	}
	.section02-list .section02-items:nth-child(6) .icon img{
		width: 7.5rem;
	}
}
/*　　section03　　*/
.section03-container .section03-head{
	position: relative;
	background: #009245;
	padding: 0.375rem 1rem 2.5rem 1rem;
}
.section03-container .section03-head .icon{
	text-align: center;
	margin-bottom: 0.625rem;
	margin-top: -4.85rem;
}
.section03-container .section03-head .icon img{
	width: 12rem;
}
.section03-container .section03-head h2{
	color: #ffffff;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: 0.875rem;
}
.section03-container .section03-head .text{
	color: #ffffff;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: 1rem;
}
.section03-container .section03-content{
	background: #f3fcf9;
	padding: 4rem 1.5rem 1.5rem 1.5rem;
}
.section03-container .section03-content .ttl{
	margin-bottom: 1.875rem;
}
.section03-container .section03-content .ttl h2{
	color: #009245;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.25;
}
.section03-container .section03-content .text{
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 1.5rem;
}
@media only screen and (min-width: 576px){
	.section03-container .section03-head .icon{
		margin-top: -5rem;
	}
	.section03-container .section03-head .icon img{
		width: 14rem;
	}
	.section03-container .section03-head h2{
		font-size: 3rem;
	}
	.section03-container .section03-head .text{
		font-size: 1.5rem;
	}
	.section03-container .section03-content{
		padding: 4.5rem 2rem 2.5rem 2rem;
	}
	.section03-container .section03-content .ttl h2{
		font-size: 3.25rem;
	}
	.section03-container .section03-content .text{
		font-size: 1.25rem;
	}
}
/*　　フォーム　　*/
.form-box{
	margin-top: 3.5rem;
}
.form-box dl{
	margin-bottom: 2.5rem;
}
.form-box dl dt{
	color: #009245;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	margin-bottom: 0.375rem;
}
.form-box dl dd{
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.5;
}
input[type="date"],
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="url"],
textarea,
select{
	width: 100%;
	background: #ffffff;
	border: 3px solid #009245;
	font-family: "Zen Maru Gothic", sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.5;
	border-radius: 3.125rem;
	padding: 0.9375rem 1rem;
}
input[type="date"]::placeholder,
input[type="text"]::placeholder,
input[type="tel"]::placeholder,
input[type="email"]::placeholder,
input[type="url"]::placeholder,
textarea::placeholder{
	color: #989898;
}
input[type="date"]:-ms-input-placeholder,
input[type="text"]:-ms-input-placeholder,
input[type="tel"]:-ms-input-placeholder,
input[type="email"]:-ms-input-placeholder,
input[type="url"]:-ms-input-placeholder,
textarea:-ms-input-placeholder{
	color: #989898;
}
input[type="date"]::-ms-input-placeholder,
input[type="text"]::-ms-input-placeholder,
input[type="tel"]::-ms-input-placeholder,
input[type="email"]::-ms-input-placeholder,
input[type="url"]::-ms-input-placeholder,
textarea::-ms-input-placeholder{
	color: #989898;
}
textarea{
	height: 15.4375rem;
	border-radius: 0.625rem;
}
.submit_btn{
	text-align: center;
	margin-top: 2.5rem;
}
.submit_btn li{
	display: inline-block;
	width: 100%;
}
input[type="submit"]{
	position: relative;
	display: block;
	width: 100%;
	background: #009245;
	border: none;
	font-family: "Zen Maru Gothic", sans-serif;
	color: #FFFFFF;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	cursor: pointer;
	border-radius: 3.125rem;
	padding: 1rem 1.5rem;
}
@media only screen and (min-width: 576px){
	.form-box dl dt{
		font-size: 1.5rem;
	}
	.form-box dl dd{
		font-size: 1.25rem;
	}
	input[type="date"],
	input[type="text"],
	input[type="tel"],
	input[type="email"],
	input[type="url"],
	textarea,
	select{
		font-size: 1.25rem;
	}
	input[type="submit"]{
		font-size: 1.5rem;
	}
}
/*　　ボタン　　*/
.contact_btn{
	text-align: center;
}
.contact_btn li{
	display: inline-block;
	width: 100%;
	max-width: 25rem;
}
.block_btn{
	text-align: center;
}
.block_btn li{
	display: inline-block;
	width: 100%;
	max-width: 20rem;
}
.block_btn li .btn{
	position: relative;
	display: block;
	width: 100%;
	background: #009245;
	font-family: "Zen Maru Gothic", sans-serif;
	color: #FFFFFF;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	border-radius: 3.125rem;
	padding: 1rem 1.5rem;
}
@media only screen and (min-width: 576px){
	.contact_btn li{
		max-width: 25rem;
	}
	.block_btn li .btn{
		font-size: 1.375rem;
	}
}
/**
/* エラー CSS
----------------------------------------------- */
.error-grid{
	padding: 5rem 1rem 7.625rem 1rem;
}
.error-grid p{
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}
.error-grid .error_url{
	padding: 3rem 0;
}
.error-grid .block_btn{
	margin-top: 4rem;
}
@media only screen and (min-width: 576px){
	.error-grid{
		padding: 5rem 1rem 3rem 1rem;
	}
}