@charset "UTF-8";

/*
 html5-doctor-reset-stylesheet.min.css
--------------------------------------*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}

/*======================================
 PLEC css
 penlabo.net
--------------------------------------*/
*{
	box-sizing:  border-box;
/*
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
*/
}

/*========
 CLASS:R
--------*/
.row {
	display: table-row;
	width: 100%;
}
.row>* {
	display: table-cell;
}
.row6>* {
	width: 16.6%
}
/*========
 TAG:F
--------*/
form {
	display: inline;
}
/*========
 TAG:U
--------*/
ul.inline { /* <ul> */
	margin: 0;
	padding: 0;
}
ul.inline:after {
	content: "";
	clear: both;
	display: block;
}
ul.inline>li {
	display: inline;
	list-style-type: none;
}

/*========
 TD:A
--------*/
#axis {
	position: absolute;
	top: 0;
	right: 18px;
	padding: 3px;
	font-size: 9pt;
	line-height: 9pt;
	z-index: 2000;
}
#axis li {
	display: inline-block;
	height: 21px;
}
#axis li>span {
	height: 21px;
	position: relative;
	top: -6px;
}
/*----- 基準軸 -----*/
#axis_matrix {
	background-color: white;
	border: black 1px solid;
	border-width: 1px 0 0 1px;
	width: 25px;
	margin: 4px auto;
}
#axis_matrix div button {
	float: left;
	margin: 0;
	width: 8px;
	height: 8px;
	border: black solid;
	border-width: 0 1px 1px 0;
	background-color: white;
	border-radius: 0;
}
#axis_matrix button:hover {
	cursor: pointer;
}

/*========
 ID:P
--------*/
#pager {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1900;
	display: inline-block;
	padding: 3px;
}

/*========
 メニュー関連
--------*/
#header_menu {
}
/*
#header_menu button {
	display: inlie-block;
}
*/

.menu_sub_toggle {}
.menu_sub {
	display: inline-block;
}
/*======================================
 タグ
--------------------------------------*/
body {
	background-color: #747474;
	font-family: メイリオ,mayrio,Arial, Helvetica, suns-serif;
	font-weight: normal;
	overflow: hidden;
}
button {
	font-size: 12px;
	padding: 2px;
	margin: 0 .5px;
	border: 1px gray solid;
	border-radius: 3.5px;
	background-color: #eee;
}
button:hover {
	background-color: #dde;
}
.auto { margin: 0 auto; }
.r { text-align: right !important; }
.c { text-align: center !important; }
.l { text-align: left !important; }
.t { vertical-align: top !important; }
.img { border: 1px lightgrey solid; }
.u { text-decoration: underline; }
#contents div {
	background-repeat: no-repeat;
}
/*==============================================================================
 フォント選択用
------------------------------------------------------------------------------*/
#font_member {
	height: 250px;
	overflow: auto;
	vertical-align: top;
	border: 1px lightgrey solid;
	background-color: white;
	margin: 2px;
}

#list_block {
	font-size: 9pt;
}
#list_block * {
	font-size: 9pt;
}
/*------------------------------------------------------------------------------
 コンテンツ
------------------------------------------------------------------------------*/
#contents_frame {
/*
	position: relative;
	display: table-cell;
*/
	width: 100%;
	height: 100%;
	overflow: auto;
}
#contents_outer {
	overflow: hidden;
	width:100%;
	height:100%;
}
#contents{
	position: relative;
}
#canvas {
	position:relative;
	background-color:white;
	z-index: 50;
}
#canvas_top,
#canvas_right,
#canvas_bottom,
#canvas_left {
	position:absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	z-index: 1000;
	background-color: black;
	pointer-events: none;
}
#canvas_top2,
#canvas_right2,
#canvas_bottom2,
#canvas_left2 {
	position:absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	z-index: 1001;
	pointer-events: none;
}
#canvas_top2 {
	border-top: 1px white dashed;
}
#canvas_right2 {
	border-left: 1px white dashed;
}
#canvas_bottom2 {
	border-top: 1px white dashed;
}
#canvas_left2 {
	border-left: 1px white dashed;
}

