body.mai-home {
  margin: 0;
  background: #faf7f1;
}

.mai-site,
.mai-skip {
  --paper: #faf7f1;
  --white: #fffcf7;
  --linen: #f0e9de;
  --ink: #2d261f;
  --copy: #51463c;
  --muted: #66594c;
  --gold: #805633;
  --rule: #d9cbbb;
  --dark: #302820;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP", "Noto Serif JP", "MS PMincho", serif;
  --sans: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --latin: Georgia, "Times New Roman", serif;
  color: var(--ink);
  font: 400 15px/1.9 var(--sans);
}

.mai-site {
  background: var(--paper);
  isolation: isolate;
  text-align: left;
}

.mai-site *, .mai-site *::before, .mai-site *::after { box-sizing: border-box; }
.mai-site :where(h1, h2, h3, p, figure, dl, dd, ul) { margin: 0; padding: 0; }
.mai-site ul { list-style: none; }
.mai-site [hidden] { display: none !important; }
.mai-site a { color: inherit; text-decoration: none; }
.mai-site img { display: block; max-width: 100%; }
.mai-site button { font-family: var(--sans); }
.mai-site :where(a, button, summary):focus-visible, .mai-skip:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.mai-site main:focus { outline: none; }
.mai-site section[id] { scroll-margin-top: 103px; }

.mai-skip {
  position: fixed;
  z-index: 100000;
  top: 12px;
  left: 12px;
  padding: 8px 14px;
  transform: translateY(-200%);
  background: #fff;
}
.mai-skip:focus { transform: translateY(0); }

.mai-wrap { width: min(1220px, calc(100% - 112px)); margin-inline: auto; }
.mai-section { padding-block: clamp(65px, 8.3vw, 120px); }

.mai-site h1, .mai-site h2, .mai-site h3 {
  color: inherit;
  font: 500 1rem/1.42 var(--serif);
  letter-spacing: .025em;
  overflow-wrap: anywhere;
}
.mai-site h2 { font-size: clamp(30px, 3.7vw, 50px); }
.mai-site h3 { font-size: 23px; }
.mai-site p { color: var(--copy); }

.mai-site .mai-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  color: var(--gold);
  font: 700 10px/1.5 var(--sans);
  letter-spacing: .18em;
}
.mai-kicker > span { width: 19px; height: 1px; flex: none; background: currentColor; }
.mai-site .mai-english { color: var(--muted); font: italic 16px/1.55 var(--latin); }

.mai-header {
  position: sticky;
  top: 0;
  z-index: 8;
  border-bottom: 1px solid var(--rule);
  background: var(--white);
}
body.mai-home:has(#wpadminbar) .mai-header { top: 32px; }

.mai-header-inner, .mai-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 73px;
}

.mai-site .mai-brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 13px;
  color: var(--ink);
  font: 650 11px/1.3 var(--sans);
  letter-spacing: .08em;
}
.mai-brand img { width: 90px; height: auto; }
.mai-brand span { padding-left: 13px; border-left: 1px solid var(--rule); }

.mai-links { display: flex; align-items: center; gap: clamp(10px, 1.45vw, 25px); font-size: 12px; }
.mai-links a { flex: none; padding-block: 6px; transition: color .18s ease; }
.mai-links a:hover, .mai-links a[aria-current="location"] { color: var(--gold); }
.mai-links a[aria-current="location"] { text-decoration: underline; text-underline-offset: 5px; }
.mai-links .mai-nav-contact { padding-inline: 10px; border: 1px solid var(--rule); }
.mai-nav-contact span { margin-left: 2px; }
.mai-menu-button { display: none; }

.mai-progress { position: absolute; inset: auto 0 -1px; height: 2px; pointer-events: none; }
.mai-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: #9d7148;
  transform: scaleX(0);
  transform-origin: left;
}

