@charset "UTF-8";

input, select { width: 96%; font-size: 14px; font-family: "Meiryo"; padding: 8px 10px; border: 3px solid #ddd; }
textarea { width: 96%; font-size: 14px; font-family: "Meiryo"; height: 90px; margin: 0px; padding: 8px 10px; border: 3px solid #ddd; }
input.datepicker { width: 170px; background: url(../../../public/images/icon_down_arrow.png) no-repeat 97% 50%; }
select.timepicker { width: 150px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(../../../public/images/icon_down_arrow.png) no-repeat 95% 50%; }

.error-msg p { font-size: 12px; color: red; margin: 0px; }
.mark { font-size: 11px; color: red; margin: 0px; }

#Reservation { margin-bottom: 100px; }

.reservation-form { width: 93%; border: 1px solid #ddd; background-color: #fff; margin: 0 auto; padding: 20px; }
.reservation-form dl { width: 100%; border-bottom: 1px solid #ddd; margin: 0px; padding: 0px; display: table; }
.reservation-form dl:last-child { border-bottom: 0px; }
.reservation-form dl dt { width: 28%; font-weight: bold; margin: 0px; padding: 20px; display: table-cell; vertical-align: middle; text-align: justify; }
.reservation-form dl dd { width: 72%; margin: 0px; padding: 20px; display: table-cell; vertical-align: middle; text-align: justify; }
.reservation-form dl dd textarea { margin-bottom: -6px; }
.reservation-form ul { margin: 0px; padding: 5px 0px; display: table; list-style: none; }
.reservation-form ul.hopebox { margin:0 0 10px; }
.reservation-form ul li { padding: 0px 5px; display: table-cell; vertical-align: middle; }
.reservation-form ul li img { margin: 5px 0px 0px 10px; }
.reservation-form .area-step { width: 100%; border-bottom: 1px solid #ddd; margin: 0 auto; padding: 5px 0px 20px 0px; display: table; }
.reservation-form .area-step .step-arrow { width: 5%; color: #999; display: table-cell; text-align: center; }
.reservation-form .area-step .step-box { width: 30%; padding: 10px; color: #999; display: table-cell; }
.reservation-form .area-step .step-box strong { color: #169FC6; }
.reservation-form .area-step .step-box.selected { color: #000; background-color: #eee; }

.area-checkbox { width: 100%; background-color: #eee; margin: 0px 0px 10px 0px; padding: 20px 0px 18px 0px; text-align: center; }
.area-checkbox label { width: 250px; color: #fff; background-color: #777; border-radius: 5px; margin: 0px 10px; padding: 9px 0px 7px 0px; display: inline-block; }
.area-checkbox label input[type='radio'] { width: 18px; height: 18px; margin-bottom: 4px; vertical-align: middle; }
.area-checkbox .selected { background-color: #169FC6; }

.area-btn { background-color: #ddd; margin-top: 20px; padding: 20px; text-align:center;}
.area-btn button { width: 350px; font-size: 24px; font-family: "Meiryo"; font-weight: bold; color: #fff; border: 0px; border-radius: 30px; background-color: #E85D2D; margin: 0px 20px; padding: 15px; cursor: pointer; }
.area-btn button:hover { filter: opacity(0.8); }
.area-btn img { padding: 20px; }
.area-btn .btn-reservation-register { font-size: 20px; margin-top: 5px; }
.area-btn .btn-reservation-back { font-size: 20px; background-color: #777; margin-top: 5px; }
.area-btn .btn-reservation-top { width: 300px; font-size: 14px; font-weight: bold; color: #000; border: 1px solid #333; border-radius: 5px; background-color: #eee; margin-top: 10px; padding: 10px 20px; }

.area-complete { font-size: 15px; font-weight: bold; margin: 0 auto; padding: 50px 0px; }
.area-complete strong { font-size: 24px; }

/* Smartphone */
@media only screen and (max-width: 768px) {
    .reservation-form dl { display: block; }
    .reservation-form dl dt { width: 100%; margin: 0px; padding: 20px 0px 5px 0px; display: block; }
    .reservation-form dl dd { width: 100%; margin: 0px; padding: 0px 0px 20px 0px; display: block; }
    textarea { width: 90%; height:150px;}/*ここなおした*/
}

/* iPhone 8 Plus */
@media only screen and (max-width: 414px) {
    input, select { width: 92%; }
    input.datepicker { width: 160px; }
    select.timepicker { width: 186px; background-position: 97% 50%; }
    textarea { width: 90%; height:200px;}

    .reservation-form { width: 80%; border: 1px solid #ddd; background-color: #fff; margin: 0 auto; padding: 20px; }
    .reservation-form ul { display: block; }
    .reservation-form ul li { display: block; }
    .reservation-form ul li.title { font-weight: bold; background-color: #ddd; margin-bottom: 10px; }
    .reservation-form ul li.item { display: inline-block; }
    .reservation-form ul li.spacer { margin: 0px; padding: 1px; }
    .reservation-form .area-step { display: block; }
    .reservation-form .area-step .step-arrow { display: none; }
    .reservation-form .area-step .step-box { width: 100%; padding: 10px 0px; display: block; }
    .area-checkbox label { width: 80%; margin: 2% auto; padding-left: 10px; text-align: left; display: block; }
    .area-btn { height: auto; padding: 30px 0px; }
    .area-btn button { width: 85%; font-size: 15px; }
    .area-btn .btn-reservation-register { font-size: 14px; }
    .area-btn .btn-reservation-back { font-size: 14px; }
    .area-btn .btn-reservation-top { width: 80%; margin-top: 0px; }
    .area-complete { font-size: 12px; font-weight: normal; }
}