@charset "UTF-8";

/*
 * 会社概要・アクセス専用（page-company.php のときだけ読み込む。Figma「下層 / 会社概要・アクセス / PC」2041:7187）。
 * ページタイトル・パンくずは page.css、ページ内リンクは components.css・faq.css（よくあるご質問と同じ形）、
 * 最後のスタッフ紹介とお問い合わせは TOP と同じ top.css・contact-band.css、来店チケットは components.css（共通の部品）。
 * 見出しは components.css の section-head、リード文は .lead、外部サイトへのボタンは .outline-button。
 * Figma の書体は「フォント変更」のルールを当てる: 見出しは明朝 600、本文はゴシック 500、札などの短い強調は 700。
 *
 * SP のデザイン待ち。今は 1 列に積むだけ（〜1023px。表は項目名と内容を縦に積み、2 列のものは縦に並べ、写真は幅いっぱい）。
 * PC は 1024px 以上（1024〜1279px は詰めた配置）、1280px で Figma どおり
 */

/* ============================================================
 * ページ全体
 * ============================================================ */

/*
 * セクション（アクセス・八王子ベース・会社概要・拠点一覧）。中身の幅は PC で 1140px。
 * 背景の色と下端の山の色（--divider-color: 次のセクションの背景の色）はセクションごとに下で決める
 */
.company-section {
    --divider-color: var(--color-white);
    position: relative;
    overflow: hidden;
    padding: 56px 20px 96px;
    color: #333;
    background-color: var(--color-white);
}

.company-section__inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: min(100%, var(--content-width));
    margin-inline: auto;
}

.company-section img {
    object-fit: cover;
}

/*
 * 境目の山（Figma「Deco / Mountain (bottom)」1280 × 114px。アクセス・八王子ベース・会社概要の下端）。
 * 形は HIRABOについてと同じ SVG のマスク（about.css の .craft::after など）、色は次のセクションの背景の色。
 * SP は 640px 幅より小さくしない（はみ出しはセクションの overflow で切る）
 */
.company-access::after,
.company-base::after,
.company-profile::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: "";
}

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

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

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

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

/* 電話番号のリンク（見た目は前後の文字のまま） */
.company-tel {
    color: inherit;
    text-decoration: none;
}

@media (hover: hover) {
    .company-tel:hover {
        text-decoration: underline;
    }
}

/*
 * 表（Figma「Table A」。アクセス・会社概要）。項目名は薄い緑の地（PC 幅 180px）、内容は白の地。上と行の下に薄い線。
 * SP は項目名と内容を縦に積む
 */
.company-table {
    display: block;
    width: 100%;
    border-top: 1px solid #dde5df;
    border-collapse: collapse;
    font-size: 1rem; /* 16px */
    line-height: 24px;
}

.company-table tbody,
.company-table tr,
.company-table th,
.company-table td {
    display: block;
}

.company-table tr {
    border-bottom: 1px solid #dde5df;
}

.company-table th,
.company-table td {
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
}

.company-table th {
    background-color: #e7eee9;
    font-weight: 700;
}

.company-table td {
    background-color: var(--color-white);
    font-weight: 500;
}

/* 内容の下の注記（Figma「Note」16px / 25px、#666） */
.company-table__note {
    display: block;
    margin-top: 4px;
    color: #666;
    line-height: 25px;
}

/* ============================================================
 * ページ内リンク（Figma「02 Page Nav」2041:7219。ボタンはよくあるご質問と同じ .faq__nav）
 * 動きもよくあるご質問と同じ（2026-11-10 Chatwork）: PC はヘッダーの下に固定（下の @media）、
 * SP はボタンを通り過ぎたらヘッダーの下に高さ 56px の帯（components.css の .scroll-toc）
 * ============================================================ */
.company-nav {
    padding: 24px 20px 0;
    background-color: var(--color-pale);
}

/* ページ内リンクで飛んだとき、セクションの上端がスクロール中の帯（SP 56px。--scroll-toc-height）のすぐ下に来るようにする（ヘッダーの分は base.css の scroll-padding-top） */
.company-section {
    scroll-margin-top: var(--scroll-toc-height);
}

/* ============================================================
 * アクセス（Figma「05 ACCESS」2041:7246）
 * ============================================================ */
.company-access {
    background-color: var(--color-pale);
}

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

.company-access__photo {
    width: 100%;
}

/* 「マップを見る」（Figma 14px の太字・下線・字間 1px） */
.company-access__map-link {
    display: block;
    width: fit-content;
    margin-top: 4px;
    color: var(--color-green);
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: underline;
}

