@charset "utf-8";
/*
************************************************************************
 変数設定
************************************************************************
*/
:root {
	--font-family-default:'Noto Sans JP';
	--font-family-accent:'Noto Serif JP';

	--brand-color:#2196F3;
	--brand-font-color:#ffffff;


	--color-background-default:#FFFFFF;
	--color-font-default:#263238;

	--color-inversion:#00509b;
	--color-background-inversion:#00509b;
	--color-font-inversion:#FFFFFF;

	--color-primary:#3f51b5;
	--color-background-primary:#3f51b5;
	--color-font-primary:#FFFFFF;

	--color-secondary:#eceff1;
	--color-background-secondary:#eceff1;
	--color-font-secondary:#78909c;

	--color-success:#00c853;
	--color-background-success:#00c853;
	--color-font-success:#FFFFFF;

	--color-danger:#d32f2f;
	--color-background-danger:#d32f2f;
	--color-font-danger:#FFFFFF;

	--color-warning:#ef6c00;
	--color-background-warning:#ef6c00;
	--color-font-warning:#FFFFFF;

	--color-info:#039be5;
	--color-background-info:#039be5;
	--color-font-info:#FFFFFF;

	--color-light:#FFFFFF;
	--color-background-light:#FFFFFF;
	--color-font-light:#263238;

	--color-dark:#37474f;
	--color-background-dark:#37474f;
	--color-font-dark:#FFFFFF;

	--color-border:#90a4ae;
	--color-focus:#e3f2fd;

	--line-height:1.5;

	--border-radius:0.25em;
	--grid-margin:0.5em;
}

/*
***************************************************************
レイアウトショートカット
***************************************************************
*/
.ta-center{text-align: center;}
.ta-left{text-align: left;}
.ta-right{text-align: right;}

