@charset "utf-8";

/*=====================================

style.css

=====================================*/
body#systemListBody{
    position: relative;
    height: auto;
    width: auto;
    background-color: transparent;
}
#wrapper.systemListWrapper{
    overflow: auto;
    background-color: transparent;
}

#alertMsg{
    z-index: 101;
    position: fixed;
    background-color: #fff;
    border-radius: 5px;
    padding: 7px 30px;
    width: fit-content;
    box-shadow: 0px 0px 10px 2px rgba(59, 59, 59, 0.21);
    font-size: 12px;
    /* 実際に出るのはほぼ「◯◯ successfully」の完了通知なので、警告色ではなく本文色にする。 */
    color: #181818;
    font-weight: bold;
    bottom: 20px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    display: none;
}



.displayNone{
    display: none !important;
}
header {
    background-color: #FFEA28;
    position: fixed;
    z-index: 1;
    width: 100%;
}
.headerLogo {
    width: 150px;
    height: 70px;
    background-color: #FFEA28;
    box-sizing: border-box;
    padding: 17px;
    position: relative;
    /* box-shadow: 0px 0px 28px 9px #eaf2f6; */
}
/* Lite版であることを示すタグ。ロゴ枠の固定幅に収める必要が無いよう、枠の右外側に
   絶対配置で添える（ロゴ画像自体のサイズやレイアウトには影響しない）。 */
.liteBadge {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 8px;
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    background-color: #181818;
    color: #fff;
    white-space: nowrap;
}
.accountIcon {
    overflow: hidden;
    width: 40px;
    height: 40px;
    position: absolute;
    right: 15px;
    top: 15px;
    border-radius: 100px;
}
#screenshot .djs-palette{
    display: none !important;
}
.modaal-container{
    border-radius: 5px;
}
.modaal-container .formGroup{
    margin-bottom: 15px;
    min-width: 340px;
}
.modaal-container .formGroup input{
    font-size: 15px;
    padding: 5px;
    
}
.modaal-container .formGroup .select{
    font-size: 15px;
    padding: 5px;
}
.modaal-container{
    width: fit-content;
}

.settingIcon{
    width: 70px;
    height: 70px;
    box-sizing: border-box;
    padding: 20px;
    position: absolute;
    bottom: 0;
    box-shadow: 0px 0px 28px 9px #f9f9f9;
}
.sideNav li.current {
    box-shadow: 0px 10px 18px 1px #f9f9f9;
    background-color: #FFF;
}
.sideNav li {
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
}
.sideNav li a{
    padding: 15px;
    display: block;
}
.sideNav li .icon{
    padding: 8px;
}
.sideNav {
    font-size: 8px;
    text-align: center;
}


main {
    height: calc(100vh - 70px);
    background-color: #F8F8F8;
    padding: 2%;
    margin-left: 70px;
    margin-top: 70px;
    overflow: auto;
}

main.systemList{
    height: auto;
    background-color: #FFF;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
}

main::-webkit-scrollbar{
    display: none;
  }

nav.sideNav {
    position: fixed;
    left: 0;
    width: 70px;
    min-height: calc(100vh - 70px);
    background-color: #FFF;
    margin-top: 70px;
}

.contents12Box{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: 2vw;
    row-gap: 2vw;
}
.contents12BoxInner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: 3%;
    padding: 3%;
}
.bgWhite{
    background-color: #FFF;
    border-radius: 5px;
}
.clm1{
    grid-column: span 1;
}
.clm2{
    grid-column: span 2;
}
.clm3{
    grid-column: span 3;
}
.clm4{
    grid-column: span 4;
}
.clm5{
    grid-column: span 5;
}
.clm6{
    grid-column: span 6;
}
.clm7{
    grid-column: span 7;
}
.clm8{
    grid-column: span 8;
}
.clm9{
    grid-column: span 9;
}
.clm10{
    grid-column: span 10;
}
.clm11{
    grid-column: span 11;
}
.clm12{
    grid-column: span 12;
}
section{
    margin-bottom: 20px;
}
.profileBox .icon {
    box-sizing: border-box;
    border-radius: 200px;
    overflow: hidden;
    margin-bottom: 10px;
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
}
.profileBox .name{
    font-weight: bold;
    text-align: center;
    margin-bottom: 5px;
}
.profileBox .company{
    text-align: center;
}

.grid12{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: 2%;
}
.fltLouter div{
    float: left;
    margin-right: 3%;
}
.fltLouter::after{
    content: '';
    clear: both;
    display: block;
}
.projectIndexContents {
    padding: 3%;
    position: relative;
}

.projectIndexContents .title{
    font-size: 2rem;
    font-weight: 600;
    font-family: 'Noto Sans JP';
}
.projectIndexContents .author,
.projectIndexContents .viewer,
.projectIndexContents .editor,
.projectDetail .author,
.projectDetail .viewer,
.projectDetail .editor{
    margin-bottom: 20px;
    color: #999;
}
a.primary {
    background-color: #FFEA28;
    color: #181818;
    border-radius: 100px;
    padding: 12px 10px 10px;
    display: block;
    text-align: center;
    border: solid 1px #181818;
    line-height: 1;
}
a.mini {
    padding: 10px;
    color: #777;
    display: inline-block;
    float: right;
    font-size: 13px;
}



.projectDetailProcessList{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 20px;
    row-gap: 20px;
}
.projectDetailProcessList .processThum {
    overflow: hidden;
    border-radius: 3px;
    margin-bottom: 10px;
    border: solid 1px #dcdcdc;
    padding: 10px;
}
.projectDetailProcessList{

}
.processAreaContents h3 {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 25px;
}
.processAreaList{
    padding-top: 30px;
}
.processAreaContents h4 {
    font-size: 1.2rem;
    text-align: center;
    color: #999;
}
.processAreaListViewContents ul li{
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: solid 1px #dcdcdc;
}
.processListViewContent{
    margin-bottom: 20px;
}
.processAreaListViewContents h3{
    margin-bottom: 10px;
    font-weight: bold;
}
*::placeholder{
    color: #999;
}

input[type="checkbox"]{
    display: inline-block;
    -webkit-appearance: checkbox;
    margin-right: 5px;
}
h2{
    margin-bottom: 15px;
    font-weight: 500;
    font-size: 22px;
    color: #181818;
}
h2.projectTopTitle {
    margin-bottom: 25px;
    font-weight: 500;
    font-size: 22px;
    color: #181818;
    width: fit-content;
    position: relative;
    padding-right: 40px;
}
.editIcon {
    width: 20px;
    height: 20px;
    background-image: url(../images/icon_edit.svg);
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    position: absolute;
    top: 2px;
    right: 0;
}
.editIcon a{
    width: 100%;
    height: 100%;
    display: block;
}

.editIconProcess {
    width: 10px;
    height: 10px;
    background-image: url(../images/icon_edit.svg);
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    position: absolute;
    top: 9px;
    left: 118px;
    z-index: 100;
}
.editIconProcess a{
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}
/* アイコンの実寸は 10px しかなく、その周り一面が .processBox＝クリックでプロセス編集画面へ
   遷移する領域。少し外すと編集画面が開いてしまうので、見た目（背景画像のサイズ）はそのままに
   当たり判定だけを 32px 角へ広げる。z-index は親の .editIconProcess が 100 を持っており、
   この擬似要素はその中なので、広げた分は .processBox より前面でクリックを受ける。 */
.editIconProcess a::after{
    content: '';
    position: absolute;
    top: -11px;
    right: -11px;
    bottom: -11px;
    left: -11px;
}
.editIconProcessArea {
    width: 11px;
    height: 11px;
    background-image: url(../images/icon_edit.svg);
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 0;
    z-index: 100;
}
.editIconProcessArea a{
    width: 100%;
    height: 100%;
    display: block;
}




.headIcon {
    margin-right: 10px;
    display: inline-block;
    height: 25px;
    top: -4px;
    position: relative;
}

.projectDetail h2{
    color: #000;
    font-weight: 600;
    font-family: 'Noto Sans JP';
}
.projectDetail h2 .headIcon img {
    width: 34px;
}

.projectDetail {
    padding: 3%;
    position: relative;
}
.processAreaContents {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: solid 1px #dcdcdc;
}
.processAreaList .processAreaContents:first-child{
    border-top:solid 1px #dcdcdc;
    padding-top: 20px;
}
.projectDetail .collabolatorList ul {
    position: relative;
    right: 0;
    top: auto;
}
.projectDetail .collabolatorList ul li {
    float: right;
    margin-left: -10px;
}
.projectDetail .collabolatorList ul li .icon{
    border-radius: 100px;
    overflow: hidden;
}
.projectDetail .collabolatorList ul li img {
    width: 23px;
}

.projectIndex .collabolatorList ul {
    position: relative;
    right: 0;
    top: auto;
}
.projectIndex .collabolatorList ul li {
    float: right;
    margin-left: -10px;
}
.projectIndex .collabolatorList ul li .icon{
    border-radius: 100px;
    overflow: hidden;
}
.projectIndex .collabolatorList ul li img {
    width: 23px;
}

.projectDetail h2{
    margin-bottom: 0;
}
.processAreaList.acordion{
    display: none;
}
a.default{
    border-radius: 100px;
    padding: 11px 10px 9px 10px;
    display: block;
    text-align: center;
    border: solid 2px #FFEA28;
    color: #181818;
    background-color: #FFF;
    line-height: 1;
}

/* 別ページへ遷移する<a>リンクに付与するマーカークラス。
   モーダルを開く／AJAXで完結する操作（primary・default・mini はそのまま塗りつぶし等）と
   一目で区別できるよう、塗りつぶしをやめて枠線のみにし、末尾に矢印アイコンを添える。 */
