:root {
    --colorbase: #000;
    --coloryellow: #f8da0f;
    --colorred: #C71E32;
}

/* ================================
UTILITIES
================================ */
.p-top-interview__box__txt01 {
    font-size: 0.75rem;
}

@media screen and (min-width: 768px) {
    .p-top-interview__box__txt01 {
        font-size: 0.875rem;
    }
}

.p-top-mv__txt .txt {
    font-size: 1rem;
}

@media screen and (min-width: 768px) {
    .p-top-mv__txt .txt {
        font-size: 1.125rem;
    }
}

.p-top-interview__box__txt02 {
    font-size: 1rem;
}

@media screen and (min-width: 768px) {
    .p-top-interview__box__txt02 {
        font-size: 1.25rem;
    }
}

.p-top-learn__box__ttl {
    font-size: 1.25rem;
}

@media screen and (min-width: 768px) {
    .p-top-learn__box__ttl {
        font-size: 1.875rem;
    }
}

.p-top-mv__ttl__line .txt-sm50 {
    font-size: 1.625rem;
}

@media screen and (min-width: 768px) {
    .p-top-mv__ttl__line .txt-sm50 {
        font-size: 3.125rem;
    }
}

.p-top-mv__ttl__line {
    font-size: 1.75rem;
}

@media screen and (min-width: 768px) {
    .p-top-mv__ttl__line {
        font-size: 4rem;
    }
}

.p-top-mv__ttl__line .txt-big65 {
    font-size: 1.875rem;
}

@media screen and (min-width: 768px) {
    .p-top-mv__ttl__line .txt-big65 {
        font-size: 4.0625rem;
    }
}

.p-top-mv__ttl__line .txt-big94 {
    font-size: 2.25rem;
}

@media screen and (min-width: 768px) {
    .p-top-mv__ttl__line .txt-big94 {
        font-size: 5.875rem;
    }
}

@media screen and (min-width: 768px) {
    .c-header {
        background-color: transparent;
    }
}

main {
    margin-top: 60px;
    background-color: #fff;
    padding-bottom: 0;
}

@media screen and (min-width: 768px) {
    main {
        margin-top: 0;
    }
}

.p-top-mv {
    position: relative;
}

.p-top-mv__decor01 {
    width: 375px;
    max-width: 100%;
    position: absolute;
    left: -45px;
    bottom: 0px;
    pointer-events: none;
    transition: all 0.5s ease-out;
}

@media screen and (min-width: 768px) {
    .p-top-mv__decor01 {
        width: clamp(42.9375rem, 97.0339vw + -3.6388rem, 71.5625rem);
        left: clamp(-9.375rem, -12.7119vw + 0.4767rem, -5.625rem);
        bottom: clamp(-40px, -9.26vw + 71.11px, 0px);
    }
}

.p-top-mv__main {
    padding-top: 30px;
    padding-bottom: 80px;
}

@media screen and (min-width: 768px) {
    .p-top-mv__main {
        padding-top: 0;
        /* padding-bottom: 226px; */
        padding-bottom: clamp(140px, 15.28vw + 42.67px, 210px);
    }
}

.p-top-mv__main .l-container {
    display: flex;
    flex-direction: column;
    position: relative;
}

@media screen and (min-width: 768px) {
    .p-top-mv__main .l-container {
        flex-direction: row;
        justify-content: space-between;
        padding-inline: min(40px, 3.125vw);
    }
}

.p-top-mv__info {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 10px;
    padding-left: 20px;
}

@media screen and (min-width: 768px) {
    .p-top-mv__info {
        width: calc(100% - clamp(24.0625rem, 37.8606vw + 5.8894rem, 43.75rem));
        width: calc(100% - min(700px, 54.6875vw));
        position: relative;
        /* padding-top: clamp(5rem, 17.3729vw + -3.339rem, 10.125rem); */
        padding-top: clamp(5rem, 17.3729vw + -3.339rem, 7rem);
        padding-left: 0;
    }
}

.p-top-mv__ttl {
    position: relative;
}

.p-top-mv__ttl::before {
    position: absolute;
    content: "";
    left: 0;
    top: -10px;
    background-color: var(--coloryellow);
    width: 30px;
    height: 30px;
}

