@charset "utf-8";
/* CSS Document */
.bg-header {
    background: linear-gradient(rgba(9, 30, 62, .1), rgba(9, 30, 62, .3)), url("/unyu/img/company/header-ttl.jpg") center center no-repeat;
    background-size: cover;
}
.table-01 {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    background: var(--white);
    border: none;
}
.table-01 th,
.table-01 td {
    display: block;
    width: 100%;
    border: none;
    padding: 10px;
    vertical-align: top;
    text-align: left;
    box-sizing: border-box;
}
.table-01 th {
    font-weight: 700;
    color: var(--white);
    background: var(--primary);
}

@media screen and (min-width: 768px) {
    .table-01 th,
    .table-01 td {
        display: table-cell;
        border-bottom: 1px solid var(--gray-ccc);
        color: var(--gray-333);
        background: var(--white);
    }
    .table-01 th {
        color: var(--gray-333);
        background: var(--white);
    }
    .table-01 tr th:first-child {
        width: 140px; 
    }
}
/* 組織図 */
.organization-chart{
	width: 100%;
	list-style: none;
	position: relative;
}
@media screen and (max-width: 500px) {
	.organization-chart{
		font-size: 85%;
	}
}
.first-fd{
	margin: 1em 0 1.8em 0!important;
}
.first-fd::after{
	content: "";
    position: absolute;
    top: 25px;
	left: 58px;
	height: 23px;
    border-left: 1px solid var(--gray-333);
}
@media screen and (max-width: 500px) {
	.first-fd::after{
		top: 19px;
	}
}
/* 第一階層 */
.first-layer {
	position: relative;
	margin: 0;
	margin-left: 0.3em;
	padding: 0;
}
.first-layer::before {
	content: "";
	position: absolute;
	top: -12px;
	left: 21px;
	height: 100%;
	border-left: 1px solid var(--gray-333);
}
.first-layer-li {
	list-style-type: none;
	position: relative;
	padding-left: 2.7em;
	margin: 1em 0;
}
.first-layer-li::before {
	content: "";
	position: absolute;
	top: 0.7em;
	left: 21px;
	width: 1.4em;
	border-top: 1px solid var(--gray-333);
}
@media screen and (max-width: 500px) {
	.first-layer-li::before {
		width: 1.2em;
	}
}
.first-layer-li:first-child {
	padding: 0.3em 0 0 2.7em;
	background-position: 1.4em 0.4em;
}

.first-layerl-li:first-child::before {
	top: 1em;
}

.first-layer-li:last-child::before {
	height: 100%;
	background-color: var(--white);
}

/* 第二階層 */
.second-layer-01 {
	position: relative;
	margin: 0;
	margin-left: 0.3em;
	padding: 0;
}
.second-layer-01::before {
	content: "";
	position: absolute;
	top: -12px;
	left: 21px;
	height: 61px;
	border-left: 1px solid var(--gray-333);
}
@media screen and (max-width: 500px) {
	.second-layer-01::before {
		height: 54px;
	}
}
.second-layer-02 {
	position: relative;
	margin: 0;
	margin-left: 0.3em;
	padding: 0;
}
.second-layer-02::before {
	content: "";
	position: absolute;
	top: -12px;
	left: 21px;
	height: 99px;
	border-left: 1px solid var(--gray-333);
}
@media screen and (max-width: 500px) {
	.second-layer-02::before {
		height: 87px;
	}
}
.second-layer-li {
	list-style-type: none;
	position: relative;
	padding-left: 2.7em;
	margin: 1em 0;
}
.second-layer-li::before {
	content: "";
	position: absolute;
	top: 0.6em;
	left: 21px;
	width: 1.4em;
	border-top: 1px solid var(--gray-333);
}
@media screen and (max-width: 500px) {
	.second-layer-li::before {
		width: 1.2em;
	}
}
.second-layer-last-li {
	list-style-type: none;
	position: relative;
	padding-left: 9em;
	margin: 1em 0;
}
.second-layer-last-li::before {
	content: "";
	position: absolute;
	top: 0.6em;
	left: 21px;
	width: 7.7em;
	border-top: 1px solid var(--gray-333);
}
@media screen and (max-width: 500px) {
	.second-layer-last-li::before {
		width: 7.5em;
	}
}
/* 第三階層 */
.list-style-none{
	list-style: none;
}
.third-layer {
	position: relative;
	margin: 0;
	margin-left: 0;
	padding: 0;
}
.third-layer::before {
	content: "";
	position: absolute;
	top: -28px;
	left: -29px;
	height: 154px;
	border-left: 1px solid var(--gray-333);
}
@media screen and (max-width: 500px) {
	.third-layer::before {
		top: -25px;
		height: 133px;
	}
}
.third-layer-li {
	list-style-type: none;
	position: relative;
	margin: 1em 0;
}
.third-layer-li::before {
	content: "";
	position: absolute;
	top: 0.6em;
	left: -28px;
	width: 1.8em;
	border-top: 1px solid var(--gray-333);
}
@media screen and (max-width: 500px) {
	.third-layer-li::before {
		width: 2.1em;
	}
}
.chart-border{
	border: 1px solid var(--gray-333);
	padding: 0.2em 1em;
	border-radius: 4px;
	background: #adcef0;
}
