@charset "UTF-8";
/* default */

/*	reset
------------------------------------------------------------ */ 
@import url("reset.css");

/*	elements
------------------------------------------------------------ */ 
@import url("elements.css");

/*	form
------------------------------------------------------------ */ 
@import url("form.css");

/*	font
------------------------------------------------------------ */ 
@font-face {
  font-family: "NotoSansJP";
  src: url("../fonts/NotoSansJP-Regular.ttf") format("truetype");
}

/* links
------------------------------------------------------------ */
a:link { text-decoration: underline; color: #fff; }
a:visited { text-decoration: underline; color: #fff;}
a:hover { text-decoration: underline;color: #fff;}
a:active { text-decoration: underline; color: #fff;}

/* body
------------------------------------------------------------ */
body {
	background: #fff;
	font-size:12px;
	line-height: 1.6;
	color:#000;
	font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Segoe UI",
		 "NotoSansJP",
    sans-serif;
}

/* header
------------------------------------------------------------ */
header { width: 90%; padding: 10px; box-sizing: border-box; margin: 0 auto; display: flex; justify-content: space-between;}
header h1 { width: 160px; height: 60px;}
header h1 img { width: 100%; height: auto;}
header #status ul { display: flex; align-items: center;}
header #status ul li {display: flex;
	align-items: center;}
header #status ul li:first-child::after {
	content: "|";
	margin: 0 10px;
}
header #status ul li:nth-child(2) {
	margin-right: 30px;
}
header #status ul li a {display: inline-block; border-radius: 10px; background: #666; color: #fff; padding: 6px 16px; text-decoration: none; font-size: .9em;}

/* login
------------------------------------------------------------ */
#login { width: 600px; margin: 0 auto; padding: 40px; box-sizing: border-box;  background: #666; border-radius: 20px; color: #fff;}
#login h3 { font-size: 2em; font-family: "Cormorant Garamond", serif; margin-bottom: 20px;}

/* section
------------------------------------------------------------ */
section { width: 90%; margin: 0 auto;}
section.order_complate {border: 1px solid #dae0e7; padding: 40px; box-sizing: border-box;}

/* section tab
------------------------------------------------------------ */
.section_tab{
	width: 90%;
	display:flex;
	justify-content:flex-end; /* 右寄せ */
	margin:0 auto 0;
	border-bottom: 1px solid #fff;
	position: relative;
}
.left_item {
	position: absolute;
	left: 10px;
	top: 50%;
	transform:translateY(-50%);
}

/* タブ横並び */
.section_tab ul{
	display:flex;
	list-style:none;
	padding:0;
	margin:0;
}

/* タブ共通 */
.section_tab li a{
	display:block;
	padding:10px 26px;
	background:#f0f2f4;
	color:#333;
	text-decoration:none;
	border-radius:12px 12px 0 0;
	font-weight:500;
}

/* 選択中タブ */
.section_tab li a.active{
	background:#dae0e7;
}

/* クライアント追加ボタン */
a.add_circle{
	padding: 2px 12px;
	border-radius:10px;
	background:#222;
	color:#fff;
	text-decoration:none;
	position: absolute;
	left: 18px;
	top: 50%;
	transform:translateY(-50%);
}

/* status btn
------------------------------------------------------------ */
ul.status_btn{
	display: flex;
	justify-content: center;
	align-items: center;
}

ul.status_btn li{	display: flex;	margin-right: 10px;}
ul.status_btn li:last-child{	margin-right: 0;}

a.invoice,
a.delivery{
	display:inline-block;
	padding:6px 14px;
	font-size:13px;
	text-decoration:none;
	border-radius:20px;
	border:1px solid #d4d8dd;
	background:#fff;
	color:#555;
	transition:all .15s ease;
}

/* hover */
a.invoice:hover,
a.delivery:hover{
	background:#eef1f5;
	border-color:#c4c9cf;
}

/* active */
a.invoice:active,
a.delivery:active{
	transform:translateY(1px);
}


/* 編集・削除ボタン
------------------------------------------------------------ */
ul.edit_delete {
	display: flex;
	justify-content: center;
	align-items: center;
}
ul.edit_delete li { display: flex;	margin-right: 8px;}
ul.edit_delete li:last-child {margin-right: 0;}

ul.edit_delete li a { display: block; width: 40px; height: 40px; border-radius: 50%; background: #fff; border:1px solid #d4d8dd;}
ul.edit_delete li a img { width: 40px; height: 40px;}


/* クライアント　モーダルウィンドウ
------------------------------------------------------------ */
#client_popover{
	position:absolute;
	display:none;
	z-index:1000;
}

.client_popover_inner{
	position:relative;

	background:rgba(255,255,255,0.4);
	backdrop-filter:blur(12px);
	-webkit-backdrop-filter:blur(12px);

	border-radius:16px;
	padding: 30px;

	border:1px solid rgba(255,255,255,0.6);

	box-shadow:
	0 10px 20px rgba(0,0,0,0.10),
	0 2px 6px rgba(0,0,0,0.05);
	
}

.client_popover_inner:before{
	content:"";
	position:absolute;

	left:-10px;
	top:20px;

	border-top:6px solid transparent;
	border-bottom:6px solid transparent;
	border-right:10px solid #fff;
}

.client_title{
	font-size:1.1em;
	margin-bottom:10px;
}

.client_popover_close{
	position:absolute;
	right:16px;
	top:14px;
	font-size:12px;
	border:none;
	background:none;
	cursor:pointer;
}


/* modal alert
------------------------------------------------------------ */
.modal{
	position:fixed;
	inset:0;
	display:none;
	align-items:center;
	justify-content:center;
	z-index:2000;
}

.modal_inner{
	background:rgba(255,255,255,0.4);
	backdrop-filter:blur(12px);
	-webkit-backdrop-filter:blur(12px);
	border-radius:18px;
	padding:30px 36px;
	box-shadow:
	0 10px 30px rgba(0,0,0,0.12),
	0 2px 6px rgba(0,0,0,0.06);
	text-align:center;
	width: auto;
	max-width:500px;
	width:90%;
}


/* modal text
------------------------------------------------------------ */
.modal_text{
	font-size:16px;
	margin-bottom:20px;
}


/* modal buttons
------------------------------------------------------------ */
.modal_buttons{
	display:flex;
	gap:14px;
	justify-content:center;
}


/* button
------------------------------------------------------------ */
.modal_btn{
	border:none;
	padding:10px 22px;
	border-radius:10px;
	cursor:pointer;
	font-size:14px;
}

.modal_btn.cancel{
	background:#f3f4f6;
	color:#333;
}

.modal_btn.ok{
	background:#222;
	color:#fff;
}

#confirmModal.cancel-mode .modal_btn.cancel{
	background:#222;
	color:#fff;
}

#confirmModal.cancel-mode .modal_btn.ok{
	background:#e5e5e5;
	color:#333;
}


