@import url("https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@900&display=swap");
:root {
  --c-p-brown: #5a4f4a;
  --c-p-light-brown: #c9944a;
  --c-p-yellow: #f6ab00;
  --c-p-light-yellow: #fbf6c6;
  --c-p-orange: #f18d00;
  --ff-zen-old-mincho: "Zen Old Mincho", serif;
}

#fixed_menu {
  width: 220px;
}

.fixed_menu_list > li {
  background-repeat: repeat;
  background-position: top left;
  background-size: clamp(0px, 25vw, 350px) auto;
}

.fixed_menu_list > li.item_request {
  background-image: url("../img/child/child_001_bg_btn_01.jpg");
}

.fixed_menu_list > li.item_opencampus {
  background-image: url("../img/child/child_002_bg_btn_02.jpg");
}

.fixed_menu_list > li.item_webentry {
  background-image: url("../img/child/child_003_bg_btn_03.jpg");
}

.fixed_menu_list > li.item_support {
  background-image: url("../img/child/child_004_bg_btn_04.jpg");
}

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

@media screen and (min-width: 768px) and (max-width: 1500px) {
  #fixed_menu {
    width: clamp(0px, 14.67vw, 220px);
  }
}

@media screen and (max-width: 767px) {
  .fixed_menu_list {
    gap: 1px;
    background-color: var(--c-white);
  }

  .fixed_menu_list > li {
    border: 0;
  }
}

.point_ttl {
  font-family: var(--ff-zen-maru);
  color: var(--c-p-light-brown);
}

.point_ttl_en {
  font-family: var(--ff-zen-old-mincho);
  font-weight: var(--fw-bl);
  color: var(--c-p-yellow);
}

.point_txt, .point_dot {
  color: var(--c-p-brown);
}

.point_txt {
  font-family: var(--ff-zen-maru);
}

.point_five_dots span {
  background-color: var(--c-p-brown);
}

.btn_more {
  font-family: var(--ff-zen-maru);
  color: var(--c-p-brown);
  background-color: transparent;
  background-image: url("../img/child/child_001_bg_btn_01.jpg");
}

.btn_more:hover {
  color: var(--c-white);
  background-color: var(--c-p-orange);
  background-image: none;
}

.btn_more::before {
  background-color: var(--c-p-yellow);
  border: 1px solid var(--c-white);
}

.btn_more:hover::before {
  background-color: #fff;
}

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

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

.voice_ttl_ja {
  font-family: var(--ff-zen-maru);
  color: var(--c-p-light-brown);
}

.voice_list > li {
  font-family: var(--ff-zen-maru);
  color: var(--c-p-brown);
  background-image: url("../img/child/child_042_voice_bg_cont.svg");
}

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

#footer {
  background-color: var(--c-p-light-yellow);
}

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

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

.mv_bg {
  width: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
}

.mv_bg img {
  width: 100%;
}

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

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

.mv_inner {
  width: clamp(0px, 91.43vw, 1280px);
  max-width: 100%;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding-top: clamp(0px, 18.57vw, 260px);
}

.mv_cont {
  width: clamp(0px, 49vw, 686px);
  max-width: 100%;
}

.mv_txt {
  margin-bottom: clamp(0px, 4.64vw, 65px);
}

.mv_txt_s {
  font-family: var(--ff-zen-maru);
  font-size: clamp(0px, 1.86vw, 26px);
  font-weight: var(--fw-b);
  color: var(--c-white);
  line-height: 2.2;
  text-align: center;
}

