html{
	font-size:14px;
}

main{
	padding-top:66px;
	position: relative;
}

main #list{
    margin:1em 1.5em;
}

main h1 {
	display: block;
	width:100%;
    font-size: 1.33em;
    letter-spacing:0;
	font-weight:600;
	margin:1em 0 1em 0;
	padding-bottom:0.25em;
	border-bottom:1px solid #ddd;
}

nav {
	z-index:8 !important;
}

nav.open {
	z-index:9999 !important;
}

main #list .pure-button{
	position: relative;
	z-index:9;
}

.navbar_toggle_icon{
	background:black !important;
}

@media screen and (min-width: 568px) {
	main{
		padding-top:40px;
	}
	
	main h1{
		margin-top:0;
	}
	
	.navbar_toggle {
		display: block;
	}	
	
	main #list{
		margin:2em 2em 1em calc(188px + 2em);
	}	
}
@media screen and (min-width: 768px) {
	
	main #list{
		margin:2em 2em 1em calc(225px + 2em);
	}
}

@media screen and (min-width: 1024px) {
	main #list{
		margin:2em 3em 1em calc(225px + 3em);
	}
}


/*					*/
/*		sign_in		*/
/*					*/

main #list.sign_in{
	width:300px;
	margin:0 auto;
	background:white;
	border-radius:.25rem;
	border:0.5px solid #ddd;
	padding:2em;
}
main #list.sign_in h1{
	border:none;
	margin:0;
	padding:0;
}

/*					*/
/*		header		*/
/*					*/
header{
	position: fixed;
	width: 100%;
	height: 66px;
	z-index:10;
	background:rgb(240,240,240);
}

header .user_menu{
	position: absolute;
	top:2.25em;
	right:0.5em;
}

header .user_menu ul{
	display:none;
	list-style:none;
	margin:0;
	margin-top:1em;
	padding:0.5em;
	background:white;
	border:0.5px solid gray;
	border-radius: 0.25rem;
}

header #user, header #slipBt,header #printBt{
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	right:140px;
	cursor: pointer;
	transition: ease .2s;
	display:none;
}

header #slipBt{
	right:55px;	
	display:block;
}
header #printBt{
	right:95px;	
	display:block;
}
header #slipBt.disabled,header #printBt.disabled{
	opacity:0.3;
	cursor: auto;
}

header #user img ,header #slipBt img,header #printBt img{
	width:auto;
	height:28px;
	margin-top:4px;
	margin-right:8px;
}

header #user span{
	display:none;
}

header #user:hover{
	opacity:0.6;
}

header .user_menu a{
	transition: ease .2s;
}

header .user_menu a:hover{
	opacity:0.6;
}

.navbar_brand{
	position: relative;
	font-size:1.2em;
	font-weight: bold;
	height:25px;
	top:50%;
	left:1.33em;
	transform: translate(0, -50%);
}

.navbar_toggle{
	position: absolute;
	top:50%;
	transform: translate(0,-50%);

	right:15px;
	z-index:100;
	cursor: pointer;	
}

.navbar_toggle_icon {
	position: relative;
	display: block;
	height: 2px;
	width: 30px;
	background: white;
	transition: ease .3s;
}

.navbar_toggle_icon:nth-child(1) {
	top: 0;
}

.navbar_toggle_icon:nth-child(2) {
	margin: 10px 0;
}

.navbar_toggle_icon:nth-child(3) {
	top: 0;
}

/*	OPEN時の動き	*/
.navbar_toggle.open .navbar_toggle_icon:nth-child(1) {
	top: 12px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.navbar_toggle.open .navbar_toggle_icon:nth-child(2) {
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	opacity: 0;
}

.navbar_toggle.open .navbar_toggle_icon:nth-child(3) {
	top: -12px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

@media screen and (min-width: 568px) {
	header{
		height:40px;
	}
	.navbar_brand{
		font-size:1.1em;
		left:0.88em;
	}
	.navbar_toggle{
		display: none;
	}

	header #user {
		right:6.5em;
	}
	header #slipBt {
		right:1em;
	}
	header #printBt {
		right:3em;
	}
	header #user img{
		height:16px;
	}
	header #slipBt img,header #printBt img{
		height:24px;
	}
	header #user span{
		display: inline;
		position: relative;
		top:-2px;		
	}
}


/*					*/
/*		nav			*/
/*					*/
nav{
	letter-spacing:0.02em;
	position: absolute;
	z-index:9999;
}

nav.open{
	z-index:1;
}

.navbar_menu{
	position: fixed;
	top:inherit;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
	z-index:9999;
	transition:ease .2s;
	overflow:hidden;
	width:100%;
	background:rgb(240,240,240);
	padding-bottom:2em;
}

