.body {
  background-color: #F2F2F2;
}

/* header */
header {
  padding-bottom: 10px;
  background-color: #30704B;
}

.toplogo {
  width: auto; /* 幅を自動にして親要素に合わせる */
  height: auto; /* 高さを自動にして縦横比を維持 */
  max-width: 100%; /* 親要素の幅に合わせて最大幅を設定 */
  object-fit: contain; /* 画像を親要素に収める */
}

.header-title {
  color: #ffffff;
  text-decoration: none;
}

.header-submenu{
  color: #ffffff;
  text-decoration: none;
}

.header-submenu:hover{
  color: lightgray;
}

.header-submenu::before{
  content: '▶';
  color: #ffffff;
  margin-right: 5px; 
}

.btn-right-header {
  background-color: #ffffff; /* デフォルトの背景色 */
  color: black;
  border: 0.5px solid gray; /* グレーのボーダー */
  transition: background-color 0.3s, color 0.3s; /* スムーズな色の変化 */
}

.btn-right-header.selected {
  background-color: #F1B7A1; /* 選択されたときの背景色 */
  color: #333333; /* 選択されたときの文字色 */
}

.btn-right-header:hover {
  background-color: #f8d7da; /* ホバー時の背景色 */
  color: #333333; /* ホバー時の文字色 */
}

.site-search-box {
  display: flex;
}

.site-search-box .form-control {
  margin-right: 0; /* ボタンとの間のスペースをなくす */
  height: 38px; /* 高さをボタンと揃える */
  box-sizing: border-box;
}

.search-btn {
  background-color: #F2D785; /* ボタンの背景色 */
  color: #333333; /* ボタンの文字色 */
  border: 1px solid #6c757d; /* ボタンのボーダー */
  height: 38px; /* 検索ボックスと同じ高さに設定 */  
  margin-left: 0; /* 検索ボックスとの間のスペースをなくす */
  padding: 0 10px;
  cursor: pointer; /* カーソルをポインターに */
  transition: background-color 0.3s, color 0.3s; /* スムーズな色の変化 */
  font-size: 1rem;
}

.search-btn:hover {
  background-color: #f6e8c0; /* ホバー時の背景色 */
}

.button-container {
  display: flex;
  gap: 10px; /* ボタン間の隙間 */
}

.head-button {
  color: #ffffff; /* 文字色 */
  text-align: center;
  display: flex; /* 子要素をフレックスボックスに */
  justify-content: center; /* 横方向中央揃え */
  align-items: center; /* 縦方向中央揃え */
  flex-direction: column; 
  padding: 10px 15px; /* ボタンの余白 */
  border-radius: 4px; /* 角丸 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* ボックスシャドウ */
  cursor: pointer; /* ホバー時のポインター */
  flex: 1; /* ボタンの幅を均等にする */
  min-height: 70px; /* ボタンの最小高さを設定 */
  text-decoration: none;
  line-height: 1.3rem;
}

.head-button:hover {
  background-color: #2C1A4D; /* ホバー時の背景色 */
}


/* headerおわり */

.bg-green{
  background-color: #30704B;
}

.title-main {
  display: flex;
  align-items: center; /* 縦方向中央揃え */
  font-weight: bold;
  font-size: 1.25rem; 
  padding-left: 5px;
  padding-top: 3px;
}
.title-main2 {
  display: flex;
  align-items: center; /* 縦方向中央揃え */
  font-weight: bold;
  margin-top: 5px;
  font-size: 1.25rem; 
  padding-left: 5px;
  padding-top: 3px;
}
.title-main img{
  margin-top: 15px;
  margin-right: 5px;
  margin-bottom: 10px;
}
.title-main2 img{
  margin-top: 3px;
  margin-right: 5px;
}
.title-side {
  display: flex;
  align-items: center; /* 縦方向中央揃え */
  font-weight: bold;
  font-size: 15px; 
  padding-left: 5px;
  padding-top: 3px; 
}

