/* 全体の設定 */
body {
    margin: 0;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333;
    line-height: 1.6;
}

html {
    scroll-behavior: smooth; /* これでスルッと移動します */
}

/* ヘッダー（固定表示） */
header {
    background-color: #004098; /* 三重大学っぽい濃い青 */
    color: white;
    padding: 10px 0;
    position: sticky; /* スクロールしても上に張り付く設定 */
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.header-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

/* ▼▼▼ ヘッダータイトルの修正 ▼▼▼ */

header h1 {
    margin: 0;
    /* フォントサイズ指定は削除し、下のspanで指定します */
}

/* リンク全体のレイアウト */
header h1 a {
    color: white;
    text-decoration: none;
    display: flex;          /* フレックスボックス化 */
    flex-direction: column; /* 縦並びにする */
    line-height: 1.2;       /* 行間を少し詰める */
}

/* 上の長い組織名（小さく） */
.org-name {
    font-size: 0.7rem;      /* 小さめの文字 */
    font-weight: normal;    /* 太字にしない */
    opacity: 0.9;           /* 少し透明度を入れて控えめに */
}

/* 下の施設名（大きく） */
.facility-name {
    font-size: 1.3rem;      /* 大きく強調 */
    font-weight: bold;
}

/* スマホ対応：画面がとても狭い場合、組織名をさらに小さくする調整 */
@media (max-width: 600px) {
    .org-name {
        font-size: 0.6rem;
    }
    .facility-name {
        font-size: 1.1rem;
    }
}

header nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

header nav a {
    color: white;
    text-decoration: none;
    margin-left: 20px;
    font-weight: bold;
}

/* メインビジュアル */
.main-visual {
    /* 背景画像を設定します */
    background-image: url("images/top_rat.jpg");
    
    /* 画像の表示方法の設定 */
    background-size: cover;   /* 枠に合わせて写真を拡大縮小（はみ出た部分は切り取られる） */
    background-position: center; /* 写真の中央を表示 */
    background-repeat: no-repeat; /* 繰り返さない */

    height: 400px; /* 高さはそのまま */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative; /* これが重要 */
}

/* --- 追加するボタンのデザイン --- */
.visual-btn {
    position: absolute;  /* 絶対配置 */
    right: 30px;         /* 右端からの距離 */
    bottom: 30px;        /* 下端からの距離 */
    
    /* ボタンの見た目（三重大グリーン） */
    background-color: #006934; 
    color: #fff;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.3); /* 白い枠線で目立たせる */
    transition: 0.3s;
    z-index: 10; /* 文字や背景より手前に表示 */
}

.visual-btn:hover {
    background-color: #008542; /* ホバー時は少し明るく */
    color: #fff;
    transform: translateY(-2px); /* 少し浮き上がる */
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}

/* スマホで見た時の調整 */
@media (max-width: 768px) {
    .visual-btn {
        right: 20px;
        bottom: 20px;
        font-size: 12px;
        padding: 8px 16px;
    }
}

/* 写真を少し暗くするフィルタ（文字を読みやすくするため） */
.main-visual::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2); /* 黒の半透明（0.4の数字を変えると濃さが変わります） */
}

/* 文字の設定 */
.visual-text {
    position: relative; /* フィルタより前に出す */
    z-index: 1; /* 最前面へ */
}

.visual-text h2 {
    font-size: 2.5rem; /* 少し文字を大きくしました */
    color: white;      /* 文字色を白に変更（濃い色だと読めないため） */
    text-shadow: 1px 1px 5px rgba(0,0,0,0.5); /* 読みやすいように影を追加 */
}

/* 各セクション共通 */
.content-section {
    padding: 20px 20px;
    max-width: 800px;
    margin: 0 auto;
}

