@charset "utf-8";
/* CSS Document */
/*------------------------------------------------------

	COMMON

------------------------------------------------------*/
*{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
html{
	font-size:62.5%;
	height:100%;
	
	
}
body{

	background-color:#fff;
	line-height:1.75;
	-webkit-text-size-adjust:100%;
	font-family:/*"Robot",*/ "FP-ヒラギノ角ゴ ProN W3","FP-HiraKakuProN-W3","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",sans-serif;
	
	
	font-size: 14px;  font-size: 1.4rem;
	color:#fff;
	font-weight:normal;
	letter-spacing:0.1rem;

}

body.no-scroll {
    overflow: hidden;
}

.wrapperTop{padding-bottom:30px;color:#000;}
.wrapper{background-color:#fff;padding-bottom:30px;color:#000;}
.wrapper a{color:#fff;}
.wrapper a:hover{color:#999;}

a{
	color:#fff;
	
			    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all  0.2s ease;
		
}
a:hover{
	color:#cb880f;
}
a:hover img{
	filter: alpha(opacity=60);
	-moz-opacity:0.6;
	opacity:0.6;
	/*
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all  0.2s ease;
	*/
}




@font-face {
	font-family: "iconFont";
	src: url("../asset/fonts/iconFont.eot?#iefix") format("eot");
	src:url("../asset/fonts/iconFont.woff") format("woff"),
	url("../asset/fonst/iconFont.ttf")  format("truetype"),
	url("../asset/fonts/iconFont.otf")  format("opentype");
}

@font-face {
	font-family: 'FontAwesome';
	src: url('../asset/fonts/fontawesome-webfont.eot?v=4.5.0');
	src: url('../asset/fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../asset/fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../asset/fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../asset/fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../asset/fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-caret-right::before {
    content: "\f0da";
    display: block;
    margin-top: -10px;
}
.fa-angle-double-right:before {
  content: "\f101";
}

.fa-angle-double-down:before {
  content: "\f103";
}

.fa-play:before {
  content: "\f04b";
}

.fa-th-list:before {
  content: "\f00b";
}

.subtitle	{
	margin:0 auto;
	
	text-align:center;
	
	font-weight:600;
	font-size:24px;
	letter-spacing:0.1rem;
	color:#cb880f;
	}
	
	.subtitlej	{
	margin:0 auto;
	text-align:center;
    line-height:30px;
	font-weight:600;
	font-size:23px;
	letter-spacing:0.2rem;
	color:#cb880f;
	}


.caption{margin:25px auto;text-align:center;}

.onlypc{display:none;}




@media only screen and (min-width:600px){
	
	.subtitlej	{

	font-size:25px;

	}
	
	
	}
@media only screen and (min-width:800px){

.onlysp{display:none;}
.onlypc{display:inline-block;}


.subtitle	{

	font-size:28px;

	}

	
}

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

	PAGE TOP

------------------------------------------------------*/
#pageTop {

  position: fixed;
  bottom: 30px;
  right: 0;
 z-index:7;
 margin-bottom:20px;
}

 

#pageTop a {
  display: block;

  width: 40px;
  height: 22px;
  margin:0 20px 15px 0;
background:url(../img/common/gotop_sp.png);

}

 

#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}


@media only screen and (min-width:800px){
	#pageTop a {
  width: 60px;
  height: auto;
/*  margin:0 20px 15px 0;*/
background:url(../img/common/gotop.png);

}
}


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

	CONT

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

#cont{
	font-size:1.5rem;
	padding-top:0px;
}
#contL{
	padding:0 0px;
}


#contR .asidetitle{
	font-family: 'Abel', sans-serif;
	background:url(../img/common/ttl_line_bg.gif) left top;
	height:40px;
	line-height:40px;

width:100%;
margin:0px 0 20px 0;
	text-align:center;
	font-size:1.5rem;
	font-weight:500;
	
}



/* PAGE TTL
-------------------------------------*/
#pageTtl{
	width:100%;
	height:60px;
	margin:0 auto 30px auto;
}
#pageTtlInner{
	width:100%;
	height:60px;
	margin:0 auto;

}

#pageTtlInner h2{
	font-family: 'Abel', sans-serif;
	font-size:1.6rem;
	letter-spacing:2px;
	font-weight:bold;

	line-height:60px;
	background:url(../img/common/ttl_line_bg.gif) left top;
	text-align:center;
}



.nextLink,.prevLink{
	margin:15px 0;
	text-align:center;
	padding:15px;
	font-size:1.3rem;
}
.arcLink{
	font-size:1.3rem;
}


@media only screen and (min-width:800px){

	.nextLink,.prevLink{
		padding:15px 0;
		
	}

}