a.pageLink {
    background-color: #FFF !important;
    border: solid 2px #181818 !important;
    color: #181818 !important;
    position: relative;
    padding-right: 32px !important;
}
a.pageLink::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 14px;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border-top: solid 2px #181818;
    border-right: solid 2px #181818;
    transform: rotate(45deg);
}
a.mini.pageLink {
    border: none !important;
    background-color: transparent !important;
    padding-right: 16px !important;
}
/* プロジェクト一覧の遷移・アクションボタンをまとめて右寄せする行。gap で間隔を取るので、
   btnInlineBlock の margin-left（float 前提の旧レイアウト用）は打ち消す。 */
.projectActionsRow a.btnInlineBlock{
    margin-left: 0;
}
/* 鳥瞰図一覧（project_birdeye_embed.php）の各行にある「Edit」（class="primary" のみ、
   clm2セル内で display:block により幅いっぱいに広がる）と横幅を揃える
   （プロジェクト一覧・Users一覧のEditボタン共通）。flex行・td内どちらでも同じ見た目になるよう
   固定幅にする。 */
/* a.primary は display:block（0,1,1）で定義されているため、.editBtnWide 単体（0,1,0）では
   display を上書きできない。td内で text-align:center が効くよう a.editBtnWide（0,1,1・
   こちらが後勝ち）で inline-block にする——flex行（.projectActionsRow）側は、flexアイテムの
   実際のレイアウトは表示形式の指定に関係なくflexの整形コンテキストが決めるため、この変更で
   崩れない。 */
a.editBtnWide{
    display: inline-block;
    width: 160px;
    flex-shrink: 0;
}

/* 自分より上位のロールのユーザーは編集不可（Users一覧のEditボタン）。 */
a.editBtnWide.isDisabled{
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

a.mini.pageLink::after {
    right: 2px;
    width: 5px;
    height: 5px;
    margin-top: -4px;
    border-top-color: #777;
    border-right-color: #777;
}

.djs-palette {
    left: 0px !important;
    top: 0 !important;
    bottom: 0 !important;
    margin-top: auto;
    margin-bottom: auto;
    height: fit-content;
}


input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], select, textarea, textarea.form-control, select {
    height: auto;
    margin: 0;
    padding: 5px 10px;
    vertical-align: middle;
    font-size: 10px;
    font-weight: normal;
    line-height: 24px;
    color: #000000;
    border-radius: 5px;
    -o-transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
    border: solid 1px #C4C4C4;
    display: block;
    width: 100%;
    line-height: 1.5;
    background-color: #FFF;
}

button{
    padding: 8px 10px;
    text-align: center;
    background-color: #000;
    color: #FFF;
    border: none;
    display: block;
    width: 100%;
    cursor: pointer;
    border-radius: 3px;
}
button:disabled{
    background-color: #BFBFBF;
    color: #FFF;
    cursor: not-allowed;
}


.formGroup label {
    display: block;
    font-size: 11px;
    font-weight: 600;
}
.mainLayoutBox{
    padding: 4%;
    display: grid;
    grid-template-columns: 1fr 20%;
    column-gap: 4%;
}
.inputBox{
    padding: 4%;
}

table{
    border-collapse: collapse;
    border: solid 1px #dcdcdc;
    width: 100%;

}
table tr{
    border-collapse: collapse;
    border: solid 1px #dcdcdc;
    
}
table td{
    border-collapse: collapse;
    border: solid 1px #dcdcdc;
    padding: 10px;
}
table th{
    border-collapse: collapse;
    border: solid 1px #dcdcdc;
    padding: 10px;
    text-align: center;
    font-weight: bold;
}
h1{
    font-size: 28px;
}
.formGroupWrapper{
    margin-bottom: 0;
    max-width: fit-content;
}
.modaal-wrapper .formGroupWrapper{
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
}


.tableGroupWrapper{
    margin-bottom: 60px;
}

ul.projectList li{
    margin-bottom: 10px;
}

#screenshot .djs-palette.two-column.open {
    display: none;
}

body#screenshot {
    overflow: hidden;
}

.modaalHide{
    display: none;
}

/* プロジェクト画面⇄鳥瞰図一覧画面⇄Consistency Checkの切り替えタブ（inc/project_tabs.php）。
   実体は通常のページ遷移だが、見た目をタブにして「同じプロジェクトの別ビュー」だと
   分かりやすくする。Export（別タブでPDF出力を開くだけのアクション）はタブには含めず、
   行の右端に独立したボタンとして併せて表示する。 */
.projectTabBar{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid #dcdcdc;
    margin-bottom: 20px;
}
.projectTabBarTabs{
    display: flex;
    gap: 4px;
}
.projectTabBarTabs a{
    display: inline-block;
    padding: 10px 20px 8px;
    font-size: 14px;
    font-weight: 600;
    color: #999;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}
.projectTabBarTabs a:hover{
    color: #181818;
}
.projectTabBarTabs a.active{
    color: #181818;
    border-bottom-color: #FFEA28;
}
/* ボタンではなく、タブと同じ「文字リンク・ホバーで濃くなる」見た目にする
   （ボタン感を消し、タブの並びに馴染ませるため）。 */
.projectTabBarExport{
    display: inline-block;
    padding: 10px 4px 8px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #999;
    text-decoration: none;
}
.projectTabBarExport:hover{
    color: #181818;
}
/* Claude設定タブの「Plan Setting」（inc/claude_settings_tabs.php）。原価・マークアップ倍率という
   秘匿情報を扱う platform_admin 限定タブなので、他の文字リンク然としたタブとは見た目を変え、
   バッジ状にして誤操作防止のため目立たせる。非選択時はグレー、選択中（このタブを開いている
   状態）だけ黒にする——常に黒だと「選ばれている状態」に見えて紛らわしいため。 */
.projectTabBarTabs a.claudeTabPlanSetting{
    background: #999;
    color: #fff;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-color: transparent;
}
.projectTabBarTabs a.claudeTabPlanSetting:hover{
    background: #777;
    color: #fff;
}
.projectTabBarTabs a.claudeTabPlanSetting.active{
    background: #181818;
    color: #fff;
    border-bottom-color: #FFEA28;
}

.createProcessAreaBox{
    margin-top: 40px;
}
.createProcessBox{
    float: right;
}


button.btnInlineBlock, a.btnInlineBlock {
    display: inline-block;
    padding-left: 30px;
    padding-right: 30px;
    margin-left: 13px;
    font-size: 13px;
}

.logoutLink{
    position: absolute;
    right: 80px;
    top: 27px;
}
.userNameBox{
    position: absolute;
    right: 80px;
    top: 27px;
}









/*-------------------------------------
 login
-------------------------------------*/
#wrapper.login {
    background-color: #f9f9f9;
    min-height: 100vh;
}


#wrapper.login{
    background-color: #FFEA28;
    min-height: 100vh;
}
.loginArea {
	max-width: 400px;
	margin: 0 auto;
    padding-top: 60px;
}
.loginHead {
	margin: 0 0 35px;
	text-align: center;
}
.loginLogo img {
    width: 190px;
}
.loginTitle {
    padding: 5px 0 0;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}
.loginBox p{
    text-align: center;
    margin-bottom: 15px;
}
.loginBox {
	margin: 0 0 20px;
	padding: 30px 20px;
	border-radius: 10px;
	background: #fff;
}
.loginInput dt {
	margin: 0 0 8px;
}
.loginInput dd {
	margin: 0 0 20px;
}
.loginInput input {
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 5px 15px;
	border-radius: 10px;
	border: none;
	background: #F5F7F9;
}
.loginBtn {
    display: block;
	padding: 10px 0 0;
    text-align: center;
}
.loginBtn p {
	font-weight: 500;
}
.loginBtn p input[type=checkbox] {
	width: 16px;
	height: 16px;
	margin: 2px 5px 0 0;
	vertical-align: top;
	border: 1px solid var(--color03);
}
.loginBtn .submit {
	width: 100%;
	height: 50px;
	cursor: pointer;
	color: #fff;
	font-weight: bold;
	border-radius: 10px;
	border: none;
	background: #181818;
    background-image: url(../images/icn_arw_y02.svg);
    background-position: right 15px center;
    background-repeat: no-repeat;
    background-size: 15px;
}

/*
.djs-connection .djs-visual > :nth-child(1) {
    stroke-dasharray: 5, 5;
}*/
/*
rect::after{
    content: '';
    width: 30%;
    height: 2px;
    position: absolute;
    bottom: 10%;
    background-color: #000;  
}
*/

.djs-visual.productLast > rect:not(.bar){
    stroke: #000 !important;
    fill: #E2E2E2 !important;
}
.djs-visual.productLast > rect::after{
    display: block;
    width: 50%;
    height: 2%;
    background-color: #000;
    content: '';
    position: absolute;
    bottom: 20%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}
.djs-visual  > path{
    stroke-dasharray: 0 !important;
}
.djs-visual.productNoEntity > rect{
    stroke-dasharray: 5 5 !important;
}
.djs-visual > image.milestoneBar {
    display: none;
}
.djs-visual.flowMilestoneEntity > image.milestoneBar {
    display: block;
}


#bpmn2cBox{
    display: grid;
    /* grid-template-columns: 1fr 220px; */
    background-color: #FFF;
    column-gap: 15px;
}
#nodeInfomation {
    background-color: #FFF;
    padding: 0;
    border-left: #dcdcdc solid 1px;
    overflow: auto;
    max-height: 100vh;
}
#canvas{
    padding: 15px !important;
}

.djs-visual:not(.flowSinchroEntity) > path{
    /* marker-start:none !important; */
}

