@charset "utf-8";
/* CSS Document */
.mainMenu {
    z-index: 10000;
}
/*PC*/
@media print, screen and (min-width: 769px) {

.fixed_link { display: none; }

.com_tit { text-align: center; }
.com_tit span.en { display: block; font-size: 70px; font-weight: bold; color: #40210f;  }
.com_tit span.jp { display: block; font-size: 16px; font-weight: bold; }


#hed { padding: 50px 0 100px; width: 100%; box-sizing: border-box; background: #28292b; position: relative; }


.hed_main { width: 90%; margin: 0 auto; position: relative; margin-top: 70px;  }
.moana_icon { position: absolute; left: 0; bottom: 0; }



.hedTitWrap {
width: 100%;
height: 700px;
position: relative;
margin: auto 0 auto auto; 
}

.headerslider {
width: 100%; 
min-height: 700px;
position: relative;
height: 600px;
box-sizing: border-box;
overflow: hidden; 
}

.hedTitWrap {
height: 700px;
padding: 0;
}
.hedTitWrap {
height: 100%;
position: relative;
}


.hed_txtbox { width: 40%;  position: absolute; left: 0; right: 0; margin: auto; bottom: 10%;  z-index: 10; align-items: center; bottom: 35%; }
.hed_tit { font-size: 5vw; text-align: center; font-weight: bold; margin-bottom: 30px; color: #fff; }
.hed_txt { line-height: 2em; text-align: center; color: #fff; font-weight: bold; font-size: 1.6rem;; }





/*----header-----*/

.logo_img { width: 150px; margin: 0 auto 50px; position: absolute; left: 5%; top: 15px; }
.logo_img img { width: 100%; height: auto; }


.hed_menu { width: 95%; justify-content: flex-end; display: flex; flex-wrap: wrap;  padding-right: 5%; margin-top: 10px;   }
.hed_menu li a { color: #fff; text-align: center; margin: 0 15px; display: block; }
.hed_menu li a span.en { display: block; font-size: 25px; font-weight: bold; letter-spacing: 0.09em; }
.hed_menu li a span.jp { display: block; font-size: 14px; font-weight: bold; }
.hed_menu li a.contact_btn { width: 45px; height: 45px; background:  #c6b28b; color: #fff; border: 1px solid #c6b28b; border-radius: 45px; text-align: center; line-height: 45px; }
.hed_menu li a.contact_btn:hover { opacity: .7; }
/*-------reason------*/

#reason { padding: 150px 0 50px; background: #28292b;  }
.reason_box { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 150px; min-height: 500px; }
.reason_box2 { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; min-height: 500px; }
.reason_box_txtbox { flex-basis: 45%; max-width: 45%; }
.reason_box_imgbox { flex-basis: 50%; max-width: 50%; position: relative; margin-top: -100px;
margin-left: -50px;}

.reason_box_imgbox2 { flex-basis: 50%; max-width: 50%; position: relative; margin-top: -100px;
margin-right: -50px; }

.reason_box_img { position: absolute; top: 10%; left: 0; width: 80%; height: auto; }
.reason_box_img2 { position: absolute; top: 40%; left: 58%; width: 40%; height: auto; z-index: 1; }
.reason_box_img0 { position: absolute; top: 10%; right: 0; width: 80%; height: auto; }
.reason_box_img22 { position: absolute; top: 40%; right: 58%; width: 40%; height: auto; z-index: 1; }
.reason_box_img img ,.reason_box_img2 img { width: 100%; height: auto; }

.reason_tit { font-size: 35px; font-weight: bold; margin-bottom: 30px; color: #fff; position: relative; z-index: 10; }
.reason_tit::before {
content: "";
display: block;
width: 200px;
height: 200px;
background: url("../images/com/r_icon.png") 0 0 no-repeat;
background-size: 100%;
position: absolute;
bottom: -30px;
right: 250px;
z-index: -1;
opacity: .5;
}
.reason_tit span { display: block; font-size: 30px; font-weight: bold; color: #c6b28b; margin-bottom: 10px; letter-spacing: .03em; }

.reason_subtit { font-size: 20px; font-weight: bold; margin-bottom: 15px; color: #fff; }

.reason_txt { line-height: 2em; color: #fff; }



/*---------メニュー--------*/
#f_menu { padding: 50px 0px; background: #28292b; }
.idx_tit { margin-bottom: 50px; color: #c6b28b; text-align: center; }
.idx_tit span.en { font-size: 50px; text-align: center; display: block; }
#f_menu .idx_tit span.en{ color: #fff; }

.food_list { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-start;}

.food_list li { flex-basis: 32%; max-width: 32%; margin-right: 2%;  }
.food_list li:nth-child(3n+3) { margin-right: 0px; }
.food_list li:nth-child(n+4) { margin-top: 30px; }
.food_list_img { width: 100%; margin: 0 auto 15px; }
.food_list_img img { width: 100%; height: auto; }
.food_list_tit { font-size: 16px; font-weight: bold; display: flex; margin: 10px auto; align-items: center; color: #fff; }
.food_list_tit span { margin: auto 0 auto auto; color: #c6b28b; font-size: 25px; justify-content: flex-end; }
.food_list_txt { color: #fff; }

.morning_menu { width: 80%; margin: 70px auto 70px; border: 1px solid #40210f; padding: 30px;  

}




#access { background: #28292b; padding: 70px 0px; }
#access .idx_tit span { color: #fff; }
.access_subtit {color: #c6b28b; font-weight: bold; margin-bottom: 5px; font-size: 18px; }

.access_txt { color: #fff; line-height: 2em;  margin-bottom: 15px; }
.access_txt span { display: block; font-weight: bold; color: #426b80; font-size: 16px;  }

.access_box { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; }
.access_boxL { flex-basis: 48%; max-width: 48%; }
.access_boxR { flex-basis: 48%; max-width: 48%; position: relative; }
.access_boxR .insta { position: absolute; top: 0; left: 170px; }
.access_logo { width: 150px; margin-bottom: 15px; }
.access_logo img { width: 100%; height: auto; }
.access_bg {
width: calc(3500px + 100vw);
height: 350px;
background-image: url("../images/index/access_bg.png");
background-position: 50%;
background-repeat: repeat-x;
background-size: contain;
animation: loop 60s linear infinite;
will-change: transform;
}

.tabelog { width: 250px; margin-top: 15px; }
.tabelog a { display: block; padding: 10px; background: #fa0; color: #fff; text-align: center; font-weight: bold; border: 1px solid #fa0;  }
.tabelog a:hover { background: #fff; color:  #fa0;  }

#app {  background: #28292b; padding-bottom: 50px; }

.app_list { width: 600px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; }
.app_list li { flex-basis: 48%; max-width: 48%; }

.app_list li a { display: block; padding: 15px; text-align: center; font-size: 16px; font-weight: bold; color: #fff; border: 1px solid; }

.app_list li:nth-of-type(1) a { border-color: #BE2B2D; background: #BE2B2D; }

.app_list li:nth-of-type(1) a:hover { background: #fff; color: #BE2B2D; }
.app_list li:nth-of-type(2) a:hover { background: #fff; color: #c6b28b; }
.app_list li:nth-of-type(2) a { border-color: #c6b28b; background: #c6b28b; }



/*----フッター---*/

footer { padding: 70px 0px; background: #28292b; }
.f_box { margin-bottom: 50px; text-align: center; }
.f_logo { width: 230px; margin: 0 auto 15px; }
.f_logo img { width: 100%; height: auto; }
.insta a { display: block;font-size: 30px; font-weight: bold; color: #c6b28b; }
.facebook a { display: block;font-size: 30px; font-weight: bold; color: #c6b28b; }
.twitter a { display: block;font-size: 30px; font-weight: bold; color: #c6b28b; }


.link { display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 30px; }
.link li a { display: block; font-size: 12px; color: #fff; text-align: center; margin: 0 15px;  text-decoration: underline; font-weight: 500; }


.copy { text-align: center; font-size: 12px; color: #fff; }


.sns_list { display: flex; flex-wrap: wrap; justify-content: center; }
.sns_list p { margin: 0 10px; }


@keyframes loop {
  0% {
    transform: translateX(0)
  }
  to {
    transform: translateX(-3332px)
  }
}










}




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




/*sp*/
@media only screen and (max-width: 768px) {


.fixed_link {
display: flex;
flex-wrap: wrap;
position: fixed;
z-index: 2000;
width: 100%;
left: 0;
right: 0;
bottom: 0;
margin: auto;
justify-content: space-between;
}

.fixed_link_btn { flex-basis: 50%; max-width: 50%; box-sizing: border-box; }
.fixed_link_btn a { display: block; padding: 10px; text-align: center; border: 1px solid; font-weight: bold; }
.fixed_link_app a { background: #BE2B2D; color: #fff; border-color: #BE2B2D; }
.fixed_link_app a:hover { background: #fff; color: #BE2B2D; }
.fixed_link_contact a { background: #c6b28b; color: #fff; border-color: #c6b28b; }
.fixed_link_contact a:hover { background: #fff; color: #c6b28b; }



.hed_menu{ display: none; }
.logo_img { display: none; }


#header {
width: 100%;
display: flex;
display: -ms-flexbox;
justify-content: space-between;
-webkit-justify-content: space-between;
}


.mainMenu {
box-sizing: border-box;
width: 100%;
align-items: center;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}

.logo_img_sp {
position: absolute;
top: 10px;
left: 15px;
width: 100px;
}

.logo_img_menu {
width: 150px;
margin-bottom: 50px; 
}


.small_hed {
display: none;
}
.logo_img_sp img { width: 100%; height: auto; }
.logo_img_sp a { display: block;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;}


.mainMenuInWrap,
.mainMenuIn {
display: none;
}


/*menu*/
.menuWrap {
width: 50px;
height: 50px;
border-radius: 50px;
position: fixed;
right: 10px;
top: 10px;
z-index: 10000;
background-color: #c6b28b;
cursor : pointer;
}

.menu{
display: block;
position: relative;
width: 20px;
margin: 0 auto;
height: 16px;
margin-top: 16px;
}
.menu__line{
background: #fff;
display: block;
height: 1px;
position: absolute;
transition:transform .3s;
width: 100%;
}
.menu__line--center{
top: 7px;
}
.menu__line--bottom{
bottom: 0;
}
.menu__line--top.active{
top: 7px;
transform: rotate(45deg);
}
.menu__line--center.active{
transform:scaleX(0);
}
.menu__line--bottom.active{
bottom: 7px;
transform: rotate(135deg);
}
/*gnav*/
.gnav {
background: #28292b;
display: none;
height: 100%;
position: fixed;
width: 100%;
top: 0;
z-index: 100;
}
.gnav__wrap{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
/*align-items:center;
display: flex;*/
height: 100%;
position: absolute;
width: 100%;
}

.gnav_contents { width: 80%; }


.gnav__menu__item{
margin: 15px 0 15px 0px;
opacity: 0;
text-align: center; 
}
.gnav__menu__item a{
color: #fff;
font-size: 14px;
font-weight: bold;
text-align: center; 
text-decoration: none;
transition: .5s;
}
.gnav__menu__item a span.en { display: block; text-align: center; letter-spacing: 0.02em; }

.gnav__menu li:nth-child(n+2) { margin-top: 20px; }



.gnav__menu {
width: 100%;
margin: 0 auto 30px;
}
.gnav_subbox {width: 100%; margin: 0 auto; }
.gnav__menu a { color: #fff; font-size: 16px; display: block; position: relative; }
.gnav__menu a span.link_icon { position: absolute; left: 120px; top: 0;  }
.gnav__menu span.en { display: block; color: #c6b28b; font-size: 16px; font-weight: bold; }

.logo_Hed_menu { position: absolute; top: 15px; left: 15px; width: 180px; }
.logo_Hed_menu img { width: 100%; height: auto; }

.gnav_logo { width: 180px; margin: 0 auto 30px; }
.gnav_logo img { width: 100%; height: auto; }

.sp_insta a { display: block;font-size: 36px; font-weight: bold; color: #fff; }

.sp_sns { display: flex; flex-wrap: wrap; justify-content: space-between; width: 50%; }


.moana_hedimg { background: url("../images/moana_cafe_grill/slider/img01.jpg") center center; background-size: cover; width: 100%; height: 700px; }


.com_tit { text-align: center; position: relative; }
.com_tit span.en { display: block; font-size: 50px; font-weight: bold; color: #40210f;  }
.com_tit span.jp { display: block; font-size: 16px; font-weight: bold; }


#hed { padding: 50px 0 0; width: 100%; box-sizing: border-box; background: #28292b; position: relative; }


.hed_main { width: 90%; margin: 0 auto; margin-top: 70px;  }

.hedTitWrap {
width: 100%;
height: 400px;
position: relative; 
}

.headerslider {
width: 100%; 
position: relative;
box-sizing: border-box;
overflow: hidden; 
}


/*---------メニュー--------*/
/*-------reason------*/

#reason { padding: 80px 0 50px; background: #28292b;  }
.reason_box { width: 100%; margin: 0 auto; margin-bottom: 150px; min-height: 500px; }
.reason_box2 { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; min-height: 500px; }
.reason_box_txtbox { width: 100%; margin: 0 auto; }
.reason_box_imgbox { width: 100%; margin: 0 auto; position: relative; margin-bottom: 30px; }

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

.reason_box_img { width: 70%; margin: auto auto auto 0; }
.reason_box_img2 { width: 40%;
position: absolute;
bottom: 30px;
right: 0; }
.reason_box_img0 { width: 70%; margin: auto auto auto 0;  }
.reason_box_img22 { width: 40%;
position: absolute;
bottom: 30px;
right: 0; }
.reason_box_img img ,.reason_box_img2 img { width: 100%; height: auto; }

.reason_tit { font-size: 25px; font-weight: bold; margin-bottom: 30px; color: #fff; position: relative; z-index: 10; }
.reason_tit::before {
content: "";
display: block;
width: 150px;
height: 150px;
background: url("../images/com/r_icon.png") 0 0 no-repeat;
background-size: 100%;
position: absolute;
bottom: -30px;
left: 50px;
z-index: -1;
opacity: .5;
}
.reason_tit span { display: block; font-size: 30px; font-weight: bold; color: #c6b28b; margin-bottom: 10px; letter-spacing: .03em; }

.reason_subtit { font-size: 20px; font-weight: bold; margin-bottom: 15px; color: #fff; }

.reason_txt { line-height: 2em; color: #fff; }



/*---------メニュー--------*/
#f_menu { padding: 50px 0px; background: #28292b; }
.idx_tit { margin-bottom: 50px; color: #c6b28b; text-align: center; }
.idx_tit span.en { font-size: 50px; text-align: center; display: block; }
#f_menu .idx_tit span.en{ color: #fff; }

.food_list { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-start;}

.food_list li { width: 100%; margin: 0 auto; }
.food_list li:nth-child(n+2) { margin-top: 30px;  }
.food_list_img { width: 100%; margin: 0 auto 15px; }
.food_list_img img { width: 100%; height: auto; }
.food_list_tit { font-size: 16px; font-weight: bold; display: flex; margin: 10px auto; align-items: center; color: #fff; }
.food_list_tit span { margin: auto 0 auto auto; color: #c6b28b; font-size: 25px; justify-content: flex-end; }
.food_list_txt { color: #fff; }

.morning_menu { width: 80%; margin: 70px auto 70px; border: 1px solid #40210f; padding: 30px;  

}




#access { background: #28292b; padding: 70px 0px; }
#access .idx_tit span { color: #fff; }
.access_subtit {color: #c6b28b; font-weight: bold; margin-bottom: 5px; font-size: 18px; }

.access_txt { color: #fff; line-height: 2em;  margin-bottom: 15px; }
.access_txt span { display: block; font-weight: bold; color: #426b80; font-size: 16px;  }


.tabelog { width: 250px; margin-top: 15px; }
.tabelog a { display: block; padding: 10px; background: #fa0; color: #fff; text-align: center; font-weight: bold; border: 1px solid #fa0;  }
.tabelog a:hover { background: #fff; color:  #fa0;  }

#app {  background: #28292b; padding-bottom: 50px; }

.app_list { width: 98%; margin: 0 auto; }
.app_list li { width: 100%; margin: 0 auto; }
.app_list li:nth-child(n+2) { margin-top: 30px; }
.app_list li a { display: block; padding: 15px; text-align: center; font-size: 16px; font-weight: bold; color: #fff; border: 1px solid; }

.app_list li:nth-of-type(1) a { border-color: #BE2B2D; background: #BE2B2D; }

.app_list li:nth-of-type(1) a:hover { background: #fff; color: #BE2B2D; }
.app_list li:nth-of-type(2) a:hover { background: #fff; color: #c6b28b; }
.app_list li:nth-of-type(2) a { border-color: #c6b28b; background: #c6b28b; }




#access { background: #28292b; padding: 70px 0px 0; }


.access_txt { color: #fff; line-height: 2em; font-weight: bold; }
.access_txt span { display: block; font-weight: bold; color: #60c0bc; font-size: 16px;  }

.access_box { width: 100%; margin: 0 auto; padding-bottom: 50px; }
.access_boxL { width: 100%; margin: 0 auto; }
.access_boxR { width: 100%; margin: 0 auto 30px; position: relative; }
.access_boxR .insta { position: absolute; top: 0; left: 170px; }
.access_logo { width: 150px; margin-bottom: 15px; }
.access_logo img { width: 100%; height: auto; }
.access_bg {
width: calc(3500px + 100vw);
height: 250px;
background-image: url("../images/index/access_bg.png");
background-position: 50%;
background-repeat: repeat-x;
background-size: contain;
animation: loop 60s linear infinite;
will-change: transform;
}
.tabelog { width: 250px; margin-top: 15px; }
.tabelog a { display: block; padding: 10px; background: #fa0; color: #fff; text-align: center; font-weight: bold; border: 1px solid #fa0;  }
.tabelog a:hover { background: #fff; color:  #fa0;  }
footer { padding: 70px 0px; background: #28292b; }
.f_box { margin-bottom: 50px; text-align: center; }
.f_logo { width: 230px; margin: 0 auto 15px; }
.f_logo img { width: 100%; height: auto; }
.insta a { display: block;font-size: 22px; font-weight: bold; color: #c6b28b; }
.facebook a { display: block;font-size: 22px; font-weight: bold; color: #c6b28b; }
.twitter a { display: block;font-size: 22px; font-weight: bold; color: #c6b28b; }

.link { margin-bottom: 30px; }
.link li a { display: block; font-size: 10px; color: #fff; text-align: center; margin: 0 15px;  text-decoration: underline; font-weight: 500; }
.link li:nth-child(n+2) { margin-top: 10px; }


.copy { text-align: center; font-size: 12px; color: #fff; }




@keyframes loop {
  0% {
    transform: translateX(0)
  }
  to {
    transform: translateX(-3332px)
  }
}




.sns_list { display: flex; flex-wrap: wrap; justify-content: center; }
.sns_list p { margin: 0 10px; }



}