/* ===== わぎりおくら数秘術 共通スタイル ===== */

:root {
    --bg: #f7f3e8;
    --green: #6a9e5e;
    --green-light: #8cb87e;
    --green-pale: #d4e6c8;
    --green-dark: #4a7a3e;
    --text: #2e3d24;
    --text-sub: #556647;
    --white: #fff;
    --card-bg: rgba(255,255,255,0.72);
    --gold: #b89840;
    --karma: #c47a3a;
    --master: #7a5ab8;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scrollbar-gutter: stable;
}

body {
    font-family: 'Zen Maru Gothic', sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    min-height: 100vh;
    font-size: 27.8px;
}

.page-bg {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    background-image: url('../img/bg-03.webp');
    background-size: cover;
    background-position: center;
    opacity: 0.35;
}

/* ===== NAV =====（body直下のグローバルナビだけに限定。
   .article-toc / .col-side-nav / .col-cat-chips / .article-foot-nav 等の
   コンテンツ内 <nav> に影響しないよう、body > nav にスコープ） */
body > nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 14px 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* ナビバー両端は完全に透明にして、外皮（body::before/::after）の緑がそのまま透ける。
       中央のみ半透明クリームを描画する。これで外皮が画面全体を貫通し、ナビ部と本文部で
       緑の濃さ・位置が完全に同一になる。 */
    background: linear-gradient(to right,
        transparent 0px,
        transparent 60px,
        rgba(247,243,232,0.88) 60px,
        rgba(247,243,232,0.88) calc(100% - 60px),
        transparent calc(100% - 60px),
        transparent 100%);
}
@media (max-width: 768px) {
    body > nav {
        padding: 14px 32px;
        background: linear-gradient(to right,
            var(--green) 0%,
            rgba(106,158,94,0.7) 8px,
            rgba(247,243,232,0.88) 24px,
            rgba(247,243,232,0.88) calc(100% - 24px),
            rgba(106,158,94,0.7) calc(100% - 8px),
            var(--green) 100%);
    }
}

.nav-logo {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--green);
    white-space: nowrap;
    letter-spacing: 0.08em;
}

.nav-links {
    display: flex;
    gap: 40px;
    list-style: none;
}

.nav-links a {
    color: var(--text-sub);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 6px 16px;
    border-radius: 999px;
    border: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.25s, border-color 0.25s;
}

.nav-links a:hover {
    color: var(--green-dark);
    border-color: var(--green);
    background: transparent;
}

/* ナビ内のLINEリンクは、サイト共通の黄色種ボタン */
.nav-links a[href*="lin.ee"] {
    background: #f3e29a;
    color: var(--green-dark);
    border: 2px solid var(--green);
    padding: 6px 16px;
    border-radius: 999px;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.nav-links a[href*="lin.ee"]:hover {
    background: #ead87f;
    color: var(--green-dark);
    border-color: var(--green);
    transform: translateY(-1px);
}

/* ハンバーガーボタン（PC非表示） */
.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 110;
}
.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--green);
    margin: 5px 0;
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active span:nth-child(2) {
    opacity: 0;
}
.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ===== HERO = CALCULATOR ===== */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 80px 20px 0;
}

.hero-character {
    width: 110px;
    height: auto;
    margin-bottom: 10px;
    animation: bounce 4s ease-in-out infinite;
    filter: drop-shadow(0 8px 16px rgba(106,158,94,0.12));
}

@keyframes bounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-8px) rotate(-2deg); }
    75% { transform: translateY(-4px) rotate(2deg); }
}

.hero h1 {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--green-dark);
    letter-spacing: 0.12em;
    margin-bottom: 4px;
}

.hero-sub {
    font-size: 0.95rem;
    color: var(--text-sub);
    margin-bottom: 20px;
}

/* ===== CALC CARD ===== */
.calc-card {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(14px);
    border-radius: 28px;
    padding: 36px 32px;
    /* オクラの断面：外皮（緑の太い線）→ 内側にじわっと緑がしみ込む */
    border: 3px solid var(--green);
    box-shadow: inset 0 0 60px rgba(106,158,94,0.35), 0 12px 40px rgba(74,122,62,0.06);
    width: 100%;
    max-width: 520px;
    position: relative;
    overflow: hidden;
}
/* 中央装飾：5方向の薄緑楕円（オクラの種の部屋） */
.calc-card::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    height: 95%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%236a9e5e' fill-opacity='0.08'><ellipse cx='50' cy='22' rx='12' ry='22'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(72 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(144 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(216 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(288 50 50)'/></g></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 0;
}
.calc-card > * {
    position: relative;
    z-index: 1;
}

.calc-card h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--green);
    margin-bottom: 20px;
    letter-spacing: 0.06em;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.input-label {
    font-size: 0.88rem;
    color: var(--text-sub);
    text-align: left;
    margin-bottom: 4px;
    padding-left: 4px;
}

.name-inputs {
    display: flex;
    justify-content: center;
    gap: 12px;
    align-items: flex-start;
}

.name-field {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.name-field input {
    width: 100%;
}

.input-note {
    font-size: 0.82rem;
    color: var(--karma);
    text-align: left;
    padding-left: 4px;
    margin-top: -4px;
}

.date-inputs {
    display: flex;
    justify-content: center;
    gap: 8px;
    align-items: center;
}

.date-inputs span {
    color: var(--text-sub);
    font-size: 1rem;
    font-weight: 500;
}

input[type="number"], input[type="text"] {
    padding: 12px 14px;
    border: 2px solid var(--green-pale);
    border-radius: 14px;
    font-size: 1rem;
    text-align: center;
    /* オクラの種色（calc-card内のフォームは「種を入れる場所」）— ボタンより薄め */
    background: #faf0c8;
    color: var(--text);
    font-family: 'Zen Maru Gothic', sans-serif;
    transition: border-color 0.3s, box-shadow 0.3s;
    outline: none;
}

input:focus {
    border-color: var(--green-light);
    box-shadow: 0 0 0 3px rgba(106,158,94,0.12);
}

input::placeholder { color: #b8c8a8; }

.year-input, .month-day-input { width: 110px; }

.btn {
    /* カードの中のボタンは種色（黄）— 外のボタン（ナビ・追従）は緑のまま */
    background: #f3e29a;
    color: var(--green-dark);
    border: 1.5px solid var(--green);
    padding: 14px 48px;
    font-size: 1.05rem;
    font-weight: 700;
    font-family: 'Zen Maru Gothic', sans-serif;
    border-radius: 50px;
    cursor: pointer;
    letter-spacing: 0.08em;
    transition: all 0.3s;
}

.btn:hover {
    transform: translateY(-2px);
    background: #ead78a;
    border-color: var(--green-dark);
}

.btn:active { transform: translateY(0); }

/* ===== RESULT ===== */
#result {
    display: none;
    margin-top: 32px;
    animation: fadeIn 0.7s ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.result-row {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.result-card {
    flex: 1;
    max-width: 160px;
    background: rgba(255,255,255,0.6);
    border-radius: 20px;
    padding: 20px 12px 16px;
    border: 1px solid rgba(106,158,94,0.1);
    text-align: center;
}

.result-card-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--green);
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.result-card img {
    width: 80px;
    height: auto;
    display: block;
    margin: 0 auto 6px;
    filter: drop-shadow(0 4px 8px rgba(106,158,94,0.1));
}

.result-card .num {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--green);
    line-height: 1.2;
    white-space: nowrap;
}

.result-card .num-slash {
    font-size: 1.2rem;
    font-weight: 400;
    opacity: 0.5;
}

.result-card .num.is-master {
    color: var(--master);
}

.result-card .num.is-karma {
    color: var(--karma);
}

.result-card .keyword {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-sub);
    margin-top: 4px;
}

/* Badge for Master / Karma */
.badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 4px;
    letter-spacing: 0.04em;
}

.badge-master {
    background: rgba(122,90,184,0.12);
    color: var(--master);
}

.badge-karma {
    background: rgba(196,122,58,0.12);
    color: var(--karma);
}

/* Result description */
.result-desc {
    margin-top: 24px;
    font-size: 0.95rem;
    color: var(--text-sub);
    line-height: 1.8;
    text-align: left;
    padding: 16px 20px;
    background: rgba(255,255,255,0.4);
    border-radius: 16px;
}

