@charset "utf-8";

#restaurant_page * {
  padding: 0;
  margin: 0;
  font-family: 'Kozuka Mincho Pro', 'Kozuka Mincho Std', '小塚明朝 Pro R', '小塚明朝 Std R', 'Hiragino Mincho Pro', 'ヒラギノ明朝 Pro W3', 'ＭＳ Ｐ明朝', 'Times', 'Times New Roman', serif !important;
  color: #605611;
}

#restaurant_page body {}

#restaurant_page h1 {
  font-size: 200%;
}

#restaurant_page h2 {
  font-size: 150%;
}

#restaurant_page h3 {
  font-size: 120%;
}

#restaurant_page h4 {
  font-size: 100%;
}

#restaurant_page h5 {
  font-size: 80%;
}

#restaurant_page a {
  font-size: 18px;
}

/*********************　TOP　*********************/
/* TOPの大枠 */
#restaurant_page .restaurant_top {
  background-image: url("../img/gourmet/restaurant_top.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  height: 85vh;
  min-width: 1200px;
}

/* タイトルを入れてる箱 */
#restaurant_page .restaurant_top .title {
  text-align: center;
  padding-top: 240px;
}

/* タイトルたち */
#restaurant_page .restaurant_top .title h1,
#restaurant_page .restaurant_top .title h3 {
  color: white;
  text-shadow: 0px 0px 5px #000;
  filter:dropshadow(color=#000000,offX=0,offY=0);
}

/* 選択ボタンを入れてる箱 */
#restaurant_page .restaurant_top .select_button {
  display: inline-block;
  position: absolute;
  bottom: 200px;
  /* 1つの箱が250pxで、箱と箱との間が50pxなので,250px*2 +50px = 550px */
  width: 550px;
  /* つまり、ここの幅で50px分を確保してる */
  /* abusoluteを噛ました状態で、左右中央に配置する方法　参考:https://youknow.jp/web/css-position */
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* 選択ボタンのホバー */
#restaurant_page .restaurant_top .select_button a {
  /*opacity: 0.7;*/
	/* ボタンの背景色変更 */
	background-color: rgba(0, 0, 0, 0.3);
}

/* 選択ボタンのホバー */
#restaurant_page .restaurant_top .select_button a:hover {
  /*opacity: 1;*/
	/* ボタンの背景色変更 */
	background-color: rgba(0, 0, 0, 0.5);
}

/* Monthly Menuのボタン */
#restaurant_page .restaurant_top #select_button_left {
  float: left;
  border: solid 1px #ffffff;
  padding: 10px 15px;
  /* h2タグと同じサイズ */
  font-size: 150%;
  width: 250px;
  color: white;
  text-align: center;
}

/* Grand Menuのボタン */
#restaurant_page .restaurant_top #select_button_right {
  float: right;
  border: solid 1px #ffffff;
  padding: 10px 15px;
  /* h2タグと同じサイズ */
  font-size: 150%;
  width: 250px;
  color: white;
  text-align: center;
}

/* ボタンの横にある、くの字の矢印 */
#restaurant_page .arrow_right {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  transform: rotate(45deg);
}

/*********************　TOP　*********************/
/********************* Monthly Menu *********************/
/* Monthly Menuの大枠 */
#restaurant_page .monthly_menu {
  background-color: #f5f1d4;
  padding-top: 100px;
  padding-bottom: 100px;
}

/* ロゴ画像 */
#restaurant_page .monthly_menu .monthly_title {
  width: 960px;
  text-align: center;
  margin: 0 auto;
}

/* タイトル */
#restaurant_page .monthly_menu .monthly_title h1 {
  color: #605611;
  padding-bottom: 50px;
}

/* *****各メニュー***** */
/* 各メニューの大枠 */
#restaurant_page .monthly_menu .monthly_category {
  width: 960px;
  display: inline-block;
  /* フォントの間隔(nomalで普通の間隔になる) */
  letter-spacing: 3px;
  box-sizing: border-box;
  vertical-align: top;
  /* 中央揃え */
  padding-top: 50px;
  margin-left: calc( (100% - 1300px) / 2);
}

