@charset "UTF-8";
/* 日本下水道事業団コーポレートサイト 事業団概要用CSS */

/*--------------------------------------------------------------------------- 事業団概要 */

/*GAIYO-LIST*/

.gaiyo .gaiyoList li {
	line-height: 1.7;
	position: relative;
}

.gaiyo .gaiyoList li:not(.noHead) {
	padding-left: 20px;
}

.gaiyo .gaiyoList li:not(:first-child) {
	margin-top: 10px;
}

.gaiyo .gaiyoList li .listHead {
	display: block;
	font-weight: 700;
	position: absolute;
	top: 0;
	left: 0;
}

/*GAIYO-FLOW*/

.gaiyo .gaiyoFlow {
	border-bottom: 1px solid #dee3e3;
}

.gaiyo .gaiyoFlowInner {
	
}

.gaiyo .flowTitle {
	width: 100%;
    height: auto;
    font-size: 1.8rem;
    font-weight: 700;
    padding: 18px 15px;
    color: #0864c7;
    background-color: #ebf7fd;
    border-top: 2px solid #0864c7;
    border-left: 1px solid #0864c7;
}

.gaiyo .flowTitle .time {
	display: block;
    font-size: 1.4rem;
	margin-bottom: 2px;
}

.gaiyo .gaiyoFlowInner .gaiyoList {
	padding-left: 15px;
    padding-top: 18px;
    padding-bottom: 40px;
    border-left: 1px solid #dee3e3;
}

.gaiyo .gaiyoFlowInner:last-child .gaiyoList {
	padding-bottom: 20px;
}

/*GAIYO-PLAN*/

.gaiyo .gaiyoPlan {
	width: 100%;
	margin-top: 20px;
}

.gaiyo .gaiyoPlan .gaiyoList {
	padding-left: 0;
}

.gaiyo .gaiyoPlan .gaiyoList.intro {
	margin-bottom: 20px;
}
.dtframe {display:inline-block !important;padding:2px 12px;margin-left:15px !important;border:#666 1px dotted;border-radius:20px !important;font-size:0.75em !important;COLOR:#666;letter-spacing:normal;}


/*----------------------------人事発令折り畳みBOX用*/
.hatsureiList:last-of-type {border-bottom: 1px solid #dee3e3;}
.hatsureiYear {
	display: block;
    font-size: 1.6rem;
	font-weight: 700;
    padding: 20px 32px 20px 0;
	border-top: 1px solid #dee3e3;
	transition: all 200ms ease;
}
.hatsureiYear.active {color: #0564c8;}
.hatsureiYear:after {opacity: 1;background: url(/common/images/accordion-gr.svg) center center / 14px 10px no-repeat;}
.hatsureiListInner {width: 100vw;margin-left: -20px;line-height:1.8em !important;}
.hatsureiBox {
	padding: 10px;
	padding-bottom: 0;
	background-color: #fff;
	margin-bottom: 20px;
	overflow: hidden;
}
.hatsureiBoxInner {
	display: flex !important;
	flex-wrap: wrap;
	border: 1px solid #dee3e3;
	border-top: 2px solid #787e8a;
	background-color: #fff;
	margin-bottom: 20px;
}
.hatsureiBoxInner dt{
	display: flex !important;
	width: 80px;
	font-size: 1.2rem;
	color: #787e8a;
    padding: 15px 10px;
	border-right: 1px solid #dee3e3;
	border-bottom: 1px solid #dee3e3;
}
.hatsureiBoxInner dd a{display: flex !important;padding: 12px 10px;border-bottom: 1px solid #dee3e3;}
.hatsureiBoxInner dt:last-of-type,　.hatsureiBoxInner dd:last-of-type {border-bottom: none;}
.hatsureiBoxInner .hatsureiBoxLink {display: block;}
.hatsureiBoxInner .hatsureiBoxLink:not(:first-of-type) {margin-top: 5px;}
.hatsureiBoxInner .hatsureiBoxLink .txtLink {color: inherit;}
.jinjiFrm{color:#fff;line-height:2em ;font-size:0.85em !important;padding:3px 20px !important;background-color:#0096e6 !important;margin:5px 20px 5px 0 !important;}

h4.contentsSubTitle {
	display:inline-block !important;
	line-height:　2.2 rem !important;
	font-size: 1.6rem;
    font-weight: 700;
    padding: 10px;
	margin: 1px 15px 20px 0px !important;
}

/*----------------------------HOVER*/

.hatsureiYear.hover {color: #0564c8;text-decoration: underline;}
.hatsureiYear.hover:after {background: url(/common/images/accordion-bl.svg) center center / 14px 10px no-repeat;}
.hatsureiYear.active:after {background: url(/common/images/accordion-bl.svg) center center / 14px 10px no-repeat;}


@media (min-width: 481px) and (max-width: 768px) { 
/*------------------------------------------------------ TAB用 人事発令折り畳みBOX用 */
	.hatsureiListInner {width: 100%;margin-left: 0;}
	.hatsureiBox {padding: 30px;}
	.hatsureiBoxInner {margin-bottom: 30px;}
}


/*以下 PC 用----------------------------------------------*/

@media print, screen and (min-width: 769px) {
	
/*--------------------------------------------------------------------------- 事業団概要 */

/*GAIYO-LIST*/
	
	.gaiyo .gaiyoList li:not(.noHead) {padding-left: 25px;}
	
/*GAIYO-FLOW*/
	
	.gaiyo .flowTitle {font-size: 2rem;padding: 20px;}	
	.gaiyo .flowTitle .time {font-size: 1.6rem;}	
	.gaiyo .gaiyoFlowInner .gaiyoList {padding-left: 20px;padding-top: 20px;}
	
/*----------------------------------------------------------------- 人事発令折り畳みBOX用 */
	.hatsureiListInner {width: 100%;margin-left: 0;}	
	.hatsureiBox {display: flex;flex-wrap: wrap;align-items: flex-start;padding: 30px;}
	.hatsureiBoxInner {width: 310px;transition: box-shadow 200ms ease;}
	.hatsureiBoxInner:hover {box-shadow: 0 4px 10px #cfd6d6;}
	.hatsureiBoxInner:nth-child(2n+1) {margin-right: 20px;}
}