html,
header{
	//max-width:800px;
}

html{
	border-color:#000;
	color:#3f3f3f;
	font-size:12px;
	width:100vw;
	//height:calc(100vw / 210 * 297);
	//overflow-y: hidden;
}
*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

input,
select{
	font-size:2.0vw;
	padding:0.5vw;
	outline: none;
    border: none;
}
.flex{
	display:flex;
	flex-wrap:wrap;
}
.flex_center{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
}
.black{
	background:#000;
	color:#fff;
}
.itemLine{
	margin-bottom:1vw;
}
.header .itemLine{
	flex-wrap:wrap;
}
.header .itemLine .itemWrap{
	width:25%;
}
.inputWrap,
.price{
	display: flex;
	justify-content: right;
	align-items: center;
	padding:0 1vw;
}
.tableData{
	padding:0 1vw;
}
.price{
	justify-content: right;
}
.itemTitle{
	font-weight:bold;
}
header{
	padding:0.5vw;
	justify-content:center;
	align-items:center;
	background:#3f3f3f;
	position:fixed;
	width:100%;
	top:0;
	z-index: 9999999;
}
footer{
	padding:1vw;
	background:#000;
	position:fixed;
	width:100%;
	bottom:0;
	justify-content:space-between;
}
footer button{
	height: 40px;
	width:20vw;
    border: 0;
    color: #fff;
    background: #4c7593;
    margin: 0;
}
.menuBtn{
	font-size:1.4vw;
	width:15vw;
	height:40px;
	justify-content:center;
	align-items:center;
	background:#efefef;
	color:#3f3f3f;
	margin:0 1vw;
	border:0;
}
.wrapper{
	background:#F8F8F8;
	padding:4vw;
	padding-top:calc(40px + 5vw);
	padding-bottom:calc(40px + 5vw);
	min-height:100vh;
}
.detail{
	padding:0;
	padding-top:calc(40px + 1vw);
	padding-bottom:calc(40px + 1vw);
}
.printArea{
	background:#fff;
	padding:3vw 5vw;
	padding-top:6vw;
	padding-bottom:6vw;
	height:calc(1.4142135623730950488016887242097 * 100vw);
}

.header input {
    height: 40px;
}
.itemLine,
.itemLine .itemWrap{
	display:flex;
	align-items:center;
	justify-content:space-between;
}
.itemWrap{
	flex-wrap:wrap;
}
.title{
	margin-bottom:2vw;
	justify-content: center;
}
.title>select{
	width:33.3%;
}
.title>span{
	width:33.3%;
	display:flex;
	justify-content:center;
	align-items:center;
	font-weight:bold;
	padding:1vw;
	margin-top:2vw;
}

.header{
	margin-bottom:2vw;
}
#searchBox>div{
	display:flex;
	justify-content:space-between;
	margin-bottom:2vw;
}
#searchBox button{
	background:#333;
	color:#fff;
}
.searchSub input{
	width:49%;
}
.itemLine input{
	padding:0.25rem;
}
.itemTitle{
	margin-right:1vw;
	width:100%;
}

.tableBottom{
	margin-bottom:2vw;
}
.tableRecord{
	display:flex;
	width:100%;
	flex-wrap:wrap;
	position:relative;
}
.tableRecord>div:first-child{
	width:30%;
}
.tableRecord>div:nth-child(2){
	width:42%;
}

.tableRecord>div:nth-child(3){
	width:8%;
}
.tableRecord>div:nth-child(4),
.tableRecord>div:nth-child(5){
	width:10%;
}
.tableBorder{
	border:1px solid;
}
.tableRecord>div{
	height:40px;
	border:1px solid;
	display:flex;
	align-items:center;
	white-space: nowrap;
}

