@charset "UTF-8";

:root {
    --main-color-red: #e4002b;
    --main-color-red-rgb: 228 0 43;
    --main-color-orange: #F4BB94;
    --main-color-lightblue: #54C3F1;
}

/* ========== Base / Global ========== */
.l-main--fullwidth img {
  width: 100%;
}

/* ---- Visual / Login ---- */
.p-4th-anniv__main-visual {
  width: 1040px;
  margin: 0 auto;
}
.p-4th-anniv__login {
  width: 1040px;
  margin: 40px auto;
}
@media screen and (max-width: 768px){
.p-4th-anniv__main-visual {
  width: 100%;
}
.p-4th-anniv__login {
  width: 90%;
  margin: 4vw auto 7vw;
}
}

/* ---- Link ---- */
.p-4th-anniv__link {
  display: inline-flex;
  align-items: center;
  color: #E4002B;
  font-size: 14px;
  font-weight: 700;
}
.p-4th-anniv__link::after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  margin-left: 4px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(-45deg);
  transition: border-color 0.65s ease;
}
.p-4th-anniv__link:hover {
  text-decoration: underline;
}
@media screen and (max-width: 768px){
.p-3rd-anniv__login{width:86vw;margin:17.06667vw auto 6.4vw;}
.p-3rd-anniv__link{font-size:3.73333vw;}
}

