@import url(https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons+Sharp);
@import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanjp-noto.min.css);
:root {
  --background-color: #eee;
  --section-color: #fff;
  --section-shadow-color: #ddd;
  --theme-color: #aa4f00;
  --theme-color-light: #d46300; /* theme-color brightness(1.25) */
  --theme-color-dark: #904300; /* theme-color brightness(.85) */
  --twitter-theme-color: #1da1f2;
  --youtube-theme-color: #f00;
  --levelpalace-theme-color: #00b0ff;
  --peing-theme-color: #5ebaba;
  --text-color: #222;
  --link-color: #06f;
  --scrollbar-corner-color: var(--background-color);
  --scrollbar-track-color: #ddd;
  --scrollbar-thumb-color: #bbb;
  --scrollbar-thumb-hover-color: #aaa;
  --gray: var(--scrollbar-thumb-color);
  --red: #e00;
  --green: #0a0;
  --cyan: #0af;
  --magenta: #f4f;
  --yellow: #f90;
  --size-xxs: 4px; /* m * .25 */
  --size-xs: 8px; /* m * .5 */
  --size-s: 12px; /* m * .75 */
  --size-m: 16px;
  --size-l: 24px; /* m * 1.5 */
  --size-xl: 32px; /* m * 2 */
  --size-xxl: 48px; /* m * 3 */
  --border-size: 2px;
  --icon-size-s: 18px;
  --icon-size-l: 24px;
  --card-width: 248px;
  --inline-card-width: 180px;
  --card-margin-width: var(--size-l);
  --transition-time: .25s;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #111;
    --section-color: #222;
    --section-shadow-color: #000;
    --text-color: #ddd;
    --scrollbar-track-color: #333;
    --scrollbar-thumb-color: #555;
    --scrollbar-thumb-hover-color: #666;
  }
}
/* ---------------------------------------------------------------- */
/* default */
* {
  margin: 0;
  padding: 0;
}
body {
  background: var(--background-color);
  color: var(--text-color);
  font: 16px/1.6 yakuhanjp_noto, "noto sans jp", sans-serif;
  overflow-y: scroll;
}
header {
  background: var(--theme-color);
  box-sizing: border-box;
  min-width: 320px;
  overflow: hidden;
}
code {
  border-left: var(--border-size) solid var(--gray);
  box-shadow: 0 0 var(--size-xs) var(--section-shadow-color);
  display: block;
  font: inherit;
  padding: var(--size-m);
  white-space: pre-wrap;
}
button {
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  outline: none;
}
img {
  vertical-align: middle;
}
audio {
  display: block;
  width: 100%;
}
/* ---------------------------------------------------------------- */
/* normal */
.normal-h2,
.normal-h3 {
  font-size: var(--size-l);
  font-weight: normal;
}
.normal-h2 {
  border-bottom: var(--border-size) solid var(--theme-color);
  margin: 0 calc(0px - var(--size-l));
  padding: var(--size-xl) var(--size-l);
}
.normal-a {
  color: var(--link-color);
  outline: none;
  text-decoration: none; /* for edgehtml */
  text-decoration: underline transparent;
}
.normal-a:hover,
.normal-a:focus {
  text-decoration: underline; /* for edgehtml */
  text-decoration-color: var(--link-color);
}
.normal-a[href^='//']::after {
  content: '\e879'; /* exit_to_app */
  display: inline-block;
  font-size: var(--icon-size-s);
  height: var(--icon-size-s);
  opacity: .9;
  padding-left: 2px;
  width: var(--icon-size-s);
}
.normal-img {
  display: block;
  height: auto;
  max-width: 100%;
}
.normal-button {
  align-items: center;
  border: var(--border-size) solid;
  color: var(--theme-color);
  display: flex;
  justify-content: center;
  padding: var(--size-s) var(--size-m);
}
.normal-button:not(:disabled):hover,
.normal-button:not(:disabled):focus {
  --cover-box-shadow-color: var(--theme-color);
}
.normal-button:disabled {
  --cover-box-shadow-color: var(--gray);
  color: var(--gray);
  cursor: default;
}
.normal-button:not(:disabled):hover::after,
.normal-button:not(:disabled):focus::after {
  background: var(--theme-color);
}
.normal-button:disabled::after {
  background: var(--gray);
}
/* ---------------------------------------------------------------- */
/* material icons */
.icon-box::before,
.normal-a[href^='//']::after {
  font-family: 'material icons sharp';
  font-feature-settings: 'liga'; /* for edgehtml */
  line-height: 1;
  overflow: hidden;
}
.icon-box::before {
  font-size: var(--icon-size-l);
  height: var(--icon-size-l);
  transition-property: none; /* for chromium */
  width: var(--icon-size-l);
}
/* ---------------------------------------------------------------- */
/* cover */
.cover {
  --cover-box-shadow-color: transparent;
  box-shadow: 0 0 var(--size-xs) var(--cover-box-shadow-color);
  position: relative;
}
.cover::after {
  bottom: 0;
  content: '';
  display: block;
  margin: calc(0px - var(--border-size));
  left: 0;
  opacity: .5;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}
