/* =========================================================
medical-pages.css
/medical-units/ 専用
========================================================= */

.page-medical-units{

  --mu-accent:#1759A5;
  --mu-hover:#4F93D8;

  --mu-heading-bg:#E9EEF1;

}

.medical-intro{
  padding: 0;
}

.medical-intro__inner{
  width: min(100% - 40px, 1080px);
  margin: 0 auto;
  
}


.page-medical-units .medical-intro__title{
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.4;
  color: #2F2F2F;
}

/* 青バー */
.page-medical-units .medical-intro__title::before{
  content: "";
  width: 10px;
  height: 30px;
  background: #1759A5;
  flex: 0 0 auto;
}

/* 緑丸 */
.page-medical-units .medical-intro__title::after{
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 10px;
  height: 10px;
  border-radius: 20px 20px 0 0;
  background: #30A229;
}

.medical-intro__lead{
  margin: 18px 0 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 2;
  color: #2F2F2F;
}

@media (max-width: 768px){
  .medical-intro__inner{
    width: min(100% - 32px, 1080px);
  }

  .medical-intro__title{
    gap: 10px;
    font-size: 30px;
  }

  .medical-intro__accent{
    width: 14px;
    height: 22px;
    flex: 0 0 14px;
  }

  .medical-intro__accent::before{
    left: -8px;
    width: 16px;
    height: 16px;
  }

  .medical-intro__lead{
    margin-top: 18px;
    font-size: 16px;
    line-height: 1.9;
  }
}


/* =========================================================
セクション色
========================================================= */

.page-medical-units .is-department{
  --mu-accent:#30A229;
}

.page-medical-units .is-support{
  --mu-accent:#F273A8;
}

.page-medical-units .is-special{
  --mu-accent:#E2AB50;
}

.page-medical-units .is-team{
  --mu-accent:#D05E81;
}

.page-medical-units .is-facility{
  --mu-accent:#8A6CAF;
}


/* =========================================================
セクション
========================================================= */

.page-medical-units .medical-units-section{

  margin-top:32px;

  display:grid;
  gap:48px;

}

.page-medical-units .medical-unit-group{
  margin:0;
}

.page-medical-units .medical-unit-accordion{
  margin:0;
}


