input[type=text] , input[type=number] , input[type=tel] , select { border-color: #ebebeb; border-radius: 0; color: #999; }
input::placeholder { color: #ababab; }
select { padding: .63rem 1rem; font-weight: bold; font-size: 16px; }
select option { font-weight: bold; color: #999; }

/* order_form */
.order_form { margin-bottom: 35px; }

/* order_box */
.order_box { margin-top: 35px; padding: 15px 22px 22px; background: #f8f8f8; }
.order_box h5 { margin: 0 10px 3px; letter-spacing: .1em; font-weight: 500; font-size: 21px; color: #141414; }
.order_box h5 b { padding: 0 10px 0 0; color: #f90606; }
.order_box h5 font { margin-left: 20px; }
.order_box h5.order_title { display: flex; align-items: center; }
.order_box h5.order_title strong { margin: 0 10px; font-weight: 400; font-size: 21px; }
.order_box>div { padding: 5px 10px; background: #fff; border: 1px #eee solid; }
.order_box .input_list { padding: 30px 25px; }
.order_box .input_list p { border-bottom: 1px #e8e8e8 solid; display: flex; align-items: stretch; }
.order_box .input_list p.last_child { border-bottom-color: transparent; }
.order_box .input_list p label { margin-right: 1.5em; padding: .8em 1em; min-width: 9em; width: 9em; background: #f1f1f1; display: flex; align-items: center; font-size: 18px; color: #686868; }
.order_box .input_list p font { width: 1%; display: flex; flex-wrap: wrap; align-items: center; flex: 1 auto; }
.order_box .input_list p font.groud input { width: 1%; flex: 1 auto; border-right: 0; }
.order_box .input_list p font.groud a { padding: .3rem 4rem; border-width: 1px; border-style: solid; }
.order_box .input_list p.address select { margin-right: 1em; width: 8em; }
.order_box .input_list p.address input { width: 1%; flex: 1 auto; }
.order_box .input_list p.remarks font { padding: .5em 0; }
.order_box .input_list p.remarks span.words { width: 100%; display: flex; justify-content: flex-end; align-items: center; font-size: 15px; color: #6f6f6f; }

/* orderWrap */
.orderWrap .list { padding: 10px 20px; border-bottom: 1px #dddee4 solid; font-size: 0; }
.orderWrap .list .img { width: 40%; display: inline-block; }
.orderWrap .list .img a { display: flex; flex-wrap: wrap; align-items: center; }
.orderWrap .list .img font { padding: .2em; border: 1px #f2f2f2 solid; display: inline-block; }
.orderWrap .list .img font img { width: 70px; height: 70px; object-fit: contain; }
.orderWrap .list .img b { margin-left: 10px; width: 1%; flex: 1 auto; font-weight: 400; color: #000; }
.orderWrap .list .info { width: 60%; display: inline-block; font-size: 0; }
.orderWrap .list .info p { width: calc((100% - 25px) / 4); display: inline-block; }
.orderWrap .list .info p.qBox { display: inline-flex; justify-content: center; align-items: stretch; }
.orderWrap .list .info p.qBox a, .orderWrap .list .info p.qBox input { padding: 2px 5px; border: 1px #e1e1e1 solid; display: inline-block; color: #000; vertical-align: middle; }
.orderWrap .list .info p.qBox a { padding: 2px 7px; background: #f9f9f9; border-radius: 0 50% 50% 0; }
.orderWrap .list .info p.qBox a.limit { border-radius: 50% 0 0 50%; }
.orderWrap .list .info p.qBox input { width: 30px; border-width: 1px 0; text-align: center; }
.orderWrap .list .info p.remove, .orderWrap.course_order .list .info p.remove { width: 25px; }
.orderWrap .list .info p.remove a { color: #7f7f7f; }
.orderWrap .list.title { padding: 15px 20px; border-color: #949494; }

.orderWrap .list.add_item { padding: 5px 20px; background: #fbf1f1; }
.orderWrap .list.add_item .img { width: 83%; }
.orderWrap .list.add_item .img font { padding: 0; border: 0; }
.orderWrap .list.add_item .img font img { width: 50px; height: 50px; }
.orderWrap .list.add_item .img b { margin-left: .3em; }
.orderWrap .list.add_item .img .add_txt { margin-left: 10px; padding: .2em .3em .25em; display: block; border: 1px #db4c4c solid; border-radius: .2em; line-height: 1; font-weight: 300; font-size: 15px; color: #d12424; }
.orderWrap .list.add_item .info { width: 17%; }
.orderWrap .list.add_item .info p { width: 100%; }

/* formbox */
.formbox { margin: 40px 0; padding: 30px 50px; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px 5%; border: 5px #eee solid; }
.formbox p label { margin-bottom: 3px; display: block; letter-spacing: .1em; font-size: 21px; color: #141414; }
.formbox p input , .formbox p select { padding: .682em 1em; border-radius: .5em; border-color: #e5e5e5; }
.formbox p select { padding: 1rem; }
.formbox p span.words { display: flex; align-items: center; justify-content: flex-end; color: #6f6f6f; }
.formbox p.large { grid-column-start: 1; grid-column-end: 3; }

/* other_box */
#order .other_box p { margin-bottom: 10px; display: flex; justify-content: flex-end; align-items: center; }
#order .other_box p label { min-width: 100px; }
#order .other_box p font { margin-left: 1em; width: 200px; }
#order .other_box p font input { padding: .2rem .5rem; font-size: 14px; }

/* btns */
#order .btns { margin: 40px 60px 20px; text-align: right; font-size: 0; }
#order .btns a { margin: 0 20px 0 0; padding: 7px 30px; display: inline-block; border: 1px #c0c0c0 solid; color: #504f4f; }
#order .btns a#btnClean { margin: 0; background: #504f4f; border-color: #504f4f; color: #fff; }

/* checknum */
.checknum { margin: 0 5%; text-align: right; }
.checknum input { margin-right: 15px; width: 200px; }

/* order_bottom_txt */
.order_bottom_txt {position: absolute;padding: 15px 0;width: 100%;bottom: 12vw;left: 0;opacity: 0;z-index: 1000;}
.order_bottom_txt.fixed {position: fixed;background: #fff;box-shadow: 0 0 20px rgb(0 0 0 / .3);opacity: 1;bottom: 0;}
.order_bottom_txt.absolute-bt { opacity: 1; }
.order_bottom_txt p { margin: 10px 5%; width: 40%; }
.order_bottom_txt p label { min-width: 6em; display: inline-block; line-height: 24px; vertical-align: text-top; }
.order_bottom_txt p font { display: block; line-height: 1; }
.order_bottom_txt p font#totaltxt { margin: 0 0 0 20px; min-width: 5.5em; font-weight: 500; font-size: 22px; color: #504f4f; }
.order_bottom_txt p font#bot_note, .order_bottom_txt p font#bot_note span { display: inline-block; font-weight: 400; line-height: 1; font-size: 14px; color: #504f4f; }
.order_bottom_txt p font#bot_note { position: relative; line-height: 24px; }
.order_bottom_txt p font#bot_note span#freetxt { margin-right: 5px; }
.order_bottom_txt p font#bot_note span.numtxt { font-size: 16px; }
.order_bottom_txt p font#bot_note a , .order_bottom_txt p font#bot_note i { display: inline-block; font-size: 13px; vertical-align: initial; color: #f33d3d; }
.order_bottom_txt p font#bot_note b { position: absolute; min-width: 120px; background: #fff; border: 1px #e8e8e8 solid; border-radius: 4px; box-shadow: 0 0 10px rgb(0 0 0 / .2); font-size: 0; right: 0; bottom: 35px; opacity: 0; }
.order_bottom_txt p font#bot_note b span { overflow: hidden; height: 0; line-height: 170%; }
.order_bottom_txt p.send a , .finish_page .contact_box .home_btn a { padding: 10px; background: #504f4f; display: block; text-align: center; color: #fff; }
.order_bottom_txt p font#bot_note b[data-type="2"] { padding: 5px 10px; opacity: 1; }
.order_bottom_txt p font#bot_note b[data-type="2"]:before, .order_bottom_txt p font#bot_note b[data-type="2"]:after { position: absolute; width: 0; height: 0; border-style: solid; border-width: 10px 8px 0 8px; border-color: #d6d6d6 transparent transparent transparent; display: inline-block; bottom: -10px; left: 20px; content: ""; }
.order_bottom_txt p font#bot_note b[data-type="2"]:after { border-width: 10px 8px 0 8px; border-top-color: #fff; bottom: -9px; }
.order_bottom_txt p font#bot_note b[data-type="2"] span { height: 23px; }

/* finish_page */
.finish_page { margin: 0 auto; width: 600px; }
.finish_page h2 { margin: 0 10px 2px; text-align: center; font-weight: 400; font-size: 24px; color: #141414; }
.finish_page h2 b img, .finish_page .contact_box p b img { width: 25px; margin-right: 10px; }
.finish_page .contact_box p b img { margin-right: -2px; margin-bottom: 2px; }
.finish_page .order_box { margin: 20px 0 30px; padding-top: 15px; }
.finish_page .order_box h5 { font-size: 20px; }
.finish_page .order_box .txttt { font-weight: 500; padding: 10px 10px 0; text-align: center; }
.finish_page .order_box .pay_list { margin-bottom: 15px; font-size: 0; }
.finish_page .order_box .pay_list:last-child { margin-bottom: 0; }
.finish_page .order_box .pay_list>* { padding: 0 10px; width: calc(100% - 160px); display: inline-block; font-weight: 400; font-size: 17px; }
.finish_page .order_box .pay_list label { width: 120px; color: #686868; }
.finish_page .order_box .pay_list font { font-family: 'Source Sans Pro', 'Noto Sans TC', 'Noto Sans SC', sans-serif; }
.finish_page .order_box .pay_list .numtxt { font-size: 18px; }
.finish_page .contact_box p { margin-bottom: 15px; text-align: center; color: #212121; }
.finish_page .contact_box p a { color: #d4318a; padding: 0px 4px; font-weight: 500; vertical-align: initial; }
.finish_page .contact_box .home_btn { margin: 35px 0 0; }

/* orderlist */
.finish_page .order_box .pay_list .orderlist { width: calc(100% - 20px); }
.orderlist .row { position: relative; padding: 10px 35px 10px 80px; border-bottom: 1px #dddee4 solid; font-size: 0; }
.orderlist .row .img a { display: block; }
.orderlist .row .img font { position: absolute; padding: 5px; border: 1px #f2f2f2 solid; display: block; left: 0; }
.orderlist .row .img font img { width: 50px; height: 45px; object-fit: contain; }
.orderlist .row .img b { font-weight: normal; color: #000; -webkit-line-clamp: 1; }
.orderlist .row .info p { margin-bottom: 0; border-bottom: 0; font-size: 16px; }
.orderlist .row .info p.sBox, .orderlist .row .info p.sBox font { width: auto; line-height: 110%; font-size: 14px; color: #696868; }
.orderlist .row .info p.qBox { position: absolute; right: 5px; bottom: 10px; color: #7b7b7b; }
.orderlist .row .info p.qBox:before { content: "x"; }
.orderlist .row .info p.pBox { display: none; }
.orderlist .row .info p.tBox { font-weight: bold; line-height: 120%; font-size: 20px; }

@media screen and (max-width:1280px) {
	.checknum { margin: 0; }
	.order_bottom_txt p { margin: 0; width: calc(100% - 250px); }
	.order_bottom_txt p.send { margin-left: 50px; width: 200px; }
}
@media screen and (max-width:1160px) {
	#wrap .order_bottom_txt .workframe { padding: 0; }
}
@media screen and (min-width:981px) {
	.orderWrap .list .info p { text-align: center; }
	.orderWrap .list .info p.sBox font.pcDisBox { display: none; }
	.orderWrap.course_order .list .img { width: 60%; }
	.orderWrap.course_order .list .info { width: 40%; }
	.orderWrap.course_order .list .info p { width: calc((100% - 25px) / 3); }
	#order .other_box { margin: 20px 60px 0; }
}
@media screen and (max-width:980px) {
	.order_box , .formbox { padding: 18px 12px; }
	.orderWrap .list.title { display: none; }
	.orderWrap .list { position: relative; padding: 10px 110px 20px; }
	.orderWrap .list .img, .orderWrap .list .info p, .orderWrap .list .info p:first-child { width: auto; display: block; }
	.orderWrap .list .img font { position: absolute; display: block; top: 50%; left: 20px; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
	.orderWrap .list .img font img { width: 60px; height: 60px; object-fit: contain; }
	.orderWrap .list .img b { margin-left: 0; }
	.orderWrap .list .info { width: auto; display: block; font-size: 20px; }
	.orderWrap .list .info p:first-child font, .orderWrap .list .info p:first-child b { font-size: 12px; color: #696868; }
	.orderWrap .list .info p.sBox, .orderWrap .list .info p.sBox font { line-height: 110%; font-size: 14px; }
	.orderWrap .list .info p.qBox { position: absolute; right: 20px; bottom: 19px; }
	.orderWrap .list .info p.pBox { display: none; }
	.orderWrap .list .info p.tBox { font-weight: bold; line-height: 140%; }
	.orderWrap .list .info p.remove { position: absolute; right: 20px; top: 5px; }
	.orderWrap .list.add_item { padding: 10px 0 10px 85px; }
	.orderWrap .list.add_item .img , .orderWrap .list.add_item .info { width: 100%; }
	.orderWrap .list.add_item .img .add_txt { margin-left: 0; }
	#order .btns { margin: 40px 0 20px; text-align: center; }
	.formbox { grid-template-columns: repeat(1, 1fr); }
	.formbox p.large { grid-column-end: auto; }
	.orderWrap.course_order .list .img b { margin: 11px 0 0px; }
	#order .other_box { margin: 20px 10px 0; }
}
@media screen and (max-width:768px) {
	.checknum { margin-bottom: 20px; }
	.order_box .input_list p.address { flex-wrap: wrap; }
	.order_box .input_list p.address font { padding: .5em 0; }
	.order_box .input_list p.address input { margin-top: .5em; width: 100%; }
	.order_bottom_txt p, .order_bottom_txt p.send {margin-left: 0;width: 100%;}
	.order_bottom_txt p.send a { margin-top: 5px; }
	.order_bottom_txt.absolute-bt { padding: 10px 0; }
	.finish_page { width: 100%; }
}
@media screen and (max-width:640px) {
	.order_bottom_txt{bottom: 23vw;}
	#wrap{padding-bottom: 35vw;}
	.waylink{margin-top: 5vw;}
	.order_bottom_txt p{flex-wrap: wrap;}
	.order_bottom_txt p font#bot_note{width:100%;margin: 4px 0 6px;}
	.order_box .input_list p { margin-bottom: .5em; padding-bottom: .5em; flex-wrap: wrap; }
	.order_box .input_list p label { padding: .2em 0; width: 100%; background: none; }
	.order_box .input_list p.address font , .order_box .input_list p.remarks font { padding: 0; }
}
@media screen and (max-width:550px) {
	#order .other_box p font { width: 1%; flex: 1 auto; }
	.order_box .input_list p font.groud a { padding: .3rem 1rem; }
}
@media screen and (max-width:450px) {
	.order_box, .formbox {padding: 18px 2%;margin-top: 0;}
	.order_box .input_list { padding: 30px 5%; }
	.orderWrap .list { padding: 10px 0 50px; }
	.orderWrap .list .img a { display: block; }
	.orderWrap .list .img font { position: relative; margin: 10px 10px 0; border: 0; text-align: center; top: auto; left: 0; -webkit-transform: translateY(0); transform: translateY(0); }
	.orderWrap .list .img font img {4/FONT-VARIANT: JIS83;height: auto;aspect-ratio: 4/3;object-fit: cover;width: 80%;}
	.orderWrap.course_order .list .img b { margin: 0px 0 0px; }
	.orderWrap .list .img b { width: 100%; text-align: center; }
	.orderWrap .list .info { width: 100%; margin-bottom: 10px; }
	.orderWrap .list .info p { text-align: center; }
	.orderWrap .list .info p.qBox { right: calc((100% - 140px) / 2); bottom: 12px; }
	.orderWrap .list .info p.qBox a, .orderWrap .list .info p.qBox a.limit { padding: 2px 10px; border-radius: 0; }
	.orderWrap .list .info p.qBox input { width: 70px; }
	.orderWrap .list.add_item { padding: 10px 0 0; }
	.orderWrap .list.add_item .img .add_txt { position: absolute; top: 10px; left: 10px; }
	#order .btns a, #order .btns a#btnClean { margin: 0 5px; padding: 7px 0; width: calc(50% - 12px); text-align: center; font-size: 14px; }
	.finish_page .order_box .pay_list { padding-bottom: 10px; border-bottom: 1px #f1f1f1 solid; }
	.finish_page .order_box .pay_list:last-child { padding-bottom: 0; border-bottom: 0; }
	.finish_page .order_box .pay_list>*, .finish_page .order_box .pay_list label { width: calc(100% - 20px); display: block; }
	.orderWrap .list .info p.sBox, .orderWrap .list .info p.sBox font { line-height: 150%; margin-bottom: 10px; font-size: 16px; color: #000; letter-spacing: 0.2px; }
}
@media screen and (max-width:425px) {
	.orderlist .row { padding: 10px 0; }
	.orderlist .row .img font { position: relative; margin: 10px; border: 0; text-align: center; left: 0; }
	.orderlist .row .img font img { width: 90px; height: 90px; }
	.orderlist .row .img b, .orderlist .row .info p { text-align: center; }
}