@media (max-width: 375px) {
  html {
    font-size: 2.6666666667vw;
  }
}
@media screen and (min-width: 375.1px) {
  html {
    font-size: 10px;
  }
}
@media screen and (min-width: 768px) {
  html {
    font-size: 0.7321180174vw;
  }
}
@media screen and (min-width: 1366px) {
  html {
    font-size: 10px;
  }
}

@media screen and (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}

a {
  color: inherit;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  a {
    transition: opacity 0.3s;
  }
  a:hover {
    opacity: 0.7;
  }
}

body {
  word-wrap: break-word;
  background-color: #FFF;
  color: #13131f;
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  line-height: 1.75;
  overflow-wrap: break-word;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
@media screen and (min-width: 768px) {
  body {
    font-size: 2rem;
  }
}

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

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

span, a {
  display: inline-block;
}

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

ul,
ol {
  padding: 0;
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

body {
  min-height: 100vh;
  min-inline-size: 0;
  text-rendering: optimizeSpeed;
}

ul,
ol {
  list-style: none;
}

img {
  display: block;
  height: auto;
  width: 100%;
}

address,
strong,
em {
  font-style: normal;
}

input,
button,
textarea,
select {
  font: inherit;
}

img:not([alt]) {
  filter: blur(10px);
}

input,
button,
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

textarea {
  resize: vertical;
}

input[type=checkbox],
input[type=radio] {
  opacity: 0;
  position: absolute;
}

input[type=submit],
input[type=button],
label,
button,
select {
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

button {
  touch-action: manipulation;
}

.mv {
  margin-top: 8rem;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .mv {
    margin-top: 10rem;
  }
}

.mv::after {
  background-color: #eeeeef;
  bottom: -4rem;
  content: "";
  display: block;
  height: 90%;
  left: 0;
  margin-left: 0;
  margin-right: auto;
  position: absolute;
  width: 80vw;
  z-index: -2;
}
@media screen and (min-width: 768px) {
  .mv::after {
    bottom: -10rem;
    height: 62.2254758419vw;
    max-height: 90rem;
    width: 71.7423133236vw;
  }
}

.mv__img-box {
  margin-left: auto;
  margin-top: 16rem;
  position: relative;
  width: 84vw;
}
@media screen and (min-width: 768px) {
  .mv__img-box {
    margin-top: 23rem;
    width: 65.8857979502vw;
  }
}

.mv__img {
  position: relative;
  z-index: -1;
  overflow: hidden;
}

.mv__img img {
  aspect-ratio: 900/495;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  border-radius: 30px 0 0 30px;
  position: relative;
}

.mv__img::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 3;
  background-color: rgb(255,255,255,.1);
}

.mv__img::before {
  content: "";
  display: block;
  width: 14rem;
  aspect-ratio: 296/140;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(10%, -80%);
  z-index: 1;
  background: url(../img/mv_text.svg) no-repeat center/cover;
}
@media screen and (min-width: 768px) {
  .mv__img::before {
    width: 26.3rem;
    transform: translate(20%, -90%);
  }
}

.mv__line {
  /*bottom: -4rem;*/
  /*left: 50%;*/
  line-height: 1;
  /*margin-top: -10rem;*/
	position: fixed;
  /*transform: translateX(110%);*/
  width: 168px;
  z-index: 9999;
	top: 13px;
	bottom: auto;
	right: 60px;
	left: auto;
}
@media screen and (min-width: 768px) {
  .mv__line {
    /*bottom: -3.3rem;*/
    max-width: inherit;
	top: 2rem;
	right: 24px;	  
/*    transform: translateX(70%);*/
  }
}

.mv__line:hover {
  cursor: pointer;
}

.mv__text-box {
  left: 2rem;
  max-width: 90%;
  position: absolute;
  top: -7rem;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .mv__text-box {
    left: 50%;
    max-width: 105rem;
    top: -8rem;
    transform: translateX(-70%);
  }
}

.mv__title {
  width: min(90vw, 740px);
}
@media screen and (min-width: 768px) {
  .mv__title {
    width: min(54vw, 740px);
  }
}

.mv__text01 {
  background-color: rgba(255, 255, 255, 0.7);
  padding-top: 1.5rem;
  width: min(25vw, 184px);
}
@media screen and (min-width: 768px) {
  .mv__text01 {
    background-color: transparent;
    margin-left: 5.5rem;
    margin-top: 1.3rem;
    padding-top: unset;
    width: min(13vw, 184px);
  }
}

.mv__text02 {
  margin-top: 2rem;
  width: min(52vw, 480px);
}
@media screen and (min-width: 768px) {
  .mv__text02 {
    margin-left: 3rem;
    width: min(36vw, 480px);
  }
}

.mv__text03 {
  margin-top: 2rem;
  width: min(45vw, 390px);
}
@media screen and (min-width: 768px) {
  .mv__text03 {
    margin-left: 2.2rem;
    width: min(28.5vw, 390px);
  }
}

.mv__text04 {
  margin-top: 2rem;
  width: min(32vw, 240px);
}
@media screen and (min-width: 768px) {
  .mv__text04 {
    margin-left: 2rem;
    margin-top: 3.3rem;
    width: min(17.5vw, 240px);
  }
}

.mv__bnr {
  margin-inline: auto;
  margin-top: 21.3333333333vw;
  width: min(90vw, 850px);
}
@media screen and (min-width: 768px) {
  .mv__bnr {
    margin-top: 11.6rem;
    width: min(62.2vw, 880px);
  }
}

.about {
  margin-top: 3rem;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .about {
    margin-top: 14rem;
  }
}

.about__media {
  display: flex;
  flex-direction: column-reverse;
  margin-top: 3rem;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .about__media {
    align-items: flex-end;
    flex-direction: row;
    justify-content: flex-end;
    margin-left: 16%;
    margin-top: 6rem;
    width: 84%;
  }
}

.about__media::before {
  background-color: #eeeeef;
  bottom: -2rem;
  content: "";
  display: block;
  height: 30rem;
  position: absolute;
  right: 0;
  width: 100%;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .about__media::before {
    bottom: -9rem;
    height: 36rem;
    width: 87%;
  }
}

.about__media-img {
  margin-left: 10%;
  width: 90%;
}
@media screen and (min-width: 768px) {
  .about__media-img {
    margin-left: 5%;
    width: 50vw;
  }
}

.about__media-img img {
  border-bottom-left-radius: 5rem;
  border-top-left-radius: 5rem;
}

.about__media-body {
  margin-inline: auto;
  margin-top: 2rem;
  width: 90%;
}
@media screen and (min-width: 768px) {
  .about__media-body {
    margin: unset;
    width: 38%;
  }
}

@media screen and (min-width: 768px) {
  .about__media-body p {
    line-height: 2.2;
    transform: translateY(1.7rem);
  }
}

.feature__title {
  margin-top: 8rem;
  position: relative;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .feature__title {
    margin-top: 24rem;
  }
}

.feature__list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 1rem;
  justify-content: center;
  margin-inline: auto;
  margin-top: 10rem;
  max-width: 54rem;
  position: relative;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .feature__list {
    gap: 3.2rem 1.5rem;
    margin-top: 13rem;
    max-width: 80rem;
  }
}

.feature__list::before {
  background: url(../img/feature-bg.webp) no-repeat center/cover;
  bottom: 15rem;
  content: "";
  display: block;
  height: 96vw;
  left: 0;
  margin-left: calc(50% - 50vw);
  position: absolute;
  width: 86vw;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .feature__list::before {
    bottom: 4rem;
    height: 50rem;
    width: 72vw;
  }
}

.feature__item {
  width: calc((100% - 20px) / 2);
}
@media screen and (min-width: 768px) {
  .feature__item {
    width: calc((100% - 40px) / 3);
  }
}

.feature-detail__bg {
  background-color: #eeeeef;
  margin-top: 10rem;
  padding-block: 10rem 5rem;
}
@media screen and (min-width: 768px) {
  .feature-detail__bg {
    margin-top: 11rem;
    padding-block: 16rem 5rem;
  }
}

.feature-detail__list {
  margin-inline: auto;
  max-width: 88rem;
}

.feature-detail__item {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .feature-detail__item {
    gap: 3.1818181818%;
  }
}

.feature-detail__item::after {
  background-color: #FFF;
  content: "";
  display: block;
  width: 70vw;
  height: 84.8vw;
  max-height: 40rem;
  position: absolute;
  top: -4rem;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .feature-detail__item::after {
    height: 27rem;
  }
}

.feature-detail__item + .feature-detail__item {
  margin-top: 7rem;
}
@media screen and (min-width: 768px) {
  .feature-detail__item + .feature-detail__item {
    margin-top: 7rem;
  }
}

.feature-detail__item figure {
  margin-inline: auto;
  max-width: 48rem;
  width: 94%;
}
@media screen and (min-width: 768px) {
  .feature-detail__item figure {
    margin: unset;
    max-width: 43.2rem;
    width: 49.0909090909%;

  }
}

.feature-detail__item figure img {
  border-radius: 1.5rem;
  aspect-ratio: 432/270;
  object-fit: cover;
  object-position: center;
  box-shadow: 6px 6px 12px rgb(158, 158, 158, 0.4);

}

.feature-detail__body {
  margin-inline: auto;
  padding-top: 2rem;
  width: 88%;
}
@media screen and (min-width: 768px) {
  .feature-detail__body {
    margin-inline: unset;
    max-width: none;
    padding-left: 6rem;
    padding-top: 3rem;
    width: 47.7272727273%;
  }
}
.feature-detail__body .title {
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.5;
  position: relative;
  text-align: center;
  text-decoration: underline;
}
@media screen and (min-width: 768px) {
  .feature-detail__body .title {
    font-size: 2.8rem;
    text-align: left;
    text-decoration: none;
  }
}
.feature-detail__body .title span {
  color: #d9e021;
  font-size: 4.4rem;
  font-style: italic;
  font-weight: 300;
  left: 2rem;
  line-height: 1;
  position: absolute;
  top: -4rem;
}
@media screen and (min-width: 768px) {
  .feature-detail__body .title span {
    font-size: 8.8rem;
    left: -5.4rem;
    top: -3rem;
  }
}
.feature-detail__body .text {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2;
  margin-top: 1rem;
  padding-inline: 4%;
  position: relative;
  word-break: auto-phrase;
}
@media screen and (min-width: 768px) {
  .feature-detail__body .text {
    font-size: 1.8rem;
    margin-top: 4rem;
    padding-inline: unset;
  }
}
@media screen and (min-width: 768px) {
  .feature-detail__body .text::before {
    background-color: #666671;
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    top: -2.7rem;
    width: 50vw;
  }
}

.feature-detail__item._normal {
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .feature-detail__item._normal {
    flex-direction: row-reverse;
  }
}
.feature-detail__item._normal::after {
  margin-right: calc(50% - 50vw);
  right: 0;
}
@media screen and (min-width: 768px) {
  .feature-detail__item._normal .feature-detail__body .text::before {
    margin-left: calc(50% - 50vw);
    right: 6rem;
  }
}

.feature-detail__item._reverse {
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .feature-detail__item._reverse {
    flex-direction: row;
  }
}
.feature-detail__item._reverse::after {
  left: 0;
  margin-left: calc(50% - 50vw);
}
@media screen and (min-width: 768px) {
  .feature-detail__item._reverse .feature-detail__body .text::before {
    left: 0;
    margin-right: calc(50% - 50vw);
  }
}

.type {
  background-color: #eeeeef;
}

.type .sec-title::before {
  background-color: #FFF;
  translate: -80% 0;
}

.type__lead {
  position: relative;
  z-index: 1;
}

.type__lead::after {
  background: url(../img/type02.webp) no-repeat center/cover;
  content: "";
  display: block;
  height: 22.1083455344vw;
  max-height: 30.3rem;
  max-width: 38rem;
  position: absolute;
  right: 50%;
  top: -8rem;
  transform: translateX(150%);
  width: 27.8184480234%;
  z-index: 0;
}
@media screen and (min-width: 768px) {
  .type__lead::after {
    top: -17rem;
    transform: translateX(130%);
  }
}

.type figure {
  margin-top: 3rem;
  position: relative;
  z-index: 1;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .type figure {
    margin-inline: auto;
    margin-top: 4rem;
    max-width: 68rem;
  }
}

.type figure img {
  aspect-ratio: 680/400;
  object-fit: cover;
  object-position: center;
}

.type .splide__pagination {
  bottom: -1.6em;
}

.type .splide__pagination__page {
  background: #aaa;
}

.type .splide__pagination__page.is-active {
  border: 1px solid #aaa;
}


.type__text {
  color: #666671;
  font-family: "Jost", sans-serif;
  font-size: 3.2rem;
  font-weight: 300;
  line-height: 1;
  margin-top: 4rem;
  padding-bottom: 8rem;
  position: relative;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .type__text {
    font-size: 4.8rem;
    margin-top: 5rem;
    padding-bottom: 10rem;
  }
}

.type__text::before {
  background: url(../img/type03.webp) no-repeat center/cover;
  bottom: 3rem;
  content: "";
  display: block;
  height: 12.4450951684vw;
  left: 50%;
  max-height: 17rem;
  max-width: 43.6rem;
  position: absolute;
  transform: translateX(-130%);
  width: 31.9180087848%;
}
@media screen and (min-width: 768px) {
  .type__text::before {
    bottom: -7rem;
  }
}

.type__bg {
  background: url(../img/type-bg.webp) no-repeat center/cover;
  height: 100%;
  padding-block: 5rem 10rem;
}
@media screen and (min-width: 768px) {
  .type__bg {
    padding-block: 11rem 10rem;
  }
}

.type__sub-title {
  text-align: center;
}

.sec-sub-title.type__sub-title::first-letter {
  color: inherit;
}

.type__list {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  margin-inline: auto;
  margin-top: 8rem;
  max-width: 52rem;
  padding-inline: 4%;
}
@media screen and (min-width: 768px) {
  .type__list {
    grid-template-columns: repeat(5, 1fr);
    margin-top: 12rem;
    max-width: 89rem;
    padding-inline: 2rem;
  }
}

.plan__lead {
  position: relative;
}

.plan__lead::before {
  background: url(../img/plan01.svg) no-repeat center/cover;
  bottom: 3rem;
  content: "";
  display: block;
  height: 16.3982430454vw;
  left: 50%;
  max-height: 22.4rem;
  max-width: 32.8rem;
  position: absolute;
  transform: translateX(-150%);
  width: 24.0117130307%;
}
@media screen and (min-width: 768px) {
  .plan__lead::before {
    bottom: -7rem;
    padding-inline: unset;
  }
}

.plan__table {
  margin-inline: auto;
  margin-top: 5rem;
  max-width: 92%;
}
@media screen and (min-width: 768px) {
  .plan__table {
    margin-top: 8rem;
    max-width: 85rem;
  }
}

.system {
  background-color: #eeeeef;
}

.system .sec-title::before {
  background-color: #FFF;
  translate: -70% 0;
}

.system__list {
  margin-inline: auto;
  margin-top: 5rem;
  max-width: 52rem;
  width: 92%;
}
@media screen and (min-width: 768px) {
  .system__list {
    margin-top: 6rem;
    max-width: 75rem;
  }
}

.system__item + .system__item {
  margin-top: 4rem;
  position: relative;
}
@media screen and (min-width: 768px) {
  .system__item + .system__item {
    margin-top: 6rem;
  }
}
.system__item + .system__item:after {
  border-right: 1px solid #666671;
  border-top: 1px solid #666671;
  content: "";
  display: block;
  height: 2.8rem;
  left: 50%;
  position: absolute;
  top: -2.2rem;
  transform: translate(-50%, 0) rotate(135deg);
  width: 2.8rem;
}
@media screen and (min-width: 768px) {
  .system__item + .system__item:after {
    height: 3.8rem;
    top: -3.2rem;
    width: 3.8rem;
  }
}

.system__item {
  -moz-column-gap: 2rem;
  background-color: #FFF;
  border-radius: 1.5rem;
  column-gap: 2rem;
  display: flex;
  flex-direction: column;
  padding: 3rem 2rem;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .system__item {
    -moz-column-gap: 6rem;
    align-items: center;
    column-gap: 6rem;
    flex-direction: row;
    padding: 8rem 5rem 4.8rem;
  }
}

.system__item figure {
  line-height: 1;
  width: 31.3333333333%;
}

.system__body {
  flex: 1;
  margin-top: 2rem;
  position: relative;
  width: 100%;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .system__body {
    margin-top: unset;
    width: 48%;
  }
}
.system__body .step {
  position: absolute;
  right: 0;
  top: -9rem;
  width: 22rem;
}
@media screen and (min-width: 768px) {
  .system__body .step {
    right: -8rem;
    top: -3rem;
  }
}
.system__body .title {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .system__body .title {
    font-size: 3rem;
  }
}
.system__body .text {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.875;
  margin-top: 1rem;
}
@media screen and (min-width: 768px) {
  .system__body .text {
    font-size: 1.9rem;
    margin-top: 2rem;
  }
}
.system__body .system__btn {
  margin-top: 1rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .system__body .system__btn {
    margin-top: 1rem;
  }
}
.system__body .system__btn a {
  align-items: center;
  background-color: #049d02;
  border-radius: 0.5rem;
  color: #FFF;
  display: flex;
  justify-content: center;
  padding: 1rem 3rem;
  position: relative;
}
@media screen and (min-width: 768px) {
  .system__body .system__btn a {
    font-size: 1.6rem;
    margin-inline: auto;
    max-width: 23rem;
  }
}
.system__body .system__btn a::after {
  background-color: #FFF;
  clip-path: polygon(0 0, 0% 100%, 55% 50%);
  content: "";
  display: inline-block;
  height: 1.6rem;
  margin-left: 0.5em;
  width: 1.6rem;
}

.access {
  overflow-x: hidden;
  position: relative;
  z-index: 1;
}

@media screen and (min-width: 768px) {
  .access::after {
    background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 27%, rgb(238, 238, 239) 27%);
    bottom: 0;
    content: "";
    display: block;
    height: 86%;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: -1;
  }
}

