@charset "utf-8"; /* 文字エンコーディングを指定する */

/* 全部の制御 ---------------------------------------------------------------------- */

:root {
    /* --- フォント --- */
    --global-fonts: 'Roboto', 'Noto Sans JP', sans-serif; /* ベースのフォント（欧文フォントを先に記述する） */
    --global-size: 16px; /* ベースのフォントサイズ */
    
    /* --- カラー（色） --- */
    --color-navy: #1C1C72; 
    --color-navylight: #A5A5CE; 
    --color-lightblue: #1E99D4; 
    --color-black: #1C1C1C; 
    --color-yellowgreen: #89C33F; 
    --color-white: #FFFFFF; 
    --color-bluegray: #F1F1F1; 
    --color-gray:#C9C9C9;
    --color-deepgray:#888888;

    /* --- その他 --- */ 
    scroll-behavior: smooth; /* スクロールの挙動をなめらかに */
}

html, ::before, ::after {
    font-family: var(--global-fonts);
    font-size: var(--global-size);
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.l-inner{
    margin:0 auto;
}

/* header ---------------------------------------------------------------------- */

.header {
    width: 100%;
    height: 80px; /* ※実際のデザインに合わせて高さを指定してください */
    background-color: var(--color-white);
    position: fixed;
    z-index: 9999;
    box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.2);
}

.header .l-inner {
    display: flex;
    justify-content: space-between; /* ロゴを左、ナビを右に配置 */
    align-items: stretch; /* 子要素の高さをヘッダーいっぱいに伸ばす */
    height: 100%;
    
}

.header__logo{
    display: flex;
    align-items: center; /* 上下中央揃え */
    color: var(--color-navy);
    font-weight: bold;
    font-size: 1rem;
    margin-left: 32px;

    @media(width <= 479px){
        font-size: 0.75rem;
    }
}

.header__logo--link{
    text-decoration: none;
    color: inherit;
}

.header__nav{
    display: flex;
    height: 100%;

    @media(width <= 1024px){
        display: none;
    }

}

.header__list {
    display: flex;
    background-color: var(--color-navy); /* 背景を紺色に */
}

.header__item {
  position: relative; /* 縦線の基準位置にするため */
}

.header__link {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 30px; /* 文字の左右の余白 */
    color: var(--color-white);
    text-decoration: none;
    font-weight: 700;
}

.header__item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%); /* 上下中央に配置 */
    width: 1px;
    height: 40%; /* 線の長さを調整（上下に少し余白ができる） */
    background-color: var(--color-white);
}

.header__btn {
    display: flex;
    align-items: center;
    background-color: var(--color-black); /* 背景を黒色に */
    transition: opacity 0.3s ease;
}

.header__btn:hover{
    opacity: 0.8;
}

.header__btn--image{
    width:40px;
    padding-left: 10px;
    transform: translateY(-3px);
}

.header__btn .c-btn {
    display: flex;
    align-items: center;
    gap: 8px; /* 文字とアイコンの隙間 */
    color: var(--color-white);
    text-decoration: none;
    font-weight: 700;
    width: 100%;
    height: 100%;
    background-color: var(--color-black); 
    padding: 0 40px; /* <a>タグ自身に40pxの余白を持たせることでクリック可能になります！ */
}

/* ハンバーガー部分 ------------------------------------------------------------- */

.globalMenu{
    height:50px;
    position: relative;
    z-index: 9999;
}

.menuButton{
    display: none; /* 初期表示でメニューの中身を隠す */
}

.menuButton__contents{
    width:100%;
    background-color: var(--color-white);
    position: absolute;
    top:0;
    right:0;
    box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.2);
}

.menuButton_group__each{
    line-height: 80px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    list-style: none;
    border-top: solid 1px var(--color-bluegray);
    text-align: left;
}

.menuButton_group__each:last-child{
    border-bottom: solid 0px var(--color-white);
    background-color: var(--color-black);
    color: var(--color-white);
    text-align: center;
}

