/* =========================================================
consol log
========================================================= */
/* =========================================================
body
========================================================= */
body {
  background: #95d9ea;
}

#footer_top {
  margin-top: 0;
}

#carebear_shindan {
  max-width: 640px;
  margin: 0 auto;
}

#carebear_shindan input, #carebear_shindan button, #carebear_shindan textarea, #carebear_shindan select {
  box-sizing: border-box;
  outline: none;
}

#carebear_shindan * {
  letter-spacing: 0.075em;
}

#carebear_shindan *:before, #carebear_shindan *:after {
  display: block;
}

#carebear_shindan img {
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  #carebear_shindan .pc-br {
    display: none;
  }
}
@media (min-width: 769px) {
  #carebear_shindan .sp-br {
    display: none;
  }
}
@container (max-width: 768px) {
  #carebear_shindan .cont-pc-br {
    display: none;
  }
}
@container (min-width: 769px) {
  #carebear_shindan .cont-sp-br {
    display: none;
  }
}
@media (max-width: 768px) {
  #carebear_shindan .pc-disp {
    display: none !important;
  }
}
@media (min-width: 769px) {
  #carebear_shindan .sp-disp {
    display: none !important;
  }
}
@media (hover: hover) {
  #carebear_shindan .opacity-link {
    transition: opacity 0.2s ease;
  }

  #carebear_shindan .opacity-link:hover {
    opacity: 0.6;
  }
}
#carebear_shindan .txt-link {
  text-decoration: underline;
}

@media (hover: hover) {
  #carebear_shindan .txt-link:hover {
    text-decoration: none;
  }
}
/* =========================================================
common
========================================================= */
/*------------------------------------------
bottom
------------------------------------------*/
.bottom-contents {
  padding-bottom: clamp(1px, 7.81vw, 50px);
  background: linear-gradient(0deg, #fff 50px, transparent 50px, transparent 100%);
}

/*------------------------------------------
goods area
------------------------------------------*/
#goods_area {
  padding: clamp(1px, 7.81vw, 50px) clamp(1px, 3.75vw, 24px) clamp(1px, 12.5vw, 80px);
  background: #9961a9;
  position: relative;
}

#goods_area::before {
  content: "";
  width: 100%;
  height: clamp(1px, 3.12vw, 20px);
  -webkit-mask: url("/cms/lp/carebear_shindan/images/bg_pat01.png") repeat-x center/auto 100%;
          mask: url("/cms/lp/carebear_shindan/images/bg_pat01.png") repeat-x center/auto 100%;
  background: #9961a9;
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
}

#goods_area::after {
  content: "";
  aspect-ratio: 138/75;
  width: clamp(1px, 21.56vw, 138px);
  background: url("/cms/lp/carebear_shindan/images/img_star.png") no-repeat center/contain;
  position: absolute;
  top: calc(-1 * clamp(1px, 5.46vw, 35px));
  left: clamp(1px, 2.65vw, 17px);
}

/* =========================================================
step
========================================================= */
/*------------------------------------------
step01
------------------------------------------*/
.step-contents#step01 {
  padding: clamp(1px, 6.25vw, 40px) clamp(1px, 3.12vw, 20px);
  color: #006dcc;
}

.step-contents#step01 .catch {
  font-size: clamp(1px, 3.43vw, 22px);
  line-height: 1.4;
}

.step-contents#step01 .s-txt {
  margin: clamp(1px, 6.56vw, 42px) auto 0;
  font-size: clamp(1px, 4.37vw, 28px);
  line-height: 1.4;
  font-weight: 700;
  text-align: center;
}

.step-contents#step01 .s-btn {
  display: block;
  margin: clamp(1px, 7.34vw, 47px) auto 0;
  cursor: pointer;
}

/*------------------------------------------
step02
------------------------------------------*/
.step-contents#step02 .shindan-box {
  padding: clamp(1px, 6.25vw, 40px) 0;
  display: none;
}

.step-contents#step02 .q-text {
  position: relative;
}

.step-contents#step02 .q-text-in {
  width: clamp(1px, 57.03vw, 365px);
  height: clamp(1px, 21.87vw, 140px);
  color: #72290a;
  text-align: center;
  font-size: clamp(1px, 4.06vw, 26px);
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 27.6%;
  right: 7%;
}

.step-contents#step02 .answer {
  margin: clamp(1px, 3.9vw, 25px) auto 0;
  padding: 0 clamp(1px, 3.12vw, 20px);
  display: grid;
  gap: clamp(1px, 4.68vw, 30px);
}