@media screen and (min-width: 768px) {
    .p-top-mv__ttl::before {
        width: 50px;
        height: 50px;
    }
}

.p-top-mv__ttl__line {
    font-family: "Noto Serif JP", serif;
    font-weight: 500;
    line-height: 1.2;
    display: block;
    position: relative;
    margin-top: 4px;
}

@media screen and (min-width: 768px) {
    .p-top-mv__ttl__line {
        font-size: min(5vw, 4rem);
        margin-top: clamp(0.3125rem, 1.2712vw + -0.2977rem, 0.6875rem);
    }
}

.p-top-mv__ttl__line:first-child {
    margin-top: 0;
}

@media screen and (min-width: 768px) {
    .p-top-mv__ttl__line .txt-big94 {
        font-size: min(7.34375vw, 5.875rem);
    }
}

@media screen and (min-width: 768px) {
    .p-top-mv__ttl__line .txt-sm50 {
        font-size: min(3.90625vw, 3.125rem);
    }
}

@media screen and (min-width: 768px) {
    .p-top-mv__ttl__line .txt-big65 {
        font-size: min(5.078125vw, 4.0625rem);
    }
}

@media screen and (min-width: 768px) {
    .p-top-mv__ttl__line03 {
        margin-top: clamp(0.3125rem, 2.9661vw + -1.1112rem, 1.1875rem);
    }
}

.p-top-mv__txt {
    margin-top: 20px;
}

@media screen and (min-width: 768px) {
    .p-top-mv__txt {
        margin-top: clamp(1.25rem, 6.1441vw + -1.6992rem, 2.0625rem);
    }
}

.p-top-mv__txt .txt {
    font-weight: 500;
    margin-top: 10px;
}

@media screen and (min-width: 768px) {
    .p-top-mv__txt .txt {
        font-size: clamp(1rem, 1.1719vw + 0.1875rem, 1.125rem);
        line-height: 1.6666666667;
        margin-top: 16px;
    }
}

.p-top-mv__txt .txt:first-child {
    margin-top: 0;
}

.p-top-mv__img {
    width: 83.5vw;
    position: relative;
    z-index: -1;
    right: 0;
    padding-top: 50px;
    margin-left: auto;
    text-align: right;
}

@media screen and (min-width: 768px) {
    .p-top-mv__img {
        width: min(540px, 48vw);
        max-width: unset;
        right: 0;
        padding: 0;
    }
}


@media screen and (min-width: 1200px) {
    .p-top-mv__img {
        /* width: min(700px, 54.6875vw); */
        width: min(600px, 54.6875vw);
    }
}

.p-top-intro {
    position: relative;
    padding: 60px 0;
    margin-top: 20px;
}

@media screen and (min-width: 768px) {
    .p-top-intro {
        margin-top: 53px;
        padding: 58px 0 7px;
    }
}

.p-top-intro::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    background: url(../images/top/bg_intro_01.webp) no-repeat center/cover;
    height: 100%;
    width: 100%;
    opacity: 0.15;
    pointer-events: none;
}

.p-top-intro::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, #fff 0%, transparent 30px, transparent calc(100% - 30px), #fff 100%);
    pointer-events: none;
}

