@charset 'UTF-8';

.contents .contents_inner{
padding-top: 8%;
}

@media screen and (max-width:767px){
.contents .contents_inner{
padding-top: 0;
}
}

/*===========================================
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;
}
}

/*===========================================
infoTxt
===========================================*/
.infoTxt{
display: flex;
justify-content: center;
}
.infoTxt p{
text-align: center;
}

@media screen and (max-width:767px){
.infoTxt p{
text-align: left;
}
}

/*===========================================
about
===========================================*/
.about{
margin-top: 6%;
}
.about .ttl{
margin-top: 0;
}
.about .box{
padding: 30px 20px;
border-color: #E30934;
}
.about .mod_img{
display: flex;
align-items: center;
flex-basis: 40.8%;
max-width: 390px;
}
.about .mod_data{
flex-basis: calc(59.2% - 30px);
}

@media screen and (max-width:767px){
.about{
margin-top: 4em;
}
.about .box{
padding: 20px 20px 40px 20px;
}
.about .mod_img {
flex-basis: 100%;
max-width: none;
}
.about .mod_data{
flex-basis: 100%;
}
}

/*===========================================
knowhow
===========================================*/
.knowhow{
position: relative;
margin-top: 6%;
padding: 30px 0;
}
.knowhow:before{
content: '';
display: block;
position: absolute;
width: 67.5%;
height: 100%;
top: 0;
bottom: 0;
left: auto;
right: auto;
margin: auto;
background: url(/recipes/meat/image/index_bnr_knowhow.jpg) center no-repeat;
background-size: cover;
}
.knowhow .knowhow_wrap{
position: relative;
max-width: 505px;
margin: 0 0 0 auto;
padding: 15px 0 20px 20px;
background: #fff;
z-index: 1;
}
.knowhow .knowhow_wrap > a{
display: block;
}
.knowhow .btn{
border-bottom: 1px solid #eee;
font-size: 2rem;
}
.knowhow .txt{
margin-top: 1em;
}
.knowhow .list{
display: flex;
margin-top: 1em;
}
.knowhow .list > *{
flex-grow: 1;
padding-right: 1em;
}
.knowhow .list > *:nth-of-type(odd){
flex-basis: 55%;
}
.knowhow .list > *:nth-of-type(even){
flex-basis: 45%;
padding-right: 0;
}
.knowhow .list02 ul{
display: flex;
flex-wrap: wrap;
margin-top: 1em;
}
.knowhow .list02 ul > *{
flex-grow: 1;
padding-right: 1em;
}
.knowhow .list02 ul > *:nth-of-type(odd){
flex-basis: 55%;
}
.knowhow .list02 ul > *:nth-of-type(even){
flex-basis: 45%;
padding-right: 0;
}

@media screen and (max-width:767px){
.knowhow{
margin-top: 4em;
padding: 0;
}
.knowhow:before{
position: static;
width: calc(100% + 40px);
height: 0;
margin-left: -20px;
padding-top: 66.67%;
}
.knowhow .knowhow_wrap{
max-width: none;
padding: 1em;
}
.knowhow .list{
flex-wrap: wrap;
}
.knowhow .list > *:nth-of-type(odd){
flex-basis: 100%;
}
.knowhow .list > *:nth-of-type(even){
flex-basis: 100%;
}
.knowhow .list02{
flex-wrap: wrap;
}
.knowhow .list02 ul > *:nth-of-type(odd){
flex-basis: 100%;
}
.knowhow .list02 ul > *:nth-of-type(even){
flex-basis: 100%;
}
}

/*===========================================
recommend
===========================================*/
.recommend{
margin-top: 7.5%;
}
.recommend .list{
margin-top: 2em;
}
.recommend .img{
position: relative;
height: 0;
padding-top: 48%;
margin-bottom: 0.5em;
overflow: hidden;
}
.recommend .img img{
transform: translateY(-50%);
position: absolute;
top: 50%;
left: 0;
}
.recommend .btn > *{
font-size: 2rem;
}
.recommend .btn > * small{
display: inline-block;
font-size: 1.4rem;
}
@media screen and (max-width:767px){
.recommend .list.mod_itemList_2_1 > .mod_flex > *:nth-of-type(n + 2) {
margin-top: 4em;
}
.recommend .list.mod_itemList_2_1 .mod_itemList_2_1{
padding-left: 1em;
padding-right: 1em;
}
.recommend .mod_itemList_2_1 .mod_flex > *:nth-of-type(n + 2){
margin: 0;
}
.recommend .data{
padding: 0 0.5em;
}
}