@charset "utf-8";
/* ==================================================================
CSS information
style info :共通（汎用クラス）
================================================================== */

/* --------------------------------------------------------
html,body
	#wrapper
		#header_wrap
		#frontArea
		#container
			.inner
				#contents
			#sideNavi
		#footer_wrap
			#bottomBox
-------------------------------------------------------- */

html,body { background-color:#000; height:100%; -webkit-text-size-adjust: none; }

html { font-size: 62.5%; }
body { font-size: 1.4rem; }

img { max-width:100%; height:auto; }

/* --------------------------------------------------------
#wrapper
#wrapper {
min-width:100%;
width: auto !important;
width: 100%;
text-align:left;
height: auto !important;
height: 100%;
min-height:100%;
position:relative;
}
body > #wrapper { height: 100%; width: auto; }
-------------------------------------------------------- */

@media screen and (max-width: 768px) { /* 768px以下の記述 */
}


/* --------------------------------------------------------
#header
-------------------------------------------------------- */
#header_wrap { z-index:1000; background:#000; position:relative; }
#header { position:relative; height:auto; padding-bottom:10px; }

#header #knmlogo { width:80px; height:22px; }
#header h1 { display:block; width:90%; text-align:center; margin:0 auto; text-align:center;}
#header h1 img { max-width:69%;}

#header #btn-back { position:absolute; top:5px; right:5px; width:20px; height:20px;}


@media screen and (min-width: 769px) { /* 769px以上の記述 */
#header_wrap { z-index:1000; background: none; position: absolute; width:100%; }
#header { position:relative; height:; }
#header #knmlogo { width:120px; height:auto; }
#header h1 { display:block; width:216px; height:88px; margin-left:32px; }
#header h1 img { max-width:100%;}
#header #btn-back { top:10px; right:10px; width:40px; height:40px;}
}



/* --------------------------------------------------------
#contents
-------------------------------------------------------- */
#contents { color:#e0e4eb; position:relative;}
#contents:after { content: ""; display: block; clear: both; }
#contents { zoom:1; }


@media screen and (min-width: 769px) { /* 769px以上の記述 */
#contents { padding-left:280px;
/*height: 100%;*/
min-height: 100%;
}
.endMark { height:30px; display:block;}
}

@media screen and (max-width: 768px) { /* 768px以下の記述 */
#contents {
padding-top:0px;
margin-bottom:40px;
}
.endMark { height:1px; display:block;}
}



/* --------------------------------------------------------
#nav
-------------------------------------------------------- */
#nav { padding:0 10px; color:#e0e4eb; clear:both; }
#nav .ti { font-size:131%; font-weight:bold; }

#navLinks {  width:100%; letter-spacing:-.40em; border-top:1px solid #5f5f5f; border-left:1px solid #5f5f5f; }
#navLinks li { -moz-box-sizing: border-box; box-sizing:border-box; border-right:1px solid #5f5f5f; border-bottom:1px solid #5f5f5f; width:50%; display:inline-block; letter-spacing:normal; }
#navLinks li a { display:block; }
#navLinks li a:hover { background:#2d2d2d; }
#navLinks li img { width:100%; height:auto; }
#navLinks li span { display:block;}

#sub-navLinks { width:100%; margin-bottom:20px; }
#sub-navLinks li { box-sizing:border-box; border:1px solid #5f5f5f; width:100%; display:block; margin-bottom:10px; }
#sub-navLinks li a { display:block; }
#sub-navLinks li a:hover { background:#2d2d2d; }
#sub-navLinks li img { width:100%; height:auto; }


#navLinks li.nav04-1 , #navLinks li.nav04-2 , #navLinks li.nav04-3 { display:none;} 

