html {
  scroll-behavior: smooth;
}

/* layout */
.inner {
  max-width: 70.5rem;
  margin: 0 auto;
}

.section-layout {
  display: flex;
  flex-direction: column;
  gap: 5rem;

  &.-narrow {
    gap: 3.75rem;
  }
}

@media (width < 599px) {
  .inner {
    margin: 0 2rem;
  }

  .section-layout {
    gap: 3.75rem;

    &.-narrow {
      gap: 2.5rem;
    }
  }
}

/* contents */

/* ボタン */
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 500;
  padding: 0.875rem 1.75rem 0.9375rem 1.75rem;
  border-radius: 0.25rem;
  color: #fff;

  &.-primary {
    position: relative;
    overflow: hidden;
    &::after {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: linear-gradient(66deg, #ED1C24 48.31%, #E56203 84.27%);
      position: absolute;
      top: 0;
      left: 0;
      transition: opacity .2s;
    }
  }

  &.-secondary {
    border: solid 1px #E5E7EB;
    padding: 0.8125rem 1.6875rem 0.875rem 1.6875rem;
  }
}

.button-text {
  position: relative;
  z-index: 1;
}

@media ( 599px <= width) {
  .button {
    &.-primary {
      &:hover {
        &::after {
          opacity: .5;
        }
      }
    }
    &.-secondary {
      transition: background .2s;
      &:hover {
        background: rgba(255,255,255,.1);
      }
    }
  }
}

.note {
  display: flex;
  gap: .25rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #4B5563;
  &::before {
    content: "※";
  }
}

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

.section-headline {
  font-size: 2.25rem;
  line-height: 1.4;
  color: #fff;
}

.section-lead {
  color: #D1D5DB;
  line-height: 1.4;
}

@media (width < 599px) {
  .section-headline {
    font-size: 1.75rem;
  }
}

/* hero */
.hero {
  background: #191919 no-repeat center right / cover;
  background-image: image-set(
    url("../images/bg-hero.avif") type("image/avif"),
    url("../images/bg-hero.webp") type("image/webp"),
    url("../images/bg-hero.png") type("image/png")
  );
  color: #fff;
  overflow: hidden;
  padding: 0 2rem;
}

.hero-inner {
  position: relative;
  padding: 7.5rem 0;
}

.hero-image {
  width: 85.1064%;
  min-width: 53.75rem;
  position: absolute;
  top: -6.25rem;
  left: max(39.0071%, 20rem);
  mix-blend-mode: lighten;
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.hero-headline {
  display: flex;
  flex-direction: column;
  gap: 2.1875rem;
  line-height: 1;

  & img {
    width: 17.9375rem;
  }
}

.hero-headline-label {
  font-size: 1.25rem;
  font-weight: 400;
  font-variation-settings: "wght" 400;
  line-height: 1.4;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
}

@media (width < 599px) {
  .hero {
    padding: 0;
    background-position: center top;
    background-size: auto 320px;
  }

  .hero-inner {
    width: auto;
    padding: 12.5rem 0 3.75rem;
  }

  .hero-image {
    width: 45rem;
    min-width: inherit;
    top: -13.3125rem;
    left: -1.75rem;
  }

  .hero-text {
    gap: 3.375rem;
  }

  .hero-headline {
    align-items: center;
    gap: 1.5rem;
    text-align: center;
    & img {
      width: 15.5625rem;
    }
  }

  .hero-headline-label {
    font-size: 1rem;
  }

  .hero-buttons {
    flex-direction: column;
  }
}

/* feature */

.feature {
  background: #191919;
  color: #D1D5DB;
  padding: 3.75rem 2rem 6.25rem;
  overflow: hidden;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 7.5rem;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  &::before {
    content: "";
    display: block;
    width: 45rem;
    height: 21.25rem;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
  }
  &:first-child {
    &::before {
      background-image: image-set(
        url("../images/bg-feature-01.avif") type("image/avif"),
        url("../images/bg-feature-01.webp") type("image/webp"),
        url("../images/bg-feature-01.png") type("image/png")
      );
      bottom: -7.5rem;
      right: -38.75rem;
    }
  }
  &:last-child {
    &::before {
      background-image: image-set(
        url("../images/bg-feature-02.avif") type("image/avif"),
        url("../images/bg-feature-02.webp") type("image/webp"),
        url("../images/bg-feature-02.png") type("image/png")
      );
      left: -37.5rem;
      bottom: -8.75rem;
    }
  }
}

.feature-text {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  width: 48.7589%;
  line-height: 1.4;
}

.feature-title {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  font-size: 1.625rem;
  line-height: 1.4;
  color: #fff;
  &::before {
    content: "";
    display: block;
    width: 4.5rem;
    height: 0.1875rem;
    background: linear-gradient(90deg, #ED1C24 13.78%, #F06500 90.89%);
  }
}

.feature-desc {
  & p {
    & + p {
      margin-top: 1.4rem;
    }
  }
}

.feature-note {
  font-size: 0.8125rem;
  margin-top: 2rem;
  & li {
    display: flex;
    gap: .25rem;
    counter-increment: number;
    &::before {
      content: "※"counter(number);
    }
  }
}

.feature-image {
  width: 40.4255%;
  padding-top: 2.6875rem;
  line-height: 0;
  position: relative;
}

@media ( 599px <= width) {
  .feature-item {
    &:nth-child(even) {
      flex-direction: row-reverse;
    }
  }
}
@media (width < 600px) {
  .feature {
    padding: 2.5rem 0;
  }
  .feature-list {
    gap: 5rem;
  }
  .feature-item {
    flex-direction: column;
    gap: 2.5rem;
    &::before {
      width: 21.75rem;
      height: 10.25rem;
      position: absolute;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
    }
    &:first-child {
      &::before {
        bottom: -4.75rem;
        right: -15.6875rem;
      }
    }
    &:last-child {
      &::before {
        left: -14.6875rem;
        bottom: -4.25rem;
      }
    }
  }
  .feature-text {
    width: 100%;
    gap: 1.5rem;
  }
  .feature-title {
    gap: 1.5rem;
    font-size: 1.375rem;
  }
  .feature-image {
    padding: 0;
    width: 100%;
  }
}

/* field */
.field {
  background: #191919;
  color: #D1D5DB;
  padding: 3.75rem 2rem 6.25rem;
}

.field-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(23.4043%, 1fr));
  gap: 2.5rem 2.1277%;
}