/* 塗り足し */
#margin {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
}
#margin>span {
	position:absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	z-index: 1000;
	background-color: red;
	pointer-events: none;
}
/* 塗り足し */
#padding {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
}
#padding>span {
	position:absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	z-index: 1000;
	background-color: blue;
	pointer-events: none;
}

/*------------------------------------------------------------------------------
 画像一覧
------------------------------------------------------------------------------*/
#box_image_list_content {
	max-height: 360px;
	overflow: auto;
}

.none { display: none; }
.hidden { visibility: hidden; }
.elm {
	position: absolute;
	top: 10px;
	left: 10px;
}
.elm:hover {
	cursor: pointer;
}
/*==============================================================================
 テーブル－アップロードの対応拡張子用
------------------------------------------------------------------------------*/
table.plain {
	border: 1px #747474 solid;
	border-collapse: collapse;
	margin :0;
	padding :0;
}
table.plain th,
table.plain td {
	border: 1px #747474 solid;
	padding: 4px;
	font-size: 9pt;
}
table.plain th {
	text-align: center;
}
table.plain .ext {
	width: 115px;
	font-weight: normal;
}

/*----- /基準軸 -----*/

/* font-size: middle */
.fm {
	font-size: 9pt;
}

.float {
	position: absolute;
	top: 0;
	left: 0;
	background-color: white;
	border: 2px ridge gray;
	padding: 0;
}
/*-----  -----*/
.lf { float: left; }
.rf { float: right; }
.m0a { margin: 0 auto; }

/*----- グリッド用 -----*/
#field_grid button {
	padding: 0;
	line-height: 12px;
}

#ctl_grid {
	margin: 4px auto 0;
	border-collapse: collapse;
}
#ctl_grid td {
	padding: 2px;
	border: 1px gray solid;
}

#ctl_list {
	background-color: white;
	color: black;
}
/* <table> */
#ctl_list_block {
	border-collapse: collapse;
	overflow: scroll;
}
#ctl_list_block tr {
/*	height: 100px;*/
}
#ctl_list_block th,
#ctl_list_block td {
	color: black;
	font-weight: normal;
	border: 1px gray solid;
	padding: 4px;
}
#ctl_list_block th.elm_type {
	width: 5em;
	text-align: right;
}
/*
#ctl_list_block td.elm_lock {
	width: 1em;
	text-align: center;
}
*/
#ctl_list_block td.elm_z {
	width: 3em;
	text-align: right;
}
#ctl_list_block td.elm_label {
	text-align: center;
}
#ctl_list_block td input {
	width: 96%;
}
#list_block_table {
	border-collapse: collapse;
	width: 100%;
	margin: 0;
}
#list_block_table th,
#list_block_table td {
	border: 1px gray solid;
	padding: 4px;
}

#list_block_tbody {}

/* マージン
--------------------------------------*/
#margin {
	position: absolute;
	border: 1px red solid;
	margin: 0;
	padding: 0;
}
#margin_top,
#margin_right,
#margin_bottom,
#margin_left {
	position:absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	z-index: 5000;
}


fieldset {
	border: 2px white groove;
	padding:2px;
	margin-bottom: 4px;
}
legend {
	color: white;
	margin: 0;
	padding: 0 4px;
	font-size: 9pt;
	margin-left: 1em;
}
/*------ grid ------*/
#gridh,
#gridv,
#grid {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	background: url('../images/dummy.gif') repeat;
	z-index: 101;/* 背景が100 */
}
/*----- frame -----*/
.frame {
	position: absolute;
	top: -20px;
	left: 10px;
	z-index: 101;
}


