@charset "utf-8";
/* ============================================================
  PoC 第二弾（ログインフェーズ）ポイント確認LP
   ============================================================ */
body #main {
  padding-top: 0;
}
.maincontent-layout.plp-layout {
  padding: 0;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
  color: #000;
  line-height: 1.6;
}
.plp-layout * {
  box-sizing: border-box;
}
.plp-layout img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
.plp-layout section {
  margin: 0;
}
.plp-layout em {
  font-style: normal;
}
@media screen and (max-width: 768px) {
  .plp-pc-only {
    display: none !important;
  }
}
@media screen and (min-width: 769px) {
  .plp-sp-only {
    display: none !important;
  }
}
/* ------------------------------------------------------------
  FV（メインビジュアル）
------------------------------------------------------------ */
.plp-fv {
  margin: 0;
  line-height: 0;
}
.plp-fv img {
  width: 100%;
}
/* ------------------------------------------------------------
  未ログイン時: ログイン誘導エリア
------------------------------------------------------------ */
.plp-login-area {
  padding: 60px 20px 100px;
  text-align: center;
}
.plp-login-text {
  font-size: 16px;
}
.plp-login-btn {
  display: inline-block;
  margin-top: 24px;
  padding: 16px 56px;
  background: #004098;
  border-radius: 40px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .2s;
}
.plp-login-btn:hover {
  opacity: .8;
}
/* ------------------------------------------------------------
  企画概要
------------------------------------------------------------ */
.plp-overview {
  position: relative;
  padding: 60px 55px;
  background: #fff url(/point/login/img/section01-bg.png) center bottom / max(100%, 1366px) 535px no-repeat;
  overflow: hidden;
}
.plp-overview-box {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 31px 30px 36px 20px;
  background: #fff;
  border: 3px solid #002063;
  border-radius: 0 50px 50px 50px;
  box-shadow: 0 4px 7px rgba(0, 0, 0, .14);
}
.plp-overview-lead {
  position: absolute;
  top: max(-26px, -2.3vw);
  left: -3px;
  margin: 0;
  width: min(176px, 14vw);
  line-height: 0;
}
.plp-steps {
  display: flex;
  align-items: center;
  justify-content: center;
}
.plp-steps-item {
  margin: 0;
  line-height: 0;
}
.plp-steps-item img {
  width: 232px;
}
.plp-steps-item--goal img {
  width: 238px;
}
.plp-steps-arrow {
  flex: none;
  line-height: 0;
  margin: 22px -11px 0 1px;
}
.plp-steps-arrow img {
  width: 32px;
}
.plp-overview-dec {
  position: absolute;
}
.plp-overview-dec--01 {
  top: 33px;
  right: -83px;
  width: 93px;
}
.plp-overview-dec--02 {
  bottom: -45px;
  left: -78px;
  width: 102px;
}
@media screen and (max-width: 768px) {
  .plp-overview {
    padding: 60px 20px 90px;
    background-image: url(/point/login/img/section01-bg-sp.png);
    background-size: 100% auto;
  }
  .plp-overview-box {
    padding: 32px 26px 36px 15px;
    border-radius: 0 50px 50px 50px;
    max-width: 420px;
    margin: 0 auto;
  }
  .plp-overview-lead {
    top: -26px;
    width: 151px;
  }
  .plp-steps {
    flex-direction: column;
    gap: 3px;
  }
  .plp-steps-item {
    width: 100%;
  }
  .plp-steps-item img,
  .plp-steps-item--goal img {
    width: 100%;
  }
  .plp-steps-arrow {
    margin: 0 0 -23px 10px;
  }
  .plp-steps-arrow img {
    width: 34px;
  }
  .plp-overview-dec--01 {
    top: -59px;
    right: -29px;
    width: 76px;
  }
  .plp-overview-dec--02 {
    bottom: -83px;
    left: 1px;
    width: 84px;
  }
}
/* ------------------------------------------------------------
  現在のBIZポイント・ステータスチェック
------------------------------------------------------------ */
.plp-status {
  position: relative;
  padding: 60px 20px;
  background: #e9f5ff;
  scroll-margin-top: 40px;
}
.plp-status-card {
  position: relative;
  max-width: min(1080px, 98.182vw);
  margin: 0 auto;
  background: #fff;
  border: min(6px, 0.545vw) solid #002063;
  border-radius: min(30px, 2.727vw);
  overflow: hidden;
}
.plp-status-titlebar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(20px, 1.818vw);
  margin: 0;
  padding: min(7px, 0.636vw) min(30px, 2.727vw);
  background: #021d6b;
  color: #fff;
  font-size: min(28px, 2.545vw);
  font-weight: 700;
  line-height: 1.6;
}
.plp-status-titlebar img {
  width: min(36px, 3.273vw);
  flex: none;
}
.plp-status-body {
  display: flex;
  flex-direction: column;
  gap: min(20px, 1.818vw);
  padding: min(40px, 3.636vw) min(34px, 3.091vw) min(34px, 3.091vw);
}
.plp-status-cols {
  display: flex;
  align-items: stretch;
}
.plp-status-total {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: min(20px, 1.818vw);
  padding-right: min(30px, 2.727vw);
  border-right: 1px solid #dce0e7;
}
.plp-status-total-heading {
  font-size: min(24px, 2.182vw);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.plp-status-total-heading small {
  font-size: min(16px, 1.455vw);
  font-weight: 700;
}
.plp-status-num {
  position: relative;
  display: inline-block;
  padding-bottom: min(7px, 0.636vw);
  text-align: center;
  line-height: 1;
  white-space: nowrap;
}
.plp-status-num-kira {
  position: absolute;
  top: max(-7px, -0.636vw);
  left: max(-70px, -6.364vw);
  width: min(57px, 5.182vw);
}
.plp-status-num-value {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: min(90px, 8.182vw);
  line-height: 0.75;
  color: #ee5661;
}
.plp-status-num-unit {
  margin-left: min(6px, 0.545vw);
  font-family: 'Roboto Condensed', sans-serif;
  font-size: min(45px, 4.091vw);
  font-weight: 700;
  vertical-align: bottom;
}
.plp-status-week {
  width: 100%;
  padding: min(12px, 1.091vw) min(16px, 1.455vw) min(13px, 1.182vw);
  background: #f5f8fd;
  border: min(3px, 0.273vw) solid #d6e1f4;
  border-radius: min(11px, 1vw);
  text-align: center;
}
.plp-status-week-label {
  font-size: min(19px, 1.727vw);
  font-weight: 700;
}
.plp-status-week-value {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: min(10px, 0.909vw);
  line-height: 1;
}
.plp-status-week-num {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: min(50px, 4.545vw);
  color: #ee5661;
}
.plp-status-week-unit {
  margin-left: min(5px, 0.455vw);
  font-family: 'Roboto Condensed', sans-serif;
  font-size: min(28px, 2.545vw);
  font-weight: 700;
  margin-bottom: 8px;
}
.plp-status-week-done {
  display: none;
  width: min(45px, 4.091vw);
  margin-left: min(15px, 1.364vw);
  margin-bottom: 5px;
}
#js-point-lp[data-this-week="1"] .plp-status-week-done {
  display: block;
}
.plp-status-rank-col {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: min(11px, 1vw);
  width: min(308px, 28vw);
  padding: 0 min(30px, 2.727vw);
  border-right: 1px solid #dce0e7;
}
.plp-status-rank-heading {
  font-size: min(24px, 2.182vw);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.plp-rank {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(10px, 0.909vw);
  padding: min(10px, 0.909vw) 0;
}
.plp-rank-icon {
  display: none;
  width: min(80px, 7.273vw);
  height: min(83px, 7.545vw);
  background: center bottom / contain no-repeat;
}
#js-point-lp[data-rank="Bronze"] .plp-rank-icon {
  display: block;
  background-image: url(/point/login/img/icon_bronze.png);
}
#js-point-lp[data-rank="Silver"] .plp-rank-icon {
  display: block;
  background-image: url(/point/login/img/icon_silver.png);
}
#js-point-lp[data-rank="Gold"] .plp-rank-icon {
  display: block;
  background-image: url(/point/login/img/icon_gold.png);
}
.plp-rank-name {
  font-size: min(26px, 2.364vw);
  font-weight: 900;
  line-height: 1;
  color: #999;
}
#js-point-lp[data-rank="Bronze"] .plp-rank-name {
  color: #bb5b21;
}
#js-point-lp[data-rank="Silver"] .plp-rank-name {
  color: #0062b4;
}
#js-point-lp[data-rank="Gold"] .plp-rank-name {
  color: #dd8c01;
}
.plp-status-about {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(8px, 0.727vw);
  width: min(252px, 22.909vw);
  padding: min(7px, 0.636vw) min(16px, 1.455vw);
  background: #f5f8fd;
  border: min(3px, 0.273vw) solid #97b6e4;
  border-radius: min(30px, 2.727vw);
  color: #004098;
  font-size: min(16px, 1.455vw);
  font-weight: 700;
  text-decoration: none;
  transition: opacity .2s;
}
.plp-status-about:hover {
  opacity: .8;
}
.plp-status-about-arrow {
  width: min(10px, 0.909vw);
  height: min(10px, 0.909vw);
  margin-top: max(-3px, -0.273vw);
  border-right: min(2px, 0.182vw) solid #004098;
  border-bottom: min(2px, 0.182vw) solid #004098;
  transform: rotate(45deg);
}
.plp-status-next {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  padding-left: min(30px, 2.727vw);
}
.plp-status-next-heading {
  font-size: min(24px, 2.182vw);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.plp-status-next-heading small {
  font-size: min(18px, 1.636vw);
  font-weight: 700;
}
.plp-status-next-heading--max {
  display: none;
}
.plp-status-remain {
  display: flex;
  justify-content: center;
  gap: min(6px, 0.545vw);
  margin-top: min(10px, 0.909vw);
  line-height: 1;
  align-items: flex-end;
}
.plp-status-remain-label {
  font-size: min(35px, 3.182vw);
  font-weight: 700;
  margin-bottom: min(10px, 0.909vw);
}
.plp-status-remain-num {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: min(60px, 5.455vw);
  color: #ee5661;
}
.plp-status-remain-unit {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: min(35px, 3.182vw);
  margin-bottom: min(7px, 0.636vw);
}
.plp-status-notch {
  width: min(297px, 27vw);
  margin-top: min(17px, 1.545vw);
}
#js-point-lp[data-max-rank="1"] .plp-status-next-heading--remain,
#js-point-lp[data-max-rank="1"] .plp-status-remain,
#js-point-lp[data-max-rank="1"] .plp-status-notch {
  display: none;
}
#js-point-lp[data-max-rank="1"] .plp-status-next-heading--max {
  display: block;
}
.plp-status-max-btn {
  display: none;
  width: min(330px, 30vw);
  margin-top: min(22px, 2vw);
  margin-bottom: min(20px, 1.818vw);
  transition: opacity .2s;
}
.plp-status-max-btn:hover {
  opacity: .8;
}
#js-point-lp[data-max-rank="1"] .plp-status-max-btn {
  display: block;
}
.plp-progress {
  position: relative;
  width: min(330px, 30vw);
  height: min(118px, 10.727vw);
}
.plp-progress::before {
  content: '';
  position: absolute;
  top: min(23px, 2.091vw);
  left: min(30px, 2.727vw);
  width: min(273px, 24.818vw);
  height: min(16px, 1.455vw);
  background: #d9d9d9;
}
.plp-progress-bar {
  position: absolute;
  top: min(23px, 2.091vw);
  left: min(30px, 2.727vw);
  width: min(273px, 24.818vw);
  height: min(16px, 1.455vw);
  overflow: hidden;
}
.plp-progress-bar i {
  display: block;
  height: 100%;
  background: #ee5661;
}
.plp-progress-marks {
  margin: 0;
  padding: 0;
  list-style: none;
}
.plp-progress-mark {
  position: absolute;
  z-index: 1;
  top: min(13px, 1.182vw);
  width: min(56px, 5.091vw);
  text-align: center;
}
.plp-progress-mark--bronze {
  left: max(-2px, -0.182vw);
}
.plp-progress-mark--silver {
  left: min(136px, 12.364vw);
}
.plp-progress-mark--gold {
  left: min(274px, 24.909vw);
}
.plp-progress-mark img {
  display: block;
  width: min(40px, 3.636vw);
  height: min(41px, 3.727vw);
  margin: 0 auto;
  object-fit: contain;
}
.plp-progress-mark-name {
  display: block;
  margin-top: min(17px, 1.545vw);
  font-size: min(14px, 1.273vw);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.plp-progress-mark-biz {
  display: block;
  margin-top: min(5px, 0.455vw);
  font-size: min(16px, 1.455vw);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.plp-progress-mark-biz b {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: min(24px, 2.182vw);
  font-weight: 700;
}
.plp-weeks {
  margin: 0;
  padding: 0;
  list-style: none;
}
.plp-weeks-mark {
  display: flex;
  align-items: center;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}
.plp-weeks-mark::before {
  content: '';
  flex: none;
  width: 36px;
  height: 36px;
  background: url(/point/login/img/section02-icon-achievement-off.png) center / contain no-repeat;
}
.plp-weeks-mark::after {
  content: '未ログイン';
  color: #d6e1f4;
}
.plp-weeks-item[data-achieved="1"] .plp-weeks-mark::before {
  background-image: url(/point/login/img/section02-icon-achievement-on.png);
}
.plp-weeks-item[data-achieved="1"] .plp-weeks-mark::after {
  content: '達成!';
  color: #ee5661;
}
.plp-weeks-name {
  color: #fff;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  background: #97b6e4;
}
.plp-weeks-item[data-achieved="1"] .plp-weeks-name {
  background: #ee5661;
}
.plp-weeks-row {
  display: flex;
  align-items: stretch;
  background: #f5f8fd;
  border: min(3px, 0.273vw) solid #d6e1f4;
  border-radius: min(11px, 1vw);
  overflow: hidden;
}
.plp-weeks-row-label {
  display: flex;
  flex: none;
  align-items: center;
  padding: 0 min(14px, 1.273vw);
  border-right: min(3px, 0.273vw) solid #d6e1f4;
  font-size: min(16px, 1.455vw);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}
.plp-weeks--pc {
  display: flex;
  flex: 1;
}
.plp-weeks--pc .plp-weeks-item {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: min(10px, 0.909vw);
  padding: min(10px, 0.909vw) min(17px, 1.545vw);
  border-right: min(3px, 0.273vw) solid #d6e1f4;
}
.plp-weeks--pc .plp-weeks-item:last-child {
  border-right: none;
}
.plp-weeks--pc .plp-weeks-item[data-achieved="1"] {
  background: #fffd9b;
}
.plp-weeks--pc .plp-weeks-head {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: min(3px, 0.273vw);
}
.plp-weeks--pc .plp-weeks-date {
  color: #97b6e4;
  font-size: min(12px, 1.091vw);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.plp-weeks--pc .plp-weeks-item[data-achieved="1"] .plp-weeks-date {
  color: #ee5661;
}
.plp-weeks--pc .plp-weeks-name {
  padding: min(5px, 0.455vw) min(16px, 1.455vw);
  border-radius: min(30px, 2.727vw);
  font-size: min(14px, 1.273vw);
}
.plp-weeks--pc .plp-weeks-mark {
  gap: min(5px, 0.455vw);
  font-size: min(14px, 1.273vw);
}
.plp-weeks--pc .plp-weeks-mark::before {
  width: min(36px, 3.273vw);
  height: min(36px, 3.273vw);
}
.plp-status-arrow {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: min(317px, 28.818vw);
  z-index: 1;
}
@media screen and (min-width: 769px) and (max-width: 1099px) {
  .plp-status-body {
    padding-right: 2.5vw;
    padding-left: 2.5vw;
  }
  .plp-status-rank-col {
    width: 26vw;
  }
}
@media screen and (max-width: 768px) {
  .plp-status-card {
    max-width: 420px;
    border-width: 4px;
    border-radius: 30px;
  }
  .plp-status-titlebar {
    gap: 20px;
    padding: 7px 26px;
    font-size: 20px;
    justify-content: flex-start;
  }
  .plp-status-titlebar img {
    width: 32px;
  }
  .plp-status-body {
    gap: 0;
    padding: 0 16px;
  }
  .plp-status-cols {
    flex-direction: column;
  }
  .plp-status-total {
    gap: 9px;
    padding: 20px 0;
    border-right: none;
    border-bottom: 1px solid #dce0e7;
  }
  .plp-status-total-heading {
    padding-bottom: 5px;
    font-size: 18px;
  }
  .plp-status-total-heading small {
    font-size: 14px;
  }
  .plp-status-num {
    padding-bottom: 10px;
  }
  .plp-status-num-kira {
    top: -2px;
    left: -61px;
    width: 42px;
  }
  .plp-status-num-value {
    font-size: 90px;
  }
  .plp-status-num-unit {
    margin-left: 6px;
    font-size: 45px;
  }
  .plp-status-week {
    padding: 10px 12px;
    border-width: 3px;
    border-radius: 11px;
  }
  .plp-status-week-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .plp-status-week-label {
    font-size: 14px;
    line-height: 1.3;
    text-align: left;
  }
  .plp-status-week-value {
    margin-top: 0;
  }
  .plp-status-week-num {
    font-size: 50px;
  }
  .plp-status-week-unit {
    margin-left: 5px;
    font-size: 28px;
    margin-bottom: 8px;
  }
  .plp-status-week-done {
    width: 45px;
    margin-left: 15px;
    margin-bottom: 4px;
  }
  .plp-weeks--sp {
    display: flex;
    margin-top: 7px;
    border: 2px solid #d6e1f4;
    border-radius: 7px;
    overflow: hidden;
  }
  .plp-weeks--sp .plp-weeks-item {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-bottom: 6px;
    background: #fff;
    border: 1px solid #d6e1f4;
  }
  .plp-weeks--sp .plp-weeks-item[data-achieved="1"] {
    background: #fffec8;
  }
  .plp-weeks--sp .plp-weeks-name {
    width: 100%;
    padding: 5px 0 7px;
    font-size: 14px;
    text-align: center;
  }
  .plp-weeks--sp .plp-weeks-date {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
  }
  .plp-weeks--sp .plp-weeks-mark {
    flex-direction: column;
    gap: 4px;
    font-size: 10px;
  }
  .plp-weeks--sp .plp-weeks-item[data-achieved="1"] .plp-weeks-mark {
    font-size: 14px;
  }
  .plp-status-rank-col {
    gap: 10px;
    width: 100%;
    padding: 20px 0;
    border-right: none;
    border-bottom: 1px solid #dce0e7;
  }
  .plp-status-rank-heading {
    font-size: 18px;
  }
  .plp-rank {
    flex-direction: row;
    gap: 10px;
    padding: 5px 0;
  }
  .plp-rank-icon {
    width: 70px;
    height: 72px;
  }
  .plp-rank-name {
    font-size: 22px;
  }
  .plp-status-about {
    gap: 8px;
    width: 252px;
    padding: 7px 16px;
    border-width: 3px;
    border-radius: 30px;
    font-size: 16px;
  }
  .plp-status-about-arrow {
    width: 10px;
    height: 10px;
    margin-top: -3px;
    border-right-width: 2px;
    border-bottom-width: 2px;
  }
  .plp-status-next {
    width: 100%;
    padding: 20px 0 23px;
  }
  .plp-status-next-heading {
    font-size: 18px;
  }
  .plp-status-next-heading small {
    font-size: 16px;
  }
  .plp-status-remain {
    gap: 6px;
    margin-top: 7px;
  }
  .plp-status-remain-label {
    font-size: 22px;
  }
  .plp-status-remain-num {
    font-size: 40px;
  }
  .plp-status-remain-unit {
    font-size: 22px;
  }
  .plp-status-remain-label {
    margin-bottom: 10px;
  }
  .plp-status-remain-unit {
    margin-bottom: 7px;
  }
  .plp-status-notch {
    width: 153px;
    margin-top: 6px;
  }
  .plp-status-max-btn {
    width: min(100%, 297px);
    margin-top: 12px;
    margin-bottom: 12px;
  }
  .plp-progress {
    width: 297px;
    height: 106px;
    margin-top: 0;
  }
  .plp-progress::before {
    top: 21px;
    left: 27px;
    width: 246px;
    height: 14px;
  }
  .plp-progress-bar {
    top: 21px;
    left: 27px;
    width: 246px;
    height: 14px;
  }
  .plp-progress-mark {
    top: 12px;
    width: 50px;
  }
  .plp-progress-mark--bronze {
    left: 4px;
  }
  .plp-progress-mark--silver {
    left: 125px;
  }
  .plp-progress-mark--gold {
    left: 247px;
  }
  .plp-progress-mark img {
    width: 40px;
    height: 41px;
  }
  .plp-progress-mark-name {
    margin-top: 12px;
    font-size: 12.6px;
  }
  .plp-progress-mark-biz {
    margin-top: 4.5px;
    font-size: 14.4px;
  }
  .plp-progress-mark-biz b {
    font-size: 21.6px;
  }
  .plp-status-arrow {
    width: 200px;
  }
}
/* ------------------------------------------------------------
  リワード
------------------------------------------------------------ */
.plp-reward {
  position: relative;
  height: min(1091px, 83.923vw);
  overflow: hidden;
  background: #fff;
}
.plp-reward-head {
  position: absolute;
  top: min(47px, 3.615vw);
  left: 50%;
  width: min(1366px, 105.077vw);
  transform: translateX(-50%);
  line-height: 0;
}
.plp-reward-head img {
  width: 100%;
}
.plp-reward-list {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1366px, 105.077vw);
  height: 100%;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  list-style: none;
}
.plp-reward-item {
  position: absolute;
  line-height: 0;
}
.plp-reward-item--01 {
  top: min(599px, 46.077vw);
  left: min(145px, 11.154vw);
  width: min(329px, 25.308vw);
}
.plp-reward-item--02 {
  top: min(480px, 36.923vw);
  left: min(482px, 37.077vw);
  width: min(353px, 27.154vw);
}
.plp-reward-item--03 {
  top: min(386px, 29.692vw);
  left: min(846px, 65.077vw);
  width: min(387px, 29.769vw);
}
.plp-reward-note {
  position: absolute;
  top: min(1031px, 79.308vw);
  right: calc(50% - min(543px, 41.769vw));
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
}
.plp-reward-note a {
  color: inherit;
  text-decoration: underline;
}
@media screen and (max-width: 768px) {
  .plp-reward {
    height: auto;
    padding-bottom: 50px;
  }
  .plp-reward-head {
    position: static;
    width: 100%;
    margin: 60px auto 0;
    transform: none;
  }
  .plp-reward-list {
    position: static;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1.3%;
    width: 100%;
    height: auto;
    max-width: 560px;
    margin: -39vw auto 0;
    padding: 0 18px 0 20px;
    transform: none;
  }
  .plp-reward-item {
    position: static;
  }
  .plp-reward-note {
    position: static;
    max-width: 560px;
    margin: 17px auto 0;
    padding: 0 20px;
    font-size: 12px;
    text-align: right;
    white-space: normal;
  }
  .plp-reward-item>picture {
    display: block;
  }
  .plp-reward-item img {
    width: 100%;
  }
  .plp-reward-item--01 {
    width: 29.8%;
  }
  .plp-reward-item--02 {
    width: 32.8%;
  }
  .plp-reward-item--03 {
    width: 35.8%;
  }
}
/* ------------------------------------------------------------
  リワード応募
------------------------------------------------------------ */
.plp-apply {
  position: relative;
  padding: 80px 20px 60px;
  background: #fff1f3;
  overflow: hidden;
}
.plp-apply-arrow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 317px;
}
.plp-apply-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
}
.plp-apply-head {
  position: relative;
  text-align: center;
}
.plp-apply-head-dec {
  position: absolute;
  top: calc(clamp(890px, 100vw, 1158px) * -0.0432);
  left: 50%;
  width: clamp(890px, 100vw, 1158px);
  max-width: none;
  transform: translateX(-50%);
  line-height: 0;
  pointer-events: none;
}
.plp-apply-head-dec img {
  width: 100%;
  max-width: none;
}
.plp-apply-title {
  position: relative;
  margin: 0;
  font-size: clamp(20px, 2.245vw, 26px);
  font-weight: 700;
  line-height: 1.3;
}
.plp-apply-title em {
  color: #ee5661;
}
.plp-apply-title span {
  font-size: clamp(26px, 2.936vw, 34px);
}
.plp-apply-lead {
  position: relative;
  margin-top: 10px;
  font-size: 18px;
  line-height: 1.5;
}
.plp-apply-cards {
  display: flex;
  gap: 14px;
  margin-top: 2px;
}
.plp-apply-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 15px;
  padding: 15px 30px 30px;
  border: 2px solid;
  border-radius: 20px;
}
.plp-apply-card--silver {
  background: #f6f7fa;
  border-color: #004098;
  box-shadow: 3px 4px 2px rgba(0, 64, 152, .4);
}
.plp-apply-card--gold {
  background: #fefaf3;
  border-color: #dd8c01;
  box-shadow: 3px 4px 2px rgba(221, 140, 1, .3);
}
.plp-apply-card-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.6;
}
.plp-apply-card-name img {
  width: 40px;
}
.plp-apply-card--silver .plp-apply-card-name {
  color: #0062b4;
}
.plp-apply-card--gold .plp-apply-card-name {
  color: #dd8c01;
}
.plp-apply-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  border-radius: 11px;
  text-align: center;
  text-decoration: none;
}
/* 応募できる時は活性ボタン（リンク）、それ以外は非活性（文言はPHPから） */
.plp-apply-btn--active {
  padding: 16px 50px 16px 16px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  transition: opacity .2s;
}
.plp-apply-btn--active:hover {
  opacity: .8;
}
.plp-apply-card--silver .plp-apply-btn--active {
  background: #0062b4;
  box-shadow: 0 4px 0 #06508e;
}
.plp-apply-card--gold .plp-apply-btn--active {
  background: #dd8c01;
  box-shadow: 0 4px 0 #b06f00;
}
.plp-apply-btn-arrow {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  background: #fff;
  border-radius: 50%;
}
.plp-apply-btn-arrow::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -6px;
  border-top: 2px solid #004098;
  border-right: 2px solid #004098;
  transform: rotate(45deg);
}
.plp-apply-card--gold .plp-apply-btn-arrow::after {
  border-color: #dd8c01;
}
.plp-apply-btn--disabled {
  padding: 16px;
  background: #ddd;
  box-shadow: 0 4px 0 #ccc;
  color: #777;
  font-size: 16px;
  line-height: 1.6;
}
.plp-apply-card[data-active="1"] .plp-apply-btn--disabled,
.plp-apply-card:not([data-active="1"]) .plp-apply-btn--active {
  display: none;
}
.plp-apply-note {
  display: flex;
  justify-content: center;
  gap: 5px;
  font-size: 18px;
  font-weight: 700;
}
.plp-apply-note em {
  color: #ee5661;
}
.plp-apply-period {
  display: flex;
  align-items: stretch;
  gap: 19px;
  padding: 20px;
  background: #fff;
  border: 1px solid #ffbbc0;
  border-radius: 30px;
}
.plp-apply-period-title {
  display: flex;
  flex: none;
  align-items: center;
  gap: 17px;
  padding-right: 17px;
  border-right: 1px solid #ffbbc0;
  color: #ee5661;
  font-size: 22px;
  font-weight: 700;
  white-space: nowrap;
}
.plp-apply-period-title picture {
  flex: none;
  line-height: 0;
}
.plp-apply-period-title img {
  width: 50px;
}
.plp-apply-period-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
}
.plp-apply-period-date {
  font-size: 20px;
  font-weight: 700;
}
.plp-apply-period-date span {
  font-size: 30px;
}
.plp-apply-period-note {
  display: flex;
  gap: 5px;
  font-size: 16px;
}
@media screen and (max-width: 768px) {
  .plp-apply-arrow {
    width: 200px;
  }
  .plp-apply-head-dec {
    top: -59px;
    width: 353px;
  }
  .plp-apply-title {
    font-size: 20px;
  }
  .plp-apply-title span {
    font-size: 26px;
  }
  .plp-apply-lead {
    font-size: 16px;
  }
  .plp-apply-card {
    gap: 10px;
    padding: 10px 10px 16px;
  }
  .plp-apply-card-name {
    font-size: 16px;
  }
  .plp-apply-card-name img {
    width: 30px;
  }
  .plp-apply-btn {
    min-height: 96px;
    border-radius: 7px;
    line-height: 1.3;
  }
  .plp-apply-btn--active {
    flex-direction: column;
    gap: 10px;
    padding: 10px 5px;
    font-size: 16px;
  }
  .plp-apply-btn-arrow {
    position: relative;
    top: auto;
    right: auto;
    margin-top: 0;
  }
  .plp-apply-btn--disabled {
    padding: 10px 5px;
    font-size: 12px;
  }
  .plp-apply-note {
    justify-content: flex-start;
  }
  .plp-apply-period {
    flex-direction: column;
    gap: 10px;
    padding: 20px 19px;
  }
  .plp-apply-period-title {
    padding: 0 0 15px;
    border-right: none;
    border-bottom: 1px solid #ffbbc0;
  }
  .plp-apply-period-title img {
    width: 40px;
  }
  .plp-apply-period-date {
    line-height: 1.4;
    padding-left: 8px;
    text-indent: -8px;
  }
}
/* ------------------------------------------------------------
  よくあるご質問（FAQ）
------------------------------------------------------------ */
.plp-faq {
  padding: 60px 20px 60px;
  background: #fff;
}
.plp-faq-card {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 20px 20px;
  border: 1px solid #ffbbc0;
  border-radius: 30px;
}
.plp-faq-title {
  position: absolute;
  top: -29px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px;
  background: #fff;
  color: #ee5661;
  font-size: 22px;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.6;
}
.plp-faq-item {
  display: flex;
  align-items: center;
  margin: 0;
}
.plp-faq-item+.plp-faq-item {
  border-top: 1px solid #ffbbc0;
}
.plp-faq-q,
.plp-faq-a {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  padding: 21px 20px;
}
.plp-faq-mark {
  flex: none;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
}
.plp-faq-mark--a {
  color: #ee5661;
}
.plp-faq-q dt {
  font-size: 18px;
  font-weight: 700;
}
.plp-faq-a dd {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
}
.plp-faq-a dd strong {
  font-weight: 700;
}
.plp-faq-a dd em {
  color: #ee5661;
}
.plp-faq-arrow {
  flex: none;
  line-height: 0;
}
.plp-faq-arrow img {
  width: 20px;
}
@media screen and (max-width: 768px) {
  .plp-faq {
    padding: 60px 20px;
  }
  .plp-faq-item {
    flex-direction: column;
    align-items: stretch;
  }
  .plp-faq-q,
  .plp-faq-a {
    padding: 10px 0;
  }
  .plp-faq-arrow {
    align-self: center;
  }
  .plp-faq-arrow img {
    width: 24px;
  }
}
/* ------------------------------------------------------------
  お問い合わせ
------------------------------------------------------------ */
.plp-contact {
  padding: 0 20px 100px;
  background: #fff;
}
.plp-contact-lead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 1080px;
  margin: 0 auto 20px;
  color: #ee5661;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
