/* PC/SP表示切替  */
.only_pc{
    display:none;   
}
.only_sp{
        display:block;
    }

@media(min-width:1200px){
    .only_pc{
        display:block;
    }
    .only_sp{
        display:none;
    }
}
    .only_pc2{
        display:none;
    }
    .only_sp2{
        display:block;
    }

@media(min-width:768px){
    .only_pc2{
        display:block;
    }
    .only_sp2{
        display:none;
    }
}

 @media screen and (max-width: 480px) {
    .br-pc {
      display: none;
    }

    .br-sp {
      display: block;
    }
  }

  @media screen and (min-width: 481px) {
    .br-pc {
      display: block;
    }

    .br-sp {
      display: none;
    }
  } 

body{
    font-family: "Zen Maru Gothic", sans-serif;
    font-size:12px;
    letter-spacing: 1;
    }

@media(min-width:768px){
    body{
        font-size:14px;
    }
}
.container{
    width:100%;
    overflow: hidden;
}


/*================================
header start
================================*/
/*header*/
    .header-button{
        position: absolute;
        background: #FFF;
        width: 50px;
        height:50px;
        border-radius: 50%;
        margin: 15px;
        z-index: 100;       
    }

    /* @media(min-width:768px){
    .header-button{
        margin: 20px;
    }
    } */

    @media(min-width:768px){
    .header-button{
        margin: 30px;
        width: 80px;
        height: 80px;
    }
    }



    .sp_icon{
        padding: 10px 0px 2px 10px;
        font-size: 30px !important;
    }


 @media(min-width:768px){
    .sp_icon{
        font-size: 50px !important;
    }
    }

 @media(min-width:1200px){
    .sp_icon{
        padding-top: 15px;
        padding-left: 15px;
    }
    }

/*================================
navi menu start
================================*/	

    @media (min-width: 768px){
        .drawer-menu {
            width: 100%;
            max-width: 100%!important;
        }
    
        .drawer-nav {
            max-width:485px;
        }    
    }

    @media (min-width: 768px){
        .menu-close.active {
            left: 35rem;
        }
    }

/********** overlay***********/
    .drawer-overlay {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 500;
        display: none;
    }

    .drawer-overlay.active {
        display: block;
    }

/******* navi main********/
    .drawer-nav {
        width: 75%;
        height: 100%;
        top: 0;
        left: 0;
        position: fixed;
        z-index: 550;
        display: block;
        transition: 0.4s;
        transform: translateX(-100%);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .drawer-nav.active {
        transform: translateX(0);
    }

/***** navi contents******/

    .drawer-menu {
        width: 100%;
        background: #fff;
        height: 100%;
        overflow-y: auto;

    }

    .drawer-menu-item {
        width: 100%;
        border-bottom: 1px solid #eee;
    }

    .drawer-menu-item a {
        display:block;
        padding:25px 15px;
        width: 80%;
        justify-content: center;
        align-items: center;
        position: relative;
        color:#333;
        text-decoration: none;
    }

    @media(min-width:768px){
    .drawer-menu-item a {
        font-size:1.2rem;
        padding:25px 35px;
        }
    }


    @media(min-width:1200px){
    .drawer-menu-item a {
        padding:25px 50px;
        width: 70%;
        }
    }
  

    .drawer-menu-item a:after {
        position: absolute;
        right: 1rem;
        top: calc(50% - 0.4em);
        content: '';
        width: 0.6em;
        height: 0.6em;
        border-top: solid 1px #999999;
        border-right: solid 1px #999999;
        transform: rotate(45deg);
    }

    .drawer-menu-item:first-child a {
            margin-top:50px;
    }

    @media(min-width:1200px){
        .drawer-menu-item:first-child a {
            margin-top:120px;
      } 
    }


/******navi close button******/
    .menu-close {
        display: none;
    }

    .menu-close.active{
        display:block;
        position: fixed;
        right: 1.8rem;
        top: 1.5rem;
        width: 3rem;
        height: 3rem;
        border-radius: 100%;
        background-color: #fff;
        z-index:550;
    }

    @media(min-width:768px){
        .menu-close.active{
            width: 70px;
            height: 70px;
        }
    }

    
    @media(min-width:1200px){
        .menu-close.active{
            left: 0;
            top: 0;
            margin:30px;
            width: 80px;
            height: 80px;
            z-index:999;
        }
    }


/*================================
navi menu end and header end
================================*/

/*====================================
page-top start
====================================*/
        
#float-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 99990;
}

#float-bottom-in {
    position: absolute;
    right: 10px;
    bottom: 70px;
}

.btn-pagetop a {
    position: relative;
    overflow: hidden;
    text-align: left;
    text-indent: -9999rem;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(153,153,153,0.9);
}

