html{
    height: 100%;
}

body{
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	padding: 0;
	-webkit-text-size-adjust: 100%;
	color: #333333;
	font-family: "メイリオ", "Hiragino Kaku Gothic ProN", sans-serif;
	font-size: 20px;
	box-sizing: border-box;
}

body#login, body#login main#page-main{
	background-color:#F5F5F5
}

input,button,textarea,select{
	font-family: "メイリオ", "Hiragino Kaku Gothic ProN", sans-serif;
	font-size: 20px;
}

textarea{
    height:200px;
}

header,footer,main,article,section,aside {
	display: block;
}

footer{
	background-color:#F5F5F5
}

.login-window{
	text-align: center;
	width:400px;
	min-height: 500px;
	margin: 100px auto 0 auto;
	background-color:#FFFFFF;
    border: solid 2px #CCCCCC;
    border-radius: 5px;
}

.login-window form{
    margin: 0 auto;
}

.credentials-input{
    width: 80%;
    display: flex;
    flex-direction: column;
    margin:0 auto;
}

.credentials-input div{
    margin-top:10px;
}

.credentials-input input{
    width: 100%
}

.credentials-input .credentials-submit{
    margin-top:50px;
}

.credentials-submit button{
    width:100%;
}

header .upper-area,
header .middle-area{
    background-color: #C7F1E3;
    padding:3px 3px 0 3px;
}

.upper-area{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.middle-area{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.lower-area{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-right: 5px;
    background-color: #ffffff;
}

.common-width{
    max-width: 1500px;
    width:100%;
}

#page-main{
    width: 100%;
    margin: 0 auto;
    background-color: #ffffff;
}

#main-nav{
    flex:1;
    padding:0;
    margin:0;
}

.main-nav-list{   
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding:0;
    margin:0;
    min-height: 50px;
}

.main-nav-list li{
    list-style: none;
    flex:1;
    border: solid 2px #076700;
    /* background-color: #33CC99; */
    background-color: #11AA77;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-nav-list li.approval{
    /* color: #33CC99; */
    background-color: #F7C114;
}

.main-nav-list li.selected-tab{
    background-color: #FFFFFF;
}

.main-nav-list li.selected-tab a{
    /* color: #33CC99; */
    color: #009966;
}

.main-nav-list li.selected-tab.approval a{
    /* color: #33CC99; */
    color: #000000;
}

.main-nav-list li a{
    display: inline-block;
    text-align: center;
    color:#FFFFFF;
    font-weight: bold;
    margin: 0 auto;    
}

.main-nav-list li a span{
    word-break: keep-all;
}

.system-title{
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: stretch;
    color: #076700;
}

.login-window .system-title{
    padding: 20px 0;
    /* background-color: #33CC99; */
    background-color: #11AA77;
    color: #FFFFFF;
}

/* ページトップにスクロールさせる */
#scroll-page-top {
	position: fixed;
	bottom: 10px;
	right: 20px;
	font-size: 20px;
	line-height: 1;
	z-index: 99;
  }

#scroll-page-top a {
	background: #a772ca;
	text-decoration: none;
	color: #fff;
	width: 45px;
	padding: 18px 5px;
	text-align: center;
	display: block;
	border-radius: 90px;
	opacity: 0.9;
	transition: all .3s ease;
}
  
#scroll-page-top a:hover {
	text-decoration: none;
	opacity: .5;
}
  
/* 詳細タイトル */
#detail-info h2 {
	color: #00529E;
	font-size: 24px;
}

#detail-title {
	margin: 0;
	padding-bottom: 5px;
	border-bottom: solid 2px #DDDDDD;
	color: #00529E;
	font-size: 24px;
}

/* お知らせ日付 */
#detail-date {
	margin: 5px 0;
	font-size: 18px;
	text-align: right;
}

/* お知らせ期間 */
#detail-term h2 {
	color: #00529E;
	font-size: 20px;
}
.contents{
    width:100%;
	margin: 10px 0;
	padding: 20px 25px;
	background-color: #FFFFFF;
	box-shadow: 0 1px 3px #CCCCCC;
	min-height: 300px;
}


.contents-title{
    display: flex;
    flex-direction: row;
    background-color: #076700;
}

.contents-title .vline{
    margin: 8px 0 8px 20px;
    border-right: solid 8px  #FFFFFF
}

.contents-title h2{
    margin-left:10px;
    text-align: left;
    color: #FFFFFF;
}

.button-row{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items:flex-end;
    margin-right:5px;
}


.button-row select,
.button-row .button{
    margin:10px 20px 10px 0;
}

