@charset "utf-8";

.hjk_oct_flow.hjk_indentcontainer{max-width: none;}
.hjk_oct_flow .hjk_thumbblock{
  align-items: flex-start;
  max-width: 1080px;
  gap: 24px 2%;
}
.hjk_oct_flow .hjk_thmbtxt{width: 52%;}

.hjk_oct_flow h3{
  margin-bottom: 32px;
  font-size: clamp(1.125rem, 0.306rem + 3.06vw, 1.875rem);/*18-30 428-820*/
  font-weight: 500;
  color: #222222;
}
.hjk_oct_flow .hjk_thmbnail{width: 46%;}



.hjk_oct_flow .hjk_oct_wrap {
  border-radius: 8px;
  background-color: #FFFFFF;
}
.hjk_oct_flow .hjk_oct_wrap>dl {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 56px 64px 48px 0px;
  border-bottom: 1px solid #F0F8FC;
}
.hjk_oct_flow .hjk_oct_wrap>dl::after {
  content: "";
  position: absolute;
  display: block;
  bottom: -18px;
  left: 42px;
  border-top: 18px solid rgba(68, 133, 175, 0.4);
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}
.hjk_oct_flow .hjk_oct_wrap>dl:last-of-type {border-bottom: none;}
.hjk_oct_flow .hjk_oct_wrap>dl:last-of-type::after {content: none;}
.hjk_oct_flow .hjk_oct_wrap>dl>dt {
  width: 196px;
  font-size: 1.375rem;
  font-weight: 500;
  color: #222222;
}
.hjk_oct_flow .hjk_oct_wrap>dl>dd {
  width: calc(100% - 196px);
  letter-spacing: 0.1em;
  line-height: 1.75;
  color: #222;
}
.hjk_oct_flow .hjk_oct_stepdl dd {margin-bottom: 1.5em;}



.hjk_oct_faq{margin-bottom: 136px;}
.hjk_oct_faq dl{
  padding: 52px 0 48px;
  border-bottom: 1px solid #EEEEEE;
}
.hjk_oct_faq dl dt{
  display: flex;
  align-items: flex-end;
  margin-bottom: 32px;
}
.hjk_oct_faq dl dd{
  display: flex;
  align-items: flex-start;
}
.hjk_oct_faq dl dt p:first-of-type,
.hjk_oct_faq dl dd p:first-of-type{width: 64px;}
.hjk_oct_faq dl dt p:last-of-type{
  width: calc(100% - 64px);
  font-size: 1.125rem;
  font-weight: 500;
  color: #000000;
}
.hjk_oct_faq dl dd p:last-of-type{
  width: calc(100% - 64px);
  letter-spacing: 0.1em;
  line-height: 1.75;
  color: #222222;
}


@media screen and (min-width:821px){
}







@media screen and (max-width:820px){
  .hjk_oct_flow .hjk_thumbblock{flex-wrap: wrap;}
  .hjk_oct_flow .hjk_thmbtxt{width: 100%;}
  .hjk_oct_flow .hjk_thmbnail{width: 100%;}

  .hjk_oct_flow .hjk_oct_wrap >dl{
    flex-wrap: wrap;
    padding: 50px 0 30px;
  }
  .hjk_oct_flow .hjk_oct_wrap >dl:first-of-type{padding-top: 0;}
  .hjk_oct_flow .hjk_oct_wrap >dl>dt{
    margin-bottom: 10px;
    font-size: 1.125rem;
  }
  .hjk_oct_flow .hjk_oct_wrap >dl>dd{
    width: 100%;
    font-size: 0.875rem;
  }
  .hjk_oct_flow .hjk_oct_wrap >dl::after{left: calc(50% - 20px);}



  .hjk_oct_faq{margin-bottom:clamp(0rem, -2.73rem + 10.2vw, 2.5rem);/*0-40 428-820*/}
  .hjk_oct_faq dl{padding: 40px 0;}
  .hjk_oct_faq dl dt p:first-of-type,
  .hjk_oct_faq dl dd p:first-of-type{width: 34px;}
  .hjk_oct_faq dl dt p:first-of-type img,
  .hjk_oct_faq dl dd p:first-of-type img{width: 24px;}
  .hjk_oct_faq dl dt{align-items: flex-start;}
  .hjk_oct_faq dl dt p:last-of-type{
    width: calc(100% - 34px);
    font-size: 1rem;
  }
  .hjk_oct_faq dl dd p:last-of-type{
    width: calc(100% - 34px);
    font-size: 0.875rem;
  }

 #section4.hjk_section{
  margin-bottom: clamp(0rem, -6.551rem + 24.49vw, 6rem);
  /*0-96 428-820*/
 }
}
@media screen and (max-width:428px){}