@charset "utf-8";

@font-face {
  font-family: 'q2font';
  src: url('../k037/mirak037.woff2') format('woff2');
}

:root {
  --bg-color: black;
  --box-color: #f3ecd8e1;
  --font-tegomin: "New Tegomin", serif;
  /* アイボリー */
  --q3-color1: #BD222F;
  --q3-color2: #776B70;
  --q3-color3: #93BCA5;
  --bd-color: #511658;
  --q-color: #B7331A;
}

body {
  background-color: var(--bg-color);
  background-image: url(../img/bg1.png);
  background-attachment: fixed;
  font-family: var(--font-tegomin);
  font-size: 17px;
}

.letter,
header,
.box,
main {
  margin-left: auto;
  margin-right: auto;
}

#countdown {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1rem;
  color: white;
}

.box {
  position: relative;
  width: 970px;
  max-width: 90vw;
  margin-top: 44px;
  background-image: url(../img/bgkosi.webp);
  background-size: cover;
  border-radius: 4px 1px 0 2px;
  overflow: hidden;
}

header {
  padding: 40px 0 4rem;
  text-align: center;
}

header img {
  width: 90%;
  margin-bottom: 38px;
  opacity: 0.9;
  user-select: none;
  pointer-events: none;
}

header h1 {
  font-size: 1.9rem;
}

.ti1,
.ti2,
.ti3 {
  position: absolute;
  opacity: 0.9;
}

.ti1 {
  top: -50px;
  left: -125px;
  width: 250px;
  user-select: none;
  pointer-events: none;
}

.ti2 {
  width: 300px;
  top: 58%;
  transform: translateY(-50%);
  right: -150px;
  user-select: none;
  pointer-events: none;
}

.ti3 {
  z-index: 4;
  width: 180px;
  left: 0;
  bottom: -70px;
}

#message {
  position: absolute;
  z-index: 5;
  left: 38px;
  bottom: 21px;
  color: black;
  font-weight: bold;
  mix-blend-mode: overlay;
}

main {
  max-width: 90%;
}

/* フォーム */
form ul {
  position: relative;
  display: grid;
  row-gap: 0.5rem;
  width: max-content;
  margin: 0 auto;
}

form ul li {
  display: grid;
  grid-template-columns: 2fr 3fr;
}

form ul li label {
  position: relative;
  -webkit-text-stroke: black 3px;
  width: fit-content;
}

form ul li label::selection {
  color: rgba(0, 0, 0, 0);
  background-color: var(--q-color);
  -webkit-text-stroke: 0;
}

form ul li input {
  width: 12rem;
  border: 1px var(--bd-color) solid;
  color: white;
  font-size: 1rem;
}

form ul li input:focus {
  border: 2px var(--bd-color) dashed;
  outline: none;
}

form ul li:first-child input {
  background-color: var(--q3-color1);
}

form ul li:nth-child(2) input {
  background-color: var(--q3-color2);
}

form ul li:nth-child(3) input {
  background-color: var(--q3-color3);
}

form ul li label::after {
  content: '';
  font-weight: bold;
  position: absolute;
  width: fit-content;
  top: 0;
  left: 0;
  user-select: none;
  pointer-events: none;
  -webkit-text-stroke: 0;
  z-index: 2;
  color: black;
  display: block;
  white-space: nowrap;
}

form ul li:first-child label::after {
  content: 'マンション名';
}

form ul li:nth-child(2) label::after {
  content: '部屋番号';
}

form ul li:nth-child(3) label::after {
  content: '暗証番号';
}

.false {
  position: absolute;
  width: max-content;
  left: 50%;
  transform: translateX(-50%);
  bottom: -2em;
  color: var(--q-color);

}

.aaa {
  margin-top: 3rem;
  padding-left: 1em;
  text-align: center;
  font-weight: bold;
  user-select: none;
  pointer-events: none;
}

.btn {
  display: block;
  margin: 3.6em auto 0;
  padding: 6px 5px 4px;
  border: none;
  color: white;
  background-color: black;
  box-shadow: 0 0 4px dimgray;
  transition-duration: 0.25s;
  font-size: 15px;
  line-height: 1;
}

.btn:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

/* 問題 */
.keys {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 140px;
  margin-bottom: 90px;
  column-gap: 30px;
  row-gap: 120px;
  --deco-w: -1em;
}

.decoL,
.decoR {
  position: absolute;
  width: 80px;
  user-select: none;
  pointer-events: none;
  opacity: 0.9;
}

.decoL {
  top: -15px;
  left: var(--deco-w);
}

.decoR {
  right: var(--deco-w);
  bottom: -20px;
}

.keys>div {
  position: relative;
  padding: 8px;
  border-radius: 3px;
}

.keys>div:nth-child(3) {
  grid-column: 1/3;
}

.keys>div h2 {
  text-align: center;
}

.keys>div>article {
  position: relative;
}

.q1box,
.q2box {
  text-align: center;
  margin-top: 1.2em;
  padding: 1.5em 0.5em;
}

.q1box p {
  position: relative;
  -webkit-text-stroke: black 3px;
  width: fit-content;
  margin: 0 auto;
}

.q1box p::selection {
  color: rgba(0, 0, 0, 0);
  background-color: var(--q-color);
  -webkit-text-stroke: 0;
}

.q1box p::after {
  display: block;
  content: '一番下の血痕を四回押せ';
  font-weight: bold;
  position: absolute;
  width: 11em;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  user-select: none;
  pointer-events: none;
  -webkit-text-stroke: 0;
  color: black;
  white-space: nowrap;
}

.q2box {
  font-family: 'q2font';
  word-break: break-all;
  line-height: 1.5;
}

.q3box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 2em;
  margin-top: 1.2em;
  padding: 1.5em 0.5em;
}

.q3box>img:first-child {
  grid-row: 1/3;
}

.q3box dt {
  text-decoration: underline;
}

.boxbtm {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 70px;
  opacity: 0.9;
  user-select: none;
  pointer-events: none;
}

footer {
  margin-top: 100px;
}

@media (max-width: 800px) {

  /* フォーム */
  form ul li label:hover {
    color: rgba(0, 0, 0, 0);
    background-color: var(--q-color);
    padding: 0 4px;
    -webkit-text-stroke: 0;
  }

  .keys {
    margin-top: 120px;
    grid-template-columns: 1fr;
    row-gap: 80px;
  }

  .q1box p:hover {
    color: rgba(0, 0, 0, 0);
    background-color: var(--q-color);
    -webkit-text-stroke: 0;
  }

  .keys>div:nth-child(3) {
    grid-column: 1;
  }

  .q3box {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    row-gap: 2em;
  }

  .q3box img:first-child {
    grid-row: 1;
    width: 95%;
    margin: 0 auto;
  }
}