/* form buttons
------------------------------------------------------------ */
.form_buttons{
	width: 100%;
	margin-top:20px;
	display:flex;
	justify-content:flex-end;
	gap:10px;
}

/* order complate
------------------------------------------------------------ */
section.order_complate {border: 1px solid #dae0e7; padding: 40px; box-sizing: border-box;}
section.order_complate h2 { font-size: 160%; margin-bottom: 20px;}
section.order_complate p { margin-bottom: 40px;}
section.order_complate ul {display: flex; gap:10px;}
section.order_complate ul li a{
	display:inline-block;
	padding:10px 30px;
	border-radius:30px;
	border:1px solid #dcdcdc;
	background:#fff;
	color:#333;
	text-decoration:none;
}
section.order_complate ul li a:hover{
	background:#eef1f5;
}

/* クライアント新規登録のcode部分
------------------------------------------------------------ */
.code_row{
	display:flex;
	align-items:center;
	gap:12px;
}

#codeSelect{
	width:140px;
}

#codeInput{
	width:140px;
	display:none;
}

/* order page Basic option
------------------------------------------------------------ */
tr.led_row td{
	background:#e7f1f7 !important;
}


.delivered { color: #999;}

/* クライアント登録時の名前の並び
------------------------------------------------------------ */
.name-row{
	display:flex;
	gap:10px;
}

.name-row input{
	flex:1;
}