@charset "UTF-8";

/* ==========================================================================
   株式会社しろとり 公式Webサイト - style.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 基本設定（ベース・アクセシビリティ）
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  font-feature-settings: "palt"; /* 日本語フォントのプロポーショナル詰め */
}

/* テキスト選択時のデザイン（パステルピンク） */
::selection {
  background-color: #fce7f3;
  color: #831843;
}

/* キーボード操作時のフォーカスリング視認性向上（ユニバーサルデザイン） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #0284c7 !important;
  outline-offset: 3px !important;
}

/* --------------------------------------------------------------------------
   2. 独自のアニメーション（ふんわり浮遊感・パルス効果）
   -------------------------------------------------------------------------- */

/* ヒーローエリア等の背景バブル浮遊アニメーション */
@keyframes float {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-18px) rotate(3deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes floatDelayed {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-22px) rotate(-4deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

/* やさしく光る・鼓動するアニメーション（注目バッジ・オープン予定用） */
@keyframes pulseGentle {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.93;
    transform: scale(1.03);
  }
}

/* アニメーション用クラス */
.float-animation {
  animation: float 7s ease-in-out infinite;
}

.float-animation-delayed {
  animation: floatDelayed 9s ease-in-out 1.5s infinite;
}

.pulse-gentle {
  animation: pulseGentle 3.5s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   3. カスタムスクロールバー（優しい色合い）
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #fafaf9;
}

::-webkit-scrollbar-thumb {
  background: #bae6fd;
  border-radius: 9999px;
  border: 2px solid #fafaf9;
}

::-webkit-scrollbar-thumb:hover {
  background: #0284c7;
}

/* --------------------------------------------------------------------------
   4. フォーム・カード微調整
   -------------------------------------------------------------------------- */
input:focus,
select:focus,
textarea:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.15) !important;
}

/* 印刷時の視認性最適化 */
@media print {
  header, footer, #recruit, #contact {
    display: none !important;
  }
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }
}