@charset "utf-8";
/* ============================================================
  PoC 結果モーダル
  /point/lp/（結果モーダル4種）と TOPページ（対象外ユーザー通知）で共用する。
   ============================================================ */
.plp-modal,
.plp-modal * {
  box-sizing: border-box;
}
.plp-modal img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
.plp-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  overflow-y: auto;
  background: rgba(0, 0, 0, .5);
  z-index: 9000;
  align-items: center;
  justify-content: center;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
  color: #000;
  line-height: 1.6;
}
.plp-modal-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 300px;
  margin: auto;
}
.plp-modal-box {
  display: none;
  width: 100%;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}
.plp-modal[data-type="earn-office"] .plp-modal-earn--office,
.plp-modal[data-type="earn-login"] .plp-modal-earn--login,
.plp-modal[data-type="done"] .plp-modal-done,
.plp-modal[data-type="error"] .plp-modal-error--general,
.plp-modal[data-type="not-target"] .plp-modal-error--not-target {
  display: flex;
  flex-direction: column;
}
.plp-modal-x {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.plp-modal-x::before,
.plp-modal-x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42.43px;
  height: 1px;
  margin: -0.5px 0 0 -21.215px;
  background: #fff;
}
.plp-modal-x::before {
  transform: rotate(45deg);
}
.plp-modal-x::after {
  transform: rotate(-45deg);
}
.plp-modal-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 20px;
}
.plp-modal-status-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 10px 30px 10px 20px;
  background: #021d6b;
  border-radius: 50px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: opacity .2s;
}
.plp-modal-status-btn:hover {
  opacity: .8;
}
.plp-modal-status-btn img {
  flex: none;
  width: 16px;
}
.plp-modal-status-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 22px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}
/* ---- BIZ獲得モーダル（出社・ログイン共通） ---- */
.plp-modal-earn {
  gap: 20px;
  padding-bottom: 40px;
}
.plp-modal-mv {
  position: relative;
  height: 210px;
  overflow: hidden;
  background: #fff url(/point/lp/img/modal-mv-bg.png) no-repeat center top / 100% auto;
}
.plp-modal-ribbon {
  position: absolute;
  top: 45px;
  left: 20px;
  width: 260px;
}
.plp-modal-mv-text {
  position: absolute;
  top: 91px;
  left: 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 240px;
}
.plp-modal-earn-lead {
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.plp-modal-earn-lead .lg {
  font-size: 28px;
}
.plp-modal-earn-lead .sm {
  font-size: 16px;
}
.plp-modal-earn-lead .md {
  font-size: 22px;
}
.plp-modal-earn-num {
  display: flex;
  align-items: center;
  gap: 20px;
}
.plp-modal-coin {
  flex: none;
  width: 70px;
}
.plp-modal-biz {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: #ee5661;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.plp-modal-biz i,
.plp-modal-biz b {
  font-size: 70px;
  font-style: normal;
}
.plp-modal-biz em {
  font-size: 37px;
  font-style: normal;
}
.plp-modal-earn-note {
  padding: 13px;
  background: #fff0d2;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
/* ---- 本日獲得済みモーダル ---- */
.plp-modal-done {
  gap: 20px;
  padding-bottom: 40px;
}
.plp-modal-done-circle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 210px;
  height: 210px;
  margin: 40px auto 20px;
  padding: 50px 20px;
  background: #e6f8ff;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
/* ---- エラーモーダル ---- */
.plp-modal-error {
  gap: 45px;
  align-items: center;
  padding: 40px 30px;
}
.plp-modal-error-textbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}
.plp-modal-error-icon {
  width: 100px;
}
.plp-modal-error-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.plp-modal-error-desc {
  width: 100%;
  font-size: 16px;
  line-height: 1.6;
}
.plp-modal-error-notes {
  width: 100%;
}
.plp-modal-error-note {
  padding-left: 1.3em;
  font-size: 12px;
  line-height: 1.6;
  text-align: left;
  text-indent: -1.3em;
}
.plp-modal-error-note + .plp-modal-error-note {
  margin-top: 10px;
}
.plp-modal-error-btn {
  width: 100%;
  height: 50px;
  padding: 11px 10px;
  background: #004098;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  transition: opacity .2s;
}
.plp-modal-error-btn:hover {
  opacity: .8;
}
/* ------------------------------------------------------------
  TOPページ用（PoC対象外ユーザー通知）
  TOPには z-index 99999 の #profile_incomplete_modal や
  10000 のヘッダーメニューがあるため、それより上に出す。
------------------------------------------------------------ */
#js-point-not-target-modal {
  z-index: 100000;
}