@charset "utf-8";

:root {
  --color-main: #13671a;
  --font-montserrat: Montserrat, sans-serif;
}

/* Responsive */

html {
  font-size: 1px;
}

@media (min-width: 769px) and (max-width: 1460px) {
  html {
    font-size: calc(100vw / 1460);
  }
}

@media (max-width: 768px) {
  html {
    font-size: calc(100vw / 375);
  }
}

@media screen and (min-width: 0px) and (max-width: 768px) {
  .pc {
    display: none !important;
  }
}
@media screen and (min-width: 769px) {
  .sp {
    display: none !important;
  }
}

img {
  height: auto;
}

/* Common styles */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 40rem;

  @media (max-width: 768px) {
    scroll-padding-top: 0;
  }
}

body {
  color: #1e1e1e;
  font-size: 20rem;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.common-inquiry-buttons {
  display: flex;
  justify-content: center;
  gap: 60rem;

  li {
    a {
      display: block;
      position: relative;
      width: 520rem;
      height: 88rem;
      padding-left: 96rem;
      border: 2px solid #1e1e1e;
      border-radius: 12rem;
      color: #fff;
      font-size: 26rem;
      font-weight: bold;
      line-height: calc(88rem - 4px);
      background-color: var(--color-main);
      transition: background-color 300ms;

      &:hover {
        background-color: #1e1e1e;
      }

      &::before {
        content: "";
        position: absolute;
        top: calc(50% - 28rem);
        left: 20rem;
        width: 56rem;
        height: 56rem;
      }

      &::after {
        content: "";
        position: absolute;
        top: calc(50% - 16rem);
        right: 20rem;
        width: 32rem;
        height: 32rem;
        background: url(/assets/images/top/common/arrow-icon-right.svg) no-repeat 0 0 / contain;
      }
    }

    .request::before {
      background: url(/assets/images/top/common/request-icon.svg) no-repeat 0 0 / contain;
    }

    .online::before {
      background: url(/assets/images/top/common/online-icon.svg) no-repeat 0 0 / contain;
    }
  }

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 8rem;

    li {
      a {
        display: flex;
        align-items: center;
        width: 314rem;
        height: 66rem;
        margin: 0 auto;
        padding-left: 76rem;
        border-radius: 8rem;
        font-size: 18rem;
        line-height: 24rem;

        &::before {
          top: calc(50% - 25rem);
          left: 8rem;
          width: 50rem;
          height: 50rem;
        }

        &::after {
          top: calc(50% - 12rem);
          right: 8rem;
          width: 24rem;
          height: 24rem;
        }
      }
    }
  }
}