.menuButton_group__each_text{
    text-decoration: none;
    color: var(--color-black);
    display: block; 
    padding-left: min(10%, 40px); /* 数値はお好みで調整してください（20px〜40pxくらいがおすすめです） */
}

.menuButton_group__each:last-child .menuButton_group__each_text {
    color: var(--color-white);
}

.hamburger{  /* 三本線 */
    width:30px;
    height:30px;
    position: absolute;
    top:-55px;
    right:15px;
    cursor: pointer;
    z-index: 9999;

    background:url(../img/hamburger-button.svg)no-repeat;
    background-size: 200%;
    &.menu-is-open{
        background-position: top 0 left -30px;
    }

    @media(width >= 1025px){
        display: none;
    }
}

.inHamburger{
    width:50px;
    transform: translateY(12px);
}

/* ---CTA (下部メルマガ誘導)
 (メルマガ誘導エリア専用スタイル)---------------------------------------------------------------------- */

.cta {
    position: relative;
    width: 100%;
    background: url('../img/cta_bg.jpg') no-repeat center center / cover; 
    box-sizing: border-box;
    min-height: 400px;
    padding: 60px 20px;
    display: flex;
    align-items: center;
    margin-top: 100px;
}

.cta .l-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cta__text {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 2.25;
    color: var(--color-black);
    margin-bottom: 2.5rem;

    @media(width <= 1024px){
        font-size: 1rem;
        line-height: 1.75;
    }
}


/* ボタンの配置用ラッパー */
.cta__btn-wp {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* CTAボタン本体 */
.cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 276px;
    min-height: 80px;
    background-color: var(--color-black);
    color: var(--color-white);
    text-decoration: none;
    font-weight: 700;
    padding: 15px 40px;
    transition: opacity 0.3s ease;
}

/* ホバー時の視覚効果 */
.cta__btn:hover {
    opacity: 0.8;
}

/* ボタン内のアイコン設定 */
.cta__btn-icon {
    width: 40px;
    height: auto;
    transform: translateY(-2px); /* 縦位置の微調整（ヘッダーの仕様を参考） */
}


