@charset "UTF-8";
main {
  height: 300vh;
}

a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

li {
  list-style: none;
}

button {
  color: #000;
  background: transparent;
}

body {
  font-family: "Noto Sans JP", serif;
  background: #fdfdfd;
  font-weight: 400;
  color: #202020;
}

.wrapper {
  overflow: hidden;
}

.inner {
  padding-inline: 20px;
}

.hidden-xl {
  display: block;
}
@media screen and (min-width:1120px) {
  .hidden-xl {
    display: none;
  }
}

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

.header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: #fdfdfd;
}

.header__inner {
  display: grid;
  grid-template-columns: 156px 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-inline: 20px;
  height: 100%;
}
@media screen and (min-width:768px) {
  .header__inner {
    grid-template-columns: 200px 1fr;
    padding-inline: 30px;
    -ms-flex-line-pack: center;
        align-content: center;
  }
}

.header__logo {
  width: 156px;
}
@media screen and (min-width:768px) {
  .header__logo {
    width: 200px;
  }
}
.header__logo img {
  width: 100%;
}

.header__nav {
  display: none;
}
@media screen and (min-width:1120px) {
  .header__nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
    gap: 10px;
  }
}

.header__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}
.header__list li a {
  padding: 15px;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
}
.header__list li:last-child {
  -webkit-padding-start: 10px;
          padding-inline-start: 10px;
  position: relative;
}
.header__list li:last-child::before {
  content: "";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0px;
  width: 1px;
  height: 32px;
  background: #599cc2;
}
@media (any-hover: hover) {
  .header__list li:hover {
    color: #599cc2;
  }
}

.header__btn {
  color: #fdfdfd;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  text-align: center;
  width: 200px;
  padding-block: 16px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 50px;
  background: #599cc2;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media (any-hover: hover) {
  .header__btn:hover {
    color: #599cc2;
    background: #fdfdfd;
    border: 1px solid #599cc2;
  }
}

.drawer__icon {
  position: fixed;
  z-index: 102;
  top: 18px;
  right: 21px;
  width: 44px;
  padding-block: 18px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
  -webkit-transition: translate 0.3s ease;
  transition: translate 0.3s ease;
}
@media screen and (min-width:1120px) {
  .drawer__icon {
    display: none;
  }
}

.drawer__icon--bar {
  width: 30px;
  height: 2px;
  background: #202020;
}

