body {
	font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
	width:100%;
	height:100%;
	padding: 0px;
	margin: 0px;
	color: #000;
	font-size:1rem;
	line-height:200%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow-x:hidden;
}
img {
	border:none;
	padding:0px;
	margin:0px;
	vertical-align: bottom;
	line-height: 1.0em;
}
ol,ul {
    list-style:none;
}

p{
	margin:2% auto;
	padding:0px;
}
dl{
	padding: 0px;
	margin: 0px;
}
dt{
	padding: 0px;
	margin: 0px;
}
dd{
	padding: 0px;
	margin: 0px;
}

a{
	color: #000;
	text-decoration:none;
	border:none;
	padding: 0px;
	margin: 0px;
}
a:hover{
	text-decoration:none;
	border:none;
	padding: 0px;
	margin:0px;
}
a img{
	-webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
	-o-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;
}
a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
	padding: 0px;
	margin:0px;
	border:none;
}

.nonpc{
	display: none;
}
.pc {
    display: block !important;
}

.sp {
    display: none !important;
}
.clear{
	float:none;
	clear:both;
	padding: 0px;
	margin:0px;
}

h1 {
	padding: 0px;
	margin:-30px auto 0px;
}

h2 {
	font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝","源ノ明朝", serif;
	font-size: 1.8rem;
	position: relative;
	display: inline-block;
	font-weight:normal;
}
h2:before {
	content: '';
	position: absolute;
	bottom: -15px;
	display: inline-block;
	width: 50px;
	height: 4px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

h3{
	font-size:1.3rem;
	font-weight:normal;
}

.material-icons{
	margin:0px;
	padding:0px;
	vertical-align:middle;
}
.tex{
	font-size:0.8rem;
}


/*==================
contents
====================*/
#wrap{
	width:100%;
	height:100%;
	margin:0px auto;
	padding: 0px;
}
.content{
	top:0px;
	width:100%;
	height:auto;
	padding: 0px;
	margin:0px auto 0px;
}
#main-content{
	max-width:1200px;
	margin:0px auto 0px;
	padding:0px 5%;
}

#logo{
	float:left;
}






/*==================
navi
====================*/
header {
	position:fixed;
	top:0px;
	z-index:9999;
	width: 100%;
	height:90px;
	margin: 0px auto;
	padding:0px;
	background:#fff;
}
header h1{
	float:left;
	margin:0px auto;
	padding:0px;
}
header h1 img{
	margin:0px;
	padding:0px;
	width:100%;
}


#contact_pc{
	padding:0.5rem 0.8rem;
	background:#014489;
	color:#fff;
	float:right;
	text-align:center;
	font-weight:bold;
}
#contact_pc a{
	color:#fff;
}
#mail{
	border-bottom:#fff solid 1px;
}

.globalnav-wrap {
	width: 100%;
	margin: 0px auto;
	padding:0px;
	display: table;
}

.globalnav{
	display:-webkit-flex;
	display:flex;
	justify-content:space-around;
	width:50%;
}
.globalnav .dropdown-btn {
	position: relative;
	display: inline-block;
	padding: 10px 5px;
	cursor: pointer;
	justify-content:space-around;
}
.globalnav .dropdown {
	z-index:0;
	position: absolute;
	left: 0;
	top:65px;
	width:300px;
	padding: 10px 20px;
	display: none;
	font-weight:normal;
	margin-top:12px;

}
.globalnav .dropdown li {
	display: block;
	margin: 10px 0;
	padding:2%;
	border-bottom:1px #ffffff solid;
}
.globalnav .dropdown li a {
	font-size:1rem;
	color:#fff;
	display: table-cell;
	width: inherit;
	box-sizing: border-box;
	vertical-align: middle;
}
.globalnav .dropdown li a:hover {
	color: #fff;
}
.globalnav .dropdown a span {
	display: inline-block;
	position: relative;
	transition: 0.3s;
	padding:5px 0px;
}
.globalnav .dropdown a span::after {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 2px;
	background: #014489;
	content: "";
	transition: 0.3s;
	transform: translateX(-50%);
}
.globalnav .dropdown a span:hover::after {
	width: 100%;
}