/*　簡単検索関連　*/
.key-word{
  border: 3px solid #F1B7A1 !important;
}
.search-box{
  margin: 0px 0px 15px 10px;
  height: 40px; /* 高さを50pxから60pxに変更 */
  display: flex; /* フレックスボックスを使用 */
  align-items: center; /* 縦方向中央揃え */
}
.search-button {
  margin-left: 0; /* ボタンの左マージンを削除 */
  height: 100%; /* ボタンの高さを親要素に合わせる */
  padding: 0 15px; /* ボタンの左右のパディング */
  background-color: #F1B7A1; /* ボタンの背景色 */
  color: #000000; /* 文字色 */
  border: none; /* ボーダーを削除 */
  border-radius: 0 0.3rem 0.3rem 0; /* 角を丸くする */
  cursor: pointer; /* ホバー時のポインター */
}

.search-button:hover {
  background-color: #f8d7da; /* ボタンの背景色 */
}


.clear {
  margin-right: 5px; /* 右側のマージンを10px */
  margin-left: 5px; /* 右側のマージンを10px */
  height: 40px; /* 高さを50pxから60pxに変更 */
  display: flex; /* フレックスボックスを使用 */
  border-color: #F1B7A1; /* ボタンの背景色 */
  background-color: #EBE2D7; /* ボタンの背景色 */
  border-radius: 0.3rem; /* 角を丸くする */
}

.advanced-search{
  background-color: #A5C2A8;
  padding: 0.5em;
  border-radius: 0.3rem;
  border: none;
}

.advanced-search-deco{
  color: black !important;
  text-decoration: none !important;
}

.advanced-search-deco:hover{
  color:#555555 !important;;
}

.advanced-search::after{
  content: '>>';
  color: #000000; 
}

/*  枠(赤)  */
.blackContents-red {
  width:100%;
  background-color: #FFFFFF; /* bg-white */
  border-radius: 0; /* rounded-lg */
  border: 3px solid #971010; /* border-blue-900 border-4 */
  margin-top: 0px;
}

/*  枠(緑色)  */
.blackContents {
  width:100%;
  padding: 8px;
  background-color: #FFFFFF; /* bg-white */
  border-radius: 0; /* rounded-lg */
  border: 3px solid #30704B; /* border-blue-900 border-4 */
  /*margin-top: 10px;*/
}

/*  枠(薄緑)  */
.blackContents-lightg {
  width:100%;
  background-color: #FFFFFF; /* bg-white */
  border-radius: 0.3rem; /* rounded-lg */
  border: 3px solid #A5C2A8; /* border-blue-900 border-4 */
  margin-bottom: 15px;
  margin-top: 20px;
  padding-bottom: 15px;
}

.blackContentsT-lightg {
  width: 100%;
  padding: 8px;
  background-color: #A5C2A8;
  color: #000000; /* text-white */
  font-weight: bold; /* font-bold */
  font-family: sans-serif; /* font-sans */
  line-height: 1rem; /* leading-5 */
  font-size: 1rem;
}

/* 枠内のメニューボタン */
.sub-menu {
  display: flex; /* Flexboxを有効にする */
  width: 85%;
  border: 2px solid #30704B; /* ボーダーの色と幅を指定 */
  color: #000000; /* 文字色 */
  border-radius: 4px; /* ボーダーの角を丸くする */
  margin-bottom: 15px;
  padding: 3px; /* ボタンとボーダーの間にスペースを追加 */
  justify-content: center; /* 横方向中央揃え */
  align-items: center; /* 縦方向中央揃え */
  min-height: 45px;
  flex: 1; /* ボタンの幅を均等にする */
  text-decoration:none;
}
.subtitle {
  font-size: 0.625rem; /* サブタイトルのフォントサイズ */
  font-weight: normal; /* サブタイトルの太さ */
}
.sub-menu:hover{
  background-color: #D5E8D4;
}

/*  ヘッダーのボタン  */
.button-container {
  display: flex;
  gap: 10px; /* ボタン間の隙間 */
}

.head-button {
  background-color: #ffffff; /* ボタンの背景色 */
  color: #000000; /* 文字色 */
  font-size: 1.25rem; /* フォントサイズ */
  font-weight: bold; /* フォントの太さ */
  text-align: center; /* テキストの横中央揃え */
  display: flex; /* 子要素をフレックスボックスに */
  justify-content: center; /* 横方向中央揃え */
  align-items: center; /* 縦方向中央揃え */
  flex-direction: column; /* テキストを縦方向に並べる */
  padding: 10px 15px; /* ボタンの余白 */
  border-radius: 0px; /* 角丸 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* ボックスシャドウ */
  cursor: pointer; /* ホバー時のポインター */
  flex: 1; /* ボタンの幅を均等にする */
  min-height: 70px; /* ボタンの最小高さを設定 */
  text-decoration: none;
  line-height: 1.3rem;
}

