/* =========================================================
   さっぽろ学習会 Blog Article CSS
   File: /assets/css/blog-article.css

   方針:
   - 読みやすさ優先
   - 相談ノート型
   - 1記事1主役パーツ
   - 100記事手動運用向け共通CSS
   ========================================================= */


/* =========================================================
   0. Base Variables
   ========================================================= */

.blog-article-page {
    --article-accent: #F8A01A;
    --article-deep: #1A2D54;
    --article-soft: #FFF4DE;

    --paper: #fffdf8;
    --ink: #111111;
    --body: #394150;
    --muted: #7a8494;
    --line: rgba(26, 45, 84, 0.10);

    --shadow-soft: 0 18px 55px rgba(26, 45, 84, 0.08);
    --shadow-card: 0 12px 34px rgba(26, 45, 84, 0.065);

    color: var(--body);
}

.blog-article-page * {
    box-sizing: border-box;
}


/* =========================================================
   1. Shared Utilities
   ========================================================= */

.article-bg-blob {
    position: absolute;
    border-radius: 999px;
    filter: blur(72px);
    opacity: 0.26;
    pointer-events: none;
    z-index: 0;
}

.article-marker {
    display: inline;
    box-shadow: inset 0 -0.52em 0 rgba(248, 230, 202, 0.95);
    padding-bottom: 2px;
}

.article-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 999px;
    padding: 0.42rem 0.85rem;
    background: var(--article-soft);
    color: var(--article-accent);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}


/* =========================================================
   2. Compact Hero
   ========================================================= */

.article-hero--compact {
    position: relative;
    background:
        radial-gradient(circle at top right, rgba(248, 160, 26, 0.12), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 252, 246, 0.92));
    border: 1px solid rgba(26, 45, 84, 0.08);
    border-radius: 2rem;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.article-hero--compact::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(26, 45, 84, 0.032) 1px, transparent 1px);
    background-size: 100% 34px;
    opacity: 0.5;
    pointer-events: none;
}

.article-hero--compact::after {
    content: "";
    position: absolute;
    width: 78px;
    height: 26px;
    top: 22px;
    right: 28px;
    background: rgba(248, 210, 137, 0.58);
    transform: rotate(4deg);
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(120, 80, 20, 0.08);
}


/* =========================================================
   3. Layout
   ========================================================= */

.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.4rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .article-layout {
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 3rem;
    }
}

