@charset 'UTF-8';

.contents .contents_inner{
    padding-bottom: 0;
}

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

/*===========================================
recipe_icon
===========================================*/
[class*="recipe_icon_"]{
display: inline-block;
position: relative;
padding-left: calc(25px + 0.25em);
}
[class*="recipe_icon_"]:before{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 25px;
height: 25px;
margin: auto;
background: center no-repeat;
background-size: contain;
}
.recipe_icon_cal:before{
background-image: url(/files/user/recipes/image/icon_cal.svg);
}
.recipe_icon_salt:before{
background-image: url(/files/user/recipes/image/icon_salt.svg);
}
.recipe_icon_time:before{
background-image: url(/files/user/recipes/image/icon_time.svg);
}
.recipe_icon_point:before{
width: 23px;
height: 36px;
background-image: url(/files/user/recipes/image/icon_point.svg);
}
.recipe_icon_protein:before{
background-image: url(/files/user/recipes/image/icon_protein.svg);
}

@media screen and (max-width:767px){
[class*="recipe_icon_"]{
padding-left: 28px;
}
}

/*===========================================
recipeCategoryBox
===========================================*/
.recipeCategoryBox .list ul{
display: flex;
}
.recipeCategoryBox .list li{
position: relative;
padding: 0 1.25em;
}
.recipeCategoryBox .list li + li:after{
content: '';
display: block;
position: absolute;
height: 1.2em;
top: -2px;
bottom: 0;
left: 0;
border-left: 1px solid #333;
margin: auto;
}
.recipeCategoryBox .list li > *{
font-weight: bold;
}
.recipeCategoryBox .list li.current > *{
color: #E30934;
}

@media screen and (max-width:767px){
    .recipeCategoryBox .list{
        padding-left: 0;
        padding-right: 0;
    }
}

/*===========================================
recipeDescription
===========================================*/
.recipeDescription{
margin-top: 2em;
padding: 0.5em 0;
background: #FAFAFA;
}
.recipeSearch + .recipeDescription{
margin-top: 4em;
}
.recipeDescription .flex{
display: flex;
justify-content: space-between;
align-items: center;
}
.recipeDescription .ttl{
}
.recipeDescription .ttl > *{
width: 12em;
border-right: 1px solid #ddd;
line-height: 1;
text-align: center;
}
.recipeDescription .list{
margin: 0 auto 0 1em;
}
.recipeDescription .list ul{
display: flex;
}
.recipeDescription .list li{
white-space: nowrap;
margin: 0 0.5em;
}
.recipeDescription [class*="recipe_icon_"]{
display: inline-block;
position: relative;
padding-left: calc(25px + 0.25em);
}
.recipeDescription [class*="recipe_icon_"]:before{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 25px;
height: 25px;
margin: auto;
background: center no-repeat;
background-size: contain;
}
.recipeDescription .recipe_icon_cal:before{
background-image: url(/files/user/recipes/image/icon_cal.svg);
}
.recipeDescription .recipe_icon_salt:before{
background-image: url(/files/user/recipes/image/icon_salt.svg);
}
.recipeDescription .recipe_icon_time:before{
background-image: url(/files/user/recipes/image/icon_time.svg);
}
.recipeDescription .recipe_icon_protein:before{
background-image: url(/files/user/recipes/image/icon_protein.svg);
}
.recipeDescription .note{
margin-left: 1em;
padding-right: 1em;
}
.recipeDescription .note p{
font-size: 1.4rem;
}

@media screen and (max-width:767px){
.recipeDescription{
margin-top: 1em;
}
.recipeDescription .flex{
flex-wrap: wrap;
padding: 1em;
}
.recipeDescription .flex > *{
flex-basis: 100%;
}
.recipeDescription .ttl > *{
width: auto;
border: none;
text-align: left;
line-height: 1.7;
}
.recipeDescription .list{
margin: 0;
}
.recipeDescription .list ul{
flex-wrap: wrap;
}
.recipeDescription .list li{
margin: 1em 0 0 0;
margin-right: 0.75em;
font-size: 1.4rem;
}
.recipeDescription .note{
margin: 1em 0 0 0;
padding: 0;
}
.recipeDescription [class*="recipe_icon_"]{
padding-left: 25px;
}
}