.ellipsis
{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.of-hidden
{
	overflow: hidden;
}

.mb01{margin-bottom: 0.5em !important;}
.mb02{margin-bottom: 1.0em !important;}
.mt01{margin-top: 0.5em !important;}
.mt02{margin-top: 1.0em !important;}

/*
***************************************************************
フォント設定
***************************************************************
*/
.ff-base   {font-family: var(--font-family-default), sans-serif;}
.ff-accent {font-family: var(--font-family-accent), sans-serif;}

.fs-ss{font-size: 0.6em !important;}
.fs-s{font-size: 0.8em !important;}
.fs-m{font-size: 1.0em !important;}
.fs-l{font-size: 1.2em !important;}
.fs-ll{font-size: 1.4em !important;}
.fs-lll{font-size: 1.8em !important;}

.fw-bold{font-weight: bold !important;}

/*
***************************************************************
ブロック
***************************************************************
*/
.inline-block {display: inline-block;}

/*
***************************************************************
アイコン設定
***************************************************************
*/
i.material-icons-round
{
	font-size:1.2em;
	vertical-align: middle;
}
i.material-icons-round.icon-primary
{
	color: var(--color-primary);
}
i.material-icons-round.icon-secondary
{
	color: var(--color-font-secondary);
}
i.material-icons-round.icon-info
{
	color: var(--color-info);
}
i.material-icons-round.icon-success
{
	color: var(--color-success);
}
i.material-icons-round.icon-warning
{
	color: var(--color-warning);
}
i.material-icons-round.icon-danger
{
	color: var(--color-danger);
}

/*
***************************************************************
ボディ
***************************************************************
*/
body
{
	background-color: var(--color-background-default);
	color:var(--color-font-default);
	line-height:var(--line-height);
	letter-spacing:0.15em;
}

/*
***************************************************************
ヘッダ
***************************************************************
*/
#header-contents
{
	background-color: var(--brand-color);
}
#header-contents h1
{
	padding:0.5em;
	line-height: 1;
	font-size:0.8em;
	color:var(--brand-font-color);
}

/* 小(スマートフォン) */
@media screen and (max-width:640px) {
	#header-contents
	{
		border-right: 0px solid transparent;
		border-bottom: 1px solid var(--color-border);
		height:auto;
	}
}

/*
***************************************************************
ナビ
***************************************************************
*/
#navi
{
	background-color: #FFFFFF;
}
#navi-constents
{
	padding:1em;
	height: 100%;
}
#navi-constents > * + *
{
	margin-top: 1.0em;
}
#navi-constents .name_plate
{
	display: grid;
	grid-template:
	" icon  ..... .....      " 1fr
	" icon  ..... user_nm    " auto
	" icon  ..... account_nm " auto
	" icon  ..... .....      " 1fr
	/ 4.0em 0.5em 1fr;
}
#navi-constents .name_plate .face_icon
{
	grid-area: icon;
	width:4em;
	height:4em;

	display: grid;
	place-items: center;
}
#navi-constents .name_plate .face_icon .image
{
	border-radius:100%;
	height:100%;
	width:100%;

	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
#navi-constents .name_plate .user_nm
{
	grid-area: user_nm;
	line-height: 1;
}
#navi-constents .name_plate .user_nm .label
{
	font-size: 1.2em;
	font-weight: bold;
}
#navi-constents .name_plate .account_nm
{
	grid-area: account_nm;
	line-height: 1;
}
#navi-constents .name_plate .account_nm .label
{
	font-size: 0.8em;
	color: #666666;
}

#navi-constents ul.menu
{
	list-style: none;
}
#navi-constents ul.menu > * + *
{
	margin-top: 0.25em;
}
#navi-constents ul.menu li
{
	margin:0;
	padding:0;
}
#navi-constents ul.menu li a
{
	display: grid;
	grid-template:
	" icon  ..... label " auto
	/ 1.8em 1.0em 1fr;

	padding:0.5em 0.0em
}
#navi-constents ul.menu li a:hover
{
	text-decoration: none;
	background-color: #FAFAFA;
}
#navi-constents ul.menu li a > i
{
	grid-area: icon;
	display: grid;
	place-items: center stretch;
	font-size: 1.8em;
}
#navi-constents ul.menu li a > .label
{
	grid-area: label;
	display: grid;
	place-items: center stretch;
}

#navi-constents ul.sub-menu
{
	list-style: none;
	font-size:0.9em;

	position: sticky;
	bottom: 0;
}
#navi-constents ul.sub-menu > * + *
{
	margin-top: 0.25em;
}
#navi-constents ul.sub-menu li
{
	margin:0;
	padding:0;

	color:#666666;
}
#navi-constents ul.sub-menu li a
{
	display: grid;
	grid-template:
	" icon  ..... label " auto
	/ 1.8em 1.0em 1fr;

	padding:0.5em 0.0em
}
#navi-constents ul.sub-menu li a:hover
{
	text-decoration: none;
	background-color: #FAFAFA;
}
#navi-constents ul.sub-menu li a > i
{
	grid-area: icon;
	display: grid;
	place-items: center stretch;
	font-size: 1.8em;
}
#navi-constents ul.sub-menu li a > .label
{
	grid-area: label;
	display: grid;
	place-items: center stretch;
}


/*
***************************************************************
フッタ
***************************************************************
*/
#footer-contents
{
	background-color: var(--brand-color);
	padding:0.5em;
}
#footer-contents > * + *
{
	margin-top:1em;
}
#footer-contents .sign
{
	text-align: center;
}
#footer-contents .sign .rights
{
	line-height: 1;
	font-size: 0.8em;
	color: var(--brand-font-color);
}

/*
***************************************************************
グローバルフッタ
***************************************************************
*/
#global-footer-contents
{
	background-color: var(--color-background-inversion);
	color:var(--color-font-inversion);
	padding:0.25em;
}

/*
***************************************************************
グリッドシステム
***************************************************************
*/
.grid
{
	display: flex;
	flex-wrap: wrap;
	margin:calc(var(--grid-margin) * -1);
	width:calc(100% + (var(--grid-margin) * 2));
}
.grid + .grid
{
	margin-top:calc(var(--grid-margin));
}
.grid .grid-cell
{
	flex: 0 0 calc(100% - (var(--grid-margin) * 2));
	margin:var(--grid-margin);
	min-width: 0;
}
.grid .grid-cell.grid-cell-01{flex: 0 0 calc(  8.33333% - (var(--grid-margin) * 2));}
.grid .grid-cell.grid-cell-02{flex: 0 0 calc( 16.66666% - (var(--grid-margin) * 2));}
.grid .grid-cell.grid-cell-03{flex: 0 0 calc( 25.00000% - (var(--grid-margin) * 2));}
.grid .grid-cell.grid-cell-04{flex: 0 0 calc( 33.33333% - (var(--grid-margin) * 2));}
.grid .grid-cell.grid-cell-05{flex: 0 0 calc( 41.66666% - (var(--grid-margin) * 2));}
.grid .grid-cell.grid-cell-06{flex: 0 0 calc( 50.00000% - (var(--grid-margin) * 2));}
.grid .grid-cell.grid-cell-07{flex: 0 0 calc( 58.33333% - (var(--grid-margin) * 2));}
.grid .grid-cell.grid-cell-08{flex: 0 0 calc( 66.66666% - (var(--grid-margin) * 2));}
.grid .grid-cell.grid-cell-09{flex: 0 0 calc( 75.00000% - (var(--grid-margin) * 2));}
.grid .grid-cell.grid-cell-10{flex: 0 0 calc( 83.33333% - (var(--grid-margin) * 2));}
.grid .grid-cell.grid-cell-11{flex: 0 0 calc( 91.66666% - (var(--grid-margin) * 2));}
.grid .grid-cell.grid-cell-12{flex: 0 0 calc(100.00000% - (var(--grid-margin) * 2));}
.grid .grid-cell.grid-cell-auto{flex: 1 1 auto;}
.grid .grid-cell.grid-cell-shrink{flex: 0 1 auto;}
.grid .grid-cell.grid-cell-center{align-self: center;}
/* 小(スマートフォン) */
@media screen and (max-width:640px) {
	.grid .grid-cell.grid-cell-01{flex: 0 0 calc( 50.00000% - (var(--grid-margin) * 2));}
	.grid .grid-cell.grid-cell-02{flex: 0 0 calc( 50.00000% - (var(--grid-margin) * 2));}
	.grid .grid-cell.grid-cell-03{flex: 0 0 calc( 50.00000% - (var(--grid-margin) * 2));}
	.grid .grid-cell.grid-cell-04{flex: 0 0 calc(100.00000% - (var(--grid-margin) * 2));}
	.grid .grid-cell.grid-cell-05{flex: 0 0 calc(100.00000% - (var(--grid-margin) * 2));}
	.grid .grid-cell.grid-cell-06{flex: 0 0 calc(100.00000% - (var(--grid-margin) * 2));}
	.grid .grid-cell.grid-cell-07{flex: 0 0 calc(100.00000% - (var(--grid-margin) * 2));}
	.grid .grid-cell.grid-cell-08{flex: 0 0 calc(100.00000% - (var(--grid-margin) * 2));}
	.grid .grid-cell.grid-cell-09{flex: 0 0 calc(100.00000% - (var(--grid-margin) * 2));}
	.grid .grid-cell.grid-cell-10{flex: 0 0 calc(100.00000% - (var(--grid-margin) * 2));}
	.grid .grid-cell.grid-cell-11{flex: 0 0 calc(100.00000% - (var(--grid-margin) * 2));}
	.grid .grid-cell.grid-cell-12{flex: 0 0 calc(100.00000% - (var(--grid-margin) * 2));}

	.grid .grid-cell.grid-cell-sp-01{flex: 0 0 calc(  8.33333% - (var(--grid-margin) * 2));}
	.grid .grid-cell.grid-cell-sp-02{flex: 0 0 calc( 16.66666% - (var(--grid-margin) * 2));}
	.grid .grid-cell.grid-cell-sp-03{flex: 0 0 calc( 25.00000% - (var(--grid-margin) * 2));}
	.grid .grid-cell.grid-cell-sp-04{flex: 0 0 calc( 33.33333% - (var(--grid-margin) * 2));}
	.grid .grid-cell.grid-cell-sp-05{flex: 0 0 calc( 41.66666% - (var(--grid-margin) * 2));}
	.grid .grid-cell.grid-cell-sp-06{flex: 0 0 calc( 50.00000% - (var(--grid-margin) * 2));}
	.grid .grid-cell.grid-cell-sp-07{flex: 0 0 calc( 58.33333% - (var(--grid-margin) * 2));}
	.grid .grid-cell.grid-cell-sp-08{flex: 0 0 calc( 66.66666% - (var(--grid-margin) * 2));}
	.grid .grid-cell.grid-cell-sp-09{flex: 0 0 calc( 75.00000% - (var(--grid-margin) * 2));}
	.grid .grid-cell.grid-cell-sp-10{flex: 0 0 calc( 83.33333% - (var(--grid-margin) * 2));}
	.grid .grid-cell.grid-cell-sp-11{flex: 0 0 calc( 91.66666% - (var(--grid-margin) * 2));}
	.grid .grid-cell.grid-cell-sp-12{flex: 0 0 calc(100.00000% - (var(--grid-margin) * 2));}
	.grid .grid-cell.grid-cell-sp-auto{flex: 1 1 auto;}
	.grid .grid-cell.grid-cell-sp-shrink{flex: 0 1 auto;}
	.grid .grid-cell.grid-cell-sp-center{align-self: center;}
}

/*
***************************************************************
ボタン
***************************************************************
*/
.button-list
{
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	margin:-0.25em;
}
.button-list .button
{
	margin:0.25em;
}
.button-list > .space
{
	flex:1 1 auto;
}
.button-list.button-list-center
{
	justify-content: center;
}
.button-list.button-list-left
{
	justify-content: flex-start;
}
.button-list.button-list-right
{
	justify-content: flex-end;
}
.button-list.button-list-nowrap
{
	flex-wrap: nowrap;
}
.button
{
	-webkit-appearance : none;
	-webkit-tap-highlight-color : rgba(0,0,0,0);
	
	transition-duration:0.2s;
	transition-property:all;
	transition-timing-function:ease;
	
	display: inline-flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	
	border-radius:var(--border-radius);
	border:1px solid var(--color-border);
	background-color:var(--color-background-default);
	box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.20);

	color:var(--font-color);
	line-height:1;
	padding:0.5em;

	cursor: pointer;
}
.button.button-small
{
	font-size:0.7em;
}
.button:hover
{
	filter: brightness(0.90);
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.20);
}
.button > i.prefix
{
	margin-right:0.25em;
	font-size:1.2em !important;
	line-height:1 !important;
	transform: translateY(0.05em);
}
.button > i.suffix
{
	margin-left:0.25em;
	font-size:1.2em !important;
	line-height:1 !important;
	transform: translateY(0.05em);
}
.button.button-small > i.prefix,
.button.button-small > i.suffix
{
	font-size: 1.8em !important;
}
.button.button-primary
{
	border:1px solid var(--color-primary);
	background-color: var(--color-background-primary);
	color:var(--color-font-primary);
}
.button.button-secondary
{
	border:1px solid var(--color-secondary);
	background-color: var(--color-background-secondary);
	color:var(--color-font-secondary);
}
.button.button-danger
{
	border:1px solid var(--color-danger);
	background-color: var(--color-background-danger);
	color:var(--color-font-danger);
}
.button.button-warning
{
	border:1px solid var(--color-warning);
	background-color: var(--color-background-warning);
	color:var(--color-font-warning);
}
.button.button-success
{
	border:1px solid var(--color-background-success);
	background-color: var(--color-background-success);
	color:var(--color-font-success);
}
.button:disabled
{
	opacity: 0.3;
	box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.00);
}
.button:disabled:hover
{
	filter: brightness(1.00);
}
.button.button-vertical
{
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-content: center;
}
.button.button-no-frame
{
	border: 0px solid transparent;
	background-color: transparent;
	box-shadow: none;
	padding: 0;
	color: var(--color-font-secondary);
}
.button.button-no-frame > i
{
	color: var(--color-font-secondary);
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.20);
}
.button.button-no-frame.button-primary > i
{
	color:var(--color-primary);
}
.button.button-no-frame.button-secondary > i
{
	color:var(--color-secondary);
}
.button.button-no-frame.button-warning > i
{
	color:var(--color-warning);
}
.button.button-no-frame.button-danger > i
{
	color:var(--color-danger);
}
.button.button-no-frame.button-success > i
{
	color:var(--color-success);
}
.button.button-no-frame:hover > i
{
	text-shadow:none;
}
.button.button-vertical > i.prefix,
.button.button-vertical > i.suffix
{
	font-size: 2.0em !important;
	margin:0;
}
.button.button-vertical > .label
{
	font-size:0.5em;
	margin-top:0.5em;
}