.result-desc h4 {
    font-size: 0.95rem;
    color: var(--green-dark);
    margin-bottom: 6px;
}

.result-desc p {
    margin-bottom: 12px;
}

.result-desc p:last-child {
    margin-bottom: 0;
}

.result-cta {
    margin-top: 24px;
    padding: 20px;
    background: var(--green-pale);
    border-radius: 12px;
    text-align: center;
}
.result-cta p {
    margin-bottom: 12px;
    font-weight: 500;
    color: var(--text);
}
.result-cta .btn-outline {
    display: inline-block;
    margin-top: 0;
}

/* ===== SECTION COMMON ===== */
.section-wrap {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px 24px;
    text-align: center;
}

.section-label {
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    color: var(--green-light);
    text-transform: uppercase;
    margin-bottom: 12px;
    font-weight: 500;
}

.section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--green-dark);
    letter-spacing: 0.1em;
    margin-bottom: 32px;
}

.divider {
    width: 60px;
    height: 3px;
    background: var(--green-pale);
    border-radius: 2px;
    margin: 0 auto;
}

/* ===== NOTE導線（ホームの1枚カード）===== */
.note-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 520px;
    margin: 0 auto;
    padding: 28px 28px 32px;
    background: rgba(255,255,255,0.85);
    border-radius: 18px;
    text-decoration: none;
    color: inherit;
    /* オクラの断面：外皮（緑の太い線）→ 内側にじわっと緑のしみ */
    border: 3px solid var(--green);
    box-shadow: inset 0 0 60px rgba(106,158,94,0.35);
    transition: all 0.25s;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.note-banner::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    height: 95%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%236a9e5e' fill-opacity='0.08'><ellipse cx='50' cy='22' rx='12' ry='22'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(72 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(144 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(216 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(288 50 50)'/></g></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 0;
}
.note-banner > * {
    position: relative;
    z-index: 1;
}
.note-banner:hover {
    background: rgba(255,255,255,0.92);
    box-shadow: inset 0 0 60px rgba(106,158,94,0.4), 0 6px 18px rgba(106,158,94,0.2);
    transform: translateY(-2px);
}
.note-banner-eyebrow {
    font-size: 0.78rem;
    color: var(--green);
    letter-spacing: 0.14em;
    margin: 0 0 8px;
}
.note-banner-title {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--green-dark);
    letter-spacing: 0.06em;
    margin: 0 0 16px;
}
.note-banner-img {
    width: 100%;
    max-width: 320px;
    border-radius: 14px;
    margin: 0 0 18px;
}
.note-banner-sub {
    font-size: 0.85rem;
    color: var(--text-sub);
    line-height: 1.85;
    margin: 0 0 20px;
}
.note-banner-cta {
    display: inline-block;
    padding: 10px 26px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    background: #f3e29a;
    color: var(--green-dark);
    border: 2px solid var(--green);
    letter-spacing: 0.06em;
    transition: all 0.3s;
}
.note-banner:hover .note-banner-cta {
    background: #ead87f;
    color: var(--green-dark);
    border-color: var(--green);
}

/* ===== VOICES (お客様の声) ===== */
/* おくらの断面：みどりのふちどりに、上下を中央でくっとくびれさせた輪切りのイメージ */
.voices {
    max-width: 520px;
    margin: 0 auto;
}
.voice-card {
    position: relative;
    background: rgba(255,255,255,0.85);
    border-radius: 28px;
    padding: 36px 40px 32px;
    margin: 28px 0;
    line-height: 1.95;
    color: var(--text);
    font-size: 0.95rem;
    text-align: left;
    /* オクラの断面：外皮（緑の太い線）→ 内側にじわっと緑のしみ */
    border: 3px solid var(--green);
    box-shadow: inset 0 0 60px rgba(106,158,94,0.35), 0 8px 24px rgba(106,158,94,0.08);
    overflow: hidden;
}
/* 上部の小さな星マークは廃止（中央の楕円装飾に統一） */
.voice-card::before {
    display: none;
}
/* 中央装飾：5方向の薄緑楕円（オクラの種の部屋）— ::after に置いて星マークと両立 */
.voice-card::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    height: 95%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%236a9e5e' fill-opacity='0.08'><ellipse cx='50' cy='22' rx='12' ry='22'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(72 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(144 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(216 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(288 50 50)'/></g></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 0;
}
.voice-card > * {
    position: relative;
    z-index: 1;
}
.voice-card-body {
    margin: 0;
}
.voice-card-author {
    display: block;
    margin-top: 18px;
    font-size: 0.85rem;
    color: var(--green-dark);
    text-align: right;
    letter-spacing: 0.04em;
}
@media (max-width: 720px) {
    .voice-card { padding: 30px 22px 26px; border-radius: 22px; }
    .voice-card::before { top: -12px; width: 24px; height: 24px; line-height: 24px; font-size: 0.75rem; }
}

/* ===== LINE CTA ===== */
/* フッターのLINEリンク：サイトの緑トーンで馴染ませる */
.footer-links a.footer-line {
    color: var(--green-dark);
    font-weight: 700;
}
/* 全頁右下に追従するフローティングボタン */
.line-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px 10px 10px;
    background: var(--green);
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    box-shadow: 0 6px 18px rgba(74,122,62,0.25);
    transition: all 0.2s;
}
.line-float:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(74,122,62,0.35);
    background: var(--green-dark);
}
/* LINEのロゴSVGは隠して、代わりにおくらのアイコンを丸く表示 */
.line-float svg {
    display: none;
}
.line-float::before {
    content: "";
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff url("/img/okura-icon.webp") center/cover no-repeat;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.line-float-text {
    display: inline-block;
    line-height: 1.2;
    font-size: 1rem;
    letter-spacing: 0.12em;
    text-indent: 0.12em; /* letter-spacing で右に偏る分を相殺 */
}
.line-float-text small {
    display: block;
    font-size: 0.6rem;
    font-weight: 500;
    opacity: 0.9;
    letter-spacing: 0.08em;
    text-indent: 0;
    margin-top: 3px;
}
@media (max-width: 480px) {
    .line-float {
        right: 14px;
        bottom: 14px;
        padding: 10px 14px 10px 12px;
        font-size: 0.78rem;
    }
    .line-float svg { width: 20px; height: 20px; }
}

/* ===== TRIAL (legacy) ===== */
.price-card {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    padding: 40px 36px;
    border-radius: 28px;
    border: 1px solid rgba(106,158,94,0.1);
    box-shadow: 0 10px 30px rgba(74,122,62,0.05);
    display: inline-block;
    max-width: 340px;
    width: 100%;
}

.price-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--green-dark);
    margin-bottom: 16px;
}

.price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.04em;
}

.price-desc {
    font-size: 0.8rem;
    color: var(--text-sub);
    margin: 16px 0 24px;
    line-height: 1.8;
}

/* ===== PROFILE ===== */
.profile-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid var(--green-pale);
    margin-bottom: 20px;
    object-fit: cover;
    background: var(--white);
}

.profile-text {
    max-width: 520px;
    margin: 0 auto;
    line-height: 2.2;
    text-align: center;
    font-size: 1rem;
    color: var(--text-sub);
}

.note-link { margin-top: 36px; }

.note-link p {
    font-size: 0.78rem;
    color: var(--text-sub);
    margin-bottom: 14px;
}

.btn-outline {
    background: transparent;
    color: var(--green);
    border: 2px solid var(--green-pale);
    padding: 12px 36px;
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Zen Maru Gothic', sans-serif;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-block;
}

.btn-outline:hover {
    background: var(--green);
    color: var(--white);
    border-color: var(--green);
}

.rainbow-section { position: relative; overflow: hidden; }

footer {
    padding: 48px 24px;
    text-align: center;
}

footer small {
    color: var(--text-sub);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
}

.footer-links {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.footer-links a {
    color: var(--text-sub);
    font-size: 0.75rem;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--green);
}

.fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
    /* ハンバーガー表示 */
    .hamburger { display: block; }

    .nav-links {
        display: none;
        flex-direction: column;
        position: fixed;
        top: 0; right: 0;
        width: 200px;
        height: 100vh;
        background: rgba(247,243,232,0.97);
        backdrop-filter: blur(16px);
        padding: 80px 28px 40px;
        gap: 0;
        box-shadow: -4px 0 20px rgba(0,0,0,0.08);
    }
    .nav-links.open { display: flex; }
    .nav-links li { border-bottom: 1px solid var(--green-pale); }
    .nav-links a {
        font-size: 0.9rem;
        display: block;
        padding: 14px 4px;
        border-radius: 0;
        border: none;
        background: transparent;
        color: var(--text-sub);
    }
    .nav-links a:hover {
        background: rgba(106,158,94,0.08);
        border: none;
        color: var(--green-dark);
    }
    .nav-links a[href*="lin.ee"] {
        background: transparent;
        color: var(--green-dark);
        border: none;
        border-radius: 0;
        padding: 14px 4px;
        transform: none;
    }
    .nav-links a[href*="lin.ee"]:hover {
        background: rgba(106,158,94,0.08);
        border: none;
        color: var(--green-dark);
        transform: none;
    }

    /* オーバーレイ */
    .nav-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0,0,0,0.3);
        z-index: 99;
    }
    .nav-overlay.open { display: block; }

    body > nav { padding: 12px 16px; }
    .hero { padding: 72px 16px 28px; }
    .hero h1 { font-size: 1.15rem; }
    .hero-character { width: 80px; }
    .calc-card { padding: 28px 20px; border-radius: 22px; }
    .name-inputs { gap: 8px; }
    .name-field .input-label { font-size: 0.65rem; }
    .year-input, .month-day-input { width: 80px; }
    .note-banner { padding: 24px 20px 28px; }
    .note-banner-img { max-width: 260px; }
    .result-row { gap: 8px; }
    .result-card { padding: 14px 8px 12px; border-radius: 16px; }
    .result-card img { width: 56px; }
    .result-card .num { font-size: 1.5rem; }
    .result-card-label { font-size: 0.6rem; }
    .section-wrap { padding: 60px 16px; }
    .price-card { padding: 32px 24px; }
}

/* ============================================================
   PAGE-SPECIFIC STYLES（各HTMLの <style> ブロックから集約）
   2026-05-14 統合：HTMLからの <style> 削除と合わせて運用
   ============================================================ */

/* ===== Column article（共通：about/birth/destiny/expression/personality/heart/number/trisetsu 等）===== */
.column-article {
    max-width: 720px;
    margin: 0 auto;
    padding: 120px 24px 40px;
}
.column-article .breadcrumb {
    font-size: 0.78rem;
    color: var(--text-sub);
    margin-bottom: 24px;
    text-align: center;
}
.column-article .breadcrumb a {
    color: var(--green);
    text-decoration: none;
}
.column-article .breadcrumb a:hover {
    text-decoration: underline;
}
.column-article h1.article-title {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--green-dark);
    text-align: center;
    margin-bottom: 12px;
    letter-spacing: 0.12em;
    line-height: 1.5;
}
.column-article .article-sub {
    font-size: 0.92rem;
    color: var(--text-sub);
    text-align: center;
    line-height: 1.9;
    margin-bottom: 48px;
}
.column-body {
    font-size: 0.95rem;
    color: var(--text);
    line-height: 2.1;
}
.column-body h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--green);
    margin: 48px 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--green-pale);
}
.column-body h3 {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--green-dark);
    margin: 32px 0 12px;
}
.column-body p {
    margin: 0 0 1.4em;
}
.column-body ul, .column-body ol {
    padding-left: 1.6em;
    margin: 0 0 1.4em;
}
.column-body li {
    margin-bottom: 0.4em;
}
.column-body strong {
    color: var(--green-dark);
    font-weight: 700;
}
.column-body a {
    color: var(--green);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.column-body a:hover {
    opacity: 0.75;
}
.column-body blockquote {
    margin: 1.4em 0;
    padding: 12px 20px;
    border-left: 3px solid var(--green-pale);
    background: rgba(255,255,255,0.5);
    border-radius: 0 12px 12px 0;
    color: var(--text-sub);
    font-size: 0.92rem;
}
.column-body blockquote p {
    margin: 0;
}
.column-body hr {
    border: 0;
    border-top: 1px dashed var(--green-pale);
    margin: 40px 0;
}
/* about-X 系の補足注釈（小さく薄く、上のリストに寄せる）*/
.column-supplement {
    font-size: 0.85rem;
    color: var(--text-sub);
    margin-top: -1em;
}
.column-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.4em 0;
    font-size: 0.88rem;
}
.column-body th, .column-body td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--green-pale);
    text-align: left;
}
.column-body th {
    background: rgba(255,255,255,0.4);
    color: var(--green-dark);
    font-weight: 700;
}
.column-body code {
    background: rgba(255,255,255,0.6);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}
.column-cta {
    position: relative;
    margin: 48px auto 0;
    padding: 28px 24px;
    background: rgba(255,255,255,0.85);
    border: 2px solid var(--green);
    border-radius: 18px;
    text-align: center;
    max-width: 520px;
    box-shadow: inset 0 0 40px rgba(106,158,94,0.18);
    overflow: hidden;
}
.column-cta::before {
    content: '';
    position: absolute;
    right: -22px;
    bottom: -22px;
    width: 90px;
    height: 90px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%236a9e5e' fill-opacity='0.12'><ellipse cx='50' cy='22' rx='12' ry='22'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(72 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(144 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(216 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(288 50 50)'/></g></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}
.column-cta p,
.column-cta .btn-outline {
    position: relative;
    z-index: 1;
}
.column-cta p {
    font-size: 0.88rem;
    color: var(--text-sub);
    margin-bottom: 16px;
}
.column-cta .btn-outline {
    display: inline-block;
    padding: 10px 24px;
    background: #f3e29a;
    border: 2px solid var(--green);
    color: var(--green-dark);
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    transition: background 0.2s, transform 0.15s;
}
.column-cta .btn-outline:hover {
    background: #ead87f;
    transform: translateY(-1px);
    color: var(--green-dark);
    border-color: var(--green);
}
.article-foot-nav {
    text-align: center;
    margin-top: 32px;
}
.article-foot-nav a {
    color: var(--green);
    text-decoration: none;
    font-size: 0.88rem;
}
.article-foot-nav a:hover {
    text-decoration: underline;
}

/* ===== Number card grid（about-heart, about-personality 等）===== */
.number-card-grid,
.position-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin: 1.4em 0 2em;
}
.number-card-grid a,
.position-grid a {
    position: relative;
    display: block;
    padding: 18px 16px;
    background: rgba(255,255,255,0.85);
    border: 2px solid var(--green);
    border-radius: 14px;
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.6;
    box-shadow: inset 0 0 28px rgba(106,158,94,0.18);
    overflow: hidden;
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}
.number-card-grid a::before,
.position-grid a::before {
    content: '';
    position: absolute;
    right: -16px;
    bottom: -16px;
    width: 64px;
    height: 64px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%236a9e5e' fill-opacity='0.10'><ellipse cx='50' cy='22' rx='12' ry='22'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(72 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(144 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(216 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(288 50 50)'/></g></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}
