@charset "utf-8";

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary { display:block;}
li{ list-style:none;}
blockquote, q { quotes:none;}
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none;}
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent;}
ins { background-color:#ff9; color:#000; text-decoration:none;}
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold;}
del { text-decoration: line-through;}
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help;}
table { border-collapse:collapse; border-spacing:0;}
hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0;}
input, select { vertical-align:middle;}

.bold { font-weight:bold;}
.fl { float:left;}
.fr { float:right;}
.clear { clear:both;}
.al { text-align:left;}
.ar { text-align:right;}
.ac { text-align:center;}
.clearfix:after { height:0; visibility:hidden; content:"."; display:block; clear:both;}
.clearfix { _height: 1px; min-height: 1px; /*￥*//*/ height: auto; overflow: hidden; /**/}
.hidden { display: none;}
.absolute { position:absolute;}
.relative { position:relative;}

* { -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
body { text-align: center; font-family:"ヒラギノ角ゴ ProN W3", "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "メイリオ", "Meiryo", "verdana", sans-serif; line-height:1.7; color:#000; letter-spacing:0.1em;}
body,html{ height:100%;}
img{ border:none; vertical-align:middle; max-width:100%;}
img{ width:auto\9; height:auto\9;}
a{ text-decoration: none; color:#333;}
a:hover{ text-decoration: none;}
header, footer, nav, section, article, aside, h1, h2, h3, h4, h5, h6, div, p, dl, dt, dd, table, th, td, a,li { box-sizing: border-box;}


.strongText{ font-size:2.8rem!important; line-height:1;}


.gFont{ font-family: 'Amatic SC', cursive; line-height:1;}
.gFontBold{ font-family: 'Amatic SC', cursive; line-height:1; font-weight:700;}

.jarallax { position:relative; z-index:0;}
.jarallax > .jarallax-img { position:absolute; object-fit:cover; top:0; left:0; width:100%; height:100%; z-index:-1;}

.effect-fade { opacity:0; transform:translate(0, -2rem); -webkit-transform:translate(0, -2rem); transition:all 1s; -webkit-transition:all 1s;}
.effect-fade.effect-scroll{ opacity:1; transform:translate(0, 0); -webkit-transform:translate(0, 0);}




.fullImageWrapper{ width:100%; height:100vh; position:relative;}
/*
.fullImageWrapper.gray:after{ content:""; width:100%; height:100%; background:#9fa0a0; position:absolute; top:0; left:0; opacity:0.37;}
*/
.smallImageWrapper{ width:100%; height:50vh; position:relative;}
/*
.smallImageWrapper.brown:after{ content:""; width:100%; height:100%; background:#604C3F; position:absolute; top:0; left:0; opacity:0.41;}
*/



.positionCenter{ position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); z-index:999;}
h1.positionCenter img{ height:6rem; width:auto;}


#main2Wrapper span{ font-size:3.8rem; display:inline-block; padding:0 1rem;}
#main3Wrapper span{ font-size:3.8rem; display:inline-block; padding:0 1rem;}
#terraceWrapper span{ font-size:3.8rem; display:inline-block; padding:0 1rem;}


.photoListWrapper{ max-width:1000px; margin:0 auto; padding:6rem 0; background:#fff;}
.photoListWrapper ul li{ display:inline-block; width:33.33%; padding:0.5rem;}
.photoListWrapper ul.mb--M{ margin-bottom:8rem;}
.photoListWrapper > p{ font-size:1rem; padding:0 1rem 2rem;}




.defaultWrapper{ padding:8rem 0;}
.defaultWrapper.pb--s{ padding:8rem 0 0;}
.defaultWrapper > p{ font-size:1rem; padding:0 1rem;}

#pizzaImageWrapper{ margin-top:-1px;}

.catTitle{ font-size:2.8rem; margin:0 auto 2rem;}
#accessInfoWrapper p{ font-size:1rem; margin:1rem auto;}
#accessInfoWrapper dl{ font-size:1rem; margin:1rem auto;}

#menuSelectList{ margin-bottom:2rem;}
#menuSelectList li{ display:inline-block; padding:0 1rem;}
#menuSelectList li a{ display:block; line-height:1; padding:1rem 2rem; border:1px solid #333; min-width:140px; border-radius:10px;}
#menuSelectList li a:hover{ background:#000; color:#fff;}
#menuSelectList li span{ display:block; line-height:1; padding:1rem 1rem; border:1px solid #333; min-width:140px; background:#000; color:#fff; box-sizing:border-box; border-radius:10px;}


#batonWrapper{ margin-bottom:8rem;}

.btn--blue{ display:inline-block; padding:1rem 2rem; line-height:1; background:#2758c0; color:#fff; margin:2rem auto 0; border-radius:10px;}
.btn--yellow{ display:inline-block; padding:1rem 2rem; line-height:1; background:#f2e900; margin:2rem auto 0; border-radius:50px;}
.btn--yellow span{ display:block; font-size:0.8rem; margin-top:0.8rem;}
.btn--green{ display:inline-block; padding:1rem 2rem; line-height:1; background:#325C3B; margin:2rem auto 0; border-radius:50px; color:#fff;}


footer{ padding:4rem 0 0;}
#footerWrapper{ max-width:1000px; padding:0; margin:0 auto;}

#footerLogoList li{ display:inline-block; padding:0 1rem;}
#footerLogoList li:nth-child(1) a img{ height:2rem; width:auto;}
#footerLogoList li:nth-child(2) a img{ height:5rem; width:auto;}
#footerLogoList li:nth-child(3) a img{ height:2rem; width:auto;}
#footerLogoList li:nth-child(4) a img{ height:5rem; width:auto;}

#copyright{ font-size:75%; padding:3rem 0 1rem; letter-spacing:0;}
#footerLogo{ width:auto; height:4rem;}

#intro{ position:fixed; top:0; left:0; width:100%; height:100vh; background:#fff url(img/logo.svg) center center no-repeat; background-size:auto 6rem; z-index:900;}




header{ padding:4rem 0 0;}
header a img{ height:4rem; width:auto;}
#menuSingleWrapper table{ max-width:860px; margin:2rem auto 4rem; width:100%;}
#menuSingleWrapper table th{ width:80%; text-align:left; font-weight:normal; padding:0.5rem 1rem; border-bottom:1px solid #999; font-size:0.8rem;}
#menuSingleWrapper table th span{ display:block; font-size:0.8rem; color:#999;}
#menuSingleWrapper table td{ width:20%; text-align:right; padding:0.5rem 1rem; vertical-align:bottom; border-bottom:1px solid #999; font-size:0.8rem;}
#menuSingleWrapper > p{ margin:2rem auto 4rem; font-size:0.8rem; padding:0 1rem;}
#menuSingleWrapper > a{ display:inline-block; margin:2rem auto 4rem; font-size:0.8rem; padding:1rem 2rem; border:1px solid #333; border-radius:10px;}
#menuSingleWrapper > a:hover{ background:#000; color:#fff;}

#menuSingleWrapper > dl{ font-size:0.8rem; padding:0 1rem; margin:1rem auto 0;}
#menuSingleWrapper > dl > dt{ margin:0 auto 1rem;}
#menuSingleWrapper > dl > dd{ margin:0 auto 1rem;}
#menuSingleWrapper > p.lunchPrice{ font-size:1rem;}

.livePhotosWrapper{ margin:2rem auto 2rem; width:100%; max-width:860px;}
.lpk-badge{ display:none;}

#lowerWrapper{ padding:4rem 0;}
#drinkDetailBtnWrapper{ margin:-2rem auto 4rem;}

.menuSubTitle{ margin:2rem auto 0; font-size:0.8rem; display:inline-block; padding:0.5rem 1rem; border:1px solid #ccc;}
.menuSubTitle > dl > dt{ color:#999; font-weight:normal;}

#informationList{ border:5px solid #333; padding:0 2rem 2rem; display:inline-block; position:relative; max-width:800px; width:100%; margin:0 auto; box-sizing: border-box;}
#informationList:after{ content:""; position:absolute; top:10px; left:10px; width:calc(100% - 24px); height:calc(100% - 24px); border:2px solid #333; box-sizing: border-box;}
.informationSubBox{ margin:1rem auto 0;}
#informationList li{ margin:2rem 0 0;}
#informationList li dl{ margin:1rem 0 0;}
#informationList li dt{ font-weight:bold; margin:1rem 0 0;}
#informationList p{ margin:1rem 0 0;}

#recruitWrapper{ background:url(img/saiyo_bg.jpg) center center no-repeat; background-size:contain; max-width:800px; width:100%; margin:2rem auto 0; height:600px; position:relative;}
#recruitWrapper > a{ display:inline-block; padding:2rem; position: absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
#recruitWrapper > a:hover{ opacity:0.8;}

.cmLogo{ display:block; margin:2rem auto 0;}
.cmLogo img{ height:12rem; width:auto;}

dl.openTime dt{ font-weight: bold;}
dl.openTime dd{ margin-bottom:1rem;}


.spOnly{ display:none;}

@media only screen and (max-width : 800px) {
    .pcOnly{ display:none;}
    .spOnly{ display:block;}


#recruitWrapper{ background-size:cover; margin:2rem auto -2rem; height:0; padding-top:75%;}
.fullImageWrapper{ height:50vh;}
#main1Wrapper{ height:50vh;}
#main2Wrapper{ height:50vh;}
#main3Wrapper{ height:50vh;}

#main2Wrapper span{ font-size:3.2rem;}
#main3Wrapper span{ font-size:3.2rem;}
#terraceWrapper span{ font-size:3.2rem;}

.smallImageWrapper{ height:50vh;}

.positionCenter{ width:100%;}
h1.positionCenter img{ height:4rem;}

.photoListWrapper{ padding:2rem 0;}
.photoListWrapper > p{ font-size:0.8rem;}
.photoListWrapper ul{ text-align:left;}
.photoListWrapper ul li{ width:50%; padding:1px;}
.photoListWrapper ul.mb--M{ margin-bottom:4rem;}

.defaultWrapper{ padding:4rem 0;}
.defaultWrapper > p{ font-size:0.8rem;}
.defaultWrapper.pb--s{ padding:4rem 0 0;}

#accessInfoWrapper p{ font-size:0.8rem;}
#accessInfoWrapper dl{ font-size:0.8rem;}

#menuSelectList li{ padding:0 5px;}
#menuSelectList li a{ padding:1rem 1rem; min-width:inherit; font-size:0.8rem;}
#menuSelectList li span{ padding:1rem 1rem; min-width:inherit; font-size:0.8rem;}

.catTitle{ font-size:1.8rem;}
.strongText{ font-size:1.8rem!important;}

.btn--yellow{ padding:1rem 2rem; font-size:0.8rem; width:80%; line-height:1.7;}
.btn--yellow span{ display:none;}
.btn--green{ padding:0.5rem 2rem; font-size:0.8rem; width:auto; line-height:1.7; margin-top:1rem;}

#footerLogo{ height:3rem;}
#footerLogoList li{ padding:0 1rem 1rem;}


#lowerWrapper{ padding:2rem 0;}
header{ padding:2rem 0 0;}
header h1 img{ height:4rem;}

#menuSingleWrapper table{ margin:1rem auto 2rem;}
#menuSingleWrapper > p{ margin:1rem auto 2rem;}

#informationList{ font-size:0.8rem; margin:0 1rem; max-width:inherit; width:auto;}
#informationList p{ text-align: left;}
.informationSubBox{ margin:1rem auto 0;}


.cmLogo{ margin:1rem auto 0;}
.cmLogo img{ height:8rem;}
}




/* Edge のみ適用される */
@supports (-ms-ime-align: auto) {
}
/* IE11 にのみ適用される */
@media all and (-ms-high-contrast: none) {
*::-ms-backdrop,
}