.hero {
  position: relative;
  .hero-content {
    padding-block: var(--spc-48) var(--spc-6);
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    @media (max-width: 834px) {
      background-position: left;
    }
    .hero-content-inner {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row-reverse;
      justify-content: space-between;
      gap: var(--spc-12);
      @media (max-width: 834px) {
        display: block;
      }
      & > .f-title {
        max-width: 52rem;
      }
      & > .f-muryo {
        width: 12rem;
        @media (max-width: 834px) {
          position: absolute;
          inset: var(--spc-4) var(--spc-4) auto auto;
        }
        @media (max-width: 520px) {
          width: 9.6rem;
        }
      }
    }
  }
  .hero-bottom {
    padding-block: var(--spc-6) var(--spc-12);
    background-color: var(--c-mal);
  }
  .hero__advisor {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--spc-6);
    & > .f-urinushi {
      max-width: 52rem;
    }
    & > .f-makyokai {
      max-width: 32rem;
    }
  }
  .hero__saidaika {
    margin-top: var(--spc-8);
    & > img {
      &:first-of-type {
        @media (max-width: 520px) {
          display: none;
        }
        & + * {
          display: none;
          @media (max-width: 520px) {
            display: block;
          }
        }
      }
    }
    .hero__saidaika-content {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
      gap: var(--spc-3);
      margin-top: var(--spc-8);
      & > article {
        display: flex;
        flex-direction: column;
        padding-block: var(--spc-4);
        border-radius: var(--spc-2);
        background-color: var(--c-white);
        .hero__saidaika_text {
          flex: 1;
          display: grid;
          padding: var(--spc-4) var(--spc-4) 0 var(--spc-4);
          & > * {
            align-self: center;
            font-weight: var(--fw-bold);
            text-align: center;
            span {
              color: var(--c-yellow-darken);
            }
          }
        }
      }
    }
  }
  .hero__mitsukaru {
    display: flex;
    gap: var(--spc-12);
    margin-top: var(--spc-8);
    @media (max-width: 1024px) {
      flex-direction: column;
      gap: var(--spc-2);
    }
    & + * {
      margin-top: var(--spc-12);
    }
    & > * {
      flex: 1;
    }
    .hero__mitsukaru-head {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      h3 {
        margin-block: var(--spc-4);
        text-align: center;
        color: var(--c-white);
        span {
          color: var(--c-yellow);
        }
      }
    }
    .hero__mitsukaru-content {
      padding-block: var(--spc-6);
      p {
        color: var(--c-white);
        & + p {
          margin-top: var(--spc-4);
        }
      }
    }
  }
  .hero__cv {
    width: fit-content;
    .hero__cv-head {
      padding: var(--spc-2) var(--spc-3);
      border-radius: var(--spc-2) var(--spc-2) 0 0;
      font-weight: var(--fw-bold);
      background-color: var(--c-mal-600);
      color: var(--c-white);
      span {
        color: var(--c-yellow);
      }
    }
    .hero__cv-content {
      display: flex;
      flex-wrap: wrap;
      gap: var(--spc-2);
      padding: var(--spc-2);
      border-radius: 0 0 var(--spc-2) var(--spc-2);
      background-color: var(--c-white);
    }
  }
}

