@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;
  font-size: 62.5%;
  line-height: 1;
  text-align: center;
  background-color: #fffd94;
  -webkit-text-size-adjust: 100%;
}

/* =========================
  Layout
========================= */
#contents {
  max-width: 1056px;
  margin: 0 auto;
  font-size: 0;
}
.content_body.main_v {
  position: relative;   /* 元々ある場合は残す */
  max-width: 1056px;    /* ← 最大幅を指定 */
  width: 100%;          /* ← 小さい画面では横幅100% */
  margin: 0 auto;       /* ← 中央寄せ */
}
.content_body img {
  vertical-align: bottom;
}

.content_body_row {
  display: flex;
  flex-wrap: wrap;
  max-width: 1056px;
  margin: 0 auto;
}

.content_body_row .main_v {
  width: 50%;
}

@media (max-width: 767px) {
  body {
    background-color: #ffffff;
  }

  .content_body_row .main_v {
    width: 100%;
  }
}

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

.steam_box {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.steam_box ul {
  position: relative;
  width: 100%;
  height: 100%;
}

.steam_img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  will-change: transform, opacity;
}

/* Steam Animations 共通 */
.steam_move1 {
  animation: steam1 3s cubic-bezier(.32, 1, .67, 1) 2s infinite;
}

.steam_move2 {
  animation: steam2 3s cubic-bezier(.36, 0, .62, 1) 2.6s infinite;
}

.steam_move3 {
  animation: steam3 3s cubic-bezier(.60, 1, .87, 1) 4.3s infinite;
}

/* PC用 */
@media (min-width: 768px) {
  .steam_img {
    bottom: 0;
  }

  @keyframes steam1 {
    0% {
      opacity: 0;
      bottom: -25%
    }

    20% {
      opacity: .6
    }

    100% {
      opacity: 0;
      bottom: 0
    }
  }

  @keyframes steam2 {
    0% {
      opacity: 0;
      bottom: -25%
    }

    30% {
      opacity: .5
    }

    100% {
      opacity: 0;
      bottom: 0
    }
  }

  @keyframes steam3 {
    0% {
      opacity: 0;
      bottom: -30%
    }

    30% {
      opacity: .6
    }

    60% {
      opacity: 0
    }

    100% {
      opacity: 0;
      bottom: 0
    }
  }
}

/* SP用 */
@media (max-width: 767px) {
  .steam_img {
    top: 0;
    bottom: auto;
  }

  @keyframes steam1 {
    0% {
      opacity: 0;
      top: 0
    }

    20% {
      opacity: .8
    }

    100% {
      opacity: 0;
      top: -18%
    }
  }

  @keyframes steam2 {
    0% {
      opacity: 0;
      top: 0
    }

    30% {
      opacity: .7
    }

    100% {
      opacity: 0;
      top: -17%
    }
  }

  @keyframes steam3 {
    0% {
      opacity: 0;
      top: 0
    }

    30% {
      opacity: .8
    }

    60% {
      opacity: 0
    }

    100% {
      opacity: 0;
      top: -20%
    }
  }
}

/* Steam 位置プリセット */
.steam01 .steam_box {
  bottom: 0;
  padding-bottom: 140%;
}

.steam02 .steam_box {
  right: 10%;
  width: 120%;
  bottom: 0;
  padding-bottom: 135%;
}

.steam03 .steam_box {
  bottom: 0;
  z-index: 19;
  padding-bottom: 70%;
}

.steam04 .steam_box {
  right: 10%;
  width: 40%;
  padding-bottom: 20%;
}

.steam05 .steam_box {
  left: 10%;
  width: 40%;
  padding-bottom: 20%;
}

.steam06 .steam_box {
  right: 5%;
  width: 80%;
  padding-bottom: 75%;
}

.steam07 .steam_box {
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  padding-bottom: 75%;
}

.steam08 .steam_box {
  right: 10%;
  width: 60%;
  padding-bottom: 40%;
}

.steam09 .steam_box {
  left: 10%;
  width: 60%;
  padding-bottom: 40%;
}

.steam10 .steam_box {
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  padding-bottom: 25%;
}

/* SP用共通調整 */
@media (max-width: 767px) {
  .steam_box {
    width: 100%;
    height: 100%;
    left: 45%;
    transform: translateX(-50%);
    padding-bottom: 50%;
  }
}

