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

/* --------------------------------------------------------
html,body
	#wrapper
		#header_wrap
		#container
			#contents
			#gNavi_wrap
		#footer_wrap
			#footer
-------------------------------------------------------- */

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

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

img { max-width:100%; height:auto; /*width:100%\9;  IE8のみ適用 */ }

div, h1, h2, h3, h4, h5, p { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }

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

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

@media screen and (min-width: 961px) { /* 961px以上の記述 */
}

@media screen and (min-width: 1280px) { /* 1280px以上の記述 */
}


/* --------------------------------------------------------
#wrapper
-------------------------------------------------------- */
#wrapper{
text-align:left;
min-height:100%;
height: auto !important;
height: 100%;
min-width:100%;
width: auto !important;
width: 100%;
position:relative;
overflow-x:hidden;
}
/*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:2000; position:fixed; width:100%; }
#header{ position:relative; }

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

@media screen and (max-width: 768px) { /* 768px以下の記述 */
#header_wrap{ position:relative; }
#header #btnGlobal{ display: none;}
#header #tpplogo{ display: block; position:absolute; top:8px; right:7px; width: 185px;}
}


/* --------------------------------------------------------
#SPMENU
-------------------------------------------------------- */
#spmenuArea { display: none;}
@media screen and (max-width: 768px) {
#spmenuArea { display: block; position: relative; top: 0; right: 0; z-index:9000; width: 100%;}
#spmenuArea.fixed { position:fixed; }
#spmenu { position: absolute; top: 0; right: 0; width: 27.343%; height: auto; display:block; }
#spmenu { background: url(../img/menu_close.png) -1000px 0 no-repeat; }
#spmenu.on { background-position: 0 0; background-size: cover; }
#spmenu.on img { filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;}
}
@media screen and (max-width: 768px) {
#gNaviSP { position: absolute; top: 0; left: 0; background: url(../img/menu_bg_sp.png) 0 0; width: 100%; padding: 0 10px; border-bottom: 1px solid #292929; /*overflow:scroll;*/}

#gNaviSP #gtop { display: block; position: relative; width: 100%; height: auto; padding:3px 0; }
#gNaviSP #gtop { background: url(../img/menu_globaltop.png) 0 0 no-repeat; background-size: auto 90%; }
#gNaviSP #gtop:before { content: ""; display: block; padding-top: 10.714%; }
#gNaviSP #gtop span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: 100%; white-space: nowrap; overflow: hidden;}
#gNaviSP ul{overflow-y:scroll; height: 400px;-webkit-overflow-scrolling: touch;}
}

/* --------------------------------------------------------
#container
-------------------------------------------------------- */
#container { background:#000; position:relative; margin-top:36px; width:100%; }
#lower #container { background:#000; position:relative; margin-top:36px; width:100%; padding-top:33px; }
@media screen and (max-width: 768px) { /* 768px以下の記述 */
#container { margin-top:0px; padding-top:0;}
#lower #container { margin-top:0; padding-top:0; }
}


h1#mainlogo { display:none; }
h1#mainlogo_text { background:url(../img/mainlogo_bg.jpg) repeat 0 0; position: fixed; right:0; margin-top:-33px; z-index:100; width:100%; height:auto; text-align:right; padding-left:238px; z-index:101;}
h1#mainlogo_text a .toppage{ white-space:nowrap; text-indent:100%; overflow:hidden; width:95px; height:33px; display:inline-block; float:left;  }
h1#mainlogo_text a .text{ white-space:nowrap; text-indent:100%; overflow:hidden; width:435px; height:33px; display:inline-block; background:url(../img/mainlogo_text.png) no-repeat center right; }
h1#mainlogo_text a :hover { filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7;}

h2#pageti { padding:30px 0 0px 30px; margin:0 0 10px 0; background: url(../img/page_ti_line.png) no-repeat left bottom; width:65%; height:auto; }

@media screen and (max-width: 768px) { /* 768px以下の記述 */
h1#mainlogo { display:block; background:url(../img/mainlogo.png) no-repeat top center; background-size:contain; position:relative; top:0; right:0; width:100%; height:70px;}
h1#mainlogo { display:none; }
h1#mainlogo a { white-space:nowrap; text-indent:100%; overflow:hidden; display:block; width:100%; height:70px; }
h1#mainlogo_text { display:none;}

h2#pageti { padding:10px 18% 0px 10px; margin:0 0 15px 0px; width:100%; height:auto; }
}


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

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



/* --------------------------------------------------------
#contents
-------------------------------------------------------- */
#contents { padding:0px; width:auto; margin-left:238px; }
#contents:after { content: ""; display: block; clear: both; }
#contents { zoom:1; }

#lower #contents { background: url(../img/bg.jpg) no-repeat top left; background-size: 100% auto; position:relative; }


@media screen and (max-width: 768px) { /* 768px以下の記述 */
#contents { box-sizing: border-box;}
#contents { margin-left:0; min-height:1px; }
#lower #contents  { padding-bottom: 0 !important;}
}

