@charset "utf-8";

/* ============================================================
  CAREMANAGER PAGE STYLES
============================================================ */

/* -------------------------
  1. Section: #become
------------------------- */
#become {
    scroll-margin-top: 100px;
}
.caremanager_become {
    padding-bottom: 16rem;
}

@media (max-width: 1024px) {
    .caremanager_become {
        padding: 10rem 0;
    }
}

@media (max-width: 767px) {
    .caremanager_become {
        padding: 8rem 0;
    }
}

.cm_lead {
    margin-top: 4rem;
    line-height: 2;
}

@media (max-width: 767px) {
    .cm_lead {
        margin-top: 2.4rem;
        font-size: 1.4rem;
    }
}

.cm_box {
    margin-top: 8rem;
}

@media (max-width: 767px) {
    .cm_box {
        margin-top: 6rem;
    }
}

.cm_txt {
    line-height: 2;
    margin-top: 4rem;
}

@media (max-width: 767px) {
    .cm_txt {
        font-size: 1.4rem;
        margin-top: 2.4rem;
    }
}

/* 受験資格のグレーボックス */
.cm_requirement_box {
    background-color: #F3F8FB;
    border-radius: 12px;
    padding: 4rem 4rem;
    margin-top: 4rem;
}

@media (max-width: 767px) {
    .cm_requirement_box {
        padding: 2.4rem 2rem;
    }
}

/* リストスタイル */
.cm_list {
    padding-left: 0rem;
}

.cm_list li {
    position: relative;
    line-height: 2;
    margin-bottom: 2rem;
    padding-left: 2.2rem;
}

.cm_list li::before {
    content: "";
    position: absolute;
    left: 0rem;
    top: 1.05rem;
    width: 12px;
    height: 12px;
    background-color: #3583C6;
    border-radius: 50%;
}

@media (max-width: 767px) {
    .cm_list li {
        padding-left: 1.6rem;
        font-size: 1.4rem;
    }

    .cm_list li::before {
        width: 6px;
        height: 6px;
        top: 1.1rem;
        left: 0;
    }
}

.cm_note {
    font-size: 1.4rem;
    margin-top: 2rem;
    line-height: 2;
}

/* フォロー体制 */
.cm_follow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6rem;
}

.cm_follow_content {
    flex: 1;
}

.cm_follow_img {
    width: 45%;
    flex-shrink: 0;
}

.cm_follow_img img {
    width: 100%;
    border-radius: 12px;
}

@media (max-width: 1024px) {
    .cm_follow {
        gap: 3.2rem;
    }

    .cm_follow_img {
        width: 48%;
    }
}

@media (max-width: 767px) {
    .cm_follow {
        flex-direction: column;
    }

    .cm_follow_img {
        width: 100%;
    }
}

/* -------------------------
  2. Flowchart
------------------------- */
.cm_flow {
    margin-top: 4rem;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.cm_flow_line_main {
    position: absolute;
    top: 7.5rem;
    bottom: 7.5rem;
    left: 7.3rem;
    width: 4px;
    background-color: #3583C6;
    z-index: 1;
}

@media (max-width: 1024px) {
    .cm_flow_line_main {
        left: 6.5rem;
    }
}

@media (max-width: 767px) {
    .cm_flow_line_main {
        left: 4.2rem;
        top: 5.2rem;
        bottom: 5.2rem;
    }
}

/* 各ステップコンテナ */
.cm_flow_step {
    background-color: #F3F8FB;
    border-radius: 8px;
    padding: 4rem;
    display: flex;
    align-items: flex-start;
    gap: 3.2rem;
    position: relative;
    z-index: 2;
}

@media (max-width: 1024px) {
    .cm_flow_step {
        padding: 3.2rem;
        gap: 2.4rem;
    }
}

@media (max-width: 767px) {
    .cm_flow_step {
        padding: 2rem 1.6rem;
        gap: 1.6rem;
    }
}

/* FLOW 01 */
.cm_flow_step.is_flow01 {
    flex-direction: column;
    align-items: stretch;
    gap: 3.2rem;
}

.cm_flow_step.is_flow01 .cm_flow_sub {
    font-weight: bold;
}

.cm_flow_step.is_flow01 .cm_flow_head_text {
    margin-bottom: 0;
}

.cm_flow_step.is_flow01 .cm_flow_routes {
    width: 100%;
}

@media (max-width: 767px) {
    .cm_flow_step.is_flow01 {
        gap: 2.4rem;
    }
}

.cm_flow_step_top {
    display: flex;
    align-items: flex-start;
    gap: 3.2rem;
}

@media (max-width: 767px) {
    .cm_flow_step_top {
        gap: 1.6rem;
    }
}

/* FLOW 04 */
.cm_flow_step.is_flow04 {
    margin-top: 5.3rem;
    overflow: visible;
}

@media (max-width: 767px) {
    .cm_flow_step.is_flow04 {
        margin-top: 7.3rem;
    }
}

.cm_flow_step.is_simple {
    align-items: center;
    gap: 2rem;
}

.cm_flow_step.is_blue {
    background-color: #3583C6;
    color: #FFF;
}

.cm_flow_step.is_blue .cm_flow_badge {
    background-color: #FFF;
    color: #3583C6;
}

/* ステップバッジ */
.cm_flow_badge {
    width: 7rem;
    height: 7rem;
    border-radius: 8px;
    background-color: #3583C6;
    color: #FFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .cm_flow_badge {
        width: 5.6rem;
        height: 5.6rem;
    }
}