.drawer__icon.js-show {
  -webkit-transition: translate 0.3s ease;
  transition: translate 0.3s ease;
}
.drawer__icon.js-show .drawer__icon--bar:nth-of-type(1) {
  rotate: 45deg;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.drawer__icon.js-show .drawer__icon--bar:nth-of-type(2) {
  rotate: -45deg;
  translate: 0 -7.5px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.drawer {
  position: fixed;
  z-index: 101;
  top: 0;
  right: 0;
  width: 400px;
  height: 100vh;
  height: 100svh;
  background: #fff;
  overflow-y: scroll;
  translate: 101%;
  -webkit-transition: translate 0.5s ease;
  transition: translate 0.5s ease;
}
.drawer.js-show {
  translate: 0;
}
@media screen and (min-width:1120px) {
  .drawer {
    display: none;
  }
}

.drawer__body {
  width: 100%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding-block: 130px;
  padding-inline: 50px;
}

.drawer__list {
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  row-gap: 10px;
  margin-bottom: 40px;
}
.drawer__list li a {
  width: 160px;
  color: #202020;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  padding-block: 10px;
}

.drawer__btn-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 20px;
}

.drawer__btn {
  display: inline-block;
  padding: 14px 10px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-item-align: stretch;
      align-self: stretch;
  border-radius: 50px;
  font-size: 14px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.btn-icon {
  width: 32px;
  height: 32px;
  border-radius: 100%;
  position: relative;
}
.btn-icon::before {
  content: "";
  position: absolute;
  width: 32px;
  height: 32px;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

.btn-text {
  width: calc(100% - 32px);
  display: block;
  font-weight: 700;
  text-align: center;
  line-height: 150%;
  font-size: 14px;
}

.drawer-btn-entry {
  background: #599cc2;
  color: #fdfdfd;
}
.drawer-btn-entry .btn-icon {
  background: #fdfdfd;
}
.drawer-btn-entry .btn-icon::before {
  background: url(../img/entry-btn.svg) center center no-repeat;
}

.drawer-btn-contact {
  border: 1px solid #202020;
  background: #fdfdfd;
}
.drawer-btn-contact .btn-icon {
  background: #202020;
}
.drawer-btn-contact .btn-icon::before {
  background: url(../img/contact-btn.svg) center center no-repeat;
}

.fv {
  -webkit-margin-before: 80px;
          margin-block-start: 80px;
  -webkit-margin-after: 200px;
          margin-block-end: 200px;
  height: 497px;
  background: url(../img/mv-bg-sp.png) center center no-repeat;
  position: relative;
}
.fv .drawer__btn {
  width: auto;
  padding: 12px 9px;
}
.fv .drawer-btn-entry {
  border-radius: 50px;
  border: 2px solid #fdfdfd;
}
.fv .btn-text {
  -webkit-padding-before: 4px;
          padding-block-start: 4px;
}
@media screen and (min-width:768px) {
  .fv {
    -webkit-margin-after: 0;
            margin-block-end: 0;
    height: 678px;
    background: url(../img/mv-bg-pc.png) center center no-repeat;
  }
}

.fv__inner {
  padding-inline: 20px;
  -webkit-padding-after: 50px;
          padding-block-end: 50px;
  position: relative;
}

.fv__head {
  padding-block: 50px 42px;
}
@media screen and (min-width:768px) {
  .fv__head {
    max-width: 1120px;
    margin-inline: auto;
    padding-block: 121px;
    -webkit-padding-start: 20px;
            padding-inline-start: 20px;
  }
}

.fv__title {
  color: #fdfdfd;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 111%;
}
.fv__title span {
  color: #599cc2;
  font-size: 38px;
  font-weight: 700;
}
@media (min-width: 863px) and (max-width: 1116px) {
  .fv__title {
    font-size: 40px;
  }
  .fv__title span {
    font-size: 55px;
  }
}
@media (min-width: 1117px) {
  .fv__title {
    font-size: 52px;
    line-height: 113%;
  }
  .fv__title span {
    font-size: 72px;
  }
}

.fv__text {
  -webkit-padding-before: 10px;
          padding-block-start: 10px;
  color: #fdfdfd;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%;
}
@media screen and (min-width:768px) {
  .fv__text {
    -webkit-padding-before: 20px;
            padding-block-start: 20px;
    font-size: 18px;
    line-height: 150%;
    width: calc(100% - 360px);
  }
}

.fv__circle-container {
  -webkit-padding-before: 12px;
          padding-block-start: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (min-width:768px) {
  .fv__circle-container {
    -webkit-padding-before: 29px;
            padding-block-start: 29px;
  }
}

.fv__circle {
  width: 68px;
  height: 68px;
  color: #fdfdfd;
  font-size: 13px;
  font-weight: 700;
  line-height: 150%;
  border: 1px solid #fdfdfd;
  border-radius: 100vmax;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  -webkit-padding-before: 1px;
          padding-block-start: 1px;
}
.fv__circle:nth-of-type(1) {
  -webkit-padding-end: 3px;
          padding-inline-end: 3px;
}
@media screen and (min-width:768px) {
  .fv__circle {
    width: 102px;
    height: 102px;
    font-size: 24px;
  }
}
.fv__circle:nth-of-type(n + 2)::before {
  content: "";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: -12px;
  width: 21.569px;
  height: 21.569px;
  background: url(../img/batu-sp.svg) center center no-repeat;
}
@media screen and (min-width:768px) {
  .fv__circle:nth-of-type(n + 2) {
    font-size: 18px;
  }
  .fv__circle:nth-of-type(n + 2)::before {
    width: 31.907px;
    height: 31.907px;
    left: -17px;
    background: url(../img/batu.svg) center center no-repeat;
  }
}

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

.fv__signupform {
  display: none;
}
@media screen and (min-width:768px) {
  .fv__signupform {
    display: block;
    position: absolute;
    content: "";
    top: 50px;
    right: 50px;
    width: 320px;
    height: 474px;
    padding: 30px 20px;
    background: #fdfdfd;
  }
}
@media screen and (min-width: 1440px) {
  .fv__signupform {
    left: calc(50% + 350px);
  }
}
.fv__signupform input[type=email],
.fv__signupform input[type=password] {
  padding: 12px 10px;
  border-radius: 5px;
  border: 1px solid #d9d9d9;
  background: #f5f5f5;
  font-size: 12px;
  line-height: 150%;
}

.fv-contact__form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
}

.fv-contact__row {
  width: 236px;
  margin-inline: auto;
}

.fv-contact__head {
  font-size: 12px;
  line-height: 150%;
  -webkit-padding-after: 4px;
          padding-block-end: 4px;
}
.fv-contact__head span {
  font-weight: 700;
}

.fv-contact__data {
  height: 42px;
}

.fv-contact__acceptance {
  font-size: 12px;
  line-height: 150%;
  -webkit-padding-before: 5px;
          padding-block-start: 5px;
}
.fv-contact__acceptance a {
  color: #599cc2;
}

.fv-contact__submit .drawer__btn {
  padding: 9px 10px;
}

@media (any-hover: hover) {
  .fv-btn-entry:hover {
    color: #599cc2;
    background: #fdfdfd;
    border: 2px solid #599cc2;
  }
}

.or-section {
  padding-block: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}

.line {
  width: 102px;
  height: 1px;
  background: #202020;
}

@media (any-hover: hover) {
  .fv-btn-contact:hover {
    color: #fdfdfd;
    background: #202020;
  }
}

.fv__problem {
  padding-block: 32px;
  background-color: #fdfdfd;
}
@media screen and (min-width:768px) {
  .fv__problem {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    bottom: -101px;
    -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);
            box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);
    z-index: 10;
    width: 900px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 84px;
    padding-block: 30px;
  }
}

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

.fv-problem__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
}

.fv-problem__title {
  color: #202020;
  font-size: 18px;
  font-weight: 700;
  line-height: 180%;
  text-align: center;
}
@media screen and (min-width:768px) {
  .fv-problem__title {
    font-size: 24px;
  }
}

.fv-problem__lists {
  margin-inline: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 5px;
}
@media screen and (min-width:768px) {
  .fv-problem__lists {
    gap: 12px;
  }
}

.fv-problem__list {
  -webkit-padding-start: 28px;
          padding-inline-start: 28px;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%;
  position: relative;
}
.fv-problem__list::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
  background: url(../img/vector-21.svg) center center no-repeat;
}
@media screen and (min-width:768px) {
  .fv-problem__list {
    line-height: 150%;
  }
}

.reason {
  background: #f5f5f5;
  padding-block: 50px 52px;
}
@media screen and (min-width:768px) {
  .reason {
    padding-block: 204px 100px;
  }
}

.c-section__head {
  text-align: center;
}

.reason__head {
  -webkit-padding-after: 30px;
          padding-block-end: 30px;
}
@media screen and (min-width:768px) {
  .reason__head {
    -webkit-padding-after: 70px;
            padding-block-end: 70px;
  }
}

.c-section__title-en {
  font-family: "Roboto", sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 100%;
}
@media screen and (min-width:768px) {
  .c-section__title-en {
    font-size: 62px;
  }
}

.c-section__title-ja {
  font-size: 16px;
  line-height: 180%;
}
@media screen and (min-width:768px) {
  .c-section__title-ja {
    font-size: 18px;
    line-height: 150%;
  }
}

.c-reason__contentarea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 50px;
}
@media screen and (min-width:768px) {
  .c-reason__contentarea {
    gap: 72px;
  }
}

