@charset "utf-8";

.content_main{
  width: 100%;

  background-color: #fff;
}
.content_main .section1{
  padding: calc(60 * var(--content_width) / 375) 0 calc(20 * var(--content_width) / 375);
  background-image: url(../images/bg_sub.png);
  background-size: 100% auto;
  background-position: top center;
}
.content_main .section1 .step_block{
  width: calc(214 * var(--content_width) / 375);
  line-height: 0;
  margin: 0 auto calc(25 * var(--content_width) / 375);
}
.content_main .section1 .content_title,
.content_main .section1 .content_text{
  padding: 0 calc(30 * var(--content_width) / 375);
}
.content_main .section1 .content_title{
  font-size: calc(24 * var(--content_width) / 375);
  font-weight: bold;
  line-height: 1.5em;
  color: #967D64;
  margin-bottom: calc(10 * var(--content_width) / 375);
}
.content_main .section1 .content_text{
  font-size: calc(16 * var(--content_width) / 375);
  line-height: 1.5em;
  margin-bottom: calc(25 * var(--content_width) / 375);
}

.content_main .section1 .btn_preview_block{
  position: relative;
  left: 0;
  width: 100%;

  z-index: 5;
}
.content_main .section1 .btn_preview{
  position: relative;
  width: calc(176 * var(--content_width) / 375);
  height: calc(34 * var(--content_width) / 375);
  line-height: calc(30 * var(--content_width) / 375);
  font-size: calc(16 * var(--content_width) / 375);
  font-weight: bold;
  border-radius: calc(10 * var(--content_width) / 375);
  color: #967D64;
  background-color: #FFFFFF;
  padding: 0 calc(14 * var(--content_width) / 375);
  text-align: left;
  border: calc(2 * var(--content_width) / 375) solid #967D64;
  margin-left: calc(30 * var(--content_width) / 375);
  margin-bottom: calc(-2.5 * var(--content_width) / 375);

  z-index: 5;
}
.content_main .section1 .btn_preview::after{
  content: "";
  position: absolute;
  top: calc(4 * var(--content_width) / 375);
  bottom: 0;
  right: calc(14 * var(--content_width) / 375);
  width: calc(14 * var(--content_width) / 375);
  height: calc(11 * var(--content_width) / 375);
  margin: auto 0;
  background-image: url(../images/icon_open_preview.png);
  background-size: 100% 100%;
}
.content_main.preview  .section1 .btn_preview{
  border-bottom: calc(2 * var(--content_width) / 375) solid #fff;
  border-radius: calc(10 * var(--content_width) / 375) calc(10 * var(--content_width) / 375) 0 0;
  transition: all 0.2s ease-out;
}
.content_main.preview .section1 .btn_preview::after{
  top: calc(2 * var(--content_width) / 375);
  background-image: url(../images/icon_close_preview.png);
}
.preview_outer{
  position: relative;
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  transition: grid-template-rows 0.2s ease-out;
}
.content_main.preview .preview_outer{
  grid-template-rows: 1fr;
}
.preview_inner{
  width: 100%;
  overflow: hidden;
}
.preview_outer .preview_wrapper{
  position: relative;

  width: 100%;
  padding: calc(40 * var(--content_width) / 375);
  background-color: #fff;
  border-top: calc(2 * var(--content_width) / 375) solid #967D64;
  border-bottom: calc(2 * var(--content_width) / 375) solid #967D64;
}

.preview_outer .preview_wrapper .preview_block{
  position: relative;
  width: 100%;
  line-height: 0;
  background-size: 100% 100%;
  overflow: hidden;
  aspect-ratio: 12 / 16;
  border: calc(var(--content_width) / 375) solid #CACACA;
}
.preview_outer .preview_wrapper .preview_block.letter_type0.letter_size0{ background-image: url(../images/letter/letter_smilepark_40words_preview.png); }
.preview_outer .preview_wrapper .preview_block.letter_type0.letter_size1{ background-image: url(../images/letter/letter_smilepark_80words_preview.png); }
.preview_outer .preview_wrapper .preview_block.letter_type0.letter_size2{ background-image: url(../images/letter/letter_smilepark_140words_preview.png); }
.preview_outer .preview_wrapper .preview_block.letter_type1.letter_size0{ background-image: url(../images/letter/letter_sweets_40words_preview.png); }
.preview_outer .preview_wrapper .preview_block.letter_type1.letter_size1{ background-image: url(../images/letter/letter_sweets_80words_preview.png); }
.preview_outer .preview_wrapper .preview_block.letter_type1.letter_size2{ background-image: url(../images/letter/letter_sweets_140words_preview.png); }
.preview_outer .preview_wrapper .preview_block.letter_type2.letter_size0{ background-image: url(../images/letter/letter_character_40words_preview.png); }
.preview_outer .preview_wrapper .preview_block.letter_type2.letter_size1{ background-image: url(../images/letter/letter_character_80words_preview.png); }
.preview_outer .preview_wrapper .preview_block.letter_type2.letter_size2{ background-image: url(../images/letter/letter_character_140words_preview.png); }

