/*
	ボディ部の基本設定
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	border: 0;
	font-size: 100%;
	font: inherit;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

h1, h2 h3, h4, h5, h6 {
	padding: 0;
	margin: 0;
	border: 0;
}

body {
	width: 100% border-box;
	background-color: #eeeeee;
}
/*
	ヘッダー部の基本設定
*/
header {
	width: 100% border-box;
	height: 50px; 
	padding-top: 5px;
	text-align: center;
	background-color: #eeeeee;
}
/*
	フッター部の基本設定
*/
footer {
	width: 100% border-box;
	height: 50px; 
	text-align: left;
	font-size: 9pt;
	background-color: #eeeeee;
	clear: both;
	overflow: auto; 
}
/*
	ボディー部内のコンテンツ部分（だと思う）
*/
div#content {
	width: 100% border-box;
}
/*
	ボディー部内のグラフ表示部分（幅可変）
*/
div#main {
	box-sizing: border-box;
	width: 100%;
	height: calc(100vh - 150px);
	border: 0;
	padding: 0;
	margin: 0;
	background-color: #eeeeee;
}
div#mobile-main {
	box-sizing: border-box;
	width: 100%;
	height: calc(100vh - 150px);
	border: 0;
	padding: 0;
	margin: 0;
	background-color: #eeeeee;
}
/*
	空きスペース部分
*/
blank {
	box-sizing: border-box;
	width: 200px;
	height: calc(100vh - 150px);
	border: none;
	padding: 0;
	margin: 0;
	background-color: #eeeeee;
	overflow: scroll; 
	font-size: 10pt;
	text-align: left;
	float: right;
}
/*
	メニュー部分
*/
navi {
	box-sizing: border-box;
	width: 200px;
	height: calc(100vh - 150px);
	border: none;
	padding: 10px;
	margin: 0;
	background-color: #eeeeee;
	overflow: auto; 
	font-size: 10pt;
	text-align: left;
	float: right;
}
/*
	本文（縦書き表示）の設定
	色んなところからの寄せ集め
*/
div.explanation {
	box-sizing: border-box;
	width: calc(100% - 400px);
	height: calc(100vh - 150px);
	border: none;
	padding: 0;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
	padding-right: 20px;
	margin: 0;
	background-color: #fafafa;
	overflow: auto; 
	overflow: overlay;
	float: right;
	word-break: normal;

	-webkit-writing-mode: vertical-rl;
	-moz-writing-mode: vertical-rl;
	-ms-writing-mode: vertical-rl;
	-writing-mode: vertical-rl; 
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;

	text-combine-upright: digits;	/* 2 桁の数字を垂直テキスト内に水平に収めます */
	-ms-text-combine-horizontal: digits;
	-webkit-text-combine: horizontal;

	-webkit-text-orientation: mixed;
	-moz-text-orientation: mixed;
	-ms-text-orientation: mixed;
	text-orientation: mixed;

	text-justify: inter-word;
	text-align: justify;

}
div.mobile-explanation {
	box-sizing: border-box;
	width: 100vw;
	height: 100vh;
	border: none;
	padding: 0;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
	padding-right: 20px;
	margin: 0;
	background-color: #fafafa;
	overflow: auto; 
	overflow: overlay;
	float: right;
	word-break: normal;
	text-orientation: mixed;
	text-justify: inter-ideograph;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-orientation: upright;
	text-orientation: -webkit-upright;
	text-align: justify;
}


.text-combine, .tateyoko {			/* 縦書き中、縦中横の指定 */
	text-combine-upright: all;
	-webkit-text-combine: horizontal;
	-ms-text-combine-horizontal: all;

}
a {	/* 縦書き中のa link 共通 */ 
	text-decoration: none;
}
div.explanation a.Japanese {	/* 縦書き中のa link 日本語時（標準） */
	border-right: 1px solid;
	padding-right: 3px;
}
div.explanation a.western {	/* 縦書き中のa link 欧文時 */
	text-decoration: underline;
}
div.explanation a:hover {	/* 縦書き中のa link（カーソルが乗っている時） */
	font-size: 1em;		/* 文字サイズx倍 */
	color: skyblue;
	font-weight: bold;
}
div.explanation a#pageNavi {		/* 縦書き中のページナビ専用 */
	font-size: 14pt;
	font-family: serif;
	text-align: right;
	padding-top: 3em;
	padding-bottom: 2em;
	padding-left: 1.0em;
	padding-right: 1em;
/*	background-color: #bbcbbc;	*/
	margin: 0;
	margin-left: 1.5em;
	text-indent: -2em;
}
div.mobile-explanation a#pageNavi {		/* 縦書き中のページナビ専用 */
	font-size: 40pt;
	font-family: serif;
	text-align: right;
	padding-top: 3em;
	padding-bottom: 2em;
	padding-left: 1.5em;
	padding-right: 2em;
	background-color: #fafafa;
	margin: 0;
	text-indent: -2em;
}
/*
a:link {
	color: #0000ff;
}
a:visited {
	color: #00ccff;
}
a:active {
	color: red;
	font-weight: bold;
}
*/

