@charset "UTF-8";
/* ナビゲーションバーを「上段：ロゴ、下段：メニュー」の2段構成に変更 */
.global-nav {
    flex-direction: column;
    align-items: flex-start;     /* ロゴを左寄せにするための指定 */
    padding: 20px 20px 0 20px;
}

/* ロゴの配置と余白調整 */
.nav-logo {
    margin-top: 0;
    margin-left: 20px;
    margin-bottom: 10px;
}

/* 下段のメニューリストを中央揃えに */
.nav-list {
    width: 100%;
    justify-content: center; /* メニュー項目を中央に配置 */
    padding-left: 0;         /* ズレを防ぐため左の余白指定を削除 */
}

/* メニューの上下余白をスッキリさせる */
.nav-item > a {
    padding: 12px 20px;
}

/* スマホ・タブレット時の微調整 */
@media (max-width: 1050px) {
    .global-nav {
        padding: 15px 10px 0 10px;
    }
    .nav-logo {
        margin-left: 0;
    }
}

/* =============================================
   関連分野研究者共同研究 アーカイブ用テーブルCSS
   （research_call.html から移行）
   ============================================= */

.table-container {
    max-width: 950px;
    margin: 0 auto 60px auto;
    /* スマホ画面で表がはみ出た場合に横スクロールさせる */
    overflow-x: auto;
}

.recruiting-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px; /* PCレイアウトを維持するための最小幅 */
}

/* ヘッダー行の装飾 */
.recruiting-table th {
    text-align: left;
    padding: 12px 20px;
    font-size: 0.9rem;
    color: #666;
    font-weight: normal;
    border-bottom: 2px solid #ccc;
}

/* データ行の装飾 */
.recruiting-table td {
    padding: 20px;
    font-size: 1rem;
    border-bottom: 1px solid #eaeaea;
    vertical-align: middle;
}

/* ホバー時に行全体をわずかにハイライトして視線を誘導 */
.recruiting-table tbody tr:hover {
    background-color: #fafafa;
}

/* 年度列 */
.col-year {
    font-weight: bold;
    color: #333;
    width: 15%;
    letter-spacing: 0.05em;
}

/* リンクとステータス表示の基本スタイル */
.doc-item {
    display: flex;
    align-items: center;
}

.doc-link {
    color: #333;
    text-decoration: none;
    transition: color 0.2s ease;
}

.doc-link:hover {
    color: #d43c34;
    text-decoration: underline;
}

/* アクセス不可（準備中など）のテキスト */
.doc-text.is-pending {
    color: #bbb;
    cursor: not-allowed;
}

/* ステータスラベル（募集終了、準備中など） */
.status-label {
    font-size: 0.8rem;
    margin-right: 8px;
    padding: 2px 0;
}

.status-label.is-open { color: #d43c34; font-weight: bold; }
.status-label.is-closed { color: #888; }
.status-label.is-pending { color: #bbb; }

/* PDFマーク（小さく控えめに） */
.pdf-mark {
    font-size: 0.65rem;
    color: #fff;
    background-color: #d43c34;
    padding: 2px 5px;
    border-radius: 2px;
    margin-right: 8px;
    font-weight: bold;
    letter-spacing: 0.05em;
}

/* =========================================
   スマホ・タブレット用 レスポンシブ対応（はみ出し修正）
   ========================================= */
@media (max-width: 768px) {
    /* コンテナ・セクションの固定幅を解除し、画面幅に合わせる */
    section#main_middele,
    section#main_middele div#contents,
    div#bottom,
    div#bottom section {
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* 本文（p#explanation）などの固定幅（1110px）を解除し、左右に余白を設ける */
    div#contents p#explanation,
    div#bottom section p {
        width: 100% !important;
        padding: 0 20px !important; /* 左右の余白 */
        box-sizing: border-box;
        font-size: 11pt !important; /* スマホ向けに少し小さく */
        line-height: 2.0em !important;
    }

    /* 画像コンテナの調整 */
    div#contents div.img,
    div#phrase {
        width: 100% !important;
        padding: 0 20px !important;
        box-sizing: border-box;
    }

    /* スマホ向け 見出しのサイズ調整（大きすぎるとはみ出るため） */
    section#main_middele div#contents h2,
    div#bottom h2 {
        font-size: 24pt !important;
        line-height: 1.2 !important;
        padding: 20px 10px;
    }
    section#main_middele div#contents h2 span,
    div#bottom h2 span {
        font-size: 10pt !important;
        margin-top: 10px;
    }

    /* 【重要】見えないブロックで横幅1110px等を強制している疑似要素を消去 */
    section#main_middele div#contents::before,
    div#bottom section::before,
    div#bottom section::after {
        display: none !important;
    }
}