.case {
  padding-bottom: var(--spc-32);
  @media (max-width: 834px) {
    padding-bottom: var(--spc-12);
  }
  .case-head {
    padding-block: var(--spc-32);
    background-size: cover;
    background-position: top right;
    background-repeat: no-repeat;
    @media (max-width: 834px) {
      padding-block: var(--spc-12) var(--spc-24);
    }
    .case-head-inner {
      width: fit-content;
      padding: var(--spc-6);
      border-radius: var(--spc-4);
      background-color: var(--c-white);
      @media (max-width: 834px) {
        width: 100%;
      }
      h2 {
        margin: var(--spc-4) var(--spc-8);
        @media (max-width: 834px) {
          margin: 0 0 var(--spc-4) 0;
        }
      }
      ul {
        border-radius: var(--spc-2);
        background-color: var(--c-gray-900);
        & > li {
          display: flex;
          align-items: center;
          gap: var(--spc-2);
          padding: var(--spc-4);
          font-weight: var(--fw-bold);
          & + li {
            border-top: solid .1rem var(--c-white);
          }
          img {
            width: 1.8rem;
            height: 1.8rem;
          }
        }
      }
    }
  }
  .case-content {
    margin-top: calc(var(--spc-12) * -1);
    .case-content-head {
      padding: var(--spc-8) var(--spc-12);
      border-radius: var(--spc-4);
      background-color: var(--c-mal);
      @media (max-width: 834px) {
        padding: var(--spc-4) var(--spc-6);
      }
      h3 {
        text-align: center;
        color: var(--c-white);
        & + * {
          margin-top: var(--spc-3);
        }
      }
      span {
        display: flex;
        gap: var(--spc-4);
        align-items: center;
        width: fit-content;
        margin-inline: auto;
        padding: var(--spc-4);
        border-radius: var(--spc-2);
        font-weight: var(--fw-bold);
        color: var(--c-white);
        background-color: var(--c-danger);
        img {
          width: 4.8rem;
          @media (max-width: 834px) {
            width: 2.4rem;
          }
        }
      }
    }
    .case-content-content {
      display: flex;
      gap: var(--spc-6);
      margin-top: var(--spc-12);
      @media (max-width: 1024px) {
        flex-direction: column;
      }
    }
  }
  .case__item {
    display: flex;
    flex-direction: column;
    & > h3 {
      span {
        margin-right: .25em;
        padding: .25em .5em;
        border: solid .1rem var(--c-yellow-darken);
        border-radius: var(--spc-2);
        color: var(--c-yellow-darken);
      }
      br.-hidden {
        @media (max-width: 1024px) {
          display: none;
        }
      }
    }
    & > img {
      margin-top: var(--spc-6);
      border-radius: var(--spc-2);
    }
    & > ul {
      flex: 1;
      margin-top: var(--spc-2);
      border-radius: var(--spc-2);
      background-color: var(--c-gray-900);
      & > li {
        display: flex;
        align-items: center;
        gap: var(--spc-2);
        padding: var(--spc-4);
        font-weight: var(--fw-bold);
        & + li {
          border-top: solid .1rem var(--c-white);
        }
        img {
          width: 2.4rem;
          height: 2.4rem;
        }
      }
    }
  }
}