/*
***************************************************************
入力フォーム
***************************************************************
*/
.input-form
{
	display: grid; /* グリッドレイアウト */

	-ms-grid-rows: auto auto auto; /* 行区切り */
	-ms-grid-columns: 100%; /* 列区切り */
	
	grid-template-rows: auto auto auto; /* 行区切り */
	grid-template-columns: 100%; /* 列区切り */

	width:100%;
}
.input-form > .name
{
	-ms-grid-row: 1;
	-ms-grid-column: 1;

	grid-row: 1;
	grid-column: 1;

	display: flex;
	align-items: center;
	align-content: center;
	font-size:0.8em;
}
.input-form > .name > i
{
	margin-right:0.25em;
}
.input-form > .name > .req
{
	margin-left:0.25em;
	color: var(--color-danger);
}
.input-form > .field
{
	-ms-grid-row: 2;
	-ms-grid-column: 1;

	grid-row: 2;
	grid-column: 1;
}
.input-form > .field > .note
{
	width:100%;
	margin-top:0.25em;
}
.input-form > .field > .note > li
{
	font-size:0.8em;
	color:var(--color-font-secondary);
}
.input-form > .error
{
	-ms-grid-row: 3;
	-ms-grid-column: 1;

	grid-row: 3;
	grid-column: 1;
	margin-top:0.25em;
}
.input-form > .error > li
{
	font-size:0.8em;
	color:var(--color-danger);
}

