@charset "utf-8";

.basic-post-gallery2 { line-height:20px; }
.basic-post-gallery2 .txt-normal { letter-spacing:0; }
.basic-post-gallery2 .txt-short { letter-spacing:-1px; padding-right:1px; }
.basic-post-gallery2 .post-vicon { position:absolute; left:6px; top:6px; color: #fff; font-size:20px; z-index:1; text-shadow: 1px 1px 1px #000; }
.basic-post-gallery2 .post-none { padding:50px 10px; text-align:center; color:#888; }
.basic-post-gallery2 .post-image { position:relative;  }
.basic-post-gallery2 .post-content { padding-top:1em; overflow:hidden; display:grid; font-size: min(3.71vw,16px); }
.basic-post-gallery2 .post-subject { overflow:hidden; letter-spacing:-1px; padding-right:1px; }
.basic-post-gallery2 .post-sp { color:#ccc; margin:0px 4px; }
.basic-post-gallery2 .post-text { font-size:12px; color:#888; margin-top:4px; }
.is-pc .ko .basic-post-gallery2 .post-ko { font-size:11px; }








/* 210302 */
.basic-post-gallery2 .img-wrap .img-item.borderani1 { overflow:visible; }


    

/* borderani1 */
.borderani1 .border { position: absolute; }

.borderani1 .border:before,
.borderani1 .border:after,
.borderani1 .border div:before,
.borderani1 .border div:after {
  background-color: #e06f2b;
  background-color: var(--main-color);
  position: absolute;
  content: "";
  display: block;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.borderani1 .border:before,
.borderani1 .border:after { width: 0; height: 1px; }

.borderani1 .border div:before,
.borderani1 .border div:after { width: 1px; height: 0; }




.borderani1 .border.one { left: -8px; top: -8px; right: 12px; bottom: 12px; }

.borderani1 .border.one:before,
.borderani1 .border.one div:before { left: 0; top: 0; }

.borderani1 .border.one:after,
.borderani1 .border.one div:after { bottom: 0; right: 0; }




.borderani1 .border.two { left: 12px; top: 12px; right: -8px; bottom: -8px; }

.borderani1 .border.two:before,
.borderani1 .border.two div:before { right: 0; top: 0; }

.borderani1 .border.two:after,
.borderani1 .border.two div:after { bottom: 0; left: 0; }




.borderani1:hover .border:before, .borderani1:hover .border:after { width: 100%; }
.borderani1:hover .border div:before, .borderani1:hover .border div:after { height: 100%; }