@charset "utf-8";


/*---------------------------------------------------------------------------------------
	大枠設定
----------------------------------------------------------------------------------------*/

body{
	font-family: source-han-sans-japanese, sans-serif;
	color:#111;
	text-align:center;
	min-width: 1100px;
}
.switch{}
a{ color:#111; text-decoration:none; -webkit-transition: all .2s; transition: all .2s;}
a:hover{ opacity: .7; text-decoration:none;}
img.imgalpha, .svg path, .svg polygon{ -webkit-transition: all .2s; transition: all .2s;}
.svg{ vertical-align: middle;}
/* font */
.gothic{ font-family: source-han-sans-japanese, sans-serif;}
.mincho{ font-family: source-han-serif-japanese, serif;}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width:768px){
	a:hover{ opacity: 1;}
	body{
		font-size: 14px;
		line-height: 1.8;
		min-width: inherit;
	}
}






/*---------------------------------------------------------------------------------------
	header
----------------------------------------------------------------------------------------*/

header{
	background: url(../images/header-bg.jpg) center / cover no-repeat;
	position: relative;
}
header:before{
	display:block;
	content: "";
	padding-top: 54%;
}
header h1{
	position: absolute;
	left: 0;
	top: 0;
	padding: 30px;
}
header p{
	position: absolute;
	left: 16%;
	top: 12%;
	color: #005e3c;
	font-size: 3vw;
	font-weight: bold;
	line-height: 1.3;
	text-align: left;
	letter-spacing: .2em;
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width:768px){
	header:before{
		display:block;
		content: "";
		padding-top: 68%;
	}
	header h1{
		position: absolute;
		left: 0;
		top: 0;
		padding: 2%;
		width: 15%;
	}
	header p{
		left: 18%;
		top: 13%;
		font-size: 3.5vw;
		letter-spacing: .1em;
	}
}






/*---------------------------------------------------------------------------------------
	contents
----------------------------------------------------------------------------------------*/