.trouble {
  .trouble-head {
    padding-block: var(--spc-32);
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
    @media (max-width: 834px) {
      padding-block: var(--spc-12);
      background-position: right;
    }
  }
  .trouble-content {
    position: relative;
    margin-top: calc(var(--spc-12) * -1);
    @media (max-width: 834px) {
      margin-top: 0;
      padding-top: var(--spc-12);
    }
    &:before {
      content: "";
      position: absolute;
      inset: var(--spc-12) 0 0 0;
      background-color: var(--c-mal);
      @media (max-width: 834px) {
        inset: 0;
      }
    }
    & > * {
      position: relative;
    }
  }
  .trouble__title {
    * {
      text-align: center;
      color: var(--c-white);
    }
    span {
      font-weight: var(--fw-bold);
    }
  }
  .trouble__catch {
    margin-top: var(--spc-4);
    .trouble__catch-head {
      img {
        width: 16rem;
        margin-inline: auto;
        border-radius: 100%;
      }
      h3 {
        margin-top: var(--spc-4);
        text-align: center;
        color: var(--c-white);
      }
    }
    .trouble__catch-content {
      margin-top: var(--spc-4);
      img {
        &.-pc {
          @media (max-width: 834px) {
            display: none;
          }
        }
        &.-sp {
          display: none;
          @media (max-width: 834px) {
            display: block;
          }
        }
      }
    }
  }
  .trouble__assignment {
    position: relative;
    & > img {
      position: absolute;
      inset: -18% auto auto 0;
      width: 28rem;
      @media (max-width: 834px) {
        display: none;
      }
    }
    h3 {
      position: relative;
      text-align: center;
      color: var(--c-white);
    }
    .trouble__assignment-content {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
      gap: var(--spc-6);
      position: relative;
      margin-top: var(--spc-6);
      article {
        container: assignment / inline-size;
        & > .inner {
          display: flex;
          height: 100%;
          padding: var(--spc-4);
          border-radius: var(--spc-2);
          background-color: var(--c-gray-600);
          @container assignment (max-width: 520px) {
            display: block;
          }
          & > .f-thumb {
            width: 22rem;
            @container assignment (max-width: 520px) {
              width: 100%;
            }
            img {
              border-radius: var(--spc-2);
            }
          }
          & > .f-content {
            flex: 1;
            padding-left: var(--spc-4);
            @container assignment (max-width: 520px) {
              margin-top: var(--spc-2);
              padding-left: 0;
            }
            h4 {
              display: flex;
              align-items: center;
              gap: var(--spc-2);
              img {
                width: 3.6rem;
                height: 3.6rem;
              }
            }
            p {
              margin-top: var(--spc-2);
              padding-top: var(--spc-2);
              border-top: solid .1rem var(--c-white);
            }
          }
        }
      }
    }
  }
  .trouble__structure {
    margin-top: var(--spc-6);
    h3 {
      text-align: center;
      color: var(--c-white);
    }
    img {
      margin-top: var(--spc-6);
    }
  }
}

