body {
  background: #FFFFFF;
}

/* Button Base */
.c-button,
.c-button--primary,
.c-button--danger {
  display: inline-block;
  padding: 16px 40px;
  border-radius: 0 !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Default Button */
.c-button {
  background: #eff2f4;
}
.c-button,
.c-button:link,
.c-button:hover,
.c-button:active,
.c-button:visited {
  color: #35454c;
  text-decoration: none;
}
.c-button:hover {
  background: #dfe5e8;
  opacity: 0.85;
}

.c-button__group {
  margin-top: 0 !important;
}

/* Primary Button (Login) */
.c-button--primary {
  background: #eff2f4;
}
.c-button--primary,
.c-button--primary:link,
.c-button--primary:hover,
.c-button--primary:active,
.c-button--primary:visited {
  color: #35454c;
  text-decoration: none;
}
.c-button--primary:hover {
  background: #dfe5e8;
  opacity: 0.85;
}

/* Danger Button */
.c-button--danger {
  background: <{$button3_bgcolor}>;
}
.c-button--danger,
.c-button--danger:link,
.c-button--danger:hover,
.c-button--danger:active,
.c-button--danger:visited {
  color: <{$button3_font_color}>;
  text-decoration: none;
}
.c-button--danger:hover {
  background: <{$button3_bgcolor_hover}>;
  opacity: 0.85;
}

/* Input Fields (ID, Password) */
.c-input--text {
  box-sizing: border-box;
  padding: 16px 15px;
  border-radius: 0 !important;
  font-size: 14px;
  font-family: inherit;
  background-color: #fafafa;
  border: 1px solid #d7dee2;
  color: #222222;
  width: 100%;
  transition: all 0.3s ease;
}

/* Input Focus State */
.c-input--text:focus {
  background-color: #ffffff;
  border-color: #607d8b;
  outline: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

/* LINE Login Button Base */
.c-button--line {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  height: 52px !important;
  margin-top: 0 !important; 
  margin-bottom: 0 !important;
  padding: 0 40px !important;
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 1px solid #000000 !important;
  border-radius: 0 !important;
  font-weight: 400 !important;
  letter-spacing: 0.15em !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color 0.3s ease, color 0.3s ease !important;
  text-decoration: none !important;
  overflow: visible !important;
}

/* LINE Login Button Hover */
.c-button--line:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
  height: 52px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 40px !important;
  transform: none !important;
}

/* LINE Icon */
.c-button--line img,
.c-button--line svg,
.c-button--line::before {
  display: block !important;
  width: 22px !important;
  height: auto !important; 
  max-height: 22px !important;
  object-fit: contain !important;
  margin: 0 8px 5px 0 !important;
  padding: 0 !important;
  filter: grayscale(100%) brightness(200%) !important;
  opacity: 1 !important;
  border: none !important;
  box-shadow: none !important;
}

/* LINE Icon Hover */
.c-button--line:hover img,
.c-button--line:hover svg,
.c-button--line:hover::before {
  filter: grayscale(100%) brightness(0%) !important;
  margin: 0 8px 5px 0 !important;
}