@charset "UTF-8";
@import "./reset.css";
@import "./icon.css";
@import "https://fonts.googleapis.com/css?family=Teko:500";
a{
	display: block;
	color: #252525;
	text-decoration: none;
}
i{ font-style: normal; }
body{
	font-family: YuMincho, 'Yu Mincho', serif;
	color: #252525;
	width: 100%;
	font-size: 100%;
}
#wrapper{
	width: 100%;
	font-size: 1.0rem;
	line-height: 1.6rem;
}
.inner{
	width: 1000px;
	margin: 0 auto;
}
.inner_m{
	width: 800px;
	margin: 0 auto;
}
.inner_s{
	width: 600px;
	margin: 0 auto;
}
.font{
	font-family: abolition, sans-serif;
	font-style: normal;
	font-weight: normal;
	letter-spacing: 5px;
	font-size: 1.2rem;
}
.icon-logo_icon .path1:before,
.icon-logo_icon .path2:before,
.icon-logo_icon .path3:before{
	color: #fff;
}
h1{
	text-align: center;
	color: #1a5f97;
	font-size: 2.6rem !important;
	padding: 3rem 0 2rem 0;
	position: relative;
}
h1 span{
	font-size: .9rem !important;
	display: block;
	font-family: YuMincho, 'Yu Mincho', serif;
	letter-spacing: 8px;
	margin-top: 2rem;
	opacity: 0;
	position: relative;
	z-index: 25;
	transform: rotateY(90deg);
	-webkit-transform: rotateY(90deg);
	-moz-transform: rotateY(90deg);
}
h1.scroll span{
	opacity: 1;
	transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
}
h1 i{
	position: relative;
	display: inline-block;
	letter-spacing: 20px;
	z-index: 25;
	opacity: 0;
}
h1.scroll i{
	opacity: 1;
	letter-spacing: 6px;
}
h1::before,
h1::after{
	content: "";
	position: absolute;
	z-index: 0;
}
h1::before{
	top: 50%;
	left: 50%;
	width: 300px;
	height: 1px;
	background: #e4e4e4;
	margin-left: -150px;
	margin-top: -20px;
}
h1::after{
	content: "/";
	font-size: 6rem;
	top: 45px;
	margin-left: -1rem;
	left: 50%;
	color: #ececec;
	font-family: abolition, sans-serif;
}

