/* =============== */
/* reservation.css */
/* WEB予約ページ専用スタイル */
/* =============== */

/* ページ全体の基本設定 */
/* bodyに reservation-page クラスが付与されている前提 */
body.reservation-page {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", Meiryo, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    /* shared.css のフォントを基本に */
    background: url(../img/shared/bg1.jpg);
    /* shared.css の背景を基本に */
    color: #2F2F2F;
    /* shared.css の基本文字色 */
    line-height: 1.7;
    /* 読みやすさを考慮した行間 */
    padding-top: 0;
    /* body自体のpadding-topは0 */
    text-align: left;
    /* PC表示では基本的に左寄せ */
}

/* ナビゲーションバー表示のためのスタイル調整 */
/* PC表示時 (shared.css の #belt.fixed のスタイルを参考に、最初から表示されるように調整) */
@media screen and (min-width: 768px) {
    header#header div#belt.nav-fixed {
        opacity: 1;
        /* 最初から不透明に */
        visibility: visible;
        /* 最初から見えるように */
        position: fixed;
        /* 画面上部に固定 */
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        /* 他の要素より手前に */
        background: url(../img/shared/bg2.jpg);
        /* 背景画像を指定 */
    }
}

/* スマホ表示時 (shared.css の #navigation のスタイルと共存できるように) */
/* #belt 自体はスマホでは特別な表示制御は shared.css にはないが、 */
/* ハンバーガーメニュー用の #navigation が fixed で表示されるため、 */
/* #belt は relative または static で良い場合が多い。 */
/* ここでは、PCと同じく固定にするか、あるいは relative にするかはデザイン次第。 */
/* 今回はPCのスタイルを基本とし、必要ならスマホ用に上書きする。 */
/* もしスマホで #belt を固定表示しない場合は、以下のコメントアウトを解除して調整 */
/*
@media screen and (max-width: 767.98px) {
    header#header div#belt.nav-fixed {
        position: relative;
        opacity: 1;
        visibility: visible;
    }
}
*/


/* 予約フォームのコンテンツ全体のラッパー */
.reservation-content-wrapper {
    /* PC表示時: ナビゲーションバーの高さ + 少しの余白 */
    /* shared.css の #belt の高さ(paddingや内容物による)を考慮。仮に約70px~90pxと想定 */
    padding-top: 100px;
    /* 例: ナビバーの高さが約70pxなら、100px程度の余白 */
    padding-bottom: 40px;
    /* フッターとの間に適切な余白 */
}

/* フォームセクション全体のコンテナ */
.reservation-form-container {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
    padding: 30px 40px;
    /* PCでの内部余白 */
    background-color: #ffffff;
    /* フォームエリアの背景色を白に */
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* ページタイトル */
.reservation-form-container .page-title {
    font-family: "Klee One", serif;
    /* shared.css の .btn-s1 a のフォントを参考に */
    font-size: 28px;
    color: #7F4F2A;
    /* ご指定の文字色 */
    text-align: center;
    /* 中央寄せ */
    margin-bottom: 15px;
    font-weight: 700;
    /* shared.css の .btn-s1 a の太さを参考に */
    letter-spacing: 0.05em;
    /* 文字間隔を少し調整 */
}

/* 説明文 */
.reservation-form-container .page-description {
    font-size: 15px;
    text-align: center;
    /* 中央寄せ */
    margin-bottom: 30px;
    color: #555;
    line-height: 1.8;
}

.reservation-form-container .page-description .highlight {
    color: #c00000;
    /* index.css の .top-contact .txt span の色を参考に (仮) */
    font-weight: bold;
}

/* フォームグループ（ラベルと入力欄のセット） */
.form-group {
    margin-bottom: 25px;
}

/* ラベル */
.form-group label {
    display: block;
    font-family: "Klee One", serif;
    font-size: 16px;
    font-weight: 600;
    /* shared.css の body font-weight と同等か少し強調 */
    color: #333;
    margin-bottom: 8px;
    text-align: left;
    /* ラベルは左寄せ */
}

.form-group label .required-mark {
    color: #c00000;
    font-size: 0.9em;
    margin-left: 4px;
}

/* 入力欄（input, select, textarea共通） */
.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="email"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    /* 必須 */
    font-size: 16px;
    /* shared.css のPC用フォントサイズに合わせる */
    font-family: "游明朝", YuMincho, serif;
    /* shared.css の基本フォント */
    background-color: #fff;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    text-align: left;
    /* 入力文字は左から */
}

