@charset "utf-8";
/*====================
 +base element
====================*/
body {
  -webkit-text-size-adjust: 100%;
  background-color: #fff;
  color: #630;
  font-family: 'Lucida Grande',
               'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
               Meiryo, 'メイリオ',
               sans-serif;
  font-size: 16px;
  line-height: 1.8em;
  margin: 0;
  padding: 0;
}
@media screen and (max-width:640px) {
body {
  font-size: 17px;
  line-height: 1.6em;
}}

p {
  margin: 1.2em 0;
}
@media screen and (max-width:640px) {
p {
  margin: 1.0em 0;
}

p.insta {
  height: 1.8em;
}}

p.center {
  text-align: center;
  font-size: 50%;
  line-height: 50%;
}

a:link,
a:visited,
a:active {
  color: #d2101d;
  text-decoration: none;
} 

a.tel:link,
a.tel:visited,
a.tel:active {
  color: #630;
}

a.normal:link,
a.normal:visited,
a.normal:active {
  color: #630;
  text-decoration: underline;
}

img {
  max-width:100%;
  width /***/:auto;
  height /***/:auto;
  margin: 0;
  padding: 0;
}

.clear {
  clear: both;
}

.separator {
  background: url(../img/separator.png) no-repeat;
  background-position: center;
  color: #b48a76;
  text-align: center;
  margin: 28px 0 0 0;
}
@media screen and (max-width:900px) {
.separator {
  background: url(../img/separator_mini.png) no-repeat;
  background-position: center;
}}

.tax {
  font-size: 75%;
}
/*====================
 +structure
====================*/
.structure {
  width: 900px;
  margin: 0 auto;
  padding: 0 10px;
}
@media screen and (max-width:900px) {
.structure {
  width: 94%;
}}

/*====================
 +header
====================*/
#header {
  padding: 32px 0 24px 0;
  text-align: center;
  height /***/:auto;
}
@media screen and (max-width:640px) {
#header {
  padding: 24px 0 16px 0;
}

#header img {
  max-width:48%;
}}

/*====================
 +container
====================*/
#container {
  padding: 0;
  text-align: left;
  overflow: hidden;
}

#container h2 {
  font-size: 28px;
  color: #d2101d;
  margin: 32px 0;
}
@media screen and (max-width:640px) {
#container h2 {
  font-size: 24px;
  margin: 24px 0;
}}

/*====================
 +navigation
====================*/
#navi-menu-wrap {
  width: 100%;
  height: 40px;
  background: #765c47;
  margin-bottom: 1.2em;
  box-shadow: 0 1px 4px #b48a76;
}

#navi-menu {
  list-style-type: none;
  max-width:900px;
  margin: 0 auto;
  padding: 0;
}

#navi-menu li {
  display: inline-block;
  width: 16%;
  float: left;
  margin: 0;
  padding: 0;
}

#navi-menu li a {
  display: block;
  width : 100%;
  padding: 13px 0;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  padding-left: 72px;
  text-align: left;
  margin-top: -1px;
}

#navi-menu li.menu-home {
  background: url(../img/menu_home.png) no-repeat;
  background-position: left 32px top 7px;
}

#navi-menu li.menu-about {
  background: url(../img/menu_about.png) no-repeat;
  background-position: left 32px top 7px;
}

#navi-menu li.menu-menu {
  background: url(../img/menu_menu.png) no-repeat;
  background-position: left 32px top 7px;
}

#navi-menu li.menu-info {
  background: url(../img/menu_info.png) no-repeat;
  background-position: left 32px top 7px;
}

#navi-menu li.menu-bond {
  background: url(../img/menu_bond.png) no-repeat;
  background-position: left 32px top 7px;
}

#navi-menu li.menu-insta {
  background: url(../img/menu_insta.png) no-repeat;
  background-position: left 32px top 7px;
}

#navi-menu li a:hover {
  color: #f6bfbc;
  font-weight: bold;
  text-shadow: 1px 1px 4px #583822;
}

@media screen and (min-width:641px) {
#navi-menu-mb {
  display: none;
}}

@media screen and (max-width:640px) {
#navi-menu {
  display: none;
}

#navi-menu-mb {
  list-style-type: none;
  max-width:500px;
  padding: 0;
  margin: 0 auto;
}

#navi-menu-mb li {
  width: 16%;
  float: left;
  margin: 0;
  padding: 0;
}

#navi-menu-mb li a {
  display: block;
  width : 100%;
  padding: 7px 8px;
  line-height: 1;
  text-align: center;
}}