/* ---------------------------------------------------------------- */
/* page */
.page-wrapper {
  padding: 0 var(--size-s);
}
.page {
  width: calc(var(--size-l) * 2 + var(--card-width) * 3 + var(--card-margin-width) * 2);
}
.grid2 .page {
  width: calc(var(--size-l) * 2 + var(--card-width) * 2 + var(--card-margin-width));
}
.grid1 .page {
  width: calc(var(--size-l) * 2 + var(--card-width));
}
/* ---------------------------------------------------------------- */
/* header */
.header-noscript-warning-wrapper {
  background: var(--yellow);
  color: var(--theme-color);
  margin: 0 calc(0px - var(--size-s));
}
.header-noscript-warning {
  display: flex;
  font-weight: normal;
  margin: 0 auto;
  padding: var(--size-s);
}
.logo-wrapper {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  font-size: 36px;
  font-weight: normal;
  line-height: var(--size-xl);
  margin: 0 var(--size-s) 0 0;
  user-select: none;
}
.grid2 .logo-wrapper,
.grid1 .logo-wrapper {
  margin: 0 0 var(--size-xl);
}
.logo {
  background: var(--background-color);
  color: var(--theme-color);
  display: block;
  outline: 3px solid transparent;
  outline-offset: -7px;
  padding: var(--size-xl) var(--size-l);
  text-decoration: none;
}
.logo:hover,
.logo:focus {
  outline-color: var(--theme-color);
}
.logo-text {
  align-items: center;
  display: flex;
  margin-right: 2px;
}
.logo-text::before {
  content: url(favicon.ico);
  height: 48px;
  margin-right: 6px;
  width: 48px;
}
.header-main {
  display: flex;
  margin: 0 auto;
}
.grid2 .header-main,
.grid1 .header-main {
  align-items: center;
  flex-direction: column;
}
.header-nav {
  flex-grow: 2;
}
.header-tab-container {
  align-items: flex-end;
  display: flex;
  height: 100%;
  justify-content: flex-end;
  list-style: none;
  margin: 0 calc(0px - var(--size-s) / 2);
}
.grid1 .header-tab-container {
  align-items: stretch;
}
.header-tab-wrapper {
  margin: 0 calc(var(--size-s) / 2);
}
.grid3 .header-tab-wrapper {
  width: 200px;
}
.grid2 .header-tab-wrapper {
  width: 160px;
}
.grid1 .header-tab-wrapper {
  display: flex;
}
.header-tab {
  align-items: center;
  border: var(--border-size) solid;
  border-bottom: none;
  display: flex;
  line-height: var(--icon-size-l);
  outline: none;
  padding: calc(var(--size-m) + var(--size-xxs) - var(--border-size) / 2);
  text-decoration: none;
}
.grid1 .header-tab {
  flex-direction: column;
}
.header-tab-active {
  background: var(--background-color);
  border-color: var(--background-color);
  color: var(--theme-color);
}
.header-tab-inactive {
  color: var(--background-color);
}
.header-tab-inactive:hover,
.header-tab-inactive:focus {
  --cover-box-shadow-color: var(--theme-color-dark);
  background: var(--theme-color-light);
}
.header-tab-games::before {
  content: '\e021'; /* games */
}
.header-tab-levels::before {
  content: '\e885'; /* grade */
}
.header-tab-documents::before {
  content: '\e02f'; /* library_books */
}
.header-tab-text {
  margin: 0 var(--size-xxs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grid1 .header-tab-text {
  margin: var(--size-xs) 0 var(--size-xxs);
  writing-mode: vertical-rl;
}
/* ---------------------------------------------------------------- */
/* section */
.section1 {
  background: var(--section-color);
  box-shadow: 0 0 var(--size-xs) var(--section-shadow-color);
  box-sizing: border-box;
  margin: var(--size-xl) auto;
  padding: 0 var(--size-l) var(--size-xxl);
}
.section2,
.block1 {
  margin-top: var(--size-xxl);
}
.section2 + .section2::before {
  background: var(--section-shadow-color);
  content: '';
  display: block;
  height: var(--border-size);
  margin: 0 calc(0px - var(--size-l)) var(--size-xxl);
  width: calc(100% + var(--size-l) * 2);
}
.block2 {
  margin-top: var(--size-l);
}
/* ---------------------------------------------------------------- */
/* details */
.details:not(.details-open) {
  margin-bottom: calc(0px - var(--size-xxl));
}
.summary {
  cursor: pointer;
  display: block;
  margin: 0 calc(0px - var(--size-l));
  outline: none;
}
.summary::-webkit-details-marker {
  display: none;
}
.summary-h2 {
  font-size: var(--size-l);
  font-weight: normal;
  padding: var(--size-xl) calc(var(--size-m) + var(--size-l) * 2 + 3px * 2) var(--size-xl) var(--size-l);
  position: relative;
  transition-property: text-decoration;
  text-decoration: none; /* for edgehtml */
  text-decoration: underline transparent;
}
.summary:hover .summary-h2,
.summary:focus .summary-h2 {
  text-decoration: underline; /* for edgehtml */
  text-decoration-color: var(--text-color);
}
.details-open .summary-h2 {
  border-bottom: var(--border-size) solid var(--theme-color);
}
.summary-h2::after {
  border-right: var(--border-size) solid;
  border-bottom: var(--border-size) solid;
  box-sizing: border-box;
  content: '';
  height: var(--size-m);
  position: absolute;
  top: calc(50% - var(--size-m) / 1.3);
  transform: rotate(45deg);
  right: calc(var(--size-l) + 3px);
  transition-property: border-color;
  width: var(--size-m);
}
.summary:not(:hover):not(:focus) .summary-h2::after {
  border-color: var(--gray);
}
.details-open .summary-h2::after {
  top: calc(50% - var(--size-s) / 3);
  transform: rotate(225deg);
}
/* ---------------------------------------------------------------- */
/* list */
.list-item {
  margin-top: var(--size-xxs);
}
.marker {
  list-style: none;
  margin-left: calc(var(--size-xs) * 2 + var(--size-xxs));
  position: relative;
}
.marker::before {
  background: var(--theme-color);
  border-radius: 50%;
  top: 1ex;
  content: '';
  display: block;
  height: var(--size-xs);
  margin-left: calc(0px - var(--size-m));
  position: absolute;
  width: var(--size-xs);
}
.nomarker {
  list-style: none;
}
.inline {
  display: inline;
}
.delimiter::after {
  content: ' / ';
}
.colon::after {
  content: ' : ';
}
/* ---------------------------------------------------------------- */
/* card */
.card-container,
.inline-card-container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: calc(0px - var(--size-l));
  margin-left: calc(0px - var(--size-s));
  margin-right: calc(0px - var(--size-s));
}
.card-wrapper,
.inline-card-wrapper {
  margin: 0 var(--size-s) var(--size-l);
}
.card-wrapper {
  width: var(--card-width);
  display: block;
}
.inline-card-wrapper {
  display: block;
}
.card {
  border: var(--border-size) solid var(--link-color);
  box-sizing: border-box;
  color: var(--link-color);
  display: flex;
  flex-direction: column;
  height: 100%;
  outline: none;
  text-decoration: none;
}
.card:hover,
.card:focus {
  --cover-box-shadow-color: var(--link-color);
}
.card:hover::after,
.card:focus::after {
  background: var(--link-color);
}
.card-text {
  align-items: center;
  border-top: var(--border-size) solid;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-grow: 2;
  justify-content: center;
  min-height: calc(var(--size-l) * 3);
  padding: var(--size-xs);
  text-align: center;
}
.card-img {
  margin: var(--border-size);
}
.inline-card {
  align-items: center;
  border: var(--border-size) solid;
  box-sizing: border-box;
  display: flex;
  height: 100%;
  min-height: var(--size-xxl);
  outline: none;
  padding: var(--size-xs) var(--size-s) var(--size-xs) calc(var(--size-xxl) + var(--size-s) - var(--border-size));
  text-decoration: none;
  transition-property: box-shadow;
  width: var(--inline-card-width);
}
.grid2 .inline-card,
.grid1 .inline-card {
  width: var(--card-width);
}
.inline-card::before {
  background-position: center;
  background-repeat: no-repeat;
  bottom: 0;
  content: '';
  left: 0;
  padding: 0 var(--size-s) 0 calc(var(--size-s) - var(--border-size));
  position: absolute;
  top: 0;
  width: var(--icon-size-l);
}
.inline-card-twitter {
  color: var(--twitter-theme-color);
}
.inline-card-twitter:hover,
.inline-card-twitter:focus {
  --cover-box-shadow-color: var(--twitter-theme-color);
}
.inline-card-twitter::before {
  background-color: var(--twitter-theme-color);
  background-image: url(logo-twitter.png);
}
.inline-card-twitter:hover::after,
.inline-card-twitter:focus::after {
  background: var(--twitter-theme-color);
}
.inline-card-youtube {
  color: var(--youtube-theme-color);
}
.inline-card-youtube:hover,
.inline-card-youtube:focus {
  --cover-box-shadow-color: var(--youtube-theme-color);
}
.inline-card-youtube::before {
  background-color: var(--youtube-theme-color);
  background-image: url(logo-youtube.png);
}
.inline-card-youtube:hover::after,
.inline-card-youtube:focus::after {
  background: var(--youtube-theme-color);
}
.inline-card-peing {
  color: var(--peing-theme-color);
}
.inline-card-peing:hover,
.inline-card-peing:focus {
  --cover-box-shadow-color: var(--peing-theme-color);
}
.inline-card-peing::before {
  background-color: var(--peing-theme-color);
  background-image: url(logo-peing.png);
}
.inline-card-peing:hover::after,
.inline-card-peing:focus::after {
  background: var(--peing-theme-color);
}
.inline-card-levelpalace {
  color: var(--levelpalace-theme-color);
}
.inline-card-levelpalace:hover,
.inline-card-levelpalace:focus {
  --cover-box-shadow-color: var(--levelpalace-theme-color);
}
.inline-card-levelpalace::before {
  background-color: var(--levelpalace-theme-color);
  background-image: url(logo-levelpalace.png);
}
.inline-card-levelpalace:hover::after,
.inline-card-levelpalace:focus::after {
  background: var(--levelpalace-theme-color);
}
/* ---------------------------------------------------------------- */
/* checkbox */
.checkbox {
  color: inherit;
  position: relative;
  padding-left: calc(40px + var(--size-xs));
  text-align: left;
  text-decoration: none; /* for edgehtml */
  text-decoration: underline transparent;
}
.checkbox:hover,
.checkbox:focus {
  text-decoration: underline; /* for edgehtml */
  text-decoration-color: var(--text-color);
}
.checkbox::before,
.checkbox::after {
  content: '';
  position: absolute;
  transition-duration: var(--transition-time);
  transition-timing-function: cubic-bezier(0, 0, .1, 1);
}
@media (prefers-reduced-motion: reduce) {
  .checkbox::before,
  .checkbox::after {
    transition-duration: 0s;
  }
}
.checkbox::before {
  border: var(--border-size) solid var(--gray);
  border-radius: 10px;
  box-sizing: border-box;
  height: 20px;
  left: 0;
  top: 3px;
  width: 40px;
}
.checkbox::after {
  background: var(--gray);
  border-radius: 50%;
  height: var(--size-s);
  left: 4px;
  top: 7px;
  width: var(--size-s);
}
.checkbox-checked::before {
  border-color: var(--theme-color);
}
.checkbox-checked::after {
  background: var(--theme-color);
  left: var(--size-l);
}
/* ---------------------------------------------------------------- */
/* color */
.gray {
  color: var(--gray);
}
.red {
  color: var(--red);
}
.green {
  color: var(--green);
}
.cyan {
  color: var(--cyan);
}
.magenta {
  color: var(--magenta);
}
.yellow {
  color: var(--yellow);
}
/* ---------------------------------------------------------------- */
/* games */
#game-wrapper {
  background: #fff;
  box-shadow: 0 0 var(--size-xs) var(--section-shadow-color);
  height: 480px;
  margin: var(--size-xl) auto;
  width: 640px;
}
.grid2 #game-wrapper,
.grid2 #game {
  height: 240px;
  width: 320px;
}
.grid1 #game-wrapper,
.grid1 #game {
  height: 222px;
  width: 296px;
}
#game {
  display: block;
  height: 480px;
  width: 640px;
}
.level-code-wrapper {
  display: flex;
}
.grid1 .level-code-wrapper {
  flex-direction: column-reverse;
}
.level-code-box {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 186px;
  margin: 0 var(--size-l) 0 0;
}
.grid1 .level-code-box {
  margin: var(--size-l) 0 0;
}
#level-code {
  background: var(--background-color);
  border: none;
  box-shadow: 0 0 var(--size-xs) var(--section-shadow-color) inset;
  color: var(--gray);
  flex-grow: 1;
  font: inherit;
  outline: none;
  padding: var(--size-s);
  resize: none;
}
#level-code:hover,
#level-code:focus {
  color: var(--text-color);
  border-color: var(--text-color);
}
#level-code-copy-button {
  margin-top: var(--size-m);
}
#level-code-copy-button::before {
  content: '\e173'; /* file_copy */
  margin-right: var(--size-xxs);
}
#level-code-copy-button:disabled::before {
  content: '\e5ca'; /* check */
}
.br2 {
  filter: brightness(2);
}
.co2 {
  filter: contrast(2);
}
.gr1 {
  filter: grayscale(1);
}
.hu45 {
  filter: hue-rotate(45deg);
}
.hu90 {
  filter: hue-rotate(90deg);
}
.hu180 {
  filter: hue-rotate(180deg);
}
.hu270 {
  filter: hue-rotate(270deg);
}
.in1 {
  filter: invert(1);
}
.in1gr1 {
  filter: invert(1) grayscale(1);
}
.in1se1 {
  filter: invert(1) sepia(1);
}
.in1hu45 {
  filter: invert(1) hue-rotate(45deg);
}
.in1hu90 {
  filter: invert(1) hue-rotate(90deg);
}
.in1hu180 {
  filter: invert(1) hue-rotate(180deg);
}
.in1hu270 {
  filter: invert(1) hue-rotate(270deg);
}
.sa2 {
  filter: saturate(2);
}
.se1 {
  filter: sepia(1);
}
.se1hu45 {
  filter: sepia(1) hue-rotate(45deg);
}
.se1hu90 {
  filter: sepia(1) hue-rotate(90deg);
}
.se1hu180 {
  filter: sepia(1) hue-rotate(180deg);
}
.se1hu270 {
  filter: sepia(1) hue-rotate(270deg);
}
.retro {
  filter: sepia(.8);
}
.neon {
  filter: sepia(1) invert(1) saturate(2) hue-rotate(45deg);
}
.gameboy {
  filter: brightness(.8) contrast(.8) sepia(1) hue-rotate(38deg) saturate(4);
}
/* ---------------------------------------------------------------- */
/* levels */
.d::before {
  color: rgba(255, 255, 255, .75);
  font-size: 12px;
  line-height: 1;
  padding: 6px;
  position: absolute;
  right: 4px;
  top: 4px;
}
.d1::before {
  background: #4d4;
  content: 'Easy';
}
.d2::before {
  background: #44d;
  content: 'Medium';
}
.d3::before {
  background: #d44;
  content: 'Hard';
}
.d4::before {
  background: #444;
  content: 'Extreme';
}
/* ---------------------------------------------------------------- */
/* documents */
.map-box-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(0px - var(--size-xs));
  margin-right: calc(0px - var(--size-xs));
}
.map-box {
  margin: 0 var(--size-xs);
}
.map-image-container {
  margin: 0 var(--size-xs);
  overflow: scroll;
}
.map-image {
  height: 240px;
  width: 320px;
}
.smf2bg1 {
  background-image: url(documents/smf2-code/bg1.png);
}
.smf2bg3 {
  background-image: url(documents/smf2-code/bg3.png);
}
.smf2bg4 {
  background-image: url(documents/smf2-code/bg4.png);
}
.smf2bg5 {
  background-image: url(documents/smf2-code/bg5.png);
}
.smf2bg6 {
  background-image: url(documents/smf2-code/bg6.png);
}
.smf2bg7 {
  background-image: url(documents/smf2-code/bg7.png);
}
.smf2bg8 {
  background-image: url(documents/smf2-code/bg8.png);
}
.smf2bg9 {
  background-image: url(documents/smf2-code/bg9.png);
}
.smf1bg1 {
  background-image: url(documents/smf-code/bg1.png);
}
.smf1bg2 {
  background-image: url(documents/smf-code/bg2.png);
}
.smf1bg3 {
  background-image: url(documents/smf-code/bg3.png);
}
.smf1bg4 {
  background-image: url(documents/smf-code/bg4.png);
}
/* ---------------------------------------------------------------- */
/* transition */
.transition:not(:hover):not(:focus),
.transition:not(:hover):not(:focus)::before,
.transition:not(:hover):not(:focus)::after {
  transition-duration: var(--transition-time);
}
@media (prefers-reduced-motion: reduce) {
  .transition:not(:hover):not(:focus),
  .transition:not(:hover):not(:focus)::before,
  .transition:not(:hover):not(:focus)::after {
    transition-duration: 0s;
  }
}
/* ---------------------------------------------------------------- */
/* scrollbar */
::-webkit-scrollbar {
  height: var(--size-m);
  width: var(--size-m);
}
::-webkit-scrollbar-corner {
  background: var(--scrollbar-corner-color);
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color);
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-color);
}