.head-button .subtitle {
  font-size: 0.625rem; /* サブタイトルのフォントサイズ */
  font-weight: normal; /* サブタイトルの太さ */
}


.head-button:hover {
  background-color: #D5E8D4; /* ホバー時の背景色 */
}

/* ランキング・新着関連ボタン */
.book-menu {
  background-color: #F2D785; /* デフォルトの背景色 */
  border: 1px solid #71717A; /* グレーのボーダー */
  padding: 0.5rem 1rem; /* ボタンの内側の余白 */
  text-decoration: none; /* 下線を削除 */
  color: black;
  transition: background-color 0.3s; /* 背景色の変化をスムーズに */
  flex: 1; /* ボタンを均等に配置 */
}

.book-menu:hover {
  background-color: #FFF3CD; /* ホバー時の背景色（薄い黄色） */
}

.book-menu a {
  text-decoration: none; /* リンクの下線を削除 */
  color: inherit; /* 親要素の色を継承 */
}

/* ログインボタン */
.userlogin{
  background-color: #F1B7A1;
}

.login-btn {
  color: #000000; /* 文字色 */
  background-color: #F1B7A1;
  border: none; /* ボーダーなし */
  cursor: pointer; /* ホバー時のポインター */
  text-decoration: none;
  line-height: 1.3rem;
  margin-bottom: 15px;
  padding: 10px 0;
  display: inline-block; /* ボタンをインラインブロックに */
  width: 100%; /* ボタンを親要素の幅に合わせる */
  max-width: 150px; /* ボタンの最大幅を設定 */
}

.login-btn:hover {
  background-color: #f8d7da; /* ホバー時の背景色 */
}

.login-btn a {
  color: inherit; /* 親要素の色を継承 */
  text-decoration: none; /* リンクの下線を削除 */
  display: block; /* リンクをブロック要素にして中央揃え */
}

.login-menu-btn {
  background-color: #F1B7A1; /* デフォルトの背景色 */
  border: 1px solid #f8d7da; /* ボーダーの色 */
  border-radius: 4px; /* 角丸 */
  color: #f8d7da;
  padding: 0.5rem 1rem; /* ボタンの内側の余白 */
  text-decoration: none; /* 下線を削除 */
  cursor: pointer; /* ホバー時のポインター */
  transition: background-color 0.3s; /* 背景色の変化をスムーズに */
  width: 260px;
}

.login-menu-btn:hover {
  background-color: #FFF3CD; /* ホバー時の背景色（薄い黄色） */
}

.login-menu-btn a {
  color: inherit; /* 親要素の色を継承 */
  text-decoration: none; /* リンクの下線を削除 */
  display: block; /* リンクをブロック要素にして中央揃え */
}

.responsive-img {
  max-width: 200px !important; /* デフォルトの最大幅を設定 */
}



/* カレンダー */

.legend-icon {
    width: 1rem;
    height: 1rem;
    border: 1px solid #d1d5db;
    margin-right: 0.5rem;
}


/* ヘッダー */
.logo {
  display: flex;
  margin: 15px 0px 30px 10px;
  max-width: 100%; /* 親要素の最大幅を設定 */
  width: auto; /* 幅を自動に設定 */
  height: auto; /* 縦横比を保つ */
  justify-content: center; /* 中央揃え */
  align-items: center; /* 垂直方向の中央揃え */
}

.desktop-logo {
  display: block; /* デフォルトでは表示 */
}

.mobile-logo {
  display: none; /* デフォルトでは非表示 */
}

/* フッター */
footer{
  background-color: #30704B;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.fotter-text{
  margin: 20px 0px 0px 10px;
  color: #ffffff;
}

.rights{
  text-align: end;
  margin-right: 10px;
  color: #FFFFFF;
}

