/* イベント情報 */
.informarion {
  padding: .75rem min(2.7778%, 2.5rem);
  border-bottom: 1px solid var(--gray-scale-2);

  & dl {
    display: flex;
    gap: 2.5rem;

    & dt {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      padding: 0.3125rem 0.75rem;
      font-size: 0.8125rem;
      font-weight: 500;
      line-height: 120%;
      background: var(--color-primary);
      color: #fff;
    }

    & dd {
      display: flex;
      gap: 2.5rem;
      font-size: 0.9375rem;
      font-weight: 400;
      line-height: 1.6;
    }

    & .date {
      font-family: Roboto, sans-serif;
    }
  }

  @media screen and (width <= 768px) {
    padding: .75rem 0 .88rem;

    & dl {
      gap: 0.9375rem;

      & dt {
        display: flex;
        align-items: center;
      }

      & dd {
        flex-direction: column;
        gap: 0.25rem;
        font-size: 0.875rem;
      }
    }
  }
}

/* about */
.about {
  padding: 6.25rem min(2.7778%, 2.5rem);

  & .col {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }

  & .figure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.25rem;
    padding: 2rem 3.6364%;
    margin: 0 7.2727%;

    & .arrow {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      flex: 1;
      position: relative;

      &::before {
        content: "";
        display: block;
        width: calc(100% - 1.5rem);
        height: 0.5rem;
        background: var(--color-primary);
        position: absolute;
        bottom: .625rem;
        left: 0;
      }

      &::after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        border-top: .875rem solid transparent;
        border-bottom: .875rem solid transparent;
        border-left: 1.5rem solid var(--color-primary);
        border-right: 0;
        margin: 0 0 0 auto;
      }
    }


    & img {
      width: 23.2558%;
    }
  }

  & .figure-text {
    padding: 0.625rem 8.9888% 0.75rem;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.8;
    background: #E7F7FB;
    color: var(--gray-scale-11);
    text-align: center;
  }

  @media screen and (width <= 768px) {
    padding: 3.75rem 0;

    & .col {
      gap: 1.25rem;
    }

    & .figure {
      flex-wrap: wrap;
      gap: .75rem 1.25rem;
      padding: 0;
      margin: 0;

      & .arrow {
        &::before {
          width: calc(100% - .625rem);
          height: 0.375rem;
          bottom: .3125rem;
        }

        &::after {
          border-style: solid;
          border-top: .5rem solid transparent;
          border-bottom: .5rem solid transparent;
          border-left: .625rem solid var(--color-primary);
          border-right: 0;
        }
      }

      & img {
        width: 35.0877%;
      }
    }

    & .figure-text {
      width: 100%;
      font-size: 1rem;
      padding: 0.75rem 0;
    }
  }
}

/* necessity */
.necessity {
  padding: 6.25rem min(2.7778%, 2.5rem);
  background-image: image-set(
    url("../images/home/bg-necessity.avif") type("image/avif"),
    url("../images/home/bg-necessity.webp") type("image/webp")
  );
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  color: #fff;
  position: relative;

  &::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .8;
    position: absolute;
    top: 0;
    left: 0;
  }

  & > * {
    position: relative;
  }

  & .head {
    margin: 0 0 5rem;

    & * {
      color: #fff;
    }
  }

  @media screen and (width <= 768px) {
    padding: 3.75rem 0;
  }
}

.damage {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  text-align: center;
  margin: 0 0 3.75rem;

  @media screen and (width >= 769px) {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  @media screen and (width <= 768px) {
    margin: 0 0 2.5rem;

    & .damage-headline {
      font-size: 1.125rem;
    }
  }
}

.damage-list {
  display: flex;

  & li {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 2.5rem 0;
    font-weight: 700;
    line-height: 1;
    border-top: 1px solid var(--gray-scale-2);
    border-bottom: 1px solid var(--gray-scale-2);
    border-left: 1px solid var(--gray-scale-2);
    color: var(--gray-scale-11);

    &:last-child {
      border-right: 1px solid var(--gray-scale-2);
    }

    & .icon {
      width: 5rem;
      margin: 0 auto;
    }
  }

  @media screen and (width <= 768px) {
    flex-wrap: wrap;

    & li {
      flex: auto;
      width: 50%;
      border-top: none;

      &:nth-child(-n + 2) {
        border-top: 1px solid var(--gray-scale-2);
      }

      &:nth-child(2n) {
        border-right: 1px solid var(--gray-scale-2);
      }

      &:last-child {
        flex: auto 0 0;
      }
    }
  }
}

.solution {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;

  &::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 1rem solid transparent;
    border-left: 1rem solid transparent;
    border-top: 1.5rem solid #fff;
    border-bottom: 0;
    margin: 0 auto;
  }

  & .image {
    text-align: center;
  }

  & .copy {
    color: #fff;
  }

  @media screen and (width <= 768px) {
    gap: 2.5rem;
  }
}

.prepare {
  display: flex;
  flex-direction: column;
  gap: 3rem;

  & .row {
    display: flex;
  }

  & .logo {
    flex-shrink: 0;
    max-width: 15rem;
  }

  & .text {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    padding: 0 3.75rem;
    color: var(--gray-scale-11);
  }

  & .lead {
    font-size: 1.125rem;
    line-height: 2;
  }

  @media screen and (width <= 768px) {
    gap: 1.75rem;

    & .row {
      flex-direction: column;
      gap: 1.25rem;
    }

    & .logo {
      margin: 0 auto;
    }

    & .text {
      gap: 1.25rem;
      padding: 0;
    }

    & .lead {
      font-size: 1rem;
    }
  }
}


