.breadcrumb {
    display: none
}

.breadcrumb-item+.breadcrumb-item:before {
    content: "|";
    margin: 0 .5em
}

.hero .container {
    padding: 19px 20px 0;
    margin: 0
}

.hero .title-icon {
    margin-bottom: 0
}

.hero .main-title {
    font-size: calc(var(--font-size-2xl) * 1.5);
    margin-bottom: 0
}

.hero .subtitle {
    display: block;
    font-size: calc(var(--font-size-base) * 1)
}

.hero .hero-content {
    position: relative;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 0;
    margin: 0 calc(50% - 50vw);
    width: 100vw
}

.hero .hero-image {
    display: block;
    aspect-ratio: 1243/724;
    margin-right: 20px
}

.hero .hero-header {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px
}

.hero .catchphrase {
    background: var(--color-white);
    font-weight: 700;
    font-size: calc(var(--font-size-lg));
    padding: 5px 10px
}

@media (min-width: 768px) {
    .hero .catchphrase {
        font-size: calc(var(--font-size-2xl))
    }
}

@media (min-width: 1200px) {
    .breadcrumb {
        display: flex;
        align-items: center;
        color: var(--color-text-light);
        font-size: calc(var(--font-size-sm));
        padding-left: 30px;
        padding-top: 15px
    }

    .hero .container {
        padding: 0;
        margin: 50px auto 0
    }

    .hero .title {
        margin-bottom: 65px
    }

    .hero .main-title {
        font-size: calc(var(--font-size-2xl) * 2.5);
        margin-bottom: 10px
    }

    .hero .subtitle {
        font-size: calc(var(--font-size-base) * 1.7)
    }

    .hero .hero-content {
        width: calc(100vw - (100vw - var(--container-width)) / 2);
        padding: 0;
        overflow: hidden
    }

    .hero .hero-image {
        aspect-ratio: 1399/603;
        -o-object-fit: cover;
        object-fit: cover
    }

    .hero .hero-header {
        font-size: calc(var(--font-size-xl) * 1.825)
    }

    .hero .catchphrase {
        font-size: calc(var(--font-size-base) * 2.9)
    }
}

.container {
    max-width: 100vw;
    padding: 0 20px;
    margin: 60px 0 70px
}

.header-title {
    font-size: calc(var(--font-size-2xl));
    font-weight: 700;
    text-align: center;
    margin: 0 0 30px
}

@media (min-width: 1200px) {
    .container {
        max-width: var(--container-width);
        margin: 85px auto 0;
        padding: 0
    }
}

@media (min-width: 1200px) {
    .container-cta {
        padding-top: 60px;
        padding-bottom: 110px
    }

    .cta-buttons {
        width: auto;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        gap: 140px
    }

    .cta-buttons .btn-entry {
        font-weight: 700;
        padding: 26px;
        line-height: 1
    }

    .cta-buttons .btn-entry:after {
        right: 64px
    }
}

.interview-contents {
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center
}

.interview-slider {
    width: 100%
}

.interview-slider .swiper-slide {
    width: calc(100% - 40px);
    border-radius: 40px;
    overflow: hidden;
    position: relative
}

.interview-slider .swiper-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 32px;
    gap: 32px
}

.interview-caption {
    position: absolute;
    left: 0;
    bottom: 30px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 25px 5px 20px;
    line-height: 1;
    max-width: 90%
}

.interview-question {
    font-size: calc(var(--font-size-base) * 1.2);
    font-weight: 700
}

.interview-tags {
    display: flex;
    gap: 4px 24px;
    flex-wrap: wrap
}

.interview-tags .tag {
    font-size: var(--font-size-sm)
}

.swiper-nav {
    margin-top: 10px
}

.swiper-nav .swiper-button-prev,
.swiper-nav .swiper-button-next {
    width: 60px;
    height: 60px;
    background: var(--color-white);
    border-radius: 50%;
    border: 1px solid var(--color-black);
    color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xl);
    position: static;
    margin: 0;
    transition: background .2s
}

.swiper-nav .swiper-button-prev:hover,
.swiper-nav .swiper-button-next:hover {
    background: var(--color-black);
    color: var(--color-white);
    display: flex
}

.swiper-nav .swiper-button-prev:after,
.swiper-nav .swiper-button-next:after {
    font-size: var(--font-size-2xl);
    color: inherit
}

.interview-slider .swiper-pagination {
    display: none
}

.interview-action {
    width: 90%
}

@media (min-width: 1200px) {
    .interview-slider .swiper-slide {
        width: 600px;
        border-radius: 34px
    }

    .interview-caption {
        bottom: 35px;
        padding: 10px 25px 3px 55px;
        gap: 10px;
        max-width: 90%
    }

    .interview-question {
        font-size: var(--font-size-xl)
    }

    .interview-tags .tag {
        font-size: var(--font-size-base)
    }

    .swiper-nav .swiper-button-prev,
    .swiper-nav .swiper-button-next {
        width: 76px;
        height: 76px;
        font-size: 2.2rem
    }

    .swiper-button-prev:after,
    .swiper-button-next:after {
        font-size: 2.2rem
    }

    .interview-slider .swiper-nav {
        margin-top: 36px;
        gap: 36px
    }
}

.ancher-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 30px 10px 0
}

.ancher-buttons .btn-more {
    font-size: calc(var(--font-size-base) * 1.875);
    padding: 10px 26px
}

.interview-visual-block {
    position: relative;
    margin-bottom: 30px
}

.interview-visual-block picture img {
    border-radius: 32px;
    width: 100%;
    height: auto;
    display: block
}

.interview-lead-block {
    background: var(--color-white);
    max-width: 90%;
    padding: 8px 5px 5px 30px;
    position: absolute;
    left: 0;
    bottom: 5px;
    line-height: 1
}

.interview-title {
    font-size: var(--font-size-base);
    font-weight: 700;
    line-height: 1.2
}

.interview-section:nth-child(4) .interview-lead-block {
    max-width: 70%
}

.interview-tag {
    display: inline-block;
    font-size: calc(var(--font-size-sm) * .7);
    color: #007aff;
    line-height: 1.2;
}

.interview-body {
    margin-top: 32px;
    line-height: 1.7
}

@media (min-width: 768px) {
    .interview-lead-block {
        bottom: 23px
    }

    .interview-title {
        font-size: calc(var(--font-size-base) * 1.8)
    }

    .interview-tag {
        font-size: calc(var(--font-size-base) * 1)
    }
}

@media (min-width: 1200px) {
    .ancher-buttons {
        width: 756px;
        gap: 30px;
        padding-top: 45px;
        margin: 0 auto
    }

    .ancher-buttons .btn-more {
        margin-top: 0
    }

    .interview-lead-block {
        padding: 5px 20px 5px 80px;
        bottom: 35px
    }

    .interview-title {
        font-size: calc(var(--font-size-base) * 2.3)
    }

    .interview-tag {
        font-size: calc(var(--font-size-base) * 1.2)
    }

    .interview-body {
        font-size: calc(var(--font-size-base) * 1.2);
        margin-top: 48px
    }
}