style.css /* =======================================
   共通設定・色の定義（カスタマイズしやすいよう変数化）
  =================================== */
:root {
    /* 濃く落ち着きと強さのある鉄紺（てつこん）系ネイビーをベースに指定 */
    --primary-color: #1a365d; 
    --accent-color: #c53030;  /* 警告・ボタン用の落ち着いた赤 */
    --text-color: #2d3748;
    --bg-light: #f7fafc;
    --border-color: #e2e8f0;
    --max-width: 1200px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Yu Gothic Medium", "Yu Gothic","Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
    color: var(--text-color);
    line-height: 1.8;
    background-color: #fff;
    padding-bottom: 0; /* スマホ時に調整 */
    font-weight: 500;
    font-size: 18px;    
}
strong, b {
  font-weight: 700;
}

a {
    color: var(--primary-color);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* ========================================
   ヘッダーと最上部リンク（プルダウン）- 伝承重視・!important無し版
   ================================== */
.site-header {
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    width: 100%;
}

/* 1200pxの幅に制限し、左右中央に寄せます */
.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 25px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/* タイトルの行分けとデザイン（連絡会を強調） */
.site-title {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
/* 上の「日本原子力学会」 */
.title-sub {
    font-size: 1.5rem; /* 先ほど解決したお気に入りの1.5remに固定 */
    color: #4a5568;
    font-weight: normal;
}
/* 下の「シニアネットワーク連絡会」 */
.title-main {
    font-size: 1.7rem;
    color: #1a365d;
    font-weight: bold;
}

/* 最上部ナビゲーション（右端から50pxの余白を確保） */
.top-utility-nav {
    margin-right: 50px; 
}

.top-utility-nav .utility-menu {
    display: flex;
    list-style: none;
    gap: 40px; /* 間隔は40px */
}

/* 「活動方針」などの文字（大きめ・太字） */
.top-utility-nav a {
    color: #2d3748;
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none;
}
.top-utility-nav a:hover {
    text-decoration: underline;
}

/* プルダウンメニューの基準位置 */
.dropdown {
    position: relative;
}

/* プルダウンした際に出てくる中身の箱 */
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    list-style: none;
    min-width: 160px;
    z-index: 100;
    border: 1px solid #e2e8f0;
}
.dropdown:hover .dropdown-content {
    display: block;
}

 /* ==========================================================================
   メインナビゲーション（上部帯）- 伝承・メンテナンス重視版
   ========================================================================== */
/* ネイビーの背景色を、外枠（nav）ではなく、中身（ul）に設定して干渉を防ぎます */
.main-nav {
    position: sticky;
    top: 0;
    z-index: 90;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
}

.main-nav ul {
    display: flex;
    list-style: none;
    background-color: #1a365d; /* 落ち着いた鉄紺（ネイビー） */
    padding: 0;
}

.main-nav li {
    flex: 1;
    text-align: center;
}

.main-nav a {
    display: block;
    padding: 15px 10px;
    color: #ffffff;            /* 文字色は白 */
    font-weight: bold;
    font-size: 1rem;
    text-decoration: none;
    /* ★じわっと色が変わるアニメーション効果（0.3秒かけて変化） */
    transition: background-color 0.3s ease, color 0.3s ease; 
}

/* 
   ★【改善点】マウスを乗せた（hover）とき、および現在地（active）の表示
   背景を明るい紺にするだけでなく、文字色をパキッとした「黄色」に変えることで、
   シニアの方でも「今どこを触っているか」が劇的に認識しやすくなります。
*/
.main-nav a:hover, 
.main-nav a.active {
    background-color: #2b4c7e; /* 少し明るい紺色に変える */
    color: #ffd700;            /* ★文字色をゴールド（鮮やかな黄色）に変えて変化を強調 */
    text-decoration: none;
}

/* 会員のページ専用（独立した濃いネイビー） */
.main-nav a.member-link {
    background-color: #0f233f;
}
/* 会員のページを触ったときは、背景を赤っぽくして特別なボタンであることを強調 */
.main-nav a.member-link:hover {
    background-color: #c53030;
    color: #ffffff;
}


/* ==========================================================================
   レイアウトコンテナ（メイン領域）
   ========================================================================== */
.main-wrapper {
    max-width: var(--max-width);
    margin: 40px auto;
    padding: 0 15px;
}

/* 注目トピックス（シンポジウム予告カード） */
.featured-topic {
    margin-bottom: 50px;
}

.topic-card {
    display: flex;
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.topic-image {
    flex: 2;
    background-color: #cbd5e0; /* 画像がない場合の仮背景 */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
}

.topic-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.topic-content {
    flex: 3;
    padding: 30px;
}

.badge {
    display: inline-block;
    padding: 4px 8px;
    font-size: 0.75rem;
    font-weight: bold;
    color: #fff;
    border-radius: 3px;
    margin-bottom: 12px;
}

.badge {
    background-color: #c53030 !important; /* 落ち着いた赤色背景 */
    color: #ffffff !important;            /* 文字色は絶対白 */
    display: inline-block !important;     /* 四角い箱の形にする */
    padding: 6px 12px !important;         /* 上下左右の余白（少し広げました） */
    font-size: 0.85rem !important;        /* 文字の大きさ */
    font-weight: bold !important;         /* 太字 */
    border-radius: 4px !important;        /* 角を少し丸くする */
    margin-bottom: 15px !important;       /* 下の文字との隙間 */
}



.topic-content h2 {
    font-size: 1.4rem;
    color: var(--primary-color);
    margin-bottom: 15px;
    line-height: 1.4;
}

.topic-content p {
    margin-bottom: 20px;
    color: #4a5568;
}

/* 汎用ボタンスタイル */
.btn-primary {
    display: inline-block;
    background-color: var(--accent-color);
    color: #fff;
    padding: 12px 24px;
    font-weight: bold;
    border-radius: 4px;
    transition: opacity 0.2s;
}

.btn-primary:hover {
    opacity: 0.9;
    text-decoration: none;
}

.btn-sub {
    display: inline-block;
    border: 2px solid #1a365d;
    color: #1a365d;
    padding: 8px 20px;
    font-weight: bold;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-sub:hover {
    background-color: #1c65cc;
    color: #fff;
    text-decoration: none;
}
/* ==========================================================================
   キャプションおよび折りたたみ内画像の設定（!important無し）
   ========================================================================== */
/* 画像の下につける説明文（キャプション）のスタイル */
.img-caption {
    font-size: 0.9rem;
    color: #126cf3; 
    font-weight: 600;     /*  */
    text-align: center;
    padding: 5px 10px;
    background-color: #ffffff;
    margin: 0;
    border-top: 1px solid #e2e8f0;
    line-height: 1.4;
}

/* 折りたたみ（details）の内部に表示する画像の箱 */
.inner-story-image {
    margin-top: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    max-width: 100%;
}

/* 折りたたみ内の画像そのものの設定 */
.inner-story-image img {
    width: 100%;
    height: auto;
    max-height: 200px; /* ボックス内を圧迫しないよう高さを少し制限 */
    object-fit: cover;
    display: block;
}

/* 折りたたみ内に図と文章を綺麗に並べるためのコンテナ */
.story-content-box {
    background-color: #ffffff;
    padding: 4px;
}


/* ==========================================================================
   主要3事業ボックスエリア（黄金バランス＆型崩れ防止版 / !important無し）
   ========================================================================== */
.business-section {
    margin-bottom: 50px;
}

.section-title {
    font-size: 1.5rem;
    color: #1a365d;
    margin-bottom: 25px;
    border-left: 5px solid #1a365d;
    padding-left: 12px;
}

/* 最新のGrid Layout：自動で横並び、画面が狭くなると自動で1列に折り返します */
.business-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    align-items: stretch; /* 3つのボックスの縦の高さを完全に一致させる */
}

/* ボックス自体の設定 */
.business-box {
    border: 4px solid #0000ff;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column; /* 中身（画像、文字、ボタン）を縦に並べる */
    background: #ffffff;
    box-shadow: none;
}

/* ★写真を入れる箱（横幅いっぱいに広げ、高さを200pxに均一化） */
.box-image {
    width: 100%;
    height: 200px;
    background-color: #ffffff; /* 画像がない場合の仮のグレー背景 */
    overflow: hidden;
}

/* ★写真そのもののバグ防止設定 */
.box-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ★どんなサイズ・縦横比の写真が来ても、歪まずに自動で綺麗に収めます */
    display: block;
}

/* ボックス内の文章エリア */
.box-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* 文章の長さが違っても、下のボタンの位置を綺麗に揃えるためのマジック */
}

