/* Preliminarise */
@charset "utf-8";

/* 1360*768 layout */

/* Variable */
:root {
    --body_side_margin: 5.882vw;
    --main_title_top: 25.735vw;
    --main_title_middle: 22.059vw;
    --main_title_bottom: 14.706vw;
    --section_title_size: 11.029vw;
    --section_title_size_j: 2.206vw;
    --section_title_margin: 0 auto 14.706vw;
    --text_main_size: 5.882vw;
    --text_sub_size: 2.206vw;
    --middle_text_size: 4.779vw;
    --base_white:#eaeef1;
    --text_white:#e2eeff;
    --base_blue: #0f487a;
    --blue_black: #071a2b;
    --base_text: #272829;
    --main_wrap_color: linear-gradient(180deg, var(--base_white) 4.7%, var(--blue_black) 4.9%);
    --contract_background: #d4d8de;
    --benefit_background: #e5e8ee;
    --read_moro_width: 6.985vw;
    --read_moro_width_j: 6.25vw;
    --read_moro_border_width: 11.029vw;
    --read_moro_border_height: 2px;
    --read_moro_border_position:  calc(.5 * calc(var(--read_moro_width) - var(--read_moro_border_width)));
    --link_text_color: #50adff;
    --link_text_hover_color: #fab547;
    --link_text_size: 1.471vw;
    --link_text_size_j: 1.25vw;
    --read_moro_line-height: 1.618vw;
    --read_moro_line-height_j: 1.397vw;
    --accent_color: #ED9405;
    --glass_color: 227, 244, 255, 0.2;
    --offset: 20vw;
    --move_initial: calc(-25% + var(--offset));
    --move_final: calc(-50% + var(--offset));
}

html {
    width: 100%;
    overscroll-behavior: none;
    -webkit-overscroll-behavior: none;
}

body {
    font-family: "kaisotai", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 600;
    font-style: normal;
    background-color: var(--base_white);
    width: 100%;
}

/* Readmore link layout */
.readmore_link {
    opacity: 0;
    position: relative;
    display: block;
    width: var(--read_moro_width);
    color: var(--link_text_color);
    text-align: center;
    text-align: -webkit-center;
    transition: all .4s .05s ease-out;
}

.readmore_link .readmore_text:first-child {
    font-size: var(--link_text_size);
    line-height: var(--read_moro_line-height);
    width: var(--read_moro_width);
}

.readmore_link .readmore_text:last-child {
    font-size: var(--link_text_size_j);
    width: var(--read_moro_width_j);
    line-height: var(--read_moro_line-height_j);
    font-size: var(--link_text_size_j);
    margin-left: var(--read_moro_margin_j);
}

.readmore_text::after {
    content: "";
    width: var(--read_moro_border_width);
    height: var(--read_moro_border_height);
    position: absolute;
    top: var(--read_moro_line-height);
    left: var(--read_moro_border_position);
    background-color: var(--link_text_color);
    transition: all .4s .0s ease-out;
}

/* Navigation menu */
/* Navigation button */
button {
    width: clamp(50px, 4.66vw, 60px);
    height: clamp(50px, 4.66vw, 60px);
    margin: 0.735vw 0 0 1.103vw;
    z-index: 500;
    position: relative;
    cursor: pointer;
    position: fixed;
    transform: translateZ(0);
    top: 0;
    left: 0;
    opacity: 0;
}

button .nav_btn_span {
    width: clamp(50px, 4.66vw, 100px);
    height: 1.3px;
    position: absolute;
    top: 45%;
    left: 50%;
    display: block;
    border-radius: 50px;
    background: #4469a8;
    transition: all .5s .2s ease-out;
}

button .nav_btn_span:nth-child(1) {
    transform: translate(-50%, 5px);
}

button .nav_btn_span:nth-child(2) {
    transform: translate(-50%, -5px);
}

/* Navigation link text */
.nav_wrap {
    width: 100vw;
    height: 100vh;
    opacity: 0.96;
    background: var(--base_blue);
    transform: translateX(-105%);
    transition: all 0.3s .5s ease-out;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 400;
    overflow: hidden;
}


/* Navigation link text */
.nav_menu {
    margin: 0 0 0 7.353vw;
    padding-top: 7.353vw;
}