.access .sec-title::before {
  background-color: #666671;
  translate: -80% 0;
}

.access__inner {
  margin-inline: auto;
  margin-top: 5rem;
  max-width: 85rem;
}
@media screen and (min-width: 768px) {
  .access__inner {
    margin-top: 7rem;
    max-width: 85rem;
  }
}

.access__root {
  margin-inline: auto;
  max-width: 92%;
}
@media screen and (min-width: 768px) {
  .access__root {
    margin: unset;
    max-width: none;
  }
}

.access__root p {
  color: #666671;
  font-size: 1.5rem;
}
@media screen and (min-width: 768px) {
  .access__root p {
    font-size: 1.8rem;
  }
}

.access__map {
  margin-top: 3rem;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .access__map {
    margin-top: 4rem;
  }
}

.access__map iframe {
  -o-object-fit: cover;
  -o-object-position: center;
  aspect-ratio: 450/375;
  border: none;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .access__map iframe {
    aspect-ratio: 850/380;
  }
}

.access__dl-wrap {
  position: relative;
}
@media screen and (min-width: 768px) {
  .access__dl-wrap {
    display: flex;
    margin-bottom: 10rem;
  }
}

.access__dl-wrap-inner {
  flex-grow: 1;
}

.sccess__name {
  color: rgba(102, 102, 113, 0.1);
  font-family: "Jost", sans-serif;
  font-size: 20rem;
  font-size: 10.8rem;
  font-weight: 500;
  line-height: 1;
  position: absolute;
  right: 1rem;
  rotate: 180deg;
  top: 0;
  writing-mode: vertical-rl;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .sccess__name {
    color: #FFF;
    display: inline;
    flex-shrink: 1;
    font-size: 22.6rem;
    margin-inline-end: -10rem;
    margin-right: -3rem;
    max-width: 24.2rem;
    position: static;
    z-index: 1;
  }
}

