@charset "UTF-8" ;

/* チェックボックスを非表示 */
.menu-checkbox {
  display: none;
}

/* メニューボタンの装飾 */
/*.menu-button {
  display: block;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 200;
  height: 30px;
  width: 40px;
  cursor: pointer;
}
.menu-button::before,
.menu-button::after {
  content: '';
  transition: .3s;
}
.menu-button::before,
.menu-button::after,
.menu-button span {
  display: block;
  position: absolute;
  left: 0;
  height: 2px;
  width: 100%;
  margin-top: -1px;
  background-color: #000000;
}*/
.menu-button::before {
  top: 0;
}
.menu-button::after {
  bottom: 0;
}
.menu-button span {
  top: 50%;
}

/* メニューボタンのアニメーション */
.menu-checkbox:checked ~ .menu-button::before {
  top: 50%;
  transform: rotate(45deg);
}
.menu-checkbox:checked ~ .menu-button::after {
  top: 50%;
  transform: rotate(-45deg);
}
.menu-checkbox:checked ~ .menu-button span {
  display: none;
}

/* ドロワーメニューの装飾 */
.drawer-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  height: 100%;
  width: 315px;
  transform: translateX(-100%);
  transition: .5s;
  background-color: #fff;
}
/*.drawer-menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.drawer-menu li {
  border-bottom: 1px dotted #ccc;
}
.drawer-menu a {
  display: block;
  padding: 15px;
  color: #000000;
  text-decoration: none;
}*/

/* ドロワーメニューの開閉 */
.menu-checkbox:checked ~ .drawer-menu {
  transform: translateX(0);
}

/* ドロワーメニューの背景 */
.menu-background {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, .5);
  cursor: pointer;
}
.menu-checkbox:checked ~ .menu-background {
  display: block;
}


.drawer-menu_scroll {
 height: 100%;
 overflow: auto;
 -webkit-overflow-scrolling: touch;
 text-align:left;
}

.sp-menu-box {
background-image:none !important;
}

.sp-menu-box label{
position: relative;
display: block;
cursor: pointer;
transition: all 0.5s;
box-sizing: border-box;
}

.sp-menu-box input{
display: none;
}

.sp-menu-box label:after{
color: #333;
font-family:"Material Icons";
content:" \e5cf";
position: absolute;
top: 0px;
right: 10px;
}

.sp-menu-box input:checked ~ label::after {
color: #333;
font-family:"Material Icons";
content:" \e5ce";
position: absolute;
top: 0px;
right: 10px;
}

.sp-menu-box div{
height: 0px;
padding: 0px;
overflow: hidden;
opacity: 0;
transition: 0.5s;
}

.sp-menu-box input:checked ~ div{
margin:5px 0 0;
height: auto;
padding: 0;
opacity: 1;
}

.sp-menu-small {
border-top:solid #FFF 1px !important;
}


.sp-list {
font-size:15px !important;
}

.sp-menu-small p{
margin-bottom: 0px;
}

/* チェックボックスを非表示 */
.menu-checkbox {
  display: none;
}




/* ボタン */

.btn-shine {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  font-size: 16px;
  text-align:center;
  color:#FFF;
}

.btn-shine a {
font-size: 16px;
text-align:center;
color:#FFF;
}

.btn-shine2 {
  width: 240px;
  height: 48px;
  line-height: 48px;
  background: #0096DC;
  font-family: YakuHanJP, "Helvetica Neue", Roboto, "Droid Sans", "Noto Sans Japanese", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  font-weight:bold;
  margin:0 auto;
  text-decoration:none;

  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  font-size: 16px;
  text-align:center;
  color:#FFF;
}

.btn-shine2 a {
font-size: 16px;
text-align:center;
color:#FFF;
}

.btn-shine2:hover {
  color: #FFF;
}

/* ボタンを光らせる */

.btn-shine:before {
  /*光るアニメーション用*/
  animation: shine 3s ease-in-out infinite;/*数字を変更することで光る間隔が変更*/
  background-color: #fff;
  content: " ";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: -50px;
  transform: rotate(45deg);
  width: 20px;
}
 
.btn-shine2:before {
  /*光るアニメーション用*/
  animation: shine 3s ease-in-out infinite;/*数字を変更することで光る間隔が変更*/
  background-color: #fff;
  content: " ";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: -50px;
  transform: rotate(45deg);
  width: 20px;
}

@keyframes shine {
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}