/*
Theme Name: G8 Static Theme
Description: 株式会社ジーエイトの静的HTMLをWordPressテーマに変換 | 更新日: 2025年11月13日 | 動画スライダー・Safari フォントレンダリング修正
Version: 1.28
Author: GEIGHT Inc.
*/

/* Block Hiragino Mincho ProN completely */
@font-face {
    font-family: "Hiragino Mincho ProN";
    src: url("data:,");
}

/* Basic font family setting - force Gothic */
*, html, body, h1, h2, h3, h4, h5, h6, p, span, div, a, li, ul {
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Page Loader Styles */
#page-loader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #091628 !important;
    z-index: 99999 !important;
    transition: opacity 0.5s ease-out;
    /* Use flexbox for centering */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Canvas Background Animation for Initial Load */
#page-loader-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -1 !important;
}

#page-loader.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* Loading Animation Styles */
.loading-animation {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 40px;
    /* Remove any positioning that might interfere */
    position: relative;
    margin: 0;
    padding: 0;
}

/* Planning & Creative Text - Initial load only */
.initial-load .planning-creative-text {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    color: #ffffff !important;
    opacity: 0 !important;
    text-align: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 10 !important; /* Ensure text appears above background animation */
}

.initial-load .planning-creative-text span {
    opacity: 0 !important;
    display: inline-block;
    vertical-align: baseline !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* G8 Logo - Initial load only */
.initial-load .g8-logo {
    opacity: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 10 !important; /* Ensure logo appears above background animation */
}

.initial-load .g8-logo svg {
    width: 200px !important;
    height: 180px !important;
    display: block !important;
    margin: 0 auto !important;
}

/* SVG path setup for line drawing animation */
.logo-paths path {
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    opacity: 0 !important;
    /* These will be set dynamically by JavaScript */
}

/* Loading animation containers - Base styles */
.loading-animation {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: none !important; /* Hidden by default */
}

/* Initial load animation (Line Drawing) - Only visible when initial */
.loading-animation.initial-load {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 40px;
    z-index: 10 !important; /* Ensure entire animation appears above canvas background */
}

#page-loader[data-transition-type="initial"] .loading-animation.initial-load {
    display: flex !important;
}

/* Page transition animation (Simple Fade) - Only visible when page transition */
.loading-animation.page-transition {
    align-items: center !important;
    justify-content: center !important;
}

#page-loader[data-transition-type="page"] .loading-animation.page-transition {
    display: flex !important;
}

/* Ensure opposite animations are always hidden */
#page-loader[data-transition-type="initial"] .loading-animation.page-transition {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#page-loader[data-transition-type="page"] .loading-animation.initial-load {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Transition logo styling - Always centered (restored original) */
.transition-logo {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.9) !important;
    opacity: 0;
    width: 150px !important;
    height: auto !important;
}

/* Hide all children of hidden animations */
#page-loader[data-transition-type="initial"] .page-transition * {
    display: none !important;
    visibility: hidden !important;
}

#page-loader[data-transition-type="page"] .initial-load * {
    display: none !important;
    visibility: hidden !important;
}

.page-transition-wrapper {
    background-color: #091628;
    transition: all 0.5s ease-out;
}

.page-transition-wrapper.fade-in {
    background-color: transparent;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* Contact Form 7 styling to match existing contact form design */

/* Base */
.wpcf7 {
  font-family: var(--font-geist-sans, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji");
}

.wpcf7 form {
  margin: 0;
}

/* Spacing between fields (replicates space-y-6) */
.wpcf7 form p {
  margin: 0 0 1.5rem; /* 24px */
}

/* Labels */
.wpcf7 form p > label {
  display: block;
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-medium */
  color: #374151; /* gray-700 */
  margin-bottom: 0.5rem; /* mb-2 */
}

/* Text inputs, selects, textareas */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  padding: 0.75rem 1rem; /* py-3 px-4 */
  border: 1px solid #D1D5DB; /* gray-300 */
  border-radius: 0; /* square corners like Tailwind default inputs here */
  background-color: #ffffff;
  color: #111827; /* gray-900 */
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
  color: #9CA3AF; /* gray-400 */
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  outline: none;
  border-color: #091628; /* focus:border-dark-blue */
  box-shadow: inset 0 0 0 1px #091628; /* focus:ring-1 focus:ring-dark-blue */
}

/* Textarea height */
.wpcf7 textarea {
  min-height: 10rem; /* ~160px, close to rows=6 */
}

/* Checkbox area */
.wpcf7 .wpcf7-checkbox .wpcf7-list-item {
  margin: 0.5rem 0; /* my-2 */
}

.wpcf7 .wpcf7-checkbox .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem; /* 12px */
  cursor: pointer;
}

.wpcf7 .wpcf7-checkbox input[type="checkbox"] {
  width: 1.25rem; /* 20px */
  height: 1.25rem;
  margin-top: 0.125rem; /* mt-0.5 to align with text */
  border: 1px solid #D1D5DB;
  accent-color: #091628; /* match dark blue theme accent */
}

.wpcf7 .wpcf7-list-item-label {
  font-size: 0.875rem; /* text-sm */
  color: #374151; /* gray-700 */
}