@media screen and (min-width: 768px) {
    .p-top-intro::after {
        background-image: linear-gradient(to bottom, #fff 0%, transparent 121px, transparent calc(100% - 121px), #fff 100%);
    }
}

.p-top-intro__box {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 768px) {
    .p-top-intro__box {
        flex-direction: row;
        justify-content: space-between;
        gap: clamp(24px, 10.65vw - 57.78px, 70px);
    }
}

.p-top-intro__img01 {
    width: calc(100% - 70px);
    width: calc(100% - min(70px, 18.6666666667vw));
}

@media screen and (min-width: 768px) {
    .p-top-intro__img01 {
        max-width: 420px;
        padding-top: 4px;
    }
}

.p-top-intro__img01 .img {
    position: relative;
    margin: 0 auto;
}

@media screen and (min-width: 768px) {
    .p-top-intro__img01 .img.i01 {
        width: 100%;
    }
}

.p-top-intro__img01 .img.i02 {
    margin-top: 10px;
}

@media screen and (min-width: 768px) {
    .p-top-intro__img01 .img.i02 {
        width: clamp(11.625rem, 26.2712vw + -0.9852rem, 19.375rem);
        left: 4px;
        margin-top: 19px;
    }
}

.p-top-intro__img02 {
    width: 100%;
    margin: 30px auto 0;
    max-width: 370px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 20px;
}

@media screen and (min-width: 768px) {
    .p-top-intro__img02 {
        width: auto;
        max-width: unset;
        gap: 16px;
        margin: 0;
        margin-top: clamp(2.5625rem, 8.6864vw + -1.607rem, 5.125rem);
    }
}

@media screen and (min-width: 768px) {
    .p-top-intro__img02 .img.i03 {
        width: clamp(6.4875rem, 14.661vw + -0.5498rem, 10.8125rem);
    }
}

@media screen and (min-width: 768px) {
    .p-top-intro__img02 .img.i04 {
        width: clamp(15.4125rem, 34.8305vw + -1.3061rem, 25.6875rem);
    }
}

@media screen and (min-width: 768px) {
    .p-top-intro__txt {
        padding-left: 6px;
    }
}

.p-top-intro__txt .txt {
    margin-top: 20px;
    font-weight: 500;
}

@media screen and (min-width: 768px) {
    .p-top-intro__txt .txt {
        margin-top: 30px;
        line-height: 1.875;
    }
}

.p-top-intro__txt .txt:first-child {
    margin-top: 0;
}

.p-top-intro__head {
    width: 90%;
    max-width: 335px;
    margin-inline: auto;
    display: flex;
    column-gap: 30px;
    /* justify-content: space-between; */
}

@media screen and (min-width: 768px) {
    .p-top-intro__head {
        width: 100%;
        max-width: 45%;
        gap: 20px 40px;
    }
}

.p-top-intro__lead {
    position: relative;
    top: -20px;
}

@media screen and (min-width: 768px) {
    .p-top-intro__lead {
        top: -28px;
    }
}

.p-top-intro__lead__txt {
    font-size: min(2.75rem, 11.7333333333vw,11.5svh);
    font-family: "Noto Serif JP", serif;
    font-weight: 500;
    line-height: 1;
    writing-mode: vertical-lr;
    position: relative;
    display: inline-block;
    white-space: nowrap;
}

@media screen and (min-width: 768px) {
    .p-top-intro__lead__txt {
        padding-bottom: 20px;
        font-size: min(5vw, 4rem);
    }
}

.p-top-intro__lead__txt .txt {
    position: relative;
    display: inline-block;
    z-index: 2;
    white-space: nowrap;
}

.p-top-intro__lead__txt .txt-sm {
    font-size: min(2.5rem, 10.6666666667vw, 10.5svh);
}

@media screen and (min-width: 768px) {
    .p-top-intro__lead__txt .txt-sm {
        font-size: min(3.90625vw, 3.125rem);
    }
}

@media screen and (min-width: 768px) {
    .p-top-intro__lead__txt .txt-sm.i01 {
        margin-bottom: 7px;
    }
}

@media screen and (min-width: 768px) {
    .p-top-intro__lead__txt .txt-sm.i02 {
        margin-top: 7px;
        margin-bottom: 8px;
    }
}

.p-top-intro__lead__txt .char {
    font-size: min(2.5rem, 10.6666666667vw, 10.5svh);
    font-family: "Noto Serif JP", serif;
    font-weight: 500;
    line-height: 1;
    position: relative;
    display: inline-block;
    white-space: nowrap;
}

@media screen and (min-width: 768px) {
    .p-top-intro__lead__txt .char {
        font-size: min(3.90625vw, 3.125rem);
    }
}

@media screen and (min-width: 768px) {
    .p-top-intro__lead__txt .char.i01 {
        right: -14px;
        margin-bottom: -4px;
    }
}

@media screen and (min-width: 768px) {
    .p-top-intro__lead__txt .char.i02 {
        left: -14px;
        margin-top: 4px;
        margin-bottom: -11px;
    }
}

.p-top-intro__lead__txt::after {
    content: "";
    width: 20px;
    height: 20px;
    background-color: var(--colorred);
    position: absolute;
    right: -5px;
    bottom: -5px;
    pointer-events: none;
}

@media screen and (min-width: 768px) {
    .p-top-intro__lead__txt::after {
        width: 47px;
        height: 47px;
        left: -15px;
        right: auto;
        bottom: -7px;
    }
}

.p-top-intro__content {
    width: 100%;
    margin-top: 30px;
}

@media screen and (min-width: 768px) {
    .p-top-intro__content {
        margin-top: 0;
        /* padding: 0 0 0 clamp(1.25rem, 13.0556vw + -8.8681rem, 4.1875rem); */
    }
}

.p-top-aboutappeal {
    padding: 60px 0;
}

@media screen and (min-width: 768px) {
    .p-top-aboutappeal {
        padding: 93px 0 77px;
    }
}

@media screen and (min-width: 768px) {
    .p-top-aboutappeal .c-box01__item.i02 .c-box01__info {
        padding-top: clamp(0rem, 20.1271vw + -9.661rem, 5.9375rem);
    }
}

@media screen and (min-width: 768px) {
    .p-top-aboutappeal .c-box01__item.i02 .c-box01__txt {
        margin-top: 28px;
    }
}

@media screen and (min-width: 768px) {
    .p-top-aboutappeal .c-box01__item.i02 .c-box01__btn {
        margin-top: 53px;
    }
}

@media screen and (min-width: 768px) {
    .p-top-aboutappeal .c-box01__item.i02 .c-box01__btn .c-btn01.has-underline .c-btn01__link {
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

.p-top-learn {
    position: relative;
    border-top: solid 1px var(--colorbase);
    padding: 40px 0 60px;
}

@media screen and (min-width: 768px) {
    .p-top-learn {
        padding: 89px 0 49px;
    }
}

.p-top-learn__decor01 {
    width: 60px;
    position: absolute;
    top: 20px;
    left: 0;
    pointer-events: none;
}

@media screen and (min-width: 768px) {
    .p-top-learn__decor01 {
        width: clamp(4.25rem, 39.4009vw + -29.3885rem, 14.9375rem);
        width: min(18.671875vw, 239px);
        left: 0;
        left: clamp(-25px, (100vw - 1600px) * 1000, 0px);
        top: 62px;
        top: clamp(62px, (1660px - 100vw) * 1000, 142px);
    }
}

.p-top-learn__decor02 {
    width: 270px;
    position: absolute;
    right: -80px;
    bottom: -10px;
    pointer-events: none;
    display: none;
}

@media screen and (min-width: 768px) {
    .p-top-learn__decor02 {
        width: clamp(16.95rem, 86.1864vw + -24.4195rem, 42.375rem);
        display: block;
        right: clamp(-11.5rem, -21.1864vw + 4.9195rem, -5.25rem);
        bottom: clamp(-2.875rem, -24.5763vw + 16.1716rem, 4.375rem);
        z-index: -1;
    }
}

.p-top-learn__head {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0 0 0 50px;
    gap: 20px 0;
}

@media screen and (min-width: 768px) {
    .p-top-learn__head {
        padding: 0;
        flex-direction: row;
        gap: 20px clamp(1.5625rem, 8.5337vw + -2.5337rem, 6rem);
    }
}

@media screen and (min-width: 768px) {
    .p-top-learn__head .c-ttl01 {
        top: 2px;
    }
}

@media screen and (min-width: 768px) {
    .p-top-learn__lead {
        padding-top: 0;
    }
}

@media screen and (min-width: 768px) {
    .p-top-learn__lead .txtlead {
        line-height: 1.875;
    }
}

.p-top-learn__boxs {
    display: grid;
    grid-gap: 40px 0;
    position: relative;
    margin-top: 30px;
}

@media screen and (min-width: 768px) {
    .p-top-learn__boxs {
        max-width: 1200px;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 2px 0;
        margin-top: 50px;
    }
}

@media screen and (min-width: 768px) {
    .p-top-learn__boxs-wrap {
        width: calc(100% - min(240px, 15vw));
        max-width: calc(50% + 600px);
        margin-left: auto;
        padding-right: 40px;
    }
}

.p-top-learn__box {
    width: 100%;
    background-color: #fff;
    position: relative;
    margin: 0 auto;
}

@media screen and (min-width: 768px) {
    .p-top-learn__box {
        transition: all 0.5s;
        margin: 0;
    }

    .p-top-learn__box:has(.c-btn01__link:hover) {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
        z-index: 2;
    }

    .p-top-learn__box:has(.c-btn01__link:hover)::before {
        scale: 1 1;
        transform-origin: left center;
    }

    .p-top-learn__box:has(.c-btn01__link:hover)+.p-top-learn__box::after {
        opacity: 0;
    }
}

.p-top-learn__box::before {
    content: "";
    width: 100%;
    height: 2px;
    background-color: var(--coloryellow);
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    scale: 0 1;
    transform-origin: right center;
    transition: scale 300ms ease;
}

.p-top-learn__box::after {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #d6d6d6;
    width: 100%;
    height: 1px;
    content: "";
}

@media screen and (min-width: 768px) {
    .p-top-learn__box::after {
        transition: all 0.5s;
        width: 1px;
        top: 0;
        height: 100%;
    }
}

@media screen and (min-width: 768px) {
    .p-top-learn__box:nth-child(even)::after {
        content: "";
    }
}

@media screen and (min-width: 768px) {
    .p-top-learn__box:nth-child(odd)::after {
        content: none;
    }
}

.p-top-learn__box.i05::after,
.p-top-learn__box:last-child::after {
    content: none;
}

@media screen and (min-width: 768px) {
    .p-top-learn__box:last-child::after {
        content: "";
        right: -1px;
        left: auto;
    }
}

@media screen and (min-width: 768px) {
    .p-top-learn__box .c-btn01 a:hover {
        color: var(--colorbase);
    }
}

.p-top-learn__box__link {
    position: relative;
    display: block;
}

.p-top-learn__box__img {
    text-align: center;
}

.p-top-learn__box__content {
    padding: 30px 20px;
}

@media screen and (min-width: 768px) {
    .p-top-learn__box__content {
        padding: 14px clamp(1.25rem, 4.2373vw + -0.7839rem, 2.5rem) clamp(1.25rem, 4.2373vw + -0.7839rem, 2.5rem);
    }
}

.p-top-learn__box__ttl {
    font-family: "Noto Serif JP", serif;
    font-weight: 500;
    line-height: 1.5;
}

.p-top-learn__box__txt {
    margin-top: 10px;
}

.p-top-learn__box__btn {
    margin-top: 20px;
}

@media screen and (min-width: 768px) {
    .p-top-learn__box__btn {
        margin-top: 33px;
    }
}

@media screen and (min-width: 768px) {
    .p-top-learn__box__btn .c-btn01__link::after {
        content: "";
        position: absolute;
        inset: 0;
    }
}

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

    .p-top-learn__box.i03 .p-top-learn__box__content,
    .p-top-learn__box.i04 .p-top-learn__box__content {
        padding-top: 20px;
    }
}

@media screen and (min-width: 768px) {
    .p-top-learn__box.i06 {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .p-top-learn__box.i06{
        margin-top: -20px;
        margin-bottom: -60px;
    }
}

.p-top-learn__box.i06 .p-top-learn__box__img {
    translate: 0 -10%;
    width: 60%;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
}

.p-top-learn__box.i06 .p-top-learn__box__img img {
    width: 100%;
    height: auto;
    display: block;
}

@media screen and (min-width: 768px) {
    .p-top-learn__box.i06 .p-top-learn__box__img {
        width: auto;
        margin-left: 0;
        translate: calc(25% + 25px) 0;
    }
}

.p-top-employee {
    padding: 60px 0;
    border-top: solid 1px var(--colorbase);
}

@media screen and (min-width: 768px) {
    .p-top-employee {
        padding: 39px 0 31px;
    }
}

.p-top-employee__cover {
    width: calc(100% + 20px);
    height: 100%;
    position: absolute;
    left: -20px;
    display: grid;
    gap: 10px;
    grid-template-rows: 38% 24% 38%;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
}

@media screen and (min-width: 768px) {
    .p-top-employee__cover {
        display: none;
    }
}

.p-top-employee__cover::after {
    content: "";
    background-color: #fff;
    position: absolute;
    inset: 0;
    opacity: 0.8;
}

.p-top-employee__cover figure:nth-child(1) {
    grid-column: 1/3;
}

.p-top-employee__cover figure:nth-child(4) {
    grid-column: 1/3;
}

.p-top-employee__cover figure img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.p-top-employee__cover figure:nth-child(1) img {
    -o-object-position: center 36%;
    object-position: center 36%;
}

.p-top-employee__wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
}

@media screen and (min-width: 768px) {
    .p-top-employee__wrapper {
        min-height: 601px;
        min-height: clamp(500px, (100vw - 1200px) * 1000, 601px);
        flex-direction: row;
    }
}

.p-top-employee__main {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
    padding: 100px 0;
}

@media screen and (min-width: 768px) {
    .p-top-employee__main {
        padding-top: 80px;
        padding-top: clamp(0px, (100vw - 1200px) * 1000, 80px);
    }
}

@media screen and (min-width: 768px) {
    .p-top-employee__content {
        width: min(520px, 45vw);
        padding-left: clamp(60px, (1440px - 100vw) * 1000, 120px);
    }
}

@media only screen and (min-width: 1200px) {
    .p-top-employee__content {
        width: 520px;
    }
}

.p-top-employee__img01 {
    width: 370px;
    max-width: 100%;
    order: 2;
    margin: 0 auto;
}

@media screen and (min-width: 768px) {
    .p-top-employee__img01 {
        min-width: 280px;
        width: calc(160px + (100vw - 1240px) * 0.5);
        width: clamp(160px + (100vw - 1240px) * 0.5, (1440px - 100vw) * 1000, 160px + (100vw - 1240px) * 0.5 + 100px);
        height: 601px;
        max-height: 100%;
        position: absolute;
        left: -140px;
        margin: 0;
    }
}

.p-top-employee__img01 img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: top left;
    object-position: top left;
}

.p-top-employee__txt {
    margin-top: 12px;
}

@media screen and (min-width: 768px) {
    .p-top-employee__txt {
        margin-top: 26px;
    }
}

.p-top-employee__txt .txt {
    line-height: 1.5;
    margin-top: 12px;
}

@media screen and (min-width: 768px) {
    .p-top-employee__txt .txt {
        line-height: 1.875;
        margin-top: 31px;
    }
}

.p-top-employee__txt .txt:first-child {
    margin-top: 0;
}

.p-top-employee__btn {
    display: flex;
    justify-content: center;
    margin-top: 21px;
}

@media screen and (min-width: 768px) {
    .p-top-employee__btn {
        justify-content: flex-start;
    }
}

@media screen and (min-width: 768px) {
    .p-top-employee__btn .c-btn01.has-underline {
        width: 258px;
    }
}

.p-top-employee__grid {
    width: 100%;
    margin: 0 auto;
    display: none;
    grid-gap: 10px;
    grid-template-columns: repeat(2, 1fr);
    order: 3;
    margin-top: 10px;
}

@media screen and (min-width: 768px) {
    .p-top-employee__grid {
        width: 49.84375vw;
        width: 49.8333333333vw;
        height: 100%;
        max-height: 601px;
        display: grid;
        grid-gap: 20px;
        gap: min(20px, 1.25vw);
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr 1fr;
        position: absolute;
        top: 0;
        right: clamp(-1.875rem, 2.5424vw + -3.0953rem, -1.125rem);
        margin: 0;
    }
}

@media only screen and (min-width: 1200px) {
    .p-top-employee__grid {
        width: 49.84375vw;
        grid-template-rows: auto;
    }
}

.p-top-employee__grid img {
    width: 100%;
    height: 100%;
    display: block;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}
.p-top-employee__grid .p-top-employee__img04 img{
    -o-object-position: clamp(-150px, 30.09vw - 381.11px, -20px) center;
    object-position: clamp(-150px, 30.09vw - 381.11px, -20px) center;
}

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

    .p-top-employee__img02,
    .p-top-employee__img03 {
        width: 20vw;
    }
}

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

    .p-top-employee__img02,
    .p-top-employee__img03 {
        width: 22.7604166667vw;
    }
}

