.template-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 8列グリッド */
  grid-auto-rows: 250px; /* 1マスの高さを固定 */
  gap: 0px;
  width:100%;
  overflow-y: scroll;
  overflow-x: visible;
  margin-top:20px;
  scrollbar-width: none;
}

.template-gallery .frame {
  background-color: #f0f0f000; /* 画像が入るまでのダミー背景 */
  overflow: hidden;
  transition: transform 0.2s ease;
  cursor: pointer;
}

.template-gallery .frame:hover {
  transform: scale(1.01);
}

/* 分類に応じた枠のサイズ指定 */
.template-gallery .frame[data-type="square"] {
  grid-column: span 1;
  grid-row: span 1;
}
.template-gallery .frame[data-type="portrait"] {
  grid-column: span 1;
  grid-row: span 2; /* 縦長 */
}
.template-gallery .frame[data-type="landscape"] {
  grid-column: span 2; /* 横長 */
  grid-row: span 1;
}

/* 挿入される画像用のスタイル */
.template-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pho_detailbox{
    display: none;
    position:fixed;
    top:100px;
    left:100px;
    height:85vh;
    width:90vw;
    border:3px solid #bbbbbbf6;
    background-color: #fffffff1;
    z-index: 9999;
    flex-direction: column;
    transition: all 0.2s ease;
    transition-property: display, opacity, height, padding-top;
    transition-behavior: allow-discrete;
    transition-duration: 0.2s;

    @starting-style {
        opacity: 0;
    }
}

.pho_detailimgbox{
    display: flex;
    height: 80%;
    width: 100%;
    margin:auto;
}

.pho_detailimg{
    max-height:100%;
    max-width:100%;
    align-self: flex-start;
    align-items: center;
    margin:auto;
}

.pho_detailtext{
    width:50%;
    padding:20px;
}

#pho_detailclose{
    position:absolute;
    top:0px;
    right:0px;
    height: 50px;
    width:50px;
    border-radius: 50px;
    margin:5px;
    border:1px solid #585858;
}