/*
Theme Name: IT便利屋
Theme URI: https://example.com/
Author: IT便利屋
Author URI: https://example.com/
Description: IT便利屋のコーポレートサイト用WordPressテーマ。Tailwind CSSを使用したモダンなデザインで、レスポンシブ対応。
Version: 1.0.0
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: itbenriya
Tags: corporate, business, responsive, one-column, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ===================================================
   IT便利屋 - カスタムスタイルシート
   =================================================== */

/* ベース設定 */
body {
    font-family: 'Inter', sans-serif;
}

html {
    scroll-behavior: smooth;
}

/* -------------------------------------------------------
   パルスアニメーション
------------------------------------------------------- */
@keyframes pulse-slow {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

.animate-pulse-slow {
    animation: pulse-slow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* -------------------------------------------------------
   ナビゲーションバー - 状態管理
   data-scrolled="false" → 透過（ページ最上部）
   data-scrolled="true"  → 白背景（スクロール後）
------------------------------------------------------- */

/* --- ナビバー全体 --- */
#navbar[data-scrolled="false"] {
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    box-shadow: none;
}

#navbar[data-scrolled="true"] {
    background-color: #ffffff;
    backdrop-filter: none;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
}

/* --- ロゴ背景 --- */
#logo-bg[data-scrolled="false"] {
    background-color: #ffffff;
    color: #1d4ed8; /* blue-700 */
}

#logo-bg[data-scrolled="true"] {
    background-color: #1d4ed8; /* blue-700 */
    color: #ffffff;
}

/* --- ロゴテキスト --- */
#logo-text[data-scrolled="false"] {
    color: #ffffff;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

#logo-text[data-scrolled="true"] {
    color: #111827; /* gray-900 */
    filter: none;
}

/* --- PCナビリンク --- */
#navbar[data-scrolled="false"] .nav-link {
    color: #ffffff;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
#navbar[data-scrolled="false"] .nav-link:hover {
    color: #dbeafe; /* blue-100 */
}

#navbar[data-scrolled="true"] .nav-link {
    color: #374151; /* gray-700 */
    filter: none;
}
#navbar[data-scrolled="true"] .nav-link:hover {
    color: #1d4ed8; /* blue-700 */
}

/* --- 無料相談ボタン (PC) --- */
#nav-btn[data-scrolled="false"] {
    border-color: #ffffff;
    background-color: #ffffff;
    color: #1d4ed8;
    box-shadow: 0 4px 14px 0 rgba(255, 255, 255, 0.39);
}
#nav-btn[data-scrolled="false"]:hover {
    background-color: #eff6ff; /* blue-50 */
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.23);
}

#nav-btn[data-scrolled="true"] {
    border-color: transparent;
    background-color: #1d4ed8; /* blue-700 */
    color: #ffffff;
    box-shadow: 0 10px 15px -3px rgba(59,130,246,.3);
}
#nav-btn[data-scrolled="true"]:hover {
    background-color: #2563eb; /* blue-600 */
}

/* --- モバイルメニューボタン --- */
#mobile-menu-btn[data-scrolled="false"] {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
}

#mobile-menu-btn[data-scrolled="true"] {
    color: #111827; /* gray-900 */
    background-color: rgba(0, 0, 0, 0.05);
}