@charset "utf-8";

/* ========================================================== */
/* SNS */
/* ========================================================== */
#sns {
  margin: 12rem auto;

  & .sns-sight {
    position: relative;
    width: 100%;
    text-align: center;
    margin-bottom: 4rem;

    & .title-sns {
      position: absolute;
      z-index: 10;
      transform: translateX(-50%);
      top: 0;
      left: 50%;

      &::after {
        content: '';
        z-index: -1;
        position: absolute;
        top: -50%;
        left: 0;
        width: calc(70px * 2.11);
        height: calc(70px * 2.11);
        transform: rotate(45deg);
        background-color: #ffffff;
        opacity: 0;
      }

      &.appear::after {
        animation-name: titlefadeInAnime;
        animation-duration: 1.5s;
        animation-fill-mode: forwards;
      }
    }

    & .title {
      margin-bottom: 3rem;
    }

    & .sns-box {
      margin-top: 11rem;
      display: flex;
      flex-wrap: no-wrap;
      justify-content: center;
      gap: 3rem;

      & a {
        width: calc((100% - 6rem) / 3);
        height: auto;
        padding: 1rem 3rem;
        border: solid 1px #eeeeee;
        border-radius: 0.5rem;
        background-color: #fff;
        filter: drop-shadow(1px 1px 1px #cccccc);

        &:hover {
          color: #fff;
          background-color: #081a00;
          transform: translateY(-3px);
          transition: 0.2s linear;
        }

        & div {
          display: flex;
          align-items: center;
          justify-content: center;

          & img {
            width: 3rem;
            height: auto;
            margin-right: 1rem;
          }
        }
      }
    }
  }

  & .instagram {
    width: 100%;
    text-align: center;

    & .insta_list {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      list-style: none;
      margin: 0 auto 30px;
      padding: 0;

      & li {
        position: relative;
        width: calc(100% / 5);
        height: auto;
        padding: 0 30px;

        & a {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;

          & img {
            width: calc(100% - 60px);
            height: 100%;
            object-fit: cover;
            border-radius: 5px;
          }
        }
      }

      & li:nth-child(6) {
        display: none;
      }

      & li::before {
        content: "";
        display: block;
        padding-top: 100%;
      }

    }

    & .show-more {
      width: 100%;
      font-size: 0.85rem;
    }
  }
}

@media screen and (max-width:1199px) {
  #sns {
    & .instagram {

      & .insta_list {

        & li {
          width: calc(100% / 4);
        }

        & li:nth-child(5) {
          display: none;
        }

      }
    }
  }
}

@media screen and (max-width:991px) {
  #sns {
    & .sns-sight {
      margin-bottom: 4rem;

      & .sns-box {
        gap: 2rem;

        & a {
          width: calc((100% - 4rem) / 3);
          padding: 0.5rem 1rem;
        }

      }
    }

    & .instagram {
      & .insta_list {
        & li {
          width: calc(100% / 4);
          padding: 0 20px;

          & a {
            & img {
              width: calc(100% - 40px);
            }
          }
        }

      }
    }
  }
}

@media screen and (max-width:767px) {
  #sns {
    & .sns-sight {
      margin-bottom: 3rem;

      & .title-sns {
        &::after {
          left: -0.5rem;
          width: calc(60px * 2.11);
          height: calc(60px * 2.11);
        }
      }

      & .sns-box {
        margin-top: 10rem;

        & a {
          & div {
            & img {
              width: 1.5rem;
              height: auto;
              margin-right: 1rem;
            }

            & h3 {
              font-size: 1.25rem;
              margin-bottom: 0;
            }
          }
        }
      }
    }

    & .instagram {
      & .insta_list {
        & li {
          width: calc(100% / 3);
        }

        & li:nth-child(4),
        li:nth-child(5),
        li:nth-child(6) {
          display: block;
          margin-top: 40px;
        }
      }
    }
  }
}

@media screen and (max-width:575px) {
  #sns {
    margin: 16rem auto 12rem;

    & .sns-sight {
      & .title-sns {
        & .title-fs {
          margin-left: 0.5rem;
        }

        &::after {
          left: 0;
          width: calc(50px * 2.11);
          height: calc(50px * 2.11);
        }
      }

      & .sns-box {
        margin-top: 9.5rem;
        flex-wrap: wrap;
        gap: 1.5rem;

        & a {
          width: 325px;
        }
      }

    }

    & .instagram {
      & .insta_list {
        & li {
          width: calc(100% / 2);
        }

        & li:nth-child(3),
        li:nth-child(4),
        li:nth-child(5),
        li:nth-child(6) {
          display: block;
          margin-top: 40px;
        }
      }
    }
  }
}