/* --------------------------------
products
-------------------------------- */
.products{
padding:0 0 10rem 0;
}


/* --------------------------------
thumbnail list
-------------------------------- */
.thumbnail-list{
padding:10rem 0 0 0;
}


/* --------------------------------
thumbnail card
-------------------------------- */
.thumbnail-card{
width:100%;
}

.thumbnail-card{
display:block;
}

.thumbnail-card__image{
aspect-ratio:1;
overflow:hidden;
background:var(--color-gray4);
border-radius:.8rem;
}

.thumbnail-card__image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .8s cubic-bezier(.22,1,.36,1);
}

.thumbnail-card:hover .thumbnail-card__image img{
transform:scale(1.045);
}

.thumbnail-card__body{
padding:1rem 0 0 0;
}

.thumbnail-card__label{
margin:0 0 1rem 0;
font-family:"mincho", serif;
font-size:1.1rem;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--color-gray3);
display:none;
}

.thumbnail-card__title{
margin:0;
font-family:"mincho", serif;
font-size:1.8rem;
font-weight:400;
line-height:1.6;
letter-spacing:.06em;
}

.thumbnail-card__variation{
font-family:"mincho", serif;
margin:1rem 0 0;
color:var(--color-gray2);
letter-spacing:.06em;
}

.thumbnail-card__text{
margin:1.4rem 0 0;
font-size:1.4rem;
line-height:1.9;
color:var(--color-gray3);
}

.thumbnail-card__price{
padding:1.5rem 1rem 0 0;
font-family:"number", serif;
font-size:2.3rem;
letter-spacing:.04em;
text-align:right;
}

.thumbnail-card__price small{
font-size:1.6rem;
}
.thumbnail-card__price span{
margin:0 -.75rem 0 0;
padding:1rem 0 2rem 0;
display:block;
}


/* SP */
@media (max-width:900px){
.thumbnail-card__body{
padding-top:1.8rem;
}

.thumbnail-card__text{
font-size:1.25rem;
}

}


/* --------------------------------
Grid
--------------------------------*/
.thumbnail-grid{
margin:0 auto;
--cols:5;
--item-width:20rem;
display:grid;
grid-template-columns:repeat(var(--cols), var(--item-width));
justify-content:center;
gap:2rem;
}

/* 1 */
.thumbnail-grid:not(:has(> :nth-child(2))){
--cols:1;
--item-width:40rem;
}

/* 2 */
.thumbnail-grid:has(> :last-child:nth-child(2)){
--cols:2;
--item-width:35rem;
}

/* 3・6 */
.thumbnail-grid:has(> :last-child:nth-child(3)),
.thumbnail-grid:has(> :last-child:nth-child(6)),
.thumbnail-grid:has(> :last-child:nth-child(9)){
--cols:3;
--item-width:30rem;
}

/* 4・7・8 */
.thumbnail-grid:has(> :last-child:nth-child(4)),
.thumbnail-grid:has(> :last-child:nth-child(7)),
.thumbnail-grid:has(> :last-child:nth-child(8)){
--cols:4;
--item-width:25rem;
}

/* 5・9・10 */
.thumbnail-grid:has(> :last-child:nth-child(5)),
.thumbnail-grid:has(> :last-child:nth-child(10)){
--cols:5;
--item-width:20rem;
}


/* SP */
@media (max-width:900px){
.thumbnail-grid{
width:calc(100% - 4rem);
grid-template-columns:repeat(2, 1fr);
gap:3rem 2rem;
}

}

/* SP */
@media (max-width:800px){
.thumbnail-grid{
--cols:2;
--item-width:1fr;
gap:2rem 1.5rem;
}

/* 1件 */
.thumbnail-grid:not(:has(> :nth-child(2))){
--cols:1;
}

/* 奇数件は1枚目だけ大きく */
.thumbnail-grid:has(> :last-child:nth-child(odd)) > :first-child{
grid-column:1 / -1;
}

/* 偶数件はすべて50% */
.thumbnail-grid:has(> :last-child:nth-child(even)) > *:not(.sp-large){
grid-column:auto;
}

/* sp-largeは、強制的に大きく */
.thumbnail-grid > .sp-large{
grid-column:1 / -1;
}

}