.step-contents#step02 .answer .shindan {
  display: block;
  height: clamp(1px, 25vw, 160px);
  padding: 0 clamp(1px, 5.62vw, 36px) 0 clamp(1px, 21.87vw, 140px);
  font-size: clamp(1px, 4.37vw, 28px);
  line-height: 1.4;
  font-weight: 700;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.step-contents#step02 .answer-a .shindan {
  background: url("/cms/lp/carebear_shindan/images/bg_answer_a.png") no-repeat center/contain;
  color: #f183c9;
}

.step-contents#step02 .answer-b .shindan {
  background: url("/cms/lp/carebear_shindan/images/bg_answer_b.png") no-repeat center/contain;
  color: #13bfd6;
}

/*------------------------------------------
step03
------------------------------------------*/
.step-contents#step03 {
  display: none;
  padding: clamp(1px, 7.81vw, 50px) clamp(1px, 3.12vw, 20px);
}

.step-contents#step03 .btn-result a {
  display: block;
}

/*------------------------------------------
step04
------------------------------------------*/
.step-contents#step04 {
  margin: clamp(1px, 8.59vw, 55px) auto 0;
}

.step-contents#step04 .result-profile-box {
  padding: clamp(1px, 9.37vw, 60px) 0 clamp(1px, 8.59vw, 55px);
  background: #fff;
  position: relative;
}

.step-contents#step04 .result-profile-box::before {
  content: "";
  width: 100%;
  height: clamp(1px, 3.12vw, 20px);
  -webkit-mask: url("/cms/lp/carebear_shindan/images/bg_pat01.png") repeat-x center/auto 100%;
          mask: url("/cms/lp/carebear_shindan/images/bg_pat01.png") repeat-x center/auto 100%;
  background: #fff;
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
}

.step-contents#step04 .ttl {
  width: clamp(1px, 65.93vw, 422px);
  margin: 0 auto;
}

.step-contents#step04 .chara-img {
  margin: clamp(1px, 5.46vw, 35px) auto 0;
}

.step-contents#step04 .chara-name {
  font-size: clamp(1px, 6.87vw, 44px);
  line-height: 1.4;
  font-weight: 700;
  text-align: center;
}

.step-contents#step04 .chara-txt {
  margin: clamp(1px, 6.25vw, 40px) auto 0;
  color: #478fcc;
  font-size: clamp(1px, 3.12vw, 20px);
  line-height: 1.3;
  text-align: center;
}

.step-contents#step04 .chara-list {
  margin: clamp(1px, 5.46vw, 35px) auto 0;
  display: flex;
  justify-content: center;
  gap: clamp(1px, 6.25vw, 40px);
}

.step-contents#step04 .chara-list .bundle {
  display: flex;
  align-items: center;
  gap: clamp(1px, 2.03vw, 13px);
  font-size: clamp(1px, 3.12vw, 20px);
  line-height: 1.3;
}

.step-contents#step04 .chara-list dt {
  width: clamp(1px, 17.18vw, 110px);
  padding: clamp(1px, 1.71vw, 11px) 0 clamp(1px, 1.4vw, 9px);
  background: #478fcc;
  border-radius: 36px;
  color: #fff;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-contents#step04 .chara-list dd {
  color: #478fcc;
  line-height: 1.3;
  text-align: center;
}

.step-contents#step04 .result-sns-box {
  position: relative;
  padding: clamp(1px, 3.9vw, 25px) 0 clamp(1px, 10.93vw, 70px);
}

.step-contents#step04 .result-sns-box::before {
  content: "";
  width: 100%;
  height: clamp(1px, 3.12vw, 20px);
  -webkit-mask: url("/cms/lp/carebear_shindan/images/bg_pat01.png") repeat-x center/auto 100%;
          mask: url("/cms/lp/carebear_shindan/images/bg_pat01.png") repeat-x center/auto 100%;
  background: #95d9ea;
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
}

.step-contents#step04 .result-text {
  padding: 0 clamp(1px, 3.12vw, 20px);
}

.step-contents#step04 .result-text p {
  padding: clamp(1px, 5.78vw, 37px);
  border: clamp(1px, 0.75vw, 4px) solid;
  border-radius: clamp(1px, 2.5vw, 16px);
  color: #fff;
  font-size: clamp(1px, 4.21vw, 27px);
  line-height: 1.3;
  font-weight: 700;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.step-contents#step04 .result-text p::before, .step-contents#step04 .result-text p::after {
  content: "";
  width: clamp(1px, 3.28vw, 21px);
  height: clamp(1px, 3.28vw, 21px);
  position: absolute;
  left: 50%;
  transform: rotate(45deg);
}

