@charset "UTF-8";
.nitalago-ruika {
  font-family: "nitalago-ruika", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.m-plus-rounded-1c-medium {
  font-family: "m-plus-rounded-1c", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.m-plus-rounded-1c-bold {
  font-family: "m-plus-rounded-1c", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.vdl-logomaru {
  font-family: vdl-logomaru, sans-serif;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "mgenplus-1cp-bold";
  src: url("../fonts/mgenplus-1cp-bold.woff2") format("woff2");
  font-display: swap;
}
.mgenplus-1cp-bold {
  font-family: "mgenplus-1cp-bold", sans-serif;
  font-weight: 700;
}

@font-face {
  font-family: "mgenplus-1p-medium";
  src: url("../fonts/mgenplus-1p-medium.woff2") format("woff2");
  font-display: swap;
}
.mgenplus-1p-medium {
  font-family: "mgenplus-1p-medium", sans-serif;
  font-weight: 400;
}

@font-face {
  font-family: "GenJyuuGothicL-P-Regular";
  src: url("../fonts/GenJyuuGothicL-P-Regular.woff2") format("woff2");
  font-display: swap;
}
.GenJyuuGothicL-P-Regular {
  font-family: "GenJyuuGothicL-P-Regular", sans-serif;
}

@font-face {
  font-family: "GenJyuuGothicL-P-Medium";
  src: url("../fonts/GenJyuuGothicL-P-Medium.woff2") format("woff2");
  font-display: swap;
}
.GenJyuuGothicL-P-Medium {
  font-family: "GenJyuuGothicL-P-Medium", sans-serif;
}

@font-face {
  font-family: "GenJyuuGothicL-P-Heavy";
  src: url("../fonts/GenJyuuGothicL-P-Heavy.woff2") format("woff2");
  font-display: swap;
}
.GenJyuuGothicL-P-Heavy {
  font-family: "GenJyuuGothicL-P-Heavy", sans-serif;
}

.online {
  color: #53483f;
}
.online .orange {
  color: #ff7c25;
}
.online .green {
  color: #0d94aa;
}
.online .orange-bg {
  background: #ffe5c3;
}
.online .blue {
  color: #1982b8;
}
.online .blue-bg {
  background: #d5faff;
}
.online .red {
  color: #ff6406;
}
.online .red-bg {
  background: #ffe9d6;
}
.online .faq-box {
  padding: 0 0.5rem;
  margin: 20px 12px 50px;
  border-left: 8px solid #feb070;
  background-color: #fff;
}
.online .faq-box .faq-q {
  background-color: #ffdabb;
  border-radius: 4px;
  margin-bottom: 1.5rem;
}
.online .faq-box .faq-a {
  margin-bottom: 0.5rem;
}
.online .faq-box .faq-q, .online .faq-box .faq-a {
  font-family: "vdl-logomaru", sans-serif;
  font-weight: 400;
  font-style: normal;
  display: flex;
  align-items: center;
}
.online .faq-box .faq-q .label, .online .faq-box .faq-a .label {
  font-size: 3.5rem;
  color: #ff6c17;
  margin-right: 0.5rem;
  margin-left: 0.5rem;
  position: relative;
  top: -11px;
}
.online .faq-box .faq-q .question, .online .faq-box .faq-a .question {
  font-family: "m-plus-rounded-1c", sans-serif;
  padding: 1rem 1rem 1rem 0;
  font-weight: bold;
  font-size: 1.6rem;
  letter-spacing: -1px;
}
.online .faq-box .faq-q .answer, .online .faq-box .faq-a .answer {
  font-family: "m-plus-rounded-1c", sans-serif;
  font-weight: bold;
  font-size: 1.6rem;
  color: #53483f;
}
.online .faq-box .faq-note {
  font-family: "mgenplus-1p-medium", sans-serif;
  font-size: 1rem;
  color: #53483f;
  line-height: 1.6;
  margin-top: 0.5rem;
}

/* pc */
@media screen and (min-width: 961px) {
  /*ここにpc用スタイルを記述*/
  .online .title {
    position: relative;
  }
  .online .title .sub-title {
    position: absolute;
    background: #ffe6c5;
    text-align: center;
    border-radius: 30px;
    border: solid 3px #fff;
    margin: 0 auto;
    padding: 0;
    width: 45%;
    height: 30px;
    font-size: 30px;
    top: 120px;
    right: 0;
    left: 0;
  }
  .online .title .sub-title .kanzen {
    position: relative;
    top: -6px;
  }
  .online .title .sub-title .kanzen [data-ruby] {
    position: relative;
  }
  .online .title .sub-title .kanzen [data-ruby]::before {
    content: attr(data-ruby);
    position: absolute;
    top: -2em;
    left: -30px;
    right: 0;
    margin: auto;
    font-size: 0.5em;
    -webkit-text-stroke-color: #fff;
    paint-order: stroke;
    -webkit-text-stroke-width: 5px;
  }
  .online .title h1 {
    -webkit-text-stroke-color: #fff;
    paint-order: stroke;
    -webkit-text-stroke-width: 15px;
    position: absolute;
    bottom: 8%;
    left: 9%;
    font-size: 38px;
  }
  .online .title h1 span {
    font-size: 60px;
  }
  .online h2.onlinette {
    font-size: 30px;
    letter-spacing: -1px;
    width: 90%;
    margin: 0 auto;
    border-left: solid 10px #a0d7d0;
    border-bottom: solid 5px #a0d7d0;
  }
  .online h2.onlinette span {
    font-size: 25px;
  }
  .online .onlinette-c {
    padding: 20px 10px;
  }
  .online .onlinette-c .onlinette-b {
    display: grid;
    grid-template-columns: 40% 60%;
  }
  .online .onlinette-c .onlinette-b img {
    padding-left: 30px;
    padding-top: 30px;
  }
  .online .onlinette-c p {
    padding: 30px 30px 0;
    font-size: 18px;
    line-height: 2rem;
  }
  .online .h3-label {
    display: grid;
    grid-template-columns: 25% 75%;
    margin: 0 6%;
  }
  .online .h3-label h3 {
    text-align: right;
    font-size: clamp(1.438rem, -0.787rem + 3.7vw, 1.563rem);
    padding: 5px 0;
  }
  .online .h3-label h3 .small {
    font-size: clamp(1.25rem, 1.17rem + 0.34vw, 1.375rem);
  }
  .online .osusume-c {
    padding: 10px 10px 20px;
  }
  .online .osusume-c .osusume-b {
    display: grid;
    grid-template-columns: 60% 40%;
  }
  .online .osusume-c .osusume-b img {
    padding-right: 30px;
  }
  .online .osusume-c p {
    padding: 0 30px 30px;
    font-size: 17px;
    line-height: 2rem;
  }
  .online .form-banner {
    padding: 20px 10px 110px 10px;
  }
}
/* smartPhone */
@media screen and (max-width: 960px) {
  /*ここにスマホ用スタイルを記述*/
  .online .title {
    position: relative;
  }
  .online .title .sub-title {
    position: absolute;
    background: #ffe6c5;
    text-align: center;
    border-radius: 30px;
    border: solid clamp(0.125rem, 0.085rem + 0.17vw, 0.188rem) #fff;
    margin: 0 auto;
    padding: 0;
    width: 45%;
    height: clamp(1.25rem, 0.849rem + 1.71vw, 1.875rem);
    font-size: clamp(1.25rem, 0.849rem + 1.71vw, 1.875rem);
    top: clamp(3.438rem, -1.971rem + 23.08vw, 11.875rem);
    right: 0;
    left: 0;
  }
  .online .title .sub-title .kanzen {
    position: relative;
    top: clamp(-0.625rem, -0.785rem + 0.68vw, -0.375rem);
  }
  .online .title .sub-title .kanzen [data-ruby] {
    position: relative;
  }
  .online .title .sub-title .kanzen [data-ruby]::before {
    content: attr(data-ruby);
    position: absolute;
    top: -2em;
    left: -30px;
    right: 0;
    margin: auto;
    font-size: 0.5em;
    -webkit-text-stroke-color: #fff;
    paint-order: stroke;
    -webkit-text-stroke-width: 5px;
  }
  .online .title h1 {
    -webkit-text-stroke-color: #fff;
    paint-order: stroke;
    position: absolute;
    -webkit-text-stroke-width: clamp(0.313rem, -0.088rem + 1.71vw, 0.938rem);
    bottom: clamp(0.313rem, -1.41rem + 7.35vw, 3rem);
    left: clamp(1.25rem, -1.955rem + 13.68vw, 6.25rem);
    font-size: clamp(1.375rem, -0.147rem + 6.5vw, 3.75rem);
  }
  .online .title h1 span {
    font-size: clamp(2.188rem, 0.505rem + 7.18vw, 4.813rem);
  }
  .online h2.onlinette {
    font-size: clamp(1.063rem, 0.061rem + 4.27vw, 2.625rem);
    letter-spacing: -1px;
    padding: clamp(0rem, -0.601rem + 2.56vw, 0.938rem);
    text-align: center;
    width: 90%;
    margin: 0 auto;
    border-left: solid clamp(0.313rem, 0.112rem + 0.85vw, 0.625rem) #a0d7d0;
    border-bottom: solid clamp(0.125rem, 0.005rem + 0.51vw, 0.313rem) #a0d7d0;
  }
  .online h2.onlinette span {
    font-size: clamp(0.813rem, -0.109rem + 3.93vw, 2.25rem);
  }
  .online .onlinette-c {
    padding: 20px 10px;
  }
  .online .onlinette-c .onlinette-b {
    display: grid;
    grid-template-columns: 50% 50%;
  }
  .online .onlinette-c .onlinette-b img {
    padding-left: clamp(0rem, -1.202rem + 5.13vw, 1.875rem);
    padding-top: clamp(0.313rem, -0.689rem + 4.27vw, 1.875rem);
  }
  .online .onlinette-c p {
    padding: clamp(0.625rem, -0.176rem + 3.42vw, 1.875rem) clamp(0.625rem, -0.176rem + 3.42vw, 1.875rem) 0;
    font-size: clamp(0.688rem, 0.407rem + 1.2vw, 1.125rem);
    line-height: clamp(1.1rem, 0.523rem + 2.46vw, 2rem);
  }
  .online .h3-label {
    display: grid;
    grid-template-columns: 20% 80%;
    margin: 0 6%;
  }
  .online .h3-label h3 {
    text-align: right;
    font-size: clamp(1rem, 0.279rem + 3.08vw, 2.125rem);
    padding: clamp(0rem, -0.401rem + 1.71vw, 0.625rem) 0;
    margin-top: -6px;
    letter-spacing: -1px;
  }
  .online .h3-label h3 .small {
    font-size: clamp(0.625rem, -0.216rem + 3.59vw, 1.938rem);
  }
  .online .osusume-c {
    padding: clamp(0.313rem, 0.112rem + 0.85vw, 0.625rem) 10px 20px;
  }
  .online .osusume-c .osusume-b {
    display: grid;
    grid-template-columns: 60% 40%;
  }
  .online .osusume-c .osusume-b img {
    padding-right: clamp(0.313rem, -0.689rem + 4.27vw, 1.875rem);
  }
  .online .osusume-c p {
    padding: 0 clamp(0.625rem, -0.176rem + 3.42vw, 1.875rem) clamp(0.625rem, -0.176rem + 3.42vw, 1.875rem);
    font-size: clamp(0.688rem, 0.407rem + 1.2vw, 1.125rem);
    line-height: clamp(1.2rem, 0.687rem + 2.19vw, 2rem);
  }
  .online .form-banner {
    padding: 10px;
  }
  .online .faq-box .faq-q .label, .online .faq-box .faq-a .label {
    font-size: clamp(1.875rem, 0.673rem + 5.13vw, 3.75rem);
    margin: 5px 0 0 5px;
  }
  .online .faq-box .faq-q .question, .online .faq-box .faq-a .question {
    font-size: clamp(0.875rem, 0.034rem + 3.59vw, 2.188rem);
    line-height: clamp(1.3rem, 0.979rem + 1.37vw, 1.8rem);
    padding: clamp(0rem, -0.601rem + 2.56vw, 0.938rem) 0;
    letter-spacing: -1px;
  }
  .online .faq-box .faq-q .answer, .online .faq-box .faq-a .answer {
    font-size: clamp(1rem, 0.615rem + 1.64vw, 1.6rem);
    line-height: clamp(1.3rem, 0.979rem + 1.37vw, 1.8rem);
  }
  .online .faq-box .faq-note {
    font-size: clamp(0.8rem, 0.672rem + 0.55vw, 1rem);
  }
}/*# sourceMappingURL=online.css.map */