/* === article.css === */

/* メインコンテンツエリア (記事詳細ページ用) */
.site-main.article-detail-page-main {
    padding-top: 40px;    /* ☆★ヘッダーとの間の余白調整 (JSでの調整も考慮)★☆ */
    padding-bottom: 60px; /* ☆★フッターとの間の余白調整★☆ */
    /* 背景はbodyで設定されている #F7F7F7 が適用される */
}

/* パンくずリストのスタイルは style.css (共通) にある想定 */
.breadcrumbs {
    margin: 40px 0 30px 0; /* ☆★記事メイン画像との間隔調整★☆ */
    font-size: 0.9rem; /* ☆★調整★☆ */
}

/* 記事のメイン画像 */
.article-main-image {
    margin: 20px 0 30px 0; /* ☆★記事本文エリアとの間隔調整★☆ */
    display: block;
}
.article-main-image img {
    width: 75%; 
    height: auto;
    justify-self: center;
}  
/* ★★★画像オーバーレイを追加★★★ */
.article-page-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2); /* ☆★半透明の黒（例: 40%の黒）。色と透明度を調整★☆ */
    z-index: 1; /* ★★★画像の上、タイトルの下に配置★★★ */
    border-radius: 10px; /* ☆★親要素と同じ角丸を継承または指定★☆ */
    /* transition: background-color 0.3s ease; /* ホバーで色を変える場合など */
}
.title-text-content {
    position: relative; /* z-indexを有効にするため */
    z-index: 2; /* ★★★オーバーレイ (z-index: 1) よりも手前に表示★★★ */
    width: 90%; /* 親 (.article-page-title) の幅に対して */
    max-width: 700px; /* 最大幅 */
    padding: 10px; /* 必要ならパディング */

    /* タイトルの文字スタイルをこちらに集約 */
    font-size: 2rem; /* ☆★サイズ調整★☆ */
    font-weight: 700;
    color: #FFFFFF; /* ☆★文字色を白に★☆ */
    text-shadow: 0 1px 3px rgba(0,0,0,0.6); /* ☆★テキストシャドウで読みやすく★☆ */
    line-height: 1.4;
    text-align: center;
}
/* 記事メタ情報 (もし使用する場合) */
.article-meta-info {
    text-align: center;
    font-size: 0.9rem;
    color: #777;
    margin-top: 20px; /* ☆★タイトル（画像）との間隔調整★☆ */
    margin-bottom: 30px;
}
.article-meta-info span {
    margin: 0 10px;
}

/* 記事本文エリア */
.article-body-content {
    background-color: rgba(255, 255, 255, 0.8); /* ☆★半透明の白い背景★☆ */
    padding: 30px; /* ☆★内側パディング調整★☆ */
    border-radius: 10px; /* ☆★角丸調整★☆ */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* ☆★軽い影★☆ */
    margin-top: 0; /* または適切な値に */
    margin-bottom: 40px; /* ☆★ページネーションとの間隔調整★☆ */
}

.article-body-content p {
    margin-bottom: 1.5em; /* 段落間の余白 */
    line-height: 1.8; /* 本文の行間 */
    font-size: 1.3rem;
}
.article-body-content h2 {
    font-size: 1.6rem; /* ☆★サイズ調整★☆ */
    font-weight: 700;
    color: #4A4A4A; /* ☆★色調整★☆ */
    margin-top: 2em;
    margin-bottom: 1em;
    /* 必要なら下線などのスタイル */
}
.article-body-content h3 {
    font-size: 1.6rem; /* ☆★サイズ調整★☆ */
    font-weight: 700;
    color: #4A4A4A; /* ☆★色調整★☆ */
    margin-top: 1.8em;
    margin-bottom: 0.8em;
}
.article-body-content ul,
.article-body-content ol {
    margin: 1em 0 1.5em 1.5em; /* ☆★リストの余白調整★☆ */
    padding-left: 1.5em; /* リストマーカーの表示領域 */
}
.article-body-content ul li { list-style: disc; margin-bottom: 0.5em; font-size: 1.3rem; }
.article-body-content ol li { list-style: decimal; margin-bottom: 0.5em; font-size: 1.3rem; }

.article-body-content blockquote {
    margin: 1.5em 0;
    padding: 1em 1.5em;
    border-left: 4px solid #fdcf2b; /* ☆★引用符の左線調整★☆ */
    background-color: #f9f9f9; /* ☆★引用背景色調整★☆ */
    color: #555;
}
.article-body-content blockquote p { margin-bottom: 0.5em; }
.article-body-content blockquote footer { font-size: 0.9em; text-align: right; }