input:-webkit-autofill {
    box-shadow: 0 0 0 1000px var(--color-focus) inset;
}
input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="color"]),
textarea,
select
{
	width: 100%;
	
	display:inline-flex;
	border:1px solid var(--color-border);
	border-radius: var(--border-radius);
	background-color:var(--color-background-default);
	box-shadow: 1px 1px 2px 0px #00000020 inset;

	margin:0;
	padding:0.4em 0.5em;
	line-height:1.5;

	-webkit-appearance:none;
	-moz-appearance:none;
	-ms-appearance:none;
	-o-appearance:none;
}
select,
select:focus
{
	-webkit-appearance:auto;
	-moz-appearance:auto;
	-ms-appearance:auto;
	-o-appearance:auto;
}
input.minus,
textarea.minus,
select.minus
{
	color:var(--color-danger);
}
input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="color"]):focus,
textarea:focus,
select:focus
{
	background-color:var(--color-focus);
}
.invalid input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="color"]),
.invalid textarea,
.invalid select
{
	border:1px solid var(--color-danger);
}
input[type='checkbox'],
input[type='radio'],
input[type='checkbox']:focus,
input[type='radio']:focus
{
	width: auto;
	box-shadow: none;
	-webkit-appearance:auto;
	-moz-appearance:auto;
	-ms-appearance:auto;
	-o-appearance:auto;
}
input[type='range'],
input[type='color'],
input[type='range']:focus,
input[type='color']:focus
{
	width: 100%;
	display:inline-flex;
	-webkit-appearance:auto;
	-moz-appearance:auto;
	-ms-appearance:auto;
	-o-appearance:auto;
}
input[type='date'],
input[type='time'],
input[type='datetime'],
input[type='datetime-local']
{
	min-height:2.5em;
}
label.input-radio,
label.input-checkbox
{
	width: auto;

	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;

	margin-right:0.50em;
	margin-top:0.50em;
	cursor: pointer;
	user-select: none;
}
label.input-radio > input,
label.input-checkbox > input
{
	margin-right: 0.25em;
	cursor: pointer;
}

