@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Lusitana:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&family=M+PLUS+Rounded+1c&display=swap');

html{
    background-image:none;
}

#recipe .serif{
    font-family: 'Noto Serif JP', serif;
}
#recipe .container.transparent {
  background: rgba(124, 135, 128, .4);
}
#recipe .container-inner{
    width:100%;
    padding:0;
}


/* how to */

.howto h2{
    background:rgba(175, 155, 30, .5);
    text-align: center;
}
.howto h2 img{
    width:850px;
    height:auto;
}
.howto h3.leaf,
.arrange-tea-recipe h3.leaf{
    background:#af9b1d;
    width:700px;
    margin:20px auto 0 auto;
    padding:8px 0;
    border-radius:20px;
    color:#FFF;
    font-size:24px;
    font-weight: 500;
    text-align: center;
    letter-spacing:3px;
    position:relative;
}
.arrange-tea-recipe h3.leaf.gray{
    background-color: #7c8780;
}
.howto h3 img,
.arrange-tea-recipe h3 img{
    position:absolute;
    bottom:-10px;
    left:80px;
}
.howto h3.tea-bag{
    background:#7c8780;
    width:700px;
    margin:50px auto 0 auto;
    padding:8px 0;
    border-radius:20px;
    color:#FFF;
    font-size:24px;
    font-weight: 500;
    text-align: center;
    letter-spacing:3px;
    position:relative;
}
.tea-recipe,
.arrange-recipe,
.flavored-tea-recipe{
    width:1000px;
    margin:30px auto;
    padding:30px 40px;
    background-color:#FFF;
    border-radius:20px;
    position:relative;
}
.tea-recipe ol{
    padding-left:300px;
}
.recipe01{
    background:url(../images/recipe/illust01.png) no-repeat right 20px bottom 20px #FFF;
}
.recipe01 img{
    position: absolute;
    top: 40px;
    left: 30px;
    width: 200px;
    height: auto;
}
.recipe02{
    background:url(../images/recipe/illust02.png) no-repeat right 20px bottom 30px #FFF;
}
.recipe02 img{
    position: absolute;
    top: 100px;
    left: 30px;
    width: 200px;
    height: auto;
}
.recipe03{
    background:url(../images/recipe/illust03.png) no-repeat right 20px bottom 30px #FFF;
}
.recipe03 img{
    position: absolute;
    top: 100px;
    left: 30px;
    width: 200px;
    height: auto;
}
.recipe04{
    background:url(../images/recipe/illust04.png) no-repeat right 20px bottom 20px #FFF;
}
.recipe04 img{
    position: absolute;
    top: 100px;
    left: 30px;
    width: 200px;
    height: auto;
}
.recipe05{
    background:url(../images/recipe/illust05.png) no-repeat right 20px bottom 20px #FFF;
}
.recipe05 img{
    position: absolute;
    top: 100px;
    left: 30px;
    width: 200px;
    height: auto;
}
.recipe06{
    background:url(../images/recipe/illust06.png) no-repeat right 20px bottom 20px #FFF;
}
.recipe06 img{
    position: absolute;
    top: 100px;
    left: 30px;
    width: 200px;
    height: auto;
}
.recipe07{
    background:url(../images/recipe/illust07.png) no-repeat right 20px top 80px #FFF;
}
.recipe07 img{
    position: absolute;
    top: 100px;
    left: 30px;
    width: 200px;
    height: auto;
}
.recipe08{
    background:url(../images/recipe/illust08.png) no-repeat right 30px top 120px #FFF;
}
.recipe08 img{
    position: absolute;
    top: 100px;
    left: 30px;
    width: 200px;
    height: auto;
}
.tea-recipe h4{
    width:480px;
    margin:0 auto 20px auto;
    color:#af9b1d;
    font-size:18px;
    font-weight: 500;
    border-radius:20px;
    border:3px solid #af9b1d;
    text-align: center;
}
.tea-recipe.recipe04 h4,
.tea-recipe.recipe05 h4,
.tea-recipe.recipe06 h4,
.tea-recipe.recipe07 h4,
.tea-recipe.recipe08 h4{
    color:#7c8780;
    border:3px solid #7c8780;
}
.tea-recipe.recipe05 h4,
.tea-recipe.recipe08 h4{
    border-radius: 90px;
}
.tea-recipe h4 .txt-md{
        font-size:16px;
    }