/* BREADCRUMB
-------------------------------------*/
.breadcrumb { 
	overflow:hidden; 
	font-size:1.2rem;
	width:100%;
	margin:20px auto;
}
.breadcrumb li { 
	overflow:hidden;
}
.breadcrumb li:last-child { 
	height:auto;
	line-height:2;
	padding:0 0 0 10px;
	border-bottom:1px solid #9f9f9f;
}
.breadcrumb li a {
	padding:5px 0 5px 10px;
	position:relative; 
	display:inline;
}
.breadcrumb li a:after { 
	content:" "; 
	display:block; 
	width:0; 
	height:0;
	border-top:50px solid transparent;
	border-bottom:50px solid transparent;
	border-left:30px solid transparent;
	position:absolute;
	top:50%;
	margin-top:-50px; 
	left:100%;
	z-index:2; 
}	
.breadcrumb li a:before { 
	content:" "; 
	display:block; 
	width:0; 
	height:0;
	border-top:50px solid transparent;
	border-bottom:50px solid transparent;
	border-left:30px solid transparent;
	position:absolute;
	top:50%;
	margin-top:-50px; 
	left:100%;
	z-index:1; 
}	
.breadcrumb li:nth-child(odd) a       { background:#9f9f9f; }
.breadcrumb li:nth-child(odd) a:after { border-left-color:#9f9f9f; }
.breadcrumb li:nth-child(even) a       { background:#7f7f7f; }
.breadcrumb li:nth-child(even) a:after { border-left-color:#7f7f7f; }
.breadcrumb li:last-child a:after { border: 0; }

@media only screen and (min-width:800px){
	/* PAGE TTL
	-------------------------------------*/
	#pageTtl{
		height:120px;
		width:100%;
		max-width:1100px;
		
		padding:15px;
		background:#333;
	}
	#pageTtlInner{
		height:90px;
		
	}
	
	#pageTtlInner h2{
		font-size:2.4rem;
		line-height:90px;
	}
	#contL{
		float:left;
		width:100%;
		margin:0  -235px 0 0; 
		padding:0 30px 0 10px;
	}
	#contLInner{
		margin:0 235px 0 0;
	}
	
	#contR{
		float:right;
		width:235px;
	}
	.breadcrumb{
		margin:15px auto 25px;
	}
	

	.breadcrumb li { 
		float: left; 
		overflow:visible;
		padding:0;
	}
	.breadcrumb li a {
		float: left;
		display: block;
		padding: 5px 0 5px 40px;
	}
	.breadcrumb li:first-child a {
		padding-left: 10px;
	}
	.breadcrumb li:last-child {
		height:31px;
		line-height:31px;
		padding:0 0 0 40px;
	}
}





/* GRID 
----------------------- */
.row:after{
	display:table;
	content:"";
	clear:both;
}
.spDiv01,.spDiv02,.spDiv03,.spDiv04{
	display:block;
	float:left;
	padding:0 15px;
  	margin:5px 0;
}
.spDiv01{
	width:100%;
}
.spDiv02{
	width:50%;
}
.spDiv03{
	width:33.33333333%;
}
.spDiv04{
	width:25%;
}

@media only screen and (min-width:600px){
	.pcDiv01,.pcDiv02,.pcDiv03,.pcDiv04{
		display:block;
		float:left;
		padding:0;
		margin:0;
	}
	.pcDiv01{
		width:100%;
	}
	.pcDiv02{
		width:50%;
	}
	.pcDiv03{
		width:33.33333333%;
	}
	.pcDiv04{
		width:25%;
	}
}




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

	LOADING

------------------------------------------------------*/
#pageloader {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(0, 0, 0, 1);
    z-index: 999999;
	top: 0;
}
#pageloader .loader-container {
	position: absolute;
	top: 46%;

	margin:0 auto;
	left:0;
	right:0;
	text-align: center;
}
.loader:before,
.loader:after,
.loader {
	border-radius: 50%;
	width: 2em;
	height: 2em;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	vertical-align:baseline;
}

