@charset "utf-8";

.mb01 {
        margin-bottom: 1rem;
}

#interview-detail .interview-content p {
        margin-top: -1rem;
        letter-spacing: 0.05em;
}

/* top-view */
#interview-detail .detail-title-box .title-body {
        position: relative;
        max-width: calc(1200px + 6%);
        padding-left: 3%;
        padding-right: 3%;
        margin: 4rem auto 0;
}

.top-img-box {
        width: 62%;
        margin: 0 0 0 auto;
}

.title-staff-img {
        width: 100%;
        animation: faderight 1s ease .05s 1 normal backwards;
}

@keyframes faderight {
        from {
                opacity: 0;
                transform: translateX(-100px);
        }

        to {
                opacity: 1;
                transform: translateX(0);
        }
}

.top-profile-box {
        width: 50%;
        position: absolute;
        top: 22%;
        left: 6%;
        z-index: 1;
        padding: 0;
        line-height: 1.9em;
        animation: fadetop 1s ease .05s 1 normal backwards;
}

@keyframes fadetop {
        from {
                opacity: 0;
                transform: translateY(100px);
        }

        to {
                opacity: 1;
                transform: translateY(0px);
        }
}

.top-profile-title {
        padding: 0;
        letter-spacing: 0.12em;
        line-height: 1.5em;
        font-size: 4rem;
        text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7);
}

.top-profile-info {
        position: relative;
        display: inline-block;
        width: auto;
        padding: 0 0 0 2em;
        top: 80px;
        right: auto;
        bottom: auto;
        left: auto;
        margin: 0;
        list-style-type: none;
        -webkit-transform: none;
        transform: none;
        background-color: transparent;
        border-left: 2px solid #e5001b;
}

.top-staff-name {
        font-size: 2.5rem;
        font-weight: bold;
}

.top-staff-rb {
        color: #e5001b;
        margin-bottom: 3rem;
}

/* interview-contents */
#interview-detail .interview-content {
        margin: 130px auto;
}

#interview-detail .detail-content,
#interview-detail .title-content {
        max-width: calc(1200px + 6%);
        padding-left: 3%;
        padding-right: 3%;
        margin: 0 auto;
}

#interview-detail .detail-box01,
#interview-detail .detail-box02 {
        margin-bottom: 10rem;
}

#interview-detail .detail-box-style {
        margin: 10rem auto;
}

#interview-detail .title-content {
        position: relative;
        margin: 0 auto 1rem;
}

#interview-detail .interview-title-content {
        margin: 0 auto;
}

#interview-detail .title-content::after {
        position: absolute;
        bottom: -140px;
        left: 200px;
        opacity: 0.4;
        z-index: -1;
}

.interview-top-title {
        padding-top: 14%;
        width: 100%;
        height: 0;
        overflow: hidden;
        background: url(../images/interview_new/interview.svg) center left no-repeat;
        background-size: auto 100px;
}

.interview-q-01,
.interview-q-02,
.interview-q-03 {
        margin-bottom: 4rem;
        font-size: 23px;
}

.interview-a-01 {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
}

.interview-a-01 .detail-image-box {
        width: 43%;
}

.interview-a-01 .detail-text-box {
        width: 50%;
}

#interview-detail .interview-photo-box .detail-image-box {
        width: 50%;
        overflow: hidden;
}

#interview-detail .interview-photo-box .interview-photo {
        opacity: 0;
}

#interview-detail .detail-image-box img {
        width: 100%;
        vertical-align: top;
}

.zoom {
        animation: zoom02 2s cubic-bezier(0.61, 1, 0.88, 1);
        animation-fill-mode: forwards;
}

@keyframes zoom02 {
        0% {
                transform: scale(1.2);
                opacity: 0
        }

        50% {
                opacity: 1
        }

        100% {
                transform: scale(1);
                opacity: 1
        }
}

.detail-text-a01 {
        width: 85%;
}

.detail-text-a01 p,
.detail-text-a02 p,
.detail-text-a03 p {
        line-height: 1.875;
        text-align: justify;
}

.detail-box02 {
        position: relative;
        padding: 10rem 0;
}

.detail-box02::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        background-color: rgba(240, 240, 240, 0.9);
        transition: 0.7s;
        z-index: -1;
}

.fade::before {
        width: 100%;
}

#interview-detail .detail-content02 {
        max-width: 900px;
        margin: 0 auto;
}

.detail-box02-title {
        text-align: center;
}

.detail-box03 {
        margin-bottom: 10rem;
}

#interview-detail .detail-content03 {
        display: flex;
        justify-content: space-between;
}

