/* ===============================
   共通：右上固定配置ボタン
   =============================== */
.header-login-buttons {
  position: fixed;
  top: 10px;
  right: 15px;
  display: flex;
  gap: 6px;
  align-items: center;
  z-index: 9999;
  font-weight: 400;
}

.header-login-buttons a,
.header-login-buttons .btn-logout {
  background: #fff;
  color: #0073aa;
  padding: 4px 10px;
  border: 1px solid #0073aa;
  border-radius: 4px;
  text-decoration: none;
  font-size: 12px;
  font-weight: bold;
  transition: 0.2s;
}

.header-login-buttons a:hover,
.header-login-buttons .btn-logout:hover {
  color: #fff;
  background: #0073aa;
}

.header-login-buttons .btn-logout {
  border-color: #0073aa;
  background: #fff;
}

.header-login-buttons .user-name {
  margin-top: 2px;
  font-size: 12px;
  color: #0073aa;
}

/* スマホ調整 */
@media (max-width: 767px) {
  .header-login-buttons {
    top: 8px;
    right: 6px;
    gap: 4px;
  }
  .header-login-buttons a,
  .header-login-buttons .btn-logout {
    padding: 2px 6px;
    font-size: 11px;
  }
}

/* ===============================
   m_profile/?a=pwdchange のキャンセルボタン
   =============================== */

.cancel_wrapper { 
  text-align: center;
  margin-top: 0;   /* ← 上余白を消す */
}
.cancel_button {
  display: inline-flex;          /* フレックスで中身を制御 */
  align-items: center !important;           /* 縦方向の中央揃え */
  justify-content: center !important;       /* 横方向の中央揃え */
  min-height:40px;              /* 最低高さを指定 */
  padding: 0 24px;            /* 左右だけ余白 */
 
 
  font-size: 14px;
  background: #f8f7f8;
  color: #f8669c;
  border: 1px solid #f8669c;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  box-sizing: border-box;
}

.cancel_button:hover {
  background: #f8669c;
  color: #fff;
}


/* PC用：フォーム幅を狭める（中央寄せ） */
#wpmem_login_form,
#wpmem_register_form,
#wpmem_profile_form,
#wpmem_pwdchange_form {
  max-width: 440px;   /* ← PC時の横幅（調整可） */
  margin: 60px auto;  /* ← 上下60px、左右は自動で中央寄せ */
  padding: 40px 32px; /* ← 内側余白 */
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  box-sizing: border-box;
}

/* スマホ用：余白なしで全幅 */
@media screen and (max-width: 767px) {
  #wpmem_login_form,
  #wpmem_register_form,
  #wpmem_profile_form,
  #wpmem_pwdchange_form {
    max-width: 100%;      /* ← スマホでは画面幅いっぱい */
    margin: 20px 0;       /* ← 左右の余白なし */
    border-radius: 0;     /* ← 端まで表示するので角丸なし推奨 */
    padding: 20px 16px;   /* ← 上下20px, 左右16pxで少し余白 */
  }
}