html {
    font-size: 130%;
}

body {
    font-family: var(--font-base);
    color: var(--color-text);
    line-height: 1.8;
    font-size: 1rem;
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-primary);
}

/*
 * 見出しなど短い文の改行位置。スマホ幅で「お問い合わせくださ／い」のように
 * 1文字だけ次の行に落ちるのを防ぐ。
 * - text-wrap: balance … 各行の長さをそろえる（Safari・Chrome・Firefox）
 * - word-break: auto-phrase … 文節の切れ目で改行する（Chromeのみ。他は無視される）
 * 長い本文には使わない（balance は数行程度の文のための指定）。
 */
h1, h2, h3, h4,
.c-section-subtitle,
.u-balance {
    text-wrap: balance;
    word-break: auto-phrase;
}

/*
 * セクション見出しの型（デザイン原本）
 *   英字見出し（セリフ体）→ 色付きの日本語サブ見出し → その下に長い横線
 * 線の色はサブ見出しの文字色（currentColor）に合わせる。紺地・淡い青の地に置くと
 * 文字色を白にするだけで線も白になる。
 */
/*
 * 見出しの大きさは原本（ページ幅1064px）に対する比率で画面幅に合わせる。
 * 原本の実測：英字見出し 約32px（ページ幅の3.05%）、日本語サブ見出し 約20px（1.86%）。
 * 上限は画面幅1440px相当で止める（本文・写真と同じく、それより広い画面では大きくしない）。
 */
.c-section-title {
    font-family: var(--font-heading-en);
    font-size: clamp(1.5rem, 3.05vw, 44px);
    line-height: 1.25;
    text-align: center;
    margin-bottom: 0.15em;
}

.c-section-title--accent {
    color: var(--color-accent);
}

.c-section-title--left {
    text-align: left;
}

.c-section-title--right {
    text-align: right;
}

.c-section-subtitle {
    text-align: center;
    font-weight: 700;
    font-size: clamp(0.95rem, 1.86vw, 26.8px);
    letter-spacing: 0.08em;
    color: var(--color-primary);
    margin: 0 0 var(--space-md);
}

.c-section-subtitle::after {
    content: "";
    display: block;
    width: min(480px, 70%);
    height: 2px;
    margin: var(--space-sm) auto 0;
    background-color: currentColor;
}

.c-section-subtitle--accent {
    color: var(--color-accent);
}

/* 特に大きいセクション見出し（NUMBERS・BUSINESS・RECRUITMENT 等。値は theme-vars.css） */
.c-section-title--xl {
    font-size: var(--font-size-title-xl);
}

/* 上の英字見出しに添える大きい日本語サブ見出し（値は theme-vars.css） */
.c-section-subtitle--xl {
    font-size: var(--font-size-subtitle-xl);
}

/* 左右寄せの見出し（ホームの BUSINESS・RECRUITMENT の導線）は原本に線がない */
.c-section-subtitle--left {
    text-align: left;
}

.c-section-subtitle--right {
    text-align: right;
}

.c-section-subtitle--left::after,
.c-section-subtitle--right::after,
.c-section-subtitle--no-rule::after {
    display: none;
}

/*
 * リード文。原本は黒の太字で、1文ずつ改行して中央揃え。
 * 1文ごとの改行は <br class="u-br-pc">（スマホでは消えて1段落に流れる）で入れる。
 */
.c-section__lead {
    text-align: center;
    color: var(--color-text);
    /* 本文は太字にしない */
    font-weight: 400;
    font-size: 0.8rem;
    line-height: 2.3;
    max-width: 900px;
    margin: 0 auto var(--space-md);
}

/*
 * NUMBERS のリード文だけ一回り大きく（0.96rem）。
 * 下線幅は min(480px, 70%) で文字の大きさに連動しないので、文字が線より長くなったり、
 * balance の改行位置が変わったりすることがあるが許容している（依頼主の判断）。
 */
.c-section__lead--rule {
    font-size: 0.96rem;
}

/* NUMBERS はサブ見出しではなくリード文の下に線がある（原本） */
.c-section__lead--rule::after {
    content: "";
    display: block;
    width: min(480px, 70%);
    height: 2px;
    margin: var(--space-sm) auto 0;
    background-color: var(--color-accent);
}

/*
 * 改行位置を <wbr> で指定した文だけに使う。日本語の文字と文字の間では改行させず、
 * <wbr> の位置でだけ折り返す（どのブラウザでも同じ位置で割れる）。
 * 収まらないときの保険として overflow-wrap:anywhere を併記する。
 */
.u-phrase {
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* PCでだけ効かせる改行。スマホ幅では消して文章を続けて流す */
@media (max-width: 599px) {
    br.u-br-pc {
        display: none;
    }
}

/* 電話番号・郵便番号・番地の途中で改行させない（futawa_nobr_numbers() が付ける） */
.u-nowrap {
    white-space: nowrap;
}

/*
 * 電話番号の前の受話器のマーク（futawa_tel_mark()。フッターの CONTACT とお問い合わせページで共用）。
 * 番号と同じ行に置いた inline の図形で、下端が数字の下端（ベースライン）に乗る。ボタンの中央そろえに任せると、
 * ブラウザ・書体によって数字の描かれる位置が変わり、マークだけ上下にずれて見えた。
 * 高さは数字の高さ（文字の大きさの約0.84倍）。丸い数字はベースラインより少し下まで描かれるので、その分（0.07em）下げる（実測）。
 */
.u-tel-mark {
    width: 0.84em;
    height: 0.84em;
    vertical-align: -0.07em;
}

/* 画面には出さず、読み上げソフトにだけ伝える文（メニューボタンの名前、住所の自動入力の結果など） */
.u-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}