@charset "utf-8";

/*recet css*/
html,body,h1,h2,h3,h4,p,ul,li,dl,dt,dd,nav,p,picture {
  margin:0;
  padding:0;
  line-height:1.0;
  font-family:"Hiragino Kaku Gothic ProN",
  Meityo,
  sans-serif;
}

ul {list-style:none;}

a {text-decoration:none;
  color:inherit;}

img {
    border:none;
    vertical-align:bottom;}

.br-sp{display: block;}
.br-pc{display: none;}

#box{display: none;}
#box-inner{display: none;}


/*body*/

body {
  width:100%;
  background-color:#FFF;
  font-size:16px;
}

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


/*header*/
header {
  width:100%;
  padding-bottom:178%;
  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%;
  }

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

.heroheadertxt img {
  width: 100%;
  }

.heroheadertxt picture {
  width: 100%;
  }

.scroll-menu{
  width: 100%;
  margin-top:10px;
}


.scroll-menu img{
  width: 100%;
}

/*menu*/
#menu {
  text-align: center;
  margin:0 auto;
  padding:0 27px;
}

main h2 {
/*  width:162px;*/
  margin:0 auto 42px;
  text-align: center;
}

.menulead {
  font-size:110%;
  line-height:1.6;
  margin-bottom:17px;
  text-align: left;
}

main ul {
  overflow: hidden;
}


main li {
  float:left;
  width: 47%;
  margin-right:6%;
  margin-bottom:6%;
}

main li:nth-child(2n+0) {
  margin-right:0;
}

main li img{
  width: 100%;
  border-radius:10px;
}


.limited-time-sale dl,dt,dd {
  margin:0 auto;
  text-align: center;
}

.limited-time-sale dt{
  margin:10px 0 0; 
}

.limited-time-sale dd{
  font-size:70%; 
  line-height:1.7;
  padding-bottom:3px;
}

.time {
  color:#3F1900;
  padding-top:5px;
  padding-bottom:0;
}

.takeout {
  margin-top:10px; 
    }

/*aside*/

aside h2 {
  margin:0 auto 42px;
  text-align: center;
}


/*news*/
.scroll-news {
  width:100%;
}

.scroll-news img {
  width:100%;  
}


#news {
  margin:0 auto;
  padding:20px 27px;
  background-color: #FAD8CF;
}

.li-pizza {
  line-height: 3;    
}

.li-pizza img {
  width:90%; 
}

.news-price {
  color:#6E420B;
  font-size:100%;
}

.news-img {
  padding:15px 0 20px;
}

.news-img img {
  width:100%;
}

#news p {
  font-size:110%;
  line-height:1.6;
  padding-bottom:17px;
}

/*etc*/
#etc {
  margin:0 auto;
  padding:20px 27px;
}

#etc p {
  font-size:110%;
  line-height:1.6;
  margin-bottom:17px;
}

#etc h3 {
    display: none;
}


.etc-linkbtn img {
  width:100%;  
}


.scroll-about {
  width:100%;
  height:35px;
  margin:50px 0 100px;
}

.scroll-about img {
  width:100%;
}

/*about*/
#about {
  margin:0 auto;
  padding:20px 27px;
  background-color: #FEF6B4;
}

.about-wrapper {
  margin:0 auto;
  overflow:hidden;
}

.about-img img {
  width:100%; 
}

.about-text {
  font-size:110%;
  line-height:1.6;
  padding:17px 0 17px;
}

/*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*/
.container {
  width:100%;
  margin:0 auto;
  position:relative;
  }

/*header*/
header {
  padding-bottom:70%;
  margin:0 auto;
  overflow: hidden;
}

.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:0.6%;
  }
    
.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:0;
  }
    
.heroheader img {
  width: 100%;  
    }
    
.heroheadertxt {
  width: 100%;
  margin:0 auto;
  text-align: center;
  position:absolute;
  top:590px;
  left:0;
  z-index:10;
}

.scroll-menu{
  width: 100%; 
  display:none;
  margin-top:0;
}   
 
/*menu メガメニュー*/
#box{
  display: block;
  width: 100%;
  height: 100vh;
  position:absolute;
  top:80px;
  left:90px;
  opacity:0;
  transition:0.3s;
  visibility:hidden;
  z-index:200;
  }

.megamenu:hover #box {
visibility: visible;
opacity: 1;
  }
  
#box-inner{
  display: block;
  max-width: 600px;
  height: 90px;
  padding:0 2%;
  margin:20px auto 0;
  background: #fff;
  border-radius:6px;
    }
    
#box-inner ul {
  display: block;     
    }
    
