@charset "UTF-8";
html { font-size: 1rem; scroll-behavior: smooth; }
body { color:#000000; background-color:#CCC; font-size:1.0em; line-height:2.0; padding:0; margin:0; /*font-family: serif;*/ }

/* .wrapperでmainとasideをラッピングする */
#header_wrapper { display:flex; justify-content: center;background: linear-gradient(0deg, #DDD, #EEE); }
#main_wrapper { display:flex; justify-content: center; background-color:#FFF; padding-top:1.5em; padding-bottom: 2em; }
#footer_wrapper { display:flex; justify-content: center; background-color:#CCC; }
header { padding: 1.5em 1em 1em 1em; background: linear-gradient(0deg, #DDD, #EEE); width: 65em; }
main{ padding: 0.5em 1em; background-color:#FFF; width: 51em; max-width:auto; border-radius: 1em; }
aside { padding: 0.5em 1em; background-color:#FFF; width: 12em; }
footer { padding: 0.5em 1em; background-color:#CCC; width: 65em; }

/*表示・非表示*/
.pc {
	position: static;
	left: 0;
	height: auto;
	width: 100%;
	max-width: 100%;
	overflow: visible;
}
.mobile {
	position: absolute;
	left: -9999px; /* 画面の外に追い出す */
	height: 0;
	width: 100%;
	max-width: 40rem; /* 広告サイズ対策 */
	overflow: hidden;
}

/*中央揃え*/
.center { text-align: center; width: auto; }

/* リンク */
a:link { color: #0000CC; text-decoration: underline; }
a:visited { color: #660099; }
a:hover { color: #ff6666; text-decoration: underline; }
a:active { text-decoration: underline; }

/*画像の最大幅*/
img { max-width: 100%; }

/*-------------------------------------------------------
メインコンテンツへのリンク                                            *
 -------------------------------------------------------*/

.title_logo { width:12em; max-width:100%; }
.title_logo2 { width:16em; max-width:100%; }

.main_link {
	padding: 1.5em;
	border-radius: 1em;
	margin-bottom: 1em;
}
.main_link:hover { opacity: 0.75; }

/* メインコンテンツのリンク */
.main_a:link { color: #FFF; text-decoration: none; }
.main_a:visited { color: #FFF; }
.main_a:hover { color: #FFF; text-decoration: none; }
.main_a:active { text-decoration: none; }

#rongo { background-color:#6B8E23; }
#daigaku { background-color:#4682B4; }
#moushi { background-color:#a071a8; }
#chuuyou { background-color:#bf677b; }

#gokyou1 { background-color:#b58a65; }
#gokyou2 { background-color:#b58a65; }
#gokyou3 { background-color:#b58a65; }
#gokyou4 { background-color:#b58a65; }
#gokyou5 { background-color:#b58a65; }

#koushi { background-color:#777; }

/*-------------------------------------------------------
header内のスタイル
-------------------------------------------------------*/
header img { max-width: 100%; width: 16em; opacity: 0.9; }
header img:hover { opacity: 0.5; }


/*-------------------------------------------------------
main内のスタイル
-------------------------------------------------------*/

h1 {
	font-size:1.6em; line-height:1.4;
	position: relative;
	padding: 0 0 1em 0;
	font-family: serif;
}

h2 {
	font-size:1.4em; line-height:1.4;
	/*margin-top: 4em;*/
	position: relative;
	padding: 0 0 0 0.75em;
	border-left: solid 0.5em DarkOrange;
	font-family: serif;
}

h3 {
	font-size:1.2em; line-height:1.4;
	margin-top: 2em;
	/*border-left: 0.5em solid Orange;*/
	/*border-bottom: 0.1em solid Orange;*/
	font-family: serif;
}
h3:before {
	position: relative;
	content: '▶'; margin-right: 0.5em;
	color: DarkOrange;
}

main hr {
	margin: 4em 0;
	border: none;
	border-bottom: #ccc 0.2em solid;
}
.top {
	margin: 1em 0;
	border: none;
	border-bottom: #ccc 0.1em solid;
}
.spacer1 { margin-top: 2em; }
.spacer2 { margin-top: 4em; }


#chapters { padding:0;}
#chapters li { list-style: none; font-size: 1.1em; margin: 0.5em 0em;}
#chapters li:before { content: '●'; margin-right: 0.5em; }

.syou { padding:0;}
.syou li { list-style: none; font-size: 1.1em; margin: 0.5em 0em;}
.syou li:before { content: '▶'; margin-right: 0.5em; }

/* 各章の訳文メイン */
#yakubun {
	font-size:1.2em;
	line-height:2.0;
	/*padding: 1em 0.5em;
	background-color: #FFEEDD;
	color: #291c12;
	border-bottom: solid 0.15em #CCBBAA;
	border-right: solid 0.15em #CCBBAA;
	border-radius: 0.5em;*/
}
/*括弧（）*/
.kakko {
	/*font-size: 1em;*/
	color: #888888;
}
.kakko2 {
	/*font-size: 1em;*/
	color: #888888;
}
/* 補注（現代語訳の） */
.hochu {
	color: #666666;
	padding: 0.5em;
	margin-top: 1.5em;
	background-color: #DFDFDF;
	border-radius: 0.5em;
	position: relative;

}
.hochu:after {
	/* box3の▲ */
	bottom: 100%;
	left: 5em;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(255, 255, 255, 0); /*下の１行と同じ色*/
	border-bottom-color: #DFDFDF;
	border-width: 0.75em;
	margin-left: -1em;
}
.hochu ul {
	padding-left: 1.5em;
}
/* 意訳 */
#iyaku {
	/*font-size:1.25em;*/
	font-size:1em;
	/*padding: 1em 0.5em;
	background-color: #fef6c7;
	border-bottom: solid 0.15em #cec48d;
	border-right: solid 0.15em #cec48d;
	border-radius: 0.5em;*/
}
/* 原文と書き下し文 */
#genbun {
	/*background-color: #FFFFFF;*/
	color: #333333;
	/*padding: 0.5em 0.5em;*/
	font-size: 0.9em;
	border-radius: 0.5em;
}
.g_td {
	padding: 0.75em 0 0 0;
	white-space:nowrap; vertical-align:middle;
	border-bottom: dashed 1px #CCCCCC;
	line-height: 1em; } /* 原文のtd */
.kk_td {
	padding: 0.75em 0 0 0;
	min-width:6em; vertical-align:middle;
	border-bottom: dashed 1px #CCCCCC;
} /* 書き下し文のtd */
.kkkana { font-size:0.6em; color:#333333; } /* 書き下し文の読みがなは廃止 */

/* 次へと前へ*/
.next { font-size: 1.1em; }
.next:before { content: '▶'; margin-right: 0.5em; }
.prev { font-size: 1.1em; }
.prev:before { content: '◀'; margin-right: 0.5em; }
.to_chapters { font-size: 1em; }
.to_chapters:before { content: '●'; margin-right: 0.5em; }

/* トップへ*/
.to_top { font-size: 1em; }

#various { padding:0;}
#various li { list-style: none; font-size: 1em; margin: 0.25em 0em;}

/*ボタン*/
.button {
	background-color: Pink;
	font-size: 1em;
	color: #000;
	padding: 1em;
	border-radius: 1em;
}

big { font-size: 1.1em; }
small { font-size: 0.9em; }

.color { color: Red; }

/* 広告 */
.ads { color: #999; }

/*-------------------------------------------------------
aside内のスタイル
-------------------------------------------------------*/

aside hr {
	margin: 2em 0;
	border: none;
	border-bottom: #ccc 0.2em solid;
}

aside .sticky {
	position: sticky;
	display:flex; justify-content: center;
	/*text-align: center;*/・
	width: auto;
	top: 1em; /* スクロール時にビューポートの20px位置に達すると固定 */
}

/*-------------------------------------------------------
footer内のスタイル
-------------------------------------------------------*/

footer #copy { font-size: 0.9em; text-align: right; }


/*-------------------------------------------------------
ページトップリンク用
-------------------------------------------------------*/

.pagetop {
	height: 2.5rem;
	width: 2.5rem;
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	background: #fff;
	border: solid 0.1rem #000;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
	/*   デフォルトは非表示 */
	opacity: 0;
}
.pagetop:active {
    box-shadow: 0 0 0.8rem Orange;
}
.pagetop__arrow {
	height: 0.8rem;
	width: 0.8rem;
	border-top: 0.2rem solid #000;
	border-right: 0.2rem solid #000;
	transform: translateY(20%) rotate(-45deg);
}


/*-------------------------------------------------------
スマホのスタイル
-------------------------------------------------------*/
@media screen and (max-width: 50rem) {
	body{ font-size: 1em; line-height: 1.8em; }

	header img { width: 12em; }

	#header_wrapper { display:block; }
	#main_wrapper { display:block; padding-top:0; padding-bottom:0; }
	#footer_wrapper { display:block; }
	header { width: auto; }
	main { width: auto; border-radius: 0;}
	aside { width: auto; background-color: #fff; }
	footer { width: auto; }

	aside .sticky { position: static; }
	.mobile {
		position: static;
		left: 0;
		height: auto;
		width: 100%;
		max-width: 100%;
		overflow: visible;
	}
	.pc {
		position: absolute;
		left: -9999px; /* 画面の外に追い出す */
		height: 0;
		width: 100%;
		max-width: 100%;
		overflow: hidden;
	}

	#chapters li { font-size: 1em; }
	.syou li { font-size: 1em; }
	#yakubun { font-size: 1em; }

	h1 { font-size: 1.2em; }
	h2 { font-size: 1.2em; }
}