@charset 'UTF-8';

/*----------
Vision（ビジョン）
----------*/

/*----------
Vision メイン
----------*/
.vision-main{
	display: block;
	position: relative;
	width: 100%;
	height: 430px;
	background-image: url("../../images/top/green_bg.jpg");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.vision-main-img{
	display: block;
	position: relative;
	max-width: 1000px;
	height: 430px;
	margin: 0 auto;
	bottom: 0px;
	text-align: right;
	vertical-align: bottom;
	background-image: url("../../images/vision/vision_main.png");
	background-repeat: no-repeat;
	background-position: top right;
	background-size: 490px 407px;
}

.vision-main-img img{
	display: block;
	position: relative;
	width: 96%;
}
	
.vision-main h2{
	display: block;
	position: absolute;
	top:135px;
	left: 30px;
	width: 300px;
}

.vision-main h2 img{
	width: 350px;
}

.vision-main .copy{
	display: block;
	position: absolute;
	width: 304px;
	font-size: 27px;
	letter-spacing: 0.13em;
	top:212px;
	left: 30px;
	line-height: 1.76em;
	font-weight: 500;
	color: #fff;
	padding: 12px 0 0 0;
	border-top: 1px solid #FFFFFF; 
	text-align: left;
}

/*----------
Vision blockエリア
----------*/
.vision_block{
	display: block;
	position: relative;
	width: 48%;
	height: auto;
	margin: 50px 0 0 0;
}

.left{
	float: left;
}

.right{
	float: right;
}

.vision_block dt{
	display: block;
	clear: both;
	position: absolute;
	top:-28px;
	left: -10px;
	width: 240px;
	background-color: #1AAF67;
	color: #FFFFFF;
	font-weight: 500;
	padding: 9px 10px 9px 10px;
	text-align: center;
	border-radius: 6px;
	letter-spacing: 0.06em;
	font-size: 17px!important;
}
.vision_block dd{
	display: block;
	clear: both;
	border-radius: 10px;
	border: #1AAF67 1px solid;
	padding: 24px 16px 16px 16px;
	color: #2D2D2D;
	background-color: #EAFFEC;
}

.vision_block .left ul{
}

.list_img li{
	display: block;
	clear: both;
	padding: 2px 2px 2px 15px;
	color: #2D2D2D;
	letter-spacing: 0.04em;
	font-size: 14px!important;
	margin: 0 0 0 10px;
	background-image: url("../../images/vision/icon_tri.png");
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 6px 10px;
}


.dx_ttl{
	display: block;
	clear: both;
	margin: 0 auto -15px auto;
	position: relative;
	text-align: center;
	font-size: 21px;
	font-weight: 600;
	color: #2A2A2A;
	letter-spacing: 0.05em;
	padding: 15px 0 0 0;
}

	
@media screen and (max-width: 768px){
	
.vision-main{
	display: block;
	position: relative;
	width: 100%;
	height: 480px;
	background-image: url("../../images/top/green_bg.jpg");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.vision-main-img{
	display: block;
	position: relative;
	max-width: 100%;
	height: 430px;
	margin: 0 auto;
	bottom: 0px;
	text-align: right;
	vertical-align: bottom;
	background-image: url("../../images/vision/vision_main_sp.png");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 300px 249px;
}

.vision-main-img img{
	display: block;
	position: relative;
	width: 30%;
}
	
.vision-ttl{
		display: block;
		width: 280px;
		height: auto;
		margin: 0 auto;
	}
	
.vision-main h2{
	display: block;
	position: absolute;
	margin: auto;
	width: 280px;
	top: 60px;
	left: 0;
	right: 0;
	text-align: center;
}

.vision-main h2 img{
	width: 280px;
}

.vision-main .copy{
	display: block;
	position: absolute;
	width: 280px;
	margin: auto;
	font-size: 22px;
	letter-spacing: 0.22em;
	top:126px;
	left: 0;
	right: 0;
	line-height: 1.76em;
	font-weight: 500;
	color: #fff;
	padding: 12px 0 0 0;
	border-top: 1px solid #FFFFFF; 
	text-align: center;
}
	
/*----------
Vision blockエリア
----------*/
	
.vision_block{
	display: block;
	clear: both;
	position: relative;
	width: 90%;
	height: auto;
	margin: 50px auto 0 auto!important;
}

.left{
	clear: both!important;
	margin: 20px auto 20px auto!important;
	padding: 0;
}

.right{
	clear: both!important;
	margin: 20px auto 20px auto!important;
	padding: 0;
}

.list_img dl{
	display: block;
	margin: auto;
	width: 100%;
	}

.vision_block dt{
	display: block;
	clear: both;
	position: absolute;
	top:-28px;
	left: 0px;
	width: 80%;
	background-color: #1AAF67;
	color: #FFFFFF;
	font-weight: 500;
	padding: 9px 10px 9px 10px;
	text-align: center;
	border-radius: 6px;
	letter-spacing: 0.06em;
	font-size: 17px!important;
}
.vision_block dd{
	display: block;
	clear: both;
	width: 96%;
	border-radius: 10px;
	border: #1AAF67 1px solid;
	padding: 24px 16px 16px 16px;
	color: #2D2D2D;
	background-color: #EAFFEC;
	margin: auto;
}

.list_img{
	display: block;
	clear: both;
	margin: 20px auto 0 auto!important;
	}
	
.list_img dl{
	display: block;
	clear: both;
	padding: 0;
	}
	
.vision_block .left ul{
}

.list_img li{
	display: block;
	clear: both;
	padding: 2px 2px 2px 13px;
	color: #2D2D2D;
	letter-spacing: 0.04em;
	font-size: 14px!important;
	margin: 0 0 0 0px;
	background-image: url("../../images/vision/icon_tri_sp.png");
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 7px 16px;
}
	
.dx_ttl{
	display: block;
	clear: both;
	margin: 0 auto -15px auto;
	position: relative;
	text-align: center;
	font-size: 17px;
	font-weight: 600;
	color: #2A2A2A;
	letter-spacing: 0.04em;
	padding: 15px 0 0 0;
}

	
}