@charset "utf-8";


/* リセットCSS（sanitize.css）の読み込み */
@import url("https://unpkg.com/sanitize.css");

/* Google Fontsの読み込み */
@import url('https://fonts.googleapis.com/css2?family=Tangerine&display=swap');

/* slick.cssの読み込み */
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");

/* inview.cssの読み込み */
@import url("inview.css");



/* 全体の設定 */
html, body {
  overflow-x: hidden;
  font-size: 14px;
}

body {
  font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  -webkit-text-size-adjust: none;
  background: #f8f8f8;
  color: #8a8878;
  line-height: 2;
}

/*マージンのリセット*/
figure {
  margin: 0;
}
dd {
  margin: 0;
}

table {
  border-collapse: collapse;
}

img {
  border: none;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/*section全般の設定*/
section+section {
  /*sectionの間に空けるスペース*/
  padding-top: 30px;
}

video {
  max-width: 100%;
}

iframe {
  width: 100%;
}


/*opa1（透明から着色状態に）
---------------------------------------------------------------------------*/
@keyframes opa1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

a {
  color: #8a8878;
}

a:hover {
  color: #999;
}

/*container。サイト全体を囲むブロック。
---------------------------------------------------------------------------*/
#container {
  margin: 0 auto;
  /*最大幅。これ以上幅が広がらないように。*/
  max-width: 1400px;
  /*上下、左右へのブロック内の余白*/
  padding: 0 10px;
}

/*headerブロック（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*トップページの画像ロゴ(png画像)設定*/
.home header #logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /*ロゴ画像の幅*/
  width: 300px;
  /*@keyframesの指定*/
  animation-name: opa1;
  /*アニメーションの実行時間*/
  animation-duration: 3S;
  /*アニメーションの待機中は最初のキーフレームを維持、終了後は最後のキーフレームを維持。*/
  animation-fill-mode: both;
}

/*トップページの画像ロゴ(png画像)を、デフォルトでは非表示にする*/
.home header #logo {
  display: none;
}

/*ロゴアニメーションを使わない場合の設定*/
.home.index2 header #logo {
  display: block;
}
.home.index2 svg {
  display: none;
}

/*トップページ以外のロゴ画像の幅*/
header #logo {
  width: 150px;
}

/*mainブロック
---------------------------------------------------------------------------*/
main {
  /*下に空けるスペース*/
  margin-bottom: 100px;
}

/*ブロック内のh2タグ*/
main h2 {
  /*透明度。0は色が出ていない(0%)状態の事。*/
  opacity: 0;
  /*文字をセンタリング*/
  text-align: center;
  font-family: 'Tangerine', cursive, "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka;
  /*hタグはデフォルトで太字なので、これを標準にする*/
  font-weight: normal;
  /*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
  font-size: 4rem;
  /*下に空けるスペース*/
  margin-bottom: 30px;
}

/*ブロック内のh2タグ内のspanタグ（日本語の小さい説明用部分）*/
main h2 span {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
}

/*spanタグの前に「〜」を出力する指定*/
main h2 span::before {
  content: "〜";
  padding-right: 10px;
}

/*spanタグの後に「〜」を出力する指定*/
main h2 span::after {
  content: "〜";
  padding-left: 10px;
}

/*ブロック内のh3タグ*/
main h3 {
  /*hタグはデフォルトで太字なので、これを標準にする*/
  font-weight: normal;
  /*文字をセンタリング*/
  text-align: center;
  /*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
  font-size: 1.6rem;
  /*上下、左右へとる余白*/
  margin: 50px 0;
}

/*mainブロックのpタグ*/
main p {
  margin: 0 5px 30px;
}

/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーブロック*/
#menubar_hdr {
  display: block;
  position: fixed;
  z-index: 100;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  cursor: pointer;
  /*背景色、背景画像の読み込み、画像の上半分（３本マーク）を表示。幅は50px。*/
  background: rgba(0, 0, 0, 0.6) url(../img/icon_menu.png) no-repeat center top/50px;
}