/* global-navi_bar */
.button {
	-webkit-box-flex: 1;
	flex: 1 1 auto;
	margin: 0px;
	padding: 0px 2px;
	border: none;
	text-align: center;
	text-transform: uppercase;
	position: relative;
	overflow: hidden;
	-webkit-transition: .3s;
	transition: .3s;
	display: table-cell;
}
.button a:hover{
  	text-decoration:none;
}
.button span {
	display:block;
	font-size:11px;
	letter-spacing: 5px;
	line-height:100%;
}
.button:after {
	position: absolute;
	-webkit-transition: .3s;
	transition: .3s;
	content: '';
	width: 0;
	left: 50%;
	top: 0;
	height: 3px;
	background: #014489;
	border-radius:6px;
}
.button:hover {
	cursor: pointer;
	text-decoration:none;
	font-weight: normal;
}
.button:hover:after {
	width: 100%;
	left: 0;
}


#header_area{
	padding-top:90px;
	height:80vh;
	background:url(../img/header_bg.gif) no-repeat top center;
	background-size:100% auto;
	animation: 3s forwards ease-out;
	max-width:2000px;
}
.l-home__hero__bg{
	background:url(../img/bl.png) no-repeat bottom center;
	background-size:100%;
	padding-bottom:1%;
	width:100%;
	max-width:2000px;
	position:absolute;
	top:0;right:0;bottom:0;left:0;
	margin:auto;
	animation:zoom 6s forwards ease-out;
	opacity:0;
	height:80vh;
}
@keyframes zoom{0%{opacity:1;transform:scale(1.2)}100%{opacity:1;transform:scale(1)}}
.l-home__hero__box{height:100%; text-align:left;}
.l-home__hero .copy{position:absolute;left:5%;margin:auto; padding:2% 0px; color:#fff;}
.l-home__hero .logo{}
.l-home__hero .logo img{height:100%;}
.l-home__hero .statement{padding:4% 0px;}
.l-home__hero .statement h2{font-size:1.9rem;font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝","源ノ明朝", serif;}
.l-home__hero .statement h3{font-size:1.3rem;}
.l-home__hero .statement p{}



#acc_area{
	width:100%;
	margin:10% auto;
	
}
#acc_area h4{
	font-size:1.2rem;
	border-top:#fff solid 1px;
	border-bottom:#fff solid 1px;
	text-align:center;
	margin:14% auto 8%;
	padding:15px 0px;
	font-weight:normal;
}

.acc_area_bg{
	background:url(../img/acc_bg.gif) top left no-repeat;
	margin:0px;
	padding:5% 0px 5% 3%;
}

#acc_area dl{
	margin:0px;
	padding:0px;
	display: flex;
}

#acc_area dt{
	width:100%;
	max-width:500px;
	color:#fff;
	z-index:1;
}
#acc_area dt img{
	width:100%;
	margin:0px;
}
#acc_area dt p{
	margin:2% auto;
	font-size:1rem;
	line-height:200%;
}

#acc_area dd{
	margin:0px 0px 0px 30px;
	padding: 0px;
	position: relative;
	z-index: 2;
}
#acc_area dd img{
	width:100%;
}

.btn{
	margin:5% auto 10%;
	text-align:center;
}
.btn a {
	border: 1px solid #0075c1;
	color: #0075c1;
	transition: all 1s;
	padding:2% 8%;
}
.btn a:hover {
	color:#fff;
	border-radius: 50px;
	background:#0075c1;
}



#works{
	margin:-10% auto 10%;
	padding-top:10%;
}
.works{
	background:#f1f1f1;
	padding:3% 5%;
}
#works h2 {
	position: relative;
	padding: 0 65px;
	text-align: center;
}

#works h2:before {
	position: absolute;
	top: calc(50% - 1px);
	width: 100%;
	height: 5px;
	content: '';
	background: #333333;
}
#works h2 span {
  position: relative;
  padding: 0 1em;
  background: #f1f1f1;
}

#works h3 {
  position: relative;
  padding: 0.3rem;
  text-align: center;
}
#works h3:before {
  position: absolute;
  bottom: -10px;
  left: calc(50% - 30px);
  width: 60px;
  height: 4px;
  content: '';
  border-radius: 8px;
  background: #333;
}