/* Layout */
.lower {
  padding-bottom: 152rem;
  .site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    grid-template-columns: auto auto;
    justify-content: left;
    width: 100%;
    background-color: #fff;

    .title {
      display: block;
      grid-template-columns: 130rem auto;
      padding: 16rem 20rem 14rem;

      .text {
        margin-left: 15rem;
        font-size: 16rem;

        strong {
          display: block;
          font-size: 32rem;
        }
      }
    }

    @media (min-width: 769px) {
      .drawer-button {
        display: none;
      }

      .drawer-menu {
        display: flex;
        margin-left: auto;
        padding-right: 140px;
      }

      nav {
        > ul {
          display: grid;
          grid-template-columns: repeat(3, 180rem);
          align-items: center;
          justify-content: flex-end;
          height: 100%;

          > li {
            text-align: center;
            font-size: 20rem;
            line-height: 1.3;

            > a {
              text-decoration: underline;

              &:hover {
                text-decoration: initial;
                color: var(--color-main);
              }
            }

            &.pulldown {
              display: grid;
              align-items: center;
              height: 100%;
              cursor: pointer;

              span {
                position: relative;
                display: flex;
                flex-direction: column;
                row-gap: 28rem;
                padding-top: 20rem;

                &::after {
                  content: "";
                  display: block;
                  width: 20rem;
                  aspect-ratio: 2 / 1;
                  margin-inline: auto;
                  clip-path: polygon(50% 100%, 0 0, 100% 0);
                  background-color: var(--color-main);
                  transition: 0.1s;
                }
              }

              ul {
                position: absolute;
                top: 100%;
                left: 50%;
                translate: -50% 0;
                z-index: 10;
                width: 100vw;
                opacity: 0;
                visibility: hidden;
                padding: 40rem;
                transition: 0.2s ease;

                &::before {
                  content: "";
                  position: absolute;
                  top: 0;
                  left: 50%;
                  translate: -50% 0;
                  z-index: -1;
                  width: 100vw;
                  height: 100%;
                  background-color: #c9e0c9;
                }

                li {
                  width: fit-content;
                  text-align: initial;

                  + li {
                    margin-top: 32rem;
                  }

                  a {
                    display: grid;
                    grid-template-columns: 24rem auto;
                    column-gap: 8rem;
                    justify-content: flex-start;
                    color: #1e1e1e;
                    text-decoration: underline;

                    &::before {
                      content: "";
                      aspect-ratio: 1;
                      background: url(/assets/images/top/common/arrow-icon-right.svg) no-repeat center/ contain;
                      transition: background-color 300ms;
                    }

                    &:hover {
                      text-decoration: initial;
                      color: var(--color-main);
                    }
                  }
                }

                &.c1 {
                  display: grid;
                  place-content: center;
                }

                &.c2 {
                  display: block;
                  width: min(1000rem, 100%);
                  margin-inline: auto;
                  column-count: 2;
                }
              }

              &:hover {
                color: var(--color-main);
                border-bottom: 2px solid var(--color-main);

                span {
                  translate: 0 1px;

                  &::after {
                    opacity: 0;
                  }
                }

                ul {
                  opacity: 1;
                  visibility: visible;
                  transform: translateY(0);
                }
              }
            }
          }
        }
      }

      .cta-links {
        display: grid;
        grid-template-columns: repeat(2, 208rem);
        align-items: stretch;
        column-gap: 2rem;

        a {
          display: flex;
          align-items: center;
          padding-left: 88rem;
          color: #fff;
          font-size: 20rem;
          font-weight: 700;
          transition: background-color 0.3s;

          &.request {
            background: var(--color-main) url(/assets/images/top/common/request-icon.svg) no-repeat center left 16rem / 56rem auto;
          }

          &.online {
            background: var(--color-main) url(/assets/images/top/common/online-icon.svg) no-repeat center left 16rem / 56rem auto;
          }

          &:hover {
            background-color: #000;
          }
        }
      }
    }
  }

  main {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    background-color: #edffd6;

    .breadcrumb {
      padding-block: 15rem;
      border-image: linear-gradient(#f5f5f5 0 0) fill 0 / 0 / 0 100vw;

      ol {
        width: 1100rem;

        li {
          display: inline;
          font-size: 14rem;
          letter-spacing: 0.03em;

          &:not(:last-of-type)::after {
            content: "＞";
            margin-inline: 8rem;
          }

          a {
            text-decoration: underline;
            text-underline-offset: 2rem;

            &:hover {
              text-decoration: initial;
            }
          }
        }
      }
    }

    .contents {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: clamp(1420rem, calc(100% - 320rem), 1600rem);
      margin: 80rem 40px 0;
      border-radius: 40rem 40rem 0 0;
      padding-block: 120rem;
      background-color: #fff;

      &::before {
        position: absolute;
        top: -80rem;
        left: 50%;
        translate: -50% 0;
        z-index: -1;
        content: "";
        width: 100vw;
        aspect-ratio: 1920 / 800;
        background: url(/assets/images/top/main-visual/bg.png) no-repeat center / cover;
      }

      > * {
        width: min(1100rem, 100%);
      }
    }

    .mv {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 436rem;
      grid-template-rows: auto auto;
      column-gap: 48rem;
      border-bottom: 2px solid #939393;
      padding-bottom: 60rem;

      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: min(436rem, 100%);
        aspect-ratio: 436 / 240;
        background: url(/assets/images/top/join-image01.svg) no-repeat center bottom / contain;
      }

      h1 {
        grid-column: 1;
        grid-row: 1;
        font-size: 40rem;
      }

      p {
        grid-column: 1;
        grid-row: 2;
        margin-top: 32rem;
        font-size: 22rem;
      }

      figure {
        grid-column: 2;
        grid-row: 1 / 3;
        figcaption {
          margin-top: 12rem;
          font-size: 14rem;
          color: #666;
          line-height: 1.6;
          text-align: center;
          span {
            display: block;
            text-align: right;
            margin-top: 8rem;
          }
        }

        img {
          border-radius: 24rem;
        }
      }
    }

    .introduction {
      display: flex;
      column-gap: 40rem;
      margin-top: 64rem;
      .inner {
        display: flex;
        grid-template-columns: 1fr 360rem;
        column-gap: 28rem;
        padding: 30rem 40rem;
        border-radius: 48rem;
        background-color: rgb(247, 247, 245);
        width: 100%;
        align-items: center;
      }
      ul {
        list-style: none;
        li {
          margin: 10rem 0;
          &::before {
            content: "●";
          }
        }
      }
      p.image {
        width: 28%;
        img {
          border-radius: 16rem;
        }
      }
      p.map-image {
        width: 50%;
      }
    }

    .index {
      margin-top: 64rem;
      padding: 64rem 120rem;
      border-radius: 48rem;
      background-color: #f5f5e5;

      dl {
        dt {
          margin-bottom: 16rem;
          font-size: 32rem;
          font-weight: 700;
        }

        dd {
          ol {
            list-style: none;
            counter-reset: li;

            li {
              display: grid;
              grid-template-columns: 32rem auto;
              align-items: center;
              column-gap: 16rem;
              border-bottom: 1px solid #939393;

              &::before {
                content: counter(li);
                counter-increment: li;
                display: grid;
                place-content: center;
                aspect-ratio: 1;
                border-radius: 50%;
                background-color: #4e9b51;
                font-family: var(--font-montserrat);
                color: #fff;
                font-size: 18rem;
                font-weight: 700;
                line-height: 1;
              }

              a {
                display: grid;
                grid-template-columns: auto 32rem;
                align-items: center;
                justify-content: space-between;
                padding-block: 16rem;
                text-decoration: underline;
                text-underline-offset: 2rem;
                font-size: 22rem;
                font-weight: 700;
                transition: color 0.2s ease;

                &::after {
                  content: "";
                  aspect-ratio: 1;
                  border-radius: 4rem;
                  background: #000 url(/article-assets/images/common/icon-arrow.svg) no-repeat center / 16rem auto;
                  transition: background-color 0.2s ease;
                }

                &:hover {
                  color: #4e9b51;
                  &::after {
                    background-color: #4e9b51;
                  }
                }
              }
            }
          }
        }
      }
    }

    .section {
      border-bottom: 1px solid #939393;
      padding-block: 120rem 80rem;

      header {
        display: grid;
        grid-template-columns: 56rem 1fr 360rem;
        grid-template-rows: auto 1fr;
        gap: 24rem 16rem;
        margin-bottom: 48rem;

        &::before {
          content: attr(data-number);
          display: grid;
          place-content: center;
          align-self: baseline;
          grid-column: 1;
          aspect-ratio: 1;
          border-radius: 50%;
          background-color: #4e9b51;
          font-family: var(--font-montserrat);
          color: #fff;
          font-size: 30rem;
          font-weight: 700;
          line-height: 1;
        }

        h2 {
          align-self: center;
          grid-column: 2;
          font-size: 36rem;
          font-weight: 700;
          line-height: 1.5;
        }

        p {
          grid-column: 2;
          grid-row: 2;
          font-size: 20rem;
          &.noimg{
            grid-column: 2 / 4;
          }
          .list {
            display: flex;
            column-gap: 8rem;
            font-weight: bold;
            &::before {
              content: "●";
            }
          }
        }
        a {
          text-decoration: underline;
          text-underline-offset: 2rem;
          color: #0d4fe3;

          &:hover {
            text-decoration: initial;
          }
        }        
        figure {
          grid-column: 3;
          grid-row: 1 / 3;
          margin-left: 32rem;

          img {
            border-radius: 16rem;
          }
        }
      }

      .text {
        display: grid;
        grid-template-columns: 0 1fr 360rem;
        grid-template-rows: auto 1fr;
        gap: 12rem 16rem;
        margin-bottom: 48rem;
        p {
          grid-column: 2;
          grid-row: 1;
          font-size: 20rem;
        }
        figure {
          grid-column: 3;
          grid-row: 1 / 3;
          margin-left: 32rem;
          img {
            border-radius: 16rem;
          }
        }
        ul {
          margin-block: 16rem 24rem;
          grid-column: 2;
          grid-row: 2;
          font-weight: bold;
          li {
            display: flex;
            column-gap: 8rem;
            &::before {
              content: "●";
            }
          }
        }
        .text2 {
          grid-column: 2;
          grid-row: 3; 
        }
      }
      

      .inner {
        section {
          + section {
            padding-top: 80rem;
          }

          h3 {
            border-bottom: 2px solid var(--color-main);
            background-color: #c9e0c9;
            margin-bottom: 32rem;
            padding: 12rem 23rem;
            font-size: 28rem;
            font-weight: 700;
            line-height: 1.1;
          }
          h4 {
            margin-bottom: 10rem;
            font-weight: 700;
          }
          p {
            margin-bottom: 32rem; 
          }
          p.summary-text {
            grid-template-columns: 1fr 360rem;
            column-gap: 28rem;
            padding: 30rem 40rem;
            border-radius: 48rem;
            background-color: rgb(247, 247, 245);
          }
          .line {
            background: linear-gradient(transparent 60%, #c9e0c9 60%);
            font-weight: bold;
          }
          strong.red {
            color: #d8430c;
          }

          /* Q&Aレイアウト */
          dl {
            margin-bottom: 48rem;

            dt {
              margin-bottom: 24rem;
              font-size: 24rem;
              font-weight: 700;

              span {
                color: var(--color-main);
                font-family: var(--font-montserrat);
                font-weight: 700;
                padding-right: 10rem;
              }
            }

            dd {
              font-size: 20rem;
              line-height: 1.8;
            }

            /* バージョン1: 画像を右端に配置（2カラム） */
            &.qa-layout-right {
              .qa-content {
                display: grid;
                grid-template-columns: 1fr 300rem;
                gap: 32rem;
                align-items: start;
              }

              .qa-text {
                p {
                  margin-bottom: 24rem;
                  text-indent: 1em;

                  &:last-child {
                    margin-bottom: 0;
                  }
                }
              }

              .qa-image {
                img {
                  width: 100%;
                  height: auto;
                  border-radius: 16rem;
                }

                figcaption {
                  margin-top: 12rem;
                  font-size: 14rem;
                  line-height: 1.6;
                  color: #666;
                  text-align: center;
                }
              }
            }

            /* バージョン2: 画像を左端に配置 */
            &.qa-layout-left {
              .qa-content {
                display: grid;
                grid-template-columns: 300rem 1fr;
                gap: 32rem;
                align-items: start;
              }

              .qa-text {
                p {
                  margin-bottom: 24rem;

                  &:last-child {
                    margin-bottom: 0;
                  }
                }
              }

              .qa-image {
                img {
                  width: 100%;
                  height: auto;
                  border-radius: 16rem;
                }

                figcaption {
                  margin-top: 12rem;
                  font-size: 14rem;
                  line-height: 1.6;
                  color: #666;
                  text-align: center;
                }
              }
            }

            /* バージョン3: 画像なし（テキスト100%） */
            &.qa-layout-none {
              .qa-content {
                display: block;
              }

              .qa-text {
                width: 100%;

                p {
                  margin-bottom: 24rem;
                  text-indent: 1em;

                  &:last-child {
                    margin-bottom: 0;
                  }
                }
              }
            }

            /* バージョン4: テキストの下に画像を2カラムで並べる */
            &.qa-layout-bottom-2col {
              .qa-content {
                display: block;
              }

              .qa-text {
                width: 100%;
                margin-bottom: 32rem;

                p {
                  margin-bottom: 24rem;
                  text-indent: 1em;

                  &:last-child {
                    margin-bottom: 0;
                  }
                }

                strong {
                  color: #d8430c;
                }
              }

              .qa-images-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 48rem;
                justify-items: center;
                max-width: 860px;
                margin: 0 auto;
              }

              .qa-image {
                width: 100%;
                max-width: 100%;

                img {
                  width: 100%;
                  height: auto;
                  border-radius: 16rem;
                }

                figcaption {
                  margin-top: 12rem;
                  font-size: 14rem;
                  line-height: 1.6;
                  color: #666;
                  text-align: center;
                }
              }
            }
          }          
        }
      }

      .table-wrapper {
        margin-block: 32rem;

        table {
          width: 100%;
          border-collapse: collapse;
          table-layout: fixed;

          + .inner {
            margin-top: 80rem;
          }

          &.c2 :where(th, td) {
            width: calc(100% / 2);
          }

          &.c3 :where(th, td) {
            width: calc(100% / 3);
          }

          tr {
            &:nth-child(n + 2):nth-child(even) {
              background-color: #fff;
            }

            &:nth-child(n + 2):nth-child(odd) {
              background-color: #f7f7f5;
            }

            :where(th, td) {
              border: 1px solid #939393;
              vertical-align: middle;
            }
          }

          th {
            font-weight: 600;
          }

          &:not(.horizontal) th {
            padding-block: 12rem;
            background-color: var(--color-main);
            color: #fff;
            text-align: center;
            font-size: 20rem;
            font-weight: 500;
          }

          td {
            padding: 17rem;
            font-size: 18rem;
            line-height: 1.4;

            ul {
              li {
                text-indent: calc(-1em - 6rem);
                padding-left: calc(1em + 6rem);
                &::before {
                  content: "⚫︎";
                  margin-right: 6rem;
                }

                + li {
                  margin-top: 8rem;
                }
              }

              &.column-count {
                column-count: 2;
                padding-right: 152rem;
              }
            }
          }

          &.horizontal {
            tr {
              &:nth-child(even) {
                background-color: #f7f7f5;
              }

              &:nth-child(odd) {
                background-color: #fff;
              }
            }

            th,
            td {
              padding: 16rem;
              font-weight: 400;
            }

            th {
              width: min(380rem, 100%);
            }
          }
        }
      }

      ol {
        margin-block: 32rem;
        list-style: none;
        counter-reset: li;

        li {
          display: grid;
          grid-template-columns: 66rem auto;
          align-items: center;
          column-gap: 16rem;
          font-size: 22rem;

          &::before {
            content: "0" counter(li);
            counter-increment: li;
            display: grid;
            place-content: center;
            aspect-ratio: 1;
            border: 1px solid #1e1e1e;
            border-radius: 4rem;
            background-color: #f7f7f5;
            font-family: var(--font-montserrat);
            font-size: 25rem;
            font-weight: 600;
            letter-spacing: 0.04em;
            line-height: 1;
          }

          + li {
            margin-top: 32rem;
          }
        }
      }

      .notes {
        p {
          &.asterisk {
            display: flex;
            column-gap: 8rem;

            &::before {
              content: "※" attr(data-number);
              margin-left: 8rem;
            }
          }

          + p {
            margin-top: 24rem;
          }

          a {
            text-decoration: underline;
            text-underline-offset: 2rem;
            color: #0d4fe3;

            &:hover {
              text-decoration: initial;
            }
          }
        }

        ul {
          margin-block: 16rem 24rem;
          padding-left: 28rem;

          li {
            display: flex;
            column-gap: 8rem;

            &::before {
              content: "※";
            }
          }
          &.disc {
            font-weight: bold;
            padding: 0;
            li {
              &::before {
                content: "●";
              }
            }
          }
        }

        .indent {
          display: grid;
          grid-template-columns: auto 1fr;
          gap: 8rem;
        }
      }

      &.sec05 {
        header {
          margin-bottom: initial;

          h2,
          p,
          .notes {
            grid-column: 2 / 4;
          }
        }
      }
    }

    .links {
      position: relative;
      width: min(1380rem, 90%);
      margin-top: 200rem;
      border-radius: 48rem;
      background-color: #f5f5e5;

      ul {
        display: flex;
        justify-content: center;
        gap: 60rem;
        translate: 0 -80rem;

        li {
          a {
            display: block;
            width: 520rem;
            padding: 32rem;
            border-radius: 16rem;
            text-align: center;
            color: #fff;
            background: #13671a url(/assets/images/top/common/arrow-icon-right.svg) no-repeat right 10rem bottom 10rem / 32rem;
            transition: background-color 300ms;

            dl {
              dt {
                font-size: 30rem;
                font-weight: 600;
                letter-spacing: 0.03em;

                &::before {
                  content: "";
                  display: block;
                  width: 80rem;
                  aspect-ratio: 1;
                  margin: 0 auto 16rem;
                }
              }

              dd {
                margin-top: 8rem;
                font-size: 20rem;
              }
            }

            &:hover {
              background-color: #1e1e1e;
            }
          }

          &:nth-of-type(1) dl dt::before {
            background: url(/assets/images/top/common/request-icon.svg) no-repeat center / 100% auto;
          }

          &:nth-of-type(2) dl dt::before {
            background: url(/assets/images/top/common/online-icon.svg) no-repeat center / 100% auto;
          }
        }
      }
    }

    .articles {
      position: relative;
      height: 460rem;
      width: 100%;
      margin-top: 120rem;
      padding-top: 82rem;
      visibility: visible;

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: calc(50% + 550rem);
        height: 395rem;
        border-radius: 0 80rem 0 0;
        background-color: #f5f5e5;
        z-index: 0;
      }

      hgroup {
        position: relative;
        width: 1100rem;
        margin: 0 auto;
        z-index: 1;

        .en {
          font-family: var(--font-montserrat);
          font-size: 64rem;
          font-weight: 100;
          line-height: 1em;
        }

        h2 {
          font-size: 30rem;
          font-weight: 600;
        }
      }

      .control {
        display: flex;
        gap: 10rem;
        position: relative;
        width: 1100rem;
        margin: 48rem auto 0;
        z-index: 1;
        display: none;

        button {
          width: 48rem;
          height: 48rem;
          white-space: nowrap;
          text-indent: 100%;
          overflow: hidden;
          cursor: pointer;
        }

        .prev-button {
          background: url(/assets/images/top/articles-prev-button.svg) no-repeat 0 0 / contain;
        }

        .next-button {
          background: url(/assets/images/top/articles-next-button.svg) no-repeat 0 0 / contain;
        }

        p {
          padding-left: 14rem;
          font-size: 18rem;
          line-height: 48rem;
        }
      }

      .splide__track {
        position: absolute;
        width: calc(50vw + 264rem);
        height: 377rem;
        top: 84rem;
        left: calc(50% - 264rem);
        overflow: hidden;

        ul {
          li {
            width: 320rem;
            height: 100%;
            padding: 32rem 32rem 0;
            border: 1px solid #707070;
            border-radius: 8rem;
            background-color: #fff;
            margin-right: 20rem;

            .image {
              img {
                width: 100%;
                height: auto;
              }
            }

            p {
              height: 58rem;
              margin-top: 16rem;
              font-size: 18rem;
              font-weight: 500;
            }

            a {
              display: block;
              margin: 24rem auto 0;
              padding-left: 15rem;
              width: 155rem;
              height: 42rem;
              border-radius: 4rem;
              border: 1px solid #1e1e1e;
              color: #fff;
              font-size: 16rem;
              font-weight: 600;
              line-height: calc(42rem - 2px);
              background: #4e9b51 url(/assets/images/top/common/arrow-icon-right.svg) no-repeat right 15rem center / 24rem;
              transition: background-color 300ms;

              &:hover {
                background-color: #1e1e1e;
              }
            }
          }
        }
      }

      &.articles--no-carousel {
        .control {
          display: none;
        }

        .splide__track {
          position: absolute;
          width: calc(50vw + 264rem);
          height: 377rem;
          top: 84rem;
          left: calc(50% - 264rem);
          overflow: hidden;
        }

        .splide__list {
          display: flex;
          justify-content: left;
          flex-wrap: wrap;
          gap: 24rem;
        }

        .splide__slide {
          flex-shrink: 0;
        }

        .splide__track ul li {
          margin-right: 0;
        }
      }
    }

    .simulation {
      margin-top: 120rem;
      padding: 58rem 0 40rem 144rem;
      border-radius: 24rem;
      background-color: #f5f5e5;
      background-repeat: no-repeat, no-repeat;
      background-position: left 40rem top 48rem, right 40rem bottom 40rem;
      background-image: url(/assets/images/top/simulation-icon.svg), url(/assets/images/top/simulation-image01.svg);
      background-size: 80rem 80rem, 340rem 225rem;

      h3 {
        font-size: 32rem;
        font-weight: 600;
        line-height: 1em;
      }

      p {
        width: 540rem;
        margin-top: 30rem;
        font-size: 22rem;
      }

      .button {
        margin-top: 24rem;

        a {
          display: block;
          width: 300rem;
          height: 58rem;
          padding-left: 23rem;
          border: 1px solid #1e1e1e;
          border-radius: 8rem;
          color: #fff;
          font-size: 18rem;
          font-weight: bold;
          line-height: calc(58rem - 2px);
          background: #4e9b51 url(/assets/images/top/common/exlink-icon.svg) no-repeat right 23rem center / 24rem;
          transition: background-color 300ms;

          &:hover {
            background-color: #1e1e1e;
          }
        }
      }
    }

    .voices {
      position: relative;
      width: 1380rem;
      margin-top: 120rem;
      padding-bottom: 80rem;

      &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 444rem;
        border-radius: 60rem;
        background-color: #f5f5e5;
        z-index: 0;
      }

      hgroup {
        position: relative;
        text-align: center;

        .en {
          font-family: Montserrat, sans-serif;
          font-size: 48rem;
          font-weight: 100;
          line-height: 1em;
        }

        h2 {
          margin-top: 5rem;
          font-size: 30rem;
          font-weight: 600;
        }
      }

      .voices-control {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        margin-top: -24rem;
        padding: 0 0;
        z-index: 2;
        pointer-events: none;

        button {
          pointer-events: auto;
          width: 48rem;
          height: 48rem;
          padding: 0;
          border: none;
          background: transparent;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          cursor: pointer;
          text-indent: -9999px;
          overflow: hidden;
          transition: opacity 200ms;
        }

        button:hover:not(:disabled) {
          opacity: 0.7;
        }

        button:disabled {
          opacity: 0.3;
          cursor: default;
        }

        .voices-prev {
          background-image: url(/assets/images/top/articles-prev-button.svg);
        }

        .voices-next {
          background-image: url(/assets/images/top/articles-next-button.svg);
        }
      }

      .splide__track {
        position: relative;
        width: 90%;
        margin-top: 32rem;
        margin-left: auto;
        margin-right: auto;
        padding-top: 60rem;
        z-index: 1;
      }

      .splide__list {
        display: flex;
      }

      .splide__slide {
        position: relative;
        width: 354rem;
        padding: 76rem 32rem 98rem;
        border: 4px solid #c9e0c9;
        border-radius: 16rem;
        background-color: #fff;
        flex-shrink: 0;

        .image {
          position: absolute;
          top: -60rem;
          left: calc(50% - 60rem);
          width: 120rem;

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

        .title {
          font-size: 26rem;
          font-weight: bold;
        }

        .meta {
          margin-top: 8rem;
          font-size: 18rem;
        }

        .text {
          margin-top: 16rem;
          padding-top: 16rem;
          border-top: 1px solid #939393;
          font-size: 18rem;
        }

        .button {
          position: absolute;
          left: calc(50% - 72rem);
          bottom: 32rem;
          display: block;
          padding-left: 15rem;
          width: 155rem;
          height: 42rem;
          border-radius: 4rem;
          border: 1px solid #1e1e1e;
          color: #fff;
          font-size: 16rem;
          font-weight: 600;
          line-height: calc(42rem - 2px);
          background: #4e9b51 url(/assets/images/top/common/arrow-icon-right.svg) no-repeat right 15rem center / 24rem;
          transition: background-color 300ms;

          &:hover {
            background-color: #1e1e1e;
          }
        }
      }

      .voices-pagination {
        display: flex;
        justify-content: center;
        gap: 12rem;
        margin-top: 32rem;
        padding: 0;
        list-style: none;
        position: relative;
        z-index: 1;

        li {
          display: inline-block;
        }

        button {
          width: 12rem;
          height: 12rem;
          padding: 0;
          border: none;
          border-radius: 50%;
          background-color: #c9e0c9;
          cursor: pointer;
          transition: background-color 200ms;
        }

        button:hover,
        button.is-active {
          background-color: #4e9b51;
        }
      }
    }

    .faq {
      position: relative;
      margin-top: 120rem;
      padding: 56rem 150rem 150rem;
      border: 5rem solid #dddddd;
      border-radius: 48rem;
      background-color: #fff;

      &::after {
        content: "";
        position: absolute;
        left: calc(50% - 260rem);
        bottom: -5rem;
        width: 520rem;
        height: 120rem;
        background: url(/assets/images/top/faq-image01.svg) no-repeat 0 0 / contain;
      }

      a {
        color: #0d4fe3;
        text-decoration: underline;
        font-weight: bold;

        &:hover {
          text-decoration: initial;
        }
      }

      hgroup {
        text-align: center;

        .en {
          font-family: var(--font-montserrat);
          font-size: 64rem;
          font-weight: 100;
          line-height: 1em;
        }

        h2 {
          margin-top: 5rem;
          font-size: 30rem;
          font-weight: 600;
        }
      }

      dl {
        display: flex;
        flex-direction: column;
        gap: 40rem;
        margin-top: 40rem;

        div {
          dt {
            position: relative;
            padding-bottom: 10rem;
            border-bottom: 1px solid #1e1e1e;

            span:first-child {
              position: absolute;
              top: 0;
              left: 0;
              color: #4e9b51;
              font-family: var(--font-montserrat);
              font-size: 26rem;
              font-weight: bold;
              line-height: 40rem;
            }

            button {
              position: relative;
              width: 100%;
              height: 40rem;
              padding-left: 57rem;
              font-size: 24rem;
              font-weight: bold;
              background-color: transparent;

              i {
                position: absolute;
                top: 0;
                right: 0;
                width: 40rem;
                height: 40rem;
                border-radius: 50%;
                background-color: var(--color-main);

                &::before,
                &::after {
                  content: "";
                  position: absolute;
                  top: calc(50% - 1px);
                  left: calc(50% - 10rem);
                  width: 20rem;
                  height: 2px;
                  background-color: #fff;
                  transition: transform 300ms;
                }

                &::after {
                  transform: rotate(90deg);
                }
              }
            }
          }

          &:has([aria-hidden="false"]) dt button i::after {
            transform: rotate(0deg);
          }

          dd {
            display: grid;
            grid-template-rows: 0fr;
            position: relative;
            transition: grid-template-rows 300ms, padding 300ms;

            &[aria-hidden="false"] {
              grid-template-rows: 1fr;
              padding-top: 16rem;
            }

            .inner {
              position: relative;
              padding-left: 57rem;
              overflow: hidden;

              span:first-child {
                position: absolute;
                top: 0;
                left: 0;
                color: #d8430c;
                font-family: var(--font-montserrat);
                font-size: 26rem;
                font-weight: bold;
                line-height: 36rem;
              }

              p {
                font-size: 20rem;
                line-height: 32rem;

                + p {
                  margin-top: 16rem;
                }
              }
            }
          }
        }
      }

      .others {
        margin-top: 40rem;

        p {
          width: fit-content;
          margin: 0 auto;
          padding: 15rem 25rem;
          border: 1px solid #939393;
          border-radius: 8rem;
          text-align: center;
          font-size: 20rem;
          line-height: 32rem;
          background-color: #f7f7f5;

          &::before {
            content: "※";
          }

          a {
            font-weight: bold;
          }
        }
      }
    }
  }

  .site-footer {
    .inquiry {
      display: flex;

      a {
        position: relative;
        width: 50%;
        height: 200rem;
        background-color: var(--color-main);
        transition: background-color 300ms;

        &:hover {
          background-color: #013e06;
        }

        &.request {
          &::before {
            content: "";
            position: absolute;
            right: 618rem;
            bottom: 0;
            width: 224rem;
            height: 188rem;
            background: url(/assets/images/top/footer-request-image.svg) no-repeat 0 0 / contain;
          }
        }

        &.online {
          border-left: 1px solid #fff;

          &::before {
            content: "";
            position: absolute;
            left: 693rem;
            bottom: 0;
            width: 166rem;
            height: 188rem;
            background: url(/assets/images/top/footer-online-image.svg) no-repeat 0 0 / contain;
          }
        }

        .texts {
          position: absolute;
          top: 44rem;
          width: 494rem;
          height: 113rem;
          padding-left: 104rem;
          color: #fff;

          &::after {
            content: "";
            position: absolute;
            right: 0;
            bottom: 0;
            width: 32rem;
            height: 32rem;
            background: url(/assets/images/top/common/arrow-icon-right.svg) no-repeat 0 0 / contain;
          }

          p:nth-child(1) {
            font-size: 30rem;
            font-weight: 600;
            line-height: 40rem;
          }

          p:nth-child(2) {
            margin-top: 8rem;
            font-size: 20rem;
          }
        }

        &.request .texts {
          right: 55rem;
          background: url(/assets/images/top/common/request-icon.svg) no-repeat 0 0 / 80rem 80rem;
        }

        &.online .texts {
          left: 55rem;
          background: url(/assets/images/top/common/online-icon.svg) no-repeat 0 0 / 80rem 80rem;
        }
      }
    }

    .bottom {
      display: flex;
      gap: 40rem;
      padding: 32rem 40rem;
      background: #4e9b51 url(/assets/images/top/footern-image.svg) no-repeat right bottom / 530rem 146rem;

      .logo {
        width: 195rem;

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

      .texts {
        .name {
          color: #fff;
          font-size: 24rem;
          font-weight: bold;
        }

        ul {
          display: flex;
          flex-direction: column;
          gap: 12rem;
          margin-top: 10rem;

          li {
            padding-left: 28rem;
            font-size: 16rem;
            font-weight: 500;
            line-height: 20rem;
            background: url(/assets/images/top/common/arrow-icon-right.svg) no-repeat 0 0 / 20rem;

            a {
              text-decoration: underline;
              color: #fff;

              &:hover {
                text-decoration: none;
              }
            }
          }
        }

        .copyright {
          margin-top: 24rem;
          color: #fff;
          font-size: 16rem;
          font-weight: 500;
        }
      }
    }
  }

  .fixed-footer {
    position: fixed;
    left: 0;
    bottom: -160rem;
    width: 100%;
    height: 128rem;
    padding: 20rem;
    box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    z-index: 2;
    transition: bottom 300ms;

    &.show {
      bottom: 0;
    }
  }
}
@media (max-width: 1650px) {
  .lower {
    .site-header {
      nav {
        > ul {
          grid-template-columns: repeat(3, 150rem);
        }
      }
    }
    & .site-footer {
      & .inquiry {
        & a {
          &.request {
            &::before {
              left: 0;
              bottom: 0;
              width: 198rem;
              height: 166rem;
            }
          }

          &.online {
            &::before {
              left: auto;
              right: 0;
              bottom: 0;
              width: 146rem;
              height: 166rem;
            }
          }
        }
      }
    }
  }
}
@media (max-width: 768px) {
  body {
    font-size: 18rem;
  }

  .lower {
    padding-bottom: 68rem;

    .site-header {
      justify-content: space-between;
      grid-template-columns: auto 64rem;

      .title {
        grid-template-columns: 72rem auto;
        padding: 10rem;

        .text {
          margin-left: 8rem;
          font-size: 10rem;

          strong {
            display: block;
            font-size: 19rem;
            line-height: 1.4;
          }
        }
      }

      .drawer-button {
        position: relative;
        z-index: 2;
        background-color: var(--color-main);
        text-align: center;
        width: 64rem;
        height: 64rem;

        button {
          position: relative;
          width: 100%;
          height: 100%;

          .line {
            position: relative;
            display: block;
            width: 32rem;
            height: 2rem;
            margin-inline: auto;
            background-color: #fff;
            transition: 0.3s ease;

            &::before,
            &::after {
              content: "";
              position: absolute;
              left: 0;
              width: 100%;
              height: 2rem;
              background-color: #fff;
              transition: 0.3s ease;
            }

            &::before {
              top: -10rem;
            }

            &::after {
              top: 10rem;
            }
          }

          &[aria-expanded="true"] {
            background-color: #000;

            .line {
              background-color: transparent;

              &::before,
              &::after {
                top: 0;
              }

              &::before {
                transform: rotate(45deg);
              }

              &::after {
                transform: rotate(-45deg);
              }
            }
          }
        }
      }

      .drawer-menu {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100lvh;
        overflow: auto;
        background-color: #c9e0c9;
        visibility: hidden;
        opacity: 0;
        transition: 0.3s ease-out;

        &[data-expanded="true"] {
          visibility: visible;
          opacity: 1;
        }

        nav {
          padding: 100rem 40rem;
          > ul {
            > li {
              + li {
                margin-top: 40rem;
              }

              > :where(a, span) {
                text-decoration: underline;
                font-size: 20rem;
                font-weight: 700;
              }

              &.pulldown {
                span {
                  display: inline-block;
                  margin-bottom: 24rem;
                }

                ul {
                  li {
                    + li {
                      margin-top: 16rem;
                    }

                    a {
                      display: grid;
                      grid-template-columns: 24rem auto;
                      column-gap: 8rem;
                      align-items: baseline;
                      justify-content: flex-start;
                      width: fit-content;
                      color: #1e1e1e;
                      text-decoration: underline;

                      &::before {
                        content: "";
                        aspect-ratio: 1;
                        background: url(/assets/images/top/common/arrow-icon-right.svg) no-repeat center/ contain;
                        translate: 0 5rem;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    main {
      overflow: hidden;

      .breadcrumb {
        padding: 0 16rem 4rem;

        ol {
          width: 100%;

          li {
            display: inline-block;
            font-size: 12rem;
            line-height: 1.3;
          }
        }
      }

      .contents {
        width: calc(100% - 30rem);
        margin: 32rem 15rem 0;
        border-radius: 16rem 16rem 0 0;
        padding: 24rem 20rem 90rem;

        &::before {
          aspect-ratio: 375 / 666;
          background: url(/assets/images/top/main-visual/bg-sp.png) no-repeat center / cover;
        }
      }

      .mv {
        grid-template-columns: 1fr;
        padding-bottom: 178rem;

        &::after {
          width: 100%;
          aspect-ratio: 436 / 240;
          background: url(/assets/images/top/join-image01.svg) no-repeat center bottom / contain;
        }

        h1 {
          font-size: 24rem;
        }

        p {
          margin-top: 24rem;
          font-size: 18rem;
        }

        figure {
          margin-top: 40rem;
          grid-column: 1;
          grid-row: 3;

          img {
            border-radius: 16rem;
          }
        }
      }

      .introduction {
        display: block;
        margin-top: 32rem;
        column-gap: 0;

        .inner {
          display: block;
          padding: 24rem 20rem;
          border-radius: 16rem;

          p.image {
            width: 100%;
            margin-bottom: 20rem;

            img {
              width: 100%;
            }
          }

          ul {
            li {
              margin: 8rem 0;
              font-size: 16rem;
              padding-left: 1em;
              text-indent: -1em;
            }
          }
        }

        p.map-image {
          width: 100%;
          margin-top: 24rem;
        }
      }

      .index {
        margin-top: 32rem;
        padding: 32rem 24rem;
        border-radius: 16rem;

        dl {
          dt {
            margin-bottom: initial;
            font-size: 26rem;
          }

          dd {
            ol {
              li {
                display: grid;
                grid-template-columns: 24rem auto;
                column-gap: 8rem;

                &::before {
                  font-size: 14rem;
                }

                a {
                  grid-template-columns: auto 24rem;
                  column-gap: 8rem;
                  padding-block: 16rem 8rem;
                  font-size: 18rem;

                  &::after {
                    background-size: 12rem auto;
                  }
                }
              }
            }
          }
        }
      }

      .section {
        padding-block: 64rem 56rem;

        header,
        .text {
          display: block;
          margin-bottom: 64rem;

          &::before {
            width: 64rem;
            margin-inline: auto;
            font-size: 36rem;
          }

          h2 {
            text-align: center;
            font-size: 28rem;
            margin-block: 8rem 16rem;
          }

          p {
            font-size: 18rem;
          }

          figure {
            margin: 24rem 0 0 0;
          }
        }

        .inner {
          section {
            + section {
              padding-top: 56rem;
            }

            h3 {
              margin-bottom: 24rem;
              padding: 8rem 16rem;
              font-size: 20rem;
            }

            p.summary-text {
              display: block;
              padding: 24rem 20rem;
              border-radius: 16rem;
              margin-bottom: 0;
            }

            /* Q&Aレイアウト（モバイル） */
            dl {
              margin-bottom: 32rem;

              dt {
                margin-bottom: 16rem;
                font-size: 20rem;
              }

              dd {
                font-size: 18rem;
              }

              /* バージョン1: 画像を右端に配置（モバイルでは画像が下に） */
              &.qa-layout-right {
                .qa-content {
                  grid-template-columns: 1fr;
                  gap: 24rem;
                }

                .qa-text {
                  order: -1;
                }

                .qa-image {
                  order: 1;
                }
              }

              /* バージョン2: 画像を左端に配置（モバイルでは画像が下に） */
              &.qa-layout-left {
                .qa-content {
                  grid-template-columns: 1fr;
                  gap: 24rem;
                }

                .qa-text {
                  order: -1;
                }

                .qa-image {
                  order: 1;
                }
              }

              /* バージョン3: 画像なし（モバイル） */
              &.qa-layout-none {
                .qa-content {
                  display: block;
                }

                .qa-text {
                  width: 100%;
                }
              }

              /* バージョン4: テキストの下に画像を2カラムで並べる（モバイルでは1カラム） */
              &.qa-layout-bottom-2col {
                .qa-content {
                  display: block;
                }

                .qa-text {
                  width: 100%;
                  margin-bottom: 24rem;
                }

                .qa-images-grid {
                  grid-template-columns: 1fr;
                  gap: 12rem;
                  justify-items: center;
                }

                .qa-image {
                  width: 100%;
                  max-width: 100%;
                }
              }
            }
          }
        }

        .table-wrapper {
          margin-block: 24rem;
          overflow-x: auto;

          + .inner {
            margin-top: 64rem;
          }

          table {
            width: 1100rem;

            &.c2 :where(th, td) {
              width: 100%;
            }

            &:not(.horizontal) {
              th {
                font-size: 18rem;
              }
            }

            td {
              padding: 12rem 17rem;
              font-size: 16rem;
              line-height: 1.4;

              ul {
                li {
                  &::before {
                    margin-right: 4rem;
                  }
                }

                &.column-count {
                  column-count: initial;
                  padding-right: initial;
                }
              }
            }

            &.horizontal {
              width: 100%;

              tr {
                display: grid;

                + tr {
                  margin-top: 16rem;
                }
              }

              th,
              td {
                padding: 12rem 14rem;
                font-size: 16rem;
              }

              td {
                margin-top: -1px;
              }
            }

            &.c1 {
              width: 100%;

              tr {
                display: grid;
                grid-template-columns: 1fr;

                + tr {
                  margin-top: 16rem;
                }

                :where(th, td) {
                  width: 100%;
                }

                td {
                  margin-top: -1px;

                  &:nth-child(even) {
                    background-color: #fff;
                  }

                  &:nth-child(odd) {
                    background-color: #f7f7f5;
                  }
                }
              }
            }
          }
        }

        ol {
          margin-block: 32rem;

          li {
            grid-template-columns: 40rem auto;
            align-items: flex-start;
            font-size: 18rem;

            &::before {
              font-size: 18rem;
            }

            + li {
              margin-top: 24rem;
            }
          }
        }

        .notes {
          p {
            &.asterisk {
              &::before {
                margin-left: initial;
              }
            }

            + p {
              margin-top: 16rem;
            }
          }

          ul {
            margin-block: 16rem;
          }

          .indent {
            grid-template-columns: 1fr;
          }
        }
      }

      .links {
        position: relative;
        width: 100%;
        margin-top: 112rem;
        background-color: initial;

        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 280rem;
          border-radius: 32rem;
          background-color: #f5f5e5;
        }

        ul {
          flex-direction: column;
          gap: 16rem;
          position: relative;
          translate: 0 -56rem;

          li {
            a {
              position: relative;
              width: 264rem;
              margin-inline: auto;
              padding: 16rem 15rem;
              border-radius: 16rem;
              text-align: initial;
              background: #13671a url(/assets/images/top/common/arrow-icon-right.svg) no-repeat right 16rem bottom 16rem / 24rem auto;

              dl {
                padding-right: 30rem;

                dt {
                  display: grid;
                  grid-template-columns: 64rem auto;
                  column-gap: 16rem;
                  align-items: center;
                  font-size: 22rem;
                  font-weight: 600;
                  line-height: 1.3;
                  letter-spacing: 0.03em;

                  &::before {
                    width: initial;
                    margin: initial;
                  }
                }

                dd {
                  margin-top: 8rem;
                  font-size: 18rem;
                  line-height: 1.33;
                }
              }
            }
          }
        }
      }

      .simulation {
        margin-top: 80rem;
        padding: 24rem 25rem 148rem;
        background-position: left 25rem top 24rem, center bottom;
        background-image: url(/assets/images/top/simulation-icon.svg), url(/assets/images/top/simulation-image01.svg);
        background-size: 64rem 64rem, 200rem auto;

        h3 {
          padding-left: 72rem;
          font-size: 22rem;
          line-height: 30rem;
        }

        p {
          width: auto;
          margin-top: 16rem;
          font-size: 18rem;
        }

        .button {
          margin-top: 16rem;

          a {
            width: 100%;
            height: 58rem;
            padding: calc(7rem - 1px) 16rem;
            font-size: 16rem;
            line-height: 22rem;
            background-position: right 15rem center;
          }
        }
      }

      .articles {
        position: relative;
        width: 100%;
        height: 517rem;
        margin-top: 40rem;
        padding: 32rem 20rem;

        &::before {
          left: -35rem;
          width: 100vw;
          height: 493rem;
          border-radius: 0 64rem 0 0;
        }

        hgroup {
          width: auto;
          margin: 0;

          .en {
            font-size: 36rem;
            line-height: 32rem;
          }

          h2 {
            margin-top: 10rem;
            font-size: 28rem;
            line-height: 32rem;
          }
        }

        .control {
          position: absolute;
          left: 0;
          bottom: 0;
          justify-content: center;
          gap: 24rem;
          width: 100%;
          margin: 0;
          display: inline-flex;

          button {
          }

          .prev-button {
            order: 1;
          }

          .next-button {
            order: 3;
          }

          p {
            order: 2;
            padding-left: 0;
          }
        }

        .splide__track {
          width: 100vw;
          height: 305rem;
          top: 140rem;
          left: -15rem;

          ul {
            li {
              width: 255rem;
              padding: 15rem;

              p {
                height: 48rem;
                margin-top: 16rem;
                font-size: 15rem;
                line-height: 24rem;
              }

              a {
                margin: 16rem auto 0;
                padding-left: 15rem;
                width: 155rem;
                height: 42rem;
              }
            }
          }
        }
      }

      .voices {
        position: relative;
        width: 100%;
        margin-top: 40rem;
        padding-bottom: 40rem;

        &::after {
          left: -15rem;
          width: calc(100% + 30rem);
          height: calc(100% - 384rem);
          border-radius: 0;
        }

        hgroup {
          .en {
            font-size: 36rem;
            line-height: 32rem;
          }

          h2 {
            margin-top: 10rem;
            font-size: 28rem;
            line-height: 32rem;
          }
        }

        .voices-control {
          margin-top: -20rem;

          button {
            width: 30rem;
            height: 30rem;
          }
        }

        .splide__track {
          width: 100%;
          margin-left: 0;
          margin-right: 0;
          padding-top: 50rem;
        }

        .voices-pagination {
          margin-top: 24rem;
          gap: 10rem;

          button {
            width: 10rem;
            height: 10rem;
          }
        }

        .splide__slide {
          width: 305rem;
          padding: 64rem 24rem 86rem;

          .image {
            top: -50rem;
            left: calc(50% - 50rem);
            width: 100rem;
          }

          .title {
            font-size: 20rem;
          }

          .meta {
            margin-top: 4rem;
            font-size: 14rem;
          }

          .text {
            font-size: 16rem;
          }

          .button {
            bottom: 28rem;
          }
        }
      }

      .faq {
        width: auto;
        margin-top: 80rem;
        padding: 32rem 15rem 90rem;
        border: 2rem solid #dddddd;
        border-radius: 16rem;

        &::after {
          left: calc(50% - 130rem);
          bottom: -8rem;
          width: 260rem;
          height: 67rem;
        }

        hgroup {
          .en {
            font-size: 36rem;
            line-height: 32rem;
          }

          h2 {
            margin-top: 10rem;
            font-size: 28rem;
            line-height: 32rem;
          }
        }

        dl {
          gap: 32rem;
          margin-top: 32rem;

          div {
            dt {
              padding-bottom: 8rem;

              span:first-child {
                font-size: 22rem;
                line-height: 26rem;
              }

              button {
                height: auto;
                padding: 0 40rem 0 48rem;
                font-size: 20rem;
                line-height: 26rem;

                i {
                  top: calc(50% - 16rem);
                  width: 32rem;
                  height: 32rem;

                  &::before,
                  &::after {
                    left: calc(50% - 8rem);
                    width: 16rem;
                  }
                }
              }
            }

            dd {
              &[aria-hidden="false"] {
                padding-top: 16rem;
              }

              .inner {
                padding-left: 48rem;

                span:first-child {
                  font-size: 22rem;
                  line-height: 26rem;
                }

                p {
                  font-size: 16rem;
                  line-height: 25.6rem;

                  + p {
                    margin-top: 8rem;
                  }
                }
              }
            }
          }
        }

        .others {
          margin-top: 32rem;

          p {
            position: relative;
            width: 254rem;
            margin: 0 auto;
            padding: 15rem 15rem 15rem 35rem;
            text-align: left;
            font-size: 16rem;
            line-height: 22.4rem;

            &::before {
              position: absolute;
              top: 15rem;
              left: 15rem;
            }
          }
        }
      }
    }

    .site-footer {
      .inquiry {
        flex-direction: column;

        a {
          width: 100%;
          height: auto;
          padding: 20rem;

          &.request {
            &::before {
              display: none;
            }
          }

          &.online {
            border-top: 2px solid #fff;
            border-left: none;

            &::before {
              display: none;
            }
          }

          .texts {
            position: relative;
            top: auto;
            height: auto;
            width: auto;
            padding: 0 44rem 0 76rem;

            p:nth-child(1) {
              font-size: 26rem;
              line-height: 32rem;
            }

            p:nth-child(2) {
              margin-top: 4rem;
              font-size: 18rem;
              line-height: 24rem;
            }
          }

          &.request .texts {
            right: auto;
            background-size: 64rem;
          }

          &.online .texts {
            left: auto;
            background-size: 64rem;
          }
        }
      }

      .bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16rem;
        padding: 40rem 40rem 143rem;
        background-size: 100% auto;

        .logo {
          width: 130rem;
        }

        .texts {
          .name {
            text-align: center;
            font-size: 20rem;
            line-height: 32rem;
          }

          ul {
            gap: 16rem;
            margin-top: 24rem;

            li {
              font-size: 16rem;
              line-height: 22.4rem;
              background-position: 0 2rem;
            }
          }

          .copyright {
            margin-top: 24rem;
            text-align: center;
            font-size: 12rem;
            line-height: 16rem;
          }
        }
      }
    }

    .fixed-footer {
      bottom: -68rem;
      height: 68rem;
      padding: 0;
      box-shadow: none;

      ul.sp {
        display: flex;
        gap: 2rem;
        height: 100%;
        padding-top: 2rem;
        background-color: #1e1e1e;

        li {
          width: 50%;
          height: 100%;

          a {
            display: flex;
            align-items: center;
            position: relative;
            width: 100%;
            height: 100%;
            padding: 0 10rem;
            color: #1e1e1e;
            font-size: 16rem;
            font-weight: bold;
            line-height: 20rem;
            background: var(--color-main);
            color: #ffffff;

            &::before {
              content: "";
              position: absolute;
              top: calc(50% - 12rem);
              right: 10rem;
              width: 24rem;
              height: 24rem;
              background: url(/assets/images/top/common/arrow-icon-right.svg) no-repeat 0 0 / contain;
            }
          }
        }
      }
    }
  }
}

/* ページ個別設定 */
@media (max-width: 768px) {
  #ideco {
    & main {
      & .section {
        &.sec03 {
          & header {
            margin-bottom: initial;
          }
        }
      }
    }
  }
}