.btn-nav1 {
  color: inherit; /* 親要素の色を継承 */
  text-decoration: none; /* アンダーラインを消す */
  text-align: center;
  --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-family: ;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-width: var(--bs-border-width);
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: var(--bs-border-radius);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-box-shadow: inset 0 1px 0 rgba(66, 140, 92, 1), 0 1px 1px rgba(66, 140, 92, 1);
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    display: inline-block;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    color: var(--bs-btn-color);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--bs-btn-bg);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.btn-nav1 a:hover, .btn-nav1 a:focus {
  color: inherit; /* ホバーやフォーカス時も色を継承 */
  text-decoration: none; /* ホバーやフォーカス時もアンダーラインを消す */
}

/* 重要なお知らせ */
.bi-shield-fill-exclamation{
  width: 30px;
  height: 30px;
  color: #B02A37;
  margin-right: 5px;
}

.text-red{
  color: #B02A37;
}

/* 図書館からのお知らせ */
.bi-info-circle{
  width: 30px;
  height: 30px;
  color: #f8d7da;
  margin-right: 5px;
}

.tab-info-overall {
  background-color: #D1E7DD; /* 薄い緑 */
  color: black;
  border: none;
}

.tab-info-event {
  background-color: #F2D785; /* 薄い黄色 */
  color: black;
  border: none;
}

.tab-info-kids {
  background-color: #f8d7da; /* 薄い赤 */
  color: black;
  border: none;
}

.tab-info-overall.selected {
  background-color: #30704B; /* 濃い緑 */
  color: #ffffff;
  border: none;
}

.tab-info-event.selected {
  background-color: #f7bf19; 
  color: #000000;
  border: none;
}

.tab-info-kids.selected {
  background-color: #F1B7A1;
  color: #000000;
  border: none;
}

.blackContents-libinfo {
  width:100%;
  border: 2px solid #f8d7da; 
}

.notification-area {
  border: 2px solid #30704B; /* ボーダーの色と太さを指定 */
  padding: 1rem; /* 内側の余白を追加 */
  background-color: #FFFFFF; /* 背景色を白に設定 */
}
.notification-area-overall {
  border: 2px solid #30704B; /* ボーダーの色と太さを指定 */
  padding: 1rem; /* 内側の余白を追加 */
  background-color: #FFFFFF; /* 背景色を白に設定 */
}
.notification-area-event {
  border: 2px solid #CC9A06; /* ボーダーの色と太さを指定 */
  padding: 1rem; /* 内側の余白を追加 */
  background-color: #FFFFFF; /* 背景色を白に設定 */
}
.notification-area-kids {
  border: 2px solid #F1B7A1; /* ボーダーの色と太さを指定 */
  padding: 1rem; /* 内側の余白を追加 */
  background-color: #FFFFFF; /* 背景色を白に設定 */
}

.news-ttl,.tab-group, .info-ttl {
  display: none;
}
ul {
    margin: 0;
    padding: 0;
    list-style-type: square;
}

ol {
    margin: 0;
    padding: 0;
    /* list-style: none; */
}
.panel{
    display:none;
}
.tab.is-active{
    transition:all 0.2s ease-out;
}.panel.is-show{
    display:block;
}
ul.panel-new{
  border-top:5px solid #30704B;
}
ul.panel-event{
  border-top:5px solid #CC9A06;
}
ul.panel-kids{
  border-top:5px solid #F1B7A1;
}
.panel li{
  border-bottom:1px dotted #ccc;
  padding:10px 0;
}
.panel li:last-child{
  border-bottom:none;
  padding-bottom:0;
}
.panel li a{
  color:#0047b2;
  position:relative;
  padding-left:15px;
}
.panel li a:before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3px 0 3px 5px;
  border-color: transparent transparent transparent #009949;
  position: absolute;
  top: 7px;
  left: 2px;
}
.panel li a:hover{
  color:#666;
}
.panel li a:hover:before{
  border-color: transparent transparent transparent #666;
}


/* サブページ */
.subblackContentsT {
  border: solid 2px;
  border-color: gray;
  background-color: #FFFFFF;
  width: 100%;
}

