@charset "utf-8";
/* =========================================
   メニューリンクボタン（全ブランド共通・シンプル版）
========================================= */
.menu-link-wrapper {
    text-align: center;
    margin: 10px 0; /* 上下の余白 */
}

.menu-link-btn {
    display: inline-block;
    width: 100%;
    max-width: 320px;
    padding: 14px 20px;
    background-color: #ffffff; /* 背景は白 */
    color: #333333 !important; /* 文字色はダークグレー */
    text-align: center;
    font-size: 14px; /* やや小さめに変更 */
    /* ゴシック体を明示的に指定 */
    font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, 'メイリオ', sans-serif; 
    font-weight: nomal;
    border: 1px solid #e0e0e0; /* 薄いグレーの枠線 */
    border-radius: 50px; /* 丸みのあるボタン */
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* 控えめな影 */
    transition: all 0.3s ease;
}

.menu-link-btn:hover {
    background-color: #f9f9f9; /* ホバー時はごくわずかに色を変える */
    transform: translateY(-2px); /* 少しだけ浮き上がる */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}
/* =========================================
   3枚並び写真ギャラリー（スマホ横並び・高さ統一版）
========================================= */
.three-photo-gallery {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 40px; /* 上の文章との余白 */
}
.three-photo-gallery .photo-item {
    width: calc(33.333% - 10px);
}
.three-photo-gallery .photo-item img {
    width: 100%;
    height: 100%;
    border-radius: 8px; /* 角丸。不要なら削除してください */
    object-fit: cover; /* 画像が歪まないように自動でトリミング */
    aspect-ratio: 4 / 3; /* 強制的に4:3の比率にして高さをピタッと揃えます */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* スマホ用（767px以下）も横並びを維持し、隙間だけ少し狭くする */
@media (max-width: 767px) {
    .three-photo-gallery {
        gap: 8px;
    }
    .three-photo-gallery .photo-item {
        width: calc(33.333% - 5.3px);
    }
}
/* =========================================
   人材開発事業部（HR）リデザイン
========================================= */
/* 共通設定 */
.hr-lead-sec, .hr-diagram-sec {
    padding: 100px 0;
}
@media (max-width: 767px) {
    .hr-lead-sec, .hr-diagram-sec {
        padding: 60px 0;
    }
}
.hr-diagram-sec.bg-blue {
    background-color: #f4f8fc; /* 薄いネイビーグレー */
}
.hr-diagram-sec.bg-white {
    background-color: #fff;
}
.inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 4%;
}
.text-box p {
    line-height: 1.8;
    color: #333;
    font-size: 16px;
}
.text-box.center {
    text-align: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 767px) {
    .text-box p {
        font-size: 14px;
        text-align: left;
    }
}

/* リードセクション */
.hr-lead-sec .hr-lead-catch h2 {
    font-size: 32px;
    line-height: 1.5;
    color: #232584; /* ネイビー */
    font-weight: 700;
    margin-bottom: 50px;
    text-align: center;
}
@media (max-width: 767px) {
    .hr-lead-sec .hr-lead-catch h2 {
        font-size: 20px;
        text-align: left;
    }
}
.hr-lead-sec .hr-lead-text {
    max-width: 800px;
    margin: 0 auto;
}

/* 図解セクション共通 */
.hr-diagram-sec .hr-sec-title {
    font-size: 28px;
    line-height: 1.4;
    color: #232584;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
}
.hr-diagram-sec .hr-sec-subtitle {
    font-size: 18px;
    color: #333;
    text-align: center;
    margin-bottom: 70px;
    font-weight: 500;
}
@media (max-width: 767px) {
    .hr-diagram-sec .hr-sec-title {
        font-size: 18px;
        text-align: left;
    }
    .hr-diagram-sec .hr-sec-subtitle {
        font-size: 14px;
        text-align: left;
        margin-bottom: 40px;
    }
}

/* 図解画像エリア */
.hr-diagram-wrapper {
    margin-bottom: 70px;
}
.hr-diagram-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 767px) {
    .hr-diagram-wrapper {
        margin-bottom: 40px;
    }
}

/* 最後の文章の上部余白（白背景の方） */
.mt-80 {
    margin-top: 80px;
}
@media (max-width: 767px) {
    .mt-80 {
        margin-top: 40px;
    }
}