/*===========================================
sortSearchResults
===========================================*/
.sortSearchResults{
margin-top: 2em;
}
.sortSearchResults dl{
display: flex;
align-items: center;
}
.sortSearchResults dt{
display: flex;
align-items: center;
font-size: 1.4rem;
line-height: 1;
}
.sortSearchResults dd{
display: flex;
align-items: center;
}
.sortSearchResults ul{
display: flex;
align-items: center;
}
.sortSearchResults li{
position: relative;
margin: 0.25em 0;
padding: 0 1em;
font-size: 1.8rem;
font-weight: bold;
line-height: 1;
}
.sortSearchResults li + li:before{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
border-left: 1px solid #ccc;
}
.sortSearchResults li.current a{
color: #E30934;
}
.sortSearchResults li.current span:before{
content: "↓";
margin-right: 0.25em;
}

@media screen and (max-width:767px){
.sortSearchResults{
margin-top: 3em;
}
.sortSearchResults dl{
flex-wrap: wrap;
}
.sortSearchResults dt{
flex-basis: 100%;
}
.sortSearchResults dd{
margin-top: 0.5em;
}
.sortSearchResults li{
font-size: 1.4rem;
padding: 0 0.5em;
}
.sortSearchResults li:first-child{
padding-left: 0;
}
}

/*===========================================
resultStats
===========================================*/
.resultStats{
margin-top: 3em;
}
.resultStats p{
font-weight: bold;
}
.resultStats p span{
font-size: 2rem;
color: #E30934;
}

/*===========================================
tab
===========================================*/
.mod_tab.top{
margin-top: 3em;
}
.mod_tabContent > *{
padding: 0 0 4em 0;
}

@media screen and (max-width:767px){
.mod_tab.top{
margin-top: 2em;
}
}

/*===========================================
resultRecipeListPager
===========================================*/
.resultRecipeListPager{
margin-top: 2em;
}
.resultRecipeList + .resultRecipeListPager{
margin-top: 4em;
}

@media screen and (max-width:767px){
.resultRecipeListPager{
margin-top: 3em;
}
}

/*===========================================
resultRecipeList
===========================================*/
.resultRecipeList{
margin-top: 2em;
}
.resultRecipeList .list .mod_flex > *{
display: flex;
background: #fff;
}
.resultRecipeList .list .mod_flex > *:nth-of-type(n + 3){
margin-top: 40px;
}
.resultRecipeList .list a{
flex :1;
flex-wrap: wrap;
display: flex;
position: relative;
border: 1px solid #ddd;
}
.resultRecipeList .list .mod_icon_txt_new{
position: absolute;
top: 0;
left: 0;
}
.resultRecipeList .list .inner{
flex :1;
justify-content: space-between;
flex-wrap: wrap;
display: flex;
padding: 20px;
}
.resultRecipeList .list .img{
flex-basis: 41.38%;
}
.resultRecipeList .list .txt{
flex-basis: calc(59% - 1em);
}
.resultRecipeList .list .ttl > *{
font-size: 1.8rem;
}
.resultRecipeList .list .data{
flex-basis: 100%;
margin: auto 0 0 0;
padding: 10px 20px;
background: #FAFAFA;
}
.resultRecipeList .list .data ul{
display: flex;
justify-content: space-around;
max-width: 360px;
margin: auto;
}
.resultRecipeList .list .data li{
font-size: 1.4rem;
}
.resultRecipeList .list .icon_allergy{
margin-top: 0.5em;
}
.resultRecipeList .list .icon_allergy > *{
display: inline-block;
border: 1px solid #E30934;
padding: 0.25em 1em;
color: #E30934;
font-size: 1.2rem;
}
.resultRecipeList .list .icon_chukameisai{
margin-top: 0.5em;
}
.resultRecipeList .list .icon_chukameisai > *{
display: inline-block;
border: 1px solid #E30934;
padding: 0.25em 1em;
color: #E30934;
font-size: 1.2rem;
}

@media screen and (max-width:767px){
.resultRecipeList .list .mod_flex > *:nth-of-type(n + 2){
margin-top: 20px;
}
.resultRecipeList .list .inner{
flex-wrap: wrap;
}
.resultRecipeList .list .mod_icon_txt_new{
width: 48px;
height: 48px;
}
.resultRecipeList .list .img{
flex-basis: 100%;
}
.resultRecipeList .list .txt{
flex-basis: 100%;
margin-top: 1em;
}
.resultRecipeList .list .ttl > *{
font-size: 2rem;
}
}

/*===========================================
recipeNav
===========================================*/
.recipeNav{
padding: 0 20px;
}
.recipeNav .recipeNav_wrap{
max-width: 1000px;
margin: auto;
}
.recipeNav .recipeNav_inner{
padding: 100px 0 0 0;
}
.recipeNav a{
display: block;
}
.recipeNav .img {
position: relative;
height: 0;
padding-top: 48%;
margin-bottom: 0.5em;
overflow: hidden;
}
.recipeNav .img img {
transform: translateY(-50%);
position: absolute;
top: 50%;
left: 0;
}
.recipeNav .btn{
max-width: 300px;
margin: 4% auto 0 auto;
}

