/* =====================================================
   トレーニング各種 詳細ページ（service_training.html）
   ※ .service-hero / .service-hero-text / .service-page /
     .service-divider / .page-heading は common-additions.css のものをそのまま流用
===================================================== */

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

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

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


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

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

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

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

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


/* ---- 研修センターのご案内：丸写真3点 ---- */

.training-circle-row{
    display:flex;
    flex-wrap:nowrap;
    justify-content:center;
    align-items:center;
    gap:6%;
    margin-top:36px;
}

.training-circle{
    flex:0 0 auto;
    width:clamp(120px,15vw,180px);
    aspect-ratio:1/1;
    border-radius:50%;
    overflow:hidden;
}

.training-circle img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}




/* ---- 設備・工具情報：JOSAMロゴ＋ブランド名 ---- */

.training-brand-row{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
}

.training-brand-row img{
    height:32px;
    width:auto;
    display:block;
}

.training-brand-row span{
    font-size:clamp(15px,1.8vw,20px);
    font-weight:700;
}


/* ---- 各システム紹介：本文幅いっぱいの写真バナー ---- */

.training-wide-photo{
    text-align:center;
    margin:20px 0;
}

.training-wide-photo img{
    width:100%;
    max-width:950px;
    height:auto;
    display:inline-block;
}


/* ---- 「■ JOSAM frame press」等の小見出し ---- */

.training-subheading{
    font-size:clamp(14px,1.6vw,18px);
    font-weight:700;
    margin:30px 0 12px;
}


/* ---- And More（カタログとアプリ） ---- */

.training-final-section{
    margin-top:60px;
}

.training-app-row{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:24px;
    margin-bottom:22px;
}

.training-app-label{
    font-size:clamp(14px,1.6vw,18px);
    font-weight:700;
    flex:0 0 auto;
    min-width:230px;
}

.training-app-btn{
    display:block;
    flex:1 1 320px;
    max-width:520px;
    transition:.3s;
}

.training-app-btn img{
    width:100%;
    height:auto;
    display:block;
}

.training-app-btn:hover{
    opacity:.8;
}


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

@media(max-width:600px){

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

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

    .training-brand-row{
        justify-content:center;
    }

    .training-subheading{
        text-align:center;
    }

    .training-app-row{
        flex-direction:column;
        text-align:center;
        gap:10px;
    }

    .training-app-label{
        min-width:0;
    }

}