@charset "utf-8";
/* ==========================================================================
   トップページ専用スタイル（css/site.css の後に読み込む）
   ========================================================================== */

/* --------------------------------------------------------------------------
   メインビジュアル
   言葉（コピー・説明・主な工事）と、施工後の建物＋施工中の写真2枚の組み写真。
   SPでは組み写真を低く抑えて先に置き、コピーが画面の上半分に入るようにする。
   PCでは左に言葉、右に組み写真（ヘッダーと同じ最大 1360px の枠に収める）。
   -------------------------------------------------------------------------- */
.hero__grid { display: flex; flex-direction: column; }
.hero__body { padding: 28px var(--gutter) 0; }
.hero__label { display: block; color: var(--c-blue-ink); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.08em; }
.hero__catch {
    display: block; margin-top: 12px;
    color: var(--c-navy); font-size: clamp(2.125rem, 1.5rem + 2.6vw, 3.5rem); font-weight: 700;
    line-height: 1.35; letter-spacing: 0.06em;
}
/* コピーは行単位で表示し、行の途中では折り返さない */
.hero__line { display: block; white-space: nowrap; }
/* 説明文は文節で改行し、行末に1〜2文字だけ残さない */
.hero__lead { margin-top: 16px; color: var(--c-text); max-width: 30em; word-break: auto-phrase; text-wrap: pretty; }

/* 主な工事：各事業ページへのリンク */
.hero__services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.hero__services a {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 100%;
    padding: 9px 12px; border: 1px solid var(--c-line); border-left: 3px solid var(--c-blue);
    color: var(--c-navy); font-size: var(--fs-sm); font-weight: 700; line-height: 1.5; text-decoration: none;
}
.hero__services a::after {
    content: ""; flex-shrink: 0; width: 6px; height: 6px;
    border-top: 1.5px solid var(--c-blue-ink); border-right: 1.5px solid var(--c-blue-ink); transform: rotate(45deg);
}
.hero__services a:hover { border-color: var(--c-blue-ink); color: var(--c-blue-ink); }
.hero__links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 24px; }

/* 組み写真：左に施工後の建物（大）、右に施工中の写真2枚。各写真は元の 4:3 のまま */
.hero__media {
    order: -1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 6px; padding: 16px var(--gutter) 0;
}
.hero__photo { position: relative; margin: 0; overflow: hidden; background: var(--c-bg-gray); }
.hero__photo img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hero__photo--main { grid-row: span 2; }
.hero__photo--main img { object-position: 55% 45%; }
.hero__caption {
    position: absolute; left: 0; bottom: 0;
    padding: 3px 8px; background: var(--c-navy); color: #fff;
    font-size: 0.6875rem; font-weight: 500; line-height: 1.6; letter-spacing: 0.06em;
}

.hero__facts-wrap { margin-inline: auto; padding-inline: var(--gutter); }
.hero__facts {
    display: grid; margin-top: 40px;
    border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
}
.hero__facts > div { display: flex; gap: 16px; padding: 14px 0; }
.hero__facts > div + div { border-top: 1px solid var(--c-line); }
.hero__facts dt { flex-shrink: 0; width: 6.5em; color: var(--c-text-sub); font-size: var(--fs-sm); }
.hero__facts dd { color: var(--c-navy); font-size: 0.9375rem; font-weight: 500; }

@media (min-width: 600px) {
    .hero__services { grid-template-columns: repeat(4, auto); justify-content: start; }
}
@media (min-width: 768px) {
    .hero__body { padding-top: 40px; }
    .hero__media { gap: 8px; padding-top: 24px; }
    .hero__caption { padding: 4px 10px; font-size: var(--fs-xs); }
    .hero__facts { grid-template-columns: auto auto 1fr; margin-top: 48px; }
    .hero__facts-wrap { max-width: calc(1360px + var(--gutter) * 2); }
    .hero__facts > div { flex-direction: column; gap: 2px; padding: 20px 32px; }
    .hero__facts > div:first-child { padding-left: 0; }
    .hero__facts > div + div { border-top: 0; border-left: 1px solid var(--c-line); }
    .hero__facts dt { width: auto; }
}
@media (min-width: 1080px) {
    /*
     * ロゴとコピーの左端、お問い合わせボタンと写真の右端を揃える。
     * 文章の列は最小 440px を確保し（コピー・主な工事を崩さないため）、写真の列は元画像（640px）を超えて拡大しない幅に抑える。
     */
    .hero__grid {
        display: grid; grid-template-columns: minmax(440px, 5fr) minmax(0, 7fr);
        gap: clamp(48px, 4.5vw, 88px); align-items: center;
        max-width: calc(1360px + var(--gutter) * 2); margin-inline: auto;
        padding: clamp(32px, 3vw, 56px) var(--gutter) 0;
    }
    .hero__body { padding: 0; }
    .hero__catch { font-size: clamp(2.75rem, 1.4rem + 2.2vw, 3.5rem); }
    .hero__lead { margin-top: 24px; font-size: var(--fs-md); }
    .hero__services { margin-top: 28px; }
    .hero__links { margin-top: 32px; }
    .hero__media { order: 0; gap: 10px; padding: 0; }
}