/* フッター */
/* 1. 事務局情報エリア（背景を左右幅いっぱいに） */
.footer__info {
    width: 100%;
    min-height: 200px;
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 40px 0;
    font-style: normal;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* 事務局情報のインナー（最大幅1200pxで中央寄せ ＋ 左側の余白） */
.footer__info-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

/* 事務局タイトル */
.footer__title {
    font-size: 1.25rem;
    font-weight: 500;
    text-align: left;    /* 1200pxの枠内で左揃え */
    margin-bottom: 15px; /* 下の空き15px */
}

/* 住所・連絡先 */
.footer__address {
    font-size: 1rem;
    font-weight: 400;
    line-height: 2;
    text-align: left;
}

/* ★メールアドレス単体のスタイル */
.footer__mail {
    display: inline-block;
    color: var(--color-white);
    text-decoration: none;
    white-space: nowrap;
    padding-left: 40px;
    transition: opacity 0.3s;
}

.footer__mail:hover {
    opacity: 0.7;
}

/* レスポンシブ（他のパーツに合わせて 1024px 以下で一括調整） */
@media (max-width: 1024px) {
    /* PC用の改行を無効化する */
    .u-br-pc {
        display: none;
    }

		.cta {
    margin-top: 0;
	}

    /* 文字サイズを少しだけ縮小して調整 */
    .footer__title {
        font-size: 1.125rem;
        margin-bottom: 10px;
        line-height: 1.5;
    }
    .footer__address {
        font-size: 0.9375rem;
    }

    /* 現状のスマホ用コードをここに統合 */
    .footer__mail {
        display: block;
        padding-left: 0;
        margin-top: 8px;
    }
}

/* ---コピーライト--- */
.footer__copyright {
    width: 100%;
    background-color: var(--color-navy);
    color: var(--color-white);
    text-align: center; /* 中央揃え */
    padding: 15px 0;    /* 上下の余白 */
}

/* コピーライトテキスト */
.footer__copyright-text {
    display: block;
    font-size: 0.875rem;
}


/* 1400px以上の設定 */
@media (width >= 1400px) {
    .mv .l-inner {
        max-width: 1200px; /* 他のMEMBERやMESSAGEセクションの幅（1200px）に合わせる */
        margin: 0 auto;    /* 1200pxの箱を画面のど真ん中に配置する */
        padding-left: 0;   /* PC版で設定していた左側の余白(126px)をリセットして、箱の左端に揃える */
    }

    .news .l-inner,
    .top-banner {
        /* 1. 帯を画面左端から塗ったまま、中身だけを1200pxの箱の左端まで押し出す */
        /* 画面の半分(50%)から、1200pxの半分(600px)を引いた距離を左の余白にします */
        padding-left: calc(50% - 600px); 
    
        /* 2. 中身の幅が潰れないように、増えた左余白の分を最大幅(max-width)にも足す */
        /* calc(50% - 600px) ＋ 元の幅(1120px) ＝ calc(50% + 520px) */
        max-width: calc(50% + 520px); 
    }

    .news__title {
        text-align: left;
    }
}




/* ---topicsページ用---------------------------------------------------------------------- */


/* =======================================================
    下層ページ：共通ヘッダー（.page-header）
======================================================= */
.page-header {
  /* ▼ 青いデジタル背景画像のパスは、実際のフォルダ構成に合わせてください */
    background-image: url('../../topics/event/img/topics_top_img.jpg'); 
    background-size: cover;
    background-position: center;
    /* ヘッダー（80px）が上にかぶる分を考慮して、上の余白を大きく取ります */
    padding: 120px 0 40px; 
    text-align: center;
}

@media (max-width: 768px) {

    .page-header {
        padding: 105px 0 26px;
    }

}

/* =======================================================
    下層ページ：共通ヘッダー（.page-header）のタイトル装飾
======================================================= */
/* 英語タイトル（TOPICS） */
.page-header .c-section-title {
    font-size: 3.125rem;
    color: var(--color-white);
    line-height: 1;
    font-weight: 500;
}

/* 日本語のサブタイトル（情報発信） */
.page-header .c-section-subtitle {
    display: block; /* 英語タイトルと横並びにならないように改行させます */
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-white);
    position: relative;
    padding-top: 6px;
    padding-bottom: 18px; /* 下の2色ラインとの隙間 */
}

/* 黄緑と白の2色ライン（中央配置） */
.page-header .c-section-subtitle::after {
    content: "";
    position: absolute;
    bottom: 0;
    
    /* ▼ここがポイント：要素をど真ん中に配置する */
    left: 50%;
    transform: translateX(-50%); 
    width: 96px;
    height: 8px;
    background: linear-gradient(45deg, var(--color-yellowgreen) 50%, var(--color-black) 50%);
}

@media (max-width: 768px) {

    .page-header .c-section-title {
        font-size: 2.15rem;
    }

    .page-header .c-section-subtitle {
        font-size: 0.85rem;
        padding-bottom: 14px; /* 下の2色ラインとの隙間 */
    }

    .page-header .c-section-subtitle::after {
        width: 80px;
        height: 6px;
    }

}

/* =======================================================
    パンくずリスト（.breadcrumb）
======================================================= */
.breadcrumb {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 15px 70px 15px;
}

@media (max-width: 768px) {
    .breadcrumb {
        padding: 20px 15px 25px 15px;
    }
}

.breadcrumb__list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap; /* 改行させず1行に強制 */
    width: 100%;
    gap: 4px;
    font-size: 0.8125rem;
    color: var(--color-deepgray);
    line-height: 1.5;
}

.breadcrumb__item {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap; /* 途中で勝手に改行されるのを防ぐ */
}

