/* ------------------------------
   全体
------------------------------ */
body {
    font-family: "Yu Gothic", "メイリオ", sans-serif;
    margin: 0;
    background: #f5f7f5;
    color: #333;
}

/* ------------------------------
   ヘッダー
------------------------------ */
.site-header {
    width: 100%;
}

.header-top {
    background: #308000;
    color: #fff;
    padding: 8px 15px;
    font-size: 14px;
    text-align: center;  
}

.header-main {
    text-align: center;
    padding: 25px 0;
    background: #ffffff;
    border-bottom: 4px solid #308000;
}

.header-main .header-logo {
    width: 520px;   /* ← 大きくした */
    height: auto;
    display: block;
    margin: 0 auto;
}
/* ------------------------------
   レイアウト（2カラム）
------------------------------ */
.container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    gap: 20px;
    padding: 20px;
}

/* ------------------------------
   左カラム（メニュー）
------------------------------ */
.sidebar {
    width: 220px;
    background: #689810;
    padding: 15px;
    color: #fff;
    border-radius: 4px;
}

.menu {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.menu li {
    margin-bottom: 10px;
}

.menu a {
    display: block;
    background: #eae482;
    color: #64381c;
    text-decoration: none;
    padding: 8px 10px;
    font-weight: bold;
    border-radius: 3px;
}

.menu a:hover {
    background: #fff4b0;
}

/* ------------------------------
   事務局情報
------------------------------ */
.office {
    margin-top: 30px;
    background: #308000;
    padding: 15px;
    border-radius: 4px;
}

.office h3 {
    margin-top: 0;
    color: #fff;
    border-left: 6px solid #eae482;
    padding-left: 8px;
}

.office p {
    font-size: 14px;
    line-height: 1.6;
    color: #fff;
}

.office a {
    color: #fff;
    text-decoration: underline;
}

/* ------------------------------
   右カラム（本文）
------------------------------ */
.content {
    flex: 1;
    background: #ffffff;
    padding: 25px;
    border: 1px solid #cdd8cd;
    border-radius: 4px;
}

/* 見出し */
.content h2 {
    border-left: 6px solid #308000;
    padding-left: 10px;
    margin-top: 0;
}

/* ------------------------------
   トピックス（可変）
------------------------------ */
.topics {
    margin-bottom: 40px;
}


.topic-gallery figure {
    display: inline-block;   /* ← 写真と説明を縦にまとめる */
    text-align: center;
    margin: 10px;
}

.topic-gallery img {
    display: block;          /* ← 画像をブロック化して下に余白を作る */
    margin: 0 auto;
}

.topic-gallery figcaption {
    font-size: 12px;
    color: #444;
    margin-top: 5px;         /* ← 写真の下に余白 */
}

.topic-figure {
    display: inline-block;
    text-align: center;
    margin: 10px 0 20px 0;
}

.topic-figure img {
    display: block;
    margin: 0 auto;
}

.topic-figure figcaption {
    font-size: 12px;
    color: #444;
    margin-top: 5px;
}

.topic-figure,
.topic-gallery figure {
    display: block;          /* ← ブロック化して中央寄せ可能に */
    text-align: center;      /* ← 中央寄せ */
    margin: 20px auto;       /* ← 左右 auto で中央配置 */
}

.topic-figure img,
.topic-gallery img {
    display: block;
    margin: 0 auto;          /* ← 画像自体も中央に */
}

.two-column-photos {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.two-column-photos figure {
    text-align: center;
    margin: 0;
}

.two-column-photos img {
    width: 325px;     /* ← 他の写真と同じサイズに統一 */
    height: auto;
    display: block;
    margin: 0 auto;
}

figure figcaption {
    font-size: 12px;      /* 小さめ */
    color: #444;          /* 濃いグレー */
    margin-top: 5px;
    text-align: center;
}

.topic-block img.topic-img {
    display: block;
    margin: 0 auto;   /* ← これで中央寄せ */
}
/* ------------------------------
   活動アルバム（固定）
------------------------------ */
.album-desc {
    margin-top: -10px;
    margin-bottom: 20px;
    color: #308000;
}

.album-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.album-grid img {
    width: 135px;
    height: auto;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
}

.album-grid img:hover {
    opacity: 0.85;
}

/* ------------------------------
   行事予定（固定）
------------------------------ */
.schedule-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.schedule-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #ddd;
}

.schedule-table td:first-child {
    width: 120px;
    font-weight: bold;
}

/* ------------------------------
   外部リンク・動画
------------------------------ */
.links {
    margin-top: 40px;
}

.video {
    margin: 20px 0;
    text-align: center;
}

.banner-row {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

/* ------------------------------
   フッター
------------------------------ */
.site-footer {
    background: #308000;
    color: #fff;
    text-align: center;
    padding: 15px;
    margin-top: 40px;
    border-top: 4px solid #1f5c3a;
}

/* ------------------------------
   スマホ対応（簡易）
------------------------------ */
@media (max-width: 900px) {
    .container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
    }

    .album-grid {
        justify-content: center;
    }

    .banner-row {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 600px) {
    .header-main .header-logo {
        width: 80%;  /* スマホでは自動で縮小 */
    }
}

/* フラットなホームへ戻るボタン（左矢印） */
.back-home {
    text-align: center;
    margin: 50px 0;
}

.back-home-btn {
    display: inline-block;
    padding: 12px 28px;
    border: 2px solid #308000;
    color: #308000;
    background: #ffffff;
    text-decoration: none;
    border-radius: 30px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    transition: 0.25s;
}

.back-home-btn .arrow {
    margin-right: 10px;
    transition: 0.25s;
}

.back-home-btn:hover {
    background: #f4fff4; /* ほんのり緑がかった白 */
    border-color: #256600;
    color: #256600;
}

.back-home-btn:hover .arrow {
    margin-right: 16px; /* ホバーで矢印がスッと動く */
}

/* 行事予定テーブル（schedule-table風のデザイン） */
.event-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.event-table tr {
    border-bottom: 1px solid #ddd; /* 行の下線 */
}

.event-table td {
    padding: 10px 6px;
    vertical-align: top;
}

/* 日付部分（左側） */
.event-table td:first-child {
    width: 110px;            /* ←ズレ防止の固定幅 */
    font-weight: bold;       /* 強調 */
    color: #004600;          /* 協会カラーの濃い緑 */
    white-space: nowrap;     /* 折り返し防止 */
    text-align: right;       /* 右寄せで美しく揃う */
    padding-right: 12px;
}

/* イベント名（右側） */
.event-table td:last-child {
    color: #333;
    line-height: 1.6;
}

/* 活動アルバムの写真を立体的に見せる */
.album-grid img {
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    background: #fff;
}

.album-grid img:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.25);
}

