/*
Theme Name: Juumoku LP Theme
Theme URI: https://example.com/
Author: Net On Village
Author URI: https://example.com/
Description: 株式会社住木設計 LP 用の1ページWordPressテーマ
Version: 1.0
Text Domain: juumoku-lp
*/

         /* 基本スタイル */
        html, body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
        }

        body {
            overflow-x: hidden;
            background-color: #ffffff;
            cursor: none;
            color: #111;
            font-family: 'Noto Sans JP', sans-serif;
            position: relative;
        }

        /* フィルムグレイン */
        .grain-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9998;
            opacity: 0.05;
            overflow: hidden;
        }
        .grain-overlay::before {
            content: "";
            position: absolute;
            top: -100%;
            left: -100%;
            width: 300%;
            height: 300%;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
            animation: grain 8s steps(10) infinite;
        }

        /* カスタムカーソル */
        .cursor-dot, .cursor-outline {
            position: fixed;
            top: 0; left: 0;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            z-index: 9999;
            pointer-events: none;
            mix-blend-mode: difference;
        }
        .cursor-dot { width: 8px; height: 8px; background-color: #fff; }
        .cursor-outline {
            width: 40px; height: 40px;
            border: 1px solid rgba(255, 255, 255, 0.5);
            transition: width 0.2s, height 0.2s, background-color 0.2s;
        }
        body.hovering .cursor-outline {
            width: 60px; height: 60px;
            background-color: rgba(255, 255, 255, 0.1);
            border-color: transparent;
        }

        ::-webkit-scrollbar { width: 0px; background: transparent; }

        .line-wrapper { overflow: hidden; }
        .line-inner { transform: translateY(100%); display: block; }

        /* 背景画像のフェードアニメーション用 */
        .ambient-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            filter: grayscale(100%) brightness(1.1);
            mix-blend-mode: multiply;
            transition: opacity 3s ease-in-out, transform 10s ease-out;
            pointer-events: none;
        }
        .ambient-image.active {
            opacity: 0.2;
            transform: scale(1.05);
        }

        /* ナビゲーションのアクティブスタイル */
        .nav-link.active {
            background-color: #111;
            color: #fff;
            padding-left: 1rem;
            padding-right: 1rem;
        }
        .nav-link {
            transition: all 0.3s ease;
            padding: 0.25rem 0.5rem;
        }

        /* --- ヘッダーの色制御用スタイル --- */
        #header-logo.white-mode img {
            filter: brightness(0) invert(1);
        }
        #header-logo.white-mode .logo-text {
            color: #fff;
        }
        
        body.menu-open #header-logo {
            opacity: 0 !important;
            pointer-events: none;
        }

        header.white-mode .nav-link.active {
            background-color: #fff;
            color: #111;
        }
        header {
            transition: color 0.3s ease;
        }

        /* モバイルメニュー */
        #mobile-menu {
            clip-path: inset(0 0 100% 0);
            transition: clip-path 0.6s cubic-bezier(0.77, 0, 0.175, 1);
        }
        #mobile-menu.open {
            clip-path: inset(0 0 0 0);
        }
        .hamburger-line {
            transition: all 0.3s ease;
        }
        .menu-open .hamburger-line:nth-child(1) {
            transform: translateY(6px) rotate(45deg);
        }
        .menu-open .hamburger-line:nth-child(2) {
            transform: translateY(-5px) rotate(-45deg);
        }
        body.menu-open .hamburger-line {
            background-color: #ffffff !important;
        }

        /* 文字を一文字ずつ出すためのスタイル */
        .char-wrapper {
            display: inline-block;
            overflow: hidden;
            vertical-align: bottom;
        }
        .char-inner {
            display: inline-block;
            transform: translateY(100%);
        }

        /* 縦書き強制 */
        .vertical-text {
            writing-mode: vertical-rl;
            text-orientation: mixed;
        }

        /* --- Contactセクション用 流線アニメーション (Sass記法から標準CSSへ修正) --- */
        .lines {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 90vw;
            height: 100%;
            pointer-events: none;
            z-index: 0;
        }

        .lines .line {
            position: absolute;
            width: 1px;
            height: 100%;
            top: 0;
            left: 50%;
            background: rgba(200, 200, 200, 0.3);
            overflow: hidden;
        }

        .lines .line::after {
            content: '';
            display: block;
            position: absolute;
            height: 15vh;
            width: 100%;
            top: -50%;
            left: 0;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #000000 75%, #000000 100%);
            animation: drop 7s 0s infinite;
            animation-fill-mode: forwards;
            animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
        }

        .lines .line:nth-child(1) {
            margin-left: -25%;
        }
        .lines .line:nth-child(1)::after {
            animation-delay: 2s;
        }

        .lines .line:nth-child(3) {
            margin-left: 25%;
        }
        .lines .line:nth-child(3)::after {
            animation-delay: 2.5s;
        }

        @keyframes drop {
            0% { top: -50%; }
            100% { top: 110%; }
        }

    /* --- Contact Form 7 Styling Overrides & Validation --- */
