/*
Copyright (c) 2024 Revolme.Lab Yamasaki Masaki
デザインCSS
*/
:root {
	--base-font-size-pc:14; /* 文字サイズ(パソコン) */
	--base-font-size-tb:14; /* 文字サイズ(タブレット) */
	--base-font-size-sp:14; /* 文字サイズ(スマートフォン) */
	--base-display-width-sp:320; /* スマートフォン想定画面幅 */

    --focus-color:#485fc7; /* 標準UIフォーカス */
    --error-color:#f14668; /* 標準UI警告*/

    --theme-color:#299ec4;

    --font-color-reverse:#FFFFFF;
    --font-color-note:#999999;
    --font-color-danger:#FFFFFF;

    --theme-glay:#EEEEEE;
    --theme-white:#FFFFFF;

    --border-default-color:#CCCCCC;
    --valid-color:#32a852;
    --invalid-color:#a83232;
}

/* **************** */
/* Google Icons     */
/* **************** */
.icon.material-symbols-outlined {
    font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;

    vertical-align: middle;
    font-size: 1.5em;
    user-select: none;
}
.icon.valid
{
    color:var(--valid-color);
}
.icon.invalid
{
    color:var(--invalid-color);
}
.icon.theme
{
    color:var(--theme-color);
}

/* **************** */
/* 初期化前シールド  */
/* **************** */
#initedShield .ball-scale-multiple > div
{
    background-color: var(--theme-color);
}
/* **************** */
/* 通信中シールド    */
/* **************** */
#loadingShield .ball-pulse > div
{
    background-color: var(--theme-color);
}


/* **************** */
/* 基本レイアウト    */
/* **************** */
#global-header-contents
{
    background-color:var(--theme-color);
    color:var(--font-color-reverse);
    font-size:0.8em;
    padding:0.25em 0.25em;
}
#header-contents
{
    background-color:var(--theme-glay);
    padding:0.5em 0.5em 0.5em 1.0em;
}
#header-contents .header-title
{
    border-left:0.25em solid var(--theme-color);
    padding-left:0.5em;
}
#header-contents .header-title h1
{
    font-size:1.4em;
    font-weight:bold;
    line-height:1.2;
}
#header-contents .header-title p
{
    margin-top:0.5em;
    font-size:0.8em;
    font-weight:normal;
    color:var(--font-color-note);
}
#global-navi-contents
{
    border-right:1px solid var(--theme-glay);
    height:100%;
    background-color:var(--theme-white);
}
#main-contents {
    padding:1.0em;
}
#main-contents.centering {
    display: grid;
    place-items: center;
}
#global-footer-contents
{
    background-color:var(--theme-color);
    color:var(--font-color-reverse);
    font-size:0.8em;
    padding:0.25em 0.25em;
}

/* グローバルナビ */
#global-navi-contents .global-navi-title
{
    padding:1.0em;
}

#global-navi-contents .global-navi-title .mobileMenu
{
    display:none;
    width:3em;
    height:3em;
    
    position:absolute;
    top:50%;
    right:1.5em;
    transform:translateY(-50%);

    text-align:center;
}
#global-navi-contents .global-navi-title .mobileMenu > span:nth-child(1),
#global-navi-contents .global-navi-title .mobileMenu > span:nth-child(2),
#global-navi-contents .global-navi-title .mobileMenu > span:nth-child(3)
{
    display:block;
    width:80%;
    height:1px;
    margin:0 auto;
    background-color:var(--theme-color);
    position:absolute;

    transition-delay:0s;
    transition-duration:0.3s;
    transition-property:all;
    transition-timing-function:ease;
}
#global-navi-contents .global-navi-title .mobileMenu > span:nth-child(1)
{
    top:10%;
    left:0;
    right:0;
}
#global-navi-contents .global-navi-title .mobileMenu > span:nth-child(2)
{
    top:35%;
    left:0;
    right:0;
}
#global-navi-contents .global-navi-title .mobileMenu > span:nth-child(3)
{
    top:60%;
    left:0;
    right:0;
}
#global-navi-contents .global-navi-title .mobileMenu > span:nth-child(4)
{
    display:block;
    width: 100%;
    position:absolute;
    bottom:0;
    font-size: 0.8em;
    text-align:center;
}