#loading { background:#000 url(../img/loading.gif) no-repeat center center; width:100%; min-height:600px; height:100%; z-index:100; position:absolute; top:0; right:0; bottom:0; left:0;}


/* --------------------------------------------------------
#gNavi_wrap

side_jp.css , side_en.css
-------------------------------------------------------- */




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

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

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

/* #copyrightSet
-------------------------------------------------------- */
#copyrightSet { position:relative; margin-bottom:10px; }

#copyrightSet ul:after {content: ""; display: block; clear: both;}
#copyrightSet ul {zoom:1; position:relative;}

#copyrightSet li { display:block; }

#copyrightSet li.hard { margin-left: 52px; position:absolute; top:0px;}
/*#copyrightSet li.kjp { float:left; margin-right:10px; }*/
#copyrightSet li.foxE { float:left; margin-right:10px; }
#copyrightSet li.copyrighttext { color:#868686; font-size:9px; font-size:0.9rem; padding-top:27px; float:left; }
#copyrightSet .logo_awards {text-align:center;padding-top:19px;}
#copyrightSet .logo_awards li {display:inline-block;margin-right:8px;margin-bottom:8px;vertical-align:middle;}

#copyrightSet #cero li.copyrighttext { max-width:70%; }
#copyrightSet #cero li.award { float:right; margin-left:10px;}
#copyrightSet #cero li.cero { float:right; }
#copyrightSet #cero li.mgportal { float:right; margin-right:10px;} /* METAL GEAR PORTALの記述 */
#copyrightSet #cero li.kojistation { position:absolute; top:0; right:296px;}
#copyrightSet #cero li.career { position:absolute; top:0; right:130px;}

#copyrightSet #esrb li.copyrighttext { max-width:70%; }
#copyrightSet #esrb li.esrb_rat { float:right; margin-left:5px; }
#copyrightSet #esrb li.esrb_prv { float:right;}
#copyrightSet #esrb li.e3award { float:right; margin-right:4px; } /* E3アワードの記述 */
#copyrightSet #esrb li.kojistation { position:absolute; top:0; right:350px;}
#copyrightSet #esrb li.career { position:absolute; top:0; right:185px;}

#copyrightSet #gsrr li.copyrighttext,
#copyrightSet #grac li.copyrighttext { max-width:70%; }
#copyrightSet #gsrr li.gsrr_rat,
#copyrightSet #grac li.grac_rat { float:right; margin-left:5px; font-size: 9px; font-size: 0.9rem; }
#copyrightSet #gsrr li.gsrr_rat a,
#copyrightSet #grac li.grac_rat a { display: block; width: 210px; }
#copyrightSet #gsrr li.gsrr_rat img,
#copyrightSet #grac li.grac_rat img { float:left; vertical-align: top; margin: 0 10px; }

#copyrightSet #pegi li.copyrighttext { max-width:50%; }
#copyrightSet #pegi li.pegi { float:right; }
#copyrightSet #pegi li.e3award { float:right; margin-right:10px;} /* E3アワードの記述 */
#copyrightSet #pegi li.kojistation { clear:both; float:left; margin-top:10px; margin-right:10px; }
#copyrightSet #pegi li.career { float:left; margin-top:10px; }

@media screen and (max-width: 1599px) { /* 1599px以下の記述 */
#copyrightSet .logo_awards img{height:29px;}
}

@media screen and (max-width: 1200px) { /* 1200px以下の記述 */
#copyrightSet #esrb li.copyrighttext { max-width:70%; }
#copyrightSet #esrb li.kojistation { position:relative; top:inherit; right:auto; margin-right:10px; padding-top:5px; clear:both; float:left;}
#copyrightSet #esrb li.career { position:relative; top:inherit; right:auto; float:left; padding-top:5px;}

#copyrightSet #pegi li.pegi { padding-top:70px; max-width:46%; text-align:right;  }
#copyrightSet #pegi li.e3award img{ position:absolute; top:0px; right:10px;} /* E3アワードの記述 */
#copyrightSet #pegi li.copyrighttext { max-width:51%; padding-top:10px; }

#copyrightSet #pegi li.pegi { }
#copyrightSet #pegi li.copyrighttext { max-width:40%!important; }
#copyrightSet #pegi li.kojistation { }
#copyrightSet #pegi li.career { }
}
@media screen and (max-width: 1100px) { /* 1100px以下の記述 */
#copyrightSet #cero li.copyrighttext { max-width:65%; }
#copyrightSet #cero li.kojistation { position:relative; top:inherit; right:auto; margin-right:10px; padding-top:5px; clear:both; float:left;}
#copyrightSet #cero li.career { position:relative; top:inherit; right:auto; float:left; padding-top:5px;}
#copyrightSet #cero li.mgportal img { float:right; /*padding-top:5px;*/} /* METAL GEAR PORTALの記述 */
}