.number-card-grid a:hover,
.position-grid a:hover {
    background: rgba(255,255,255,0.95);
    box-shadow: inset 0 0 28px rgba(106,158,94,0.28);
    transform: translateY(-2px);
}
.number-card-grid a strong,
.position-grid a strong {
    position: relative;
    z-index: 1;
    display: block;
    color: var(--green-dark);
    font-size: 1.05rem;
    margin-bottom: 4px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding-left: 10px;
    border-left: 4px solid #f3e29a;
}
.number-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 8px;
    margin: 1.4em 0 2em;
}
.number-grid a {
    display: block;
    padding: 10px 0;
    text-align: center;
    background: rgba(255,255,255,0.85);
    border: 1.5px solid var(--green);
    border-radius: 10px;
    color: var(--green-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: inset 0 0 16px rgba(106,158,94,0.18);
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.number-grid a:hover {
    background: rgba(255,255,255,0.95);
    box-shadow: inset 0 0 16px rgba(106,158,94,0.32);
    transform: translateY(-1px);
}
.number-grid a.is-master {
    color: var(--green);
}
.number-grid a.is-karma {
    color: var(--text-sub);
}

/* ===== Number pager / related links（birth-X, destiny-X 等）===== */
.related-links {
    position: relative;
    margin: 1.4em 0 2em;
    padding: 20px 22px;
    background: rgba(255,255,255,0.85);
    border: 2px solid var(--green);
    border-radius: 14px;
    box-shadow: inset 0 0 28px rgba(106,158,94,0.15);
    overflow: hidden;
}
.related-links::before {
    content: '';
    position: absolute;
    right: -16px;
    bottom: -16px;
    width: 64px;
    height: 64px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%236a9e5e' fill-opacity='0.10'><ellipse cx='50' cy='22' rx='12' ry='22'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(72 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(144 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(216 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(288 50 50)'/></g></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}
.related-links > * {
    position: relative;
    z-index: 1;
}
.related-links p {
    margin: 0 0 0.6em;
    font-size: 0.85rem;
    color: var(--text-sub);
}
.related-links ul {
    margin: 0;
    padding-left: 1.4em;
    font-size: 0.92rem;
}
.related-links li {
    margin-bottom: 0.3em;
}
.number-pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2em 0;
    font-size: 0.88rem;
}
.number-pager a {
    color: var(--green);
    text-decoration: none;
}
.number-pager a:hover {
    text-decoration: underline;
}

/* ===== Keyword line（trisetsu-X-Y）===== */
.keyword-line {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-sub);
    margin: 8px 0 4px;
    letter-spacing: 0.1em;
}

/* ===== Core three / Next cards（about-numerology）===== */
.core-three {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 1.4em 0 2em;
}
.core-three-item {
    background: rgba(255,255,255,0.6);
    border-radius: 14px;
    padding: 18px 20px;
    text-decoration: none;
    color: var(--text);
    transition: all 0.2s;
    border: 1px solid transparent;
}
.core-three-item:hover {
    border-color: var(--green-pale);
    transform: translateY(-2px);
}
.core-three-name {
    display: block;
    font-weight: 700;
    color: var(--green-dark);
    font-size: 1rem;
    margin-bottom: 4px;
}
.core-three-kana {
    display: block;
    font-size: 0.78rem;
    color: var(--text-sub);
    margin-bottom: 8px;
}
.core-three-lead {
    display: block;
    font-size: 0.84rem;
    line-height: 1.7;
    color: var(--text);
}
.next-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin: 1.4em 0 2em;
}
.next-cards a {
    position: relative;
    display: block;
    padding: 16px 18px;
    background: rgba(255,255,255,0.85);
    border: 2px solid var(--green);
    border-radius: 14px;
    color: var(--green-dark);
    text-decoration: none;
    font-size: 0.92rem;
    line-height: 1.6;
    box-shadow: inset 0 0 28px rgba(106,158,94,0.18);
    overflow: hidden;
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}
.next-cards a::before {
    content: '';
    position: absolute;
    right: -16px;
    bottom: -16px;
    width: 64px;
    height: 64px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%236a9e5e' fill-opacity='0.10'><ellipse cx='50' cy='22' rx='12' ry='22'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(72 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(144 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(216 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(288 50 50)'/></g></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}
.next-cards a > * {
    position: relative;
    z-index: 1;
}
.next-cards a:hover {
    background: rgba(255,255,255,0.95);
    box-shadow: inset 0 0 28px rgba(106,158,94,0.28);
    transform: translateY(-2px);
}

/* ===== Legal page（terms / privacy / tokutei）===== */
.legal-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 120px 24px 80px;
}
.legal-page h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--green-dark);
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    text-align: center;
}
.legal-page .updated {
    font-size: 0.78rem;
    color: var(--text-sub);
    text-align: center;
    margin-bottom: 40px;
}
.legal-page h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--green);
    margin: 32px 0 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--green-pale);
}
.legal-page p, .legal-page li {
    font-size: 0.92rem;
    color: var(--text);
    line-height: 2;
}
.legal-page ol, .legal-page ul {
    padding-left: 1.5em;
    margin: 8px 0;
}
.legal-page strong {
    color: var(--green-dark);
}
.legal-page .contact-info {
    margin-top: 32px;
    padding: 20px;
    background: rgba(255,255,255,0.5);
    border-radius: 16px;
    font-size: 0.88rem;
    line-height: 2;
}
.legal-page .contact-info strong {
    color: var(--green-dark);
}
/* legal-page 内のリンクは緑（旧 inline style="color:var(--green);" の置き換え）*/
.legal-page a {
    color: var(--green);
}
/* legal-page 内の通常 table（privacy）*/
.legal-page table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
}
.legal-page th, .legal-page td {
    padding: 10px 16px;
    border: 1px solid var(--green-pale);
    font-size: 0.88rem;
    text-align: left;
}
.legal-page th {
    background: rgba(212,230,200,0.3);
    color: var(--green-dark);
    font-weight: 700;
    width: 30%;
}
/* 特商法ページの table（tokutei、行ベース）*/
.legal-page table.tokutei {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    line-height: 1.9;
    background: rgba(255,255,255,0.5);
    border-radius: 16px;
    overflow: hidden;
    border: none;
}
.legal-page table.tokutei th,
.legal-page table.tokutei td {
    padding: 14px 18px;
    text-align: left;
    vertical-align: top;
    border: none;
    border-bottom: 1px solid var(--green-pale);
}
.legal-page table.tokutei tr:last-child th,
.legal-page table.tokutei tr:last-child td {
    border-bottom: none;
}
.legal-page table.tokutei th {
    width: 38%;
    color: var(--green-dark);
    font-weight: 700;
    background: rgba(255,255,255,0.4);
}
.legal-page table.tokutei ul {
    margin: 0;
    padding-left: 1.2em;
}
@media (max-width: 600px) {
    .legal-page table.tokutei th,
    .legal-page table.tokutei td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    .legal-page table.tokutei th {
        padding-bottom: 4px;
        border-bottom: none;
    }
    .legal-page table.tokutei td {
        padding-top: 4px;
    }
}