.mai-hero { overflow: hidden; background: linear-gradient(115deg, #faf7f1 35%, #eee0ce 100%); }
.mai-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.11fr);
  gap: clamp(24px, 5vw, 77px);
  align-items: center;
  padding-block: clamp(40px, 6.2vw, 85px) 42px;
}
.mai-hero-copy { min-width: 0; }
.mai-site .mai-hero h1 {
  margin-bottom: 22px;
  font-size: clamp(30px, 3.65vw, 50px);
  line-height: 1.47;
  letter-spacing: .01em;
}
.mai-hero h1 em { color: var(--gold); font-style: normal; }
.mai-site .mai-hero-intro { max-width: 34em; margin-bottom: 24px; line-height: 2.1; }
.mai-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 13px 20px; }

.mai-site .mai-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 17px;
  min-height: 47px;
  max-width: 100%;
  padding: 11px 15px;
  border: 1px solid transparent;
  font: 650 12px/1.5 var(--sans);
  letter-spacing: .04em;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.mai-button > span { flex: none; font-size: 15px; }
.mai-site .mai-button-filled { background: var(--dark); color: var(--white); }
.mai-site .mai-button-filled:hover { background: #69513e; }
.mai-site .mai-button-quiet { border-color: var(--rule); background: var(--white); color: var(--ink); }
.mai-site .mai-button-quiet:hover { border-color: var(--gold); color: var(--gold); }

.mai-site .mai-text-link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  width: fit-content;
  padding-block: 3px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.6;
}
.mai-site .mai-text-link:hover { color: var(--gold); border-color: currentColor; }
.mai-text-link span { color: var(--gold); }

.mai-hero-art { min-width: 0; padding-right: 12px; }
.mai-hero-frame { position: relative; background: var(--linen); }
.mai-hero-frame::after {
  content: "";
  position: absolute;
  inset: 10px -12px -10px 10px;
  border: 1px solid #af8c65;
  pointer-events: none;
}
.mai-hero-frame img { width: 100%; height: auto; aspect-ratio: 1.28; object-fit: cover; }
.mai-hero-art figcaption, .mai-impact-story figcaption {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: .07em;
}
.mai-hero-art figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.mai-hero-art figcaption span:last-child { flex: none; }

.mai-fact-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.mai-fact-rail > div { padding: 15px 17px 17px; border-right: 1px solid var(--rule); }
.mai-fact-rail > div:first-child { padding-left: 0; }
.mai-fact-rail > div:last-child { border-right: 0; }
.mai-fact-rail dt { color: var(--muted); font-size: 10px; letter-spacing: .08em; }
.mai-fact-rail dd { margin-top: 2px; font: 600 clamp(13px, 1.4vw, 19px)/1.55 var(--serif); }

.mai-business, .mai-company { background: var(--white); }
.mai-business-grid, .mai-advocacy-grid, .mai-journey-grid, .mai-company-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(28px, 7vw, 105px);
  align-items: start;
}
.mai-business-grid { align-items: center; }
.mai-site .mai-business-tag { margin: 19px 0 8px; color: var(--gold); font-size: 13px; font-weight: 700; }
.mai-business .mai-english { margin-top: 14px; }

