@charset "UTF-8";
/* COMMON CSS Document */
.content{margin:0 auto; max-width:980px; width:100%; padding:0 10px;}
.sp{display: none;}

/*HEADER
====================================*/
header {background: white;}

header h1{line-height: 1; max-width: 960px; width: 100%; margin: 0 auto; text-align: center;}
/*
header .wrapH{background: #45cdff;}
header h1{line-height: 1; height: 250px; max-width: 960px; width: 100%; margin: 0 auto;}
header h1 a{position: relative; display: block;}
header h1 a:hover{opacity: 1;}
header figure{float: right; width: 39.6%;}

header h1 img{position: absolute; top: 0; left: 0; width: 100%;}
header h1 .slide1{animation:fade 8s infinite; -webkit-animation:fade 8s infinite;}
header h1 .slide2{animation:fade2 8s infinite; -webkit-animation:fade2 8s infinite;}
header h1 .slide3{animation:fade3 8s infinite; -webkit-animation:fade3 8s infinite;}

@keyframes fade
{
  0%   {opacity:1}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade2
{
  0%   {opacity:0}
  33.333% { opacity: 1}
  66.666% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
}
*/

/*NAVIGATION
====================================*/
#gnav{border-bottom: 1px solid #d7d7d7; background: #fff;}
#gnav li{float: left; line-height: 1; text-align: center; position: relative; height: 100%; display: table;font-size: 12px;}
#gnav li:nth-of-type(1){width: 8%;}
#gnav li:nth-of-type(2){width: 9%;}
#gnav li:nth-of-type(3){width: 10%;}
#gnav li:nth-of-type(4){width: 11%;}
#gnav li:nth-of-type(5){width: 11%;}
#gnav li:nth-of-type(6){width: 13%;}
#gnav li:nth-of-type(7){width: 12%;}
#gnav li:nth-of-type(8){
	width: 12%;
	background-color: #E5D8F6; 
}
#gnav li:nth-of-type(9){
	width: 14%;
	background-color: #E5D8F6; 
}
#gnav li:nth-of-type(6):after {
    background-color: white!important;
}
#gnav li:nth-of-type(7):after {
    background-color: orange!important;
}

/*
#gnav li:last-of-type{
	width: 13%;
	float: right;
	background: url(../../images/common/btn_login.jpg) center center no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	background: #f39100;
}
*/



/*#gnav li:last-of-type a{font-size: 11px; color: #fff;}*/
#gnav li:nth-of-type(8) a{font-size: 11px;}
#gnav li:nth-of-type(9) a{font-size: 11px;}

#gnav li:last-of-type:after, 
#gnav li:nth-of-type(8):after{display: none;}
#gnav li:nth-of-type(9):after{display: none;}

#gnav li:last-of-type span{font-size: 10px;}
#gnav li:after{content: ''; display: block; height: 14px; width: 1px; background: #e5e5e5; position: absolute; top: 50%; right: 0;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}
/*#gnav li:nth-of-type(3)::before{content: 'New'; position: absolute; top: 0; right: 0; font-size: 7px; background: #bc001c; color: #fff; padding: 2px 4px;}*/

#gnav li a{text-align: center; position: relative; padding: 11px 0; display: table-cell; vertical-align: middle; position: relative; height: 52px !important;}
#gnav li a:before{content: ''; width: 0%; height: 3px; background: #000000; position: absolute; top: 0; left: 50%; transition: all .3s linear;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	
} 
/*
#gnav li:nth-of-type(1) a.active:before,#gnav li:nth-of-type(1) a:hover:before{width: 38%;}
#gnav li:nth-of-type(2) a.active:before,#gnav li:nth-of-type(2) a:hover:before{width: 65%;}
#gnav li:nth-of-type(2) a.active:before,#gnav li:nth-of-type(3) a:hover:before{width: 75%;}
#gnav li:nth-of-type(4) a.active:before,#gnav li:nth-of-type(4) a:hover:before{width: 62%;}
#gnav li:nth-of-type(5) a.active:before,#gnav li:nth-of-type(5) a:hover:before{width: 50%;}
#gnav li:nth-of-type(6) a.active:before,#gnav li:nth-of-type(6) a:hover:before{width: 70%;}
#gnav li:nth-of-type(7) a.active:before,#gnav li:nth-of-type(7) a:hover:before{width: 67%;}
*/
#gnav li a.active:before,#gnav li a:hover:before{width: 50%; right: 0;}
#gnav li:last-of-type a.active:before,
#gnav li:last-of-type a:hover:before,
#gnav li:nth-of-type(8) a:hover:before{width: 0%;}
#gnav li:nth-of-type(9) a:hover:before{width: 0%;}

#gnav li a.active:hover{opacity: 1;}
#gnav li span{display:block; padding:5px 0 0 0;}
/*#gnav li:nth-of-type(2) span{font-size:12px;}*/