/* ===== Reading page（基本鑑定書のお申し込み）===== */
.reading-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 120px 24px 80px;
}
.reading-page h1 {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--green-dark);
    text-align: center;
    letter-spacing: 0.12em;
    line-height: 1.6;
    margin-bottom: 12px;
}
.reading-page .lead {
    text-align: center;
    color: var(--text-sub);
    font-size: 0.95rem;
    line-height: 2;
    margin-bottom: 48px;
}
.reading-page h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--green);
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--green-pale);
}
.reading-page p {
    font-size: 0.95rem;
    line-height: 2.05;
    color: var(--text);
    margin: 0 0 1.4em;
}
.reading-page strong {
    color: var(--green-dark);
    font-weight: 700;
}
.reading-page .number-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px 24px;
    list-style: none;
    padding: 0;
    margin: 16px 0 24px;
}
.reading-page .number-list li {
    font-size: 0.9rem;
    line-height: 1.7;
    padding: 10px 14px;
    background: rgba(255,255,255,0.55);
    border-radius: 10px;
}
.reading-page .number-list li b {
    color: var(--green-dark);
    font-weight: 700;
    margin-right: 6px;
}
.reading-page .spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    line-height: 1.9;
    background: rgba(255,255,255,0.5);
    border-radius: 16px;
    overflow: hidden;
    margin: 16px 0;
}
.reading-page .spec-table th,
.reading-page .spec-table td {
    padding: 14px 18px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--green-pale);
}
.reading-page .spec-table tr:last-child th,
.reading-page .spec-table tr:last-child td {
    border-bottom: none;
}
.reading-page .spec-table th {
    width: 32%;
    color: var(--green-dark);
    font-weight: 700;
    background: rgba(255,255,255,0.4);
}
.reading-page .price {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 1.2rem;
    color: var(--green-dark);
    font-weight: 700;
    letter-spacing: 0.04em;
}
.reading-page .quote {
    margin: 1.4em 0;
    padding: 16px 22px;
    border-left: 3px solid var(--green-pale);
    background: rgba(255,255,255,0.5);
    border-radius: 0 12px 12px 0;
    color: var(--text-sub);
    font-size: 0.92rem;
    line-height: 1.95;
}
.reading-page .quote p:last-child { margin-bottom: 0; }
.reading-page .order-cta {
    margin: 32px auto;
    text-align: center;
}
.reading-page .btn-line {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: #f3e29a;
    color: var(--green-dark);
    text-decoration: none;
    border: 2px solid var(--green);
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    transition: all 0.2s;
    margin: 6px 6px;
}
.reading-page .btn-line:hover {
    background: #ead87f;
    color: var(--green-dark);
    border-color: var(--green);
    transform: translateY(-2px);
}
.reading-page .btn-note {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: #fff;
    color: var(--green-dark);
    text-decoration: none;
    border: 2px solid var(--green);
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    transition: all 0.2s;
    margin: 6px 6px;
}
.reading-page .btn-note:hover {
    background: var(--green-pale);
    transform: translateY(-2px);
}
.reading-page .order-note {
    font-size: 0.82rem;
    color: var(--text-sub);
    margin-top: 12px;
}
.reading-page .faq-item {
    margin: 16px 0;
    padding: 14px 18px;
    background: rgba(255,255,255,0.45);
    border-radius: 12px;
}
.reading-page .faq-q {
    font-weight: 700;
    color: var(--green-dark);
    margin-bottom: 6px;
    font-size: 0.95rem;
}
.reading-page .faq-a {
    font-size: 0.9rem;
    line-height: 1.85;
    color: var(--text);
    margin: 0;
}
/* ===== Reading page セクションごとのおくらカード ===== */
.reading-card {
    position: relative;
    margin: 28px 0;
    padding: 32px 28px;
    background: rgba(255,255,255,0.85);
    border: 2px solid var(--green);
    border-radius: 20px;
    box-shadow: inset 0 0 50px rgba(106,158,94,0.15);
    overflow: hidden;
}
.reading-card::before {
    content: '';
    position: absolute;
    right: -22px;
    bottom: -22px;
    width: 90px;
    height: 90px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%236a9e5e' fill-opacity='0.10'><ellipse cx='50' cy='22' rx='12' ry='22'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(72 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(144 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(216 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(288 50 50)'/></g></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}
.reading-card > * {
    position: relative;
    z-index: 1;
}
/* カード内では spec-table / quote / faq-item / closing / number-list の背景を抑える */
.reading-card .spec-table,
.reading-card .number-list li,
.reading-card .quote,
.reading-card .faq-item {
    background: transparent;
}
.reading-card .quote {
    background: rgba(243,226,154,0.12);
    border: 1px solid var(--green-pale);
    border-left: 4px solid #f3e29a;
    border-radius: 12px;
    padding: 18px 22px;
    margin: 1.6em 0;
}
.reading-card .quote p:first-child strong {
    color: var(--green-dark);
    font-size: 0.92rem;
    letter-spacing: 0.04em;
}
.reading-card .number-list li {
    border: 1px solid var(--green-pale);
}
.reading-card .faq-item {
    border-bottom: 1px dashed var(--green-pale);
    border-radius: 0;
}
.reading-card .faq-item:last-of-type {
    border-bottom: none;
}
.reading-card .order-cta {
    margin-bottom: 0;
}

.reading-page .closing {
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    text-align: center;
    font-size: 0.95rem;
    line-height: 2;
    color: var(--text);
}
@media (max-width: 600px) {
    .reading-page h1 { font-size: 1.4rem; }
    .reading-page .spec-table th,
    .reading-page .spec-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    .reading-page .spec-table th {
        padding-bottom: 4px;
        border-bottom: none;
    }
    .reading-page .spec-table td {
        padding-top: 4px;
    }
}

/* ===== Column index page（コラム一覧）===== */
.col-page {
    max-width: 880px;
    margin: 0 auto;
    padding: 120px 24px 80px;
}
.col-page-header {
    text-align: center;
    margin-bottom: 64px;
}
.col-page-header h1 {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--green-dark);
    letter-spacing: 0.12em;
    margin-bottom: 16px;
}
.col-page-header p {
    font-size: 0.95rem;
    color: var(--text-sub);
    line-height: 2;
}
.col-cat {
    margin-bottom: 56px;
}
.col-cat-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--green);
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--green-pale);
}
.col-cat-lead {
    font-size: 0.88rem;
    color: var(--text-sub);
    margin-bottom: 20px;
    line-height: 1.9;
}
.col-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.col-list-link {
    display: block;
    padding: 18px 20px;
    background: rgba(255,255,255,0.85);
    border-radius: 14px;
    text-decoration: none;
    border: 2px solid var(--green);
    box-shadow: inset 0 0 30px rgba(106,158,94,0.18);
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}
.col-list-link::before {
    content: '';
    position: absolute;
    right: -18px;
    bottom: -18px;
    width: 70px;
    height: 70px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%236a9e5e' fill-opacity='0.10'><ellipse cx='50' cy='22' rx='12' ry='22'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(72 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(144 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(216 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(288 50 50)'/></g></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}
.col-list-link:hover {
    background: rgba(255,255,255,0.95);
    box-shadow: inset 0 0 30px rgba(106,158,94,0.28);
    transform: translateY(-2px);
}
.col-list-title,
.col-list-sub {
    position: relative;
    z-index: 1;
}
.col-list-title {
    display: block;
    font-weight: 700;
    color: var(--green-dark);
    font-size: 0.96rem;
    margin-bottom: 6px;
    padding-left: 10px;
    border-left: 4px solid #f3e29a;
}
.col-list-sub {
    display: block;
    font-size: 0.78rem;
    color: var(--text-sub);
    line-height: 1.7;
}

/* ===== Result section（計算ツール結果。初期は非表示、JSで .show を付けて表示）===== */
#result.show {
    display: block;
}
/* 計算結果の LINE CTA / 鑑定書 CTA */
.result-line-cta, .result-reading-cta {
    margin-top: 24px;
    padding: 16px 0 8px;
    background: transparent;
    border: none;
    border-radius: 0;
    text-align: center;
}
.result-cta-eyebrow {
    font-size: 0.72rem;
    color: var(--green);
    letter-spacing: 0.14em;
    margin: 0 0 6px;
    font-weight: 700;
}
.result-cta-title {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--green-dark);
    margin: 0 0 8px;
    line-height: 1.6;
    letter-spacing: 0.08em;
}
.result-cta-sub {
    font-size: 0.82rem;
    color: var(--text-sub);
    line-height: 1.8;
    margin: 0 0 14px;
}
.result-btn-line {
    display: inline-block;
    padding: 10px 22px;
    background: #f3e29a;
    color: var(--green-dark);
    text-decoration: none;
    border: 2px solid var(--green);
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    transition: all 0.2s;
}
.result-btn-line:hover {
    background: #ead87f;
    color: var(--green-dark);
    transform: translateY(-1px);
}
.result-btn-outline {
    display: inline-block;
    padding: 10px 22px;
    background: #f3e29a;
    color: var(--green-dark);
    text-decoration: none;
    border: 2px solid var(--green);
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    transition: all 0.2s;
}
.result-btn-outline:hover {
    background: #ead87f;
    color: var(--green-dark);
    border-color: var(--green);
    transform: translateY(-1px);
}
/* カルマ数の警告メッセージ（旧 inline style="color:var(--karma);font-size:0.8rem;"）*/
.karma-warning {
    color: var(--karma);
    font-size: 0.8rem;
}

/* ===== Trisetsu finder（about-trisetsu.html 末尾の169通り一覧表）===== */
.trisetsu-finder {
    position: relative;
    margin: 48px auto 0;
    padding: 32px 28px;
    background: rgba(255,255,255,0.85);
    border: 2px solid var(--green);
    border-radius: 22px;
    max-width: 760px;
    text-align: center;
    box-shadow: inset 0 0 50px rgba(106,158,94,0.18);
    overflow: hidden;
}
.trisetsu-finder::before {
    content: '';
    position: absolute;
    right: -22px;
    bottom: -22px;
    width: 100px;
    height: 100px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%236a9e5e' fill-opacity='0.10'><ellipse cx='50' cy='22' rx='12' ry='22'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(72 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(144 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(216 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(288 50 50)'/></g></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}