small {
	font-size: 80%;
}
div.explanation p {		/* 縦書き中のパラグラフ */
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 0;
	margin-right: 0;
	text-indent: 1em;
	font-family: serif;
	font-size: 1em;
	line-height: 1.7em
	text-align: justify;
}
div.explanation p.stickOut {
	margin-top: 2em;
	text-indent: -2em;
}

div.mobile-explanation p {		/* 縦書き中のパラグラフ */
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 0;
	margin-right: 0;
	text-indent: 1em;
	font-family: serif;
	font-size: 1em;
	line-height: 1.7em
	text-align: justify;
}
div.mobile-explanation p.stickOut {
	text-indent: -4em;
}
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.debugMessage {
	white-space: pre;
	box-sizing: border-box;
	width: 50%;
	height: calc(100vh - 100px);
	border: none;
	padding: 3px;
	padding-left: 0;
	margin: 0;
	font-family: serif;
	background-color: #ccc;
	overflow: scroll; 
	float: right;
}


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

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

div.mobile-explanation h2 {
	font-size: 3em;
	text-align: left;
	margin-top: 6em;
	margin-bottom: 2em;
	margin-left: 1.5em;
	padding-top: 10px;
	padding-bottom: 0px;
	padding-right: 2em;
	text-indent: -1em;
}
h2 {		/* 解説に使用 */
	font-size: 14pt;
	text-align: left;
	margin-top: 6em;
	margin-bottom: 2em;
	margin-left: 1.5em;
	padding-top: 10px;
	padding-bottom: 0px;
	padding-right: 2em;
	text-indent: -1em;
}
h3 {		/* 解説に使用 */
	font-size: 10pt;
	text-align: left;
	margin-top: 14px;
	margin-bottom: 4px;
	margin-left: 1em;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-right: 2em;
	text-indent: -1em;
}
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;           /* カーソル時透明度 */
}




/*
	ついつい押したくなる、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;
}
th {
	background-color: #ffdddd;
}
table tr:nth-child(odd){
  background-color: #eee
}

p.title {
	test-size: 9pt;
	margin-top: 3px;
	margin-bottom: 1px;
	margin-left: 10px;
	margin-right: 0;
	text-indent: -1em;
	font-family: serif;
	font-size: 8pt;
	line-height: 1.7em
}

.scroll-snaps-container {
	overflow: auto;
	scroll-snap-type: y;
}

.scroll-snaps {
	width: 100%;
	height: 100px; 
	scroll-snap-align: start;
}

.child {
	background-color: #eeeeee;
}

.index {
	width: 80px;
	height: 100px; 
	font-size: 30px;
	text-align: center;
	color: white;
	background-color: $eeeeee;
	float: left;
}

.context {
	width: calc(100% - 80px);
	height: 100px; 
	font-size: 10pt;
	background-color: $eeeeee;
	float: right;
}

p.text {
	margin-left: 20px;
}

/*
	コピペ実装！CSSだけで作れるお洒落で使いやすいボタン◉サンプルコード12選
	https://grow-group.jp/archives/2674/
	ここから下がボタンのCSS
*/
.btn-border {
  display: inline-block;
  max-width: 30px;
  text-align: left;
  border: 1px solid #ffffff;
  font-size: 20px;
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 4px;
  transition: .4s;
}

.btn-border:hover {
  background-color: #9ec34b;
  border-color: #cbe585;
  color: #FFF;
}
/*	【CSS】CSSだけで作るドロップダウンメニュー（多階層）
	https://webdesignday.jp/inspiration/technique/css/5793/
*/
.gnav {
    display: flex;
    height: 2rem;
    margin: 0 auto;
    width: 100px;
}
/*全てのリスト・リンク共通*/
.gnav li {
    list-style: none;
    position: relative;
}
.gnav li a {
    background: #001b34;
    border-right: 1px solid #eee;
    color: #fff;
    display: block;
	text-size: 9pt;
    height: 2rem;
    line-height: 1rem;
    text-align: left;
    text-decoration: none;
    width: 100px;
}
/*子階層以降共通*/
.gnav li li {
    height: 0;
    overflow: hidden;
    transition: .5s;
}
.gnav li li a {
    border-top: 1px solid #eee;
}
.gnav li:hover > ul > li {
    height: 2rem;
    overflow: visible;
}

navi h1 {
	align: center;
	font-size: 14pt;
	padding: .5em;
	margin: 6px;
	background-color: #bbcbbc;
}
navi h2 {
	margin: 0;
	padding: 0;
	padding-right: 2em;
	text-indent: -1em;
	align: left;
	font-size: 14pt;
}