@charset "utf-8";

.section1{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: calc(40 * var(--content_width) / 375) 0 calc(55 * var(--content_width) / 375);
  background-image: url(../images/bg_kv.jpg);
  background-size: 100% auto;
  background-position: top center;
}

.section1 .kv_title{
  width: calc(248 * var(--content_width) / 375);
  margin-bottom: calc(30 * var(--content_width) / 375);
  line-height: 0;
}
.section1 .sample_image_block{
  position: relative;
  width: 100%;
  height: calc(238 * var(--content_width) / 375);
  margin-bottom: calc(20 * var(--content_width) / 375);
}
.section1 .sample_image_block .sample_image{
  position: absolute;
  width: calc(152 * var(--content_width) / 375);
  line-height: 0;
}
.section1 .sample_image_block .sample_image.sample_image1{
  top: calc(10 * var(--content_width) / 375);
  left: calc(38 * var(--content_width) / 375);
  transform: rotate(-8.11deg);
}
.section1 .sample_image_block .sample_image.sample_image2{
  top: calc(10 * var(--content_width) / 375);
  left: calc(173 * var(--content_width) / 375);
  transform: rotate(7.25deg);
}

.btn_make{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: calc(28 * var(--content_width) / 375);
  width: calc(210 * 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;
  color: #FFFFFF;
  background-color: #37BEC3;
  box-shadow: 0 calc(4 * var(--content_width) / 375) calc(4 * var(--content_width) / 375) #967D6440;
}
.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.png);
  background-size: 100% 100%;
}

.section2{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: calc(80 * var(--content_width) / 375);
  background-image: url(../images/bg_top1.png);
  background-size: 100% auto;
  background-position: bottom center;
}

.section2 .section_title{
  width: calc(331 * var(--content_width) / 375);
  margin-bottom: calc(5 * var(--content_width) / 375);
  line-height: 0;
}
.section2 .section_text{
  width: calc(343 * var(--content_width) / 375);
  font-size: calc(18 * var(--content_width) / 375);
  line-height: 2em;
  text-align: center;
}

.section3{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: calc(-80 * var(--content_width) / 375);
  padding: calc(45 * var(--content_width) / 375) calc(30 * var(--content_width) / 375) calc(150 * var(--content_width) / 375);

  background-image: url(../images/bg_top2.png);
  background-size: 100% auto;
  background-position: bottom center;

}
.section3 .section_title{
  width: calc(201 * var(--content_width) / 375);
  margin-bottom: calc(40 * var(--content_width) / 375);
}
.section3 .howto_step_wrapper{
  width: 100%;
  margin-bottom: calc(40 * var(--content_width) / 375);
}
.section3 .howto_step_wrapper .step_label{
  line-height: 1.5em;
  margin-bottom: calc(10 * var(--content_width) / 375);
  font-size: calc(20 * var(--content_width) / 375);
  font-weight: bold;

  color: #EFB950;
}
.section3 .howto_step_wrapper .step_title{
  font-size: calc(24 * var(--content_width) / 375);
  line-height: 1em;
  font-weight: bold;
  color: #967D64;
  margin-bottom: calc(20 * var(--content_width) / 375);
}
.section3 .howto_step_wrapper .step_text{
  font-size: calc(16 * var(--content_width) / 375);
  color: #21272A;
}
@media screen and (min-width: 736px) {
  .section3 .howto_step_wrapper .step_text{
    margin-right: calc(-6 * var(--content_width) / 375);
  }    
}
.section3 .howto_step_wrapper .step_text.step_text_pc{
  display: none;
}
@media screen and (min-width: 736px) {
  .section3 .howto_step_wrapper .step_text.step_text_sp{
    display: none;
  }
  .section3 .howto_step_wrapper .step_text.step_text_pc{
    display: block;
  }
}
.section3 .howto_step_wrapper .step_text+.step_text:not(.step_text_pc){
  margin-top: calc(15 * var(--content_width) / 375);
  margin-bottom: calc(30 * var(--content_width) / 375);
}
.section3 .howto_step_wrapper .step_text+.design_block{
  margin-top: calc(30 * var(--content_width) / 375);  
}
.section3 .howto_step_wrapper .design_block{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: calc(30 * var(--content_width) / 375);
  padding: calc(40 * var(--content_width) / 375) calc(20 * var(--content_width) / 375);
  background-color: #FFFFFF;
  border: calc(2 * var(--content_width) / 375) solid #967D64;
  border-radius: calc(10 * var(--content_width) / 375);
  text-align: center;
}
.section3 .howto_step_wrapper .design_block .design_image{
  width: calc(185 * var(--content_width) / 375);
  margin-bottom: calc(20 * var(--content_width) / 375);
  line-height: 0;
  border: calc(var(--content_width) / 375) solid #CACACA;
}
.section3 .howto_step_wrapper .design_block .design_title{
  margin-bottom: calc(15 * var(--content_width) / 375);
  font-size: calc(22 * var(--content_width) / 375);
  line-height: 1.1em;
  font-weight: bold;
  color: #967D64;
}
.section3 .howto_step_wrapper .design_block .design_description{
  width: calc(220 * var(--content_width) / 375);
  font-size: calc(12 * var(--content_width) / 375);
  line-height: 1.5em;
}
.section3 .howto_step_wrapper .step_image{
  padding-top: calc(30 * var(--content_width) / 375);
  line-height: 0;
}

