@charset "UTF-8";
.js-slider {
  width: calc(12.0625rem * var(--scale-factor, 1));
  margin: 0 auto;
  position: relative;
}
.js-slider .slick-arrow {
  position: absolute;
  top: calc(8rem * var(--scale-factor, 1));
  width: calc(1.625rem * var(--scale-factor, 1));
  height: calc(2.125rem * var(--scale-factor, 1));
  font-size: 0;
  border: none;
}
.js-slider .slick-arrow.slick-next {
  left: calc(100% + 1.5625rem * var(--scale-factor, 1));
  background: url("/assets/common/img/btn_R-pink.png");
  background-size: 100% 100%;
}
.js-slider .slick-arrow.slick-prev {
  right: calc(100% + 1.5625rem * var(--scale-factor, 1));
  background: url("/assets/common/img/btn_L-pink.png");
  background-size: 100% 100%;
}
.js-slider .slick-dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: calc(1.9375rem * var(--scale-factor, 1));
}
.js-slider .slick-dots li {
  padding: 0 calc(0.40625rem * var(--scale-factor, 1));
  line-height: 0;
}
.js-slider .slick-dots li button {
  width: calc(1.0625rem * var(--scale-factor, 1));
  height: calc(1.125rem * var(--scale-factor, 1));
  border: none;
  font-size: 0;
  background: #000;
  background: url("/assets/common/img/icon-heart-w.svg") no-repeat center;
  background-size: 100% 100%;
  padding: 0;
}
.js-slider .slick-dots li.slick-active button {
  background: url("/assets/common/img/icon-heart-r.svg") no-repeat center;
  background-size: 100% 100%;
}

/* Cropper.js Custom Styles */
.cropper-container-wrap {
  width: calc(14.3125rem * var(--scale-factor, 1));
  height: calc(14.3125rem * var(--scale-factor, 1));
  margin: 0 auto;
  position: relative;
}
.cropper-container-wrap .cropper-container {
  width: 100% !important;
  height: 100% !important;
}

/* Custom cropper colors - #00B7FF */
.cropper-view-box {
  outline: calc(0.0625rem * var(--scale-factor, 1)) solid #00B7FF;
  outline-color: rgba(0, 183, 255, 0.75);
}

.cropper-face {
  background-color: transparent !important;
}

.cropper-line {
  background-color: #00B7FF;
}

.cropper-point {
  background-color: #00B7FF;
  width: calc(0.625rem * var(--scale-factor, 1));
  height: calc(0.625rem * var(--scale-factor, 1));
  opacity: 1;
  border-radius: 50%;
}

.cropper-point.point-n,
.cropper-point.point-s,
.cropper-point.point-e,
.cropper-point.point-w {
  display: none;
}

.cropper-point.point-nw {
  left: calc(-0.3125rem * var(--scale-factor, 1));
  top: calc(-0.3125rem * var(--scale-factor, 1));
}

.cropper-point.point-ne {
  right: calc(-0.3125rem * var(--scale-factor, 1));
  top: calc(-0.3125rem * var(--scale-factor, 1));
}

.cropper-point.point-sw {
  bottom: calc(-0.3125rem * var(--scale-factor, 1));
  left: calc(-0.3125rem * var(--scale-factor, 1));
}

.cropper-point.point-se {
  bottom: calc(-0.3125rem * var(--scale-factor, 1));
  right: calc(-0.3125rem * var(--scale-factor, 1));
  width: calc(0.625rem * var(--scale-factor, 1));
  height: calc(0.625rem * var(--scale-factor, 1));
}

.cropper-bg {
  background-image: none;
}

.cropper-modal {
  background-color: rgba(0, 0, 0, 0.5);
}

.cropper-crop-box {
  border-radius: 0;
}

.cropper-dashed {
  border-color: rgba(0, 183, 255, 0.5);
  opacity: 0;
}

.cropper-center {
  display: none;
}

/* CUSTOM STYLES
* =================================================================== */
.hidden {
  display: none !important;
}

.txt-center {
  text-align: center;
}

.txt-underline span {
  display: inline-block;
  position: relative;
  padding-bottom: calc(0.1875rem * var(--scale-factor, 1));
}
.txt-underline span:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(0.125rem * var(--scale-factor, 1));
  background: url("/assets/common/img/path-underline-dotted.png") 12% repeat;
  background-size: auto 100%;
  border-radius: 1000px;
  overflow: hidden;
}

