@charset "UTF-8";


.lists{
    width: 800px;
    max-width: 100%;
    margin: 0 auto;
}

.item{
    position: relative;
    padding-left: 3rem !important;
}

.item:before{
    content: "";
    width: 20px;
    height: 20px;
    background: url(/common/upload_data/yaita-himawaricom/image/20220831173851.png)no-repeat center center / contain;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.block_html ul li{
    list-style: none;
}



/*--------TELバナー--------*/
#TEL_con + div .inner_item_tel a{
  flex-flow: column;
  border-radius: 20px;
  border: 2px solid var(--i_main_color);
  padding: 0;
  overflow: hidden;
  background-color: #fff9e7;
  transition:0.3s all;
  margin: 0 auto;
  max-width: 400px;
  font-size: 3.2rem;
}

#TEL_con + div .inner_item_tel{
  border:none;
  margin: 20px auto 0;
}

#TEL_con + div .inner_item_tel a .upper_txt{
  color:var(--i_main_color);
  font-weight: bold;
  margin: 20px auto 0;
}

#TEL_con + div .inner_item_tel a .txt_wrap{
  display:flex;
  justify-content: center;
  align-items: center;
}

#TEL_con + div .inner_item_tel a .txt_wrap svg{
  width: 40px;
  height: 40px;
  margin: 20px;
  fill:var(--i_btn_color);
}

#TEL_con + div .inner_item_tel a .txt_wrap{
  color: var(--i_btn_color);
  font-weight: bold;
  margin:0 20px 0 0;
  font-size: clamp(36px , 2.5vw , 38px);
}

#TEL_con + div .inner_item_tel a .under_txt{
  background-color: var(--i_main_color);
  width: 100%;
  font-weight: bold;
  padding: 10px 0;
}

@media screen and (max-width:900px){
  #TEL_con + div .inner_item_tel a{
    font-size: max(4vw , 25px);
  }
}

@media screen and (max-width:768px){
  #TEL_con + div .inner_item_tel a:hover{
    opacity:0.7;
  }
}

@media screen and (max-width:420px){
  #TEL_con + div .inner_item_tel a{
    font-size: max(2.5vw , 20px);
    max-width:280px;
  }
  
  #TEL_con + div .inner_item_tel a .txt_wrap{
    font-size: max(2.5vw , 26px);
  }

  #TEL_con + div .inner_item_tel a .txt_wrap svg{
    width: 30px;
    height: 30px;
  }
}


/*--------LINEバナー--------*/
#LINE_con + div .inner_item_tel a:nth-of-type(2){
  display:none;
}

#LINE_con + div .inner_item_tel .line_banner{
  pointer-events: auto;
  flex-flow: column;
  border-radius: 20px;
  border: 2px solid var(--i_main_color);
  padding: 0;
  overflow: hidden;
  background-color: #fff9e7;
  transition:0.3s all;
  margin: 0 auto;
  max-width: 400px;
  font-size: 3.2rem;
}

#LINE_con + div .inner_item_tel .line_banner:hover{
  opacity:0.7;
}

#LINE_con + div .inner_item_tel{
  border:none;
  margin: 20px auto 0;
}

#LINE_con + div .inner_item_tel .line_banner .upper_txt{
  color:var(--i_main_color);
  font-weight: bold;
  margin: 20px auto 0;
}

#LINE_con + div .inner_item_tel .line_banner .txt_wrap{
  display:flex;
  justify-content: center;
  align-items: center;
}

#LINE_con + div .inner_item_tel .line_banner .txt_wrap img{
  width: 40px;
  height: 40px;
  margin: 20px;
}

#LINE_con + div .inner_item_tel .line_banner .txt_wrap p{
  color: var(--i_btn_color);
  font-weight: bold;
  margin:0 20px 0 0;
  font-size: clamp(21px , 2.5vw , 24px);
}

#LINE_con + div .inner_item_tel .line_banner .under_txt{
  background-color: var(--i_main_color);
  width: 100%;
  font-weight: bold;
  padding: 10px 0;
}

@media screen and (max-width:900px){
  #LINE_con + div .inner_item_tel .line_banner{
    font-size: max(4vw , 25px);
  }
}

@media screen and (max-width:420px){
  #LINE_con + div .inner_item_tel .line_banner{
    font-size: max(2.5vw , 20px);
    max-width:280px;
  }
  
  #LINE_con + div .inner_item_tel .line_banner .txt_wrap p{
    font-size: max(2.5vw , 14px);
  }
}