/* body全体のスタイル */
body{
    width: min(100% - 2rem, 960px);
    padding: 10px;
    max-width: 960px;
    margin-inline: auto;
    background-color: #f5f5f5;
}
p#style:before{
    content:"PC : ";
}
/* ヘッダー */
header {
    padding: 10px 0;
    background-color: #006bee;
    color: #ffffff;
    text-align: center;
}
/* タイトル名 */
h1{
    background-color: #0078d4; /* 背景色 */
    color: #FFFFF0;
}
/* html 入力画面 */
/* 名前 */
label.name{
    display: block;
    margin-top: 3%;
    margin-bottom: 1%;
}
/* 名前フィールド */
input.name{
    display: block; /* ブロックタイプ */
    width: 100%; /* サイズ */
    box-sizing:border-box; /* bodyと同じ大きさ */
    font-size: 16px; /* フォントサイズ */
    height: 32px;
}

/* 電話番号 */
label.tel{
    display: block;
    margin-top: 3%;
    margin-bottom: 1%;
}
/* 電話番号フィールド */
input.tel{
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    height: 32px;
}

/* メールアドレス */
label.email{
    display: block;
    margin-top: 3%;
    margin-bottom: 1%;
}
/* メールアドレスフィールド */
input.email{
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    height: 32px;
}

/* 日付 */
label.date{
    display: block;
    margin-top: 3%;
    margin-bottom: 1%;
}
/* 日付フィールド */
input.date{
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    height: 32px;
    height: 32px;
}

/* 時間 */
label.time{
    display: block;
    margin-top: 3%;
    margin-bottom: 1%;
}
/* 時間フィールド */
select.time{
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    height: 32px;
}


/* 日付を選択 */
input.select_date{
    display: block;
    margin-top: 10px;
    margin-bottom: 1%;
    background-color: #0075c2;
    border: #0075c2;
    border-radius: 10px;
    color: whitesmoke;
    width: 100px;
    height: 30px;
}
/* 確認画面 */
input.confirm_reservation{
    display: block;
    margin-top: 10px;
    margin-bottom: 1.5%;
    background-color: #e73562;
    border: #e73562;
    border-radius: 10px;
    color:whitesmoke;
    width: 100px;
    height: 30px;
}

/* 必須 */
.label-required{
    color: red;
}

/* 例文 */
div.placeholder{
    color: #808080;
    margin-top: 6px;
}

.submit_reservation{
    background-color: red;
}
/* 各入力フォーム エラーメッセージ */
p.error-message{

    margin-bottom: 6px;
}

/* 予約時間がないときのエラーメッセージ */
div.error-message{
    color: red;
    margin-bottom: 6px;
}



table{
    margin-top: 5%;
    width: 100%;
    text-align: center;
}
th{
    width: 60px;
    padding: 16px 12px;
    background: #DCDCDC;
    border: 3px solid #ced4da;
}
/* 入力欄 */
td{
    border: 1px solid #ced4da; /*枠線の太さ | 枠線の色*/
    padding-top: 0px;
    padding-right: 1px;
    padding-bottom: 0px;
    padding-left: 1px;
}

/* レスポンシブ対応（画面幅が600px以下の場合） */
/* メディアクエリ */
@media screen and (max-width: 768px) {
/* 768px以下の画面幅に対するスタイル */
header {
    padding: 10px 0;
    background-color: #2c7774;
    color: #ffffff;
    margin-inline: auto;
}
p#style:before{
    content:"タブレット : ";
}
}

/* 別のメディアクエリ */
@media screen and (max-width: 480px) {
/* 480px以下の画面幅に対するスタイル */
header {
    padding: 10px 0;
    background-color: #26d0c9;
    color: #ffffff;
    margin-inline: auto;
}
p#style:before{
    content:"スマホ : ";
}
}