#flag {
  background-image: url("/imgs/flag.png");
  background-repeat: no-repeat;
  background-size: contain; /* セル全体をカバー */
  background-position: center; /* 中央に配置 */

  @media (max-width: 767px) {
    background-image: url("/imgs/flag_sm.png");
  }
}

#team {
  background-image: url("/imgs/team.png");
  background-repeat: no-repeat;
  background-size: contain; /* 要素に完全に収める */
  background-position: center;/* 中央に配置 */
  @media (max-width: 767px) {
    background-image: url("/imgs/team_sp.png");
    transform: scale(0.8);
  }
}


#gl_container > canvas {
  top: calc(var(--header-height) * -1) !important;
}

.cellcommon {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

/* mobile */
@media (max-width: 767px) {
  #grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-template-areas:
      "window_1 team     window_4"
      "window_1 window_2 window_4"
      "flag     flag     flag"
      "window_3 window_6 window_6"
      "window_5 window_6 window_6";
    width: 100%;
  }

  #flag {
    grid-area: flag;
    aspect-ratio: 3 / 1;
  }

  #team {
    grid-area: team;
    aspect-ratio: 1 / 1;
    /* background-image: url("/imgs/team.png"); */
  }

  #window_1 {
    grid-area: window_1;
    aspect-ratio: 1 / 2;
  }

  #window_2 {
    grid-area: window_2;
    aspect-ratio: 1 / 1;
  }

  #window_3 {
    grid-area: window_3;
    aspect-ratio: 1 / 1;
  }

  #window_4 {
    grid-area: window_4;
    aspect-ratio: 1 / 2;
  }

  #window_5 {
    grid-area: window_5;
    aspect-ratio: 1 / 1;
  }

  #window_6 {
    grid-area: window_6;
    aspect-ratio: 1 / 1;
  }
}

/* desktop */
@media (min-width: 768px) {
  #grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas:
      "flag     flag     window_1 window_2 window_3"
      "window_4 window_5 window_1 window_6 window_6"
      "window_4 team     team     window_6 window_6";
    width: 100%;
  }

  #flag {
    grid-area: flag;
    aspect-ratio: 2 / 1;
  }

  #team {
    grid-area: team;
    aspect-ratio: 2 / 1;
  }

  #window_1 {
    grid-area: window_1;
    aspect-ratio: 1 / 2;
  }

  #window_2 {
    grid-area: window_2;
    aspect-ratio: 1 / 1;
  }

  #window_3 {
    grid-area: window_3;
    aspect-ratio: 1 / 1;
  }

  #window_4 {
    grid-area: window_4;
    aspect-ratio: 1 / 2;
  }

  #window_5 {
    grid-area: window_5;
    aspect-ratio: 1 / 1;
  }

  #window_6 {
    grid-area: window_6;
    aspect-ratio: 1 / 1;
  }
}