.tea-recipe h5{
    margin-left:300px;
    width:460px;
    font-family: 'Lusitana', 'Noto Serif JP', serif;
    padding-left:20px;
    background:#af9b1d;
    color:#FFF;
    font-size:18px;
    letter-spacing:3px;
    border-radius:10px;
    margin-bottom:10px;
}
.tea-recipe p.point{
    margin-left:300px;
    width:460px;
    color:#af9b1d;
    padding-left:10px;
}
.tea-recipe p.recommend{
    margin-left:290px;
   padding-left:30px;
   font-size:15px;
}
.tea-recipe p.sm{
    font-size:12px;
}
.tea-recipe li{
    /*list-style-type: decimal;*/
    font-size:16px;
    margin:0 0 20px 0;
    width:460px;
}
.tea-recipe.recipe06 li{
    margin-bottom:60px;
}
p.sm.tr{
    font-size:13px;
    margin-right:50px;
}


/* arrange recipe */
.arrange-top{
    background:url(../images/recipe/bg_arrange.jpg) top left 100%;
}
.arrange-top p.tc{
    font-size:32px;
    color:#716959;
    padding-top:30px;
}
.arrange-top h2{
    background:url(../images/recipe/arrange_top_img.png) no-repeat left 50px top 50px;
    background-size:30%;
    font-size:30px;
    color:#716959;
    padding-left:400px;
    font-weight: 500;
    letter-spacing:2px;
    line-height:1.4;
    padding-bottom:20px;
}
.arrange-top h2 span{
    font-family: "EB Garamond", serif;
    font-size:110px;
    color:#a1957f;
    display: block;
}
.arrange-top div{
    background-color:rgba(197, 185, 153, .4);
}
.arrange-top div p{
    padding:20px 50px;
    color:#716959;
    font-size:26px;
}
.arrange-container{
    display: flex;
    justify-content:space-between;
}
.ingredients,
.step{
    width:48%;
}
.ingredients h4{
    margin-top:30px;
}
.ingredients .memo{
    background-color: rgba(175, 155, 30, .3);
    padding:15px;
    margin-top:40px;
}
.arrange02 .ingredients .memo,
.arrange04 .ingredients .memo{
    background-color: rgba(124, 135, 128, .3);
}
.ingredients .memo h4{
    margin-top:0;
    line-height: 1.2;
}
.step h3{
    font-size:16px;
    padding:5px 0;
    border-bottom:1px solid #666;
    margin-top:40px;
}
.step div p{
    width:70%;
    margin-top:20px;
}
.arrange01 h3,
.arrange03 h3,
.arrange05 h3,
.arrange01 h4,
.arrange03 h4,
.arrange05 h4{
    color:#af9b1d;
    font-weight: 400;
}
.arrange02 h3,
.arrange04 h3,
.arrange02 h4,
.arrange04 h4{
    color:#7c8780;
    font-weight: 400;
}
.arrange01 .arrange-title,
.arrange03 .arrange-title,
.arrange05 .arrange-title{
    color:#af9b1d;
    font-weight: 400; 
    display: flex; 
    align-items:flex-end;
    position:relative;
}
.arrange02 .arrange-title,
.arrange04 .arrange-title{
    color:#7c8780;
    font-weight: 400; 
    display: flex; 
    align-items:flex-end;
    position:relative;
    width:100%;
    text-align: center;
}
.arrange-title img{
    width:200px;
    height:auto;
}
.arrange02 .arrange-title img{
    width:300px;
}
.arrange-title img.item{
    position:absolute;
    right:0;
    top:0;
    width:32%;
    height:auto;
}
.arrange-title div{
    margin-left:30px;
}
.arrange-title p{
    font-size:22px;
}
.arrange-title p span{
    font-size:18px;
}
.arrange01 .arrange-title h3,
.arrange03 .arrange-title h3,
.arrange05 .arrange-title h3{
    display: inline-block;
    padding:2px 20px;
    border:3px solid #af9b1d;
    border-radius:26px;
    min-width:380px;
    text-align: center;
}
.arrange02 .arrange-title h3,
.arrange04 .arrange-title h3{
    display: inline-block;
    padding:2px 20px;
    border:3px solid #7c8780;
    border-radius:26px;
    min-width:380px;
    text-align: center;
}
.ingredients li{
    border-bottom:1px solid #666;
    padding:8px 0;
    position: relative;
}
.ingredients li span{
    position:absolute;
    right:0;
}
.arrange-container .point{
    width:60%;
    border:1px solid #af9b1d;
    padding:10px 15px;
    margin:20px 0;
}
.arrange02 .arrange-container .point,
.arrange04 .arrange-container .point{
    border:1px solid #7c8780;
}
.arrange-container .ingredients .point{
    width:80%;
}
.arrange-container .ingredients .point h4{
    margin-top:0;
}
.arrange-container .point h4{
    line-height:1.2;
    font-size:14px;
}
.arrange-container .point p{
    width:100%;
    margin:0;
}
.arrange01 .step div:nth-child(1){
    background:url(../images/recipe/arrange_recipe01_img01.png) no-repeat top 90px right 20px;
    background-size:20%;
}
.arrange01 .step div:nth-child(2){
    background:url(../images/recipe/arrange_recipe01_img02.png) no-repeat top 90px right 10px;
    background-size:25%;
}
.arrange01 .step>div:nth-child(3){
    background:url(../images/recipe/arrange_recipe01_img03.png) no-repeat top 120px right 20px;
    background-size:20%;
}
.arrange02 .step div:nth-child(1){
    background:url(../images/recipe/arrange_recipe02_img01.png) no-repeat top 70px right 20px;
    background-size:22%;
}
.arrange02 .step div:nth-child(2){
    background:url(../images/recipe/arrange_recipe02_img02.png) no-repeat top 50px right 10px;
    background-size:15%;
    padding-bottom:20px;
}
.arrange03 .step div:nth-child(1){
    background:url(../images/recipe/arrange_recipe03_img01.png) no-repeat bottom 0px right 0;
    background-size:40%;
    padding-bottom:70px;
}
.arrange03 .step div:nth-child(2){
    background:url(../images/recipe/arrange_recipe03_img02.png) no-repeat top 40px right 10px;
    background-size:15%;
    padding-bottom:20px;
}
.arrange03 .step>div:nth-child(3){
    background:url(../images/recipe/arrange_recipe03_img03.png) no-repeat bottom 0px right 20px;
    background-size:25%;
}
.arrange03 .step div:nth-child(4){
    background:url(../images/recipe/arrange_recipe03_img04.png) no-repeat bottom 0px right 20px;
    background-size:25%;
}
.arrange03 .step>div:nth-child(5){
    background:url(../images/recipe/arrange_recipe03_img05.png) no-repeat bottom 0px right 20px;
    background-size:18%;
}
.arrange04 .step div:nth-child(1){
    background:url(../images/recipe/arrange_recipe04_img01.png) no-repeat bottom 0px right 20px;
    padding-bottom:20px;
    background-size:15%;
}
.arrange04 .step div:nth-child(2){
    background:url(../images/recipe/arrange_recipe04_img02.png) no-repeat bottom 0px right 20px;
    background-size:18%;
}
.arrange04 .step>div:nth-child(3){
    background:url(../images/recipe/arrange_recipe04_img03.png) no-repeat bottom 0px right 0;
    background-size:26%;
}
.arrange04 .step div:nth-child(4){
    background:url(../images/recipe/arrange_recipe04_img04.png) no-repeat bottom 0px right 0;
    background-size:27%;
}
.arrange04 .step>div:nth-child(5){
    background:url(../images/recipe/arrange_recipe04_img05.png) no-repeat bottom 0px right 20px;
    padding-bottom:20px;
    background-size:15%;
}
.arrange05 .step div:nth-child(1){
    background:url(../images/recipe/arrange_recipe05_img01.png) no-repeat bottom 0px right 0;
    padding-bottom:30px;
    background-size:27%;
}
.arrange05 .step div:nth-child(2){
    background:url(../images/recipe/arrange_recipe05_img02.png) no-repeat top 100px right 0;
    background-size:27%;
}
.arrange05 .step>div:nth-child(3){
    background:url(../images/recipe/arrange_recipe05_img03.png) no-repeat bottom 0px right 0;
    background-size:26%;
}
.arrange05 .step div:nth-child(4){
    background:url(../images/recipe/arrange_recipe05_img04.png) no-repeat bottom 0px right 20px;
    background-size:16%;
}
.arrange05 .step>div:nth-child(5){
    background:url(../images/recipe/arrange_recipe05_img05.png) no-repeat bottom 0px right 10px;
    background-size:20%;
}

