@charset "Shift_JIS";

/* ============== */
/* タイプセレクタ */
/* ============== */

body{
background-color: #fff8dc;  /* 背景色：薄い黄色 */
font-family: "ＭＳ ゴシック",sans-serif;
color: #383838;  /* フォント色：黒に近いグレー */
} 

/* =============================================== */
/* IDセレクタ（一つのファイルで一度だけ使用できる）*/
/* =============================================== */

#outer {
width: 750px; /* ボックスの幅 */
padding: 10px; /* 内側の余白(上下左右) */
margin: 0 auto; /* 外側の余白（上下、左右） */
text-align: center;  /* テキストの水平位置：中央 */
}

#pagenavi {
margin-bottom: 5px;
font-size: 10pt; /* フォントサイズ */
text-align: left; /* テキストの水平位置：左 */
}

#title{
width: 700px;  /* ボックスの幅 */
border: 3px solid #99cc00;  /* 枠線：太さ3px、1本線、黄緑 */
padding: 3px 15px;  /* 内側の余白（上下、左右） */
background-color: #59b300;  /* 背景色：濃い黄緑 */
color: #ffffff;  /* フォント色：白 */
font-size: 16pt;  /* フォントサイズ */
font-weight: bold;  /* フォント太さ：強調 */
text-align: center;  /* テキストの水平位置：中央 */
}

#subtitle {
margin-top: 14px;  /* 上外側の余白 */
color: #ffff66; /* フォントの色：黄色 */
font-size: 12pt; /* フォントサイズ */
font-weight: bold; /* フォント太さ：強調 */
}

#footer {
font-size: 10pt; /* フォントサイズ */
text-align: center;  /* テキストの水平位置：中央 */
}

/* ==================================================== */
/* クラスセレクタ（一つのファイルで何度でも使用できる） */
/* ==================================================== */

.area_title{
border: 2px solid #00ccff;  /* 枠線：太さ2px、1本線、濃い水色 */
padding: 3px 15px;  /* 内側の余白（上下、左右） */
background-color: #bff8ff;  /* 背景色：水色 */
font-size: 12pt;  /* フォントサイズ */
font-weight: bold;  /* フォント太さ：強調 */
text-align: center;  /* テキストの水平位置：中央 */
}

.area1{
border-left: 15px solid #00ccff;  /* 枠線：太さ15px、1本線、濃い水色 */
padding: 3px;  /* 内側の余白 */
background-color: #bff8ff;  /* 背景色：水色 */
font-size: 10pt;  /* フォントサイズ */
font-weight: bold;  /* フォント太さ：強調 */
}

.area2{
padding: 3px;  /* 内側の余白 */
background-color: #d9ffff;  /* 背景色：薄い水色 */
font-size: 9pt;  /* フォントサイズ */
font-weight: bold;  /* フォント太さ：強調 */
text-align: center;  /* テキストの水平位置：中央 */
}

.chem_title{
border: 2px solid #32cd32;  /* 枠線：太さ2px、1本線、緑色 */
padding: 3px 15px;  /* 内側の余白（上下、左右） */
background-color: #b5ffb5;  /* 背景色：薄い緑色 */
font-size: 12pt;  /* フォントサイズ */
font-weight: bold;  /* フォント太さ：強調 */
text-align: center;  /* テキストの水平位置：中央 */
}

.chem1{
height: 40px;  /* ボックスの高さ */
border-left: 15px solid #32cd32;  /* 枠線：太さ15px、1本線、緑色 */
padding: 3px;  /* 内側の余白 */
background-color: #b5ffb5;  /* 背景色：薄い緑色 */
font-size: 10pt;  /* フォントサイズ */
font-weight: bold;  /* フォント太さ：強調 */
}

.chem2{
padding: 3px;  /* 内側の余白 */
background-color: #d7ffd7;  /* 背景色：ごく薄い緑色 */
font-size: 10pt;  /* フォントサイズ */
font-weight: bold;  /* フォント太さ：強調 */
text-align: center;  /* テキストの水平位置：中央 */
}

.dokusei1{
height: 30px;  /* ボックスの高さ */
border-left: 15px solid #aaaaff;  /* 枠線：太さ15px、1本線、紫色 */
padding: 10px 3px 0px;  /* 内側の余白(上、左右、下) */
background-color: #d2d2ff;  /* 背景色：薄い紫色 */
font-size: 10pt;  /* フォントサイズ */
font-weight: bold;  /* フォント太さ：強調 */
}

.dokusei2{
padding: 3px;  /* 内側の余白 */
background-color: #dfdfff;  /* 背景色：ごく薄い紫色 */
font-size: 10pt;  /* フォントサイズ */
font-weight: bold;  /* フォント太さ：強調 */
text-align: center;  /* テキストの水平位置：中央 */
}

.allchem1{
border: 2px solid #b5f000;  /* 枠線：太さ2px、1本線、黄緑色 */
padding: 3px;  /* 内側の余白 */
background-color: #d6ff59;  /* 背景色：明るい黄緑色 */
font-size: 10pt;  /* フォントサイズ */
font-weight: bold;  /* フォント太さ：強調 */
}

.allchem2{
padding: 3px;  /* 内側の余白 */
background-color: #e7ffce;  /* 背景色：薄い緑色 */
font-size: 10pt;  /* フォントサイズ */
font-weight: bold;  /* フォント太さ：強調 */
}

/* ============ */
/* 表(テーブル) */
/* ============ */

table.main {
width: 100%; /* 表の幅 */
border: 0; /* 罫線の幅 */
border-collapse: separate; /* 隣接するセルの罫線を間隔をあけて表示 */
border-spacing: 10px; /* 隣接するセルの罫線の間隔 */
}

td.left {
width: 55%; /* セルの幅：表全体の60% */
vertical-align: top;  /* テキストの垂直位置：上寄せ */
line-height: 1.2; /* 行の高さ */
}

td.right {
vertical-align: top;  /* テキストの垂直位置：上寄せ */
line-height: 1.2; /* 行の高さ */
}