/*============================
commmon
============================*/
html,body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,address,cite,code,img,q,samp,small,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,figcaption,figure,footer,header,nav,section,time,audio,video {margin:0;padding:0;border:0;outline:0;font-size:100%;font-style:normal;vertical-align:baseline;background-color:transparent; }body {line-height:1; }blockquote,q {quotes:none; }blockquote:before,blockquote:after,q:before,q:after {content:'';content:none; }a {margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent; }table {border-collapse:collapse;border-spacing:0; }input,select {vertical-align:top; }article,aside,footer,header,main,nav,section{display:block; }
html { font-size:62.5%; overflow-y: scroll;}
body {
	background-color:#fff;
	color:#001011;
	font-family: 'Noto Sans JP', sans-serif;
	text-align:center; }
img { vertical-align: top; width: 100%; height: auto; }
a:link    { color:#001011; text-decoration:none; }
a:active  { color:#001011; text-decoration:underline; }
a:visited { color:#001011; text-decoration:none; }
a:hover   { opacity: 0.6; }
* { transition: ease-in-out, 0.5s; }

#wrap { min-width: 320px; text-align: left; overflow: hidden; }
#wrap .text-center { text-align: center; }
@media (max-width: 768px) {
	#wrap .text-center { margin: 0 5%; }
}


@font-face {
font-family: 'DINBEK-Bold';
font-style: normal;
font-weight: normal;
src: local('DINBEK-Bold'), url('DINBEK-Bold.woff') format('woff');
}

.din { font-family: 'DINBEK-Bold';}

body {}
p { margin:1em 0 0; font-size:1.8rem; line-height:1.7em; font-weight: 100; color: #3E3A39; }
h2 { margin:0.1em 0 0; font-size:4.0rem; line-height:1.5em; font-weight:200; }
h3 { margin:0.5em 0 0; font-size:2.4rem; line-height:1.7em; }
@media (max-width: 640px) {
	h2 { font-size:2.6rem;}
}
.sp {display:none;}
@media (max-width: 768px) {
	.pc {display:none;}
	.sp {display:block;}
}

.inner { width: 100%; max-width: 1050px; margin: 0 auto; }
@media (max-width: 1024px) {
	.inner { box-sizing:border-box; padding: 0 20px; }
}
@media (max-width: 768px) {
.inner { width: 100% !important; }
}

/*============================
 header
============================*/
header {}
header > .inner { height: 46px; max-width: initial; }
header .inner .top h1 { float: left; margin:0; line-height: 46px; padding-left: 16px; }
header .inner .top h1 img { width: auto; height: 36px; vertical-align: middle; }
header .inner .top p { margin:0;  line-height: 46px; }
header .inner .top h1 + p { width: 114px; text-align: center; background: #008E5C; color: #fff; font-size: 1.4rem; float: left; }
header .inner .top p.entry a{  font-family: 'DINBEK-Bold'; color: #008E5C; font-size: 2.2rem; float: right; margin-right: 21px; letter-spacing: .03em;}


/*============================
#mv
============================*/
header #mv { box-sizing: border-box; height: 943px; background: url(img/kv.jpg) no-repeat center bottom / cover; padding-top: 70px;}
header #mv .inner { max-width: 1160px;}
header #mv p { font-size: 1.9rem; background: #fff;white-space: nowrap; overflow: hidden; width: 0; margin: 7px 0 0; font-family: 'Noto Sans JP', sans-serif; font-weight: bold; letter-spacing: 0.2em;}


@keyframes Typing0 { 0% { width: 0; } 100% { width: 0.5em;} }
@keyframes Typing1 { 0% { width: 0; } 100% { width: 153px;} }
@keyframes Typing3 { 0% { width: 0; } 100% { width: 172px;} }
@keyframes Typing5 { 0% { width: 0; } 100% { width: 172px;} }
@keyframes Typing7 { 0% { width: 0; } 100% { width: 191px;} }
@keyframes Typing9 { 0% { width: 0; } 100% { width: 472px;} }
@keyframes TypingE {
	0% { margin-left: -100vw;}
	80% { margin-left: 0;  text-shadow: none;}
	100% { margin-left: 0;  text-shadow: 2px 2px 2px rgba(0,0,0,0.6);}
}


header #mv p:nth-child(1) { animation: Typing1 .5s ease  .2s normal; animation-fill-mode:forwards; margin: 0; }
header #mv p:nth-child(2) { animation: Typing0 .2s ease 0.5s normal; animation-fill-mode:forwards;}
header #mv p:nth-child(3) { animation: Typing3 .5s ease 0.7s normal; animation-fill-mode:forwards;}
header #mv p:nth-child(4) { animation: Typing0 .2s ease 0.9s normal; animation-fill-mode:forwards;}
header #mv p:nth-child(5) { animation: Typing5 .5s ease 1.4s normal; animation-fill-mode:forwards;}
header #mv p:nth-child(6) { animation: Typing0 .2s ease 1.6s normal; animation-fill-mode:forwards;}
header #mv p:nth-child(7) { animation: Typing7 .5s ease 2.1s normal; animation-fill-mode:forwards;}
header #mv p:nth-child(8) { animation: Typing0 .2s ease 2.3s normal; animation-fill-mode:forwards;}
header #mv p:nth-child(9) { animation: Typing9 .5s ease 2.8s normal; animation-fill-mode:forwards; font-size: 5.4rem; font-weight: bold; line-height: 1;}


header #mv p img { padding: 10px; vertical-align: middle;}
header #mv p:nth-child(1) img { width: 133px; height: 16px;}
header #mv p:nth-child(3) img { width: 152px; height: 20px;}
header #mv p:nth-child(5) img { width: 152px; height: 19px;}
header #mv p:nth-child(7) img { width: 171px; height: 16px;}
header #mv p:nth-child(9) img { width: 432px; height: 45px; padding: 20px; }
header #mv p:nth-child(10) img { width: 810px; height: 75px;}


header #mv p:nth-child(10) { animation: TypingE 1s ease  3.3s normal; animation-fill-mode:forwards;
	margin-left: -100vw;  width: 830px; margin-top: 1em; font-size: 9rem; color:#fff; background: none;  font-family: 'DINBEK-Bold'; }



@media (max-width: 768px) {
	header .inner .top h1 { padding-left: 0; }
	header .inner .top p.entry a{ margin-right: 0; }
	header #mv p:nth-child(9) { width: 0;}
	header #mv p:nth-child(9) img { width: 90%; height: auto;}
	@keyframes Typing9 { 0% { width: 0; } 100% { width: 340px;} }
	header #mv p:nth-child(10) { width: 100%;}
	header #mv p:nth-child(10) img { width: 90%; height: auto;}
}
@media (max-width: 460px) {
	header .inner .top h1 { margin-left: -20px; }
	header .inner .top p.entry a{ margin-right: -20px; }
}

/*============================
#sec1
============================*/
#sec1 { padding: 160px 0 100px;}
#sec1 h2 { width: 521px; margin: auto; color: #008E5C; text-align: center; font-size: 6rem; font-weight: bold; line-height: 0.7; }
#sec1 h2 span { display: inline-block; width: 218px; }

#sec1 p { color: #008E5C; text-align: center; font-size: 2.2rem; line-height: 2.8; font-weight: bold; margin: 4em auto 0; }
#sec1 p + p { margin: 1em auto 0; }

@media (max-width: 768px) {
	#sec1 h2 { max-width: 100%; }
}
@media (max-width: 460px) {
	#sec1 p { text-align: left; font-size: 1.6rem; }
}



/*============================
#sec2
============================*/
#sec2 { min-height: 100vh; background: #4AA472; padding: 95px 0;}
#sec2 h2 { color: #fff; border: 2px solid #fff; font-size: 3.6rem; text-align: center; line-height: 81px; width: 460px; margin: auto; }
#sec2 h2 span { width: 310px; display: block; margin: auto; line-height: 81px; }
#sec2 h2 span img { vertical-align: baseline; }
#sec2 h2 + p  { width: 834px; margin: 7em auto 4.2em; }
#sec2 p  { width: 850px; margin: 2em auto 0; color: #fff; line-height: 1.7; }

@media (max-width: 768px) {
	#sec2 h2 { max-width: 100%; }
	#sec2 p  { max-width: 100%; }
}

/*============================
#sec3
============================*/
#sec3 {
min-height: 100vh; padding: 100px 0;
background-size: auto auto;
background-color: rgba(255, 255, 255, 1);
background-image: repeating-linear-gradient(112deg, transparent, transparent 5px, rgba(138, 193, 153, 1) 7px, rgba(138, 193, 153, 1) 8px );
}
#sec3 .inner { max-width: 830px;}
#sec3 h2 { font-family: 'DINBEK-Bold'; color: #4AA472; font-size: 2.6rem; background: #fff; padding-left :35px; line-height: 51px; margin-bottom: 63px;}
#sec3 h2 img { width: 288px; vertical-align: baseline; }
#sec3 dl { display: flex; flex-wrap: wrap; justify-content: space-between; }
#sec3 dl dt { font-family: 'DINBEK-Bold'; font-size: 2rem; margin-top: 30px; width: 160px; background: #fff; display: flex; align-items: center; justify-content: center; }
#sec3 dl dt p { text-align: center; margin-top: 0; }
#sec3 dl dd { margin-top: 32px; padding: 24px; box-sizing: border-box; width: calc(100% - 180px); background: #fff;}
#sec3 dl dd p { margin: 0;}
#sec3 dl dd p:first-child { margin-bottom: 0.5em; font-size: 2.6rem; font-weight: bold;}

#sec3 dl dt:first-child,
#sec3 dl dt:first-child + dd { margin-top: 0;}


@media (max-width: 460px) {
	#sec3 h2 { padding-left :0; text-align: center;}
	#sec3 dl { display: block; }
	#sec3 dl dt { width: 100%; }
	#sec3 dl dd { width: 100%; }
	#sec3 dl dt:first-child + dd,
	#sec3 dl dt + dd { margin-top: 10px;}

}

/*============================
#sec4
============================*/
#sec4 {min-height: 100vh; padding: 0 0 100px;}
#sec4 .inner {max-width: 1150px;}
#sec4 p.title { width: 460px; border: 2px solid #008E5C;text-align: center; margin: 140px auto 40px; }
#sec4 p.title span { color: #008E5C;  display: inline-block; line-height: 80px; font-size: 3.6rem; }
#sec4 p.title.no1 span {display: inline-block; width: 80px;}
#sec4 p.title.no2 span {display: inline-block; width: 225px;}
#sec4 p.title.no3 span {display: inline-block; width: 146px;}
#sec4 p.title span img { vertical-align: baseline; }

#sec4 p { text-align: center; }
#sec4 p.date { margin: 3em auto 0; font-weight: bold;  }
#sec4 p .num { font-size: 5rem; letter-spacing: 0.1em;}
#sec4 p .semi { font-size: 2.4rem; display: block;}
#sec4 p.date + p { margin: 0 auto; font-weight: bold; padding-bottom: 1em; }

#sec4 p.title.no2 + p { margin-bottom: 0}
#sec4 p.title.no2 + p { font-size: 2.0rem; font-weight: bold; margin-top: 2.6em;}

#sec4 p a { background: #008E5C; color: #fff;}
#sec4 p.btn  { max-width: 460px; margin: auto; height: 84px;}
#sec4 p.btn a { display: block; font-family: 'DINBEK-Bold'; font-size: 6rem; line-height: 84px; color: #fff; background: #008E5C; margin: 40px auto; box-shadow: 5px 5px 7px rgba(127,127,127,.6);}
#sec4 p.btn a:hover {  box-shadow: 5px 5px 7px rgba(127,127,127,.2);}


#sec4 ol { display: flex; justify-content: space-between; list-style: none; margin-top: 60px; }
#sec4 ol li { width: calc(25% - 50px); background: #4AA472; padding: 20px 0; position: relative; }
#sec4 ol li:before { content:""; position: absolute; top: 0; bottom: 0;
display: block; margin: auto auto auto -50px; width: 32px; height: 36px;
background: url(img/ico-arrow-r.png) no-repeat 0 0 / 100% auto; }
#sec4 ol li:first-child:before { display: none;}
#sec4 ol li p { color: #fff; text-align: center; line-height: 1.3; margin: 0;}
#sec4 ol li p.lh2 { line-height: 2.6;}
#sec4 ol li p:nth-child(1) { color: #D3D3D4; font-size: 3rem; font-family: 'DINBEK-Bold'; }
#sec4 ol li p:nth-child(2) { font-size: 2.8rem; font-weight: bold; margin: 0.5em 0;}
#sec4 ol li p:nth-child(3) { font-size: 1.8rem;}

#sec4 table { width: 850px; margin: 70px auto 100px; border-collapse: collapse; border-bottom: 1px solid #3E3A39; }
#sec4 table th { width: 8em; padding: 10px 0; font-size: 2.4rem; color: #008E5C; border-top: 1px solid #3E3A39;  vertical-align: middle; line-height: 2; letter-spacing: 0.3em;}
#sec4 table td { width: calc(100% - 8em);padding: 10px 5px 10px 0; border-top: 1px solid #3E3A39;font-size: 2.8rem; vertical-align: middle; line-height: 2;}
#sec4 table td span { font-size: 1.8rem;  vertical-align: middle;}

@media (max-width: 768px) {
	#sec4 p.title { max-width: 100%; }
	#sec4 table { width: 100%; }
	#sec4 table th { width: 6em; letter-spacing: 0.2em;}
	#sec4 table td { width: calc(100% - 6em);}
	#sec4 table td span { display: block; }
	#sec4 ol li { width: calc(25% - 20px);  padding: 16px 0; }
	#sec4 ol li:before {
		content:""; position: absolute; top: 0; bottom: 0;
		display: block; margin: auto auto auto -20px; width: 10px; height: 12px;
		background: url(img/ico-arrow-r.png) no-repeat 0 0 / 100% auto; }
	#sec4 ol li p:nth-child(2) { font-size: 2.2rem; }
	#sec4 ol li p:nth-child(3) { font-size: 1.6rem; }
}

@media (max-width: 460px) {
	#sec4 ol { display: block; }
	#sec4 ol li { width: 100%; margin-bottom: 40px; }
	#sec4 ol li:before {
		content:""; position: absolute; top: -30px; bottom: initial;
		width: 20px; height: 20px; right:0; left: 0; margin: auto;
		background: url(img/ico-arrow-b.png) no-repeat 0 0 / 100% auto; }
	#sec4 table { display: block; }
	#sec4 table th,
	#sec4 table td { display: block; width: 100%; letter-spacing: 0; }
	#sec4 p.title span img { vertical-align: baseline; }

}



/*============================
#sec5
============================*/
#sec5 {
	background: url(img/sec5-bg.svg) no-repeat center top ;
	background-size: cover;
	position: relative;}
#sec5 .inner { max-width: 820px; position: relative; padding-top: 90px; padding-bottom: 80px;}
#sec5 p {}
#sec5 p.catch { position: absolute; top: -10px; z-index: 10; font-size: 3.6rem; font-weight: bold; color: #CEBF8A;}
#sec5 p.catch img {width: 249px; height:42px;}

#sec5 h2 { color: #fff; font-size: 8rem; font-family: 'DINBEK-Bold'; text-align: center;}
#sec5 p.copy { text-align: center; color: #008E5C; font-size: 4rem; font-weight: bold; margin: 0;}
#sec5 p.subcatch { text-align: center; color: #008E5C; font-size:2.2rem; margin-top: 0; }
#sec5 p.subcatch + p { font-weight: bold; margin-top: 2.5em; }
#sec5 p.subcatch + p + p { margin-top: 0; }
#sec5 p.title { text-align: center; color: #008E5C; margin-top: 2em;}
#sec5 p.title span {font-family: 'DINBEK-Bold'; font-size: 2rem; background: #fff; width: 172px; line-height: 33px; display: inline-block;}
#sec5 ol { list-style: none;}
#sec5 ol li p:first-child { font-weight: bold; font-size: 2.6rem; margin: 1em 0 0; }
#sec5 ol li p { margin: 0 0 0 3em;}
#sec5 ol + p { text-align: center; font-weight: bold; margin: 60px 0 -1em;}
#sec5 p a { background: #008E5C; color: #fff;}
#sec5 p.btn  { max-width: 367px; margin: auto; height: 66px; text-align: center;}
#sec5 p.btn a { display: block; font-family: 'DINBEK-Bold'; font-size: 5rem; line-height: 66px; color: #fff; background: #008E5C; margin: 40px auto; box-shadow: 5px 5px 7px rgba(127,127,127,.6);}
#sec4 p.btn a:hover {  box-shadow: 5px 5px 7px rgba(127,127,127,.2);}
#svg-bg {
	position: absolute; top: -90px; left: 0; right: 0; top: -90px; z-index: 2;
	width: 200%; height: 280px; margin: auto; }

p.ex-link { text-align: center; margin-top: 0; }
p.ex-link a { display: inline-block; width: 80%; max-width: 830px; line-height: 53px;
 font-size: 2.6rem; font-weight: bold; color: #94C4A0; margin-top: 70px;
 border: 2px solid #94C4A0;text-align: center;}
p.copy { text-align: center; font-size: 1.1rem; line-height: 1.5; margin: 60px 0 27px;}

@media (max-width: 460px) {
	#sec5 p.catch img {width: 160px; height:auto;}
	#sec5 h2 { color: #fff; font-size: 4rem;}
	#sec5 p.copy { font-size: 3rem;}
	#sec5 ol li p { margin: 0;}

}