@charset "UTF-8";

.container {
    padding-bottom: 500px;
}

.content {
    margin: 0 auto 50px;
    padding-top: 30px;
}

.title {
    padding-top: 10px;
}

/*---------------------------
ねこやについて
-----------------------------*/
.content__about__image {
    width: 350px;
    border: 1px #000 solid;
    border-radius: 50%;
}

.content__about__text {
    margin-top: 30px;
}

.content__about__text__title {
    font-size: 2.0rem;
    font-weight: lighter;
    color: #445376;
}

.content__about__text__subTitle {
    margin-bottom: 30px;
    color: #445376;
}

.content__about__text__desc {
    padding-bottom: 10px;
}

.content__skill__text_title,
.content__skill__text__subTitle {
    color: #445376;
}

/*---------------------------
足跡
-----------------------------*/
.footprint {
    position: relative;
}

.footprint__image0 {
    position: absolute;
    top: calc(50% - -10px);
    right: calc(50% - 920px);
    transform: rotate(-125deg);
}

.footprint__image1 {
    position: absolute;
    top: calc(50% - -120px);
    right: calc(50% - 820px);
    transform: rotate(-125deg);
}

.footprint__image2 {
    position: absolute;
    top: calc(50% - -118px);
    right: calc(50% - 650px);
    transform: rotate(-125deg);
}

.footprint__image3 {
    position: absolute;
    top: calc(50% - -235px);
    right: calc(50% - 530px);
    transform: rotate(-125deg);
}

.footprint__image4 {
    position: absolute;
    top: calc(50% - -222px);
    right: calc(50% - 350px);
    transform: rotate(-125deg);
}

.footprint__image5 {
    position: absolute;
    top: calc(50% - -356px);
    right: calc(50% - 260px);
    transform: rotate(-125deg);
}

/*---------------------------
Skill
-----------------------------*/
.content__skill{
    text-align: center;
}

.content__skill__text_title {
    font-size: 2.0rem;
    font-weight: lighter;
}

.content__skill__text__desc {
    margin-top: 30px;
}

/*---------------------------
足跡
-----------------------------*/
.footprint__image6 {
    position: absolute;
    top: calc(50% - 30px);
    left: calc(50% - 280px);
    transform: rotate(-125deg);
}

.footprint__image7 {
    position: absolute;
    top: calc(50% - -100px);
    left: calc(50% - 370px);
    transform: rotate(-125deg);
}

.footprint__image8 {
    position: absolute;
    top: calc(50% - -90px);
    left: calc(50% - 540px);
    transform: rotate(-125deg);
}

.footprint__image9 {
    position: absolute;
    top: calc(50% - -200px);
    left: calc(50% - 640px);
    transform: rotate(-125deg);
}

.footprint__image10 {
    position: absolute;
    top: calc(50% - -200px);
    left: calc(50% - 816px);
    transform: rotate(-125deg);
}

.footprint__image11 {
    position: absolute;
    top: calc(50% - -312px);
    left: calc(50% - 940px);
    transform: rotate(-125deg);
}

