.b-firstView {
  display: grid;
  grid-template-columns: 160fr 132fr 1248fr 380fr;
  grid-template-rows: 120fr auto 5em auto 1.5em auto 3em auto 4em 5em;
  min-height: calc(100svh - 60px);
  font-weight: bold;
  color: var(--color-gray-900);

  --base-font-size: 1rem;
  font-size: var(--base-font-size);

  @media (width < 1536px) {
    --base-font-size: 0.9rem;
  }
  @media (width < 1280px) {
    --base-font-size: 0.8rem;
  }
  @media (width < 1024px) {
    --base-font-size: 0.6rem;
  }
  @media (width < 768px) {
    --base-font-size: 0.5rem;
  }
  @media (width < 640px) {
    --base-font-size: 0.4rem;
  }

  .b-firstView-mainCopy {
    grid-column: 2 / span 2;
    grid-row: 2;
    font-weight: bold;
    font-size: 3.75em;
    line-height: 1.5;
    letter-spacing: 0.06em;
  }

  .b-firstView-subCopy {
    grid-column: 2 / span 2;
    grid-row: 4;
    font-size: 2em;
    color: var(--color-primary-700);
  }

  .b-firstView-text {
    grid-column: 2 / span 2;
    grid-row: 6;
    font-size: 1.125em;
    @media (width < 640px) {
      font-size: 1.7em;
    }
  }

  .b-firstView-links {
    grid-column: 2 / span 2;
    grid-row: 8;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
  }

  .b-firstView-bgImage {
    grid-column: 3 / -1;
    grid-row: 1 / -2;
    object-fit: cover;
    height: 100%;
    width: 100%;
  }
}

.b-advantage {
  .b-advantage-inner {
    display: grid;
    row-gap: var(--spacing-4xl);
    padding-block: var(--spacing-5xl);
  }
  .b-advantage-description {
    font-size: var(--text-3xl);
    text-align: center;
    font-weight: bold;
  }
  .b-advantage-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    place-items: center;

    > img {
      padding-inline-end: var(--spacing-3xl);
    }

    > p {
      display: grid;
      row-gap: 1.6em;
      font-size: var(--text-lg);
    }

    @media (width < 768px) {
      grid-template-columns: 1fr;
      gap: var(--spacing-xl);

      > img {
        padding-inline-end: 0;
      }
    }
  }
}

.b-reasons {
  background-color: var(--color-gray-50);

  .b-reasons-inner {
    display: grid;
    row-gap: var(--spacing-2xl);
    padding-block: var(--spacing-4xl);
  }

  .b-reasons-title {
    font-size: var(--text-3xl);
    font-weight: bold;
    text-align: center;
    color: var(--color-primary-300);
  }
  .b-reasons-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-template-rows: repeat(3, auto);
    gap: var(--spacing-3xl) var(--spacing-xl);
    padding-inline: var(--spacing-4xl);

    > li {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      row-gap: var(--spacing-sm);
      justify-items: center;

      > h3 {
        text-align: center;
        place-self: center;
        font-size: var(--text-xl);
      }
    }
  }
  .b-reasons-link {
    display: flex;
    justify-content: center;
  }
}

.b-services {
  .b-services-inner {
    display: grid;
    row-gap: var(--spacing-2xl);
    padding-block: var(--spacing-4xl);
  }
  .b-services-title {
    padding-bottom: var(--spacing-md);
  }
  .b-services-description {
    font-size: var(--text-3xl);
    text-align: center;
    font-weight: bold;
  }
  .b-services-category {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-lg);
    color: var(--color-white);

    dt button,
    a.all-services {
      background-color: var(--color-primary-300);
      padding: var(--spacing-sm);
      text-align: center;
      font-size: var(--text-lg);
      font-weight: bold;
      border: none;
      width: 100%;

      @media (hover: hover) {
        &:hover {
          background-color: var(--color-primary-100);
          color: var(--color-black);
        }
      }

      &.js-isActive {
        background-color: var(--color-primary-100);
        color: var(--color-black);
      }
    }
    a.all-services {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;

      &::after {
        --size: 1em;
        content: "";
        display: block;
        background-color: currentColor;
        mask-image: url("../images/common/icon-arrow-right.svg");
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        width: var(--size);
        height: var(--size);
      }
    }

    dd {
      position: absolute;
      left: 0;
      width: 100%;
      background-color: var(--color-primary-100);
      color: var(--color-black);
      overflow: hidden;

      > ul {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
        column-gap: var(--spacing-3xl);
        padding: var(--spacing-xl) var(--spacing-3xl);

        @media (max-width: 640px) {
          grid-template-columns: 1fr;
          padding: var(--spacing-xl) var(--spacing-md);
        }

        > li {
          border-bottom: 1px solid currentColor;

          > a {
            display: block;
            padding-block: 0.8em;
            padding-inline-start: 1em;

            &::before {
              content: "・";
              margin-inline-start: -1em;
            }
          }
        }
      }
    }
  }
  .b-services-featured-title {
    font-size: var(--text-3xl);
    font-weight: bold;
    color: var(--color-primary-300);
    text-align: center;
  }
  .b-services-featured {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
    gap: var(--spacing-lg) var(--spacing-2xl);

    @media (max-width: 640px) {
      grid-template-columns: 1fr;
    }

    > li {
      display: grid;
      > a {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: var(--spacing-md) var(--spacing-lg);
        background-color: var(--color-primary-50);
        padding: var(--spacing-md);

        @media (hover: hover) {
          &:hover {
            background-color: color-mix(
              in srgb,
              var(--color-primary-50),
              var(--color-primary-100) 30%
            );
          }
        }

        dt {
          font-size: var(--text-xl);
          padding-block-end: 0.5em;
        }
      }
    }
  }
}
.b-tips {
  background-color: var(--color-gray-50);
  .b-tips-inner {
    display: grid;
    row-gap: var(--spacing-2xl);
    padding-block: var(--spacing-4xl);
  }

  .b-tips-title {
    padding-block-end: var(--spacing-md);
    @media (width > 768px) {
      &::before {
        white-space: pre;
      }
    }
  }

  .b-tips-content {
    display: grid;
    row-gap: var(--spacing-2xl);

    .b-tips-description {
      font-size: var(--text-3xl);
      text-align: center;
      font-weight: bold;
    }
    .b-tips-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: var(--spacing-lg);
      padding-inline: var(--spacing-4xl);

      @media (max-width: 640px) {
        padding-inline: var(--spacing-md);
      }

      > li a dl {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto 1fr;
        background-color: var(--color-primary-50);
        gap: var(--spacing-xs);
        padding: var(--spacing-lg);
        width: 100%;
        min-width: 200px;

        @media (hover: hover) {
          &:hover {
            background-color: color-mix(
              in srgb,
              var(--color-primary-50),
              var(--color-primary-100) 20%
            );
          }
        }

        dt {
          font-size: var(--text-xl);
        }
        &::after {
          grid-column: 2;
          grid-row: 1 / span 2;
          place-self: center;
          --size: 1.2em;
          content: "";
          width: var(--size);
          height: var(--size);
          background-color: currentColor;
          mask: url("/assets/images/common/icon-arrow-right.svg") center /
            contain no-repeat;
          display: inline-block;
        }
      }
    }
  }
  .b-tips-link {
    display: grid;
    place-content: center;
  }
}