.djs-visual.flowSinchroEntity > path{
    stroke-dasharray: 5 5 !important;
    marker-start: url(#open-arrow-start) !important;
    marker-end: url(#open-arrow-end) !important;
}

.infomationBoxSection {
    margin-bottom: 5px;
}
.infomationBoxSection h5{
    font-weight: bold;
    font-size: 8px;
    margin-bottom: 5px;
}
.nodeInfomationInner {
    padding: 15px;
    border-bottom: 5px solid #f0f2f8;
}
.infomationBoxSection .attrInfoValue{
    font-size: 10px;
    word-break: break-all;
}

.nodeInfomationInner h4{
    margin-bottom: 3px;
    font-weight: bold;
}
.nodeInfomationInner select{
    font-size: 10px;
    line-height: 1.3;
    padding: 5px;
}
.nodeInfomationInner input{
    font-size: 10px;
    line-height: 1.3;
    padding: 5px;
}
.nodeInfomationInner textarea{
    font-size: 10px;
    line-height: 1.3;
    padding: 5px;
    min-height: 50px;
}
.nodeInfomationInner.otherProcessLastProduct{
    margin-bottom: 0;
}
.nodeInfomationInner button{
    padding: 5px;
}
button#fullScreen{
    background-color: #181818;
}
#attrProductInputSave,
#attrProductRelationInputSave{
    display: none;
}



.birdEyeBox {
    height: calc(100vh - 270px);
    overflow: auto;
    clear: both;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.birdEyeBox::-webkit-scrollbar {
    display:none;
}
.birdEyeExternalProcessList li{
    cursor: pointer;
}
.birdEyeProcessAreaBox h2 {
    font-size: 14px;
    margin-bottom: 10px;
    font-weight: bold;
    position: relative;
    width: fit-content;
    padding-right: 20px;
}
.birdEyeProcessAreaBox{
    position: relative;
}
.birdEyeProcessAreaBox a.deleteIcon{
    width: 15px;
    height: 15px;
    background-image: url(../images/icon_batsu.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
}
.birdEyeProcessAreaBox .processBox a.deleteIcon{
    width: 10px;
    height: 10px;
    right: 10px;
    top: 10px;
    z-index: 100;
}
.birdEyeExternalProcessList li{
    position: relative;
}
.birdEyeExternalProcessList a.deleteIcon{
    width: 15px;
    height: 15px;
    background-image: url(../images/icon_batsu.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
}
.birdEyeExternalProcessList a.deleteIcon{
    width: 10px;
    height: 10px;
    right: 5px;
    top: 5px;
    z-index: 100;
}

.birdEyeProcessAreaBox .processBox{
    cursor: pointer;
}
.birdEyeProcessAreaBox .deleteProcessAreaDo{
    right: 10px;
    top: 10px;
}

.birdEyeProcessAndSubProcess{
    /* margin-top: 30px; */
}

.birdEyeProcessAndSubProcess {
    display: flex;
    width: fit-content;
    gap: 20px;
}
.birdEyeBox .birdEyeProcessAreaBox {
    padding: 20px 20px 40px 20px;
    background-color: #f9f9f9;
    margin-bottom: 0px;
    border-radius: 10px;
    width: 460px;
}

.birdEyeBox .processWrappeBox {
    display: grid;
    grid-template-columns: 100px 200px 100px;
    column-gap: 2%;
    margin-bottom: 20px;
    position: relative;
}
.birdEyeBox .inputProcessBox{
    padding: 15px 0;
    font-size: 9px;
}
.birdEyeBox .inputProcessBox .inputProcessList{
    background-color: #FFF;
    margin-bottom: 10px;
    border-radius: 5px;
    padding: 5px;
    position: relative;
}
.birdEyeBox .inputProcessBox .inputProcessList .externalList{
    display: none;
    padding-top: 5px;
}
.birdEyeBox .inputProcessBox .externalWrap{
    position: relative;
}
.birdEyeBox .inputProcessBox .inputProcessList .externalTitle{
    cursor: pointer;
}
.birdEyeBox .inputProcessBox .inputProcessList.ex::after{
    content: 'ex';
    position: absolute;
    right: 0;
    top: 5px;
    right: 5px;
    color: #181818;
    display: none;
}
.birdEyeBox .inputProcessBox .externalList .inputProcessList{
    margin-bottom: 0;
    font-size: 8px;
}
/* 削除済み外部プロセスは取消線＋淡色で表示する（復活はさせない）。 */
.deletedExternalProcess{
    text-decoration: line-through;
    opacity: 0.6;
}

.birdEyeBox .processBox{
    padding: 10px;
    background-color: #FFF;
    border-radius: 5px;
    font-size: 12px;
    position: relative;
}
.birdEyeBox .processBox h3{
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}

.birdEyeBox .subProcessBox {
    border-bottom: dotted 1px #dcdcdc;
    margin-bottom: 10px;
    padding-bottom: 10px;
}
.birdEyeBox .subProcessBox:last-child{
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.birdEyeBox .subProcessBox h4 {
    font-size: 9px;
    text-align: center;
    margin-bottom: 5px;
    font-weight: 500;
}

.MilestoneProductList{
    font-size: 7px;
}
.MilestoneProductList li{
    margin-bottom: 3px;
}
.lastProductList{
    text-align: right;
    font-size: 8px;
}
.lastProductList li{
    margin-bottom: 3px;
}
.birdEyeBox .actorsList::before{
    background-image: url(../images/icon_actors.svg);
    width: 10px;
    height: 10px;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
}
.birdEyeBox .actorsList{
    /* アクターは絶対配置ではなく通常フローに置く。アクターが増えて複数行に
       なってもカードの高さが自動で伸び、サブプロセス領域へ侵食しないようにする。 */
    position: relative;
    font-size: 8px;
    text-align: center;
    padding-top: 15px;
    margin-top: 12px;
}
.birdEyeBox .actorsList li{
    display: inline-block;
    margin-left: 2px;
    margin-right: 2px;
    padding: 2px 6px;
    text-align: center;
    background-color: #f1f1f1;
    margin-bottom: 4px;
}

.addProcessAreaWrapper{
    min-height: 400px;
    min-width: 300px;
    display: flex;
}

.addProcessAreaWrapper a{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: dotted 2px #dcdcdc;
    padding: 30px;
    color: #181818;
    background-image: url(../images/icon_plus_gray.svg?v=2);
    background-repeat: no-repeat;
    background-position: center 57%;
    background-size: 15px;
}
/* プロセス追加ボタン。エリアカードの下端に絶対配置していたため、プロセスが増えるほど
   最後のカードから離れた。通常フローに戻して最後のプロセスの直下に置き、幅と左位置は
   .processWrappeBox のグリッド中央列（＝プロセスカード）に合わせる。 */
.birdEyeProcessAreaBox .createProcessBtn {
    display: block;
    box-sizing: border-box;
    margin-bottom: 20px;
    padding: 7px;
    text-align: center;
    color: #181818;
    background-image: url(../images/icon_plus_gray.svg?v=2);
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: 15px;
    border: dotted 1px #dcdcdc;
    /* .processWrappeBox は grid-template-columns: 100px 200px 100px / column-gap: 2%。
       中央列（プロセスカード）と同じ幅にし、左の入力列とgapのぶんだけ右へ寄せる。 */
    width: 200px;
    margin-left: calc(100px + 2%);
    font-size: 10px;
    background-color: #fcfcfc;
}

.birdEyeSystemExProcessBox {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 30px;
    position: fixed;
    right: -250px;
    /* プロジェクト名見出し（inc/project_title.php）がタブより上に来る並びになったぶん、
       固定位置をその高さ分（h2.projectTopTitle: 約54px）下げてExportボタンとの重なりを防ぐ。 */
    top: 222px;
    transition: 1s all;
    z-index: 100;
}
.birdEyeSystemExProcessBox.open{
    right: 0;
    
}
.birdEyeSystemList {

    
}
.birdEyeSystemList h2{
    background-color: #dcdcdc;
    padding: 10px;
}


.birdEyeSystemExProcessBox ul {
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
    position: -webkit-sticky;
    padding-bottom: 20px;
    column-gap: 5px;
    row-gap: 5px;
    width: 250px;
    background-color: #dcdcdc;
    padding: 2px 10px 10px 10px;
}

.birdEyeSystemExProcessBox ul.goal{
    grid-template-columns: 1fr;
}

.birdEyeSystemExProcessBox ul li {
    background-color: #f9f9f9;
    text-align: left;
    font-size: 10px;
    border-radius: 3px;
    position: relative;
}
.birdEyeSystemExProcessBox ul li a{
    display: block;
    padding: 6px 10px 6px 10px;
}
.birdEyeSystemExProcessBox ul li a::before{
    width: 10px;
    height: 10px;
    background-image: url(../images/icon_edit.svg);
    background-repeat: no-repeat;
    background-size: contain;
    content: '';
    position: absolute;
    right: 8px;
    top: 8px;
}
.birdEyeSystemExProcessBox ul li.createExProcessLi a::before{
    display: none;
}

/* システム一覧のドラッグ並び替え */
.birdEyeSystemExProcessBox ul li.existSystemis {
    cursor: grab;
}
.birdEyeSystemExProcessBox ul li.existSystemis:active {
    cursor: grabbing;
}
.birdEyeSystemExProcessBox ul li.existSystemis.dragging-item {
    opacity: 0.5;
    outline: 1px dashed #999;
}

.birdEyeSystemExProcessBox ul.goal li{
    text-align: left;
}

.birdEyeSystemExProcessBox h2::before{
    content: '＋';
    margin-right: 4px;
}
.birdEyeSystemExProcessBox h2 {
    margin-bottom: 0;
    padding: 10px 10px 10px 10px;
    font-size: 11px;
    right: 108px;
    cursor: pointer;
    transition: 1s all;
}
.birdEyeSystemExProcessBox.open h2 {
    right: 0;
}
.birdEyeSystemExProcessBox.open h2::before{
    content: 'ー';
}
.birdEyeSystemExProcessBox ul li.createExProcessLi{
    background-color: #FFF;
    text-align: center;
    background-image: url(../images/icon_plus_gray.svg?v=2);
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: 15px;
    border: dotted 1px #dcdcdc;
}
.birdEyeSystemExProcessBox ul li.createExProcessLi a{
    color: #181818;
    display: block;
}

#processEditEmbedWrapper{
position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 999;
    width: 98vw;
    height: 98vh;
    margin: auto;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 0px 0px 16px -8px #181818;
    border-radius: 3px;
    display: none;
}
#processEditEmbedWrapper::after{
    background: rgba(0,0,0, 0.3);
    width: 100vh;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    width: 100vw;
    height: 100vh;
    margin: auto;
    display: block;
    content: '';
    position: fixed;
}
#processEditEmbedWrapper iframe{
    width: 98vw;
    height: 98vh;
    border: none;
    display: block;
    z-index: 10000;
    position: relative;
}

/* 鳥瞰図編集キャンバスのiframeモーダル（project_birdeye_embed.php）。
   #processEditEmbedWrapper と同じ寸法・重なり方。 */
#birdEyeEditEmbedWrapper{
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 999;
    width: 98vw;
    height: 98vh;
    margin: auto;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 0px 0px 16px -8px #181818;
    border-radius: 3px;
    display: none;
}
#birdEyeEditEmbedWrapper.open{
    display: block;
}
#birdEyeEditEmbedWrapper::after{
    background: rgba(0,0,0, 0.3);
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    width: 100vw;
    height: 100vh;
    margin: auto;
    display: block;
    content: '';
}
#birdEyeEditEmbedWrapper iframe{
    width: 98vw;
    height: 98vh;
    border: none;
    display: block;
    z-index: 10000;
    position: relative;
}