.loader{
	-webkit-animation: loadOrg 1.8s infinite ease-in-out;
	animation: loadOrg 1.8s infinite ease-in-out;
	font-size: 10px;
	margin: 80px auto;
	position: relative;
	text-indent: -9999em;
	 -webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0); 
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}
.loader:before {
	left: -3em;
	-webkit-animation: loadYel 1.8s infinite ease-in-out;
	animation: loadYel 1.8s infinite ease-in-out;
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}
.loader:after {
	left: 3em;
	-webkit-animation: loadGrn 1.8s infinite ease-in-out;
	animation: loadGrn 1.8s infinite ease-in-out;
}
.loader:before,
.loader:after {
	content: '';
	position: absolute;
	top: 0;
}
@-webkit-keyframes loadYel {
	0%,
	80%,
	100% {
	  box-shadow: 0 2em 0 -1em #999;
	}
	40% {
	  box-shadow: 0 2em 0 0 #999;
	}
}
@keyframes loadYel {
	0%,
	80%,
	100% {
	  box-shadow: 0 2em 0 -1em #999;
	}
	40% {
	  box-shadow: 0 2em 0 0 #999;
	}
}
@-webkit-keyframes loadOrg {
	0%,
	80%,
	100% {
	  box-shadow: 0 2em 0 -1em #2F3766;
	}
	40% {
	  box-shadow: 0 2em 0 0 #2F3766;
	}
}
@keyframes loadOrg {
	0%,
	80%,
	100% {
	  box-shadow: 0 2em 0 -1em #2F3766;
	}
	40% {
	  box-shadow: 0 2em 0 0 #2F3766;
	}
}
@-webkit-keyframes loadGrn {
	0%,
	80%,
	100% {
	  box-shadow: 0 2em 0 -1em #444;
	}
	40% {
	  box-shadow: 0 2em 0 0 #444;
	}
}
@keyframes loadGrn {
	0%,
	80%,
	100% {
	  box-shadow: 0 2em 0 -1em #444;
	}
	40% {
	  box-shadow: 0 2em 0 0 #444;
	}
}


/*openning*/


html, body, #openning{ width:100%; height:100%; }
#openning{
background-color: #000;
position: absolute; top:0; left: 0;
display: table;
opacity: 0;
animation: anim2 4s linear;
z-index:99999999;
}

#openning>div{
display: table-cell;
width:100%; height:100vh;
text-align:center;
padding-top:43vh;
}


.loadimg{
width:80%;max-width:400px;
animation: anim1 7s linear;
}

@keyframes anim1{
0%{ opacity: 0;-webkit-transform: translateY(30px); } 
20%{ opacity: 1;-webkit-transform: translateY(0px); }
40%{ opacity: 0;-webkit-transform: translateY(30px); }
60%{ opacity: 1;-webkit-transform: translateY(0px); }
80%{ opacity: 0;-webkit-transform: translateY(30px); }
100%{ opacity: 1;-webkit-transform: translateY(0px); }
}
@-webkit-keyframes anim1 {
0%{ opacity: 0;-webkit-transform: translateY(30px); } 
20%{ opacity: 1;-webkit-transform: translateY(0px); }
40%{ opacity: 0;-webkit-transform: translateY(30px); }
60%{ opacity: 1;-webkit-transform: translateY(0px); }
80%{ opacity: 0;-webkit-transform: translateY(30px); }
100%{ opacity: 1;-webkit-transform: translateY(0px); }
}


@keyframes anim2{
0%{ opacity: 1; } 
80%{ opacity: 1; }
100%{ opacity: 0 ;}
}



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

	HEADER

------------------------------------------------------*/
header{
	width:100%;
	height:50px;
	background:#fff;
}
header #jvc{
	float:left;
	padding: 12px 10px 0 10px;
}
header #jvc img{
	height:25px;
}
#siteTtl a {display:none;}


#siteTtl a:hover{
color:#cb880f;
}

/* HEADER SEC
-------------------------------------*/




@media only screen and (min-width:800px){
	/* HEADER SEC
	-------------------------------------*/
	
	header{
		height:70px;
	}
	header #jvc img{
		height:35px;
	}
	
	header #jvc{
	padding: 18px 10px 0 10px;
}

#siteTtl a{display:block;}
#siteTtl a img{
		float:right;
		padding:13px 15px 0 15px;
		
	}

}


	

@media only screen and (min-width:1000px){
	/* HEADER SEC
	-------------------------------------*/

	header #jvc{

	padding: 18px 10px 0 20px;
}

	
	


}






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

	footer

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



/* FOOTER INNER
-------------------------------------*/

.footerInner{
	border-top:1px solid #666;
	border-bottom:1px solid #666;
	background-color: #222;
	padding-bottom:10px;
	}

#footermenu{
	width:100%;
	padding-top:30px;
	margin: 0px;
    padding-bottom:15px;
	text-align:left;

}

.footerbnr img{ height:40px;
margin:15px;
	}
	
	
#footermenu p{
	color:#666;
	border-bottom:1px solid #666;
	margin:7px 0;
}


#footermenu ul li{
	line-height:40px;
}



