@charset "utf-8";

main.csr section.x1 {
	padding:100px 0 0;
}
main.csr section.x1 .inner {
	padding:30px 0 271px;
	position:relative;
	z-index:1;
}
main.csr section.x1 .inner .top_bx {
	margin:0 0 0 10vw;
	position:relative;
	z-index:10;
}
main.csr section.x1 .inner .top_bx h1 {
	font-size:64px;
	line-height:1.1;
	position:relative;
	z-index:10;
	overflow:hidden;
}
main.csr section.x1 .inner .top_bx h1 span {
	margin:0;
	padding:0;
	display:block;
	line-height:inherit;
}
main.csr section.x1 .inner .top_bx p {
	font-size:24px;
	font-weight:500;
}
main.csr section.x1 .inner .top_bx p span {
	display:block;
	color:#216fc6;
}
main.csr section.x1 .inner .bg {
	width:72vw;
	height:400px;
	position:absolute;
	top:0;
	right:0;
	z-index:1;
	overflow:hidden;
	display:flex;
	justify-content:center;
	align-items:center;
}
main.csr section.x1 .inner .bg img {width:100%;}

main.csr section.x2 {margin:50px 0 0;}
main.csr section.x2 .inner {
	width:100%;
	max-width:1500px;
	margin:0 auto 100px;
	padding:0 50px;
}
main.csr section.x2 .inner .anchor {
	display:flex;
	justify-content:space-evenly;
	align-items:stretch;
	flex-wrap:wrap;
}
main.csr section.x2 .inner .anchor li {
	border:solid 1px #d8d8d8;
	width:22%;
	margin:8px 0;
	display:flex;
	justify-content:center;
	align-items:center;
}
main.csr section.x2 .inner .anchor li a {
	display:flex;
	justify-content:flex-start;
	align-items:center;
	text-decoration:none;
	font-size:16px;
	line-height:1.2;
	color:#1f1f1f;
	font-weight:bold;
	width:100%;
	height:4em;
	padding:0 1em;
}
main.csr section.x2 .inner .anchor li a::before {
	content:url(../images/arrow02.png);
	line-height:0;
	margin:0 1em 0 0;
}

main.csr section.x3 .inner {
	width:100%;
	max-width:1500px;
	margin:0 auto 100px;
	padding:0 50px;
}
main.csr section.x3 .inner .wp {
	margin:0 0 5vw;
	padding:0 0 5vw;
	border-bottom:solid 1px #d8d8d8;
}
main.csr section.x3 .inner .wp h2 {
	font-size:32px;
	border-left:5px solid #004d9f;
	line-height:1;
	padding:0.3em 0 0.3em 0.5em;
}
main.csr section.x3 .inner .wp p {
	font-size:18px;
	line-height:2.2;
	margin:2vw 0 0 2vw;
}
main.csr section.x3 .inner .wp ul {
	display:flex;
	justify-content:flex-start;
	align-items:flex-start;
	margin:2vw 0 0 2vw;
}
main.csr section.x3 .inner .wp ul li {
	width:20%;
	margin:0 3% 0 0;
}
main.csr section.x3 .inner .wp.sdgs {border-bottom:none;}
main.csr section.x3 .inner .wp.sdgs .img {
	display:flex;
	flex-direction:column;
	margin:80px 0 0 2vw;
	justify-content:flex-start;
	align-items:flex-start;
}
main.csr section.x3 .inner .wp.sdgs .img img {
	width:100%;
	max-width:800px;
	margin:0 0 15px;
}
main.csr section.x3 .inner .wp.sdgs .bx {margin:80px 0 0 2vw;}
main.csr section.x3 .inner .wp.sdgs .bx h3 {
	font-size:24px;
	border-bottom:solid 1px #d8d8d8;
	margin:0 0 2.5em;
	padding:0 0 0.3em;
}
main.csr section.x3 .inner .wp.sdgs .bx h4 {
	font-size:18px;
	margin:0 0 0 2vw;
	background-color:#ddeaed;
	padding:0.8em 1em;
	border-radius:8px;
}
main.csr section.x3 .inner .wp.sdgs .bx p {margin:1vw 0 0 3vw;}
main.csr section.x3 .inner .wp.sdgs ul {margin:1vw 0 0 3vw;}
main.csr section.x3 .inner .wp.sdgs ul li {
	width:8%;
	margin:0 1% 0 0;
}