.subpage-menu {
  display: flex;
  align-items: flex-start; /* アイコンとテキストを上揃えにする（複数行でも綺麗に揃う） */
  position: relative; /* ::before の基準とするため残しても良い */
  padding-left: 0; /* paddingをリセット */
}

.subpage-menu::before {
  content: '▶';
  color: #F2BB16;
  margin-right: 0.5em; /* アイコンとテキストの間の余白を確保 */
  line-height: 1.3; /* テキストの行の高さと合わせる */
  position: static;
  transform: none;
  margin-left: 0;
  left: auto;
  top: auto;
}

/* テキスト部分(a)のスタイルを調整 */
.subpage-menu a {
  text-indent: 0;
  padding-left: 0;
  line-height: 1.3; 
  color: #000000;
  text-decoration: none;
}

.subpage-menu a:hover {
  color: #555555; /* ホバー時のリンクの色 */
}

.subpage2-menu {
  position: relative;
  padding-left: 20px; /* シンボルのスペースを確保 */
}

.subpage2-menu::before {
  content: '▶'; /* シンボルを追加 */
  position: absolute;
  color: #8ce8b9;
  margin-left: 25px;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* シンボルをテキストの中央に垂直に配置 */
}

.subpage2-menu a {
  display: inline-block;
  text-indent: -40px; /* シンボル分のインデントを逆に設定 */
  padding-left: 40px; /* シンボル分のスペースを確保 */
  color: #0D6EFD;
}

.subpage2-menu a:hover {
  color: #0056b3; /* ホバー時のリンクの色 */
}

.subpage-menu2{
  position: relative; /* 親要素に対して相対位置を設定 */
  list-style: none; /* デフォルトのリストスタイルを無効にする */
}

.subpage-menu2::before{
  content: '▶'; /* シンボルを追加 */
  position: absolute;
  color: #9EC5FE; /* 水色 */
  left: 0; /* シンボルをリスト項目の左端に配置 */
  top: 0; /* シンボルをテキストの上部に揃えて配置 */
}

.subpage-menu3 {
  position: relative; /* 親要素に対して相対位置を設定 */
  list-style: none; /* デフォルトのリストスタイルを無効にする */
  padding-left: 20px; /* シンボルの分だけ左側にパディングを追加 */
}

.subpage-menu3::before {
  content: '▶'; /* シンボルを追加 */
  position: absolute;
  color: #9EC5FE; /* 水色 */
  left: 0; /* シンボルをリスト項目の左端に配置 */
  top: 0; /* シンボルをテキストの上部に揃えて配置 */
}

.subpage-heading2{
  position: relative; /* 親要素を相対位置に設定 */
}

.subpage-heading2::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 95%;
  height: 0; 
  border-bottom: 2px dotted #F1B7A1; 
  left: 50%;
  transform: translateX(-50%); 
}

.subpage-heading {
  position: relative; /* 親要素を相対位置に設定 */
}

.subpage-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 95%; /* アンダーラインの幅 */
  height: 4px; /* アンダーラインの太さ */
  background-color: #F1B7A1; /* アンダーラインの色 */
  left: 50%; /* 左端を中央に */
  transform: translateX(-50%); /* 中央に配置 */
}

.label_pdf {
  display: inline;
  padding: .2em .6em .3em;
  line-height: 1;
  color: #d9534f !important; /* テキストカラー */
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
  border: 2px solid #d9534f; /* 枠線の追加 */
  background-color: transparent; /* 背景色を透明に */
}
.label_pdf:hover {
  background-color:#F8D7DA; /* 背景色を透明に */
}

.label_pdf a {
  color: #d9534f !important; /* リンクのテキストカラーを赤に設定 */
  text-decoration: none; /* リンクの下線を削除 */
}

.label_word {
  display: inline;
  padding: .2em .6em .3em;
  line-height: 1;
  color: #4f6fd9; /* テキストカラー */
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
  border: 2px solid #4f6fd9; /* 枠線の追加 */
  background-color: transparent; /* 背景色を透明に */
}

.label_word:hover {
  background-color:#CFE2FF; /* 背景色を透明に */
}

.label_word a {
  color: #4f6fd9 !important; /* リンクのテキストカラーを赤に設定 */
  text-decoration: none; /* リンクの下線を削除 */
}

