@charset "UTF-8";
/*!
 * YRMotion v1.0 — 動きのスタイル（motion.js と対で使う）
 * 使い方は motion.js の冒頭コメントを参照。
 */

:root {
  --yr-duration: 800ms;
  --yr-delay: 0ms;
  --yr-ease: cubic-bezier(0.22, 0.68, 0.28, 1);
  --yr-distance: 28px;
}

/* ---------- 1. スクロールで現れる ---------- */
.yr-reveal {
  opacity: 0;
  transition:
    opacity var(--yr-duration) var(--yr-ease) var(--yr-delay),
    transform var(--yr-duration) var(--yr-ease) var(--yr-delay),
    filter var(--yr-duration) var(--yr-ease) var(--yr-delay),
    clip-path var(--yr-duration) var(--yr-ease) var(--yr-delay);
  will-change: opacity, transform;
}
.yr-reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
}

[data-reveal="fade-up"].yr-reveal    { transform: translate3d(0, var(--yr-distance), 0); }
[data-reveal="fade-down"].yr-reveal  { transform: translate3d(0, calc(var(--yr-distance) * -1), 0); }
[data-reveal="fade-left"].yr-reveal  { transform: translate3d(calc(var(--yr-distance) * -1), 0, 0); }
[data-reveal="fade-right"].yr-reveal { transform: translate3d(var(--yr-distance), 0, 0); }
[data-reveal="zoom"].yr-reveal       { transform: scale(0.94); }
[data-reveal="blur"].yr-reveal       { filter: blur(10px); transform: translate3d(0, 12px, 0); }
[data-reveal="mask-up"].yr-reveal    { clip-path: inset(100% 0 0 0); transform: translate3d(0, 12px, 0); }

/* 動きを減らす設定なら、すべて即表示 */
@media (prefers-reduced-motion: reduce) {
  .yr-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* JSが動かなかった場合の保険（1.2秒後に必ず出す） */
html:not(.yr-motion-ready) .yr-reveal {
  animation: yr-failsafe 0.01s linear 1.2s forwards;
}
@keyframes yr-failsafe {
  to { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0); }
}

/* ---------- 2. 画像のぼかし解除 ---------- */
img[data-blur-up] {
  filter: blur(12px);
  transform: scale(1.03);
  transition: filter 0.7s ease, transform 0.7s ease;
}
img[data-blur-up].is-loaded { filter: none; transform: none; }

/* ---------- 3. ゆっくり寄る背景（Ken Burns） ---------- */
.yr-kenburns {
  animation: yr-kenburns 22s ease-in-out infinite alternate;
}
@keyframes yr-kenburns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(-1.5%, -1.5%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .yr-kenburns { animation: none; }
}

/* ---------- 4. 水滴の波紋（見出しの装飾） ---------- */
.yr-ripple {
  position: relative;
}
.yr-ripple::before,
.yr-ripple::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  animation: yr-ripple 3.4s ease-out infinite;
  pointer-events: none;
}
.yr-ripple::after { animation-delay: 1.7s; }
@keyframes yr-ripple {
  0%   { transform: scale(0.4); opacity: 0.5; }
  70%  { opacity: 0.12; }
  100% { transform: scale(5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .yr-ripple::before, .yr-ripple::after { animation: none; display: none; }
}

/* ---------- 5. スクロール進捗バー ---------- */
.yr-progress {
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, #0e6fa8, #85dbee);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 300;
  pointer-events: none;
}

/* ---------- 6. スクロールを促す矢印 ---------- */
.yr-scrollcue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.2em;
  opacity: 0.9;
}
.yr-scrollcue::after {
  content: "";
  width: 1px;
  height: 42px;
  background: currentColor;
  transform-origin: 0 0;
  animation: yr-cue 2.2s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
@keyframes yr-cue {
  0%   { transform: scaleY(0); transform-origin: 50% 0; }
  45%  { transform: scaleY(1); transform-origin: 50% 0; }
  55%  { transform: scaleY(1); transform-origin: 50% 100%; }
  100% { transform: scaleY(0); transform-origin: 50% 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .yr-scrollcue::after { animation: none; }
}

/* ---------- 7. ボタンの光沢が走る ---------- */
.yr-shine {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.yr-shine::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-18deg);
  transition: transform 0.7s ease;
  pointer-events: none;
}
.yr-shine:hover::after { transform: translateX(420%) skewX(-18deg); }
@media (prefers-reduced-motion: reduce) {
  .yr-shine::after { display: none; }
}

/* ---------- 8. 電話アイコンの呼び出し ---------- */
.yr-ring { animation: yr-ring 2.6s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes yr-ring {
  0%, 62%, 100% { transform: rotate(0); }
  66% { transform: rotate(-11deg); }
  70% { transform: rotate(9deg); }
  74% { transform: rotate(-7deg); }
  78% { transform: rotate(5deg); }
  82% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .yr-ring { animation: none; }
}

/* ---------- 9. 浮き上がるカード ---------- */
.yr-lift { transition: transform 0.3s var(--yr-ease), box-shadow 0.3s var(--yr-ease); }
.yr-lift:hover { transform: translateY(-4px); }

/* ---------- 10. 画像の寄り（ホバー） ---------- */
.yr-zoomframe { overflow: hidden; }
.yr-zoomframe img { transition: transform 0.6s var(--yr-ease); }
.yr-zoomframe:hover img,
a:hover .yr-zoomframe img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .yr-zoomframe img { transition: none; }
  .yr-zoomframe:hover img, a:hover .yr-zoomframe img { transform: none; }
}