.b-profile {
  background: url("/assets/images/top/profile-bg-01.webp") no-repeat center
    center/cover;

  .b-profile-inner {
    display: grid;
    grid-template-columns: 3fr 1fr 2fr;
    grid-template-rows: repeat(3, auto);
    grid-template-areas:
      "title . list"
      "description . list"
      "button . list";
    row-gap: var(--spacing-2xl);
    padding-block: var(--spacing-4xl);

    @media (width < 1280px) {
      grid-template-columns: 3fr 2fr;
      grid-template-rows: repeat(3, auto);
      grid-template-areas:
        "title list"
        "description list"
        "button list";
      column-gap: var(--spacing-2xl);
    }
    @media (width < 768px) {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(4, auto);
      grid-template-areas:
        "title"
        "description"
        "list"
        "button";
    }
  }

  .b-profile-title {
    grid-area: title;
    place-items: start;
    &::before {
      text-align: left;
    }
  }
  .b-profile-description {
    grid-area: description;
  }
  .b-profile-list {
    grid-area: list;
    align-self: end;

    > li a {
      display: grid;
      grid-template-columns: 1fr auto;
      font-size: var(--text-xl);
      font-weight: bold;
      padding-block: 0.7em;
      border-bottom: 1px solid currentColor;
      width: 100%;

      @media (hover: hover) {
        &:any-link:hover {
          background-color: color-mix(
            in srgb,
            transparent,
            var(--color-black) 3%
          );
        }
      }

      &::after {
        grid-column: 2;
        grid-row: 1 / span 2;
        place-self: center;
        --size: 1.2em;
        content: "";
        width: var(--size);
        height: var(--size);
        background-color: var(--color-primary-300);
        mask: url("/assets/images/common/icon-arrow-right.svg") center / contain
          no-repeat;
        display: inline-block;
      }
    }
  }
  .b-profile-button {
    grid-area: button;
  }
}

.b-info {
  .b-info-inner {
    display: grid;
    row-gap: var(--spacing-2xl);
    padding-block: var(--spacing-4xl);
  }
  .b-info-title {
    padding-block-end: var(--spacing-md);
  }

  .b-info-description {
    font-size: var(--text-3xl);
    text-align: center;
    font-weight: bold;
  }

  .b-info-list {
    display: grid;
    grid-template-columns: auto auto 1fr;
    width: 100%;
    max-width: 960px;
    margin-inline: auto;

    > li {
      display: grid;
      grid-template-columns: subgrid;
      grid-column: span 3;

      > a {
        display: grid;
        grid-template-columns: inherit;
        grid-column: span 3;
        gap: var(--spacing-xs) var(--spacing-lg);
        align-items: center;
        padding-block: 1em;
        border-bottom: 1px solid currentColor;

        @media (hover: hover) {
          &:any-link:hover {
            background-color: color-mix(
              in srgb,
              transparent,
              var(--color-black) 3%
            );
          }
        }

        > time {
          font-size: var(--text-xl);
          font-weight: bold;
          font-family: var(--font-family-roboto);
        }
        > span {
          font-size: var(--text-sm);
          background-color: var(--color-primary-50);
          padding: 0.2em 1.2em;
          text-align: center;
        }
        > p {
          display: -webkit-box;
          overflow-y: hidden;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }

    @media (max-width: 768px) {
      grid-template-columns: auto auto 1fr;

      > li {
        grid-column: span 3;
        > a {
          grid-column: span 3;
          row-gap: 0;
          > span {
            font-size: var(--text-xs);
          }
          > p {
            grid-row: 2;
            grid-column: span 3;
          }
        }
      }
    }
  }
}