.section4{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: calc(-120 * var(--content_width) / 375);
  padding: calc(25 * var(--content_width) / 375) calc(30 * var(--content_width) / 375) calc(40 * var(--content_width) / 375);
}
.section4 .section_title{
  margin-bottom: calc(10 * var(--content_width) / 375);
  font-size: calc(22 * var(--content_width) / 375);
  font-weight: bold;
  line-height: 1.5em;
  color: #967D64;
}
.section4 .attention_block{
  width: 100%;
  font-size: calc(14 * var(--content_width) / 375);
  line-height: 1.5em;
}
.section4 .attention_block li{
  padding-left: 1em;
}
.section4 .attention_block li::before{
  content: "・";
  margin-left: -1em;
}

.section5{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 0 calc(30 * var(--content_width) / 375) calc(20 * var(--content_width) / 375);

  background-image: url(../images/bg_top3.png);
  background-size: 100% auto;
  background-position: top calc(30 * var(--content_width) / 375) center;
}
.section5 .section_title{
  font-size: calc(22 * var(--content_width) / 375);
  font-weight: bold;
  line-height: 1.5em;
  color: #967D64;
  margin-bottom: calc(30 * var(--content_width) / 375);
}
.section5 .section_image{
  line-height: 0;
  margin-bottom: calc(30 * var(--content_width) / 375);
}
.section5 .section_text{
  font-size: calc(16 * var(--content_width) / 375);
  line-height: 1.5em;
  text-align: center;
  margin-bottom: calc(30 * var(--content_width) / 375);
}
.section5 .btn_cp{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: calc(28 * var(--content_width) / 375);
  width: calc(270 * 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: left;
  color: #FFFFFF;
  background-color: #37BEC3;
  box-shadow: 0 calc(4 * var(--content_width) / 375) calc(4 * var(--content_width) / 375) #967D6440;
}
.section5 .btn_cp::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%;
}


@media only screen and (max-height: 667px) {
  .section1{
    padding: calc(20 * var(--content_width) / 375) 0 calc(35 * var(--content_width) / 375);
    background-image: url(../images/bg_kv1.jpg), url(../images/bg_kv2.jpg);
    background-size: 100% auto, 100% auto;
    background-position: top calc(-20 * var(--content_width) / 375) center, top calc(215 * var(--content_width) / 375) center;
  }
  .section1 .kv_title{
    margin-bottom: calc(10 * var(--content_width) / 375);
  }
  .section1 .sample_image_block{
    margin-top: calc(-25 * var(--content_width) / 375);
    margin-bottom: calc(10 * var(--content_width) / 375);
    transform-origin: bottom center;
    transform: scale(0.85);

  }
  .section2{
    margin-top: calc(-20 * var(--content_width) / 375);
  }
}