@charset "UTF-8";
/* ==========================================================
   スマホ・タブレット用メニュー(ドロワー / フェーズ2 T-05)

   移行元:Elementor ポップアップ「Menu Mobile - Update」(ID 15481)
   値の出典:
     - docs/extracted/elementor-css/post-15481.css
     - 本番で実際に開いた状態の計測値(mibot-baseline/shot-drawer.js)
       スマホ 375px / タブレット 768px・1024px

   ブレークポイントは Elementor の既定に合わせる。
     スマホ     〜767px
     タブレット  768〜1024px
   PC(1025px〜)では開くボタンが無いので出ない。

   .hamburgerMenu__subMenu(会社概要・採用情報)のスタイルは
   style.css / common.css にあるものをそのまま使う。
   ========================================================== */

/* ---- 全画面の土台 ----
   本番は position:fixed の全画面モーダル(z-index 9999、背景 #F2F2F2)。
   中身が画面より長いときはこの要素の中でスクロールし、スクロールバーは隠す。
   z-index は to-top プラグインの「トップに戻る」ボタン(9999)より上にする。
   本番は開くたびに body 末尾へ差し込まれるので同じ 9999 でも上に来ていた。 */
.l-drawer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #f2f2f2;
  color: #333333;
  font-family: var(--mibot-font);
  font-size: 16px;
  line-height: 24px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.l-drawer::-webkit-scrollbar {
  display: none;
}

.l-drawer[hidden] {
  display: none;
}

/* 本番は .elementor a { text-decoration:none } の中にいた。
   theme.css の .page-content a { text-decoration:underline } が届くページがあるので打ち消す */
.l-drawer a {
  text-decoration: none;
}

/* 開いている間は背面をスクロールさせない。
   本番(Elementor)は body に max-height:100vh を当てるため閉じた後に
   ページ先頭へ戻ってしまうが、それは再現せずスクロール位置を保つ。 */
html.is-drawerOpen,
html.is-drawerOpen body {
  overflow: hidden;
}

.l-drawer__sheet {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 10px 10px 0;
}

/* ---- 上段:ロゴ + 閉じるボタン ---- */
.l-drawer__top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  height: 44px;
}

.l-drawer__logo {
  padding-top: 5px; /* 本番の実測:画像の上端が上段の上端から5px */
  line-height: 0;
  font-size: 0;
}

.l-drawer__logo a {
  display: inline-block;
  line-height: 0;
  font-size: 0;
}

.l-drawer__logoImg {
  display: inline-block;
  vertical-align: middle;
  width: 60px;
  height: auto;
  margin: 0;
}

/* 閉じるボタン
   reset.css が button に枠線・ホバー色(#c36)を当てているので打ち消す。 */
.l-drawer__close {
  display: block;
  width: 34px;
  height: 34px;
  margin: 5px 5px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: #f5f5f5;
  color: inherit;
  line-height: 0;
  cursor: pointer;
}

.l-drawer__close:hover,
.l-drawer__close:focus {
  background-color: #f5f5f5;
  color: inherit;
}

.l-drawer__close svg {
  display: block;
  width: 34px;
  height: 34px;
  margin: 0 auto;
}

/* ---- 中段:メニュー ---- */
.l-drawer__body {
  margin-top: 20px;
  padding: 6px;
}

.l-drawer__navBox {
  margin-top: 24px;
  border-radius: 10px;
  overflow: hidden;
}

.l-drawer__nav {
  margin-top: 10px;
}

.l-drawer__menu,
.l-drawer__menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.l-drawer__menu li {
  position: relative;
  margin: 0;
  padding: 0;
}

.l-drawer__menu a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 18px;
  font-family: var(--mibot-font);
  font-size: 18px;
  font-weight: 400;
  line-height: 20px;
  color: #181818;
  text-decoration: none;
}

.l-drawer__menu a:hover,
.l-drawer__menu a:focus {
  color: var(--mibot-accent);
  background-color: #ffffff;
}

/* 現在ページ / 子メニューを開いている親 */
.l-drawer__menu .current-menu-item > a,
.l-drawer__menu .current-menu-ancestor > a,
.l-drawer__menu li.is-open > a,
.l-drawer__menu li.is-open > a:hover,
.l-drawer__menu li.is-open > a:focus {
  color: var(--mibot-accent);
  background-color: rgba(255, 255, 255, 0.69); /* #ffffffb0 */
}

/* メニュー項目名に入っているアイコン画像(ニュースレター登録 / ログイン)
   style.css にも同じ指定があるが、style.css を読まないページのために持つ */
.l-drawer__menu a img {
  width: 20px;
  height: auto;
  margin: 0 0.5em 0 0;
}

/* 子メニューの開閉矢印(親項目のリンク内に置く) */
.l-drawer__subArrow {
  display: flex;
  align-items: center;
  margin: -10px 0;
  padding: 10px 0 10px 10px;
  line-height: 1;
}

.l-drawer__subArrow svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* 子メニュー */
.l-drawer__menu .sub-menu {
  display: none;
  padding: 0 0 13px;
  background-color: rgba(255, 255, 255, 0.69);
}

.l-drawer__menu li.is-open > .sub-menu {
  display: block;
}

.l-drawer__menu .sub-menu li {
  display: flex;
  align-items: center;
}

.l-drawer__menu .sub-menu a {
  width: 100%;
  padding: 14px 14px 14px 35px;
  font-size: 14px;
  line-height: 16px;
  border: none;
}

/* ---- 下段:会社概要 / 採用情報 ----
   .hamburgerMenu__subMenu の見た目は style.css / common.css。ここでは位置だけ。 */
.l-drawer__corp {
  margin: 0;
}

/* ==========================================================
   タブレット(768〜1024px)
   ========================================================== */
@media (min-width: 768px) {
  .l-drawer__sheet {
    padding: 10px;
  }

  .l-drawer__top {
    align-items: center;
    height: 54px;
  }

  .l-drawer__logo {
    align-self: flex-start;
    padding-top: 24px; /* 本番の実測:画像の上端が上段の上端から24px */
  }

  .l-drawer__logoImg {
    width: 55.2px;
  }

  /* 本番はボタンの余白がそのまま残っていて、薄いグレーの箱(82x58)が
     画面右端から8pxはみ出している。はみ出した分は見えないので、
     箱を画面右端でぴったり止める(74px幅、右マージン -10px)。
     アイコンの位置(右端から50px、上から24px)は本番と同じ。
     はみ出しを残すとこの要素が横スクロールの原因になり、
     フォーカス移動で全体が8pxずれることがあった。 */
  .l-drawer__close {
    width: 74px;
    height: 58px;
    margin: 2px -10px -6px 0;
    padding: 12px 16px 12px 24px;
    border-radius: 3px;
  }

  .l-drawer__body {
    padding: 10px;
  }

  .l-drawer__navBox {
    margin-top: 0;
  }

  .l-drawer__menu a {
    padding: 20px;
    font-size: 20px;
    line-height: 20px;
  }

  .l-drawer__menu .sub-menu a {
    padding: 14px 14px 14px 35px;
    font-size: 14px;
    line-height: 16px;
  }
}