/*
	ボディ部の基本設定
*/
body, div {
	padding: 0;
	margin: 0;
	border: 0;
}

body {
	width: 100%;
	padding: 0;
	margin: 0px;
	border: 0;
	text-align: left;
	background-color: white;
}
/*
	ヘッダー部の基本設定
*/
header {
	width: 100% border-box;
	height: 50px; 
	padding: 0;
	padding-top: 5px;
	margin: 0px;
	border: 0;
	text-align: center;
	background-color: #eeeeee;
}
/*
	フッター部の基本設定
*/
footer {
	width: 100% border-box;
	padding: 0;
	margin: 0 auto;
	border: 0;
	height: 250px; 
	text-align: left;
	font-size: 9pt;
	background-color: #eeeeee;
	clear: both;
}
/*
	ボディー部内のコンテンツ部分（だと思う）
*/
div#content {
	width: 100% border-box;
}
/*
	ボディー部内のグラフ表示部分（幅可変）
*/
div#main {
	box-sizing: border-box;
	width: calc(100% - 200px);
	height: calc(100vh - 300px);
	border: 0;
	padding: 10px;
	margin: 0 auto;
	background-color: white;
	float: left;
}
div.container {
	background-color: white;
}
div.menus {
	background-color: white;
	width: 100%;
}
/*
	ボディー部内の変数指定部分（幅固定）
*/
navi {
	background-color: white;
	overflow: scroll; 
	font-size: 10pt;
	text-align: left;
	width: 200px;
	height: 100vh;
	float: right;
}
/*
	フッター部左、デバッグメッセージ部分
*/
div.debugMessage {
	white-space: pre;
	box-sizing: border-box;
	width: 400px;
	height: 100vh;
	border: none;
	padding: 10px;
	margin: 0;
	height: 250px; 
	background-color: #e0e0e0;
	overflow: auto; 
	float: right;
	scroll-snap-align: start;
}

/*
	縦書き表示の設定
	色んなところからの寄せ集め
*/
div.explanation {
	box-sizing: border-box;
	width: calc(100% - 400px);
	border: none;
	padding: 10px;
	height: 250px; 
	background-color: #eeeeee;
	overflow: auto; 
	overflow: overlay;
	float: left;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-orientation: upright;
	text-orientation: -webkit-upright;
}

.text-combine {			/* 縦書き中、縦中横の指定 */
	-webkit-text-combine: horizontal;
	-ms-text-combine-horizontal: all;
	text-combine-upright: all;
}
div.explanation a.Japanese {	/* 縦書き中のa link（日本語時） */
	text-decoration: none;
	border-right: 1px dashed;
	border-right: 1px solid;
	padding-right: 3px;
	text-decoration: overline;
}
div.explanation a.western {	/* 縦書き中のa link（欧文時） */
	text-decoration: none;
	text-decoration: underline;
}
div.explanation a:hover {	/* 縦書き中のa link（カーソルが乗っている時） */
	color: skyblue;
	font-size: 1em;		/* 文字サイズx倍 */
	font-weight: bold;
}

div.explanation p {		/* 縦書き中のパラグラフ */
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 0;
	margin-right: 0;
	text-indent: 1em;
}

div.debugMessage p {		/* debug表示のパラグラフ */
	white-space: normal;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 0;
	margin-right: 0;
	text-indent: 1em;
}
div.debugMessage h2 {		/* debuger表示の表題 */
	white-space: normal;
	margin: 0;
	margin-bottom: 10px;
	padding: 10px;
	color: red;
	background	: #ffff;
	text-align: center;
	font-family: sans-serif;
}
div.debugMessage b {
	font-family: sans-serif;

}

rt {		/* ルビの設定 */
	font-size: .7em;
}


/*
	どっかで使っている（どこだ？）
*/
div.scrollbox {
	width: 100vw;
	border: 0;
	padding: 0;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
	overflow-y: auto;
}
/*
	隠しブロック内の文字設定
*/
div.hidebox {
	font-size: 10pt;
}

