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

  .step {
    list-style-type: none;
    display: table;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }

  .step li {
    display: table-cell;
    position: relative;
    background: #4CAF50;
    padding: 1em 0.5em 1em 2em;
    color: #fff;
  }

  .step li:last-child {
    padding-right: 1em;
  }

  .step li:last-child:before,
  .step li:last-child:after {
    display: none;
  }

  .step li:before,
  .step li:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
  }

  /* 右向き矢印（576px以上） */
  .step li:before {
    top: -.6rem;
    right: -1rem;
    border-style: solid;
    border-color: transparent transparent transparent #fff;
    border-width: 50px 0 50px 1rem;
    z-index: 10;
  }

  .step li:after {
    top: -.6rem;
    right: -.9rem;
    border-style: solid;
    border-color: transparent transparent transparent #4CAF50;
    border-width: 50px 0 50px 1rem;
    z-index: 10;
  }

  .step li.is-current {
    background-color: #1F5C50;
    font-weight: bold;
  }

  .step li.is-current:after {
    border-color: transparent transparent transparent #1F5C50;
  }
}

/* 大デバイス（デスクトップ, 992px 以上） */
@media (min-width: 992px) {

  /* navbar レイアウト */
  .navbar ul {
    display: flex;
  }

  .navbar ul li {
    transform: none;
    border-left: none;
  }

  .navbar ul li a {
    transform: none;
    padding: 0; /* bootstrapに任せる */
  }

  /* 折り返し防止 */
  .navbar-nav .nav-link,
  .navbar .btn,
  .navbar .d-lg-flex{
    white-space: nowrap;
  }

  /* 余白を少し詰める */
  .navbar-nav .nav-item{
    padding-left: .5rem !important;
    padding-right: .5rem !important;
  }

  /* 少しだけ文字を小さく */
  .navbar-nav .nav-link{
    font-size: .95rem;
  }

}

/* 中デバイス（992px 未満） */
@media (max-width: 991.98px) {
  .navbar ul {
    padding-top: 1rem;
  }

  .navbar-brand img {
    height: 55px;
  }
}

/* 極小デバイス（576px 未満） */
@media (max-width: 575.98px) {

  footer nav ul.navbar-nav {
    display: block;
  }

  /* 縦並びステップ */
  .step {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .step li {
    position: relative;
    width: 100%;
    background-color: #4CAF50;
    padding: 1em;
    margin-bottom: 1.5rem;
    text-align: center;
    color: #fff;
  }

  /* 下向き三角 */
  .step li::after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 50vw 0 50vw;
    border-color: #4CAF50 transparent transparent transparent;
  }

  .step li:last-child::after {
    display: none;
  }

  .step li.is-current {
    background: #1F5C50;
    font-weight: bold;
  }

  .step li.is-current::after {
    border-color: #1F5C50 transparent transparent transparent;
  }
}