.nav_link {
    display: inline-block;
    font-family: alternate-gothic-condensed-a, "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif, sans-serif;
    font-weight: 700;
    font-size: 6.618vw;
    line-height: 5.147vw;
    font-style: normal; 
    color: var(--base_blue);
    text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF,  0 -1px 0 #FFF, -1px 0 0 #FFF, 1px 0 0 #FFF;
}

/* 
Hero title
*/
.title_wrap {
    background-color: var(--base_white);
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    z-index: 200;
}


/* Hello kitakan */
.hero_title h1 {
    font-family: alternate-gothic-condensed-a, "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    position: relative;
    font-weight: normal;
    font-weight: 700;
    white-space: nowrap;
}

.hero_kitakan {
    position: absolute;
    top: 1.471vw;
    user-select: none;
    display: inline-block;
    font-size: var(--main_title_top);
    line-height: var(--main_title_top);
    height: calc(var(--main_title_top) * .87);
    transition: all .5s 0s ease-in-out;
}

.hero_school {
    user-select: none;
    position: absolute;
    top: 22.059vw;
    display: inline-block;
    font-size: var(--main_title_middle);
    line-height: var(--main_title_middle);
    height: calc(var(--main_title_middle) * .87);
    transition: all .5s 0s ease-in-out;
}

.hero_sapporo {
    user-select: none;
    position: absolute;
    top: 40.441vw;
    display: inline-block;
    font-size: var(--main_title_bottom);
    line-height: var(--main_title_bottom);
    height: calc(var(--main_title_bottom) * .87);
    transition: all .5s 0s ease-in-out;
}

/* KITAKANTO */
.hero_title .text_division_k_1 {
    left: 8.088vw;
}

.hero_title .text_division_i_2 {
    left: 19.118vw;
}

.hero_title .text_division_t_3 {
    left: 24.044vw;
}

.hero_title .text_division_a_4 {
    left: 31.544vw;
}

.hero_title .text_division_k_5 {
    left: 41.912vw;
}

.hero_title .text_division_a_6 {
    left: 53.676vw;
}

.hero_title .text_division_n_7 {
    left: 63.971vw;
}

.hero_title .text_division_t_8 {
    left: 75.735vw;
}

.hero_title .text_division_o_9 {
    left: 84.559vw;
}

/* SCHOOL */
.hero_title .text_division_s_10 {
    left: 24.412vw;
}

.hero_title .text_division_c_11 {
    left: 33.162vw;
}

.hero_title .text_division_h_12 {
    left: 42.059vw;
}

.hero_title .text_division_o_13 {
    left: 51.324vw;
}

.hero_title .text_division_o_14 {
    left: 60.441vw;
}

.hero_title .text_division_l_15 {
    left: 69.338vw;
}

/* SAPPORO */
.hero_title .text_division_s_1 {
    left: 28.75vw;
}

.hero_title .text_division_a_2 {
    left: 34.632vw;
}

.hero_title .text_division_p_3 {
    left: 40.515vw;
}

.hero_title .text_division_p_4 {
    left: 46.471vw;
}

.hero_title .text_division_o_5 {
    left: 52.574vw;
}

.hero_title .text_division_r_6 {
    left: 58.75vw;
}

.hero_title .text_division_o_7 {
    left: 64.853vw;
}

/* Main contents */
.main_wrap {
    width: 100vw;
    position: absolute;
    top: 100vh;
    z-index: 200;
    background: var(--blue_black);
}

/* HELLO KITAKAN */
#hello_kitakan {
    width: 100vw;
    height: 100vh;
    padding-top: 0.001vw;
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--base_white);
    mix-blend-mode: lighten;
    pointer-events: none;
}

.hello_kitakan_wrap {
    height: 100vh;
    width: 100vw;
    background-color: var(--base_white);
    padding: 11.765vw;
    overflow: hidden;
}

#hello_kitakan h2 {
    font-family: alternate-gothic-condensed-a, "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    width: 100%;
    font-weight: 700;
    display: inline-block;
    line-height: 3.676vw;
    text-align: center;
    white-space: nowrap;
}

#hello_kitakan h2 span {
    font-size: 25.853vw;
    line-height: 16.176vw;
}

