@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;
  }
}


.child_cont h1{font-size: clamp(25px, 3.7vw, 40px);}
.child_cont h3{font-size: clamp(20px, 3.3vw, 32px);letter-spacing: .4ex;}
.child_cont h4{font-size: clamp(15px, 3vw, 27px);letter-spacing: .4ex;}

.maincontent p:last-child{margin-bottom: 0;}
.maincontent .text_box p.btn_area{margin-top: 35px;}

.btn_area .base_btn {
  padding: 1.12em 5.1em;
  line-height: 1;
  vertical-align: bottom;
  font-size: 13px;
}

.patarn_01 h3,
.patarn_02 h3,
.patarn_03 h3{margin-bottom: var(--title_margin,50px);}
.patarn_01 .text_box>*{
  width: 62%;
  margin-left: auto;
  margin-right: auto;
}

.introduciton .text_box>div{width: clamp(335px, 89.3%, 480px);}
.introduciton .text_box h4{line-height: 1;}


#flow02 .flow2Btn,
#flow07 .flow7Btn{
    text-align: center;
  }

#flow02 .flow2Btn a,
#flow07 .flow7Btn a{
  margin: 0 0 var(--block_margin) 0;
}

.flow3Title {
  margin-bottom: var(--title_margin);
}

#flow06 .btn_area a,
#flow10 .btn_area a{
  margin-top: 50px;
  margin-bottom: var(--block_margin);
}

#flow05 h3 {
  font-size: clamp(15px, 3.3vw, 32px);
}

.patarn_03 h4 {
  margin-bottom: var(--title_margin, 50px);
} 


.containerPage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 93%;
  max-width: 1200px;
  margin: 0 auto;
  column-gap: 50px;
}

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

.containerPage .leftSide h4 {
  font-size: clamp(15px, 3.3vw, 27px);
  margin-bottom: 50px;
}

@media screen and (max-width: 768px) {
  .container{width: 86%;}
  
  .child_cont div.content_0{padding-bottom: 60px;}
  .child_cont h3{text-align: center;}
  .child_cont h4{line-height: 2;}
  
  .mokuzi{padding-bottom: 50px;}
  .title_box{margin-bottom: 113px;}
  
  .maincontent .img_box img{margin-bottom: 0;}
  .maincontent .container .text_box{padding-bottom: 20px;}
  
  .patarn_01 .text_box{padding-bottom: 50px;}
  .patarn_01 .text_box>*{width: 86%;}
  
  .btn_area{text-align: center;}
  .btn_area .base_btn{padding: 1.25em 5.74em;}
  
  .patarn_03{margin-bottom: 20px;}
  .patarn_03 .img_box{padding-bottom: 35px;}
  
  
  .containerPage { 
    grid-template-columns: auto;
    width: 86%;
    margin: 0 auto;  
  }
  
  .leftSide>h4 {
    text-align: center;
  }
  
  #flow02 .flow2Btn a,
  #flow07 .flow7Btn a {
  margin: var(--block_margin) 0 var(--block_margin) 0;
  }
  
  .flow3Title {
    text-align: center;
  }
  
  .reverseImg {
    order: 0
  }
  
  .reverseText {
    order: -1;
  }
  
  #flow05 .patarn_01 {flex-direction: column-reverse;padding-bottom: 0;}
  #flow05 .patarn_01 .img_box{width: 57.3%;margin-bottom: 20px;}
  
  #flow05 .title {
    padding-bottom: 20px;
  }
  
  #flow06 .btn_area a {
  margin-top: 30px;
}
  
#flow06 .btn_area a,
#flow10 .btn_area a{
  margin-top: 30px;
}  
  
  #flow15,
  #flow25,
  #flow27{padding-bottom: 0;}
  
  #flow15 .title,
  #flow15 .img_box,
  #flow25 .title,
  #flow25 .img_box,
  #flow27 .title,
  #flow27 .img_box{padding-bottom: 30px;}
  
  #flow15 .patarn_01{margin-top: 10px;padding-bottom: 0;}
  
  #flow25 .patarn_01 {padding-bottom: 0;}
  #flow25 .patarn_01 .img_box{width: 57.3%;}
  
  #flow26 .container .text_box{padding-bottom: 30px;}
  #flow26 .patarn_02{flex-direction: column-reverse;padding-bottom: 0;}
  #flow26 .patarn_02 .img_box{margin-bottom: 30px;}
  
  #flow27 .container .text_box{padding-bottom: 30px;}
  #flow27 .patarn_01{padding-bottom: 0;}
  #flow27 .patarn_01 .img_box{width: 57.3%;}  
}
@media (min-width: 769px){
  .maincontent .text_box p.btn_area{margin-top: 74px;}
  .child_cont div[class*="content"]{padding-bottom: 20px;}
  .mokuzi{padding-bottom: 140px;}
  
  .introduciton .img{
    width: 41%;
    max-height: 516px;
  }
  .introduciton img{
    width: 100%;
    height: 100%;
  }
  .introduciton .text_box{width: 59%;padding: 45px 0;}

  .patarn_03{overflow: hidden;}
  .patarn_03 .st,
  .patarn_03 p{float: left;width: 47.5%;}
  .patarn_03 .img_box{float: right;width: 47.5%;}
  
  

  #flow01 .title,
  #flow02 .title,
  #flow03 .title,
  #flow04 .title{padding-bottom: 110px;}
  #flow05 .title{padding-bottom: 50px;}

  #flow15>.img_box,
  #flow25>.img_box,
  #flow27>.img_box{padding-bottom: 70px;}
}
@media (min-width:1300px){
  .introduciton .img{max-height: 100%;}
}