@charset "UTF-8";

/*-----------------------------------
	headline (デザイン画像に基づき英語を大、日本語を小へ)
-----------------------------------*/
#headline {
    background-image: url(../img/jobdescription/mv.jpg);
}

#headline h1::after {
    content: "JOB DESCRIPTION";
}

/*-----------------------------------

	jobdescription_block

-----------------------------------*/

#jobdescription_block {
    padding: 60px 0 100px;
    background-color: #F4F9F8;
}

@media screen and (max-width: 640px) {
    #jobdescription_block {
        padding: 30px 0 50px;
    }
}

.jobdescription_main_title {
    text-align: left;
    margin-bottom: 30px;
}


.jobdescription_main_title .en {
    display: block;
    font: 700 1.5rem/1 var(--fEn);
    margin-top: 10px;
}

.jobdescription_main_title .jp {
    font: 700 3.7rem/1 var(--fJa);
    position: relative;
    padding-bottom: 10px;
}

.jobdescription_main_title .jp::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 22px;
    height: 2px;
    background: var(--mClr1);
}

#jobdescription_block .description_wrap {
    margin-top: 70px;
}

#jobdescription_block .description_table {
    width: 100%;
    margin: 0 auto;
    font-family: var(--fJa);
}

/* 各行のスタイル */
#jobdescription_block .description_row {
    display: flex;
    align-items: flex-start;
    /* 垂直中央揃え */
    padding: 30px 0;
    margin: 0;
    border-bottom: 1px solid #eee;
}

/* 左側の項目名 */
#jobdescription_block .description_label {
    width: 200px;
    color: var(--mClr1);
    /* メインカラーの緑 */
    font-weight: bold;
    font-size: 1.5rem;
    flex-shrink: 0;
    padding-top: 7px;

}

#jobdescription_block .description_content {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.5;
}

#jobdescription_block .text_group p {
    margin: 0;
}


#jobdescription_block .btn_job {
    display: flex;
    align-items: center;
    background-color: #333;
    /* ボタンの背景色 */
    padding: 8px 10px 8px 25px;
    /* 右側は矢印があるので少し狭く */
    border-radius: 40px;
    text-decoration: none;
    transition: 0.3s;
}

#jobdescription_block .btns {
    border-radius: calc(1px/0);
}

#jobdescription_block .btns a {
    background-color: #292929;
    border: 1px solid #FFF;
    color: #fff;
}


#jobdescription_block .btn_entry {
    padding: 18.5px 70px 18.5px 45px;
    font: 700 1.5rem / 1 var(--fJa);
    line-height: 1.3;
    text-box: trim-both cap alphabetic;
    letter-spacing: 0.03em;
    text-align: left;
    border-radius: calc(1px / 0);
    background-image: url(../img/common/icon_arrow_bwag.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 5px) center;
    background-size: 38px;
}

/* リスト全体の調整 */
#jobdescription_block .description_list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#jobdescription_block .description_list li {
    position: relative;
    padding-left: 1.2em;
    line-height: 1.7;
}

#jobdescription_block .description_list li:last-child {
    margin-bottom: 0;
}

/* 箇条書きの「・」を擬似要素で作る（2行目以降の文字を揃えるため） */
#jobdescription_block .description_list li::before {
    content: "・";
    position: absolute;
    left: 0;
    top: 0;
}

#jobdescription_block .description_list li br+span,
#jobdescription_block .description_list li {
    word-break: break-all;
    /* 改行を適切に */
}

#jobdescription_block .text_group .mt_small {
    margin-top: 15px;
    margin-bottom: 10px;
}

/* 丸数字リストのスタイル */
#jobdescription_block .description_num_list {
    list-style: none;
    padding: 0;
    margin: 5px 0 15px;
}

#jobdescription_block .description_num_list li {
    position: relative;
    padding-left: 1.8em;
    /* 数字の幅に合わせた余白 */
    line-height: 1.8;
}

/* 丸数字を擬似要素で制御（2行目以降のインデントを揃える） */
#jobdescription_block .description_num_list li::before {
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--fJa);
}

/* 各項目に数字を割り当て */
#jobdescription_block .description_num_list li:nth-child(1)::before {
    content: "①";
}

#jobdescription_block .description_num_list li:nth-child(2)::before {
    content: "②";
}

#jobdescription_block .description_num_list li:nth-child(3)::before {
    content: "③";
}

#jobdescription_block .qr_box {
    margin-top: 10px;
    background: var(--mClr1);
    padding: 10px 10px 5px 10px;
    border-radius: 10px;
    text-align: center;
    width: 130px;
}

#jobdescription_block .qr_img {
    background: #fff;
    border-radius: 5px;
    margin-bottom: 6px;
}

#jobdescription_block .qr_img img {
    width: 100%;
    border-radius: 5px;
    display: block;
}

#jobdescription_block .qr_box span {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
}