.access__dl {
  margin-inline: auto;
  max-width: 60.4rem;
  padding-top: 5rem;
  position: relative;
}
@media screen and (min-width: 768px) {
  .access__dl {
    margin-left: auto;
    margin-right: 0;
    margin-top: 2rem;
    max-width: 56.4rem;
  }
}

.access__dl div {
  align-items: center;
  display: flex;
  padding: 2rem 1rem;
  position: relative;
}
@media screen and (min-width: 768px) {
  .access__dl div {
    padding: 3rem 0 3rem 10rem;
    z-index: 1;
  }
}

.access__dl div:not(:last-of-type) {
  border-bottom: 0.2rem solid #666671;
}
@media screen and (min-width: 768px) {
  .access__dl div:not(:last-of-type) {
    border-bottom: none;
  }
}

.access__dl div:not(:last-of-type)::before,
.access__dl div:not(:last-of-type)::after {
  content: "";
  display: block;
  position: absolute;
}

@media screen and (min-width: 768px) {
  .access__dl div:not(:last-of-type)::before {
    background-color: #eeeeef;
    bottom: -0.4rem;
    height: 0.4rem;
    right: 50rem;
    width: 100vw;
    z-index: -2;
  }
}

@media screen and (min-width: 768px) {
  .access__dl div:not(:last-of-type)::after {
    background-color: #FFF;
    bottom: -0.2rem;
    height: 0.2rem;
    right: 0;
    width: 100vw;
    z-index: 0;
  }
}