nav.open .navbar_menu {
	-webkit-transform:translateX(0);
	transform:translateX(0);
}

.navbar_menu .pure-form{
	padding:0 1em;
}
.navbar_menu .pure-form select{
	height:inherit;
	margin-bottom:1.5em;
	cursor: pointer;	
}


.navbar_menu ul#kanaIndex{
	padding:0;
	margin:0 0 1.5em 0;
	list-style:none;
	border-top:1px solid #ddd; 
	border-left:1px solid #ddd;
	display:flex;
	flex-wrap:wrap;
	background:rgb(240,240,240);
}

.navbar_menu ul#kanaIndex li{
	width:calc((100% - 6px) / 5);
	text-align:center;
	margin:0;
	padding:0;
	border-bottom:1px solid #ddd; 
	border-right:1px solid #ddd;
	cursor: pointer;
}

.navbar_menu ul#kanaIndex li.active{
	background-color:#fff;
}
.navbar_menu ul#kanaIndex li.disabled{
	cursor:auto;
}



.navbar_menu .genre{
	width:calc(100% + 1em);
	margin-bottom:1.5em;
}

.navbar_menu .genre label{
	float:left;
	width:calc(100% / 3);
}

.navbar_menu .pure-form  input#search{
	width:100%;
	height:inherit;
	margin-bottom:0;
	border-radius: 4px 4px 0 0;
}

.navbar_menu .pure-form  input#searchBt{
	width:100%;
	border-radius: 0 0 4px 4px;
}

.navbar_menu .pure-form .newSlip{
	border:1px solid #333;
	margin-bottom:1em;
	padding:0.5em;
	border-radius: 4px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-size:0.8em;	
}

.navbar_menu .pure-form .newSlip.error{
    border-color: rgb(202, 60, 60);
}

.navbar_menu .pure-form .newSlip .msg{
    color: rgb(202, 60, 60);
	display: block;
	margin:0.5em 0 0 0;
}

.navbar_menu .pure-form .newSlip label{
	width:4em;
}
.navbar_menu .pure-form .newSlip input{
}

.navbar_menu .pure-form  input#slipId,
.navbar_menu .pure-form  select#slipId,
.navbar_menu .pure-form  input#staff{
	width:calc(100% - 4em);
	height:inherit;
	margin-bottom:0.5em;
}

.navbar_menu .pure-form input#make_slipBt{
	width:100%;
	border-radius: 4px;
	font-size:1.25em;
}

.navbar_menu .pure-form .kanpin_menu{
	display:flex;
}

.navbar_menu .pure-form .kanpin_menu label{
	margin-right:1.5em;
}


@media screen and (min-width: 568px) {
	.navbar_menu .pure-form .newSlip{
		margin-bottom:2em;
	}

	.navbar_menu ul#kanaIndex li{
		padding:0.3em 0 ;
	}

	main nav{
		width:188px;
		height:100%;
		background:rgb(240,240,240);
		position: fixed;
	}
	
	.navbar_menu{
		width:188px;
		-webkit-transform:translateX(0);
		transform:translateX(0);	
	}

	.navbar_menu .pure-form .kanpin_menu label{
		margin-right:0.5em;
	}
}

@media screen and (min-width: 768px) {
	main nav,
	.navbar_menu{
		width:225px;
	}

	.navbar_menu .pure-form .kanpin_menu label{
		margin-right:1em;
	}
	
}

@media screen and (min-width: 1024px) {
}

#clipBord{
	height:0;
	opacity:0;
}

/*					*/
/*		list-item	*/
/*					*/

.list-item{
	border:1px solid #bababa;
	margin-bottom:1em;
	display:flex;
	flex-wrap: wrap;
}

.list-item-kanpin{
	border:1px solid rgb(105,176,118);
	background: rgb(105,176,118,0.1);
}

.list-item h3{
	display:block;
	font-size:1em;
	margin: 0;
	padding:0.5em 0.5em 0.5em 0.75em;
	width:calc(100% - 2px);
	border-bottom:1px solid #cbcbcb;
}

.list-item h3 .itemUpdate{
	display:inline;
	font-weight: bold;
	cursor:pointer;
}

.list-item span{
	display:block;
	padding:0.5em;
	width:calc((100% - 7.5em - 4px) / 2);	
	border-right:1px solid #cbcbcb;		
}


.list-item .pure-button{
	margin:0.5em !important;
	font-size:0.8em;
	padding:0.25em 0.5em;
	width:6em;
}

@media screen and (min-width: 568px) {
	.list-item{
		flex-wrap: nowrap;
	}
	.list-item h3{
		width:calc(100% - 8em - 8em - 2px);
		border-bottom:none;
		border-right:1px solid #cbcbcb;			
	}

	.list-item span{
		width:8em;
	}
}

