body {
  display: block;
  @media (min-width: 768px) {
    display: grid;
  }
}
.header .inner .link.logo {
  min-height: 60px;
  align-items: center;
  display: flex;
  @media (min-width: 768px) {
    min-height: none;
  }
}
body.home .header {
  width: auto;
  margin-inline: var(--p-lg);
  border-radius: 50px;
  border-bottom: none;
  position: fixed;
  width: 90%;
  top: 20px;
  background-color: rgb(from var(--contents-bg-color) r g b / 0.9);
  @media (min-width: 768px) {
    width: 100%;
    margin-inline: 0;
    border-radius: 0;
    position: absolute;
    background-color: rgb(from var(--contents-bg-color) r g b / 1);
    top: 0;
  }
  .inner .link {
    color: var(--text-color);
    @media (min-width: 890px) {
      color: var(--text-color);
    }
  }
  .list {
    .link:hover,
    .item.toggle:hover .text {
      color: var(--text-point-color);
    }
    .item .menu {
      border: none;
      box-shadow: none;
    }
    .tag {
      background-color: var(--text-point-color);
    }
  }
  .information {
    .block,
    .tel {
      color: var(--text-color);
    }
    .tel::before {
      color: var(--main-color);
    }
    .tel:hover {
      color: var(--main-color);
    }
  }
  .sep {
    background-color: var(--text-color);
  }
}
@media (min-width: 768px) {
  .home .header {
    background-color: var(--header-color);
  }
}
@media (min-width: 890px) {
  .home .header {
    background-color: rgb(from var(--contents-bg-color) r g b / 0.6);
  }
}

body.home .hamburger-menu {
  top: 30px;
  left: calc(90% - 40px);
  right: 0;
  background-color: var(--contents-bg-color);
  @media (min-width: 768px) {
    top: var(--p-md);
    left: unset;
    right: var(--content-spacing);
  }
  @media (min-width: 890px) {
    top: 25px;
  }
}

@keyframes slideAnime {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.fv {
  align-items: flex-start;
  height: 100%;
  min-height: 550px;
  justify-content: flex-start;
  @media (min-width: 768px) {
    height: 95dvh;
    min-height: 600px;
    justify-content: center;
  }

  .picture {
    opacity: 0;
    animation: slideAnime 10s ease infinite;
    opacity: 1;

    .img {
      display: block;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
      object-position: 50% 70%;
      @media (min-width: 768px) {
        object-position: 80% 0;
      }
    }
  }

  .picture:not(:only-of-type) {
    animation-delay: 0s;
  }
  .picture2 {
    animation-delay: 5s;
  }
  /* Keep single picture always visible */
  .picture:only-of-type {
    opacity: 1 !important;
    animation: none !important;
  }

  .title {
    display: flex;
    flex-direction: column;
    gap: var(--p-md);
    transform: translateY(130px);
    font-size: var(--text-xl);
    @media (min-width: 768px) {
      transform: translateY(-20%);
      font-size: var(--text-4xl);
    }
    color: var(--text-color);
    text-shadow: 0 0 5px rgba(255, 255, 255, 1);
    font-family: 'Zen Antique', serif;
    font-weight: normal;
    text-align: left;
    .title-main {
      font-size: clamp(28px, -0.125rem + 10vw, 37px);
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: 1.11px;

      @media (min-width: 768px) {
        font-size: clamp(38px, -0.6888rem + 6.383vw, 56px);
        letter-spacing: 1px;
      }

      .title-sm {
        font-size: clamp(18px, -0.5417rem + 8.8889vw, 26px);
        @media (min-width: 768px) {
          font-size: clamp(26px, -0.758rem + 4.9645vw, 40px);
        }
      }
    }

    .title-sub {
      font-size: var(--text-md);
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: -0.48px;
      font-size: clamp(12px, -0.0833rem + 4.4444vw, 16px);

      @media (min-width: 768px) {
        font-size: clamp(16px, -0.3617rem + 2.8369vw, 24px);
      }

      .onlySP {
        display: block;
        @media (min-width: 768px) {
          display: none;
        }
      }

      .onlyPc {
        display: none;
        @media (min-width: 768px) {
          display: inline;
        }
      }
    }
  }
}

.section-links .link {
  border-radius: 3px;
  border: 2px solid rgba(51, 176, 215, 0.3);
  background: rgba(51, 176, 215, 0.1);

  .inner {
    padding-right: var(--p-xl);

    @media (min-width: 768px) {
      padding-left: 80px;
    }

    @media (min-width: 960px) {
      padding-left: 100px;
    }

    &::before {
      @media (min-width: 768px) {
        left: 20px;
      }

      @media (min-width: 960px) {
        left: var(--p-xxl);
      }
    }

    &::after {
      @media (min-width: 768px) {
        right: 22px;
      }

      @media (min-width: 960px) {
        right: 32px;
      }
    }

    .sub-title {
      font-size: var(--text-xs);

      @media (min-width: 768px) {
        font-size: 15px;
      }
    }
  }
}

body.home .section-corner {
  .corner-wrapper {
    background: var(--contents-bg-color);

    .title {
      font-size: 20px;
      font-weight: 350;
      line-height: 1.5;

      @media (min-width: 768px) {
        font-size: var(--text-xl);
      }

      &::before {
        height: 24px;
        background: linear-gradient(to top, var(--main-color) 0 62.5%, var(--text-contrast-color) 62.5% 100%);

        @media (min-width: 768px) {
          height: 40px;
        }
      }
    }
  }
}

body.home .section-corner.cube-ranking,
body.home .section-corner.section-news {
  .corner-wrapper {
    border: none;
    background: transparent;

    .title {
      background: transparent;
      color: var(--text-color);
      font-weight: 500;
      line-height: 1.2;
      flex-wrap: wrap;

      &::before {
        background: linear-gradient(to top, var(--main-color) 0 62.5%, var(--deco1-color) 62.5% 100%);
      }
    }

    .description {
      font-size: var(--text-xs);
      line-height: 1.2;
      font-weight: 500;
    }
  }
}

body.home .section-news .posts {
  border: 1px solid var(--border-color);
  margin-inline: 0;
  padding-inline: var(--content-spacing);
  background: var(--contents-bg-color);

  @media (min-width: 768px) {
    padding-inline: 20px;
  }

  .post-news {
    .heading .link:hover {
      color: var(--text-point-color);
    }

    .new::after {
      color: var(--new-color);
      background-color: unset;
      font-size: var(--text-md);
      font-weight: 700;
      padding-inline: 5px;
    }
  }
}

.swiper {
  padding-inline: clamp(0.875rem, -6.5357rem + 37.0536vw, 11.25rem) !important;

  @media (min-width: 768px) {
    padding-inline: 0 !important;
  }

  .swiper-wrapper {
    .swiper-slide {
      margin-right: 8px;

      @media (min-width: 320px) {
        margin-right: 10px;
      }

      @media (min-width: 768px) {
        margin-right: 0;
      }
    }
  }
}
.simple-link-button-part .simple-link-button {
  padding-right: var(--p-xl);
}
