@charset "UTF-8";

/* TOP と下層ページで使う部品: SNS バナー・セクション見出し・記事カード・スライダー・動画モーダル。ページごとの調整は top.css など、そのページの CSS に書く */

/*
 * SNS バナー（Figma B 案 679:190。1 枚 540×235。左に写真 265px、右に文字の欄 275px）
 * 文字・背景色・ボタンは HTML / CSS、写真だけ画像。1 列（〜1023px）は最大 540px で中央、1024px 以上は 2 枚を横に並べる。
 * 文字の欄は 275px（狭い画面ではバナーの幅の 64%）で、残りを写真にする。
 * 767px 以下は Figma SP「Quality / Banners」866:1733 の小さいバナー（335×146、写真 165px・文字の欄 170px、見出しはゴシックの太字、2 枚の間 12px）。
 */
.sns-banners {
    display: grid;
    grid-template-columns: minmax(0, 540px);
    justify-content: center;
    gap: 12px;
}

@media (min-width: 768px) {
    .sns-banners {
        gap: 20px;
    }
}

@media (min-width: 1024px) {
    .sns-banners {
        grid-template-columns: repeat(2, minmax(0, 540px));
    }
}

/* Figma: 540 + 60 + 540 = 1140px */
@media (min-width: 1280px) {
    .sns-banners {
        gap: 60px;
    }
}

/* SP は Figma の比率（写真 165 : 文字 170）、高さは最小 146px */
.sns-banner {
    display: grid;
    grid-template-columns: minmax(0, 165fr) minmax(0, 170fr);
    min-height: 146px;
    height: 100%;
    overflow: hidden;
    color: var(--color-green);
    background-color: #f4f3eb;
    text-decoration: none;
}

.sns-banner__photo {
    position: relative;
    overflow: hidden;
}

.sns-banner__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

@media (hover: hover) {
    .sns-banner:hover .sns-banner__photo img {
        transform: scale(1.04);
    }
}

/*
 * 文字の欄は上下中央。SP は Figma SP（866:1733。左の余白 約 22px）の並びで、文字は読める大きさまで小さくする。
 * Figma SP は PC のバナー画像を約 0.62 倍に縮めたもので、説明文・ボタンが 7px 台になり読めないため、説明文とボタンは 10px にとどめる
 */
.sns-banner__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    padding: 10px 8px 10px 20px;
}

.sns-banner__service {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.6875rem; /* 11px */
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 14px;
}

.sns-banner--youtube .sns-banner__service {
    color: #282828;
}

.sns-banner__service img {
    flex-shrink: 0;
    width: auto;
    height: 11px;
}

.sns-banner--instagram .sns-banner__service img {
    height: 13px;
}

/*
 * 見出しは Figma どおり 2 行（span ごとに改行）。収まらないときだけ文字単位で折り返す。
 * SP は Figma SP どおりゴシックの太字（YouTube 約 15px・Instagram 約 14px のため、「HIRABOと出かける、」が 1 行に収まる 14px にそろえる）。
 * PC（768px 以上）の Figma（画像）は明朝体。YouTube が約 24px・Instagram が約 20px と違うため、2 枚とも 21px にそろえる
 */
