@charset "UTF-8";

.header {
  position: relative;           /* 要素の配置を相対座標に指定 */
  width: 100%;                  /* 要素の幅を100% */
  height: 0;                    /* 要素の高さを0% */
  padding-bottom: 100%;         /* 内余白の下部分を100% */
  background: url(../img/top/hero_top.jpg?210226) no-repeat center center/cover; /* 背景画像を領域を埋めるように、中央に配置 */
}

.logo {
  width: 160px;                  /* 要素の幅を60pxに */
  padding: 0px;                /* 要素の内余白を10pxに */
  background: ;             /* 背景色を白色に */
  position: absolute;           /* 要素の配置を絶対座標に指定 */
  top: 10px;                       /* 上部分を基準点から0の位置に */
  left: 10px;                   /* 左部分を基準点から20pxの位置に */
}


@media print, screen and (min-width: 768px) {
   .header {
     height: 400px;            /* 要素の高さを400pxに */
     padding-bottom: 0;        /* 内余白の下部を0pxに */
   }


}

.catch-copy, .page-title {
  text-align: center;           /* 文字を中央揃えに */
  width: 100%;                  /* 要素の幅を画面いっぱいに */
  color: #ffffff;                  /* 文字色を白色に */


  text-shadow: 0px 0px 5px #ffffff , 
        0px 0px 20px #c89932, 
        0px 0px 40px #ffffe0, 
        0px 0px 60px #ffffed,
        0px 0px 80px #ffff7f; 


  font-family: "font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif; /* フォントの種類を指定 */ font-size: 6vw; /* フォントをビューポートの6%に */
  font-weight: ;            /* 文字を太字に */
  position: absolute;           /* 要素の配置位置を絶対座標に指定 */
  top: 75%;                     /* 上部分を基準点からxx50%の位置に */
  left: 0;                      /* 左部分を基準点から0の位置に */
  -webkit-transform: translate(0, -50%); /* 要素の位置を50%分だけ上に */
  transform: translate(0, -50%);
}

.catch-copy span, .page-title span {
  border-bottom: 0px solid #fff; /* 下部分の罫線を 3px、実線、白色に */
  padding-bottom: 4px;           /* 下部分の余白を 4pxに */
}

@media print, screen and (min-width: 768px) {
.catch-copy, .page-title {
    font-size: 40px;             /* 文字サイズを50pxに */
  }
}



.heading01 {
  text-align: center;            /* 文字を中央揃えに */
  font-size: 18px;               /* 文字サイズを16pxに */
  font-weight: normal;             /* 文字を太字に */
  color: green;                   /* 文字色を黒に */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif; /* フォントの種類を指定 */
  margin-bottom: 30px;           /* 下部分の余白を 10pxに  */
}


.heading02 {
  text-align: center;            /* 文字を中央揃えに */
  font-size: 18px;               /* 文字サイズを16pxに */
  font-weight: normal;             /* 文字を太字に */
  color: #000;                   /* 文字色を黒に */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif; /* フォントの種類を指定 */
  margin-bottom: 30px;           /* 下部分の余白を 10pxに  */
}

.heading03 {
  text-align: center;            /* 文字を中央揃えに */
  font-size: 24px;               /* 文字サイズを16pxに */
  color: red;                   /* 文字色を黒に */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}  /* フォントの種類を指定 */
  margin-bottom: 30px;           /* 下部分の余白を 10pxに  */
}

.heading04 {
  text-align: center;            /* 文字を中央揃えに */
  font-size: 12px;               /* 文字サイズを16pxに */
  margin-left:100px;
  margin-right:100px;
  color: black;                   /* 文字色を黒に */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}  /* フォントの種類を指定 */
  margin-bottom: 10px;           /* 下部分の余白を 10pxに  */
}


.lead {
  font-size: 16px;               /* 文字サイズを16pxに */
  line-height: 2.0;              /* 行の高さをフォントサイズの2.0倍に */
}

.btn {
  display: block;                /* 表示形式をブロックに */
  text-align: center;            /* 文字を中央揃えに */
  width: 300px;                  /* 要素の横幅を200pxに */
  margin: 0 auto 20px;           /* 要素の外余白を上0、左右自動、下60pxに */
  background-color: #ffffcc;
  border: 2px solid #000;        /* 下部分の罫線を 2px、実線、黒色に */
  text-decoration: none;         /* 文字の装飾を無しに */
  padding: 10px 0 12px;          /* 要素の内余白を上10px、左右0、下10pxに */
  font-size: 12px;             /* 文字サイズを14pxに */
  font-weight: ;             /* 文字を太字に */
}


