@charset "UTF-8";

/*
共通　common
*/
html{
    scroll-behavior: smooth;
}
body{
    background-color: #D9D9D9;
    /* margin-top: -80px; */
}
body.display{
    overflow: hidden;
}
main{
    overflow-x: hidden;
}
img{
    display: block;
}
a{
    text-decoration: none;
}
ul,ol{
    list-style: none;
}

/* h2 */
.h2-basic{
    margin-bottom: 16rem;
    position: relative;
}
.h2-basic *{
    position: relative;
    z-index: 10;
    font-weight: normal;
}
.h2-basic div{
    display: inline;
    font-size: 32px;
}
.h2-basic p{
    position: absolute;
    top: 65px;
    left: 60px;
}

/*
header
*/
header{
    display: flex;
    position: fixed;
    z-index: 10000;
    width: 100%;
    padding: 20px 0;
    align-items: center;
    justify-content: space-around;
}
h1{
    display: flex;
}
.logo{
    width: 142px;
    height: 50%;
    margin-right: 10px;
}
.name{
    height: 58px;
    width: auto;
}
.pc_nav ul{
    display: flex;
}
.nav_tag{
    margin: 0 4vw;
}
.nav_tag a{
    color: #fff;
    font-size: 20px;
}
button{
    background-color: #E8DA64;
    color: #111;
    padding: 10px 30px;
    border-radius: 8px;
    border: 3px solid #fff;
    font-size: 20px;
    transition-duration: .3s;
}
button:hover{
    background-color: #fff;
    border: 3px solid #E8DA64;
    transition-duration: .3s;
}

/*
main
*/
/* mv */
.MV_img{
    width: 100%;
    height: 100%;
}
.top_news{
    background-color: #D9D9D9;
    padding: 10px 30px;
    border-radius: 8px;
    position: absolute;
    top: 138px;
    right: 50px;
}
.top_news *{
    padding: 10px 0;
}
.top_news h3{
    position: relative;
    border-bottom: 1px solid #111;
}
h3 span{
    color: #CC6709;
    margin-right: 5px;
}

/*
banner
*/
.banner img{
    width: 100%;
    margin: 15px 0;
}
.banner p{
    text-align: center;
    display: none;
}


/* NEWS */
.news{
    display: flex;
    background-color: #fff;
    justify-content: space-around;
    position: relative;
    padding: 5rem;
    margin: 5rem 0 2.5rem 0;
    left: 60px;
    border-radius: 20px 0 0 20px;
}
h2{
    font-family: "Bilbo Swash Caps";
    
}
h2::before{
    content: "";
    display: block;
    background-color: #D9D9D9;
    position: absolute;
    width: 110px;
    height: 110px;
    border-radius: 100%;
    z-index: 1;
    top: -37px;
    left: -11px;
    
}
h2::after{
    content: "";
    display: block;
    background-color: #EFD0BF;
    position: absolute;
    width: 75px;
    height: 75px;
    border-radius: 100%;
    top: 47px;
    left: 47px;
    z-index: 0;
}
h2 span{
    color: #CC6709;
}
.btn a{
    color: #111;
    display: block;
    background-color: #E3E3E3;
    padding: 1rem 4rem;
    width: 250px;
}
.news_date{
    display: flex;
    margin-bottom: 1rem;
}
.news_date :nth-child(2){
    margin-left: 6rem;
}
.news_main{
    position: relative;
}
.news_main .news_div-2{
    border-bottom: 10px solid #EFD0BF;
}
.news_div{
    border-top: 10px solid #EFD0BF;
    padding: 3rem 16rem 3rem 3rem;
}

