/* 共通定義 */
.contents_title {
  color: #000;
  font-family: Khand;
  font-size: 64px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  text-decoration-line: underline;
  margin: 0;
  pointer-events: none;
}

.home_btn {
  display: inline-flex;
  padding: 15px 30px;
  align-items: center;
  gap: 20px;
  border-radius: 30px;
  border: 1px solid #aaa;
  cursor: pointer;
  transition: 0.5s;

  &:hover {
    transform: scale(1.1, 1);
    border: 1px solid #1860cc;
    background-color: #1860cc;

    svg {
      filter: brightness(0) invert(1);
    }

    span {
      color: #fff;
    }
  }

  span {
    color: #000;
    font-family: "Sawarabi Gothic";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: 0.03em;
  }
}

main {
  .main_view_home {
    display: inline-flex;
    width: calc(100% - 250px);
    height: calc(100vh - 100px);
    padding-left: 250px;
    align-items: center;
    flex-shrink: 0;
    margin-top: 100px;
    background-color: #d9d9d9;
    pointer-events: none;

    .title {
      display: flex;
      flex-direction: column;
      align-items: center;

      .slogan {
        color: #000;
        font-style: normal;
        line-height: 100%;

        &.en {
          font-family: Khand;
          font-size: 70px;
          font-weight: 700;
        }

        &.ja {
          font-family: "Shippori Mincho";
          font-size: 30px;
          font-weight: 600;
          letter-spacing: 0.05em;
        }
      }
    }
  }

  .info {
    margin: 200px auto 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;

    .game_info {
      display: flex;
      align-items: center;
      gap: 50px;
      pointer-events: none;

      .result {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        .subtitle {
          margin-top: 15px;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          gap: 7px;

          span {
            color: var(--text_color, #222);
            font-family: "Sawarabi Gothic";
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 120%;
            letter-spacing: 0.03em;
          }
        }

        .battle {
          margin-top: 40px;
          display: inline-flex;
          align-items: center;
          gap: 15px;

          .team {
            text-align: center;
            width: 150px;
            color: var(--text_color, #222);
            font-family: "Sawarabi Gothic";
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 120%;
            letter-spacing: 0.03em;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .score {
            padding: 10px 25px;
            border-radius: 10px;
            background: var(--Sub-color, #87cefa);
            color: var(--text_color, #222);
            font-family: "Sawarabi Gothic";
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 120%;
            letter-spacing: 0.03em;
          }
        }

        .place {
          margin-top: 15px;
          color: var(--text_color, #222);
          font-family: "Sawarabi Gothic";
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          line-height: 120%;
          letter-spacing: 0.03em;
        }
      }

      hr {
        width: 134px;
        transform: rotate(-70deg);
        z-index: -1;
        border-width: 0px;
        border-bottom: 3px solid #aaa;
      }
    }
  }

  .news {
    margin: 200px auto 0;
    width: 1000px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 30px;

    .news_frame {
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;

      .news_contents {
        display: flex;
        width: 970px;
        padding: 20px 0 20px 30px;
        align-items: center;
        gap: 40px;
        border-bottom: 1px solid #aaa;
        cursor: pointer;
        transition: 0.3s;

        .date {
          width: 90px;
          color: var(--text_color, #222);
          font-family: Khand;
          font-size: 24px;
          font-style: normal;
          font-weight: 400;
          line-height: 100%; /* 24px */
        }

        .category {
          text-align: center;
          width: 112px;
          padding: 7px;
          border-radius: 15px;
          background: var(--MAIN-COLOR, #1860cc);
          color: #fff;
          font-family: "Sawarabi Gothic";
          font-size: 20px;
          font-style: normal;
          font-weight: 400;
          line-height: 100%;
        }

        .news_title {
          color: #000;

          /* text */
          font-family: "Sawarabi Gothic";
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          line-height: 120%; /* 19.2px */
          letter-spacing: 0.48px;
        }

        &:hover {
          background-color: #bee4fc;
        }
      }
    }
  }

  .instagram {
    margin: 200px auto 0;
    display: flex;
    width: 1200px;
    padding: 0 50px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;

    .instagram_outer {
      display: flex;
      width: 100%;
      justify-content: flex-start;
      align-items: center;
      overflow-x: auto;

      &::-webkit-scrollbar {
        display: none;
      }

      .instagram_inner {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 40px;
        flex-shrink: 0;
        animation: scroll 10s linear infinite;

        .instagram_post {
          width: 270px;
          height: 270px;
          flex-shrink: 0;
          background: #d9d9d9;
          cursor: pointer;

          &:nth-child(1) {
            background: url("../images/IMG_0403.PNG") 50% 50%;
            background-repeat: no-repeat;
            background-size: contain;
          }
          &:nth-child(2) {
            background: url("../images/IMG_0402.PNG") 50% 50%;
            background-repeat: no-repeat;
            background-size: contain;
          }
          &:nth-child(3) {
            background: url("../images/IMG_0401.PNG") 50% 50%;
            background-repeat: no-repeat;
            background-size: contain;
          }
          &:nth-child(4) {
            background: url("../images/IMG_0400.PNG") 50% 50%;
            background-repeat: no-repeat;
            background-size: contain;
          }
          &:nth-child(5) {
            background: url("../images/IMG_0399.PNG") 50% 50%;
            background-repeat: no-repeat;
            background-size: contain;
          }
          &:nth-child(6) {
            background: url("../images/IMG_0398.PNG") 50% 50%;
            background-repeat: no-repeat;
            background-size: contain;
          }
          &:nth-child(7) {
            background: url("../images/IMG_0397.PNG") 50% 50%;
            background-repeat: no-repeat;
            background-size: contain;
          }
        }
      }
    }
  }

  .topics {
    margin: 200px auto 0;
    display: flex;
    width: 854px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;

    .topics_cards {
      width: 854px;
      display: grid;
      gap: 20px 40px;
      grid-template-columns: repeat(auto-fit, minmax(407px, 1fr));

      .topics_card {
        width: 407px;
        height: 252px;
        flex-shrink: 0;
        cursor: pointer;
        background-color: transparent;
        perspective: 1000px;
        animation: appear 1.5s;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: contain;

        &:hover .inner_card {
          transform: rotateY(180deg) scale(1.1);
        }

        .inner_card {
          position: relative;
          width: 100%;
          height: 100%;
          text-align: center;
          transition: transform 0.8s;
          transform-style: preserve-3d;
        }

        .front,
        .back {
          position: absolute;
          backface-visibility: hidden;
        }

        .front {
          width: 100%;
          height: 100%;
          color: black;
          border: 1px solid #eee;
        }

        .back {
          width: calc(100% - 20px);
          height: calc(100% - 40px);
          background-color: #234fa9;
          transform: rotateY(180deg);
          padding: 20px 10px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 30px;

          .topics_title {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            color: #fff;
            font-family: "Sawarabi Gothic";
            font-size: 20px;
            font-style: normal;
            font-weight: 400;
            line-height: 120%;
            margin: 0;
          }

          .topics_message {
            margin: 0;
            text-align: justify;
            text-overflow: ellipsis;
            overflow: hidden;
            color: #fff;
            font-family: "Sawarabi Gothic";
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 100%;
          }
        }
      }
    }
  }

  .banner {
    margin-top: 200px;
    width: 100%;
    height: 346px;
    flex-shrink: 0;
    background: var(--MAIN-COLOR, #1860cc);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    gap: 60px;

    .message {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      gap: 30px;
      pointer-events: none;

      span {
        color: #fff;
        font-family: "Sawarabi Gothic";
        font-size: 28px;
        font-style: normal;
        font-weight: 400;
        line-height: 100%;
      }
    }

    .banner_contact {
      display: inline-flex;
      padding: 30px 70px;
      justify-content: center;
      align-items: center;
      gap: 25px;
      border: 5px solid #fff;
      text-decoration: none;
      transition: 0.5s;

      &:hover {
        transform: scale(1.1);
      }
      span {
        color: #fff;
        font-family: "Sawarabi Gothic";
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 100%;
      }
    }
  }
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  5% {
    transform: translateX(0);
  }
  90% {
    transform: translateX(-44%);
  }
  95% {
    transform: translateX(-44%);
  }
  100% {
    transform: translateX(0);
  }
}

@media (width <= 1300px) {
  /* 共通定義 */
  .contents_title {
    font-size: 40px;
  }

  main {
    .main_view_home {
      width: 100%;
      height: calc(100vh - 90px);
      padding-left: 0;
      justify-content: center;
      align-items: center;
      margin-top: 90px;

      .title {
        .slogan {
          &.en {
            font-size: 60px;
          }
          &.ja {
            font-size: 24px;
          }
        }
      }
    }

    .info {
      margin: 100px auto 0;
      width: 100%;

      .game_info {
        flex-direction: column;
        gap: 30px;

        hr {
          transform: rotate(0);
        }
      }
    }

    .news {
      margin: 100px auto 0;
      width: 708px;

      .news_frame {
        .news_contents {
          width: 678px;
        }
      }
    }

    .instagram {
      margin: 100px auto 0;
      width: 708px;
      padding: 0;

      .instagram_outer {
        &::-webkit-scrollbar {
          display: none;
        }

        .instagram_inner {
          .instagram_post {
            width: 147px;
            height: 147px;
          }
        }
      }
    }

    .topics {
      margin: 100px auto 0;
      width: 708px;
      padding: 0 30px;

      .topics_cards {
        width: 708px;
        grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));

        .topics_card {
          width: 330px;
          height: 205px;

          .back {
            width: calc(100% - 20px);
            height: calc(100% - 40px);
            background-color: #234fa9;
            transform: rotateY(180deg);
            padding: 20px 10px;
            display: flex;
            flex-direction: column;
            gap: 30px;

            .topics_title {
              font-size: 16px;
            }

            .topics_message {
              font-size: 14px;
            }
          }
        }
      }
    }

    .banner {
      margin-top: 100px;
      height: 308px;
      gap: 40px;

      .message {
        span {
          font-size: 16px;
        }
      }

      .banner_contact {
        span {
          font-size: 30px;
        }
      }
    }
  }
}

@media (width <= 768px) {
  /* 共通定義 */
  .contents_title {
    font-size: 30px;
  }

  .home_btn {
    padding: 10px 20px;

    span {
      font-size: 14px;
    }
  }

  main {
    .main_view_home {
      height: calc(100vh - 50px);
      margin-top: 50px;

      .title {
        .slogan {
          &.en {
            font-size: 30px;
          }
          &.ja {
            font-size: 18px;
          }
        }
      }
    }

    .info {
      .game_info {
        .result {
          .subtitle {
            span {
              font-size: 12px;
            }
          }

          .battle {
            .team {
              width: 100px;
              font-size: 12px;
            }

            .score {
              padding: 10px 20px;
              font-size: 12px;
            }
          }

          .place {
            font-size: 12px;
          }
        }
      }
    }

    .news {
      width: auto;

      .news_frame {
        .news_contents {
          width: 350px;
          gap: 10px;
          padding: 20px 0 20px 5px;

          .date {
            width: 40px;
            font-size: 12px;
          }

          .category {
            width: 55px;
            padding: 5px;
            font-size: 10px;
            white-space: nowrap;
          }

          .news_title {
            width: 220px;
            font-size: 10px;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }

    .instagram {
      width: 350px;

      .instagram_outer {
        width: 350px;

        &::-webkit-scrollbar {
          display: none;
        }

        .instagram_inner {
          gap: 26px;

          .instagram_post {
            width: 162px;
            height: 162px;
          }
        }
      }
    }

    .topics {
      width: auto;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .topics_cards {
        width: 330px;
        grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
      }
    }

    .banner {
      height: 236px;
      gap: 30px;

      .message {
        span {
          font-size: 14px;

          &:first-child {
            width: 322px;
            height: 28px;
          }
          &:last-child {
            width: 288px;
            height: 28px;
          }
        }
      }

      .banner_contact {
        padding: 15px 20px;

        span {
          font-size: 20px;
        }
      }
    }
  }

  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    5% {
      transform: translateX(0);
    }
    90% {
      transform: translateX(-75%);
    }
    95% {
      transform: translateX(-75%);
    }
    100% {
      transform: translateX(0);
    }
  }
}