.aso-chart {
overflow-x: auto;
padding: 10px 0 6px;
text-align: center;
}
.aso-chart ul.aso-tree,
.aso-chart ul {
display: flex;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.aso-chart li {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
padding: 26px 10px 0;
} .aso-chart li > ul::before {
content: "";
position: absolute;
top: -26px;
left: 50%;
width: 0;
height: 26px;
border-left: 2px solid #c4ced4;
}
.aso-chart li > ul {
margin-top: 26px;
} .aso-chart li::before,
.aso-chart li::after {
content: "";
position: absolute;
top: 0;
right: 50%;
width: 50%;
height: 26px;
border-top: 2px solid #c4ced4;
}
.aso-chart li::after {
right: auto;
left: 50%;
border-left: 2px solid #c4ced4;
}
.aso-chart li:only-child::before,
.aso-chart li:only-child::after {
display: none;
}
.aso-chart li:only-child {
padding-top: 0;
}
.aso-chart li:first-child::before,
.aso-chart li:last-child::after {
border: 0 none;
}
.aso-chart li:last-child::before {
border-right: 2px solid #c4ced4;
}
.aso-chart ul.aso-tree > li::before,
.aso-chart ul.aso-tree > li::after {
display: none;
}
.aso-chart ul.aso-tree > li {
padding-top: 0;
} .aso-box {
background: #ffffff;
border: 1px solid #cfd8dc;
border-radius: 12px;
padding: 14px 18px 12px;
width: 260px;
max-width: 430px;
box-sizing: border-box;
}
.aso-title {
border-bottom: 1px solid #d9dee2;
padding-bottom: 8px;
margin-bottom: 9px;
}
.aso-title-id {
display: block;
color: #1593d6;
font-weight: 700;
font-size: 17px;
line-height: 1.25;
}
.aso-title-en {
display: block;
color: #1593d6;
font-style: italic;
font-size: 14px;
line-height: 1.3;
}
.aso-members p {
margin: 0 0 7px;
color: #3c4043;
}
.aso-members p:last-child {
margin-bottom: 0;
}
.aso-member-name {
display: block;
font-size: 14.5px;
line-height: 1.35;
color: #2b2f33;
}
.aso-member-role {
display: block;
font-size: 13px;
line-height: 1.3;
color: #68737b;
} @media (max-width: 820px) {
.aso-chart {
overflow-x: visible;
text-align: center;
}
.aso-chart ul {
flex-direction: column;
align-items: center;
}
.aso-chart li {
padding: 18px 0 0;
}
.aso-chart li::before,
.aso-chart li::after,
.aso-chart li > ul::before {
display: none;
}
.aso-chart li > ul {
margin-top: 18px;
}
.aso-chart li:only-child {
padding-top: 18px;
}
.aso-chart ul.aso-tree > li {
padding-top: 0;
}
.aso-box {
min-width: 0;
width: 100%;
max-width: 430px;
}
} .aso-own {
padding: 10px 0 6px;
text-align: center;
}
.aso-own-grid {
display: grid;
grid-template-columns: repeat(var(--aso-cols, 2), 1fr);
row-gap: 26px;
column-gap: 0;
max-width: 880px;
margin: 0 auto;
align-items: stretch;
}
.aso-own-cell {
position: relative;
display: flex;
justify-content: center;
align-items: stretch;
padding: 0 12px;
box-sizing: border-box;
}
.aso-own-top {
grid-column: 1;
grid-row: 1;
}
.aso-own-mid {
grid-row: 2;
}
.aso-own-has-bottom .aso-own-top::after,
.aso-own-has-bottom .aso-own-mid::after {
content: "";
position: absolute;
left: 50%;
bottom: -28px;
width: 0;
height: 28px;
border-left: 2px solid #c4ced4;
z-index: 2;
}
.aso-own-join {
grid-column: 1 / -1;
grid-row: 3;
border-top: 2px solid #c4ced4;
position: relative;
height: 0;
}
.aso-own-join::after {
content: "";
position: absolute;
left: 50%;
top: 0;
width: 0;
height: 28px;
border-left: 2px solid #c4ced4;
z-index: 2;
}
.aso-own-bottom {
grid-column: 1 / -1;
grid-row: 4;
}
.aso-own-box {
background: #ffffff;
border: 1px solid #cfd8dc;
border-radius: 12px;
padding: 12px 22px 11px;
min-width: 230px;
max-width: 430px;
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
}
.aso-own-name {
color: #1593d6;
font-weight: 700;
font-size: 16.5px;
line-height: 1.3;
}
.aso-own-pct {
color: #3c4043;
font-weight: 700;
font-size: 15.5px;
line-height: 1.35;
}
@media (max-width: 820px) {
.aso-own-grid {
grid-template-columns: 1fr;
row-gap: 18px;
}
.aso-own-top,
.aso-own-mid,
.aso-own-bottom {
grid-column: 1;
grid-row: auto;
}
.aso-own-join,
.aso-own-has-bottom .aso-own-top::after,
.aso-own-has-bottom .aso-own-mid::after {
display: none;
}
.aso-own-box {
min-width: 0;
width: 100%;
max-width: 430px;
}
}