.tableHeader{
	display:flex;
	justify-content:center;
	align-items:center;
	background:#e7e7e7;
	font-size: 12px;
}
.tableData>input{
	width:100%;
	height:100%;
	max-height:3.0rem;
}
.tableRecord>.tableData:nth-child(3)>input,
.tableRecord>.tableData:nth-child(4)>input,
.tableRecord>.tableData:nth-child(5)>input{
	text-align:right;
}
.itemQuantity,
.itemQuantity select{
	padding:0;
}
.radioBox .radioTitle{
	width:100%;
	text-align:center;
	    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.radioBox{
	border:solid 1px #000;
}
.radioArea>div{
	width:100%;
}
.radioArea>div>div:first-child{
	width:25%;
}
.radioArea>div>div:last-child{
	width:75%;
}
.radioBottom>div{
	min-height:80px;
}
.paymentBox select,
.paymentOption>div,
.paymentOption>input{
	width:50%;
}
.paymentOption{
	width:100%;
	display: flex;
}
.identifier select,
.identifier input{
	width:100%;
}
textarea{
	width:100%;
	height:100%;
	border:0;
	padding:1vw;
}

.customerTitle{
	background:#000;
	color:#fff;
	width:100%;
	text-align:center;
	margin:1vw 0;
}

.customerBefore,
.customerAfter{
	width:100%;
	display:flex;
	flex-wrap: wrap;
	border:1px solid #000;
	margin-top:1.5vw;
	justify-content: center;
}
.customerBefore>div,
.customerAfter>div{
	padding: 0.5vw;
}
.customerLeft>div{
	width:100%;
}
.doui,
.kagihonsu{
	background:#ddd;
	padding:1vw;
	justify-content:space-between;
}
.customerArea{
	justify-content:space-between;
}
.customerRight{
	display:flex;
	flex-wrap:wrap;
}
.customerArea ul{
    font-size: 0.7vw;
	list-style-position: inside;
}
.customerLeft{
	width:60%;
}
.customerRight{
	padding-left:1vw;
	width:40%;
}
.customer_option_before{
	width:1.5rem;
}
.customer_option{
	width:calc(100% - 1.5rem - 7rem);
}
.customerBox{
	border-bottom:solid 1px #000;
	margin-top:1.5vw;
}
.customerLine{
	display:flex;
	flex-wrap:wrap;
	border:solid 1px #000;
	border-bottom:0;
	height:4vw;
	align-items:center;
}
.customerLine .title{
	margin:0;
	width:30%;
	text-indent:1vw;
}
.customerLine input,
.customerLine select{
	width:70%;
}
.kagihonsu{
	font-size:1.7vw;
}
.signatureInputTitle{
	margin:0.7vw 0 0.2vw;
}
.signatureAreaTitle{
	background:#000;
	color:#fff;
	text-indent:1rem;
	width:100%;
	height: 2vw;
    align-items: center;
    justify-content: center;
    display: flex;
	
}
.signature_img,
{.signature_img_before
	border:1px dotted #000;
	height: 65px;
}
.hikae{
	margin-top:2vw;
	justify-content:space-between;
}

.hikaeLeft{
	width:45%;
	font-size: 1.8vw;
}
.hikaeRight{
	width:50%;
	display: flex;
    flex-wrap: wrap;
}
.hikae .title{
	width:100%;
	text-align:center;
	font-size:2.3vw;
}
.hikaeLeft div{
	align-items:center;
}
.hikaeLeft>div{
	height:20%;
	justify-content:space-between;
	border-bottom:1px solid #000;
	padding: 5px 0;
}
.hikaeLeft input{
	font-size:unset;
}
.hikaeLeft .left{
	width:25%;
	font-weight:bold;
}
.hikaeLeft .right{
	width:75%;
	text-align:right;
	display: flex;
    justify-content: end;
}

.customer_name{
	font-size:18px;
}
.customer_name span{
	font-size:1.8vw;
	font-weight:bold;
}
.company{
	margin-bottom:1vw;
}
.logo {
    width: 90px;
    height: 70px;
    padding-right: 20px;
}
.companyRight{
	width:100%;
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    height:70px;
    font-size:1.5vw;
}
.companyRight>div{
	width:100%;
}
.companyName{
	font-size:18px;
	font-weight:bold;
}
.account{
	border:1px dotted #000;
	padding:1vw;
	width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.account div{
	width:100%;
}

.signature {
    display: flex;
    align-items: center;
    flex-wrap:wrap;
}
.signature_div{
	height: 8.2vw;
	padding: 1vw;
}
.signature_img,
.signature_img_before{
	border: solid 1px #666;
	min-height:8.0vw;
	min-width:30.6vw;
}
.signatureTitle {
    width: 100%;
    /* height: 10px; */
    text-align: center;
    font-size: 5vw;
    font-weight: bold;
}


.signature #canvas {
	width:92vw;
    height:calc(92vw * 0.25);
    margin-bottom:10vw;
}
.signature_img img,
.signature_img_before img{
	width:100%;
}
.signature_pretext{
	text-align:center;
	width:100%;
}
.agreement_title {
    font-weight: bold;
    font-size: 3vw;
    padding-bottom: 1.5vw;
}
.agreement_pretext {
    padding-bottom: 1.5vw;
}
.agreement_text{
	width:100%;
	height:55vw;
	overflow-y:scroll;
	border:solid 2px #ddd;
	padding: 3vw;
}
.agreement_text ul{
	list-style-type:square;
	list-style-position: inside;
}
.agreement_text ul>li{
	margin-bottom:2vw;
}
.agreement_text ol {
    padding-left: 3rem;
}
.agreement_text ol ol{
    padding-left: 3rem;
}
.agreement_button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin: 3vw 0 10vw;
}
.agreement_button label{
	padding-left:1.5vw;
	font-size:4vw;
}