.cm_flow_badge_en {
    font-family: "Saira", sans-serif;
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1;
    margin-bottom: 2px;
}

.cm_flow_badge_num {
    font-family: "Saira", sans-serif;
    font-weight: 500;
    font-size: 3.2rem;
    line-height: 1;
}

@media (max-width: 767px) {
    .cm_flow_badge_num {
        font-size: 2.4rem;
    }
}

/* コンテンツエリア */
.cm_flow_content {
    flex: 1;
}

.cm_flow_head_text {
    margin-bottom: 4rem;
}

.cm_flow_title {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.5;
}

@media (max-width: 767px) {
    .cm_flow_title {
        font-size: 1.5rem;
    }
}

.cm_flow_sub {
    font-size: 1.6rem;
    font-weight: normal;
    margin-top: 1rem;
    line-height: 2;
}

@media (max-width: 767px) {
    .cm_flow_sub {
        font-size: 1.3rem;
        margin-top: 0.5rem;
    }
}

.cm_flow_step.is_simple .cm_flow_title {
    font-size: 1.8rem;
}

/* ルート分岐 */
.cm_flow_routes {
    display: flex;
    gap: 2rem;
}

@media (max-width: 767px) {
    .cm_flow_routes {
        flex-direction: column;
        gap: 1.6rem;
    }
}

.cm_flow_route {
    background-color: #FFF;
    border: 1px solid #D6E4F5;
    border-radius: 8px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cm_flow_route_ttl {
    background-color: #D6E4F5;
    color: #4A4A4A;
    text-align: center;
    padding: 1.6rem;
    font-weight: 500;
    font-size: 1.8rem;
}

@media (max-width: 767px) {
    .cm_flow_route_ttl {
        font-size: 1.4rem;
        padding: 1.2rem;
    }
}

.cm_flow_route_body {
    padding: 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}

@media (max-width: 767px) {
    .cm_flow_route_body {
        padding: 2.4rem 1.6rem;
    }
}

.cm_flow_route_txt {
    font-size: 1.5rem;
    line-height: 1.8;
}

.cm_flow_route_txt strong {
    font-weight: bold;
}

@media (max-width: 767px) {
    .cm_flow_route_txt {
        font-size: 1.3rem;
    }
}

.cm_flow_route_arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem 0;
}

/* 強調リボン */
.cm_flow_ribbon {
    position: absolute;
    top: -5rem;
    left: 0rem;
    background-color: #F4D321;
    padding: 1.6rem 4rem;
    border-radius: 20px;
    font-size: 1.6rem;
    font-weight: normal;
    display: inline-block;
    z-index: 10;
}

.cm_flow_ribbon_arrow {
    position: absolute;
    right: 79.5%;
    transform: translateX(-50%);
    top: 96%;
    display: flex;
    justify-content: center;
    width: 4rem;
}

.cm_flow_ribbon_arrow svg {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 1024px) {
    .cm_flow_ribbon {
        padding: 1.6rem 2.4rem;
    }
}

@media (max-width: 767px) {
    .cm_flow_ribbon {
        font-size: 1.4rem;
        padding: 1.6rem;
        border-radius: 12px;
        top: -7rem;
        right: 8rem;
        line-height: 1.5;
        left: 0;
    }

    .cm_flow_ribbon_arrow {
        left: 4.4rem;
        width: 2.4rem;
    }
}

/* -------------------------
  3. Section: #first_step
------------------------- */
.caremanager_first_step {
    padding: 16rem 0;
    background-color: #F3F8FB;
    border-radius: 40px;
    background-image: linear-gradient(to right, var(--grid_40_line_blue) 0.1rem, transparent 1px), linear-gradient(to bottom, var(--grid_40_line_blue) 0.1rem, transparent 1px);
    background-size: var(--grid_40_size) var(--grid_40_size);
    background-position: 0 0;
}