.solution {
  .solution-head {
    padding-block: var(--spc-24);
    background: linear-gradient(var(--c-mal) 0%, var(--c-mal-300) 100%);
    @media (max-width: 834px) {
      padding-block: var(--spc-12);
    }
    h3 {
      text-align: center;
      color: var(--c-white);
    }
  }
  .solution-content {
    padding-bottom: var(--spc-24);
    background-color: var(--c-mal-300);
    .solution-content-head {
      img {
        max-width: 32rem;
        margin-inline: auto;
        @media (max-width: 834px) {
          max-width: 24rem;
        }
      }
    }
    .solution-content-content {
      margin-top: var(--spc-8);
    }
  }
  .solution__contents {
    margin-top: var(--spc-24);
    @media (max-width: 834px) {
      margin-top: var(--spc-12);
    }
    .solution__contents-head {
      h4 {
        text-align: center;
        color: var(--c-yellow);
      }
    }
    .solution__contents-content {
      margin-top: var(--spc-4);
      section {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spc-12);
        img {
          max-width: calc((100% - var(--spc-12)) / 2);
          @media (max-width: 1024px) {
            max-width: 64rem;
            margin-top: var(--spc-4);
          }
          @media (max-width: 834px) {
            max-width: 48rem;
            margin-top: var(--spc-4);
          }
        }
        & + section {
          margin-top: var(--spc-12);
        }
      }
    }
    .solution__contents-bottom {
      margin-top: var(--spc-4);
      text-align: center;
      font-weight: var(--fw-bold);
      color: var(--c-white);
      img {
        width: 32rem;
        margin-inline: auto;
        @media (max-width: 834px) {
          width: 24rem;
        }
      }
    }
  }
  .solution__reason {
    background-color: var(--c-white);
    & + .solution__reason {
      margin-top: var(--spc-8);
    }
    .solution__reason-head {
      display: flex;
      align-items: center;
      gap: var(--spc-12);
      padding-top: var(--spc-6);
      @media (max-width: 834px) {
        gap: var(--spc-6);
      }
      &:before,
      &:after {
        content: "";
        flex: 1;
        height: .1rem;
        background-color: var(--c-yellow);
      }
      img {
        width: 18.4rem;
        @media (max-width: 834px) {
          width: 12rem;
        }
      }
    }
    .solution__reason-content {
      padding: var(--spc-8);
      @media (max-width: 834px) {
        padding: var(--spc-4);
      }
      h3 {
        text-align: center;
        @media (max-width: 834px) {
          text-align: left;
        }
        span {
          color: var(--c-yellow-darken);
        }
      }
      p {
        max-width: 48rem;
        margin-top: var(--spc-4);
        margin-inline: auto;
        span {
          font-weight: var(--fw-bold);
          &.-color {
            color: var(--c-yellow-darken);
          }
        }
      }
    }
    .solution__reason-bottom {
      padding: 0 var(--spc-8) var(--spc-8);
      @media (max-width: 834px) {
        padding: 0 var(--spc-4) var(--spc-4);
      }
      & > section {
        & + section {
          margin-top: var(--spc-8);
          padding-top: var(--spc-8);
          border-top: solid .1rem var(--c-gray-900);
        }
      }
      .solution__reason_advisor {
        display: flex;
        flex-wrap: wrap;
        & > .f-img {
          width: 50%;
          @media (max-width: 834px) {
            width: 100%;
          }
        }
      }
      .solution__reason_network {
        & > p {
          max-width: 72rem;
          & + * {
            margin-top: var(--spc-4);
          }
        }
      }
      .solution__reason_model {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spc-8);
        padding: var(--spc-8);
        border-radius: var(--spc-4) var(--spc-4) 0 0;
        background-color: var(--c-gray-900);
        @media (max-width: 1024px) {
          flex-direction: column;
          gap: var(--spc-4);
        }
        @media (max-width: 834px) {
          padding: var(--spc-4);
          border-radius: var(--spc-2) var(--spc-2) 0 0;
        }
        .solution__reason_model-head {
          max-width: 34rem;
          p {
            margin-top: var(--spc-2);
          }
        }
        .solution__reason_model-content {
          flex: 1;
          display: grid;
          background-color: var(--c-white);
          img {
            align-self: center;
          }
        }
        &.-mal {
          border-radius: 0 0 var(--spc-4) var(--spc-4);
          background-color: var(--c-mal);
          @media (max-width: 834px) {
            border-radius: 0 0 var(--spc-2) var(--spc-2);
          }
          h5,
          p {
            color: var(--c-white);
          }
        }
      }
      .solution__reason_selladvisors {
        .solution__reason_selladvisors-content {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
          gap: var(--spc-6);
          margin-top: var(--spc-4);
          @media (max-width: 834px) {
            grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
          }
          article {
            display: flex;
            flex-direction: column;
            gap: var(--spc-2);
            h5 {
              display: flex;
              align-items: center;
              gap: var(--spc-3);
              margin-top: var(--spc-1);
              img {
                width: 6.4rem;
              }
            }
            span {
              display: block;
              font-weight: var(--fw-bold);
              color: var(--c-yellow-darken);
            }
          }
        }
      }
      .solution__reason_commission {
        border-radius: var(--spc-4);
        background-color: var(--c-gray-900);
        .solution__reason_commission-head,
        .solution__reason_commission-content {
          padding: var(--spc-8);
          @media (max-width: 520px) {
            padding: var(--spc-4);
          }
        }
        .solution__reason_commission-head {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: var(--spc-8);
          @media (max-width: 1024px) {
            gap: var(--spc-4);
          }
          & > .f-head {
            width: 24rem;
            border-right: solid .1rem var(--c-gray-600);
            padding-right: var(--spc-8);
            @media (max-width: 1024px) {
              border: none;
            }
          }
        }
        .solution__reason_commission-content {
          border-top: solid .1rem var(--c-gray-600);
          & > img {
            width: 29rem;
            margin-inline: auto;
            @media (max-width: 834px) {
              width: 20rem;
            }
          }
          & > ul {
            container: commission / inline-size;
            margin-top: var(--spc-6);
            @media (max-width: 834px) {
              margin-top: var(--spc-3);
            }
            & > li {
              display: grid;
              grid-template-columns: auto 1fr 28rem;
              grid-template-areas: "number content thumb";
              gap: var(--spc-4);
              border-radius: var(--spc-2);
              background-color: var(--c-white);
              overflow: hidden;
              @container commission (max-width: 860px) {
                grid-template-columns: 1fr 28rem;
                grid-template-rows: auto auto;
                grid-template-areas: "number thumb" "content thumb";
              }
              @container commission (max-width: 640px) {
                grid-template-columns: auto;
                grid-template-rows: auto auto auto;
                grid-template-areas: "thumb" "number" "content";
              }
              & + li {
                margin-top: var(--spc-1);
              }
              & > .g-number,
              & > .g-content {
                padding: var(--spc-6);
              }
              & > .g-number {
                grid-area: number;
                @container commission (max-width: 860px) {
                  width: 12rem;
                  padding-bottom: 0;
                }
                @container commission (max-width: 640px) {
                  width: 9.6rem;
                  padding-top: 0;
                }
              }
              & > .g-content {
                grid-area: content;
                @container commission (max-width: 860px) {
                  padding-top: 0;
                }
                p {
                  margin-top: var(--spc-2);
                }
              }
              & > .g-thumb {
                grid-area: thumb;
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                @container commission (max-width: 640px) {
                  aspect-ratio: 3 / 1;
                }
              }
            }
          }
        }
      }
    }
  }
}