.detail-content03-left,
.detail-content03-right {
        max-width: 550px;
        width: 48%;
        display: flex;
        flex-direction: column;
        align-items: center;
}

.interview-photo-box {
        display: flex;
        align-items: center;
}

.interview-message {
        position: relative;
        display: inline-block;
        padding: 0 45px;
}

.interview-message::before,
.interview-message::after {
        content: '';
        position: absolute;
        top: 50%;
        display: inline-block;
        width: 44px;
        height: 1px;
        background-color: #8b8b8b;
        -webkit-transform: rotate(-60deg);
        transform: rotate(-60deg);
}

.interview-message::before {
        left: 0;
}

.interview-message::after {
        right: 0;
}


/* schedule */
#interview-detail .timeline {
        position: relative;
        padding-top: 3rem;
        background-color: #F8F6F4;
}

.schedule-top-title {
        padding-top: 14%;
        width: 100%;
        height: 0;
        overflow: hidden;
        background: url(../images/interview_new/onedayschedule.svg) center left no-repeat;
        background-size: auto 100px;
}

.schedule-top-title-jp {
        font-size: 1.8rem;
}

/* timeline */

#interview-detail .timeline-container {
        max-width: calc(900px + 6%);
        padding-left: 3%;
        padding-right: 3%;
        margin: 0 auto;
}

/* fadeIn(右から左) */
.js-fadeIn-left {
        opacity: 0;
        transform: translateX(50px);
        transition: opacity 1s, transform .7s ease-in;
}

/* fadeIn(左から右) */
.js-fadeIn-right {
        opacity: 0;
        transform: translateX(-50px);
        transition: opacity 1s, transform .7s ease-in;
}

/* fadeIn(is-inview付与) */
.js-fadeIn-left.is-inview,
.js-fadeIn-right.is-inview {
        opacity: 1;
        transform: translateX(0);
        transition-delay: 0.8s;
}

.js-fadeIn-left::before.is-inview,
.js-fadeIn-right::before.is-inview {
        opacity: 1;
        transform: translateX(0);
        transition-delay: 0.8s;
}

/* fadeIn-end */

.timeline-flow {
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 3rem;
        border-radius: 30px;
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        -ms-transition: all 0.4s ease;
        transition: all 0.4s ease;
}

.timeline-flow-border {
        position: absolute;
        content: "";
        width: 6px;
        height: 100%;
        /* height: 0; */
        background: #e5001b;
        left: 50%;
        top: 0;
        z-index: -1;
}

.timeline-flow .timeline-item::after {
        content: "";
        clear: both;
        display: table;
        width: 100%;
}

.timeline-flow .timeline-item {
        padding-bottom: 40px;
        position: relative;
        list-style-type: none;
}

.timeline-flow .timeline-item .timeline-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #ffffff;
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -23px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        border-radius: 50%;
}

.day-time-img {
        width: 120%;
        vertical-align: top;
}

.center-line-small {
        display: flex;
        justify-content: center;
}

.center-line {
        display: flex;
        justify-content: center;
        margin-bottom: 55px;
}

.day-time-img-size {
        width: 170%;
}

.timeline-content-flex-start {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
}

.timeline-content-wrap {
        position: relative;
        width: 45%;
        border-radius: 5px;
}

.timeline-content-flex-end {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
}

.timeline-flow .timeline-item .timeline-content {
        padding: 20px;
        padding-bottom: 0;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        transition: all 0.3s ease;
}

.timeline-flow .timeline-item .timeline-content h3 {
        border-bottom: 2px solid #d3d3d3;
        margin: -20px -20px 0 -20px;
        font-weight: bold;
        font-size: 1.4rem;
}

.time-title {
        display: flex;
        align-items: flex-end;
}

.time-style {
        display: block;
        width: 90px;
        margin-right: 1rem;
}

.digital-img {
        width: 100%;
}

.timeline-detail-image-box {
        margin-top: 1rem;
}

.timeline-text-flex {
        display: flex;
        justify-content: space-between;
}

.timeline-text {
        font-size: 1.5rem;
}

.timeline-text-w {
        width: 43%;
        text-align: justify;
}

.timeline-photo {
        width: 55%;
}

.timeline-photo img {
        width: 100%;
}

/* off-style */
.detail-box04 {
        padding: 5rem 0;
}

#interview-detail .detail-box04 .title-content {
        margin-bottom: 0;
}

#interview-detail .detail-box04 .detail-content {
        max-width: 1100px;
        margin: 4rem auto;
}

