/*基本設定*/
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 {color: #000099;}

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

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

.box{
	width: 600px;
	height: 350px;
	margin: auto;
	padding: 10px 10px;
  background-color: #ffffcc;
	border-radius: 15px;
}
@media screen and (max-width: 640px) {
  .box {
    width: 90%;
    height: auto;
    padding: 2%;
    border-radius: 10px;
  }
}

.wrapper {
	height: 180px;
	margin-top: 30px;
	margin-bottom: 30px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	align-items: center;
}
@media screen and (max-width: 640px) {
  .wrapper {
    height: 100%;
    margin: 1.0rem 0;
  }
  .btnwrapper {
    height: 150px;
  }
}

.clear{
  width: 100%;
  position: absolute;
  top: 5;
  right: 0;
  bottom: 5;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 35px 55px;
  display: none;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.clear p{
  font-size: 140px;
  color: #ffffff;
  margin: 0;
}
@media screen and (max-width: 640px) {
  .clear{
    width: 100%;
    margin: -2%;
  }
  .clear p {
    font-size: 70px;
  }
}
div.resetbtn {
  width: 120px;
  font-size: 24px;
  font-weight:bold;
  text-decoration:none;
  display:block;
  text-align:center;
  padding:8px 0 10px;
  background-color: #000000;
  color:#ffffff;
	border: 2px solid #ffffff;
	margin-bottom: 20px;
}
@media screen and (max-width: 640px) {
  div.resetbtn {
    width: 60px;
    font-size: 1.4rem;
    padding: 0.5rem;
    margin-bottom: 10px;
  }
}
.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;
}

/*ボタン系*/
div.btn {
	background: #333333;
	font-size: 60px;
	color: white;
	background-image :
		repeating-linear-gradient(to bottom,
			rgba(0, 0, 0, 0.20),
			rgba(0, 0, 0, 0.20) 25px,
			rgba(0, 0, 0, 0) 0,
			rgba(0, 0, 0, 0) 50px),
		repeating-linear-gradient(to right,
			rgba(0, 0, 0, 0.20),
			rgba(0, 0, 0, 0.20) 25px,
			rgba(0, 0, 0, 0) 0,
			rgba(0, 0, 0, 0) 50px);
	line-height: 120px;
	border-radius: 20%;
	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;
}
.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;
}
#button0 {
  width: 50px;
  height: 50px;
  }
  #button1 {
  width: 75px;
  height: 75px;
  }
  #button2 {
  width: 125px;
  height: 125px;
  }
  #button3 {
  width: 175px;
  height: 175px;
  }
  @media screen and (max-width: 720px) {
    div.btn {
      margin: 2%;
    }
    #button0 {
      width: 10%;
      height: auto;
      background-image :
      repeating-linear-gradient(to bottom,
        rgba(0, 0, 0, 0.20),
        rgba(0, 0, 0, 0.20) calc(100% / 2),
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0) calc(100% * 2 / 2)),
      repeating-linear-gradient(to right,
        rgba(0, 0, 0, 0.20),
        rgba(0, 0, 0, 0.20) calc(100% / 2),
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0) calc(100% * 2 / 2));
    }
    #button1 {
      width: 15%;
      height: auto;
      background-image :
      repeating-linear-gradient(to bottom,
        rgba(0, 0, 0, 0.20),
        rgba(0, 0, 0, 0.20) calc(100% / 3),
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0) calc(100% * 2 / 3)),
      repeating-linear-gradient(to right,
        rgba(0, 0, 0, 0.20),
        rgba(0, 0, 0, 0.20) calc(100% / 3),
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0) calc(100% * 2 / 3));
    }
    #button2 {
      width: 25%;
      height: auto;
      background-image :
      repeating-linear-gradient(to bottom,
        rgba(0, 0, 0, 0.20),
        rgba(0, 0, 0, 0.20) calc(100% / 5),
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0) calc(100% * 2 / 5)),
      repeating-linear-gradient(to right,
        rgba(0, 0, 0, 0.20),
        rgba(0, 0, 0, 0.20) calc(100% / 5),
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0) calc(100% * 2 / 5));
      
    }
    #button3 {
      width: 35%;
      height: auto;
      background-image :
      repeating-linear-gradient(to bottom,
        rgba(0, 0, 0, 0.20),
        rgba(0, 0, 0, 0.20) calc(100% / 7),
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0) calc(100% * 2 / 7)),
      repeating-linear-gradient(to right,
        rgba(0, 0, 0, 0.20),
        rgba(0, 0, 0, 0.20) calc(100% / 7),
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0) calc(100% * 2 / 7));
    }
    #button0::before,
    #button1::before,
    #button2::before,
    #button3::before {
      content:"";
      padding-top: 100%;
      display: block;
    }
  }

  #cTweet,#cTweet2{
    visibility : hidden;
  }