@charset "UTF-8";

/*
 * 下層ページの KV（共通の部品。template-parts/kv.php）。車種のページと HIRABOについてで読み込む（functions.php）。
 * 元の形は車種のページ（PC: Figma「SUZY｜PCデザイン（1280）」の「01 KV」92:5 / SP: 「SUZY｜SPデザイン（375）」の「01 KV」439:15）。
 * HIRABOについての Figma（「01 KV（車種紹介と同じレイアウト）」PC 1238:314 / SP 1304:323）は帯の高さ・写真の大きさが少し違うが、
 * 「9割5分同じ部品は同じものを使う」決まりで車種のページの形にそろえる。ページ名とキャッチの大きさだけ .kv--page で変える。
 * PC は緑の帯（高さ 402px）の上にページ名とキャッチ、帯の下に情報（車種のページは価格）、右に写真・動画（画面の右端まで）を重ねる。
 * Figma の KV はヘッダーの裏から始まるので、ヘッダーの高さ（PC 74px / SP 70px）を引いた位置で組む。
 * SP は帯 → 写真（左 20px を空けて右端まで。帯の下端に 110px 重ねる）→ 情報の順に縦に積む。SP のデザインに山は無い
 */
.kv {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--color-pale);
}

.kv__inner {
    width: min(100%, var(--content-width));
    margin-inline: auto;
}

/* SP の下の余白は、キャッチと写真の間 22px + 写真が帯に重なる 110px（Figma: 帯の高さ 420px − ヘッダー 70px） */
.kv__band {
    position: relative;
    padding: 30px 20px 132px;
    color: var(--color-white);
    background-color: var(--color-green);
}

.kv__eyebrow {
    color: var(--color-accent-light);
    font-family: var(--font-en);
    font-size: 0.6875rem; /* 11px */
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 16px;
}

/* ページ名。車種のページは英字の車種名を大きく出す（日本語のページ名は下の .kv--page） */
.kv__title {
    font-family: var(--font-en);
    font-size: 4.5rem; /* 72px */
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 88px;
}

.kv__catch {
    padding-top: 16px;
    font-family: var(--font-serif);
    /* 320px の画面でも Figma どおり 2 行に収まるよう、狭い画面は小さくする */
    font-size: clamp(1.0625rem, 5.6vw, 1.25rem); /* 17〜20px */
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 34px;
}

.kv__catch > span {
    display: block;
}

/* 帯の左下の山（色は下の薄い緑）。PC だけ（SP のデザインには無い） */
.kv__mountain {
    position: absolute;
    bottom: -1px;
    left: 0;
    display: none;
    width: min(371.5px, 100%);
    height: auto;
    pointer-events: none;
}

/* 帯の下の情報。SP は写真の下（order）。Figma: 写真の下 14px に価格、KV の下端まで 27px */
.kv__info {
    position: relative;
    order: 2;
    padding: 14px 20px 27px;
}

/*
 * 写真・動画。SP は Figma どおり左 20px を空けて画面の右端まで・355:212 で、帯の下端に 110px 重ねる（帯の後ろ・情報の前に並べる order）。
 * 動画は写真の上に重ね、再生が始まったら（.is-playing）見せる
 */
.kv__media {
    position: relative;
    order: 1;
    margin: -110px 0 0 20px;
    aspect-ratio: 355 / 212;
    overflow: hidden;
    background-color: var(--color-green);
}

