@charset "UTF-8" ;

	body {
		background-image:url("/ownwork/nn3taku/img/bgimg.png");
		margin  : 0pt;
		padding : 0pt;
		color : black;
		line-height : 120%;
	}

	/* メインの白背景領域 */
	div#main {
		width : 80%;
		background-color : #ffffff;
		margin         : 0.5rem auto 0.5rem;
		padding-bottom : 0.5rem;
		border     : 0.2rem #009933 solid;
		text-align : center;
		border-radius: 0.5rem;
	}

	h2#title {
		margin : 1.6rem 0 2.4rem 0;
		text-align : center;
	}

	/* 盤面外の表示部分(管理領域・メニュー・ポップアップ・ボタン) */
	.outofboard {
		font-size   : 1.0rem;
		line-height : 1.2;
	}

	.btn {
		display : inline;
		margin  : 0.2rem;
		padding : 0.2rem 0.4rem;
		border-radius : 0.4rem;
		border        : solid 0.1rem gray;
		
		background     : silver;
		background     : linear-gradient(to bottom, white, silver);
		text-align     : center;
		vertical-align : middle;
		font   : 90%/1.2 sans-serif;
		cursor : default;
	}
	.btn:active {
		background : #afafaf;
		background : linear-gradient(to bottom, #afafaf, #cccccc);
	}
	
	.btn-ok {
		background : #00cc00;
		background : linear-gradient(to bottom, #99ff99, #00cc00);
		color : white;
	}
	.btn-ok:active {
		background : navy;
		background : linear-gradient(to bottom, #006600, #00cc00);
	}
	
	.btn-info {
		background : #993366;
		background : linear-gradient(to bottom, #cc6699, #993366);
		color : white;
	}
	.btn-info:active {
		background : #66334f;
		background : linear-gradient(to bottom, #99334f, #993366);
	}
	
	.btn-warn {
		background : yellow;
		background : linear-gradient(to bottom, yellow, #cccc00);
	}
	.btn-warn:active {
		background : #999900;
		background : linear-gradient(to bottom, #999900, #cccc00);
	}
	
	.btn-danger {
		background : red;
		background : linear-gradient(to bottom, #ffafaf, red);
		color:white;
	}
	.btn-danger:active {
		background : #cc0000;
		background : linear-gradient(to bottom, #cc0000, red);
	}
	
	#btnarea div#btnclear { color:red;}

	/* 管理領域 */
	div#menuboard{
		width     : 90%;
		max-width : 560px;
		margin        : auto;
		margin-bottom : 8pt;
		border : 1px red solid;
		text-align : left;
	}

	/* メニューより下の管理領域 */
	div#usepanel  { margin:8pt 0pt 0pt 6pt;}
	div#checkpanel{ margin:4pt 0pt 6pt 16pt;}
	hr#separator2 { margin:0pt;}
	div#timerpanel{ margin:6pt 6pt 6pt 12pt;}
	span#complete-time-panel{ color: green;}

	div.child   { display:inline; cursor:pointer;}
	div.childsel{ color:maroon; font-weight:bold; background-color:#efefef;}

	div#usepanel > div { display: flex; display: -webkit-flex;}
	div#usepanel > div > div { display: inline-block;}
	div#usepanel > div > div:first-child { white-space:nowrap; margin-right:6px; display: inline-block;}
	div#usepanel > div > div > div { margin-right:6px; white-space: nowrap;}

	div#checkpanel input[type="checkbox"]:disabled + span { color:silver;}

	div#usepanel div.disabled { color:silver;}
	div#usepanel div.disabled div.childsel{ color:silver; font-weight:100; background-color:white;}

	/* パズル表示部 */
	div#quesboard {
		margin     : 16pt auto 16pt auto;
		text-align : center;
	}
	div#divques {
		display:inline-block;
		position:relative;
		border:solid 1px gray;
		cursor:default;
		margin-left:auto;
		margin-right:auto;
		padding:8px;
	}
	div#btnarea {
		position : relative;
		margin : 1.0em auto 1.0em auto;
	}

	/* OK/Cancel表示用 */
	div#notifies {
		position : absolute;
		width : 100%;
		top : 0;
	}
	div.notify {
		display    : none;
		position   : fixed;
		background : #f7f7f7;
		min-width : 240px;
		max-width : 480px;
		border  : 2px gray solid;
		
		text-align : left;
		z-index : 61; /* ポップアップウィンドウより上 */
	}
	div.notify div.content {
		padding : 8px 6px 6px 12px;
	}
	div.notify div.buttons {
		margin-top: 4pt;
		text-align:right;
	}

	div#notifybg {
		display    : none;
		position   : fixed;
		background : black;
		opacity    : 0.2;
		top    : 0;
		left   : 0;
		width  : 100%;
		height : 100%;
		z-index : 60;
		cursor : not-allowed;
	}

	/* ポップアップウィンドウ */
	div.popup {
		display    : none;
		position   : absolute;
		background : #efefef;
		left   : 0pt;
		top    : 0pt;
		margin : 0pt;
		border : 1px #999999 solid;
		border-radius : 6px;
		box-shadow : 6px 6px 6px rgba(64,64,64,.5);
		
		text-align : left;
		font-size  : 0.9em;
		line-height: 1.6;
		z-index    : 40;
	}
	div div.titlebar {
		display    : block;
		background : gray;
		background : #999999 linear-gradient(to right bottom, rgba(0,0,0,.3), rgba(0,0,0,0));
		margin  : 0pt;
		padding : 1pt 12pt 1pt 8pt;
		color   : white;
		cursor  : pointer;
		text-align : left;
		font-size  : 1.0em;
	}
	div.popup form {
		margin  : 2pt 8pt 4pt 4pt;
		padding : 0pt;
	}

	div#popup_database label {
		display: inline-block;
		vertical-align : top;
		min-width: 72px;
	}
	div#popup_database form div {
		float : left;
		margin-bottom: 6pt;
	}
	div#popup_database form textarea {
		padding: 2pt;
		font-size: 0.9em;
	}
	div#popup_database form div:not(:last-child) {
		margin-right : 12pt;
	}
	div#credit3_1 {
		margin  : 4pt 0pt 2pt 4pt;
		line-height : 1.1;
	}
	div#poptest {
		z-index : 1;
	}

	/* cw=32, margin=2, width&height=cw+(margin*2)=36 */
	#nb_shape_tawa { margin-top:4pt; margin-bottom:4pt;}
	#nb_shape_tawa tr  { padding-bottom:2pt;}
	#nb_shape_tawa div { display:block; position:relative; width:36px; height:36px;}
	#nb_shape_tawa img { position:absolute; margin:2px; width:128px; height:32px; top:0px;}
	#nb_shape_tawa #nb_shape_0 img { left:-0px; clip:rect(0px,32px,32px,0px);}
	#nb_shape_tawa #nb_shape_1 img { left:-32px;clip:rect(0px,64px,32px,32px);}
	#nb_shape_tawa #nb_shape_2 img { left:-64px;clip:rect(0px,96px,32px,64px);}
	#nb_shape_tawa #nb_shape_3 img { left:-96px;clip:rect(0px,128px,32px,96px);}

	/* キーポップアップ用 */
	div#keypopup { background-color:silver; line-height:1;}
	div.panelbase{ margin:1pt;}

	div.kpcell {
		width  : 32px;
		height : 32px;
		margin : 1px;
		position : relative;
		float    : left;
		cursor : pointer;
		text-align  : center;
		line-height : 32px;
	}
	div.kpcellempty { cursor:default;}
	div.kpcellvalid { background-color:white;}

	span.kpnum    { font-size:24px; vertical-align:middle;}
	img.kpimg     { position:absolute; overflow:hidden;}

	/* 置換要素 */
	input, button, select, textarea{ font-size:1.0em; line-height:1;}
	input[type="button"], button { font-size:0.9em; line-height:1.2;}
	input[type="checkbox"] { width:0.9em; height:0.9em;}

	/* (ファイル入出力用)隠しエレメント */
	div#hidden_element { position:absolute; top: 0px; left:-10000px;}

	iframe#fileiopanel { width:200px; height:200px;}
	form#fileform2     { width:100px; height:100px;}

	/* ============================================================= */
	/* メニュー領域 */
	#menupanel {
		display  : block;
		position : relative;
		top      : 0px;
		left     : 0px;
		height   : 2.0rem;
		margin   : 0;
		padding  : 0 0 0 2pt;
		background : #efefef;
		border-bottom: silver 1px solid;
		
		user-select         : none;
		-ms-user-select     : none;
		-moz-user-select    : none;
		-webkit-user-select : none;
	}
  @media screen and (max-device-width: 1024px) {
	#menupanel {
		height   : 1.8em;
	}
  }

	/* main-menu items */
	#menupanel > li {
		position   : relative;
		float      : left;
		margin     : 0;
		padding    : 0pt 4pt;
		height     : 100%;
		list-style : none;
		cursor     : pointer;
	}
	#menupanel > li:hover {
		background : #ffcccc;
	}
	#menupanel > li > span {
		color       : blue;
		line-height : 1.5;
		font-size   : 1.2rem;
		vertical-align : middle;
	}
  @media screen and (max-device-width: 1024px) {
	#menupanel > li > span {
		line-height : 1.8;
	}
  }
	#menupanel > li:hover > span {
		color : maroon;
		font-weight : 900;
	}

	/* submenu popup (any level) */
	#menupanel li:hover > menu {
		display : block;
	}

	/* for all level1+ submenus */
	#menupanel > li > menu {
		font-size : 0.9em;
	}
	#menupanel menu {
		display  : none;
		position : absolute;
		list-style-type : none;
		background : gray;
		background : #cccccc linear-gradient(to right bottom, rgba(0,0,0,.75), rgba(0,0,0,0));
		margin     : 0pt;
		padding    : 3px;
		border-radius:8px;
		box-shadow : 6px 6px 6px rgba(64,64,64,.5);
		/* box-shadow : 6px 6px 6px rgba(64,64,64,.5), inset 32px 32px 48px -16px rgba(0,0,0,.5); */
		
		text-align : left;
		cursor     : default;
	}
	#menupanel menu[label]:before {
		margin  : 0pt;
		padding : 4pt 8pt 4pt 4pt;
		line-height : 140%;
		white-space : nowrap;
		color   : white;
		content : attr(label);

		text-shadow : 0px 0px 1px black;
	}
	#menupanel menu li:first-child {
		border-top-left-radius :3px;
		border-top-right-radius:3px;
	}
	#menupanel menu li:last-child {
		border-bottom-left-radius :6px;
		border-bottom-right-radius:6px;
	}

	/* level1, level2+ submenus */
	#menupanel menu
		{ left:0px;   top:1.5em;  min-width:132px; z-index:22;}
  @media screen and (max-device-width: 1024px) {
	#menupanel menu { top:2.0em;}
  }
	#menupanel menu menu[label]
		{ left:120px; top:-1.5em; min-width:80px;  z-index:23;}
	#menupanel menu menu
		{ left:120px; top:-0.2em; min-width:80px;  z-index:23;}
	#menupanel menu menu[label] menu
		{ left:72px;  top:-1.5em; min-width:80px;  z-index:24;}

	/* submenu items */
	#menupanel menu li {
		display    : block;
		position   : relative;
		line-height: 1.1;
		float      : none;
		list-style : none;
		margin     : 0pt;
		padding    : 0.2em 2pt 0.2em 4pt;
		color      : black;
		background : white;
		cursor     : pointer;
	}
  /* @media screen and (max-device-width: 1024px) {
	#menupanel menu li {
		line-height: 1.8;
	} */
  }
	#menupanel menu li:hover {
		background : #ffcccc;
	}
	#menupanel menu li:hover > span {
		font-weight : 900;
		text-decoration : underline;
	}
  @media screen and (max-device-width: 1024px) {
	#menupanel menu li + li {
		margin-top:1px;
	}
  }
	#menupanel menu hr {
		margin  : 0px;
		padding : 0px;
		border  : none;
		height  : 3px;
		color   : lime;
	}
  @media screen and (max-device-width: 1024px) {
	#menupanel menu hr {
		height  : 4px;
	}
  }
	#menupanel menu span {
		font-size: 1.0rem;
		white-space: nowrap;
	}
	#menupanel menu a {
		color : black;
		text-decoration: none;
		white-space: nowrap;
	}

	/* disabled submenu items */
	#menupanel menu li.disabled {
		background : #dfdfdf;
		color      : gray;
		cursor     : default;
	}
	/* (cancel hover, for unsupporting :not(.disabled)) */
	#menupanel menu li.disabled:hover {
		background : #dfdfdf;
	}
	#menupanel menu li.disabled:hover > span {
		font-weight : 100;
		text-decoration : none;
	}

	/* toggle submenu items */
	#menupanel menu li.check > span,
	#menupanel menu li[data-value] > span
		{ font-size:small; color:gray;}
	#menupanel menu li.checked > span
		{ font-size:small; color:black;}

	#menupanel menu li.check > span:before,
	#menupanel menu li[data-value] > span:before
		{ padding:0pt 2pt; color:white; content:"_"; font-size:small;}
	#menupanel menu li.checked > span:before
		{ padding:0pt 2pt; color:black; content:"+"; font-size:small;}

	#menu_link li
		{ font-size: 0.9em;}