@charset "utf-8";

@import url("normalize.css");
@import url("common.css");

h1, h2, h3, h4, h5, h6, a, p, div, span, em, strong, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, input, select, textarea, button, table, caption, tbody, tfoot, thead, tr, th, td, header, footer, hgroup, figcaption, figure, menu, nav, article, section, aside, details { box-sizing: border-box; }
.container { width: 100%; max-width: 1200px; min-width: 640px; margin: 30px auto; }
.contents { width: 100%; max-width: 1200px; min-width: 640px; margin: 80px auto 20px; }
.contents .inner { width: calc(100% - 20px); margin: 0 auto; }

.after::after { content: "\A"; white-space: pre; }
body { line-height: 1.2; font-size: 1.6rem; }

.bar7 {
	display: block; overflow: hidden; margin: 10px 0 15px 0; clear: both; padding: 10px;
	background-color: #EEF; border-left: 5px solid #66F; border-right: 5px solid #66F; text-align: center;
}

/*------------------------------------------------------------------------------------------------*/
/*　共通メニュー
--------------------------------------------------------------------------------------------------*/
.header {
  position: fixed; top: 0; left: 0;
  height: 60px; width: 100%;
  background: #FFE; border-bottom: 1px solid #CCE; z-index: 1;
}

/* メニュー本体 */
nav {
  margin-bottom: 1rem;
  display: flex; flex-wrap: wrap;
  position: absolute; top: 10px; left: 10px; z-index: 2;
}

/* ボタン */
nav a {
  display: inline-flex;              /* ← これが効く（行高さを固定） */
  align-items: center;               /* 垂直中央 */
  height: 40px;                      /* 高さ固定（ヘッダ60px内に収まる） */
  padding: 0 20px;                   /* 上下0、左右だけ */
  box-sizing: border-box;            /* paddingを高さに含める */
  background: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s;       /* 背景だけトランジション */
  margin: 0 5px;
  font-size: 14px !important;
}

nav a:hover {
  background: #FF0033;               /* 変更は色だけにするのが安定 */
  /* ここで padding / margin / border を再指定しない */
}

/* 印刷ボタンはそのまま */
.print-btn { display: none; }
body.print .print-btn, body.print_view .print-btn {
  display: inline-block;
  position: absolute; top: 10px; right: 10px;
  background: #FF0033; padding: 10px 20px;
  color: white; border: none; cursor: pointer;
  line-height: 18px; border-radius: 4px; z-index: 2;
}