/* steam03 & steam04 共通整理版 */
.steam03,
.steam04 {
  position: relative;
}

.steam03 .steam_box {
  position: absolute;
  left: 0;
  width: 85%;
  /* 幅は必要に応じ調整 */
  padding-bottom: 40%;
  bottom: 0;
  z-index: 19;
  /* bukuより上 */
  pointer-events: none;
}

.steam04 .steam_box {
  position: absolute;
  left: 20%;
  width: 85%;
  /* 幅は必要に応じ調整 */
  padding-bottom: 25%;
  bottom: 0;
  z-index: 19;
  /* bukuより上 */
  pointer-events: none;
}

.steam03 .steam_box ul,
.steam04 .steam_box ul {
  position: relative;
  width: 100%;
  height: 100%;
}

.steam03 .steam_img,
.steam04 .steam_img {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  opacity: 0;
  will-change: transform, opacity;
}

/* 固有アニメーション割り当て */
.steam03 .steam_move1 {
  animation: steam3_1 3s cubic-bezier(.32, 1, .67, 1) 2s infinite;
}

.steam03 .steam_move2 {
  animation: steam3_2 3s cubic-bezier(.36, 0, .62, 1) 2.6s infinite;
}

.steam03 .steam_move3 {
  animation: steam3_3 3s cubic-bezier(.60, 1, .87, 1) 4.3s infinite;
}

.steam04 .steam_move1 {
  animation: steam4_1 3s cubic-bezier(.32, 1, .67, 1) 2s infinite;
}

.steam04 .steam_move2 {
  animation: steam4_2 3s cubic-bezier(.36, 0, .62, 1) 2.6s infinite;
}

.steam04 .steam_move3 {
  animation: steam4_3 3s cubic-bezier(.60, 1, .87, 1) 4.3s infinite;
}

/* PC用アニメーション */
@media (min-width: 768px) {
  @keyframes steam3_1 {
    0% {
      opacity: 0;
      bottom: -25%;
    }

    20% {
      opacity: 0.6;
    }

    100% {
      opacity: 0;
      bottom: 100%;
    }
  }

  @keyframes steam3_2 {
    0% {
      opacity: 0;
      bottom: -25%;
    }

    30% {
      opacity: 0.5;
    }

    100% {
      opacity: 0;
      bottom: 100%;
    }
  }

  @keyframes steam3_3 {
    0% {
      opacity: 0;
      bottom: -30%;
    }

    30% {
      opacity: 0.6;
    }

    60% {
      opacity: 0;
    }

    100% {
      opacity: 0;
      bottom: 100%;
    }
  }

  @keyframes steam4_1 {
    0% {
      opacity: 0;
      bottom: -25%;
    }

    20% {
      opacity: 0.6;
    }

    100% {
      opacity: 0;
      bottom: 100%;
    }
  }

  @keyframes steam4_2 {
    0% {
      opacity: 0;
      bottom: -25%;
    }

    30% {
      opacity: 0.5;
    }

    100% {
      opacity: 0;
      bottom: 100%;
    }
  }

  @keyframes steam4_3 {
    0% {
      opacity: 0;
      bottom: -30%;
    }

    30% {
      opacity: 0.6;
    }

    60% {
      opacity: 0;
    }

    100% {
      opacity: 0;
      bottom: 100%;
    }
  }
}

/* SP用アニメーション */
@media (max-width: 767px) {

  .steam03 .steam_img,
  .steam04 .steam_img {
    top: 0;
    bottom: auto;
  }

  @keyframes steam3_1 {
    0% {
      opacity: 0;
      top: 0;
    }

    20% {
      opacity: 0.8;
    }

    100% {
      opacity: 0;
      top: -18%;
    }
  }

  @keyframes steam3_2 {
    0% {
      opacity: 0;
      top: 0;
    }

    30% {
      opacity: 0.7;
    }

    100% {
      opacity: 0;
      top: -17%;
    }
  }

  @keyframes steam3_3 {
    0% {
      opacity: 0;
      top: 0;
    }

    30% {
      opacity: 0.8;
    }

    60% {
      opacity: 0;
    }

    100% {
      opacity: 0;
      top: -20%;
    }
  }

  @keyframes steam4_1 {
    0% {
      opacity: 0;
      top: 0;
    }

    20% {
      opacity: 0.8;
    }

    100% {
      opacity: 0;
      top: -18%;
    }
  }

  @keyframes steam4_2 {
    0% {
      opacity: 0;
      top: 0;
    }

    30% {
      opacity: 0.7;
    }

    100% {
      opacity: 0;
      top: -17%;
    }
  }

  @keyframes steam4_3 {
    0% {
      opacity: 0;
      top: 0;
    }

    30% {
      opacity: 0.8;
    }

    60% {
      opacity: 0;
    }

    100% {
      opacity: 0;
      top: -20%;
    }
  }
}

