/**
 * Topics Page Styles
 * スコープ: #p-topics 内のみに適用
 * 他ページへの影響なし
 */

/* ========================================
   全体横幅設定（トピックスページ専用）
   ======================================== */
#p-topics .cwidth12 {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* ========================================
   ファーストビュー
   ======================================== */
#p-topics .p-topics-fv {
    background-color: #ffffff;
    background-image: none;
    padding: 40px 20px 0;
}

#p-topics .p-topics-fv-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
    padding-left: 350px;
}

#p-topics .p-topics-label {
    display: inline-block;
    background-color: #2c3e50;
    color: #ffffff;
    font-size: 20px;
    padding: 4px 20px;
    margin-bottom: 15px;
    margin-left: -410px;  /* 左余白を狭く（-375px→-390px） */
}

#p-topics .p-topics-fv .pgfv_text {
    text-align: left;
    padding-left: 15px;   /* 左の余白を狭く（50px→30px） */
    margin-right: -95px;  /* 右の余白を狭く（-60px→-80px） */
}

#p-topics .p-topics-title-main {
    color: #333333;
    font-size: 26px;
    font-weight: bold;
    line-height: 1.4;
    margin: 0 0 15px 0;
}

#p-topics .p-topics-title-sub {
    color: #333333;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.7;
    margin: 0;
}

#p-topics .p-topics-fv-bar {
    width: 100%;
    height: 8px;
    background-color: #d0d0d0;
    margin-top: 40px;
}

/* ========================================
   執筆者情報・本文
   ======================================== */
#p-topics .p-topics-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #cccccc;
    margin-bottom: 20px;
}

#p-topics .p-topics-author {
    font-size: 16px;
    color: #333333;
}

#p-topics .p-topics-date {
    font-size: 16px;
    color: #333333;
}

/* ========================================
   参照元
   ======================================== */
#p-topics .p-topics-reference {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 20px;
    text-align: center;
}

#p-topics .p-topics-reference-label {
    font-size: 14px;
    color: #333333;
    flex-shrink: 0;
}

#p-topics .p-topics-reference-link {
    font-size: 14px;
    color: #0066cc;
    text-decoration: underline;
}

#p-topics .p-topics-reference-link:hover {
    text-decoration: none;
}

#p-topics .p-topics-intro {
    margin-bottom: 20px;
}

#p-topics .p-topics-intro p {
    font-size: 16px;
    line-height: 1.8;
    color: #333333;
    text-align: justify;
    margin-bottom: 15px;
}

#p-topics .p-topics-intro p:last-child {
    margin-bottom: 0;
}

/* ========================================
   見出し（data_h2）
   ======================================== */
#p-topics .data_h2 h2 {
    white-space: nowrap;
    font-size: 30px;  /* フォントサイズ：数値を小さくするほど小さく */
}

/* スマホ専用改行（PC版では非表示） */
#p-topics .sp-only {
    display: none;
}

#p-topics .p-topics-body {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 5px;
}

#p-topics .p-topics-body-large {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 5px;
}

#p-topics .pg_p p {
    margin-bottom: 15px;
}

#p-topics .pg_p p:last-child {
    margin-bottom: 0;
}

/* スケジュールテーブル */
#p-topics .p-topics-table-wrapper {
    margin: 20px 0;
}

#p-topics .p-topics-table-title {
    font-size: 14px;
    font-weight: 600;
    color: #134263;
    margin-bottom: 10px;
}

#p-topics .p-topics-schedule-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background-color: #ffffff;
}

#p-topics .p-topics-schedule-table th,
#p-topics .p-topics-schedule-table td {
    border: 1px solid #ccc;
    padding: 10px 12px;
    text-align: center;
    vertical-align: middle;
}

#p-topics .p-topics-schedule-table th {
    background-color: #e8f4fc;
    font-weight: 600;
    color: #134263;
}

#p-topics .p-topics-schedule-table td {
    color: #333333;
}

#p-topics .p-topics-schedule-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* h3の番号と文章を横並び（回り込み防止） */
#p-topics .p-topics-h3-flex h3 {
    display: flex;
    align-items: flex-start;
}

#p-topics .p-topics-h3-num {
    flex-shrink: 0;
    margin-right: 2px;
}

#p-topics .p-topics-h3-text {
    flex: 1;
}

/* まず院内で決めたいことセクション */
#p-topics .p-topics-decision-title {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    margin: 0 0 15px 0;
}