.c-reason__content {
  position: relative;
}
@media screen and (min-width:768px) {
  .c-reason__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-block: 35px 36px;
    -webkit-column-gap: 52px;
       -moz-column-gap: 52px;
            column-gap: 52px;
  }
}
@media screen and (min-width:768px) {
  .c-reason__content:nth-of-type(1) {
    -webkit-padding-end: 140px;
            padding-inline-end: 140px;
  }
}
@media screen and (min-width:768px) {
  .c-reason__content:nth-of-type(1) .c-content__image {
    width: 457px;
  }
}
@media screen and (min-width:768px) {
  .c-reason__content:nth-of-type(2) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-padding-start: 140px;
            padding-inline-start: 140px;
  }
}
@media screen and (min-width:768px) {
  .c-reason__content:nth-of-type(2) .c-content__bg-box {
    right: auto;
    left: -20px;
  }
}
@media screen and (min-width:768px) {
  .c-reason__content:nth-of-type(3) {
    -webkit-padding-end: 140px;
            padding-inline-end: 140px;
  }
}

.c-content__image {
  z-index: 2;
}
@media screen and (min-width:768px) {
  .c-content__image {
    max-width: 475px;
    height: 329px;
  }
}
@media screen and (min-width:768px) {
  .c-content__image img {
    -o-object-fit: cover;
       object-fit: cover;
    height: 329px;
  }
}

.c-content__textarea {
  -webkit-padding-before: 27px;
          padding-block-start: 27px;
  z-index: 2;
}
@media screen and (min-width:768px) {
  .c-content__textarea {
    padding-inline: 50px;
    -webkit-padding-before: 4px;
            padding-block-start: 4px;
    min-height: 262px;
  }
}

.c-content__reason-number {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 100%;
  color: #599cc2;
}
@media screen and (min-width:768px) {
  .c-content__reason-number {
    font-size: 18px;
    line-height: 150%;
  }
}

.c-content__title {
  display: inline-block;
  -webkit-padding-before: 6px;
          padding-block-start: 6px;
  font-size: 24px;
  font-weight: 700;
  line-height: 180%;
  -webkit-padding-after: 20px;
          padding-block-end: 20px;
  border-bottom: 3px solid #599cc2;
}
@media screen and (min-width:768px) {
  .c-content__title {
    max-width: 460px;
    font-size: 24px;
    line-height: 150%;
    -webkit-padding-before: 0;
            padding-block-start: 0;
  }
}

.c-content__text {
  -webkit-padding-before: 20px;
          padding-block-start: 20px;
  font-size: 16px;
  font-weight: 400;
  line-height: 180%;
}
@media screen and (min-width:768px) {
  .c-content__text {
    line-height: 150%;
    max-width: 460px;
  }
}

.c-content__bg-box {
  display: none;
}
@media screen and (min-width:768px) {
  .c-content__bg-box {
    display: block;
    position: absolute;
    content: "";
    top: 0;
    right: -20px;
    width: calc(100% - 400px);
    height: 400px;
    background: #fdfdfd;
  }
}

.pickup {
  background: url(../img/pickup-bg.png) center center no-repeat;
  -webkit-padding-after: 88px;
          padding-block-end: 88px;
}
@media screen and (min-width:768px) {
  .pickup {
    background: url(../img/pickup-bg-pc.png) center center no-repeat;
    -webkit-padding-after: 182px;
            padding-block-end: 182px;
  }
}

.pickup__head {
  color: #fdfdfd;
  padding-block: 50px;
}
@media screen and (min-width:768px) {
  .pickup__head {
    padding-block: 100px 70px;
  }
}

.pickup__swiper-container,
.pickup__swiper,
.pickup__swiper-wrapper,
.pickup__swiper-slide {
  position: relative;
}

.pickup__swiper-container {
  padding-inline: 20px;
}

@media screen and (min-width:768px) {
  .pickup__swiper {
    max-width: 966px;
  }
}

.pickup__swiper-wrapper {
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
}

.pickup__swiper-slide {
  width: 300px;
  min-height: 392px;
  background: #fdfdfd;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
  border-radius: 15px;
  -webkit-padding-after: 30px;
          padding-block-end: 30px;
}
@media screen and (min-width:768px) {
  .pickup__swiper-slide {
    min-height: 367px;
  }
}

.p-slide__image {
  width: 100%;
}
.p-slide__image img {
  width: 100%;
  height: 168.8px;
  border-radius: 15px 15px 0 0;
}

.slide__head {
  font-size: 16px;
  line-height: 180%;
}
@media screen and (min-width:768px) {
  .slide__head {
    line-height: 150%;
  }
}

.slide__text {
  width: 240px;
  font-size: 14px;
  line-height: 180%;
}
@media screen and (min-width:768px) {
  .slide__text {
    line-height: 150%;
  }
}

.swiper-button-prev,
.swiper-button-next,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  top: unset;
  bottom: unset;
  left: unset;
  right: unset;
  margin: 0;
  padding: 0;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  content: "";
}

.swiper-button-prev,
.swiper-button-next {
  display: none;
}
@media screen and (min-width:768px) {
  .swiper-button-prev,
  .swiper-button-next {
    display: block;
    top: 50%;
    translate: 0 -50%;
    width: 42px;
    height: 42px;
  }
  .swiper-button-prev svg,
  .swiper-button-next svg {
    width: 100%;
    height: 100%;
  }
}

.swiper-button-prev {
  left: 160px;
}

.swiper-button-next {
  right: 160px;
}

.swiper-pagination-bullets.swiper-pagination-horizontal {
  top: calc(100% + 18px);
  -webkit-padding-end: 41px;
          padding-inline-end: 41px;
}
@media screen and (min-width:768px) {
  .swiper-pagination-bullets.swiper-pagination-horizontal {
    top: calc(100% + 64px);
  }
}

.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet {
  opacity: 1;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f5f5f5;
  margin-inline: 4px;
}
@media screen and (min-width:768px) {
  .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    margin-inline: 6px;
  }
}

