@charset "utf-8";
/* CSS Document */
header h1 a,header h2 a{color:#000;}
header{position:relative;}
#hm-icon:before, #hm-icon:after {background: #000;}
#hm .close:before,#hm .close:after {background: #fff;}
#hm-icon{background:#000;}
@media screen and (min-width: 760px) {header nav ul li a{color:#000;}}
#list{padding:50px 0;width:80%;max-width:1200px;margin:0 auto;}
#list > ul{display:flex;justify-content:space-between;flex-wrap:wrap;}
#list > ul li{width:32%;margin-bottom:2%;position:relative;}
#list > ul li p{display:none;}
#list > ul li:nth-of-type(n+13){display:none;}
#list > ul li:before{content: "";display: block;padding-top: 100%;}
#list > ul img{
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
object-fit: cover;
}
#list > ul li a > span{
display:flex;
justify-content:center;
align-items:center;
text-align:center;
line-height:2;
width:94%;
height:94%;
position:absolute;
line-height:1.5;
top:3%;
left:3%;
background:rgba(255,255,255,0.7);
opacity:0;
z-index:99;
}
#list > ul li a > span span span{display:inline-block;margin-top:0.5rem;line-height:1.5;font-size:70%;font-family: 'Abel', sans-serif;font-weight:normal;}
#list > ul li:hover span{opacity:1;transition:0.7s;}
#list > ul li a{opacity:100%;color:#000;font-size:80%;font-weight:400;}
#page_navi ul{margin:3em auto;text-align:center;}
#page_navi li{display:inline-block;margin:0.25em;}
#page_navi li a,#page_navi li span{display:block;width:3em;height:3em;text-align:center;vertical-align:middle;line-height:3;color:#000;}
#page_navi li a{background:#ededed;}
#page_navi li a:hover{background:#000;color:#fff;}
#page_navi li span{background:#000;color:#fff;}
#work_page{padding:50px 0;width:80%;max-width:1200px;margin:0 auto;}
#work_page h2{font-size:120%;margin-bottom:-1rem;}
#work_page li{margin:3rem 0;}
#work_page li img{width:100%;height:auto;}
@media screen and (max-width:768px){
#list{padding:30px 0;width:90%;}
#page_navi ul{margin:2rem auto 1rem;}
#page_navi li{margin:0.2em;}
#page_navi li a,
#page_navi li span{display:block;width:2.5em;height:2.5em;text-align:center;vertical-align:middle;line-height:2.5;}
#work_page{padding:30px 0;width:90%;}
#work_page li{margin:2rem 0;}
}
@media screen and (max-width:480px){
#list{padding:10px 0;}
#list > ul li{width:48%;margin-bottom:4%;position:relative;}
#work_page{padding:10px 0;}
#work_page li{margin:1rem 0;}
#work_page h2{margin-bottom:0;}
#list > ul li p{display:block;position:absolute;z-index:9;color:#fff;top:0.5rem;left:0.5rem;font-size:70%;opacity:0.5;}
}
/* タブレット縦t */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
#list > ul li{width:48%;margin-bottom:4%;}
#list > ul li p{display:block;position:absolute;z-index:9;color:#fff;top:0.5rem;left:1rem;font-size:90%;opacity:0.5;}
}