label.input-currency::after
{
	content:'￥';

	display: block;
	height: fit-content;
	margin: auto;

	position: absolute;
	left:0.50em;
	top:0%;
	bottom:0%;

	pointer-events: none;
}
label.input-currency > input
{
	padding-left: 1.5em;
}

.input-file
{
	display: grid; /* グリッドレイアウト */

	-ms-grid-rows: 1fr auto 1fr; /* 行区切り */
	-ms-grid-columns: 8em calc(100% - 8em); /* 列区切り */
	
	grid-template-rows: 1fr auto 1fr; /* 行区切り */
	grid-template-columns: 8em calc(100% - 8em); /* 列区切り */

	height:8em;
}
.input-file > .thumbnail
{
	-ms-grid-row: 1/4;
	-ms-grid-column: 1;

	grid-row: 1/4;
	grid-column: 1;

	border: 1px solid var(--color-border);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}
.input-file > .file-url
{
	-ms-grid-row: 2;
	-ms-grid-column: 2;

	grid-row: 2;
	grid-column: 2;

	padding-left:1em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

	display: block;
}
.input-file.eyecatch
{
	display:block;
	height:auto;
}
.input-file.eyecatch > .thumbnail
{
	width:100%;
	padding-top:56.25%;
}
.input-file.eyecatch > .file-url
{
	padding-left:0em;
}
.input-file.web
{
	display:block;
	height:auto;
}
.input-file.web > .thumbnail
{
	width:100%;
	padding-top:100%;
}
.input-file.web > .file-url
{
	padding-left:0em;
}
.mce-editor
{
	padding:1em;
	border:1px solid #CCCCCC;
}

