@charset "UTF-8";

/*-----------
.aboutBox(about.html)↓↓↓
-----------------------------------*/

.aboutBox {
    width: 940px;
    margin: 115px auto 0;
    font-family: neue-haas-grotesk-text, a-otf-gothic-bbb-pr6n, sans-serif;
}

@media only screen and (max-width:940px) {
    .aboutBox {
        width: 100%;
        margin-top: 100px;
        position: relative;
    }
}


/*=====↓↓↓ img ↓↓↓=====*/

.aboutBox img {
    display: inline-block;
    width: 100%;
}


/*=====↓↓↓ h2 ↓↓↓=====*/

.aboutBox h2 {
    width: 15%;
    margin: 0 auto;
    -webkit-filter: brightness(-100%);
    filter: brightness(-100%);
}

@media only screen and (max-width:600px) {
    .aboutBox h2 {
        width: 25%;
        position: absolute;
        top: 46%;
        left: 50%;
        margin-left: -14%;
    }
}


/*=====↓↓↓ .aboutIM ↓↓↓=====*/

.aboutBox .abouIM {
    width: 40%;
    margin: 100px auto 60px;
}

.aboutBox .abouIM:before,
.aboutBox .abouIM:after {
    content: "";
    display: table;
}

.aboutBox .abouIM:after {
    clear: both
}

@media only screen and (max-width:600px) {
    .aboutBox .abouIM {
        width: 60%
    }
}

.aboutBox .abouIM .lef {
    width: 49.5%;
    float: left;
}

@media only screen and (max-width:600px) {
    .aboutBox .abouIM .lef {
        width: 55%
    }
}

.aboutBox .abouIM .lef img {
    width: 70%;
    padding-top: 30%;
    padding-left: 30%;
}

@media only screen and (max-width:600px) {
    .aboutBox .abouIM .lef img {
        width: 100%;
        padding-top: 25%;
        padding-left: 0;
        -webkit-transform: translate(7%, 0);
        transform: translate(7%, 0);
    }
}

.aboutBox .abouIM .rig {
    width: 49.5%;
    float: right;
}

@media only screen and (max-width:600px) {
    .aboutBox .abouIM .rig {
        width: 35%
    }
}

.aboutBox .abouIM .rig img:nth-child(1) {
    width: 55%;
    padding-left: 13%;
    padding-bottom: .8%;
}

@media only screen and (max-width:600px) {
    .aboutBox .abouIM .rig img:nth-child(1) {
        width: 100%;
        padding-left: 0;
        padding-bottom: 0;
        -webkit-transform: translate(-10%, 0);
        transform: translate(-10%, 0);
    }
}

@media only screen and (max-width:600px) {
    .aboutBox .abouIM .rig img:nth-child(2) {
        display: none
    }
}

@media only screen and (max-width:600px) {
    .aboutBox .textBox {
        padding: 0 10px;
        margin-top: 60%;
    }
}


/*=====↓↓↓ .textBox ↓↓↓=====*/

.aboutBox .textBox p {
    text-align: center;
    font-size: 14px;
    font-size: 1rem;
    line-height: 2.3em;
    color: #333;
    margin: 0 0 300px;
}

@media only screen and (max-width:600px) {
    .aboutBox .textBox p {
        font-size: 12px;
        margin-bottom: 100px;
    }
}


/*-----------
.aboutBox(about.html)↑↑↑
-----------------------------------*/