.kv__image,
.kv__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kv__video {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.kv__video.is-playing {
    opacity: 1;
}

/*
 * 日本語のページ名の下層ページ（HIRABOについて）。ページ名・キャッチの大きさは Figma「01 KV」1238:314 / 1304:323（書体はサイトの明朝 600）。
 * 帯の下に情報が無いので、SP は写真の下に 40px 空ける（Figma 1304:323）
 */
.kv--page {
    padding-bottom: 40px;
}

.kv--page .kv__title {
    padding-top: 4px;
    font-family: var(--font-serif);
    /* 320px の画面でも 1 行に収まるよう、狭い画面は小さくする */
    font-size: clamp(1.75rem, 8.5vw, 2rem); /* 28〜32px */
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 48px;
}

.kv--page .kv__catch {
    padding-top: 12px;
    /* 「クルマを知り尽くした技術でつくる、」が 320px の画面でも 1 行に収まるよう、狭い画面は小さくする */
    font-size: clamp(0.9375rem, 4.8vw, 1.125rem); /* 15〜18px */
    letter-spacing: 0.04em;
    line-height: 32px;
}

@media (min-width: 1024px) {
    .kv {
        display: block;
        height: 562px;
    }

    /* 文字は Figma どおり中身の幅の左端から 10px 内側（x = 80px）に置く */
    .kv__inner {
        padding-left: 10px;
    }

    .kv__band {
        height: 402px;
        /* 上の余白は Figma（32px）より 10px 詰め、キャッチと山の間を 10px 広げる（クライアント指示） */
        padding: 22px 70px 0;
    }

    .kv__eyebrow {
        font-size: 0.875rem; /* 14px */
        letter-spacing: 0.18em;
        line-height: 17px;
    }

    .kv__title {
        font-size: 8.25rem; /* 132px */
        letter-spacing: 0.02em;
        line-height: 150px;
    }

    /* キャッチは Figma どおり 2 行。写真に重ならないよう折り返さない（1024px でも写真の左端 530px より手前に収まる） */
    .kv__catch {
        padding-top: 4px;
        font-size: 1.875rem; /* 30px */
        letter-spacing: 2px;
        line-height: 48px;
        white-space: nowrap;
    }

    .kv__mountain {
        display: block;
        width: 743px;
    }

    .kv__info {
        padding: 40px 70px 0;
    }

    /*
     * 写真・動画は Figma（1280px）どおり x = 540px から画面の右端まで、高さ 562px。
     * 画面の幅が 1920px（ブラウザ 100%）までは画面の右端まで伸ばし、それより広い画面（縮小表示など）では 1920px のときの幅 1060px で止める
     * （右には緑の帯・薄い緑の背景が続く）。
     * 1024〜1279px は文字と価格に重ならないよう、左端を 530px より右にする。写真は中央を基準に枠いっぱいに切り抜く（object-fit: cover）
     */
    .kv__media {
        position: absolute;
        top: 0;
        left: max(530px, 50% - 100px);
        width: min(100% - max(530px, 50% - 100px), 1060px);
        z-index: 1;
        height: 562px;
        margin: 0;
        aspect-ratio: auto;
    }

    /* 帯の左下の山も、1280px より広い画面では 1280px の幅の左端に置く（キャッチ・価格との位置関係を Figma どおりにする） */
    .kv__mountain {
        left: max(0px, 50% - 640px);
    }

    /*
     * 日本語のページ名: Figma 1238:314 はページ名 45px・キャッチ 22px（行の高さ 1.7）。
     * 文字のまとまりは帯の中ほど（Figma: 帯の上から 131px・山の上端まで 36px）に置く
     */
    .kv--page {
        padding-bottom: 0;
    }

    .kv--page .kv__band {
        padding-top: 104px;
    }

    .kv--page .kv__title {
        padding-top: 0;
        font-size: 2.8125rem; /* 45px */
        letter-spacing: 0.02em;
        line-height: 1.5;
    }

    .kv--page .kv__catch {
        padding-top: 8px;
        font-size: 1.375rem; /* 22px */
        letter-spacing: 0.02em;
        line-height: 1.7;
    }
}

/*
 * 車種名をロゴで見せる形（SUZY。Figma「01 KV」PC 1271:1160 / SP 1271:5407）。
 * SP: ヘッダーの下 30px に英字、ロゴ 180×91、キャッチ 20px。帯の下端に写真が 110px 重なる。
 * PC: 帯はヘッダーの下 458px、写真は高さ 618px で KV の下端まで。価格は帯の直後から
 */
.kv--logo .kv__band {
    padding-bottom: 124px;
}

.kv--logo .kv__eyebrow {
    font-size: 0.8125rem; /* 13px */
    letter-spacing: 1.56px;
}

.kv--logo .kv__title--logo {
    margin: 9px 0 0 -4px;
    font-size: 0;
    line-height: 0;
}

.kv__logo {
    display: block;
    width: 180px;
    height: auto;
}

.kv--logo .kv__catch {
    padding-top: 12px;
    letter-spacing: 0.8px;
}

.kv--logo .kv__info {
    padding-bottom: 20px;
}

@media (min-width: 1024px) {
    .kv--logo {
        height: 618px;
    }

    .kv--logo .kv__band {
        height: 458px;
        padding: 24px 70px 0;
    }

    .kv--logo .kv__eyebrow {
        font-size: 0.875rem; /* 14px */
        letter-spacing: 2.52px;
    }

    .kv--logo .kv__title--logo {
        margin: 16px 0 0;
    }

    .kv__logo {
        width: 350px;
    }

    .kv--logo .kv__catch {
        padding-top: 28px;
        font-size: 1.5rem; /* 24px */
        letter-spacing: 2px;
        line-height: 48px;
    }

    .kv--logo .kv__info {
        padding: 0 70px;
    }

    .kv--logo .kv__media {
        height: 618px;
    }
}