@charset "UTF-8";

#lower_flow + section.contents_box01 .flow_item{
  display:flex;
  border: 5px solid;
  border-color: var(--i_main_color);
  margin: 2rem 0 0;
}

#lower_flow + section.contents_box01 .flow_item .flow_image{
  position:relative;
  width: 50%;
  background: var(--i_main_color);
  padding-top: min(20% , 160px);
}

#lower_flow + section.contents_box01 .flow_item .flow_image img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  width: 100%;
  height: 100%;
  object-position: center;
}

#lower_flow + section.contents_box01 .flow_item .flow_image:after{
  content:"";
  position:absolute;
  bottom: -1px;
  right: -1px;
  width:100%;
  height:100%;
  background-color:var(--i_main_color);
  clip-path: polygon(100% 100%, 100% 0%, 100% 0% , 0 400%);
}

#lower_flow + section.contents_box01 .flow_item:nth-child(even) .flow_image:after{
  clip-path: polygon(100% 100%, 100% 0%, 100% 0% , 0 -300%);
  bottom: initial;
  top: -1px;
}

#lower_flow + section.contents_box01 .flow_item .flow_body{
  flex:1;
  background-color:var(--i_main_color);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2rem;
}

#lower_flow + section.contents_box01 .flow_item .flow_body .flow_number{
  margin:0 0 0 1rem;
  color:var(--i_bg_color);
  font-size: 3.4rem;
}

#lower_flow + section.contents_box01 .flow_item .flow_body .flow_desc{
  color:var(--i_bg_color);
}

@media screen and (max-width:800px){
  #lower_flow + section.contents_box01 .flow_item .flow_body .flow_number{
    font-size: 2.5rem;
  }
}

@media screen and (max-width:768px){
  #lower_flow + section.contents_box01 .flow_item .flow_body {
    padding: 1rem 0;
  }

  #lower_flow + section.contents_box01 .flow_item {
    border: 7px solid;
    border-color: var(--i_main_color);
    flex-direction: column;
  }

  #lower_flow + section.contents_box01 .flow_item .flow_image {
    padding-top: 35vw;
    width: 100%;
  }

  #lower_flow + section.contents_box01 .flow_item .flow_image:after{
    content: none;
  }

  #lower_flow + section.contents_box01 .flow_item:nth-child(even) .flow_image:after{
    content: none;
  }
}