/*
 * sx_size: サイズ
 *
 ******************************************************************************/

.sx-w-xs,
.sx-w-sm,
.sx-w-md,
.sx-w-lg,
.sx-w-xl {
  margin: 0 auto;
}

/* xs: 極小 (縦モバイルサイズ)
 *   デバイス幅: < 576px
 *----------------------------------------------------------------------------*/
@media (min-width: 0px) {
  .font-xs {
    font-size: 0.52rem;
  }
  .font-sm {
    font-size: 0.62rem;
  }
  .font-md {
    font-size: 8px;
  }
  .font-lg {
    font-size: 0.82rem;
  }
  .font-xl {
    font-size: 0.92rem;
  }

  .sx-w-xs {
    width: 80%;
  }
  .sx-w-sm {
    width: 98%;
  }
  .sx-w-md {
    width: 98%;
  }
  .sx-w-lg {
    width: 98%;
  }
  .sx-w-xl {
    width: 98%;
  }

  header img {
    margin-left: 1rem !important;
  }
  header nav {
    padding: 0 0 0 7rem  !important;
    padding: 0 1rem 0 7rem  !important;
  }

}

/* sm: 小 (横モバイルサイズ)
 *   デバイス幅: >= 576px
 *----------------------------------------------------------------------------*/
@media (min-width: 576px) {
  .font-xs {
    font-size: 0.62rem;
  }
  .font-sm {
    font-size: 0.72rem;
  }
  .font-md {
    font-size: 8.5px;
  }
  .font-lg {
    font-size: 0.92rem;
  }
  .font-xl {
    font-size: 1.02rem;
  }

  .sx-w-xs {
    width: 70%;
  }
  .sx-w-sm {
    width: 90%;
  }
  .sx-w-md {
    width: 98%;
  }
  .sx-w-lg {
    width: 98%;
  }
  .sx-w-xl {
    width: 98%;
  }

  header img {
    margin-left: 1rem !important;
  }
  header nav {
    padding: 0 0 0 7rem  !important;
    padding: 0 1rem 0 7rem  !important;
  }
}

/* md: 中 (タブレットサイズ)
 *   デバイス幅: >= 768px
 *----------------------------------------------------------------------------*/
@media (min-width:768px){
  .font-xs {
    font-size: 0.67rem;
  }
  .font-sm {
    font-size: 0.77rem;
  }
  .font-md {
    font-size: 9px;
  }
  .font-lg {
    font-size: 0.97rem;
  }
  .font-xl {
    font-size: 1.07rem;
  }

  .sx-w-xs {
    width: 60%;
  }
  .sx-w-sm {
    width: 90%;
  }
  .sx-w-md {
    width: 98%;
  }
  .sx-w-lg {
    width: 98%;
  }
  .sx-w-xl {
    width: 98%;
  }

  header img {
    margin-left: 1% !important;
  }
  header nav {
    padding: 0 1rem 0 8%  !important;
    padding: 0 1% 0 8%  !important;
  }
}

/* lg: 大 (デスクトップサイズ)
 *   デバイス幅: >= 992px
 *----------------------------------------------------------------------------*/
@media (min-width:992px){
  .font-xs {
    font-size: 0.72rem;
  }
  .font-sm {
    font-size: 0.82rem;
  }
  .font-md {
    font-size: 9.5px;
  }
  .font-lg {
    font-size: 1.02rem;
  }
  .font-xl {
    font-size: 1.12rem;
  }

  .sx-w-xs {
    width: 50%;
  }
  .sx-w-sm {
    width: 80%;
  }
  .sx-w-md {
    width: 90%;
  }
  .sx-w-lg {
    width: 98%;
  }
  .sx-w-xl {
    width: 98%;
  }

  header img {
    margin-left: 5% !important;
  }
  header nav {
    padding: 0 1rem 0 10.5%  !important;
    padding: 0 5% 0 10.5%  !important;
  }
}

/* xl: 特大 (大画面サイズ)
 *   デバイス幅: >= 1400px
 *----------------------------------------------------------------------------*/
@media (min-width:1400px){
  .font-xs {
    font-size: 0.80rem;
  }
  .font-sm {
    font-size: 0.90rem;
  }
  .font-md {
    font-size: 10px;
  }
  .font-lg {
    font-size: 1.10rem;
  }
  .font-xl {
    font-size: 1.20rem;
  }

  .sx-w-xs {
    width: 40%;
  }
  .sx-w-sm {
    width: 60%;
  }
  .sx-w-md {
    width: 80%;
  }
  .sx-w-lg {
    width: 90%;
  }
  .sx-w-xl {
    width: 98%;
  }

  header img {
    margin-left: 10% !important;
  }
  header nav {
    padding: 0 1rem 0 14%  !important;
    padding: 0 10% 0 14%  !important;
  }

}

/* 最小サイズ指定
 *----------------------------------------------------------------------------*/
.min-w-xs{
  min-width: 95px;
}

.min-w-sm{
  min-width: 160px;
}

.min-w-md{
  min-width: 180px;
}

.min-w-lg{
  min-width: 240px;
}

.min-w-xl{
  min-width: 270px;
}