/* ==========================*/
/* 共通CSS          */
/* 作成日：2025/9/27         */
/*========================== */

html {
  overflow-y: scroll; /* 常に縦スクロールバーを確保（レイアウトのため） */
}

body {
  font-family: sans-serif;
  margin: 0;
  line-height: 1.6;
  background: #fff;   /* 背景は白ベース */
  color: #333;        /* 文字色は濃いグレー */
}

/* ==========================
   ヘッダー
   ========================== */
/* ヘッダー全体 */
.site-header {
  position: fixed;          /* 常に画面上部に固定 */
  top: 0;                   /* 画面上から0px */
  left: 0;
  width: 100%;              /* 横幅いっぱい */
  background: #006699;  /* 落ち着いたブルー */
  color: #fff;
  border-bottom: 1px solid #ddd;
  z-index: 1000;            /* 他の要素より前面に出す */
}
/* ヘッダー内の配置 */
.header-container {
  max-width: 100%;
  margin: 0;  /* 中央寄せ解除 */
  display: flex;
  align-items: center;
/*  justify-content: space-between;*/
  padding: 10px 10px;
}

/* ロゴ全体を横並びに固定 */
.logo {
  display: flex;           /* 横並び配置 */
  align-items: baseline;   /* 下揃え（医療法人を少し小さくしてもズレにくい） */
  gap: 5px;                /* 文字間の固定スペース */
  white-space: nowrap;     /* 強制改行を防ぐ */
}

/* ヘッダー内のロゴ画像 */
.logo-link {
  display: flex;
  align-items: center;
  margin-right: 50px; /* ロゴと文字の間に余白 */
}

.logo-img {
  height: 85px; /* 適宜調整 */
  width: auto;
  margin-right: -30px; /* 文字とロゴの隙間を調整 */
}
/* 医療法人を小さめに */
.logo .corp {
  font-size: 1.0rem;
  color: #fff;
}

/* 松崎内科を大きめに */
.logo .clinic-name {
  font-size: 1.6rem;
  font-weight: bold;
  color: #fff;
}

.logo-link-text {
  text-decoration: none; /* 下線なし */
  color: inherit;        /* 元の文字色を継承 */
  display: inline-block; /* クリック可能範囲を調整しやすく */
}

.logo-link-text:hover {
  opacity: 0.8; /* ホバー時に少し反応させる（任意） */
}

/* ==========================
   ナビゲーション
   ========================== */
/* ナビゲーション全体 */
.main-nav {
  display: flex;             /* 横並び */
  justify-content: center;
  gap: 0;                    /* gapは使わずにborderで区切りを作る */
  overflow: hidden;          /* はみ出しを隠す */
  width: 100%; 
}

/* ハンバーガーボタン非表示（PC用） */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  position: absolute;
  top: 12px;
  font-size: 1.5rem;
  color: #fff;
  cursor: pointer;
}
/* ハンバーガーの下のメニュー文言デフォルトでは非表示 */
.menu-label {
  display: none;
  position: absolute;
  top: 68px;  /* レイアウト崩れやすいかも */
  right: 10px;  
  font-size: 0.8rem;
  color: #fff;
  margin: 5px 0 10px 0;  /* 上下に余白 */
}

/* ==========================
   レスポンシブ対応（スマホ）
   ========================== */
@media (max-width: 768px) {
   .menu-label {             /* "メニュー" */
     display: block;
   }

.main-nav {
    position: absolute;
    top: 60px;
    right: 0;
    background: #006699;
    flex-direction: column;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    border-left: 1px solid #ddd;
    transition: max-height 0.3s ease;
  }

  .main-nav.active {
    max-height: 500px; /* 開いたときの高さ（十分に大きく） */
  }
  /* ハンバーガー表示 */
  .nav-toggle {
    position: absolute;
    right: 10px;      /* 右端に配置 */
    font-size: 3.0rem;
    display: block;
  }
  /* ナビ表示用クラス */
  .main-nav.active {
    max-height: 500px;
    display: flex;
  }
}
.main-nav a {
  display: flex;              /* 中身をflexで揃える */
  align-items: center;        /* 縦方向の中央揃え */
  justify-content: center;    /* 横方向も中央揃え */
  text-align: center;        /* テキストを中央に */
  padding: 20px 20px;
  text-decoration: none; /* 下線を消す */
  border-right: 1px solid #ddd; /* 区切り線を右側に付ける */
  color: #fff;
  font-size: 1rem;
  transition: background 0.3s, color 0.3s;
}
/* ハンバーガーメニュー押下時の表示項目 */
@media (max-width: 768px) {
   .main-nav a  {   
     font-size: 1.3rem;          
     border-bottom: 1px solid #ccc;   /* ← 罫線（色変更OK） */
   }
   }

