/* ========================================
   全体の文字（フォント・太さ・字間）
   トモクル / generatepress-child

   ・数値は :root の変数だけで調整する。
   ・既存の CSS は書き換えず、すべての CSS の後に読み込んで上書きしている。
   ・取り消すときは functions.php の「全体の文字」の読み込み（Noto Sans JP と このファイル）を外す。
   ・読み込みは表側のページだけ（管理画面・ブロックエディタには入らない）。
======================================== */

:root {
    --tc-font-family: "Noto Sans JP", sans-serif;
    --tc-text-weight: 700;
    --tc-text-spacing: .05em;
}

/* ========================================
   フォント
   GeneratePress が body・フォーム部品に指定しているシステムフォントを置き換える
======================================== */
body,
h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
select,
textarea {
    font-family: var(--tc-font-family);
}

/* ========================================
   太さ
   ・GeneratePress が normal（400）にしている body・見出し・フォーム部品を太くする
     （要素セレクタなので、子テーマで 700 以上を指定している箇所はそちらが優先され、下がらない）
   ・子テーマで 700 未満を指定している箇所は、同じセレクタで上書きする
======================================== */
body,
h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
select,
textarea {
    font-weight: var(--tc-text-weight);
}

/* 600 → header.css / content.css / about.css */
.tc-sp-nav__list li a,
.tc-post-nav a,
.tc-pagination .page-numbers li a,
.tc-pagination .page-numbers li span,
.tc-about-page__intro-copy h2,
.tc-about-page__message-grid h2,
.tc-about-page__license-grid h3 {
    font-weight: var(--tc-text-weight);
}

/* 500 → service.css / about.css */
.tc-service-flow__list p,
.tc-service-m3__box-title,
.tc-service-faq__item dt,
.tc-service-faq__item dd,
.tc-about-page__greeting-copy {
    font-weight: var(--tc-text-weight);
}

/* ========================================
   字間
   ・要素ごとに指定し、どの文字サイズでも同じ em になるようにする
     （body にだけ指定すると、body の文字サイズで px に固定されて引き継がれるため）
   ・:where() で詳細度を 0 にしているので、個別に letter-spacing を指定している箇所はそのまま
   ・個別指定がある箇所の中の文字は、親の字間をそのまま引き継ぐ
======================================== */
:where(body, body *) {
    letter-spacing: var(--tc-text-spacing);
}

:where(
    .tc-header .nav-list li a,
    .tc-header .btn-tel__text,
    .tc-mv__catch,
    .tc-tag,
    .tc-about__lead,
    .tc-page-cta__button,
    .tc-subpage-hero__title,
    .tc-tab__btn,
    .tc-service-m3__def,
    .tc-service-m3__list li,
    .tc-service-gallery__caption,
    .tc-case-card__label
) * {
    letter-spacing: inherit;
}

/* ========================================
   崩れの調整（変数の値は変えず、該当箇所だけ）
======================================== */

/*
 * スマホで、1行に収まっていた見出しが字間の分だけはみ出し、最後の1〜2文字だけが次の行に落ちる
 * ・トップ「よくある不用品のお悩み…」（「み…」だけが2行目）
 * ・記事本文の見出し（「まとめ：…から」の「ら」だけが2行目など）
 * ・about 代表あいさつの小見出し（「い」だけが2行目）
 * → 480px 以下はこれらの見出しの字間を 0 に戻して1行に収める。
 *   それでも収まらない幅（360px など）では、行の長さをそろえて折り返す。
 */
.tc-worry__title,
.tc-article__body :is(h2, h3, h4),
.tc-about-page__greeting-block h3 {
    text-wrap: balance;
}

@media (max-width: 480px) {
    .tc-worry__title,
    .tc-worry__title *,
    .tc-article__body :is(h2, h3, h4),
    .tc-article__body :is(h2, h3, h4) *,
    .tc-about-page__greeting-block h3 {
        letter-spacing: 0;
    }
}

/* サービスの料金表（768px 以下）: 「最低料金(リサイクル家電を含む場合)」の「)」だけが3行目に落ちるため、項目名と金額の字間は元に戻す */
@media (max-width: 768px) {
    .tc-service-price-list__row dt,
    .tc-service-price-list__row dd {
        letter-spacing: 0;
    }
}