@media screen and (max-width: 1010px) { /* 1010px以下の記述 */
#copyrightSet #esrb li.e3award img{ position:absolute!important; top:65px!important; right:5px!important;} /* E3アワードの記述 */
}

@media screen and (max-width: 880px) { /* 880px以下の記述 */
#copyrightSet #cero li.mgportal img{ position:absolute; top:70px; right:0; } /* METAL GEAR PORTALの記述 */
}

@media screen and (max-width: 768px) { /* 768px以下の記述 */
#copyrightSet .logo_awards img{height:24px;}
#copyrightSet li.hard { margin-left:0px; position:relative; top:inherit; margin-bottom:5px; width:200px;}
/*#copyrightSet li.kjp { margin-right:5px; }
#copyrightSet li.kjp img { width:22px; height:auto; }*/
#copyrightSet li.foxE { margin-right:5px; }
#copyrightSet li.foxE img { width:21px; height:auto; }
#copyrightSet li.copyrighttext { font-size:0.6rem; }
#copyrightSet .logo_awards{text-align:left;padding-top:9px;}
#copyrightSet .logo_awards li {margin-right:4px;margin-bottom:4px;}

#copyrightSet #esrb li.e3award img{ position:relative!important; top:0!important; float: right!important; width:70px!important; height:auto;} /* E3アワードの記述 */
#copyrightSet #esrb li.esrb_rat { width:62px; height:auto;}
#copyrightSet #esrb li.esrb_prv { width:23px; height:auto;}
#copyrightSet #esrb li.copyrighttext { padding-top:5px; margin-bottom:0px; max-width:70%; }
#copyrightSet #gsrr li.gsrr_rat img,
#copyrightSet #grac li.grac_rat img { width: 30px;height: auto; }

/*#copyrightSet li.kojistation { margin-right:2px; width:48%; height:auto; }
#copyrightSet li.kojistation img { width:100%;}
#copyrightSet li.career { margin-left:2px; width:34.8%; height:auto;}
#copyrightSet li.career img { width:100%;}*/

#copyrightSet #cero li.cero img { width:23px; height:auto; }
#copyrightSet #cero li.mgportal img { position:relative!important; top:0!important; float: right!important; width:90px!important; height:auto;} /* METAL GEAR PORTALの記述 */
#copyrightSet #cero li.copyrighttext { font-size:0.6rem; padding-top:0px; margin-bottom:5px; max-width:62%; }
#copyrightSet #cero li.award { margin-left:5px;}
#copyrightSet #cero li.award img { width:30px; height:auto; }

#copyrightSet #pegi li.pegi { }
#copyrightSet #pegi li.copyrighttext { max-width:100%!important; }
#copyrightSet #pegi li.pegi { padding-top:0px; max-width:219px; width:219px; height:auto; }
#copyrightSet #pegi li.e3award img { position:relative!important; right:0px; float:right; padding-top:0px; max-width:50%; height:50%;} /* E3アワードの記述 */
}


/* #footer #fmenu
-------------------------------------------------------- */
#footer #fmenu { float:left; font-size:10px; font-size:1.0rem;  }
#footer #fmenu ul:after {content: ""; display: block; clear: both;}
#footer #fmenu ul {zoom:1;}
#footer #fmenu li { display:block; float:left; margin-bottom:0px; color:#868686; border-right:1px solid #868686; }
#footer #fmenu li a { margin:0px 5px 0px 5px; color:#868686; white-space:nowrap; }
#footer #fmenu li:first-child a { margin-left:0;}
#footer #fmenu li:last-child { border-right:none;}

@media screen and (max-width: 768px) { /* 768px以下の記述 */
#footer #fmenu { float:none; font-size:8px; font-size:0.85rem; }
#footer #fmenu li a { margin:0px 4px; }
#footer #fmenu li:last-child a { margin-right:0;}
}


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

@media screen and (max-width: 1010px) { /* 1010px以下の記述 */
#copyright{ float:left; padding:0px 0;}
}

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

/* オンライン利用規約 テキストファイル */
.eula #cboxLoadedContent{border:1px solid #c2c2c2;}
.eula iframe{ background-color:#fff; word-wrap:break-word; white-space:pre-wrap;}
/*.eula iframe pre{ background-color:#fff; word-wrap:break-word; white-space:pre-wrap;}*/


/* --------------------------------------------------------
汎用クラス
-------------------------------------------------------- */
.sp { display:none;}
@media screen and (max-width: 768px) { /* 768px以下の記述 */
.pc { display:none;}
.sp { display:block;}
}

/*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; }

.cr { clear:both; }


/*pagetop
----------------------------------------------------*/
.pagetop { clear:both; padding-right:20px; position:relative; z-index:10; }
.pagetop  a { display:block; overflow:hidden; padding:10px 20px; position:absolute; bottom:0px; right:20px; background:#232323; color:#c8c8c8; font-size:1.1rem; cursor:pointer; }
/*.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; /* 白金比 */}