main > header {
    background:url(../up_load_files/page_header/career.jpg) center center / cover no-repeat;
}

main .interview {
    padding:20px;
    background:#0b76b8;
    border-radius:4px;
    position:relative;
}
main .interview > img {
    position:absolute;
    top:-26px;
    right:-20px;
}
main .interview h2 ,
main .interview h3 ,
main .interview p {
    color:#fff;
}
main .interview h3 {
    font-size:1.8em;
    line-height:1.6;
}
html[lang="my"] body main .interview h3 {
    font-size:1.3em;
}
main .interview > p {
    padding:0;
}

main .schedule-3 h2 {
    color:#ee827c;
}
main .schedule-3 article {
    background:#ee827c;
    border-radius:4px;
    padding:20px;
    margin-bottom:20px;
    color:#fff;
    position:relative;
}
main .schedule-3 article h3 {
    padding-left:20px;
}
main .schedule-3 article h3 span {
    position:absolute;
    top:-20px;
    left:-20px;
    display:block;
    width:60px;
    height:60px;
    background:#ee827c;
    padding-top:15px;
    font-size:1.4em;
    font-weight:bold;
    text-align:center;
    border-radius:30px;
}
main .schedule-3 article p {
    padding:0;
}

main .schedule-4 {
    background:#eee;
}
main .schedule-4 article {
    background:#fff;
    padding:20px;
    margin-bottom:20px;
    border-radius:4px;
}

/* 棒グラフ */
.flex article:has(.graph-wrap) {
    padding-right:30px;
    overflow-x:auto;
    padding-bottom:20px;
}
.graph-wrap {
    position:relative;
    min-width:520px;
}
.graph-wrap .label-column {
    position:relative;
    height:var(--height);
}
.graph-wrap .label-column span {
    color:var(--color-green);
    position:absolute;
    bottom:-0.5em;
    left:-60px;
    width:60px;
    text-align:right;
    padding-right:10px;
}
.graph-wrap .label-column div {
    background:var(--color-cream);
    border-bottom:dotted 1px var(--color-green);
    border-left:solid 2px var(--color-green);
    height:calc(var(--height) / var(--columns));
    margin-left:60px;
    position:relative;
}
.graph-wrap .label-column div:last-of-type {
    border-bottom:solid 2px var(--color-green);
}
.graph-wrap .label-column > span {
    position:absolute;
    top:-1em;
    left:0;
    width:fit-content;
    z-index:2;
}
.graph-wrap .label-row {
    display:grid;
    grid-template-columns: repeat(var(--rows), 1fr);
    margin-left:60px;
    padding-top:10px;
}
.graph-wrap .label-row div {
    display:flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
}
.graph-wrap .graph {
    display:grid;
    grid-template-columns: repeat(var(--rows), 1fr);
    position:absolute;
    top:0;
    right:0;
    width:calc(100% - 60px);
    height:var(--height);
}
.graph-wrap .graph div {
    --counter: var(--height) / var(--max);
    position: relative;
    background:var(--color-green);
    margin-inline:15%;
    margin-top:calc(var(--counter) * (var(--max) - var(--start)));
    bottom:0;
}
.graph-wrap .graph div span {
    background:var(--color-white);
    border:solid 2px var(--color-green);
    border-radius:10px;
    padding:10px;
    width:100px;
    position:absolute;
    top:-20px;
    left:50%;
    translate: -50% 0;
    z-index:2;
    text-align:center;
}


/* Looking for Work */
.looking-for-work {
    gap:20px;
    background-image: linear-gradient(to bottom, transparent 8px, var(--color-lightgray) 9px, transparent 9px);
    background-size: 100% var(--height);
    margin-top:20px;
}
.looking-for-work > div {
    flex:1;
    overflow-x: auto;
    overflow-y: visible;
    position:relative;
    top:-15px;
}
.looking-for-work > div .flex {
    gap:20px;
    min-width:800px;
}
.looking-for-work ul {
    list-style:none;
    margin-left:0;
    background:#fff;
}
.looking-for-work ul li {
    width:150px;
    height:var(--height);
    text-align:right;
    color:var(--color-orange);
    font-size:16px;
    font-weight:bold;
    font-family: 'Bahnschrift Regular';
    padding-right:40px;
    position:relative;
}
.looking-for-work ul li::after {
    content:'';
    width:30px;
    height:30px;
    border-radius:100%;
    background:var(--color-orange);
    position:absolute;
    right:0;
    top:-7px;
}
.looking-for-work ul li::before {
    content:'';
    width:10px;
    height:calc( var(--height) + 20px);
    border-radius:9999px;
    background:var(--color-cream);
    position:absolute;
    right:10px;
    top:calc( (var(--height) / 2) * -1);
}
.looking-for-work > div .flex div {
    flex:1;
    position:relative;
}
.looking-for-work > div .flex div p {
    position:absolute;
    top:calc(var(--start) * var(--height) - var(--height));
    width:100%;
    line-height:1.4;
    text-align:left;
}
.looking-for-work > div .flex div p.box {
    background:var(--color-blue);
    padding:10px;
    color:var(--color-white);
    border-radius: 10px;
}
.looking-for-work > div .flex div p.box::before {
    content:'';
    background:var(--color-blue);
    width:20px;
    height:calc(var(--length) * var(--height) - 15px);
    position:absolute;
    left:0;
    z-index: -1;
    clip-path: polygon(50% 100%, 0 calc(100% - 10px), 0 0, 100% 0, 100% calc(100% - 10px));
}
.looking-for-work > div .flex div p.bar {
    padding:10px 20px;
    background:#fff;
    width:fit-content;
}
.looking-for-work > div .flex div p.bar::before {
    content:'';
    background:var(--color-green);
    width:10px;
    height:calc(var(--length) * var(--height) - 15px);
    position:absolute;
    left:0;
    z-index: 2;
    border-radius: 9999px;
}



/** Media Query **/
@media only screen and (max-width : 1120px) {
    .flex:has(.graph-wrap) {
        flex-direction: column;
        gap:60px;
    }
    .flex:has(.graph-wrap) > * {
        width:calc(100% - 40px);
        max-width:800px;
        margin-inline:auto;
    }
}
@media only screen and (max-width : 640px) {
    .schedule-3 article ,
    .schedule-4 article  {
        width:100% !important;
        margin-bottom:80px;
    }
}