.p-top-employee__img04 {
    grid-row: span 2;
}

@media screen and (min-width: 768px) {
    .p-top-employee__img04 {
        width: clamp(27.75rem, 11.8644vw + 22.0551rem, 31.25rem);
    }
}

.p-top-interview {
    background-color: #fafafa;
    padding: 60px 0 0;
}

@media screen and (min-width: 768px) {
    .p-top-interview {
        padding: 45px 0 0;
    }
}

.p-top-interview__boxs {
    width: calc(100% - 80px);
    margin-top: 20px;
    margin-inline: auto;
}

@media screen and (min-width: 768px) {
    .p-top-interview__boxs {
        width: 100%;
        margin-top: 18px;
    }
}

.p-top-interview__boxs .splide__track {
    overflow: visible;
}

@media screen and (min-width: 768px) {
    .p-top-interview__boxs .splide__list {
        display: grid !important;
        grid-gap: 30px 0;
        grid-template-columns: repeat(3, 1fr);
    }
}

.p-top-interview__box {
    position: relative;
}

@media screen and (min-width: 768px) {
    .p-top-interview__box {
        transition: all 0.5s;
    }

    .p-top-interview__box:has(.c-btn01__link:hover) {
        background-color: #fff;
        z-index: 1;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    }

    .p-top-interview__box:has(.c-btn01__link:hover) .p-top-interview__box__link::before {
        opacity: 0;
    }

    .p-top-interview__box:has(.c-btn01__link:hover) .c-btn01__link {
        color: var(--colorbase);
    }

    .p-top-interview__box:has(.c-btn01__link:hover)+.p-top-interview__box .p-top-interview__box__link::before {
        opacity: 0;
    }

    .p-top-interview__box:has(.c-btn01__link:hover) .p-top-interview__box__link::after {
        scale: 1 1;
        transform-origin: left center;
    }
}

