@charset "utf-8";

/*-----------------------------------
タイトル
-----------------------------------*/
#career-title {
    position: relative;
    background: #8D2D2A;
    display: block;
}
#career-title.data1 {
    background: url(../img/career/data/career-data-bg01.jpg) center left / cover no-repeat;
}
#career-title.data1 .inner {
    width: calc(179dvh - 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 .img1a {
    position: absolute;
    top: 19%;
    right: 9%;
    margin: auto;
    width: 23%;
}
#career-title .img1a img {
    display: block;
}
#career-title .img1a p {
    position: relative;
    top: 3dvh;
    left: auto;
    font-size: 2dvh;
    line-height: 1.5em;
    writing-mode: horizontal-tb;
    text-align: center;
}
@media screen and (max-width: 768px){
    #career-title .lead {
        font-size: 4.8dvh;
        margin: 16% 0 0 14dvh;
    }
    #career-title .lead span {
        top: 108%;
    }
    #career-title .intv {
        height: 48%;
    }
}


#data2 {
    position: relative;
    background: #000;
    width: calc(144dvh - 134px);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 10% 100%);
    margin-left: -14dvh;
    z-index: 20;
}
#data2 .photo {
    position: absolute;
    left: 7%;
    bottom: 0;
    z-index: 21;
    width: 87%;
}
#data2 .img2a, #data2 .img2b {
    display: inline-block;
    width: 49%;
    height: 75%;
    text-align: center;
    vertical-align: top;
}
#data2 .img2a img, #data2 .img2b img {
    height: 30%;
    width: auto;
}
#data2 .img2a p, #data2 .img2b p {
    position: relative;
    top: 3dvh;
    font-size: 2dvh;
    line-height: 1.5em;
    writing-mode: horizontal-tb;
    text-align: center;
    color: #FFF;
}
#data2 .img2a p span, #data2 .img2b p span {
    font-size: 0.7em;
    line-height: 1.5em;
}

#data3 {
    position: relative;
    background: #8D2D2B;
    width: calc(95dvh - 134px);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 10% 100%);
    margin-left: -8dvh;
    z-index: 30;
    padding-right: 5vh;
}
#data3 .img3 {
    width: 100%;
    padding: 15%;
    text-align: center;
}
#data3 .img3 img {
    height: 40%;
    width: auto;
}
#data3 .img3 p {
    position: relative;
    top: 3dvh;
    font-size: 2dvh;
    line-height: 1.5em;
    writing-mode: horizontal-tb;
    color: #FFF;
    padding-left: 12%;
}

#data4 {
    position: relative;
    background: #000;
    width: calc(144dvh - 134px);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 10% 100%);
    margin-left: -14dvh;
    z-index: 40;
}
#data4 .photo {
    position: absolute;
    left: 35%;
    bottom: 0;
    width: 56%;
}
#data4 .photo4b {
    position: absolute;
    left: 2%;
    top: 0;
    padding: 29% 0 0;
    width: 24%;
}
#data4 .img4a, #data4 .img4b {
    display: inline-block;
    width: 49%;
    height: 75%;
    text-align: center;
    vertical-align: top;
}
#data4 .img4a img, #data4 .img4b img {
    height: 30%;
    width: auto;
}
#data4 .img4a p, #data4 .img4b p {
    position: relative;
    top: 3dvh;
    font-size: 2dvh;
    line-height: 1.5em;
    writing-mode: horizontal-tb;
    text-align: center;
    color: #FFF;
}
#data4 .img4a p span, #data4 .img4b p span {
    font-size: 0.7em;
    line-height: 1.5em;
}

