/* =========================================================
   AIと仏の教え
   general-column-ai-buddhism.php 専用
   既存CSSとの色競合を避けるため ai-buddhism-* で独立
   ========================================================= */


/* -------------------------
   ページ全体の中央配置リセット
   既存 style.css の body / main 指定の影響を避ける
   ------------------------- */

html,
body.ai-buddhism-body {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

body.ai-buddhism-body {
    overflow-x: hidden;
    background: #f7f5ef;
}

body.ai-buddhism-body > .ai-buddhism-page {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
    position: relative;
    left: auto !important;
    right: auto !important;
}

.ai-buddhism-page > section,
.ai-buddhism-page > .ai-buddhism-back {
    margin-left: auto !important;
    margin-right: auto !important;
}


.ai-buddhism-page {
    --ab-bg: #f7f5ef;
    --ab-paper: #ffffff;
    --ab-text: #292b2f;
    --ab-muted: #696b70;
    --ab-deep: #16232d;
    --ab-deep-2: #1f3440;
    --ab-gold: #a8843f;
    --ab-line: #d9d3c6;
    --ab-soft: #eee9dd;

    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0 0 80px;
    background: var(--ab-bg);
    color: var(--ab-text);
    font-family:
        -apple-system, BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN", "Yu Gothic",
        "Meiryo", sans-serif;
    line-height: 2;
}

.ai-buddhism-page *,
.ai-buddhism-page *::before,
.ai-buddhism-page *::after {
    box-sizing: border-box;
}

.ai-buddhism-page p {
    color: var(--ab-text);
}


/* -------------------------
   ヘッダー
   ------------------------- */

.ai-buddhism-header {
    position: relative;
    overflow: hidden;
    padding: 95px 24px 85px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 15%, rgba(255,255,255,.09), transparent 32%),
        linear-gradient(145deg, #101c24 0%, #1b303b 55%, #263f49 100%);
    color: #ffffff;
}

.ai-buddhism-header::before,
.ai-buddhism-header::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
}

.ai-buddhism-header::before {
    width: 360px;
    height: 360px;
    top: -190px;
    right: -120px;
}

.ai-buddhism-header::after {
    width: 500px;
    height: 500px;
    left: -270px;
    bottom: -340px;
}

.ai-buddhism-label {
    position: relative;
    z-index: 1;
    margin-bottom: 22px;
    color: #d6c18d;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .18em;
}

.ai-buddhism-header h1 {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #ffffff !important;
    font-size: clamp(38px, 7vw, 72px);
    line-height: 1.3;
    letter-spacing: .05em;
}

.ai-buddhism-header .subtitle {
    position: relative;
    z-index: 1;
    margin: 28px 0 0;
    color: #eef2f4 !important;
    font-size: clamp(18px, 3vw, 27px);
    font-weight: 500;
    line-height: 1.8;
}

.ai-buddhism-lead-icon {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 42px;
    color: #d9c28b;
    font-size: 20px;
}

.ai-buddhism-lead-icon span {
    display: block;
    width: 42px;
    height: 1px;
    background: rgba(255,255,255,.28);
}


/* -------------------------
   導入
   ------------------------- */

.ai-buddhism-intro,
.ai-buddhism-section,
.ai-buddhism-summary {
    width: min(920px, calc(100% - 36px));
    margin-left: auto;
    margin-right: auto;
}

.ai-buddhism-intro {
    margin-top: -28px;
    padding: 60px clamp(24px, 6vw, 72px);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 55px rgba(23, 37, 45, .10);
    position: relative;
    z-index: 2;
}

.ai-buddhism-intro p,
.ai-buddhism-section p,
.ai-buddhism-summary p {
    margin: 0 0 26px;
    font-size: 17px;
    line-height: 2.15;
}

.ai-buddhism-intro p:last-child,
.ai-buddhism-section p:last-child,
.ai-buddhism-summary p:last-child {
    margin-bottom: 0;
}

.ai-buddhism-question {
    margin: 38px 0;
    padding: 28px 28px;
    border-left: 5px solid var(--ab-gold);
    background: #f5f1e8;
    color: #26323a;
    font-size: clamp(19px, 3vw, 25px);
    font-weight: 700;
    line-height: 1.8;
}

.ai-buddhism-note {
    margin-top: 40px !important;
    padding-top: 22px;
    border-top: 1px solid #e2ddd2;
    color: #6c6d6f !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
}


/* -------------------------
   本文セクション
   ------------------------- */

.ai-buddhism-section {
    margin-top: 58px;
    padding: clamp(42px, 7vw, 72px);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 36px rgba(30, 39, 44, .06);
}

.ai-buddhism-section h2,
.ai-buddhism-summary h2 {
    margin: 4px 0 34px;
    color: #1d2d36 !important;
    font-size: clamp(27px, 4vw, 38px);
    line-height: 1.55;
    letter-spacing: .02em;
}

.section-kicker {
    color: var(--ab-gold);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .18em;
}


/* -------------------------
   四苦
   ------------------------- */

