@charset "UTF-8";

/* =========================
  Reset / Base
========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  width: 100%;
  height: auto;
  display: block;
  border: 0;
}

ul,
ol {
  list-style: none;
}

body {
  font-family: Meiryo, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
  line-height: 1;
  text-align: center;
  -webkit-text-size-adjust: 100%;
}

/* =========================
  Layout
========================= */
#contents {
  position: relative;
  max-width: 1056px;
  margin: 0 auto;
  font-size: 0;
}

.content_body img {
  vertical-align: bottom;
}

.page-header-white {
  position: relative;
  z-index: 1;
  background: #fff;
  width: 100%;
  padding: 8px 0 12px;
}

.mod-wrap .mod-heading {
  text-align: left;
}

/* =========================
  セクション00：メインビジュアル
========================= */
.sec00-wrap {
  position: relative;
  /* 画像からはみ出た湯気を非表示にする */
  overflow: hidden;
}

/* 画像読み込み前でも高さを確保（未読み込み時のレイアウトシフト防止） */
.sec00-wrap picture img {
  aspect-ratio: 1056 / 1310;
}

@media (max-width: 767px) {
  .sec00-wrap picture img {
    aspect-ratio: 1056 / 2690;
  }
}

/* =========================
  料理の湯気アニメ（共通パーツ）
========================= */
.dish-steam {
  position: absolute;
  pointer-events: none;
  z-index: 5;
}

.steam_box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.steam_img {
  position: absolute;
  opacity: 0;
  will-change: transform, opacity;
  mix-blend-mode: screen;
  width: 45%;
  bottom: 0;
  top: auto;
}

.steam_img:nth-child(1) {
  left: 5%;
}

.steam_img:nth-child(2) {
  left: 30%;
}

.steam_img:nth-child(3) {
  left: 55%;
}

.steam_move1 {
  animation: yuge1 3.5s cubic-bezier(.32, 1, .67, 1) -0.5s infinite;
}

.steam_move2 {
  animation: yuge2 4.0s cubic-bezier(.36, 0, .62, 1) -1.5s infinite;
}

.steam_move3 {
  animation: yuge3 3.8s cubic-bezier(.60, 1, .87, 1) -2.8s infinite;
}

.steam_move4 {
  animation: yuge4 4.2s cubic-bezier(.32, 1, .67, 1) -0.8s infinite;
}

.steam_move5 {
  animation: yuge5 3.6s cubic-bezier(.45, .05, .55, .95) -2.0s infinite;
}

@keyframes yuge1 {
  0% { opacity: 0; transform: translateY(12px) scale(0.85); }
  15% { opacity: 1.0; }
  80% { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-48px) scale(1.1); }
}

@keyframes yuge2 {
  0% { opacity: 0; transform: translateY(9px) scale(0.9) translateX(10px); }
  20% { opacity: 1.0; }
  75% { opacity: 0.4; }
  100% { opacity: 0; transform: translateY(-54px) scale(1.15) translateX(-5px); }
}

@keyframes yuge3 {
  0% { opacity: 0; transform: translateY(15px) scale(0.8) translateX(-8px); }
  25% { opacity: 1.0; }
  70% { opacity: 0; }
  100% { opacity: 0; transform: translateY(-42px) scale(1.05) translateX(5px); }
}

@keyframes yuge4 {
  0% { opacity: 0; transform: translateY(11px) scale(0.88); }
  18% { opacity: 1.0; }
  80% { opacity: 0.4; }
  100% { opacity: 0; transform: translateY(-51px) scale(1.12); }
}

@keyframes yuge5 {
  0% { opacity: 0; transform: translateY(13px) scale(0.82) translateX(5px); }
  22% { opacity: 1.0; }
  72% { opacity: 0; }
  100% { opacity: 0; transform: translateY(-45px) scale(1.08) translateX(-8px); }
}

/* ---- 料理ごとの湯気位置（1枚ずつ個別調整用） ----
   .steam_imgは自分のグループの「下端」を起点に立ちのぼるアニメーションなので、
   bottom（画像下端からの距離）を大きくするほど、湯気の出発点が画像の上の方に
   動きます。left/widthは横位置・横幅、heightは立ちのぼれる縦の範囲です。
   ※PC00/SP00で料理の位置が違うため、SP用は下のメディアクエリ内にあります。
   ※2026年版のPC00/SP00差し替えに伴い、料理の配置が変わったため位置を再調整。
     （左1=鉄板ハンバーグ、左2=ラーメン、左3=グラタン、右1=うどん、右2=ステーキ。
      右上の冷たい麺メニューには湯気なし） */

/* 左1：鉄板ハンバーグ */
.dish-steam-left-1 {
  bottom: 53%;
  left: 0.9%;
  width: 31.2%;
  height: 2.3%;
}

/* 左2：ラーメン */
.dish-steam-left-2 {
  bottom: 65%;
  left: 0%;
  width: 15%;
  height: 1.9%;
}

/* 左3：グラタン系の丼 */
.dish-steam-left-3 {
  bottom: 71.6%;
  left: 12.8%;
  width: 20.4%;
  height: 2.1%;
}

/* 右1：うどん */
.dish-steam-right-1 {
  bottom: 50%;
  left: 68%;
  width: 36%;
  height: 2.1%;
}

/* 右2：ステーキ皿 */
.dish-steam-right-2 {
  bottom: 65%;
  left: 83%;
  width: 18%;
  height: 1.9%;
}

@media (max-width: 767px) {
  .dish-steam-left-1 {
    bottom: 58%;
    left: 0.9%;
    width: 26%;
    height: 1.1%;
  }

  .dish-steam-left-2 {
    bottom: 63%;
    left: 0%;
    width: 18%;
    height: 0.9%;
  }

  .dish-steam-left-3 {
    bottom: 70%;
    left: 0%;
    width: 20.4%;
    height: 1.1%;
  }

  .dish-steam-right-1 {
    bottom: 57%;
    left: 70%;
    width: 36.9%;
    height: 1%;
  }

  .dish-steam-right-2 {
    bottom: 72.5%;
    left: 85.2%;
    width: 12.8%;
    height: 0.9%;
  }
}

/* =========================
  クーポンブック（少し遅れてふわっと表示）
========================= */
.coupon-book-wrap {
  position: absolute;
  top: 21.374%;
  left: 0;
  width: 100%;
  z-index: 6;
  opacity: 0;
  animation: bookFadeIn 1s ease forwards;
  animation-delay: 0.8s;
}

.coupon-book-wrap picture img {
  aspect-ratio: 1056 / 580;
}

@media (max-width: 767px) {
  .coupon-book-wrap {
    top: 20.074%;
  }

  .coupon-book-wrap picture img {
    aspect-ratio: 1056 / 930;
  }
}

@keyframes bookFadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}