/* 各メニューの枠 */
#restaurant_page .monthly_menu .monthly_category div {
  margin-bottom: 30px;
}

/* 左の画像 */
#restaurant_page .monthly_menu .monthly_category div .monthly_photo {
  float: left;
  width: 36%;
  text-align: center;
}

/* 画像は元の比を保ったまま、画像エリアいっぱいに表示させる(それでも親要素の36%が限度だけど) */
#restaurant_page .monthly_menu .monthly_category div .monthly_photo img {
 /* width: 100%;
  height: auto;*/	/* WP上で悪さをするので、消した */
}

/* 右のテキストたちの箱 */
#restaurant_page .monthly_menu .monthly_category .monthly_outline {
  float: right;
  width: 60%;
  text-align: center;
}

/* なくてもOK */
#restaurant_page .monthly_menu .monthly_category>.monthly_outline {
  float: none;
  width: 100%;
}

/* タイトルたちを中央寄せ */
#restaurant_page .monthly_menu .monthly_category .monthly_outline .monthly_monthly_title_wrap {
  text-align: center !important;
}

/* タイトルを太字に */
#restaurant_page .monthly_menu .monthly_category .monthly_outline .monthly_title_wrap h3 {
  font-weight: bold;
  line-height: 24px;
  font-size: 24px;
  padding-top: 30px;
}

/* タイトルを太字に */
#restaurant_page .monthly_menu .monthly_category .monthly_outline .monthly_title_wrap h4 {
  font-size: 18px;
  margin-top: 10px;
}

/* タイトルとサブタイトル */
#restaurant_page .monthly_menu .monthly_category .monthly_outline .monthly_title_wrap h3 {
  padding-top: 30px;
  line-height: 1.5em;
}

/* 値段 */
#restaurant_page .monthly_menu .monthly_category .monthly_outline .monthly_price {
  text-align: right;
  padding-bottom: 30px;
  /* フォントの間隔(nomalで普通の間隔になる) */
  letter-spacing: normal;
  font-size: 18px;
}

/* 説明文 */
#restaurant_page .monthly_menu .monthly_category .monthly_outline .txt {
  text-align: left;
  font-size: 18px;
  line-height: 1.5em;
  padding-left: 30px;
}

/********************* Monthly Menuここまで *********************/
/********************* Grand Menu *********************/
/* Grand Menuの大枠 */
#restaurant_page .grand_menu {
  background-color: #ffffff;
  padding-top: 100px;
  padding-bottom: 100px;
}

/* ここで分割の指示を出す */
#restaurant_page .grand_menu .grand_category {
  display: flex;
  width: 1200px;
}

/* ここでどう分割するかの指示を出す(均等幅に分割する) */
#restaurant_page .flex {
  justify-content: space-around;
  margin: 0 auto;
  padding-bottom: 50px;
}

/* ロゴ画像 */
#restaurant_page .grand_menu .garnd_title {
  text-align: center;
  margin: 0 auto;
}

/* タイトル */
#restaurant_page .grand_menu .garnd_title h1 {
  color: #ab8f44;
  padding-bottom: 50px;
  font-weight: bold;
}

/* 左の箱 */
#restaurant_page .grand_menu .grand_category .grand_left {
	/* 左に寄せる */
	margin-right: auto;
}

/* 右の箱 */
#restaurant_page .grand_menu .grand_category .grand_right {
	/* 右に寄せる */
	margin-left: auto;
}

/* 各ジャンルの画像 */
#restaurant_page .grand_menu .grand_category .grand_subject {
  width: 550px;
  margin: 0 auto;
}

/* 料理名と価格と画像を入れてる箱 */
#restaurant_page .grand_menu .grand_category .grand_outline {
  /* フォントの間隔(nomalで普通の間隔になる) */
  letter-spacing: 2px;
}

/* 料理名と価格を入れてる箱 */
#restaurant_page .grand_menu .grand_category .grand_outline .grand_title_wrap {
  /*
  float: left;
  width: 64%;
  line-height: 1.5em;
	*/
  width: 550px;
}