.mai-market { border: 1px solid var(--rule); padding: clamp(21px, 3vw, 40px); background: var(--paper); }
.mai-market h3 { margin-bottom: 15px; }
.mai-switch { display: flex; flex-wrap: wrap; gap: 6px; }
.mai-switch button {
  min-height: 39px;
  padding: 6px 11px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
}
.mai-switch button:hover { border-color: var(--gold); }
.mai-switch button[aria-pressed="true"] { border-color: var(--dark); background: var(--dark); color: var(--white); }
.mai-market-panel { padding-top: 15px; }
.mai-market-panel > p:last-child { margin-top: 11px; font-size: 13px; }
.mai-site .mai-market-status { display: flex; align-items: center; gap: 7px; color: #3e614c; font-size: 11px; font-weight: 700; }
.mai-market-status > span:first-child { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mai-site .mai-market-planned { color: var(--gold); }
.mai-market-en { margin-left: 3px; font: italic 13px/1.5 var(--latin); }
.mai-market-names { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 7px; }
.mai-market-names li {
  display: grid;
  place-items: center;
  min-height: 64px;
  padding-inline: 4px;
  border: 1px solid var(--rule);
  background: var(--white);
  font: 500 clamp(21px, 2.65vw, 35px)/1.1 var(--latin);
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}

.mai-collection { background: var(--linen); }
.mai-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 29px; }
.mai-section-heading > p { max-width: 315px; padding-bottom: 4px; font-size: 14px; }
.mai-filter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 17px; }
.mai-filter-bar > p { font-size: 11px; color: var(--muted); }
.mai-collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mai-product { overflow: hidden; border: 1px solid var(--rule); background: var(--white); }
.mai-product img { width: 100%; height: auto; aspect-ratio: 1.18; object-fit: cover; background: #e8dacb; }
.mai-product-caption { display: flex; align-items: baseline; gap: 12px; padding: 14px 14px 16px; }
.mai-product-caption > span { color: var(--gold); font: 500 13px/1.2 var(--latin); }
.mai-product h3 { font-size: clamp(14px, 1.52vw, 21px); }
.mai-product p { margin-top: 4px; color: var(--muted); font: italic 14px/1.45 var(--latin); }
.mai-site .mai-image-note { margin-top: 12px; color: var(--muted); font-size: 11px; }

.mai-journey { background: var(--white); }
.mai-journey-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.mai-journey h2 + p { margin-top: 12px; }
.mai-process { border-top: 1px solid var(--rule); }
.mai-process details { border-bottom: 1px solid var(--rule); }
.mai-process summary, .mai-english-brief summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: 15px;
  list-style: none;
  font-weight: 650;
}
.mai-process summary::-webkit-details-marker, .mai-english-brief summary::-webkit-details-marker { display: none; }
.mai-process summary::after, .mai-english-brief summary::after {
  content: "+";
  margin-left: auto;
  color: var(--gold);
  font: 400 22px/1 var(--latin);
}
.mai-process details[open] summary::after, .mai-english-brief[open] summary::after { content: "−"; }
.mai-process summary:hover, .mai-english-brief summary:hover { color: var(--gold); }
.mai-process-no { color: var(--gold); font: 400 20px/1 var(--latin); }
.mai-process summary small { margin-left: 8px; color: var(--muted); font-size: 9px; letter-spacing: .1em; }
.mai-process details p { padding: 0 24px 17px 37px; font-size: 14px; }