.label_excel {
  display: inline;
  padding: .2em .6em .3em;
  line-height: 1;
  color: #037B2B; /* テキストカラー */
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
  border: 2px solid #037B2B; /* 枠線の追加 */
  background-color: transparent; /* 背景色を透明に */
}

.label_excel:hover {
  background-color:#D1E7DD; /* 背景色を透明に */
}

.label_excel a {
  color: #037B2B !important; /* リンクのテキストカラーを赤に設定 */
  text-decoration: none; /* リンクの下線を削除 */
}

.faq-q::before {
  content: "Q";
  color: #fff;
  background-color: #1AA179;
  padding: 3px 8px 3px 8px;
  margin-right: 10px;
}

.faq-a::before {
  content: "A";
  color: #fff;
  background-color: #f8d7da;
  padding: 3px 9px 3px 9px;
  margin-right: 5px;
  font-weight: bold;
}

.faq-q, .faq-a {
  position: relative;
  padding-left: 38px; /* シンボル分のスペースを確保 */
  text-indent: -38px; /* シンボル分のインデントを逆に設定 */
}

.faq-q::before, .faq-a::before {
  left: 0;
  top: 50%;
}

.label-kns{
  display: inline;
  padding: .2em .6em .3em;
  line-height: 1;
  color: white; /* テキストカラー */
  background-color: #B02A37;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border: 2px solid #B02A37; /* 枠線の追加 */
}

.label-fa{
  display: inline;
  padding: .2em .6em .3em;
  line-height: 1;
  color: white; /* テキストカラー */
  background-color: #003366;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border: 2px solid #003366; /* 枠線の追加 */
}

.label-ks{
  display: inline;
  padding: .2em .6em .3em;
  line-height: 1;
  color: white; /* テキストカラー */
  background-color: #883C7E;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border: 2px solid #883C7E; /* 枠線の追加 */
}

.map-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.responsive-map {
  width: 100%;
  max-width: 800px; /* 最大幅を設定 */
  height: 450px;
  border: 0;
  margin: 0.5rem 1rem 4rem 1rem; 
}

.cell-ywll{
 background-color: #FFFEEE; 
}

.fc-r{
  color: #B02A37 ;
}

.fw-b{
  font-weight: bold;
}

.fc-orng{
  color: #FD7E14;
}

.fc-grn{
  color: #0D503C;
}

.fc-nv{
	color:#003366;
}

.fc-pp{
  color:#883C7E;
  } 

.page-tbl{
	border:1px solid #b5b5b5;
	width:100%;
}
.page-tbl th,
.page-tbl td{
	border:1px solid #b5b5b5;
	padding:5px 8px 3px 8px;
	vertical-align:middle;
}
.page-tbl th{
	background-color:#F2D785;
}
/*
.page-tbl-yw th{
	background-color:#FEF686;
}
*/
.page-tbl-yw th,
.page-tbl-yw td{
	border:1px solid #b5b5b5;
  background-color:#FEF686;
	padding:5px 8px 3px 8px;
	vertical-align:middle;
}

.page-tbl.ta-c{
	text-align:center;
}
.page-tbl.ta-c td{
	vertical-align:middle;
}

.page-tbl.ta-c td img{
	margin:5px 0;
}
.page-tbl.ta-c-th th{
	text-align:center;
}

.custom-line-height {
  line-height: 1.25;
  display: block;
}

.red-box{
	border:1px solid #B02A37;
	background-color:#fce9e9;
	padding:10px 15px;
}

.red-index::before{
  content: "◎";
  margin-right: 5px;
}

.list-indent {
  text-indent: -1em; /* 改行後のインデントを設定 */
  margin-left: 1em; /* リスト全体の左マージンを設定 */
}

/* デフォルトのスタイル */
.recipt {
  max-width: 100%;
  height: auto;
}

.magazine-info1 {
  margin-bottom: 0;
  padding: 15px 20px;
  border: 1px solid #b5b5b5;
  border-bottom: none; /* 下の辺のボーダーを非表示にする */
  box-sizing: border-box;
}
.magazine-info2{
  margin-bottom: 0;
  padding: 15px 20px;
  border: 1px solid #b5b5b5;
  box-sizing: border-box;
}