.access__dl dt {
  width: 30%;
}

.access__dl dd {
  color: #666671;
  flex-grow: 1;
  width: 70%;
}
.access__dl dd span {
  display: block;
}
.access__dl dd a {
  color: #2a2aff;
}

.faq .sec-title::before {
  translate: -63% 0;
}

.faq__wrap {
  background-color: #13131f;
  margin-top: 5rem;
  padding-top: 5rem;
}
@media screen and (min-width: 480px) {
  .faq__wrap {
    padding-block: 5rem;
  }
}
@media screen and (min-width: 768px) {
  .faq__wrap {
    background: linear-gradient(90deg, rgb(19, 19, 31) 0%, rgb(19, 19, 31) 80%, rgb(255, 255, 255) 80%);
    margin-top: 10rem;
    padding-block: 10rem;
  }
}

.faq__inner {
  margin-inline: auto;
  max-width: 60.4rem;
  position: relative;
}

.faq__inner::before,
.faq__inner::after {
  content: "";
  display: block;
  position: absolute;
}

.faq__inner::before {
  background: url(../img/faq-icon01.svg) no-repeat center/cover;
  height: 5.7rem;
  left: 1rem;
  max-height: 9rem;
  top: -9rem;
  width: 15.4rem;
}
@media screen and (min-width: 768px) {
  .faq__inner::before {
    height: 6.588579795vw;
    left: -8rem;
    top: -12rem;
    width: 24rem;
  }
}

