@charset "utf-8";


html, body {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	}

body {
	margin: 0;
	padding: 0;

	min-width: 980px;
	/*min-height: 670px; */

	color:#333;
	font: 9pt/1.2 "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック",sans-serif;
	/*
	-ms-touch-action: none;
	touch-action: none;
	*/
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	-webkit-touch-callout: none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	tap-highlight-color: rgba(0, 0, 0, 0);

	overflow: auto;
	}

button { line-height: 1; color:black; }

body > section {
	position: absolute;
	box-sizing: border-box;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-width: 980px;
	/*min-height: 670px;*/
	transition: all 0.3s ease-out;
	background-color: white;
	}
body > section.out {
	top: -110%;
	min-height: 0px;
	transition: all 0.3s ease-out 0.2s;
	}

#instruction {
	background-color: transparent;
	overflow: hidden;
	}

#sim.out {
	top: inherit;
	}

#sim.out::after {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	content: "";
	background-color: rgba( 0, 0, 0, 0.2 );
	}

body > section:nth-of-type(1) { z-index: 90; }
body > section:nth-of-type(2) { z-index: 80; }
body > section:nth-of-type(3) { z-index: 70; }
body > section:nth-of-type(4) { z-index: 60; }

.topbar {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	/*justify-content: space-between;*/
	justify-content: space-around;
	position: absolute;
	box-sizing: border-box;
	top: 0;
	left: 0;
	width: 100%;
	/*height: auto;*/
	height: 44px;
	padding: 8px 16px 8px 270px;
	/*text-align: right;*/
	border-bottom: 1px solid #ccc;
	/*background: linear-gradient(#005bac 64%, #00427d);*/
	background: linear-gradient(#ff8600 80%, #ed7f00);
	}
.topbar::after {
	display: block;
	position: absolute;
	top: 8px;
	left: 16px;
	width: 244px;
	height: 27px;
	content: "";
	background: transparent url(img/header_logo.png) no-repeat 0 0;
	}
.topbar button {
	flex-grow: 0;
	}
.topbar span {
	display: inline-block;
	flex-grow: 3;
	text-align: left;
	}

/* ============================================================ */
/* ! ------------ landing									*/
/* ============================================================ */


body > section div.center {
	display: flex;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;

	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	}

div.center > button {
	width: 200px;
	height: 100px;
	margin: 0.6em 0.6em;
	cursor: pointer;
	font-size: 32px;
	color: #aaa;
	background-color: white;
	border: 4px solid #aaa;
	border-radius: 12px;

	white-space: nowrap;
	}
div.center > button:hover,
div.center > button:active {
	color: black;
	border-color: black;
	}

#landing.agree button {
	display: none;
	}
#landing button.contain {
	display: none;
	visibility: hidden;
	width: auto;
	height: 60px;
	height: auto;
	margin: 0 34%;
	padding: 0.3em 0.5em;
	}
#landing.contain button.contain {
	display: inherit;
	visibility: visible;
	}

#landing h2 {
	width: 100%;
	margin: 0 0 2em;
	line-height: 1.4;
	text-align: center;
	font-size: 18pt;
	color: #999;
	}
#landing h2 small {
	font-size: 10pt;
	}
#landing .back {
	position: relative;
	width: 100%;
	height: 100%;
	white-space: nowrap;
	overflow: hidden;
	}
#landing .back span {
	display: inline-block;
	position: relative;
	width: 16.666%;
	height: 100%;
	background-color: #ddd;
	background-position: center center;
	background-size: 100%;
	opacity: 0.1;
	}
#landing footer {
	position: relative;
	width: 100%;
	bottom: 2em;
	}
#landing footer p {
	margin: 0;
	text-align: center;
	}

#landing .back span.p1 { background-image: url(img_panel/107.png); }
#landing .back span.p2 { background-image: url(img_panel/123.png); }
#landing .back span.p3 { background-image: url(img_panel/001.png); }
#landing .back span.p4 { background-image: url(img_panel/161.png); }
#landing .back span.p5 { background-image: url(img_panel/804.png); }
#landing .back span.p6 { background-image: url(img_panel/NAA.png); }

div.frameWrap {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.2);
	z-index: 99;
	}
