@charset 'UTF-8';


/*===========================================
h1Block
===========================================*/
.h1Block{
padding: 0 20px;
}
.h1Block .h1Block_wrap{
max-width: 1000px;
margin: auto;
}
.h1Block .h1Block_inner{
padding: 3% 0;
}

@media screen and (max-width:767px){
.h1Block .h1Block_inner{
padding: 7.5% 0;
}
}

/*===========================================
mv
===========================================*/
@media screen and (max-width:767px){
.mv{
display: none;
}
}

/*===========================================
newProducts
===========================================*/
.newProducts{
padding: 0 20px;
background-color: #fef0f3;
background-image: linear-gradient(90deg, #fef0f3 0%, #fef7f0 100%);
overflow: hidden;
}
.newProducts .newProducts_wrap{
max-width: 1000px;
margin: auto;
}
.newProducts .newProducts_inner{
padding: 4% 0 5% 0;
}
.newProducts .ttlBlock{
display: flex;
justify-content: space-between;
align-items: center;
}
.newProducts .ttlBlock .ttl{
font-size: 2.8rem;
font-weight: bold;
}
.newProducts .slide{
margin-top: 1em;
}
.newProducts a{
display: block;
}
.newProducts .img{
position: relative;
width: 100%;
height: 0;
padding-top: 100%;
background: #fff;
}
.newProducts .img figure{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 88%;
height: 88%;
margin: auto;
}
.newProducts .icon{
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

@media screen and (max-width:767px){
.newProducts{
padding-bottom: 35px;
}
.newProducts .newProducts_inner{
padding-top: 3em;
padding-bottom: calc(3em + 20px);
}
.newProducts .ttlBlock .ttl{
font-size: 2.4rem;
}
}

/*===========================================
.tabBtnBlock
===========================================*/
.tabBtnBlock{
margin-top: 5%;
}
@media screen and (max-width:767px){
.tabBtnBlock{
margin-top: 0;
}
}

/*===========================================
brand
===========================================*/
.brand > .ttl:nth-of-type(1){
margin-top: 3em;
}
.brand .list{
margin-top: 2em;
}
.brand .list a{
display: block;
}
.brand .txt{
margin-top: 2em;
}

/*===========================================
category
===========================================*/
.category .ttl{
margin-top: 3em;
}
.category .box{
padding: 1em;
}
.category .img{
margin-top: 2em;
}
.category .sec .mod_flex > *{
flex-basis: calc((100% - 20px) / 2);
margin-right: 20px;
}
.category .sec .mod_flex > *:nth-of-type(2n){
margin-right: 0;
}
.category .group a{
display: block;
}
.category .group .txt{
margin-top: 2em;
}
.category .group .dairy {
flex-basis: calc(((100% - 160px) / 5) * 2 + 40px);
margin-right: 40px;
}
.category .group .dairy .mod_flex > *{
flex-basis: calc((100% - 40px) / 2);
margin-right: 40px;
}
.category .group .dairy .mod_flex > *:nth-of-type(2n) {
margin-right: 0;
}
.category .group .mod_flex > *:nth-of-type(4) {
margin-right: 0;
}
.category .group .ttl > *{
font-size: 2rem;
font-weight: bold;
}
.category .group .ttl{
border-bottom: 1px solid #eee;
padding-bottom: 0.25em;
}
.category .group .img{
margin-top: 1em;
}

@media screen and (max-width:767px){
.category .group .dairy{
flex-basis: 100%;
margin-right: 0;
}
.category .group .dairy .mod_flex > * {
flex-basis: calc((100% - 20px) / 2);
margin-right: 20px;
}
.category .group .dairy .mod_flex > *:nth-of-type(2n){
margin: 0;
}
.category .group .mod_flex > *:nth-of-type(n + 3) {
margin-top: 0;
}
}
