@charset "UTF-8";
body {
  /* 主要なブラウザ */
  user-select: none;
  /* ベンダープレフィックス (互換性のため) */
  -webkit-user-select: none; /* Chrome, Safari, Opera */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
}

:root {
  --screen-w:1920px;
  --screen-h:1080px;
  --canvas-w:1408px;
  --canvas-h:768px;
  --canvas-left:256px;
  --canvas-top:233px;
  --wall-color:#217C42;
  --wall-thickness:8;
  --bg-color:#FFE2C5;
}

audio {
  display: none;
}

/*Chrome*/
::-webkit-scrollbar { /*縦方向スクロールバーの幅*/
  width: 0;
}

::-webkit-scrollbar:horizontal { /*横方向スクロールバーの高さ*/
  height: 0;
}

::-webkit-scrollbar-thumb { /*つまみの部分*/
  border-radius: 0;
  background: transparent;
}

::-webkit-scrollbar-thumb:hover { /*マウスホバー時*/
  background: transparent;
}

/********************
header
*********************/
header {
  display: flex;
  justify-content: space-between;
  width: 1778px;
  margin: 0 auto;
  padding-top: 28px;
  position: relative;
  z-index: 2000;
}
header .logo {
  display: flex;
  align-items: center;
  pointer-events: none;
  /*選択反転させない*/
  /* 主要なブラウザ */
  user-select: none;
  /* 過去のSafari/Chromeのベンダープレフィックス */
  -webkit-user-select: none;
  /* 過去のFirefoxのベンダープレフィックス */
  -moz-user-select: none;
  /* 過去のIE/Edgeのベンダープレフィックス */
  -ms-user-select: none;
}
header .logo p {
  color: #217C42;
  font-size: 40px;
  font-weight: 900;
  padding-left: 0.7em;
  /*選択反転させない*/
  /* 主要なブラウザ */
  user-select: none;
  /* 過去のSafari/Chromeのベンダープレフィックス */
  -webkit-user-select: none;
  /* 過去のFirefoxのベンダープレフィックス */
  -moz-user-select: none;
  /* 過去のIE/Edgeのベンダープレフィックス */
  -ms-user-select: none;
}
header .btns {
  padding-top: 12px;
}
header .btns img {
  margin-left: 18px;
}
header .btns img:first-of-type {
  margin-left: 0;
}
header .btns img.hintBtn_on {
  display: none;
}
header .btns.hintOn img.hintBtn_off {
  display: none;
}
header .btns.hintOn img.hintBtn_on {
  display: inline;
}

#page_wrapper {
  width: min(100%, 1920px);
  height: min(100dvh, 56.25vw);
  min-height: 600px;
  margin: 0 auto;
  position: relative;
  background-image: url(img/bg.png);
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  overflow: hidden;
}
#page_wrapper #title {
  width: 890px;
  position: absolute;
  top: 24%;
  left: 50%;
  transform: translateX(-50%);
  display: none;
}
#page_wrapper #title.show {
  display: block;
}
#page_wrapper #title ul {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 496px;
  width: 100%;
}
#page_wrapper #title ul li {
  margin: 0 14px;
}

body {
  margin: 0;
  padding: 0;
  background: #8dcae8;
  width: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
}

canvas {
  position: absolute;
  left: 256px;
  top: 233px;
  background: #FFE2C5;
}

/* Controls */
/*#controls{position:absolute; left:var(--canvas-left); top:calc(var(--canvas-top) - 90px); width:var(--canvas-w); height:64px; display:flex; gap:12px; align-items:center; z-index:1000;} */
#controls button {
  padding: 10px 16px;
  border-radius: 8px;
  border: 2px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  font-weight: 600;
}

/* Page wrapper and canvas placement requested */
.page_wrapper {
  position: relative;
  width: min(100%, 1920px);
  height: min(100dvh, 56.25vw);
  min-height: 600px;
  z-index: 0;
}

canvas#mazeCanvas {
  z-index: 10;
}

canvas#mazeCanvas {
  position: absolute;
  left: 13.3333%;
  top: 21.5741%;
  width: 73.3333%;
  height: 71.1111%;
  background: var(--bg-color);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  border-radius: 6px;
}

/* status */
.status {
  position: absolute;
  left: var(--canvas-left);
  top: calc(var(--canvas-top) + var(--canvas-h) + 12px);
  width: var(--canvas-w);
  color: #222;
}

