/* ===== スマホのサイドメニュー =====
 *
 * 【なぜ要るか】
 * 幅が狭いと、上の行き先（できること・料金・使い方…）が消えていた。
 *   ・製品ページと規約は display:none で**まるごと消える**
 *   ・使い方とおしらせは、ロゴの下へ回って横に流れる（読みにくい）
 * どちらも「いまどこに行けるのか」が分からない。押せる場所をひとつにまとめる。
 *
 * ★ 見た目はここだけに書く。頁ごとのCSSに書き戻さないこと（3種類のヘッダがあるため）。
 * ★ JSが動いたときだけ効かせる（html.has-mmenu）。動かない環境で行き先が消えると、
 *   いまより悪くなる。
 */

.mmenu-btn{
  display:none; margin-left:auto;
  width:42px; height:42px; padding:0;
  background:transparent; border:1px solid rgba(159,225,203,.28); border-radius:10px;
  color:#9fe1cb; cursor:pointer; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.mmenu-btn:hover{ border-color:rgba(159,225,203,.55); }
.mmenu-btn span{ display:block; width:18px; height:2px; background:currentColor; border-radius:2px;
  position:relative; transition:transform .18s ease, background-color .18s ease; }
.mmenu-btn span::before,.mmenu-btn span::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:currentColor; border-radius:2px;
  transition:transform .18s ease, top .18s ease; }
.mmenu-btn span::before{ top:-6px; }
.mmenu-btn span::after{ top:6px; }
.mmenu-btn[aria-expanded="true"] span{ background:transparent; }
.mmenu-btn[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.mmenu-btn[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

.mmenu-back{
  position:fixed; inset:0; z-index:80; background:rgba(6,8,11,.62);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.mmenu{
  position:fixed; top:0; right:0; bottom:0; z-index:81;
  width:min(84vw,320px); background:#12151b;
  border-left:1px solid rgba(159,225,203,.18);
  box-shadow:-18px 0 40px rgba(0,0,0,.45);
  transform:translateX(102%); transition:transform .22s cubic-bezier(.16,1,.3,1);
  display:flex; flex-direction:column; overflow-y:auto;
  padding:18px 0 28px;
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
}
.mmenu-ttl{ font-size:11px; letter-spacing:.18em; color:#8a938f; padding:6px 22px 10px; }
.mmenu a{
  display:block; padding:13px 22px; font-size:15px; line-height:1.5;
  color:#eef2f0; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.05);
}
.mmenu a small{ display:block; font-size:12px; color:#8a938f; margin-top:2px; }
.mmenu a:hover{ background:rgba(159,225,203,.07); }
.mmenu a[aria-current="page"]{ color:#9fe1cb; }
.mmenu a[aria-current="page"]::before{ content:"― "; }
.mmenu-sep{ height:1px; margin:10px 22px; background:rgba(255,255,255,.08); }

html.mmenu-open{ overflow:hidden; }
html.mmenu-open .mmenu{ transform:translateX(0); }
html.mmenu-open .mmenu-back{ opacity:1; pointer-events:auto; }

/* ★ 押せる場所をひとつに。狭いときは、上の行き先はメニューへまとめる。 */
@media(max-width:1000px){
  html.has-mmenu .mmenu-btn{ display:flex; }
  html.has-mmenu .dh-nav,
  html.has-mmenu .head nav,
  html.has-mmenu .lhead nav{ display:none; }
  /* ロゴの下へ回す指定も要らなくなる（行き先はメニューにある） */
  html.has-mmenu .dh-in{ flex-wrap:nowrap; }
}

@media(prefers-reduced-motion:reduce){
  .mmenu,.mmenu-back,.mmenu-btn span,.mmenu-btn span::before,.mmenu-btn span::after{ transition:none; }
}