.ykr{
    color:#e86771;
}

.abc{
    color:#6bb482;
}

.other{
    color:#345b7b;
}

/******************** header ********************/

header{
    background: url(../img/top/bg_01.png) center 0 no-repeat;
    background-size: 4000px auto;
    padding-bottom:300px;
}

h1 img{
    margin:30px 0 0;
    width:390px;
}

/******************** recipe ********************/

#recipe{
    margin-top:-250px;
}
#recipe .main{
    width:620px;
    margin:0 auto;
    text-align: center;
    position:relative;
}

#recipe .main .copy{
    position:absolute;
}

.ykr01 .main .copy{
    max-width:260px;
    right:-90px;
    top:-70px;
}

.ykr02 .main .copy{
    max-width:155px;
    right:10px;
    top:-50px;
}

.ykr03 .main .copy{
    max-width:190px;
    right:10px;
    top:-50px;
}

.other01 .main .copy,
.other02 .main .copy,
.other03 .main .copy,
.other04 .main .copy,
.other05 .main .copy,
.other06 .main .copy{
    max-width:250px;
    right:-40px;
    top:-50px;
}

#recipe .main h2{
    font-size:3.8rem;
    margin:30px  0 -15px;
}

#recipe h3{
    text-align: center;
    font-size:2.8rem;
    margin-top:-5rem;
    letter-spacing:2px;
}

#recipe h3::before,
#recipe h3::after{
    content:"●";
    font-size:1.4rem;
    vertical-align: middle;
}

/******************** ingredient ********************/

.ingredient{
    background: url(../img/recipe/bg_recipe.jpg) center 0 no-repeat;
    background-size: cover;
    max-width:800px;
    width:100%;
    margin:70px auto;
    border-radius: 20px;
    padding:30px 40px 40px;
}

.ingredient h3 span{
    font-size:2.1rem;
}

.ingredient .wrap{
    display: flex;
    justify-content:space-between;
}

.ingredient ul{
    width:340px;
    margin-top:20px;
}

.ingredient ul.over{
    width:100%;
}

.ingredient ul li{
    border-bottom:1px solid #fc9700;
    padding:10px 0;
}

.ingredient ul li dl{
    display: flex;
    flex-flow: row;
}

.ingredient ul li dl dt{
    font-weight: normal;
}

.ingredient ul li dl dd{
    margin-left: auto;
}

/******************** how to ********************/

.howto{
    background: url(../img/recipe/bg_recipe.jpg) center 0 no-repeat;
    background-size: cover;
    max-width:800px;
    width:100%;
    margin:70px auto 0;
    border-radius: 20px;
    padding:30px 40px 20px;
}

.howto .prepare{
    margin-top:20px;
    display:flex
}

.howto .prepare h4.abc{
    -ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
    text-align: center;
    letter-spacing: 15px;
    margin-right:5px;
}

.howto .prepare ul{
    list-style-type: disc;
    border-left:1px solid #6bb482;
    padding-left:1.8em;
    text-indent:-0em;
    
}

.howto ul li{
    margin-top:10px;
}

.howto ul li span{
    font-family: kiwi maru;
    font-size:3rem;
    margin-right:5px;
}

.howto ul li p{
    color:#000;
    text-indent:-2em;
    padding-left:2em
}

/******************** point ********************/

.point{
    background: url(../img/recipe/bg_recipe.jpg) center 0 no-repeat;
    background-size: cover;
    max-width:800px;
    width:100%;
    margin:70px auto 0;
    border-radius: 20px;
    padding:30px 40px 10px 60px;
    font-family: kiwi maru;
}

.point .circle{
    width:180px;
    border-radius: 50%;
    padding:40px 0;
    margin:-60px auto;
    background:inherit;
}

.point h3{
    font-size:2.1rem !important;
}

.point p{
    text-align: center;
}

.point ul{
    list-style-type: disc;
}

.point ul p{
    text-align: left;
}


/******************** kurashiru ********************/

.kurashiru{
    margin:80px auto 0;
    text-align: center;
    position: relative;
}

.kurashiru a img{
    width:300px;
}

.kurashiru img.fukidashi{
    width:210px;
    position:absolute;
    right:50;
    top:-10px;
    margin-left:10px;
}

/******************** abc ********************/

.sns{
    display:flex;
    justify-content: center;
}

.sns img{
    width:240px;
    margin:50px 20px 0;
}


/******************** recommend ********************/

#recommend{
    background: url(../img/recipe/bg_link.png) center 0 no-repeat;
    background-size: 4000px auto;
    margin:0 auto -130px;
    padding:50px 0 170px;
    text-align:center;
}

#recommend h2{
    width:420px;
    margin:70px auto 0;
}

#recommend ul{
    width:810px;
    margin:20px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    position: relative;
    z-index:100;
}

