:root {
    --color-primary: #00afcc; /* 金春色(ターコイズブルー) : メインカラー */
    --color-secondary: #6c848d; /* 藍鼠               : サブカラー */
    --color-accent: #fcc800; /* 向日葵色            : 強調・バッジ等 */
    --color-error: #d70035; /* 洋紅色(カーマイン)  : エラー */
    --color-warning: #ea930a; /* 琥珀色              : 注意 */
}

@font-face {
    font-family: 'Edwin';
    src: url("../fonts/Edwin-Italic.otf") format("opentype");
    font-style: italic;
}

html {
    font-size: 100%; /* ブラウザ/ユーザー設定を尊重。通常16px相当 */
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
    font-size: 1rem;
    line-height: 1.75; /* 日本語向けにやや広め */
    color: #1a1a1a;
    background-color: #ffffff;
    /* 日本語+長い英単語・URL混在時の折り返し崩れ対策 */
    overflow-wrap: break-word;
    word-break: normal;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.4;
    text-wrap: balance; /* 見出しの改行位置を自然にする */
}

h1 {
    font-size: 1.75rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.25rem;
}

h4 {
    font-size: 1.125rem;
}

p {
    margin: 0 0 1rem;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

    a:focus-visible,
    button:focus-visible,
    summary:focus-visible,
    [tabindex]:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

img {
    max-width: 100%;
    height: auto;
}

button {
    font: inherit;
    color: inherit;
}