@media screen and (min-width: 769px) { /* 769px以上の記述 */
#nav { padding:0 0px; box-sizing:border-box; width:280px; height:100%; border-right:1px solid #282828; position: absolute; left:0; top:0; padding-top:135px;
background:url(../img/nav-bg.gif) 0 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

#sub-navLinks { display:none;}

#navLinks { border:none; border-top:1px solid #282828; }
#navLinks li { border-right:none; border-bottom:1px solid #282828; width:100%; display:block; }
#navLinks li a { display:block; width:279px; height:39px; }
#navLinks li img { display:none; }
#navLinks li span { display:block;}

#navLinks li.nav04-1 , #navLinks li.nav04-2 , #navLinks li.nav04-3 { display:block;} 

#navLinks li.nav01 a { background:url(../img/nav01.png) no-repeat 0 0;}
#navLinks li.nav02 a { background:url(../img/nav02.png) no-repeat 0 0;}
#navLinks li.nav03 a { background:url(../img/nav03.png) no-repeat 0 0;}
#navLinks li.nav04 a { background:url(../img/nav04.png) no-repeat 0 0;}
#navLinks li.nav04-1 a { background:url(../img/nav04-1.png) no-repeat 0 0;}
#navLinks li.nav04-2 a { background:url(../img/nav04-2.png) no-repeat 0 0;}
#navLinks li.nav04-3 a { background:url(../img/nav04-3.png) no-repeat 0 0;}
#navLinks li.nav05 a { background:url(../img/nav05.png) no-repeat 0 0;}
#navLinks li.nav06 a { background:url(../img/nav06.png) no-repeat 0 0;}
#navLinks li.nav07 a { background:url(../img/nav07.png) no-repeat 0 0;}
#navLinks li.nav08 a { background:url(../img/nav08.png) no-repeat 0 0;}
#navLinks li.nav09 a { background:url(../img/nav09.png) no-repeat 0 0;}
#navLinks li.nav10 a { background:url(../img/nav10.png) no-repeat 0 0;}
#navLinks li.nav11 a { background:url(../img/nav11.png) no-repeat 0 0;}
#navLinks li.nav12 a { background:url(../img/nav12.png) no-repeat 0 0;}

#navLinks li a:hover { background-color:#2d2d2d;}
}

#navLinks li.nav12 { display:none; }