.process {
  padding-block: var(--spc-24);
  background-color: var(--c-mal);
  @media (max-width: 834px) {
    padding-block: var(--spc-12);
  }
  .process-head {
    h2 {
      text-align: center;
      color: var(--c-white);
    }
  }
  .process-content {
    margin-top: var(--spc-6);
    padding: var(--spc-12);
    background-color: var(--c-gray-900);
    @media (max-width: 834px) {
      padding: var(--spc-6);
    }
    h3 {
      display: flex;
      flex-wrap: wrap;
      row-gap: var(--spc-2);
      img {
        width: 18rem;
        margin-right: var(--spc-2);
      }
    }
  }
  .process-bottom {
    padding: var(--spc-12);
    background-color: var(--c-mal-300);
    @media (max-width: 834px) {
      padding: var(--spc-6);
    }
    .process-bottom-head {
      h3 {
        text-align: center;
      }
      p {
        max-width: 56rem;
        margin-top: var(--spc-2);
        margin-inline: auto;
      }
    }
    .process-bottom-content {
      margin-top: var(--spc-2);
    }
  }
  .process__step {
    width: fit-content;
    margin-top: var(--spc-6);
    border: solid .1rem var(--c-yellow-darken);
    border-radius: var(--spc-2);
    background-color: var(--c-white);
    & > section {
      display: flex;
      gap: var(--spc-6);
      padding: var(--spc-4);
      @media (max-width: 834px) {
        display: block;
      }
      & + section {
        border-top: solid .1rem var(--c-yellow-darken);
      }
      & > .f-head {
        img {
          width: 6.4rem;
        }
      }
      & > .f-content {
        padding-block: var(--spc-2);
      }
    }
  }
  .process__model {
    max-width: 64rem;
    margin-top: var(--spc-4);
    border-radius: var(--spc-2);
    overflow: hidden;
  }
  .process__process {
    margin-top: var(--spc-4);
    border-radius: var(--spc-2);
    overflow: hidden;
  }
}

.comparison {
  padding-block: var(--spc-24);
  background-color: var(--c-gray-900);
  @media (max-width: 834px) {
    padding-block: var(--spc-12);
  }
  .comparison-head {
    h2 {
      text-align: center;
    }
  }
  .comparison-content {
    margin-top: var(--spc-6);
  }
}

