@charset "UTF-8";
/*////////////////////////

hokkaido.damihclele.jp
menu.css

///////////////////////*/

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

#pizza / #antipasti / #bevande / #specialOffer
commons

---------------------------------*/
#pizza,#antipasti,#bevande, #specialOffer{
   width: 96%;
    margin: 5% auto;
    padding-top: 5%;
}
#pizza h3, #antipasti h3, #bevande h3, #specialOffer h3{
    font-size: 3em;
    text-align: center;
    margin-bottom: 1em;
}
#pizza h3 span ,#antipasti h3 span, #bevande h3 span, #specialOffer span{
    font-size: .3em;
    letter-spacing: 0.1em;
    display: block;
    margin-top: .9em;
}

/*--------
#specialOffer
 accordion クラスはcommon.cssに
--------*/
#specialOffer{

}
#specialOffer img{
    width: 100%;
    height: auto;
}
#specialOffer h3{
font-size: 2.4em;
color: #ac1e1e;

}
.accordion-content{

}

.accordion-content .t_txt{
    font-size: 2em;
    font-weight: bold;
}
.accordion-content .t_choice{
    font-size: 1.4em;
    margin: 1em auto;
}
.accordion-content .t_choice span{
    font-size: .9em;
}



.ti_sub_txt{
    font-size: 1.2em;
    letter-spacing: 0.1em;
    line-height: 1.8em;
    padding: 0 5em;
}
.ti_sub_txt small {
  font-size: 0.65em;
  color: #444;
  line-height: 1em;
}
.pizzaWrap{
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
.pizzaWrap .pizzaBox{
    width: calc(100%/2);
    padding: 2%;
    box-sizing: border-box;
}
.pizzaWrap .pizzaBox img{
    width: 100%;
    height: auto;
}
.pizzaWrap .pizzaBox h4{
    font-size: 2.4em;
    line-height: 1em;;
    text-align: center;
    margin-bottom: .5em;
}
.pizzaWrap .pizzaBox h4 span{
    font-size: .34em;
    line-height: 1.75em;
    display: block;
    margin-top: .5em;

}
.pizzaWrap .pizzaBox p{
    font-size: .9em;
    text-align: center;
}
.pizzaWrap .pizzaBox li{
    font-size: 1.45em;
    text-align: center;
    margin-bottom: 10px;
        background: url(../images/bg2.gif)
}

@media screen and (max-width: 767px) {
#pizza,#antipasti,#bevande{
   width: 96%;
    margin: 5% auto;
}
#pizza h3, #antipasti h3, #bevande h3{
    margin-bottom: .6em;
    }
#pizza h3 span ,#antipasti h3 span, #bevande h3 span{
    font-size: .2em;
    padding-top: 1em;
}
.ti_sub_txt{
    font-size: .8em;
    letter-spacing: 0.1em;
    line-height: 1.8em;
    padding: 0 2em;
}

.pizzaWrap{
    width: 90%;
    flex-direction: column;
}
.pizzaWrap .pizzaBox{
    width: calc(100%/1);
    padding: 2%;
    box-sizing: border-box;
}

.pizzaWrap .pizzaBox p{
    font-size: .7em;
    text-align: center;
    line-height: 1.6em;
    margin-bottom: 2em;
}
.pizzaWrap .pizzaBox li{
    font-size: 1em;
    text-align: center;
    margin-bottom: 10px;

}   


}
/* ---------------------------------

antipasti  /  only

---------------------------------*/
#antipasti picture{
    width: 100%;

}
#antipasti picture img{
    width: 100%;
    height: auto;
}

    .antipasti_wrap{
        width: 100%;
        display: flex;
    }
    .antipasti_wrap ul{
        width: calc(100%/3);
        padding: 3%;
        box-sizing: border-box;
        list-style: none;
    }
    .antipasti_wrap li{
        font-size: .75em;
        margin-bottom: 1.5em;
        line-height: 1.4em;
        display: block;
    }
    .antipasti_wrap li .jap{
        font-size: .3em;
        padding: 0 1em;
    } 