#middle {
	width:100%;
	z-index: 2000;
	display: table-row;
	position: relative;
}
/*======================================
 CTL
--------------------------------------*/
#ctl_header {
	border-bottom: 1px gray solid;
	padding: 3px;
	width: 100%;
}
#ctl_page {
	width: 100%;
}
#ctl_footer {
	border-top: 1px gray solid;
	padding: 3px;
	width: 100%;
	position: relative;
}
#ctl_side {
	display: table-cell;
	vertical-align: top;
	padding: 2px;
	position: relative;
}
#ctl_side .tab_content {
	width: 230px;
}
#ctl_side button {
	padding:0;
}
#ctl_design {
	position: relative;
}
#ctl_position {
	font-size: 9pt;
	display: table-cell;
	vertical-align: top;
	padding: 2px;
	position: relative;
}
#ctl_position ul {
	margin: 0;
	padding: 0;
}
#ctl_position li {
	list-style-type: none;
}
#ctl_position li button {
	width: 4em;
}

.ctl {
	background-color: lightgrey;
	font-size: 9pt;
	z-index: 1200;
}
.ctl table {
	border-width: 0;
}
.ctl th {
	font-weight: normal;
}
.ctl td {
	text-align: left;
	padding: 0 2px;
	vertical-align: top;
}
.ctl_label {
	text-align:center;
	padding:4px;
	background-color: gray;
	color:white;
}

/* タブ
--------------------------------------*/
.tab_menu {
	padding: 2px;
}
.tab_content {
	z-index: 1000;
	max-width: 260px;
	background-color: inherit;
	position: relative;
}


.tab_menu2 { /* <ul> */
	text-align: center;
	display: inline-block;
	margin:0;
}
.tab_menu2:after {
	content: "";
	clear: both;
	display: block;
}
.tab_menu2 li {
	float:left;
	list-style-type: none;
}
.tab_menu2 li img {
	position:absolute;
	top: 2px;
	left: 4px;
/*
	margin-bottom:3px;
*/
}
.tab_menu2 button {
	font-size:12px;
	padding: 2px;
	padding-top: 28px;
	position: relative;
	height: 48px;
	width: 36px;
}





/* 座標 <table> */
/*
*/
table.parameter button {
	padding:0;
}

/* モーダル
--------------------------------------*/
#modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2500;
	background-color: rgba(0, 0, 0, 0.5);
}
#modalHeader {
	position: relative;
	text-align: right;
}
#modalHeader .panel_close {
	position: absolute;
	top: 4px;
	right: 4px;
	font-size:16pt;
	width: 36px;
	height: 36px;
}
#modalContents {
	position: absolute;
	background-color: white;
	padding: 0;
	overflow: auto;
	text-align: center;
}

#keyAssign {
	position: absolute;
	bottom: 18px;
	right: 20px;
	z-index: 2000;
	display: inline-block;
}

/* エラー
--------------------------------------*/
#error  {
	width: 100%;
	background-color: white;
	padding:2em;
	margin: 0;
}
#error p {
	text-align: center;
}
/* パネル
--------------------------------------*/
#panel_block    { width: 250px; }
#panel_font     { width: 360px; }
#panel_grid     { width: 300px; }
#panel_color    { width: 180px; }
#panel_file     { width: 480px; }
#panel_position { width: 350px; }
#panel_notice   { width: 260px; }
.panel {
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: white;
	border: 2px solid gray;
	border-radius: 3px;
	z-index: 2000 !important;
}
.panel_header {
	background-color: lightgrey;
	font-size: 12px;
	padding: 4px;
	line-height: 12px;
	border-bottom: 1px gray solid;
	position: relative;
}
.panel_close {
	width: 32px;
	height: 16px;
	margin: 0;
	padding: 0;
	font-size: 9pt;
	position: absolute;
	right: 10px;
	cursor: pointer;
	border: 0;
	background-color: transparent;
}

.panel_header span {
	/* 選択禁止 */
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}
.panel_header button {
	border: 0;
	width: 1em;
	font-size: 10pt !important;
	background-color: transparent;
}
.panel_content,
.panel_body {
	padding: 4px;
	font-size:9pt;
}