#recommend ul li{
    width:250px;
    margin:30px 0;
}

#recommend ul li .main{
    position:relative;
}

#recommend ul li h3{
    font-size:2.3rem;
    margin:10px 0 -10px;
}

#recommend ul li a.btn img{
    width:185px;
    margin-top:15px;
}


/******************** SP ********************/

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

/******************** SP header ********************/

header{
    background: url(../img/top/sp_bg_01.png) center 0 no-repeat;
    background-size: contain;
}

h1 img{
    margin:20px 0 0 20px;
    width:70%;
}

/******************** SP recipe ********************/

#recipe{
    margin-top:-230px;
}
#recipe .main{
    width:90%;
    margin:0 auto;
    text-align: center;
    position:relative;
}

.ykr01 .main .copy
{
    width:60%;
    right:0;
    top:-50px;
}

.ykr02 .main .copy{
    width:40%;
    right:0;
    top:-70px;
}

.ykr03 .main .copy{
    width:45%;
    right:0;
    top:-60px;
}

.other01 .main .copy,
.other03 .main .copy{
    width:60%;
    right:0;
    top:-80px;
}

.other02 .main .copy,
.other05 .main .copy{
    width:60%;
    right:0;
    top:-70px;
}

.other04 .main .copy,
.other06 .main .copy{
    width:55%;
    right:0;
    top:-80px;
}

#recipe .main h2{
    font-size:3.2rem;
    margin:30px  0 -15px;
}

#recipe h3{
    text-align: center;
    font-size:2.8rem;
    margin-top:-5rem;
    letter-spacing:2px;
}

#recipe h3::before,
#recipe h3::after{
    content:"●";
    font-size:1.4rem;
    vertical-align: middle;
}

/******************** SP ingredient ********************/

.ingredient{
    background: url(../img/recipe/bg_recipe.jpg) center 0 no-repeat;
    background-size: cover;
    width:90%;
    margin:70px auto;
    border-radius: 20px;
    padding:30px 0 40px;
}

.ingredient h3 span{
    font-size:2.1rem;
}

.ingredient .wrap{
    display: block;
    margin-top:20px;
}

.ingredient ul{
    width:90%;
    margin:0 auto;
}

.ingredient ul.over{
    width:90%;
}

.ingredient ul li{
    border-bottom:1px solid #fc9700;
    padding:10px 0;
}

.ingredient ul li dl{
    display: flex;
    flex-flow: row;
}

.ingredient ul li dl dd{
    margin-left: auto;
}

/******************** SP how to ********************/

.howto{
    background: url(../img/recipe/bg_recipe.jpg) center 0 no-repeat;
    background-size: cover;
    width:90%;
    margin:70px auto;
    border-radius: 20px;
    padding:30px 0 20px;
}

.howto ul{
    width:90%;
    margin:0 auto;
}

.howto .prepare{
    width:90%;
    margin:20px auto 0;
}


/******************** SP point ********************/

.point{
    background: url(../img/recipe/bg_recipe.jpg) center 0 no-repeat;
    background-size: cover;
    width:90%;
    margin:70px auto;
    border-radius: 20px;
    padding:30px 0 20px;
    font-family: kiwi maru;
}

.point .circle{
    width:180px;
    border-radius: 50%;
    padding:40px 0;
    margin:-60px auto;
    background:inherit;
}

.point ul{
    width:90%;
    margin:0 auto;
    padding-left:5%;
}

.point ul li p{
    width:100%;
    margin:15px 0  10px;
}

.point p{
    width:90%;
    margin:15px auto 10px;
}

/******************** kurashiru ********************/

.kurashiru{
    margin:80px auto;
    display: flex;
    flex-direction: column;
}

.kurashiru a{
    order: 2;
}

.kurashiru img.fukidashi{
    order: 1;
    position:relative;
    margin:0px auto 10px;
}


/******************** abc ********************/

.sns{
    display:block;
    text-align: center;
    margin:-30px 0 50px;
}

.sns img{
    width:65%;
    margin:10px 0;
}


/******************** SP recommend ********************/

#recommend{
    background: url(../img/recipe/sp_bg_link.png) center 0 no-repeat;
    background-size: cover;
    margin:0 auto -70px;
    padding:50px 0 100px;
    text-align:center;
}

#recommend h2{
    width:70%;
    margin:-50px auto 0;
}

#recommend ul{
    width:90%;
    margin:20px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    position: relative;
    z-index:100;
}

#recommend ul li{
    width:47%;
    margin:20px 0;
}

#recommend ul li .main{
    position:relative;
}

#recommend ul li h3{
    font-size:1.8rem;
    margin:10px 0 -10px;
}

#recommend ul li a.btn img{
    width:80%;
    margin-top:15px;
}


}/*SP media*/