@charset "utf-8";

/* === SEO Content Section === */
.seo_content_section {
    padding: 60px 0;
    background-color: #ffffff; /* 本文セクションの背景は白が一般的 */
    border-bottom: 1px solid #e9edf0; /* セクション間の区切り */
}

.seo_content_section:last-of-type { /* 最後のセクションの下ボーダーは不要な場合 */
    border-bottom: none;
}

.border_none { /* 最後のセクションの下ボーダーは不要な場合 */
    border-bottom: none;
}

.content_section_container {
    max-width: 1100px; /* 本文エリアの最大幅、サイドバーを考慮 */
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 40px; /* メインカラムとサイドバーの間隔 */
}

/* メインコンテンツカラム */
.content_main_column {
    flex: 1; /* 利用可能なスペースを最大限使用 */
    min-width: 0; /* flexアイテムの縮小問題を回避 */
}

.content_section_title { /* H2タグ */
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 2em; /* 導入H1より小さく */
    font-weight: 700;
    color: #2a3b4c;
    margin-top: 0; /* セクション最初のタイトル */
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--orange); /* H2のアクセントボーダー */
    position: relative;
}
/* H2タイトルのアクセント装飾 (オプション) */
.content_section_title::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px; /* ボーダーの位置に合わせる */
    width: 50px;
    height: 2px;
    background-color: var(--bright-orange); /* ボーダーの色より薄い色 */
    z-index: -1; /* ボーダーの下に表示 */
}


.content_prose {
    font-family: 'Noto Sans JP', 'Hiragino Sans', Meiryo, sans-serif;
    font-size: 1rem; /* 基準フォントサイズ (16px相当) */
    line-height: 1.8; /* 読みやすい行間 */
    color: #333e48;
}
.content_prose p,
.content_prose ul,
.content_prose ol,
.content_prose blockquote,
.content_prose figure {
    margin-bottom: 1.5em;
}
.content_prose h3, .content_prose h4 { /* H3, H4タグ */
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 600;
    color: #1d2d3c;
    margin-top: 2.5em;
    margin-bottom: 1em;
    line-height: 1.4;
}
.content_subsection_title, /* H3タグの別名 */
.content_prose h3 {
    font-size: 1.5em;
    padding-left: 12px;
    border-left: 4px solid var(--bright-orange); /* H3のアクセントボーダー */
}
.content_prose h4 {
    font-size: 1.25em;
}

.content_prose ul, .content_prose ol {
    padding-left: 1.5em; /* リストのインデント */
}
.content_prose ul li {
    list-style-type: disc; /* 標準的な黒丸 */
    margin-bottom: 0.5em;
}
.content_prose ol li {
    list-style-type: decimal; /* 番号付きリスト */
    margin-bottom: 0.5em;
}
.content_prose li > ul, .content_prose li > ol {
    margin-top: 0.5em; /* ネストしたリストの上マージン */
}

.content_prose a {
    color: #007bff;
    text-decoration: underline;
    text-decoration-color: rgba(0, 123, 255, 0.3);
    transition: color 0.2s, text-decoration-color 0.2s;
}

.content_prose blockquote {
    border-left: 4px solid #cbd5e1; /* 引用符の左ボーダー */
    padding: 10px 20px;
    margin-left: 0;
    margin-right: 0;
    background-color: #f8fafc; /* 引用背景色 */
    font-style: italic;
    color: #475569;
}
.content_prose blockquote p {
    margin-bottom: 0.5em;
}
.content_prose blockquote p:last-child {
    margin-bottom: 0;
}

.content_figure {
    margin: 30px auto; /* 上下左右中央に配置することも検討 */
    text-align: center; /* 画像とキャプションを中央揃え */
}
.content_figure_image {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border: 1px solid #e2e8f0;
}
.content_figure_caption {
    font-size: 0.875em;
    color: #64748b;
    margin-top: 10px;
    font-style: italic;
}

/* === Responsive Adjustments for Content Section === */
@media (max-width: 992px) { /* タブレットサイズでサイドバーを非表示または下に移動 */
    .content_section_container {
        flex-direction: column; /* メインとサイドバーを縦積みに */
        gap: 0; /* 縦積みなのでカラム間のgapは不要に */
    }
}

@media (max-width: 768px) {
    .seo_content_section {
        padding: 40px 0;
    }
    .content_section_container {
        padding: 0 15px;
    }
    .content_section_title {
        font-size: 1.8em;
        margin-bottom: 25px;
    }
    .content_prose {
        font-size: 0.95rem;
    }
    .content_subsection_title, .content_prose h3 {
        font-size: 1.35em;
    }
    .content_prose h4 {
        font-size: 1.15em;
    }
}

@media (max-width: 480px) {
    .content_subsection_title, .content_prose h3 {
        font-size: 1.25em;
        padding-left: 10px;
        border-left-width: 3px;
    }
}