/* 全体 */

html {
    overflow-x: hidden;
    /* 横スクロールを消すプロパティ */
}

body {
    font-family: "Zen Maru Gothic", "Noto Sans JP", "Montserrat", "Roboto", "Hiragino Sans", "Meiryo", "Hiragino Kaku Gothic ProN", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #666666;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

.radius {
    border-radius: 30px;
}

span[lang="en"] {
    font-family: "Montserrat", serif;
}

/* 見出し */
.title {
    font-size: 40px;
}

@media screen and (max-width:570px) {
    .title {
        font-size: 22px;
    }
}

/* ※titleのレスポンシブ対応は各セクションで行う */

/* 説明文の行間180% */
p {
    line-height: 180%;
}


/* 幅 */
.wrapper {
    width: 80%;
    max-width: 945px;
    margin: 0 auto;
}

.min_wrapper {
    width: 100%;
    margin: auto;
    z-index: 100;
}

@media screen and (max-width:570px) {
    .min_wrapper {
        width: 100%;
    }
}


/* メインビジュアル */
.about_wrapper {
    width: 80%;
    margin-left: auto;
}


.about_back {
    width: 80%;
    margin-left: 20%;
}



.about_vector1 {
    position: absolute;
    left: 24%;
    top: 74%;
    z-index: -100;
}

.about_vector2 {
    position: absolute;
    top: 320%;
    right: 0;
    z-index: -100;
    margin-left: 226px;
}

@media screen and (max-width:1000px) {
    .about_vector1 {
        left: 32%;
        top: 48%;
    }

    .about_vector2 {
        top: 370%;
    }
}

@media screen and (max-width:768px) {
    .about_vector1 {
        left: 7%;
    }

    .about_vector2 {
        top: 320%;
        width: 100%;
    }
}

.mv {
    position: relative;
    height: 90vh;
    background-image: url(../image/mv_about.jpeg);
    background-size: cover;
    border-bottom-left-radius: 50px;

}

.mv_title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
}

.mv_title h2 {
    text-transform: capitalize;
    font-size: 72px;
}

@media screen and (max-width:768px) {
    .mv {
        margin-left: 5%;
    }

    .about_wrapper {
        width: 100%;
        margin-left: 0;
    }

    .mv_title h2 {
        font-size: 41px;
    }
}

@media screen and (max-width:570px) {
    .mv {
        background-position: top;
        height: 60vh;
    }

    .mv_title h2 {
        font-size: 30px;
    }

    .mv_title p {
        font-size: 10px;
    }
}





/* ファーストビュー */

.fv {
    position: relative;
}

.fv_title {
    text-align: center;
    margin-top: 100px;
}

.fv_title h2 {
    text-align: center;
    line-height: 150%;
}

.fv_title p {
    margin-top: 25px;
}

.fv_image {
    display: flex;
}


.fv_img01 {
    width: 100%;
    max-width: 300px;
    min-width: 157px;
    height: auto;
    margin: 75px 17% 40px 0;
    object-fit: cover;
}

.fv_img02 {
    width: 60%;
    min-width: 198px;
    height: auto;
    margin-top: 199px;
    object-fit: cover;
}

@media screen and (max-width:1300px) {
    .fv_img01 {
        margin-right: 45px;
    }
}


/* PC版ブレイクポイント */
@media screen and (max-width:1000px) {
    .fv_img01 {
        margin: 75px 45px 40px 0;
    }

    .fv_image {
        flex-direction: column;
        align-items: center;
    }

    .fv_img01 {
        max-width: 310px;
        min-width: 157px;
        margin: 45px 155px 0 0;
    }

    .fv_img02 {
        width: 100%;
        max-width: 370px;
        min-width: 168px;
        margin: 45px 110px 0 141px;
    }
}

@media screen and (max-width:768px) {
    .fv_title {
        margin-top: 45px;
    }
}

@media screen and (max-width:570px) {
    .fv_title h2 {
        font-size: 20px;
    }

    .fv_title p {
        margin-top: 20px;
        font-size: 12px;
    }

    .fv_image {
        flex-direction: column;
        align-items: center;
    }


    .fv_img01 {
        max-width: 170px;
        min-width: 157px;
        margin-right: 95px;
    }

    .fv_img02 {
        width: 100%;
        max-width: 250px;
        min-width: 168px;
        margin: 45px 110px 0 141px;
    }
}

/* Thoughts */
.thoughts {
    margin-top: 77px;
}

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

.thoughts_title h2 {
    color: #BB9E71;
    text-transform: capitalize;
    font-size: 72px;
}

.thoughts_title p {
    margin-top: 7px;
}

.thoughts_content_title h2 {
    font-size: 36px;
    line-height: 150%;
}

.thoughts_content_title p {
    margin-top: 25px;
}

@media screen and (max-width:768px) {
    .thoughts {
        margin-top: 40px;
    }

    .thoughts_title h2 {
        font-size: 41px;
    }
}

@media screen and (max-width:570px) {
    .thoughts_title h2 {
        font-size: 30px;
    }

    .thoughts_title p {
        font-size: 10px;
        margin-top: 1px;
    }

    .thoughts_content_title h2 {
        font-size: 18px;
    }

    .thoughts_content_title p {
        margin-top: 20px;
        font-size: 10px;
    }
}

/* thoughtsその１ */
.first {
    margin-top: 45px;
}

.thoughts01_img {
    margin-top: 75px;
    text-align: center;
}

.thoughts01_img img {
    margin: 0 auto;
}

@media screen and (max-width:570px) {
    .thoughts01_img {
        margin-top: 30px;
    }

}

/* thoughtsその２ */
.second {
    margin-top: 170px;
    text-align: end;
}



.thoughts_flex {
    display: flex;
}

.thoughts02_img {
    margin: 17% 4% 0 0;
    object-fit: cover;
}

.thoughts03_img {
    margin: 8% 0 0 19%;
    object-fit: cover;
}

@media screen and (max-width:1200px) {
    .second {
        margin-top: 130px;
        text-align: start;
    }


    .thoughts_flex {
        flex-direction: column-reverse;
    }

    .thoughts02_img {
        margin: 10% 10% 0 0;
        width: 60%;
    }

    .thoughts03_img {
        margin: 10% 0 0 19%;
    }
}

@media screen and (max-width:570px) {
    .second {
        margin-top: 45px;
        text-align: justify;
    }


    .thoughts_flex {
        flex-direction: column-reverse;
    }

    .thoughts02_img {
        margin: 45px 141px 0 0;
        width: 60%;
    }

    .thoughts03_img {
        margin-top: 45px;
    }
}

/* thoughtsその３ */
.third {
    margin-top: 130px;
    text-align: center;
}

@media screen and (max-width:768px) {
    .third {
        margin-top: 100px;
    }
}

@media screen and (max-width:570px) {
    .third {
        margin-top: 40px;
    }
}

/* thoughtsその4 */

.thoughts04 {
    margin-top: 90px;
}

.thoughts04 img {
    width: 100%;
}

/* CTA */
.wrapper_inner {
    max-width: 81%;
    margin: 90px auto 0;
    z-index: 100;
}

/* フッター */
footer {
    z-index: -10;
}