/* 出町ガジェット WEB版 */
:root {
  --sky: #a9d7fa;
  --sky-deep: #7fc1f2;
  --paper: #ffffff;
  --cream: #fff8e8;
  --ink: #1d2733;
  --muted: #56636f;
  --orange: #ee6c11;
  --blue: #1691dd;
  --yellow: #ffd400;
  --green: #2fa84f;
  --radius: 18px;
  --shadow: 0 6px 0 rgba(29, 39, 51, .12), 0 12px 28px rgba(29, 39, 51, .10);
  --font: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--sky);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: .02em;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); }
a:hover { color: var(--orange); }
h1, h2, h3 { line-height: 1.35; margin: 0 0 .6em; font-weight: 800; }
p { margin: 0 0 1em; }

.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(169, 215, 250, .88);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid rgba(29, 39, 51, .08);
}
.site-header .wrap { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 800; }
.brand img { width: 56px; height: auto; }
.brand span { font-size: 15px; line-height: 1.2; }
.brand small { display: block; font-size: 11px; color: var(--muted); font-weight: 500; }
.nav { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.nav a {
  text-decoration: none; color: var(--ink); font-weight: 700; font-size: 14px;
  padding: 6px 12px; border-radius: 999px;
}
.nav a:hover, .nav a[aria-current="page"] { background: var(--paper); color: var(--orange); }
.nav-toggle { display: none; }

@media (max-width: 720px) {
  .nav-toggle {
    display: inline-flex; margin-left: auto; border: 0; background: var(--paper); color: var(--ink);
    border-radius: 999px; padding: 6px 16px; font: inherit; font-size: 14px; font-weight: 700;
    line-height: 1.6; white-space: nowrap; flex-shrink: 0; cursor: pointer;
  }
  .brand small { display: none; }
  .brand img { width: 44px; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--sky); flex-direction: column; padding: 8px 16px 16px;
    border-bottom: 2px solid rgba(29, 39, 51, .08);
  }
  .nav.open { display: flex; }
  .nav a { padding: 10px 14px; }
}

/* ---------- hero ---------- */
.hero { padding: 24px 0 8px; }
.hero .wrap { display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; align-items: center; }
.hero-copy { text-align: center; }
.hero-copy .logo3d { width: min(420px, 100%); margin: 0 auto 8px; filter: drop-shadow(0 8px 10px rgba(0,0,0,.15)); }
.hero-copy .tagline { font-size: 20px; font-weight: 800; margin: 0 0 4px; }
.hero-copy .sub { color: var(--muted); font-size: 14px; }
.nb { display: inline-block; }
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-copy { order: -1; }
  .hero-copy .logo3d { width: min(260px, 70%); }
  .hero-copy .tagline { font-size: 18px; }
}

