@charset "UTF-8";

/* HIRABOについて: 購入後サポート（#after-purchase）・運営会社（#company）・ご相談の窓口（Figma「下層 / HIRABOについて / PC」2041:4403 の 07・08・09） */

/* ご相談の窓口（09）は TOP と共通の部品（template-parts/top/contact.php）をそのまま使う。見た目は TOP のまま変えない */

/*
 * 購入後サポート（Figma「07 AFTER SUPPORT」PC 2041:5070 / SP 2041:6988）。
 * SP は見出し・文章・写真・カード・ボタンを縦に 24px 間隔で並べ、下端に次の運営会社の地の色（薄い緑）の山を置く
 */
.about-after {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow: hidden;
    padding: 56px 20px 82px;
    background-color: var(--color-white);
}

/* 背景のスケッチ（TOP のラインナップと同じ絵。透明度 30%）。SP は右上（Figma 2041:6989: 336.6 × 200.2） */
.about-after::before {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    width: 336.6px;
    aspect-ratio: 612 / 364;
    background: url("../img/lineup/sketch-center.webp") center / cover no-repeat;
    opacity: 0.3;
    pointer-events: none;
    content: "";
}

/* 境目の山（形は TOP のラインナップと同じ SVG のマスク。色は次の運営会社の地の色）。SP は 640px 幅より小さくしない（はみ出しは overflow で切る） */
.about-after::after {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: max(640px, 100%);
    max-height: 114px;
    aspect-ratio: 1280 / 114;
    background-color: var(--color-pale);
    -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: "";
}

.about-after__row,
.about-after__info,
.about-after__box {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* 見出しは SP「購入後も」「平野オートボディーに」「ご相談いただけます」の語の切れ目で折り返す（span は共通の inline-block） */

/* 本文（Figma 16px / 32px。SP は段落の間を空けない） */
.about-after__text {
    display: flex;
    flex-direction: column;
    color: #333;
    font-size: 1rem; /* 16px */
    font-weight: 500;
    line-height: 32px;
}

.about-after__photo {
    width: 100%;
    height: 240px;
    object-fit: cover;
}

/*
 * SP は 見出し → 写真 → 文章 の順（Figma SP 2291:698。2026-11-11 Chatwork「タイトル > 画像 > 文章の順に」）。
 * HTML は 見出し・文章 → 写真 なので、見出しと文章の箱を解いて（display: contents）文章を最後に回す。間はどれも 24px
 */
@media (max-width: 1023px) {
    .about-after__info {
        display: contents;
    }

    .about-after__text {
        order: 1;
    }
}

/* 相談できることの一覧（Figma「After / Card」。SP は項目名の下に説明） */
.about-after__card {
    padding: 8px 20px 20px;
    background-color: var(--color-pale);
}

.about-after__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 0;
    border-bottom: 1px solid rgb(47 107 86 / 0.15);
}

.about-after__item dt {
    color: var(--color-green);
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    letter-spacing: 0.56px;
    line-height: 1.45;
}

.about-after__item dd {
    color: #333;
    font-size: 1rem; /* 16px */
    font-weight: 500;
    line-height: 27px;
}

/* 注記の色は共通の .note（components.css）。文字は Figma どおり SP・PC とも 16px / 27px */
.about-after__note {
    padding-top: 14px;
    font-size: 1rem; /* 16px */
    line-height: 27px;
}

/*
 * 「購入後・保証の詳細を見る」。PC は共通の .label-button（components.css）のまま。
 * SP は Figma 2041:7012 どおりカードの外で横幅いっぱい・緑の線の枠・高さ 52px・左右 20px・14px の太字で、右端に矢印（運営会社のボタンと同じ形）
 */
.about-after__button {
    width: 100%;
}

@media (max-width: 1023px) {
    .about-after__button {
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        height: 52px;
        padding: 0 20px;
        border: 1px solid var(--color-green);
        background-color: var(--color-white);
        font-size: 0.875rem; /* 14px */
        font-weight: 700;
        letter-spacing: 0.56px;
    }

    .about-after__button span {
        flex: 0 1 auto;
        padding-left: 0;
        background-color: transparent;
        border-bottom: 0;
    }

    .about-after__button::after {
        width: 7px;
        height: 12px;
        background: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.5'/%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 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    }
}

@media (hover: hover) and (max-width: 1023px) {
    .about-after__button:hover {
        background-color: var(--color-pale);
    }

    .about-after__button:hover span {
        background-color: transparent;
    }
}

/*
 * 運営会社（Figma「08 COMPANY」PC 2041:5103 / SP 2041:7016）。白いカードに店舗の写真と会社の紹介
 */
.about-company {
    padding: 56px 20px 72px;
    background-color: var(--color-pale);
}

.about-company__card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 20px 24px;
    background-color: var(--color-white);
}

.about-company__photo {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.about-company__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.about-company__head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 6px;
    font-family: var(--font-serif);
    font-weight: 600;
    line-height: 1.5;
}

.about-company__label {
    color: var(--color-green);
    font-size: 0.8125rem; /* 13px */
    letter-spacing: 1.3px;
}

.about-company__name {
    color: #333;
    font-size: 1.375rem; /* 22px */
    letter-spacing: 0.88px;
}

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