.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet-active {
  background: #599cc2;
}

.cta {
  background: -webkit-gradient(linear, left top, left bottom, from(#599cc2), to(#8bbfdd));
  background: linear-gradient(180deg, #599cc2 0%, #8bbfdd 100%);
  position: relative;
}
.cta .drawer__btn {
  padding: 8px 12px;
  max-width: 385px;
}
@media screen and (min-width:1120px) {
  .cta .drawer__btn {
    -webkit-margin-start: 58px;
            margin-inline-start: 58px;
  }
}

.cta__content-area {
  padding-block: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 30px;
}
@media screen and (min-width:768px) {
  .cta__content-area {
    padding-block: 100px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 30px;
    max-width: 1120px;
    margin-inline: auto;
  }
}

.cta__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 18px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 15px;
  -ms-flex-item-align: stretch;
      align-self: stretch;
  border-radius: 15px;
  border: 1px solid #fdfdfd;
  background: #fdfdfd;
  z-index: 2;
}
@media screen and (min-width:768px) {
  .cta__content {
    padding: 50px 20px;
    gap: 32px;
    width: calc((100% - 30px) / 2);
  }
}
.cta__content:nth-of-type(2) .cta__text {
  position: relative;
  -webkit-padding-start: 40px;
          padding-inline-start: 40px;
  -webkit-padding-before: 2px;
          padding-block-start: 2px;
}
.cta__content:nth-of-type(2) .cta__text::before {
  content: "";
  position: absolute;
  top: 53%;
  translate: 0 -50%;
  left: 0;
  width: 40px;
  height: 40px;
  background: url(../img/icon-present.svg) no-repeat center center/cover;
}
@media screen and (min-width:768px) {
  .cta__content:nth-of-type(2) .cta__text {
    -webkit-padding-start: 50px;
            padding-inline-start: 50px;
  }
  .cta__content:nth-of-type(2) .cta__text::before {
    width: 50px;
    height: 50px;
  }
}
.cta__content:nth-of-type(2) .drawer__btn {
  padding: 7px 12px;
}
@media screen and (min-width:768px) {
  .cta__content:nth-of-type(2) {
    padding: 46px 20px 50px;
  }
}

.cta__text {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 180%;
}
@media screen and (min-width:768px) {
  .cta__text {
    font-size: 18px;
    line-height: 150%;
  }
}

.cta-btn-entry {
  border: 1px solid #fdfdfd;
}
.cta-btn-entry:hover {
  color: #599cc2;
  background: #fdfdfd;
  border: 1px solid #599cc2;
}

@media (any-hover: hover) {
  .cta-btn-contact:hover {
    color: #fdfdfd;
    background: #202020;
  }
}

@media screen and (min-width: 441px) and (max-width: 767px) {
  .cta-btn-entry,
  .cta-btn-contact {
    min-width: 385px;
    margin-inline: auto;
  }
}

.cta__logo {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 77.756px;
  background: url(../img/cta-logo-yoko-white.png) center center no-repeat;
  background-size: contain;
}
@media screen and (min-width:768px) {
  .cta__logo {
    background: url(../img/cta-logo-yoko-white-pc.png) center center no-repeat;
    background-size: contain;
    height: 261px;
  }
}

.function {
  position: relative;
  background: #f5f5f5;
  -webkit-padding-after: 50px;
          padding-block-end: 50px;
}
@media screen and (min-width:768px) {
  .function {
    -webkit-padding-after: 100px;
            padding-block-end: 100px;
  }
}

.funtion__head {
  -webkit-padding-before: 50px;
          padding-block-start: 50px;
}
@media screen and (min-width:768px) {
  .funtion__head {
    -webkit-padding-before: 100px;
            padding-block-start: 100px;
  }
}

.function__contents {
  -webkit-padding-before: 30px;
          padding-block-start: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 30px;
}
@media screen and (min-width:768px) {
  .function__contents {
    -webkit-padding-before: 70px;
            padding-block-start: 70px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    max-width: 900px;
    margin-inline: auto;
  }
}

.functon__content {
  border-radius: 5px;
  border: 1px solid #f5f5f5;
  background: #fdfdfd;
  -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
          box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 31px 30px 30px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 12px;
}
@media screen and (min-width:768px) {
  .functon__content {
    width: calc((100% - 32px) / 2);
    padding: 28px 30px 30px;
  }
}
.functon__content:nth-of-type(2) .function__title::before {
  background: url(../img/function-2.svg) no-repeat center center/cover;
}
.functon__content:nth-of-type(3) .function__title::before {
  background: url(../img/function-3.svg) no-repeat center center/cover;
}
.functon__content:nth-of-type(4) .function__title::before {
  background: url(../img/function-4.svg) no-repeat center center/cover;
}
.functon__content:nth-of-type(5) .function__title::before {
  background: url(../img/function-5.svg) no-repeat center center/cover;
}
.functon__content:nth-of-type(6) {
  padding: 29px 30px 28px;
}
.functon__content:nth-of-type(6) .function__title::before {
  background: url(../img/function-6.svg) no-repeat center center/cover;
}
.functon__content:nth-of-type(7) .function__title::before {
  background: url(../img/function-7.svg) no-repeat center center/cover;
}

.function__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 180%;
  -webkit-padding-start: 46px;
          padding-inline-start: 46px;
  position: relative;
}
.function__title::before {
  content: "";
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  left: 0;
  width: 36px;
  height: 36px;
  background: url(../img/fuction-1.svg) no-repeat center center/cover;
}
@media screen and (min-width:768px) {
  .function__title {
    font-size: 24px;
    line-height: 150%;
  }
}

.function__text {
  font-size: 14px;
  line-height: 180%;
}
@media screen and (min-width:768px) {
  .function__text {
    line-height: 150%;
  }
}

.price {
  background: #fdfdfd;
  padding-block: 50px;
}
@media screen and (min-width:768px) {
  .price {
    padding-block: 103px 100px;
  }
}

.price__inner {
  position: relative;
}

.price__head {
  -webkit-padding-after: 30px;
          padding-block-end: 30px;
}
@media screen and (min-width:768px) {
  .price__head {
    -webkit-padding-after: 62px;
            padding-block-end: 62px;
  }
}

.plan-group__wrap {
  padding-block: 13px 10px;
  width: 100%;
  overflow-x: auto;
  position: relative;
}

.price__plan-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-inline: auto;
}
@media (max-width: 862px) {
  .price__plan-group {
    width: auto;
    min-width: 100%;
  }
}
@media (min-width: 863px) and (max-width: 1116px) {
  .price__plan-group .plan-group__head-wrap {
    width: 375px;
  }
}
@media (min-width: 1117px) {
  .price__plan-group {
    width: auto;
    max-width: 1116px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .price__plan-group .plan-group__head-wrap {
    width: 375px;
  }
}

.scrollright-text {
  position: absolute;
  color: #000;
  top: 70px;
  right: 40.5px;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
}
@media screen and (min-width:768px) {
  .scrollright-text {
    display: none;
  }
}

.scrollright-arrow {
  position: absolute;
  top: 67px;
  right: 20px;
  width: 100px;
  height: 2px;
  background: #000;
  -webkit-animation: 2s 0s ease-in-out backwards infinite scrollDown;
          animation: 2s 0s ease-in-out backwards infinite scrollDown;
}
.scrollright-arrow::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 15px;
  height: 2px;
  background: #000;
  rotate: 45deg;
  -webkit-transform-origin: right top;
          transform-origin: right top;
}
@-webkit-keyframes scrollDown {
  0% {
    right: 20px;
    width: 100px;
  }
  10% {
    right: 20px;
    width: 100px;
  }
  90% {
    right: 0px;
    width: 120px;
  }
  100% {
    right: 0px;
    width: 120px;
  }
}
@keyframes scrollDown {
  0% {
    right: 20px;
    width: 100px;
  }
  10% {
    right: 20px;
    width: 100px;
  }
  90% {
    right: 0px;
    width: 120px;
  }
  100% {
    right: 0px;
    width: 120px;
  }
}
@media screen and (min-width:768px) {
  .scrollright-arrow {
    display: none;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
}

.plan-group__head-group {
  width: 232px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.plan-group__head-wrap {
  position: sticky;
  left: 0;
  background: #fdfdfd;
  z-index: 3;
}
.plan-group__head-wrap .head-group {
  min-width: 150px;
  width: auto;
  -webkit-padding-end: 4px;
          padding-inline-end: 4px;
}
@media screen and (min-width:768px) {
  .plan-group__head-wrap .head-group {
    -webkit-padding-end: 0;
            padding-inline-end: 0;
  }
}

.space {
  width: 150px;
  height: 383px;
  padding: 10px;
  -webkit-margin-before: 6px;
          margin-block-start: 6px;
}
@media screen and (min-width:768px) {
  .space {
    width: auto;
    height: 371px;
  }
}

.price__heading {
  text-align: center;
}

.price__title {
  font-size: 14px;
  font-weight: 400;
  line-height: 180%;
  padding-block: 5px;
}
.price__title:nth-of-type(2n + 1) {
  background: #f5f5f5;
}
@media screen and (min-width:768px) {
  .price__title {
    font-size: 16px;
    line-height: 150%;
    padding-block: 10px;
  }
}

.free-plan {
  border: 6px solid #599cc2;
}
@media screen and (min-width:768px) {
  .free-plan {
    -webkit-margin-start: 14px;
            margin-inline-start: 14px;
  }
}

.plan-group__inner {
  padding: 30px 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-item-align: stretch;
      align-self: stretch;
  gap: 16px;
}

.plan-group__title {
  text-align: center;
  max-height: 61px;
}

.c-title_ja {
  font-size: 18px;
  font-weight: 700;
  line-height: 180%;
}
@media screen and (min-width:768px) {
  .c-title_ja {
    line-height: 150%;
  }
}

.c-title_en {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
}
@media screen and (min-width:768px) {
  .c-title_en {
    font-size: 18px;
    line-height: 150%;
  }
}

.plan-group__text {
  font-size: 14px;
  font-weight: 400;
  line-height: 180%;
  min-height: 100px;
}
@media screen and (min-width:768px) {
  .plan-group__text {
    font-size: 16px;
    line-height: 150%;
  }
}

.plan-group__price {
  position: relative;
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 150%;
  -webkit-padding-start: 22.36px;
          padding-inline-start: 22.36px;
}
.plan-group__price::before {
  content: "￥";
  position: absolute;
  bottom: 12px;
  left: 64.82px;
  width: 18px;
  height: 27px;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
}

.c-price__button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-block: 16px;
  height: 42px;
  border-radius: 50px;
  border: 1px solid #599cc2;
  background: #fdfdfd;
}
.c-price__button span {
  font-size: 14px;
  font-weight: 700;
  line-height: 180%;
  color: #599cc2;
}
@media (any-hover: hover) {
  .c-price__button:hover {
    background: #599cc2;
    border: 1px solid #fdfdfd;
  }
  .c-price__button:hover span {
    color: #fdfdfd;
  }
}

.c-price__button-free {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-block: 16px;
  height: 42px;
  border-radius: 50px;
  background: #599cc2;
}
.c-price__button-free span {
  font-size: 14px;
  font-weight: 700;
  line-height: 180%;
  color: #fdfdfd;
}
@media (any-hover: hover) {
  .c-price__button-free:hover {
    background: #fdfdfd;
    border: 1px solid #599cc2;
  }
  .c-price__button-free:hover span {
    color: #599cc2;
  }
}

.price__checkbox {
  height: 35px;
}
.price__checkbox:nth-of-type(2n + 1) {
  background: #f5f5f5;
}
.price__checkbox:nth-of-type(6) {
  -webkit-padding-before: 13.5px;
          padding-block-start: 13.5px;
  height: 60px;
}
@media screen and (min-width:1120px) {
  .price__checkbox:nth-of-type(6) {
    -webkit-padding-before: 6px;
            padding-block-start: 6px;
  }
}
@media screen and (min-width:1120px) {
  .price__checkbox:nth-of-type(6) {
    height: 44px;
  }
}
@media screen and (min-width:768px) {
  .price__checkbox {
    height: 44px;
  }
}

.personal-plan {
  -webkit-margin-start: 8px;
          margin-inline-start: 8px;
  border: 6px solid #a1a1a1;
}
.personal-plan .plan-group__price::before, .personal-plan .plan-group__price::after {
  content: "";
  position: absolute;
  bottom: 12px;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
  font-family: "Noto Sans JP", serif;
}
.personal-plan .plan-group__price::before {
  content: "月額￥";
  left: 0;
  width: 54px;
}
.personal-plan .plan-group__price::after {
  content: "/1ID";
  width: 35px;
  height: 27px;
  right: 0;
}

.business-plan {
  -webkit-margin-start: 8px;
          margin-inline-start: 8px;
  border: 6px solid #dcdcdc;
}
.business-plan .plan-group__price {
  font-size: 18px;
  padding: 9px 10px;
}
.business-plan .plan-group__price::before {
  content: "";
  position: absolute;
}

.price__about-business {
  -webkit-padding-before: 32px;
          padding-block-start: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
}
@media screen and (min-width:768px) {
  .price__about-business {
    -webkit-padding-before: 60px;
            padding-block-start: 60px;
    padding-inline: 20px;
    max-width: 900px;
    margin-inline: auto;
  }
}

.about-business__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 180%;
  border-bottom: 1px solid #599cc2;
}
@media screen and (min-width:768px) {
  .about-business__title {
    font-size: 18px;
  }
}