.step-contents#step04 .result-text p::before {
  top: calc(100% - clamp(1px, 1.25vw, 8px));
}

.step-contents#step04 .result-text p::after {
  background: inherit;
  top: calc(100% - clamp(1px, 2.18vw, 14px));
}

.step-contents#step04 .share-area {
  margin: clamp(1px, 7.34vw, 47px) auto 0;
  position: relative;
}

.step-contents#step04 .share-area-in {
  width: clamp(1px, 55vw, 352px);
  position: absolute;
  top: 25.4%;
  left: 10%;
}

.step-contents#step04 .share-area-in .txt {
  color: #72290a;
  font-size: clamp(1px, 4.06vw, 26px);
  line-height: 1.4;
  text-align: center;
}

.step-contents#step04 .share-area-in .snslist {
  margin: clamp(1px, 2.34vw, 15px) auto 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1px, 3.12vw, 20px) clamp(1px, 3.75vw, 24px);
}

.step-contents#step04 .share-area-in .snslist a {
  display: block;
  width: clamp(1px, 25.62vw, 164px);
}

.c-scb {
  color: #b58b78 !important;
}

.bg-scb {
  background: #F8C73E !important;
  border-color: #b58b78 !important;
}

.bg-scb::before {
  background: #b58b78 !important;
}

.c-chb {
  color: #ec3fa9 !important;
}

.bg-chb {
  background: #DB73AC !important;
  border-color: #ec3fa9 !important;
}

.bg-chb::before {
  background: #ec3fa9 !important;
}

.c-lob {
  color: #db113e !important;
}

.bg-lob {
  background: #E46A93 !important;
  border-color: #db113e !important;
}

.bg-lob::before {
  background: #db113e !important;
}

.c-spb {
  color: #ed798c !important;
}

.bg-spb {
  background: #ed798c !important;
  border-color: #F9F8F1 !important;
}

.bg-spb::before {
  background: #F9F8F1 !important;
}

.c-bfb {
  color: #57025f !important;
}

.bg-bfb {
  background: #B07AB4 !important;
  border-color: #57025f !important;
}

.bg-bfb::before {
  background: #57025f !important;
}

.c-smb {
  color: #c40f75 !important;
}

.bg-smb {
  background: #ED96B3 !important;
  border-color: #c40f75 !important;
}

.bg-smb::before {
  background: #c40f75 !important;
}

.c-fsb {
  color: #f28d00 !important;
}

.bg-fsb {
  background: #f28d00 !important;
  border-color: #F4D073 !important;
}

.bg-fsb::before {
  background: #F4D073 !important;
}

.c-frb {
  color: #de5900 !important;
}

.bg-frb {
  background: #de5900 !important;
  border-color: #F6AC5D !important;
}

.bg-frb::before {
  background: #F6AC5D !important;
}

.c-shb {
  color: #b8091f !important;
}

.bg-shb {
  background: #EA6178 !important;
  border-color: #b8091f !important;
}

.bg-shb::before {
  background: #b8091f !important;
}

.c-wib,
.c-wib2 {
  color: #006e80 !important;
}

.bg-wib,
.bg-wib2 {
  background: #31BAC3 !important;
  border-color: #006e80 !important;
}

.bg-wib::before,
.bg-wib2::before {
  background: #006e80 !important;
}

.c-thb {
  color: #e35694 !important;
}

.bg-thb {
  background: #e35694 !important;
  border-color: #FCF8F6 !important;
}

.bg-thb::before {
  background: #FCF8F6 !important;
}

.c-grb {
  color: #001e6d !important;
}

.bg-grb {
  background: #5C96D0 !important;
  border-color: #001e6d !important;
}

.bg-grb::before {
  background: #001e6d !important;
}

.c-sdb,
.c-sdb2 {
  color: #432385 !important;
}

.bg-sdb,
.bg-sdb2 {
  background: #9479B9 !important;
  border-color: #432385 !important;
}

.bg-sdb::before,
.bg-sdb2::before {
  background: #432385 !important;
}

.c-ddb {
  color: #214e9c !important;
}

.bg-ddb {
  background: #6F82BF !important;
  border-color: #214e9c !important;
}

.bg-ddb::before {
  background: #214e9c !important;
}

.btn-replay-wrap {
  padding: 0 clamp(1px, 3.12vw, 20px);
}

.btn-replay-wrap a {
  display: block;
}

.btn-replay-wrap + * {
  margin: clamp(1px, 6.25vw, 40px) auto 0;
}