.trisetsu-finder > * {
    position: relative;
    z-index: 1;
}
.trisetsu-finder h2 {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--green-dark);
    margin: 0 0 12px;
    letter-spacing: 0.10em;
}
.trisetsu-finder .finder-lead {
    font-size: 0.88rem;
    color: var(--text-sub);
    margin: 0 0 24px;
    line-height: 1.9;
}
.trisetsu-matrix-wrap {
    margin-top: 8px;
    overflow-x: auto;
}
.trisetsu-matrix {
    border-collapse: collapse;
    margin: 0 auto;
    font-size: 0.78rem;
}
.trisetsu-matrix th,
.trisetsu-matrix td {
    border: 1px solid var(--green-pale);
    padding: 0;
    text-align: center;
    width: 38px;
    height: 32px;
}
.trisetsu-matrix th {
    background: rgba(212,230,200,0.4);
    color: var(--green-dark);
    font-weight: 700;
}
.trisetsu-matrix .corner {
    background: transparent;
    border: 1px solid var(--green-pale);
    width: 38px;
    min-width: 38px;
    height: 32px;
}
.trisetsu-matrix td a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    transition: background 0.15s;
}
.trisetsu-matrix td a:hover {
    background: rgba(243,226,154,0.35);
}
/* 169通り一覧表 外側軸ラベル */
.matrix-with-axes {
    position: relative;
    padding-top: 34px;
    padding-left: 34px;
    margin: 8px auto 0;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
}
.matrix-with-axes .axis-top {
    position: absolute;
    top: 0;
    left: 34px;
    right: 0;
    text-align: center;
    background: rgba(243,226,154,0.40);
    border: 1px solid var(--green-pale);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 7px 6px;
    font-size: 0.80rem;
    font-weight: 700;
    color: var(--green-dark);
    letter-spacing: 0.10em;
}
.matrix-with-axes .axis-left {
    position: absolute;
    top: 34px;
    left: 0;
    bottom: 0;
    width: 34px;
    background: rgba(243,226,154,0.40);
    border: 1px solid var(--green-pale);
    border-right: none;
    border-radius: 8px 0 0 8px;
    writing-mode: vertical-rl;
    text-align: center;
    padding: 8px 4px;
    font-size: 0.80rem;
    font-weight: 700;
    color: var(--green-dark);
    letter-spacing: 0.10em;
}
.matrix-with-axes .trisetsu-matrix-wrap {
    margin: 0;
}

/* ===== コラム記事のシェアボタン（common.js が挿入）===== */
.column-share {
    margin: 32px 0 16px;
    padding: 18px 0;
    border-top: 1px dashed var(--green-pale);
    text-align: center;
}
.column-share-label {
    font-size: 0.82rem;
    color: var(--text-sub);
    margin: 0 0 12px;
    letter-spacing: 0.08em;
}
.column-share-btns {
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.column-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #f3e29a;
    border: 2px solid var(--green);
    border-radius: 50px;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--green-dark);
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s, transform 0.15s;
    background-clip: border-box;
}
.column-share-btn:hover {
    background: #ead87f;
    transform: translateY(-1px);
}
.column-share-btn.copied {
    background: var(--green-dark) !important;
    color: #fff !important;
    border-color: var(--green-dark) !important;
}

/* reading-card 内の LINE 申し込みボタンを黄色化（中=種色ルール） */
.reading-card .btn-line {
    background: #f3e29a;
    color: var(--green-dark);
    border: 2px solid var(--green);
    background-clip: border-box;
}
.reading-card .btn-line:hover {
    background: #ead87f;
    color: var(--green-dark);
    border-color: var(--green);
}

/* 黄色いおくらの種マーク（→ の代わり） */
.seed-mark {
    display: inline-block;
    width: 14px;
    height: 9px;
    background: #f3e29a;
    border: 1px solid var(--green);
    border-radius: 50%;
    transform: rotate(-25deg);
}
.trisetsu-matrix td a:hover .seed-mark {
    background: #ead87f;
    transform: rotate(-25deg) scale(1.15);
}

/* ===== Home additional banners（ホームの3カード：はじめて・トリセツ・鑑定書）===== */
.home-banners {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 1080px;
    margin: 24px auto;
    padding: 0 24px;
}
.home-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 36px 24px 28px;
    border-radius: 18px;
    text-decoration: none;
    color: inherit;
    /* オクラの断面：外皮（緑の太い線）→ 内側にじわっと緑がしみ込み、中心は白い果肉 */
    border: 3px solid var(--green);
    background: rgba(255,255,255,0.85);
    box-shadow: inset 0 0 50px rgba(106,158,94,0.35);
    transition: all 0.25s;
    text-align: center;
    position: relative;
    overflow: hidden;
}
/* 中央に5つの楕円を放射状に配置（オクラの種の部屋の形をイメージ） */
.home-banner::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    height: 95%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%236a9e5e' fill-opacity='0.08'><ellipse cx='50' cy='22' rx='12' ry='22'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(72 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(144 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(216 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(288 50 50)'/></g></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 0;
}
.home-banner > * {
    position: relative;
    z-index: 1;
}
.home-banner:hover {
    background: rgba(255,255,255,0.92);
    box-shadow: inset 0 0 50px rgba(106,158,94,0.4), 0 6px 18px rgba(106,158,94,0.2);
    transform: translateY(-2px);
}
.home-banner-eyebrow {
    font-size: 0.78rem;
    color: var(--green);
    letter-spacing: 0.14em;
    margin: 0 0 8px;
}
.home-banner-title {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--green-dark);
    letter-spacing: 0.06em;
    margin: 0 0 12px;
}
.home-banner-sub {
    font-size: 0.85rem;
    color: var(--text-sub);
    line-height: 1.85;
    margin: 0 0 18px;
    flex-grow: 1;
}
/* オクラの種——薄いクリーム色の楕円。ホバーで「採れた」ように緑に発色 */
.home-banner-cta {
    display: inline-block;
    margin-top: auto;
    padding: 10px 28px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    background: #f3e29a;
    color: var(--green-dark);
    border: 1.5px solid var(--green);
    letter-spacing: 0.06em;
    transition: all 0.3s;
}
.home-banner:hover .home-banner-cta {
    background: #ead78a;
    color: var(--green-dark);
    border-color: var(--green-dark);
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}
/* タブレット幅では2列＋1列（折り返し） */
@media (max-width: 880px) {
    .home-banners {
        grid-template-columns: repeat(2, 1fr);
        max-width: 720px;
    }
}
/* モバイルでは1列縦積み */
@media (max-width: 560px) {
    .home-banners {
        grid-template-columns: 1fr;
        max-width: 460px;
        gap: 14px;
    }
    .home-banner { padding: 28px 22px 24px; }
}

/* ===== 読了時間（common.js で挿入）===== */
.read-time {
    font-size: 0.78rem;
    color: var(--text-sub);
    letter-spacing: 0.06em;
    margin: 8px 0 18px;
    opacity: 0.7;
}

/* ===== 目次（common.js で挿入）===== */
.article-toc {
    position: relative;
    background: rgba(255,255,255,0.85);
    border: 2px solid var(--green);
    padding: 22px 26px;
    margin: 24px 0 32px;
    border-radius: 14px;
    box-shadow: inset 0 0 30px rgba(106,158,94,0.18);
    overflow: hidden;
}
.article-toc::before {
    content: '';
    position: absolute;
    right: -16px;
    bottom: -16px;
    width: 72px;
    height: 72px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%236a9e5e' fill-opacity='0.10'><ellipse cx='50' cy='22' rx='12' ry='22'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(72 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(144 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(216 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(288 50 50)'/></g></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}
.article-toc > * {
    position: relative;
    z-index: 1;
}
.article-toc-title {
    font-size: 0.82rem;
    color: var(--green-dark);
    margin: 0 0 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
}
.article-toc ol {
    margin: 0;
    padding-left: 22px;
    counter-reset: toc;
    list-style: none;
}
.article-toc li {
    position: relative;
    counter-increment: toc;
    margin: 6px 0;
    font-size: 0.92rem;
    line-height: 1.7;
}
.article-toc li::before {
    content: counter(toc, decimal-leading-zero);
    position: absolute;
    left: -22px;
    color: var(--green);
    font-size: 0.74rem;
    font-weight: 600;
    top: 3px;
}
.article-toc a {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px dotted transparent;
    transition: all 0.2s;
}
.article-toc a:hover {
    color: var(--green-dark);
    border-bottom-color: var(--green);
}