/* 最後の要素だけ右の線を消す */
.main-nav a:last-child {
  border-right: none;
}

.main-nav a:hover {
  color: #0077cc;
}

/* コンテンツがヘッダーに隠れないように余白を付ける */
main {
  margin-top: 80px;  /* ヘッダーの高さ分だけ下げる */
}

/* ==========================
   メインコンテナ
   ========================== */
.container {
  max-width: 900px;  /* 本文の最大幅を制御 */
  margin: 20px auto;
  padding: 0 15px;
}
/* ==========================
   ホーム画面 病院画像
   ========================== */
.main-img {
  width: 360px;
  height: 360px;
  object-fit: cover;   /* アスペクト比を維持してトリミング */
}

/* キャプション */
.caption {
  position: absolute;
  bottom: 10px;
  background: rgba(0,0,0,0.4);
  color: #fff;
  padding: 5px 12px;
  border-radius: 5px;
}
/* ==========================
   スライドショー
   ========================== */
.slideshow {
  position: relative;
  max-width: 100%;
  height: 400px;
  margin: 100px auto 10px;  /* ヘッダー余白 + 下余白 */
  overflow: hidden;
  border-radius: 10px;
}

/* スライドを重ねる */
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 1s ease;
}

.slide.active {
  opacity: 1;
}

/* スライド内画像 */
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

/* キャプション */
.caption {
  position: absolute;
  bottom: 50px;              /* ドットより上に配置 */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  padding: 5px 12px;
  border-radius: 5px;
  font-size: 16px;
  z-index: 5;
}

/* ボタン（左右） */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px;
  color: white;
  font-size: 24px;
  font-weight: bold;
  user-select: none;
  background: rgba(0,0,0,0.3);
  border-radius: 5px;
  z-index: 5;
}

.prev:hover, .next:hover {
  background: rgba(0,0,0,0.6);
}

.prev { left: 10px; }
.next { right: 10px; }

/* ドット */
.dots {
  position: absolute;
  bottom: 15px;          /* スライド下から15px上 */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 10;
}

.dot {
  cursor: pointer;
  height: 12px;
  width: 12px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.3s;
}

.dot.active-dot {
  background-color: #006699;
}

/* ==========================
   レスポンシブ対応
   ========================== */
@media (max-width: 768px) {
  .slideshow {
    height: 300px;  /* スマホ用に少し低く */
  }

  .caption {
    font-size: 14px;
    bottom: 45px;   /* ドットとの間隔を調整 */
  }

  .prev, .next {
    font-size: 20px;
    padding: 8px;
  }

  .dot {
    height: 10px;
    width: 10px;
    margin: 0 4px;
  }
}


/* ==========================
  診療科目
   ========================== */
.departments {
  border-top: 2px solid #ccc;    /* 上罫線 */
}

.departments h2 {
  margin: 20px auto;        /* 上下に余白をつけてセクションを区切る */
  max-width: 800px;         /* 横幅を最大800pxに制限（スマホでは100%表示される） */
  padding: 0 15px;          /* スマホ時に左右に余白を追加 */
  text-align: center;       /* セクション全体を中央寄せ */
  font-size: 1.8rem;        /* 見出しを少し大きめに */
  margin-bottom: 15px;      /* 表との間に余白を追加 */
  color: #006699;           /* サイトのテーマカラーに合わせる */
}

.departments-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 中央寄せ */
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .departments-grid {
    grid-template-columns: repeat(2, 1fr); /* スマホは2列 */
  }
}
/* 592PXぐらいで2列が保てないため600で1列にするようにする。 */
@media (max-width: 600px) {
  .departments-grid {
    grid-template-columns: 1fr; /* さらに小さい画面は1列 */
  }
}