.about-business__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 180%;
}
@media screen and (min-width:768px) {
  .about-business__text {
    line-height: 150%;
  }
}
.about-business__text span {
  font-weight: 700;
  color: #599cc2;
}

.faq {
  padding-block: 50px;
  background: #f5f5f5;
}
@media screen and (min-width:768px) {
  .faq {
    padding-block: 100px;
  }
}

.faq__items {
  -webkit-padding-before: 31px;
          padding-block-start: 31px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  row-gap: 31px;
}
@media screen and (min-width:768px) {
  .faq__items {
    -webkit-padding-before: 70px;
            padding-block-start: 70px;
    row-gap: 24px;
    max-width: 900px;
    margin-inline: auto;
  }
}

details {
  padding: 20px;
  border-radius: 15px;
  background: #fdfdfd;
  -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
          box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
@media (any-hover: hover) {
  details:hover {
    cursor: pointer;
  }
}
@media screen and (min-width:768px) {
  details {
    padding: 30px 50px;
  }
}
@media screen and (min-width:768px) {
  details:nth-of-type(4) .faq__question-text {
    padding-block: 0;
  }
}

summary {
  display: block;
}
summary::-webkit-details-marker {
  display: none;
}

.faq__question {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 6px;
}
@media screen and (min-width:768px) {
  .faq__question {
    -webkit-padding-after: 12px;
            padding-block-end: 12px;
    -webkit-border-after: 2px solid #599cc2;
            border-block-end: 2px solid #599cc2;
  }
}

.faq__question-text {
  font-size: 16px;
  font-weight: 700;
  line-height: 180%;
  -webkit-padding-start: 21px;
          padding-inline-start: 21px;
  position: relative;
  max-width: calc(100% - 30px);
}
.faq__question-text::before {
  content: "Q.";
  position: absolute;
  width: 16px;
  top: 0;
  left: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 180%;
  color: #599cc2;
}
@media screen and (min-width:768px) {
  .faq__question-text {
    font-size: 18px;
    line-height: 150%;
    -webkit-padding-start: 29px;
            padding-inline-start: 29px;
    padding-block: 4.5px;
  }
  .faq__question-text::before {
    width: 24px;
    font-size: 24px;
    top: 50%;
    translate: 0 -50%;
  }
}

.faq__answer {
  display: block;
}

.faq__answer-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 180%;
  -webkit-padding-start: 21px;
          padding-inline-start: 21px;
  -webkit-padding-before: 20px;
          padding-block-start: 20px;
  position: relative;
}
.faq__answer-text::before {
  content: "A.";
  position: absolute;
  width: 16px;
  top: 20px;
  left: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 180%;
  color: #599cc2;
}
@media screen and (min-width:768px) {
  .faq__answer-text {
    font-size: 14px;
    line-height: 150%;
    -webkit-padding-start: 29px;
            padding-inline-start: 29px;
    -webkit-padding-before: 12px;
            padding-block-start: 12px;
  }
  .faq__answer-text::before {
    width: 24px;
    font-size: 24px;
    top: 50%;
    translate: 0 -50%;
  }
}