/*×印が出ている状態の設定。*/
#menubar_hdr.close {
  /*背景色、背景画像の読み込み、画像の下半分（×マーク）を表示。幅は50px。*/
  background: #ff0000 url(../img/icon_menu.png) no-repeat center bottom/50px;
}

/*メニューの設定
---------------------------------------------------------------------------*/
#menubar ul {
  list-style: none;
}

/*ボックス全体の設定*/
#menubar {
  /*デフォルトで非表示にしておく*/
  display: none;
  /*@keyframesの指定*/
  animation-name: opa1;
  /*アニメーションの実行時間*/
  animation-duration: 1S;
  /*アニメーションの待機中は最初のキーフレームを維持、終了後は最後のキーフレームを維持。*/
  animation-fill-mode: both;
  position: fixed;
  overflow: auto;
  z-index: 99;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  /*ボックス内の余白*/
  padding: 50px;
  text-align: center;
  background: rgba(0, 0, 0, 0.8);
  font-size: 1.2rem;
}

/*メニュー１個あたりの設定*/
#menubar li {
  margin-bottom: 20px;
}

#menubar a {
  display: block;
  text-decoration: none;
  text-align: center;
  background: #fff;
  color: #000;
  border-radius: 5px;
  /*ボックスの影。右へ、下へ、ぼかし幅、範囲。255,255,255は白の事で0.4は色が40%出た状態の事。*/
  box-shadow: 0px 0px 50px 10px rgba(255, 255, 255, 0.4);
  padding: 5px;
}

/*メニュー内のspanタグ（小さい日本語部分）*/
#menubar span {
  display: block;
  font-size: 0.7rem;
}

/*フッター設定
---------------------------------------------------------------------------*/
footer small {
  font-size: 100%;
}

footer {
  font-size: 0.6rem;
  text-align: center;
  padding: 20px;
}

footer a {
  text-decoration: none;
}

footer .pr {
  display: block;
}

/*フッターにあるアイコン類
---------------------------------------------------------------------------*/
/*アイコン類を囲むブロック*/
ul.icon {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: 30px;
}

/*アイコン１個あたりの設定*/
ul.icon li {
  display: inline-block;
}

/*アイコン画像の設定*/
ul.icon img {
  width: 30px;
}

/*画像のマウスオン時*/
ul.icon img:hover {
  opacity: 0.8;
}

/*お知らせブロック
---------------------------------------------------------------------------*/
.news {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flex-item {
  width: 33%;
}

.flex-item :hover {
  opacity: 0.8;
}

.image-wrap {
  position: relative;
  overflow: hidden;
  padding-top: 100%;
  margin: 10px 5px;
}

.image-wrap img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-wrap video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*menu.htmlの画像配置のコンパクトメニュー部分
---------------------------------------------------------------------------*/
/*listボックスを囲むボックス*/
.list-container {
  display: flex;
  flex-wrap: wrap;
  padding: 0 5px;
}

/*１個あたりのボックス*/
.list {
  width: 49%;
  margin-right: 2%;
  margin-bottom: 15px;
  text-align: center;
  font-size: 0.7rem;
}

/*2の倍数(偶数番目)のボックスへの追加指定*/
.list:nth-of-type(2n) {
  margin-right: 0;
}

/*ボックス内のh4タグ。メニュータイトルを入力しているスペースです。*/
.list h4 {
  margin: 10px 0 0;
  font-weight: normal;
}

/*ボックス内のpタグ。価格を入力しているスペースです。*/
.list p {
  /*「main p」のマージンをリセットする*/
  margin: 0 !important;
}

/*トップページの「今週のランチ」ブロック
---------------------------------------------------------------------------*/
/*写真とメニュー解説テキストを囲むブロック*/
.list2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}

/*list2ブロック内のh4タグ*/
.list2 h4 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: normal;
  text-align: center;
}

/*写真下の小さなテキスト*/
.list2 figcaption {
  margin-top: 20px;
  font-size: 0.7rem;
}

