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

.btn{
 display:inline-block;
 padding:0.625rem 1.25rem;
 border-radius:0.25rem;
 text-decoration:none;
 transition:0.2s;
}

.btn-primary{
 background:#333;
 color:#fff;
}

.btn-primary:hover{
 opacity:.8;
}

.btn-outline{
 border:1px solid #333;
 color:#333;
}

.btn-outline:hover{
 background:#333;
 color:#fff;
}


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

.square_btn{
 font-size:1.25rem;
 display:inline-block;
 padding:0.4em 0.8em;
 color:#fff;
 text-decoration:none;
 background:#3c555f;
 border:1px solid #000;
 border-radius:0.125rem;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
 text-shadow:0 1px 0 rgba(0,0,0,.2);
}

.main a.square_btn{
 color:#fff;
}

.container-inner .main a.square_btn:hover{
 background:#fff;
 color:#67c5ff !important;
 border:1px solid #67c5ff;
 border-radius:0.3125rem;
}


/* =================================
テキストボタン
================================= */

a.btn-beta,
a.btn-border{
 cursor:pointer;
 user-select:none;
 transition:all .3s;
 text-align:center;
 vertical-align:middle;
 text-decoration:none;
 letter-spacing:.15em;
 padding:.8em 2.2em;
}


/* =================================
テキストボタン（ベタ）
================================= */

a.btn-beta{
 border:1px solid #888;
 border-radius:0;
 background:#fff;
}

a.btn-beta:hover{
 color:#fff;
 background:#888;
}


/* =================================
テキストボタン（上下ライン）
================================= */

a.btn-border{
 position:relative;
 display:inline-block;
}

a.btn-border:before,
a.btn-border:after{
 position:absolute;
 width:100%;
 height:1px;
 content:"";
 transition:all .3s;
 background:#888;
}

a.btn-border:before{
 top:0;
 left:0;
}

a.btn-border:after{
 right:0;
 bottom:0;
}

a.btn-border:hover:before,
a.btn-border:hover:after{
 width:0;
}