/* HELLO */
.hello_kitakan_wrap .text_division_h_1 {
    letter-spacing: -1.471vw;
}

.hello_kitakan_wrap .text_division_e_2 {
    letter-spacing: -1.176vw;
}

.hello_kitakan_wrap .text_division_l_3 {
    letter-spacing: -0.735vw;
}

.hello_kitakan_wrap .text_division_l_4 {
    letter-spacing: -1.103vw;
}

.hello_kitakan_wrap .text_division_o_5 {
    letter-spacing: 1.985vw;
}

/* KITAKAN */
.hello_kitakan_wrap .text_division_k_6 {
    letter-spacing: -0.588vw;
}

.hello_kitakan_wrap .text_division_i_7 {
    letter-spacing: -0.735vw;
}

.hello_kitakan_wrap .text_division_t_8 {
    letter-spacing: -1.912vw;
}

.hello_kitakan_wrap .text_division_a_9 {
    letter-spacing: -0.735vw;
}

.hello_kitakan_wrap .text_division_k_10 {
    letter-spacing: 0.368vw;
}

.hello_kitakan_wrap .text_division_a_11 {
    letter-spacing: -0.662vw;
}

.hello_kitakan_wrap .text_division_n_12 {
    letter-spacing: -1.176vw;
}

/* Section about */
#about {
    padding-top: 100vh;
}

.title_about {
    text-align: center;
    margin: var(--section_title_margin);
}

.title_about h1 {
    font-family: alternate-gothic-condensed-a, "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif, sans-serif;
    font-weight: 600;
    font-style: normal; 
    font-size: var(--section_title_size);
    line-height: var(--section_title_size);
    color: var(--text_white);
}

.title_about h2 {
    font-size: var(--section_title_size_j);
    line-height: var(--section_title_size_j);
    color: var(--base_blue);
    opacity: 0;
    letter-spacing: -0.04em;
}

.text_about {
    position: relative;
    overflow: hidden;
}

.text_about .text_main {
    font-size: var(--text_main_size);
    line-height: var(--text_main_size);
    letter-spacing: -.03em;
    color: var(--base_text);
    margin: 0 0 2.206vw var(--body_side_margin);
}

.text_about .text_main span {
    margin: 0 -0.588vw 0;
    letter-spacing: -0.3vw;
}

.text_about .text_main .sp_br + span {
    margin-right: -1.471vw;
}

.sp_br {
    display: none;
}

.lesson_desk {
    width: auto;
    height: 42.647vw;
}

.text_about .text_sub {
    font-size: var(--text_sub_size);
    line-height: 2.574vw;
    letter-spacing: -0.1vw;
    color: var(--text_white);
    margin: 5vw var(--body_side_margin) 2.206vw 50vw;
}

.text_about .text_sub_10 {
    margin-left: -0.2em;
}

.text_about .text_sub .orange_text {
    margin: 0 -0.515vw 0 -0.294vw;
}

/* section job */
#job {
    width: 100vw;
    height: 135.662vw;
}

.title_job {
    text-align: center;
    margin: var(--section_title_margin);
    padding-top: 25.735vw;
}

.title_job h1{
    font-family: alternate-gothic-condensed-a, "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: var(--section_title_size);
    line-height: var(--section_title_size);
    color: var(--base_text);
}

.title_job h2{
    font-size: var(--section_title_size_j);
    line-height: var(--section_title_size_j);
    color: var(--base_text);
    opacity: 0.8;
    letter-spacing: -0.04em;
}

.flex_job {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.flex_job .text_job {
    margin-left: var(--body_side_margin);
}

.flex_job .text_main {
    font-size: var(--text_main_size);
    line-height: var(--text_main_size);
    letter-spacing: -.065em;
    color: var(--base_text);
    margin: 0 10.882vw 1em 0;
}

.flex_job .text_main span {
    letter-spacing: -0.04em;
}

.flex_job .text_main .orange_text {
    display: inline-block;
    margin: 0 -1.103vw 0;    
}

.flex_job .text_main span:first-child {
    letter-spacing: -0.12em;
    margin-left: -0.441vw;
}

.text_job .text_sub {
    font-size: var(--text_sub_size);
    margin-bottom: -2.206vw;
    letter-spacing: -.06em;
    color: var(--base_text);
}

.text_job .text_sub span {
    line-height: .5em;
    margin: 0 -0.074vw 0;
}

.job_link {
    margin: 2.941vw 0 0 28.676vw;
}

.w_pc {
    width: calc(36.765vw * 1.13);
    height: calc(47.426vw * 1.13);
    margin-right: var(--body_side_margin);
}

/* Section course */

#course {
    position: relative;
    overflow: hidden;
    padding-bottom: 45vw;
}

