/* =====================================================
   事業内容ページ（service.html）専用
   ※ hero本体・service-page・divider は common-additions.css を参照
===================================================== */

/* ---- ヒーロー上の4ボタン ---- */

.service-nav{
    position:absolute;
    right:15%;
    bottom:6%;
    width:36%;
    max-width:480px;
}

.service-nav a{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgba(224,224,224,.85);
    color:#213269;
    text-decoration:none;
    font-weight:700;
    font-size:clamp(12px,1.35vw,20px);
    padding:2.4% 10% 2.4% 6%;
    margin-bottom:2px;
    transition:.3s;
}

.service-nav a:hover{
    background:rgba(195,195,195,.92);
}

.service-nav a span{
    position:absolute;
    right:6%;
    top:50%;
    transform:translateY(-50%);
    font-size:1.1em;
}


/* ---- 1セクション（タイトルボックス＋本文） ---- */

.service-block{
    display:flex;
    flex-wrap:nowrap;
    gap:5%;
    margin-bottom:35px;
}

.service-title-box{
    flex:0 0 18%;
    max-width:230px;
}

.service-title-box img{
    width:100%;
    display:block;
}


/* 画像を用意していない「設備・工具情報」用の無地ボックス */

.plain-title-box{
    flex:0 0 18%;
    max-width:230px;
    background:#e9e9ea;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-weight:700;
    font-size:clamp(14px,1.5vw,18px);
}

.service-content{
    flex:1;
}

.service-content .lead{
    font-size:clamp(13px,1.35vw,16px);
    line-height:2;
    margin-bottom:20px;
}

.service-content-row{
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-start;
    align-items:flex-end;
    gap:0%;
}

.service-bullets{
    list-style:none;
    flex:0.6 1 auto;
    min-width:0;
}

.service-bullets li{
    font-size:clamp(12px,1.3vw,16px);
    line-height:2;
    padding-left:1.3em;
    position:relative;
}

.service-bullets li::before{
    content:"■";
    position:absolute;
    left:0;
    top:.45em;
    color:#213269;
    font-size:.7em;
}

.service-photos{
    flex:0 0 auto;
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:10px;
}

.service-photos img{
    width:clamp(120px,25vw,320px);
    height:auto;
    display:block;
    object-fit:cover;
}


/* ---- 設備・工具情報（サブブロック） ---- */

.service-subblock{
    display:flex;
    flex-wrap:nowrap;
    gap:5%;
    margin:25px 0 35px;
}

.service-subblock .service-title-box{
    margin-left:19%;
}

.service-sub-content{
    flex:1;
}

.service-sub-content .brand-logo{
    height:24px;
    display:block;
    margin-bottom:10px;
}

.service-sub-content .brand-logo:not(:first-child){
    margin-top:20px;
}


/* ---- 「詳しく見る →」バナー4個 ---- */

.service-banner{
    display:block;
    margin: auto;
    height: auto; /* 縦横比を崩さないために必須！ */
    width:max-content;
    max-width:100%;
    transition:.3s;
}

.service-banner img{
    height:clamp(32px, 4vw, 56px);
    display:block;
}

.service-banner:hover{
    opacity:.85;
}


/* ---- 災害対応・防災事業（それCoCo）専用 ---- */

.sorecoco-row{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:3%;
}

.sorecoco-logo{
    width:clamp(130px,13vw,240px);
    display:block;
}

.sorecoco-character{
    text-align:center;
    font-size:clamp(8px,1vw,13px);
    flex:0 0 auto;
}

.sorecoco-character img{
    width:clamp(60px,6.5vw,130px);
    display:block;
    margin:0 auto 6px;
}


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

@media(max-width:600px){

      .service-nav{
        position:static;       /* 画像の下に配置 */
        width:50%;             /* 現在と同じ幅 */
        margin:16px auto 0;    /* 中央寄せ＋画像との間隔 */
        transform:none;
    }

    .service-nav a{
        background:#213269;    
        color:#fff;            
    }

    .service-nav a:hover{
        background:#475a9c;
    }

     /* 4ブロック：テキストを回り込ませる */
    .service-block{
        display:block;          
    }

    .service-block .service-title-box{
        float:left;
        width:27%;              /* 現在のスマホサイズと同じ */
        max-width:170px;
        margin:0 4% 8px 0;      /* 右と下にテキストとの余白 */
    }

    /* ■リストは、左端から始める */
    .service-block .service-content-row{
        clear:both;
        justify-content:space-between;
    }

     .service-bullets{
        flex:1 1 0;     
    }

    .service-photos{
        flex-direction:column;
        margin-left:0;  
        align-items:center;
    }

    .service-photos img{
        width:clamp(130px,42vw,220px); 
    }

     /* タイトル画像を左寄せ、中身はその下に左寄せで配置 */
    .service-subblock{
        display:block;         
    }

    .service-subblock .service-title-box{
        margin-left:0;         
        margin-bottom:12px;     /* 画像と下のロゴ・リストとの間隔 */
        width:27%;              
        max-width:170px;
    }
     .sorecoco-row{
        flex-direction:column;
        align-items:center;
        gap:10px;
    }

    .service-title-box{
        flex:0 0 27%;
        max-width:170px;   /* 最終サイズ着地点 */

    }

}