/* メインタイトル */
.title{
    font-size: 40px;
    line-height: 1.15;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #ffffff; 
    background-color: #3498db; 
    font-family: 'Arial', sans-serif; 
    text-align: center; 
    padding: 10px; 
    border-radius: 10px; 
}
/* 表示週変更 日付表示部分のラベル*/
.displayDateLabel {
    font-size: large;
}
/* 予約テーブル全体 */
table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
/* 予約テーブルのヘッダー、セル */
th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
    word-wrap: break-word;
    position: relative; /* セル全体を相対位置に設定 */
}
/* 予約テーブルのカスタムセル 時間と予約状況を表示するセル */
.custom-cell {
    width: 100px;
    height: 60px;
    padding: 0;
    position: relative;
}
/* カスタムセル内の右上に配置される要素（時間） */
.custom-cell .top-right {
    position: absolute;
    top: 5px;
    right: 3px;
}
/* カスタムセル内の左下に配置される要素（予約者名） */
.custom-cell .bottom-left {
    position: absolute;
    bottom: 3px; 
    left: 3px;
}
/* カスタムセル内の斜め線 予約不可や区切りを表示する場合 */
.custom-cell .diagonal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom left, transparent 49%, black 50%, transparent 51%);
}
/* 予約テーブルの左端の固定列（時間帯表示） */
.fixed {
    position: sticky;
    left: 0;
    height: 54px;
    font-weight: bold;
    font-size: 11px;
    background-color: #fff;
    z-index: 2;
}
/* 前の週、次の週切替ボタン */
.changeWeekButton {
    margin: 10px 0px 10px 0px;
    font-size: large;
}
/* クリック可能なセル（予約可能時間帯） */
td.clickable {
    cursor: pointer;
}
/* クリック可能なセルのホバー時 */
td.clickable:hover {
    background-color: orange; /* ホバー時の色 */
}
/* フォームの各入力グループ（ラベルと入力欄） */ 
.form-group {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    margin-right: 20px;
}
/* フォームグループ内の入力欄とセレクトボックス */
.form-group input, .form-group select {
    flex: 1;
}
/* 予約ボタンなどのボタン共通 */
.btn {
	text-align: center;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 10px 4px;
	font-weight: bold;
    font-size: 15px;
	border: 2px solid #27acd9;
	background: #27acd9;
	color: #fff;
	transition: 0.5s;
}
/* ボタンのホバー時 */
.btn:hover {
	color: #27acd9;
	background: #fff;
}
/* ダイアログの予約確認項目のテキスト */
.confirm-text {
    margin-top: 20px; 
    margin-bottom: 20px; 
    font-weight: bold;
}
/* 面談者、予約日時のタイトルテキスト */
.item-title {
    font-size: 25px; 
    display: inline-block; 
    border-bottom: 1px solid red; 
    margin-top: 20px;
}
/* iOSの自動拡大機能で入力項目が拡大しないようにフォントサイズを16px以上とする */
input[type="text"],
input[type="number"],
input[type="email"],
textarea {
  font-size: 16px;
}
/* 問い合わせ項目（電話とメール）の表示部分 */
#inquiry {
    display: flex;
    flex-direction: column; /* 縦に配置 */
}
/* 中央揃えテキスト */
.text-center {
    text-align: center;
}
/* フォントサイズ x-large */
.font-x-large {
    font-size: x-large;
}
/* フォントサイズ15px */
.font-size-15 {
    font-size: 15px;
}
/* 左端から30px空ける（ダイアログなど） */
.ml-30 {
    margin-left: 30px;
}
/* ダイアログの枠線 */
dialog {
    border-width: 1px;
    border-style: solid;
}
/* ダイアログの枠線の色を指定 */
#custom-dialog,
#check-reservation-dialog {
    border-color: gray;
}
#error-dialog {
    border-color: red;
}
#ok-dialog {
    border-color: blue;
}
/* スマホ画面用のレスポンシブ対応 */
@media screen and (max-width: 930px) {
    th {
        padding: 4px;
        font-size: 12px;
    }
    td {
        padding: 4px;
        font-size: 10px;
    }
    table {
        font-size: 12px;
    }
    td span {
        font-size: 30px;
    }
  }