@CHARSET "UTF-8";
/* ===================================================================
フォントの指定
=================================================================== */
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Medium"); }
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Bold"); font-weight: bold; }

/* ゴシック体 */
html body{
  font-family: -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* 明朝体
html body{
  font-family: "游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}*/
/* ================================================================ */

html body{ background: #424c6f; margin: 0; color: #fff;}
html body #container{ line-height: 1.5; }
img{ display: block; }

/* フォントサイズ設定 */
@media screen and (max-width: 480px){
  html{ font-size: 13px !important; }
}
@media screen and (min-width: 481px) and (max-width: 640px){
  html{ font-size: 14px !important; }
}
@media screen and (min-width: 641px){
  html{ font-size: 16px !important; }
}


/* ===================================================================
ベース
=================================================================== */
article { margin: 1rem auto 0;}

#container.area_flex{
  min-height: 100vh;
  -webkit-box-direction:normal;
  -moz-box-direction:normal;
  -webkit-box-orient:vertical;
  -moz-box-orient:vertical;
  -webkit-flex-direction:column;
  -moz-flex-direction:column;
  flex-direction:column;
}

#container .size {
  margin-left: auto;
  margin-right: auto;
}


#container{}
#container a { color: #fff;}


/* header */
header{ font-size: 18px !important; margin-top: .3rem;}
header .reserve_btn { margin-top: 1rem;}
#container nav.area_pc{
  
  background: #2f3444;
}
  nav #main_menu{
    margin: 0 auto;
    text-align: center;
  }
  nav #main_menu > .flex-item{
    color: #fff;
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none;
    padding: 1.6rem;
  }
  nav #main_menu .flex-item:hover{ background: #8c909d; color: #fff!important;}
.logo { width: 40%;}


/* footer */
footer {
  margin-top: 3rem;
  padding-top: 5rem;
  background-color: #2f3444;
}
footer a { color: #fff;}
footer .sns { margin-bottom: 3rem;}


/* copyright */
#bsc-copyright{
  font-size: .7em;
  text-align: left;
}
#copyright {
  font-size: .8em;
  text-align: center;
  margin-top: 3rem;
}

/* ===================================================================
pc nav固定
=================================================================== */
.nav_is-fixed{
  z-index: 50;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

/* ===================================================================
見出し
=================================================================== */
h1{
  font-size: 1.5rem;
  margin: 1rem 0;
}
h1 a { color: #fff; text-decoration: none;}
#sp_menu h1 { margin-left: .5em; color: #fff;}

#wrapper *+h2,
#wrapper *+h3,
#wrapper *+h4,
#wrapper *+h5{
  margin-top: 2rem;
}
h2{
  font-size: 1.3rem;
  display: inline-block;
  border-bottom: 3px solid #f79646;
  margin-bottom: 2rem;
}
h3{
  font-size: 1.1rem;
  text-align: center;
  margin-bottom: 1.5rem;
}
h4{ text-align: center;}
h5{ }

/* ===================================================================
section
=================================================================== 
#wrapper section { margin-top: 6rem; } */

/* ===================================================================
テキスト
=================================================================== */
.fc_red { color: #ff1d1d;}
.bold { font-weight: bold;}


/* ===================================================================
汎用
=================================================================== */
/* ページトップに戻る */
#totop {
  z-index:2147483647;
  display: none;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
}

#totop a {
  display: block;
  width: 2rem;
  height: 2rem;
  background: #333;
  text-align: center;
  color: #fff;
  text-decoration: none;
  line-height: 2rem;

  border-radius: 50%;            /* CSS3草案 */  
  -webkit-border-radius: 50%;    /* Safari,Google Chrome用 */
  -moz-border-radius: 50%;       /* Firefox用 */
  text-decoration: none ! important;
}

#totop a:hover{
  -webkit-filter: opacity(0.7);
  -moz-filter: opacity(0.7);
  -o-filter: opacity(0.7);
  -ms-filter: opacity(0.7);
  filter: opacity(0.7);
}

.conversion {
  display: flex;
  width: 100%;
  position: fixed;
  bottom: 0;
}
.conversion img { width: 100%;}

.reserve_btn a {
  display: block;
  text-decoration: none;
  color: #fff;
  background-color: #f79646;
  padding: .8rem;
}