/* SP用位置調整*/
@media (max-width: 767px) {

  .steam03 .steam_box,
  .steam04 .steam_box {
    top: 20%;
    left: 20%;
    transform: scale(1.5);
  }
}

/* steam03 / steam04 PC・SP 共通でゆっくり*/

.steam03 .steam_move1,
.steam03 .steam_move2,
.steam03 .steam_move3,
.steam04 .steam_move1,
.steam04 .steam_move2,
.steam04 .steam_move3 {
  animation-duration: 6s;
}

/* =========================
  steam01用 炎の動き
  ========================= */
.flame-overlay {
  --pos-x: 50%;
  --pos-y: 60%;
  position: absolute;
  top: var(--pos-y);
  left: var(--pos-x);
  transform: translate(-50%, -50%);
  width: 80%;
  height: auto;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 18;
  opacity: 0.5;
  animation: flamePulse 2s ease-in-out infinite alternate;
}

.flame-overlay img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

@keyframes flamePulse {
  0% {
    opacity: 0.3
  }

  50% {
    opacity: 0.9
  }

  100% {
    opacity: 0.4
  }
}

/* Flame Overlay - 位置調整しやすい版 */
.steam01 {
  position: relative;
  /* 安全策として明示 */
}

.flame-overlay {
  --pos-x: 50%;
  --pos-y: 38%;

  position: absolute;
  top: var(--pos-y);
  left: var(--pos-x);
  transform: translate(-50%, -50%);
  width: 80%;
  /* 元画像より少し小さめ */
  height: auto;
  pointer-events: none;
  mix-blend-mode: screen;
  /* 覆い焼き */
  z-index: 18;
  /* bukuより上、main-titleより下 */
  opacity: 0.5;
  animation: flamePulse 2s ease-in-out infinite alternate;
}

.flame-overlay img {
  width: 95%;
  height: auto;
  object-fit: contain;
}

/* 明るさふわふわアニメーション */
@keyframes flamePulse {
  0% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.9;
  }

  100% {
    opacity: 0.4;
  }
}

/* SPだけ変更 */
@media (max-width: 767px) {
  .flame-overlay {
    --pos-y: 45%;
    mix-blend-mode: screen;
  }
}




/* =========================
  Fixed Header Banner
========================= */
.content_fix_header {
  position: fixed;
  top: 0;
  left: 50%;
  max-width: 1056px;
  width: 100%;
  transform: translate(-50%, -100%);
  transition: transform .5s ease;
  z-index: 100;
}

.content_fix_header.fixed {
  transform: translate(-50%, 0);
}

.banner {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

[data-state="1"] .banner-1,
[data-state="2"] .banner-2,
[data-state="3"] .banner-3 {
  opacity: 1;
}

.pc {
  display: block;
}

.sp {
  display: none;
}

@media (max-width: 768px) {
  .pc {
    display: none;
  }

  .sp {
    display: block;
  }
}

/* =========================
  hanabira-anime
========================= */
.sakura-section {
  position: relative;
  overflow: hidden;
}

.sakura-section img {
  display: block;
  width: 100%;
}

.sakura-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  overflow: visible;
}