/* 鳥瞰図キャンバスの中から開くプロセス編集モーダル（project_birdeye_embed.php、
   window.openProcessEditModal）。この鳥瞰図キャンバス自体が一覧画面から
   #birdEyeEditEmbedWrapper（98vw/98vh）でiframe表示されるようになったため、ここも同じ
   98vw/98vhにすると、iframeの中でさらに98%になり二重に小さくなってしまう。
   ここは余白・影を持たせず100%（iframeの中身いっぱい）にして、鳥瞰図編集画面と
   同じ大きさで開くようにする。 */
#birdEyeProcessEditEmbedWrapper{
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    display: none;
}
#birdEyeProcessEditEmbedWrapper iframe{
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    z-index: 10000;
    position: relative;
}

/* サンドボックス一覧画面（project_sandbox_embed.php）からプロセス編集画面を単層で開く
   iframeモーダル。project_detail.php の #processEditEmbedWrapper と同じ寸法・重なり方
   （fadeIn/fadeOutで開閉するので .open クラスは使わない）。 */
#sandboxProcessEditEmbedWrapper{
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 999;
    width: 98vw;
    height: 98vh;
    margin: auto;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 0px 0px 16px -8px #181818;
    border-radius: 3px;
    display: none;
}
#sandboxProcessEditEmbedWrapper::after{
    background: rgba(0,0,0, 0.3);
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    width: 100vw;
    height: 100vh;
    margin: auto;
    display: block;
    content: '';
}
#sandboxProcessEditEmbedWrapper iframe{
    width: 98vw;
    height: 98vh;
    border: none;
    display: block;
    z-index: 10000;
    position: relative;
}
.bigBatsu{
    background-color: #000;
    width: 40px;
    height: 40px;
    position: fixed;
    z-index: 100000;
    border-radius: 10000px;
    right: 2px;
    top: 2px;
    background-image: url(../images/icon_batsu_white.svg);
    background-size: 16px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}
/* 鳥瞰図キャンバスの中で開くプロセス編集モーダルの閉じるボタン。position:fixed は
   このモーダルが載っているiframe（#birdEyeProcessEditIframe）自身の表示領域までしか
   届かない（iframeの外＝親ページの真の右上隅までは出られない）。その制約の中で
   できるだけ右上に寄せる。 */
.closeBirdEyeProcessEditEmbed{
    right: 0;
    top: 0;
}


.fullscreen #nodeInfomation {
    padding: 40px 0 0 0px;
}

.editingProcessNameBox {
    /* The editor header now shows "番号. プロセス名" itself, so this overlay heading
       (still populated by api.js) is redundant — hide it. */
    display: none;
    z-index: 100000;
    position: fixed;
    top: 65px;
    font-size: 18px;
    font-weight: bold;
    width: 22%;
    left: 2%;
    right: auto;
    margin-left: auto;
    margin-right: inherit;
    padding: 0px;
    border: none;
    border-radius: 5px;
}
.birdEyeList2cBox{
    display: grid;
    grid-template-columns: 20% 1fr;
    column-gap: 10px;
    font-family: 'Noto Sans JP';
}

.birdEyeListView{
    background-color: #dcdcdc;
    padding: 20px;
    border-radius: 5px;
    height: calc(100vh - 210px);
    overflow: auto;
    clear: both;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
}

.processListViewContentBirdEye{
    margin-bottom: 1px;
    background-color: #f9f9f9;
    padding: 10px 15px;
    position: relative;
    transition: all .6s ease-out;
}

.processListViewContentBirdEye.exProcesses{
    background-color: #e9e9e9;
}
.processListViewContentBirdEye.canPopOut {
    position: fixed;
    left: 70px;
    background-color: #dcdcdc;
    padding: 12px;
    width: 200px;
    bottom: 0px;
}
.processListViewContentBirdEye.canPopOut.closed{
    bottom: calc((200px - 20px) * -1);
}

.processListViewContentBirdEye.canPopOut .closeIcon{
    background-image: url(../images/icon_batsu.svg);
    background-size: 11px;
    background-repeat: no-repeat;
    position: absolute;
    right: 0px;
    top: 0;
    width: 20px;
    height: 20px;
    right: -20px;
    cursor: pointer;
    background-color: #dcdcdc;
    background-position: center;
}
.processListViewContentBirdEye.canPopOut .ddGrabDotsProcess {
    right: 2px;
    top: 5px;
    width: 7px;
    height: 12px;
    cursor: grab;
}
.processListViewContentBirdEye.canPopOut ul li{
    padding: 4px;
    font-size: 9px;
    margin-bottom: 5px;
}
.processListViewContentBirdEye h3{
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: bold;
}
.processListViewContentBirdEye ul{
    min-height: 30px;
}
.processListViewContentBirdEye ul li{
    background-color: #FFF;
    padding: 5px;
    font-size: 10px;
    margin-bottom: 2px;
    cursor: grab;
    transition: all .6s ease-out;
    position: relative;
}
/* どの内部プロセスからも入力・出力されていない外部プロセス。
   図の上で意味を持たないので薄く見せて区別する（消しはしない——繋ぎ忘れのこともある）。
   判定は prep_project_json_get_connected_external_process_ids()。 */
.processListViewContentBirdEye ul li.isUnconnectedExternal{
    /* opacity は使わない。半透明にすると親（.exProcesses = #e9e9e9）と混ざり、
       #f2f2f2 * .55 の実効色は約 #eee で背景とほぼ同じになってカードが消える。
       カードとして見える明るさは保ちつつ（背景 #e9e9e9 との差を残す）、通常カードの
       #FFF よりは落とす。区別は文字色と合わせて付ける。 */
    background-color: #f5f5f5;
}
.processListViewContentBirdEye ul li.isUnconnectedExternal h4.listView a{
    color: #9a9a9a;
}

.processListViewContentBirdEye .createProcessBtn{
    font-size: 8px;
    text-align: right;
    display: block;
    color: #181818;
}
.goToUp{
    position: absolute;
    right: 15px;
    top: 16px;
    cursor: pointer;
    width: 15px;
    height: 15px;
    background-image: url('../images/up.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: ;
}

.processListViewContentBirdEye:first-child .goToUp {
    display: none;
}
.processListViewContentBirdEye:has(+ .birdEyeListViewAddProcessAreaWrapper) .goToDown {
    display: none;
}



.goToDown{   
    position: absolute;
    right: 30px;
    top: 16px;
    cursor: pointer;
    width: 15px;
    height: 15px;
    background-image: url('../images/down.svg');
    background-size: contain;
        background-repeat: no-repeat;
    background-position: center;
}
.ddGrabDots{
    background-image: url('../images/icon_dots_vertical_gray.svg');
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: 15px;
    top: 10px;
    width: 12px;
    height: 20px;
    cursor: grab;
}
.ddGrabDotsProcess{
    background-image: url('../images/icon_dots_vertical_gray.svg');
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: 10px;
    top: 5px;
    width: 10px;
    height: 15px;
    cursor: grab;
    z-index: 100;
}
.birdEyeListViewAddProcessAreaWrapper{
    margin-bottom: 1px;
}
.birdEyeListViewAddProcessAreaWrapper a{
    padding: 7px;
    text-align: center;
    color: #181818;
    background-image: url(../images/icon_plus_gray.svg?v=2);
    background-repeat: no-repeat;
    background-position: left 8px center;
    background-size: 14px;
    border: dotted 1px #dcdcdc;
    font-size: 10px;
    background-color: #fcfcfc;
    display: block;
}
#contextMenuProcessAdd{
    position: absolute;
    top: 100px;
    left: 100px;
    padding: 8px;
    background-color: #FFF;
    box-shadow: 0px 1px 8px 2px rgba(172, 172, 172, 0.2);
    z-index: 100;
    display: none;
}
#contextMenuProcessAdd .nodeInfomationInner {
    padding: 0;
    border-bottom: none;
    margin-bottom: 10px;
}
#contextMenuProcessAdd .nodeInfomationInner:last-child{
    margin-bottom: 0;    
}
#contextMenuProcessAdd .formGroup{
    margin-bottom: 8px;
}
.nodeInfomationInner select {
    font-size: 8px;
}
.nodeInfomationInner input{
    font-size: 8px;
} 
#contextMenuProcessAdd h4{
    font-size: 10px;
}