.form-group input[type="date"] {
    min-height: 48.5px;
    /* 他の入力欄と高さを合わせる */
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #999;
    opacity: 1;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #ffda78;
    /* shared.css の .yellow の色 */
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 218, 120, 0.3);
}

.form-group textarea {
    min-height: 100px;
    resize: vertical;
}

.form-group select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%232F2F2F%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 10px 10px;
    padding-right: 40px;
}

/* 送信ボタンのコンテナ */
.submit-button-container {
    text-align: center;
    /* ボタンを中央寄せ */
    margin-top: 30px;
}

/* 送信ボタン */
.submit-button {
    font-family: "Klee One", serif;
    /* shared.css .btn-s1 a より */
    font-size: 18px;
    /* PCでのボタン文字サイズ */
    font-weight: 700;
    /* shared.css .btn-s1 a より */
    color: #fff;
    /* shared.css .btn-s1 a より */
    background: url(../img/shared/bg2.jpg);
    /* shared.css .btn-s1 a より */
    display: inline-block;
    padding: 15px 30px;
    min-width: 250px;
    text-align: center;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    transition: opacity 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    letter-spacing: 0.05em;
    /* 文字間隔 */
}

.submit-button span {
    position: relative;
    /* ホバーエフェクトなどで必要になる場合がある */
}

.submit-button::after {
    content: "";
    background: url(../img/shared/icon_arr1.png) no-repeat center center/contain;
    /* shared.css .btn-s1 a::after より */
    position: absolute;
    top: 50%;
    right: 20px;
    width: 28px;
    height: 14px;
    transform: translateY(-50%);
}

.submit-button:hover {
    opacity: 0.85;
    transform: translateY(-2px);
}

.submit-button:active {
    transform: translateY(0px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

/* ========================== */
/* レスポンシブ対応 (スマートフォン向け) */
/* ========================== */
@media screen and (max-width: 767.98px) {

    /* shared.css のブレークポイントに合わせる */
    body.reservation-page {
        text-align: justify;
        /* スマホではshared.cssのデフォルトに戻す */
    }

    .reservation-content-wrapper {
        /* スマホ表示時: ナビゲーションバーの高さを考慮 (ハンバーガーメニュー等) */
        /* #navigation (スマホ用メニュー) はfixedで画面全体を覆うため、 */
        /* #belt が通常表示される場合はその高さを考慮。 */
        /* 仮に #belt の高さが約50px程度と想定 */
        padding-top: 70px;
        /* 例: スマホのナビバーの高さが約50pxなら、70px程度の余白 */
        padding-bottom: 20px;
    }

    .reservation-form-container {
        margin-left: 15px;
        margin-right: 15px;
        margin-bottom: 30px;
        padding: 25px 20px;
        /* スマホでの内部余白を少し調整 */
        width: auto;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    }

    .reservation-form-container .page-title {
        font-size: 6vw;
        /* shared.css .btn-s1 a のvw指定を参考に調整 */
        margin-bottom: 10px;
        letter-spacing: 0.05em;
    }

    .reservation-form-container .page-description {
        font-size: 14px;
        /* shared.css の基本フォントサイズ */
        margin-bottom: 25px;
        text-align: justify;
        /* スマホでは両端揃えに */
    }

    .form-group label {
        font-size: 15px;
        letter-spacing: 0.08em;
        /* 少し文字間隔を広げる */
    }

    .form-group input[type="text"],
    .form-group input[type="tel"],
    .form-group input[type="email"],
    .form-group input[type="date"],
    .form-group select,
    .form-group textarea {
        font-size: 15px;
        padding: 10px 12px;
    }

    .form-group input[type="date"] {
        min-height: 44.5px;
    }

    .submit-button {
        font-size: 4.5vw;
        /* shared.css .btn-s1 a のvw指定を参考に調整 */
        padding: 14px 20px;
        width: 100%;
        min-width: auto;
        letter-spacing: 0.02em;
        /* 文字間隔を少し詰める */
    }

    .submit-button::after {
        width: 6vw;
        /* アイコンもvwで調整 */
        height: 3vw;
        right: 15px;
    }
}