/* section.about {
    background-image: url(../../img/225946699.jpeg);
    background-size: cover;
    background-position: center;
    background-color: #00000070;
    background-blend-mode: multiply;
    transition: 0.7s;
    margin-bottom: 1.5rem;
} */

section.about {
    background-color: var(--aquabg);
}

section.about div.container {
    width: 60vw;
    margin: 0 auto;
}

div.about-wrapper {
    display: flex;
    align-items: center;
    padding-top: 3rem;
}

div.about-wrapper div.about-description {
    width: 60%;
}

div.about-wrapper div.about-img {
    width: 40%;
}

div.about-wrapper div.about-description {
    padding: 0 2rem;
}

section.about h2 {
    margin: 0 0 0.5rem 0;
}

section.about div.container p {
    margin: 0 0 1rem 0;
}

/* 説明部分 */
section.about div.container h2 {
    font-size: 2.0rem;
    font-family: var(--font-sans-en);
}

section.about div.container h2 span {
    display: block;
    font-size: 1.25rem;
    font-family: var(--font-sans-jp);
    color: var(--text);
    opacity: 0.7;
    font-weight: 500;
}

section.about div.container p {
    font-size: 1.2rem;
}

section.about div.wave {
    top: 0;
}

section.about div.wave img {
    width: 100%;
}

section.about div.wave img {
    vertical-align: top;
    transform: scale(-1, 1);
}

@media (width >= 0px) and (width < 479px){
    section.about div.container {
        width: 100%!important;
        margin: 0!important;
    }
    

    section.about div.container {
        padding: 2.5rem 0 2rem;
    }

    section.about div.container {
        width: 60vw;
        margin: 0 auto;
    }

    div.about-wrapper {
        position: relative;
    }

    div.about-wrapper div.about-description {
        position: absolute;
        z-index: 119;
    }

    div.about-wrapper div.about-description,
    div.about-wrapper div.about-img {
        width: 100%;
    }

    div.about-wrapper div.about-img {
        filter: brightness(0.7);
        transition: 0.5s;
    }

    div.about-wrapper div.about-img:hover{
        filter: brightness(0.25);
    }

    section.about div.container h2 {
        font-size: 1rem;
        color: #fff;
    }

    section.about div.container h2 span {
        font-size: 0.8rem;
        color: #fff;
        opacity: 0.8;
    }

    section.about div.container h3 {
        font-size: 0.8rem;
        color: #fff;
    }

    section.about div.container p {
        font-size: 0.65rem;
        color: #fff;
    }
}

@media (width >= 480px) and (width < 767px){
    section.about div.container {
        width: 100%!important;
        margin: 0!important;
    }
    

    section.about div.container {
        padding: 2.5rem 0 2rem;
    }

    section.about div.container {
        width: 60vw;
        margin: 0 auto;
    }

    div.about-wrapper {
        position: relative;
    }

    div.about-wrapper div.about-description {
        position: absolute;
        z-index: 119;
    }

    div.about-wrapper div.about-description,
    div.about-wrapper div.about-img {
        width: 100%;
    }

    div.about-wrapper div.about-img {
        filter: brightness(0.7);
        transition: 0.5s;
    }

    div.about-wrapper div.about-img:hover{
        filter: brightness(0.25);
    }

    section.about div.container h2 {
        font-size: 1.25rem;
        color: #fff;
    }

    section.about div.container h2 span {
        font-size: 1rem;
        color: #fff;
        opacity: 0.8;
    }

    section.about div.container h3 {
        font-size: 1rem;
        color: #fff;
    }

    section.about div.container p {
        font-size: 0.75rem;
        color: #fff;
    }
}

@media (width >= 768px) and (width < 849px){
    section.about div.container {
        width: 100%!important;
        margin: 0!important;
    }

    section.about div.container {
        padding: 2.5rem 0 2rem;
    }

    section.about div.container {
        width: 60vw;
        margin: 0 auto;
    }

    div.about-wrapper {
        position: relative;
    }

    div.about-wrapper div.about-description {
        position: absolute;
        z-index: 119;
    }

    div.about-wrapper div.about-description,
    div.about-wrapper div.about-img {
        width: 100%;
    }

    div.about-wrapper div.about-img {
        filter: brightness(0.7);
        transition: 0.5s;
    }

    div.about-wrapper div.about-img:hover{
        filter: brightness(0.25);
    }

    section.about div.container h2 {
        font-size: 2rem;
        color: #fff;
    }

    section.about div.container h2 span {
        font-size: 1.5rem;
        color: #fff;
        opacity: 0.8;
    }

    section.about div.container h3 {
        font-size: 1.5rem;
        color: #fff;
    }

    section.about div.container p {
        font-size: 1.2rem;
        color: #fff;
    }
}

@media (width >= 850px) and (width < 1199px){
    section.about div.container {
        padding: 2.5rem 0 2rem;
    }

    div.about-wrapper {
        position: relative;
    }

    div.about-wrapper div.about-description {
        position: absolute;
        z-index: 119;
    }

    div.about-wrapper div.about-description,
    div.about-wrapper div.about-img {
        width: 100%;
    }

    div.about-wrapper div.about-img {
        filter: brightness(0.7);
        transition: 0.5s;
    }

    div.about-wrapper div.about-img:hover{
        filter: brightness(0.25);
    }

    section.about div.container h2 {
        font-size: 1.6rem;
        color: #fff;
    }

    section.about div.container h2 span {
        font-size: 1rem;
        color: #fff;
        opacity: 0.8;
    }

    section.about div.container h3 {
        font-size: 1rem;
        color: #fff;
    }

    section.about div.container p {
        font-size: 0.8rem;
        color: #fff;
    }
}

@media (width >= 1200px) and (width < 1399px){
    section.about div.container {
        padding: 2.5rem 0 2rem;
    }

    section.about div.container h2 {
        font-size: 1.2rem;
    }

    section.about div.container h2 span {
        font-size: 0.65rem;
    }

    section.about div.container h3 {
        font-size: 0.8rem;
    }

    section.about div.container p {
        font-size: 0.75rem;
    }
}

@media (width >= 1400px){
    section.about div.container {
        padding: 2.5rem 0 4rem;
    }

    section.about div.container h2 {
        font-size: 1.8rem;
    }

    section.about div.container h2 span {
        font-size: 0.8rem;
    }

    section.about div.container h3 {
        font-size: 1rem;
    }

    section.about div.container p {
        font-size: 0.85rem;
    }
}