/* =============================================
   公募情報 モダン・ミニマルデザインリスト
   ============================================= */

.call-list-container {
    max-width: 800px;
    margin: 0 auto 60px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* リスト全体の枠組み（上部にのみ太いラインを配置） */
.call-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-top: 2px solid #333; 
}

/* 各行のデザイン */
.call-list > li {
    display: flex;
    align-items: center;
    padding: 25px 10px !important;
    border-bottom: 1px solid #e0e0e0;
    transition: background-color 0.2s ease;
}

/* ホバー時にごく薄いグレーを敷く */
.call-list > li:hover {
    background-color: #fafafa !important;
}

/* 募集時期（左側） */
.call-period {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #333 !important;
    width: 200px;
    flex-shrink: 0;
    letter-spacing: 0.05em;
}

/* 右側のコンテンツエリア */
.call-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    flex-grow: 1;
}

/* 状態表示ラベル */
.call-content .status-label {
    font-size: 0.95rem !important;
    font-weight: bold !important;
    line-height: 1;
}
.call-content .status-label.is-open {
    color: #ED4949 !important;
}
.call-content .status-label.is-closed {
    color: #999 !important;
}

/* リンクテキスト（クリーンなテキストリンク） */
.call-content .doc-link {
    display: inline-flex;
    align-items: center;
    color: #333 !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    transition: color 0.3s ease;
}

/* リンクであることを示す矢印をCSSで付与 */
.call-content .doc-link::after {
    content: "→";
    margin-left: 8px;
    color: #ED4949;
    transition: transform 0.3s ease;
}

.call-content .doc-link:hover {
    color: #ED4949 !important;
}
.call-content .doc-link:hover::after {
    transform: translateX(5px);
}

/* リンクなしテキスト */
.call-content .doc-text {
    color: #999 !important;
    font-size: 0.95rem !important;
}

/* スマホ用レスポンシブ */
@media (max-width: 768px) {
    .call-list > li {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 10px !important;
        gap: 12px;
    }
    .call-period {
        width: 100%;
        font-size: 1rem !important;
    }
    .call-content {
        width: 100%;
        gap: 16px;
    }
}

/* =============================================
   モダン・ミニマル コンテンツデザイン（テーブル内要素）
   ============================================= */
.call-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px; /* テキスト間のゆとり */
}

/* 状態表示ラベル（無駄な装飾を排除） */
.call-content .status-label {
    font-size: 0.95rem;
    font-weight: bold;
    line-height: 1;
}
.call-content .status-label.is-open {
    color: #ED4949;
}
.call-content .status-label.is-closed {
    color: #999;
}

