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

/* =============================== PROJECT =============================== */
#project .main-txt{margin:10px 0 70px;}
#project .box{text-align:center;}
#project .item{max-width:290px; display:inline-block; margin:0 30px 0 0; text-align:center;}
#project .item:last-of-type{margin:0;}
#project .item a{display:block; position:relative; padding:22px 0 15px;}
#project .item a:before{border:1px solid #fff; position:absolute; top:5px; right:5px; bottom:5px; left:5px; content:''; display:block;}
#project .item a:hover{opacity:.8;}
#project .item .tit{font-size:20px; line-height:1.4; margin:0 0 10px;}
#project .item .txt{letter-spacing:-0.06em; margin:0 0 15px;}
#project .item figure{margin:0 0 10px; position:relative;}
#project .item figcaption{position:absolute; bottom:3px; right:5px; font-size:10px; line-height:1.5; color:#fff;}
#project .item .btn{font-size:10px; line-height:1; position:relative; padding:4px 12px 4px 26px; background:#fff; display:inline-block;}
#project .item .btn:before{position:absolute; top:50%; left:13px; content:''; transform:translateY(-2px);
display:inline-block; width:0; height:0; border-top:3px solid transparent; border-left:4px solid #000; border-bottom:3px solid transparent;}

#project .item1{background:#eec58d;}
#project .item2{background:#a5d5a8;}
#project .item3{background:#aad4ec;}

/* MEDIA */
@media screen and (min-width:0\0) and (min-width:1000px){  /* IE */
#project .item .btn{padding:6px 12px 2px 26px;}
}

@media only screen and (max-width:1000px){
#project .item{margin:0 15px 30px;}
#project .item:last-of-type{margin:0 15px;}
}

@media only screen and (max-width:480px){
#project .main-txt{margin:0 0 40px;}
#project .item{margin:0 0 20px;}
#project .item:last-of-type{margin:0;}
#project .item .tit{font-size:16px;}
#project .item .txt{font-size:12px;}
}


/* =============================== PROJECT 2 =============================== */
.lowerpage h5{font-size:17px; color:#006f0b; margin:0 0 10px; text-align:left;}

#project2 .flexbox{display:flex; flex-wrap:wrap; margin-left:-2.7%;}
#project2 .flexbox li{width:22.3%; margin:0 0 2.7% 2.7%;}
#project2 .flexbox li p{padding:6px 0 0 0; letter-spacing:-0.08em;}

/* MEDIA */
@media only screen and (max-width:767px){
#project2 .flexbox li{width:30.633%;}	
}

@media only screen and (max-width:480px){
.lowerpage h5{font-size:15px;}

#project2 .flexbox{margin:0 auto; max-width:220px;}
#project2 .flexbox li{width:100%; margin:0 0 15px;}
}


/* =============================== PROJECT 3 =============================== */
#project3 .list li{width:48.55%; margin:0 2.9% 2.9% 0; float:left;}
#project3 .list li:nth-of-type(2n){margin:0 0 2.9% 0;}

/* MEDIA */
@media only screen and (max-width:480px){
#project3 .list li{width:100%; text-align:center; margin:0 0 10px; float:none;}	
#project3 .list li:nth-of-type(2n){margin:0 0 10px;}
#project3 .list li:last-of-type{margin:0;}
}


/* =============================== PROJECT 4 =============================== */
#project4 .list li{width:48.55%; margin:0 2.9% 2.9% 0; float:left;}
#project4 .list li:nth-of-type(2n){margin:0 0 2.9% 0;}

/* MEDIA */
@media only screen and (max-width:480px){
#project4 .list li{width:100%; text-align:center; margin:0 0 20px; float:none;}	
#project4 .list li:last-of-type{margin:0;}	
}