@charset "utf-8";

:root {
  --section_margin: 160px;
  --block_margin: 100px;
  --title_margin: 50px;
  --list_margin: 30px;

}

@media screen and (max-width: 768px) {
  :root {
    --section_margin: 80px;
    --block_margin: 50px;
    --title_margin: 35px;
    --list_margin: 20px;
  }
}

/**/
.container {
  max-width: 1050px;
}

.maincontent .img_boxW {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.maincontent .title2+.img_box {
  padding-bottom: 120px;
}

.maincontent p {
  margin-bottom: 50px;
}

.maincontent .text_box p {
  margin-bottom: 30px;
}

.patarn_01,
.patarn_02 {
  padding-bottom: 60px;
}

.title {
  padding-bottom: var(--block_margin, 100px);
}

.child_cont h1 {
  letter-spacing: .3ex
}

.child_cont h3 {
  letter-spacing: .3ex;
}

.child_cont h4 {
  font-size: clamp(15px, 3.8vw, 27px);
  letter-spacing: .3ex;
}

/**/
.child_cont h1 {
  font-size: clamp(25px, 3.3vw, 40px);
}

.title_box .text_box>div {
  width: clamp(280px, 80%, 440px);
}

.title2 {
  text-align: center;
  padding-bottom: 50px;
}

.child_cont .content_last {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 100px;
  border-top: 1px solid #B0B2AF;
}

/**/
.maincontent .text_box .btnArea {
  text-align: center;
  margin-top: 80px;
  margin-bottom: 70px;
}

.text_box .base_btn {
  width: auto;
  font-size: 13px;
  text-align: center;
}

.introduciton .text_box .base_btn {
  width: auto;
  font-size: clamp(12px, 1.7vw, 13px);
}

/**/
.patarn_01 .text_box>div {
  width: clamp(325px, 68%, 579px);
  margin: 0 auto;
}

.patarn_01 h4,
.patarn_02 h4 {
  margin-bottom: 50px;
}

.patarn_01 .text_box p,
.patarn_02 .text_box p {
  margin-bottom: var(--title_margin, 50px);
}

/* 追加 */
.sample .img_box {
  width: clamp(375px,60%,520px);
  margin: 0 auto;
}

@media screen and (max-width: 768px) {

  .patarn_01,
  .patarn_02 {
    padding-bottom: 0;
  }

  .container {
    width: 84%;
  }

  .title_box .text_box>div {
    width: 89.3%;
  }

  .introduciton .text_box>div {
    width: 86.6%;
  }

  .img_sub_text,
  .maincontent .img_box span {
    padding-left: 0;
  }

  .mokuzi {
    padding-bottom: 40px;
  }

  .maincontent p {
    margin-bottom: 20px;
  }

  .maincontent .text_box:last-child {
    padding-bottom: 0;
  }

  .maincontent .text_box p:last-child {
    margin-bottom: 20px;
  }

  .maincontent .img_box:not(:last-child) {
    padding-bottom: 30px;
  }

  .patarn_01 {
    flex-direction: column-reverse;
  }

  .patarn_01 .img_box {
    margin-top: 50px;
    width: 60%;
  }

  .patarn_01 .text_box>div,
  .patarn_02 .text_box {
    text-align: center;
  }

  .patarn_01 .text_box>div p,
  .patarn_02 .text_box p {
    text-align: left;
  }

  .maincontent .text_box .btnArea {
    margin-top: 35px;
  }

  .child_cont div.content_01 {
    padding-bottom: 20px;
  }

  .child_cont div.content_02 {
    padding-bottom: 50px;
  }

  .child_cont div.content_last {
    width: 86.6%;
    margin-top: 30px;
    padding-top: 80px;
    padding-bottom: 60px !important;
  }

  .child_cont div.content_last .container {
    width: 100%;
  }

}

@media screen and (min-width: 769px) {
  .maincontent .text_box:last-child {
    padding-bottom: 30px;
  }

  .child_cont h3 {
    line-height: 1.25;
  }

  .content_first {
    margin-bottom: 50px;
  }

  .child_cont .content_last {
    padding-bottom: 110px !important;
  }

  .introduciton .text_box {
    padding-left: 4vw;
  }

  .introduciton .text_box {
    width: 64%;
  }

  .introduciton img {
    width: 42%;
  }
}

/* .lastPart {
  padding-bottom: 50px;
} */

.youTube {
  margin: 100px 0 130px 0;
}

.products_movie {
    width: 100%;
    margin: 0 auto;
    max-width: 900px;
}

.products_movie div {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    overflow: hidden;
}

.products_movie div>iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.img1 {
  position: relative;
  z-index: 1;
}

.img2 {
  position: relative;
  z-index: 2;
  top: -12%;
  left: 61%;
  max-width: 70%;
}

@media screen and (max-width: 769px) {
  .youTube {
  margin: 60px 0;
}

.lastPart {
  width: 84%;
  margin: 0 auto;
}

.img2 {
  max-width: 100%;
  left: 5%;
}
}

.orderChangeRight {
  order: 2;
}

.orderChangeLeft {
  order: 1;
}

.textBox {
  align-items: center !important;
}

.textCenter {
  text-align: center;
}

@media screen and (max-width: 768px) {
  .textCenter {
    text-align: left;
  }

  .widthSP {
    width: 84% !important; 
  }
}

@media screen and (max-width: 768px) {
  #flow07 {
    flex-direction: column;
  }

  #flow08>.text_box {
    margin: 0 auto;
    width: 83%;
  }

  .patarn_01 .text_box>div {
    width: 83%;
  }

  .changeOrder {
    flex-direction: column-reverse;
  }

  .changeOrder img{
    margin-bottom: 50px !important;
  }

  .changeOrder .text_box {
    padding-bottom: 0;
  }

  .orderChangeLeft img{
    margin-bottom: 40px !important;
  }

}