@charset "UTF-8";

/*
 * HIRABOについて専用（page-about.php のときだけ読み込む。Figma「下層 / HIRABOについて」PC 2041:4403 / SP 2041:6604）。
 * ここは HIRABOのものづくり・ブランドストーリー・HIRABOのあゆみと、ページ全体の決まり。
 * KV は kv.css（車種のページと共通）、品質と製作体制・製作の流れは about-quality.css、購入後サポート・運営会社は about-support.css、
 * 最後のスタッフ紹介とお問い合わせは TOP と同じ top.css・contact-band.css。
 * Figma の書体は使わず「フォント変更」のルールを当てる: 見出しは明朝 600（セクションの見出しは components.css の section-head。SP 20px / PC 35px）、
 * 本文はゴシック 500、札などの短い強調は 700。文字の大きさ・行の高さは Figma のとおり
 */

/* 本文（段落の間は 16px）。文字は SP・PC とも 16px / 32px（Figma 2041:4672 / 2041:6692） */
.about-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: #333;
    font-size: 1rem; /* 16px */
    line-height: 32px;
}

/* このページのセクションの写真。最後の TOP と共通のお問い合わせ（.contact）には効かせない（TOP の見た目のまま） */
.about-page > :not(.contact) img {
    display: block;
    object-fit: cover;
}

/* ページ内リンクで飛んだとき、固定ヘッダーに見出しが隠れないようにする */
.about-page [id] {
    scroll-margin-top: calc(var(--header-height) + 16px);
}

/*
 * KV（共通の部品 kv.css）のうち、このページの Figma（PC 2041:4430 / SP 2041:6605）だけ大きさが違うところ。
 * SP: 帯 420px（ヘッダー 70px + 350px。文字は帯の上から 22px）、英字のラベル 13px、写真 355 × 250px を帯の下端に 150px 重ねる。
 * PC（下の @media）: 帯 430px、写真の高さ 560px、文字のまとまりは帯の上から 131px
 */
@media (max-width: 1023px) {
    .about-page .kv__band {
        padding: 22px 20px 184px;
    }

    .about-page .kv__eyebrow {
        font-size: 0.8125rem; /* 13px */
    }

    .about-page .kv__media {
        margin-top: -150px;
        aspect-ratio: 355 / 250;
    }

    /* リード文（共通の .lead）は SP だけ Figma どおり 16px / 32px（PC は共通の 18px / 40px のまま） */
    .craft .lead,
    .quality-system .lead {
        font-size: 1rem; /* 16px */
        line-height: 32px;
    }
}

/*
 * 境目の山（HIRABOのものづくり・ストーリー・あゆみの下端。形は TOP のラインナップと同じ SVG のマスク、色は次のセクションの背景色）。
 * 大きさも TOP のラインナップの山（top.css の .lineup-model__divider）と同じ。SP は 640px 幅より小さくしない（はみ出しはセクションの overflow で切る）
 */
.craft::after,
.story::after,
.history::after {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: max(640px, 100%);
    max-height: 114px;
    aspect-ratio: 1280 / 114;
    background-color: var(--divider-color);
    -webkit-mask: url("../img/lineup/divider-mountain.svg?v=2") center bottom / 100% 100% no-repeat;
    mask: url("../img/lineup/divider-mountain.svg?v=2") center bottom / 100% 100% no-repeat;
    pointer-events: none;
    content: "";
}

/*
 * HIRABOのものづくり（Figma「03 CRAFT」PC 2041:4441 / SP 2041:6646）。SP は見出し → 文章 → 写真の順に縦に積む
 * （2026-10-21 先方指示。品質と製作体制の SP と同じ。11/6 の Figma の SP は写真が先だが、確認が取れるまで指示のまま）
 */
.craft {
    --divider-color: var(--color-white);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 40px;
    overflow: hidden;
    padding: 56px 20px 82px;
    background-color: var(--color-pale);
}

