body{
	background: #fbfaf5;
}

/*------------------------------------------------------------ 
javascriptで利用するパーツ用
------------------------------------------------------------*/  
._parts{
	display: none;
}

/*------------------------------------------------------------ 
汎用幅
------------------------------------------------------------*/  
.w40 {width: 40px;}
.w60 {width: 60px;}
.w80 {width: 80px;}
.w100{width:100px;}
.w120{width:120px;}
.w140{width:140px;}
.w160{width:160px;}
.w180{width:180px;}
.w200{width:200px;}
.w220{width:220px;}
.w240{width:240px;}
.w260{width:260px;}
.w280{width:280px;}
.w300{width:300px;}
.w320{width:320px;}
.w340{width:340px;}
.w360{width:360px;}
.w380{width:380px;}
.w400{width:400px;}
.w420{width:420px;}
.w440{width:440px;}
.w460{width:460px;}
.w480{width:480px;}
.w500{width:500px;}
.w520{width:520px;}
.w540{width:540px;}
.w560{width:560px;}
.w580{width:580px;}

/*------------------------------------------------------------ 
テキスト寄せ
------------------------------------------------------------*/ 
.ta_r{text-align: right;}
.ta_c{text-align: center;}
.ta_l{text-align: left;}

/*------------------------------------------------------------ 
フォントウェイト
------------------------------------------------------------*/ 
.font_b{font-weight: bold;}
.font_n{font-weight: normal;}

/*------------------------------------------------------------ 
フォントサイズ
------------------------------------------------------------*/ 
.fontSize_10{font-size:10px;}
.fontSize_12{font-size:12px;}
.fontSize_14{font-size:14px;}
.fontSize_16{font-size:16px;}
.fontSize_18{font-size:18px;}
.fontSize_20{font-size:20px;}
.fontSize_22{font-size:22px;}
.fontSize_24{font-size:24px;}
.fontSize_26{font-size:26px;}
.fontSize_28{font-size:28px;}
.fontSize_30{font-size:30px;}
.fontSize_32{font-size:32px;}
.fontSize_34{font-size:34px;}
.fontSize_36{font-size:36px;}
.fontSize_38{font-size:38px;}