.aboutus {
  padding-block: var(--spc-24);
  background-color: var(--c-mal);
  @media (max-width: 834px) {
    padding-block: var(--spc-12);
  }
  & > h2 {
    display: flex;
    justify-content: center;
    color: var(--c-white);
    img {
      width: 20rem;
      margin-inline: var(--spc-2);
    }
  }
  .aboutus__section {
    padding-block: var(--spc-12);
    @media (max-width: 834px) {
      padding-block: var(--spc-6);
    }
    .aboutus__section-head {
      display: flex;
      align-items: center;
      gap: var(--spc-8);
      &:before,
      &:after {
        content: "";
        flex: 1;
        height: .1rem;
        background-color: var(--c-yellow);
      }
      h3 {
        text-align: center;
        color: var(--c-white);
        span {
          &.-color {
            color: var(--c-yellow);
          }
        }
      }
    }
    .aboutus__section-content {
      margin-top: var(--spc-6);
    }
    .aboutus__section_logos {
      display: flex;
      flex-wrap: wrap;
      padding: var(--spc-6);
      border-radius: var(--spc-2);
      background-color: var(--c-white);
      & + span {
        display: block;
        margin-top: var(--spc-2);
        text-align: right;
        color: var(--c-white);
      }
      img {
        width: 50%;
      }
    }
  }
  .aboutus__message {
    .aboutus__message-head {
      display: flex;
      @media (max-width: 1024px) {
        display: block;
      }
      & > * {
        width: 50%;
        @media (max-width: 1024px) {
          width: auto;
        }
      }
      & > .f-thumb {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        @media (max-width: 1024px) {
          aspect-ratio: 16 / 9;
        }
      }
      & > .f-title {
        display: grid;
        margin-inline: var(--spc-12);
        padding-block: var(--spc-8);
        border-top: solid .1rem var(--c-yellow);
        border-bottom: solid .1rem var(--c-yellow);
        @media (max-width: 1024px) {
          margin-top: var(--spc-6);
        }
        @media (max-width: 1024px) {
          margin-inline: var(--spc-6);
        }
        .aboutus__message_contents {
          align-self: center;
          .aboutus__message_contents-head {
            h3 {
              color: var(--c-white);
              span {
                &.-color {
                  color: var(--c-yellow);
                }
              }
            }
          }
          .aboutus__message_contents-content {
            display: flex;
            gap: var(--spc-4);
            margin-top: var(--spc-4);
            & > .f-quote {
              width: 3.2rem;
              @media (max-width: 1024px) {
                width: 2.4rem;
              }
            }
            p {
              color: var(--c-white);
            }
          }
        }
      }
    }
    .aboutus__message-content {
      margin-top: var(--spc-6);
      padding: var(--spc-16) var(--spc-6);
      background-color: var(--c-white);
      .aboutus__message-content-inner {
        max-width: 56rem;
        margin-inline: auto;
        p {
          span {
            font-weight: var(--fw-bold);
            &.-color {
              color: var(--c-yellow-darken);
            }
          }
        }
        & > section {
          & + section {
            margin-top: var(--spc-12);
          }
          & > p {
            & + p {
              margin-top: var(--spc-3);
            }
          }
          section {
            &.-accent {
              padding: var(--spc-4) var(--spc-8);
              background-color: var(--c-mal);
              @media (max-width: 834px) {
                padding: var(--spc-2) var(--spc-4);
              }
              p {
                display: flex;
                gap: var(--spc-3);
                font-weight: var(--fw-bold);
                color: var(--c-white);
                img {
                  width: 2.4rem;
                  height: 4rem;
                  @media (max-width: 834px) {
                    width: 1.2rem;
                    height: 2rem;
                    margin-top: .4em;
                  }
                }
              }
            }
            &.-quote {
              position: relative;
              padding-left: var(--spc-16);
              @media (max-width: 834px) {
                padding-left: 0;
              }
              img {
                position: absolute;
                inset: 0 auto auto 0;
                width: 4.8rem;
                @media (max-width: 834px) {
                  position: relative;
                  width: 2.4rem;
                  margin-bottom: var(--spc-4);
                }
              }
              p {
                padding-bottom: var(--spc-3);
                border-bottom: solid .1rem var(--c-gray-900);
                font-weight: var(--fw-bold);
                & + p {
                  margin-top: var(--spc-3);
                }
              }
            }
            &.-bottom {
              p {
                text-align: right;
              }
            }
          }
        }
      }
    }
  }
}

