@charset "UTF-8";


body{font-family:'Noto Serif TC', serif,'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
}


/*ナビ*/
#menu ul{
/*    横並び*/
    display:flex;
/*    折り返しの設定*/
    flex-wrap:wrap;
    list-style:none;
    
    
}

#menu ul li{
   
    width: 49%;
    color:#fff;
    margin:0.5%;
    padding:15px;
    border-radius:4px;
    background:#60B99A;
    box-sizing:border-box;
}

#menu{
    margin:2px auto;
    
}

#menu ul li a{
    text-decoration:none;
    color:white;
    display:block;
    
}

#menu ul li a:hover{
    color:yellow;
    background-color:;
}


/*ナビ、ここまで*/







/*スライド*/
#slideshow {
   
   position: relative;
   width:  100%; /* 画像の横幅に合わせて記述 */
   height:65vw; /* 画像の高さに合わせて記述 */
}
#slideshow img {
    width:100%;
   position: absolute;
   top: 0;
   left:0;
   z-index: 8;
   opacity: 0.0;
}
#slideshow img.active {
   z-index: 10;
   opacity: 1.0;
}
#slideshow img.last-active {
   z-index: 9;
}
/*スライドここまで*/
.mainimage{
    position:relative;
}

.slidecopy{
    
    display:block;
    position:absolute;
    margin:0 auto;
    z-index:10;
    bottom:65%;
    left:2%;
    right: 7%;
    
    

    
    
}



.slidecopy img{
    width:75%;
}


/*
.clearfix:after{
    content:"";
    clear:both;
    display:block;
}
*/


h4{
    padding:0.2em 0;
    margin:0.5em 0;
    font-size:1.3em;
    border-bottom:solid 3px #60B99A;
}


h3{
    padding:0.25em 0.5em;
    color:#494949;
    background:transparent;
    border-left:solid 5px orange;
    margin-top:1em;
}

h5{
    color:#60B99A;
    font-size:28px;
}


.rightbox{
  
    text-align:center;
    padding:5px;
    margin:px;
}




#reservation a{
 color:white;   
}



.button{
    border:1px solid coral;
    border-radius:20px;
    background-color:coral;
    padding:20px;
    margin:20px auto;
    text-align:center;
    width:15em;
    
    
}

#reserv a:hover{
    color:yellow;
    
}


.fbox{
    height:50px;
    background:gray;
    color:white;
    text-align:center;
}

#link{
margin-top:10px;    
}


#link a{
   
    display:block;
    padding:10px;
    text-decoration:none;
   
    color:orange;
    
}

#link a:hover{
color:yellow;    
}

/*
#link img{
    display:block;
    position:absolute;
    margin-left:20%;
    margin-bottom:px;
    
}
*/

#link img{
    position:relative;
    top:10px;
    right:5px;
}





/*PC対応*/
@media all and (min-width:768px){
    
    body{
        width:1024px;
        margin:0 auto;
    }
    
    #menu ul{
    display:flex;
    justify-content:space-between;
    list-style:none;
    
    
}

#menu ul li{
    width:24%;
    color:#fff;
    margin:px;
    padding:15px;
    border-radius:4px;
    background:#60B99A;
}
    
    #slideshow {
   
   position: relative;
   width:  100%; /* 画像の横幅に合わせて記述 */
   height:700px; /* 画像の高さに合わせて記述 */
}
    
.leftbox{
    float:left;
    width:700px;
    }
    


.rightbox{
   display:block;
    text-align:;
    padding:50px 0 0 0;
    margin:;
   
}


#reservation{
    margin-bottom:50px;
    
    }
    
    
#reserv{
   display:flex;
    justify-content:space-between;
    padding:20px 70px;
    
    }
    
    
footer{
    clear:both;
}

.slidecopy{
    display:block;
    position:absolute;
    z-index:10;
    left:15px;
    right:50px;
    top:1px;
}

.slidecopy img{
    width:700px;
    
}

    
    
}