/* 最後の項目（現在地）以外に「＞」をつける */
.breadcrumb__item:not(:last-child)::after {
    content: "＞";
}

/* ★【今回の修正箇所】一番最後（現在地）だけに魔法をかけます */
.breadcrumb__item:last-child {
    display: block;          /* ★【最重要】Flexboxを解除して通常のブロック要素にし、三点リーダーを有効化します */
    flex: 1;                 /* 画面の残り横幅をすべてこの要素に割り当て、自動で縮むようにします [1] */
    min-width: 0;            /* 親のFlexboxの中で限界まで縮むようにします [1] */
    overflow: hidden;        /* はみ出た文字を非表示にします [1] */
    text-overflow: ellipsis; /* ★文字がはみ出て欠けた場合に、自動で末尾に「…」を付与します [1] */
    white-space: nowrap;     /* 絶対に改行させず、1行に固定します [1] */
}

/* リンクのスタイル */
.breadcrumb__link {
    color: var(--color-deepgray);
    text-decoration: underline;
    transition: opacity 0.3s;
}

.breadcrumb__link:hover {
    opacity: 0.7;
}

/* =======================================================
    記事一覧エリア（.archive）
======================================================= */
.archive {
    max-width: 960px;      /* 横幅の最大値を960pxに制限 */
    margin: 0 auto;        /* 左右のマージンを自動調整して画面中央に配置 */
    padding: 40px 15px 100px; /* 上40px、左右15px（スマホ対策）、下100pxの余白 [1] */
    
}

/* ▼ 絞り込みタブ ▼ */
.archive__tabs {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap; /* スマホ対応 */
    gap: 16px;
    margin-bottom: 60px;
}

/* 子要素（li）自体の横幅を伸縮可能にしておく */
.archive__tab {
    flex-shrink: 0;
		display: flex; /* ★ li 自体も Flexbox にして中の a タグを縦いっぱいに広げる */
}

.archive__tab a {
    display: flex;
    align-items: center;
    justify-content: center;
	text-align: center;/* 2行になったときに文字を中央揃えにする */
    line-height: 1.3;/* 2行になったときの間隔を調整 */
	width: 100%;        /* ★ 横幅いっぱいに広げる */
    height: 100%;       /* ★ これを追加！一番背が高い隣のタブと同じ高さまで引き伸ばす */
    min-width: 178px;
    min-height: 46px;
    border-radius: 30px; /* 丸角のボタン */
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--color-navy); /* 紺色の枠線 */
    color: var(--color-navy);
    background-color: var(--color-white);
    transition: all 0.3s ease;
    padding: 0 16px; /* 文字が長くなった時のための余白を追加 */
    box-sizing: border-box;
}

/* アクティブ（選択中）とホバー時のスタイル（色を反転させる） */
.archive__tab--active a,
.archive__tab a:hover {
    background-color: var(--color-navy);
    color: var(--color-white);
}

/* 情報発信一覧 レスポンシブ対応（スマホ・タブレット用） */
@media (max-width: 768px) {
	
    .archive {
    padding: 20px 15px 60px;
    }

	.archive__tabs {
        display: flex; /* Flexboxで制御 */
        flex-wrap: wrap;
        gap: 10px; /* スマホ時の隙間 */
				margin-bottom: 30px;
    }

    .archive__tab {
        /* (100% - 隙間10px) / 2列 = 各要素の幅 */
        width: calc((100% - 10px) / 2); 
    }

    .archive__tab a {
        min-width: 0; /* PC用の178px指定を解除（幅に合わせて収める） */
        width: 100%;  /* 2列の枠いっぱいに広げる */
				height: 100%;     /* ★ スマホ時も高さを揃える */
				min-height: 30px;/* スマホ時の最小高さ */
        padding: 6px 8px;    /* スマホ用に上下・左右のパディングを少し小さく */
        padding: 4px 8px; /* 文字が枠からはみ出ないよう調整 */
        font-size: 0.875rem; /* スマホ用に文字サイズを少し微調整 */
    }
}

