body, html { height: 100%; margin: 0; padding: 0; box-sizing: border-box; }
body { background: #f0f0f1; min-width: 0; color: #3c434a; font-family:Ubuntu,'Hiragino Kaku Gothic Pro',HiraKakuPro-W3,'ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,sans-serif,'MS P ゴシック'; font-size: 16px; line-height: 1.4; }
body * { box-sizing: border-box; }
input[type=color],
input[type=date],
input[type=datetime-local],
input[type=datetime],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
select,
textarea {
    box-shadow: 0 0 0 transparent;
    border-radius: 4px;
    border: 1px solid #8c8f94;
    background-color: #fff;
    color: #2c3338;
    line-height: 1.5;
}
.err {
	color: #f33;
}
.form {
	display: inline-block;
}
input:disabled,
select:disabled,
textarea:disabled {
	background-color: #eee;
}
a { color: #369; }
a:link, a:visited { color: #369; }
a:hover, a:active { color: #963; }
/* sticky テーブル */
.sticky_area {
	width: calc(100% - 1px);
	height: calc(100% - 1px);
	margin: 0px auto;
}
.sticky_table {
	overflow: hidden;
	overflow-y: auto;
	width: 100%;
	height: 100%;
}
.sticky_table table {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-spacing: 0;
}
.sticky_table table thead th {
	background-color: #666;
	color: #fff;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 1;
}
.sticky_table table thead td {
	background-color: #f0f0f1;
	border: 0;
}
.sticky_table table th, .sticky_table table td {
	border: 1px solid #fff;
	padding: 3px 10px;
	text-align: center;
}
.sticky_table table tr:nth-child(1n) {
	background-color: rgba(0,0,0,0.2);
}
.sticky_table table tr:nth-child(2n) {
	background-color: rgba(0,0,0,0.1);
}
/* トースト */
#toast_area{
	display: none;
	position: absolute; top: 0; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);
	height: auto;
	width: auto;
	margin: 0px;
	padding: 0px;
	background-color: rgba(255,255,255,1);
	border: 1px solid #999;
	border-top: 0px;
	border-radius: 0 0 5px 5px;
	opacity: 0;
	z-index: 99999;
}
#toast_area_title{
	margin: 0px;
	padding: 0px;
	color: #933;
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	width: 100%;
}
#toast_area_body{
	margin: 0px;
	padding: 5px 10px;
	color: #333;
	font-size: 1em;
	text-align: left;
	width: 100%;
}
#toast_area_body span{
	display: inline-block;
	color: #33f;
	font-size: 0.8em;
}
/* pop */
#pop_area { display: none; margin: 0; padding: 0; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 99999; }
#pop_areaback { margin: 0; padding: 0; width: 100%; height: 100%; position: relative; background-color: rgba(0,0,0,0.3); }
#pop_box {
    margin: 0;
    padding: 0;
    padding-top: 20px;
    display: inline-block;
    font-size: 1.5em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #fff;
	border-radius: 2px;
	max-width: 95%;
	max-height: 95%;
	overflow: auto;
}
#pop_title { position: absolute; top: 2px; left: 2px; height: 30px; font-size: 14px; font-weight: bold; margin: 0; padding: 5px; box-sizing: border-box; color: #333; }
#btn_popclose { position: absolute; top: 2px; right: 2px; width: 30px; height: 30px; font-size: 20px; font-weight: bold; margin: 0; padding: 5px; box-sizing: border-box; border-radius: 2px; color: #333; }
#btn_popclose:before { content:"×"; height: 25px; line-height: 25px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }
#btn_popclose:hover { color: #f33; background-color: #eee; cursor: pointer; }
#pop_body {
	margin: 0;
	padding-top: 15px;
	text-align: center;
	font-size: 14px;
}
#pop_body>div {
	padding-bottom: 0px;
}
/* pager */
.pager { margin-top: 20px; text-align: center; }
.pager ul { list-style: none; display: block; flex-wrap: wrap; margin: 0; padding: 0; }
.pager ul li { display: inline-block; height: 33px; width: 33px; line-height: 33px; margin: 0; padding: 0; text-align: center; margin: 2px; border: 1px solid #fff; }
.pager ul li.active { background-color: #ccc; }
.pager ul li a { text-decoration: none; color: #333; }
.pager ul li.active a { color: #fff; cursor: default; }
.pager ul li a.first, .pager ul li a.last, .pager ul li a.prev, .pager ul li a.next { font-size: 0; }
.pager ul li a.first:before { font-size: 14px; content:'<<'; }
.pager ul li a.prev:before { font-size: 14px; content:'<'; }
.pager ul li a.next:before { font-size: 14px; content:'>'; }
.pager ul li a.last:before { font-size: 14px; content:'>>'; }
.pager ul li.active.first,
.pager ul li.active.prev,
.pager ul li.active.next,
.pager ul li.active.last { visibility: hidden; }
/* もっと見る */
button#btn_more, button.btn_more {
	width: 100%;
	border: 0;
	border-radius: 0;
	background-color: #333;
	color: #fff;
	height: 30px;
	line-height: 30px;
	font-size: 1em;
	font-weight: bold;
}

/**
 * ログイン画面
 */
#login { height: 100vh; position: relative; }
#loginbox { width: 320px; margin: 0; position: absolute; top: calc(50% - 100px); left: 50%; margin-right: -50%; transform: translate(-50%, -50%); }
#loginbox form { padding: 10px 20px; background: #fff; border: 1px solid #c3c4c7; border-radius: 3px; }
#loginbox label { display: inline-block; width: 100%; cursor: pointer; }
#loginbox input[type=text] { width: 100%; }
#loginbox input[type=password] { width: 100%; }
#loginbox label[for=rememberme] { display: block; width: 165px; margin: 0 auto; margin-top: 10px; font-size: 13px; }
#loginbox button { display: block; margin: 0 auto; margin-bottom: 10px; }

ul.itemlist_title { list-style: none; display: flex; flex-wrap: wrap; width: 100%; margin: 0; padding: 0; padding-left: 5px; }
ul.itemlist_title li { display: inline-block; width: auto; margin: 0; padding: 0; padding-right: 10px; vertical-align: top; text-align: left; }
ul.itemlist { list-style: none; display: flex; flex-wrap: wrap; width: 100%; margin: 0; padding: 0; padding-left: 5px; }
ul.itemlist:last-child { border-bottom: 0; }
ul.itemlist li { display: inline-block; width: auto; margin: 0; padding: 0; padding-right: 10px; vertical-align: top; text-align: left; }
ul.itemlist_title li:nth-child(1), ul.itemlist li:nth-child(1) { width: 5%; }	/* 取引先 */
ul.itemlist_title li:nth-child(2), ul.itemlist li:nth-child(2) { width: 15%; }	/* メーカー */
ul.itemlist_title li:nth-child(3), ul.itemlist li:nth-child(3) { width: 15%; }	/* 商品分類 */
ul.itemlist_title li:nth-child(4), ul.itemlist li:nth-child(4) { width: 40%; }	/* 品番 */
ul.itemlist_title li:nth-child(5), ul.itemlist li:nth-child(5) { width: 10%; }	/* 単価 */
ul.itemlist_title li:nth-child(6), ul.itemlist li:nth-child(6) { width: 5%; }	/* 数量 */
ul.itemlist_title li:nth-child(7), ul.itemlist li:nth-child(7) { width: 10%; }	/* 価格 */

/*--------------------
 * 管理画面
 */
/***
 * ヘッダーナビ
 */
.nav ul { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; background-color: #999; border-bottom: solid 1px #666; }
.nav ul li { display: inline-block; width: auto; height: 41px; margin: 0; padding: 0 20px; vertical-align: top; text-align: center; line-height: 41px; font-size: 1.2em; font-weight: bold; }
.nav ul li:first-child { width: auto; padding: 2px; padding-right: 30px; margin: 0px; }
.nav ul li:nth-child(2) { margin-left: 0px; }
.nav ul li:last-child { margin-right: 0px; }
.nav ul li img[src$="logo.png"] { height: 100%; margin: 0 auto; padding: 0; }
.nav ul li a, .nav ul li a:visited { text-decoration: none; color: #fff; }
.nav ul li:nth-child(n+2) {
	cursor: pointer;
}
.nav ul li:nth-child(n+2).active {
	background-color: #ccc;
	color: #666;
	cursor: initial;
}
.nav ul li:nth-child(n+2).active a {
	color: #666;
	cursor: initial;
}
.nav ul li:nth-child(n+2):hover {
	background-color: #ccc;
}
.nav ul li:nth-child(n+2):hover a {
	color: #666;
}
/***
 * 顧客管理画面
 */
#search .container {
	width: calc(100% - 100px);
	height: calc(100% - 100px);
	margin: 20px auto;
}
#search input,
#search select {
	width: 100px;
}
#search input[name=kwd] {
	width: auto;
}
#search .sticky_area {
	width: 100%;
	height: calc(100% - 100px);
}
/***
 * 顧客登録/編集画面
 */
#edit .container {
	width: calc(100% - 100px);
	height: calc(100% - 100px);
	margin: 20px auto;
}
#edit .container table,
#edit .container input,
#edit .container select,
#edit .container textarea {
	width: 100%;
	height: 30px;
}
#edit .container textarea {
	height: 100%;
}
#edit .container table td {
	vertical-align: top;
	margin: 0;
	padding: 0;
}
#edit .container table td.inputBlock {
	width: 50%;
}
#edit .container table td.inputColtitle {
	width: 100px;
	vertical-align: middle;
    background-color: #666;
    color: #fff;
    font-weight: bold;
    text-align: center;
}
#edit .sticky_area {
	width: 100%;
	height: calc(100% - 318px);
	margin: 2px auto;
}
#edit tr[data-hist_id=new] {
	background-color: #fee;
}
#edit tr[data-hist_id=new]>td:first-child {
    position: relative;
}
#edit tr[data-hist_id=new]>td:first-child:before {
    content: '[NEW]';
    font-size: 0.6em;
    color: #f33;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}
