@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 .box01 { display: flex; justify-content: space-between; margin: 0 auto 80px;}
.contents .inner .box01 .txt { width: 600px;}
.contents .inner .box01 .txt .cate { display: inline-block; padding: 0px 30px; border: solid var(--com_px02) var(--color01_10); color: var(--color01_10); font-size: 20px; margin-bottom: 10px; border-radius: 5px;}
.contents .inner .box01 .txt h3 { font-size: 36px; margin-bottom: 80px;}
.contents .inner .box01 .txt dl { display: grid; grid-template-columns: 140px 1fr; width: 100%; margin: 0 0 80px;}
.contents .inner .box01 .txt dl dt { margin: 0; padding: 5px 20px; background: var(--color01_01);}
.contents .inner .box01 .txt dl dd { margin: 0; padding: 5px 20px;}
.contents .inner .box01 .txt h4 { margin: 40px 0 5px; font-size: 26px;}



.contents .inner .box01 .img { width: 850px;}
.contents .inner .box01 .img .img01 { display: flex; justify-content: space-between; margin: 0 auto 30px; position: relative;}
.contents .inner .box01 .img .img01::after { content: ""; clip-path: polygon(0 0, 100% 50%, 0 100%); width: 30px; height: 40px; background: var(--color01_10); position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}
.contents .inner .box01 .img .img01 .pict { width: 380px;}
.contents .inner .box01 .img .img01 .pict p { font-size: 20px; color: var(--color01_10); text-transform: uppercase;}
.contents .inner .box01 .img .img01 .pict img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;}
.contents .inner .box01 .img .img02 { margin: 0 auto 30px;}
.contents .inner .box01 .img .img02 p { font-size: 20px; color: var(--color01_10); text-transform: uppercase;}
.contents .inner .box01 .img .img02 img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;}
.contents .inner .box01 .img .img03 { margin: 0 auto 30px;}
.contents .inner .box01 .img .img03 ul { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px 0;}
.contents .inner .box01 .img .img03 ul li { width: 270px;}
.contents .inner .box01 .img .img03 ul li img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;}
.contents .inner .box01 .img .img03 ul li p { text-align: center;}
.contents .inner .box01 .img a { display: block; align-items: center; justify-content: center; position: relative;}
.contents .inner .box01 .img a span { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); opacity: 0.0; white-space: nowrap; -webkit-text-stroke: 3px var(--color00_10); paint-order: stroke; transition: ease .5s;}
.contents .inner .box01 .img a span::before { content: "\f00e"; font-family: "Font Awesome 6 Free"; font-weight: 900; -webkit-text-stroke: 3px var(--color00_10); paint-order: stroke; transition: ease .5s;}
.contents .inner .box01 .img a:hover span { opacity: 1.0; transition: ease .5s;}


.contents .inner .box02 { display: flex; justify-content: space-between; background: var(--color01_01); padding: 40px 80px;}
.contents .inner .box02 .txt { width: 700px;}
.contents .inner .box02 .txt h4 { margin-bottom: 10px; font-size: 24px;}
.contents .inner .box02 .txt dl { display: grid; grid-template-columns: 200px 1fr; width: 100%;}
.contents .inner .box02 .txt dl dt { margin: 0; padding: 5px 20px; border-bottom: dotted var(--com_px01) var(--color99_10);}
.contents .inner .box02 .txt dl dd { margin: 0; padding: 5px 20px; border-bottom: dotted var(--com_px01) var(--color99_10);}
.contents .inner .box02 .txt dl dt:last-of-type,
.contents .inner .box02 .txt dl dd:last-of-type { border-bottom: none;}
.contents .inner .box02 .msg { width: 600px; display: flex; align-items: center; padding: 50px 0 0 0; font-size: 24px;}
.contents .inner .box02 .msg::before { content: ""; background: url("../images/works/icon_works.svg") center center no-repeat; background-size: contain; width: 180px; height: 180px; margin-right: 40px;}


}


