@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;flex-direction: row;}
.btn_gallery{position: relative;overflow: hidden;text-decoration: none;display: inline-block;border: 2px solid #F04723;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;border-radius: 10px;}
.btn_gallery span {position: relative;z-index: 3;color:#333;font-size: 19px;letter-spacing: 2px;}
.btn_gallery:hover span{color:#fff;}
.btn_gallery::before {content: '';position: absolute;top: 0;left: -130%;background:#F04723;width:120%;height: 100%;transform: skewX(-25deg);}
.bgskew:hover::before {animation: skewanime .5s forwards;}
@keyframes skewanime {100% {left:-10%;}}
.BUTTONS small{font-size: 13px;}


@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_gallery{margin: 10px;padding: 7px 0;box-shadow: 2px 2px 4px #ccc;margin: 5px 0;width: 44vw;}

}