/* ===== 自動関連コラム（common.js で挿入）===== */
.related-auto {
    margin-top: 56px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
}
.related-auto::before {
    content: none;
}
.related-auto > * {
    position: static;
    z-index: auto;
}
.related-auto h3 {
    font-size: 0.92rem;
    color: var(--green-dark);
    margin: 0 0 16px;
    letter-spacing: 0.10em;
    font-weight: 700;
}
/* 関連リンク3カード（col-list-link 風の小型おくらカード） */
.related-auto-cards {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.related-auto-cards li {
    margin: 0;
    padding: 0;
    line-height: 1.5;
}
.related-auto-cards li::before {
    content: none;
}
.related-auto-card {
    display: block;
    padding: 16px 18px;
    background: rgba(255,255,255,0.85);
    border: 2px solid var(--green);
    border-radius: 14px;
    text-decoration: none;
    box-shadow: inset 0 0 24px rgba(106,158,94,0.15);
    transition: background 0.2s, transform 0.15s;
}
.related-auto-card:hover {
    background: rgba(255,255,255,0.95);
    transform: translateY(-2px);
}
.related-auto-card-title {
    display: block;
    font-weight: 700;
    color: var(--green-dark);
    font-size: 0.94rem;
    margin-bottom: 4px;
    padding-left: 10px;
    border-left: 4px solid #f3e29a;
}
.related-auto-card-sub {
    display: block;
    font-size: 0.82rem;
    color: var(--text-sub);
    line-height: 1.6;
}

/* LINE登録CTAおくらカード（reading-cta-card と同じ骨格） */
.line-cta-card {
    position: relative;
    display: block;
    margin: 16px 0 0;
    padding: 28px 26px;
    background: rgba(255,255,255,0.85);
    border: 2px solid var(--green);
    border-radius: 22px;
    text-decoration: none;
    color: inherit;
    text-align: center;
    box-shadow: inset 0 0 50px rgba(106,158,94,0.20);
    overflow: hidden;
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}
.line-cta-card::before {
    content: '';
    position: absolute;
    right: -22px;
    bottom: -22px;
    width: 100px;
    height: 100px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%236a9e5e' fill-opacity='0.12'><ellipse cx='50' cy='22' rx='12' ry='22'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(72 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(144 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(216 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(288 50 50)'/></g></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}
.line-cta-card > * {
    position: relative;
    z-index: 1;
}
.line-cta-card:hover {
    background: rgba(255,255,255,0.95);
    box-shadow: inset 0 0 50px rgba(106,158,94,0.28);
    transform: translateY(-2px);
}
.line-cta-eyebrow {
    font-size: 0.78rem;
    color: var(--green);
    letter-spacing: 0.14em;
    margin: 0 0 10px;
    font-weight: 700;
}
.line-cta-title {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--green-dark);
    letter-spacing: 0.08em;
    margin: 0 0 10px;
    line-height: 1.6;
}
.line-cta-sub {
    font-size: 0.84rem;
    color: var(--text-sub);
    line-height: 1.8;
    margin: 0 0 18px;
}
.line-cta-btn {
    display: inline-block;
    padding: 12px 28px;
    background: #f3e29a;
    color: var(--green-dark);
    border: 2px solid var(--green);
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    transition: background 0.2s;
}
.line-cta-card:hover .line-cta-btn {
    background: #ead87f;
}
/* reading-cta-card との連続配置のとき、上のカードに上マージン */
.related-auto .reading-cta-card {
    margin: 16px 0 0;
}
.related-auto-cta {
    margin: 14px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.related-auto-link-reading,
.related-auto-link-line {
    flex: 1 1 220px;
    text-align: center;
}
.related-auto-link-reading,
.related-auto-link-line {
    display: inline-block;
    padding: 9px 18px;
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s;
    background-clip: border-box;
    background-origin: border-box;
}
.related-auto-link-reading,
.related-auto-link-line {
    background: #f3e29a;
    color: var(--green-dark);
    border: 2px solid var(--green);
}
.related-auto-link-reading:hover,
.related-auto-link-line:hover {
    background: #ead87f;
    color: var(--green-dark);
    border-bottom-color: var(--green);
    transform: translateY(-1px);
}
.related-auto-link-reading::before,
.related-auto-link-line::before {
    content: "";
}

/* ===== コラム一覧 鑑定書CTAおくらカード（reading.html 誘導） ===== */
.reading-cta-card {
    position: relative;
    display: block;
    margin: 56px 0;
    padding: 32px 28px;
    background: rgba(255,255,255,0.85);
    border: 2px solid var(--green);
    border-radius: 22px;
    text-decoration: none;
    color: inherit;
    text-align: center;
    box-shadow: inset 0 0 50px rgba(106,158,94,0.20);
    overflow: hidden;
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}
.reading-cta-card::before {
    content: '';
    position: absolute;
    right: -22px;
    bottom: -22px;
    width: 100px;
    height: 100px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%236a9e5e' fill-opacity='0.12'><ellipse cx='50' cy='22' rx='12' ry='22'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(72 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(144 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(216 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(288 50 50)'/></g></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}
.reading-cta-card > * {
    position: relative;
    z-index: 1;
}
.reading-cta-card:hover {
    background: rgba(255,255,255,0.95);
    box-shadow: inset 0 0 50px rgba(106,158,94,0.28);
    transform: translateY(-2px);
}
.reading-cta-eyebrow {
    font-size: 0.78rem;
    color: var(--green);
    letter-spacing: 0.14em;
    margin: 0 0 10px;
    font-weight: 700;
}
.reading-cta-title {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--green-dark);
    letter-spacing: 0.08em;
    margin: 0 0 10px;
    line-height: 1.6;
}
.reading-cta-sub {
    font-size: 0.88rem;
    color: var(--text-sub);
    line-height: 1.8;
    margin: 0 0 20px;
}
.reading-cta-btn {
    display: inline-block;
    padding: 12px 28px;
    background: #f3e29a;
    color: var(--green-dark);
    border: 2px solid var(--green);
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    transition: background 0.2s;
}
.reading-cta-card:hover .reading-cta-btn {
    background: #ead87f;
}

/* ===== 結果セクション ギミック（数字リンク・シェア・相性）===== */
.result-share {
    margin: 24px 0 8px;
    padding: 18px 0;
    border-top: 1px dashed var(--green-pale, #d6e5cd);
    text-align: center;
}
.result-share-label {
    font-size: 0.82rem;
    color: var(--text-sub);
    margin: 0 0 12px;
    letter-spacing: 0.08em;
}
.result-share-btns {
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.result-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #f3e29a;
    border: 2px solid var(--green);
    border-radius: 50px;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--green-dark);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}
.result-share-btn:hover {
    background: #ead87f;
    color: var(--green-dark);
    border-color: var(--green);
    transform: translateY(-1px);
}
.result-share-btn-copied {
    background: var(--green-dark) !important;
    color: #fff !important;
    border-color: var(--green-dark) !important;
}
.result-num-link {
    display: inline-block;
    color: var(--green-dark);
    text-decoration: none;
    border-bottom: 1px dotted var(--green);
    transition: all 0.2s;
}
.result-num-link:hover {
    color: var(--green);
    border-bottom-style: solid;
}
/* 計算結果の各数字タイトル行（タイトル左／「もっと詳しく」ボタン右） */
.result-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.result-section-title-text {
    flex: 1 1 auto;
    min-width: 0;
}
.result-more-btn {
    display: inline-block;
    flex-shrink: 0;
    padding: 4px 14px;
    background: #f3e29a;
    color: var(--green-dark);
    border: 1.5px solid var(--green);
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    transition: all 0.2s;
}
.result-more-btn:hover {
    background: #ead87f;
    color: var(--green-dark);
    border-color: var(--green);
    transform: translateY(-1px);
}