#contextMenuProcessAdd button{
    font-size: 8px;
}
#contextMenuProductEdit{
    position: absolute;
    top: 100px;
    left: 100px;
    padding: 8px;
    background-color: #FFF;
    box-shadow: 0px 1px 8px 2px rgba(172, 172, 172, 0.2);
    z-index: 100;
    display: none;
    max-width: 250px;
}
#contextMenuExternalProcessEdit{
    position: absolute;
    top: 100px;
    left: 100px;
    padding: 8px;
    background-color: #FFF;
    box-shadow: 0px 1px 8px 2px rgba(172, 172, 172, 0.2);
    z-index: 100;
    display: none;
    width: 250px;
}
#contextMenuExternalProcessEdit .nodeInfomationInner{
    padding: 0;
    border-bottom: none;
    margin-bottom: 0;
}
#contextMenuExternalProcessEdit h4{
    font-size: 10px;
}
#contextMenuProductRelationEdit{
    position: absolute;
    top: 100px;
    left: 100px;
    padding: 8px;
    background-color: #FFF;
    box-shadow: 0px 1px 8px 2px rgba(172, 172, 172, 0.2);
    z-index: 100;
    display: none;
}

#attrProductInputSave,
#contextMenuProductRelationEdit,
#attrProductRelationInputSave{
    display: block;
    font-size: 0;
    background-color: transparent;
    height: 0px;
    width: 0px;
    padding: 0;
}
#existSystemList h2 {
    font-size: 11px;
    font-weight: bold;
    font-family: "Oxanium", sans-serif;
    margin-bottom: 0;
    color: #000;
    padding-top: 8px;
}
.systemGoalBox {
    z-index: 100;
    position: relative;
    top: 15px;
    left: 25%;
    width: 47%;
    display: grid;
    grid-template-columns: 60% 36%;
    column-gap: 3%;
}
a#goToRevision {
    background-image: url(../images/icon_revision.svg);
    width: fit-content;
    font-size: 10px;
    background-size: 11px;
    background-repeat: no-repeat;
    display: inline-block;
    padding-right: 14px;
    background-position: right center;
    position: absolute;
    right: 1%;
    top: 83px;
}
a#goToStructureRevision {
    background-image: url(../images/icon_revision.svg);
    width: fit-content;
    font-size: 10px;
    background-size: 11px;
    background-repeat: no-repeat;
    display: inline-block;
    padding-right: 14px;
    background-position: right center;
    position: fixed;
    left: 10px;
    bottom: 10px;
    z-index: 10000;
}
#revisionListTableStructure input {
    all: revert;
}

#structureTopBack{
    position: fixed;
    top: 20px;
    left: 20px;
    width: fit-content;
    z-index: 100;
    border-radius: 100px;
    padding: 11px 10px 9px 10px;
    display: block;
    text-align: center;
    border: solid 2px #FFEA28;
    color: #181818;
    background-color: #FFF;
    line-height: 1;
}


.viewModeBox h2 {
    font-size: 11px;
    font-weight: bold;
    font-family: "Oxanium", sans-serif;
    margin-bottom: 0;
    color: #000;
    padding-top: 8px;
}

#existSystemList {
    display: grid;
    grid-template-columns: 50px 1fr;
    margin-bottom: 8px;
}
#existSystemList ul {
    display: block;
    background-color: #FFF;
    height: 80px;
    overflow: auto;
}
#existSystemList ul li {
    padding: 10px 7px 7px 3px;
    font-size: 10px;
    /* border-top: #f9f9f9 solid 2px; */
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 2.2em;
    display: block;
    position: relative;
    margin-left: 8px;
}
#existSystemList ul li::before{
    width: 10px;
    height: 10px;
    /* background-image: url(../images/icon_edit.svg); */
    background-repeat: no-repeat;
    background-size: contain;
    content: '';
    position: absolute;
    left: 0;
}
#existGoals {
    display: grid;
    grid-template-columns: 60px 1fr;
}
#existGoals h2 {
    font-size: 11px;
    font-weight: bold;
    font-family: "Oxanium", sans-serif;
    margin-bottom: 0;
    color: #000;
    padding-top: 8px;
}
#existGoals ul {
    display: block;
    background-color: #FFF;
    height: 80px;
    overflow: auto;
}
#existGoals ul li {
    padding: 10px 7px 7px 13px;
    font-size: 10px;
    /* border-top: #f9f9f9 solid 2px; */
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 2.2em;
    display: block;
    cursor: pointer;
    position: relative;
    margin-left: 8px;
}
#existGoals ul li::before{
    width: 10px;
    height: 10px;
    background-image: url(../images/icon_edit.svg);
    background-repeat: no-repeat;
    background-size: contain;
    content: '';
    position: absolute;
    left: 0;
}
#existGoals ul li:first-child{
    border-top: none;
    margin-top: 0;
}
.viewModeBox {
    position: absolute;
    top: 14px;
    left: 73%;
    width: 20%;
    display: grid;
    grid-template-columns: 50px 1fr;
}
.viewModeBox ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 8px;
    row-gap: 1px;
    background-color: #FFF;
    padding: 3px;
}
.viewModeBox ul li {

    
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    
}
.viewModeBox ul li a{
    padding: 4px 5px;
    display: block;
    cursor: pointer;
    width: 100%;
    height: 100%;
    background-image: url(../images/icon_eye_black.svg);
    background-size: 10px;
    background-position: right 8px center;
    background-repeat: no-repeat;
    border-radius: 3px;
    font-size: 10px;
    position: relative;
}
.viewModeBox ul li a.hidden{
    background-image: url(../images/icon_eye_hidden.svg);
    color: #999;
}
.viewModeBox h2 {
    font-size: 11px;
    font-weight: bold;
    font-family: "Oxanium", sans-serif;
    margin-bottom: 0;
    color: #000;
}

#modaal-close{
    display: none;
}


#revisionListTable {
    max-height: calc(100vh - 300px);
    overflow: auto;
    font-size: 11px;
}
#revisionListTable td{
    padding: 5px;
}
#revisionListTable input{
    all: revert;
}
.revisionList2c {
    width: 100%;
    display: grid;
    grid-template-columns: 210px 1fr;
    margin-bottom: 30px;
    column-gap: 15px;
}
.revisionListContents {
    overflow: auto;
    height: 60vh;
}
.revisionPreviewPage .djs-palette{
    display: none !important;
}
#revisionPreview{
    height: 60vh;
    width: 50vw;
}
#restoreProcessDo{
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
#restoreProcessDo.disabled{
    background-color: #dcdcdc;
    cursor: default;
    pointer-events: none;
}

#revisionPreviewIframe{
    width: 100%;
    height: 100%;
    border: none;
}
#restoreProjectDo{
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.participant-icon { 
    pointer-events: all;
}


/* toggle btn */
.toggleEntity{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.entityLabel{
    font-size: 11px;
    padding-top: 2px;
}
.toggle-button-2 {
    display: inline-block;
    position: relative;
    width: 33px;
    height: 16px;
    border-radius: 50px;
    border: 2px solid #333;
    box-sizing: content-box;
    cursor: pointer;
    transition: border-color .4s;
}

.toggle-button-2:has(:checked) {
    border-color: #333;
}

.toggle-button-2::after {
    position: absolute;
    top: 50%;
    left: 17px;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #333;
    content: '';
    transition: left .4s;
}

.toggle-button-2:has(:checked)::after {
    left: 5px;
    background-color: #333;
}

.toggle-button-2 input {
    display: none;
}



.toggle-button-3 {
    display: inline-block;
    position: relative;
    width: 33px;
    height: 16px;
    border-radius: 50px;
    border: 2px solid #333;
    box-sizing: content-box;
    cursor: pointer;
    transition: border-color .4s;
    margin-left: auto;
    margin-right: auto;
}

.toggle-button-3:has(:checked) {
    border-color: #333;
}

.toggle-button-3::after {
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #333;
    content: '';
    transition: left .4s;
}

.toggle-button-3:has(:checked)::after {
    left: 17px;
    background-color: #333;
}

.toggle-button-3 input {
    display: none;
}

.formBgGray{
    padding: 8px;
    margin: -8px;
    background-color: #dcdcdc;
}


#participantIconMenu .formGroup{

    margin-bottom: 10px;
}
#attrInputBox .formGroup {
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: 55px 1fr;
}
#attrInputBox{
    min-width: 210px;
}
#participantIconMenu .formGroup textarea{
    line-height: 1.5;
    min-height: 30px;
    
}
#contextMenuExternalProcessEdit .formGroup {
    margin-bottom: 0;
    display: grid;
    margin-bottom: 8px;
}

.formGroup textarea {
    field-sizing: content;
    min-width: 100%;
    max-width: 380px;
    min-height: min-content;
    line-height: 1.5;
    padding: 5px 10px;
    background-color: #FFF;
}
.productMultiInputUl li{
    position: relative;
    margin-bottom: 3px;
}
.productMultiInputUl li input {
    margin-right: 25px;
    display: block;
    width: calc(100% - 21px);
    padding-top: 2px;
    padding-bottom: 2px;
}
.productMultiInputUl li.add{
    height: 20px;
}

.productFormDeleteBtn {
    width: 20px;
    height: 20px;
    background-image: url(../images/icon_minus_gray.svg?v=2);
    background-size: 14px;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    right: 33px;
    top: 1px;
}

#contextMenuProductEdit .productMultiInputUl li{
    position: relative;
}
#contextMenuProductEdit .productMultiInputUl li input {
    margin-right: 25px;
    margin-left: 0;
    width: calc(100% - 57px);
}
#contextMenuProductEdit .productMultiInputUl li .goToUp,
#contextMenuProductEdit .productMultiInputUl li .goToDown{
    top: 3px;
    right: auto;
    width: 14px;
    height: 14px;
    left: auto;
}
#contextMenuProductEdit .productMultiInputUl li:first-child .goToUp{
    display: none;
}
#contextMenuProductEdit .productMultiInputUl li:nth-last-child(2) .goToDown{
    display: none;
}
#contextMenuProductEdit .productMultiInputUl li .goToUp{
    right: 18px;
}
#contextMenuProductEdit .productMultiInputUl li .goToDown{
    right: 0;
}
.productFormAddBtn{
    width: 100%;
    height: 20px;
    background-image: url(../images/icon_plus_gray.svg?v=2);
    background-size: 14px;
    background-position: left center;
    background-repeat: no-repeat;
    left: 0px;
    top: 1px;
    font-size: 11px;
    padding-left: 18px;
}

