@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%;}

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

@media screen and (max-width: 768px) { /* 768px以下の記述 */
#wrapper { 
min-width:100%;
width: auto !important;
width: 100%	;
}
}


/* --------------------------------------------------------
#header
-------------------------------------------------------- */
#header_wrap{ background:#000; height:36px; border-bottom:1px solid #333; z-index:110; position:fixed; width:100%; }
#header{ position:relative; }

#header #knmlogo{}
#header #btnGlobal{ position:absolute; top:0; right:10px;}
#header #btnGlobal a:hover img{filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7;}

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

/* --------------------------------------------------------
#container
-------------------------------------------------------- */
#container {
overflow: hidden;
height: auto;
position:relative;
padding-top:18px;
}
#container .inner { padding-left:231px; }

@media screen and (max-width: 768px) { /* 768px以下の記述 */
#container { padding-top:0; }
#container .inner { padding-left:0; }
}

/* --------------------------------------------------------
#contents
-------------------------------------------------------- */
#contents { color:#fff; width:100%; position:relative; overflow: hidden; padding-top:20px; }
@media screen and (min-width: 769px) { /* PC用の記述 */
#contents { min-height:800px; }
}
@media screen and (max-width: 768px) { /* 768px以下の記述 */
#contents { min-height:0; padding-top:0px; }
}

#contents #headerBox #logo { display:block; width:238px; position:absolute; top:33px; right:20px; z-index:10; }
#contents #headerBox #logo a { display:block; height:63px; }
#contents #headerBox #logo a img { width:100%; }

@media screen and (max-width: 768px) { /* 768px以下の記述 */
#contents #headerBox { background:#000 url(../img/headerbox_bg.gif); border-bottom:1px solid #323232; }
#contents #headerBox #logo { width:100%; background:#000; border-bottom:1px solid #323232; position:relative; top:0px; right:0px; padding-top:10px; }
#contents #headerBox #logo a { width:56.9%; height:auto; margin:0 auto 10px; }
}

#headerBox #title { display:block; height:32px; margin:20px 0 10px 15px; }
#headerBox #title span { display:none;}

@media screen and (max-width: 768px) { /* 768px以下の記述 */
#headerBox #title { height:24px; margin:10px 0 10px 15px; }
}



/* #pathlist
-------------------------------------------------------- */
#pathlist { width:100%; margin:0 0 15px 15px; position:relative; }
#pathlist ol { width:661px; padding:0px; }
#pathlist li { display:inline; font-size:85%; color:#FFF; padding:0 10px 0 0; }
#pathlist li a { color:#d60005; margin-right:10px;}

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



/* --------------------------------------------------------
#sideNavi
-------------------------------------------------------- */
#sideNavi { width:230px; position:fixed; top:0px; left:0; z-index:50; /*border-right:1px solid #1b1b1b; background:#141414;*/ background:url(../img/gnavi/sidenavi_bg.png) repeat-y 0 0; }
@media screen and (min-width: 769px) { /* PC用の記述 */
#sideNavi { padding-bottom: 32768px; margin-bottom: -32768px;}
}
@media screen and (max-width: 768px) { /* 768px以下の記述 */
#sideNavi { width:100%; position:relative; border:none; background:none; }
}


/* #gNavi
-------------------------------------------------------- */
#gNavi { width:230px; position:relative; top:0px; left:0; padding-top:50px; /*border-right:1px solid #1b1b1b;*/ background:url(../img/gnavi/gnavi_bg.png) no-repeat 0 0; }
#gNavi ul { }
#gNavi li { display:block; overflow:hidden; }
#gNavi li span { display:none; }
#gNavi li a { display:block; height:50px; }
#gNavi li:hover , #gNavi li.on { background:url(../img/gnavi/gbtn_on.gif) repeat; }

