@charset "UTF-8";
/*=============================
 Responsive Design
 Since: 2026-03-12

 Breakpoints:
  1280px - 大型デスクトップ / 外部モニター
  1024px - タブレット横向き / 小型ノートPC
   768px - タブレット縦向き (iPad等)
   480px - スマホ横向き / 大型スマホ
   360px - スマホ縦向き (iPhone SE等)
==============================*/

/* 全サイズ共通：画像の最大幅制御 */
img {
  max-width: 100%;
  height: auto;
}

/*----------------------------------------------------------------------------------------
  1280px以下 - 大型デスクトップ / 外部モニター
  コンテナを中央に維持しつつ余白を調整
----------------------------------------------------------------------------------------*/
@media screen and (max-width: 1280px) {
  #container {
    max-width: 780px;
    margin: 0 auto;
  }
}

/*----------------------------------------------------------------------------------------
  1024px以下 - タブレット横向き / 小型ノートPC
  固定幅を解除し、流動レイアウトに切り替え
----------------------------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {

  #container {
    width: 100%;
    max-width: 780px;
    background-image: none;
  }
  #wrapper {
    width: 100%;
    margin: 0;
    padding: 0 15px;
    box-sizing: border-box;
  }

  /* ヘッダー */
  #headCol {
    width: 100%;
  }

  /* メインビジュアル */
  #main_visual {
    width: 100%;
    height: 0;
    padding-bottom: 43.8%; /* 320/730 アスペクト比維持 */
    background-size: cover;
  }

  /* メイン */
  #main {
    width: 100%;
    margin: 0;
    padding: 0;
    background-image: none;
  }

  /* h2の画像 */
  #contents h2 img {
    max-width: 100%;
    height: auto;
  }
}

/*----------------------------------------------------------------------------------------
  768px以下 - タブレット縦向き (iPad等)
  2カラム→1カラムに変更
----------------------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {

  /* ヘッダー：ロゴと電話番号を縦並びに */
  #headCol h1 {
    font-size: 11px;
    line-height: 1.4;
  }
  #headCol #pagetop {
    float: none;
    width: 100%;
    padding: 10px 0;
    text-align: center;
  }
  #headCol #rightbox {
    float: none;
    width: 100%;
    margin: 0;
    text-align: center;
  }

  /* サイドバー → コンテンツ上部に移動（1カラム化） */
  #leftCol {
    float: none;
    width: 100%;
    margin: 0 0 15px 0;
  }
  #leftCol .sideCol ul {
    display: flex;
    flex-wrap: wrap;
  }
  #leftCol .sideCol ul li {
    flex: 1 1 50%;
    box-sizing: border-box;
  }
  #leftCol .sideCol ul li img {
    width: 100%;
  }
  #leftCol .sidebnr ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  #leftCol .sidebnr ul li {
    flex: 1 1 48%;
    margin-bottom: 0;
  }
  #leftCol .sidebnr ul li img {
    width: 100%;
  }

  /* メインコンテンツ：幅100%に */
  #mainCol {
    float: none;
    width: 100%;
    margin: 0;
  }
  #contents {
    width: 100%;
  }

  /* 新着情報：日付と本文を縦並びに */
  #top #index dl dt {
    position: relative;
    width: auto;
    padding: 6px 5px 0;
    font-weight: bold;
  }
  #top #index dl dd {
    padding: 4px 5px 8px;
  }

  /* ごあいさつ：画像を上に */
  #greetArea .float_rimg {
    float: none;
    text-align: center;
    margin-bottom: 10px;
  }

  /* ボタンエリア：縦並びに */
  #top #btnArea ul li {
    float: none;
    width: 100%;
    text-align: center;
    margin-bottom: 8px;
  }
  #top #btnArea ul li img {
    width: 100%;
    max-width: 250px;
  }
  #top #btnArea ul li img.btnright {
    margin-right: 0;
  }

  /* アクセスエリア：マップと情報を縦並びに */
  #accessArea .float_l,
  #accessArea .float_r,
  .float_l.w_50,
  .float_r.w_50 {
    float: none !important;
    width: 100% !important;
    margin-bottom: 10px;
  }
  #accessArea .float_l img,
  .float_l.w_50 img {
    width: 100%;
    max-width: 300px;
    display: block;
    margin: 0 auto;
  }

  /* 診療時間テーブル */
  #clinicArea table {
    width: 100%;
    font-size: 90%;
  }
  #clinicArea table td img {
    width: 100%;
    max-width: 140px;
  }

  /* フッター */
  #footer {
    padding: 13px 10px;
  }
  #footer p {
    line-height: 2;
  }
}

/*----------------------------------------------------------------------------------------
  480px以下 - スマホ横向き / 大型スマホ (iPhone Plus, Pixel等)
  コンテンツをよりコンパクトに
----------------------------------------------------------------------------------------*/
@media screen and (max-width: 480px) {

  #wrapper {
    padding: 0 8px;
  }

  /* ヘッダー */
  #headCol h1 {
    font-size: 10px;
    padding: 3px 5px;
  }

  /* ナビ：1列に */
  #leftCol .sideCol ul li {
    flex: 1 1 100%;
  }

  /* ボタンエリア：幅いっぱいに */
  #top #btnArea ul li img {
    max-width: 100%;
  }

  /* 診療時間テーブル */
  #clinicArea table {
    font-size: 80%;
  }
  #clinicArea table th,
  #clinicArea table td {
    padding: 4px;
  }

  /* フッター：リンクを縦並びに */
  #footer p a {
    display: inline-block;
    margin: 2px 0;
  }
}

/*----------------------------------------------------------------------------------------
  360px以下 - 小型スマホ (iPhone SE, Galaxy S系等)
  最小画面への最適化
----------------------------------------------------------------------------------------*/
@media screen and (max-width: 360px) {

  #wrapper {
    padding: 0 5px;
  }

  /* ヘッダー */
  #headCol h1 {
    font-size: 9px;
  }
  #headCol #pagetop img {
    max-width: 150px;
  }

  /* サイドバナー：1列に */
  #leftCol .sidebnr ul li {
    flex: 1 1 100%;
  }

  /* 診療時間テーブル：さらにコンパクト */
  #clinicArea table {
    font-size: 70%;
  }
  #clinicArea table th,
  #clinicArea table td {
    padding: 2px;
  }

  /* フッター */
  #footer {
    font-size: 70%;
  }
}