.order .orderBox input[type='text'].check {border:1px solid #f30}

.order .delivery .content > div {display: none}
.order .delivery .content > div#motorcycle {display: block}
.order .swiper-container {position:relative; width: 1200px; height: 50px; margin-bottom: 30px; border: 1px solid #d4d8e5; padding-left: 60px; border-radius: 5px; background-color:#f3f4f7;}
.order .swiper-container::before {content: ''; display: block; position: absolute; top: 6px; left: 20px; width: 30px; height: 30px; background: url("../images/ico.png") 0 0; background-size: auto 90px}
.order .swiper-container .swiper-slide {display: flex; align-items: center}
.order .stit {position:relative; height: 35px; margin-bottom:5px; align-items: baseline; column-gap: 10px}
.order .stit p{ color: #808080; }
.order .stit h3 {font-size:1.25em;}
.order .stit dl {column-gap: 10px;}

.order .subBdy {position: relative; width: min(1200px, 100%); min-width: 1200px; height: auto; margin: 0 auto;}

.order main {position: relative; display: grid; grid-template-columns: 820px 340px; grid-template-rows: auto auto; column-gap: 40px; row-gap: 10px;}
.order main .by1 {grid-column: 1 / 2; grid-row: 1 / 2;}
.order main .by2 {grid-column: 1 / 2; grid-row: 2 / 3;}
.order main .by3 {grid-column: 2 / 3; grid-row: 1 / 3; position: relative}
.order main .by3 aside {position: sticky; top: 0; }
.order main .rev {position: absolute; top: 330px; left: 400px; width: 200px; }
.order main .rev .s-time {display: flex; justify-content: flex-end}
.order main .rev .s-rsv {display: none}
.order main .rev.on .s-time {display: none;}
.order main .rev.on .s-rsv { display: flex; justify-content: flex-end; column-gap: 5px}
.order main .rev .e-time {display: none}

.order main .btnTime {display: flex; align-items: center; height: 28px; padding: 0 10px 0 5px; }
.order main .btnTime::before {content: ''; width: 20px; height: 20px; background: url("../images/ico.png") -40px 0; background-size: auto 60px; filter: invert(1)}


.step.by2 .toggleWrap {position: absolute; top: 330px; left: 610px;}
.step.by2 dt {display: none}

.order article {margin-bottom: 20px;}
.step.by1 article:nth-child(2) {margin-bottom: 0}
.order .orderBox.delivery {margin-bottom: 0}
.order .orderBox {margin-bottom: 10px; border-radius: 10px; background: var(--bg-light)}
.order .orderBox input[type='text'] { height: 30px; padding: 0 5px; border: 1px solid var(--bd-basic); border-radius: 5px}
.order .orderBox .ess::before { content: '*'; position: absolute; top: 0; left: 0; padding: 2px; font-size: 1.25em; color: var(--red)}
.order .orderBox .rev label {font-size: .75em; padding: 3px; background: #dbdfe9 }
.order .client {position: relative; padding: 15px}
.order .client dl {display: flex}
.order .client p {position: relative; padding-left: 15px }
.order .client input {width: 180px}
.order .route {position: relative; padding: 15px}
.order .route::after {position: absolute; top: 0; left: 50%; content: ''; width: 1px; height: 100%; background: var(--bd-basic)}
.order .route dl {width: calc(50% - 30px)}
.order .route ul {position: relative; width: 60px}
.order .route ul li {position: absolute; top: calc(50% - 20px); left:  calc(50% - 20px); z-index: 10}
.order .route ul button {display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 2px solid #050d32; border-radius: 50%; background: #fff}
.order .route ul button::after {content: ''; width: 30px; height: 30px; background: url("../images/btn.png") -1px -1px; background-size: auto 60px;}
.order .route dt {margin-bottom: 5px}
.order .route dd p {position: relative; margin-bottom: 5px; padding-left: 15px }
.order .route dd p input {width: 100%}
.order .route dd p.df input:first-child {width: calc(60% - 5px)}
.order .route dd p.df input:last-child {width: 40%}
.order .route dd p.adr button {position: absolute; top:5px; right: 5px; width: 20px; height: 20px; border: none; border-radius: 3px; text-indent: -9000px; background: #787b8b; z-index: 10}
.order .route dd p.adr button::after {position: absolute; top: 0; left: 0; content: ''; display: block; width: 20px; height: 20px; background: url("../images/ico.png") -20px 0 / auto 60px; filter: invert(1)}
.order .delivery {min-height: 420px; border:1px solid var(--bd-basic); overflow: hidden}
.order .delivery .tab {width:100%; height:60px;}
.order .delivery .tab ul {display: flex; height: inherit}
.order .delivery .tab ul li {display: flex; align-items: center; justify-content: center; width: calc(100% / 4); border-bottom:1px solid var(--bd-basic); border-right:1px solid var(--bd-basic); font-size:1.125em; cursor:pointer; background-color: #fff}
.order .delivery .tab ul li:last-child {border-right:none}
.order .delivery .tab ul li::before {content: ''; width: 60px; height: 60px; background-image: url("../images/transport.png"); background-size: auto 120px;}
.order .delivery .tab ul li.damas::before {background-position: -60px 0}
.order .delivery .tab ul li.rabo::before {background-position: 0 -60px}
.order .delivery .tab ul li.truck::before {background-position:  -60px -60px}
.order .delivery .tab ul li.on { color:var(--blue); border-bottom:none; border-top: 3px solid var(--blue); background-color: transparent}
.order .delivery .content {min-height: 260px; padding: 10px 15px 0; border-bottom: 1px solid var(--border-basic)}
.order .orderBox.memo {padding: 15px;}
.order .orderBox.memo select {width: 100%;}

.load .carType {width: 100%; height: 70px; display: flex; border: 1px solid #ddd; border-radius: 10px; overflow: hidden; background: #fff}
.load .carType ul {width: 30%; height: inherit; overflow: hidden}
.load .carType ul li {height: inherit; overflow: hidden}
.load .carType ul li img {width: 100%; height: 100%; object-fit: contain}
.load .info {width: 70%; height: inherit; display: flex; flex-wrap: wrap}
.load .info dl {display: flex; width: 50%; height: 50%; border-bottom: 1px solid #ddd}
.load .info dl:nth-child(3), .load .info dl:nth-child(4) {border-bottom: none}
.load .info dl dt {display: flex; justify-content: center; align-items: center; width: 80px; border-left: 1px solid #ddd}
.load .info dl dd {display: flex; justify-content: center; align-items: center; width:calc(100% - 80px); border-left: 1px solid #ddd}
.load label {display: none}

.cycle .opt {display: flex; justify-content: center; column-gap: 10px; margin-bottom: 20px}
.cycle .opt dl {display: flex; justify-content: center; align-items: center; flex-direction: column; width:150px; border-radius: 5px; background: #fff}
.cycle .opt dl .vol {display: none}
.cycle .opt dl.on {position: relative; color: #fff; background-color: var(--blue)}
.cycle .opt dl.on .vol {display: block}
.cycle .opt dl.on .vol span {display: flex; justify-content: center; align-items: center; position: absolute; top: 10px; left: calc(50% - 30px); width: 60px; height: 60px; font-size: 1.25em; font-family: 'S-CoreDream-5Medium'; text-shadow: 2px 2px 1px #00000080; z-index: 100}
.cycle .opt dl.on .vol button {position: absolute; top: 5px; right: 5px; width: 30px; height: 30px; border: none; border-radius: 5px; font-size: 2em; line-height: 1; background: #101634; z-index: 100}
.cycle .opt.volume dl {height: 120px}
.cycle .opt.volume dl::before { content: ''; width: 60px; height: 60px; background-image: url("../images/box.png"); background-size: auto 120px;}
.cycle .opt.volume dl.bag::before {background-position: -60px 0}
.cycle .opt.volume dl.boxS::before {background-position: 0 -60px}
.cycle .opt.volume dl.boxM::before {background-position: -60px -60px}
.cycle .opt.volume dl.boxL::before {background-position: -120px -60px}
.cycle .opt.volume dl.on::before {opacity: .4;}
.cycle .opt.volume dd {font-size: .75em; opacity: .75}
.cycle .opt.weight {height: 40px}
.cycle .opt.weight dl {width: calc(100% / 4 - 8px)}

.van {position: relative}
.van h3 {display: inline-block; padding: 0 5px;}
.van h3 + span {font-size: .875em}
.van .opt {display: flex; justify-content: space-between; column-gap: 10px; margin-bottom: 20px;}
.van .opt dl {display: flex; justify-content: center; align-items: center; flex-direction: column; border-radius: 5px; padding: 0 10px; background: #fff}

.van .opt.volume { column-gap: 10px}
.van .opt.volume dl {width: calc(100% / 4 - 10px); height: 120px}
.van .opt.volume dl.on {color: #fff; background: var(--blue);}
.van .opt.volume dl.on select {background: #00000080}
.van .opt.volume dl::before { content: ''; width: 60px; height: 60px; background-image: url("../images/goods.png"); background-size: auto 120px;}
.van .opt.volume dl.box::before {background-position: -60px 0}
.van .opt.volume dl.furn::before {background-position: 0 -60px}
.van .opt.volume dl.etc::before {background-position: -60px -60px}
.van .opt.volume dl.carp::before {background-position: -120px 0px}
.van .opt.volume dd {width: 100%; font-size: .75em; opacity: .75; text-align: center}
.van .opt.volume dd select {width: 100%}
.van .opt.volume dd input {width: 100%}

.van .opt.weight {height: auto; column-gap: 10px; row-gap: 15px; margin-bottom: 20px}
.van .opt.weight dl {width: calc(100% / 4 - 10px); padding: 5px; background: #fff; cursor: pointer}
.van .opt.weight dl.on {color: #fff; background: var(--blue);}
.van .opt.weight dl.on dt {background: #0000341a;}
.van .opt.weight dt {width: 100%; text-align: center; font-size: .875em; border-radius: 3px; background: #0000000f}
.van .opt.weight dd {width: 100%; font-size: .75em; opacity: .75; padding: 0 5px}

.toggle label {width: 50px; height: 26px; font-size: 14px; background-color: transparent}

#truck.van .opt.car {width: 30%; height: 100%; align-items: center}
#truck.van .opt.car dl {flex-direction: row; width: 100%; }
#car-options::before { content: ''; width: 100px; height: 60px; background-image: url("../images/car.jpg"); background-size: 200px auto;}
#car-options.jabara::before {background-position: -100px 0}
#car-options.lift::before {background-position: 0 -60px}
#car-options.liftWing::before {background-position: -100px -60px}
#car-options.wingBody::before {background-position: 0 -120px}
#car-options.highTop::before {background-position: -100px -120px}
#car-options.freezer::before {background-position: 0 -180px}

.order aside {width: 340px; padding-top: 40px}
.order .orderBox.side {display: flex; flex-direction: column; padding: 15px; row-gap: 15px}
.order .orderBox.side.check ul {display: flex; flex-direction: column; row-gap: 5px}
.order .orderBox.side.check li {position: relative; display: flex; align-items: center; padding-left: 20px; min-height: 40px; border: 1px solid var(--bd-basic); border-radius: 5px; background: #fff }
.order .orderBox.side.check li::before {position: absolute; left: -10px; content: ''; width: 18px; height: 18px; border: 1px solid var(--bd-basic); border-radius: 50%; background: #fff;} 
.order .orderBox.side.check li label {width: 60px; font-size: .75em; color: #808080}
.order .orderBox.side.check li span {width: calc(100% - 70px); font-size: .875em; padding: 5px 0;}
.order .orderBox.side.check li.on::before {border: 1px solid #3a67ea; background: url("../images/ico.png") -40px -20px #3a67ea; background-size: auto 60px}
.order .orderBox.side.check li.on label {color: #3a67ea;}
.order .orderBox.side.check li[name='check_box'] span {width: calc(50% - 5px)}
.order .orderBox.side.check li[name='check_box'] span:last-child {width: calc(50% - 70px)}

.order .orderBox.side .payment .tab { display: flex; column-gap: 5px}
.order .orderBox.side .payment .tab button {display: flex; justify-content: center; align-items: center; flex-direction: column; width: calc(100% / 4 - 4px); height: 30px; border: 1px solid var(--bd-basic); border-radius: 5px; font-size: .875em; background: #fff; cursor: pointer}
.order .orderBox.side .payment .bdy {margin-top: 5px; border-radius: 5px; font-size: .875em; background: #fff;}
.order .orderBox.side .payment .bdy > div {display: none; padding: 10px}
.order .orderBox.side .payment .bdy .hidden {display: none}
#card dt { margin-bottom: 10px; align-items: center; column-gap: 10px}
#card dt p {display: flex; align-items: center}

.order .orderBox.side .tab button.on {color: #fff; border-color:  var(--blue); background-color: var(--blue)}
.order .orderBox.side .price {padding: 10px; background: #fff}
.order .orderBox.side .price li {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 4px}
.order .orderBox.side .price li label {width: 50%; font-size: .875em}
.order .orderBox.side .price li span {display: flex; width: 50%; align-items: center; justify-content: flex-end}
.order .orderBox.side .price li p {display: flex; justify-content: space-between; align-items: center; width: 100%; padding-top: 4px}
.order .orderBox.side .price li p label::before {content: '└';}
.order .orderBox.side .price input[type='text'] {width: 100px; height: 26px; text-align: right}
.order .orderBox.side .price em {width: 20px; text-align: right}
.order .orderBox.side .price li.sum {margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bd-basic)}
.order .orderBox.side .price li.sum span {color: #ff3c07}
.order .orderBox.side .button button {width: 100%; height: 50px; border: none; border-radius: 10px; font-size: 1.25em; }

.loadSize {display: none; position: absolute; left: 50%; width: 800px; border: 1px solid #ccc; background: #fff; box-shadow: 2px 2px 5px #00000033; z-index: 100;}
.loadSize .loadHdr {width: 100%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ccc; background: var(--bg-light)}
.loadSize .loadHdr dt {padding-left: 15px}
.loadSize .loadBdy {display: flex; flex-wrap: wrap; gap:16px; padding: 16px}
.loadSize .carType {width: calc(50% - 8px); display: flex; border: 1px solid #ddd; border-radius: 10px; overflow: hidden}
.loadSize .carType ul {position: relative; width: 140px; overflow: hidden}
.loadSize .carType ul li {height: 120px; overflow: hidden}
.loadSize .carType ul li img {width: 100%; height: 100%; object-fit: contain}
.loadSize .info {width: calc(100% - 140px); height: 100%; display: flex; flex-direction: column}
.loadSize .info dl {display: flex; height: 25%; border-bottom: 1px solid #ddd}
.loadSize .info dl:last-child {border-bottom: none}
.loadSize .info dl dt {display: flex; justify-content: center; align-items: center; width: 80px; border-left: 1px solid #ddd}
.loadSize .info dl dd {display: flex; justify-content: center; align-items: center; width:calc(100% - 80px); border-left: 1px solid #ddd}
.loadSize label {position: absolute; top: 0; padding: 0 10px; background: #eee; z-index: 10}
.chargeGuide {display: none; position: relative;}
.chargeGuide dl {position: absolute; top: 0; font-size: .875em; padding: 5px; border: 1px solid #ccc; background: #fff; box-shadow: 2px 2px 5px #00000033; z-index: 100}
.chargeGuide dt {display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd;}
.chargeGuide dt h3 {padding-left: 5px}
.chargeGuide dd {padding: 5px; color: #777;}

.frmPop .join li {flex-direction: column; row-gap: 10px}
.frmPop .join li button.orderGuest {display: flex}

.process {display: flex; justify-content: space-around; height: 120px; border-radius: 10px; background: url("../images/process.png") #7991cf repeat-x bottom 15px left; }
.process dl { display: flex; justify-content: center; flex-direction: column; width: calc(100% / 5 - 20px)}
.process dl.traffic {width: 180px;}
.process dt {text-align: center}
.process dt label {padding: 0 10px; border-radius: 15px; color: #fff; background: #394670}
.process dd {position: relative; width: 100%; height: 80px}
.process dd span {position: absolute; top: 0; left: 0; display: block; width: 90px; height: 90px; background-image: url("../images/process_icon.png"); background-size: auto 270px}
.process dd span.client {top: -8px; background-position: 0 0; z-index: 10}
.process dd span.man {top: -8px; left: 29px; background-position: -90px 0}
.process dd span.rider {top: 0; left: 0px; background-position:  -180px 0; z-index: 10}
.process dd span.bike {top: 0; left: 0px; background-position: -180px  -90px}
.process dd span.air {top: -40px; left: 120px; background-position: -180px -180px}
.process dd span.train {top: -13px; left: 0px; width: 180px; background-position: -0px -180px}
.process dd span.bus {top: 0; left: 0px; background-position: -90px  -90px; z-index: 10}
.process dl.end span.man {top: -8px; left: 0; background-position: -90px 0; transform: scaleX(-1);}
.process dd span.recipient {top: -8px; left: 60px; background-position: 0 -90px; z-index: 10}

.location {display: none;}
.subBdy .btnArea {display: none;}

#bill span {color: var(--red); font-size: 13px}


@media only screen and (max-width:568px) and (orientation: portrait){
    section {padding-bottom: 0;}
    #layer {padding-top: 40px; background: #000}
    .subTop {margin-bottom: 0; min-height: 50px;}
    .order .subBdy {width: 100vw; min-width: 0; height: calc(100vh - 50px); padding: 0; overflow: hidden;}
    .subBdy main {display: flex; width: 300vw; height: calc(100% - 70px); column-gap: 0; margin: 0 auto; }
    .subBdy.step2 main {margin-left: -100vw}
    .subBdy.step3 main {margin-left: -200vw}
    .subBdy main .step {width: 100vw; overflow-y: auto}
    .order .orderBox dt {font-size: .75em}
    .order .orderBox.side.check {margin-bottom: 20px}
    .order .orderBox.side.check li {height: auto; min-height: 30px}

    .step.by1 {height: calc(100% - 50px); padding-top: 10px; overflow-y: auto}
    .step.by2 {padding-top: 10px}
    .step.by2 .toggleWrap {position: static;}
    .step.by2 dt {display: block}
    .order main .rev {position: static; width: 100%;}
    .order main .rev .s-time {justify-content: flex-start}
    .order main .rev.on .s-rsv {justify-content: flex-start}
    .order .step.by2 .orderBox {margin: 0 10px 10px; }
    .order aside {width: 100%}
    .order aside .check {width: calc(100% - 20px); margin: 0 auto;}

    .subBdy .priceBox.orderBox.side {position: fixed; row-gap:0; left: 0; bottom: 40px; padding: 0; margin-bottom: 0; width: 100%; z-index: 100}
    .subBdy .priceBox.orderBox.side .price {padding: 0;}
    .subBdy .priceBox.orderBox.side .price li:not(.sum) {display: none}
    .subBdy .priceBox.orderBox.side .price li.sum {padding: 10px}
    .subBdy .priceBox.orderBox.side .button {position: fixed; bottom: -40px}
    .subBdy.step2 .priceBox.orderBox.side .price {padding-top: 6px; border-top: 1px solid var(--bd-basic);}
    .subBdy.step2 .priceBox.orderBox.side .price li.opt {display: flex; padding: 0 10px; padding-top: 4px; margin-bottom: 0}
    .subBdy.step3 .priceBox.orderBox.side .price {border-top: 1px solid var(--bd-basic);}
    .subBdy.step3 .priceBox.orderBox.side .price li {display: flex; padding: 0 10px}
    .subBdy.step3 .priceBox.orderBox.side .button {left: 65px; bottom: 0; width: calc(100% - 110px)}
    .subBdy.step3 .priceBox.orderBox.side .button button {width: 100%; height: 40px}
    .subBdy.step3 .step.by3 .priceBox.orderBox.side {position: static}
    .order .subBdy.step3 aside {padding-top: 10px}
    .order .orderBox.side .button button {height: 40px}

    
    .subBdy .btnArea {display: flex; column-gap: 5px; width: 100%;}
    .subBdy .btnArea .prev {width: 60px}
    .subBdy .btnArea .next {width: calc(100% - 110px);}
    .subBdy .btnArea .call {width: 40px; text-indent: -180px; background: url("../images/call.png") no-repeat #26c76a center / 75%; overflow: hidden; }
    
    .subBdy.step1 .btnArea .prev {display: none}
    .subBdy.step1 .btnArea .next {width: calc(100% - 45px);}

    .order .route {padding: 5px;}
    .order article {margin-bottom: 20px;}
    .order .subMenu {display: none;}
    .order .stit {display: none;}
    .order .swiper-container {display: none;}

    .order .delivery {min-height: 85vw;}
    .order .delivery .tab {height: 35px;}
    .order .delivery .tab ul li {font-size: 1em}
    .order .delivery .content {padding: 5px; min-height: 10px;}
    .order .delivery .content h3 {display: none;}
    .order .delivery .content .carType {display: none;}
    .order .delivery .memo {display: none;}
    .cycle .opt.volume {gap: 5px;}
    .cycle .opt.volume dl {width: calc(100% / 5 - 5px); height: 90px;}
    .cycle .opt.volume dt {font-size: .875em;}
    .cycle .opt.volume dd {display: none;}
    .cycle .opt.weight {gap: 5px;}
    .cycle .opt.weight dl {width: calc(100% / 4 - 5px); height: 30px; text-align: center; line-height: 30px; justify-content: flex-start; overflow: hidden;}

    .order .swiper-container {width: calc(100% - 20px); height: 40px; padding-left:40px}
    .order .swiper-container::before {top: 2px; left: 5px;}
    .order .swiper-container .swiper-slide a {width: calc(100% - 20px); white-space: nowrap; text-overflow: ellipsis; overflow: hidden}
    .order .route{flex-direction: column}
    .order .route dl {width: 100%}
    .order .route dd {display: grid; grid-template-columns: 30% 30% 40%; grid-template-rows: 30px 30px;}
    .order .route dd p.adr {grid-column: 1 / 3; grid-row: 1 / 2}
    .order .route dd p.adr2 {grid-column: 3 / 4; grid-row: 1 / 2}
    .order .route dd p.cpn {grid-column: 1 / 3; grid-row: 2 / 3; column-gap: 0}
    .order .route dd p.phn {grid-column: 3 / 4; grid-row: 2 / 3}
    .order .route dd p {padding-left: 10px;}
    .order .route dd p.df input:first-child {width: 60%;}
    
    .order .route ul {width: 100%; height: 10px}
    .order .route ul li {top: -1px}
    .order .route ul button {width: 30px; height: 30px}
    .order .route ul button::after {width: 25px; height: 25px; transform: rotate(90deg); background: url("../images/btn.png") -1px -1px / auto 50px}
    .order .route::after {top: calc(50% - 3px); left: 0; width: 100%; height: 1px}
    
    .order .client dl {flex-direction: column; row-gap:5px}
    .order .client dd {flex-wrap: wrap; row-gap: 5px}
    .order .client dd .name {order: 1; width: calc(100% - 90px);}
    .order .client dd .button {padding-left: 0}
    .order .client dd .button {order: 2; width: 80px}
    .order .client dd .phone {order: 3; width: calc(50% - 5px); padding-left: 0;}
    .order .client dd .phone.ess {padding-left: 15px;}
    .order .client dd .phone input {width: 100%;}
    .order .stit {height: auto; flex-direction: column; font-size: .875em}
    .order .process {zoom: .75; border-radius: 0}

    .van .opt.volume {justify-content:space-between; gap: 5px;}
    .van .opt.volume dl {width: calc(100% / 4 - 5px); height: 120px}
    .van .opt.volume dt {font-size: .875em;}
    .van .opt.volume dt span {display: none;}
    
    .van .opt.weight dd {display: none}
    .truckBot {display: flex}
    .truckBot li {width: 50%}
    .truckBot .opt.weight {flex-wrap: wrap; row-gap: 5px; justify-content: flex-start}
    .truckBot .opt.weight dl {width: auto}
    .order .delivery .content .truckBot h3 {display: block}
    .order .delivery .content .truckBot h3 + span {display: none}
    .order .delivery .content #truck .carType {display: flex}

    #truck #car-options {height: 60px}
    #truck .load {margin-bottom: 10px}
    #truck .load .info {display: none}
    #truck.van .opt.car {width: 60%}
    #truck.van .opt.volume {position: relative}
    #truck.van .opt.volume dl.carp {position: absolute; top: -75px; right: 5px; height: 60px;}
    #truck.van .opt.volume dl.carp::before {height: 45px}
    #truck.van .opt.volume dl.carp dd {display: none}
    
    .step.by1 article {width: calc(100% - 20px); margin: 0 auto}
    .orderDetail dl {display: flex; flex-wrap: wrap; margin: 0 10px}
    .orderDetail dl dt {width: 100%; margin-bottom: 5px}
    .orderDetail dl dd {margin-bottom: 5px}
    .orderDetail dl .s-time {width: 120px; }
    .orderDetail dl .s-rsv {width: calc(100% - 120px)}
    .orderDetail .toggleWrap {height: auto}

    .location {display: block; height: 30px; color: #ffffffcc; background: #394670;}
    .location ul {display: flex; height: 30px;}
    .location ul li {position: relative; flex: 1; display: flex; justify-content: center; align-items: center;}
    .location ul li::after {content: ''; position: absolute; right: -15px; width: 0; height: 0; 
        border-bottom: 15px solid transparent; border-left: 15px solid #394670; border-top: 15px solid transparent; z-index: 10}
    .location ul li.on {background: var(--blue)}
    .location ul li.on::after { border-left: 15px solid var(--blue) }
    
    .order .client {display: block; padding: 5px;}
    .order .client #phone2 {display: none}
    .order .client dd {flex-wrap: nowrap}
    .order .client dd .name {width: 50%}
    .order .client dd .phone {display: none}
    .order .client dd .phone.ess {display: block}
    .order .client dd .button {display: none}
    .order .client input {width: 100%}
    
    
    footer {display: none;}
}