/* The LINE Login button, as LINE's guidelines specify it
   (developers.line.biz/en/docs/line-login/login-button/):
   LINE's own icon, unmodified (line_44.png / line_88.png from LINE's
   button package), a separator, and the text on one line.
   Colours are LINE's only: base #06C755; hover and press darken it with
   black at 10% and 30%, under the separator, icon and text; separator black
   at 8%; text and icon white.
   Sizes follow LINE's 44-point button: the icon square is 44px, the text
   has the speech bubble's width (32px) of padding on each side, and the
   clear space around it is the bubble's own margin (6px). */
.line-login {
  display: inline-flex; align-items: stretch; vertical-align: middle;
  height: 44px; margin: 6px; border-radius: 5px; overflow: hidden;
  background: #06C755; color: #FFFFFF; text-decoration: none; cursor: pointer;
  font: 700 15px/44px -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0; white-space: nowrap;
}
.line-login:hover { background: linear-gradient(rgba(0, 0, 0, .10), rgba(0, 0, 0, .10)), #06C755; }
.line-login:active { background: linear-gradient(rgba(0, 0, 0, .30), rgba(0, 0, 0, .30)), #06C755; }
.line-login:focus-visible { outline: 2px solid #06C755; outline-offset: 3px; }
.line-login img { display: block; flex: none; width: 44px; height: 44px; }
.line-login .sep { flex: none; width: 1px; background: rgba(0, 0, 0, .08); }
.line-login .text { padding: 0 32px; color: #FFFFFF; }