#box-inner li {
  display: block;
  float:left; 
  width:25%;
    }
    
#box-inner a {
  color:#EE7C5E;
  height:55px;
  line-height:55px;
    }
    
#box-inner li img{
  float:left; 
  max-width:55px;
  padding-right:6px;
    }  
    
#box-inner:before {
  content:"";
  width: 0;
  height: 0;
  border:12px solid transparent;
  border-bottom:18px solid #fff;
  position:relative;
  top:-30px;
  left:210px;
      }
    
/*main menu*/
main {
  max-width:900px; 
    }    
    
#menu {
  margin:0 auto;
  padding:0;
  text-align: center;
}

main h2 {
  margin:0 auto 40px;
  text-align: center;
}

main h2 img {
  width:20%;
}

.menulead {
  font-size:120%;
  line-height:1;
  text-align: center;
  margin:20px 0 50px;
}
    
main ul {
  overflow: hidden;
}

main li {
  float:left;
  width: 22%;
  margin-right:3%;
  margin-bottom:25px; 
  vertical-align:bottom;
}

main li:nth-child(2n+0) {
  margin-right:3%;
}
    
main li:last-child {
  margin-right:0;
}

main li img{
  width: 100%;
  border-radius:50%;
}
    
.limited-time-sale {
  width:100%;
  margin-top:40px;
}    
    
.limited-time-sale dl,dt,dd {
  width:100%;
  margin:0 auto;
  text-align: center;
}

.limited-time-sale dt{
  margin:0 0 5px; 
  padding-top:0;
}
    
.limited-time-sale dt img {
  width:15%;
}
    
.limited-time-sale dd{
  font-size:100%; 
  line-height:1.6;
  padding-bottom:0;
}

.time {
  color:#3F1900;
  padding-top:5px;
  padding-bottom:2px;
}

.takeout {
  margin:40px 0 40px; 
    }
    
.takeout img {
  width:16%;
    }
    
/*aside*/
aside h2 {
  margin:0 auto 60px;
  text-align: center;}

aside h2 img{
  width:22%;
}
    

/*news*/
.scroll-news {
  width:100%;
}

.scroll-news img {
  width:100%;  
}


#news {
  margin:0 auto;
  padding:50px 10%;
  background-color: #FAD8CF;
}
.news-wrapper {
  overflow: hidden;
  max-width: 900px;
  padding:0;
  margin:0 auto;
    }

.news-text { 
  float:left;   
  width:45%;
  padding-right:0%;     } 
    
#news h3 img{
  width:45%;
    }
           
#news p {
  padding-bottom:5px;
}
    
.li-pizza {
  width:85%; 
  line-height: 3;    
}

.li-pizza img {
  width:100%; 
}

.news-price {
  color:#6E420B;
  font-size:115%;
}

.li-lead {
  font-size:180%;
  line-height:2.2;
  padding:10px 0 0;
}
    
.news-img {
  float:right;   
  width:50%;
  padding:0 0 10px;
}

.news-img img {
  width:100%;
} 


/*etc*/
#etc {
  margin:0 auto;
  padding:50px 10%;
}
    
.etc-wrapper {
  overflow: hidden;
  max-width: 900px;
  margin:0 auto;
  padding:0;
    }
    
.etc-text {
  float:left; 
  width:45%;
  padding-right:5%;
    }

.etc-text p {
  font-size:180%;
  line-height:2.2;
  padding:10px 0 0;
}
    
#etc h3 {
  display: block;
    }
    
#etc h3 img {
  width:100%;
  margin-top:30px;
    }
    
.etc-linkbtn {
  float:right;   
  width:50%;
  padding:0 0 10px;
    }
    
.etc-linkbtn img{
  border:1px solid #000;
  box-sizing: border-box;
    }
    
    
.scroll-about {
  margin:50px 0 100px;
}
    
/*about*/
#about {
  margin:0 auto;
  padding:50px 10%;
  background-color: #FEF6B4;
}
    
#about h2 img {
  width:36.665%; 
    }

.about-wrapper {
  overflow: hidden;
  max-width: 900px;
  margin:0 auto;
  padding:0 20%;  
    }
 
.about-img {
  max-width:450px; 
  margin:0 auto;
  padding-bottom:14px;
}
   
.about-img img {
  width:100%;
}
    
.about-text {
  width:100%;
  font-size:120%;
  line-height:1.8;
  padding-bottom:20px;
}

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

footerline img{
  width:100%;     
    }
    
footer p {
  padding:3px 0 2px;
}

.copy {
  font-size:100%;      
    }
    
.externallink{
  max-width: 1500px;
  margin:0 auto;
  padding-right:5px;
  text-align: right;
}

