/*基本設定*/
body {
  background-color: #ddffdd;
}

/*リンクの色*/
a:link{color: #ff3333}
a:visited{color: #ff0099}
a:hover{color: #ff3366}
a:active{color: #ff6699}

p {
  color: #004400;
}
b, .b, strong .strong {
  color: #000099;
}

.cont {
  margin-left: auto;
  margin-right: auto;
}

.title_img {
  width: 80%;
  max-width: 480px;
  text-align: center;
}

.box {
	width: 700px;
	height: 450px;
	margin: auto;
	padding: 10px 20px;
  background-color: #ffffcc;
  border-radius: 15px;
  position: relative;
}
@media screen and (max-width: 720px) {
  .box {
    width: 85%;
    height: auto;
    padding: 2%;
    border-radius: 10px;
  }
}

.wrapper{
	  margin: 30px 0;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
}
@media screen and (max-width: 720px) {
  .wrapper {
    margin: 1.0rem 0;
  }
}

.clear {
  width: 740px;
  margin: -20px;
  top: 25%;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
  position: absolute;
}
.clear p {
  font-size: 140px;
  color: white;
  margin: 0;
}
@media screen and (max-width: 720px) {
  .clear{
    width: 100%;
    margin: -2%;
  }
  .clear p {
    font-size: 70px;
  }
}

/*ボタン系*/
div.btn {
    background: #ff5555;
    width: 120px;
    height: 120px;
    line-height: 1;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    border-bottom: solid 4px #666666;
    transition: .3s;
    margin: 20px 20px;
}
@media screen and (max-width: 720px) {
  div.btn {
    width: 24%;
    height: auto;
    margin: 3% 1.5%;
  }
  div.btn::before {
    content: "";
    padding-top: 100%;
    display: block;
  }
}
.btn:active {
    -ms-transform: translateY(2px);
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
    border-bottom: none;
}

div.tokuten {
  width: 40px;
  height: 100px;
  background-color: #333333;
  border: solid 2px #999999;
  margin: 15px 2px;
}
@media screen and (max-width: 720px) {
  div.tokuten {
    width: 7%;
    height: auto;
    border: solid 1px #999999;
    margin: 5px 0.3%;
  }
  div.tokuten::before {
    content: "";
    padding-top: 300%;
    display: block;
  }
}

div.resetbtn {
  width: 120px;
  font-size: 2.4rem;
  font-weight: bold;
  text-decoration: none;
  display: block;
  text-align: center;
  margin-top: 1.0rem;
  padding: 0.8rem 0 1.0rem;
  background-color: #000000;
  color: #ffffff;
}
@media screen and (max-width: 720px) {
  div.resetbtn {
    width: 60px;
    font-size: 1.4rem;
    padding: 0.5rem;
  }
}
.resetbtn:active {
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}

#tkt0 {
  background-color: #ffffff;
}

#cTweet{
	visibility : hidden;
}