/*list2ブロック内のfigureタグ。写真を囲むブロック。*/
.list2 figure {
  width: 90%;
  text-align: center;
}

/*料理写真*/
.list2 figure img {
  /*写真の周りに少し余白を作って、より写真っぽく見せる*/
  padding: 10px;
  /*上の10pxとの間に出る色*/
  background: #fff;
  /*ボックスの影。右へ、下へ、ぼかし幅、範囲。0,0,0は黒の事で0.1は色が10%出た状態の事。*/
  box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.1);
  /*左に少しだけ回転させる指定。回転させたくなければこの１行と、下の「.list2:nth-of-type(even) img」のブロックを削除。*/
  transform: rotate(-2deg);
}

/*偶数番目のimg画像*/
.list2:nth-of-type(even) img {
  /*回転を上と逆向きに。*/
  transform: rotate(2deg);
}

/*list2内のtextブロック*/
.list2 .text {
  width: 100%;
  margin-top: 20px;
}

/*list2内のリストタグ*/
.list2 li {
  margin-bottom: 10px;
}

/*list2内のリストタグ内のspanタグ。文字サイズの小さい説明テキスト部分です。*/
.list2 li span {
  display: block;
  font-size: 0.7rem;
  opacity: 0.5;
}

/*menu.htmlのテキストメニュー設定
---------------------------------------------------------------------------*/
/*テキストメニュー全体を囲むブロック*/
.textmenu {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

/*偶数番目の行の色を変更する*/
.textmenu dt:nth-of-type(odd), .textmenu dd:nth-of-type(odd) {
  /*背景色。0,0,0は黒の事で0.05は色が5%出た状態。*/
  background: rgba(0, 0, 0, 0.05);
}

/*メニュータイトル*/
.textmenu dt {
  /*「10em」は下の「.textmenu dd」のwidthの値を入れて下さい。*/
  width: calc(100% - 10em);
  padding: 10px 0px 10px 20px;
}

/*価格*/
.textmenu dd {
  /*ここを変更する場合は、上の「.textmenu dt」のwidthも変更して下さい。*/
  width: 10em;
  /*価格なので、テキストを右寄せで揃えて見やすくしておく。*/
  text-align: right;
  padding: 10px 20px 10px 0px;
}

/*トップページのスライドショー（vegasを使用）
---------------------------------------------------------------------------*/
#mainimg {
  width: 100vw;
  height: 100vh;
  /*背景色。ロゴが描画されている間表示される色です。*/
  background: #8a8878;
}

/*SVGロゴ設定*/
#svg-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  width: 300px;
  /*ここはこのままで変更しない（文字色の指定ではありません）*/
  stroke: #fff;
  /*ロゴをなぞった際の線の太さを指定して下さい。*/
  stroke-width: 12;
}

/*スクロールを促すアイコン*/
.scroll {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: 30px;
  opacity: 0.7;
}

/*テーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
  border-top: 1px solid #ccc;
  /*太字に*/
  font-weight: bold;
  /*上下、左右へのボックス内の余白。基本的に数行下の「.ta1 th, .ta1 td」のpaddingと揃えておけばOKです。*/
  padding: 10px 5px;
  /*背景色。0,0,0は黒の事で0.05は色が5%出た状態。*/
  background: rgba(0, 0, 0, 0.05);
}

/*ta1テーブルブロック設定*/
.ta1 {
  /*テーブルの一番上の線。幅、線種、色。*/
  border-top: 1px solid #ccc;
  table-layout: fixed;
  /*テーブルの両サイドに合計10px（左右各5pxずつ）の余白を作った残りを幅にします*/
  width: calc(100% - 10px);
  /*最後の「30px」がテーブルの下に空けるスペースです*/
  margin: 0 auto 30px;
}

/*tr（１行分）タグ設定*/
.ta1 tr {
  /*テーブルの下線。幅、線種、色。*/
  border-bottom: 1px solid #ccc;
}

