@charset "utf-8";

/* -----------------------------------------------------------------
 * font
 * ----------------------------------------------------------------- */
body {
	font-family: 'Noto Sans Japanese', serif;
}
html[lang=zh] body {font-family:"Microsoft Yahei","PingHei","sans-serif";}
/*
html[lang=ja] body {
	font-family: SF Pro JP,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,"\30D2\30E9\30AE\30CE\89D2\30B4  Pro W3",Hiragino Kaku Gothic Pro,"\30E1\30A4\30EA\30AA",Meiryo,"\FF2D\FF33  \FF30\30B4\30B7\30C3\30AF",Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
	quotes: "\300C" "\300D";
}
*/

/* ----------------------------------------- 
 * Close Button
 * ----------------------------------------- */
button.btn-close {background:transparent; border-color:transparent; padding:0 !important; margin:0; position:relative;}
button.btn-close i {box-shadow:none; width:35px; height:35px; display:inline-block;}
button.btn-close i::before, button.btn-close i::after {position: absolute; top:50%; left:6px; height:1px; width:23px; transition: all 0.25s;}
button.btn-close i::before {content: ''; transform: rotate(-48deg);}
button.btn-close i::after {content: ''; transform: rotate(48deg);}
button.btn-close:hover i::before {transform: rotate(48deg);}
button.btn-close:hover i::after {transform: rotate(-48deg);}

button.btn-prev, button.btn-next {color:var(--main-color); font-size:1.6em; opacity:.6;}
button.btn-prev::before {content: "\f137"; font-family: 'FontAwesome';}
button.btn-next::after {content: "\f138"; font-family: 'FontAwesome';}


/* -----------------------------------------------------------------
 * footer
 * ----------------------------------------------------------------- */
#footer {
	font-size:.6em;
	letter-spacing:0.1em;
}
#footer span {
	display:block; 
	text-align:center; 
	margin-bottom:3px; 
	transform: scale(.9);
	opacity:.8;
}
#footer span.fa:before {
	padding-right:2px;
}


/* ----------------------------------------- 
 * view-frame
 * ----------------------------------------- */
.view-frame {position:relative;}
.view-frame span.status {
    right: 50px;
    top: -50px;
}

.flags i.fa {
	color: var(--white);
	padding:.5em;
	margin: 1px .2em 1px 0;
	font-size: .75em;
	line-height:1em;
	border-radius:4px;
	background: var(--pink);
}
.flags i.fa::before {margin-right:5px;}
.flags i.fa.danger {color:#CC3300; border-color:#CC3300;}
.flags i.fa.cancel {color:#fff; border-color:#CC3300; background:#CC3300;}
.flags i.fa.danger.allergy {color:#CC3300; border-color:#CC3300;}
.flags.list i.fa {padding:3px 5px; border-width:1px; line-height:1em;}

/* ----------------------------------------- 
 * Form Edit
 * ----------------------------------------- */
.edit .row > label {text-align:right;}
.edit .row > label.required:before {content:"*"; color:#f00; padding-right:5px;}

.row.group {margin:0 0 -15px -15px !important; padding-bottom:10px;}
.row.group > div {padding-right:0;}

.row.sub {padding-top:2em;} 
.row.sub > div {text-align:justify;}
.row.sub i.label {position:absolute; font-size:.85em; color:#999; top:-22px; left:15px; z-index:1; white-space:nowrap;}
.row.sub i.label.required::after {content:"*"; color:#f00; padding-left:5px;}
.row.sub i.label small {font-size:.85em; padding-left:5px; opacity:.8;}
.row.sub .input-group button.btn-search {position:absolute; right:0; top:0; bottom:0; cursor:pointer; font-size:.8em; padding:.15em .5em; z-index:9;}

.view .row.sub > .input-group {display:block;}
.view .row.sub .money {font-size:1em;}

.edit .row.sub {padding-bottom:.5em;}
.edit .row.sub i.label {margin-left:.5em; color:var(--main-color); font-size:.75em; top:-1.5em; white-space:nowrap;}


/* ----------------------------------------- 
 * Sub Edit
 * ----------------------------------------- */
.sub-edit div.code input.bumonid {padding-left:0; padding-right:0; width:30%;}
.sub-edit div.code input.subid {padding-left:0; padding-right:0; width:60%;}
.sub-edit div.code i.divider {width:10%; display:inline-block;}
.sub-edit div.code i.divider::before {content:"-"; line-height:35px; text-align:center; display:block;}

.sub-edit.preview-import .row.sub {padding-top:0;}
.sub-edit.preview-import textarea {min-height:200px;}
.sub-edit.preview-import .desc {margin-top:20px; padding:20px; background-color:var(--main-color-light); line-height:1.6em; font-size:.9em;}
.sub-edit.preview-import .desc h4 {display:block; margin-bottom:10px; border-bottom:1px dotted #666; text-align:center; line-height:2.5em;}
.sub-edit.preview-import .desc p {margin-bottom:10px;}
.sub-edit.preview-import .desc span {display:block;}
.sub-edit.preview-import .desc span::before {content:"例:"; opacity:.5; margin-right:5px;}
.sub-edit.preview-import .result-msg {margin:0 0 10px; font-size:.9em; color:var(--main-color); font-weight:bold;}

.sub-edit.preview-product .desc {margin:10px 0;}
.sub-edit.preview-product .desc h3 {padding:5px; border:2px solid #C00; color:#C00;}
.sub-edit.preview-product .desc ul li label {display:inline-block; opacity:.5; margin-right:5px;}
.sub-edit.preview-product .desc ul li code {margin-left:10px;}
.sub-edit.preview-product .desc ul li a {display:block; margin-top:10px;}

/* -----------------------------------------------------------------
 * pop
 * ----------------------------------------------------------------- */
body.pop div.header {margin-top:2em;}