.article-body-content .body-inline-image {
    margin: 2em auto; /* 上下左右中央 */
    text-align: center;
}
.article-body-content .body-inline-image img {
    max-width: 100%;
    border-radius: 8px; /* ☆★角丸調整★☆ */
}
.article-body-content .body-inline-image figcaption {
    font-size: 0.85rem;
    color: #777;
    margin-top: 0.5em;
}
.article-body-content .body-inline-lineflow img {
    width: 50%;
    height: auto;
    display: block;
    justify-self: center;
    margin-bottom: 3em;
}
.note span {
    font-size: 80%;
    text-indent: -1em;
}

/* ページネーション (前の記事・次の記事) */
.article-pagination-single {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    margin-bottom: 40px; /* ☆★追加セクションとの間隔調整★☆ */
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
.article-pagination-single a {
    color: #67C1C4; /* ☆★色調整★☆ */
    font-weight: 500;
    padding: 8px 15px;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}
.article-pagination-single a:hover {
    background-color: #67C1C4;
    color: #fff;
}

/* 追加セクション：関連リストエリア */
.related-content-section {
    padding-top: 40px; /* ☆★ページネーションとの間隔調整★☆ */
    padding-bottom: 20px; /* フッターとの間隔 */
    /* background-color: #f0f0f0; /* 必要なら背景色 */
}
.article-body-content .note {
    margin: 0;
    padding-left: 0;
}
.article-body-content .note li {
    list-style: none;
    font-size: 1rem;
}
/* .related-content-section .section-title のスタイルは共通の .section-title を使用 */
/* .related-content-section .article-grid のスタイルは共通の .article-grid を使用 */


/* === レスポンシブ対応 (記事詳細ページ固有) === */
@media (max-width: 768px) {
    .container {
        max-width: 100%; /* ★★★画面幅いっぱいに広がるようにする（左右パディングで調整）★★★ */
        padding-left: 15px;  /* ☆★モバイル時の左右パディング調整★☆ */
        padding-right: 15px; /* ☆★モバイル時の左右パディング調整★☆ */
        /* width: auto; /* または width: 100%; */
        /* 固定の width や max-width が指定されていれば、それを解除または調整 */
    }
    .site-main.article-detail-page-main {
        padding-top: 20px; /* ☆★ヘッダーとの間の余白調整★☆ */
        padding-bottom: 40px; /* ☆★フッターとの間の余白調整★☆ */
    }

    .breadcrumbs { margin-bottom: 20px; font-size: 0.8rem; }

    .article-page-title { 
        /*min-height: 180px; /* ☆★モバイル時の画像の最低高さ調整★☆ */
        /*padding: 15px; /* ☆★モバイル時のパディング調整★☆ */
        /*font-size: 1.6rem; /* ☆★モバイル時のタイトルサイズ調整★☆ */
        margin-bottom: 20px; /* ☆★次の要素との間隔調整★☆ */
        border-radius: 8px; /* ☆★モバイル時の角丸調整★☆ */
    }
    .article-page-title::before { /* オーバーレイも角丸調整 */
        border-radius: 8px;
    }
    .title-text-content {
        font-size: 1.6rem; /* モバイル時のタイトルサイズ調整 */
        width: 90%;
        padding: 5px;
    }
    .article-meta-info { margin-top: 15px; margin-bottom: 20px; }

    .article-body-content {
        background-color: rgba(255, 255, 255, 0.8);
        padding: 20px; /* ☆★モバイル時の内側パディング調整★☆ */
        border-radius: 8px; /* ☆★モバイル時の角丸調整★☆ */
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        margin-bottom: 30px;
        width: 100%; /* 明示的に指定（通常はブロック要素なので不要な場合も） */
        margin-left: auto;  /* 中央寄せにする場合（通常は親の.containerで制御） */
        margin-right: auto; /* 中央寄せにする場合（通常は親の.containerで制御） */
    }
    .article-body-content p { margin-bottom: 1.3rem; line-height: 1.7; }
    .article-body-content h2 { font-size: 1.6rem; margin-top: 1.8em; margin-bottom: 0.8em; }
    .article-body-content h3 { font-size: 1.4rem; margin-top: 1.5em; margin-bottom: 0.6em; }
    .article-body-content ul, .article-body-content ol { margin: 1em 0 1em 1em; padding-left: 1em; max-width: 90% ;}

    .article-pagination-single {
        padding: 15px 0;
        margin-bottom: 30px; /* ☆★追加セクションとの間隔調整★☆ */
        font-size: 0.9rem;
    }
    .article-main-image img {
        width: 100%;
    }
    .article-body-content .body-inline-lineflow img {
        width: 100%;
    }
    .article-pagination-single a { padding: 6px 10px; }

    .related-content-section { padding-top: 30px; padding-bottom: 10px;}
    /* .related-content-section .section-title は共通レスポンシブで調整 */
    /* .related-content-section .article-grid は共通レスポンシブで調整 */
    .article-body-content .note ul {
        margin: 0;
    }
    .article-body-content .note li {
        list-style: none;
        margin-left: 1em;
        font-size: small;
        text-indent: -1em;
    }
}