@media screen and (max-width:767px){
.recipeNav .recipeNav_inner{
padding: 5em 0 0 0;
}
.recipeNav .btn{
margin-top: 2em;
}
}

/*===========================================
recipeContents
===========================================*/
.recipeContents{
margin-top: 8%;
padding: 0 20px;
background: url(/files/user/recipes/image/recipecontents_bg_01.jpg) center no-repeat;
background-size: cover;
}
.recipeContents .recipeContentsWrap{
max-width: 1000px;
margin: auto;
}
.recipeContents .recipeContentsInner{
padding: 6% 0;
}
.recipeContents * + .recipeContentsTtl{
margin-top: 8%;
}
.recipeContents .recipeContentsTtl > *{
font-size: 2.8rem;
color: #fff;
font-weight: bold;
text-align: center;
}
.recipeContents .list{
margin-top: 2em;
}
.recipeContents .list + .list{
margin-top: 3em;
}
.recipeContents .mod_btn_01{
background: #fff;
border-radius: 3em;
}
.recipeContents .mod_bnrBtn_01{
background-color: #fff;
}

@media screen and (max-width:767px){
.recipeContents .recipeContentsInner{
padding: 4em 0;
}
}

/*===========================================
listFlowCooking
===========================================*/
.listFlowCooking{
margin-top: 0.5em;
}
.listFlowCooking li{
display: flex;
justify-content: space-between;
border-bottom: 1px solid #ddd;
padding: 1em 0;
}
.listFlowCooking li > *{
flex-basis: calc(100% - 3em);
}
.listFlowCooking li > *:first-child{
flex-basis: 2em;
white-space: nowrap;
color: #E30934;
font-weight: bold;
}
.listFlowCooking li > .flex{
display: flex;
justify-content: space-between;
}
.listFlowCooking li > .flex > p:first-child{
padding-right: 1em;
}



/*===========================================
recipeSearch
===========================================*/
.recipeSearch_block{
padding: 0 20px;
background: url(/files/user/recipes/image/recipesearch_bg_01.jpg) center no-repeat;
background-size: cover;
}
.recipeSearch_block .recipeSearch_wrap{
max-width: 1000px;
margin: auto;
}
.recipeSearch_block .recipeSearch_inner{
padding: 6% 0;
}
.recipeSearch_block .recipeSearch_ttl > *{
color: #fff;
font-size: 2.8rem;
font-weight: bold;
text-align: center;
}
#recipeSearch{
margin-top: 3%;
background: #fff;
}
#recipeSearch .recipeSearchHeader{
display: none;
}
#recipeSearch .recipeSearchBody{
margin-top: 40px;
}
#recipeSearch .recipeSearchBody .box{
padding: 0;
background: transparent;
}
#recipeSearch .recipeSearchBody .flex{
display: none;
}
#recipeSearch .recipeSearchBody .ttl{
margin-top: 1em;
}
#recipeSearch .recipeSearchBody .ttl > *{
color: #E30934;
font-size: 2rem;
font-weight: bold;
text-align: center;
}
#recipeSearch .recipeSearchBody .list{
margin-top: 1em;
}
#recipeSearch .recipeSearchBody .list ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#recipeSearch .recipeSearchBody .list li{
display: flex;
margin-bottom: 5px;
background: #fff;
}
#recipeSearch .recipeSearchBody .list .column2{
flex-basis: calc((100% - 5px) / 2);
}
#recipeSearch .recipeSearchBody .list .column3{
flex-basis: calc((100% - 10px) / 3);
}
#recipeSearch .recipeSearchBody .list .column4{
flex-basis: calc((100% - 15px) / 4);
}
#recipeSearch .recipeSearchBody .list li a{
display: flex;
flex-basis: 100%;
align-items: center;
min-height: 4.5em;
justify-content: center;
border: 1px solid #ddd;
font-size: 1.5rem;
background: #fff;
}
#recipeSearch .recipeSearchBody .list li span{
display: block;
padding: 0.5em;
text-align: center;
}
#recipeSearch .recipeSearchBody .ingredient .mod_list_check ul{
display: flex;
flex-wrap: wrap;
}
#recipeSearch .recipeSearchBody .ingredient .mod_list_check li{
margin-right: 1.5em;
}
#recipeSearch .recipeSearchBody .type .mod_list_radio ul{
display: flex;
flex-wrap: wrap;
}
#recipeSearch .recipeSearchBody .type .mod_list_radio li{
margin-right: 1.5em;
}
#recipeSearch .recipeSearchBody .type .mod_list_radio li.fb100p{
flex-basis: 100%;
}

