/* PS4用WEBマニュアルテンプレート　プロト版 */

/* ブラウザの幅に応じて３段階でフォントサイズを調整 */
/* （各文字サイズは「em」単位で指定します） */

html {
    font-size : 70%; 
}

@media screen and (min-width : 320px){
    html{ font-size : 20%;} 
}

@media screen and (min-width : 400px){
    html{ font-size : 30%;} 
}

@media screen and (min-width : 600px){
    html{ font-size : 50%;} 
}
 
@media screen and (min-width : 1024px) {
    html{ font-size : 80%}; 
}

@media screen and (min-width : 1900px) {
    html{ font-size : 100%}; 
}


body.help_body {
	text-align:center;
	background-color: #000000;
	font-family : Arial,'メイリオ',sans-serif ;
	background-image: url(../images/bg.jpg);/* 全体に背景画像を指定する場合 */
	background-attachment: fixed;
	margin: 0px 0px 0px 0px;
	background-position:center top;
	background-repeat:no-repeat;
	-moz-background-size:cover;
	background-size:cover;
	
	}


/* 基本レイアウト */

#hlp_wrapper {	/* 全体 */
	width: 100%;
	position: relative;
	z-index: auto;
	}


#hlp_header_button{/* ボタン（ヘッダー用） */
	width: 100%;
	position: absolute;
	top: 2%;
	right: 3%;
	margin: 0 auto; 

	z-index:9999
	}	


#hlp_contents {	/* マニュアル表示部分 */
	position: relative;
	width: 80%;
	text-align: center;
	margin: 0 auto;
	
	}


#hlp_footer {	/* フッター*/
	text-align: left;
	font-size: 1em;
	color: #FFFFFF;
	margin: 2% 3% 0px 3%;
	}
	
	
	


/* 画像表示 */

img {
	width :100%;
}




img.logo_2 {
	width: 140px;
	height: 70px;
	float: left;
	padding:20px 30px 10px 30px; 
	
}


/* スライドインメニューに必要なところ */
body {
	position: relative;
	right: 0;
	overflow-x: hidden;
}
#slide_menu{
	text-align: center;
	position: fixed;
	top: 0px;
	right: -240px;
	width: 240px;
	height: 100%;
	padding-top: 15px;
	background: #000000;
	border-left: solid 1px #ffffff;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

#slide_menu ul{
    margin: 0;
    padding: 0px 0px 0px 0px;
}

#slide_menu li{
    border-bottom: solid 1px #ffffff; 
    list-style: none;
}


#slide_menu li a{	/* メニュー項目（リンク文字設定） */
	display: block;
	padding:10px 30px 10px 30px; 
	color: #999999;
	text-align: left;
	text-decoration: none;
}

#slide_menu li a:hover {	/* メニュー項目（選択中の文字設定） */
	display: block;
	padding:10px 30px 10px 30px; 
	color: #FFdd33;
	text-align: left;
	background-color: #440000;
	text-decoration: none;
}

#button{/* ボタン画像 */
	width:48px; 
	float: right;
	outline: none;
 	border: none;
    	background-color: transparent;
	z-index: 9999;
	cursor: pointer;
}

@media screen and (min-width : 320px){
    #button{ width : 30px;} 
}

@media screen and (min-width : 400px){
    #button{ width : 34px;} 
}

@media screen and (min-width : 600px){
    #button{ width : 38px;} 
}
 
@media screen and (min-width : 1024px) {
    #button{ width : 44px}; 
}

@media screen and (min-width : 1900px) {
    #button{ width : 48px}; 
}