@charset "utf-8";

:root {
        --btn1_text_width: 71.307vw;
        --btn1_txt1_fontsize: 6.6090vw;
        --btn1_word_fontsize: 6.6090vw;
        --btn1_circle: 28.470vw;
        --btn1_circle_title: 2.3305vw;
        --btn1_circle_title_marginT: 2.3203vw;
        --btn1_circle_text: 1.7867vw;
        --btn1_circle_text_margin_L: 4.0671vw;
        --btn1_circle_text_margin_R: 3.0503vw;
        --btn1_circle_text_margin_B: 2.0710vw;
        --arrow_fontsize: 9.3218vw;
        --arrow_B: 6.1007vw;
        --arrow_L: 24.403vw;
    }


/*1つ目ここから*/
.btn1 {
    background: linear-gradient(270deg, #5196f033, #72b1e04d),
        url(../recruit/images/index_btn.JPG);
    background-size: cover;
    color: white;
}

.btn1 .text {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-105%);
    margin: 0 auto;
    font-size: var(--btn1_txt1_fontsize);
    text-align: center;
}

.words {
    position: absolute;
    width: 100%;
    top: 30%;
    text-align: center;
}

.words_container {
    display: flex;
    justify-content: space-between;
    margin: 1% 14%;
}

.word {
    font-size: var(--btn1_word_fontsize);
    font-weight: bold;
}

.circle1 {
    position: relative;
    width: var(--btn1_circle);
    height: var(--btn1_circle);
    margin: 0 auto;
    border: 0.2vw solid #376092;
    border-radius: 48% 56% 46% 65%/55% 50% 56% 58%;
}

.circle2 {
    width: var(--btn1_circle);
    height: var(--btn1_circle);
    border: 0.2vw solid #376092;
    border-radius: 48% 55% 52% 55%/53%
}

.arrow:after {
    content: "➝";
    position: absolute;
    bottom: var(--arrow_B);
    left: var(--arrow_L);
    font-size: var(--arrow_fontsize);
}

.circle_title {
    width: 100%;
    margin: var(--btn1_circle_title_marginT) 0px 5px 0px;
    font-size: var(--btn1_circle_title);
    text-align: center;
    font-weight: bold;
    color: #376092;
}

.circle_text {
    font-size: var(--btn1_circle_text);
    margin: 0 var(--btn1_circle_text_margin_R) var(--btn1_circle_text_margin_B) var(--btn1_circle_text_margin_L);
}



.content1_flex {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    margin : 0% 5%;
}

/*1つ目ここまで*/

:root {
        --btn2_icon_width: 10.168vw;
        --btn2_story_fontsize: 7.7682Vw;
        --btn2_epi_font-size: 4.6609vw;
        --btn2_epi_title_fontsize: 3.1073vw;
        --btn2_epi_title_padding_TRB: 2.3330vw;
        --btn2_epi_title_padding_L: 0.77681vw;
        --btn2_epi_text_fontsize: 1.5760vw;
        --btn2_epi_text_margin_T: 0.77681vw;
        --btn2_epi_text_margin_R: 2vw;
        --btn2_epi_text_margin_B: 2.3330vw;
        --btn2_epi_text_margin_L: 2.5vw;
    }