.button-row .button{
    border: solid 2px #460E44;
    background-color: #33CC99;
}

h1,h2,h3{
    margin:0;
}

.approval-check{
    width:3vw;
    height:3vw;
    max-width:40px;
    max-height: 40px;;
}

.retirement-check{
    width:3vw;
    height:3vw;
    max-width:40px;
    max-height: 40px;;
}

.approval-check.exported,
.retirement-check.exported,
.csv-exported-flag-check{
    width:3vw;
    height:3vw;
    max-width:40px;
    max-height: 40px;
    pointer-events: none;
}

/* お知らせ項目 */
.info-list-item {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin: 10px 0;
	padding: 15px 20px;
	background-color: #FFFFFF;
	border-radius: 5px;
	box-shadow: 0 1px 3px #AAAAAA;
	color: #333333;
	font-size: 22px;
}

.info-list-item:hover {
	box-shadow: 0 1px 10px #888888;
	text-decoration: none;
}

.info-list-item:active {
	box-shadow: none;
}

/* お知らせ日付 */
.info-date {
	width: 10.5em;
}

/* お知らせNEWマーク */
.info-new {
	display: flex;
	min-width: 2.8em;
}

.new-mark {
	display: inline-block;
	margin-top: 2px;
	padding: 4px 5px 3px;
	background-color: #E91E63;
	border-radius: 2px;
	color: #FFFFFF;
	font-size: 15px;
	font-weight: bold;
	line-height: 1em;
}

/* お知らせタイトル */
.info-title {
	flex: 1;
	margin: 0 10px;
}

/* 退職見込者用 */
.retirement-prospects-title{
    padding:20px 0 10px 0;
    font-size: 24px;
    font-weight: bold;
    text-align: justify;
    text-align-last: justify;
    max-width:300px;
    width: 20%;
}

/* 汎用 */
.spacer{
    flex:1;
}
.flex-area{
    display: flex;
}
.flex-area.columns{
    flex-direction: column;
}
.flex-area.rows{
    flex-direction: row;
}
.flex-area.ct{
    justify-content: center;
}
.flex-area.lt{
    justify-content: left
}
.flex-area.rt{
    justify-content: right;
}
.flex-area.s-a{
    justify-content: space-around;
}
.flex-area.s-b{
    justify-content: space-between;
}
.flex-area.s-e{
    justify-content: space-evenly;
}
.flex-area.f-s{
    justify-content: flex-start;
}
.flex-area.f-e{
    justify-content: flex-end;
}
.flex-area.flex-one{
    flex:1;
}

.flex-area .align-self-t{
    align-self: top;
}

.flex-area .align-self-c{
    align-self: center;
}

.flex-area .align-self-b{
    align-self: bottom;
}

/* 文字の寄せ設定 */
.align-item-left{
    align-items: left;
}
.align-item-right{
    align-items: right;
}
.align-item-center{
    align-items: center;
}
.align-item-fstart{
    align-items: flex-start;
}
.align-item-fend{
    align-items: flex-end;
}
.align-item-bline{
    align-items: baseline;
}

form{
    margin: 10px auto;
}

.menu-form{
    margin:100px auto;
}

.input-form{
    border: solid 1px #333333;
}

.input-form .rows{
    border-bottom: solid 1px #333333;
}

.input-form .rows.borderless{
    border: none;
}

.item-name-area{
	font-weight: bold;
    background-color: #C7F1E3;
    border-right: solid 1px #333333;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width:20%;
    width:20%;
}

.input-form .rows:last-child{
    border-bottom: none;
}

.item-name{
    margin: 5px;
}