h3 {
    border-bottom: 3px solid #004098;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
/* ▼▼▼ 重要なお知らせの枠デザイン ▼▼▼ */
.info-box {
    border: 2px solid #004098; /* テーマカラーの青で枠線を引く */
    background-color: #f4f8ff; /* 枠の中をごく薄い青色にする（読みやすくするため） */
    
    /* ここが「ちょうどよいマージン」の設定です */
    /* padding: 上下 左右; */
    padding: 25px 30px;
    
    border-radius: 8px;        /* 角を少し丸くして優しい印象に */
    margin-bottom: 40px;       /* 枠の下に元の間隔を空ける */
    text-align: left;          /* テキストを左寄せにする */
    line-height: 1.8;          /* 行間を少し広げて読みやすくする */
}

/* 枠内のリンクを少し目立たせる設定 */
.info-box a {
    color: #004098;
    font-weight: bold;
    display: inline-block;     /* リンクの上下に少し隙間を作る */
    margin-top: 10px;
}

/* お知らせエリア（強調） */
.news-box {
    border: 2px solid #ff6b6b; /* 赤枠で注意喚起 */
    padding: 10px;
    background-color: #fff5f5;
}

/* グレー背景のセクション */
.gray-bg {
    background-color: #f9f9f9;
    max-width: 100%; /* 背景を横いっぱいに */
}
.gray-bg > * { /* 中身は中央寄せ */
    max-width: 800px;
    margin: 0 auto;
}

/* パネル（利用案内など） */
.guide-panels {
    /* display: flex; ←これを削除し、下のように書き換えます */
    display: grid; 
    grid-template-columns: repeat(2, 1fr); /* 2列にする設定 */
    gap: 20px;
    align-items: stretch; /* 高さを揃える */
}

.panel {
    /* flex: 0 0 calc(50% - 10px); ←これも削除します */
    
    /* ▼ パネル自体の見た目（ここはそのまま） */
    background: #f0f0f0;
    padding: 20px; /* 少し広げました */
    text-align: center;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    box-sizing: border-box;

    /* ▼ パネルの中身の配置設定（重要！） */
    display: flex;
    flex-direction: column; /* 中身を縦に並べる */
    height: 100%;           /* 高さをいっぱいに使う */
    justify-content: space-between; /* 上下のバランスをとる */
}

/* マウスが乗った時の動き */
.panel:hover {
    background-color: #e0ecff; /* 薄い青色に変化 */
    transform: translateY(-5px); /* 少し上に浮き上がる */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* 影を濃くする */
    cursor: pointer; /* 指マークにする */
}

/* パネルの中のタイトルの色 */
.panel h4 {
    color: #004098; /* タイトルだけ青くする */
    margin-top: 0;
    font-size: 1.2rem;
}

/* ▼▼▼ パネル内のボタン用スタイル ▼▼▼ */

/* ボタンを囲むエリア */
.panel-actions {
    margin-top: 20px;      /* 上の文字との間隔 */
    display: flex;         /* ボタンを横並びにする */
    flex-wrap: wrap;       /* 狭くなったら折り返す */
    gap: 10px;             /* ボタン同士の隙間 */
}

/* パネル内の各ボタン */
/* パネル内の各ボタン */
.panel-btn {
    /* 配置の設定 */
    flex: 1;               /* 横幅を均等に広げる */
    min-width: 200px;      /* 狭くなりすぎないように */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* ボタンの見た目の設定（ここが重要です） */
    background-color: #004098; /* 三重大学ブルー */
    color: white !important;   /* 文字色を白に強制 */
    text-decoration: none;     /* 下線を消す */
    padding: 12px 10px;        /* ボタンの厚み */
    border-radius: 4px;        /* 角を丸く */
    font-weight: bold;
    font-size: 0.9rem;
    line-height: 1.4;
    text-align: center;
    transition: background-color 0.3s; /* 色の変化を滑らかに */
}

/* マウスを乗せた時に少し明るくする */
.panel-btn:hover {
    background-color: #0056b3;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .panel-actions {
        flex-direction: column; /* スマホでは縦並び */
    }
    .panel-btn {
        width: 100%; /* 横幅いっぱい */
    }
}

/* 重要：パネル自体がリンクではなくなったので、ホバー時の挙動を調整 */
/* もし既存のCSSで .panel:hover に cursor: pointer; がある場合は削除または上書きが必要です */
div.panel {
    cursor: default; /* カーソルを指マークにしない */
}
/* ただし、少し浮き上がるエフェクトは残しても良いでしょう */
div.panel:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* フッター */
footer {
    background-color: #333;
    color: white;
    padding: 40px 0;
    text-align: center;
}

/* 1つのニュースの塊 */
.news-item {
    display: flex;          /* 横並びにする魔法の呪文です */
    align-items: flex-start; /* 上揃えにします */
    gap: 20px;              /* 画像と文字の間隔 */
    padding: 20px 0;        /* 上下の余白 */
    border-bottom: 1px dashed #ccc; /* 下に点線を引いて区切る */
}

/* 最後のニュースだけ下線を消す */
.news-item:last-child {
    border-bottom: none;
}

/* 左側のサムネイル画像の枠 */
.news-thumb {
    width: 120px;          /* サムネイルの幅を120pxに固定 */
    flex-shrink: 0;        /* 画面が狭くなっても画像を縮ませない */
}

/* サムネイル画像自体 */
.news-thumb img {
    width: 100%;           /* 枠いっぱいに表示 */
    height: auto;
    border-radius: 4px;    /* 角を少し丸くする */
    border: 1px solid #ddd; /* 薄い枠線をつける */
}

/* 右側の文章エリア */
.news-body {
    flex: 1;               /* 残りのスペースを全部使う */
}

/* 日付 */
.news-date {
    font-size: 0.85rem;
    color: #888;
    background: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid #ddd;
    display: inline-block;
    margin-bottom: 5px;
}