/*-------------------------------------------------------- 
作成・削除ボタンなどのの表示領域
------------------------------------------------------------*/  
.editBtnArea {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 0;
	margin: 0 0 10px 0;
}
.editBtnArea_middle {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 0;
	margin: 10px 0 10px 0;
}
/* 編集ボタン系 */
.miniBtn {
	display: inline-block;
	margin: 0;
	font-size: 17px;
	border-radius: 5px;
	padding: 10px 20px;
}
.middleBtn {
	width: 200px;
	margin: 0;
	font-size: 17px;
}
.delBtn  { background: #de6464; }
.addBtn  { background: #74b774; }
.editBtn { background: orange; }

.btn_w100{width: 100px;}
.btn_w120{width: 120px;}
.btn_w140{width: 140px;}
.btn_w160{width: 160px;}
.btn_w180{width: 180px;}
.btn_w200{width: 200px;}
.btn_w220{width: 220px;}
.btn_w240{width: 240px;}



/*------------------------------------------------------------ 
ウィンドウ
------------------------------------------------------------*/  
.baseWindow {
	position: fixed;
	display: none;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: fit-content;
    height: fit-content;
    max-width: 900px;
    padding: 0;
	background: #fff;
    border-radius: 20px;
	box-shadow: 0 0 3px rgba(0,0,0,0.2);
	z-index: 200;
	animation: fadeInUp 0.2s ease-out 1 forwards;
}

.baseWindow h1 {
    text-align: center;
    width: 100%;
    margin: 30px 0;
    font-size: 24px;
    font-weight: bold;
}
.baseWindow h2 {
    text-align: center;
    width: 100%;
    margin: 5px 0;
    font-size: 20px;
    font-weight: bold;
}
.baseWindow h3 {
	font-size: 20px;
	border-left: 10px solid #7594d4;
	line-height: 10px;
	margin: 15px 0;
}

.baseWindow form {
	display: flex;
	flex-direction: column;
}

.baseWindow label {
	border-left: 5px solid #9aadd4;
	line-height: 5px;
	margin: 30px 0 10px 8px;
	padding-left: 4px;
	font-weight: bold;
}
.baseWindow select {
	width: fit-content;
}
.baseWindow input[type="text"] {
	padding: 5px 10px;
	width: 100%;
}

.baseWindow input[type="number"] {
	padding: 5px 10px;
	text-align: center;
	width: 30%;
}

.baseWindow input[type="submit"] {
	text-align: center;
	border: 0;
}

.baseWindow .formBtnArea {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin: 30px auto 10px auto;
}
.baseWindow .formBtn {
	width: 180px;
	height: fit-content;
	padding: 10px;
	margin: 0;
	font-weight: normal;
	font-size: 19px;
}
.formBtnArea .cancelBtn{
	background: #de6464;
	text-align: center;
	color: #fff;
	border-radius: 5px;
}

.baseWindow .splitAreaTop {
	position: relative;
    display: flex;
    justify-content: center;
    gap: 10px;
    border-bottom: 1px solid #bfbfbf;
    padding: 0 60px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(255, 255, 255, 0) 4%);
}
.baseWindow .splitAreaTop .btn{
    position: relative;
    font-size: 18px;
    padding: 10px 60px;
    border: 1px solid #bfbfbf;
    border-top: 5px solid #bfbfbf;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
}
.baseWindow .splitAreaTop .btn.taskBtn{
	opacity:0.3;
}
.baseWindow .splitAreaTop .btn.phaseBtn{
	opacity:0.3;
}
.baseWindow .splitAreaTop .btn.active{
	background-color: #fff;
	opacity:1;
}
.baseWindow .windowContentsArea {
    width: 100%;
    padding: 30px 50px;
}




.baseWindow .splitAreaBottom {
	position: relative;
    display: flex;
    justify-content: space-around;
    gap: 10px;
	margin: 40px 0;
    padding: 0 60px;
}
.baseWindow .splitAreaBottom .btn{
    position: relative;
    font-size: 18px;
    padding: 10px 60px;
    border-radius: 10px;
	text-align: center;
	color: #fff;
	font-weight: bold;
}
.baseWindow .splitAreaBottom .btnAction{width:250px;background: orange;}
.baseWindow .splitAreaBottom .btnCancel{width:250px;background: red;}










/*------------------------------------------------------------ 

------------------------------------------------------------*/  
.allMiddleContents {
	display: flex;
	flex-direction: column;
	padding: 30px;
}
.allMiddleContents h2 {
    width: 100%;
    height: fit-content;
    padding: 10px 20px;
    background: #dad6d2;
    color: #ffffff;
    border-radius: 10px;
    margin: 0 0 15px 0;
    font-size: 21px;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgb(99 76 58 / 20%);
}

.areaSplit {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.areaSplit .splitInnter {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 15px;
    border-radius: 10px;
    background: #fff;
    margin-bottom: 30px;
    box-shadow: 0 0 5px rgb(201 200 195 / 19%);
}

.areaSplit .splitInnter100 {
    width: 100%;
    padding: 15px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 0 5px rgb(201 200 195 / 19%);
}

.projectRoot{
	width: 100%;
}






/*------------------------------------------------------------ 
右ペイン領域
------------------------------------------------------------*/  
/*
.rightPane {
    width: calc(100% - 300px);
    padding: 3%;
}

.rightPane h2 {
    width: 100%;
    padding: 10px 20px;
    background: #b3dcc9;
    color: #fff;
    border-radius: 10px;
    margin: 0 0 15px 0;
    font-size: 21px;
    letter-spacing: 1px;
}
*/




/*------------------------------------------------------------ 
ナビ
------------------------------------------------------------*/  
.naviArea{
	display: flex;
	width: 100%;
	background: #96d5e7;
	padding: 0;
	box-shadow: 0 0 3px rgb(68 68 68 / 50%);
}

.naviArea .arrow {
	width: 50px;
	height: 27px;
	position: relative;
	border: 2px solid #fff;
	border-bottom: 0;
	border-left: 0;
	transform: rotate(45deg) skew(20deg, 20deg);
}

.naviArea a {
	display: block;
	padding: 13px;
	width: 280px;
	text-align: center;
}

.naviArea img {
	height: 50px;
}

/*------------------------------------------------------------ 
サイドメニューとコンテンツのラッパー
------------------------------------------------------------*/  
.allWrapper {
	display: flex;
}

/*------------------------------------------------------------ 
コンテンツエリア
------------------------------------------------------------*/  
.contents_area {
	display: block;
	min-height: calc(100vh - 90px);
	width: 100%;
	max-width: 1500px;
	padding: 60px;
	margin: 0 auto;
}

.contents_area h1 {
	font-size: 30px;
	border-bottom: 1px solid #cfcfcf;
	margin: 0 auto 20px 0;
}

/*------------------------------------------------------------ 
サイドメニューエリア
------------------------------------------------------------*/  
.sideMenu {
	display: block;
	position: relative;
	width: 300px;
	min-width: 200px;
	min-height: calc(100vh - 90px);
	background: #e7e4df;
	box-shadow: 0 0 6px rgb(127 78 38 / 30%);
}

.sideMenu a{
	display: block;
	padding: 20px;
	border-left: 10px solid #92b2c8;
	border-bottom: 1px solid #c8c8c8;
	color: #333;
}

.sideMenu a.selected{
	background: #fff;
	border-left: 10px solid #69c1fe;
}
.sideMenu a:hover{
	border-left: 10px solid #7694d4;
	background: #f7f4ef;
}

.sideMenu .logo{
	padding: 30px 10px;
	text-align: center;
	background: #75bfd4;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
}

/*------------------------------------------------------------ 
	汎用的なエリア
------------------------------------------------------------*/  
.normalContentsArea {
	background: #fff;
	border-radius: 5px;
	padding: 20px 30px;
	text-align: center;
	margin-bottom: 60px;
}


/*------------------------------------------------------------ 
	ページャー
------------------------------------------------------------*/  
#pagerArea {
	width: 1000px;
	margin: 50px auto;
	text-align: center;
}

#pagerArea a {
	display: inline-block;
	padding: 10px;
	width: 50px;
	border: 1px solid #c3c3c3;
	border-radius: 5px;
	background: #fff;
	color: #333;
}
#pagerArea a.selectedPage {
	background: #999;
	color: #fff;
}


