@charset "utf-8";

/*---------------------------------------

ボタン共通

---------------------------------------*/
/* ボタンアニメーション枠 */
.box_btn_animation {
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.box_btn_animation:hover {
  opacity: 0.9;
  transform: scale(1.1);
}

/* ボタンの矢印 */
.box_btn_animation .obj_arrow_btn {
  position: absolute;
  top: 0%;
  z-index: 9999;
  animation: animation_obj_arrow_btn_large 10s ease-in-out infinite;
}

/* アップセルページのボタンの矢印 */
.box_btn_animation .obj_arrow_p3_btn_upsell {
  position: absolute;
  left: -10px;
  top: 190px;
  z-index: 9999;
  animation: animation_obj_arrow_p3_btn_upsell 10s ease-in-out infinite;
}

/* ボタンの本体 */
.box_btn_animation .obj_base_btn {
  animation: animation_obj_base_btn 10s ease-out infinite;
}

.box_btn_animation:hover .obj_arrow_btn,
.box_btn_animation:hover .obj_arrow_p3_btn_upsell,
.box_btn_animation:hover .obj_base_btn {
  animation: 0s;
}

/*---------------------------------------

レイアウト調整

---------------------------------------*/
/* ボタン（大） */
.anima_banner .box_btn_animation .obj_arrow_btn {
  margin-top: 0px;
  left: -40px;
}

/* ボタン（小） */
.sbtn .box_btn_animation .obj_arrow_btn {
  margin-top: 0px;
  left: -60px;
}

/* ボタン（フォーム下） */
#confirm_button .box_btn_animation .obj_arrow_btn,
#confirm_button_demo .box_btn_animation .obj_arrow_btn {
  margin-top: 0px;
  left: -40px;
}

/* ボタン（確認ページ、アンケート） */
#p3 .lbtn .box_btn_animation .obj_arrow_btn,
#p14 .btn01 .box_btn_animation .obj_arrow_btn {
  margin-top: 0px;
  left: -40px;
}

/* ボタン（確認ページ、アンケート） */
#p16 .lbtn .box_btn_animation .obj_arrow_btn {
  margin-top: 0px;
  left: -40px;
}

#p3-2 .lbtn .box_btn_animation .obj_arrow_btn,
#p4-2 .lbtn .box_btn_animation .obj_arrow_btn,
#p16-2 .lbtn .box_btn_animation .obj_arrow_btn,
#p16-3-2 .lbtn .box_btn_animation .obj_arrow_btn {
  margin-top: 0px;
  left: -60px;
}

/* ボタン（サンクスページ） */
#p4 .box_btn_animation .obj_arrow_btn,
#p4-3 .box_btn_animation .obj_arrow_btn,
#p16-3 .box_btn_animation .obj_arrow_btn,
#p16-3-3 .box_btn_animation .obj_arrow_btn {
  margin-top: 0px;
  left: -30px;
}


/* ボタン（アップセルボタン） */
#p3 #btn01 .box_btn_animation .obj_arrow_btn {
  margin-top: 990px;
}

/* ボタン（アップセルボタン） */
#p3 #btn02 .box_btn_animation .obj_arrow_btn {
  margin-top: 768px;
}

/* ボタン（お申込み内容を確定するボタン） */
#p3 #btn03 .box_btn_animation .obj_arrow_btn {
  margin-left: -20px;
}

/*---------------------------------------

アニメーション

---------------------------------------*/
/* 矢印 */
@keyframes animation_obj_arrow_btn_large {
  0% {transform: translateX(0px);}
  5% {transform: translateX(20px);}
  10% {transform: translateX(0px);}
  15% {transform: translateX(20px);}
  20% {transform: translateX(0px);}
  25% {transform: translateX(20px);}
  30% {transform: translateX(0px);}
  35% {transform: translateX(20px);}
  40% {transform: translateX(0px);}
  45% {transform: translateX(20px);}
  50% {transform: translateX(0px);}
  55% {transform: translateX(20px);}
  60% {transform: translateX(0px);}
  65% {transform: translateX(20px);}
  70% {transform: translateX(-20px);}
  74% {transform: translateX(40px);}
  80% {transform: translateX(-30px);}
  85% {transform: translateX(20px);}
  90% {transform: translateX(0px);}
  95% {transform: translateX(20px);}
  100% {transform: translateX(0px);}
}

/* 矢印（アップセル用） */
@keyframes animation_obj_arrow_p3_btn_upsell {
  0% {transform: translate(0px,0px);}
  5% {transform: translate(20px,20px);}
  10% {transform: translate(0px,0px);}
  15% {transform: translate(20px,20px);}
  20% {transform: translate(0px,0px);}
  25% {transform: translate(20px,20px);}
  30% {transform: translate(0px,0px);}
  35% {transform: translate(20px,20px);}
  40% {transform: translate(0px,0px);}
  45% {transform: translate(20px,20px);}
  50% {transform: translate(0px,0px);}
  55% {transform: translate(20px,20px);}
  60% {transform: translate(0px,0px);}
  65% {transform: translate(20px,20px);}
  70% {transform: translate(-20px,-20px);}
  74% {transform: translate(40px,40px);}
  80% {transform: translate(-30px,-30px);}
  85% {transform: translate(20px,20px);}
  90% {transform: translate(0px,0px);}
  95% {transform: translate(20px,20px);}
  100% {transform: translate(0px,0px);}
}

/* ボタン本体 */
@keyframes animation_obj_base_btn {
  0% {transform: scale(1);}
  74% {transform: scale(1);}
  79% {transform: scale(1.1);}
  83% {transform: scale(1);}
  87% {transform: scale(1.06);}
  90% {transform: scale(1);}
  92% {transform: scale(1.03);}
  94% {transform: scale(1);}
  100% {transform: scale(1);}
}