/*本体*/
body{
	font-family:	'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	color:		#DDDDDD;
	font-size:	15px;
	margin:		0;
	background:	#000000;
}

/*ナビゲーション*/
div#nav {
	position:	absolute;
	bottom:		0px;
	width:		100%;
	text-align:	center;
	list-style:	none;
}
div#nav li {	/*通常リンクボタン*/
	display:	inline-block;
	width:		140px;
	height:		32px;
	text-align:	center;
	background:	url(img/linml.gif) no-repeat;
	color:		#888888;
	font-size   :	18px;
}
div#nav li.act:hover {background:	url(img/lihov.gif);}
div#nav li.act:active {background:	url(img/lidwn.gif);}
div#nav a{display:block;text-decoration:none;color:#DDDDDD;}

/*ヘッダー*/
div#header{
	width:		100%;
	position:	relative;
	top:		10px;
	list-style:	none;
}
div#header li{	/*通常リンクボタン*/
	display: 	inline-block;
	width:		140px;
	height:		32px;
	text-align:	center;
	background:	url(img/linml.gif) no-repeat;
	color:		#888888;
	font-size   :	18px;
}
div#header li.act:hover {background:	url(img/lihov.gif);}
div#header li.act:active {background:	url(img/lidwn.gif);}
div#header a{display:block;text-decoration:none;color:#DDDDDD;}

div#header .btn{	/*ダウンロードボタン*/
	text-decoration:none;
	color:#DDDDDD;
	display:inline-block;
	text-align:center;
	width:120px;
	height:63px;
	float:right;
	background:url(img/btn1.gif);
	background-repeat:no-repeat;
	padding:57px 0 0;
	line-height:18px;
}
div#header a.btn:hover{background:url(img/btn2.gif);}
div#header a.btn:active{background:url(img/btn3.gif);}

div#header div.gray{width:100%; height:30px; margin-top:30px; background-color:#1A1A1A;text-align:right;background-image:url(img/kado.gif);background-repeat:no-repeat;background-position:0 0;}
div#header span.logo{padding:0 10px;font-family:serif; font-size:40px; line-height:20px;}
div#header span.cpyr{padding:0 10px;color:#888888; font-size:10px;line-height:8px;}

div#header h1{font-size:20px;font-weight:bold;float:left;margin:0 0 0 30px;}

/*コンテンツ*/
div#doc{
	margin:		0 auto;
	width:		840px;
	position:	relative;
	height:		100%;
	padding-bottom:	15px;
	top:		0;
	left:		0;
}
div#main {
	position:	relative;
	width:		800px;
	margin:		40px 20px 10px;
	color:		#CCCCCC;
	height:		500px;
}
div#main h2{
	display:	block;
	background:	linear-gradient(90deg, rgba(0,128,255,0.3), rgba(0,128,255,0));
	border-radius:	10px;
	font-size:	18px;
	font-weight:	normal;
	margin:		0 0 10px;
	padding:	10px;
}

/*水中アクション説明専用コメント*/
div#main span.uwActTag{
	position:absolute;
	font-weight:bold;
}

/*エッジフォント*/
div#main .edge{
	color:		#205AD9;
	text-shadow:	1px 1px 0px #FFF ,-1px  1px 0px #FFF, 1px -1px 0px #FFF, -1px -1px 0px #FFF,
			0px 2px 0px #FFF ,2px  0px 0px #FFF, 0px -2px 0px #FFF ,-2px  0px 0px #FFF;
}
div#main li{
	margin-bottom:15px;
}
div#main a{color:#EEEEEE;}


/*表*/

table.cel{
	border:solid 2px #EEEEEE;
	border-radius:3px;
	border-spacing: 1px;
	box-shadow:0px 5px 5px 2px #4466AA;
}
table.cel th{background-color:#A2D0F4;border-bottom:solid 1px #B2E0FF;}
table.cel td{background-color:#DDEEFF;border-bottom:solid 1px #EEEEEE; padding:4px 10px;}
table.cel li.line{list-style:none;display:inline-block;text-align:center;}

/*フッター*/
div#footer{
	position:relative;
	bottom:0px;
	left:0px;
	width:100%;
	height:60px;
	background:#000000;
	text-align:center;
	padding-top:10px;
	color:#888888;
	font-size:12px;
}
div#footer a{
	color:#CCCCCC;
}



