@charset "UTF-8";



.p-index{

    padding: var(--section-padding);

}

.p-index__list{

    display: flex;

    flex-wrap: wrap;

}

.p-index__item{

    width: var(--col-width-2);

    margin: var(--col-margin) var(--col-margin) 0 0;

    border-radius: var(--radius-base);

    overflow: hidden;

    box-shadow: var(--shadow-base);

}

.p-index__item:nth-child(2n){

    margin-right: 0;

}

.p-index__item:nth-child(-n+2){

    margin-top: 0;

}

@media screen and (max-width: 767px) {

    .p-index__list{

        display: block;

    }

    .p-index__item{

        margin: 0;

    }

    .p-index__item:nth-child(n+2){

        margin-top: var(--col-margin);

    }

}



.p-title{

    background: #fff;

}

.p-title__wrapper{

    padding: var(--section-padding-small);

    text-align: center;

}

.p-title__title{

    font-size: var(--fs-title);

    font-weight: 500;

    line-height: var(--lh-tight);

    color: var(--main-color);

    font-family: var(--hand-font-family);

}

.p-title__job{

    font-size: var(--fs-title-small);

    line-height: var(--lh-tight);

    margin-top: calc(15 * var(--px));

}

.p-title__name{

    font-size: var(--fs-title-large);

    font-weight: bold;

    line-height: var(--lh-tight);

    margin-top: calc(5 * var(--px));

}

@media screen and (max-width: 767px) {

    .p-title__job{

        margin-top: calc(7 * var(--px));

    }

    .p-title__name{

        margin-top: calc(2 * var(--px));

    }

}



.p-interview{

    overflow: hidden;

    padding: var(--section-padding);

}

.p-interview__title{

    font-size: var(--fs-title-small);

    line-height: var(--lh-tight);

    font-weight: bold;

    color: var(--main-color);

}

.p-interview__text{

    font-size: var(--fs-base);

    line-height: var(--lh-base);

    margin-top: calc(15 * var(--px));

}

.p-interview__text + .p-interview__title{

    margin-top: calc(50 * var(--px));

}

@media screen and (min-width: 768px) {

    .p-interview__item{

        display: flex;

        position: relative;

        padding: 0 0 0 calc(700 * var(--px));

    }

    .p-interview__item:nth-child(n+2){

        margin-top: calc(75 * var(--px));

    }

    .p-interview__image{

        width: calc(50vw + 20px);

        height: 100%;

        position: absolute;

        top: 0;

        left: calc(-50vw + (680 * var(--px)));

        border-radius: 0 var(--radius-large) var(--radius-large) 0;

        overflow: hidden;

    }

    .p-interview__image img{

        width: 100%;

        height: 100%;

        object-fit: cover;

    }

    .p-interview__image img.object-position-left-0{

        object-position: 15% center;

    }

    .p-interview__image img.object-position-left-25{

        object-position: 25% center;

    }

    .p-interview__image img.object-position-left-60{

        object-position: 60% center;

    }

    .p-interview__image img.object-position-left-100{

        object-position: 100% center;

    }

    .p-interview__item:nth-child(2n){

        padding: 0 calc(700 * var(--px)) 0 0;

    }

    .p-interview__item:nth-child(2n) .p-interview__image{

        left: auto;

        right: calc(-50vw + (680 * var(--px)));

        border-radius: var(--radius-large) 0 0 var(--radius-large);

    }

    .p-interview__main{

        padding: calc(50 * var(--px)) 0 calc(50 * var(--px)) calc(50 * var(--px));

        display: flex;

        flex-direction: column;

        justify-content: center;

    }

    .p-interview__item:nth-child(n+2) .p-interview__main{

        padding: calc(50 * var(--px)) calc(50 * var(--px)) calc(50 * var(--px)) 0;

    }

}

@media screen and (max-width: 767px) {

    .p-interview__image{

        margin: 0 calc(-1 * var(--wrapper-sp-padding));

    }

    .p-interview__image img{

        width: 100%;

        height: auto;

    }

    .p-interview__title{

        margin-top: calc(20 * var(--px));

    }

    .p-interview__text{

        margin-top: calc(10 * var(--px));

    }

    .p-interview__text + .p-interview__title{

        margin-top: calc(30 * var(--px));

    }

    .p-interview__item:nth-child(n+2){

        margin-top: calc(35 * var(--px));

    }

}



.p-timeline{

    padding: var(--section-padding);

    background: var(--background-light);

}

.p-timeline__wrapper{

    display: flex;

    background: var(--gray-color-light);

    border-radius: var(--radius-base);

    overflow: hidden;

    box-shadow: var(--shadow-base);

}