.box-body h3 {
    font-size: 1.3rem;
    color: #1a365d;
    margin-bottom: 15px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 8px;
}

/* シニア向けに少し大きめで読みやすい文字サイズに調整 */
.box-body p {
    font-size: 1.05rem;
    color: #2d3748;
    margin-bottom: 5px;
    line-height: 1.7;
    flex-grow: 1; /* 空白を自動で埋めてボタンを一番下に押し下げる */
}


/* ==========================================================================
   フッター（索引・サイトマップ型）
   ========================================================================== */
.site-footer {
    background-color: #2d3748;
    color: #e2e8f0;
    padding: 50px 0 20px 0;
    margin-top: 60px;
}

.footer-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
}

.footer-brand h3 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.footer-brand p {
    font-size: 0.85rem;
    color: #a0aec0;
}

.footer-sitemap {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
}

.sitemap-col h4 {
    color: #fff;
    font-size: 0.95rem;
    margin-bottom: 15px;
    border-bottom: 1px solid #4a5568;
    padding-bottom: 5px;
}

.sitemap-col ul {
    list-style: none;
}

.sitemap-col li {
    margin-bottom: 8px;
}

.sitemap-col a {
    color: #cbd5e0;
    font-size: 0.85rem;
}

.sitemap-col a:hover {
    color: #fff;
}

