@charset "UTF-8";
/* CSS Document */

div.wrapper{
	z-index:1;
	width: 100%;
	height: 400px;
  	background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
	text-align:center;
	display:table;
	position:relative;
	overflow: hidden;
}

div.wrapper h2{
	margin: -10px auto 0;
	padding: 0;
	font-size: 130%;
	font-weight: bold;
	color: #fff;
	vertical-align: middle;
	line-height: 120%;
	text-shadow: -1px -1px 1px #454545, 1px -1px 1px #454545, -1px 1px 1px #454545, 1px 3px 1px #454545; /* 文字の縁取り */
	z-index: 4;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
}

div.wrapper h2 span{
	font-size: 70%;
}




/* Body Banner
------------------------------------------- */

div.body_bnr_wrap{
	margin: 0 auto;
	padding: 0;
	text-align: center;
}

div.body_bnr_box{
	width: 330px;
	height: 200px;
	padding: 0;
	margin: 0 auto 20px;
	list-style: none;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}


div.body_bnr_box:nth-child(1){
	background: url(../images/top/body_banner_01.jpg) no-repeat;
}
div.body_bnr_box:nth-child(2){
	background: url(../images/top/body_banner_02.jpg) no-repeat;
}
div.body_bnr_box:nth-child(3){
	background: url(../images/top/body_banner_03.jpg) no-repeat;
}

div.body_bnr_box a{
	display: block;
	width: 330px;
	height: 200px;
	cursor: pointer;
}

div.body_bnr_box:nth-child(1):after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    background: url(../images/top/body_banner_01.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
	cursor: pointer;
}

div.body_bnr_box:nth-child(2):after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    background: url(../images/top/body_banner_02.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
	cursor: pointer;
}

div.body_bnr_box:nth-child(3):after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    background: url(../images/top/body_banner_03.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
	cursor: pointer;
}

div.body_bnr_box:hover:after {
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
	cursor: pointer;
}

div.body_bnr_box h3{
	margin: 0 auto;
	padding: 0;
	font-size: 90%;
	color: #fff;
	position: absolute;
	top: 20%;
	left: 0;
	right: 0;
	z-index: 10;
	text-align: center;
	cursor: pointer;
}

div.body_bnr_box h3 span{
	font-size: 150%;
	display: block;
}


div.body_bnr_box p{
	margin: 0 auto;
	padding: 2px 0;
	position: absolute;
	top: 52%;
	left: 0;
	right: 0;
	text-align: center;
	border: 1px solid #fff;
	color: #fff;
	z-index: 100;
	width: 60%;
}

div.body_bnr_box:hover p{
	background-color: #fff;
	color: #000;
}


/* Service Information
------------------------------------------- */

div.contents_box h4{
	margin: 0 auto 0;
	padding: 0;
	text-align: center;
	font-size: 220%;
	font-weight: bold;
	color: #999;
	letter-spacing: 0.1em;
	line-height: 45%;
}

div.contents_box h4 span{
	font-size: 32%;
	font-weight: normal;
	color: #777;
}


div.contents_box{
	width: 100%;
	margin: 0;
	height: 0;
	display: inline-block;
}

div.contents h5{
	font-size: 150%;
	margin: 25px auto 0;
	padding: 0;
	text-align: center;
	color: #000;
	line-height: 130%;
	font-weight: bold;
}


p.co_txt{
	margin: 30px 20px 0;
	padding: 0;
	text-align: left;
}

p.recycle_img{
	margin: 0 auto;
	padding: 0;
	text-align: center;
}



/* Button
------------------------------------------- */

.btn {
	width: 350px;
  	text-align: center;
  	padding: 15px 0;
  	cursor: pointer;
  	letter-spacing: 2px;
  	position:relative;
  	overflow:hidden;
  	margin: 60px 0 0;
  	background-color: #129006;
  	font-size: 110%;
	font-weight: bold;
	margin: 15px auto;
}

.btn:before {
  	content: "";
  	position: absolute;
  	height: 100%;
  	width: 0;
  	background-color: #91E27E;
  	left: 0;
  	bottom: 0;
  	transition: all .3s;
  	opacity: 0.3;
}

.btn:hover:before {
  	width: 100%;
}

.btn a{
	color: #fff;
}