.input-area{
    flex-grow: 1;
    margin: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.input-area input,
.input-area select{
    max-width: 500px;
}

.ragio-group-H{
    margin-right:20px;
}
.radio-group-V{
    margin-top:5px;
}

.submit-area{
    margin-top:10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.submit-area button{
    /* width: 10%; */
    font-weight:bold;
	font-size:22px;
    padding:5px;
	background-color:#FFFFFF;
}

.submit-area .borderless{
    border:none;
}

.table,
.border-s1{
    border: solid 1px #333333;
}

.border-s1l{
    border-left: solid 1px #333333;
}

.border-s1r{
    border-right: solid 1px #333333;
}

.border-s1t{
    border-top: solid 1px #333333;
}

.border-s1b{
    border-bottom: solid 1px #333333;
}


.body-row{
    border-top: solid 1px #333333;
}

.header-row .cell{
	font-weight: bold;
    background-color: #C7F1E3;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.header-row .cell,
.body-row .cell{
    flex-grow: 1;
    padding: 0;
    border-right: solid 1px #333333;
}

.header-row .cell:last-child,
.body-row .cell:last-child{
    border-right: none;
}

.input-cell{
    display:flex;
    flex-direction: row;
    justify-content: center;
    margin:3px auto;
}

.input-cell input,
.input-cell select{
    width:95%
}

.body-row .cell .caption {
    margin: 5px;
}

.body-row .cell .caption.date {
    font-size: 19px;
}

.merge-top{
    border-bottom: solid 1px #333333;
}

.body-row .cell.merge > div{
    height:100%;
}

.body-row .cell a{
    margin:5px;
}

.body-row .cell a.margin-less{
    margin:0;
}

.cell.hidden{
    flex-grow: 0;
    width: 0%;
    padding: 0px;
    margin: 0px;
}

.cell.teeny{
    width: 5%;
}
.cell.tiny{
    width: 10%;
}
.cell.x-small{
    width: 15%;
}
.cell.small{
    width: 20%;
}
.cell.medium{
    width: 25%;
}
.cell.large{
    width: 30%;
}
.cell.x-large{
    width: 35%;
}
.cell.xx-large{
    width: 40%;
}
.cell.huge{
    width: 50%;
}

.text-l{
    text-align: left;
}
.text-r{
    text-align: right;
}
.text-c{
    text-align: center;
}

.font-12{
    font-size: 17px;
}

.text-red{
    color:#FF0000
}

.text-bold{
    font-weight: bold;
}

.w100per{
    width:100%;
}

.w90per{
    width:90%;
}

.w80per{
    width:80%;
}

.w70per{
    width:70%;
}

.w60per{
    width:60%;
}

.w50per{
    width:50%;
}

.w40per{
    width:40%;
}

.w30per{
    width:30%;
}

.w20per{
    width:20%;
}

.w10per{
    width:10%;
}

.w10per{
    width:10%;
}

.w1em{
    width:1em;
}

.w2em{
    width:2em;
}

.w3em{
    width:3em;
}

.w4em{
    width:4em;
}

.w5em{
    width:5em;
}

.w6em{
    width:6em;
}

.w7em{
    width:7em;
}

.w8em{
    width:8em;
}

.w9em{
    width:9em;
}

.w10em{
    width:10em;
}

.w15em{
    width:15em;
}

.w20em{
    width:20em;
}

.h100per{
    height:100%;
}

.h90per{
    height:90%;
}

.h80per{
    height:80%;
}

.h70per{
    height:70%;
}

.h60per{
    height:60%;
}

.h50per{
    height:50%;
}

.h40per{
    height:40%;
}

.h30per{
    height:30%;
}

.h20per{
    height:20%;
}

.h10per{
    height:10%;
}

.h10per{
    height:10%;
}

.h1em{
    height:1em;
}

.h2em{
    height:2em;
}

.h3em{
    height:3em;
}

.h4em{
    height:4em;
}

.h5em{
    height:5em;
}

.h6em{
    height:6em;
}

.h7em{
    height:7em;
}

.h8em{
    height:8em;
}

.h9em{
    height:9em;
}

.h10em{
    height:10em;
}

.margin-r10{
    margin-right:10px
}

.margin-r20{
    margin-right:20px
}

.margin-r30{
    margin-right:30px
}

.margin-r40{
    margin-right:40px
}

.margin-r50{
    margin-right:50px
}

.margin-l10{
    margin-left:10px
}

.margin-l20{
    margin-left:20px
}

.margin-l30{
    margin-left:30px
}

.margin-l40{
    margin-left:40px
}

.margin-l50{
    margin-left:50px
}

.margin-t10{
    margin-top:10px
}

.margin-b10{
    margin-bottom:10px
}

.button {
	display: inline-block;
	padding: 10px;
	background-color: #00529E;
	border: none;
	border-radius: 3px;
	box-shadow: 0 1px 3px #AAAAAA;
	color: #FFFFFF;
	line-height: 1em;
}

.button:hover {
	opacity: 0.9;
	box-shadow: 0 1px 8px #AAAAAA;
	cursor: pointer;
	text-decoration: none;
}

.button:active {
	opacity: 1;
	box-shadow: none;
}

.button.button-green {
	background-color: #43A047;
}

.button.button-red {
	background-color: #D81B60;
}

.button.button-gray {
	background-color: #607D8B;
}

.button.button-small {
	padding: 7px 5px;
	font-size: 22px;
}

.button.button-large {
	/* padding: 15px; */
	font-size: 26px;
}


.button:disabled {
	background-color: #CFD8DC !important;
	opacity: 1;
	box-shadow: none;
	cursor: not-allowed;
}

.contents-title.notice,
.notice .button-row .button,
.notice .button.back,
.button.back{
    background-color: #076700;
}

.notice .button-row .button-red{
	background-color: #D81B60;
}

.contents-title.affiliateReport,
.affiliateReport .button-row .button,
.affiliateReport .button.back{
    background-color: #2A83A2;
}

.contents-title.informationChangeReport,
.informationChangeReport .button-row .button,
.informationChangeReport .button.back
.contents-title.salaryChangeReport,
.salaryChangeReport .button-row .button,
.salaryChangeReport .button.back{
    background-color: #076700;
}

.contents-title.calculationBasisReport,
.calculationBasisReport .button-row .button,
.calculationBasisReport .button.back{
    background-color: #076700;
}

.contents-title.withdrawalReport,
.withdrawalReport .button-row .button,
.withdrawalReport .button.back{
    background-color: #D3381C;
}

.contents-title.transferReport,
.transferReport .button-row .button,
.transferReport .button.back{
    background-color: #4D5AAF;
}

.contents-title.leaveReturnReport,
.leaveReturnReport .button-row .button,
.leaveReturnReport .button.back{
    background-color: #493759;
}

.contents-title.prospectsNumberReport,
.prospectsNumberReport .button-row .button,
.prospectsNumberReport .button.back{
    /* background-color: #F7C114; */
    background-color: #BE9200;
}

#kindergarten-list{
    
}

.notice #kindergarten-list{
    border: solid 5px #076700;
} 
.affiliateReport #kindergarten-list{
    border: solid 5px #2A83A2;
} 
.informationChangeReport #kindergarten-list,
.salaryChangeReport #kindergarten-list{
    border: solid 5px #076700;
} 
.calculationBasisReport #kindergarten-list{
    border: solid 5px #076700;
} 
.withdrawalReport #kindergarten-list{
    border: solid 5px #D3381C;
} 
.transferReport #kindergarten-list{
    border: solid 5px #4D5AAF;
} 
.leaveReturnReport #kindergarten-list{
    border: solid 5px #493759;
} 
.prospectsNumberReport #kindergarten-list{
    border: solid 5px #BE9200;
} 