@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 .box01 { display: flex; justify-content: space-between; margin: 0 auto 4.7619vw;}
.contents .inner .box01 .txt { width: 35.7143vw;}
.contents .inner .box01 .txt .cate { display: inline-block; padding: 0.0000vw 1.7857vw; border: solid var(--com_px02) var(--color01_10); color: var(--color01_10); font-size: 1.1905vw; margin-bottom: 0.5952vw; border-radius: 0.2976vw;}
.contents .inner .box01 .txt h3 { font-size: 2.1429vw; margin-bottom: 4.7619vw;}
.contents .inner .box01 .txt dl { display: grid; grid-template-columns: 8.3333vw 1fr; width: 100%; margin: 0 0 4.7619vw;}
.contents .inner .box01 .txt dl dt { margin: 0; padding: 0.2976vw 1.1905vw; background: var(--color01_01);}
.contents .inner .box01 .txt dl dd { margin: 0; padding: 0.2976vw 1.1905vw;}
.contents .inner .box01 .txt h4 { margin: 2.3810vw 0 0.2976vw; font-size: 1.5476vw;}



.contents .inner .box01 .img { width: 50.5952vw;}
.contents .inner .box01 .img .img01 { display: flex; justify-content: space-between; margin: 0 auto 1.7857vw; position: relative;}
.contents .inner .box01 .img .img01::after { content: ""; clip-path: polygon(0 0, 100% 50%, 0 100%); width: 1.7857vw; height: 2.3810vw; background: var(--color01_10); position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}
.contents .inner .box01 .img .img01 .pict { width: 22.6190vw;}
.contents .inner .box01 .img .img01 .pict p { font-size: 1.1905vw; color: var(--color01_10); text-transform: uppercase;}
.contents .inner .box01 .img .img01 .pict img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;}
.contents .inner .box01 .img .img02 { margin: 0 auto 1.7857vw;}
.contents .inner .box01 .img .img02 p { font-size: 1.1905vw; color: var(--color01_10); text-transform: uppercase;}
.contents .inner .box01 .img .img02 img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;}
.contents .inner .box01 .img .img03 { margin: 0 auto 1.7857vw;}
.contents .inner .box01 .img .img03 ul { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1.7857vw 0;}
.contents .inner .box01 .img .img03 ul li { width: 16.0714vw;}
.contents .inner .box01 .img .img03 ul li img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;}
.contents .inner .box01 .img .img03 ul li p { text-align: center;}
.contents .inner .box01 .img a { display: block; align-items: center; justify-content: center; position: relative;}
.contents .inner .box01 .img a span { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); opacity: 0.0; white-space: nowrap; -webkit-text-stroke: 0.1923vw var(--color00_10); paint-order: stroke; transition: ease .5s;}
.contents .inner .box01 .img a span::before { content: "\f00e"; font-family: "Font Awesome 6 Free"; font-weight: 900; -webkit-text-stroke: 0.1923vw var(--color00_10); paint-order: stroke; transition: ease .5s;}
.contents .inner .box01 .img a:hover span { opacity: 1.0; transition: ease .5s;}



.contents .inner .box02 { display: flex; justify-content: space-between; background: var(--color01_01); padding: 2.3810vw 4.7619vw;}
.contents .inner .box02 .txt { width: 41.6667vw;}
.contents .inner .box02 .txt h4 { margin-bottom: 0.5952vw; font-size: 1.4286vw;}
.contents .inner .box02 .txt dl { display: grid; grid-template-columns: 11.9048vw 1fr; width: 100%;}
.contents .inner .box02 .txt dl dt { margin: 0; padding: 0.2976vw 1.1905vw; border-bottom: dotted var(--com_px01) var(--color99_10);}
.contents .inner .box02 .txt dl dd { margin: 0; padding: 0.2976vw 1.1905vw; border-bottom: dotted var(--com_px01) var(--color99_10);}
.contents .inner .box02 .txt dl dt:last-of-type,
.contents .inner .box02 .txt dl dd:last-of-type { border-bottom: none;}
.contents .inner .box02 .msg { width: 35.7143vw; display: flex; align-items: center; padding: 2.9762vw 0 0 0; font-size: 1.4286vw;}
.contents .inner .box02 .msg::before { content: ""; background: url("../images/works/icon_works.svg") center center no-repeat; background-size: contain; width: 10.7143vw; height: 10.7143vw; margin-right: 2.3810vw;}


}



