@charset 'utf-8';


.reserve_wrapper {
    max-width: 600px;
    margin-inline: auto;
}


/* メインビジュアル */
/* 背景 */
.mv_section {
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 400px;
    background-color: #f7f3d9;
    background-image: url(../image/mv_bg_image.svg);
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-size: contain;
}

/* ページタイトル */
.reserve_title {
    font-size: 2.1875em;
    font-weight: bold;
    text-align: center;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #718127;
    position: relative;
}

.mv_section p {
    font-size: 1.125em;
    font-weight: bold;
    margin-top: 1em;
    color: #718127;
}

/* 文字の前後のイラスト */
.reserve_title::before,
.reserve_title::after {
    top: 15%;
    width: 50px;
    height: 50px;
    position: absolute;
    content: '';
    vertical-align: middle;
    background-image: url(../image/cloud.png);
    background-size: contain;
    background-repeat: no-repeat;
}


/* 左の雲の位置、余白調整 */
.reserve_title::before {
    right: 100%;
    margin-right: 50px;
}

/* 右の雲の位置、余白調整 */
.reserve_title::after {
    left: 100%;
    /* 余白調整 */
    margin-left: 50px;
}

/* 注意事項 */
.attention {
    align-items: center;
    flex-direction: column;
    width: 95%;
    max-width: 800px;
    margin-top: 6.25em;
    padding: 3.125em 0;
    background-color: #fffced;
    margin-inline: auto;
}

/* 注意事項　タイトル */
.attention_sec_title_area {
    font-weight: bold;
    position: relative;
    justify-content: center;
    width: 95%;
    height: max-content;
    border-bottom: 1px solid #718127;
}

.attention_sec_title {
    font-size: 2.1875em;
    position: relative;
    padding-right: .5em;
    text-align: center;
    letter-spacing: .1em;
    color: #be3d3d;
}

/* 注意事項のイラスト */
.attention_sec_title::after {
    position: absolute;
    right: 0;
    display: inline-block;
    width: 2.1875em;
    height: fit-content;
    content: url(../image/sec_title_image.png);
}

.attention strong {
    font-size: 1.125em;
    font-weight: bold;
    margin: 15px 0 15px 0;
}

.attention_list {
    width: 90%;
    max-width: 600px;
    margin-inline: auto;
}

/* 注意事項のリスト */
.attention_list li {
    line-height: 1.875;
    text-indent: -1em;
}

/* ご予約フォーム */
.reserve_section {
    max-width: 600px;
    margin-top: 6.25em;
    margin-inline: auto;
}

/*１～３　各タイトルのデザイン*/
.reserve_section_title {
    font-size: 1.5em;
    font-weight: bold;
    margin-top: 70px;
    letter-spacing: .1em;
    color: #718127;
}

/* 必須アイコン */
.must::after {
    display: inline-block;
    width: fit-content;
    font-size: .8em;
    content: "必須";
    color: #be3d3d;
    border: 1px solid;
    padding: 0 .3em;
    margin-left: .5em;
    position: absolute;
    font-weight: normal;
}

/* １．お客様情報のタイトル上の余白（100px） */
.reserve_section_title:first-of-type {
    margin-top: 100px;
}


/* 1.お客様情報について（入力部分） */
.form_parts1 {
    display: flex;
    flex-direction: column;
    margin-top: 1em;
}

.form_parts1:first-of-type,
.form_parts2:first-of-type {
    margin-top: 2em;
}



/* 入力欄の色 */
#name,
#tel,
#email,
#date,
#adult,
#student,
#child {
    height: 36px;
    border: 1px solid #eee;
    background-color: #fffced;
}

/* ご利用日時・プランについて */
/* 要素横並び */
.form_parts2 {
    display: flex;
    align-items: flex-end;
    margin-top: .5em;
}

/* 
タイトル
ご予約希望日時
ご利用人数
食事（4人前）を
太字かつ余白 */
.date_copy,
.user_copy,
.plan_copy,
.food_copy {
    font-weight: bold;
    margin-top: 2em;
}

/* 希望日時入力欄 */
#date {
    max-width: 250px;
}

/* 人数入力欄 */
.user_input_area {
    justify-content: space-between;
}

/* 大人、中高生、子供それぞれの入力欄 */
#adult,
#student,
#child {
    width: 115px;
    margin-left: .5em;
}


.user_area {
    flex-direction: column;
}

.user_area p {
    margin-top: 1em;
}

.user_area p+.user_area p {
    margin-left: 2em;
}

.sum_user {
    font-weight: bold;
}

.form_radio p:nth-of-type(n+2) {
    margin-left: 3em;
}

/*  3．追加のレンタル備品・購入品について*/
.rental_area {
    margin-top: 2em;
    width: 100%;
}

/* グリッドレイアウト */
.grid {
    display: grid;
}


/* タイトルを太字に */
.rental_title_area {
    font-weight: bold;
    padding: .5em 0;
    text-align: center;
    justify-content: space-between;
}

.rental_area_title p:nth-of-type(n+2) {
    font-weight: bold;
}

.rental_item_area {
    margin-top: .5em;
    justify-content: space-between;
}

/* 幅指定 */
.rental_title_area,
.rental_item_area {
    max-width: 100%;
    grid-template-columns: 200px 100px 100px 100px;
}