iframe.agreement {
	/*display: none;*/
	display: block;
	position: absolute;
	box-sizing: border-box;
	width: 70%;
	height: 70%;
	max-width: 1024px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	/*padding: 4em 2em 5em;*/
	border: none;
	box-shadow: 2px 2px 20px #666;
	z-index: 100;
	}

#landing .agreement {
	display: none;
	position: absolute;
	box-sizing: border-box;
	width: 70%;
	height: 70%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	padding: 4em 2em 5em;
	background-color: white;
	box-shadow: 2px 2px 20px #666;
	}
#landing.show .agreement { display: block; }
#landing .agreement h1 {
	position: absolute;
	top: 0em;
	}
#landing .agreement > div {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 0 1em;
	overflow-x: hidden;
	overflow-y: scroll;
	border: 1px solid #ccc;
	}
#landing .agreement ol {
	counter-reset: item;
	list-style-type: none;
	padding-left: 0;
	}
#landing .agreement ol li {
	padding-left: 1.3em;
	text-indent: -1.3em;
	counter-increment: item;
	}
#landing .agreement div > ol > li {
	margin: 1em 0;
	}
#landing .agreement ol li p {
	margin: 0;
	/*
	padding-left: 2.5em;
	text-indent: 1em;
	*/
	padding-left: 1em;
	text-indent: 0em;
	}
#landing .agreement a { color: #005cab; text-decoration: none; }
#landing .agreement a:hover { text-decoration: underline; }
#landing .agreement ol li::before{ padding-right: .5em;}
#landing .agreement ol       li::before{ content: '第'counter(item)'条'; }
#landing .agreement ol ol { padding-left: 1em; }
#landing .agreement ol ol    li::before{ content: counter(item)'.'; }
#landing .agreement ol ol ol li::before{ content: '('counter(item)')'; }
#landing .agreement div > p { text-align: right; }
#landing .agreement > p {
	text-align: center;
	}

#progress {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: white;
	/*transition: all 1s ease-out 3s;*/
	opacity: 0.9;
	z-index: 110;
	}

#progress > div {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	width: 5em;
	height: 5em;
	font-size: 16px;
	text-align: center;
	}