.faq__icon {
  position: relative;
  display: block;
  width: 24px;
  height: auto;
  aspect-ratio: 1;
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  background: #599cc2;
}
.faq__icon::before {
  width: 100%;
  height: 2.6px;
}
.faq__icon::after {
  left: calc(50% - 1px);
  width: 2.6px;
  height: 100%;
  -webkit-transition: rotate 0.3s ease;
  transition: rotate 0.3s ease;
}
@media screen and (min-width:768px) {
  .faq__icon {
    display: none;
  }
}

details[open] .faq__icon::after {
  rotate: 90deg;
}

.vision {
  padding-block: 50px;
  background: url(../img/vision-background.jpg) no-repeat center center/cover;
}
@media screen and (min-width:768px) {
  .vision {
    padding-block: 100px 121px;
  }
}

.vision__head {
  -webkit-padding-after: 30px;
          padding-block-end: 30px;
}
@media screen and (min-width:768px) {
  .vision__head {
    -webkit-padding-after: 70px;
            padding-block-end: 70px;
  }
}

.vison__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 50px;
}
@media screen and (min-width:768px) {
  .vison__contents {
    gap: 120px;
    padding-inline: 50px;
    max-width: 1120px;
    margin-inline: auto;
  }
}

.vision__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 30px;
}
@media screen and (min-width:768px) {
  .vision__content:nth-of-type(2) .vision__image {
    padding-block: 19px;
  }
}
.vision__content:nth-of-type(3) .vision__text {
  line-height: 150%;
}
.vision__content:nth-of-type(3) .vision__text + .vision__text {
  -webkit-padding-before: 15px;
          padding-block-start: 15px;
}
@media screen and (min-width:768px) {
  .vision__content:nth-of-type(3) .vision__text + .vision__text {
    -webkit-padding-before: 20px;
            padding-block-start: 20px;
  }
}
@media screen and (min-width:768px) {
  .vision__content:nth-of-type(3) .vision__image {
    padding-block: 19px;
  }
}
@media screen and (min-width:768px) {
  .vision__content {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    gap: 50px;
  }
  .vision__content:nth-of-type(2) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

.vision__image {
  width: 398px;
  height: 216px;
  margin-inline: auto;
}
.vision__image img {
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width:768px) {
  .vision__image {
    -webkit-box-shadow: none;
            box-shadow: none;
    min-width: 300px;
    padding-block: 41px;
  }
}

.vision__text-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  row-gap: 20px;
}
@media screen and (min-width:768px) {
  .vision__text-content {
    max-width: 570px;
    row-gap: 30px;
  }
}

