@media (min-width: 641px) {
  article {
      max-width: 900px;
      padding: 0px 0px;
      background-color: #fff;
      margin: 0 auto;
  }
    .whitebase{
    width: 650px;
    background-color: #eee;
    margin:0 -40px;
    padding: 40px 40px 30px 40px;
    border-radius: 20px;        /* CSS3草案 */
    -webkit-border-radius: 20px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 20px;   /* Firefox用 */
    }
    #yodogawa {
      padding: 20px 0 0 20px;
      text-align: center;
  }
  .btn{
  margin:0 auto;
  text-align: center;
  }
  
  .hoverOp:hover {
  	filter: alpha(opacity=40);
  	opacity: 0.4;
  }

  a img {
  	-webkit-transition: 0.2s ease-in-out;
  	   -moz-transition: 0.2s ease-in-out;
  	     -o-transition: 0.2s ease-in-out;
  	        transition: 0.2s ease-in-out;
  }


}

@media only screen and (max-width: 640px) {
    .whitebase{
  width: 87%;
  border-radius: 20px;        /* CSS3草案 */
  -webkit-border-radius: 20px;    /* Safari,Google Chrome用 */
  -moz-border-radius: 20px;
  background-color: #eee;/* Firefox用 */
  padding:20px;
  }
}