/*
***************************************************************
システムメニュー
***************************************************************
*/
#system-menu
{
	display: flex;
	flex-wrap: wrap;

	width:100%;
	max-width:100%;
}
#system-menu .user-nm
{
	flex:0 1 100%;
	border:1px solid var(--color-border);
	border-radius: var(--border-radius);
	background-color: var(--color-background-secondary);

	display: flex;
	align-items: center;
	align-content: center;

	padding:0.0em;
	margin:1.0em;
}
#system-menu .user-nm > *
{
	margin:0.3em;
	line-height:1;
}
#system-menu .user-nm > i
{
	flex:0 0 auto;
	font-size:1.5em !important;
	color:var(--color-font-secondary);
}
#system-menu .user-nm > .label
{
	flex:0 1 100%;
}
#system-menu .navi
{
	flex:0 1 100%;
	margin-bottom: 2.0em;
}
#system-menu .navi ul,
#system-menu .navi ul li
{
	list-style: none;
	padding: 0%;
	margin: 0%;
}
#system-menu .navi ul li
{
	-webkit-appearance : none;
	-webkit-tap-highlight-color : rgba(0,0,0,0);
	
	transition-duration:0.2s;
	transition-property:all;
	transition-timing-function:ease;

	background-color: transparent;
	border: 0px solid transparent;

	width:100%;

	display: grid; /* グリッドレイアウト */
	grid-template-rows: 1fr auto; /* 行区切り */
	grid-template-columns: auto 1fr; /* 列区切り */

	cursor: pointer;

	line-height:1.2;
}
#system-menu .navi ul li:hover,
#system-menu .navi ul li.active
{
	background-color: var(--color-background-secondary);
}
#system-menu .navi ul li:hover > .func_icon > i,
#system-menu .navi ul li.active > .func_icon > i
{
	color: var(--color-inversion) !important;
}
#system-menu .navi ul li:hover> .main,
#system-menu .navi ul li.active > .main
{
	color: var(--color-font-default) !important;
}
#system-menu .navi ul li > .func_icon
{
	-ms-grid-row: 1/3;
	-ms-grid-column: 1;

	grid-row: 1/3;
	grid-column: 1;

	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;

	padding-right:0.5em;
}
#system-menu .navi ul li > .main
{
	-ms-grid-row: 1;
	-ms-grid-column: 2;

	grid-row: 1;
	grid-column: 2;

	display: flex;
	align-items: center;
	align-content: center;
}
#system-menu .navi ul li > .sub
{
	-ms-grid-row: 2;
	-ms-grid-column: 2;

	grid-row: 2;
	grid-column: 2;

	display: flex;
	align-items: center;
	align-content: center;
}
#system-menu .navi ul.main li
{
	padding:0.8em 1.0em;
}
#system-menu .navi ul.main li > .func_icon > i
{
	font-size:1.5em !important;
	color:var(--color-font-secondary);
}
#system-menu .navi ul.main li > .main
{
	font-size:1.0em;
	font-weight: bold;
}
#system-menu .navi ul.main li > .sub
{
	font-size:0.7em;
}
#system-menu .navi ul.sub li
{
	padding:0.5em 1.0em;
	color:var(--color-font-secondary);
}
#system-menu .navi ul.sub li > .func_icon > i
{
	font-size:0.8em !important;
}
#system-menu .navi ul.sub li > .main
{
	font-size:0.8em;
}
#system-menu .navi ul.sub li > .sub
{
	font-size:0.6em;
}
#system-menu .btnMenu
{
	display:none;
}
/* 小(スマートフォン) */
@media screen and (max-width:640px) {
	#system-menu
	{
		width:100%;
		max-width:100%;
	}
	#system-menu .user-nm
	{
		flex:1 1 auto;
	}
	#system-menu .navi
	{
		display:none;
	}
	/* ナビボタン */
	#system-menu .btnMenu
	{
		display:block;
		flex:0 0 5em;
		width:5em;
		height:5em;
		cursor:pointer;

		-webkit-appearance : none;
		-webkit-tap-highlight-color : rgba(0,0,0,0);
		
		transition-duration:0.2s;
		transition-property:all;
		transition-timing-function:ease;

		padding:0;
		margin: 0;

		border:0px solid transparent;
		background-color: transparent;
	}
	#system-menu .btnMenu > span.border
	{
		display:block;
		position:absolute;
		
		left:20%;
		right:20%;
		
		width:60%;
		height:0px;
		
		border-bottom:2px solid var(--color-background-inversion);
		
		transition-duration:0.3s;
		transition-property:all;
		transition-timing-function:ease;
	}
	#system-menu .btnMenu > span.border:nth-child(1){top:20%;}
	#system-menu .btnMenu > span.border:nth-child(2){top:40%;}
	#system-menu .btnMenu > span.border:nth-child(3){top:60%;}
	#system-menu .btnMenu > span.label
	{
		display:block;
		position:absolute;
		
		top:70%;
		left:0%;
		right:0%;
		
		width:100%;
		height:0px;
		
		text-align:center;
		
		font-size:0.5em;
		color:var(--color-font-default);
	}
	#system-menu .btnMenu > span.label > .close{display:block;}
	#system-menu .btnMenu > span.label > .open{display:none;}
	#system-menu.show .btnMenu > span.border:nth-child(1){
		transform:rotate(45deg);
		top:40%;
	}
	#system-menu.show .btnMenu > span.border:nth-child(2){
		opacity: 0.0;
	}
	#system-menu.show .btnMenu > span.border:nth-child(3){
		transform:rotate(-45deg);
		top:40%;
	}
	#system-menu.show .btnMenu > span.label > .close{display:none;}
	#system-menu.show .btnMenu > span.label > .open{display:block;}
	
	#system-menu.show .navi
	{
		display: block;
	}
}