.sakura {
  position: absolute;
  width: 30px;
  height: 30px;
  top: -10%;
  opacity: 0.9;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform-origin: center center;
  animation-name: fall;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.sakura:nth-child(4n+1) {
  background-image: url('../images/flo_01.svg');
}

.sakura:nth-child(4n+2) {
  background-image: url('../images/flo_02.svg');
}

.sakura:nth-child(4n+3) {
  background-image: url('../images/flo_03.svg');
}

.sakura:nth-child(4n+4) {
  background-image: url('../images/flo_04.svg');
}

.sakura1 {
  left: 10%;
  animation-duration: 18s;
  animation-delay: -4s;
}

.sakura2 {
  left: 25%;
  animation-duration: 17s;
  animation-delay: -6s;
}

.sakura3 {
  left: 40%;
  animation-duration: 19s;
  animation-delay: -2s;
}

.sakura4 {
  left: 55%;
  animation-duration: 20s;
  animation-delay: -5s;
}

.sakura5 {
  left: 70%;
  animation-duration: 16s;
  animation-delay: -3s;
}

.sakura6 {
  left: 85%;
  animation-duration: 18.5s;
  animation-delay: -1s;
}

@keyframes fall {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }

  20% {
    transform: translate(40px, 20vh) rotate(30deg) scale(1.05);
    opacity: 0.9;
  }

  40% {
    transform: translate(-40px, 40vh) rotate(90deg) scale(1.1);
    opacity: 0.85;
  }

  60% {
    transform: translate(50px, 60vh) rotate(150deg) scale(0.95);
    opacity: 0.7;
  }

  80% {
    transform: translate(-50px, 80vh) rotate(220deg) scale(1.05);
    opacity: 0.6;
  }

  100% {
    transform: translate(0, 110vh) rotate(360deg) scale(0.9);
    opacity: 0;
  }
}

@media (max-width:767px) {
  .sakura {
    width: 20px;
    height: 20px;
  }
}

/* =========================
  Main Title Overlay
========================= */
.main-title {
  /* 修正版 */
  position: absolute;
  inset: 0;
  margin: auto;
  width: 80%;
  max-width: 600px;
  height: fit-content;
  z-index: 20;
  pointer-events: none;
}

.main-title img {
  width: 100%;
  height: auto;
  display: block;
}
@media screen and (min-width:768px) {
  .main-title {
    top:-10%; /* 数値を少し小さくすると上に移動 */
  }
}

@media (max-width: 767px) {
  .main-title {
    width: 100%;
    max-width: 380px;
  }
}

/* =========================
  バンバーグ吹き出し
========================= */
.main_v {
  position: relative;
}

.fukidashi,
.fukidashi-gutsu {
  position: absolute;
  z-index: 20;
  pointer-events: none;
}

.fukidashi-02 .fukidashi,
.fukidashi-03 .fukidashi {
  width: 190px;
}

.fukidashi-02 .fukidashi-gutsu,
.fukidashi-03 .fukidashi-gutsu {
  width: 180px;
}

.fukidashi-02 .fukidashi {
  top: 1%;
  left: 3%;
}

.fukidashi-02 .fukidashi-gutsu {
  top: 1%;
  left: 4%;
}

.fukidashi-03 .fukidashi {
  top: 5%;
  right: 6%;
}

.fukidashi-03 .fukidashi-gutsu {
  top: 6%;
  right: 7%;
}

/* 吹き出し初期状態 */
.fukidashi-02 .fukidashi-inner,
.fukidashi-02 .fukidashi-gutsu-inner,
.fukidashi-03 .fukidashi-inner,
.fukidashi-03 .fukidashi-gutsu-inner {
  opacity: 0;
  transform-origin: center;
}

/* fukidashi-03 innerは下からスーッと */
.fukidashi-03 .fukidashi-inner {
  transform: translateY(20px);
}

.fukidashi-03 .fukidashi-gutsu-inner {
  transform: translateY(20px);
}

.fukidashi-02.active .fukidashi-inner {
  animation: fukidashiPop 0.6s ease-out forwards;
  animation-delay: 0.2s;
}

.fukidashi-02.active .fukidashi-gutsu-inner {
  animation: gutsuShakeSlow02 1.2s ease-out forwards;
  animation-delay: 0.6s;
}

.fukidashi-03.active .fukidashi-inner {
  animation: fukidashiSlideUp 0.6s ease-out forwards;
  animation-delay: 1s;
}

.fukidashi-03.active .fukidashi-gutsu-inner {
  animation: gutsuSlideUp 1s ease-out forwards;
  animation-delay: 1.6s;
}