.footer-bottom {
    max-width: var(--max-width);
    margin: 40px auto 0 auto;
    padding: 20px 15px 0 15px;
    border-top: 1px solid #4a5568;
    text-align: center;
    font-size: 0.8rem;
    color: #a0aec0;
}

/* スマホ用ボトムナビ（デフォルトは非表示） */
.mobile-bottom-nav {
    display: none;
}

/* ==========================================================================
   レスポンシブ対応（画面幅のブレイクポイント処理）
   ========================================================================== */

/* タブレット・スマホ用の共通調整 */
@media (max-width: 900px) {
    .header-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .main-nav ul {
        flex-wrap: wrap;
    }
    .main-nav li {
        flex: none;
        width: 33.333%; /* 3列2行に変更 */
        border: 1px solid rgba(255,255,255,0.1);
    }
    .topic-card {
        flex-direction: column;
    }
}

/* スマホ画面（600px以下）のスタイル定義 */
@media (max-width: 600px) {
    body {
        padding-bottom: 60px; /* ボトムナビの高さ分、下部に余白を確保 */
    }
    .main-nav {
        display: none; /* スマホでは上部帯を非表示に */
    }
    .site-title {
        font-size: 1.25rem;
    }
    .top-utility-nav .utility-menu {
        gap: 10px;
    }
    .main-wrapper {
        margin: 20px auto;
    }
    .topic-content {
        padding: 20px;
    }
    .footer-container {
        flex-direction: column;
        gap: 30px;
    }
    .footer-sitemap {
        gap: 30px;
        flex-direction: column;
    }
/* ==========================================================================
       スマホ用ボトム固定ナビゲーション（背景色・透け防止版）
       ========================================================================== */
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px;
        
        /* ★重要：背景色を鉄紺（ネイビー）に100%確実に指定します */
        background-color: #1a365d; 
        
        /* ★最重要：後ろの文字や白画面が絶対に透けないように不透明（1）にします */
        opacity: 1; 
        
        /* 
           ★重要：他のどんなコンテンツ（文章や図）よりも、
           必ず一番手前に浮き上がって表示されるように重ね順（z-index）を高くします
        */
        z-index: 9999; 
        
        box-shadow: 0 -2px 10px rgba(0,0,0,0.2); /* 上部に少し影をつけて立体感を出します */
    }

    .nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: rgba(255,255,255,0.7);
        text-decoration: none;
    }
    .nav-item.active {
        color: #fff;
        background-color: rgba(0,0,0,0.15);
    }
    .nav-icon {
        font-size: 1.2rem;
        margin-bottom: 2px;
    }
    .nav-label {
        font-size: 0.7rem;
        font-weight: bold;
    }
}
/* ==========================================================================
   最上部：左右2分割コンテナ専用スタイル（最大1200px / 各600px幅対応 / !important無し）
   ========================================================================== */
/* 左右並びを制御する大きな外枠 */
.twin-containers-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); /* 画面が狭くなると自動で縦に折る設定 */
    gap: 30px;
    margin-bottom: 50px;
    align-items: stretch; /* 左右のコンテナの高さを綺麗に統一する */
}