.externallink img{
  width:4%;
  height:4%;
  padding-right:1%;
}
    
}


@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;
    }  


.heroheader {
  width: 100%;
  margin:0 auto;
  text-align: center;
  position:absolute;
  top:64px;
  left:0;
  z-index:0;
  }
    
.heroheader img {
  width: 100%;  
    }
    
.heroheadertxt {
  width: 100%;
  margin:0 auto;
  text-align: center;
  position:absolute;
  top:590px;
  left:0;
  z-index:10;
}

.scroll-menu{
  width: 100%; 
  display:none;
  margin-top:0;
}   
      
    
/*main menu*/
main {
  max-width:900px;       
    }    
    
#menu {
  margin:0 auto;
  padding:0 10%;
  text-align: center;
}

main h2 {
  margin:0 auto 42px;
  text-align: center;
}

main h2 img {
  width:17%;
}

.menulead {
  font-size:150%;
  line-height:1.6;
  text-align: center;
  margin:20px 0 80px;
}
    
main ul {
  overflow: hidden;
}

main li {
  float:left;
  width: 22%;
  margin-right:3%;
  margin-bottom:25px; 
  vertical-align:bottom;
}

main li:nth-child(2n+0) {
  margin-right:3%;
}
    
main li:last-child {
  margin-right:0;
}

main li img{
  width: 100%;
  border-radius:50%;
}
    
.limited-time-sale {
  width:100%;
  margin-top:70px;
}    
    
.limited-time-sale dl,dt,dd {
  width:100%;
  margin:0 auto;
  text-align: center;
}

.limited-time-sale dt{
  margin:5px 0 10px; 
  padding-top:0px;
}
    
.limited-time-sale dt img {
  width:15%;
}
    
.limited-time-sale dd{
  font-size:100%; 
  line-height:1.6;
  padding-bottom:0;
}

.time {
  color:#3F1900;
  padding-top:5px;
  padding-bottom:2px;
}

.takeout {
  margin:50px 0 40px; 
    }
    
.takeout img {
  width:14%;
    }
    
/*aside*/
aside h2 {
  margin:0 auto 80px;
  text-align: center;}

aside h2 img{
  width:20%;
}
    

/*news*/
.scroll-news {
  width:100%;
}

.scroll-news img {
  width:100%;  
}


#news {
  margin:0 auto;
  padding:20px 20%;
  background-color: #FAD8CF;
}
     
.news-wrapper {
  overflow: hidden;
  max-width:900px;   
  padding:0;
  margin:0 auto;
    }

.news-text { 
  float:left;   
  width:40%;
  padding-right:5%;     
    }
    
.news-text img { 
  width:60%;   
    }

.news-text p {
  font-size:160%;
  line-height:1.7;
  padding:10px 0 0;
}
    
.news-price {
  color:#6E420B;
  font-size:115%;
  padding-left:15px;
}
    
.news-img {
  float:right;   
  width:55%;
  padding:0 0 10px;
}

.news-img img {
  width:100%;
}  

/*etc*/
#etc {
  margin:0 auto;
  padding:20px 20%;
}
    
.etc-wrapper {
  overflow: hidden;
  max-width:900px;   
  margin:0 auto;
  padding:0;
    }
    
.etc-text {
  float:left; 
  width:40%;
  padding-right:5%;
    }

.etc-text p {
  font-size:160%;
  line-height:1.7;
  padding:10px 0 0;
}
    
#etc h3 {
  display: block;
    }
    
#etc h3 img {
  width:100%;
  margin-top:30px;
    }
    
.etc-linkbtn {
  float:right;   
  width:55%;
  padding:0 0 10px;
    }
    
.etc-linkbtn img{
  border:1px solid #000;
  box-sizing: border-box;
    }
    
    
.scroll-about {
  margin:50px 0 100px;
}

/*about*/
#about {
  margin:0 auto;
  padding:50px 20%;
  background-color: #FEF6B4;
}

.about-wrapper {
  overflow: hidden;
  max-width:900px;   
  margin:0 auto;
  padding:0 20%;  
    }
 
.about-img {
  width:100%; 
  padding-bottom:17px;
}
   
.about-img img {
  width:100%;
}
    
.about-text {
  width:100%;
  font-size:160%;
  line-height:1.7;
  padding-bottom:20px;
}

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

footerline img{
  width:100%;     
    }
    
footer p {
  padding:2px 0;
}

.externallink{
  max-width: 1500px;
  padding-right:2%;
  text-align: right;
}

.externallink img{
  width:3%;
  height:3%;
  padding-right:1%;
}
    
}