/*
	ボディ部の基本設定
*/
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: inherit;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	scroll-behavior: smooth;

}

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

body {
	width: 100% border-box;
	background-color: #eeeeee;
	font-size: 10pt;
	line-height: 2.0em;
}
/*
	ヘッダー部の基本設定
*/
header {
	width: 100% border-box;
	height: 80px; 
	padding: 0;
	padding-top: 5px;
	margin: 0px;
	border: 0;
	text-align: center;
	background-color: #eeeeee;
}
/*
	フッター部の基本設定
*/
footer {
	width: 100% border-box;
	padding: 0;
	margin: 0;
	border: 0;
	height: 70px; 
	text-align: left;
	background-color: #eeeeee;
	clear: both;
	overflow: auto;
}
/*
	ボディー部内のコンテンツ部分（だと思う）
*/
div#content {
	width: 100% border-box;
	background-color: #eeeeee;
}
focusElement {
	scroll-margin-top: 0px;
	margin-bottom: 50px;

}
/*
	ボディー部内のグラフ表示部分（幅可変）
*/
div#main {
	box-sizing: border-box;
	width: 100%;
	height: calc(100vh - 100px);
	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; 
	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; 
	text-align: left;
	float: right;
}

h2.title {
	font-size: 100%;
	font-family: sans-serif;
	text-align: left;
	padding: 1em;
	margin: 0;
	text-indent: -1em;
	line-height: 180%;
}
h3.title {
	font-size: 80%;
	font-family: sans-serif;
	text-align: left;
	padding: 0em;
	margin-right: 3em;
	text-indent: -1em;
	line-height: 100%;
}
/*
	本文（縦書き表示）の設定
	色んなところからの寄せ集め
*/
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: 10px;
	padding-right: 10px;
	margin: 0;
	background-color: #fafafa;
	overflow: auto; 
	overflow: scrool;
	float: right;
	word-break: normal;
	font-size: 120%;
	line-height: 180%;

	-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.explanation::-webkit-scrollbar{
	display:none;   /* Safari, chrome 対応 */
}
div.section::-webkit-scrollbar{
	display:none;   /* Safari, chrome 対応 */
}
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;
	font-size: 400%;
	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;

}
ruby > rt {
	font-size: 50%;
}
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:link {	/* 縦書き中のa link（基本） */
	font-size: 1em;		/* 文字サイズx倍 */
	color: 0000FF;
	font-weight: bold;
}
/*
	縦書き中のページナビ専用
*/
div.explanation a#pageNavi {
	font-size: 120%;
	line-height: 180%;
	font-family: serif;
	text-align: right;
	padding-top: 2em;
	padding-bottom: 2em;
	padding-left: 1.0em;
	padding-right: 1.0em;
	margin: 0;
	margin-left: 2.5em;
	margin-right: 0.5em;
	text-indent: 0em;
}
div.explanation a#pageNavi:link {
	font-style: sans-serif;
	color:#6060F0;
}
div.explanation a#pageNavi:visited {
	font-style: sans-serif;
	color:#8888FF;
}
div.explanation a#pageNavi:hover {
	font-style: serif;
	color:#FF9900;
}
div.explanation a#pageNavi:active {
	font-style: serif;
	color:#33CC00;
}


section#title {
	font-size: 110%;
	padding: 0.5em;
}
section#text {
	font-size: 100%;
}
section#foreword {
	font-size: 90%;
}
section#afterword {
	font-size: 90%;
}
section#nextpage {
	font-size: 110%;
	padding-top: 3em;
	padding-bottom: 2em;
	padding-left: 1.5em;
	padding-right: 2em;
	background-color: #fafafa;
}

div.explanation a#pageNavi:hover {		/* 縦書き中のページナビ専用 */
	color: red;
	font-weight: bold;
}
div.explanation a#pageNavi:active {		/* 縦書き中のページナビ専用 */
	color: red;
	font-weight: bold;
}