.sns-banner__title {
    margin-top: 6px;
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    line-height: 20px;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.sns-banner__title > span {
    display: block;
}

/* 説明文は文節（span）ごとに折り返す */
.sns-banner__desc {
    margin-top: 4px;
    font-size: 0.625rem; /* 10px */
    font-weight: 500;
    line-height: 1.5;
}

.sns-banner__desc > span {
    display: inline-block;
}

/* ボタン（Figma: PC 高さ 28px。YouTube は緑の塗り、Instagram は緑の枠）。バナー全体がリンクなので見た目だけ */
.sns-banner__button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 22px;
    margin-top: 8px;
    padding: 0 8px;
    border: 1px solid var(--color-green);
    font-size: 0.625rem; /* 10px */
    font-weight: 500;
    letter-spacing: 0.04em;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

/* 矢印は読み上げない（/ の後ろが読み上げる文字。対応していないブラウザは 1 行目を使う） */
.sns-banner__button::after {
    content: "→";
    content: "→" / "";
}

@media (hover: hover) {
    .sns-banner:hover .sns-banner__button {
        opacity: 0.85;
    }
}

.sns-banner--youtube .sns-banner__button {
    color: var(--color-white);
    background-color: var(--color-green);
}

/* 768px 以上は PC の Figma（540×235。文字の欄 275px） */
@media (min-width: 768px) {
    .sns-banner {
        grid-template-columns: minmax(0, 1fr) min(275px, 64%);
        min-height: 235px;
    }

    .sns-banner__body {
        padding: 24px 20px 24px 35px;
    }

    .sns-banner__service {
        gap: 6px;
        font-size: 0.8125rem; /* 13px */
        line-height: 20px;
    }

    .sns-banner__service img {
        height: 16px;
    }

    .sns-banner--instagram .sns-banner__service img {
        height: 20px;
    }

    .sns-banner__title {
        margin-top: 10px;
        font-family: var(--font-serif);
        font-size: 1.3125rem; /* 21px */
        font-weight: 600;
        line-height: 1.45;
    }

    .sns-banner__desc {
        font-size: 0.75rem; /* 12px */
        line-height: 1.6;
    }

    .sns-banner__button {
        gap: 10px;
        min-height: 28px;
        margin-top: 15px;
        padding: 0 14px;
        font-size: 0.75rem; /* 12px */
    }
}

/* 1024〜1279px は 2 枚並べると 1 枚が 540px より狭くなるので、文字の欄の左の余白を詰める */
@media (min-width: 1024px) {
    .sns-banner__body {
        padding-left: 24px;
    }
}

@media (min-width: 1280px) {
    .sns-banner__body {
        padding-left: 35px;
    }
}

/*
 * セクション見出し（Figma「Owners / Heading」「News / Heading」など: 小見出し + 見出し + 2 色の線）。SP の見出しは 24px
 */
.section-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

/*
 * SP（1023px まで）は TOP を含む全ページのセクションの見出しを左寄せにする（2026-10-21 先方指示）。PC はページごとの寄せ方のまま。
 * TOP と共通の「HIRABOと楽しむカーライフ」（.owners）の左右のはみ出しは top.css で左だけ戻す
 */
@media (max-width: 1023px) {
    .section-head {
        align-items: flex-start;
        text-align: left;
    }
}

.section-head__eyebrow {
    color: var(--color-accent);
    font-size: 0.8125rem; /* 13px */
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: 0.125rem; /* 2px */
    /* Figma の行の高さ「normal」（明朝で文字の大きさの約 1.5 倍。PC 18px → 27px、SP 13px → 20px）に合わせ、見出しの塊の高さを Figma とそろえる */
    line-height: 1.5;
}

/* セクションの見出し（h2）は全ページ SP 20px（下の @media。2026-10-21 に 28px から変更）/ PC 35px にそろえる（2026-10-19 ユーザー指示） */
.section-head__title {
    color: #333;
    font-size: 1.75rem; /* 28px */
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: 0.125rem; /* 2px */
    /* Figma の行の高さ（PC 35px → 53px、SP 28px → 42px。2 行になる SP の見出しも 1 行 42px） */
    line-height: 1.5;
    word-break: keep-all;
}

.section-head__title > span {
    display: inline-block;
}

/* SP のセクションの見出し（h2）は 20px（28px から 30% 小さく。全ページ共通。2026-10-21 先方指示）。PC は 35px のまま */
@media (max-width: 1023px) {
    .section-head__title {
        font-size: 1.25rem; /* 20px */
        letter-spacing: 0.08em;
        line-height: 1.6;
    }
}

/* 見出しの下の 2 色の線。全ページ左が薄い緑・右が緑（TOP の Figma どおり。2026-10-20 先方指示で全ページ統一） */
.section-head::after {
    width: 60px;
    height: 4px;
    margin-top: 4px;
    background: linear-gradient(to right, #bbcec5 50%, var(--color-green) 50%);
    content: "";
}

@media (min-width: 1024px) {
    .section-head__eyebrow {
        font-size: 1.125rem; /* 18px */
    }

    .section-head__title {
        font-size: 2.1875rem; /* 35px */
    }
}

/* 記事カード（写真が左。TOP のお知らせ）。カード全体をリンクにする。Figma「TOP_PC」「TOP_SP」: 写真は SP 100×75 / PC 140×93、文字は写真の上下中央 */
.news-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* キーボードで操作したときだけ、カード全体に枠を出す（リンク自体の枠は消している） */
.news-item:has(.news-item__link:focus-visible) {
    outline: 2px solid var(--color-green);
    outline-offset: 4px;
}

/* :has() に未対応のブラウザは、フォーカス中は常に出す */
@supports not selector(:has(*)) {
    .news-item:focus-within {
        outline: 2px solid var(--color-green);
        outline-offset: 4px;
    }
}

.news-item__thumb {
    flex-shrink: 0;
    width: 100px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: #e7eee9;
}

.news-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

@media (hover: hover) {
    .news-item:hover .news-item__thumb img {
        transform: scale(1.05);
    }
}

/* 文字の欄は写真の右の残り全部（Figma PC: 529 - 140 - 28 = 361px）。中身の幅にすると題名の折り返し位置が Figma とずれる */
.news-item__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.news-item__title {
    color: #333;
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.5714;
    /* 対応ブラウザ（Chrome 等）では文節で改行する。未対応は通常の改行 */
    word-break: auto-phrase;
}

.news-item__link {
    color: inherit;
    text-decoration: none;
}

.news-item__link:focus-visible {
    outline: none;
}

.news-item__link::after {
    position: absolute;
    inset: 0;
    content: "";
}

@media (hover: hover) {
    .news-item:hover .news-item__link {
        text-decoration: underline;
    }
}

.news-item__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--color-green);
    font-size: 0.75rem; /* 12px */
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 18px;
}

/* カテゴリー名と区切り線は離さない */
.news-item__category {
    white-space: nowrap;
}

/* カテゴリーと日付の間の区切り線（375px 未満は縦に積むので出さない） */
.news-item__category::after {
    display: none;
    width: 1px;
    height: 12px;
    margin-left: 8px;
    background-color: currentColor;
    opacity: 0.4;
    vertical-align: -1px;
    content: "";
}

