@charset "utf-8";

/* ====================　フォントのスタイル設定　========================== */

@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

body{
    font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 12px;
	color: #ccc;
	background-image: url(../material/img_bg.jpg);
	width: 100%;
	padding: 0;				/* 余白の削除（ブラウザのデフォルト設定の差異をなくす） */
	margin: 0;				/* 余白の削除（ブラウザのデフォルト設定の差異をなくす） */
}

.font_yellow {
	color: #FF0;
}

/* ====================　コンテナの設定　================================== */

#container{
    height: auto !important;
    height: 100%;
	min-height: 100%;
	position: absolute;
	width: 100%;
}

/* ====================　ヘッダーの表示設定　============================== */

#header{
	position: fixed;		/* ヘッダーの固定 */
    top: 0; 				/* 一番上に表示 */
	width: 100%;			/* 幅の設定 */
	height: 40px;			/* 高さの設定 */
	background: #000;		/* 背景の設定 */
	text-align : center;	/* テキストを中央寄せ */
	z-index: 1;				/* 最上面表示 */
}

#header a {
	color: #ccc;
	text-decoration: none;		/*下線を表示させない*/
}

/* ====================　コンテンツエリアの表示設定　====================== */

#contents{
	padding: 40px 0 40px;		/* 上下に余白を取る（ヘッダーの高さより大きくする事） */
	width: 100%;
}

/* ====================　フッターの表示設定　============================== */

#footer{
	width: 100%;			/* 幅の設定 */
	height: 50px;			/* フッターの高さ設定 */
	background-color: #000;	/* 背景の設定 */
	text-align : center;	/* テキストを中央寄せ */
	position: absolute;		/*フッターを絶対配置に指定する設定 */
	bottom: 0;           	/* フッターを一番下に置くぜ！ */
}

/* ====================　マニュアルの表示設定　============================ */

.manual_box {						/* マニュアルの箱 */
	position : relative;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	max-width: 1770px;
}
.manual_box img {
	width: 100%;
	height: auto;
}

.manual_box_top {					/* マニュアルの箱 */
	position : relative;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	max-width: 1770px;
}
.manual_box_top img {
	width: 100%;
	height: auto;
}

.manual_box_sp {						/* マニュアルの箱（スマホ用） */
	width:100%;
	padding:12px 0;
	overflow-x:scroll;
	-webkit-overflow-scrolling:touch;	/* 慣性スクロール */
	overflow-scrolling:touch;
	white-space:nowrap;
}

.manual_box_sp li {
	background: #fff;
	margin: 2px;
	text-align: center;
	display: inline-block;
}

.manual_box_sp img {
	width: 100%;
	height: auto;
}


.manual_linkbox {					/* トップページ用のリンクボックス */
	position: absolute;
	width: 300px;
	top: 85%;
	left: 70%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

.manual_linkbox2 {					/* マニュアル用のリンクボックス */
	position: absolute;
	width: 440px;
	top: 97%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

.link1 a {
	text-align: center;
	float: left;
	width: 100px;
	height: 30px;
  	margin:0 10px 0 0;			/*余計な隙間を除く*/
  	font-size: 20px;			/*文字サイズ*/
  	border: solid white 2px;	/*線で囲う*/
  	padding: 7px;				/*文字と線の間の余白*/
  	color: white;				/*文字色*/
  	text-decoration: none;		/*下線を表示させない*/
}
.link1 a:hover{					/*カーソルを当てたとき*/
	background: rgba(255, 255, 255, 0.3);/*背景を半透明に*/
}

.link2 a {
	text-align: center;
	margin: 0 10px 0 0;
	float: left;
	font-size: 16px;
	color: #fff;
	text-decoration: none;
}
.link2 a:hover{
	color: #FF0;
}

.link_l a {
	position: absolute;
	width: 20px;
	top: 50%;
	left: 1%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	font-size: 24px;
	color: #fff;
	text-decoration: none;
}
.link_l a:hover{
	color: #FF0;
}
	
.link_r a {
	position: absolute;
	width: 20px;
	top: 50%;
	left: 98%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	font-size: 24px;
	color: #fff;
	text-decoration: none;
}
.link_r a:hover{
	color: #FF0;
}



/* ====================　各ボックスの表示設定　============================ */

.l-box {
	float: left;
	margin: 5px 0 5px 10px;
}

.r-box {
	float: right;
	margin: 5px 10px 5px 0;
}

.waku {
	border: solid 2px #fff;
	width: 150px;
	padding: 0 0 0 15px;
}

/* ====================　スマホ用の表示設定　============================== */

@media screen and (min-width: 641px){	/* 幅が641以上になった時の処理 */

.manual_box_sp {						/* マニュアル用の箱 */
	display: none;
}

.manual_box_top {
	display: none;
}

}

@media screen and (max-width: 640px){	/* 幅が640以下になった時の処理 */

.manual_box {						/* マニュアル用の箱 */
	display: none;
}


}