/*
***************************************************************
ページタイトル
***************************************************************
*/
#contents-title
{
	background-color: var(--color-background-secondary);
	color:var(--color-font-default);
	border-bottom:1px solid var(--color-border);
}
/* システムヘッダー */
#contents-title .system-header
{
	width:100%;
}
#contents-title .system-header .function-name
{
	display: grid; /* グリッドレイアウト */
	grid-template-rows: auto auto; /* 行区切り */
	grid-template-columns: auto 1fr; /* 列区切り */
	width:100%;
	padding:0.5em;
}
#contents-title .system-header .function-name .func_icon
{
	-ms-grid-row: 1/3;
	-ms-grid-column: 1;

	grid-row: 1/3;
	grid-column: 1;

	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;

	padding-right:0.5em;
}
#contents-title .system-header .function-name .func_icon i
{
	font-size:2.0em !important;
	color:var(--color-inversion);
}
#contents-title .system-header .function-name .func_nm
{
	-ms-grid-row: 1;
	-ms-grid-column: 2;

	grid-row: 1;
	grid-column: 2;
}
#contents-title .system-header .function-name .func_nm .label
{
	font-size:1.5em;
	font-weight:bold;
	line-height:1.2;
}
#contents-title .system-header .function-name .disp_nm
{
	-ms-grid-row: 2;
	-ms-grid-column: 2;

	grid-row: 2;
	grid-column: 2;
}
#contents-title .system-header .function-name .disp_nm .label
{
	font-size:0.8em;
	font-weight:normal;
	line-height:1.2;
}
#contents-title .system-header ul.pankz
{
	margin: 0%;
	padding: 0%;
	list-style: none;

	display: flex;
	align-items: center;
	align-content: center;

	padding:0.5em;

	overflow-x: auto;
}
#contents-title .system-header ul.pankz li
{
	margin: 0%;
	padding: 0%;
	line-height: 1;
	font-size:0.8em;
	flex: 0 0 auto;
}
#contents-title .system-header ul.pankz li::after
{
	content: '/';
	display: inline-block;
	margin:0 0.25em;
}
#contents-title .system-header ul.pankz li:last-child:after
{
	content: none;
}
#contents-title .system-header ul.pankz li .label.to
{
	cursor: pointer;
}
#contents-title .system-header ul.pankz li .label.to:hover
{
	border-bottom: 1px solid;
}

/*
***************************************************************
ページコンテンツ
***************************************************************
*/

/*
***************************************************************
ボックス
***************************************************************
*/
.box
{
	margin-bottom: 2.0em;
	border:1px solid var(--color-border);
	border-radius: var(--border-radius);
	box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.10);
}
.box .box-title
{
	background-color: var(--color-background-secondary);
	border-radius: var(--border-radius) var(--border-radius) 0.0em 0.0em;
	border-bottom: 1px solid var(--color-border);
	padding:0.5em;
}
.box .box-title .main
{
	display: inline-block;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1;
}
.box .box-sub-title
{
	margin-top:1.5em;
	padding:0.0em 1.0em;
	margin-bottom:1.0em;
}
.box .box-sub-title .main
{
	border-left: 0.25em solid var(--color-inversion);
	padding-left:0.5em;
	font-weight: bold;
}
.box .box-contents
{
	margin-top:1.0em;
	margin-bottom:1.0em;
	padding:0.0em 1.0em;
}
.box .box-contents.border-bottom
{
	border-bottom:1px solid var(--color-border);
	padding-bottom: 1.0em;
}

.box .box-footer
{
	margin-top:2.0em;
	background-color: var(--color-background-secondary);
	border-radius: 0.0em 0.0em var(--border-radius) var(--border-radius);
	border-top: 1px solid var(--color-border);
	padding:0.5em;
}

/*
***************************************************************
検索結果テーブル
***************************************************************
*/
.search-result
{
	overflow-x: auto;
	overflow-y: hidden;
}
.search-result.no-scroll
{
	overflow-x: hidden;
}
.search-result > table
{
	width:100%;
	border-spacing:0px;
	border-collapse:separate;
	border:0px solid transparent;
	border-top:1px solid var(--color-border);
}
.search-result > table th,
.search-result > table td
{
	width:10px;
	white-space:nowrap;
	padding:0.5em;
	border:0px solid transparent;
	background-color: var(--color-background-default);
	border-bottom:1px solid var(--color-border);
}
.search-result > table thead tr th
{
	font-size: 0.8em;
}
.search-result > table tr th.check,
.search-result > table tr td.check
{
	width:1px;
}
.search-result > table tr th.flex,
.search-result > table tr td.flex
{
	width:auto;
	max-width:80%;
}
.search-result.no-scroll > table tr td.flex
{
	white-space:unset;
}
.search-result > table tr th.prop,
.search-result > table tr td.prop
{
	font-size: 0.8em;
}
.search-result > table tr th.num,
.search-result > table tr td.num
{
	min-width:6em;
}
.search-result > table tr th.num2,
.search-result > table tr td.num2
{
	min-width:10em;
}
.search-result > table tr th.ope,
.search-result > table tr td.ope
{
	position: sticky;
	right:0px;
}
.search-result > table tbody tr:hover th,
.search-result > table tbody tr:hover td
{
	background-color: var(--color-background-secondary);
}
.search-result .result-main
{
	display: grid;
	grid-template:
    " eyecatch status      meta " auto
    " eyecatch main-label  meta " auto
    " eyecatch description meta " auto
    / auto 1fr auto;
}
.search-result .result-main .eyecatch
{
	grid-area: eyecatch;

	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;

}
.search-result .result-main .eyecatch > *
{
	padding-right:0.5em;
}
.search-result .result-main .eyecatch > img
{
	width:5em;
	height:auto;
}
.search-result .result-main .status
{
	grid-area: status;

	display: flex;
	align-items: center;
	align-content: space-between;

	margin:0.0em -0.25em;
}
.search-result .result-main .status > .tag
{
	background-color: var(--color-background-secondary);
	color: var(--color-font-secondary);
	font-size: 0.8em;
	padding: 0.10em 0.5em;
	line-height: 1.5;
	margin:0.25em;
}
.search-result .result-main .status > .tag-primary
{
	background-color: var(--color-background-primary);
	color: var(--color-font-primary);
}
.search-result .result-main .status > .tag-info
{
	background-color: var(--color-background-info);
	color: var(--color-font-info);
}
.search-result .result-main .status > .tag-success
{
	background-color: var(--color-background-success);
	color: var(--color-font-success);
}
.search-result .result-main .status > .tag-warning
{
	background-color: var(--color-background-warning);
	color: var(--color-font-warning);
}
.search-result .result-main .status > .tag-danger
{
	background-color: var(--color-background-danger);
	color: var(--color-font-danger);
}
.search-result .result-main .main-label
{
	grid-area: main-label;

	font-weight:bold;
}
.search-result .result-main .description
{
	grid-area: description;

	font-size: 0.8em;
	color: var(--color-font-secondary);
}
.search-result .result-main .contents
{
	grid-area: description;
}
.search-result .result-main .meta
{
	grid-area: meta;
	font-size: 0.8em;
	color: var(--color-font-secondary);

	display: flex;
	align-items: center;
	align-content: space-between;

	padding-left: 0.5em;
}

