@charset "UTF-8";
*:target {
  scroll-margin-top: 80px;
}
.pc {
  display: none !important;
}
.sp {
  display: block !important;
}
.tab {
  display: none !important;
}
@media (max-width: 600px) {
  .sp_none {
    display: none !important;
  }
}
@media (min-width: 600px) and (max-width: 767px) {
  .tab {
    display: block !important;
  }
  .sp {
    display: block !important;
  }
  .pc {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .pc {
    display: block !important;
  }
  .sp {
    display: none !important;
  }
  .tab {
    display: block !important;
  }
}
/* 共通 */
html,
body {
  overflow-x: hidden;
}
img {
  width: 100%;
}
a {
  transition: 0.3s;
}
a:hover {
  opacity: 0.7;
  cursor: pointer;
}
/********************  変数 ********************/
/*
  デザインデータは横768pt。
  PC：カード等（640pt）が968px、768pt → 1161.6px で表示。左右の余白は2/3（x21.33〜746.67を表示）。それより狭い画面では比率を保って縮小し、767px以下でSP
  SP：左右43.5ptずつ切り落として表示（768-87=681pt を画面幅に合わせる）
*/
:root {
  /* 表示するデザインの幅（pt）。SPは左右43.5pt、PCは左右21.33ptを外に出す */
  --vis: 681;
  /* LP（デザイン768pt）の最大幅 */
  --max: 100000px;
  --yellow: #ffd412;
  --yellow-deep: #ffc610;
  --green: #2c6245;
  /* デザイン1ptの長さ（各セクションの幅＝100cqwから計算） */
  --u: min(var(--max) / 768, 100cqw / var(--vis));
}
@media (min-width: 768px) {
  :root {
    --vis: 725.333;
    --max: 1161.6px;
  }
}
/********************  アニメーション ********************/
/* フェードイン：透明から少しずつはっきりしながら、下からふわっと上がる
   （不透明度は急に出ない動き、移動は滑らかに減速。速さは前と同じ：上から1.2秒、左右から1.4秒） */
.effect-fade {
  opacity: 0;
  transform: translate(0, 50px);
  transition: opacity 1.2s cubic-bezier(0.3, 0.2, 0.3, 1), transform 1.2s cubic-bezier(0.25, 0.75, 0.3, 1);
}
.effect-fade-l {
  opacity: 0;
  transform: translate(-60px, 0);
  transition: opacity 1.4s cubic-bezier(0.3, 0.2, 0.3, 1), transform 1.4s cubic-bezier(0.25, 0.75, 0.3, 1);
}
.effect-fade-r {
  opacity: 0;
  transform: translate(60px, 0);
  transition: opacity 1.4s cubic-bezier(0.3, 0.2, 0.3, 1), transform 1.4s cubic-bezier(0.25, 0.75, 0.3, 1);
}
.effect-fade.on,
.effect-fade-l.on,
.effect-fade-r.on {
  opacity: 1;
  transform: translate(0, 0);
}
@keyframes mainVisualFadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/********************  レイアウト ********************/
.main_wrap {
  overflow-x: clip;
  background: var(--yellow-deep);
  width: 100%;
}
/* セクション全体を幅の基準（cqw）にする */
.lp_body {
  container-type: inline-size;
}
/* クライアント側のページ全体・枠の最小幅／固定幅を外し、画面幅に合わせて縮むように（リキッド）。パンくずは1056pxで中央 */
html,
body,
.lp {
  min-width: 0 !important;
}
.lp > .area-contents {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0;
}
.lp > .area-contents > .mod-breadcrumb {
  box-sizing: border-box;
  max-width: 1056px;
  margin-left: auto;
  margin-right: auto;
}
.main_wrap img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  /* 画像の保存防止（ドラッグ・長押しメニュー・選択） */
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  pointer-events: none;
}
.main_wrap a img {
  pointer-events: auto;
}
.main_wrap h2,
.main_wrap h3,
.main_wrap p,
.main_wrap figure,
.main_wrap ul {
  margin: 0;
  padding: 0;
}
.main_wrap ul {
  list-style: none;
}
/* LPの中身：768pt分の箱を、表示幅（--vis）が画面に収まる大きさで中央に置く（最大 --max） */
.lp_inner {
  --w: min(var(--max), 100% * 768 / var(--vis));
  position: relative;
  width: var(--w);
  margin-left: calc((100% - var(--w)) / 2);
}
/**** KV・キャンペーン期間 ****/
.top {
  background: var(--yellow);
}
/* KV：PCはデザインのx-85〜855（テーブルを左右に延長）を表示し、768pt部分をコンテンツ幅の1.1倍に */
.top .main-visual {
  display: block;
  position: relative;
  width: calc(min(110%, (100cqw - 20px) * 768 / 725) * 940 / 768);
  margin-left: calc((100% - min(110%, (100cqw - 20px) * 768 / 725) * 940 / 768) / 2);
  aspect-ratio: 940 / 563;
}
.main-visual > * {
  position: absolute;
}
.main-visual .ryo {
  left: 31.947%;
  top: 15.293%;
  width: 35.638%;
}
.main-visual .member01 {
  left: 15.67%;
  top: 41.936%;
  width: 19.229%;
}
.main-visual .member02 {
  left: 65.245%;
  top: 42.558%;
  width: 18.431%;
}
.main-visual .title {
  left: 22.527%;
  top: 9.769%;
  width: 53.91%;
}
.main-visual .chef {
  left: 28.005%;
  top: 21.714%;
  width: 43.644%;
}
.main-visual .logo {
  left: 11.968%;
  top: 2.442%;
  width: 13.431%;
}
.main-visual .front {
  left: 0.005%;
  top: 73.153%;
  width: 100.053%;
}
/* 料理（テーブル）とロゴは最初から表示 → りょうちゃん → メンバー2人（奥から前へ、少しバウンド） → タイトルとChef RyoChan（1.2秒でそろう） */
.main-visual .ryo,
.main-visual .member01,
.main-visual .member02,
.main-visual .title,
.main-visual .chef {
  opacity: 0;
}
.main-visual .ryo,
.main-visual .member01,
.main-visual .member02 {
  transform-origin: 50% 100%;
}
.main-visual.is-play .ryo {
  animation: kvRyo 0.6s ease-out 0s forwards;
}
.main-visual.is-play .member01 {
  animation: kvLeft 0.6s ease-out 0.1s forwards;
}
.main-visual.is-play .member02 {
  animation: kvRight 0.6s ease-out 0.18s forwards;
}
/* 弧の中心を軸に、右（30度）から左へ。早く現れてゆっくり止まる */
.main-visual .title {
  transform-origin: 51.475% 624.444%;
}
.main-visual.is-play .title {
  animation: kvArc 0.92s cubic-bezier(0.33, 1, 0.68, 1) 0.28s forwards, kvFade 0.8s ease-in-out 0.28s forwards;
}
.main-visual.is-play .chef {
  animation: kvUp 0.92s cubic-bezier(0.33, 1, 0.68, 1) 0.28s forwards, kvFade 0.8s ease-in-out 0.28s forwards;
}
@keyframes kvRyo {
  0% {
    opacity: 0;
    transform: scale(0.82);
  }
  55% {
    opacity: 1;
    transform: scale(1.04);
  }
  78% {
    opacity: 1;
    transform: scale(0.985);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* 左の人：右下から左上へ */
@keyframes kvLeft {
  0% {
    opacity: 0;
    transform: translate(6%, 8%) scale(0.82);
  }
  55% {
    opacity: 1;
    transform: translate(-1%, -1.5%) scale(1.04);
  }
  78% {
    opacity: 1;
    transform: translate(0.3%, 0.4%) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}
/* 右の人：左下から右上へ */
@keyframes kvRight {
  0% {
    opacity: 0;
    transform: translate(-6%, 8%) scale(0.82);
  }
  55% {
    opacity: 1;
    transform: translate(1%, -1.5%) scale(1.04);
  }
  78% {
    opacity: 1;
    transform: translate(-0.3%, 0.4%) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}
@keyframes kvArc {
  0% {
    transform: rotate(30deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes kvUp {
  0% {
    transform: translateY(30%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes kvFade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media (max-width: 767px) {
  /* SP：デザインのx21.5〜746を画面幅に。テーブルを下げ、りょうちゃん・メンバー・タイトル・ロゴを拡大 */
  .top .main-visual {
    width: calc(100% * 681 / 724.5);
    margin-left: calc(100% * (43.5 - 21.5 * 681 / 724.5) / 768);
    aspect-ratio: 768 / 622;
  }
  .main-visual .ryo {
    left: 24.889%;
    top: 16.401%;
    width: 50.163%;
  }
  .main-visual .member01 {
    left: 10.422%;
    top: 46.429%;
    width: 25.418%;
  }
  .main-visual .member02 {
    left: 64.631%;
    top: 47.037%;
    width: 24.363%;
  }
  .main-visual .front {
    left: -11.061%;
    top: 77.307%;
    width: 122.461%;
  }
  .main-visual .title {
    left: 12.078%;
    top: 11.254%;
    width: 75.881%;
  }
  .main-visual .chef {
    left: 19.281%;
    top: 23.688%;
    width: 61.431%;
  }
  .main-visual .logo {
    left: 4.102%;
    top: 1.608%;
    width: 22.192%;
  }
}
/* キャンペーン期間：枠（x51.24〜717.58）をコンテンツ幅（x64〜704）に合わせる */
/* KV下の注意書き */
.top .kv_note img {
  width: 100%;
}
.top .period {
  position: relative;
}
.top .period .main {
  width: calc(100% * 640 / 666.34);
  margin-left: calc(100% * (64 - 51.24 * 640 / 666.34) / 768);
}
/* ※注釈：SPは導入部の※と同じ大きさ（※の幅9.76pt）に拡大し、枠の下の余白に収める */
.top .period .note {
  position: absolute;
  left: calc(var(--u) * 101.714);
  top: calc(var(--u) * 188.266);
  width: calc(var(--u) * 560.194);
}
@media (min-width: 768px) {
  /* PCは枠を680ptに（カード幅640ptより少し広く、画面端との間にも余白を残す） */
  .top .period .main {
    width: calc(100% * 680 / 666.34);
    margin-left: calc(100% * (44 - 51.24 * 680 / 666.34) / 768);
  }
  .top .period .note {
    left: calc(var(--u) * 123.658);
    top: calc(var(--u) * 201.546);
    width: calc(var(--u) * 516.033);
  }
}
/**** りんご柄の背景（ページ内リンク〜コラボメニュー）：535ptで繰り返すタイル ****/
.apple {
  background: url("../images/bg_apple.webp") center top / calc(var(--u) * 768) auto repeat, var(--yellow-deep);
}
/**** ページ内リンク ****/
.lp_nav ul {
  display: flex;
  justify-content: space-between;
  margin: 0 calc(100% * 59 / 768) 0 calc(100% * 63 / 768);
  padding: calc(100% * 19.8 / 768) 0 calc(100% * 34.5 / 768);
}
.lp_nav li {
  width: calc(100% * 210 / 646);
}
/* 動画なし版（index_off.html）：ボタン2つ */
.lp_nav .col2 {
  margin: 0 calc(100% * 60.737 / 768) 0 calc(100% * 63.23 / 768);
  padding: calc(100% * 19.8 / 768) 0 calc(100% * 35 / 768);
}
/* ボタンの上下の隙間を同じに（PCは18pt。SPは下で指定） */
.lp_nav ul {
  padding: calc(100% * 17.5 / 768) 0 calc(100% * 16.9 / 768);
}
.lp_nav .col2 {
  padding: calc(100% * 18 / 768) 0 calc(100% * 18 / 768);
}
@media (max-width: 767px) {
  /* SP：ボタンの上下の隙間を、ボタンとボタンの間の隙間と同じに */
  .lp_nav ul {
    padding: calc(100% * 9.4 / 768) 0 calc(100% * 8.8 / 768);
  }
  .lp_nav .col2 {
    padding: calc(100% * 15.367 / 768) 0 calc(100% * 15.367 / 768);
  }
}
.lp_nav .col2 li {
  width: calc(100% * 314.333 / 644.033);
}
/**** オリジナルグッズ（概要） ****/
.summary .lp_inner {
  height: calc(var(--u) * 1318.4);
}
/* 緑のパネルと2列の区切り線 */
.summary .lp_inner::before {
  content: "";
  position: absolute;
  left: calc(var(--u) * 62.9);
  top: 0;
  width: calc(var(--u) * 641.8);
  height: calc(var(--u) * 1292.2);
  background: #00993e;
}
/* 区切り線：デザインはx383.4で左に寄っていたので、2列（リボンの間）の中央 x388.162 に */
.summary .lp_inner::after {
  content: "";
  position: absolute;
  left: calc(var(--u) * 387.662);
  top: calc(var(--u) * 184.9);
  width: calc(var(--u) * 1);
  height: calc(var(--u) * 538.8);
  background: #fff;
}
.summary img {
  position: absolute;
}
.summary h2 img {
  left: calc(var(--u) * 91.371);
  top: calc(var(--u) * 23.831);
  width: calc(var(--u) * 587.333);
}
.summary li:first-child .rib {
  left: calc(var(--u) * 99.07);
  top: calc(var(--u) * 148.671);
  width: calc(var(--u) * 275);
}
.summary li:first-child .item1 {
  left: calc(var(--u) * 138.911);
  top: calc(var(--u) * 242.956);
  width: calc(var(--u) * 215.667);
}
.summary li:first-child .item2 {
  left: calc(var(--u) * 119.168);
  top: calc(var(--u) * 460.722);
  width: calc(var(--u) * 234.333);
}
.summary li:last-child .rib {
  left: calc(var(--u) * 402.253);
  top: calc(var(--u) * 148.671);
  width: calc(var(--u) * 275.333);
}
.summary li:last-child .item1 {
  left: calc(var(--u) * 458.956);
  top: calc(var(--u) * 233.864);
  width: calc(var(--u) * 173);
}
.summary .note img {
  left: calc(var(--u) * 276.246);
  top: calc(var(--u) * 734.286);
  width: calc(var(--u) * 213.667);
}
.summary figure img {
  left: calc(var(--u) * 102.265);
  top: calc(var(--u) * 775.456);
  width: calc(var(--u) * 557.667);
}
.summary .more img {
  left: calc(var(--u) * 91.458);
  top: calc(var(--u) * 1176.016);
  width: calc(var(--u) * 588.667);
}
/* ランチクロスと※注釈はセットで表示 */
.summary .set {
  position: absolute;
  left: 0;
  top: calc(var(--u) * 463.316);
  width: 100%;
  height: 0;
}
.summary .set .item2 {
  left: calc(var(--u) * 403.166);
  top: 0;
  width: calc(var(--u) * 274);
}
.summary .set .note {
  left: calc(var(--u) * 398.768);
  top: calc(var(--u) * 231.124);
  width: calc(var(--u) * 238);
}
@media (max-width: 767px) {
  /* SP：※注釈を基準の大きさ（※の幅9.76pt）に */
  .summary .set .note {
    width: calc(var(--u) * 262.176);
  }
  .summary .note img {
    left: calc(var(--u) * 265.394);
    top: calc(var(--u) * 735.286);
    width: calc(var(--u) * 235.371);
  }
}
/**** 導入 ****/
/* 緑の帯（左右いっぱい）＋中央の山形 */
.intro {
  position: relative;
}
.intro::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(var(--u) * 373.688);
  background: var(--green);
}
.intro .lp_inner {
  height: calc(var(--u) * 428.6);
}
.intro .lp_inner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--green);
  clip-path: polygon(0 0, 100% 0, 100% 87.188%, 49.95% 100%, 0 87.188%);
}
.intro img {
  position: absolute;
}
.intro h2 img {
  left: 0;
  top: calc(var(--u) * 32.007);
  width: 100%;
}
.intro .pick {
  left: calc(var(--u) * 139.554);
  top: calc(var(--u) * 313.977);
  width: calc(var(--u) * 167.333);
}
.intro .n1 {
  left: calc(var(--u) * 78.355);
  top: calc(var(--u) * 348.027);
  width: calc(var(--u) * 613.667);
}
.intro .n2 {
  left: calc(var(--u) * 176.959);
  top: calc(var(--u) * 365.865);
  width: calc(var(--u) * 416.333);
}
.intro .n3 {
  left: calc(var(--u) * 210.783);
  top: calc(var(--u) * 380.454);
  width: calc(var(--u) * 349.333);
}
@media (max-width: 767px) {
  /* SP：※注釈を基準の大きさ（※の幅9.76pt。SPの注釈はすべてこの大きさに揃える）に。▼の中に余裕を持たせるため帯と山形を14pt伸ばす */
  .intro::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: calc(var(--u) * 387.688);
    background: var(--green);
  }
  .intro .lp_inner {
    height: calc(var(--u) * 442.6);
  }
  .intro .lp_inner::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--green);
    clip-path: polygon(0 0, 100% 0, 100% 87.593%, 49.95% 100%, 0 87.593%);
  }
  .intro .pick {
    left: calc(var(--u) * 139.554);
    width: calc(var(--u) * 197.243);
  }
  .intro .n1 {
    left: calc(var(--u) * 78.354);
    top: calc(var(--u) * 353.027);
    width: calc(var(--u) * 613.667);
  }
  .intro .n2 {
    left: calc(var(--u) * 139.751);
    top: calc(var(--u) * 369.527);
    width: calc(var(--u) * 490.75);
  }
  .intro .n3 {
    left: calc(var(--u) * 179.562);
    top: calc(var(--u) * 385.779);
    width: calc(var(--u) * 411.775);
  }
}
/**** コラボメニュー ****/
.menu .lp_inner {
  z-index: 1;
}
.menu_list > li::before {
  content: "";
  position: absolute;
  left: 8.234%;
  width: 83.203%;
}
/* 背景（::before）より中身を前に */
.menu_list .dish,
.shop .lp_inner > * {
  position: relative;
}
/* 1〜4品目：布の写真（4枚とも同じ画像）＋緑の枠 */
.menu_list > .check::before {
  background: url("../images/card_check.webp") 0 0 / 100% 100% no-repeat;
}
/* 5・6品目：ミント＋白い水玉＋白い枠 */
.menu_list > .dot::before {
  background-color: #bde1d6;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.4) calc(var(--u) * 2.24), rgba(255, 255, 255, 0) calc(var(--u) * 2.24 + 1px));
  background-size: calc(var(--u) * 16.861) calc(var(--u) * 16.964);
}
.menu_list > .menu01::before {
  top: calc(var(--u) * 24.5);
  height: calc(var(--u) * 640.8);
  box-shadow: inset 0 0 0 calc(var(--u) * 2.727) #2c6245;
}
.menu_list > .menu02::before {
  top: calc(var(--u) * 28.6);
  height: calc(var(--u) * 640.8);
  box-shadow: inset 0 0 0 calc(var(--u) * 2.727) #005f3f;
}
.menu_list > .menu03::before {
  top: calc(var(--u) * 33.75);
  height: calc(var(--u) * 640.8);
  box-shadow: inset 0 0 0 calc(var(--u) * 2.727) #005f3f;
}
.menu_list > .menu04::before {
  top: calc(var(--u) * 29.6);
  height: calc(var(--u) * 640.8);
  box-shadow: inset 0 0 0 calc(var(--u) * 2.727) #005f3f;
}
.menu_list > .menu05::before {
  top: calc(var(--u) * 9.2);
  height: calc(var(--u) * 823.9);
  box-sizing: border-box;
  border: calc(var(--u) * 2.727) solid #fff;
  background-origin: border-box;
  background-position: calc(var(--u) * 13.492) calc(var(--u) * 6.288);
  border-bottom: 0;
}
.menu_list > .menu06::before {
  top: calc(var(--u) * -1.38);
  height: calc(var(--u) * 704.08);
  box-sizing: border-box;
  border: calc(var(--u) * 2.727) solid #fff;
  background-origin: border-box;
  background-position: calc(var(--u) * 13.492) calc(var(--u) * 15.01);
}
/* 料理の写真は枠線の内側だけに表示（枠線の上に乗らないように）。上は湯気のため切らない */
.menu_list .menu01 .dish {
  clip-path: inset(-100% calc(var(--u) * 68.487) calc(var(--u) * 10.127) calc(var(--u) * 65.967));
}
.menu_list .menu02 .dish {
  clip-path: inset(-100% calc(var(--u) * 68.487) calc(var(--u) * 6.577) calc(var(--u) * 65.967));
}
.menu_list .menu03 .dish {
  clip-path: inset(-100% calc(var(--u) * 68.487) calc(var(--u) * 9.927) calc(var(--u) * 65.967));
}
.menu_list .menu04 .dish {
  clip-path: inset(-100% calc(var(--u) * 68.487) calc(var(--u) * 11.827) calc(var(--u) * 65.967));
}
.menu_list .menu05 .dish {
  clip-path: inset(-100% calc(var(--u) * 68.487) calc(var(--u) * 2.727) calc(var(--u) * 65.967));
}
.menu_list .menu06 .dish {
  clip-path: inset(-100% calc(var(--u) * 68.487) calc(var(--u) * 9.927) calc(var(--u) * 65.967));
}
/* 1品をコメント・料理・価格・丸ラベルに分けて順番に表示 */
.menu_list > li,
.other_list > li {
  position: relative;
}
.menu_list .price,
.menu_list .after,
.main_wrap .badge {
  position: absolute;
  left: 0;
}
.menu_list .dish.effect-fade {
  transition-delay: 0.15s;
}
.menu_list .price.effect-fade,
.menu_list .pset.effect-fade,
.menu_list .after.effect-fade {
  transition-delay: 0.3s;
}
/* 丸いラベル：90度傾いた状態から回転して表示 */
.main_wrap .badge.effect-fade {
  transform: rotate(-90deg);
  transition: opacity 0.9s cubic-bezier(0.3, 0.2, 0.3, 1) 0.45s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.45s;
}
.main_wrap .badge.effect-fade.on {
  transform: rotate(0);
}
.main_wrap .badge {
  transform-origin: 50.855% 50.857%;
}
.menu01 .price {
  top: calc(var(--u) * 537.618);
}
.menu01 .badge {
  left: calc(var(--u) * 77.101);
  top: calc(var(--u) * 488.97);
  width: calc(var(--u) * 155.905);
}
.menu02 .price {
  top: calc(var(--u) * 525.882);
}
.menu02 .badge {
  left: calc(var(--u) * 76.993);
  top: calc(var(--u) * 488.13);
  width: calc(var(--u) * 155.905);
}
.menu03 .price {
  top: calc(var(--u) * 510.406);
}
.menu03 .badge {
  left: calc(var(--u) * 76.993);
  top: calc(var(--u) * 488.38);
  width: calc(var(--u) * 155.905);
}
.menu04 .price {
  top: calc(var(--u) * 542.72);
}
.menu04 .badge {
  left: calc(var(--u) * 76.959);
  top: calc(var(--u) * 491.54);
  width: calc(var(--u) * 155.905);
}
.menu05 .price {
  top: calc(var(--u) * 506.157);
}
.menu05 .after {
  top: calc(var(--u) * 657.596);
}
.menu05 .badge {
  left: calc(var(--u) * 79.275);
  top: calc(var(--u) * 452.61);
  width: calc(var(--u) * 155.906);
}
.menu06 .price {
  top: calc(var(--u) * 579.584);
}
.menu06 .badge {
  left: calc(var(--u) * 77.101);
  top: calc(var(--u) * 523.52);
  width: calc(var(--u) * 155.905);
}
/* りょうちゃんのコメント：吹き出し（白80%・角丸・ぼかし）＋写真＋文字。カードの上端を基準に配置 */
.menu_list .comment {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
}
.menu_list .comment::before {
  content: "";
  position: absolute;
  border-radius: calc(var(--u) * 18);
  background: rgba(255, 255, 255, 0.8);
  filter: blur(calc(var(--u) * 2.6));
}
.menu_list .comment img {
  position: absolute;
}
.menu01 .comment::before {
  left: calc(var(--u) * 82.857);
  top: calc(var(--u) * 39.6);
  width: calc(var(--u) * 600.333);
  height: calc(var(--u) * 115.333);
}
.menu01 .comment .chef {
  left: calc(var(--u) * 569.723);
  top: calc(var(--u) * 1.6);
  width: calc(var(--u) * 122);
}
.menu01 .comment .text {
  left: calc(var(--u) * 99.613);
  top: calc(var(--u) * 64.808);
  width: calc(var(--u) * 469.667);
}
.menu02 .comment::before {
  left: calc(var(--u) * 83.118);
  top: calc(var(--u) * 43.74);
  width: calc(var(--u) * 600);
  height: calc(var(--u) * 115.333);
}
.menu02 .comment .chef {
  left: calc(var(--u) * 543.871);
  top: calc(var(--u) * 9.073);
  width: calc(var(--u) * 134.667);
}
.menu02 .comment .text {
  left: calc(var(--u) * 160.806);
  top: calc(var(--u) * 69.666);
  width: calc(var(--u) * 372);
}
.menu03 .comment::before {
  left: calc(var(--u) * 83.083);
  top: calc(var(--u) * 48.517);
  width: calc(var(--u) * 600);
  height: calc(var(--u) * 115.667);
}
.menu03 .comment .chef {
  left: calc(var(--u) * 92.443);
  top: calc(var(--u) * 3.85);
  width: calc(var(--u) * 107.667);
}
.menu03 .comment .text {
  left: calc(var(--u) * 214.324);
  top: calc(var(--u) * 74.359);
  width: calc(var(--u) * 376);
}
.menu04 .comment::before {
  left: calc(var(--u) * 83.049);
  top: calc(var(--u) * 44.67);
  width: calc(var(--u) * 600);
  height: calc(var(--u) * 115);
}
.menu04 .comment .chef {
  left: calc(var(--u) * 96.72);
  top: calc(var(--u) * 1.67);
  width: calc(var(--u) * 146.667);
}
.menu04 .comment .text {
  left: calc(var(--u) * 263.971);
  top: calc(var(--u) * 72.031);
  width: calc(var(--u) * 361);
}
.menu06 .comment::before {
  left: calc(var(--u) * 86.246);
  top: calc(var(--u) * 55.71);
  width: calc(var(--u) * 593.333);
  height: calc(var(--u) * 89.667);
}
.menu06 .comment .chef {
  left: calc(var(--u) * 97.782);
  top: calc(var(--u) * -11.957);
  width: calc(var(--u) * 116.333);
}
.menu06 .comment .text {
  left: calc(var(--u) * 227.299);
  top: calc(var(--u) * 79.65);
  width: calc(var(--u) * 423);
}
@media (max-width: 767px) {
  /* SP：コメントの文字を1.11倍（全品共通）にし、改行位置を変えた画像に。吹き出しとカードはその分下に伸ばす */
  .menu01 .comment::before {
    height: calc(var(--u) * 148.211);
  }
  .menu01 .comment .text {
    left: calc(var(--u) * 113.295);
    top: calc(var(--u) * 65.006);
    width: calc(var(--u) * 387.02);
  }
  .menu01 .comment .chef {
    left: calc(var(--u) * 530.753);
    top: calc(var(--u) * 34.477);
  }
  .menu_list > .menu01 {
    padding-top: calc(var(--u) * 32.877);
  }
  .menu_list > .menu01::before {
    height: calc(var(--u) * 673.677);
  }
  .menu01 .price {
    top: calc(var(--u) * 570.495);
  }
  .menu01 .badge {
    top: calc(var(--u) * 521.847);
  }
  .menu02 .comment::before {
    height: calc(var(--u) * 122.447);
  }
  .menu02 .comment .text {
    left: calc(var(--u) * 100.589);
    top: calc(var(--u) * 69.666);
    width: calc(var(--u) * 412.92);
  }
  .menu02 .comment .chef {
    left: calc(var(--u) * 530.98);
    top: calc(var(--u) * 16.187);
  }
  .menu_list > .menu02 {
    padding-top: calc(var(--u) * 7.113);
  }
  .menu_list > .menu02::before {
    height: calc(var(--u) * 647.913);
  }
  .menu02 .price {
    top: calc(var(--u) * 532.996);
  }
  .menu02 .badge {
    top: calc(var(--u) * 495.243);
  }
  .menu03 .comment::before {
    height: calc(var(--u) * 122.67);
  }
  .menu03 .comment .text {
    left: calc(var(--u) * 240.732);
    top: calc(var(--u) * 74.359);
    width: calc(var(--u) * 417.36);
  }
  .menu03 .comment .chef {
    left: calc(var(--u) * 108.074);
    top: calc(var(--u) * 10.853);
  }
  .menu_list > .menu03 {
    padding-top: calc(var(--u) * 7.003);
  }
  .menu_list > .menu03::before {
    height: calc(var(--u) * 647.803);
  }
  .menu03 .price {
    top: calc(var(--u) * 517.41);
  }
  .menu03 .badge {
    top: calc(var(--u) * 495.383);
  }
  .menu04 .comment::before {
    height: calc(var(--u) * 122.15);
  }
  .menu04 .comment .text {
    left: calc(var(--u) * 264.798);
    top: calc(var(--u) * 72.031);
    width: calc(var(--u) * 400.71);
  }
  .menu04 .comment .chef {
    left: calc(var(--u) * 100.59);
    top: calc(var(--u) * 8.82);
  }
  .menu_list > .menu04 {
    padding-top: calc(var(--u) * 7.15);
  }
  .menu_list > .menu04::before {
    height: calc(var(--u) * 647.95);
  }
  .menu04 .price {
    top: calc(var(--u) * 549.87);
  }
  .menu04 .badge {
    top: calc(var(--u) * 498.69);
  }
  .menu06 .comment::before {
    height: calc(var(--u) * 120.792);
  }
  .menu06 .comment .text {
    left: calc(var(--u) * 262.357);
    top: calc(var(--u) * 80.182);
    width: calc(var(--u) * 352.98);
  }
  .menu06 .comment .chef {
    left: calc(var(--u) * 97.782);
    top: calc(var(--u) * 19.169);
  }
  .menu_list > .menu06 {
    padding-top: calc(var(--u) * 31.126);
  }
  .menu_list > .menu06::before {
    height: calc(var(--u) * 735.206);
  }
  .menu06 .price {
    top: calc(var(--u) * 610.71);
  }
  .menu06 .badge {
    top: calc(var(--u) * 554.645);
  }
}
/* ※注釈 */
.menu_list .note,
.menu_list .pset img {
  position: absolute;
}
/* 価格と下の※注釈はセットで表示（カードの上端を基準に配置） */
.menu_list .pset {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
}
.menu01 .note {
  left: calc(var(--u) * 471.476);
  top: calc(var(--u) * 168.11);
  width: calc(var(--u) * 130.333);
}
.menu03 .note {
  left: calc(var(--u) * 559.433);
  top: calc(var(--u) * 492.067);
  width: calc(var(--u) * 114.667);
}
.menu05 .n1 {
  left: calc(var(--u) * 126.842);
  top: calc(var(--u) * 618.697);
  width: calc(var(--u) * 326.333);
}
.menu05 .n2 {
  left: calc(var(--u) * 457.176);
  top: calc(var(--u) * 618.697);
  width: calc(var(--u) * 200.333);
}
.menu05 .n3 {
  left: calc(var(--u) * 126.842);
  top: calc(var(--u) * 632.814);
  width: calc(var(--u) * 254.333);
}
@media (max-width: 767px) {
  /* SP：※注釈を基準の大きさに。アップルパイの下の注釈は※ごとに3行にして、その分カードを伸ばす */
  .menu01 .note {
    left: calc(var(--u) * 457.829);
    top: calc(var(--u) * 165.562);
    width: calc(var(--u) * 157.627);
  }
  .menu03 .note {
    left: calc(var(--u) * 538.937);
    top: calc(var(--u) * 490.041);
    width: calc(var(--u) * 135.163);
  }
  .menu05 .n1 {
    left: calc(var(--u) * 191.668);
    top: calc(var(--u) * 618.697);
    width: calc(var(--u) * 384.663);
  }
  .menu05 .n2 {
    left: calc(var(--u) * 191.668);
    top: calc(var(--u) * 633.056);
    width: calc(var(--u) * 236.142);
  }
  .menu05 .n3 {
    left: calc(var(--u) * 191.668);
    top: calc(var(--u) * 647.415);
    width: calc(var(--u) * 299.794);
  }
  .menu_list > .menu05 {
    padding-bottom: calc(var(--u) * 16.686);
  }
  .menu_list > .menu05::before {
    height: calc(var(--u) * 840.586);
  }
  .menu05 .after {
    top: calc(var(--u) * 674.283);
  }
}
.other01 .badge {
  left: 17.168%;
  top: 47.778%;
  width: 19.273%;
}
.other02 .badge {
  left: 1.204%;
  top: 47.778%;
  width: 19.273%;
}
/* 見出しの帯と写真の間：2枚の写真の間と同じ隙間 */
/* ピザは料理が見えやすいよう湯気を少し薄く（ほかの料理の8.5割） */
.menu02 .steam_box {
  opacity: 0.85;
}
/* チゲ鍋とグリルは手前に1つ、薄い湯気を追加 */
.menu01 .st3 {
  opacity: 0.5;
}
/* グリルは奥の2つを少し薄く（8.5割）。手前の薄い湯気はチゲ鍋と同じ濃さのまま */
.menu03 .st1,
.menu03 .st2 {
  opacity: 0.85;
}
.menu03 .st3 {
  opacity: 0.5;
}
.other_list {
  display: flex;
}
.menu .other_list {
  margin-top: calc(var(--u) * 4.33);
}
.other_list > li {
  width: 50%;
}
/* その他メニュー下の※注釈 */
.other_note {
  position: relative;
  height: calc(var(--u) * 60.1);
}
.other_note img {
  position: absolute;
}
.other_note .n1 {
  left: calc(var(--u) * 66.985);
  top: calc(var(--u) * 3.839);
  width: calc(var(--u) * 114.333);
}
.other_note .n2 {
  left: calc(var(--u) * 185.319);
  top: calc(var(--u) * 3.839);
  width: calc(var(--u) * 514.333);
}
.other_note .n3 {
  left: calc(var(--u) * 66.985);
  top: calc(var(--u) * 18.015);
  width: calc(var(--u) * 422.333);
}
@media (max-width: 767px) {
  /* SP：※注釈を基準の大きさにし、1行目は※ごとに2行に分ける */
  .other_note .n1 {
    left: calc(var(--u) * 66.985);
    top: calc(var(--u) * 3.839);
    width: calc(var(--u) * 134.77);
  }
  .other_note .n2 {
    left: calc(var(--u) * 66.985);
    top: calc(var(--u) * 18.198);
    width: calc(var(--u) * 606.267);
  }
  .other_note .n3 {
    left: calc(var(--u) * 66.985);
    top: calc(var(--u) * 32.557);
    width: calc(var(--u) * 497.823);
  }
  .other_note {
    height: calc(var(--u) * 76.728);
  }
}
/**** オリジナルグッズ（詳細） ****/
/* 背景：上の白い線（1本）と木目（1139ptで繰り返すタイル）。パネル（緑の見出し・ミント・ピンク・ストライプ・枠）はCSS */
.goods {
  background: linear-gradient(#fff, #fff) center top / 100% calc(var(--u) * 5.67) no-repeat, url("../images/bg_wood.webp") center top / calc(var(--u) * 768) auto repeat;
}
/* 木目のエリアの上下の隙間を2/3に（中身ごと上にずらし、高さを縮める） */
.goods .lp_inner {
  top: calc(var(--u) * -15.743);
  height: calc(var(--u) * 2782.99);
}
.goods .lp_inner::before {
  content: "";
  position: absolute;
  left: calc(var(--u) * 62.62);
  top: calc(var(--u) * 52.9);
  width: calc(var(--u) * 642.03);
  height: calc(var(--u) * 2718.1);
  background: linear-gradient(#00993e, #00993e) center bottom / 100% calc(var(--u) * 34.1) no-repeat, linear-gradient(to bottom, #00993e 0 calc(var(--u) * 591.2), #bce1df calc(var(--u) * 591.2) calc(var(--u) * 1547.6), #f7c7c6 calc(var(--u) * 1547.6) 100%);
}
.goods .lp_inner::after {
  content: "";
  position: absolute;
  left: calc(var(--u) * 62.62);
  top: calc(var(--u) * 644.1);
  width: calc(var(--u) * 642.03);
  height: calc(var(--u) * 2092.8);
  box-sizing: border-box;
  border: calc(var(--u) * 8.72) solid #009242;
  border-top: 0;
  border-bottom: 0;
  background: repeating-linear-gradient(50deg, rgba(255, 255, 255, 0.15) 0 calc(var(--u) * 9.2), rgba(255, 255, 255, 0) calc(var(--u) * 9.2) calc(var(--u) * 18.39));
}
.goods img {
  position: absolute;
}
.goods h2 .title {
  left: 0;
  top: calc(var(--u) * 89.363);
  width: 100%;
}
.goods h2 .badge {
  left: calc(var(--u) * 50.838);
  top: calc(var(--u) * 33.49);
  width: calc(var(--u) * 155.905);
}
.goods .table img {
  left: 0;
  top: calc(var(--u) * 279.537);
  width: 100%;
}
.goods .gset {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0;
  z-index: 1;
}
/* 「マグカップ（全4種）」はデザインで右に寄っていたのでパネルの中央に */
.goods .g_rib1 {
  top: calc(var(--u) * 669.213);
}
.goods .rib1 {
  left: calc(var(--u) * 140.309);
  top: calc(var(--u) * 0);
  width: calc(var(--u) * 483.333);
}
.goods .note1 {
  left: calc(var(--u) * 163.103);
  top: calc(var(--u) * 81.514);
  width: calc(var(--u) * 430.667);
}
.goods .g_mugs {
  top: calc(var(--u) * 788.027);
}
.goods .mugs {
  left: calc(var(--u) * 93.834);
  top: calc(var(--u) * 0);
  width: calc(var(--u) * 578);
}
.goods .mugcap {
  left: calc(var(--u) * 232.968);
  top: calc(var(--u) * 244.316);
  width: calc(var(--u) * 301.333);
}
.goods .mugspec {
  left: calc(var(--u) * 170.422);
  top: calc(var(--u) * 286.585);
  width: calc(var(--u) * 419.333);
}
.goods .g_arrow1 {
  top: calc(var(--u) * 1094.577);
}
.goods .arrow1 {
  left: calc(var(--u) * 315.779);
  top: calc(var(--u) * 0);
  width: calc(var(--u) * 142);
}
.goods .g_spoons {
  top: calc(var(--u) * 1181.029);
}
.goods .spoons {
  left: calc(var(--u) * 118.416);
  top: calc(var(--u) * 0);
  width: calc(var(--u) * 528.333);
}
.goods .spooncap {
  left: calc(var(--u) * 217.153);
  top: calc(var(--u) * 338.542);
  width: calc(var(--u) * 338.667);
}
.goods .spoonspec {
  left: calc(var(--u) * 169.095);
  top: calc(var(--u) * 371.183);
  width: calc(var(--u) * 429.667);
}
.goods .g_rib2 {
  top: calc(var(--u) * 1622.571);
}
.goods .rib2 {
  left: calc(var(--u) * 143.267);
  top: calc(var(--u) * 0);
  width: calc(var(--u) * 483.667);
}
.goods .note2 {
  left: calc(var(--u) * 163.103);
  top: calc(var(--u) * 81.849);
  width: calc(var(--u) * 430.667);
}
.goods .g_plates {
  top: calc(var(--u) * 1726.1);
}
.goods .plates {
  left: calc(var(--u) * 114.363);
  top: calc(var(--u) * 0);
  width: calc(var(--u) * 512.667);
}
.goods .platecap {
  left: calc(var(--u) * 166.621);
  top: calc(var(--u) * 386.73);
  width: calc(var(--u) * 137.667);
}
.goods .platespec {
  left: calc(var(--u) * 316.976);
  top: calc(var(--u) * 391.928);
  width: calc(var(--u) * 283.333);
}
.goods .g_arrow2 {
  top: calc(var(--u) * 2139.704);
}
.goods .arrow2 {
  left: calc(var(--u) * 315.779);
  top: calc(var(--u) * 0);
  width: calc(var(--u) * 142);
}
.goods .g_rest {
  top: calc(var(--u) * 2223.167);
}
.goods .rest {
  left: calc(var(--u) * 76.47);
  top: calc(var(--u) * 0);
  width: calc(var(--u) * 619.333);
}
.goods .charmcap {
  left: calc(var(--u) * 144.831);
  top: calc(var(--u) * 422.423);
  width: calc(var(--u) * 486.667);
}
.goods .charmspec {
  left: calc(var(--u) * 135.381);
  top: calc(var(--u) * 455.008);
  width: calc(var(--u) * 502.667);
}
.goods .charmnote {
  left: calc(var(--u) * 174.795);
  top: calc(var(--u) * 494.199);
  width: calc(var(--u) * 449.333);
}
.goods .g_shopnote {
  top: calc(var(--u) * 2746.212);
}
.goods .shopnote {
  left: calc(var(--u) * 261.531);
  top: calc(var(--u) * 0);
  width: calc(var(--u) * 244.333);
}
@media (max-width: 767px) {
  /* SP：リボン・注意書き・見出し・説明・「どちらか選べる！」を拡大して上から積み上げ、その分パネルを伸ばす */
  .goods .lp_inner {
    height: calc(var(--u) * 2970.869);
  }
  .goods .lp_inner::before {
    height: calc(var(--u) * 2905.979);
    background: linear-gradient(#00993e, #00993e) center bottom / 100% calc(var(--u) * 34.1) no-repeat, linear-gradient(to bottom, #00993e 0 calc(var(--u) * 591.2), #bce1df calc(var(--u) * 591.2) calc(var(--u) * 1621.087), #f7c7c6 calc(var(--u) * 1621.087) 100%);
  }
  .goods .lp_inner::after {
    height: calc(var(--u) * 2280.679);
  }
  .goods .g_rib1 {
    top: calc(var(--u) * 663.1);
  }
  .goods .rib1 {
    left: calc(var(--u) * 91.975);
    top: calc(var(--u) * 0);
    width: calc(var(--u) * 580);
  }
  .goods .note1 {
    left: calc(var(--u) * 91.975);
    top: calc(var(--u) * 94.4);
    width: calc(var(--u) * 580);
  }
  .goods .g_mugs {
    top: calc(var(--u) * 795.109);
  }
  .goods .mugs {
    left: calc(var(--u) * 93.834);
    top: calc(var(--u) * 0);
    width: calc(var(--u) * 578);
  }
  .goods .mugcap {
    left: calc(var(--u) * 267.677);
    top: calc(var(--u) * 248.347);
    width: calc(var(--u) * 231.915);
  }
  .goods .mugspec {
    left: calc(var(--u) * 92.198);
    top: calc(var(--u) * 279.284);
    width: calc(var(--u) * 582.873);
  }
  .goods .g_arrow1 {
    top: calc(var(--u) * 1099.558);
  }
  .goods .arrow1 {
    left: calc(var(--u) * 266.079);
    top: calc(var(--u) * 0);
    width: calc(var(--u) * 241.4);
  }
  .goods .g_spoons {
    top: calc(var(--u) * 1252.744);
  }
  .goods .spoons {
    left: calc(var(--u) * 118.416);
    top: calc(var(--u) * 0);
    width: calc(var(--u) * 528.333);
  }
  .goods .spooncap {
    left: calc(var(--u) * 188.902);
    top: calc(var(--u) * 336.792);
    width: calc(var(--u) * 389.467);
  }
  .goods .spoonspec {
    left: calc(var(--u) * 85.017);
    top: calc(var(--u) * 367.625);
    width: calc(var(--u) * 597.237);
  }
  .goods .g_rib2 {
    top: calc(var(--u) * 1692.987);
  }
  .goods .rib2 {
    left: calc(var(--u) * 94.901);
    top: calc(var(--u) * 0);
    width: calc(var(--u) * 580.4);
  }
  .goods .note2 {
    left: calc(var(--u) * 94.901);
    top: calc(var(--u) * 94.8);
    width: calc(var(--u) * 580.4);
  }
  .goods .g_plates {
    top: calc(var(--u) * 1813.407);
  }
  .goods .plates {
    left: calc(var(--u) * 114.363);
    top: calc(var(--u) * 0);
    width: calc(var(--u) * 512.667);
  }
  .goods .platecap {
    left: calc(var(--u) * 304.477);
    top: calc(var(--u) * 384.955);
    width: calc(var(--u) * 158.317);
  }
  .goods .platespec {
    left: calc(var(--u) * 186.718);
    top: calc(var(--u) * 416.172);
    width: calc(var(--u) * 393.833);
  }
  .goods .g_arrow2 {
    top: calc(var(--u) * 2251.319);
  }
  .goods .arrow2 {
    left: calc(var(--u) * 266.079);
    top: calc(var(--u) * 0);
    width: calc(var(--u) * 241.4);
  }
  .goods .g_rest {
    top: calc(var(--u) * 2401.515);
  }
  .goods .rest {
    left: calc(var(--u) * 76.47);
    top: calc(var(--u) * 0);
    width: calc(var(--u) * 619.333);
  }
  .goods .charmcap {
    left: calc(var(--u) * 103.802);
    top: calc(var(--u) * 420.673);
    width: calc(var(--u) * 559.667);
  }
  .goods .charmspec {
    left: calc(var(--u) * 83.635);
    top: calc(var(--u) * 456.758);
    width: calc(var(--u) * 600);
  }
  .goods .charmnote {
    left: calc(var(--u) * 125.968);
    top: calc(var(--u) * 502.016);
    width: calc(var(--u) * 515.334);
  }
  .goods .g_shopnote {
    top: calc(var(--u) * 2934.092);
  }
  .goods .shopnote {
    left: calc(var(--u) * 261.531);
    top: calc(var(--u) * 0);
    width: calc(var(--u) * 244.333);
  }
}
/**** メイキング ****/
/* 背景：上の白い線（1本）とチェック柄（横483.5ptで繰り返すタイル） */
.making {
  background: linear-gradient(#fff, #fff) center top / 100% calc(var(--u) * 5.67) no-repeat, url("../images/bg_making.webp") calc(50% - var(--u) * 384) top / calc(var(--u) * 483.5) auto repeat;
}
/* タイトルバーのすぐ下に動画（16:9）、その下に文字 */
.making .lp_inner {
  padding: calc(var(--u) * 30.104) 0 calc(var(--u) * 23.767);
}
.movie {
  margin-left: calc(var(--u) * 151.137);
  width: calc(var(--u) * 462.667);
}
.movie_frame {
  aspect-ratio: 16 / 9;
  background: #000;
}
.movie_frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.making .caption {
  margin-top: calc(var(--u) * 12.725);
}
@media (max-width: 767px) {
  /* SP：タイトルバーと動画はほかの箇所と同じ左右の隙間で横幅いっぱいに。文字は1.25倍 */
  .movie {
    margin-left: calc(var(--u) * 63.3);
    width: calc(var(--u) * 639);
  }
  .making .caption {
    width: 125%;
    margin-left: -12.5%;
  }
}
/**** 店内の様子 ****/
.shop {
  background: linear-gradient(#fff, #fff) center top / 100% calc(var(--u) * 5.67) no-repeat, var(--yellow-deep);
}
.shop .lp_inner::before {
  content: "";
  position: absolute;
  left: calc(var(--u) * 63.2);
  top: calc(var(--u) * 11.3);
  width: calc(var(--u) * 641.5);
  height: calc(var(--u) * 2066.9);
  background: var(--yellow);
}
/* ※注釈（パネル写真と下の2つの間） */
.shop figcaption {
  position: relative;
  height: calc(var(--u) * 27.5);
}
.shop figcaption img {
  position: absolute;
}
.shop figcaption .n1 {
  left: calc(var(--u) * 83.578);
  top: calc(var(--u) * 3);
  width: calc(var(--u) * 186.333);
}
.shop figcaption .n2 {
  left: calc(var(--u) * 273.911);
  top: calc(var(--u) * 2.666);
  width: calc(var(--u) * 408.333);
}
@media (max-width: 767px) {
  /* SPは見出し（x33.5〜732.1）を薄い黄色の枠内（x74〜694）に収める。高さはデザインのまま */
  /* SPは※注釈を導入部の※と同じ大きさにして2行に */
  .shop figcaption {
    height: calc(var(--u) * 43.163);
  }
  .shop figcaption .n1 {
    left: calc(var(--u) * 277.148);
    width: calc(var(--u) * 213.703);
  }
  .shop figcaption .n2 {
    left: calc(var(--u) * 149.844);
    top: calc(var(--u) * 16.998);
    width: calc(var(--u) * 468.312);
  }
  .shop h2 {
    display: flow-root;
    aspect-ratio: 2304 / 882;
  }
  .shop h2 img {
    width: 88.749%;
    margin: calc(100% * 18.694 / 768) 0 0 calc(100% * 44.269 / 768);
  }
}
/**** 余白を切り落とした画像を元の位置・大きさに戻す ****/
.main_wrap img[src^="images/btn_detail."] {
  box-sizing: border-box;
  padding: 0.113% 0.113% 0.113% 0.113%;
}
.main_wrap img[src^="images/btn_goods."] {
  box-sizing: border-box;
  padding: 0% 0.159% 0.159% 0.159%;
}
.main_wrap img[src^="images/btn_making."] {
  box-sizing: border-box;
  padding: 0% 0% 0.159% 0%;
}
.main_wrap img[src^="images/btn_menu."] {
  box-sizing: border-box;
  padding: 0% 0.159% 0.159% 0%;
}
.main_wrap img[src^="images/goods01."] {
  box-sizing: border-box;
  padding: 0.087% 12.196% 0.087% 12.717%;
}
.main_wrap img[src^="images/goods02."] {
  box-sizing: border-box;
  padding: 0.087% 15.278% 0.087% 15.408%;
}
.main_wrap img[src^="images/intro."] {
  box-sizing: border-box;
  padding: 0.087% 8.203% 0.087% 8.247%;
}
.main_wrap img[src^="images/kv_chef."] {
  box-sizing: border-box;
  padding: 0.244% 0.244% 0.244% 0.244%;
}
.main_wrap img[src^="images/kv_front."] {
  box-sizing: border-box;
  padding: 0% 0.425% 0% 0.425%;
}
.main_wrap img[src^="images/kv_logo."] {
  box-sizing: border-box;
  padding: 0.792% 0.792% 0.792% 0.792%;
}
.main_wrap img[src^="images/kv_note."] {
  box-sizing: border-box;
  padding: 0.521% 8.116% 1.736% 7.378%;
}
.main_wrap img[src^="images/kv_title."] {
  box-sizing: border-box;
  padding: 0.197% 0.197% 0.197% 0.197%;
}
.main_wrap img[src^="images/making."] {
  box-sizing: border-box;
  padding: 3.168% 20.095% 7.205% 19.661%;
}
.main_wrap img[src^="images/making_caption."] {
  box-sizing: border-box;
  padding: 0.087% 18.576% 0.087% 18.446%;
}
.main_wrap img[src^="images/menu01_dish."] {
  box-sizing: border-box;
  padding: 13.498% 8.507% 6.337% 8.247%;
}
.main_wrap img[src^="images/menu01_price."] {
  box-sizing: border-box;
  padding: 0.087% 11.632% 0.087% 11.762%;
}
.main_wrap img[src^="images/menu02_dish."] {
  box-sizing: border-box;
  padding: 16.276% 12.109% 13.585% 15.191%;
}
.main_wrap img[src^="images/menu02_price."] {
  box-sizing: border-box;
  padding: 0.087% 11.675% 0.087% 11.762%;
}
.main_wrap img[src^="images/menu03_dish."] {
  box-sizing: border-box;
  padding: 15.885% 8.594% 10.026% 8.203%;
}
.main_wrap img[src^="images/menu03_price."] {
  box-sizing: border-box;
  padding: 0.087% 11.675% 0.087% 11.762%;
}
.main_wrap img[src^="images/menu04_dish."] {
  box-sizing: border-box;
  padding: 17.969% 10.33% 11.936% 13.932%;
}
.main_wrap img[src^="images/menu04_price."] {
  box-sizing: border-box;
  padding: 0.087% 11.675% 0.087% 11.762%;
}
.main_wrap img[src^="images/menu05_after."] {
  box-sizing: border-box;
  padding: 0% 11.502% 0.087% 12.196%;
}
.main_wrap img[src^="images/menu05_dish."] {
  box-sizing: border-box;
  padding: 3.212% 8.55% 35.33% 10.069%;
}
.main_wrap img[src^="images/menu05_price."] {
  box-sizing: border-box;
  padding: 0.087% 11.372% 0.087% 12.066%;
}
.main_wrap img[src^="images/menu06_dish."] {
  box-sizing: border-box;
  padding: 21.05% 7.856% 8.247% 9.375%;
}
.main_wrap img[src^="images/menu06_price."] {
  box-sizing: border-box;
  padding: 0.087% 11.632% 0.087% 11.762%;
}
.main_wrap img[src^="images/new_yuge_01."] {
  box-sizing: border-box;
  padding: 0.2% 8.4% 1.933% 6.067%;
}
.main_wrap img[src^="images/new_yuge_02."] {
  box-sizing: border-box;
  padding: 0.067% 1.2% 0% 0%;
}
.main_wrap img[src^="images/new_yuge_03."] {
  box-sizing: border-box;
  padding: 1.333% 0.867% 2.667% 0%;
}
.main_wrap img[src^="images/other01."] {
  box-sizing: border-box;
  padding: 0% 0.608% 0.608% 16.319%;
}
.main_wrap img[src^="images/other02."] {
  box-sizing: border-box;
  padding: 0% 16.667% 0.608% 0.26%;
}
.main_wrap img[src^="images/other_ttl."] {
  box-sizing: border-box;
  padding: 1.606% 8.507% 0.043% 8.247%;
}
.main_wrap img[src^="images/period."] {
  box-sizing: border-box;
  padding: 1.751% 5.711% 3.668% 6.336%;
}
.main_wrap img[src^="images/shop01."] {
  box-sizing: border-box;
  padding: 6.337% 4.514% 1.345% 4.47%;
}
.main_wrap img[src^="images/shop02."] {
  box-sizing: border-box;
  padding: 0.564% 14.41% 1.172% 31.293%;
}
.main_wrap img[src^="images/shop03."] {
  box-sizing: border-box;
  padding: 1.128% 9.462% 5.99% 11.762%;
}
.main_wrap img[src^="images/shop04."] {
  box-sizing: border-box;
  padding: 2.04% 12.109% 7.943% 11.415%;
}
@media (min-width: 768px) {
  .main_wrap img[src^="images/period."] {
    padding: 1.86% 6.068% 3.898% 6.732%;
  }
}
@media (max-width: 767px) {
  .main_wrap img[src^="images/kv_chef."] {
    padding: 0.15% 0.15% 0.15% 0.15%;
  }
  .main_wrap img[src^="images/kv_front."] {
    padding: 0% 0.521% 0% 0.521%;
  }
  .main_wrap img[src^="images/kv_logo."] {
    padding: 0.176% 0.176% 0.176% 0.176%;
  }
  .main_wrap img[src^="images/kv_title."] {
    padding: 0.15% 0.15% 0.15% 0.15%;
  }
  .main_wrap img[src^="images/making_caption."] {
    padding: 0.109% 23.22% 0.109% 23.058%;
  }
  .main_wrap img[src^="images/shop01."] {
    padding: 5.624% 4.006% 1.194% 3.968%;
  }
}
@media (max-width: 767px) {
  /* SP：キャンペーン期間の枠の下の余白をなくし、枠〜ボタンの間をボタン同士の隙間と同じにする（隙間はページ内リンク側で指定） */
  .main_wrap img[src^="images/period."] {
    padding-bottom: 0;
  }
}
/* 黄色の枠の上下の隙間を、SPで見える左右の隙間と同じに（PCも同じ値） */
.shop .lp_inner {
  padding-top: calc(var(--u) * 14.07);
}
.shop .lp_inner::before {
  top: calc(var(--u) * 25.37);
}
.main_wrap img[src^="images/shop04."] {
  padding-bottom: calc(var(--u) * 43.6);
}
/* 湯気：3枚の湯気を時間をずらして重ね、場所ごとに順番・速さ・大きさを変える */
.steam_box {
  position: absolute;
  pointer-events: none;
}
.steam_box {
  aspect-ratio: 1500 / 950;
}
.steam_box img {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: steamAnime var(--dur, 4.2s) cubic-bezier(0.32, 1, 0.67, 1) var(--off, 0s) infinite;
  will-change: transform, opacity;
}
.steam_box img:nth-child(2) {
  animation-delay: calc(var(--off, 0s) + var(--dur, 4.2s) / 3);
}
.steam_box img:nth-child(3) {
  animation-delay: calc(var(--off, 0s) + var(--dur, 4.2s) * 2 / 3);
}
.steam_box.oa {
  --dur: 4.2s;
  --off: 0s;
}
.steam_box.ob {
  --dur: 4.8s;
  --off: -0.9s;
}
.steam_box.oc {
  --dur: 5.4s;
  --off: -1.8s;
}
.menu01 .st1 {
  left: 10.182%;
  top: 31.123%;
  width: 32.552%;
}
.menu01 .st2 {
  left: 29.648%;
  top: 32.932%;
  width: 27.995%;
}
.menu01 .st3 {
  left: 20.247%;
  top: 40.731%;
  width: 29.297%;
}
.menu02 .st1 {
  left: 23.893%;
  top: 26.201%;
  width: 31.641%;
}
.menu02 .st2 {
  left: 45.247%;
  top: 33.489%;
  width: 34.505%;
}
.menu02 .st3 {
  left: 31.315%;
  top: 44.005%;
  width: 33.724%;
}
.menu03 .st1 {
  left: 38.086%;
  top: 34.908%;
  width: 27.995%;
}
.menu03 .st2 {
  left: 53.06%;
  top: 36.228%;
  width: 24.089%;
}
.menu03 .st3 {
  left: 47.852%;
  top: 44.55%;
  width: 26.693%;
}
.other01 .st1 {
  left: 27.005%;
  top: 22.167%;
  width: 45.573%;
}
.other01 .st2 {
  left: 54.74%;
  top: 24.603%;
  width: 39.062%;
}
.main-visual .st1 {
  left: 32.128%;
  top: 64.121%;
  width: 12.766%;
}
.main-visual .st2 {
  left: 53.936%;
  top: 67.081%;
  width: 10.638%;
}
.main-visual .st3 {
  left: 60.213%;
  top: 68.514%;
  width: 9.787%;
}
.main-visual .st4 {
  left: 43.511%;
  top: 73.014%;
  width: 11.915%;
}
@media (max-width: 767px) {
  .main-visual .st1 {
    left: 28.255%;
    top: 69.132%;
    width: 15.625%;
  }
  .main-visual .st2 {
    left: 54.948%;
    top: 71.811%;
    width: 13.021%;
  }
  .main-visual .st3 {
    left: 62.63%;
    top: 73.108%;
    width: 11.979%;
  }
  .main-visual .st4 {
    left: 42.188%;
    top: 77.181%;
    width: 14.583%;
  }
}
@keyframes steamAnime {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  15% {
    opacity: 0.75;
  }
  60% {
    opacity: 0.75;
  }
  100% {
    transform: translateY(-12%) scale(1.06);
    opacity: 0;
  }
}
/**** ページトップ ****/
.area-footer ._btn-pagetop {
  width: 50px!important;
  height: 50px!important;
}
@media (min-width: 768px) {
  /* PCだけ20px右へ */
  .area-footer ._btn-pagetop {
    margin-right: -20px;
  }
}
.area-footer ._btn-pagetop a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #ec6e02 !important;
}
/* 矢印（価格と同じオレンジの丸に白い山形） */
.area-footer ._btn-pagetop a::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 58%;
  width: 32%;
  height: 32%;
  box-sizing: border-box;
  border-top: 3px solid #fff;
  border-left: 3px solid #fff;
  border-radius: 2px 0 0 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
.area-footer ._btn-pagetop a::before {
  display: none;
}
.js-pagetop._btn-pagetop.is-active {
  z-index: 9999;
}
/**** 下部注釈 ****/
.under_notes {
  max-width: 1180px;
  margin: 0 auto;
}
.mod-wrap-sp {
  padding: 0;
}
.area-contents.under_notes {
  padding-bottom: 0;
}
.area-contents.lp__inner {
  margin: 0 auto;
}
.area-contents.mod-wrap {
  margin: 0 auto;
  padding: 0 4vw;
}
.lp .area-contents .under {
  margin: 30px 20px;
}
/**** 追従header ****/
.fixed-header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 999999999999;
  transform: translateY(-100%);
  background: transparent !important;
  transition: transform 0.5s, background-color 0.5s, background 0.5s, box-shadow 0.5s;
}
.fixed-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--yellow);
  transition: opacity .35s ease, background-color .35s ease, background-image .35s ease;
}
.fixed-header__inner {
  position: relative;
  z-index: 1;
  max-width: none;
  margin: 0 auto;
}
.fixed-header.is_active {
  transform: translateY(0);
  /* ごく薄い影 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.fixed-header .main_inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  box-shadow: none;
  background: transparent;
  position: relative;
  overflow: hidden;
}
.fixed-header__image,
.fixed-header__image picture,
.fixed-header__image img {
  display: block;
  width: 100%;
  height: auto;
}
.fixed-header__content {
  position: relative;
  opacity: 0 !important;
  transition: opacity .8s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.fixed-header--state1 .fixed-header__content--state1 {
  opacity: 1 !important;
  pointer-events: auto;
}
.fixed-header--no-fade .fixed-header__content {
  transition: none !important;
}