.service {
  padding: 7.5rem min(2.7778%, 2.5rem);

  & .col {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }

  @media screen and (width <= 768px) {
    padding: 3.75rem 0;

    & .col {
      gap: 1.75rem;
    }
  }
}

.service-item {
  &.wss {
    & a {
      background: #316545;
    }
  }
}

.service-link {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  gap: 2.5rem;
  padding: 2.5rem 3.75rem;
  color: #fff;
  border-radius: 0.5rem;

  & * {
    color: #fff;
  }

  & .col {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  & .text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }

  & .lead {
    font-size: 1.125rem;
    line-height: 2;
  }

  @media screen and (width > 768px) {
    &:hover {
      & .service-button {
        background: #fff;
        color: var(--color-primary);

        &::after {
          background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.39136 8.15107L5.69473 11.9036C5.50418 12.0768 5.21835 12.0768 5.04686 11.9036L4.6086 11.461C4.43711 11.2878 4.43711 10.9992 4.6086 10.8067L7.54304 7.82392L4.6086 4.86035C4.43711 4.66791 4.43711 4.37925 4.6086 4.20605L5.04686 3.76344C5.21835 3.59025 5.50418 3.59025 5.69473 3.76344L9.39136 7.51602C9.56285 7.68921 9.56285 7.97787 9.39136 8.15107Z" fill="%23396C76"/></svg>');
        }
      }
    }
  }

  @media screen and (width <= 768px) {
    flex-direction: column;
    gap: 1.25rem;
    padding: 2rem 1.5rem;

    & .logo {
      width: 100%;

      & img {
        width: 100%;
      }
    }

    & .title {
      font-size: 1.5rem;
    }

    & .lead {
      font-size: 1rem;
    }
  }
}

.column {
  padding: 7.5rem 0 2.75rem;
  overflow: hidden;

  & .head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    margin: 0 0 5rem;
  }

  & .more-button {
    font-size: 1rem;
    padding-top: 0.9375rem;
    padding-bottom: 0.9375rem;
  }

  @media screen and (width <= 768px) {
    padding: 3.75rem 0;

    & .head {
      margin: 0 0 3.75rem;
      gap: 1.25rem;
    }
  }
}

.column-slider {
  padding: 0 0 1rem;
  overflow: visible;

  &.no-slider {
    & .swiper-wrapper {
      display: flex;
      justify-content: center;
      gap: 52px;
      transform: none !important;
    }

    & .item {
      width: 332px;
      height: auto;
      margin: 0 !important;
    }
  }
}

.slide-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.88rem;
  margin: 2.5rem 0 0;

  & .swiper-button-next,
  & .swiper-button-prev {
    width: 3rem;
    height: 3rem;
    position: static;
    margin: 0;

    &::after {
      display: none;
    }
  }

  &.no-slider {
    display: none;
  }

  @media screen and (width <= 768px) {
    margin: 2rem 0 0;
  }
}

.news {
  padding: 3.75rem min(2.7778%, 2.5rem) 10rem;

  & .col {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }

  @media screen and (width <= 768px) {
    padding: 1.25rem 0 7.5rem;

    & .col {
      gap: 1.25rem;
    }
  }
}

.news-list {
  & li {
    border-top: 1px solid var(--gray-scale-2);

    &:last-child {
      border-bottom: 1px solid var(--gray-scale-2);
    }
  }

  & .link {
    display: flex;
    gap: 2.5rem;
    padding: 1.5rem 6rem 1.62rem 2.5rem;
    color: var(--gray-scale-12);
    font-size: 1rem;
    line-height: 1.6;
    position: relative;

    &::after {
      content: "";
      display: block;
      width: 2.25rem;
      height: 2.25rem;
      background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="37" viewBox="0 0 36 37" fill="none"><circle cx="18" cy="18.8335" r="18" fill="%23396C76"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15.5204 12.7847C15.9066 12.3791 16.5328 12.3791 16.9191 12.7847L21.8641 17.977C22.2503 18.3825 22.2503 19.0401 21.8641 19.4456L16.9191 24.6379C16.5328 25.0435 15.9066 25.0435 15.5204 24.6379C15.1342 24.2324 15.1342 23.5748 15.5204 23.1693L19.7661 18.7113L15.5204 14.2533C15.1342 13.8478 15.1342 13.1902 15.5204 12.7847Z" fill="white"/></svg>') no-repeat center center;
      background-size: 100% 100%;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 2.5rem;
      margin: auto;
    }
  }

  & time {
    font-family: Roboto, sans-serif;
    font-size: 1rem;
    color: var(--gray-scale-12);
  }

  & .title {
    line-height: 1.6;
  }

  @media screen and (width >= 769px) {
    & .link {
      &:hover {
        color: var(--color-primary);
      }
    }
  }

  @media screen and (width <= 768px) {
    & .link {
      flex-direction: column;
      gap: .25rem;
      padding: .5rem 4.75rem 1rem 1.25rem;

      &::after {
        right: 1.25rem;
      }
    }
  }
}