.no-select {
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

/*
mycode
*/
body.home header .btns {
  display: none;
}
body.home header .crrLevel {
  display: none;
}
body.home canvas {
  opacity: 0;
  visibility: hidden;
}
body.home .tip_goal, body.home .tip_start {
  opacity: 0;
  visibility: hidden;
}
body.home .nav {
  opacity: 0;
  visibility: hidden;
}

#title {
  width: 890px;
  position: absolute;
  top: 24%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5000;
}
#title ul {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 496px;
  width: 100%;
}
#title ul li {
  margin: 0 14px;
}

#timer {
  opacity: 0;
}

.crrLevel {
  position: fixed;
  top: 37px;
  left: 786px;
}
.crrLevel img {
  display: none;
}
.crrLevel.easy img.easy {
  display: inline-block;
}
.crrLevel.normal img.normal {
  display: inline-block;
}
.crrLevel.hard img.hard {
  display: inline-block;
}

.nav {
  position: absolute;
  left: 519px;
  top: 175px;
}

.tip_start {
  position: absolute;
  left: 112px;
  top: 233px;
}

.tip_goal {
  position: absolute;
  left: 1655px;
  top: 935px;
}

/********************
.modal
*********************/
#modal {
  background: rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-property: opacity;
  transition-duration: 0.3s;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#modal div {
  width: 890px;
  height: 680px;
  position: relative;
}
#modal div img {
  position: relative;
  z-index: 0;
}
#modal div span.m {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 38px;
  letter-spacing: 0.07em;
  text-align: center;
  position: absolute;
  top: 242px;
  width: 100%;
  text-align: center;
  left: 0;
  color: #fff;
  pointer-events: none;
}
#modal div span.t {
  font-family: "Roboto Flex", sans-serif;
  font-weight: 700;
  font-size: 82px;
  text-align: center;
  position: absolute;
  top: 330px;
  width: 100%;
  left: 0;
  color: #217C42;
  pointer-events: none;
}
#modal div ul {
  position: absolute;
  top: 476px;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
#modal div ul li {
  margin: 0 16px 24px;
}
#modal.show {
  opacity: 1;
  visibility: visible;
  top: 0;
  pointer-events: all;
}/*# sourceMappingURL=game.css.map */

#logoLink{
   /*position: fixed;      画面左上に固定 */
  top: 20px;
  left: 20px;
  z-index: 99999;       /* 何より前に */
  pointer-events: auto; /* 念のため */
}
#logoLink img{
  display:block;
  -webkit-user-drag: none;
  user-select: none;
}


.top2 {
  margin-top: -50px;
}

@media (min-width: 701px) {
  header {
    width: 92.6042%;
  }

  .crrLevel {
    left: 40.9375%;
  }

  .nav {
    left: 27.03125%;
    top: 16.2037%;
  }

  .tip_start {
    left: 5.8333%;
    top: 21.5741%;
  }

  .tip_goal {
    left: 86.1979%;
    top: 86.5741%;
  }
}

@media (max-width: 700px) {
  body {
    min-height: 100dvh;
    overflow-y: auto;
  }

  #page_wrapper,
  .page_wrapper {
    width: 100%;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    background-size: auto 100%;
  }

  header {
    width: 100%;
    box-sizing: border-box;
    padding: max(10px, env(safe-area-inset-top)) 12px 0;
    align-items: flex-start;
    gap: 8px;
  }

  header .logo {
    min-width: 0;
  }

  header .logo img {
    width: 72px;
    height: auto;
  }

  header .logo p {
    font-size: clamp(16px, 4.5vw, 24px);
    line-height: 1.2;
    padding-left: 0.35em;
    white-space: nowrap;
  }

  header .btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    padding-top: 0;
  }

  header .btns img {
    width: clamp(34px, 10vw, 48px);
    height: auto;
    margin-left: 0;
  }

  .crrLevel {
    top: 58px;
    left: 12px;
  }

  .crrLevel img {
    width: min(150px, 40vw);
    height: auto;
  }

  canvas#mazeCanvas {
    position: relative;
    left: auto;
    top: auto;
    display: block;
    width: calc(100% - 24px);
    height: auto;
    aspect-ratio: 1408 / 768;
    margin: 92px 12px 0;
    border-radius: 4px;
  }

  .nav,
  .tip_start,
  .tip_goal {
    display: none;
  }

  #page_wrapper #title {
    width: min(890px, calc(100% - 24px));
    top: 24px;
  }

  #title > img {
    display: block;
    width: 100%;
    height: auto;
  }

  #title ul {
    top: 55.7%;
    padding: 0 4px;
    box-sizing: border-box;
  }

  #title ul li {
    width: 31%;
    margin: 0 1%;
  }

  #title ul li img {
    display: block;
    width: 100%;
    height: auto;
  }

  #modal {
    position: fixed;
    min-height: 100dvh;
  }

  #modal div {
    width: min(890px, calc(100vw - 24px));
    height: auto;
  }

  #modal div > img.bg {
    display: block;
    width: 100%;
    height: auto;
  }

  #modal div span.m {
    top: 29.8%;
    font-size: clamp(13px, 3.5vw, 24px);
  }

  #modal div span.t {
    top: 40.7%;
    font-size: clamp(34px, 10vw, 64px);
  }

  #modal div ul {
    top: 58.5%;
    padding: 0 4%;
    box-sizing: border-box;
  }

  #modal div ul li {
    width: 28%;
    margin: 0 2% 12px;
  }

  #modal div ul li img {
    display: block;
    width: 100%;
    height: auto;
  }

  .status {
    display: none;
  }
}