.spinner {
	display: block;
	margin: 20px auto;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: #a8c6fe;
	background: -moz-linear-gradient(left, #a8c6fe 10%, rgba(168,198,254, 0) 42%);
	background: -webkit-linear-gradient(left, #a8c6fe 10%, rgba(168,198,254, 0) 42%);
	background: -o-linear-gradient(left, #a8c6fe 10%, rgba(168,198,254, 0) 42%);
	background: -ms-linear-gradient(left, #a8c6fe 10%, rgba(168,198,254, 0) 42%);
	background: linear-gradient(to right, #a8c6fe 10%, rgba(168,198,254, 0) 42%);
	position: relative;
	-webkit-animation: aKey 1.4s infinite linear;
	animation: aKey 1.4s infinite linear;
	/*
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	*/
	}
.spinner:before {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 50%;
	content: '';
	background: #a8c6fe;
	border-radius: 100% 0 0 0;
	}
.spinner:after {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	width: 65%;
	height: 65%;
	content: '';
	background: white;
	border-radius: 50%;
	}
@-webkit-keyframes aKey {
	  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
	}
@keyframes aKey {
	  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
	}

body.wait #progress { opacity: 0.9; }
body.ready #progress {
	-webkit-animation: bKey 0.3s linear;
	animation: bKey 0.3s linear;
	}
@-webkit-keyframes bKey {
	  0% { opacity: 0.9; }
	100% { opacity: 0; }
	}
@keyframes bKey {
	  0% { opacity: 0.9; }
	100% { opacity: 0; }
	}

/* ============================================================ */
/* ! ------------ sim										*/
/* ============================================================ */

button:disabled { pointer-events: none; }

button.def {
	width: auto;
	min-width: 100px;
	height: auto;
	margin: 0;
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	white-space: nowrap;
	font-size: 12pt;
	color: #aaa;
	background-color: white;
	border: 2px solid #aaa;
	border-radius: 6px;
	}
.blink button.def { font-size: 10.8pt; }

button.def:hover,
button.def:active {
	color: black;
	border-color: black;
	}
button.def:disabled {
	color: #eee;
	border-color: #eee;
	}

.topbar button.def {
	padding: 0px 4px;
	color: #eee;
	background-color: transparent;
	border: 2px solid #eee;
	border-radius: 6px;
	}
.webkit .topbar button.def { padding-bottom: 2px; }
.topbar button.def:hover,
.topbar button.def:active {
	color: white;
	background-color: rgba(255, 255, 255, 0.1);
	border-color: white;
	}
.topbar button.def:disabled {
	opacity: 0.4;
	}

#sim .topbar button.def::before {
	display: inline-block;
	position: static;
	content: attr(data-to);
	}

button.closer,
button.plus,
button.minus,
button.edit {
	position: absolute;
	top:20px;
	right:20px;
	/*
	width:24px;
	height:24px;
	*/
	width:30px;
	height:30px;
	background-color: white;
	border: 1px solid #aaa;
	border-radius: 20%;
	}
button.closer:hover,
button.plus:hover,
button.minus:hover,
button.edit:hover { border-color: #666; }

button.closer::before, button.closer::after,
button.plus::before, button.plus::after,
button.minus::before, button.minus::after {
	content:"";
	position:absolute;
	display:inline-block;
	border: 0;
	margin: 0;
	padding: 0;
	background-color:#aaa;
}

button.closer:hover::before, button.closer:hover::after,
button.plus:hover::before, button.plus:hover::after,
button.minus:hover::before, button.minus:hover::after {
	background-color: #666;
}

button.closer::before, button.closer::after {
	top: 8%;
	left: 45%;
	width: 12%;
	height: 84%;
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
}
button.closer::after{
	-moz-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
}

button.plus::before, button.plus::after {
	top: 8%;
	left: 45%;
	width: 12%;
	height: 84%;
}
button.plus::after{
	-moz-transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
	transform:rotate(90deg);
}

button.minus:hover { background-color: #f43232; }
button.minus::before {
	top: 43%;
	left: 8%;
	width: 84%;
	height: 14%;
}
button.minus:hover::before { background-color: white; }

button.edit {
	color: #999;
	/* font-size: 4px; */
	font-size: 6px;
	}
button.edit:hover, button.edit:active { color:#fff; background-color: grey; }
button.edit i {
	display: block;
	position: absolute;
	/*
	top: 2.2em;
	left: 1.2em;
	*/
	top: 2em;
	left: 0.7em;
	width: 3em;
	height: 1em;
	background-color: currentColor;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	}
button.edit i::before, button.edit i::after {
	position: absolute;
	content: "";
	}
button.edit i::after {
	left: 105%;
	top: 0px;
	width: 1em;
	height: 100%;
	content: '';
	background-color: currentColor;
	border-radius: 0 0.4em 0.4em 0;
	}
button.edit i::before {
	left: -1.0em;
	top: 0px;
	width: 0px;
	height: 0px;
	content: '';
	border-top: solid 0.5em transparent;
	border-left: solid 0em transparent;
	border-right: solid 1em currentColor;
	border-bottom: solid 0.5em transparent;
	}


#status {
	position: absolute;
	box-sizing: border-box;
	padding: 0.1em 16px;
	width: 100%;
	top: 44px;
	text-align: center;
	color: white;
	background-color: grey;
	z-index: 10;
	}
#status samp {
	margin: 0;
	}

#status a, #status samp, #status var {
	text-decoration: none;
	font-style: normal;
	font-family: inherit;
	color: white;
	}
#status a {
	float: left;
	}
#status var {
	padding-top: 4px;
	font-size: 9px;
	float: right;
	}

.chipBox {
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	width: 110px;
	margin: 2px;
	padding: 2px;
	text-align: center;
	font-family: monospace;
	font-size: 10px;
	line-height: 1;
	vertical-align: top;
	border: 1px solid #ccc;
	border-radius: 4px;
	}
.chipBox.disable {
	opacity: 0.2;
	}
.chipBox code {
	display: block;
	padding: 2px 0;
	margin: 0 6px 4px 6px;
	background-color: #eee;
	}
#pool .chipBox::after {
	display:block;
	position:absolute;
	margin: 0;
	padding: 2px;
	top: 74px;
	right: 4px;
	content:attr(data-c);
	color:white;
	font-weight: bold;
	background-color:#333;
	}

