@charset "utf-8";

/*================ ブレイクポイント ====================*/
/*
Extra small: 576pxまで
Small: 576px以上
Medium: 768px以上
Large: 992px以上
Extra large: 1200px以上
Extra extra large: 1400px以上
*/

/*===================================================================================
お知らせ（news）
===================================================================================*/
.top_news { padding-top: var(--space60); padding-bottom: var(--space60); background: var(--col-blue01); }
.top_news__body { padding: var(--space40) var(--space20); background: var(--col-white01); border-radius: 20px; }
.top_news__body__headline { margin-bottom: var(--space10); }
.top_news__body__list .item { padding-top: var(--space20); padding-bottom: var(--space20); border-bottom: 1px solid var(--col-gray01); line-height: 1.8; }
@media screen and (min-width: 992px) {
  .top_news__body { padding: var(--space40) var(--space40); background: var(--col-white01); border-radius: 20px; }
}

/*===================================================================================
ご挨拶（greeting）
===================================================================================*/
.top_greeting { padding-top: var(--space60); padding-bottom: var(--space60); }
.top_greeting__body { display: block grid; grid-template-columns: auto; gap: 40px; }
.top_greeting__body__contents .headline { margin-bottom: var(--space40); }
.top_greeting__body__contents .text { font-size: 1rem; line-height: 1.8; margin-block: var(--leading-trim); }
@media screen and (min-width: 576px) {
  .top_greeting__body { grid-template-columns: repeat(2, auto); gap: 55px; }
  .top_greeting__body__contents { max-width: 20.5rem; width: 100%; }
  .top_greeting__body__contents .headline { margin-bottom: var(--space60); }
  .top_greeting__body__image { max-width: 38.5625rem; width: 100%; }
}
@media screen and (min-width: 992px) {
  .top_greeting { padding-top: var(--space120); padding-bottom: var(--space120); }
}
@media screen and (min-width: 576px) and (max-width: 992px) {
  .top_greeting__body__contents .text .tb_br { display: none; }
}

/*===================================================================================
特徴（feature）
===================================================================================*/
.top_feature { padding-top: var(--space60); padding-bottom: var(--space60); background: var(--col-blue02); }
.top_feature__point { display: block flex; flex-direction: column-reverse; gap: 40px; }
.top_feature__point:not(:nth-last-of-type(1)) { margin-bottom: var(--space60); }
.top_feature__point__contents .headline { margin-bottom: var(--space40); }
.top_feature__point__contents .text { font-size: 1rem; line-height: 1.8; margin-block: var(--leading-trim); }
@media screen and (min-width: 576px) {
  .top_feature__point { flex-direction: row; justify-content: space-between; gap: 55px; }
  .top_feature__point:nth-of-type(odd) { flex-direction: row-reverse; }
  .top_feature__point__contents { max-width: 20.5rem; width: 100%; padding-top: var(--space30); }
  .top_feature__point__image { max-width: 44.625rem; width: 100%; }
}
@media screen and (min-width: 992px) {
  .top_feature { padding-top: var(--space120); padding-bottom: var(--space120); }
  .top_feature__point:not(:nth-last-of-type(1)) { margin-bottom: var(--space120); }
  .top_feature__point__contents .headline { margin-bottom: var(--space60); }
}

/*===================================================================================
診療案内（medicalinfo）
===================================================================================*/
.top_medicalinfo { padding-top: var(--space60); padding-bottom: var(--space60); }
.top_medicalinfo__headline { margin-bottom: var(--space60); }
.top_medicalinfo__body { display: block grid; grid-template-columns: auto; column-gap: 60px; row-gap: 40px; }
.top_medicalinfo__body__timetable .image { margin-bottom: var(--space20); }
.top_medicalinfo__body__timetable .visit__headline { margin-bottom: var(--space20); }
.top_medicalinfo__body__timetable .visit__image { margin-bottom: var(--space20); }
.top_medicalinfo__body__timetable .banner { margin-top: var(--space20); text-align: center; }
.top_medicalinfo__body__area { text-align: center; }
@media screen and (min-width: 576px) {
  .top_medicalinfo__body { grid-template-columns: repeat(2, auto); }
}
@media screen and (min-width: 992px) {
  .top_medicalinfo { padding-top: var(--space120); padding-bottom: var(--space120); }
}