#btnBack {
  cursor: pointer;
}

.kittemaker-top .section {
  position: relative;
  padding: calc(2.5rem * var(--scale-factor, 1)) 0 calc(0.375rem * var(--scale-factor, 1));
  text-align: center;
  color: #000078;
}
.kittemaker-top .section-content {
  position: relative;
  z-index: 2;
}
.kittemaker-top .section__ttl {
  line-height: 0;
}
.kittemaker-top .section__ttl span {
  display: inline-block;
  font-size: calc(0.875rem * var(--scale-factor, 1));
  line-height: calc(1.75rem * var(--scale-factor, 1));
  padding: 0 calc(0.625rem * var(--scale-factor, 1));
  background: #FF87FF;
  color: #000078;
  border-radius: 10000px;
  margin-bottom: calc(1rem * var(--scale-factor, 1));
  position: relative;
  letter-spacing: -0.05em;
}
.kittemaker-top .section__ttl span:before {
  content: "";
  position: absolute;
  top: calc(100% - 0.0625rem * var(--scale-factor, 1));
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  width: calc(1.1875rem * var(--scale-factor, 1));
  height: calc(0.6875rem * var(--scale-factor, 1));
  background: #FF87FF;
  -webkit-mask-image: url("/assets/common/img/title-arrow.svg");
          mask-image: url("/assets/common/img/title-arrow.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
@media (min-width: 751px) {
  .kittemaker-top .section__ttl img {
    width: calc(14.9375rem * var(--scale-factor, 1));
  }
}
.kittemaker-top .section__txtIntro {
  font-size: calc(0.75rem * var(--scale-factor, 1));
  color: #000078;
  line-height: calc(1.5rem * var(--scale-factor, 1));
  margin-top: calc(1.4375rem * var(--scale-factor, 1));
  margin-bottom: calc(1.875rem * var(--scale-factor, 1));
  letter-spacing: calc(0.0625rem * var(--scale-factor, 1));
  font-weight: 700;
}
.kittemaker-top .section__slider {
  margin-bottom: calc(2.3125rem * var(--scale-factor, 1));
  position: relative;
}
.kittemaker-top .section__slider::before {
  pointer-events: none;
  position: absolute;
  top: calc(-2.6875rem * var(--scale-factor, 1));
  left: calc(-4.5625rem * var(--scale-factor, 1));
  width: calc(3.5625rem * var(--scale-factor, 1));
  height: calc(3.5625rem * var(--scale-factor, 1));
  content: "";
  background: url("/assets/letter/img/kittemaker/deco-star.svg") no-repeat center center/100% auto;
}
.kittemaker-top .section__slider::after {
  pointer-events: none;
  position: absolute;
  top: calc(-1.25rem * var(--scale-factor, 1));
  right: calc(-3.875rem * var(--scale-factor, 1));
  width: calc(1.25rem * var(--scale-factor, 1));
  height: calc(1.375rem * var(--scale-factor, 1));
  content: "";
  background: url("/assets/letter/img/kittemaker/deco-heart.svg") no-repeat center center/100% auto;
}
.kittemaker-top .section__slider .slick-dots {
  margin-top: calc(1.4375rem * var(--scale-factor, 1));
}
.kittemaker-top .section__slider .slick-arrow {
  top: calc(5rem * var(--scale-factor, 1));
}
.kittemaker-top .section__step {
  margin-bottom: calc(2.375rem * var(--scale-factor, 1));
}
.kittemaker-top .section__step dl {
  margin-bottom: calc(1.1875rem * var(--scale-factor, 1));
}
.kittemaker-top .section__step dl dt {
  width: calc(15.5rem * var(--scale-factor, 1));
  margin-left: calc(3.125rem * var(--scale-factor, 1));
}
.kittemaker-top .section__step dl dd {
  margin-top: calc(0.5rem * var(--scale-factor, 1));
  letter-spacing: calc(0.0625rem * var(--scale-factor, 1));
  font-weight: 700;
}
.kittemaker-top .section__step dl dd span {
  display: inline-block;
  font-size: calc(0.8125rem * var(--scale-factor, 1));
  line-height: calc(1.625rem * var(--scale-factor, 1));
  color: #000078;
  background: url("/assets/common/img/blue-dot-line.svg") repeat-x left bottom/auto calc(0.1875rem * var(--scale-factor, 1));
}
.kittemaker-top .section__step .note {
  font-weight: 700;
  font-size: calc(0.625rem * var(--scale-factor, 1));
  line-height: calc(0.9375rem * var(--scale-factor, 1));
  margin: calc(-0.125rem * var(--scale-factor, 1)) 0;
}
.kittemaker-top .section__policy h3 {
  text-align: center;
}
.kittemaker-top .section__policy h3 span {
  font-family: "fot-tsukuardgothic-std", sans-serif;
  font-weight: 700;
  font-style: normal;
  display: inline-block;
  padding-bottom: calc(0.3125rem * var(--scale-factor, 1));
  font-size: calc(1rem * var(--scale-factor, 1));
  background: url("/assets/common/img/blue-dot-line.svg") repeat-x left bottom/auto calc(0.25rem * var(--scale-factor, 1));
}
.kittemaker-top .section__policy--main {
  background-color: #fff;
  width: calc(18.4375rem * var(--scale-factor, 1));
  height: calc(13.75rem * var(--scale-factor, 1));
  margin: calc(0.6875rem * var(--scale-factor, 1)) auto calc(0.5rem * var(--scale-factor, 1));
  padding: calc(0.9375rem * var(--scale-factor, 1)) calc(1.25rem * var(--scale-factor, 1));
  border-radius: calc(1.25rem * var(--scale-factor, 1));
  font-size: calc(0.75rem * var(--scale-factor, 1));
  line-height: calc(1.5rem * var(--scale-factor, 1));
  text-align: left;
}
.kittemaker-top .section__policy--main h4 {
  text-align: center;
  padding-bottom: calc(1.25rem * var(--scale-factor, 1));
}
.kittemaker-top .section__policy--main p + p {
  padding-top: calc(1.25rem * var(--scale-factor, 1));
}
.kittemaker-top .section__policy form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.kittemaker-top .section__policy form .checkbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: calc(0.75rem * var(--scale-factor, 1));
}
.kittemaker-top .section__policy form .checkbox input {
  width: calc(0.875rem * var(--scale-factor, 1));
  height: calc(0.875rem * var(--scale-factor, 1));
  margin-right: calc(0.5rem * var(--scale-factor, 1));
  accent-color: #000078;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: calc(0.0625rem * var(--scale-factor, 1)) solid #000078;
  background-color: #fff;
  position: relative;
}
.kittemaker-top .section__policy form .checkbox input:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background: url("/assets/letter/img/kittemaker/checkbox.svg") no-repeat center center/100% auto;
  width: calc(0.875rem * var(--scale-factor, 1));
  height: calc(0.5625rem * var(--scale-factor, 1));
}
.kittemaker-top .section__policy form .checkbox span {
  color: #000078;
  line-height: calc(1.5rem * var(--scale-factor, 1));
  font-weight: 700;
  cursor: pointer;
}
.kittemaker-top .section__policy form .note {
  font-weight: 700;
  font-size: calc(0.625rem * var(--scale-factor, 1));
  line-height: calc(0.9375rem * var(--scale-factor, 1));
  margin: calc(0.8125rem * var(--scale-factor, 1)) 0 calc(2rem * var(--scale-factor, 1));
}
.kittemaker-top .section__policy form .button {
  z-index: 1;
  position: relative;
  margin: calc(0.75rem * var(--scale-factor, 1)) 0 calc(1.0625rem * var(--scale-factor, 1));
}
.kittemaker-top .section__policy form .button.active::before {
  content: "";
  z-index: -1;
  top: calc(0.3125rem * var(--scale-factor, 1));
  left: 0;
  bottom: calc(-0.3125rem * var(--scale-factor, 1));
  position: absolute;
  right: 0;
  background: #000078;
  border-radius: calc(3.125rem * var(--scale-factor, 1));
}
.kittemaker-top .section__policy form .button button {
  width: calc(8.75rem * var(--scale-factor, 1));
  height: calc(3.25rem * var(--scale-factor, 1));
  border: calc(0.0625rem * var(--scale-factor, 1)) solid #000078;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: calc(1rem * var(--scale-factor, 1));
  font-family: "fot-tsukuardgothic-std", sans-serif;
  font-weight: 700;
  font-style: normal;
  border-radius: calc(3.125rem * var(--scale-factor, 1));
  background-color: #FF87FF;
}
.kittemaker-top .section__policy form .button button:disabled {
  background-color: #fff;
  pointer-events: none;
}
.kittemaker-top .section__policy form .error-mess {
  font-size: calc(0.75rem * var(--scale-factor, 1));
  color: #E51200;
  line-height: calc(1rem * var(--scale-factor, 1));
  font-weight: 700;
  letter-spacing: calc(0.0625rem * var(--scale-factor, 1));
  display: none;
}
.kittemaker-top .section__policy form .error-mess span {
  display: inline-block;
  padding-bottom: calc(0.3125rem * var(--scale-factor, 1));
  margin-bottom: calc(0.1875rem * var(--scale-factor, 1));
  position: relative;
}
.kittemaker-top .section__policy form .error-mess span:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='3' viewBox='0 0 12 3' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1.5' cy='1.5' r='1.5' fill='%23E51200'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: left center;
  background-size: 14px 3px;
  clip-path: inset(0 0 0 0);
}
@media (max-width: 750px) {
  .kittemaker-top .section__policy form .error-mess span:after {
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='2.5' viewBox='0 0 10 2.5' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1.25' cy='1.25' r='1.25' fill='%23E51200'/%3E%3C/svg%3E");
    background-size: calc(0.6875rem * var(--scale-factor, 1)) calc(0.125rem * var(--scale-factor, 1));
    height: calc(0.125rem * var(--scale-factor, 1));
  }
}
.kittemaker-top .section .btn-backpagetop {
  margin: calc(4.25rem * var(--scale-factor, 1)) 0 0;
}
.kittemaker-top .section .btn-backpagetop a {
  font-size: calc(0.875rem * var(--scale-factor, 1));
  line-height: calc(1.25rem * var(--scale-factor, 1));
  letter-spacing: -0.05em;
}
.kittemaker-top .section .btn-backpagetop.btn-shadow:before {
  background: #E51200;
  border: 1px solid #000078;
  bottom: calc(-0.5rem * var(--scale-factor, 1));
}
.kittemaker-top .breadcrumb {
  margin-top: calc(1.9375rem * var(--scale-factor, 1));
}
.kittemaker-step .header__hamburger {
  display: none !important;
}
.kittemaker-step .section__step--item-slider {
  z-index: 0;
  pointer-events: none;
}
.kittemaker-step .js-slider-step {
  width: calc(12.0625rem * var(--scale-factor, 1));
  margin: 0 auto;
  position: relative;
}
.kittemaker-step .js-slider-step .slick-arrow {
  position: absolute;
  top: calc(8rem * var(--scale-factor, 1));
  width: calc(1.625rem * var(--scale-factor, 1));
  height: calc(2.125rem * var(--scale-factor, 1));
  font-size: 0;
  border: none;
  outline: none;
}
.kittemaker-step .js-slider-step .slick-arrow.slick-next {
  left: calc(100% + 1.5625rem * var(--scale-factor, 1));
  background: url("/assets/common/img/btn_R-pink.svg");
  background-size: 100% 100%;
}
.kittemaker-step .js-slider-step .slick-arrow.slick-prev {
  right: calc(100% + 1.5625rem * var(--scale-factor, 1));
  background: url("/assets/common/img/btn_L-pink.svg");
  background-size: 100% 100%;
}
.kittemaker-step .js-slider-step .slick-dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: calc(1.9375rem * var(--scale-factor, 1));
}
.kittemaker-step .js-slider-step .slick-dots li {
  padding: 0 calc(0.40625rem * var(--scale-factor, 1));
  line-height: 0;
}
.kittemaker-step .js-slider-step .slick-dots li button {
  width: calc(1.0625rem * var(--scale-factor, 1));
  height: calc(1.125rem * var(--scale-factor, 1));
  border: none;
  font-size: 0;
  background: #000;
  background: url("/assets/common/img/icon-heart-w.svg") no-repeat center;
  background-size: 100% 100%;
  padding: 0;
}
.kittemaker-step .js-slider-step .slick-dots li.slick-active button {
  background: url("/assets/common/img/icon-heart-r.svg") no-repeat center;
  background-size: 100% 100%;
}
.kittemaker-step .section {
  position: relative;
  color: #000078;
}
.kittemaker-step .section .btn-back {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 9;
  width: calc(2.5rem * var(--scale-factor, 1));
}
@media (min-width: 751px) {
  .kittemaker-step .section .btn-back {
    position: sticky;
    top: 0;
  }
}
.kittemaker-step .section-content {
  position: relative;
  z-index: 2;
}
.kittemaker-step .section__ttl {
  line-height: 0;
  text-align: center;
}
.kittemaker-step .section__ttl span {
  display: inline-block;
  font-size: calc(0.875rem * var(--scale-factor, 1));
  line-height: calc(1.75rem * var(--scale-factor, 1));
  padding: 0 calc(0.625rem * var(--scale-factor, 1));
  background: #ffffff;
  color: #000078;
  border-radius: 10000px;
  margin-bottom: calc(1rem * var(--scale-factor, 1));
  position: relative;
  letter-spacing: -0.05em;
}
.kittemaker-step .section__ttl span:before {
  content: "";
  position: absolute;
  top: calc(100% - 0.0625rem * var(--scale-factor, 1));
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  width: calc(1.1875rem * var(--scale-factor, 1));
  height: calc(0.6875rem * var(--scale-factor, 1));
  background: #ffffff;
  -webkit-mask-image: url("/assets/common/img/title-arrow.svg");
          mask-image: url("/assets/common/img/title-arrow.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.kittemaker-step .section__ttl span {
  font-size: calc(0.75rem * var(--scale-factor, 1));
  line-height: calc(1.5rem * var(--scale-factor, 1));
  padding: 0 calc(1rem * var(--scale-factor, 1));
  letter-spacing: 0;
}
.kittemaker-step .section__step--item-title {
  position: relative;
  height: calc(5.8125rem * var(--scale-factor, 1));
  width: 100%;
}
.kittemaker-step .section__step--item-title h3 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  margin-top: calc(0.625rem * var(--scale-factor, 1));
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.kittemaker-step .section__step--item-title h3 span {
  font-size: calc(0.875rem * var(--scale-factor, 1));
}
.kittemaker-step .section__step--item-title h3.step2-title {
  opacity: 0;
}
.kittemaker-step .section__step--item.-step2 h3.step1-title {
  opacity: 0;
}
.kittemaker-step .section__step--item.-step2 h3.step2-title {
  opacity: 1;
}
.kittemaker-step .section__step--item.-step2 .section__step--item-slider {
  opacity: 1;
  position: relative;
  z-index: 1;
  pointer-events: auto;
}
.kittemaker-step .section__step--item.-step2 .section__step--item-btns {
  margin-top: calc(9.375rem * var(--scale-factor, 1));
}
.kittemaker-step .section__step--item.-step2 .section__step--item-btns .step1-btn {
  opacity: 0;
}
.kittemaker-step .section__step--item.-step2 .section__step--item-btns .step2-btn {
  opacity: 1;
  width: calc(8.75rem * var(--scale-factor, 1));
  margin: 0 auto;
  display: inline-block;
  position: relative;
  z-index: 1;
}
.kittemaker-step .section__step--item.-step2 .section__step--item-btns .step2-btn::before {
  content: "";
  z-index: -1;
  top: calc(0.3125rem * var(--scale-factor, 1));
  left: 0;
  bottom: calc(-0.3125rem * var(--scale-factor, 1));
  position: absolute;
  right: 0;
  background: #000078;
  border-radius: calc(3.125rem * var(--scale-factor, 1));
}
.kittemaker-step .section__step--item.-step2 .section__step--item-txt {
  display: none;
}
.kittemaker-step .section__step--item.-step2 .section__step--item-main {
  background-color: transparent;
}
.kittemaker-step .section__step--item.-has-image .section__step--item-main::before {
  display: none;
}
.kittemaker-step .section__step--item.-has-image .section__step--item-btns .btn-blue {
  display: block;
}
.kittemaker-step .section__step--item-main {
  width: calc(14.3125rem * var(--scale-factor, 1));
  height: calc(14.3125rem * var(--scale-factor, 1));
  margin: 0 auto;
  background-color: #fff;
  position: relative;
}
.kittemaker-step .section__step--item-main::before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  font-size: calc(0.75rem * var(--scale-factor, 1));
  content: "画像が選択されていません";
  color: #000078;
}
.kittemaker-step .section__step--item-main .canvas-wrap {
  width: calc(13.4375rem * var(--scale-factor, 1));
  height: calc(13.4375rem * var(--scale-factor, 1));
  overflow: hidden;
  position: absolute;
  top: calc(0.4375rem * var(--scale-factor, 1));
  left: calc(0.4375rem * var(--scale-factor, 1));
}
.kittemaker-step .section__step--item-main .canvas-wrap .canvas-container, .kittemaker-step .section__step--item-main .canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}
.kittemaker-step .section__step--item-btns {
  margin-top: calc(2.1875rem * var(--scale-factor, 1));
  font-weight: 700;
  -webkit-transition: margin-top 0.3s ease;
  transition: margin-top 0.3s ease;
  position: relative;
  height: calc(3.5625rem * var(--scale-factor, 1));
}
.kittemaker-step .section__step--item-btns .step1-btn, .kittemaker-step .section__step--item-btns .step2-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.kittemaker-step .section__step--item-btns .step2-btn {
  opacity: 0;
}
.kittemaker-step .section__step--item-btns .label {
  height: calc(3.25rem * var(--scale-factor, 1));
  width: calc(8.75rem * var(--scale-factor, 1));
  border: calc(0.0625rem * var(--scale-factor, 1)) solid #000078;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: calc(1rem * var(--scale-factor, 1));
  font-family: "fot-tsukuardgothic-std", sans-serif;
  font-weight: 700;
  font-style: normal;
  border-radius: calc(3.125rem * var(--scale-factor, 1));
  background-color: #FF87FF;
  cursor: pointer;
}
.kittemaker-step .section__step--item-btns .label::before {
  content: "";
  z-index: -1;
  top: calc(0.3125rem * var(--scale-factor, 1));
  left: 0;
  bottom: calc(-0.3125rem * var(--scale-factor, 1));
  position: absolute;
  right: 0;
  background: #000078;
  border-radius: calc(3.125rem * var(--scale-factor, 1));
}
.kittemaker-step .section__step--item-btn {
  position: relative;
  z-index: 1;
}
.kittemaker-step .section__step--item-btn::before {
  content: "";
  z-index: -1;
  top: calc(0.3125rem * var(--scale-factor, 1));
  left: 0;
  bottom: calc(-0.3125rem * var(--scale-factor, 1));
  position: absolute;
  right: 0;
  background: #000078;
  border-radius: calc(3.125rem * var(--scale-factor, 1));
}
.kittemaker-step .section__step--item-btn + .section__step--item-btn {
  margin-left: calc(1.25rem * var(--scale-factor, 1));
  display: none;
}
.kittemaker-step .section__step--item-btn + .section__step--item-btn .label {
  width: calc(5.75rem * var(--scale-factor, 1));
  background: #00C5FF;
}
.kittemaker-step .section__step--item-txt {
  width: calc(18.4375rem * var(--scale-factor, 1));
  font-size: calc(0.625rem * var(--scale-factor, 1));
  line-height: calc(0.8125rem * var(--scale-factor, 1));
  letter-spacing: calc(-0.0375rem * var(--scale-factor, 1));
  margin: calc(3.5625rem * var(--scale-factor, 1)) auto 0;
  padding-bottom: calc(3.125rem * var(--scale-factor, 1));
  position: relative;
  font-weight: 700;
}
.kittemaker-step .section__step--item-txt span {
  text-decoration: underline;
}
.kittemaker-step .section__step--item-slider {
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.kittemaker-step .section__step--item-slider .js-slider-step {
  width: calc(14.3125rem * var(--scale-factor, 1));
}
.kittemaker-step .section__step--item-slider .slick-list {
  height: calc(14.3125rem * var(--scale-factor, 1));
}
.kittemaker-step .section__step--item-slider .slick-dots {
  margin-top: calc(4.125rem * var(--scale-factor, 1));
}
.kittemaker-step .section__step--item-slider .slick-arrow {
  bottom: calc(-0.3125rem * var(--scale-factor, 1));
  -webkit-transition: none;
  transition: none;
  top: auto;
}
.kittemaker-step .section__step--item-slider .slick-arrow.slick-next {
  left: 100%;
}
.kittemaker-step .section__step--item-slider .slick-arrow.slick-prev {
  right: 100%;
}
.kittemaker-step .section__step--result {
  position: relative;
  z-index: 2;
  overflow-x: hidden;
}
.kittemaker-step .section__step--result::before {
  position: absolute;
  top: 0;
  left: calc(0.4375rem * var(--scale-factor, 1));
  background: url("/assets/letter/img/kittemaker/step3-deco.png") no-repeat center top/100% auto;
  width: calc(22.9375rem * var(--scale-factor, 1));
  height: calc(32.0625rem * var(--scale-factor, 1));
  content: "";
}
.kittemaker-step .section__step--result h3 {
  text-align: center;
  width: calc(12.8125rem * var(--scale-factor, 1));
  margin: 0 auto;
}
@media (min-width: 751px) {
  .kittemaker-step .section__step--result h3 {
    width: calc(14.9375rem * var(--scale-factor, 1));
  }
}
.kittemaker-step .section__step--result-img {
  width: calc(14.3125rem * var(--scale-factor, 1));
  height: calc(14.3125rem * var(--scale-factor, 1));
  margin: calc(2.25rem * var(--scale-factor, 1)) auto calc(1rem * var(--scale-factor, 1));
  position: relative;
}
.kittemaker-step .section__step--result-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.kittemaker-step .section__step--result-txt {
  font-size: calc(1rem * var(--scale-factor, 1));
  line-height: calc(1.875rem * var(--scale-factor, 1));
  margin: calc(2.25rem * var(--scale-factor, 1)) 0 calc(1.25rem * var(--scale-factor, 1));
  text-align: center;
  font-weight: 700;
}
.kittemaker-step .section__step--result-btns {
  margin: calc(1.1875rem * var(--scale-factor, 1)) 0 0;
  font-weight: 700;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.kittemaker-step .section__step--result-btns .note {
  font-size: calc(0.625rem * var(--scale-factor, 1));
  line-height: calc(0.9375rem * var(--scale-factor, 1));
  text-align: center;
  margin: calc(0.9375rem * var(--scale-factor, 1)) 0 0;
}
.kittemaker-step .section__step--result-btn {
  position: relative;
  display: inline-block;
  z-index: 1;
  cursor: pointer;
}
.kittemaker-step .section__step--result-btn::before {
  content: "";
  z-index: -1;
  top: calc(0.3125rem * var(--scale-factor, 1));
  left: 0;
  bottom: calc(-0.3125rem * var(--scale-factor, 1));
  position: absolute;
  right: 0;
  background: #000078;
  border-radius: calc(3.125rem * var(--scale-factor, 1));
}
.kittemaker-step .section__step--result-btn .label {
  border: calc(0.0625rem * var(--scale-factor, 1)) solid #000078;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  font-size: calc(1rem * var(--scale-factor, 1));
  font-family: "fot-tsukuardgothic-std", sans-serif;
  font-weight: 700;
  font-style: normal;
  border-radius: calc(3.125rem * var(--scale-factor, 1));
  background-color: #FF87FF;
  padding: calc(0.6875rem * var(--scale-factor, 1)) calc(1.8125rem * var(--scale-factor, 1));
  color: #000078;
  cursor: pointer;
}
.kittemaker-step .section__step--result-btn.btn-blue {
  margin-top: calc(1.5rem * var(--scale-factor, 1));
}
.kittemaker-step .section__step--result-btn.btn-blue .label {
  background: #00C5FF;
}
.kittemaker-step .section__step--result .btn-backpagetop {
  margin: calc(2.9375rem * var(--scale-factor, 1)) 0 calc(2.3125rem * var(--scale-factor, 1));
}
.kittemaker-step .section__step--result .btn-backpagetop a {
  font-size: calc(0.875rem * var(--scale-factor, 1));
  line-height: calc(1.25rem * var(--scale-factor, 1));
  letter-spacing: -0.05em;
}
.kittemaker-step .section__step--result .btn-backpagetop.btn-shadow:before {
  background: #E51200;
  border: 1px solid #000078;
  bottom: calc(-0.5rem * var(--scale-factor, 1));
}