.projectStart2c{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 30px;
}

.projectStart2c .projectStartContents{
    background-color: #FFF;
    border-radius: 10px;
    padding: 40px;
    text-align: center;
}

.projectStart2c .projectStartContents .icon{
    width: 60px;
    height: auto;
    display: inline-block;
    margin-bottom: 30px;
}
.projectStart2c .projectStartContents a{
    font-size: 18px;
}


.usersBox{
    padding: 3%;
    
}
.userTable{
    font-family: 'Noto Sans JP';
}
.usersBox table th{
    background-color: #f9f9f9;
}
input{
    font-family: 'Noto Sans JP';
}
textarea{
    font-family: 'Noto Sans JP';
}
select{
    font-family: 'Noto Sans JP';
}
.usersBox input,
.usersBox select,
.usersBox textarea{
    font-family: 'Noto Sans JP';
}
.loginBox input{
    font-family: 'Noto Sans JP';
}

/* grid + minmax(0,1fr) では治らなかった（トラック自体は縮められても、中の .formGroup が
   既定の min-width:auto＝内容の最小幅を保ったまま枠からあふれる）。flex-basis:0 + flex-grow
   + 子要素側 min-width:0 の組み合わせは、内容の幅に関係なく常に等分できる、より確実な方法。 */
.user2c{
    display: flex;
    gap: 15px;
}
.user2c > .formGroup{
    flex: 1 1 0%;
    min-width: 0;
}

.formUserBox{
    margin-bottom: 20px;
}
.formUserBox label{
    margin-bottom: 8px;
    display: block;
    color: #181818;
}
.formUserBox .formGroup input,
.formUserBox .formGroup select{
    padding: 10px;
    font-size: 16px;
}
.formUserBox h3{
    font-weight: bold;
    margin-bottom: 5px;
}

.formUserBox button{
    background-color: #FFEA28;
    color: #181818;
    border-radius: 100px;
    padding: 12px 10px 10px;
    display: block;
    text-align: center;
    border: solid 1px #181818;
    line-height: 1;
    width: fit-content;
    min-width: 200px;
    margin-left: auto;
    margin-right: auto;
}

.user2c a.default{
    width: fit-content;
    padding: 14px 25px 11px;
}

/* 入力欄の下に添える補助テキスト。 */
.formUserBox small{
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.6;
    color: #777;
}

/* 編集不可のinput/select（プランに連動する月間含有予算、上限到達時の挙動など）。disabled状態を
   明確に見せるため、通常の入力欄よりはっきりグレーにし、カーソルも編集不可を示す。selectは
   ブラウザ既定のdisabled表現がinputと揃わないため、同じ見た目に上書きする。 */
.formUserBox .formGroup input:disabled,
.formUserBox .formGroup select:disabled{
    background-color: #EEEEEE;
    color: #777;
    cursor: not-allowed;
}

/* 単体チェックボックス。.formGroup label の 11px を打ち消して本文サイズに戻し、
   input の width:100% がチェックボックスまで伸びないようにする。 */
.formGroup.formCheck label{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    color: #181818;
    cursor: pointer;
}
.formGroup.formCheck input[type="checkbox"]{
    width: auto;
    margin: 0;
}

/* AI Generated Files（claude_files.php）の一覧。ファイル名列（3列目：チェックボックス・★の
   次）だけ左揃えのまま残し、それ以外の列（見出し含む）は中央揃えにする。 */
.claudeFilesTable th:not(:nth-child(3)),
.claudeFilesTable td:not(:nth-child(3)){
    text-align: center;
}
/* a.mini は float:right が既定（他画面の右寄せレイアウト用）。この表では td 自体を
   中央揃えにしているので、float を外して text-align の効果を効かせる
   （floatした要素はtext-alignの影響を受けない）。 */
.claudeFilesTable td a.mini{
    float: none;
    display: inline-block;
}

/* Permission関連画面のテーブル。permission_setting.php のロール一覧（先頭のRole Name列だけ
   左揃えのまま残す）と、permission_setting.php/permission_edit.php のユーザー選択テーブル
   （.userTable、こちらは全列を中央揃え）。 */
.permissionRollTable th:not(:first-child),
.permissionRollTable td:not(:first-child){
    text-align: center;
}
.userTable th,
.userTable td{
    text-align: center;
}
/* a.mini は float:right が既定（他画面の右寄せレイアウト用）。中央揃えの表では
   float を外して text-align の効果を効かせる（floatした要素はtext-alignの影響を受けない）。 */
.permissionRollTable td a.mini,
.userTable td a.mini{
    float: none;
    display: inline-block;
}

/* Billing Report（ai_setting_billing_report.php）の合計/プロジェクト別/ユーザー別テーブル。
   先頭列（プロジェクト名・ユーザー名など）だけ左揃えのまま残し、数値列はth/tdとも中央揃えにする
   （thはブラウザ既定でcenter、tdはcenterクラス無指定だとleftになりズレて見えるため揃える）。 */
.claudeBillingTable th:not(:first-child),
.claudeBillingTable td:not(:first-child){
    text-align: center;
}
/* 合計テーブルは先頭列（メッセージ数）もラベルではなく数値なので、全列中央揃えにする。 */
.claudeBillingTableAll th,
.claudeBillingTableAll td{
    text-align: center;
}

/* AI Generated Files（claude_files.php）のお気に入り★。オンは金色、オフはグレーの輪郭のまま。 */
.claudeFileFavoriteToggle{
    text-decoration: none;
    font-size: 16px;
    color: #bbb;
}
.claudeFileFavoriteToggle.isFavorite{
    color: #c8a800;
}
/* 選択にお気に入りが混ざっているときの一括削除ボタン（クリックはさせて、説明のアラートを
   出すため pointer-events は殺さない）。 */
.claudeFilesBulkDelete.isDisabled{
    opacity: 0.4;
    cursor: not-allowed;
}
/* a.mini は float:right が既定。バーの中では他のボタンと横並びにしたいので打ち消す。 */
.claudeFilesBulkBar a.mini{
    float: none;
    display: inline-block;
}

/* Files の「Copy」ダイアログ（PRePモデルJSONを新規プロセスとしてコピーする）。
   この画面は modaal を読み込んでいないページ（claude_files.php）からも出すため、
   依存を増やさず素のオーバーレイで組む。表示/非表示は danshboard_job.js が切り替える。 */
