@charset "utf-8";


/*共通ページへの変更*/

.container {
  width:100%;
  margin:0 auto;
  position:relative;
  }

header {
  width:100%;
  padding-bottom:100%;
  margin:0 auto;
  box-sizing:border-box;
  overflow: hidden;
}


.logo {
  width:100%;
  overflow:hidden;
  margin:0 auto;
  }

.logotxt{
  width:100%;
  margin:11px 0 0 33%;
  }
  
h1 {
  width:100%;
  font-size:95%;
  color:#3F1900;
  padding-bottom:4px;
  }

.character {
  width:18%;
  position:absolute;
  top:-6px;
  left:5%;
  z-index:30;
  }


/*nav*/
.nav {
  width:100%;
  overflow:hidden;
  margin:0 auto;
  position:absolute;
  top:66px;
  left:0;
  z-index:20;
}

.nav li {
  width:calc(100%/3);
  float:left;
  }

.nav li img{
  width:100%;
  }



.heroheader {
  width: 100%;
  margin:0 auto;
  text-align: center;
  position:absolute;
  top:131px;
  left:0;
  z-index:0;
  }

.heroheader img {
  width: 100%;
  }

.heroheader picture  {
  width: 100%;
  }


  /*menuページ（pizza,cafe,drink,desert）*/
.wrapper-menu {
  width:80%;
  padding:0 10%;
}

.subtitle {
  width:100%;
  padding:20px 0;
  margin:0 auto 30px;
  background:url(../menu/img/koccabocca-pizza-h2-sp.png) no-repeat center/cover;
  text-align:center;
}

h2 {
  width:75%;
  margin:0 auto;
  padding:32px 0 8px;
}

.subtitle p {
  text-align:left;
  padding:0 15% 30px;
  font-size:130%;
  line-height:1.6;
}

.menubox li{
  margin:0 auto;
  text-align:center;
}

.menuboxbig li{
  margin:0 auto;
  text-align:center;
}


h3 {
  margin:11px 0 8px;
  text-align:center;
}

.caption {
  text-align:left;
  padding:0 5%;
  font-size:100%;
  line-height:1.6;
}

.menu-price {
  color:#3F1900;
  margin:5px auto 40px;
  font-size:95%;
  font-weight: normal;
  text-align:center;   
}


.menubox-small li {
  line-height:1.7;   
  font-size:110%; 
  font-weight: bolder;
  text-align: center;
}


.otherfood-pc {
  display:none;
}

.otherfood-sp {
  margin:50px auto 40px; 
  padding:0 5%;
  border:1px solid #EE7C5E;
  border-radius: 4%;
}

.otherfood-sp h3 {
  margin:15px 0 20px;
}

.otherfood-sp dl {
margin-bottom:13px;
}

.otherfood-sp dt {
margin:12px 0 7px;
}

.otherfood-sp dd {
font-size:100%;
line-height:1.6;
}

/*footer*/
footer {
  width:100%;    
  overflow: hidden;
  text-align: center;
  color:#fff;
  background-color: #EE7C5E;
  padding-bottom:20px;
}

footer p {
  width:100%; 
  padding-bottom:2px;
}

.footerline picture {
  width:100%; 
}

.footerline img {
  ,width:100%; 
}


.externallink{
  padding-right:7px;
  text-align: right;
}

.externallink img{
  width:35px;
  height:35px;
  padding-right:10px;
}


