.wrapper { width: 100%; position: relative; }
.conts_wrap { max-width: 1300px; min-width: 960px; width: 90%; margin: 0 auto; position: relative; }
.conts_wrap_l { max-width: 1000px; width: 90%; margin: 0 auto; position: relative; }
.conts_wrap_m { max-width: 700px; width: 90%; margin: 0 auto; position: relative; }
.conts_wrap_s { max-width: 600px; width: 80%; margin: 0 auto; position: relative; }


.conts_main { padding-top: 180px; }

header { width: 100%; padding-top: 2rem; position: absolute; top:0; left:0; z-index: 99;}
header .logo { float: left; margin-left: 50px; }

#gNavi { float: right; margin-right: 1rem; }
#gNavi li { color: #DD4B3A; line-height: 180%; font-weight: bold;  margin-right: 2rem; display: inline-block; padding-bottom: 3px;letter-spacing: .05em; }
#gNavi li.here { background: url(../img/line-red.png) no-repeat left bottom; }
#gNavi li:not(.here):hover { background: url(../img/line-red.png) no-repeat left bottom; 
-moz-animation-name: line;
-moz-animation-duration: .2s;

-webkit-animation-name: line;
-webkit-animation-duration: .1s;

-o-animation-name: line;
-o-animation-duration: .1s;

-ms-animation-name: line;
-ms-animation-duration: .1s;

animation-name: line;
animation-duration: .1s;

}
@-webkit-keyframes line {
	0% {  background-size: 0px 12px; }
	50% {  background-size: 50px 12px;  }
	100%{  background-size: 100px 12px; }
}
@keyframes line {
	0% {  background-size: 0px 12px; }
	50% {  background-size: 50px 12px;  }
	100%{  background-size: 100px 12px; }
}


@media screen and (max-width:767px){
	.conts_wrap { min-width: 0; }
	.conts_main { padding-top: 130px; }

	header .logo { width: 150px; height: 23.3px;  float: none; margin:0 auto; }
	#gNavi { font-size: .8rem; float: none; margin: 1rem auto; text-align: center;}
	#gNavi li { margin-right: .8rem; } 
	#gNavi li:nth-child(3) { margin-right: 0;  }
	#gNavi li:last-child { position: absolute; top: 1.5rem; right: 5%;  background: none; margin-right: 0; width: 30px; heignt: 30px; background: #FFF; border-radius: 5px; padding: 8px 5px;}
	#gNavi li:last-child a { width: 20px; height: 15px; background: url(../img/mail.png) no-repeat top left; background-size: 100% 100%; display:block; text-indent: 100%; overflow:hidden; white-space: nowrap; }
	#gNavi li:last-child a:before { content:''; }
	#gNavi li:last-child:hover { background: none; }
}

/*footer*/
footer { width: 100%; text-align: center; margin-top: 50px; background: url(../img/bg_footer.png) no-repeat center 350px;  background-size: 100% auto; margin-top: 150px;}
footer .wooden_board_l { height: 450px; background: url(../img/footer_board.png) no-repeat top center; background-size: 100% 100%; padding-top: 75px; }

@media screen and (max-width:1000px){
	footer { margin-top: 100px; }
	footer .wooden_board_l { padding-top: 8%; }
}
footer .wooden_board_l .contact_info { width: 80%; margin: 0 auto; background: url(../img/footer_board_paper.png) no-repeat top center; background-size: 100% 100%; position: relative; }
footer .wooden_board_l .contact_info:before,
footer .wooden_board_l .contact_info:after  { content:''; width:15px; height: 15px; position: absolute; top: 10px; background-repeat: no-repeat; background-size: 100% 100%; background-position: center center; z-index: 10; }
footer .wooden_board_l .contact_info:before { background-image: url(../img/pin1.jpg); left: 10px; }
footer .wooden_board_l .contact_info:after  { background-image: url(../img/pin2.jpg); right: 10px; }


footer .wooden_board_l .contact_info + p { width: 60%; margin: 40px auto 0; text-align: left; }
footer .logo { margin: 50px auto; }
footer .copyright { font-size: .7rem; margin-bottom: 30px; }


@media screen and (max-width:767px){
	footer .wooden_board_l { width: 100%!important; height: auto; padding: 10% 0; background: url(../img/footer_board_sp.png) repeat-x top center; background-size: auto 100%; }
	footer .wooden_board_l .contact_info { width: 90%; background: #FFF; }
	footer .wooden_board_l .contact_info + p { width: 90%; margin: 0 auto; padding: 0 10% 2em; background: #FFF; }

}