@charset 'utf-8';
/*	Cascading Style Sheets: style.css 5.2	*/


/*ボタン*/
.BUTTONS{display: flex;justify-content: center;width: 960px;flex-wrap: wrap;margin: 0 auto;margin-bottom: 50px;}
.btn{position: relative;overflow: hidden;text-decoration: none;display: inline-block;border: 2px solid #555;text-align: center;outline: nonetransition: ease .2s;width: 300px;text-align: center;margin: 10px;padding: 20px 0;box-shadow: 2px 2px 4px #ccc;display: flex;
justify-content: center;align-items: center;}
.btn span {position: relative;z-index: 3;color:#333;font-size: 19px;letter-spacing: 2px;}
.btn:hover span{color:#fff;}
.bgskew::before {content: '';position: absolute;top: 0;left: -130%;background:#333;width:120%;height: 100%;transform: skewX(-25deg);}
.bgskew:hover::before {animation: skewanime .5s forwards;}
@keyframes skewanime {100% {left:-10%;}}
.BUTTONS small{font-size: 13px;}
.PLAN2{padding: 8px 0;}
.PLAN13{padding: 8px 0;}
.PLAN3 {display: flex;align-items: center;justify-content: center;}
.PLAN7 {display: flex;align-items: center;justify-content: center;}
.TOWN {display: flex;align-items: center;justify-content: center;}


@media screen and (max-width: 640px) {
  .BUTTONS{width: 90vw;margin: 0 auto;margin-bottom: 40px;flex-wrap: wrap;justify-content: flex-start;justify-content: space-between;}
  .btn{margin: 10px;padding: 7px 0;box-shadow: 2px 2px 4px #ccc;margin: 5px 0;width: 44vw;}

}