@font-face {
  font-family: "MOBO";
  src: url("fonts/MOBO-SemiBold.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

/* =====================
   リセット
===================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =====================
   基本設定
===================== */
body {
  font-family: "MOBO",
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Sans",
    "Noto Sans JP",
    sans-serif;
}

/* LP全体 */
.lp {
  width: 100%;
}

/* =====================
   セクション共通
===================== */
.section {
  width: 100%;
  padding: 140px 0;
  display: flex;
  justify-content: center;
}

/* 中身の幅（スマホ基準） */
.section-inner {
  width: 100%;
  max-width: 430px;
  padding: 0 16px;
}

/* 画像 */
.lp-image {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 0;
  margin-bottom: 0;
}

.section-01 {
  background: linear-gradient(to bottom, #e6f1f0, #dcebe3);
}

.section-02 {
  background: linear-gradient(to bottom, #dcebe3, #cfe2d4);
}

.section-03 {
  background: linear-gradient(to bottom, #cfe2d4, #c6e0c6);
}

.section-04 {
  background: linear-gradient(to bottom, #c6e0c6, #b9d9c3);
}

.section-05 {
  background: linear-gradient(to bottom, #b9d9c3, #a8cfb8);
}

.section-06 {
  background: linear-gradient(to bottom, #a8cfb8, #f0e5c9);
}

.section-07 {
  background: linear-gradient(to bottom, #f0e5c9, #f6d6a8);
}

.section-08 {
  background: linear-gradient(to bottom, #f6d6a8, #f2c38b);
}

.section-09 {
  background: linear-gradient(to bottom, #f2c38b, #e9b77e);
}

/* ファーストビューだけ上を詰める */
.section-hero {
  min-height: 100vh;      /* 画面の高さ */
  display: flex;
  align-items: center;    /* 縦中央寄せ */
  padding-top: 0;
}
.section-hero .lp-image {
  margin-top: 0;
}

/* =====================
   吹き出し共通
===================== */
.balloon {
  position: relative;
  margin: 0 auto 16px;   /* 中央寄せ＋下余白 */
  margin-bottom: 16px;  
}

/* 吹き出し画像 */
.balloon-image {
  width: 100%;
  height: auto;
  display: block;
}

/* 吹き出しの中の文字 */
.balloon-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  text-align: center;
  white-space: nowrap;
  font-size: 18px;
  line-height: 1.5;
  color: #5e806b;
  padding: 0 16px;
}

/* =====================
   吹き出し ふんわり表示
===================== */

/* 初期状態（まだ表示しない） */
.balloon {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.6s ease, transform 1.6s ease;
}

/* 表示状態 */
.balloon.is-show {
  opacity: 1;
  transform: translateY(0);
}


/* アニメーション定義 */
@keyframes balloonFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.delay-1 {
  animation-delay: 0.2s;
}

.delay-2 {
  animation-delay: 0.4s;
}

.delay-3 {
  animation-delay: 0.6s;
}

.delay-4{
  animation-delay: 0.8s;
}

.delay-5{
  animation-delay: 1.0s;
}

.delay-6{
  animation-delay: 1.2s;
}

.delay-7{
  animation-delay: 1.4s;
}

/* =====================
   湯気 背景レイヤー
===================== */

.steam-layer {
  width: 100%;
  height: 100%;
  pointer-events: none; /* クリック邪魔しない */
  z-index: 0;
}

/* 湯気1つ1つ */
.steam {
position:fixed ;
  width: 60px;     /* ← 大きさはここ！！ */
  opacity: 0;
  animation: steamFloat 7.5s ease-in-out infinite; 
}

@keyframes steamFloat {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  20% {
    opacity: 0.4;
  }
  80% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
    transform: translateY(-40px);
  }
}

/* =====================
   右下固定 購入ボタン
===================== */

.buy-button {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 120px; /* ← 全体サイズはここで調整 */
  z-index: 1000;
  text-decoration: none;

    /* ここから追加 ↓ */
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.buy-button.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


/* フレーム画像 */
.buy-frame {
  width: 100%;
  display: block;
}

/* 文字 */
.buy-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Mobo", sans-serif; /* モボフォント */
  font-size: 14px;
  color: #5e806b;
  pointer-events: none; /* 文字が邪魔しない */
  text-align: center;
  white-space: nowrap;
}

.buy-button {
  animation: floatButton 3s ease-in-out infinite;
}

@keyframes floatButton {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

/* =====================
   なみなみアニメーション
===================== */

.wave-area {
  position: relative;
  width: 100%;
  height: 160px; /* ← 高さはここで調整 */
  overflow: hidden;
  background-color: #eab87f;
}

/* 横に流れるレール */
.wave-track {
  display: flex;
  width: fit-content;
  animation: waveMove 20s linear infinite;
}

/* 波画像 */
.wave {
  height: 100%;
  width: auto;
  flex-shrink: 0;
}

/* 横スクロールアニメーション */
@keyframes waveMove {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}