/* ===========================================
   アニメーションボタン - 基本スタイル
   =========================================== */

.animated-btn{
   font-size:var(--btn-font-size, 24px);
   font-weight:var(--btn-font-weight, 500);
   font-weight:700;
   position:relative;
   display:inline-flex;
   overflow:hidden;
   align-items:center;
   justify-content:center;
   padding:var(--btn-padding-y, 30px) var(--btn-padding-x, 80px);
   cursor:pointer;
   user-select:none;
   transition:border-color .2s cubic-bezier(.4, 0, .2, 1);
   text-decoration:none;
   letter-spacing:var(--btn-letter-spacing, .1em);
   border:var(--btn-border-width, 2px) solid var(--btn-border-color, #111);
   border-radius:var(--btn-border-radius, 60px);
   background:transparent;
}

/* 背景アニメーション用の疑似要素 */
.animated-btn::before{
   position:absolute;
   z-index:0;
   bottom:0;
   left:0;
   width:100%;
   height:0;
   content:"";
   transition:height .3s cubic-bezier(.4, 0, .2, 1);
   border-radius:var(--btn-border-radius, 60px);
   background:var(--btn-bg-hover, #111);
}

.animated-btn:hover::before{
   height:100%;
}

.animated-btn:hover{
   border-color:var(--btn-border-color-hover, var(--btn-border-color, #111));
}

/* 内部コンテナ */
.animated-btn__inner{
   position:relative;
   z-index:1;
   display:flex;
   align-items:center;
   justify-content:center;

   gap:var(--btn-gap, 30px);
}

/* テキスト */
.animated-btn__text{
   transition:color .3s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(.4, 0, .2, 1), opacity .3s cubic-bezier(.4, 0, .2, 1);
   transform:scale(1);
   white-space:nowrap;
   opacity:1;
   color:var(--btn-text-color, #111);
}

.animated-btn:hover .animated-btn__text{
   animation:btn-text-pop .45s cubic-bezier(.645, .045, .355, 1) forwards;
   color:var(--btn-text-color-hover, #fff);
}

/* アイコン */
.animated-btn__icon{
   display:flex;
   align-items:center;
   width:var(--btn-icon-size, 24px);
   height:var(--btn-icon-size, 24px);
   transition:color .3s cubic-bezier(.4, 0, .2, 1);
   color:var(--btn-icon-color, #111);
}

.animated-btn:hover .animated-btn__icon{
   color:var(--btn-icon-color-hover, #fff);
}

.animated-btn__icon svg{
   width:100%;
   height:100%;
}

/* SVG内の各線にトランジションを設定 */
.animated-btn__icon .icon-line-h,.animated-btn__icon .icon-line-top,.animated-btn__icon .icon-line-bottom{
   transition:all .25s cubic-bezier(.4, 0, .2, 1);
}

/* テキストのポップアニメーション */
@keyframes btn-text-pop{
   0%{
      transform:scale(1);
      opacity:1;
   }
   40%{
      transform:scale(.8);
      opacity:0;
   }
   60%{
      transform:scale(.8);
      opacity:0;
   }
   100%{
      transform:scale(1);
      opacity:1;
   }
}

/* ===========================================
   バリエーション - サイズ
   =========================================== */

.animated-btn--small{
   --btn-padding-y:15px;
   --btn-padding-x:40px;
   --btn-font-size:16px;
   --btn-border-width:2px;
   --btn-gap:15px;
   --btn-icon-size:18px;
}

.animated-btn--medium{
   --btn-padding-y:20px;
   --btn-padding-x:60px;
   --btn-font-size:20px;
   --btn-gap:20px;
   --btn-icon-size:20px;
}

.animated-btn--large{
   --btn-padding-y:30px;
   --btn-padding-x:80px;
   --btn-font-size:24px;
   --btn-gap:30px;
   --btn-icon-size:24px;
}

/* ===========================================
   バリエーション - カラー
   =========================================== */

/* デフォルト（黒） */
.animated-btn--default{
   --btn-text-color-hover:#fff;
   --btn-icon-color-hover:#fff;
}

/* 反転（白） */
.animated-btn--inverted{
   --btn-border-color:#fff;
   --btn-text-color:#fff;
   --btn-icon-color:#fff;
   --btn-bg-hover:#fff;
   --btn-text-color-hover:#111;
   --btn-icon-color-hover:#111;
}

/* プライマリ（青） */
.animated-btn--primary{
   --btn-border-color:#06f;
   --btn-text-color:#06f;
   --btn-icon-color:#06f;
   --btn-bg-hover:#06f;
   --btn-text-color-hover:#fff;
   --btn-icon-color-hover:#fff;
}

/* セカンダリ（グレー） */
.animated-btn--secondary{
   --btn-border-color:#666;
   --btn-text-color:#666;
   --btn-icon-color:#666;
   --btn-bg-hover:#666;
   --btn-text-color-hover:#fff;
   --btn-icon-color-hover:#fff;
}

/* 塗りつぶし */
.animated-btn--filled{
   background:var(--btn-border-color, #111);
}

.animated-btn--filled::before{
   background:var(--btn-text-color, #fff);
}

.animated-btn--filled .animated-btn__text{
   color:var(--btn-text-color-hover, #fff);
}

.animated-btn--filled:hover .animated-btn__text{
   color:var(--btn-text-color, #111);
}

.animated-btn--filled .animated-btn__icon{
   color:var(--btn-text-color-hover, #fff);
}

.animated-btn--filled:hover .animated-btn__icon{
   color:var(--btn-text-color, #111);
}

/* ===========================================
   バリエーション - アイコン位置
   =========================================== */

.animated-btn--icon-left .animated-btn__inner{
   flex-direction:row-reverse;
}

.animated-btn--icon-only .animated-btn__text{
   display:none;
}

.animated-btn--icon-only{
   --btn-padding-x:var(--btn-padding-y, 30px);
}

/* アイコンなし */
.animated-btn--no-icon .animated-btn__icon{
   display:none;
}

@media (max-width: 768px){
   .animated-btn__text{
      font-size:16px;
   }

   .animated-btn--medium{
      --btn-padding-x:40px;
   }
}