.faq {
  padding-block: var(--spc-24);
  @media (max-width: 834px) {
    padding-block: var(--spc-12);
  }
  .faq-head {
    img {
      width: 13.2rem;
      margin-inline: auto;
      @media (max-width: 834px) {
        width: 9.6rem;
      }
    }
    h2 {
      text-align: center;
    }
  }
  .faq-content {
    border: solid .1rem var(--c-mal);
    margin-top: var(--spc-12);
    @media (max-width: 834px) {
      margin-top: var(--spc-6);
    }
  }
  .faq__qa {
    & + .faq__qa {
      border-top: solid .1rem var(--c-mal);
    }
    & > section {
      display: flex;
      &.-q {
        & > .f-content {
          font-weight: var(--fw-bold);
        }
      }
      &.-a {
        background-color: var(--c-mal-300);
      }
      & > .f-head {
        width: 8rem;
        padding: var(--spc-6);
        @media (max-width: 834px) {
          width: 3.2rem;
          padding: var(--spc-6) 0 var(--spc-6) var(--spc-4);
        }
      }
      & > .f-content {
        flex: 1;
        display: grid;
        padding: var(--spc-4);
        & > * {
          align-self: center;
        }
      }
    }
  }
}

.contacts {
  padding-block: var(--spc-24);
  background-color: var(--c-mal-300);
  @media (max-width: 834px) {
    padding-block: var(--spc-12);
  }
  .contacts__section {
    display: flex;
    gap: var(--spc-6);
    @media (max-width: 1024px) {
      flex-direction: column;
      gap: var(--spc-2);
    }
    &.-head {
      @media (max-width: 1024px) {
        align-items: center;
      }
      h2 {
        @media (max-width: 1024px) {
          text-align: center;
        }
      }
      a {
        @media (max-width: 1024px) {
          margin-inline: auto;
        }
      }
      .f-head {
        @media (max-width: 834px) {
          width: 9.6rem;
        }
      }
      & + * {
        margin-top: var(--spc-12);
      }
    }
    &.-block {
      display: block;
      .f-head {
        width: 100%;
        @media (max-width: 834px) {
          display: block;
        }
        &.-required {
          &:after {
            @media (max-width: 834px) {
              margin-top: var(--spc-1);
            }
          }
        }
        span {
          display: block;
          margin-top: var(--spc-2);
        }
        & + * {
          margin-top: var(--spc-3);
        }
      }
    }
    & + .contacts__section {
      margin-top: var(--spc-6);
      padding-top: var(--spc-6);
      border-top: solid .1rem var(--c-white);
    }
    .f-head {
      width: 16rem;
      @media (max-width: 834px) {
        display: flex;
        align-items: center;
        gap: var(--spc-2);
        width: 100%;
      }
      p {
        line-height: 1em;
        font-weight: var(--fw-bold);
      }
      &.-required {
        &:after {
          content: "必須";
          display: block;
          width: fit-content;
          margin-top: var(--spc-1);
          padding: var(--spc-1) var(--spc-2);
          border: solid .1rem var(--c-accent);
          border-radius: var(--spc-1);
          font-size: var(--fs-3xs);
          font-weight: var(--fw-bold);
          line-height: 1em;
          color: var(--c-accent);
        }
      }
    }
    .f-content {
      flex: 1;
      &.-checkbox {
        span {
          margin: 0;
          label {
            display: flex;
            gap: var(--spc-2);
            cursor: pointer;
            input {
              width: fit-content;
            }
            span {
              font-size: var(--fs-xs);
              font-weight: var(--fw-bold);
            }
          }
        }
      }
      span {
        display: block;
        input,
        textarea {
          display: block;
          width: 100%;
          padding: .75em 1em;
          border-radius: var(--spc-2);
          font-size: var(--fs-md);
          @media (max-width: 834px) {
            font-size: var(--fs-md-sp);
          }
          &::placeholder {
            color: var(--c-gray-600);
          }
          &.-short {
            max-width: 36rem;
          }
        }
      }
    }
    .contacts__section_notice {
      margin-top: var(--spc-4);
      padding: var(--spc-6) var(--spc-8);
      border-radius: var(--spc-4);
      font-weight: var(--fw-bold);
      color: var(--c-white);
      background-color: var(--c-mal);
      span {
        display: inline;
        color: var(--c-yellow);
      }
      & + * {
        margin-top: var(--spc-4);
      }
    }
  }
}