/* ▼ 記事リスト ▼ */
/* LPのクラス（.news__listなど）を流用しつつ、一覧ページ用に横幅だけを絞って見やすくします */
.archive .news__list {
    max-width: 960px; 
    margin: 0 auto;
    border-bottom: solid 1px var(--color-bluegray);
    margin-bottom: 563px; /* ----------------記事が増える想定での仮のheight---------------- */
}

/* ▼ ページネーション（ページ送り） ▼ */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-top: 80px;
    font-size: 0.95rem;
}
.pagination a {
    color: var(--color-black);
    text-decoration: none;
    transition: opacity 0.3s;
}
.pagination a:hover {
    opacity: 0.7;
}

/* 現在のページ番号（グレーの四角形） */
.pagination__number {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 31px;
    height: 36px;
    background-color: var(--color-deepgray);
    color: var(--color-white);
}


/* -----------------------------------------------------topics　記事ページ用-------------------------------------------------- */

/* =======================================================
    記事詳細ページ（.post）
======================================================= */
/* 記事全体の枠組み（850pxで中央寄せ） */
.post {
    max-width: 880px; /* 左右余白15pxを考慮して850px+30px=880px */
    margin: 0 auto;
    padding: 0px 15px ; /* 左右にスマホ用の余白15pxを確保 */
}

/* 記事ヘッダー */
.post__header {
    margin-bottom: 40px;
}
.post__meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

/* カテゴリタグ：濃い紺色の塗りつぶしに白文字 */
.post__category {
    display: inline-block;
    background-color: var(--color-navy);
    color: var(--color-white);
    font-size: 1.25rem;
    font-weight: 700;
    padding: 8px 28px;
    text-align: center;
}

/* 日付の文字スタイル */
.post__date {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--color-navy); /* 日付の紺色はお好みのトーンに調整してください */
}

/* 記事タイトル（大見出し） */
.post__title {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-black);
}

/* メイン画像（アイキャッチ） */
.post__mv {
    width: 100%;
}

.post__mv img {
    width: 100%;
    height: auto;
    display: block;
}

/* 記事本文 */
.post__body {
    font-size: 1rem;
    color: var(--color-black);
    margin-top: 30px;
}

.post__text {
    margin-top: 15px;
}

.post__lead,
.post__text {
    line-height: 1.875; /* カンプのゆったりとした行間を再現 */
}

.post__text-area--H2{
    padding-top: 30px;
}

/* 上の区切り線（細いグレーの線） */
.post__divider--top {
    border: none;
    border-top: 1px solid var(--color-gray);
    margin-top: 30px ;
}

/* 下の区切り線（細いグレーの線） */
.post__divider--bottom {
    border: none;
    border-top: 1px solid var(--color-gray);
}

/* 開催概要エリア */
.post__outline {
    font-size: 1rem;
    padding:10px 24px;
    font-weight: 500;
}

.post__outline-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--color-black);
    transform: translateX(-10px);
}

.post__outline-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.post__outline-item {
    display: block;     /* ★Flexboxを解除して、通常のブロック（改行）にします */
    line-height: 1.8;   /* 読みやすい行高さを指定 */
}

.post__outline-term {
    display: inline;    /* ★インライン要素にして、文章の一部として扱います */
    font-weight: 700;
    color: var(--color-black);
}

.post__outline-desc {
    display: inline;    /* ★こちらもインラインにして、見出しのすぐ後ろにピタッと繋げます */
    color: var(--color-black);
}


/* =======================================================
    記事詳細ページ（.post）: 新規追加エリア（目次 ＆ プロフィール）
======================================================= */

/* ----------------------------------
    1. 目次ブロック（.post__index）
---------------------------------- */
.post__index {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray);             /* 周りを薄いグレーの枠線で囲う */
    border-left: 7px solid var(--color-navy);        /* 左側に印象的な太いネイビーの境界線 */
    padding: 30px 40px 20px 30px;
    margin-top: 30px;
}

