/*







*/

/**/
:root {
  color-scheme: light;   /**/
  --bg: #f7faf9;  --card: #ffffff;  --ink: #1d1d1b;
  --sub: #54615c;  --line: #d3ddd9;  --line-strong: #2a2a27;
  --accent: #14958f;  --accent-deep: #0d6b66;  --accent-bg: #eaf6f4;
  --danger: #c0392b;
  /*
*/
  --k-desc: #2f7d68;  --k-desc-bg: #e4f2ee;
  --k-info: #3f6d9e;  --k-info-bg: #e8f0f8;
  --k-doc:  #8a6a2f;  --k-doc-bg:  #f5efe0;
  --k-proc: #63558c;  --k-proc-bg: #eeebf5;
  --k-expl: #4a6f7a;  --k-expl-bg: #e6f0f2;
  --k-narr: #7a7268;  --k-narr-bg: #f0eeea;
  --k-meta: #9aa0a8;  --k-meta-bg: #f2f4f6;
  --k-memo: #b9ad8a;  --k-memo-bg: #faf6ea;
  --k-un:   #a04a4a;  --k-un-bg:   #f7eaea;
}

/**/
:root {
  --font-brand: "Kiwi Maru", "Hiragino Sans", sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;
  --font-body: "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", system-ui, sans-serif;
  --radius: 4px;
  --radius-badge: 3px;
  --radius-pill: 999px;
  --shadow-fab: 0 4px 12px rgba(20, 149, 143, .3);
  --pad-screen: 18px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.9;
  -webkit-text-size-adjust: 100%;
  /*

*/
  font-variant-emoji: text;
}
a { color: var(--accent-deep); }
a:hover { color: var(--accent); }
svg { vertical-align: middle; }
h1, h2, h3 { font-family: var(--font-brand); font-weight: 500; }
/**/
.num { font-family: var(--font-mono); }
/*
*/
.nb { display: inline-block; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--pad-screen); }
.narrow { max-width: 760px; }

/**/
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--card); border: 1.5px solid var(--accent);
  border-radius: var(--radius); padding: 10px 16px; z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

/**/
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; justify-content: space-between;
  padding-top: 10px; padding-bottom: 10px;
}
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; }
.brand-ja { font: 500 17px var(--font-brand); }
/*







*/
.brand-en { font-size: 10px; letter-spacing: .16em; color: var(--sub); }
.brand-en::before { content: "MOJINARIA"; }
.site-nav { display: flex; gap: 18px; align-items: center; font-size: 13px; }
.site-nav a { color: var(--sub); text-decoration: none; }
.site-nav a:hover { color: var(--accent); }
/**/
@media (max-width: 680px) { .site-nav { display: none; } }

/**/
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px;
  border-radius: var(--radius-pill); border: 1.5px solid var(--accent);
  font: 500 15px var(--font-brand); text-decoration: none;
  cursor: pointer; background: transparent; color: var(--accent-deep);
}
.btn-primary {
  background: var(--accent); border-color: var(--accent-deep); color: #fff;
  box-shadow: var(--shadow-fab);
}
.btn:active { background: var(--line); }
.btn-primary:active { background: var(--accent-deep); }
/*
*/
.btn-sm { padding: 0 16px; font-size: 14px; }

/**/
/*
*/
.site-foot {
  padding-top: 28px; padding-bottom: 32px;
  text-align: center; color: var(--sub);
  border-top: 1px solid var(--line);
}
.foot-brand {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.foot-brand .n { font: 500 13px var(--font-brand); color: var(--ink); }
.foot-brand .u { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; }
/*
*/
.foot-brand .u.wm::before { content: "MOJINARIA · "; }
.foot-sub {
  margin-top: 10px; display: flex; align-items: center; justify-content: center;
  gap: 8px 18px; flex-wrap: wrap; font-size: 11.5px;
}
.foot-sub a { color: var(--sub); }
.foot-sub a:hover { color: var(--accent); }
.foot-sub .r { font-family: var(--font-mono); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}