/* Big tablets to 1200px */
@media only screen and (max-width: 1200px) {
}

/* Small tablets to big tablets: from 768 to 1023px */
@media only screen and (max-width: 1023px) {
  /* ===================================
   Common
====================================== */
  html {
    font-size: 54.7%;
    scroll-behavior: smooth;
  }

  .logo {
    height: 100vh;
    width: auto;
    position: absolute;
    top: 58vh;
    left: 50%;
    transform: translate(-50%, -50%);
    clip-path: polygon(100% 0, 100% 79%, 20% 97%, 0 76%, 0 0);
    opacity: 0.8;
    z-index: 2;
  }
  .header__logo__small-image {
    width: 56px;
    height: 56px;
  }
  /* ===================================
   Top-What's new
====================================== */
  .whats-new__title {
    padding-top: 9.5rem;
    margin-right: 5vw;
  }

  /* ===================================
   About-esports team
====================================== */

  .esports-team-history__main-title {
    font-family: 'Noto Sans JP', sans-serif;
    margin-top: 2.5rem;
    font-size: 6.4rem;
    line-height: 9rem;
    text-transform: none;
  }

  .esports-team-history__contents {
    flex-direction: column-reverse;
    padding: 4rem 4rem;
  }

  .esports-team-history__description {
    width: 75vw;
    margin-right: 0;
    margin-top: 3.1rem;
  }

  /* ===================================
   About-football club
====================================== */
  .football-club-history__main-title {
    font-family: 'Noto Sans JP', sans-serif;
    margin-top: 2.5rem;
    font-size: 6.4rem;
    line-height: 9rem;
    text-transform: none;
  }

  .football-club-history__contents {
    flex-direction: column;
    padding: 4rem 4rem;
  }

  .football-club-history__description {
    width: 75vw;
    margin-left: 0;
    margin-top: 3.1rem;
  }

  .football-club-history__logo {
    width: 42.3rem;
    height: 41rem;
    opacity: 0.8;
  }

  .football-club-history__hp-button {
    display: none;
  }

  .football-club-history__hp-button-mobile {
    display: inline-block;
    width: 37.6rem;
    max-width: 100%;
    padding: 1.2rem 0;
    margin-top: 3.1rem;
    background-color: #002c50;
    border: 2px solid transparent;
    color: #ffffff;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    text-align: center;
    text-decoration: none;
    transition: 0.25s;
  }

  .football-club-history__hp-button-mobile:hover,
  .football-club-history__hp-button-mobile:focus {
    background-color: #ffffff;
    color: #002c50;
    border-color: currentColor;
  }

  .football-club-history__hp-button-mobile {
    display: block;
  }

  /* ===================================
   Sponsors
====================================== */
  .sponsors-page {
    width: 100%;
    text-transform: none;
    padding-right: 16px;
    padding-left: 6vw;
    margin-top: 0;
    margin-bottom: 10rem;
  }
  .uniform__image-box {
    position: relative;
    background-image: linear-gradient(
        rgba(0, 44, 80, 0.1),
        rgba(0, 44, 80, 0.1)
      ),
      url(../img/uniform.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #00000;
    width: 100%;
    height: 50vh;
  }

  .uniform__description-box {
    position: absolute;
    background-color: rgb(0, 44, 80, 0.9);
    width: 100%;
    padding: 1.8rem 2.4rem;
    bottom: 0;
  }

  .uniform__description {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 3.2rem;
    color: white;
    text-align: center;
  }

  /* ===================================
   Contact
====================================== */
  .contact {
    margin-right: 6.58vw;
    margin-left: 7.54vw;
    width: 586px;
    margin: 8rem auto;
  }
  .contact__description {
    width: 59rem;
    margin-top: 4rem;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 200%;
  }
}

/* Small phones to small tablets: from 481 to 767px */
/* ===================================
   Common
====================================== */
@media only screen and (max-width: 767px) {
  html {
    font-size: 54.7%;
    scroll-behavior: smooth;
  }
  .hero {
    height: 50vh;
  }

  .hero__bg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
      url('../img/hero_left.jpeg');
    background-attachment: fixed;
    clip-path: polygon(100% 0, 100% 79%, 20% 97%, 0 76%, 0 0);
    position: relative;
    height: 50vh;
    background-size: cover;
    background-position: right top;
    background-repeat: no-repeat;
    z-index: 1;
  }

  .logo {
    height: 40vh;
    width: auto;
    position: absolute;
    top: 30vh;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.8;
    z-index: 2;
  }

  /* ===================================
   About-esports team
====================================== */
  .esports-team-history {
    width: 100%;
    text-transform: none;
    padding-left: 0;
  }

  .esports-team-history__title {
    padding-top: 80px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .esports-team-history__sub-title {
    display: flex;
    align-items: center;
    font-size: 24px;
    color: #eb5d40;
  }

  .esports-team-history__sub-title:after {
    content: '';
    display: block;
    width: 5rem;
    height: 0.125rem;
    background-color: #eb5d40;
    margin: 0 0 0 3.2rem;
  }

  .esports-team-history__main-title {
    font-family: 'Noto Sans JP', sans-serif;
    margin-top: 16px;
    font-size: 32px;
    line-height: 48px;
    text-transform: none;
  }

  .esports-team-history__contents {
    flex-direction: column-reverse;
    padding: 40px 16px;
  }

  .esports-team-history__description {
    width: 85vw;
    margin-right: 0;
    margin-top: 24px;
  }
  /* ===================================
   About-football club
====================================== */
  .football-club-history {
    width: 100%;
    text-transform: none;
    padding-top: 80px;
    padding-right: 0;
  }

  .football-club-history__title {
    padding-left: 16px;
    padding-right: 16px;
  }

  .football-club-history__sub-title {
    display: flex;
    align-items: center;
    font-size: 24px;
    color: #eb5d40;
  }

  .football-club-history__main-title {
    font-family: 'Noto Sans JP', sans-serif;
    margin-top: 16px;
    font-size: 32px;
    line-height: 48px;
    text-transform: none;
  }

  .football-club-history__contents {
    flex-direction: column;
    padding: 40px 16px;
  }

  .football-club-history__description {
    width: 85vw;
    margin-right: 0;
    margin-top: 24px;
  }

  .football-club-history__hp-button {
    display: none;
  }

  .football-club-history__hp-button-mobile {
    display: inline-block;
    width: 100%;
    max-width: 100%;
    padding: 1.2rem 0;
    margin-top: 3.1rem;
    background-color: #002c50;
    border: 2px solid transparent;
    color: #ffffff;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    text-align: center;
    text-decoration: none;
    transition: 0.25s;
  }

  .football-club-history__hp-button-mobile:hover,
  .football-club-history__hp-button-mobile:focus {
    background-color: #ffffff;
    color: #002c50;
    border-color: currentColor;
  }

  .football-club-history__hp-button-mobile {
    display: block;
  }
}

/* Small phones: from 0 to 480px */
@media only screen and (max-width: 480px) {
  html {
    font-size: 54.7%;
    scroll-behavior: smooth;
  }
  .hero {
    height: 100vh;
  }
  .hero__bg {
    clip-path: polygon(100% 0, 100% 94%, 18% 100%, 0 94%, 0 0);
    height: 100%;
  }
  .hero-top__bg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
      url('../img/top.jpg');
    background-attachment: scroll;
    clip-path: polygon(100% 0, 100% 79%, 20% 97%, 0 76%, 0 0);
    position: relative;
    height: 108vh;
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    z-index: 1;
  }

  .hero-about__bg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
      url('../img/about.jpg');
    background-attachment: scroll;
    clip-path: polygon(100% 0, 100% 79%, 20% 97%, 0 76%, 0 0);
    position: relative;
    height: 108vh;
    background-size: cover;
    background-position: right top;
    background-repeat: no-repeat;
    z-index: 1;
  }

  .hero-members__bg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
      url('../img/members.jpg');
    background-attachment: scroll;
    clip-path: polygon(100% 0, 100% 79%, 20% 97%, 0 76%, 0 0);
    position: relative;
    height: 108vh;
    background-size: cover;
    background-position: 70%;
    background-repeat: no-repeat;
    z-index: 1;
  }

  .hero-sponsors__bg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
      url('../img/sponsors.jpg');
    background-attachment: scroll;
    clip-path: polygon(100% 0, 100% 79%, 20% 97%, 0 76%, 0 0);
    position: relative;
    height: 108vh;
    background-size: cover;
    background-position: 75% 50%;
    background-repeat: no-repeat;
    z-index: 1;
  }

  .hero-contact__bg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
      url('../img/contact.jpg');
    background-attachment: scroll;
    clip-path: polygon(100% 0, 100% 79%, 20% 97%, 0 76%, 0 0);
    position: relative;
    height: 108vh;
    background-size: cover;
    background-position: right top;
    background-repeat: no-repeat;
    z-index: 1;
  }
  .logo {
    height: 70vh;
    width: auto;
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    clip-path: polygon(100% 0, 100% 94%, 18% 100%, 0 94%, 0 0);
    opacity: 0.8;
    z-index: 5;
  }

  .header__inner {
    padding-right: 16px;
    padding-left: 16px;
  }

  .team_name {
    margin-left: 0px;
  }

  .logo {
    object-fit: cover;
  }
  .main-nav {
    display: none;
  }

  .header__logo__small-image {
    display: none;
  }

  .whats-new {
    display: block;
    padding-right: 16px;
    padding-left: 16px;
  }

  .whats-new__twitter {
    display: none;
  }

  .whats-new__twitter--mobile {
    display: block;
  }

  .sponsors__logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 5vh;
    margin-left: 0;
  }

  .sponsor-logo {
    width: 30vw;
    margin-bottom: 10vh;
    margin-left: 0;
  }

  .bg-triangle1 {
    display: none;
  }

  .bg-triangle2 {
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: polygon(0 7%, 0 0, 100% 0%);
    background-color: #799fd4;
  }

  .bg-triangle3 {
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: polygon(0 101%, 0 95%, 30% 101%);
    background-color: #005a9a;
  }

  .bg-triangle4 {
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: polygon(100% 101%, 100% 97%, 15% 100%);
    background-color: #002c50;
  }
  .games {
    padding-right: 16px;
    padding-left: 16px;
  }
  .container {
    display: block;
  }

  .games__item {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .bg-triangle5 {
    display: none;
  }
  .bg-triangle6 {
    position: absolute;
    margin-top: -1px;
    width: 100%;
    height: 100%;
    clip-path: polygon(100% 0, 35% 0%, 100% 32%);
    background-color: #005a9a;
  }
  .footer__inner {
    padding-right: 16px;
    padding-left: 16px;
  }
  .footer__nav {
    display: block;
  }

  .footer__nav li {
    margin-top: 16px;
  }

  /* ===================================
 ハンバーガーメニューの実装
====================================== */
  .drawer {
    display: block;
  }

  /* チェックボックスは非表示に */
  .drawer--hidden {
    display: none;
  }

  /* ハンバーガーアイコンの設置スペース */
  .drawer--open {
    display: flex;
    height: 27px;
    width: 27px;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 15; /* 重なり順を一番上に */
    cursor: pointer;
  }

  /* ハンバーガーメニューのアイコン */
  .drawer--open span,
  .drawer--open span:before,
  .drawer--open span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background: #ffffff;
    transition: 0.5s;
    position: absolute;
  }

  /* 三本線のうち一番上の棒の位置調整 */
  .drawer--open span:before {
    bottom: 8px;
  }

  /* 三本線のうち一番下の棒の位置調整 */
  .drawer--open span:after {
    top: 8px;
  }

  /* アイコンがクリックされたら真ん中の線を透明にする */
  #drawer__check:checked ~ .drawer--open span {
    background: rgba(255, 255, 255, 0);
  }

  /* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
  #drawer__check:checked ~ .drawer--open span::before {
    bottom: 0;
    transform: rotate(45deg);
  }

  #drawer__check:checked ~ .drawer--open span::after {
    top: 0;
    transform: rotate(-45deg);
  }

  /* メニューのデザイン*/
  .drawer__content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%; /* メニューを画面の外に飛ばす */
    z-index: 10;
    background: rgba(0, 44, 80);
    transition: 0.5s;
    text-align: center;
  }

  .drawer__list {
    list-style: none;
    width: 100%;
    margin-top: 50vh;
    transform: translateY(-50%);
  }

  .drawer__twitter-logo {
    width: 32px;
    height: 26px;
    margin: 0 auto 0 auto;
  }

  .drawer__item {
    color: #ffffff;
    font-size: 56px;
    font-weight: 500;
    text-transform: uppercase;
    margin-top: 36px;
  }

  .drawer__item a {
    transition: color 0.1s;
  }

  .drawer__item a:hover,
  .drawer__item a:active {
    color: #eb5d40;
  }

  /* アイコンがクリックされたらメニューを表示 */
  #drawer__check:checked ~ .drawer__content {
    left: 0; /* メニューを画面に入れる */
  }

  /* ===================================
   Members
====================================== */
  .winning-eleven {
    padding-top: 8rem;
    padding-right: 16px;
    padding-left: 16px;
    padding-bottom: 10rem;
  }
  .puyopuyo { 
    padding-top: 8rem;
    padding-right: 16px;
    padding-left: 16px;
    padding-bottom: 10rem;
  }
  .game-title {
    font-size: 2.4rem;
  }

  .member {
    width: 100%;
  }

  /* ===================================
   Sponsors
====================================== */
  .sponsors-page {
    width: 100%;
    text-transform: none;
    padding-right: 16px;
    padding-left: 16px;
    margin-top: 0;
    margin-bottom: 10rem;
  }

  .sponsors-page__description {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    line-height: 3.2rem;
    padding-top: 1.6rem;
    width: 100%;
  }

  .sponsors-page__sponsor {
    background-color: #fcfeff;
    width: 100%;
    margin-right: 0;
    margin-bottom: 3.2rem;
    padding: 16px, 16px;
    text-align: center;
  }

  .uniform__image-box {
    position: relative;
    background-image: linear-gradient(
        rgba(0, 44, 80, 0.1),
        rgba(0, 44, 80, 0.1)
      ),
      url(../img/uniform.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    background-color: #fcfeff;
    width: 100%;
    height: 60vh;
  }

  .uniform__description-box {
    background-color: rgb(0, 44, 80, 0.9);
    width: 100%;
    padding: 24px 16px;
  }
  .uniform__description {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 2.8rem;
    color: white;
    text-align: left;
  }
  /* ===================================
   Contact
====================================== */
  .contact {
    padding: 40px 16px;
    width: 100%;
    margin: 4rem auto;
  }
  .contact__description {
    width: 100%;
    margin-top: 4rem;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 200%;
  }
  #name {
    width: 100%;
    height: 5rem;
    margin-top: 2.4rem;
  }

  #mail-adress {
    width: 100%;
    height: 5rem;
    margin-top: 2.4rem;
  }

  #msg {
    width: 100%;
    height: 24rem;
    margin-top: 2.4rem;
  }
}