#works h4{
	font-size:1.2rem;
	border-top:#333 solid 1px;
	border-bottom:#333 solid 1px;
	text-align:center;
	margin:8% auto 5%;
	padding:15px 0px;
	font-weight:normal;
}

.item_list{
	padding:0px;
	margin:0px;
}
.item_list li{
	display: inline-block;
	vertical-align: middle;
	padding:0px;
	margin:0px auto 2%;
	width:24%;
	text-align:center;
}
.item_list li img{
	width: 100%;
	height:auto;
	max-width:200px;
	max-height:200px;
	border-radius:200px;
	transition-duration: 0.5s;
	margin-bottom:3%;
}
.item_list li:hover img{
  transform: scale(1.1);
  transition-duration: 0.5s;
}
.item_list li span{
	display:block;
}


#works dl{
	margin:0px;
	padding:0px;
	display: flex;
	flex-direction: row;
	align-items: center;
}
#works dt img{
	width:100%;
}
#works dd{
	padding: 30px 30px 40px 30px;
	position: relative;
	z-index: 2;
	margin-left: -100px;

	width:450px;
	background:rgba(240, 240, 240,0.75);
	border:10px solid #fff;
	text-align:center;
}



#facility{
	margin:-10% auto 10%;
	padding:13% 0% 3%;
	text-align:center;
}
#facility h2 {
	position: relative;
	padding: 0 65px;
	text-align: center;
}
#facility h2:before {
	position: absolute;
	top: calc(50% - 1px);
	width: 100%;
	height: 5px;
	content: '';
	background: #333333;
}
#facility h2 span {
  position: relative;
  padding: 0 1em;
  background: #fff;
}
#facility dl{
}
#facility dl img{
	width:100%;
}
#facility dt{
	margin:1% auto;
}
#facility dd{
	display:inline-block;
	width:49%;
	margin:0% auto;
}



#eco{
	margin:-10% auto 10%;
	padding:13% 0% 3%;
}

#eco h4{
	font-size:1.2rem;
	border-top:#fff solid 1px;
	border-bottom:#fff solid 1px;
	text-align:center;
	margin:0px auto 5%;
	padding:15px 0px;
	font-weight:normal;
}

.eco_area_bg1{
	background:url(../img/eco_bg.gif) top left no-repeat;
	margin:0px auto 5%;
	padding:5% 0px 5% 3%;
}

.eco_area_bg1 dl{
	margin:0px auto;
	padding:0px;
	display: flex;
}

.eco_area_bg1 dt{
	max-width:500px;
	color:#fff;
	z-index:1;
}
.eco_area_bg1 dt p{
	margin:2% auto;
	font-size:1rem;
	line-height:200%;
}

.eco_area_bg1 dd{
	margin:0px 0px 0px 3%;
	padding: 0px;
	position: relative;
	z-index: 2;
}
.eco_area_bg1 dd img{
	width:100%;
	max-width:640px;
}
#eco_flow{
	margin:0px auto;
	text-align:center;
}
#eco_flow img{
	width:100%;
	max-width:1000px;
}
.eco_area_bg2{
	background:url(../img/eco_bg2.gif) top right no-repeat;
	margin:5% auto 10%;
	padding:5% 3% 0px 3%;
}

.eco_area_bg2 dl{
	margin:0px auto;
	padding:0px;
	display: flex;
}

.eco_area_bg2 dt{
	margin:0px 3% 0px 0px;
	padding: 0px;
	position: relative;
	z-index: 2;
}
.eco_area_bg2 dt img{
	width:100%;
	max-width:640px;
}


.eco_area_bg2 dd{
	width:auto;
	max-width:500px;
	color:#fff;
	z-index:1;
}
.eco_area_bg2 dd p{
	background:#
	margin:4% auto;
}




#company{
	margin:-10% auto 0%;
	padding-top:10%;
}
.company{
	background:#f1f1f1;
	padding:3% 0%;
}

#company h2 {
	position: relative;
	padding: 0 65px;
	text-align: center;
}

