/* 全ページ共通のデザイントークンとレイアウトプリミティブ（モバイルファースト）。
   リセットは reset.css、partial 固有の骨格は partials/*.css に分離。
   ページ固有の装飾・SP最適化は各 CSS で付与する。

   レスポンシブ規約:
   - モバイルファースト（既定 = SP、min-width で PC へ拡張）
   - コンポーネント単位のメディアクエリは各 CSS の末尾に同梱する
   - ブレークポイント 768px は暫定。デザインフェーズで調整可 */

:root {
    --color-brand-primary: #1f8e5a;
    --color-brand-primary-dark: #0e4a2e;
    --color-brand-primary-deep: #1f3329;
    --color-brand-gold: #c9a24b;
    --color-brand-gold-light: #efe3b6;
    --color-brand-emphasis: #9d203d;
    --color-brand-border-subtle: rgba(31, 142, 90, 0.16);
    --color-brand-outline: rgba(31, 142, 90, 0.2);
    --color-tel-note: rgba(255, 255, 255, 0.72);
    --color-tel-shadow: rgba(14, 74, 46, 0.26);
    --color-cta-on-green-tel-bg: #f5f9ec;
    --color-cta-on-green-tel-fg: var(--color-brand-primary-dark);
    --color-cta-on-green-tel-note: rgba(14, 74, 46, 0.72);
    --color-cta-on-green-doc-bg: rgba(47, 117, 72, 0.5);
    --color-cta-on-green-doc-fg: #f5f9ec;
    --color-cta-on-green-doc-border: rgba(245, 249, 236, 0.45);
    --color-cta-on-green-shadow: rgba(0, 0, 0, 0.16);

    --color-plan-family: #58a6a1;
    --color-plan-1day: #586a96;
    --color-plan-cremation: #b18168;
    --color-plan-common: #c2ad6b;
    --color-plan-original: #b27f87;
    --color-plan-company: #6d4b89;
    --color-plan-unknown: #acb0b6;

    --color-text-primary: #404040;
    --color-text-muted: #707070;
    --color-text-subtle: #808080;
    --color-error: #9d203d;

    --color-border: #e4e4e4;
    --color-surface: #fff;
    --color-background-soft: #f4f5f2;
    --color-background-faq: #f6f5e4;
    --color-background-tint: #f8faf9;
    --color-background-placeholder: rgb(222, 223, 224);
    --color-background-wash: rgba(31, 142, 90, 0.08);
    --color-rating-active: rgb(255, 185, 0);
    --color-rating-empty: rgb(214, 214, 214);

    --font-family-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-family-serif: "Noto Serif JP", ui-serif, Georgia, "Times New Roman", serif;
    --font-family-accent: Inter, var(--font-family-sans);

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 0.9375rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.3125rem;
    --font-size-page-headline: 1.75rem;
    --font-size-title-block: 1.375rem;
    --font-size-title-section: 1.5rem;
    --font-size-title-page: 2rem;

    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-pill: 999px;
    --radius-circle: 50%;

    --shadow-sm: 0 8px 18px rgba(14, 74, 46, 0.12);
    --shadow-md: 0 12px 28px rgba(14, 74, 46, 0.08);
    --shadow-lg: 0 16px 36px rgba(14, 74, 46, 0.08);
}

@media (min-width: 768px) {
    :root {
        --font-size-page-headline: 2.5rem;
        --font-size-title-block: 1.875rem;
        --font-size-title-section: 2rem;
        --font-size-title-page: 3rem;
    }
}

/* reset.css の all:unset でタイポが消えるため、本文の最低限の基準だけ与える。 */
body {
    font-family: var(--font-family-sans);
    line-height: 1.6;
}

/* コンテナ（max-width なので SP では実質フル幅 + 左右余白） */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

.page-head {
    display: grid;
    gap: 28px;
    padding-block: 20px 32px;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.page-body {
    display: grid;
    gap: 34px;
    padding-block: 0 72px;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

@media (min-width: 768px) {
    .page-head {
        gap: 32px;
        padding-block: 24px 40px;
    }

    .page-body {
        gap: 40px;
        padding-bottom: 88px;
    }
}

@media (max-width: 767px) {
    .page-head {
        gap: 24px;
        padding-block: 16px 28px;
    }

    .page-body {
        gap: 28px;
        padding-bottom: 52px;
    }
}

.primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: min(100%, 280px);
    border: 1px solid var(--color-brand-primary);
    border-radius: var(--radius-sm);
    background: var(--color-brand-primary);
    color: var(--color-surface);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 0.9rem 2rem;
    text-align: center;
}

.primary-button:hover,
.primary-button:focus-visible {
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary-dark);
    outline: 3px solid rgba(31, 142, 90, 0.18);
    outline-offset: 3px;
}

.text-link {
    color: var(--color-brand-primary-dark);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.section-block {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.section-title {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-left: 4px solid var(--color-brand-primary);
    padding-left: 14px;
    color: var(--color-text-primary);
    letter-spacing: 0;
}

.section-title__subject {
    display: block;
    margin-bottom: 1px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
}

.section-title__label {
    display: block;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
}

.section-title--sm {
    color: var(--color-brand-primary-deep);
}

.section-title--sm .section-title__label {
    font-size: var(--font-size-title-section);
    font-weight: 700;
    line-height: 1.35;
}

.block-title {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--color-background-wash);
    color: var(--color-brand-primary-deep);
    font-size: var(--font-size-base);
    font-weight: 700;
    line-height: 1.5;
}

@media (max-width: 767px) {
    .section-block {
        gap: 18px;
    }

    .section-title__label {
        font-size: 18px;
        line-height: 1.5;
    }

    .section-title__subject {
        font-size: 16px;
    }

    .section-title--sm .section-title__label {
        font-size: 1.45rem;
    }

    .block-title {
        padding: 9px 12px;
    }
}

.plan-family {
    --plan-color: var(--color-plan-family);
}
.plan-1day {
    --plan-color: var(--color-plan-1day);
}
.plan-cremation {
    --plan-color: var(--color-plan-cremation);
}
.plan-common {
    --plan-color: var(--color-plan-common);
}
.plan-original {
    --plan-color: var(--color-plan-original);
}
.plan-company {
    --plan-color: var(--color-plan-company);
}
.plan-unknown {
    --plan-color: var(--color-plan-unknown);
}