/*					*/
/*		list-doc	*/
/*					*/

main #slipList .info{
	display:inline-block;
	float:right;
	margin-bottom:1em;
}

main #slipList .columns{
	margin:0;
	padding:0;
}
main #slipList .columns li {
	display:flex;
	flex-wrap:wrap;
	font-size:0.8em;
	align-items:center;
	margin-bottom:0.5em;
}

main #slipList .columns li::before{
	content: '';
	display:block;
	width:8px;
	height:1.5em;
	background:#999;
}


main #slipList .columns input {
	width:100%;
	padding:0.5em 0.5em 0.3em 0.5em;
}

main #slipList .columns span{
	margin-right:0.5em;
}

main #slipList .columns span:nth-child(1){
	width:3em;
	padding-left:5px;
}
main #slipList .columns span:nth-child(2){
	width:calc(100% - 5em);
	margin-right:0;	
}
main #slipList .columns span:nth-child(3){
	width:4.5em;
}
main #slipList .columns span:nth-child(4){
	width:2.5em;
}
main #slipList .columns span:nth-child(5){
	width:5em;
}
main #slipList .columns span:nth-child(6){
	width:calc(100% - 16.5em);
	margin-right:1em;	
}
main #slip-list.columns span:nth-child(7){
	width:1em;
	margin-right:0;
}

main #slipList .columns i{
    width: 1em;
    height: 1em;
    background:url('https://www.yd2cdn.net/api/img/close.svg');
	display: block;
    cursor: pointer;
}

main #slipList .totalPrice{
	float:left;
	margin-bottom:2em;
	border-bottom:1px solid #333;
}

main #slipList .totalPrice span{
	font-size:1.33em;
	font-weight:bold;
}

main #slipList .scrollBt{
	display:block;
	text-align:center;
	margin:1em;
}
main #slipList .scrollBt span{
	cursor: pointer;	
}

main #slipList hr{
	margin:1em 0;
}

main #slipList .comment{
	width:100%;
}

main #slipList .campaign{
	margin:1em 0 0.5em 0;
	padding:0;
}
main #slipList .campaign li {
	display:flex;
	flex-wrap:wrap;
	font-size:0.8em;
	align-items:center;
	margin:0;
	padding:0.5em 0;
	border-top:1px solid #ddd;
}


main #slipList .campaign span:nth-child(1){
	margin-right:0.5em;
	padding-right:0.5em;
	border-right:1px solid #ddd;
	width:calc(100% - 10em - 1em - 1px);
}

main #slipList .campaign span:nth-child(2){
	width:10em;
}

main #slipList .campaign li:last-child {
	border-bottom:1px solid #ddd;	
}


@media screen and (min-width: 768px) {
	main #slipList .columns li {
		flex-wrap:nowrap;
		font-size:0.9em;
	}
	main #slipList .columns span:nth-child(2){
		width:calc(100% - 30em);
		margin-right:0.5em;
	}
	main #slipList .columns span:nth-child(3){
		width:5.5em;
	}
	main #slipList .columns span:nth-child(4){
		width:4.5em;
	}
	main #slipList .columns span:nth-child(5){
		width:6em;
	}	
	main #slipList .columns span:nth-child(6){
		width:7em;
	}
}

main #slipList .add_item{
	font-size:0.9em;
}

main #slipList .add_item select{
	position: relative;
	border-radius:4px 0 0 4px;
	width:13em;
	float:left;
}
main #slipList .add_item input{
	position: relative;
	border-radius:0 4px 4px 0;
	height:2.2em;
	top: 4px;
    padding-top: 5px;
}

main #slipList .add_division,
main #slipList .finish_stat,
main #slipList .finish_date{
	display:flex;	
}
main #slipList .add_division label,
main #slipList .finish_stat label,
main #slipList .finish_date label{
	
	display:inline-flex;
	margin-right:1em;
}

@media screen and (min-width: 768px) {
	main #slipList .add_division label,
	main #slipList .finish_stat label,
	main #slipList .finish_date label{
		margin-right:0.5em;
	}	
	main #slipList .add_division,
	main #slipList .finish_stat,
	main #slipList .finish_date {
		float:left;
		margin-right:1em;
	}
}

@media screen and (min-width: 1024px) {
	main #slipList .add_division label,
	main #slipList .finish_stat label,
	main #slipList .finish_date label{
		margin-right:1em;
	}	
}


main #dialog,
main #dialog_print{
	display:none;
}

.user_menu li.divider {
    margin: 0.66em 0;
    border-top: 0.5px solid black;
}
.user_menu a {
    text-decoration: none;
}