#gNavi li.index { display:none;}
#gNavi li.news a { background:url(../img/gnavi/gbtn_01.png) no-repeat center center; background-size:60%; }
#gNavi li.introduction a { background:url(../img/gnavi/gbtn_02.png) no-repeat center center; background-size:60%; }
#gNavi li.story a { background:url(../img/gnavi/gbtn_03.png) no-repeat center center; background-size:60%; }
#gNavi li.special a { background:url(../img/gnavi/gbtn_04.png) no-repeat center center; background-size:60%; }
#gNavi li.videos a { background:url(../img/gnavi/gbtn_05.png) no-repeat center center; background-size:60%; }
#gNavi li.images a { background:url(../img/gnavi/gbtn_06.png) no-repeat center center; background-size:60%; }
#gNavi li.products a { background:url(../img/gnavi/gbtn_07.png) no-repeat center center; background-size:60%; }

#gNavi li a { background-size:60%; }

@media screen and (min-width: 769px) { /* PC用の記述 */
#gNavi { padding-bottom: 32768px; margin-bottom: -32768px;}
}
@media screen and (max-width: 768px) { /* 768px以下の記述 */
#gNavi { width:100%; margin:5px 0%; padding-top:0px; position:relative; top:auto; left:0; display:block; border:none; background:none; font-size:0;}
#gNavi ul { font-size:0; letter-spacing:normal; text-align:center; }
#gNavi li { display:inline-block; *display:inline; *zoom:1; width:48%; margin:1%; background:#252525; letter-spacing:normal;}
#gNavi li.index { display:inline-block;}
#gNavi li.index a { background:url(../img/gnavi/gbtn_00.png) no-repeat center center; background-size:60%; }
#gNavi li a { display:block; line-height:0; letter-spacing:normal; font-size:0; background-size:80%; }
}


#btn_reserve { margin:10px 0 10px 15px; position:relative;}
#btn_reserve a span { display:block; width:200px; height:35px; text-indent:100%; white-space:nowrap; overflow:hidden; background:url(../img/btn_reserve.png) no-repeat center center; }
#btn_reserve a { display:block; width:200px; height:35px; cursor:pointer; overflow:hidden; margin-right:0px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