/* クリーンなテキストリンクと矢印アニメーション */
.call-content .doc-link {
    display: inline-flex;
    align-items: center;
    color: #333 !important;
    text-decoration: none !important; /* デフォルトの下線を消去 */
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

/* CSSで矢印(→)を付与 */
.call-content .doc-link::after {
    content: "→";
    margin-left: 8px;
    color: #ED4949;
    transition: transform 0.3s ease;
}

/* ホバー時の挙動 */
.call-content .doc-link:hover {
    color: #ED4949 !important;
}
.call-content .doc-link:hover::after {
    transform: translateX(5px); /* 矢印が少し右に動く */
}

/* リンクなしのテキスト */
.call-content .doc-text {
    color: #999;
    font-size: 0.95rem;
}


/* =============================================
   3カラム構成テーブルのバランス調整（student_call用）
   ============================================= */

/* 全体の最大幅を広げ、各カラムが窮屈になるのを防ぐ */
.table-container.is-narrow {
    max-width: 900px; /* 850pxから拡張 */
    margin: 0 auto 60px auto;
}

.recruiting-table.is-three-col {
    table-layout: fixed;
    width: 100%;
}

/* 各カラムの幅指定（幅を広げて折り返しを確実に防ぐ） */
.recruiting-table.is-three-col th.col-year,
.recruiting-table.is-three-col td.col-year {
    width: 250px !important; /* 200pxから大幅に拡張 */
    white-space: nowrap !important;
}

.recruiting-table.is-three-col th.col-status,
.recruiting-table.is-three-col td.col-status {
    width: 150px !important; /* こちらも少し余裕を持たせる */
    white-space: nowrap !important;
    font-weight: bold;
}

/* 右列（公募要領・申請書）：残りの幅を引き受ける */
.recruiting-table.is-three-col th:not(.col-year):not(.col-status),
.recruiting-table.is-three-col td:not(.col-year):not(.col-status) {
    width: auto;
}

/* --- 以下、ステータス制御のCSS（前回と同じ） --- */
.col-status.is-pending { color: #999 !important; }
.col-status.is-pending + td .doc-link {
    color: #ccc !important;
    pointer-events: none !important;
    cursor: default !important;
}
.col-status.is-pending + td .doc-link::after { display: none; }

.col-status.is-open { color: #000 !important; }
.col-status.is-open + td .doc-link {
    color: #333 !important;
    font-weight: bold;
}

.col-status.is-closed { color: #999 !important; }
.col-status.is-closed + td .doc-link { color: #888 !important; }

/* スマホ用調整 */
@media (max-width: 768px) {
    .recruiting-table.is-three-col,
    .recruiting-table.is-three-col thead,
    .recruiting-table.is-three-col tbody,
    .recruiting-table.is-three-col tr,
    .recruiting-table.is-three-col th,
    .recruiting-table.is-three-col td {
        display: block !important;
        width: 100% !important;
    }
    .recruiting-table.is-three-col thead { display: none !important; }
    .recruiting-table.is-three-col td {
        padding: 10px !important;
        border: none !important;
    }
    .recruiting-table.is-three-col td.col-year {
        padding-top: 20px !important;
        color: #ED4949;
    }
    .recruiting-table.is-three-col tr {
        border-bottom: 1px solid #eee !important;
        padding-bottom: 10px;
    }
}

/* =============================================
   5カラム構成テーブルのバランス調整（research_call用）
   ============================================= */

.recruiting-table.is-five-col {
    table-layout: fixed;
    width: 100%;
    min-width: 950px; /* 5列分を確保するための最低幅 */
}

/* 列幅の指定 */
.recruiting-table.is-five-col .col-year { width: 130px !important; }
.recruiting-table.is-five-col .col-status { width: 120px !important; }

/* 各コンテンツ列（均等に分配） */
.recruiting-table.is-five-col th:not(.col-year):not(.col-status),
.recruiting-table.is-five-col td:not(.col-year):not(.col-status) {
    width: auto;
}

/* --- コンテンツ単位のステータス制御（再定義） --- */

/* 準備中：グレー、クリック不可、矢印なし */
.call-content.is-pending .doc-link {
    color: #999 !important;
    pointer-events: none !important;
    cursor: default !important;
    text-decoration: none !important;
}
.call-content.is-pending .doc-link::after {
    display: none !important;
}

/* 公開中（最新）：ブラック、強調、矢印あり */
.call-content.is-open .doc-link {
    color: #333 !important;
    font-weight: bold !important;
}

/* 終了・アーカイブ：グレー、矢印あり */
.call-content.is-closed .doc-link {
    color: #888 !important;
}

/* 募集状況カラム自体の色制御 */
.col-status.is-pending { color: #999 !important; }
.col-status.is-open { color: #000 !important; }
.col-status.is-closed { color: #999 !important; }

/* =============================================
   モダンPDFマークの実装（左側に配置）
   ============================================= */

/* PDFリンク専用：右側の矢印を消去 */
.call-content .doc-link.is-pdf::after {
    display: none !important;
}

/* PDFリンク専用：左側にモダンなPDFバッジを表示 */
.call-content .doc-link.is-pdf::before {
    content: "PDF";
    display: inline-block;
    background-color: #ED4949; /* テーマカラー */
    color: #ffffff;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    padding: 3px 5px;
    margin-right: 10px;
    border-radius: 3px;
    vertical-align: middle;
    letter-spacing: 0.02em;
    /* モダンな質感を出すためのわずかな影 */
    box-shadow: 0 2px 4px rgba(237, 73, 73, 0.2);
    /* リンクのホバー時に色を少し変えるための準備 */
    transition: background-color 0.3s ease;
}

/* ホバー時にPDFマークの色も変える演出 */
.call-content .doc-link.is-pdf:hover::before {
    background-color: #333;
}

/* ========================================================================= */
/* 火山実務担当者支援事業 レスポンシブ追加対応（images/3_img2.png 以下）     */
/* ========================================================================= */
@media (max-width: 768px) {
    /* コンテナの固定幅解除とパディング調整 */
    div#seminar_learning {
        min-width: 0 !important;
        width: 100% !important;
        padding: 80px 20px 50px 20px !important;
        box-sizing: border-box;
    }

    /* トップロゴ画像の縮小 */
    img#seminar_learning_logo {
        width: 90% !important;
        max-width: 400px !important;
    }

    /* SEMINAR / E-LEARNING ブロックの固定幅解除 */
    div#seminar_learning div#seminar,
    div#seminar_learning div#learning {
        width: 100% !important;
        padding: 30px 20px !important;
        border-radius: 20px !important;
        box-sizing: border-box;
    }

    /* SEMINAR内の回り込み解除（インラインスタイル上書き） */
    div#seminar_learning div#seminar img {
        float: none !important;
        display: block !important;
        margin: 0 auto 20px auto !important;
        max-width: 100% !important;
    }
    div#seminar_learning div#seminar p {
        width: 100% !important;
        float: none !important;
        text-align: left !important;
    }

    /* PLUSマークの余白とサイズ調整 */
    div#seminar_learning div#plus {
        padding: 30px 0 !important;
    }
    div#seminar_learning div#plus img {
        max-width: 50px !important;
    }

    /* E-LEARNING内の回り込み解除（インラインスタイル上書き） */
    div#seminar_learning div#learning img {
        float: none !important;
        display: block !important;
        margin: 20px auto !important;
        max-width: 100% !important;
    }
    div#seminar_learning div#learning p#kome {
        width: 100% !important;
        margin-top: 20px !important;
    }

    /* E-LEARNING内のリンクボタンを縦配列に変更 */
    div#seminar_learning div#learning div.link {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
        margin-top: 30px !important;
    }
    div#seminar_learning div#learning div.link div.waku1,
    div#seminar_learning div#learning div.link div.waku2 {
        float: none !important;
        width: 100% !important;
        max-width: 280px !important;
    }
}