/*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 { width: 100%; margin: auto; padding: 15.6250vw 4.6875vw 23.4375vw;}
.contents .inner .box01 { display: flex; flex-direction: column; gap: 12.5000vw; margin: 0 auto 12.5000vw;}
.contents .inner .box01 .txt { width: 100%;}
.contents .inner .box01 .txt .cate { display: inline-block; padding: 0.0000vw 4.6875vw; border: solid var(--com_px02) var(--color01_10); color: var(--color01_10); font-size: 3.1250vw; margin-bottom: 1.5625vw; border-radius: 0.7813vw;}
.contents .inner .box01 .txt h3 { font-size: 5.6250vw; margin-bottom: 12.5000vw;}
.contents .inner .box01 .txt dl { display: grid; grid-template-columns: 21.8750vw 1fr; width: 100%; margin: 0 0 12.5000vw;}
.contents .inner .box01 .txt dl dt { margin: 0; padding: 0.7813vw 3.1250vw; background: var(--color01_01);}
.contents .inner .box01 .txt dl dd { margin: 0; padding: 0.7813vw 3.1250vw;}
.contents .inner .box01 .txt h4 { margin: 6.2500vw 0 0.7813vw; font-size: 4.0625vw;}



.contents .inner .box01 .img { width: 100%;}
.contents .inner .box01 .img .img01 { display: flex; flex-direction: column; gap: 7.8125vw; margin: 0 auto 4%; position: relative;}
.contents .inner .box01 .img .img01::after { content: ""; clip-path: polygon(0 0, 100% 50%, 0 100%); width: 4.6875vw; height: 6.2500vw; background: var(--color01_10); position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transform: rotate(90deg);}
.contents .inner .box01 .img .img01 .pict { width: 100%;}
.contents .inner .box01 .img .img01 .pict p { font-size: 3.1250vw; color: var(--color01_10); text-transform: uppercase;}
.contents .inner .box01 .img .img01 .pict img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;}
.contents .inner .box01 .img .img02 { margin: 0 auto 4.6875vw;}
.contents .inner .box01 .img .img02 p { font-size: 3.1250vw; color: var(--color01_10); text-transform: uppercase;}
.contents .inner .box01 .img .img02 img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;}
.contents .inner .box01 .img .img03 { margin: 0 auto 4.6875vw;}
.contents .inner .box01 .img .img03 ul { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4.6875vw 0;}
.contents .inner .box01 .img .img03 ul li { width: 48%;}
.contents .inner .box01 .img .img03 ul li img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;}
.contents .inner .box01 .img .img03 ul li p { text-align: center;}
.contents .inner .box01 .img a { display: block; align-items: center; justify-content: center; position: relative;}
.contents .inner .box01 .img a span { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); opacity: 0.0; white-space: nowrap; -webkit-text-stroke: 0.4688vw var(--color00_10); paint-order: stroke; transition: ease .5s;}
.contents .inner .box01 .img a span::before { content: "\f00e"; font-family: "Font Awesome 6 Free"; font-weight: 900; -webkit-text-stroke: 0.4688vw var(--color00_10); paint-order: stroke; transition: ease .5s;}
.contents .inner .box01 .img a:hover span { opacity: 1.0; transition: ease .5s;}


.contents .inner .box02 { display: flex; flex-direction: column; background: var(--color01_01); padding: 6.2500vw 4.6875vw;}
.contents .inner .box02 .txt { width: 100%;}
.contents .inner .box02 .txt h4 { margin-bottom: 1.5625vw; font-size: 3.7500vw;}
.contents .inner .box02 .txt dl { display: grid; grid-template-columns: 31.2500vw 1fr; width: 100%;}
.contents .inner .box02 .txt dl dt { margin: 0; padding: 0.7813vw 3.1250vw; border-bottom: dotted var(--com_px01) var(--color99_10);}
.contents .inner .box02 .txt dl dd { margin: 0; padding: 0.7813vw 3.1250vw; border-bottom: dotted var(--com_px01) var(--color99_10);}
.contents .inner .box02 .txt dl dt:last-of-type,
.contents .inner .box02 .txt dl dd:last-of-type { border-bottom: none;}
.contents .inner .box02 .msg { width: 100%; display: flex; align-items: center; padding: 4.6875vw 0 0 0; font-size: 3.7500vw;}
.contents .inner .box02 .msg::before { content: ""; background: url("../images/works/icon_works.svg") center center no-repeat; background-size: contain; width: 18.7500vw; height: 28.1250vw; margin-right: 6.2500vw;}


}




@media screen and (width: 640px) {

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


.contents {}
.contents .inner { width: 100%; margin: auto; padding: 100px 30px 150px;}
.contents .inner .box01 { display: flex; flex-direction: column; gap: 80px; margin: 0 auto 80px;}
.contents .inner .box01 .txt { width: 100%;}
.contents .inner .box01 .txt .cate { display: inline-block; padding: 0px 30px; border: solid var(--com_px02) var(--color01_10); color: var(--color01_10); font-size: 20px; margin-bottom: 10px; border-radius: 5px;}
.contents .inner .box01 .txt h3 { font-size: 36px; margin-bottom: 80px;}
.contents .inner .box01 .txt dl { display: grid; grid-template-columns: 140px 1fr; width: 100%; margin: 0 0 80px;}
.contents .inner .box01 .txt dl dt { margin: 0; padding: 5px 20px; background: var(--color01_01);}
.contents .inner .box01 .txt dl dd { margin: 0; padding: 5px 20px;}
.contents .inner .box01 .txt h4 { margin: 40px 0 5px; font-size: 26px;}



.contents .inner .box01 .img { width: 100%;}
.contents .inner .box01 .img .img01 { display: flex; flex-direction: column; gap: 50px; margin: 0 auto 4%; position: relative;}
.contents .inner .box01 .img .img01::after { content: ""; clip-path: polygon(0 0, 100% 50%, 0 100%); width: 30px; height: 40px; background: var(--color01_10); position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transform: rotate(90deg);}
.contents .inner .box01 .img .img01 .pict { width: 100%;}
.contents .inner .box01 .img .img01 .pict p { font-size: 20px; color: var(--color01_10); text-transform: uppercase;}
.contents .inner .box01 .img .img01 .pict img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;}
.contents .inner .box01 .img .img02 { margin: 0 auto 30px;}
.contents .inner .box01 .img .img02 p { font-size: 20px; color: var(--color01_10); text-transform: uppercase;}
.contents .inner .box01 .img .img02 img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;}
.contents .inner .box01 .img .img03 { margin: 0 auto 30px;}
.contents .inner .box01 .img .img03 ul { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px 0;}
.contents .inner .box01 .img .img03 ul li { width: 48%;}
.contents .inner .box01 .img .img03 ul li img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;}
.contents .inner .box01 .img .img03 ul li p { text-align: center;}
.contents .inner .box01 .img a { display: block; align-items: center; justify-content: center; position: relative;}
.contents .inner .box01 .img a span { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); opacity: 0.0; white-space: nowrap; -webkit-text-stroke: 3px var(--color00_10); paint-order: stroke; transition: ease .5s;}
.contents .inner .box01 .img a span::before { content: "\f00e"; font-family: "Font Awesome 6 Free"; font-weight: 900; -webkit-text-stroke: 3px var(--color00_10); paint-order: stroke; transition: ease .5s;}
.contents .inner .box01 .img a:hover span { opacity: 1.0; transition: ease .5s;}


.contents .inner .box02 { display: flex; flex-direction: column; background: var(--color01_01); padding: 40px 30px;}
.contents .inner .box02 .txt { width: 100%;}
.contents .inner .box02 .txt h4 { margin-bottom: 10px; font-size: 24px;}
.contents .inner .box02 .txt dl { display: grid; grid-template-columns: 200px 1fr; width: 100%;}
.contents .inner .box02 .txt dl dt { margin: 0; padding: 5px 20px; border-bottom: dotted var(--com_px01) var(--color99_10);}
.contents .inner .box02 .txt dl dd { margin: 0; padding: 5px 20px; border-bottom: dotted var(--com_px01) var(--color99_10);}
.contents .inner .box02 .txt dl dt:last-of-type,
.contents .inner .box02 .txt dl dd:last-of-type { border-bottom: none;}
.contents .inner .box02 .msg { width: 100%; display: flex; align-items: center; padding: 30px 0 0 0; font-size: 24px;}
.contents .inner .box02 .msg::before { content: ""; background: url("../images/works/icon_works.svg") center center no-repeat; background-size: contain; width: 120px; height: 180px; margin-right: 40px;}


}