@media (max-width: 1024px) {
    .caremanager_first_step {
        padding: 10rem 0;
        border-radius: 32px;
    }
}

@media (max-width: 767px) {
    .caremanager_first_step {
        padding: 8rem 0;
        border-radius: 20px;
    }
}

/* 国家資格リスト */
.cm_certs {
    background-color: #FFF;
    border-radius: 8px;
    padding: 4rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
    margin-top: 4rem;
}

.cm_certs .c_ttl-6 {
    font-weight: 500;
    font-size: 1.8rem;
}

.cm_certs .cm_note {
    margin-top: 0;
}

@media (max-width: 1024px) {
    .cm_certs {
        gap: 2.4rem;
        padding: 3.2rem;
    }
}

@media (max-width: 767px) {
    .cm_certs {
        grid-template-columns: 1fr;
        padding: 2.4rem;
        gap: 3.2rem;
    }
}

.cm_certs_col ul {
    margin-top: 2rem;
    padding-left: 5.2rem;
}

@media (max-width: 767px) {
    .cm_certs_col ul {
        padding-left: 2.4rem;
    }
}

.cm_certs_col li {
    position: relative;
    line-height: 2;
    font-size: 1.5rem;
}

.cm_certs_col li::before {
    content: "";
    position: absolute;
    left: -2.2rem;
    top: 1rem;
    width: 12px;
    height: 12px;
    background-color: #3583C6;
    border-radius: 50%;
}

/* セカンドキャリア */
.cm_second_career_inner {
    margin-top: 4rem;
    position: relative;
}

.cm_second_career_content h4 {
    margin-top: 4rem;
}

.cm_second_career_content h4:first-child {
    margin-top: 0;
}

.cm_second_career_content p {
    margin-top: 2rem;
    line-height: 2;
}

.cm_second_career_img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 18rem;
    pointer-events: none;
}

.cm_second_career_img img {
    width: 100%;
}

@media (max-width: 1024px) {
    .cm_second_career_img {
        position: static;
        margin: 4rem auto 0;
        width: 15rem;
    }
}

@media (max-width: 767px) {
    .cm_second_career_img {
        width: 12rem;
        margin: 2.4rem auto 0;
    }
}

/* -------------------------
  4. Section: #training
------------------------- */
.caremanager_training {
    padding: 16rem 0;
    position: relative;
    z-index: 1;
}

@media (max-width: 1024px) {
    .caremanager_training {
        padding: 10rem 0;
    }
}

@media (max-width: 767px) {
    .caremanager_training {
        padding: 8rem 0;
    }
}

.cm_training_main_img {
    width: 100%;
    border-radius: 8px;
    margin-top: 4rem;
}

.cm_reason_box {
    background-color: #FFF;
    border: 10px solid #3583C6;
    border-radius: 20px;
    padding: 8.8rem 6rem 7rem;
    margin-top: 12rem;
    position: relative;
    background-image: linear-gradient(to right, var(--grid_40_line_blue) 0.1rem, transparent 1px), linear-gradient(to bottom, var(--grid_40_line_blue) 0.1rem, transparent 1px);
    background-size: var(--grid_40_size) var(--grid_40_size);
    background-position: 0 0;
    z-index: 2;
}

@media (max-width: 1024px) {
    .cm_reason_box {
        padding: 6rem 4rem 5rem;
    }
}

@media (max-width: 767px) {
    .cm_reason_box {
        margin-top: 8rem;
        padding: 6rem 2.4rem 3.2rem;
        border-width: 6px;
    }
}

.cm_reason_head {
    background-color: #3583C6;
    color: #FFF;
    font-size: 2.4rem;
    font-weight: bold;
    padding: 2.4rem 6rem;
    border-radius: 8px;
    position: absolute;
    top: 0;
    left: 8rem;
    transform: translate(0%, -50%);
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .cm_reason_head {
        left: 4rem;
        font-size: 2rem;
        padding: 2.4rem 4rem;
    }
}

@media (max-width: 767px) {
    .cm_reason_head {
        font-size: 1.4rem;
        padding: 1.2rem 2rem;
        width: calc(100% - 3.2rem);
        text-align: center;
        white-space: normal;
        left: 1.6rem;
    }
}

@media (max-width: 375px) {
    .cm_reason_head {
        font-size: 1.35rem;
    }
}