/*------------------------------------------------------------ 
	メインコンテンツ
------------------------------------------------------------*/  
.main {
	background: #fff;
	padding: 20px 10px;
	min-height: 80vh;
}

/*------------------------------------------------------------ 
	デフォルトスタイル 
------------------------------------------------------------*/  
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100px;
    background: #ff9eaa;
}

header a.linkIcon {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 50px;
	height: 50px;
	font-size: 8px;
	padding-top: 8px;
	color: #fff;
}
a.linkIcon img{
	width: 22px;
	height: 22px;
}
main {
    display: flex;
    flex-direction: column;
    max-width: 1500px;
    margin: 0 auto;
}



/* ==================================== 
　headerロゴとか
==================================== */ 
a.logo {
    width: 220px;
    height: fit-content;
    margin: 0 20px;
}
/* 上部メニュー */
.headMenuArea {
    position: relative;
	display: flex;
    gap: 10px;
    background: #f0eee7;
}
.headMenuArea .btnBlock {
    min-width: 100px;
    padding: 10px 15px;
    font-weight: bold;
}
.subMenuArea {
    display: none;
    position: absolute;
    top: 36px;
    left: 0;
    width: 250px;
    background: #faf6f2;
    z-index: 10;
    min-width: 180px;
    border-radius: 10px;
    box-shadow: 0 0 5px rgb(111 107 103 / 18%);
}
.subMenuArea a {
    display: block;
    padding: 12px 18px 12px 23px;
    color: #5b5b5b;
}
.subMenuArea a:hover {
    background-color: #faf6f2;
    background-image: url(/cmmn/img/ui_parts/menu_arrow_right.svg);
    background-repeat: no-repeat;
    background-size: 7px;
    background-position: 6px 20px;
    border-radius: 10px;
}





