/* HP-Main */
@charset "utf-8";

/* ヘッダー全体のコンテナ */
.header-container {
    display: flex; /* フレックスボックスで横並びに配置 */
    justify-content: space-between; /* 要素間のスペースを均等に配置 */
    align-items: center; /* 垂直方向を中央揃え */
    padding: 5px 5px; /* 内側の余白を設定 */
}

/* 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; /* フォントを統一 */
}
.month-display {
	display: flex;
    justify-content: center;
    align-items: center;
     font-family: 'HGP創英角ﾎﾟｯﾌﾟ体', sans-serif;
	font-weight: bold; 
	color: red; 
	font-size: 2rem;
    letter-spacing: 0.2em; /* 字間を空ける */
}
/* テーブル全体のスタイル */
table {
    border-collapse: collapse;
    width: 80%; /* 幅を画面の90%に設定 */
    margin: 0 auto; /* テーブルを中央揃えにする */
    font-family: Arial, sans-serif; /* テーブル全体のフォントを設定 */
    font-size: 18px; /* テーブル全体のフォントサイズを設定 */
	table-layout: fixed; /* 列幅を固定 */
}
/* テーブルのセルスタイル */
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; /* テキストを折り返す */
}
/* 1、3、5列に適用するスタイル */
table th:nth-child(1), table td:nth-child(1),
table th:nth-child(3), table td:nth-child(3),
table th:nth-child(5), table td:nth-child(5) {
	background-color: #f5deb0; /* 背景色を設定（例: 薄い青） */
}
table th:nth-child(2), table td:nth-child(2) {
	background-color: #fafada; /* 背景色を設定（例: 薄い青） */
}
/* 日列のスタイル */
td.day {
    font-weight: bold; /* 太字 */
    background-color: #f5deb0; /* 背景色を設定 */
}

/* 2段表示用のセルスタイル */
td.double-row {
    line-height: 1.5; /* 行間を調整 */
    white-space: normal; /* テキストを折り返す */
}

/* 行幅を調整 */
tr {
    height: auto; /* 行の高さを自動調整 */
}
/* 列幅の指定 */
table th:nth-child(1), table td:nth-child(1) { /* 日列 */
    width: 5%; /* 列幅を10%に設定 */
}

table th:nth-child(2), table td:nth-child(2) { /* 曜列 */
    width: 5%; /* 列幅を10%に設定 */
}

table th:nth-child(3), table td:nth-child(3) { /* 病院列 */
    width: 20%; /* 列幅を25%に設定 */
}

table th:nth-child(4), table td:nth-child(4) { /* 会場列 */
    width: 30%; /* 列幅を25%に設定 */
}

table th:nth-child(5), table td:nth-child(5) { /* 時間列 */
    width: 40%; /* 列幅を20%に設定 */
}
/* 自動調整ボックスを画面中央に配置 */
.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; /* 行間を調整 */
    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; /* 太字 */
}
/* ナビゲーション全体のスタイル */
.info-nav {
    margin: 5px auto; /* 上下の余白を設定し中央揃え */
    width: 90%; /* 幅を画面の90%に設定 */
    text-align: center; /* テキストを中央揃え */
    font-family: Arial, sans-serif; /* フォントを統一 */
    font-size: 18px; /* フォントサイズを設定 */
	font-weight: bold; /* 太字 */

}
/* ロゴ画像のスタイル */
.logo {
	display: block;
	margin: 0 auto;
    width: 175px; /* 幅を固定 */
    height: auto; /* 高さを自動調整 */
}
/* change-container全体のスタイル */
.change-container {
    display: flex; /* 横並びに配置 */
    align-items: center; /* 垂直方向を中央揃え */
    justify-content: center; /* 水平方向を中央揃え */
    gap: 80px; /* 要素間のスペース */
    margin: 10px 0; /* 上下の余白 */
	justify-content: center; /* 左右に要素を配置 */
 }
/* ボタンリンクのスタイル */
.button-link {
    text-decoration: none; /* 下線を削除 */
}
/* ボタン画像のスタイル */
.button-image {
    width: 100px; /* 幅を固定 */
    height: auto; /* 高さを自動調整 */
    display: block; /* ブロック要素として表示 */
    transition: transform 0.3s ease; /* ホバー時のアニメーション */
}
.button-image2 {
    width: 70px; /* 幅を固定 */
    height: auto; /* 高さを自動調整 */
    display: block; /* ブロック要素として表示 */
    transition: transform 0.3s ease; /* ホバー時のアニメーション */
}
.button-image3 {
    width: 80px; /* 幅を固定 */
    height: auto; /* 高さを自動調整 */
    display: block; /* ブロック要素として表示 */
    transition: transform 0.3s ease; /* ホバー時のアニメーション */
}
/* ボタン画像のホバー時のスタイル */
.button-link:hover .button-image {
    transform: scale(1.1); /* ホバー時に拡大 */
}

/* 各ボタンのスタイル */
.button {
    display: inline-block; /* ボタンをインラインブロックとして表示 */
    text-decoration: none; /* 下線を削除 */
}

/* ボタン画像のホバー時のスタイル */
.button:hover .button-image {
    transform: scale(1.1); /* ホバー時に拡大 */
}
/* 病院名のリンクスタイル */
.hospital-link {
    color: blue; /* リンクの色 */
    text-decoration: underline; /* 下線を表示 */
}

.hospital-link:hover {
    color: darkblue; /* ホバー時の色 */
    text-decoration: none; /* ホバー時に下線を削除 */
}