.sec_head {
  background-image: url(../img/counsel_head_bg.jpg);
}

.gradient {
  background: linear-gradient(90deg, #a8b062 0%, #39737d 100%);
  color: #fff;
}

.counsel_btn {
  padding: 15px;
  position: relative;
  color: #fff;
  transition: all 0.5s;
  position: relative;
  overflow: hidden;
}
.counsel_btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: all 0.7s;
  opacity: 1;
  transform: translate(-105%, 0);
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 0.25);
}
.counsel_btn:hover {
  background: linear-gradient(90deg, #a8b062 0%, #39737d 100%);
  color: #fff;
}
.counsel_btn:hover::before {
  opacity: 0;
  transform: translate(0, 0);
}
.counsel_btn span {
  position: relative;
  padding-left: 30px;
  font-size: clamp(16px, 1.04vw, 20px);
}
.counsel_btn span::after {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  width: 20px;
  height: 20px;
  background: url(../img/wirte_white_icon.png) no-repeat center/cover;
}

.counsel_list {
  border-top: 2px solid #555;
  border-bottom: 2px solid #555;
}
.counsel_list .list_item {
  border-bottom: 1px solid #ddd;
  transition: background 0.3s;
}
.counsel_list .list_item:last-child {
  border-bottom: none;
}
.counsel_list .list_item:hover:not(.head) {
  background-color: rgba(229, 240, 216, 0.2);
}
.counsel_list .list_item.head {
  grid-template-columns: 1fr 2fr 7fr 1fr 2fr clamp(75px, 5.21vw, 100px);
  padding: clamp(15px, 1.04vw, 20px) 0;
  font-size: clamp(16px, 1.04vw, 20px);
  font-weight: 500;
}
.counsel_list .list_item a {
  grid-template-columns: 1fr 2fr 7fr 1fr 2fr clamp(75px, 5.21vw, 100px);
  padding: clamp(12px, 0.83vw, 16px) 0;
  font-size: clamp(14px, 0.94vw, 18px);
  line-height: 1.89; /* 34px */
}
.counsel_list .list_item a .subject {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.counsel_list .list_item a .state {
  font-weight: 700;
  border-radius: 17px;
}
.counsel_list .list_item a .state.wait {
  background: #eeeeee;
}
.counsel_list .list_item a .state.complete {
  background: linear-gradient(90deg, #a8b062 0%, #39737d 100%);
  color: #fff;
}

/* RWD */
@media (max-width: 750px) {
  .counsel_btn {
    width: 100%;
    text-align: center;
    padding: clamp(13px, 3.33vw, 25px) 0;
  }
  .counsel_btn span {
    padding-left: clamp(20px, 6.67vw, 50px);
    font-size: clamp(18px, 4.93vw, 37px);
  }
  .counsel_btn span::after {
    width: clamp(20px, 4.93vw, 37px);
    height: clamp(20px, 4.93vw, 37px);
  }
  .counsel_list {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }
  .counsel_list .list_item.head {
    display: none;
  }
  .counsel_list .list_item a {
    grid-template-columns: clamp(90px, 24vw, 180px) 1fr clamp(90px, 25.33vw, 190px);
    padding: clamp(30px, 4vw, 30px) 0;
    font-size: clamp(16px, 3.89vw, 29px);
    line-height: 1.87; /* 70px */
    text-align: left;
    align-items: end;
  }
  .counsel_list .list_item a .num {
    display: none;
  }
  .counsel_list .list_item a .category,
  .counsel_list .list_item a .subject,
  .counsel_list .list_item a .date,
  .counsel_list .list_item a .name {
    text-align: left;
  }
  .counsel_list .list_item a .category {
    font-weight: 700;
    grid-column-start: 1;
    grid-column-end: 4;
    font-size: clamp(20px, 5vw, 37px);
  }
  .counsel_list .list_item a .subject {
    grid-column-start: 1;
    grid-column-end: 4;
    font-size: clamp(18px, 4.44vw, 33px);
	padding-bottom:clamp(8px, 2.67vw, 20px);
  }
  .counsel_list .list_item a .date {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;
  }
  .counsel_list .list_item a .name {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
  }
  .counsel_list .list_item a .state {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 4;
    font-size: clamp(18px, 5vw, 37px);
    border-radius: 35px;
  }
}