@charset "utf-8";

html{
    font-size: 100%;
}
body{
    color:#2b2a27;
    font-family: Arial, Helvetica, sans-serif;
}
img{
    max-width: 100%;
}
ul{
    max-width: 100%;
}
ul{
    list-style: none;    
}
a{
    color: #2b2a27;
}

/* recipe */
.flex{
    display: flex;
    margin-bottom: 60px;
    /* background-color: #efe; */
}

.flex .image{
    width: 50%;
}

.flex .image img{
    width: 100%;
    height: 700px;
    object-fit: cover;
    vertical-align: bottom;
}

.flex .recipe{
    width: 50%;
    padding: 40px 5% 0 5%;
/* background-color: #ddeeff; */
}

.flex .recipe .page-title{
    font-size: 1.75rem;
    margin-bottom: 20px;
}
.flex .recipe .content-title{
    border-bottom: 1px solid #ccc;
    font-size: 1.25rem;
    padding-bottom: 5px;
    /* background-color: #dee; */
    margin: 40px 0 15px 0;
}

.flex .recipe .ingredient-list{
    display: flex;
    flex-wrap: wrap;
    /* background-color: #fdf; */
}

.flex .recipe .ingredient-list dt{
    width: 85%;
    border-bottom: 1px solid #ccc;
    padding: 6px 0;
}

.flex .recipe .ingredient-list dd{
    width: 15%;
    border-bottom:dotted 1px #ccc;
    padding: 6px 0;
    text-align: right;
    /* background-color: #ffffdd; */
}

.flex .recipe .step-list li{
    border-bottom: 1px dotted #ccc;
    padding: 6px 0;
    margin-left: 20px;
}

/* button */
.btn {
    text-align: center;
    margin-bottom: 80px;
}

.btn a{
    display: inline-block;
    border:solid 1px #2b2a27;
    font-size: 0.875rem;
    padding: 18px 60px;
    text-decoration: none;
}

/* footer */
#footer{
font-size: 0.75rem;
padding: 20px;
text-align: center;
}

#footer .sns{
    display:flex;
    justify-content: center;
    margin-bottom: 20px;
}

#footer .sns li{
    margin: 0 10px;
}

@media screen and (max-width:834px){

/* sp */
.flex{
    flex-direction:column;
}
.flex .image{
    width: 100%;
}

/* 画像の高さ固定を解除 */
.flex .image img{
    height: auto;
}

.flex .recipe{
    width: 100%;
}

}