@charset "utf-8";

#flow.section{
margin-top: 40px !important;
}
#flow .list,
#flow .list .title,
#flow .list .contents {
  margin: 0;
  padding: 0;
}

#flow .list {
  counter-reset: step;
}

#flow .list .step {
  counter-increment: step;
}
#flow .list .step .box~.box{
margin-top: 1.5em;
}

#flow .list .step:not(:last-child) {
  padding-bottom: 70px;
  position: relative;
}

#flow .list .step:not(:last-child)::after {
  content: '';
  width: 60px;
  height: 30px;
  -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
          clip-path: polygon(0 0, 50% 100%, 100% 0);
  background-color: #ec6a06;
  position: absolute;
  left: calc(50% - 30px);
  bottom: 20px;
}

#flow .list .title {
  margin-bottom: 10px;
  padding: 0.5em 1em 0.5em 5em;
  line-height: 1.4;
  font-weight: 700;
  background-color: #f2f2f2;
  position: relative;
}

#flow .list .title::before {
  content: ''counter(step, decimal-leading-zero);
  width: 4em;
  height: 100%;
  padding: 0.5em 1em;
  color: #fff;
  line-height: 1.4;
  text-align: center;
  background-color: #ec6a06;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
}

#flow .list .contents {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

#flow .list .contents .image {
  width: 40%;
  flex-shrink: 0;
  margin-right: 1em;
}

@media screen and (max-width:1080px) {
  #flow .list .contents {
    flex-wrap: wrap;
    gap: 2em;
  }
  #flow .list .contents .image {
    flex: 0 0 calc(50% - 1em);
    margin-right: 0;
  }
}

#flow .list .contents .image .cap{
display: block;
font-size: 80%;
text-align: center;
}
#flow .list .contents .image a img {
  border: solid 2px #f2f2f2;
}
#flow .list .contents .image a:hover img {
  transition: 0.4s;
  opacity: 0.6;
}

#flow .list .contents .text {
  /*padding-left: 1em;*/
}

#flow .list .step .box .title-style-3{
   font-size: 90%;
}

/* :::::::: ブレイクポイント :::::::: */

@media print, screen and (min-width:1081px) {

  #flow .list .contents .image {
    width: 230px;
    margin-right: 1.5em;
  }

}

@media print, screen and (min-width:901px) {

  #flow .list .title {
    margin-bottom: 20px;
    font-size: 1.5em;
  }

  #flow .list .contents .text {
    /*padding-left: 1.5em;*/
  }

  #flow .list .step .box .title-style-3{
   font-size:  100%;
  }

}