@charset "UTF-8";

/*================================================
 *  CSSリセット
 ================================================*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}


/*================================================
 *  使用カラー
white
#fff;
 
maindeep
#006888
0,104,136

main
#008db7
0,141,183

mainlight
#00afcc
0,174,204

aqua
#00ffff
0,255,255

blue(魏)
#3366ff
51,102,255

red(呉)
cc3300
204,51,0

green(蜀)
#009900
0,153,0

aqua(晋)
#0099ff
0,153,255

yellow(他)
#cc9900
204,153,0

 ================================================*/



/*================================================
 *  一般・共通設定
 ================================================*/
* {
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
	overflow-y: scroll;
}

body {
	font-size:18px;
	color:#fff;
	font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
	line-height:1.7;
	background: url(../images/mainvisual.jpg)center center / cover no-repeat fixed;
	height: 100%;

}

section{
	overflow: hidden;
}


#contents {
	position:relative;
	overflow:hidden;
	width:1200px;
	margin:0 auto;
}
@media screen and (min-width:768px) {
	#contents:before {
		position:absolute;
		top:0;
		left:0;
		width:240px;
		height:100%;
		content: '';
	}
}

#main {
	box-sizing: border-box;
	float:right;
	width:80%;
	padding:30px 50px 0px 50px;
	/*background:rgba(0,0,0,0.5);*/
}

#sub {
	overflow:hidden;
	position:fixed;
	top:0px;
	left:0px;
	float: left;
	box-sizing: border-box;
	width:240px;
	height:100%;
	background:rgba(0,0,0,0.3);
	z-index: 20;
	font-size:15px;
}

#wrapper {   /*background画像の上に70％の黒*/
	margin: 0 auto;
	height: 100%;
	min-height: 100%;
	background:rgba(0,0,0,0.8);
}
body > #wrapper {
	height: auto;
}



a {
	color:#fff;
}
a:hover {
	color:#00ffff;
}



h1	{
	position: relative;
	text-align:center;
	color: #fff;
    	font-size:25px;
	font-weight: bold;
	padding: 5px;
	margin-bottom:0.5em;
	z-index: 10;
}
h1:before {   /*h1の下の平行四辺形*/
  	content: '';/*ボックス作成*/
  	position: absolute;
  	top: 0;
  	bottom: 0;
  	right: 0;
  	left: 0;
	z-index: -1;
  	transform: skew(-30deg);
	margin:0px 15px;
	background: linear-gradient(rgba(0,174,204,0.5),rgba(0,174,204,0.8),rgba(0,174,204,0.5));
}
h1.blue:before {   /*h1の下の平行四辺形(魏)*/
	background: linear-gradient(rgba(51,102,255,0.5),rgba(51,102,255,0.8),rgba(51,102,255,0.5));
}
h1.red:before {   /*h1の下の平行四辺形(呉)*/
	background: linear-gradient(rgba(204,51,0,0.5),rgba(204,51,0,0.8),rgba(204,51,0,0.5));
}
h1.green:before {   /*h1の下の平行四辺形(蜀)*/
	background: linear-gradient(rgba(0,153,0,0.5),rgba(0,153,0,0.8),rgba(0,153,0,0.5));
}
h1.aqua:before {   /*h1の下の平行四辺形(晋)*/
	background: linear-gradient(rgba(0,153,255,0.5),rgba(0,153,255,0.8),rgba(0,153,255,0.5));
}
h1.yellow:before {   /*h1の下の平行四辺形(他)*/
	background: linear-gradient(rgba(204,153,0,0.5),rgba(204,153,0,0.8),rgba(204,153,0,0.5));
}






h2	{
	font-size:22px;
	font-weight: bold;
	color:#fff;
	padding:2px 5px 2px 5px;
	margin-bottom:0.5em;
	background:rgba(0,174,204,0.3);
	border: 2px #00afcc solid;
}
h2 img { 
	height:30px;
	vertical-align:middle;
	padding:0px 5px 2px 0px;
}
.before { /*スマホヘッダー固定用の空白*/
	height:45px;
}