h1, h2 {background: #FEE; padding: 10px 0; text-align: center; font-weight: bold; font-size: 20px; }
.nowrap { white-space: nowrap: }
.space10 { width: 100%; height: 10px; }
a.cancel { color: #FFF; font-weight: bold; font-size: 112.5%; width: auto; max-width: 300px; min-width: 160px; padding: 12px 20px; margin-bottom: 10px; background-color: rgba(255,100,100,1.0); border: 1px solid rgba(255,0,0,1.0); border-radius: 10px; transition: 0.5s; text-decoration: none; }
a.cancel:hover { background-color: #000; border: 1px solid #000; }



/*------------------------------------------------------------------------------------------------*/
/*　DIVテーブル
--------------------------------------------------------------------------------------------------*/
.tbl, .td, .th, .captbl, .captbl div { box-sizing: border-box; }
.tbl { display: flex; flex-wrap: wrap; width: 100%; }
.tbl div { vertical-align: top; padding: 10px; border: 1px solid #CCC; }
.th { width: 30%; min-width: 200px; }
.td { width: 70%; }

.line10 { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #CCC; }

/*------------------------------------------------------------------------------------------------*/
/*　フォーム設定
--------------------------------------------------------------------------------------------------*/
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea { border-radius: 5px; padding: 5px; font-size: 100%; }
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus,  textarea:focus { border: 1px solid #F66; background-color: #FEE; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"] { width: 100%; max-width: calc(100% - 10px); height: 30px; color: #333; background-color: #FFF; border: 1px solid #999; }
input[type="number"] { text-align: right; }
/*--------*/
button[type="submit"] { color: #FFF; font-weight: bold; font-size: 112.5%; width: auto; max-width: 300px; min-width: 160px; padding: 7px; margin-bottom: 10px; background-color: rgba(4,4,4,1.0); border: 1px solid rgba(0,0,0,1.0); border-radius: 10px; transition: 0.5s; }
button[type="submit"]:hover { background-color: #F33; border: 1px solid #C00; color: #FFF; cursor: pointer; transition: 0.5s; }
/*--------*/
button[type="button"] { color: #000; font-size: 100%; width: auto; max-width: 300px; min-width: 160px; background-color: #CCC; border: 1px solid #666; padding: 7px; border-radius: 10px; }
button[type="button"]:hover { color: #CCC; background-color: #666; border: 1px solid #333; cursor: pointer; }
/*--------*/
textarea { width: 100%; max-width: calc(100% - 10px); height: 100px; line-height: 20px; ime-mode: active; background-color: #FFF; border: 1px solid #999; }
/*--------*/

select {
  /* styling */
  background-color: white;
  border: thin solid blue;
  border-radius: 4px;
  display: inline-block;
  font: inherit;
  line-height: 1.5em;
  padding: 0.5em 3.5em 0.5em 1em;

  /* reset */

  margin: 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}

input[list] {
	border: thin solid blue;
	border-radius: 4px;
	padding: 5px;
	font-size:1.6rem;
}
input[list]:focus {
	outline: none;
	box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
	cursor: pointer;
}
/*--------*/

input[type="date"] {
  padding: 5px;
  width: 120px;
  height: 30px;
  border: thin solid blue;
  background: #FFF;
  box-sizing: border-box;
  font-size:1.6rem;
  color: #000;
}



input, select, textarea { font-size: 1.6rem; }
input.num { text-align: right: }
button.w70 { width: 70px; max-width: 90px; min-width: 50px; }
/*------------------------------------------------------------------------------------------------*/
/*　顧客管理:clients.php
--------------------------------------------------------------------------------------------------*/
body.clients, body.clients table th, body.clients table td, body.clients div { line-height: 1.5; font-size: 16px; }


/* 顧客登録 */
body.clients .entry {
	width: 100%; margin: 0 auto;
	display: grid; grid-template-columns: 240px 1fr;
}
@media screen and (max-width: 959px) {
body.clients .entry {
	width: calc(100% - 20px); margin: 0 auto;
	display: grid; grid-template-columns: 240px 1fr;
}
}
body.clients .entry > div {
	border: 1px solid #CCC;
	padding: 10px 5px;
}
body.clients .entry > div:nth-child(odd) {
	background:#eee;
	text-align: center;
}

/* 顧客管理リスト */
body.clients .kanri-tbl {
	width: 100%; margin: 0 auto;
	display: grid; grid-template-columns: 240px 1fr 100px;
}
@media screen and (max-width: 959px) {
body.clients .kanri-tbl {
	width: calc(100% - 20px); margin: 0 auto;
	display: grid; grid-template-columns: 240px 1fr 100px;
}
}
body.clients .kanri-tbl > div {
	border: 1px solid #CCC;
	padding: 10px 5px;
}
body.clients .kanri-tbl > div.head {
	font-weight: bold; text-align: center;
	background: #EEE;
}

.cbtn { display: block; text-align: center; padding: 6px 12px; background: #28a745; color: #fff; text-decoration: none; border-radius: 8px; }
.cbtn:hover { background: #333; color: #fff; }
/*------------------------------------------------------------------------------------------------*/
/*　ダッシュボード:dashboard.php
--------------------------------------------------------------------------------------------------*/

body.dashboard table { width: 100%; border-collapse: collapse; margin-top: 1em; }
body.dashboard th, body.dashboard td { border: 1px solid #999; padding: 12px 6px; font-size: 16px; }
body.dashboard th { background: #eee; text-align: center; font-size: 16px; }

a.btn { padding: 6px 12px; background: #28a745; color: #fff; text-decoration: none; border-radius: 4px; }
a.btn:hover { background: #218838; }
.btn-danger { background: #dc3545; }
.btn-danger:hover { background: #c82333; }

/* 売上一覧 */
.uriage-tbl {
	width: 100%; margin: 0 auto;
	display: grid; grid-template-columns: 120px 1fr 140px 140px;
}
.uriage-tbl > div {
	border: 1px solid #CCC;
	padding: 10px 5px;
	font-size: 16px;
	height: 100px;
	display: table-cell; vertical-align: center;
}
.uriage-tbl > div.head {
	font-weight: bold; text-align: center;
	background: #EEE;
	height: 42px;
	display: table-cell; vertical-align: center;
}
.uriage-tbl > div.foot {
	font-weight: bold;
	background: #EEE;
	height: 42px;
	display: table-cell; vertical-align: center;

}

/*------------------------------------------------------------------------------------------------*/
/*　帳票編集:edit.php＆new.php
--------------------------------------------------------------------------------------------------*/
body.new, body.edit { font-size: 16px !important; }
body.new input, body.new select, body.edit input, body.edit select, body.edit select { font-size: 16px !important; }
body.new select, body.edit select { padding: 5px 12px; }

body.new .new_tbl {
	width: 100%; margin: 0 auto;
	display: grid; grid-template-columns: 240px 1fr;
}
@media screen and (max-width: 959px) {
body.new .new_tbl {
	width: calc(100% - 20px); margin: 0 auto;
	display: grid; grid-template-columns: 240px 1fr;
}
}
body.new .new_tbl > div {
	border: 1px solid #CCC;
	padding: 10px 5px;
}

/* 請求項目｜見出し行 */
body.new .itemtbl {
	width: 100%; margin: 0 auto;
	display: grid; grid-template-columns: 1fr 140px 1fr 100px;
}
@media screen and (max-width: 959px) {
	body.new .itemtbl {
		width: calc(100% - 20px); margin: 0 auto;
		display: grid; grid-template-columns: 1fr 140px 1fr 100px;
	}
}
body.new .itemtbl > div {
	padding: 10px; border: 1px solid #CCC;
	text-align: center; font-weight: 700; background: #EEE;
}


/* 請求項目｜行コンテナ */
#items { width: 100%; margin: 0 auto; }
.itemBox {
	display: grid; grid-template-columns: 1fr 140px 1fr 100px;
	width: 100%; margin: 0 !important;
}
@media screen and (max-width: 959px) {
	.itemBox {
		width: calc(100% - 20px); margin: 0 auto;
		display: grid; grid-template-columns: 1fr 140px 1fr 100px;
	}
}
.itemBox > div {
	padding: 10px; border: 1px solid #CCC;
}
.itemBox > div:nth-child(4) { text-align: center; }

/* 入力もはみ出さないように */
.itemBox input[type="text"],
.itemBox input[type="number"] {
	width: calc(100% - 10px);
	box-sizing: border-box;
}

/* 請求項目｜追加/送信ボタン */
.itemPlus {
	display: grid; grid-template-columns: 40% 15% 30% 15%;
	width: 100%;  margin: 20px auto !important;
}
@media screen and (max-width: 959px) {
	.itemPlus {
		width: calc(100% - 20px); margin: 0 auto;
		display: grid; grid-template-columns: 40% 15% 30% 15%;
	}
}
.itemPlus > div {
	text-align: center;
}



/*------------------------------------------------------------------------------------------------*/
/*　ログイン:login.php＆opt.php
--------------------------------------------------------------------------------------------------*/
body.login div.login-tbl { width: 100%; display: grid;  grid-template-columns: 1fr 1fr; margin-bottom: 30px; }
body.login div.login-tbl > div {
	border: 1px solid #CCC;
	font-weight: bold;
	text-align: center;
	padding: 10px 5px;
	font-size: 87.5%;
}

body.login input[type=text], input[type=password] { width: calc(100% - 10px); padding: 7px; }
body.login button { padding: 10px 20px; background: #007bff; color: #fff; border: none; border-radius: 8px; }
body.login button:hover { background: #0056b3; }
body.login .err { color: red; font-weight: bold; }

/*------------------------------------------------------------------------------------------------*/
/*　印刷ページ:print_view.php＆print_dashboard.php＆print_dashboard_year.php
--------------------------------------------------------------------------------------------------*/

body.print, body.print div, body.print p, body.print th, body.print td, body.print input, body.print select {  }
body.print_view, body.print_view div, body.print_view p, body.print_view th, body.print_view td, body.print_view input, body.print_view select { line-height: 1.5; }

body.print table { width:100%; border-collapse:collapse; margin-top:1em; }
body.print table th, body.print table td { border:1px solid #999; padding:8px; height: 60px; vertical-align: middle; font-size: 16px; }
body.print table th { background:#eee; text-align: center; font-weight: 700; height: 30px; }
body.print table .waku15 { width: 15%; white-space: nowrap; }
body.print table .waku20 { width: 20%; white-space: nowrap; }
body.print table .waku25 { width: 25%; white-space: nowrap; }
body.print table .waku30 { width: 30%; white-space: nowrap; }
body.print table .waku45 { width: 45%; white-space: nowrap; }

body.print_dashboard table { width:100%; border-collapse:collapse; margin-top:1em; }
body.print_dashboard table th, body.print_dashboard table td { border:1px solid #999; padding:8px; height: 60px; vertical-align: middle; font-size: 16px; }
body.print_dashboard table th { background:#eee; text-align: center; font-weight: 700; height: 30px; }
body.print_dashboard select, body.print_dashboard button, body.print_dashboard input { font-size: 16px; }
body.print_dashboard select { padding: 5px 12px !important; }


body.print_view { font-family: sans-serif; margin: 0; padding: 0; }
body.print_view .print-container { width: 100%; max-width: 960px; min-width: 640px; height: auto; margin: 0 auto; padding: 10mm; box-sizing: border-box; background: white; border: 1px solid #CCC; }

#s1 option:first-child { background:red; color:#fff; }

body.print_view h1, body.print_view h2, body.print_view p { margin: 0 0 10px; }
body.print_view table { width: 100%; font-size: 100%; border-collapse: collapse; margin-top: 10px; }
body.print_view th, body.print_view td { border: 1px solid #000; padding: 6px; font-size: 100%; }
.right { text-align: right; }
.red { color: red; font-weight: bold; }
.stamp { width: 60px; height: 60px; }
body.print_view .print-header { height: auto; font-size: 16px; padding: 50px 0; border-bottom: 1px dotted #CCC; }
body.print_view .print-header .comment { position: absolute; top: 350px; width: 888px; }
body.print_view .print-header .comment_title { display: block; width: 200px; }
body.print_view .print-footer { height: auto; padding-top: 60px; position: relative; font-size: 16px !important;}
body.print_view .print-footer img.hanko { position: absolute; right: -10px; top: 150px; width: 100px; height: 100px; }
body.print_view .print-footer .meisai { position: absolute; top: 260px; width: 100%; }

.mbtm3 { margin-bottom: 3px !important; }
.mbtm10 { margin-bottom: 10px !important; }
.mbtm15 { margin-bottom: 15px !important; }
.mbtm20 { margin-bottom: 20px !important; }
.mbtm30 { margin-bottom: 30px !important; }
.mbtm40 { margin-bottom: 40px !important; }
.mbtm50 { margin-bottom: 50px !important; }
.mbtm70 { margin-bottom: 70px !important; }
.mbtm100 { margin-bottom: 100px !important; }
/*------------------------------------------------------------------------------------------------*/
/*　印刷設定
--------------------------------------------------------------------------------------------------*/
.app-view { display: none; }
.view { display: none; }
.enter { display: block; min-width: 200px; padding: 10px 20px; color: #FF0; text-align: center; font-weight: bold; background: rgba(0,0,0,0.7); position: fixed; left: 0; bottom: 0; font-size: 16px; }

body.dashboard .app-view { display: inline-block !important; margin-right: 10px; }
body.dashboard .app-view.unpaid { color: red; font-weight: bold; }

.siharai { display: flex; flex-wrap: nowrap; width: 100%; }
.siharai > div { width: calc(100% / 2); box-sizing: border-box; padding: 0; font-size: 100%; }
.siharai > div:nth-child(1) { text-align: left; }
.siharai > div:nth-child(2) { text-align: right; }

@media print {
	body, table, th, td, span, div, p { font-size: 100%; }
	.header, .print-header .comment_title button, select, nav, .print-btn, .close-btn, .print_none { display: none !important; }
	h1, h2 { background: #FFF; padding: 0; }
	.contents { width: 100%; margin: 0 auto; }
	.print-header { height: 50%; background: #FFF; font-size: 100%; border-bottom: 1px dotted #CCC; }
	.print-header textarea { width: 860px; min-height: 100px; border: none; font-size: 100%; }
	.print-footer { height: 50%; position: relative; font-size: 100%;}
	input[type="text"] { border: 1px solid #FFF; height: 20px; padding: 0px; width: calc(100% - 10p); }

	input, select, button { display: none !important; }
	.app-view { display: inline !important; margin: 0; }
	.before { display: inline; }
	th.view { display: block; background: #EEE; }

	.mbtm3 { margin-bottom:2mm !important; }
	.mbtm15 { margin-bottom:7mm !important; }
	.mbtm30 { margin-bottom: 30px !important; }
	.mbtm100 { margin-bottom:30mm !important; }


	body.print_view .print-container { /*width: 210mm; min-height: 297mm;*/ width: 964px; height: 1364px; min-height: 100%; margin: 0 auto; padding: 10mm; box-sizing: border-box; background: white;  border: none; }
	body.print_view .print-header { height: 50%; background: #FFF; border-bottom: 1px dotted #CCC; padding: 0; font-size: 100%; }
	body.print_view .print-header textarea { width: cals(100% - 10px); min-height: 100px; border: none; font-size: 100%; }
	body.print_view .print-header .comment_title { display: none; }
	body.print_view .print-footer { height: 50%; position: relative; padding-top: 60px; font-size: 100%; }
}







/*------------------------------------------------------------------------------------------------*/
/*　画面幅640px未満　スマホ用
--------------------------------------------------------------------------------------------------*/
.sp { display: none; }
.pc { display: inline; }
@media screen and (max-width: 767px) {
	.sp { display: inline; }
	.tb { display: none; }
	.pc { display: none; }
	a.btn { margin: 3px; white-space: nowrap; }
	body.clients table th, body.clients table td { padding: 5px; font-size: 12px; }

	body.new .tbl, body.edit .tbl { width: 630px; display: flex; flex-wrap: wrap; }
	body.new .tbl div, body.edit .tbl div { vertical-align: top; padding: 10px; border: 1px solid #CCC; }
	body.new .th, body.edit .th { width: 30%; min-width: 100px; }
	body.new .td, body.edit .td { width: 70%; }

}