/*2つ目ここから*/
.btn2 {
    background: linear-gradient(315deg, #f6f9fc, #b9cde5c2, #d5e1efe1 , #cad9eb);
    color: #10253f;
}

.icon1 {
    position: absolute;
    width: var(--btn2_icon_width);
    top: 15%;
    left: 15%;
}

.story {
    position: absolute;
    top: 20%;
    right: 15%;
    letter-spacing: 1vw;
    font-size: var(--btn2_story_fontsize);
    font-family: 'Helvetica', 'ヒラギノ角ゴシック', 'Hiragino Sans', sans-serif;
}

.Android .story {
    font-family: 'Kanit', sans-serif;
}

.episode {
    width: 70%;
    margin: 0;
    font-size: var(--btn2_epi_font-size);
    font-weight: bold;
}

.episode_content {
    width: 98%;
    border: 0.2667vw solid black;
    border-radius: 0 5vw 0 8vw;
    box-shadow: 1.0664vw 1.0664vw 2.1328vw gray;
}

.episode_title {
    padding: var(--btn2_epi_title_padding_TRB) var(--btn2_epi_title_padding_TRB) var(--btn2_epi_title_padding_TRB) var(--btn2_epi_title_padding_L);
    margin: 0vw;
    font-size: var(--btn2_epi_title_fontsize);
    font-weight: bold;
    border-radius: 0 5vw 0 0;
    color: #10253f;
    background: linear-gradient(315deg, #f6f9fc, #b9cde5c2, #d5e1efe1 , #cad9eb);
}

.episode_text {
    padding: var(--btn2_epi_text_margin_T) var(--btn2_epi_text_margin_R) var(--btn2_epi_text_margin_B) var(--btn2_epi_text_margin_L);
    font-size: var(--btn2_epi_text_fontsize);
}



.content2_flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 5%;
    margin: 0 5%;
}

/*2つ目ここまで*/


    .recruit_grid1 {
        text-align: center;
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin: 3vw 5% 0% 5%;
    }


:root {
    --fukidashi_before: -7.25vw;
        --fukidashi_after: -7.75vw;
        --balloon_size: 17.285vw;
        --balloon_before_B: -2.0336vw;
        --balloon_before_R: -7.1174vw;
        --balloon_before_border: 4.1436vw;
        --balloon_before_border_L: 9.1158vw;
        --btn3_txt1_fontsize: 5.1250vw;
        --btn3_txt1_marginB: 3.107vw;
        --btn3_txt2_fontsize: 7.7682vw;
        --btn3_voicetitle_fontsize: 3.8841vw;
    }


@media screen and (max-width:765px) {
    :root {
        --fukidashi_before: -7.25vw;
        --fukidashi_after: -7.75vw;
    }

    .recruit_grid1 {
        text-align: center;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 3fr 4fr;
        margin-top: 3vw;
        gap: 3vw;
    }

    .right .font_center {
        order: 1;
    }

    .right .recruit_grid2 {
        order: 2;
    }
}

/*3つ目ここから*/
.btn3_grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2vw;
    padding-top: 1vw;
    margin: 0px 10px 0px 10px;
}

.btn3 {
    background-color: #fdeada;
    color: #632523;
}

.btn3_container {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 5.332vw;
    width: 100%;
}

.balloon {
    position: relative;
    width: var(--balloon_size);
    height: var(--balloon_size);
    top: 1%;
    left: 30%;
    border-radius: 50%;
    background-color: #da9694;
}

.balloon:before {
    content: "";
    position: absolute;
    bottom: var(--balloon_before_B);
    right: var(--balloon_before_R);
    -webkit-transform: rotate(72deg);
    transform: rotate(30deg);
    border: var(--balloon_before_border) solid transparent;
    border-left: var(--balloon_before_border_L) solid #da9694;
}

.texts {
    position: relative;
    padding-top: 0.7998vw;
    text-align: center;
    font-weight: bold;
    font-family: 'Comic Sans MS', 'Chalkboard SE', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'sans-serif';
}

.Android .texts {
    font-family: 'Kalam', cursive;
}

.text1 {
    position: absolute;
    left: -3%;
    margin-bottom: var(--btn3_txt1_marginB);
    font-size: var(--btn3_txt1_fontsize);
}

.text2 {
    position: absolute;
    left: 3.5%;
    bottom: -4%;
    font-size: var(--btn3_txt2_fontsize);
}

.voice_title {
    width: 90%;
    margin: 0 auto;
    font-size: var(--btn3_voicetitle_fontsize);
    font-weight: bold;
    text-align: center;
}

.fukidashi1,
.fukidashi2,
.fukidashi3 {
    position: relative;
    width: 40vw;
    margin: 3vw auto;
    border: solid 0.3vw #da9694;
    border-radius: 1.5vw;
    box-sizing: border-box;
    box-shadow: 0 0.8vw 0.5vw #da9694;
    text-align: left;
}

.fukidashi1:before {
    content: "";
    position: absolute;
    top: var(--fukidashi_before);
    left: 28%;
    margin-left: -4.5322vw;
    border: 3.7338vw solid transparent;
    border-bottom: 4.1vw solid white;
    z-index: 2;
}

.fukidashi1:after {
    content: "";
    position: absolute;
    top: var(--fukidashi_after);
    left: 28%;
    margin-left: -4.5322vw;
    border: 3.7338vw solid transparent;
    border-bottom: 4.1vw solid #da9694;
    z-index: 1;
}

.fukidashi2:before {
    content: "";
    position: absolute;
    top: var(--fukidashi_before);
    left: 60%;
    margin-left: -4.5322vw;
    border: 3.7338vw solid transparent;
    border-bottom: 4.1vw solid white;
    z-index: 2;
}

