html {
font-size: 62.5%;
}
body {
font-family: 游ゴシック体, 'Yu Gothic', 'Hiragino Kaku Gothic Pro', serif;
background-color: #83baeb;
margin: 0px;
padding: 0px;
text-shadow: 0px 0px 0px #000;
font-weight: 500;
font-size: 14px;
}
#outer {
background-color: #f0f8ff;
margin: 0px auto 0px auto;
width: 90vw;
color: black;
line-height: 160%;
}
#titleheader {
top: 0;
left: 0;
margin: 0 auto;
width: 100%;
height: 80px;
background-color: #6080f4;
display: flex;
/* justify-content: space-between; */
/* justify-content: left; */
align-items: center;
position: sticky;
object-fit: contain;
}
#titleheader img {
margin-left: 20px;
}
.boxright {
background-color: #6080f4;
color: black;
font-size: 1.6rem;
padding: 8px;
width: auto;
height: 32px;
margin-left:auto;
}
.rbtn1{
/* float: right; */
font-size: 1.2em;
margin-right: 6px;
padding: 1px;
vertical-align: middle;
}
/* 全体の外枠 */
.app-container {
display: grid;
/* 横方向の分割：
1カラム目（メイン）＝ 100%（画面幅いっぱい）
2カラム目（目次） ＝ 250px（スマホでも右側にはみ出る固定幅）
*/
grid-template-columns: 100% 300px;
width: 100%;
/* 全体の幅は画面ぴったりに固定 */
height: calc(100vh - 90px);
/* height: 100vh; */
/* 高さも画面ぴったりに固定 */
overflow-x: auto;
/* 【重要】横方向にはみ出た分をスクロール可能にする */
overflow-y: hidden;
/* 縦全体のスクロールバーは隠す */
scroll-snap-type: x mandatory;
/* 【おまけ】スマホでスクロールした時にピタッと止まるようにする設定 */
}
/* 左側のメインコンテンツ */
.main-content {
grid-column: 1;
overflow-y: auto;
/* 記事本文は縦にスクロール可能にする */
padding: 20px;
font-size: 16px;
scroll-snap-align: start;
/* スナップの基準点 */
}
/* .subt {
border-bottom: solid 1px #e2f09c;
} */
/* 右側の目次（サイドバー） */
.sidebar-toc {
grid-column: 2;
overflow-y: auto;
/* 目次が長くなったら、ここも縦スクロール可能に */
padding: 20px;
background-color: #aab6f2;
/* メインと区別がつくように背景色をつける */
border-left: 2px solid #093bd3;
scroll-snap-align: end;
/* スナップの基準点 */
}
/* 1. 全体を明朝体（Serif）にしてローマの歴史感を演出 */
.mbutton,
.bookname {
font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
/* font-size:18px; */
}
/* 3. 作品名ボタン（De Bello Gallico など） */
.mbutton {
font-size: 1.0em;
/* border: 2px solid #2908cb; */
/* background-color: rgb(17, 6, 142); */
/* ラテン語タイトルを主役に */
color: black(21, 21, 21);
cursor: pointer;
padding: 4px 0;
transition: color 0.2s;
/* margin-left: 20px; */
margin-top: 0;
margin-bottom: 0px;
/* padding-left: 20px; */
line-height: 1.2;
text-align: left;
/* border-radius: 10px; */
/* width:280px; */
}
/* マウスを乗せたとき（スマホならタップした瞬間）の色変化 */
.bookname:hover {
color: #ff4500;
/* 鮮やかな赤に変えて「ボタン感」を出す */
text-decoration: underline;
/* 下線をつけてリンクだと分かりやすく */
}
.actionbutton:hover {
color: aquamarine;
text-decoration: underline;
}
/* 4. 日本語の補足（ガリア戦記 など） */
.smallcomment {
font-size: 0.8em;
color: black;
/* 控えめな薄いグレー */
margin-top: -4px;
margin-bottom: 0px;
text-align: right;
padding-right: 10px;
/* padding-left: 20px; */
/* 少し右にずらしてラテン語の「補足」感を出す */
}
.bookname {
font-size: 1.0em;
background-color: rgb(79, 67, 205);
color: white;
cursor: pointer;
padding: 4px 0;
transition: color 0.2s;
/* margin-left: 20px; */
margin-top: 4px;
margin-bottom: 6px;
padding-left: 10px;
line-height: 1.0;
text-align: left;
border-radius: 10px;
}
.actionbutton {
font-size: 1.0em;
background-color: rgb(17, 6, 142);
color: white;
cursor: pointer;
padding: 4px 0;
transition: color 0.2s;
/* margin-left: 20px; */
margin-top: 20px;
margin-bottom: 10px;
padding-left: 20px;
line-height: 1.2;
text-align: left;
border-radius: 10px;
/* width:280px; */
}
ul {
display: block;
}
/* --------------------------------------------------
PC用のレスポンシブ対応（画面が広いときは横並びにする）
----------------------------------------------------- */
@media (min-width: 768px) {
.app-container {
/* PCでは、メインを全体の75%、目次を25%にして画面内に収める */
grid-template-columns: 3fr 1fr;
overflow-x: hidden;
/* PCでは横スクロールを禁止にする */
width: 100%;
margin: 0 auto;
}
.main-content>h2 {
border-bottom: solid 1px #0c31eb;
font-family: 游明朝;
font-size: 1.2em
}
.main-content {
font-size: 1.2em;
}
}
/* --------------------------------------------------
スマホ用のレスポンシブ対応
----------------------------------------------------- */
@media (max-width: 768px) {
body {
font-family: 游ゴシック体, 'Yu Gothic', 'Hiragino Kaku Gothic Pro', serif;
background-color: #83baeb;
margin: 0px;
padding: 0px;
text-shadow: 0px 0px 0px #000;
font-weight: 650;
font-size: 15px;
}
#outer {
width: 100%;
}
.main-content>h2 {
border-bottom: solid 1px #0c31eb;
font-family: 游ゴシック体, 'Yu Gothic', 'Hiragino Kaku Gothic Pro', sans-serif;
font-size: 1.2em
}
#latinreader{
display:none;
}
#LRdownload{
display:none;
}
}
/* 以上 共通CSS*/
/*-------------------------------
Index用のTABのためのCSS
---------------------------------*/
#header {
color: midnightblue;
text-align: center;
font-size: 40px;
line-height: 60px;
font-family: 'Times New Roman'
}
/* ▼(B)タブ部分 */
.tabs {
display: block;
width: 120px;
height: 30px;
margin-top: 10px;
text-align: center;
border-radius: 6px 6px 0px 0px;
/* 角を丸くする */
background-color: midnightblue;
color: white;
font-size: 16px;
font-weight: bold;
line-height: 30px;
}
/* ▼(C)タブ中身のボックス */
div.tab {
overflow: auto;
clear: none;
color: white;
font-size: 14px;
background-color: midnightblue;
border-radius: 0 8px 8px 8px;
padding: 6px;
line-height: 1.2
}
div.tabf {
/* overflow: auto; */
clear: none;
color: whitesmoke;
font-size: 14px;
background-color: midnightblue;
border-radius: 0 8px 8px 8px;
padding: 6px;
column-count: 2;
}
.exist {
color: rgb(235, 245, 105);
}
div.tab div {
margin: 0px;
padding: 0 0 0 8px;
}
.tab {
-moz-column-width: 100px;
-webkit-column-width: 100px;
column-width: 100px;
}
div.tab div.bmark {
color: yellow;
}
div.tabf div.bmark {
color: yellow;
}
/* --------