/*============================================================================= sp ============================================*/
/*============================================================================= sp ============================================*/
@media screen and (min-width: 300px) and (max-width: 600px) {
    html body .sp-only{
        display: initial !important;
    }
    html body header.masthead{ padding-bottom: 0; }
    
    
    html body:not(.body_index) header.masthead{
        /*border: 2px solid red;*/
        max-height: 22vh;
        margin-top: 71px;
    }
        html body:not(.body_index) #othHeadImg #headerTitle{
            line-height: 13.5vh;
            font-size: 11vw;
        }
    
    
    html body header.masthead{
        max-width: 100%;
        overflow: hidden;
    }
/*    body.body_index header#masthead{ 
        margin-top: 73px;
        min-height: 34vh;
        background-image: url(../img/index/top_head_sp.jpg);
        background-size: contain;
    }*/
    #headLogo{
        max-height: 30px;
    }
    
    .navbar-toggler.navbar-toggler-right { background-color: #BA2033; }
    header #headDateInfo div{
        margin: auto;
        padding: 10px 0;
        line-height: 1rem;
        font-size: 11px;
        font-weight: bold;
    }
    
    html body nav#mainNav .navbar-toggler-icon {
      background-image: url("../img/common/nav_white2.svg");
    }
    
    body h2.nikuSecTitle{

        line-height: 2rem;
        padding: 1rem 0;
        font-size: 1.5rem;
        font-weight: bold;
    }
    
    html body div.sp100col.offset-1,
    html body div.sp100col.offset-2{
        margin-left: auto;
    }
    
    html body div.sp100col{
        flex:0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    
    
    html body  .spFontSize0{
        font-size: 2.25vw;
        line-height: 1.25;
    }
    html body  .spFontSize1{
        font-size: 3.25vw;
        line-height: 1.5;
    }
    
    html body  .spFontSize2{
        font-size: 5.25vw;
        line-height: 1.5;
    }
    
    html body .spPB5{ padding-bottom: 1.5rem !important;   }
    html body .spMB5{ margin-bottom: 1.5rem !important;   }
    
    html body div.row.pc-only{ display: none !important; }
    
    html body .spTextCenter{ text-align: center; }
    
    #contactForMedia,
    #contactForCustomer{        margin-top: 3rem;     }
    
    html body footer #footKyouryokuWrap{
        display: inherit;
        font-size: 10px;
        color: white;
    }
    
    #headKyouryokuWrap{
/*        max-width: 30%;
        font-size: 8px;
        text-align: right;*/
        display: none;
    }
