/* =================================================
   1. 基本設定・画像・共通パーツ
   ================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; 
  line-height: 1.8; color: #444; background: #fff;
}

/* 画像と地図のレスポンシブ化 */
img { max-width: 100%; height: auto; display: block; }
iframe { width: 100% !important; border: none; display: block; }
#mainImg { line-height: 0; font-size: 0; overflow: hidden; }
#mainImg img { width: 100% !important; }

/* セクション内の画像装飾（角丸25px） */
section img { border: 6px solid #fff; border-radius: 25px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); }
.accent-text { color: #0097a7; font-weight: bold; }

/* =================================================
   2. ヘッダー・ナビゲーション
   ================================================= */
#header {
  position: absolute; top: 30px; right: 30px; z-index: 100; width: 320px;
  background: rgba(255, 255, 255, 0.95); padding: 30px 25px 60px 25px; 
  border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
#mainnav ul { list-style: none; margin-top: 30px; }
#mainnav li { border-bottom: 1px solid #e0f7fa; }
#mainnav li:last-child { border-bottom: none; }
#mainnav li a { display: block; padding: 15px 5px; color: #555; text-decoration: none; font-weight: bold; transition: 0.3s; }
#mainnav li a:hover { color: #0097a7; background-color: #f0faff; padding-left: 10px; }

/* ハンバーガーボタン */
#menuBtn, #menuBtn::before, #menuBtn::after { background: #00bfff !important; }

/* =================================================
   3. セクション共通（余白と背景色）
   ================================================= */
section { padding: 60px 0; clear: both; }
#sec01, #sec03 { background-color: #f0faff; } 
#sec02 { background-color: #f7fdff; } 
.inner-wrap, .innerS { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

.section-title { text-align: center; margin-bottom: 40px; font-size: 2rem; color: #0097a7; }
.section-title span { position: relative; display: inline-block; padding-bottom: 15px; }
.section-title span::after {
  content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 60px; height: 4px; background: #4dd0e1;
}

/* =================================================
   4. お知らせ・院長紹介
   ================================================= */
/* お知らせボックス（水色の囲い） */
.news-box { 
  background: #fff; padding: 30px; border-radius: 15px; 
  margin-bottom: 50px; border: 2px solid #4dd0e1; 
}
.news-box h3 { border-left: 5px solid #00bcd4; color: #0097a7; padding-left: 15px; margin-bottom: 15px; }
.news-box ul { list-style: none; }
.news-box li { border-bottom: 1px dashed #e0f7fa; padding-bottom: 8px; margin-bottom: 8px; }
.news-box li:last-child { border-bottom: none; }

/* 院長紹介（画像サイズ固定・見出し強弱） */
.profile-container { display: flex; gap: 40px; align-items: flex-start; margin-top: 40px; padding-top: 40px; border-top: 1px dashed #ccc; }
.profile-image { flex: 0 0 280px; }
.profile-text-box { flex: 1; }

.name-title { font-size: 1.6rem; color: #0097a7; border-bottom: 4px solid #0097a7; padding-bottom: 5px; display: inline-block; }
.profile-sub-title { font-size: 1.2rem; color: #0097a7; border-bottom: 2px solid #4dd0e1; padding-bottom: 3px; display: inline-block; margin-top: 25px; }
.history-list { list-style: none; margin-top: 10px; }
.history-list li { position: relative; padding-left: 1.2em; }
.history-list li::before { content: "・"; position: absolute; left: 0; color: #00bcd4; font-weight: bold; }

/* =================================================
   5. 設備紹介カード（比率50:50・ホバー）
   ================================================= */
.equipment-container { display: flex; flex-direction: column; gap: 40px; }
.eq-card {
  display: flex; align-items: center; gap: 50px; background: #fff; padding: 40px; 
  border-radius: 30px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); transition: 0.3s ease; border: 2px solid transparent;
}
.eq-card:hover { transform: translateY(-10px); border-color: #4dd0e1; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); }
.eq-card:nth-child(even) { flex-direction: row-reverse; }

.eq-img, .eq-text { flex: 1; width: 50%; }
.eq-text h4 { font-size: 1.5rem; color: #0097a7; border-bottom: 3px solid #e0f7fa; display: inline-block; margin-bottom: 20px; }

/* =================================================
   6. アクセス・診療時間表
   ================================================= */
.address-text { font-size: 1.1rem; font-weight: bold; color: #0097a7; margin-bottom: 5px; }
.tel-text { font-size: 1.4rem; color: #0097a7; font-weight: bold; }
.tel-text a { color: #0097a7; text-decoration: none; }

/* 地図の囲い */
.map-wrapper { 
  margin-top: 30px; border: 2px solid #b2ebf2; border-radius: 15px; 
  overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.sub-title { font-size: 1.3rem; color: #0097a7; margin: 40px 0 15px; }

/* 診療時間表の囲い */
.table-container { 
  max-width: 900px; margin: 0 auto; border-radius: 15px; 
  overflow: hidden; border: 2px solid #4dd0e1; 
}
.schedule-table { width: 100%; border-collapse: collapse; text-align: center; background: #fff; }
.schedule-table thead tr { background: #4dd0e1; color: #fff; }
.schedule-table th, .schedule-table td { padding: 15px 10px; border: 1px solid #e0f7fa; }
.schedule-table tbody th { background: #f0faff; color: #0097a7; font-weight: normal; }
.schedule-table td { color: #0097a7; font-weight: bold; font-size: 1.6rem; }
.schedule-table td.off { color: #ccc; }

/* =================================================
   7. フッター・TOPボタン（透過）
   ================================================= */
#footer { background: #0097a7; color: #fff; padding: 40px 0; text-align: center; font-size: 0.9rem; }

#fixed-pagetop {
  position: fixed; bottom: 25px; right: 25px; 
  background: rgba(255, 255, 255, 0.85); color: #0097a7; border: 2px solid #4dd0e1; 
  padding: 14px 45px; border-radius: 50px; text-decoration: none; 
  font-size: 14px; font-weight: bold; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 
  z-index: 1000; transition: 0.3s;
}
#fixed-pagetop:hover { background: #f0faff; transform: translateY(-3px); }


/* =================================================
   8. スマホ対応
   ================================================= */
@media screen and (max-width: 850px) {
  /* 全体の余白調整 */
  section { padding: 40px 0 !important; }
  .inner-wrap, .innerS { padding: 0 15px !important; width: 100% !important; }

  /* ヘッダーの固定解除とロゴ調整 */
  #header { 
    position: relative !important; top: 0 !important; right: 0 !important; 
    width: 100% !important; border-radius: 0 !important; padding: 15px !important; 
    box-shadow: none !important; border-bottom: 1px solid #e0f7fa;
  }
  #header h1 img { width: 220px !important; }

  /* ハンバーガーメニュー */
  #menuWrap { 
    display: block !important; position: absolute !important; top: 25px; right: 20px; z-index: 1001; 
  }
  #menuBtn {
    position: relative; display: block !important; width: 30px; height: 2px; 
    background: #00bfff !important; transition: 0.3s;
  }
  #menuBtn::before, #menuBtn::after {
    content: "" !important; position: absolute; width: 30px; height: 2px; 
    background: #00bfff !important; transition: 0.3s; left: 0;
  }
  #menuBtn::before { top: -8px !important; }
  #menuBtn::after { top: 8px !important; }

  /* */
  #menuBtn.close { background: transparent !important; }
  #menuBtn.close::before { top: 0 !important; transform: rotate(45deg) !important; }
  #menuBtn.close::after { top: 0 !important; transform: rotate(-45deg) !important; }

  /*  */
  .profile-container, .eq-card { 
    flex-direction: column !important; gap: 25px !important; padding: 20px !important; 
  }
  .profile-image, .eq-img, .eq-text { width: 100% !important; flex: none !important; }
  .eq-card:nth-child(even) { flex-direction: column !important; }

  /*  */
  .table-container { 
    overflow-x: auto !important; -webkit-overflow-scrolling: touch; 
    width: 100% !important; margin: 20px 0 !important; 
  }
  .schedule-table { min-width: 600px !important; } /* 指でスライドさせるための幅 */
  .schedule-table td { font-size: 1.2rem !important; }

  /*  */
  #fixed-pagetop { padding: 10px 25px !important; bottom: 15px !important; right: 15px !important; font-size: 12px !important; }
}