/* ========================================================================= */
/* スマホ向け：ページ全体の文字サイズおよび行間調整                          */
/* ========================================================================= */
@media (max-width: 768px) {
    /* 1. ページ全体の基本フォントサイズと行間を縮小（約14px相当） */
    body, p, li, td, span, a, div {
        font-size: 14px !important;
        line-height: 1.8 !important; /* 行間も少し詰めてすっきりさせる */
    }

    /* 2. 各種大見出し（h2）のサイズ調整 */
    section#main_middele div#contents h2,
    div#bottom h2,
    div#seminar_learning div#seminar h2,
    div#seminar_learning div#learning h2 {
        font-size: 24px !important; /* PCの巨大なフォントをスマホ適正サイズへ */
        line-height: 1.3 !important;
        margin-bottom: 20px !important;
    }
    
    /* 大見出し内の英語サブタイトル(span) */
    section#main_middele div#contents h2 span,
    div#bottom h2 span,
    div#seminar_learning div#seminar h2 span,
    div#seminar_learning div#learning h2 span {
        font-size: 12px !important;
        margin-top: 5px !important;
        line-height: 1.2 !important;
    }

    /* 3. 本文テキスト（説明文）の余白とサイズを再調整 */
    div#contents p#explanation,
    div#seminar_learning div#seminar p,
    div#seminar_learning div#learning p {
        font-size: 14px !important;
        padding: 0 10px !important; /* 左右の余白を少し縮めてテキスト領域を確保 */
    }

    /* 4. 特定の注釈テキスト（※オープンバッジなど）をさらに小さく */
    div#seminar_learning div#learning p#kome,
    div#seminar_learning div#learning p#kome span {
        font-size: 12px !important;
        line-height: 1.6 !important;
    }

    /* 5. リンクボタン内のテキスト調整 */
    div.waku a, div.waku1 a, div.waku2 a {
        font-size: 14px !important;
    }
    
    /* 6. フッター領域の文字サイズ調整 */
    div#toiawase h1 {
        font-size: 16px !important; /* 組織名を少し強調 */
    }
    div#toiawase span#t, div#toiawase span#a {
        font-size: 13px !important; /* 住所等は小さめに */
    }
}