#p-topics .p-topics-decision-text {
    font-size: 16px;
    line-height: 1.8;
    color: #333333;
    margin: 0 0 15px 0;
    display: flex;
    align-items: flex-start;
}

#p-topics .p-topics-decision-text::before {
    content: '●';
    flex-shrink: 0;
    margin-right: 8px;
}

#p-topics .p-topics-decision-list {
    list-style: none;
    padding-left: 30px;
    margin: 0;
}

#p-topics .p-topics-decision-list li {
    font-size: 16px;
    line-height: 1.8;
    color: #333333;
    position: relative;
    padding-left: 25px;
    margin-bottom: 8px;
}

#p-topics .p-topics-decision-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #333333;
}

/* ブロック間の余白 */
#p-topics .p-topics-decision-list + .p-topics-decision-title {
    margin-top: 30px;
}

#p-topics .pg_p ol {
    padding-left: 25px;
}

#p-topics .pg_p ol li {
    padding-left: 10px;
    margin-bottom: 8px;
}

/* セクション4 短冊に示された改定の具体的な内容 */
#p-topics .p-topics-section4-heading {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    margin: 30px 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #134263;
}

#p-topics .p-topics-section4-heading:first-child {
    margin-top: 0;
}

#p-topics .p-topics-section4-list {
    padding-left: 25px;
    margin: 0 0 20px 0;
}

#p-topics .p-topics-section4-list > li {
    margin-bottom: 10px;
    padding-bottom: 5px;
    line-height: 1.8;
}

#p-topics .p-topics-section4-list > li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

#p-topics .p-topics-section4-other {
    margin-top: 40px;
    line-height: 1.8;
}

#p-topics .p-topics-section4-other > .p-topics-section4-list-title {
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    padding-bottom: 8px;
    border-bottom: 2px solid #134263;
    margin-bottom: 15px;
}

#p-topics .p-topics-section4-other-list {
    list-style: none;
    padding-left: 0;
    margin: 8px 0 0 0;
}

#p-topics .p-topics-section4-other-list > li {
    font-size: 15px;
    line-height: 1.8;
    color: #333333;
    margin-bottom: 1px;
    padding-left: 1.5em;
    text-indent: -1.5em;
}

#p-topics .p-topics-section4-other-list > li::before {
    content: "・";
}

#p-topics .p-topics-section4-list-title {
    font-weight: bold;
    color: #333333;
}

#p-topics .p-topics-section4-sublist {
    list-style: none;
    padding-left: 0;
    margin: 8px 0 0 0;
}

#p-topics .p-topics-section4-sublist > li {
    font-size: 15px;
    line-height: 1.8;
    color: #333333;
    margin-bottom: 5px;
    padding-left: 1em;
    text-indent: -1em;
}

#p-topics .p-topics-section4-sublist > li::before {
    content: '・';
}

#p-topics .p-topics-section4-sublist > li > span {
    text-indent: 0;
}

#p-topics .p-topics-section4-sublist > li > .p-topics-section4-innerlist {
    margin-left: 0;
    text-indent: 0;
}

#p-topics .p-topics-section4-innerlist {
    list-style: none;
    padding-left: 25px;
    margin: 8px 0 0 0;
}

#p-topics .p-topics-section4-innerlist li {
    font-size: 15px;
    line-height: 1.6;
    color: #333333;
    margin-bottom: 3px;
    padding-left: 1em;
    text-indent: -1em;
}

#p-topics .p-topics-section4-innerlist li::before {
    content: '・';
}

/* ========================================
   執筆者情報ボックス
   ======================================== */
#p-topics .p-topics-author-box {
    border: 1px solid #333333;
    padding: 20px 25px;
    margin: 0 auto;
    max-width: 850px;  /* 横幅：数値を小さくするほど狭く */
}

#p-topics .p-topics-author-name {
    font-size: 14px;
    font-weight: normal;
    color: #333333;
    margin: 0 0 10px 0;
}

#p-topics .p-topics-author-profile {
    font-size: 14px;
    line-height: 1.7;
    color: #333333;
    margin: 0;
    word-break: break-all;
    overflow-wrap: break-word;
}

/* ========================================
   更新履歴
   ======================================== */
#p-topics .p-topics-update-history {
    max-width: 860px;
    margin: 0 auto;
    padding: 0;
}

#p-topics .p-topics-update-title {
    font-size: 14px;
    font-weight: normal;
    color: #333333;
    margin: 0 0 0px 0;  /* 余白：数値を小さくするほど狭く（0で余白なし） */
}