/* ▼ 目次タイトル */
.post__index-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-navy);
    margin-bottom: 20px;
    line-height: 1;
}

.post__index-list {
    list-style: none; /* デフォルトの数字は非表示 */
}

/* リスト項目（H2部分の親レイアウト） */
.post__index-item {
    display: flex;
    align-items: flex-start;
    padding: 0; /* ★親のパディングをリセットし、子要素側で線と余白を個別に管理します */
    /* ★親の border-bottom を削除することで、H3の最後と罫線が重なって二重線になるのを防ぎます */
}

/* 番号（1., 2. などの部分） */
.post__index-num {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-navylight);
    margin-right: 12px;
    flex-shrink: 0;
    padding-top: 15px; /* 高さをピッタリ揃えます */
}

/* 見出し＆H3リストを包むブロック */
.post__index-content {
    flex-grow: 1;
    min-width: 0; /* ★【最重要】パンくず同様、Flexboxの中で三点リーダーを効かせるため */
}

/* ★ H2の見出しリンク */
.post__index-link {
    display: block;/* ★1行に制限（三点リーダー有効化）するためにブロック要素化 */
    white-space: nowrap;/* ★絶対に改行させない */
    overflow: hidden;/* ★はみ出た部分は非表示 */
    text-overflow: ellipsis; /* ★あふれた部分を自動で「…」にする */
    
    color: var(--color-black);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.6;
    padding: 12px 0;         /* ★見出しの上下に余白を確保 */
    border-bottom: 1px solid var(--color-bluegray); /* ★H2文章のすぐ下に罫線を追加 */
    transition: color 0.3s;
}

/* 訪問済み（クリック後）でも文字色を黒に維持する */
.post__index-link:visited {
    color: var(--color-black);
}

.post__index-link:hover {
    color: var(--color-deepgray);
}

/* H3（インナーリスト）の構造 */
.post__index-sub-list {
    list-style: none;
    padding-left: 0;
    margin-top: 0; /* 余計なマージンをリセット */
}

/* ★ H3の各項目 */
.post__index-sub-item {
    position: relative;
    padding: 10px 0 10px 16px; /* ★H2と同じリズムで上下余白を取り、左にダッシュ用のスペースを確保 */
    border-bottom: 1px solid var(--color-bluegray); /* ★H3文章のすぐ下にも完璧に罫線を追加 */
}

/* ★ H3見出しテキスト */
.post__index-sub-link {
    display: block;          /* ★1行に制限するためにブロック化 */
    white-space: nowrap;     /* ★絶対に改行させない */
    overflow: hidden;        /* ★はみ出た部分は非表示 */
    text-overflow: ellipsis; /* ★あふれた部分を自動で「…」にする */
    
    font-size: 0.875rem;
    color: var(--color-deepgray);
    text-decoration: none;
    line-height: 1.5;
    transition: color 0.3s;
}

.post__index-sub-link:hover {
    color: var(--color-gray);
}


/* ----------------------------------
    2. プロフィールブロック（.post__speaker）
---------------------------------- */
.post__speaker {
    display: flex;
    background-color: var(--color-bluegray);             /* ★カンプに合わせた美しい超淡いグレー背景 */
    padding: 40px;
    margin-top: 30px;
    gap: 32px;                             /* 写真とテキストブロックの間の余白 */
    align-items: flex-start;
}

/* 左側：写真のラッパー */
.post__speaker-img-wrapper {
    width: 180px;
    height: 210px;
    flex-shrink: 0;                        /* 横幅が狭くなっても潰れないように固定 */
    overflow: hidden;
}

.post__speaker-img {
    width: 100%;
    height: 100%;
    object-fit: cover;                     /* 比率を保ったまま綺麗に1:1に収めます */
}

/* 右側：コンテンツ */
.post__speaker-body {
    flex-grow: 1;
}

/* お名前 */
.post__speaker-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 16px;
}

