@charset "UTF-8";
/* CSS Document */


/* ----------------------------
  獣医師紹介（スマホファースト）
---------------------------- */

.doctor-card{
  display: flex;
  flex-direction: column;   /* スマホは縦積み */
  gap: 14px;
  padding: 18px;
  /*background: #fff;*/
  margin-bottom: 22px;
}

/* 写真 */
.doctor-photo{
  display: flex;
  justify-content: center;
}

.doctor-photo img{
  width: 100%;
  max-width: 340px;     /* スマホで大きくなりすぎない 本来は420px */
  height: auto;
  display: block;
  border-radius: 10px;
}

/* 文章 */
.doctor-name{
  position: relative;
  display: inline-block;
  color: #093353;   /* ← 名前の色 */
  padding-bottom: 6px;
}

.doctor-name::after{
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: #093353; /* ← 線の色 */
  margin-top: 6px;
}

.doctor-lead{
  margin: 0 0 10px;
}

.doctor-text{
  margin: 0;
}

/* 箇条書き（任意） */
.doctor-meta{
  margin: 12px 0 0;
  padding-left: 1.2em;
}

/* ----------------------------
  タブレット以上：左右2カラム
---------------------------- */
@media (min-width: 768px){
  .doctor-card{
    flex-direction: row;     /* 2列 */
    align-items: center;     /* 高さを揃えて中央に */
    gap: 26px;
    padding: 24px;
  }

  .doctor-photo{
    flex: 0 0 42%;           /* 左：写真の割合 */
    justify-content: center;
  }

  .doctor-body{
    flex: 1;                 /* 右：文章 */
  }

  /* 写真を右にしたいカードだけ */
  .doctor-card.is-reverse{
    flex-direction: row-reverse;
  }

  .doctor-photo img{
    max-width: none;         /* 2カラムでは制限解除 */
  }
}

  /* スマホは文字は開閉 */
/* スマホ：最初は閉じる */
.doctor-detail{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px);
  transition:
    max-height 0.6s ease,
    opacity 0.4s ease,
    transform 0.4s ease;
}
.doctor-detail.is-open{
  max-height: 3000px;   /* 長文対応：十分大きめ */
  opacity: 1;
  transform: translateY(0);
}


.doctor-toggle{
  margin: 12px 0;
  padding: 10px 14px;
  border: none;
  border-radius: 6px;
  background: #093353;
  color: #fff;
  font-size: 1.6rem; /* スマホ：16px（読みやすい基本値） */
  line-height: 1.5;
  cursor: pointer;
}

/* PCでは常に表示＆ボタン非表示 */
@media (min-width:768px){
  .doctor-detail{
    max-height: none;   /* 制限解除 */
    opacity: 1;        /* ← これが超重要 */
    transform: none;   /* ← これも */
	  overflow: visible;   /* ← これを追加（重要） */
  }

  .doctor-toggle{
    display: none;
  }
}



/* 名前＋ボタン横並び（スマホ） */
.doctor-head{
  display: flex;
  align-items: flex-end; 
  justify-content: center;
  gap: 12px;              /* 名前とボタンの間隔 */
  margin-bottom: 8px;
}
@media (min-width: 768px){
.doctor-head{
	justify-content: left;
}
}