/* 840px〜640pxでの微調整 */
@media screen and (max-width: 840px) {
    .description_label {
        width: 160px;
    }

    #jobdescription_block .description_content {
        flex-direction: column;
        align-items: flex-start;
    }


    #jobdescription_block .btn_entry {
        padding: 15px 45px 15px 20px;
        font-size: 1.4rem;
        background-size: 32px;
    }
}


/* --- レスポンシブ (640px以下) --- */
@media screen and (max-width: 640px) {
    .jobdescription_main_title .jp {
        font-size: 2.5rem;
        padding-bottom: 10px;
        margin-bottom: 0px;
        line-height: 1.3;
    }

    .jobdescription_main_title .ex,
    .jobdescription_main_title .gra {
font-size: 18px;
}


    .jobdescription_main_title .en {
        font-size: 1.3rem;
        margin-bottom: 10px;
    }

    #jobdescription_block .description_row {
        flex-direction: column;
        /* スマホでは縦並び */
        align-items: flex-start;
        padding: 20px 0;
    }

    #jobdescription_block .description_wrap {
        margin-top: 30px;
    }

    .description_num_list li {
        font-size: 1.4rem;
        /* スマホでは少し文字を抑える */
    }

    #jobdescription_block .btn_entry {
        padding: 15px 45px 15px 20px;
        font-size: 1.2rem;
        background-size: 28px;
    }

    #jobdescription_block .description_label {
        width: 100%;
        margin-bottom: 10px;
    }

    #jobdescription_block .description_content {
        width: 100%;
        flex-direction: column;
        /* 内容とボタンも縦並び */
        align-items: flex-start;
        gap: 20px;
    }

    #jobdescription_block .btn_job {
        align-self: flex-start;
    }


}


/*-----------------------------------

	selection_block

-----------------------------------*/
#selection_block {
    padding: 85px 0 90px;
}

#selection_block .selection_flow {
    width: 100%;
    margin: 0 auto;
    font-family: var(--fJa);
    padding-top: 50px;
}

#selection_block .flow_list {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    list-style: none;
    padding: 0;
    margin: 0;
}

#selection_block .flow_item {
    position: relative;
    width: calc(20% - 20px);
    display: flex;
}


#selection_block .flow_item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -18px;
    /* カード間の中心に配置 */
    top: 50%;
    /* 数字の分、少し下にずらして中央へ */
    transform: translateY(-50%);
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 10px solid var(--mClr1);
    z-index: 5;
}

/* 丸数字 */
#selection_block .flow_num {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 51px;
    height: 51px;
    background-color: #fff;
    border: 1px solid var(--mClr1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--mClr1);
    font-family: var(--fEn);
    font-weight: 700;
    font-size: 2.2rem;
    z-index: 10;
}


#selection_block .flow_card {
    background-color: #F4F9F8;
    border: 1px solid #00A07D;
    padding: 45px 10px 20px;
    text-align: center;
    width: 100%;
    display: flex;

    flex-direction: column;
    justify-content: space-between;
    /* タイトルとアイコンを上下に振り分け */
}

#selection_block .flow_title {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.5;
}

#selection_block .flow_title span {
    display: block;
    /* 改 行を確実にする */
    font-size: 1.8rem;
    font-weight: 500;
    margin-top: 5px;
}

#selection_block .flow_icon {
    height: 75px;
    margin: 21px auto 0;
}

#selection_block .flow_icon img {
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}



/*-----------------------------------
    selection_block - Entry Box
-----------------------------------*/

#selection_block .entry_box {
    background-color: #F4F9F8;
    width: 100%;
    max-width: 983px;
    /* 左右を auto にして中央寄せに修正 */
    margin: 90px auto 0;
    padding: 60px 30px;
    text-align: center;
    border: 1px solid var(--mClr1);
    box-sizing: border-box;
}

#selection_block .entry_box p {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.5;
}

#selection_block .faq_action_area {
    display: flex;
    align-items: center;
    gap: 35px;
    justify-content: center;
    margin-top: 35px;
}

/* ボタンの共通設定 */
#selection_block .btns a {
    display: block;
    text-decoration: none;
    transition: 0.3s;
    /* 丸みの指定を安定した数値に変更 */
    border-radius: 50px;
}

#selection_block .btns .green {
    background-color: var(--mClr1);
    border: 1px solid var(--mClr1);
    color: #fff;
}

#selection_block .btns .black {
    background-color: #231815;
    border: 1px solid #231815;
    color: #fff;
}

#selection_block .btns a:hover {
    opacity: 0.8;
}

#selection_block .btn_entry {
padding: 18.5px 70px 18.5px 45px;
    font: 700 1.5rem / 1 var(--fJa);
    letter-spacing: 0.03em;
    text-align: left;
    
    /* 矢印アイコンの調整 */
    background-image: url(../img/common/icon_arrow_bwag.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 5px) center; /* -15pxから-5pxへ変更 */
    background-size: 38px; /* 30pxから38pxへ変更 */
}