#global-navi-contents .user-card
{
    width:100%;
    
    border-radius:0.5em;
    padding:0.5em;
    background-color:var(--theme-glay);

    display: grid;
    grid-template:
      "face ..... ..... "1fr
      "face ..... role  "auto
      "face ..... name  "auto
      "face ..... ..... "1fr
      /auto 0.5em 1fr;
}
#global-navi-contents .user-card .user-card__face
{
    grid-area: face;
    display: grid;
    place-items: center;
}
#global-navi-contents .user-card .user-card__role
{
    grid-area: role;
    font-size:0.6em;
}
#global-navi-contents .user-card .user-card__name
{
    grid-area: name;
}
#global-navi-contents ul.navi
{
    list-style: none;
    border-top:1px solid var(--theme-glay);
    margin:0 0;
}
#global-navi-contents ul.navi > li
{
    border-bottom:1px solid var(--theme-glay);
    margin:0 0;
}
#global-navi-contents ul.navi ul.navi
{
    margin-left:1.0em;
    font-size:0.9em;
    display:none;
}
#global-navi-contents ul.navi ul.navi > li:last-child
{
    border-bottom:0px solid var(--theme-glay);
}
#global-navi-contents ul.navi > li .navi__item
{
    width:100%;
    padding:0.5em;
    display: grid;
    grid-template:
    "icon ..... ..... accor "1fr
    "icon ..... main  accor "auto
    "icon ..... sub   accor "auto
    "icon ..... ..... accor "1fr
    /auto 0.5em 1fr   auto;

    text-decoration:none;
    align-items:normal;
    cursor: pointer;
}
#global-navi-contents ul.navi > li .navi__item:hover,
#global-navi-contents ul.navi > li .navi__item.active
{
    background-color:var(--theme-glay);
}
#global-navi-contents ul.navi > li .navi__item .navi__item-icon
{
    grid-area: icon;
    display: grid;
    place-items: center;
    color:var(--font-color-note);
}
#global-navi-contents ul.navi > li .navi__item:hover .navi__item-icon,
#global-navi-contents ul.navi > li .navi__item.active .navi__item-icon
{
    color:var(--theme-color);
}
#global-navi-contents ul.navi > li .navi__item .navi__item-label-main
{
    grid-area: main;
}
#global-navi-contents ul.navi > li .navi__item .navi__item-label-sub
{
    grid-area: sub;
    font-size:0.8em;
    color:var(--font-color-note);
}
#global-navi-contents ul.navi > li .navi__item .navi__item-accor
{
    grid-area: accor;
    display: grid;
    place-items: center;
    color:var(--font-color-note);
}
#global-navi-contents ul.sub-navi
{
    list-style: none;
    border-top:1px solid var(--theme-glay);
    margin:0 0;
    font-size:0.9em;
}
#global-navi-contents ul.sub-navi > li
{
    border-bottom:1px solid var(--theme-glay);
    margin:0 0;
}
#global-navi-contents ul.sub-navi > li .navi__item
{
    width:100%;
    padding:0.5em;
    display: grid;
    grid-template:
    "icon ..... ..... accor "1fr
    "icon ..... main  accor "auto
    "icon ..... sub   accor "auto
    "icon ..... ..... accor "1fr
    /auto 0.5em 1fr   auto;

    text-decoration:none;
    align-items:normal;
    cursor: pointer;
}
#global-navi-contents ul.sub-navi > li .navi__item:hover,
#global-navi-contents ul.sub-navi > li .navi__item.active
{
    background-color:var(--theme-glay);
}
#global-navi-contents ul.sub-navi > li .navi__item .navi__item-icon
{
    grid-area: icon;
    display: grid;
    place-items: center;
    color:var(--font-color-note);
}
#global-navi-contents ul.sub-navi > li .navi__item:hover .navi__item-icon,
#global-navi-contents ul.sub-navi > li .navi__item.active .navi__item-icon
{
    color:var(--theme-color);
}
#global-navi-contents ul.sub-navi > li .navi__item .navi__item-label-main
{
    grid-area: main;
}
#global-navi-contents ul.sub-navi > li .navi__item .navi__item-label-sub
{
    grid-area: sub;
    font-size:0.8em;
    color:var(--font-color-note);
}
#global-navi-contents ul.sub-navi > li .navi__item .navi__item-accor
{
    grid-area: accor;
    display: grid;
    place-items: center;
    color:var(--font-color-note);
}
@container sp-layout (width > 1px) {
    #global-navi-contents ul.navi
    {
        display: none;
    }
    #global-navi-contents ul.sub-navi
    {
        display: none;
    }

    #global-navi-contents .global-navi-title .mobileMenu
    {
        display:block;
    }
    #global-navi-contents.show ul.navi
    {
        display: block;
    }
    #global-navi-contents.show ul.sub-navi
    {
        display: block;
    }
    #global-navi-contents.show .global-navi-title .mobileMenu > span:nth-child(1)
    {
        transform:rotate(45deg);
        top:35%;
    }
    #global-navi-contents.show .global-navi-title .mobileMenu > span:nth-child(2)
    {
        opacity: 0.0;
    }
    #global-navi-contents.show .global-navi-title .mobileMenu > span:nth-child(3)
    {
        transform:rotate(-45deg);
        top:35%;
    }
}