background: #990014; /* Old browsers */
background: -moz-linear-gradient(top,  #b90101 0%, #700101 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b90101), color-stop(100%,#700101)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #b90101 0%,#700101 100%); /* Chrome10+,Safari5.1+ */
background: -ms-linear-gradient(top,  #b90101 0%,#700101 100%); /* IE10+ */
background: linear-gradient(to bottom,  #b90101 0%,#700101 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b90101', endColorstr='#700101',GradientType=0 ); /* IE6-9 */
}
#btn_reserve a:hover {filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7;}

@media screen and (max-width: 768px) { /* 768px以下の記述 */
#btn_reserve { margin:10px auto; width:100%; text-align:center; }
#btn_reserve a span { width:100%; height:50px; background:url(../img/btn_reserve_sp.png) no-repeat center center; background-size:50%; }
#btn_reserve a { display:block; width:70%; height:50px; margin:0 auto;}
}


/* --------------------------------------------------------
#footer_wrap
-------------------------------------------------------- */
#footer_wrap { clear:both; position:relative; bottom:0; width:100%; z-index:2090;}


/* --------------------------------------------------------
#bottomBox
-------------------------------------------------------- */
#bottomBox { position:absolute; /*left:0;*/ top:-270px; z-index:50; }
@media screen and (max-width: 768px) { /* 768px以下の記述 */
#bottomBox { position:relative; /*left:0;*/ top:-0;; z-index:50; width:100%; }
}

/* #bnr-novel
-------------------------------------------------------- */
#bnr-novel { margin:20px 0 10px 15px;}
#bnr-novel a span {display:block; width:200px; height:51px; text-indent:100%; white-space:nowrap; overflow:hidden; }
#bnr-novel a { display:block; width:200px; height:51px; background:url(../img/bnr_novel.jpg) no-repeat; background-size:100%; outline:none;}

@media screen and (max-width: 768px) { /* 768px以下の記述 */
#bnr-novel { margin:20px 15px 20px 15px;}
#bnr-novel a { width:305px; height:50px; margin:0 auto; background:url(../img/bnr_novel_sp.png) no-repeat; background-size:100%; }
}
/* #bnr-tpp
-------------------------------------------------------- */
#bnr-tpp { margin:0px 0px 15px 15px;}
#bnr-tpp span { display:none;}
#bnr-tpp a { display:block; width:200px; height:128px; background:url(../img/bnr_mgsvtpp.jpg)}

@media screen and (max-width: 768px) { /* 768px以下の記述 */
#bnr-tpp { margin:20px 10px 10px 10px;}
#bnr-tpp a { width:305px; height:64px; margin:0 auto; background:url(../img/bnr_mgsvtpp_sp.jpg) no-repeat; background-size:100%;}
}

/* #snsList
-------------------------------------------------------- */
#snsList { margin:0 0 15px 15px;}
#snsList li { display:block; width:27px; height:27px; margin-right:7px; float:left; }
#snsList li span { display:none; }
#snsList li a { display:block; width:27px; height:27px; }
#snsList li.tw a { background:url(../img/sns_tw.png) no-repeat 0 0; background-size:100%; }
#snsList li.fb a { background:url(../img/sns_fb.png) no-repeat 0 0; background-size:100%; }
#snsList li.gg a { background:url(../img/sns_gg.png) no-repeat 0 0; background-size:100%; }
#snsList li.li a { background:url(../img/sns_li.png) no-repeat 0 0; background-size:100%; }
#snsList li.yt a { background:url(../img/sns_yt.png) no-repeat 0 0; background-size:100%; }
#snsList li.ig a { background:url(../img/sns_ig.png) no-repeat 0 0; background-size:100%; }
#snsList li.ig { margin-right:0; }


@media screen and (max-width: 768px) { /* 768px以下の記述 */
#snsList { text-align:center; margin:0 0 15px 0; }
#snsList ul { text-align:center; font-size:0; padding:0; }
#snsList li { display:inline-block; margin:12px; float:none; }
#snsList li.ig { margin-right:12px; }
}

/* --------------------------------------------------------
#footer
-------------------------------------------------------- */
#footer { background:#141414; padding:10px; position:relative; border-bottom:1px solid #000; border-top:1px solid #2a2a2a; }
#footer:after {content: ""; display: block; clear: both;}
#footer {zoom:1;}
#footer {clear:both;}

#footer #bnr { position:relative; }
#footer #bnr ul{ }
#footer #bnr li{ display:block; }

#footer #bnr li.logoSet { margin-left:105px; position:absolute; top:0px;}
#footer #bnr li.kjp { float:left; margin-right:10px; }
#footer #bnr li.foxE { float:left; margin-right:10px; }
#footer #bnr li.cero { float:right; margin-left:10px;}
#footer #bnr li.award { float:right;}
#footer #bnr li.copyrightSet { color:#868686; font-size:77%; padding-top:30px; }

@media screen and (max-width: 768px) { /* 768px以下の記述 */
#footer #bnr li.logoSet { margin-left:0px; position:relative; float:left; width:100%; }
#footer #bnr li.kjp { clear:left; margin-right:5px; width:22px; height:30px; }
#footer #bnr li.foxE { margin-right:5px; width:21px; height:30px; }
#footer #bnr li.cero { margin-left:5px; width:23px; height:29px; }
#footer #bnr li.award { width:30px; height:30px; }
#footer #bnr li.copyrightSet { padding-top:0px; word-break: break-all; font-size:44%; }

#footer #bnr li img { width:100%; height:auto;}
}


#footer_bottom { background:#161616; text-align:left; font-size:93%; padding:5px 10px; clear:both; border-top:1px solid #1e1e1e; color:#868686; }
#footer_bottom:after {content: ""; display: block; clear: both;}
#footer_bottom {zoom:1;}

#footer_bottom #menu { float:left; font-size:85%; }
#footer_bottom #menu li{ display:block; float:left; margin-bottom:0px; }
#footer_bottom #menu li a{ margin:0px 5px 0px 5px; color:#868686; white-space:nowrap; }

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

/*copylight
----------------------------------------------------*/
#copyright{ float:right; font-size:85%; padding:0px; color:#868686;}

@media screen and (max-width: 768px) { /* 768px以下の記述 */
#copyright{ float:left; font-size:85%; padding:5px;}
}





/* --------------------------------------------------------
汎用クラス
-------------------------------------------------------- */
/*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; }


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

.clear { 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
----------------------------------------------------*/
.float_l { float:left; }
.float_r { 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; /* 白金比 */}