.preview_outer .preview_wrapper .preview_block .preview_canvas,
.preview_outer .preview_wrapper .preview_block .preview_cursor{
  width: 100%;
}
.preview_outer .preview_wrapper .preview_block .preview_cursor{
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  z-index: 10;
  animation: preview_cursor_anim 1s step-start infinite;
}
.preview_outer .preview_wrapper .preview_block.active .preview_cursor{
  display: block;
}
@keyframes preview_cursor_anim {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.preview_outer .preview_wrapper .preview_block.letter_size0::after{
  font-size: calc(86 * (295 * var(--content_width) / 375) / 1200);
  line-height: 1.72em;
}
.preview_outer .preview_wrapper .preview_block.letter_size1::after{
  font-size: calc(60 * (295 * var(--content_width) / 375) / 1200);
  line-height: 1.83em;
}
.preview_outer .preview_wrapper .preview_block.letter_size2::after{
  font-size: calc(43 * (295 * var(--content_width) / 375) / 1200);
  line-height: 2.32em;
}

.input_block{
  padding: calc(30 * var(--content_width) / 375);
}
.input_block .input_title{
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: calc(16 * var(--content_width) / 375);
  font-weight: bold;
  line-height: 1em;
  margin-bottom: calc(15 * var(--content_width) / 375);

}
.input_block .input_title::before{
  content: "";
  width: calc(10 * var(--content_width) / 375);
  height: calc(10 * var(--content_width) / 375);
  margin-right: calc(5 * var(--content_width) / 375);
  background-image: url(../images/icon_dot.png);
  background-size: 100% 100%;
}
.input_block .input_title::after{
  content: "※必須";
  font-size: calc(13 * var(--content_width) / 375);
  font-weight: bold;
  line-height: 1em;
  margin-left: 0.5em;
  color: #F51F1F;
}
.input_block .input_text{
  font-size: calc(14 * var(--content_width) / 375);
  line-height: 1.5em;
  margin-bottom: calc(20 * var(--content_width) / 375);
}
.input_block .input_text_block{
  position: relative;
  width: 100%;
  line-height: 0;
  margin-bottom: calc(5 * var(--content_width) / 375);
}
.input_block .input_text_block .txt_msg_area{
  position: relative;
  resize: none;
  width: 100%;
  font-size: calc(16 * var(--content_width) / 375);
  line-height: 1.5em;
  padding: calc(20 * var(--content_width) / 375);
  border-radius: calc(10 * var(--content_width) / 375);
}
.input_block .input_text_block.has_error .txt_msg_area{
  border-color: #F51F1F;
}
.input_block .input_info_block{
  display: flex;
  justify-content: flex-end;
  gap: 1em;
  font-size: calc(13 * var(--content_width) / 375);
}
.input_block .input_info_block .info_num_block.has_error{
  color: #F51F1F;
}
.input_block .input_error_block{
  position: relative;
  display: none;
  justify-content: flex-start;
  align-items: center;
  font-size: calc(12 * var(--content_width) / 375);
  line-height: 1.5em;
  color: #F51F1F;
}
.input_block .input_error_block::before{
  content: "";
  width: calc(12 * var(--content_width) / 375);
  height: calc(12 * var(--content_width) / 375);
  margin-right: calc(5 * var(--content_width) / 375);
  background-image: url(../images/icon_error.png);
  background-size: 100% 100%;
}
.input_error_block.has_error{
  display: flex;
}

.btn_make{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: calc(28 * var(--content_width) / 375);
  width: calc(343 * var(--content_width) / 375);
  height: calc(37 * var(--content_width) / 375);
  line-height: calc(37 * var(--content_width) / 375);
  margin: 0 auto calc(30 * var(--content_width) / 375);
  font-size: calc(16 * var(--content_width) / 375);
  font-weight: bold;
  text-align: left;
  border-radius: calc(10 * var(--content_width) / 375);
  color: #858585;
  background-color: #D4D4D4;
  box-shadow: 0 calc(4 * var(--content_width) / 375) calc(4 * var(--content_width) / 375) #967D6440;
  pointer-events: none;
}
.btn_make.active{
  color: #fff;
  background-color: #37BEC3;
  pointer-events: auto;
}

.btn_make::after{
  content: "";
  width: calc(15 * var(--content_width) / 375);
  height: calc(20 * var(--content_width) / 375);
  margin: auto 0;
  background-image: url(../images/icon_btn_disabled.png);
  background-size: 100% 100%;
}
.btn_make.active::after{
  background-image: url(../images/icon_btn.png);
}


.btn_back{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: calc(28 * var(--content_width) / 375);
  width: calc(343 * var(--content_width) / 375);
  height: calc(37 * var(--content_width) / 375);
  line-height: calc(37 * var(--content_width) / 375);
  margin: 0 auto;
  border-radius: calc(10 * var(--content_width) / 375);
  font-size: calc(16 * var(--content_width) / 375);
  font-weight: bold;
  text-align: right;
  color: #FFFFFF;
  background-color: #55B478;
  box-shadow: 0 calc(4 * var(--content_width) / 375) calc(4 * var(--content_width) / 375) #967D6440;
}

.btn_back::before{
  content: "";
  width: calc(15 * var(--content_width) / 375);
  height: calc(20 * var(--content_width) / 375);
  background-image: url(../images/icon_back.png);
  background-size: 100% 100%;
}

.loading .content_main,
.content_loading{
  display: none;
}
.loading .content_wrapper{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.loading header,
.loading footer{
  flex-shrink: 0;
}
.loading .content_wrapper .content_loading{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: calc(300 * var(--content_width) / 375);
  background-image: url(../images/bg_loading.jpg);
  background-size: 100% auto;
  background-position: top center;
}
.loading .content_wrapper .content_loading .loading_title{
  font-size: calc(24 * var(--content_width) / 375);
  font-weight: bold;
  line-height: 1.5em;
  color: #967D64;
  margin-bottom: calc(20 * var(--content_width) / 375);
}
.loading .content_wrapper .content_loading .loading_text{
  font-size: calc(16 * var(--content_width) / 375);
  line-height: 1.5em;
  margin-bottom: calc(45 * var(--content_width) / 375);
}

.loading_icon .sk-fading-circle {
  position: relative;
  width: calc(100 * (var(--content_width) / 375));
  height: calc(100 * (var(--content_width) / 375));
}

.loading_icon .sk-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.loading_icon .sk-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #000;
  border-radius: 100%;
  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
          animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.loading_icon .sk-fading-circle .sk-circle2 {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
.loading_icon .sk-fading-circle .sk-circle3 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.loading_icon .sk-fading-circle .sk-circle4 {
  -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
          transform: rotate(135deg);
}
.loading_icon .sk-fading-circle .sk-circle5 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.loading_icon .sk-fading-circle .sk-circle6 {
  -webkit-transform: rotate(225deg);
      -ms-transform: rotate(225deg);
          transform: rotate(225deg);
}
.loading_icon .sk-fading-circle .sk-circle7 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg);
}
.loading_icon .sk-fading-circle .sk-circle8 {
  -webkit-transform: rotate(315deg);
      -ms-transform: rotate(315deg);
          transform: rotate(315deg);
}
.loading_icon .sk-fading-circle .sk-circle2:before {
  -webkit-animation-delay: -1.05s;
          animation-delay: -1.05s;
}
.loading_icon .sk-fading-circle .sk-circle3:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s;
}
.loading_icon .sk-fading-circle .sk-circle4:before {
  -webkit-animation-delay: -0.75s;
          animation-delay: -0.75s;
}
.loading_icon .sk-fading-circle .sk-circle5:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}
.loading_icon .sk-fading-circle .sk-circle6:before {
  -webkit-animation-delay: -0.45s;
          animation-delay: -0.45s;
}
.loading_icon .sk-fading-circle .sk-circle7:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}
.loading_icon .sk-fading-circle .sk-circle8:before {
  -webkit-animation-delay: -0.15s;
          animation-delay: -0.15s;
}

.loading_icon .sk-fading-circle .sk-circle1:before {  background-color: #E6C88C; }
.loading_icon .sk-fading-circle .sk-circle2:before {  background-color: #FFC32D; }
.loading_icon .sk-fading-circle .sk-circle3:before {  background-color: #57B47A; }
.loading_icon .sk-fading-circle .sk-circle4:before {  background-color: #37BEC3; }
.loading_icon .sk-fading-circle .sk-circle5:before {  background-color: #B6002A; }
.loading_icon .sk-fading-circle .sk-circle6:before {  background-color: #FF5AA5; }
.loading_icon .sk-fading-circle .sk-circle7:before {  background-color: #AA4BC8; }
.loading_icon .sk-fading-circle .sk-circle8:before {  background-color: #55B478; }


@-webkit-keyframes sk-circleFadeDelay {
 0%, 39%, 100% {
   transform: scale(0);
 }
 40% {
   transform: scale(1);
 }
}

@keyframes sk-circleFadeDelay {
  0%, 39%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}