/* スマートフォンのメニューの帯に、電話とお問い合わせの入口を出す（2026-11-10 Claude Code）
   PC・タブレットではヘッダー右の電話番号・お問い合わせの画像が見えるので、575px以下だけで表示する。 */
.c-navi__mobile-contact {
  display: none;
}

@media screen and (max-width: 575px) {
  .c-navi__mobile-contact {
    display: flex;
    align-items: center;
    gap: 2.2rem;
    margin-right: auto;
    height: 45px;
  }

  .c-navi__mobile-contact a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    color: #003894;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
  }

  .c-navi__mobile-contact svg {
    width: 18px;
    height: 18px;
    flex: none;
    fill: currentColor;
  }

  .c-navi__mobile-contact a:focus-visible {
    outline: 2px solid #dc8c23;
    outline-offset: 2px;
  }
}

/* 幅の狭い機種（360px未満）では、2つのリンクの間を詰め、左へ寄せて（ロゴの位置にそろう）メニューボタンとの間をあける
   2026-11-10 利用者の指摘で左寄せを追加（メニューボタンとの間 22px→36px） */
@media screen and (max-width: 359px) {
  .c-navi__mobile-contact {
    gap: 1.2rem;
    margin-left: -14px;
  }
}