@charset "utf-8";

/*------------------------------------------
reset
------------------------------------------*/
	*{
		margin: 0;
		padding: 0;
	}

	p,div,ul,h1,h2,h3{
		margin: 0;
		padding: 0;
	}

	ul,ol,li{
		list-style: none;
	}

	a{
		text-decoration: none;
		color: #000000;
	}
	
/*------------------------------------------
common parts
------------------------------------------*/
	.clearfix:after{
		display: block;
		clear: both;
		height: 0px;
		visibility: hidden;
		overflow: hidden;
		line-height: 0;
		content: ".";
	}

	.al-cent{
		text-align: center;
	}

	.al-right{
		text-align: right;
	}
	
	.mb0{
		margin-bottom: 0 !important;
	}
	
	
	.bg-gray{
		background-color: #eeeeee;
	}

/*------------------------------------------
common
------------------------------------------*/
@media print, screen and (min-width: 768px){
	body{
		font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		font-size: 100%; /* 16px */
		color: #000000;
		background-color: #ffffff;
		margin: 0;
		padding: 0;
		line-height: 1.8;
	}

	#header{
		position: relative;
		width: 100%;
		max-width: 1060px;
		height: 84px;
		margin: 0 auto;
	}

	#header h1{
		width: 20.283%;
		max-width: 215px;
		line-height: 84px;
		float: left;
	}

	#nav-area{
		width: 37.7358%;
		max-width: 400px;
		line-height: 40px;
		padding: 20px 0 0 18.8679%;
		float: left;
	}

	#nav-area ul li{
		width: 25%;
		max-width: 100px;
		text-align: center;
		float: left;
	}
	
	#nav-area ul li a{
		color: #000000 !important;
	}
	
	#nav-area .act{
		border-bottom: solid 5px #00b7ee;
	}
	
	#nav-area .nag{
		border-bottom: solid 5px #dcdcdc;
		 transition: all 800ms 0s ease;
	}
	
	#nav-area .nag:hover{
		border-bottom: solid 5px #00b7ee;
	}
	
	#header #h-contact{
		width: 23.1132%;
		max-width: 245px;
		float: left;
	}
	
	#header #h-contact img{
		position: absolute;
		right: 5%;
		top: 3%;
		width: 100%;
		max-width: 230px;
	}
	
	#header #h-contact p:nth-child(1){
		width: 100%;
		max-width: 245px;
	}

	#header #h-contact p:nth-child(2){
		max-width: 175px;
		background: url(../images/icon_tel_s.png) 8% 43% no-repeat;
		margin: 0 auto;
	}

	#header #h-contact p:nth-child(3){
		max-width: 175px;
		background: url(../images/icon_fax_s.png) 7% 43% no-repeat;
		margin: 0 auto;
	}
	
	#header #h-contact span{
		padding-left: 15px;
	}
		
	.inner{
		width: 100%;
		max-width: 1060px !important;
		margin: 0 auto 30px auto;
	}
	
	#footer-area{
		background-color: #808181;
		color: #ffffff;
	}
	
	#footer{
		width: 100%;
		max-width: 1060px;
		margin: 0 auto;
	}

	#footer-l{
		width: 50%;
		max-width: 530px;
		float: left;
	}
	
	#footer-l img{
		padding: 10px 0;
	}

	#footer-r{
		width: 50%;
		max-width: 530px;
		padding-top: 13px;
		float: right;
		text-align: center;
	}
	
	#footer-r img{
		width: 100%;
		max-width: 435px;
	}
	
	#pagetop{
		width: 100%;
		max-width: 1060px;
		text-align: right;
		margin: 0 auto;
		padding: 10px 0;
	}
	
	#pagetop a{
		border-bottom: 1px solid #000000;
	}
	
	#pagetop a:hover{
		border-bottom: 1px dotted #000000;
	}
	/* display none */
	#sp-header,
	#sp-copyright{
		display: none;
	}
}	
/*------------------------------------------
common sp
------------------------------------------*/
@media only screen and (max-width: 767px){
	body{
		font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		font-size: 14px;
		color: #000000;
		background-color: #ffffff;
		margin: 0;
		padding: 0;
		line-height: 1.8;
	}
	
	#sp-header{
		width: 100%;
		margin: 0 auto;
	}
	
	#sp-header h1{
		padding: 7px 0 0 5px;;
	}
	
	/* ハンバーガーアイコン & 動作 */
	.sp-nav-btn{
		width: 30px;
		height: 30px;
		display: block;
		position: absolute;
		top: 10px;
		left: -5px;
		margin: auto 0 auto 90%;;
		z-index: 9999;
		border: solid 1px #00479d;
	}
	
	.sp-nav-btn i{
		display: block;
		width: 20px;
		height: 2px;
		border-radius: 3px;
		background: #00479d;
		-webkit-transition: background 0.5s;
		transition: background 0.5s;
		position: relative;
		left: 5px;
		top: 14px;
	}
	
	.sp-nav-btn i:before,
	.sp-nav-btn i:after{
		content: "";
		display: block;
		width: 20px;
		height: 2px;
		border-radius: 3px;
		background: #00479d;
		position: absolute;
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: all 0.3s !important;
		transition: all 0.3s !important;
	}
	
	.sp-nav-btn i:before{
		-webkit-transform: translateY(8px);
		-ms-transform: translateY(8px);
		transform: translateY(8px);
	}
	
	.sp-nav-btn i:after{
		-webkit-transform: translateY(-8px);
		-ms-transform: translateY(-8px);
		transform: translateY(-8px);
	}
	
	.is-open{
		position: fixed;
		z-index: 9999;
	}
	
	.is-open i{
		background: #ffffff;
	}
	
	.is-open i:after{
		-webkit-transform: translateY(0px) rotate(-45deg);
		-ms-transform: translateY(0px) rotate(-45deg);
		transform: translateY(0px) rotate(-45deg);
	}
	
	.is-open i:before{
		-webkit-transform: translateY(0px) rotate(45deg);
		-ms-transform: translateY(0px) rotate(45deg);
		transform: translateY(0px) rotate(45deg);
	}
	
	/* アコーディオンメニュー */
	#sp-nav{
		display: none;
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9998;
		overflow: auto;
		background-color: rgba(255,255,255,0.9);
	}
	
	#sp-nav > ul{
		width: 100%;
		padding-top: 70px;
		background-color: rgba(255,255,255,0.9);
	}
	
	#sp-nav > ul > li{
		font-size: 100%;
		text-align: left;
		border-bottom: dotted 1px #000000;
		margin: 0 auto;
		padding: 20px 60px;
		text-align: center;
	}
	
	#sp-nav > ul > li:last-child{
		margin: 0 auto;
		border: none;
	}
	
	#sp-nav > ul > li:last-child img{
		margin-top: 10px;
	}
	
	#sp-nav ul li a:link{
		display: block;
		width: 100%;
		color: #000000;
		text-decoration: none;
		background: transparent;
	}

	#sp-nav ul li a:visited{
		color: #000000;
		text-decoration: none;
		background: transparent;
	}
	
	#sp-nav ul li a:hover{
		color: #000000;
		text-decoration: none;
		background: transparent;
	}
	
	#sp-nav #sp-contact{
		width: 65%;
		margin: 20px auto 0 auto;
		border: 1px solid #000000;
		padding: 5px;
	}

	#sp-nav #txt {
		text-align: center;
	}

	#sp-nav #tel {
		margin: 20px auto 0 auto;
		text-align: center;
	}
	
	#sp-nav #fax {
		margin: 10px auto 0 auto;
		text-align: center;
	}
	
	.inner{
		width: 100%;
		margin: 0 auto;
		padding: 5px;
		box-sizing: border-box;
	}
	
	#footer-area{
		background-color: #808181;
		color: #ffffff;
	}
	
	#sp-copyright{
		font-size: 78.5714%;
		padding: 5px 0;
		text-align: center;
	}
	
	#copyright{
		font-family: Verdana, "Droid Sans";
	}
	
	/* display none */
	#header,
	#footer,
	#pagetop{
		display: none;
	}
}