/* 09.html 専用スタイル */

/* --- 全体・セクション設定 --- */

/* セクションタイトル共通スタイル */
.section-title {
  font-weight: bold;
  color: #333;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid #6b90db; /* style.css の青色に合わせる */
  display: inline-block; /* 下線が文字幅に合うように */
}

/* --- カード型レイアウト --- */

/* 説明カードのベース */
.info-card {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-left: 5px solid #6b90db;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

/* --- 歯の構造セクション --- */
.tooth-structure dt {
  font-weight: bold;
  color: #333;
  margin-top: 1.5rem;
  padding-left: 1rem;
  border-left: 3px solid #B2C2E1; /* style.css の薄い青 */
}

.tooth-structure dd {
  margin-left: 1rem;
  padding-left: 1rem;
  margin-bottom: 0.5rem;
  color: #555;
}

/* --- 手順カードのレイアウト --- */
.step-card {
  background-color: #fff;
  border-radius: 10px;
  padding: 2rem;
  margin-bottom: 2rem;
  border: 1px solid #ddd;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: box-shadow 0.3s ease-in-out;
}

.step-card:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.step-card.compact {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.step-text {
  padding-left: 1rem;
}

.step-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #6b90db;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}

.step-number {
  background-color: #6b90db;
  color: #fff;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  margin-right: 0.8rem;
  font-weight: bold;
}

/* --- レスポンシブ対応 --- */
@media (max-width: 767px) {
  .step-text {
    padding-left: 0;
    margin-top: 1.5rem;
  }
  
  .tooth-structure dt, .tooth-structure dd {
      margin-left: 0;
      padding-left: 0.5rem;
  }
}

/* ナビゲーションメニューが改行されないようにする */
header nav ul li a {
  white-space: nowrap;
}