@charset "UTF-8";

/*--ご相談までの流れ--*/
#top_flow_sp + section{
  display:none;
}
@media screen and (max-width:550px){
  #top_flow_pc + section{
    display:none;
  }
  #top_flow_sp + section{
    display:block;
  }

  #top_flow_sp + section.contents_box01.block_image_1 .wrapper_item .inner_item_img{
    max-width: 360px !important;
    margin: 6rem auto 0;
  }
}

/*～について4カラム*/
#top_reason2 + section.contents_box01{
    background: var(--i_sub2_color);
}

#top_reason2 + section.contents_box01 .lists {
}

#top_reason2 + section.contents_box01 .list {
  display: flex;
  gap: 3rem;
}

#top_reason2 + section.contents_box01 .list_item{
  list-style:none;
  width:calc(100% / 4);
}

#top_reason2 + section.contents_box01 .list_item p{
    border: 1px dotted;
    border-color: var(--i_txt_color);
    background: #fff;
    margin: 2rem auto 0;
    color: var(--i_txt_color);
    text-align:center;
    padding: 0.3rem 0;
}

#top_reason2 + section.contents_box01 .list_item polygon,
#top_reason2 + section.contents_box01 .list_item svg,
#top_reason2 + section.contents_box01 .list_item svg path{
    fill: var(--i_main_color)!important;
}

#top_reason2 + section.contents_box01 .list_item a{
  text-decoration:none;
  transition:0.3s all;
}

#top_reason2 + section.contents_box01 .list_item a:hover{
  opacity:0.7;
}

#top_reason2 + section.contents_box01 .list_item .image{
    background: #fff;
    padding: 4rem;
    box-sizing: border-box;
    border-radius: 50%;
}

#top_reason2 + section.contents_box01 .list_item svg{
    width: 100%!important;
    height: auto!important;
}

@media screen and (min-width:1201px){
  #top_reason2 + section.contents_box01 .list_item p{
    font-size: 1.6rem;
  }
}

@media screen and (min-width:901px) and (max-width:1100px){
  #top_reason2 + section.contents_box01 .list_item p{
    font-size: max(1rem, 1.2vw);
  }
}

@media screen and (max-width:900px){
  #top_reason2 + section.contents_box01 .list {
    flex-wrap:wrap;
    justify-content: center;
  }

  #top_reason2 + section.contents_box01 .list_item{
    width: calc(100% / 4 - 3rem );
  }

  #top_reason2 + section.contents_box01 .list_item p{
    font-size: max(10px, 1.6vw);
  }
}

@media screen and (max-width:768px){
  #top_reason2 + section.contents_box01 .list {
    gap:1.2rem;
  }

  #top_reason2 + section.contents_box01 .list_item .image{
    padding: 3.5vw;
  }

  #top_reason2 + section.contents_box01 .list_item{
    width: calc(100% / 4 - 1rem);
  }

}

@media screen and (max-width:550px){
  #top_reason2 + section.contents_box01 .list_item {
    width: calc(100% / 2 - 1rem);
  }

  #top_reason2 + section.contents_box01 .list_item .image {
    padding: 7vw;
  }

  #top_reason2 + section.contents_box01 .list_item p{
    font-size: max(10px, 3.3vw);
  }

}


/*選ばれる理由*/
#top_reason + section.contents_box01 .lists {
}

#top_reason + section.contents_box01 .list {
  display: flex;
  gap: 3rem;
}

#top_reason + section.contents_box01 .list_item{
  list-style:none;
  width:calc(100% / 7);
}

#top_reason + section.contents_box01 .list_item p{
  text-align:center;
  font-size: 1.4rem;
  color:#eb8686;
}

#top_reason + section.contents_box01 .list_item svg,
#top_reason + section.contents_box01 .list_item svg path{
    fill:#aec4e5!important;
}

#top_reason + section.contents_box01 .list_item svg{
    width: 100%!important;
    height: auto!important;
    background: var(--i_btn_color);
    padding: 1rem;
    box-sizing: border-box;
}

@media screen and (min-width:1201px){
  #top_reason + section.contents_box01 .list_item p{
    font-size: 1.6rem;
  }
}

@media screen and (min-width:901px) and (max-width:1100px){
  #top_reason + section.contents_box01 .list_item p{
    font-size: max(1rem, 1.2vw);
  }
}

@media screen and (max-width:900px){
  #top_reason + section.contents_box01 .list {
    flex-wrap:wrap;
    justify-content: center;
  }


  #top_reason + section.contents_box01 .list_item{
    width: calc(100% / 4 - 3rem );
  }
}

@media screen and (max-width:768px){
  #top_reason + section.contents_box01 .list {
    gap:1.5rem;
  }

  #top_reason + section.contents_box01 .list_item{
    width: calc(100% / 4 - 1.5rem);
  }

  #top_reason + section.contents_box01 .list_item svg{
    padding: 2rem;
  }
}

@media screen and (max-width:550px){
  #top_reason + section.contents_box01 .list_item {
    width: calc(100% / 2 - 1.0rem);
  }

  #top_reason + section.contents_box01 .list_item p{
    font-size: max(10px, 3.3vw);
  }

}