/* Keyframes */
@keyframes fukidashiPop {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }

  60% {
    opacity: 1;
    transform: scale(1.08);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fukidashiSlideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gutsuShakeSlow02 {
  0% {
    opacity: 0;
    transform: translateX(0) rotate(0deg) scale(1.2);
  }

  20% {
    opacity: 1;
    transform: translateX(-8px) rotate(-6deg) scale(1.25);
  }

  40% {
    transform: translateX(8px) rotate(6deg) scale(1.25);
  }

  60% {
    transform: translateX(-6px) rotate(-4deg) scale(1.25);
  }

  80% {
    transform: translateX(6px) rotate(4deg) scale(1.25);
  }

  100% {
    opacity: 1;
    transform: translateX(0) rotate(0deg) scale(1.2);
  }
}

/* 新規：下からスーッと */
@keyframes gutsuSlideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* SP 微調整 */
@media (max-width: 767px) {

  .fukidashi-02 .fukidashi,
  .fukidashi-03 .fukidashi {
    width: 150px;
    top: 2%;
  }

  .fukidashi-02 .fukidashi-gutsu,
  .fukidashi-03 .fukidashi-gutsu {
    width: 120px;
    top: 0;
  }

  .fukidashi-02 .fukidashi {
    left: 3%;
  }

  .fukidashi-02 .fukidashi-gutsu {
    left: 6%;
    top: 4%;
  }

  .fukidashi-03 .fukidashi {
    right: 5%;
  }

  .fukidashi-03 .fukidashi-gutsu {
    right: 8%;
    top: 4%;
  }
}



/* =========================
  ハンバーグぶくぶく
========================= */

.buku-layer {
  position: absolute;
  top: -13%;
  left: 0;
  width: 78%;
  height: 66%;
  pointer-events: none;
  z-index: 15;
  overflow: hidden;
}

.buku {
  position: absolute;
  width: 12%;
  max-width: 90px;
  min-width: 56px;
  aspect-ratio: 60 / 31;
  background: url('../images/buku.png') no-repeat center / contain;
  opacity: 0;
  transform-origin: center bottom;
  animation-name: bukuFloatSoft;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
}

/* 各ぶくぶく個別設定（位置・タイミング・スケール）左/right / bottom / scale / duration / delay */
.b1 {
  left: 18%;
  bottom: 36%;
  --scale: 0.45;
  animation-duration: 4.2s;
  animation-delay: 0s;
}

.b2 {
  left: 19%;
  bottom: 44%;
  --scale: 0.60;
  animation-duration: 4.6s;
  animation-delay: 1s;
}

.b3 {
  left: 26%;
  bottom: 33%;
  --scale: 0.50;
  animation-duration: 3.8s;
  animation-delay: 0.5s;
}

.b4 {
  left: 25%;
  bottom: 40%;
  --scale: 0.33;
  animation-duration: 4.5s;
  animation-delay: 1.5s;
}

.b5 {
  left: 26%;
  bottom: 45%;
  --scale: 0.40;
  animation-duration: 4s;
  animation-delay: .2s;
}

.b6 {
  left: 26%;
  bottom: 60%;
  --scale: 0.50;
  animation-duration: 3.5s;
  animation-delay: 0.5s;
}

.b7 {
  left: 22%;
  bottom: 48%;
  --scale: 0.26;
  animation-duration: 4.5s;
  animation-delay: 1.8s;
}

.b8 {
  left: 73%;
  bottom: 35%;
  --scale: 0.33;
  animation-duration: 3.6s;
  animation-delay: 1.8s;
}


.b9 {
  left: 78%;
  bottom: 35%;
  --scale: 0.36;
  animation-duration: 4.0s;
  animation-delay: 1s;
}

.b10 {
  left: 75%;
  bottom: 43%;
  --scale: 0.40;
  animation-duration: 3.6s;
  animation-delay: 0.2s;
}

.b11 {
  left: 78%;
  bottom: 41%;
  --scale: 0.24;
  animation-duration: 4s;
  animation-delay: 1s;
}

.b12 {
  left: 79%;
  bottom: 42%;
  --scale: 0.40;
  animation-duration: 4.7s;
  animation-delay: 1.4s;
}

.b13 {
  left: 77%;
  bottom: 37%;
  --scale: 0.55;
  animation-duration: 4.3s;
  animation-delay: 0.3s;
}

.b14 {
  left: 84%;
  bottom: 39%;
  --scale: 0.52;
  animation-duration: 4.5s;
  animation-delay: 1.0s;
}

.b15 {
  left: 85%;
  bottom: 43%;
  --scale: 0.4;
  animation-duration: 4.5s;
  animation-delay: 0.3s;
}

/* アニメーション */
@keyframes bukuFloatSoft {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(var(--scale));
  }

  25% {
    opacity: 0.5;
  }

  55% {
    opacity: 0.9;
    transform: translateY(-6px) scale(var(--scale));
  }

  100% {
    opacity: 0;
    transform: translateY(-14px) scale(var(--scale));
  }
}