.off-style-top-title {
        padding-top: 12%;
        width: 100%;
        height: 0;
        overflow: hidden;
        background: url(../images/interview_new/Offstyle.svg) center left no-repeat;
        background-size: auto 100px;
}

.off-style-top-title-jp {
        font-size: 1.8rem;
}

.off-style-flex {
        display: flex;
        justify-content: space-between;
}

.off-style-photo {
        overflow: hidden;
}

#interview-detail .off-style-photo .interview-photo {
        opacity: 0;
}

.interview-photo img {
        width: 100%;
}

.photo-corner {
        width: 33%;
        position: relative;
}

.photo-corner::before,
.photo-corner::after {
        content: '';
        position: absolute;
        transform: rotate(-35deg);
        width: 80px;
        height: 30px;
        background-color: #fff;
        z-index: 1;
}

.photo-corner::before {
        top: -10px;
        left: -25px;
        border-width: 0 100px 100px 0;
        border-bottom: 1px solid #aaa;
}

.photo-corner::after {
        bottom: -10px;
        right: -25px;
        border-width: 100px 0 0 100px;
        border-top: 1px solid #aaa;
}

.off-style-text {
        width: 60%;
}

/* others */
.others {
        position: relative;
}

.others::before {
        position: absolute;
        display: block;
        content: "";
        width: 0;
        height: 70%;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background-color: rgba(240, 240, 240, 0.9);
        z-index: -1;
        transition: 0.7s;
}

.fade::before {
        width: 100%;
}

.swiper {
        max-width: 1200px;
        margin: 3rem 0 10rem;
        overflow: hidden;
}

.swiper-wrapper {
        display: flex;
}

.swiper-slide {
        display: flex;
        align-items: center;
        position: relative;
        width: 100%;
        height: 100%;
        margin-right: 15px;
        text-align: left;
}

.swiper-box {
        box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.15);
}

.swiper-photo {
        width: 100%;
}

.swiper-link-box:hover {
        box-shadow: 4px 4px 0 rgba(229, 0, 27, 0.8);
        transition: .3s;
}

.swiper-link-box:hover .figcaption {
        opacity: 1;
        background-color: rgba(0, 0, 0, 0.6);
}

.swiper-link-box:hover .staff-photo {
        transform: scale(1.05);
        transition: .3s;
}

.swiper-link-box {
        text-decoration: none;
}

.others-top-title {
        padding-top: 15%;
        width: 100%;
        height: 0;
        overflow: hidden;
        background: url(../images/interview_new/interview02.svg) center center no-repeat;
        background-size: auto 100px;
}

.old-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 2rem auto;
        margin-right: 2rem;
}

.staff-box-bgc {
        position: relative;
        padding: 2rem;
        background-color: #f7f7f7;
}

.staff-position {
        position: absolute;
        bottom: 0;
        left: 0;
        font-size: 14px;
        padding: 1rem 2rem;
        color: #ffffff;
        background-color: #e5001b;
}

.staff-profile {
        list-style-type: none;
}

.name-img {
        width: 100%;
        margin-bottom: 1rem;
}

.year {
        color: #8b8b8b;
        font-size: 14px;
}

.staff-link-style {
        position: relative;
        overflow: hidden;
}

.view-all {
        margin: 2rem 0 0 auto;
}

.staff-photo {
        position: relative;
        width: 100%;
        vertical-align: top;
}

.figcaption {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 0 4rem;
        top: 50%;
        left: 50%;
        color: #ffffff;
        opacity: 0;
        transform: translate(-50%, -50%);
        transition: .3s;
}


/*矢印が右に移動する*/
a.view-all-link {
        position: relative;
        display: inline-block;
        padding: 0 20px;
        color: #e5001b;
        text-decoration: none;
        font-weight: bold;
        outline: none;
}

.view-all-link::before {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 15%;
        width: 85%;
        height: 1px;
        background: #e5001b;
        transition: all .3s;
}

.view-all-link::after {
        content: '';
        position: absolute;
        bottom: -3px;
        right: 0;
        width: 15px;
        height: 1px;
        background: #e5001b;
        transform: rotate(35deg);
        transition: all .3s;
}

.view-all-link:hover::before {
        left: 25%;
}

.view-all-link:hover::after {
        right: -10%;
}

/* entry */
.entry-title-box {
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 500px;
        background: url(../images/interview_new/entry_title_pc.jpg)center center no-repeat;
        background-size: 100% auto;
        margin: 4rem auto;
}

.entry-title-wrap {
        position: absolute;
        bottom: -4vw;
        left: 50%;
        text-align: center;
        transform: translateX(-50%);
}