/*MAIN CONTENT
====================================*/
a{transition: all .3s linear;}
a:hover{opacity: 0.5;}
a[href^="tel:"]{pointer-events:none;}

#boxTit{background: #f3f3f3; padding: 30px 0;}
#boxTit h2{font-size: 28px; line-height: 1; margin:0 auto; max-width:980px; width:100%; padding:0 10px;}
h3{font-size: 22px; font-weight: bold; color: #00b0cc; position: relative; padding: 0 0 0 20px; margin: 0 0 13px;}
h3 span {color:#000000; font-weight:normal;}
h3:before{content: ''; display: block; width: 4px; height: 20px; background: #00b0cc; position: absolute; left: 0; top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}
.i-block{display: inline-block;}
.cap10{font-size: 10px;}

/*FOOTER
===================================*/
footer{padding: 100px 0 20px; text-align: center; position: relative;}
footer #flogo{margin: 0 auto 60px;}
footer #fBtn{font-size: 18px; color: #fff; text-align: center; margin: 0 auto 50px; display: block; line-height: 1; padding: 15px 0;
	background-color: #0058a4;	border-radius: 5px;	position: relative; width: 100%; max-width: 500px;}
footer .copyR{font-size: 12px;}

#page-top{cursor: pointer; position: fixed; right: 40px; bottom: 40px; z-index: 8000;}


/*===============================
             MEDIA
================================*/
@media only screen and (max-width:980px){
	#gnav li a{font-size: 1.5vw;}
	.btnSMF { 
	    background: linear-gradient(to bottom, #f7bb34, #dd7f22);
		display:inline-block;
	}
	.btnMyp { 
	    background: linear-gradient(to bottom, #58a8d1, #618090);
		display:inline-block;
	}
	#sponsor {
	    padding: 0px ! important;
	}
}
@media only screen and (min-width:981px){
	.btnSMF, .btnMyp { display:none ! important;}
}
    
@media only screen and (max-width:750px){
	.content{padding: 0 5.3%;}
	.pc{display: none;}
	.sp{display: block; line-height: 0;}
	a[href^="tel:"]{pointer-events:auto;}  

/*	header{position: relative;}
	header .wrapH{padding:0;}
	header .wrapH:before,header .wrapH:after{display: none;}
	header .wrapH .content{padding: 0;}
    header h1{height: 73.333333vw;}
*/
    header figure{width: 100%; float: none;}
    
    
	.btnMenuSP span{position: absolute; top: 0; right: 0; z-index: 9999; display: block; width: 13vw; height: 13vw; background: url(../img/btnMenu.jpg) no-repeat center center; background-size: cover;}
	.btnMenuSP span.active{position: fixed; background: url(../img/btnClose.jpg) no-repeat center center; background-size: cover;}

	#gnav{display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #f7f7f7; border-bottom: none; z-index: 9998;}
	#gnav li{width: 100%!important;}
	#gnav li:first-of-type{margin: 16vw 0 0;}
	#gnav li:after{display: none;}
	#gnav li span{padding:0.5em 0 0 0;}
	#gnav li a{font-size: 4vw!important; padding:4.5vw 0; display: block; border-bottom: 1px solid #e5e5e5; height: auto!important;}
	#gnav li a:before{display: none;}
	#gnav li a.active,#gnav li a:hover{color: #00b0cc;}
	
	#gnav #listsp li{float: left; width: 49%!important; margin: 6.8vw 2% 0 0;}
	#gnav #listsp li:last-of-type{margin: 6.8vw 0 0 0;}
	#gnav #listsp li a{position: relative; display: block; color: #fff; border-bottom: none; padding:0; font-size: 2.5vw;}
	#gnav #listsp li p.txt{
		display: block; width: 100%; position: absolute; top: 50%; left: 0; text-align: center;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	#gnav #listsp li p.txt span:nth-of-type(2){padding:0; font-size: 2.5vw;}
	#gnav #listsp li .tit{font-size: 4vw; font-weight: bold; display: block; padding: 0 0 2vw;}

	#boxTit h2{padding: 0 5.3%;}
	h3{line-height: 1.3; padding: 0 0 0 15px;}
	h3:before{height: 100%;}

	#page-top{display: none!important;}
}

@media only screen and (max-width:480px){
	#gnav li:first-of-type{margin: 60px 0 0;}

	#boxTit{padding: 7vw 0; margin: 0 auto 30px!important;}
	#boxTit h2{font-size: 6vw;}
	h3{font-size: 18px;}
	h3 span{font-size: 12px;}

	footer{padding: 50px 0 20px;}
	footer #flogo,footer #fBtn{margin: 0 auto 30px;}
	footer #fBtn{font-size: 14px;}
	footer .copyR{font-size: 2.2vw;}
}