#contents{}
.wrap{
	clear: both;
	box-sizing: content-box;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 5%;
	padding-right: 5%;
}
/* cont1 */
.cont1 ul{
	padding-top: 80px;
	overflow: hidden;
}
.cont1 ul li{
	display: inline-block;
	width: 500px;
	margin: 0 25px 20px;
	vertical-align: top;
}
.cont1 ul li a{
	display: block;
	padding: 30px 50px;
	color: #005e3c;
	font-size: 24px;
	font-weight: bold;
	line-height: 1.3;
	background: url("../images/cont1-icon.svg") right center no-repeat #eaece7;
	border-left: 10px solid #005b3a;
}
/* cont2 */
.cont2{
	padding-top: 130px;
	margin-bottom: 130px;
	background: #f5f6f4;
	position: relative;
}
.cont2:before,
.cont2:after{
	display: block;
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 130px;
}
.cont2:before{ top: -1px; background: url("../images/cont2-bg1.png") no-repeat center top;}
.cont2:after{ bottom: -129px; background: url("../images/cont2-bg2.png") no-repeat center top;}
.cont2 .wrap{
	padding-top: 50px;
	overflow: hidden;
}
.cont2 .wrap h2{
	color: #005e3c;
	font-size: 42px;
	line-height: 1.3;
	margin-bottom: 40px;
}
.cont2 .wrap h3{
	color: #005e3c;
	font-size: 28px;
	font-weight: normal;
	margin-bottom: 40px;
}
.cont2 .wrap p{
	text-align: left;
}
.cont2 .wrap p small.f10{
	font-size: 10px;
}
.cont2 .wrap p small{
	font-size: 14px;
}
.cont2 .wrap p.t-right{
	text-align: right;
}
.cont2 .wrap p.t-right{ font-size: 14px;}
.cont2 .wrap p.t-right strong{ font-size: 16px;}
.cont2 .wrap figure{ text-align: left;}
.cont2 .wrap figure img{ margin-right: 5%; vertical-align: middle;}
.cont2 .wrap figure img:nth-child(1){ width: 33.5%;}
.cont2 .wrap figure img:nth-child(3){ width: 21%;}
/* cont3 */
.cont3{
	clear: both;
	padding-top: 80px;
	padding-bottom: 100px;
	background: url("../images/cont3-bg.png") center top 30px no-repeat;
}
.cont3 h2{
	font-family: "Times New Roman", Times, "serif";
	color: #005b3a;
	font-size: 52px;
	font-weight: normal;
	line-height: 1.2;
	margin-bottom: 60px;
}
.cont3 h2 small{
	font-size: 14px;
}
.cont3 .txt{
	text-align: left;
	margin-bottom: 70px;
}
.cont3 table{
	width: 100%;
	max-width: 600px;
	margin: 0 auto 70px;
	text-align: left;
}
.cont3 table caption{
	text-align: left;
}
.cont3 table caption:before{
	content: "■";
	color: #005b3a;
}
.cont3 table th{
	width: 5em;
	padding: 5px 0;
	vertical-align: top;
	position: relative;
}
.cont3 table th:after{
	position: absolute;
	right: 0;
	top: 5px;
	content: "：";
}
.cont3 table td{
	padding: 5px 0;
	vertical-align: top;
}
.cont3 figure figcaption{ font-size: 14px;}
.cont3 figure figcaption:before{ content: "■"; color: #005b3a;}
.cont3 .graph{
	clear: both;
	display: flex;
	flex-wrap: wrap;
	padding: 40px 40px 0;
	border: 1px solid #d3d3d3;
	overflow: hidden;
}
.cont3 .graph figure{
	float: left;
	margin-bottom: 50px;
}
.cont3 .graph figure:nth-child(1){
	width: 50%;
	margin-right: 5%;
}
.cont3 .graph figure:nth-child(2){ width: 45%;}
.cont3 .graph figure:nth-child(3){ width: 50%; margin-right: 5%;}
.cont3 .graph figure:nth-child(4){ width: 45%;}
.cont3 .graph figure:nth-child(2) figcaption{ margin-bottom: -25px;}
.cont3 .graph figure figcaption{ text-align: left; margin-bottom: 25px;}
/* cont4 */
.cont4{
	clear: both;
	padding: 120px 5% 100px;
	background: #f5f6f4;
}
.cont4 .cont4wrap{
	max-width: 1100px;
	margin: 0 auto;
	padding: 80px 4.5%;
	background: #fff;
	position: relative;
}
@media screen and (min-width:1200px){
	.cont4 .cont4wrap{ padding: 80px 50px;}
}
.cont4 .cont4wrap h2{
	position: absolute;
	left: 0;
	top: -.5em;
	width: 100%;
	color: #005e3c;
	font-size: 42px;
	font-weight: bold;
	line-height: 1;
}
.cont4 article{
	height: 200px;
	position: relative;
}
.cont4 article p.box1{
	position: absolute;
	left: 50%;
	top: 0;
	width: 100px;
	height: 200px;
	margin-left: -50px;
	padding-top: 15px;
	padding-bottom: 20px;
	color: #fff;
	font-size: 22px;
	font-weight: bold;
	line-height: 1;
	background: url("../images/cont4-box1.svg") no-repeat center bottom #5d815f;
}
.cont4 article p.box1 small{
	display: inline-block;
	font-size: 12px;
	line-height: 2;
}
.cont4 article div.box2{
	width: 39%;
	max-width: 380px;
	padding: 20px 20px 10px;
	text-align: left;
	background: #f3f0cb;
	box-shadow: 0px 0px 20px 0px #ddd;
	position: absolute;
	right: 0;
	top: 0;
}
.cont4 article div.box2:after{
	display: block;
	content: "";
	position: absolute;
	right: 100%;
	top: 50%;
	width: 29px;
	height: 28px;
	margin-top: -14px;
	background: url("../images/cont4-box2-left.png") center / cover no-repeat;
}
.cont4 article div.box2 dl{
	clear: both;
	overflow: hidden;
	margin-bottom: 15px;
}
.cont4 article div.box2 dl dt{
	float: left;
	width: 3em;
	color: #005e3c;
	font-weight: bold;
}
.cont4 article div.box2 dl dd{
	overflow: hidden;
}
.cont4 article div.box2 dl dd figure{
	padding-top: 10px;
}
.cont4 article div.box2 dl dd figure img{
	width: auto;
	height: 100px;
}
.cont4 article div.box2 p.green{
	color: #005e3c;
	margin-bottom: 15px;
}
.cont4 article div.box2 figure.img-top{
	float: left;
	margin-top: -70px;
	margin-bottom: 10px;
	width: 160px;
	box-shadow: 0px 0px 25px -12px #666;
}
.cont4 article div.box2 figure.img-bottom{
	float: right;
	margin-top: 10px;
	margin-bottom: -70px;
	width: 160px;
	box-shadow: 0px 0px 25px -12px #666;
}
.cont4 article div.box3{
	width: 40%;
	padding: 25px;
	background: #fff;
	border-radius: 30px;
	box-shadow: 0px 0px 25px -12px #666;
	position: absolute;
	left: 0;
	top: 0;
}
.cont4 article div.box3 p{ display: none;}
.cont4 article div.box3 dl{
	font-size: 14px;
	line-height: 1.6;
	text-align: left;
	vertical-align: middle;
}
.cont4 article div.box3 dl dt{
	clear: left;
	float: left;
	width: 3em;
	color: #005e3c;
	font-weight: bold;
}
.cont4 article div.box3 dl dd{
	overflow: hidden;
	margin-right: -4em;
}
.cont4 article div.box3 dl dd small{
	font-size: 11px;
	font-weight: normal;
}
.cont4 article.cont4-2001, .cont4 article.cont4-2001 p.box1{ height: 330px;}
.cont4 article.cont4-2002, .cont4 article.cont4-2002 p.box1{ height: 270px;}
.cont4 article.cont4-2002 .box2{ top: 50px;}
.cont4 article.cont4-2003, .cont4 article.cont4-2003 p.box1{ height: 350px;}
.cont4 article.cont4-2008, .cont4 article.cont4-2008 p.box1{ height: 270px;}
.cont4 article.cont4-2008 .box2{ top: 50px;}
.cont4 article.cont4-2009, .cont4 article.cont4-2009 p.box1{ height: 280px;}
.cont4 article.cont4-2012, .cont4 article.cont4-2012 p.box1{ height: 660px;}
.cont4 article.cont4-2014, .cont4 article.cont4-2014 p.box1{ height: 340px;}
.cont4 article.cont4-2014 .box2{ top: 50px;}
.cont4 article.cont4-2019, .cont4 article.cont4-2019 p.box1{ height: 740px;}
.cont4 article.cont4-2020, .cont4 article.cont4-2020 p.box1{ height: 340px;}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width:768px){
	/* cont1 */
	.cont1 ul{
		padding: 40px 3% 0;
	}
	.cont1 ul li{
		width: 100%;
		max-width: 500px;
		margin: 0 auto 10px;
	}
	.cont1 ul li a{
		padding: 10px 30px 10px 10px;
		font-size: 18px;
		background: url("../images/cont1-icon.svg") right center / 25px no-repeat #eaece7;
		border-left: 5px solid #005b3a;
	}
	/* cont2 */
	.cont2{
		padding-top: 65px;
		margin-bottom: 65px;
	}
	.cont2:before,
	.cont2:after{
		height: 65px;
		background-size: auto 65px!important;
	}
	.cont2:after{ bottom: -64px;}
	.cont2 .wrap{
		padding-top: 40px;
	}
	.cont2 .wrap h2{
		font-size: 28px;
		margin-bottom: 20px;
	}
	.cont2 .wrap h3{
		font-size: 20px;
		margin-bottom: 20px;
	}
	.cont2 .wrap p small{
		font-size: 12px;
	}
	.cont2 .wrap p.t-right{
		margin-bottom: 30px;
	}
	.cont2 .wrap p.t-right{ font-size: 12px;}
	.cont2 .wrap p.t-right strong{ font-size: 14px;}
	.cont2 .wrap figure img{ margin-right: 2.8%; vertical-align: middle;}
	.cont2 .wrap figure img:nth-child(2){ width: 60%;}
	.cont2 .wrap figure img:nth-child(3){ width: 37.2%; margin-right: 0;}
	/* cont3 */
	.cont3{
		padding-top: 60px;
		padding-bottom: 50px;
		background: url("../images/cont3-bg.png") center top 60px / 96% auto no-repeat;
	}
	.cont3 h2{
		font-size: 40px;
		margin-bottom: 10px;
	}
	.cont3 .txt{
		margin-bottom: 30px;
	}
	.cont3 table{
		margin: 0 auto 30px;
	}
	.cont3 .graph{
		display: block;
		padding: 8% 5% 0;
	}
	.cont3 .graph figure{
		float: none;
		max-width: 500px;
		width: auto!important;
		margin: 0 auto 8%!important;
		padding-top: 0%!important;
	}
	.cont3 .graph figure figcaption{ margin-bottom: 15px;}
	/* cont4 */
	.cont4{
		padding: 50px 5% 40px;
	}
	.cont4 .cont4wrap{
		padding: 50px 3%;
	}
	.cont4 .cont4wrap h2{
		font-size: 28px;
	}
	.cont4 article{
		clear: both;
		height: auto!important;
		position: relative;
		padding-bottom: 30px;
	}
	.cont4 article.cont4-2001{
		padding-bottom: 40px;
	}
	.cont4 article:before{
		display: block;
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 70px;
		height: 100%;
		background: url("../images/cont4-box1.svg") no-repeat center bottom #5d815f;
	}
	.cont4 article p.box1{
		position: relative;
		left: auto;
		top: auto;
		float: left;
		width: 70px;
		height: auto!important;
		margin-left: 0;
		font-size: 18px;
		background: none;
	}
	.cont4 article p.box1 small{ font-size: 12px;}
	.cont4 article div.box2{
		float: right;
		width: calc(100% - 100px);
		padding: 20px 3% 5px!important;
		margin-bottom: 10px;
		position: relative!important;
		left: auto!important;
		right: auto!important;
		top: auto!important;
		box-shadow: 0px 0px 15px 0px #ddd;
	}
	.cont4 article div.box2:after{
		display: block;
		content: "";
		position: absolute;
		right: 100%!important;
		left: auto!important;
		top: 50%;
		width: 29px;
		height: 28px;
		margin-top: -14px;
		background: url("../images/cont4-box2-left.png") center / cover no-repeat!important;
	}
	.cont4 article div.box2 figure.img-top{
		float: left;
		margin-top: -40px;
		margin-bottom: 10px;
		width: 160px;
		box-shadow: 0px 0px 15px -5px #666;
	}
	.cont4 article div.box2 figure.img-bottom{
		float: right;
		margin-top: 10px;
		margin-bottom: -40px;
		width: 160px;
		box-shadow: 0px 0px 15px -5px #666;
	}
	.cont4 article div.box2 dl{
		line-height: 1.4;
	}
	.cont4 article div.box3{
		float: right;
		width: calc(99% - 80px);
		height: auto;
		position: relative;
		left: auto!important;
		right: auto!important;
		top: auto!important;
		padding: 10px 15px;
		border-radius: 20px;
		box-shadow: 0px 0px 5px 0 #ccc;
	}
	.cont4 article div.box3 p{
		display: block;
		color: #005e3c;
		font-weight: bold;
		text-align: left;
	}
	.cont4 article div.box3 dl dt{
		float: none;
	}
	.cont4 article div.box3 dl dd{ margin: 0;}
}
@media screen and (max-width:500px){
	.cont4 article{
		padding-bottom: 20px;
	}
	.cont4 article:before{
		width: 50px;
	}
	.cont4 article p.box1{
		width: 50px;
		font-size: 18px;
	}
	.cont4 article p.box1 small{ font-size: 10px;}
	.cont4 article div.box2{
		width: calc(100% - 65px);
		padding: 15px 3%!important;
		font-size: 12px;
	}
	.cont4 article div.box2:after{
		width: 14.5px;
		height: 14px;
		margin-top: -12px;
	}
	.cont4 article div.box2 figure.img-top{
		float: none;
		margin: -30px auto 10px;
		width: 160px;
	}
	.cont4 article div.box2 figure.img-bottom{
		float: none;
		margin: 10px auto -30px;
		width: 160px;
	}
	.cont4 article div.box2 dl dt{
		float: none;
	}
	.cont4 article div.box3{
		width: calc(100% - 65px);
	}
	.cont4 article div.box3 p{
		font-size: 12px;
		white-space: nowrap;
	}
	.cont4 article div.box3 dl{
		font-size: 12px;
	}
	.cont4 article div.box3 dl dt{
		float: none;
	}
	.cont4 article div.box3 dl dd{
		margin-right: 0;
	}
	.cont4 article div.box3 dl dd small{
		font-size: 10px;
	}
}






/*---------------------------------------------------------------------------------------
	footer
----------------------------------------------------------------------------------------*/

footer{
	clear: both;
}
footer ul{
	padding: 80px 0 30px;
}
footer ul li{
	display: inline-block;
	margin: 0 20px 10px;
}
footer dl{
	padding: 0 0 20px;
}
footer dl dt{
	margin-bottom: 20px;
}
footer dl dd{
	display: inline-block;
	margin: 0 20px 10px;
}
footer p{
	clear: both;
	color: #fff;
	font-size: 14px;
	padding: 10px 3%;
	background: #005b3a;
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width:768px){
	footer ul{
		padding: 40px 0 30px;
	}
	footer ul li{
		margin: 0 10px 10px;
	}
	footer ul li img{
		height: 80px;
	}
	footer dl{
		padding: 0 0 20px;
	}
	footer dl dt{
		margin-bottom: 15px;
	}
	footer dl dd{
		margin: 0 10px 10px;
	}
	footer dl dd img{
		height: 30px;
	}
	footer p{
		font-size: 12px;
		padding: 10px 3% 25px;
	}
}