/* カード風デザイン */
.department-card {
  background: #f9f9f9;              /* 薄いグレー背景 */
  border: 1.5px solid #ddd;           /* 枠線 */
  border-radius: 10px;              /* 少し丸く */
  padding: 15px;                    /* 内側余白 */
  width: 240px;                     /* カード幅を固定（中央揃えが崩れない） */
  box-shadow:
   0 1px 0 #e0e0e0,         /* 枠の下に淡い線 */
   0 2px 6px rgba(0,0,0,0.05); /* ほんのり影 */
  text-align: center;               /* 文字を中央揃え */
  transition: transform .2s ease, box-shadow .2s ease;
}
.department-card p {
 text-align: left;               /* 文字を左揃え */
}

.department-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.department-card h3 {
  color: #006699; /* 青系で見出しを強調 */
  margin-top: -3px;
  margin-bottom: -10px; /* 余白を削る */
  font-size: 1.3rem; /* 少し大きめの文字 */
}
/* --- 画面幅480px以下（縦1列になる時）だけカードを広げる --- */
@media (max-width: 600px) {
  .department-card {
    width: 80%;     /* 画面の90%まで広げる */
    max-width: 450px;  /* 最大幅も指定すると崩れにくい */
  }
}

/* ==========================
   診療時間セクション
   ========================== */
.schedule {
  margin: 40px auto;        /* 上下に余白をつけてセクションを区切る */
  max-width: 800px;         /* 横幅を最大800pxに制限（スマホでは100%表示される） */
  padding: 0 5px;          /* スマホ時?に左右に余白を追加 */
  text-align: center;       /* セクション全体を中央寄せ */
  border-top: 2px solid #ccc;    /* 上罫線 */
}

.schedule h2 {
  font-size: 1.8rem;        /* 見出しを少し大きめに */
  margin-bottom: 20px;      /* 表との間に余白を追加 */
  color: #006699;           /* サイトのテーマカラーに合わせる */
}

/* ==========================
   診療時間の表
   ========================== */
.schedule-table {
  width: 100%;              /* 表を横幅いっぱいに広げる */
  border-collapse: collapse;/* 枠線が二重にならないように */
  margin: 0 auto;           /* センターに配置 */
  font-size: 1rem;          /* 標準的な文字サイズ */
  
}

.schedule-table th,
.schedule-table td {
  border: 2px solid #ddd;   /* 薄いグレーの枠線 */
  padding: 10px;            /* 内側の余白 */
  text-align: center;       /* 文字を中央揃え */
}

.schedule-table th {
  background: #f2f8fc;      /* 見出しセルに薄い水色背景 */
  color: #006699;           /* 見出し文字はテーマカラー */
}

.schedule-table td {
  font-weight: bold;        /* ●や×を太字で見やすく */
}

/* 曜日（1列目）は背景を変えて見やすくする */
.schedule-table td:first-child {
  background: #f9f9f9;      /* 薄いグレー */
  font-weight: normal;      /* 通常の太さ */
}

/* 注意書き */
.note {
 text-align: left;         /* テキストは左寄せ */
  margin: 10px auto 0 auto; /* 上余白＋中央に寄せる */
  font-size: 0.9rem;
  color: #666;
  max-width: 600px;         /* ★ 横幅を制限 → 左寄せだけど中央に見える */
  padding: 0 10px;          /* 左右に軽く余白を追加（調整可） */
}

@media (max-width: 767px) {
  .schedule-table {
    width: 100%;
    margin: 0 auto;            /* 中央配置 */
  }

  .schedule-table th,
  .schedule-table td {
    padding: 4px 2px;          /* パディングを小さく */
    text-align: center;
  }
  
}
/* ==========================
   お知らせ欄
   ========================== */
  /* お知らせ（ホーム画面用） */
.news_home { 
  margin: 100px auto 0 auto;   /* 上 / 右auto / 下0 / 左auto */
  max-width: 800px;            /* 最大幅を800pxに制限 */
  padding: 0 15px;             /* 左右に余白 */
  text-align: left;            /* 左揃え */
  border-top: 2px solid #ccc;    /* 上罫線 */
}

/* お知らせ（ホーム画面用） 見出し */
.news_home h2 {
  font-size: 1.8rem;      /* 見出しを大きく */
  color: #006699;         /* 青系の文字色 */
  margin-bottom: 15px;    /* 下に余白 */
  text-align: center;     /* 中央揃え */
}


   /* お知らせ全体のレイアウト */
.news { 
  margin: 130px auto 0 auto;   /* 上 / 右auto / 下0 / 左auto */
  max-width: 800px;            /* 最大幅を800pxに制限 */
  padding: 0 15px;             /* 左右に余白 */
  text-align: left;            /* 左揃え */
}

