.org-chart{--item-width:12rem;--line-color:var(--color-gray);--line-width:24px; @media screen and (max-width:767px){--line-width:16px;}width:fit-content;margin-left:auto;margin-right:auto;margin-top:var(--s4);margin-bottom:var(--s4); .org-chart-grid{display:grid;grid-template-columns:repeat(2,minmax(5rem,var(--item-width)));gap:var(--line-width);grid-template-areas:"board auditor" "president . ";align-items:start;line-height:1.5;position:relative; .item{background:var(--color-gray);border-radius:var(--s1);line-height:1.5;text-align:center;font-weight:bold;color:var(--color-white);padding:var(--s1) var(--s3);position:relative;z-index:1;} .board{grid-area:board; &::after{content:"";display:block;width:var(--line-width);height:1px;border-bottom:1px solid var(--line-color);position:absolute;top:1rem;right:calc(var(--line-width) * -1);}} .auditor{grid-area:auditor;} .president{grid-area:president; &::before{content:"";display:block;width:1px;height:var(--line-width);border-left:1px solid var(--line-color);position:absolute;top:calc(var(--line-width) * -1);left:50%;}}} .org-chart-list{position:relative;line-height:1.5;ul{list-style:none;padding-left:calc(var(--line-width) * 2);position:relative; @media screen and (max-width:767px){padding-left:calc(var(--line-width) / 2);}}li{padding-top:1rem;padding-left:var(--line-width);position:relative;} li:has(ul)+li{padding-top:2rem;} >ul>li:first-child{padding-top:3rem;} li::before{content:"";display:block;width:1px;height:100%;border-left:1px solid var(--line-color);position:absolute;top:0;left:0;} li:last-child::before{height:2rem;} li>span{display:inline-block;width:fit-content;background:var(--color-gray);border-radius:var(--s1);line-height:1.5;font-weight:bold;color:var(--color-white);padding:var(--s1) var(--s3);position:relative;z-index:1; &::before{content:"";display:block;height:1px;width:var(--line-width);border-bottom:1px solid var(--line-color);position:relative;top:calc(1.5rem / 2);left:calc((var(--line-width) * -1) - 1rem);}}}}