.chip {
	width: 60px;
	height: 70px;
	background-repeat: no-repeat;
	border: none;
	}
.chipBox .chip {
	margin-bottom: 2px;
	}

.chip.selected,
.chip.catch {
	background-color: #a0f3e8;
	}

.no-touch .chipBox .chip:hover, .touch .chipBox .chip:active {
	background-color: #a0f3e8;
	}

body.horizontal .chipBox .chip {
	transform: rotate(-90deg) scaleX(-1);
	}

.no-touch #wall .chip:hover::after,
#wall .selected::after {
	display: block;
	position: absolute;
	box-sizing: border-box;
	top: 50%;
	left: 50%;
	width: auto;
	margin: auto;
	padding: 2px 3px;
	transform: translate(-50%,-50%);
	content: attr(data-p);
	text-align: center;
	font-family: monospace;
	font-size: 1.2em;
	font-style: normal;
	/*color: white;*/
	background-color: rgba(255,255,255,0.8);
	pointer-events: none;
	z-index: 10;
	}

.no-touch #wall .chip.ll:hover::after { background-color: rgba(0,0,0,0.6); }
#wall .selected::after,
.no-touch #wall .chip.selected:hover::after { color: white; background-color: rgba(0,0,0,0.6); }
.no-touch body.horizontal #wall .chip:hover::after {
	/*
	top: 0;
	left: 42%;
	width: auto;
	*/
	height: auto;
	/*padding-top: 8%*/;
	}

/*
.chip:hover {
	position: relative;
	outline: 2px solid red;
	outline-offset: -1px;
	z-index: 10;
	}
.selecting .chip:hover {
	position: static;
	outline: none;
	z-index: auto;
	}
*/
#marker {
	display: block;
	position: absolute;
	box-sizing: border-box;
	padding: 2px 4px;
	font-style: normal;
	color: white;
	background-color: rgba(0,0,0,0.8);
	pointer-events: none;
	z-index: 10000;
	}

#dragMarker {
	display: block;
	position: absolute;
	box-sizing: border-box;
	pointer-events: none;
	/*
	border: 2px dashed red;
	*/
	background-color: rgba(0,0,0,0.2);
	z-index: 10000;
	}

/* ============================================================ */
/* ! ------------ control									*/
/* ============================================================ */

.info {
	display: flex;
	justify-content: space-between;
	position: absolute;
	box-sizing: border-box;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	padding: 8px 16px;
	text-align: right;
	background-color: #005bac;
	border-bottom: 1px solid #ccc;
	}
#price {
	display: inline-block;
	margin: 0 20px 0 0;
	vertical-align: bottom;
	font-size: 18px;
	}

#control {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	position: absolute;
	box-sizing: border-box;
	top: 0;
	left: 0;
	width: 140px;
	height: 100%;
	padding: 70px 2px 16px 2px;
	text-align: center;
	border-right: 1px solid #ccc;
	}

#control h4 {
	margin: 0 0 2px;
	padding: 2px 0;
	color: white;
	background-color: black;
	}

#cmd {
	margin-bottom: 8px;
	}

#cmd button {
	display: inline-block;
	margin: 0;
	width: 43px;
	height: 32px;
	background: url(img/cmd.png) no-repeat;
	background-color: #ccc;
	/*background-size: 129px;*/
	background-size: 215px;
	border: none;
	}
#cmd button:hover  { background-color: #aaa; }
#cmd button.mirage { background-position: 0 0; }
#cmd button.redo   { background-position: -43px 0; }
#cmd button.undo   { background-position: -86px 0; }
.vertical   #cmd button.toggle { background-position: -129px 0; }
.horizontal #cmd button.toggle { background-position: -172px 0; }

#cmd button:disabled { background-color: #eee; }

.on #cmd button.mirage { background-color: #15eddb; }
.on #cmd button.mirage:hover { background-color: #15bbae; }

#zoom {
	display: block;
	margin: 16px 0;
	width: 100%;
	}

#pool {
	display: flex;
	flex-direction: column;
	position: relative;
	flex-grow: 0;
	overflow: hidden;
	}

#pool ul {
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: hidden;
	overflow-y: auto;
	}

#pool .foot {
	position: -webkit-sticky;
	position: sticky;
	bottom: 0px;
	background-color: white;
	}