.login-box {
  background-color: #08855F; /* 緑色の背景 */
  border: solid gray;
}

.login-title {
  font-weight: bold;
  margin: 0;
  padding: 5px;
}

.content-box {
  background-color: #fff; /* 白色の背景 */
  width: 100%;
}

.page-tbl-dl{
	border-bottom:1px dotted #b5b5b5;
	width:90%;
}
.page-tbl-dl td{
	border-bottom:1px dotted #b5b5b5;
}

/* topへボタン */
#scrollTopBtn {
  display: none; /* 初期状態は非表示 */
  position: fixed;
  bottom: 20px;
  right: 5px;
  padding: 10px 20px;
  background: #F1B7A1; /* 濃いピンク */
  color: black;
  border: none;
  border-radius: 30px 8px 8px 30px; /* 左側を丸くする */
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  transition: background 0.3s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

#scrollTopBtn:hover {
  background: #f8d7da; /* ホバー時に少し濃く */
  color:black;
  transform: scale(1.05);
}

/* テキスト */
.text-header-right{
  font-size: 0.75rem;
}

.text-menu{
  font-size: 1.25rem;
  font-weight: bold;
}

.text-index{
  font-size: 1.4rem;
  font-weight: bold;
}

.text-submenu{
  font-size: 1rem;
  font-weight: bold;
}

.text-lead{
  font-size: 1rem;
  font-weight: normal;
}

.text-contents{
  font-size: 0.8rem;
  font-weight: normal;
}

.text-icon{
  font-size: 0.7rem;
  font-weight: 900;
}
.fw-b{
  font-weight: bold;
}
.fw-r{
  color: #B02A37;
}

/* xl-size */
@media (max-width: 1200px) {
  .responsive-img {
    max-width: 175px !important; /* 210pxの80% */
  }
}

/* lg-size */
@media screen and (max-width: 992px) {
  .title-main2.date {
    font-size: 1.1em; /* お好みのサイズに変更してください */
  }
  .responsive-img {
    max-width: 125px !important; /* 210pxの65% */
  }
  .login-btn {
  color: #000000; /* 文字色 */
  background-color: #F1B7A1;
  border: none; /* ボーダーなし */
  cursor: pointer; /* ホバー時のポインター */
  text-decoration: none;
  line-height: 1.3rem;
  margin-bottom: 15px;
  padding: 10px 0;
  display: inline-block; /* ボタンをインラインブロックに */
  width: 100%; /* ボタンを親要素の幅に合わせる */
  max-width: 150px; /* ボタンの最大幅を設定 */
}
.login-btn {
  width: 100%; /* ボタンを親要素の幅に合わせる */
  max-width: 120px; /* ボタンの最大幅を設定 */
}
.label_excel {
  font-size: 0.75em;
}
.label_pdf {
  font-size: 0.75em;
}
.label_word {
  font-size: 0.75em;
}
}

/* md-size */
@media screen and (max-width: 768px) {
  .title-main2.date {
    font-size: 0.95em; /* お好みのサイズに変更してください */
  }
  .subpage-menu a {
    text-indent: 0; /* 小さいデバイスではインデントをリセット */
    padding-left: 0; /* 小さいデバイスでは左のスペースをなくす */
  }
  .label_excel {
  font-size: 0.95em;
}
.label_pdf {
  font-size: 0.95em;
}
.label_word {
  font-size: 0.95em;
}
}

/* sm-size */
@media (max-width: 576px) { 
  .image-container-50 {
    width: 100%; /* モバイルでは画像を全幅にする */
    margin-bottom: 1rem; /* 縦に並んだ時に隙間を作る */
  }
  .content-box {
    flex-direction: column; /* フレックスボックスの方向を縦に変更 */
  }
}

@media (max-width: 450px) { 
 .label_excel {
  font-size: 0.7em;
}
.label_pdf {
  font-size: 0.7em;
}
.label_word {
  font-size: 0.7em;
}
}

/*　画像並び指定　*/
.image-container-50 {
  /* 2つの画像を並べるため、幅を約50%に指定 */
  width: 48%; 
  /* 必要に応じて、画像間の隙間を空けるためにマージンを追加 */
  margin-bottom: 1rem;
}