/* =========================================================
アコーディオンタイトル
========================================================= */
.page-medical-units .dept-accordion__summary{
  height: 70px;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.page-medical-units .medical-unit-accordion > summary{

  position:relative;

  display:flex;
  align-items:center;
  justify-content:space-between;

  height:60px;

  padding:0 20px 0 36px;

  background:var(--mu-heading-bg);

  list-style:none;
  cursor:pointer;

}

.page-medical-units .medical-unit-accordion > summary::-webkit-details-marker{
  display:none;
}


/* 左マーカー */

.page-medical-units .medical-unit-accordion > summary::before{

  content:"";

  position:absolute;

  left:0;
  top:50%;

  transform:translateY(-50%);

  width:23px;
  height:30px;

  border-radius:0 20px 20px 0;

  background:var(--mu-accent);

}


/* トグル */

.page-medical-units .medical-unit-accordion > summary::after{

  content:"+";

  display:flex;
  align-items:center;
  justify-content:center;
  margin-left: 1px;

  width:26px;
  height:26px;

  border-radius:50%;

  background:var(--mu-accent);
  color:#fff;

  font-size:18px;
  font-weight:700;
  line-height:1;

}

.page-medical-units .medical-unit-accordion[open] > summary::after{
  content:"−";
}


/* =========================================================
タイトル
========================================================= */

.page-medical-units .medical-unit-heading-text{

  font-size:28px;
  font-weight:700;
  line-height:1;

  margin:0;

}

/* 共通h2装飾解除 */

.page-medical-units h2.medical-unit-heading-text{

  border:none;
  padding-left:0;

}

.page-medical-units h2.medical-unit-heading-text::after{

  display:none;
  content:none;

}

.page-medical-units h2.medical-unit-heading-text::before{

  display:none;
  content:none;

}


/* =========================================================
パネル
========================================================= */

.page-medical-units .medical-unit-panel{
  padding-top:14px;
}


/* =========================================================
一覧リンク
========================================================= */

.page-medical-units .medical-unit-more-wrap{

  display:flex;
  justify-content:flex-end;

  margin:0 0 14px;

}

.page-medical-units .medical-unit-more-link{

  font-size:14px;
  color:#333;

  text-decoration:none;

}

.page-medical-units .medical-unit-more-link::after{

  content:"›";

  margin-left:8px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:20px;
  height:20px;

  border-radius:50%;

  background:var(--mu-accent);
  color:#fff;

  font-size:13px;
  font-weight:700;

}


/* =========================================================
診療科リンク
========================================================= */

.page-medical-units .medical-unit-links{

  list-style:none;

  margin:0;
  padding:0;

  display:grid;

  grid-template-columns:repeat(3,minmax(0,1fr));

  gap:16px 18px;

}

.page-medical-units .medical-unit-link-item{
  margin:0;
}


/* ボタン */

.page-medical-units .medical-unit-pill-link{

  display:inline-flex;
    font-size: 20px;
  align-items:center;
  justify-content:flex-start;

  width:100%;

  min-height:57px;

  padding:0 14px 0 23px;

  border-radius:60px;

  border:1px solid #1759A5;

  background:#fff;

  color:#1759A5;

  text-decoration:none;

  transition:.2s;

}

.page-medical-units .medical-unit-pill-link::after{

  content:"›";

  margin-left:auto;

  display:inline-flex;

  align-items:center;
  justify-content:center;

  width:28px;
  height:28px;

  border-radius:50%;

  background:#1759A5;

  color:#fff;

  font-size:30px;

  padding-bottom:8px;

}

.page-medical-units .medical-unit-pill-link:hover{

  background:#4F93D8;
  border-color:#4F93D8;

  color:#fff;

}

.page-medical-units .medical-unit-pill-link:hover::after{

  background:#1759A5;
  color:#fff;

}


/* =========================================================
ul干渉防止
========================================================= */

.page-medical-units .page-content :is(

  ul.medical-units-list,
  ul.medical-unit-links,
  ul.medical-unit-children

){

  list-style:none !important;

  margin:0 !important;
  padding:0 !important;

}

.page-medical-units .page-content :is(

  .medical-unit-link-item,
  .medical-unit-child-item

){

  list-style:none !important;
  margin:0 !important;

}

.page-medical-units .page-content :is(

  .medical-unit-link-item,
  .medical-unit-child-item

)::marker{

  content:"" !important;

}


/* =========================================================
レスポンシブ
========================================================= */

@media (max-width:1024px){

  .page-medical-units .medical-unit-heading-text{
    font-size:28px;
  }

}

@media (max-width:767px){

  .page-medical-units .medical-units-section{
    gap:34px;
  }

  .page-medical-units .medical-unit-links{
    grid-template-columns:1fr;
  }

  .page-medical-units .medical-unit-heading-text{
    font-size:26px;
  }

}

.page-medical-units .medical-unit-heading-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.page-medical-units .medical-unit-heading-actions{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  flex: 0 0 auto;
}

.page-medical-units .medical-unit-more-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  background: #fff;
  color: inherit;
  transition: opacity .2s ease, background-color .2s ease, color .2s ease;
}

.page-medical-units .medical-unit-more-link:hover{
  opacity: .8;
}

.page-medical-units .is-special .medical-unit-more-link{
  color: #E2AB50;
}

.page-medical-units .is-team .medical-unit-more-link{
  color: #D05E81;
}

@media (max-width: 767px){
  .page-medical-units .medical-unit-heading-row{
    gap: 12px;
  }

  .page-medical-units .medical-unit-heading-actions{
    gap: 10px;
  }

  .page-medical-units .medical-unit-more-link{
    min-height: 30px;
    padding: 0 10px;
    font-size: 12px;
  }
}