/* チェックボックスは非表示 */
.aboutBtn {display:none;}
.aboutTab {cursor: pointer; }
/* アニメーション */
div.aboutTarget {display:block; transition:0.5s ease; position:relative;}
/* 動かす位置 */
input#sel0:checked ~ div.aboutTarget {left:0px;}
input#sel1:checked ~ div.aboutTarget {left:-800px;}
input#sel2:checked ~ div.aboutTarget {left:-1600px;}
/* ラジオボタンデザイン */
@keyframes nextBtnAnim {
	0%{background-position:100% 0%}
	100%{background-position:200% 0%}
}
label.nextBtn {
	float:right;
	padding:10px 20px;
	border-radius:0 20px 20px 0;
	background:linear-gradient(-90deg, rgba(0,128,255,0.7), transparent);
	background-size: 200% 100%;
	animation:nextBtnAnim 1s infinite;
	user-select: none;
}
@keyframes prevBtnAnim {
	0%{background-position:200% 0%}
	100%{background-position:100% 0%}
}
label.prevBtn {
	float:left;
	padding:10px 20px;
	border-radius:20px 0 0 20px;
	background:linear-gradient(90deg, rgba(0,128,255,0.7), transparent);
	background-size: 200% 100%;
	animation:prevBtnAnim 1s infinite;
	user-select: none;
}


.popup {position: relative; display:inline-block;}
.popup input {display: none;}
.popup input ~ div {display: none;}
.popup input:checked ~ div {display: block;}
.popup label {cursor: pointer; text-decoration: underline; color:#EEEEEE;}
.popup div.popupDiv {
	position:absolute;
	left:0; right:0; margin:auto;
	top:30px;
	background-color:rgba(0,0,0,0.9);
	border:solid 1px #EEEEEE;
	border-radius:10px;
	padding:20px;
}



.lb33, .lb50, .lb75 {display:inline-block; overflow: visible;}
.lb33:hover, .lb50:hover, .lb75:hover {transition-duration: 0.3s;}
.lb33:hover {transform: scale(3,3);}
.lb50:hover {transform: scale(2,2);}
.lb75:hover {transform: scale(1.33333,1.33333);}




audio#myaud {display: none;}
#diskBtn{
	font-size:	12px;
	cursor:		pointer;
	user-select:	none;
	position:	relative;
	display:	inline-block;
	border:		solid 1px #888888;
	background-color:rgba(255,255,255,0.1);
	width:		300px;
	height:		64px;
	margin:		10px 20px;
}
#diskBtn:hover{border:solid 1px #CCCCCC;}
#diskBtn div#cdDisp{position:relative;width:200px;background-color:rgba(0,0,0,0.2);border:4px solid #222222; margin:10px; left:80px; overflow:hidden; white-space: nowrap;}
#diskBtn div#cdDisp span{animation:cdDispScr 10s linear infinite; display:inline-block; padding-left:100%; white-space:nowrap; line-height : 1em;}

#diskBtn div.cdPress{transform:scale(1,0.5);}
#diskBtn div.cdPause{animation:cdIn 1s;}
#diskBtn div.cdPlay{animation:cdRotate 1s linear infinite;}
#diskBtn div#cdImg,
#diskBtn div#cdSdw{
	margin:10px;
	width: 0;
	height: 0;
	border-left: 30px solid rgba(255,255,255,0.1);
	border-right: 30px solid rgba(255,255,255,0.1);
	border-top: 30px solid rgba(255,255,255,0.2);
	border-bottom: 30px solid rgba(255,255,255,0.2);
	border-radius: 100%;
	position: absolute;
	transform: rotate(60deg);
}
#diskBtn div#cdSdw{top:15px;opacity:0.3;}

#diskBtn div#cdImg:before, #diskBtn div#cdImg:after,
#diskBtn div#cdSdw:before, #diskBtn div#cdSdw:after{position: absolute;content:"";}
#diskBtn div#cdImg:after,
#diskBtn div#cdSdw:after{
	left:-6px;top:-6px;
	border: solid 6px #222222;
	border-radius: 100%;
}
@keyframes cdIn {
	0%   { transform: translateY(-10px) rotate(60deg); opacity:0; }
	100% { transform: translateY(0) rotate(60deg); opacity:1; }
}
@keyframes cdRotate {
	0%   { transform: rotate(60deg); }
	100% { transform: rotate(420deg); }
}
@keyframes cdDispScr{
	0%   { transform: translateX(0); }
	100% { transform: translateX(-100%); }
}