.entry-title {
        font-size: 130px;
        color: #e5001b;
}

.entry-btn-contents {
        max-width: calc(1200px + 6%);
        padding-left: 3%;
        padding-right: 3%;
        margin: 15rem auto;
}

.entry-btn-wrap-new {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        margin: 5rem auto;
}

.entry-btn-new,
.entry-btn-career {
        display: flex;
        align-items: center;
        width: 30%;
        text-align: center;
        color: #ffffff;
        overflow: hidden;
}

.entry-link-new,
.entry-link-career {
        display: block;
        width: 100%;
        height: 100%;
        padding: 1rem 0;
        color: #ffffff !important;
        text-decoration: none;
        cursor: pointer;
        background-color: #e5001b;
}

.entry-link-career {
        background-color: #00A63C;
}

.btn-name {
        display: block;
        /* margin-bottom: 5px; */
        font-size: 2.5rem;
        font-weight: bold;
}

.sub-name {
        font-size: 1.4rem;
}

.mynavi-box-new {
        position: relative;
        display: flex;
        align-items: center;
        width: 30%;
        height: 100%;
        border: 3px solid #00ABEB;
        overflow: hidden;
}

.mynavi-new {
        text-align: center;
}

.mynavi-link-new {
        display: block;
        width: 100%;
        height: 100%;
        padding: 1rem;
        text-decoration: none;
}

.mynavi-img-new {
        width: 70%;
        margin: 0 auto;
}

.mynavi-img-size {
        width: 100%;
        vertical-align: top;
}

.entry-link-new:hover,
.entry-link-career:hover,
.mynavi-new:hover {
        transform: scale(1.05);
        transition: .3s;
}

