@charset "UTF-8";

 /* ============================
* section:works
* ========================= */

 .works_inner {
     margin-bottom: var(--footer_gutter);
 }

 .works .works_msg {
     /* margin-bottom: var(--contents_gutter); */
     text-align: center;
 }

 .works .works_msg p {
     margin-bottom: 0.5em;
 }

 /*＝＝＝並び替えボタンのCSS*/
 .sort-btn {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     padding: 50px 20px;
 }

 .sort-btn li {
     background: #eee;
     border-radius: 10px;
     cursor: pointer;
     padding: 10px;
     margin: 0 10px;
 }

 .sort-btn li.active {
     background: #ccc;
 }

 @media only screen and (max-width: 480px) {
     .sort-btn {
         justify-content: space-between;
     }

     .sort-btn li {
         width: 48%;
         margin: 0 0 10px 0;
         text-align: center;
     }
 }

 /*＝＝＝Muuriのレイアウトのための調整 */
 .grid {
     position: relative;
     width: 100%;
     margin: 0 auto;
 }

 /*各画像の横幅などの設定*/
 .item {
     display: block;
     position: absolute;
     width: 33%;
     max-width: 300px;
     /* margin: calc((100% - 300px * 3)/6); */
     /*横並びで3つ表示*/
     z-index: 1;
 }

 /*内側のボックスの高さが崩れないように維持*/
 .item-content {
     position: relative;
     width: 100%;
     height: 100%;
 }

 /*画像の横幅を100%にしてレスポンシブ化*/
 .grid img {
     width: 100%;
     height: auto;
     vertical-align: bottom;
     /*画像の下にできる余白を削除*/
 }

 /*横幅が768px以下になった際の指定*/
 @media only screen and (max-width: 768px) {
     .item {
         width: 49.5%;
     }
 }