@charset "utf-8";

/* common
----------------------------------*/
.sp{display: none;}
.sp2{display: none;}
.sp_ib{display: none;}


@media screen and (max-width: 768px) {
	.pc{display: none;}
	.sp{display: block;}
	.sp_ib{display: inline-block;}


}

@media screen and (max-width: 374px) {
	.sp2{display: block;}
}



/* ---------------------------
	Header
--------------------------- */

header{
  width: 100%;
	height: 65px;
}
header>div{
	margin: 0 auto;
}
header h1{
	float: left;
	margin: 20px;
	width: 141px;
}
header h1.reg{
	display: block;
}
header h1.open{
	display: none;
}

header div.globalNav{
	float: right;
}
header div.globalNav{
	overflow: hidden;
	margin: 20px;
}
header div.globalNav li{
	float: left;
}
header div.globalNav li~li{
	margin-left: 2em;
}

header div.globalNav li a{
	display: block;
	font-size: 13px;
}
header #spHeader,
header #ddMenu{
	display: none;
}



/* ---------------------------
	footer
--------------------------- */
footer{
	padding: 0;
	overflow: hidden;
	position: absolute;
	z-index: 100;
	bottom: 0;
	height: 170px;
	width: 100%;

	border-top: 1px dotted #bbbcbe;
}

footer .copyright{
	font-size: 11px;
	float: right;
	letter-spacing: 0.2em;
	color: #999;
	padding: 0 20px;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
}

div.footerMenu{
	height: 85px;
}
div.footerMenu ul{
	padding-top: 30px;
	overflow: hidden;
	letter-spacing: -0.4em;
	text-align: center;
}
div.footerMenu ul li{
	display: inline-block;
	letter-spacing: normal;
	padding: 0 1em;
}
div.footerMenu ul li a{
	line-height: 1;
	display: block;
}

div.crBox{
	background: #f00;
	overflow: hidden;
	height: 85px;
}

div.crBox>div{
	width: 730px;
	margin: 0 auto;
}

div.crBox .flogo{
	float: left;
	width: 104px;
	padding-top: 30px;
}

div.crBox .copyright{
	float: right;
	line-height: 85px;
	color: #fff;
	font-size: 15px;
}


#pageTop {
  display: block;
  margin: 0;
  right: 20px;
  bottom:-200px;
  position: fixed;
  z-index: 999;
}
#pageTop a {
  display: block;
  width: 50px;
  height: 50px;
	background: #fff;
	border-radius: 50px;
}
#pageTop a img{
transition: 0.3s all;
}
#pageTop a:hover img{
	opacity: 0.5;
}

/*---------------------------------------------------------------*/

