/* */
.red{
	color:#F00;
	font-weight:bold;
	font-size:90%;
	white-space:normal;
}
.garland{
	text-align:center;
	background-color:<?=$main_color2?>;
	color:#AFF;
	font-size:2em;
	line-height:1.4;
	background-image:url('../img/garland.png');
	background-repeat:repeat-x;
	background-position:top;
	background-size:contain;
	text-shadow    : 
	2px  2px 1px #003366,
	-2px  2px 1px #003366,
	2px -2px 1px #003366,
	-2px -2px 1px #003366,
	2px  0px 1px #003366,
	0px  2px 1px #003366,
	-2px  0px 1px #003366,
	0px -2px 1px #003366;        /* 文字の影 */
}
p{
	padding:1ex 1em;
	line-height:1.4em;
	letter-spacing:0.2ex;
	margin:0;
}
input[type=button],button{
	font-size:120%;
	padding:0.2em 1em;
}

*{
	font-family:'MSPゴシック';
	box-sizing:border-box;
}
h1{
	text-align:center;
	background-color:#FA4;
	border-radius:40px;
	transform: scale(0.9, 1);
	font-size:2em;
	margin:10px 0 0 0;
	padding:4px;

	background-image:url('../img/image.png');
	background-repeat:no-repeat;
	background-position-x:right;
}
h2{
	margin-top:2em;
	margin-bottom:1ex;
	background:#FC6;
	padding:0.5ex 1ex 0.5ex 0.5ex;
}
h2.film{
	border-bottom: dotted darkorange 0.2em;
	position:relative;
	margin-top:3em;
	margin-bottom:1em;

	font-size:1.2em;
}
h2.film > *{
	background-color:white;
	padding:0.2em 1em;
	display:inline-block;
	border-top:solid 0.4em black;
	border-bottom:solid 0.4em black;

	outline:white 0.15em dashed;
	outline-offset: -0.35em;
	margin-left:0.8em;

	box-shadow: 0.4em 0 0.4em rgba(0,0,0,0.4);
}
h2.film:after{
	content:"";
	background-image:url('../img/film.png');
	background-size:contain;
	background-repeat:no-repeat;
	width:1.6em;
	height:3.2em;
	display:inline-block;
	
	position:absolute;
	left:0;
	top:-0.3em;
}
body{
	width:100%;
	max-width:720px;
	background:white;
	margin:0;
}
.h{
	background-color:orange;
	display:inline-block;
	border-radius:1ex;
	padding:0.5ex 2ex;
	margin-left:-1ex;
	font-weight:bold;
	margin-top:1ex;
}
table{
	font-size:14px;
	border-collapse:collapse;
	border-width:1px;
	border-collapse:collapse;
	border-spacing:0;
	margin:0 0 10px 10px;
	border-collapse:separate;
}
thead{
	position:sticky;
	top:0;
	left:0;
}
th,td{
	border:solid 2px white;
}
th{
	text-align:center;
	vertical-align:middle;
	padding:4px 8px;
	white-space:nowrap;
	background-color:#FD8;
}
th[colspan]{
	padding:2px 8px;
	/*
	border-top-left-radius:2ex;
	border-top-right-radius:2ex;
	*/
}
td{
	white-space:inherit;
	background-color:white;
}
.large{ font-size:150%; }
.wait{
	background:rgba(0,0,0,0.2);
	position:fixed;
	top:0;left:0;
	width:100%;
	height:100%;
	z-index:10;
	display:none;
}
.wait::after{
	content:"処理中です。";
	background-color:cyan;
	position:fixed;
	top:0; bottom:0; left:0; right:0;
	width:10em;
	height:1em;
	padding:1em;
	text-align:center;
	margin:auto;
}


body > div.all,
body > div.wrap{
	max-width:600px;
	background:#D0DAFF;
	margin:auto;
	display:flex;
	flex-direction:column;
}
.systemheader{
	display:flex;
	justify-content: space-between;
	background-color:skyblue;
}
.menu-button{
	display:inline-block;
	width:16em;
	background-color:blue;
	color:white;
	border-radius:4px;
	padding:0.8ex;
	font-weight:bold;
	cursor:pointer;
	font-size:140%;
	text-align:center;
	margin:4px;
}
.menu-button:hover{
	background-color:brown;
}
.detail td,
.detail th{ border: solid 1px lightgray; }
.detail table tr:first-child > th{
	background-color:RoyalBlue;
	color:white;
}
table.detail tbody tr:nth-child(even){
	background-color:mistyrose;
}
table.detail tbody tr:nth-child(odd){
	background-color:lavender;
}

