@charset "utf-8";

/* CSS Document */

.gallery_page{background-color: rgba(34,34,34,1);}
  .gallery_page .cntt_ttl{
    margin: 0;
    background-image: url(/src/images/gallery/gallery_ttl_bg.jpg);
    }
  .gallery_page .cntt_wrap-full{padding: 60px 20px;}

.gallry_lst_blc{
  width: 100%;
  max-width: 1080px;
  margin: 0 auto 30px;
  }
  .gallry_lst{
    display: flex;
    flex-wrap: wrap;
    }
    .glry_itm{
      width: calc((100% - 60px) / 3);
      margin: 0 30px 30px 0;
      }
      .glry_itm:nth-of-type(3n+3){margin-right: 0;}
      .glry_itm:nth-last-of-type(-n+3){margin-bottom: 0;}
      .glry_lnk{
        display: block;
        transition: .3s;
        }
        .glry_lnk:hover{opacity: .7;}
        .glry_fig{}
        .glry_dtil{
          padding: 15px 45px 15px 15px;  
          background-color: rgba(255,255,255,1);
          box-sizing: border-box;
          position: relative;
          }
          .glry_dtil::before{
            content: "";
            width: 8px;
            height: 100%;
            background-image: url(/src/images/common/arw_r_r.png);
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100%;
            position: absolute;
            top: 0;
            right: 15px;
            }
          .glry_date{
            margin: 0 0 5px;
            font-size: 14px;
            font-weight: bold;
            }
          .glry_txt{
            font-size: 18px;
            font-weight: 500;
            line-height: 1.6;
            }

@media screen and (max-width: 1050px) {

.glry_txt{font-size: 16px;}

}/* max-width:1050px */

@media screen and (max-width: 850px) {

.glry_itm{
  width: calc((100% - 40px) / 3);
  margin: 0 20px 20px 0;
  }
  .glry_dtil{padding: 15px 35px 15px 15px;  }  
    .glry_txt{
      font-size: 14px;
      line-height: 1.4;
      }   

}/* max-width:850px */

@media screen and (max-width: 650px) {

.glry_itm{
  width: calc((100% - 15px) / 2);
  margin: 0 15px 15px 0;
  }
  .glry_itm:nth-of-type(3n+3){margin-right: 15px;}
  .glry_itm:nth-last-of-type(-n+3){margin-bottom: 15px;}
  .glry_itm:nth-of-type(2n+2){margin-right: 0;}
  .glry_itm:nth-last-of-type(-n+2){margin-bottom: 0;}

}

@media screen and (max-width: 550px) {

.glry_dtil{padding: 10px 25px 10px 10px;  }  
  .glry_dtil::before{
    width: 8px;
    right: 10px;
    }
    .glry_txt{
      font-size: 13px;
      line-height: 1.4;
      }   
}