@media (min-width: 375px) {
    .news-item__meta {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .news-item__category::after {
        display: inline-block;
    }
}

@media (min-width: 1024px) {
    .news-item {
        gap: 28px;
    }

    .news-item__thumb {
        width: 140px;
        aspect-ratio: 140 / 93;
    }

    .news-item__body {
        gap: 8px;
    }

    .news-item__title {
        font-size: 1.125rem; /* 18px */
        line-height: 30px;
    }

    .news-item__meta {
        font-size: 0.8125rem; /* 13px */
        line-height: 20px;
    }
}

/*
 * スライダー（写真・カードが 2 枚以上のとき main.js が動かす。1 枚のときは矢印・ドットを出さない）
 * main.js はスライドの位置（offsetLeft）をトラック基準で測るので、トラックを基準の箱にする
 */
.slider__track {
    position: relative;
    display: flex;
    overflow: hidden;
}

.slider[data-slider] .slider__track {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.slider[data-slider] .slider__track::-webkit-scrollbar {
    display: none;
}

/* 1 枚の幅は使う側で決める（既定は 1 画面に 1 枚） */
.slider__slide {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: start;
}

.slider__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 高さは Figma の 19px。矢印・ドット・停止ボタンの当たり判定（24px）は上下にはみ出させる */
.slider__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 19px;
    margin-top: 20px;
}

/* 右端の停止ボタンと同じ幅の余白を左に置き、矢印とドットを中央に保つ */
.slider__controls::before {
    width: 24px;
    content: "";
}

.slider__dots {
    display: flex;
    gap: 6px;
}

/* 矢印・ドットの間隔は 768px 以上で Figma どおり（SP は 320px に収まるよう詰める） */
@media (min-width: 768px) {
    .slider__controls {
        gap: 28px;
    }

    .slider__dots {
        gap: 18px;
    }
}

.slider__dot,
.slider__arrow,
.slider__toggle {
    padding: 0;
    background: none;
    border: 0;
}

/* 押しやすいよう 24px の当たり判定に 12px の丸を描く */
.slider__dot {
    width: 24px;
    height: 24px;
}

.slider__dot::before {
    display: block;
    width: 12px;
    height: 12px;
    margin: auto;
    background-color: rgb(51 51 51 / 0.3);
    border-radius: 50%;
    content: "";
}

.slider__dot[aria-current="true"]::before {
    background-color: var(--color-green);
}

.slider__arrow {
    width: 24px;
    height: 24px;
    color: #333;
}

/* 矢印は base.css（13px）。回した形が当たり判定の中央に見えるよう、矢印の向きと逆へ 3px ずらす */
.slider__arrow::before {
    --chevron-size: 13px;
    display: block;
    margin: auto;
}

.slider__arrow--prev::before {
    --chevron-angle: -135deg;
    translate: 3px 0;
}

.slider__arrow--next::before {
    translate: -3px 0;
}

/* 自動再生の停止／開始（WCAG 2.2.2: 5 秒を超えて動くものは止められるようにする） */
.slider__toggle {
    position: relative;
    width: 24px;
    height: 24px;
    color: #333;
    opacity: 0.6;
}

@media (hover: hover) {
    .slider__toggle:hover {
        opacity: 1;
    }
}

/* 再生中は「停止」アイコン（2 本線） */
.slider__toggle::before {
    position: absolute;
    inset: 6px 7px;
    border-right: 3px solid currentColor;
    border-left: 3px solid currentColor;
    content: "";
}

/* 停止中は「再生」アイコン（三角） */
.slider__toggle.is-paused::before {
    inset: 6px auto 6px 8px;
    border-top: 6px solid transparent;
    border-right: 0;
    border-bottom: 6px solid transparent;
    border-left: 10px solid currentColor;
}

/*
 * 動画のモーダル（オーナー様の動画。main.js が iframe を入れる）
 * SP は横幅いっぱい、768px 以上は左右に余白。横向きのスマホでも画面の高さに収まるよう幅を制限する。
 */
.video-modal {
    width: min(100%, (100vh - 60px) * 16 / 9);
    width: min(100%, (100dvh - 60px) * 16 / 9);
    max-width: none;
    max-height: none;
    margin: auto;
    padding: 0;
    overflow: visible;
    border: 0;
    background: none;
}

.video-modal::backdrop {
    background-color: rgb(0 0 0 / 0.8);
}

/* 「上から見た配置」のモーダルは開いたとき dialog 自体にフォーカスを置く（main.js）。その枠は出さない */
.layout-modal:focus {
    outline: none;
}

/* 開いている間に後ろのページをスクロールさせない指定は base.css（SP メニューと共通） */

.video-modal__bar {
    display: flex;
    justify-content: flex-end;
    padding: 0 20px;
}

.video-modal__close {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    color: var(--color-white);
    background: none;
    border: 0;
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    letter-spacing: 0.1em;
    cursor: pointer;
}

/* × */
.video-modal__close::after {
    width: 16px;
    height: 16px;
    background:
        linear-gradient(45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(-45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
    content: "";
}

@media (hover: hover) {
    .video-modal__close:hover {
        text-decoration: underline;
    }
}

/* YouTube のプレーヤーは 200×200px 以上が必要（狭い画面では上下に黒帯が付く） */
.video-modal__frame {
    aspect-ratio: 16 / 9;
    min-height: 200px;
    background-color: #000;
}

.video-modal__frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (min-width: 768px) {
    .video-modal {
        width: min(100% - 80px, 960px, (100vh - 120px) * 16 / 9);
        width: min(100% - 80px, 960px, (100dvh - 120px) * 16 / 9);
    }

    .video-modal__bar {
        padding: 0;
    }
}

/*
 * ご相談の窓口の白いカード（お問い合わせ・見学・電話。template-parts/contact-channels.php。TOP のご相談の窓口と下層の CTA で使う）
 * 〜1023px は Figma の SP の幅（335px）、PC は 1140px で中央に置く。TOP の帯に重ねる指定は top.css
 */
.contact-channels {
    display: flex;
    flex-direction: column;
    width: min(100%, 335px);
    margin-inline: auto;
    padding: 8px 12px;
    background-color: var(--color-white);
    box-shadow: 0 8px 4px rgb(0 0 0 / 0.1);
}

.contact-channel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 28px 0;
    text-align: center;
}

.contact-channel + .contact-channel {
    border-top: 2px solid rgb(47 107 86 / 0.2);
}

/*
 * 写真のリンクのホバー（.hover-zoom。オーナー様のカードの写真 .owner-card__thumb と同じ動き: 0.4 秒で 1.04 倍）。
 * 拡大した分は写真の枠（overflow: hidden の要素）で切る。同じ行き先のボタンがある写真のリンクは、Tab で止めず読み上げもしない
 * （tabindex="-1"・aria-hidden="true"）。来店チケット・記事の車種カード・パンフレットの表紙・アフターサポートの写真（2026-11-12 Chatwork 16:38〜16:45）
 */
.hover-zoom img {
    transition: transform 0.4s ease;
}

@media (hover: hover) {
    .hover-zoom:hover img {
        transform: scale(1.04);
    }
}

/*
 * 写真はボタンと同じページへのリンク（template-parts/contact-channels.php）。ホバーで写真を 1.04 倍に拡大し、枠からはみ出た分は切る
 * （オーナー様のカード .owner-card__thumb と同じ動き。2026-11-12 Chatwork で 11/10 の「持ち上げて影」から変更。Figma 845:1116・845:1054）
 */
.contact-channel__image-link {
    display: block;
    overflow: hidden;
    width: min(100%, 300px);
}

.contact-channel__image-link--pamphlet {
    width: min(100%, 280px);
}

.contact-channel__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 300 / 180;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.contact-channel__image--pamphlet {
    aspect-ratio: 280 / 180;
}

@media (hover: hover) {
    .contact-channel__image-link:hover .contact-channel__image {
        transform: scale(1.04);
    }
}

/* 文節（span）で折り返す。列が狭くて収まらないときは文節の中でも折り返す */
.contact-channel__text {
    color: #333;
    font-size: 1rem; /* 16px */
    font-weight: 500;
    line-height: 28px;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.contact-channel__text > span {
    display: inline-block;
}

.contact-channel__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: min(100%, 280px);
    min-height: 60px;
    padding: 0 20px;
    color: var(--color-white);
    background-color: var(--color-green);
    border: 1.5px solid var(--color-green);
    font-size: 1rem; /* 16px */
    font-weight: 500;
    letter-spacing: 0.0625rem; /* 1px */
    text-decoration: none;
    transition: opacity 0.2s ease;
}

/* 矢印（base.css）の大きさ */
.contact-channel__button::after {
    --chevron-size: 8px;
}

@media (hover: hover) {
    .contact-channel__button:hover {
        opacity: 0.85;
    }
}

.contact-channel__button--reserve {
    background-color: var(--color-accent);
    border: 1px solid var(--color-white);
}

.contact-channel--tel {
    justify-content: center;
    gap: 8px;
}

.contact-channel__tel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-green);
    font-family: var(--font-num);
    /*
     * Figma SP 866:1836: DIN Condensed 39.79px・字間 0.05em で番号の幅 約 224px。
     * 数字の書体は Oswald（DIN Condensed より約 1.2 倍横に広い）なので、番号の幅が Figma と同じになる大きさにする（字の高さもほぼ同じになる）
     */
    font-size: 2.0625rem; /* 33px */
    font-weight: 600;
    letter-spacing: 0.05em;
    /* Figma SP: 番号の行は 42px（1 だと 2px 低くなり、受付時間が上にずれる） */
    line-height: 42px;
    text-decoration: none;
    white-space: nowrap;
}