.p-timeline__wrapper + .p-timeline__wrapper{

    margin-top: calc(50 * var(--px));

}

.p-timeline__title{

    width: calc(220 * var(--px));

    background: var(--main-color);

    font-size: var(--fs-title-small);

    color: #fff;

    font-weight: bold;

    display: flex;

    align-items: center;

    justify-content: center;

}

.p-timeline__main{

    flex-grow: 1;

    padding: calc(40 * var(--px));

}

.p-timeline__main .p-timeline__list{

    margin: 0 auto;

}

.p-timeline__note{

    font-weight: normal;

    font-size: var(--fs-base-tiny);

    line-height: var(--lh-medium);

    margin-top: calc(5 * var(--px));

}

@media screen and (min-width: 768px){

    .p-timeline__list{

        display: flex;

        position: relative;

        width: 86%;

        max-width: calc(1283 * var(--px));

        padding: calc(150 * var(--px)) 0;

    }

    .p-timeline__main .p-timeline__list{

        width: 89%;

    }

    .p-timeline__list::before{

        content: "";

        background: var(--main-color);

        position: absolute;

        top: calc(50% - calc(5 * var(--px)));

        height: calc(10 * var(--px));

        width: calc(100% - (100% / (7 * 2)) - (100% / (7 * 2)));

        left: calc(100% / (7 * 2));

    }

    .p-timeline__item{

        width: calc(100% / 7);

        position: relative;

        text-align: center;

    }

    .p-timeline__item::after{

        content: "";

        width: calc(2 * var(--px));

        height: calc(50 * var(--px));

        position: absolute;

        top: calc(40 * var(--px));

        left: calc(50% - calc(1 * var(--px)));

        background: var(--main-color);

    }

    .p-timeline__item:nth-child(2n):after{

        top: calc(-50 * var(--px));

    }

    .p-timeline__time{

        background: var(--main-color);

        width: calc(100 * var(--px));

        height: calc(40 * var(--px));

        border-radius: calc(15 * var(--px));

        font-size: var(--fs-base);

        color: #fff;

        display: flex;

        align-items: center;

        justify-content: center;

        margin: 0 auto;

        font-weight: bold;

    }

    .p-timeline__text{

        width: 180%;

        height: calc(100 * var(--px));

        display: flex;

        align-items: center;

        justify-content: center;

        border: calc(2 * var(--px)) solid var(--main-color);

        background: #fff;

        position: absolute;

        top: calc(90 * var(--px));

        padding: calc(14 * var(--px));

        left: -40%;

        font-size: var(--fs-base);

        line-height: var(--lh-tight);

        border-radius: var(--radius-base);

        font-weight: bold;

        display: flex;

        flex-direction: column;

    }

    .p-timeline__item:nth-child(2n) .p-timeline__text{

        top: calc(-150 * var(--px));

    }

}

@media screen and (max-width: 767px) {

    .p-timeline__wrapper{

        display: block;

    }

    .p-timeline__wrapper + .p-timeline__wrapper{

        margin-top: calc(30 * var(--px));

    }

    .p-timeline__main{

        padding: calc(20 * var(--px));

    }

    .p-timeline__title{

        width: 100%;

        padding: calc(10 * var(--px));

    }

     .p-timeline__item{

        display: flex;

        padding: calc(15 * var(--px));

        background: #fff;

        box-shadow: var(--shadow-base);

        border-radius: var(--radius-base);

        position: relative;

    }

    .p-timeline__item:not(:last-child)::after{

        content: "";

        display: block;

        width: calc(30 * var(--px));

        height: calc(15 * var(--px));

        top: calc(100% + (12.5 * var(--px)));

        left: calc(50% - (15 * var(--px)));

        background: var(--main-color);

        position: absolute;

        clip-path: polygon(0 0, 100% 0, 50% 100%);

    }

    .p-timeline__item:nth-child(n+2){

        margin-top: calc(40 * var(--px));

    }

    .p-timeline__time{

        font-size: var(--fs-base);

        color: #fff;

        flex-shrink: 0;

        background: var(--main-color);

        border-radius: var(--radius-base);

        width: calc(60 * var(--px));

        height: calc(30 * var(--px));

        display: flex;

        align-items: center;

        justify-content: center;

    }

    .p-timeline__text {

        font-size: var(--fs-base);

        line-height: var(--lh-tight);

        font-weight: bold;

        margin-left: calc(15 * var(--px));

        display: flex;

        justify-content: center;

        flex-direction: column;

    }

    .p-timeline__note{

        margin-top: calc(2 * var(--px));

    }

}



.p-back{

    background: #fff;

    padding: var(--section-padding);

}