#recipeSearch .recipeSearchBody .requirement{
border: 2px solid #E30934;
border-radius: 10px;
padding: 20px;
background: #fff;
}
#recipeSearch .recipeSearchBody .requirement .ttl{
margin-top: 0;
}
#recipeSearch .recipeSearchBody .requirement .ttl > *{
color: #333;
}
#recipeSearch .recipeSearchBody .requirement .selectBlock{
display: flex;
justify-content: space-between;
border-top: 1px solid #ddd;
padding: 1em 20px;
}
#recipeSearch .recipeSearchBody .requirement .selectBlock .ttl{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
flex-basis: 21.5%;
margin-right: 2em;
}
#recipeSearch .recipeSearchBody .requirement .selectBlock .ttl > *{
position: relative;
flex-basis: 100%;
}
#recipeSearch .recipeSearchBody .requirement .selectBlock .ttl > *:before{
content: "";
display: block;
width: 57px;
height: 46px;
margin: 0 auto 0.5em auto;
background: center no-repeat;
background-size: contain;
}
#recipeSearch .recipeSearchBody .requirement .ingredient .ttl > *:before{
background-image: url(/files/user/recipes/image/icon_ingredient_red.svg);
}
#recipeSearch .recipeSearchBody .requirement .type .ttl > *:before{
background-image: url(/files/user/recipes/image/icon_type_red.svg);
}
#recipeSearch .recipeSearchBody .requirement .selectBlock .subTtl{
font-weight: bold;
}
#recipeSearch .recipeSearchBody .requirement .inputBlock > * + *{
margin-top: 0.5em;
}
#recipeSearch .recipeSearchBody .requirement .inputBlock{
flex-basis: 33%;
margin-right: 2em;
}
#recipeSearch .recipeSearchBody .requirement .inputBlock:last-child{
flex-basis: 41.5%;
margin-right: 0;
}
#recipeSearch .recipeSearchBody .requirement .inputBlock .list{
margin-top: 1em;
}
#recipeSearch .recipeSearchBody .requirement .select{
position: relative;
border: 1px solid #ccc;
background: #fafafa;
}
#recipeSearch .recipeSearchBody .requirement .select:after{
transform: rotate(135deg);
content: '';
display: block;
position: absolute;
width: 7px;
height: 7px;
top: 0;
bottom: 0;
right: 0.75em;
margin: auto;
border-top: 2px solid #666;
border-right: 2px solid #666;
}
#recipeSearch .recipeSearchBody .requirement select{
width: 100%;
border: none;
padding: 1em 0.5em;
background-color: transparent;
outline: none;
appearance: none;
}
::-ms-expand {
display: none;
}
#recipeSearch .recipeSearchBody .requirement .result{
position: relative;
padding: 1em;
background: #F5F5F5;
}
#recipeSearch .recipeSearchBody .requirement .result_inner{
display: flex;
justify-content: center;
}
#recipeSearch .recipeSearchBody .requirement .result .txt{
padding: 0 1em;
text-align: center;
}
#recipeSearch .recipeSearchBody .requirement .result .txt p{
display: inline-block;
text-align: center;
font-weight: bold;
}
#recipeSearch .recipeSearchBody .requirement .result span{
color: #E30934;
font-size: 2.4rem;
}
#recipeSearch .recipeSearchBody .requirement .result .btn{
width: 100%;
max-width: 14em;
margin: 0 0 0 2em;
}
#recipeSearch .recipeSearchBody .requirement .result .btn > *{
flex-basis: 100%;
}
#recipeSearch .recipeSearchBody .requirement .result .btn a{
padding-top: 0.5em;
padding-bottom: 0.5em;
}
#recipeSearch .recipeSearchBody .requirement .result .btn > * > *{
display: block;
position: relative;
width: 100%;
border: 1px solid #e30934;
border-radius: 3em;
padding: 0.5em;
padding-left: calc(1.25em + 8px);
padding-right: calc(1.25em + 8px);
font-size: 1.5rem;
color: #e30934;
font-weight: bold;
text-align: center;
text-decoration: none;
background: #fff;
cursor: pointer;
}
#recipeSearch .recipeSearchBody .requirement .result .btn > * > *:after{
transform: rotate(45deg);
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 15px;
width: 8px;
height: 8px;
margin: auto;
border-top: 2px solid #e30934;
border-right: 2px solid #e30934;
}

@media screen and (min-width:768px){
#recipeSearch .recipeSearchBody{
height: auto !important;
}
}

