@charset "utf-8";
/* =========================================================
   utilities.css — 汎用ユーティリティコンポーネント（全ページ共通）

   クラス早見表:
     .password-wrapper      ← パスワード入力フィールドのラッパー
     .password-toggle-btn   ← パスワード表示/非表示トグルボタン
     #loading               ← ページローディングオーバーレイ
     .cv-spinner            ← ローディングスピナーのセンタリングラッパー
     .spinner               ← CSSアニメーションローディングスピナー（旧来）
     .ka-loading            ← ブランドドットパルスローディング（推奨）
     .is-hide               ← display: none の汎用クラス
     .scroll-fade           ← スクロールで表示されるフェードインアニメーション
     .photo img             ← 画像の遅延フェードイン
   ========================================================= */

/* ── パスワード表示トグル ────────────────────────────────
   input[type="password"] の右端に配置する目アイコンボタン。
   password-wrapper を relative にして toggle-btn を absolute で重ねる。
   ─────────────────────────────────────────────────────── */
.password-wrapper {
  display: block;
  position: relative;
}
.password-toggle-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--ka-subtext);
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.password-toggle-btn:hover,
.password-toggle-btn:focus {
  color: var(--ka-orange);
  outline: none;
}

/* ── ローディングオーバーレイ ────────────────────────────
   Ajax通信中などにページ全体をマスクするオーバーレイ。
   JSで show() / hide() して使う。
   ─────────────────────────────────────────────────────── */
#loading {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  display: none;
  background: rgba(0, 0, 0, 0.6);
}

.cv-spinner {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 旧来のCSSスピナー（#loadingの中で使う） */
.spinner {
  width: 80px;
  height: 80px;
  border: 4px #ddd solid;
  border-top: 4px #999 solid;
  border-radius: 50%;
  animation: sp-anime 0.8s infinite linear;
}

@keyframes sp-anime {
  0%   { transform: rotate(0deg);   }
  100% { transform: rotate(359deg); }
}

/* ── ブランドドットパルスローディング ────────────────────
   新規実装の非同期待ち表示はこちらを使う。
   使い方: <div class="ka-loading"><span></span><span></span><span></span></div>
   ─────────────────────────────────────────────────────── */
.ka-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 28px 0;
  margin: 0;
}

.ka-loading span {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--ka-orange);
  animation: ka-dot-pulse 1.4s ease-in-out infinite;
}

.ka-loading span:nth-child(1) { animation-delay: 0s;   }
.ka-loading span:nth-child(2) { animation-delay: 0.2s; }
.ka-loading span:nth-child(3) { animation-delay: 0.4s; }

@keyframes ka-dot-pulse {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.75); }
  40%           { opacity: 1;   transform: scale(1.1);  }
}

/* ── .is-hide ── 汎用非表示クラス ────────────────────────
   JSで要素の表示切り替えに使う。
   ─────────────────────────────────────────────────────── */
.is-hide {
  display: none;
}

/* ── スクロールフェードイン ──────────────────────────────
   スクロールで画面内に入った時にフェードインする要素。
   JSで .is-visible を付与することでアニメーションが動く。
   transition-delay は CSS カスタムプロパティ --scroll-delay で個別制御可能。
   使い方: <div class="scroll-fade" style="--scroll-delay: 0.1s">...</div>
   ─────────────────────────────────────────────────────── */
.scroll-fade {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity  0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: var(--scroll-delay, 0s);
  will-change: opacity, transform;
}

.scroll-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── 画像遅延フェードイン ────────────────────────────────
   img の src 読み込み完了後に .img-loaded を付与してフェードする。
   JSで onload 時に img.classList.add('img-loaded') する。
   ─────────────────────────────────────────────────────── */
.photo img,
.staff-alt-img,
.menu-thumb {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.photo img.img-loaded,
.staff-alt-img.img-loaded,
.menu-thumb.img-loaded {
  opacity: 1;
}