/* Flavored iced tea */
.flavored-top{
    background:url(../images/recipe/bg_flavored.jpg) top left 100%;
    position:relative;
}
.flavored-top h2{
    background:url(../images/recipe/flavored_top_img.png) no-repeat left 50px top 70px;
    background-size:30%;
    font-size:30px;
    color:#5a95ae;
    padding-top:20px;
    padding-left:350px;
    font-weight: 500;
    letter-spacing:2px;
    line-height:1.4;
    padding-bottom:20px;
}
.flavored-top h2 span{
    font-family: "EB Garamond", serif;
    font-size:110px;
    color:#80a7c4;
    display: block;
    line-height:1;
    margin-left:40px;
}
.flavored-top div{
    background-color:rgba(90, 150, 175, .7);
}
.flavored-top div p{
    padding:20px 50px;
    color:#FFF;
    font-size:26px;
}
.flavored-top img{
    position:absolute;
    top:150px;
    right:20px;
    width:240px;
    height:auto;
}
.flavored-tea-recipe h3{
    font-size:24px;
    font-weight: 200;
    text-align: center;
    position:relative;
}
.flavored-tea-recipe h3 span{
    display: block;
    width:70%;
    margin:0 auto;
    font-size:30px;
    font-family: "Kiwi Maru", serif;
    font-weight: 400;
    background:#99b7cb;
    border-radius: 20px;
    padding-left:40px;
}
.flavored-tea-recipe h3 img{
    position:absolute;
    left:10%;
    top:0;
    width:120px;
    height: auto;
}
.flavored-tea-recipe > div{
    display: flex;
    padding:40px 0 0 0;
    justify-content:space-between;
    align-items: center;
}
.flavored-tea-recipe > div img{
    width:25%;
    height:auto;
}
.flavored-tea-recipe div div{
    width:70%;
}
.flavored-tea-recipe li{
    border-bottom:1px solid #666;
    font-size:18px;
    display: flex;
    align-items: center;
}
.flavored-tea-recipe li span{
    font-family: "EB Garamond", serif;;
    font-size:76px;
    color:#5a95ae;
    padding-right:20px;
}
.flavor01 li:nth-child(1){
    background:url(../images/recipe/flavored_recipe01_img01.png) no-repeat bottom 10px right 20px;
    background-size:10%;
}
.flavor01 li:nth-child(2){
    background:url(../images/recipe/flavored_recipe01_img02.png) no-repeat bottom 20px right 30px;
    background-size:8%;
}
.flavor01 li:nth-child(3){
    background:url(../images/recipe/flavored_recipe01_img03.png) no-repeat bottom 20px right 20px;
    background-size:10%;
}
.flavor02 li:nth-child(1){
    background:url(../images/recipe/flavored_recipe02_img01.png) no-repeat bottom 10px right 10px;
    background-size:12%;
}
.flavor02 li:nth-child(2){
    background:url(../images/recipe/flavored_recipe02_img02.png) no-repeat bottom 20px right 30px;
    background-size:12%;
}
.flavor02 li:nth-child(3){
    background:url(../images/recipe/flavored_recipe02_img03.png) no-repeat bottom 20px right 30px;
    background-size:12%;
}
.flavor02 li:nth-child(4){
    background:url(../images/recipe/flavored_recipe02_img04.png) no-repeat bottom 20px right 30px;
    background-size:12%;
}
.flavored-tea-recipe > img:first-child{
    width:220px;
    height:auto;
    vertical-align: center;
}
.flavored-tea-recipe > img:last-child{
    width:650px;
    height:auto;
}




