/** 画像の配置 */
.example2{
  width: 250px;
  height: 250px; 
position: relative; /* 今の位置を基準 */
top: 0px; /* 上から50px */
left: 0px; /* 左から400px */
}


/** 画像の配置 */
.example3{
  width: 330px;
  height: 60px; 
position: relative; /* 今の位置を基準 */
top: -965px; /* 上から50px */
left: 1080px; /* 左から400px */
}



/** メニュー説明 */
.bg_test2 {
    color:  #000;                           /* 文字色指定 */
    height: 582px;                          /* 高さ指定 */
    width:  360px;                          /* 幅指定 */
    font-size:  30px;                       /* 文字サイズ指定 */
    background-color: rgb(255, 255, 255);     /* 背景色指定 */
    padding:  10px;                         /* 余白指定 */
    float:  left;                          /* 位置指定 */
    position:  relative;                    /* 位置指定 */
    top: -633px;                             /* 位置指定 */
    left: 630px; /* 左から200px */
}


      * {
        box-sizing: border-box;
      }

      :root {
        --image-url: url("061.png");
      }

      html,
      body,
      #page-container {
        width: 100vw;
        height: 100vh;
        margin: 0;
        /** background-color: rgb(248, 168, 159); */
        overflow: hidden;
      }

      p {
        text-align: center;
        font-weight: bold;
        font-size: 1.5em;
        margin: 1%;
      }

      #win-text {
        font-size: 6em;
        position: relative;
        top: 1em;
      }

      #game-container {
        width: 65vw;
        max-width: 650px;
        height: 100vh;
        position: relative;
        top: -25px;
 right: 200px;
        margin: auto;
      }

      #tile-container-inner {
        width: 55vw;
        max-width: 584px;
        height: 55vw;
        max-height: 584px;
        background-color: rgb(198, 200, 202);
        border: 2px solid black;
        position: relative;
        top: 1.35%;
        margin: auto;
        display: grid;
        grid-template-columns: auto auto auto;
      }

      /****Classes****/

      .layer {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0.8;
        animation: fadeIn 2s linear;
      }

      .win {
        background-color: white;
      }

      .lose {
        background-color: gray;
        color: white;
      }

      .tile {
        width: 100%;
        height: 100%;
        background-color: white;
        border: 1px solid black;

        cursor: pointer;
      }

      .tile-1 {
        background: var(--image-url) no-repeat top right;
        background-size: 300%;
      }

      .tile-2 {
        background: var(--image-url) no-repeat center right;
        background-size: 300%;
      }

      .tile-3 {
        background: var(--image-url) no-repeat bottom center;
        background-size: 300%;
      }

      .tile-4 {
        background: var(--image-url) no-repeat bottom left;
        background-size: 300%;
      }

      .tile-5 {
        background: var(--image-url) no-repeat top left;
        background-size: 300%;
      }

      .tile-6 {
        background: var(--image-url) no-repeat center center;
        background-size: 300%;
      }

      .tile-7 {
        background: var(--image-url) no-repeat center left;
        background-size: 300%;
      }

      .tile-8 {
        background: var(--image-url) no-repeat top center;
        background-size: 300%;
      }

      .row-1-col-1 {
        grid-row-start: 1;
        grid-row-end: 2;
        grid-column-start: 1;
        grid-column-end: 2;
      }

      .row-1-col-2 {
        grid-row-start: 1;
        grid-row-end: 2;
        grid-column-start: 2;
        grid-column-end: 3;
      }

      .row-1-col-3 {
        grid-row-start: 1;
        grid-row-end: 2;
        grid-column-start: 3;
        grid-column-end: 4;
      }

      .row-2-col-1 {
        grid-row-start: 2;
        grid-row-end: 3;
        grid-column-start: 1;
        grid-column-end: 2;
      }

      .row-2-col-2 {
        grid-row-start: 2;
        grid-row-end: 3;
        grid-column-start: 2;
        grid-column-end: 3;
      }

      .row-2-col-3 {
        grid-row-start: 2;
        grid-row-end: 3;
        grid-column-start: 3;
        grid-column-end: 4;
      }

      .row-3-col-1 {
        grid-row-start: 3;
        grid-row-end: 4;
        grid-column-start: 1;
        grid-column-end: 2;
      }

      .row-3-col-2 {
        grid-row-start: 3;
        grid-row-end: 4;
        grid-column-start: 2;
        grid-column-end: 3;
      }

      .row-3-col-3 {
        grid-row-start: 3;
        grid-row-end: 4;
        grid-column-start: 3;
        grid-column-end: 4;
      }

      .timer-danger {
        color: red;
      }

      .timer-warning {
        color: yellow;
      }

      .timer-normal {
        color:black;
      }

      .timer {
        font-size: 2em;
        font-weight: bold;
        text-align: center;
        cursor: pointer;
        margin-top: 5vh;
      }
      @keyframes fadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 0.8;
        }
      }