#pool .full button.plus {
	border-color: #eee;
	pointer-events: none;
	}
#pool .full button.plus:before,
#pool .full button.plus:after { background-color: #eee; }

#pool .minus {
	top: 14px;
	left: 2px;
	right: auto;
	}
#pool .edit {
	top: 14px;
	right: 2px;
	}

#pool .plus {
	position: relative;
	top: auto;
	right: auto;
	margin-top: 8px;
	width: 34px;
	height: 34px;
	}

/* ============================================================ */
/* ! ------------ stage									*/
/* ============================================================ */

#stage {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding-top: 90px;
	padding-left: 178px;
	padding-right: 16px;
	padding-bottom: 16px;

	font-size: 10px;
	line-height: 1;
	overflow: hidden;
	}
#stage > * { vertical-align: bottom; }

#hLB {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 24px;
	margin-top: -24px;
	white-space: nowrap;
	overflow-x: hidden; /* scroll */
	overflow-y: hidden;
	/*padding-right: 16px;*/
	}
#vLB {
	display: inline-block;
	box-sizing: border-box;
	width: 24px;
	height: 100%;
	margin-left: -24px;
	overflow-x: hidden;
	overflow-y: hidden; /* scroll */
	padding-bottom: 16px;
	}
#hLB span, #vLB span {
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	padding: 0;
	}
#hLB span:last-child {
	margin-right: 16px;
	}
body.vertical #hLB span { width: 6em; height: 100%; }
body.vertical #vLB span { width: 100%; height: 30em; }
body.horizontal #hLB span { width: 30em; height: 100%; }
body.horizontal #vLB span { width: 100%; height: 6em; }

#vLB span:last-child {
	margin-bottom: 2em;
	}
#hLB button, #vLB button {
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 0;
	font-size: 10px;
	background-color: #f0f0f0;
	border: 1px solid white;
	}
#hLB button { border-radius: 6px 6px 0 0; }
#vLB button { border-radius: 6px 0px 0px 6px; }

#wall {
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: scroll;
	}
#wall li { list-style: none; white-space: nowrap; }


#wall div {
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	width: 6em;
	height: 30em;
	vertical-align: bottom;
	background-image: none;
	}
#wall div::before {
	display: block;
	position: relative;
	margin: 0;
	width: 6em;
	height: 30em;
	content: "";
	background-size: 100% 100%;
	}
.horizontal #wall div {
	width: 30em;
	height: 6em;
	}
.horizontal #wall div::before {
	transform-origin: 3em 3em;
	transform: rotate(-90deg) scaleX(-1);
	}


#silhouette {
	position: relative;
	height: 0;
	pointer-events: none;
	overflow: visible;
	}
#silhouette i {
	display: none;
	position: absolute;
	left: 16%;
	bottom: -1.5em;
	width: 16em;
	height: 18.7em;
	background: transparent url(img/silhouette.png) no-repeat;
	background-size: contain;
	}
.on #silhouette i {
	display: block;
	}

#floater {
	display: flex;
	position: absolute;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
	top: 20px;
	left: 20px;
	padding: 2px 8px;
	background-color: white;
	border: 1px solid #ccc;
	border-radius: 6px;
	z-index: 20;
	}
#floater button {
	flex-grow: 1;
	margin: 2px 0;
	/*padding: 4px 6px 3px;*/
	padding-left: 6px;
	padding-right: 6px;
	height: 22px;
	white-space: nowrap;
	line-height: 1.2;
	font-size: 14px;
	color: white;
	background-color: black;
	border: none;
	border-radius: 3px;
	}
.touch #floater button { height: 30px; }
#floater button:disabled { background-color: #ccc; }
#floater span { font-size: 5px; }

#floater.H { flex-direction: row; }
#floater.H button { margin: 0 2px; }

#floater.N .choice,
#floater.N .same,
#floater.N .release,
#floater.N .colappend,
#floater.N .colremove,
#floater.N .rowappend,
#floater.N .rowremove { display: none; }
#floater.N span  { display: none; }

#floater.A .all,
#floater.A .same,
#floater.A .colappend,
#floater.A .colremove,
#floater.A .rowappend,
#floater.A .rowremove { display: none; }
#floater.A .release + span,
#floater.A .choice + span { display: none; }

