.popup-overlay {
    /* 画面全体を覆う固定配置 */
    position: fixed;  /* 画面に固定し、スクロールしても動かない */
    top: 0;           /* 画面の最上部に配置 */
    left: 0;          /* 画面の最左端に配置 */
    width: 100%;      /* 横幅を画面いっぱいに */
    height: 100%;     /* 高さを画面いっぱいに */

    /* 背景設定（半透明の黒） */
    background: rgba(0, 0, 0, 0.5);  /* 背景を50%透過の黒に */

    /* ポップアップを中央配置 */
    display: flex;             /* フレックスボックスを適用 */
    align-items: center;       /* 縦方向の中央配置 */
    justify-content: center;   /* 横方向の中央配置 */

    /* 他の要素より前面に表示 */
    z-index: 1000;  /* 他のコンテンツよりも手前に配置 */
}

.popup-content {
    /* ポップアップの背景色 */
    background: white;  /* 背景を白に設定 */

    /* 内側の余白（コンテンツの見た目を整える） */
    padding: 20px;  /* 内側の余白を20px確保 */

    /* ポップアップのサイズ設定 */
    width: 400px;       /* 基本の横幅を400pxに設定 */
    max-width: 80%;     /* 画面サイズに応じて最大80%の幅まで縮小 */

    /* デザインの調整 */
    border-radius: 8px;  /* 角を8px丸めて柔らかい印象に */
    text-align: center;  /* テキストを中央揃えに */

    /* 影をつけてポップアップを際立たせる */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);  /* ぼんやりとした影をつける */
}

.message-box {
    /* 高さ制限（スクロール可能にする） */
    max-height: 150px;  /* 最大高さを150pxに設定し、内容が多い場合スクロールを表示 */
    
    /* 縦方向のスクロールを有効化 */
    overflow-y: auto;  /* 内容がはみ出した場合、縦スクロールを表示 */

    /* ボーダーで枠を作成 */
    border: 1px solid #ddd;  /* 薄いグレーの枠線を追加 */

    /* 内側の余白 */
    padding: 10px;  /* 内側に10pxの余白を設定 */

    /* テキストの配置 */
    text-align: left;  /* 文章を左寄せに */
}

.popup button {
    /* ボタンの外側の余白 */
    margin-top: 10px;  /* 上部に10pxの余白を追加 */

    /* ボタンの内側の余白（クリックしやすくする） */
    padding: 10px;  /* ボタン内のテキスト周りに10pxの余白を確保 */

    /* ボタンの幅を調整 */
    width: 100%;  /* ボタンをポップアップの横幅いっぱいに広げる */

    /* ボタンの背景色（ブルー系） */
    background: #007bff;  /* 明るい青色の背景を設定 */

    /* 文字色（白） */
    color: white;  /* テキストを白に */

    /* ボーダーを削除（スッキリしたデザイン） */
    border: none;  /* 枠線をなくす */

    /* 角を丸くして柔らかい印象に */
    border-radius: 5px;  /* 5pxの角丸デザイン */

    /* 初期状態ではボタンを無効化（押せない） */
    cursor: not-allowed;  /* カーソルを「押せない」状態に */
    opacity: 0.5;  /* 透明度を50%にして、無効化を視覚的に表現 */
}

/* ボタンが有効になったときのスタイル */
.popup button.enabled {
    opacity: 1;  /* 透明度を通常の100%に */
    cursor: pointer;  /* クリックできるようにカーソルを変更 */
}

#header_top {
    width: 100%;
    min-width: 1100px;
    height: 30px; /* 高さを追加 */
    border-top: 30px solid #01913a;
    margin-top: 20px;
    clear: both;
    overflow: hidden; /* マージン相殺対策 */
    display: block; /* 明示的にブロック要素と指定 */
}

.design01 {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%; /* 親要素に合わせて最大限広がる */
    border-collapse: collapse;
    table-layout: auto; /* セルの内容に応じて幅を自動調整 */
   }
   .design01 th {
    padding: 10px;
    background: #eafae9;
    border: solid 1px #778ca3;
   }
   .design01 td {
    padding: 10px;
    border: solid 1px #778ca3;
   }

/* 画像を横に並べるコンテナ */
.image-container {
    display: flex;
    justify-content: center; /* 画像を中央揃え */
    gap: 20px; /* 画像の間隔 */
    margin-top: 20px;
}

/* 画像とタイトルをまとめる */
.image-item {
    text-align: center; /* 画像とタイトルを中央揃え */
}

/* 画像のサイズ */
.image-item img {
    width: 70%; /* 画像の幅を70%に設定 */
    height: auto;
    display: block; /* 余計な隙間をなくす */
    margin: 0 auto; /* 中央揃え */
}