#company h2:before {
	position: absolute;
	top: calc(50% - 1px);
	width: 100%;
	height: 5px;
	content: '';
	background: #333333;
}
#company h2 span {
  position: relative;
  padding: 0 1em;
  background: #f1f1f1;
}
#company p{
	margin-top:-25px;
}
#company h3 {
  position: relative;
  padding: 0.3rem;
  text-align: center;
}
#company h3 span{
	display:block;
	font-size:0.8rem;
	line-height:100%;
}

#company h3:before {
  position: absolute;
  bottom: -10px;
  left: calc(50% - 30px);
  width: 60px;
  height: 4px;
  content: '';
  border-radius: 8px;
  background: #333;
}

#company h4{
	font-size:1.2rem;
	border-top:#333 solid 1px;
	border-bottom:#333 solid 1px;
	text-align:center;
	margin:8% auto 5%;
	padding:15px 0px;
	font-weight:normal;
	width:50%;
}
#company h4 span{
	font-size:0.8rem;
}

.company_area{
	width:70%;
	background:#fff;
	border-radius:10px;
	padding:2% 5%;
	margin:3% auto 5%;
}
.company_area dl{
	margin:0px;
	padding:0px;
}
.company_area dt{
	display:inline-block;
	width:25%;
	padding-right:1%
	text-align:right;
	vertical-align:top;
	margin-bottom:2%;
}
.company_area dd{
	display:inline-block;
	width:60%;
	text-align:left;
	vertical-align:top;
	margin-bottom:2%;
}
.company a{
	text-decoration:underline;
	color:#014489;
}
.company a:hover{
	text-decoration:none;
}


.pdf_btn{
	width:40%;
	margin:2% 1% 3%;
	padding:0px;
	font-size:1.2rem;
	text-align:center;
	font-family:'メイリオ',Meiryo,'ＭＳ Ｐゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
	display:inline-block;
}

.pdf_btn span{
	padding-left:1%;
	vertical-align:middle;
}
.pdf_btn a {
	display:block;
	border: 5px solid #414141;
	color:#414141;
	transition: all 1s;
	padding:2%;
	border-radius: 50px;
	text-decoration:none;
}
.pdf_btn a:hover {
	color:#d9d9d9;
	border-radius: 50px;
	background:#414141;
}


#page_top {
	z-index:9999;
    position: fixed;
    bottom: 30px;
    right: 20px;
}
#page_top a {
    background-color: #999;
    color: #fff;
    text-align: center;
    text-decoration: none;
    padding: 10px 20px;
	font-size:2rem;
	border-radius:5px;
}
#page_top a:hover {
    background-color: #666;
    text-decoration: none;
}

footer{
	background:#333;
	padding:2% 0px;
	text-align:center;
	color:#fff;
}

#contact {
	max-width:80%;
	margin:5% auto;
	padding:5% 0px 0px;
}
#contact h2 {
	position: relative;
	padding: 0 65px;
	text-align: center;
}
#contact h2:before {
	position: absolute;
	top: calc(50% - 1px);
	width: 100%;
	height: 5px;
	content: '';
	background: #333333;
}
#contact h2 span {
  position: relative;
  padding: 0 1em;
  background: #fff;
}
.red{
	color:#FF0000;
}
.f11{
	font-size:12px;
}

.contact_table {
	border-top: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
	border-collapse: collapse;
	margin:5px auto 30px;
}
.contact_table th {
	padding: 10px;
	border-bottom: 1px solid #ccc;
	color: #333;
}
.contact_table td {
	padding: 10px;
	border-bottom: 1px solid #ccc;
}

#completion{
	height:40vh;
	padding:5% 0px;
	background:rgba(240, 240, 240,0.75);
}
#completion p{
	font-size:1.2rem;
}

@media only screen and (min-width: 1101px)  {

#tel_sp{
	display:none;
}

#contact_sp{
	display:none;
}
}
@media only screen and (min-width: 791px) and (max-width: 1100px) {
header h1 img{
	margin:0px;
	padding:0px;
	width:200px;
}
#header_area{
	padding-top:60px;
	height:700px;
	background:none;
}
.l-home__hero__bg{
	background:url(../img/header_tab.jpg) no-repeat bottom center;
	background-size:100% auto;
	width:100%;
	height:700px;
	margin:0px;
	padding:0px;
}


#contact_pc{
	display:none;
}

