@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 p{
text-align: center;
}

@media screen and (max-width:767px){
.infoTxt p{
text-align: left;
}
}
/*===========================================
recipeSearch
===========================================*/
.recipeSearch .recipeSearchHeader{
margin-top: 3em;
}
.recipeSearch .recipeSearchHeader .flex{
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.recipeSearch .recipeSearchHeader .keyword{
display: flex;
align-items: center;
flex-basis: calc(100% - 16em);
padding: 0.75em 0;
}
.recipeSearch .recipeSearchHeader .keyword .ttl{
font-weight: bold;
white-space: nowrap;
}
.recipeSearch .recipeSearchHeader .keyword .search{
position: relative;
width: 100%;
margin-left: 1em;
border: 1px solid #666;
border-radius: 35px;
overflow: hidden;
}
.recipeSearch .recipeSearchHeader .keyword .search .recipeSearch_submit {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 48px;
margin: auto;
border: none;
border-top-right-radius: 35px;
border-bottom-right-radius: 35px;
background: url(/files/user/shared/image/icon_search.svg) center no-repeat;
background-size: 16px;
cursor: pointer;
outline: none;
}
.recipeSearch .recipeSearchHeader .keyword .search .header_submit{
position: absolute;
top: 0;
bottom: 0;
right: 10px;
width: 16px;
height: 16px;
margin: auto;
border: none;
background: url(/files/user/shared/image/icon_search.svg) center no-repeat;
background-size: contain;
cursor: pointer;
outline: none;
}
.recipeSearch .recipeSearchHeader .keyword .search input{
width: 100%;
border: none;
padding: 1em 35px 1em 1.5em;
font-size: 1.3rem;
background: transparent;
outline: none;
}
.recipeSearch .recipeSearchHeader .btn{
flex-basis: 13em;
}
.recipeSearch .recipeSearchHeader .btn a{
display: block;
position: relative;
width: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding: 1.33em 1em;
color: #fff;
text-align: center;
font-weight: bold;
background: #E30934;
}
.recipeSearch .recipeSearchHeader .btn a.accordion:after {
transform: none;
content: '';
display: block;
position: absolute;
width: 12px;
height: 12px;
top: 0;
bottom: 0;
right: 20px;
margin: auto;
border: none;
background: url(/files/user/shared/image/icon_plus_wh.svg) center no-repeat;
background-size: contain;
}
.recipeSearch .recipeSearchHeader .btn a.accordion.open:after {
background-image: url(/files/user/shared/image/icon_minus_wh.svg);
}
.recipeSearch .recipeSearchBody .box{
padding: 20px;
}
.recipeSearch .recipeSearchBody .flex{
position: relative;
display: flex;
justify-content: space-between;
}
.recipeSearch .recipeSearchBody .flex:after{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 1px;
height: 100%;
margin: auto;
background: #F1DDE1;
}
.recipeSearch .recipeSearchBody .flex > *{
flex-basis: calc((100% - 40px) / 2);
}
.recipeSearch .recipeSearchBody .flex > *:nth-of-type(2n){
    margin: 0 0 0 auto;
}
.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{
margin-top: 20px;
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{
border: 1px solid #ccc;
background: #fafafa;
}
.recipeSearch .recipeSearchBody .requirement select{
width: 100%;
border: none;
padding: 1em 0.5em;
background-color: transparent;
outline: 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 p{
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 > * > *{
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 (max-width:767px){
.recipeSearch .recipeSearchHeader .flex{
flex-wrap: wrap;
}
.recipeSearch .recipeSearchHeader .keyword {
flex-basis: 100%;
flex-wrap: wrap;
padding: 0;
}
.recipeSearch .recipeSearchHeader .keyword .search{
margin: 0.5em 0 0 0;
}
.recipeSearch .recipeSearchHeader .btn {
margin: 2em 0 0 auto;
flex-basis: 15em;
}
.recipeSearch .recipeSearchHeader .btn a{
padding-top: 0.75em;
padding-bottom: 0.75em;
}
.recipeSearch .recipeSearchBody .flex{
flex-wrap: wrap;
}
.recipeSearch .recipeSearchBody .flex > *{
flex-basis: 100%;
}
.recipeSearch .recipeSearchBody .flex:after{
content: normal;
}
.recipeSearch .recipeSearchBody .flex .menu{
margin-top: 2em;
border-top: 1px solid #F1DDE1;
}
.recipeSearch .recipeSearchBody .flex .menu .ttl{
margin-top: 2em;
}
.recipeSearch .recipeSearchBody .list li a{
min-height: 3.5em;
}
.recipeSearch .recipeSearchBody .category .list li:nth-of-type(1),
.recipeSearch .recipeSearchBody .category .list li:nth-of-type(2),
.recipeSearch .recipeSearchBody .category .list li:nth-of-type(3),
.recipeSearch .recipeSearchBody .category .list li:nth-of-type(4){
flex-basis: calc((100% - 10px) / 3);
}
.recipeSearch .recipeSearchBody .category .list li:nth-of-type(5){
flex-basis: calc(((100% - 10px) / 3) * 2 + 5px);
}
.recipeSearch .recipeSearchBody .category .list li:nth-of-type(6),
.recipeSearch .recipeSearchBody .category .list li:nth-of-type(7){
flex-basis: calc((100% - 5px) / 2);
}
.recipeSearch .recipeSearchBody .category .list li:nth-of-type(8),
.recipeSearch .recipeSearchBody .category .list li:nth-of-type(9),
.recipeSearch .recipeSearchBody .category .list li:nth-of-type(10){
flex-basis: calc((100% - 10px) / 3);
}
.recipeSearch .recipeSearchBody .category .list li:nth-of-type(11){
flex-basis: calc(100%);
}
.recipeSearch .recipeSearchBody .menu .list li:nth-of-type(1),
.recipeSearch .recipeSearchBody .menu .list li:nth-of-type(2),
.recipeSearch .recipeSearchBody .menu .list li:nth-of-type(3){
flex-basis: calc((100% - 10px) / 3);
}
.recipeSearch .recipeSearchBody .menu .list li:nth-of-type(4),
.recipeSearch .recipeSearchBody .menu .list li:nth-of-type(5),
.recipeSearch .recipeSearchBody .menu .list li:nth-of-type(6),
.recipeSearch .recipeSearchBody .menu .list li:nth-of-type(7){
flex-basis: calc((100% - 5px) / 2);
}
.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 .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 p{
text-align: left;
}
.recipeSearch .recipeSearchBody .requirement .result span{
font-size: 2rem;
}
.recipeSearch .recipeSearchBody .requirement .result .btn{
margin: 1em 0 0 0;
}
}

/*===========================================
recommend
===========================================*/
.recommend{
}
.recommend .list{
margin-top: 2em;
}
.recommend .list > .mod_flex > *{
position: relative;
}
.recommend .list .mod_icon_txt_new {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.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;
}
@media screen and (max-width:767px){
.recommend .list .mod_icon_txt_new {
width: 48px;
height: 48px;
}
.recommend .list.mod_itemList_2_1 > .mod_flex > *:nth-of-type(n + 2) {
margin-top: 15%;
}
.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;
}
}

/*===========================================
ranking
===========================================*/
.ranking{
position: relative;
margin-top: 9%;
}
.ranking:after{
content: '';
display: block;
position: absolute;
width: 100vw;
height: 100%;
top: 0;
bottom: 0;
left: calc((100vw - 100%) / 2 * -1);
background-color: #fef0f3;
background-image: linear-gradient(90deg, #fef0f3 0%, #fef7f0 100%);
}
.ranking .ranking_inner{
position: relative;
padding: 7% 0;
z-index: 1;
}
.ranking .img{
margin-bottom: 1em;
}
.ranking .ttl{
margin-top: 0;
}
.ranking .list{
margin-top: 2em;
}
.ranking .list > .mod_flex > *{
position: relative;
}
.ranking .list > .mod_flex > *:before{
content: "";
display: block;
margin: auto;
width: 42px;
height: 32px;
background: center no-repeat;
background-size: contain;
}
.ranking .list > .mod_flex > *:nth-of-type(1):before{
background-image: url(/files/user/recipes/image/icon_rank1.svg);
}
.ranking .list > .mod_flex > *:nth-of-type(2):before{
background-image: url(/files/user/recipes/image/icon_rank2.svg);
}
.ranking .list > .mod_flex > *:nth-of-type(3):before{
background-image: url(/files/user/recipes/image/icon_rank3.svg);
}
.ranking .list .img{
margin-top: 10px;
}

@media screen and (max-width:767px){
.ranking .ranking_inner{
padding: 4em 0;
}
.ranking .list.mod_itemList_3_1 > .mod_flex > *:nth-of-type(n + 2) {
margin-top: 15%;
}
}

/*===========================================
theme
===========================================*/
.theme{
position: relative;
}
.theme .theme_inner{
position: relative;
padding: 7% 0 0 0;
z-index: 1;
}
.theme .ttl{
margin: 0;
}
.theme .img{
margin-bottom: 1em;
}
.theme .list{
margin-top: 2em;
}

@media screen and (max-width:767px){
.theme .theme_inner{
padding: 4em 0;
}
.theme .list.mod_itemList_3_1 > .mod_flex > *:nth-of-type(n + 2) {
margin-top: 15%;
}