#footer {
        margin-top: 0;
}

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

        .staff-link-box {
                width: 100%;
                margin-bottom: 3rem;
        }

        /*interview-detail */
        .top-img-box {
                width: 100%;
        }

        #interview-detail .detail-title-box .title-body {
                padding-left: 0;
                padding-right: 0;
                margin-top: 0;
        }

        .top-profile-box {
                position: relative;
                left: 0;
                width: 96%;
                margin: -4rem auto 0;
                padding: 2rem;
                background-color: #ffffff;
        }

        .top-profile-title {
                margin-bottom: 2.5rem;
                font-size: 2rem;
        }

        .top-profile-info {
                position: static;
        }

        .top-staff-name {
                font-size: 1.8rem;
        }

        .top-staff-rb {
                margin-bottom: 2rem;
        }

        #interview-detail .detail-content {
                width: 100%;
                margin: 0 auto;
        }

        .interview-top-title {
                padding-top: 21%;
                background: url(../images/interview_new/interview.svg) center left no-repeat;
                background-size: 100%;
        }

        #interview-detail .title-content::after {
                top: -150px;
                left: -500px;
                transform: scale(0.4);
        }

        #interview-detail .interview-content {
                margin: 1rem auto 0;
        }

        #interview-detail .interview-content p {
                margin-top: 0;
        }

        #interview-detail .title-content {
                margin-bottom: 1rem;
        }

        .interview-a-01 {
                display: block;
        }

        .detail-text-a01 {
                width: 100%;
        }

        .interview-a-01 .detail-image-box,
        .interview-a-01 .detail-text-box {
                width: 100%;
        }

        .interview-a-01 .detail-text-box {
                width: 100%;
                margin-top: 1rem;
        }

        #interview-detail .detail-box01 {
                margin-bottom: 3rem;
        }

        #interview-detail .detail-box02 {
                padding: 3rem 0;
                margin-bottom: 0;
        }

        .interview-q-01,
        .interview-q-02,
        .interview-q-03 {
                margin-bottom: 2rem;
        }

        #interview-detail .detail-content03 {
                display: block;
        }

        .detail-content03-left,
        .detail-content03-right {
                width: 100%;
                align-items: flex-start;
        }

        .flex-contents {
                display: flex;
                flex-direction: column;
        }

        .detail-box03 {
                order: 2;
                margin: 2rem auto;
        }

        .interview-photo-box {
                order: 1;
                display: block;
                margin-bottom: 1rem;
        }

        #interview-detail .detail-box-style {
                order: 3;
                margin: 2rem auto;
        }

        #interview-detail .interview-photo-box .detail-image-box {
                width: 100%;
        }

        #interview-detail .detail-image-box:first-child {
                margin-top: 0;
        }

        .detail-content03-left {
                margin-bottom: 2rem;
        }

        #interview-detail .timeline {
                padding: 1rem 0 2rem;
        }

        #interview-detail .timeline-container {
                margin-top: 3.5rem;
                margin-bottom: 0;
        }

        #interview-detail .schedule-title-content {
                margin-top: 1rem;
        }

        .schedule-top-title {
                padding-top: 22%;
                background: url(../images/interview_new/onedayschedule.svg) center left no-repeat;
                background-size: 100%;
        }

        #interview-detail .timeline::before {
                right: -13%;
                bottom: -7%;
                transform: scale(0.7);
        }

        #interview-detail .timeline .title-content::before {
                top: -195px;
                left: -460px;
                transform: scale(0.4);
        }

        .timeline-flow .timeline-item .timeline-icon {
                position: static;
                margin-left: 0;
        }

        .timeline-sp-style {
                display: flex;
        }

        .timeline-icon-box {
                width: 20%;
                margin-right: 10px;
        }

        .timeline-flow {
                padding: 1rem;
                border-radius: 10px;
        }

        .timeline-flow-border {
                left: 24px;
        }

        .timeline-box,
        .timeline-flow .timeline-item .timeline-content,
        .timeline-content-flex,
        .timeline-content-wrap,
        .timeline-text-w,
        .timeline-photo {
                width: 100%;
        }

        .timeline-text-w {
                margin-bottom: 1rem;
        }

        .timeline-text-flex {
                display: block;
        }

        .timeline-item .timeline-content-wrap::before,
        .timeline-item .timeline-content-wrap.right::before {
                left: -7px;
                border-left: 0;
                border-right: 7px solid #ffffff;
        }

        .center-line {
                margin-bottom: 30px;
        }

        .day-time-img-size {
                width: 110%;
        }

        .day-time-img {
                width: 100%;
        }

        #interview-detail .detail-box04 {
                padding: 3rem 0;
                margin-bottom: 0;
        }

        #interview-detail .detail-box04 .detail-content {
                margin: 3rem auto 0;
        }

        #interview-detail .detail-box04 .title-content {
                margin-top: 0;
        }

        #interview-detail .detail-box04 .title-content::before {
                top: -185px;
                left: -330px;
                transform: scale(0.4);
        }

        .off-style-top-title {
                padding-top: 22%;
                background: url(../images/interview_new/Offstyle.svg) center left no-repeat;
                background-size: 100%;
        }

        .off-style-flex {
                display: block;
        }

        .off-style-photo,
        .off-style-text {
                width: 100%;
        }

        .off-style-text {
                margin-top: 1rem;
        }

        .photo-corner {
                width: 100%;
                margin-bottom: 3rem;
        }

        .others::before {
                top: 45px;
                transform: skewY(-6deg);
        }

        .others-top-title {
                padding-top: 21%;
                margin-bottom: 2rem;
                background: url(../images/interview_new/interview02.svg) center center no-repeat;
                background-size: 100%;
        }

        .swiper {
                margin: 2rem auto;
        }

        .staff-box-bgc {
                padding: 0;
        }

        .staff-position {
                display: block;
                padding: 0.5rem;
                font-size: 1.2rem;
        }

        .year {
                font-size: 1.2rem;
        }

        .staff-profile {
                padding: 1rem;
        }

        #interview-detail .old-box {
                margin-bottom: 0;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
        }

        .view-all {
                display: flex;
                justify-content: flex-end;
                width: 48.5%;
                margin: 2rem 0 0 auto;
                font-size: 2rem;
        }

        .view-all-link {
                margin-bottom: 20%;
        }

        .entry-title-box {
                padding-top: 300px;
                margin-top: 0;
                background: url(../images/interview_new/entry_title_sp.jpg)center center no-repeat;
                background-size: cover;
        }

        .entry-title-wrap {
                width: 100%;
                padding-left: 3%;
                padding-right: 3%;
                margin: 0 auto;
                bottom: -15vw;
        }

        .entry-title {
                font-size: 23vw;
        }

        .entry-btn-contents {
                margin: 8rem auto 5rem;
        }

        .entry-btn-wrap-new {
                display: block;
                box-shadow: none;
        }

        .entry-btn-new,
        .mynavi-box-new,
        .entry-btn-career {
                width: 100%;
        }

        .entry-btn-new,
        .mynavi-box-new,
        .entry-btn-career {
                margin-bottom: 3rem;
                box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
        }

        .btn-name {
                font-size: 2rem;
        }

        .sub-name {
                font-size: 1.3rem;
        }


}

@media screen and (max-width:600px) {
        .entry-title {
                font-size: 23vw;
        }
}