@charset "UTF-8";

/* 共通CSS PC版 */
p{
    font-size: 16px;
    font-family: "Zen Maru Gothic", serif;
    font-weight: medium;
    line-height: 1.5rem;
}
.white{
    color:#ffffff;
}
.w-container{
    width: 1200px;
    max-width: 100%;
}

/* 共通CSS PC版*/

/* ヘッダー　PC版 */
header{
    width: 100%;
    height: 80px;
    background-image:url("../img/common/header-pc-height-80px.png");
    background-repeat: repeat-x;
    background-position-x: center;
    position: fixed;
    z-index: 10000;
}

/* 予約お問い合わせ　PC版 */
.header-reservation{
    width: 1366px;
    max-width: 100%;
    display: flex;
    justify-content: flex-end;
    margin: 0 auto;
    align-items: center
}
.header-reservation-text p{
    margin-right: 10px;
}
.header-reservation img{
    width:24px;
    height:24px;
    margin-left: 8px;
    margin-right: 1px;
}
.header-reservation-number{
    font-size: 24px;
    margin-right: 5px;
}
/* 予約お問い合わせ　PC版 */

/* ヘッダーナビゲーション PC版*/
.header-navi-area{
    margin: 0 auto;
    display: flex;
    align-items: center;
    position: relative;
    height: 56px;
}
.header-navi{
    width:100%;
    height: 100%;
}
.header-navi nav{
    height: 100%;
}

.header-navi ul{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5%;
    margin: auto -5%;
}
.header-navi a{
    /* margin-top: 30px;
    margin-bottom: 20px; */
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap:5px;
}

.header-nav-ul :hover{
    text-shadow:0px 4px 3px #dfbf68;
}

.header-navi p{
    font-size: 20px;
}
.shogetu-logo2,.hera-icon,.access-logo{
    width: 35px;
    height: auto;
}
.shogetsu-logo-list{
    width: 80px;
    height: auto;
    margin-bottom:10px;
}
.menu-logo{
    width:30px;
    height:auto;
}
.nav-introduce-area{
    display: flex;
    align-items: center;
    flex-direction: column;
}
.nav-introduce-list{
    width:120px;
}
.nav-introduce-text{
    padding-right: 20px;
}
.nav-concept-list{
    margin-right: 8%;
}
.nav-menu-list{
    width:115px;
    margin-left: 8%;
}

.header-btn{
    display: none;
}

.header-hide-menu{
    display: none;
    width:100%;
    height: 500px;
    position:absolute;
    top:0;
    left: 0;
    background-color: #dfbf68;
    border-radius: 0px 0px 80px 80px;
}
.close-button{
    width:40px;
    height:auto;
    margin-top: 5%;
    margin-left:85%;
}
.header-hide-area{
    display:flex;
    flex-direction: column;
    align-items: center;
}
.header-hide-area a{
    display: flex;
    gap:15px;
}
.header-hide-area p{
    color:#ffffff;
    font-size: 20px;
}

.header-hide-area nav{
    margin-top: 5%;
    margin-bottom: 10%;
}
.header-hide-area ul{
    display: flex;
    flex-direction: column;
    gap:20px;
}

.header-hide-phone{
    display: flex;
    justify-content: center;
    gap:5px;
    margin-top: 10px;
}
.header-hide-reservation p{
    font-size: 16px;
}
.header-hide-phone p{
   font-size: 24px;
}
.header-hide-phone img{
    width:24px;
    height:24px;
}

/* ヘッダーナビゲーション　PC版 */
/* ヘッダー　PC版 */

/* フッター PC版*/

.fa-3xl {/*インスタロゴ大きさ微調整*/
    font-size: 2.3em;
    line-height: 1.03125em;
    vertical-align: -0.1875em;
}

footer{
    padding-top:10px;
    background-color: #172244;
    display: flex;
    flex-direction: column;
    align-items: center;
    color:#ffffff;
    gap:5px;
}
.footer-logo-area{
    display: flex;
    justify-content: space-between;
}
.footer-logo-area::before{
    display: block;
    content: "";
    width: 70px;
    height: 70px;
}
.footer-logo-area img{
    width: 120px;
    height: auto;
    padding-top: 20px;
}

.footer-button-area{
    display: flex;
    width:70px;
    height: 70px;
    background-color: #8C0000;
    border-radius: 80px;
    font-size: 30px;
    justify-content: center;
    align-items: center;
}


.footer-number{
    font-size: 24px;
}

small{
    margin-top: 20px;
    font-size: 10px;
}

footer::before{
    content: url(../img/common/okonomiyaki_usagi.png);  
    -webkit-animation: footer-mouse 7s linear normal infinite;
    animation: footer-mouse 7s linear normal infinite;
    position: absolute;
    z-index: -1;
    
}

@keyframes footer-mouse {
    0% {
        -webkit-animation-timing-function: cubic-bezier(0.65, 1.8, 0.5, 0.8);
        animation-timing-function: cubic-bezier(0.65, 1.8, 0.5, 0.8);
        transform: translateY(0.2rem) rotateY(180deg) 
    }

    10% {
        transform: translateY(-10.3rem) rotateY(180deg) 
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.05, 0.22, 0.99);
        animation-timing-function: cubic-bezier(0.55, 0.05, 0.22, 0.99);
        transform: translateY(-10.3rem) rotateY(180deg) 
    }

    80% {
        transform: translateY(0.2rem) rotateY(180deg) 
    }

    100% {
        transform: translateY(0.2rem) rotateY(180deg) 
    }
}
/* フッター PC版*/

/* スマホ版 */



@media(max-width: 912px){
    header{
        background-image:url("../img/common/header\ sh\(768-820\).png");
    }
    .header-reservation{
        display: none; 
     }
     .header-navi li{
         display: none;
     }
     .header-navi .shogetsu-logo-list{
         display: block;
         margin-top: 40px;
     }
     .header-btn{
         display: block;
         width: 40px;
         height: auto;
         margin: 10px 10px;
     }
     .header-navi-area::before{
         content:"";
         width: 50px;
         height: 50px;
     }
     .header-navi-area{
         position: relative;
     }
     .is-show{
         display: block;
         z-index: 99999999;
     }
}


@media(max-width: 767px){
    /* ヘッダー スマホ版 */
    header{
        background-image:url("../img/common/header-sh-height-80px.png");
    }
    
     /* ヘッダー スマホ版 */
}


/* スマホ版 */