﻿/*共通設定・高さ*/
html, body{ 
	height:100%; margin:0;
	font-family:"メイリオ";
	background-color:#303030;
}
a.link_color:link { color: #ffffff;color: inherit; }
a.link_color:visited { color: #ffffff;color: inherit; }
a.link_color:hover { color: #ffffff;color: inherit; }
a.link_color:active { color: #ffffff;color: inherit; }
/*メイン*/
@media screen and (min-width: 720px) {
	.main{
		width:600px;
	}
}
@media screen and (max-width: 600px) {
	.main{
		/*何もなし*/
		width:550px;
	}
}

/*共通設定・幅*/
.top_degine{
	max-width:720px;
	min-width:360px;
}
/*共通設定・高さ*/
.top_degine{
	height:100%;
}	
/*共通設定・背景色*/
.top_degine,.contnts_degine,.footer{
	background-color:#FAFAFA;
}
.top_degine{
	position:relative;
	text-align:center;
	color:#030303;
	size:10px;
	margin:auto;
	letter-spacing: 0.1em
}
.contnts_degine,.contnts_sub{
	position:relative;
	text-align:center;
	color:#030303;
	size:10px;
	margin:auto;
	letter-spacing: 0.1em;
}
.contnts_sub{
	border:#808080 solid 2px;
	border-left:#808080 solid 4px;
	border-right:#808080 solid 4px;
	width:95%;
}

.message_space{
	position:absolute;
	text-align:center;
	color:#030303;
	size:10px;
	left:1%;
	letter-spacing: 0.1em;	
	background-color:#FFFFFF;
	border:#808080 solid 2px;
	border-left:#808080 solid 4px;
	border-right:#808080 solid 4px;
	margin:0 auto;
	height:85%;
	width:97%;
}

.setumei_degine{
	position:absolute;	
	color:#FFFFFF;
	text-align:center;
	background-color:rgba(0,0,0,1);
	opacity:1;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.image_display{
	position:absolute;	
}

.message_degine{
	position:absolute;
	color:#FFFFFF;
	font:12px 'ＭＳ Ｐゴシック';
}

.message_box{
	margin:auto;
	width:310px;
	height:120px;
	color:#FFFFFF;
	top:360px;
	left:20px;
	background-color:rgba(108,108,108,0.8);
	border-radius: 5px; /*角丸*/
	opacity:0.8;
	border:solid 2px #808080;
}

.message_view{
	position:relative;
	margin:auto;
	padding:5px;
	width:90%;
	height:90%;
	color:#FFFFFF;
	background-color:#303030;
	font:12px 'ＭＳ Ｐゴシック';	
}

.menu_label{
	position:absolute;
	top:20px;
	left:190px;
	width:140px;
	height:30px;
	color:#FFFFFF;	
	background-color:#303030;
	border-radius:5px; /*角丸*/
	opacity:0.8;
	border:solid 1px #808080;	
	font:12px 'ＭＳ Ｐゴシック';	
	text-align:center;
}
.menu_box{
	position:absolute;
	top:51px;
	left:190px;
	width:140px;
	height:270px;
	color:#FFFFFF;	
	background-color:rgba(108,108,108,0.8);
	border-radius:5px; /*角丸*/
	opacity:0.8;
	border:solid 1px #808080;	
	font:12px 'ＭＳ Ｐゴシック';	
	text-align:left;
}
.menu_string_box{
	position:relative;
	margin:auto;
	padding:5px;
	width:90%;
	height:90%;
	color:#FFFFFF;
	background-color:#303030;
	font:12px 'ＭＳ Ｐゴシック';	
	text-align:left;
	letter-spacing: 0.0em;
}
.menu_status_box{
	position:absolute;
	top:51px;
	left:0px;
	width:330px;
	height:300px;
	color:#FFFFFF;	
	background-color:rgba(108,108,108,0.8);
	border-radius:5px; /*角丸*/
	opacity:0.8;
	border:solid 1px #808080;	
	font:12px 'ＭＳ Ｐゴシック';	
	text-align:left;
}
.menu_commnd{
	margin-top:0px;
	padding-top:2px;
	width:100%;
	height:15px;
	text-align:center;
	color:#F0F0F0;
	vertical-align: middle;
	background-color:#030303;
	border:1px solid #030303;	
}
.staus_string_box1{
	position:absolute;
	margin:auto;
	padding:5px;
	left:0px;
	width:35%;
	height:45%;
	color:#FFFFFF;
	background-color:#303030;
	font:12px 'ＭＳ Ｐゴシック';	
	text-align:left;
	letter-spacing: 0.0em;
	float:right;
}
.staus_string_box2{
	position:absolute;
	margin:auto;
	padding:5px;
	left:110px;
	width:55%;
	height:45%;
	color:#FFFFFF;
	background-color:#303030;
	font:12px 'ＭＳ Ｐゴシック';	
	text-align:left;
	letter-spacing: 0.0em;
}
.staus_string_box3{
	position:absolute;
	margin:auto;
	padding:5px;
	top:140px;
	left:0px;
	width:90%;
	height:45%;
	color:#FFFFFF;
	background-color:#303030;
	font:12px 'ＭＳ Ｐゴシック';	
	text-align:left;
	letter-spacing: 0.0em;
}

.select_msg_box{
	position:relative;
	top:200px;
	width:100%;
	text-align:center;
}

.select_yes_box{
	position:relative;
	top:20px;
	left:-15px;	
}

.select_no_box{
	position:relative;
	top:20px;
	left:15px;
}

.command_label{
	position:absolute;
	top:200px;
	left:100px;
	width:140px;
	height:100px;
	color:#FFFFFF;	
	background-color:rgba(108,108,108,0.8);
	border-radius:5px; /*角丸*/
	opacity:0.8;
	border:solid 1px #808080;	
	font:12px 'ＭＳ Ｐゴシック';
	text-align:center;
}

.command_border{
	position:relative;
	width:90%;
	height:15%;
	margin:2px auto auto auto;
	padding:2px 0px 0px 0px;
	text-align:center;
	border-radius:2px; /*角丸*/
	border:solid 2px #808080;
}
@-webkit-keyframes pulse {
 from {
   opacity: 1.0;/*透明度100%*/
 }
 to {
   opacity: 0.1;/*透明度80%*/
 }
}
@-webkit-keyframes pulse2 {
 from {
   opacity: 0.0;/*透明度0%*/
 }
 to {
   opacity: 1.0;/*透明度80%*/
 }
}
@-webkit-keyframes pulse3 {
 from {
   opacity: 0.0;/*透明度0%*/
 }
 to {
   opacity: 1.0;/*透明度80%*/
 } 
}
@-webkit-keyframes pulse4 {
 from {
   opacity: 1.0;/*透明度0%*/
 }
 to {
   opacity: 0.0;/*透明度80%*/
 } 
}
.blinking{
	-webkit-animation-name: pulse;/* 実行する名前 */
	-webkit-animation-duration: 0.8s;/* 0.3秒かけて実行 */
	-webkit-animation-iteration-count:infinite;/* 何回実行するか。infiniteで無限 */
	-webkit-animation-timing-function:ease-in-out;/* イーズインアウト */
	-webkit-animation-direction: alternate;/* alternateにするとアニメーションが反復 */
	-webkit-animation-delay: 0s; /* 実行までの待ち時間 */
}

.background_change{
	-webkit-animation-name: pulse2;/* 実行する名前 */
	-webkit-animation-duration: 0.5s;/* 0.3秒かけて実行 */
	-webkit-animation-iteration-count:1;/* 何回実行するか。infiniteで無限 */
	-webkit-animation-timing-function:ease-in-out;/* イーズインアウト */
	-webkit-animation-direction: alternate;/* alternateにするとアニメーションが反復 */
	-webkit-animation-delay: 0s; /* 実行までの待ち時間 */
}

.background_change2{
	-webkit-animation-name: pulse3;/* 実行する名前 */
	-webkit-animation-duration: 3.0s;/* 0.3秒かけて実行 */
	-webkit-animation-iteration-count:2;/* 何回実行するか。infiniteで無限 */
	-webkit-animation-timing-function:ease-in-out;/* イーズインアウト */
	-webkit-animation-direction: alternate;/* alternateにするとアニメーションが反復 */
	-webkit-animation-delay: 0s; /* 実行までの待ち時間 */
}

.Image_change{
	-webkit-animation-name: pulse4;/* 実行する名前 */
	-webkit-animation-duration: 3s;/* 0.3秒かけて実行 */
	-webkit-animation-iteration-count:1;/* 何回実行するか。infiniteで無限 */
	-webkit-animation-timing-function:ease-in-out;/* イーズインアウト */
	-webkit-animation-direction: alternate;/* alternateにするとアニメーションが反復 */
	-webkit-animation-delay: 0s; /* 実行までの待ち時間 */
}

.table_degine{
	margin:auto;
	overflow:scroll;
}

.novel_writting_div{
	position:relative;
	text-align:left;	
	margin:auto;
	width:95%;
	left:-3px;
}

.novel_writting{
	text-align:left;	
}

.link_button_div{
	position:relative;
	text-align:center;	
	margin:auto;
	width:95%;
	left:-3px;
}

.link_button{
	display:block;
	position:relative;
	text-align:center;
	color:#030303;
	size:10px;
	padding-top:10px;
	padding-bottom:10px;
	border-left:2px solid;
	border-top:2px solid;
	border-right:2px solid;
	border-bottom:2px solid;
	border-color:#bbbbbb #777777 #777777  #aaaaaa;
	background-color:#AFEEEE;
	color:#303030;	
	width:99%;
	-webkit-border-radius: 5px;/* for Safari and Chrome 対応*/
	-moz-border-radius: 5px;/* for Firefox 対応*/
	border-radius: 5px; /*角丸*/	
}
.button{
	-webkit-border-radius: 5px;/* for Safari and Chrome 対応*/
	-moz-border-radius: 5px;/* for Firefox 対応*/
	border-radius: 5px; /*角丸*/
	width:100px;
	height:40px;	
}

.button_mini{
	font-size:8pt;
	height:20px;
}

.button_main_menu{
	width:95%;
	height:50px;
	font-size:14pt;
	background-color:#AFEEEE;
	color:#303030;
}

.button_new_contents{
	background-color:#AFEEEE;
	color:#303030;	
	width:96%;
	height:40px;
}

.input_contents{
	width:98%;
}

.textarea_contents{
	height:350px;
}

@media screen and (max-width: 480px) {
	.textarea_contents{
		height:280px;
	}
}


.button_contents,.button_yes_no_contents{
	background-color:#AFEEEE;
	color:#303030;		
	width:98%;
	height:40px;
}

.button_contents_50{
	width:49%;
}

.button_yes_no_contents{
	width:49%;
}

.button_novel_list{
	background-color:#AFEEEE;
	color:#303030;		
	width:98%;
	height:25px;
}

.footer{
	width:100%;
	text-align:center;
	color:#030303;
	font-size:10pt;
	/*position:absolute;bottom:15px;*/
}
.mainmenu{
	line-height: 0.8em;
}
/*モバイル*/
@media screen and (max-width: 400px) {
	.main{
		/*何もなし*/
		width:300px;
	}
	
	.message_degine{
		position:absolute;
		color:#FFFFFF;
		font:12px 'ＭＳ Ｐゴシック';
	}

	.message_box{
		margin:auto;
		width:310px;
		height:120px;
		color:#FFFFFF;
		top:360px;
		left:20px;
		background-color:#303030;
		border-radius: 5px; /*角丸*/
		opacity:0.8;
		border:solid 2px #808080;
	}

	.message_view{
		position:relative;
		margin:auto;
		padding:5px;
		width:90%;
		height:90%;
		color:#FFFFFF;
		background-color:#303030;
		font:12px 'ＭＳ Ｐゴシック';
	}

	.menu_label{
		position:absolute;
		top:20px;
		left:190px;
		width:140px;
		height:30px;
		color:#FFFFFF;	
		background-color:#303030;
		border-radius:5px; /*角丸*/
		opacity:0.8;
		border:solid 1px #808080;	
		font:12px 'ＭＳ Ｐゴシック';
		text-align:center;
	}
	.menu_box{
		position:absolute;
		top:51px;
		left:190px;
		width:140px;
		height:270px;
		color:#FFFFFF;	
		background-color:#303030;
		border-radius:5px; /*角丸*/
		opacity:0.8;
		border:solid 1px #808080;	
		font:12px 'ＭＳ Ｐゴシック';
		text-align:left;
	}
	.menu_string_box{
		position:relative;
		margin:auto;
		padding:5px;
		width:90%;
		height:90%;
		color:#FFFFFF;
		background-color:#303030;
		font:12px 'ＭＳ Ｐゴシック';
		text-align:left;
		letter-spacing: 0.0em;
	}
	.menu_status_box{
		position:absolute;
		top:51px;
		left:0px;
		width:330px;
		height:300px;
		color:#FFFFFF;	
		background-color:#303030;
		border-radius:5px; /*角丸*/
		opacity:0.8;
		border:solid 1px #808080;	
		font:12px 'ＭＳ Ｐゴシック';
		text-align:left;
	}
	.staus_string_box1{
		position:absolute;
		margin:auto;
		padding:5px;
		left:0px;
		width:35%;
		height:50%;
		color:#FFFFFF;
		background-color:#303030;
		font:12px 'ＭＳ Ｐゴシック';
		text-align:left;
		letter-spacing: 0.0em;
		float:right;
	}
	.staus_string_box2{
		position:absolute;
		margin:auto;
		padding:5px;
		left:110px;
		width:55%;
		height:50%;
		color:#FFFFFF;
		background-color:#303030;
		font:12px 'ＭＳ Ｐゴシック';
		text-align:left;
		letter-spacing: 0.0em;
	}
	.staus_string_box3{
		position:absolute;
		margin:auto;
		padding:5px;
		top:160px;
		left:0px;
		width:90%;
		height:40%;
		color:#FFFFFF;
		background-color:#303030;
		font:12px 'ＭＳ Ｐゴシック';
		text-align:left;
		letter-spacing: 0.0em;
	}
	.mainmenu{
		line-height: 1.0em;
	}
}
	
}
