@charset "UTF-8";
/* CSS Document */

.msg{
  position:relative;
  }
.msg .hakase,
.msg .kids{
  position:absolute;
  }
.msg .hakase{
  bottom:0;
  left:0;
  }
.msg .kids{
   bottom:0;
  right:0;
  }
@media only screen and (max-width: 640px) {
  .msg{
    overflow:hidden;
    }
   .title .container{
    padding-left:0;
    padding-right:0;
    }
  .msg > p img{
    width:100%;
    height:auto;
    }
    .msg .hakase{
  width:20%;
  height:auto;
  }
  .msg .kids{
     width:27%;
  height:auto;
    }
}


ul.games{
  list-style:none;
  margin:0;
  padding:0;
  }
ul.games li{
  margin-bottom:1em;
  }
ul.games .button {
  display:block;
	position: relative;
	background-color: #f7d034;
  -webkit-border-radius: 2em;
-moz-border-radius: 2em;
-ms-border-radius: 2em;
-o-border-radius: 2em;
	border-radius: 2em;
  padding:2em;
	color: #fff;
 transition: all .3s ease;
 background: -moz-linear-gradient(-45deg,  rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
 background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,.3) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
 /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ background: linear-gradient(135deg,  rgba(255,255,255,.3) 0%,rgba(255,255,255,0) 100%); */
/* IE6-9 fallback on horizontal gradient filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); */
}
ul.games .button img{
  width:100%;
  height:auto;
  border:0;
  }
ul.games .button.q20170401{
  background-color:#6791d6;
  box-shadow: 0 3px 0 #3e66be;
  }
ul.games .button.q20170402{
  background-color:#ff5a60;
  box-shadow: 0 3px 0 #a23e51;
  }
ul.games .button.q20170501{
  background-color:#a1d8e6;
  box-shadow: 0 3px 0 #7da3ad;
  }
ul.games .button.q20170502{
  background-color:#ed6d1f;
  box-shadow: 0 3px 0 #bb571a;
  }
ul.games .button.q20170601{
  background-color:#c4d70f;
  box-shadow: 0 3px 0 #6b750b;
  }
ul.games .button.q20170602{
  background-color:#a3b4dc;
  box-shadow: 0 3px 0 #445783;
  }
ul.games .button.q20170701{
  background-color:#f4b3c2;
  box-shadow: 0 3px 0 #cf677f;
  }
ul.games .button.q20170702{
  background-color:#1c2f49;
  box-shadow: 0 3px 0 #1f242b;
  }
ul.games .button.q20170801{
  background-color:#faed00;
  box-shadow: 0 3px 0 #c5c300;
  }
ul.games .button.q20170802{
  background-color:#00969f;
  box-shadow: 0 3px 0 #1f242b;
  }
ul.games .button.q20170901{
  background-color:#1e2f4a;
  box-shadow: 0 3px 0 #1f242b;
  }
ul.games .button.q20170902{
  background-color:#faed00;
  box-shadow: 0 3px 0 #8b8400;
  }
ul.games .button.q20171001{
  background-color:#116c7c;
  box-shadow: 0 3px 0 #0a444e;
  }
ul.games .button.q20171002{
  background-color:#5fb7e1;
  box-shadow: 0 3px 0 #437f9c;
  }
ul.games .button.q20171101{
  background-color:#95c7ec;
  box-shadow: 0 3px 0 #61829b;
  }
ul.games .button.q20171102{
  background-color:#f5b199;
  box-shadow: 0 3px 0 #bf8b79;
}
ul.games .button.q20171201{
  background-color:#006933;
  box-shadow: 0 3px 0 #004421;
  }
ul.games .button.q20171202{
  background-color:#1e2f4a;
  box-shadow: 0 3px 0 #111a29;
}
ul.games .button.q20180101{
  background-color:#e13b47;
  box-shadow: 0 3px 0 #ab2e37;
  }
ul.games .button.q20180102{
  background-color:#5fb7e1;
  box-shadow: 0 3px 0 #4585a4;
}
ul.games .button.q20180201{
  background-color:#129d92;
  box-shadow: 0 3px 0 #0b5f58;
  }
ul.games .button.q20180202{
  background-color:#eeb0bd;
  box-shadow: 0 3px 0 #bc6f7f;
}

ul.games .button.q20180301{
  background-color:#76a2c9;
  box-shadow: 0 3px 0 #5d809f;
  }
ul.games .button.q20180302{
  background-color:#e67a6f;
  box-shadow: 0 3px 0 #9f554d;
}
  
@media only screen and (max-width: 640px) {
  .game header h1 img{
    width:100%;
    height:auto;
    }
     ul.games li{
       margin-bottom:1em;
       }
      .game .info img{
         width:100%;
    height:auto;
        }
      .game .coming_soon img{
         width:100%;
    height:auto;
        }
  }
@media only screen and (min-width: 641px) {
  ul.games li{
  width:48%;
  float:left;
  margin-right:2%;
  }
   ul.games li img{
     width:100%;
     height:auto;
     }
   ul.games li:last-child{
     margin-right:0;
     }
}
 @media only screen and (min-width: 980px) {
  ul.games .button:hover {
  margin-top:-6px;
  margin-bottom:6px;
}
/*ul.games .button.game01:hover{
 	box-shadow: 0 7px 0 #cf677f;
  }
ul.games .button.game02:hover{
  	box-shadow: 0 7px 0 #1f242b;
  }*/
ul.games .button:active {
	box-shadow: none;
}
}

.pokitomo .introduction{
  background-color: #fff;
	border-radius:2em;
  padding:2em;
  }
.pokitomo .hakase .cmt{
  font-size:1.2em;
  line-height:1.6;
  float:right;
  width:75%;
  }
.pokitomo .hakase .illust{
  float:left;
  width:20%;
  }
.pokitomo .hakase .illust img{
  width:100%;
  height:auto;
  }
.pokitomo .button {
  display:block;
	position: relative;
	background-color: #d01719;
	border-radius: 1em;
  padding:1em;
	color: #fff;
}
@media only screen and (min-width: 641px) {
  .pokitomo .introduction header{
    width:24%;
    float:left;
    }
   .pokitomo .introduction .hakase{
    width:74%;
    float:right;
    }
  }
  .strawberry{
    position:absolute;
    }
.stb01{
  width:60px;
  height:60px;
  left:-2em;
  top:0;
  -moz-transform: rotateZ(-45deg);
  -webkit-transform: rotateZ(-45deg);
  -o-transform: rotateZ(-45deg);
  -ms-transform: rotateZ(-45deg);
  transform:rotate(-45deg);
  }
.stb02{
  width:90px;
  height:90px;
  right:-2em;
  top:0;
  -moz-transform: rotateZ(45deg);
  -webkit-transform: rotateZ(45deg);
  -o-transform: rotateZ(45deg);
  -ms-transform: rotateZ(45deg);
  transform:rotate(45deg);  
  }
.stb03{
  width:110px;
  height:110px;
  left:-4em;
  bottom:0;
-moz-transform: rotateZ(-45deg);
  -webkit-transform: rotateZ(-45deg);
  -o-transform: rotateZ(-45deg);
  -ms-transform: rotateZ(-45deg);
  transform:rotate(-45deg);
  }