/* Submit button */
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.75rem 2rem; /* py-3 px-8 */
  font-weight: 500; /* font-medium */
  color: #ffffff;
  background-color: #091628; /* bg-dark-blue */
  border: 1px solid #091628;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  cursor: pointer;
}

@media (min-width: 768px) {
  .wpcf7 input[type="submit"],
  .wpcf7 button[type="submit"] {
    width: auto; /* md:w-auto */
    margin-left: auto;
    margin-right: auto; /* center align */
  }
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover {
  background-color: #0a1e3a; /* hover:bg-darker-blue */
  border-color: #0a1e3a;
}

.wpcf7 input[type="submit"]:disabled,
.wpcf7 button[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Validation states */
.wpcf7 .wpcf7-not-valid {
  border-color: #EF4444; /* red-500 */
  box-shadow: inset 0 0 0 1px #EF4444;
}

.wpcf7 .wpcf7-not-valid-tip {
  margin-top: 0.5rem; /* mt-2 */
  font-size: 0.875rem; /* text-sm */
  color: #B91C1C; /* red-700 */
}

/* Response message */
.wpcf7 .wpcf7-response-output {
  margin-top: 1rem; /* mt-4 */
  padding: 0.75rem 1rem; /* py-3 px-4 */
  border: 1px solid #D1D5DB; /* gray-300 */
  border-radius: 0;
  background-color: #F9FAFB; /* gray-50 */
  color: #111827; /* gray-900 */
}

/* Sent / Invalid / Failed states based on data-status on form */
.wpcf7 form[data-status="sent"] .wpcf7-response-output {
  border-color: #10B981; /* green-500 */
  background-color: #ECFDF5; /* green-50 */
  color: #065F46; /* green-700 */
}

.wpcf7 form[data-status="invalid"] .wpcf7-response-output,
.wpcf7 form[data-status="failed"] .wpcf7-response-output {
  border-color: #EF4444; /* red-500 */
  background-color: #FEF2F2; /* red-50 */
  color: #B91C1C; /* red-700 */
}

/* Spinner positioning */
.wpcf7 .wpcf7-spinner {
  margin-left: 0.75rem; /* ml-3 */
}

/* ------------------------------------------------------------
   Scroll reveal animations (reuse existing system)
   - Animate CF7 fields in when the surrounding section (with
     data-scroll-reveal) becomes .revealed via existing JS
------------------------------------------------------------- */

/* Initial state for fields inside any scroll-reveal container */
[data-scroll-reveal] .wpcf7 form > p,
[data-scroll-reveal] .wpcf7 .wpcf7-response-output {
  opacity: 0;
  transform: translateY(20px);
  transition: transform 0.6s ease, opacity 0.6s ease;
}

/* Revealed state */
[data-scroll-reveal].revealed .wpcf7 form > p,
[data-scroll-reveal].revealed .wpcf7 .wpcf7-response-output {
  opacity: 1;
  transform: none;
}

/* Staggered delays for a smooth cascade */
[data-scroll-reveal].revealed .wpcf7 form > p:nth-child(1) { transition-delay: 0.00s; }
[data-scroll-reveal].revealed .wpcf7 form > p:nth-child(2) { transition-delay: 0.05s; }
[data-scroll-reveal].revealed .wpcf7 form > p:nth-child(3) { transition-delay: 0.10s; }
[data-scroll-reveal].revealed .wpcf7 form > p:nth-child(4) { transition-delay: 0.15s; }
[data-scroll-reveal].revealed .wpcf7 form > p:nth-child(5) { transition-delay: 0.20s; }
[data-scroll-reveal].revealed .wpcf7 form > p:nth-child(6) { transition-delay: 0.25s; }
[data-scroll-reveal].revealed .wpcf7 form > p:nth-child(7) { transition-delay: 0.30s; }
[data-scroll-reveal].revealed .wpcf7 form > p:nth-child(8) { transition-delay: 0.35s; }
[data-scroll-reveal].revealed .wpcf7 form > p:nth-child(9) { transition-delay: 0.40s; }
[data-scroll-reveal].revealed .wpcf7 form > p:nth-child(10) { transition-delay: 0.45s; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-scroll-reveal] .wpcf7 form > p,
  [data-scroll-reveal] .wpcf7 .wpcf7-response-output {
    transition: none;
    transform: none;
    opacity: 1;
  }
}


/* Video Slider Styles */
.video-slider-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ensure smooth cross-dissolve transitions */
.hero-video {
    will-change: opacity, z-index;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    /* Prevent white flash during transition */
    background: #091628;
}

/* Prevent any white gaps during transition */
.video-slider-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #091628;
    z-index: 0;
}

/* Safari Font Weight and Rendering Fix */
@supports (-webkit-appearance: none) {
    /* Ensure Gothic font family with maximum priority */
    * {
        font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
        -webkit-font-smoothing: antialiased !important;
    }

    /* Safari-specific font weight adjustment for h1, h2 and spans */
    h1, h1 span, h1 span.block,
    h2, h2 span, h2 span.block {
        font-weight: 700 !important;
    }
}

/* Global override with maximum specificity */
html body * {
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Override any external CSS that might specify Mincho fonts */
[style*="Mincho"], [style*="明朝"], [style*="serif"] {
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* General body font */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Import the complete static CSS */