@charset "utf-8";

.section1, .section2, .section3{
  padding: calc(20 * var(--content_width) / 375) calc(30 * var(--content_width) / 375);
}
.section1{
  padding-top: calc(60 * var(--content_width) / 375);
  background-image: url(../images/bg_sub.png);
  background-size: 100% auto;
  background-position: top center;
}
.section1 .step_block{
  width: calc(214 * var(--content_width) / 375);
  line-height: 0;
  margin: 0 auto calc(25 * var(--content_width) / 375);
}

.section3{
  padding-bottom: calc(30 * var(--content_width) / 375);
}
.section_block .section_label{
  margin-bottom: calc(10 * var(--content_width) / 375);
  line-height: 1.5em;
  font-size: calc(20 * var(--content_width) / 375);
  font-weight: bold;
  color: #EFB950;
}
.section_block .section_title{
  margin-bottom: calc(20 * var(--content_width) / 375);
  font-size: calc(24 * var(--content_width) / 375);
  line-height: 1em;
  font-weight: bold;
  color: #967D64;  
}

.section_block .section_text{
  font-size: calc(16 * var(--content_width) / 375);
}

@media screen and (min-width: 736px) {
  .section_block .section_title{
    margin-right: calc(-6 * var(--content_width) / 375);
  }
  .section_block .section_text{
    margin-right: calc(-6 * var(--content_width) / 375);
  }    
}
.section_block .section_text+.section_text{
  margin-top: calc(15 * var(--content_width) / 375);
}
.section1 .select_style_block{
  padding-top: calc(16 * var(--content_width) / 375);
}

.section1 .select_style_block .style_block{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(20 * var(--content_width) / 375);
  width: 100%;
  border: calc(2 * var(--content_width) / 375) solid #967D64;
  padding: calc(13 * var(--content_width) / 375);
  margin-top: calc(20 * var(--content_width) / 375);
  background-color: #FFFFFF;
  text-align: left;
  border-radius: calc(10 * var(--content_width) / 375);
  box-shadow: 0 calc(4 * var(--content_width) / 375) calc(4 * var(--content_width) / 375) rgba(150, 125, 100, 0.25);
}
.section1 .select_style_block .style_block.active{
  background-color: #FFFEEB;  
  border: calc(2 * var(--content_width) / 375) solid #967D64;
  padding: calc(13 * var(--content_width) / 375);
}
.section1 .select_style_block .style_block .style_image{
  flex-shrink: 0;
  width: calc(92 * var(--content_width) / 375);
  line-height: 0;
  border: calc(var(--content_width) / 375) solid #CACACA;
}
.section1 .select_style_block .style_block .style_info_block{
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--content_width) / 375);
  padding-right: calc(5 * var(--content_width) / 375);
}
.section1 .select_style_block .style_block .style_info_block .style_name{
  font-size: calc(20 * var(--content_width) / 375);
  font-weight: bold;
  line-height: 1.1em;
  color: #967D64;
}
.section1 .select_style_block .style_block .style_info_block .style_description{
  font-size: calc(12 * var(--content_width) / 375);
  line-height: 1.5em;
}

.section2 .select_size_block{
  display: flex;
  justify-content: space-between;
  margin-top: calc(30 * var(--content_width) / 375);
}
.section2 .select_size_block .size_block{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: calc(10 * var(--content_width) / 375);
  width: calc(98 * var(--content_width) / 375);
  border: calc(2 * var(--content_width) / 375) solid #967D64;
  padding: calc(18 * var(--content_width) / 375) calc(3 * var(--content_width) / 375);
  background-color: #FFFFFF;
  border-radius: calc(10 * var(--content_width) / 375);
  box-shadow: 0 calc(4 * var(--content_width) / 375) calc(4 * var(--content_width) / 375) rgba(150, 125, 100, 0.25);
}
.section2 .select_size_block .size_block.active{
  background-color: #FFFEEB;  
  border: calc(2 * var(--content_width) / 375) solid #967D64;
  padding: calc(18 * var(--content_width) / 375) calc(3 * var(--content_width) / 375);
}
.section2 .select_size_block .size_block .size_name{
  font-size: calc(20 * var(--content_width) / 375);
  font-weight: bold;
  line-height: 1.1em;
  color: #967D64;
}
.section2 .select_size_block .size_block .size_description{
  font-size: calc(12 * var(--content_width) / 375);
  line-height: 1.5em;
}

.preview_block{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  color: #967D64;
  background-color: #FFFFFF;
  text-align: center;
  padding: 0 calc(40 * var(--content_width) / 375);
}
.preview_block .preview_image{
  line-height: 0;
  margin-bottom: calc(30 * var(--content_width) / 375);
  border: calc(var(--content_width) / 375) solid #CACACA;
}
.preview_block .preview_title{
  font-size: calc(20 * var(--content_width) / 375);
  font-weight: bold;
  line-height: 1.1em;
  margin-bottom: calc(5 * var(--content_width) / 375);
}
.preview_block .preview_size{
  font-size: calc(16 * var(--content_width) / 375);
  line-height: 1.375em;
  font-weight: bold;
}
.section4{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: calc(40 * var(--content_width) / 375) 0 calc(20 * var(--content_width) / 375);
}

.section4 .btn_start{
  position: relative;
  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-bottom: calc(30 * var(--content_width) / 375);
  border-radius: calc(10 * var(--content_width) / 375);
  font-size: calc(16 * var(--content_width) / 375);
  font-weight: bold;
  text-align: left;
  color: #FFFFFF;
  background-color: #37BEC3;
  box-shadow: 0 calc(4 * var(--content_width) / 375) calc(4 * var(--content_width) / 375) #967D6440;
}
.section4 .btn_start::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.png);
  background-size: 100% 100%;
}

.section4 .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);
  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;
}

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