/* Figma: SP 36px / PC 49px */
.contact-channel__tel img {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
}

.contact-channel__hours {
    color: var(--color-green);
    font-size: 1rem; /* 16px */
    font-weight: 500;
    line-height: 27px;
    opacity: 0.5;
}

/* 「9:30～18:00」と「（水・祝・第2木曜は休み）」。SP は 2 行、768px 以上は続けて 1 行 */
.contact-channel__hours > span {
    display: block;
}

@media (min-width: 768px) {
    .contact-channel__hours > span {
        display: inline;
    }
}

@media (min-width: 1024px) {
    .contact-channels {
        flex-direction: row;
        width: min(100%, 1140px);
        padding: 48px 0;
    }

    .contact-channel {
        flex: 1;
        min-width: 0;
        padding: 0 16px;
    }

    .contact-channel + .contact-channel {
        border-top: 0;
        border-left: 2px solid rgb(47 107 86 / 0.2);
    }

    .contact-channel__text {
        font-size: 1.125rem; /* 18px */
        line-height: 1.6667;
    }

    /* 電話の案内は 1 行なので、Figma どおり行の高さを 35px にする */
    .contact-channel--tel .contact-channel__text {
        line-height: 35px;
    }

    .contact-channel__button {
        min-height: 68px;
        font-size: 1.125rem; /* 18px */
    }

    /*
     * 1024〜1279px は列が狭いので小さくする（Figma の 42px 相当は 34px だが、列の左右の余白が 1024px で 8px しか残らない）。
     * 2026-11-09 Chatwork の指示（左右の余白を確保する）で、アイコンを 40 → 30px、番号を 34 → 32px にして左右を 20px ほどあける
     */
    .contact-channel__tel {
        font-size: 2rem; /* 32px */
        line-height: 1;
    }

    .contact-channel__tel img {
        width: 30px;
        height: 30px;
    }

    .contact-channel__hours {
        line-height: 25px;
    }
}

/*
 * Figma PC 845:1133 は DIN Condensed 54px（番号の幅 約 295px）で、同じ幅は 44px・アイコン 49px。それだと列の左右の余白が 12px ほどしか残らないので、
 * 2026-11-09 Chatwork の指示（アイコンを小さく・番号を一回り小さく・左右の余白を確保）で、アイコン 36px・番号 42px にして左右を 25px ほどあける
 */