/*---------------------------
ノートPC
-----------------------------*/
@media screen and (max-width: 1280px) {
    /*---------------------------
    足跡
    -----------------------------*/
    .footprint__image0 {
        top: calc(50% - -10px);
        right: calc(50% - 600px);
        transform: rotate(-120deg);
    }

    .footprint__image1 {
        top: calc(50% - -120px);
        right: calc(50% - 550px);
        transform: rotate(-120deg);
    }

    .footprint__image2 {
        top: calc(50% - -70px);
        right: calc(50% - 450px);
        transform: rotate(-120deg);
    }

    .footprint__image3 {
        top: calc(50% - -160px);
        right: calc(50% - 400px);
        transform: rotate(-120deg);
    }

    .footprint__image4 {
        top: calc(50% - -120px);
        right: calc(50% - 300px);
        transform: rotate(-120deg);
    }

    .footprint__image5 {
        top: calc(50% - -200px);
        right: calc(50% - 230px);
        transform: rotate(-120deg);
    }

    /*---------------------------
    足跡
    -----------------------------*/
    .footprint__image6 {
        top: calc(50% - 30px);
        left: calc(50% - 280px);
        transform: rotate(-120deg);
    }

    .footprint__image7 {
        top: calc(50% - -60px);
        left: calc(50% - 340px);
        transform: rotate(-120deg);
    }

    .footprint__image8 {
        top: calc(50% - -5px);
        left: calc(50% - 420px);
        transform: rotate(-120deg);
    }

    .footprint__image9 {
        top: calc(50% - -90px);
        left: calc(50% - 470px);
        transform: rotate(-120deg);
    }

    .footprint__image10 {
        top: calc(50% - -40px);
        left: calc(50% - 550px);
        transform: rotate(-120deg);
    }

    .footprint__image11 {
        top: calc(50% - -130px);
        left: calc(50% - 600px);
        transform: rotate(-120deg);
    }

}

/*---------------------------
タブレット
-----------------------------*/
@media screen and (max-width: 768px) {
    /*---------------------------
    足跡
    -----------------------------*/
    .footprint__image0 {
        /* top: -30px;
        right: 5px; */
        top: calc(50% - -30px);
        right: calc(50% - 380px);
        transform: rotate(-140deg);
    }

    .footprint__image1 {
        /* top: 54px;
        right: 12px; */
        top: calc(50% - -150px);
        right: calc(50% - 350px);
        transform: rotate(-140deg);
    }

    .footprint__image2 {
        /* top: 62px;
        right: 90px; */
        top: calc(50% - -160px);
        right: calc(50% - 250px);
        transform: rotate(-130deg);
    }

    .footprint__image3 {
        /* top: 145px;
        right: 68px; */
        top: calc(50% - -250px);
        right: calc(50% - 200px);
        transform: rotate(-130deg);
    }

    .footprint__image4 {
        display: none;
    }

    .footprint__image5 {
        display: none;
    }

    .footprint__image6 {
        /* top: 10px;
        left: 200px; */
        top: calc(50% - -10px);
        left: calc(50% - 200px);
        transform: rotate(-160deg);
    }

    .footprint__image7 {
        /* top: 100px;
        left: 218px; */
        top: calc(50% - -100px);
        left: calc(50% - 150px);
        transform: rotate(-160deg);
    }

    .footprint__image8 {
        /* top: 103px;
        left: 108px; */
        top: calc(50% - -103px);
        left: calc(50% - 260px);
        transform: rotate(-130deg);
    }

    .footprint__image9 {
        /* top: 200px;
        left: 70px; */
        top: calc(50% - -200px);
        left: calc(50% - 300px);
        transform: rotate(-130deg);
    }

    .footprint__image10 {
        /* top:145px; */
        top: calc(50% - -145px);
        left: 0;
        transform: rotate(-120deg);
    }

    .footprint__image11 {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .container {
        padding-bottom: 300px;
    }

    .title__image {
        width: 150px;
    }
    /*---------------------------
    足跡
    -----------------------------*/
    .footprint__image0,
    .footprint__image1,
    .footprint__image2,
    .footprint__image3 {
        display: none;
    }

    .footprint__image6 {
        width: 30px;
        /* left: 85px; */
        left: calc(50% - 100px);
    }

    .footprint__image7 {
        width: 30px;
        /* top: 65px;
        left: 98px; */
        top: calc(50% - -65px);
        left: calc(50% - 60px);
    }

    .footprint__image8 {
        width: 30px;
        /* top: 90px;
        left: 60px; */
        top: calc(50% - -90px);
        left: calc(50% - 120px);
        transform: rotate(-150deg);
    }

    .footprint__image9 {
        width: 30px;
        /* top: 150px;
        left: 50px; */
        top: calc(50% - -150px);
        left: calc(50% - 120px);
        transform: rotate(-130deg);
    }

    .footprint__image10 {
        width: 30px;
    }

}