#tel_sp{
	padding:0.3rem 0.6rem;
	background:#014489;
	color:#fff;
	float:right;
	text-align:center;
	border-radius:5px;
	margin:15px 5px 0px;
}
#tel_sp a{
	color:#fff;
}
#tel_sp span{
	display:block;
	font-weight:bold;
}
#contact_sp{
	padding:0.3rem 0.6rem;
	background:#014489;
	color:#fff;
	float:right;
	text-align:center;
	border-radius:5px;
	margin:15px 5px 0px;
}
#contact_sp a{
	color:#fff;
}
#contact_sp span{
	display:block;
	font-weight:bold;
}


}

@media only screen and (min-width: 641px) and (max-width: 790px) {
header {
	height:60px;
	background:#fff;
}
header h1 img{
	margin:-8px 0px 0px;
	padding:0px;
	width:180px;
}

#header_area{
	padding-top:60px;
	height:700px;
	background:none;
}
.l-home__hero__bg{
	background:url(../img/header_tab.jpg) no-repeat bottom center;
	background-size:100% auto;
	width:100%;
	height:700px;
	margin:0px;
	padding:0px;
}


#contact_pc{
	display:none;
}

#tel_sp{
	padding:0.3rem 0.6rem;
	background:#014489;
	color:#fff;
	float:right;
	text-align:center;
	border-radius:5px;
	margin:-8px 5px 0px;
}
#tel_sp a{
	color:#fff;
}
#tel_sp span{
	display:block;
	font-weight:bold;
}
#contact_sp{
	padding:0.3rem 0.6rem;
	background:#014489;
	color:#fff;
	float:right;
	text-align:center;
	border-radius:5px;
	margin:-8px 5px 0px;
}
#contact_sp a{
	color:#fff;
}
#contact_sp span{
	display:block;
	font-weight:bold;
}
.nav-button-wrap {
	display: block;
	position: absolute;
	right: 0px;
	top: -2px;
	cursor: pointer;
	padding: 14px 10px 0px 0px;
	height: 40px;
}

.globalnav {
	display: none;
}
.globalnav .close {
	display: none;
}
.globalnav-wrap {
	z-index:1;
	padding:0px;
}
.globalnav-wrap.open .globalnav {
	display: block;
	padding: 10% 0px 5% 5%;
	margin:0px;
	position: fixed;
	right: 0;
	top: 0;
	background-color: rgba(255, 255, 255, 0.85);
	width: 60%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}
.globalnav-wrap.open .globalnav ul{
	padding: 0%;
	margin: -1% 0px 5% 2%;
}
.globalnav-wrap.open .globalnav li {
	display: block;
	padding: 2%;
	margin: 2% 0%;
	text-align:center;
}
.globalnav-wrap.open .globalnav li:hover {
	background: transparent;
}
.globalnav-wrap.open .globalnav .dropdown {
	display: block;
	position: static;
	background: transparent;
	width:80%;
}
.nav-button,
.nav-button span {
  transition: all 0.3s;
}
.nav-button {
	z-index: 20;
	width: 30px;
	height: 28px;
	position: relative;
	float:right;
}

.nav-button span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 4px;
	background-color: #0f5091;
	border-radius: 10px;
}

.nav-button span:nth-of-type(1) {
	top: 0;
}

.nav-button span:nth-of-type(2) {
	top: 12px;
}

.nav-button span:nth-of-type(3) {
	bottom: 0;
}

.active .nav-button span:nth-of-type(1) {
	transform: translateY(12px) rotate(-45deg);
	background-color: #0f5091;
}

.active .nav-button span:nth-of-type(2) {
	opacity: 0;
}

.active .nav-button span:nth-of-type(3) {
	background-color: #0f5091;
	transform: translateY(-12px) rotate(45deg);
}


.eco_area_bg1 dd img{
	width:300px;
}


}