/* --------------------------------------------------------
汎用クラス
-------------------------------------------------------- */
/*Link Style (Base)
----------------------------------------------------*/
a:link { text-decoration:none; color:#c5c5c5; }
a:visited { text-decoration:none; color:#c5c5c5; }
a:hover { text-decoration:underline; color:#c5c5c5; }
a:active { text-decoration:none; color:#c5c5c5; }

.chgd { display:inline-block;}


/*clearfix　NN未対応版
----------------------------------------------------*/
.clearfix:after { content: ""; display: block; clear: both; }
.clearfix { zoom:1; }

.cr { clear:both; }


/*pagetop
----------------------------------------------------*/
.pagetop { clear:both; height:24px; padding-right:20px; position:relative; z-index:10; }
.pagetop  a { display:block; width:103px; height:24px; overflow:hidden; padding:0; position:absolute; bottom:-2px; right:20px;
background:url(../img/btn_pagetop.png) left top no-repeat; }
.pagetop a span { display:none; }
.pagetop a:hover { filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; }


/*Float Style
----------------------------------------------------*/
.fl { float:left; }
.fr { float:right; }

/*Text align Style
----------------------------------------------------*/
.text_c { text-align:center; }
.text_l { text-align:left; }
.text_r { text-align:right; }

/*Margin Style
----------------------------------------------------*/
.mt5 { margin-top:5px; }
.mt10 { margin-top:10px; }
.mt15 { margin-top:15px; }
.mt20 { margin-top:20px; }
.mt25 { margin-top:25px; }
.mt30 { margin-top:30px; }
.mt35 { margin-top:35px; }
.mt40 { margin-top:40px; }
.mt45 { margin-top:45px; }
.mt50 { margin-top:50px; }
.mt55 { margin-top:55px; }
.mt60 { margin-top:60px; }

.mr5 { margin-right:5px; }
.mr10 { margin-right:10px; }
.mr15 { margin-right:15px; }
.mr20 { margin-right:20px; }
.mr25 { margin-right:25px; }
.mr30 { margin-right:30px; }
.mr35 { margin-right:35px; }
.mr40 { margin-right:40px; }
.mr45 { margin-right:45px; }
.mr50 { margin-right:50px; }
.mr55 { margin-right:55px; }
.mr60 { margin-right:60px; }

.mb5 { margin-bottom:5px; }
.mb10 { margin-bottom:10px; }
.mb15 { margin-bottom:15px; }
.mb20 { margin-bottom:20px; }
.mb25 { margin-bottom:25px; }
.mb30 { margin-bottom:30px; }
.mb35 { margin-bottom:35px; }
.mb40 { margin-bottom:40px; }
.mb45 { margin-bottom:45px; }
.mb50 { margin-bottom:50px; }
.mb55 { margin-bottom:55px; }
.mb60 { margin-bottom:60px; }

.ml5 { margin-left:5px; }
.ml10 { margin-left:10px; }
.ml15 { margin-left:15px; }
.ml20 { margin-left:20px; }
.ml25 { margin-left:25px; }
.ml30 { margin-left:30px; }
.ml35 { margin-left:35px; }
.ml40 { margin-left:40px; }
.ml45 { margin-left:45px; }
.ml50 { margin-left:50px; }
.ml55 { margin-left:55px; }
.ml60 { margin-left:60px; }


/*Padding Style
----------------------------------------------------*/
.pt5 { padding-top:5px; }
.pt10 { padding-top:10px; }
.pt15 { padding-top:15px; }
.pt20 { padding-top:20px; }
.pt25 { padding-top:25px; }
.pt30 { padding-top:30px; }
.pt35 { padding-top:35px; }
.pt40 { padding-top:40px; }
.pt45 { padding-top:45px; }
.pt50 { padding-top:50px; }
.pt55 { padding-top:55px; }
.pt60 { padding-top:60px; }

.pr5 { padding-right:5px; }
.pr10 { padding-right:10px; }
.pr15 { padding-right:15px; }
.pr20 { padding-right:20px; }
.pr25 { padding-right:25px; }
.pr30 { padding-right:30px; }
.pr35 { padding-right:35px; }
.pr40 { padding-right:40px; }
.pr45 { padding-right:45px; }
.pr50 { padding-right:50px; }
.pr55 { padding-right:55px; }
.pr60 { padding-right:60px; }

.pb5 { padding-bottom:5px; }
.pb10 { padding-bottom:10px; }
.pb15 { padding-bottom:15px; }
.pb20 { padding-bottom:20px; }
.pb25 { padding-bottom:25px; }
.pb30 { padding-bottom:30px; }
.pb35 { padding-bottom:35px; }
.pb40 { padding-bottom:40px; }
.pb45 { padding-bottom:45px; }
.pb50 { padding-bottom:50px; }
.pb55 { padding-bottom:55px; }
.pb60 { padding-bottom:60px; }

.pl5 { padding-left:5px; }
.pl10 { padding-left:10px; }
.pl15 { padding-left:15px; }
.pl20 { padding-left:20px; }
.pl25 { padding-left:25px; }
.pl30 { padding-left:30px; }
.pl35 { padding-left:35px; }
.pl40 { padding-left:40px; }
.pl45 { padding-left:45px; }
.pl50 { padding-left:50px; }
.pl55 { padding-left:55px; }
.pl60 { padding-left:60px; }



/*Light-Height Style
----------------------------------------------------*/
.golden-ratio { line-height:1.61; /* 黄金比 */}
.yamato-ratio { line-height:1.41; /* 大和比 */}
.platinum-ratio { line-height:1.73; /* 白金比 */}