@media screen and (min-width:768px){
  /*タブレット用*/

.br-sp{display: none;}
.br-pc{display: block;}
    
.container {
  width:100%;
  margin:0 auto;
  position:relative;
  }
    
header {
  margin:0 auto;
  overflow: hidden;
  padding-bottom:65%;
    }

    
.logo {
  width:42%;
  overflow:hidden;
  }

.logotxt{
  width:20%;
  margin:1.2% 0;
  position:absolute;
  top:0.1%;
  left:10%;
  z-index:30;
  }
  
h1 {
  width:16em;
  font-size:80%;
  color:#3F1900;
  padding-bottom:1%;
  }
    
.logotxt img {
  width:85%;
  }
     
.character {
  position:absolute;
  top:-0.15%;
  left:0.8%;
  z-index:30;
  }
    
.character img {
  width:50%;
  height:50%;
  }

/*nav*/
.nav {
  width:100%;
  overflow:hidden;
  margin:0 auto;
  position:absolute;
  top:0;
  left:0;
  background: url(../img/inner-back85.png) no-repeat top left/contain;
  z-index:20;
}

.nav li {
  height:110px;
  float:left;
  }
  
.home {
  width:46.97%;
  position:absolute;
  top:2%;
  left:0;
  z-index:20;
    }
    
.menu {
  width:9.86%;
  position:absolute;
  top:2%;
  left:46.97%;
  z-index:20;
    }
    
.news {
  width:9.76%;
  position:absolute;
  top:2%;
  left:56.83%;
  z-index:20;
    }  
    
.etc {
  width:11.03%;
  position:absolute;
  top:2%;
  left:66.59%;
  z-index:20;
    }  
    
.about {
  width:9.76%;
  position:absolute;
  top:2%;
  left:77.62%;
  z-index:20;
    }  
    
.access {
  width:12.59%;
  position:absolute;
  top:2%;
  left:87.38%;
  z-index:20;
    }  

.heroheader {
  width: 100%;
  margin:0 auto;
  text-align: center;
  position:absolute;
  top:40px;
  left:0;
  z-index:10;
  }
    
.heroheader img {
  width: 100%;  
    } 
        
.wrapper-menu {
  overflow: hidden;
  max-width: 1000px; 
  padding:0;
  margin: 0 auto;
}
    
.subtitle {
  float:left;
  width:238px;
  margin:0 15px 0 0;
  background:url(../menu/img/menu-h2-backimg-208px.png) no-repeat center/cover;
  text-align:center;
}

h2 {
  width:75%;
  margin:0 auto;
  padding:32px 0 8px;}

h3 {
  width:208px; 
  text-align: center;
    }
    
.subtitle p {
  text-align:left;
  padding:0 15% 30px;
　margin:0 5%;
  font-size:130%;
  line-height:1.6;
}
    
.menubox li{
  float:left;
  width:208px;
  margin:0 20px 100px;
  display:block;
    }   
    
.menuboxbig li{
  float:left;
  width:23%;
  text-align: center;
  margin:25px 15px 70px 0;
  display:block;
    } 
    
.menuboxbig li:last-child{
  float:left;
  width:23%;
  text-align: center;
  margin:25px 0 70px 0;
  display:block;
    } 
    
.menuboxbig h3{
  text-align: center;
  margin:11px auto 8px;
    }  
    

#doublesize {
  float:left;
  width:416px; 
  margin:0 20px 100px;
  display:block;
    }
    
#doublesize h3 {
  width:100%;
  margin:11px auto 8px;
    }
    
.menu-price {
  color:#3F1900;
  margin:5px auto 0;
  font-size:95%;
  font-weight: normal;
  text-align:center;   
}

.menubox-small{
  clear: both;
  padding-bottom:100px;
    }

.menubox-small li{
  float:left;
  padding:0 20px 12px 0;
   }
    
.otherfood-sp {
  display:none;
  width:100%;
}

.otherfood-pc {
  clear: both;
  display:block;
  width:95%;
  text-align: left; 
  height:155px;
  padding:10px 0 0 3%;
  margin:50px auto 40px; 
  border:1px solid #EE7C5E;
  border-radius: 10px;
  position: relative;
  z-index:10;
}
    
.other-pc-h3 {
  float:left;
  position:absolute;
  top:-25px;
  left:10px;
  z-index:20;
    }
    
.other-pc-h3 img {
  width:75%;
    }
    
.other-pc1-outside {
  overflow: hidden;
    }
    
.other-pc1 {
  float:left;
  width:calc(80%)/3;
  margin-right:2%;
}
    
.other-pc1:first-child {
  margin-left:20%;
}

.other-pc1 dt {
  text-align: left; 
  margin:20px 0 5px;
    }

.other-pc1 dt img {
  width:80%;
    }
    
.other-pc1 dd {
  font-size:100%;
  line-height:1.6;
  text-align: left; 
    }

.other-pc2 {
  float:left;
  width:calc(72%)/3;
  margin-right:2%;
}
    
.other-pc2:first-child {
  margin-left:22%;
}

.other-pc2 dt {
  text-align: left; 
  margin:20px 0 5px;
    }
    