#p-topics .p-topics-update-item {
    font-size: 14px;
    line-height: 1.7;
    color: #333333;
    margin: 0;
    padding-left: 1em;
    text-indent: -1em;
}

/* ========================================
   記事末尾の注記
   ======================================== */
#p-topics .p-topics-note p {
    font-size: 14px;
    line-height: 1.7;
    color: #333333;
}

/* ========================================
   バナーエリア
   ======================================== */
#p-topics .p-topics-banners {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin: 0 auto;
    max-width: 1000px;  /* バナー全体の横幅：数値を大きくするほど広く */
}

#p-topics .p-topics-banner {
    display: block;
    width: 100%;
    max-width: 900px;  /* 横幅：数値を大きくするほど広く */
    margin-left: auto;
    margin-right: auto;
}

#p-topics .p-topics-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* PC版：バナー画像の切り替え */
#p-topics .p-topics-banner .p-topics-banner-pc {
    display: block !important;
}

#p-topics .p-topics-banner .p-topics-banner-sp {
    display: none !important;
}

#p-topics .p-topics-banner:first-child {
    align-self: center;
    margin-left: 0;
}

#p-topics .p-topics-banner-small {
    max-width: 660px;
    align-self: center;
}

#p-topics .p-topics-banner:last-child {
    max-width: 900px;
    align-self: center;
    transform: translateX(-10px);  /* 左に移動：数値を大きくするほど左へ（0で中央、-100pxでさらに左） */
}

#p-topics .p-topics-point {
    display: flex;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 15px;
}

#p-topics .p-topics-point-label {
    flex-shrink: 0;
    margin-right: 10px;
    font-weight: bold;
}

#p-topics .p-topics-point-text {
    flex: 1;
}

/* p-topics-bodyの直後のp-topics-pointに余白を追加 */
#p-topics .p-topics-body + .p-topics-point,
#p-topics .p-topics-body-large + .p-topics-point {
    margin-top: 20px;
}

/* ========================================
   目次ブロック
   ======================================== */
#p-topics .index_block {
    box-sizing: border-box;
}

#p-topics .index_block > p,
#p-topics .index_block > ol {
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

#p-topics .index_block > ol {
    list-style-position: inside;
}

/* 目次リンク */
#p-topics .p-topics-index-link {
    color: #333333;
    text-decoration: none;
    transition: opacity 0.3s;
}

#p-topics .p-topics-index-link:hover {
    opacity: 0.7;
    text-decoration: underline;
}

/* ========================================
   目次内画像
   ======================================== */
#p-topics .p-topics-index-image {
    display: block;
    width: 100%;
    max-width: none;
    height: 310px;  /* 縦幅：数値を大きくするほど縦に広く表示 */
    margin: 20px 0 20px;  /* 下の余白：3番目の数値を大きくするほど広く */
    object-fit: cover;
    object-position: center center;
}

/* ========================================
   レスポンシブ（タブレット: 1024px以下）
   ※PC版（1025px以上）には影響しません
   ======================================== */
@media screen and (max-width: 1024px) {
    /* ここにタブレット用スタイルを記述 */
}

/* ========================================
   レスポンシブ（スマホ: 767px以下）
   ※PC版・タブレット版には影響しません
   ======================================== */