/* ==================================== 
	footer
==================================== */ 
footer {
	width: 100%;
	background: #ff9eaa;
	margin: 30px 0 0 0;
}
footer .copyright {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 30px;
	padding: 30px 0;
	color: #fff;
	font-size: 10px;
}
footer .copyright img {
	width: 130px;
}


label {
	padding: 5px 0 0 5px;
	font-weight: bold;
}

img	{ display: block;}
br	{ clear:both;}
blockquote, q {quotes: none;}
a {
	text-decoration: none;
	-webkit-tap-highlight-color:rgba(0,0,0,0); 
}

article, aside, canvas, details, figcaption, figure,  
hgroup, menu, nav, section, summary {  
	display: block;  
}  

.middleContents h3 {
	font-size: 15px;
	margin: 0 0 10px;
}
.middleContents label {
	font-size: 13px;
	margin: 0 0 10px;
}

.middleContents input {
	width: calc(100% - 10px);
	padding: 7px;
	margin: 5px;
	border: 1px solid #aaa;
	font-size: 19px;
	text-align: left;
}


/* ==================================== 
	Loading
==================================== */ 

#loading {
  display: none;
	position: fixed;
	color: #fff;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	font-size: 0;
	text-align: center;
	z-index: 3000;
	margin: 0;
	background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(3px);
}
.loadingArea {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	width: 100%;
	height: 100%;
}
.loadingAnims {
	position: absolute;
	display: flex;
	gap: 9px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	height: fit-content;
	width: fit-content;
}
.loading_letter {
	background: #ffffff;
	width: 8px;
	height: 50px;
	margin: 5px;
	box-shadow: 0 0 4px #fff;
}
.delay_1 {animation: loadingAnim 0.6s   0s ease-in-out infinite alternate forwards;}
.delay_2 {animation: loadingAnim 0.6s 0.1s ease-in-out infinite alternate forwards;}
.delay_3 {animation: loadingAnim 0.6s 0.2s ease-in-out infinite alternate forwards;}

@keyframes loadingAnim {
  0% {transform: scaleY(0.3);box-shadow: 0 0 0 #fff;}
100% {transform: scaleY(1.0);box-shadow: 0 0 4px #fff;}
}

/* ウィンドウ表示時のカバー */
#coverAll, #coverAll_middle, #coverAll_top{
	display: none;
	position: fixed;
  top: 0;
  left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.3);
  backdrop-filter: blur(3px);
}
#coverAll       {z-index: 200;}
#coverAll_middle{z-index: 300;}
#coverAll_top   {z-index: 400;}



/*------------------------------------------------------------ 
ガントのチェーン
------------------------------------------------------------*/  
.barChain{
    /*display: flex;*/
    display: none;
    position: absolute;
    width: 10px;
    height: 46px;
    z-index: 1;
}
.barChain1{
	width: 50%;
	height: 100%;
	border-top:1px solid #333;
	border-right:1px solid #333;
}
.barChain2{
	width: 50%;
	height: 100%;
	border-bottom:1px solid #333;
}





@keyframes zoomIn {
  0% { transform: scale(0.9); opacity: 0;}
100% { transform: scale(  1); opacity: 1;}
}

@keyframes zoomOut {
0% { transform: scale(  1); opacity: 1;}
100% { transform: scale(0.9); opacity: 0;}
}

@keyframes fadeInUp {
  0% {transform: translateY(30px);opacity: 0;}
100% {transform: translateY(   0);opacity: 1;}
}
@keyframes fadeOutUp {
  0% {transform: translateY(   0);opacity: 1;}
100% {transform: translateY(-30px);opacity: 0;}
}

@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}

@keyframes cutInOut {
0%   {transform: translateY( 30px);opacity: 0;}
20%  {transform: translateY(  0px);opacity: 1;}
80%  {transform: translateY(  0px);opacity: 1;}
100% {transform: translateY(-30px);opacity: 0;}
}