@charset "UTF-8";

/*
ブレイクポイント
SP 〜519px
tab 520px ~ 959px (min-width:520px)
pc 960px~ (min-width:960px)
*/

.sub_title {
    background: url(../img/about_title.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/*======================
about
======================*/
.about .about_box .about_text,
.about .about_box2 .about_text2 {
    background: rgba(0, 0, 0, 0.8);
    padding: 2em;
    max-width: 480px;
    transition: all .8s;
    color: #fff;
    position: relative;
    z-index: 1000;
}

.about .about_box .about_text {
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    padding-right: var(--contents-side-gutter);
}

.about .about_box .about_img {
    margin: 0 0 0 auto;
}

.about .about_box .about_img,
.about .about_box2 .about_img2 {
    max-width: 805px;
    transition: all .8s;
    margin-top: -10vh;
}

.about .about_box .about_img {
    padding-left: var(--contents-side-gutter);
}

.about .about_box .about_img img {
    border-top-left-radius: 80px;
    border-bottom-left-radius: 80px;
    border-bottom-right-radius: 80px;
    object-fit: cover;
    transition: all .8s;
}

.about .about_box2 .about_text2 {
    border-top-left-radius: 50px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    padding-left: var(--contents-side-gutter);
    margin: 0 0 0 auto;
}

.about .about_box2 .about_img2 {
    padding-right: var(--contents-side-gutter);
}

.about .about_box2 .about_img2 img {
    border-top-left-radius: 80px;
    border-top-right-radius: 80px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 80px;
    object-fit: cover;
    transition: all .8s;
}

/* ===============ここからmin-width:520px=============== */
@media screen and (min-width:520px) {

    /*======================
    about
    ======================*/
    .about .about_box .about_text {
        border-top-right-radius: 0;
    }

    .about .about_box .about_img img {
        border-top-left-radius: 100px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 100px;
    }

    .about .about_box2 .about_text2 {
        border-top-left-radius: 50px;
        border-top-right-radius: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 50px;
    }

    .about .about_box2 .about_img2 img {
        border-top-left-radius: 100px;
        border-top-right-radius: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 100px;
    }

}

/* ===============ここまでmin-width:520px=============== */

/* ===============ここからmin-width:960px=============== */
@media screen and (min-width:960px) {}

/* ===============ここまでmin-width:960px=============== */