@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;
  -webkit-text-size-adjust: 100%;
}

/* =========================
  Layout
========================= */
.contents-bg {
  background-color: #cad9e5; /* デフォルト: 月見フェアグループ */
  transition: background-color 0.6s ease;
}

/* グループ別 背景色 active クラス */
.contents-bg.bg-tsukimi-active { background-color: #cad9e5; }
.contents-bg.bg-akiiro-active  { background-color: #fff5e0; }
.contents-bg.bg-shokudo-active { background-color: #f1e6d4; }
.contents-bg.bg-muscat-active  { background-color: #f4f9f2; }

#contents {
  max-width: 1056px;
  margin: 0 auto;
  font-size: 0;
}

.content_body.main_v {
  position: relative;
  max-width: 1056px;
  width: 100%;
  margin: 0 auto;
}

.content_body img {
  vertical-align: bottom;
}

/* グループ別 セクション背景色クラス（各 section に直接指定） */
.section-bg-tsukimi { background-color: #cad9e5; }
.section-bg-akiiro  { background-color: #fff5e0; }
.section-bg-shokudo { background-color: #f1e6d4; }
.section-bg-muscat  { background-color: #f4f9f2; }

/* =========================
  Main Visual 共通
========================= */
.main_v {
  position: relative;
  overflow: visible;
}

/* =========================
  固定バナー共通（グループ別に切り替え）
========================= */
.fix-banner {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  width: 100%;
  max-width: 1056px;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.fix-banner.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.fix-banner img {
  width: 100%;
  height: auto;
  display: block;
}

.fix-banner .banner-pc { display: block; }
.fix-banner .banner-sp { display: none; }

@media (max-width: 767px) {
  .fix-banner .banner-pc { display: none; }
  .fix-banner .banner-sp { display: block; }
}

/* =========================
  slide-clip
========================= */
.slide-clip {
  overflow: hidden;
}

/* =========================
  アンカーターゲット
========================= */
.anchor-target {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
}

/* =========================
  spec（各セクション共通）
========================= */
.spec-always {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  z-index: 4;
  opacity: 1;
}

/* =========================
  オーバーレイ共通（blur / noodle ラッパー）
========================= */
.overlay-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* =========================
  【秋色グルメ / ガスト食堂 共通】湯気アニメ
  参考: 湯気参考_style.css の .menu-steam-wrap / .menu-steam-group 仕様を移植
========================= */

/* ベース画像と湯気を重ねるコンテナ（overflow:hidden で湯気を画像内に収める） */
.steak-steam-wrap {
  position: relative;
  display: block;
  overflow: hidden;
  line-height: 0;
}

/* 上に隣接する画像側へ湯気がはみ出してよい場合に付与（クリッピングを解除） */
.steak-steam-wrap.steam-overflow-top {
  overflow: visible;
}

.steak-steam-wrap picture,
.steak-steam-wrap > img {
  display: block;
  width: 100%;
  line-height: 0;
}

/* 湯気グループ共通（絶対配置・各セクションで位置を上書き） */
.menu-steam-group {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  /* デフォルト値 – 各 .steam-akiiro-XX / .steam-shokudo-XX で上書き */
  bottom: 50%;
  left: 5%;
  width: 90%;
  height: 40%;
}

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

/* 湯気1枚のサイズ・起点（bottom: 0 = グループ下端から上へ流れる） */
.menu-steam-group .steam_img {
  position: absolute;
  opacity: 0;
  will-change: transform, opacity;
  mix-blend-mode: screen;
  width: 45%;
  bottom: 0;
  top: auto;
}

/* 3枚の横位置をずらす */
.menu-steam-group .steam_img:nth-child(1) { left:  5%; }
.menu-steam-group .steam_img:nth-child(2) { left: 30%; }
.menu-steam-group .steam_img:nth-child(3) { left: 55%; }

/* ============================================================
  湯気グループ 位置・サイズ 個別調整（月見フェア tsukimi_01〜03）
  01: 全体的に配置 / 02: 右寄りに配置 / 03: 中央やや左寄りに配置
============================================================ */
.steam-tsukimi-01 { bottom: 55%; left: 5%;  width: 90%; height: 55%; }
.steam-tsukimi-02 { bottom: 60%; left: 35%; width: 55%; height: 60%; }
.steam-tsukimi-03 { bottom: 55%; left: 5%; width: 70%; height: 65%; }

/* ============================================================
  湯気グループ 位置・サイズ 個別調整（秋色グルメ akiiro_01〜06）
  bottom : 画像下端から何%上が湯気の起点か（大きいほど上）
  left   : グループ左端の横位置（画像幅の%）
  width  : グループの横幅（広くすると湯気が横に広がる）
  height : 湯気が流れる縦の高さ
  akiiro_07（ねぎとろ丼）は湯気なしのため対応クラスなし。
============================================================ */
.steam-akiiro-01 { bottom: 55%; left: 25%; width: 65%; height: 55%; }
.steam-akiiro-02 { bottom: 55%; left: 5%;  width: 80%; height: 55%; }
.steam-akiiro-03 { bottom: 65%; left: 20%; width: 75%; height: 55%; }
.steam-akiiro-04 { bottom: 55%; left: 5%;  width: 60%; height: 55%; }
.steam-akiiro-05 { bottom: 55%; left: 15%; width: 70%; height: 55%; }
.steam-akiiro-06 { bottom: 55%; left: 5%;  width: 60%; height: 55%; }

/* =========================
  湯気アニメーション（参考_style.css の keyframes をそのまま移植）
========================= */
.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(20px)  scale(0.85); }
  15%  { opacity: 1; }
  80%  { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-80px)  scale(1.10); }
}
@keyframes yuge2 {
  0%   { opacity: 0; transform: translateY(15px)  scale(0.90) translateX( 10px); }
  20%  { opacity: 1; }
  75%  { opacity: 0.4; }
  100% { opacity: 0; transform: translateY(-90px)  scale(1.15) translateX( -5px); }
}
@keyframes yuge3 {
  0%   { opacity: 0; transform: translateY(25px)  scale(0.80) translateX( -8px); }
  25%  { opacity: 1; }
  70%  { opacity: 0; }
  100% { opacity: 0; transform: translateY(-70px)  scale(1.05) translateX(  5px); }
}
@keyframes yuge4 {
  0%   { opacity: 0; transform: translateY(18px)  scale(0.88); }
  18%  { opacity: 1; }
  80%  { opacity: 0.4; }
  100% { opacity: 0; transform: translateY(-85px)  scale(1.12); }
}
@keyframes yuge5 {
  0%   { opacity: 0; transform: translateY(22px)  scale(0.82) translateX(  5px); }
  22%  { opacity: 1; }
  72%  { opacity: 0; }
  100% { opacity: 0; transform: translateY(-75px)  scale(1.08) translateX( -8px); }
}

/* =========================
  【ガスト食堂グループ】section-shokudo: ステージ + 商品オーバーレイ + 湯気
========================= */

/* ベース背景：00_1(上部固定) + 00_3(下部固定) + 00_2_tile(中央 repeat-y) の3層合成。
   高さは .shokudo-items の内容量に応じて自動で伸縮する。
   00_2_tile は元の帯(1056×3px)を縦に100回あらかじめ並べた画像(1056×300px)。
   3pxのまま background-size:auto で repeat-y すると、iOS Safari/Chrome(WebKit)で
   1px未満の極薄タイルを大量に繰り返す際に高さがずれ、下端が背景からはみ出す
   不具合が出るため、繰り返し単位を大きくして回避している。 */
.shokudo-stage {
  position: relative;
  background-image:
    url('../images/202609fair_shokudo_00_1.webp'),
    url('../images/202609fair_shokudo_00_3.webp'),
    url('../images/202609fair_shokudo_00_2_tile.webp');
  background-repeat: no-repeat, no-repeat, repeat-y;
  background-position: top center, bottom center, top center;
  background-size: 100% auto, 100% auto, 100% auto;
}

/* oomori: top は高さ基準で解決されるため、幅基準で解決される margin-top で代用し
   ベース背景の伸縮（＝幅の拡縮）にのみ追随させている */
.sd-oomori {
  position: absolute;
  top: 0;
  left: 75%;           
  margin-top: 1.68%;
  width: 22%;
  height: auto;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.8s ease;
  transform-origin: 50% 50%;  /* 画像中心を軸に回転 */
}

.sd-oomori.sd-active {
  opacity: 1;
  /* フェードイン完了後（0.9s）から4秒ごとにフリフリ、ずっと繰り返す */
  animation: oomoriWiggle 4s ease-in-out 0.9s infinite;
}

@keyframes oomoriWiggle {
  0%   { transform: rotate(  0deg); }
  4%   { transform: rotate( 18deg); }
  11%  { transform: rotate(-18deg); }
  17%  { transform: rotate( 12deg); }
  23%  { transform: rotate( -8deg); }
  28%  { transform: rotate(  4deg); }
  33%  { transform: rotate(  0deg); }
  100% { transform: rotate(  0deg); } /* 残りは静止 → 次のサイクルまで待機 */
}

/* 商品グリッド（PC 2列×2行）。px値は1056px幅基準で%に換算。
   47px→32.955%(padding-top) / 34px→3.220%(row-gap) / 7px→0.663%(column-gap)
   align-items:start … stretch(初期値)だと行内の背が高い方に合わせて
   もう一方が伸ばされ、overflow:hiddenで下端が切れるため明示的に指定 */
.shokudo-items {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  column-gap: 0;
  row-gap: 0;
  padding: 32.955% 6.91% 8%;
}

.sd-item-wrap {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.sd-item-wrap.sd-active {
  opacity: 1;
}

.sd-item-wrap .sd-item-img {
  display: block;
  width: 100%;
  height: auto;
}



/* 食堂 湯気グループ 位置・サイズ 個別調整（PC基準）
   bottom / left / width / height を各アイテムごとに上書きして微調整 */
.steam-shokudo-01 { bottom: 60%; left: 45%; width: 50%; height: 45%; }
.steam-shokudo-02 { bottom: 65%; left:  0%; width: 50%; height: 45%; }
.steam-shokudo-03 { bottom: 65%; left: 35%; width: 50%; height: 45%; }
.steam-shokudo-04 { bottom: 65%; left: 10%; width: 50%; height: 45%; }
.steam-shokudo-05 { bottom: 65%; left: 40%; width: 60%; height: 45%; }

/* SP: 04 底端がはみ出ないよう下余白を増やす */
@media (max-width: 767px) {
  .shokudo-items {
    padding-bottom: 10%;
  }

  /* SP: 商品画像間（01-04）に約10%の隙間を追加（最後の商品の下は不要） */
  .sd-item-wrap:not(:last-child) {
    margin-bottom: 5%;
  }

  /* SP: 湯気 */
.steam-shokudo-01 { bottom: 65%; left: 25%; width: 50%; height: 45%; }
.steam-shokudo-02 { bottom: 65%; left: 10%; width: 50%; height: 45%; }
.steam-shokudo-03 { bottom: 65%; left: 10%; width: 50%; height: 45%; }
.steam-shokudo-04 { bottom: 65%; left: 30%; width: 50%; height: 45%; }
.steam-shokudo-05 { bottom: 65%; left: 20%; width: 50%; height: 45%; }
}

/* =========================
  【シャインマスカットグループ】muscat スライドイン（白桃グループ相当）
  shadow は mix-blend-mode: color-burn（焼き込みカラー）
========================= */
.muscat-wrap {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  transform: translateX(80px);
  transition: transform 1.4s cubic-bezier(0.22, 0.8, 0.36, 1);
}

.muscat-from-left {
  transform: translateX(-80px);
}

.muscat-from-right {
  transform: translateX(80px);
}

.muscat-wrap.muscat-active {
  transform: translateX(0);
}

.muscat-wrap .muscat-item {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.muscat-wrap .muscat-shadow {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  mix-blend-mode: color-burn;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.muscat-wrap.muscat-active .muscat-item,
.muscat-wrap.muscat-active .muscat-shadow {
  opacity: 1;
}

/* 商品05: shadowなし・スライドなし・ふんわりフェードインのみ */
.muscat-fade {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.muscat-fade .muscat-item {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.muscat-fade.muscat-fade-active .muscat-item {
  opacity: 1;
}

#section-muscat .spec-always {
  z-index: 3;
  height: auto;
  object-fit: unset;
}

/* ========================================
   YouTube動画埋め込み
======================================== */

.youtube-section {
    position: relative;
    width: 100%;
}

.youtube-section > img {
    display: block;
    width: 100%;
    height: auto;
}

/* YouTube本体 */
.youtube-player {
    position: absolute;
    left: 6.25%;
    width: 87.5%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.youtube-player iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* 月見
   元画像：1056 × 1000
   動画位置：x=66 / y=40
*/
.youtube-section--tsukimi .youtube-player {
    top: 4%;
}

/* 秋色グルメ
   元画像：1056 × 600
   動画位置：x=66 / y=35
*/
.youtube-section--akiiro .youtube-player {
    top: 5.833333%;
}