/* お知らせ見出し(お知らせページ) */
.news h2 {
  font-size: 1.8rem;      /* 見出しを大きく */
  color: #006699;         /* 青系の文字色 */
  margin-bottom: 15px;    /* 下に余白 */
  text-align: center;     /* 中央揃え */
}

/* お知らせリスト全体 */
.news-list {
  list-style: none;  /* 箇条書きの●を消す */
  padding: 0;        /* 内側余白なし */
  margin: 0;         /* 外側余白なし */
}

/* お知らせ1件ごとの枠 */
.news-list li {
  border-bottom: 1px solid #ddd; /* 下に細い罫線 */
  padding: 8px 0;               /* 上下に余白 */
}

/* 日付のデザイン */
.news-date {
  display: inline-block;  /* 横並びにする */
  width: 120px;           /* 固定幅で揃える */
  color: #666;            /* グレー文字 */
  font-size: 0.9rem;      /* 少し小さめ */
}

/* 件名リンク */
.news-title {
  color: #006699;          /* 青色文字 */
  text-decoration: none;   /* 下線なし */
}

/* 件名リンクにマウスを載せたとき */
.news-title:hover {
  text-decoration: underline;  /* 下線を表示 */
}

/* 「もっと見る」リンク */
.more {
  text-align: right;   /* 右揃え */
  margin-top: 10px;    /* 上に余白 */
}


/* ==========================
  住所（罫線）
   ========================== */
/* 画面いっぱいに線を入れる */
.location {
  margin: 40px auto;        /* 上下に余白をつけてセクションを区切る */
  max-width: 800px;         /* 横幅を最大800pxに制限（スマホでは100%表示される） */
  padding: 15px;          /* スマホ時に左右に余白を追加 */
  text-align: center;       /* セクション全体を中央寄せ */
  border-top: 2px solid #ccc;    /* 上罫線 */
  font-size: 1.3rem; /* 少し大きめの文字 */
}
.location h2 {
  font-size: 1.8rem;        /* 見出しを少し大きめに */
  margin-bottom: 0px;      /* 表との間に余白を追加 */
  color: #006699;           /* サイトのテーマカラーに合わせる */
}

/* ==========================
   電話番号（罫線）
   ========================== */
/* 画面いっぱいに線を入れる */
.tel-number {
  margin: 40px auto;        /* 上下に余白をつけてセクションを区切る */
  max-width: 800px;         /* 横幅を最大800pxに制限（スマホでは100%表示される） */
  padding: 0 15px;          /* スマホ時に左右に余白を追加 */
  text-align: center;       /* セクション全体を中央寄せ */
  border-top: 2px solid #ccc;    /* 上罫線 */
  font-size: 1.3rem; /* 少し大きめの文字 */
}
.tel-number h2 {
  font-size: 1.8rem;        /* 見出しを少し大きめに */
  margin-bottom: 0px;      /* 表との間に余白を追加 */
  color: #006699;           /* サイトのテーマカラーに合わせる */
}

/* アクセスセクション（Google map） */
.map-section {
  width: 100%;
  margin: 10px 0;
  text-align: center;
  border-top: 2px solid #ccc;    /* 上罫線 */

}

/* マップをレスポンシブに */
.map-container {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-radius: 12px;
  overflow: hidden;
}

.map-container iframe {
  width: 100%;
  height: 400px;  /* 高さは自由に調整 */
  border: 0;
}

/* ==========================
   医院長プロフィール
   ========================== */

.profile {
  margin: 40px auto;           /* 上下に余白をとり、中央寄せ */
  max-width: 800px;            /* 最大幅を800pxに制限 */
  padding: 0 15px;             /* 左右に余白 */
  text-align: left;            /* 左揃え */
}
.profile-title { 
  margin: 130px auto 0 auto;   /* 上 / 右auto / 下0 / 左auto */
  max-width: 800px;            /* 最大幅を800pxに制限 */
  padding: 0 15px;             /* 左右に余白 */
  text-align: left;            /* 左揃え */
}
.profile-title h2{
  font-size: 1.8rem;      /* 見出しを大きく */
  color: #006699;         /* 青系の文字色 */
  margin-bottom: 15px;    /* 下に余白 */
  text-align: center;     /* 中央揃え */
}
.profile-img {
  width: 100%;               /* 横幅いっぱいに */
  height: auto;              /* 縦横比キープ */
  border-radius: 12px;       /* 角丸で柔らかく */
  box-shadow: 0 4px 20px rgba(0,0,0,0.1); /* 上品な影 */
  margin-bottom: 20px;       /* 下に余白 */
  object-fit: cover;         /* トリミングして美しく配置 */
  margin: 20px auto;
  margin-top: 20px; /* 画像上の余白 */
}


