@charset "UTF-8";

/* =========================================================
   Top Page News
========================================================= */

.front-top-news{
  padding: 80px 0 60px;
  background: #fff;
}

.front-top-news__inner{
  width: min(100% - 32px, 1200px);
  margin-inline: auto;
}

.front-top-news__head{
  display: grid;
  grid-template-columns: 1fr 763px;
  align-items: end;
  column-gap: 40px;
}

.front-top-news__title-wrap{
  min-width: 0;
}

.front-top-news__eyebrow{
  margin: 0;
  color: #74909F;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.front-top-news__title-row{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-bottom: 27px;
}

.front-top-news__title-row::after{
  content: "";
  position: absolute;
  left: calc(-1 * ((100vw - min(100vw - 32px, 1200px)) / 2));
  right: 0;
  bottom: 0;
  height: 2px;
  background: #1759A5;
}

.front-top-news__icon{
  display: block;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}

.front-top-news__title{
  margin: 0;
  color: #1759A5;
  font-size: 35px;
  font-weight: 500;
  line-height: 1.35;
}

.front-top-news__tabs-wrap{
  align-self: end;
}

.front-top-news .hospital-news-switcher{
  min-width: 0;
}

.front-top-news .hospital-news-tabs{
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 0;
  width: 763px;
  max-width: 763px;
  margin: 0 0 0 auto;
  padding: 6px;
  background: #EDF3F5;
  border-radius: 4px;
  overflow: hidden;
}

.front-top-news .hospital-news-tabs__button{
  --tab-color: #398CC1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  border-right: 1px solid #D3DBDE;
  border-radius: 0;
  background: transparent;
  color: var(--tab-color);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}

.front-top-news .hospital-news-tabs__button:last-child{
  border-right: 0;
}

.front-top-news .hospital-news-tabs__button:hover{
  text-decoration: none;
  opacity: .88;
}

.front-top-news .hospital-news-tabs__button[data-tab-button="all"]{
  --tab-color: #4AB4D1;
}

.front-top-news .hospital-news-tabs__button[data-tab-button="notice"]{
  --tab-color: #398CC1;
}

.front-top-news .hospital-news-tabs__button[data-tab-button="department"]{
  --tab-color: #30A229;
}

.front-top-news .hospital-news-tabs__button[data-tab-button="seminar"]{
  --tab-color: #ff9acb;
}

.front-top-news .hospital-news-tabs__button[data-tab-button="other"]{
  --tab-color: #398CC1;
}

.front-top-news .hospital-news-tabs__button.is-active{
  border-right-color: transparent;
  border-radius: 4px;
  background-color: var(--tab-color);
  color: #fff;
}

.front-top-news .hospital-news-tabs__button.is-active + .hospital-news-tabs__button{
  border-left-color: transparent;
}

.front-top-news .hospital-news-select-wrap{
  display: none;
  margin: 0 0 40px;
}