/* ---------- top: 3D console + menu (same scene, no box) ---------- */
.hero3d { position: relative; height: 100vh; height: 100dvh; min-height: 420px; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hero3d #wire { --shadow: #8fbde3; position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; display: block; background: transparent; touch-action: none; cursor: grab; }
.hero3d #wire:active { cursor: grabbing; }
.hero3d #wire:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
.hero-brand { position: absolute; left: max(16px, 4vw); top: 18px; max-width: 320px; pointer-events: none; }
.hero-brand .logo3d { width: min(240px, 60vw); }
.hero-brand .tagline { font-size: 16px; font-weight: 800; margin: 4px 0 2px; }
.hero-brand .sub { color: var(--muted); font-size: 13px; margin: 0; }
.console-menu { position: absolute; right: max(16px, 5vw); top: 50%; transform: translateY(-50%); }
.console-menu ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.console-menu li a {
  display: flex; align-items: baseline; gap: 8px; padding: 5px 16px 5px 12px; border-radius: 0;
  background: var(--chip, rgba(255,255,255,.72)); backdrop-filter: blur(4px); color: var(--ink); text-decoration: none; font-weight: 800; font-size: 14px;
  box-shadow: 0 2px 0 rgba(29, 39, 51, .08); transition: transform .2s ease, background .2s ease, color .2s ease;
}
.console-menu li a:hover, .console-menu li a:focus-visible, .console-menu li a.going { background: var(--ink); color: #fff; }
/* 3Dの上の物にマウスをのせている間：対応する項目だけそのまま、ほかの項目は薄くなる（table.js が .has-hot と .hot を付ける） */
.console-menu li a { transition: transform .2s ease, background .2s ease, color .2s ease, opacity .2s ease; }
.console-menu.has-hot li a:not(.hot) { opacity: .25; }
.console-menu .n { font-size: 12px; color: var(--blue); font-variant-numeric: tabular-nums; }
.console-menu li a:hover .n, .console-menu li a:focus-visible .n, .console-menu li a.going .n { color: var(--yellow); }
.console-menu .s { font-size: 11px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.console-menu li a:hover .s, .console-menu li a:focus-visible .s, .console-menu li a.going .s { color: #cfd8e3; }
.console-menu li a.going { animation: pulse .6s ease-in-out infinite alternate; }
@keyframes pulse { from { background: var(--ink); } to { background: var(--blue); } }
.stage-back { display: none; position: absolute; right: max(16px, 5vw); top: 16px; font: inherit; font-weight: 800; font-size: 14px; padding: 8px 16px; border-radius: 999px; border: 0; background: var(--ink); color: #fff; cursor: pointer; z-index: 2; }
body.closeup .stage-back { display: block; }
body.closeup .console-menu, body.closeup .hero-brand { opacity: 0; pointer-events: none; transition: opacity .4s; }   /* 電光掲示に寄っている間は文字を重ねない */
.console-menu, .hero-brand { transition: opacity .4s; }
.stage-zoom { position: absolute; left: max(16px, 4vw); bottom: 24px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.stage-zoom button { width: 40px; height: 40px; border: 0; border-radius: 0; background: var(--chip, rgba(255,255,255,.72)); color: var(--ink); font: inherit; font-size: 20px; font-weight: 800; line-height: 1; cursor: pointer; }
.stage-zoom button:hover, .stage-zoom button:focus-visible { background: var(--ink); color: #fff; }
.stage-hint { position: absolute; left: max(16px, 4vw); bottom: 10px; margin: 0; font-size: 12px; color: var(--muted); pointer-events: none; }
@media (max-width: 860px) {
  .hero3d { height: auto; min-height: 100vh; min-height: 100dvh; padding-bottom: 16px; }
  .hero3d #wire { position: relative; height: 58vh; height: 58dvh; min-height: 260px; }
  .stage-zoom { top: calc(58vh - 150px); top: calc(58dvh - 150px); bottom: auto; }
  .hero-brand { position: relative; left: auto; top: auto; max-width: none; text-align: center; padding: 8px 16px 0; }
  .hero-brand .logo3d { width: min(200px, 60%); }
  .console-menu { position: relative; right: auto; top: auto; transform: none; padding: 12px 16px 0; }
  .console-menu li a:hover, .console-menu li a.going { transform: none; }
  .stage-hint { position: relative; left: auto; bottom: auto; padding: 8px 16px 0; }
}
@media (prefers-reduced-motion: reduce) { .console-menu li a, .island .part { transition: none; animation: none; } }

/* ---------- 3Dのトグルスイッチで変わる見た目（全部オフ＝ふだん）。1 = 配色、2 = 線、3 = 反転 ---------- */
body { transition: background-color .5s ease, color .5s ease; }
#wire { transition: filter .5s ease; }
/* 1: 背景が宇宙になり、星が横に流れる。本体の色はそのまま、床の影はなし */
body.sw1 { --sky: #05070f; --sky-deep: #000; --paper: #141a2a; --cream: #0d1220; --ink: #eef2ff; --muted: #9aa6c4; --blue: #7cc4ff; --orange: #ff8a3d; --yellow: #ffd400; --chip: rgba(13,18,32,.85); --star: #fff; }
body.sw1 .site-header, body.sw1 .site-footer { background: #05070f; color: #eef2ff; }
body.sw1 .hero3d #wire { --shadow: #0e1426; }
.hero3d { isolation: isolate; }
.hero3d .space { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
body.sw1 .hero3d .space { opacity: 1; }
/* 2: 黒地に緑のワイヤー */
body.sw2 { --sky: #000; --sky-deep: #000; --paper: #0b140b; --cream: #071007; --ink: #d9ffd0; --muted: #7fcf7a; --blue: #39ff14; --orange: #39ff14; --yellow: #39ff14; --chip: rgba(0,0,0,.8); }
body.sw2 .site-header, body.sw2 .site-footer { background: #000; color: #d9ffd0; }
body.sw2 .console-menu li a { border: 1px solid #39ff14; }
/* 3: ネガポジ反転（3Dは色を反転、ページは夜） */
body.sw3 { --sky: #1d2733; --sky-deep: #0f161f; --paper: #2a3442; --cream: #232c38; --ink: #f1f4f8; --muted: #aab4c0; --blue: #7cc4ff; --orange: #ffa94d; --chip: rgba(42,52,66,.85); }
body.sw3 .site-header, body.sw3 .site-footer { background: #121922; color: #f1f4f8; }
body.sw3 #wire { filter: invert(1); --shadow: #6b4f3a; }
/* 1+2: 点群（配色の色の点、暗い紫の上） */
body.sw1.sw2 { --sky: #2b1d26; --sky-deep: #1a1017; --paper: #3a2a35; --cream: #32242e; --ink: #fbeef5; --muted: #c9a9bb; --blue: #ffb86b; --orange: #ff6b6b; --yellow: #ffd400; --chip: rgba(58,42,53,.85); }
body.sw1.sw2 .site-header, body.sw1.sw2 .site-footer { background: #1c1219; color: #fbeef5; }
body.sw1.sw2 .console-menu li a { border: 0; }
/* 1+3: 白黒 */
body.sw1.sw3 { --star: #111; --sky: #e6e6e6; --sky-deep: #cfcfcf; --paper: #fff; --cream: #f2f2f2; --ink: #111; --muted: #555; --orange: #222; --blue: #222; --yellow: #777; --chip: rgba(255,255,255,.8); }
body.sw1.sw3 .site-header, body.sw1.sw3 .site-footer { background: #fff; color: #111; }
body.sw1.sw3 #wire { filter: grayscale(1) contrast(1.1); --shadow: #bdbdbd; }
/* 2+3: 白地に黒の線（線画） */
body.sw2.sw3 { --sky: #fff; --sky-deep: #eee; --paper: #f4f4f4; --cream: #fafafa; --ink: #111; --muted: #555; --blue: #111; --orange: #111; --yellow: #111; --chip: rgba(255,255,255,.9); }
body.sw2.sw3 .site-header, body.sw2.sw3 .site-footer { background: #fff; color: #111; }
body.sw2.sw3 #wire { filter: none; }
body.sw2.sw3 .console-menu li a { border: 1px solid #111; }
/* 1+2+3: 黒地に白い点群 */
body.sw1.sw2.sw3 { --star: #fff; --sky: #000; --sky-deep: #000; --paper: #111; --cream: #0a0a0a; --ink: #fff; --muted: #aaa; --blue: #fff; --orange: #fff; --yellow: #fff; --chip: rgba(0,0,0,.85); }
body.sw1.sw2.sw3 .site-header, body.sw1.sw2.sw3 .site-footer { background: #000; color: #fff; }
body.sw1.sw2.sw3 #wire { filter: none; }
body.sw1.sw2.sw3 .console-menu li a { border: 1px solid #fff; }

/* ---------- monitors: each screen's own "world" ---------- */
.mon { position: fixed; inset: 0; z-index: 60; overflow: auto; opacity: 0; transform: scale(1.06); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.mon.open { opacity: 1; transform: none; }
.mon[hidden] { display: none !important; }   /* 閉じている世界は、透明なまま手前に残ってクリックをさえぎらないように */
.mon:not(.open) { pointer-events: none; }
body.in-monitor { overflow: hidden; }
.mon .small { font-size: 12px; opacity: .75; }
.mon .icon { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 96px; text-decoration: none; text-align: center; font-size: 12px; line-height: 1.3; }
.mon .ico { width: 44px; height: 34px; position: relative; }
.mon .ico::before { content: ""; position: absolute; left: 0; top: -6px; width: 18px; height: 8px; background: inherit; border: inherit; border-bottom: 0; }
.mon .mon-close { font: inherit; padding: 0; cursor: pointer; }

/* --- desk：上のバー・アイコン・ウィンドウ・下のバー。テーマごとに見せる物と色を変える --- */
.desk { font-size: 13px; }
.desk .bar { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 18px; padding: 0 12px; }
.desk .bar .r { margin-left: auto; }
.desk .icons { position: absolute; display: grid; gap: 14px; justify-items: center; }
.desk .win { position: absolute; width: min(520px, 84vw); }
.desk .title { display: flex; align-items: center; gap: 8px; padding: 3px 6px; font-weight: bold; }
.desk .body { padding: 16px 18px; }
.desk .dock { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 0 6px; }
.desk .start { font: inherit; cursor: pointer; }

/* 01 Windows 95風 */
.win95 { background: #008080; color: #fff; font-family: "MS UI Gothic", "Osaka", "Hiragino Sans", sans-serif; }
.win95 .bar { display: none; }
.win95 .icons { left: 14px; top: 14px; bottom: 50px; grid-auto-flow: column; grid-template-rows: repeat(auto-fill, 88px); gap: 4px 10px; align-content: start; align-items: start; }   /* アイコンが多いときは、下の帯にかからないよう、2列目へ折り返す */
.win95 .icon { color: #fff; } .win95 .icon:hover .lb, .win95 .icon:focus-visible .lb { background: #000080; outline: 1px dotted #fff; }
.win95 .ico { background: #f3d36b; border: 2px solid #111; box-shadow: inset -4px -4px 0 #c9a227; }
.win95 .win { left: 50%; top: 42%; transform: translate(-50%, -50%); background: #c0c0c0; color: #000; border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 2px 2px 0 #000; }
.win95 .title { background: #000080; color: #fff; padding-left: 8px; }
.win95 .title span { order: 0; } .win95 .mon-close { order: 1; margin-left: auto; }
.win95 .mon-close, .win95 .start, .win95 .clock { background: #c0c0c0; color: #000; border: 2px solid; border-color: #fff #404040 #404040 #fff; }
.win95 .mon-close { width: 20px; height: 18px; } .win95 .mon-close::before { content: "×"; font-weight: bold; }
.win95 .dock { height: 36px; background: #c0c0c0; border-top: 2px solid #fff; color: #000; }
.win95 .start { font-weight: bold; padding: 2px 10px; }
.win95 .task { flex: 1; border: 2px solid; border-color: #404040 #fff #fff #404040; padding: 2px 8px; background: #d8d8d8; }
.win95 .clock { border-color: #404040 #fff #fff #404040; padding: 2px 10px; }

/* 02 Mac OS 9風（プラチナ） */
.mac9 { background: linear-gradient(135deg, #6f9ac4, #4b739c); color: #000; font-family: "Osaka", "Hiragino Sans", sans-serif; }
.mac9 .bar { height: 24px; background: #e6e6e6; border-bottom: 1px solid #555; }
.mac9 .icons { right: 16px; top: 40px; }
.mac9 .icon { color: #000; } .mac9 .icon .lb { background: rgba(255,255,255,.85); padding: 1px 5px; border-radius: 3px; }
.mac9 .icon:hover .lb, .mac9 .icon:focus-visible .lb { background: #333; color: #fff; }
.mac9 .ico { background: #9fc0ea; border: 1px solid #334; border-radius: 2px; box-shadow: inset -3px -3px 0 #6f93c4; }
.mac9 .win { left: 8vw; top: 24%; background: #ddd; border: 1px solid #333; box-shadow: 3px 3px 8px rgba(0,0,0,.45); }
.mac9 .title { height: 22px; padding: 0 6px; background: repeating-linear-gradient(#e8e8e8 0 2px, #9a9a9a 2px 3px); border-bottom: 1px solid #333; }
.mac9 .title span { background: #ddd; padding: 0 8px; margin: 0 auto; }
.mac9 .mon-close { width: 13px; height: 13px; border: 1px solid #333; background: #ddd; box-shadow: inset 1px 1px 0 #fff; }
.mac9 .body { background: #fff; }
.mac9 .dock { display: none; }

/* 03 NeXTSTEP風：濃いグレー、右に縦のDock、左上に縦のメニュー */
.next { background: #555; color: #000; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.next .bar { left: 10px; top: 10px; right: auto; flex-direction: column; align-items: stretch; gap: 0; padding: 0; background: #a8a8a8; border: 1px solid #000; box-shadow: 2px 2px 0 #000; width: 150px; }
.next .bar span { padding: 4px 8px; border-bottom: 1px solid #777; font-weight: bold; font-size: 12px; }
.next .bar span:first-child { background: #000; color: #fff; } .next .bar .r { margin: 0; font-weight: normal; }
.next .icons { right: 0; top: 0; gap: 0; }
.next .icon { width: 64px; height: 64px; justify-content: center; gap: 2px; background: #a8a8a8; border: 1px solid #000; box-shadow: inset 1px 1px 0 #fff; color: #000; font-size: 10px; }
.next .icon:hover, .next .icon:focus-visible { background: #d0d0d0; }
.next .ico { width: 28px; height: 20px; background: #e8d08a; border: 1px solid #000; }
.next .win { left: 190px; top: 60px; background: #bfbfbf; border: 1px solid #000; box-shadow: 3px 3px 0 #000; }
.next .title { background: #000; color: #fff; height: 22px; }
.next .mon-close { width: 14px; height: 14px; background: #bfbfbf; border: 1px solid #000; } .next .mon-close::before { content: "×"; font-size: 11px; line-height: 1; }
.next .dock { display: none; }
@media (max-width: 700px) { .next .win { left: 10px; top: 200px; } }

/* 04 Amiga Workbench風：青とオレンジ、太い枠 */
.amiga { background: #0055aa; color: #fff; font-family: "Courier New", monospace; font-weight: bold; }
.amiga .bar { height: 20px; background: #fff; color: #0055aa; font-size: 12px; }
.amiga .icons { left: 20px; top: 40px; }
.amiga .icon { color: #fff; } .amiga .icon:hover, .amiga .icon:focus-visible { color: #ff8800; }
/* モニタ 03：Netscape Navigator風のブラウザ。灰色の枠、ボタンの段、場所の欄、ブックマークの段、ページ、下の帯 */
.mon.browser { display: flex; flex-direction: column; overflow: hidden; background: #c0c0c0; color: #000; font: 12px/1.3 "MS UI Gothic", "Osaka", "Hiragino Kaku Gothic ProN", sans-serif; }
.mon.browser button { font: inherit; color: #000; cursor: pointer; }
.ns-title { flex: none; display: flex; align-items: center; gap: 8px; height: 22px; padding: 0 4px; background: #000080; color: #fff; font-weight: bold; }
.ns-title > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-title .mon-close { order: 1; margin-left: auto; flex: none; width: 18px; height: 16px; background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; line-height: 1; }
.ns-title .mon-close::before { content: "×"; font-weight: bold; }
.ns-menu { flex: none; display: flex; gap: 12px; padding: 2px 8px; border-bottom: 1px solid #808080; white-space: nowrap; overflow: hidden; }
.ns-tools { flex: none; display: flex; align-items: stretch; gap: 2px; padding: 4px 6px; border-top: 1px solid #fff; border-bottom: 1px solid #808080; }
.ns-tools button { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; min-width: 58px; padding: 3px 6px 2px; background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; white-space: nowrap; }
.ns-tools button:active, .ns-dir button:active, .ns-loc button:active { border-color: #404040 #fff #fff #404040; }
.ns-tools button:disabled { color: #808080; text-shadow: 1px 1px 0 #fff; cursor: default; } .ns-tools button:disabled .g { opacity: .35; }
.ns-tools .g { display: block; width: 22px; height: 18px; position: relative; }
.ns-tools .g::before { content: ""; position: absolute; inset: 0; margin: auto; }
.g-back::before { width: 0; height: 0; border: 8px solid transparent; border-right-color: #1a3a9a; border-left: 0; }
.g-fwd::before { width: 0; height: 0; border: 8px solid transparent; border-left-color: #1a3a9a; border-right: 0; }
.g-home::before { width: 14px; height: 9px; background: #a0522d; top: 7px; box-shadow: 0 -5px 0 -2px #7a2a1a, 0 -8px 0 -4px #7a2a1a; }
.g-reload::before { width: 12px; height: 12px; border: 3px solid #1a7a3a; border-right-color: transparent; border-radius: 50%; }
.g-tab::before { width: 14px; height: 11px; background: #fff; border: 1px solid #000; border-top: 4px solid #000080; }
.g-stop::before { width: 14px; height: 14px; background: #d02020; border-radius: 50%; box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px #801010; }
.ns-logo { margin-left: auto; flex: none; align-self: center; width: 40px; height: 40px; display: grid; place-items: center; background: linear-gradient(#0a1a4a, #1a4a9a 60%, #0a2a2a); border: 2px solid; border-color: #404040 #fff #fff #404040; color: #fff; font: bold 26px/1 Georgia, "Times New Roman", serif; overflow: hidden; }
.mon.browser.busy .ns-logo { animation: ns-busy .7s linear infinite; }
@keyframes ns-busy { 0%, 100% { background-position: 0 0; text-shadow: -14px -12px 0 #9fd0ff; } 50% { text-shadow: 12px 10px 0 #9fd0ff; } }
.ns-loc { flex: none; display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-top: 1px solid #fff; border-bottom: 1px solid #808080; }
.ns-loc label { font-weight: bold; white-space: nowrap; }
.ns-loc input { flex: 1; min-width: 0; height: 22px; padding: 0 4px; font: 13px/1 "Courier New", monospace; background: #fff; color: #000; border: 2px solid; border-color: #404040 #fff #fff #404040; border-radius: 0; }
.ns-loc button, .ns-dir button { background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; padding: 2px 10px; white-space: nowrap; }
.ns-dir { flex: none; display: flex; gap: 4px; padding: 3px 6px; border-top: 1px solid #fff; overflow-x: auto; }
.mon.browser iframe { flex: 1; min-height: 0; width: 100%; display: block; background: #fff; border: 2px solid; border-color: #404040 #fff #fff #404040; }
.ns-status { flex: none; padding: 2px 8px; border-top: 1px solid #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) { .ns-menu { display: none; } .ns-tools button { min-width: 0; flex: 1; padding: 3px 2px 2px; font-size: 10px; } .ns-logo { display: none; } }
@media (prefers-reduced-motion: reduce) { .mon.browser.busy .ns-logo { animation: none; } }

/* 検索結果のページ（/search/）。モニタ 03 のブラウザの「出町ガジェット」のブックマークから開く */
body.sr-page { background: #fff; }
.sr { max-width: 1040px; margin: 0 auto; padding: 16px 20px 56px; font-family: Arial, "Hiragino Sans", "Noto Sans JP", sans-serif; color: #202124; text-align: left; }
.sr-top { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid #dadce0; }
.sr-logo { font-weight: 800; font-size: 22px; color: #1a56c4; letter-spacing: .04em; }
.sr-box { flex: 1; max-width: 520px; padding: 9px 18px; border: 1px solid #dadce0; border-radius: 24px; font-size: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.sr-count { margin: 10px 0 0; font-size: 12px; color: #70757a; }
.sr-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; margin-top: 18px; }
.sr-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.sr-items a { display: block; text-decoration: none; color: inherit; }
.sr-site { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.3; }
.sr-site i { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #f1f3f4; border: 1px solid #dadce0; font-style: normal; font-weight: 700; font-size: 12px; }
.sr-site b { display: block; font-weight: 400; } .sr-site small { color: #4d5156; font-size: 12px; }
.sr-head { display: block; margin-top: 6px; font-size: 20px; line-height: 1.3; color: #1a0dab; }
.sr-items a:hover .sr-head, .sr-items a:focus-visible .sr-head { text-decoration: underline; }
.sr-items p { margin: 4px 0 0; font-size: 14px; line-height: 1.58; color: #4d5156; }
.sr-new { display: block; margin-top: 2px; font-size: 12px; color: #70757a; }
.sr-side { border: 1px solid #dadce0; border-radius: 12px; padding: 18px; font-size: 14px; line-height: 1.6; }
.sr-side img { display: block; margin-bottom: 8px; height: auto; }
.sr-side h2 { margin: 0; font-size: 20px; font-weight: 500; } .sr-side h2 small { font-size: 13px; font-weight: 400; margin-left: 4px; }
.sr-side p { margin: 2px 0 10px; color: #70757a; font-size: 13px; }
.sr-side dl { margin: 0; padding-top: 10px; border-top: 1px solid #dadce0; } .sr-side dt { font-weight: 700; margin-top: 6px; } .sr-side dd { margin: 0; }
.sr-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .sr-btns .btn { padding: 6px 14px; font-size: 13px; }
@media (max-width: 760px) { .sr-cols { grid-template-columns: 1fr; gap: 28px; } }

/* モニタ 04：全面が BMS。上に細い帯（とじるボタン）、残りは全部アプリ */
.mon.full { display: flex; flex-direction: column; overflow: hidden; background: #111; color: #e6e6e6; }
.mon.full .full-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 34px; padding: 0 12px; background: #1b1d21; border-bottom: 1px solid #000; font-size: 12px; letter-spacing: .04em; }
.mon.full .full-bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mon.full .mon-close { flex: none; padding: 3px 12px; border: 1px solid #555; border-radius: 999px; background: #2a2d33; color: #fff; font-size: 12px; }
.mon.full .mon-close:hover { background: #3a3f46; }
.mon.full iframe { flex: 1; min-height: 0; width: 100%; border: 0; display: block; background: #111; }
.amiga .ico { width: 48px; height: 30px; background: #0055aa; border: 3px solid #fff; box-shadow: inset 3px 3px 0 #000; } .amiga .ico::before { display: none; }
.amiga .win { left: 160px; top: 90px; background: #0055aa; border: 4px solid #fff; box-shadow: 4px 4px 0 #000; }
.amiga .title { background: #0055aa; border-bottom: 4px solid #fff; color: #fff; }
.amiga .title { background: repeating-linear-gradient(90deg, #0055aa 0 2px, #fff 2px 4px); }
.amiga .title span { background: #0055aa; padding: 0 8px; }
.amiga .mon-close { width: 18px; height: 16px; background: #ff8800; border: 2px solid #fff; }
.amiga .body { color: #fff; font-weight: normal; }
.amiga .body p:first-child::before { content: "Workbench: "; color: #ff8800; }
.amiga .dock { display: none; }
@media (max-width: 700px) { .amiga .win { left: 10px; top: 240px; } }

/* 09 OS/2 Warp風（業務用）：灰青のデスクトップ、下にランチパッド */
.os2 { background: #4a6a8a; color: #000; font-family: "Hiragino Sans", "Yu Gothic", sans-serif; }
.os2 .bar { display: none; }
.os2 .icons { left: 16px; top: 16px; }
.os2 .icon { color: #fff; } .os2 .icon:hover .lb, .os2 .icon:focus-visible .lb { background: #000; }
.os2 .ico { background: #d9d9d9; border: 1px solid #000; box-shadow: inset -3px -3px 0 #888; }
.os2 .win { left: 50%; top: 44%; transform: translate(-50%, -50%); background: #d0d0d0; border: 1px solid #000; box-shadow: 1px 1px 0 #000, inset 1px 1px 0 #fff; }
.os2 .title { background: #c0c0c0; border-bottom: 1px solid #000; }
.os2 .mon-close { width: 16px; height: 14px; background: #d0d0d0; border: 1px solid #000; border-radius: 2px; } .os2 .mon-close::before { content: "–"; font-size: 11px; }
.os2 .dock { left: 50%; right: auto; bottom: 10px; transform: translateX(-50%); height: 46px; background: #c0c0c0; border: 1px solid #000; padding: 0 8px; gap: 6px; }
.os2 .dock .start, .os2 .dock .dk { width: 40px; height: 34px; display: grid; place-items: center; background: #d8d8d8; border: 1px solid #000; box-shadow: inset 1px 1px 0 #fff; font-weight: bold; }
.os2 .task, .os2 .clock { display: none; }

/* 10 CDE／UNIX風（業務用）：下の「フロントパネル」と4つのワークスペース */
.cde { background: #6e7f9e; color: #000; font-family: "Lucida Grande", "Hiragino Sans", sans-serif; }
.cde .bar { display: none; }
.cde .icons { right: 20px; top: 20px; }
.cde .icon { color: #fff; } .cde .icon:hover .lb, .cde .icon:focus-visible .lb { background: #2c3e5a; }
.cde .ico { background: #c7d0e0; border: 1px solid #2c3e5a; box-shadow: inset -3px -3px 0 #8795ad; }
.cde .win { left: 40px; top: 60px; background: #aeb7c8; border: 2px solid; border-color: #e3e8f0 #5d6b85 #5d6b85 #e3e8f0; }
.cde .title { background: #5b7fa6; color: #fff; border-bottom: 2px solid #3a5577; }
.cde .mon-close { width: 16px; height: 16px; background: #aeb7c8; border: 2px solid; border-color: #e3e8f0 #5d6b85 #5d6b85 #e3e8f0; }
.cde .body { background: #c9d0dc; }
.cde .dock { left: 50%; right: auto; bottom: 0; transform: translateX(-50%); height: 54px; background: #aeb7c8; border: 2px solid; border-color: #e3e8f0 #5d6b85 #5d6b85 #e3e8f0; padding: 0 10px; gap: 4px; }
.cde .dock .start, .cde .dock .dk { padding: 4px 10px; background: #5b7fa6; color: #fff; border: 1px solid #3a5577; font-size: 12px; }
.cde .dock .start { background: #2c3e5a; } .cde .task { display: none; }
.cde .clock { margin-left: 12px; padding: 4px 10px; background: #2c3e5a; color: #fff; border: 1px solid #000; }

/* 11 Ubuntu（2004年ごろ）風：茶色とオレンジ、上下にパネル */
/* モニタ 09：Windows XP風（メンバー用）。青い空と緑の丘の壁紙、青いタイトルバー、青いタスクバーと緑の「スタート」 */
.xp { background: radial-gradient(130% 62% at 30% 112%, #3f9a2f 0, #62ba4b 55%, rgba(98,186,75,0) 55.5%), radial-gradient(120% 56% at 88% 116%, #4aa83a 0, #79cc5c 55%, rgba(121,204,92,0) 55.5%), linear-gradient(#2f7fe0, #7fbdf2 58%, #d6eefc) #5aa0ee;
  color: #000; font-family: Tahoma, "MS UI Gothic", "Hiragino Sans", "Yu Gothic", sans-serif; }
.xp .bar { display: none; }
.xp .icons { left: 16px; top: 16px; }
.xp .icon { color: #fff; text-shadow: 1px 1px 2px #000; } .xp .icon:hover .lb, .xp .icon:focus-visible .lb { background: #316ac5; text-shadow: none; }
.xp .ico { background: linear-gradient(#ffe9a0, #f0c040); border: 1px solid #8a6a14; border-radius: 2px; box-shadow: inset -3px -3px 0 #d9a520; }
.xp .win { left: 50%; top: 42%; transform: translate(-50%, -50%); background: #ece9d8; color: #000; border: 3px solid #0054e3; border-top: 0; border-radius: 8px 8px 0 0; box-shadow: 3px 4px 14px rgba(0,0,0,.45); }
.xp .title { height: 28px; padding: 0 5px 0 10px; background: linear-gradient(#0a6cf0, #0054e3 14%, #0450d8 55%, #1162e8 88%, #0a47c8); color: #fff; font-weight: bold; text-shadow: 1px 1px #0b2f8a; border-radius: 6px 6px 0 0; }
.xp .title span { order: 0; } .xp .mon-close { order: 1; margin-left: auto; width: 21px; height: 21px; border: 1px solid #fff; border-radius: 3px; background: linear-gradient(135deg, #f0a08a, #d8421f 50%, #b02a10); color: #fff; }
.xp .mon-close::before { content: "×"; font-weight: bold; font-size: 14px; line-height: 1; }
.xp .body { background: #ece9d8; }
.xp .dock { height: 30px; padding: 0; gap: 6px; background: linear-gradient(#3168d5, #4a8af0 6%, #245edb 14%, #1e52c4 88%, #1941a5); color: #fff; font-size: 12px; }
.xp .start { height: 100%; padding: 0 22px 0 12px; border: 0; border-radius: 0 13px 13px 0; background: linear-gradient(#6fcf5a, #3c9a2f 45%, #2f8a26); color: #fff; font-weight: bold; font-style: italic; font-size: 15px; text-shadow: 1px 1px 1px #1a4d14; box-shadow: inset 0 2px 2px rgba(255,255,255,.4), 2px 0 3px rgba(0,0,0,.4); }
.xp .task { padding: 3px 14px; background: linear-gradient(#3c81f3, #2a6be0); border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.xp .clock { align-self: stretch; display: flex; align-items: center; margin-left: auto; padding: 0 14px; background: linear-gradient(#1aa4f0, #1290e8 50%, #0e7ad0); border-left: 1px solid #0a4fb0; }
/* メンバー専用の知らせ */
.xp .win.alert { width: min(440px, 92vw); }
.alert-row { display: flex; gap: 14px; align-items: flex-start; }
.alert-ico { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3a0, #f4c20a 60%, #c99a00); border: 1px solid #8a6a00; color: #000; font: bold 22px/1 Tahoma, sans-serif; }
.alert-btns { display: flex; justify-content: center; gap: 10px; margin: 14px 0 10px; }
.ubuntu { background: radial-gradient(circle at 50% 40%, #e3c28f, #a9794a 70%); color: #000; font-family: "Hiragino Sans", "Yu Gothic", sans-serif; }
.ubuntu .bar { height: 26px; background: #4b3621; color: #f0e2d0; font-size: 13px; }
.ubuntu .icons { left: 16px; top: 44px; }
.ubuntu .icon { color: #2b1d12; } .ubuntu .icon:hover .lb, .ubuntu .icon:focus-visible .lb { background: #d9782d; color: #fff; }
.ubuntu .ico { background: #e8a95b; border: 1px solid #6b4a2b; border-radius: 3px; box-shadow: inset -3px -3px 0 #c07b33; }
.ubuntu .win { left: 50%; top: 42%; transform: translate(-50%, -50%); background: #efe8dd; border: 1px solid #6b4a2b; border-radius: 6px 6px 0 0; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.ubuntu .title { background: linear-gradient(#e3934a, #c7702a); color: #fff; border-radius: 5px 5px 0 0; }
.ubuntu .mon-close { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 1px solid #8b4b1b; } .ubuntu .mon-close::before { content: "×"; font-size: 11px; color: #8b4b1b; }
.ubuntu .dock { height: 26px; background: #4b3621; color: #f0e2d0; font-size: 12px; }
.ubuntu .start { background: #d9782d; color: #fff; border: 0; padding: 2px 10px; border-radius: 3px; font-size: 12px; }
.ubuntu .task { flex: 1; background: #6b4a2b; padding: 2px 8px; }

/* 12 BeOS風：黄色いタブのウィンドウ、右上のDeskbar */
.beos { background: #4f7fbf; color: #000; font-family: "Hiragino Sans", "Yu Gothic", sans-serif; }
.beos .bar { left: auto; right: 0; top: 0; width: 170px; height: 42px; background: #d8d8d8; border: 1px solid #555; box-shadow: 1px 1px 0 #fff inset; gap: 10px; font-size: 12px; }
.beos .bar span:first-child { background: #3b6cb5; color: #fff; padding: 2px 6px; font-weight: bold; }
.beos .icons { left: 20px; top: 20px; }
.beos .icon { color: #fff; } .beos .icon:hover .lb, .beos .icon:focus-visible .lb { background: #ffd700; color: #000; }
.beos .ico { background: #9cc2ef; border: 1px solid #333; box-shadow: inset -3px -3px 0 #6b96c9; }
.beos .win { left: 140px; top: 120px; background: #d8d8d8; border: 1px solid #333; box-shadow: 2px 2px 6px rgba(0,0,0,.5); margin-top: 22px; }
.beos .title { position: absolute; left: -1px; top: -23px; height: 23px; background: #ffd700; border: 1px solid #333; border-bottom: 0; padding: 0 10px 0 6px; width: auto; }
.beos .mon-close { width: 13px; height: 13px; background: #ffd700; border: 1px solid #333; box-shadow: inset 1px 1px 0 #fff; }
.beos .dock { display: none; }
@media (max-width: 700px) { .beos .win { left: 10px; top: 220px; } }

/* --- term：文字だけの画面 --- */
.term { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 24px; font-family: "Menlo", "Courier New", monospace; }
.term .scr { margin: 0; font: inherit; font-size: clamp(13px, 2vw, 18px); line-height: 1.35; white-space: pre-wrap; }
.term .scr a { color: inherit; text-decoration: none; }
.term .scr a:hover, .term .scr a:focus-visible { background: currentColor; color: var(--term-bg); }
.term .cur { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.term .exit { margin-top: 18px; font: inherit; font-size: 13px; background: none; color: inherit; border: 1px solid currentColor; padding: 4px 12px; cursor: pointer; }
/* 07 MS-DOS風 */
.dos { background: #000; color: #c0c0c0; --term-bg: #000; overflow: hidden; align-items: stretch; padding: 16px 20px 10px; }
/* 中身は BASIC（basic.js）。上が文字の出る所、いちばん下がファンクションキーの列 */
.dos .scr { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; cursor: text; }
.dos .scr { scrollbar-color: #555 #000; scrollbar-width: thin; }
.dos .out { display: inline; }
.dos .line { display: flex; margin: 0; }
.dos .line .pr { white-space: pre; }
.dos .line input { flex: 1; min-width: 0; font: inherit; color: inherit; background: none; border: 0; outline: 0; padding: 0; margin: 0; caret-color: #c0c0c0; border-radius: 0; }
.dos.running .line:not(:has(.pr:not(:empty))) input { caret-color: transparent; }
.dos .fkeys { flex: none; display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; font-size: 13px; }
.dos .fkeys button { font: inherit; margin: 0; border: 0; padding: 1px 8px 1px 0; background: #c0c0c0; color: #000; cursor: pointer; }
.dos .fkeys button b { display: inline-block; font-weight: normal; background: #000; color: #c0c0c0; padding: 0 5px 0 0; margin-right: 6px; }
.dos .fkeys button:hover, .dos .fkeys button:focus-visible { background: #fff; outline: 0; }
@media (max-width: 700px) { .dos { padding: 10px 10px 8px; } .dos .line input { font-size: 16px; } }
/* 06 Commodore 64風 */
.c64 { background: #7b71d6; --term-bg: #40318d; padding: 40px; }
.c64 .scr { background: #40318d; color: #7b71d6; padding: 16px 20px; width: 100%; min-height: 60vh; }
.c64 .exit { color: #40318d; border-color: #40318d; }

/* --- palm：手のひらサイズの端末（08 Palm OS風） --- */
.palm { background: #3b3f45; display: flex; align-items: center; justify-content: center; padding: 20px; font-family: "Hiragino Sans", "Yu Gothic", sans-serif; }
.palm .dev { width: min(360px, 92vw); background: #cfd3d8; border-radius: 22px; padding: 26px 22px 18px; box-shadow: 0 12px 30px rgba(0,0,0,.6), inset 0 1px 0 #fff; }
.palm .lcd { background: #9fb48a; color: #1e2a1a; border: 4px solid #4a4f55; height: 320px; display: flex; flex-direction: column; }
.palm .bar { display: flex; justify-content: space-between; padding: 4px 8px; font-weight: bold; font-size: 13px; border-bottom: 2px solid #1e2a1a; }
.palm .icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 14px 10px; justify-items: center; }
.palm .icon { width: 84px; color: #1e2a1a; font-weight: bold; font-size: 11px; }
.palm .icon:hover .lb, .palm .icon:focus-visible .lb { background: #1e2a1a; color: #9fb48a; }
.palm .ico { width: 34px; height: 26px; background: #9fb48a; border: 2px solid #1e2a1a; }
.palm .silk { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 6px; background: #b7bcc3; border-radius: 10px; font-size: 12px; color: #4a4f55; }
.palm .silk .pad { flex: 1; height: 40px; border: 1px dashed #4a4f55; border-radius: 6px; }
.palm .mon-close { width: 34px; height: 34px; border-radius: 50%; background: #e8eaee; border: 2px solid #4a4f55; font-size: 16px; }

/* --- btron：入れ子の文書（超漢字風。今は使っていない） --- */
.btron { background: #d8d8c8; display: flex; align-items: center; justify-content: center; padding: 20px; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; color: #111; }
.btron .doc { width: min(620px, 94vw); background: #fff; border: 1px solid #000; box-shadow: 4px 4px 0 #888; }
.btron .title { display: flex; align-items: center; gap: 8px; padding: 3px 6px; background: #eee; border-bottom: 1px solid #000; font-size: 13px; }
.btron .mon-close { width: 12px; height: 12px; background: #fff; border: 1px solid #000; }
.btron .body { padding: 18px 22px; line-height: 1.8; }
.btron .kashin { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.btron .kashin a { display: inline-block; padding: 4px 12px 4px 26px; border: 3px double #000; background: #fffbe6; color: #000; text-decoration: none; position: relative; font-size: 14px; }
.btron .kashin a::before { content: ""; position: absolute; left: 7px; top: 50%; width: 10px; height: 10px; margin-top: -6px; border: 1px solid #000; background: #fff; }
.btron .kashin a:hover, .btron .kashin a:focus-visible { background: #000; color: #fff; }

/* 05 Mac OS X Panther風：アクアの青い壁紙、細い縞のメニューバー、ヘアラインの金属の窓、下にDock。ここは映像の置き場 */
.osx { background: radial-gradient(120% 80% at 15% 115%, #a9d6ff 0, rgba(169,214,255,0) 60%), radial-gradient(90% 70% at 95% -10%, #86c0f8 0, rgba(134,192,248,0) 60%), linear-gradient(160deg, #2a63b8, #5b9be6 50%, #2f6fc4) #3f7fd0;
  color: #000; font-family: "Lucida Grande", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif; }
.osx .bar { height: 22px; gap: 16px; background: repeating-linear-gradient(#f7f7f7 0 2px, #ececec 2px 4px); border-bottom: 1px solid #8a8a8a; box-shadow: 0 2px 6px rgba(0,0,0,.35); font-size: 13px; }
/* --- 上のバーの項目・左上の地球・下の「スタート」を押すと開くメニュー（site/os.js の MENUS）。押せない項目は灰色 --- */
.mon .mb { height: 100%; padding: 0 2px; background: none; border: 0; color: inherit; font: inherit; cursor: default; white-space: nowrap; }
.mon .bar .globe { flex: none; width: 13px; height: 15px; padding: 0; border: 0; border-radius: 50% 50% 46% 46%; cursor: pointer; box-shadow: 0 0 0 1px rgba(0,40,120,.5);
  background: radial-gradient(circle at 28% 38%, #49b857 0 21%, transparent 22%), radial-gradient(circle at 42% 62%, #3fa94c 0 13%, transparent 14%), radial-gradient(circle at 72% 30%, #56c466 0 17%, transparent 18%), radial-gradient(circle at 78% 68%, #3fa94c 0 12%, transparent 13%),
    radial-gradient(circle at 35% 25%, #9bd4ff, #2a7be0 60%, #0f4fb0); }
.mon .bar .globe.on { box-shadow: 0 0 0 1px rgba(0,40,120,.5), 0 0 0 4px #3875d7; }
.os-drop { position: absolute; z-index: 9000; min-width: 190px; padding: 3px 0; display: flex; flex-direction: column; background: #dedede; color: #000; border: 1px solid #000; box-shadow: 2px 3px 0 rgba(0,0,0,.35); font: 13px/1.3 inherit; }
.os-drop button { padding: 3px 22px 3px 18px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: default; white-space: nowrap; }
.os-drop button:not(:disabled):hover, .os-drop button:not(:disabled):focus-visible { background: #33339a; color: #fff; outline: none; }
.os-drop button:disabled { color: #9a9a9a; }
.os-drop hr { width: 100%; margin: 3px 0; border: 0; border-top: 1px solid #9a9a9a; }
/* OS ごとの見た目 */
.mac9 .mb.on, .mac9 .os-drop button:not(:disabled):hover { background: #33339a; color: #fff; }
.mac9 .os-drop { background: #dedede; box-shadow: inset 1px 1px 0 #fff, 2px 3px 0 rgba(0,0,0,.4); } .mac9 .os-drop button:disabled { text-shadow: 1px 1px 0 #fff; }
.mac9 .bar { gap: 6px; } .mac9 .bar .mb { padding: 0 8px; font-weight: bold; }
.osx .bar { gap: 4px; } .osx .bar .mb { padding: 0 8px; } .osx .bar .mb:nth-child(2) { font-weight: bold; } .osx .mb.on { background: #3875d7; color: #fff; }
.osx .os-drop { background: rgba(246,246,246,.97); border: 1px solid #8a8a8a; border-top: 0; border-radius: 0 0 6px 6px; box-shadow: 0 6px 16px rgba(0,0,0,.4); padding: 4px 0; }
.osx .os-drop button:not(:disabled):hover, .osx .os-drop button:not(:disabled):focus-visible { background: #3875d7; }
.browser .ns-menu { gap: 0; } .browser .ns-menu .mb { padding: 1px 7px; } .browser .mb.on { background: #000080; color: #fff; }
.browser .os-drop, .win95 .os-drop { background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 1px 1px 0 #000; font-size: 12px; }
.browser .os-drop button:not(:disabled):hover, .win95 .os-drop button:not(:disabled):hover, .browser .os-drop button:not(:disabled):focus-visible, .win95 .os-drop button:not(:disabled):focus-visible { background: #000080; color: #fff; }
.browser .os-drop button:disabled, .win95 .os-drop button:disabled { color: #808080; text-shadow: 1px 1px 0 #fff; }
.browser .os-drop hr, .win95 .os-drop hr { border-top: 1px solid #808080; border-bottom: 1px solid #fff; }
.win95 .os-drop { min-width: 210px; padding: 2px 2px 2px 26px; background: linear-gradient(90deg, #808080 0 22px, #c0c0c0 22px); } .win95 .os-drop button { padding: 6px 18px 6px 10px; }
.win95 .start.on { border-color: #404040 #fff #fff #404040; }
.xp .os-drop { min-width: 230px; padding: 0 0 4px; background: #fff; border: 2px solid #0054e3; border-radius: 8px 8px 0 0; box-shadow: 3px 3px 10px rgba(0,0,0,.45); font-size: 12px; }
.xp .os-drop::before { content: "メンバー"; display: block; padding: 8px 12px; margin-bottom: 4px; background: linear-gradient(#1a6cf0, #0a47c8); color: #fff; font-weight: bold; font-size: 14px; border-radius: 5px 5px 0 0; text-shadow: 1px 1px #0b2f8a; }
.xp .os-drop button { padding: 5px 16px; } .xp .os-drop button:not(:disabled):hover, .xp .os-drop button:not(:disabled):focus-visible { background: #316ac5; color: #fff; }
.xp .start.on { filter: brightness(.85); }
.osx .icons { right: 18px; top: 44px; bottom: 20px; gap: 10px 14px; grid-auto-flow: column; grid-template-rows: repeat(auto-fill, 92px); align-content: start; align-items: start; direction: rtl; }   /* アイコンが多いときは、左の列へ折り返す（1列目がいちばん右） */
.osx .icons .icon { direction: ltr; }
.osx .icon { width: 120px; color: #fff; text-shadow: 0 1px 3px #000, 0 0 2px #000; }
.osx .icon .lb { padding: 1px 7px; border-radius: 9px; }
.osx .icon:hover .lb, .osx .icon:focus-visible .lb { background: #3875d7; text-shadow: none; }
.osx .ico { background: #9fc0ea; border: 1px solid #334; }
.osx .win { left: 7vw; top: 22%; background: repeating-linear-gradient(90deg, #c9ccd0 0 1px, #b9bcc1 1px 2px, #d4d7db 2px 3px); border: 1px solid #5a5a5a; border-radius: 7px 7px 3px 3px;
  box-shadow: 0 14px 34px rgba(0,0,0,.55), inset 0 1px 0 #fff; overflow: hidden; }
.osx .title { position: relative; justify-content: center; height: 22px; padding: 0 70px; font-size: 13px; font-weight: normal; text-shadow: 0 1px 0 rgba(255,255,255,.8); }
.osx .mon-close { position: absolute; left: 9px; top: 5px; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #8e1a10; background: radial-gradient(circle at 50% 25%, #ffd0c8, #ee4b3c 55%, #c22a1c);
  box-shadow: 19px 0 0 -1px #f0b02c, 19px 0 0 0 #9a6a10, 38px 0 0 -1px #5cc344, 38px 0 0 0 #2f7a1e; }
.osx .body { background: #fff; margin: 0 6px 6px; border: 1px solid #777; }
/* 隠れている Dock の分だけページが下にのびてスクロールしてしまわないよう、この世界では画面からはみ出した分を切り落とす */
.mon.osx { overflow: hidden; overflow: clip; }
/* 下の Dock は 🏠 だけ。ふだんは隠れていて、カーソルが下のはしに来ると下から出てくる（指で使う機器では出したまま） */
.osx .dock { left: 50%; right: auto; bottom: 0; transform: translate(-50%, 100%); transition: transform .22s ease-out; gap: 7px; padding: 6px 12px 5px; background: rgba(255,255,255,.28); border: 1px solid rgba(255,255,255,.65); border-bottom: 0; border-radius: 5px 5px 0 0; }
.osx .dock::before { content: ""; position: absolute; left: -50vw; right: -50vw; top: -10px; height: 10px; }   /* 下のはしの、さわると出てくる帯 */
.osx .dock:hover, .osx .dock:focus-within { transform: translate(-50%, 0); }
@media (hover: none) { .osx .dock { transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .osx .dock { transition: none; } }
.osx .dock .task, .osx .dock .clock { display: none; }
.osx .start, .osx .dk { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 9px; border: 1px solid rgba(0,0,0,.45); color: #fff; font-size: 22px; line-height: 1; padding: 0;
  background: linear-gradient(#7fb6ff, #1f5fc8); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 3px 5px rgba(0,0,0,.4); text-shadow: 0 1px 1px rgba(0,0,0,.5); }
.osx .start { background: linear-gradient(#f4f4f4, #a8adb5); color: #222; text-shadow: none; }
.osx .start:hover, .osx .start:focus-visible { transform: translateY(-5px) scale(1.12); }
.osx .dk:nth-child(3) { background: linear-gradient(#d9ecff, #5a9be8); border-radius: 50%; color: #c22; }
.osx .dk:nth-child(4) { background: linear-gradient(#fff, #c8d4e6); color: #36c; }
.osx .dk:nth-child(5) { background: linear-gradient(#c8f0a0, #3c9a2a); border-radius: 50%; }
.osx .dk:nth-child(6) { background: linear-gradient(#9fd0ff, #2a55b0); border-radius: 50%; font-size: 17px; }
.osx .dk:nth-child(7) { background: linear-gradient(#f2f2f2, #9aa0a8); color: #333; text-shadow: none; margin-left: 10px; }
@media (max-width: 520px) { .osx .bar .mb:nth-child(n+5) { display: none; } .osx .dk:nth-child(n+5) { display: none; } .osx .icon { width: 96px; } }

/* --- 画面の世界の中で開くウィンドウ（site/os.js）。見た目は各OSの .win をそのまま使い、大きさと位置だけここで決める --- */
.mon .win.app { position: absolute; left: calc(50% + var(--dx, 0px)); top: calc(50% + var(--dy, 0px)); transform: translate(-50%, -50%); margin: 0;
  width: min(920px, 94vw); height: min(760px, calc(100% - 70px)); display: flex; flex-direction: column; }
.mon .win.app.dragging { user-select: none; } .mon .win.app.dragging iframe, .mon .win.app.dragging video { pointer-events: none; }
.mon .win.app .title { flex: none; display: flex; align-items: center; gap: 8px; cursor: grab; touch-action: none; }
.mon .win.app .title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mon .win.app .app-body { flex: 1; min-height: 0; background: #fff; }
.mon .win.app iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.mon .win.app-game { width: min(1000px, 96vw); height: min(720px, calc(100% - 50px)); }
.mon .win.app-game .app-body, .mon .win.app-game iframe { background: #0a0a14; }
/* サインインの窓と、予約の窓（モニタ 09・メンバー用） */
.mon .win.app-signin { width: min(400px, 92vw); height: auto; }
.mon .win.app-signin .app-body { padding: 0 0 14px; background: #ece9d8; color: #000; font-size: 13px; line-height: 1.6; }
.si-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: linear-gradient(90deg, #0a47c8, #3f8cf3); color: #fff; font-size: 17px; font-weight: bold; border-bottom: 3px solid #f08c1e; }
.si-head small { display: block; font-size: 11px; font-weight: normal; opacity: .9; }
.si-logo { flex: none; width: 46px; height: 33px; background: #fff url(/img/logo.png) center / 40px auto no-repeat; border-radius: 4px; }
.si-msg { margin: 14px 18px 10px; font-weight: bold; }
.si-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin: 0 18px; }
.si-btns button, .alert-btns button { min-width: 84px; padding: 4px 14px; font: inherit; font-size: 13px; color: #000; background: linear-gradient(#fff, #ece9d8 85%, #d6d0c0); border: 1px solid #003c74; border-radius: 3px; cursor: pointer; }
.si-btns button:hover, .alert-btns button:hover { box-shadow: inset 0 0 0 2px #f8b636; } .si-btns button:focus-visible, .alert-btns button:focus-visible { outline: 1px dotted #000; outline-offset: -4px; box-shadow: inset 0 0 0 2px #8eb3f0; }
.si-note { margin: 12px 18px 0; font-size: 11px; color: #555; }
.mon .win.app-book { width: min(720px, 94vw); height: min(780px, calc(100% - 60px)); }
/* でまっちじゃんけんは縦長のゲームなので、窓も縦長（9:16）にする */
.mon .win.app-game[data-href="/janken/"] { --h: min(900px, 100vh - 56px); height: var(--h); width: min(96vw, calc((var(--h) - 24px) * .5625)); }
/* 写真フォルダ風の窓（site/os.js の folder）。1回押すと選び、ダブルクリックで開く */
.mon .win.app-folder { width: min(720px, 94vw); height: min(540px, calc(100% - 70px)); }
.mon .win.app-folder .app-body { display: flex; flex-direction: column; background: #fff; color: #000; }
.fd-bar { flex: none; padding: 3px 10px; font-size: 11px; color: #444; background: #ececec; border-bottom: 1px solid #b5b5b5; }
.fd-grid { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px 8px; align-content: start; padding: 14px 12px; user-select: none; -webkit-user-select: none; }
.fd-item { display: flex; flex-direction: column; align-items: center; gap: 5px; text-decoration: none; color: #000; font-size: 11px; line-height: 1.25; cursor: default; -webkit-touch-callout: none; }
.fd-thumb { position: relative; width: 88px; height: 70px; display: grid; place-items: center; }
.fd-thumb img { max-width: 88px; max-height: 70px; width: auto; height: auto; display: block; background: #fff; border: 1px solid #8a8a8a; box-shadow: 1px 2px 3px rgba(0,0,0,.3); pointer-events: none; }
.fd-name { max-width: 100px; padding: 1px 5px; border-radius: 3px; text-align: center; overflow-wrap: anywhere; }
.fd-item.sel .fd-thumb img, .fd-item.sel .fd-thumb::before { outline: 2px solid #2a62d8; outline-offset: 1px; }
.fd-item.sel .fd-name { background: #2a62d8; color: #fff; }
.fd-movie .fd-thumb::after { content: "▶"; position: absolute; right: 6px; bottom: 4px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; font-size: 9px; line-height: 20px; text-align: center; padding-left: 2px; box-sizing: border-box; }
.fd-folder .fd-thumb { align-items: end; } .fd-folder .fd-thumb img { max-width: 66px; max-height: 44px; margin-bottom: 6px; position: relative; z-index: 1; }
.fd-folder .fd-thumb::before { content: ""; position: absolute; left: 6px; right: 6px; top: 12px; bottom: 0; background: linear-gradient(#ffe28a, #f3c64a); border: 1px solid #8a6a14; border-radius: 3px; box-shadow: -1px -9px 0 -1px #f3c64a inset; }
.fd-folder .fd-thumb::after { content: ""; position: absolute; left: 6px; top: 5px; width: 32px; height: 8px; background: #f3c64a; border: 1px solid #8a6a14; border-bottom: 0; border-radius: 3px 3px 0 0; }
.fd-note .fd-thumb::before { content: ""; width: 44px; height: 56px; background: repeating-linear-gradient(#fff 0 6px, #c9d3e6 6px 7px) content-box, #fff; padding: 10px 6px 6px; box-sizing: border-box; border: 1px solid #777; box-shadow: 1px 2px 3px rgba(0,0,0,.3); }
/* 画像を拡大して見る窓と、文章の窓 */
.mon .win.app-photo { width: min(1000px, 94vw); height: min(780px, calc(100% - 56px)); }   /* 窓の大きさは決めておく（めくるたびに窓が動かないように）。画像は、その中に収まる大きさで出す */
.mon .win.app-photo .app-body { position: relative; background: #2b2b2b; display: grid; place-items: center; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.mon .win.app-photo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; min-height: 0; pointer-events: none; }
/* 前へ・次へのボタンと、「3 / 63」の表示 */
.ph-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; display: grid; place-items: center; padding: 0; background: rgba(0,0,0,.45); border: 0; border-radius: 6px; cursor: pointer; opacity: .55; transition: opacity .15s; }
.ph-nav:hover, .ph-nav:focus-visible { opacity: 1; } .ph-nav[hidden], .ph-count[hidden] { display: none; }
.ph-prev { left: 8px; } .ph-next { right: 8px; }
.ph-nav::before { content: ""; width: 14px; height: 14px; border: solid #fff; border-width: 0 0 3px 3px; transform: translateX(3px) rotate(45deg); } .ph-next::before { transform: translateX(-3px) rotate(-135deg); }
.ph-count { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); padding: 2px 12px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font: 12px/1.5 "Hiragino Sans", "Yu Gothic", sans-serif; pointer-events: none; }
.mon .win.app-note { width: min(440px, 92vw); height: auto; }
.mon .win.app-note .app-body { background: #fff; color: #000; }
.note-text { padding: 14px 16px; white-space: pre-wrap; font: 13px/1.7 "Osaka", "Hiragino Kaku Gothic ProN", "Hiragino Sans", monospace; max-height: 60vh; overflow: auto; }
/* 文字だけの画面・Palm・BTRON には .win の見た目が無いので、ここで足す */
.term .app { background: var(--term-bg); border: 2px solid currentColor; } .c64 .app { color: #7b71d6; }
.term .app .title { padding: 2px 8px; font-size: 13px; border-bottom: 2px solid currentColor; }
.term .app .mon-close { background: none; border: 0; color: inherit; } .term .app .mon-close::before { content: "[X]"; }
.palm .lcd { position: relative; }
.palm .lcd .win.app { left: 0; top: 0; transform: none; width: 100%; height: 100%; background: #9fb48a; }
.palm .app .title { padding: 3px 8px; font-weight: bold; font-size: 13px; border-bottom: 2px solid #1e2a1a; cursor: default; }
.palm .app .mon-close { width: 18px; height: 18px; border-radius: 0; border: 2px solid #1e2a1a; background: none; font-size: 11px; line-height: 1; } .palm .app .mon-close::before { content: "×"; }
.btron .app { background: #fff; border: 1px solid #000; box-shadow: 4px 4px 0 #888; }
/* ゲームと映像のアイコン（フォルダの形ではなく、四角いアプリの形） */
.mon .ico.i-game, .mon .ico.i-movie { width: 38px; height: 38px; border: 2px solid #111; border-radius: 6px; box-shadow: none; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 16px; line-height: 1; }
.mon .ico.i-game::before, .mon .ico.i-movie::before { display: none; }
.mon .ico.i-game { background: conic-gradient(#e33, #f90, #fd0, #3c5, #09f, #93f, #e33); } .mon .ico.i-game::after { content: "H"; text-shadow: 0 1px 0 #000, 0 0 3px #000; }
.mon .ico.i-movie { background: #1b1b1f; } .mon .ico.i-movie::after { content: "▶"; font-size: 14px; }
/* でまっちじゃんけん のアイコン：夜空の色に、グーの手 */
.mon .icon[href="/janken/"] .ico.i-game { background: radial-gradient(circle at 50% 30%, #5a2378, #1a0b2e); }
.mon .icon[href="/janken/"] .ico.i-game::after { content: "✊"; font-size: 22px; text-shadow: none; }
/* フライトシミュレーターKYOTO のアイコン：空と山と滑走路の上を飛ぶ飛行機 */
.mon .icon[href="/flight/"] .ico.i-game { background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 38'><rect width='38' height='38' fill='%236ec6ff'/><path d='M0 20 38 30V38H0z' fill='%2396c46e'/><path d='M2 20.5 9 13l6 11zM12 23l8-11 9 15.6z' fill='%2342924a' stroke='%23143f24' stroke-width='.8' stroke-linejoin='round'/><path d='M0 20 38 30' stroke='%23143f24' stroke-width='.8'/><path d='M6 38 17 26.5M30 38 22 27.8M14 38 19 27.2' stroke='%23fff' stroke-width='.9' fill='none'/><g transform='rotate(-18 21 13)'><path d='M21 4.5c1.2 0 1.6 1.6 1.6 3.4v2.3l9.4 4.3v2.2l-9.4-2.2v4.2l2.8 1.9v1.6L21 21.3l-4.4.9v-1.6l2.8-1.9v-4.2L10 16.7v-2.2l9.4-4.3V7.9c0-1.8.4-3.4 1.6-3.4z' fill='%23fff' stroke='%23111' stroke-width='.9' stroke-linejoin='round'/></g></svg>") center / cover; }
.mon .icon[href="/flight/"] .ico.i-game::after { content: none; }
/* 映像プレーヤ：昔の QuickTime 風（ヘアラインの金属の箱）。どのOSの中でも同じ見た目 */
.mon .win.app-movie { width: min(760px, 92vw); height: auto; padding: 0 12px 10px; color: #222; font-family: "Helvetica Neue", "Hiragino Sans", sans-serif;
  background: repeating-linear-gradient(90deg, #c6c9cd 0 1px, #b6b9be 1px 2px, #d2d5d9 2px 3px); border: 1px solid #555; border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.5), inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0,0,0,.2); }
.mon .win.app-movie .title { position: relative; left: auto; top: auto; width: auto; height: 28px; padding: 0 28px; justify-content: center; background: none; border: 0; border-radius: 0; color: #222; font-size: 12px; font-weight: bold; }
.mon .win.app-movie .title span { order: 0; margin: 0; padding: 0; background: none; text-shadow: 0 1px 0 #fff; }
.mon .win.app-movie .mon-close { position: absolute; left: 0; top: 7px; order: 0; margin: 0; width: 14px; height: 14px; border-radius: 50%; border: 1px solid #444; background: radial-gradient(circle at 35% 30%, #fff, #9a9da3 70%); box-shadow: none; }
.mon .win.app-movie .mon-close::before { content: none; }
.mon .win.app-movie .app-body { background: none; }
.mon .win.app-movie video { display: block; width: 100%; aspect-ratio: 1280 / 832; max-height: calc(100vh - 190px); background: #000; border: 2px solid; border-color: #666 #eee #eee #666; cursor: pointer; }
.qt-ctl { display: flex; align-items: center; gap: 10px; padding-top: 10px; }
.qt-play { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #444; cursor: pointer; padding: 0; color: #222; font-size: 13px;
  background: radial-gradient(circle at 35% 30%, #fff, #a9acb2 75%); box-shadow: 0 1px 0 #fff, inset 0 -2px 3px rgba(0,0,0,.25); }
.qt-play::before { content: "▶"; padding-left: 2px; } .qt-play.on::before { content: "❚❚"; padding: 0; font-size: 11px; }
.qt-play:active { background: radial-gradient(circle at 65% 70%, #fff, #8d9096 75%); }
.qt-seek, .qt-vol { -webkit-appearance: none; appearance: none; height: 8px; border-radius: 4px; background: #5d6066; border: 1px solid #333; box-shadow: inset 0 1px 2px rgba(0,0,0,.6), 0 1px 0 #fff; margin: 0; cursor: pointer; }
.qt-seek { flex: 1; min-width: 0; } .qt-vol { flex: none; width: 70px; }
.qt-seek::-webkit-slider-thumb, .qt-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 16px; border-radius: 3px; border: 1px solid #333; background: linear-gradient(#fff, #a9acb2); }
.qt-seek::-moz-range-thumb, .qt-vol::-moz-range-thumb { width: 12px; height: 16px; border-radius: 3px; border: 1px solid #333; background: linear-gradient(#fff, #a9acb2); }
.qt-time { flex: none; font: 11px/1 "Menlo", "Courier New", monospace; background: #1c2a1c; color: #8dff8d; padding: 5px 7px; border-radius: 3px; border: 1px solid #333; }
.qt-spk { flex: none; font-size: 13px; }
@media (max-width: 520px) { .qt-vol, .qt-spk { display: none; } }
/* YouTube の映像のアイコン：その映像のサムネイルを、ムービーのファイルらしく見せる */
/* サムネイルの画像を付けた映像のアイコン（モニタ 05 のデスクトップに並べた映像）：YouTube の映像と同じ形 */
.mon .ico.i-movie[style] { width: 76px; height: 46px; background-color: #111; background-size: cover; background-position: center; border: 1px solid #111; border-radius: 2px; box-shadow: 0 2px 6px rgba(0,0,0,.55); }
.mon .ico.i-movie[style]::after { content: "▶"; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; line-height: 22px; text-align: center; padding-left: 2px; box-sizing: border-box; text-shadow: none; }
/* Googleドライブの映像：アイコンは YouTube の映像と同じ形。窓は 16:9 */
.mon .ico.i-drive { width: 76px; height: 46px; background-color: #111; background-size: cover; background-position: center; border: 1px solid #111; border-radius: 2px; box-shadow: 0 2px 6px rgba(0,0,0,.55); display: grid; place-items: center; }
.mon .ico.i-drive::before { display: none; }
.mon .ico.i-drive::after { content: "▶"; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; line-height: 22px; text-align: center; padding-left: 2px; box-sizing: border-box; text-shadow: none; }
.mon .win.app-drive { width: min(960px, 94vw); height: auto; }
.mon .win.app-drive .app-body { aspect-ratio: 16 / 9; max-height: calc(100vh - 120px); background: #000; }
.mon .win.app-drive iframe { background: #000; }
.mon .ico.i-youtube { width: 76px; height: 46px; background-color: #111; background-size: cover; background-position: center; border: 1px solid #111; border-radius: 2px; box-shadow: 0 2px 6px rgba(0,0,0,.55); display: grid; place-items: center; }
.mon .ico.i-youtube::before { display: none; }
.mon .ico.i-youtube::after { content: "▶"; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; line-height: 22px; text-align: center; padding-left: 2px; box-sizing: border-box; text-shadow: none; }
/* 昔の YouTube 風のビューワー（2006年ごろのページの作り）。Safari 風の窓の中に、白いページ・タブ・映像・関連動画 */
.mon .win.app-youtube { width: min(980px, 96vw); height: min(700px, calc(100% - 64px)); }
.mon .win.app-youtube .app-body { display: flex; flex-direction: column; background: none; }
.yt-tool { flex: none; display: flex; align-items: center; gap: 6px; padding: 3px 8px 6px; font-size: 12px; }
.yt-nav { flex: none; width: 26px; height: 20px; display: grid; place-items: center; border: 1px solid #666; border-radius: 4px; background: linear-gradient(#fdfdfd, #b9bcc1); color: #333; font-size: 10px; }
.yt-url { flex: 1; min-width: 0; height: 18px; line-height: 18px; padding: 0 8px; background: #fff; border: 1px solid #777; box-shadow: inset 0 1px 2px rgba(0,0,0,.35); font: 11px/18px "Lucida Grande", "Helvetica Neue", sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #222; }
.yt-page { flex: 1; min-height: 0; overflow: auto; background: #fff; border-top: 1px solid #777; color: #000; font: 12px/1.5 Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif; padding: 10px 14px 16px; text-shadow: none; }
.yt-page a { color: #03c; }
.yt-head { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.yt-logo { font: bold 26px/1 Arial, Helvetica, sans-serif; letter-spacing: -1px; color: #111; }
.yt-logo b { display: inline-block; margin-left: 2px; padding: 3px 6px 4px; border-radius: 9px; background: linear-gradient(#f66, #c00); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.yt-tag { font-size: 11px; color: #666; padding-bottom: 3px; }
.yt-links { margin-left: auto; font-size: 11px; color: #03c; padding-bottom: 3px; }
.yt-tabs { display: flex; gap: 3px; margin-top: 8px; padding: 0 8px; border-bottom: 5px solid #d6e1f5; }
.yt-tabs span { padding: 4px 14px; border: 1px solid #b8c7e6; border-bottom: 0; border-radius: 6px 6px 0 0; background: linear-gradient(#fff, #e8eefb); color: #03c; font-weight: bold; }
.yt-tabs span.on { background: #d6e1f5; color: #000; }
.yt-cols { display: flex; gap: 16px; margin-top: 12px; align-items: flex-start; }
.yt-main { flex: 1; min-width: 0; }
.yt-side { flex: none; width: 270px; display: grid; gap: 10px; }
.yt-title { margin: 0 0 6px; font-size: 17px; line-height: 1.3; }
.yt-player { border: 1px solid #999; background: #000; }
.yt-screen { position: relative; aspect-ratio: 16 / 9; background: #000; }
.mon .win.app .yt-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.yt-ctl { display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 6px; background: linear-gradient(#fbfbfb, #cfcfcf); border-top: 1px solid #fff; }
.yt-ctl[hidden] { display: none; }
.yt-ctl button { flex: none; width: 26px; height: 20px; padding: 0; border: 1px solid #888; border-radius: 3px; background: linear-gradient(#fff, #d4d4d4); color: #444; font-size: 10px; line-height: 1; cursor: pointer; }
.yt-ctl button:active { background: linear-gradient(#ccc, #eee); }
.yt-play::before { content: "▶"; } .yt-play.on::before { content: "❚❚"; font-size: 9px; }
.yt-mute::before { content: "🔊"; font-size: 11px; } .yt-mute.on::before { content: "🔇"; }
.yt-seek, .yt-vol { -webkit-appearance: none; appearance: none; height: 8px; margin: 0; border: 1px solid #888; border-radius: 2px; cursor: pointer;
  background: linear-gradient(90deg, #d00 0 var(--p, 0%), #f3b4b4 var(--p, 0%) var(--l, 0%), #fff var(--l, 0%)); }
.yt-seek { flex: 1; min-width: 0; } .yt-vol { flex: none; width: 56px; --l: 0%; }
.yt-seek::-webkit-slider-thumb, .yt-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 9px; height: 15px; border: 1px solid #666; border-radius: 2px; background: linear-gradient(#fff, #bbb); }
.yt-seek::-moz-range-thumb, .yt-vol::-moz-range-thumb { width: 9px; height: 15px; border: 1px solid #666; border-radius: 2px; background: linear-gradient(#fff, #bbb); }
.yt-time { flex: none; font-size: 11px; color: #333; font-variant-numeric: tabular-nums; }
.yt-rate { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; padding: 6px 8px; background: #eee; border: 1px solid #ccc; }
.yt-stars { color: #d00; font-size: 15px; letter-spacing: 1px; }
.yt-rate a { margin-left: auto; }
.yt-box { border: 1px solid #ccc; background: #eee; padding: 8px; }
.yt-box h3 { margin: 0 0 6px; font-size: 13px; }
.yt-rel { display: grid; gap: 6px; }
.yt-rel button { display: flex; gap: 8px; align-items: flex-start; width: 100%; padding: 4px; border: 1px solid transparent; background: none; font: inherit; color: #03c; text-align: left; cursor: pointer; }
.yt-rel button:hover, .yt-rel button:focus-visible { background: #fff; border-color: #ccc; }
.yt-rel button.on { background: #ffc; border-color: #e0d080; color: #000; }
.yt-rel img { flex: none; width: 96px; height: 54px; object-fit: cover; border: 1px solid #333; background: #111; }
.yt-rel b { display: block; font-size: 12px; line-height: 1.35; text-decoration: underline; } .yt-rel button.on b { text-decoration: none; }
.yt-rel small { display: block; color: #666; font-size: 11px; }
@media (max-width: 700px) { .yt-cols { flex-direction: column; } .yt-side { width: 100%; } .yt-vol { display: none; } .yt-tabs span { padding: 4px 8px; } .yt-tag, .yt-links { display: none; } }
/* 仮想OSのウィンドウの中で開いたページ：サイトのヘッダーとフッターは出さない */
html.embedded .site-header, html.embedded .site-footer { display: none; }

/* ---------- island illustration ---------- */
.island { position: relative; width: 100%; aspect-ratio: 980 / 830; }
.island > * { position: absolute; }
.island img { width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.island .part { transition: transform .25s ease; }
.island a.part:hover, .island button.part:hover { transform: translateY(-4px); }
.island button.part { border: 0; padding: 0; background: none; cursor: pointer; }
.island .bubble {
  position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, 6px);
  background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 800; white-space: nowrap;
  padding: 4px 12px; border-radius: 999px; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.island .part:hover .bubble, .island .part:focus-visible .bubble { opacity: 1; transform: translate(-50%, -4px); }
.island .gacha .bubble { opacity: 1; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translate(-50%, -8px); } }
.island.power-on .battery img { filter: drop-shadow(0 0 18px #ffe95c) drop-shadow(0 0 6px #fff36b); }
.island.power-on .dematch img { animation: wiggle .5s ease-in-out infinite; }
@keyframes wiggle { 50% { transform: rotate(-3deg); } }

.clock {
  border-radius: 50%; box-shadow: 0 0 15px rgba(0, 0, 0, .45);
  container-type: inline-size;
}
.clock .hand { position: absolute; left: 0; top: 50%; width: 50%; height: 1.2%; transform-origin: 100% 50%; box-shadow: 0 0 4px rgba(0,0,0,.4); }
.clock .h { height: 3%; background: #ff8c00; }
.clock .m { background: #0095dd; }
.clock .s { background: yellow; }
.clock .ms { height: .6%; background: limegreen; }
.clock .c { position: absolute; left: 50%; top: 50%; width: 5%; height: 5%; border-radius: 50%; background: #000; transform: translate(-50%, -50%); }
.clock .d {
  position: absolute; left: 50%; top: 70%; transform: translate(-50%, -50%);
  background: #fff; border-radius: 5px; padding: 0 6px; box-shadow: 0 0 8px rgba(0,0,0,.45);
  font-size: 8cqw; line-height: 1.5; font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---------- sections ---------- */
.section { padding: 56px 0; }
.section.paper { background: var(--paper); }
.section.cream { background: var(--cream); }
.section-title { font-size: clamp(24px, 4vw, 32px); text-align: center; margin-bottom: 8px; }
.section-title::after {
  content: ""; display: block; width: 64px; height: 6px; border-radius: 3px; margin: 10px auto 0;
  background: linear-gradient(90deg, var(--orange) 50%, var(--blue) 50%);
}
.section-lead { text-align: center; color: var(--muted); margin-bottom: 32px; }

.about { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } }
.about-text p { font-size: 17px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1em; padding: 0; list-style: none; }
.chips li { background: var(--sky); border-radius: 999px; padding: 4px 14px; font-size: 14px; font-weight: 700; }

.card {
  background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 24px; border: 3px solid var(--ink);
}
.hours h3 { display: flex; align-items: center; gap: 8px; font-size: 20px; }
.hours h3::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(47,168,79,.25); }
.hours dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
.hours dt { font-weight: 800; color: var(--orange); }
.hours dd { margin: 0; }
.hours .note { font-size: 13px; color: var(--muted); margin: 14px 0 0; }

/* ---------- works grid ---------- */
.works { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.work {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px 16px 18px; text-decoration: none; color: var(--ink);
  transition: transform .2s ease;
}
a.work:hover { transform: translateY(-6px) rotate(-.6deg); color: var(--ink); }
.work img { width: 148px; height: 148px; object-fit: cover; border-radius: 50%; border: 4px solid var(--sky); margin-bottom: 12px; }
.work .t { font-weight: 800; line-height: 1.4; }
.work .s { font-size: 13px; color: var(--muted); }
.work .go { margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 800; color: var(--blue); }
.work.soon { opacity: .75; }
.work.soon img { object-fit: contain; background: var(--paper); padding: 10px; }

/* ---------- video ---------- */
.video-box { max-width: 860px; margin-inline: auto; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #000; }
.video-box video { width: 100%; aspect-ratio: 16 / 9; }

/* ---------- links ---------- */
.sns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding: 0; margin: 0; list-style: none; }
.sns a {
  display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink);
  background: var(--paper); border-radius: 999px; padding: 8px 18px 8px 8px; font-weight: 700;
  box-shadow: var(--shadow); transition: transform .2s;
}
.sns a:hover { transform: translateY(-3px); }
.sns img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }

/* ---------- page header (sub pages) ---------- */
.page-head { padding: 40px 0 24px; text-align: center; }
.page-head .kicker { display: inline-block; background: var(--paper); border-radius: 999px; padding: 2px 14px; font-size: 13px; font-weight: 800; color: var(--orange); margin-bottom: 10px; }
.page-head h1 { font-size: clamp(26px, 5vw, 40px); }
.page-head .lead { max-width: 720px; margin: 0 auto; font-size: 17px; }
.page-head .lead p { margin-bottom: .5em; }
.page-head .lead .small { font-size: 14px; color: var(--muted); }

/* ---------- gallery ---------- */
.gallery { columns: 3 260px; column-gap: 14px; }
.gallery figure {
  break-inside: avoid; margin: 0 0 14px; background: var(--paper); border-radius: 14px;
  overflow: hidden; box-shadow: var(--shadow);
}
.gallery button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gallery img, .gallery video { width: 100%; height: auto; }
.gallery figcaption { font-size: 13px; color: var(--muted); padding: 8px 12px; line-height: 1.5; }

.lightbox {
  position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center;
  background: rgba(10, 16, 24, .9); padding: 16px;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.lightbox button {
  position: absolute; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 26px;
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
}
.lightbox button:hover { background: rgba(255,255,255,.3); }
.lightbox .x { top: 14px; right: 14px; }
.lightbox .prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox .next { right: 14px; top: 50%; transform: translateY(-50%); }

.back { text-align: center; margin: 40px 0 0; }
.btn {
  display: inline-block; text-decoration: none; font-weight: 800; color: var(--paper);
  background: var(--orange); border-radius: 999px; padding: 10px 24px; box-shadow: 0 4px 0 #b14d06;
}
.btn:hover { color: var(--paper); transform: translateY(2px); box-shadow: 0 2px 0 #b14d06; }
.btn.blue { background: var(--blue); box-shadow: 0 4px 0 #0c6aa6; }

/* ---------- full-screen tool pages ---------- */
.tool-frame { width: 100%; height: calc(100vh - 66px); height: calc(100dvh - 66px); border: 0; display: block; background: #111; }
.tool-bar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 10px 0; font-size: 14px; }

/* ---------- 利用者WEB (/members) ---------- */
.m-top { text-align: left; padding-bottom: 8px; }
.m-intro { display: grid; grid-template-columns: 160px 1fr; gap: 28px; align-items: center; }
.m-intro .kiosk { width: 160px; }
.m-intro h1 small { font-size: 14px; color: var(--muted); font-weight: 700; }
.m-menu { list-style: none; margin: 0; padding: 14px 16px; background: #1b1b1b; border-radius: 10px; border: 6px solid #c99b74; display: grid; gap: 2px; max-width: 360px; }
.m-menu a { color: #7dff6b; text-decoration: none; font-weight: 700; font-size: 15px; display: block; padding: 2px 4px; }
.m-menu a::before { content: "○ "; }
.m-menu a:hover { color: #fff; }
@media (max-width: 600px) { .m-intro { grid-template-columns: 90px 1fr; gap: 16px; } .m-intro .kiosk { width: 90px; } }

.m-body { padding-bottom: 56px; display: grid; gap: 24px; }
.m-sec { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; scroll-margin-top: 80px; }
.m-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.m-head h2 { margin: 0; font-size: 24px; }
.floor { background: var(--ink); color: #fff; font-weight: 800; border-radius: 6px; padding: 0 10px; font-size: 14px; }
.beta { color: #e0245e; font-size: 13px; font-weight: 800; }
.m-maps { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; align-items: center; margin-bottom: 18px; }
.m-maps.one { grid-template-columns: minmax(0, 520px); }
@media (max-width: 720px) { .m-maps { grid-template-columns: 1fr; } }
/* デスクの配置図：机の絵の上に、番号と予約のボタンを重ねる。大きさは図の幅に合わせて変わる */
.m-maps.desk { grid-template-columns: minmax(0, .5fr) minmax(0, 2fr); }
@media (max-width: 720px) { .m-maps.desk { grid-template-columns: 1fr; } .m-maps.desk > img { max-width: 240px; margin: 0 auto; } }
.desk-map { position: relative; container-type: inline-size; }
.desk-map > img { display: block; width: 100%; height: auto; }
.desk-map .spot { position: absolute; transform: translate(-50%, -50%); width: 11.8cqw; padding: .7cqw .3cqw; border-radius: 1.4cqw; line-height: 1.25; }
.desk-map .spot b { font-size: clamp(9px, 2.3cqw, 20px); white-space: nowrap; }
.desk-map .spot span { font-size: clamp(7px, 1.45cqw, 12px); white-space: nowrap; }
.desk-map .spot.ok { box-shadow: 0 .5cqw 0 #b9773a; }
.desk-map .spot.ok:hover { transform: translate(-50%, calc(-50% + .25cqw)); box-shadow: 0 .25cqw 0 #b9773a; }
.desk-map .spot.ng { background: rgba(236,239,242,.92); }
.desk-map .spot .new { top: -1.8cqw; right: -1cqw; font-size: clamp(8px, 1.3cqw, 10px); line-height: 1.5; padding: 0 .9cqw; }
.spots { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.spot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 12px; padding: 10px 6px; text-decoration: none; text-align: center; line-height: 1.4; }
.spot b { font-size: 18px; }
.spot span { font-size: 12px; font-weight: 700; }
.spot.ok { background: #e3a463; color: var(--ink); box-shadow: 0 4px 0 #b9773a; }
.spot.ok:hover { background: #f0b678; color: var(--ink); transform: translateY(2px); box-shadow: 0 2px 0 #b9773a; }
.spot.ng { background: #eceff2; color: #8a96a1; }
.spot .new { position: absolute; top: -8px; right: -6px; background: #e0245e; color: #fff; font-size: 10px; border-radius: 999px; padding: 1px 7px; }
.m-notes { margin-top: 14px; font-size: 14px; color: var(--muted); }
.m-notes p { margin: 0 0 4px; }
.cal-box { position: relative; width: 100%; aspect-ratio: 4 / 3; min-height: 520px; border-radius: 12px; overflow: hidden; border: 1px solid #dde3e8; }
.cal-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.m-hint { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.m-split { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 24px; align-items: center; }
.m-split img { border-radius: 12px; }
@media (max-width: 720px) { .m-split { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #dfe7ee; padding: 36px 0; font-size: 14px; text-align: center; }
.site-footer img { width: 120px; margin: 0 auto 12px; }
.site-footer a { color: #fff; }
.site-footer p { margin: 0 0 4px; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- 建物 3Dマップ (/members/haus/) ---------- */
.haus-wrap { padding-bottom: 56px; }
.haus-stage { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
#haus, #wire { --shadow: #d3d7de; display: block; width: 100%; height: min(54vh, 560px); min-height: 300px; touch-action: none; cursor: grab; --haus-ink: #111; --haus-green: #1fee1f; }
#haus:active, #wire:active { cursor: grabbing; }
.haus-ui { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 16px; }
.seg { display: inline-flex; flex-wrap: wrap; background: var(--paper); border-radius: 999px; padding: 4px; box-shadow: var(--shadow); }
.seg button { border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.seg button:hover:not([aria-pressed="true"]) { background: var(--sky); }

.seg button:disabled { opacity: .4; cursor: default; }

/* ---------- 利用者予約管理システム（/members/）：役所の窓口の端末ふうの見た目。画像の素材は元のまま ---------- */
body.gov { background: #d4d8dd; color: #111; font-family: "MS Gothic", "ＭＳ ゴシック", "Osaka-Mono", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", monospace; font-size: 14px; }
body.gov .wrap { max-width: 1040px; }
.gov-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; padding: 8px 16px; background: #1f3a6e; color: #fff; border-bottom: 3px solid #c8a13a; }
.gov-name { font-size: 20px; font-weight: bold; letter-spacing: .08em; } .gov-name b { display: inline-block; margin-right: 12px; padding: 1px 8px; background: #fff; color: #1f3a6e; font-size: 13px; letter-spacing: 0; vertical-align: 3px; }
.gov-info { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; } .gov-info span + span { padding-left: 16px; border-left: 1px solid rgba(255,255,255,.5); }
.gov-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 4px 16px; background: #eef0f3; border-bottom: 1px solid #8a93a0; font-size: 13px; }
.gov-sub > span:first-child { font-weight: bold; padding: 1px 12px; background: #2f6b4f; color: #fff; }
.gov-note { color: #a01818; }
body.gov .m-top { padding: 16px 0 8px; }
body.gov .m-intro { grid-template-columns: 1fr; gap: 22px; align-items: start; background: #f4f5f7; border: 1px solid #6f7a88; box-shadow: inset 1px 1px 0 #fff; padding: 14px 16px; }
.gov-lead { margin: 0 0 8px; font-weight: bold; } .gov-lead::before { content: "▶ "; color: #1f3a6e; }
body.gov .m-menu { max-width: none; padding: 0; background: none; border: 0; border-radius: 0; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
body.gov .m-menu a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; color: #111; font-size: 14px; background: linear-gradient(#fdfdfd, #dfe3e8); border: 1px solid #5c6673; box-shadow: inset 1px 1px 0 #fff, 1px 1px 0 #9aa3ae; }
body.gov .m-menu a::before { content: none; }
body.gov .m-menu a b { flex: none; min-width: 30px; padding: 1px 4px; text-align: center; background: #1f3a6e; color: #fff; font-size: 13px; }
body.gov .m-menu a:hover, body.gov .m-menu a:focus-visible { background: #fff7c8; color: #111; outline: 2px solid #c8a13a; outline-offset: -2px; }
body.gov .m-body { gap: 16px; padding-bottom: 24px; }
body.gov .m-sec { padding: 0 14px 14px; background: #fff; border: 1px solid #6f7a88; border-radius: 0; box-shadow: 2px 2px 0 #aab2bc; scroll-margin-top: 10px; }
body.gov .m-head { margin: 0 -14px 14px; padding: 5px 12px; background: #1f3a6e; color: #fff; gap: 12px; }
body.gov .m-head h2 { font-size: 16px; letter-spacing: .06em; } body.gov .m-head h2::before { content: "■ "; color: #c8a13a; }
body.gov .floor { background: #fff; color: #1f3a6e; border-radius: 0; font-size: 12px; padding: 0 8px; }
body.gov .beta { margin-left: auto; padding: 0 8px; background: #fff; color: #a01818; border: 1px solid #a01818; font-size: 12px; }
body.gov .m-maps { padding: 10px; background: #f4f5f7; border: 1px solid #b4bbc4; }
body.gov .spot { border-radius: 0; } body.gov .spot b { font-size: 16px; }
body.gov .spot.ok { background: linear-gradient(#fffbe0, #f3dc8a); color: #111; border: 1px solid #7a6a1c; box-shadow: inset 1px 1px 0 #fff, 2px 2px 0 #8a8a8a; }
body.gov .spot.ok:hover { background: #fff; color: #111; transform: none; box-shadow: inset 1px 1px 0 #fff, 2px 2px 0 #1f3a6e; outline: 2px solid #1f3a6e; }
body.gov .spot.ok span { color: #0a5a2a; } body.gov .spot.ng { background: #e3e6ea; color: #7a838e; border: 1px solid #9aa3ae; }
body.gov .spot .new { border-radius: 0; background: #a01818; }
body.gov .desk-map .spot { border-radius: 0; } body.gov .desk-map .spot b { font-size: clamp(9px, 2.1cqw, 18px); }
body.gov .desk-map .spot.ok { box-shadow: inset 1px 1px 0 #fff, .3cqw .3cqw 0 #8a8a8a; } body.gov .desk-map .spot.ok:hover { transform: translate(-50%, -50%); box-shadow: inset 1px 1px 0 #fff, .3cqw .3cqw 0 #1f3a6e; }
body.gov .m-notes { padding: 8px 10px; background: #fff4f4; border: 1px solid #d9a0a0; color: #7a1414; font-size: 13px; }
body.gov .m-hint { color: #444; font-size: 12px; } body.gov .m-hint::before { content: "（注）"; }
body.gov .cal-box { border-radius: 0; border: 1px solid #6f7a88; }
body.gov .m-split img { border-radius: 0; border: 1px solid #b4bbc4; }
body.gov .btn { border-radius: 0; background: linear-gradient(#fdfdfd, #dfe3e8); color: #111; border: 1px solid #5c6673; box-shadow: inset 1px 1px 0 #fff, 2px 2px 0 #9aa3ae; font-weight: bold; }
body.gov .btn:hover { background: #fff7c8; color: #111; transform: none; box-shadow: inset 1px 1px 0 #fff, 2px 2px 0 #1f3a6e; }
@media (max-width: 720px) { .gov-name { font-size: 16px; } }
/* ---------- モニタ 06：ドロー。2000年ごろ（Mac OS 9 の時代）のベクターのお絵かきソフトふう：明るい灰色の部品、しま模様のタイトル、浮いた道具箱とパレット。動きは site/draw.js ---------- */
.mon.draw { display: flex; flex-direction: column; overflow: hidden; background: #8fa3bb; color: #000; font: 12px/1.3 "Osaka", "Charcoal", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif; user-select: none; -webkit-user-select: none; }
.dr-menu { flex: none; display: flex; align-items: center; gap: 15px; height: 22px; padding: 0 10px; background: #dedede; border-bottom: 1px solid #000; box-shadow: inset 0 1px 0 #fff; white-space: nowrap; overflow: hidden; font-weight: bold; }
.dr-logo { flex: none; display: grid; place-items: center; width: 20px; height: 16px; background: #ffe600; border: 1px solid #000; color: #000; font-weight: 800; font-size: 10px; letter-spacing: -.03em; }
.dr-clock { margin-left: auto; font-weight: normal; }
/* 上のメニュー：押すと下に開く。押せない項目は灰色 */
.dr-menu { gap: 0; } .dr-menu .dr-logo { margin-right: 8px; } .dr-menu .dr-clock { margin-right: 12px; }
.dr-m { height: 100%; padding: 0 8px; background: none; border: 0; color: #000; font: inherit; cursor: default; } .dr-m.on { background: #33339a; color: #fff; }
.dr-drop { position: absolute; z-index: 9000; min-width: 190px; padding: 2px 0; display: flex; flex-direction: column; background: #dedede; border: 1px solid #000; box-shadow: inset 1px 1px 0 #fff, 2px 3px 0 rgba(0,0,0,.4); font: 12px/1.3 "Osaka", "Charcoal", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif; }
.dr-drop button { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 2px 14px; padding: 2px 12px 2px 4px; background: none; border: 0; color: #000; font: inherit; text-align: left; cursor: default; white-space: nowrap; }
.dr-drop button i { font-style: normal; text-align: center; } .dr-drop kbd { font: inherit; color: inherit; }
.dr-drop button:not(:disabled):hover, .dr-drop button:not(:disabled):focus-visible { background: #33339a; color: #fff; outline: none; }
.dr-drop button:disabled { color: #9a9a9a; text-shadow: 1px 1px 0 #fff; }
.dr-drop hr { width: 100%; margin: 3px 0; border: 0; border-top: 1px solid #9a9a9a; border-bottom: 1px solid #fff; }
.dr-pal[hidden] { display: none; }
.dr-about { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 8000; width: min(380px, 90%); } .dr-about .dr-pbody { font-size: 12px; } .dr-about b { font-size: 14px; } .dr-about button { justify-self: end; min-width: 70px; }
.dr-desk { position: relative; }
.dr-gridrect { display: none; pointer-events: none; } .dr-art.grid .dr-gridrect { display: block; }
.dr-art.outline .dr-shapes > * { fill: none; stroke: #000; stroke-width: 1px; } .dr-art.outline .dr-shapes > text { fill: #000; stroke: none; }
.dr-menu .dr-x { flex: none; height: 17px; padding: 0 10px; background: #dedede; color: #000; border: 1px solid #000; border-radius: 3px; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #9a9a9a; font: inherit; font-weight: normal; cursor: pointer; }
.dr-desk { flex: 1; min-height: 0; display: grid; grid-template-columns: 58px minmax(0, 1fr) 172px; gap: 10px; padding: 10px; align-items: start; }
/* 浮いたパレット：しま模様のタイトル、左上に閉じる箱（飾り） */
.dr-pal { background: #dedede; border: 1px solid #000; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #9a9a9a, 2px 2px 0 rgba(0,0,0,.35); }
.dr-ptitle { position: relative; height: 13px; margin: 2px; background: repeating-linear-gradient(#fff 0 1px, #8a8a8a 1px 2px); }
.dr-ptitle i { position: absolute; left: 3px; top: 1px; width: 9px; height: 9px; background: #dedede; border: 1px solid #000; box-shadow: inset 1px 1px 0 #fff; }
.dr-tab { padding: 0 4px; border-bottom: 1px solid #8a8a8a; } .dr-tab span { display: inline-block; padding: 1px 10px 2px; background: #dedede; border: 1px solid #8a8a8a; border-bottom: 0; border-radius: 4px 4px 0 0; margin-bottom: -1px; font-size: 11px; }
.dr-pbody { display: grid; gap: 6px; padding: 8px; font-size: 11px; } .dr-pbody p { margin: 0; color: #444; line-height: 1.5; }
.dr-pbody label { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.dr-pbody select, .dr-pbody button { height: 20px; padding: 0 6px; background: #f4f4f4; color: #000; border: 1px solid #000; border-radius: 3px; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #9a9a9a; font: inherit; font-size: 11px; cursor: pointer; }
.dr-pbody select { flex: 1; min-width: 0; } .dr-pbody button:active { background: #9a9a9a; color: #fff; }
.dr-pals { display: grid; gap: 10px; max-height: 100%; overflow: auto; }
/* 道具箱：2列。下に、塗り（手前）と線（奥）の色の四角 */
.dr-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 2px 3px 4px; }
.dr-tools button { height: 26px; display: grid; place-items: center; background: #dedede; border: 1px solid #8a8a8a; box-shadow: inset 1px 1px 0 #fff; cursor: pointer; padding: 0; }
.dr-tools button[aria-pressed="true"] { background: #7a7a7a; box-shadow: inset 1px 1px 2px #000; } .dr-tools button[aria-pressed="true"] .dt { filter: invert(1); }
.dt { position: relative; width: 18px; height: 18px; display: block; }
.dt-select::before { content: ""; position: absolute; left: 4px; top: 1px; border: 7px solid transparent; border-left: 10px solid #000; border-right: 0; transform: rotate(60deg); }
.dt-pen::before { content: ""; position: absolute; left: 7px; top: 0; width: 5px; height: 12px; background: #000; clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); transform: rotate(35deg); transform-origin: 50% 100%; }
.dt-pen::after { content: ""; position: absolute; left: 1px; bottom: 0; width: 4px; height: 4px; background: #000; }
.dt-text::before { content: "T"; position: absolute; inset: 0; display: grid; place-items: center; font: bold 17px/1 "Times New Roman", serif; color: #000; }
.dt-line::before { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; background: #000; transform: rotate(-45deg); }
.dt-rect::before { content: ""; position: absolute; inset: 3px 1px; border: 2px solid #000; }
.dt-ellipse::before { content: ""; position: absolute; inset: 3px 1px; border: 2px solid #000; border-radius: 50%; }
.dr-sw { position: relative; height: 46px; margin: 4px 6px 8px; border-top: 1px solid #8a8a8a; }
.dr-sw label { position: absolute; width: 26px; height: 26px; border: 1px solid #000; background: #fff; overflow: hidden; cursor: pointer; }
.dr-sw .sw-fill { left: 2px; top: 6px; z-index: 1; } .dr-sw .sw-stroke { right: 2px; bottom: 0; }
.dr-sw .sw-stroke::after { content: ""; position: absolute; inset: 6px; background: #dedede; border: 1px solid #000; pointer-events: none; }
.dr-sw input { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); padding: 0; border: 0; cursor: pointer; }
.mon.draw.nofill .sw-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, #fff calc(50% - 1.5px), #e8112d calc(50% - 1.5px), #e8112d calc(50% + 1.5px), #fff calc(50% + 1.5px)); pointer-events: none; }
/* 書類の窓 */
.dr-doc { align-self: stretch; min-height: 0; display: flex; flex-direction: column; background: #dedede; border: 1px solid #000; box-shadow: inset 1px 1px 0 #fff, 2px 2px 0 rgba(0,0,0,.35); }
.dr-doctitle { flex: none; height: 17px; margin: 2px 3px; display: flex; justify-content: center; } .dr-doctitle i { top: 3px; }
.dr-doctitle span { padding: 0 10px; background: #dedede; font-size: 12px; line-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; margin: 0 3px; padding: 16px; overflow: hidden; background: #fff; border: 1px solid #000; }
.dr-art { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; background: #fff; outline: 1px solid #000; touch-action: none; cursor: crosshair; }
.dr-art[data-tool="select"] { cursor: default; } .dr-art[data-tool="select"] .dr-shapes > * { cursor: move; } .dr-art[data-tool="text"] { cursor: text; }
.dr-art text { white-space: pre; }
.dr-textin { position: absolute; z-index: 5; margin: 0; padding: 0 2px; min-width: 60px; border: 1px dashed #1e90ff; background: rgba(255,255,255,.85); color: #000; outline: none; line-height: 1.15; }
.dr-status { flex: none; display: flex; gap: 0; margin: 2px 3px 3px; font-size: 11px; white-space: nowrap; overflow: hidden; }
.dr-status span { padding: 1px 8px; border: 1px solid #8a8a8a; background: #f4f4f4; overflow: hidden; text-overflow: ellipsis; } .dr-zoom { flex: none; border-right: 0 !important; }
@media (max-width: 760px) { .dr-desk { grid-template-columns: 58px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; } .dr-pals { grid-column: 1 / -1; grid-auto-flow: column; grid-auto-columns: 170px; overflow-x: auto; } .dr-menu > span:not(.dr-logo):not(.dr-clock) { display: none; } }

/* =====================================================================================================
   スマートフォン用の調整（画面の幅が 760px 以下のときだけ）。
   ここより上の決まり（パソコンでの見た目）には手を入れず、スマホのときだけ、ここで上書きする。
   パソコンやタブレット（幅 761px 以上）では、この中の決まりはひとつも使われない。
   ===================================================================================================== */
@media (max-width: 760px) {
  /* --- デスクトップの画面（モニタ 01・02・05・09）：上から「バー → アイコン → 案内の窓 → 下の帯」の順に、縦に並べる。重ならない --- */
  .mon.desk { display: flex; flex-direction: column; overflow: hidden auto; }
  .mon.desk > .bar { position: sticky; top: 0; flex: none; z-index: 3; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .mon.desk > .bar::-webkit-scrollbar { display: none; }
  .mon.desk > .bar .mb { flex: none; }
  .mon.desk > .icons { position: static; flex: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-template-rows: none; grid-auto-flow: row; direction: ltr; gap: 16px 4px; padding: 16px 8px 8px; justify-items: center; align-items: start; }
  .mon.desk > .icons .icon { width: 100px; }
  .mon.desk > .win:not(.app) { position: static; transform: none; flex: none; width: auto; max-width: none; margin: 10px 12px 18px; }
  .mon.desk > .dock { position: sticky; bottom: 0; left: auto; right: auto; transform: none; flex: none; margin-top: auto; z-index: 3; }
  .mon.desk.osx > .dock { align-self: center; }
  .mon.desk.osx > .dock::before { content: none; }

  /* --- 開いた窓は、画面いっぱいに出す（小さな知らせの窓はのぞく）。動かせない --- */
  .mon .win.app:not(.app-note):not(.app-signin), .mon .win.app[data-href]:not(.app-note):not(.app-signin) { position: fixed; left: 0; top: 0; transform: none; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border-radius: 0; z-index: 50; }
  .mon .win.app .title { cursor: default; min-height: 30px; }
  .mon .win.app.app-movie { display: flex; flex-direction: column; justify-content: center; padding: 0 8px 10px; }
  .mon .win.app.app-movie video { max-height: calc(100vh - 120px); aspect-ratio: auto; }
  .mon .win.app.app-drive .app-body { aspect-ratio: auto; max-height: none; flex: 1; }
  .mon .win.app.app-game[data-href="/janken/"] { --h: 100%; }
  /* 閉じるボタンは、見た目はそのままで、押せる範囲だけ広げる */
  .mon .win.app .mon-close::after { content: ""; position: absolute; inset: -12px; }
  .mon:not(.osx) .win.app:not(.app-movie) .mon-close { position: relative; }

  /* --- メニュー：画面の幅からはみ出さない --- */
  .os-drop, .dr-drop { max-width: calc(100vw - 8px); max-height: 70vh; overflow-y: auto; }
  .os-drop button, .dr-drop button { padding-top: 7px; padding-bottom: 7px; }

  /* --- 描画ツール（モニタ 06）：メニューは横に流して選べるようにする。パレットは下に横ならび --- */
  .dr-menu { overflow-x: auto; scrollbar-width: none; } .dr-menu::-webkit-scrollbar { display: none; }
  .dr-menu > .dr-m { display: block; flex: none; }
  .dr-menu .dr-clock { display: none; }
  .dr-desk { gap: 6px; padding: 6px; }
  .dr-stage { padding: 8px; }

  /* --- 「パソコンで見るのがおすすめ」の一言（site/os.js が出す） --- */
  .pc-hint { position: fixed; left: 50%; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); width: max-content; transform: translateX(-50%); z-index: 9500; max-width: calc(100vw - 24px); padding: 8px 14px; border-radius: 999px; background: rgba(0,0,0,.78); color: #fff; font: 12px/1.4 "Hiragino Sans", "Yu Gothic", sans-serif; text-align: center; pointer-events: none; animation: pc-hint 5s ease forwards; }
}
@keyframes pc-hint { 0% { opacity: 0; } 8%, 80% { opacity: 1; } 100% { opacity: 0; } }