@charset "UTF-8";

/*================================================
 *  テーブル
 ================================================*/
/* テーブル全体 */
table {
    width: 80%; /* 幅を調整 */
    border-collapse: collapse; /* セルの境界線を結合して一本にする */
    margin: 30px auto; /* 上下左右中央に配置 */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* フォントを指定 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 軽い影で立体感を出す */
    border-radius: 8px; /* 角を丸くする */
    overflow: hidden; /* border-radiusが適用されるようにする */
}

.first-column {
            width: 120px; /* 左端の列の幅を120pxに指定 */
        }

/* ヘッダーセル (<th>) */
th {
    background-color: #4CAF50; /* ヘッダーの背景色 */
    color: white; /* テキスト色 */
    padding: 12px 15px; /* 上下左右のパディング */
    text-align: left; /* テキストを左揃え */
    letter-spacing: 0.05em; /* 文字間隔を少し開ける */
    text-transform: uppercase; /* 大文字にする */
}

/* データセル (<td>) */
td {
    border: 1px solid #ddd; /* 薄いグレーの境界線 */
    padding: 10px 15px; /* 上下左右のパディング */
　　text-align: center; /* 水平方向の中央配置 */
    vertical-align: middle; /* 垂直方向の中央配置 */
}

/* 偶数行の背景色（ゼブラストライプ） */
tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* 背景色の調整（灰色） */
tbody tr.gray {
    background-color: #f2f2f2;
}

/* 背景色の調整（白色） */
tbody tr.white {
    background-color: #ffffff;
}

/* ホバー時の行のハイライト */
tbody tr:hover {
    background-color: #e0e0e0;
    transition: background-color 0.3s ease; /* ホバー時のアニメーション */
}

/* フッター (<tfoot>) 使ってないです。*/
tfoot {
    background-color: #333;
    color: white;
    font-weight: bold;
}

tfoot td {
    border-top: 2px solid #555; /* フッターの上の境界線 */
    padding: 12px 15px;
    text-align: right; /* 合計などを右揃えに */
}

tfoot td:first-child {
    text-align: left; /* 最初の列は左揃えに */
}

 /* テーブルを囲むコンテナ */
        .table-container {
            overflow-x: auto; /* 横方向のスクロールを有効にする */
            -webkit-overflow-scrolling: touch; /* iOSでのスムーズなスクロール */
            width: 100%; /* コンテナの幅を画面幅に合わせる */
        }



/*================================================
 *  枠線付きのボックス（frame_line_box）
 ================================================*/
.frame_line_box{
 	border: 3px solid #4CAF50; /* 幅、スタイル、色 */
	border-radius: 8px;      /* 角を8pxの半径で丸くする */
	padding: 5px;
}

/*================================================
 *  文章（text）
 ================================================*/
.text {
	font-size:25px;
	margin:0 0 0 5px;  /* 上、右、下、左の順にどれだけ空白をあけるかの指定*/
}


#main li{
	font-size:18px;
}

#main {
	list-style-type: disc; /* 丸印（デフォルトの順序なしリストマーカー） */
}

ol li{
	list-style-type: decimal; /* 数字（デフォルトの数字リストマーカー） */
}

ol li ul li{
	list-style: none; /* マーカー削除 */
}


/* 題目の下線*/
.theme_border{
	background-color: #d4d1c9;
	height: 5px; /* ボックスの高さ */
	margin:0px 7px 15px 7px;
 	border-left: 60px solid #65c469; /* 左側に緑の線を追加 */
	border-radius: 5px; /* 10ピクセル丸める */
}

/*================================================
 *  文字の色変更：赤色（red）
 ================================================*/
.red {
	color: red;
}

/*================================================
 *  リストの丸の復活（un_no-marker）
 ================================================*/
.un_no-marker li {
	list-style-type: disc; /* 丸印（デフォルトの順序なしリストマーカー） */
}

/*================================================
 *  リストの数字の復活（un_no-marker_decimal）
 ================================================*/
.un_no-marker_decimal li {
	list-style-type: decimal; /* 数字（デフォルトの数字リストマーカー）  */
}