/* サブ機能メニュー */
.sub-function
{
    border: 1px solid var(--border-default-color);
    border-radius: 0.5em;

    display: flex;
    align-items: center;
    margin-bottom: 1.0em;
    padding:0.25em;

    overflow-x: auto;
}
.sub-function > span
{
    flex: 1 1 auto;
}
.sub-function > label
{
    flex: 0 0 auto;
}
.sub-function > .button
{
    flex: 0 0 auto;
    margin:0.25em;

    font-size:0.8em;
}

/* 機能別メインメニュー */
.main-ope
{
    display: flex;
    align-items: center;
    margin: -0.25em;
    margin-bottom: 0.75em;
}
.main-ope > span
{
    flex: 1 1 auto;
}
.main-ope > .button
{
    flex: 0 0 auto;
    margin:0.25em;
}

/* ボタンリスト */
.button-list
{
    display: flex;
    align-items: center;
    margin: -0.25em;
}
.button-list.button-list-right
{
    justify-content: flex-end;
}
.button-list > span
{
    flex: 1 1 auto;
}
.button-list > .button
{
    flex: 0 0 auto;
    margin:0.25em;
}


/* 汎用BOXレイアウト */
.box
{
    box-shadow: 0px 0px 0px 1px #00000030;
    border-radius:0.25em;
    overflow: hidden;
}
.box > * + *
{
    margin-top:1.0em;
}
.box .box__title
{
    padding:0.5em;
    background-color: var(--theme-glay);
    border-bottom:0.2em solid var(--theme-color);

    display: grid;
    grid-template:
    "icon ..... ..... menu "1fr
    "icon ..... main  menu "auto
    "icon ..... sub   menu "auto
    "icon ..... ..... menu "1fr
    /auto 0.5em 1fr   auto;
}
.box .box__title .box__title-icon
{
    grid-area: icon;
    display: grid;
    place-items: center;
    color:var(--theme-color);
    font-size:1.5em;
}
.box .box__title .box__title-label-main
{
    grid-area: main;
    font-size:1.2em;
    font-weight:bold;
}
.box .box__title .box__title-label-sub
{
    grid-area: sub;
    font-size:0.8em;
    color:var(--font-color-note);
}
.box .box__title .box__title-menu
{
    grid-area: menu;
}
.box .box__sub-title
{
    margin-left:0.5em;
    margin-right:0.5em;
}
.box .box__sub-title .box__sub-title-label-main
{
    border-left:0.25em solid var(--theme-color);
    padding-left: 0.4em;
    font-weight:bold;
}

.box .box__contents
{
    margin-left:0.5em;
    margin-right:0.5em;
}

.box .box__contents_tab
{
    margin-left:0.5em;
    margin-right:0.5em;
    border-bottom:1px solid #CCCCCC;
}
.box .box__contents_tab .button-list .button
{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.box .box__footer
{
    padding:0.5em;
    background-color: var(--theme-glay);
    border-top:1px solid var(--theme-color);
}
.box + .box 
{
    margin-top: 1.0em;
}

/* 汎用BOXレイアウト */
.flex-12
{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin:-0.5em;
}
.flex-12__cell {margin:0.5em;}
.cell-1  {flex:0 0 calc(  8.33333% - 1.0em);}
.cell-2  {flex:0 0 calc( 16.66667% - 1.0em);}
.cell-3  {flex:0 0 calc( 25.00000% - 1.0em);}
.cell-4  {flex:0 0 calc( 33.33333% - 1.0em);}
.cell-5  {flex:0 0 calc( 41.66667% - 1.0em);}
.cell-6  {flex:0 0 calc( 50.00000% - 1.0em);}
.cell-7  {flex:0 0 calc( 58.33333% - 1.0em);}
.cell-8  {flex:0 0 calc( 66.66667% - 1.0em);}
.cell-9  {flex:0 0 calc( 75.00000% - 1.0em);}
.cell-10 {flex:0 0 calc( 83.33333% - 1.0em);}
.cell-11 {flex:0 0 calc( 91.66667% - 1.0em);}
.cell-12 {flex:0 0 calc(100.00000% - 1.0em);}

/* 検索結果テーブル*/
table.result-list
{
    width:100%;
	border-spacing:0px;
	border-collapse:separate;
	border:0px solid transparent;
	border-top:1px solid var(--border-default-color);
}
table.result-list th,
table.result-list td
{
	width:10px;
	white-space:nowrap;
	padding:0.5em;
	border:0px solid transparent;
	background-color: var(--theme-white);
	border-bottom:1px solid var(--border-default-color);
}
table.result-list thead tr th
{
	font-size: 0.8em;
}
table.result-list tr th.check,
table.result-listle tr td.check
{
	width:1px;
}
table.result-list tr th.flex,
table.result-list tr td.flex
{
	width:auto;
	max-width:100%;
}
.search-result.no-scroll > table tr td.flex
{
	white-space:unset;
}
table.result-list tr th.prop,
table.result-list tr td.prop
{
	font-size: 0.8em;
}
table.result-list tr th.num,
table.result-list tr td.num
{
	min-width:6em;
}
table.result-list tr th.num2,
table.result-list tr td.num2
{
	min-width:10em;
}
table.result-list tr th.ope,
table.result-list tr td.ope
{
	position: sticky;
	right:0px;
    vertical-align: middle;
	padding:0 0.5em;
}
table.result-list tr th.ope button,
table.result-list tr td.ope button
{
	font-size:0.8em;
}

table.result-list tbody tr:hover th,
table.result-list tbody tr:hover td
{
	background-color: var(--theme-glay);
}

/* ページネーション */
.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.9em;
}
.paginate > .button
{
	font-size:0.8em;
}