/* ==========================
   アクセスページ用
   ========================== */

/* アクセス見出し */
.transport { 
  margin: 130px auto 0 auto;   /* 上 / 右auto / 下0 / 左auto */
  max-width: 800px;            /* 最大幅を800pxに制限 */
  padding: 0 15px;             /* 左右に余白 */
  text-align: left;            /* 左揃え */
  width: fit-content;
  font-size: 1.3rem; /* 少し大きめの文字 */
}

.transport h2 {
  font-size: 1.8rem;      /* 見出しを大きく */
  color: #006699;         /* 青系の文字色 */
  margin-bottom: 15px;    /* 下に余白 */
  text-align: center;     /* 中央揃え */
}

/* ===============================
   駐車場画像セクション
   =============================== */

 .parking {  
  margin: 40px auto;        /* 上下に余白をつけてセクションを区切る */
  max-width: 800px;         /* 横幅を最大800pxに制限（スマホでは100%表示される） */
  padding: 0 15px;          /* スマホ時に左右に余白を追加 */
  text-align: center;       /* セクション全体を中央寄せ */
  border-top: 2px solid #ccc;    /* 上罫線 */
  font-size: 1.3rem; /* 少し大きめの文字 */

}
.parking h2 {  
font-size: 1.8rem;        /* 見出しを少し大きめに */
margin-bottom: 0px;      /* 表との間に余白を追加 */
color: #006699;           /* サイトのテーマカラーに合わせる */

}
.parking-img {
  width: 100%;         /* 画面幅に合わせて縮小 */
  height: auto;        /* 比率を保つ */
  border-radius: 8px;  /* 角を少し丸く */
  box-shadow: 0 2px 10px rgba(0,0,0,0.15); /* 軽い影で見やすく */
  margin-top: 10px;
}

/* アクセスページの「送迎車案内ページへ」せくしょん */

.shuttlebus-link {  
  margin: 40px auto;        /* 上下に余白をつけてセクションを区切る */
  max-width: 800px;         /* 横幅を最大800pxに制限（スマホでは100%表示される） */
  padding: 0 15px;          /* スマホ時に左右に余白を追加 */
  text-align: center;       /* セクション全体を中央寄せ */
  border-top: 2px solid #ccc;    /* 上罫線 */
  font-size: 1.3rem; /* 少し大きめの文字 */

}
.shuttlebus-link h2 {  
font-size: 1.8rem;        /* 見出しを少し大きめに */
margin-bottom: 0px;      /* 表との間に余白を追加 */
color: #006699;           /* サイトのテーマカラーに合わせる */

}

/* アクセスページの「送迎バス案内ページへ」ボタン */
.shuttlebus-link .btn-link {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 18px;
  border-radius: 6px;
  background: #2b7cff;
  color: white;
  text-decoration: none;
  font-weight: 600;
}

.shuttlebus-link .btn-link:hover {
  background: #1a5fd6;
}


/* ===============================
   送迎バス
   =============================== */
   .shuttlebus  {  
  margin: 130px auto 0 auto;   /* 上 / 右auto / 下0 / 左auto */
  max-width: 800px;         /* 横幅を最大800pxに制限（スマホでは100%表示される） */
  padding: 0 15px;          /* スマホ時に左右に余白を追加 */
  text-align: center;       /* セクション全体を中央寄せ */
  font-size: 1.3rem; /* 少し大きめの文字 */

}
.shuttlebus h2 {  
font-size: 1.8rem;        /* 見出しを少し大きめに */
margin-bottom: 20px;      /* 見出しの下に余白を追加 */
color: #006699;           /* サイトのテーマカラーに合わせる */
}
.shuttlebus-img {
  width: 100%;         /* 画面幅に合わせて縮小 */
  height: auto;        /* 比率を保つ */
  border-radius: 8px;  /* 角を少し丸く */
  box-shadow: 0 2px 10px rgba(0,0,0,0.15); /* 軽い影で見やすく */
  margin-top: 10px;
}
.shuttlebus h3 {  
 text-align: left;         /* テキストは左寄せ */
  margin: 15px auto 0 0px; /* 上余白＋中央に寄せる */
  font-size: 1.3rem;
  padding: 0 0px;          /* 左右に軽く余白を追加（調整可 ） */
}
.shuttlebus h4 {  
font-size: 1.4rem;        /* 見出しを少し大きめに */
}