/* QRコードボックス */
#selection_block .qr_box {
    background: var(--mClr1);
    padding: 10px 10px 8px 10px;
    border-radius: 10px;
    text-align: center;
    width: 130px;
    flex-shrink: 0;
    /* 潰れ防止 */
}

#selection_block .qr_img {
    background: #fff;
    border-radius: 5px;
    margin-bottom: 6px;
    padding: 5px;
    /* QRの周りに少し余白 */
}

#selection_block .qr_img img {
    width: 100%;
    border-radius: 0;
    /* QR自体は丸めない */
    display: block;
}

#selection_block .qr_box span {
    color: #fff;
    font-size: 1.2rem;
    /* 少し小さく調整 */
    font-weight: 700;
    line-height: 1.2;
    display: block;
}

/* --- 決定版に合わせたレスポンシブ追記 --- */
@media screen and (max-width: 840px) {
    #selection_block .flow_list {
        flex-wrap: wrap;
        justify-content: center;
        gap: 60px 20px;
        /* 縦の隙間を数字のサイズに合わせて少し広げる */
    }

    #selection_block .flow_item {
        width: calc(33.3% - 20px);
    }

    #selection_block .flow_item:nth-child(3)::after {
        display: none;
    }

    #selection_block .faq_action_area {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        margin-top: 25px;

    }

    #selection_block .btn_entry {
/* jobdescription_block の840px時の設定に統一 */
        padding: 15px 45px 15px 20px;
        font-size: 1.4rem;
        background-size: 32px;
    }

    #selection_block .entry_box {
        margin-top: 60px;
        padding: 40px 20px;
    }

    #selection_block .btn_entry {
        padding: 15px 55px 15px 25px;
        font-size: 1.4rem;
    }
}

@media screen and (max-width: 640px) {
    #selection_block {
        padding: 50px 0;
    }

    #selection_block .selection_flow {
        padding-top: 15px;
        /* 番号を浮かせるスペース */
    }

    #selection_block .flow_list {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* リスト全体を画面中央に配置 */
        gap: 25px;
    }

    #selection_block .flow_item {
        /* カードの幅を「内容のサイズ」に合わせる。最大でも画面の90% */
        width: fit-content;
        min-width: 280px;
        max-width: 90%;
        position: relative;
        padding-left: 20px;
        /* 番号をはみ出させるための余白 */
    }

    /* 番号：箱の左端に重ねる */
    #selection_block .flow_num {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        z-index: 10;
        /* 以下、これまでのデザインを維持 */
        background-color: #fff;
        border: 1px solid #00A07D;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #selection_block .flow_icon img {
        width: 100%;
        height: 100%;
        /* 画像のアスペクト比を維持したまま、枠内に収める魔法のプロパティ */
        object-fit: contain;
    }

    /* カード：番号が重なる分、左のpaddingを多めにとる */
    #selection_block .flow_card {
        display: flex;
        flex-direction: row;
        /* 横並び */
        align-items: center;
        justify-content: space-between;
        padding: 20px 20px 20px 50px;
        /* 左は番号分空け、右も適度に締める */
        gap: 15px;
        /* 要素同士の距離。ここを調整するとさらに近づきます */
        background-color: #F4F9F8;
        border: 1px solid #00A07D;
    }

    #selection_block .flow_title {
        font-size: 1.6rem;
        flex: 0 1 auto;
        /* 広がろうとするのを止める */
        text-align: left;
        line-height: 1.3;
    }

    #selection_block .flow_title span {
        display: block;
        /* 横長でも補足は下の方がバランスが良いです */
        font-size: 1.2rem;
        margin-top: 2px;
        opacity: 0.8;
    }

    /* アイコン：右端に配置 */
    #selection_block .flow_icon {
        width: 45px;
        /* 横幅を明示的に指定 */
        height: 45px;
        /* 高さを明示的に指定 */
        flex-shrink: 0;
        /* 親のFlexboxに潰されないように固定 */
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
    }

    #selection_block .flow_item:not(:last-child)::after {
        right: auto;
        left: 50%;
        bottom: -18px;
        top: auto;
        transform: translateX(-50%) rotate(90deg);
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 7px solid var(--mClr1);
        opacity: 0.6;
        /* 矢印が目立ちすぎないように調整 */
    }




    #selection_block .entry_box p {
        font-size: 1.6rem;
    }

    #selection_block .faq_action_area {
        flex-direction: column;
        /* 縦並びに変更 */
        gap: 10px;
    }


    #selection_block .btn_entry {
/* jobdescription_block の640px時の設定に統一 */
        text-align: left; /* センター寄せになっていたのを左寄せに統一 */
        padding: 15px 45px 15px 20px;
        font-size: 1.2rem;
        background-size: 28px;
        /* jobdescription側はpos指定がない（PC継承）ため、ここでも継承させるか、微調整が必要なら以下を使用 */
        background-position: calc(100% - 5px) center;
    }

    #selection_block .qr_box {
        margin-top: 10px;
    }
}