/* 料理名を入れてる箱 */
#restaurant_page .grand_menu .grand_category .grand_outline .grand_title_wrap .grand_title_left {
  float: left;
}

/* 料理名 */
#restaurant_page .grand_menu .grand_category .grand_outline .grand_title_wrap h4,
#restaurant_page .grand_menu .grand_category .grand_outline .grand_title_wrap h5 {
  /* 550px - 144px = 406px 144pxの理由は後述 */
  width: 406px;
  line-height: 1.5em;
  /* 色を変える際はこれを消せばOK! */
  /*
	color: #ab8f44;*/
}

/* 料理名(タイトル) */
#restaurant_page .grand_menu .grand_category .grand_outline .grand_title_wrap h4 {
  font-weight: bold;
  padding-top: 30px;
}

/* 価格 */
#restaurant_page .grand_menu .grand_category .grand_outline .grand_title_wrap .grand_price {
  padding-top: 32px;
  letter-spacing: normal;
  text-align: right;
  float: right;
  vertical-align: bottom;
  /* 1文字18pxで、8文字文のwidthを取るので144px(本当は6文字分のwidthでOKだけど、めーにゅとの余白を2文字分ほしかったので、8文字分にした) */
  width: 144px;
  /* 色を変える際はこれを消せばOK! */
  /*
	color: #ab8f44;*/
  /* 苦肉の策 */
  /*
	position: absolute;
	padding-top:33px;
	padding-left: 500px;*/
}

/* 画像を入れてる箱(左右共通) */
#restaurant_page .grand_menu .grand_category .grand_photo {
  width: 80%;
  display: inline-block;
  padding-top: 50px;
  padding-left: 90px;
}

/* 画像(左右共通) */
#restaurant_page .grand_menu .grand_category .grand_photo img {
  height: auto;
  width: 50%;
  /* 親要素(の幅が50%)のさらに50%の幅なので、25% */
  display: inline-block;
  /* ここでfloatをleftにすると、先に読み込まれる方が左に表示される */
  float: left;
}

/* **************** TOPへ戻る
参考:https://giga-log.com/homepage/pagetop-button/#i **************** */
/*パソコン・スマホ共通のCSS*/
#restaurant_effect #PageTopBtn {
  position: fixed;
  /*ボタンの配置場所を固定*/
  bottom: 10px;
  /*下からのボタンの配置場所を指定*/
  right: 10px;
  /*右からのボタンの配置場所を指定*/
}

/* 球体の中にある矢印の位置を制御する */
#restaurant_effect #PageTopBtn i {
  padding-top: 8px;
}

#restaurant_effect #PageTopBtn a {
  display: block;
  /*配置の調整*/
  text-decoration: none;
  /*文字の下線を消す*/
  color: #fff;
  /*文字の色*/
  background: #9bbad9;
  /*ボタンの背景色*/
  text-align: center;
  /*文字を中央に配置*/
  border-radius: 50%;
  /*ボタンの角を少し丸くする*/
  outline: none;
  /*クリックしたときの黒い枠を消す*/
}

#restaurant_effect #PageTopBtn a:hover {
  text-decoration: none;
  background: #a5baff;
  /*マウスオーバー時の背景色*/
}

/*パソコンで表示する場合のCSS*/
@media (min-width: 768px) {
  #restaurant_effect #PageTopBtn {
    font-size: 25px;
    /*文字のサイズ*/
		/* draggableのため */
		z-index: 100;
  }

  #restaurant_effect #PageTopBtn a {
    width: 50px;
    /*ボタンの幅*/
    height: 50px;
    /*ボタンの高さ*/
    padding: 5px 0;
    /*文字の配置場所の調整*/
  }
}

/*スマホで表示する場合のCSS*/
@media (max-width: 767px) {
  #restaurant_effect #PageTopBtn {
    font-size: 20px;
		/* draggableのため */
		z-index: 100;
  }

  #restaurant_effect #PageTopBtn a {
    width: 50px;
    height: 50px;
    padding: 8px 0;
  }
}

/* **************** TOPへ戻るここまで **************** */