/**
 * GBU Modal Plugin Styles (BEM Methodology)
 * Version: 1.0.0
 * Author: GBU Dev Team
 * 
 * BEM Structure:
 * .modal (Block)
 * .modal__overlay (Element)
 * .modal__container (Element)
 * .modal__content (Element)
 * .modal__close (Element)
 * .modal--show (Modifier)
 * .modal--image (Modifier)
 * .modal--iframe (Modifier)
 * .modal--inline (Modifier)
 * .modal--ajax (Modifier)
 * .modal--loading (Modifier)
 */
.modal-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

.modal {
  --modal-overlay-opacity: 0;
  --modal-container-opacity: 0;
  --modal-container-transform: none;
}
@media (min-width: 751px) {
  .modal {
    --scale-factor: 1.47;
  }
}
.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  opacity: var(--modal-overlay-opacity);
  -webkit-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
}
.modal__container {
  position: relative;
  max-width: calc(100vw - 4.6875rem * var(--scale-factor, 1));
  max-height: 90vh;
  margin: calc(1.25rem * var(--scale-factor, 1));
  opacity: var(--modal-container-opacity);
  -webkit-transform: var(--modal-container-transform);
          transform: var(--modal-container-transform);
  -webkit-transition: opacity 0.3s ease-out, -webkit-transform 0.3s ease-out;
  transition: opacity 0.3s ease-out, -webkit-transform 0.3s ease-out;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
}
.modal__container:focus {
  outline: none;
}
.modal__content {
  padding: calc(1.25rem * var(--scale-factor, 1)) 0;
  max-height: calc(90vh - 2.5rem * var(--scale-factor, 1));
  background-color: #fff;
  border: 1px solid #000078;
  border-radius: calc(1.25rem * var(--scale-factor, 1));
}
.modal__content::-webkit-scrollbar {
  width: calc(0.375rem * var(--scale-factor, 1));
}
.modal__content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: calc(0.1875rem * var(--scale-factor, 1));
}
.modal__content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: calc(0.1875rem * var(--scale-factor, 1));
}
.modal__content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
.modal__close {
  position: absolute;
  top: calc(1.125rem * var(--scale-factor, 1));
  right: calc(1.125rem * var(--scale-factor, 1));
  width: calc(1.4375rem * var(--scale-factor, 1));
  height: calc(1.4375rem * var(--scale-factor, 1));
  background: url("/assets/common/img/modal-close.png") no-repeat center center/100% auto;
  cursor: pointer;
  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;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  z-index: 99;
  border: none;
  font-size: 0;
}
.modal__close:hover, .modal__close:focus {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  outline: none;
}
.modal__close:active {
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
}
.modal__image {
  display: block;
  max-width: 100%;
  max-height: 95vh;
  height: auto;
  border-radius: calc(1.25rem * var(--scale-factor, 1));
}
.modal__iframe {
  width: 100%;
  height: 80vh;
  min-height: calc(25rem * var(--scale-factor, 1));
  border: none;
  border-radius: calc(1.25rem * var(--scale-factor, 1));
}
.modal__error {
  color: #d32f2f;
  text-align: center;
  padding: calc(1.25rem * var(--scale-factor, 1));
}
.modal--show {
  --modal-overlay-opacity: 1;
  --modal-container-opacity: 1;
}
.modal--closing {
  --modal-overlay-opacity: 0;
  --modal-container-opacity: 0;
}
.modal--blur .modal__overlay {
  backdrop-filter: blur(calc(0.1875rem * var(--scale-factor, 1)));
  -webkit-backdrop-filter: blur(calc(0.1875rem * var(--scale-factor, 1)));
}
.modal--image .modal__container {
  background: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  max-width: 95vw;
  max-height: 95vh;
}
.modal--image .modal__content {
  padding: 0;
  background: transparent;
}
.modal--iframe .modal__container {
  max-width: 95vw;
  max-height: 95vh;
}
.modal--iframe .modal__content {
  padding: 0;
}
.modal--inline .modal__container {
  width: calc(100vw - 4.6875rem * var(--scale-factor, 1));
}
.modal--ajax .modal__container {
  max-width: calc(56.25rem * var(--scale-factor, 1));
  width: 90vw;
}
.modal--loading .modal__content {
  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;
  min-height: calc(12.5rem * var(--scale-factor, 1));
}
.modal--loading .modal__content::after {
  content: "";
  width: calc(2.5rem * var(--scale-factor, 1));
  height: calc(2.5rem * var(--scale-factor, 1));
  border: calc(0.25rem * var(--scale-factor, 1)) solid #f3f3f3;
  border-top: calc(0.25rem * var(--scale-factor, 1)) solid #3498db;
  border-radius: 50%;
  -webkit-animation: modal-spin 1s linear infinite;
          animation: modal-spin 1s linear infinite;
}