/* PC/SP画像の出し分け */
.pc-only-image {
    display: block;
}
.sp-only-image {
    display: none;
}
@media (max-width: 767px) {
    .pc-only-image {
        display: none;
    }
    .sp-only-image {
        display: block;
    }
}
/* =========================================
   資料02再現用追加スタイル
========================================= */
.hr-global-sec { padding: 80px 0; background-color: #fff; }
.hr-flow-container { display: flex; justify-content: space-between; align-items: stretch; gap: 20px; margin-top: 50px; }
.hr-flow-item { background: #f9fbfc; border: 1px solid #d1d9e0; padding: 30px 20px; width: 30%; border-radius: 12px; position: relative; }
.hr-flow-item.highlight { border-color: #232584; background: #f0f2ff; box-shadow: 0 10px 20px rgba(35,37,132,0.1); }
.flow-label { font-size: 14px; font-weight: 900; color: #232584; margin-bottom: 10px; }
.flow-title { font-size: 18px; font-weight: 700; color: #333; margin-bottom: 20px; border-bottom: 2px solid #232584; padding-bottom: 10px; }
.flow-list li { font-size: 14px; line-height: 1.6; margin-bottom: 10px; position: relative; padding-left: 15px; }
.flow-list li::before { content: "・"; position: absolute; left: 0; color: #232584; font-weight: bold; }
.flow-arrow { display: flex; align-items: center; justify-content: center; }
.flow-arrow::after { content: "▶"; color: #d1d9e0; font-size: 24px; }
.mt-60 { margin-top: 60px; }

@media (max-width: 767px) {
.hr-flow-container { flex-direction: column; }
.hr-flow-item { width: 100%; }
.flow-arrow::after { content: "▼"; }
}
/* =========================================
   資料01（組織体系）再現用スタイル
========================================= */
.hr-management-sec { padding: 80px 0; background-color: #fff; }
.mgt-box-group { display: flex; justify-content: center; align-items: center; gap: 30px; margin-top: 40px; }
.mgt-box { width: 45%; padding: 30px; border-radius: 8px; color: #fff; }
.mgt-box.blue { background-color: #28A8E8; }
.mgt-box.navy { background-color: #232584; }
.mgt-box-title { font-size: 20px; font-weight: 700; margin-bottom: 20px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 10px; }
.mgt-list li { font-size: 15px; margin-bottom: 12px; list-style: disc; margin-left: 20px; }
.mgt-connect { font-size: 32px; font-weight: 700; color: #232584; }
.mgt-result-arrow { text-align: center; font-size: 32px; color: #232584; margin: 20px 0; }
.mgt-result-box { max-width: 600px; margin: 0 auto; border: 3px solid #232584; padding: 30px; border-radius: 12px; text-align: center; background-color: #f0f2ff; }
.result-label { font-weight: 900; color: #232584; font-size: 14px; margin-bottom: 5px; }
.result-title { font-size: 24px; font-weight: 700; color: #232584; margin-bottom: 15px; }
.result-text { font-size: 15px; line-height: 1.6; color: #333; }
.bg-light { background-color: #f9fbfc; }

@media (max-width: 767px) {
.mgt-box-group { flex-direction: column; }
.mgt-box { width: 100%; }
.mgt-connect { transform: rotate(90deg); margin: 10px 0; }
}
/* =========================================
   人材開発事業部 詳細レイアウト
========================================= */
.hr-details-section { padding: 60px 0; background: #fff; line-height: 1.6; }
.split-content-container { display: flex; gap: 40px; margin-bottom: 80px; align-items: flex-start; }
.split-left-charts { width: 50%; }
.split-left-charts .chart-item { margin-bottom: 20px; border: 1px solid #eee; background: #f9f9f9; }
.split-left-charts img { width: 100%; height: auto; display: block; }
.split-right-text { width: 50%; }
.split-right-text .text-block { margin-bottom: 30px; }
.split-right-text .text-block .title { font-weight: bold; color: #232584; margin-bottom: 8px; font-size: 17px; }
.split-right-text .text-block p { font-size: 15px; margin: 0; }
.full-width-content { border-top: 1px solid #eee; padding-top: 60px; }
.content-box { margin-bottom: 60px; }
.category-label { display: inline-block; background: #232584; color: #fff; padding: 4px 15px; font-size: 13px; margin-bottom: 15px; font-weight: bold; }
.box-title { font-size: 18px; font-weight: bold; margin-bottom: 10px; color: #333; border-bottom: 1px solid #232584; padding-bottom: 5px; }
.box-subtitle { font-size: 20px; font-weight: bold; margin-bottom: 15px; color: #232584; }
.box-text { font-size: 15px; line-height: 1.8; color: #444; }

@media (max-width: 767px) {
.split-content-container { flex-direction: column; gap: 30px; }
.split-left-charts, .split-right-text { width: 100%; }
.box-title { font-size: 16px; }
.box-subtitle { font-size: 18px; }
}