.workscontent1{display: flex; flex-direction: row; flex-wrap: wrap; margin: 0 50px;}
.workscontent2{margin-bottom: 2rem; flex-basis: 225px;}
.workscontent3{text-align: center;}
.workscontent2 a img{margin-left: 12px; margin-right: 13px;}
.workscontent2 a:hover img{filter: opacity(80%);}
.workscontent2 a{text-decoration: none;}
.workscontent4 a {padding: 2px 5px 2px 5px; text-decoration: none; border: solid 1px #2e630a; border-radius: 5px; margin: 2px;}
.workscontent4 {display: flex; flex-direction: row; flex-wrap: wrap;}
.workscontent5 {padding: 4px; font-size: 16px; border:solid 1px #2e630a; border-radius: 5px; background-color: white;}

.view0 {visibility: hidden;}
/* 1:背景 2:✕ 3:＜ 4:＞ 5:画像 */
.view1 {background-color: black; opacity: 50%; width: 100vw; height: 100vh; position: fixed; top: 0px; left: 0px;}
.view2 {position: fixed; color: white; top: 20px; right: 10px; text-decoration: none; font: bold; font-size: 50px; padding: 8px;}
.view3 {position: fixed; color: white; top: 50%; transform: translateY(-50%); left: 10px; text-decoration: none; font: bold; font-size: 5vw; padding: 40vh 8px 40vh 8px;}
.view4 {position: fixed; color: white; top: 50%; transform: translateY(-50%); right: 10px; text-decoration: none; font: bold; font-size: 5vw; padding: 40vh 8px 40vh 8px;}
.view5 {position: fixed; max-width: 80%; max-height: 80%; top: 50%; left:50%; transform: translate( -50%, -50% ); }