/* 左右それぞれのコンテナの箱 */
.twin-container-box {
    background-color: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 25px;
    display: flex;
    flex-direction: column;
}

/* 活動報告用バッジの緑色（シンポジウムの赤と色分けして分かりやすく） */
.badge-report {
    background-color: #2f855a;
}

/* コンテナ内の大見出し（イベントタイトル） */
.container-event-title {
    font-size: 1.25rem;
    color: #1a365d;
    margin-bottom: 15px;
    line-height: 1.4;
    font-weight: bold;
    min-height: 3.5rem; /* 左右の見出しの行数が違っても位置を綺麗に揃えるおまじない */
}

/* 写真・キャプションを包むエリア */
.container-photo-area {
    width: 100%;
    max-width: 550px;
    margin: 0 auto 20px auto;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    overflow: hidden;
    background-color: #cbd5e0;
}

/* 指定された「幅550px・高さ200px程度」を完全に維持する写真設定 */
.container-photo-area img {
    width: 100%;
    height: 200px;       /* 高さを200pxに制限 */
    object-fit: cover;   /* どんな写真が来ても歪ませずに綺麗に収める */
    display: block;
}

/* コンテナ内の文章領域 */
.container-text-body {
    font-size: 1rem;
    color: #2d3748;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* 冒頭のリード文（テーマなど） */
.container-lead-text {
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #cbd5e0;
}

/* 箇条書きリストの設定（シニア向けに見やすく間隔を確保） */
.container-info-list {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 20px;
    flex-grow: 1; /* 残りの空白を埋めて下の告知タグの位置を揃える */
}

.container-info-list li {
    margin-bottom: 12px;
    padding-left: 14px;
    position: relative;
}

/* 行頭に上品な「・」をつける */
.container-info-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    color: #1a365d;
    font-weight: bold;
}

/* シンポジウム専用：講師の演題部分を少し強調 */
.container-info-list li span.program-title {
    display: inline-block;
    color: #4a5568;
    font-weight: bold;
    padding-left: 8px;
    border-left: 2px solid #cbd5e0;
    margin-top: 2px;
}

/* 8月17日受付開始の目立つタグ */
.container-notice-tag {
    background-color: #0713c2;
    border: 2px solid #f5680a;
    color: #fff;
    padding: 10px;
    text-align:center;
    border-radius: 4px;
    font-size: 1.05rem;
    margin-top: auto; /* 常にコンテナの最下部に固定 */
}

/* ==========================================================================
   レスポンシブ：スマホ画面（600px以下）での見栄え調整
   ========================================================================== */
@media (max-width: 600px) {
    .twin-containers-section {
        grid-template-columns: 1fr; /* スマホでは強制的に1列縦並び */
        gap: 20px;
    }
    .twin-container-box {
        padding: 15px;
    }
    .container-event-title {
        font-size: 1.15rem;
        min-height: auto; /* スマホでは高さ固定を解除 */
    }
    .container-photo-area img {
        height: 160px; /* スマホ画面では写真の高さを少し抑えてコンパクトに */
    }
}
/* ==========================================================================
   事業ボックス内：歴史ストーリー・折りたたみ専用スタイル（!important無し）
   ========================================================================== */
.story-section {
    margin-bottom: 15px;
}

/* 各章の小さな見出し */
.story-title {
    font-size: 1.05rem;
    color: #1a365d;
    margin-bottom: 0;
    font-weight: bold;
}

/* 通常のストーリー文章 */
.story-text {
    font-size: 0.95rem; /* 長文のため、少しだけ文字をすっきりさせて読みやすく */
    color: #2d3748;
    line-height: 1.6;
    margin-bottom:0;
}

/* 折りたたみ全体のエリア */
.story-accordion-area {
    margin-bottom: 20px;
    border-top: 1px dashed #cbd5e0;
    padding-top: 10px;
}

/* 折りたたみの1ブロックごとの設定 */
.story-details {
    margin-bottom: 8px;
    background-color: #f7fafc;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    transition: background-color 0.2s;
}

/* 開いている状態の背景を少し変える */
.story-details[open] {
    background-color: #ffffff;
    border: 1px solid #1a365d;
}

/* ★クリックするボタン部分の見出し */
.story-summary {
    padding: 0;
    font-size: 0.95rem;
    font-weight: bold;
    color: #1a365d;
    cursor: pointer; /* マウスを乗せたら指マークにする */
    list-style: none; /* ブラウザ標準の矢印を消す（自前の▶を使うため） */
}
/* 元の矢印を消すためのIE/Safari対策 */
.story-summary::-webkit-details-marker {
    display: none;
}