@media screen and (min-width: 768px) and (max-width: 1800px) {
  .mv_bg {
    width: 106vw;
    max-width: none;
    display: inline-block;
  }

  .mv_img {
    width: 107vw;
  }

  .mv_inner {
    width: 71vw;
    padding-top: 14.4vw;
  }

  .mv_cont {
    width: 38vw;
  }

  .mv_txt {
    margin-bottom: 2.2vw;
  }

  .mv_txt_s {
    font-size: 1.45vw;
  }
}
@media screen and (max-width: 767px) {
  #mv::before {
    background-image: url("../img/child/child_020_mv_bg_sp.png");
  }

  #mv::after {
    display: none;
  }

  .mv_inner {
    width: 90%;
    padding-top: 22vw;
  }

  .mv_img {
    width: 100%;
  }

  .mv_cont {
    width: 100%;
  }

  .mv_txt {
    margin-bottom: 5vw;
  }

  .mv_txt_s {
    font-size: 4.5vw;
    line-height: 1.7;
  }
}
/* ===============================================
    lead
=============================================== */
#lead {
  position: relative;
  background-image: url("../img/child/child_008_lead_bg.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}

#lead::before {
  content: "";
  width: clamp(0px, 91.43vw, 1280px);
  height: auto;
  aspect-ratio: 1230/135;
  background-image: url("../img/child/child_005_lead_bg_ill.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: absolute;
  bottom: calc(100% + clamp(0px, 4.64vw, 65px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

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

.lead_bg_top {
  width: 100%;
  max-width: none;
  position: absolute;
  left: 50%;
  bottom: calc(100% - 2px);
  transform: translateX(-50%);
}

.lead_bg_top img {
  width: 100%;
}

.lead_ttl {
  width: clamp(0px, 53.21vw, 745px);
  margin: 0 auto clamp(0px, 8.57vw, 120px);
}

.lead_ill_center {
  width: clamp(0px, 5.14vw, 72px);
  margin: 0 auto clamp(0px, 6.43vw, 90px);
}

.lead_cont {
  font-family: var(--ff-zen-maru);
}

.lead_txt_l {
  font-size: clamp(0px, 2.86vw, 40px);
  font-weight: var(--fw-b);
  color: #c9944a;
  line-height: 1.5;
  text-align: center;
  margin-bottom: clamp(0px, 2.86vw, 40px);
}

.lead_txt {
  font-size: clamp(0px, 1.57vw, 22px);
  font-weight: var(--fw-m);
  letter-spacing: 0.15em;
  color: var(--c-p-brown);
  line-height: 2.7;
  text-align: center;
}

.lead_ill_01 {
  width: clamp(0px, 22.86vw, 320px);
  position: absolute;
  top: clamp(-135px, -9.64vw, 0px);
  left: clamp(0px, 10vw, 140px);
}

.lead_ill_02 {
  width: clamp(0px, 17.86vw, 250px);
  position: absolute;
  top: clamp(-175px, -12.5vw, 0px);
  right: clamp(-7px, -0.5vw, 0px);
}

.lead_ill_03 {
  width: clamp(0px, 15.71vw, 220px);
  position: absolute;
  top: clamp(0px, 9.29vw, 130px);
  left: clamp(0px, 10vw, 140px);
}

.lead_ill_04 {
  width: clamp(0px, 18.93vw, 265px);
  position: absolute;
  top: 0;
  right: clamp(0px, 6.43vw, 90px);
}

.lead_ill_05 {
  width: clamp(0px, 46.07vw, 645px);
  position: absolute;
  bottom: 0;
  right: clamp(0px, 5.71vw, 80px);
}

@media screen and (min-width: 768px) and (max-width: 1800px) {
  #lead::before {
    width: 71vw;
    bottom: calc(100% + 3.6vw);
  }

  .lead_bg_top {
    width: 107vw;
  }

  .lead_ill_01 {
    width: 17.8vw;
    left: 4vw;
  }

  .lead_ill_02 {
    width: 13.9vw;
    top: -6vw;
  }

  .lead_ill_03 {
    width: 12.2vw;
    left: 4vw;
  }

  .lead_ill_04 {
    width: 14.7vw;
    top: 5.27vw;
    right: 3vw;
  }
}
@media screen and (max-width: 767px) {
  #lead {
    background: none;
  }

  #lead::before {
    display: none;
  }

  .lead_inner {
    width: 95%;
    padding-top: 17vw;
    padding-bottom: 19vw;
  }

  .lead_ill_01 {
    width: 100%;
    position: absolute;
    top: -32vw;
    left: 0;
  }

  .lead_bg_top {
    width: 100%;
  }

  .lead_ttl {
    width: 67vw;
    margin-bottom: 11vw;
  }

  .lead_ill_center {
    width: 7.2vw;
    margin-bottom: 9vw;
  }

  .lead_txt_l {
    font-size: 5.5vw;
  }

  .lead_cont {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
  }

  .lead_txt {
    font-size: 3.73vw;
    line-height: 1.7;
    letter-spacing: 0;
    text-align: left;
  }
}
/* ===============================================
    point
=============================================== */
#point {
  background-color: var(--c-p-light-yellow);
  background-image: url("../img/child/child_029_point_bg.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  padding: clamp(0px, 15.71vw, 220px) 0 clamp(0px, 28.57vw, 400px);
}

#point .container {
  position: relative;
}

