:root{
    --font-xl: 22px;
    --font-l: 20px;
    --font-m: 18px;
    --font-s: 16px;
    --font-xs: 14px;
    --font-adjust: 1;
}
/* 各フォントサイズ */
.font-xl,
.font-xl *{
    font-size: calc(var(--font-xl) * var(--font-adjust));
}
.font-l,
.font-l *{
    font-size: calc(var(--font-l) * var(--font-adjust));
}
.font-m,
.font-m *{
    font-size: calc(var(--font-m) * var(--font-adjust));
}
.font-s,
.font-s *{
    font-size: calc(var(--font-s) * var(--font-adjust));
}
.font-xs,
.font-xs *{
    font-size: calc(var(--font-xs) * var(--font-adjust));
}
/* ルビ */
.font-xl rt{
    font-size: calc(var(--font-xl) * 0.6 * var(--font-adjust));
}
.font-l rt{
    font-size: calc(var(--font-l) * 0.6 * var(--font-adjust));
}
.font-m rt{
    font-size: calc(var(--font-m) * 0.6 * var(--font-adjust));
}
.font-s rt{
    font-size: calc(var(--font-s) * 0.6 * var(--font-adjust));
}
.font-s rt{
    font-size: calc(var(--font-xs) * 0.6 * var(--font-adjust));
}
/* スマホ表示 */
@media screen and (min-width: 1200px) and (max-width: 1600px) {
    :root{
        --font-adjust: 0.9;
    }
}
@media screen and (min-width: 800px) and (max-width: 1200px) {
    :root{
        --font-adjust: 0.8;
    }
}
@media screen and (min-width: 400px) and (max-width: 800px) {
    :root{
        --font-adjust: 0.7;
    }
}
@media screen and (max-width: 400px) {
    :root{
        --font-adjust: 0.6;
    }
}