/* ****************************************
レイアウト・レスポンシブ設定用CSS layout.css
（全店舗共通・色要素なし・更新したら全店舗差し替え）

2020.01.07 レイアウト刷新（メインイメージをとてもデカくしつつ、フル画面でも項目がチラ見できる設計に）
2020.01.06 レイアウト策定
**************************************** */

/* ■■■ 仮色 ■■■ */
/*#wrapper header{border:1px solid #ffff99;}*/
/*
#wrapper article{border:1px solid #ffffff;}
#wrapper footer{border:1px solid #999999;}
#wrapper #side1{border:1px solid #9999ff;}
#wrapper #side2{border:1px solid #ff9999;}
#wrapper{color: #ffffff;}
*/

/* ■■■ SP ■■■ */
#wrapper{
  display: grid;
  gap: 1.5em;
  overflow: hidden;
  grid-template-columns: 100%;
}
  #wrapper > header{
    min-height: 75vh;
  }
  #wrapper > article{
    min-height: 50vh;
  }
.pc{ display: none; }
.sp{ display: block; }

/* ■■■ PC通常 ■■■ */
@media screen and (min-width: 767px) { /*ウィンドウ幅が最大767px異常の場合に適用*/
  #wrapper{
    grid-template-columns: calc(100% - 240px - 3em) 1fr;
    grid-template-rows: 80vh auto auto auto ;
  }
    #wrapper > header{
      order: 1;
      grid-column: 1 / 3;
      grid-row: 1 / 2;
      text-align: center;
    }
      #wrapper > header > img{
        max-width: 960px;
      }
    #wrapper > article{
      order: 2;
      grid-row: 2 / 4;
    }
    #wrapper > footer{
      order: 3;
      grid-row: 4 / 5;
    }
    #wrapper #side1{
      order: 4;
      grid-row: 2 / 3;
      width: 240px;
    }
    #wrapper #side2{
      order: 5;
      grid-row: 3 / 5;
      width: 240px;
    }
  .pc{ display: block; }
  .sp{ display: none; }
}

/* ■■■ PCフル ■■■ */
@media screen and (min-width: 1280px) { /*ウィンドウ幅が1920px以上の場合に適用*/
  #wrapper{
    grid-template-columns: 240px calc(100% - 480px - 3em) 240px;
  }
    #wrapper > header{
      order: 1;
      grid-column: 1 / 4;
      grid-row: 1 / 2;
    }
      #wrapper > header > img{
        max-width: 1280px;
      }
    #wrapper > article{
      order: 3;
      grid-row: 2 / 3;
      width: auto;
    }
    #wrapper > footer{
      order: 4;
      grid-row: 3 / 4;
      width: auto;
    }
    #wrapper #side1{
      order: 2;
      grid-row: 2 / 4;
      width: auto;
    }
    #wrapper #side2{
      order: 5;
      grid-row: 2 / 4;
      width: auto;
    }
}