/* メディアクエリ------------------------------------------------------------------*/
@media print, screen and (min-width:1900px){}
@media print, screen and (max-width:1500px){
	main.csr section.x1 .inner .bg img {
		width:auto;
		height:100%;
	}
	main.csr section.x2 .inner .anchor {justify-content:space-between;}
}
@media print, screen and (max-width:1400px){
	main.csr section.x2 .inner .anchor li.x5 a {font-size:14px;}
}
@media print, screen and (max-width:1200px){
	main.csr section.x2 .inner .anchor li {width:32%;}
	main.csr section.x2 .inner .anchor::after {
		content:"";
		width:32%;
	}
	main.csr section.x3 .inner .wp ul {flex-wrap:wrap;}
	main.csr section.x3 .inner .wp ul li {width:30%;}
}
@media print, screen and (max-width:1000px){
	main.csr section.x3 .inner .wp p {margin:2vw 0 0;}
	main.csr section.x3 .inner .wp ul {margin:2vw 0 0;}
	main.csr section.x3 .inner .wp.sdgs .bx {margin:80px 0 0;}
	main.csr section.x3 .inner .wp.sdgs .bx h4 {margin:0;}
	main.csr section.x3 .inner .wp.sdgs .bx p {margin:1vw 0 0;}
	main.csr section.x3 .inner .wp.sdgs ul {margin:1vw 0 0;}
	main.csr section.x3 .inner .wp.sdgs ul li {width:15%;}
}
@media print, screen and (max-width:1000px){
	main.csr section.x2 .inner .anchor li.x5 a {font-size:13px;}
}
@media print, screen and (max-width:768px){
	main.csr section.x1 .inner {padding:0;}
	main.csr section.x1 .inner .top_bx {margin:0 0 0 5vw;}
	main.csr section.x1 .inner .top_bx h1 {font-size:12vw;}
	main.csr section.x1 .inner .top_bx p {font-size:6vw;}
	main.csr section.x1 .inner .bg {
		position:relative;
		width:100%;
		height:40vw;
		margin:0 0 5vw 10vw;
	}
	main.csr section.x2 {margin:10vw 0 0;}
	main.csr section.x2 .inner {
		padding:0 5vw;
		margin:0 auto 15vw;
	}
	main.csr section.x2 .inner .anchor li {width:48%;}
	main.csr section.x2 .inner .anchor li a {
		font-size:2.6vw;
		padding:0 0.8em;
	}
	main.csr section.x2 .inner .anchor li.x5 a {font-size:2.3vw;}
	main.csr section.x3 .inner {
		margin:0 auto 10vw;
		padding:0 5vw;
	}
	main.csr section.x3 .inner .wp {
		margin:0 0 10vw;
		padding:0 0 10vw;
	}
	main.csr section.x3 .inner .wp h2 {
		font-size:6.8vw;
		line-height:1.4;
		padding:0 0 0 0.5em;
	}
	main.csr section.x3 .inner .wp p {
		font-size:4.2vw;
		line-height:2;
	}
	main.csr section.x3 .inner .wp ul {justify-content:space-between;}
	main.csr section.x3 .inner .wp ul li {
		width:48%;
		margin:0 0 2vw;
	}
	main.csr section.x3 .inner .wp.sdgs .bx h3 {
		font-size:6.2vw;
		margin:0 0 1em;
	}
	main.csr section.x3 .inner .wp.sdgs .img {margin:5vw 0 0;}
	main.csr section.x3 .inner .wp.sdgs ul {justify-content:flex-start;}
	main.csr section.x3 .inner .wp.sdgs ul li {
		width:20%;
		margin:0 1.5%;
	}
	main.csr section.x3 .inner .wp.sdgs .bx {margin:10vw 0 0;}
}