@charset "utf-8";
#head .wrap .visual .main-visual.works {background-image: url(../img/works/head_works.webp);}

.works-list {margin: 200px auto 0;}
.works-list ul {list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px;}
@media screen and (max-width:1280px) {
    .works-list ul {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media screen and (max-width:960px) {
    .works-list {margin: 150px auto 0;}
}
@media screen and (max-width:768px) {
    .works-list {margin: 100px auto 0;}
    .works-list ul {gap: 20px;}
}
@media screen and (max-width:590px) {
    .works-list ul {grid-template-columns: 1fr;}
}

#lead .wrap h3 {font-size: 30px;}
#lead .wrap .lead {display: flex; margin: 200px auto 0;}
#lead .wrap .lead .thumb {width: 50%; padding: 0 50px 0 0;}
#lead .wrap .lead .thumb img {border-radius: 10px;}
#lead .wrap .lead .list {width: 50%;}

#point .wrap .points {margin: 100px auto 0;}
#point .wrap .points ul,
#photo .wrap .photos ul {list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 100px;}
#photo .wrap .photos ul li .img img {width: auto; max-width: 100%; margin: 0 auto;} 
#point .wrap .points ul li .txt h5 {margin: 50px auto 0; font-size: 20px; border-bottom: 1px solid var(--color-border);}
#point .wrap .points ul li .txt p,
#photo .wrap .photos ul li .txt p {margin: 50px auto 0;}

#voice .wrap .qanda ul {list-style: none;}
#voice .wrap .qanda ul li {margin: 100px auto 0;}
#voice .wrap .qanda ul li h5 {font-size: 16px; font-weight: normal; padding: 0 0 1em; border-bottom: 1px solid var(--color-border);}
#voice .wrap .qanda ul li p {padding: 1em 0 0;}

@media screen and (max-width:1280px) {
    #lead .wrap h3 {font-size: 25px;}

    #point .wrap .points ul,
    #photo .wrap .photos ul {gap: 50px;}
    #point .wrap .points ul li .txt h5 {margin: 30px auto 0; font-size: 18px;}
    #point .wrap .points ul li .txt p,
    #photo .wrap .photos ul li .txt p {margin: 30px auto 0;}

    #voice .wrap .qanda ul li h5 {font-size: 14px;}
}

@media screen and (max-width:960px) {
    #lead .wrap .lead {display: block; margin: 150px auto 0;}
    #lead .wrap .lead .thumb {width: 100%; padding: 0;}
    #lead .wrap .lead .thumb img {max-width: 810px;}
    #lead .wrap .lead .list {width: 100%; margin: 50px 0 0;}

    #voice .wrap .qanda ul li {margin: 70px auto 0;}
}

@media screen and (max-width:768px) {
    #lead .wrap h3 {font-size: 22px;}
    #lead .wrap .lead {margin: 100px auto 0;}

    #point .wrap .points {margin: 70px auto 0;}
    #point .wrap .points ul,
    #photo .wrap .photos ul {grid-template-columns: 1fr;}
    #point .wrap .points ul li .txt h5 {margin: 20px auto 0; font-size: 16px;}
    #point .wrap .points ul li .txt p,
    #photo .wrap .photos ul li .txt p {margin: 20px auto 0;}

    #voice .wrap .qanda ul li h5 {font-size: 12px;}
}

@media screen and (max-width:590px) {
    #lead .wrap h3 {font-size: 20px;}

    #point .wrap .points ul li .txt h5 {font-size: 14px;}
}