@media (min-width: 1280px) {
    .contact-channel__tel {
        font-size: 2.625rem; /* 42px */
    }

    .contact-channel__tel img {
        width: 36px;
        height: 36px;
    }
}

/*
 * ページ内リンクのボタン（Figma「02 PAGE NAV」。HIRABOについて・よくあるご質問・車種のページで同じ形）。
 * 白い四角に緑の文字と下向きの矢印。項目が多いときは折り返す。
 * よくあるご質問（.faq__nav）は元のクラス名のまま、ここにセレクターを足して同じ形にする。
 * ページごとの違い（よくあるご質問の SP の文字の大きさなど）は、そのページの CSS で上書きする
 */
.page-nav {
    padding: 24px 20px 8px;
    background-color: var(--color-pale);
}

.page-nav__list,
.faq__nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: min(100%, 1140px);
    margin-inline: auto;
}

/* SP は Figma 921:390 どおり余白 10 / 10 / 10 / 12px・文字と矢印の間 6px。項目名は短い強調なので 700 */
.page-nav__link,
.faq__nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 10px 10px 12px;
    color: var(--color-green);
    background-color: var(--color-white);
    border: 1px solid #dde5df;
    font-size: 0.8125rem; /* 13px */
    font-weight: 700;
    line-height: 16px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

/*
 * 下向きの矢印。矢印の欄は Figma の 10px 角（5px の矢印を左右 2.5px ずつ空けて置く）。
 * 矢印の描き方は base.css の山形の矢印と同じ（.faq__nav-link は base.css のセレクターに入っている）
 */
.page-nav__link::after {
    flex-shrink: 0;
    width: var(--chevron-size, 7px);
    height: var(--chevron-size, 7px);
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(var(--chevron-angle, 45deg));
    content: "";
}

.page-nav__link::after,
.faq__nav-link::after {
    --chevron-size: 5px;
    --chevron-angle: 135deg;
    margin: -3px 2.5px 0;
    border-top-width: 1.5px;
    border-right-width: 1.5px;
}

@media (hover: hover) {
    .page-nav__link:hover,
    .faq__nav-link:hover {
        opacity: 0.85;
    }
}

@media (min-width: 1024px) {
    .page-nav {
        padding: 40px 70px 41px;
    }

    .page-nav__list,
    .faq__nav-list {
        justify-content: center;
        gap: 12px;
    }

    .page-nav__link,
    .faq__nav-link {
        gap: 12px;
        padding: 14px 20px 14px 24px;
        font-size: 1rem; /* 16px */
        line-height: 19px;
    }

    /* Figma の 10px 角に収める（6px の矢印を左右 2px ずつ。2.5px だと 1px 広がり、1 行に入らない） */
    .page-nav__link::after {
        --chevron-size: 6px;
        margin-inline: 2px;
    }
}

/*
 * 1 行に収める版（.page-nav__list--row。HIRABOについての 7 個・よくあるご質問の 6 個。2026-10-19 ユーザー指示）。
 * 1024〜1279px は Figma の大きさだと入らないので、文字と余白を詰める
 */
