@charset "UTF-8";
/* スマホ・タブレット縦（768px 以下）のメニュー（ハンバーガー）。旧テーマは 768px 以下でナビを隠すだけだったので追加。
   769px 以上（PC・タブレット横）では何も表示しない＝見た目は従来どおり。開閉は assets/js/site.js */
.l-hdr_menu, .l-sp_menu {display: none;}

@media screen and (max-width: 768px) {
  /* メニューボタンとお問い合わせボタンを横に並べる */
  .l-hdr_nav {display: flex; flex-direction: row; align-items: stretch;}
  .l-hdr_menu {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    width: 60px; height: 60px; padding: 0; margin: 0;
    background: #fff; border: none; border-left: 1px solid #e9e9e9; color: #222;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .l-hdr_menu:focus-visible {outline: 2px solid #0058ad; outline-offset: -4px;}
  .l-hdr_menu__bars {position: relative; display: block; width: 22px; height: 16px;}
  .l-hdr_menu__bars span {position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 1px; transition: transform .25s, opacity .2s, top .25s;}
  .l-hdr_menu__bars span:nth-child(1) {top: 0;}
  .l-hdr_menu__bars span:nth-child(2) {top: 7px;}
  .l-hdr_menu__bars span:nth-child(3) {top: 14px;}
  .l-hdr_menu[aria-expanded="true"] .l-hdr_menu__bars span:nth-child(1) {top: 7px; transform: rotate(45deg);}
  .l-hdr_menu[aria-expanded="true"] .l-hdr_menu__bars span:nth-child(2) {opacity: 0;}
  .l-hdr_menu[aria-expanded="true"] .l-hdr_menu__bars span:nth-child(3) {top: 7px; transform: rotate(-45deg);}
  .l-hdr_menu__txt {font-size: 9px; letter-spacing: .08em; line-height: 1;}

  /* パネル：ヘッダーのすぐ下に全幅で開く */
  .l-sp_menu {display: block; position: absolute; top: 100%; left: 0; right: 0; background: #fff; box-shadow: 0 8px 16px rgba(0, 0, 0, .15); max-height: calc(100vh - 60px); overflow-y: auto;}
  .l-sp_menu[hidden] {display: none;}
  .l-sp_menu__list {list-style: none; margin: 0; padding: 0; border-top: 3px solid #0058ad;}
  .l-sp_menu__item {border-bottom: 1px solid #e9e9e9;}
  .l-sp_menu__link {display: block; padding: 16px 20px; color: #222; font-weight: 700; font-size: 15px; text-decoration: none;}
  .l-sp_menu__link::after {content: "›"; float: right; color: #0058ad;}
  .l-sp_menu__link:active, .l-sp_menu__link:focus-visible {background: #f0f6fc; outline: none;}
}