@charset "UTF-8";

/* =========================================================
   日興リカ 採用サイト  キャリアパス・教育・研修制度  -  career.css
   （共通トークン・ヘッダー・フッターは style.css を参照）
   デザイン: 00nikkorica202604_11career_04.ai（1920幅・コンテンツ1200）
   実測:
     背景 = 全面青グラデ linear(180deg) #0059BD 27% → #0078FF 60% → #009FE8 100%
     キャリアについて = #0077EE パネル（枠#008CFF・ほぼ全幅・角丸）
     教育・研修制度について = #009FE8 パネル（枠#008CFF）
     白リボン537x80（青グラデ文字40px）/ グラデリボン414x75（白35px）
     モデルカード 585x624 白・ヘッダーバー554x65 青グラデ
     チップ: ラベル150x85 #007EE8 ＋ 本体#EAF5FDに黒18px
     研修パネル = 白2px枠 1146x573（コンテナ左+54px）・写真562x472
   ========================================================= */

.career-page {
    position: relative;
    padding-top: 80px;
    /* 固定ヘッダー分 */
    padding-bottom: 150px;
    background: linear-gradient(180deg, #0059bd 27%, #0078ff 60%, #009fe8 100%);
    color: #fff;
    overflow-x: clip;
}

/* 背景装飾：理科系ドゥードル（上部） */
.career-page::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1240px;
    background: url("../images/creed-hero-doodle.png") center top / cover no-repeat;
    opacity: .5;
    pointer-events: none;
    z-index: 0;
}

/* 背景装飾：左の六角形クリスタル */
.career-page::after {
    content: "";
    position: absolute;
    top: 714px;
    left: -387px;
    width: 916px;
    height: 687px;
    background: url("../images/interview-deco-sphere.png") center / contain no-repeat;
    pointer-events: none;
    z-index: 0;
}

.career-page section {
    position: relative;
    z-index: 1;
    padding: 1rem;
}

/* ===================== タイトル ===================== */
/* .career-page section { padding:1rem } より詳細度を上げて共通余白140pxを効かせる */
.career-page .career-head {
    padding: 140px 0 0;
}

.career-head .sec-title {
    font-size: 50px;
    font-weight: 700;
    letter-spacing: .1em;
    margin: 0;
}

.career-head .sec-sub {
    margin: 6px 0 0;
    color: #53c5ff;
    font-family: "Figtree", "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-size: 25px;
    letter-spacing: .2em;
}

/* ===================== 全幅パネル（キャリアについて／教育・研修制度） ===================== */
/* 枠・背景・角丸はセクションではなく子要素（.career-panel-box）に持たせる */
.career-panel-box {
    border: 2px solid #008cff;
    border-radius: 24px;
    padding: 130px 0 136px;
}

.career-about {
    margin-top: 120px;
}

.career-about .career-panel-box {
    background: url("../images/motto-band-bg.png")no-repeat top center/cover;
    background-color: #0077ee;
}

.career-edu {
    margin-top: 113px;
}

.career-edu .career-panel-box {
    background: url("../images/motto-band-bg02.jpg")no-repeat top center/cover;
    background-color: #009fe8;
    box-shadow: 10px 10px 30px rgb(0 0 0/.25);
}

.career-panel-inner {
    display: flex;
    align-items: flex-start;
    gap: 48px;
}

/* 白リボン＋青グラデ文字 */
.career-panel-ribbon {
    flex: 0 0 auto;
    min-width: 537px;
    margin: 0;
    background: #fff;
    padding: 17px 42px;
    line-height: 1.15;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: .05em;
    font-feature-settings: "palt" 1;
}