/* SP 微調整 */
@media (max-width: 767px) {
  .buku-layer {
    width: 77%;
    height: 66%;
    top: -7%;
  }

  .buku {
    min-width: 48px;
    max-width: 72px;
  }
}


/* -------------------------------
   PIZZA吹き出し
-------------------------------- */
.pizza-fukidashi {
  position: absolute;
  width: 100%;
  max-width: 340px;
  height: auto;
  opacity: 0;
  pointer-events: none;
  z-index: 30;
  transition: opacity 1s ease-in-out;
}

.pizza-fukidashi img {
  width: 100%;
  height: auto;
  display: block;
}

.pizza-fukidashi.active {
  opacity: 1;
}

/* 08用 位置調整 */
.pizza-fukidashi-08 {
  top: 3%;
  right: 2%;
}

/* 09用 位置調整 */
.pizza-fukidashi-09 {
  top: 23%;
  left: 4%;
}

/* =========================
  pizza吹き出しのエビプリプリ
========================= */

.pizza-fukidashi-inner {
  position: relative;
  width: 100%;
}

.fukidashi-base {
  width: 100%;
  display: block;
}

.fukidashi-ebi {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  transform-origin: center bottom;
}

.fukidashi-ebi.is-puri {
  animation: ebiPuri 0.6s ease-in-out;
}

@keyframes ebiPuri {
  0% {
    transform: scale(1);
  }

  20% {
    transform: scale(1.08, 0.95);
  }

  40% {
    transform: scale(0.96, 1.08);
  }

  60% {
    transform: scale(1.06, 0.97);
  }

  80% {
    transform: scale(0.98, 1.03);
  }

  100% {
    transform: scale(1);
  }
}

/* =========================
  pizza吹き出しのSP用調整
========================= */
@media (max-width: 767px) {

  /* 08用 */
  .pizza-fukidashi-08 {
    width: 40%;
    /* 元の幅より大きく */
    max-width: 230px;
    /* 最大幅調整 */
    top: 2%;
    /* 上方向位置 */
    right: 3%;
    /* 右方向位置 */
  }

  /* 09用吹き出し */
  .pizza-fukidashi-09 {
    width: 38%;
    max-width: 260px;
    top: 14%;
    left: 1%;
  }

  /* エビ画像調整 */
  .pizza-fukidashi-09 .fukidashi-ebi {
    width: 130%;
    /* 吹き出しに対して比率で拡大 */
    max-width: 150px;
    /* 必要に応じて最大幅 */
    top: 0px;
    /* 吹き出し内での縦位置 */
    left: 5%;
    /* 吹き出し内での横位置 */
  }
}


/* =========================
  上林さん overlay（共通）
========================= */

.content_body.main_v {
  position: relative;
  /* ← 親基準（必須） */
}

.kanbayashi-overlay {
  position: absolute;

  top: var(--kanbayashi-top, 63%);
  right: var(--kanbayashi-right, 13%);

  width: 74%;
  max-width: 1566px;
  height: auto;

  pointer-events: none;
  z-index: 5;

  opacity: 0;
  transition: opacity 1s ease;
}

.kanbayashi-overlay.active {
  opacity: 1;
}

.kanbayashi-overlay img {
  width: 100%;
  height: auto;
  display: block;
}

.kanbayashi-overlay img {
  width: 100%;
  height: auto;
  display: block;
}

/* 上林さんSP調整 */

