/* common
---------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 62.5%;
}
@media only screen and (max-width: 1100px) {
  html {
    font-size: calc(10 / 1100 * 100vw);
  }
}
@media only screen and (max-width: 767px) {
  html {
    font-size: 4.375vw;
  }
}

body {
  -webkit-text-size-adjust: none;
  font-family: "Noto Sans JP", sans-serif;
  font-feature-settings: "palt";
  padding: 0 0 25vw 0;
}
@media screen and (min-width: 768px) {
  body {
    padding: 0 0 12.8rem 0;
  }
}

a {
  text-decoration: none;
  overflow: hidden;
  outline: none;
  transition: all  0.3s ease;
}
@media (hover: hover) {
  a:hover {
    opacity: 0.7;
  }
}
@media (hover: none) {
  a:active {
    opacity: 0.7;
  }
}

img {
  vertical-align: bottom;
  width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
}

.sp {
  display: block;
}
@media screen and (min-width: 768px) {
  .sp {
    display: none;
  }
}

.pc {
  display: none;
}
@media screen and (min-width: 768px) {
  .pc {
    display: block;
  }
}

.center {
  text-align: center;
}

@media screen and (min-width: 768px) {
  .wrap {
    width: 100rem;
    margin-left: auto;
    margin-right: auto;
  }
}

.btn {
  width: 93.75vw;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .btn {
    width: 82rem;
  }
}

.for-member {
  font-size: 3.75vw;
  font-weight: 500;
  letter-spacing: 0.075em;
  line-height: 1;
  margin: 3.28125vw 0 0 0;
}
@media screen and (min-width: 768px) {
  .for-member {
    font-size: 1.9rem;
    margin: 1.8rem 0 0 0;
  }
}
.for-member a {
  color: #1eb1e5;
}

.tab-contents,
.js-accordion dd {
  display: none;
}

/* fv
---------------------------------------------------- */
.fv {
  padding: 5.3125vw 0 8.4375vw 0;
  background: url(../img/fv-illust.png) no-repeat 50% 36.71875vw;
  background-size: 83.28125vw;
}
@media screen and (min-width: 768px) {
  .fv {
    padding: 8rem 0 6.7rem 0;
    background: url(../img/fv-illust.png) no-repeat calc(50% + 31rem) 12.5rem;
    background-size: 51.1rem;
  }
}
@media screen and (min-width: 768px) {
  .fv h1 {
    width: 54.2rem;
  }
}
.fv__img01 {
  margin: 71.25vw 0 0 0;
}
@media screen and (min-width: 768px) {
  .fv__img01 {
    width: 49.3rem;
    margin: 4.5rem 0 0 2.6rem;
  }
}
.fv .btn {
  margin-top: 4.6875vw;
}
@media screen and (min-width: 768px) {
  .fv .btn {
    margin-top: 3.9rem;
  }
}

