.menu-container {
        margin-top: 20px;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
        display: flex;
        flex-wrap: wrap;
        max-height: 0; /* アコーディオン効果用 */
        overflow: hidden; /* 内容がはみ出さないように */
        transition: max-height 0.5s ease-out, opacity 0.5s ease-in-out;
    }

    .menu-item {
        flex: 1 0 calc(20% - 2%); /* 大きい画面では5個横並び */
        margin: 10px 1%;
        padding: 10px;
        background-color: #343399;
        color: white;
        text-align: center;
        border-radius: 5px;
        cursor: pointer;
        box-sizing: border-box;
        min-height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
        font-size: 1.2em;
    }

    .menu-item:hover{
       opacity:0.7;
    }

   .menu-item a {
       position: static;
       display: flex;                  /* フレックスに */
       width: 100%;
       height: 100%;
       text-decoration: none;
       text-align: center;
       word-break: break-word;
       box-sizing: border-box;
       justify-content: center;        /* 横方向中央 */
       align-items: center;            /* 縦方向中央 */
       white-space: normal;            /* 折り返し許可 */
       flex-wrap: wrap;                /* 長文に対応 */
   }

   #content .menu-container > div > a {
        color: #FFF;
    }

    /* トグルボタンのデザイン */
    #toggleMenuBtn {
        display: inline-block;
        background-color: #1E2951;
        color: white;
        width: 100%;
        padding: 10px 20px;
        font-size: 16px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.2s ease;
    }

    #toggleMenuBtn:hover {
        opacity:0.7;
    }

    #toggleMenuBtn:focus {
        outline: none;
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    }

    /* 大きい画面ではメニュー表示ボタンを非表示 */
    @media (min-width: 769px) {
        .menu-container {
            display: flex;
            opacity: 1;
            max-height: none; /* メニューが表示されている状態 */
        }
        .hide-pc {
            display: none;
        }
    }

    /* 小さい画面では横3つ表示 */
    @media (max-width: 768px) {
        .menu-item {
            flex: 1 0 calc(33.33% - 2%); /* 横3つ */
            font-size:12px;
        }

        #toggleMenuBtn {
            display: inline-block; /* ボタン表示 */
        }
    }

#content ul.image-list-container {
margin: 0 0 0 0;
}

.image-list-container {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
  justify-content: flex-start;
}

.image-list-item {
  flex: 0 1 calc(33.33% - 10px);
  margin: 5px;
  box-sizing: border-box;

  display: flex;
  align-items: center;      /* 親内の高さがある場合に中央揃え */
  justify-content: center;  /* 横方向中央揃え */
  text-align: center;
}

.image-content {
  display: flex;
  flex-direction: column;   /* 画像とキャプションを縦に並べる */
  align-items: center;      /* 横方向中央 */
  justify-content: center;  /* 縦方向中央 */
  width: 100%;
}

.image-content img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  margin-bottom: 0.5em;
}

.image-content span {
  display: block;
  font-size: 0.9em;
  color: #333;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
.image-list-item {
flex: 0 1 calc(50% - 10px); /* タブレットサイズで2つ並べる */
}
}


/* ------------------------------
 共通設定（section01 / section02）
------------------------------- */

#content ul {
	margin: 0 0 0 2em;
}
#content ol {
	margin: 0 0 0 2em;
}

.section01 ul:not(.lnk02):not(#dateList):not(.list__region):not(.yt-slider-list):not(.slider):not(.movie-list-container):not(.image-list-container),
.section02 ul:not(.lnk02):not(#dateList):not(.list__region):not(.yt-slider-list):not(.slider):not(.movie-list-container):not(.image-list-container),
.section01 ol,
.section02 ol {
  margin: 0 0 1em 2em;
  line-height: 1.6;
  list-style-position: outside;
/*  padding-left: 1.8em;*/
  position: relative; 
}

/* ------------------------------
 通常のOL（数字） ※カスタムクラス除外
------------------------------- */
.section01 ol:not(.ol-roman):not(.ol-paren):not(.ol-hiragana):not(.ol-katakana),
.section02 ol:not(.ol-roman):not(.ol-paren):not(.ol-hiragana):not(.ol-katakana) {
  list-style-type: decimal;
}

/* ------------------------------
 UL（改修クラス除外）用：黒丸マーカーのカスタム
------------------------------- */
.section01 ul:not(.lnk02):not(#dateList):not(.list__region):not(.yt-slider-list):not(.slider):not(.movie-list-container):not(.image-list-container),
.section02 ul:not(.lnk02):not(#dateList):not(.list__region):not(.yt-slider-list):not(.slider):not(.movie-list-container):not(.image-list-container){
  list-style: none;
}

.section01 ul:not(.lnk02):not(#dateList):not(.list__region):not(.yt-slider-list):not(.slider):not(.movie-list-container):not(.image-list-container) li,
.section02 ul:not(.lnk02):not(#dateList):not(.list__region):not(.yt-slider-list):not(.slider):not(.movie-list-container):not(.image-list-container) li {
  position: relative;
}

.section01 ul:not(.lnk02):not(#dateList):not(.list__region):not(.yt-slider-list):not(.slider):not(.movie-list-container):not(.image-list-container) li::before,
.section02 ul:not(.lnk02):not(#dateList):not(.list__region):not(.yt-slider-list):not(.slider):not(.movie-list-container):not(.image-list-container) li::before {
  content: '';
  position: absolute;
  left: -1em;
  top: 0.4em;
  width: 0.6em;
  height: 0.6em;
  background-color: black;
  border-radius: 50%;
}


/* ------------------------------
 ローマ数字（I, II, III...）
------------------------------- */
ol.ol-roman {
  list-style-type: upper-roman;
  padding-left: 1.8em; /* section共通と揃える */
}

/* ------------------------------
 カッコ付き番号 (1)
------------------------------- */
ol.ol-paren {
  list-style: none;
  counter-reset: item;
  padding-left: 1.8em;
}

ol.ol-paren > li {
  counter-increment: item;
  position: relative;
  padding-left: 0.5em;
}

ol.ol-paren > li::before {
  content: "(" counter(item) ")";
  position: absolute;
  left: -1.5em;
}

/* ------------------------------
 ひらがな・カタカナリスト（カッコ無し・data-char）
------------------------------- */
ol.ol-hiragana,
ol.ol-katakana {
  list-style: none;
  position: relative;  /* li::beforeのabsolute基準 */
}


ol.ol-hiragana li,
ol.ol-katakana li {
  position: relative;
}

/* カスタムマーカーを親olの左端より2em外にずらす */
ol.ol-hiragana li::before,
ol.ol-katakana li::before {
  content: attr(data-char);
  position: absolute;
  left: -2em; 
  width: 1.8em;
  text-align: center;
  font-family: monospace;
  font-weight: bold;
  top: 0.2em;
}