#floater.S .colappend,
#floater.S .colremove,
#floater.S .rowappend,
#floater.S .rowremove { display: none; }
#floater.S .choice + span { display: none; }

#floater.V .rowappend,
#floater.V .rowremove { display: none; }

#floater.H .colappend,
#floater.H .colremove { display: none; }

#sim.out #floater { visibility: hidden; }

/* ============================================================ */
/* ! ------------ selecter									*/
/* ============================================================ */

#design {
	background: transparent;
	}

#selector {
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	top: 0;
	left: 2%;
	width: 96%;
	height: 94%;
	padding: 1em;
	overflow: hidden;
	background-color: white;
	border: 1px solid #ccc;
	border-radius: 0px 0px 8px 8px;
	box-shadow: 0px 0px 18px black;
	}

#selector ul {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
	}

.no-touch #selector button:hover,
.touch #selector button:active {
	background-color: #a0f3e8;
	}
.no-touch #selector button.def:hover { background-color: white; }

#colA, #colB {
	display: inline-flex;
	flex-direction: column;
	flex-wrap: nowrap;
	height: 100%;
	vertical-align: top;
	overflow: hidden;
	}
#colA { width: 75%; margin-right: 2%; }
#colB { width: 23%; }

#navA {
	display: flex;
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 34px;
	}
#navA button {
	box-sizing: border-box;
	margin: 0;
	padding: 0 4px;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 14%;
	white-space: nowrap;
	color: white;
	font-size: 11px;
	background-color: black;
	border-width: 0px 1px 1px 1px;
	border-style: solid;
	border-color: white;
	border-radius: 8px 8px 0 0;
	}
#navA button:first-child { border-left: none; }
#navA button:last-child { border-right: none; }

#listA {
	box-sizing: border-box;
	flex-grow: 2;
	flex-shrink: 0;
	flex-basis: 50%;
	overflow-x: hidden;
	overflow-y: scroll;
	scroll-behavior: smooth;
	}
#listA li {
	padding-bottom: 1em;
	}
#listA li div {
	padding-left: 56px;
	}

#listA header {
	display: flex;
	position: relative;
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	z-index: 10;
	}
.touch #listA header {
	letter-spacing: -1px;
	}

#listA header h4 {
	margin: 0;
	padding: 4px 8px;
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 130px;
	color: white;
	background-color: black;
	}
#listA header p {
	position: relative;
	margin: 0;
	padding: 4px 8px;
	flex-grow: 2;
	flex-shrink: 0;
	flex-basis: auto;
	font-family: monospace;
	text-indent: 2em;
	color: white;
	line-height: 1.2;
	background-color: gray;
	border-top: 2px solid black;
	}
#listA header p:before {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 22px 22px 0 0;
	border-color: black transparent transparent transparent;
	}
#listA header nav {
	display: block;
	position: absolute;
	width: 54px;
	min-height: 150px;
	top: 24px;
	left: 0px;
	padding-top: 6px;
	text-align: left;
	background-color: white;
	z-index: -1;
	}
#listA header nav button {
	display: inline-block;
	box-sizing: border-box;
	margin: 1px 0px;
	padding: 0px;
	width: 48px;
	height: 34px;
	font-size: 10px;
	color: black;
	background-color: transparent;
	border: 1px solid #aaa;
	border-radius: 4px;
	}

#navB {
	margin-top: 1em;
	text-align: center;
	}
#navB * {
	display: inline-block;
	vertical-align: top;
	}
#navB .sample {
	width: 40%;
	padding: 8px 0px;
	border-radius: 6px;
	box-shadow: inset 1px 1px 4px 2px lightgray;
	}
#navB samp {
	box-shadow: 1px 1px 3px 1px gray;
	}

#navB .sample + *{
	width: 60%;
	}
#navB .chip {
	display: inline-block;
	width: 60px;
	height: 70px;
	}
body.horizontal #navB .chip {
	transform: rotate(-90deg) scaleX(-1);
	}
#navB .sample + * button{
	height: 26px;
	margin: 0.3em 0 0.3em;
	}

#listB {
	}
#listB li {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	}
#listB li h4 {
	box-sizing: border-box;
	margin: 0 0 4px 0;
	padding: 4px 8px;
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 100%;
	color: white;
	text-align: center;
	background-color: gray;
	border-radius: 5px;
	}
