@charset "UTF-8";

/*Archives*/
.archives ul {
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  width: 100%; }
  .archives ul li {
    position: relative;
    width: calc(100%/4 - 8px);
    margin: 0 8px 8px 0; }
    .archives ul li:nth-child(4n) {
      margin-right: 0; }
    .archives ul li::before {
      content: '';
      display: block;
      padding-top: 100%; }

    .archives ul li img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }



/* ==========================
  モーダル（ポップアップ）
========================== */

.js_modalWrap {
  opacity: 0;
  z-index: -1;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.js_modalWrap.active {
  animation: modalOpen 0.3s ease forwards;
}
.js_modalWrap.active2 {
  animation: modalClose 0.3s ease forwards;
}
.js_modalBG {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(51,51,51,0.8);
}
.js_modalContInner {	
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 90%;
  height:auto;
  max-width: 700px;
  padding: 10px;    
  background-color: #fff;
}
.js_modalCont {
	width:100%;
    height:100%;
    text-align:center;
    padding:30px;
}

.js_modalCont img {
    margin: auto;
	display: block;
	width:90%;
    max-width:350px;   
}

.js_modalCont > * + * {
  margin-top: 10px;
}
.js_modalContInner > .js_modalClose + * {
  margin-top: 0;
}
.js_modalClose {
  position: absolute;
  top: 10.5px;
  right: 10.5px;
  width: 20px;
  height: 20px;
  overflow: hidden;
  cursor: pointer;
  z-index: 1001;
}
.js_modalClose::before,
.js_modalClose::after {
  content: "";
  background-color: #222;
  position: absolute;
  top: -5px;
  right: 10px;
  width: 1px;
  height: 30px;
}
.js_modalClose::before {
  transform: rotate(45deg);
}
.js_modalClose::after {
  transform: rotate(-45deg);
}
@keyframes modalOpen {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    z-index: 1000;
  }
}
@keyframes modalClose {
  0% {
    opacity: 1;
    z-index: 1000;
  }
  100% {
    opacity: 0;
  }
}