/* タイトルのスタイル */
.image-item p {
    margin-top: 10px; /* 画像との間隔 */
    font-size: 18px; /* 文字サイズ */
    font-weight: bold; /* 太字 */
    color: #333; /* 文字色 */
    text-decoration: none; /* デフォルトのリンクの下線を消す */
    text-align: center;
    position: relative;
    padding: 10px 20px; /* 内側の余白 */
    background: #f8f9fa; /* 背景色を薄いグレーに */
    border-radius: 20px; /* 角を丸くする */
    display: inline-block; /* 横幅をコンテンツにフィット */
    transition: all 0.3s ease-in-out; /* アニメーション効果 */
}

/* 矢印アイコンの装飾 */
.image-item p::before {
    content: '▶'; /* カスタム矢印 */
    margin-right: 8px; /* 文字との間隔 */
    color: #00b14a; /* 矢印の色 */
}

/* タイトルのリンクを有効にする */
.image-item a {
    text-decoration: none; /* 下線を消す */
    color: inherit; /* 親要素の色を引き継ぐ */
    display: block; /* 画像とテキスト全体をクリック範囲に */
    text-align: center;
}

/* ホバー時のエフェクト */
.image-item a:hover p {
    background: #00b14a; /* 背景を青に */
    color: white; /* 文字色を白に */
}

.image-item a:hover p::before {
    color: white; /* ホバー時の矢印の色も変更 */
}



/* バナー用 */
.image-banner {
    text-align: center; /* 画像とタイトルを中央揃え */
}

/* 画像のサイズ */
.image-banner img {
    width: 70%; /* 画像の幅を70%に設定 */
    height: auto;
    display: block; /* 余計な隙間をなくす */
    margin: 0 auto; /* 中央揃え */
}
/* バナーのサイズ */
.image-banner img {
    width: 100%; 
    height: auto;
    display: block; /* 余計な隙間をなくす */
    margin: 0 auto; /* 中央揃え */
}

/* タイトルのスタイル */
.image-banner p {
    margin-top: 10px; /* 画像との間隔 */
    font-size: 18px; /* 文字サイズ */
    font-weight: bold; /* 太字 */
    color: #333; /* 文字色 */
    text-decoration: none; /* デフォルトのリンクの下線を消す */
    text-align: center;
    position: relative;
    padding: 10px 20px; /* 内側の余白 */
    background: #f8f9fa; /* 背景色を薄いグレーに */
    border-radius: 20px; /* 角を丸くする */
    display: inline-block; /* 横幅をコンテンツにフィット */
    transition: all 0.3s ease-in-out; /* アニメーション効果 */
}

/* 矢印アイコンの装飾 */
.image-banner p::before {
    content: '▶'; /* カスタム矢印 */
    margin-right: 8px; /* 文字との間隔 */
    color: #00b14a; /* 矢印の色 */
}

/* タイトルのリンクを有効にする */
.image-banner a {
    text-decoration: none; /* 下線を消す */
    color: inherit; /* 親要素の色を引き継ぐ */
    display: block; /* 画像とテキスト全体をクリック範囲に */
    text-align: center;
}

/* ホバー時のエフェクト */
.image-banner a:hover p {
    background: #00b14a; /* 背景を青に */
    color: white; /* 文字色を白に */
}

.image-banner a:hover p::before {
    color: white; /* ホバー時の矢印の色も変更 */
}



.download-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.worksheet {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
    padding: 15px;
    margin: 10px 0;
    border-radius: 8px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

/* 通常のワークシート名 */
.worksheet p {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
}

/* 通常のダウンロードボタン */
.download-btn {
    background: #3e9afc;
    color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
    display: inline-block;
}

.download-btn:hover {
    background: #0056b3;
}

/* PDFとWordの2つのボタン用 */
.download-buttons {
    display: flex;
    gap: 10px; /* ボタンの間隔 */
    margin-left: auto; /* 右端に配置する */
}

/* PDF用のボタン */
.download-btn.pdf {
    background: #d9534f; /* 赤系 */
}

.download-btn.pdf:hover {
    background: #c9302c;
}

/* Word用のボタン */
.download-btn.word {
    background: #0275d8; /* 青系 */
}

.download-btn.word:hover {
    background: #025aa5;
}

/* Excel用のボタン */
.download-btn.excel {
    background: #28a745; /* 緑系 */
}

.download-btn.excel:hover {
    background: #1e7e34;
}

/* MP3用のボタン */
.download-btn.mp3 {
    background: #f57c00; /* 見やすいオレンジ系 */
}

.download-btn.mp3:hover {
    background: #e65100; /* 濃いめのオレンジ */
}