#listB li span {
	box-sizing: border-box;
	margin: 1px;
	padding: 0px;
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: 22%;
	border: 1px solid #ccc;
	border-radius: 5px;
	}
#listB li button {
	box-sizing: border-box;
	width: 100%;
	height: 32px; /* 34px */
	padding: 0;
	font-size: 9px;
	border: 1px solid white;
	border-radius: 4px;
	}
/* --debug */
#listB.show li button { position: relative; }
#listB.show li button::after {
	display: block;
	position: absolute;
	top: 30%;
	width: 100%;
	content: attr(data-c);
	}

#colB p {
	position: absolute;
	margin: 0 1em 1em 0;
	bottom: 0;
	}

/* debug --*/
#listB li span.spacer {
	background-color: transparent;
	border-color: transparent;
	}

#selector .selected { border: 1px solid #ff00ae; } /* #a0f3e8 */
#selector .chipBox.selected { border-width: 1px; }

.ll { color: white; }

@media screen and (min-height: 860px) {
	#listB li button {
		height: 50px;
		}
}

/* ============================================================ */
/* ! ------------ bind										*/
/* ============================================================ */

#bind {
	box-sizing: border-box;
	padding-top: 43px;
	text-align: center;
	background: transparent;
	}

#bind div.numbered {
	display: inline-block;
	box-sizing: border-box;
	width: 98%;
	margin: 0;
	padding: 1em 0 0;
	background-color: white;
	border: 1px solid #999;
	}
#bind div.numbered > * {
	display: inline-block;
	margin: 0.5em;
	padding: 0;
	vertical-align: middle;
	text-align: left;
	}
#bind div.numbered input {
	width: 4em;
	padding-left: 0.4em;
	font-size: 200%;
	}
#bind div.numbered button {
	width: auto;
	min-width: inherit;
	padding: 0.2em 0.4em;
	margin: 0em 0.1em 0;
	}

#bind > ul {
	display: inline-flex;
	position: relative;
	box-sizing: border-box;
	justify-content: center;
	flex-wrap: wrap;
	align-content: stretch;
	width: 98%;
	max-height: 94%;
	margin: 0;
	padding: 0px 0 0;
	overflow-x: hidden;
	overflow-y: auto;
	list-style: none;
	border: 1px solid #999;
	background-color: white;
	}
#bind > ul .card {
	display: none;
	width: 21em;
	margin: 0.5em;
	box-shadow: none;
	}
#bind > ul .notify {
	display: inline-block;
	position: -webkit-sticky;
	position: sticky;
	/*position: static;*/
	width: 90%;
	top: 0px;
	left: 0;
	background-color: white;
	z-index: 1;
	}
#bind > ul.has .card { display: inline-block; }
#bind > ul .notify p { margin: 5em 0 6em; }
#bind > ul.has .notify p { display: none; }
#bind > ul p.caution { display: none; margin: 0; padding: 0.5em 0 0.6em; }
#bind > ul.has .notify p.caution { display: block; }

.card {
	display: inline-block;
	position: relative;
	width: 26em;
	max-width: 30em;
	height: auto;
	position: relative;
	padding: 1em;
	text-align: left;
	background-color: white;
	border: 1px solid #ccc;
	border-radius: 6px;
	box-shadow: 3px 3px 6px #999;
	}
.card div {
	display: inline-block;
	}
.card .icon {
	display: block;
	position: absolute;
	margin-right: 1em;
	width: 60px;
	top: 1em;
	bottom: 1em;
	/*
	background-size: 100%;
	background-position: center bottom;
	*/
	overflow: hidden;
	}
/* 2021.12 */
.card .icon > span {
	display: inline-block;
	width: 100%;
	height: 100%;
	}
.card .icon > span::after {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: auto;
	height: auto;
	padding: 2px 4px;
	color: white;
	background-color: rgba(108,108,108,0.7);
	}
.card.vertical .icon > span::after { content: "タテ壁"; }
.card.horizontal .icon > span::after { content: "ヨコ壁"; }

.card.vertical .icon > span * {
	display: inline-block;
	width: 100%;
	height: 100%;
	}