@media screen and (min-width: 768px) {
    .p-top-interview__box:first-child .p-top-interview__box__link::before {
        display: none;
    }
}

.p-top-interview__box__link {
    height: 100%;
    display: block;
    position: relative;
    padding: 20px;
}

@media screen and (min-width: 768px) {
    .p-top-interview__box__link {
        padding: 20px 20px 31px;
        transition: all 0.5s;
    }
}

.p-top-interview__box__link::before {
    content: "";
    width: 1px;
    height: 100%;
    background-color: #d6d6d6;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.5s;
}

.p-top-interview__box__link::after {
    content: "";
    width: 100%;
    height: 2px;
    background-color: var(--coloryellow);
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    scale: 0 1;
    transform-origin: right center;
    transition: scale 300ms ease;
}

.p-top-interview__box__content {
    padding-top: 15px;
}

@media screen and (min-width: 768px) {
    .p-top-interview__box__content {
        padding-top: 16px;
    }
}

.p-top-interview__box__txt01 {
    font-weight: 700;
    line-height: 1.5;
}

.p-top-interview__box__txt01 t-virtual {
    display: none;
}

@media screen and (min-width: 768px) {
    .p-top-interview__box__txt01 t-virtual {
        display: inline;
    }
}

.p-top-interview__box__txt02 {
    font-weight: 700;
    line-height: 1.5;
    margin-top: 4px;
}