.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%;
}

.btn-export-preset {
  position: fixed;
  left: 20px;
  top: 20px;
  z-index: 100;
  display: block !important;
  width: 100px;
  height: 30px;
  color: #fff;
  background-color: #000078;
}

.header__hamburger {
  display: none !important;
}

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

.btn-control {
  z-index: 7;
  cursor: pointer;
}

.container {
  position: relative;
  z-index: 8;
}
@media (max-width: 750px) {
  .container {
    background: -webkit-gradient(linear, left bottom, left top, from(#fff), color-stop(22%, #E1F2FF), color-stop(56%, #BAE2FF), color-stop(83%, #A1D8FF), to(#99D5FF));
    background: linear-gradient(to top, #fff 0%, #E1F2FF 22%, #BAE2FF 56%, #A1D8FF 83%, #99D5FF 100%);
  }
}

.footer {
  margin-top: 0;
}

body:not(.loaded) {
  pointer-events: none;
}
@media (max-width: 750px) {
  body:not(.loaded) .control-wrapper {
    display: none;
  }
}

.fakebtn {
  opacity: 0;
  outline: none;
  position: absolute;
}

.wrapper-outer {
  padding-bottom: calc(2.625rem * var(--scale-factor, 1));
  position: relative;
}
@media (max-width: 750px) {
  .wrapper-outer.fixed-bottom .control-wrapper {
    position: absolute;
    bottom: 0;
    overflow: hidden;
  }
}
.wrapper-outer .content-wrapper {
  position: relative;
}

#confirm.at-preview {
  display: none;
}

.txt-underline span {
  display: inline-block;
  position: relative;
}
.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;
}

.intro-container {
  max-height: 100%;
  overflow-x: hidden;
}

.intro-slider {
  width: 100vw;
}
.intro-slider .modal-inner {
  min-height: calc(34.125rem * var(--scale-factor, 1));
  overflow: auto;
  width: 100%;
  text-align: center;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.intro-slider .modal-inner.hide {
  opacity: 0;
}
.intro-slider .js-slider {
  position: relative;
  z-index: 1;
  width: calc(15.625rem * var(--scale-factor, 1));
  margin: 0 auto;
}
.intro-slider .slide-ttl {
  text-align: center;
}
.intro-slider .slide-ttl span {
  width: calc(6.25rem * var(--scale-factor, 1));
  display: block;
  margin: 0 auto;
}
.intro-slider .slide-ttl p {
  display: inline-block;
  background: #fff;
  font-size: calc(0.8125rem * var(--scale-factor, 1));
  line-height: calc(1rem * var(--scale-factor, 1));
  font-family: "fot-tsukuardgothic-std", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #000078;
  padding: calc(0.625rem * var(--scale-factor, 1)) calc(1.0625rem * var(--scale-factor, 1));
  text-align: center;
  border-radius: 10000px;
  margin-bottom: calc(1.5625rem * var(--scale-factor, 1));
}
.intro-slider .slide-ttl p span {
  width: calc(0.8125rem * var(--scale-factor, 1));
  display: inline-block;
}
.intro-slider .slide-photo {
  position: relative;
  width: calc(8.125rem * var(--scale-factor, 1));
  margin: 0 auto;
  border: 1px solid #000078;
}
.intro-slider .slide-photo .arrow {
  position: absolute;
}
.intro-slider .slick-dots {
  margin-top: calc(1.125rem * var(--scale-factor, 1));
}
.intro-slider .slick-arrow {
  top: calc(18rem * var(--scale-factor, 1));
}
.intro-slider .slick-arrow.slick-next {
  left: calc(100% - 0.1875rem * var(--scale-factor, 1));
}
.intro-slider .slick-arrow.slick-prev {
  right: calc(100% - 0.1875rem * var(--scale-factor, 1));
}
.intro-slider .slick-arrow.slick-disabled {
  display: none !important;
}
.intro-slider .slide1 .slide-photo .arrow {
  bottom: calc(0rem * var(--scale-factor, 1));
  right: calc(100% + 0.6875rem * var(--scale-factor, 1));
  width: calc(2.875rem * var(--scale-factor, 1));
}
.intro-slider .slide2 .slide-photo .arrow {
  top: calc(5.625rem * var(--scale-factor, 1));
  left: calc(-1.1875rem * var(--scale-factor, 1));
  width: calc(2.875rem * var(--scale-factor, 1));
}
.intro-slider .slide4 .slide-photo {
  position: relative;
}
.intro-slider .slide4 .slide-photo:before {
  content: "";
  position: absolute;
  top: calc(-0.75rem * var(--scale-factor, 1));
  right: calc(-0.625rem * var(--scale-factor, 1));
  width: calc(2.1875rem * var(--scale-factor, 1));
  height: calc(2.1875rem * var(--scale-factor, 1));
  border-radius: 50%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-shadow: inset 0 0 0 calc(0.1875rem * var(--scale-factor, 1)) #000078;
          box-shadow: inset 0 0 0 calc(0.1875rem * var(--scale-factor, 1)) #000078;
}
.intro-slider .slide4 .slide-photo .arrow {
  top: calc(-0.5rem * var(--scale-factor, 1));
  left: calc(100% + 0.8125rem * var(--scale-factor, 1));
  width: calc(2.875rem * var(--scale-factor, 1));
}
.intro-slider .btn-skip {
  margin-top: calc(1.8125rem * var(--scale-factor, 1));
}
.intro-slider .btn-skip .ending {
  display: none;
}
.intro-slider .btn-skip.is-end .ending {
  display: inline-block;
}
.intro-slider .btn-skip.is-end span:first-child {
  display: none;
}

.post-card-maker {
  padding: calc(1rem * var(--scale-factor, 1)) calc(1.09375rem * var(--scale-factor, 1));
  position: relative;
}
.post-card-maker.hiding {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  left: 0;
  right: 0;
  overflow: hidden;
}
.post-card-maker .section--ttl {
  line-height: 0;
  text-align: center;
}
.post-card-maker .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: #fff;
  color: #000078;
  border-radius: 10000px;
  margin-bottom: calc(1rem * var(--scale-factor, 1));
  position: relative;
  letter-spacing: -0.05em;
}
.post-card-maker .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: #fff;
  -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;
}
.post-card-maker .section--ttl span {
  font-size: calc(0.8125rem * var(--scale-factor, 1));
  letter-spacing: 0;
  padding-inline: calc(0.875rem * var(--scale-factor, 1));
  line-height: calc(1.625rem * var(--scale-factor, 1));
  margin-bottom: calc(1.4375rem * var(--scale-factor, 1));
}
.post-card-maker .section--ttl span:before {
  top: calc(100% - 0.375rem * var(--scale-factor, 1));
}
.post-card-maker .frame-container {
  width: 100%;
  aspect-ratio: 568/840;
  position: relative;
  height: calc(31.4375rem * var(--scale-factor, 1));
}
@media (min-width: 751px) and (max-width: 1220px) {
  .post-card-maker .frame-container {
    --scale-factor: 1.47;
  }
}
.post-card-maker .frame-container .btn-delete {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: calc(5rem * var(--scale-factor, 1));
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  opacity: 0;
  cursor: pointer;
  visibility: hidden;
}
.post-card-maker .frame-container .btn-delete.active {
  opacity: 1;
  visibility: visible;
}

