/* ============================================================
   記事ページ専用スタイル (article.css)
============================================================ */

/* 1. 変数定義 */
:root {
    --color-primary: #0097dc;
    --color-text: #333333;
    --color-gray-light: #f6f6f6;
    --font-family-base: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* 2. 記事コンテナ（外枠）の設定 */
.content-article {
    font-family: var(--font-family-base);
    color: var(--color-text);
    max-width: 1000px;
    margin: 130px auto 60px;
    width: 92%;
    line-height: 1.8;
}

.content-article * {
    box-sizing: border-box;
}

/* 3. 記事タイトルと挿入画像 */
.content-article .article-title {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text);
    border-bottom: 1px solid #ccc;
    margin: 0 0 30px 0;
    padding-bottom: 20px;
}

.content-article .article-image {
    text-align: center;
    margin: 40px 0;
}

.content-article .article-image img {
    max-width: 100%;
    height: auto;
    border-radius: 0;
}

/* 埋め込み動画（Vimeo等）と本文の余白 */
.content-article .article-video {
    margin: 40px 0;
}

/* 4. 見出しの装飾（コラム風） */
.content-article h2 {
    background: transparent !important;
    height: auto !important;
    color: var(--color-text);
    font-size: 28px;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.1em;
    margin: 60px 0 40px 0;
    padding: 0 0 0 20px;
    position: relative;
    border: none;
}
.content-article h2::before {
    background: var(--color-primary);
    bottom: 0;
    content: "";
    height: 100%;
    left: 0;
    margin: auto;
    position: absolute;
    top: 0;
    width: 6px;
}

.content-article h3 {
    background: transparent !important;
    height: auto !important;
    color: var(--color-text);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.05em;
    margin: 50px 0 20px 0;
    padding: 0 0 0 28px;
    position: relative;
    border: none;
}
.content-article h3::before {
    background: var(--color-primary);
    bottom: 0;
    content: "";
    height: 2px;
    left: 4px;
    margin: auto;
    position: absolute;
    top: 0;
    width: 16px;
}

.content-article h4 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    margin: 40px 0 15px 0;
}

/* 5. 本文・リスト・リンク */
.content-article p {
    font-size: 16px;
    margin: 0 0 1.5em 0;
}

.content-article strong {
    font-weight: 700;
}

/* ▼▼▼ ここからulの青いドット装飾 ▼▼▼ */
.content-article ul {
    list-style: none;
    padding: 0;
    margin: 0 0 2em 10px;
}

.content-article ul li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 0.8em;
    font-size: 16px;
    line-height: 1.7;
}

.content-article ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 8px;
    height: 8px;
    background-color: var(--color-primary);
    border-radius: 50%;
}
/* ▲▲▲ ここまで ▲▲▲ */

.content-article ol {
    font-size: 16px;
    margin: 0 0 2em 0;
    padding-left: 24px;
    list-style-type: decimal;
}

.content-article ol li {
    margin-bottom: 0.5em;
}

.content-article a {
    color: var(--color-primary);
    text-decoration: underline;
}

.content-article a:hover {
    text-decoration: none;
}

/* 6. 会話形式セクション（吹き出し） */
.talk-session {
    max-width: 900px;
    margin: 40px auto;
    padding: 0;
}

.talk-row {
    display: flex !important;
    align-items: flex-start;
    margin-bottom: 24px;
    gap: 20px;
}

.talk-speaker {
    flex-shrink: 0;
    text-align: center;
    width: 100px;
}

.talk-speaker img {
    display: block;
    width: 80px !important;
    height: 80px !important;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 8px;
    background-color: var(--color-gray-light);
}

/* .content-article を付けて特異度を上げ、.content-article p の margin(1.5em) 上書きを解消 */
.content-article .talk-speaker-name {
    font-size: 14px;
    font-weight: bold;
    color: var(--color-text);
    line-height: 1.4;
    margin: 0;
}

.talk-bubble {
    position: relative;
    background: var(--color-gray-light);
    border-radius: 15px;
    padding: 20px 25px;
    color: var(--color-text);
    flex-grow: 1;
    margin: 0;
}

/* 吹き出し内の段落の余白調整 */
.talk-bubble p {
    font-size: 16px;
    line-height: 1.8;
    margin: 0 0 1em 0;
}
.talk-bubble p:last-child {
    margin-bottom: 0;
}

.talk-bubble::before {
    content: "";
    position: absolute;
    top: 25px;
    left: -12px;
    border-style: solid;
    border-width: 10px 12px 10px 0;
    border-color: transparent var(--color-gray-light) transparent transparent;
}

.talk-row.reverse {
    flex-direction: row-reverse !important;
}

.talk-row.reverse .talk-bubble::before {
    left: auto;
    right: -12px;
    border-width: 10px 0 10px 12px;
    border-color: transparent transparent transparent var(--color-gray-light);
}

/* 7. モバイル対応（画面幅768px以下） */
@media only screen and (max-width: 768px) {
    .content-article .article-title {
        font-size: 24px;
        margin: 0 0 20px 0;
        padding-bottom: 15px;
    }
    .content-article .article-image {
        margin: 30px 0;
    }
    .content-article .article-video {
        margin: 30px 0;
    }
    .content-article h2 {
        font-size: 22px;
        margin: 40px 0 30px 0;
        padding-left: 16px;
    }
    .content-article h3 {
        font-size: 18px;
        margin: 40px 0 20px 0;
        padding-left: 24px;
    }
    .content-article p,
    .content-article ul,
    .content-article ol {
        font-size: 15px;
    }
    .talk-row {
        gap: 12px;
        margin-bottom: 16px;
    }
    .talk-speaker {
        width: 70px;
    }
    .talk-speaker img {
        width: 60px !important;
        height: 60px !important;
    }
    .talk-speaker-name {
        font-size: 12px;
    }
    .talk-bubble {
        padding: 15px;
    }
    .talk-bubble p {
        font-size: 15px;
    }
}

/* --- 装飾：黄色蛍光ペン（太字） --- */
.marker-yellow {
    background: linear-gradient(transparent 60%, #ffff00 60%);
    font-weight: bold;
    padding: 0 2px;
}