@charset "utf-8";
/* CSS Document */

/* ---------------------------------------------------------------------------------------------

   Visual-wrap

--------------------------------------------------------------------------------------------- */
.menu-visual-wrap{
    width: 100%;
}

.menu-visual{
    position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
    background-image: url("../images/menu-visual.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    /*margin-top: 2%;*/
}

.centerBox{
    position: absolute;
    top: 35%;
    left: 0;
    z-index: 10;
    width: 100%;
}
.centerBox h1{
    width: 700px;
    margin: 0 auto;
}
.centerBox h1 img{
    width: 100%;
    height: auto;
}

@media screen and (max-width:700px) {

.menu-visual {
  height: 75vh;
}
    
.centerBox{
    top: 40%;
}
    
.centerBox h1{
    width: 90%;
}
}

@media screen and (max-width:500px) {
    
.centerBox{
    top: 42.5%;
}
}


/* ---------------------------------------------------------------------------------------------

   Guid（案内）

--------------------------------------------------------------------------------------------- */
#guid{
    position: relative;
}

#guid .guid-wrap{
    text-align: center;
}

.guid-wrap{
    padding: 15px;
    border: 4px double #fff;
}

#guid .pour{
    position: absolute;
    top: 0;
    left: 0;
    width: 1000px;
    z-index: 5;
}
#guid .pour img{
    width: 100%;
    height: auto;
    opacity: 0.3;
}

@media screen and (max-width:1200px) {

#guid .pour{
    width: 90%;
}
}


/* ---------------------------------------------------------------------------------------------

   Menu（ドリンクメニュー）

--------------------------------------------------------------------------------------------- */
.menu-wrap{
    width: 100%;
    padding: 65px 5% 75px 5%;
    box-shadow: 0 0 5px #000;
}

.menu-list-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}
.menu-list-wrap .list{
    width: 47.5%;
}

.menu-list-wrap .list h3{
	font-size: clamp(20px, 3vw, 24px);
    border-bottom: 4px double #e9e4d4;
    text-align: left!important;
    margin-bottom: 15px;
}

.menu-list-wrap .list dl{
    border-bottom: 0.5px solid #999;
    padding: 10px 0;
}
.menu-list-wrap .list dl.last{
    border-bottom: 0;
}

.menu-list-wrap .list dl dt{
    float: left;
    color: #fff;
	font-size: clamp(12px, 3vw, 14px);
    text-shadow: 0 0 5px #000,0 0 5px #000,0 0 5px #000;
}

.menu-list-wrap .list dl dt .text-jp{
	font-size: clamp(10px, 3vw, 12px);
    color: #ccc!important;
    text-shadow: 0 0 5px #000,0 0 5px #000,0 0 5px #000;
}

.menu-list-wrap .list dl dt .small{
	font-size: clamp(10px, 3vw, 12px);
    color: #ccc!important;
    color: #fff;
    text-shadow: 0 0 5px #000,0 0 5px #000,0 0 5px #000;
}

.menu-list-wrap .list dl dt .large{
	font-size: clamp(16px, 3vw, 18px);
    color: #ccc!important;
    color: #fff;
    text-shadow: 0 0 5px #000,0 0 5px #000,0 0 5px #000;
}

.menu-list-wrap .list dl dd{
    float: right;
    color: #fff;
	font-size: clamp(16px, 3vw, 18px);
	font-family: 'Ibarra Real Nova', serif;
    font-weight: normal;
    /*text-shadow: 0 0 5px #000,0 0 5px #000,0 0 5px #000;*/
    letter-spacing: 0.1em;
}

.menu-list-wrap .list dl dd .small{
	font-size: clamp(12px, 3vw, 14px);
    color: #fff;
	font-family: 'Ibarra Real Nova', serif;
    /*text-shadow: 0 0 5px #000,0 0 5px #000,0 0 5px #000;*/
}


.menu-list-wrap .list dl dd .large{
	font-size: clamp(20px, 3vw, 24px);
    color: #fff;
	font-family: 'Ibarra Real Nova', serif;
    /*text-shadow: 0 0 5px #000,0 0 5px #000,0 0 5px #000;*/
}
    
.fa-plus-circle{/* ⊕ */
    color: #e9e4d4;
}    
    
@media screen and (max-width:700px) {

.menu-list-wrap .list{
    width: 100%;
}
}