/*-------------------------------------
//制作物一覧
--------------------------------------*/
.product{
  grid-area: main;
 padding: 10px 10px;
  overflow-y: auto;
}

.product__section-title{
  margin-top: 40px;
  margin-bottom: 10px;
  color: var(--color-blue-text);
}
.product__section-title:first-of-type{
  margin-top: 10px;
}

/* 正方形サイズ ギャラリー */
.product__card{
  grid-area: main;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
}

/* バナーサイズ ギャラリー */
.product__card-banner{
  grid-area: main;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 30px;
}

.product__card-link{
  display: block;
  width: 100%;
  margin: 0 auto;
  height: auto;
}

.product__card-img{
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-20);
  transition: all .3s;
  transform: translateY(0);
  filter: drop-shadow(0px 2px 10px rgba(0, 82, 134, 0.05));
}
.product__card-img:hover{
  box-shadow: 0px 0px 20px 5px rgba(0,0,0, 5%);
  transform: translateY(-10px);
}

.product__card-title{
  letter-spacing: var(--letter-spacing-S);
  font-size: .9rem;
  margin: 10px 0 5px;
}

.product__card-info-block{
  margin-bottom: 5px;
}

.product__card-label,.product__card-text{
  letter-spacing: var(--letter-spacing-S);
  font-size: .7rem;
  margin-bottom: 1px;
  color: var(--color-whitegray-text);
}


@media (max-width: 500px){
/* 正方形サイズ ギャラリー */
.product__card{
  grid-area: main;
  display: grid;
  grid-template-columns: 100%;
  gap: 60px;
}
  /* バナーサイズ ギャラリー */
.product__card-banner{
  grid-area: main;
  display: grid;
  grid-template-columns: 100%;
  gap: 30px;
}

.product__card-title{
  margin: 15px 0 5px;
}
}