@media screen and (max-width:767px){
#recipeSearch .recipeSearch_inner{
padding: 4em 0 80px 0;
}
#recipeSearch .recipeSearch_block{
margin-top: 2em;
}
#recipeSearch .recipeSearchBody .list li a{
min-height: 3.5em;
}
#recipeSearch .recipeSearchBody .requirement .selectBlock{
flex-wrap: wrap;
padding: 0;
}
#recipeSearch .recipeSearchBody .requirement .type{
margin-top: 1.5em;
}
#recipeSearch .recipeSearchBody .ttl > *{
font-size: 1.8rem;
}
#recipeSearch .recipeSearchBody .requirement .selectBlock .ttl{
flex-basis: 100%;
margin: 1.5em 0 0 0;
}
#recipeSearch .recipeSearchBody .requirement .selectBlock .ttl > *{
text-align: left;
}
#recipeSearch .recipeSearchBody .requirement .selectBlock .ttl > *:before{
display: inline-block;
width: 35px;
height: 28px;
margin: 0 0.5em 0 0;
vertical-align: middle;
}
#recipeSearch .recipeSearchBody .requirement .inputBlock{
flex-basis: 100%;
margin: 0;
}
#recipeSearch .recipeSearchBody .requirement .inputBlock:last-child{
flex-basis: 100%;
}
#recipeSearch .recipeSearchBody .requirement .selectBlock .subTtl{
margin-top: 1em;
}
#recipeSearch .recipeSearchBody .requirement select{
padding: 0.75em 0.5em;
font-size: 1.6rem;
}
#recipeSearch .recipeSearchBody .ingredient .mod_list_check li{
flex-basis: 100%;
margin: 0;
}
#recipeSearch .recipeSearchBody .type .mod_list_radio li{
flex-basis: 100%;
margin: 0;
}
#recipeSearch .recipeSearchBody .type .mod_list_radio li + li{
margin: 0.5em 0 0 0;
}
#recipeSearch .recipeSearchBody .requirement .result{
margin-top: 2em;
}
#recipeSearch .recipeSearchBody .requirement .result_inner {
flex-wrap: wrap;
}
#recipeSearch .recipeSearchBody .requirement .result .txt{
width: 100%;
}
#recipeSearch .recipeSearchBody .requirement .result .txt p{
text-align: left;
}
#recipeSearch .recipeSearchBody .requirement .result span{
font-size: 2rem;
}
#recipeSearch .recipeSearchBody .requirement .result .btn{
margin: 1em 0 0 0;
}
}

/*===========================================
kazarigiriContents
===========================================*/
.kazarigiriContents{
background: url(/files/user/recipes/image/kazarigiri_bg_01.jpg) bottom center no-repeat;
background-size: cover;
}
.kazarigiriContents .kazarigiriContents_wrap{
max-width: 1000px;
margin: auto;
}
.kazarigiriContents .ttl > *{
color: #fff;
font-size: 2.8rem;
text-align: center;
font-weight: bold;
}
.kazarigiriContents .box1{
padding: 0 20px;
}
.kazarigiriContents .box1 .kazarigiriContents_inner{
padding: 8% 0;
}
.kazarigiriContents .box1 .list{
margin-top: 2em;
}
.kazarigiriContents .box1 .mod_bnrBtn_01{
background: #fff;
}
.kazarigiriContents .list a{
background: #fff;
}
.kazarigiriContents .box2{
padding: 0 20px;
background: rgba(255,255,255,0.8);
}
.kazarigiriContents .box2 .kazarigiriContents_inner{
padding: 5% 0;
}
.kazarigiriContents .box2 .mod_btn_01{
border-radius: 3em;
background: #fff;
}

@media screen and (max-width:767px){
.kazarigiriContents{
background-size: auto 135%;
}
.kazarigiriContents .ttl > *{
font-size: 2.4rem;
}
.kazarigiriContents .box1 .kazarigiriContents_inner{
padding-top: 3em;
padding-bottom: 3em;
}
.kazarigiriContents .box2 .kazarigiriContents_inner{
padding-top: 2em;
padding-bottom: 2em;
}
}

/*===========================================
recipeTop
===========================================*/
.recipeTop{
max-width: 1000px;
margin: auto;
}
.recipeTop .recipeTop_inner{
padding: 75px 0 100px 0;
}
.recipeTop .btn{
box-sizing: content-box;
max-width: 300px;
margin: 0 auto;
padding: 0 20px;
}

@media screen and (max-width:767px){
.recipeTop .recipeTop_inner{
padding: 3em 0 0 0;
}
}