@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700;900&display=swap');


/* reset */
/* -------------------------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {font-size:inherit; line-height:inherit; color:inherit; margin:0; padding:0;}
html {width:100%; height:100%; overflow-y:scroll;}
h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:bold;}
p, ul, ol, dl, address, blockquote, table, div {font-size:100%;}
p {margin:0 0 0 0;}
ol,ul {list-style:none;}
fieldset,img {border:0; vertical-align:top;}
table {border-collapse:collapse; border-spacing:0;}
caption,th {text-align:left;}
th {vertical-align:top; font-weight:normal; text-align:left;}
td {vertical-align:top;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal; font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym {border:0;}


/* common */
/* -------------------------------------------------------- */
html,body {font-variant-ligatures:none;}
html {font-size:62.5%;}
body {font-size:1.8rem; font-family:Meiryo,'MS PGothic',Osaka,arial,helvetica,sans-serif; color:#333; text-align:center; -webkit-text-size-adjust:100%; text-size-adjust:100%; background:none;}

input, select, option, textarea, button {font-size:1.6rem; font-family:Meiryo,'MS PGothic',Osaka,arial,helvetica,sans-serif; line-height:1.4; vertical-align:middle; color:inherit; outline:none;}
input[type='submit'],input[type='reset'],input[type='button'], button {color:inherit; cursor:pointer; -ms-appearance:none; -webkit-appearance:none; appearance:none;}
:placeholder-shown {color:#999;}
::-webkit-input-placeholder {color:#999;}
:-moz-placeholder {color:#999; opacity:1;}
::-moz-placeholder {color:#999; opacity:1;}
:-ms-input-placeholder {color:#999;}
option:disabled {color:#ccc;}

strong {font-weight:bold;}
ol {list-style-type:decimal; margin-left:2.2em;}
img {max-width:100%; width:auto; height:auto; line-height:0; vertical-align:top; border:0; display:inline;}
hr {margin:15px 0 0 0; padding:15px 0 0 0; border:none; border-top:dashed 1px #999; box-sizing:border-box; display:block;}

a {color:#333; text-decoration:none;}
a:hover {color:#333; text-decoration:underline;}

@media screen and (max-width:767px){
	body {font-size:1.6rem;}
	input, select, textarea, button {font-size:1.6rem;}
}


/* decision */
/* -------------------------------------------------------- */
#bpCheck {display:none;}

body .pc {display:block;}
br.pc, span.pc, img.pc {display:inline;}
body .sp, br.sp, span.sp, img.sp {display:none;}

.off {pointer-events:none; cursor:default; opacity:0.3;}
a.tel {pointer-events:none; cursor:default;}
body.mobile a.tel {pointer-events:auto; cursor:pointer;}
option.off {display:none;}

@media screen and (max-width:767px){
	#bpCheck {display:block;}

	body .pc, br.pc, span.pc, img.pc {display:none;}
	body .sp {display:block;}
	br.sp, span.sp, img.sp {display:inline;}
}


/* container */
/* -------------------------------------------------------- */
#container {width:100%; padding:40px 0 0 0; overflow:hidden;}
body.login #container {padding:0;}
#loading-layer {width:100%; height:100%; background-color:rgba(255,255,255,0.8); display:block; position:fixed; top:0; left:0; opacity:0; pointer-events:none; z-index:9999; transition:opacity 0.3s ease;}
#loading-layer svg {width:60px; height:60px; margin:-30px 0 0 -30px; display:block; position:absolute; top:50%; left:50%;}
body.loading #loading-layer {opacity:1; pointer-events:auto;}
body.loading #loading-layer svg {animation:loading 2s linear 0s infinite normal none;}
@keyframes loading {
	0% {transform:rotate(0deg);}
	100% {transform:rotate(360deg);}
}


/* header */
/* -------------------------------------------------------- */
#header {width:100%; height:40px; background-color:rgba(255,255,255,0.9); box-shadow:0 1px 3px rgba(0,0,0,0.3); position:fixed; top:0; left:0; z-index:300;}
#header .logo {font-size:110%; font-weight:bold; line-height:1; margin:-0.5em 0 0 0; position:absolute; top:50%; left:15px;}
#header .logo a {text-decoration:none;}
#header .user-info {font-size:80%; display:flex; align-items:center; position:absolute; top:50%; right:60px; transform:translate3d(0,-50%,0);}
body.login #header .user-info {display:none;} 

#gNavBtn {width:30px; height:30px; position:fixed; top:5px; right:10px; z-index:301; cursor:pointer; display:block;}
#gNavBtn > span {width:100%; height:3px; margin:-1px 0 0 0; background-color:rgba(0,0,0,1); border-radius:10px; display:block; position:absolute; top:50%; left:0; transition-property:background-color;}
#gNavBtn > span::before,
#gNavBtn > span::after {content:''; width:100%; height:3px; background-color:rgba(0,0,0,1); border-radius:10px; display:block; position:absolute; left:0;}
#gNavBtn > span::before {top:-9px; transition-property:top;}
#gNavBtn > span::after {bottom:-9px; transition-property:bottom;}
#gNavBtn,
#gNavBtn > span::before,
#gNavBtn > span::after {transition-duration:0.3s; transition-delay:0s; transition-timing-function:ease;}
body.login #gNavBtn {display:none;}

#gNavCheck {display:none;}
#gNavCheck:checked + #header #gNavBtn > span {background-color:rgba(0,0,0,0);}
#gNavCheck:checked + #header #gNavBtn > span::before {top:0; transform:rotate(45deg); transition-property:transform;}
#gNavCheck:checked + #header #gNavBtn > span::after {bottom:0; transform:rotate(-45deg); transition-property:transform;}

#gNav {width:280px; height:100vh; background-color:rgba(200,200,200,0.9); box-shadow:-1px 0 3px rgba(0,0,0,0.3); position:fixed; top:0; right:-285px; z-index:300; overflow:auto; transition:right 0.3s ease;}
#gNavCheck:checked + #header #gNav {right:0;}
#gNav > ul {text-align:left; padding:40px 0 0 0;}
#gNav > ul > li {background-color:rgba(255,255,255,0.7); border-bottom:solid 1px rgba(0,0,0,0.2); position:relative;}
#gNav > ul > li a,
#gNav > ul > li button {width:100%; font-size:110%; text-align:left; text-decoration:none; padding:15px 20px; background:none; border:none; box-sizing:border-box; display:block;}
#gNav > ul > li li {border-top:dotted 1px rgba(0,0,0,0.1);}
#gNav > ul > li li a,
#gNav > ul > li li button {font-size:100%; padding:10px 0 10px 40px;}
#gNav > ul > li.sub > a {padding-right:40px; position:relative;}
#gNav > ul > li.sub > a::before {content:'▼'; font-size:80%; line-height:1; color:rgba(0,0,0,0.7); margin:-0.5em 10px 0 0; position:absolute; top:50%; right:0; transition:transform 0.3s ease;}
#gNav > ul > li.sub > a.on::before {transform:rotate(180deg);}
#gNav > ul > li.sub > a + ul {display:none;}
#gNav > ul > li.sub > a.on + ul {display:block;}
#gNav > ul > li.sub li.sub1 > a {font-size:90%; padding:6px 0 6px 60px;}

@media screen and (max-width:767px){
	#header .logo {left:5px;}
	#header .user-info {display:none;}
	#gNav {width:80%; right:-85%;}
}

/* footer */
/* -------------------------------------------------------- */
#footer {width:100%; padding:15px 0;}
#footer .copy {font-size:70%; letter-spacing:0.1em; text-align:center;}
body.login #footer {position:fixed; bottom:0; left:0;}
body.ic #footer {display:none;}


/* contents */
/* -------------------------------------------------------- */
#contents {padding:20px 10px;}

/* btn */
.fix-btn {width:100%; text-align:center; padding:5px; background-color:rgba(255,255,255,0.8); box-shadow:0 0 3px rgba(0,0,0,0.3); box-sizing:border-box; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; position:fixed; bottom:0; left:0; z-index:200;}
.fix-btn a {max-width:180px; width:100%; height:40px; font-size:90%; letter-spacing:0.1em; text-align:center; text-decoration:none; color:#fff; margin:0 5px; padding:0 1.0em; background-color:#444; box-shadow:0 1px 3px rgba(0,0,0,0.3); border:none; border-radius:2px; box-sizing:border-box; display:flex; justify-content:center; align-items:center; cursor:pointer;}
.fix-btn a:hover {text-decoration:none; color:#fff;}
.fix-btn.type1 > div {padding:0 3px;}
.fix-btn.type1 button[type=submit] {max-width:180px; height:40px; font-size:90%; padding:0; display:flex; justify-content:center; align-items:center;}
.btn-01 {width:200px; font-size:110%; text-align:center; text-decoration:none; color:#fff; margin:0 auto; padding:15px 10px; background-color:#0062ab; box-shadow:0 1px 3px rgba(0,0,0,0.3); border:none; border-radius:2px; box-sizing:border-box; display:block;}
.btn-01:hover {text-decoration:none; color:#fff;}
.btn-02 {max-width:180px; width:100%; height:40px; font-size:90%; letter-spacing:0.1em; text-align:center; text-decoration:none; color:#fff; padding:0 1.0em; background-color:#444; box-shadow:0 1px 3px rgba(0,0,0,0.3); border:none; border-radius:2px; box-sizing:border-box; display:flex; justify-content:center; align-items:center; cursor:pointer;}
.btn-02:hover {text-decoration:none; color:#fff;}
.btn-03 {font-size:90%; font-weight:normal; white-space:nowrap; text-align:center; text-decoration:none; color:#000; padding:0.4em 1.5em; background-color:#eee; box-shadow:0 1px 3px rgba(0,0,0,0.3); border:none; border-radius:2px; box-sizing:border-box; display:inline-block; outline:none; appearance:none;}
.btn-03:hover {text-decoration:none; color:#000;}
.cart-btn {width:57px; height:57px; background-color:#444; box-shadow:0 1px 3px rgba(0,0,0,0.3); border-radius:2px; box-sizing:border-box; display:flex; justify-content:center; align-items:center; cursor:pointer;}
.cart-btn svg {width:32px; height:32px; fill:#fff; display:block;}

@media screen and (max-width:767px){
	.fix-btn a {max-width:100px; width:100%; height:34px;}
	.fix-btn.type1 > div {padding:2px;}
	.fix-btn.type1 button[type=submit] {max-width:100px; height:34px;}
}

/* info-txt */
.info-txt {width:100%; height:100%; background:rgba(255,255,255,0.9); display:flex; justify-content:center; align-items:center; position:fixed; top:0; left:0; z-index:1000; pointer-events:none;}
.info-txt span {font-size:125%; font-weight:bold;}
.info-txt.error span {color:#c00;}
body.load .info-txt {opacity:0; transition:opacity 0.6s 2.0s ease;}
body.load .info-txt.error {transition:opacity 0.6s 2.0s ease;}

/* error-txt */
.error-txt {color:#c00; margin:0.2em 0 0 0;}

/* login-sec */
.login-sec {width:100%; height:100vh; display:flex; justify-content:center; align-items:center;}
.login-sec .logo {max-width:320px; margin:0 auto 20px auto;}
.login-sec .box {max-width:300px; margin:0 auto 20px auto;}
.login-sec .box dl {padding:0 0 20px 0; display:flex; justify-content:space-between; align-items:center;}
.login-sec .box dl > dt {width:6.0em; box-sizing:border-box;}
.login-sec .box dl > dd {box-sizing:border-box; flex:1;}
.login-sec .box dl > dd input {width:100%; font-size:110%; line-height:1; padding:10px; background-color:#fff; border:solid 1px #000; box-sizing:border-box;}
.login-sec .error {color:#c00; margin:15px 0 0 0;}
@media screen and (max-width:767px){
	.login-sec .box {max-width:260px;}
}


/* top-nav */
.top-nav {display:flex; flex-wrap:wrap;}
.top-nav > li {width:100%; margin:20px 0 0 0;}
.top-nav > li:first-of-type {margin-top:0;}
.top-nav > li > a {font-size:110%; padding:15px 10px; background-color:#ddd;}
.top-nav > li ul {margin:0 -5px; display:flex; flex-wrap:wrap;}
.top-nav > li ul > li {width:50%; padding:10px 5px 0 5px; box-sizing:border-box;}
.top-nav > li ul.clm3 > li {width:33.3%;}
.top-nav > li ul > li a {font-size:90%; padding:12px 10px;}
.top-nav a {letter-spacing:0.2em; text-align:center; text-decoration:none; margin:0 auto; background-color:#eee; box-shadow:0 1px 3px rgba(0,0,0,0.3); border-radius:2px; box-sizing:border-box; display:block;}
.top-nav a > span.sub {font-size:70%; letter-spacing:0;}
.top-nav.clm2 {margin:0 -5px; display:flex; flex-wrap:wrap;}
.top-nav.clm2 > li {width:50%; margin:0; padding:10px 5px 0 5px; box-sizing:border-box;}
.top-nav button[type=submit] {width:80%; font-size:110%; font-weight:bold; text-align:center; text-decoration:none; color:#333; margin:0 auto; padding:15px 10px; background-color:#eee; box-shadow:0 1px 3px rgba(0,0,0,0.3); border:none; border-radius:2px; box-sizing:border-box; display:block;}
.top-nav.cate > li:first-of-type > a {font-size:125%; font-weight:bold; padding:0; background:none; border:none; box-shadow:none; pointer-events:none;}
.top-nav.cate > li ul > li a {font-size:110%;}
@media screen and (max-width:767px){
	.top-nav.clm2 > li {width:100%;}
	.top-nav > li > a {padding:10px 0;}
	.top-nav > li ul > li a {padding:8px 0;}
}

/* page-nav */
.page-nav {padding:30px 0;}
.page-nav ul {display:flex; flex-wrap:wrap; justify-content:center; align-items:center;}
.page-nav li {padding:4px 2px 0 2px;}
.page-nav a,
.page-nav span {width:2.5em; padding:2px 0; text-align:center; display:block; border-radius:2px;}
.page-nav a {color:#333; text-decoration:none; border:solid 1px #ccc;}
.page-nav a:hover,
.page-nav span {color:#333; text-decoration:none; background:#eee; border:solid 1px #999;}
.page-nav li.prev {padding-right:10px;}
.page-nav li.next {padding-left:10px;}
.page-nav li.prev a,
.page-nav li.next a {width:auto; color:#333; text-decoration:none; border:0;}
.page-nav li.prev a:hover,
.page-nav li.next a:hover {width:auto; color:#333; text-decoration:underline; background:none; border:0;}
.page-nav li.prev span,
.page-nav li.next span {width:auto; color:#ccc; text-decoration:none; background:none; border:0;}
.page-nav + .list-sec {margin-top:0;}

/* sort-nav */
.sort-nav form {display:flex; flex-wrap:wrap; justify-content:center;}
.sort-nav form > div {padding:5px 10px; box-sizing:border-box;}
.sort-nav input,
.sort-nav select {padding:5px; background-color:#fff; border:solid 1px #666; border-radius:2px; box-sizing:border-box;}
.sort-nav input.sub-datepicker {width:10.0em;}
.sort-nav .period {display:flex; align-items:center;}
.sort-nav .period > div {padding:0 2px;}
.sort-nav .period input {width:9.5em;}
.sort-nav #search-word {width:10em; height:36px; border-radius:2px 0 0 2px; box-sizing:border-box; outline:none;}
.sort-nav #search-btn {width:36px; height:36px; vertical-align:top; text-align:center; background:#eee; border:solid 1px #666; border-left:none; border-radius:0 2px 2px 0; box-sizing:border-box; display:inline-block; position:relative; cursor:pointer;}
.sort-nav #search-btn svg {width:24px; height:24px; margin:-12px 0 0 -12px; display:block; position:absolute; top:50%; left:50%;}
.sort-nav .period-clm {display:flex; flex-wrap:wrap; justify-content:center; align-items:center;}
.sort-nav .period-clm > div {padding:0 0.1em;}
.sort-nav .period-clm .sub-datepicker {width:9.2em;}
.sort-nav .category-clm {display:flex; flex-wrap:wrap; align-items:center;}
.sort-nav .category-clm > div {margin-left:0.2em;}
.sort-nav .category-clm > div:first-of-type {margin-left:0;}
.sort-nav .category-clm > div#sub-category select {display:none;}
@media screen and (max-width:767px){
	.sort-nav form > div {width:100%; text-align:left;}
	.sort-nav.dpp form > div {width:auto;}
}


/* input-form */
.input-form {text-align:left;}
.input-form > dl {text-align:left; padding:15px 0; display:flex;}
.input-form > dl > dt {width:7em; padding:0.5em 0 0 0;}
.input-form > dl > dd {flex:1;}
.input-form .clm {display:flex; flex-wrap:wrap; align-items:center;}
.input-form .clm > div {box-sizing:border-box; position:relative;}
.input-form .clm > div span.ttl {font-size:75%; white-space:nowrap; display:block; position:absolute; top:-1.4em; left:0;}
.input-form .btn {margin:15px 0 0 0;}
.input-form input[type=text],
.input-form input[type=password],
.input-form input[type=number],
.input-form input[type=tel],
.input-form input[type=email],
.input-form textarea {width:100%; color:#333; padding:10px; background-color:#fff; border:solid 1px #666; border-radius:2px; box-sizing:border-box; display:block; outline:none;}
.input-form input[type=number] {text-align:center; padding-left:0; padding-right:0;}
.input-form input[type=text]:disabled,
.input-form input[type=text].readonly,
.input-form textarea:disabled {background-color:#eee;}
.input-form input[type=text].readonly {pointer-events:none;}
.input-form input.sub-datepicker {width:10.0em;}
.input-form select {padding:10px; background-color:#fff; border:solid 1px #666; border-radius:2px; box-sizing:border-box; display:block;}
.input-form button[type=submit] {width:200px; font-size:110%; text-align:center; text-decoration:none; color:#fff; margin:0 auto; padding:15px 10px; background-color:#0062ab; box-shadow:0 1px 3px rgba(0,0,0,0.3); border:none; border-radius:2px; box-sizing:border-box; display:block; cursor:pointer;}
.input-form button[type=submit]:disabled {opacity:0.3; pointer-events:none; display:none;}
.input-form .date-cell {padding:0 0 20px 0; display:flex; flex-wrap:wrap; align-items:center;}
.input-form .date-cell > div {padding:0 5px 0 0;}
.input-form .date-cell input {padding:3px 10px;}
.input-form .login-clm {margin:-5px 0 0 0; display:flex; flex-wrap:wrap;}
.input-form .login-clm dl {margin:5px 1.0em 0 0; display:flex; align-items:center;}
.input-form .login-clm dl + dl {margin-right:0;}
.input-form .login-clm dt {width:3.0em; text-align:right;}
.input-form .login-clm dd {width:10em;}
.input-form .address-clm {display:flex; flex-wrap:wrap; align-items:flex-end;}
.input-form .address-clm > div {margin:0 0 0.3em 0; ox-sizing:border-box;}
.input-form .address-clm > div:nth-of-type(1) {width:6.4em;}
.input-form .address-clm > div:nth-of-type(2) {padding-left:0.5em;}
.input-form .address-clm > div:nth-of-type(3) {width:100%;}
.input-form .address-clm > div:nth-of-type(4) {width:100%;}.input-form.company .cost-clm {display:flex; flex-wrap:wrap; align-items:center;}
.input-form .mult-clm {margin:-5px 0 0 0; display:flex; flex-wrap:wrap; align-items:center;}
.input-form .mult-clm > div {margin:5px 1.0em 0 0; display:flex; align-items:center;}
.input-form .mult-clm > div + div {margin-right:0;}
.input-form .mult-clm > div > div {margin:0 0.3em 0 0;}
.input-form .mult-clm > div > div:last-of-type {margin-right:0;}
.input-form .mult-clm input {text-align:inherit;}
.input-form .mult-clm .unit-objs {display:flex; flex-wrap:wrap;}
.input-form .mult-clm .unit-objs > div {padding:0 0.2em 5px 0;}
.input-form .mult-clm .unit-objs input {width:6.0em; display:none;}
.input-form .payment-clm {margin:-5px 0 0 0; display:flex; flex-wrap:wrap;}
.input-form .payment-clm dl {margin:5px 1.5em 0 0; display:flex; align-items:center;}
.input-form .payment-clm dl + dl {margin-right:0;}
.input-form .payment-clm dt {white-space:nowrap;}
.input-form .payment-clm dd {padding:0 0 0 0.3em;}
.input-form .payment-clm input {width:5em;}
.input-form.setup .alert-clm {display:flex; align-items:center;}
.input-form.setup .alert-clm input {width:4.0em; text-align:right; margin:0 0.5em; display:block;}
.input-form.import .clm {display:flex; justify-content:center; align-items:center;}
.input-form.import .clm > div:first-of-type {white-space:nowrap; padding:0 0.5em 0 0;}
.input-form.export .clm {display:flex; justify-content:center; align-items:center;}
.input-form.export + div {text-align:center; margin:30px 0 0 0;}
.input-form.export + div a {max-width:280px; margin:0 auto;}
.input-form.order.conf .fix-btn {display:none;}
.input-form.price button[type=submit]:disabled {display:block;}
.input-form.items .supplier-clm {display:flex; align-items:center;}
.input-form.items .supplier-clm > div:first-of-type {padding:0 0.5em 0 0;}
.input-form.items button[name=edit]:disabled {display:block;}
.input-form.items button[name=entry]:disabled {display:block;}
.input-form.items input.error {background-color:#fee;}
.input-form.items input.ok {background-color:#eef;}
.order-head {text-align:center; padding:0 0 1.0em 0;}
.order-head .name-clm {font-size:120%; font-weight:700;}
.order-head .delivery-date-clm {margin:0.5em 0 0 0; display:flex; justify-content:center; align-items:center;}
.order-head .delivery-date-clm dt {white-space:nowrap; padding:0 0.5em 0 0;}
.order-head .delivery-date-clm input {width:9.0em; text-align:center; padding:0.3em 0;}
.order-head .sub-clm {display:flex; flex-wrap:wrap; justify-content:center; align-items:center;}
.order-head .sub-clm > div {margin:0.5em 0 0 0; padding:0 0.2em; display:flex; align-items:center;}
.order-head .sub-clm > div > div {padding:0 0 0 0.2em;}
.order-head .sub-clm > div > div:first-of-type {padding:0;}
.order-head .sub-clm input {text-align:center; padding:0.3em 0.5em;}


@media screen and (max-width:400px){
	.input-form > dl {padding:5px 0; display:block;}
	.input-form > dl > dt {width:auto; font-weight:bold; padding:1em 0 5px 0;}
}
.link-obj {display:flex; flex-wrap:wrap;}
.link-obj .url-obj {padding:0 0 0 10px; flex:1;}
@media screen and (max-width:767px){
	.link-obj .url-obj {width:100%; padding:5px 0 0 0; flex:0 0 auto;}
}

/* clone-sec */
.clone-sec {margin:-15px 0 0 0;}
.clone-sec .obj {border-bottom:dotted 1px #666; padding:15px 52px 15px 0; position:relative;}
.clone-sec .btn-set {width:42px; position:absolute; top:50%; right:0; display:flex; flex-wrap:wrap; transform:translate3d(0,-50%,0);}
.clone-sec.single .btn-set {opacity:0.3; pointer-events:none;}
.clone-sec .add {margin:15px 0 0 0; display:inline-block;}
.clone-sec .add a {line-height:1.2; text-decoration:none; padding:10px 20px 10px 30px; background:#eee; border:solid 1px #999; border-radius:2px; display:inline-block; position:relative;}
.clone-sec .add a:before {content:'+'; width:14px; height:14px; font-size:85%; font-weight:bold; line-height:1; text-align:center; color:#fff; margin:-7px 0 0 0; background:#333; border-radius:20px; display:flex; justify-content:center; align-items:center; position:absolute; top:50%; left:10px;}
.clone-sec .up {width:50%;}
.clone-sec .up a,
.clone-sec .down a,
.clone-sec .remove a {width:100%; height:1.8em; text-decoration:none; color:#333; background:#eee; border:solid 1px #999; border-radius:3px; box-sizing:border-box; display:flex; justify-content:center; align-items:center; position:relative;}
.clone-sec .up a {border-right:none; border-radius:3px 0 0 3px;}
.clone-sec .up a:before {content:'▲'; line-height:1;}
.clone-sec .down {width:50%;}
.clone-sec .down a {border-left:none; border-radius:0 3px 3px 0;}
.clone-sec .down a:before {content:'▼'; line-height:1;}
.clone-sec .down a::after {content:''; width:1px; height:100%; background-color:#999; display:block; position:absolute; top:0; left:0;}
.clone-sec .remove {width:100%; margin:3px 0 0 0;}
.clone-sec .remove a:before {content:'削除'; font-size:90%; line-height:1;}
.clone-sec .note {margin:10px 0 0 0;}
.clone-sec label.uploadBox .ctx .obj {border-bottom:none; padding:0;}
.clone-sec label.uploadBox .ctx .obj .btn-set {display:none;}
.clone-sec.order-sort,
.clone-sec.desc,
.clone-sec.asc {margin:0;}
.clone-sec.order-sort .obj,
.clone-sec.desc .obj,
.clone-sec.asc .obj {padding-top:10px; padding-bottom:10px;}
.clone-sec.order-sort .remove,
.clone-sec.desc .remove,
.clone-sec.asc .remove {display:none;}
.clone-sec.price .obj {padding:0; border:none;}
.clone-sec.price .btn-set {display:none;}

/* uploadBox */
label.uploadBox {width:100%; min-height:50px; text-align:center; line-height:40px; margin:0; padding:10px; border:solid 4px #ccc; border-radius:3px; box-sizing:border-box; display:block; position:relative;}
label.uploadBox .loading {width:40px; height:40px; margin:-20px 0 0 -20px; display:block; position:absolute; top:50%; left:50%; z-index:1; opacity:0;}
label.uploadBox .loading svg {width:100%; height:100%; display:block;}
label.uploadBox.loading .loading {opacity:1; animation:loading1 2s linear 0s infinite normal none;}
label.uploadBox.error .ctx {color:#c00;}
label.uploadBox .ctx .clm {display:flex; justify-content:center; align-items:center;}
label.uploadBox .ctx .clm > div:nth-of-type(2) {padding-left:10px;}
label.uploadBox img {width:140px; height:140px; object-fit:contain; overflow:hidden; opacity:1;}
label.uploadBox video {width:140px; height:auto; overflow:hidden; opacity:1;}
label.uploadBox.loading img {opacity:0.5;}
label.uploadBox.loading video {opacity:0.5;}
label.uploadBox input[type=file] {width:100%; height:100%; position:absolute; top:0; left:0; opacity:0; cursor:pointer; z-index:5;}
label.uploadBox .btn {margin:0; position:absolute; top:0; right:0; z-index:1; opacity:0;}
label.uploadBox.on .btn {z-index:10; opacity:1;}
label.uploadBox .btn a {font-size:75%; line-height:1.2; vertical-align:top; text-decoration:none; color:#fff; margin:0 0 0 2px; padding:4px 5px; background:#ccc; display:inline-block;}
label.uploadBox .btn a:hover {opacity:0.7;}
label.uploadBox .btn a:first-of-type {border-radius:0 0 0 3px;}
label.uploadBox.off {pointer-events:auto; cursor:pointer; opacity:1;}
label.uploadBox + .file-full-path {font-size:80%;}
@keyframes loading1 {
	0% {transform:rotate(0deg);}
	100% {transform:rotate(360deg);}
}
@media screen and (max-width:767px){
	label.uploadBox {line-height:1.4;}
}

/* modal-obj */
.modal-obj {width:100%; height:100%; background-color:rgba(0,0,0,0.7); display:none; justify-content:center; align-items:center; position:fixed; top:0; left:0; z-index:310;}
.modal-obj .box {padding:15px 20px; background-color:#fff; border-radius:2px;}
.modal-obj .clm {display:flex; justify-content:center; align-items:center;}
.modal-obj .clm input[type=text] {width:100%; padding:5px 10px; background-color:#fff; border:solid 1px #666; border-radius:2px; box-sizing:border-box; display:block; outline:none;}
.modal-obj .clm .cell1 {width:5em;}
.modal-obj .clm .cell2 {width:8em;}
.modal-obj .btn {padding:0 0 0 10px;}
.modal-obj .btn > span {width:4em; font-size:85%; margin:0 auto; padding:5px 0; background-color:#ccc; border-radius:2px; display:block; cursor:pointer;}
.modal-obj.on {display:flex;}

/* list-sec */
.list-sec {text-align:left; margin:30px 0 0 0;}
.list-sec > li {padding:5px 10px; border-bottom:solid 1px #ddd;}
.list-sec > li:nth-of-type(odd) {background-color:#fff;}
.list-sec > li:nth-of-type(even) {background-color:#eee;}
.list-sec .clm {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;}
.list-sec .ctx {display:flex; flex-wrap:wrap; align-items:center;}
.list-sec .btns {display:flex; align-items:center;}
.list-sec .btns a,
.list-sec .btns button {font-size:75%; font-weight:normal; white-space:nowrap; text-align:center; text-decoration:none; margin:0 0 0 10px; padding:5px 10px; background-color:#eee; box-shadow:0 1px 3px rgba(0,0,0,0.3); border:none; border-radius:2px; box-sizing:border-box; display:block; outline:none; appearance:none;}
.list-sec .attention {font-size:80%; color:#c00; display:inline-block;}
.list-sec .sub {font-size:80%; vertical-align:middle; display:inline-block;}
.list-sec .name .sub {padding:0 0 0 0.5em;}
.list-sec .note-btn > div {font-size:80%; line-height:1; color:#fff; padding:0.2em 0.3em 0 0.3em; background-color:#666; border-radius:3px; display:inline-block;}
.list-sec .note-obj {padding:0; position:absolute; bottom:1.8em; left:0; z-index:-1; opacity:0; pointer-events:none;}
.list-sec .note-obj > div {font-size:80%; line-height:1.4; color:#fff; padding:0.5em 1.0em; background-color:rgba(0,0,0,0.9); border-radius:5px; position:relative;}
.list-sec .note-obj > div::before {content:''; border:5px solid transparent; border-bottom:10px solid transparent; border-top:10px solid rgba(0,0,0,0.9); display:block; background-size:100% 100%; display:block; position:absolute; bottom:-20px; left:10px;}
.list-sec .note-obj.on {z-index:5; opacity:1; pointer-events:auto;}
.list-sec .state-tag {font-size:70%; line-height:1; white-space:nowrap; color:#fff; margin:0 0.5em 0 0; padding:0.4em 0.3em 0.2em 0.3em; background-color:#666; display:inline-block;}
.list-sec span.close {font-size:80%; color:#c00; margin:0 0 0 0.5em; display:inline-block;}
.list-sec.customers .order {padding:0 0.2em 0 0; display:flex;}
.list-sec.customers .order a {font-size:75%; font-weight:normal; white-space:nowrap; text-align:center; text-decoration:none; color:#fff; margin:0 0.3em 0 0; padding:0.3em 0.8em 0.2em 0.8em; background-color:#333; box-shadow:0 1px 3px rgba(0,0,0,0.3); border:none; border-radius:2px; box-sizing:border-box; display:block; outline:none; appearance:none;}
.list-sec.customers .name {padding:0 0.5em 0 0;}
.list-sec.customers .tel {font-size:80%;}
.list-sec.maker .name {padding:0 0.5em 0 0;}
.list-sec.maker .tel {font-size:80%;}
.list-sec.category .ctx.sub {font-size:100%; padding-left:1.0em; box-sizing:border-box; position:relative;}
.list-sec.category .ctx.sub::before {content:'-'; display:block; position:absolute; top:0; left:0.2em;}
.list-sec.category .state-tag {margin:0 0 0 0.5em;}
.list-sec.stock {margin-top:10px;}
.list-sec.stock > li {padding:0.3em;}
.list-sec.stock .clm {align-items:flex-start;}
.list-sec.stock input {width:5.0em; padding:0.1em; box-sizing:border-box;}
.list-sec.stock select {padding:0;}
.list-sec.stock option:disabled {color:#ccc;}
.list-sec.stock .obj {border-bottom:none; padding:0;}
.list-sec.stock .obj > div {display:flex; flex-wrap:wrap; justify-content:flex-end;}
.list-sec.stock .btn-set {display:none;}
.list-sec.stock-history {margin-top:10px;}
.list-sec.stock-history .ctx {display:flex; flex-wrap:nowrap;}
.list-sec.stock-history .date {width:7.0em;}
.list-sec.stock-history .type {white-space:nowrap; padding:0 1.0em 0 0;}
.list-sec.stock-history .qty {white-space:nowrap; text-align:right;}
.list-sec.stock-history .item {padding:0 1.0em 0 0; flex:1;}
.list-sec.stock-history .item span {font-size:80%; margin:0 0 0 0.5em; display:inline-block;}
.list-sec.order {margin-top:10px;}
.list-sec.order > li {padding:0.3em;}
.list-sec.order .clm {align-items:flex-start;}
.list-sec.order .clm.split .price {text-decoration:line-through;}
.list-sec.order .obj {display:flex; justify-content:flex-end; align-items:center; border-bottom:none; padding:0;}
.list-sec.order .obj > div {margin:0 0 0 1.0em;}
.list-sec.order .obj > div.cart {margin-left:0.3em;}
.list-sec.order .btn-set {display:none;}
.list-sec.order .qty input {width:5.0em; padding:0.1em; box-sizing:border-box;}
.list-sec.order .qty input.entered.ok {background-color:#eef;}
.list-sec.order .qty input.error {background-color:#fee;}
.list-sec.order .qty.soldout {position:relative; pointer-events:none;}
.list-sec.order .qty.soldout::before {content:'SOLD OUT'; font-size:1.1rem; font-weight:900; width:100%; height:100%; background-color:rgba(0,0,0,0.1); display:flex; justify-content:center; align-items:center; position:absolute; top:0; left:0;}
.list-sec.order .qty.soldout + .cart {pointer-events:none; opacity:0.3;}
.list-sec.order .ctx {display:flex; flex-wrap:nowrap; align-items:center;}
.list-sec.order .item {padding:0 0.5em 0 0; flex:1;}
.list-sec.order .model {font-size:80%; padding:0 0.5em 0 0;}
.list-sec.order .type > span {font-size:70%; line-height:1; padding:0.4em 0.3em 0.2em 0.3em; background-color:#eee; border:1px solid #666; border-radius:2px; display:block; cursor:pointer;}
.list-sec.order .price {white-space:nowrap;}
.list-sec.order .cart svg {width:1.2em; height:1.2em; fill:#333; display:block; cursor:pointer;}
.list-sec.order-history {margin-top:10px;}
.list-sec.order-history .ctx {display:flex; flex-wrap:nowrap; justify-content:space-between;}
.list-sec.order-history .order-date {width:10.0em;}
.list-sec.order-history .state {white-space:nowrap; padding:0 1.0em 0 0;}
.list-sec.order-history .state span {font-size:80%; line-height:1; color:#fff; padding:0.4em 0.5em 0.3em 0.5em; background-color:#333; border-radius:3px; display:block;}
.list-sec.order-history .customer {padding:0 1.0em 0 0; flex:1;}
.list-sec.order-history .total {white-space:nowrap; text-align:right;}
.list-sec.order-history .total span {font-size:80%; display:inline-block;}
.list-sec.order-history .total span:first-of-type {padding-right:0.3em;}
.list-sec.order-history .total span:last-of-type {padding-left:0.2em;}
.list-sec.order-management {margin-top:10px;}
.list-sec.order-management .ctx {display:flex; flex-wrap:nowrap; justify-content:space-between;}
.list-sec.order-management .order-date {width:10.0em;}
.list-sec.order-management .state {margin:0 1.0em 0 0; background-color:#fff; border:1px solid #333; border-radius:3px; box-sizing:border-box; display:flex; overflow:hidden;}
.list-sec.order-management .state label {font-weight:bold; line-height:1; white-space:nowrap; padding:0.4em 1.0em 0.3em 0.5em; display:block; position:relative; cursor:pointer;}
.list-sec.order-management .state label:nth-of-type(1) {z-index:10;}
.list-sec.order-management .state label:nth-of-type(2) {z-index:8;}
.list-sec.order-management .state label:nth-of-type(3) {z-index:6;}
.list-sec.order-management .state label:nth-of-type(4) {z-index:4;}
.list-sec.order-management .state label::before {content:''; width:6.0em; height:6.0em; margin:-3.0em 0 0 0; background-color:#fff; box-shadow:0 0 3px rgba(0,0,0,0.5); border-top:1px solid #333; border-right:1px solid #333; display:block; position:absolute; top:50%; left:-2.6em; pointer-events:none; transform:rotate(45deg) skew(16deg,16deg);}
.list-sec.order-management .state label:last-of-type {padding-right:0.5em;}
.list-sec.order-management .state label span {display:block; position:relative; z-index:5;}
.list-sec.order-management .state.step1 label:nth-of-type(1)::before,
.list-sec.order-management .state.step2 label:nth-of-type(2)::before,
.list-sec.order-management .state.step3 label:nth-of-type(3)::before,
.list-sec.order-management .state.step4 label:nth-of-type(4)::before {background-color:#ccc;}
.list-sec.order-management .state.step1 label:nth-of-type(1) {pointer-events:none;}
.list-sec.order-management .state.step1 label:nth-of-type(2) {pointer-events:auto;}
.list-sec.order-management .state.step1 label:nth-of-type(3) {pointer-events:none;}
.list-sec.order-management .state.step1 label:nth-of-type(4) {pointer-events:none;}
.list-sec.order-management .state.step2 label:nth-of-type(1) {pointer-events:none;}
.list-sec.order-management .state.step2 label:nth-of-type(2) {pointer-events:auto;}
.list-sec.order-management .state.step2 label:nth-of-type(3) {pointer-events:auto;}
.list-sec.order-management .state.step2 label:nth-of-type(4) {pointer-events:none;}
.list-sec.order-management .state.step3 label:nth-of-type(1) {pointer-events:none;}
.list-sec.order-management .state.step3 label:nth-of-type(2) {pointer-events:none;}
.list-sec.order-management .state.step3 label:nth-of-type(3) {pointer-events:auto;}
.list-sec.order-management .state.step3 label:nth-of-type(4) {pointer-events:auto;}
.list-sec.order-management .state.step4 label:nth-of-type(1) {pointer-events:none;}
.list-sec.order-management .state.step4 label:nth-of-type(2) {pointer-events:none;}
.list-sec.order-management .state.step4 label:nth-of-type(3) {pointer-events:none;}
.list-sec.order-management .state.step4 label:nth-of-type(4) {pointer-events:auto;}
.list-sec.order-management .customer {padding:0 1.0em 0 0; flex:1;}
.list-sec.order-management .total {white-space:nowrap; text-align:right;}
.list-sec.order-management .total span {font-size:80%; display:inline-block;}
.list-sec.order-management .total span:first-of-type {padding-right:0.3em;}
.list-sec.order-management .total span:last-of-type {padding-left:0.2em;}
.list-sec.order-management .obj {border-bottom:none; padding:0;}
.list-sec.order-management .btn-set {display:none;}
.list-sec.order-claim-management .ctx {display:flex; flex-wrap:nowrap; justify-content:space-between;}
.list-sec.order-claim-management .ctx > div {text-align:left; box-sizing:border-box;}
.list-sec.order-claim-management .state {width:2.6em; padding:0 0.3em 0 0;}
.list-sec.order-claim-management .state span {font-size:80%; line-height:1; text-align:center; color:#fff; padding:0.4em 0 0.3em 0; background-color:#333; border-radius:3px; display:block;}
.list-sec.order-claim-management .order-date {width:10.0em; font-size:80%;}
.list-sec.order-claim-management .customer {flex:1;}
.list-sec.order-claim-management .closing-date {width:4.5em; font-size:80%;}
.list-sec.order-claim-management .dn_date,
.list-sec.order-claim-management .inv_date {margin:0 0 0 0.5em; display:flex; align-items:center;}
.list-sec.order-claim-management .dn_date span,
.list-sec.order-claim-management .inv_date span {font-size:80%; padding:0 0.2em 0 0; display:inline-block;}
.list-sec.order-claim-management .dn_date input,
.list-sec.order-claim-management .inv_date input {padding:0.1em 0.5em;}
.list-sec.order-claim-management .state {width:4em; margin:0 0 0 0.2em;}
.list-sec.order-claim-management .total {white-space:nowrap; text-align:right;}
.list-sec.order-claim-management .total span {font-size:80%; display:inline-block;}
.list-sec.order-claim-management .total span:first-of-type {padding-right:0.3em;}
.list-sec.order-claim-management .total span:last-of-type {padding-left:0.2em;}
.list-sec.price {margin:15px 0 0 0;}
.list-sec.price .clm {flex-wrap:nowrap;}
.list-sec.price .price-obj {display:flex; flex-wrap:wrap;}
.list-sec.price .price-obj > div {font-size:80%; padding:0.1em 0 0.1em 1.0em; display:flex; justify-content:flex-end; align-items:center;}
.list-sec.price .price-obj input {width:5.4em; text-align:right; padding:0.1em;}
.list-sec.price .price-obj input.error {background-color:#fee;}
.list-sec.price .price-obj input.ok {background-color:#eef;}
.list-sec.purchase .clm {display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:center;}
.list-sec.purchase .name {font-size:80%; padding-right:1.0em;}
.list-sec.purchase .supplier a {font-size:70%; line-height:1; text-decoration:none; color:#fff; padding:0.4em 0.4em 0.2em 0.4em; background-color:#666; border-radius:3px; display:inline-block;}
.list-sec.purchase .stock {font-size:80%; white-space:nowrap; padding-left:0.5em;}
.list-sec.purchase .qty {padding-left:0.5em;}
.list-sec.purchase .qty input {width:4.0em; padding:0.1em; box-sizing:border-box;}
.list-sec.purchase .note {padding-left:0.2em;}
.list-sec.purchase .note input {width:10.0em; padding:0.1em; box-sizing:border-box;}
.list-sec.purchase-list .supplier {font-size:80%; padding:0 0 0 1.0em;}
.list-total-sec {padding:10px; display:flex; justify-content:flex-end; align-items:center;}
.list-total-sec dl {font-weight:bold; white-space:nowrap; display:flex;}
.list-total-sec dt {padding:0 0.5em 0 0;}
.list-total-sec dd span {font-size:80%; margin:0 0 0 0.2em; display:inline-block;}


@media screen and (max-width:767px){
	.list-sec.driver .ctx {width:100%; display:flex; flex-wrap:wrap;}
	.list-sec.driver .head .name,
	.list-sec.driver .head .tel,
	.list-sec.driver .head .spacer {display:none;}
	.list-sec.driver .name {width:auto;}
	.list-sec.driver .tel {width:auto;}
	.list-sec.driver .initial_cost {width:25%;}
	.list-sec.driver .buyout_cost {width:25%;}
	.list-sec.driver .bid {width:25%;}
	.list-sec.driver .spacer {width:100%; display:block;}
}
@media screen and (max-width:500px){
	.list-sec .btns {display:block;}
	.list-sec .btns a,
	.list-sec .btns button {margin:5px 0;}
	.list-sec.driver .btns {width:100%; display:flex; justify-content:flex-end;}
	.list-sec.driver .btns a,
	.list-sec.driver .btns button {margin:5px 10px 5px 0;}
}

/* checkbox-list */
.checkbox-list {margin:0; display:flex; flex-wrap:wrap;}
.checkbox-list > div {padding:5px 20px 5px 0;}
.checkbox-list label {display:flex; align-items:center;}
.checkbox-list label > span {padding:0 0 0 3px; display:block;}

/* radio-list */
.radio-list {margin:0; display:flex; flex-wrap:wrap;}
.radio-list > div {padding:5px 20px 5px 0;}
.radio-list label {display:flex; align-items:center;}
.radio-list label > span {padding:0 0 0 3px; display:block;}

/* modal */
.modal {width:100%; height:100%; padding:10px; background-color:rgba(0,0,0,0.8); box-sizing:border-box; display:flex; justify-content:center; align-items:center; position:fixed; top:0; left:0; opacity:0; pointer-events:none; z-index:300; transition:opacity 0.6s ease;}
.modal.on {opacity:1; pointer-events:auto;}
.modal > div {max-width:740px; width:100%; padding:15px; background-color:#fff; border-radius:5px; box-sizing:border-box; position:relative;}
.modal .ctx {max-height:70.0vh; text-align:left; padding:0.5em 0; box-sizing:border-box; display:flex; flex-wrap:wrap; overflow:auto;}
.modal .head {width:100%; display:flex; flex-wrap:wrap;}
.modal .date {padding:0 0 0 1.0em;}
.modal .type span {font-size:80%; line-height:1; letter-spacing:0.2em; color:#fff; padding:0.4em 0.5em 0.4em 0.7em; background-color:#333; border-radius:3px; display:block;}
.modal .cate {width:100%; font-size:80%; margin:0.5em 0 0 0;}
.modal .item {width:100%;}
.modal .item span {font-size:80%; margin:0 0 0 0.5em; display:inline-block;}
.modal .qty {margin:0.3em 0 0 0; padding:0 1.0em 0 0;}
.modal .storage {margin:0.3em 0 0 0;}
.modal .storage span {font-size:80%; padding:0 0.2em; transform:rotate(90deg); display:inline-block; position:relative; top:-0.2em;}
.modal .state {padding:0 0.5em 0 0;}
.modal .state span {line-height:1; white-space:nowrap; color:#fff; margin:-0.1em 0 0 0; padding:0.4em 0.5em 0.2em 0.5em; background-color:#333; border-radius:3px; display:inline-block;}
.modal .customer {font-weight:700;}
.modal .sub-name {width:100%; font-size:90%; margin:0.2em 0 0 0;}
.modal .order-date {width:100%; margin:0.3em 1.0em 0 0;}
.modal .order-date dl {text-align:left; display:flex;}
.modal .order-date dt {font-size:80%; white-space:nowrap; padding:0 1.0em 0 0;}
.modal .order-date dd {flex:1;}
.modal .delivery-date {width:100%; margin:0;}
.modal .delivery-date dl {text-align:left; display:flex;}
.modal .delivery-date dt {font-size:80%; white-space:nowrap; padding:0 1.0em 0 0;}
.modal .delivery-date dd {flex:1;}
.modal .delivery-date + .admin {margin-top:0;}
.modal .detail {width:100%; margin:0.5em 0 0 0;}
.modal .detail > div {padding:0.5em 0 0.2em 0; border-bottom:solid 1px #999; display:flex; justify-content:space-between;}
.modal .detail strong {font-weight:700;}
.modal .detail input {width:4.0em; text-align:center; margin:0 0 0 1.0em; padding:0; display:none;}
.modal .detail.edit input {display:inline-block;}
.modal .total {width:100%; font-size:120%; font-weight:700; white-space:nowrap; text-align:right; margin:0.2em 0 0 0;}
.modal .total span {font-size:80%; display:inline-block;}
.modal .total span:first-of-type {padding-right:0.5em;}
.modal .total span:last-of-type {padding-left:0.2em;}
.modal .admin {width:100%; margin:0;}
.modal .admin dl {text-align:left; display:flex;}
.modal .admin dt {font-size:80%; white-space:nowrap; padding:0 1.0em 0 0;}
.modal .admin dd {flex:1;}
.modal .slip_edit {width:100%; margin:0;}
.modal .slip_edit dl {text-align:left; display:flex;}
.modal .slip_edit dt {font-size:80%; white-space:nowrap; padding:0 1.0em 0 0;}
.modal .slip_edit dd {flex:1;}
.modal .order {width:100%; text-align:center; margin:0.3em 0 0 0;}
.modal .set-btns {width:100%; height:40px; margin:0.3em 0 0 0; display:flex; justify-content:center; align-items:center;}
.modal .set-btns > div {padding:0 0.5em; box-sizing:border-box; display:none;}
.modal .set-btns .btn {width:140px; height:40px; font-weight:normal; letter-spacing:0.2em; white-space:nowrap; text-align:center; text-decoration:none; color:#000; margin:0; background-color:#eee; box-shadow:0 1px 3px rgba(0,0,0,0.3); border:none; border-radius:2px; box-sizing:border-box; display:flex; justify-content:center; align-items:center; outline:none; appearance:none; cursor:pointer;}
.modal .set-btns .btn:hover {text-decoration:none; color:#000;}
.modal .set-btns .btn.off {display:none;}
.modal .set-btns button.btn {letter-spacing:0.1em; color:#fff; margin:0; background-color:#444;}
.modal .set-btns button.btn:hover {color:#fff;}
.modal .set-btns.change > div.change {display:block;}
.modal .set-btns.return > div.return {display:block;}
.modal .set-btns.po > div.po {display:block;}
.modal .set-btns.delete > div.delete {display:block;}
.modal .close {position:absolute; top:5px; right:5px;}
.modal .close span {width:16px; height:16px; display:block; position:relative; cursor:pointer;}
.modal .close span::before,
.modal .close span::after {content:''; width:100%; height:2px; margin:0 0 -1px 0; background-color:#000; border-radius:9999px; display:block; position:absolute; top:50%; left:0;}
.modal .close span::before {transform:rotate(45deg);}
.modal .close span::after {transform:rotate(-45deg);}
.modal .print-btns {width:100%; margin:0.5em 0 0 0; display:flex; flex-wrap:wrap; justify-content:center; align-items:center;}
.modal .print-btns > div {padding:0.6em 0.3em 0 0.3em; box-sizing:border-box; opacity:0.3; pointer-events:none;}
.modal.on .print-btns > div.free {width:100%; opacity:1; pointer-events:auto;}
.modal .print-btns > div.free .btn {width:12.0em; font-size:80%; margin:0 auto; background-color:#eee;}
.modal .print-btns > div.free .btn.on {background-color:#ccc; box-shadow:none;}
.modal .print-btns .btn {width:90px; height:30px; font-size:90%; font-weight:normal; letter-spacing:0.2em; white-space:nowrap; text-align:center; text-decoration:none; color:#000; background-color:#eee; box-shadow:0 1px 3px rgba(0,0,0,0.3); border:none; border-radius:2px; box-sizing:border-box; display:flex; justify-content:center; align-items:center; outline:none; appearance:none; cursor:pointer;}
.modal .print-btns .btn:hover {text-decoration:none; color:#000;}
.modal.on .print-btns.quot > div.quot {opacity:1; pointer-events:auto;}
.modal.on .print-btns.po > div.po {opacity:1; pointer-events:auto;}
.modal.on .print-btns.dn > div.dn {opacity:1; pointer-events:auto;}
.modal.on .print-btns.inv > div.inv {opacity:1; pointer-events:auto;}
.modal.on .print-btns.rcpt > div.rcpt {opacity:1; pointer-events:auto;}
.modal.on .print-btns > div.itemized {opacity:1; pointer-events:auto;}
@media screen and (max-width:500px){
	.modal .set-btns .btn {width:110px; font-size:90%;}
	.modal .set-btns button.btn {width:140px; font-size:100%;}
}

/* conf-modal */
.conf-modal > div {width:100%;}
.conf-modal .ttl {text-align:center;}
.conf-modal .list {max-height:70.0vh; padding:0.5em 0; box-sizing:border-box; overflow:auto;}
.conf-modal .list > div {padding:0.5em 0 0 0; border-bottom:solid 1px #999; display:flex; justify-content:space-between;}
.conf-modal .list > div > div:first-of-type {}
.conf-modal .list > div > div:first-of-type span {font-size:80%; margin:0 0 0 0.3em; display:inline-block;}
.conf-modal .list > div > div:last-of-type {font-size:80%; white-space:nowrap; padding:0 0 0 1.0em;}
.conf-modal .list > div > div:last-of-type span {font-size:120%; font-weight:bold; display:inline-block;}
.conf-modal .list > div:last-of-type {font-size:80%; text-align:right; border-bottom:none; display:block;}
.conf-modal .list > div:last-of-type span {font-size:120%; font-weight:bold; padding:0 0.2em 0 0.5em; display:inline-block;}

/* sub-modal */
.sub-modal > div {width:100%;}
.sub-modal > div {max-width:500px;}
.sub-modal input {padding:0.2em;}
.sub-modal input.error {background-color:#fee;}
.sub-modal-ctx {display:flex; flex-wrap:wrap; justify-content:center; align-items:center;}
.sub-modal .ttl {width:100%; font-weight:bold; text-align:center;}
.sub-modal .txt {width:100%; text-align:center;}
.sub-modal .btn {width:100%; text-align:center; margin:1.0em 0 0 0;}
.sub-modal .btn > div {margin:0 auto;}
.sub-modal .unit {margin:0.5em 0.1em 0 0.1em; display:flex; align-items:center;}
.sub-modal .unit input {width:5.0em; text-align:right;}
.sub-modal .unit span {font-size:80%; padding:0 0 0 0.1em; display:inline-block;}
.sub-modal .qty {margin:0.5em 0.1em 0 0.1em; padding:0; display:flex; align-items:center;}
.sub-modal .qty input {width:5.0em;}
.sub-modal .price {margin:0.5em 0.1em 0 0.1em; display:flex; align-items:center;}
.sub-modal .price input {width:5.0em;}
.sub-modal .price span {font-size:80%; padding:0 0 0 0.1em; display:inline-block;}
.sub-modal .sign {margin:0.5em 0.1em 0 0.1em;}
.sub-modal .sign span {font-size:80%;}


/* add-layer */
#add-layer {width:100%; height:100%; font-size:3.0rem; color:#fff; letter-spacing:0.1em; padding:10px; background-color:rgba(0,0,0,0.8); box-sizing:border-box; display:flex; justify-content:center; align-items:center; position:fixed; top:0; left:0; opacity:0; pointer-events:none; z-index:500; transition:opacity 1.0s ease, letter-spacing 1.0s ease;}
#add-layer.on {letter-spacing:0.2em; opacity:1; pointer-events:auto; transition:opacity 0.3s ease, letter-spacing 0.3s ease;}


/* print */
.print-obj {width:100%; text-align:left; color:#000; margin:0 auto; padding:30px; box-sizing:border-box;}
.print-obj input[type="text"],
.print-obj input[type="number"] {width:100%; font-size:inherit; font-weight:inherit; font-family:inherit; line-height:inherit; letter-spacing:inherit; text-align:inherit; color:inherit; padding:0; border:none; background-color:#eee; display:block;}
.print-obj .table.clone-sec {padding:0;}
.print-obj .table.clone-sec tr.obj {padding:0; border:none;}
.print-obj .table.clone-sec .up,
.print-obj .table.clone-sec .down {display:none;}
.print-obj .table.clone-sec .remove a {background-color:transparent; border:none;}
.print-obj .table.clone-sec .remove a::before {content:'×'; font-weight:bold;}
.print-obj .table.clone-sec .add {display:inline-block;}
.print-obj .table.clone-sec .btn-set {width:1.5em; right:-1.5em;}
@media print{
	.print-obj {padding:0;}
	.print-obj input[type="text"] {background-color:transparent;}
	.print-obj .table.clone-sec .add {display:none;}
	.print-obj .table.clone-sec .btn-set {display:none;}
	.fix-btn {display:none;}
}