/* ========================================================================= */
/* スマホ向け：新着情報の事業分類タグ（link1, link2, link3）のサイズ縮小     */
/* ========================================================================= */
@media (max-width: 768px) {
    #whatsnew table tr td span.link1,
    #whatsnew table tr td span.link2,
    #whatsnew table tr td span.link3 {
        width: 120px !important;         /* 幅を縮小（元は170px） */
        height: auto !important;         /* 高さを文字量に合わせて柔軟に */
        min-height: 24px !important;     /* 最低限の高さを確保 */
        font-size: 6px !important;      /* 文字サイズを縮小（元は9pt） */
        line-height: 1.2 !important;     /* 行間を詰める */
        padding: 4px 6px !important;     /* 内側の余白でバランスを取る */
        box-sizing: border-box;
        white-space: normal !important;  /* スマホの幅によっては文字の折り返しを許可 */
        
        /* テキストを上下左右の中央に配置するためのFlexbox設定 */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* 表の列幅の強制指定を解除し、スマホの画面幅に合わせる */
    #whatsnew table tr td:nth-of-type(2) {
        width: auto !important;
        padding: 10px 5px !important; /* タグ周りの余白を少し狭める */
    }
}

/* ========================================================================= */
/* スマホ向け：新着情報テーブルのレスポンシブ化（折り返しレイアウト）        */
/* ========================================================================= */
@media (max-width: 768px) {
    /* 1. テーブル全体の強制的な固定幅（1110px）を解除し、画面幅に合わせる */
    div#whatsnew {
        width: 100% !important;
        padding: 0 15px !important; /* 左右に少し余白を持たせる */
        box-sizing: border-box;
    }
    #whatsnew table {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* 2. テーブルのセル要素をブロック化・Flexbox化して自由に配置できるようにする */
    #whatsnew table tbody,
    #whatsnew table tr,
    #whatsnew table td {
        display: block !important;
        box-sizing: border-box;
    }

    /* 3. 各行（1つのニュース）の設定：Flexboxで折り返しを許可する */
    #whatsnew table tr {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center;
        padding: 15px 0 !important;
    }

    /* 4. 1列目（日付）：幅を自動にし、右側に余白を設ける */
    #whatsnew table tr td:nth-of-type(1) {
        width: auto !important;
        padding: 0 15px 0 0 !important;
        font-weight: bold;
        font-size: 13px !important;
    }

    /* 5. 2列目（タグ）：幅を自動にする（タグ自体のサイズ指定は維持） */
    #whatsnew table tr td:nth-of-type(2) {
        width: auto !important;
        padding: 0 !important;
    }

    /* 6. 3列目（タイトル）：幅を100%にして強制的に次の行へ落とし、読みやすくする */
    #whatsnew table tr td:nth-of-type(3) {
        width: 100% !important;
        padding: 10px 0 0 0 !important; /* 日付・タグとの間に余白 */
        line-height: 1.6 !important;
    }

    /* 7. 矢印マーク（〉）の微調整：タイトルの横に自然に並べる */
    #whatsnew table tr td span.mark {
        float: left !important;
        margin-right: 5px !important;
    }
}