/*========================================================
	header
========================================================*/
header{
	position: relative;
	color: #fff;
	text-align: center;
}
.visual1,
.visual2,
.visual_message,
.visual_body{
	width: 100%;
}
.visual2,
.visual_message,
.visual_body{
	position: absolute;
	left: 0;
}
.visual2{
	top: 0;
	opacity: 0;
	animation: visual 10s linear infinite forwards;
	-webkit-animation: visual 10s linear infinite forwards;
	-moz-animation: visual 10s linear infinite forwards;
}
@keyframes visual{
	0%{ opacity: 0; }
	25%{ opacity: 0; }
	50%{ opacity: 1; }
	75%{ opacity: 1; }
	100%{ opacity: 0; }
}
@-webkit-keyframes visual{
	0%{ opacity: 0; }
	25%{ opacity: 0; }
	50%{ opacity: 1; }
	75%{ opacity: 1; }
	100%{ opacity: 0; }
}
@-moz-keyframes visual{
	0%{ opacity: 0; }
	25%{ opacity: 0; }
	50%{ opacity: 1; }
	75%{ opacity: 1; }
	100%{ opacity: 0; }
}
.visual_message,
.visual_body{
	opacity: .8;
}
.visual_message{
	top: 50%;
	left: 50%;
	width: 752px;
	font-size: 2.4rem;
	letter-spacing: 8px;
	border: 5px solid #fff;
	margin: -100px 0 0 -376px;
	padding: 2.4rem 0;
}
.visual_message span{
	margin: 0 3rem;
	font-size: 3.2rem;
	display: inline-block;
	vertical-align: top;
}
.visual_message i{
	display: inline-block;
	opacity: 0;
}
.visual_message i:first-child{
	animation: visual_msg 3s 1s ease forwards;
	-webkit-animation: visual_msg 3s 1s ease forwards;
	-moz-animation: visual_msg 3s 1s ease forwards;
}
.visual_message i:nth-child(3){
	animation: visual_msg 3s 1.5s ease forwards;
	-webkit-animation: visual_msg 3s 1.5s ease forwards;
	-moz-animation: visual_msg 3s 1.5s ease forwards;
}
.visual_message i:last-child{
	animation: visual_msg 3s 2s ease forwards;
	-webkit-animation: visual_msg 3s 2s ease forwards;
	-moz-animation: visual_msg 3s 2s ease forwards;
}
@keyframes visual_msg{
	0%{ transform: rotateX(90deg) translateY(-2rem); opacity: 0; }
	100%{ transform: rotateX(0) translateY(0); opacity: 1; }
}
@-webkit-keyframes visual_msg{
	0%{ -webkit-transform: rotateX(90deg) translateY(-2rem); opacity: 0; }
	100%{ -webkit-transform: rotateX(0) translateY(0); opacity: 1; }
}
@-moz-keyframes visual_msg{
	0%{ -moz-transform: rotateX(90deg) translateY(-2rem); opacity: 0; }
	100%{ -moz-transform: rotateX(0) translateY(0); opacity: 1; }
}
.visual_body{
	top: 50%;
	font-size: 1.6rem;
	letter-spacing: 4px;
	margin-top: 60px;
}
.visual_body span{
	letter-spacing: 0;
	font-size: 3rem;
	vertical-align: top;
}
/*========================================================
	main
========================================================*/
section>p{
	text-align: center;
	margin: 0 0 2rem 0;
}
.swiper-container{
	width: 100%;
	height: 372px;
	background: #1a5f97;
}
.swiper-slide{
	width: 546px;
	height: 372px;
	line-height: 372px;
	float: left;
	text-align: center;
	overflow: hidden;
}
.swiper-slide a{
	display: block;
	height: 100%;
	text-align: center;
	opacity: .8;
}
.swiper-slide a img{
	width: 100%;
        height: auto;
}
.swiper-slide a:hover{
	opacity: 1;
}
.swiper-slide a:hover img{
	transform: scale(1.2,1.2);
	-webkit-transform: scale(1.2,1.2);
	-moz-transform: scale(1.2,1.2);
}
.swiper-container-horizontal>.swiper-pagination-bullets{
	bottom: 30px;
}
.swiper-pagination-container .swiper-pagination-bullets{
	width: 100%;
}
.swiper-pagination-container .swiper-pagination-bullets .swiper-pagination-bullet{
	margin:0 5px;
}
.concept{
	position: relative;
	text-align: center;
	margin: 7rem auto 9rem auto;
}
.concept>span{
	font-size: 1.6rem;
}
.concept .leaf,
.concept .trash,
.concept .light,
.concept1,
.concept2,
.concept3{
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
}
.concept .recycle{
	transition: all 1s ease forwards;
	opacity: 0;
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
}
.concept .light{
    margin: -90px 0 0 -180px;
	transition: all .3s 1s ease forwards;
}
.concept .trash{
    margin: -90px 0 0 120px;
	transition: all .3s 1s ease forwards;
}
.concept .leaf{
    margin: 120px 0 0 -35px;
	transition: all .3s 1s ease forwards;
}
.concept1{
    margin: 50px 0 0 -220px;
	color: #1a9397;
	transition: all .3s 1.3s ease forwards;
}
.concept2{
    margin: -160px 0 0 -33px;
	color: #ceba0e;
	transition: all .3s 1.3s ease forwards;
}
.concept3{
    margin: 50px 0 0 140px;
	color: #20971a;
	transition: all .3s 1.3s ease forwards;
}
/* アニメーション用 */
.concept.active .recycle{
	opacity: 1;
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
}
.concept.active .light{
	opacity: 1;
}
.concept.active .trash{
	opacity: 1;
}
.concept.active .leaf{
	opacity: 1;
}
.concept.active .concept1{
	opacity: 1;
}
.concept.active .concept2{
	opacity: 1;
}
.concept.active .concept3{
	opacity: 1;
}
.concept>span>span{
	color: #f00;
	font-size: 2rem;
}
.concept1::before,
.concept2::before,
.concept3::before,
.concept1::after,
.concept2::after,
.concept3::after{
	content: "";
	height: 1px;
	position: absolute;
}
.concept1::before,
.concept2::before,
.concept3::before{
	width: 120%;
	bottom: -.5rem;
	left: -10%;
}
.concept1::after{
	width: 65%;
	bottom: -.5rem;
	right: -10%;
	transform: rotate(150deg);
	transform-origin: center right;
}
.concept2::after{
	width: 65%;
	bottom: -.5rem;
	right: -10%;
	transform: rotate(-40deg);
	transform-origin: center right;
}
.concept3::after{
	width: 65%;
	bottom: -.5rem;
	left: -10%;
	transform: rotate(210deg);
	transform-origin: center left;
}
.concept1::before,
.concept1::after{
	background: #1a9397;
}
.concept2::before,
.concept2::after{
	background: #ceba0e;
}
.concept3::before,
.concept3::after{
	background: #20971a;
}
section{
	padding: 3rem 0 5rem 0;
}
section.bg{
	background: #1a5f97;
	color: #fff;
}
section.bg h1{
	color: #fff;
}
section.bg h1::before{
	background: #0f4a7a;
}
section.bg h1::after{
	color: #0f4a7a;
}
.ceo,
.ceo_message{
	text-align: center;
}
.ceo img{
	width: 300px;
}
.ceo_message{
	margin-top: 2rem;
}
.text_right{
	text-align: right;
	width: 600px;
	margin-top: 1rem;
}
#agenda ul{
	counter-reset: agenda;
}
#agenda li{
	background: #f4f4f4;
	position: relative;
	padding: 1rem 1rem 1rem 4rem;
	margin-bottom: .5rem;
}
#agenda li::after{
	counter-increment: agenda;
	content: "0"counter(agenda);
	position: absolute;
	top: 50%;
	left: 1rem;
	margin-top: -.8rem;
	font-family: abolition, sans-serif;
	font-size: 1.6rem;
	letter-spacing: 3px;
}
#agenda li::before{
	content: "/";
	font-family: abolition, sans-serif;
	position: absolute;
	top: 50%;
	left: 1.4rem;
	font-size: 2rem;
	color: #fff;
	margin-top: -.7rem;
}
#agenda li:nth-child(2n){
	background: #f9f9f9;
}
.agenda li{
	transform: translateY(2rem);
	-webkit-transform: translateY(2rem);
	-moz-transform: translateY(2rem);
	opacity: 0;
}
.agenda.active li{
	transform: translateY(0);
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	opacity: 1;
}
#overview li{
	display: table;
	width: 100%;
	border-bottom: 1px solid #ececec;
}
#overview li p{
	display: table-cell;
	vertical-align: top;
	padding: 1rem;
}
#overview li p:first-child{
	width: 30%;
	text-align: right;
}
#contact li{
	margin-bottom: 1rem;
}
.err{
	text-align: center;
	margin-bottom: 20px;
}
input,
select,
textarea{
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	background: none;
	border-radius: 0;
	border: 0;
	padding: 1.0rem;
	font-size: 1.0rem;
	border-radius: 3px;
	box-shadow: 0;
	border: 0;
	background: #104f82;
	font-family: YuMincho, 'Yu Mincho', serif;
	width: 100%;
	color: #fff;
}
input:focus,
select:focus,
textarea:focus{
	outline: 0;
	background: #09406c;
}
textarea{
	height: 250px;
}
.submit{
	margin: 0 auto;
	width: 180px;
}
.submit input[type="submit"]{
	background: rgba(0, 0, 0, 0);
	border: 2px solid #fff;
	padding: .5rem 0;
	cursor: pointer;
}
.submit input[type="submit"]:hover{
	background: #104f82;
}
.c-google {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}
/*========================================================
	footer
========================================================*/
footer{
	background: #1a5f97;
	padding: 2rem 0;
	color: #fff;
	text-align: center;
	font-size: .8rem;
}
footer .footer_logo{
	margin-bottom: 2rem;
	font-size: 2rem;
}
/*========================================================
	transition
========================================================*/
nav ul li:not(:first-child) span,
.swiper-slide a,
.swiper-slide a img,
input,
select,
textarea,
nav,
h1 i,
h1 span,
.agenda li{
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
}
.concept .recycle{
	transition: all .5s ease;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
}
.concept1,
.concept2,
.concept3{
	transition: all .5s .5s ease;
	-webkit-transition: all .5s .5s ease;
	-moz-transition: all .5s .5s ease;
}
.concept .leaf,
.concept .trash,
.concept .light{
	transition: all .5s 1s ease;
	-webkit-transition: all .5s 1s ease;
	-moz-transition: all .5s 1s ease;
}
h1 i,
h1 span,
.agenda li{
	transition-duration: 1s;
	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
}
h1 span{
	transition-delay: .3s;
	-webkit-transition-delay: .3s;
	-moz-transition-delay: .3s;
}
@media (min-width: 768px){
	/*========================================================
		nav
	========================================================*/
	nav{
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.12);
		z-index: 100;
	}
	nav.scroll{
		background: rgba(26, 95, 151, 0.95);
	}
	nav ul{
		height: 100px;
		position: relative;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		opacity: .8;
	}
	nav ul li{
		position: relative;
		overflow: hidden;
		text-align: center;
		margin-right: 1.3rem;
	}
	nav ul li:first-child{
		position: absolute;
		top: 50%;
		left: 0;
		font-size: 3rem;
		color: #fff;
		margin-top: -1.5rem;
	}
	nav ul li:first-child,
	nav ul li:last-child{
		margin-right: 0;
	}
	nav ul li a{
		color: #fff;
		display: block;
	}
	nav ul li:not(:first-child) a{
		height: 3rem;
		line-height: 3rem;
	}
	nav ul li:not(:first-child) a:hover span{
		transform: translateY(-3rem);
		-webkit-transform: translateY(-3rem);
		-moz-transform: translateY(-3rem);
	}
	nav ul li:not(:first-child) span{
		display: block;
		height: inherit;
	}
	nav ul li:not(:first-child) span:last-child{
		font-size: .9rem;
		letter-spacing: 2px;
	}
}
@media (max-width: 767px){
	body{
		background: #1a5f97;
	}
	.font{
		font-family: 'Teko', sans-serif;
		text-transform: uppercase;
	}
	h1 span{
		margin-top: 1rem;
	}
	.inner, .inner_s, .inner_m{
		width: 92%;
	}
	#wrapper{
		background: #fff;
	}
	header,
	main,
	footer,
	.device_nav,
	nav{
		transition: all .5s ease;
		-webkit-transition: all .5s ease;
		-moz-transition: all .5s ease;
	}
	header,
	main,
	footer{
		position: relative;
		z-index: 50;
	}
	main{
		background: #fff;
	}
	header.open,
	main.open,
	footer.open,
	.device_nav.open{
		transform: translateX(-70%);
		-webkit-transform: translateX(-70%);
		-moz-transform: translateX(-70%);
	}
	nav{
		position: fixed;
		top: 0;
		right: 0;
		width: 70%;
		height: 100%;
		background: #104f82;
		z-index: 1;
		padding-top: 1rem;
	}
	nav.open{

	}
	nav li{
		border-bottom: 1px solid #063a64;
	}
	nav li a{
		padding: .5rem;
		color: #fff;
		text-align: center;
	}
	nav li a span:last-child{
		font-size: .8rem;
		margin-left: .5rem;
	}
	.device_nav{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 55;
		width: 100%;
		height: 70px;
		padding: 0 4%;
		font-size: 2rem;
		display: table;
	}
	.device_nav p{
		display: table-cell;
		vertical-align: middle;
		width: 50%;
	}
	.nav_icon{
		text-align: right;
	}
	.nav_icon span{
		width: 50px;
		height: 50px;
		display: inline-block;
		position: relative;
	}
	.nav_icon span::before,
	.nav_icon span::after{
		content: "";
		width: 30px;
		height: 3px;
		background: #fff;
		top: 50%;
		left: 10px;
		position: absolute;
	}
	.nav_icon span::before{
		margin-top: -10px;
	}
	.nav_icon span::after{
		margin-top: 7px;
	}
	img.visual1,
	img.visual2{
		height: 450px;
		width: auto;
	}
	.visual_message{
		width: 92%;
		margin: -2rem 4% 0 4%;
		left: 0;
		font-size: 1.0rem;
		letter-spacing: 6px;
		border: 3px solid #fff;
		padding: 1rem 0;
	}
	.visual_message span{
		margin: 0 .5rem;
		font-size: 1.3rem;
	}
	.visual_body{
		font-size: 1rem;
		letter-spacing: 2px;
		margin-top: 4rem;
	}
	.visual_body span{
		font-size: 1rem;
	}
	section {
		padding: 0rem 0 3rem 0;
	}
	h1{
		font-size: 2rem !important;
	}
	section>p{
		margin: 0 4% 2rem 4%;
	}
	.swiper-container{
		height: auto !important;
	}
	.swiper-slide{
		width: 250px;
		height: 190px;
		line-height: 190px;
	}
        /*
	.swiper-slide a{
		border: 10px solid #1a5f97;
	}
	.swiper-slide a img{
		width: 90%;
	}
	.swiper-wrapper>div:first-child a img{
		width: 50%;
	}
        */
	.swiper-container-horizontal>.swiper-pagination-bullets{
		bottom: 15px;
	}
	.concept .recycle{
		width: 127px;
	}
	.concept .leaf{
		margin: 80px 0 0 -20px;
		width: 32px;
	}
	.concept .trash{
		margin: -60px 0 0 80px;
		width: 36px;
	}
	.concept .light{
		margin: -60px 0 0 -120px;
		width: 35px;
	}
	.concept1, .concept2, .concept3{
		font-size: .9rem;
		letter-spacing: 2px;
	}
	.concept1{
		margin: 30px 0 0 -160px;
	}
	.concept1::after{
		width: 35%;
	}
	.concept3{
		margin: 30px 0 0 80px;
	}
	.concept2{
		margin: -120px 0 0 -33px;
	}
	.concept3::after{
		width: 30%;
	}
	.ceo img{
		width: 100%;
	}
	.ceo_message>p{
		text-align: left;
		padding: 0 4%;
	}
	#map_canvas{
		height: 300px !important;
	}
	header{
		width: 100%;
		overflow: hidden;
	}
}
@media (min-width: 768px) and (max-width: 1000px){
	.inner, .inner_s, .inner_m{
		width: 92%;
	}
	nav ul li{
		margin-right: 1rem;
	}
	img.visual1,
	img.visual2{
		height: 700px;
		width: auto;
	}
	.visual_message{
		width: 652px;
		margin: -100px 0 0 -326px;
	}
	.visual_message span{
		margin: 0 2rem;
	}
}