.faq__inner::after {
  background: url(../img/faq-icon02.svg) no-repeat center/cover;
  height: 9.3rem;
  max-height: 23.7rem;
  right: 3rem;
  top: -21rem;
  width: 7rem;
}
@media screen and (min-width: 768px) {
  .faq__inner::after {
    height: 17.3499267936vw;
    right: -8rem;
    top: -31rem;
    width: 17.8rem;
  }
}

.faq__tab {
  display: flex;
  justify-content: space-between;
  padding-inline: 1.5rem;
}

.faq__tab-menu {
  color: #FFF;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  position: relative;
}
@media screen and (min-width: 768px) {
  .faq__tab-menu {
    font-size: 1.9rem;
    transition: color 0.3s;
  }
}

.faq__tab-menu:hover {
  color: #d9e021;
  cursor: pointer;
}

.faq__tab-menu::after {
  background-color: #FFF;
  content: "";
  display: block;
  height: 0.4rem;
  margin-inline: auto;
  margin-top: 1rem;
  max-width: 6.5rem;
  width: 80%;
}

.faq__tab-menu.current::after {
  background-color: #d9e021;
}

.faq__dl {
  display: none;
}

.faq__dl div:first-of-type {
  margin-top: 4rem;
}

@media screen and (min-width: 768px) {
  .faq__dl div + div {
    margin-top: 2rem;
  }
}