.field-item {
  line-height: 1.4;
}

.field-image {
  display: block;
  line-height: 0;
  margin: 0 0 1rem;
}

.field-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  line-height: 1.4;
  color: #fff;
  margin: 0 0 .75rem;
  text-align: center;
}
@media (width < 600px) {
  .field {
    padding: 2.5rem 0;
  }
  .field-list {
    grid-template-columns: repeat(auto-fill, minmax(47.4164%, 1fr));
    gap: 2.5rem 4.8632%;
  }
  .field-item {
    font-size: 0.9375rem;
  }
  .field-title {
    font-size: 1rem;
    text-align: left;
  }
}

/* section contents */
.contents-wrap {
  padding: 6.25rem 2rem;
}

.contents-layout {
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

.section-content {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  line-height: 1.4;
}

.section-content-title {
  font-size: 1.75rem;
}

.section-content-item {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  & dt {
    font-size: 1.125rem;
    font-weight: 700;
    font-variation-settings: "wght" 700;
  }
}

/* table */
.section-table-wrap {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.section-table {
  width: 100%;
  table-layout: fixed;
  line-height: 1.4;
  & thead {
    th {
      padding: 1.25rem 1.5rem 1.375rem;
      font-size: 1rem;
      font-weight: 700;
      font-variation-settings: "wght" 700;
      background: #191919;
      color: #fff;
      text-align: center;
      border: 1px solid #E5E7EB;
      &:first-child {
        background: none;
        border: none;
        width: 26.5957%;
      }
    }
  }

  & tbody {
    th {
      width: 26.5957%;
      vertical-align: middle;
      padding: 0.875rem 1.5rem 1rem 1.5rem;
      font-size: 0.9375rem;
      font-weight: 700;
      font-variation-settings: "wght" 700;
      color: #1A1A1A;
      border: 1px solid #E5E7EB;
    }

    td {
      padding: 0.875rem 1.5rem 1rem 1.5rem;
      color: #4B5563;
      border: 1px solid #E5E7EB;
      vertical-align: middle;

      & .table-content {
        display: flex;
        flex-direction: column;
        gap: .5rem;
      }

      &[colspan="2"] {
        text-align: center;
        & .table-content {
          align-items: center;
        }
      }
    }
  }

  &.-normal {
    & tbody {
      & tr {
        &:nth-child(odd) {
          & th,td {
            background: #F6F4F3;
          }
        }
      }
    }
  }
  &.-single {
    & tbody {
      & th {
        background: #F6F4F3;
      }
      & td {
        background: #fff;
      }
    }
  }
}

.section-content-box {
  padding: 2.375rem 2rem 2.5rem 2rem;
  background: #F6F4F3;
  border: 1px solid #E5E7EB;
}

@media (width < 600px) {
  .contents-wrap {
    padding: 3.75rem 0;
  }
  .section-content {
    gap: 2rem;
  }
  .section-table {
    & thead {
      th {
        padding: 0.9375rem 0.75rem 1.06rem;
        font-size: .875rem;
        &:first-child {
          width: 5rem;
        }
      }
    }

    & tbody {
      th {
        width: 5rem;
        padding: 0.875rem 0.75rem 1rem;
        font-size: .875rem;
      }

      td {
        padding: 0.875rem 0.75rem 1rem 0.75rem;

        & .table-content {
          & .note {
            text-align: left;
          }
        }
      }
    }
  }
}

.limitation {
  background: #F6F4F3;
  padding: 5rem 2rem 6.25rem;
  & .section-headline {
    color: #111827;
  }
}

.limitation-box {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background: #fff;
  padding: 2.375rem 2rem 2.5rem 2rem;
  color: #4B5563;
  line-height: 1.4;

  & dl {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #E5E7EB;
    &:last-child {
      padding: 0;
      border: none;
    }
    & dd {
      display: flex;
      flex-direction: column;
      gap: .5rem;

      & ol {
        & li {
          & p {
            text-indent: 1em;
          }
        }
      }
    }
  }
}

@media (width < 600px) {
  .limitation {
    padding: 3.75rem 0;
  }
}

.contact {
  padding: 5rem 0;
  background: no-repeat center center / cover;
  background-image: image-set(
    url("../images/bg-contact-pc.avif") type("image/avif"),
    url("../images/bg-contact-pc.webp") type("image/webp"),
    url("../images/bg-contact-pc.png") type("image/png")
  );
}

.contact-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  & li {
    min-width: 12.5rem;
  }
}

@media (width < 600px) {
  .contact {
    padding: 3.75rem 0;
    background-image: image-set(
      url("../images/bg-contact-sp.avif") type("image/avif"),
      url("../images/bg-contact-sp.webp") type("image/webp"),
      url("../images/bg-contact-sp.png") type("image/png")
    );
  }
  .contact-buttons {
    flex-direction: column;
    & li {
      width: 100%;
    }
  }
}