.center{ text-align:center; }
.hr{
	background:RoyalBlue;
	color:white;
	margin:0;
	padding:4px;
}
div.wrap{
	display:inline-block;
}

*{
	box-sizing:border-box;
}
h2 > span{ font-size:100%; }
h3{
	margin:4px 0px 0px 0px;
}

div,li{
	line-height:1.4em;
	letter-spacing:0.2ex;
}
span.under{
	border-bottom:dashed 1px black;
}
label{
	margin:1px 10px;
	white-space:nowrap;
	background-color:OldLace;
	padding:4px;
	cursor:pointer;
	position:relative;
}
label input:checked + span{
	background:lightgreen;
}
label span{
	z-index:2;
}

.tag { background-color:forestgreen; padding:1px 3px; white-space:nowrap; color:white; font-weight:bold; }
.tab{
	border-bottom:inset blue 2px;
}
.tab > label{
/*
	border-top-left-radius:10px;
	border-top-right-radius:10px;
*/
	border-radius:10px;
	overflow:hidden;
}
.tab span{
	margin:2px;
	padding:2px;
	display:inline-block;
}
.tab input[type=radio]:checked + span{
	color:white;
	font-weight:bold;
	background:darkorange;
}
.nendo_getu > span{
	white-space:nowrap;
	font-size:0;
	background:red;
}
#susername{
	float:right;
	font-size:12px;
	font-weight:normal;
	margin-top:8px;
}
.menu_div{
	margin-bottom:20px;
}
.menu_div div{
	font-weight:bold;
	vertical-align:middle;
	border-right:outset 2px lightgray;
	border-bottom:outset 2px lightgray;
	border-top:outset 0.2px white;
	border-left:outset 0.2px white;
	padding:6px 0 6px 0;
	background:#ffb;
}
.fkey_btn,.fkey_no{
	text-align:center;
	border:solid 1px #bbeeff;
}
.fkey_btn{
	width:80px;
	height:30px;
	font-size:13px;
}
.fkey_btn div{
	cursor:pointer;
}
.fkey_no{
	background:gray;
	color:white;
	height:10px;
	font-size:10px;
}

input[maxlength='2']{
	width:30px;
}

#pop_yubin,#pop_calendar,#pop_systemfilter{
	z-index:20;
}

.popup,.pop-frame{
	display:none;
	background:rgba(150,150,150,0.6);
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:10;
}
.popup > div,
.pop-frame > div{
	background:#eff;
	position:absolute;
	top:10px;
	bottom:10px;
	left:10px;
	right:10px;
	margin:auto;
	border:inset lightgray 2px; 
	z-index:11;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
}
.popup > div > div,
.pop-frame > div > div{
	overflow-y:scroll;
	height:100%;
	padding:10px;
}
.popup > div > .footer,
.pop-frame > div > .footer{
	height:50px;
	overflow:hidden;
	padding:0;
}
div.footer{
/*	margin-top:1em;*/
/*	box-shadow: 0px -4px 8px rgba(0,0,0,0.4);*/
	border-top:1px gray solid;
	text-align:center;
	background:gray;
	z-index:2;
}


table.fix td{
	white-space:normal;
}

