@charset "utf-8";

main.vision section.x1 {
	padding:100px 0 0;
}
main.vision section.x1 .inner {
	padding:30px 0 135px;
	position:relative;
	z-index:1;
}
main.vision section.x1 .inner .top_bx {
	margin: 0 0 0 10vw;
	position: relative;
	z-index: 10;
}
main.vision section.x1 .inner .top_bx h1 {
	font-size:64px;
	position:relative;
	z-index:10;
	overflow:hidden;
}

main.vision section.x1 .inner .top_bx h1 span {
	margin:0;
	padding:0;
	display:block;
	line-height:inherit;
	line-height:1.1;
}
main.vision section.x1 .inner .top_bx p {
	font-size:24px;
	font-weight:500;
}
main.vision section.x1 .inner .top_bx p span {
	display:block;
	color:#216fc6;
}
main.vision 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.vision section.x1 .inner .bg img {width:100%;}

#anc.vision {
	width: 100%;
	max-width: 1500px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 0 150px;
	padding:0 50px;
}
#anc.vision li {
    width: 15%;
    margin: 0 2.5%;
}
#anc.vision li a {
	text-decoration: none;
	color: #1f1f1f;
	font-weight: 500;
	border-bottom: solid 1px #686868;
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	line-height: 2.6;
}
#anc.vision li a::after {
	content: "";
	display: block;
	border-right: solid 2px #686868;
	border-bottom: solid 2px #686868;
	width: 10px;
	height: 10px;
	transform: rotate(45deg);
	margin: 0.7em 3px 0;
}


main.vision section.x2 .inner {
	position:relative;
	z-index:1;
	margin:0 0 200px;
	padding:0 0 200px;
}
main.vision section.x2 .inner .h_bx {
	width:fit-content;
	position:relative;
	z-index:10;
	left:10vw;
}
main.vision section.x2 .inner .h_bx h2 {
	font-size:48px;
	margin:0 0 0.4em;
}
main.vision section.x2 .inner .h_bx h3 {
	font-size:20px;
	font-weight:500;
	color:#216fc6;
	margin:0 0 1em;
}
main.vision section.x2 .inner .h_bx p {
	font-size:20px;
	width:470px;
	text-align:justify;
	line-height:2.2;
}
main.vision section.x2 .inner .bg {
	position:absolute;
	top:0;
	right:0;
	overflow:hidden;
	height:25vw;
	min-height:400px;
	display:flex;
	justify-content:flex-end;
	align-items:center;
	z-index:1;
}
main.vision section.x2 .inner .bg img {
	width:65vw;
	padding:7vw 0 0;
}

main.vision section.x3 {overflow:hidden;}
main.vision section.x3 .inner {
	width: 100%;
	max-width: 1500px;
	margin: 0 0 200px 12vw;
}
main.vision section.x3 .inner h2 {
	font-size:48px;
	margin:0 0 0.4em;
}
main.vision section.x3 .inner h3 {
	font-size: 20px;
	font-weight: 500;
	color: #216fc6;
	margin: 0 0 1em;
}
main.vision section.x3 .inner ul li {
	border-bottom: solid 1px #8e8e8e;
	padding: 50px 0 50px 230px;
	margin: 0 0 0 120px;
	background-repeat: no-repeat;
	background-position: left center;
}
main.vision section.x3 .inner ul li h3 {
	font-size: 32px;
	color: #1f1f1f;
	font-weight: bold;
	letter-spacing: 0.1em;
	margin: 0 0 0.5em;
}
main.vision section.x3 .inner ul li p {
	font-size: 20px;
	letter-spacing: 0.1em;
}
main.vision section.x3 .inner ul li.x1 {background-image: url(../images/vision_img03.jpg);}
main.vision section.x3 .inner ul li.x2 {background-image: url(../images/vision_img04.jpg);}
main.vision section.x3 .inner ul li.x3 {background-image: url(../images/vision_img05.jpg);}
main.vision section.x3 .inner ul li.x4 {background-image: url(../images/vision_img06.jpg);}
main.vision section.x3 .inner ul li.x5 {background-image: url(../images/vision_img07.jpg);}
main.vision section.x3 .inner ul li.x6 {background-image: url(../images/vision_img08.jpg);}
main.vision section.x3 .inner ul li.x7 {background-image: url(../images/vision_img09.jpg);}

main.vision section.x4 .inner {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	margin:0 0 200px;
}
main.vision section.x4 .inner .h_bx {
	width: fit-content;
	position: relative;
	z-index: 10;
}
main.vision section.x4 .inner .h_bx h2 {
	font-size:48px;
	margin:0 0 0.4em;
}
main.vision section.x4 .inner .h_bx h3 {
	font-size:20px;
	font-weight:500;
	color:#216fc6;
	margin:0 0 1em;
}
main.vision section.x4 .inner .h_bx p {
	font-size: 20px;
	width: 32em;
	text-align: justify;
	line-height: 2.2;
	letter-spacing: 0.1em;
}
main.vision section.x4 .inner .bg {
	position: relative;
	top: -40px;
	right: 1vw;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	z-index: 1;
}
main.vision section.x4 .inner .bg img {
	width: 100%;
	max-width: 703px;
}

