/* =====================================================
   総合自動車整備 詳細ページ（service_seibi.html）
   ※ .service-hero / .service-hero-text / .service-page /
     .service-divider は service-additions.css のものをそのまま流用
===================================================== */

/* ---- 1ブロック（タイトルボックス＋本文） ---- */

.seibi-block{
    margin-bottom:45px;
}

.seibi-title-box{
    display:block;
    width:280px;      /* ← 固定したい幅 */
    background:#213269;
    color:#fff;
    text-align:center;
    font-weight:700;
    font-size:clamp(14px,1.6vw,20px);
    padding:.9em 0;
    margin-bottom:22px;
}

.seibi-text{
    font-size:clamp(13px,1.35vw,16px);
    line-height:2;
}


/* ---- パターンA：本文＋右側に写真（特装車の架装・改造／新車ボデー架装） ---- */

.seibi-row{
    display:flex;
    flex-wrap:nowrap;
    justify-content:space-between;
    align-items:flex-end;
    gap:4%;
}

.seibi-row .seibi-text{
    flex:1 1 auto;
    min-width:0;
}

.seibi-row-image{
    flex:0 0 auto;
    width:clamp(160px,26vw,340px);
}

.seibi-row-image img{
    width:100%;
    height:auto;
    display:block;
}


/* ---- パターンB：本文＋下に写真を中央配置（油圧及び電気の整備／アライメント整備） ---- */

.seibi-image-center{
    text-align:center;
    margin-top:25px;
}

.seibi-image-center img{
    width:100%;
    max-width:700px;
    height:auto;
    display:inline-block;
}

.seibi-image-center a {
    display: inline-block;
}

.seibi-image-center a img {
    transition: 0.3s;
}

.seibi-image-center a:hover img {
    opacity: 0.7;
}

/* ---- 「CHECK SHEET →」バナー ---- */

.seibi-checksheet-wrap{
    text-align:center;
    margin-top:20px;
}

.seibi-checksheet{
    display:inline-block;
    background:rgba(224,224,224,.85);
    color:#213269;
    text-decoration:none;
    font-weight:700;
    font-size:clamp(12px,1.3vw,16px);
    padding:.7em 2em;
    transition:.3s;
}

.seibi-checksheet:hover{
    background:rgba(195,195,195,.92);
}


/* ---- 指定サービス工場一覧 ---- */

.seibi-companies-title{
    font-weight:700;
    font-size:clamp(15px,1.6vw,20px);
    margin-bottom:6px;
}

.seibi-companies-note{
    font-size:clamp(12px,1.2vw,15px);
    color:#333;
    margin-bottom:24px;
}

.seibi-companies{
    display:flex;
    flex-wrap:wrap;
    gap:0 6%;
    padding-left:8%;
}

.seibi-companies-col{
    flex:1 1 40%;
    min-width:260px;
    list-style:none;
}

.seibi-companies-col li{
    font-size:clamp(12px,1.3vw,15px);
    line-height:2.1;
}


/* ---- レスポンシブ ---- */

@media(max-width:600px){

    .seibi-row{
        flex-direction:column;
        align-items:center;
        gap:20px;
    }

    .seibi-row-image{
        width:70%;
        max-width:280px;
    }

    .seibi-title-box{
        margin:0 auto;
        margin-bottom:22px;   /* ← ここがボックスと本文の間の余白 */
    }

    .seibi-text{
        text-align:center;
    }

    .seibi-companies{
        flex-direction:column;
        padding-left:0;
        gap:0;
    }

}