.grad-text {
    background: linear-gradient(90deg, #2a9bff 0%, #0078ff 50%, #0059bd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.career-panel-text {
    flex: 1 1 auto;
    max-width: 615px;
}

.career-panel-text p {
    margin: 0 0 30px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    color: #fff;
}

.career-panel-text p:last-child {
    margin-bottom: 0;
}

/* ===================== キャリアモデル ===================== */
.career-model {
    margin-top: 26px;
}

/* 装飾：右の泡 */
.career-model::before {
    content: "";
    position: absolute;
    top: 145px;
    right: -47px;
    width: 202px;
    height: 202px;
    background: url("../images/creed-deco-flask.png") center / contain no-repeat;
    pointer-events: none;
    z-index: 0;
}

.career-model .container-rica {
    position: relative;
    z-index: 1;
}

.career-model-title {
    margin: 0 0 22px;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #fff;
}

.career-model-cards {
    display: flex;
    gap: 30px;
    align-items: stretch;
}

.cm-card {
    flex: 1 1 0;
    min-height: 624px;
    background: #fff;
    border-radius: 14px;
    padding: 17px 15px 24px;
    color: #464646;
}

/* カードヘッダー（青グラデバー） */
.cm-card-head {
    margin: 0;
    height: 65px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    background: linear-gradient(90deg, #2a9bff 0%, #0078ff 50%, #0059bd 100%);
    border-radius: 8px;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: .03em;
}

.cm-card-img {
    margin: 32px auto 20px;
    width: 338px;
    max-width: 80%;
}

.cm-card-img img {
    display: block;
    width: 100%;
    height: auto;
}

.cm-card-text {
    margin: 0;
    padding: 0 40px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.625;
    color: #464646;
}

/* キャリアモデル例チップ */
.cm-chips {
    margin: 37px 12px 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.cm-chip {
    display: flex;
    align-items: center;
}

.cm-chip-label {
    flex: 0 0 150px;
    min-height: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #007ee8;
    border-radius: 8px 0 0 8px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.44;
    position: relative;
    z-index: 1;
}

.cm-chip-body {
    flex: 1 1 auto;
    min-height: 75px;
    display: flex;
    align-items: center;
    padding: 8px 12px 8px 12px;
    background: #eaf5fd;
    border-radius: 0 8px 8px 0;
    color: #000;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.44;
}

/* ===================== 研修3ブロック・体系図 ===================== */
.career-training {
    margin-top: 22px;
}

/* 装飾：右上の分子（教育パネルと研修ブロックの境界） */
.career-training::before {
    content: "";
    position: absolute;
    top: -137px;
    right: -266px;
    width: 495px;
    height: 398px;
    background: url("../images/creed-deco-mol.png") center / contain no-repeat;
    pointer-events: none;
    z-index: 0;
}

.career-training .container-rica {
    position: relative;
    z-index: 1;
}

/* 白枠パネル（コンテナ左から54pxずらし・リボンが左へはみ出す） */
.ct-panel {
    position: relative;
    margin-left: 54px;
    min-height: 573px;
    border: 2px solid #fff;
    border-radius: 20px;
    padding: 174px 640px 48px 48px;
}

.ct-panel+.ct-panel {
    margin-top: 50px;
}

/* グラデリボン（白35px・パネル左上に重ねて左へ54pxはみ出す） */
.ct-ribbon {
    position: absolute;
    top: 51px;
    left: -54px;
    min-width: 414px;
    margin: 0;
    background: linear-gradient(90deg, #2a9bff 0%, #0078ff 50%, #0059bd 100%);
    padding: 16px 34px;
    line-height: 1.2;
    color: #fff;
    font-size: 35px;
    font-weight: 700;
    letter-spacing: .1em;
    font-feature-settings: "palt" 1;
}

.ct-subtitle {
    margin: 0 0 24px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
}

.ct-text p {
    margin: 0 0 26px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.625;
    color: #fff;
}

.ct-text p:last-child {
    margin-bottom: 0;
}

/* 写真 562x472（パネル右上に配置） */
.ct-img {
    position: absolute;
    top: 50px;
    right: 30px;
    width: 562px;
    aspect-ratio: 562 / 472;
    border-radius: 14px;
    overflow: hidden;
}

.ct-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 体系図（白パネル） */
.career-chart {
    margin-top: 50px;
}

/* 装飾：左の泡 */
.career-chart::before {
    content: "";
    position: absolute;
    top: -112px;
    left: -71px;
    width: 202px;
    height: 202px;
    background: url("../images/creed-deco-flask.png") center / contain no-repeat;
    pointer-events: none;
    z-index: 0;
}

.career-chart .container-rica {
    position: relative;
    z-index: 1;
}

.ct-panel--white {
    background: #fff;
    border-color: #fff;
    min-height: 743px;
    padding: 158px 48px 44px;
}

.career-chart-img {
    max-width: 950px;
    margin-inline: auto;
}

.career-chart-img img {
    display: block;
    width: 100%;
    height: auto;
}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width: 1240px) {

    /* 写真がテキストと重ならないよう比率調整 */
    .ct-panel {
        padding-right: 46%;
    }

    .ct-img {
        width: calc(46% - 60px);
    }
}

@media (max-width: 991px) {
    .career-page .career-head {
        padding-top: 110px;
    }

    .career-head .sec-title {
        font-size: 38px;
    }

    .career-head .sec-sub {
        font-size: 18px;
    }

    .career-page::after {
        display: none;
    }

    .career-panel-box {
        padding: 60px 0 64px;
        border-radius: 18px;
    }

    .career-about {
        margin-top: 70px;
    }

    .career-panel-inner {
        flex-direction: column;
        gap: 28px;
    }

    .career-panel-ribbon {
        min-width: 0;
        font-size: 26px;
        padding: 14px 26px;
    }

    .career-panel-text {
        max-width: none;
    }

    .career-panel-text p {
        font-size: 16px;
        line-height: 1.75;
        margin-bottom: 22px;
    }

    .career-model {
        margin-top: 60px;
    }

    .career-model-title {
        font-size: 30px;
    }

    .career-model-cards {
        flex-direction: column;
    }

    /* 縦積み時は flex-basis:0 のままだと高さが潰れるため解除 */
    .cm-card {
        flex: none;
        min-height: 0;
    }

    .cm-card-head {
        font-size: 21px;
        height: 56px;
    }

    .cm-chip-label {
        flex-basis: 110px;
        font-size: 15px;
        min-height: 72px;
    }

    .cm-chip-body {
        font-size: 15px;
        min-height: 64px;
    }

    .career-edu {
        margin-top: 70px;
    }

    .career-training {
        margin-top: 60px;
    }

    /* パネルは縦積み：リボンは通常フローに */
    .ct-panel {
        margin-left: 0;
        min-height: 0;
        padding: 32px 28px 36px;
    }

    .ct-panel+.ct-panel {
        margin-top: 40px;
    }

    .ct-ribbon {
        position: static;
        display: inline-block;
        min-width: 0;
        font-size: 24px;
        padding: 12px 22px;
        margin: -56px 0 20px -12px;
    }

    .ct-subtitle {
        font-size: 21px;
        margin-bottom: 16px;
    }

    .ct-img {
        position: static;
        width: 100%;
        margin-top: 24px;
    }

    .career-chart {
        margin-top: 40px;
    }

    .ct-panel--white {
        min-height: 0;
        padding: 32px 20px 36px;
    }
}

@media (max-width: 767px) {
    .career-page section {
        padding: 0;
    }

    .career-page .career-head {
        padding-top: 70px;
    }

    .career-head .sec-title {
        font-size: 30px;
    }

    .career-head .sec-sub {
        font-size: 15px;
        letter-spacing: .1em;
    }

    .career-model::before,
    .career-training::before,
    .career-chart::before {
        display: none;
    }

    .career-panel-ribbon {
        font-size: 21px;
        padding: 12px 20px;
    }

    .career-panel-text p,
    .ct-text p {
        font-size: 15px;
        line-height: 1.8;
    }

    .cm-card-text {
        padding: 0 12px;
    }

    .cm-chip-label {
        flex-basis: 92px;
        font-size: 13px;
        min-height: 64px;
    }

    .cm-chip-body {
        font-size: 13px;
        min-height: 56px;
        padding: 6px 10px;
    }

    .ct-ribbon {
        font-size: 19px;
        margin-top: -48px;
    }

    .ct-subtitle {
        font-size: 18px;
    }
}