@charset "utf-8";
#head .wrap .visual .main-visual.about {background-image: url(../img/about/head_about.webp);}
#head .wrap .visual .main-visual.reason {background-image: url(../img/about/head_reason.webp);}
#head .wrap .visual .main-visual.quality {background-image: url(../img/about/head_quality.webp);}
#head .wrap .visual .main-visual.staff {background-image: url(../img/about/head_staff.webp);}

/* greeting */
#message .wrap .greeting {display: flex; margin: 50px auto 0;}
#message .wrap .greeting .txt {width: 50%; padding: 0 50px 0 0;}
#message .wrap .greeting .txt p {margin: 0 0 1em;}
#message .wrap .greeting .txt p:last-child {margin: 0;}
#message .wrap .greeting .img {width: 50%; padding: 0 0 0 50px;}
@media screen and (max-width:1280px) {
    #message .wrap .greeting {display: block;}
    #message .wrap .greeting .txt {width: 100%; padding: 0;}
    #message .wrap .greeting .img {width: 100%; padding: 0; margin: 50px 0 0;}
    #message .wrap .greeting .img img {max-width: 810px;}
}
/* company */
#company .wrap .outline {display: flex; margin: 100px auto 0;}
#company .wrap .outline .table {width: 50%;}
#company .wrap .outline .img {width: 50%; padding: 0 0 0 50px;}
@media screen and (max-width:960px) {
    #company .wrap .outline {display: block;}
    #company .wrap .outline .table {width: 100%;}
    #company .wrap .outline .img {width: 100%; padding: 0; margin: 50px 0 0;}
    #company .wrap .outline .img img {max-width: 810px;}
}
@media screen and (max-width:768px) {
    #company .wrap .outline {margin: 70px auto 0;}
}
/* access */
#access .wrap .map {margin: 200px auto 0;}
#access .wrap .map iframe {width: 100%; height: 100%; aspect-ratio: 172 / 61;}
#access .wrap .link-box {margin: 100px auto 0; text-align: center;}
#access .wrap .route h4 {margin: 100px auto 0; font-size: 22px;}
#access .wrap .route p {margin: 50px auto 0;}
@media screen and (max-width:1280px) {
    #access .wrap .map iframe {aspect-ratio: 16 / 9;}
    #access .wrap .route h4 {font-size: 20px;}
}
@media screen and (max-width:768px) {
    #access .wrap .map {margin: 150px auto 0;}
    #access .wrap .map iframe {aspect-ratio: 4 / 3;}
    #access .wrap .link-box {margin: 70px auto 0;}
    #access .wrap .route h4 {margin: 70px auto 0; font-size: 18px;}
}
@media screen and (max-width:590px) {
    #access .wrap .map iframe {aspect-ratio: 3 / 4;}
}

/* link */
#link .wrap .content .reason a::before {background-image: url(../img/banner/reason.webp);}
#link .wrap .content .staff a::before {background-image: url(../img/banner/staff.webp);}
#link .wrap .content .quality a::before {background-image: url(../img/banner/quality-h.webp);}

/* staff */
#staff .wrap .staff-list .staff-card {margin: 200px auto 0; display: flex;}
#staff .wrap .staff-list .staff-card .img {width: 30%;}
#staff .wrap .staff-list .staff-card .img img {border-radius: 10px;}
#staff .wrap .staff-list .staff-card .note {width: 70%; padding: 0 0 0 100px;}
#staff .wrap .staff-list .staff-card .note .position {color: #8A6A4F;}
#staff .wrap .staff-list .staff-card .note .name {font-size: 25px; margin: 1em 0 0;}
#staff .wrap .staff-list .staff-card .note .eng {margin: 25px 0 0;}
#staff .wrap .staff-list .staff-card .note h4 {margin: 50px 0 0; font-size: 20px; border-bottom: 1px solid var(--color-accent);}
#staff .wrap .staff-list .staff-card .note p {margin: 25px 0 0;}
@media screen and (max-width:1280px) {
    #staff .wrap .staff-list .staff-card .note .name {font-size: 22px;}
    #staff .wrap .staff-list .staff-card .note .eng {margin: 22px 0 0;}
    #staff .wrap .staff-list .staff-card .note h4 {margin: 44px 0 0; font-size: 18px;}
    #staff .wrap .staff-list .staff-card .note p {margin: 22px 0 0;}
}
@media screen and (max-width:960px) {
    #staff .wrap .staff-list .staff-card {display: block;}
    #staff .wrap .staff-list .staff-card .img {width: 100%;}
    #staff .wrap .staff-list .staff-card .img img {max-width: 480px;}
    #staff .wrap .staff-list .staff-card .note {width: 100%; padding: 0; margin: 50px 0 0;}
}
@media screen and (max-width:768px) {
    #staff .wrap .staff-list .staff-card {margin: 150px auto 0;}
    #staff .wrap .staff-list .staff-card .note .name {font-size: 20px;}
    #staff .wrap .staff-list .staff-card .note .eng {margin: 20px 0 0;}
    #staff .wrap .staff-list .staff-card .note h4 {margin: 40px 0 0; font-size: 16px;}
    #staff .wrap .staff-list .staff-card .note p {margin: 20px 0 0;}
}

#mind .wrap .full-img {background-image: url(../img/about/mind.webp);}