@charset "UTF-8";

:root {
    /* color */
    --color-main: #023C78;
    --color-sub: #CAAB8C;
    --color-base: #D8E7E8;
    --color-accent: #E55F1C;
    --color-text: #4D4D4D;
    --color-background: #FAF7F4;
    /* padding */
    /* width */
}

/* カテゴリー選択ボタン */

.filter-buttons {
    margin: 50px 10px 5px;
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 0 20px;
}

.filter-buttons button {
  position: relative;
  display: inline-block;
  background: none; /* 背景は透明 */
  border: none;     /* 枠線なしにする場合 */
  color: var(--color-text);
  font-size: 1.2rem;
  font-weight: 500;
  padding: 6px 2px;
  cursor: pointer;
  transition: 0.4s;
}

.filter-buttons button::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: var(--color-accent);
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform 0.5s;
}

.filter-buttons button:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}

/* 選択されている(active)ボタン */
.filter-buttons button.active {
  color: var(--color-te);
}

.filter-buttons button.active::after {
  transform: scale(1, 1);
}


/* グリッド画像 */

.grid-tile {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* grid-auto-rows: 90px; */
  gap: 15px;
  margin: 20px auto;
  padding: 0 40px 25px;
  min-width: 250px;
  max-width: 550px;
}

.clmn-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

/* 各サイズ */

/* 色んな形 */
/* .big {
  grid-column: span 2;
  grid-row: span 2;
}

.tall {
  grid-column: span 1;
  grid-row: span 2;
}

.small {
  grid-column: span 1;
  grid-row: span 1;
} */

.scaleUp:hover {
  transform: scale(1.1);
  transition: 0.3s;
}

/* 正方形 */
.grid-tile {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin: 20px auto;
  padding: 0 40px 25px;
  min-width: 250px;
  max-width: 550px;
}
.small,
.tall,
.big {
  aspect-ratio: 1 / 1; 
}

.big {
  grid-column: span 2;
  grid-row: span 2;
}
.clmn-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}
/* 
@media screen and (min-width: 420px) {
  .grid-tile {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin: 20px auto;
    padding: 0 40px 25px;
    min-width: 320px;
    max-width: 550px;
  }

}


@media screen and (min-width: 550px) {
  .grid-tile {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin: 20px auto;
    padding: 0 40px 25px;
    min-width: 320px;
    max-width: none;
  }

}

@media screen and (min-width: 1000px) {
  .grid-tile {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 20px auto;
    padding: 0 40px 70px;
    max-width: 1800px;
  }
}

@media screen and (min-width: 1600px) {

  .grid-tile {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin: 20px auto;
    padding: 0 40px 70px;
    max-width: 2000px;
  }

} */

@media screen and (min-width: 769px) {

    .grid-tile {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin: 20px auto;
    padding: 0 40px 70px;
    max-width: 2000px;
  }
  
  .filter-buttons {
    margin: 50px auto 5px 10vw;
    display: flex;
    justify-content: left;
    gap: 20px;
    max-width: 1400px;
    padding: 0 20px;
}

.filter-buttons button {
  position: relative;
  display: inline-block;
  background: none; /* 背景は透明 */
  border: none;     /* 枠線なしにする場合 */
  color: var(--color-text);
  font-size: 1.2rem;
  font-weight: 500;
  padding: 6px 14px;
  cursor: pointer;
  transition: 0.4s;
}

}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
アニメーション
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* アニメーション共通スタイル */
.grid-tile .clmn-tile {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  animation: popUp 0.6s ease-out forwards;
}

@keyframes popUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}