/* MENU */
.menu{
    background: #fff;
    position: relative;
    padding: 5rem;
    margin: 5rem 0 2.5rem 0;
    background-image: url(img/background_pasta.jpg);
    background-size: initial;
    background-repeat: no-repeat;
    background-color:rgba(255,255,255,0.8);
    background-blend-mode:lighten;
    right: 60px;
    border-radius: 0 20px 20px 0;
}
.menu_discription{
    padding-top: 5rem;
    width: 620px;
}
.menu_cat,.menu_div{
    display: flex;
    justify-content: space-around;
}
.menu_h2{
    width: 10rem;
    margin-bottom: 10rem;
}
.menu_div{
    margin-bottom: 7.5rem;
    align-items: center;
    border-top: 26px solid #EFD0BF;
}
.menu_img{
    display: block;
    width: 40vw;
    height: auto;
}
.menu_diteil{
    width: 420px;
    text-align: center;
}
.menu_diteil *{
    margin: 30px 0;
}
.menu_diteil_description{
    text-align: left;
}

/* reservation */
.reservation{
    background: #fff;
    position: relative;
    padding: 5rem;
    margin: 5rem 0 2.5rem 0;
    background-image: url(img/background_pasta.jpg);
    background-size: initial;
    background-position-y: center;
    background-repeat: no-repeat;
    background-color:rgba(255,255,255,0.8);
    background-blend-mode:lighten;
    left: 60px;
    border-radius: 20px 0 0 20px;
}
.reservation .reser_dis,.btn{
    display: grid;
    place-content: center;
}
.reservation .btn{
    margin-top: 5rem;
}
.reservation .btn a{
    width: 30rem;
    text-align: center;
}
.reser_h2{
    margin-left: 100px;
    margin-bottom: 5rem;
}
.reser_dis{
    width: 100%;
}
.reser_dis p{
    margin: 5px 0;
    font-size: 14px;
    text-align: center;
}
.reser_info{
    margin-bottom: 5rem;
}
.reser_info p{
    font-size: 20px;
}

/* INFO */
.info{
    background-color: #fff;
    justify-content: space-around;
    position: relative;
    padding: 5rem;
    margin: 5rem 0 7% 0;
    right: 60px;
    border-radius: 0 20px 20px 0;
}
.info_h2{
    margin-bottom: 8rem;
    margin-left: 100px;
}
.info_cat{
    position: relative;
    padding: 0 100px;
}
.info_img_box{
    position: relative;
}
.info_image{
    width: 60vw;
}
.info_dis{
    background: #D9D9D9;
    position: absolute;
    line-height: 30px;
    padding: 5rem;
    bottom: 0px;
    right: 10%;
}
/*
footer
*/
.foo_top_line{
    display: block;
    background: #EFD0BF;
    height: 22px;
}
footer{
    display: flex;
    justify-content: space-between;
    padding: 5rem 5rem 5rem;
    background: #fff;
    position: relative;
}
footer a{
    color: #111;
    text-decoration: none;
}
footer ul ul{
    display: flex;
    margin-top: 6em;
}
footer li{
    margin-right: 2rem;
}
.footer_others span img{
    width: 200px;
    opacity: 75%;
    margin-left: auto;
}
.footer_credit{
    display: flex;
    justify-content: right;
    align-items: last baseline;
}
.footer_credit img{
    width: 142px;
    margin-right: 2rem;
}

/* others */
.menu h2::after,.info h2::after{
    left: 167px;
}
.menu h2::before,.info h2::before{
    left: 111px;;
}
.menu .h2-basic div,.info .h2-basic div{
    left: 120px;
}
.menu .h2-basic p,.info .h2-basic p{
    left: 180px;
    width: 10rem;
}
.news_main::before,.reservation::after{
    content: '';
    display: block;
    background-image: url(img/pasta_illust-02.png);
    background-size: 100%;
    opacity: 75%;
    position: absolute;
    width: 180px;
    height: 180px;
    bottom: -3rem;
    right: 3rem;
}
.reservation::after{
    bottom: 0;
    right: 5rem;
}
/* humbergermenu */
.fixed_pc{
    display: flex;
}
.sp_nav,.sp_nav_div{
    display: none;
}

/*
pop
*/
.pop{
    display: none;
}
.pop.display{
    overflow: hidden;
    width: 40vw;
    display: block;
    position: relative;
    top: 18rem;
    left: 30vw;
    background: #fff;
    padding: 10vw;
}
.pop *{
    text-align: center;
}
.popup_none{
    margin-top: 20px;
}
.BGcolor{
    display: none;
}
.BGcolor.display{
    overflow: hidden;
    display: block;
    background: rgba(125, 125, 125, 0.8);
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    z-index: 9999;
}

