@charset "UTF-8";

@media only screen and (min-width:1024px) {

    .container > header {
        position: fixed;
        padding: 0;
        background: #ffffff;
        z-index: 1010;
    }

    .container h1 {
        width: 100%;
        font-size: 2.5rem;
        font-weight: 600;
        color: #ffffff;
        height: 8.5rem;
        padding: 0.2rem 0 0 1.5rem;
        margin: 11.5rem 0 2.5rem;
        background: linear-gradient(to bottom, #003fcb, #0054fc);
        /* 以下、上下中心の設定 */
        display: flex;
        /* justify-content: center; */
        align-items: center;
    }

    .breadcrumb {
        position: absolute;
        top: -13.5rem;
    }

    .container .h2nd {
        font-size: 2.2rem;
        margin: 0 0 2rem 0;
    }

    .container h2 {
        font-size: 2rem;
    }

    .anchor {
        font-size: 1.6rem;
        padding: 0 0 2rem;
        font-weight: bold;
    }

    /*  */
    .flex_columns {
        width: 100%;
        display: flex;
        justify-content: space-between;
        gap: 2rem;
    }

    /**
     * 先輩社員インタビュー
     ===================================== */
    .boss_message {
        background: #e9f2fc;
        border: 3px solid #5985df;
        border-radius: 1rem;
        padding: 2rem;
    }

    .ex_message {
        margin-bottom: -2rem;
        justify-content: flex-start;
        gap: 3rem;
    }

    .boss_message_profile {
        display: block;
        margin-bottom: 2rem;
        border: 3px solid #ffffff;
    }

    .boss_profile {
        font-size: 1.4rem;
    }

    .profile_portlate {
        border: 3px solid #ffffff;
        height: 100%;
    }

    /**
     * 生活相談員対談
     ===================================== */
    .portrait3 {
        border: 3px solid #ffffff;
    }
}

@media only screen and (min-width:462px) and (max-width:1023px) {
    .container h1 {
        width: 100%;
        font-size: 2.5rem;
        font-weight: 600;
        color: #ffffff;
        height: 8.5rem;
        padding: 0.2rem 0 0 2.5rem;
        margin: 12.5rem 0 2.5rem;
        background: linear-gradient(to bottom, #003fcb, #0054fc);
        /* 以下、上下中心の設定 */
        display: flex;
        /* justify-content: center; */
        align-items: center;
    }

    .breadcrumb {
        position: absolute;
        top: -13rem;
    }

    .container .h2nd {
        font-size: 2.2rem;
        margin: 0 0 2rem 0;
    }

    .container h2 {
        font-size: 2rem;
    }

    .anchor {
        font-size: 1.6rem;
        padding: 0 0 2rem;
        font-weight: bold;
    }

    /*  */
    .flex_columns {
        width: 100%;
        display: flex;
        justify-content: space-between;
        gap: 2rem;
    }

    /**
     * 先輩社員インタビュー
     ===================================== */
     .boss_message {
        background: #e9f2fc;
        border: 3px solid #5985df;
        border-radius: 1rem;
        padding: 2rem;
    }

    .ex_message {
        margin-bottom: -2rem;
        justify-content: flex-start;
        gap: 3rem;
    }

    .interview_fig {
        width: calc(50% - 1rem);
        height: 100%;
    }

    .boss_message_profile {
        display: block;
        margin-bottom: 2rem;
        border: 3px solid #ffffff;
    }

    .boss_profile {
        font-size: 1.4rem;
    }

    .profile_portlate {
        border: 3px solid #ffffff;
        height: 100%;
    }

    /* Y.O さんのみ */
    /* .flex_columns.ex_column.exex2 {
        gap: 0.5rem;
    } */

    /**
     * 生活相談員対談
     ===================================== */
     .portrait3 {
        border: 3px solid #ffffff;
        width: 50%;
        height: 100%;
    }
}

@media only screen and (max-width: 461px) {
    .container h1 {
        width: 100%;
        font-size: 2rem;
        font-weight: 600;
        color: #ffffff;
        height: 6rem;
        padding: 0.2rem 0 0 2.5rem;
        margin: 12rem 0 1.5rem;
        background: linear-gradient(to bottom, #003fcb, #0054fc);
        /* 以下、上下中心の設定 */
        display: flex;
        /* justify-content: center; */
        align-items: center;
    }

    .breadcrumb {
        position: absolute;
        top: -9rem;
        width: 100%;
    }

    .anchor {
        font-weight: bold;
    }

    /*  */
    .flex_columns {
        width: 100%;
    }

    /**
     * 先輩社員インタビュー
     ===================================== */
     .boss_message {
        background: #e9f2fc;
        border: 3px solid #5985df;
        border-radius: 1rem;
        padding: 1.5rem;
    }

    .ex_message {
        margin-bottom: -2rem;
        justify-content: flex-start;
        gap: 3rem;
    }

    .boss_message_profile {
        display: block;
        margin-bottom: 2rem;
        border: 3px solid #ffffff;
        width: 40%;
        height: 100%;
    }

    .boss_profile_columns {
        /*  */
        display: flex;
        justify-content: flex-start;
        gap: 1.5rem;
    }

    .boss_profile {
        font-size: 1.3rem;
    }

    .profile_portlate {
        border: 3px solid #ffffff;
        width: 100%;
        height: 100%;
        margin-bottom: 1rem;
    }

    .sp_spacer_none {
        display: none;
    }

    .icn_boss {
        background: #5985df;
        width: max-content;
        padding: 0 2rem;
        color: #ffffff;
        height: 2.5rem;
        line-height: 2.1rem;
        border-radius: 1.5rem;
        margin-bottom: 0.5rem;
    }

    /* スマホの縦向きと横向きで文字サイズを勝手に変更させない方法 */

}