.antipasti_txt{
    text-align: center;
    font-size: .9em;
        background: url(../images/bg2.gif);
}

@media screen and (max-width: 767px) {
     .antipasti_wrap{
         flex-direction: column;
    }
    .antipasti_wrap ul{
        width: calc(100%/1);
    }
    .antipasti_wrap li{
        font-size: .75em;
        margin-bottom: .9em;
    }
    .antipasti_wrap li .jap{
        font-size: .3em;
        padding: 0 1em;
    } 
.antipasti_txt{
    font-size: .7em;
    
}   
}


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

anti  /  only

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

.anti_flex{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.anti_Cont{
    flex-direction: column;
    width: calc(100% / 4);
    padding: 25px;
    text-align: center;
    line-height: 1.45em;
}
.anti_Cont img{
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.anti_Cont  .anti_txt{
    
}
.anti_Cont .eng{
    font-size: .7em;
    display: block;
    line-height: 1.3em;
}
@media screen and (max-width: 767px) {
    .anti_Cont{
        width: calc(100% / 2);
        padding: 10px;
    }
    .anti_txt{
        font-size: .8em;
    }
}


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

bevande  /  only

---------------------------------*/
#bevande{
    
}

#bevande .drinkmenu ul{
    width: 80%;
    margin: 5% auto;
}
#bevande .drinkmenu li{
    font-size: 1em;
    letter-spacing: .1em;
    margin-bottom: .6em;
    list-style:inside
}

#bevande picture{
    width: 100%;

}
#bevande picture img{
    width: 100%;
    height: auto;
}


@media screen and (max-width: 767px) {
    #bevande .drinkmenu li span{
        display: block;
    } 
}

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

menu category

---------------------------------*/
.menu_list{
  display: flex;
  flex-direction: row;
}

.menu_box{
  display: flex;
  flex-direction: column;
  margin: 20px;
  width: calc(100%/2);
    box-sizing: border-box;
  height: auto;
}

.menu_box img{
  width: 100%;
  height: auto;
}

.menu_box p{
  text-align: center;
  font-size: 1em;
  margin: 10px;
}

h3.menu_box_title{
  text-align: center;
  font-size: 2em;
  margin: 1em auto;
    font-weight: bold;
}

@media screen and (max-width: 767px) {
  .menu_list{
    flex-direction: column;
      padding: 5% 0;
  }
  .menu_box{
    width: 100%;
    height: auto;
    margin: 0;
    padding: 20px;
  } 
h3.menu_box_title{
margin-bottom: .7em;
}    
.menu_box p{
  text-align: center;
  font-size: .8em;
    letter-spacing: .1em;
    line-height: 1.6em;
  margin: 10px;
}
    
}

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

menuLink

---------------------------------*/
#menuLink{
    width: 76%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}
#menuLink div{
    width: calc(100% / 3 - 20px);
    margin: 10px;
    box-sizing: border-box;
}
@media screen and (max-width: 767px) {
    #menuLink{
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
    }
    #menuLink div{
        width: calc(100% / 1);
        margin: 0px;
        box-sizing: border-box;
    }
}
/* ---------------------------------

scroll-fade2

---------------------------------*/
.scroll-fade2 {
  /* 　opacity : 0;
  　transform : translate(0, 45px);
  　transition : all 300ms; */
  width: 90%;
  text-align: center;
  margin: auto;
  padding: 30px;
  }
  
  /* .effect-fade.effect-scroll {
  　opacity : 1;
  　transform : translate(0, 0);
  } */

  .scroll-fade2 p{
    font-size: .8em;
    line-height: 1.5em;
    letter-spacing: 0.1em;
      padding: 0 5%;
  }

  .scroll-fade2 img{
    width: 100%;
    height: auto;
    margin: auto;
    padding: 20px;
  }

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


.scroll-fade2 {
      width: 100%;
      margin: auto;
      }

.scroll-fade2 p{
        font-size: 1em;
      }

.scroll-fade2 {
        width: 100%;
        text-align: center;
        margin: auto;
        padding: 20px 0;
        }
}


/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {

.pc { display: none !important; }
.sp { display: block !important; }

}