.vision__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 180%;
  color: #599cc2;
}
@media screen and (min-width:768px) {
  .vision__title {
    font-size: 32px;
    line-height: 150%;
  }
}

.vision__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 180%;
}
@media screen and (min-width:768px) {
  .vision__text {
    line-height: 150%;
  }
}

.vision__text + .vision__text {
  -webkit-padding-before: 17px;
          padding-block-start: 17px;
}
@media screen and (min-width:768px) {
  .vision__text + .vision__text {
    -webkit-padding-before: 20px;
            padding-block-start: 20px;
  }
}

.company {
  padding-block: 50px;
  color: #fdfdfd;
  background: url(../img/company-background.png) no-repeat center center/cover;
}
@media screen and (min-width:768px) {
  .company {
    padding-block: 100px;
  }
}

.company__informations {
  -webkit-padding-before: 30px;
          padding-block-start: 30px;
}
@media screen and (min-width:768px) {
  .company__informations {
    -webkit-padding-before: 70px;
            padding-block-start: 70px;
    max-width: 900px;
    margin-inline: auto;
  }
}

.company__information {
  padding-block: 7px 8px;
  border-bottom: 1px solid #fdfdfd;
}
@media screen and (min-width:768px) {
  .company__information {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
}
.company__information:nth-of-type(2) {
  -webkit-padding-before: 15px;
          padding-block-start: 15px;
}
.company__information:nth-of-type(2) .address {
  -webkit-padding-before: 10px;
          padding-block-start: 10px;
}
@media screen and (min-width:768px) {
  .company__information:nth-of-type(2) {
    -webkit-padding-before: 8px;
            padding-block-start: 8px;
  }
  .company__information:nth-of-type(2) .address {
    -webkit-padding-before: 0;
            padding-block-start: 0;
  }
}

.information__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 180%;
  padding: 10px;
}
@media screen and (min-width:768px) {
  .information__title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 200px;
    line-height: 150%;
  }
}

.information__text {
  padding: 10px;
  font-size: 16px;
  font-weight: 400;
  line-height: 180%;
}
@media screen and (min-width:768px) {
  .information__text {
    line-height: 150%;
  }
}

.information__members .information__text {
  padding: 5px 10px;
}
@media screen and (min-width:768px) {
  .information__members .information__text {
    padding: 10px;
  }
}

.information__member {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.information__member .information__text:nth-of-type(1) {
  width: 150px;
}

.contact {
  padding-block: 50px;
}
@media screen and (min-width:768px) {
  .contact {
    padding-block: 100px;
  }
}

.contact__desc {
  padding-block: 30px;
  font-size: 16px;
  font-weight: 400;
  line-height: 180%;
}
@media screen and (min-width:768px) {
  .contact__desc {
    width: 700px;
    margin-inline: auto;
    padding-block: 70px 47px;
    line-height: 150%;
  }
}

.contact__form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  row-gap: 20px;
}
@media screen and (min-width:768px) {
  .contact__form {
    max-width: 900px;
    margin-inline: auto;
    row-gap: 20px;
  }
}

.contact__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  row-gap: 9px;
}

@media screen and (min-width:768px) {
  .contact__row + .contact__row {
    -webkit-padding-before: 12px;
            padding-block-start: 12px;
  }
}

.contact__head {
  font-size: 18px;
  -webkit-padding-start: 56px;
          padding-inline-start: 56px;
}
@media screen and (min-width:768px) {
  .contact__head {
    height: 28px;
    -webkit-padding-start: 53px;
            padding-inline-start: 53px;
  }
}
.contact__head span.--must {
  font-weight: 700;
  line-height: 180%;
  position: relative;
  display: inline-block;
}
.contact__head span.--must::before {
  content: "";
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  left: -56px;
  width: 48px;
  height: 20px;
  background: #599cc2;
  padding: 5px 10px;
}
.contact__head span.--must::after {
  content: "必須";
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  left: -46px;
  font-size: 14px;
  font-weight: 700;
  line-height: 180%;
  color: #fdfdfd;
}
@media screen and (min-width:768px) {
  .contact__head {
    line-height: 150%;
  }
  .contact__head span.--must::before {
    content: "";
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    left: -55px;
    width: 44px;
    height: 28px;
    background: #599cc2;
    padding: 5px 10px;
  }
  .contact__head span.--must::after {
    top: 50%;
    left: -45px;
    font-size: 12px;
    font-weight: 400;
    line-height: 150%;
  }
}