.view.list .dataTr,
.view.list .dataTh,
.view.list .dataTd{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
}
.view.list .dataTr{
	width:100%;
	background:#fff;
	margin-bottom:2px;
}
.view.list .dataTr:nth-child(odd) .dataTd{
	background:#f5f4f4;
}
.view.list .dataTh,
.view.list .dataTd{
	padding: 1vw;
}
.view.list .dataTd{
	height:calc(40px + 2vw);
}
.view.list .dataTh{
	background:#555;
	color:#fff;
	height: 40px;
}
.view.list .dataTr .dataTh:nth-child(1),
.view.list .dataTr .dataTd:nth-child(1){
	width:15%;
}
.view.list .dataTr .dataTh:nth-child(2),
.view.list .dataTr .dataTd:nth-child(2){
	width:20%;
}
.view.list .dataTr .dataTh:nth-child(3),
.view.list .dataTr .dataTd:nth-child(3){
	width:20%;
}
.view.list .dataTr .dataTh:nth-child(4),
.view.list .dataTr .dataTd:nth-child(4){
	width:10%;
}
.view.list .dataTr .dataTh:nth-child(5),
.view.list .dataTr .dataTd:nth-child(5){
	width:35%;
}
button{
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0 2vw;;
	appearance: none;
	height:40px;
	display:flex;
	justify-content:center;
	align-items:center;
}

.dataArea button{
	background:#333;
	color:#fff;
}
.view.list .dataTr>.dataTd:last-child{
	display:flex;
	justify-content:space-evenly;
}
.msg,
.errorMsg{
	width:100%;
	text-align:center;
	font-size:1.8vw;
	font-weight:bold;
	padding:0;
}
.msg{
	color:#00Bf00;
}
.errorMsg{
	color:#bf0000;
}


.body_login{
	overflow-y:hidden;
}