.panel_sub { /* 2020-06-25 */
	overflow: auto;
}
.panel_content { /* 2020-06-25 */
	overflow: auto;
}

.panel_sub_button {
	height: 20px;
	line-height: 20px;
}

.panel th {
	text-align: right;
	padding: 0;
	vertical-align: middle;
	font-weight: normal;
}

/* ヘルプメッセージ */
#helpMessage {
/*
	float:left;
*/
	position: absolute;
	top: 6px;
}

/* カーソル位置 */
#formCursor {
	font-size: 9pt;
}
#formCursor input {
	border-width: 0;
	background-color: transparent;
	text-align: right;
	color: black;
}
/* ボタンとして扱う画像 16px->24px */
img.button {
	padding:4px;
	display:inline;
}
img.button:hover {
	background:url('../images/icon/icon-border_24.png') no-repeat 50% 50%;
}

/* ブロックに関する */
.block_layer_onmouseover {
	position: absolute;
	border: 1px red solid;
	top: -1px;
	left: -1px;
}
/* スピンボタン周り
--------------------------------------*/
.spin {
	position:relative;
/*
	width: 60px;
	height:21px;
*/
/*
*/
	border:1px gray solid;
	text-align:left;
	margin-right:2em;
	white-space: nowrap;
	display: inline-block;
}
.spin .unit {
	height: 19px;
}
.spin_outer {
	position: relative;
	width: 58px;
	height: 19px;
	line-height: 22px;
}
.spin_outer input {
	border-width:0;
	margin:0;
	padding:2px 4px;
	width: 42px;
	height:19px;
	position: absolute;
}
.spin_btn_outer {
	position: absolute;
	top: 0;
	right: 0;
	height: 19px;
	width: 17px;
	border-left: 1px gray solid;
}
.spin_btn_outer div {
	position:absolute;
	height:10px;
}
.spin_btn_outer button {
	width: 16px;
	border-width: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	height: 9px;
	line-height: 8px;
	font-size: 5pt;
	color: black;
	position: absolute;
	top: 0;
}
.spin_btn_up {
	top:0;
	border-bottom:1px gray solid;
}
.spin_btn_down {
	top:9px;
	border-top:1px gray solid;
}
.spin .unit {
	position:absolute;
	top:0;
	left:60px;
	width:2em;
	line-height: 24px;
}
#design_menu { /* <ul> */
	margin: 0;
	padding: 2px;
}
#design_menu li img {
	position:absolute;
	top: 2px;
	left: 4px;
/*
	margin-bottom:3px;
*/
}
#design_menu button {
	font-size:12px;
	padding: 2px;
	padding-top: 28px;
	position: relative;
	height: 48px;
	width: 36px;
}
#entry_text {
	width:96%;
	height:64px;
}

/* onclickイベントのカーソルを変更 */
img[onclick],
button[onclick] {
	cursor: pointer;
}


.tabs li {
	display: inline;
}
div.row {
	display: table;
	vertical-align: middle;
}
div.row>div {
	display: table-cell;
}
div.row2 {
	width: 50%;
}
div.row3 {
	width: 33%;
}


.tile {
/*	display: inline-block;*/
}
.tile>* {
	display: inline-block;
}


/*======================================
 media screen: middle
--------------------------------------*/
@media screen and (max-width: 800px){

/*========
 ID:C
---------*/
#ctl_side {
	width: 40px;
}
/*========
 ID:D
--------*/
#design_menu {}
#design_menu li {
	display: block;
}

/*========
 CLASS:T
--------*/
.tab_content {
	position: absolute;
	top: 28px;/*0;*/
	left: 41px;
	border: gray solid;
	border-width: 0 1px 1px 0;
	padding: 2px;
	width: 240px;
	border: 1px gray solid;
	z-index: 1000;
}



}