.shuttlebus p {  
  text-align: left;         /* テキストは左寄せ */
  margin: 10px auto 15px 30px; /* 上余白＋中央に寄せる */
  font-size: 1.3rem;
  padding: 0 0px;          /* 左右に軽く余白を追加（調整可） */
 }
/* ===============================
   お問い合わせ
   =============================== */

 .contact {  
  margin: 130px auto 0 auto;   /* 上 / 右auto / 下0 / 左auto */
  max-width: 800px;         /* 横幅を最大800pxに制限（スマホでは100%表示される） */
  padding: 0 15px;          /* スマホ時に左右に余白を追加 */
  text-align: center;       /* セクション全体を中央寄せ */
  font-size: 1.3rem; /* 少し大きめの文字 */

}
.contact h2 {  
font-size: 1.8rem;        /* 見出しを少し大きめに */
margin-bottom: 0px;      /* 表との間に余白を追加 */
color: #006699;           /* サイトのテーマカラーに合わせる */
}
.contactattention p {
  text-align: left;         /* テキストは左寄せ */
  margin: 10px auto 0 auto; /* 上余白＋中央に寄せる */
  font-size: 0.9rem;
  max-width: 440px;         /* ★ 横幅を制限 → 左寄せだけど中央に見える */
  padding: 0 10px;          /* 左右に軽く余白を追加（調整可） */
}

/* ==========================
   お知らせ詳細（日付単位のページ）用
   ========================== */
.news_daily{
  margin: 40px auto;        /* 上下に余白をつけてセクションを区切る */
  max-width: 800px;         /* 横幅を最大800pxに制限（スマホでは100%表示される） */
  padding: 0 15px;          /* スマホ時に左右に余白を追加 */
  text-align: center;       /* セクション全体を中央寄せ */
  font-size: 1.3rem; /* 少し大きめの文字 */
}

.news_daily h2 { 
margin: 130px auto 0 auto;   /* 上 / 右auto / 下0 / 左auto */ 
max-width: 800px;         /* 横幅を最大800pxに制限（スマホでは100%表示される） */
padding: 0 15px;          /* スマホ時に左右に余白を追加 */
text-align: center;       /* セクション全体を中央寄せ */
font-size: 1.8rem;        /* 見出しを少し大きめに */
margin-bottom: 0px;      /* 表との間に余白を追加 */
color: #006699;           /* サイトのテーマカラーに合わせる */
}
.news_daily_date p { 
  font-size: 0.9rem;
  margin: 40px auto;           /* 上下に余白をとり、中央寄せ */
  max-width: 760px;            /* 最大幅を800pxに制限 */
  padding: 0 30px;             /* 左右に余白 */
  text-align: left;            /* 左揃え */
}
.news_daily p { 
margin: 40px auto 0 auto;   /* 上 / 右auto / 下0 / 左auto */ 
max-width: 800px;         /* 横幅を最大800pxに制限（スマホでは100%表示される） */
padding: 0 15px;          /* スマホ時に左右に余白を追加 */
text-align: center;       /* セクション全体を中央寄せ */
font-size: 1.1rem;        /* 見出しを少し大きめに */
margin-bottom: 0px;      /* 表との間に余白を追加 */
text-align: left;            /* 左揃え */
}

.news_daily-img {
  width: 100%;               /* 横幅いっぱいに */
  height: auto;              /* 縦横比キープ */
  border-radius: 12px;       /* 角丸で柔らかく */
  box-shadow: 0 4px 20px rgba(0,0,0,0.1); /* 上品な影 */
  margin-bottom: 20px;       /* 下に余白 */
  object-fit: cover;         /* トリミングして美しく配置 */
  margin: 20px auto;
  margin-top: 20px; /* 画像上の余白 */
}



/* ==========================
   フッター
   ========================== */
footer {
  background: #f2f2f2;   /* 薄いグレー */
  text-align: center;
  padding: 10px;
  margin-top: 40px;
  font-size: 0.9em;
  color: #666;
}