/*
 * 「平野オートボディーのサイトを見る」。緑の線の枠（共通の .outline-button）に、右端の矢印（Figma の SP: 幅 5px × 高さ 10px の「>」）を足す。
 * SP は Figma の SP どおり横幅いっぱい・高さ 52px・左右 20px の太字。文字は 14px のまま（11/6 の Figma は 16px だが枠の左右 20px の中に収まらない）。
 * PC は共通の大きさのまま矢印を足す（先方指示。11/6 の Figma の PC は矢印なし・16px の太字だが、確認が取れるまで指示のまま）
 */
.about-company__button {
    display: flex;
    align-self: stretch;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 52px;
    padding: 0 20px;
    background-color: var(--color-white);
    font-weight: 700;
    letter-spacing: 0.56px;
    text-align: left;
}

/* Figma どおり 1 行（幅 360px 未満の画面だけ折り返す。下の @media） */
.about-company__button > span:first-child {
    white-space: nowrap;
}

.about-company__button::after {
    flex-shrink: 0;
    width: 7px;
    height: 12px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.5'/%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 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    content: "";
}

/* 幅 320px の画面でもボタンの文字を 1 行に収める（共通のままだと最後の 1〜2 文字が折り返す） */
@media (max-width: 359px) {
    .about-company__button {
        padding-inline: 12px;
        letter-spacing: 0;
    }

    .about-company__button > span:first-child {
        white-space: normal;
    }
}

@media (min-width: 1024px) {
    /* 購入後サポート:文章（左）と写真（右。画面の右端まで）。その下に一覧とボタンを 1 枚の薄い緑のカードにまとめる */
    .about-after {
        gap: 0;
        padding: 40px 0 102px;
    }

    /* スケッチ（Figma 2041:5071: 左下 612 × 364） */
    .about-after::before {
        top: 812px;
        right: auto;
        left: 0;
        width: 612px;
    }

    /* PC は運営会社も白地なので山は出さない */
    .about-after::after {
        content: none;
    }

    .about-after__row {
        flex-direction: row;
        align-items: flex-start;
        gap: 0;
    }

    /* 文章の左端は 1140px の中身の幅にそろえる（1280px で 70px） */
    .about-after__info {
        flex: 1;
        gap: 28px;
        min-width: 0;
        padding: 40px 72px 0 max(70px, (100% - 1140px) / 2);
    }

    .about-after .section-head__title > span:nth-child(-n + 2) {
        display: inline;
    }

    .about-after .section-head__title > span:last-child {
        display: block;
    }

    .about-after__text {
        gap: 16px;
    }

    /* Figma: 558 × 500（1280px のとき）。写真の切り抜きは Figma の PC の範囲に合わせて左に寄せる */
    .about-after__photo {
        flex: 0 0 calc(100% * 558 / 1280);
        width: calc(100% * 558 / 1280);
        height: 500px;
        object-position: 27% 50%;
    }

    .about-after__box {
        align-items: center;
        gap: 20px;
        width: min(100% - 140px, 1140px);
        margin: 56px auto 0;
        padding: 40px 48px 44px;
        background-color: var(--color-pale);
    }

    .about-after__card {
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-self: stretch;
        padding: 0;
        background-color: transparent;
    }

    .about-after__item {
        flex-direction: row;
        gap: 24px;
        padding: 20px 0;
        border-bottom-color: rgb(47 107 86 / 0.2);
        line-height: 32px;
    }

    .about-after__item dt {
        flex-shrink: 0;
        width: 120px;
        color: #333;
        font-size: 1rem; /* 16px */
        letter-spacing: 0;
        line-height: 32px;
    }

    .about-after__item dd {
        flex: 1;
        min-width: 0;
        font-size: 1rem; /* 16px */
        line-height: 32px;
    }

    /* 共通の .note の PC の上の余白（42px）は使わず、Figma「Card / Footer」の上 8px にする */
    .about-after__note {
        margin-top: 0;
        padding-top: 8px;
    }

    /* 運営会社: 写真（左 400 × 250）と文章（右）を横に並べた影付きの白いカード */
    .about-company {
        padding: 0 0 120px;
        background-color: var(--color-white);
    }

    .about-company__card {
        flex-direction: row;
        align-items: center;
        gap: 48px;
        width: min(100% - 140px, 1140px);
        min-height: 392px;
        margin: 0 auto;
        padding: 40px 48px 40px 40px;
        box-shadow: 0 8px 8px rgb(0 0 0 / 0.1);
    }

    .about-company__photo {
        flex: 0 1 400px;
        width: 400px;
        min-width: 0;
        height: 250px;
    }

    .about-company__text {
        flex: 1;
        gap: 12px;
        min-width: 0;
    }

    .about-company__head {
        gap: 12px;
        padding-top: 0;
    }

    /* Figma 2041:5107: 20px / 24px・字間 0.4px・透明度 70% */
    .about-company__label {
        font-size: 1.25rem; /* 20px */
        letter-spacing: 0.4px;
        line-height: 24px;
        opacity: 0.7;
    }

    /* Figma 2041:5108: 32px / 44px・字間 0.32px */
    .about-company__name {
        font-size: 2rem; /* 32px */
        letter-spacing: 0.32px;
        line-height: 44px;
    }

    .about-company__body {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .about-after__button {
        width: min(100%, 360px);
    }

    /* PC は共通の .outline-button の大きさ・太さ（16px 28px・15px・500）に矢印を足す */
    .about-company__button {
        align-self: flex-start;
        min-height: 0;
        margin-top: 8px;
        padding: 16px 28px;
        font-weight: 500;
        letter-spacing: 0;
    }
}