.plp-contact-lead-dec {
  display: block;
  flex: none;
  width: 21px;
  line-height: 0;
}
.plp-contact-lead-dec img {
  width: 100%;
}
.plp-contact-card {
  display: block;
  max-width: 1080px;
  margin: 0 auto;
  padding: 30px 20px;
  background: #f5f5f5;
  border: 1px solid #dce0e7;
  border-radius: 20px;
  box-shadow: 0 4px 2px rgba(0, 0, 0, .25);
  text-align: center;
  color: #000;
  text-decoration: none;
  transition: opacity .2s;
}
.plp-contact-card:hover {
  opacity: .8;
}
.plp-contact-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.plp-contact-title img {
  width: 27px;
}
.plp-contact-dept,
.plp-contact-mail {
  display: flex;
  justify-content: center;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}
.plp-contact-dept {
  margin-top: 9px;
}
.plp-contact-dept dd,
.plp-contact-mail dd {
  margin: 0;
}
@media screen and (max-width: 768px) {
  .plp-contact-lead {
    gap: 5px;
    font-size: 16px;
  }
  .plp-contact-lead-text {
    min-width: 275px;
  }
  .plp-contact-lead-dec {
    width: 29.5px;
  }
  .plp-contact-card {
    padding: 30px 19px;
  }
  .plp-contact-title {
    flex-direction: column;
    gap: 10px;
    font-size: 20px;
    line-height: 1.6;
  }
  .plp-contact-dept,
  .plp-contact-mail {
    font-size: 12px;
  }
  .plp-contact-dept {
    margin-top: 7px;
  }
  .plp-contact-mail {
    margin-top: 9px;
  }
  .plp-contact-dept dt,
  .plp-contact-mail dt {
    width: 5em;
    text-align: right;
  }
  .plp-contact-dept dd,
  .plp-contact-mail dd {
    width: 18.2em;
    max-width: calc(100% - 5em);
    text-align: left;
  }
}