#footermenu ul li a{
	display:block;
	margin:0;
	height:100%;
	width:100%;
}
#footermenu ul li img{
	max-width:166px;
	width:100%;
	margin-top:15px;

}
#footermenu div:first-child div{
    
	font-size:1.4rem;
	font-weight:500;
	margin:0;
	padding:10px 20px;
	background:#383838;

}
#footermenu div:not(:first-child){
	padding:0 15px;
}
#footermenu div:not(:first-child) ul li a{
	border-bottom:1px dotted #666;
}


#footermenu div:not(:first-child) ul li a:after{
	content: "\e600"; 
	font-family: 'iconFont';
	margin:0 0 0 5px;
	float:right;
}

@media only screen and (min-width:600px){
	/* FOOTER INNER
	-------------------------------------*/
	#footermenu div:first-child div{
		padding:0 10px 0 0;
		text-align:left;
				padding:0 20px 10px 20px;
	}
	
#footermenu p{

	margin:0px 0 1rem;
}
	
}
@media only screen and (min-width:1000px){
	/* FOOTER INNER
	-------------------------------------*/
	
	.footerInner{
	border-top: 1px solid #666;
	width:100%;
	text-align:center;


	}
	
	#footermenu{
max-width:1100px;
margin:0px auto;

	}
	#footermenu div:first-child{
		border-right:1px solid #666;
	}
	#footermenu div:first-child div{
		margin:0 50px 0 0;
		border:none;

	}
	#footermenu div:not(:first-child){
		padding:0 0 0 50px;
	}
	

}


/*

	FOOTER COOPORATE

------------------------------------------------------*/
.bottom{border-top: 1px solid #666;background:#000;display:block;margin-top: 5px;}
footer{
	 margin-bottom: -30px !important;
	clear:both;
	width:100%;
	background:#222;
	color:#fff;
	font-size:14px;
	font-size:1.4rem;
	padding:0 20px;
	position:relative;
}
/*z-index:0;*/

footer #navArea{

	margin:0 0 30px;

}

footer #snsArea{
	display:inline-block;
	vertical-align:middle;
	overflow:hidden;
}

footer a:hover{
	color: #fff;
}


footer a{
	color:#fff;
	padding:2px 0;
	transition:all .2s;
}
footer a:hover{
	color:#cb880f;
}
footer #termLink{
	line-height:30px;
	padding:15px 0;
	font-size:12px;
	font-size:1.2rem;
	margin-bottom:15px;
}
footer #termLink a{
	display:block;
	
}
footer #termLink a:after{
	content: "\e600"; 
	font-family: 'iconFont';
	margin:0 0 0 5px;
}
footer br{
	display:inherit;
}
footer small{
		font-size:12px;
		font-size:1.2rem;
		padding-bottom:30px;}	
footer #snsArea{
			margin:0 auto;			
	}
.ftmenuname {color:#a1a1a1;}
.ftmenu {font-size:10px;}

.ftmenu2{
	font-size:10px;
}
.ftmenu2 a:after{
	font-size:10px;
	content: "\e600"; 
	font-family: 'iconFont';
	margin:0 0 0 5px;
}
@media only screen and (min-width:800px){


footer{


}


	footer #termLink{
		
		line-height:inherit;
		padding-top:50px;
		float:right;
		margin:0 20px;
		
	}
	footer #termLink a:before{
		content:"|";
		margin:0 10px;
	}
	footer #termLink a:first-child:before{
		content:none;
	}
	footer #termLink a{
		display:inline-block;
	}
	footer #termLink:first-child{
		float:right;
		font-size:12px;
		line-height:100px;
	}
	footer #termLink:last-child{
		float:left;
		font-size:11px;
		line-height:100px;
	}
	
	footer br{
		display:none;
	}



	footer #navArea{
		margin-bottom: 0px;	
		margin-top: 10px;
		height:132px;
		
	}
	

	footer small{
		margin-top:50px;
        margin-left:20px;
		float:left;

	}
}




/* clear fix
----------------------- */
.cf:after{content: "."; display: block; height: 0; font-size:0;	clear: both; visibility:hidden;}
.cf2::after {
  content: ".";
  display: block;
  font-size: 0;
  height: 0;
  margin-bottom: 20px;
  visibility: hidden;
}
.cf3:after{content: "."; display: block; height: 0px; font-size:0; visibility:hidden;margin-bottom: 80px;}
.cf4:after{content: "."; display: block; height: 0px; font-size:0; visibility:hidden;margin-bottom: 130px;}
.cf5:after{content: "."; display: block; height: 0px; font-size:0; visibility:hidden;margin-bottom: 80px;}
/* Hides from IE Mac */
* html .cf{	height: 1%;}
* html .cf2{height: 1%;}
.cf{display:inline-block;}
/* End Hack */