/* タイトル */
.news-title {
    margin: 5px 0;
    font-size: 1.1rem;
    color: #004098; /* テーマカラーの青 */
    font-weight: bold;
}

/* 本文 */
.news-text {
    margin: 0;
    font-size: 0.95rem;
    color: #333;
}

/* スマホ対応：画面が狭いときは縦並びにする */
@media (max-width: 600px) {
    .news-item {
        flex-direction: column; /* 縦並びにする */
    }
    .news-thumb {
        width: 100%;       /* 画像を大きく表示 */
        max-width: 200px;  /* ただし大きすぎないように制限 */
        margin-bottom: 10px;
    }
}

.staff-table-container {
    margin-top: 30px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.staff-table-container h4 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
    border-left: 5px solid #004098; /* 左に青い線でアクセント */
    padding-left: 10px;
}

.staff-table {
    width: 100%;
    border-collapse: collapse; /* 枠線を重ねる設定 */
    border: 1px solid #ddd;
}

.staff-table th,
.staff-table td {
    padding: 15px;
    border-bottom: 1px solid #ddd;
    text-align: left;
}

/* 左側（役職）のデザイン */
.staff-table th {
    background-color: #eef4ff; /* ごく薄い青色 */
    color: #004098;
    font-weight: bold;
    width: 40%; /* 横幅の比率 */
    white-space: nowrap; /* スマホ以外では改行させない */
}

/* 右側（氏名）のデザイン */
.staff-table td {
    background-color: #fff;
    font-weight: 500;
}

/* 最後の行の下線を消す */
.staff-table tr:last-child th,
.staff-table tr:last-child td {
    border-bottom: none;
}

/* ▼▼▼ 関連リンク集のデザイン（Grid版） ▼▼▼ */

.link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    
    /* ここがポイント：Gridレイアウトにします */
    display: grid;
    /* 「1fr」を3回繰り返す＝3列にするという意味です */
    grid-template-columns: repeat(3, 1fr); 
    gap: 15px; /* ボタン同士の間隔 */
}


.link-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border: 1px solid #ccc;
    color: #333;
    text-decoration: none;
    padding: 15px 20px;
    border-radius: 4px;
    transition: all 0.3s;
    font-weight: bold;
    height: 100%; /* 高さを揃える */
    box-sizing: border-box; /* 枠線を含めたサイズ計算 */
}

/* マウスを乗せた時の動き */
.link-list a:hover {
    background-color: #004098;
    color: white;
    border-color: #004098;
}

.link-list .icon {
    font-size: 0.8rem;
    transform: rotate(-90deg);
    margin-left: 10px; /* 文字とアイコンの間隔 */
    flex-shrink: 0;    /* アイコンが潰れないようにする */
}

/* ▼ 文字数が多いボタン用のクラス（文字を小さくする） */
.link-list a.long-text {
    font-size: 0.85rem; /* 通常より少し小さくする（適宜調整してください） */
}

/* ▼ スマホ対応：画面が狭いときは1列にする */
@media (max-width: 768px) {
    .link-list {
        grid-template-columns: 1fr; /* 1列にする */
    }
}

/* ▼▼▼ 沿革（表形式）のデザイン ▼▼▼ */

.history-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 2px solid #004098; /* 上に青い線 */
    margin-bottom: 50px;
}

.history-table th,
.history-table td {
    padding: 15px;
    border-bottom: 1px solid #ddd; /* 下に薄い線 */
    text-align: left;
    vertical-align: top; /* 文字を上揃えにする */
}

/* 左列（年月） */
.history-table th {
    width: 30%; /* 幅を30%に固定 */
    background-color: #f9f9f9; /* 薄いグレー背景 */
    font-weight: bold;
    color: #004098;
    white-space: nowrap; /* 日付を改行させない */
}

/* 右列（できごと） */
.history-table td {
    background-color: #fff;
    line-height: 1.6;
}

/* スマホ対応：画面が狭いときは日付を改行許可する */
@media (max-width: 600px) {
    .history-table th {
        white-space: normal;
        font-size: 0.9rem;
    }
}

/* ▼▼▼ 慰霊碑コーナー（グレー背景版） ▼▼▼ */
/* セクション自体が白背景なので、枠の中をグレーにして目立たせます */
.memorial-section-gray {
    background-color: #f5f5f5; /* 背景を薄いグレーに */
    padding: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 30px;
}

.memorial-text {
    flex: 1;
}

.memorial-text h4 {
    margin-top: 0;
    color: #333;
    border-bottom: 2px solid #ccc; /* 下線をグレーに */
    display: inline-block;
    padding-bottom: 5px;
}

.memorial-image {
    width: 300px;
    flex-shrink: 0;
}

.memorial-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* スマホ対応 */
@media (max-width: 600px) {
    .memorial-section-gray {
        flex-direction: column;
    }
    .memorial-image {
        width: 100%;
    }
}

