/* Asteroids サイト — ベース / レスポンシブ / :hover / @keyframes
 * インラインstyleで表現できないものだけをここに置く（BUILD.md 参照）。
 * デザインは Claude Design 版を忠実に再現。値は元の .dc.html / *.js に由来。
 */

/* ---------- base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }

/* 横方向のはみ出しは clip で抑える。
   hidden だと仕様上 overflow-y が auto に昇格し、[data-site-root] が
   スクロールコンテナ化して iOS Chrome でフッター下に余剰スクロールが出る。
   clip はもう一方の軸を昇格させないため、clip 対応ブラウザでは clip を使う
   （hidden は非対応ブラウザ向けフォールバック）。 */
html, body, [data-site-root] { overflow-x: hidden; }
@supports (overflow: clip) {
  html, body, [data-site-root] { overflow-x: clip; }
}
body {
  background: #334FAE;
  color: #EAEEFD;
  font-family: 'Readex Pro', 'Zen Kaku Gothic New', sans-serif;
}
::selection { background: rgba(255, 255, 255, 0.25); color: #fff; }
a { color: #C2E9FF; text-decoration: none; }
a:hover { color: #F9C33E; }
section[id] { scroll-margin-top: 84px; }

/* ---------- @keyframes（ヒーロー由来） ---------- */
@keyframes decidePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249, 195, 62, 0), 0 4px 16px rgba(0, 0, 0, 0.25); }
  50% { box-shadow: 0 0 0 3px rgba(249, 195, 62, .6), 0 8px 32px rgba(249, 195, 62, .45); }
}
@keyframes floatBlob {
  0% { transform: translate(0, 0); }
  50% { transform: translate(30px, -24px); }
  100% { transform: translate(0, 0); }
}

