@charset "utf-8";

html{
	background: #F9F8F4;	
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 100;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 200;
}

body {
  font-family: "-apple-system", "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, "メイリオ", Meiryo, "M+ 1p", sans-serif !important;
  font-size:12px !important;
  	margin:0;
	padding:0;
	-webkit-text-size-adjust: 100%;
	width:100%;
}

@media screen and (min-width: 481px) {
	/* pc */
	
	.sp{
		display:none!important;
	}
	
	.pc{
		display:block!important;
	}
	
	.wrapper{
		width: 960px;
		min-width: 960px;
		margin: 0 auto;
		/* background: #F9F8F4; */
		color:#023966;
		line-height: 0;
	}
	
	#header{
		height:78px;
		line-height: 0;
	}
	
	#headerLogo,#g_nav,#telnum{
		float:left;
	}
	
	#headerLogo{
		margin-top:22px;
		padding-right:32px;
		position:relative;
		
	}
	#headerLogo img{
		width:238px;
	}
	
	#headerLogo:after{
		position:absolute;
		top:8px;
		right:-25px;
		width:46px;
		height:46px;
		border-left:1px solid #999;
		content: "";
		display:block;
		
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	
	#telnum{
		position:relative;
		margin-top:30px;
		font-size:19px;
		font-weight:bold;
		padding-left:40px;
		display:block;
		
	}
	
	#telnum span{
		font-size:12px;
		font-weight:normal;
	}
	
	#telnum i{
		font-size:16px;
		font-weight:normal;
	}
	
	#telnum:before{
		position:absolute;
		top:0px;
		left:12px;
		width:46px;
		height:46px;
		border-left:1px solid #999;
		content: ""; 
		display:block;
		
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	
	#g_nav{
		line-height: 0;
	}
	
	
	#g_nav > ul > li{
		box-sizing:border-box;
		position:relative;
		float:left;
		
		font-size:14px;
		display:block;
		text-align:center;
		/*border-bottom:4px solid #F9F8F4;*/
		
		color:#001F3F;
		line-height: 1;
		
	}
	
	#g_nav > ul > li.select > a{
			border-bottom:4px solid #001F3F;
	}
	
	#g_nav > ul > li.selectnav > a{
			border-bottom:4px solid #001F3F;	
	}
	
	#g_nav > ul > li > a{
		display:block;
		padding-top:20px;
		width:90px;
		height:78px;
		/*padding:20px 0;*/
		color:#001F3F;
		text-decoration:none;
		cursor: default;
	}
	
	#g_nav > ul > li.cursor_link > a{
		cursor: pointer;
	}
	
	
	#g_nav > ul > li > a:hover{
		box-sizing:border-box;
		border-bottom:4px solid #001F3F;
	}
	
	#g_nav > ul > li span{
		font-size:10px;
		margin-top:10px;
		margin-bottom:20px;
		display:block;
	}
	
	#g_nav ul.submenu{
		display:none;
		
		position:absolute;
		top:78px;
		width:200px;
		font-size:12px;
		text-align:left;
		box-sizing:border-box;
		border-top:1px solid #001F3F;
		
		z-index: 1;
	}
	
	#g_nav > ul > li > ul.submenu > li{
		position:relative;
	}
	
	#g_nav > ul > li > ul.submenu > li > a{
		display:block;
		padding:10px;
		background:#FFF;
		border-bottom:1px solid #B2BDDC;
		text-decoration:none;
		color:#04447C;
	}
	
	#g_nav > ul > li > ul.submenu > li > a:hover{
		background:#CFD6E9;
		
	}
	
	#g_nav > ul > li > ul.submenu > li:before {
		font-size:18px;
		position:absolute;
		top:50%;
		right:10px;
		margin-top:-10px;
		content:"\f105";
		font-family: FontAwesome;
	}
	
	/* footer */
	#footer{
		
	}
	
	.footerline{
		width: 960px;
		margin: 0 auto;
		border-top:1px solid #E7E6E4;
		margin-top:85px;
	}
	
	/*footerAddress*/
	#footerAddress{
		color:#222;
		margin-top:30px;
		height:83px;
		background:url(../img/footer_ine.png) no-repeat 165px 0;
		
	}
	
	#footerAddress p{
		float:left;
		margin-top:25px;
	}
	
	#footerAddress p.companyName{
		position:relative;
		font-size:19px;
		height:40px;
		line-height: 40px;
		
		padding-right:50px;
		padding-left:245px;
	}
	
	#footerAddress p.companyName:after{
		position:absolute;
		top:12px;
		right:-20px;
		width:50px;
		height:50px;
		border-left:1px solid #999;
		content: ""; 
		display:block;
		
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	
	#footerAddress p.companyAddress{
		line-height:1.6;
	}
	
	.copyArea{
		width:100%;
		min-width:960px;
		background-color:#04447C;
	}
	
	.copy{
		line-height:1;
		display:block;
		min-width: 960px;
		padding:12px 0;
		text-align:center;
		color:#FFF;
	}
	
	/**/
	.scale img {
		-moz-transition: -moz-transform 0.2s linear;
		-webkit-transition: -webkit-transform 0.2s linear;
		-o-transition: -o-transform 0.2s linear;
		-ms-transition: -ms-transform 0.2s linear;
		transition: transform 0.2s linear;
	}
	.scale img:hover {
		-webkit-transform: scale(1.1);
		-moz-transform: scale(1.1);
		-o-transform: scale(1.1);
		-ms-transform: scale(1.1);
		transform: scale(1.1);
	}
	
	.alpha a:hover img{
    	opacity:0.5;
    	-moz-opacity:0.5;
    	filter:alpha(opacity = 50);
	}
	
	.pagetop{
		position: fixed;
		bottom: 60px;
		right: 30px;
		display:none;
	}
	
	.pagetop a{
		padding-top:15px;
		text-align:center;
		display:block;
		font-size:24px;
		opacity:0.9;
		width:60px;
		height:60px;
		background-color:#002040;
		color:#FFF;
	}
	
	.pagetop a:hover{
		opacity:0.5;
    	-moz-opacity:0.5;
    	filter:alpha(opacity = 50);
	}
	
	.clearfix{
    	display: inline-block;
	}

}


