@charset "utf-8";
  .container {
    width: 98%; /* 画面の98% */
    margin: 0 auto;
  }
  .month-display {
  text-align: center; 
  font-size: larger; 
  margin-bottom: 1px; 
  font-family: 'HGP創英角ﾎﾟｯﾌﾟ体'; 
  letter-spacing: 0.5em; 
  }
  
  table {
    border-collapse: collapse;
    width: 80%; /* 幅を画面の90%に設定 */
    margin: 0 auto; /* テーブルを中央揃えにする */
    font-family: Arial, sans-serif; /* テーブル全体のフォントを設定 */
    font-size: 18px; /* テーブル全体のフォントサイズを設定 */
	/*table-layout: fixed; /* 列幅を固定 */
    background-color: #f5deb0; /* テーブル全体の背景色 */
}
/* テーブルのセルスタイル */
th, td {
    border: 1px solid #000;
    padding: 2px;
    text-align: center;
    font-family: Arial, sans-serif; /* フォントを統一 */
    font-size: 14px; /* フォントサイズを統一 */
    font-weight: bold; /* フォントを太字に設定 */
	line-height: 1.2; /* 行間を狭くする */
	background-color: #fafada; /* テキストを折り返す */
}
.calendar-cell {
  width: 120px; /* 列幅を調整 */
  height: 60px; /* 行幅を調整 */
  text-align: center; /* 中央揃え */
  vertical-align: middle; /* 縦方向中央揃え */
}
.date-row-cell {
  height: 20px; /* 曜日と同じ高さの半分に設定 */
}
/* 各列の背景色を設定 */
th:nth-child(1), td:nth-child(1) {
  background-color: #f5deb0; /* 日曜日の背景色 */
}
th:nth-child(3), td:nth-child(3) {
  background-color: #f5deb0; /* 火曜日の背景色 */
}
th:nth-child(5), td:nth-child(5) {
  background-color: #f5deb0; /* 木曜日の背景色 */
}
th:nth-child(7), td:nth-child(7) {
  background-color: #f5deb0; /* 土曜日の背景色 */
}
/* ヘッダー全体のコンテナ */
.header-container {
  display: flex; /* フレックスボックスで横並びに配置 */
  justify-content: space-between; /* 要素間のスペースを均等に配置 */
  align-items: center; /* 垂直方向を中央揃え */
  padding: 5px 5px; /* 内側の余白を設定 */
}
/* ナビゲーション全体のスタイル */
.info-nav {
  padding: 10px 20px; /* 内側の余白を設定 */
 margin: 10px auto; /* 上下の余白を設定し中央揃え */
 width: 90%; /* 幅を画面の90%に設定 */
 text-align: center; /* テキストを中央揃え */
 font-family: Arial, sans-serif; /* フォントを統一 */
 font-size: 18px; /* フォントサイズを設定 */
font-weight: bold; /* 太字 */
}
/* oyanameのスタイル */
.oyaname {
  font-size: 20px; /* フォントサイズを設定 */
  font-weight: bold; /* 太字に設定 */
  color: #333; /* テキストの色 */
  font-family: Arial, sans-serif; /* フォントを統一 */
}
/* updateのスタイル */
.update {
  font-size: 14px; /* フォントサイズを設定 */
  font-weight: bold; /* 太字に設定 */
  color: #666; /* テキストの色 */
  font-family: Arial, sans-serif; /* フォントを統一 */
}
/* ロゴ画像のスタイル */
.logo {
  width: 200px; /* 幅を固定 */
  height: auto; /* 高さを自動調整 */
}
.logo-container {
  display: flex;
  justify-content: center; /* 水平方向に中央揃え */
  align-items: center; /* 垂直方向に中央揃え */
  margin: 5px 0; /* 上下の余白を設定 */
}

/* change-container全体のスタイル */
.change-container {
  display: flex; /* 横並びに配置 */
  align-items: center; /* 垂直方向を中央揃え */
  justify-content: center; /* 水平方向を中央揃え */
  gap: 80px; /* 要素間のスペース */
  margin: 20px 0; /* 上下の余白 */
  justify-content: center; /* 左右に要素を配置 */
}
/* ボタン画像のスタイル */
.button-image {
  width: 80px; /* 幅を固定 */
  height: auto; /* 高さを自動調整 */
  display: block; /* ブロック要素として表示 */
  transition: transform 0.3s ease; /* ホバー時のアニメーション */
}
.button-link:hover .button-image {
  transform: scale(1.1); /* ホバー時に拡大 */
}
/* ボタンリンクのスタイル */
.button-link {
  text-decoration: none; /* 下線を削除 */
}
/* ナビゲーション全体のスタイル */
.info-nav {
  padding: 10px 20px; /* 内側の余白を設定 */
 margin: 10px auto; /* 上下の余白を設定し中央揃え */
 width: 90%; /* 幅を画面の90%に設定 */
 text-align: center; /* テキストを中央揃え */
 font-family: Arial, sans-serif; /* フォントを統一 */
 font-size: 18px; /* フォントサイズを設定 */
font-weight: bold; /* 太字 */
}
.auto-resize-box {
  display: inline-block; /* コンテンツに応じて幅を自動調整 */
  padding: 2px; /* 内側の余白を設定 */
  border: 1px solid #000; /* 黒線で囲む */
  background-color: #fff5ee; /* 背景色を設定 */
  font-family: Arial, sans-serif; /* フォントを統一 */
  font-size: 18px; /* フォントサイズを設定 */
font-weight: bold; /* 太字 */
  line-height: 1.5; /* 行間を調整 */
  max-width: 90%; /* 最大幅を設定（レスポンシブ対応） */
  position: absolute; /* 絶対位置を指定 */
   left: 50%; /* 水平方向の中央揃え */
  transform: translate(-50%, -50%); /* 中央に配置するための補正 */
  box-sizing: border-box; /* パディングとボーダーを含めてサイズを計算 */
}
/* 日列と曜列が赤字になるスタイル */
.highlight-red {
  color: red; /* 赤字に設定 */
  font-weight: bold; /* 太字に設定 */
  text-align: center; /* テキストを中央揃え */
}ーーーー
/* 日付のスタイル */
.highlight-day {
  color: blue; /* 青色で表示 */
  font-weight: bold; /* 太字 */
}

/* 病院名のリンクスタイル */
.hospital-link {
  text-decoration: none; /* 下線を削除 */
}

.highlight-hospital {
  color: red; /* 赤色で表示 */
  font-weight: bold; /* 太字 */
}

/* イベントのスタイル */
.highlight-event {
  color: red; /* 赤色で表示 */
  font-weight: bold; /* 太字 */
}