@charset "UTF-8";

.container {
    max-width: 1200px;
    padding-bottom: 250px;
}

.content {
    margin: 100px auto;
    width: 80%;
}

.title {
    padding-top: 10px;
}

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

.footprint__image0 {
    position: absolute;
    top: 0;
    right: calc(50% - 900px);
    transform: rotate(-140deg);
}

.footprint__image1 {
    position: absolute;
    top: calc(50% - -172px);
    right: calc(50% - 885px);
    transform: rotate(-140deg);
}

.footprint__image2 {
    position: absolute;
    top: calc(50% - -230px);
    right: calc(50% - 730px);
    transform: rotate(-140deg);
}

.footprint__image3 {
    position: absolute;
    top: calc(50% - -373px);
    right: calc(50% - 715px);
    transform: rotate(-140deg);
}

.footprint__image4 {
    position: absolute;
    top: calc(50% - -390px);
    right: calc(50% - 560px);
    transform: rotate(-120deg);
}

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

/*---------------------------
テキスト
-----------------------------*/
.text-area {
    margin: 0 auto 50px;
    text-align: left;
    font-size: 1.2rem;
}

/*---------------------------
フォーム
-----------------------------*/
.form-area__btn__img:hover {
    opacity: 0.7;
}


/*---------------------------
フォーム: 名前、メール
-----------------------------*/
.name-area,
.mail-area {
    margin: 0 auto 50px;
    text-align: left;
}

.name-area__title,
.mail-area__title {
    font-weight: bold;
    font-size: 1.0rem;
}

.name-area__required,
.mail-area__required {
    font-size: 0.8rem;
    color: #fff;
    border: 1px solid #baeb75;
    border-radius: 10px;
    background-color: #baeb75;
    padding: 5px;
}

.name-area__caution,
.mail-area__caution,
.mail-area__attention {
    color: red;
    display: none;
}

.name-area__input,
.mail-area__input {
    border: 1px solid #98a478;
    border-radius: 5px;
    background-color: #fff;
    width: 880px;
    height: 50px;
    margin-top: 10px;
}

.name-area__input--caution,
.mail-area__input--caution {
    border: 1px solid red;
}

/*---------------------------
フォーム: メッセージ
-----------------------------*/
.message-area {
    margin: 0 auto 50px;
    text-align: left;
}

.message-area__title {
    font-weight: bold;
    font-size: 1.0rem;
}

.message-area__input {
    border: 1px solid #98a478;
    border-radius: 5px;
    background-color: #fff;
    width: 880px;
    margin-top: 10px;
}

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

.footprint__image6 {
    position: absolute;
    top: calc(50% - 110px);
    left: calc(50% - 255px);
    transform: rotate(-140deg);
}

.footprint__image7 {
    position: absolute;
    top: calc(50% - 5px);
    left: calc(50% - 280px);
    transform: rotate(-140deg);
}

.footprint__image8 {
    position: absolute;
    top: calc(50% - -30px);
    left: calc(50% - 385px);
    transform: rotate(-140deg);
}

.footprint__image9 {
    position: absolute;
    top: calc(50% - -137px);
    left: calc(50% - 390px);
    transform: rotate(-140deg);
}

.footprint__image10 {
    position: absolute;
    top: calc(50% - -150px);
    left: calc(50% - 515px);
    transform: rotate(-120deg);
}

.footprint__image11 {
    position: absolute;
    top: calc(50% - -200px);
    left: calc(50% - 630px);
    transform: rotate(-120deg);
}

