@charset "utf-8";

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/* グリーンバック余白 */
.c-pageTitle{
    margin-bottom: 64px;
}

/* セクションタイトル下余白 */
.c-sectTitle--each{
    margin-bottom: 56px;
}

/* 画像のアス比固定と下余白 */
.p-productsDetail__img{
    aspect-ratio: 1/1;
    margin-bottom: 32px;
}
/* 製品説明下余白 */
.p-productsDetail__text{
    font-size: 1.5rem;
    margin-bottom: 32px;
}

/* 製品タイトル */
.p-productsDetail__titleJp{
    font-size: 2.2rem;
    font-weight: 500;
    margin-bottom: 8px;
}
/* 製品タイトル英語副題 */
.p-productsDetail__titleEn{
    font-family: var(--ff-en);
    font-size: 2rem;
    font-weight: 300;
    margin-bottom: 24px;
    color: var(--gray1);
}

/* 容量　フォントと余白 */
.p-productsDetail__volume{
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 16px;
}

/*製品価格　フォント　余白 */
.p-productsDetail__price{
    font-size: 2.4rem;
    font-weight: 400;
    margin-bottom: 32px;
    color: var(--main-color);
}
/* 商品購入ページへのリンクボタン */
.p-productsDetail__link{
    text-align: center;
    margin-bottom: 48px;
}
/* 見出し下余白 */
.c-headingB{
    margin-bottom: 24px;
}
/* 説明下余白 */
.p-productsDetail__desc>dd{
    margin-bottom: 32px;
}

/* pc */
@media screen and (min-width: 768px) {
    .p-productsDetail__text{
        margin-bottom:24px;
        line-height: auto;
    }
    .p-productsDetail__titleEn{
        line-height: normal;
    }
    .p-productsDetail__price{
        letter-spacing: .1em;
        margin-bottom: 32px;
    }
    .p-productsDetail__link{
        text-align: start;
    }

    .p-productsDetail__desc{
        display: flex;
        justify-content: space-evenly;
        margin-bottom: 128px;
    }


}








/* 製品一覧 */

/* 製品一覧グリッド1列３行 */
.c-products__list{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3,1fr);
    list-style: none;
    text-align: center;
    padding: 0;
}
/* 最後以外の各商品の余白 */
.c-products__list>*:not(:last-child){
    margin-bottom: 0.8rem;
}
/* 各製品のグリッド箱 2列１行*/
.c-products__listItem{
    display: grid;
    place-items: center;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    margin-bottom: 24px;
}

/* 画像を１：１のアス比で左に配置 */
.c-products__listImg{
    grid-column: 1/2;
    aspect-ratio: 1/1;
}

/* 右の文字のフォントなどの指定 */
.c-products__listItemLink{
    font-family: var(--ff-base);
    font-size: 1.5rem;
    color: var(--text-color);
}
/* リンクボタンのセンター配置とした余白 */
.p-topAbout__subsectLink--products{
    text-align: center;
    margin: 64px;
}

/* PC TOP>Shop */
@media screen and (min-width: 768px) {
    /* タイトル下余白 */
    .c-sectTitle--each{
        margin-bottom: 56px;
    }
    /* 画像の下にタイトルで横3列 */
    .c-products__list{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-template-rows: auto;
        column-gap: 40px;
        margin-bottom: 32px;
    }
    /* 画像とタイトルを縦並び */
    .c-products__listItem{
        display: flex;
        flex-direction: column;
        row-gap: 20px;
    }
    /* PCでは不要のため削除 */
    .c-products__list>*:not(:last-child){
        margin-bottom: 0;
    }

    /* リンクボタン配置 */
    .p-topAbout__subsectLink--products{
        margin: 0 auto 57px auto ;
        text-align: center;
    }
}