.card.horizontal .icon > span {
	/*transform: rotate(-90deg) scaleX(-1);*/
	transform: translate(0px,0px);
	}
.card.horizontal .icon > span * {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 60px;
	height: 60px;
	transform: rotate(-90deg) scaleX(-1);
	}
.card.horizontal .icon > span :nth-child(2) { top: 60px; }
.card.horizontal .icon > span :nth-child(3) { top: 120px; }
/* */
.card .detail {
	position: relative;
	top: auto;
	bottom: 0;
	margin-left: 72px;
	background-color: white;
	}
.card .detail > * {
	width: 100%;
	}
.card p {
	box-sizing: border-box;
	margin: 0;
	padding: 0.1em;
	text-align: center;
	font-size: 16pt;
	}
.card[data-own=false] p::after {
	display: block;
	position: absolute;
	width: 0px;
	height: 0px;
	top: 0;
	left: 0;
	content: "";
	border-top: 8px solid red;
	border-left: 8px solid red;
	border-right: 8px solid transparent;
	border-bottom: 8px solid transparent;
	}
.card p button {
	display: none;
	position: absolute;
	top: 3px;
	right: 3px;
	padding: 2px 4px 1px;
	text-decoration: none;
	font-size: 8pt;
	color: white;
	background-color: #aaa;
	border: none;
	border-radius: 4px;
	}
.card p button:hover {
	cursor: default;
	background-color: #999;
	}
.card.load p button { display: block; }

.card menu {
	padding: 0;
	margin: 4px 0 8px 0;
	text-align: center;
	white-space: nowrap;
	}
.card menu label { display: none; }
.card input {display: none;}
.card i {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin: 2px;
	border: 2px solid white;
	}
.card input:checked + i {
	outline: 1px solid #999;
	}
.tagA { background-color: #F0F0F0; }
.tagB { background-color: #57C1FF; }
.tagC { background-color: #73FDE9; }
.tagD { background-color: #8AFA4E; }
.tagE { background-color: #FFF056; }
.tagF { background-color: #ffb18e; }
.tagG { background-color: #FF94CA; }
p.tagA { background-color: #F0F0F0; }
p.tagB { background-color: #c9ebff; }
p.tagC { background-color: #c1fff6; }
p.tagD { background-color: #daffc6; }
p.tagE { background-color: #fff7aa; }
p.tagF { background-color: #ffd2be; }
p.tagG { background-color: #ffd9ec; }
p.card time {
	display: block;
	box-sizing: border-box;
	}
.card textarea {
	box-sizing: border-box;
	resize: none;
	font-size: 8pt;
	padding: 0.2em;
	}
.card .detail div {
	text-align: center;
	}
.card button {
	width: auto;
	min-width: inherit;
	padding-left: 0.2em;
	padding-right: 0.2em;
	margin: 0.5em 0.1em 0;
	}
.touch.webkit .card button { padding-top: 0.2em; padding-bottom: 0.2em; }

.card.new  [value=delete], .card.new  [value=read], .card.new [value=over] { display: none; }
.card.save [value=delete], .card.save [value=read] { display: none; }
.card.load [value=over], .card.load [value=write], .card.load [value=cancel] { display: none; }

/* ============================================================ */
/* ! ------------ messenger								*/
/* ============================================================ */

#msgwrap {
	display: flex;
	position: absolute;
	justify-content: center;
	align-items: center;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	}

#msgbox {
	position: relative;
	padding: 1em 1em 0.6em;
	max-width: 30em;
	border: 1px solid #ccc;
	border-radius: 6px;
	background-color: white;
	box-shadow: 3px 3px 6px #999;
	}
#msgbox p {
	margin: 0 0 0.5em 0;
	}
#msgbox div.cmd { text-align: right; }
#msgbox.card div.cmd { text-align: center; }
#msgbox.card div.cmd button:first-child { margin-left: 0; }
#msgbox.card div.cmd button:last-child { margin-right: 0; }
.touch.webkit #msgbox.card div.cmd button { padding-top: 0.2em; padding-bottom: 0.2em; }

button.sq {
	margin: 2px;
	/*padding: 4px 6px 3px;*/
	height: 22px;
	color: white;
	background-color: #666;
	border: none;
	border-radius: 3px;
	}
button.sq:hover {
	color: white;
	background-color: blue;
	}