/* ===================================================================
area
=================================================================== */

#notice {
  margin-top: 6rem;
  border: 1px solid #fff;
  text-align: center;
}
#notice div + div { margin-top:1.3rem;}
#notice a { color: #fff !important; text-decoration: none;}

#kodawari .kodawari_item {
  flex-basis: 49%;
/*  background-color: #484f69;	*/
  border: 1px solid #fff;
  padding: .8rem;
}
#kodawari .kodawari_item h4 {
  font-size: 1.1em;
  text-align: center;
  margin-bottom: .6rem;
}
#kodawari .kodawari_item .kodawari_img {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: .8rem;
}
#kodawari .kodawari_item + .kodawari_item { margin-top: 2rem;}

#course .course_item { margin: 3rem 0;}
#course .course_txt {
  background-color: rgba(47,52,68,.9);
  padding: 1.2rem;
}
#course .course_txt .reserve_btn {
  margin-top: 1.5rem;
  text-align: center;
}
#course ul li { margin-bottom: 2rem;}

#menu .menu_txt {
  width: 65%;
  margin: 0 auto;
}

#menu ul li ,#photo ul li { position: relative;}
#menu ul li div.bk_gradation ,#photo ul li div.bk_gradation {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#89796c+0,292b3d+100&0+0,1+100 */
  background: -moz-linear-gradient(top,  rgba(137,121,108,0) 0%, rgba(41,43,61,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(137,121,108,0) 0%,rgba(41,43,61,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(137,121,108,0) 0%,rgba(41,43,61,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0089796c', endColorstr='#292b3d',GradientType=0 ); /* IE6-9 */
  padding-top: 2rem;
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}
#menu img ,#photo img { width: 100%;}


#store table { width: 100%;}
#store table tr + tr { border-top: 1.5px solid #fff;}

#access a { color: #fff; text-decoration: none;}
#access ul.address ,#access p {
  margin: 1rem auto;
  width: 17rem;
}


/* ===================================================================
media screen
=================================================================== */
/* スマホ */
@media screen and (max-width: 640px){
  .sp_main-img { margin-top: 3.5rem;}
  #wrapper section { padding-top: 3.5rem; } 

  #wrapper .disp-flex { display: inline;}
  #kodawari .kodawari_item .kodawari_img { width: 100%;}
  #course img { width: 100%;}
  #menu .menu_txt { width: 100% !important;}
  #photo ul li, #menu ul.uresuji li {
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 1.5rem;
  }
  #photo ul li div.bk_gradation, #menu ul li div.bk_gradation { font-size: 1.2rem;}
  #store table tr,
  #store table th,
  #store table td{
    text-align: left !important;
    max-width: 100% !important;
    display: block;
  }
  #store table td{
    max-width: 100%;
    min-height: 2.5em;
     margin-bottom: .5rem;
  }
  #store table{
    width: 100% !important;
  }
  #store table tr > th { margin-top: .5rem;}

}

/* タブレット1 */
@media screen and (min-width: 641px){
  #wrapper section:not(#notice) { padding-top: 6rem; } 
  .conversion ,.sp_main-img { display: none !important;}

  #kodawari .kodawari_item.lunch .kodawari_txt { margin-left: 1rem;}
  #course .course_item { padding: 0 2rem;  }
  #course .course_txt {
    width: 50%;
    height: 10em;
    margin: 0 auto;
  }
  #menu .menu_txt ul.select_sauce li { width: 29%;}
  #menu .menu_txt ul.takeout li { width: 46%;}
  #store table tr * { padding-top: 1rem; padding-bottom: 1rem;}
  #store table tr th {
    text-align: left;
    vertical-align: middle;
    padding-left: .5rem;
  }
}

/* タブレット2以下 */
@media screen and (max-width: 800px){
  
  
}


/* タブレット2以上 */
@media screen and (min-width: 801px){

}

/* ipad */
@media screen and (min-width: 801px) and (max-width: 1024px){

}

/* ipad以下 */
@media screen and (max-width: 1024px){
  .size {
    padding-left: .8rem;
    padding-right: .8rem;
    width: 100%;
  }
}

/* PC */
@media screen and (min-width: 1025px){
  .size { width: 1000px;}
}