/*===============================================
●mobile.css  画面の横幅が640pxまで
===============================================*/

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

    /* how to */

    .howto h2{
        text-align: center;
    }
    .howto h2 img{
        width:100%;
        height:auto;
    }
    .howto h3.leaf,
    .arrange-tea-recipe h3.leaf{
        width:100%;
        margin:30px auto 0 auto;
        padding:3px 0;
        border-radius:15px;
        font-size:17px;
        letter-spacing:2px;
    }
    .howto h3 img,
    .arrange-tea-recipe h3 img{
        position:absolute;
        bottom:0;
        left:20px;
        width:60px; 
        height:auto;
    }
    .howto h3.tea-bag{
        width:100%;
        margin:30px auto 0 auto;
        padding:3px 0;
        border-radius:15px;
        font-size:17px;
        letter-spacing:2px;
    }
    .tea-recipe,
    .arrange-recipe,
    .flavored-tea-recipe{
        width:100%;
        margin:5% auto;
        padding:5%;
        border-radius:16px;
    }
    .recipe01{
        background:url(../images/recipe/illust01.png) no-repeat right 20px top 70px #FFF;
        background-size:22%;
    }
    .recipe02{
        background:url(../images/recipe/illust02.png) no-repeat right 20px top 70px #FFF;
        background-size:22%;
    }
    .recipe03{
        background:url(../images/recipe/illust03.png) no-repeat right 20px top 80px #FFF;
        background-size:23%;
    }
    .recipe04{
        background:url(../images/recipe/illust04_sp.png) no-repeat right 20px top 80px #FFF;
        background-size:22%;
    }
    .recipe05{
        background:url(../images/recipe/illust05_sp.png) no-repeat right 20px top 80px #FFF;
        background-size:22%;
    }
    .recipe06{
        background:url(../images/recipe/illust06_sp.png) no-repeat right 20px top 90px #FFF;
        background-size:28%;
    }
    .recipe07{
        background:url(../images/recipe/illust07.png) no-repeat right 20px top 80px #FFF;
        background-size:25%;
    }
    .tea-recipe img{
        position:inherit;
        top:inherit;
        left:inherit;
        width:100%;
        height:auto;
        margin-top:50px;
    }
    .tea-recipe ol{
        padding-left:0;
    }
    .tea-recipe h5,
    .tea-recipe p.point,
    .tea-recipe p.recommend{
        margin-left:0;
    }
    .tea-recipe h4{
        width:100%;
        margin:0 auto 20px auto;
        font-size:16px;
        border-radius:24px;
    }
    .tea-recipe h5{
        width:100%;
        font-size:17px;
        letter-spacing:3px;
    }
    .tea-recipe p.point{
        width:100%;
        padding-left:10px;
    }
    .tea-recipe p.recommend{
    padding-left:10px;
    font-size:14px;
    }
    .tea-recipe p.sm{
        font-size:12px;
    }
    .tea-recipe li{
        font-size:14px;
        margin:0 0 20px 0;
        width:70%;
    }
    .tea-recipe.recipe06 li{
        margin-bottom:60px;
    }
    p.sm.tr{
        font-size:13px;
        margin-right:50px;
    }

    /* arrange recipe */
    .arrange-top{
        background:url(../images/recipe/bg_arrange.jpg) top left 100%;
    }
    .arrange-top p.tc{
        font-size:20px;
        padding-top:30px;
    }
    .arrange-top h2{
        text-align: center;
        background-image:none;
        font-size:20px;
        padding-left:0;
    }
    .arrange-top h2 span{
        font-size:60px;
    }
    .arrange-top div p{
        padding:20px;
        font-size:18px;
    }
    .arrange-container{
        display: inherit;
        justify-content:inherit;
        box-sizing: border-box;
    }
    .ingredients,
    .step{
        width:100%;

    }
    .ingredients h4{
        margin-top:30px;
    }
    .ingredients .memo{
        background-color: rgba(175, 155, 30, .3);
        padding:15px;
        margin-top:40px;
    }
    .arrange02 .ingredients .memo,
    .arrange04 .ingredients .memo{
        background-color: rgba(124, 135, 128, .3);
    }
    .ingredients .memo h4{
        margin-top:0;
        line-height: 1.2;
    }
    .step h3{
        font-size:16px;
        padding:5px 0;
        border-bottom:1px solid #666;
        margin-top:40px;
    }
    .step div p{
        width:70%;
        margin-top:20px;
    }
    .arrange01 .arrange-title,
    .arrange03 .arrange-title,
    .arrange05 .arrange-title{
        display: inherit; 
        align-items:inherit; 
        position:relative;
    }
    .arrange02 .arrange-title,
    .arrange04 .arrange-title{
        display: inherit; 
        align-items:inherit; 
        position:relative;
        width:100%;
        text-align: center;
    }
    .arrange-title img{
        width:80%;
        height:auto;
        display:block;
        margin:10px auto;
    }
    .arrange02 .arrange-title img{
        width:300px;
    }
    .arrange-title img.item{
        position:inherit;
        right:inherit;
        top:inherit;
        width:90%;
        height:auto;
        margin-top:20px;
    }
    .arrange-title div{
        margin-left:0;
    }
    .arrange-title p{
        font-size:18px;
    }
    .arrange-title p span{
        font-size:17px;
    }
    .arrange01 .arrange-title h3,
    .arrange03 .arrange-title h3,
    .arrange05 .arrange-title h3{
        border-radius:22px;
        min-width:inherit;
        width:100%;
        text-align: center;
        font-size:20px;
    }
    .arrange02 .arrange-title h3,
    .arrange04 .arrange-title h3{
        border-radius:22px;
        min-width:inherit;
        width:100%;
        text-align: center;
        font-size:20px;
    }
    .ingredients li{
        border-bottom:1px solid #666;
        padding:8px 0;
        position: relative;
    }
    .ingredients li span{
        position:absolute;
        right:0;
    }
    .arrange-container .point{
        width:60%;
        border:1px solid #af9b1d;
        padding:10px 15px;
        margin:20px 0;
    }
    .arrange02 .arrange-container .point,
    .arrange04 .arrange-container .point{
        border:1px solid #7c8780;
    }
    .arrange-container .ingredients .point{
        width:80%;
    }
    .arrange-container .ingredients .point h4{
        margin-top:0;
    }
    .arrange-container .point h4{
        line-height:1.2;
        font-size:14px;
    }
    .arrange-container .point p{
        width:100%;
        margin:0;
    }
    .arrange01 .step div:nth-child(1){
        background:url(../images/recipe/arrange_recipe01_img01.png) no-repeat top 90px right 20px;
        background-size:20%;
    }
    .arrange01 .step div:nth-child(2){
        background:url(../images/recipe/arrange_recipe01_img02.png) no-repeat top 90px right 10px;
        background-size:25%;
    }
    .arrange01 .step>div:nth-child(3){
        background:url(../images/recipe/arrange_recipe01_img03.png) no-repeat top 120px right 20px;
        background-size:20%;
    }
    .arrange02 .step div:nth-child(1){
        background:url(../images/recipe/arrange_recipe02_img01.png) no-repeat top 70px right 20px;
        background-size:22%;
    }
    .arrange02 .step div:nth-child(2){
        background:url(../images/recipe/arrange_recipe02_img02.png) no-repeat top 50px right 10px;
        background-size:15%;
        padding-bottom:20px;
    }
    .arrange03 .step div:nth-child(1){
        background:url(../images/recipe/arrange_recipe03_img01.png) no-repeat bottom 0px right 0;
        background-size:40%;
        padding-bottom:70px;
    }
    .arrange03 .step div:nth-child(2){
        background:url(../images/recipe/arrange_recipe03_img02.png) no-repeat top 40px right 10px;
        background-size:15%;
        padding-bottom:20px;
    }
    .arrange03 .step>div:nth-child(3){
        background:url(../images/recipe/arrange_recipe03_img03.png) no-repeat bottom 0px right 20px;
        background-size:25%;
    }
    .arrange03 .step div:nth-child(4){
        background:url(../images/recipe/arrange_recipe03_img04.png) no-repeat bottom 0px right 20px;
        background-size:25%;
    }
    .arrange03 .step>div:nth-child(5){
        background:url(../images/recipe/arrange_recipe03_img05.png) no-repeat bottom 0px right 20px;
        background-size:18%;
    }
    .arrange04 .step div:nth-child(1){
        background:url(../images/recipe/arrange_recipe04_img01.png) no-repeat bottom 0px right 20px;
        padding-bottom:20px;
        background-size:15%;
    }
    .arrange04 .step div:nth-child(2){
        background:url(../images/recipe/arrange_recipe04_img02.png) no-repeat bottom 0px right 20px;
        background-size:18%;
    }
    .arrange04 .step>div:nth-child(3){
        background:url(../images/recipe/arrange_recipe04_img03.png) no-repeat bottom 0px right 0;
        background-size:26%;
    }
    .arrange04 .step div:nth-child(4){
        background:url(../images/recipe/arrange_recipe04_img04.png) no-repeat bottom 0px right 0;
        background-size:27%;
    }
    .arrange04 .step>div:nth-child(5){
        background:url(../images/recipe/arrange_recipe04_img05.png) no-repeat bottom 0px right 20px;
        padding-bottom:20px;
        background-size:15%;
    }
    .arrange05 .step div:nth-child(1){
        background:url(../images/recipe/arrange_recipe05_img01.png) no-repeat bottom 0px right 0;
        padding-bottom:30px;
        background-size:27%;
    }
    .arrange05 .step div:nth-child(2){
        background:url(../images/recipe/arrange_recipe05_img02.png) no-repeat top 100px right 0;
        background-size:27%;
    }
    .arrange05 .step>div:nth-child(3){
        background:url(../images/recipe/arrange_recipe05_img03.png) no-repeat bottom 0px right 0;
        background-size:26%;
    }
    .arrange05 .step div:nth-child(4){
        background:url(../images/recipe/arrange_recipe05_img04.png) no-repeat bottom 0px right 20px;
        background-size:16%;
    }
    .arrange05 .step>div:nth-child(5){
        background:url(../images/recipe/arrange_recipe05_img05.png) no-repeat bottom 0px right 10px;
        background-size:20%;
    }
    .arrange-top img.sp,
    .flavored-top img.sp{
        display: block;
        margin:0 auto 20px auto;
        width:60%;
        height: auto;
    }

    /* Flavored iced tea */

    .flavored-top h2{
        background-image:none;
        padding-top:20px;
        padding-left:0;
        padding-bottom:20px;
        font-size:20px;
        text-align: center;
    }
    .flavored-top h2 span{
        font-size:60px;
        line-height:1;
        margin-left:0;
    }
    .flavored-top div{
        background-color:rgba(90, 150, 175, .7);
    }
    .flavored-top div p{
        padding:20px;
        font-size:18px;
    }
    .flavored-top img{
        position:inherit;
        top:inherit;
        left:inherit;
        width:60%;
        height:auto;
        display: block;
        margin:0 10px 0 auto;
    }
    .flavored-tea-recipe h3{
        font-size:16px;
        position:relative;
        padding-left:20px;
    }
    .flavored-tea-recipe h3 span{
        display: block;
        width:100%;
        margin:0 auto;
        font-size:20px;
        border-radius: 20px;
        padding-left:30px;
    }
    .flavored-tea-recipe h3 img{
        position:absolute;
        left:-10px;
        top:15px;
        width:70px;
        height: auto;
    }
    .flavored-tea-recipe > div{
        display: inherit;
        justify-content:inherit;
        align-items:inherit;
        padding:40px 0 0 0;
    }
    .flavored-tea-recipe > div img{
        width:70%;
        height:auto;
        display: block;
        margin:0 auto;
    }
    .flavored-tea-recipe div div{
        width:100%;
    }
    .flavored-tea-recipe li{
        border-bottom:1px solid #666;
        font-size:16px;
        padding-right:20%;
    }
    .flavored-tea-recipe li span{
        font-family: "EB Garamond", serif;;
        font-size:65px;
        color:#5a95ae;
        padding-right:20px;
    }
    .flavor01 li:nth-child(1){
        background:url(../images/recipe/flavored_recipe01_img01.png) no-repeat bottom 10px right 20px;
        background-size:10%;
    }
    .flavor01 li:nth-child(2){
        background:url(../images/recipe/flavored_recipe01_img02.png) no-repeat bottom 20px right 30px;
        background-size:8%;
    }
    .flavor01 li:nth-child(3){
        background:url(../images/recipe/flavored_recipe01_img03.png) no-repeat bottom 20px right 20px;
        background-size:10%;
    }
    .flavor02 li:nth-child(1){
        background:url(../images/recipe/flavored_recipe02_img01.png) no-repeat bottom 10px right 10px;
        background-size:12%;
    }
    .flavor02 li:nth-child(2){
        background:url(../images/recipe/flavored_recipe02_img02.png) no-repeat bottom 20px right 30px;
        background-size:12%;
    }
    .flavor02 li:nth-child(3){
        background:url(../images/recipe/flavored_recipe02_img03.png) no-repeat bottom 20px right 30px;
        background-size:12%;
    }
    .flavor02 li:nth-child(4){
        background:url(../images/recipe/flavored_recipe02_img04.png) no-repeat bottom 20px right 30px;
        background-size:12%;
    }
    .flavored-tea-recipe > img:first-child{
        width:40%;
        height:auto;
        display: block;
        margin:0 auto 20px auto;
    }
    .flavored-tea-recipe > img:last-child{
        width:100%;
        height:auto;
    }

    
    
}