@charset "utf-8";
/* CSS Document */


/*PC*/
@media screen and (min-width: 1680px) {

.header { background: url("../images/works/hedImg.jpg") center center no-repeat; background-size: cover;}


.contents {}
.contents .inner { width: 1536px; margin: auto; padding: 100px 0 150px;}
.contents .inner .cont01 {}
.contents .inner .cont01 h3 { font-size: 30px; text-align: center; margin-bottom: 100px;}

.contents .inner .cont01 .nav { margin-bottom: 100px;}
.contents .inner .cont01 .nav ul { display: flex; justify-content: flex-start; gap: 30px;}
.contents .inner .cont01 .nav ul li { display: inline-block; height: 70px;}
.contents .inner .cont01 .nav ul li a { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: var(--color00_10); color: var(--color99_10); padding: 0 25px; border-radius: 5px; white-space: nowrap; border: solid var(--com_px01) var(--color99_10);}
.contents .inner .cont01 .nav ul li a:hover { background: var(--color01_10);}


.contents .inner .cont01 .list {}
.contents .inner .cont01 .list ul { display: flex; justify-content: flex-start; gap: 80px 32px; flex-wrap: wrap;}
.contents .inner .cont01 .list ul li { display: inline-block; width: 360px;}
.contents .inner .cont01 .list ul li a { width: 100%;}
.contents .inner .cont01 .list ul li a .img {}
.contents .inner .cont01 .list ul li a .img img { width: 100%; background: #222; aspect-ratio: 1 / 1;}
.contents .inner .cont01 .list ul li a .txt { padding: 10px 0;}
.contents .inner .cont01 .list ul li a .txt p { color: var(--color01_10); margin-bottom: 5px;}
.contents .inner .cont01 .list ul li a .txt h4 { margin-bottom: 5px;}
.contents .inner .cont01 .list ul li a .txt time {}



}


@media print, screen and (min-width: 768px) and ( max-width: 1679px) {

.header { background: url("../images/works/hedImg.jpg") center center no-repeat; background-size: cover;}


.contents {}
.contents .inner { width: 91.4286vw; margin: auto; padding: 5.9524vw 0 8.9286vw;}
.contents .inner .cont01 {}
.contents .inner .cont01 h3 { font-size: 1.7857vw; text-align: center; margin-bottom: 5.9524vw;}

.contents .inner .cont01 .nav { margin-bottom: 5.9524vw;}
.contents .inner .cont01 .nav ul { display: flex; justify-content: flex-start; gap: 1.7857vw;}
.contents .inner .cont01 .nav ul li { display: inline-block; height: 4.1667vw;}
.contents .inner .cont01 .nav ul li a { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: var(--color00_10); color: var(--color99_10); padding: 0 1.4881vw; border-radius: 0.2976vw; white-space: nowrap; border: solid var(--com_px01) var(--color99_10);}
.contents .inner .cont01 .nav ul li a:hover { background: var(--color01_10);}


.contents .inner .cont01 .list {}
.contents .inner .cont01 .list ul { display: flex; justify-content: flex-start; gap: 4.7619vw 1.9048vw; flex-wrap: wrap;}
.contents .inner .cont01 .list ul li { display: inline-block; width: 21.4286vw;}
.contents .inner .cont01 .list ul li a { width: 100%;}
.contents .inner .cont01 .list ul li a .img {}
.contents .inner .cont01 .list ul li a .img img { width: 100%; background: #222; aspect-ratio: 1 / 1;}
.contents .inner .cont01 .list ul li a .txt { padding: 0.5952vw 0;}
.contents .inner .cont01 .list ul li a .txt p { color: var(--color01_10); margin-bottom: 0.2976vw;}
.contents .inner .cont01 .list ul li a .txt h4 { margin-bottom: 0.2976vw;}
.contents .inner .cont01 .list ul li a .txt time {}



}



/*sp*/
@media only screen and (max-width: 767px) {

.header { background: url("../images/works/hedImg.jpg") center center no-repeat; background-size: cover;}


.contents {}
.contents .inner { max-width: 240.0000vw; margin: auto; padding: 15.6250vw 4.6875vw 23.4375vw;}
.contents .inner .cont01 {}
.contents .inner .cont01 h3 { font-size: 4.6875vw; text-align: center; margin-bottom: 9.3750vw;}

.contents .inner .cont01 .nav { margin-bottom: 9.3750vw;}
.contents .inner .cont01 .nav ul { display: flex; justify-content: flex-start; gap: 3.1250vw 4.6875vw; flex-wrap: wrap;}
.contents .inner .cont01 .nav ul li { display: inline-block; height: 7.8125vw;}
.contents .inner .cont01 .nav ul li a { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: var(--color00_10); color: var(--color99_10); padding: 0 2.3438vw; border-radius: 0.7813vw; white-space: nowrap; border: solid var(--com_px01) var(--color99_10);}
.contents .inner .cont01 .nav ul li a:hover { background: var(--color01_10);}


.contents .inner .cont01 .list {}
.contents .inner .cont01 .list ul { display: flex; justify-content: space-between; gap: 7.8125vw 0; flex-wrap: wrap;}
.contents .inner .cont01 .list ul li { display: inline-block; width: calc((100% - 4.6875vw) / 2);}
.contents .inner .cont01 .list ul li a { width: 100%;}
.contents .inner .cont01 .list ul li a .img {}
.contents .inner .cont01 .list ul li a .img img { width: 100%; background: #222; aspect-ratio: 1 / 1;}
.contents .inner .cont01 .list ul li a .txt { padding: 1.5625vw 0;}
.contents .inner .cont01 .list ul li a .txt p { color: var(--color01_10); margin-bottom: 0.7813vw;}
.contents .inner .cont01 .list ul li a .txt h4 { margin-bottom: 0.7813vw;}
.contents .inner .cont01 .list ul li a .txt time {}



}




@media screen and (width: 640px) {

.header { background: url("../images/works/hedImg.jpg") center center no-repeat; background-size: cover;}


.contents {}
.contents .inner { max-width: 1536px; margin: auto; padding: 100px 30px 150px;}
.contents .inner .cont01 {}
.contents .inner .cont01 h3 { font-size: 30px; text-align: center; margin-bottom: 60px;}

.contents .inner .cont01 .nav { margin-bottom: 60px;}
.contents .inner .cont01 .nav ul { display: flex; justify-content: flex-start; gap: 20px 30px; flex-wrap: wrap;}
.contents .inner .cont01 .nav ul li { display: inline-block; height: 50px;}
.contents .inner .cont01 .nav ul li a { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: var(--color00_10); color: var(--color99_10); padding: 0 15px; border-radius: 5px; white-space: nowrap; border: solid var(--com_px01) var(--color99_10);}
.contents .inner .cont01 .nav ul li a:hover { background: var(--color01_10);}


.contents .inner .cont01 .list {}
.contents .inner .cont01 .list ul { display: flex; justify-content: space-between; gap: 50px 0; flex-wrap: wrap;}
.contents .inner .cont01 .list ul li { display: inline-block; width: calc((100% - 30px) / 2);}
.contents .inner .cont01 .list ul li a { width: 100%;}
.contents .inner .cont01 .list ul li a .img {}
.contents .inner .cont01 .list ul li a .img img { width: 100%; background: #222; aspect-ratio: 1 / 1;}
.contents .inner .cont01 .list ul li a .txt { padding: 10px 0;}
.contents .inner .cont01 .list ul li a .txt p { color: var(--color01_10); margin-bottom: 5px;}
.contents .inner .cont01 .list ul li a .txt h4 { margin-bottom: 5px;}
.contents .inner .cont01 .list ul li a .txt time {}



}