/*
  base.css — 色・幅の変数、本文の基本、ページ共通の部品（見出し ttl_ptn_1 ／ アイコン ico）
  reset.css の次に読み込む。
*/
:root {
    --color-navy: #1c2b45;
    --color-text: #364357;
    --color-muted: #5a6679;
    --color-icon: #2b3d5c;
    --color-accent: #1a6fd6;
    --color-accent-soft: #c9dcf4;
    --color-line: #d9e1ec;
    --color-bg: #f8fafd;
    --wrap-max: 1184px;
    --wrap-pad: 32px;
    --font-base: "Segoe UI", "Yu Gothic UI", "Meiryo UI", Meiryo, "Hiragino Sans", sans-serif;

    @media (max-width: 480px) {
        --wrap-pad: 20px;
    }
}

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-base);
}

/* ── 見出しの型：左に青い縦線 ── */
.ttl_ptn_1 {
    display: flex;
    gap: 14px;
    color: var(--color-navy);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5em;
    letter-spacing: 0.02em;

    &::before {
        content: "";
        margin: 0.2em 0;
        width: 5px;
        flex-shrink: 0;
        align-self: stretch;
        background: var(--color-accent);
        border-radius: 3px;
    }

    @media (max-width: 760px) {
        font-size: 22px;
    }

    @media (max-width: 480px) {
        gap: 12px;
        font-size: 20px;
    }
}

/* ── 線画アイコン（色は color で受ける） ── */
.ico {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--color-icon);
}

/* 最終更新: 2026-11-11 11:58 */