@charset "utf-8";

/* ==================================================================
    career-plan.css

=================================================================== */
/* --------------------------------
    □ 背景色
-------------------------------- */
#career-plan .contents {
    background: rgb(255,241,241);
    background: linear-gradient(180deg, rgba(255,241,241,1) 0%, rgba(255,254,236,1) 100%);
}

/* --------------------------------
    □ points
-------------------------------- */
#career-plan section#points {
    padding-top: 50px;
}
section#points .subsection + .subsection {
    margin-top: 64px;
}
section#points .container > .lv3 {
    font-size: 2.4rem;
    margin-bottom: 50px;
}
section#points .container > .lv3 em {
    display: block;
    font-size: 3.6rem;
    margin-bottom: 13px;
}
section#points .whitebox {
    padding: 50px 37px;
    position: relative;
}
section#points .whitebox .icon {
    position: absolute;
    top: -25px;
    left: 37px;
}
section#points #point01 .whitebox p.image img {
    border: 1px solid #1A1311;
}
section#points .whitebox p.text + p.image {
    margin-top: 58px;
}
section#points .whitebox p.text {
    margin-bottom: 0;
}
section#points .whitebox h4 {
    font-size: 2.6rem;
    margin-bottom: 37px;
    background-color: #E0EAB7;
    padding: 20px;
}
section#points .whitebox p.text + h4,
section#points .whitebox p.text + .imgWrap {
    margin-top: 46px;
}
section#points .whitebox h5 {
    margin-bottom: 10px;
}
section#points .whitebox p.text + h5 {
    margin-top: 28px;
}
section#points .whitebox .imgWrap {
    padding: 50px 48px;
    border: 1px solid #ECECEC;
}
/* step */
section#points .whitebox .step {
    margin-top: 75px;
    border: 1px solid #ECECEC;
    position: relative;
}
section#points .whitebox .step .icon {
    position: absolute;
    top: -44px;
    left: 20px;
}
section#points .whitebox .step h5 {
    color: #fff;
    font-size: 2.4rem;
    letter-spacing: 0;
    text-align: left;
    background-color: #708CE2;
    padding: 9px 120px;
    margin-bottom: 0;
}
section#points .whitebox .step h5 small {
    font-size: 1.6rem;
}
section#points .whitebox .step .txtArea {
    padding: 23px;
}
section#points .whitebox .step .stepbox {
    background-color:#F1F4FF;
    padding: 23px;
}
section#points .whitebox .step .stepbox + .stepbox {
    margin-top: 23px;
}
section#points .whitebox .step .stepbox h6 {
    color: #708CE2;
    font-size: 2rem;
    letter-spacing: 0;
    margin-bottom: 10px;
    text-align: left;
}
section#points .whitebox .step .stepbox dl {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    letter-spacing: 0;
}
section#points .whitebox .step .stepbox dt {
    width: 10em;
    flex-shrink: 0;
}
section#points .whitebox .step .stepbox dd ul li {
    width: 100%;
    padding-left: 1em;
    text-indent: -1em;
    letter-spacing: 0;
}
section#points .whitebox .step .stepbox dd ul.indent16 {
    padding-left: 16em;
}
section#points .whitebox .step .stepbox dd ul.indent10 {
    padding-left: 10em;
}
/* step02 */
section#points .whitebox #step02 h5 {
    background-color: #70C6C6;
}
section#points .whitebox #step02 .stepbox {
    background-color: #E7FCFC;
}
section#points .whitebox #step02 .stepbox h6 {
    color: #70C6C6;
}
/* step03 */
section#points .whitebox #step03 h5 {
    background-color: #8CC68C;
}
section#points .whitebox #step03 .stepbox {
    background-color: #ECFFEC;
}
section#points .whitebox #step03 .stepbox h6 {
    color: #8CC68C;
}
/* step04 */
section#points .whitebox #step04 h5 {
    background-color: #B5D663;
}
section#points .whitebox #step04 .stepbox {
    background-color: #F8FFE5;
}
section#points .whitebox #step04 .stepbox h6 {
    color: #B5D663;
}
/* step05 */
section#points .whitebox #step05 h5 {
    background-color: #F8B54F;
}
section#points .whitebox #step05 .stepbox {
    background-color: #FFF1DC;
}
section#points .whitebox #step05 .stepbox h6 {
    color: #F8B54F;
}
/* step06 */
section#points .whitebox #step06 h5 {
    background-color: #FF954E;
}
section#points .whitebox #step06 .stepbox {
    background-color: #FFF4EC;
}
section#points .whitebox #step06 .stepbox h6 {
    color: #FF954E;
}
/* step07 */
section#points .whitebox #step07 h5 {
    background-color: #FF6E57;
}
section#points .whitebox #step07 .stepbox {
    background-color: #FFECE9;
}
section#points .whitebox #step07 .stepbox h6 {
    color: #FF6E57;
}