.p-top-interview__box__txt03 {
    margin-top: 10px;
}

@media screen and (min-width: 768px) {
    .p-top-interview__box__txt03 {
        margin-top: 15px;
    }
}

@media screen and (min-width: 768px) {
    .p-top-interview__box__txt03 .txt {
        line-height: 1.5;
    }
}

.p-top-interview__box__btn {
    margin-top: 20px;
}

@media screen and (min-width: 768px) {
    .p-top-interview__box__btn {
        margin-top: 21px;
    }
}

@media screen and (min-width: 768px) {
    .p-top-interview__box__btn .c-btn01__link::after {
        content: "";
        position: absolute;
        inset: 0;
    }
}

.p-top-interview__btn {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

@media screen and (min-width: 768px) {
    .p-top-interview__btn {
        margin-top: 44px;
    }
}

@media screen and (min-width: 768px) {
    .p-top-interview__btn .c-btn01.has-underline {
        width: 258px;
    }
}

@media screen and (min-width: 768px) {
    .p-top-interview__btn .c-btn01.has-underline .c-btn01__link {
        gap: 0;
        padding-top: 7px;
        padding-bottom: 6px;
    }
}

.p-top-roundtable {
    background-color: #fafafa;
    padding: 60px 0;
}

@media screen and (min-width: 768px) {
    .p-top-roundtable {
        padding: 54px 0 102px;
    }
}

.p-top-roundtable__main {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

@media screen and (min-width: 768px) {
    .p-top-roundtable__main {
        flex-direction: row;
        margin-top: 19px;
    }
}

@media screen and (min-width: 768px) {
    .p-top-roundtable__img {
        width: clamp(21.875rem, 30.3819vw + 7.2917rem, 43.75rem);
    }
}

.p-top-roundtable__info {
    margin-top: 20px;
}

@media screen and (min-width: 768px) {
    .p-top-roundtable__info {
        margin-top: 0;
        padding-left: clamp(1.25rem, 7.75vw + -4.5625rem, 3.1875rem);
        padding-top: clamp(0rem, 4vw + -3rem, 1rem);
        width: calc(100% - clamp(21.875rem, 30.3819vw + 7.2917rem, 43.75rem));
    }
}

.p-top-roundtable__txt {
    margin-top: 20px;
}

@media screen and (min-width: 768px) {
    .p-top-roundtable__txt {
        margin-top: clamp(0.9375rem, 0.8681vw + 0.5208rem, 1.5625rem);
    }
}

@media screen and (min-width: 768px) {
    .p-top-roundtable__txt .txt {
        line-height: 1.3125;
    }
}

.p-top-roundtable__btn {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

@media screen and (min-width: 768px) {
    .p-top-roundtable__btn {
        margin-top: clamp(1.875rem, 1.9965vw + 0.9167rem, 3.3125rem);
        justify-content: flex-start;
    }
}

.p-top-faq {
    padding: 60px 0 80px;
}

@media screen and (min-width: 768px) {
    .p-top-faq {
        padding: 67px 0 112px;
    }
}

.p-top-faq .l-container {
    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 768px) {
    .p-top-faq .l-container {
        flex-direction: row;
        justify-content: space-between;
    }
}

@media screen and (min-width: 768px) {
    .p-top-faq__head {
        width: calc(100% - clamp(22.5rem, 59.7458vw + -6.178rem, 40.125rem));
        padding-right: 20px;
    }
}

.p-top-faq__head__txt {
    margin-top: 20px;
}

@media screen and (min-width: 768px) {
    .p-top-faq__head__txt .txt {
        line-height: 1.875;
    }
}

.p-top-faq__head__btn {
    display: none;
    margin-top: 30px;
}

@media screen and (min-width: 768px) {
    .p-top-faq__head__btn {
        display: block;
        margin-top: 30px;
    }
}

@media screen and (min-width: 768px) {
    .p-top-faq__head__btn .c-btn01.has-underline .c-btn01__link {
        padding-top: 5px;
        padding-bottom: 5px;
    }
}

.p-top-faq__content {
    margin-top: 30px;
}

@media screen and (min-width: 768px) {
    .p-top-faq__content {
        margin-top: 0;
        width: clamp(22.5rem, 59.7458vw + -6.178rem, 40.125rem);
    }
}

.p-top-faq__content__btn {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

@media screen and (min-width: 768px) {
    .p-top-faq__content__btn {
        display: none;
    }
}

.top-sp-br {
    display: none;
}

@media screen and (max-width: 767px) {
    .top-sp-br {
        display: block;
    }
}

/* ② ヒーローエリアの本文を16px未満にしない */
@media screen and (min-width: 768px) {
    .p-top-mv__txt .txt {
        font-size: clamp(1rem, 1.1719vw + 0.1875rem, 1.125rem);
    }
}

/* スマホ表示時の装飾と見出しサイズの調整 */
@media screen and (max-width: 767px) {
    .p-top-aboutappeal .c-box01__head__txt {
        font-size: 1.75rem;
        line-height: 1.05;
        padding-top: 18px;
        padding-left: 12px;
    }

    .p-top-aboutappeal .c-box01__head__txt .txt-big {
        font-size: 2.75rem;
    }

    .p-top-aboutappeal .c-box01__head__txt::before {
        width: 40px;
        height: 65px;
    }

    .p-top-intro__lead__txt::after {
        width: 30px;
        height: 30px;
        left: -10px;
        right: auto;
        bottom: -10px;
    }
}