.content {
  margin-top: -48px;
  padding-top: 48px;
}
@media screen and (max-width:640px) {
.content {
  margin-top: -40px;
  padding-top: 40px;
}}

.fixed{
  position: fixed;
  top: 0px;
  left: 0px
  z-index: 9999;
}

/*====================
 +about
====================*/
#about img {
  display: block;
  margin: 32px auto;
  box-shadow: 0 1px 4px #b48a76;
}
@media screen and (max-width:640px) {
#about img {
  margin: 24px auto;
  margin-bottom: 32px;
}}

/*====================
 +menu
====================*/
@media screen and (min-width:641px) {
#lunch-menu {
  float: left;
  width: 60%;
  margin: 0;
}

#cafe-photo {
  clear: both;
  float: left;
  width: 40%;
  margin-top: 30px;
  margin-bottom: 24px;
  text-align: center;
}

#cafe-photo-mb {
  display: none;
}}

#lunch-photo {
  float: right;
  width: 40%;
  margin-top: 50px;
  text-align: center;
}

#cafe-menu {
  float: right;
  width: 57%;
  margin: 0;
}

@media screen and (max-width:900px) {
#lunch-photo {
  width: 38%;
}

#cafe-photo {
  width: 38%;
}}

@media screen and (max-width:640px) {
#lunch-photo {
  width: 100%;
  margin-top: 0;
  text-align: center;
}

#cafe-photo {
  display: none;
}

#cafe-menu {
  width: 100%;
  margin: 0;
}

#cafe-photo-mb {
  width: 100%;
  margin-bottom: 20px;
  text-align: center;
}}

p.menu {
  background: url(../img/lunch.png) left 0px top 3px no-repeat;
  margin: 0;
  padding-left: 48px;
  font-size: 20px;
  color: #d2101d;
  line-height: 1.8em;
}

p.cafe {
  background: url(../img/cafe.png) left 0px top 3px no-repeat;
  margin-top: 20px;
}

p.menu-sp {
  background: url(../img/menu_sp.png) left -4px top 0px no-repeat;
  margin: 1.2em 0 0.5em 0;
  padding-left: 22px;
}

.menu-level1 {
  margin: 1.2em 0 1.2em 8px;
}

.menu-level2 {
  margin: 0.5em 0 1.0em 6px;
}

#menu ul {
  list-style-type: disc;
  margin-left: 36px;
}

#cafe-menu ul {
  margin-left: 22px;
}

@media screen and (max-width:640px) {
p.menu {
  background: url(../img/lunch.png) left 4px top 4px no-repeat;
  padding-left: 46px;
  font-size: 19px;
}
p.cafe {
  background: url(../img/cafe.png) left 4px top 4px no-repeat;
}

p.menu-sp {
  background: url(../img/menu_sp.png) left -4px top 2px no-repeat;
  margin: 1.0em 0 0.4em 0;
  padding-left: 22px;
}

.menu-level1 {
  margin: 1.0em 0 1.0em 6px;
}

.menu-level2 {
  margin: 0.4em 0 0 6px;
}

#menu ul {
  margin-left: 34px;
}

#cafe-menu ul {
  margin-left: 22px;
}}

/*====================
 +info
====================*/
@media screen and (min-width:641px) {
#info-text {
  float: left;
  width: 60%;
  margin: 0;
}}

#info-map {
  float: right;
  width: 40%;
  margin: 0;
  margin-bottom: 32px;
  text-align: center;
}
#info-map img {
  box-shadow: 0 1px 4px #b48a76;
}

#info-text table td {
  padding-bottom: 0.4em;
}

#info-text table td.title {
  vertical-align: top;
  width: 88px;
}

#info-text table td.last {
  padding-bottom: 0;
}

@media screen and (max-width:900px) {
#info-map {
  width: 38%;
}}
@media screen and (max-width:640px) {
#info-map {
  width: 100%;
  margin: 12px 0 32px 0;
  text-align: center;
}
#info-map img {
  max-width: 80%;
}}

/*====================
 +bond
====================*/
#bond img {
  box-shadow: 0 1px 4px #b48a76;
  width: 19%;
  height: auto;
  margin: 3px;
}
@media screen and (max-width:640px) {
#bond img {
  width: 32%;
  height: auto;
  margin: 2px;
}}

/*====================
 +footer
====================*/
#footer {
  padding: 32px 0;
  text-align: center;
  color: #d2101d;
}

#bond-img {
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
}