.mai-principle { background: var(--dark); color: var(--white); }
.mai-principle-intro { max-width: 790px; }
.mai-site .mai-principle .mai-kicker { color: #e2bd93; }
.mai-site .mai-principle-motto { margin-top: 14px; color: #e2bd93; font-family: var(--serif); }
.mai-site .mai-principle-intro > p:last-child { margin-top: 9px; color: #f2e5d7; max-width: 55em; }
.mai-loop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-top: 31px; }
.mai-loop a {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 2px 10px;
  align-items: end;
  padding: 15px;
  border: 1px solid #776354;
  transition: background .2s ease, border-color .2s ease;
}
.mai-loop a:hover { background: #46372e; border-color: #c6a37e; }
.mai-loop a > span:first-child { grid-column: 1 / -1; color: #e2bd93; font-size: 9px; letter-spacing: .15em; }
.mai-loop strong { font: 500 clamp(15px, 1.8vw, 23px)/1.5 var(--serif); }
.mai-loop a > span:last-child { color: #e2bd93; }

.mai-advocacy { background: var(--paper); }
.mai-advocacy-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .67fr); }
.mai-advocacy-copy > p:not(.mai-kicker) { margin-top: 15px; }
.mai-role { padding: clamp(19px, 3.2vw, 40px); border: 1px solid var(--rule); background: var(--white); }
.mai-role-name { display: flex; align-items: baseline; gap: 10px; }
.mai-role-name h3 { font-size: clamp(36px, 5.5vw, 66px); line-height: 1; }
.mai-role-name > span { color: var(--gold); font: 400 14px/1 var(--latin); letter-spacing: .12em; }
.mai-role-title { margin-top: 10px; font-size: 14px; font-weight: 650; }
.mai-role-title span { display: block; margin-top: 2px; font: italic 16px/1.5 var(--latin); }
.mai-personal-record { margin: 16px 0 11px; padding-top: 13px; border-top: 1px solid var(--rule); }
.mai-personal-record dt, .mai-community-record dt { color: var(--muted); font-size: 12px; }
.mai-personal-record dd, .mai-community-record dd { color: var(--gold); font: 500 16px/1.35 var(--serif); }
.mai-personal-record strong { margin-right: 3px; font: 400 clamp(40px, 6vw, 60px)/1.2 var(--latin); }
.mai-partners { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px; margin-top: 33px; }
.mai-partner { display: grid; grid-template-rows: 115px 1fr; border: 1px solid var(--rule); background: var(--white); }
.mai-partner-art { display: grid; place-items: center; padding: 13px 22px; border-bottom: 1px solid var(--rule); background: #fff; }
.mai-partner-art img { width: min(100%, 284px); height: 87px; object-fit: contain; }
.mai-partner-copy { padding: clamp(16px, 2.7vw, 30px); }
.mai-partner-copy h3 { margin-bottom: 7px; }
.mai-partner-copy > p:not(.mai-kicker) { font-size: 14px; }
.mai-partner-copy .mai-text-link { margin-top: 12px; }
.mai-community-record { margin-top: 10px; }
.mai-community-record strong { margin-right: 2px; font-size: clamp(23px, 3vw, 35px); }

.mai-impact { background: var(--linen); }
.mai-impact-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.mai-impact-story { overflow: hidden; border: 1px solid var(--rule); background: var(--white); }
.mai-impact-story img { width: 100%; height: auto; aspect-ratio: 1.83; object-fit: cover; }
.mai-impact-story figcaption { padding: 7px 13px; }
.mai-impact-copy { padding: 12px clamp(16px, 3vw, 34px) 24px; }
.mai-impact-copy h3 { font-size: clamp(20px, 2.5vw, 30px); margin-bottom: 9px; }

.mai-company-grid { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
.mai-site .mai-location { margin-top: 9px; color: var(--gold); font-size: 10px; letter-spacing: .18em; }
.mai-company-intro { margin: 12px 0 15px; max-width: 27em; }
.mai-facts { border-top: 1px solid var(--rule); }
.mai-facts > div {
  display: grid;
  grid-template-columns: minmax(114px, .72fr) minmax(0, 1.28fr);
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.mai-facts dt { font-size: 13px; font-weight: 650; }
.mai-facts dd { font-size: 14px; }
.mai-facts dt span, .mai-address-en { display: block; color: var(--muted); font: 400 12px/1.5 var(--latin); }
.mai-address-en { margin-top: 5px; }
.mai-copy { margin-left: 7px; padding: 2px 5px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font-size: 10px; }
.mai-copy:hover { border-color: var(--gold); color: var(--gold); }
.mai-copy-status { display: block; color: var(--gold); font-size: 11px; }
.mai-english-brief { margin-top: 10px; border-bottom: 1px solid var(--rule); }
.mai-english-brief summary { font: 600 16px/1.5 var(--latin); }
.mai-english-brief p { padding-bottom: 12px; font-size: 13px; }
.mai-print-url { display: none; }

.mai-contact { padding-block: clamp(52px,7vw,85px); background: var(--dark); color: var(--white); }
.mai-contact-inner { display: flex; justify-content: space-between; align-items: center; gap: 25px; }
.mai-contact h2 { font-size: clamp(27px,3.5vw,44px); margin-bottom: 11px; }
.mai-site .mai-contact p { color: #f3e6d8; }
.mai-site .mai-contact .mai-kicker { color: #e2bd93; }
.mai-site .mai-contact .mai-english { color: #ebd6be; }
.mai-contact-action { min-width: 0; }
.mai-site .mai-button-outline { border-color: #d7b592; color: var(--white); overflow-wrap: anywhere; }
.mai-site .mai-button-outline:hover { background: var(--white); color: var(--ink); }
.mai-site .mai-contact-pending { padding-left: 13px; border-left: 1px solid #b79573; font-size: 13px; }

.mai-footer { background: var(--white); color: var(--muted); }
.mai-footer .mai-brand img { width: 65px; }
.mai-footer small { font-size: 10px; }
.mai-back-top { font-size: 10px; letter-spacing: .12em; white-space: nowrap; }
.mai-back-top span { padding-left: 4px; color: var(--gold); }
.mai-back-top:hover { text-decoration: underline; }

@media (max-width: 1100px) {
  .mai-wrap { width: calc(100% - 68px); }
  .mai-header .mai-brand { gap: 8px; }
  .mai-header .mai-brand span { padding-left: 8px; }
  .mai-header .mai-brand img { width: 77px; }
  .mai-links { gap: 11px; }
}

@media (max-width: 925px) {
  .mai-header-inner { min-height: 65px; flex-wrap: wrap; gap: 8px 15px; }
  .mai-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; gap: 4px 12px; padding-bottom: 11px; }
  .mai-links a { padding-block: 6px; }
  .mai-header[data-menu-ready] .mai-links:not(.is-open) { display: none; }
  .mai-header .mai-menu-button:not([hidden]) {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 41px;
    padding: 6px 9px;
    border: 1px solid var(--rule);
    background: transparent;
    color: var(--ink);
    font: 600 11px/1 var(--sans);
  }
  .mai-menu-icon { display: block; width: 13px; height: 8px; border-block: 1px solid currentColor; }
  .mai-menu-button[aria-expanded="true"] .mai-menu-icon { height: 1px; border-bottom: 0; }
  .mai-hero-grid { gap: 24px; }
  .mai-collection-grid { gap: 13px; }
  .mai-product-caption { padding-inline: 10px; gap: 8px; }
}

@media (max-width: 740px) {
  .mai-wrap { width: calc(100% - 42px); }
  .mai-hero-grid, .mai-business-grid, .mai-journey-grid, .mai-advocacy-grid, .mai-company-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 27px;
  }
  .mai-hero-grid { padding-block: 35px 21px; }
  .mai-site .mai-hero h1 { margin-bottom: 14px; font-size: clamp(28px, 7.7vw, 49px); }
  .mai-site .mai-hero-intro { margin-bottom: 16px; font-size: 14px; }
  .mai-hero-frame img { aspect-ratio: 1.39; }
  .mai-fact-rail > div { padding: 10px 8px 13px; }
  .mai-fact-rail dt { font-size: 9px; }
  .mai-section-heading { display: block; margin-bottom: 21px; }
  .mai-section-heading > p { margin-top: 9px; padding-bottom: 0; }
  .mai-loop { grid-template-columns: 1fr; gap: 7px; }
  .mai-loop a { padding: 10px 13px; }
  .mai-contact-inner { flex-direction: column; align-items: flex-start; gap: 17px; }
}

@media (max-width: 520px) {
  .mai-wrap { width: calc(100% - 34px); }
  .mai-collection-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .mai-product-caption { padding: 9px 7px 12px; gap: 6px; }
  .mai-product p { font-size: 12px; }
  .mai-partners, .mai-impact-grid { grid-template-columns: minmax(0,1fr); gap: 13px; }
  .mai-hero-art figcaption { font-size: 8px; }
  .mai-footer-inner { min-height: 67px; gap: 10px; flex-wrap: wrap; padding-block: 12px; }
  .mai-footer .mai-brand span { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  html:has(body.mai-home) { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  .mai-site *, .mai-site *::before, .mai-site *::after { transition: none !important; }
  .mai-progress { display: none; }
}

@media print {
  @page { size: A4; margin: 18mm; }
  body.mai-home { background: white; }
  body.mai-home > :not(.mai-site), .mai-site > :not(main), .mai-site main > :not(.mai-company) { display: none !important; }
  .mai-site .mai-company { padding: 0; background: white; color: black; }
  .mai-company .mai-wrap { display: block; width: 100%; }
  .mai-company h2 { font-size: 26pt; }
  .mai-company-intro, .mai-company [data-print-company], .mai-copy, .mai-copy-status { display: none !important; }
  .mai-company .mai-location { margin-bottom: 14pt; }
  .mai-facts > div, .mai-english-brief { break-inside: avoid; }
  .mai-facts > div { padding-block: 7pt; }
  .mai-english-brief summary::after { display: none; }
  .mai-site .mai-print-url { display: block; margin-top: 12pt; font-size: 9pt; }
}

/* The opening and motion scenes keep a readable static layout. */
.mai-opening { display: none; }
.mai-opening [hidden] { display: none !important; }

.mai-opening-ready .mai-opening {
  position: fixed;
  z-index: 100001;
  inset: 0;
  display: grid;
  place-items: center;
  background: #faf7f1;
  color: #2d261f;
  animation: mai-opening-exit .26s 1.74s ease-out both;
}

.mai-opening-mark {
  display: grid;
  justify-items: center;
  gap: 24px;
  width: min(62vw, 252px);
  animation: mai-opening-mark .45s ease-out both;
}

.mai-opening-mark img { display: block; width: 100%; height: auto; }

.mai-opening-line {
  position: relative;
  display: block;
  width: 72%;
  height: 1px;
  background: #ddd0bf;
}

.mai-opening-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #a87549;
  transform-origin: left;
  animation: mai-opening-line 1.7s linear both;
}

.mai-opening-skip {
  position: absolute;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(23px, env(safe-area-inset-bottom));
  min-height: 44px;
  padding: 7px 13px;
  border: 1px solid #d9cbbb;
  background: #fffcf7;
  color: #433527;
  font: 600 12px/1.4 "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
}

.mai-opening-skip:hover { border-color: #805633; }
.mai-opening-skip:focus-visible { outline: 2px solid #805633; outline-offset: 4px; }
.mai-opening-skip span { margin-left: 4px; }

@keyframes mai-opening-exit {
  from { opacity: 1; visibility: visible; }
  to { opacity: 0; visibility: hidden; }
}

@keyframes mai-opening-mark {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mai-opening-line {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.mai-route {
  display: grid;
  grid-template-columns: minmax(185px, .66fr) minmax(0, 1.34fr);
  align-items: center;
  gap: clamp(4px, 2.2vw, 30px);
  margin-top: clamp(27px, 4.7vw, 64px);
  padding: clamp(17px, 2.9vw, 34px) clamp(18px, 3.5vw, 48px);
  border: 1px solid #5f4839;
  background: radial-gradient(ellipse at 78% 42%, #594132 0, #3c3027 57%, #322921 100%);
  color: #ffead2;
}

.mai-route-copy { min-width: 0; }
.mai-site .mai-route .mai-kicker { margin-bottom: 8px; color: #e7bd96; }
.mai-site #mai-route-caption { color: #fff2e5; font: 500 clamp(23px, 3.1vw, 39px)/1.45 var(--serif); }
.mai-site .mai-route-note { margin-top: 4px; color: #e4cab2; font-size: 11px; }
.mai-route-scene { display: block; width: 100%; height: auto; max-height: 230px; overflow: visible; }
.mai-route-scene text { fill: #ebcba8; font: 650 10px/1 var(--sans); letter-spacing: 2px; }

.mai-route-replay {
  min-height: 37px;
  margin-top: 12px;
  padding: 4px 11px;
  border: 1px solid #a9876c;
  background: transparent;
  color: #ffead2;
  font-size: 11px;
  font-weight: 650;
}

.mai-route-replay span { margin-right: 4px; font-size: 14px; }
.mai-route-replay:hover { background: #6b4f3b; }

.mai-route-plane { transform: translate(217px, 62px) rotate(-3deg); }

@supports (offset-path: path("M0 0 L1 1")) {
  .mai-route-plane {
    transform: none;
    offset-path: path("M52 149 C138 39 239 27 374 77");
    offset-distance: 54%;
    offset-rotate: auto;
    offset-anchor: 0 0;
  }
}

@media (max-width: 630px) {
  .mai-route { grid-template-columns: 1fr; gap: 6px; }
  .mai-route-scene { max-height: 179px; }
}

@media (prefers-reduced-motion: no-preference) {
  .mai-site [data-reveal].is-seen { animation: mai-section-enter .56s cubic-bezier(.2,.7,.25,1) both; }
  .mai-site [data-reveal="left"].is-seen { --mai-enter-x: -13px; --mai-enter-y: 3px; }
  .mai-site [data-reveal="right"].is-seen { --mai-enter-x: 13px; --mai-enter-y: 3px; }

  .mai-site .mai-product:nth-child(3n + 2).is-seen,
  .mai-site .mai-partner:nth-child(2).is-seen,
  .mai-site .mai-impact-story:nth-child(2).is-seen,
  .mai-site .mai-loop a:nth-child(2).is-seen { animation-delay: .07s; }

  .mai-site .mai-product:nth-child(3n).is-seen,
  .mai-site .mai-loop a:nth-child(3).is-seen { animation-delay: .14s; }

  .mai-hero.is-seen .mai-hero-copy { --mai-enter-x: -14px; animation: mai-section-enter .68s ease-out both; }
  .mai-hero.is-seen .mai-hero-art { --mai-enter-x: 14px; animation: mai-section-enter .74s .08s ease-out both; }
  .mai-hero.is-seen .mai-fact-rail { animation: mai-section-enter .6s .12s ease-out both; }

  .mai-product img,
  .mai-impact-story img { transition: transform .42s ease-out, filter .38s ease-out; }
  .mai-product:hover img,
  .mai-impact-story:hover img { transform: scale(1.04); filter: saturate(1.1); }

  .mai-process details[open] > p,
  .mai-english-brief[open] > p { animation: mai-detail-enter .28s ease-out both; }

  .mai-route.is-playing .mai-earth-land { animation: mai-earth-turn 4.6s linear both; }
  .mai-route.is-playing .mai-route-trace { animation: mai-trace-travel 3.2s linear both; }

  @supports (offset-path: path("M0 0 L1 1")) {
    .mai-route.is-playing .mai-route-plane { animation: mai-plane-travel 3.15s .18s ease-in-out both; }
  }
}

@keyframes mai-section-enter {
  from { opacity: .55; transform: translate(var(--mai-enter-x, 0), var(--mai-enter-y, 12px)); }
  to { opacity: 1; transform: translate(0, 0); }
}

@keyframes mai-detail-enter {
  from { opacity: .58; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mai-earth-turn {
  from { transform: translateX(0); }
  to { transform: translateX(-160px); }
}

@keyframes mai-plane-travel {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

@keyframes mai-trace-travel {
  from { stroke-dashoffset: 16; }
  to { stroke-dashoffset: -24; }
}

@media (prefers-reduced-motion: reduce), print {
  .mai-opening-ready .mai-opening { display: none !important; }
}