.craft__head {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* リードの改行は PC だけ */
.craft__lead-br {
    display: none;
}

/* 見出しの文言は Figma の PC と SP で違う（どちらかにそろえるか確認中）。SP の文言を出し、PC は下の @media で切り替える */
.craft .section-head__title > .craft__title-pc {
    display: none;
}

.craft__points {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.craft-point {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.craft-point__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 335 / 211;
}

.craft-point__text {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 見出しの左の緑の線（Figma: SP 3 × 22px / PC 4 × 28px） */
.craft-point__title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333;
    font-family: var(--font-serif);
    font-size: 1.1875rem; /* 19px */
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 28px;
}

.craft-point__title::before {
    flex-shrink: 0;
    width: 3px;
    height: 22px;
    background-color: var(--color-green);
    content: "";
}

.craft-point__body {
    color: #333;
    font-size: 1rem; /* 16px */
    font-weight: 500;
    line-height: 30px;
}

/*
 * SP は 見出し → 写真 → 文章 の順で、間はどれも 14px（Figma SP 2291:364。2026-11-11 Chatwork「タイトル > 画像 > 文章の順に」。10/21 の「見出し → 文章 → 写真」から変更）。
 * HTML は 写真 → 見出し・文章 なので、見出しと文章の箱を解いて（display: contents）見出しを先頭に出す。PC は左右に並べる
 */
@media (max-width: 1023px) {
    .craft-point {
        gap: 14px;
    }

    .craft-point__text {
        display: contents;
    }

    .craft-point__title {
        order: -1;
    }
}

/*
 * ブランドストーリー（Figma「05 STORY」PC 2041:4657 / SP 2041:6679）。
 * SP は見出し → 写真 → 文章の順（grid-template-areas）。PC は写真（左半分。画面の左端まで）と見出し・文章（右半分）
 */
.story {
    --divider-color: var(--color-pale);
    position: relative;
    overflow: hidden;
    padding: 56px 20px 82px;
    background-color: var(--color-white);
}

.story__row {
    display: grid;
    grid-template-areas:
        "head"
        "media"
        "body";
    gap: 24px;
}

.story__head {
    grid-area: head;
}

.story__media {
    position: relative;
    grid-area: media;
}

.story__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 335 / 240;
}

/* 写真の左下の 2 行の帯（PC は左上） */
.story__badge {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: var(--font-serif);
    font-size: 0.9375rem; /* 15px */
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 22px;
}

.story__badge-line {
    padding: 6px 12px;
    color: var(--color-green);
    background-color: var(--color-white);
}

.story__badge-line--green {
    color: var(--color-white);
    background-color: var(--color-green);
}

/* SP は Figma どおり段落の間を空けない */
.story__body {
    grid-area: body;
    gap: 0;
}

/* 見出しの改行（br）は PC だけ。SP は幅で折り返す */
.story__title-br {
    display: none;
}

/*
 * SP のセクションの見出しは流し込むが、語の途中では折り返さない（2026-11-06 ユーザー決定。車種のページと同じ）。
 * 折り返すのは句読点と文節の span の切れ目だけ（word-break: keep-all は共通の .section-head__title。切れ目は幅 0 の空白）。
 * 1 文節が画面に入りきらないときだけ、文節の途中で折り返す。PC は各セクションの CSS の改行位置（文節の span・br）のまま
 */
@media (max-width: 1023px) {
    .about-page .section-head__title {
        overflow-wrap: anywhere;
    }

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

    .about-page .section-head__title > span::after {
        content: "\200B";
    }
}

/*
 * HIRABOのあゆみ（Figma「05-2 HISTORY」PC 2041:4674 / SP 2041:6694）。
 * 背景に Figma の「Deco / Sketch」（山・森・キャンピングカー・テントのスケッチ。assets/img/about/history-sketch.webp）を敷く。
 * 画像は Figma の不透明度 30% を背景色（薄い緑）の上に合成済みなので、CSS では透明にしない（SP は上端、PC は見出しの下）
 */
.history {
    --divider-color: var(--color-white);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 32px;
    overflow: hidden;
    padding: 56px 20px 82px;
    background-color: var(--color-pale);
}

.history::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 8 / 3;
    background: url("../img/about/history-sketch.webp") left bottom / 125.38% auto no-repeat;
    pointer-events: none;
    content: "";
}

.history__head,
.history__list {
    position: relative;
}

.history__list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.history-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.history-item__tag {
    padding: 3px 10px;
    color: var(--color-white);
    background-color: var(--color-green);
    font-size: 0.8125rem; /* 13px */
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 22px;
}

/* 見出しの下の線（Figma「Divider」）。見出しは 1 行（2026-10-21 先方決定。11/6 の Figma は 2 行だが、確認が取れるまで決定のまま） */
.history-item__title {
    align-self: stretch;
    padding-bottom: 12px;
    border-bottom: 1px solid rgb(47 107 86 / 0.15);
    color: var(--color-green);
    font-family: var(--font-serif);
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 32px;
}

.history-item__title > span {
    display: block;
}

.history-item__body {
    color: #333;
    font-size: 1rem; /* 16px */
    font-weight: 500;
    line-height: 30px;
}

.history-item__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 335 / 200;
}

/* SP は 年 → 見出し → 写真 → 文章 の順（Figma SP 2291:412。2026-11-11 Chatwork。HTML は文章 → 写真） */
@media (max-width: 1023px) {
    .history-item__body {
        order: 1;
    }
}