@media screen and (max-width: 767px) {
    /* 全体横幅を狭める */
    #p-topics #contain .cwidth12 {
        padding-left: 0px !important;  /* 左余白：数値を大きくするほど広く */
        padding-right: 0px !important;  /* 右余白：数値を大きくするほど広く */
    }

    /* ファーストビュー調整 */
    #p-topics .p-topics-fv {
        padding: 0 0px 0;  /* 上の余白：数値を小さくするほど上へ */
        margin-top: 15px;  /* 少し上へ */
    }

    #p-topics .p-topics-fv-inner {
        padding-left: 7px;  /* 右に移動：数値を大きくするほど右へ */
    }

    #p-topics .p-topics-label {
        margin-left: 15px;  /* 右に移動：数値を大きくするほど右へ */
        font-size: 14px;
        padding: 4px 12px;
    }

    #p-topics .p-topics-fv .pgfv_text {
        padding-left: 0;
        margin-right: 0;  /* スマホでは通常表示 */
    }

    #p-topics .p-topics-title-main {
        font-size: 22px;  /* タイトルサイズ：数値を大きくするほど大きく */
        margin-left: 0;
        white-space: normal;  /* 折り返しを許可して見切れを防止 */
    }

    /* 参照元を左揃え */
    #p-topics .p-topics-reference {
        justify-content: flex-start;
        text-align: left;
    }

    #p-topics .p-topics-title-sub {
        font-size: 14px;  /* フォントサイズ：数値を大きくするほど大きく */
        margin-left: 0;
        white-space: normal;  /* 折り返しを許可して全文表示 */
    }

    /* 執筆者情報を縦並びに変更 */
    #p-topics .p-topics-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    #p-topics .p-topics-author {
        font-size: 13px;
    }

    #p-topics .p-topics-date {
        font-size: 13px;
    }

    /* バナーエリア：画面幅いっぱいに表示（親のpaddingを打ち消す） */
    #p-topics .p-topics-banners {
        max-width: none;
        width: calc(100% + 60px);  /* 親のpadding分を追加 */
        margin-left: -30px;  /* 左に親のpadding分だけはみ出す */
        margin-right: -30px;  /* 右に親のpadding分だけはみ出す */
        padding: 0;
    }

    #p-topics .p-topics-banner {
        max-width: 100%;
        align-self: center;
        margin-left: 0;
        margin-right: 0;
    }

    #p-topics .p-topics-banner:first-child {
        align-self: center;
        width: 108%;  /* 少し大きく：数値を上げると大きくなる */
        max-width: 115%;
        margin-left: 13%;  /* 右に寄せる：数値を大きくすると左へ、小さくすると右へ */
    }

    #p-topics .p-topics-banner-small {
        max-width: 100%;
        align-self: center;
        margin-left: 5%;  /* 右に寄せる：数値を大きくするとさらに右へ */
    }

    /* 最後の説明文を中央揃え */
    #p-topics .pg_p > p {
        text-align: center;
    }

    #p-topics .p-topics-banner:last-child {
        max-width: 100%;
        margin-right: 0;
        margin-left: 0;
        transform: none;  /* PC版のtranslateXを解除 */
    }

    /* スマホ版：バナー画像の切り替え */
    #p-topics .p-topics-banner .p-topics-banner-pc {
        display: none !important;
    }

    #p-topics .p-topics-banner .p-topics-banner-sp {
        display: block !important;
    }

    /* 目次：番号の下に文章が回り込まないように */
    #p-topics .index_block > ol {
        list-style-position: outside;
        padding-left: 25px;
    }

    #p-topics .index_block > ol li {
        padding-left: 5px;
    }

    /* 目次内画像：横長にトリミング */
    #p-topics .p-topics-index-image {
        width: 100%;
        height: 150px;  /* 高さ：数値を小さくするほど横長に */
        object-fit: cover;
        object-position: center 30%;  /* 数値を小さくするほど画像の下側が見える */
    }

    /* 見出し（data_h2）：見切れ防止・番号の下に文章が回り込まない */
    #p-topics .data_h2 h2 {
        display: flex;
        align-items: flex-start;
        white-space: normal;
        padding-left: 0;
        text-indent: 0;
        font-size: 20px;
    }

    #p-topics .p-topics-h2-num {
        flex-shrink: 0;  /* 番号は縮まない */
    }

    #p-topics .p-topics-h2-text {
        flex: 1;
    }

    /* スマホ専用改行を表示 */
    #p-topics .sp-only {
        display: inline;
    }

    /* 本文を左揃え・フォントサイズ統一 */
    #p-topics .pg_p p,
    #p-topics .p-topics-body-large,
    #p-topics .p-topics-intro p {
        text-align: left;
        font-size: 17px;  /* 1行約23文字表示用 */
        line-height: 1.8;
    }

    /* 要点1〜3のフォントサイズを本文と同じに */
    #p-topics .p-topics-point {
        font-size: 17px;  /* 本文と統一 */
    }

    /* 執筆者情報ボックス・更新履歴：フォントサイズを小さく */
    #p-topics .p-topics-author-name {
        font-size: 12px;
    }

    #p-topics .p-topics-author-profile {
        font-size: 12px;  /* フォントサイズ：数値を小さくするほど小さく */
        line-height: 1.6;
    }

    #p-topics .p-topics-update-title,
    #p-topics .p-topics-update-item {
        font-size: 12px;
    }

    /* 記事末尾の注記：フォントサイズを小さく */
    #p-topics .p-topics-note p {
        font-size: 12px;
        line-height: 1.6;
    }
}