/* ===================================================
   site-responsive-base.css
   サイト独自のレスポンシブ対応CSS - 雛形
   各メディアクエリの画面幅ごとの定義のみ記述
=================================================== */


/* ────────────── 1. max-width 指定（以下） ────────────── */

/* ～ 599px（X-Small 以下） */
@media screen and (max-width: 599px) {
  /* スマホサイズ以下向け */
}

/* ～ 779px（Small 以下） */
@media screen and (max-width: 779px) {
  /* タブレット縦向き以下 */
}

/* ～ 1023px（Medium 以下） */
@media screen and (max-width: 1023px) {
  /* タブレット横向き以下 */
}

/* ～ 1590px（Large 以下） */
@media screen and (max-width: 1590px) {
  /* 小型ノートPC以下 */
}

/* ～ 2699px（X-Large 以下） */
@media screen and (max-width: 2699px) {
  /* フルHD前提の最大幅以下 */
}


/* ────────────── 2. min-width 指定（以上） ────────────── */

/* 600px～（X-Small 以上） */
@media screen and (min-width: 600px) {
  /* スマホサイズ以上向け */
}

/* 780px～（Small 以上） */
@media screen and (min-width: 780px) {
  /* タブレット以上 */
}

/* 1024px～（Medium 以上） */
@media screen and (min-width: 1024px) {
  /* タブレット横向き以上 */
}

/* 1591px～（Large 以上） */
@media screen and (min-width: 1591px) {
  /* ノートPC以上 */
}

/* 2700px～（XX-Large 以上） */
@media screen and (min-width: 2700px) {
  /* 超高解像度ディスプレイ以上 */
}


/* ────────────── 3. 範囲指定（min ～ max） ────────────── */

/* 600px ～ 779px（Small） */
@media screen and (min-width: 600px) and (max-width: 779px) {
  /* 小型デバイス */
}

/* 780px ～ 1023px（Medium） */
@media screen and (min-width: 780px) and (max-width: 1023px) {
  /* タブレット */
}

/* 1024px ～ 1590px（Large） */
@media screen and (min-width: 1024px) and (max-width: 1590px) {
  /* ノートPC程度 */
}

/* 1591px ～ 2699px（X-Large） */
@media screen and (min-width: 1591px) and (max-width: 2699px) {
  /* フルHD〜WQHD */
}

/* 2700px以上（XX-Large）*/
@media screen and (min-width: 2700px) {
  /* ウルトラワイド・4K向け */
}