@media screen and (max-width: 640px) {
body{
	overflow-x:hidden;
}
	.nonpc{
		display:block;
	}
    .pc {
        display: none !important;
    }

    .sp {
        display: block !important;
    }
	img{
		width:100%;
		height:auto;
	}
	.clear{
		float:none;
		clear:both;
		padding: 0px;
		margin:0px;
	}

	h1 {
		margin:0px;
		padding:0px;
		font-size:1.4rem;
	}
	h2 {
		margin:0px;
		padding:0px;
		font-size:1.3rem;
	}
	h3 {
		margin:0px;
		padding:0px;
		font-size:1.2rem;
	}
	h4 {
		margin:0px;
		padding:0px;
		font-size:1.1rem;
	}
	#wrap{
		width:100%;
		max-width:100%;
	}
	.content{
		position:relative;
		padding: 0px;
		margin:0px auto;
		width:100%;
	}
	#main-content{
		max-width:100%;
		padding:0px;
	}
	.main_wrap{
		width:100%;
		max-width:100%;
		margin:0px auto 0px;
	}

	/*==================
	navi
	====================*/
header {
	z-index:9999;
	width: 100%;
	margin:0px;
	padding:0px;
	height:60px;
}
header h1 a img{
	height:50px;
	width:auto;
	margin:0px;
	padding:0px;
}
#contact_pc{
	display:none;
}
#tel_sp{
	padding:0.3rem 0.6rem;
	background:#014489;
	color:#fff;
	float:right;
	text-align:center;
	border-radius:5px;
	margin:-8px 5px 0px;
}
#tel_sp a{
	color:#fff;
}
#tel_sp span{
	display:block;
	font-weight:bold;
}
#contact_sp{
	padding:0.3rem 0.6rem;
	background:#014489;
	color:#fff;
	float:right;
	text-align:center;
	border-radius:5px;
	margin:-8px 5px 0px;
}
#contact_sp a{
	color:#fff;
}
#contact_sp span{
	display:block;
	font-weight:bold;
}

.button a{
	color: #000;
	font-weight:bold;
}
.button span{
	display:inline-block;
}

.nav-button-wrap {
	display: block;
	position: absolute;
	right: 0px;
	top: -2px;
	cursor: pointer;
	padding: 14px 10px 0px 0px;
	height: 40px;
}

.globalnav {
	display: none;
}
.globalnav .close {
	display: none;
}
.globalnav-wrap {
	z-index:1;
	padding:0px;
}
.globalnav-wrap.open .globalnav {
	display: block;
	padding: 10% 0px 5% 5%;
	margin:0px;
	position: fixed;
	right: 0;
	top: 0;
	background-color: rgba(255, 255, 255, 0.85);
	width: 60%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}
.globalnav-wrap.open .globalnav ul{
	padding: 0%;
	margin: -1% 0px 5% 2%;
}
.globalnav-wrap.open .globalnav li {
	display: block;
	padding: 2%;
	margin: 2% 0%;
	text-align:center;
}
.globalnav-wrap.open .globalnav li:hover {
	background: transparent;
}
.globalnav-wrap.open .globalnav .dropdown {
	display: block;
	position: static;
	background: transparent;
	width:80%;
}
.nav-button,
.nav-button span {
  transition: all 0.3s;
}
.nav-button {
	z-index: 20;
	width: 30px;
	height: 28px;
	position: relative;
	float:right;
}

.nav-button span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 4px;
	background-color: #0f5091;
	border-radius: 10px;
}

.nav-button span:nth-of-type(1) {
	top: 0;
}

.nav-button span:nth-of-type(2) {
	top: 12px;
}

.nav-button span:nth-of-type(3) {
	bottom: 0;
}

.active .nav-button span:nth-of-type(1) {
	transform: translateY(12px) rotate(-45deg);
	background-color: #0f5091;
}

.active .nav-button span:nth-of-type(2) {
	opacity: 0;
}

.active .nav-button span:nth-of-type(3) {
	background-color: #0f5091;
	transform: translateY(-12px) rotate(45deg);
}







#header_sp{
	height:60vh;
	padding:100px 0px 0px 0px;
	margin:0px;
	max-width:100%;
	z-index:0;
	background:url(../img/sp_header.jpg) no-repeat bottom center;
	background-size:100% auto;
}







.l-home__hero .copy{top:10%;}
.l-home__hero .logo{top:13%;}
.l-home__hero .logo img{ width:80%; height:auto;}
.l-home__hero .statement{ padding:8% 0px;}
.l-home__hero .statement h2{font-size:1.6rem; padding-bottom:2%;}
.l-home__hero .statement h3{font-size:1.3rem; padding-bottom:2%;}
.l-home__hero .statement p{font-size:0.8rem;}