@media (min-width: 1024px) {
    .page-nav__list--row,
    .faq__nav-list {
        flex-wrap: nowrap;
    }

    .page-nav__list--row .page-nav__link,
    .faq__nav-link {
        white-space: nowrap;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .page-nav__list--row,
    .faq__nav-list {
        gap: 8px;
    }

    .page-nav__list--row .page-nav__link,
    .faq__nav-link {
        gap: 8px;
        padding: 14px 12px 14px 16px;
        font-size: 0.875rem; /* 14px */
    }
}

/* ============================================================
 * 共通のボタン
 * 緑の地のボタン（.button）は base.css。ここは全ページで同じ形にするボタン:
 * - 白いラベル + 右端の緑の矢印の欄（.label-button）
 * - 緑の線の枠のボタン（.outline-button）
 * - 白地・緑の枠で右に矢印の、大きさは .button と同じボタン（.button.button--outline）
 * ページごとの置き場所の余白・幅は、そのページの CSS に書く
 * ============================================================ */

/*
 * 白地・緑の枠のボタン（Figma: 車種のページ「よくあるご質問をすべて見る」）。
 * 形・大きさ・矢印は共通の .button のまま、色だけを変える。<a class="button button--outline"><span class="button__label">文字</span></a>
 */
.button--outline {
    color: var(--color-green);
    background-color: var(--color-white);
    border: 1px solid var(--color-green);
}

@media (hover: hover) {
    .button--outline:hover {
        opacity: 1;
        background-color: var(--color-pale);
    }
}

@media (min-width: 1024px) {
    .button--outline {
        border-width: 1.5px;
    }
}

/*
 * 白いラベル + 右端の緑の矢印の欄（TOP のラインナップ「〜を見る」が基準。HIRABOについての購入後サポート、車種のページのラインナップも同じ）
 * <a class="label-button"><span>文字</span></a>
 */
.label-button {
    display: flex;
    width: min(100%, 360px);
    height: 60px;
    color: var(--color-green);
    font-size: 1rem; /* 16px */
    font-weight: 500;
    letter-spacing: 2px;
    text-decoration: none;
}

.label-button span {
    display: flex;
    flex: 1;
    align-items: center;
    min-width: 0;
    padding-left: 20px;
    background-color: var(--color-white);
    border-bottom: 2px solid var(--color-green);
    transition: background-color 0.2s ease;
}

.label-button::after {
    flex-shrink: 0;
    width: 50px;
    background: var(--color-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16'%3E%3Cpath d='M1 1l7 7-7 7' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / 10px 16px no-repeat;
    content: "";
}

/*
 * 緑の線の枠のボタン（記事ページ「お役立ち情報一覧へ戻る」が基準。Figma「Button / お役立ち情報一覧へ戻る」SP 高さ 47px / PC 52px）。
 * HIRABOについての「平野オートボディーのサイトを見る」も同じ
 */
.outline-button {
    display: block;
    padding: 14px;
    color: var(--color-green);
    border: 1px solid var(--color-green);
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    line-height: 17px;
    text-align: center;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

@media (hover: hover) {
    .label-button:hover span {
        background-color: var(--color-pale);
    }

    .outline-button:hover {
        opacity: 0.85;
    }
}

@media (min-width: 1024px) {
    .label-button {
        height: 66px;
        font-size: 1.125rem; /* 18px */
    }

    .outline-button {
        padding: 16px 28px;
        font-size: 0.9375rem; /* 15px */
        line-height: 18px;
    }
}

/* ============================================================
 * 共通の文字・リンク
 * 95% 同じ見た目の文字の部品は、全ページでここの 1 つを使う（基準は TOP、TOP に無いものは主に使うページ）:
 * - セクション見出し（.section-head）の左寄せ・線なし・複数行の修飾
 * - 矢印付きの文字リンク「詳細を見る」「一覧で見る」など（.more-link。基準は TOP のオーナーカード）
 * - 記事のカテゴリーと日付（.post-meta / .post-category。基準はお役立ち情報一覧のカード）
 * - リード文（.lead。基準は TOP のオーナー紹介）
 * - 注記（.note。基準は HIRABOについての購入後サポート）
 * 置き場所の余白・寄せ方は、そのページの CSS に書く
 * ============================================================ */

/* 見出しの左寄せ（Figma「H2 / Left」。HIRABOについて・車種のページ）。一言・見出し・線の間隔は TOP と同じ 16px */
.section-head--left {
    align-items: flex-start;
    text-align: left;
}

/* 見出しの下の 2 色の線を出さない（HIRABOについてのストーリー・品質・購入後サポート） */
.section-head--no-bar::after {
    content: none;
}

/* PC で 2〜3 行になる見出しは、行の高さを Figma の 56px（35px の 1.6 倍）にする。SP は TOP と同じ 1.5 倍（42px） */
@media (min-width: 1024px) {
    .section-head--multiline .section-head__title {
        line-height: 56px;
    }
}

/*
 * 矢印付きの文字リンク（TOP のオーナーカード「詳細を見る」が基準。お知らせの「一覧で見る」、記事カード、よくあるご質問の回答の中のリンクも同じ）。
 * 矢印は base.css（7px・線 2px）。文字と矢印の間は 14px
 */
.more-link {
    display: flex;
    flex-shrink: 0;
    width: fit-content;
    align-items: center;
    gap: 14px;
    color: var(--color-green);
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    letter-spacing: 0.0625rem; /* 1px */
    /* Figma の行の高さ「normal」（Zen Kaku Gothic New で約 1.45 倍。SP 14px → 20px、PC 16px → 23px） */
    line-height: 1.45;
    text-decoration: none;
}

/* 記事のカテゴリーと日付（お役立ち情報一覧のカードが基準。ピックアップ・記事ページの見出しの上も同じ） */
.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    color: #666;
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    line-height: 24px;
}

/* カテゴリーの札（高さ 24px） */
.post-category {
    padding: 2px 10px;
    color: var(--color-green);
    background-color: #e9efe9;
    font-size: 0.8125rem; /* 13px */
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 20px;
}

/* リード文（TOP のオーナー紹介が基準: SP 15px / 30px、PC 18px / 40px） */
.lead {
    color: #333;
    font-size: 0.9375rem; /* 15px */
    font-weight: 500;
    line-height: 30px;
}

/*
 * 注記（SP 13px / 22px、PC 14px / 24px、#666。ゴシック 500）。
 * フォームの注記（.form-box__note・.form-row__note）は Contact Form 7 に登録した中身（inc/forms.php）のクラス名のまま、ここで同じ文字にする
 */
.note,
.form-box__note,
.form-row__note {
    color: #666;
    font-size: 0.8125rem; /* 13px */
    font-weight: 500;
    line-height: 22px;
}

@media (hover: hover) {
    a.more-link:hover {
        text-decoration: underline;
    }
}

@media (min-width: 1024px) {
    .more-link {
        font-size: 1rem; /* 16px */
    }

    .lead {
        font-size: 1.125rem; /* 18px */
        line-height: 40px;
    }

    .note,
    .form-box__note,
    .form-row__note {
        font-size: 0.875rem; /* 14px */
        line-height: 24px;
    }
}

/*
 * SP のセクションの中の見出し（h3）は 18px にそろえる（h2 20px より小さく、本文 14〜15px より大きく。全ページ共通。2026-10-21 先方指示）。
 * ページごとの CSS より後で効くよう body を付ける。PC はページごとの大きさのまま。ラインナップの車種名（ロゴの扱い）は対象外
 */
@media (max-width: 1023px) {
    body .craft-point__title,
    body .history-item__title,
    body .quality-division__title,
    body .about-process-step__title,
    body .about-movie__title,
    body .model-step__title,
    body .model-use__label-ja,
    body .model-mode__title,
    body .model-equip__title,
    body .model-custom__sub,
    body .model-option__title,
    body .model-flow-step__title,
    body .model-movie__title,
    body .model-power__title {
        font-size: 1.125rem; /* 18px */
        line-height: 1.6;
    }
}

/*
 * 来店チケット（見学・試乗の予約の案内。template-parts/visit-ticket.php。Figma「Catalog / 来店チケット（見学・試乗の予約）」
 * カタログ一覧 PC 2041:12052 / SP 2041:12209、会社概要・アクセス PC 2041:7317）。カタログ一覧と会社概要・アクセスで使う。
 * SP は写真 → 横の切り取り線 → 文章 → ボタンの縦並び。768px 以上は写真を左に置き、縦の切り取り線をはさむ。
 * 切り取り線の両端の半円は、置いた場所の背景色（--visit-ticket-notch。既定は薄い緑）で型抜きに見せる
 */
.visit-ticket {
    --visit-ticket-notch: var(--color-pale);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #333;
    background-color: #f4ead8;
    border-radius: 4px;
}

.visit-ticket__photo {
    overflow: hidden;
}

.visit-ticket__photo-link {
    display: block;
}

.visit-ticket__photo img {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
}

.visit-ticket__body {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Figma SP は文章とボタンの間に 6px の空き（Spacer）をはさみ、間隔 10px が 2 回入る */
    gap: 26px;
    padding: 32px 24px 28px;
}

/* 切り取り線（SP は横。点線 #cdbfa6 の 2px と、左右の端の半円） */
.visit-ticket__body::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 24px;
    background:
        radial-gradient(circle at 0 50%, var(--visit-ticket-notch) 12px, transparent 12.5px),
        radial-gradient(circle at 100% 50%, var(--visit-ticket-notch) 12px, transparent 12.5px),
        repeating-linear-gradient(to right, #cdbfa6 0 6px, transparent 6px 11px) center / calc(100% - 32px) 2px no-repeat;
    content: "";
}

.visit-ticket__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.visit-ticket__stamp {
    padding: 2px 10px;
    color: var(--color-accent);
    border: 1.5px solid currentColor;
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    letter-spacing: 1.5px;
    line-height: 20px;
}

.visit-ticket__heading {
    font-family: var(--font-serif);
    font-size: 1.375rem; /* 22px */
    font-weight: 600;
    line-height: 1.5;
}

.visit-ticket__lead {
    font-size: 1rem; /* 16px */
    font-weight: 500;
    line-height: 1.7;
}

/* SP は行を続けて流し、文節（.visit-ticket__line の中の span）の切れ目で折り返す（Figma SP の改行の位置） */
.visit-ticket__line > span {
    display: inline-block;
}

/* 予約のボタン（Figma: 橙・角丸 3px・下に濃い影。矢印は共通の山形） */
.visit-ticket__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 60px;
    padding: 0 20px;
    color: var(--color-white);
    background-color: var(--color-accent);
    border-radius: 3px;
    box-shadow: 0 4px 0 rgb(115 64 31 / 0.25);
    font-size: 1.0625rem; /* 17px */
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.visit-ticket__button::after {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    content: "";
}

@media (hover: hover) {
    .visit-ticket__button:hover {
        opacity: 0.85;
    }
}

/* 768px 以上: 写真を左に置き、縦の切り取り線をはさむ。1023px までは文章の下にボタン */
@media (min-width: 768px) {
    .visit-ticket {
        flex-direction: row;
        min-height: 250px;
    }

    /* 写真は箱いっぱいに重ね、高さは文章の側（最小 250px）で決める（写真の縦横比で箱が伸びないように） */
    .visit-ticket__photo {
        position: relative;
        flex: 0 0 clamp(240px, 28%, 320px);
    }

    .visit-ticket__photo img {
        position: absolute;
        inset: 0;
        height: 100%;
    }

    .visit-ticket__body {
        flex: 1;
        justify-content: center;
        padding: 36px 40px 36px 64px;
    }

    .visit-ticket__body::before {
        width: 24px;
        height: 100%;
        background:
            radial-gradient(circle at 50% 0, var(--visit-ticket-notch) 12px, transparent 12.5px),
            radial-gradient(circle at 50% 100%, var(--visit-ticket-notch) 12px, transparent 12.5px),
            repeating-linear-gradient(to bottom, #cdbfa6 0 6px, transparent 6px 11px) center / 2px calc(100% - 32px) no-repeat;
    }

    .visit-ticket__text {
        gap: 10px;
    }

    .visit-ticket__heading {
        font-size: 1.625rem; /* 26px */
    }

    /* 768px 以上は Figma PC の改行の位置（行ごと）で改行する */
    .visit-ticket__line {
        display: block;
    }

    .visit-ticket__button {
        align-self: flex-start;
        min-width: 264px;
    }
}

/* 1024px 以上: 文章の右にボタン（Figma PC: 幅 264px・高さ 68px・18px） */
@media (min-width: 1024px) {
    /* 写真は Figma どおり 320px（カタログ一覧 1090px・会社概要 1140px のどちらでも） */
    .visit-ticket__photo {
        flex-basis: 320px;
    }

    .visit-ticket__body {
        flex-direction: row;
        align-items: center;
        gap: 32px;
    }

    .visit-ticket__text {
        flex: 1;
        min-width: 0;
    }

    .visit-ticket__button {
        flex-shrink: 0;
        align-self: center;
        min-height: 68px;
        font-size: 1.125rem; /* 18px */
    }
}

/*
 * SP のスクロール中の帯（車種のページ: SP ページ内リンク案 434:2 の案A ②③。お知らせ・ブログも同じ形。2026-11-10 Chatwork）。
 * ページの頭のボタンの列（[data-scroll-toc-trigger]）を通り過ぎたら、ヘッダーのすぐ下に高さ 56px（--scroll-toc-height）の白い帯を出す（main.js が is-visible を付ける）。
 * 50〜60 代の方にも帯があると分かるよう、48px から一回り大きくした（文字 13〜14px → 15〜16px、「目次」12px → 14px。2026-11-10 18:46 Chatwork）。
 * 左に「SUZY｜今いる項目名」（お知らせ・ブログは「お知らせ・ブログ｜今のカテゴリー」）、右に「目次」のボタン。押すと帯の下にパネルが開き、後ろを暗くする。
 * HTML は template-parts/model/page-nav.php・template-parts/topics-list.php。
 * 帯は固定 CTA（z-index: 90）より手前、ヘッダー（100）より奥。PC（1024px〜）は出さない（車種のページは白い帯、お知らせ・ブログはボタンの列が追従する）
 */
:root {
    --scroll-toc-height: 56px;
}

.scroll-toc {
    position: fixed;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-height));
    right: 0;
    left: 0;
    z-index: 95;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.scroll-toc.is-visible {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
}

.scroll-toc__bar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: var(--scroll-toc-height);
    padding: 0 12px 0 20px;
    background-color: var(--color-white);
    box-shadow: 0 6px 16px rgb(0 0 0 / 0.08);
}

/* 「SUZY」（ページの名前）と項目名の間に縦線 */
.scroll-toc__current {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.scroll-toc__name {
    flex-shrink: 0;
    color: var(--color-green);
    font-family: var(--font-en);
    font-size: 1rem; /* 16px */
    font-weight: 800;
    letter-spacing: 0.6px;
    line-height: 20px;
}

/* ページの名前が日本語（お知らせ・ブログ・よくあるご質問）のときは、車種名の英字の書体ではなく本文の書体の太字にする */
.scroll-toc--ja .scroll-toc__name {
    font-family: inherit;
    font-size: 0.9375rem; /* 15px */
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 22px;
}

.scroll-toc__current::before {
    order: 1;
    flex-shrink: 0;
    width: 1px;
    height: 16px;
    background-color: #dde5df;
    content: "";
}

.scroll-toc__section {
    order: 2;
    overflow: hidden;
    color: #333;
    font-size: 0.9375rem; /* 15px */
    letter-spacing: 0.3px;
    line-height: 22px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 「目次」のボタン（Figma: 文字 12px・上下 7px・左右 12px・枠 1px を一回り大きく 14px・上下 8px・左右 14px）。開いている間は緑の地に白い文字で「閉じる」 */
.scroll-toc__toggle {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    color: var(--color-green);
    background-color: var(--color-white);
    border: 1px solid var(--color-green);
    border-radius: 2px;
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 20px;
    cursor: pointer;
}

/* 下向きの矢印（Figma: 10px 角）。開いている間は上向き */
.scroll-toc__toggle::after {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin: -3px 2px 0;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(135deg);
    content: "";
}

.scroll-toc__toggle[aria-expanded="true"] {
    color: var(--color-white);
    background-color: var(--color-green);
}

.scroll-toc__toggle[aria-expanded="true"]::after {
    margin-top: 3px;
    transform: rotate(-45deg);
}

/* 後ろを暗くする部分（帯の下から画面の下端まで。固定 CTA も覆う） */
.scroll-toc__backdrop {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    height: 100vh;
    background-color: rgb(0 0 0 / 0.35);
}

.scroll-toc__backdrop[hidden],
.scroll-toc__panel[hidden] {
    display: none;
}

/* 目次のパネル。画面が低いときはパネルの中だけスクロールする */
.scroll-toc__panel {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - var(--header-height) - var(--scroll-toc-height));
    max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px) - var(--header-height) - var(--scroll-toc-height));
    padding: 4px 0 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--color-white);
    box-shadow: 0 6px 16px rgb(0 0 0 / 0.08);
}