.article-paper {
    position: relative;
    background:
        linear-gradient(90deg, rgba(248, 160, 26, 0.07) 0 3px, transparent 3px 100%),
        linear-gradient(180deg, rgba(26, 45, 84, 0.028) 1px, transparent 1px),
        rgba(255, 255, 255, 0.92);
    background-size: 100% 100%, 100% 36px, 100% 100%;
    border: 1px solid rgba(26, 45, 84, 0.08);
    border-radius: 2rem;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.article-paper-inner {
    position: relative;
    z-index: 1;
    padding: 1.35rem;
}

@media (min-width: 768px) {
    .article-paper-inner {
        padding: 3rem;
    }
}

.article-opening-stack {
    display: grid;
    gap: 1.25rem;
    margin-bottom: 3rem;
}


/* =========================================================
   4. Callout Components
   ========================================================= */

.article-callout {
    position: relative;
    border-radius: 1.45rem;
    padding: 1.25rem;
    border: 1px solid rgba(26, 45, 84, 0.08);
    box-shadow: var(--shadow-card);
}

@media (min-width: 768px) {
    .article-callout {
        padding: 1.65rem;
    }
}

.article-callout--answer {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    background: linear-gradient(135deg, #eef8f5, #ffffff);
    border-color: rgba(13, 148, 136, 0.16);
}

.article-callout--empathy {
    background: linear-gradient(135deg, #fff8df, #fffef8);
    border-color: rgba(168, 113, 58, 0.16);
}

.article-callout--expert {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 1rem;
    margin: 2.3rem 0;
    background: linear-gradient(135deg, #f0faf7, #ffffff);
    border-color: rgba(13, 148, 136, 0.16);
}

.article-owl-avatar {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid rgba(13, 148, 136, 0.18);
    box-shadow: 0 10px 24px rgba(13, 148, 136, 0.12);
    font-size: 1.8rem;
}

.article-callout__label {
    display: inline-block;
    margin-bottom: 0.55rem;
    color: #0D9488;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.article-callout__title {
    margin: 0 0 0.55rem;
    color: var(--ink);
    font-family: 'Noto Serif JP', serif;
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1.7;
}

.article-callout__text {
    margin: 0;
    color: var(--body);
    font-size: 0.94rem;
    font-weight: 820;
    line-height: 1.9;
}

.article-callout--answer .article-callout__text {
    color: var(--ink);
    font-family: 'Noto Serif JP', serif;
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.85;
}

@media (min-width: 768px) {
    .article-callout--answer .article-callout__text {
        font-size: 1.22rem;
    }
}


/* =========================================================
   5. Empathy List
   ========================================================= */

.article-empathy-list {
    display: grid;
    gap: 0.62rem;
    margin: 0.9rem 0 0;
    padding: 0;
    list-style: none;
}

.article-empathy-list li {
    position: relative;
    padding-left: 1.6rem;
    color: #4d3d2d;
    font-size: 0.92rem;
    font-weight: 820;
    line-height: 1.75;
}

.article-empathy-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.1rem;
    display: grid;
    place-items: center;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 999px;
    background: var(--article-accent);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 900;
}


/* =========================================================
   6. Article Body
   ========================================================= */

.article-body {
    color: var(--body);
    font-weight: 760;
    line-height: 2.05;
    letter-spacing: 0.035em;
}

.article-section {
    scroll-margin-top: 7rem;
    margin-top: 3.8rem;
}

.article-section:first-child {
    margin-top: 0;
}

.article-body h2 {
    position: relative;
    display: grid;
    grid-template-columns: 2.9rem minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
    margin: 0 0 1.55rem;
    color: var(--ink);
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(1.38rem, 3.5vw, 2.15rem);
    font-weight: 900;
    line-height: 1.55;
    letter-spacing: 0.07em;
}

.article-body h2::before {
    content: attr(data-num);
    display: inline-grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 1rem;
    background: var(--article-accent);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    box-shadow: 0 12px 24px rgba(248, 160, 26, 0.22);
}

.article-body h3 {
    position: relative;
    margin: 2.3rem 0 1rem;
    padding-left: 1rem;
    color: var(--article-deep);
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(1.08rem, 2.4vw, 1.4rem);
    font-weight: 900;
    line-height: 1.65;
    letter-spacing: 0.06em;
}

.article-body h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 5px;
    height: 1.4em;
    border-radius: 999px;
    background: var(--article-accent);
}

.article-body p {
    margin: 0 0 1.4rem;
    font-size: 0.98rem;
}

@media (min-width: 768px) {
    .article-body p {
        font-size: 1.02rem;
    }
}


/* =========================================================
   7. Plain List
   ========================================================= */

.article-plain-list {
    margin: 1.3rem 0 1.8rem;
    padding: 1.15rem 1.2rem;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(26, 45, 84, 0.07);
    list-style: none;
}

.article-plain-list li {
    position: relative;
    padding-left: 1.3rem;
    margin-bottom: 0.65rem;
    font-size: 0.94rem;
    font-weight: 820;
    line-height: 1.8;
}

.article-plain-list li:last-child {
    margin-bottom: 0;
}

.article-plain-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: var(--article-accent);
}


/* =========================================================
   8. Steps Component
   用途: 方法・対策系記事の主役パーツ
   ========================================================= */

.article-steps {
    display: grid;
    gap: 0.95rem;
    margin: 1.8rem 0 2.2rem;
}

.article-step-card {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: 0.95rem;
    align-items: start;
    padding: 1.15rem;
    border-radius: 1.35rem;
    background: #fff;
    border: 1px solid rgba(26, 45, 84, 0.08);
    box-shadow: var(--shadow-card);
}

.article-step-card__num {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    background: var(--article-deep);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 900;
}

.article-step-card h3 {
    margin: 0 0 0.4rem;
    padding: 0;
    color: var(--ink);
    font-size: 1.05rem;
}

.article-step-card h3::before {
    display: none;
}

.article-step-card p {
    margin: 0;
    color: #687386;
    font-size: 0.9rem;
    line-height: 1.85;
    font-weight: 800;
}


/* =========================================================
   9. Checklist Component
   用途: 相談目安・確認項目
   ========================================================= */

.article-checklist {
    margin: 1.8rem 0 2.4rem;
    padding: 1.25rem;
    border-radius: 1.55rem;
    background: #fffdf8;
    border: 1px solid rgba(168, 113, 58, 0.16);
    box-shadow: var(--shadow-card);
}

.article-checklist__head {
    margin-bottom: 1rem;
}

.article-checklist__label {
    display: inline-block;
    margin-bottom: 0.45rem;
    color: var(--article-accent);
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.article-checklist__title {
    margin: 0;
    color: var(--ink);
    font-family: 'Noto Serif JP', serif;
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1.6;
}

.article-checklist ul {
    display: grid;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.article-checklist li {
    position: relative;
    padding: 0.8rem 0.9rem 0.8rem 2.75rem;
    border-radius: 0.95rem;
    background: #fff;
    border: 1px solid rgba(26, 45, 84, 0.07);
    color: #4b5563;
    font-size: 0.9rem;
    font-weight: 820;
    line-height: 1.7;
}

.article-checklist li::before {
    content: "✓";
    position: absolute;
    left: 1rem;
    top: 0.82rem;
    color: var(--article-accent);
    font-size: 1rem;
    font-weight: 900;
}


/* =========================================================
   10. Next Action Component
   用途: 今日からできること
   ========================================================= */

.article-next-action {
    scroll-margin-top: 7rem;
    margin-top: 3.8rem;
    padding: 1.45rem;
    border-radius: 1.8rem;
    background: linear-gradient(135deg, var(--article-deep), #263a58);
    color: #fff;
    box-shadow: 0 20px 52px rgba(26, 45, 84, 0.18);
}

@media (min-width: 768px) {
    .article-next-action {
        padding: 2rem;
    }
}

.article-next-action h2 {
    display: block;
    margin: 0 0 1.1rem;
    color: #fff;
    font-size: clamp(1.38rem, 3vw, 2rem);
}

.article-next-action h2::before {
    display: none;
}

.article-next-action p {
    color: rgba(255, 255, 255, 0.86);
}

.article-action-list {
    display: grid;
    gap: 0.65rem;
    margin: 1.3rem 0 0;
    padding: 0;
    list-style: none;
}

.article-action-list li {
    position: relative;
    padding: 0.82rem 0.9rem 0.82rem 2.55rem;
    border-radius: 0.95rem;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 820;
    line-height: 1.7;
}

.article-action-list li::before {
    content: "✓";
    position: absolute;
    left: 0.95rem;
    top: 0.85rem;
    color: #F8A01A;
    font-weight: 900;
}


/* =========================================================
   11. Optional TOC Component
   用途: 長め記事・制度解説系だけ
   ========================================================= */

.article-toc {
    margin: 1.6rem 0 2.4rem;
    padding: 1.2rem;
    border-radius: 1.35rem;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(26, 45, 84, 0.08);
    box-shadow: var(--shadow-card);
}

.article-toc__label {
    display: block;
    margin-bottom: 0.8rem;
    color: var(--article-accent);
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.article-toc ol {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.article-toc a {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.6rem;
    align-items: start;
    padding: 0.6rem 0.7rem;
    border-radius: 0.9rem;
    color: #394150;
    font-size: 0.88rem;
    font-weight: 820;
    line-height: 1.6;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.25s ease, color 0.25s ease;
}

.article-toc a:hover {
    background: var(--article-soft);
    color: var(--article-deep);
    transform: translateX(3px);
}

.article-toc__num {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--article-soft);
    color: var(--article-accent);
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 900;
}


/* =========================================================
   12. Optional Cause Grid
   用途: 原因解説系記事の主役パーツ
   ========================================================= */

.article-grid--cause {
    display: grid;
    gap: 0.9rem;
    margin: 1.8rem 0 2.2rem;
}

@media (min-width: 768px) {
    .article-grid--cause {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.article-cause-card {
    position: relative;
    padding: 1.15rem;
    border-radius: 1.25rem;
    background: #fff;
    border: 1px solid rgba(26, 45, 84, 0.08);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.article-cause-card::after {
    content: "";
    position: absolute;
    right: -24px;
    bottom: -24px;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--article-soft);
    opacity: 0.82;
}

.article-cause-card__icon {
    position: relative;
    z-index: 1;
    display: inline-grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    margin-bottom: 0.8rem;
    border-radius: 0.9rem;
    background: var(--article-soft);
    color: var(--article-accent);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 900;
}

.article-cause-card h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 0.45rem;
    padding: 0;
    color: var(--ink);
    font-size: 1rem;
}

.article-cause-card h3::before {
    display: none;
}

.article-cause-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #687386;
    font-size: 0.88rem;
    line-height: 1.8;
    font-weight: 800;
}


/* =========================================================
   13. Optional OK/NG Compare
   用途: 声かけ・保護者対応系記事
   ========================================================= */

.article-compare--okng {
    display: grid;
    gap: 0.8rem;
    margin: 1.8rem 0 2.2rem;
}

.article-compare-row {
    display: grid;
    gap: 0.7rem;
}

@media (min-width: 768px) {
    .article-compare-row {
        grid-template-columns: 1fr 1fr;
    }
}

.article-compare-cell {
    position: relative;
    min-height: 100%;
    padding: 0.95rem 0.95rem 0.95rem 2.8rem;
    border-radius: 1.15rem;
    font-size: 0.9rem;
    font-weight: 820;
    line-height: 1.75;
}

.article-compare-cell::before {
    position: absolute;
    left: 0.95rem;
    top: 0.95rem;
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
}

.article-compare-cell--ng {
    background: #eff4fb;
    border: 1px solid rgba(26, 45, 84, 0.1);
    color: #435064;
}

.article-compare-cell--ng::before {
    content: "×";
    background: #64748b;
}

.article-compare-cell--ok {
    background: #fff4de;
    border: 1px solid rgba(248, 160, 26, 0.18);
    color: #4d3d2d;
}

.article-compare-cell--ok::before {
    content: "○";
    background: var(--article-accent);
}


/* =========================================================
   14. Sidebar
   ========================================================= */

.article-sidebar {
    position: sticky;
    top: 7rem;
}

.article-side-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(26, 45, 84, 0.08);
    border-radius: 1.45rem;
    padding: 1.25rem;
    box-shadow: var(--shadow-card);
}

.article-side-label {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--article-accent);
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.article-side-link {
    display: block;
    padding: 0.68rem 0;
    border-bottom: 1px dashed rgba(26, 45, 84, 0.12);
    color: #4b5563;
    font-size: 0.84rem;
    font-weight: 820;
    line-height: 1.65;
    text-decoration: none;
    transition: color 0.25s ease, transform 0.25s ease;
}

.article-side-link:last-child {
    border-bottom: 0;
}

.article-side-link:hover {
    color: var(--article-accent);
    transform: translateX(3px);
}


/* =========================================================
   15. Related Articles
   ========================================================= */

.related-post-card {
    display: block;
    min-height: 100%;
    padding: 1.25rem;
    border-radius: 1.45rem;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(26, 45, 84, 0.08);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 58px rgba(26, 45, 84, 0.12);
}

.related-post-card__tag {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.9rem;
    border-radius: 999px;
    padding: 0.34rem 0.72rem;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.related-post-card h3 {
    margin: 0 0 0.72rem;
    color: var(--ink);
    font-family: 'Noto Serif JP', serif;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.65;
}

.related-post-card p {
    margin: 0 0 0.9rem;
    color: #687386;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.8;
}


/* =========================================================
   16. Final CTA
   ========================================================= */

.article-cta--final {
    position: relative;
    overflow: hidden;
    border-radius: 2.2rem;
    background: linear-gradient(135deg, #1C2B3E, #263a58);
    box-shadow: 0 22px 70px rgba(26, 45, 84, 0.23);
}

@media (min-width: 768px) {
    .article-cta--final {
        border-radius: 3.5rem;
    }
}

.article-cta--final::before {
    content: "";
    position: absolute;
    right: -70px;
    top: -70px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(248, 160, 26, 0.2);
    filter: blur(3px);
}

.article-cta--final::after {
    content: "";
    position: absolute;
    left: -90px;
    bottom: -90px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(13, 148, 136, 0.18);
    filter: blur(3px);
}


/* =========================================================
   17. Responsive Adjustments
   ========================================================= */

@media (max-width: 767px) {
    .article-hero--compact,
    .article-paper {
        border-radius: 1.7rem;
    }

    .article-body h2 {
        grid-template-columns: 2.65rem minmax(0, 1fr);
        gap: 0.72rem;
    }

    .article-body h2::before {
        width: 2.65rem;
        height: 2.65rem;
        border-radius: 0.9rem;
        font-size: 0.74rem;
    }

    .article-callout--answer,
    .article-callout--expert {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .article-owl-avatar {
        width: 48px;
        height: 48px;
        font-size: 1.55rem;
    }

    .article-step-card {
        grid-template-columns: 3rem minmax(0, 1fr);
        gap: 0.85rem;
    }

    .article-step-card__num {
        width: 3rem;
        height: 3rem;
        border-radius: 0.9rem;
        font-size: 0.82rem;
    }
}