@charset "UTF-8";

.mainImg{
    background-image: url(../img/environment/environment-main.jpg);
}

.content{
    width: 100%;
    margin:40px auto;
    padding: 40px 20px;
    box-sizing: border-box;
    overflow: hidden;
    max-width: 1240px;
}

#wrapper{
    position: relative;
    z-index: 3;
}

#slides {
	width: 60%;
    float: left;
}

#slides img{
    width: 100%;
}

#slides li span.caption{
	display: block;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	width: 100%;
	padding: 15px 10px;
	background: rgba(0, 0, 0, 0.5);
	color: #000;
	font-size: 1.6rem;
	position: absolute;
	bottom: 0px;
    color: #fff;
    z-index: 10;
}

/*
	Pagination
*/

/*スライダー*/
ul.slidesjs-pagination{
	margin: 4px;
	color: #666;
	text-decoration: none;
    text-align: center;
}
.slidesjs-navigation:hover{
	color: #000;
}

.slidesjs-pagination .slidesjs-pagination-item{
	display: inline-block;
	width: 16px;
	margin: 4px;
}
.slidesjs-pagination .slidesjs-pagination-item a{
	display: block;
	width: 12px;
	height: 12px;
	border: solid 2px #666;
	border-radius: 8px;
	background: #CCC;
	line-height: 1;
	text-indent: -9999px;
	overflow: hidden;
}
.slidesjs-pagination .slidesjs-pagination-item a.active{
	background: #eee;
	border-color: #ccc;
}
pre{
	max-height: 240px;
	padding: 20px 10px;
	margin-bottom: 60px;
	background: #EEE;
	overflow: auto;
}
/*
	Caption
*/
.texts {
    float: right;
    width: 35%;
}

.texts h2{
    text-align: left;
    font-size:2.8rem;
    margin-bottom: 1rem;
}

.texts p{
    font-size: 1.6rem;
    margin-bottom: 3rem;
    line-height: 2.4rem;
}

/*responsive*/
@media only screen and (min-width:980px) and (max-width:1024px) {
.mainImg {
	height: 50%;
}
}
@media only screen and (max-width:979px) {

.mainImg {
	height: 60%;
}
h1 {
	padding-top: 20%;
	line-height: 1;
}
h1 > span {
	line-height: 2;
}

#slides{
    width: 100%;
    float: none;
}

.texts{
    float: none;
    width: 100%;
}

}

@media only screen and (max-width:399px) {
    .mainImg{
        height: 50%;
    }
}

@media only screen and (max-width:767px) and (orientation: landscape) {
.mainImg {
	height: 70%;
}
h1 {
	padding-top: 0;
}

}