input[type=text],
input[type=email],
input[type=password],
input[type=phone-number],
select,
textarea {
  border-radius: 0;
  border: 1px solid #d9d9d9;
  background: #fdfdfd;
  width: 100%;
  -webkit-padding-start: 20px;
          padding-inline-start: 20px;
  font-family: "Noto Sans JP";
  font-size: 16px;
  font-weight: 400;
  line-height: 180%;
  height: 46px;
}
input[type=text]::-webkit-input-placeholder, input[type=email]::-webkit-input-placeholder, input[type=password]::-webkit-input-placeholder, input[type=phone-number]::-webkit-input-placeholder, select::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #a1a1a1;
}
input[type=text]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=phone-number]::-moz-placeholder, select::-moz-placeholder, textarea::-moz-placeholder {
  color: #a1a1a1;
}
input[type=text]:-ms-input-placeholder, input[type=email]:-ms-input-placeholder, input[type=password]:-ms-input-placeholder, input[type=phone-number]:-ms-input-placeholder, select:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #a1a1a1;
}
input[type=text]::-ms-input-placeholder, input[type=email]::-ms-input-placeholder, input[type=password]::-ms-input-placeholder, input[type=phone-number]::-ms-input-placeholder, select::-ms-input-placeholder, textarea::-ms-input-placeholder {
  color: #a1a1a1;
}
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=password]::placeholder,
input[type=phone-number]::placeholder,
select::placeholder,
textarea::placeholder {
  color: #a1a1a1;
}
@media screen and (min-width:768px) {
  input[type=text],
  input[type=email],
  input[type=password],
  input[type=phone-number],
  select,
  textarea {
    line-height: 150%;
  }
}

textarea {
  height: 92px;
  resize: vertical;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

.contact__select-wrap {
  position: relative;
}
.contact__select-wrap svg {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  right: 15.17px;
  pointer-events: none;
}
@media (any-hover: hover) {
  .contact__select-wrap svg:hover {
    cursor: pointer;
  }
}

.contact__form-desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 180%;
  -webkit-padding-before: 12px;
          padding-block-start: 12px;
}
@media screen and (min-width:768px) {
  .contact__form-desc {
    -webkit-padding-before: 38px;
            padding-block-start: 38px;
    width: 700px;
    margin-inline: auto;
    line-height: 150%;
  }
}

.contact__acceptance {
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 180%;
  -webkit-padding-before: 2px;
          padding-block-start: 2px;
}
.contact__acceptance input {
  margin: 0;
  border: 1px solid #d9d9d9;
  background: #fdfdfd;
  width: 15px;
  height: 15px;
  -webkit-margin-end: 10px;
          margin-inline-end: 10px;
  -webkit-margin-before: 5px;
          margin-block-start: 5px;
}
@media screen and (min-width:768px) {
  .contact__acceptance {
    line-height: 150%;
  }
}

input[type=submit],
input[type=button] {
  border-radius: 0px;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  -moz-appearance: button;
       appearance: button;
  border: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  cursor: pointer;
  background: transparent;
}

input[type=submit]::-webkit-search-decoration,
input[type=button]::-webkit-search-decoration {
  display: none;
}

.row.jc-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.contact__submit {
  text-align: center;
  -webkit-margin-before: 8px;
          margin-block-start: 8px;
}
.contact__submit input[type=submit] {
  display: inline-block;
  width: 100%;
  max-width: 390px;
  padding-block: 17.5px;
  margin-inline: auto;
  border-radius: 50px;
  background: #599cc2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 180%;
  color: #fdfdfd;
  border: 1px solid #fdfdfd;
}
.contact__submit input[type=submit]:hover {
  color: #599cc2;
  background: #fdfdfd;
  border: 1px solid #599cc2;
}
@media screen and (min-width:768px) {
  .contact__submit {
    -webkit-margin-before: 26px;
            margin-block-start: 26px;
  }
  .contact__submit input[type=submit] {
    line-height: 150%;
    max-width: 326px;
  }
}

.footer {
  padding-block: 27px 30px;
  background: #202020;
}

@media screen and (min-width:768px) {
  .footer__inner {
    padding-inline: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.footer__nav-link-wrap {
  text-align: center;
}
@media screen and (min-width:768px) {
  .footer__nav-link-wrap {
    text-align: left;
  }
}

.nav-link-top .footer__nav-link:nth-of-type(n + 5) {
  -webkit-margin-before: 8px;
          margin-block-start: 8px;
}
.nav-link-top .footer__nav-link:last-of-type {
  -webkit-border-start: 1px solid #fdfdfd;
          border-inline-start: 1px solid #fdfdfd;
}
@media screen and (min-width:768px) {
  .nav-link-top .footer__nav-link + .footer__nav-link {
    -webkit-padding-start: 20px;
            padding-inline-start: 20px;
  }
}
@media screen and (min-width:768px) {
  .nav-link-top .footer__nav-link:last-of-type {
    -webkit-padding-start: 25px;
            padding-inline-start: 25px;
    -webkit-margin-start: 10px;
            margin-inline-start: 10px;
  }
}

.footer__nav-link {
  color: #fdfdfd;
  padding-inline: 13px;
  font-size: 14px;
  font-weight: 700;
}
@media screen and (min-width:768px) {
  .footer__nav-link {
    padding: 15px;
  }
}

.nav-link-bottom {
  -webkit-padding-before: 16px;
          padding-block-start: 16px;
}
.nav-link-bottom .footer__nav-link:nth-of-type(3) {
  -webkit-padding-before: 10px;
          padding-block-start: 10px;
}
@media screen and (min-width:768px) {
  .nav-link-bottom .footer__nav-link:last-child {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
  }
}
@media screen and (min-width:768px) {
  .nav-link-bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    -webkit-padding-before: 0;
            padding-block-start: 0;
  }
}

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

.footer__desc {
  -webkit-padding-before: 20px;
          padding-block-start: 20px;
  color: #fdfdfd;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  padding-inline: 20px;
}
@media screen and (min-width:768px) {
  .footer__desc {
    text-align: center;
    -webkit-padding-before: 10px;
            padding-block-start: 10px;
  }
}