@charset "utf-8";
@import url(reset.css);
@import url(base.css);
@import url(common.css);

.vison #container {
	padding-bottom:0;
}


/*-------------------------------------------------------------------
	pagetitle
-------------------------------------------------------------------*/

#wrap #pagetitle {
	background:url(../image/vision/vision_bg.jpg) center center no-repeat;
	background-size:cover;
}

#wrap #pagetitle .title {
	width:960px;
	margin:0 auto;
	padding:200px 0 100px;
}


/*-------------------------------------------------------------------
	vision
-------------------------------------------------------------------*/


#vision {
	padding:30px 0 0;
}

#vision h2 {
	width:960px;
	margin:0 auto 50px;
	background:url(../image/common/h2_bg.jpg) repeat-y;
}

#vision h2 span {
	display:block;
	font-size:1.4em;
	line-height:1.0;
	color:#FFF;
	padding:10px 20px;
	text-align:left;
}

#vision h3 {
	max-width:94%;
	margin:0 auto 50px;
	text-align:center;
}


#vision .message {
	position:relative;
}

#vision .message .inner {
	width:980px;
	margin:0 auto;
	padding-bottom:115px;
	position: relative;
}

#vision .message .column2{
	display: flex;
}

#vision .message .column2 .desc{
	padding-right: 20px;
  box-sizing: border-box;
}

#vision .message .photo {
max-width: 450px;
/*	position:absolute;
	bottom:70px;
	right: 0;
	z-index:-1;
	max-width: 450px;*/
}

/*-------------------------------------------------------------------
	message
-------------------------------------------------------------------*/

#vision .message dl {
	margin-bottom:50px;
}

#vision .message dl.short {
	width:680px;
}

#vision .message dl dt {
	/*background:#f7f9fb;*/
	background:#b1e5ff;
	font-size:1.4em;
	line-height:1.5;
	padding:10px 20px;
	margin:0 0 20px;
	font-weight:300;
}

@media screen and (max-width: 1080px){
	
	#vision .message dl.short {
		width:600px;
	}

}

/*===============================================
  画面の横幅が980px以下に適用
===============================================*/
@media screen and (max-width: 980px){
	
	/* pagetitle */
	
	#wrap #pagetitle {
		background-size:auto 100%;
	}

	#wrap #pagetitle .title {
		padding:100px 0 50px;
		width:94%;
	}
	
	#vision {
		padding:0;
	}

	#vision h2 {
		width:94%;
		margin:0 auto 30px;
	}

	#vision h3 {
		margin:0 auto 30px;
	}



	#vision .message .inner {
		width:94%;
		margin:0 auto;
		padding-bottom:0;
	}




	#vision .message dl {
		margin-bottom:30px;
	}

	#vision .message dl.short {
		width:auto;
	}

	#vision .message dl dt {
		padding:10px;
		line-height:1.2;
		margin-bottom:10px;
	}
	
	#vision .message .inner figure.name {
		position:absolute;
		bottom:0;
		left:0;
		width:90%;
		padding:0 5%;
		text-align:center;
		background:rgba(255,255,255,0.4);
	}

	#vision .message .column2{
		display: block;
	}

	#vision .message .column2 .desc{
		padding-right: 0;
	  box-sizing: border-box;
	}

	#vision .message .photo {
		position:static;
		max-width:100%;
		margin:-30px auto 0;
		margin-top: 20px;
	}
	
	#vision .message .photo img {
		width:100%;
	}

}

/*===============================================
  画面の横幅が768px以下に適用
===============================================*/
@media screen and (max-width: 768px){
	
	#vision .message dl dd br.pc {
		display: none;
	}

}

/*===============================================
  画面の横幅が640px以下に適用
===============================================*/
@media screen and (max-width: 640px){

	#vision .message dl dd br.pc {
		display: none;
	}	
	
}