/* =====================================================
   システム開発・販売 詳細ページ（service_system.html）
   ※ .service-hero / .service-hero-text / .service-page /
     .service-divider は common-additions.css のものをそのまま流用
===================================================== */

/* ---- リード文 ---- */

.system-intro{
    font-size:clamp(13px,1.35vw,16px);
    line-height:2;
    margin-bottom:30px;
}

.system-thin-divider{
    width:100%;
    height:1px;
    background:#ccc;
    margin-bottom:45px;
}


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

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

.system-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;
}

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

.system-text-full{
    margin-top:20px;
}


/* ---- パターンA：本文＋右側に写真（EIMSⅣ 事故見積システム） ---- */

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

.system-text-col{
    flex:1 1 auto;
    min-width:0;
}

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

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


/* ---- EIMSⅣ 紹介動画 ---- */

.system-video-block{
    text-align:center;
    margin-bottom:45px;
}

.system-video-title{
    font-weight:700;
    font-size:clamp(14px,1.5vw,18px);
    margin-bottom:14px;
}

.system-video-block video{
    width:100%;
    max-width:900px;
    height:auto;
    display:inline-block;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
}


/* ---- パターンB：本文＋下に写真を中央配置（EIMSⅢ 見積システム） ---- */

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

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


/* ---- 「主な機能」見出し ---- */

.system-subheading{
    font-weight:700;
    font-size:clamp(14px,1.5vw,18px);
    margin-top:30px;
    margin-bottom:14px;
}


/* ---- 主な機能テーブル ---- */

.system-feature-table{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.system-feature-row{
    display:flex;
    flex-wrap:nowrap;
    align-items:stretch;
}

.system-feature-name{
    flex:0 0 30%;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    text-align:left;
    background:#dfeefb;
    color:#111;
    font-weight:700;
    font-size:clamp(12px,1.2vw,15px);
    padding:.9em .6em .9em 1.2em;
}

.system-feature-desc{
    flex:1 1 auto;
    display:flex;
    align-items:center;
    background:#9dacd4;
    color:#111;
    font-size:clamp(12px,1.2vw,15px);
    line-height:1.8;
    padding:.9em 1.4em;
}


/* ---- 小規模システム（タイトルボックス＋右に本文） ---- */

.system-mini-block{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:4%;
    margin-bottom:26px;
}

.system-mini-title-box{
    flex:0 0 auto;
    width:clamp(160px,20vw,260px);
    background:#213269;
    color:#fff;
    text-align:center;
    font-weight:700;
    font-size:clamp(12px,1.3vw,16px);
    padding:.8em .4em;
}

.system-mini-text{
    flex:1 1 auto;
    min-width:0;
    font-size:clamp(12px,1.25vw,15px);
    line-height:1.9;
}


/* ---- サポートサービス ---- */

.system-support-section{
    margin-top:60px;
    margin-bottom:60px;
}

.system-support-list{
    list-style:none;
    padding:0;
    margin:0 auto 34px;
    max-width:900px;
}

.system-support-list li{
    position:relative;
    padding-left:1.3em;
    font-size:clamp(13px,1.35vw,16px);
    line-height:2;
    
}

.system-support-list li::before{
    content:"■";
    position:absolute;
    left:0;
    color:#213269;
}

.system-support-contact-item{
    margin-top:6px;
}

.system-support-contact-detail{
    font-weight:700;
}

.system-support-btn-wrap{
    text-align:center;
}

.system-support-btn{
    display:inline-block;
}

.system-support-btn img{
    width:clamp(220px,30vw,430px);
    height:auto;
    display:block;
    transition:.3s;
}

.system-support-btn:hover img{
    opacity:.8;
}


/* ---- カタログ ダウンロード ---- */

.system-catalog-section{
    margin-top:60px;
}

.system-catalog-items{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8%;
    margin-top:36px;
}

.system-catalog-item{
    flex:0 1 auto;
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:20px;
    text-align:left;
}

.system-catalog-item img{
    flex:0 0 auto;
    width:clamp(90px,9vw,120px);
    height:auto;
    display:block;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
}

.system-catalog-info{
    flex:0 0 auto;
}

.system-catalog-name{
    font-weight:700;
    font-size:clamp(13px,1.4vw,16px);
    margin-bottom:10px;
    white-space:nowrap;
}

.system-catalog-btn{
    display:inline-block;
    background:rgba(224,224,224,.85);
    color:#213269;
    text-decoration:none;
    font-weight:700;
    font-size:clamp(11px,1.2vw,14px);
    padding:.5em 1.6em;
    white-space:nowrap;
    transition:.3s;
}

.system-catalog-btn:hover{
    background:rgba(195,195,195,.92);
}


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

@media(max-width:600px){

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

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

    .system-title-box{
        margin:0 auto;
        margin-bottom:22px;
    }

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

    .system-mini-block{
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:14px;
    }

    .system-mini-title-box{
        width:70%;
        max-width:260px;
    }

    .system-catalog-items{
        flex-direction:column;
        align-items:center;
        gap:24px;
    }

    .system-catalog-item{
        gap:14px;
    }

    .system-support-list{
        max-width:none;
    }

}