/*---------------------------
ノートPC
-----------------------------*/
@media screen and (max-width: 1280px) {
    /*---------------------------
    テキスト
    -----------------------------*/
    .text-area {
        max-width: 800px;
        margin: 0 auto 50px;
    }

    /*---------------------------
    フォーム: 名前、メール
    -----------------------------*/
    .name-area,
    .mail-area {
        max-width: 800px;
        margin: 0 auto 50px;
    }

    .name-area__required,
    .mail-area__required {
        font-size: 0.8rem;
    }

    .name-area__input,
    .mail-area__input {
        width: 780px;
        height: 30px;
    }

    /*---------------------------
    フォーム: メッセージ
    -----------------------------*/
    .message-area {
        max-width: 800px;
        margin: 0 auto 50px;
    }

    .message-area__input {
        width: 780px;
    }

    /*---------------------------
    足跡
    -----------------------------*/
    .footprint__image0 {
        top: 0;
        right: calc(50% - 613px);
        transform: rotate(-130deg);
    }

    .footprint__image1 {
        top: calc(50% - -115px);
        right: calc(50% - 590px);
        transform: rotate(-130deg);
    }

    .footprint__image2 {
        top: calc(50% - -138px);
        right: calc(50% - 476px);
        transform: rotate(-140deg);
    }

    .footprint__image3 {
        top: calc(50% - -250px);
        right: calc(50% - 472px);
        transform: rotate(-140deg);
    }

    .footprint__image4 {
        top: calc(50% - -254px);
        right: calc(50% - 367px);
        transform: rotate(-140deg);
    }

    .footprint__image5 {
        top: calc(50% - -388px);
        right: calc(50% - 430px);
        transform: rotate(-140deg);
    }

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

    .footprint__image7 {
        top: calc(50% - 100px);
        left: calc(50% - 350px);
        transform: rotate(-130deg);
    }

    .footprint__image8 {
        top: calc(50% - 114px);
        left: calc(50% - 465px);
        transform: rotate(-130deg);
    }

    .footprint__image9 {
        top: calc(50% - 25px);
        left: calc(50% - 500px);
        transform: rotate(-130deg);
    }

    .footprint__image10 {
        top: calc(50% - 45px);
        left: calc(50% - 577px);
        transform: rotate(-130deg);
    }

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

/*---------------------------
タブレット
-----------------------------*/
@media screen and (max-width: 768px) {
    .content {
        margin: 100px 120px;
    }

    /*---------------------------
    足跡
    -----------------------------*/
    .footprint__image0,
    .footprint__image1,
    .footprint__image2,
    .footprint__image3,
    .footprint__image4,
    .footprint__image5 {
        display: none;
    }

    /*---------------------------
    テキスト
    -----------------------------*/
    .text-area {
        margin: 0 0 50px;
    }

    /*---------------------------
    フォーム: 名前、メール
    -----------------------------*/
    .name-area,
    .mail-area {
        margin: 0 0 50px;
    }

    .name-area__input,
    .mail-area__input {
        width: 520px;
    }

    /*---------------------------
    フォーム: メッセージ
    -----------------------------*/
    .message-area {
        margin: 0 0 50px;
    }

    .message-area__input {
        width: 520px;
    }

    /*---------------------------
    フォーム
    -----------------------------*/
    .form-area__btn {
        margin-right: 100px;
    }

    /*---------------------------
    足跡
    -----------------------------*/
    .footprint__image6 {
        /* top: -250px;
        left: 100px; */
        top: calc(50% - 250px);
        left: calc(50% - 266px);
        transform: rotate(-170deg);
    }

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

    .footprint__image8 {
        /* top: -130px;
        left: 80px; */
        top: calc(50% - 130px);
        left: calc(50% - 303px);
        transform: rotate(-160deg);
    }

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

    .footprint__image10 {
        /* top: -70px;
        left: 10px; */
        top: calc(50% - 40px);
        left: calc(50% - 370px);
        transform: rotate(-130deg);
    }

    .footprint__image11 {
        /* top: 30px; */
        top: calc(50% - -50px);
        left: 0;
        transform: rotate(-130deg);
    }
}

/*---------------------------
SP
-----------------------------*/
@media screen and (max-width: 480px) {
    .content {
        margin: 0 auto;
    }

    .title__image {
        width: 150px;
    }

    /*---------------------------
    テキスト
    -----------------------------*/
    .text-area {
        font-size: 0.7rem;
    }

    /*---------------------------
    フォーム: 名前、メール
    -----------------------------*/
    .name-area__input,
    .mail-area__input {
        width: 270px;
    }

    /*---------------------------
    フォーム: メッセージ
    -----------------------------*/
    .message-area__input {
        width: 270px;
    }

    /*---------------------------
    フォーム
    -----------------------------*/
    .form-area__btn {
        margin-right: 25px;
    }

    .form-area__btn__img {
        width: 60px;
    }

    /*---------------------------
    足跡
    -----------------------------*/
    .footprint__image6 {
        width: 30px;
        top: calc(50% - -10px);
        left: calc(50% - 90px);
        transform: rotate(-170deg);
    }

    .footprint__image7 {
        width: 30px;
        top: calc(50% - -60px);
        left: calc(50% - 60px);
        transform: rotate(-170deg);
    }

    .footprint__image8 {
        width: 30px;
        top: calc(50% - -100px);
        left: calc(50% - 108px);
        transform: rotate(-160deg);
    }

    .footprint__image9 {
        width: 30px;
        top: calc(50% - -160px);
        left: calc(50% - 88px);
        transform: rotate(-130deg);
    }

    .footprint__image10 {
        width: 30px;
        top: calc(50% - -170px);
        left: calc(50% - 152px);
        transform: rotate(-130deg);
    }

    .footprint__image11 {
        width: 30px;
        top: calc(50% - -218px);
        left: 0;
        transform: rotate(-130deg);
    }
}