@charset "UTF-8";

/* 全ページ共通の土台: デザイントークン・基本スタイル・スクリーンリーダー向けテキスト・スキップリンク・ボタン・モーダルを開いている間のスクロール止め（リセットは reset.css） */

:root {
    --color-ink: #0a0d0a;
    --color-text: #222;
    --color-white: #fff;
    --color-green: #2f6b56;
    /* 小見出しと「見学・試乗を予約」のボタン */
    --color-accent: #c9784a;
    /* 緑の上の英語のラベル（下層のタイトル・SUZY の KV）とヘッダーのナビのホバーの下線（Figma SUZY「TOWNACE BASE CAMPER」） */
    --color-accent-light: #e7c2ae;
    --color-pale: #f7f9f4;
    /*
     * 和文の書体（Figma「フォント変更」845:717 / SP 866:1420）
     * - 本文・ボタン・ナビ・記事タイトルなどはゴシック（Medium 500 が基本。バッジ・価格・ラベルなど目立たせる所は Bold 700、コピーライトは Regular 400）
     * - キャッチ・見出し（h1〜h3・セクション見出し・見出しの上の一言・人名）は明朝。Figma は游明朝 Demibold なので太さは 600（2026-10-16 に Shippori Mincho から変更）
     *   游明朝は Windows・Mac に入っている。入っていない iPhone はヒラギノ明朝、Android などは Shippori Mincho（Google Fonts。使うときだけ届く）で表示する
     * - セクション見出しの大きさ（components.css の section-head）: 上の一言 SP 13px / PC 18px、見出し SP 26px / PC 35px
     * 読み込む太さはゴシック 400・500・700、明朝 600 だけ（functions.php の HIRABO_GOOGLE_FONTS）。ほかの太さを指定すると近い太さで表示される
     */
    --font-sans: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;
    --font-serif: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Shippori Mincho", serif;
    --font-en: Montserrat, "Helvetica Neue", Arial, sans-serif;
    /* 電話番号・価格などの数字。全ページ Oswald SemiBold（SUZY の Figma に合わせて統一。Google Fonts。2026-10-20 先方指示） */
    --font-num: Oswald, "Arial Narrow", sans-serif;
    --header-height: 70px;
    /* SP の画面下に固定する資料請求・見学予約のボタン（Figma: 56px） */
    --cta-bar-height: 56px;
    --content-width: 1140px;
    /* 広い画面での中身の最大幅（2026-10-07 決定）。これより広い画面では、背景は画面いっぱいに広げ、画面の端に付けた要素はこの幅で止めて中央に置く */
    --layout-max-width: 1920px;
}

@media (min-width: 1024px) {
    :root {
        --header-height: 74px;
    }
}

html {
    scroll-padding-top: var(--header-height);
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/*
 * line-break: strict で、行の頭に「ー」や小さい「ッ」「ャ」などが来ないようにする（例: TOP の SP のオーナーのカードで「オ／ーナー」と切れていた。2026-11-09）。
 * 文節で折り返す見出しなどの指定（word-break: keep-all と span・wbr）はそのまま効く
 */
body {
    color: var(--color-text);
    background-color: var(--color-white);
    font-family: var(--font-sans);
    font-weight: 500;
    line-break: strict;
}

/* クラスの無い見出し（固定ページ・本文のブロックの見出し）も明朝にする。:where で詳細度を 0 にし、部品ごとの指定を優先する */
:where(h1:not([class]), h2:not([class]), h3:not([class]), h2.wp-block-heading, h3.wp-block-heading) {
    font-family: var(--font-serif);
    font-weight: 600;
}

/* ヘッダーを固定しているため、KV の無いページは本文をヘッダーの下から始める */
body:not(.home) {
    padding-top: var(--header-height);
}

/* スクリーンリーダー向けテキスト（WordPress 標準のクラス名） */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* スキップリンクはキーボードでフォーカスしたときだけ表示する */
.skip-link:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 1000;
    width: auto;
    height: auto;
    margin: 0;
    padding: 12px 16px;
    clip-path: none;
    color: var(--color-text);
    background-color: var(--color-white);
    outline: 2px solid currentColor;
}

/*
 * 山形の矢印（Figma の「>」）。枠線の 2 辺を 45° 回して描く。矢印を付ける部品はここにセレクターを足す。
 * 大きさは各部品で --chevron-size（既定 7px）、向きは --chevron-angle（既定 45deg = 右向き。-135deg で左向き）を変える。色は文字色
 */
.button::after,
.header-cta::after,
.footer-cta::after,
.footer-nav__item::before,
.cta-bar__link::after,
.more-link::after,
.contact-channel__button::after,
.slider__arrow::before,
.faq__nav-link::after,
.page-numbers--prev::before,
.page-numbers--next::before {
    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: "";
}

