@charset "UTF-8";
html {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
  margin-bottom: 50px;
  /*background: url(../bg.gif) no-repeat center center fixed;*/
  -webkit-background-size: cover;
    -moz-background-size: cover;
      -o-background-size: cover;
        background-size: cover;
}
/* ----------------------------------------------------
* reset style
* -------------------------------------------------- */
/* for new HTML5 elements */
section, article, aside, hgroup, header, footer, nav, figure, figcaption, summary {
  display: block; }

body {
  font-family: "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", Verdana, Geneva, Arial, Helvetica;
  word-wrap: break-word;
  word-break: break-all; }

body, div,
dl, dt, dd,
ul, ol, li,
h1, h2, h3, h4, h5, h6,
pre, code,
form, fieldset, legend, input, textarea,
p, blockquote,
th, td {
  margin: 0;
  padding: 0; }

address, cite, dfn, em, strong, var, th, ins, del, samp {
  font-weight: normal;
  font-style: normal; }

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal; }

table {
  font-size: inherit;
  font: 100%;
  border-collapse: collapse;
  border-spacing: 0; }

li {
  list-style-type: none; }

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  *font-size: 100%; }

pre, code, kbd, samp, tt {
  font-family: monospace;
  *font-size: 108%;
  line-height: 100%; }

caption, th {
  text-align: left; }

fieldset,
a img {
  border: none; }

hr, legend {
  display: none; }

object,
embed {
  vertical-align: top; }

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }

.clearfix {
  display: inline-block; }

/* Hides from IE-mac \*/
* html .clearfix {
  height: 1%; }

.clearfix {
  display: block; }

/* End hide from IE-mac */
.Wrapper__title {
  font-size: 300%;
  text-align: center;
  padding: 50px 0;
  font-family: 'Antic Slab', serif; }

.Wrapper__subTitle {
  font-size: 200%;
  text-align: center;
  padding: 50px 0 30px;
  font-family: 'Antic Slab', serif; }

.Wrapper__howToPlay {
  width: 700px;
  line-height: 2;
  margin: 0 auto 50px; }

.MineSweeper {
  position: relative;
  background-color: #eee;
  border: 1px solid #ccc;
  padding: 45px 10px 10px;
  margin: 0 auto; }
  .MineSweeper.easy {
    width: 310px; }
  .MineSweeper.normal {
    width: 490px; }
  .MineSweeper.hard {
    width: 900px; }
  .MineSweeper__level {
    text-align: center;
    padding: 10px; }
    .MineSweeper__level label {
      border-top: 3px solid gray;
      padding: 20px;
      padding-top: 10px;
      cursor: pointer;
      margin: 0 10px; }
    .MineSweeper__level label:hover {
      border-top: 3px solid cornflowerblue;
    }
    .MineSweeper__level input[type="radio"]:checked+label{ border-top: 3px solid #69F }
    .MineSweeper__level input[type=radio] {
      display: none;
      margin-right: 5px; }
  .MineSweeper__flagNum::before { content: "🚩"; }
  .MineSweeper__flagNum {
    position: absolute;
    right: 10px;
    top: 10px;
    padding-left: 25px; }
  .MineSweeper__time::before { content: "⏱"; font-size: 20px; }
  .MineSweeper__time {
    position: absolute;
    left: 10px;
    top: 10px;
    padding-left: 30px; }
  .MineSweeper__face:active {
    background-color: #ccc;
  }
  .MineSweeper__face {
    position: absolute;
    cursor: pointer;
    top: 4px;
    left: 50%;
    margin-left: -17px;
    width: 34px;
    height: 34px;
    border: 1px solid #bbb; }
    .MineSweeper__face .button {
      border-width: 1px;
      border-style: solid;
      border-color: #fff #999 #999 #fff;
      text-align: center;
      font-size: 23px;
      height: 100%;
      display: block; }
    .MineSweeper__face .playing::before { content: "😀"; }
    .MineSweeper__face .clear::before { content: "😎"; }
    .MineSweeper__face .gameover::before { content: "😖"; text-shadow: 0px 0px 8px darkred; }

.Table {
  border: 1px solid #ccc;
  margin: 0 auto; }

.Cell:active .Cell__cover {
  background-color: #aaa;
}
.Cell {
  cursor: default;
  border: 1px solid #bbb;
  font-size: 20px;
  width: 29px;
  height: 32px;
  text-align: center;
  vertical-align: middle; }
  .Cell__cover {
    background-color: #ccc;
    border-width: 1px;
    border-style: solid;
    border-color: #fff #999 #999 #fff;
    height: 100%; }
    .Cell__cover--opened {
      background-color: #ddd;
      border: 1px solid #ddd; }
  .Cell__number0 {
    color: #ddd; }
  .Cell__number1 {
    color: blue; }
  .Cell__number2 {
    color: green; }
  .Cell__number3 {
    color: red; }
  .Cell__number4 {
    color: #2b4b65; }
  .Cell__number5 {
    color: #4f2702; }
  .Cell__number6 {
    color: #0b615e; }
  .Cell__number7 {
    color: black; }
  .Cell__number8 {
    color: #666; }
  .Cell__flag {
    overflow: hidden;
    display: block;
    height: 100%; }
  .Cell__bomb {
    overflow: hidden;
    display: block;
    height: 100%; }

.open-bomb {
  background-color: black;
}

.high-scores {
  margin-top: 30px;
}

.high-scores h3 {
  text-align: center;
  font-weight: bold;
  text-decoration: underline;
}

.high-scores table {
  width: 100%;
}
.high-scores th {
  text-align: center;
  font-weight: bold;
}

.high-scores td {
  border-top: 1px solid gray;
  padding: 10px;
  text-align: center;
}

.high-scores td:first-child {
  text-align: left;
}
.high-scores td:last-child {
  text-align: right;
}

.hide {
  display: none;
}
div.ReactModal__Content.ReactModal__Content--after-open {
  max-width: 95% !important;
}
.ReactModal__Content h2 {
  font-weight: bold;
  font-size: 22px;
  margin-bottom: 25px;
}
.ReactModal__Content input {
  width: 150px;
  margin-bottom: 10px;
  border-radius: 3px;
  border: 1px solid #AAA;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 2px;
}
.ReactModal__Content button {
  border: 0;
  background: #69f;
  color: white;
  cursor: pointer;
  display: block;
  width: 150px;
  margin: 0 auto;
  padding: 7px;
  font-size: 18px;
  border-radius: 3px;
}
.ReactModal__Content button:hover {
  background: #92b6ff;
}
.ReactModal__Content button:disabled {
  opacity: 0.2;
  cursor: not-allowed;
  background: #92b6ff;
}