/*
 * debun-footer.css
 * 全ページ共通フッター スタイルシート（でぶんです）
 * 格納場所: /wp-content/themes/cocoon-child-master/debun-footer/debun-footer.css
 *
 * Design Concept: まるまるかわいい ── Chubby & Kawaii
 */

/* ============================================================
   Google Fonts 読み込み（M PLUS Rounded 1c）
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700;800&display=swap');

/* ============================================================
   CSS カスタムプロパティ（デザイントークン）
   ============================================================ */
:root {
  --debun-bg:            #fff8ef;           /* あたたかいクリーム */
  --debun-bg-stripe:     #fff2e2;           /* ストライプ用薄色 */
  --debun-border-top:    3px solid #ffb347; /* ぷっくりオレンジボーダー */
  --debun-orange:        #ff8c42;           /* メインオレンジ */
  --debun-orange-light:  #ffb347;           /* 明るいオレンジ */
  --debun-pink:          #ffb3ba;           /* ほっぺピンク */
  --debun-sky:           #a8d8ea;           /* スカイブルー */
  --debun-text:          #6b4c3b;           /* あたたかいブラウン */
  --debun-text-light:    #a07860;           /* 薄めブラウン */
  --debun-link-hover:    #ff8c42;           /* ホバーオレンジ */
  --debun-font:          'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Rounded Mplus 1c', sans-serif;
  --debun-radius:        999px;             /* まるまるボーダー半径 */

}

/* ============================================================
   Cocoon デフォルトフッターを全ページで非表示
   ============================================================ */
#footer,
.footer-area,
.footer-widget-area,
.go-to-top-button,
.footer-top,
.footer-bottom,
.footer-left,
.footer-center,
.footer-right {
  display: none !important;
}

/* ============================================================
   フッター本体
   ============================================================ */
#debun-footer.debun-footer {
  position: relative;
  width: 100%;
  background-color: var(--debun-bg);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 12px,
    rgba(255, 179, 71, 0.07) 12px,
    rgba(255, 179, 71, 0.07) 24px
  );
  border-top: var(--debun-border-top);
  overflow: hidden;
  box-sizing: border-box;
  padding: 3rem 1.5rem 2rem;
  font-family: var(--debun-font);
}

/* ============================================================
   浮かぶバブル装飾
   ============================================================ */
.debun-footer__bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.debun-bubble {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: debun-float linear infinite;
}

.debun-bubble--1 { width: 18px; height: 18px; background: rgba(255,179,71,0.35);  bottom: 0; left: 8%;   animation-duration: 5.5s; animation-delay: 0s;    }
.debun-bubble--2 { width: 12px; height: 12px; background: rgba(168,216,234,0.40); bottom: 0; left: 22%;  animation-duration: 7s;   animation-delay: 1.2s;  }
.debun-bubble--3 { width: 22px; height: 22px; background: rgba(255,179,186,0.35); bottom: 0; left: 40%;  animation-duration: 6s;   animation-delay: 0.5s;  }
.debun-bubble--4 { width: 10px; height: 10px; background: rgba(255,140,66,0.30);  bottom: 0; left: 60%;  animation-duration: 8s;   animation-delay: 2s;    }
.debun-bubble--5 { width: 16px; height: 16px; background: rgba(168,216,234,0.35); bottom: 0; left: 75%;  animation-duration: 5s;   animation-delay: 0.8s;  }
.debun-bubble--6 { width: 14px; height: 14px; background: rgba(255,179,186,0.40); bottom: 0; left: 90%;  animation-duration: 6.5s; animation-delay: 1.8s;  }

@keyframes debun-float {
  0%   { transform: translateY(0)     scale(1);    opacity: 0;   }
  10%  { opacity: 0.8; }
  80%  { opacity: 0.5; }
  100% { transform: translateY(-90px) scale(0.6);  opacity: 0;   }
}

/* ============================================================
   でぶんキャラクター（実画像）
   ============================================================ */
.debun-footer__chara {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0.2rem;
}

/* 画像ラッパー（バウンス・影・オーラをまとめる） */
.debun-chara-wrap {
  position: relative;
  display: inline-block;
  /* ふわっと浮き上がるバウンス */
  animation: debun-img-bounce 2.4s ease-in-out infinite;
  will-change: transform;
  cursor: pointer;
}

@keyframes debun-img-bounce {
  0%, 100% { transform: translateY(0)    rotate(-1.5deg) scale(1);    }
  35%       { transform: translateY(-9px) rotate(1.5deg)  scale(1.03); }
  65%       { transform: translateY(-4px) rotate(-0.8deg) scale(1.01); }
}

/* 実画像本体 */
.debun-chara-img {
  display: block;
  width: clamp(110px, 16vw, 150px);
  height: auto;
  /*
   * 黒背景PNGをクリーム背景に溶け込ませる
   * multiply: 黒 → 透過、カラー部分 → そのまま保持
   */
  mix-blend-mode: multiply;
  /* 画像の下に落ち影（接地感） */
  filter: drop-shadow(0 8px 16px rgba(100, 60, 20, 0.18))
          drop-shadow(0 2px 4px  rgba(100, 60, 20, 0.10));
  border-radius: 0;
  transition: filter 0.25s ease, transform 0.2s ease;
  user-select: none;
  -webkit-user-drag: none;
}

/* ホバー時：少し明るく＋ふわっと */
.debun-chara-wrap:hover .debun-chara-img {
  filter: drop-shadow(0 12px 24px rgba(255, 140, 66, 0.28))
          drop-shadow(0  4px  8px rgba(255, 140, 66, 0.16))
          brightness(1.06);
}