#acc_area{
	width:100%;
	margin:5% auto 10%;
	padding:4% 0px 0px;
}

.acc_area_bg{
	background:url(../img/acc_title_bg.jpg) top left no-repeat #3892ed;
	background-size:70% auto;
	margin:0px;
	padding:8% 3% 3%;
}


#acc_area dl{
	margin:0px;
	padding:0px;
	display:block;
	clear:both;
}
#acc_area dt,#acc_area dd{
	width:100%;
	max-width:100%;
	display:block;
	clear:both;
	margin:2% 0px;
	padding:0px;
}



.item_list li{
	display: inline-block;
	vertical-align: middle;
	padding:0px;
	margin:0px 3.5% 2%;
	width:35%;
	text-align:center;
}
.item_list li img{
	width: 100%;
	height: auto;
	border-radius:400px;
	transition-duration: 0.5s;
	margin-bottom:3%;
}



#works{
	margin:-10% auto 10%;
	padding:20% 0% 3%;
}
#works h3 {
  padding: 0.2rem;
  margin-bottom:1%;
}

#works dl{
	margin:0px;
	padding:0px;
	display:block;
	clear:both;
}
#works dt{
	width:100%;
	max-width:100%;
	display:block;
	clear:both;
	margin:0px;
	padding:0px;
}
#works dd{
	width:90%;
	display:block;
	clear:both;
	background:rgba(240, 240, 240,0.75);
	border:10px solid #fff;
	text-align:center;
	margin:1% 0px;
	padding:3% 2%;
}




#facility{
	padding-top:13%;
	width:96%;

}
#facility dt{
	margin:1% 0px;
	width:100%;
	display:block;
	clear:both;
}
#facility dd{
	width:100%;
	display:block;
	margin:1% 0px;
	padding:0px;
	clear:both;
}



.eco_area_bg1{
	background:url(../img/eco_title_bg.jpg) top left no-repeat #32b16c;
	background-size:35% auto;
	margin:0px;
	padding:8% 3% 3%;
}
.eco_area_bg1 dl{
	margin:0px;
	padding:0px;
	display:block;
}

.eco_area_bg1 dt{
	width:100%;
	display:block;
	margin:2% 0px;
	padding:0px;
}
.eco_area_bg1 dd{
	width:100%;
	display:block;
	margin:2% 0px;
	padding:0px;
	clear:both;
}
.eco_flow img{
	width:96%;
	max-width:96%;
}


.eco_area_bg2{
	background:#32b16c;
	margin:5% auto 10%;
	padding:5% 3%;
}

.eco_area_bg2 dl{
	margin:0px;
	padding:0px;
	display:block;
}

.eco_area_bg2 dt{
	margin:0px;
	padding: 0px;
	position: relative;
	clear:both;
}
.eco_area_bg2 dt img{
	width:100%;
	max-width:100%;
}
.eco_area_bg2 dd{
	width:auto;
	max-width:100%;
	margin:0px;
	padding: 0px;
	color:#fff;
	clear:both;
}
.eco_area_bg2 dd p{
	margin:4% auto;
}



.company{
	padding-top:5%;
}
#company p{
	margin-top:-10px;
}
.company_area{
	width:90%;
	background:#fff;
	border-radius:10px;
	padding:2%;
	margin:5% auto 5%;
}
.company_area dl{
	margin:0px;
	padding:0px;
}
.company_area dt{
	background:#eee;
	text-align:center;
	display:block;
	width:100%;
	margin:0px;
	padding:0px;
}
.company_area dd{
	display:block;
	width:100%;
	text-align:center;
	margin:0px 0px 4%;
	padding:0px;
}

.pdf_btn{
	width:80%;
}


#contact {
	max-width:96%;
	margin:15% auto 5%;
	padding:0px;
}
.contact_table th {
    display: block;
    width: 100%;
	background:rgba(240, 240, 240,0.75);
	padding:2% 0px;
}
.contact_table td {
    display: block;
    width: 100%;
	text-align:center;
	padding:5% 0px;
}

}