/*
 * ボタン（Figma「Button / HIRABOの成り立ちと思いを読む」「品質と製作体制を見る」）
 * SP（〜1023px）は横幅いっぱい・高さ 60px、PC は最小幅 398px・高さ 66px（Figma どおり）。
 * PC で幅を固定しないのは、Web フォントが届く前の代替フォントなど文字幅が広いときにボタンを広げるため。
 */
.button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 60px;
    padding: 0 24px;
    color: var(--color-white);
    background-color: var(--color-green);
    font-size: 1rem; /* 16px */
    font-weight: 500;
    letter-spacing: 0.125em;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

/*
 * ホバーの見た目は、マウスなどで要素の上に乗せられる端末だけに付ける（@media (hover: hover)。テーマの CSS はすべてこの書き方）。
 * スマホなどのタッチ操作では、指で触れた要素にホバーの見た目が残ったままになるため
 */
@media (hover: hover) {
    .button:hover {
        opacity: 0.85;
    }
}

/*
 * ボタンの矢印（Figma「Polygon 2」: 幅 9.95px × 高さ 14px、線 2px の細長い「>」）。
 * 共通の矢印（枠線を 45° 回す）は直角で幅と高さが同じになるため、この部品だけ SVG を型抜き（mask）にして描き、色は文字色にする。
 * 線の太さ・角のとがりがはみ出す分だけ要素を大きくし、負の余白で並びの上の大きさを 10×14px に戻す。
 * 右の負の余白で、矢印の右端をボタンの右端から SP 14px / PC 30px（Figma どおり）にする
 */
.button::after {
    width: 13px;
    height: 16px;
    margin: -1px -12px -1px -1px;
    border: 0;
    background-color: currentColor;
    transform: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 16'%3E%3Cpath d='M1 1l9.95 7L1 15' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 16'%3E%3Cpath d='M1 1l9.95 7L1 15' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* 768px 以上は文字を大きくして 1 行にする */
@media (min-width: 768px) {
    .button {
        padding: 0 40px;
        font-size: 1.125rem; /* 18px */
        letter-spacing: 0.11em;
        white-space: nowrap;
    }
}

@media (min-width: 1024px) {
    .button {
        display: inline-flex;
        width: auto;
        min-width: min(100%, 398px);
        max-width: 100%;
        min-height: 66px;
    }
}

/* 折り返すときは文節（span）単位にする */
.button__label {
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.button__label > span {
    display: inline-block;
}

/* モーダル（SP メニュー・動画）を開いている間は、後ろのページをスクロールさせない */
html:has(dialog[open]) {
    overflow: hidden;
}

/*
 * スクロールで画面に入ったらフェードイン（main.js が [data-fade] に .fade-in を付け、画面に入ったら .is-faded-in を足す）。
 * JS が動かないとき・動きを減らす設定のときは .fade-in が付かないので、最初から表示される
 */
.fade-in {
    opacity: 0;
    /* 下から上がってくる動きが分かるよう、60px 下から始める */
    transform: translateY(60px);
}

/* 動きは表示するときだけ（隠すときにも付けると、読み込み直後に一度消えていく動きが見える） */
/* 横から出す（data-fade="left" は左から右へ、"right" は右から左へ動く。はみ出しは置き場所の overflow で切る） */
.fade-in[data-fade="left"] {
    transform: translateX(-80px);
}

.fade-in[data-fade="right"] {
    transform: translateX(80px);
}

/*
 * 子要素を左から順に 1 つずつ出す（data-fade="stagger"。一覧そのものは動かさず、子要素を 0.25 秒ずつ遅らせて下からフェードインする）。
 * 横にスクロールする一覧でも、一覧が画面に入った時点でまとめて順に出す
 */
.fade-in[data-fade="stagger"],
.fade-in.is-faded-in[data-fade="stagger"] {
    opacity: 1;
    transform: none;
}

.fade-in[data-fade="stagger"] > * {
    opacity: 0;
    transform: translateY(60px);
}

.fade-in.is-faded-in[data-fade="stagger"] > * {
    opacity: 1;
    transform: none;
    transition: opacity 1.4s ease, transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-in.is-faded-in[data-fade="stagger"] > :nth-child(2) {
    transition-delay: 0.25s;
}

.fade-in.is-faded-in[data-fade="stagger"] > :nth-child(3) {
    transition-delay: 0.5s;
}

.fade-in.is-faded-in[data-fade="stagger"] > :nth-child(4) {
    transition-delay: 0.75s;
}

.fade-in.is-faded-in[data-fade="stagger"] > :nth-child(n + 5) {
    transition-delay: 1s;
}

.fade-in.is-faded-in {
    opacity: 1;
    transform: none;
    /* 上がる動きは最後にゆっくり止まる（ease-out）。透明度は少し早めに戻す */
    transition: opacity 1.4s ease, transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--fade-delay, 0s);
}