/* ==========================
Button Wrap
========================== */

.c-btn-wrap{

text-align:center;

}


/* ==========================
Button
========================== */

.c-btn{

display:inline-flex;
align-items:center;
justify-content:center;

padding:18px 54px;

background:#fff;

color:#222;

text-decoration:none;

font-size:12px;

letter-spacing:.24em;

position:relative;

overflow:hidden;

border:none;

border-radius:0;

box-shadow:
0 8px 20px rgba(0,0,0,.05);

transition:
all .6s cubic-bezier(.19,1,.22,1);

}


.c-btn-inner{

display:flex;
align-items:center;
gap:12px;

position:relative;
z-index:2;

}


/* 上ライン */

.c-btn::before{

content:"";

position:absolute;

top:0;
left:50%;

transform:translateX(-50%);

width:0;
height:1px;

/* 両端フェード */

background:
linear-gradient(
90deg,
transparent 0%,
rgba(188,158,120,.3) 10%,
var(--accent) 50%,
rgba(188,158,120,.3) 90%,
transparent 100%
);

transition:
width .8s cubic-bezier(.19,1,.22,1);

}


/* 下ライン */

.c-btn::after{

content:"";

position:absolute;

bottom:0;
left:50%;

transform:translateX(-50%);

width:0;
height:1px;

background:
linear-gradient(
90deg,
transparent 0%,
rgba(188,158,120,.3) 10%,
var(--accent) 50%,
rgba(188,158,120,.3) 90%,
transparent 100%
);

transition:
width .8s cubic-bezier(.19,1,.22,1);

}


/* hover */

.c-btn:hover{

transform:
translateY(-2px);

box-shadow:
0 16px 30px rgba(0,0,0,.08);

}


.c-btn:hover::before,
.c-btn:hover::after{

width:100%;

}


/* icon */

.c-btn i{

font-size:12px;

opacity:.6;

transition:.4s;

}


.c-btn:hover i{

transform:
translateX(4px);

opacity:1;

}

.c-btn-inner{
  display:flex;
  align-items:center;
  gap:12px;
}

.banner-icon{
  width:50px;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.banner-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
}