:root {
  color-scheme: dark;
  --ivory: #f2e7d3;
  --gold: #c7a565;
  --serif: "Yu Mincho", "Hiragino Mincho ProN", serif;
  --sans: "Hiragino Kaku Gothic ProN", sans-serif;
}
* { box-sizing: border-box; }
html { background: #100905; }
body {
  margin: 0;
  min-height: 100vh;
  background: #100905;
  color: var(--ivory);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}
/* 完成画像自体がUI。親の高さは画像の自然比率のみで決まる。 */
.entrance {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
}
.entrance-image {
  width: 100%;
  height: auto;
  max-width: 430px;
  margin: 0 auto;
  display: block;
}
.hotspot {
  position: absolute;
  display: block;
  z-index: 1;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* 941×1672の元画像の金枠外周を実測。x=69, y=1017, w=803, h=217 */
.hotspot-diagnosis {
  left: 7.332625%;
  top: 60.825359%;
  width: 85.334750%;
  height: 12.978469%;
}
/* x=70, y=1249, w=801, h=214 */
.hotspot-line {
  left: 7.438895%;
  top: 74.700957%;
  width: 85.122210%;
  height: 12.799043%;
}
.hotspot:focus-visible, button:focus-visible {
  outline: 2px solid var(--ivory);
  outline-offset: 3px;
}
/* URL未設定時のみ開く既存の案内。初期画面には表示しない。 */
dialog { width: min(352px, calc(100% - 40px)); padding: 28px 24px 24px; background: #261b16; color: var(--ivory); border: 1px solid var(--gold); border-radius: 4px; text-align: center; }
dialog::backdrop { background: #0c0806bf; }
.notice-kicker { color: var(--gold); margin: 0 0 16px; font-size: 14px; }
dialog h2 { font-size: 20px; font-weight: 400; margin: 0 0 16px; }
#notice-message { font-family: var(--sans); font-size: 14px; line-height: 1.9; margin: 0 0 24px; }
.notice-close { border: 1px solid var(--gold); border-radius: 2px; background: #3b2921; color: var(--ivory); min-height: 44px; width: 100%; font: inherit; cursor: pointer; }