.cm_reason_head_arrow {
    position: absolute;
    left: 5.7rem;
    top: 90%;
    display: flex;
    justify-content: center;
    width: 6rem;
}

.cm_reason_head_arrow svg {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 767px) {
    .cm_reason_head_arrow {
        width: 4rem;
        left: 3rem;
    }
}

.cm_reason_body h4 {
    margin-top: 4rem;
}

.cm_reason_body h4:first-child {
    margin-top: 0;
}

.cm_reason_body p {
    margin-top: 1.6rem;
    line-height: 2;
}

@media (max-width: 767px) {
    .cm_reason_body p {
        font-size: 1.4rem;
    }
}

.cm_reason_body strong {
    background-color: #F3F8FB;
}

/* 連絡エリア */
.cm_contact_area {
    margin-top: 8rem;
    position: relative;
    z-index: 0;
}

/* 背景（四角い下半分） */
.cm_contact_area::before {
    content: "";
    position: absolute;
    bottom: -16rem;
    left: -100vw;
    right: -100vw;
    top: -10rem;
    background-color: #F3F8FB;
    z-index: -1;
}

@media (max-width: 1024px) {
    .cm_contact_area::before {
        top: -60rem;
    }
}

@media (max-width: 767px) {
    .cm_contact_area::before {
        top: -75rem;
    }
}

/* 背景（上部の緩やかな円弧） */
.cm_contact_area::after {
    content: "";
    position: absolute;
    top: -8rem;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140vw;
    height: 16vw;
    min-height: 8rem;
    max-height: 30rem;
    background-color: #F3F8FB;
    border-radius: 50%;
    z-index: -1;
}

@media (max-width: 1024px) {
    .cm_contact_area::after {
        top: -60rem;
    }
}

@media (max-width: 767px) {
    .cm_contact_area::after {
        width: 200vw;
        height: 25vw;
        top: -75rem;
    }
}

.cm_contact_ttl {
    font-size: 2.4rem;
    font-weight: bold;
    border-left: 4px solid #3583C6;
    padding-left: 1.6rem;
}

@media (max-width: 767px) {
    .cm_contact_ttl {
        font-size: 2rem;
    }
}

.cm_contact_area p {
    margin-top: 4rem;
    line-height: 2;
}

@media (max-width: 767px) {
    .cm_contact_area p {
        font-size: 1.4rem;
        margin-top: 2.4rem;
    }
}

.cm_contact_btns {
    display: flex;
    gap: 2.4rem;
    margin-top: 4rem;
}

.cm_contact_btns .c_btn_arrow_ext_img {
    filter: invert(73%) sepia(24%) saturate(626%) hue-rotate(114deg) brightness(89%) contrast(93%);
}

.cm_contact_btns .c_btn_arrow {
    width: 100%;
    max-width: 34.2rem;
    font-weight: bold;
    padding: 3.2rem;
}

@media (max-width: 1024px) {
    .cm_contact_btns {
        flex-direction: column;
        align-items: center;
    }

    .cm_contact_btns .c_btn_arrow {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .cm_contact_btns .c_btn_arrow {
        padding: 2.4rem;
    }
}

/* -------------------------
  5. Section: #campaign
------------------------- */
.caremanager_campaign {
    position: relative;
    padding: 16rem 0 16rem;
    z-index: 1;
    background: linear-gradient(to bottom, #F3F8FB 0%, #F3F8FB 50%, #FFF 50%, #FFF 100%);
    overflow: hidden;
}

@media (max-width: 1024px) {
    .caremanager_campaign {
        padding: 10rem 0;
    }
}

@media (max-width: 767px) {
    .caremanager_campaign {
        padding: 4rem 0;
    }
}

.caremanager_campaign::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0rem;
    left: calc(50% - 50vw);
    width: 100vw;
    background-color: #F4D321;
    z-index: -1;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.4) 0.05rem, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0.05rem, transparent 1px);
    border-radius: 40px;
    background-size: var(--grid_40_size) var(--grid_40_size);
}

.cm_campaign_wrap {
    background-color: #FFF;
    border-radius: 40px;
    padding: 1rem;
}

@media (max-width: 767px) {
    .cm_campaign_wrap {
        padding: 1rem;
        border-radius: 24px;
    }
}

.cm_campaign_box {
    border: 1px solid #F4D321;
    border-radius: 32px;
    padding: 1rem 2rem 4rem 4rem;
    text-align: center;
    position: relative;
}

@media (max-width: 1024px) {
    .cm_campaign_box {
        padding: 4rem;
    }

    .caremanager_campaign::before {
        border-radius: 32px;
    }
}