/* --- 新しいページ（about.html）用 --- */
.main-content-single {
    margin-top: 40px;
    margin-bottom: 60px;

    max-width: 800px;   /* 幅を800pxに制限（これで左右に余白が生まれます） */
    margin-left: auto;  /* 左の余白を自動調整 */
    margin-right: auto; /* 右の余白を自動調整 */
    
    /* スマホで見た時にも端が詰まりすぎないように内側にも余白を */
    padding-left: 20px; 
    padding-right: 20px;
    /* ▲▲▲ ここまで ▲▲▲ */
}
.page-header h2 {
    font-family: var(--header-font);
    color: var(--mie-green);
    border-bottom: 2px solid var(--mie-green);
    padding-bottom: 15px;
}
.lead-text {
    font-size: 16px;
    margin-bottom: 30px;
}
/* ナビゲーションの現在地表示 */
.main-nav a.active {
    background-color: rgba(255, 255, 255, 0.2);
    font-weight: bold;
}
/* 戻るボタンエリア */
.back-btn-area {
    margin-top: 40px;
    text-align: center;
}
.btn-back {
    display: inline-block;
    padding: 10px 30px;
    border: 1px solid var(--mie-green);
    color: var(--mie-green);
    border-radius: 4px;
}
.btn-back:hover {
    background-color: var(--mie-green);
    color: #fff;
    text-decoration: none;
}

/* モバイル対応調整 */
@media (max-width: 768px) {
    .visual-content h2 { font-size: 24px; top: 40px; left: 20px; }
    .visual-content p { font-size: 14px; top: 80px; left: 20px; max-width: 90%; }
    .visual-btn {
        right: 20px; bottom: 20px;
        padding: 10px 15px; font-size: 13px;
    }
}

/* ▼▼▼ 横幅いっぱいに広げる特別なパネルの設定 ▼▼▼ */
.panel-wide {
    /* グリッドの列を「最初から最後まで（1 / -1）」またぐ設定 */
    grid-column: 1 / -1;
    
    /* （オプション）この重要なお知らせだけ、少し目立つように背景色を変えても良いでしょう */
    /* background-color: #eef4ff; */ /* 薄い青色にする例 */
    /* border: 2px solid #004098; */ /* 青い枠線を付ける例 */
}

/* ...既存のスタイル（btn-downloadなど）... */
        
        .btn-download:hover {
            background: #002a65;
        }

        /* ▼▼▼ フロー図用のスタイル（ここに追加） ▼▼▼ */
        .flow-chart-wrapper {
            text-align: center; /* 画像を中央寄せ */
            margin: 30px auto;  /* 上下に余白を開ける */
            max-width: 800px;   /* 最大幅を制限 */
        }

        .flow-chart-wrapper img {
            max-width: 100%;    /* 画面幅に合わせて縮小する設定 */
            height: auto;       /* 高さは自動調整 */
            border: 1px solid #ddd; /* 薄い枠線をつける（お好みで） */
            border-radius: 8px;     /* 角を少し丸くする */
            box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 影をつけて浮き上がらせる */
        }

/* ▼▼▼ 学内専用ページへの誘導ボタン（index.html用） ▼▼▼ */
.gate-panel {
    /* パネル自体の設定 */
    grid-column: 1 / -1; /* 横幅いっぱいに */
    background: #fff3cd !important; /* 目立つように薄い黄色系の背景（警告色） */
    border: 2px solid #e0a800 !important; /* 枠線も黄色系 */
    padding: 0 !important; /* パディングをリセット */
    overflow: hidden; /* 角丸からはみ出ないように */
    display: flex; /* 中身をフレックスボックスに */
}

/* パネルの中のリンクボタン */
.btn-gate-link {
    display: flex;
    /* justify-content: space-between; ←これを削除またはコメントアウト */
    justify-content: center; /* 中身を中央に寄せる */
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 30px 40px;
    text-decoration: none;
    color: #856404;
    transition: all 0.3s;
    gap: 20px; /* 文字と矢印の間隔を少し空ける */
}

/* ボタンの中のテキストエリア */
.gate-text {
    text-align: left; /* 文章の行揃えを中央にする */
}

.gate-text h4 {
    margin: 0 0 5px 0;
    font-size: 1.4rem;
    color: #856404;
    border-bottom: none;
}
.gate-text p {
    margin: 0;
    font-size: 1rem;
    color: #856404;
}

/* アイコン（矢印） */
.gate-icon {
    font-size: 2rem;
    font-weight: bold;
    color: #e0a800;
    /* 必要なら矢印の位置を微調整 */
}

/* ホバー時の動き */
.gate-panel:hover {
    background-color: #ffeeba !important;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}
.gate-panel:hover .btn-gate-link {
    color: #533f03;
}