@charset "utf-8";

/*-----------------------------------
タイトル
-----------------------------------*/
#career-title {
    position: relative;
    background: #8D2D2B;
    display: block;
}
#career-title .inner {
    width: calc(111dvh - 134px);
}
#career-title h2 {
    height: 7dvh;
    width: 38dvh;
    position: absolute;
    top: 3.5dvh;
    left: 5dvh;
}
#career-title .intv {
    position: absolute;
    top: 7dvh;
    left: 0;
    width: 100dvh;
    height: 44dvh;
    margin: 7dvh 0 0 5dvh;
    border-top: 1px solid #FFF;
    border-left: 1px solid #FFF;
}
#career-title .intv img {
    display: block;
    position: absolute;
    top: -2dvh;
    left: -1.5dvh;
    height: 10.5dvh;
}
#career-title .intv::after {
    position: absolute;
    bottom: -21dvh;
    left: -3dvh;
    content: '';
    width: 10dvh;
    height: 20dvh;
    background: url(../img/career/career-finger.svg) center / contain no-repeat;
}
#career-title .lead {
    color: #FFF;
    writing-mode: horizontal-tb;
    margin: 26dvh 0 0 14dvh;
    letter-spacing: 0.2em;
    position: relative;
    font-size: 6.8dvh;
}
#career-title .lead span {
    color: #FFF;
    font-size: 2.7dvh;
    line-height: 2em;
    letter-spacing: 0.1em;
    position: absolute;
    top: 30dvh;
    left: 0;
}
#career-title p {
    color: #FFF;
    font-size: 2.3dvh;
    line-height: 5.5dvh;
    writing-mode: vertical-rl;
    position: absolute;
    top: 21dvh;
    left: 59dvh;
}
#career-title .page_ttl {
    position: absolute;
    bottom: 5dvh;
    left: 12dvh;
    z-index: 1000;
    width: 81dvh;
}
#career-title .page_ttl img {
    height: 10dvh;
}

#career-title .inner.next {
    width: 53dvh;
}
#career-title .next .intv {
    width: 82%;
    height: calc(51dvh - 134px);
}

#career-title .button.c_gre {
    position: absolute;
    top: calc(88dvh - 134px);
    left: 9%;
    color: #8D2D2B;
    background-color: #FFF;
    border: 1px solid #8D2D2B;
}
#career-title .button::after {
    background: #8D2D2B;
}
#career-title .button.c_gre:hover {
    color: #FFF;
    background: #8D2D2B;
    border: 1px solid #FFF;
}
#career-title .button:hover::after {
    background: #231815;
}
#career-title ul li:nth-of-type(2) p, #career-title ul li:nth-of-type(2) h4, #career-title ul li:nth-of-type(2) .button.c_gre {
    left: 16dvh;
}
@media screen and (max-width: 768px){
    #career-title .lead {
        font-size: 4.8dvh;
        margin: 46% 0 0 14dvh;
    }
    #career-title .lead span {
        top: 108%;
    }
    #career-title.fst .intv {
        height: 46%;
    }
    #career-title.fst .intv::after {
        bottom: -60%;
    }
    #career-title.fst .lead {
        font-size: 5.5dvh;
        margin: 27% 0 0 14dvh;
    }
    #career-title p {
        top: 24%;
    }
    .button.c_gre {
        max-width: 36dvh;
    }
}

/*-----------------------------------
インタビュー
-----------------------------------*/
#interview-list {
    height: 100%;
    display: block;
    background: #8D2D2B;
    align-items: left;
}
#interview-list ul {
    width: calc(155dvh - 134px);
}
#interview-list ul li {
    float: left;
    position: relative;
}
#interview-list ul li:nth-of-type(1) {
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    margin-right: -23dvh;
    z-index: 999;
}
#interview-list ul li img {
    height: calc(99dvh - 134px);
}
#interview-list ul li p {
    position: absolute;
    top: calc(69dvh - 134px);
    left: 26dvh;
    color: #FFF;
    font-size: 2dvh;
    line-height: 1.5em;
    filter: drop-shadow(0px 0px 0.8dvh #000);
}
#interview-list ul li h4 {
    position: absolute;
    top: calc(78dvh - 134px);
    left: 26dvh;
    color: #FFF;
    font-size: 4dvh;
    line-height: 1.5em;
    filter: drop-shadow(0px 0px 0.8dvh #000);
}
#interview-list .button.c_gre {
    position: absolute;
    top: calc(88dvh - 134px);
    left: 26dvh;
    color: #8D2D2B;
    background-color: #FFF;
    border: 1px solid #8D2D2B;
}
#interview-list .button::after {
    background: #8D2D2B;
}
#interview-list .button.c_gre:hover {
    color: #FFF;
    background: #8D2D2B;
}
#interview-list .button:hover::after {
    background: #231815;
}
#interview-list ul li:nth-of-type(2) p, #interview-list ul li:nth-of-type(2) h4, #interview-list ul li:nth-of-type(2) .button.c_gre {
    left: 16dvh;
}


@media screen and (max-width:768px){
    #camptopimg {
        aspect-ratio: 360 / 535;
    }
    #camptopimg img {
        height: 70%;
    }
}

@media screen and (max-width:768px){
    #interview-list ul li:nth-of-type(1) {
        clip-path: polygon(24% 0%, 100% 0%, 80% 100%, 0% 100%);
    }
    #interview-list ul li img {
        height: calc(100dvh - 134px);
    }
    #interview-list .button.c_gre,
    #career-title .button.c_gre {
        top: initial;
        bottom: 6%;
    }
}

/*-----------------------------------
footer
-----------------------------------*/
footer .new {
    display: none;
}

footer .career {
    display: flex;
}