/* 2列目以降の余白指定 */
.rental_title_area p:nth-of-type(n+2),
.rental_item_area p:nth-of-type(n+2) {
    margin-left: .5em;
}


.rental_sum_area :nth-of-type(2) {
    margin-left: 2em;
}

/* 金額右揃え */
.rental_item_area p:nth-of-type(n+2) {
    text-align: right;
}

.sum_area_wrapper {
    justify-content: end;
}

.rental_sum_area {
    font-weight: bold;
    margin-top: 1em;
    text-align: right;
    justify-content: end;
    width: fit-content;
}

.rental_item_area input {
    width: 70px;
    height: 36px;
    border: 1px solid #eee;
    background-color: #fffced;
}

.rental_sum_area {
    border-bottom: 1px solid #222;
}

.rental_sum_result {
    padding: 0 1em;
}

/* 合計欄 */
.sum_container {
    display: flex;
    flex-direction: column;
    align-items: end;
    margin-top: 3em;
}

/* 合計人数 */
.sum_area {
    display: flex;
    flex-direction: column;
    margin-top: 2em;
}

#sum_user_result {
    padding: 0 1em;
}


.subtotal {
    align-items: center;
    width: 250px;
    height: 36px;
    padding: 0 .5em;
    background-color: #f6f8f2;
}

.subtotal+.subtotal {
    margin-top: .5em;
}

.subtotal strong {
    font-weight: bold;
    color: #718127;
}

.subtotal p {
    font-weight: bold;
    text-align: right;
}

/*総合計 */
.sum_container {
    display: flex;
}

.total_cost {
    font-weight: bold;
    justify-content: end;

    width: fit-content;
    margin-top: 1em;
    border-bottom: 1px solid #222;
}

.total_cost p:first-of-type {
    color: #718127;
}

.total_cost p:nth-of-type(2) {
    margin-left: 2em;
    padding-right: 1em;
}

.massage_area_copy {
    margin-top: 70px;
}

.massage_input {
    margin-top: 1em;
}

/* 自由記述 */
#message {
    width: 100%;
    border: 1px solid #eee;
    background-color: #fffced;
}

/* 送信する */
.submit_button_area {
    margin-top: 1.25em;
    justify-content: center;
}

.submit_button {
    font-weight: bold;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 250px;
    padding: 1em 0;
    transition: .5s;
    color: #fff;
    letter-spacing: .1em;
    border-radius: 60px;
    background-color: #55412f;
    transition: .5s;
}

.submit_button:hover {
    opacity: 0.6;
}

/* 注意事項 */

#privacy {
    width: 1.5em;
    height: 1.5em;
    margin-right: 1em;
}

.privacypolicy {
    margin-top: 2em;
    justify-content: center;
}

.privacy_link {
    text-decoration: underline;
    text-decoration-color: #222;
}

/* レスポンシブ対応 */
@media (max-width:768px) {

    body {
        font-size: 14px;
    }

    /* メインビジュアルエリア　高さを250PXに */
    .mv_section {
        height: 250px;
    }

    /* ページタイトルの行間を詰める */
    .reserve_title {
        letter-spacing: .1em;
        font-size: 1.4em;
    }

    /* 雲の大きさと高さ調整 */
    .reserve_title::before,
    .reserve_title::after {
        top: 8%;
        width: 40px;
        height: 40px;
    }

    .reserve_title::before {
        margin-right: 30px;
    }

    /* 右の雲の位置、余白調整 */
    .reserve_title::after {
        margin-left: 30px;
    }

    /* 注意事項 */
    .attention_sec_title {
        padding-right: 0;
    }

    /* 注意事項のイラストをなくす */
    .attention_sec_title::after {
        display: none;
    }

    /* ご利用人数と合計人数を縦ならび */
    .user_input_area {
        display: flex;
        flex-direction: column;
        align-items: start;
    }

    .sum_user {
        margin-top: 1.5em;
    }

    /* ラジオボタンを縦ならび */
    .form_radio {
        display: flex;
        flex-direction: column;
        align-items: start;
    }

    .form_radio p:nth-of-type(n+2) {
        margin-left: 0em;
    }


    /* 追加のレンタル備品 購入備品 */
    /*タイトルを消す  */
    .sp_none {
        display: none;
    }

    /*レンタル備品のレイアウト */
    .rental_item_area {
        grid-template-columns: 80px 80px 80px;
        grid-template-rows: 2;
        row-gap: .5em;
        max-width: 400px;

    }

    .rental_item_area+.rental_item_area {
        margin-top: 1.5em;
    }

    /* レンタル品 */
    .rental_item_area p:nth-child(1) {
        -ms-grid-column: 1;
        grid-column: 1 / 3;
        -ms-grid-row: 1;
        grid-row: 1;
        -ms-grid-column-span: 3;
        font-weight: bold;
    }


    /* 金額 */
    .rental_item_area p:nth-child(2) {
        grid-row-start: 2;
        grid-column-start: 1;
        text-align: left;
    }

    .rental_item_area p:nth-child(3) {
        grid-row-start: 2;
        grid-column-start: 2;
    }

    .rental_item_area p:nth-child(4) {
        grid-row-start: 2;
        grid-column-start: 3;
    }

    /* 合計欄 */
    .sum_container {
        align-items: start;
    }

    .sum_area_wrapper {
        margin-top: 1em;
        justify-content: start;
    }

    .sum_wrap {
        display: flex;
        flex-direction: column;
    }
}