/* トップページ専用スタイル */
.hero {
  /* 1. 背景画像をcontainer内に収めるための設定 */
  margin: 20px auto; /* 上下に余白を作り、中央に配置 */
  padding: 100px 20px; /* 内側の余白を調整 */
  
  /* 2. 背景画像の設定（ご用意された hero.webp を使用） */
  background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)), url('../img/hero.webp') center/cover;
  
  /* 3. 看板のような角丸デザイン */
  border-radius: 15px; 
  text-align: center;
  
  /* 4. 画像がない場合や読み込み中用の予備色 */
  background-color: var(--bg-light);
  
  /* 5. 影をつけて少し浮いているように見せる（任意） */
  box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

/* スマホ表示での微調整 */
@media (max-width: 768px) {
  .hero {
    margin: 10px auto; /* 上下余白を詰める */
    padding: 60px 15px; /* 内側余白を詰める */
    border-radius: 15px; /* 角丸を緩く */
  }
}/* --- 既存の .page-header はそのまま維持 --- */

/* 画像を使いたいヘッダー専用の追加スタイル */
/* --- 共通：画像や背景色を使わない洗練されたヘッダースタイル --- */





.page-header.is-visual {
  padding: 0;  /* 上下にゆとりを持たせる */
  margin: 0 0 20px;
  text-align: center;
  background:none;
}

/* 擬似要素（::beforeなど）が残っている場合はリセット */
.page-header.is-visual::before {
  display: none;
}

/* タイトル：文字間隔と細さにこだわる */
.page-header.is-visual h1 {
  color: var(--main-pink); /* 医院のキーカラー */
  font-size: 2.6rem;
  letter-spacing: 0.25em;  /* 文字の間隔を広く取る */
  margin: 0;
  line-height: 1.2;
}

/* サブタイトル：英字を小さく整える */
.page-header.is-visual p {
  color: #ccc;             /* 主張しすぎないグレー */
  font-size: 0.9rem;
  font-weight: bold;
  letter-spacing: 0.5em;   /* 英字の間隔をさらに広く */
  margin-top: 15px;
  text-transform: uppercase; /* 自動で大文字に */
}

/* 装飾：タイトルの下に小さなアクセントを入れる場合（任意） */
.page-header.is-visual .container::after {
  content: '';
  display: block;
  width: 30px;
  height: 2px;
  background: var(--main-pink);
  margin: 30px auto 0;
  opacity: 0.5;
}



.info-card { 
    background: var(--bg-light);}



/* --- ページごとの背景画像を指定 --- */
.cerec-bg { background-image: url('../img/header_cerec.jpg'); }
.sleep-bg { background-image: url('../img/header_sleep.jpg'); }
.sports-bg { background-image: url('../img/header_sports.jpg'); }


  /* 紹介セクション共通 */  
  .intro-section { padding: 80px 0; background: #fff; }
  .intro-flex  { display: flex; gap: 40px; align-items: center; }
  .intro-text { flex: 1; }
  .intro-text h2 { color: var(--main-pink); font-size: 2rem; margin-top: 0; }
  .intro-text p { margin-bottom: 25px; }
  .intro-img-box { flex: 1; text-align: center; }
  .intro-img-box img { width: 100%; max-width: 450px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }

  /* 設備セクション用：背景色あり */
  .about-section { background: var(--bg-light); padding: 80px 0; }

  /* クイック情報 */

  /* 診療案内グリッド */
  .service-item { background: #fff; padding: 20px 10px; border-radius: 20px; text-align: center; text-decoration: none; color: inherit; border: 1px solid #f0f0f0; transition: 0.3s; }
  .service-item:hover { transform: translateY(-10px); border-color: var(--main-pink); box-shadow: 0 10px 30px rgba(214,129,160,0.1); }
  .service-item h3 { color: var(--main-pink); margin-bottom: 10px; }
  .service-item p { font-size: 0.9rem; color: #666; margin: 0; }



/* -----------------------------
   お知らせ
----------------------------- */
.news-list{

 list-style: none; padding: 0; line-height: 2.5;
 }

.news-list li{
border-bottom: 1px solid #eee;
}

.news-list li span{
color: #999; font-size: 0.8rem; margin-right: 15px;
}

  @media (max-width: 768px) {
    .hero h1 { font-size: 1.8rem; }
    .intro-flex { flex-direction: column; text-align: center; }
    .info-flex { flex-direction: column; }
  }