.claudeFileDialogOverlay{
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.claudeFileDialogPanel{
    background: #FFF;
    border-radius: 6px;
    padding: 24px;
    width: 420px;
    max-width: calc(100% - 32px);
    max-height: calc(100% - 32px);
    overflow-y: auto;
    text-align: left;
}
.claudeFileDialogPanel a.mini{
    float: none;
    display: inline-block;
}

/* ボタンを横並びにする行。.formUserBox button の margin:auto を打ち消して gap で間隔を取る。 */
.formBtnRow{
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
}
.formUserBox .formBtnRow button{
    margin-left: 0;
    margin-right: 0;
}
/* 副次アクション。a.default と同じ白地＋黄色枠。 */
.formUserBox .formBtnRow button.secondary{
    background-color: #FFF;
    border: solid 2px #FFEA28;
}

/* 表のセル内の入力欄。既定の 10px のままだと他画面の入力欄と字面が揃わない。 */
.borderTable td input[type="text"],
.borderTable td input[type="number"],
.borderTable td input[type="date"]{
    font-size: 14px;
    padding: 8px 10px;
    width: 100%;
    box-sizing: border-box;
}

/* レート設定画面: 現在値をその場編集する行のテーブル・変更履歴の折りたたみ。 */
.claudeRateUnset{
    margin-top: 4px;
    font-size: 11px;
    color: #c00;
}
.claudeRateScheduledRow td{
    background-color: #FFF8E1;
    font-size: 12px;
    padding: 8px 10px;
}
.claudeRateScheduledBadge{
    display: inline-block;
    background-color: #FFA500;
    color: #FFF;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 100px;
    margin-right: 6px;
}
.claudeRateScheduledRow button{
    margin-left: 10px;
    font-size: 12px;
}
.usersBox details{
    margin-top: 15px;
}
.usersBox details summary{
    cursor: pointer;
    color: #181818;
    font-weight: 600;
    padding: 8px 0;
}
.usersBox details[open] summary{
    margin-bottom: 10px;
}

/* 画面上部の説明文と、保存／接続テストの結果表示。 */
.formLead{
    margin-bottom: 20px;
    font-size: 13px;
    line-height: 1.8;
    color: #555;
}
.formAlert{
    margin-bottom: 20px;
    font-size: 13px;
    line-height: 1.8;
    color: #c00;
}
.formResult{
    margin-top: 15px;
    font-size: 13px;
    line-height: 1.8;
    text-align: center;
}

.userTable a.default{
    width: fit-content;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 13px;
    padding: 5px 25px;
}


.editableUsers{
    position: absolute;
    bottom: 20px;
    z-index: 10000;
    right: 70px;
}
.editableUsersListOpen{
    text-align: right;
}
.editableUsersListOpen .icon{
    display: inline-block;
    height: 35px;
    width: 35px;
    cursor: pointer;
}
.editableUsersList li{
    margin-bottom: 5px;
}
.editableUsersList{
    background-color: #FFF;
    padding: 15px;
}
.editableUsersList button#editableUsersSave{
    font-size: 11px;
    padding: 4px 10px;
    text-align: center;
    width: fit-content;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.editableUsersList{
    display: none;
}


.processWrappeBox.is-disabled{
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

.projectPermissionCheckList li{
    margin-bottom: 10px;
}
.createNewProjectPermissionInner h2{
    color: #181818;
}

.createNewProjectPermissionInner h3{
    font-size: 16px;
    margin-bottom: 10px;
    color: #181818;
}

.formUserBox li label{
    color: #181818;
}
#ruleCheckBtn {
    position: absolute;
    z-index: 999;
    bottom: 16px;
        font-size: 10px;
    left: 1.2%;
    background-color: #FFF;
    border: solid 2px #FFEA28;
    background-position: right 10px center;
    background-size: 13px;
    background-repeat: no-repeat;
    color: #000;
    padding: 4px 30px;
    width: fit-content;
    border-radius: 100px;
    background-image: url(../images/icon_check.svg);
    background-position: right 7px center;
    background-size: 11px;
    background-repeat: no-repeat;
    font-weight: bold;
}
.addProcessBtnList {
    position: absolute;
    z-index: 999;
    bottom: 15px;
    font-size: 8px;
    left: 1.2%;
}
.addProcessBtnList button{
    background-color: #FFF;
    border: #dcdcdc solid 1px;
    background-image: url(../images/icon_add.svg);
    background-position: right 7px center ;
    background-size: 11px;
    background-repeat: no-repeat;
    color: #333;
    padding: 6px 30px;
}


h2{
    position: relative;
}
.processDocBox{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 10;
    background-color: #f9f9f9;
    min-height: 110px;
    padding-bottom: 25px;
    box-shadow: 0px 5px 12px 0px rgba(0, 0, 0, 0.08);
}
.addIcon {
    position: absolute;
    right: 11px;
}
.addIcon a{
    display: block;
    height: 13px;
    width: 13px;
    background-image: url(../images/icon_add.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.setting{
    display: none;
}




/*
.memoTextBox rect.djs-hit {
    fill: #FFF;
    stroke-opacity: 1 !important;
    stroke: white !important;
    stroke-width: 15px !important;
}
*/


.productSettingColorPalette ul{
    display: block;
}
.productSettingColorPalette ul li{
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: #000;
}
.productSettingColorPalette ul li.active{
    border: #dcdcdc solid 3px;
    box-sizing: border-box;
}

.productSettingColorPalette ul li.red{
    background-color: #FF0000;
}
.productSettingColorPalette ul li.green{
    background-color: #00A510;
}
.productSettingColorPalette ul li.blue{
    background-color: #0033FF;
}
.productSettingColorPalette ul li.yellow{
    background-color: #FFEE00;
}
.productSettingColorPalette ul li.purple{
    background-color: #C300CA;
}


.relationSettingColorPalette ul{
    display: block;
}
.relationSettingColorPalette ul li{
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: #000;
}
.relationSettingColorPalette ul li.active{
    border: #dcdcdc solid 3px;
    box-sizing: border-box;
}

.relationSettingColorPalette ul li.red{
    background-color: #FF0000;
}
.relationSettingColorPalette ul li.green{
    background-color: #00A510;
}
.relationSettingColorPalette ul li.blue{
    background-color: #0033FF;
}
.relationSettingColorPalette ul li.yellow{
    background-color: #FFEE00;
}
.relationSettingColorPalette ul li.purple{
    background-color: #C300CA;
}



.processEditMode #productSaveData .processEdit{
    display: block;
}
.processEditMode #productSaveData .processEdit.formGroup{
    display: grid;
}
.processEditMode #productSaveData .systemGoalEdit{
    display: none;
}

.systemGoalEditmode #productSaveData .processEdit{
    display: none;
}
.systemGoalEditmode #productSaveData .systemGoalEdit{
    display: block;
}
.processSystemGoalEditChangeBox h2 {
    font-size: 11px;
    font-weight: bold;
    font-family: "Oxanium", sans-serif;
    margin-bottom: 0;
    color: #000;
    display: flex;
    align-items: center;
}

.processSystemGoalEditChangeBox {
    position: absolute;
    left: 150px;
    bottom: 19px;
}

.processSystemGoalEditChangeBoxInner {
    display: grid;
    grid-template-columns: 90px 45px 100px;
    font-size: 11px;
    font-weight: bold;
}
.changeModeToggle{
    display: flex;
    align-items: center;
}
.changeModeTitle{
    display: flex;
    align-items: center;
    color: #999;
}
.changeModeTitle.active{
    color: #000;
}
.formGroup.colorChoice{
    margin-top: 10px;
}
.formGroup.grid2c{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
}
.deleteMiniBtn{
    text-align: right;
}
/* プロセス名編集モーダルのコピー導線。複製先が2つある（本番のプロジェクトへもう1つ増やす／
   本番に影響しないサンドボックスとして試作する）ので、「Copy to Project / Sandbox」と
   並べて選ばせる。 */
.processCopyActions{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.processCopyActionsLabel,
.processCopyActionsSep{
    font-size: 11px;
    color: #bbb;
}
.deleteProcessDoBtn{
    font-size: 10px;
    color: #777;
}

#deleteGoal{
    display: block;
    background-color: #FFF;
    border: solid 1px #000;
    color: #000;
    padding: 4px 10px;
    font-weight: bold;
}

.systemGoalEditmode #canvas{
    background-color: #dcdcdc;
}
#nowSystemEditMode {
    position: fixed;
    top: 130px;
    left: 20px;
    color: #FFF;
    z-index: 11;
    display: none;
}
#nowDesignEditMode {
    position: fixed;
    top: 130px;
    left: 20px;
    color: #777;
    z-index: 11;
    display: none;
}
#viewSystemList{
    position: fixed;
    top: 130px;
    right: 20px;
    z-index: 11;
    display: none;
}
#viewSystemList a{
    background-color: #FFF;
    border: solid 2px #FFEA28;
    background-size: 13px;
    background-repeat: no-repeat;
    color: #000;
    padding: 4px 30px;
    width: fit-content;
    border-radius: 100px;
    background-repeat: no-repeat;
    font-weight: normal;
    font-size: 10px;
}

#canvas.printMode .djs-palette{
    display: none !important;
}

#canvas.printMode .bjs-powered-by{
    display: none !important;
}

.processPrintMode .djs-palette{
    display: none !important;
}

.processPrintMode .bjs-powered-by{
    display: none !important;
}

.printGoalList h3{
    margin-bottom: 3px;
}
.printGoalList ul{
    padding-top: 4px;
    border-top: #777 1px solid;
}

.printGoalList li{
    font-size: 7px;
    padding-bottom: 2px;
    margin-bottom: 4px;
    border-bottom: #777 1px solid;
}

.systemPrintList h3{
    margin-bottom: 3px;
}
.systemPrintList ul{
    padding-top: 4px;
    border-top: #777 1px solid;
}

.systemPrintList li{
    font-size: 7px;
    padding-bottom: 2px;
    margin-bottom: 4px;
    border-bottom: #777 1px solid;
}

#addProductBox {
    font-size: 10px;
}


.djs-context-pad .bpmn-icon-lane-insert-above{
    display: none !important;
}
.djs-context-pad .bpmn-icon-lane-divide-two,
.djs-context-pad .bpmn-icon-lane-divide-three,
.djs-context-pad .bpmn-icon-lane-insert-below{
    display: none !important;
}

/*
.djs-context-pad .bpmn-icon-connection-multi{
    display: none !important;
}
*/


.task .djs-label {
    /* font-size: 1.2em !important; */
    translate: 0 -3px;
    z-index: 1;
    font-weight: bold !important;
    text-align: center ! IMPORTANT;
    transform: scale(1.05);
}
.djs-direct-editing-content {
    font-size: 7px !important;
    transform: scale(1.35) translate(-25%, -50%) !important;
    translate: 0;
    z-index: 1;
    width: 300% !important;
    text-align: center;
}

.memoTextBox .djs-label {
  /* font-size: 1.2em !important; */
  translate: 0 -0.65em;
  z-index: 1;
}
.stateTextBox .djs-label {
  /* font-size: 1.2em !important; */
  translate: 0;
  z-index: 1;
}
.attributeTextBox .djs-label {    
  /* font-size: 1.2em !important; */
  translate: 0;
  z-index: 1;
}
.InputOutputStructureParticipant .participant text{
    /* font-size: 22px !important; */
    font-weight: bold !important;
}
.InputOutputParticipant ~ .djs-children .djs-label {
    /* font-size: 1.3em !important; */
    translate: 0.25em 0.5em;
    z-index: 1;
}
.customParticipant ~ .djs-children .djs-visual:not(.task) .djs-label {
    /* font-size: 1.2em !important; */
    translate: 0.25em 0.5em;
    z-index: 1;
}

.goalTextBox .djs-label {
  /* font-size: 1.1em !important; */
  z-index: 1;
}
.systemTextBox .djs-label {
  /* font-size: 1.1em !important; */
  z-index: 1;
}
.riskTextBox .djs-label {
  /* font-size: 1.1em !important; */
  z-index: 1;
}


/* Dash board */