.faq__dl dt,
.faq__dl dd {
  display: flex;
  padding: 1.5rem;
  position: relative;
}
@media screen and (min-width: 768px) {
  .faq__dl dt,
  .faq__dl dd {
    padding: 2rem;
  }
}

.faq__dl dt {
  background-color: #FFF;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.4666666667;
}
@media screen and (min-width: 768px) {
  .faq__dl dt {
    font-size: 2rem;
  }
}

.faq__dl dd {
  color: #FFF;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .faq__dl dd {
    font-size: 1.8rem;
  }
}

.faq__dl dd::before,
.faq__dl dt::before {
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: inline-grid;
  font-family: "Jost", sans-serif;
  font-size: 1.4rem;
  height: 2rem;
  margin-right: 1.5rem;
  place-items: center;
  width: 2rem;
}
@media screen and (min-width: 768px) {
  .faq__dl dd::before,
  .faq__dl dt::before {
    font-size: 2rem;
    height: 3rem;
    margin-right: 2rem;
    width: 3rem;
  }
}

.faq__dl dt::before {
  background-color: #13131f;
  color: #FFF;
  content: "Q";
}

.faq__dl dd::before {
  background-color: #d9e021;
  color: #13131f;
  content: "A";
}

.anime {
  opacity: 0;
  overflow: hidden;
  position: relative;
  transition: opacity 0s ease-in-out;
}

.anime.js-active {
  animation-delay: 0s;
  animation-duration: 0.6s;
  animation-name: text-wrap;
  animation-timing-function: ease-in-out;
  opacity: 1;
}

@keyframes text-wrap {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}
.anime::after {
  background-color: #FFF;
  bottom: 0;
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 999;
}