div.mobile-explanation a#pageNavi {		/* 縦書き中のページナビ専用 */
	font-size: 120%;
	font-family: serif;
	text-align: right;
	margin: 0;
	text-indent: -4em;
}

div.explanation {
/*	font-family: 'Yuji Syuku', serif;
	font-family: 'New Tegomin', serif;	*/
	font-family: serif;
}

div.explanation p {		/* 縦書き中のパラグラフ */
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 0;
	margin-right: 0;
	text-indent: 1em;
	text-align: justify;
}
div.explanation p.stickOut {
	margin-top: 2em;
	text-indent: -2em;
}
div.explanation p.indentation {
	margin-top: 2em;
	text-indent: 0em;
}
div.explanation p.foreword {
	color: #666666;
}
div.explanation p.afterword {
	color: #666666;
}
div.explanation p.noDrop {
	margin-top: 0em;
	text-indent: 0.5em;
}
div.explanation p.separater {
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 0;
	margin-right: 0;
	text-indent: 0;
	text-align: center;
}
div.explanation p.blank {
	margin-top: 2em;
	text-indent: -2em;
	line-height: 1.0em;
}
div.explanation p.pagenavi {
	line-height: 1.0em;
}

medium {
	text-size: 180%;
}

small {
	text-size: 70%;
}


div.mobile-explanation p {		/* 縦書き中のパラグラフ */
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 0;
	margin-right: 0;
	text-indent: 1em;
	font-family: serif;
	line-height: 1.75em
	text-align: justify;
}
div.mobile-explanation p.stickOut {
	margin-top: 2em;
	text-indent: -2em;
}
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: .3em;
}

/*
	フッター部左、デバッグメッセージ部分
*/
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;
}


/*
	Footer部
*/
div.scrollbox {
	border: 0;
	padding: 0;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
	overflow: scroll;
}
/*
	隠しブロック内の文字設定
*/
div.hidebox {
	font-size: 100%;
}

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

div.mobile-explanation h2 {
	font-size: 400%;
	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: 125%;
	text-align: left;
	margin-top: 3em;
	margin-bottom: 1em;
	margin-right: 1em;
	margin-left: 1em;
	padding-top: 0em;
	padding-bottom: 0;
	padding-right: 0em;
	text-indent: -2em;
}
h3 {		/* 解説に使用 */
	font-size: 100%;
	text-align: left;
	margin-top: 2em;
	margin-bottom: 0;
	margin-right: 2em;
	margin-left: 1em;
	padding-top: 1em;
	padding-bottom: 0;
	padding-right: 0em;
	text-indent: -1em;
}
h4 {		/* プロット選択の表題として使用 */
	font-size: 100%;
	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: 100%;
}

option {
	font-size:100%;
}

/*
	再プロットボタン
*/
.button {
	display		: inline-block;
	border-radius : 5%;			/* 角丸       */
	font-size	: 120%;			/* 文字サイズ */
	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: 100%;
	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: 100%;
}
th {
	background-color: #ffdddd;
}
table tr:nth-child(odd){
	background-color: #eee;
}

p.title {
	font-size: 90%;
	margin-top: 3px;
	margin-bottom: 1px;
	margin-left: 10px;
	margin-right: 0;
	text-indent: -1em;
	font-family: serif;
	font-size: 80%;
	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: 130%;
	text-align: center;
	color: white;
	background-color: $eeeeee;
	float: left;
}

.context {
	width: calc(100% - 80px);
	height: 100px; 
	font-size: 100%;
	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: 20pt;
	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;
}

navi a {
	font-weight:bold;
	font-style: selif;
	text-decoration:none; 
}
navi a:link {
	font-style: sans-serif;
	color:#0000FF;
}
navi a:visited {
	color:#8888FF;
}
navi a:hover {
	color:#FF0099;
}
navi a:active {
	color:#33CC00;
}