/* MIEKATA スマホ・タブレットのメニュー（1100px 以下。2026-10-23 吉田さんの改修指示書 A5）
   - ヘッダーの「メニュー」で開くダイアログ。中身は shell.js がヘッダーとフッターのリンクから作る
   - 形は AIKATA のメニュー（aikata-ui130.css の menu130）と同じ。class は mmn- で分ける */

:root {
  --mmn-bg: #f9fbfe;
  --mmn-ink: #1b1e2b;
  --mmn-text: #3d4456;
  --mmn-rule: #d3dbe8;
  --mmn-blue: var(--ds-blue, #2448d8);
  --mmn-cta: var(--ds-cta, #bf5139);
  --mmn-cta-hover: var(--ds-cta-dk, #a8452f);
  --mmn-white: #fff;
  --mmn-shade: rgb(16 38 80 / .6);
}

dialog.mmn {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(620px, 100%);
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--mmn-bg);
  color: var(--mmn-ink);
  box-sizing: border-box;
  overflow: auto;
  overscroll-behavior: contain;
  font-family: 'Noto Sans JP', sans-serif;
  font-feature-settings: "palt" 1;
  letter-spacing: .03em;
  text-align: left;
}
dialog.mmn::backdrop { background: var(--mmn-shade); }
dialog.mmn * { box-sizing: border-box; }
.mmn-in { padding: 26px 32px 36px; }
.mmn-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
dialog.mmn .mmn-brand { display: flex; align-items: center; width: 120px; height: 35px; overflow: hidden; color: var(--mmn-ink) !important; font: 500 32px/1 'Barlow Condensed', 'Noto Sans JP', sans-serif !important; letter-spacing: .08em !important; white-space: nowrap; text-decoration: none !important; }
.mmn-close { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--mmn-rule); border-radius: 999px; background: var(--mmn-white); color: var(--mmn-ink); font: 500 14px/1 'Noto Sans JP', sans-serif; cursor: pointer; }
.mmn-close svg { width: 18px; height: 18px; }
.mmn-title { margin: 0 0 8px; color: var(--mmn-text); font-size: 13px; font-weight: 700; letter-spacing: .1em; }
.mmn-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin: 0 0 32px; }
.mmn-links a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; min-height: 64px; padding: 10px 0; border-bottom: 1px solid var(--mmn-rule); color: var(--mmn-ink) !important; font-size: 16px; font-weight: 700; line-height: 1.4; text-decoration: none !important; }
.mmn-links a[aria-current="page"] { color: var(--mmn-blue) !important; }
.mmn-links a svg { flex: none; width: 18px; height: 18px; color: var(--mmn-blue); }
.mmn-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin: -16px 0 32px; }
.mmn-sub a { display: flex; align-items: center; min-height: 44px; color: var(--mmn-text) !important; font-size: 14px; text-decoration: none !important; }
.mmn-sub a[aria-current="page"] { color: var(--mmn-blue) !important; }
.mmn-contact { padding-top: 24px; border-top: 2px solid var(--mmn-ink); }
.mmn-contact p { margin: 0 0 16px; color: var(--mmn-text); font-size: 14px; line-height: 1.7; }
.mmn-go { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 52px; padding: 0 24px; border-radius: 999px; background: var(--mmn-cta); color: var(--mmn-white) !important; font: 700 16px/1 'Noto Sans JP', sans-serif; letter-spacing: .04em; text-decoration: none !important; transition: background-color .2s; }
.mmn-go:hover { background: var(--mmn-cta-hover); }
.mmn-go svg { width: 18px; height: 18px; }
dialog.mmn :is(a, button):focus-visible { outline: 2px solid var(--mmn-blue); outline-offset: 3px; }
html.mmn-lock, html.mmn-lock body { overflow: hidden !important; }
@media (hover: hover) { .mmn-links a:hover, .mmn-sub a:hover { color: var(--mmn-blue) !important; } }
@media (max-width: 767px) {
  .mmn-in { padding: 20px 20px 28px; }
  .mmn-top { margin-bottom: 24px; }
  dialog.mmn .mmn-brand { width: 96px; height: 28px; font-size: 26px !important; }
  .mmn-links { gap: 0 16px; }
  .mmn-links a { min-height: 56px; font-size: 15px; }
  .mmn-sub { gap: 0 16px; }
  .mmn-go { height: 48px; }
}
@media (prefers-reduced-motion: no-preference) {
  dialog.mmn[open] .mmn-in { animation: mmn-in .3s cubic-bezier(.43, .05, .17, 1); }
  @keyframes mmn-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
}