.btn-pagetop a:before {
    position: absolute;
    left: 37.5%;
    top: 45%;
    content: '';
    width: 25%;
    height: 25%;
    border-top: solid 1px #ffffff;
    border-right: solid 1px #ffffff;
    transform: rotate(-45deg);
}


/*====================================
page-top end
====================================*/

/*====================================
footer start
====================================*/
.footer{
    background-image: linear-gradient(#fffffc, #ffe189 99%);
    padding: 100px 20px 30px;
}

.logo2{
    background: url(logo4.png) no-repeat;
    text-indent: -9999px;
    height: 90px;
    display: block;
    margin:20px auto 10px;
    background-size: contain;
    background-position: center center;
    width: 200px;
}

@media(min-width:768px){
.logo{
    height: 110px;

}    
}
.button a{
    display: block;
    width:fit-content;
    margin:40px auto 0px;
    text-align: center;
    font-family: "Cinzel", serif;
    color:#FFF!important;
    padding: 10px 50px;
    letter-spacing: 1.1;
    background: #ffe189;
    color: #FFF;
    border-radius: 72px;
    font-size: 15px;
    font-weight:bold;
}

@media(min-width:1200px){
.button a{
    font-size: 20px;    

}    
}

.button a:visited{
    color:#FFF!important;
}


.shopinfo {
    display: grid;
    grid-template-columns: auto 1fr;
    row-gap: 5px;
    column-gap: 10px;
    width:90%;
    margin:40px auto;
    color:#888;
    font-family: "Zen Maru Gothic", sans-serif;
}

@media(min-width:1200px){
.shopinfo {
    width:50%;
}    
}

.shopinfo dt {
  font-weight: 400;
  white-space: nowrap;
}

.shopinfo dd {
  margin: 0; 
}

@media(min-width:1200px){
.map{
    width:50%;
    display:block;
    margin:0px auto;
}
}

.footer-copyright{
    background:#ffe189;
    padding: 12px 0;
    color:#888;
    text-align: center;
    font-size:10px;
}

@media(min-width:1200px){
.footer-copyright{
    font-size:13px;
}
}

/*====================================
footer end
====================================*/

/*appear start*/
.appear{
    opacity: 0;
}
.appear.on-animated{
    animation-name:appearAnime;
    animation-duration:1s;
    animation-delay:0.5s;
    animation-fill-mode:forwards;
}
@keyframes appearAnime{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;  
    }
}

/* jinwari */

.jinwari{
    opacity: 0;
}

.jinwari.on-animated {
    opacity: 1;
    -webkit-mask-image: linear-gradient(135deg, rgba(0, 0, 0, 1) 33.3%, rgba(0, 0, 0, 0) 66.6%);
    mask-image: linear-gradient(135deg, rgba(0, 0, 0, 1) 33.3%, rgba(0, 0, 0, 0) 66.6%);
    -webkit-mask-size:300% 300%;
        mask-size:300% 300%;
    -webkit-animation: jinwari 3s linear forwards;
    animation: jinwari 3s linear forwards;
} 
@-webkit-keyframes jinwari {
    0% { -webkit-mask-position: 100% 100%; mask-position: 100% 100%; }
    100% { -webkit-mask-position: 0% 0%; mask-position: 0% 0%; }
}
@keyframes jinwari {
    0% { -webkit-mask-position: 100% 100%; mask-position: 100% 100%; }
    100% { -webkit-mask-position: 0% 0%; mask-position: 0% 0%; }
}

/*left start */    
.left{
    opacity:0;
}
.left.on-animated{
    animation-name:LeftAnime;
    animation-duration:1s;
    animation-delay: 0.5s;
    animation-fill-mode:both;
}
@keyframes LeftAnime{
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}
/*right start */    
.right{
    opacity:0;
}
.right.on-animated{
    animation-name:RightAnime;
    animation-duration:1s;
    animation-delay: 0.5s;
    animation-fill-mode:both;
}
@keyframes RightAnime{
    0% {
        opacity: 0;
        transform: translateX(20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

/*downup start */    
.updown{
    opacity:0;
}
.updown.on-animated{
    animation-name:Updown;
    animation-duration:1.5s;
    animation-delay: 0.5s;
    animation-fill-mode:both;
}
@keyframes Updown{
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

.linegrow{
    opacity: 0;
}
.linegrow.on-animated{
    animation-name:lineGrow;
    animation-duration:1.5s;
    animation-delay:1s;
    animation-fill-mode: forwards;
    transform: scaleX(0);    /* 初期状態：横幅ゼロ */
    transform-origin: left; 
}
@keyframes lineGrow{
    0% {
        transform: scaleX(0);
        opacity: 0;
    }
    100% {
        transform: scaleX(1);
        opacity: 1;  
    }
}