/* タブレット用
-------------------------------------------- */
@media (max-width: 999px) and (min-width: 768px) {

    /* --------------------------------
        □ points
    -------------------------------- */
    section#points .whitebox .step .stepbox dl {
        flex-direction: column;
        gap: 4px;
    }
}


/* SP用
-------------------------------------------- */
@media only screen and (max-width : 767px) {

    /* --------------------------------
        □ points
    -------------------------------- */
    section#points .subsection + .subsection {
        margin-top: 50px;
    }
    section#points .container > .lv3 {
        font-size: 2rem;
    }
    section#points .container > .lv3 em {
        font-size: 2.8rem;
    }
    section#points .whitebox {
        padding: 30px 4%;
    }
    section#points .whitebox .icon {
        zoom: 0.8;
        left: 4%;
    }
    section#points .whitebox h4 {
        font-size: 1.8rem;
        margin-bottom: 20px;
        padding: 10px 4%;
    }
    section#points .whitebox p.text {
        font-size: 1.5rem;
    }
    section#points .whitebox p.text + p.image,
    section#points .whitebox p.text + h4,
    section#points .whitebox p.text + .imgWrap,
    section#points .whitebox p.text + h5 {
        margin-top: 20px;
    }
    section#points .whitebox .imgWrap {
        padding: 20px 4%;
    }
    /* step */
    section#points .whitebox .step {
        border: none;
    }
    section#points .whitebox .step + .step {
        margin-top: 75px;
    }
    section#points .whitebox .step .icon {
        zoom: 0.8;
        top: -60px;
        left: 4%;
    }
    section#points .whitebox .step h5 {
        font-size: 1.8rem;
        padding: 14px 4%;
        line-height: 1.2;
        text-align: center;
    }
    section#points .whitebox .step h5 small {
        font-size: 1.4rem;
    }
    section#points .whitebox .step .txtArea {
        padding: 0;
    }
    section#points .whitebox .step .stepbox {
        padding: 20px 4% 30px;
    }
    section#points .whitebox .step .stepbox + .stepbox {
        margin-top: 0;
        padding-top: 0;
    }
    section#points .whitebox .step .stepbox h6 {
        font-size: 1.7rem;
        margin-bottom: 6px;
    }
    section#points .whitebox .step .stepbox dl {
        flex-direction: column;
        gap: 0;
    }
    section#points .whitebox .step .stepbox dl > * {
        width: 100%;
        line-height: 1.5;
        font-size: 1.5rem;
    }
    section#points .whitebox .step .stepbox dd {
        font-size: 1.4rem;
    }
    section#points .whitebox .step .stepbox dd ul li {
        line-height: 1.5;
        margin-top: 6px;
    }
    section#points .whitebox .step .stepbox dd ul.indent16,
    section#points .whitebox .step .stepbox dd ul.indent10 {
        padding-left: 0;
    }
}