#course::before {
    content: "";
    width: 90vw;
    height: 0.4px;
    position: absolute;
    top: 132.353vw;
    left: 5.147vw;
    z-index: 0;
    background: var(--base_white);
}

#course::after {
    content: "";
    width: 100vw;
    height: 212.132vw;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -500;
    background-color: var(--base_blue);
}

.title_course {
    text-align: center;
    margin: var(--section_title_margin);
    padding-top: 25.735vw;
}

#course .title_course h1{
    font-family: alternate-gothic-condensed-a, "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: var(--section_title_size);
    line-height: var(--section_title_size);
    color: var(--text_white);
}

#course .title_course h2{
    font-size: var(--section_title_size_j);
    line-height: var(--section_title_size_j);
    color: var(--text_white);
    opacity: 0.8;
    letter-spacing: -0.04em;
}

#course .text_main {
    font-size: var(--text_main_size);
    line-height: var(--text_main_size);
    color: var(--text_white);
    letter-spacing: -.07em;
    margin: 0 var(--body_side_margin) 1em auto;
    display: table;
    text-align: right;
}

#course .text_main span {
    letter-spacing: -0.04em;
}

#course .text_main span:first-child {
    letter-spacing: -0.06em;
}

#course .flex_course {
    display: flex;
}

.lesson_time{
    width: 51.471vw;
    height: 36.035vw;
}

.course_link {
    margin: 1.471vw 0 0 33.088vw;
}

#course .text_sub {
    font-size: var(--text_sub_size);
    line-height: var(--text_sub_size);
    color: var(--text_white);
    margin: 0 var(--body_side_margin) 0 4.412vw;
}

#course .text_sub span {
    display: inline-block;
    letter-spacing: .05px;
    margin-bottom: .5em;
    margin: 0 -0.147vw 0;
}

/* Secondary */
.secondary {
    margin-top: -2.206vw;
}

.secondary .corridor {
    width: 36.765vw;
    height: 52.574vw;
    display: table;
    margin: 0 var(--body_side_margin) 0 auto;
}

.secondary .secondary_blue h2 {
    font-size: var(--middle_text_size);
    line-height: var(--middle_text_size);
    letter-spacing: -.13em;
    margin: 1em 0 0 var(--body_side_margin);
}

.secondary .secondary_white h2 {
    font-size: var(--middle_text_size);
    line-height: var(--middle_text_size);
    letter-spacing: -.04em;
    margin: 0 var(--body_side_margin) 1em auto;
    display: table;
}

.secondary .book {
    width: 36.765vw;
    height: 52.574vw;
    margin-left: var(--body_side_margin);
}

/* Section apply */
#apply .title_apply {
    text-align: center;
    margin: var(--section_title_margin);
    padding-top: 25.735vw;
}

#apply .title_apply h1 {
    font-family: alternate-gothic-condensed-a, "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: var(--section_title_size);
    line-height: var(--section_title_size);
    color: var(--base_text);
}

#apply .title_apply h2 {
    font-size: var(--section_title_size_j);
    line-height: var(--section_title_size_j);
    color: var(--base_text);
    opacity: .9;
}

.text_apply .text_main {
    font-size: var(--text_main_size);
    line-height: var(--text_main_size);
    color: var(--base_text);
    margin: 0 0 1em var(--body_side_margin);
}

.text_apply .text_main span {
    letter-spacing: -0.478vw;
    margin: 0 -0.662vw 0;
}

.text_apply ul {
    height: 25.956vw;
} 

.text_apply li {
    display: inline-block;
    letter-spacing: 0.114vw;
    margin: 0 0 1.5em var(--body_side_margin);
}

.text_apply li span {
    display: inline-block;
    font-size: var(--text_sub_size);
    line-height: var(--text_sub_size);
    margin: 0 -0.037vw 0;
}