@media (max-width: 767px) {
    .cm_campaign_box {
        padding: 1rem 2rem 3.2rem;
        border-radius: 16px;
    }

    .caremanager_campaign::before {
        border-radius: 24px;
    }
}

.cm_campaign_head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 4rem;
}

@media (max-width: 767px) {
    .cm_campaign_head {
        gap: 1rem;
        margin-bottom: 2rem;
    }
}

.cm_campaign_deco {
    width: 8rem;
    height: 8rem;
    object-fit: contain;
}

.cm_campaign_deco_right {
    transform: scaleX(-1);
}

@media (max-width: 767px) {
    .cm_campaign_deco {
        width: 4rem;
        height: 4rem;
    }
}

.cm_campaign_badge {
    display: inline-block;
    color: #4A4A4A;
    font-size: 1.8rem;
    font-weight: bold;
    padding: 0 0 0.8rem 0;
    border-bottom: 1px solid #F47F53;
    position: relative;
}

.cm_campaign_badge::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #F47F53;
}

.cm_campaign_badge_orange {
    color: #F47F53;
}

@media (max-width: 767px) {
    .cm_campaign_badge {
        font-size: 1.4rem;
    }
}

.cm_campaign_ttl {
    font-size: 4rem;
    font-weight: bold;
    line-height: 1.6;
    color: #4A4A4A;
}

@media (max-width: 1024px) {
    .cm_campaign_ttl {
        font-size: 3.2rem;
    }
}

@media (max-width: 767px) {
    .cm_campaign_ttl {
        font-size: 2.4rem;
    }
}

.cm_campaign_ttl_sub {
    font-size: 2.4rem;
    font-weight: bold;
}

@media (max-width: 767px) {
    .cm_campaign_ttl_sub {
        font-size: 1.6rem;
        display: inline-block;
        margin-bottom: 1rem;
    }
}

.cm_campaign_ttl .num {
    font-size: 6.4rem;
    font-weight: bold;
    font-style: italic;
    color: #F47F53;
    font-family: "Saira", sans-serif;
    margin: 0 0.8rem;
    vertical-align: middle;
    line-height: 1;
    margin-top: -14px;
    display: inline-block;
}

@media (max-width: 1024px) {
    .cm_campaign_ttl .num {
        font-size: 5.6rem;
    }
}

@media (max-width: 767px) {
    .cm_campaign_ttl .num {
        font-size: 4rem;
    }
}

.cm_campaign_target {
    display: flex;
    align-items: center;
    gap: 2.4rem;
    text-align: left;
    margin-top: 4.5rem;
    max-width: 80rem;
}

@media (max-width: 767px) {
    .cm_campaign_target {
        flex-direction: column;
        gap: 1.6rem;
        align-items: flex-start;
        margin-top: 4rem;
    }
}

.target_label {
    background-color: #F4D321;
    color: #4A4A4A;
    width: 6.4rem;
    height: 6.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.6rem;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .target_label {
        width: 5.6rem;
        height: 5.6rem;
        font-size: 1.4rem;
    }
}

.cm_campaign_target p {
    line-height: 2;
    font-size: 1.6rem;
    color: #4A4A4A;
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .cm_campaign_target p {
        flex-shrink: 1;
        overflow-wrap: break-word;
    }
}

@media (max-width: 767px) {
    .cm_campaign_target p {
        text-align: left;
        font-size: 1.4rem;
    }
}

.cm_campaign_target strong {
    font-weight: bold;
}

.cm_campaign_border {
    border-top: 2px dotted #F4D321;
    margin: 4rem auto;
    max-width: 88rem;
}

@media (max-width: 767px) {
    .cm_campaign_border {
        margin: 2rem auto;
    }
}

.cm_campaign_welcome {
    text-align: left;
}

.cm_campaign_welcome_ttl {
    font-size: 2rem;
    font-weight: bold;
    color: #4A4A4A;
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.cm_campaign_welcome_ttl::before {
    content: "";
    display: inline-block;
    width: 2rem;
    height: 2px;
    background-color: #F47F53;
}

@media (max-width: 767px) {
    .cm_campaign_welcome_ttl {
        font-size: 1.8rem;
    }
}

.cm_campaign_welcome p {
    margin-top: 2rem;
    line-height: 2;
    color: #4A4A4A;
}

@media (max-width: 1024px) {
    .cm_campaign_welcome p {
        word-break: auto-phrase;
        overflow-wrap: break-word;
    }
}

@media (max-width: 767px) {
    .cm_campaign_welcome p {
        font-size: 1.4rem;
        line-height: 1.8;
    }
}