@charset "UTF-8";
.typical-diseases-grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  margin: 0 -10px 20px;
}

.typical-diseases-col {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  padding: 10px;
}

@media screen and (min-width: 768px) {
  .typical-diseases-col {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
  }
}

.typical-diseases-card {
  border-radius: 8px;
  height: 100%;
  padding: 1em;
}

.typical-diseases-card.card_01 {
  background: #bdd6ee;
}

.typical-diseases-card.card_02 {
  background: #ffc000;
}

.typical-diseases-card.card_03 {
  background: #f8cbad;
}

.typical-diseases-card.card_04 {
  background: #cbff99;
}

.typical-diseases-card.card_05 {
  background: #d9d9d9;
}

.typical-diseases-card.card_06 {
  background: #99ffcc;
}

.typical-diseases-card.card_07 {
  background: #ffd966;
}

.typical-diseases-card.card_08 {
  background: #ffcccc;
}

.typical-diseases-card.card_09 {
  background: #67ccff;
}

h4.td-heading {
  color: #333;
  font-size: 1.5em;
  text-align: center;
}

hr.typical-divider {
  display: block;
  height: 1px;
  border: 0;
  border-top: 3px solid #fff;
  margin: 12px 0;
  padding: 0;
}

.typical-btn-wrapper {
  margin-top: 1em;
  text-align: right;
}

.typical-btn-detail {
  border-radius: 6px;
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  padding: 10px 14px;
  -webkit-transition: background 0.2s ease-out;
  transition: background 0.2s ease-out;
}

.typical-btn-detail span:after {
  font-family: "Font Awesome 5 Free";
  content: "";
  color: inherit;
  display: inline-block;
  font-weight: 900;
  text-align: center;
  margin-left: 8px;
}

.typical-btn-detail.card_01 {
  background: #6ca4d9;
  border: 2px solid #fff;
  color: #fff;
}

.typical-btn-detail.card_01:hover {
  background: #438acf;
  color: #fff;
  text-decoration: none;
}

.typical-btn-detail.card_02 {
  background: #997300;
  border: 2px solid #fff;
  color: #fff;
}

.typical-btn-detail.card_02:hover {
  background: #664d00;
  color: #fff;
  text-decoration: none;
}

.typical-btn-detail.card_03 {
  background: #f08f4f;
  border: 2px solid #fff;
  color: #fff;
}

.typical-btn-detail.card_03:hover {
  background: #ec7220;
  color: #fff;
  text-decoration: none;
}

.typical-btn-detail.card_04 {
  background: #97ff33;
  border: 2px solid #fff;
  color: #fff;
}

.typical-btn-detail.card_04:hover {
  background: #7dff00;
  color: #fff;
  text-decoration: none;
}

.typical-btn-detail.card_05 {
  background: #a6a6a6;
  border: 2px solid #fff;
  color: #fff;
}

.typical-btn-detail.card_05:hover {
  background: #8d8d8d;
  color: #fff;
  text-decoration: none;
}

.typical-btn-detail.card_06 {
  background: #33ff99;
  border: 2px solid #fff;
  color: #fff;
}

.typical-btn-detail.card_06:hover {
  background: #00ff80;
  color: #fff;
  text-decoration: none;
}

.typical-btn-detail.card_07 {
  background: #ffc000;
  border: 2px solid #fff;
  color: #fff;
}

.typical-btn-detail.card_07:hover {
  background: #cc9900;
  color: #fff;
  text-decoration: none;
}

.typical-btn-detail.card_08 {
  background: #ff6666;
  border: 2px solid #fff;
  color: #fff;
}

.typical-btn-detail.card_08:hover {
  background: #ff3333;
  color: #fff;
  text-decoration: none;
}

.typical-btn-detail.card_09 {
  background: #01aaff;
  border: 2px solid #fff;
  color: #fff;
}

.typical-btn-detail.card_09:hover {
  background: #0088cd;
  color: #fff;
  text-decoration: none;
}

/* ベースカード（白背景＋上ボーダー用） */
.typical-diseases-card-new {
  background: #fff;
  border-radius: 8px;
  height: 100%;
  padding: 1em;
  border-top: 3px solid transparent; 
}

/* 各カードのカラー */
.typical-diseases-card-new.border_fibroid {
  border-top-color: #378ADD; 
}

.typical-diseases-card-new.border_adenomyosis {
  border-top-color: #EF9F27; 
}

.typical-diseases-card-new.border_ovarian {
  border-top-color: #1D9E75; 
}

.typical-diseases-card-new.border_menstrual {
  border-top-color: #639922; 
}

.typical-diseases-card-new.border_endometrial_cancer {
  border-top-color: #D85A30; 
}

.typical-diseases-card-new.border_ovarian_cancer {
  border-top-color: #D4537E; 
}

.typical-diseases-card-new.border_cervical_cancer {
  border-top-color: #7F77DD; 
}