/* Tertiary */
.tertiary {
    font-size: 4.779vw;
    letter-spacing: -.15em;
    color: var(--base_text);
    overflow: hidden;
}

.study_wrap {
    width: 100vw;
    height: 35.294vw;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.tertiary .study {
    width: 73.529vw;
    height: 20.588vw;
}

.study_wrap + h2 {
    line-height: 1em;
    margin: var(--middle_text_size) 0 0 var(--body_side_margin);
}

/* Section acceptance */
#acceptance .title_acceptance {
    text-align: center;
    margin: var(--section_title_margin);
    padding-top: 25.735vw;
    color: var(--base_text);
}

#acceptance .title_acceptance h1 {
    font-family: alternate-gothic-condensed-a, "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: var(--section_title_size);
    line-height: var(--section_title_size);
    transition: all .4s 0s ease-out;
}

#acceptance .title_acceptance h2 {
    font-size: var(--section_title_size_j);
    line-height: var(--section_title_size_j);
    opacity: .9;
    transition: all .4s 0s ease-out;
}

.text_acceptance .text_main {
    font-size: var(--text_main_size);
    text-align: center;
    letter-spacing: -0.699vw;
    color: var(--base_text);
    transition: all .4s 0s ease-out;
}

.acceptance_corse {
    height: 45.559vw;
    display: flex;
    align-items: flex-end;
    justify-content: space-evenly;
}

.group_design {
    position: relative;
    z-index: 10;
}

.group_design .web_design {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 300;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    color: var(--link_text_color)
}

.group_design .name {
    font-size: 2.941vw;    
    white-space: nowrap;
}

.group_design .course {
    font-size: 2.206vw;
}

.photo_design {
    width: 25.588vw;
    height: 25.588vw;
    filter: brightness(50%) grayscale(30%);
}

.group_base {
    position: relative;
    z-index: 10;
}

.group_base .pc_base  {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 300;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    color: var(--link_text_color)
}

.group_base .name  {
    font-size: 2.941vw;    
    white-space: nowrap;
}

.group_base .course {
    font-size: 2.206vw;
}

.photo_base {
    width: 25.588vw;
    height: 25.588vw;
    filter: brightness(50%) grayscale(30%);
}

.group_programming {
    position: relative;
    z-index: 10;

}

.group_programming .it_programming  {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 300;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    color: var(--link_text_color)
}

.group_programming .name  {
    font-size: 2.941vw;    
    white-space: nowrap;
}

.group_programming .course {
    font-size: 2.206vw;
}

.photo_programming {
    width: 25.588vw;
    height: 25.588vw;
    filter: brightness(50%) grayscale(30%);
}

/* section address */
#address {
    position: relative;
    height: 68.75vw;
}

.address_background {
    width: 100vw;
    height: 111.765vw;
    position: absolute;
    top: -17.353vw;
    left: 0;
    z-index: -500;
    background-color: var(--base_blue);
}

#address .title_address {
    text-align: center;
    margin: var(--section_title_margin);
    padding-top: 25.735vw;
}

#address .title_address h1{
    font-family: alternate-gothic-condensed-a, "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: var(--section_title_size);
    line-height: var(--section_title_size);
    color: var(--text_white);
}

#address .title_address h2{
    font-size: var(--section_title_size_j);
    line-height: var(--section_title_size_j);
    color: var(--text_white);
    opacity: .8;
}

.kitakan_address {
    display: flex;
    justify-content: space-between;
}

.map_info {
    margin-left: var(--body_side_margin);
}

iframe{
    display: inline-block;
    height: 36.765vw;
    width: 36.765vw;
}

.content_address {
    margin-right: var(--body_side_margin);
}

.content_address address {
    font-size: 2.941vw;
    letter-spacing: .5px;
    margin-bottom: 1.471vw;
    color: var(--text_white);
}

.content_address address span {
    margin-right: -0.037vw;
}

.address_link {
    margin:  0.368vw 0 0 36.765vw;
}

.open_time {
    margin-left: 0.735vw;
    transform: translateY(-60px);
}

.open_time span{
    display: inline-block;
    font-size: calc(0.7 * var(--text_sub_size_tablet));
    letter-spacing: .5px;
    margin: 1.471vw 0.735vw 0 -0.147vw;
    color: var(--text_white);
}

