@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');

#royal_milk_tea .transparent .container-inner{
    padding:0;
    width:100%;
    background:url(../images/royal_milk_tea/main_pc.jpg) no-repeat left bottom;
    background-size:55%;
}
#royal_milk_tea .container-inner section{
    position:relative;
}

/*-------------------------------------- Royal Milk Tea */

#royal_milk_tea .intro{
    background-color: #b6a014;
    color:#FFF;
    padding:30px 0;
}
#royal_milk_tea .intro p{
    font-size:26px;
    text-align:center;
}
#royal_milk_tea .intro p span{
    font-size:21px;
}
#royal_milk_tea h2{
    width:80%;
    margin:20px auto;
    font-family: 'Garamond', serif;
    font-weight:lighter;
    letter-spacing: .1em;
    line-height: 1.3;
    color:#b6a014;
    font-size:120px;
    text-align:center;
}
#royal_milk_tea h2 span{
    font-family: YuGothic, "Noto Sans JP", "游ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Helvetica, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", serif;
    font-weight: 400;
    letter-spacing:0;
    display:block;
    text-align:right;
    font-size:24px;
    color:#444444;
}
.point01{
    background:rgba(180, 160, 20, .7);
    position:absolute;
    width:55%;
    top:450px;
    right:0;
    padding:30px 40px 30px 60px;
    color:#FFF;
    font-size:20px;
}
.point01 p.num, .point02 p.num{
    font-family: 'Garamond', serif;
    font-weight:lighter;
    color:#444444;
    font-size:90px;
    position:absolute;
    top:-80px;
    left:50px;
}
.point02{
    background:rgba(180, 160, 20, .7);
    position:absolute;
    width:55%;
    top:930px;
    left:0;
    padding:30px 40px 30px 60px;
    color:#FFF;
    font-size:20px;
}
#royal_milk_tea .content{
    padding:420px 30px 20px 0;
}
#royal_milk_tea h3{
    font-size:36px;
    color:#b6a014;
    text-align:right;
    font-weight:400;
}
#royal_milk_tea h4{
    color:#b6a014;
    padding-left:60%;
    font-weight:400;
    font-size:22px;
    margin:20px 0;
}
#royal_milk_tea .content p{
    padding-left:60%;
    font-size:18px;
}
#royal_milk_tea .content p.tr img{
    margin-top:60px;
    width:180px;
    height:auto;
}



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

@media screen and (max-width: 640px) {
    #royal_milk_tea .transparent .container-inner{
        background-image:none;
    }
    #royal_milk_tea .intro{
        padding:30px 0;
    }
    #royal_milk_tea .intro p{
        font-size:24px;
        font-weight:400;
    }
    #royal_milk_tea .intro p span{
        font-size:17px;
        font-weight:300;
    }
    #royal_milk_tea h2{
        width:90%;
        margin:20px auto;
        font-size:60px;
    }
    #royal_milk_tea h2 span{
        font-size:21px;
    }
    .point01{
        background-color:#b6a014;
        position:inherit;
        width:100%;
        top:inherit;
        right:inherit;
        padding:20px 25px;
        font-size:18px;
    }
    .point01 p.num, .point02 p.num{
        font-size:80px;
        position:absolute;
        top:-30px;
        left:20px;
    }
    .point02{
        background-color:#b6a014;
        position:inherit;
        width:100%;
        top:inherit;
        left:inherit;
        padding:20px 25px;
        font-size:18px;
    }
    #royal_milk_tea .content{
        padding:20px;
    }
    #royal_milk_tea h3{
        font-size:24px;
        text-align:left;
    }
    #royal_milk_tea h4{
        padding-left:0;
        font-size:21px;
        margin:20px 0;
    }
    #royal_milk_tea .content p{
        padding-left:0;
        font-size:16px;
    }
    #royal_milk_tea .content p.tr img{
        margin-top:30px;
        width:120px;
        height:auto;
    }
    
}