@charset "utf-8";


    * {
      margin: 0;
      padding: 0;

    }

    body {
      background-color: #ffe4e1
    }

    /* ヘッダー */
    header {
      background-color: #bc8f8f;
      color: #fff;
      padding: 8px;
    }

    .header1 {
      position: fixed;
      /*基準を画面の左上に*/
      top: 0;
      left: 0;
      /*余白が入らないように*/
      margin: 0;
      /*以下装飾*/
      width: 100%;
    }


    h1 {
      margin: 0;
      font-size: 32px;
    }



    /* メイン */
    main {
      margin: 0 auto;
      max-width: 778px;
      background-color: whitesmoke;
      padding-left: 5px;
      padding-right: 0;
      padding-top: 70px;
      padding-bottom: 10px;
    }

    h2 {
      font-size: 24px;
      margin-bottom: 0px;

      margin-top: 0px;

    }

    p {
      font-size: 16px;
      line-height: 1.5;
      padding: 8px;
    }

    .window1 {

      position: relative;
      border-width: 2px;
      border-color: pink;
      border-style: solid;
      border-radius: 6px;
      width: 768px;
      height: 878px;
      margin-top: 20px;
      margin-bottom: 40px;

    }

    .status1 {
      display: inline-block;
      margin: 0;
      padding: 0;
      width: 430px;
      height: 110px;
      background-color: mediumblue;
      color: white;

    }

    .status2 {
      display: inline-block;
      margin: 0;
      padding: 0;
      width: 332px;
      height: 110px;
      background-color: mediumblue;
      color: white;
    }



    table {
      border: 2px solid white;
      margin: 0 8px;
    }

    th,
    td {
      width: 100px;
      text-align: center;
    }


    .game1 {

      width: 768px;
      height: 768px;

      background-image: url("img/nagisa/normal/1.jpg");

    }


    .message1 {

      position: absolute;
      /*自由に配置する指定*/
      bottom: 0;
      /*下寄せの指定*/

      text-align: center;

      padding-left: 0;
      width: 600px;
      margin: 30px 84px;

      border-width: 4px;
      border-color: white;
      border-style: solid;
      border-radius: 4px;

      background-color: black;
      opacity: 0.7;

    }



    .message_content1 {
      text-align: left;
      font-size: 20px;
      color: white;
      margin: 4px;
      opacity: 1;
    }



    .ask1,
    .ask2 {

      position: absolute;
      /*自由に配置する指定*/


      text-align: center;
      padding-left: 0;
      width: 250px;
      margin: 30px 259px;

      border-width: 4px;
      border-color: orange;
      border-style: solid;
      border-radius: 8px;

      background-color: black;
      opacity: 0.9;

    }


    .ask1:hover,
    .ask2:hover {

      border-color: red;
      cursor: pointer;
      transform: scale(1.05);

    }




    .ask1 {

      bottom: 400px;
      /*下寄せの指定*/

      background-color: #556b2f;

    }

    .ask2 {

      top: 460px;
      /*下寄せの指定*/

      background-color: #483d8b;

    }


    .ask_content1,
    .ask_content2 {
      text-align: center;
      font-size: 24px;
      color: white;
      margin: 4px;
      opacity: 1;
    }



    h3 a:hover {
      font-size: 110%;
    }


    .container {
      position: relative;
      /* margin-top: 150px; */
      width: 600px;
      max-width: 100%;
      height: 300px;
    }



    @keyframes change-img-anim {
      0% {
        opacity: 0;
      }

      10% {
        opacity: 1;
      }

      90% {
        opacity: 1;
      }

      100% {
        opacity: 0;
      }
    }


    /* フッター */
    footer {
      background-color: #bc8f8f;
      color: #fff;
      padding: 5px;
    }

    .footer2{
      text-align: right;
    }



    @media screen and (max-width: 1200px) {

      h1 {
        font-size: 50px;
      }

      h2 {
        font-size: 40px;

      }

      h3 {
        font-size: 32px;

      }

      p {
        font-size: 24px;

      }

      li h3 {
        font-size: 48px;
        padding: 8px;
      }

      .update1 {
        font-size: 70%
      }

      .cu1 {
        width: 50%;
        height: auto;
      }

      footer {
        margin-bottom: 250px;
      }

      /* 広告 */
      .kokoku2 {
        width: 100%;
        height: auto;
      }
    }



    /* 広告 */

    .kokoku1 {
      text-align: center;
    }