@media screen and (max-width:479px) {
	/* iPhone 縦 */
	
}
@media screen and (min-width:480px) {
	/*　for iPhone Landscape　(iPhone 横)　*/
}
@media screen and (min-width:768px) and ( max-width:1024px) {
	/*　for iPad 　*/
	body{
		width:100vw;
		height:128vw;
	}
}
.itemSelect{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.4);
	display:none;
}
.itemSelectBox{
	background: #fff;
    width: 95vw;
    height: calc(100vh - 5vw);
    margin: 2.5vw;
    position:relative;
}
.itemSelectControl{
	position:absolute;
	bottom:0;
	height:calc(11vh - 5vw);
	width:100%;
	display:flex;
	justify-content: space-evenly;
}
.itemSelectControl button{
	width:40%;
	background:#4c7593;
	color:#fff;
	font-weight:bold;
}
.itemSelectBox_inner {
    padding: 2vw;
    height: 89vh;
}
.itemSelectAjax {
    display: flex;
    flex-wrap: wrap;
    border:3px solid #eee;
}
.itemSelectAjax>div {
    width: 50%;
}
.category1_box,
.category2_box{
	height:8vh;
	border-bottom:3px solid #eee;
}
.category3_box,
.category4_box{
	height:77vh;
	overflow-y:scroll;
}
.category1_box,
.category3_box{
	border-right:3px solid #eee;
}
.itemSelectAjax select{
	width:100%;
}
.category1_box select,
.category2_box select{
	height:100%;
}
.category3_box select,
.category4_box select{
	min-height:50px;
	border-bottom:1px #eee solid;
}
.category3_box select option,
.category4_box select option{
	height:50px;
	border-bottom:1px #eee solid;
	display:flex;
	align-items:center;
	text-indent:1rem;
}
.category3_box select option:last-child,
.category4_box select option:last-child{
	border-bottom:0;
}
.pager{
	margin-top:2vw;
}
.pager>.inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.pager>.inner span,
.pager>.inner button {
    display: flex;
    align-items:center;
    justify-content: center;
    width:3vw;
    height:3vw;
}
.pager>.inner button.arwBtn{
	width:5vw;
}
.pager>.inner button.hideBtn{
	width:5vw;
	background:#F8F8F8;
}
.clearBtn{
	position: absolute;
	left: -3.5vw;
	width: 3.5vw;
	height: 3.5vw;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #3f3f3f;
	font-size: 1.5vw;
}
@media screen and (min-width:1024px) {
	/*　for PC　*/	
	.wrapper.edit,
	.wrapper.view,
	.body_login{
	    width: 800px;
	    margin: 0 auto;
	}
	html{
		font-size:14px;
	}
	.wrapper {
	    padding: 30px;
	    padding-top: 30px;
	    padding-bottom: 30px;
	}
	.doui, .kagihonsu {
	    padding: 1%;
	}
	.itemLine input{
		height:2.3rem;
	}
	.printArea {
    	padding: 20px 60px;
    	height: calc(740px / 210 * 296);
	}
	.title {
		margin-bottom: 20px;
	}
	.title>span {
    	padding: 10px;
    	margin-top: 20px;
    }
    .header {
	    margin-bottom: 20px;
	}
	.inputWrap{
	    padding: 0 10px;
	}
	hikae {
	    margin-top: 20px;
	    justify-content: space-between;
	}
	.account {
	    padding: 10px;
	}
	.tableRecord>div {
    	height: 25px;
    	padding: 0 5px;
    }
    .hikaeLeft input {
	    height: 20px;
	}	
	footer {
    	padding: 10px;
    }
    .edit .customer_name{
    	width:260px;
    }
    .edit .customer_option{
    	width:250px;
    }
    .edit .work_result{
    	width:100%;
    }
    
	.wrapper.edit, .wrapper.view {;
	    margin: 60px auto;
	}
	.tableBottom {
    	margin-bottom: 20px;
	}
	.signature #canvas {
	    height: 200px;
	}
	.signature_img, .signature_img_before {
		min-height: auto;
    	min-width: auto;
		height: calc(116px * 0.6);
		width: calc(416px * 0.6);
	}
	.flex customer_option_before{
		width:30px;
	}
	.customer_option{
		width:220px;
	}
	.customer_option_after{
		width:60px;
	}
	
	.customerLine {
    	height: auto;
	}
	input, select{
    	padding: 0.5%;
    }
	.customerArea,
	.kagihonsu,
	.customerArea ul{
		font-size: 9px;
	}
	.customerLeft ul {
	    font-size: 10px;
	}
	.hikaeLeft,
	.companyRight,
	.errorMsg{
		font-size: 11px;
	}
	.invoice_no,
	.tableHeader,
	.account{
		font-size:12px;
	}
	input, select,
	.tableRecord,
	.menuBtn{
		font-size: 14px;
	}
	.agreement_title,
	.agreement_button label{
		font-size: 16px;
	}
	.hikae .title,
	.signatureTitle{
		font-size:18px;
	}
	.agreement_text{
		height:300px;
	}
	.agreement_button {
		margin-bottom: 30px;
	}
}


@media print {
	@page {
	    size: A4 portrait;
	    margin: 0mm;
	}
	body{
		-webkit-print-color-adjust: exact;
	}
  header,
  footer {
    display: none !important;
  }
  .wrapper{
  	padding-top:0 !important;
  	padding-bottom:0 !important;
  	margin:0 !important;
  	background:#FFF !important;
  }
	.printArea{
		background:#cb7474;
		padding:0;
		margin: 0;
		width: 210mm;
		height: 297mm;
		padding: 15mm;
		box-sizing: border-box;
	}
	.radioBottom>div {
	    min-height: 4rem;
	}
	.title>span {
    	margin-top: 0;
    }
    .companyRight{
    	font-size:2.7mm;
    }
    .hikaeLeft {
        height: 40mm;
    }
}