@media (max-width: 767px) {
  .kanbayashi-overlay {
    width: 80%;
    max-width: none;

    --kanbayashi-top: 63%;
    --kanbayashi-right: 9%;
  }
}



/* -----------------------------
sweetsオーバーレイ追加用
----------------------------- */
.sweets-stage {
  position: relative;        /* オーバーレイ基準 */
  width: 100%;
  margin: 0 auto;
}

.sweets-base {
  width: 100%;
  height: auto;
  display: block;
}

.sweets-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sweets-overlay img {
  position: absolute;
  width: auto;
  height: auto;
}



/* sweets ph 左右スライド用 */
.sweets-ph {
  opacity: 0;
  transition: transform 1s ease-out, opacity 1s ease-out;
}

.sweets-ph.ph01 { transform: translateX(-50px); } /* 左から */
.sweets-ph.ph02 { transform: translateX(50px); }  /* 右から */
.sweets-ph.ph03 { transform: translateX(-50px); } /* 左から */
.sweets-ph.ph04 { transform: translateX(50px); }  /* 右から */
.sweets-ph.ph05 { transform: translateX(-50px); } /* 左から */

.sweets-ph.active {
  opacity: 1;
  transform: translateX(0);
}
/* sweets text ふんわりフェードイン用 */
.sweets-text {
  opacity: 0;
  transform: translateY(20px); /* 下から少し浮かせる */
  transition: transform 1s ease-out, opacity 1s ease-out;
}

/* 遅延タイミングを順番に設定 */
.sweets-text.text01.active { transition-delay: 0.2s; }
.sweets-text.text02.active { transition-delay: 0.4s; }
.sweets-text.text03.active { transition-delay: 0.6s; }
.sweets-text.text04.active { transition-delay: 0.8s; }
.sweets-text.text05.active { transition-delay: 1s; }

.sweets-text.active {
  opacity: 1;
  transform: translateY(0);
}

/* =========================
  sweets-stage用 大福吹き出し
========================= */
.sweets-daihuku {
  position: absolute;
  width: 630px;
  height: 610px;
  z-index: 100;
  pointer-events: none;
  top: calc(5580px * (100% / 2112px));
  left: calc(1146px * (100% / 2112px));

  opacity: 0;                 /* 初期は透明 */
  display: block;
  transition: opacity 2s ease, transform 2s ease;  /* 2秒でゆっくり表示 */
  transform: translateY(20px); /* 少し下から上に浮かせる */
}

/* SP 用 微調整 */
@media (max-width: 767px) {
  .sweets-daihuku {
    width: 300px;
    height: auto;
    top: calc(5580px * (100% / 2112px) * 0.5);
    left: calc(1146px * (100% / 2112px) * 0.5);
  }
}

/* 表示用クラス */
.sweets-daihuku.active {
  opacity: 1;
  transform: translateY(0);  /* 元の位置に戻る */
  transition-delay: 1.5s; /* 0.5秒遅れてふわっと開始 */
}

/* =========================
 動画配置用
========================= */
.video-section{
  position:relative;
}

/* 動画 */
.video-overlay{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:20;
}
.video-04 .video-overlay{
  top:30%;
}

.video-17 .video-overlay{
  top:30%;
}

/* 16:9固定 */
.youtube-wrap{
  width:860px;
  max-width:90vw;
  aspect-ratio:16 / 9;
}

.youtube-wrap iframe{
  width:100%;
  height:100%;
  border:0;
}

/* SP */
@media (max-width:767px){
  .video-04 .video-overlay{
    width:93%;
    top:33%;
  }

  .video-17 .video-overlay{
    width:92%;
    top:30%;
  }
}

/* =========================
背景色変える
========================= */
/* 共通 bg-area 基本設定 */
.bg-area {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* 背景色個別設定 */
.bg-area-02 {
  background-color: #805b36;
}

.bg-area-03 {
  background-color: #fae796;
}

.bg-area-04 {
  background-color: #fce7e7;
}

.bg-area-05 {
  background-color: #ffffff;
}

/* 必要ならセクション内の画像やコンテンツは元のまま */
.bg-area img {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================
 アンカー遷移時のみ固定バナー非表示
========================= */
.content_fix_header.anchor-hide{
  opacity:0;
  pointer-events:none;
}