/* マウスを乗せたら少し背景色を変えて気づかせる */
.story-summary:hover {
    background-color: #edf2f7;
    color: #c53030; /* 触ると少し赤くなってアピール */
}

/* ★開いた（open）ときに、先頭の「▶」を「▼」に自動で切り替える魔法 */
.story-details[open] .story-summary {
    border-bottom: 1px solid #e2e8f0;
    color: #1a365d;
}

/* 開いたときの中身の文章 */
.story-text-hidden {
    padding: 12px;
    font-size: 0.95rem;
    color: #4a5568;
    line-height: 1.6;
    background-color: #fff;
}

/* 結びの文 */
.story-footer-lead {
    font-size: 1rem;
    font-weight: bold;
    color: #2f5eb0;
    margin-top: 15px;
    margin-bottom: 20px;
    border-top: 1px solid #e2e8f0;
    padding-top: 10px;
}
/* ==========================================================================
   最終完成版：PCフッター・スマホフッター出し分け ＆ ボトムナビCSS（!important無し）
   ========================================================================== */
/* フッター共通の基本ベース */
.site-footer {
    background-color: #2d3748;
    color: #e2e8f0;
    padding: 50px 0 20px 0;
    margin-top: 60px;
    width: 100%;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
}

.footer-brand h3 {
    color: #ffffff;
    margin-bottom: 15px;
    font-size: 1.25rem;
    line-height: 1.4;
}

.footer-sitemap {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.sitemap-col h4 {
    color: #ffffff;
    font-size: 1rem;
    margin-bottom: 15px;
    border-bottom: 2px solid #4a5568;
    padding-bottom: 6px;
    font-weight: bold;
}

.sitemap-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sitemap-col li {
    margin-bottom: 10px;
}

.sitemap-col a {
    color: #cbd5e0;
    font-size: 0.95rem;
    text-decoration: none;
    transition: color 0.2s;
}

.sitemap-col a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.footer-bottom {
    max-width: 1200px;
    margin: 40px auto 0 auto;
    padding: 20px 15px 0 15px;
    border-top: 1px solid #4a5568;
    text-align: center;
    font-size: 0.85rem;
    color: #a0aec0;
}

/* ==========================================================================
   レスポンシブ制御（パソコン画面：601px以上のとき発動）
   ========================================================================== */
@media (min-width: 601px) {
    .pc-only-footer {
        display: block; /* パソコン用フッターを表示 */
    }
    .sp-only-footer {
        display: none;  /* スマホ専用フッターを完全にブロック（隠す） */
    }
}

/* ==========================================================================
   レスポンシブ制御（スマホ画面：600px以下のとき発動）
   ========================================================================== */
@media (max-width: 600px) {
    .pc-only-footer {
        display: none;  /* パソコン用フッターを完全にブロック（隠す） */
    }
    .sp-only-footer {
        display: block; /* スマホ専用フッターを表示 */
    }

    .footer-container {
        flex-direction: column;
        gap: 20px;
    }
    
    .footer-sitemap {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .sitemap-col {
        width: 100%;
        border-bottom: 1px solid #4a5568;
    }

    /* スマホアコーディオン用の見出しボタン */
    .footer-summary {
        color: #ffffff;
        font-size: 1.05rem;
        font-weight: bold;
        padding: 12px 5px;
        cursor: pointer;
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .footer-summary::-webkit-details-marker {
        display: none;
    }

    /* 右端の「＋」マーク自動配置 */
    .footer-summary::after {
        content: "＋";
        font-size: 0.9rem;
        color: #cbd5e0;
    }

    /* 開いたときに「－」に切り替える */
    .footer-details[open] .footer-summary::after {
        content: "－";
    }

    /* 折りたたまれて隠れる中身のリスト（スマホ専用） */
    .sitemap-col ul {
        padding: 5px 0 15px 15px;
    }
    
    .sitemap-col li {
        margin-bottom: 12px;
    }
}


* ボトムナビ内のアイコン画像が、枠（高さ24px）に自動で綺麗に収まるようにする設定 */
.mobile-bottom-nav .nav-icon img {
    width: auto;
    height: 24px; /* 高さを24pxに固定し、縦横比を保ったまま綺麗に縮小します */
    display: block;
}