.other-pc2 dd {
  font-size:100%;
  line-height:1.6;
  text-align: left; 
    }
    
/*menu一覧*/    
/*heroheader-none*/ 
#menulist {
background:#FFF8EC;      
    }
    
.headermenulist {
  margin:0 auto;
  overflow: hidden;
  padding-bottom:180px;
    }
    
.heroheader-none {
  display:none;        
    }
    
.wrapper-menulist {
  overflow: hidden;
  max-width: 1000px; 
  padding:0;
  margin: 0 auto;    
    }
    
.menulistsub {
  margin:0 auto 15px;
  padding:0;
  text-align: center;
    }

.menudetails>h3 {
  margin:30px auto 17px;;
  text-align: center;    
    }
    
.menudetails>h3 img{
  width:70%;
    }
    
.menudetails-p {
  font-size:130%;
  line-height: 1.4;
  margin-bottom:15px;
  text-align: center;  
    }   
    
.menudetails-link {
  font-size:90%;      
    }  

.menulistbox {
  overflow: hidden;    
    }
    
.menulistbox li {
 float:left;
　width:50%;
 line-height: 2;
 padding-right:3%;
    }   
    
.menulist-price {
　　color:#6E420B;
    }
    
.menulistbox>h4 img{
 width:150%;
 margin:0;
 padding:0;
    }

.menulistto {
  margin:0 auto 50px;
  padding:0; 
  text-align: center;  
    }

}
    
@media screen and (min-width:2400px){
/*PC用*/

.br-sp{display: none;}
.br-pc{display: block;}
    
/*container*/
.container {
  width:100%;
  margin:0 auto;
  position:relative;
  }
    
/*header*/
header {
  padding-bottom:65%;
  margin:0 auto;
  overflow: hidden;
}

.logo {
  width:20%;
  overflow:hidden;
  }

.logotxt{
  width:20%;
  margin:1% 0;
  position:absolute;
  top:0;
  left:9%;
  z-index:30;
  }
  
h1 {
  width:16em;
  font-size:110%;
  color:#3F1900;
  padding-bottom:2%;
  }
    
.logotxt img {
  width:83%;
  }
     
.character {
  position:absolute;
  top:-0.15%;
  left:1%;
  z-index:30;
  }
    
.character img {
  width:44%;
  height:44%;
  }


/*nav*/
.nav {
  width:100%;
  overflow:hidden;
  margin:0 auto;
  position:absolute;
  top:0;
  left:0;
  background: url(../img/inner-back85.png) no-repeat top left/contain;
  z-index:20;
}

.nav li {
  height:110px;
  float:left;
  }
  
.home {
  width:46.97%;
  position:absolute;
  top:2%;
  left:0;
  z-index:20;
    }
    
.menu {
  width:9.86%;
  position:absolute;
  top:2%;
  left:46.97%;
  z-index:20;
    }
    
.news {
  width:9.76%;
  position:absolute;
  top:2%;
  left:56.83%;
  z-index:20;
    }  
    
.etc {
  width:11.03%;
  position:absolute;
  top:2%;
  left:66.59%;
  z-index:20;
    }  
    
.about {
  width:9.76%;
  position:absolute;
  top:2%;
  left:77.62%;
  z-index:20;
    }  
    
.access {
  width:12.59%;
  position:absolute;
  top:2%;
  left:87.38%;
  z-index:20;
    }  
    
.otherfood-pc {
  clear: both;
  display:block;
  width:80%;
  text-align: left; 
  height:155px;
  padding:10px 2% 0 200px;
  margin:50px auto 40px; 
  border:1px solid #EE7C5E;
  border-radius: 10px;
  position: relative;
}
    
.other-pc-h3 {
  float:left;
  position:absolute;
  top:-25px;
  left:15px;
    }
    
.other-pc-h3 img {
  width:75%;
    }

.other-pc1-outside {
  overflow: hidden;
  position:absolute;
  top:-25px;
  left:50px;
  z-index:30;         
    }
    
.other-pc1 {
  float:left;
  width:calc(100%-180px)/3;
  margin-right:45px;
}
 
.other-pc1 img {
  width:85%;
  margin:10px 0 8px;
    }
    
.other-pc1 dt {
  text-align: left;    
    }
    
.other-pc1 dd {
  font-size:100%;
  line-height:1.6;
  text-align: left; 
    }
}