@media (min-width: 1024px) {
    /* KV: 帯 430px・写真の高さ 560px・文字は帯の上から 131px（Figma 2041:4430） */
    .about-page .kv {
        height: 560px;
    }

    .about-page .kv--page .kv__band {
        height: 430px;
        padding-top: 131px;
    }

    .about-page .kv__media {
        height: 560px;
    }

    /* ものづくり: 見出し（950px）と 4 つのこだわり（1034px）を中央に置く。こだわりは写真 500px と文章を交互に左右に置く */
    .craft {
        align-items: center;
        gap: 72px;
        padding: 100px 70px 188px;
    }

    /* 幅は Figma の 950px（見出しは 1 行に収まる）。線とリードの間は 36px（Figma: 14px + 22px） */
    .craft__head {
        gap: 36px;
        width: min(100%, 950px);
    }

    /* 見出しは PC の文言（1024〜1279px で 1 行に入らないときは読点のあとで折り返す） */
    .craft .section-head__title > .craft__title-pc {
        display: inline-block;
    }

    .craft .section-head__title > .craft__title-sp {
        display: none;
    }

    .craft__head .lead {
        letter-spacing: 0.02em;
    }

    .craft__lead-br {
        display: inline;
    }

    .craft__points {
        gap: 80px;
        width: min(100%, 1034px);
    }

    /* 写真と文章は 500px ずつ、間は 34px（Figma「Point」。奇数の段は文章が左、偶数の段は写真が左） */
    .craft-point {
        flex-direction: row-reverse;
        align-items: flex-start;
        gap: 34px;
    }

    .craft-point:nth-child(even) {
        flex-direction: row;
    }

    .craft-point__photo {
        flex: 0 1 500px;
        width: 500px;
        min-width: 0;
        aspect-ratio: 500 / 315;
    }

    .craft-point__text {
        flex: 1;
        gap: 20px;
        min-width: 0;
    }

    .craft-point__title {
        gap: 14px;
        font-size: 1.5rem; /* 24px */
        line-height: 38px;
    }

    .craft-point__title::before {
        width: 4px;
        height: 28px;
    }

    .craft-point__body {
        font-size: 1rem; /* 16px */
        letter-spacing: 0.02em;
        line-height: 32px;
    }

    /* 文章は Figma の改行位置で 1 行ずつ */
    .craft-point__body > span {
        display: block;
    }

    /* ストーリー: 写真 640 × 520px（左半分。画面の左端まで）と、見出し・文章（右半分。左 72px・右 70px を空ける） */
    .story {
        padding: 69px 0 177px;
    }

    .story__row {
        grid-template-areas:
            "media head"
            "media body";
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto 1fr;
        gap: 28px 0;
    }

    .story__head,
    .story__body {
        max-width: 640px;
        padding: 0 70px 0 72px;
    }

    .story__head {
        padding-top: 16px;
    }

    .story__photo {
        height: 520px;
        aspect-ratio: auto;
    }

    .story__badge {
        top: 30px;
        bottom: auto;
        left: 22px;
        font-size: 1.25rem; /* 20px */
        letter-spacing: 2px;
        line-height: 35px;
    }

    .story__badge-line {
        padding: 1px 8px;
    }

    .story__badge-line--green {
        padding-right: 12px;
    }

    .story__body {
        gap: 16px;
        line-height: 32px;
    }

    /* PC は「車屋が、キャンピングカー」「をつくるまで。」の 2 行（Figma 2041:4669） */
    .story__title-br {
        display: inline;
    }

    /* あゆみ: 見出しは中央。6 つの出来事を 3 列 × 2 段で並べ、2 列目は 40px、3 列目は 80px 下げる（Figma の時間の流れ） */
    .history {
        gap: 64px;
        padding: 100px 70px 180px;
    }

    .history::before {
        top: 485px;
    }

    .history__head {
        align-items: center;
        text-align: center;
    }

    .history__list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 80px 40px;
        width: min(100%, 1140px);
        margin-inline: auto;
    }

    .history-item {
        gap: 16px;
    }

    .history-item:nth-child(3n + 2) {
        padding-top: 40px;
    }

    .history-item:nth-child(3n) {
        padding-top: 80px;
        --fade-delay: 1.2s;
    }

    /* 同じ段の 3 つは左から順に 0.6 秒ずつ遅らせ、下からゆっくり出す（時間の流れに合わせる） */
    .history-item:nth-child(3n + 2) {
        --fade-delay: 0.6s;
    }

    .history-item.fade-in.is-faded-in {
        transition: opacity 2.4s ease, transform 2.8s cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: var(--fade-delay, 0s);
    }

    .history-item__tag {
        padding: 4px 12px;
        font-size: 0.875rem; /* 14px */
        line-height: 22px;
    }

    .history-item__title {
        padding-bottom: 16px;
        font-size: 1.5rem; /* 24px */
        line-height: 38px;
    }

    .history-item__body {
        letter-spacing: 0.02em;
    }

    .history-item__photo {
        margin-top: 20px;
        aspect-ratio: 353 / 230;
    }
}