/* introduction
---------------------------------------------------- */
.introduction {
  border-top: 1.5625vw solid #eef4f7;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .introduction {
    border-top: 10px solid #eef4f7;
    background: #fff;
    padding: 3.9rem 0 3.5rem 0;
    position: relative;
  }
}
@media screen and (min-width: 768px) {
  .introduction::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5rem 50rem 0px 50rem;
    border-color: #fff transparent transparent transparent;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* bg01
---------------------------------------------------- */
.bg01 {
  background: #eef4f7;
  margin: -7.8125vw 0 0 0;
  padding: 0 0 12.5vw 0;
}
@media screen and (min-width: 768px) {
  .bg01 {
    margin: 0;
    padding: 0 0 5.2rem 0;
  }
}
.bg01 .btn {
  margin-top: 5.15625vw;
}
@media screen and (min-width: 768px) {
  .bg01 .btn {
    margin-top: 5rem;
  }
}

/* about
---------------------------------------------------- */
.about {
  padding: 16.5625vw 0 0 0;
}
@media screen and (min-width: 768px) {
  .about {
    padding: 10.8rem 0 0 0;
  }
}

/* features
---------------------------------------------------- */
.features {
  width: 93.75vw;
  margin: 10.9375vw auto 0 auto;
}
@media screen and (min-width: 768px) {
  .features {
    width: 100rem;
    margin: 6rem auto 0 auto;
  }
}
.features li:not(:first-child) {
  margin: 4.6875vw 0 0 0;
}
@media screen and (min-width: 768px) {
  .features li:not(:first-child) {
    margin: 3rem 0 0 0;
  }
}

/* example
---------------------------------------------------- */
.example {
  padding: 12.5vw 0 0 0;
}
@media screen and (min-width: 768px) {
  .example {
    padding: 8.3rem 0 0 0;
  }
}
.example ul {
  margin: 6.25vw 0 0 0;
  display: flex;
  align-items: flex-end;
}
@media screen and (min-width: 768px) {
  .example ul {
    margin: 3.6rem 0 0 0;
  }
}
.example li {
  width: 50%;
  height: 14.6875vw;
  border-top: 1.5625vw solid #fff;
  background: rgba(0, 65, 184, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 1.875vw;
  transition: all 0.3s ease;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .example li {
    height: 6.9rem;
    border-top: 0.8rem solid #fff;
    column-gap: 2rem;
  }
}
.example li.is-active {
  border-top: 1.5625vw solid #0041b8;
  background: #0041b8;
}
@media screen and (min-width: 768px) {
  .example li.is-active {
    border-top: 0.8rem solid #0041b8;
  }
}
.example li.is-active img.icon {
  opacity: 1;
}
.example li img:not(.icon) {
  width: auto;
  height: 4.6875vw;
}
@media screen and (min-width: 768px) {
  .example li img:not(.icon) {
    height: 2.3rem;
  }
}
.example li img.icon {
  opacity: 0.47;
  transition: all 0.3s ease;
}
.example li:nth-child(1) img.icon {
  width: 8.59375vw;
}
@media screen and (min-width: 768px) {
  .example li:nth-child(1) img.icon {
    width: 4.1rem;
  }
}
.example li:nth-child(2) img.icon {
  width: 10.15625vw;
}
@media screen and (min-width: 768px) {
  .example li:nth-child(2) img.icon {
    width: 4.8rem;
  }
}
.example__box {
  border: 3.125vw solid #0041b8;
}
@media screen and (min-width: 768px) {
  .example__box {
    border: 2rem solid #0041b8;
  }
}
.example .slick-arrow {
  width: 4.6875vw;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  cursor: pointer;
}
.example .slick-arrow.prev {
  left: -1.5625vw;
}
.example .slick-arrow.next {
  right: -1.5625vw;
}
@media screen and (min-width: 768px) {
  .example .slick01 > div:not(:nth-of-type(1)) {
    border-top: 1.8rem solid #0041b8;
  }
}
.example .btn {
  margin-top: 7.8125vw;
}
@media screen and (min-width: 768px) {
  .example .btn {
    margin-top: 5.6rem;
  }
}

/* data
---------------------------------------------------- */
.data {
  padding: 8vw 0 0 0;
}
@media screen and (min-width: 768px) {
  .data {
    padding: 10rem 0 0 0;
  }
}
.data__bg {
  background: #e0e8f7;
  padding: 3.4375vw 3.125vw 10.9375vw 3.125vw;
  margin: 6.25vw 0 0 0;
}
@media screen and (min-width: 768px) {
  .data__bg {
    padding: 2.5rem 2.5rem 5rem 2.5rem;
    margin: 3rem 0 0 0;
  }
}
.data .btn {
  margin-top: 4.6875vw;
}
@media screen and (min-width: 768px) {
  .data .btn {
    margin-top: 5rem;
  }
}

/* member
---------------------------------------------------- */
.member {
  padding: 12.5vw 3.125vw 0 3.125vw;
}
@media screen and (min-width: 768px) {
  .member {
    padding: 8rem 0 0 0;
  }
}
.member ol {
  margin: 10.46875vw 0 0 0;
}
@media screen and (min-width: 768px) {
  .member ol {
    margin: 5rem 0 0 0;
  }
}
.member li:not(:first-child) {
  margin: 2.5vw 0 0 0;
}
@media screen and (min-width: 768px) {
  .member li:not(:first-child) {
    margin: 0.8rem 0 0 0;
  }
}
.member .btn {
  margin-top: 4.6875vw;
}
@media screen and (min-width: 768px) {
  .member .btn {
    margin-top: 3.3rem;
  }
}

/* qa
---------------------------------------------------- */
.qa {
  padding: 16.25vw 3.125vw 18.75vw 3.125vw;
}
@media screen and (min-width: 768px) {
  .qa {
    width: 82rem;
    padding: 8rem 0 17.3rem 0;
    margin: 0 auto;
  }
}
.qa dl {
  margin: 14.0625vw 0 0 0;
}
@media screen and (min-width: 768px) {
  .qa dl {
    margin: 8rem 0 0 0;
  }
}
.qa dt {
  font-size: 4.375vw;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.035em;
  padding: 0 6.25vw 3.125vw 12.5vw;
  background-image: linear-gradient(to right, #ccc 0.625vw, transparent 0.625vw);
  background-size: 0.9375vw 1px;
  background-repeat: repeat-x;
  background-position: left bottom;
  position: relative;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .qa dt {
    min-height: 8rem;
    font-size: 2.4rem;
    padding: 0 3.7rem 2.2rem 7.5rem;
    background-image: linear-gradient(to right, #ccc 4px, transparent 4px);
    background-size: 6px 1px;
    display: flex;
    align-items: center;
  }
}
.qa dt::before, .qa dt::after {
  content: '';
  display: block;
  position: absolute;
}
.qa dt::before {
  width: 5vw;
  height: 3.125vw;
  background: url(../img/arrow01.svg) no-repeat;
  background-size: 100%;
  top: 50%;
  right: 0;
  margin: -1.5625vw 0 0 0;
  transition: all 0.3s ease;
}
@media screen and (min-width: 768px) {
  .qa dt::before {
    width: 2.7rem;
    height: 1.8rem;
    right: 1rem;
    margin: -1.8rem 0 0 0;
  }
}
.qa dt::after {
  width: 10.625vw;
  height: 10.625vw;
  background: url(../img/q.svg) no-repeat;
  background-size: 100%;
  top: 0;
  left: 0;
}
@media screen and (min-width: 768px) {
  .qa dt::after {
    width: 5.9rem;
    height: 5.8rem;
  }
}
.qa dt.is-active::before {
  transform: rotate(180deg);
}
.qa dt:not(:nth-of-type(1)) {
  margin: 14.0625vw 0 0 0;
}
@media screen and (min-width: 768px) {
  .qa dt:not(:nth-of-type(1)) {
    margin: 4.5rem 0 0 0;
  }
}
.qa dd {
  font-size: 3.75vw;
  font-weight: 400;
  line-height: 1.66;
  padding: 4.375vw 2.34375vw 0 2.34375vw;
}
@media screen and (min-width: 768px) {
  .qa dd {
    font-size: 2rem;
    padding: 2.5rem 7.5rem 0 7.5rem;
  }
}
.qa .btn {
  margin-top: 9.375vw;
}
@media screen and (min-width: 768px) {
  .qa .btn {
    margin-top: 7.5rem;
  }
}

/* footer
---------------------------------------------------- */
footer {
  color: #fff;
  line-height: 1;
  background: #89c2d7;
  padding: 4.6875vw 0;
}
@media screen and (min-width: 768px) {
  footer {
    padding: 2rem 0;
  }
}
footer a {
  font-size: 4.0625vw;
  font-weight: 500;
  color: #fff;
}
@media screen and (min-width: 768px) {
  footer a {
    font-size: 1.8rem;
  }
}
footer ul {
  display: flex;
  justify-content: center;
}
footer li:not(:first-child) {
  padding: 0 0 0 3.90625vw;
  margin: 0 0 0 3.90625vw;
  border-left: 1px solid #fff;
}
@media screen and (min-width: 768px) {
  footer li:not(:first-child) {
    padding: 0 0 0 5.6rem;
    margin: 0 0 0 5.6rem;
  }
}
footer p {
  font-size: 3.75vw;
  margin: 1em 0 0 0;
}
@media screen and (min-width: 768px) {
  footer p {
    font-size: 1.5rem;
  }
}

/* floating-btn
---------------------------------------------------- */
.btn {
  width: 93.75vw;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .btn {
    width: 82rem;
  }
}
.btn a {
  height: 18.75vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5vw;
  font-weight: 700;
  line-height: 1.32;
  text-align: center;
  color: #fff;
  letter-spacing: 0.075em;
  background: #ff9900 url(../img/arrow02.svg) no-repeat right 4.6875vw top 50%;
  background-size: 2.5vw auto;
  border-radius: 100vh;
}
@media screen and (min-width: 768px) {
  .btn a {
    height: 9.8rem;
    font-size: 2.6rem;
    background: #ff9900;
  }
}
.btn span {
  display: inline-block;
  margin: -0.1em 0 0 0;
}
@media screen and (min-width: 768px) {
  .btn span {
    padding: 0 4rem 0 0;
    background: url(../img/arrow02.svg) no-repeat 100% 0.3em;
    background-size: 1.3rem auto;
  }
}

.floating-btn {
  width: 100%;
  position: fixed;
  bottom: -21.875vw;
  left: 0;
  z-index: 2;
  transition: all 0.3s ease;
}
@media screen and (min-width: 768px) {
  .floating-btn {
    bottom: -11.3rem;
  }
}
.floating-btn.is-show {
  bottom: 3.125vw;
}
@media screen and (min-width: 768px) {
  .floating-btn.is-show {
    bottom: 1.5rem;
  }
}

/*# sourceMappingURL=main.css.map */