@media screen and (max-width: 480px) {
	/* sp */
	
	.pc{
		display:none!important;
	}
	
	.sp{
		display:block!important;
	}
	
	img {
		width:100%;
		max-width: 100%;
		height: auto;
	}
	
	.wrapper{
		width:100%;
		/*padding:0 3%;*/
	}
	
	/* header */
	#header{
		width:100%;	
	}
	
	#headerLogo{
		width:238px;
		margin:20px 0 0 3%;
		line-height:1;
		height:50px;
		
	}
	
	.menu{
		display:block;
		position:absolute;
		top:0;
		right:0;
	}
	
	.menu a{
		padding:15px 15px 0 15px;
		height:70px;
		width:60px;
		display:block;
	}
	
	.menu-trigger,.menu-trigger span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}
	
	.menu-trigger {
		position: relative;
		width: 30px;
		height: 25px;
	}
	
	.menu-trigger span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 4px;
		background-color: #000;
		border-radius: 2px;
	}
	.menu-trigger span:nth-of-type(1) {
		top: 0;
	}
	.menu-trigger span:nth-of-type(2) {
		top: 10px;
	}
	.menu-trigger span:nth-of-type(3) {
		bottom: 0;
	}
	
	.menu-trigger::after {
		position: absolute;
		left: 0;
		bottom: -15px;
		content: 'MENU';
		display: block;
		width: 100%;
		color: #000;
		font-size: 9px;
		text-decoration: none;
		text-align: center;
		transition: all .4s;
	}

	/* active */
	.menu-trigger.active::after {
		content: 'CLOSE';
		bottom: -15px;
	}
	.menu-trigger.active span:nth-of-type(1) {
		-webkit-transform: translateY(15px) rotate(-45deg);
		transform: translateY(15px) rotate(-45deg);
		top:-4px;
	}
	.menu-trigger.active span:nth-of-type(2) {
		opacity: 0;
	}
	.menu-trigger.active span:nth-of-type(3) {
		-webkit-transform: translateY(-15px) rotate(45deg);
		transform: translateY(-15px) rotate(45deg);
		bottom: -5px;
		
	}
	
	/* nav */
	#g_nav{
		display:none;
		line-height:1;
		width:100%;
	}
	#g_nav ul{
		width:100%;
		
	}
	
	#g_nav ul li{
		position:relative;
		font-size:14px;
		text-align:left;
	}
	
	#g_nav ul li span{
		font-size:12px;
		margin-left:10px;
	}
	
	#g_nav > ul > li:before {
		position:absolute;
		top:50%;
		right:10px;
		margin-top:-10px;
		content:"\f105";
		font-family: FontAwesome;
	}
	
	#g_nav ul li a{
		text-decoration:none;
		color:#000;
		padding:10px 0 10px 15px;
		/*background-color:#DDD;*/
		background-color:#B2BCC5;
		width:100%;
		display:block;
		border-bottom:1px solid #999;
	}
	
	#g_nav ul li.subnav{
		font-size:14px;
		text-align:center;
	}
	
	#g_nav ul li.subnav a{
		text-decoration:none;
		color:#000;
		padding:8px 0;
		background-color:#B2BCC5;
		width:100%;
		display:block;
	}
	
	#g_nav ul li.subnav span{
		font-size:12px;
		margin-left:10px;
	}
	
	#g_nav ul.submenu li{
		position:relative;
	}
	
	#g_nav ul.submenu li a{
		width:100%;
		display:block;
		padding:10px 0 10px 15px;
		font-size:12px;
		
		background-color:#EEE;
		
		text-align:left;
		border-bottom:1px solid #B2BCC5;
	}
	
	#g_nav > ul > li > ul.submenu > li:before {
		position:absolute;
		top:50%;
		right:10px;
		margin-top:-10px;
		content:"\f105";
		font-family: FontAwesome;
	}
	
	/* telnum */
	#telnum{
		width:100%;
		background-color:#EBE9E3;
		height:40px;
		line-height:40px;
		font-size:16px;
		font-weight:bold;
		color:#002040;
		text-align:center;
	}
	
	#telnum span{
		font-size:12px;
	}
	
	#telnum:before {
		content:"お問い合わせ　";
		font-size:14px;
	}
	
	
	/* footer */
	#footer{
		
	}
	
	.footerline{
		border-top:1px solid #E7E6E4;
		margin:40px 3% 0 3%;
		
	}
	
	/*footerAddress*/
	
	#footerAddressBox{
		
		width:100%;
		display:block;
		
		line-height:0;
		padding:30px 3% 0 3%;
	}
	
	#footerAddress{
		width:100%;
		margin: 0 auto;
		padding-left:30%;
		min-height:80px;
		
		background:url(../img/footer_ine.png) no-repeat;
		background-position:3% bottom;
		background-size:80px 83px;
		
		
	}
	
	#footerAddress p{
		
	}
	
	#footerAddress p.companyName{	
		font-size:16px;
		line-height:1;
		padding-bottom:5px;
	
	}
	
	#footerAddress p.companyAddress{
		line-height:1.6;
		font-size:11px;
	}
	
	#footerAddress p span{
		display:block;
	}

	.copyArea{
		display:block;
		line-height:1;
		padding:12px 0;
		background-color:#04447C;
		text-align:center;
		color:#FFF;
		font-size:10px;
	}
	
	.pagetop{
		position: fixed;
		bottom: 36px;
		right: 10px;
		display:none;
	}
	
	.pagetop a{
		padding-top:12px;
		text-align:center;
		display:block;
		font-size:12px;
		opacity:0.9;
		width:40px;
		height:40px;
		background-color:#002040;
		color:#FFF;
	}
	
	.pagetop a:hover{
		opacity:0.5;
    	-moz-opacity:0.5;
    	filter:alpha(opacity = 50);
	}
	
	.clearfix{
    	display: block;
	}

}