/* スマホ版 */
@media screen and (max-width : 650px){
    /* header */
    .fixed{
        justify-content: space-between;
        padding: 0;
    }
    .logo{
        width: 132px;
        height: auto;
    }
    .pc_nav{
        display: none;
    }
    button{
        border-radius: 0;
        padding: 10px 5px;
        font-size: 14px;
    }
    .top_news{
        position: relative;
        top: 0;
        right: 0;
        background: #fff;
    }
   /* main */
    .banner p{
        display: block;
    }

    .news,.menu,.reservation,.info{
        left: 0;
        right: 0;
        border-radius: 20px;
        padding: 20px;
    }
   .h2-basic{
        margin-left: 0px;
        margin-bottom: 0rem;
        top: -55px;
   }
   .h2-basic::before{
        top: -43px;
        left: 0px;
   }
   .h2-basic::after{
        top: 45px;
        left: 54px;
   }
   .menu h2::before,.info h2::before{
        left: 0px;
   }
   .menu h2::after,.info h2::after{
        left: 60px;
   }
   .menu .h2-basic div, .info .h2-basic div {
        left: 0px;
   }
   .menu .h2-basic p, .info .h2-basic p {
        left: 60px;
        width: 10rem;
    }
    .news,.menu_div,.info{
        display: block;
    }
    .info_dis {
        position: relative
    }
    .news{
        padding-bottom: 5rem;
    }
    .news_div{
        padding: 48px;
    }
    .news{
        margin-bottom: 7rem;
    }
    .news_cat .btn{
        position: relative;
        bottom: -28rem;
        overflow: hidden;
    }
    .btn a{
        width: 569px;;
        text-align: center;
    }
    .menu_cat{
        display: block;
    }
    .menu_discription {
        width: 75%;
        margin: 0 auto;
    }
    .menu_div,.menu_img,.menu_diteil{
        margin: 0 auto;
        width: 40vh;
    }
    .reser_dis {
        margin-top: 5rem;
    }
    .info_cat{
        margin-top: 5rem;
        padding: 0;
    }
    .info_dis{
        margin-top: 3rem;
        padding: 1rem;
        right: 0;
    }
    .info_image{
        width: 100%;
    }
    footer{
        padding: 1rem;
    }
    footer ul ul li{
        margin-top: 1rem;
    }
    footer ul ul:nth-child(even){
        display: none;
    }
    footer,footer ul ul,.footer_credit{
        display: block; 
    }
    footer ul ul{
        margin-top: 1rem;
    }
    .sp_nav{
        display: block;
        width: 50px;
        background: #fff;
    }
    .line{
        background: #000;
        display: block;
        width: 35px;
        height: 2px;
        margin: 11px auto;
        transition-duration: .4s;
    }
    /* ハンバーガーメニュー */
    .sp_nav.show .line:nth-of-type(1) {
        /*openのとき、上の線を右斜めにする*/
        top: 10px;
        transform: translateY(13px) rotate(45deg);
        transition-duration: .4s;
    }
    .sp_nav.show .line:nth-of-type(2) {
        /*真ん中の線を消す*/
        opacity: 0;
    }
    .sp_nav.show .line:nth-of-type(3) {
        /*下の線を左斜めにする*/
        top: 22px;
        transform: translateY(-13px) rotate(-45deg);
        transition-duration: .4s;
    }
    .sp_nav_div{
        display: block;
        position: absolute;
        top: 50px;
        right: -200px;
        background: #fff;
        padding: 10px 40px;
        transition-duration: .4s
    }
    .sp_nav_li a{
        color: #000;
    }
    .sp_nav_div.show{
        transform: translateX(-190px);
        transition-duration: .4s;
    }

    .pop.display{
        overflow: hidden;
        width: 66vw;
        display: block;
        position: relative;
        top: 18rem;
        left: 15vw;
        background: #fff;
        padding: 10vw;
    }
};