.header__logo {
    position: relative;
    top: 49px;
}

/* ヘッダーfv後の変更 */
.header.transform .header__logo {
    position: inherit;
    width: 107px;
    transition: 0.3s;
}

.header.transform .header__container {
    padding: 24px 0;
}

.mv {
    width: 100%;
    position: relative;
}

.mv__img-box {
    text-align: right;
}

.mv__img {
    margin-left: auto;
    z-index: 5;
    position: relative;
}

.mv__sub-text {
    font-size: 27px;
    color: #fff;
}

.mv__title {
    font-size: 60px;
    font-weight: 900;
    color: #fff;
}

.mv__left {
    position: absolute;
    z-index: 10;
    top: 43.5%;
    left: 5.5%;
}


/* about */

.about {
    background-color: #FFEFD9;
    position: relative;
}

.about::after {
    content: "";
    display: block;
    background-image: url(../image/top_white-nami.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1440 / 301;
}

.about__container {
    display: flex;
    top: 0;
    position: relative;
    z-index: 10;
}

.about__left {
    width: 50%;
    position: relative;
}

.about__right {
    width: 50%;
    padding-top: 52px;
    display: flex;
    justify-content: end;
}

.about__right-container {
    width: 86%;

    display: flex;
    flex-direction: column;
}

.about__right-container:nth-of-type(3) {
    align-items: center;
    justify-content: center;
}

.about__right-box {
    display: flex;
    flex-direction: column;
    justify-content: center;

    row-gap: 30px;
}

.about__eye-box {
    display: flex;
    justify-content: center;
    width: 100%;
}

.about__button {
    display: flex;
}

.about__curcle {
    width: 77.6%;
}

.about__eye {
    width: 38.7%;
}

.about__text {
    margin-top: 42px;
    color: #28629B;
}


.about__title {
    font-size: 40px;
    font-weight: 900;
    color: #28629B;
}

.about__title-box {
    display: flex;
    flex-direction: column;
}

.about__button {
    margin: 40px auto 0;
    width: 218px;
    padding: 12px 27px;
    margin-left: 95px;
}

.about__title {
    position: relative;
}

.about__title::after {
    content: "";
    display: block;
    background-image: url(../image/fv_border.png);
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    width: 97%;
    max-width: 482px;
    bottom: -12px;
    left: 0;
    aspect-ratio: 482 / 12;
}


/* 回転円 */
.circle-text {
    position: absolute;
    top: -75px;
    left: 10px;
    width: 100%;
    height: auto;
    fill: none;
    animation: rotateCircle 30s linear infinite;
    /* 回転アニメーション */
    transform-origin: center center;
}

/* 回転アニメーション定義 */
@keyframes rotateCircle {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* テキストの見た目 */
text {
    font-size: 25px;
    font-weight: 300;
    letter-spacing: 0.31em;
    fill: #28629B;
}






/* service */
.service {
    margin-top: 165px;
    padding-bottom: 22.5%;
    position: relative;
    z-index: 55;
}

.service__inner-bg {
    position: relative;
    z-index: 15;
}

.service::before {
    content: "";
    display: block;
    position: absolute;
    background-image: url(../image/top_service-bg01.png.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
    width: 77.7%;
    left: -15.6%;
    bottom: 411px;
    aspect-ratio: 1120 / 1161;
}

.service::after {
    content: "";
    display: block;
    position: absolute;
    background-image: url(../image/top_service-bg02.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
    width: 46.2%;
    right: -10.7%;
    bottom: 127px;
    aspect-ratio: 666 / 812;
}


.service__title::after {
    content: "";
    display: block;
    background-image: url(../image/service__border.png);
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    width: 100%;
    bottom: -12px;
    left: 0;
    aspect-ratio: 137 / 12;
}

.section__title-border {
    width: 10.7%;
}

.service__group {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.service__container {
    width: 100%;
}

.service__box {
    width: 32.3%;
    position: relative;
}

.service__box-text {
    font-size: clamp(0.813rem, -0.438rem + 2.08vw, 1.438rem);

}

.service__box {
    border-radius: 50px;
}

.service__box-img {
    border-radius: 50px;
}

.service__box-other {
    border-radius: 50px;
}

.service__other-img {
    border-radius: 50px;
}

.service__box-text01 {
    text-align: center;
    position: absolute;
    text-align: center;
    top: 6.6%;
    left: 5%;
    z-index: 50;
    color: #fff;
    width: 90%;
}

.service__box-text02 {
    text-align: center;
    position: absolute;
    text-align: center;
    top: 6.6%;
    left: 5%;
    z-index: 50;
    color: #fff;
    width: 90%;
}

.service__box-text03 {
    text-align: center;
    position: absolute;
    text-align: center;
    top: 6.6%;
    left: 9%;
    z-index: 50;
    color: #fff;
    width: 82%;
}


.service__box-text01::before {
    content: "";
    display: block;
    background-image: url(../image/service_stroke01.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.service__box-text02::before {
    content: "";
    display: block;
    background-image: url(../image/service_stroke02.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.service__box-text03::before {
    content: "";
    display: block;
    background-image: url(../image/service_stroke03.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.service__box-arrow {
    width: 20.5%;
    max-width: 60px;
    position: absolute;
    bottom: 0;
    right: 0;
}

.section__title-box {
    margin-bottom: 68px;
}

.service__box-other {
    position: relative;
    margin-top: 28px;
    display: inline-block;
    width: 100%;
    overflow: hidden;
}

.service__arrow-other {
    width: 6.6%;

    position: absolute;
    bottom: 0;
    right: 0;
}

.service__box-text04::before {
    content: "";
    display: block;
    background-image: url(../image/service_stroke04.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.service__box-text04 {
    text-align: center;
    position: absolute;
    left: 47.1%;
    top: 41.3%;
    width: 7.7%;
    z-index: 50;
    color: #fff;
}

.service__button {
    width: 249px;
    margin-top: 60px;
    margin: 60px auto 0;
    column-gap: 5px;
    padding: 12px 27px;
}


/* company */
.company__box {
    width: 72.6%;
    margin: 0 auto;
    margin-bottom: 60px;
}

.company__title::after {
    content: "";
    display: block;
    background-image: url(../image/company__border.png);
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    width: 100%;
    bottom: -8px;
    left: 0;
    aspect-ratio: 83 / 8;
}

.table__title {
    font-size: 26px;
    font-weight: 900;
}

.table__text {
    font-size: 26px;
    width: 73.4%;
}


.table__title,
.table__text {
    padding: 15px 0;
}

.table__box {
    border-bottom: 1px solid rgb(40, 98, 155, 0.65);
}


.company__button {
    background-color: #E3A145;
    color: #fff;
    width: 229px;
    margin: 0 auto;
    padding: 12px 27px;
}

.company {
    margin-bottom: 34px;
    margin-top: 29px;
    position: relative;
}

.company::before {
    content: "";
    display: block;
    position: absolute;
    background-image: url(../image/top_company01.png);
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
    width: 19%;
    aspect-ratio: 278 / 277;
    left: 5.5%;
    top: -107px;
}

.company::after {
    content: "";
    display: block;
    position: absolute;
    background-image: url(../image/top_company02.png);
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
    width: 17%;
    aspect-ratio: 249 / 289;
    right: 2.9%;
    bottom: 46px;
}

@keyframes image-poyon {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(30px);
    }

    60% {
        opacity: 1;
        transform: scale(1.05) translateY(-10px);
    }

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

.company::before,
.company::after {
    opacity: 0;
    transform: scale(0.8) translateY(30px);
    transition: opacity 0.3s, transform 0.3s;
}

.company.is-poyon::before,
.company.is-poyon::after {
    animation: image-poyon 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s forwards;
}


.service__box {
    overflow: hidden;
}

.service__box:hover {
    overflow: hidden;
    transition: .4s;
    opacity: 1;
}

.service__box:hover .service__box-img {
    transform: scale(1.2);
    transition: .4s;
    overflow: hidden;
}

.service__box-img {
    transition: .4s;
}


.service__box-other:hover .service__other-img {
    transform: scale(1.1);
    transition: .4s;
    overflow: hidden;
}

.service__other-img {
    transition: .4s;
}

.service__box-other {
    opacity: 1;
}

.service__group:hover .service__box-other {
    opacity: 1;
}


/* 目の動き */
.anim-box.poyoyon2.is-animated {
    animation: poyoyon2 1.2s cubic-bezier(0.25, 1.25, 0.5, 1) forwards;
}

@keyframes poyoyon2 {
    0% {
        transform: scale(1) translateY(0);
    }

    10% {
        transform: scale(1.05, 0.95) translateY(5px);
        /* ぐにゃっと下へ */
    }

    25% {
        transform: scale(0.9, 1.1) translateY(-12px);
        /* 反発して上へ */
    }

    40% {
        transform: scale(1.08, 0.92) translateY(6px);
        /* 再び下へ軽く揺れる */
    }

    55% {
        transform: scale(0.97, 1.03) translateY(-4px);
        /* 小さく反発 */
    }

    70% {
        transform: scale(1.02, 0.98) translateY(2px);
    }

    100% {
        transform: scale(1) translateY(0);
        /* 元に戻る */
    }
}

@media (max-width:960px) {
    .header__logo {
        top: 0;
    }

    .header__container {
        padding: 15px 0;
    }


    .mv__sub-text {
        font-size: 18px;
    }

    .mv__title {
        font-size: 37px;
    }

    .about__curcle {
        width: 60.5%;
        left: 15px;
        top: 52px;
        position: absolute;
    }

    .circle-text {
        width: 89.4%;
        top: -5px;
        left: 0;
    }

    .about__left {
        width: 44.7%;
    }

    .about__right {
        width: 51.2%;
        padding-top: 13px;
    }

    .about__right-container {
        width: 100%;
    }

    .about__eye {
        width: 35.8%;
    }

    .about__title {
        font-size: 28px;
    }

    .about__right-box {
        align-items: center;
    }

    .about__title::after {
        width: 100%;
        aspect-ratio: 340 / 12;
    }

    .about__text {
        text-align: center;
        font-size: 16px;
    }

    .about__container {
        justify-content: space-between;
    }

    .about__button {
        width: 53.5%;
        padding: 12px 32px;
    }

    .service__title::after {
        aspect-ratio: 106 / 12;
        bottom: -6px;
    }

    .service__box {
        width: 48.9%;
    }

    .service__box {
        border-radius: 30px;
    }

    .service__box-img {
        border-radius: 30px;
    }

    .service__box-other {
        border-radius: 30px;
    }

    .service__other-img {
        border-radius: 30px;
    }

    .service__group {
        flex-wrap: wrap;
        row-gap: 16px;
    }

    .service__box-other {
        margin-top: 0;
        width: 50%;
    }

    .service__box-text {
        font-size: 16px;
    }

    .service__box-text01::before {
        width: 81%;
        left: 32px;
    }


    .table__title {
        font-size: 20px;
    }

    .table__text {
        font-size: 18px;
        width: 75.7%;
    }

    .company__box {
        width: 100%;
        margin-bottom: 50px;
    }

    .table__group {
        margin-left: 3px;
    }


    .service__box-text01 {
        text-align: left;
        top: auto;
        bottom: 10px;
        left: 9%;
        width: auto;
    }

    .service__box-text01::before {
        background-image: url(../image/service_stroke01-sp.svg);
        width: 258px;
        left: -12px;
    }

    .service__box-text02 {
        text-align: left;
        top: auto;
        bottom: 10px;
        left: 9%;
        width: auto;
    }

    .service__box-text02::before {
        width: 261px;
        left: -12px;
    }

    .service__box-text03 {
        text-align: left;
        top: auto;
        bottom: 10px;
        left: 9%;
        width: auto;
    }

    .service__box-text03::before {

        width: 240px;
        left: -12px;
    }

    .service__box-text04 {
        text-align: left;
        top: auto;
        bottom: 10px;
        left: 9%;
        width: auto;
    }

    .service__box-text04::before {
        width: 77px;
        left: -12px;
    }


    .service {
        margin-top: 80px;
    }

    .service::before {
        width: 67%;
        bottom: 322px;
        aspect-ratio: 580 / 602;
    }

    .service::after {
        width: 56.2%;
        bottom: 152px;
        aspect-ratio: 460 / 559;
    }

    .service__arrow-other {
        width: 20.5%;
    }

    .service__button {
        width: 31%;
    }

    .company {
        margin-bottom: 60px;
        margin-top: 70px;
    }

    .company__title::after {
        aspect-ratio: 106 / 12;
    }

    .company__button {
        width: 31.4%;
    }

    .company::after {
        bottom: -50px;
    }
}



@media (max-width:768px) {
    .header__logo {
        position: inherit;
        top: 0;
    }

    .mv__sub-text {
        font-size: 15px;
    }

    .mv__title {
        font-size: 25px;
    }

    .mv__left {
        top: 36%;
    }

    .about__left {
        width: 100%;
        margin-top: 9%;
    }

    .about__right {
        width: 100%;
        justify-content: center;
        padding-top: 10px;
    }


    .about__container {
        flex-direction: column;
    }

    .about__eye-box {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .about__eye {
        width: 31.6%;
        margin-left: 30px;
        max-width: 150px;
    }

    .about__title {
        font-size: 20px;
        text-align: center;
    }


    .about__title::after {
        content: "";
        display: block;
        background-image: url(../image/fv_border-sp.png);
        background-position: left;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        width: 100%;
        bottom: -8px;
        left: 0;
        aspect-ratio: 245 / 8;
    }

    .about__title-box {
        align-items: center;
    }


    .circle-text {
        top: 0;
        width: 75%;
        left: 11%;
    }

    .about__curcle {
        padding-top: 0;
        width: 171px;
        left: 14%;
        width: 51.5%;
    }

    .about__text {
        margin-top: 83%;
        text-align: center;
        font-size: 14px;
    }

    .about__right-box {
        row-gap: 10px;
    }

    .about__button {
        margin-left: 0;
        width: 186px;
        justify-content: center;
        margin: 30px auto 0;
    }

    .pc__button-text {
        font-size: 13px;
    }

    .pc__button-arrow {
        width: 25px;
    }


    .service {
        margin-top: 84px;
    }

    .service__title::after {
        content: "";
        display: block;
        background-image: url(../image/top_serviceborder-sp.png);
        background-position: left;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        width: 100%;
        bottom: -8px;
        left: 0;
        aspect-ratio: 83 / 8;
    }

    .service__group {
        flex-direction: column;
        row-gap: 20px;
    }

    .service__box {
        width: 100%;
    }

    .service__box-other {
        margin-top: 20px;
        width: 100%;
    }

    .service__box-text {
        font-size: 15px;
    }

    .service__box-text01 {
        text-align: left;
        top: auto;
        bottom: 10px;
    }

    .service__box-text02 {
        text-align: left;
        top: auto;
        bottom: 10px;
    }

    .service__box-text03 {
        text-align: left;
        top: auto;
        bottom: 10px;
    }

    .service__box-text04 {
        text-align: left;
        top: auto;
        bottom: 10px;
        left: 9%;
        width: auto;
    }

    .service__box-text01::before {
        background-image: url(../image/service_stroke01-sp.svg);
        background-position: left;
        background-size: contain;
        top: 0;
        left: -9px;
        aspect-ratio: 241 / 49;
    }

    .service__box-text02::before {
        background-position: left;
        background-size: contain;
        top: 0;
        left: -9px;
        width: 245px;
    }

    .service__box-text03::before {
        background-position: left;
        background-size: contain;
        top: 0;
        left: -9px;
        width: 216px;
    }

    .service__box-text04::before {
        background-position: left;
        background-size: contain;
        top: 0;
        left: -9px;
        width: 67px;
    }

    .section__title-box {
        margin-bottom: 40px;
    }

    .service__box-arrow {
        width: 43px;
        right: 5px;
    }

    .service__arrow-other {
        width: 43px;
    }

    .service__button {
        margin: 40px auto 0;
        width: 212px;
        justify-content: center;
        padding: 12px 30px;

    }

    .table__title {
        font-size: 16px;
        padding: 0 0 15px 0;
    }

    .table__text {
        font-size: 15px;
        padding: 0 0 20px 0;
        width: 100%;
    }

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

    .table__group {
        display: flex;
        flex-direction: column;
        row-gap: 20px;
    }

    .company__box {
        width: 100%;
        margin-bottom: 50px;
    }

    .company__button {
        width: 187px;
        padding: 12px 30px;
    }

    .company::before {
        top: -95px;
    }

    .company::after {
        bottom: -35px;
    }



}