/*================================================
 *  赤色の下線を引いた文章（red-underline）
 ================================================*/
.red-underline {
	text-decoration: underline red 3px; /* 赤色で太さ3pxの下線 */
}

/*================================================
 *  黒色の下線を引いた文章（black-underline）
 ================================================*/
.black-underline {
	text-decoration: underline black 2px; /* 黒色で太さ2pxの下線 */
}

/*================================================
 *  先頭に米印（※）をつけた文章のための準備（non_marker）
 ================================================*/
#non_marker ul{
       list-style: none; /* デフォルトのリストマーカーを非表示にする */
       pandding-left: 20px;   /* 左側のデフォルトパディングをリセット (重要) */
	margin-bottom: 40px;
}

/*================================================
 *  先頭に米印（※）をつけた文章（star-list）
 ================================================*/

#star-list ul{
       list-style: none; /* デフォルトのリストマーカーを非表示にする */
       pandding-left: 20px;   /* 左側のデフォルトパディングをリセット (重要) */
}

.star-list {
       padding-left: 0;   /* 左側のデフォルトパディングをリセット (重要) */
}

.star-list li {
       position: relative; /* 擬似要素の位置決めの基準 */
       padding-left: 20px; /* 米印分のスペースを確保 */
       margin-bottom: 5px; /* 各リストアイテム間の余白 */
	list-style: none; /* デフォルトのリストマーカーを非表示にする */
}

.star-list li::before {
       content: "※"; /* ここに米印を指定 */
       color: #000000; /* 米印の色 (例: 赤) */
       font-weight: bold; /* 米印を太字に */
       position: absolute; /* 親要素 (li) を基準に位置決め */
       left: 0; /* li の左端に配置 */
       top: 0;  /* li の上端に配置 (必要であれば微調整) */
       line-height: inherit; /* 行の高さを親要素に合わせる */
}



/*================================================
 *  google地図の埋め込み（map-container,iframe）
 ================================================*/
/* オプション: マップをレスポンシブにするためのCSS */
.map-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 のアスペクト比 (高さ / 幅 * 100) */
	height: 0;
	overflow: hidden;
	max-width: 100%;
	background: #eee;
}

.map-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/*================================================
 *  画像横並び（image-container）
 ================================================*/
.image-gallery {
  display: flex;
  /* 画像間のスペースを均等に配置したい場合 */
  justify-content: space-around; /* または space-between, center など */
  /* 必要に応じて折り返しを許可する場合 */
  flex-wrap: wrap;
}

.image-gallery img {
  /* 画像の幅を調整する場合 */
  width: 100%; /* 例: 親要素の30%の幅 */
  max-width: 300px; /* 例: 最大幅200px */
  margin: 5px; /* 各画像に余白 */
}

/*================================================
 *  途中で改行、主にURLとか用（parent-container）
 ================================================*/
.parent-container {
  max-width: 680px;

  /* 解決策 */
  word-break: break-word;
}

/*================================================
 *  QRコードのための箱（for_qrcode）
 ================================================*/
.for_qrcode {
  max-width: 15%;
  margin-left: 30px;
  margin-right: auto;
  vertical-align: top;
  display: inline-block;
}

/*================================================
 *  画像サイズ最大の半分と中央寄せ（image-wrapper）
 ================================================*/
.image-wrapper {
    text-align: center; /* 子要素のインライン要素を中央寄せにする */
}

.image-wrapper img {
    max-width: 50%;
    height: auto;
}


/*================================================
 *  郷土資料現代語訳での文章の横並び（flex_box）
 ================================================*/
/* メインメニュー（横並び） */
.flex_box {
    display: flex; /* Flexboxで横並びにする */
    justify-content: flex-start; /* 明示的に左寄せを指定 */
}

.flex_box li {
    min-width:60px /* 最小の大きさが60px */
}

.no-marker-li{
    list-style:none; /* Flexboxで横並びにする */
}

/*================================================
 *  図書館情報用のリスト設定（information）
 ================================================*/
#information li {
	margin-bottom: 20px; /* 各<li>の下に10pxの間隔を空ける */
	font-size:20px
}