@media (hover: hover) {
    .company-access__map-link:hover {
        text-decoration: none;
    }
}

/* Google マップの埋め込み（Figma「▶ Googleマップ（埋め込み）」1140 × 420px。読み込むまでは Figma の枠の色） */
.company-access__map {
    background-color: #dfe7e1;
}

.company-access__map iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
}

/* ============================================================
 * 八王子ベース（Figma「03 HACHIOJI BASE」2041:7287）
 * ============================================================ */
.company-base {
    --divider-color: var(--color-pale);
}

.company-base__intro {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.company-base__text {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* 本文（Figma 16px / 32px。段落の間は 16px） */
.company-base__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: 1rem; /* 16px */
    line-height: 32px;
}

/* Figma の写真の枠は 640 × 520px。PC は右側を画面の端で切るので、左端を基準に置く */
.company-base__photo {
    width: 100%;
    aspect-ratio: 640 / 520;
    object-position: left center;
}

/* 施設の写真とキャプション（Figma「Base / Facilities」2041:7302） */
.company-base__facilities {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.company-facility__figure {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.company-facility__photo {
    width: 100%;
    aspect-ratio: 213.6 / 190;
}

.company-facility__caption {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 1rem; /* 16px */
    line-height: 27px;
}

.company-facility__title {
    color: var(--color-green);
    font-family: var(--font-serif);
    font-size: 1.375rem; /* 22px */
    font-weight: 600;
    line-height: 32px;
}

/* ドッグランだけ大きい写真（Figma 427.2 × 300px）と題。写真・題・文の間は 12px */
.company-facility--wide .company-facility__figure {
    gap: 12px;
}

.company-facility--wide .company-facility__photo {
    aspect-ratio: 427.2 / 300;
}

.company-facility--wide .company-facility__caption {
    line-height: 28px;
}

/*
 * SP・タブレット（〜1023px）の並び（2026-11-10 Chatwork。HTML の順は PC の並びのまま、CSS の order で入れ替える）:
 * - アクセス: 写真 → 表 → 地図（「写真と表を入れ替え」）
 * - 八王子ベース: 見出し → 写真 → 本文（「文章と写真の順序を入れ替え」。見出しはアクセスと同じくセクションの頭に置く）
 * - 施設の 4 つ: 題・説明 → 写真（「ドッグランの題・説明と写真の順序を入れ替え。それ以降の 3 枚も同様」）
 */
@media (max-width: 1023px) {
    .company-access__photo {
        order: -1;
    }

    .company-base__intro {
        gap: 28px;
    }

    .company-base__text {
        display: contents;
    }

    .company-base__media {
        order: 1;
    }

    .company-base__body {
        order: 2;
    }

    .company-facility__caption {
        order: -1;
    }
}

/* 来店チケット（共通の部品。見た目は components.css。Figma: 施設の写真の下 72px）。ここは置き場所の幅と余白だけ */
.company-base__ticket {
    width: min(100%, var(--content-width));
    margin: 56px auto 0;
}

/* ============================================================
 * 会社概要（Figma「07 COMPANY」2041:7334）
 * ============================================================ */
.company-profile {
    background-color: var(--color-pale);
}

/* リード文は共通の .lead（段落の間は空けない） */

/* SP は最後の行が「す。」だけにならないようにする（対応していないブラウザは通常の改行。PC は今の改行のまま） */
@media (max-width: 1023px) {
    .company-profile__lead {
        text-wrap: pretty;
    }
}

/* 「平野オートボディーのサイトを見る」は共通の .outline-button（HIRABOについての運営会社と同じ）。中央に置く */
.company-profile__button {
    width: fit-content;
    margin-inline: auto;
}

/* ============================================================
 * 拠点一覧（Figma「08 LOCATIONS」2041:7391）
 * ============================================================ */
.company-locations__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* 拠点のカード（Figma「Location card」。薄い緑の地に、写真と文字） */
.company-location {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    background-color: var(--color-pale);
}

.company-location__photo {
    width: 100%;
    aspect-ratio: 4 / 3;
}

.company-location__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

/* 緑の札: HIRABOの拠点（Figma 13px / 22px・字間 1px）と、工場の資格（13px。行の高さは normal） */
.company-location__label,
.company-location__tag {
    padding: 2px 10px;
    color: var(--color-white);
    background-color: var(--color-green);
    font-size: 0.8125rem; /* 13px */
    font-weight: 700;
}

.company-location__label {
    letter-spacing: 1px;
    line-height: 22px;
}

.company-location__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.company-location__tag {
    line-height: 19px;
}

/* 札が 2 つ並ぶときは左右の余白を 7px に詰める（Figma のホリデー車検 元八王子店） */
.company-location__tags--tight .company-location__tag {
    padding-inline: 7px;
}

.company-location__name {
    color: #333;
    font-family: var(--font-serif);
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 30px;
}

/* 役割の札（Figma: 緑の線の丸い札、14px の太字。高さ 28px） */
.company-location__roles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.company-location__role {
    padding: 3px 10px;
    color: var(--color-green);
    border: 1px solid var(--color-green);
    border-radius: 999px;
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    line-height: 20px;
}

/* 住所・電話・営業時間・定休日（Figma「Location / Info」。項目名は 76px） */
.company-location__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-self: stretch;
    padding-top: 6px;
    line-height: 26px;
}

.company-location__info-row {
    display: flex;
    gap: 12px;
}

.company-location__info dt {
    flex-shrink: 0;
    width: 76px;
    color: var(--color-green);
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    letter-spacing: 1.5px;
}

.company-location__info dd {
    flex: 1;
    min-width: 0;
    font-size: 1rem; /* 16px */
    font-weight: 500;
}

/*
 * 提携工場（遠方の方へ）（Figma「Partner / 提携工場（遠方の方へ）」1794:904。2026-11-11 Chatwork「デザインを反映して」）。
 * 見出し・説明の下に、電話番号（アイコン + 番号、下に受付時間）とお問い合わせのボタン。右に写真（280×186）。見出しは Figma どおりゴシックの太字。
 * Figma は PC だけ。SP は縦に積み、電話番号は 1 行に収まる 28px にする。
 * SP は見出しを「サポート。」の前で改行し、お問い合わせのボタン（緑のべた塗り・幅いっぱい）を電話番号の上に置き、電話番号と受付時間は真ん中に寄せる
 * （2026-11-11 11:48・12:14 Chatwork）。PC は Figma（12:14 に更新）どおり、緑のべた塗りのボタン（幅 240px）の右に電話番号
 */
.company-partner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 20px;
    background-color: #e9efe9;
    border-radius: 4px;
}

.company-partner__text {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.company-partner__heading {
    word-break: keep-all;
    overflow-wrap: anywhere;
    color: var(--color-green);
    font-family: var(--font-sans);
    font-size: 1.25rem; /* 20px */
    font-weight: 700;
    line-height: 1.45;
}

.company-partner__body {
    color: #333;
    font-size: 1rem; /* 16px */
    line-height: 1.8;
}

.company-partner__heading > span {
    display: block;
}

.company-partner__contact {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
}

.company-partner__tel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* 番号はゴシックの太字（Figma 36px・字間 1.08px）。アイコン 30px との間 10px */
.company-partner__tel-number {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-green);
    font-family: var(--font-sans);
    font-size: 1.75rem; /* 28px */
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.45;
    text-decoration: none;
}

.company-partner__tel-number img {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
}

.company-partner__hours {
    color: #333;
    text-align: center;
    font-size: 0.875rem; /* 14px */
    line-height: 1.45;
    opacity: 0.75;
}

/*
 * お問い合わせのボタン（緑のべた塗り・上下 16px・左右 28px）。SP は幅いっぱいで電話番号の上、PC は幅 240px で電話番号の左。
 * 文字と「›」の間は Figma の 2 文字分の空き
 */
.company-partner__button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    order: -1;
    padding: 16px 28px;
    color: var(--color-white);
    background-color: var(--color-green);
    border: 1px solid var(--color-green);
    font-size: 1rem; /* 16px */
    font-weight: 700;
    line-height: 1.45;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

@media (hover: hover) {
    .company-partner__button:hover {
        background-color: #24584a;
    }
}

.company-partner__photo {
    width: 100%;
    aspect-ratio: 280 / 186;
    border-radius: 4px;
}

/* ============================================================
 * PC（1024px 以上。1280px で Figma どおり）
 * ============================================================ */
@media (min-width: 1024px) {
    .company-section__inner {
        gap: 48px;
    }

    .company-br-pc {
        display: inline;
    }

    .company-table {
        display: table;
    }

    .company-table tbody {
        display: table-row-group;
    }

    .company-table tr {
        display: table-row;
    }

    .company-table th,
    .company-table td {
        display: table-cell;
        padding: 16px 24px;
    }

    .company-table th {
        width: 180px;
    }

    /*
     * ページ内リンク: 上下 20px（Figma の帯の高さ 93px）。ボタンの列は faq.css の幅（980px）のまま中央に置く。
     * スクロールしても帯ごとヘッダーの下に固定し、飛んだ先のセクションの上端は帯（ボタン 49px + 上下 20px = 89px）のすぐ下に来るようにする
     */
    .company-nav {
        position: sticky;
        top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-height));
        z-index: 10;
        padding: 20px 70px;
    }

    /*
     * 貼り付いている間（main.js の is-stuck）は帯を 48px に縮める（よくあるご質問・お知らせ・ブログと同じ。2026-11-12 ユーザー指示。Figma 1864:914）:
     * 上下の余白 6px + ボタン 36px（上下 7.5px）。縮めた分（89 - 48 = 41px）は下の margin で足し、後ろの内容が動かないようにする。
     * セクションへ飛ぶのは貼り付いたあとなので、セクションの上端は 48px の帯のすぐ下に来るようにする
     */
    .company-nav.is-stuck {
        margin-bottom: 41px;
        padding-block: 6px;
    }

    .company-nav.is-stuck .faq__nav-link {
        padding-block: 7.5px;
    }

    .company-section {
        scroll-margin-top: 48px;
    }

    .company-nav .faq__nav {
        margin-inline: auto;
    }

    /* アクセス: 表と写真（460px。1024〜1279px は 41% まで縮める）の 2 列。白い地の上に並べ、写真の高さは表に合わせる */
    .company-access {
        padding: 100px 70px 200px;
    }

    .company-access__row {
        flex-direction: row;
        gap: 40px;
        background-color: var(--color-white);
    }

    .company-access__table {
        flex: 1;
        min-width: 0;
    }

    .company-access__photo {
        flex-shrink: 0;
        align-self: stretch;
        width: min(460px, 41%);
    }

    /*
     * 八王子ベース: 文章（580px）と写真の 2 列。写真は画面の右端まで（Figma は 640px の写真がキャンバスの右端で切れている）。
     * 写真の列の右に、セクションの右の余白（1280px 未満は 70px、それより広い画面は中身の外側の余白）を足し、セクションの overflow で切る。
     * 1024〜1279px は文章と写真の列を Figma の比率（580 : 496）で詰める
     */
    .company-base {
        padding: 96px 70px 200px;
    }

    .company-base .company-section__inner {
        gap: 80px;
    }

    .company-base__intro {
        display: grid;
        grid-template-columns: minmax(0, 580fr) minmax(0, 496fr);
        gap: 64px;
        align-items: start;
    }

    .company-base__photo {
        width: calc(100% + max(70px, (100vw - var(--content-width)) / 2));
        max-width: none;
        height: 520px;
        aspect-ratio: auto;
    }

    /* 施設: ドッグラン（2）とほかの 3 つ（1）の幅の比で 4 つを 1 行に並べる（Figma 427.2 / 213.6px） */
    .company-base__facilities {
        flex-direction: row;
        align-items: flex-start;
        gap: 24px;
    }

    .company-facility {
        flex: 1 1 0;
        min-width: 0;
    }

    .company-facility--wide {
        flex-grow: 2;
    }

    .company-base__ticket {
        margin-top: 72px;
    }

    /* 会社概要 */
    .company-profile {
        padding: 120px 70px 200px;
    }

    /* 拠点一覧: カードは 2 列。カードの中は写真（200 × 150px）と文字の 2 列 */
    .company-locations {
        padding: 120px 70px 140px;
    }

    .company-locations__lead {
        text-align: center;
    }

    .company-locations__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .company-location {
        flex-direction: row;
        align-items: flex-start;
        gap: 28px;
        padding: 24px 28px 24px 24px;
    }

    /* 1024〜1279px はカードが狭いので、写真をカードの 40% まで縮める */
    .company-location__photo {
        flex-shrink: 0;
        width: min(200px, 40%);
    }

    .company-location__body {
        flex: 1;
    }

    .company-partner {
        flex-direction: row;
        align-items: center;
        gap: 40px;
        padding: 32px 40px;
    }

    .company-partner__text {
        flex: 1;
        min-width: 0;
    }

    .company-partner__heading {
        font-size: 1.625rem; /* 26px */
    }

    .company-partner__heading > span {
        display: inline;
    }

    .company-partner__contact {
        flex-direction: row;
        align-items: center;
        gap: 40px;
    }

    .company-partner__tel {
        align-items: flex-start;
    }

    .company-partner__hours {
        text-align: left;
    }

    .company-partner__button {
        width: 240px;
    }

    .company-partner__tel-number {
        font-size: 2.25rem; /* 36px */
    }

    .company-partner__photo {
        flex-shrink: 0;
        width: 280px;
    }
}