/* =========================
   ログインページデザイン調整
========================= */

body.mypage .ec-role {
  max-width: 800px;
  margin: 60px auto 100px;
}

body.mypage .ec-pageHeader h1 {
  text-align: center;
  font-size: 24px;
  margin-bottom: 30px;
}

body.mypage .ec-login {
  background: #fff;
  padding: 40px 40px 45px;
  border-radius: 12px;
  border: 1px solid #e5e5e5;
  max-width: 560px;
  margin: auto;
}

body.mypage .ec-login__icon {
  text-align: center;
  margin-bottom: 18px;
}

body.mypage .ec-login__icon img {
  width: 68px;
  opacity: .5;
}

/* 入力欄 */
body.mypage .ec-input input {
  padding: 14px 14px;
  font-size: 15px;
  margin-bottom: 14px;
  border-radius: 8px;
}

/* ボタン */
body.mypage .ec-blockBtn--cancel {
  background: #222;
  color: #fff;
  border-radius: 8px;
  padding: 16px;
  font-size: 15px;
  transition: .2s;
}

body.mypage .ec-blockBtn--cancel:hover {
  background: #000;
  transform: scale(1.02);
}

/* 下のリンク */
body.mypage .ec-login__link {
  margin-top: 12px;
  text-align: center;
}

body.mypage .ec-login__link a {
  color: #666;
  text-decoration: none;
}

body.mypage .ec-login__link a:hover {
  text-decoration: underline;
}

/* =============================
   EC-CUBE ログイン画面 余白調整（mypage専用）
============================= */

body.mypage .ec-layoutRole__contents {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.mypage .ec-pageHeader {
    margin-top: 0 !important;
    padding-top: 10px !important;
}

body.mypage .ec-role {
    margin-top: 0 !important;
    padding-top: 15px !important;
}

body.mypage .ec-layoutRole__main {
    padding-top: 0 !important;
}

/* 保険：ヘッダーは必ず表示させる */
body.mypage header.site-header {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 999;
}


/* スマホ対応 */
@media(max-width: 600px){
  body.mypage .ec-login {
    padding: 28px 20px;
  }

  body.mypage .ec-role {
    margin: 30px 12px 60px;
  }
}