.front-top-news .hospital-news-select{
  width: 100%;
  min-height: 48px;
  padding: 0 44px 0 16px;
  border: 1px solid #bfc9d4;
  border-radius: 12px;
  background-color: #fff;
  color: #333;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #666 50%),
    linear-gradient(135deg, #666 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% - 2px),
    calc(100% - 16px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.front-top-news .hospital-news-panels{
  width: 100%;
  margin-top: 40px;
}

.front-top-news .hospital-news-panel[hidden]{
  display: none;
}

.front-top-news .hospital-news-empty{
  padding: 40px 0;
  border-top: 1px solid #D8E0E3;
  border-bottom: 1px solid #D8E0E3;
}

.front-top-news .hospital-news-empty__text{
  margin: 0;
  color: #666;
  font-size: 16px;
  line-height: 1.8;
  text-align: center;
}

.front-top-news .hospital-news-list{
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  min-height: 380px;
}

.front-top-news .hospital-news-list > li{
  border-bottom: 1px solid #D8E0E3;
}

.front-top-news .hospital-news-list__link{
  display: grid;
  grid-template-columns: 100px 150px minmax(0, 1fr) 26px;
  grid-template-areas: "date badge title arrow";
  align-items: center;
  column-gap: 30px;
  width: 100%;
  min-height: 74px;
  padding: 18px 0;
  color: inherit;
  text-decoration: none;
  box-sizing: border-box;
}

.front-top-news .hospital-news-list__link:hover,
.front-top-news .hospital-news-list__link:active,
.front-top-news .hospital-news-list__link:visited{
  text-decoration: none;
}

.front-top-news .hospital-news-list__link:not(:has(.hospital-news-list__badge)){
  grid-template-columns: 100px minmax(0, 1fr) 26px;
  grid-template-areas: "date title arrow";
}

.front-top-news .hospital-news-list__link:not(:has(.hospital-news-list__badge)) .hospital-news-list__date-wrap{
  grid-area: date;
}

.front-top-news .hospital-news-list__link:not(:has(.hospital-news-list__badge)) .hospital-news-list__title{
  grid-area: title;
}

.front-top-news .hospital-news-list__link:not(:has(.hospital-news-list__badge)) .hospital-news-list__arrow{
  grid-area: arrow;
}

.front-top-news .hospital-news-list__date-wrap{
  grid-area: date;
  display: flex;
  align-items: center;
  min-width: 0;
}

.front-top-news .hospital-news-list__date{
  display: inline-block;
  color: #4b4b4b;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
}

.front-top-news .hospital-news-list__badge{
  --badge-color: #398CC1;
  grid-area: badge;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  min-height: 33px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--badge-color);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}

.front-top-news .hospital-news-list__badge[style*="#4AB4D1"],
.front-top-news .hospital-news-list__badge[style*="#4ab4d1"]{
  --badge-color: #4AB4D1;
}

.front-top-news .hospital-news-list__badge[style*="#398CC1"],
.front-top-news .hospital-news-list__badge[style*="#398cc1"]{
  --badge-color: #398CC1;
}

.front-top-news .hospital-news-list__badge[style*="#30A229"],
.front-top-news .hospital-news-list__badge[style*="#30a229"]{
  --badge-color: #30A229;
}

.front-top-news .hospital-news-list__badge[style*="#E2AB50"],
.front-top-news .hospital-news-list__badge[style*="#e2ab50"]{
  --badge-color: #E2AB50;
}

.front-top-news .hospital-news-list__badge[style*="#D05E81"],
.front-top-news .hospital-news-list__badge[style*="#d05e81"]{
  --badge-color: #D05E81;
}

.front-top-news .hospital-news-list__badge[style*="#F273A8"],
.front-top-news .hospital-news-list__badge[style*="#f273a8"]{
  --badge-color: #F273A8;
}

.front-top-news .hospital-news-list__badge[style*="#8A6CAF"],
.front-top-news .hospital-news-list__badge[style*="#8a6caf"]{
  --badge-color: #8A6CAF;
}

.front-top-news .hospital-news-list__badge[style*="#28B5A2"],
.front-top-news .hospital-news-list__badge[style*="#28b5a2"]{
  --badge-color: #28B5A2;
}

.front-top-news .hospital-news-list__badge.is-all{
  --badge-color: #4AB4D1;
}

.front-top-news .hospital-news-list__badge.is-notice{
  --badge-color: #398CC1;
}

.front-top-news .hospital-news-list__badge.is-department{
  --badge-color: #30A229;
}

.front-top-news .hospital-news-list__badge.is-special-clinic{
  --badge-color: #E2AB50;
}

.front-top-news .hospital-news-list__badge.is-team-care{
  --badge-color: #D05E81;
}

.front-top-news .hospital-news-list__badge.is-seminar{
  --badge-color: #ff9acb;
}

.front-top-news .hospital-news-list__badge.is-support{
  --badge-color: #F273A8;
}

.front-top-news .hospital-news-list__badge.is-center{
  --badge-color: #8A6CAF;
}

.front-top-news .hospital-news-list__badge.is-clinic{
  --badge-color: #28B5A2;
}

.front-top-news .hospital-news-list__badge.is-other{
  --badge-color: #398CC1;
}

.front-top-news .hospital-news-list__title{
  grid-area: title;
  min-width: 0;
  color: #333;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  text-decoration: none;
  word-break: break-word;
}

.front-top-news .hospital-news-list__link:hover .hospital-news-list__title{
  text-decoration: none;
}

.front-top-news .hospital-news-list__arrow{
  grid-area: arrow;
  position: relative;
  display: inline-block;
  width: 26px;
  height: 26px;
  justify-self: end;
  border: 1px solid #bdbdbd;
  border-radius: 50%;
  background: #fff;
  transition: background-color .2s ease, border-color .2s ease;
}

.front-top-news .hospital-news-list__arrow::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 48%;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid #777;
  border-right: 1.5px solid #777;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: border-color .2s ease;
}

.front-top-news .hospital-news-list__link:hover .hospital-news-list__arrow{
  background: #333;
  border-color: #333;
}

.front-top-news .hospital-news-list__link:hover .hospital-news-list__arrow::before{
  border-color: #fff;
}

.front-top-news__footer{
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.front-top-news__more{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #2F2F2F;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
}

.front-top-news__more:hover{
  text-decoration: none;
}

.front-top-news__more-icon{
  position: relative;
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #2F2F2F;
  flex: 0 0 26px;
}

.front-top-news__more-icon::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 47%;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid #fff;
  border-right: 1.5px solid #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}

@media (max-width: 1260px){
  .front-top-news__head{
    grid-template-columns: minmax(0, 1fr) 763px;
    column-gap: 28px;
  }
}

@media (max-width: 1100px){
  .front-top-news__head{
    grid-template-columns: 1fr;
    row-gap: 28px;
    align-items: start;
  }

  .front-top-news .hospital-news-tabs{
    margin-left: 0;
  }

  .front-top-news__title-row::after{
    left: 0;
  }

  .front-top-news__tabs-wrap{
    align-self: start;
  }
}

@media (max-width: 980px){
  .front-top-news .hospital-news-tabs{
    width: 100%;
    max-width: 763px;
  }

  .front-top-news .hospital-news-tabs__button{
    width: 128px;
    min-width: 128px;
    font-size: 15px;
  }

  .front-top-news .hospital-news-list__link{
    grid-template-columns: 100px 136px minmax(0, 1fr) 26px;
    column-gap: 18px;
  }

  .front-top-news .hospital-news-list__badge{
    width: 136px;
    font-size: 14px;
  }

  .front-top-news .hospital-news-list__date,
  .front-top-news .hospital-news-list__title{
    font-size: 16px;
  }
}

@media (max-width: 767px){
  .front-top-news{
    padding: 48px 0 100px;
  }

  .front-top-news__inner{
    width: min(100% - 24px, 1200px);
  }

  .front-top-news__eyebrow{
    font-size: 14px;
  }

  .front-top-news__title-row{
    gap: 8px;
    margin-top: 10px;
    padding-bottom: 20px;
  }

  .front-top-news__title{
    font-size: 28px;
  }

  .front-top-news__icon{
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  .front-top-news .hospital-news-tabs{
    display: none;
  }

  .front-top-news .hospital-news-select-wrap{
    display: block;
    margin: 0 0 12px;
  }

  .front-top-news .hospital-news-panels{
    margin-top: 0;
  }

  .front-top-news .hospital-news-list{
    min-height: auto;
  }

  .front-top-news .hospital-news-list__link{
    grid-template-columns: 1fr 26px;
    grid-template-areas:
      "date  arrow"
      "badge arrow"
      "title arrow";
    align-items: center;
    row-gap: 10px;
    column-gap: 12px;
    min-height: 0;
    padding: 16px 0;
  }

  .front-top-news .hospital-news-list__link:not(:has(.hospital-news-list__badge)){
    grid-template-columns: 1fr 26px;
    grid-template-areas:
      "date  arrow"
      "title arrow";
  }

  .front-top-news .hospital-news-list__date{
    font-size: 14px;
  }

  .front-top-news .hospital-news-list__badge{
    width: fit-content;
    max-width: 100%;
    min-height: 33px;
    padding: 5px 12px;
    font-size: 13px;
    white-space: normal;
  }

  .front-top-news .hospital-news-list__title{
    font-size: 15px;
    line-height: 1.7;
  }

  .front-top-news__footer{
    margin-top: 20px;
  }

  .front-top-news__more{
    font-size: 15px;
  }
}

@media (max-width: 480px){
  .front-top-news .hospital-news-select{
    min-height: 44px;
    font-size: 15px;
  }

  .front-top-news__title{
    font-size: 26px;
  }

  .front-top-news .hospital-news-list__title{
    font-size: 14px;
  }

  .front-top-news .hospital-news-list__date,
  .front-top-news .hospital-news-list__badge{
    font-size: 12px;
  }
}