.btn:hover { 
  background-color: #ff003f; 
  color: #fff;
  }


.footer {
  padding: 15px 10px;            /* 内余白を上下15px、左右10pxに */
}


.copy {
  text-align: center;            /* 文字を中央揃えに */
  font-size: 1.0rem;             /* 文字サイズを1remに */
}

.globalnav {
  position: relative;            /* 表示位置を相対座標に */
  padding: 0 10px;               /* 内余白を上下0、左右10pxに */
  -webkit-transform: translate(0, -50%); /* 要素の位置を50%分だけ上に */
  transform: translate(0, -50%);
}

.globalnav li {
  display: table-cell;           /* 表示形式をテーブルセル形式に */
  text-align: center;            /* 文字を中央揃えに */
}

.globalnav li:not(:first-child) {
  border-left: 1px solid #000;   /* 罫線左を1px、実線、黒色に */
}

.globalnav li a {
  font-size: 1.3rem;             /* 文字サイズを1.3remに */
  display: block;                /* 表示形式をブロック形式に */
  background: #fffff9;              /* 背景色を白色に */
  text-decoration: none;         /* 文字装飾を無しに */
  padding: 15px 0;               /* 内余白を上下15px、左右0px */
}

.globalnav li a:hover {
  opacity: 1;                    /* 不透明度を1に */
  background: #ffaf60;            /* 背景色を黒色に */
  color: #fff;                 /* 文字色を白色に */
  }


.globalnav-list {
  width: 100%;                   /* 要素の幅を100%に */
  max-width: 1920px;              /* 要素の最大幅を800pxに */
  margin: 0 auto;                /* 外余白の上下を0、左右を自動に */
  display: table;                /* 表示形式をテーブル形式に */
  table-layout: fixed;           /* テーブルレイアウトを固定に */
  border: 1px solid #000;        /* 罫線を1px、実線、黒色に */
}


.wrapper {
  max-width: 1920px;               /* 最大の画面幅を960pxに */
  margin: 0 auto;                 /* 外余白を上下0、左右自動に */
  padding: 0 4%;                  /* 内余白を上下0、左右4%に */
}

.lead {
  padding: 30px 0;                /* 内余白を上下30px、左右0に */
}

  .lead {
    width: 1800px;                 /* 要素幅を800pxに */
    margin: auto;                 /* 外余白を自動に */
    text-align: left;           /* 文字を中央揃えに */
  }

.lead-title {
  font-size: 25px;                /* 文字サイズを25pxに */
  margin-bottom: 10px;            /* 外余白の下部を10pxに */
  font-weight: bold;              /* 文字を太字に */
  line-height: 1.2;               /* 行の高さをフォントサイズの1.2倍に */
  text-align: center;
  font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; /* フォントの種類を指定 */
}

.menu {
  padding: 15px 0;                /* 内余白を上下15px、左右0に */
  border-bottom: 1px solid #eee;  /* 罫線を下部1px、実線、灰色で */
  list-style: none;               /* リストの黒丸をなしに */
}

@media print, screen and (min-width: 768px) {
  .menu-wrap {
    display: -webkit-flex;        /* 子要素を並列に */
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;      /* flexで並べた要素を複数行に */
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .menu {
    width: 25%;                /* 要素幅を33.33%に */
    padding: 0 5px;              /* 内余白を上下0px、左右30pxに */
    margin-bottom: 20px;          /* 外白下部を60pxに */
    border-bottom: none;          /* 罫線下部を無しに */
  }
}


.menu-img {
  margin-bottom: 20px;            /* 外白下部を20pxに */
}

.menu-name-en {
  font-size: 18px;                /* 文字サイズを20pxに */
  font-family: 'Yu Gothic', 'YuGothic', 'Meiryo', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN','Arial', serif; /* フォントの種類を指定 */
  font-weight: bold;              /* 文字を太字に */
  margin-bottom: 10px;            /* 外余白の下部を15pxに */
}

.menu-name-ja {
  font-size: 16px;                /* 文字サイズを14pxに */
  font-weight: bold;              /* 文字を太字に */
  margin-bottom: 10px;            /* 外余白の下部を15pxに */
}

.menu-price {
  font-size: 14px;                /* 文字サイズを14pxに */
  display: -webkit-flex;          /* 子要素を並列に */
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between; /* 並列になった要素の幅を均等に */
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.menu-price + .menu-price {
  margin-top: 5px;                /* 外余白の下部を5pxに */
}

.menu-category {
  margin-bottom: 20px;            /* 外余白の下部を60pxに */
}