/* メディアクエリ------------------------------------------------------------------*/
@media print, screen and (min-width:1900px){}
@media print, screen and (max-width:1500px){
	main.vision section.x1 .inner .bg img {
		width:auto;
		height:100%;
	}
main.vision section.x2 .inner .bg img {
    width: auto;
    height: 100%;
    padding: 0;
}
	main.vision section.x2 .inner .bg {top:2em;}
main.vision section.x3 .inner {
    padding: 0 0 200px 12vw;
    margin: 0;
}
main.vision section.x3 .inner ul li {
    padding: 50px 50px 50px 230px;
}
main.vision section.x4 .inner {
    width: 100%;
    padding: 0 5vw;
}
main.vision section.x4 .inner .bg {right:-3vw;}

}
@media print, screen and (max-width:1200px){
	#anc.vision li {
    width: 22%;
    margin: 0 1.5%;
	}

main.vision section.x2 .inner {
    margin: 0 0 15vw;
    padding: 0;
}
main.vision section.x2 .inner .h_bx {
    left: 5vw;
    padding: 0 10vw 0 0;
    width: 100%;
}
main.vision section.x2 .inner .h_bx p {
    width: 100%;
    font-size: 18px;
    margin: 0 0 1em;
}
main.vision section.x2 .inner .h_bx p br {display:none;}
main.vision section.x2 .inner .bg {
    position: unset;
    min-height: 300px;
}
main.vision section.x2 .inner .bg img {height:150%;}

main.vision section.x3 .inner {
    margin: 0 0 15vw 5vw;
	padding:0;
}
main.vision section.x3 .inner ul {
    width: 95vw;
}
main.vision section.x3 .inner ul li {margin:0 0 0 5vw;}


main.vision section.x4 .inner {
    flex-direction: column;
		margin:0 0 5vw;
}
main.vision section.x4 .inner .h_bx p {
    width: 70%;
    font-size: 18px;
}
main.vision section.x4 .inner .bg {
    top: -8vw;
    right: -2vw;
    margin: 0 0 0 auto;
}

main.vision section.x4 .inner .bg img {max-width:55vw;}


}

@media print, screen and (max-width:1000px){
	main.vision section.x2 .inner .h_bx h2 {
    font-size: 4.2vw;
    margin: 0;
	}
	main.vision section.x2 .inner .h_bx h3 {
    font-size: 2.4vw;
    line-height: 1;
    margin: 0 0 0.5em;
	}
	main.vision section.x3 .inner h2 {
    font-size: 4.2vw;
    margin: 0;
	}
	main.vision section.x3 .inner h3 {
    font-size: 2.4vw;
    line-height: 1;
    margin: 0 0 0.5em;
	}

	main.vision section.x4 .inner .h_bx h2 {
    font-size: 4.2vw;
    margin: 0;
	}
	main.vision section.x4 .inner .h_bx h3 {
    font-size: 2.4vw;
    line-height: 1;
    margin: 0 0 0.5em;
	}
}

@media print, screen and (max-width:768px){
	main.vision section.x1 .inner {padding:0;}
	main.vision section.x1 .inner .top_bx {margin:0 0 0 5vw;}
	main.vision section.x1 .inner .top_bx h1 {font-size:12vw;}
	main.vision section.x1 .inner .top_bx p {font-size:6vw;}
	main.vision section.x1 .inner .bg {
		position:relative;
		width:100%;
		height:40vw;
		margin:0 0 5vw 10vw;
	}
#anc.vision {
    margin:5vw 0 15vw;
    padding: 0 5vw;
    flex-wrap: wrap;
}
#anc.vision li {
    width: 45%;
    margin: 2.5vw 2.5%;
}
main.vision section.x2 .inner .h_bx {
    left: 0;
    padding: 0 5vw;
}
main.vision section.x2 .inner .h_bx h2 {
    font-size: 7.2vw;
    line-height: 1.2;
    margin: 0 0 0.5em;
}
main.vision section.x2 .inner .h_bx h3 {
    font-size: 4.2vw;
	margin:0 0 1em;
}
main.vision section.x2 .inner .h_bx p {
    font-size: 4.2vw;
    line-height: 2;
}
main.vision section.x2 .inner .bg {
    min-height: unset;
    width: 100%;
    height: auto;
    padding: 0 0 0 15vw;
}
main.vision section.x2 .inner .bg img {
    width: 100%;
    height: auto;
}

main.vision section.x3 .inner h2 {
    font-size: 7.2vw;
    line-height: 1.2;
    margin: 0 0 0.5em;
		padding:0 5vw 0 0;
}
main.vision section.x3 .inner h3 {
    font-size: 4.2vw;
	margin:0 0 1em;
}



main.vision section.x3 .inner ul li {
    padding: 8vw 3vw 8vw 22vw;
    margin: 0;
    background-size: 20vw;
}
main.vision section.x3 .inner ul li h3 {
    font-size: 5.8vw;
    margin: 0 0 0.5em;
}
main.vision section.x3 .inner ul li p {
    font-size: 4.2vw;
    line-height: 1.6;
}

main.vision section.x4 {margin: 0 0 25vw;}
main.vision section.x4 .inner .h_bx h2 {
    font-size: 7.2vw;
    line-height: 1.2;
    margin: 0 0 0.5em;
}
main.vision section.x4 .inner .h_bx h3 {
    font-size: 4.2vw;
	margin:0 0 1em;
}
main.vision section.x4 .inner .h_bx p {
		width:100%;
    font-size: 4.2vw;
    line-height: 2;
}
main.vision section.x4 .inner .bg {
	width:80%;
    top: 0;
    margin: 0 auto;
    right: 0;
}
main.vision section.x4 .inner .bg img {
    max-width: 100%;
}


}