@charset "UTF-8";
/* Sass Document */

/*----------------------------------------*/
/* 基本設定 - 全てのデバイス用のベース */
/*----------------------------------------*/
#wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 100vh;
}

/* 小型スマホ（375px未満）: 375pxのレイアウトをベースに */
@media screen and (max-width: 374.9px) {
  #wrap {
    width: 375px;
    max-width: 100%;
    transform-origin: top center;
    transform: scale(calc(100vw / 375));
    min-height: calc(100vh * (375 / 100vw));
  }
}

/* 通常スマホ（375px以上768px未満）: レスポンシブレイアウト */
@media (min-width: 375px) and (max-width: 767.9px) {
  #wrap {
    width: 100%;
    max-width: 100%;
    transform: none;
  }
}

/* タブレットと小型PC（768px以上1500px未満）: 1200のレイアウトをベースに */
@media (min-width: 768px) and (max-width: 1499.9px) {
  #wrap {
    width: 1500px;
    max-width: 100%;
    transform-origin: top center;
    transform: scale(calc(100vw / 1500));
    /*min-height: calc(100vh * (1500 / 100vw));*/
  }
}

/* PC・大型タブレット（1200x以上）: 通常のレスポンシブ */
@media screen and (min-width: 1500px) {
  .wrap {
    width: 100%;
    max-width: 100%;
    transform: none;
  }
}