.wpcf7-form-control-wrap {
    display: block;
    position: relative;
}

.wpcf7-form-control {
    width: 100%;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #888888;
    padding: 0.75rem 0;
    outline: none;
    transition: border-color 0.3s;
    border-radius: 0;
    font-family: inherit;
}

.wpcf7-form-control:focus {
    border-color: #111111;
}

/* エラー時の入力フィールドスタイル（赤枠） */
.input-error {
    border-bottom-color: #e53e3e !important;
}

/* エラーメッセージ（おしゃれ版） */
.error-message {
    display: block;
    color: #e53e3e;
    font-size: 0.75rem;
    margin-top: 0.25rem;
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.3s ease;
    height: 0;
    overflow: hidden;
    letter-spacing: 0.05em;
}

/* エラー表示状態 */
.has-error .error-message {
    opacity: 1;
    transform: translateY(0);
    height: auto;
    margin-top: 0.5rem;
}

select.wpcf7-form-control {
     color: #888888;
     cursor: pointer;
}
select.wpcf7-form-control.text-black {
    color: #111111;
}

/* Submit Button (ここを修正しました) */
.wpcf7-submit {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    
    /* ボタン自体は透明にして見えなくする */
    opacity: 0 !important;
    background: transparent !important;
    border: none !important;
    
    /* カーソルは指マークに */
    cursor: pointer !important;
    z-index: 20; /* 文字より上に配置してクリックを受け止める */
    
    /* 余計なスタイルを念のためリセット */
    padding: 0 !important;
    margin: 0 !important;
    appearance: none !important;
}

/* CF7 Spinner */
.wpcf7-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
    z-index: 30; /* ボタンよりさらに上 */
}
.wpcf7-submit.submitting ~ .wpcf7-spinner {
    visibility: visible;
}

/* 送信完了画面 */
#thank-you-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}
#thank-you-screen.visible {
    opacity: 1;
    pointer-events: auto;
}

/* =========================================
   CF7 エラーメッセージのモダン化
   ========================================= */

/* 1. 各項目の入力エラー (赤文字部分) */
.wpcf7-not-valid-tip {
    font-size: 0.75rem;       /* text-xs 相当 */
    color: #ef4444;           /* Tailwindのred-500 */
    font-weight: 500;         /* 少し太字に */
    letter-spacing: 0.05em;   /* 文字間を少し開ける */
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    animation: fadeUpError 0.4s ease forwards;
}

.wpcf7-not-valid-tip::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #ef4444;
    border-radius: 50%;
    margin-right: 8px;
}

/* 2. 送信ボタン下の黄色い枠 (レスポンスボックス) */
.wpcf7 form .wpcf7-response-output {
    border: none !important;     
    border-radius: 0 !important; 
    padding: 1rem 0 !important;  
    margin: 2rem 0 0 0 !important;
    font-size: 0.875rem;         
    text-align: center;          
    background: transparent !important; 
}

/* エラー時のスタイル（赤系） */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
    color: #ef4444; 
    border-top: 1px solid #ef4444 !important; 
}

/* 送信成功時のスタイル（黒または緑系） */
.wpcf7 form.sent .wpcf7-response-output {
    color: #000; 
    border-top: 1px solid #000 !important; 
}

/* アニメーション定義 */
@keyframes fadeUpError {
    0% {
        opacity: 0;
        transform: translateY(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 3. エラー時に枠線（下線）を赤くする */
.wpcf7-form-control.wpcf7-not-valid {
    border-color: #ef4444 !important; 
}

.wpcf7-form-control.wpcf7-not-valid:focus {
    border-color: #ef4444 !important; 
}

/* reCAPTCHAのバッジ（右下のロゴ）を非表示にする */
.grecaptcha-badge {
    visibility: hidden;
}