#data5 {
    position: relative;
    background: #8D2D2B;
    width: calc(195dvh - 134px);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 7% 100%);
    margin-left: -14dvh;
    z-index: 50;
    padding: 0 10vh 0 10vh;
}
#data5 .img5a, #data5 .img5b, #data5 .img5c {
    position: relative;
    width: 33%;
    height: 73%;
    text-align: center;
    padding: 0;
}
#data5 .img5c {
    margin-top: -5%;
}
#data5 img {
    padding: 3% 0 0;
    width: 70%;
}
#data5 .img5c img {
    padding: 0 4% 0 0;
    width: 79%;
}
#data5 p {
    position: relative;
    top: 2dvh;
    font-size: 2dvh;
    line-height: 1.5em;
    writing-mode: horizontal-tb;
    color: #FFF;
    padding-left: 5%;
}
#data5 .img5c p {
    top: 5dvh;
    padding-left: 0;
}

#data6 {
    position: relative;
    background: #000 url(../img/career/data/career-data-bg06a.jpg) 9% bottom / 57% auto no-repeat;
    width: calc(150dvh - 134px);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 10% 100%);
    margin-left: -14dvh;
    z-index: 60;
    padding-right: 6dvh;
}
#data6 .photo {
    position: absolute;
    right: -3%;
    bottom: 0;
    width: 45%;
}
#data6 .photo6b {
    position: absolute;
    left: 2%;
    top: 0;
    padding: 29% 0 0;
    width: 24%;
}
#data6 .img6a, #data6 .img6b {
    display: inline-block;
    width: 49%;
    height: 75%;
    text-align: center;
    vertical-align: top;
}
#data6 .img6a img {
    height: 30%;
    width: auto;
}
#data6 .img6b img {
    height: 40%;
    width: auto;
}
#data6 .img6a p, #data6 .img6b p {
    position: relative;
    top: 3dvh;
    font-size: 2dvh;
    line-height: 1.5em;
    writing-mode: horizontal-tb;
    text-align: center;
    color: #FFF;
}
#data6 .img6a p span, #data6 .img6b p span {
    font-size: 0.7em;
    line-height: 1.5em;
}

#data7 {
    position: relative;
    background: #000 url(../img/career/data/career-data-bg07.svg) 34% center / cover no-repeat;
    width: calc(130dvh - 134px);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 10% 100%);
    margin-left: -14dvh;
    z-index: 70;
}
#data7 .photo {
    position: absolute;
    left: 30%;
    bottom: 0;
    width: 39%;
    z-index: 71;
}
#data7 .img7 {
    display: inline-block;
    width: 84%;
    height: 75%;
    text-align: center;
    vertical-align: top;
    z-index: 72;
    margin-left: 10%;
}
#data7 .img7 img {
    width: 100%;
}
#data7 .img7 p {
    position: relative;
    top: 3dvh;
    font-size: 2dvh;
    line-height: 2em;
    writing-mode: horizontal-tb;
    text-align: center;
    color: #FFF;
    text-shadow: #000 1px 0 10px;
}
#data7 .img7 p span {
    font-size: 0.7em;
    line-height: 1.5em;
}
#data7 .img7 p span.em {
    font-size: 1.8em;
}

/*-----------------------------------
インタビュー
-----------------------------------*/
#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(0% 0%, 100% 0%, 75% 100%, 10% 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%;
    }
}


.img_area {
    width: 1px;
    height: 100%;
    position: relative;
    z-index: 999;
}
.img_area::after {
    content: "";
    height: 100%;
    position: absolute;
}
.img_area.img_data2::after {
    background: url(../img/career/data/career-data-bg02.png) no-repeat bottom left / contain;
    width: calc(131dvh - 130px);
    height: 53%;
    bottom: 0;
    left: -7vh;
}
.img_area.img_data4::after {
    background: url(../img/career/data/career-data-bg04a.png) no-repeat bottom left / contain;
    width: calc(128dvh - 130px);
    height: 40%;
    bottom: 14%;
    left: -11vh;
}
.img_area.img_data6::after {
    background: url(../img/career/data/career-data-bg06b.png) no-repeat bottom left / contain;
    width: calc(124dvh - 130px);
    height: 41%;
    bottom: 0;
    left: -57vh;
}

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

footer .career {
    display: flex;
}