/* ---- Requirements ---- */
.main a{text-decoration:none;}
.requirements{max-width:1040px;margin:64px auto 0;letter-spacing: .05em;}
.requirements-ttl{height:72px;font-size:32px;font-weight:bold;color:#fff;background:var(--main-color-lightblue);display:flex;justify-content:center;align-items:center;}
.requirements-list{display:flex;flex-wrap:wrap;font-size: 18px;line-height: 1.4;}
.requirements-list-dt{width:350px;padding:30px 36px 30px 30px;color:var(--main-color-lightblue);font-weight:bold;}
.requirements-list-dd{width:690px;padding:30px 24px 30px 0;}
.requirements-list-dt:nth-of-type(even),.requirements-list-dd:nth-of-type(even){background:rgb(170 170 170 / .1);}
.requirements-list-dd ul{display:flex;flex-direction:column;gap:5px;}
.requirements-list-dd li{position:relative;padding-left:1em;}
.requirements-list-dd li::before{position:absolute;color:#747474;left:0;}
.requirements-list-dd .requirements-list-notes-itm::before{content:"●";font-size:.6em;top:.4em;}
.requirements-list-dd ul ul{padding-left:1em;}
.requirements-list-dd ul ul li::before{content:"・";}
a[data-gtm="tocomlink"]{color:var(--main-color-red);text-decoration:underline;}
a[data-gtm="tocomlink"]::after{display:inline-block;content:"";width:12px;height:12px;background:url("/kewpieid/4th/thanks-cp/assets/img/ico-window.svg") no-repeat center / contain;margin-left:.1em;margin-right:.2em;}
.requirements-apply{padding-top:48px;display:flex;justify-content:center;}
.requirements-apply-inner{display:grid;gap:16px;}
.requirements-apply-inner .btn{grid-row:1 / 2;}
.requirements-apply-inner .note{grid-row:2 / 3;font-size: 18px}
.requirements-apply-inner .txt1{grid-row:3 / 4;}
.requirements-apply-inner .txt2{grid-row:4 / 5;}
.requirements-apply-inner .btn{display:flex;justify-content:center;}
.requirements-apply-inner [class*="note"]{text-align:center;}
.requirements-apply-inner [class*="txt"]{text-align:right;}
.requirements-btn{width:427px;height:63px;font-size:20px;color:#fff;background:var(--main-color-red);border:1px solid var(--main-color-red);border-radius:40px;display:flex;justify-content:center;align-items:center;position:relative;}
.requirements-btn::after{position:absolute;content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);top:0;bottom:0;margin:auto;right:1em;}
.requirements-link{color:var(--main-color-red);font-size:16px;}
.requirements-link::after{display:inline-block;content:"";width:6px;height:6px;margin-bottom:1px;margin-left:.3em;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(-45deg);}
@media screen and (min-width: 769px), print{
.main a{-webkit-transition:0.65s ease;transition:0.65s ease;}
a.requirements-btn:hover{color:var(--main-color-red);background:#fff;}
}
@media screen and (max-width: 768px){
.requirements{margin-top:calc((24 / 375) * 100vw);}
.requirements-ttl{height:calc((60 / 375) * 100vw);font-size:calc((24 / 375) * 100vw);}
.requirements-list{font-size: calc((16 / 375) * 100vw);line-height: 1.4;}
.requirements-list-dt{width:100%;padding:6vw 4vw 2vw;}
.requirements-list-dd{width:100%;padding:2vw 4vw 6vw;}
.requirements-list-dd ul{gap:2vw;}
a[data-gtm="tocomlink"]::after{width:3.2vw;height:3.2vw;}
.requirements-apply{padding-top:calc((32 / 375) * 100vw);}
.requirements-apply-inner{gap:calc((16 / 375) * 100vw);}
.requirements-btn{width:calc((345 / 375) * 100vw);height:calc((62 / 375) * 100vw);font-size:calc((18 / 375) * 100vw);border-radius:calc((62 / 375) * 100vw);}
.requirements-btn::after{width:calc((8 / 375) * 100vw);height:calc((8 / 375) * 100vw);}
.requirements-apply-inner .note{font-size:calc((13 / 375) * 100vw);text-align:center;}
.requirements-link{font-size:calc((16 / 375) * 100vw);}
.requirements-link::after{width:calc((6 / 375) * 100vw);height:calc((6 / 375) * 100vw);}
}
span.requirements-btn{background-color: #aaa;border:none;}
span.requirements-btn::after{content: none;}

/* ---- Login status ---- */
.l-main--fullwidth .p-4th-anniv-contents-status-count,
.js-notlogin,
.p-4th-anniv-contents-status-card-list .js-login,
.js-apply-button,
.js-applied-button {
  display: none;
}
.not_login .js-notlogin,
.login-progress .p-4th-anniv-contents-status-card-list .js-login,
.login-complete .p-4th-anniv-contents-status-card-list .js-login,
.login-complete-done .p-4th-anniv-contents-status-card-list .js-login,
.login-error .p-4th-anniv-contents-status-card-list .js-login,
.login-complete .js-apply-button,
.login-complete-done .js-applied-button {
  display: block;
}
.login-progress .p-4th-anniv-contents-status-count,
.login-complete .p-4th-anniv-contents-status-count,
.login-complete-done .p-4th-anniv-contents-status-count {
  display: inline-block;
}
.login-complete-done .requirements-apply-inner .note,
.login-complete-done .requirements-apply-inner .txt1,
.login-complete-done .requirements-apply-inner .txt2 {
  display: none;
}
.login-complete-done .p-4th-anniv-contents-status-card-txt {
  display: none;
}

/* p-4th-anniv-contents */
.p-4th-anniv-contents {
  background-color: #FCFBF4;
  border-radius: 32px;
  padding: 44px 0 70px;
  width: 1010px;
  margin: 0 auto;
}
.p-4th-anniv-contents-hdg {
  text-align: center;
  color: var(--main-color-red);
  font-size: 1.733333333rem;
  font-weight: bold;
}
.p-4th-anniv-contents-lead {
  text-align: center;
  font-size: 1.066666667rem;
  line-height: 1.7;
  margin-top: 18px;
}
.p-4th-anniv-contents-blocklist {
  width: 876px;
  margin: 32px auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.p-4th-anniv-contents-blocklist-itm {
  background-color: #fff;
  border-radius: 8px;
  padding: 23px 25px;
  display: flex;
  flex-direction: column;
  gap:20px;
  height: 100%;
}
.p-4th-anniv-contents-blocklist-itm-pic img {
  width: 100%;
  height: 74px;
  object-fit: contain;
}
.p-4th-anniv-contents-blocklist-itm .c-sec__btn {
  margin-top: auto;
}
.p-4th-anniv-contents-blocklist-itm-txt {
  font-size: 0.933333333rem;
  line-height: calc(20 / 14);
}
.p-4th-anniv-contents-blocklist-itm .c-btn-list__itm__link,
.p-4th-anniv-contents-status-card-list-itm .c-btn-list__itm__link {
  width: 86%;
  margin: 0 auto;
}
.p-4th-anniv-contents-status-card-list-itm .c-sec__btn {
  margin-top: 22px;
}
.p-4th-anniv-contents-blocklist-itm-hdg {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}
.p-4th-anniv-contents-discript {
  width: 840px;
  height: 470px;
  margin: 32px auto;
  background: url("/kewpieid/4th/siterally/assets/img/sec_bg_pc.webp") no-repeat center / contain;
  padding-top: 126px;
}
.p-4th-anniv-contents-discript-txt {
  color: var(--main-color-red);
  font-size: 1.333333333rem;
  font-weight: bold;
  text-align: center;
}
.p-4th-anniv-contents-discript-img {
  width: 307px !important;
  height: auto;
  margin: 8px auto 0;
  display: block;
}
.p-4th-anniv-contents-status {
  width: 876px;
  margin: 32px auto;
  border: solid 8px #E4002B15 ;
  background-color: #fff;
  padding: 42px;
  box-shadow: 1px 0px 19px -12px #777777;
}
.p-4th-anniv-contents-status-hdg {
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--main-color-red);
  text-align: center;
}
.p-4th-anniv-contents-status-hdg-wrap {
  text-align: center;
}
.p-4th-anniv-contents-status-hdg-wrap-inner {
  display: inline-block;
  padding-bottom: 8px;
  border-bottom: dashed 1px var(--main-color-red);
}
.p-4th-anniv-contents-status-txt {
  text-align: center;
  font-size: 0.866666667rem;
  line-height: calc(20 / 13);
  margin-top: 10px;
}
.p-4th-anniv-contents-status-card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 32px auto 45px;
}
.p-4th-anniv-contents-status-card-list-itm {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.p-4th-anniv-contents-status-card-list-itm-pic {
  display: block;
  text-align: center;
  margin-bottom: 16px;
}
.p-4th-anniv-contents-status-card-list-itm-pic img {
  width: 123px;
  height: 38px;
  object-fit: contain;
}
.p-4th-anniv-contents-status-card-list-itm-badge-try {
  display: block;
  width: 117px;
  height: 117px;
  background-color: #F2F2F2;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.333333333rem;
  color: #aaa;;
  margin: 0 auto;
}
.p-4th-anniv-contents-status-card-list-itm-badge img {
  width: 117px;
  height: 117px;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}
.p-4th-anniv-contents-status-card-txt {
  text-align: center;
  font-size: 0.933333333rem;
}
.p-4th-anniv-contents-status-count {
  display: inline-block;
  padding: 4px 10px;
  border: solid 1px var(--main-color-red);
  color: var(--main-color-red);
  font-size: 0.866666667rem;
  font-weight: bold;
  line-height: 1.3;
}
.p-4th-anniv-contents-status-count span {
  font-size: 1.533333333rem;
}
.c-btn-list__itm__link.r-disabled {
  background-color: #aaa;
  color: #fff;
  box-shadow:none;
  pointer-events: none;
}
.c-btn-list__itm__link.r-disabled::before {
  content: none;
}
.c-btn-list__itm__link.r-disabled:hover::after {
  content: none;
}
@media screen and (max-width: 768px){
  .p-4th-anniv-contents {
    border-radius: 8.533333333vw;
    padding: 9.6vw 5.866666667vw;
    width: 93.33333333vw;
  }
  .p-4th-anniv-contents-hdg {
    font-size: 5.333333333vw;
    line-height: 1.3;
  }
  .p-4th-anniv-contents-lead {
    font-size: 4.266666667vw;
    margin-top: 9.6vw;
    text-align: left;
  }
  .p-4th-anniv-contents-blocklist {
    width: 74.66666667vw;
    margin: 6.4vw auto;
    grid-template-columns: 1fr;
    gap: 4.8vw;
  }
  .p-4th-anniv-contents-blocklist-itm {
    border-radius: 2.133333333vw;
    padding: 6.133333333vw 6.666666667vw;
    gap:5.333333333vw;
    height: auto;
  }
  .p-4th-anniv-contents-blocklist-itm-pic img {
    height: 19.73333333vw;
  }
  .p-4th-anniv-contents-blocklist-itm .c-sec__btn {
    margin-top: 0;
  }
  .p-4th-anniv-contents-blocklist-itm-txt {
    font-size: 3.733333333vw;
  }
  .p-4th-anniv-contents-blocklist-itm-hdg {
    font-size: 3.733333333vw;
  }
  .p-4th-anniv-contents-status-card-list-itm .c-sec__btn {
    margin-top: 5.866666667vw;
  }
  .p-4th-anniv-contents-discript {
    width: 100%;
    height: 100vw;
    margin: 6.4vw auto 0;
    background: none;
    padding-top: 17.06666667vw;
    position: relative;
  }
  .p-4th-anniv-contents-discript::before {
    content: "";
    display: block;
    width: 93.33333333vw;
    height: 91.46666667vw;
    background: url("/kewpieid/4th/siterally/assets/img/sec_bg_sp.webp") no-repeat center / contain;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
  }
  .p-4th-anniv-contents-discript-txt {
    font-size: 5.333333333vw;
    position: relative;
    z-index: 1;
    line-height: 1.3;
  }
  .p-4th-anniv-contents-discript-img {
    width: 66.533333vw !important;
    margin: 2.666666667vw auto 0;
    position: relative;
    z-index: 1;
  }
  .p-4th-anniv-contents-status {
    width: 81.33333333vw;
    margin: 0 auto 6.4vw;
    border: solid 1.066666667vw #E4002B15 ;
    padding: 11.2vw 3.2vw 5.6vw;
    box-shadow: 1px 0px 5.066666667vw -3.2vw #777777;
    z-index: 1;
    position: relative;
  }
  .p-4th-anniv-contents-status-hdg {
    font-size: 6.4vw;
  }
  .p-4th-anniv-contents-status-hdg-wrap {
    text-align: center;
  }
  .p-4th-anniv-contents-status-hdg-wrap-inner {
    display: block;
    padding-bottom: 3.2vw;
  }
  .p-4th-anniv-contents-status-txt {
    font-size: 3.2733333333vw;
    margin-top: 2.666666667vw;
  }
  .p-4th-anniv-contents-status-card-list {
    grid-template-columns: 1fr;
    gap: 9.6vw;
    margin: 5.333333333vw auto;
    width: 80%;
  }
  .p-4th-anniv-contents-status-card-list-itm {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 4.266666667vw;
    row-gap: 2.266666667vw;
  }
  .p-4th-anniv-contents-status-card-list-itm-pic {
    margin-bottom: 0;
    text-align: center;
  }
  .p-4th-anniv-contents-status-card-list-itm-pic img {
    width: 35vw;
    height: 11.666667vw;
  }
  .p-4th-anniv-contents-status-card-list-itm-badge-try {
    width: 14.66666667vw;
    height: 14.66666667vw;
    font-size: 3.501333vw;
    text-align: center;
    line-height: 1.05;
    font-weight: bold;
  }
  .p-4th-anniv-contents-status-card-list-itm-badge img {
    width: 14.66666667vw;
    height: 14.66666667vw;
  }
  .p-4th-anniv-contents-status-card-txt {
    font-size: 3.733333333vw;
  }
  .p-4th-anniv-contents-status-count {
    padding: 1.066666667vw 2.666666667vw;
    font-size: 3.466666667vw;
  }
  .p-4th-anniv-contents-status-count span {
    font-size: 6.133333333vw;
  }
  .p-4th-anniv-contents-status-card-list-itm .c-sec__btn {
    grid-column: 1 / -1;
    margin-top: 0;
  }
  .p-4th-anniv-contents-status-card-list-itm .c-btn-list__itm {
    margin-top: 0;
  }
  .p-4th-anniv-contents-status-card-list-itm .c-btn-list__itm__link {
    width: 58.66666667vw;
    font-size: 3.2vw;
    padding: 2vw;
    margin: 0 auto;
  }
  .p-4th-anniv-contents-status-card-list-itm .c-btn-list__itm__link:before {
    right:3vw;
  }
  
  .p-4th-anniv-contents-blocklist-itm .c-btn-list__itm {
    margin-top: 0;
  }
}

/* ---終了表示--- */
.type_fin {display:none;}
.endAnnounce{display:none;width:1040px;border:4px #ccc solid;color:#eb0028;background:#fff;font-size:1.6rem;font-weight:bold;text-align:center;line-height:1.4;margin:0 auto 20px;padding:20px;box-sizing:border-box;}
.campaign-ended .endAnnounce{display:block;}
.campaign-ended .p-4th-anniv-contents-status,
.campaign-ended .requirements-apply,
.campaign-ended .p-4th-anniv-contents-blocklist-itm .c-sec__btn{display:none;}
.campaign-ended .type_fin{display: inline !important;}
.campaign-ended .type_active{display: none !important;}
@media screen and (max-width: 768px){
.endAnnounce{margin-top:calc(20 / 375 * 100vw);font-size:calc(20 / 375 * 100vw);width:96%;}
}

/* ========== Social Buttons ========== */
@media screen and (min-width: 769px), print{
  .c-social-btn {
    min-width: 1024px;
    width: 100%;
    padding: 32px 0;
    background: #fff;
  }
  .c-social-btn__list {
    width: 1024px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    text-align: left;
  }
  .c-social-btn__itm {
    display: inline-block;
    width: 45px;
    margin: 0 5px;
  }
  .c-social-btn__itm img {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .c-social-btn {
    width: 100%;
    padding: 8vw 0;
    background: #fff;
  }
  .c-social-btn__list {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
  }
  .c-social-btn__itm {
    display: inline-block;
    width: 12vw;
    margin: 0 1.2vw;
  }
  .c-social-btn__itm img {
    width: 100%;
  }
}
.js-error {
  display: none;
  font-size: 1.2rem;
  color: var(--main-color-red);
  text-align: center;
  line-height: 1.6;
  font-weight: bold;
  margin-top: 30px;
}
.login-error .js-error {
  display: block;
}
@media screen and (max-width: 768px) {
  .js-error {
    font-size: 3.8vw;
    margin-top: 4vw;
  }
}
.type_fin {
    color: #eb0028;
    font-weight: bold;
}