/* 項目（Figma: 文字 14px・上下 12px・左 24px・右 20px・下に罫線を、帯に合わせて一回り大きく 16px・上下 14px）。今いる項目は薄い緑の地に緑の太字 */
.scroll-toc__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px 14px 24px;
    color: #333;
    border-bottom: 1px solid #eee;
    font-size: 1rem; /* 16px */
    letter-spacing: 0.5px;
    line-height: 22px;
    text-decoration: none;
}

.scroll-toc__link::after {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    margin: -3px 2px 0;
    color: var(--color-green);
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(135deg);
    content: "";
}

/* 今いる項目（車種のページは main.js が aria-current="true"、お知らせ・ブログは今のカテゴリーに aria-current="page"） */
.scroll-toc__link[aria-current] {
    color: var(--color-green);
    background-color: #e9efe9;
    font-weight: 700;
}

@media (hover: hover) {
    .scroll-toc__link:hover {
        color: var(--color-green);
    }
}

/* 375px より狭い画面（320px など）は、項目名が省略されすぎないよう文字と「目次」のボタンを少し小さくする（帯の高さは 56px のまま） */
@media (max-width: 374px) {
    .scroll-toc__bar {
        gap: 8px;
        padding-right: 10px;
        padding-left: 16px;
    }

    .scroll-toc__current {
        gap: 8px;
    }

    .scroll-toc__name {
        font-size: 0.875rem; /* 14px */
    }

    .scroll-toc--ja .scroll-toc__name,
    .scroll-toc__section {
        font-size: 0.8125rem; /* 13px */
        letter-spacing: 0;
    }

    .scroll-toc__toggle {
        padding: 8px 10px;
        font-size: 0.8125rem; /* 13px */
        letter-spacing: 0.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-toc,
    .scroll-toc.is-visible {
        transform: none;
        transition: none;
    }
}

@media (min-width: 1024px) {
    .scroll-toc {
        display: none;
    }
}