.fukidashi2:after {
    content: "";
    position: absolute;
    top: var(--fukidashi_after);
    left: 60%;
    margin-left: -4.5322vw;
    border: 3.7338vw solid transparent;
    border-bottom: 4.1vw solid #da9694;
    z-index: 1;
}
.fukidashi3:before {
    content: "";
    position: absolute;
    top: var(--fukidashi_before);
    left: 80%;
    margin-left: -4.5322vw;
    border: 3.7338vw solid transparent;
    border-bottom: 4.1vw solid white;
    z-index: 2;
}
.fukidashi3:after {
    content: "";
    position: absolute;
    top: var(--fukidashi_after);
    left: 80%;
    margin-left: -4.5322vw;
    border: 3.7338vw solid transparent;
    border-bottom: 4.1vw solid #da9694;
    z-index: 1;
}

.voice_text {
    padding: 0vw 1vw;
}


.recruit_grid2 {
    display: grid;
    grid-template-rows: repeat(2, auto);
    gap: 1vw;
    margin: 0 auto;
}

/*3つ目ここまで*/
:root {
        --recruitBtn_height: 23.894vw;
        --detail_fontsize: 2.7613vw;
        --detail_bottom: -3.0503vw;
        --tr_btn_height: 6.9914vw;
        --tr_btn_margin_TB: 7.7682vw;
        --tr_btn_margin_LR: 1.5536vw;
        --tr_btn_fontsize: 4.6609vw;

        --guide_table: 67.783vw;
        --marks: 16.268vw;
    }


/*共通ここから*/
.recruit_btn_check {
    display: none;
}

.recruit_btn {
    display: block;
    position: relative;
    height: var(--recruitBtn_height);
}

.detail1,
.detail2,
.detail3 {
    position: absolute;
    width: 100%;
    bottom: var(--detail_bottom);
    font-size: var(--detail_fontsize);
    font-weight: bold;
    text-align: center;
}

.close1,
.close2,
.close3{
    font-size: 1.3089vw; 
}
.close1 {
    color: #376092;
}
.close2 {
    color: #10253f;
}
.close3 {
    color: #da9694;
}

.recruit_content {
    padding-top: 3.999vw;
}

.content_close {
    display: block;
    text-align: center;
    margin-top: 2.666vw;
}

/*共通ここまで*/

.recruit_btn_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.transition_btn {
    display: block;
    position: relative;
    height: var(--tr_btn_height);
    margin: var(--tr_btn_margin_TB) var(--tr_btn_margin_LR);
    font-size: var(--tr_btn_fontsize);
    text-align: center;
    text-decoration: none;
    border: 0.2667vw solid #376092;
    border-radius: 2vw;
    box-shadow: 0 0 2vw #bbb;
    color: #376092;
}

.transition_text1 {
    display: inline-block;
    text-align-last: justify;
}

.transition_text2 {
    display: inline-block;
    text-align-last: justify;
}

.bottom_to_top {
    position: absolute;
    bottom: 0;
}

/* 新卒採用 */
.title_color1 {
    width: 42.3%;
    padding: 1.333vw;
    margin: 4vw auto;
    font-weight: bold;
    text-align: center;
    color: white;
    background-color: #3B7FE8;
}
.title_color2 {
    width: 42.3%;
    padding: 1.333vw;
    margin: 4vw auto 1.5vw auto;
    font-weight: bold;
    text-align: center;
    color: white;
    background-color: #376092;
}

table {
    border-collapse: collapse;
}

th {
    text-align: center;
    font-weight: unset;
    white-space: nowrap;
    background-color: #c5d9f1;
}

.entry_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5%;
    margin: 0% 10%;
}

.marks {
    width: var(--marks);
    margin: auto;
}

.contact_grid {
    display: grid;
    grid-template-rows: repeat(3, auto);
    margin-bottom: 1vw;
}

.guide_table {
    width: var(--guide_table);
    margin: 0 auto;
    font-size: 1.6vw;
}
.row16,.row84 {
    padding: 0.26178vw 0.19633vw;
    border-top: 0.065445vw solid #bbb;
    border-bottom: 0.065445vw solid #bbb;
}
.row16 {
    width: 16%;
    min-width: 4.2540vw;
}
.row84 {
    width: 84%;
}

.entry {
    width: 70%;
    padding: 5px;
    margin: 0 15%;
}

.info_table {
    width: var(--guide_table);
    margin: 0% auto;
    border-spacing: 0px;
    border-collapse: collapse;
    font-size: 1.6vw;
}

.info_table>tbody>tr>th,
.info_table>tbody>tr>td {
    padding: 4px;
    border: 0.065445vw solid #ccc;
}

#mynavi{
    width: 16vw;
}