@charset "UTF-8";

body { font-size: 14px!important; font-family: "Meiryo"!important; word-wrap: break-word; word-break: break-all; }

a:link { color: #169fc6; }
a:active { color: #169fc6; }
a:visited { color: #169fc6; }
a:hover { color: blue; }

input[type="text"], input[type="email"] { width: 100%; padding: 8px 10px; border: 3px solid #ddd; }
input[type="number"] { width: 100%; padding: 8px 10px; border: 3px solid #ddd; -moz-appearance:textfield; }
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="password"] { width: 200px; padding: 8px 10px; border: 3px solid #ddd; }
input[type="text"].readonly { background-color: #eee; }
input[name="custom_url"] { width: 200px }
input.sns { width: 500px }
select { padding: 8px 10px; border: 3px solid #ddd; }
select.disabled { background-color: #999; }
textarea { width: 100%; height: 110px; margin: 0px; padding: 0px; border: 3px solid #ddd; resize: none; }
.textarea { clear:both; position: relative; }
button.btn-url-check { font-size: 12px; font-family: "Meiryo"; color: #fff; border: 2px solid #BADFE9; border-radius: 8px; background-color: #169FC6; padding: 10px 15px; }

form.cmxform label.error, label.error { font-size: 12px; color: red; display: block; }

b.must-mark { font-size: 12px; color: red; }
.title-header { width: 100%; border-bottom: 1px solid #ddd; margin: 20px 0px 30px 0px; padding-bottom: 5px; display: table; }
.title-header h1.title { font-size: 24px; font-weight: bold; color: #169FC6; display: table-cell; }
.title-header p { margin: 0px; padding: 0px; display: table-cell; text-align: right; }
.title-header p button { color: #fff; border: 0px; border-radius: 5px; background-color: #169FC6; padding: 4px 10px; }
.title-header p button:hover { filter: opacity(0.7); }
#map { width: 100%; height: 500px; }

#manual-modal .modal-base { position: absolute; top: 50%; left: 50%; margin-top: -335px; margin-left: -330px; }
#manual-modal .modal-base .modal-content { display: block; }
#manual-modal .modal-base .modal-close { width: 750px; font-size: 15px; font-weight: bold; background-color: #ddd; margin: 0px; padding: 15px 0px 10px 0px; text-align: center; cursor: pointer; }

#step-manual-modal .modal-base { position: absolute; top: 50px; left: 50%; margin-left: -530px; }
#step-manual-modal .modal-base .modal-content { position: relative; border: 0px; text-align: center; }
#step-manual-modal .modal-base .modal-close { width: 100%; font-size: 15px; font-weight: bold; background-color: #ddd; margin: 0px; padding: 15px 0px 10px 0px; text-align: center; cursor: pointer; }
.btn-close { position: absolute; top: 10px; right: 10px; cursor: pointer; }
.btn-close img { display: block!important; }

.step-top { width: 100%; background-color: #fff; }
.step-top .step-top-header { font-size: 18px; font-weight: bold; color: #169FC6; border-bottom: 1px solid #ddd; margin: 10px 0px 10px 0px; padding-bottom: 10px; }
.step-top .step-top-title { text-align: center; }
.step-top .step-top-banner { width: 1060px; height: 240px; margin: 0 auto; margin-top: 0px; }
.step-top .step-top-banner .slick-slide { height: 240px; overflow: hidden; }
.step-top .step-top-banner-text { width: 1060px; margin: 1% auto; text-align: center; display: table; }
.step-top .slick-dots { bottom: -40px!important; width: 100%; margin: 0 auto; padding: 0px; list-style: none; display: table; text-align: center; }
.step-top .slick-dots li { width: 20.5%; font-size: 16px; font-weight: bold; color: #169FC6; background-color: #ddd; padding: 5px 0px 5px 20px; display: table-cell; vertical-align: middle; cursor: pointer; }
.step-top .slick-dots li.slick-active { color: #fff; background-color: #169FC6; }
.step-top .slick-dots li:after { content: "▶"; width: 25px; color: #169FC6; background-color: #fff; margin: -5px 0px -5px 20px; padding: 5px 0px; display: inline-block; float: right; }
.step-top .slick-dots li:last-child:after { content: ""; margin: 0px; padding: 0px; }
.step-top .slick-dots li:last-child { width: 18%; padding: 5px 0px 5px 0px; }
.step-top .slick-prev { width: 40px; height: 40px; border-top: 4px solid #ccc; border-right: 4px solid #ccc; -webkit-transform: rotate(225deg); transform: rotate(225deg); margin-top: -20px; left: -40px; z-index: 1000; }
.step-top .slick-prev:before { color: transparent; }
.step-top .slick-next { width: 40px; height: 40px; border-top: 4px solid #ccc; border-right: 4px solid #ccc; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -20px; right: -40px; z-index: 1000; }
.step-top .slick-next:before { color: transparent; }
.step-top .step-top-desc { font-size: 16px; text-align: center; line-height: 2em; margin-top: 60px; padding: 20px 0px; }
.step-top .step-top-desc strong { font-size: 24px; color: #19A0C6; line-height: 2.5em; }
.step-top .step-top-button { background-color: #ddd; margin-top: 60px; padding: 20px 0px; text-align: center; }
.step-top .step-top-button button { width: 350px; font-size: 18px; font-weight: bold; color: #fff; border: 0px; border-radius: 30px; background-color: #E85D2D; margin: 0px 20px; padding: 15px; }
.step-top .step-top-button button:hover { filter: opacity(0.8); }
.step-top .step-top-contact { width: 100%; border: 1px solid #ddd; border-width: 1px 0px; margin: 20px 0px; }
.step-top .step-top-contact dl { width: 80%; margin: 1% auto; padding: 10px 0px; display: table; }
.step-top .step-top-contact dl dt { width: 40%; font-size: 18px; background-color: #ddd; padding: 5px 0px; display: table-cell; vertical-align: middle; text-align: center; }
.step-top .step-top-contact dl dd { width: 60%; padding-left: 20px; display: table-cell; vertical-align: middle; }
.step-top .step-top-contact dl dd strong { font-size: 22px; }
.step-top .step-top-contact p { padding-top: 10px; float: right; }

#step-seletor { font-size: 16px; font-weight: bold; color: #DDDDDD; margin: 0px; padding: 0px; list-style: none; text-align: center; }
#step-seletor li { width: 205px; background-color: #DDDDDD; color: #999; border-radius: 5px; padding: 10px 10px; display: inline-block; vertical-align: middle; text-align: center; }
#step-seletor li b { color: #169FC6; }
#step-seletor li.selected { background-color: #169FC6; color: #fff; }
#step-seletor li.selected b { color: #fff; }
#step-seletor li span.br:before { content: "\A"; white-space: pre; }
#step-seletor span.arrow { display: inline-block; }

.btn-modify { font-weight: bold; border: 1px solid #333; border-radius: 5px; background-color: #eee; margin: 20px 0px 50px 0px; padding: 10px 20px; float: right; }

.area-step { padding: 20px 0px 0px 0px; }
.area-step .text { clear: both; }
.area-step .text strong { float: left; padding: 10px 0px 10px 0px; }
.area-step .text a { float: right; margin-bottom: 10px; }
.area-step[data-id='1'] { display: block; }
.area-step h2 { width: 100%; font-size: 20px; font-weight: bold; color: #fff; border: 2px solid #BADFE9; background-color: #169FC6; margin: 10px 0px 20px 0px; padding: 10px 0px; text-align: center; }
.area-step dl { width: 100%; border-top: 2px solid #ddd; margin: 0px; padding: 0px; display: table; }
.area-step dl:last-child { border-bottom: 2px solid #ddd; }
.area-step dl dt { width: 27%; font-size: 16px; line-height: 1.5em; background-color: #ededed; padding: 20px; display: table-cell; vertical-align: top; }
.area-step dl dt img { padding: 0px 0px 9px 5px; }
.area-step dl dt ul { margin: 0px; padding: 0px 0px 0px 19px; }
.area-step dl dt .desc { font-size: 12px; font-weight: normal; margin-top: 10px; }
.area-step dl dd { width: 73%; padding: 20px; display: table-cell; position: relative; vertical-align: middle; }
.area-step dl dd textarea { margin-bottom: -6px; }
.area-step dl dd label { font-weight: normal; padding: 10px 0px 0px 5px; }
.area-step dl dd .btn-add-area { height: 25px; clear: both; }
.area-step .map-code { width: 100%; display: table; }
.area-step .map-code label { width: 50%; display: table-cell; }
.area-step .map-code input { width: 300px; background-color: #eee; text-align: left; margin-bottom: 5px; }
.area-step .introduce { width: 97%; }
.area-step #address { width: 85%; }
.area-step .btn-map { color: #fff; border: 0px; border-radius: 5px; background-color: #169FC6; padding: 10px 15px; }
.area-step .btn-map:hover { filter: opacity(0.7); }
.area-step .btn-copy { color: #fff; border: 0px; border-radius: 5px; background-color: #169FC6; margin-bottom: 5px; padding: 5px 15px; }
.area-step .btn-copy:hover { filter: opacity(0.7); }

.area-step .upload-box { width: 376px; margin: 10px 0px 15px 0px; display: inline-block; vertical-align: top; }
.area-step .upload-box.spacer { margin-right: 15px; }
.area-step .upload-box .upload-preview { position: relative; width: 100%; height: 120px; border: 3px solid #ddd; display: table; vertical-align: middle; }
.area-step .upload-box .upload-preview .image { padding: 10px; display: table-cell; vertical-align: middle; text-align: center; }
.area-step .upload-box .upload-preview .image.main-pc { background-repeat: no-repeat!important; background-position: 50% 50%!important; background-size: 80%!important; }
.area-step .upload-box .upload-preview .image.main-sp { background-repeat: no-repeat!important; background-position: 50% 50%!important; background-size: 50%!important; }
.area-step .upload-box .upload-preview .image.noimage { background: url(/public/images/icon_noimage.png) no-repeat 50% 50%; }
.area-step .upload-box .upload-preview .image.blank { background: none!important; }
.area-step .upload-box .upload-button { width: 100%; background-color: #ddd; padding: 10px; text-align: center; }
.area-step .upload-box .upload-button .btn-upload { font-size: 12px; color: #fff; background-color: #169FC6; border: 0px; border-radius: 3px; padding: 4px 20px; }
.area-step .top-image-pc { width: 100%; height: 135px; }
.area-step .top-image-sp { height: 135px; }

.area-step .area-case { border: 2px solid #ddd; text-align: center; }
.area-step .area-case .case-title { width: 100%; clear: both; background-color: #ddd; padding: 10px; text-align: left; }
.area-step .area-case .case-title button { font-size: 12px; background-color: #eee; border: 1px solid #999; border-radius: 3px; margin-top: -3px; padding: 3px 10px; float: right; }
.area-step .area-case .case-content { padding: 0px 9px 9px 9px; text-align: left; }
.area-step .area-case .case-content p { font-weight: bold; margin: 0px; padding: 0px; }

.area-step .area-review { border: 2px solid #ddd; text-align: center; }
.area-step .area-review .review-title { width: 100%; clear: both; background-color: #ddd; padding: 10px; text-align: left; }
.area-step .area-review .review-title button { font-size: 12px; background-color: #eee; border: 1px solid #999; border-radius: 3px; margin-top: -3px; padding: 3px 10px; float: right; }

.area-template-title { clear: both; width: 100%; font-size: 16px; font-weight: bold; background-color: #eee; padding: 10px; display: block; }
.area-template { display: table; width: 100%; margin-top: 20px; }
.area-template .template-item { width: 336px; display: table-cell; cursor: pointer; }
.area-template .template-item .template-image { position: relative; width: 336px; height: 270px; text-align: center; border: 3px solid #d9d9d9; border-radius: 5px; margin: 0 auto; }
.area-template .template-item .template-image img { margin: 0 auto; }
.area-template .template-item .template-image a { position: absolute; bottom: 0px; left: 0px; width: 330px; font-size: 14px; font-weight: bold; color: #fff; border: 0px; background: rgba(22,159,198,0.7); padding: 10px 0px; }
.area-template .template-item .template-select { width: 336px; background-color: #eee; text-align: center; margin: 3% auto; padding: 5px 0px; }
.area-template .template-item .template-select.selected { background-color: #BADFE9; }
.area-template .template-item .template-select input[type='radio'] { width: 22px; height: 22px; -webkit-appearance: checkbox; -moz-appearance: checkbox; -ms-appearance: checkbox; }

.area-confirm { padding: 0px; clear: both; }
.area-confirm h2 { width: 100%; font-size: 20px; font-weight: bold; color: #fff; border: 2px solid #BADFE9; background-color: #169FC6; margin: 0px 0px 20px 0px; padding: 10px 0px; text-align: center; }
.area-confirm h3 { font-weight: bold; color: #169FC6; }
.area-confirm dl { width: 100%; display: table; border-top: 1px solid #ddd; margin: 0px; padding: 0px; }
.area-confirm dl:last-child { border-bottom: 1px solid #ddd; }
.area-confirm dl dt { width: 20%; display: table-cell; background-color: #eee; vertical-align: middle; padding: 20px 0px 20px 20px; }
.area-confirm dl dd { width: 79%; display: table-cell; vertical-align: middle; padding-left: 20px; }

.area-confirm .upload-box { width: 386px; margin: 10px 0px 15px 0px; display: inline-block; vertical-align: top; }
.area-confirm .upload-box.spacer { margin-right: 15px; }
.area-confirm .upload-box .upload-preview { position: relative; width: 100%; height: 120px; border: 3px solid #ddd; display: table; vertical-align: middle; }
.area-confirm .upload-box .upload-preview .image { padding: 10px; display: table-cell; vertical-align: middle; text-align: center; }
.area-confirm .upload-box .upload-button { width: 100%; background-color: #ddd; padding: 10px; text-align: center; }
.area-confirm .upload-box .upload-button .btn-upload { font-size: 12px; color: #fff; background-color: #169FC6; border: 0px; border-radius: 3px; padding: 4px 20px; }
.area-confirm .upload-box textarea { width: 100%; height: 195px; }
.area-confirm .top-image-pc { width: 100%; height: 135px; }
.area-confirm .top-image-sp { height: 135px; }

.area-complete { text-align: center; }
.area-complete h2 { width: 100%; font-size: 20px; font-weight: bold; color: #fff; border: 2px solid #BADFE9; background-color: #169FC6; margin: 0px 0px 20px 0px; padding: 10px 0px; text-align: center; }
.area-complete h3 { font-size: 30px; font-weight: bold; padding: 20px 0px 0px 0px; line-height: 1.2em; }
.area-complete h4 { font-size: 18px; font-weight: bold; margin: 0px; padding: 0px 0px 10px 0px; line-height: 1.2em; }
.area-complete .url { font-size: 30px; font-weight: bold; color: #169FC6; width: 70%; margin: 0 auto; padding: 10px 0px; }
.area-complete .text { font-size: 16px; margin: 15px 0px 0px 0px; padding: 0px 0px 10px 0px; line-height: 1.5em; }
.area-complete .desc { font-size: 16px; margin: 30px 0px 0px 0px; padding: 15px 0px; line-height: 1.5em; text-align: left; border-top: 1px solid #ddd; }
.area-complete .area-btn { background-color: #eee; padding: 20px; text-align: center; }
.area-complete .area-btn .btn-shop { font-weight: bold; color: #333; border: 1px solid #666; border-radius: 5px; background-color: #eee; margin: 0px; padding: 10px 20px; }

.area-notice { width: 100%; font-size: 15px; color: red; margin-top: 8px; text-align: center; }

.area-checkbox { width: 100%; background-color: #eee; margin: 0px 0px 10px 0px; padding: 10px 0px 10px 0px; text-align: center; }
.area-checkbox label { width: 220px; color: #fff; background-color: #777; border-radius: 5px; margin: 5px; padding: 10px 0px 7px 0px!important; }
.area-checkbox label div { width: 50px; display: inline-block; vertical-align: top; }
.area-checkbox label input[type='radio'] { width: 18px; height: 18px; margin: 0px; padding: 0px; -webkit-appearance: checkbox; -moz-appearance: checkbox; -ms-appearance: checkbox; display: inline-block; vertical-align: top; }
.area-checkbox label.status { width: 300px; }
.area-checkbox .selected { background-color: #169FC6; }

.area-preview { height: 67px; background-color: #BADFE9; margin-top: 40px; padding: 10px; text-align: center; }
.area-preview .btn-preview { font-weight: bold; color: #333; border: 2px solid #169FC6; border-radius: 5px; background-color: #EDEDED; padding: 10px 50px 10px 40px; cursor: pointer; }
.area-preview .btn-preview i { font-size: 14px; font-family: "MS PGothic"; font-weight: bold; font-style: normal; color: #169FC6; margin-right: 20px; letter-spacing: -7px; }
.area-preview .bx-loader { text-align: center; margin: 6px 0px 12px 0px; display: none; }

.area-btn { height: 96px; clear: both; background-color: #eee; padding: 20px; text-align: center; }
.area-btn button { width: 350px; font-size: 18px; font-weight: bold; color: #fff; border: 0px; border-radius: 30px; background-color: #E85D2D; margin: 0px 20px; padding: 15px; }
.area-btn button i { font-size: 16px; font-family: "MS PGothic"; font-weight: bold; font-style: normal; }
.area-btn button.btn-prev { background-color: #777; }
.area-btn .bx-loader { text-align: center; margin: 12px 0px 17px 0px; display: none; }
.area-confirm-btn { clear: both; background-color: #eee; padding: 20px; text-align: center; }
.area-confirm-btn button { width: 350px; font-size: 18px; font-weight: bold; color: #fff; border: 0px; border-radius: 30px; background-color: #E85D2D; margin: 0px 20px; padding: 15px; }

.area-add-bottom { width: 100%; display: table; }
.area-add-bottom .area-add-message { font-size: 12px; color: red; display: table-cell; vertical-align: middle; }
.area-add-bottom .area-add-btn { display: table-cell; text-align: right; }

.area-list-header { width: 100%; border: 1px solid #d9d9d9; display: table; }
.area-list-header .list-header { border: 1px solid #d9d9d9; border-width: 0px 0px 0px 1px; background-color: #eee; text-align: center; padding: 10px 0px; display: table-cell; }
.area-list-header .list-header:first-child { border-left-width: 0px; }
.area-list { width: 100%; border: 1px solid #d9d9d9; border-top-width: 0px; display: table; }
.area-list .list-item { border: 1px solid #d9d9d9; border-width: 0px 0px 0px 1px; display: table-cell; }
.area-list .list-item:first-child { border-left-width: 0px; }
.area-list .list-item input { border: 0px; }
.area-source { display: none; }
.reservation-emails { width: 90%!important; margin-bottom: 8px; }
.btn-add-row, .btn-add-review, .btn-add-case, .btn-add-resmail { font-size: 12px; color: #fff; background-color: #169FC6; border: 0px; border-radius: 3px; margin: 10px 10px 0px 0px; padding: 4px 12px; float: right; }
.btn-del-row, .btn-del-file, .btn-del-resmail { font-size: 12px; background-color: #eee; border: 1px solid #999; border-radius: 3px; margin: 0px 5px; padding: 3px 10px; }

.confirm-image { background-color: #eee; margin: 20px 0px 20px 0px; padding: 20px; }
.confirm-before, .confirm-after { width: 250px; display: inline-block; margin-bottom: 15px; }
.confirm-arrow { width: 20px;display: inline-block; }
.confirm-text { padding: 0px 0px 20px 0px; }
.confirm-review { padding: 20px 0px 20px 0px; }
.confirm-review .box { display: block; margin: 10px 0px 10px 0px; }
.confirm-review .box .title { display: block; background-color: #eee; margin-bottom: 10px; padding: 10px; }
.confirm-review .box .image { width: 250px; display: inline-block; vertical-align: top; }
.confirm-review .box .image img { width: 100%; }
.confirm-review .box .content { width: 630px; display: inline-block; vertical-align: top; }

.text-center { text-align: center; }
.w50p { width: 50%; }
.w45p { width: 45%; }
.w40p { width: 40%; }
.w30p { width: 30%; }
.w10p { width: 10%; }
.p20 { padding: 20px; }
.p10 { padding: 10px; }
.p5 { padding: 5px; }
.m5 { margin: 5px; }
.fr { float: right; }
.fl { float: left; }

.file { display: none!important; }
/*.message { font-weight: bold; color: red; text-align: center; padding: 20px 10px 20px 10px; }*/
.message-input { color: red; padding-top: 5px; }
.message-layer { position: absolute; top: 0; left: 0; width: 100%; font-size: 12px; font-weight: bold; color: red; border-bottom: 2px solid #ddd; background-color: #fff; padding: 5px 0px; z-index: 100; display: none; }
.btn-upload { cursor: pointer; }
.img-fullsize { width: 100%; }
.save { position: absolute; z-index: 9999; top: 50%; left: -45px; width: 70px; height: 70px; margin-top: -90px; }
.loading { position: absolute; z-index: 9999; left: 2px; top: 50%; margin-top: -15px; }
.textarea .save { position: absolute; z-index: 9999; top: 50%; left: -66px; width: 70px; height: 70px; margin-top: -123px; }
.textarea .loading { position: absolute; z-index: 9999; left: -18px; top: 50%; margin-top: -15px; }
.cleditorMain { border: 3px solid #ddd!important; }
.string-count { position: absolute; top: 112px; right: 0px; font-size: 12px; }
.string-count i { font-style: normal; }

footer { color: #fff; background-color: #169FC6; margin-top: 60px; padding: 20px 0px 20px 0px; text-align: right; }

.pc { display: block!important; }
.sp { display: none!important; }
.inline { display: inline-block!important; }

/* iPad */
@media only screen and (max-width: 768px) {
    .step-top .step-top-header { font-size: 13px; }
    .step-top .step-top-title { font-size: 16px; text-align: justify; }
    .step-top .step-top-title strong { font-size: 28px; font-family: "Yu Mincho"; color: #169fc6; }
    .step-top .step-top-banner { width: 100%; height: 100%; margin: 20px auto 0; }
    .step-top .step-top-banner .slick-slide { height: 380px; }
    .step-top .step-top-banner .slick-slide img { width: 100%; }
    .step-top .step-top-banner-text { width: 100%; margin: 1% auto; text-align: center; display: table; }
    .step-top .slick-dots { display: none!important; }
    .step-top .step-top-button button { width: 80%; }
    .step-top .step-top-button { margin-top: 0px; }
    .step-top .slick-prev { width: 12px; height: 12px; margin-top: -6px; left: -11px; }
    .step-top .slick-next { width: 12px; height: 12px; margin-top: -6px; right: -11px; }

    .step-top .step-top-contact dl { width: 100%; display: block; text-align: center; }
    .step-top .step-top-contact dl dt { width: 100%; display: block; }
    .step-top .step-top-contact dl dd { width: 100%; display: block; padding: 20px 0px 10px 0px; }
    .step-top .step-top-contact dl dd strong { font-size: 15px; }

    .title-header { margin-bottom: 50px; display: block; }
    .title-header h1.title { font-size: 13px; display: block; }
    .title-header p { padding-top: 17px; float: right; }

    #step-seletor { width: 100%; font-size: 14px; margin: 0 auto; padding: 20px 0px 10px 0px; text-align: left; background-color: #ddd; }
    #step-seletor li { width: 90%; background-color: #fff; display: block; text-align: left; margin: 0px auto 10px; padding-left: 20px; }
    #step-seletor li span.br:before { content: "　"; }
    #step-seletor span.arrow { display: none; }

    .area-step .text { clear: both; margin-bottom: 20px; }
    .area-step .text strong { float: none; padding: 10px 0px 10px 0px; }
    .area-step .text a { float: none; margin-bottom: 10px; }
    .area-step dl { display: block; }
    .area-step dl dt { width: 100%; display: block; }
    .area-step dl dd { width: 100%; padding: 20px 0px; display: block; }
    .area-step .map-code { display: block; }
    .area-step .map-code label { width: 100%; display: block; }
    .area-step .map-code input { width: 100%; }
    .area-step #address { width: 70%; }
    .area-step .btn-map { padding: 10px 5px; }
    .area-step .upload-box { width: 100%; display: block; }
    .area-preview { display: none; }

    .area-confirm dl { display: block; }
    .area-confirm dl dt { width: 100%; display: block; padding: 10px; }
    .area-confirm dl dd { width: 100%; display: block; padding: 10px; }
    .area-confirm dl img { width: 100%; }
    .area-confirm .top-image-pc { width: 100%; height: auto; }
    .area-confirm .top-image-sp { width: 100%; height: auto; }
    .area-confirm .upload-box { width: 100%; }
    .area-confirm .upload-box .upload-preview { width: 100%; height: auto; display: block; }
    .confirm-review .box .image { width: 100%; display: block; }
    .confirm-review .box .content { width: 100%; display: block; }

    input.sns { width: 100%; margin-top: 7px; }
    .area-notice { text-align: justify; }
    .reservation-form dd select { width: 80px; }

    .area-template { display: block; }
    .area-template .template-item { display: block; }
    .area-template .template-item .template-image { width: 100%; height: auto; }
    .area-template .template-item .template-image img { width: 100%; margin: 0 auto; }
    .area-template .template-item .template-image a { width: 100%; }
    .area-template .template-item .template-select { width: 100%; }

    .area-btn { height: 160px; }
    .area-btn button { width: 90%; margin: 0px; }
    .area-btn button.btn-prev { margin-bottom: 10px; }
    .area-confirm-btn button { width: 90%; margin: 0px; }
    .btn-complete { margin-top: 20px!important; }

    .area-complete h3 { font-size: 20px; }
    .area-complete h4 { font-size: 15px; }
    .area-complete .url { font-size: 14px; width: 100%; }
    .area-complete .text { font-size: 14px; }
    .area-complete .desc { font-size: 14px; }
    .area-complete .area-btn { height: auto; }

    .reservation-form dd { font-size: 12px; }
    .reservation-form dd select { width: 88px; font-size: 10px; }
    .reservation-emails { width: 70%!important; }

    footer { margin-top: 20px; text-align: center; }
    footer span:before { content: "\A"; white-space: pre; }

    .w45p { width: 39%; }
    .w30p { width: 26%; }
    .w10p { width: 22%; }
    .btn-del-row, .btn-del-file { margin: 0px 5px; padding: 3px 5px; }
    .save { left: -10px; margin-top: -95px; }
    .loading { left: 5px; }
    .textarea .save { left: -10px; margin-top: -130px; }
    .textarea .loading { left: 5px; }

    .pc { display: none!important; }
    .sp { display: block!important; }
}


@media only screen and (max-width: 414px) {
    .step-top .step-top-banner .slick-slide { height: 200px; }
}

/* iPhone 7 */
@media only screen and (max-width: 375px) {
    .step-top .step-top-banner .slick-slide { height: 180px; }
}

/* Galaxy S5 */
@media only screen and (max-width: 360px) {
    .step-top .step-top-banner .slick-slide { height: 173px; }
}

/* iPhone 5, iPhone SE */
@media only screen and (max-width: 320px) {
    .step-top .step-top-banner .slick-slide { height: 150px; }
}