.album-grid img {
    border: 4px solid #fff;
}

______________________________________________________________※↓会長挨拶終わったら削除して可

/* 会長あいさつ：写真左・文章右の横並び */
.greeting-flex {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    margin-top: 20px;
}

/* 写真を小さくする（例：幅180px） */
.greeting-photo {
    width: 180px;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

/* 文章を右側に配置 */
.greeting-text {
    flex: 1;
    font-size: 16px;
    line-height: 1.9;
}

/* スマホでは縦並びに */
@media (max-width: 600px) {
    .greeting-flex {
        flex-direction: column;
        text-align: center;
    }
    .greeting-photo {
        width: 70%;
        margin: 0 auto;
    }
}
.greeting-photo {
    float: left;          /* 写真を左に回り込ませる */
    width: 180px;         /* 写真を小さく */
    margin: 0 20px 20px 0; /* 右と下に余白 */
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

.greeting-text {
    font-size: 16px;
    line-height: 1.9;
}
/* 写真を左に回り込ませる */
.greeting-photo {
    float: left;
    width: 240px;          /* ← 少し小さめに調整 */
    margin: 0 25px 15px 0; /* 右と下に余白 */
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

/* 写真下の肩書き */
.greeting-caption {
    clear: left;          /* ← 写真の回り込みを解除する */
    float: left;          /* 写真の下に左寄せで配置 */
    width: 240px;         /* 写真と同じ幅に揃える */
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    margin: 1px 25px 20px 0;
}

/* 本文（写真右 → 写真下へ自然に流れる） */
.greeting-text {
    font-size: 16px;
    line-height: 1.9;
}

/* スマホでは縦並びに */
@media (max-width: 600px) {
    .greeting-photo,
    .greeting-caption {
        float: none;
        width: 70%;
        margin: 0 auto 20px auto;
        text-align: center;
    }
}

.greeting-sign {
    text-align: right;      /* ← 右寄せ */
    font-size: 17px;
    line-height: 1.8;
    margin-top: 40px;       /* ← 本文との余白 */
    font-weight: bold;
}

__________________________________________________________________※↑会長挨拶終わったら削除して可


/* 画像アイコン版の矢印 */
.arrow-img {
    height: 16px;            /* ← 少し小さくして文字とバランス良く */
    margin-right: 2px;       /* 文字との間隔 */
    vertical-align: middle;  /* ← 文字の中央に揃える最重要ポイント */
    position: relative;
    top: -1px;               /* ← 微調整でさらに完璧に中央へ */
    transition: 0.25s;
}

.back-home-btn:hover .arrow-img {
    margin-right: 14px;      /* ホバー時のスッと動く演出 */
}