/* ---------- イントロ・スプラッシュ（ver02） ---------- */
@keyframes introLineUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes introPop { 0% { opacity: 0; transform: scale(0.2) rotate(-25deg); } 60% { opacity: 1; transform: scale(1.25) rotate(8deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } }
@keyframes introStrike { from { width: 0; } to { width: 100%; } }
@keyframes introDim { to { opacity: 0.5; } }
[data-intro-splash] {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 24px;
  background: radial-gradient(120% 120% at 50% 40%, #3A54B0 0%, #223877 62%, #1a2c5e 100%);
  transition: opacity .9s cubic-bezier(0.4, 0, 0.2, 1), transform .9s cubic-bezier(0.4, 0, 0.2, 1), filter .9s ease;
}
[data-intro-splash].is-out { opacity: 0; transform: scale(1.06); filter: blur(6px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  [data-intro-splash] { transition: opacity .3s linear; }
  [data-intro-splash] > * { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---------- Service カードのホバー演出（ver03） ---------- */
[data-svc-card] { position: relative; transition: transform .35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow .35s ease, border-color .35s ease; }
[data-svc-card]:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32); border-color: rgba(255, 255, 255, 0.3) !important; }
[data-svc-card] img { transition: transform .6s cubic-bezier(0.2, 0.8, 0.2, 1); }
[data-svc-card]:hover img { transform: scale(1.06) rotate(1.2deg); }
[data-svc-line] { position: absolute; inset: 0; background: #F9C33E; transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(0.2, 0.8, 0.2, 1); }
[data-svc-card]:hover [data-svc-line] { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { [data-svc-card], [data-svc-card] img, [data-svc-line] { transition: none !important; } }

/* ---------- :hover / :active（元 style-hover / style-active の変換） ---------- */

/* ヒーロー：主ボタン「業務を整理」 */
[data-hero-sort]:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(249, 195, 62, 0.45); }
[data-hero-sort]:active { transform: scale(0.95) translateY(0); }
/* ヒーロー：副ボタン「シャッフル」 */
[data-hero-scatter]:hover { background: rgba(255, 255, 255, 0.16); }
[data-hero-scatter]:active { transform: scale(0.95); }

/* My skills カード */
[data-skill]:hover { border-color: rgba(255, 255, 255, 0.3); }

/* Contact：きっかけ3択（未選択時のホバー。選択中はJSがinline styleで上書き） */
[data-kikkake-opt]:hover { background: rgba(255, 255, 255, 0.85); border-color: #272727; transform: translateY(-2px); }

/* Contact：予約CTA */
[data-book-cta]:hover { filter: brightness(1.12); transform: translateY(-2px); }

/* Check：仕分けボタン */
[data-c-go]:hover { filter: brightness(1.06); }
[data-c-go]:active { transform: scale(0.97); }
[data-c-go]:disabled { filter: none; cursor: default; opacity: 0.7; }

/* Price / Check / Contact 内の白背景リンクボタンの軽いホバー */
a[href^="https://calendar.app.google"]:hover,
a[href="#contact"]:hover { filter: brightness(1.06); color: inherit; }

/* ---------- Contact フォーム（本番は Contact Form 7／静的はダミー） ---------- */
/* CF7 が出力する標準クラスを、既存の白カード上のデザインに馴染ませる。
   .asteroids-cf7 スコープに閉じ、サイト内の他フォームへは影響させない。 */
.asteroids-cf7 .wpcf7-form { display: grid; gap: 16px; }
.asteroids-cf7 p { margin: 0; }
.asteroids-cf7 label,
.asteroids-cf7 .asteroids-cf7--dummy label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: #334FAE; }
.asteroids-cf7 input[type="text"],
.asteroids-cf7 input[type="email"],
.asteroids-cf7 input[type="tel"],
.asteroids-cf7 input[type="url"],
.asteroids-cf7 input[type="date"],
.asteroids-cf7 select,
.asteroids-cf7 textarea,
.asteroids-cf7 .wpcf7-form-control {
  font: 400 15px/1.6 'Zen Kaku Gothic New', sans-serif;
  width: 100%; box-sizing: border-box;
  padding: 12px 14px; border: 1px solid #C3CAE0; border-radius: 6px;
  background: #fff; color: #272727;
}
.asteroids-cf7 textarea { resize: vertical; min-height: 84px; }
.asteroids-cf7 .wpcf7-submit,
.asteroids-cf7 input[type="submit"],
.asteroids-cf7 button[type="submit"] {
  justify-self: start; width: auto;
  background: #F9C33E; color: #272727; font-weight: 700; font-size: 15px;
  padding: 14px 34px; border: none; border-radius: 3px; cursor: pointer;
  transition: filter .18s ease, transform .12s ease;
}
.asteroids-cf7 .wpcf7-submit:hover,
.asteroids-cf7 input[type="submit"]:hover { filter: brightness(1.06); }
.asteroids-cf7 .wpcf7-submit:active { transform: scale(0.97); }
/* CF7 のバリデーション・状態表示 */
.asteroids-cf7 .wpcf7-not-valid { border-color: #C0392B !important; }
.asteroids-cf7 .wpcf7-not-valid-tip { color: #C0392B; font-size: 12px; margin-top: 4px; }
.asteroids-cf7 .wpcf7-response-output {
  margin: 16px 0 0 !important; padding: 12px 14px; border-radius: 8px;
  font-size: 14px; line-height: 1.7; border: 1px solid #C3CAE0;
}
.asteroids-cf7 form.sent .wpcf7-response-output { border-color: #2FA06A; color: #1e6b47; background: rgba(47, 160, 106, 0.08); }
.asteroids-cf7 form.invalid .wpcf7-response-output,
.asteroids-cf7 form.unaccepted .wpcf7-response-output,
.asteroids-cf7 form.failed .wpcf7-response-output { border-color: #C0392B; color: #a5281b; background: rgba(192, 57, 43, 0.07); }
.asteroids-cf7 .wpcf7-spinner { margin: 0 0 0 10px; }
.asteroids-contact-fallback { margin: 0; font-size: 14px; line-height: 1.8; color: #4A4F63; text-align: center; }

/* 開いたフォーム枠が CF7 の高さで見切れないようにする（トグルの開閉アニメは維持） */
[data-form-wrap][data-open="1"] { max-height: 1400px !important; }

/* ---------- レスポンシブ（元 .dc.html の @media を再現） ---------- */
@media (max-width: 960px) {
  [data-skills-grid] { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  [data-site-root] header { overflow: visible !important; }
  [data-nav-toggle] { display: flex !important; }
  [data-nav] {
    position: absolute; top: calc(100% + 1px); right: 0; left: 0;
    flex-direction: column !important; align-items: stretch !important; gap: 0 !important;
    background: rgba(30, 45, 110, 0.98);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32);
    display: none !important;
  }
  [data-nav][data-open="1"] { display: flex !important; }
  [data-nav] a { padding: 15px 24px !important; font-size: 16px !important; }
  [data-kikkake] { grid-template-columns: 1fr !important; }
  [data-price-grid] > div { width: auto !important; height: auto !important; }
  /* Service：スマホは2列にして縦スクロールを短縮（1枚あたりを詰めて可読性は維持） */
  [data-svc-grid] { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  [data-svc-card] { padding: 14px !important; }
  [data-svc-card] h3 { font-size: 16px !important; }
  [data-svc-card] p { font-size: 13px !important; line-height: 1.6 !important; }
}

/* ヒーローのコピー：スマホ(≤560px)のみ「採用・人事・労務・業務改善。」の後で改行する。
   既定は非表示＝改行なし（PC/iPadは1文のまま）。CSS未読込時も元の1文にフォールバック。 */
br[data-sp-br] { display: none; }
@media (max-width: 560px) { br[data-sp-br] { display: inline; } }

/* Profile：スマホ(≤640px)だけ短縮版(data-profile-sp)を表示。PC/iPadは全文(data-profile-full)。 */
[data-profile-sp] { display: none; }
@media (max-width: 640px) {
  [data-profile-full] { display: none; }
  [data-profile-sp] { display: block; }
}

/* reCAPTCHA v3：フローティングのバッジを非表示にし、代わりにフォーム近くの注記文
   (.asteroids-recaptcha-note) で規約を明示する（Google規約準拠：バッジ非表示時は文言掲示が必須）。 */
.grecaptcha-badge { visibility: hidden !important; }
.asteroids-recaptcha-note { margin: 14px 0 0; font-size: 12px; line-height: 1.7; color: rgba(234, 238, 253, 0.55); }
.asteroids-recaptcha-note a { color: rgba(234, 238, 253, 0.75); text-decoration: underline; }

/* ---------- アクセシビリティ：フォーカス可視化（許可された範囲の追加） ---------- */
a:focus-visible,
button:focus-visible,
textarea:focus-visible,
input:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid #F9C33E;
  outline-offset: 2px;
}

/* reduced-motion：装飾アニメを止める（floatBlob等） */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-hero-bg] > * { animation: none !important; }
}