.four-sufferings {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 38px 0 42px;
}

.suffering-item {
    padding: 26px 12px 22px;
    border: 1px solid #e2ddd2;
    border-radius: 14px;
    text-align: center;
    background: #faf9f5;
}

.suffering-item i {
    display: block;
    margin-bottom: 13px;
    color: var(--ab-gold);
    font-size: 25px;
}

.suffering-item strong {
    display: block;
    color: #23343d;
    font-size: 27px;
}

.suffering-item span {
    display: block;
    margin-top: 4px;
    color: #77736b;
    font-size: 12px;
}


/* -------------------------
   引用・強調
   ------------------------- */

.ai-buddhism-quote {
    margin: 34px 0;
    padding: 28px 32px;
    border-top: 1px solid #d7d0c1;
    border-bottom: 1px solid #d7d0c1;
    color: #343638;
    font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: clamp(18px, 2.7vw, 23px);
    font-weight: 600;
    line-height: 2;
    text-align: center;
}

.ai-buddhism-emphasis {
    margin: 38px 0;
    padding: 28px 30px;
    border-radius: 14px;
    background: #1d313c;
    color: #ffffff !important;
    font-size: clamp(18px, 2.8vw, 23px);
    font-weight: 700;
    line-height: 1.9;
    text-align: center;
}

.ai-buddhism-emphasis.light {
    background: #f1e8d5;
    color: #26323a !important;
}


/* -------------------------
   ダークセクション
   ------------------------- */

.ai-buddhism-section.dark-section {
    background:
        radial-gradient(circle at 80% 10%, rgba(255,255,255,.05), transparent 25%),
        #17262f;
    color: #f4f5f5;
}

.ai-buddhism-section.dark-section h2 {
    color: #ffffff !important;
}

.ai-buddhism-section.dark-section p {
    color: #e8edf0 !important;
}

.ai-buddhism-section.dark-section .section-kicker {
    color: #d9c28b;
}

.ai-buddhism-section.dark-section .ai-buddhism-quote {
    color: #ffffff;
    border-color: rgba(255,255,255,.18);
}

.light-question {
    background: rgba(255,255,255,.09);
    border-left-color: #d9c28b;
    color: #ffffff;
}


/* -------------------------
   時間軸
   ------------------------- */

.time-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 42px 0;
    padding: 30px 12px;
    overflow-x: auto;
}

.time-line > i {
    color: #c2aa70;
    flex: 0 0 auto;
}

.time-node {
    min-width: 120px;
    padding: 18px 15px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: #ffffff;
    text-align: center;
    font-size: 13px;
    flex: 0 0 auto;
}

.time-node.final {
    border-color: #d9c28b;
    color: #e7d6ad;
}


/* -------------------------
   AI成立条件
   ------------------------- */

.condition-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 38px 0;
}

.condition-card {
    padding: 28px;
    border: 1px solid #dfd9cd;
    border-radius: 14px;
    background: #faf9f6;
}

.condition-card i {
    color: var(--ab-gold);
    font-size: 24px;
}

.condition-card strong {
    display: block;
    margin: 10px 0 4px;
    color: #22333c;
    font-size: 17px;
}

.condition-card span {
    color: #73716d;
    font-size: 13px;
}


/* -------------------------
   縁起
   ------------------------- */

.concept-section {
    background: #f5f1e6;
}

.engi-diagram {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 360px;
    margin: 30px 0 46px;
}

.engi-center {
    display: grid;
    place-items: center;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: #1c313b;
    color: #ffffff;
    box-shadow: 0 0 0 18px rgba(28,49,59,.06);
    z-index: 2;
}

.engi-center i {
    font-size: 25px;
}

.engi-center strong {
    font-size: 18px;
}

.engi-around {
    position: absolute;
    inset: 0;
}

.engi-around span {
    position: absolute;
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    border: 1px solid #d7c9a8;
    border-radius: 50%;
    background: #fffdf8;
    color: #554d3f;
    font-size: 13px;
    box-shadow: 0 6px 18px rgba(86,74,47,.06);
}

.engi-around span:nth-child(1) { top: 4%; left: 44%; }
.engi-around span:nth-child(2) { top: 18%; right: 15%; }
.engi-around span:nth-child(3) { top: 48%; right: 7%; }
.engi-around span:nth-child(4) { bottom: 5%; right: 25%; }
.engi-around span:nth-child(5) { bottom: 5%; left: 25%; }
.engi-around span:nth-child(6) { top: 48%; left: 7%; }
.engi-around span:nth-child(7) { top: 18%; left: 15%; }
.engi-around span:nth-child(8) { bottom: 0; left: 44%; }


/* -------------------------
   変化の流れ
   ------------------------- */

.change-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin: 42px 0;
    padding: 20px 0;
    overflow-x: auto;
}

.change-flow > div {
    min-width: 125px;
    padding: 23px 18px;
    border: 1px solid #ded8cc;
    border-radius: 14px;
    background: #faf9f6;
    text-align: center;
    flex: 0 0 auto;
}

