/* ===== Metro 12M: shared base (language switch, type, layout) ===== */
/* Full width in any theme: strip the drag-and-drop wrapper padding and max-width around Metro modules */
.dnd-section:has(.m12),
.dnd-section:has(.m12) > .row-fluid,
.dnd-column:has(.m12),
.dnd-row:has(.m12),
.dnd-module:has(.m12),
.widget-span:has(> .widget-type-custom_widget .m12) { padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; max-width: none !important; }
.dnd-section:has(.m12) > .row-fluid { display: block; }
html:not([data-m12-lang="ja"]) .m12 [data-lang="ja"],
html[data-m12-lang="ja"] .m12 [data-lang="en"] { display: none !important; }

.m12 {
  width: 100%;
  box-sizing: border-box;
  font-family: "Satoshi", "Noto Sans JP", "Source Han Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
:where(.m12) *, :where(.m12) *::before, :where(.m12) *::after { box-sizing: border-box; }
/* Zero-specificity resets so every component class below always wins */
:where(.m12) :where(h1, h2, h3, h4, p, ul, ol, li, figure) { margin: 0; padding: 0; }
:where(.m12) :where(ul, ol) { list-style: none; }
:where(.m12) :where(img) { max-width: 100%; }
:where(.m12) :where(a) { text-decoration: none; }
:where(.m12) [lang="ja"] { word-break: auto-phrase; line-break: strict; }
:where(.m12) .m12-line { display: block; }

.m12-section {
  position: relative;
  background: var(--m12-bg);
  padding: var(--m12-pt) var(--m12-px) var(--m12-pb);
}
.m12-inner { width: 100%; max-width: var(--m12-max); margin: 0 auto; }

/* Heading block: eyebrow + title + intro */
.m12-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--head-gap); }
.m12-eyebrow {
  display: inline-flex; align-items: center; gap: var(--eb-gap);
  color: var(--eb-c); font-size: var(--eb-fs); font-weight: 700;
  line-height: 1.35; letter-spacing: 0.05em; text-transform: uppercase;
}
.m12-eyebrow__rule { display: block; flex: 0 0 auto; width: var(--eb-rule-w); height: 1px; background: var(--eb-rule-c); }
.m12-title {
  max-width: var(--ttl-maxw); color: var(--ttl-c); font-size: var(--ttl-fs);
  font-weight: 700; line-height: 1.35; letter-spacing: 0.05em; text-transform: uppercase;
}
.m12-intro {
  max-width: var(--bdy-maxw); color: var(--bdy-c); font-size: var(--bdy-fs);
  font-weight: 400; line-height: 1.45; letter-spacing: 0.05em;
}
.m12-body-gap { margin-top: var(--sec-gap); }

/* Buttons: inset border keeps the exact Figma box size */
.m12-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--b-minw);
  padding: var(--b-py) var(--b-px);
  background: var(--b-bg); color: var(--b-c);
  box-shadow: inset 0 0 0 var(--b-bw) var(--b-bd);
  border: 0; border-radius: var(--b-r);
  font-family: inherit; font-size: var(--b-fs); font-weight: 700;
  line-height: 1.36; letter-spacing: 0.05em; text-transform: uppercase;
  text-align: center; white-space: nowrap; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.m12-btn:hover, .m12-btn:focus-visible { background: var(--b-bg-h); color: var(--b-c-h); box-shadow: inset 0 0 0 var(--b-bw) var(--b-bd-h); }
.m12-btn:focus-visible { outline: 2px solid #011EBE; outline-offset: 2px; }

@media (max-width: 1199px) {
  .m12-section { padding-left: var(--m12-px-t); padding-right: var(--m12-px-t); }
}
@media (max-width: 767px) {
  .m12-section { padding: var(--m12-pt-m) var(--m12-px-m) var(--m12-pb-m); }
  .m12-eyebrow { font-size: var(--eb-fs-m); }
  .m12-title { font-size: var(--ttl-fs-m); }
  .m12-intro { font-size: var(--bdy-fs-m); }
  .m12-body-gap { margin-top: var(--sec-gap-m); }
  .m12-btn { font-size: var(--b-fs-m); padding: var(--b-py-m) var(--b-px-m); white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .m12 *, .m12 *::before, .m12 *::after { transition: none !important; animation: none !important; }
}
/* ===== end shared base ===== */

/* ===== Metro 12M: Navigation ===== */
.m12-nav { position: relative; z-index: 1000; }
.m12-nav__bar { width: 100%; background: var(--nav-bg); }
.m12-nav--fixed { height: 0; }
.m12-nav--fixed .m12-nav__bar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }
.m12-nav--absolute { height: 0; }
.m12-nav--absolute .m12-nav__bar { position: absolute; top: 0; left: 0; right: 0; z-index: 1000; }

.m12-nav__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; max-width: var(--nav-maxw); margin: 0 auto;
  height: var(--nav-h); padding: 0 var(--nav-px);
}
.m12-nav__logo { display: block; flex: 0 0 auto; width: var(--logo-w); color: var(--logo-c); line-height: 0; }
.m12-nav__logo-svg { display: block; width: 100%; height: auto; }
.m12-nav__logo-img { display: block; width: 100%; max-width: var(--logo-w); height: auto; object-fit: contain; }

.m12-nav__actions { display: flex; align-items: center; gap: var(--nav-gap); }
.m12-nav__actions--toggle-after .m12-lang { order: 2; }

/* Language toggle: two sharp segments, active segment in Metro Blue */
.m12-lang {
  display: inline-flex; align-items: stretch;
  background: var(--tg-bg);
  box-shadow: inset 0 0 0 var(--tg-bw) var(--tg-bd);
  border-radius: var(--tg-r); overflow: hidden;
}
.m12-lang__btn {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--tg-c);
  padding: var(--tg-py) var(--tg-px);
  font-family: "Satoshi", "Noto Sans JP", system-ui, sans-serif;
  font-size: var(--tg-fs); font-weight: 700; line-height: 1.36; letter-spacing: 0.05em; text-transform: uppercase;
  cursor: pointer; transition: background-color .2s ease, color .2s ease;
}
.m12-lang__btn + .m12-lang__btn { box-shadow: inset var(--tg-bw) 0 0 0 var(--tg-bd); }
.m12-lang__btn:hover { background: var(--tg-bg-h); }
.m12-lang__btn:focus-visible { outline: 2px solid #011EBE; outline-offset: -4px; }
html:not([data-m12-lang="ja"]) .m12-lang__btn--en,
html[data-m12-lang="ja"] .m12-lang__btn--ja { background: var(--tg-bg-a); color: var(--tg-c-a); cursor: default; }

@media (max-width: 767px) {
  .m12-nav__inner { height: var(--nav-h-m); padding: 0 var(--nav-px-m); }
  .m12-nav__logo { width: var(--logo-w-m); }
  .m12-lang__btn { font-size: var(--tg-fs-m); }
  .m12-nav--hide-cta-m .m12-nav__cta { display: none; }
}
/* ===== Glass effect for the nav bar ===== */
.m12.m12-nav .m12-nav__bar {
  background: var(--nav-bg) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .m12.m12-nav .m12-nav__bar { background: rgba(255, 255, 255, 0.9) !important; }
}