.dashboardLayout .projectIndexContents .title{
    font-size: 12px;
}
.dashboardLayout h3{
    font-size: 20px;
    font-weight: 500;
    border-bottom: solid 2px #F8F8F8;
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
.clmInner {
    padding: 20px;
}
.clmInner::after{
    display: block;
    clear: both;
    content: '';
}
.dashboardDetailBtn{
    float: right;
}
.dashboardDetailBtn::after{
    display: block;
    clear: both;
    content: '';
}
.dashboardDetailBtn a.primary{
    padding: 8px 40px 6px;
}


.countNum{
    text-align: center;
    font-size: 40px;
}

.countTitle{
    text-align: center;
    font-size: 14px;
    color: #777;
    margin-top: 10px;
}

.countBox{
    margin-bottom: 20px;
}




/* 
-------------------------------------*/
.usersBox table.borderTable tr,
.borderTable tr{
    border: none;
    vertical-align: middle;
}
.usersBox table.borderTable th,
.borderTable th{
    border: none;
    vertical-align: middle;
}
.borderTable {
	width: 100%;
}
.borderTable {
    border: none;
    margin-bottom: 15px;
}
.borderTable tbody tr{
    border: none;
}
.borderTable label{
    font-size: 10px;
    background-color: #dcdcdc;
    display: inline-block;
    border-radius: 100px;
    padding: 3px 10px;
}
.borderTable tbody tr td {
	position: relative;
	padding: 8px 5px;
	vertical-align: middle;
	border-bottom: 1px solid #F8F8F8;
    border-top: none;
    border-left: none;
    border-right: none;
}
.borderTable tbody tr td.label {
    width: 130px;
}
.borderTable tbody tr:nth-child(even) td {
	background-color: #f9f9f9;
}

.borderTable tbody tr td.name {
	width: 160px;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 11px;
	/*white-space: nowrap;*/
}
.borderTable tbody tr td.date {
	position: relative;
	width: 120px;
	padding-left: 20px;
	padding-right: 0;
	color: #777;
	font-size: 11px;
	white-space: nowrap;
}
.borderTable tbody tr td.-date:before {
	content: "";
	position: absolute;
	top: 8px;
	left: 0;
	bottom: 8px;
	width: 1px;
	background: #dcdcdc;
}


.bugReportBox{
    position: fixed;
    width: 300px;
    right: 0;
    box-sizing: border-box;
}
.bugReportBox h2{
    background-color: #777;
    position: relative;
    padding: 8px;
    font-size: 9px;
    font-weight: 600;
    color: #FFF;
    float: right;
    margin-bottom: 0;
    cursor: pointer;
}
.bugReportBox h2::after{
    clear: both;
    content: '';
    display: block;
}
.bugReportBox .bugReportContents{
    background-color: #FFF;
    padding: 15px;
    clear: both;
}
.bugReportBox .bugReportContents p{
    margin-bottom: 5px;
}

.bugReportBox .bugReportContents textarea{
    border: #dcdcdc solid 1px;
    field-sizing: content;
    width: 100%;
    min-height: 120px;
    margin-bottom: 10px;
}
.bugReportBox {
    position: fixed;
    width: 300px;
    right: 0px;
    box-sizing: border-box;
    z-index: 100;
    bottom: -192px;
    transition: all .8s;
    z-index: 100;
}
.bugReportBox.open{
    bottom: 0;
}
button#bugReportSendDo{
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 12px;
    background-color: #777;
}







/* VIEW Only */
.viewOnly .editIcon{
    display: none !important;
}

.viewOnly .deleteIcon{
    display: none !important;
}

.viewOnly .editIconProcess{
    display: none !important;
}
.viewOnly .editIconProcess{
    display: none !important;
}

.viewOnly .editIconProcessArea{
    display: none !important;
}

.viewOnly .createProcessBtn{
    display: none !important;
}

.viewOnly .birdEyeListViewAddProcessAreaWrapper{
    display: none !important;
}

/* 見るだけモード時のUI隠し */
body.viewOnly .djs-context-pad,
body.viewOnly .djs-overlay-context-pad,
body.viewOnly .djs-palette {
  display: none !important;
}
/* 便宜上、ドラッグ用カーソルも通常に */
body.viewOnly .djs-cursor-move,
body.viewOnly .djs-cursor-resize,
body.viewOnly .djs-cursor-crosshair {
  cursor: default !important;
}
body.viewOnly .processListViewContentBirdEye li{
    pointer-events: none;
}

body.viewOnly .processListViewContentBirdEye .goToDown,
body.viewOnly .processListViewContentBirdEye .goToUp{
    display: none;
}
body.viewOnly .birdEyeSystemExProcessBox{
    display: none;
}
.savingIndicator{
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}
#isSavingIndicator.active {
    opacity: 1;
}
.savingIndicator.active{
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 10;
    display: block;
    width: fit-content;
}
.savingProcessText::before {
    content: '';
    background-color: #FF0000;
    height: 8px;
    width: 8px;
    display: inline-block;
    border-radius: 10000px;
    position: absolute;
    top: 4px;
    left: 0;
}
.savingProcessText{
    font-size: 12px;
    color: #FF0000;
    padding-left: 15px;
}
.savingProcessText::after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    -webkit-animation: ellipsis steps(4, end) 1300ms infinite; /* アニメーションの表示間隔のステップと全体時間 */
    animation: ellipsis steps(4, end) 1300ms infinite;
    content: "..."; /* 全部表示させた時の文字 */
    width: 0px;
    color: 777;
  }

  @keyframes ellipsis {
    to {
      width: 1em; /* 全部表示させた時の幅 */
    }
  }

  @-webkit-keyframes ellipsis {
    to {
      width: 1em;
    }
  }



.djs-element.group-external-label-hidden .djs-visual {
  display: none !important;
}





#birdEyeContentsBox{
    transform-origin: 0 0;
}






.bpmn-icon-task:before {
content: '' !important;
    width: 27px !important;
    height: 27px !important;
    border: solid 2px #000 !important;
    border-radius: 5px !important;
    margin-bottom: -5px;
}
.bpmn-icon-task:after {
    content: '' !important;
    width: 15px !important;
    height: 2px !important;
    background-color: #000;
    display: block;
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}
.djs-palette .entry, .djs-palette .djs-palette-toggle{
    position: relative;
}
.djs-palette-entries .group{
    padding-top: 7px;
}
.djs-palette-entries .group:last-child{
    padding-bottom: 14px;
}

.bpmn-icon-space-tool{
    margin-bottom: 8px;
    margin-top: 3px;
}
.bpmn-icon-lasso-tool{
    margin-bottom: 2px;
    margin-top: 3px;
}

#contextMenuNoteEdit{
    background-color: #FFF;
    padding: 8px;
    background-color: #FFF;
    box-shadow: 0px 1px 8px 2px rgba(172, 172, 172, 0.2);
    z-index: 100;
    display: none;
    max-width: 320px;
}


.loginConsumerForgot{
    text-align: center;
    padding-top: 20px;
}

.fullScreenModeBtn{
    position: absolute;
    left: 0;
    bottom: 0;
}
#fullScreenToggle{
    background-color: #dcdcdc;
    padding: 3px 10px;
    font-size: 11px;
    display: inline-block;
}
#fullScreenToggle::before{
    content: 'Full Screen';
}
#fullScreenToggle.active::before{
    content: 'Split Screen';
}
#projectBirdEyeWrapper.fullScreenMode{
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: #FFF;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 101;
    padding: 10px;
}

.fullScreenMode .birdEyeBox{
    height: 100%;
}





#modaal-close {
display: block;
    position: absolute;
    margin-right: -45px;
    margin-top: -30px;
    color: #fff;
    cursor: pointer;
    opacity: 1;
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0);
    border-radius: 100%;
    -webkit-transition: all .2s 
ease-in-out;
    transition: all .2s 
ease-in-out;
    right: 0;
    top: 0;
}
.modaal-close:hover:after{background:#dcdcdc}
.modaal-close:hover:before{background:#dcdcdc}

.djs-element.memoTextBox{
  pointer-events: none;
}
.djs-element.stateTextBox{
  pointer-events: none;
}
.djs-element.attributeTextBox{
  pointer-events: none;
}
.djs-element.riskTextBox{
  pointer-events: none;
}
.djs-element.systemTextBox{
  pointer-events: none;
}
.djs-element.goalTextBox{
  pointer-events: none;
}


#aiDebugBtn{
    position: fixed;
    bottom: 20px;
    left: 20px;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    border: #FFEA28 solid 2px;
    background-color: #FFF;
    color: #000;
    border-radius: 100px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 12px;
    line-height: 1;
}
#makeProcessFromXMLbtn{
    position: fixed;
    bottom: 20px;
    left: auto;
    right: 20px;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    border: #FFEA28 solid 2px;
    background-color: #FFF;
    color: #000;
    border-radius: 100px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 12px;
    line-height: 1;
}

.aiDebug textarea{
    height: 40vh;
}
.bigWidthModal{
    width: 60vw;
}


.customParticipant[data-element-id="STRUCTURE_PRCESS_BOX"] .djs-label{
    display: none;
}


#contextMenuGroupColor{
    padding: 8px;
    background-color: #FFF;
    box-shadow: 0px 1px 8px 2px rgba(172, 172, 172, 0.2);
    z-index: 100;
    max-width: 320px;
    position: relative;
}


/* Claudeトークン予算の使用状況プログレスバー（inc/claude_usage_helpers.php の
   prep_claude_usage_render_budget_bar() が出力するマークアップに対応）。 */
.claudeBudgetBar{
    margin: 10px 0;
}
.claudeBudgetBarCell{
    min-width: 220px;
}
.claudeBudgetBarCell .claudeBudgetBar{
    margin: 0;
}
.claudeBudgetBarLabel{
    font-size: 13px;
    color: #333;
    margin-bottom: 4px;
}
.claudeBudgetBarNums{
    color: #999;
    font-size: 12px;
    margin-left: 6px;
}
.claudeBudgetBarNote{
    color: #999;
    font-size: 12px;
}
.claudeBudgetBarEmpty{
    font-size: 12px;
    color: #bbb;
}
.claudeBudgetBarTrack{
    width: 100%;
    height: 8px;
    background-color: #eee;
    border-radius: 4px;
    overflow: hidden;
}
.claudeBudgetBarFill{
    height: 100%;
    border-radius: 4px;
    transition: width 0.2s ease;
}
.claudeBudgetBarFill--ok{
    background-color: #4caf50;
}
.claudeBudgetBarFill--warn{
    background-color: #ff9800;
}
.claudeBudgetBarFill--over{
    background-color: #e53935;
}