/* ========================================================================= */
/* トピックス（詳細ページ）向け レスポンシブ＆UI改善                         */
/* ========================================================================= */

/* --- 1. 添付ファイルリンクのモダンなカード型ボタン化 --- */
div#article ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 30px 0 !important;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

div#article ul li a {
    display: inline-flex;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    padding: 15px 20px;
    border-radius: 8px;
    color: #333 !important;
    text-decoration: none !important;
    font-weight: bold;
    font-size: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
    width: 100%;
    max-width: 700px; /* PC画面でも広がりすぎないように制限 */
    box-sizing: border-box;
}

div#article ul li a:hover {
    border-color: #ED4949;
    box-shadow: 0 4px 12px rgba(237, 73, 73, 0.15);
    color: #ED4949 !important;
    transform: translateY(-2px);
}

/* 拡張子がPDFの場合のアイコン自動付与 */
div#article ul li a[href$=".pdf"]::before {
    content: "PDF";
    background-color: #ED4949;
    color: #fff;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    margin-right: 15px;
    font-weight: 900;
    letter-spacing: 0.05em;
}

/* 拡張子がDOCXまたはダウンロード属性を持つ場合のアイコン自動付与 */
div#article ul li a[href$=".docx"]::before,
div#article ul li a[download]::before {
    content: "WORD";
    background-color: #2b579a; /* Word風の青色 */
    color: #fff;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    margin-right: 15px;
    font-weight: 900;
    letter-spacing: 0.05em;
}

/* --- 2. スマホ画面（768px以下）でのメインコンテンツはみ出し防止 --- */
@media (max-width: 768px) {
    /* 固定幅1110pxの解除と左右の余白確保 */
    div#contents div#article {
        width: 100% !important;
        padding: 0 20px !important;
        box-sizing: border-box;
    }
    
    /* 日付バッジのレイアウト崩れ防止 */
    div#contents div#article span#date {
        float: none !important;
        display: inline-block !important;
        margin-bottom: 10px;
    }

    /* タイトルの文字サイズ調整 */
    div#contents div#article h1 {
        font-size: 20px !important;
        line-height: 1.4 !important;
        padding: 10px 0 20px 0 !important;
    }

    /* 本文の幅解除 */
    div#contents div#article p {
        width: 100% !important;
        padding: 0 !important;
    }

    /* ボタンをスマホ画面にフィットさせる */
    div#article ul li a {
        font-size: 13px !important;
        padding: 12px 15px !important;
    }
}

/* ========================================================================= */
/* 実績報告ページ用 モダンレイアウト（セミナー履歴・Eラーニング）            */
/* ========================================================================= */

/* セクション見出し */
.report-section-title {
    font-size: 1.4rem;
    color: #333;
    border-left: 5px solid #ED4949;
    padding-left: 15px;
    margin: 0 auto 30px auto;
    max-width: 950px;
    font-weight: bold;
    text-align: left;
}

