/* ここにCSSコードを追加

例:
.example {
    color: red;
}

CSS の知識に磨きをかけるためにご覧ください。
http://www.w3schools.com/css/css_syntax.asp

コメント終わり */ 


/* === スクロールで出現：基本 === */
.reveal{
  opacity: 0;
  transform: translateY(24px);
  filter: blur(2px);
  transition:
    opacity var(--dur,.6s) var(--ease,cubic-bezier(.22,.61,.36,1)),
    transform var(--dur,.6s) var(--ease,cubic-bezier(.22,.61,.36,1)),
    filter var(--dur,.6s) var(--ease,cubic-bezier(.22,.61,.36,1));
  transition-delay: var(--delay,0s);
  will-change: opacity, transform, filter;
}
.reveal.in{ opacity:1; transform:none; filter:none; }

/* 種類（クラスの付け替えだけでOK） */
.reveal.fade  { transform:none; filter:none; }
.reveal.up    { transform: translateY(24px); }
.reveal.down  { transform: translateY(-24px); }
.reveal.left  { transform: translateX(-24px); }
.reveal.right { transform: translateX(24px); }
.reveal.zoom  { transform: scale(.96); }

/* 遅延＆速度プリセット */
.delay-1{ --delay:.1s; } .delay-2{ --delay:.2s; } .delay-3{ --delay:.3s; }
.delay-4{ --delay:.4s; } .delay-5{ --delay:.5s; }
.dur-400{ --dur:.4s; } .dur-600{ --dur:.6s; } .dur-1000{ --dur:1s; }

/* まとめてふわっと：親に .stagger を付ける */
.stagger > *{ --delay:0s; }
.stagger > *:nth-child(1){ --delay:.0s; }
.stagger > *:nth-child(2){ --delay:.1s; }
.stagger > *:nth-child(3){ --delay:.2s; }
.stagger > *:nth-child(4){ --delay:.3s; }
.stagger > *:nth-child(5){ --delay:.4s; }

/* 動きを望まないユーザーへの配慮 */
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.in{
    transition:none !important;
    transform:none !important;
    opacity:1 !important;
    filter:none !important;
  }
}

/* ========= Instagram アイコンを左に表示（PNG版） ========= */
/* サイズや余白はここで調整 */
:root{
  --ig-size: 30px;        /* アイコンの大きさ */
  --ig-left: 14px;        /* 左端の位置  */
  --ig-pad-left: 48px;    /* 文字の左余白（アイコン分） */
}

/* a 要素に余白と基準位置を付与（btn-ig が a でも div でも対応） */
.wp-block-button .wp-block-button__link.btn-ig,
.wp-block-button .wp-element-button.btn-ig,
.wp-block-button.btn-ig > .wp-block-button__link,
.wp-block-button.btn-ig > .wp-element-button{
  position: relative !important;
  padding-left: var(--ig-pad-left) !important;
  display: inline-flex !important;
  align-items: center;
}

/* アイコン（PNGを背景に表示） */
.wp-block-button .wp-block-button__link.btn-ig::before,
.wp-block-button .wp-element-button.btn-ig::before,
.wp-block-button.btn-ig > .wp-block-button__link::before,
.wp-block-button.btn-ig > .wp-element-button::before{
  content: "" !important;
  position: absolute !important;
  left: var(--ig-left); top: 50%;
  transform: translateY(-50%);
  width: var(--ig-size); height: var(--ig-size);
  background: url("https://otaru-dogsalon-rusk.com/wp-content/uploads/2025/09/icons8-インスタグラム-48-1.png") no-repeat center / contain !important;
  pointer-events: none;
  z-index: 1;
}
/* btn-ig を全ブレイクポイントで同じ寸法に固定（親付与/子付与の両対応） */
.wp-block-button .wp-block-button__link.btn-ig,
.wp-block-button .wp-element-button.btn-ig,
.wp-block-button.btn-ig > .wp-block-button__link,
.wp-block-button.btn-ig > .wp-element-button{
  /* スマホで理想の値をそのまま適用 */
  font-size: 16px !important;
  line-height: 1.2 !important;

  /* 上下, 右, 左(アイコンぶん) */
  padding: 12px 20px 12px var(--ig-pad-left) !important;

  border-radius: 9999px !important;   /* ピル型固定 */
  box-shadow: none !important;        /* 影は使わない */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* 共通：吹き出しの器 */
.cta-bubble{ position:relative; display:inline-block; overflow:visible; }
.cta-bubble img{ display:block; }


/* 基本 */
.cta-float{ --amp: 8px; --dur: 6.5s;
  animation: ctaFloat var(--dur) ease-in-out infinite; will-change: transform;
}
@keyframes ctaFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(calc(-1 * var(--amp))); }
}
/* 強さのバリエーション */
.cta-float-md{ --amp: 12px; }  /* ちょっと強め */
.cta-float-lg{ --amp: 16px; }  /* しっかり動く */
.cta-float-slow{ --dur: 8s; }  /* ゆっくり */
.cta-float-fast{ --dur: 5s; }  /* 早め */