.change-flow > div i {
    display: block;
    margin-bottom: 10px;
    color: var(--ab-gold);
    font-size: 24px;
}

.change-flow > div span {
    color: #2e3940;
    font-size: 13px;
    font-weight: 700;
}

.change-flow > i {
    color: #9d8c65;
    flex: 0 0 auto;
}

.ai-buddhism-big-message {
    margin: 44px 0 12px;
    padding: 42px 28px;
    border-radius: 16px;
    background: #eee9dc;
    color: #263139;
    font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: clamp(21px, 3.2vw, 29px);
    font-weight: 600;
    line-height: 2;
    text-align: center;
}


/* -------------------------
   無我
   ------------------------- */

.self-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 36px 0;
}

.self-grid div {
    padding: 20px 10px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 10px;
    color: #ffffff;
    text-align: center;
    background: rgba(255,255,255,.05);
}


/* -------------------------
   宇宙
   ------------------------- */

.cosmos-section {
    overflow: hidden;
    position: relative;
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,.08), transparent 2%),
        radial-gradient(circle at 73% 10%, rgba(255,255,255,.07), transparent 1.5%),
        radial-gradient(circle at 84% 64%, rgba(255,255,255,.08), transparent 1.2%),
        radial-gradient(circle at 40% 78%, rgba(255,255,255,.06), transparent 1.2%),
        linear-gradient(160deg, #111c23 0%, #1c2d37 100%);
    color: #ffffff;
}

.ai-buddhism-section.cosmos-section h2,
.ai-buddhism-section.cosmos-section p {
    color: #f0f4f5 !important;
}

.cosmos-section .section-kicker {
    color: #d8bd7d;
}

.cosmos-message {
    margin: 44px 0;
    padding: 44px 26px;
    border: 1px solid rgba(224,200,144,.38);
    border-radius: 16px;
    color: #ffffff;
    background: rgba(255,255,255,.035);
    font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: clamp(20px, 3vw, 28px);
    line-height: 2;
    text-align: center;
}


/* -------------------------
   まとめ
   ------------------------- */

.ai-buddhism-summary {
    margin-top: 64px;
    padding: clamp(50px, 8vw, 80px);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 42px rgba(30, 39, 44, .07);
}

.summary-label {
    margin-bottom: 5px !important;
    color: var(--ab-gold) !important;
    font-size: 12px !important;
    font-weight: 800;
    letter-spacing: .2em;
}

.final-chain {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 13px;
    margin: 40px 0;
    padding: 24px 15px;
    border-top: 1px solid #ded7c8;
    border-bottom: 1px solid #ded7c8;
    color: #38434a;
    font-weight: 700;
}

.final-chain i {
    color: var(--ab-gold);
}

.last-message {
    margin: 48px 0;
    padding: clamp(34px, 6vw, 54px) 24px;
    border-radius: 16px;
    background: #172a34;
    color: #ffffff !important;
    font-size: clamp(20px, 3.1vw, 28px);
    font-weight: 600;
    line-height: 2;
    text-align: center;
}

.last-message span {
    color: #ead8aa !important;
    font-size: 1.08em;
}

.final-paragraph {
    margin-top: 46px !important;
}


/* -------------------------
   戻るリンク
   ------------------------- */

.ai-buddhism-back {
    width: min(920px, calc(100% - 36px));
    margin: 42px auto 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.ai-buddhism-back a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 18px;
    border: 1px solid #d3cdc0;
    border-radius: 999px;
    background: #ffffff;
    color: #34424a !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.ai-buddhism-back a:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(31,45,53,.09);
}


/* -------------------------
   スマートフォン
   ------------------------- */

@media (max-width: 760px) {

    .ai-buddhism-header {
        padding: 72px 18px 68px;
    }

    .ai-buddhism-intro,
    .ai-buddhism-section,
    .ai-buddhism-summary {
        width: min(100% - 22px, 920px);
        padding: 34px 22px;
        border-radius: 13px;
    }

    .ai-buddhism-intro {
        margin-top: -18px;
    }

    .ai-buddhism-intro p,
    .ai-buddhism-section p,
    .ai-buddhism-summary p {
        font-size: 15.5px;
        line-height: 2;
    }

    .four-sufferings {
        grid-template-columns: repeat(2, 1fr);
    }

    .condition-grid {
        grid-template-columns: 1fr;
    }

    .self-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .engi-diagram {
        min-height: auto;
        display: block;
        padding: 8px 0;
    }

    .engi-center {
        margin: 0 auto 22px;
    }

    .engi-around {
        position: static;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .engi-around span,
    .engi-around span:nth-child(n) {
        position: static;
        width: auto;
        height: auto;
        min-height: 58px;
        border-radius: 10px;
    }

    .change-flow,
    .time-line {
        justify-content: flex-start;
    }

    .final-chain {
        flex-wrap: wrap;
    }

    .ai-buddhism-back {
        flex-direction: column;
    }

    .ai-buddhism-back a {
        justify-content: center;
    }
}