@media (min-width: 701px) and (max-width: 1400px) {
  #page_wrapper,
  .page_wrapper {
    min-height: 680px;
  }

  header {
    width: calc(100% - 32px);
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 16px;
    align-content: flex-start;
  }

  header .logo {
    width: 100%;
    justify-content: center;
    order: 1;
  }

  header .logo img {
    width: clamp(150px, 24vw, 300px);
    height: auto;
  }

  header .logo p {
    font-size: clamp(22px, 3.2vw, 40px);
  }

  header .btns {
    display: flex;
    width: 100%;
    order: 3;
    justify-content: center;
    gap: 8px;
    padding-top: 10px;
  }

  header .btns img {
    width: clamp(90px, 14vw, 203px);
    height: auto;
    margin-left: 0;
  }

  .crrLevel {
    position: static;
    order: 2;
    width: 100%;
    padding-top: 8px;
    text-align: center;
    transform: none;
  }

  .crrLevel img {
    width: clamp(150px, 20vw, 260px);
    height: auto;
  }

  canvas#mazeCanvas {
    top: 38%;
    height: 58%;
  }

  .nav,
  .tip_start,
  .tip_goal {
    display: none;
  }

  #page_wrapper #title {
    top: 12px;
    width: min(890px, calc(100vw - 32px), calc((100dvh - 24px) * 1.3088));
  }

  #page_wrapper #title > img {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* Fit the original 1920 x 1080 game scene as a single unit. */
:root {
  --game-scale: 1;
  --game-offset-x: 0px;
  --game-offset-y: 0px;
}

html,
body {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
}

.game-viewport {
  position: fixed;
  top: var(--game-offset-y);
  left: var(--game-offset-x);
  width: 0;
  height: 0;
}

.game-stage {
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(var(--game-scale));
  transform-origin: top left;
}

#page_wrapper,
.page_wrapper {
  width: 1920px;
  height: 1080px;
  min-height: 0;
  margin: 0;
  position: relative;
  top: auto;
  left: auto;
  overflow: hidden;
  transform: none;
}

header {
  width: 1778px;
  padding-top: 28px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

header .logo,
header .btns,
.crrLevel {
  order: initial;
}

header .logo {
  flex: 0 0 auto;
  width: auto;
  justify-content: flex-start;
}

header .logo img,
header .btns img,
.crrLevel img {
  width: auto;
  height: auto;
}

header .btns {
  display: block;
  flex: 0 0 645px;
  width: 645px;
  padding-top: 12px;
  white-space: nowrap;
}

header .btns img {
  margin-left: 18px;
}

header .btns img:first-of-type {
  margin-left: 0;
}

.crrLevel {
  position: absolute;
  top: 9px;
  left: 715px;
  width: auto;
  padding: 0;
  text-align: left;
  transform: none;
}

canvas#mazeCanvas {
  position: absolute;
  left: 256px;
  top: 233px;
  width: 1408px;
  height: 768px;
}

.nav {
  display: block;
  left: 519px;
  top: 175px;
}

.tip_start {
  display: block;
  left: 112px;
  top: 233px;
}

.tip_goal {
  display: block;
  left: 1655px;
  top: 935px;
}

#page_wrapper #title {
  width: 890px;
  top: 24%;
}

#page_wrapper #title > img {
  display: inline;
  width: auto;
  height: auto;
}

#page_wrapper #title ul {
  top: 496px;
  padding: 0;
  box-sizing: content-box;
}

#page_wrapper #title ul li {
  width: auto;
  margin: 0 14px;
}

#modal {
  position: absolute;
  min-height: 0;
}

#modal div {
  width: 890px;
  height: 680px;
}

#modal div > img.bg,
#modal div ul li img {
  display: inline;
  width: auto;
  height: auto;
}