h3 {
	font-size:20px;
	color:#00ffff;
	padding:2px 5px 2px 5px;
	margin-top:2em;
	margin-bottom:0.5em;
	background: rgba(100,100,100,0.7);
}
h3.blue	{   /*(魏)*/
	font-size:20px;
	color:#fff;
	padding:6px 5px 0px 10px;
	background:linear-gradient(to left, #3366ff, transparent);
	border-left: 4px rgb(51,102,255) solid;
	clear: both ;
	font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	
}
h3.red	{   /*(呉)*/
	font-size:20px;
	color:#fff;
	padding:6px 5px 0px 10px;
	background:linear-gradient(to left, #cc3300, transparent);
	border-left: 4px rgb(204,51,0) solid;
	clear: both ;
	font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
h3.green	{   /*(蜀)*/
	font-size:20px;
	color:#fff;
	padding:6px 5px 0px 10px;
	background:linear-gradient(to left, #009900, transparent);
	border-left: 4px rgb(0,153,0) solid;
	clear: both ;
	font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
h3.aqua	{   /*(晋)*/
	font-size:20px;
	color:#fff;
	padding:6px 5px 0px 10px;
	background:linear-gradient(to left, #0099ff, transparent);
	border-left: 4px rgb(0,153,255) solid;
	clear: both ;
	font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
h3.yellow{   /*(他)*/
	font-size:20px;
	color:#fff;
	padding:6px 5px 0px 10px;
	background:linear-gradient(to left, #cc9900, transparent);
	border-left: 4px rgb(204,153,0) solid;
	clear: both ;
	font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
h3.mainlight{   /*(メインカラー明)*/
	font-size:20px;
	color:#fff;
	padding:6px 5px 0px 10px;
	background:linear-gradient(to left, #00afcc, transparent);
	border-left: 4px rgb(0,174,204) solid;
	font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
h3 img {
	height:25px;
	padding:0px;
	margin:0px 5px 5px 0px;
}
.azana{   /*(字)*/
	font-size:17px;
}


h4 {	
	font-size:18px;
	margin-top:1em;
	margin-bottom:0.25em;
	color:#fff;
	border-top:1px solid #666;
	border-bottom:1px solid #666;
	border-left:10px solid #666;
	border-right:10px solid #666;
	padding: 0px 5px;
}
h4 img {
	height:25px;
	vertical-align:middle;
	padding:0px 0px 0px 0px;
}

/*h4 {	
	position: relative;
	margin-bottom:0.25em;
	font-size:15px;
	color:#fff;
	border-bottom:1px solid #fff;
}*/



h5 {
	margin-bottom:0.25em;
	font-size:20px;
	color:#00afcc;
	font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}

h5.blue	{   /*(魏)*/
	color:rgb(51,102,255);
}
h5.red	{   /*(呉)*/
	color:rgb(204,51,0);
}
h5.green{   /*(蜀)*/
	color:rgb(0,153,0);
}
h5.aqua	{   /*(晋)*/
	color:rgb(0,153,255);
}
h5.yellow{   /*(他)*/
	color:rgb(204,153,0);
}
h5.mainlight{   /*(メインカラー明)*/
	color:rgb(0,174,204);
}



h6 {
	margin-bottom:0.25em;
	font-size:14px;
	padding:0px 5px;
	border-left:5px solid #00afcc;
}
h6 img {
	height:25px;
	vertical-align:middle;
	padding:0px 0px 0px 0px;
}


p {
	margin:0 0 1em 0;
}

img {
	vertical-align:middle;
}
img.white {
	border:1px solid #fff;
}



ul,ol,dl {
	margin:0 0 1em 0;
}
ul li {
	list-style:disc;
}
li {
	margin-left:2em;
}


/*================================================
 *  表
 ================================================*/
table {
	width:100%;
	margin-bottom:1em;
	border-collapse:collapse;
}
th {
	text-align:left;
	font-weight:bold;
	font-size:18px;
	color:#fff;
	padding:2px 5px 2px 5px;
	background: rgba(20,20,20,0.7);
	width:40%;
}
td {
	text-align:left;
	font-size:18px;
	color:#fff;
	padding:2px 5px 2px 5px;
	background: rgba(50,50,50,0.7);
}
th img {
	height:25px;
	vertical-align:middle;
	margin:5px;
}
td img {
	height:25px;
	vertical-align:middle;
	margin:5px;
}
th,td {
  	border: solid 1px #888;
	vertical-align: middle; 
}



/*================================================
 * index（top）ページ用
 ================================================*/

#contentstop {
	position:relative;
	overflow:hidden;
	margin-left:240px;
	margin-right:0px;
	
}




#maintop {
	box-sizing: border-box;
	float:right;
	width:100%;
	padding:0px 10px 0px 10px;
	/*background:rgba(0,0,0,0.5);*/
}

#wrappertop {
	margin: 0 auto;
	height: 100%;
	min-height: 100%;
	background:#000;
}
body > #wrappertop {
	height: auto;
}

.topimg {
    width: 100%;
    height: auto;
}
.topcopy {
	padding:20px 20px 0px 20px;
	font-size:13px;
	color:#ddd;
	text-align: justify;
}


.example {
  	position: relative;
  }

.example p {
  	position: absolute;
  	bottom: 0;
 	width:100%;
 	margin: 0; /*余計な隙間を除く*/
  	padding:10px 20px 10px 30px;
	background:#000;
	font-size:13px;
	color:#ddd;
	text-align: justify;
  }






/*================================================
 *  ヘッダー（sub=メニューの上のロゴ、クリックでTOPページへ）
    スマートフォン非表示
 ================================================*/
header {
	position:relative;
	/*background:#15adb3;*/
	border-bottom:1px solid #888;
}
.qr {
	position:relative;
	text-align:center;
	font-size:12px;
	color:#fff;
}
.logo {
	text-align:center;
	font-size:20px;
	color:#fff;
	padding:20px;
}
.logo img {
	display: block;
	max-width: 80%;
	margin: 0 auto;
}

.logo2 img {
	display: block;
	max-width: 40%;
	margin: 0 auto;
	padding: 0px;
}

/*================================================
 *  グローバルナビゲーション（sub=メニューの中身）
 ================================================*/
nav {
	overflow:hidden;
	position:relative;
}
nav h3 {   /*全画面のheaderのかわり（sub=メニューの上のゲームタイトル、クリックでTOPページへ）*/
	display:none;   /*全画面非表示*/
}
nav dt {
	margin:0;
	padding:5px 10px 5px 25px;
	color:#fff;
	cursor:pointer;
	border-bottom:1px solid #888;
	background:rgba(220,220,220,0.2);
}
nav dt a {
	margin:0;
	color:#fff;
	text-decoration:none;
	display:block;
}
nav dt a:hover {
	color:#fff;
}
nav dt:hover {
	color:#fff;
	font-weight: bold; 
	background: linear-gradient(rgba(80,80,80,0.8), rgba(20,20,20,0.8),rgba(80,80,80,0.8));
}
nav dt.selected {
	background: linear-gradient(rgba(160,80,80,0.8), rgba(40,20,20,0.8),rgba(160,80,80,0.8));
}
nav ul{
	margin:0;
	padding:0;
	display: none;
}
nav li {
	list-style:none;
	margin:0;
	padding:0;
	border-bottom:1px solid #888;
}
nav li a {
	display:block;
	padding:3px 10px 3px 25px;
	color:#fff;
	background:rgba(0,104,136,0.4);
	text-decoration:none;
}
nav li a:hover {
	color:#fff;
	font-weight: bold; 
	background: linear-gradient(rgba(0,141,183,0.8), rgba(0,104,136,0.8),rgba(0,141,183,0.8));
	transition:all 0.2s ease 0s;
}
nav .now {
	color:#fff;
	font-weight: bold; 
	background: linear-gradient(rgba(0,141,183,0.8), rgba(0,104,136,0.8),rgba(0,141,183,0.8));
	transition:all 0.2s ease 0s;
}



/*================================================
 *  フッター
 ================================================*/

.footmenu {
	width:100%;
	padding:20px 0;
	overflow:hidden;
	/*background:#23292f;*/
}
.footmenu ul {
	position:relative;
	float:left;
	left:50%;
	margin:0;
	padding:0;
}
.footmenu li {
	position:relative;
	left:-50%;
	float:left;
	list-style:none;
	margin:0;
	padding:0 20px;
	/*font-size:15px;*/
	text-align:center;
}
.footmenu a {
	color:#fff;
	padding:0px 20px ;
	margin:0px;
	border: 1px #fff solid;
	display: block;
	text-decoration:none;
}
.footmenu li img {
	display: block;
	/*vertical-align: middle;*/
}

.copy {
	padding:20px 0px 40px 0px;
	font-size:13px;
	text-align:center;
	color:#ddd;
}


/*================================================
 *  ページトップへの戻り
 ================================================*/
.totop {
	position:fixed;
	bottom:15px;
	margin-left:830px;
	z-index: 20;
}
.totop a {
	display:block;
	text-decoration:none;
}
.totop img {
	background:#008db7;
}
.totop img:hover {
	background:#00afcc;
}

/*================================================
 *  クラス
 ================================================*/
.box_right {
	float: right;
	width:40%;
	margin-top: 0.25em;
  	margin-bottom:1em;
}
.box_left {
	float: left;
	width:40%;
	margin-top: 0.25em;
  	margin-bottom:1em;
}
	
.float_clear{
	clear: both ;
}
.text_main{
	margin-top: 0.5em;
  	margin-bottom:0.5em;
	padding:0;
	text-align: justify;
}
.text_main img {
	height:22px;
	margin:5px;
}
.photo_main {
	width:100%;
}
.photo_right {
	float: right;
	width:40%;
	margin-top: 0.5em;
	margin-left: 1em;
  	margin-bottom:1em;
}
.photo_right_02 {
	float: right;
	width:30%;
	margin-top: 0.5em;
	margin-left: 1em;
  	margin-bottom:1em;
}
.photo_left {
	float: left;
	width:40%;
	margin-top: 0.5em;
	margin-right: 1em;
  	margin-bottom:1em;
}
.photo_left_02 {
	float: left;
	width:30%;
	margin-top: 0.5em;
	margin-right: 1em;
  	margin-bottom:1em;
	}
.photo_left_03 {
	float: left;
	width:15%;
	margin-top: 0.5em;
	margin-right: 1em;
  	margin-bottom:1em;
	}

.cap {
	margin-top: 0.5em;
	font-size:17px;
}
.cap img {
	height:20px;
	margin:5px;
}
.capcenter {
	margin: 0px;
	font-size:17px;
	text-align:center;
}
.capright {
	margin-top: 0.5em;
	font-size:17px;
	text-align:right;
	clear: both ;
}
.capblue{
	margin-top: 0.5em;
	font-size:17px;
	color:#00afcc;
	text-align: justify;
}
.capblue img {
	height:20px;
	margin:5px;
}
.textL {
	text-align:left;
}

.textR {
	text-align:right;
}
.bold {
	font-weight:bold;
}

.bold a { 
	text-decoration: none; 
}

.bold a:hover{
	text-decoration: underline
}



/*================================================
 *  タブレット向けデザイン
 ================================================*/
/* スクロールバーを考慮して20px大きいサイズで切り替え */
@media screen and (max-width:1199px) {
	#contents {
		box-sizing: border-box;
		width:100%;
	}
	#main {
	box-sizing: border-box;
	float:right;
	width:68%;
	padding:30px 10px 0px 10px;
	}
	
	footer {
		width:100%;
	}
	.totop {
	bottom:15px;
	right:15px;
	}
}

/*================================================
 *  スマートフォン向けデザイン
 ================================================*/
@media screen and (max-width:767px) {
	body {
		font-size:13px;
	}
	#main {
		float:none;
		width:100%;
		padding-top:50px;
	}
	
	#sub {
		position:fixed;
		top:0px;
		left:0px;
		float: left;
		width:100%;
		background:rgba(0,0,0,0);
		height: auto;
	}
	#contentstop {
	position:relative;
	overflow:hidden;
	margin-left:0px;
	padding-top:40px;
	}
	#maintop {
		float:none;
		width:100%;
		padding: 5px;
	}
	
	header {
		display:none;   /*スマートフォン非表示*/
	}
	.qr {
		display:none;   /*スマートフォン非表示*/
	}
	nav {
		display:block;
		position:relative;
		width:100%;
	}
	nav h3 {   /*全画面のheaderのかわり（sub=メニューの上のゲームタイトル、クリックでTOPページへ）*/
		display:block;
		cursor:pointer;
		margin-bottom:0;
		margin-top:0;
		padding:8px 10px 8px 10px;
		color:#fff;
		background:#000;
		border-bottom:1px solid #888;
		font-size:15px;	
	}
	nav h3 a { 
		text-decoration: none;
		}
	nav dt {
		background:rgba(0,0,0,0.9);
		padding:3px 10px 3px 25px;
		}
	nav dt:hover {
		background: linear-gradient(rgba(80,80,80,1), rgba(20,20,20,1),rgba(80,80,80,1));
		}
	nav li a {
		background:rgba(0,104,136,0.9);
		}
	nav li a:hover {
		background: linear-gradient(rgba(0,141,183,1), rgba(0,104,136,1),rgba(0,141,183,1));
		}
	
	a { 
		/*text-decoration: none;*/
		color:#fff;
		}
	a:hover { 
		/*text-decoration: none;*/
		color:#fff;
		}

	nav li a {
		padding:2px 10px 2px 25px;
	}
	dl {
		margin:0px;
	}
	#navBtn {
		display:inline-block;
		position:absolute;
		top:5px;
		right:5px;
		width:30px;
		height:30px;
		background:#666;
		/*border-radius:5%;
		background:#2a2a2a;*/
	}
	#navBtnIcon {
		display:block;
		position:absolute;
		top:50%;
		left:50%;
		width:14px;
		height:2px;
		margin:-1px 0 0 -7px;
		background:#000;
		/*background:#15adb3;*/
		transition:.2s;
	}
	#navBtnIcon:before,
	#navBtnIcon:after {
		display:block;
		content:'';
		position:absolute;
		top:50%;
		left:0;
		width:14px;
		height:2px;
		background:#000;
		/*background:#15adb3;*/
		transition:0.3s;
	}
	#navBtnIcon:before {
		margin-top:-6px;
	}
	#navBtnIcon:after {
		margin-top:4px;
	}
	#navBtn .close {
		background:transparent;
	}
	#navBtn .close:before,
	#navBtn .close:after {
		margin-top:0;
	}
	#navBtn .close:before {
		transform:rotate(-45deg);
		-webkit-transform:rotate(-45deg);
	}
	#navBtn .close:after {
		transform:rotate(-135deg);
		-webkit-transform:rotate(-135deg);
	}
	
	h1	{
    	font-size:18px;
	}
	h2	{
    	font-size:16px;
	}

	h2 img {
	height:20px;
	}
	h3	{
    	font-size:15px;
	}
	h3 img {
	height:20px;
	}
	h4	{
    	font-size:14px;
	}
	.box_right {
	width:100%;
	}
	.box_left {
	width:100%;
	}
	.photo_right {
	width:100%;
	}
	.photo_right_02 {
	width:50%;
	}
	.photo_left {
	width:100%;
	}
	.photo_left_02 {
	width:50%;
	}
	.photo_left_03 {
	width:30%;
	}
	.totop {
	bottom:15px;
	right:15px;
	}
	
	.copy {
	font-size:11px;
	}
	.cap {
	font-size:12px;
	}
	.cap img {
	height:15px;
	}
	.capcenter {
	font-size:12px;
	}
	.capright {
	font-size:12px;
	}
	.capblue{
	font-size:12px;
	}
	.capblue img {
	height:15px;
	}
	th,td {
	display:block;
	font-size:13px;
	padding:1px 5px;
	}
	th img {
	height:20px;
	}
	td img {
	height:20px;
	}
	th {
	width : auto;
	}
	.text_main img {
	height:15px;
	}
	.topcopy {
	font-size:11px;
	}
	
	.example {
  	position: relative;
	}

	.example p {
	position: relative;
  	padding:20px 25px 0px 25px;
	font-size:11px;
	width : auto;
	}

}