/* SK Material（/brand/material/）の見た目。中身は _build/pages/material.html、動きは /brand/material/material.js
   このページの中身（<main>）は SK Material そのもので作る: 色は M3 の色の役割（--md-*）、文字は M PLUS 1 と M3 の文字の段階、
   部品は M3 のカード・タブ・チップ・ボタン・波紋。--md-* は material.js が選んだ配色を <main> に入れる（下の値は JS の前の初期値 = SK's Blue）。
   ヘッダーとフッターはサイト共通（SK's Brand）のまま。
   見本の部品は /toolbox/shared/m3.css と同じ大きさで書いている（m3.css はサイト全体の画面の切りかえまで変えるので、ここでは読み込まない） */

/* M3 の色を、切りかえるときになめらかに変える（@property で色として登録する） */
@property --md-primary { syntax: "<color>"; inherits: true; initial-value: #808080; }
@property --md-on-primary { syntax: "<color>"; inherits: true; initial-value: #808080; }
@property --md-primary-container { syntax: "<color>"; inherits: true; initial-value: #808080; }
@property --md-on-primary-container { syntax: "<color>"; inherits: true; initial-value: #808080; }
@property --md-secondary-container { syntax: "<color>"; inherits: true; initial-value: #808080; }
@property --md-on-secondary-container { syntax: "<color>"; inherits: true; initial-value: #808080; }
@property --md-tertiary { syntax: "<color>"; inherits: true; initial-value: #808080; }
@property --md-tertiary-container { syntax: "<color>"; inherits: true; initial-value: #808080; }
@property --md-on-tertiary-container { syntax: "<color>"; inherits: true; initial-value: #808080; }
@property --md-error { syntax: "<color>"; inherits: true; initial-value: #808080; }
@property --md-error-container { syntax: "<color>"; inherits: true; initial-value: #808080; }
@property --md-on-error-container { syntax: "<color>"; inherits: true; initial-value: #808080; }
@property --md-surface { syntax: "<color>"; inherits: true; initial-value: #808080; }
@property --md-on-surface { syntax: "<color>"; inherits: true; initial-value: #808080; }
@property --md-on-surface-variant { syntax: "<color>"; inherits: true; initial-value: #808080; }
@property --md-surface-container-low { syntax: "<color>"; inherits: true; initial-value: #808080; }
@property --md-surface-container { syntax: "<color>"; inherits: true; initial-value: #808080; }
@property --md-surface-container-high { syntax: "<color>"; inherits: true; initial-value: #808080; }
@property --md-surface-container-highest { syntax: "<color>"; inherits: true; initial-value: #808080; }
@property --md-outline { syntax: "<color>"; inherits: true; initial-value: #808080; }
@property --md-outline-variant { syntax: "<color>"; inherits: true; initial-value: #808080; }
@property --md-inverse-surface { syntax: "<color>"; inherits: true; initial-value: #808080; }
@property --md-inverse-on-surface { syntax: "<color>"; inherits: true; initial-value: #808080; }
@property --md-inverse-primary { syntax: "<color>"; inherits: true; initial-value: #808080; }
@property --hero-primary { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
@property --hero-container { syntax: "<color>"; inherits: true; initial-value: #c7d4ff; }

.mt-page main { --md-primary: #004ac6; --md-on-primary: #ffffff; --md-primary-container: #2563eb; --md-on-primary-container: #eeefff; --md-secondary-container: #acbfff; --md-on-secondary-container: #394c84; --md-tertiary: #943700; --md-tertiary-container: #bc4800; --md-on-tertiary-container: #ffede6; --md-error: #ba1a1a; --md-error-container: #ffdad6; --md-on-error-container: #93000a; --md-surface: #faf8ff; --md-on-surface: #191b23; --md-on-surface-variant: #434655; --md-surface-container-low: #f3f3fe; --md-surface-container: #ededf9; --md-surface-container-high: #e7e7f3; --md-surface-container-highest: #e1e2ed; --md-outline: #737686; --md-outline-variant: #c3c6d7; --md-inverse-surface: #2e3039; --md-inverse-on-surface: #f0f0fb; --md-inverse-primary: #b4c5ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mt-page main { --md-primary: #b4c5ff; --md-on-primary: #002a78; --md-primary-container: #2563eb; --md-on-primary-container: #eeefff; --md-secondary-container: #33467e; --md-on-secondary-container: #a4b6f5; --md-tertiary: #ffb596; --md-tertiary-container: #bc4800; --md-on-tertiary-container: #ffede6; --md-error: #ffb4ab; --md-error-container: #93000a; --md-on-error-container: #ffdad6; --md-surface: #11131b; --md-on-surface: #e1e2ed; --md-on-surface-variant: #c3c6d7; --md-surface-container-low: #191b23; --md-surface-container: #1d1f27; --md-surface-container-high: #282a32; --md-surface-container-highest: #32343d; --md-outline: #8d90a0; --md-outline-variant: #434655; --md-inverse-surface: #e1e2ed; --md-inverse-on-surface: #2e3039; --md-inverse-primary: #0053db; } }
:root[data-theme="dark"] .mt-page main { --md-primary: #b4c5ff; --md-on-primary: #002a78; --md-primary-container: #2563eb; --md-on-primary-container: #eeefff; --md-secondary-container: #33467e; --md-on-secondary-container: #a4b6f5; --md-tertiary: #ffb596; --md-tertiary-container: #bc4800; --md-on-tertiary-container: #ffede6; --md-error: #ffb4ab; --md-error-container: #93000a; --md-on-error-container: #ffdad6; --md-surface: #11131b; --md-on-surface: #e1e2ed; --md-on-surface-variant: #c3c6d7; --md-surface-container-low: #191b23; --md-surface-container: #1d1f27; --md-surface-container-high: #282a32; --md-surface-container-highest: #32343d; --md-outline: #8d90a0; --md-outline-variant: #434655; --md-inverse-surface: #e1e2ed; --md-inverse-on-surface: #2e3039; --md-inverse-primary: #0053db; }
.mt-page main {
  --md-font: "M PLUS 1", "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", Meiryo, system-ui, sans-serif;
  --md-decel: cubic-bezier(.05, .7, .1, 1); --md-standard: cubic-bezier(.2, 0, 0, 1); --md-spring: cubic-bezier(.34, 1.4, .64, 1);
  --md-elev-1: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px 1px rgba(0, 0, 0, .15);
  --md-elev-3: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 8px 3px rgba(0, 0, 0, .15);
  background: var(--md-surface); color: var(--md-on-surface); font-family: var(--md-font);
  transition: --md-primary .6s ease, --md-on-primary .6s ease, --md-primary-container .6s ease, --md-on-primary-container .6s ease, --md-secondary-container .6s ease, --md-on-secondary-container .6s ease, --md-tertiary .6s ease, --md-tertiary-container .6s ease, --md-on-tertiary-container .6s ease, --md-error .6s ease, --md-error-container .6s ease, --md-on-error-container .6s ease, --md-surface .6s ease, --md-on-surface .6s ease, --md-on-surface-variant .6s ease, --md-surface-container-low .6s ease, --md-surface-container .6s ease, --md-surface-container-high .6s ease, --md-surface-container-highest .6s ease, --md-outline .6s ease, --md-outline-variant .6s ease, --md-inverse-surface .6s ease, --md-inverse-on-surface .6s ease, --md-inverse-primary .6s ease;
}
.mt-page main :is(h1, h2, h3, p, li, strong, small, b) { word-break: auto-phrase; text-wrap: pretty; }
.mt-page main a { color: var(--md-primary); }
.mt-page main :focus-visible { outline: 3px solid var(--md-primary); outline-offset: 2px; }
.msr {
  font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1;
  letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; display: inline-block; flex: none;
  -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* ---------- 状態レイヤーと波紋（ページ全体。m3.css と同じ） ---------- */
.mt-page main .m3-state { position: relative; overflow: hidden; isolation: isolate; }
.mt-page main .m3-state::before { content: ""; position: absolute; inset: 0; z-index: -1; background: currentColor; opacity: 0; transition: opacity .15s linear; pointer-events: none; }
.mt-page main .m3-state:hover::before { opacity: .08; }
.mt-page main .m3-state:focus-visible::before { opacity: .1; }
.mt-page main .m3-state:active::before { opacity: .1; }
.mt-page main .ripple { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .12; transform: scale(0); animation: mt-ripple .5s cubic-bezier(.2, 0, 0, 1) forwards; }
@keyframes mt-ripple { 60% { transform: scale(1); opacity: .12; } to { transform: scale(1); opacity: 0; } }

/* ---------- M3 の部品（このページの枠に使う） ---------- */
.md-card { border-radius: 12px; }
.md-card--filled { background: var(--md-surface-container-highest); }
.md-card--outlined { background: var(--md-surface); box-shadow: inset 0 0 0 1px var(--md-outline-variant); }
.md-card--tonal { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.md-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 24px; border: 0; border-radius: 20px; background: var(--md-primary); color: var(--md-on-primary) !important; font: 500 14px/1 var(--md-font); letter-spacing: .01em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .18s var(--md-spring), background-color .2s linear; }
.md-btn .msr { font-size: 18px; margin-left: -6px; }
.md-btn:active { transform: scale(.95); }
.md-btn--tonal { background: var(--md-secondary-container); color: var(--md-on-secondary-container) !important; }
.md-btn--text { background: none; color: var(--md-primary) !important; padding: 0 12px; }
.md-btn--text .msr { margin: 0 -2px 0 0; }
.md-seg { display: inline-flex; border: 1px solid var(--md-outline); border-radius: 20px; overflow: hidden; max-width: 100%; }
.md-seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; background: none; color: var(--md-on-surface); font: 500 14px/1.2 var(--md-font); cursor: pointer; white-space: nowrap; }
.md-seg button + button { border-left: 1px solid var(--md-outline); }
.md-seg button > .msr { display: none; font-size: 18px; }
.md-seg button[aria-checked="true"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); animation: mt-pop .32s var(--md-spring); }
.md-seg button[aria-checked="true"] > .msr { display: inline-block; }
@keyframes mt-pop { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
.md-list { list-style: none; margin: 0; padding: 0; }
.md-list li { display: flex; gap: 16px; padding: 14px 0; border-top: 1px solid var(--md-outline-variant); font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); }
.md-list li > .msr { color: var(--md-on-surface-variant); margin-top: 1px; }
.md-list li strong { display: block; margin-bottom: 2px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--md-on-surface); }
.mt-overline { margin: 0 0 8px; font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--md-primary); }
.mt-note { margin-top: 14px; font-size: 13px; line-height: 20px; color: var(--md-on-surface-variant); }
.mt-h3 { margin: 48px 0 16px; font-size: 14px; font-weight: 500; letter-spacing: .02em; line-height: 20px; color: var(--md-on-surface-variant); display: flex; align-items: center; gap: 12px; }
.mt-h3::after { content: ""; flex: 1; height: 1px; background: var(--md-outline-variant); }

/* 画面に入ったら浮かび上がる（JS があるときだけ隠しておく） */
.mt-js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--md-decel), transform .7s var(--md-decel); }
.mt-js [data-reveal].is-in { opacity: 1; transform: none; }

/* ================= 表紙 ================= */
.mt-hero { position: relative; overflow: hidden; isolation: isolate; padding: 40px 0 80px; background: var(--md-surface-container-low); transition: --hero-primary 1.2s ease, --hero-container 1.2s ease; }
.mt-hero::before { content: ""; position: absolute; z-index: -1; right: -14%; top: -30%; width: 900px; height: 900px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--hero-container) 70%, transparent), transparent); pointer-events: none; }
.mt-hero-inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; }
@media (max-width: 900px) { .mt-hero-inner { grid-template-columns: 1fr; } }
.mt-crumb { display: inline-flex; align-items: center; gap: 4px; height: 32px; margin: 0 0 16px -8px; padding: 0 12px 0 6px; border-radius: 16px; color: var(--md-on-surface-variant) !important; font-size: 14px; font-weight: 500; text-decoration: none; }
.mt-crumb .msr { font-size: 18px; }
.mt-title { font-size: clamp(60px, 10.5vw, 128px); font-weight: 500; letter-spacing: -.04em; line-height: .95; }
.mt-title-line { display: block; overflow: hidden; padding: 0 .06em .1em 0; margin-bottom: -.1em; }
.mt-title-line > span { display: inline-block; }
.mt-title-accent { color: var(--hero-primary); }
.mt-lead { max-width: 560px; margin-top: 20px; font-size: clamp(16px, 1.7vw, 22px); line-height: 1.6; color: var(--md-on-surface-variant); }
.mt-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.mt-origin { display: flex; gap: 16px; max-width: 640px; margin-top: 28px; padding: 20px 20px 12px; border-radius: 16px; background: var(--md-surface); }
.mt-origin-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--md-primary-container); color: var(--md-on-primary-container); }
.mt-origin h2 { font-size: 16px; line-height: 24px; font-weight: 700; }
.mt-origin p { margin-top: 6px; color: var(--md-on-surface-variant); font-size: 14px; line-height: 21px; }
.mt-origin .md-btn--text { margin: 8px 0 0 -12px; }
@media (max-width: 560px) { .mt-origin { flex-direction: column; } }
.mt-js .mt-hero .mt-title-line > span { transform: translateY(105%); animation: mt-rise-in 1s var(--md-decel) forwards; }
.mt-js .mt-hero .mt-title-line + .mt-title-line > span { animation-delay: .1s; }
.mt-js .mt-hero :is(.mt-overline, .mt-lead, .mt-origin, .mt-crumb, .mt-hero-actions) { opacity: 0; animation: mt-fade-up .9s var(--md-decel) .3s forwards; }
.mt-js .mt-hero :is(.mt-hero-actions) { animation-delay: .4s; }
.mt-js .mt-hero .mt-origin { animation-delay: .5s; }
.mt-js .mt-hero-stage { opacity: 0; animation: mt-stage-in 1.1s var(--md-decel) .2s forwards; }
@keyframes mt-rise-in { to { transform: none; } }
@keyframes mt-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes mt-stage-in { from { opacity: 0; transform: translateY(40px) scale(.96); } to { opacity: 1; transform: none; } }

.mt-hero-stage { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.mt-phone { width: min(100%, 340px); padding: 10px; border-radius: 46px; background: #0d1014; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 80px -20px rgba(13, 16, 20, .45), 0 18px 40px -18px var(--hero-primary); }
.mt-phone .mt-app-screen { border-radius: 36px; min-height: 560px; }
.mt-hero-caption { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 4px 4px 16px; border-radius: 20px; background: var(--md-surface-container-high); color: var(--md-on-surface); font-size: 14px; font-weight: 500; }
.mt-hero-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--hero-primary); }
.mt-hero-pause { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px 0 8px; border: 0; border-radius: 16px; background: var(--md-secondary-container); color: var(--md-on-secondary-container); font: 500 13px/1 var(--md-font); cursor: pointer; }
.mt-hero-pause .msr { font-size: 18px; }

/* アプリの画面（表紙・比べる見本で同じもの。色は material.js がこの中にだけ入れる） */
.mt-app-screen, .mt-state-stage { --md-font: "M PLUS 1", "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", Meiryo, system-ui, sans-serif; }
.mt-app-screen {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 0;
  background: var(--md-surface); color: var(--md-on-surface); font-family: var(--md-font); text-align: left;
  transition: --md-primary 1s ease, --md-on-primary 1s ease, --md-primary-container 1s ease, --md-on-primary-container 1s ease, --md-secondary-container 1s ease, --md-on-secondary-container 1s ease, --md-tertiary 1s ease, --md-tertiary-container 1s ease, --md-on-tertiary-container 1s ease, --md-error 1s ease, --md-error-container 1s ease, --md-on-error-container 1s ease, --md-surface 1s ease, --md-on-surface 1s ease, --md-on-surface-variant 1s ease, --md-surface-container-low 1s ease, --md-surface-container 1s ease, --md-surface-container-high 1s ease, --md-surface-container-highest 1s ease, --md-outline 1s ease, --md-outline-variant 1s ease, --md-inverse-surface 1s ease, --md-inverse-on-surface 1s ease, --md-inverse-primary 1s ease;
}
.mt-app-bar { display: flex; align-items: center; gap: 14px; padding: 6px 6px 4px; color: var(--md-on-surface-variant); }
.mt-app-bar strong { flex: 1; font-size: 22px; font-weight: 500; color: var(--md-on-surface); }
.mt-app-chips { display: flex; gap: 8px; }
.mt-app-chips > span { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 14px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--md-outline-variant); color: var(--md-on-surface-variant); font-size: 14px; font-weight: 500; }
.mt-app-chips > span.is-on { padding-left: 8px; box-shadow: none; background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.mt-app-chips .msr { font-size: 18px; }
.mt-app-card { display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: 16px; background: var(--md-primary-container); color: var(--md-on-primary-container); }
.mt-app-card small { font-size: 12px; opacity: .85; }
.mt-app-card strong { font-size: 20px; font-weight: 500; }
.mt-app-progress { height: 6px; margin-top: 10px; border-radius: 3px; background: color-mix(in srgb, var(--md-on-primary-container) 18%, transparent); overflow: hidden; }
.mt-app-progress i { display: block; width: 34%; height: 100%; border-radius: inherit; background: var(--md-primary); }
.mt-app-list { list-style: none; margin: 0 -14px; padding: 0; }
.mt-app-list li { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 8px 20px; }
.mt-app-list li > span:last-child { display: flex; flex-direction: column; line-height: 1.35; }
.mt-app-list b { font-size: 16px; font-weight: 400; }
.mt-app-list small { font-size: 13px; color: var(--md-on-surface-variant); }
.mt-app-check { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--md-on-surface-variant); }
.mt-app-check .msr { font-size: 16px; color: var(--md-on-primary); }
.mt-app-list li.is-done .mt-app-check { background: var(--md-primary); box-shadow: none; }
.mt-app-list li.is-done b { text-decoration: line-through; color: var(--md-on-surface-variant); }
.mt-app-fab { position: absolute; right: 16px; bottom: 96px; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px 0 16px; border-radius: 16px; background: var(--md-primary-container); color: var(--md-on-primary-container); font-size: 14px; font-weight: 500; box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 8px 3px rgba(0, 0, 0, .15); }
.mt-app-nav { display: flex; margin: auto -14px 0; padding: 12px 8px 16px; background: var(--md-surface-container); }
.mt-app-nav > span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--md-on-surface-variant); }
.mt-app-nav i { display: grid; place-items: center; width: 64px; height: 32px; border-radius: 16px; font-style: normal; }
.mt-app-nav > span.is-on { color: var(--md-on-surface); }
.mt-app-nav > span.is-on i { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.mt-app-nav > span.is-on .msr { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }

/* ================= タブ（ページの中の目次） ================= */
.mt-tabs { position: sticky; top: 51px; z-index: 50; background: color-mix(in srgb, var(--md-surface) 88%, transparent); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); box-shadow: inset 0 -1px 0 var(--md-outline-variant); }
.mt-tabs-row { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 -8px; }
.mt-tabs-row::-webkit-scrollbar { display: none; }
.mt-tabs-row a { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; color: var(--md-on-surface-variant); font-size: 14px; font-weight: 500; text-decoration: none; }
.mt-tabs-row a .msr { font-size: 20px; }
.mt-tabs-row a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--md-primary); transform: scaleX(0); transition: transform .3s var(--md-standard); }
.mt-tabs-row a[aria-current="true"] { color: var(--md-primary); }
.mt-tabs-row a[aria-current="true"] .msr { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.mt-tabs-row a[aria-current="true"]::after { transform: none; }
.mt-tabs-progress { position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--md-primary); opacity: .6; transform-origin: left; transform: scaleX(var(--p, 0)); }
@media (max-width: 600px) { .mt-tabs-row a { padding: 0 12px; } .mt-tabs-row a .msr { display: none; } }

/* ================= 章 ================= */
.mt-chapter { padding: clamp(64px, 8vw, 104px) 0 0; scroll-margin-top: 100px; }
.mt-chapter--last { padding-bottom: clamp(80px, 10vw, 128px); }
.mt-chapter-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px 24px; margin-bottom: 32px; }
.mt-chapter-num { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 16px; background: var(--md-primary-container); color: var(--md-on-primary-container); font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; }
.mt-chapter-head h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 500; line-height: 1.25; letter-spacing: -.01em; }
.mt-chapter-head p:not(.mt-overline) { max-width: 660px; margin-top: 10px; color: var(--md-on-surface-variant); font-size: 16px; line-height: 24px; }
@media (max-width: 600px) { .mt-chapter-head { grid-template-columns: 1fr; } .mt-chapter-num { width: 48px; height: 48px; font-size: 18px; border-radius: 12px; } }

/* ================= 01 比べる見本・一覧 ================= */
.mt-compare { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: "stage notes" "range notes"; gap: 14px 24px; align-items: start; margin-bottom: 12px; padding: 16px; border-radius: 28px; }
@media (max-width: 860px) { .mt-compare { grid-template-columns: 1fr; grid-template-areas: "stage" "range" "notes"; } }
.mt-compare-stage { grid-area: stage; position: relative; height: 470px; overflow: hidden; border-radius: 20px; background: var(--md-surface-container-low); touch-action: none; cursor: ew-resize; --x: 50%; }
.mt-compare-side { position: absolute; inset: 0; display: grid; place-items: start center; padding-top: 22px; }
.mt-compare-side .mt-app-screen { width: min(100% - 32px, 340px); height: 560px; border-radius: 28px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 16px 40px -16px rgba(0, 0, 0, .35); transition: none; }
.mt-compare-side.is-m3 .mt-app-screen { --md-font: Roboto, "Noto Sans JP", system-ui, sans-serif; }
.mt-compare-side.is-sk { clip-path: inset(0 0 0 var(--x)); }
.mt-compare-handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); pointer-events: none; }
.mt-compare-handle i { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.mt-compare-handle i::before, .mt-compare-handle i::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -5px; border: 5px solid transparent; }
.mt-compare-handle i::before { left: 7px; border-right-color: #5a6371; }
.mt-compare-handle i::after { right: 7px; border-left-color: #5a6371; }
.mt-compare-label { position: absolute; bottom: 12px; padding: 4px 10px; border-radius: 8px; background: rgba(13, 16, 20, .75); color: #fff; font-size: 12px; font-weight: 500; pointer-events: none; }
.mt-compare-label.is-m3 { left: 12px; }
.mt-compare-label.is-sk { right: 12px; }
.mt-compare-range { grid-area: range; display: flex; align-items: center; gap: 12px; padding: 0 4px; font-size: 12px; font-weight: 500; color: var(--md-on-surface-variant); }
.mt-compare-range input { flex: 1; accent-color: var(--md-primary); }
.mt-compare-notes { grid-area: notes; list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-self: center; }
.mt-compare-notes li { display: flex; gap: 14px; padding: 16px; border-radius: 16px; background: var(--md-surface); color: var(--md-on-surface-variant); font-size: 14px; line-height: 21px; }
.mt-compare-notes .msr { color: var(--md-primary); }
.mt-compare-notes b { display: block; color: var(--md-on-surface); font-size: 16px; font-weight: 500; line-height: 24px; }
.mt-diff { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .mt-diff { grid-template-columns: 1fr; } }
.mt-diff-col { padding: 20px 20px 6px; border-radius: 28px; }
.mt-diff-col.is-sk { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.mt-diff-col.is-sk .md-list li { border-color: color-mix(in srgb, var(--md-on-primary-container) 18%, transparent); color: color-mix(in srgb, var(--md-on-primary-container) 80%, transparent); }
.mt-diff-col.is-sk .md-list li strong, .mt-diff-col.is-sk .md-list li > .msr { color: var(--md-on-primary-container); }
.mt-diff-col h3 { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; font-size: 22px; font-weight: 500; line-height: 28px; }
.mt-tag { align-self: flex-start; padding: 4px 10px; border-radius: 8px; background: var(--md-surface-container-highest); color: var(--md-on-surface-variant); font-size: 12px; font-weight: 500; line-height: 16px; }
.is-sk .mt-tag { background: var(--md-primary); color: var(--md-on-primary); }
.mt-self { display: flex; gap: 14px; margin-top: 12px; padding: 16px 20px; border-radius: 16px; font-size: 14px; line-height: 21px; }

/* ================= 02 配色 ================= */
.mt-color { display: grid; gap: 16px; padding: 20px; border-radius: 28px; margin-bottom: 12px; }
.mt-source-note { color: var(--md-on-surface-variant); font-size: 14px; line-height: 21px; max-width: 760px; }
.mt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mt-chips button { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 16px 0 6px; border: 0; border-radius: 8px; background: none; box-shadow: inset 0 0 0 1px var(--md-outline-variant); color: var(--md-on-surface-variant); font: 500 14px/1 var(--md-font); cursor: pointer; transition: background-color .2s linear; }
.mt-chips button i { width: 20px; height: 20px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.mt-chips button[aria-checked="true"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); box-shadow: none; animation: mt-pop .32s var(--md-spring); }
.mt-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 8px; padding: 20px; border-radius: 16px; background: var(--md-surface-container-low); }
@media (max-width: 700px) { .mt-flow { grid-template-columns: 1fr; justify-items: center; } .mt-flow-arrow { transform: rotate(90deg); } }
.mt-flow-step { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.mt-flow-step strong { font-size: 14px; font-weight: 500; }
.mt-flow-step small, .mt-flow-step code { font-size: 12px; color: var(--md-on-surface-variant); }
.mt-flow-step code { font: 500 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.mt-flow-seed { width: 64px; height: 64px; border-radius: 50%; background: var(--seed, #2563eb); box-shadow: 0 10px 24px -8px var(--seed, #2563eb); transition: background-color .4s ease, box-shadow .4s ease; }
.mt-flow-calc { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 16px; background: var(--md-tertiary-container, var(--md-secondary-container)); color: var(--md-on-tertiary-container, var(--md-on-secondary-container)); }
.mt-flow-calc .msr { font-size: 30px; }
.mt-flow-roles { display: grid; grid-template-columns: repeat(6, 12px); gap: 3px; padding: 6px; border-radius: 12px; background: var(--md-surface-container-highest); min-height: 64px; align-content: center; }
.mt-flow-roles i { width: 12px; height: 12px; border-radius: 3px; background: var(--c); transition: background-color .4s ease; transition-delay: calc(var(--i) * 12ms); }
.mt-flow-arrow { color: var(--md-outline); }
.mt-schemes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 860px) { .mt-schemes { grid-template-columns: 1fr; } }
.mt-scheme { padding: 16px; border-radius: 28px; background: var(--s-bg); color: var(--s-fg); box-shadow: inset 0 0 0 1px var(--s-line); transition: background-color .4s ease; }
.mt-scheme h3 { display: flex; align-items: center; gap: 8px; margin: 2px 4px 12px; font-size: 14px; font-weight: 500; }
.mt-scheme h3 .msr { font-size: 20px; }
.mt-roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 480px) { .mt-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mt-role { display: flex; flex-direction: column; justify-content: space-between; min-height: 76px; padding: 9px 10px; border: 0; border-radius: 12px; background: var(--bg-c); color: var(--fg-c); font: inherit; text-align: left; cursor: copy; transition: transform .15s ease, background-color .4s ease, color .4s ease; }
.mt-role:hover { transform: translateY(-1px); }
.mt-role.is-wide { grid-column: span 2; }
.mt-role b { font-size: 11.5px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.mt-role code { font: 500 10.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; opacity: .8; }
.mt-contrast { border-radius: 16px; overflow: hidden; }
.mt-contrast-head, .mt-contrast-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.mt-contrast-head span { padding: 10px 16px; background: var(--md-surface-container); font-size: 12px; font-weight: 500; color: var(--md-on-surface-variant); }
.mt-contrast-row > * { padding: 10px 16px; border-top: 1px solid var(--md-outline-variant); min-width: 0; }
.mt-contrast-row > b { font: 500 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.mt-contrast-cell { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.mt-contrast-chip { width: 34px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--bg-c); color: var(--fg-c); font-size: 12px; font-weight: 500; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.mt-contrast-cell em { font-style: normal; padding: 2px 8px; border-radius: 8px; font-size: 11px; font-weight: 500; letter-spacing: .02em; background: var(--md-primary-container); color: var(--md-on-primary-container); }
.mt-contrast-cell em.is-low { background: var(--md-error-container, #ffdad6); color: var(--md-on-error-container, #410002); }
@media (max-width: 560px) { .mt-contrast-head span, .mt-contrast-row > * { padding: 10px 10px; } .mt-contrast-chip { display: none; } }

/* ================= 03 形 ================= */
.mt-shapes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .mt-shapes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 460px) { .mt-shapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mt-shapes > div { display: flex; flex-direction: column; padding: 14px; }
.mt-shapes i { aspect-ratio: 1; width: 100%; max-width: 96px; margin-bottom: 12px; border-radius: min(var(--r), 50%); background: var(--md-primary-container); transition: border-radius .5s var(--md-standard); }
.mt-shapes > div:hover i { border-radius: 0; }
.mt-shapes b { font-size: 14px; font-weight: 500; }
.mt-shapes span { font-size: 22px; font-weight: 500; line-height: 1.3; }
.mt-shapes span::after { content: "px"; font-size: 12px; color: var(--md-on-surface-variant); margin-left: 2px; }
.mt-shapes > div:last-child span::after { content: ""; }
.mt-shapes small { margin-top: 4px; font-size: 12px; color: var(--md-on-surface-variant); line-height: 1.5; }

/* ================= 04 重ね色 ================= */
.mt-state-lab { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); overflow: hidden; border-radius: 28px; }
@media (max-width: 760px) { .mt-state-lab { grid-template-columns: 1fr; } }
.mt-state-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 240px; padding: 28px; background: var(--md-surface-container-low); }
.mt-state-btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; height: 56px; padding: 0 28px 0 22px; border-radius: 28px; background: var(--md-secondary-container); color: var(--md-on-secondary-container); font: 500 17px/1 var(--md-font); transition: transform .18s var(--md-spring); }
.mt-state-btn.is-focus { outline: 3px solid var(--md-primary); outline-offset: 3px; }
.mt-state-btn.is-press { transform: scale(.95); }
.mt-state-layer { position: absolute; inset: 0; z-index: -1; background: currentColor; opacity: var(--o, 0); transition: opacity .15s linear; }
.mt-state-value { font-size: 40px; font-weight: 500; letter-spacing: -.02em; color: var(--md-on-surface-variant); font-variant-numeric: tabular-nums; }
.mt-state-text { display: flex; flex-direction: column; gap: 18px; padding: clamp(20px, 3vw, 28px); }
.mt-state-text p { color: var(--md-on-surface-variant); font-size: 15px; line-height: 22px; }
.mt-state-pick { align-self: stretch; }
.mt-state-pick button { flex-direction: column; gap: 2px; min-height: 52px; padding: 6px 8px; }
.mt-state-pick small { font-size: 11px; color: inherit; opacity: .75; }
@media (max-width: 420px) { .mt-state-pick button { padding: 6px 4px; font-size: 12.5px; } }

/* ================= 05 動き ================= */
.mt-curves { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .mt-curves { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .mt-curves { grid-template-columns: 1fr; } }
.mt-curve { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 16px 16px 18px; border: 0; color: var(--md-on-surface); font: inherit; text-align: left; cursor: pointer; transition: transform .18s var(--md-spring); }
.mt-curve:active { transform: scale(.985); }
.mt-curve.is-sk { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.mt-curve-tag { position: absolute; top: 14px; right: 14px; padding: 2px 9px; border-radius: 8px; background: var(--md-surface-container-highest); color: var(--md-on-surface-variant); font-size: 11px; font-weight: 500; }
.mt-curve.is-sk .mt-curve-tag { background: var(--md-primary); color: var(--md-on-primary); }
.mt-curve svg { width: 100%; max-width: 200px; height: auto; align-self: center; overflow: visible; }
.mt-curve-axis { fill: none; stroke: var(--md-outline-variant); stroke-width: 1; }
.mt-curve-handle { fill: none; stroke: var(--md-outline); stroke-width: .8; stroke-dasharray: 2 3; }
.mt-curve-path { fill: none; stroke: var(--md-primary); stroke-width: 3; stroke-linecap: round; }
.mt-curve-dot { fill: var(--md-primary); stroke: var(--md-surface); stroke-width: 2.5; }
.mt-curve-track { position: relative; align-self: stretch; height: 12px; margin: 12px 0 16px; border-radius: 6px; background: var(--md-surface-container-highest); }
.mt-curve-track i { position: absolute; top: 50%; left: 0; width: 20px; height: 20px; margin: -10px 0 0 -2px; border-radius: 50%; background: var(--md-primary); }
.mt-curve strong { font-size: 16px; font-weight: 500; }
.mt-curve small { font-size: 12.5px; color: inherit; opacity: .8; }
.mt-curve code { margin-top: 10px; padding: 2px 8px; border-radius: 6px; background: var(--md-surface-container-highest); color: var(--md-on-surface-variant); font: 500 11px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.mt-durations { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mt-durations span { display: inline-flex; align-items: baseline; gap: 8px; height: 32px; align-items: center; padding: 0 14px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--md-outline-variant); font-size: 13px; color: var(--md-on-surface-variant); }
.mt-durations b { color: var(--md-on-surface); font-weight: 500; }

/* ================= 06・07 ================= */
.mt-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mt-apps--main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .mt-apps, .mt-apps--main { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .mt-apps, .mt-apps--main { grid-template-columns: 1fr; } }
.mt-app { display: flex; align-items: center; gap: 14px; padding: 12px 14px; color: var(--md-on-surface) !important; text-decoration: none; }
.mt-apps--main .mt-app { padding: 16px; border-radius: 28px; }
.mt-app img { border-radius: 12px; flex: none; }
.mt-app img.plist-logo { padding: 8px; background: var(--md-surface); }
.mt-app span { display: flex; flex-direction: column; line-height: 1.4; min-width: 0; }
.mt-app strong { font-size: 16px; font-weight: 500; }
.mt-apps--main .mt-app strong { font-size: 20px; }
.mt-app small { font-size: 13px; color: var(--md-on-surface-variant); }
.mt-credits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 700px) { .mt-credits { grid-template-columns: 1fr; } }
.mt-credit { display: flex; flex-direction: column; padding: 18px 20px; color: var(--md-on-surface) !important; text-decoration: none; }
.mt-credit strong { font-size: 18px; font-weight: 500; }
.mt-credit small { margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--md-primary); }
.mt-credit p { margin-top: 8px; font-size: 14px; line-height: 21px; color: var(--md-on-surface-variant); }
.mt-credit-link { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 500; color: var(--md-primary); }
.mt-credit-link .msr { font-size: 16px; }
.mt-outro { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: clamp(64px, 10vw, 112px); text-align: center; }
.mt-outro p { font-size: clamp(22px, 3vw, 32px); font-weight: 500; line-height: 1.5; }

/* ---------- 部品の見本（見本の中だけ、ライト・ダークを切りかえられる） ---------- */
.mt-demo {
  --md-font: "M PLUS 1", "Noto Sans JP", system-ui, sans-serif;
  position: relative; overflow: hidden; border-radius: 28px;
  background: var(--md-surface); color: var(--md-on-surface); font-family: var(--md-font);
  box-shadow: inset 0 0 0 1px var(--md-outline-variant);
  transition: background-color .3s linear, color .3s linear;
}
.mt-demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px 14px 24px; background: var(--md-surface-container); }
.mt-demo-title { font-size: 22px; font-weight: 500; line-height: 28px; }
.mt-seg { display: flex; border: 1px solid var(--md-outline); border-radius: 20px; overflow: hidden; }
.mt-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; background: none; color: var(--md-on-surface); font: 500 14px/1 var(--md-font); cursor: pointer; }
.mt-seg button + button { border-left: 1px solid var(--md-outline); }
.mt-seg .msr { font-size: 18px; }
.mt-seg button[aria-checked="true"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.mt-demo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px; }
@media (max-width: 760px) { .mt-demo-grid { grid-template-columns: 1fr; padding: 12px; } }
.mt-demo-cell { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 16px; background: var(--md-surface-container-low); }
.mt-demo-cell h3 { font-size: 14px; font-weight: 500; letter-spacing: .01em; color: var(--md-on-surface-variant); }
.mt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mt-help { font-size: 12.5px; color: var(--md-on-surface-variant); }

/* 状態レイヤーと波紋（m3.css と同じ） */
.mt-demo .m3-state { position: relative; overflow: hidden; isolation: isolate; }
.mt-demo .m3-state::before { content: ""; position: absolute; inset: 0; z-index: -1; background: currentColor; opacity: 0; transition: opacity .15s linear; pointer-events: none; }
.mt-demo .m3-state:hover::before { opacity: .08; }
.mt-demo .m3-state:active::before { opacity: .1; }
.mt-demo .ripple { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .12; transform: scale(0); animation: mt-ripple .5s cubic-bezier(.2, 0, 0, 1) forwards; }
@keyframes mt-ripple { 60% { transform: scale(1); opacity: .12; } to { transform: scale(1); opacity: 0; } }

/* ボタン */
.mt-demo .m3-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 24px; border: 0; border-radius: 20px; cursor: pointer; background: var(--md-primary); color: var(--md-on-primary); font: 500 14px/1 var(--md-font); letter-spacing: .01em; white-space: nowrap; transition: transform .18s cubic-bezier(.34, 1.4, .64, 1), background-color .2s linear, color .2s linear; }
.mt-demo .m3-btn .msr { font-size: 18px; margin-left: -8px; }
.mt-demo .m3-btn:active { transform: scale(.95); }
.mt-demo .m3-btn--tonal { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.mt-demo .text-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 12px; border: 0; border-radius: 20px; background: none; cursor: pointer; color: var(--md-primary); font: 500 14px/1 var(--md-font); letter-spacing: .01em; }
.mt-demo .icon-btn { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border: 0; border-radius: 50%; background: transparent; color: var(--md-on-surface-variant); cursor: pointer; transition: transform .18s cubic-bezier(.34, 1.4, .64, 1), background-color .2s linear, color .2s linear; }
.mt-demo .icon-btn:active { transform: scale(.9); }
.mt-demo .icon-btn[aria-pressed="true"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.mt-demo .icon-btn[aria-pressed="true"] .msr, .mt-chip[aria-pressed="true"] .msr { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.mt-fab { display: grid; place-items: center; width: 56px; height: 56px; margin-left: auto; border: 0; border-radius: 16px; background: var(--md-primary-container); color: var(--md-on-primary-container); cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 8px 3px rgba(0, 0, 0, .15); transition: transform .18s cubic-bezier(.34, 1.4, .64, 1); }
.mt-fab:active { transform: scale(.95); }

/* チップ・スイッチ */
.mt-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 16px; border: 1px solid var(--md-outline-variant); border-radius: 8px; background: none; color: var(--md-on-surface-variant); font: 500 14px/1 var(--md-font); cursor: pointer; transition: background-color .2s linear, padding .2s cubic-bezier(.2, 0, 0, 1); }
.mt-chip .msr { display: none; font-size: 18px; }
.mt-chip[aria-pressed="true"] { padding-left: 8px; border-color: transparent; background: var(--md-secondary-container); color: var(--md-on-secondary-container); animation: mt-pop .32s cubic-bezier(.34, 1.4, .64, 1); }
.mt-chip[aria-pressed="true"] .msr { display: inline-block; }
@keyframes mt-pop { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
.mt-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; font-size: 16px; cursor: pointer; }
.mt-switch { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 52px; height: 32px; margin: 0; border-radius: 16px; cursor: pointer; background: var(--md-surface-container-highest); box-shadow: inset 0 0 0 2px var(--md-outline); transition: background-color .2s linear, box-shadow .2s linear; }
.mt-switch::after { content: ""; position: absolute; top: 8px; left: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--md-outline); transition: transform .3s cubic-bezier(.2, 0, 0, 1), width .2s, height .2s, top .2s, left .2s, background-color .2s linear; }
.mt-switch:checked { background: var(--md-primary); box-shadow: none; }
.mt-switch:checked::after { top: 4px; left: 4px; width: 24px; height: 24px; transform: translateX(20px); background: var(--md-on-primary); }
.mt-switch:focus-visible { outline: 3px solid var(--md-primary); outline-offset: 2px; }

/* 文字を入れる欄 */
.mt-demo .m3-field { display: flex; flex-direction: column; gap: 4px; padding: 8px 16px 6px; border-radius: 4px 4px 0 0; background: var(--md-surface-container-highest); box-shadow: inset 0 -1px 0 var(--md-on-surface-variant); }
.mt-demo .m3-field:focus-within { box-shadow: inset 0 -2px 0 var(--md-primary); }
.mt-demo .m3-field__label { font-size: 12px; color: var(--md-on-surface-variant); }
.mt-demo .m3-field:focus-within .m3-field__label { color: var(--md-primary); }
.mt-demo .m3-field__input { width: 100%; min-height: 28px; border: 0; outline: 0; padding: 0; background: none; color: var(--md-on-surface); font: 16px/1.5 var(--md-font); }

/* リスト */
.mt-list { margin: 0 -18px -18px; padding-bottom: 6px; }
.mt-list-item { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 8px 18px; color: var(--md-on-surface); }
.mt-list-item > .msr { color: var(--md-on-surface-variant); }
.mt-list-item > span:not(.msr) { flex: 1; display: flex; flex-direction: column; line-height: 1.35; }
.mt-list-item strong { font-size: 22px; font-weight: 500; }
.mt-list-item small { font-size: 13px; color: var(--md-on-surface-variant); }

/* スナックバー・ダイアログ（見本の枠の中に出す） */
.mt-snackbar { position: absolute; z-index: 3; left: 50%; bottom: 16px; translate: -50% 0; min-width: 260px; max-width: calc(100% - 32px); display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 16px; min-height: 48px; border-radius: 4px; background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); font-size: 14px; line-height: 20px; box-shadow: 0 3px 5px rgba(0, 0, 0, .2), 0 1px 18px rgba(0, 0, 0, .12); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .2s linear, transform .3s cubic-bezier(.2, 0, 0, 1); }
.mt-snackbar.is-on { opacity: 1; transform: none; pointer-events: auto; }
.mt-snackbar > span { flex: 1; padding: 10px 0; }
.mt-snackbar .text-btn { color: var(--md-inverse-primary); }
.mt-scrim { position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, .32); animation: mt-fade .2s linear; }
.mt-scrim[hidden] { display: none; }
.mt-dialog { width: min(360px, 100%); padding: 24px; border-radius: 28px; background: var(--md-surface-container-high); color: var(--md-on-surface); text-align: center; box-shadow: 0 4px 8px 3px rgba(0, 0, 0, .15), 0 1px 3px rgba(0, 0, 0, .3); animation: mt-rise .3s cubic-bezier(.2, 0, 0, 1); }
.mt-dialog > .msr { color: var(--md-error); }
.mt-dialog h3 { margin: 16px 0; font-size: 24px; font-weight: 400; line-height: 32px; }
.mt-dialog p { text-align: left; font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); }
.mt-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.mt-dialog-actions .text-btn:last-child { color: var(--md-error); }
@keyframes mt-fade { from { opacity: 0; } }
@keyframes mt-rise { from { opacity: 0; transform: translateY(24px); } }

/* ---------- 使っているところ・出どころ ---------- */
.mt-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .mt-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .mt-apps { grid-template-columns: 1fr; } }
.mt-app { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; }
.mt-app:hover { box-shadow: inset 0 0 0 1.5px var(--accent-line), var(--shadow); transform: translateY(-1px); }
.mt-app img { border-radius: 12px; flex: none; }
.mt-app img.plist-logo { padding: 6px; background: var(--surface-2); }
.mt-app span { display: flex; flex-direction: column; line-height: 1.4; min-width: 0; }
.mt-app strong { font-size: 15px; }
.mt-app small { font-size: 12.5px; color: var(--muted); }
.mt-credits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 700px) { .mt-credits { grid-template-columns: 1fr; } }
.mt-credit { display: flex; flex-direction: column; padding: 20px 22px; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; transition: box-shadow .2s ease; }
.mt-credit:hover { box-shadow: inset 0 0 0 1.5px var(--accent-line), var(--shadow); }
.mt-credit strong { font-size: 17px; }
.mt-credit small { margin-top: 2px; font-size: 12.5px; font-weight: 700; color: var(--link); }
.mt-credit p { margin-top: 8px; font-size: 14px; color: var(--muted); }
.mt-credit-link { margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 700; color: var(--link); }
.mt-credit-link::after { content: " ↗"; }

/* ================= 見た目の切りかえ（SK Style・SK Material。このページだけ） ================= */
.mt-hero-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 16px; }
.mt-hero-top .mt-crumb { margin-bottom: 0; }
.mt-style button { min-height: 36px; padding: 0 14px; font-size: 13px; }
.mt-tabs .wrap { display: flex; align-items: center; gap: 12px; }
.mt-tabs-row { flex: 1; min-width: 0; }
.mt-style--bar { flex: none; }
@media (max-width: 760px) { .mt-style--bar { display: none; } }
.mt-self-sk { display: none; }

/* ---------- SK Style: 同じ中身を、サイト（SK's Brand）のきまりで見せる ----------
   --md-* をサイトの色（assets/site.css のトークン）に読みかえる。サイトのライト・ダーク・テーマカラーにそのまま合う。
   アプリの画面・比べる見本・部品の見本・重ね色・配色の見本は、material.js が SK Material の色を入れるので、そのまま */
:root[data-mt-style="sk"] .mt-page main {
  --md-primary: var(--accent); --md-on-primary: var(--accent-ink);
  --md-primary-container: var(--green-soft); --md-on-primary-container: var(--link);
  --md-secondary-container: var(--surface-2); --md-on-secondary-container: var(--ink);
  --md-tertiary-container: var(--tint-blue); --md-on-tertiary-container: var(--link);
  --md-error-container: var(--down-soft); --md-on-error-container: var(--down-ink);
  --md-surface: var(--bg); --md-surface-container-low: var(--surface); --md-surface-container: var(--surface-2);
  --md-surface-container-high: var(--surface-2); --md-surface-container-highest: var(--surface-2);
  --md-on-surface: var(--ink); --md-on-surface-variant: var(--muted);
  --md-outline: var(--line-strong); --md-outline-variant: var(--line);
  --md-inverse-surface: var(--ink); --md-inverse-on-surface: var(--bg);
  --md-font: var(--font);
}
:root[data-mt-style="sk"] .mt-self-sk { display: inline; }
:root[data-mt-style="sk"] .mt-page main .ripple { display: none; }
:root[data-mt-style="sk"] .mt-page main .m3-state:not(.mt-app-screen *, .mt-demo *)::before { display: none; }
/* 文字 */
:root[data-mt-style="sk"] .mt-overline { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--green); }
:root[data-mt-style="sk"] .mt-overline::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
:root[data-mt-style="sk"] .mt-title { font-weight: 800; letter-spacing: -.06em; line-height: .88; }
:root[data-mt-style="sk"] .mt-title-accent { background: linear-gradient(120deg, var(--accent) 10%, var(--malu) 60%, var(--nagi) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-mt-style="sk"] .mt-chapter-head h2 { font-weight: 800; letter-spacing: -.035em; }
:root[data-mt-style="sk"] :is(.mt-diff-col h3, .mt-origin h2, .mt-outro p, .mt-credit strong, .mt-app strong, .mt-curve strong, .md-list li strong) { font-weight: 800; letter-spacing: -.01em; }
:root[data-mt-style="sk"] .mt-chapter-num { width: auto; height: auto; border-radius: 0; background: none; font-family: "Space Grotesk", Inter, sans-serif; font-size: clamp(64px, 9vw, 120px); font-weight: 700; line-height: .8; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px var(--line-strong); }
:root[data-mt-style="sk"] .mt-chapter-head { align-items: end; }
/* 表紙 */
:root[data-mt-style="sk"] .mt-hero { background: linear-gradient(180deg, var(--surface), var(--bg)); }
:root[data-mt-style="sk"] .mt-hero::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent); }
/* 角とカード（なめらかな角・線・やわらかい影） */
:root[data-mt-style="sk"] :is(.md-card, .mt-compare, .mt-color, .mt-diff-col, .mt-state-lab, .mt-scheme, .mt-apps--main .mt-app) { border-radius: var(--radius); corner-shape: superellipse(1.5); }
:root[data-mt-style="sk"] .md-card--outlined { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
:root[data-mt-style="sk"] .md-card--filled { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
:root[data-mt-style="sk"] .md-card--tonal { background: var(--tint-blue); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent-line); }
:root[data-mt-style="sk"] .mt-diff-col.is-sk { background: linear-gradient(160deg, var(--tint-blue), var(--surface) 60%); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent-line); }
:root[data-mt-style="sk"] .mt-diff-col.is-sk .md-list li { border-color: var(--line); color: var(--muted); }
:root[data-mt-style="sk"] .mt-diff-col.is-sk .md-list li strong { color: var(--ink); }
:root[data-mt-style="sk"] .md-list li > .msr, :root[data-mt-style="sk"] .mt-diff-col.is-sk .md-list li > .msr { color: var(--link); }
:root[data-mt-style="sk"] :is(.mt-app, .mt-credit, .mt-curve) { transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease; }
:root[data-mt-style="sk"] :is(.mt-app, .mt-credit):hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--accent-line), var(--shadow); }
:root[data-mt-style="sk"] .mt-curve.is-sk { background: linear-gradient(160deg, var(--tint-blue), var(--surface) 60%); color: var(--ink); }
:root[data-mt-style="sk"] :is(.mt-tag, .mt-curve-tag, .mt-compare-label, .mt-contrast-cell em, .mt-durations span) { border-radius: 999px; }
:root[data-mt-style="sk"] .mt-origin-ico, :root[data-mt-style="sk"] .mt-chapter-num { corner-shape: superellipse(1.5); }
/* ボタン・チップ・切りかえ（丸い両端・少し大きめ） */
:root[data-mt-style="sk"] .md-btn { height: 48px; padding: 0 24px; font: 700 15px/1 var(--font); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); transition: transform .15s ease, box-shadow .15s ease; }
:root[data-mt-style="sk"] .md-btn:hover { transform: translateY(-1px); }
:root[data-mt-style="sk"] .md-btn--tonal { background: var(--surface); color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--line); }
:root[data-mt-style="sk"] .md-btn--text { height: 40px; box-shadow: none; background: none; color: var(--link) !important; }
:root[data-mt-style="sk"] .md-seg { border: 0; border-radius: 999px; padding: 3px; gap: 2px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
:root[data-mt-style="sk"] .md-seg button { border-radius: 999px; font-weight: 700; }
:root[data-mt-style="sk"] .md-seg button + button { border-left: 0; }
:root[data-mt-style="sk"] .md-seg button > .msr { display: none !important; }
:root[data-mt-style="sk"] .md-seg button[aria-checked="true"] { background: var(--ink); color: var(--bg); animation: none; }
:root[data-mt-style="sk"] .mt-chips button { height: 38px; padding: 0 16px 0 8px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-weight: 700; }
:root[data-mt-style="sk"] .mt-chips button i { width: 24px; height: 24px; }
:root[data-mt-style="sk"] .mt-chips button[aria-checked="true"] { background: color-mix(in srgb, var(--sw) 8%, var(--surface)); color: var(--ink); box-shadow: inset 0 0 0 2px var(--sw); }
:root[data-mt-style="sk"] .mt-crumb, :root[data-mt-style="sk"] .mt-hero-pause { border-radius: 999px; font-weight: 700; }
/* 目次（SK's Brand と同じ形） */
:root[data-mt-style="sk"] .mt-tabs { background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); box-shadow: inset 0 -1px 0 var(--line); }
:root[data-mt-style="sk"] .mt-tabs-row { gap: 4px; padding: 8px 0; }
:root[data-mt-style="sk"] .mt-tabs-row a { height: 34px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--muted); }
:root[data-mt-style="sk"] .mt-tabs-row a .msr { display: none; }
:root[data-mt-style="sk"] .mt-tabs-row a::after { display: none; }
:root[data-mt-style="sk"] .mt-tabs-row a[aria-current="true"] { color: var(--link); background: var(--green-soft); }
:root[data-mt-style="sk"] .mt-tabs-progress { height: 2px; opacity: 1; background: linear-gradient(90deg, var(--accent), var(--malu), var(--nagi)); }
:root[data-mt-style="sk"] .mt-toast { border-radius: 14px; background: var(--ink); color: var(--bg); font-weight: 700; }

.mt-toast { position: fixed; left: 50%; bottom: 24px; z-index: 1600; transform: translate(-50%, 16px); display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 4px; background: var(--md-inverse-surface, #2e3039); color: var(--md-inverse-on-surface, #f0f0fb); font: 400 14px/20px "M PLUS 1", "Noto Sans JP", sans-serif; box-shadow: 0 3px 5px rgba(0, 0, 0, .2), 0 1px 18px rgba(0, 0, 0, .12); opacity: 0; pointer-events: none; transition: opacity .2s linear, transform .3s cubic-bezier(.2, 0, 0, 1); }
.mt-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
  .mt-page main, .mt-page main *, .mt-page main *::before, .mt-page main *::after { animation: none !important; transition: none !important; }
  .mt-js [data-reveal] { opacity: 1; transform: none; }
  .mt-js .mt-hero :is(.mt-title-line > span, .mt-overline, .mt-lead, .mt-origin, .mt-crumb, .mt-hero-actions), .mt-js .mt-hero-stage { opacity: 1; transform: none; }
}