.control-wrapper {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9;
  bottom: 0;
  height: calc(2.625rem * var(--scale-factor, 1));
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.control-wrapper.hiding {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}
@media (max-width: 750px) {
  .control-wrapper.hide-sp {
    display: none;
  }
}
@media (min-width: 751px) {
  .control-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(2.625rem * var(--scale-factor, 1));
    overflow: hidden;
  }
}
.control-wrapper.is-choosing {
  height: auto;
  top: 0;
}
.control-wrapper.is-choosing .control-tray {
  position: absolute;
  bottom: 0;
  z-index: 2;
}
.control-wrapper.is-choosing .control-tray .tabs__nav button {
  position: relative;
}
.control-wrapper.is-choosing .control-tray .tabs__nav button:nth-child(1).active {
  border-bottom-color: #FFAFE9;
  background: #FFAFE9;
}
.control-wrapper.is-choosing .control-tray .tabs__nav button:nth-child(1).active:before {
  content: "";
  position: absolute;
  bottom: calc(-0.125rem * var(--scale-factor, 1));
  left: 0;
  right: 0;
  height: calc(0.25rem * var(--scale-factor, 1));
  background: #FFAFE9;
}
.control-wrapper.is-choosing .control-tray .tabs__nav button:nth-child(2).active {
  border-bottom-color: #00C5FF;
  background: #00C5FF;
}
.control-wrapper.is-choosing .control-tray .tabs__nav button:nth-child(2).active:before {
  content: "";
  position: absolute;
  bottom: calc(-0.125rem * var(--scale-factor, 1));
  left: 0;
  right: 0;
  height: calc(0.25rem * var(--scale-factor, 1));
  background: #00C5FF;
}
.control-wrapper.is-choosing .control-tray .tabs__nav button:nth-child(3).active {
  border-bottom-color: #FCCF00;
  background: #FCCF00;
}
.control-wrapper.is-choosing .control-tray .tabs__nav button:nth-child(3).active:before {
  content: "";
  position: absolute;
  bottom: calc(-0.125rem * var(--scale-factor, 1));
  left: 0;
  right: 0;
  height: calc(0.25rem * var(--scale-factor, 1));
  background: #FCCF00;
}
.control-wrapper.is-choosing .control-tray .tabs__nav button:nth-child(4).active {
  border-bottom-color: #00E6B2;
  background: #00E6B2;
}
.control-wrapper.is-choosing .control-tray .tabs__nav button:nth-child(4).active:before {
  content: "";
  position: absolute;
  bottom: calc(-0.125rem * var(--scale-factor, 1));
  left: 0;
  right: 0;
  height: calc(0.25rem * var(--scale-factor, 1));
  background: #00E6B2;
}
.control-wrapper.is-choosing .tabs-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.control-tray {
  margin: 0;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  position: relative;
}
.control-tray .tabs__nav {
  margin: 0;
  border: none;
}
.control-tray .tabs__nav button {
  font-size: calc(0.75rem * var(--scale-factor, 1));
  line-height: calc(0.875rem * var(--scale-factor, 1));
  font-family: "fot-tsukuardgothic-std", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #000078;
  height: calc(2.625rem * var(--scale-factor, 1));
  border-radius: calc(1.25rem * var(--scale-factor, 1)) calc(1.25rem * var(--scale-factor, 1)) 0 0;
  border: none;
  border: 1px solid #000078;
  width: calc(25% + 2px);
  padding-inline: 0;
  -webkit-transition: none;
  transition: none;
}
.control-tray .tabs__nav button + button {
  margin-left: -1px;
}
.control-tray .tabs__nav button:nth-child(1) {
  background: -webkit-gradient(linear, left top, left bottom, from(var(--pink)), to(var(--white)));
  background: linear-gradient(to bottom, var(--pink), var(--white));
}
.control-tray .tabs__nav button:nth-child(2) {
  background: -webkit-gradient(linear, left top, left bottom, from(var(--blue)), to(var(--white)));
  background: linear-gradient(to bottom, var(--blue), var(--white));
}
.control-tray .tabs__nav button:nth-child(3) {
  background: -webkit-gradient(linear, left top, left bottom, from(var(--yellow)), to(var(--white)));
  background: linear-gradient(to bottom, var(--yellow), var(--white));
}
.control-tray .tabs__nav button:nth-child(4) {
  background: -webkit-gradient(linear, left top, left bottom, from(var(--green)), to(var(--white)));
  background: linear-gradient(to bottom, var(--green), var(--white));
}
.control-tray .tabs__main {
  background: #eee;
}
.control-tray .tabs__main--inner {
  overflow: auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: calc(31.25rem * var(--scale-factor, 1));
  background: #00C5FF;
}
.control-tray .tabs__main--inner .tabs__main--item {
  padding: calc(1.875rem * var(--scale-factor, 1)) calc(1.5625rem * var(--scale-factor, 1));
  border-radius: 0;
}
.control-tray .tabs__main--inner .tabs__main--item .tabs-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.control-tray .tabs__main--inner .tabs__main--item .tab-bg {
  margin: 0 calc(-0.625rem * var(--scale-factor, 1));
}
.control-tray .tabs__main--inner .tabs__main--item .tab-bg .col {
  padding: 0 calc(0.625rem * var(--scale-factor, 1));
  width: 33.33%;
}
.control-tray .tabs__main--inner .tabs__main--item .tab-bg .choose-bg {
  background: #FAF0F0;
  position: relative;
  margin-bottom: calc(1.3125rem * var(--scale-factor, 1));
}
.control-tray .tabs__main--inner .tabs__main--item .tab-bg .choose-bg.active:before {
  content: "";
  position: absolute;
  top: calc(0.625rem * var(--scale-factor, 1));
  left: calc(0.625rem * var(--scale-factor, 1));
  width: calc(1.25rem * var(--scale-factor, 1));
  height: calc(1.25rem * var(--scale-factor, 1));
  background: url("../img/postcardmaker/or/icon-choosing.png") no-repeat center center;
  background-size: 100% 100%;
}
.control-tray .tabs__main--inner .tabs__main--item .tab-icon, .control-tray .tabs__main--inner .tabs__main--item .tab-txt, .control-tray .tabs__main--inner .tabs__main--item .tab-deco {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 calc(-0.6875rem * var(--scale-factor, 1));
}
.control-tray .tabs__main--inner .tabs__main--item .tab-icon .col, .control-tray .tabs__main--inner .tabs__main--item .tab-txt .col, .control-tray .tabs__main--inner .tabs__main--item .tab-deco .col {
  padding: 0 calc(0.6875rem * var(--scale-factor, 1));
  width: 33.33%;
}
.control-tray .tabs__main--inner .tabs__main--item .tab-icon img, .control-tray .tabs__main--inner .tabs__main--item .tab-txt img, .control-tray .tabs__main--inner .tabs__main--item .tab-deco img {
  width: 100%;
}
.control-tray .tabs__main--inner .tabs__main--item .tab-icon .item, .control-tray .tabs__main--inner .tabs__main--item .tab-txt .item, .control-tray .tabs__main--inner .tabs__main--item .tab-deco .item {
  margin-bottom: calc(1.25rem * var(--scale-factor, 1));
  cursor: pointer;
}
.control-tray .tabs__main--inner .tabs__main--item .deco-sample21, .control-tray .tabs__main--inner .tabs__main--item .deco-sample21 img {
  max-width: calc(4.0625rem * var(--scale-factor, 1)) !important;
  margin: 0 auto;
}
.control-tray .tabs__main--inner .tabs__main--item#tab1 {
  background: -webkit-gradient(linear, left top, left bottom, from(var(--pink)), to(var(--white)));
  background: linear-gradient(to bottom, var(--pink), var(--white));
}
.control-tray .tabs__main--inner .tabs__main--item#tab2 {
  background: -webkit-gradient(linear, left top, left bottom, from(var(--blue)), to(var(--white)));
  background: linear-gradient(to bottom, var(--blue), var(--white));
}
.control-tray .tabs__main--inner .tabs__main--item#tab3 {
  background: -webkit-gradient(linear, left top, left bottom, from(var(--yellow)), to(var(--white)));
  background: linear-gradient(to bottom, var(--yellow), var(--white));
}
.control-tray .tabs__main--inner .tabs__main--item#tab4 {
  background: -webkit-gradient(linear, left top, left bottom, from(var(--green)), to(var(--white)));
  background: linear-gradient(to bottom, var(--green), var(--white));
}