.postal_code {
    margin-left: 0.221vw;
}

.do_shi_ku {
    margin-left: 0.368vw;
}

.jo_chome {
    margin-right: -0.037vw;
}

.building {
    margin-left: 0.735vw;
}

/* Contract & Benefit */
.co_and_be {
    display: flex;
    margin-top: 25.735vw;
}

/* Section contract */
#contract {
    width: 50vw;
    height: 50vw;
    background-color: var(--contract_background);
}

#contract .title_contract {
    text-align: center;
    margin: 6.618vw 0 4.412vw;
}

#contract .title_contract h1 {
    font-family: alternate-gothic-condensed-a, "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: var(--section_title_size);
    line-height: var(--section_title_size);
    letter-spacing: -0.191vw;
    color: var(--base_text);
}

#contract .title_contract h2 {
    font-size: var(--section_title_size_j);
    line-height: var(--section_title_size_j);
    letter-spacing: 0.147vw;
    color: var(--base_text);
    opacity: .8;
}

.text_contract {
    letter-spacing: 0.088vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.text_contract .text {
    font-size: 2.941vw;
    line-height: 2.941vw;
    margin-bottom: 1.471vw;
    color: var(--base_text);
}

.text_contract > .text span {
    display: inline-block;
    margin: 0 -0.735vw .25em 0;
}

.text_contract .text .orange_text {
    font-size: 2.941vw;
    line-height: 2.941vw;
}

.phone_nanbar {
    font-size: 5.147vw;
    line-height: 5.147vw;
    color: var(--base_text);
}

/* Benefit */
#benefit {
    width: 50vw;
    height: 50vw;
    background-color: var(--benefit_background);
}

#benefit .title_benefit {
    text-align: center;
    margin: 6.618vw 0 4.412vw;
}

#benefit .title_benefit h1 {
    font-family: alternate-gothic-condensed-a, "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: var(--section_title_size);
    line-height: var(--section_title_size);
    letter-spacing: -0.147vw;
    color: var(--base_text);
}

#benefit .title_benefit h2 {
    font-size: var(--section_title_size_j);
    line-height: var(--section_title_size_j);
    color: var(--base_text);
    opacity: .8;
}

.text_benefit {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.text_benefit .text {
    font-size: 2.941vw;
    line-height: 2.941vw;
    color: var(--base_text);
}

.text_benefit .text span {
    display: inline-block;
    margin: 0 -0.735vw .25em 0;
}

.text_benefit .text .orange_text {
    font-size: 2.941vw;
    line-height: 2.941vw;
}

.benefit_link {
    margin:  0.368vw 0 0 33.088vw;
}

/* Footer */
.footer_wrap {
    height: 100vh;
    width: 100vw;
    text-align: center;
}

/* Hello work link */
.hello_work {
    margin: 0 0 5.882vw 1.471vw;
    padding-top: 14.706vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hello_work_link {
    position: relative;
    letter-spacing: -0.147vw;
    white-space: nowrap;
    display: block;
    width: 19.853vw;
    line-height: 2.941vw;
    font-size: var(--text_sub_size);
    color: var(--link_text_color);
    transition: all .4s .05s ease-out;
}

.hello_work_link::after {
    content: "";
    position: absolute;
    top: 2.941vw;
    left: -1.25vw;
    width: calc(2 * var(--read_moro_border_width));
    height: var(--read_moro_border_height);
    background-color: var(--link_text_color);
    transition: all .4s 0s ease-out;
}


/* Logo */
.image_logo .school_icon {
    width: 29.412vw;
    height: 7.353vw;
}

.image_link {
    position: relative;
    display: flex;
    justify-content: center;
    text-align: center;
    margin-bottom: 3.676vw;
}

.top {
    margin-right: 4.412vw;
}

.fa-circle-up {
    position: absolute;
    top: -2.941vw;
    left: 43.971vw;
    font-size: 3.676vw;
    color: var(--link_text_color);
}

.fa-facebook {
    position: absolute;
    top: -2.941vw;
    left: 51.912vw;
    font-size: 3.676vw;
    color: var(--link_text_color);
}

.image_logo {
    display: flex;
    justify-content: center;
    margin-bottom: 3.676vw;
}