.contents-title.prospectsNumberReport h2{
    /* color: #000000; */
}

.contents-title.prospectsNumberReport  .vline{
    /* border-right: solid 8px  #000000 */
}

.submit-area .button,
.notice .submit-area .button{
    color:#076700;
    border: solid 5px #076700;
} 
.affiliateReport .submit-area .button{
    color:#2A83A2;
    border: solid 5px #2A83A2;
} 
.informationChangeReport .submit-area .button{
    color:#076700;
    border: solid 5px #076700;
} 
.calculationBasisReport .submit-area .button{
    color:#076700;
    border: solid 5px #076700;
} 
.withdrawalReport .submit-area .button{
    color:#D3381C;
    border: solid 5px #D3381C;
} 
.transferReport .submit-area .button{
    color:#4D5AAF;
    border: solid 5px #4D5AAF;
} 
.leaveReturnReport .submit-area .button{
    color:#493759;
    border: solid 5px #493759;
} 
.prospectsNumberReport .submit-area .button{
    color:#BE9200;
    border: solid 5px #BE9200;
} 


.color-in,
.item-name-area,
.header-row .cell,    
.notice .color-in,
.notice .item-name-area,
.notice .header-row .cell{    
    background-color:#C7F1E3
}

.affiliateReport .color-in,
.affiliateReport .item-name-area,
.affiliateReport .header-row .cell{    
    background-color:#89cee7
}

.informationChangeReport .color-in,
.informationChangeReport .item-name-area,
.informationChangeReport .header-row .cell{    
    background-color:#C7F1E3
}

.calculationBasisReport .color-in,
.calculationBasisReport .item-name-area,
.calculationBasisReport .header-row .cell{    
    background-color:#C7F1E3
}

.withdrawalReport .color-in,
.withdrawalReport .item-name-area,
.withdrawalReport .header-row .cell{    
    background-color:#ffb2a4
}

.transferReport .color-in,
.transferReport .item-name-area,
.transferReport .header-row .cell{    
    background-color:#aeb9ff
}

.leaveReturnReport .color-in,
.leaveReturnReport .item-name-area,
.leaveReturnReport .header-row .cell{    
    background-color:#be98e0
}

.prospectsNumberReport .color-in,
.prospectsNumberReport .item-name-area,
.prospectsNumberReport .header-row .cell{    
    background-color:#fce7a4
}