/* ふりがな */
.post__speaker-kana {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-black);
}

/* 肩書き・役職 */
.post__speaker-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-black);
    line-height: 1.6;
    margin-bottom: 16px;
}

/* 経歴テキスト */
.post__speaker-profile {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-black);
}


/* =======================================================
        レスポンシブ対応（スマホ・タブレット用）
======================================================= */
@media (max-width: 768px) {
  /* 目次のパディングをスマホ用に狭める */
    .post__index {
        padding: 20px;
    }
    
  /* プロフィールブロックをスマホ時は「縦並び」にチェンジ！ */
    .post__speaker {
        flex-direction: column;              /* 縦並び（コラム）に切り替え */
        align-items: center;                 /* 写真とテキストを中央配置 */
        padding: 24px;
        gap: 20px;
    }
    
    .post__speaker-body {
        width: 100%;                         /* 横幅いっぱいにして左寄せにする */
        text-align: left;
    }
}



/* =======================================================
    記事詳細ページ（.post）: H2見出し以降の追加装飾
======================================================= */
/* 各セクションのブロック余白 */
.post__section {
    margin-top: 100px; /* 開催概要や上のブロックとの間に十分な余白をとります */
}

/* 紺色（ネイビー）の帯見出し */
.post__section-title {
    scroll-margin-top: 100px; /* ヘッダー高(80px) + 余白(20px) */
    background-color: var(--color-navy); /* LPやヘッダーと共通の濃い紺色 */
    color: var(--color-white);           /* 文字色は白 */
    font-size: 1.75rem;                   /* 存在感のある見出しサイズ */
    font-weight: 700;
    line-height: 1.4;
    padding: 8px 6px 8px 12px;           /* 上下左右に程よい内側余白 */

    text-indent: 0px;                  /* 先頭に括弧類がある時、-12px */

    margin-top: 100px;                  /* 競合に注意 */

    /* スマホ等で角が丸くならないようにフラットな長方形に設定 */
    border-radius: 0; 
}

.post__H3{
    margin-top: 50px;
}

.post__H4{
    margin-top: 50px;
}

/* 目次のページ内リンク ヘッダー被り対策 */
.is-anchor-target {
    scroll-margin-top: 100px;
}

/* メイン画像とH3用画像につかう（MainVisual） */
.post__section__mv {
    width: 100%;
    margin-top: 30px;
}

/* H4用画像につかう（SubVisual） */
.post__section__sv {
    width: 100%;
    margin-top: 30px;
}

/* 画像（アイキャッチ）のキャプション */
.post__section__mv_caption{
    text-align: center;
    font-size: 0.875rem;
    line-height: 24px;
    padding-top: 16px;
}

/* ノーマル画像（記事中の大写真） */
.post__section__normalV {
    width: 100%;
    margin-top: 30px;
}

.post__section img {
    width: 100%;
    height: auto;
    display: block;
}

.post__fontSizeUp3{
    font-size: 1.5rem; /* 小見出し用24px */
    font-weight: 600;
}

.post__fontSizeUp4{
    font-size: 1.25rem; /* 最小見出し用20px */
    font-weight: 600;
}

.post__text--emphasize{
    font-weight: 700;
}

/* 本文下の注釈テキスト */
.post__note {
  display: block;
  margin-top: 8px;
  font-size: 0.85em; /* 本文より少し小さく */
  color: #666666;    /* 控えめな色 */
  line-height: 1.6;
}

.post__text--alone{
    margin-top: 30px;
}

/* =======================================================
    記事詳細ページ（.post）: 風景写真の2カラム横並び（.post__sub）
======================================================= */
/* 2枚の画像を横並びにする親要素 */
.post__sub {
    display: flex;
    justify-content: space-between; /* 2枚の画像を左右いっぱいに広げて均等配置 */
    align-items: stretch;           /* 2枚の画像の高さを綺麗に揃えます */
    gap: 10px;                      /* 画像同士の間隔 */
    margin-top: 30px;               /* 上の文章との間の余白 */
}

