@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
:root {
    --c-p-green: #75c564;
    --c-p-green2: #b9e6b0;
    --c-p-dark-green: #3aae36;
    --c-p-light-green: #a9dbc9;
    --c-p-blue: #00beca;
    --c-p-red: #e60012;
    --c-p-dark-blue: #003d6d;
    --c-p-light-blue: #e2f5f6;
    --ff-shippori-mincho: "Shippori Mincho", serif;
    --ff-oswald: "Oswald", sans-serif;
}

#fixed_menu {
    font-family: "Noto Sans JP", "Helvetica Neue", "Helvetica", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

.fixed_menu_list > li {
    border: 2px solid var(--c-white);
    border-right: 0;
}
@media screen and (max-width: 767px) {
    .fixed_menu_list {
        gap: 1px;
        background-color: var(--c-white);
    }
    .fixed_menu_list > li {
        border: 0;
    }
}

.fixed_menu_list > li.item_request {
  background-color: #51b7db;
}

.fixed_menu_list > li.item_opencampus {
  background-color: #ec74a2;
}

.fixed_menu_list > li.item_webentry {
  background-color: #e1ac00;
}

.fixed_menu_list > li.item_support {
  background-color: #947db8;
}

.fixed_menu_list > li > a {
  color: var(--c-white);
}

.point_ttl {
    font-family: var(--ff-shippori-mincho);
    color: var(--c-p-dark-blue);
    font-weight: var(--fw-b);
}

.kagi {
    display: inline-block;
    letter-spacing: -0.4em;
}

.point_ttl_en {
    font-family: var(--ff-oswald);
    font-weight: var(--fw-sb);
    color: var(--c-p-dark-green);
    margin-bottom: clamp(0px, 1.07vw, 15px);
}
@media screen and (max-width: 767px) {
    .point_ttl_en {
        margin-bottom: 3vw;
    }
}

.btn_more {
  font-family: var(--ff-shippori-mincho);
  color: var(--c-white);
  background-color: var(--c-p-green);
  transition: background-color 0.3s;
  border: 0;
}

.btn_more::before {
  background-color: var(--c-white);
}

.btn_more::after {
  border-top-color: var(--c-p-green);
  border-right-color: var(--c-p-green);
}

.btn_more:hover::after {
  border-top-color: var(--c-blue);
  border-right-color: var(--c-blue);
}

.voice_btn .btn_more {
  background-color: var(--c-p-green);
}

.voice_btn .btn_more::after {
  border-top-color: var(--c-p-green);
  border-right-color: var(--c-p-green);
}

.btn_more:hover,
.voice_btn .btn_more:hover {
  background-color: var(--c-blue);
}

.btn_more:hover::after,
.voice_btn .btn_more:hover::after {
  border-top-color: var(--c-blue);
  border-right-color: var(--c-blue);
}

.voice_ttl_ja {
  color: var(--c-p-dark-blue);
}

.voice_list > li {
  font-family: var(--ff-shippori-mincho);
  color: var(--c-brown);
  background-image: url("../img/education/education_020_voice_bg_cont.svg");
}

.voice_list > li.voice_list_ttl {
  color: var(--c-white);
  background-image: url("../img/education/education_021_voice_bg_ttl.svg");
}

#footer {
    background-color: var(--c-white);
    border-top: 2px solid var(--c-p-green2);
}

.footer_nav > li a {
    background-color: var(--c-p-dark-green);
}

.footer_btn {
    background-color: var(--c-p-green2);
}

.align_left {
    text-align: left;
}


/* ===============================================
    mv
=============================================== */
#mv {
  position: relative;
}

