/* 中デバイス（タブレット, 768px 以上）
============================================== */
@media (min-width: 768px) {
  .img-size {
    width: 70px;
    margin-bottom: .5rem;
  }

  .sma {	/*PCでは表示しない*/
    display: none;
  }

  .pc {	/*PCでは表示する*/
    display: block;
  }

}

/* 大デバイス（デスクトップ, 992px 以上）
============================================== */
@media (min-width: 992px) {
  nav ul {
    display: flex;
    padding-top: 0.7em;
  }

  nav ul li.nav-item {
    -webkit-transform: skewX(150deg);
    -moz-transform: skewX(150deg);
    transform: skewX(150deg);
    border-left: 1px dotted gray;
  }

  ul .right {
    -webkit-transform: skewX(150deg);
    -moz-transform: skewX(150deg);
    transform: skewX(150deg);
    border-right: 1px dotted gray;
  }

  ul .border-after {
    border-left: 1px dotted white;
  }

  footer .right {
    border-right: 1px dotted white;
  }

  nav ul li.nav-item > a {
    display: block;
    transform: skewX(-150deg);
    padding: 0 10px;
  }

  nav ul li.nav-item > ul {
    transform: skewX(-150deg);
  }

  .dropdown-menu {
    min-width: 86%;
    left: 36px;
  }

  .sma {	/*PCでは表示しない*/
    display: none;
  }

  .pc {	/*PCでは表示する*/
    display: block;
  }

/* フローティングメニュー */

  .floating-nav {
    position: fixed;
    width: 50px;
    right: 0;
    top: 15%;
    cursor: pointer;
  }

  .floating-nav a {
    color: white;
    writing-mode: vertical-rl;
    text-orientation: upright;
    text-decoration: none;
  }

  /* modal表示時はスクロールバー幅分のmarginを取る --bar-widthはJavascriptで再設定 */
  .modal-open .floating-nav {
    --bar-width: 15px;
    margin-right: var(--bar-width);
  }

}

/* 中デバイス（タブレット, 992px 未満）
============================================== */
@media (max-width: 991.98px) {
  nav ul {
    padding-top: 1rem;
  }

  .sma{	/*PCでは表示しない*/
    display: none;
   }

  .pc {	/*PCでは表示する*/
    display: block;
  }

/* フローティングメニュー */

  .floating-nav {
    position: fixed;
    width: 30px;
    right: 0;
    top: 12%;
    cursor: pointer;
  }

  .floating-nav a {
    color: white;
    writing-mode: vertical-rl;
    text-orientation: upright;
    text-decoration: none;
  }

  /* modal表示時はスクロールバー幅分のmarginを取る --bar-widthはJavascriptで再設定 */
  .modal-open .floating-nav {
    --bar-width: 15px;
    margin-right: var(--bar-width);
  }

}

/* 極小デバイス（縦向きモバイル, 576px 未満）
============================================== */
@media (max-width: 575.98px) {
  footer nav ul.navbar-nav {
    display: block;
  }

  .sma{	/*スマホでは表示*/
    display: block;
  }

  .pc {	/*PCでは表示しない*/
    display: none;
  }

}