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

アニメーション 読み込み時　jump START

--------------------------------------------------------*/
.ready_jump {
  transform: translateY(50px);
  opacity: 0;
}
.ready_jump.active {
  opacity: 0;
  animation: ready_jump 0.7s forwards;
}
@keyframes ready_jump {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/*--------------------------------------------------------

アニメーション アップ START

--------------------------------------------------------*/
.anim_up {
  transform: translateY(50px);
  opacity: 0;
}
.anim_up.active {
  transform: translateY(0);
  opacity: 1;
  transition: 0.6s ease-in-out;
}
/*--------------------------------------------------------

アニメーション スライド START

--------------------------------------------------------*/
.anim_slide {
  transform: translateX(50px);
  opacity: 0;
}
.anim_slide.active {
  transform: translateX(0);
  opacity: 1;
  transition: 0.6s ease-in-out;
}
/*--------------------------------------------------------
  
  アニメーション ジャンプ START
  
  --------------------------------------------------------*/
.anim_jump {
  transform: translateY(50px);
  opacity: 0;
}
.anim_jump.active {
  opacity: 0;
  animation: jump 0.7s forwards;
}
@keyframes jump {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/*--------------------------------------------------------
  
  アニメーション テキストスライド START
  
  --------------------------------------------------------*/
.textAnime {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  padding: 3px 30px;
  opacity: 0;
}
.textAnime.active {
  clip-path: inset(0 100% 0 0);
  animation: textAnime 1s forwards;
}

@keyframes textAnime {
  0% {
    opacity: 100%;
  }
  100% {
    clip-path: inset(0 0 -40% 0);
    opacity: 100%;
  }
}

/*--------------------------------------------------------
  
  アニメーション ボーダー START
  
  --------------------------------------------------------*/
.anim_border {
  font-size: 30px;
  opacity: 0;
  display: inline-block;
  position: relative;
}
.anim_border.active {
  animation: anim_border 0.9s /* アニメーションの時間 */ 0s
    /* アニメーション開始時間 */ forwards /* アニメーション実行後のスタイル */;
}
@keyframes anim_border {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.anim_border.active:after {
  content: "";
  display: block;
  background: #333;
  position: absolute;
  z-index: 99;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: right top;
  animation: anim_border2 1s 0s forwards;
}
@keyframes anim_border2 {
  0% {
    transform: scaleX(0);
    transform-origin: left top;
  }
  50% {
    transform: scaleX(1);
    transform-origin: left top;
  }
  51% {
    transform: scaleX(1);
    transform-origin: right top;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right top;
  }
}
/*--------------------------------------------------------
  
  メニューマウスオーバー時のアクション START
  
  --------------------------------------------------------*/

#obentonet a.btn {
  font-size: 22px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  background: #ec6941;
  width: 300px;
  height: 60px;
  border-radius: 30px;
  line-height: 60px;
  display: block;
  position: relative;
  overflow: hidden;
  margin: 40px auto 0;
  transition: 0.3s;
}

#obentonet a.btn:hover {
  transform: translateY(3px);
  box-shadow: none;
}
.anim_menu {
  -moz-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
}
.anim_menu:before {
  position: relative;
  content: "";
  display: block;
  margin-top: 100%;
}
.anim_menu:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 50%;
}
a:hover > .anim_menu {
  animation: anim-out 0.75s;
}
a:hover > .anim_menu:after {
  animation: anim-out-pseudo2 0.75s;
}
a:hover > .anim_menu {
  animation: anim-out 0.75s;
}
a:hover > .anim_menu:after {
  animation: anim-out-pseudo3 0.75s;
}

@keyframes anim-out {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes anim-out-pseudo2 {
  0% {
    background: rgba(0, 0, 0, 1);
  }
  100% {
    background: transparent;
  }
}
@keyframes anim-out-pseudo3 {
  0% {
    background: rgba(0, 0, 0, 0.2);
  }
  100% {
    background: transparent;
  }
}