.post-card-result {
  display: none;
}
.post-card-result.showing {
  display: block;
}
.post-card-result .preview-area {
  padding: calc(1rem * var(--scale-factor, 1)) calc(1.125rem * var(--scale-factor, 1));
  position: relative;
  text-align: center;
  overflow: hidden;
}
.post-card-result .preview-area .section--ttl {
  line-height: 0;
  text-align: center;
}
.post-card-result .preview-area .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: #fff;
  color: #000078;
  border-radius: 10000px;
  margin-bottom: calc(1rem * var(--scale-factor, 1));
  position: relative;
  letter-spacing: -0.05em;
}
.post-card-result .preview-area .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: #fff;
  -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;
}
.post-card-result .preview-area .section--ttl span {
  margin-bottom: 0;
  font-size: calc(0.8125rem * var(--scale-factor, 1));
  line-height: calc(1.625rem * var(--scale-factor, 1));
  letter-spacing: 0;
  padding-inline: calc(0.875rem * var(--scale-factor, 1));
}
.post-card-result .preview-area .section--ttl span:before {
  top: calc(100% - 0.375rem * var(--scale-factor, 1));
}
.post-card-result .preview-area .preview-frame {
  width: calc(14.375rem * var(--scale-factor, 1));
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.post-card-result .preview-area .preview-frame:before {
  content: "";
  position: absolute;
  top: calc(-8.4375rem * var(--scale-factor, 1));
  left: calc(-4rem * var(--scale-factor, 1));
  width: calc(22.9375rem * var(--scale-factor, 1));
  height: calc(30.8125rem * var(--scale-factor, 1));
  background: url("/assets/letter/img/postcardmaker/or/preview-deco.png") no-repeat center center;
  background-size: 100% 100%;
  z-index: -1;
}
@media (min-width: 751px) {
  .post-card-result .preview-area .preview-frame:before {
    top: calc(-6.25rem * var(--scale-factor, 1));
  }
}
.post-card-result .preview-area .preview-frame #preview {
  z-index: 2;
  width: 100%;
}
.post-card-result .preview-area .preview-subttl {
  margin: calc(2rem * var(--scale-factor, 1)) auto calc(0.375rem * var(--scale-factor, 1));
  width: calc(7.3125rem * var(--scale-factor, 1));
}
@media (min-width: 751px) {
  .post-card-result .preview-area .preview-subttl {
    margin-bottom: calc(1.5625rem * var(--scale-factor, 1));
  }
}
.post-card-result .preview-area .preview-txt {
  font-size: calc(1rem * var(--scale-factor, 1));
  line-height: calc(2rem * var(--scale-factor, 1));
  font-family: "fot-tsukuardgothic-std", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #000078;
  margin-bottom: calc(1.8125rem * var(--scale-factor, 1));
}
.post-card-result .preview-area .preview-desc {
  margin: calc(1.375rem * var(--scale-factor, 1)) 0 calc(1.5rem * var(--scale-factor, 1));
  font-size: calc(1rem * var(--scale-factor, 1));
  line-height: calc(1.875rem * var(--scale-factor, 1));
  font-family: "fot-tsukuardgothic-std", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #000078;
}
.post-card-result .preview-area .btn-download {
  margin-top: calc(1.625rem * var(--scale-factor, 1));
}
.post-card-result .preview-area .btn-download a {
  line-height: calc(1.5rem * var(--scale-factor, 1));
}
.post-card-result .preview-area .btn-preview a {
  font-size: calc(1rem * var(--scale-factor, 1));
  line-height: calc(1.5rem * var(--scale-factor, 1));
}
.post-card-result .preview-area .btn-preview:before {
  top: calc(0.4375rem * var(--scale-factor, 1));
  bottom: calc(-0.4375rem * var(--scale-factor, 1));
}
.post-card-result .preview-area .block-sns {
  margin-top: calc(4.3125rem * var(--scale-factor, 1));
}
.post-card-result .preview-area .block-sns--ttl {
  width: calc(8.625rem * var(--scale-factor, 1));
  margin: 0 auto calc(1rem * var(--scale-factor, 1));
}
.post-card-result .preview-area .block-sns .list-sns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.post-card-result .preview-area .block-sns .list-sns li {
  padding: 0 calc(0.625rem * var(--scale-factor, 1));
  position: relative;
  z-index: 1;
}
.post-card-result .preview-area .block-sns .list-sns li:before {
  content: "";
  position: absolute;
  top: calc(0.4375rem * var(--scale-factor, 1));
  left: calc(0.625rem * var(--scale-factor, 1));
  right: calc(0.625rem * var(--scale-factor, 1));
  height: calc(4.6875rem * var(--scale-factor, 1));
  z-index: -1;
  background: #E51200;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #000078;
  border-radius: 50%;
}
.post-card-result .preview-area .block-sns .list-sns li a {
  width: calc(4.6875rem * var(--scale-factor, 1));
  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;
  height: calc(4.6875rem * var(--scale-factor, 1));
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 50%;
  border: 1px solid #000078;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.post-card-result .preview-area .block-sns .list-sns li a.icon-x img {
  width: calc(2.25rem * var(--scale-factor, 1));
}
.post-card-result .preview-area .block-sns .list-sns li a.icon-ig img {
  width: calc(2.6875rem * var(--scale-factor, 1));
}
.post-card-result .preview-area .block-sns .list-sns li a.icon-line img {
  width: calc(2.6875rem * var(--scale-factor, 1));
}
.post-card-result .preview-area .block-sns .btn-again {
  margin-top: calc(1.25rem * var(--scale-factor, 1));
}
.post-card-result .preview-area .block-sns .btn-again a {
  line-height: calc(1.5rem * var(--scale-factor, 1));
}
.post-card-result .preview-area .block-sns .btn-again:before {
  top: calc(0.5625rem * var(--scale-factor, 1));
  bottom: calc(-0.5625rem * var(--scale-factor, 1));
  background: #E51200;
  border: 1px solid #000078;
}
.post-card-result .btn-backpagetop {
  margin: calc(3.3125rem * var(--scale-factor, 1)) auto calc(2.5625rem * var(--scale-factor, 1));
}
.post-card-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;
}
.post-card-result .btn-backpagetop:before {
  background: #E51200;
  border: 1px solid #000078;
}
.post-card-result .section03 {
  margin-top: calc(2.875rem * var(--scale-factor, 1));
  padding: calc(8.5rem * var(--scale-factor, 1)) 0 calc(19.625rem * var(--scale-factor, 1));
  position: relative;
  text-align: center;
}
.post-card-result .section03 .section--ttl {
  width: calc(7.5625rem * var(--scale-factor, 1));
  margin: 0 auto calc(1.625rem * var(--scale-factor, 1));
}
.post-card-result .section03 .section-content {
  position: relative;
  z-index: 2;
}
.post-card-result .section03 .photo {
  width: calc(12.9375rem * var(--scale-factor, 1));
  margin: 0 auto calc(1.6875rem * var(--scale-factor, 1));
}
.post-card-result .section03 .txt-sub {
  font-size: calc(0.8125rem * var(--scale-factor, 1));
  line-height: calc(1.25rem * var(--scale-factor, 1));
  color: #000078;
  margin-top: calc(1.6875rem * var(--scale-factor, 1));
  font-family: "fot-tsukuardgothic-std", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.post-card-result .section03 .txt-sub + .txt-sub {
  margin-top: calc(1.25rem * var(--scale-factor, 1));
}
.post-card-result .section03 .section-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.post-card-result .section03 .section-bg:before {
  content: "";
  position: absolute;
  top: calc(14.375rem * var(--scale-factor, 1));
  left: 0;
  right: 0;
  bottom: 0;
}
.post-card-result .section03 .section-bg.bg-pink {
  background: url("/assets/letter/img/postandgift/bg-heart-pink.png") no-repeat center top, url("/assets/letter/img/postandgift/bg-heart-pink-bottom.png") no-repeat center bottom;
  background-size: 100% auto;
}
.post-card-result .section03 .section-bg.bg-pink:before {
  bottom: calc(22.3125rem * var(--scale-factor, 1));
  top: calc(14.0625rem * var(--scale-factor, 1));
  background: -webkit-gradient(linear, left top, left bottom, from(#ffcef1), to(#ffdef6));
  background: linear-gradient(to bottom, #ffcef1, #ffdef6);
}

#modal-backconfirm {
  overflow: auto;
  height: 100%;
}

.modal-backconfirm.modal-inner {
  padding: calc(2.3125rem * var(--scale-factor, 1)) 0 calc(1.5625rem * var(--scale-factor, 1));
  color: #000078;
  font-family: "fot-tsukuardgothic-std", sans-serif;
  font-weight: 700;
  font-style: normal;
  z-index: 2;
  position: relative;
}
.modal-backconfirm .icon-close {
  position: absolute;
  top: calc(1.375rem * var(--scale-factor, 1));
  right: calc(1rem * var(--scale-factor, 1));
  width: calc(1.625rem * var(--scale-factor, 1));
}
.modal-backconfirm .warning-icon {
  width: calc(9.25rem * var(--scale-factor, 1));
  aspect-ratio: 148/142;
  margin: 0 auto calc(1.5625rem * var(--scale-factor, 1));
}
.modal-backconfirm .txt-warning {
  font-size: calc(0.875rem * var(--scale-factor, 1));
  line-height: calc(1.25rem * var(--scale-factor, 1));
  letter-spacing: -0.05em;
  margin-bottom: calc(1.5rem * var(--scale-factor, 1));
}
.modal-backconfirm .btn-cancel a {
  padding: calc(0.375rem * var(--scale-factor, 1)) calc(0.875rem * var(--scale-factor, 1)) calc(0.375rem * var(--scale-factor, 1));
}
.modal-backconfirm .btn-confirm, .modal-backconfirm .btn-confirm2 {
  margin-top: calc(1.125rem * var(--scale-factor, 1));
}
.modal-backconfirm .btn-confirm a, .modal-backconfirm .btn-confirm2 a {
  padding: calc(0.375rem * var(--scale-factor, 1)) calc(0.8125rem * var(--scale-factor, 1)) calc(0.375rem * var(--scale-factor, 1));
}

.preload-hiding {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}

.modal__container {
  max-width: calc(18.75rem * var(--scale-factor, 1));
}

.modal__close {
  width: calc(1.625rem * var(--scale-factor, 1));
  height: calc(1.625rem * var(--scale-factor, 1));
  top: calc(1.375rem * var(--scale-factor, 1));
  right: calc(1.0625rem * var(--scale-factor, 1));
}

.simplebar-track.simplebar-vertical {
  background: transparent;
}

.main-wrapper {
  position: relative;
  z-index: 1;
}

footer {
  position: relative;
  z-index: 2;
}

.modal-open .control-wrapper {
  position: absolute;
  bottom: 0;
}

.modal__container {
  height: calc(31.6875rem * var(--scale-factor, 1));
  max-height: 90vh;
}
.modal__container .modal__content {
  height: 100%;
}
.modal__container #modal-login {
  height: 100%;
  overflow: auto;
}