/* スペックテーブル*/
table.spec-list
{
    width:100%;
	border-spacing:0px;
	border-collapse:separate;
	border:0px solid transparent;
	border-top:1px solid var(--border-default-color);
	border-left:1px solid var(--border-default-color);
}
table.spec-list th,
table.spec-list td
{
	padding:0.5em;
	border:0px solid transparent;
	background-color: var(--theme-white);
	border-bottom:1px solid var(--border-default-color);
	border-right:1px solid var(--border-default-color);
}
table.spec-list tr th
{
	width:10px;
	white-space:nowrap;
    background-color: var(--theme-glay);
}
table.spec-list tr th.check,
table.spec-listle tr td.check
{
	width:1px;
}
table.spec-list tr th.flex,
table.spec-list tr td.flex
{
	width:auto;
	max-width:100%;
}

table.spec-list tr th.prop,
table.spec-list tr td.prop
{
	font-size: 0.8em;
}
table.spec-list tr th.num,
table.spec-list tr td.num
{
	min-width:6em;
}
table.spec-list tr th.num2,
table.spec-list tr td.num2
{
	min-width:10em;
}
table.spec-list tr th.ope,
table.spec-list tr td.ope
{
	position: sticky;
	right:0px;
    vertical-align: middle;
	padding:0 0.5em;
}
table.spec-list tr th.ope button,
table.spec-list tr td.ope button
{
	font-size:0.8em;
}

table.spec-list tbody tr:hover th,
table.spec-list tbody tr:hover td
{
	background-color: var(--theme-glay);
}

/* マスタ選択 */
.dialog-body.master-list
{
    display: grid;
	grid-template:
	  "search " auto
	  "list   " auto
	  / 100% ;
}
.dialog-body.master-list .search-keyword
{
	grid-area: search;
    position:sticky;
    top:0;
    background-color: #FFFFFF;
    padding:0.25em;
}
.dialog-body.master-list ul
{
	grid-area: list;
    list-style: none;
    margin: 0;
    padding: 0;
}
.dialog-body.master-list ul > li
{
    margin: 0;
    padding:0.5em;
    border-bottom: 1px solid var(--border-default-color);
    cursor:pointer;
    display: flex;
    align-items: center;
}
.dialog-body.master-list ul > li:hover
{
    background-color: var(--theme-glay);
}
.dialog-body.master-list ul > li > span
{
    flex:1 0 auto;
}

/* タグ一覧 */
ul.tag
{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    padding:0;
    margin:-0.25em;
    font-size:0.8em;
    list-style: none;
}

ul.tag li
{
    flex:0 0 auto;
    margin:0.25em;
    padding:0.25em 0.5em;

    border-radius: 0.25em;
    border:1px solid var(--border-default-color);
    background-color:var(--theme-glay);
    
    list-style: none;
}

/* 圧縮表示 */
.compress
{
    max-height:5.5em;
    overflow: hidden;
}
.compress > .toggle
{
    cursor: pointer;
    position:absolute;
    bottom:0;
    height: 2.5em;
    text-align: center;
    width:100%;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
}
.compress > .toggle::after
{
    content: "+ Open";
    font-weight: bold;
}
.compress.show
{
    max-height:none;
    padding-bottom:3.0em;
}
.compress.show > .toggle
{
    background: none;
}
.compress.show > .toggle::after
{
    content: "- Close";
    font-weight: bold;
}

/* ファイル一覧*/
ul.file-list
{
    margin: 0.0em;
    padding: 0.0em;
    list-style: none;
}
ul.file-list > li
{
    margin: 0.0em;
    padding: 0.0em;
    list-style: none;
    margin-bottom: 0.5em;

    display: grid;
    grid-template:
    "file_name ..... ope "1fr
    /1fr       0.5em auto;
}
ul.file-list > li .file_name
{
    grid-area: file_name;
    display: flex;
    align-items: center;
}
ul.file-list > li .ope
{
    grid-area: ope;
}