.point_ill_center {
  width: clamp(0px, 4.64vw, 65px);
  margin: 0 auto clamp(0px, 7.14vw, 100px);
}

.career_circle {
  font-family: var(--ff-zen-maru);
  width: clamp(0px, 22.14vw, 310px);
  aspect-ratio: 1/1;
  background-color: #fff1a2;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: clamp(0px, 2.5vw, 35px) auto 0;
}

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

.career_circle .ttl {
  font-size: clamp(0px, 1.43vw, 20px);
  font-weight: var(--fw-b);
  color: var(--c-p-brown);
  letter-spacing: 0.05em;
  line-height: 1.3;
  text-align: center;
}

.career_circle .num {
  font-size: clamp(0px, 5.71vw, 80px);
  font-weight: var(--fw-b);
  color: var(--c-p-orange);
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
}

.career_circle .num .fs_s {
  font-size: 0.5em;
  color: var(--c-p-brown);
}

.career_circle .txt {
  font-size: clamp(0px, 1.14vw, 16px);
  color: var(--c-p-brown);
  letter-spacing: 0.05em;
  text-align: center;
  margin-top: 1em;
}

.point_ill_01 {
  width: clamp(0px, 17.5vw, 245px);
  position: absolute;
  right: calc(100% + clamp(-40px, -2.86vw, 0px));
  bottom: clamp(-350px, -25vw, 0px);
}

@media screen and (min-width: 768px) and (max-width: 1800px) {
  .point_ill_01 {
    right: auto;
    left: 2.47vw;
  }
}
@media screen and (min-width: 768px) and (max-width: 1500px) {
  #point {
    background-size: 112vw auto;
  }
}
@media screen and (max-width: 767px) {
  #point {
    background: none;
    background-color: var(--c-p-light-yellow);
    padding: 20vw 0 25vw;
  }

  .point_ill_center {
    width: 8.4vw;
    margin-bottom: 14vw;
  }

  .career_circle {
    width: 70vw;
    margin-top: 5vw;
  }

  .career_circle .ttl {
    font-size: 4.5vw;
  }

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

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

  .point_ill_01 {
    width: 28vw;
    right: auto;
    left: 5vw;
  }
}
/* ===============================================
    voice
=============================================== */
#voice {
  padding-top: clamp(0px, 11.43vw, 160px);
  position: relative;
}

#voice::before {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("../img/child/child_045_voice_bg.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  position: absolute;
  top: clamp(-7px, -0.5vw, 0px);
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

#voice .container {
  position: relative;
  padding-bottom: clamp(0px, 28.57vw, 400px);
}

.voice_bg_btm {
  width: 100%;
  max-width: none;
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
}

.voice_bg_btm img {
  width: 100%;
}

.voice_ill {
  width: clamp(0px, 7.57vw, 106px);
  position: absolute;
  left: calc(100% + clamp(0px, 6.43vw, 90px));
  bottom: 0;
  z-index: 2;
}

.voice_ttl_en {
  width: clamp(0px, 20vw, 280px);
}

@media screen and (min-width: 768px) and (max-width: 1800px) {
  .voice_ill {
    left: auto;
    right: 2.47vw;
  }
}
@media screen and (min-width: 768px) and (max-width: 1500px) {
  #voice::before {
    background-size: 112vw auto;
  }
}
@media screen and (max-width: 767px) {
  #voice {
    padding-top: 19.5vw;
  }

  #voice::before {
    width: 100%;
    background-image: url("../img/child/child_043_voice_bg_sp.png");
    top: 0;
  }

  #voice .container {
    padding-bottom: 27vw;
  }

  .voice_ttl_en {
    width: 29.5vw;
  }

  .voice_ill {
    display: none;
  }

  .voice_bg_btm {
    width: 101vw;
  }
}