/*
***************************************************************
スペックテーブル
***************************************************************
*/
.spec-sheet
{
	overflow-x: auto;
	overflow-y: hidden;
}
.spec-sheet.no-scroll
{
	overflow-x: hidden;
}
.spec-sheet > table
{
	width:100%;
	border-spacing:0px;
	border-collapse:separate;
	border:0px solid transparent;
	border-top:1px solid var(--color-border);
}
.spec-sheet > table th,
.spec-sheet > table td
{
	padding:0.5em;
	border:0px solid transparent;
	background-color: var(--color-background-default);
	border-bottom:1px solid var(--color-border);
	text-align: left;
}
.spec-sheet > table th
{
	width:10px;
	white-space:nowrap;
	font-weight: bold;
}
.img-sq-thumbnail
{
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	width:15em;
	height:15em;
}
.img-sq-thumbnail video
{
	width:100%;
	height:100%;
}
/*
***************************************************************
一覧入力用
***************************************************************
*/

/*
***************************************************************
ページネーション
***************************************************************
*/
.paginate
{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	align-content: center;
	margin:-0.25em;
}
.paginate > *
{
	flex:0 0 auto;
	width: auto;
	margin:0.25em;
}
.paginate > select
{
	font-size:0.8em;
}

/*
***************************************************************
投稿エディタ
***************************************************************
*/
.post-editor
{
	margin-bottom:0.5em;
}
.post-editor > .title
{
	display: flex;
	align-items: center;
	align-content: center;

	font-size: 1.0em;

	padding:0.25em 0.5em;

	background-color: #DDDDDD;
}
.post-editor > .title > .label
{
	flex: 1 0 auto;
	color: var(--color-font-secondary);
}
.post-editor > .ope
{
	flex: 0 1 auto;
}
.post-editor > .editor
{
	padding:0.5em 0em;
}

/*
***************************************************************
属性値設定
***************************************************************
*/
.input-attr
{

}
.input-attr .attr-tabs
{
	display: flex;
	border-top:1px solid #CCCCCC;
	border-left:1px solid #CCCCCC;
	background-color:#EFEFEF;

	overflow-x: auto;
	border-bottom: 1px dotted #EFEFEF;
}
.input-attr .attr-tabs .attr-tab
{
	flex: 1 0 auto;
	border-right:1px solid #CCCCCC;
	text-align: center;
	padding:0.5em;

	cursor:pointer;
}
.input-attr .attr-tabs .attr-tab.active,
.input-attr .attr-tabs .attr-tab:hover
{
	background-color:#FFFFFF;
}
.input-attr .attr-values
{
	border-left:1px solid #CCCCCC;
	border-right:1px solid #CCCCCC;
	border-bottom:1px solid #CCCCCC;
	padding:0.5em;
}



/* 属性データ定義入力 */
.attr-node-root
{
	border-bottom:1px solid #EEEEEE;
}
.attr-node-root .attr-node
{
	display: grid;
	grid-template:
	" current current " auto
	" .....   child " auto
	/ 1.0em 1fr;
}
.attr-node-root .attr-node .current-node
{
	grid-area: current;

	display: grid;
	grid-template:
	" mark label " auto
	/ auto 1fr;

	padding:0.25em 0;
}
.attr-node-root .attr-node .current-node .current-node-mark
{
	grid-area: mark;
	display: grid;
	place-items: center;
}
.attr-node-root .attr-node .current-node .current-node-label
{
	grid-area: label;
}
.attr-node-root .attr-node .child-node
{
	grid-area: child;
}