/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td {
  /*上下、左右へのボックス内の余白*。基本的に数行上の「.ta1 caption」のpaddingと揃えておけばOKです。*/
  padding: 10px 5px;
  /*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
  word-break: break-all;
}

/*th（左側）のみの設定*/
.ta1 th {
  width: 30%;
  text-align: left;
  font-weight: normal;
}

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {
  display: block;
}

.pagetop a {
  display: block;
  text-decoration: none;
  text-align: center;
  width: 50px;
  line-height: 50px;
  position: fixed;
  right: 30px;
  bottom: 30px;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid #fff;
}

/*マウスオン時*/
.pagetop a:hover {
  background: rgba(0, 0, 0, 0.8);
}

/*その他
---------------------------------------------------------------------------*/
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.color-theme, .color-theme a {
  color: #f1c734 !important;
}
.color-check, .color-check a {
  color: #f00 !important;
}
.c {
  text-align: center !important;
}
.ws {
  width: 95%;
  display: block;
}
.wl {
  width: 95%;
  display: block;
}
.large {
  font-size: 2rem;
}
.mb30 {
  margin-bottom: 30px !important;
}
.look {
  display: inline-block;
  border: 1px solid #ccc;
  padding: 5px 20px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 5px;
  margin: 5px 0;
}
.ofx {
  overflow-x: hidden;
}

.flyer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 30px 0px 0px;
}

.flyer img {
  width: 98%;
  margin-bottom: 20px;
}


/*---------------------------------------------------------------------------
ここから下は画面幅800px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:800px) {
  /*全体の設定
---------------------------------------------------------------------------*/
  html, body {
    /*基準となるフォントサイズの上書き*/
    font-size: 18px;
  }

  /*section全般の設定*/
  section+section {
    padding-top: 50px;
  }

  /*container。サイト全体を囲むブロック。
---------------------------------------------------------------------------*/
  #container {
    padding: 0 50px;
  }

  /*menu.htmlの画像配置のコンパクトメニュー部分
---------------------------------------------------------------------------*/
  /*１個あたりのボックス*/
  .list {
    width: 23%;
    /*ボックス同士の左右間の余白。ボックスを4列並べるので、23%×4個=92%。100%との差の8%分をボックス間にある余白3個分で割った数字がここに入ります。※下の「.list:nth-of-type(2n)」の数字と合わせる。*/
    margin-right: 2.66%;
    /*ボックス同士の上下間の余白*/
    margin-bottom: 25px;
  }

  /*2の倍数(偶数番目)のボックスへの追加指定*/
  .list:nth-of-type(2n) {
    margin-right: 2.66%;
  }

  /*4の倍数のボックスへの追加指定*/
  .list:nth-of-type(4n) {
    margin-right: 0;
  }

  /*トップページの「今週のランチ」ブロック
---------------------------------------------------------------------------*/
  /*写真とメニュー解説テキストを囲むブロック*/
  .list2 {
    flex-direction: row;
    margin-bottom: 100px;
  }

  /*偶数番目のlist2ブロック*/
  .list2:nth-of-type(even) {
    /*配置を左右逆にする*/
    flex-direction: row-reverse;
  }

  /*list2ブロック内のfigureタグ。写真を囲むブロック。*/
  .list2 figure {
    width: 48%;
  }

  /*list2内のtextブロック*/
  .list2 .text {
    width: 48%;
    margin-top: 0;
  }

  /*テーブル
---------------------------------------------------------------------------*/
  /*テーブル１行目に入った見出し部分（※caption）*/
  .ta1 caption {
    padding: 20px 15px;
  }

  /*th（左側）、td（右側）の共通設定*/
  .ta1 th, .ta1 td {
    padding: 20px 15px;
  }

  /*th（左側）のみの設定*/
  .ta1 th {
    width: 20%;
  }

  /*その他
---------------------------------------------------------------------------*/
  .ws {
    width: 45%;
    display: inline-block;
  }

  .flyer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 30px 5px 50px;
  }

  .flyer img {
    width: 49%;
    margin-bottom: 20px;
  }
}