.page_about{
    background: #fff;
}

.page_about .under_bg{
    background: url(../images/about/about_kv.jpg) center top / cover no-repeat;
}

.page_about section{
    background: #fff;
}

.about{
    padding: 10rem 0;
}

.about .wrapper{
    display: flex;
    align-items: center;
    gap: 10rem;
}

.about_text{
    display: flex;
    flex-flow: column;
    gap: 4rem;
    text-align: justify;
}

.about_text h2{
    font-size: 3.2rem;
    letter-spacing: 0.04rem;
}

.about_img{
    width: 50rem;
    flex-shrink: 0;
}

.about_bg{
    display: block;
    background: url(../images/about/about_bg.jpg) center top / cover no-repeat fixed;
    height: 70vh;
}

.about_title{
    font-size: 4rem;
    letter-spacing: 0.04em;
    display: inline-block;
    width: 25rem;
    flex-shrink: 0;
}

.about_flex{
    display: flex;
    align-items: start;
    gap: 14rem;
}

.company{
    padding: 10rem 0 0;
}

.company_content{
    display: flex;
    flex-flow: column;
    gap: 3rem;
    flex-grow: 1;
}

.company_item{
    display: flex;
    align-items: center;
    gap: 3rem;
    padding-top: 3rem;
    border-top: solid 0.1rem var(--line);
    letter-spacing: 0.08em;
}

.company_item p:nth-of-type(1) {
    width: 24rem;
    flex-shrink: 0;
}

.access{
    padding: 10rem 0 0;
}

.access_content{
    flex-grow: 1;
    width: 100%;
}

.access_content iframe{
    height: 53rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 1024px) {
    .about .wrapper{
        gap: 7rem;
    }

    .about_img {
        width: 40rem;
    }
    
    .about_flex{
        gap: 4rem;
    }

    .access_content iframe{
        height: 40rem;
    }
}

@media (max-width: 767px) {
    .page_about .under_bg{
        background: url(../images/about/sp/about_kv.jpg) center top / cover no-repeat;
    }

    .about{
        padding: 8rem 0;
    }

    .about .wrapper{
        flex-flow: column-reverse;
        align-items: start;
        gap: 4rem;
    }

    .about_text h2{
        font-size: 2.8rem;
    }

    .about_img{
        width: 100%;
    }

    .about_bg{
        height: 35vh;
        background: none;
    }

    .about_bg_sp{
        content: "";
        display: block;
        height: 100vh;
        width: 100vw;
        position: fixed;
        top: 0;
        left: 0;
        background: url(../images/about/about_bg.jpg) center top / cover no-repeat;
    }

    .about_title{
        font-size: 3.2rem;
        width: 100%;
    }

    .about_flex{
        flex-flow: column;
        gap: 4rem;
    }

    .company{
        padding: 8rem 0 0;
    }

    .company_item{
        letter-spacing: 0;
    }

    .company_item p:nth-of-type(1) {
        width: 12rem;
    }

    .access{
        padding: 8rem 0 0;
    }

    .access_content iframe{
        height: 30rem;
    }
}