/* ===== 今日の数字ウィジェット（ホーム）===== */
.today-widget {
    max-width: 520px;
    margin: 24px auto;
    padding: 22px 24px;
    background: rgba(255,255,255,0.85);
    border-radius: 18px;
    text-align: center;
    /* オクラの断面：外皮（緑の太い線）→ 内側にじわっと緑のしみ */
    border: 3px solid var(--green);
    box-shadow: inset 0 0 60px rgba(106,158,94,0.35);
    position: relative;
    overflow: hidden;
}
.today-widget::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    height: 95%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%236a9e5e' fill-opacity='0.08'><ellipse cx='50' cy='22' rx='12' ry='22'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(72 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(144 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(216 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(288 50 50)'/></g></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 0;
}
.today-widget > * {
    position: relative;
    z-index: 1;
}
.today-widget-eyebrow {
    font-size: 0.78rem;
    color: var(--green);
    letter-spacing: 0.14em;
    margin: 0 0 6px;
}
.today-widget-date {
    font-size: 0.85rem;
    color: var(--text-sub);
    margin: 0 0 10px;
}
.today-widget-num {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 3.4rem;
    line-height: 1;
    color: var(--green-dark);
    margin: 0 0 6px;
    font-weight: 500;
}
.today-widget-title {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 1.1rem;
    color: var(--green-dark);
    margin: 0 0 10px;
    letter-spacing: 0.05em;
}
.today-widget-desc {
    font-size: 0.86rem;
    color: var(--text-sub);
    line-height: 1.9;
    margin: 0 0 14px;
}
.today-widget-link {
    display: inline-block;
    font-size: 0.82rem;
    color: var(--green);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.2s;
}
.today-widget-link:hover {
    border-bottom-color: var(--green);
}

/* ===== コラム一覧 SP用カテゴリチップ列（横スクロール） ===== */
.col-cat-chips {
    display: none;
}
@media (max-width: 1100px) {
    .col-cat-chips {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -24px 32px;
        padding: 4px 24px 12px;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
    }
    .col-cat-chips::-webkit-scrollbar {
        height: 4px;
    }
    .col-cat-chips::-webkit-scrollbar-thumb {
        background: var(--green-pale);
        border-radius: 2px;
    }
    .col-cat-chip {
        flex: 0 0 auto;
        scroll-snap-align: start;
        background: rgba(255,255,255,0.85);
        color: var(--green-dark);
        border: 2px solid var(--green);
        border-radius: 999px;
        padding: 8px 16px;
        font-size: 0.82rem;
        font-weight: 500;
        text-decoration: none;
        white-space: nowrap;
        box-shadow: inset 0 0 14px rgba(106,158,94,0.18);
        transition: background 0.2s, transform 0.15s;
    }
    .col-cat-chip:active {
        transform: scale(0.96);
        background: rgba(106,158,94,0.18);
    }
}

/* スムーススクロール（チップタップ→該当セクションへ） */
html {
    scroll-behavior: smooth;
}

/* ===== コラム一覧 追従サイドナビ（オクラ断面図） ===== */
.col-side-nav {
    position: fixed;
    top: 92px;
    right: 12px;
    width: 200px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overflow-x: hidden;
    background: rgba(255,255,255,0.85);
    border: 2px solid var(--green);
    border-radius: 18px;
    padding: 16px 16px;
    font-size: 0.82rem;
    backdrop-filter: blur(6px);
    box-shadow: inset 0 0 30px rgba(106,158,94,0.18);
    z-index: 80;
    transition: opacity 0.3s;
    scrollbar-width: thin;
    scrollbar-color: var(--green-pale) transparent;
}
.col-side-nav::-webkit-scrollbar {
    width: 4px;
}
.col-side-nav::-webkit-scrollbar-track {
    background: transparent;
}
.col-side-nav::-webkit-scrollbar-thumb {
    background: var(--green-pale);
    border-radius: 2px;
}
.col-side-nav::before {
    content: '';
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 56px;
    height: 56px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%236a9e5e' fill-opacity='0.10'><ellipse cx='50' cy='22' rx='12' ry='22'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(72 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(144 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(216 50 50)'/><ellipse cx='50' cy='22' rx='12' ry='22' transform='rotate(288 50 50)'/></g></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}
.col-side-nav ul,
.col-side-nav li,
.col-side-nav a {
    position: relative;
    z-index: 1;
}
.col-side-nav-title {
    font-size: 0.78rem;
    color: var(--green-dark);
    margin: 0 0 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--green-pale);
    position: relative;
    z-index: 1;
}
.col-side-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.col-side-nav li {
    margin: 6px 0;
    line-height: 1.5;
}
.col-side-nav a {
    color: var(--text-sub);
    text-decoration: none;
    border-left: 2px solid transparent;
    padding-left: 8px;
    display: block;
    transition: all 0.2s;
}
.col-side-nav a:hover,
.col-side-nav a.active {
    color: var(--green-dark);
    border-left-color: #f3e29a;
    background: rgba(243,226,154,0.22);
}
@media (max-width: 1100px) {
    .col-side-nav { display: none; }
}

/* ===== 404 ページ ===== */
.notfound-page {
    max-width: 560px;
    margin: 100px auto 80px;
    padding: 0 24px;
    text-align: center;
}
.notfound-num {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 5rem;
    color: var(--green-dark);
    margin: 0;
    font-weight: 300;
    letter-spacing: 0.1em;
}
.notfound-title {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 1.4rem;
    color: var(--green-dark);
    margin: 12px 0 20px;
    letter-spacing: 0.06em;
}
.notfound-desc {
    font-size: 0.95rem;
    color: var(--text-sub);
    line-height: 2;
    margin: 0 0 30px;
}
.notfound-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}
.notfound-links a {
    display: inline-block;
    min-width: 240px;
    padding: 12px 28px;
    border-radius: 50px;
    background: var(--green);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.25s;
}
.notfound-links a:hover {
    background: var(--green-dark);
    transform: translateY(-2px);
}
.notfound-links a.secondary {
    background: #fff;
    color: var(--green-dark);
    border: 1px solid var(--green);
}
.notfound-links a.secondary:hover {
    background: #f4faf0;
}

/* ===== 記事下部の前後ページャー（common.js が挿入）===== */
.article-pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 40px 0 24px;
}
.article-pager > a,
.article-pager > .article-pager-spacer {
    flex: 1 1 0;
}
.article-pager a {
    display: block;
    padding: 12px 16px;
    background: rgba(255,255,255,0.85);
    border: 2px solid var(--green);
    border-radius: 12px;
    color: var(--green-dark);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 700;
    transition: background 0.2s, transform 0.15s;
}
.article-pager a:hover {
    background: rgba(255,255,255,0.95);
    transform: translateY(-2px);
}
.article-pager-prev { text-align: left; }
.article-pager-next { text-align: right; }

/* ===== 記事下部の CTAカード（鑑定書+LINE、common.js が挿入）===== */
.article-cta-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin: 32px 0 24px;
}
.article-cta-cards .reading-cta-card,
.article-cta-cards .line-cta-card {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.article-cta-cards .reading-cta-btn,
.article-cta-cards .line-cta-btn {
    margin-top: auto;
}

/* ===== 記事下部の戻るリンク（common.js が挿入）===== */
.article-back-link {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 24px 0 16px;
    font-size: 0.88rem;
}
.article-back-link a {
    color: var(--green);
    text-decoration: none;
    border-bottom: 1px dotted transparent;
    padding: 4px 0;
    transition: border-color 0.2s, color 0.2s;
}
.article-back-link a:hover {
    color: var(--green-dark);
    border-bottom-color: var(--green);
}

/* ===== 画面両端のおくらの外皮（固定レイヤー）===== */
body::before,
body::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: -1;
    pointer-events: none;
}
body::before,
body::after {
    /* グラデーション方向を to right に統一。透明色の補間が左右で同じになるよう、
       右側は transform で反転する。これで濃さ・色補間が物理的に同一になる。 */
    background: linear-gradient(to right, var(--green) 0%, rgba(106,158,94,0.7) 35%, transparent 100%);
}
body::before {
    left: 0;
}
body::after {
    right: 0;
    transform: scaleX(-1);
}
@media (max-width: 768px) {
    body::before, body::after { width: 24px; }
}