#edit #pop_area [id^=errmsg_] {
	padding: 0;
	margin: 0;
	color: #f00;
	font-size: 10px;
}
#edit #pop_area input.error {
	background-color: #fcc;
}
#edit #pop_area #edit_itemListBlock td {
	vertical-align: top;
}
#edit #pop_area [id^=btn_deleteitem_] {
	display: block;
	width: 16px;
}
#edit #pop_area tr.remove {
    position: relative;
        background-color: rgba(64,64,128, 0.1);
}
#edit #pop_area tr.remove input {
	opacity: 0.1;
}
#edit #pop_area tr.remove>td:first-child:after {
    content: "削除";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    font-weight: bold;
}
/***
 * アカウント管理画面
 */
#member .sticky_area {
	width: calc(100% - 100px);
	height: calc(100% - 100px);
	margin: 20px auto;
}
/***
 * マスター管理画面
 */
#master .container {
	width: 500px;
	height: calc(100% - 100px);
	margin: 20px;
}

/**
 * スマホ
 */
.sp { display: none; }
@media screen and (max-width:720px) {
	#search {
		font-size: 20px;
	}
	#search .nav {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		height: 42px;
	}
	#search .container {
/*
		width: calc(100% - 10px);
		height: calc(100% - 10px);
		margin: 10px auto;
*/
		width: 100%;
		height: calc(100% - 42px);
		margin: 0;
		position: fixed;
		left: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 10px 0;
	}
	#search form {
		text-align: center;
	}
	#search .pager {
		margin-top: 0;
	}
	#search .sticky_area {
		height: calc(100% - 85px);
	}
	.pc { display: none; }
	.sp { display: block; }
	.sp .sticky_table table tr { background-color: rgba(0,0,0,0.1); }
	.sp .sticky_table table tr.detail_btn { background-color: rgba(0,0,0,0.2); }
	.sp .sticky_table table>thead>tr>th { background-color: #f0f0f1; border: 0; }
	.sp .sticky_table table>thead>tr>th ul { list-style: none; display: block; flex-wrap: wrap; margin: 0; padding: 0; }
	.sp .sticky_table table>thead>tr>th ul li { display: inline-block; width: 50px; margin: 0; padding: 0; text-align: center; }
	.sp .sticky_table table>tbody>tr>td button { width: 100%; margin:0; border: 0; line-height: 2; font-size: 20px; }
	.sp .hist_purchase_block { width: 100%; height: 150px; overflow: auto; text-align: left; border: 1px solid #ccc; font-size: 14px; }
	#popBlock .hist_purchase_block { width: 100%; height: 150px; overflow: auto; text-align: left; border: 1px solid #ccc; font-size: 14px; }
}