.anime.js-active::after {
  animation-delay: 0s;
  animation-duration: 0.8s;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-name: text-revealer;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

@keyframes text-revealer {
  0% {
    transform: translateX(-100%) scaleX(0);
    transform-origin: right;
  }
  60% {
    transform: translateX(0) scaleX(1);
    transform-origin: right;
  }
  100% {
    transform: translateX(100%) scaleX(0);
    transform-origin: left;
  }
}
.arrow {
  position: relative;
}

.arrow::after {
  border-right: 1px solid #666671;
  border-top: 1px solid #666671;
  bottom: 50%;
  content: "";
  display: block;
  height: 2.8rem;
  left: 50%;
  position: absolute;
  transform: translate(-50%, 150%) rotate(135deg);
  width: 2.8rem;
}
@media screen and (min-width: 768px) {
  .arrow::after {
    height: 3.8rem;
    width: 3.8rem;
  }
}

.btn-top {
	display: none;
  background-color: #000;
  border: 1px solid #FFF;
  border-radius: 50%;
  bottom: 4rem;
  display: block;
  height: 4rem;
  opacity: 0;
  padding: 1rem;
  pointer-events: none;
  position: fixed;
  right: 3rem;
  transition: opacity 0.3s;
  width: 4rem;
  z-index: 80;
}
@media screen and (min-width: 768px) {
  .btn-top {
    bottom: 5rem;
    height: 5rem;
    right: 7rem;
    transition: background-color 0.3s, border-color 0.3s;
    width: 5rem;
  }
}

@media screen and (min-width: 768px) {
  .btn-top:hover {
    background-color: #FFF;
    border-color: #000;
  }
}

.btn-top.js-active {
  opacity: 1;
  pointer-events: auto;
}

.btn-top::before {
  border-bottom: 2px solid #FFF;
  border-right: 2px solid #FFF;
  content: "";
  display: block;
  height: 1.2rem;
  position: absolute;
  right: 50%;
  top: 1.6rem;
  transform: translateX(50%) rotate(-135deg);
  width: 1.2rem;
}
@media screen and (min-width: 768px) {
  .btn-top::before {
    height: 1.6rem;
    top: 2rem;
    transition: border-color 0.3s;
    width: 1.6rem;
  }
}

@media screen and (min-width: 768px) {
  .btn-top:hover::before {
    border-color: #000;
  }
}

.btn {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 700;
  padding: 1.4rem 1rem 1.4rem;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .btn {
    font-size: 1.6rem;
    transition: all 0.3S ease-in 0s;
  }
}

.footer {
  padding-block: 4rem 2rem;
}
@media screen and (min-width: 768px) {
  .footer {
    padding-block: 6rem 2rem;
  }
}

.footer__logo {
  margin: 0 auto;
  max-width: 12.8rem;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .footer__logo {
    max-width: 16.5rem;
  }
}

.gnav {
  background-color: rgba(0, 0, 0, 0.8);
  height: 100%;
  height: 100vh;
  opacity: 0;
  padding: 2rem;
  padding-top: 9rem;
  pointer-events: none;
  position: relative;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(100%);
  transition: all 0.3s ease-in 0s;
  width: 80%;
  z-index: 110;
}

.gnav.js-active {
  opacity: 1;
  pointer-events: visible;
  transform: translateX(0);
}

.gnav__item {
  border-bottom: 0.5px solid #FFF;
}

.gnav__item a {
  color: #FFF;
  display: block;
  font-weight: 500;
  padding: 1.5rem 0;
  position: relative;
}

.gnav__item a::after {
  background-color: transparent;
  border-right: 2px solid #FFF;
  border-top: 2px solid #FFF;
  content: "";
  display: block;
  height: 0.8rem;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: rotate(45deg) translateY(-50%);
  width: 0.8rem;
}

.gnav__btn {
  margin-top: 3rem;
  text-align: center;
}

.gnav__btn a {
  align-items: center;
  background-color: #049d02;
  border-radius: 0.5rem;
  color: #FFF;
  display: flex;
  justify-content: center;
  padding: 1rem 3rem;
  position: relative;
}

.gnav__btn a::after {
  background-color: #FFF;
  clip-path: polygon(0 0, 0% 100%, 55% 50%);
  content: "";
  display: inline-block;
  height: 1.6rem;
  margin-left: 0.5em;
  width: 1.6rem;
}

.animation {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-top: 10rem;
}
@media screen and (min-width: 768px) {
  .animation {
    background-color: #F2F2F2;
    flex-direction: row;
    justify-content: center;
    padding: 10rem 0;
  }
}

.green,
.green2 {
  background-color: #d9e021;
}

.box {
  align-items: center;
  display: block;
  display: flex;
  height: 30rem;
  justify-content: center;
  margin-top: 2rem;
  width: 30rem;
}

.greenBox {
  background-color: #d9e021;
  border-radius: 5%;
  display: inline-block;
  height: 20rem;
  width: 20rem;
}

svg {
  border: solid 2px black;
  height: 90vh;
  max-height: 300px;
  overflow: visible;
}

#motionPath {
  height: 100%;
  max-width: 100%;
  overflow: visible;
}

#motionPath path {
  stroke-width: 2;
  stroke: gray;
}

#motionPath .astronaut {
  visibility: hidden;
}

.hamburger {
  background-color: #FFF;
  border: 1px solid #666671;
  display: block;
  height: 4rem;
  position: fixed;
  right: 1rem;
  top: 1.5rem;
  transition: all 0.3s ease-in 0s;
  width: 4rem;
  z-index: 120;
}
@media screen and (min-width: 768px) {
  .hamburger {
    display: none;
  }
}