.mv_img {
  width: 100%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.mv_img img {
  width: 100%;
  max-width: none;
}

.mv_inner {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    padding-top: 12.5vw;
}

.mv_cont {
    width: 46vw;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mv_txt {
    width: 100%;
}

.mv_txt_s {
    width: 6.77vw;
    padding-top: 6.25vw;
}

@media screen and (min-width: 768px) and (max-width: 1800px) {
  .mv_img {
    width: 107vw;
  }

  .mv_inner {
    padding-top: 13.33vw;
  }

  .mv_cont {
    width: 49.44vw;
  }

  .mv_txt_s {
      width: 7.22vw;
      padding-top: 6.7vw;
  }
}
@media screen and (max-width: 767px) {
  .mv_inner {
    width: 100%;
    padding-top: 22.5vw;
  }

  .mv_img {
    width: 100%;
  }

  .mv_cont {
    width: 100%;
  }

  .mv_txt_s {
    width: 100%;
    padding-top: 30vw;
  }
}


/* ===============================================
    lead
=============================================== */
#lead {
  background-color: var(--c-p-green2);
  background-image: url("../img/education/education_001_lead_bg.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}

.lead_inner {
  padding-bottom: clamp(0px, 9.29vw, 130px);
  position: relative;
  z-index: 2;
}

.lead_ttl {
    width: clamp(0px, 86.43vw, 1210px);
    aspect-ratio: 1210 / 770;
    position: relative;
}

.lead_ttl .lead_img {
    position: absolute;
    top: clamp(-50px, -3.57vw, 0px);
}

@media screen and (max-width: 767px) {
    #lead {
        background-image: none;
    }

    .lead_inner {
        width: 100%;
        padding-bottom: 19vw;
    }

    .lead_ttl {
        width: 100%;
        aspect-ratio: initial;
    }

    .lead_ttl .lead_img {
        position: relative;
        top: 0;
    }
}


/* ===============================================
    point
=============================================== */
#point {
    background-color: var(--c-p-green2);
    padding: 0 0 clamp(0px, 14.29vw, 200px);
}

#point .container {
    position: relative;
}

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

.point_num {
    font-family: var(--ff-oswald);
    font-size: clamp(0px, 3.51vw, 52px);
    font-weight: var(--fw-b);
    color: var(--c-p-dark-blue);
    line-height: 1;
    position: relative;
    top: clamp(-25px, -1.79vw, 0px);
    margin-bottom: clamp(0px, 1.07vw, 15px);
}

.point_num .nb {
    font-size: 1.7em;
    font-style: italic;
    line-height: 1;
}

.point_fact {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(0px, 2.86vw, 40px);
}

.point_fact .point_txt {
    text-align: left;
}

.career_circle {
    width: clamp(0px, 26.79vw, 375px);
    aspect-ratio: 1 / 1;
    background-color: #d5f0d0;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.career_circle .inner {
    max-width: 75%;
}

.career_circle .ttl {
    font-size: clamp(0px, 1.29vw, 18px);
    font-weight: var(--fw-m);
    line-height: 1.4;
    text-align: center;
    margin-bottom: 0.1em;
}

.career_circle .num {
    font-size: clamp(0px, 8.14vw, 114px);
    font-family: var(--ff-shippori-mincho);
    font-weight: var(--fw-b);
    color: var(--c-p-red);
    line-height: 1;
    text-align: center;
}

.career_circle .num .fs_s {
    font-size: 0.5em;
    color: #5a4e49;
}

.career_circle .txt {
    font-size: clamp(0px, 1.14vw, 16px);
    text-align: center;
    margin-top: 0.5em;
}

@media screen and (max-width: 767px) {
    #point {
        padding: 0 0 20vw;
    }

    .point_num {
        font-size: 5.2vw;
        top: -3vw;
        margin-bottom: 5vw;
    }

    .point_fact {
        flex-direction: column;
        gap: 4vw;
    }

    .career_circle {
        width: 70vw;
    }

    .career_circle .ttl {
        font-size: 3.5vw;
        margin-bottom: 0.1em;
    }

    .career_circle .num {
        font-size: 18.2vw;
    }

    .career_circle .txt {
        font-size: 3.2vw;
    }
}


/* ===============================================
    voice
=============================================== */
#voice {
  position: relative;
}

#voice .container {
    position: relative;
    padding-top: clamp(0px, 13.21vw, 185px);
    padding-bottom: clamp(0px, 17.86vw, 250px);
}

.voice_ttl_en {
    font-size: clamp(0px, 3.51vw, 52px);
    font-family: var(--ff-oswald);
    color: var(--c-p-dark-blue);
    margin-bottom: clamp(0px, 1.43vw, 20px);
}

@media screen and (max-width: 767px) {
    #voice .container {
        padding-top: 18vw;
        padding-bottom: 15vw;
    }

    .voice_ttl_en {
        font-size: 7vw;
        margin-bottom: 2.5vw;
    }
}