@media screen and (max-width: 768px) {

	header{
	  width: 100%;
		height: 47px;
		position: fixed;
		z-index: 999;
		top: 0;
	}
	header>div{
		max-width: 100%;
	}

	header #spHeader{
		display: block;
	  width: 100%;
		height: 47px;
		background: #fff;
		transition: 0.3s all;
	}
	header.startSc #spHeader{
		box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.1);
		-moz-box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.1);
		-webkit-box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.1);
	}


	header.active #spHeader{
		background: #f00;
	}

	header h1{
		width: 67px;
		padding: 16px 13px;
		margin: 0;
		line-height: 1;
	}
	header.active h1.reg{
		display: none;
	}
	header.active h1.open{
		display: block;
	}

	header div.globalNav{
		display: none;
	}






	header #menuBtn{
		display: block;
		position: absolute;
		z-index: 200;
		right: 0;
		top: 0;
	}

	header #menuBtn a{
		display: block;
		width: 44px;
		height: 47px;
		text-align: center;
		position: relative;
		cursor: pointer;
		transition: all 0.3s;
	}
	header #menuBtn span{
		position: absolute;
		display: block;
		width: 16px;
		height: 2px;
		background: #000;
		transition: all 0.3s;
	}
	header #menuBtn span:nth-child(1){
		top: 17px;
		left: 14px;
	}
	header #menuBtn span:nth-child(2){
		top: 24px;
		left: 14px;
	}
	header #menuBtn span:nth-child(3){
		top: 31px;
		left: 14px;
	}

	header #menuBtn.active span{
		width: 20px;
		background: #fff;
	}
	header #menuBtn.active span:nth-child(1){
		transform: rotate(45deg);
		top: 24px;
		left: 12px;
	}

	header #menuBtn.active span:nth-child(2){
		opacity: 0;
	}
	header #menuBtn.active span:nth-child(3){
		top: 24px;
		left: 12px;
		transform: rotate(-45deg);
	}

	header #ddMenu{
		height: calc(100vh - 47px);
		width: 100vw;
		background: #fff;
		overflow-y: scroll;
		margin-top: 100vh;
	}
	header #ddMenu.open{
		display: block;
		margin-left: 0;
		margin-top: 0;
	}
	header #ddMenu>ul{
		padding-bottom: 60px;
	}
	header #ddMenu>ul>li>a{
		display: block;
		line-height: 40px;
		position: relative;
		font-size: 12px;
		font-weight: bold;
		padding-left: 15px;
		border-bottom: 1px solid #a6a8ab;
	}
	header #ddMenu>ul>li>a:after{
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		right: 15px;
		margin-top: -6px;
		width: 8px;
		height: 8px;
		border-top: 2px solid #595956;
		border-right: 2px solid #595956;
		transform:scaleY(0.8) rotate(45deg);
	}
	header #ddMenu>ul>li.withMenu>p{
		line-height: 40px;
		position: relative;
		font-size: 12px;
		font-weight: bold;
		padding-left: 15px;
		border-bottom: 1px solid #a6a8ab;
	}
	header #ddMenu>ul>li.withMenu>p:after{
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		right: 13px;
		margin-top: -3px;
		width: 8px;
		height: 8px;
		border-top: 2px solid #d7d7d7;
		border-right: 2px solid #d7d7d7;
		transform:scaleX(0.8) rotate(-45deg);
		transition: 0.3s all;
	}
	header #ddMenu>ul>li.withMenu.close>p:after{
		margin-top: -8px;
		transform:scaleX(0.8) rotate(135deg);
	}



	header #ddMenu ul.innerMenu{
		background: #f2f2f2;
		border-bottom: 1px solid #a6a8ab;
	}
	header #ddMenu ul.innerMenu a{
		display: block;
		color: #595956;
		line-height: 40px;
		position: relative;
		font-size: 12px;
		font-weight: bold;
		padding-left: 15px;
	}
	header #ddMenu ul.innerMenu a:after{
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		right: 15px;
		margin-top: -6px;
		width: 8px;
		height: 8px;
		border-top: 2px solid #595956;
		border-right: 2px solid #595956;
		transform:scaleY(0.8) rotate(45deg);
	}












	/* ---------------------------
		footer
	--------------------------- */
	footer{
		position:static;
		padding: 0;
		height: auto;
		width: 100%;
		border-top: none;
	}
	#HOME footer{
		border-top: 1px dotted #bbbcbe;
	}

	div.footerMenu{
		height: auto;
	}
	div.footerMenu ul{
		padding: 10px 0;
	}
	div.footerMenu ul li{
		padding: 0 5px;
	}
	div.footerMenu ul li a{
		font-size: 11px;
		padding: 5px 5px;
	}
	div.footerMenu ul li a:hover{
		text-decoration: none;
		background: #f00;
		color: #fff;
		border-radius: 5px;
	}

	div.crBox{
		background: #f00;
		overflow: hidden;
		height: 50px;
	}

	div.crBox>div{
		width: 100%;
	}

	div.crBox .flogo{
		float: left;
		width: 67px;
		padding-top: 18px;
		margin-left: 15px;
		line-height: 1;
	}

	div.crBox .copyright{
		line-height: 50px;
		font-size: 10px;
		margin-right: 0;
	}
	body.showTopBtn div.crBox .copyright{
		margin-right: 50px;
	}

	#pageTop {
	  display: block;
	  margin: 0;
	  right: 10px;
	  bottom:-200px;
	  position: fixed;
	  z-index: 999;
	}
	#pageTop a {
	  display: block;
	  width: 55px;
	  height: 55px;
		background: none;
		border-radius: 50px;
		border: 1px solid #fff;
	}
	#pageTop a:hover img{
		opacity: 1;
	}
}






@media screen and (max-width: 374px) {



}


/* sub
----------------------------------*/










/**/