.bar {
  backface-visibility: hidden;
  background-color: #000;
  display: inline-block;
  height: 0.2rem;
  left: 50%;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition-duration: 0.3s;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  width: 2.4rem;
}

.bar:nth-of-type(2) {
  margin-top: -0.8rem;
}

.bar:nth-of-type(3) {
  margin-top: 0.8rem;
}

.hamburger.js-active .bar {
  margin-top: 0;
}

.hamburger.js-active .bar:nth-of-type(1) {
  width: 0;
}

.hamburger.js-active .bar:nth-of-type(2) {
  transform: rotate(45deg) translate(-0.8rem, 0.8rem);
}

.hamburger.js-active .bar:nth-of-type(3) {
  transform: rotate(-45deg) translate(-0.8rem, -0.8rem);
}

.header {
  background-color: #FFF;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 90;
}

.header__inner {
  display: flex;
  justify-content: space-between;
  padding: 1rem 1rem 1rem;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .header__inner {
    margin-inline: auto;
    max-width: 102.8rem;
    padding: 1rem 8% 1rem 2rem;
  }
}

.header__logo {
  color: #666671;
  line-height: 1;
  width: 6rem;
}
@media screen and (min-width: 768px) {
  .header__logo {
    width: 12rem;
  }
}

.header__nav {
  display: none;
}
@media screen and (min-width: 768px) {
  .header__nav {
    display: block;
    margin-top: 1rem;
  }
}

@media screen and (min-width: 768px) {
  .header__nav-list {
    -moz-column-gap: 4rem;
    column-gap: 4rem;
    display: flex;
    justify-content: center;
  }
}

@media screen and (min-width: 768px) {
  .header__nav-item a {
    color: #666671;
    font-family: "Jost", sans-serif;
    font-size: 1.5rem;
    font-weight: 300;
    padding: 1rem 0;
    position: relative;
    transition: opacity 0.3s;
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .header__nav-item a::after {
    background-color: #666671;
    bottom: 0.8rem;
    content: "";
    display: block;
    height: 1px;
    left: 0;
    position: absolute;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: transform 0.3s;
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .header__nav-item a:hover {
    opacity: 1;
  }
}

@media screen and (min-width: 768px) {
  .header__nav-item a:hover::after {
    transform: scale(1, 1);
  }
}

.inner {
  margin-inline: auto;
  max-width: 520px;
  padding-inline: 20px;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .inner {
    max-width: 898px;
    padding-inline: 24px;
  }
}

.sec-padding {
  padding-block: 6rem;
}
@media screen and (min-width: 768px) {
  .sec-padding {
    padding-block: 10rem;
  }
}

.about.sec-padding {
  padding-bottom: 0;
}

.type.sec-padding {
  padding-bottom: 0;
}

.access.sec-padding {
  padding-bottom: 0;
}

.sec-sub-title::first-letter,
.sec-title::first-letter {
  color: #d9e021;
}

.sec-title {
  font-family: "Jost", sans-serif;
  font-size: 4.8rem;
  font-weight: 400;
  line-height: 1;
  position: relative;
  text-align: center;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .sec-title {
    font-size: 9rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1;
  }
}

.sec-title::before {
  background-color: #eeeeef;
  content: "";
  display: block;
  height: 0.15rem;
  left: 50%;
  position: absolute;
  rotate: -65deg;
  top: 50%;
  translate: -70% 0;
  width: 1.5em;
  z-index: -1;
}

.sec-title__lead {
  color: #666671;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.5882352941;
  margin-top: 2rem;
  text-align: center;
  word-break: auto-phrase;
}
@media screen and (min-width: 768px) {
  .sec-title__lead {
    font-size: 2.9rem;
    font-weight: 400;
    line-height: 1.3793103448;
  }
}

.sec-sub-title {
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .sec-sub-title {
    font-size: 3.2rem;
  }
}

.sec-sub-title span::first-letter {
  color: #d9e021;
}

@media screen and (min-width: 768px) {
  .sec-sub-title span {
    font-size: 4.4rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1;
  }
}

.sec-sub-title::after {
  border-right: 1px solid #666671;
  border-top: 1px solid #666671;
  bottom: 50%;
  content: "";
  display: block;
  height: 2.8rem;
  left: 50%;
  position: absolute;
  transform: translate(-50%, 150%) rotate(135deg);
  width: 2.8rem;
}
@media screen and (min-width: 768px) {
  .sec-sub-title::after {
    height: 3.8rem;
    transform: translate(-50%, 200%) rotate(135deg);
    width: 3.8rem;
  }
}

/*# sourceMappingURL=sourcemaps/style.css.map */