/*    #footKyouryoku{
            background: white;
        border-radius: 1rem;
        padding: 0.5rem;
        margin: 1rem auto;
    }*/
    #krkWrap{
        display: none !important;
    }
    
    #stageTitle img,
     #secVs1 #vsTitle img,
    #beerTitle img,
    #menuTitle img,
    #dogTitle img,
    #detailTitle img,
    #vipTitle img{ width: 80%; }
    #secVip1 #vipTitle {        top: -137px;     }
    #secBeer1 #beerContInner,
    #secMenu1 #menuContInner,
    #secDetail1 #detailContInner,
    #secVs1 #vsContInner,
    #secDog1 #dogContInner,
    #secVip1 #vipContInner{
        margin: -180px 1rem 2rem 1rem;
        /*margin: -148px 1rem 2rem 1rem;*/
        z-index: 1;
        position: relative;
    }
    #secVip1 #beerWrap #beer{ position: relative; max-height: 22vh; margin: auto; bottom: 0; }
    #beerWrap{ text-align: center; }
    #secVip1 #vipDetailDL { padding: 0 10px; }
    #secVip1 #vipDetailDL dt{ text-align: center; padding-bottom: 0.5rem; padding-top: 1.5rem; }
    #secVip1 #vipDetailDL dt,
    #secVip1 #vipDetailDL dd{ flex: 0 0 100%; }
    #secVip1 #vipDetailDL dd{ line-height: 1.15; padding-left: 0; }
    #secDog1 #dogContInner{     grid-template-columns: 100%;  display:  initial; top:-200px; }
    #secDog1 #wanwanYoyaku{   line-height: 1.75; }
    #secDog1 #busDetailWrap{ height: 0; overflow: hidden; }
    #wanwanYoyaku{    z-index: 12;    position: relative;  top: -40px; }
    #secVs1 #vsTitle{ top: -149px; }
    #secVs1 #vsContInner{ top: -15px; }
    #secVs1  #vsExp1,#secDetail1 #detailExp1{      font-size: 1.15rem; }
    #donAttnTitle,#brandAttnTitle{ line-height: 1.5;
        font-size: 1rem;
        width: 100% !important;
        padding: 0.5rem;
    }
    #brandAttnTitle + div{ margin-top: 1rem; }
    #vsExp1{ margin-bottom: auto; }
     div.expList{ padding-top: 1rem; }
     
     table.listTable th{ display: none; }
     table.listTable td{ width: 100%;  }
     table.listTable td img{ margin-bottom: 0.5rem; }
     #donAttnTitle+div{ margin-top: 1.5rem; }
    body.evt-002 #secDog1 #dogContInner{ top:-180px; }
 
    #secMenu1 .circleTitle,
    #secDetail1 .circleTitle {  top: -137px;     }
    html body#page-top  #allWrap{ margin-top: 174px !important; }
    #secDetail1 #detailContInner{ top: 65px; }
    /*#detailTitle img{ max-width: 80% !important; }*/
    #gaiyoDL dt img{ max-height: 1.75rem; }
    img.taiketsuLogo{     height: 166px;    object-fit: cover; }
    .menuTipWrap.col-xs-6{ flex: 0 0 50%; margin-bottom: 1rem; }
    #menuWrap .menuTipWrap:not(.active) .itemExp{  display: none; }
    #menuWrap p.shopName,#menuWrap .menuName,
    #menuWrap p.itemPrice{ font-size: 11px; }
    #menuWrap h3.menuName { min-height: 2.5rem; }
    #menuContInner{ padding-top: 50px; }
    #secBeer1 #beerContInner h3{     font-size: 1.75rem; line-height: 1.3;  }
    #secBeer1 #beerTitle{ top: -118px; }
    #beerContInner{ padding-top: 2rem; }
    #menuWrap div.menuTipInner{ pointer-events: all; cursor: pointer; }
    html body #headMenuWrap {     top: 76px;    overflow: initial;    padding-bottom: 5px; }
    #page-top #headMenuWrap div.col-2{        width: 33%; min-height: 63px;  margin-top: 1rem;  }
    #secTopInfo div.whiteWrap{ padding: 2rem; }
    #dogBack{     position: absolute;    bottom: 0;    opacity: 0.4; }
    #secDog1 #dogAttn2{ padding: 1rem;     margin: 2rem 7%;    }
    
    #menuWrap .menuTipWrap{     transition: all 200ms 0s ease;}
    #menuWrap .menuTipWrap.active{ flex: 0 0 100%;max-width: 100%; }
    #menuWrap .menuTipWrap.active > p.itemExp{ display: block; }
    #menuWrap .menuTipWrap.active   h3.menuName,
    #menuWrap .menuTipWrap.active   p.shopName{ font-size: 1.15rem; } 
    #stageTitle{ top: -109px; }
    #stageTipWrap{ margin-top: 80px; }
    #stageContInner.colorContInner #stageTipWrap img{ flex: 0 0 100%; width: 100%; }
    #stageContInner.colorContInner{
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
}
/*---------------------------------------------------------------------------------------------------------------------------------------- //sp -------------------------------------------------------------------------------------*/
@media screen and (min-width: 300px) and (max-width: 1100px) {
    #footKyouryoku{
        background: white;
        border-radius: 1rem;
        padding: 0.5rem;
        margin: 1rem auto;
    }
    #footKyouryokuWrap{ display: block; }

    #headKyouryokuWrap{
        display: none;
    }
}
@media screen and (min-width: 1100px) and (max-width: 4400px) {
    #footKyouryokuWrap{ display: none; }
    
    #vipDetailDL dd+dt,
    #vipDetailDL dd+dt+dd{
        margin-top: 1rem;
    }
    
    #wanwanYoyaku{
            position: relative;
        top: -43px;
        line-height: 3;
        max-width: 40vw;
    }
    #wanwanGaiyoBtn{ display: none !important; }
}


/*============================================================================= tablet ============================================*/
/*============================================================================= tablet ============================================*/
@media screen and (min-width: 600px) and (max-width:1024px) {
    header{
        min-height: 35vh;
    }
    html body div.sp100col{
        flex:0 0 100%;
        max-width: 100%;
        width: 100%;
    }
       html body div.sp100col.offset-1,
    html body div.sp100col.offset-2{
        margin-left: auto;
    }
    #krkWrap li img{ max-height: 3.75rem; }
    #krkWrap { padding-left: 0; }
    
    #pcSNSwrap a{ 
        display: inline-block;
        margin: auto 0.5rem;
        width: 11%;
    }
}

@media screen and (min-width: 300px) and  (max-width: 992px) {
    #navTicket:after,
    #navTicket:before{
        display: none;
        content: "";
    }
        #headSPticket{ display: inline-block !important; }
}