/* オーラリング（キャラ足元のふんわり光） */
.debun-chara-aura {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 14px;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 179, 71, 0.45) 0%,
    rgba(255, 179, 71, 0.15) 55%,
    transparent 75%
  );
  border-radius: 50%;
  animation: debun-aura-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes debun-aura-pulse {
  0%, 100% { transform: translateX(-50%) scaleX(1)    opacity: 0.7; }
  35%       { transform: translateX(-50%) scaleX(0.80); opacity: 0.4; }
  65%       { transform: translateX(-50%) scaleX(0.92); opacity: 0.55; }
}

/* --- 吹き出し --- */
.debun-chara__speech {
  margin: 0.5rem 0 0;
  padding: 0.35rem 1rem;
  background: #fff;
  border: 2px solid var(--debun-orange-light);
  border-radius: var(--debun-radius);
  font-family: var(--debun-font);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--debun-orange);
  letter-spacing: 0.06em;
  position: relative;
  animation: debun-speech-pop 3s ease-in-out infinite;
  white-space: nowrap;
}

/* 吹き出しの三角 */
.debun-chara__speech::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: var(--debun-orange-light);
}
.debun-chara__speech::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-bottom-color: #fff;
}

@keyframes debun-speech-pop {
  0%, 100% { transform: scale(1); }
  40%       { transform: scale(1.05); }
  60%       { transform: scale(0.97); }
}

/* ============================================================
   インナーコンテナ
   ============================================================ */
.debun-footer__inner {
  position: relative;
  z-index: 2;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

/* ============================================================
   ナビゲーション（PC: 横一列 / SP: 縦一列）
   ============================================================ */
.debun-footer__nav {
  width: 100%;
  text-align: center;
}

.debun-footer__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
}

.debun-footer__nav-list li {
  display: flex;
  align-items: center;
}

/* セパレーター（ぷっくり点） */
.debun-footer__nav-list li + li::before {
  content: '●';
  display: inline-block;
  font-size: 0.4rem;
  color: var(--debun-orange-light);
  padding: 0 clamp(1rem, 2.5vw, 2rem);
  line-height: 1;
  opacity: 0.7;
}

.debun-footer__nav-list a {
  font-family: var(--debun-font);
  font-size: clamp(0.72rem, 1.5vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--debun-text-light);
  text-decoration: none;
  padding: 0.2rem 0;
  transition: color 0.25s ease, transform 0.2s ease;
  display: inline-block;
}

.debun-footer__nav-list a:hover,
.debun-footer__nav-list a:focus {
  color: var(--debun-link-hover);
  transform: scale(1.08);
  outline: none;
}

/* ============================================================
   コピーライト
   ============================================================ */
.debun-footer__copyright {
  width: 100%;
  text-align: center;
}

/* ハートのデコレーション */
.debun-footer__copyright::before {
  content: '♡  ♡  ♡';
  display: block;
  font-size: 0.65rem;
  color: var(--debun-pink);
  letter-spacing: 0.5em;
  margin-bottom: 0.5rem;
  animation: debun-hearts 2.5s ease-in-out infinite;
}

@keyframes debun-hearts {
  0%, 100% { opacity: 0.5; transform: scale(1);    }
  50%       { opacity: 1;   transform: scale(1.12); }
}

.debun-footer__copyright p {
  margin: 0;
  padding: 0;
  font-family: var(--debun-font);
  font-size: clamp(0.65rem, 1.4vw, 0.76rem);
  font-weight: 400;
  letter-spacing: 0.07em;
  color: var(--debun-text-light);
  line-height: 1.9;
}

/* サイト名「でぶんです」 */
.debun-footer__sitename {
  font-family: var(--debun-font);
  font-weight: 800;
  font-size: clamp(0.75rem, 1.6vw, 0.88rem);
  letter-spacing: 0.05em;
  color: var(--debun-orange);
  text-decoration: none;
  padding: 0.05rem 0.5rem;
  background: rgba(255,179,71,0.15);
  border-radius: var(--debun-radius);
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
  display: inline-block;
}

.debun-footer__sitename:hover,
.debun-footer__sitename:focus {
  background: var(--debun-orange);
  color: #fff;
  transform: scale(1.06) rotate(-1deg);
  outline: none;
}

/* ============================================================
   スマートフォン（480px以下）
   ============================================================ */
@media screen and (max-width: 480px) {
  #debun-footer.debun-footer {
    padding: 2.2rem 1rem 1.8rem;
  }

  .debun-footer__nav-list {
    flex-direction: column;
    align-items: center;
  }

  .debun-footer__nav-list li + li::before {
    display: none;
  }

  .debun-footer__nav-list li {
    width: 100%;
    justify-content: center;
    padding: 0.4rem 0;
    border-bottom: 1px dashed rgba(255,179,71,0.3);
  }

  .debun-footer__nav-list li:first-child {
    border-top: 1px dashed rgba(255,179,71,0.3);
  }

  .debun-footer__nav-list a {
    font-size: 0.82rem;
  }

  .debun-chara-img {
    width: clamp(90px, 28vw, 120px);
  }
}

/* ============================================================
   タブレット（481px〜834px）
   ============================================================ */
@media screen and (min-width: 481px) and (max-width: 834px) {
  .debun-footer__nav-list li + li::before {
    padding: 0 clamp(0.8rem, 2vw, 1.6rem);
  }
}

/* ============================================================
   アクセシビリティ: モーション低減
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .debun-chara-wrap,
  .debun-chara-aura,
  .debun-footer__copyright::before,
  .debun-bubble {
    animation: none;
  }
}