/* --- セミナー基本プログラム枠 --- */
.core-program-box {
    max-width: 950px;
    margin: 0 auto 30px auto;
    background-color: #fff9f9;
    border: 1px solid #f5c6c6;
    border-radius: 8px;
    padding: 25px;
    text-align: left;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}
.core-program-box h4 {
    color: #ED4949;
    font-size: 1.1rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.core-program-box h4::before {
    content: "ℹ";
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 22px; height: 22px;
    background: #ED4949; color: #fff;
    border-radius: 50%; font-size: 14px;
    margin-right: 8px;
}
.core-program-box p {
    font-size: 0.95rem; line-height: 1.6;
    margin-bottom: 15px; padding: 0 !important; color: #444; width: auto !important;
}
.core-program-box ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 20px;
}
.core-program-box ul li {
    background: #fff; border: 1px solid #eee; border-radius: 6px;
    padding: 15px; flex: 1; min-width: 280px;
    font-size: 0.95rem; line-height: 1.5; color: #333;
}
.core-program-box ul li strong { color: #A31D1D; font-size: 1.05rem; }

/* --- 実績報告用 モダンテーブル共通 --- */
.report-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border-radius: 8px;
    overflow: hidden;
}
.report-table th {
    background-color: #f8f8f8; color: #555;
    font-weight: bold; padding: 15px; text-align: left;
    border-bottom: 2px solid #ddd; font-size: 0.95rem;
}
.report-table td {
    padding: 20px 15px; border-bottom: 1px solid #eee;
    vertical-align: top; font-size: 0.95rem; line-height: 1.6; text-align: left;
}
.report-table tbody tr:hover { background-color: #fafafa; }

/* セミナー用テーブル カラム幅調整 */
.report-table .col-date { width: 160px; font-weight: bold; color: #333; }
.report-table .col-location { width: 150px; color: #555; }
.report-table .col-guest { width: auto; }

/* 対象バッジ */
.target-badge {
    display: inline-block; background-color: #6C2323; color: #fff;
    font-size: 11px; padding: 3px 8px; border-radius: 4px;
    margin-bottom: 5px; font-weight: bold; letter-spacing: 0.05em;
}
.target-badge.is-company { background-color: #2b579a; }

/* ゲスト講師情報の装飾 */
.guest-name { font-weight: bold; color: #333; margin-bottom: 5px; }
.guest-title { color: #ED4949; font-weight: 500; }

/* Eラーニング用テーブル 装飾 */
.report-table.is-elearning .col-theme { width: 100px; font-weight: bold; color: #ED4949; }
.report-table.is-elearning .col-course { width: auto; font-weight: 500; }
.report-table.is-elearning .col-badge { width: 150px; text-align: center; font-size: 0.9rem;}
.report-table.is-elearning th.col-badge { text-align: center; }
.badge-number { font-size: 1.4rem; font-weight: bold; color: #A31D1D; font-family: "Rubik", sans-serif; }

/* --- スマホ向けレスポンシブ（テーブルの縦積み化） --- */
@media (max-width: 768px) {
    .report-section-title { padding: 0 15px; }
    .core-program-box { margin: 0 15px 20px 15px; padding: 20px 15px; }
    
    .report-table, .report-table thead, .report-table tbody, .report-table th, .report-table td, .report-table tr {
        display: block !important; width: 100% !important; box-sizing: border-box;
    }
    .report-table thead { display: none !important; }
    .report-table tr { border-bottom: 2px solid #ddd; margin-bottom: 10px; }
    .report-table td { border-bottom: none; padding: 10px 15px; position: relative; }
    
    /* セミナーテーブル：スマホ時の見せ方 */
    .report-table .col-date { font-size: 1.1rem; color: #ED4949; padding-bottom: 0; }
    .report-table .col-location { padding-bottom: 10px; border-bottom: 1px dashed #eee; margin-bottom: 10px; }
    .report-table .col-guest { padding-top: 0; }
    
    /* Eラーニングテーブル：スマホ時の見せ方 */
    .report-table.is-elearning .col-theme { background: #fdf5f5; padding: 10px 15px; }
    .report-table.is-elearning .col-badge { text-align: right; margin-top: 10px; border-top: 1px dashed #eee; padding-top: 15px;}
}

/* ========================================================================= */
/* 講演資料集ページ（HandOuts）用 モダンレイアウト調整                       */
/* ========================================================================= */

/* 講演資料リスト内のテキスト配置（タイトルと講師名を縦に並べる） */
div#article ul.doc-list li a {
    justify-content: flex-start; /* アイコンの次にテキストを左寄せ */
    padding: 20px !important;
}

.doc-info {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.doc-info .doc-title {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 5px;
    line-height: 1.4;
}

.doc-info .doc-author {
    font-size: 0.85rem;
    color: #666;
    font-weight: normal;
}

/* --- アンケート用のアクションエリアと目立つボタン --- */
.survey-action {
    text-align: center;
    margin: 60px auto 40px auto;
    padding: 40px 20px;
    background-color: #fffaf0; /* ほんのり温かみのある背景色 */
    border-radius: 12px;
    border: 1px solid #ffe8c2;
    max-width: 700px;
}

.survey-action p {
    font-weight: bold;
    color: #331D00 !important;
    margin-bottom: 20px !important;
    font-size: 1.05rem !important;
    padding: 0 !important;
}

.survey-action {
    text-align: center;
    margin: 60px auto 40px auto;
    padding: 40px 20px;
    background-color: #f0ebf8; /* Googleフォームの背景に近い淡い紫色 */
    border-radius: 12px;
    border: 1px solid #d1c4e9;
    max-width: 700px;
}

.survey-action p {
    font-weight: bold;
    color: #202124 !important; /* より深みのあるグレー */
    margin-bottom: 25px !important;
    font-size: 1.05rem !important;
    padding: 0 !important;
}

.btn-survey {
    display: inline-block;
    background-color: #673ab7; /* Googleフォームのメインパープル */
    color: #ffffff !important;
    font-weight: bold;
    padding: 12px 32px;
    border-radius: 4px; /* 角を少しだけ丸めた長方形 */
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    font-size: 1.1rem;
    line-height: 1.4;
}

.btn-survey span {
    display: block;
    font-size: 0.8rem;
    font-weight: normal;
    opacity: 0.9;
    margin-top: 4px;
}

.btn-survey:hover {
    background-color: #512da8; /* ホバー時は少し濃い紫 */
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    transform: translateY(-1px);
    text-decoration: none !important;
}

/* スマホ向け微調整 */
@media (max-width: 768px) {
    .btn-survey {
        width: 100%;
        padding: 15px 20px;
        box-sizing: border-box;
    }
}

/* スマホ向け微調整 */
@media (max-width: 768px) {
    .doc-info .doc-title { font-size: 1rem; }
    .btn-survey { font-size: 1.05rem; padding: 12px 25px; width: 100%; box-sizing: border-box;}
}

/* ========================================================================= */
/* 講演資料リスト（.doc-list）のボタン横幅を美しく統一する                  */
/* ========================================================================= */

/* リスト全体を縦並びにし、中央に配置 */
div#article ul.doc-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* 中央寄せ */
    width: 100% !important;
}

/* 各リスト項目の横幅を固定して統一する */
div#article ul.doc-list li {
    width: 100% !important;
    max-width: 650px !important; /* ★ここでボタンの統一幅を指定（PC表示時） */
    list-style: none !important;
}

/* リンクボタンをリスト項目の幅いっぱいに広げる */
div#article ul.doc-list li a {
    width: 100% !important; 
    box-sizing: border-box !important;
    display: flex !important;
    /* 以前の inline-flex を上書きして幅を強制します */
}