.footer {
  padding: var(--spc-8);
  background-color: var(--c-mal);
  @media (max-width: 1024px) {
    padding: var(--spc-8) var(--spc-8) var(--spc-40);
  }
  .footer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    & > .f-logo {
      width: 17.2rem;
    }
    & > .f-link {
      a {
        display: block;
        color: var(--c-white);
      }
    }
  }
  .footer-content {
    display: flex;
    justify-content: space-between;
    margin-top: var(--spc-8);
    border-top: solid .1rem var(--c-mal-600);
    padding-top: var(--spc-4);
    @media (max-width: 1024px) {
      display: block;
    }
    & > .f-content {
      ul {
        & > li {
          display: flex;
          gap: var(--spc-2);
          color: var(--c-gray-600);
          & + li {
            margin-top: var(--spc-2);
          }
          & > .f-head {
            width: 6rem;
          }
        }
      }
    }
    & > .f-bottom {
      width: 24rem;
      @media (max-width: 1024px) {
        margin: var(--spc-6) 0 0 auto;
      }
    }
  }
  .footer-bottom {
    margin-top: var(--spc-8);
    color: var(--c-gray-600);
  }
}

.header {
  position: fixed;
  inset: var(--spc-8) auto auto var(--spc-9);
  width: fit-content;
  z-index: var(--z-50);
  @media (max-width: 1024px) {
    inset: var(--spc-6) auto auto var(--spc-6);
  }
  a {
    display: block;
    width: 18rem;
    @media (max-width: 1024px) {
      width: 16rem;
    }
  }
}

.nav {
  position: fixed;
  inset: 0 0 auto auto;
  max-width: 64rem;
  z-index: var(--z-50);
  @media (max-width: 1024px) {
    inset: auto 0 0 0;
    margin: auto;
  }
  .nav-head {
    padding: var(--spc-2) var(--spc-3);
    font-weight: var(--fw-bold);
    background-color: var(--c-mal-600);
    color: var(--c-white);
    @media (max-width: 1024px) {
      text-align: center;
    }
    span {
      color: var(--c-yellow);
    }
  }
  .nav-content {
    display: flex;
    gap: var(--spc-2);
    padding: var(--spc-2);
    border-radius: 0 0 0 var(--spc-10);
    background-color: var(--c-white);
    @media (max-width: 1024px) {
      border-radius: 0;
    }
  }
  .nav__tel,
  .nav__cv {
    display: block;
  }
  .nav__tel {
    flex: 0 0 calc((368 / 613 * 100%) - (var(--spc-2) * 245 / 613));
  }
  .nav__cv {
    flex: 0 0 calc((245 / 613 * 100%) - (var(--spc-2) * 368 / 613));
  }
}

.c-tel {
  display: block;
  max-width: 36.8rem;
}

.c-cv {
  display: block;
  max-width: 24.5rem;
}

.wpcf7-submit {
  margin-top: var(--spc-6);
  padding: 1em 2em;
  border-radius: var(--spc-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--c-white);
  background-color: var(--c-accent);
}

.thanks {
  display: flex;
  flex-direction: column;
  height: 100%;
  .thanksHero {
    flex: 1;
    padding-block: var(--spc-32);
  }
}