@charset "utf-8";

/* 未来への想い */
#future{
	margin-bottom: 100px;
}

#future .top-img{
	width: 100%;
	height: auto;
	display: block;
	position: relative;
}

#future .top-img img{
	width: 100%;
	min-height: 350px;
	object-fit: cover;
}

#future .top-img .title{
	width: 100%;
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
}

#future .top-img .title h3{
	margin-bottom: 20px;
}

#future .content{
	width: 100%;
	height: auto;
	position: relative;
	overflow: hidden;
}

#future .content .textarea{
	width: 100%;
	text-align: center;
	padding: 150px 0 170px;
}

#future .content .future-img01{
	width: 20%;
	max-width: 300px;
	position: absolute;
	top:80px;
	left: -1%;
}

#future .content .future-img01 img{
	width: 100%;
	display: block;
	object-fit: cover;
}

#future .content .future-img02{
	width: 22%;
	max-width: 300px;
	position: absolute;
	top:30px;
	right: 3%;
}

#future .content .future-img02 img{
	width: 100%;
	display: block;
	object-fit: cover;
}

#future .content .future-img03{
	width: 20%;
	max-width: 300px;
	position: absolute;
	bottom:0px;
	left: 6%;
}

#future .content .future-img03 img{
	width: 100%;
	display: block;
	object-fit: cover;
}

#future .content .future-img04{
	width: 20%;
	max-width: 300px;
	position: absolute;
	bottom:40px;
	right: 0;
}

#future .content .future-img04 img{
	width: 100%;
	display: block;
	object-fit: cover;
}


/* 西海市について */
#about-saikai{
	max-width: 1040px;
	padding: 0 20px;
	margin: 0 auto 80px;
}

#about-saikai .title{
	margin-bottom: 50px;
	position: relative;
}

#about-saikai .title .img{
	width: 100%;
	height: auto;
	display: block;
}
#about-saikai .title .img img{
	width: 100%;
	height: 450px;
	object-fit: cover;
}

#about-saikai .title .title-text{
	width: 70px;
	position: absolute;
	top:60px;
	left: 60px;
}

#about-saikai .text{
	text-align: center;
	margin-bottom: 50px;
}

#about-saikai .photoarea{
	width: 100%;
	height: auto;
	display: flex;
	flex-flow: nowrap;
}

#about-saikai .photoarea .box img{
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}


/*--------------------------------------------------------------------
スマートフォン
--------------------------------------------------------------------*/
@media screen and (max-width: 767px){
/* 未来への想い */
#future{
	margin-bottom: 80px;
}

#future .top-img .title{
	bottom: 30px;
	left: 0;
	transform: translateX(0);
}

#future .top-img .title h3{
	margin-bottom: 15px;
}

#future .content{
	position: static;
}

#future .content .textarea{
	text-align: justify;
	padding: 30px 15px 30px;
}

#future .content .future-img01{
	width: 100%;
	max-width: 100%;
	position: static;
}

#future .content .future-img01 img{
	width: 45%;
	max-width: 300px;
	display: block;
	margin-top: 5%;
}

#future .content .future-img02{
	width: 100%;
	max-width: 100%;
	position: static;
}

#future .content .future-img02 img{
	width: 70%;
	max-width: 400px;
	display: block;
	margin-left: 100%;
	transform: translateX(-100%);
}

#future .content .future-img03{
	width: 100%;
	max-width: 100%;
	position: static;
}

#future .content .future-img03 img{
	width: 70%;
	max-width: 400px;
	display: block;
	margin-top: 15px;
}

#future .content .future-img04{
	width: 100%;
	max-width: 100%;
	position: static;
}

#future .content .future-img04 img{
	width: 45%;
	max-width: 300px;
	display: block;
	margin-top: -20%;
	margin-left: 100%;
	transform: translateX(-100%);
}


/* 西海市について */
#about-saikai{
	max-width: 100%;
	padding: 0;
	margin: 0 auto 60px;
}

#about-saikai .title{
	margin-bottom: 30px;
}

#about-saikai .title .img img{
	height: 350px;
}

#about-saikai .title .title-text{
	width: 60px;
	top:30px;
	left: 30px;
}

#about-saikai .text{
	text-align: justify;
	padding: 0 15px;
	margin-bottom: 30px;
}

#about-saikai .photoarea{
	flex-direction: column;
}

}