/* 画像を包む枠組み（子要素） */
.post__sub-img {
    /* ★50%から「隙間（20px）の半分である10px」を引くことで、はみ出すことなくピッタリと横に並びます */
    width: calc(50% - 0.5px); 
}

/* 画像自体のリセット */
.post__sub-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* =======================================================
    レスポンシブ対応（スマホ・タブレット用）
======================================================= */
@media (max-width: 768px) {
    .post {
        padding-bottom: 40px; /* スマホ時は下の余白を少し狭く */
    }

    .post__meta {
        margin-bottom: 16px;
    }

    .post__header {
        margin-bottom: 26px;
    }

    .post__title {
        font-size: 1.625rem; /* スマホ画面に合わせて文字サイズを調整 */
    }

    .post__section {
        margin-top: 40px; /* スマホ時は上下の余白を少しコンパクトに */
    }

    .post__section-title {
        font-size: 1.2rem;   /* スマホの画面幅に合わせて文字を少し小さく調整 */
        padding: 12px 16px;  /* 左右の余白を画面幅に合わせて狭めます */
        margin-top: 60px;/* PCで設定されている margin-top: 100px を詰める */
    }

    .post__text-area--H2 {
        padding-top: 20px;
    }

    .post__H3{
        margin-top: 30px;
    }

    .post__H4{
        margin-top: 30px;
    }

    /* スマホの時は縦並びに切り替えます */
    .post__sub {
        flex-direction: column;       /* 縦並び（コラム）に変更 */
    }

    /* スマホ時は横幅いっぱい（100%）に広げます */
    .post__sub-img {
        width: 100%;
    }

    .post__category {
        font-size: 1rem;
    }

    .post__date {
        font-size: 1rem;
    }

    .post__fontSizeUp3{
        font-size: 1.25rem; 
    }

    .post__fontSizeUp4{
        font-size: 1rem; 
    }
}

/* =======================================================
    情報発信一覧に戻るボタン
======================================================= */
.report-btn-wrapper {
    margin-top: 100px;
    text-align: center;
}

/* レポート用の一覧に戻るボタン本体 */
.report-btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    width: 276px;
    height: 80px;
    box-sizing: border-box;  
    background-color: var(--color-white);
    border: 1px solid var(--color-black);
    color: var(--color-black);
	font-weight: 600;
    text-decoration: none;
}

.report-btn-back:hover {
	color: var(--color-white);
	background-color: var(--color-black);
}

/* -----------------------------------
    3. 先頭に戻るボタン（完全に独立）
----------------------------------- */
/* 位置調整用の基準ラッパー（記事幅850pxに合わせる） */
.report-top-btn-wrapper {
    position: relative;
    width: 850px;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ボタン本体：記事幅（850px）の右端から55px右へ配置 */
.report-top-btn {
    position: absolute;
    right: -80px;
    
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--color-deepgray);
    
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: opacity 0.3s, background-color 0.3s;
}

/* 白い「への字」アイコン */
.report-top-btn::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    border-top: 2px solid var(--color-white);
    border-left: 2px solid var(--color-white);
    transform: rotate(45deg);
    margin-top: 8px;
}

.report-top-btn:hover {
    opacity: 0.8;
    background-color: #555555;
}


/* -----------------------------------
    4. タブレット・スマホ版（1024px以下）
----------------------------------- */
@media (max-width: 1024px) {
    
  /* 一覧に戻るボタンのスマホ表示 */
    .report-btn-wrapper {
        width: 100%;
        margin-top: 60px;
        padding: 0 20px;
    }

  /* 先頭に戻るボタンのスマホ表示：中央配置にする */
    .report-top-btn-wrapper {
        width: 100%;
        margin-top: 10px;
        display: flex;
        justify-content: right;
    }

    .report-top-btn {
        position: static;   /* absolute を解除して中央配置 */
        width: 44px;
        height: 44px;
    }
}