/* ============================================================================
 * Ributch overrides — next-app コンパイル済み app.css の上に重ねる WP 向け補正
 * ========================================================================== */

/* --- フォント: next/font 自己ホスト(WPでは404)に依存せず Google の Zen Maru Gothic を使用 --- */
:root {
  --font-zen: 'Zen Maru Gothic', system-ui, -apple-system, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
}
html, body { font-family: var(--font-zen); }
.font-sans, .font-display { font-family: var(--font-zen); }

/* --- WP 既定の打ち消し --- */
img { max-width: 100%; height: auto; }
figure { margin: 0; }
#comments, .comments-area { display: none; }
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; padding: .5rem 1rem; background: #1A3A4A; color: #fff; }
.skip-link:focus { left: 1rem; top: 1rem; }

/* ============================================================================
 * Reveal-on-scroll (Framer FadeInSection 相当: y32px / .8s / cubic-bezier(.22,1,.36,1))
 * out/ の opacity:0 要素はビルド時に表示化 + .reveal/.reveal-<dir> 付与済み。
 * ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.reveal.reveal-down  { transform: translateY(-32px); }
.reveal.reveal-left  { transform: translateX(32px); }
.reveal.reveal-right { transform: translateX(-32px); }
.reveal.reveal-none  { transform: none; }
.reveal.is-visible   { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================================
 * ヘッダー: メガメニュー (PC ホバー表示)
 * ========================================================================== */
.mega-panel {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity .25s cubic-bezier(.22,1,.36,1), transform .25s cubic-bezier(.22,1,.36,1), visibility .25s;
  pointer-events: none;
}
.has-mega:hover .mega-panel,
.has-mega:focus-within .mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

/* ============================================================================
 * モバイルドロワー
 * ========================================================================== */
.mobile-drawer {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease;
}
.mobile-drawer.is-open { opacity: 1; visibility: visible; }
body.drawer-open { overflow: hidden; }

/* ============================================================================
 * 固定UI (FloatingCTA / BackToTop / CookieBanner) — 既定は非表示、JS で is-visible
 * ========================================================================== */
.floating-cta, .to-top, .cookie-banner {
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1), visibility .35s;
}
.floating-cta { transform: translateY(60px); }
.to-top { transform: scale(.85); }
.cookie-banner { transform: translateY(32px); }
.floating-cta.is-visible, .to-top.is-visible, .cookie-banner.is-visible {
  opacity: 1; visibility: visible; transform: none;
}

/* ハニーポット (CF7 スパム対策) */
.ributch-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

/* ===== CF7 お問い合わせフォーム: demo準拠スタイル ===== */
.wpcf7-form .wpcf7-form-control-wrap { display: block; }
.wpcf7-form .wpcf7-text,
.wpcf7-form .wpcf7-textarea,
.wpcf7-form select.wpcf7-select {
  width: 100%;
  border: 1px solid #D6E5F0;
  border-radius: 6px;
  background: #fff;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.6;
  color: #1A241F;
  font-family: inherit;
}
.wpcf7-form .wpcf7-text:focus,
.wpcf7-form .wpcf7-textarea:focus,
.wpcf7-form select.wpcf7-select:focus {
  border-color: #4A90B5;
  outline: none;
}
.wpcf7-form .wpcf7-textarea { min-height: 120px; resize: vertical; }

/* 物件種別 = チップ(ラジオ) */
.wpcf7-form .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 10px; }
.wpcf7-form .wpcf7-radio .wpcf7-list-item { margin: 0; }
.wpcf7-form .wpcf7-radio .wpcf7-list-item > label {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid #D6E5F0; border-radius: 9999px; background: #EEF4F9;
  padding: 8px 16px; font-size: 14px; transition: all .2s;
}
.wpcf7-form .wpcf7-radio .wpcf7-list-item > label:hover { border-color: #4A90B5; }
.wpcf7-form .wpcf7-radio input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.wpcf7-form .wpcf7-radio .wpcf7-list-item > label:has(input:checked) {
  border-color: #4A90B5; background: #4A90B5; color: #fff;
}

/* 同意チェック */
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.wpcf7-form .wpcf7-acceptance label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.wpcf7-form .wpcf7-acceptance input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; accent-color: #4A90B5; flex-shrink: 0; }

/* 送信ボタン (btn btn-gold は既存) */
.wpcf7-form .wpcf7-submit { width: 100%; cursor: pointer; border: none; }

/* 検証・送信メッセージ */
.wpcf7-form .wpcf7-not-valid-tip { color: #dc2626; font-size: 12px; margin-top: 5px; display: block; }
.wpcf7-form input.wpcf7-not-valid, .wpcf7-form textarea.wpcf7-not-valid, .wpcf7-form select.wpcf7-not-valid { border-color: #dc2626; }
.wpcf7-form .wpcf7-response-output { margin: 16px 0 0; border-radius: 8px; padding: 12px 16px; font-size: 13px; line-height: 1.7; }
.wpcf7-form.invalid .wpcf7-response-output, .wpcf7-form.unaccepted .wpcf7-response-output { border-color: #f0b8b8; background: #fdf0f0; color: #b91c1c; }
.wpcf7-form.sent .wpcf7-response-output { border-color: #b8e0c8; background: #f0faf4; color: #15803d; }
.wpcf7-form .wpcf7-spinner { margin: 0 0 0 10px; }

/* 項目間の余白を demo に合わせる (auto-p 無効 + space-y-6 相当) */
.wpcf7-form .space-y-7 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }
.wpcf7-form > p:first-child { margin-top: .75rem; }

/* 施工実績 一覧のカテゴリタブ */
.works-tab { border: 1px solid #D6E5F0; background: #fff; color: #384540; }
.works-tab:hover { border-color: #4A90B5; color: #4A90B5; }
.works-tab.is-active { background: #4A90B5; border-color: #4A90B5; color: #fff; }