/* --------------------------------------------------------------------------
   SANEIについて：看板写真と文章・沿革
   -------------------------------------------------------------------------- */
.about__grid { display: grid; gap: 40px; }
.about__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.about__body > p { margin-top: 20px; }
.about__body > .section-title + p { margin-top: 28px; }
.about__body .history { margin-top: 36px; }
.about__more { margin-top: 32px; }
@media (min-width: 960px) {
    .about__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; }
}

/* --------------------------------------------------------------------------
   事業案内：主力の3事業を写真と短い説明で紹介し、各事業ページへ
   -------------------------------------------------------------------------- */
.services { background: var(--c-bg-gray); }
.services__list { display: grid; gap: 48px; }
.service-item a { display: block; color: var(--c-text); text-decoration: none; }
.service-item__media { display: block; overflow: hidden; background: #e6ebf0; }
.service-item__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s; }
.service-item a:hover img { transform: scale(1.03); }
.service-item__title {
    display: block; margin-top: 20px;
    color: var(--c-navy); font-size: var(--fs-h3); font-weight: 700; line-height: 1.5; letter-spacing: 0.04em;
}
.service-item__text { display: block; margin-top: 10px; color: var(--c-text-sub); font-size: 0.9375rem; line-height: 1.85; }
.service-item__more { margin-top: 16px; }
.service-item a:hover .service-item__title { color: var(--c-blue-ink); }
.services__others {
    margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--c-line);
    color: var(--c-text-sub); font-size: 0.9375rem;
}
@media (min-width: 768px) {
    .services__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}
@media (min-width: 1080px) {
    .services__list { gap: 48px; }
}

/* --------------------------------------------------------------------------
   施工実績：施工前・施工後を元画像の大きさまで使って並べる
   -------------------------------------------------------------------------- */
.work + .work { margin-top: 56px; }
.work__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.work--3 .work__photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.work__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--c-bg-gray); }
.work__state { display: block; margin-top: 8px; color: var(--c-text-sub); font-size: var(--fs-xs); letter-spacing: 0.08em; }
.work__photo:last-child .work__state { color: var(--c-blue-ink); font-weight: 700; }
.work__caption {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--c-line);
}
.work__category { color: var(--c-navy); font-size: 1.0625rem; font-weight: 700; }
@media (min-width: 900px) {
    /* 元画像の幅（421px・260px）を超えて拡大しない */
    .work--2 .work__photos { max-width: calc(421px * 2 + 12px); gap: 12px; }
    .work--3 .work__photos { max-width: calc(260px * 3 + 24px); gap: 12px; }
    .work { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 48px; align-items: end; }
    .work__caption { flex-direction: column; align-items: flex-start; margin-top: 0; padding-top: 16px; }
    .work + .work { margin-top: 64px; }
}

/* --------------------------------------------------------------------------
   会社情報
   -------------------------------------------------------------------------- */
.company { border-top: 1px solid var(--c-line); }
.company__grid { display: grid; gap: 40px; }
.company__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.company__body .data-table { margin-top: 28px; }
.company__links { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 28px; }
.news { margin-top: 40px; }
/* SPでは 写真 → 会社情報 → お知らせ の順に並べる */
.company__aside { display: contents; }
.company__media { order: 1; }
.company__body { order: 2; }
.company .news { order: 3; margin-top: 0; }
.news__title { color: var(--c-navy); font-size: 1rem; font-weight: 700; }
.news ul { margin-top: 8px; }
.news li { display: flex; flex-wrap: wrap; gap: 0 20px; padding: 10px 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-sm); }
.news time { color: var(--c-text-sub); }
@media (min-width: 960px) {
    .company__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: start; }
    .company__aside { display: block; order: 1; }
    .company__body { order: 2; }
    .company .news { margin-top: 40px; }
}