@charset "utf-8";
@media screen and (min-width: 800.01px) {
.under-main main { margin-bottom: 0vh;}
}
/*-------------------
#worls一覧
---------------------*/
#works-list{ padding: 0 3%; justify-content: center; align-items: center;}
#works-list .inner-wrap{ width: 100%; max-width: 900px; padding: 0 3%; justify-content: center; align-items: center;}
#works-list .inner-wrap .works-list-ttl{ width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 16vh 0 10px;}
#works-list .inner-wrap .works-list-ttl h1, 
#works-list .inner-wrap .works-list-ttl h1 *{ font-size: 22px;}
#works-list .inner-wrap .works-list-ttl p, 
#works-list .inner-wrap .works-list-ttl p *{ font-size: 16px; letter-spacing: 3px; color: #777; font-weight: 200;}
#works-list .inner-wrap .works-list-txt{ width: 100%; display: block; padding-bottom: 30px;}
#works-list .inner-wrap .works-list-txt span{ font-size: 13px;}


/**/
#cursor.cursor_aImage{ mix-blend-mode:soft-light;}
#works-list .inner-wrap > ul{ width: 100%; display: flex; flex-direction: column; align-items: center;}
#works-list .inner-wrap > ul > li{ width: 100%; display: block; margin: 10px 0;}
#works-list .inner-wrap > ul > li a{ width: 100%; display:flex; align-items: center; justify-content: center; padding: 20px; border-radius: 4px; border: solid 1px #ddd;}
#works-list .inner-wrap > ul > li a .image{ width: 200px; margin-right: 60px; transition: 0s; opacity: 1; transform: scale(1,1);}
#works-list .inner-wrap > ul > li a .text{ width: calc(100% - 260px); display: flex; flex-direction: column; align-items: flex-start;}
#works-list .inner-wrap > ul > li a .text h2{ display: flex; align-items: baseline; justify-content: flex-start; font-size: 16px;}
#works-list .inner-wrap > ul > li a .text h2 span{ font-size: 12px; display: block; margin-right: 5px; color: #777;}
#works-list .inner-wrap > ul > li a .text ul{ display: flex; flex-wrap: wrap; margin-top: 30px;}
#works-list .inner-wrap > ul > li a .text ul li{ display: flex; align-items: baseline; margin-right: 20px;}
#works-list .inner-wrap > ul > li a .text ul li .t{ font-size: 11px; color: #777; margin-right: 5px;}
#works-list .inner-wrap > ul > li a .text ul li p{ font-size: 13px;}
#works-list .inner-wrap > ul > li a .bk{ display: none;}

@media screen and (min-width: 800.01px) {
#works-list .inner-wrap > ul > li a:hover{ border: solid 1px #555; box-shadow: 0 0 0 1px #555; border-radius: 10px;}
#works-list .inner-wrap > ul > li a:hover .image{ opacity: 0; transform: scale(1.1,1.1) translateX(20px); transition: 0.3s;}
}

@media screen and (max-width: 650px) {
#works-list .inner-wrap > ul > li{ margin: 0 0 40px;}
#works-list .inner-wrap > ul > li a{ flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 0; border: solid 1px #ddd; overflow: hidden;border-radius: 8px;}
#works-list .inner-wrap > ul > li a .image{ width: 100%; margin-right: 0; }
#works-list .inner-wrap > ul > li a .text{ width: 100%; padding: 20px 20px 40px;}
#works-list .inner-wrap > ul > li a .text h2{ flex-direction: column; align-items: flex-start; justify-content: flex-start; font-size: 14px; margin-bottom: 15px;}
#works-list .inner-wrap > ul > li a .text h2 span{ font-size: 11px; margin-right: 0;}
#works-list .inner-wrap > ul > li a .text ul{ flex-direction: column; margin-top: 0;}
#works-list .inner-wrap > ul > li a .text ul li{ margin-right: 0;}
#works-list .inner-wrap > ul > li a .text ul li p{ font-size: 12px;}
}