/*
	スクロールディブ
		ヘッダテーブル
		ボディディブ
			ボディテーブル
*/
div.scroll-block{
	width:100%;
	max-width:440px;
	margin:auto;
}
div.scroll-block tbody tr:nth-child(odd){ background:#DDEEFF; }
div.scroll-block tbody tr:nth-child(even){  }
.scroll-block > table{
	table-layout:auto;
	width:100%;
	margin:0;
}
.scroll-block > div{
	overflow-x:hidden;
	border-bottom:solid 1px #bde;
	border-left:solid 1px #bde;
	display:inline-block;
	width:460px;
}
.scroll-block > div > table{
	table-layout:auto;
	width:100%;
}
.scroll-block > div > table:empty:before{
	content:"行なし";
}

.scroll-block td{
	white-space:normal;
	word-wrap:break-word;
}
.dmy td,
.dmy{
	border:none;
	border-width:0;
}
input[type=button].large{
	padding:0.5em 1em;
	font-size:1.2em;
	font-weight:bold;
	width:auto;
}
input[type=button]{ min-width:40px; min-height:30px; cursor:pointer; }

.selected_btn{
	background:lightgreen;
}
.selfuri_table1,.selfuri_table2{
	border-collapse:collapse;
	border-spacing:0;
}
.selfuri_table1 input{
	margin:0;
	padding:0;
	width:25px;
	height:20px;
}
.selfuri_table2 input{
	margin:0;
	padding:0;
	width:30px;
	height:20px;
}
.selfuri_table1 td,.selfuri_table2 td{
	background:gray;
	margin:0;
	padding:0;
	border:none;
}

.pankuzu{
	margin:10px 0 10px 0;
	border:none;
}
.pankuzu SPAN{
	font-weight:bold;
	font-size:13px;
}
.number{ text-align:right; }
input[type='text'], textarea{
	ime-mode:active;
}
input[type='number']{
	ime-mode:inactive;
	text-align:right;
}
input[type='number']:foucs{
	background:red;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
input[type='number']:focus,input[type='text']:focus,input[type='tel']:focus,textarea:focus,select:focus{
	background:#afa;
}
input[readonly], .disabled{
	background:yellow;
	pointer-events:none;
}
input[type='checkbox']{
	height:1em;
}
div.meisai{
	height:auto;
	overflow-y:hidden;
	max-width:96%;
	min-width:80%;
	display:inline-block;
	margin:4px 8px;
	padding:8px;
	background-color:white;
	border-radius:10px;
	border:solid 1px lightgray;
	box-shadow: 4px 4px 4px rgba(0,0,0,0.4);
}
div.meisai-narrow{
	height:auto;
	max-width:96%;
	background-color:lightsteelblue;
	border:inset 2px lightsteelblue;
	margin:auto;
	overflow-y:hidden;
	margin-top:4px;
	margin-bottom:4px;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
	border-radius:6px;
}
.tab_table{
	width:100%;
	border-collapse:collapse;
}
.tab_table td{
	padding:10px;
	background:yellow;
	font-weight:bold;
	cursor:pointer;
	text-align:center;
	border:outset 1px black;
}
.tab_table .selected{
	background:orange;
	cursor:default;
}

.money{ text-align:right; }

*{
	/*line-height:1;*/
}

div > select:only-child,
div > input:only-child,
td > select:only-child,
td > input:only-child{ width:100%; }
.guide{
	color:red;
	font-size:11px;
}

.toast{
	width:400px;
	height:40px;
	font-size:16px;
	position: fixed;
	left:0; right:0; top:0; bottom:0;
	text-align:center;
	margin:auto;
	z-index:1000;
	display:table-cell;
	vertical-align:middle;
	background:rgba(0, 0, 0, 0.6);
	color:white;
	padding: 8px 15px;
	border-radius: 15px;
	border: none;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.toast > p{
	height:30px;
	margin:0;
	padding:0;
}
.yubin{ width:80px; }
h2 > input[type=button]{
	vertical-align:middle;
	margin:auto 10px;
}
.del{ color:red; }
.add{ color:green; }

.flex-fill{
	display:flex;
	display:-ms-flexbox;
	justify-content:space-between;
	width:100%;
}
.flex-fill > *{ width:100%; }
.flex-wrap{
	display:flex;
	flex-wrap:wrap;
	width:100%;
}
.flex-v{
	display:flex;
	flex-direction:column;
}
.flex-w{
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.flex-between{ display:flex; justify-content:space-between; }
/* スマホ対応 */
input[type='button']:not(.large),button{
	max-height:none;
	-webkit-appearance: none;
	background:lightgray;
}
select,input[type=date]{
	height:30px;
}
@media screen and (min-device-width: 200px) and (max-device-width: 600px){
	*{ font-size:16px; }
	ul{ padding:1em; }
	.guide,.debug{ display:none; }
	div.wrap,
	table.fix,
	.scroll-block div,
	.scroll-block table{
		width:100%;
	}
	
	.popup, .popup > div,
	.pop-frame, .pop-frame > div{
		width:100% !important;
/*		height:100% !important;*/
		height:100%;
		left:0;
		padding:0;
	}
	.popup > div > div,
	.pop-frame > div > div{
		padding:0;
	}
	.footer{ height:50px; }
	html,body,body > div.wrap,div.all{
		width:100%;
		height:100%;
		overflow-y:auto;
	}
	div.all{
		overflow:scroll;
		height:100%;
	}
	.pc{ display:none; }
	.table{ margin:0; }
}
@media screen and (min-device-width: 601px){
	.sma{ display:none; }
}