/*
	見出しの設定
*/
h1.center {		/* タイトルに使用 */
	font-size: 18pt;
	text-align: center;
	margin-top: 5px;
	margin-bottom: 4px;
	padding: 0;
}

h2 {		/* 解説に使用 */
	font-size: 12pt;
	text-align: left;
	margin-top: 18px;
	margin-bottom: 4px;
	margin-left: 1em;
	padding-top: 10px;
	padding-bottom: 0px;
}
h3 {		/* 解説に使用 */
	font-size: 10pt;
	text-align: left;
	margin-top: 14px;
	margin-bottom: 4px;
	margin-left: 1em;
	padding-top: 0px;
	padding-bottom: 0px;
}
h4 {		/* プロット選択の表題として使用 */
	font-size: 10pt;
	text-align: left;
	margin-top: 4px;
	margin-bottom: 2px;
	margin-left: 0em;
	padding-top: 0px;
	padding-bottom: 0px;
}

/*
	プロット支持域のセレクト欄
*/
select {
	background-color: white;
	width: 100%;
	font-size: 10pt;
}

option {
	font-size:10pt;
}

/*
	再プロットボタン
*/
.button {
	display		: inline-block;
	border-radius : 5%;			/* 角丸       */
	font-size	: 12pt;			/* 文字サイズ */
	text-align	: center;		/* 文字位置   */
	cursor		: pointer;		/* カーソル   */
	padding		: 5px 12px;		/* 余白       */
	background	: #e67168;		/* 背景色     */
	color		: #ffffff;		/* 文字色     */
	line-height	: 0.8em;		/* 1行の高さ  */
	opacity		: 0.9;			/* 透明度     */
	transition	: .3s;			/* なめらか変化 */
	box-shadow	: 1px 1px 3px #666666;  /* 影の設定 */
	width		: 100%;
}
.button:hover {
	box-shadow    : none;        /* カーソル時の影消去 */
	opacity       : 1;           /* カーソル時透明度 */
}


/*
	選択していることを下線で表すようにする。
	https://qiita.com/mmmmk/items/af1fc50fd6ce0a30a756
*/
.radio-button-container {
	color: #404040;
	font-size: 12px;
	font-weight: bold;
	margin-top: 4px;
	.radio-button-label {
		margin-bottom: 4px;
	}
	.contents {
		display: flex;
		align-items: center;
		span {
			font-size: 10px;
			padding-right: 6px;
		}
		.radio-buttons {
			display: inline-flex;
			justify-content: space-between;
			height: 25px;
			margin: 0;
			padding: 0;
			label {
				padding: 0 3px;
				margin: 0 6px;
				cursor: pointer;
			}
			input[type=radio] {
				display: none;
				&:checked + label {
					border-bottom: 3px solid #FFFF00;
					background-color: #FFFF00;
				}
			}
		}
	}
}


/*
	ついつい押したくなる、CSS3を使ったラジオボタンのデザイン
	http://weboook.blog22.fc2.com/blog-entry-379.html
*/
.webparks input {
	display: none;
}
.webparks label{
	display: block;
	float: left;
	cursor: pointer;
	margin: 1px;
	padding: 6px;
	background: #dddddd;
	color: black;
	font-size: 10px;
	font-weight: bold;
	font-family: sans-serif;
	text-align: center;
	line-height: 1;
	transition: .2s;
}
.webparks label:first-of-type {
	border-radius: 2px 0 0 2px;
}
.webparks label:last-of-type {
	border-radius: 0 3px 3px 0;
}
.webparks input[type="radio"]:checked + .switch-on {
	background-color: #a1b94d;
	color: white;
}
.webparks input[type="radio"]:checked + .switch-off {
	background-color: #e67168;
	color: white;
}

table {
	border: 1px solid #ccc;
	line-height: 1.5;
	align: center;
	cellpadding: 4px;
	font-size: 10pt;
	overflow: scroll;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}
th {
	background-color: #ccc;
	color: white;
}
table tr:nth-child(odd){
  background-color: #eee
}