@charset "UTF-8"; #works-list{ max-width: 1580px; margin-left: auto; margin-right: auto; display: flex; padding-bottom: 72px; text-align: left; flex-wrap: wrap; } #works-list>li{ width: 28.571%; margin-bottom: 72px; } #works-list>li:not(:nth-of-type(3n)){ margin-right: 7.1435%; } #works-list>li .pic{ height: calc(95vw / 8 * 2 / 4 * 3); min-height: 195px; } .post-ttl{ font-weight: 400; line-height: 1.4; font-size: 1.6rem; margin-top: 1.5em; } .post-ttl a{ text-decoration: underline; } .post-ttl a:hover{ text-decoration: none; } /* .cat-list{ display: flex; flex-wrap: wrap; margin-bottom: 5px; margin-top: 20px; } .cat-list li{ margin-right: 10px; margin-bottom: 10px; } .cat-list li a{ font-weight: 500; font-size: 1.3rem; padding: 4px 8px; background: #322a28; color: #cab69e; display: flex; justify-content: center; align-items: center; } #sec03 .btn01, #sec04 .btn01{ margin: 0 auto; border-bottom: 1px solid #322a28; background-image: url(../images/arrow02-l.png); } */ .pagenation{ display: flex; justify-content: center; } .pagenation li{ width: 40px; height: 40px; margin: 0 .5em; } .pagenation li a{ width: 100%; height: 100%; border-radius: 50%; border: 1px solid #cab69e; display: flex; justify-content: center; align-items: center; } .pagenation li.current a{ color: #322a28; background: #cab69e; } .pagenation li.next a:before{ content: ""; display: block; width: 4px; height: 4px; border-top: 1px solid #cab69e; border-right: 1px solid #cab69e; transform: rotate(45deg); margin-top: .3em; } .pagenation li.prev a:before{ content: ""; display: block; width: 4px; height: 4px; border-top: 1px solid #cab69e; border-left: 1px solid #cab69e; transform: rotate(-45deg); margin-top: .3em; } .cat-list{ font-size: 1.2rem; display: flex; flex-wrap: wrap; margin-top: 1.5em; } .cat-list a{ background: #ac9c7c; color: #322a28; padding: .2em; margin-right: 1em; } .cat-list li{ margin-bottom: 1em; } .cats{ width: 100%; display: flex; justify-content: center; font-size: 1.8rem; margin-bottom: 4.5em; flex-wrap: wrap; } .cats li{ padding: 0 .5em 1.5em; } .cats li a.current{ border-bottom: 1px solid #cab69e; } @media screen and (max-width: 768px){ #works-list{ width: 100%; display: block; padding-bottom: 0; margin-top: 2.5rem; } #works-list>li{ width: 100%; margin-bottom: 4rem; } #works-list>li:not(:nth-of-type(3n)){ margin-right: 0; } #works-list>li .pic{ height: auto; min-height: auto; } .post-ttl{ line-height: 1.5; font-size: 1.5rem; } .cats{ font-size: 1.6rem; margin-bottom: 2.5em; } }