/*
Theme Name:   keed-corporate-hp
Theme URI:    	http://www.keed.jp/
Description:  keed社コーポレートサイト
Author:       田伏 謙太
Author URI:   	http://www.keed.jp/
Version:      2.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: keed-corporate-hp
*/

/* ========================================
   CSS REFACTORING SUMMARY
   - Hard-coded colors consolidated into CSS variables
   - Duplicate rules merged for consistency
   - Responsive breakpoints preserved
   - No visual changes intended
   ======================================== */

/* ========================================
   SECTION 1: CSS RESET & BASE STYLES
   Base typography, reset, and fundamental styles
   ======================================== */

/* CSS Reset for independent theme */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* iOS Tap Highlight Removal & Focus Fix */
a,
button,
[role="button"] {
    -webkit-tap-highlight-color: transparent;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

html {
    font-size: 16px;
    line-height: 1.6;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    color: var(--text-primary);
    background-color: #ffffff;
    line-height: 1.7;
    -webkit-font-smoothing: subpixel-antialiased;
    /* Changed from antialiased to subpixel-antialiased for sharper text */
    -moz-osx-font-smoothing: auto;
    /* Changed from grayscale to auto for sharper text */
    font-size: var(--font-size-base);
    font-weight: 400;
    text-rendering: optimizeSpeed;
    /* Optimize for speed (sharper text) instead of optimizeLegibility */
}

/* Typography Reset */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 1.5rem 0;
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.3;
    color: var(--heading-color);
}

:is(h1, h2, h3, h4, h5, h6, [class*="title" i]) {
    color: var(--heading-color) !important;
    text-shadow: none !important;
    /* Remove text shadow for sharp, clear text */
}

/* Exception: Company overview title must be black, not affected by heading color */
.company-overview,
.page-company h2.company-overview,
.page-company :is(h2)[class*="company-overview"],
body[data-theme="light"] .company-overview,
body[data-theme="light"] .page-company h2.company-overview,
body[data-theme="light"] .page-company :is(h2)[class*="company-overview"] {
    color: #000000 !important;
    /* Force black color for company overview title only */
}

h1 {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    line-height: 1.2;
}

h2 {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    line-height: 1.3;
}

h3 {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    line-height: 1.4;
}

h4 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    line-height: 1.4;
}

h5 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    line-height: 1.5;
}

h6 {
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: 1.5;
}

p {
    margin: 0 0 1.5rem 0;
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--text-primary);
    font-weight: 400;
}

a {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover,
a:focus {
    color: var(--link-hover);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ========================================
   SECTION 2: UNIFIED COLOR SYSTEM
   All color, spacing, and design tokens
   ======================================== */

:root {
    /* Font System */
    /* Font System */
    --font-klee-one: "Klee One", "Inter", "ui-sans-serif", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", sans-serif;
    --font-body: var(--font-klee-one);
    --font-heading: var(--font-klee-one);
    --font-mono: "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", monospace;

    /* Font Sizes - Responsive Scale */
    --font-size-xs: 0.75rem;
    /* 12px */
    --font-size-sm: 0.875rem;
    /* 14px */
    --font-size-base: 1rem;
    /* 16px */
    --font-size-lg: 1.125rem;
    /* 18px */
    --font-size-xl: 1.25rem;
    /* 20px */
    --font-size-2xl: 1.5rem;
    /* 24px */
    --font-size-3xl: 1.875rem;
    /* 30px */
    --font-size-4xl: 2.25rem;
    /* 36px */
    --font-size-5xl: 3rem;
    /* 48px */
    --font-size-6xl: 3.75rem;
    /* 60px */

    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;

    /* Spacing System - 8px Grid */
    --space-0: 0;
    --space-1: 0.25rem;
    /* 4px */
    --space-2: 0.5rem;
    /* 8px */
    --space-3: 0.75rem;
    /* 12px */
    --space-4: 1rem;
    /* 16px */
    --space-5: 1.25rem;
    /* 20px */
    --space-6: 1.5rem;
    /* 24px */
    --space-8: 2rem;
    /* 32px */
    --space-10: 2.5rem;
    /* 40px */
    --space-12: 3rem;
    /* 48px */
    --space-16: 4rem;
    /* 64px */
    --space-20: 5rem;
    /* 80px */
    --space-24: 6rem;
    /* 96px */
    --space-32: 8rem;
    /* 128px */

    /* Border Radius */
    --radius-none: 0;
    --radius-sm: 0.125rem;
    /* 2px */
    --radius-base: 0.25rem;
    /* 4px */
    --radius-md: 0.375rem;
    /* 6px */
    --radius-lg: 0.5rem;
    /* 8px */
    --radius-xl: 0.75rem;
    /* 12px */
    --radius-2xl: 1rem;
    /* 16px */
    --radius-3xl: 1.5rem;
    /* 24px */
    --radius-full: 9999px;

    /* Shadows - Enhanced for better visibility */
    --shadow-sm: 0 1px 2px rgba(17, 45, 78, 0.05);
    --shadow-base: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 300ms ease-in-out;
    --transition-slow: 500ms ease;

    /* Z-Index Scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;

    /* Breakpoints */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}

/* ========================================
   SECTION 2.1: DARK THEME SYSTEM
   Theme-specific color overrides
   ======================================== */

body {
    /* 背景色系 */
    --background-primary: #ffffff;
    /* Changed to white for flat design */
    --background-secondary: #ffffff;
    --background-tertiary: #e5e7eb;
    --background-card: #ffffff;
    --background-contrast: #111827;
    --background-dark: #0f172a;

    /* テキスト色系 - Enhanced Contrast */
    --text-primary: #1f2937;
    /* Dark Gray for high contrast (WCAG AA+) */
    --text-secondary: #4b5563;
    --text-muted: #6b7280;
    --text-inverse: #ffffff;
    --text-cream: #fefce8;
    /* Kept for specific accents */

    /* Heading Colors */
    --heading-color: #111827;
    /* Near Black */

    /* Brand Colors - Standardized */
    --primary-color: #1e3a8a;
    /* Trustworthy Navy */
    --primary-hover: #1e40af;
    --accent-color: #f59e0b;
    /* Warm Amber for CTA only */
    --accent-hover: #d97706;

    /* Functional Colors */
    --border-primary: #e5e7eb;
    --border-secondary: #d1d5db;

    --card-text-primary: #FFFFFF;
    --card-text-secondary: #E5E7EB;
    --card-heading-color: #FFFFFF;

    /* リンク色系 */
    --link-color: var(--text-cream);
    --link-hover: color-mix(in srgb, var(--text-cream) 80%, white 20%);
    --focus-color: color-mix(in srgb, var(--text-cream) 70%, white 30%);

    /* プライマリ色系（モダンオレンジ） */
    --primary-color: #ff6b35;
    --primary-hover: #ff8c5a;
    --accent-color: #ff8c5a;
    --accent-hover: #ff9f7a;

    /* CTA色系（モダンオレンジ） */
    --cta-primary: #ff6b35;
    --cta-secondary: #ff8c5a;
    --cta-on-primary: #ffffff;
    --cta-on-secondary: #ffffff;

    /* ボーダー色系 */
    --border-primary: #273346;
    --border-secondary: #2f3c52;
    --border-strong: #455672;
    --border-light: #F5EBDD;
    --border-contrast: #5D696F;

    /* セマンティック色系 */
    --success-color: #3FA372;
    --warning-color: #C48A1F;
    --error-color: #BF2222;
    --info-color: #80D8FF;

    /* グラデーション・特殊効果用 */
    --header-gradient-start: #ffffff;
    --header-gradient-end: #ffffff;
    --section-gradient-start: #ffffff;
    --section-gradient-end: #ffffff;
    --card-gradient-start: #ffffff;
    --card-gradient-end: #ffffff;
    --card-background: #ffffff;
    --hover-overlay: rgba(210, 180, 140, 0.1);
    --hover-overlay-strong: rgba(210, 180, 140, 0.15);
    --shadow-hover: rgba(210, 180, 140, 0.4);
    --shadow-hover-light: rgba(210, 180, 140, 0.1);
    --gradient-accent-overlay: transparent;
    --timeline-gradient-start: #ffffff;
    --timeline-gradient-end: #ffffff;
    --hero-gradient-start: #ffffff;
    --hero-gradient-end: #ffffff;
    --hover-gradient-start: #ffffff;
    --hover-gradient-end: #ffffff;

    /* 適用 */
    color: var(--text-primary);
    background-color: var(--background-primary);
}

/* ========================================
   SECTION 3: LAYOUT SYSTEM
   Container, site structure, grid systems
   ======================================== */

.site {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-main {
    flex: 1;
}

/* Consolidated container padding rules for consistency */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

@media (min-width: 768px) {
    .container {
        padding: 0 var(--space-6);
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 0 var(--space-8);
    }
}

/* Small mobile override: consolidated from multiple locations */
@media (max-width: 480px) {
    .container {
        padding: 0 var(--space-2);
    }
}

/* ========================================
   SECTION 4: HEADER SYSTEM
   Site header, navigation, mobile menu
   ======================================== */

/* Merged header background gradient into CSS variable for consistency */
.site-header {
    /* Slightly transparent header so background content is少しだけ透ける */
    background: rgba(254, 246, 228, 0.9) !important;
    border-bottom: none !important;
    /* Remove bottom border line */
    position: sticky !important;
    top: 0 !important;
    z-index: var(--z-sticky) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
}

/* Ensure header text is sharp and clear */
.site-header,
.site-header * {
    text-shadow: none !important;
    -webkit-font-smoothing: subpixel-antialiased !important;
    -moz-osx-font-smoothing: auto !important;
    text-rendering: optimizeSpeed !important;
    filter: none !important;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) 0;
    min-height: 60px;
}

/* ロゴ・ブランディング */
.site-branding {
    flex-shrink: 0;
}

.site-logo {
    display: block;
    text-decoration: none;
    transition: transform var(--transition-base);
}

.site-logo:hover {
    transform: scale(1.05);
}

.logo-image {
    width: auto;
    object-fit: contain;
}

.site-branding .logo-image {
    height: 72px;
}

.mobile-menu-logo .logo-image {
    height: 110px;
}

/* ナビゲーション */
.main-navigation {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative;
}

.menu-wrapper {
    display: flex !important;
    align-items: center;
    position: relative;
}

.nav-menu {
    display: flex !important;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--space-8);
    position: relative;
    white-space: nowrap;
    word-break: keep-all;
}

.nav-menu li {
    position: relative;
}

.nav-menu a {
    /* Optimized padding based on Fibonacci sequence: 12px (top/bottom) × 24px (left/right) = 1:2 ratio */
    /* Total height: 12px + 16px (font-size) + 12px = 40px (meets touch device requirement) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-6);
    min-height: 40px;
    /* Ensure minimum touch target height */
    color: var(--text-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    position: relative;
}

/* Consolidated hover overlay color into CSS variable */
.nav-menu a:hover,
.nav-menu a:focus {
    color: var(--accent-color);
    background: var(--hover-overlay);
    transform: translateY(-1px);
}

.nav-menu a:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

/* ドロップダウンメニュー */
.menu-item-has-children {
    position: relative;
}

.sub-menu {
    /* Business services submenu: cream background */
    text-align: left;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fdfcf8 !important;
    /* Cream background for business services submenu */
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-base);
    z-index: var(--z-dropdown);
    list-style: none;
    margin: 0;
    padding: var(--space-2) 0;
}

/* デスクトップでのホバー表示 */
@media (min-width: 1024px) {

    .menu-item-has-children:hover .sub-menu,
    .menu-item-has-children:focus-within .sub-menu,
    .menu-item-has-children .sub-menu.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* モバイルでの表示制御 */
@media (max-width: 1023px) {
    .menu-item-has-children .sub-menu.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        position: static;
        background: var(--hover-overlay);
        border: none;
        box-shadow: none;
        margin: var(--space-2) 0 0 var(--space-4);
        padding: 0;
    }
}

.sub-menu li {
    margin: 0;
}

.sub-menu a {
    /* Business services submenu buttons: cream background (ensure no light gray override) */
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
    border-radius: 0;
    white-space: nowrap;
    text-align: left !important;
    /* テキストを左寄せ */
    justify-content: flex-start;
    /* 念のため中央寄せを打ち消す */
    display: block;
    /* ブロックでクリックしやすく */
    background: #fdfcf8 !important;
    /* Cream background - override any light gray (#f8f7f6) */
    background-color: #fdfcf8 !important;
    /* Explicit background-color to ensure cream */
    color: var(--text-primary);
}

.sub-menu a:hover,
.sub-menu a:focus {
    background: #f5f5f5 !important;
    /* Light gray on hover */
    background-color: #f5f5f5 !important;
    /* Explicit background-color on hover */
    transform: none;
}

/* Ensure submenu items maintain cream background in all states */
.sub-menu li a,
.menu-item-has-children .sub-menu a {
    background: #fdfcf8 !important;
    background-color: #fdfcf8 !important;
}

/* モバイルメニューボタン */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-base);
}

.menu-toggle:hover,
.menu-toggle:focus {
    color: var(--accent-color);
}

.menu-toggle:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

.menu-toggle-text {
    margin-right: var(--space-2);
}

.hamburger {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 24px;
    height: 18px;
}

.hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background: currentColor;
    border-radius: 1px;
    transition: all var(--transition-base);
    margin: 0;
    padding: 0;
}

.menu-toggle[aria-expanded="true"] .hamburger span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle[aria-expanded="true"] .hamburger span:nth-child(2) {
    opacity: 0;
}

.menu-toggle[aria-expanded="true"] .hamburger span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* CTAボタン */
.header-cta {
    flex-shrink: 0;
}

.btn-contact {
    /* Redesigned contact button: more rounded, wider, with mail icon */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    /* Space between icon and text */
    padding: var(--space-3) var(--space-10);
    /* Increased horizontal padding for more elongated shape */
    min-height: 44px;
    /* Slightly taller for better proportion */
    min-width: 180px;
    /* Wider (elongated) button */
    background: #fc453d !important;
    /* Red background color */
    color: #ffffff !important;
    /* White text for contrast */
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    /* 16px */
    border-radius: 999px !important;
    /* More rounded shape (pill-shaped) */
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
}

/* Consolidated button hover states for consistency */
.btn-contact:hover,
.btn-contact:focus {
    background: #e6392f !important;
    /* Slightly darker red on hover */
    opacity: 0.95;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-contact:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

/* Contact button icon styling */
.btn-contact .contact-icon,
.btn-contact .material-icons {
    font-size: 20px !important;
    /* Icon size */
    line-height: 1;
    display: inline-flex;
    align-items: center;
    font-family: 'Material Icons' !important;
    font-weight: normal;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* デスクトップ表示 */
@media (min-width: 1024px) {
    .mobile-menu-toggle {
        display: none;
    }

    .mobile-menu-overlay {
        display: none;
    }

    .mobile-menu {
        display: none;
    }

    .desktop-menu {
        display: flex;
        align-items: center;
    }

    .nav-menu {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: var(--space-8);
        position: relative;
        flex-direction: row;
    }

    .nav-menu li {
        position: relative;
    }

    .nav-menu a {
        /* Optimized padding: Fibonacci sequence 1:2 ratio (12px × 24px) */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-3) var(--space-6);
        min-height: 40px;
        color: var(--text-primary);
        text-decoration: none;
        font-weight: var(--font-weight-medium);
        font-size: var(--font-size-base);
        border-radius: var(--radius-lg);
        transition: all var(--transition-base);
    }
}

/* モバイル表示 */
@media (max-width: 1023px) {
    .desktop-menu {
        display: none;
    }

    /* Hide contact button on mobile (outside hamburger menu) */
    .header-cta {
        display: none !important;
    }

    /* Align hamburger button to the right */
    .main-navigation {
        justify-content: flex-end !important;
        margin-left: auto;
    }

    .mobile-menu-toggle {
        /* Redesigned: Circular hamburger button with yellow background */
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fbbc2e !important;
        /* Yellow background */
        border: none;
        cursor: pointer;
        padding: var(--space-3);
        width: 44px;
        /* Circular button size */
        height: 44px;
        border-radius: 50% !important;
        /* Make it circular */
        color: #333333 !important;
        /* Dark text color for contrast */
        transition: all var(--transition-base);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .mobile-menu-toggle:hover,
    .mobile-menu-toggle:focus {
        background: #f9b216 !important;
        /* Slightly darker yellow on hover */
        color: #333333 !important;
        transform: scale(1.05);
    }

    .mobile-menu-toggle:focus-visible {
        outline: 2px solid #fbbc2e;
        outline-offset: 2px;
    }

    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 24px;
    }

    .hamburger-line {
        display: block;
        width: 22px;
        /* Fixed width for consistent appearance */
        height: 3px;
        background-color: #f8f7f6 !important;
        /* Light gray color for hamburger lines */
        border-radius: 1.5px;
        transition: transform 0.3s ease, opacity 0.3s ease;
        transform-origin: center;
        margin: 2.5px 0;
    }

    /* ハンバーガーボタンのアニメーション（開いたとき）*/
    .mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }

    .mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
    }

    /* モバイルメニューオーバーレイ */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--background-primary);
        z-index: var(--z-modal);
        opacity: 0;
        visibility: hidden;
        transition: visibility 0.3s, opacity 0.3s ease-in-out;
    }

    .mobile-menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* モバイルメニュー */
    .mobile-menu {
        position: fixed;
        top: 0;
        right: 0;
        width: 320px;
        height: 100vh;
        background: var(--background-card);
        border-left: 1px solid var(--border-primary);
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
        display: flex;
        flex-direction: column;
        z-index: calc(var(--z-modal) + 1);
        visibility: hidden;
        opacity: 0;
        transform: translateX(100%);
        transition: visibility 0.3s, opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
        overflow: hidden;
    }

    .mobile-menu.active {
        visibility: visible;
        opacity: 1;
        transform: translateX(0);
    }

    .mobile-menu-header {
        /* Logo section background: cream */
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        padding: var(--space-8);
        background: #fdfcf8 !important;
        /* Cream background for logo section */
        border-bottom: 1px solid var(--border-primary);
        flex-shrink: 0;
        min-height: 120px;
        height: auto;
        position: relative;
        z-index: 10;
        width: 100%;
    }

    .mobile-menu-logo {
        display: flex;
        align-items: flex-start;
        gap: var(--space-4);
        flex: 1;
        padding-top: var(--space-2);
    }

    .mobile-menu-logo .logo-image {
        object-fit: contain;
    }

    .mobile-menu-logo .logo-text {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        flex: 1;
    }

    .mobile-menu-logo .company-name {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-bold);
        color: var(--text-primary);
    }

    .mobile-menu-logo .company-tagline {
        font-size: var(--font-size-sm);
        color: var(--text-muted);
        line-height: 1.5;
        max-width: 200px;
    }

    .mobile-menu-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        cursor: pointer;
        color: #333333 !important;
        /* Dark gray color for close button */
        border-radius: var(--radius-full);
        transition: all var(--transition-base);
        backdrop-filter: blur(10px);
        flex-shrink: 0;
        margin-top: var(--space-2);
    }

    .mobile-menu-close:hover,
    .mobile-menu-close:focus,
    .mobile-menu-close:active {
        background: rgba(255, 255, 255, 0.2);
        /* Slight hover effect but no orange */
        color: #333333 !important;
        transform: scale(1.1);
        outline: none;
        box-shadow: none;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-menu-close:focus-visible {
        outline: 2px solid var(--focus-color);
        outline-offset: 2px;
    }

    .close-icon {
        font-size: 18px;
        font-weight: bold;
        color: #333333 !important;
        /* Dark gray color for close icon */
    }

    .mobile-menu-content {
        /* Menu buttons section background: light gray */
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: var(--space-8);
        gap: var(--space-8);
        overflow-y: auto;
        position: relative;
        z-index: 1;
        margin-top: 0;
        width: 100%;
        box-sizing: border-box;
        background: #f8f7f6 !important;
        /* Light gray background for menu buttons section */
    }

    .mobile-nav-menu {
        /* Vertical layout: all buttons in a single column with uniform size */
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        width: 100%;
    }

    /* モバイル表示時の縦並びレイアウト */
    @media (max-width: 480px) {
        .mobile-nav-menu {
            grid-template-columns: 1fr;
            gap: var(--space-3);
        }
    }
}

/* モバイル表示時のcard要素の縦並びレイアウト */
@media (max-width: 768px) {

    /* すべてのcard要素を縦並びに */
    [class*="card"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: var(--space-4) !important;
    }

    /* グリッドレイアウトを縦並びに変更 */
    .service-cards,
    .news-cards,
    .feature-cards,
    .process-steps,
    .job-cards,
    .related-jobs {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-4) !important;
    }

    /* カードコンテナの調整 */
    .service-card,
    .news-card,
    .feature-card,
    .process-step,
    .job-card,
    .related-job-card,
    .modern-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 var(--space-4) 0 !important;
    }

    /* 2列レイアウトを1列に変更 */
    .grid-2-cols,
    .service-grid,
    .news-grid,
    .feature-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-4) !important;
    }

    /* 3列レイアウトを1列に変更 */
    .grid-3-cols,
    .process-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-4) !important;
    }

    /* 会社情報テーブルを非表示にして、カード形式で表示 */
    .page-company table.company-info-table {
        display: none !important;
    }

    /* 会社情報カード形式のスタイル */
    .page-company .company-info-cards {
        display: block !important;
        padding: var(--space-6) !important;
        background: #ffffff !important;
        border: 1px solid var(--border-primary) !important;
        border-radius: var(--radius-xl) !important;
        box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
        overflow: hidden !important;
    }

    .page-company .company-info-item {
        display: block !important;
        margin-bottom: var(--space-4) !important;
        padding: var(--space-3) var(--space-4) !important;
        background: #ffffff !important;
        border: 1px solid var(--border-primary) !important;
        border-radius: var(--radius-md) !important;
        transition: background-color var(--transition-base) !important;
    }

    .page-company .company-info-item:hover {
        background: #ffffff !important;
    }

    .page-company .company-info-label {
        display: inline !important;
        font-weight: var(--font-weight-semibold) !important;
        color: var(--text-primary) !important;
        font-size: var(--font-size-base) !important;
    }

    .page-company .company-info-value {
        display: inline !important;
        color: var(--text-secondary) !important;
        font-size: var(--font-size-base) !important;
        line-height: 1.6 !important;
        margin-left: var(--space-2) !important;
    }

    /* 求人リストの最適化（シンプル1列レイアウト） */
    .jobs-list {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-4) !important;
        max-width: 800px !important;
        margin: 0 auto !important;
    }

    .job-item {
        background: #ffffff !important;
        border: 1px solid var(--border-primary) !important;
        border-radius: var(--radius-lg) !important;
        padding: var(--space-6) !important;
        transition: all var(--transition-base) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

    .job-item:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
        border-color: var(--accent-primary) !important;
    }

    .job-link {
        display: block !important;
        text-decoration: none !important;
        color: inherit !important;
    }

    .job-content {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-3) !important;
    }

    .job-title {
        font-size: var(--font-size-xl) !important;
        font-weight: var(--font-weight-semibold) !important;
        color: var(--text-primary) !important;
        margin: 0 !important;
        line-height: 1.4 !important;
    }

    .job-description {
        font-size: var(--font-size-base) !important;
        color: var(--text-secondary) !important;
        margin: 0 !important;
        line-height: 1.6 !important;
    }

    /* 会社情報テーブルコンテナを適切に表示 */
    .page-company .company-info-table-container {
        display: block !important;
        padding: var(--space-8) !important;
        background: #ffffff !important;
        border: 1px solid var(--border-primary) !important;
        border-radius: var(--radius-xl) !important;
        box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
        overflow: hidden !important;
    }

    .page-company .company-info-table-container.modern-card {
        display: block !important;
        padding: var(--space-8) !important;
        background: #ffffff !important;
        border: 1px solid var(--border-primary) !important;
        border-radius: var(--radius-xl) !important;
        box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
        overflow: hidden !important;
    }

    /* 会社情報テーブル行を適切に表示 */
    .page-company .company-info-table-container .table-row {
        display: table-row !important;
        border-bottom: 1px solid var(--border-primary) !important;
        transition: background-color var(--transition-base) !important;
    }

    /* テーブルラベルと値のスタイル */
    .page-company .table-label {
        display: table-cell !important;
        font-weight: var(--font-weight-semibold) !important;
        color: var(--text-primary) !important;
        background: rgba(29, 44, 64, 0.8) !important;
        padding: var(--space-4) var(--space-6) !important;
        border-right: 1px solid var(--border-primary) !important;
        width: 30% !important;
        min-width: 120px !important;
        vertical-align: top !important;
    }

    .page-company .table-value {
        display: table-cell !important;
        color: var(--text-secondary) !important;
        padding: var(--space-4) var(--space-6) !important;
        line-height: 1.6 !important;
        vertical-align: top !important;
    }
}

.mobile-nav-menu li {
    width: 100%;
}

.mobile-nav-menu a {
    /* Uniform size for all menu buttons */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-6);
    min-height: 48px;
    /* Uniform height for all buttons */
    width: 100%;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
    border: 1px solid var(--border-primary);
    background: var(--background-secondary);
    text-align: center;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mobile-nav-menu a:hover {
    color: var(--text-primary);
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.mobile-nav-menu a:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

/* お問い合わせボタン */
.mobile-menu-cta {
    display: flex;
    justify-content: center;
    margin: var(--space-4) 0;
}

.btn-contact-mobile {
    /* Redesigned mobile contact button: more rounded, wider, with mail icon */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    /* Space between icon and text */
    padding: var(--space-3) var(--space-10);
    /* Increased horizontal padding for more elongated shape */
    min-height: 44px;
    /* Slightly taller for better proportion */
    min-width: 220px;
    /* Wider (elongated) button */
    background: #fc453d !important;
    /* Red background color */
    color: #ffffff !important;
    /* White text for contrast */
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    /* 16px */
    border-radius: 999px !important;
    /* More rounded shape (pill-shaped) */
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(252, 69, 61, 0.3);
    /* Shadow matching red color */
}

.btn-contact-mobile:hover,
.btn-contact-mobile:focus {
    background: #e6392f !important;
    /* Slightly darker red on hover */
    opacity: 0.95;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(252, 69, 61, 0.4);
}

.btn-contact-mobile .contact-icon,
.btn-contact-mobile .material-icons {
    /* Icon size for mobile button */
    font-size: 20px !important;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    font-family: 'Material Icons' !important;
    font-weight: normal;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* Responsive icon size adjustments */
@media screen and (max-width: 540px) {

    .btn-contact-mobile .contact-icon,
    .btn-contact-mobile .material-icons {
        font-size: 18px !important;
        /* Slightly smaller icon on smaller mobile screens */
    }
}

@media screen and (max-width: 320px) {

    .btn-contact-mobile .contact-icon,
    .btn-contact-mobile .material-icons {
        font-size: 16px !important;
        /* Even smaller icon on mini screens */
    }
}

/* プライバシーポリシーリンク */
.mobile-menu-footer {
    display: flex;
    justify-content: center;
    margin-top: var(--space-4);
}

.privacy-policy-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: color 0.3s ease;
}

.privacy-policy-link:hover,
.privacy-policy-link:focus {
    color: var(--text-primary);
}

/* ───────────────
       モバイル用ドロップダウン（事業紹介）
       ─────────────── */
.mobile-has-children {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    /* 2カラムレイアウトのときも幅いっぱい使えるように */
    grid-column: span 2;
}

/* 親ボタン（事業紹介） */
.mobile-parent-btn {
    /* Uniform size matching other menu buttons */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 48px;
    /* Uniform height matching other buttons */

    background: var(--background-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);

    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);

    padding: var(--space-3) var(--space-6);
    /* Uniform padding matching other buttons */
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Normal state (not expanded) - return to default border when collapsed */
.mobile-parent-btn[aria-expanded="false"] {
    border: 1px solid var(--border-primary) !important;
    /* Default border color matching other buttons */
}

/* Hover state for collapsed button - keep same background color as header */
.mobile-parent-btn[aria-expanded="false"]:hover,
.mobile-parent-btn:not([aria-expanded="true"]):hover {
    /* Keep background consistent with header color */
    background: #FEF6E4 !important;
    border-color: var(--accent-color) !important;
    /* Same colored border as other buttons */
    color: #333333 !important;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
    transform: translateY(-2px);
}

/* Expanded state - keep background close to header color */
.mobile-parent-btn[aria-expanded="true"] {
    background: #FEF6E4 !important;
    border: 1px solid #e5e7eb !important;
    /* Light gray border when expanded */
    border-color: #e5e7eb !important;
    color: #333333 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    /* Maintain box shadow */
}

.mobile-parent-btn[aria-expanded="true"]:hover,
.mobile-parent-btn[aria-expanded="true"]:focus,
.mobile-parent-btn[aria-expanded="true"]:active {
    background: #FEF6E4 !important;
    border: 1px solid #e5e7eb !important;
    /* Light gray border when expanded */
    border-color: #e5e7eb !important;
    color: #333333 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    /* Maintain box shadow */
}

.mobile-parent-btn:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

/* ▼アイコン */
.mobile-chevron {
    font-size: var(--font-size-sm);
    line-height: 1;
    transition: transform 0.3s ease;
}

.mobile-parent-btn[aria-expanded="true"] .mobile-chevron {
    transform: rotate(180deg);
}

/* サブメニュー本体 */
.mobile-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);

    /* アコーディオンっぽい開閉アニメーション */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

/* .open が付いたら展開 */
.mobile-submenu.open {
    max-height: 500px;
    /* 十分に大きければOK */
}

/* サブメニュー内のリンク */
.mobile-submenu a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;

    background: #f4f4f7;
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    text-align: center;

    padding: var(--space-3) var(--space-4);
    width: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* サブメニュー先頭項目の上部余白を少し空けて枠線を見やすくする */
.mobile-submenu li:first-child a {
    margin-top: 2px;
}

.mobile-submenu a:hover {
    background: #f4f4f7;
    border-color: var(--border-primary);
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.mobile-submenu a:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}
}

/* モバイル専用表示 */
@media (max-width: 767px) {
    .header-content {
        padding: var(--space-3) 0;
        min-height: 60px;
    }

    .site-branding .logo-image {
        height: 64px;
    }

    .mobile-menu-logo .logo-image {
        height: 90px;
    }

    .btn-contact {
        /* Mobile: Redesigned contact button styling - more rounded and wider */
        gap: var(--space-2);
        /* Space between icon and text */
        padding: var(--space-3) var(--space-10);
        /* Increased horizontal padding for more elongated shape */
        min-height: 44px;
        /* Slightly taller for better proportion */
        min-width: 180px;
        /* Wider (elongated) button */
        font-size: var(--font-size-base);
        /* 16px */
        border-radius: 999px !important;
        /* More rounded shape (pill-shaped) */
    }

    .menu-toggle-text {
        display: none;
    }

    /* モバイルメニューの最適化 */
    .menu-wrapper {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: color-mix(in srgb, var(--background-card) 95%, black 5%);
        border: 1px solid var(--border-primary);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all var(--transition-base);
        z-index: var(--z-dropdown);
        margin-top: var(--space-2);
        max-height: 80vh;
        overflow-y: auto;
        display: none;
    }

    .menu-wrapper.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        display: block;
    }

    .nav-menu {
        flex-direction: column;
        gap: 0;
        padding: var(--space-4);
    }

    .nav-menu li {
        width: 100%;
    }

    .nav-menu a {
        /* Mobile: Optimized padding with Fibonacci sequence (12px × 24px) */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-3) var(--space-6);
        min-height: 40px;
        /* Ensure minimum touch target height */
        border-radius: var(--radius-lg);
        margin-bottom: var(--space-1);
    }

    .sub-menu {
        position: static;
        background: var(--hover-overlay);
        border: none;
        box-shadow: none;
        margin: var(--space-2) 0 0 var(--space-4);
        padding: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .sub-menu a {
        padding: var(--space-3) var(--space-4);
        font-size: var(--font-size-sm);
    }
}

/* スクロール時のヘッダー */
.site-header.scrolled {
    /* Scrolled header background */
    background: #FEF6E4 !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-base);
}

/* ========================================
   HEADER COLOR OVERRIDES
   Custom header color adjustments
   ======================================== */

/* Step 1: Header background color override */
.site-header {
    background: rgba(254, 246, 228, 0.9) !important;
}

.site-header.scrolled {
    background: rgba(254, 246, 228, 0.9) !important;
}

/* Step 2: Menu button text color override */
.nav-menu a {
    color: #333333 !important;
}

/* Mobile menu text color override */
.mobile-nav-menu a,
.mobile-parent-btn {
    color: #333333 !important;
}

/* Step 3: Menu button background color override */
.nav-menu a {
    background-color: #FEF6E4 !important;
}

/* Mobile menu button background color override */
.mobile-nav-menu a,
.mobile-parent-btn {
    background-color: #FEF6E4 !important;
}

/* Mobile submenu buttons: use #f4f4f7 background */
.mobile-nav-menu .mobile-submenu a {
    background-color: #f4f4f7 !important;
    background: #f4f4f7 !important;
}

.mobile-nav-menu .mobile-submenu a:hover,
.mobile-nav-menu .mobile-submenu a:focus {
    background-color: #f4f4f7 !important;
    background: #f4f4f7 !important;
}

/* Ensure nav items themselves have no own background (desktop / legacy only nav) */
.nav-menu>li {
    background-color: transparent;
}

/* Desktop only: make header nav links text-only (no cream button background) */
@media (min-width: 1024px) {
    .site-header .nav-menu a {
        background-color: transparent !important;
        box-shadow: none !important;
    }
}

/* Step 4: Contact button background color override */
/* Updated: Contact button background color override - now using #fc453d */
.btn-contact,
.btn-contact-mobile {
    background-color: #fc453d !important;
}

.btn-contact:hover,
.btn-contact:focus,
.btn-contact-mobile:hover,
.btn-contact-mobile:focus {
    background-color: #e6392f !important;
    /* Darker red on hover */
}

/* ========================================
   SECTION 5: CONTENT AREAS
   Main content, sections, page layouts
   ======================================== */

/* Consolidated: Main content background gradient */
.site,
.site-main,
main {
    background: #ffffff !important;
    color: var(--text-primary);
}

/* Consolidated: Common section styles */
.services-section {
    /* Services section: white background */
    background: #ffffff !important;
    /* White background for services section */
    padding: var(--space-8) 0;
    margin: 0;
}

.news-section {
    /* News section: white background */
    background: #ffffff !important;
    /* White background for news section */
    padding: var(--space-8) 0;
    margin: 0;
}

.values-section,
.career-values-section--new {
    /* Values section: white background */
    background: #ffffff !important;
    /* White background for values section */
    padding: var(--space-8) 0;
    margin: 0;
}

.company-section {
    /* Company section: cream background (matching services section) */
    background: #faf3ea !important;
    /* Cream background for company section */
    padding: var(--space-8) 0;
    margin: 0;
}

.access-section {
    /* Access section: white background */
    background: #ffffff !important;
    /* White background for access section */
    padding: var(--space-8) 0;
    margin: 0;
}

.contact-section,
.mission-vision-section,
.company-info-section,
/* Contact form section: outer background color */
.contact-form-section {
    background: #faf4ed !important;
    /* Outer background color */
    padding: var(--space-16) 0;
    margin: 0;
}

/* Contact form card: outer frame with border */
.contact-form-card.modern-card {
    background: #faf4ed !important;
    /* Outer background color */
    padding: var(--space-8);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 0 0 1px #faf3ed;
    /* Frame shadow with #faf3ed border */
    border: 2px solid #faf3ed !important;
    /* Frame border color changed to #faf3ed */
    position: relative;
}

/* Change black borders in content area (except header) to #faf3ed */
/* This affects content area borders, separators, dividers, tables, and cards */
.site-main,
.site-main section,
main section,
section:not(.site-header),
.container,
.content,
.modern-card:not(.contact-form-card),
.modern-section,
table,
table td,
table th,
table tr,
hr,
.card,
.card-body,
.table-row,
.table-label,
.table-value {
    border-color: #faf3ed !important;
    /* Change black borders to #faf3ed */
}

/* Exception: Keep header border removal */
.site-header {
    border-bottom: none !important;
}

/* Exception: Keep specific borders that should remain their original color */
.btn-contact,
.btn-contact-mobile,
.btn-primary,
.btn-cta,
input,
select,
textarea,
input:focus,
select:focus,
textarea:focus,
.contact-form-card .form-input,
.contact-form-card input,
.contact-form-card select,
.contact-form-card textarea {
    border-color: inherit !important;
    /* Keep original border colors for interactive elements */
}

/* Contact form card header: background color #faf4ed (except input fields) */
.contact-form-card .card-header {
    background: #faf4ed !important;
    /* Background color except input fields */
    padding: var(--space-6);
    border-radius: 8px;
    margin-bottom: var(--space-6);
    border-bottom: none !important;
    /* Remove bottom border */
}

/* Contact form card body: background color #faf4ed (except input fields) */
.contact-form-card .card-body {
    background: #faf4ed !important;
    /* Background color except input fields */
    padding: var(--space-6);
    border-radius: 8px;
}

/* Contact Form 7 specific styles */
.contact-form-card .wpcf7-form,
.contact-form-card form {
    background: transparent !important;
}

.contact-form-card .wpcf7-form p,
.contact-form-card .wpcf7-form br {
    color: #000000 !important;
}

.contact-form-card .wpcf7-form label,
.contact-form-card .wpcf7-form .wpcf7-form-control-wrap label {
    color: #000000 !important;
}

.contact-form-card .wpcf7-response-output,
.contact-form-card .wpcf7-mail-sent-ok,
.contact-form-card .wpcf7-mail-sent-ng,
.contact-form-card .wpcf7-validation-errors,
.contact-form-card .wpcf7-spam {
    color: #000000 !important;
    background: #f5f8fa !important;
}

.contact-form-card .card-title {
    color: #000000 !important;
    /* Black text color */
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
}

/* Contact form text: all text should be black */
.contact-form-card,
.contact-form-card *,
.contact-form-card p,
.contact-form-card span,
.contact-form-card div,
.contact-form-card .form-group label,
.contact-form-card .checkbox-label,
.contact-form-card .checkbox-text,
.contact-form-card .form-label,
.contact-form-card label {
    color: #000000 !important;
}

/* Contact form button: remove black border and update icon */
.contact-form .btn-primary.btn-cta.btn-lg,
.contact-form-card .btn-primary.btn-cta.btn-lg,
.contact-form-card .wpcf7-submit.btn-primary.btn-cta.btn-lg,
.contact-form-card button.btn-primary.btn-cta.btn-lg {
    border: none !important;
    /* Remove black border as requested */
}

.contact-form-card .wpcf7-submit.btn-primary.btn-cta.btn-lg.modern-btn,
.contact-form-card .btn-primary.btn-cta.btn-lg.modern-btn {
    background: #f2c119 !important;
    color: #1f1a18 !important;
}

.contact-form-card .wpcf7-submit.btn-primary.btn-cta.btn-lg.modern-btn:hover,
.contact-form-card .btn-primary.btn-cta.btn-lg.modern-btn:hover,
.contact-form-card .wpcf7-submit.btn-primary.btn-cta.btn-lg.modern-btn:focus-visible,
.contact-form-card .btn-primary.btn-cta.btn-lg.modern-btn:focus-visible {
    background: #e4b20f !important;
    color: #1f1a18 !important;
}

/* Contact form button icon: use mail icon same as contact button */
.contact-form .btn-icon,
.contact-form-card .btn-icon,
.contact-form .material-icons,
.contact-form-card .material-icons {
    font-family: 'Material Icons' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 20px !important;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    color: inherit;
}

/* Hide emoji icons and ensure Material Icons mail_outline is displayed */
.contact-form .btn-icon:not(.material-icons),
.contact-form-card .btn-icon:not(.material-icons) {
    font-size: 0 !important;
}

.contact-form .btn-icon:not(.material-icons)::before,
.contact-form-card .btn-icon:not(.material-icons)::before {
    content: 'mail_outline';
    font-family: 'Material Icons' !important;
    font-size: 20px !important;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    color: inherit;
}

.contact-form-card .required {
    color: #d40f20 !important;
    /* Red for required asterisk */
}

.contact-form-card .checkbox-label a {
    color: #d40f20 !important;
    /* Red for links */
    text-decoration: underline;
}

.contact-form-card .checkbox-label a:hover {
    color: #fc453d !important;
    /* Lighter red on hover */
}

.contact-form-section,
.contact-info-section,
.faq-section,
/* News archive section: cream background matching home page design */
.news-archive-section {
    background: #fdfcf8 !important;
    /* Cream background matching home page */
    padding: var(--space-16) 0;
    margin: 0;
}

/* News archive header: same style as home page news section */
.news-archive-header {
    margin-bottom: var(--space-10);
    text-align: center;
    /* Center-align the title */
}

.news-archive-title {
    /* Yellow background with white text, center-aligned */
    background: #fec50b !important;
    /* Yellow background color */
    color: #ffffff !important;
    /* White text color */
    display: inline-block;
    /* Allow background to wrap text */
    padding: var(--space-4) var(--space-8);
    /* Padding around text */
    border-radius: var(--radius-md);
    /* Slightly rounded corners */
    font-size: var(--font-size-4xl) !important;
    /* Larger font size */
    font-family: var(--font-heading) !important;
    /* Montserrat font */
    font-weight: 700 !important;
    /* Bold weight (Montserrat bold) */
    text-align: center !important;
    /* Center-aligned */
    margin: 0;
}

/* News hero section: use image only (no red overlay) */
.news-hero-section {
    background: transparent !important;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* おすすめ記事セクション */
.news-recommended-section.modern-section {
    background: #faf3ea !important;
    /* Cream background matching home page */
    padding: var(--space-16) 0;
}

.news-recommended-section .section-header {
    margin-bottom: var(--space-12);
    text-align: center;
}

.news-recommended-section .section-title {
    font-size: var(--font-size-3xl) !important;
    font-weight: var(--font-weight-bold) !important;
    color: #d40f20 !important;
    /* Red text matching home page design */
    margin: 0;
    font-family: "Montserrat", "ui-sans-serif", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", sans-serif !important;
    letter-spacing: 0.05em;
}

.news-hero-section .hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.news-hero-section .hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #ffffff !important;
}

.news-hero-section .hero-title {
    color: #ffffff !important;
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-4);
    font-family: "Montserrat", "ui-sans-serif", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", sans-serif !important;
    letter-spacing: 0.05em;
}

.news-hero-section .hero-description {
    color: #ffffff !important;
    font-size: var(--font-size-lg);
    opacity: 0.95;
}

.service-overview-section,
.features-section,
.process-section,
.cta-section {
    background: linear-gradient(160deg, var(--section-gradient-start), var(--section-gradient-end));
    padding: var(--space-16) 0;
    margin: 0;
}

/* ============================================
   SECTION 5.1: HERO SECTIONS
   Hero section system for pages
   ============================================ */

/* 共通ヒーローセクション */
.hero-section {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--card-gradient-start), var(--card-gradient-end));
    color: var(--text-primary);
    padding: var(--space-20) 0;
}

.hero-section .hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-section .hero-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

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

.hero-section .hero-background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-section .hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    padding: var(--space-8);
    background: var(--card-background);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Home hero: full-viewport video background */
.home-hero {
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: #000;
}

.home-hero.modern-section::before {
    display: none;
}

.home-hero .hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.home-hero .hero-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

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

.home-hero-intro {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.8s ease;
}

.home-hero-intro.is-fade-out,
.home-hero-intro.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.hero-intro-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease;
    background: #000;
}

.hero-intro-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.hero-intro-image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
}

.hero-intro-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* お問い合わせボタンはデフォルトでは非表示（モバイル条件でのみ表示） */
.hero-intro-contact-wrapper {
    display: none;
}

@media (max-width: 768px) {
    .hero-intro-image {
        object-position: center;
    }

    /* keed_mov3.png 上に重ねる お問い合わせボタン（モバイル専用） */
    .hero-intro-contact-wrapper {
        position: absolute;
        left: 50%;
        top: 52%;
        transform: translateX(-50%);
        z-index: 3;
        display: none;
        justify-content: center;
        align-items: center;
        width: auto;
        pointer-events: none;
    }

    .hero-intro-slide--final.is-active .hero-intro-contact-wrapper {
        display: flex;
        pointer-events: auto;
    }

    .hero-intro-contact-btn {
        text-decoration: none;
    }
}

/* Service hero section: left button, right content layout */
.service-hero .hero-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--space-10);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.service-hero .hero-cta {
    display: flex;
    align-items: center;
}

.service-hero .hero-content-text {
    color: #333333 !important;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    text-align: left;
}

.service-hero .hero-title {
    font-size: 48px !important;
    font-weight: var(--font-weight-bold) !important;
    margin-bottom: 0 !important;
    line-height: 1.3 !important;
    letter-spacing: -1px !important;
    color: #333333 !important;
}

.service-hero .hero-subtitle {
    font-size: 20px !important;
    opacity: 0.95;
    line-height: 1.6 !important;
    font-weight: 300 !important;
    color: #444444 !important;
    margin: 0 !important;
}

/* Mobile: Stack hero content vertically */
@media (max-width: 768px) {
    .service-hero .hero-container {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 0 var(--space-6);
    }

    .service-hero .hero-content-text {
        text-align: center;
    }

    .service-hero .hero-title {
        font-size: 32px !important;
    }

    .service-hero .hero-subtitle {
        font-size: 16px !important;
    }
}

.hero-section .hero-title {
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    text-shadow: none !important;
    /* Remove text shadow for sharp, clear text */
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
}

.hero-section .hero-description {
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
    text-shadow: none !important;
    /* Remove text shadow for sharp, clear text */
    font-size: var(--font-size-lg);
    line-height: 1.6;
}

/* モダンヒーローコンテンツ（既存との互換性） */
.hero-content.modern-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    padding: var(--space-8);
    background: var(--card-background);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-content.modern-hero-content .hero-title {
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    text-shadow: none !important;
    /* Remove text shadow for sharp, clear text */
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
}

.hero-content.modern-hero-content .hero-description {
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
    text-shadow: none !important;
    /* Remove text shadow for sharp, clear text */
    font-size: var(--font-size-lg);
    line-height: 1.6;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .hero-section {
        min-height: 50vh;
        padding: var(--space-16) 0;
    }

    .hero-section .hero-content,
    .hero-content.modern-hero-content {
        padding: var(--space-6);
        margin: var(--space-4);
    }

    .hero-section .hero-title,
    .hero-content.modern-hero-content .hero-title {
        font-size: var(--font-size-3xl);
    }

    .hero-section .hero-description,
    .hero-content.modern-hero-content .hero-description {
        font-size: var(--font-size-base);
    }
}

@media (max-width: 480px) {
    .hero-section {
        min-height: 40vh;
        padding: var(--space-12) 0;
    }

    .hero-section .hero-content,
    .hero-content.modern-hero-content {
        padding: var(--space-4);
        margin: var(--space-2);
    }

    .hero-section .hero-title,
    .hero-content.modern-hero-content .hero-title {
        font-size: var(--font-size-2xl);
    }

    .hero-section .hero-description,
    .hero-content.modern-hero-content .hero-description {
        font-size: var(--font-size-sm);
    }
}

/* Consolidated: Card component styles - all card variants share base styles */
.service-card,
.news-card,
.access-info,
.company-info-item,
.card,
.contact-info-card,
.faq-item,
.feature-card,
.process-step,
.cta-card,
.service-overview-card,
/* Removed: old dark-themed news-card__content styles - now using light theme matching home page */
/* News card content styles are now defined below with .news-card__content (line 3119) */

/* Remove text shadows globally for sharp, clear text */
*,
*::before,
*::after {
    text-shadow: none !important;
}

/* Ensure header and footer text is sharp */
.site-header *,
.site-footer *,
header *,
footer * {
    text-shadow: none !important;
    -webkit-font-smoothing: subpixel-antialiased !important;
    -moz-osx-font-smoothing: auto !important;
    text-rendering: optimizeSpeed !important;
}

/* Ensure all text elements are sharp */
p,
span,
div,
a,
li,
td,
th,
label,
input,
textarea,
select,
button {
    text-shadow: none !important;
}

/* カード内のテキストコントラスト改善 */
.card-body,
.card-content,
.service-description,
.feature-description,
.step-description,
.cta-description,
.news-card__excerpt,
.contact-item,
.faq-answer {
    color: var(--card-text-primary) !important;
}

.card-title,
.feature-title,
.step-title,
.cta-title,
.news-card__title {
    color: var(--card-heading-color) !important;
}

.card-header h2,
.card-header h3 {
    color: var(--card-heading-color) !important;
}

/* タイトル共通スタイル */
.section-title,
.card-title,
.faq-title,
.feature-title,
.step-title,
.cta-title {
    color: var(--heading-color);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-8);
    margin-top: 0;
    text-align: center;
}

/* Access section title: black text */
.access-title {
    color: #000000 !important;
    /* Black text color */
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-8);
    margin-top: 0;
    text-align: center;
}

/* Company overview title: black text (same as access-title) */
.company-overview {
    color: #000000 !important;
    /* Black text color - same as access-title */
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-8);
    margin-top: 0;
    text-align: center;
}

/* Company section title: layered text effect - small black text in front, large gray shadow behind */
.company-title {
    /* Container for layered text effect */
    background: transparent !important;
    /* No colored background block */
    display: inline-block;
    /* Allow positioning */
    padding: 0;
    /* Remove padding */
    border-radius: 0;
    /* No rounded corners */
    position: relative;
    /* For absolute positioning of child elements */
    margin-bottom: var(--space-8);
    margin-top: 0;
    text-align: left;
    /* Left-aligned */
    font-family: "Montserrat", "ui-sans-serif", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", sans-serif !important;
    /* Montserrat font */
    font-weight: 700 !important;
    /* Bold weight (Montserrat bold) */
    letter-spacing: 0.05em;
    /* Slight letter spacing for Montserrat */
    line-height: 1;
    /* Tight line height for layering */
}

/* Large gray shadow text behind */
.company-title-shadow {
    display: block;
    color: #b8b8b8 !important;
    /* More visible gray shadow color (darker than #e4e3e2) */
    font-size: var(--font-size-4xl) !important;
    /* Large font size for shadow */
    position: relative;
    z-index: 1;
    /* Behind main text */
}

/* Small black text in front */
.company-title-main {
    display: block;
    color: #000000 !important;
    /* Black text color */
    font-size: calc(var(--font-size-4xl) * 0.85) !important;
    /* Slightly smaller than shadow (85%) */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    /* In front of shadow */
    transform: translate(4px, 4px);
    /* Offset to create shadow effect */
}


/* Company alternating layout: text and image alternating */
.company-content-alternating {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    width: 100%;
}

.company-alternating-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
    width: 100%;
    /* Ensure responsive scaling */
    min-width: 0;
    /* Allow grid items to shrink below their content size */
}

.company-alternating-item-reverse {
    /* Reverse order: text first, image second */
}

.company-alternating-item-reverse .company-alternating-image {
    order: 2;
    /* Image second in reversed item */
}

.company-alternating-item-reverse .company-alternating-text {
    order: 1;
    /* Text first in reversed item */
}

.company-alternating-image {
    width: 100%;
    height: 400px;
    /* Fixed height for consistency */
    overflow: hidden;
    border-radius: var(--radius-lg);
    min-width: 0;
    /* Allow shrinking */
    flex-shrink: 1;
    /* Allow flexible shrinking */
}

.company-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Ensure image scales properly */
    max-width: 100%;
}

.company-alternating-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    min-width: 0;
    /* Allow shrinking */
    flex-shrink: 1;
    /* Allow flexible shrinking */
    /* Ensure text scales with container */
    box-sizing: border-box;
}

.company-alternating-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: #000000 !important;
    /* Black text color */
    margin: 0;
    line-height: 1.3;
}

.company-alternating-description {
    font-size: var(--font-size-base);
    color: #000000 !important;
    /* Black text color */
    line-height: 1.7;
    margin: 0;
}

/* Mobile: Stack alternating items vertically */
@media (max-width: 768px) {

    /* Company title responsive sizing */
    .company-title-shadow {
        font-size: var(--font-size-3xl) !important;
        /* Smaller on mobile */
    }

    .company-title-main {
        font-size: calc(var(--font-size-3xl) * 0.85) !important;
        /* Proportional to shadow */
        transform: translate(3px, 3px);
        /* Smaller offset on mobile */
    }

    .company-alternating-item {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        /* Ensure proper scaling on mobile */
        width: 100%;
        max-width: 100%;
    }

    /* Normal item: image first on mobile */
    .company-alternating-image {
        height: 250px;
        /* Smaller height on mobile */
        order: -1;
        /* Image first on mobile */
        width: 100%;
        max-width: 100%;
    }

    .company-alternating-text {
        order: 0;
        /* Text second on mobile */
        width: 100%;
        max-width: 100%;
        padding: var(--space-4);
    }

    /* Reversed item: モバイルでは通常と同じく「画像 → テキスト」の順に統一 */
    .company-alternating-item-reverse .company-alternating-image {
        order: -1;
    }

    .company-alternating-item-reverse .company-alternating-text {
        order: 0;
    }

    .company-alternating-title {
        font-size: var(--font-size-xl);
        /* Ensure text doesn't overflow */
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .company-alternating-description {
        font-size: var(--font-size-sm);
        /* Ensure text doesn't overflow */
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* Values section title: gradient background with white text, Montserrat font, right-aligned */
.values-section__title {
    /* Gradient background: red → orange → yellow with white text, right-aligned */
    background: linear-gradient(to right,
            #d40f20 0%,
            #e8702c 50%,
            #fec50b 100%) !important;
    /* Gradient background color */
    color: #ffffff !important;
    /* White text color */
    display: inline-block;
    /* Allow background to wrap text */
    padding: var(--space-4) var(--space-8);
    /* Padding around text */
    border-radius: var(--radius-md);
    /* Slightly rounded corners */
    font-size: var(--font-size-4xl) !important;
    /* Larger font size */
    font-family: "Montserrat", "ui-sans-serif", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", sans-serif !important;
    /* Montserrat font */
    font-weight: 700 !important;
    /* Bold weight (Montserrat bold) */
    text-align: right !important;
    /* Right-aligned */
    margin-bottom: var(--space-8);
    margin-top: 0;
    margin-left: auto;
    /* Push to right */
    margin-right: 0;
    /* Ensure right alignment */
    letter-spacing: 0.05em;
    /* Slight letter spacing for Montserrat */
}

/* News section title: yellow background with white text, Montserrat font, right-aligned */
.news-section__title {
    /* Yellow background with white text, right-aligned */
    background: #fec50b !important;
    /* Yellow background color */
    color: #ffffff !important;
    /* White text color */
    display: inline-block;
    /* Allow background to wrap text */
    padding: var(--space-4) var(--space-8);
    /* Padding around text */
    border-radius: var(--radius-md);
    /* Slightly rounded corners */
    font-size: var(--font-size-4xl) !important;
    /* Larger font size */
    font-family: "Montserrat", "ui-sans-serif", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", sans-serif !important;
    /* Montserrat font */
    font-weight: 700 !important;
    /* Bold weight (Montserrat bold) */
    text-align: right !important;
    /* Right-aligned */
    margin-bottom: var(--space-8);
    margin-top: 0;
    margin-left: auto;
    /* Push to right */
    margin-right: 0;
    /* Ensure right alignment */
    letter-spacing: 0.05em;
    /* Slight letter spacing for Montserrat */
}

/* Services section title: red background with cream text, Montserrat font */
.services-section .section-title {
    /* Red background with cream text like reference image */
    background: #d40f20 !important;
    /* Red background color */
    color: #fbf6ef !important;
    /* Cream text color */
    display: inline-block;
    /* Allow background to wrap text */
    padding: var(--space-4) var(--space-8);
    /* Padding around text */
    border-radius: var(--radius-md);
    /* Slightly rounded corners */
    font-size: var(--font-size-4xl) !important;
    /* Larger font size */
    font-family: "Montserrat", "ui-sans-serif", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", sans-serif !important;
    /* Montserrat font */
    font-weight: 700 !important;
    /* Bold weight (Montserrat bold) */
    text-align: center;
    margin-bottom: var(--space-8);
    margin-top: 0;
    letter-spacing: 0.05em;
    /* Slight letter spacing for Montserrat */
    /* Remove gradient text styles */
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
}

/* テキスト共通スタイル */
.service-card p,
.service-description,
.news-card__date,
.news-card__excerpt,
.company-info-value,
.access-address,
.access-tel,
.contact-description,
.company-info-label,
.card-content,
.contact-item,
.faq-answer,
.feature-description,
.step-description,
.cta-description {
    color: var(--text-primary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-4);
}

.company-info-label {
    opacity: 0.9;
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    font-size: var(--font-size-sm);
    letter-spacing: 0.05em;
}

/* ============================================
   共通ボタンシステム（.access-map-btn.modern-btn基準）
   ============================================ */

/* 共通ボタンベース */
.btn-primary,
.btn-secondary,
.btn-service,
.btn-cta,
.access-map-btn,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    min-height: 44px;
    min-width: 44px;
}

/* サイズバリエーション */
.btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    min-height: 36px;
}

.btn-base {
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-base);
    min-height: 44px;
}

.btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--font-size-lg);
    min-height: 52px;
}

.btn-xl {
    padding: var(--space-5) var(--space-10);
    font-size: var(--font-size-xl);
    min-height: 60px;
}

/* プライマリボタン（基準スタイル） */
.btn-primary,
.btn-service,
.btn-cta,
.access-map-btn {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--text-primary);
    box-shadow: 0 8px 25px -8px rgba(255, 107, 53, 0.3);
}

/* キャリアページ専用：関西正社員ナビボタン */
.btn-career-navi {
    background: #60adf7 !important;
    border-color: #60adf7 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 25px -8px rgba(96, 173, 247, 0.4);
}

.btn-career-navi:hover {
    background: #4b96de !important;
    border-color: #4b96de !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -10px rgba(75, 150, 222, 0.5);
}

.btn-primary:hover,
.btn-service:hover,
.btn-cta:hover,
.access-map-btn:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -8px rgba(255, 107, 53, 0.4);
}

/* セカンダリボタン */
.btn-secondary {
    background: transparent;
    border-color: var(--accent-color);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background: var(--accent-color);
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -8px rgba(255, 107, 53, 0.3);
}

/* フォーカス状態 */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-service:focus-visible,
.btn-cta:focus-visible,
.access-map-btn:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--focus-color);
    outline-offset: 3px;
}

/* モダンボタン（既存との互換性） */
.btn.modern-btn,
.btn-primary.modern-btn,
.btn-secondary.modern-btn,
.btn-service.modern-btn,
.btn-cta.modern-btn,
.access-map-btn.modern-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--accent-color);
    color: var(--text-primary);
    text-decoration: none;
    border-radius: var(--radius-lg);
    font-weight: var(--font-weight-semibold);
    transition: all var(--transition-base);
    box-shadow: 0 8px 25px -8px rgba(255, 107, 53, 0.3);
    border: none;
}

.btn.modern-btn:hover,
.btn-primary.modern-btn:hover,
.btn-secondary.modern-btn:hover,
.btn-service.modern-btn:hover,
.btn-cta.modern-btn:hover,
.access-map-btn.modern-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -8px rgba(255, 107, 53, 0.4);
}

/* ボタンアイコン */
.btn-icon,
.map-icon {
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ボタンテキスト */
.btn-text,
.map-text {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.025em;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .btn-sm {
        padding: var(--space-2) var(--space-3);
        font-size: var(--font-size-xs);
        min-height: 32px;
    }

    .btn-base {
        padding: var(--space-2) var(--space-4);
        font-size: var(--font-size-sm);
        min-height: 40px;
    }

    .btn-lg {
        padding: var(--space-3) var(--space-6);
        font-size: var(--font-size-base);
        min-height: 48px;
    }

    .btn-xl {
        padding: var(--space-4) var(--space-8);
        font-size: var(--font-size-lg);
        min-height: 56px;
    }
}

@media (max-width: 480px) {
    .btn-sm {
        padding: var(--space-1) var(--space-2);
        font-size: var(--font-size-xs);
        min-height: 28px;
    }

    .btn-base {
        padding: var(--space-2) var(--space-3);
        font-size: var(--font-size-xs);
        min-height: 36px;
    }

    .btn-lg {
        padding: var(--space-2) var(--space-4);
        font-size: var(--font-size-sm);
        min-height: 44px;
    }

    .btn-xl {
        padding: var(--space-3) var(--space-6);
        font-size: var(--font-size-base);
        min-height: 52px;
    }

    /* 小画面モバイル対応強化 */
    .container {
        padding: 0 var(--space-2);
    }

    .modern-section {
        padding: var(--space-8) 0;
    }

    .modern-hero-content {
        padding: var(--space-6) 0;
    }

    .modern-hero-content .hero-title {
        font-size: var(--font-size-2xl);
    }

    .modern-hero-content .hero-description {
        font-size: var(--font-size-sm);
    }

    .modern-card {
        padding: var(--space-3);
        margin: 0 var(--space-1);
    }

    .modern-card .card-body {
        padding: var(--space-3);
    }

    .modern-card .card-title {
        font-size: var(--font-size-base);
        margin-bottom: var(--space-2);
    }

    .modern-card .card-content {
        font-size: var(--font-size-xs);
        line-height: 1.4;
    }

    .modern-grid-2,
    .modern-grid-3 {
        gap: var(--space-3);
    }

    .modern-form-input {
        padding: var(--space-2) var(--space-3);
        font-size: var(--font-size-sm);
    }

    .modern-form-group {
        margin-bottom: var(--space-3);
    }

    .section-title {
        font-size: var(--font-size-xl);
    }

    .hero-title {
        font-size: var(--font-size-3xl);
    }

    .hero-description {
        font-size: var(--font-size-base);
    }
}

/* ========================================
   SECTION 7: FORM SYSTEM
   Form inputs, labels, validation styles
   ======================================== */

/* Contact form inputs: inner background color and black text */
.contact-form-card .form-input,
.contact-form-card input[type="text"],
.contact-form-card input[type="email"],
.contact-form-card input[type="tel"],
.contact-form-card input[type="password"],
.contact-form-card input[type="number"],
.contact-form-card input[type="date"],
.contact-form-card input[type="time"],
.contact-form-card select,
.contact-form-card textarea,
.contact-form-card .wpcf7-form-control,
.contact-form-card .wpcf7-form-control.wpcf7-text,
.contact-form-card .wpcf7-form-control.wpcf7-email,
.contact-form-card .wpcf7-form-control.wpcf7-tel,
.contact-form-card .wpcf7-form-control.wpcf7-textarea,
.contact-form-card .wpcf7-form-control.wpcf7-select {
    background: #f5f8fa !important;
    /* Inner background color */
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: #000000 !important;
    /* Black text color */
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
}

/* General form inputs (for other pages) */
.form-input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
select,
textarea {
    background: color-mix(in srgb, var(--background-card) 94%, black 6%);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
}

.form-input:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
    border-color: var(--accent-color);
}

/* Contact form labels: black text color */
.contact-form-card .form-label,
.contact-form-card label,
.contact-form-card .wpcf7-form-control-wrap label {
    color: #000000 !important;
    /* Black text color */
}

/* General form labels (for other pages) */
.form-label,
label {
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-2);
    display: block;
    font-size: var(--font-size-sm);
}

.required {
    color: var(--cta-primary);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-primary);
    cursor: pointer;
}

.checkbox-text {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

/* ========================================
   SECTION 6: FOOTER SYSTEM
   Site footer styles and components
   ======================================== */

footer,
.site-footer {
    /* Footer background: unified color */
    background: #FEF6E4 !important;
    color: #75706e !important;
    /* Footer text color for mobile and web */
    padding: var(--space-16) 0 var(--space-8);
    margin-top: auto;
}

/* Ensure footer text is sharp and clear */
.site-footer,
.site-footer *,
footer,
footer * {
    text-shadow: none !important;
    -webkit-font-smoothing: subpixel-antialiased !important;
    -moz-osx-font-smoothing: auto !important;
    text-rendering: optimizeSpeed !important;
    filter: none !important;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}

/* フッターのモバイルレスポンシブ対応 */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        text-align: center;
    }

    .footer-section {
        margin-bottom: var(--space-4);
    }

    .footer-section h3,
    .footer-section h4 {
        font-size: var(--font-size-lg);
        margin-bottom: var(--space-3);
    }

    .footer-description {
        font-size: var(--font-size-sm);
        line-height: 1.5;
    }

    .footer-links {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .footer-links a {
        font-size: var(--font-size-sm);
        padding: var(--space-2) 0;
    }

    .contact-info p {
        font-size: var(--font-size-sm);
        margin-bottom: var(--space-2);
    }
}

@media (max-width: 480px) {
    .site-footer {
        padding: var(--space-12) 0 var(--space-6);
    }

    .footer-content {
        gap: var(--space-4);
    }

    .footer-section h3,
    .footer-section h4 {
        font-size: var(--font-size-base);
    }

    .footer-description {
        font-size: var(--font-size-xs);
    }

    .footer-links a {
        font-size: var(--font-size-xs);
    }

    .contact-info p {
        font-size: var(--font-size-xs);
    }

    .copyright {
        font-size: var(--font-size-xs);
    }
}

.footer-section h3,
.footer-section h4,
.footer-title,
.footer-subtitle {
    color: #000000 !important;
    /* Black text color for footer titles */
    margin-bottom: var(--space-4);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: var(--space-2);
}

.footer-links a {
    color: #75706e !important;
    /* Footer link color */
    transition: color var(--transition-base);
}

.footer-links a:hover {
    color: #75706e !important;
    /* Footer link hover color (same as default) */
    opacity: 0.8;
    /* Slight opacity change on hover for feedback */
}

.footer-bottom {
    border-top: 1px solid var(--border-primary);
    padding-top: var(--space-6);
    text-align: center;
}

.copyright {
    color: #75706e !important;
    /* Footer copyright text color */
    font-size: var(--font-size-sm);
}

/* Footer text color override for all elements */
.site-footer p,
.site-footer span,
.site-footer div,
.site-footer li,
footer p,
footer span,
footer div,
footer li,
.footer-description,
.footer-section p,
.contact-info p {
    color: #75706e !important;
    /* Footer text color for all text elements */
}

/* ========================================
   HOME PAGE SPECIFIC STYLES
   ======================================== */

/* ホームページ専用のレイアウト最適化 */
.modern-hero-content {
    text-align: center;
    padding: var(--space-20) 0;
    position: relative;
    z-index: 2;
}

.modern-hero-content .hero-title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-6);
    line-height: 1.2;
}

.modern-hero-content .hero-description {
    font-size: var(--font-size-lg);
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

/* サービスカードの最適化 */
.service-card.modern-card {
    /* Service card: white background, dark text, soft shadow */
    transition: all var(--transition-base);
    border: none;
    /* Remove border for clean look */
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: #ffffff !important;
    /* White background for service card */
    /* Soft, subtle shadow: light gray, diffused, slightly offset */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    /* Soft shadow like in reference image */
}

.service-card.modern-card:hover {
    transform: translateY(-3px);
    /* Slightly reduced hover lift */
    /* Enhanced but still soft shadow on hover */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    /* Slightly stronger shadow on hover */
}

.service-image {
    position: relative;
    overflow: hidden;
    height: 250px;
}

.service-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.service-card.modern-card:hover .service-img {
    transform: scale(1.05);
}

.service-content {
    padding: var(--space-6);
}

.service-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-4);
    color: #26201f !important;
    /* Dark text color for service card title */
}

.service-description {
    color: #26201f !important;
    /* Dark text color for service card description */
    line-height: 1.6;
    margin-bottom: var(--space-6);
}

/* Service card text color override for text elements only */
.service-card.modern-card p,
.service-card.modern-card span,
.service-card.modern-card div:not(.btn-service),
.service-content p,
.service-content span,
.service-content div:not(.btn-service) {
    color: #26201f !important;
    /* Dark text color for text elements in service card */
}

.btn-service.modern-btn {
    display: inline-flex;
    align-items: center;
    padding: var(--space-3) var(--space-6);
    background: var(--accent-color);
    color: var(--text-primary) !important;
    /* Button text color (not affected by service card text color) */
    text-decoration: none;
    border-radius: var(--radius-lg);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-base);
}

.btn-service.modern-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -8px rgba(255, 107, 53, 0.3);
}

/* ニュースカードの最適化 - サービスカードのデザインを踏襲、よりクリックしたくなるデザイン */
.news-card.modern-card {
    /* News card: white background, dark text, soft shadow (matching service card design) */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Smooth, bouncy transition */
    border: none;
    /* Remove border for clean look */
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: #ffffff !important;
    /* White background for news card */
    /* Soft, subtle shadow: light gray, diffused, slightly offset */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    /* Soft shadow like service card */
    cursor: pointer;
    /* Pointer cursor for better UX */
    position: relative;
    /* For hover effects */
}

.news-card.modern-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(212, 15, 32, 0.05) 0%, rgba(252, 69, 61, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
    pointer-events: none;
}

.news-card.modern-card:hover {
    transform: translateY(-8px) scale(1.02);
    /* More dramatic hover lift and slight scale */
    /* Enhanced but still soft shadow on hover */
    box-shadow: 0 8px 30px rgba(212, 15, 32, 0.15), 0 0 0 1px rgba(252, 69, 61, 0.1);
    /* Red-tinted shadow matching home page */
    border: 1px solid rgba(252, 69, 61, 0.2);
    /* Subtle red border on hover */
}

.news-card.modern-card:hover::before {
    opacity: 1;
    /* Show gradient overlay on hover */
}

.news-card__link {
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
    z-index: 2;
    /* Above hover overlay */
}

.news-card__image-wrapper {
    position: relative;
    overflow: hidden;
    height: 200px;
}

.news-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.news-card.modern-card:hover .news-card__image {
    transform: scale(1.1);
    /* More dramatic zoom on hover */
}

.news-card__content {
    padding: var(--space-5);
    background: #faf3ea !important;
    /* Cream background color as requested */
    border: 1px solid #faf3ed !important;
    /* Border color changed to #faf3ed for news section */
    border-radius: var(--radius-lg);
}

.news-card__date {
    color: #26201f !important;
    /* Dark text color matching service card */
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-2);
}

.news-card__title {
    color: #26201f !important;
    /* Dark text color matching service card */
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
}

/* News card text color override for text elements only */
.news-card.modern-card p,
.news-card.modern-card span,
.news-card.modern-card div,
.news-card__content p,
.news-card__content span,
.news-card__content div,
.news-card__excerpt {
    color: #26201f !important;
    /* Dark text color for text elements in news card */
}

/* ========================================
   VALUES SECTION STYLES
   ======================================== */

/* Values grid: 3 columns on top row, 2 on bottom row */
.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Adjust last two cards to center them in bottom row */
.values-grid .value-card.modern-card:nth-child(4) {
    grid-column: 2 / 3;
    /* Start at column 2, span 1 column */
}

.values-grid .value-card.modern-card:nth-child(5) {
    grid-column: 3 / 4;
    /* Start at column 3, span 1 column */
}

/* Mobile: Values grid single column */
@media (max-width: 768px) {
    .values-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .values-grid .value-card.modern-card:nth-child(4),
    .values-grid .value-card.modern-card:nth-child(5) {
        grid-column: 1;
    }
}

/* Career values sections (home + /service/career) */
.career-values-section {
    background: #ffffff !important;
    color: #0f172a !important;
}

.career-values-section .section-header .section-title,
.career-values-section .section-header .section-subtitle,
.career-values-section .section-header .section-label {
    color: inherit !important;
}

.career-values-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.career-values-item {
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-md);
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.08);
}

.career-values-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
}

.career-values-number {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.1em;
    color: #1f2937;
}

.career-values-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: #15233b !important;
}

.career-values-description {
    font-size: var(--font-size-base);
    line-height: 1.7;
    margin: 0;
    color: #4b5563;
}

@media (max-width: 768px) {
    .career-values-item {
        padding: var(--space-4);
    }
}

/* ============================================
   Career VALUES sections (home + /service/career)
   ============================================ */

.career-values-section {
    background: #ffffff !important;
    color: #111827 !important;
}

.career-values-section .section-header .section-title,
.career-values-section .section-header .section-subtitle,
.career-values-section .section-header .section-label {
    color: inherit !important;
}

.career-values-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.career-values-item {
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-md);
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.08);
}

/* Value card: white background, dark text, soft shadow (matching news card design) */
.value-card.modern-card {
    transition: all var(--transition-base);
    border: none;
    /* Remove border for clean look */
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: #ffffff !important;
    /* White background for value card */
    /* Soft, subtle shadow: light gray, diffused, slightly offset */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    /* Soft shadow like news card */
    display: flex;
    flex-direction: column;
    position: relative;
    aspect-ratio: 1 / 1.2;
    /* Maintain card proportions */
}

.value-card.modern-card:hover {
    transform: translateY(-3px);
    /* Slightly reduced hover lift */
    /* Enhanced but still soft shadow on hover */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    /* Slightly stronger shadow on hover */
}

/* Value card number: large, bold, positioned in lower-left of illustration area */
.value-card__number {
    font-size: 2.2rem;
    /* Smaller, still strong number */
    font-weight: var(--font-weight-bold);
    color: #26201f !important;
    /* Dark text color */
    line-height: 1;
}

/* Value card illustration area */
.value-card__illustration {
    width: 100%;
    height: 200px;
    /* Fixed height for illustration */
    background: transparent;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    /* Ensure image doesn't overflow */
}

/* Value card image */
.value-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Cover the entire area while maintaining aspect ratio */
    object-position: center;
    /* Center the image */
    display: block;
}

/* Value card content area */
.value-card__content {
    padding: var(--space-6);
    background: #f4f4f4 !important;
    /* Light gray background matching news card content */
    flex: 1;
    display: flex;
    flex-direction: column;
}

.value-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.value-card__titles {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.value-card__titles .value-card__english-title,
.value-card__titles .value-card__japanese-title {
    text-align: right;
}

/* Value card English title */
.value-card__english-title {
    color: #26201f !important;
    /* Dark text color */
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    margin-bottom: var(--space-2);
    text-align: right;
}

/* Value card Japanese title */
.value-card__japanese-title {
    color: #26201f !important;
    /* Dark text color */
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-3);
    line-height: 1.4;
}

/* Value card description */
.value-card__description {
    color: #26201f !important;
    /* Dark text color */
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    line-height: 1.6;
    margin-top: auto;
    /* Push to bottom */
}

/* 会社情報カードの最適化 - サービスカードのデザインを踏襲 */
/* Company info container: vertical layout with no gaps */
.company-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    /* No gap between items */
    width: 100%;
}

.company-info-item.modern-card {
    /* Company info item: white background, dark text (matching service card design) */
    padding: var(--space-6);
    border: none;
    /* Remove border for clean look */
    border-radius: 0;
    /* Remove border radius for seamless connection */
    background: #ffffff !important;
    /* White background for company info item */
    /* Soft, subtle shadow: light gray, diffused, slightly offset */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    /* Soft shadow like service card */
    transition: all var(--transition-base);
    margin: 0 !important;
    /* Remove all margins */
    width: 100%;
}

/* First and last items: rounded corners only on top/bottom */
.company-info-item.modern-card:first-child {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
    /* Rounded top corners */
}

.company-info-item.modern-card:last-child {
    border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
    /* Rounded bottom corners */
    margin-bottom: 0 !important;
}

.company-info-item.modern-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    /* Slightly stronger shadow on hover */
}

.company-info-label {
    color: #26201f !important;
    /* Dark text color matching service card */
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-2);
}

.company-info-value {
    color: #26201f !important;
    /* Dark text color matching service card */
    font-size: var(--font-size-base);
    line-height: 1.5;
}

/* ========================================
   Company overview redesign
   ======================================== */
.company-overview-wrap {
    background: #f7f0e9;
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: 0 14px 36px -22px rgba(88, 64, 43, 0.32);
    padding: clamp(24px, 4vw, 48px);
}

.company-overview-heading {
    text-align: center;
    font-size: clamp(28px, 5vw, 38px);
    font-family: "Montserrat", "Noto Sans JP", sans-serif;
    letter-spacing: 0.18em;
    color: #000000 !important;
    margin-bottom: var(--space-4);
}

.company-overview-lead {
    text-align: center;
    color: #000000;
    font-size: var(--font-size-base);
    line-height: 1.8;
    max-width: 680px;
    margin: 0 auto var(--space-8);
}

.company-overview-table {
    width: 100%;
    border-collapse: collapse;
    /* Collapsed borders for clean lines */
    background: #ffffff;
    /* White background */
    border-radius: 0;
    table-layout: fixed;
}

.company-overview-table th,
.company-overview-table td {
    padding: var(--space-6) var(--space-4);
    /* More padding */
    vertical-align: middle;
    border-bottom: 1px solid #E0E0E0;
    /* Thin grey border */
}

.company-overview-table th {
    width: 160px;
    /* Fixed width for labels */
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    /* Bold labels */
    letter-spacing: 0.05em;
    color: var(--text-primary);
    background: transparent;
    /* No background */
    text-align: left;
}

.company-overview-table td {
    color: var(--text-primary);
    font-size: var(--font-size-base);
    line-height: 1.8;
    background: transparent;
    /* No background */
    font-weight: var(--font-weight-medium);
}

.company-overview-table tr:last-child th,
.company-overview-table tr:last-child td {
    border-bottom: 1px solid #E0E0E0;
    /* Keep border for consistency or remove if desired */
}

.company-overview-link {
    color: #000000;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    word-break: break-all;
}

.company-overview-link:hover,
.company-overview-link:focus-visible {
    text-decoration: underline;
}

@media (max-width: 767px) {

    /* Remove box container style on mobile & ensure full width */
    .company-overview-wrap {
        padding: 0 var(--space-5);
        /* approx 20px padding */
        background: #ffffff;
        border: none;
        box-shadow: none;
        border-radius: 0;
    }

    .company-overview-table,
    .company-overview-table tbody,
    .company-overview-table tr,
    .company-overview-table th,
    .company-overview-table td {
        display: block;
        width: 100%;
    }

    /* List Item Separation (Vertical Rhythm) */
    .company-overview-table tr {
        border-bottom: none;
        /* Remove borders */
        margin-bottom: 40px;
        /* Increased grouping whitespace */
        padding: 0;
    }

    .company-overview-table tr:first-child {
        padding-top: 24px;
        /* Space above first item */
    }

    .company-overview-table tr:last-child {
        margin-bottom: 0;
        padding-bottom: 40px;
        /* Space below last item */
    }

    /* Override desktop specificity for last item borders */
    .company-overview-table tr:last-child th,
    .company-overview-table tr:last-child td {
        border-bottom: none;
    }

    /* Label Styling: Weak/Small */
    .company-overview-table th {
        border: none;
        width: 100%;
        color: #666666;
        /* Light gray */
        font-weight: 700;
        /* Bold */
        padding: 0 0 8px 0;
        /* Increased space below label */
        font-size: 13px;
        /* Small font size */
    }

    /* Value Styling: Strong/Large */
    .company-overview-table td {
        border: none;
        width: 100%;
        color: #333333;
        /* Dark gray */
        font-weight: 700;
        /* Bold */
        padding: 0;
        font-size: 16px;
        /* Large font size */
        line-height: 1.5;
    }

    /* Link Styling: Inherit from td */
    .company-overview-link {
        font-weight: inherit;
        color: inherit;
    }
}

/* Services List Styling */
.company-services-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.company-services-list li {
    position: relative;
    padding-left: 1em;
    margin-bottom: 0.25em;
    font-weight: inherit;
    /* Inherit bold from td */
}

.company-services-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    color: inherit;
}

/* Restore horizontal layout for Desktop to match "Mobile Only" request */
@media (min-width: 768px) {
    .company-services-list {
        display: flex;
        flex-wrap: wrap;
        row-gap: 0.25em;
    }

    .company-services-list li {
        padding-left: 0;
        margin-bottom: 0;
        position: static;
    }

    .company-services-list li::before {
        content: none;
    }

    .company-services-list li:not(:last-child)::after {
        content: "/";
        margin: 0 0.5em;
        color: var(--text-secondary);
        /* Use lighter color for separator */
    }
}

/* アクセスセクションの最適化 */
/* access-info modern-card removed - no longer used */
.access-info.modern-card {
    display: none !important;
    /* Hide access-info card */
}

/* 後方互換性のためのエイリアス（共通ボタンシステムに統一済み） */

/* Access map: full width, no border, no shadow */
.access-section .container {
    max-width: 100% !important;
    /* Allow full width within section */
    padding: 0 var(--space-4);
    /* Small horizontal padding only */
}

.access-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.access-map.modern-card {
    /* Full width map card with no border */
    border: none !important;
    /* Remove border */
    border-radius: 0 !important;
    /* Remove border radius */
    overflow: hidden;
    background: transparent !important;
    /* Remove background gradient */
    box-shadow: none !important;
    /* Remove shadow */
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.access-map iframe {
    width: 100%;
    height: 400px;
    border: none;
    border-radius: 0;
    /* Remove border radius to match card */
    display: block;
}

/* Mobile: Adjust map height */
@media (max-width: 768px) {
    .access-map iframe {
        height: 300px;
    }
}

/* お問い合わせセクションの最適化 */
.contact-content.modern-card {
    text-align: center;
    padding: var(--space-8);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    background: linear-gradient(145deg, var(--timeline-gradient-start), var(--timeline-gradient-end));
    box-shadow:
        0 10px 30px -10px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    max-width: 800px;
    margin: 0 auto;
}

.contact-description {
    color: var(--card-text-primary);
    font-size: var(--font-size-lg);
    line-height: 1.6;
    margin-bottom: var(--space-8);
}

/* 後方互換性のためのエイリアス（共通ボタンシステムに統一済み） */

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .modern-hero-content .hero-title {
        font-size: var(--font-size-3xl);
    }

    .modern-hero-content .hero-description {
        font-size: var(--font-size-base);
    }

    .services-grid.modern-grid-2 {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .news-grid.modern-grid-3 {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .company-info.modern-grid-2 {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    /* Access content: single column layout (access-info removed) */
    .access-content {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 1024px) {
    .news-grid.modern-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .company-info.modern-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   CAREER PAGE SPECIFIC STYLES
   ======================================== */

/* 人材紹介事業ページ専用のレイアウト最適化（後方互換性のため保持） */

/* 特徴カードの最適化 */
.feature-card.modern-card {
    transition: all var(--transition-base);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: linear-gradient(145deg, var(--timeline-gradient-start), var(--timeline-gradient-end));
    box-shadow:
        0 10px 30px -10px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05);
}

.feature-card.modern-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 20px 40px -10px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: var(--hover-overlay);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-4);
}

.feature-icon .icon {
    font-size: var(--font-size-2xl);
}

.feature-title {
    color: var(--card-heading-color);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-4);
    line-height: 1.3;
}

.feature-description {
    color: var(--card-text-primary);
    line-height: 1.6;
}

/* プロセステップの最適化 */
.modern-timeline {
    position: relative;
    padding: var(--space-8) 0;
}

.modern-timeline::before {
    content: '';
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--accent-color), var(--gradient-accent-overlay));
}

.modern-timeline-item {
    position: relative;
    margin-bottom: var(--space-12);
    padding-left: var(--space-16);
}

.modern-timeline-item:last-child {
    margin-bottom: 0;
}

.modern-timeline-item .step-number {
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    box-shadow:
        0 8px 25px -8px var(--shadow-hover),
        0 0 0 4px var(--shadow-hover-light);
    z-index: 2;
}

.modern-timeline-item .step-content {
    background: linear-gradient(145deg, var(--timeline-gradient-start), var(--timeline-gradient-end));
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow:
        0 8px 25px -8px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    transition: all var(--transition-base);
}

.modern-timeline-item:hover .step-content {
    transform: translateX(5px);
    box-shadow:
        0 12px 30px -8px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

.step-title {
    color: var(--card-heading-color);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-3);
}

.step-description {
    color: var(--card-text-primary);
    line-height: 1.6;
}

/* CTAセクションの最適化 */
.cta-card.modern-card {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-8);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    background: linear-gradient(145deg, var(--timeline-gradient-start), var(--timeline-gradient-end));
    box-shadow:
        0 10px 30px -10px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05);
}

.cta-title {
    color: var(--card-heading-color);
    margin-bottom: var(--space-4);
}

.cta-description {
    color: var(--card-text-primary);
    font-size: var(--font-size-lg);
    line-height: 1.6;
    margin-bottom: var(--space-8);
}

.cta-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
}

/* 後方互換性のためのエイリアス（共通ボタンシステムに統一済み） */

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .career-hero .hero-content {
        padding: var(--space-16) 0;
    }

    /* 特徴セクションのモバイル最適化 */
    .features-grid.modern-grid-2 {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .feature-card {
        margin-bottom: var(--space-4);
    }

    .feature-card .card-body {
        padding: var(--space-4);
    }

    .feature-icon {
        margin-bottom: var(--space-3);
    }

    .feature-title {
        font-size: var(--font-size-lg);
        margin-bottom: var(--space-2);
    }

    .feature-description {
        font-size: var(--font-size-sm);
        line-height: 1.5;
    }

    /* プロセスセクションのモバイル最適化 */
    .modern-timeline::before {
        left: 20px;
    }

    .modern-timeline-item {
        padding-left: var(--space-12);
        margin-bottom: var(--space-6);
    }

    .modern-timeline-item .step-number {
        width: 40px;
        height: 40px;
        font-size: var(--font-size-lg);
    }

    .modern-timeline-item .step-content {
        padding: var(--space-4);
    }

    .step-title {
        font-size: var(--font-size-lg);
        margin-bottom: var(--space-2);
    }

    .step-description {
        font-size: var(--font-size-sm);
        line-height: 1.5;
    }

    /* シンプルフローのモバイル最適化 */
    .process-simple-flow {
        gap: var(--space-4);
    }

    .process-item {
        flex-direction: column;
        text-align: center;
        padding: var(--space-4);
        gap: var(--space-4);
    }

    .process-item .step-number {
        width: 50px;
        height: 50px;
        margin: 0 auto;
        font-size: var(--font-size-base);
    }

    .process-item .step-title {
        font-size: var(--font-size-lg);
        margin-bottom: var(--space-2);
    }

    .process-item .step-description {
        font-size: var(--font-size-sm);
        line-height: 1.5;
    }

    /* CTAセクションのモバイル最適化 */
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn.modern-btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    .cta-title {
        font-size: var(--font-size-2xl);
        margin-bottom: var(--space-4);
    }

    .cta-description {
        font-size: var(--font-size-sm);
        margin-bottom: var(--space-6);
    }
}

@media (max-width: 1024px) {
    .features-grid.modern-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   COMPANY PAGE SPECIFIC STYLES
   ======================================== */

/* 会社情報表の最適化 */
.company-info-table-container {
    padding: var(--space-8);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    background: linear-gradient(145deg, var(--timeline-gradient-start), var(--timeline-gradient-end));
    box-shadow:
        0 10px 30px -10px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.company-info-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.table-row {
    border-bottom: 1px solid var(--border-primary);
    transition: background-color var(--transition-base);
}

.table-row:last-child {
    border-bottom: none;
}

.table-row:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.table-label {
    padding: var(--space-4) var(--space-6);
    width: 30%;
    min-width: 120px;
    font-weight: var(--font-weight-semibold);
    color: var(--card-heading-color);
    font-size: var(--font-size-base);
    vertical-align: top;
    border-right: 1px solid var(--border-primary);
    background: rgba(255, 255, 255, 0.03);
}

.table-value {
    padding: var(--space-4) var(--space-6);
    color: var(--card-text-primary);
    font-size: var(--font-size-base);
    line-height: 1.6;
    vertical-align: top;
}

/* 表のレスポンシブ対応 */
@media (max-width: 768px) {
    .company-info-table-container {
        padding: var(--space-4);
        overflow-x: auto;
    }

    .company-info-table {
        min-width: 600px;
    }

    .table-label {
        width: 35%;
        min-width: 100px;
        padding: var(--space-3) var(--space-4);
        font-size: var(--font-size-sm);
    }

    .table-value {
        padding: var(--space-3) var(--space-4);
        font-size: var(--font-size-sm);
    }
}

@media (max-width: 480px) {
    .company-info-table-container {
        padding: var(--space-3);
    }

    .table-label {
        width: 40%;
        min-width: 80px;
        padding: var(--space-2) var(--space-3);
        font-size: var(--font-size-xs);
    }

    .table-value {
        padding: var(--space-2) var(--space-3);
        font-size: var(--font-size-xs);
    }
}

/* 表のアクセシビリティ向上 */
.table-row:focus-within {
    background-color: rgba(255, 255, 255, 0.08);
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
}

.table-label:focus,
.table-value:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* 表の印刷対応 */
@media print {
    .company-info-table-container {
        box-shadow: none;
        border: 1px solid #000;
        background: #fff;
    }

    .table-label {
        background: #f5f5f5;
        color: #000;
    }

    .table-value {
        color: #000;
    }

    .table-row:hover {
        background-color: transparent;
    }
}

/* ========================================
   RECRUIT PAGE SPECIFIC STYLES
   ======================================== */

/* 求人ページ専用のレイアウト最適化 */
.recruit-hero {
    position: relative;
    overflow: hidden;
}

.recruit-hero .hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.recruit-hero .hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: var(--space-20) 0;
}

/* 求人検索フォームの最適化 */
.job-search-form {
    margin-bottom: var(--space-8);
    padding: 0;
    /* Remove padding */
    background: transparent !important;
    /* Remove background */
    border-radius: 0;
    /* Remove border radius */
    border: none !important;
    /* Remove outer black border */
}

.search-input-group {
    display: flex;
    gap: var(--space-4);
    max-width: 600px;
    margin: 0 auto;
}

.search-input {
    flex: 1;
    padding: var(--space-4);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    font-size: var(--font-size-base);
}

.search-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--shadow-hover-light);
}

.search-button {
    padding: var(--space-4) var(--space-6);
    background: var(--accent-color);
    color: var(--text-primary);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.search-button:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

/* Jobs section: cream background matching home page design */
.jobs-section {
    background: #fafbfc !important;
    /* Light gray background matching home page */
    padding: var(--space-16) 0;
    margin: 0;
}

.jobs-section .section-title {
    color: #1a1a1a !important;
    /* Dark text color matching home page */
    font-size: 36px !important;
    font-weight: var(--font-weight-bold) !important;
    margin-bottom: var(--space-6);
    letter-spacing: -0.5px !important;
}

/* Job search form styling */
.job-search-form {
    margin-bottom: var(--space-8);
    padding: 0;
    /* Remove padding */
    background: transparent !important;
    /* Remove background */
    border-radius: 0;
    /* Remove border radius */
    border: none !important;
    /* Remove outer black border */
}

.search-form {
    display: flex;
    gap: var(--space-4);
    max-width: 600px;
    margin: 0 auto;
}

.search-input {
    flex: 1;
    padding: var(--space-4) var(--space-6);
    border: 1px solid #e8e8e8;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    background: #ffffff !important;
    color: #26201f !important;
}

.search-input:focus {
    outline: none;
    border-color: #d40f20 !important;
    /* Red border matching home page */
    box-shadow: 0 0 0 3px rgba(212, 15, 32, 0.1);
}

.search-button {
    padding: var(--space-4) var(--space-8);
    background: #fc453d !important;
    /* Red background matching home page */
    color: #ffffff !important;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-heading) !important;
}

.search-button:hover {
    background: #d40f20 !important;
    /* Darker red on hover */
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 15, 32, 0.3);
}

/* Jobs list - vertical stacked layout */
.jobs-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: var(--space-8);
}

/* 求人カードの最適化 - ホーム画面のデザインに合わせて更新 */
.job-card {
    transition: all var(--transition-base);
    border: 1px solid #e8e8e8;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: #ffffff !important;
    /* White background matching home page */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    /* Slightly stronger base shadow for better visibility */
}

.job-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    /* Enhanced shadow on hover */
}

/* 職種一覧グリッドのマージン調整 */
.jobs-grid {
    margin-top: var(--space-6);
}

.job-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 20px 40px -10px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

.job-card__thumbnail {
    position: relative;
    overflow: hidden;
    height: 200px;
}

.job-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.job-card:hover .job-card__image {
    transform: scale(1.05);
}

.job-card__content {
    padding: var(--space-6);
    background: #ffffff !important;
    /* White background */
}

.job-card__title {
    margin-bottom: var(--space-3);
    color: #1a1a1a !important;
    /* Dark text color matching home page */
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
}

.job-card__meta {
    display: none !important;
    /* Hide date */
}

/* Job card description: display job description instead of date - single line */
.job-card__description {
    color: #666 !important;
    /* Gray text color */
    font-size: var(--font-size-base);
    line-height: 1.5;
    margin-bottom: var(--space-4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Limit to single line */
    max-width: 100%;
}

.job-card__link {
    display: inline-block;
    padding: var(--space-3) var(--space-6);
    background: #ff8c5a !important;
    /* Orange background color */
    color: #000000 !important;
    text-decoration: none;
    border-radius: var(--radius-lg);
    font-weight: var(--font-weight-semibold);
    transition: all var(--transition-base);
}

.job-card__link:hover {
    background: #ff7740 !important;
    /* Darker orange on hover */
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 140, 90, 0.3);
}

/* 応募セクションの最適化 - ホーム画面のデザインに合わせて更新 */
.application-section {
    background: #faf3ea !important;
    /* Cream background matching home page */
    padding: var(--space-16) 0;
    margin: 0;
    text-align: center;
}

.application-title {
    margin-bottom: var(--space-4);
    color: #1a1a1a !important;
    /* Dark text color matching home page */
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
}

.application-description {
    margin-bottom: var(--space-8);
    color: #666 !important;
    /* Gray text color */
    font-size: var(--font-size-lg);
}

.application-buttons {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

.application-buttons .btn {
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-lg);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: all var(--transition-base);
}

.application-buttons .btn-primary {
    background: #fc453d !important;
    /* Red background matching home page */
    color: #ffffff !important;
}

.application-buttons .btn-primary:hover {
    background: #d40f20 !important;
    /* Darker red on hover */
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 15, 32, 0.3);
}

.application-buttons .btn-secondary {
    background: #ffffff !important;
    color: #26201f !important;
    border: 1px solid #e8e8e8;
}

.application-buttons .btn-secondary:hover {
    background: #f4f4f4 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 関連求人セクション */
.related-jobs-section {
    background: var(--background-surface);
    border-top: 1px solid var(--border-primary);
}

/* ========================================
   求人詳細ページ（single-recruit.php）のモダンUI
   ======================================== */

/* メインコンテナ */
.single-recruit-main {
    background: var(--background-primary);
}

/* ヒーローセクション（求人詳細用） */
.single-recruit-hero {
    background: linear-gradient(135deg, #d40f20 0%, #fc453d 100%) !important;
    /* Red gradient fallback */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    padding: var(--space-20) 0 var(--space-16) 0;
    position: relative;
    overflow: hidden;
}

/* Background image overlay */
.single-recruit-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(212, 15, 32, 0.7) 0%, rgba(252, 69, 61, 0.7) 100%);
    /* Overlay for readability */
    z-index: 1;
}

/* Optional: Grid pattern overlay */
.single-recruit-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.3;
    z-index: 1;
}

.single-recruit-hero .container {
    position: relative;
    z-index: 2;
    /* Above overlay */
}

.single-recruit-hero .hero-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-8);
    background: var(--card-background);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.single-recruit-hero .hero-title {
    color: #ffffff !important;
    /* White text on red gradient */
    margin-bottom: var(--space-6);
    text-shadow: none !important;
    /* Remove text shadow for sharp, clear text */
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    font-family: "Montserrat", "ui-sans-serif", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", sans-serif !important;
    letter-spacing: 0.05em;
}

.single-recruit-hero .hero-description {
    color: #ffffff !important;
    /* White text on red gradient */
    font-size: var(--font-size-lg);
    line-height: 1.6;
    margin: 0;
    opacity: 0.95;
}

/* （旧）どんな仕事内容かセクションのスタイルは未使用のため削除 */

/* 求人詳細セクション */
.single-recruit-detail {
    padding: var(--space-16) 0;
    background: #ffffff !important;
}

.single-recruit-detail .section-header {
    margin-bottom: var(--space-12);
    text-align: center;
    /* Remove any top border or line */
    border-top: none !important;
    padding-top: 0 !important;
}

/* Remove ::before if exists (upper line on section-header) */
.single-recruit-detail .section-header::before {
    display: none !important;
    content: none !important;
}

.single-recruit-detail .section-title {
    font-size: var(--font-size-3xl) !important;
    font-weight: var(--font-weight-bold) !important;
    color: #333333 !important;
    margin: 0;
    position: relative;
    display: inline-block;
    font-family: var(--font-heading) !important;
    letter-spacing: 0.05em;
    /* Remove any top border or line */
    border-top: none !important;
    padding-top: 0 !important;
}

/* Remove ::before if exists (upper line) */
.single-recruit-detail .section-title::before {
    display: none !important;
    content: none !important;
}

/* Remove ::after line from section-title (causing upper line issue) */
.single-recruit-detail .section-title::after {
    display: none !important;
    content: none !important;
}

.single-recruit-detail .job-detail-content {
    max-width: 960px;
    margin: 0 auto;
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
    color: #000000 !important;
    /* Strong black text for high contrast */
}

.single-recruit-detail .job-detail-content p,
.single-recruit-detail .job-detail-content li,
.single-recruit-detail .job-detail-content span,
.single-recruit-detail .job-detail-content div,
.single-recruit-detail .job-detail-content em,
.single-recruit-detail .job-detail-content strong,
.single-recruit-detail .job-detail-content a,
.single-recruit-detail .job-detail-content td,
.single-recruit-detail .job-detail-content th {
    color: #000000 !important;
    /* Strong black text for all inline elements */
}

/* wp-block-group: unified text color to #000000 */
.single-recruit-detail .wp-block-group,
.single-recruit-detail .wp-block-group *,
.single-recruit-detail .wp-block-group p,
.single-recruit-detail .wp-block-group span,
.single-recruit-detail .wp-block-group div,
.single-recruit-detail .wp-block-group li,
.single-recruit-detail .wp-block-group h1,
.single-recruit-detail .wp-block-group h2,
.single-recruit-detail .wp-block-group h3,
.single-recruit-detail .wp-block-group h4,
.single-recruit-detail .wp-block-group h5,
.single-recruit-detail .wp-block-group h6,
.single-recruit-detail .wp-block-group a:not(.btn):not(.btn-primary):not(.btn-secondary),
.job-detail-content .wp-block-group,
.job-detail-content .wp-block-group *,
.job-detail-content .wp-block-group p,
.job-detail-content .wp-block-group span,
.job-detail-content .wp-block-group div,
.job-detail-content .wp-block-group li,
.job-detail-content .wp-block-group h1,
.job-detail-content .wp-block-group h2,
.job-detail-content .wp-block-group h3,
.job-detail-content .wp-block-group h4,
.job-detail-content .wp-block-group h5,
.job-detail-content .wp-block-group h6 {
    color: #000000 !important;
    /* Unified text color to black */
}

.single-recruit-detail .wp-block-group {
    margin: var(--space-8) 0;
    padding: var(--space-2) 0 var(--space-6);
    border-top: 1px solid #9ca3af;
}

.single-recruit-detail .wp-block-group:first-child {
    border-top: none;
    padding-top: 0;
}

.single-recruit-detail .wp-block-group h1,
.single-recruit-detail .wp-block-group h2,
.single-recruit-detail .wp-block-group h3,
.single-recruit-detail .wp-block-group h4,
.single-recruit-detail .wp-block-group h5,
.single-recruit-detail .wp-block-group h6,
.single-recruit-detail h1,
.single-recruit-detail h2,
.single-recruit-detail h3,
.single-recruit-detail h4,
.single-recruit-detail h5,
.single-recruit-detail h6 {
    font-weight: 700;
    margin-bottom: var(--space-3);
}

/* Ensure headings inside求人詳細セクション are solid black (override global heading color) */
.single-recruit-detail :is(h1, h2, h3, h4, h5, h6) {
    color: #000000 !important;
}

.single-recruit-detail :is(h1, h2, h3, h4, h5, h6) {
    border-bottom: 1px solid #9ca3af;
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-3);
}

.single-recruit-detail .section-header .section-title {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: var(--space-6);
}

/* シンプルな表形式レイアウト（採用情報） */
.single-recruit-detail .job-detail-content table,
.single-recruit-detail .job-detail-content .wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: var(--font-size-base);
    border-top: 1px solid #9ca3af;
    /* Visible top border */
    border-bottom: 1px solid #9ca3af;
    /* Visible bottom border */
}

.single-recruit-detail .job-detail-content th,
.single-recruit-detail .job-detail-content td,
.single-recruit-detail .job-detail-content .wp-block-table th,
.single-recruit-detail .job-detail-content .wp-block-table td {
    padding: 0.9rem 0;
    border-top: 1px solid #d1d5db;
    /* Row separators */
    vertical-align: top;
}

.single-recruit-detail .job-detail-content th,
.single-recruit-detail .job-detail-content .wp-block-table th {
    width: 24%;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    padding-right: 1.5rem;
}

.single-recruit-detail .job-detail-content td,
.single-recruit-detail .job-detail-content .wp-block-table td {
    padding-left: 0;
    word-break: break-word;
}

/* 選考の流れセクション */
.selection-process-section {
    background: #faf3ea !important;
    /* Cream background matching home page */
    padding: var(--space-16) 0;
    margin: 0;
}

.selection-process-content.modern-card {
    background: #ffffff !important;
    /* White card background */
    border-radius: var(--radius-xl);
    padding: var(--space-10);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #faf3ed !important;
    /* Light border matching home page */
    max-width: 1200px;
    margin: 0 auto;
}

.selection-process-header {
    margin-bottom: var(--space-10);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid #e8e8e8;
}

.selection-process-title {
    font-size: var(--font-size-3xl) !important;
    font-weight: var(--font-weight-bold) !important;
    color: #26201f !important;
    /* Dark text color matching home page */
    margin: 0;
    position: relative;
    display: inline-block;
    font-family: var(--font-heading) !important;
    letter-spacing: 0.05em;
}

/* Remove ::after line from selection-process-title (causing upper line issue) */
.selection-process-title::after {
    display: none !important;
    content: none !important;
}

.selection-process-steps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-10);
    flex-wrap: wrap;
}

.selection-step {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-6);
}

.step-icon {
    width: 96px;
    height: 96px;
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.selection-step-image {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.selection-process-steps .selection-step .step-icon svg {
    display: none;
}

.selection-process-steps .selection-step:nth-of-type(1) .step-icon {
    background-image: url("images/履歴書.png");
}

.selection-process-steps .selection-step:nth-of-type(3) .step-icon {
    background-image: url("images/オンライン面談.png");
}

.selection-process-steps .selection-step:nth-of-type(5) .step-icon {
    background-image: url("images/最終面談.png");
}

.selection-process-steps .selection-step:nth-of-type(7) .step-icon {
    background-image: url("images/内定.png");
}

.step-title {
    font-size: var(--font-size-lg) !important;
    font-weight: var(--font-weight-bold) !important;
    color: #26201f !important;
    /* Dark text color */
    margin: 0 0 var(--space-3) 0;
    line-height: 1.3;
}

.step-description {
    font-size: var(--font-size-sm) !important;
    color: #666 !important;
    /* Gray text color */
    line-height: 1.7;
    margin: 0;
}

.selection-step-arrow {
    font-size: var(--font-size-3xl);
    color: #d40f20 !important;
    /* Red arrow matching home page */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-2);
    flex-shrink: 0;
    margin-top: var(--space-10);
    /* Align with step content */
}

.selection-process-disclaimer {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid #e8e8e8;
}

.selection-process-disclaimer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.selection-process-disclaimer li {
    font-size: var(--font-size-sm) !important;
    color: #666 !important;
    /* Gray text color */
    line-height: 1.8;
    margin-bottom: var(--space-2);
    padding-left: var(--space-4);
    position: relative;
}

.selection-process-disclaimer li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 4px;
    height: 4px;
    background: #d40f20;
    /* Red bullet matching home page */
    border-radius: 50%;
}

/* Mobile: Selection process section responsive */
@media (max-width: 768px) {
    .selection-process-content.modern-card {
        padding: var(--space-6);
    }

    .selection-process-steps {
        flex-direction: column;
        gap: var(--space-6);
        align-items: center;
        /* Center all items */
    }

    .selection-step {
        width: 100%;
        min-width: auto;
    }

    .selection-step-arrow {
        transform: rotate(90deg);
        margin: 0 auto;
        /* Center the arrow horizontally */
        padding: var(--space-2) 0;
        align-self: center;
        /* Center vertically in flex container */
    }

    .selection-process-title {
        font-size: var(--font-size-2xl) !important;
    }
}

/* 応募セクション */
.single-recruit-application {
    background: #faf3ea !important;
    /* Cream background matching home page */
    padding: var(--space-16) 0;
    border-top: 1px solid #faf3ed !important;
    /* Light border matching home page */
}

.single-recruit-application .application-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.single-recruit-application .application-title {
    font-size: var(--font-size-2xl) !important;
    font-weight: var(--font-weight-bold) !important;
    color: #d40f20 !important;
    /* Red text matching home page design */
    margin-bottom: var(--space-4);
    font-family: var(--font-heading) !important;
    letter-spacing: 0.05em;
}

.single-recruit-application .application-description {
    font-size: var(--font-size-lg) !important;
    color: #26201f !important;
    /* Dark text color matching home page */
    margin-bottom: var(--space-8);
    line-height: 1.6;
}

.single-recruit-application .application-buttons {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

.single-recruit-application .btn-large {
    padding: var(--space-4) var(--space-8);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    min-height: 48px;
    min-width: 160px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.single-recruit-application .btn-primary.btn-large {
    background: #fc453d !important;
    /* Red background matching home page */
    color: #ffffff !important;
    /* White text */
}

.single-recruit-application .btn-primary.btn-large:hover {
    background: #d40f20 !important;
    /* Darker red on hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(212, 15, 32, 0.3);
}

.single-recruit-application .btn-secondary.btn-large {
    background: #ffffff !important;
    /* White background */
    color: #26201f !important;
    /* Dark text color matching home page */
    border: 1px solid #faf3ed !important;
    /* Light border matching home page */
}

.single-recruit-application .btn-secondary.btn-large:hover {
    background: #f4f4f4 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* 関連求人セクション */
.single-recruit-related {
    padding: var(--space-16) 0;
    background: #faf3ea !important;
    /* Cream background matching home page */
    border-top: 1px solid #faf3ed !important;
    /* Light border matching home page */
}

.single-recruit-related .section-header {
    margin-bottom: var(--space-12);
    text-align: center;
}

.single-recruit-related .section-title {
    font-size: var(--font-size-3xl) !important;
    font-weight: var(--font-weight-bold) !important;
    color: #d40f20 !important;
    /* Red text matching home page design */
    margin: 0;
    position: relative;
    display: inline-block;
    font-family: var(--font-heading) !important;
    letter-spacing: 0.05em;
    /* Remove any top border or line */
    border-top: none !important;
    padding-top: 0 !important;
}

/* Remove ::before if exists (upper line) */
.single-recruit-related .section-title::before {
    display: none !important;
    content: none !important;
}

/* Remove ::after line from single-recruit-related section-title (causing upper line issue) */
.single-recruit-related .section-title::after {
    display: none !important;
    content: none !important;
}

/* Related jobs grid: cream background (#faf3ea) for outer area, white cards inside */
.single-recruit-related .related-jobs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    background: #faf3ea !important;
    /* Cream background for grid outer area */
    padding: var(--space-6);
    border-radius: var(--radius-lg);
}

/* Related job cards: white background, black text - matching reference image */
.single-recruit-related .job-card {
    transition: all var(--transition-base);
    border: 1px solid #e8e8e8;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: #ffffff !important;
    /* White background matching reference image */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    /* Soft shadow matching home page */
}

.single-recruit-related .job-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    /* Enhanced shadow on hover */
}

.single-recruit-related .job-card__thumbnail {
    position: relative;
    overflow: hidden;
    height: 200px;
}

.single-recruit-related .job-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.single-recruit-related .job-card:hover .job-card__image {
    transform: scale(1.05);
}

.single-recruit-related .job-card__content {
    padding: var(--space-6);
    background: #ffffff !important;
    /* White background matching reference image */
}

.single-recruit-related .job-card__title {
    margin-bottom: var(--space-3);
    color: #000000 !important;
    /* Black text color matching reference image */
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
}

.single-recruit-related .job-card__description {
    color: #666 !important;
    /* Gray text color for description */
    font-size: var(--font-size-base);
    line-height: 1.7;
    margin-bottom: var(--space-4);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Limit to single line */
    max-width: 100%;
}

.single-recruit-related .job-card__link {
    display: inline-block;
    padding: var(--space-3) var(--space-6);
    background: #ff8c5a !important;
    /* Orange background matching recruit archive */
    color: #ffffff !important;
    text-decoration: none;
    border-radius: var(--radius-lg);
    font-weight: var(--font-weight-semibold);
    transition: all var(--transition-base);
}

.single-recruit-related .job-card__link:hover {
    background: #ff7740 !important;
    /* Darker orange on hover */
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 140, 90, 0.3);
}

/* Ensure all text in related jobs grid is black */
.single-recruit-related .related-jobs-grid,
.single-recruit-related .related-jobs-grid *,
.single-recruit-related .related-jobs-grid p,
.single-recruit-related .related-jobs-grid span,
.single-recruit-related .related-jobs-grid div,
.single-recruit-related .related-jobs-grid h2,
.single-recruit-related .related-jobs-grid h3,
.single-recruit-related .related-jobs-grid h4 {
    color: #000000 !important;
    /* Black text color for all text in grid */
}

/* Exception: job-card__description should be gray */
.single-recruit-related .job-card__description {
    color: #666 !important;
    /* Gray text color for description */
}

/* Exception: job-card__link button text should be white */
.single-recruit-related .job-card__link {
    color: #ffffff !important;
    /* White text for button */
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .single-recruit-hero {
        padding: var(--space-16) 0 var(--space-12) 0;
    }

    .single-recruit-hero .hero-content {
        padding: var(--space-6);
        margin: var(--space-4);
    }

    .single-recruit-hero .hero-title {
        font-size: var(--font-size-3xl);
    }

    .single-recruit-detail {
        padding: var(--space-12) 0;
    }

    .single-recruit-detail .job-detail-content {
        padding: var(--space-6);
        margin: var(--space-4);
    }

    .single-recruit-application {
        padding: var(--space-12) 0;
    }

    .single-recruit-application .application-buttons {
        flex-direction: column;
        align-items: center;
    }

    .single-recruit-application .btn-large {
        width: 100%;
        max-width: 300px;
    }

    .single-recruit-related {
        padding: var(--space-12) 0;
    }

    .single-recruit-related .related-jobs-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

@media (max-width: 480px) {
    .single-recruit-hero .hero-title {
        font-size: var(--font-size-2xl);
    }

    .single-recruit-hero .hero-description {
        font-size: var(--font-size-base);
    }

    .single-recruit-detail .section-title,
    .single-recruit-related .section-title {
        font-size: var(--font-size-2xl);
    }
}

/* 採用情報ページのスタイル（簡素化版） */
.jobs-section {
    padding: var(--space-8) 0;
}

/* 簡素化された求人カード */
.job-card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    transition: box-shadow 0.2s ease;
    overflow: hidden;
}

.job-card__thumbnail {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: var(--surface-secondary);
}

.job-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.job-card__content {
    padding: var(--space-4);
}

.job-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.job-card__title {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}

.job-card__meta {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
}

.job-card__link {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background: var(--primary-500);
    color: white;
    text-decoration: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    transition: background-color 0.2s ease;
}

.job-card__link:hover {
    background: var(--primary-600);
}

/* 簡素化された検索フォーム */
.job-search-form {
    margin-bottom: var(--space-6);
    text-align: center;
}

.search-form {
    display: flex;
    gap: var(--space-2);
    max-width: 400px;
    margin: 0 auto;
}

.search-input {
    flex: 1;
    padding: var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

.search-button {
    padding: var(--space-3) var(--space-4);
    background: var(--primary-500);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--text-sm);
    transition: background-color 0.2s ease;
}

.search-button:hover {
    background: var(--primary-600);
}

/* 簡素化された応募セクション */
.application-section {
    background: var(--surface-secondary);
    padding: var(--space-8) 0;
    text-align: center;
}

.application-title {
    font-size: var(--text-2xl);
    font-weight: 600;
    margin-bottom: var(--space-4);
    color: var(--text-primary);
}

.application-description {
    margin-bottom: var(--space-6);
    color: var(--text-secondary);
}

.application-buttons {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* 簡素化された関連求人 */
.related-jobs-section {
    padding: var(--space-8) 0;
}

.related-jobs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4);
}

.related-job-card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease;
    display: block;
    padding: var(--space-4);
}

.related-job-card__content {
    /* パディングは親要素に移動 */
}

.related-job-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.related-job-card .job-title {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}

.related-job-card .job-meta {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .search-form {
        flex-direction: column;
    }

    .application-buttons {
        flex-direction: column;
        align-items: center;
    }

    .related-jobs-grid {
        grid-template-columns: 1fr;
    }
}

/* 求人カードのスタイル */
.job-item {
    margin-bottom: var(--space-6);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.job-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.job-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.job-thumbnail {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.job-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.job-image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-50), var(--primary-100));
    display: flex;
    align-items: center;
    justify-content: center;
}

.placeholder-icon {
    font-size: 2rem;
    opacity: 0.6;
}

.job-content {
    padding: var(--space-4);
}

.job-title {
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}

.job-description {
    margin-bottom: var(--space-3);
    line-height: 1.5;
}

.job-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ページネーションのスタイル */
.pagination-wrapper {
    margin-top: var(--space-8);
    text-align: center;
}

.pagination-wrapper .page-numbers {
    display: inline-block;
    padding: var(--space-2) var(--space-3);
    margin: 0 var(--space-1);
    background: var(--surface);
    color: var(--text-primary);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: background-color 0.2s ease;
}

.pagination-wrapper .page-numbers:hover,
.pagination-wrapper .page-numbers.current {
    background: var(--primary-500);
    color: white;
}

/* 検索フォームのスタイル */
.job-search-form {
    margin-bottom: var(--space-8);
}

.search-form {
    max-width: 400px;
    margin: 0 auto;
}

.search-input-group {
    display: flex;
    gap: var(--space-2);
}

.search-input {
    flex: 1;
    padding: var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

.search-button {
    padding: var(--space-3) var(--space-4);
    background: var(--primary-500);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.search-button:hover {
    background: var(--primary-600);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .job-item {
        margin-bottom: var(--space-4);
    }

    .job-thumbnail {
        height: 150px;
    }

    .job-content {
        padding: var(--space-3);
    }

    .search-input-group {
        flex-direction: column;
    }

    .search-button {
        width: 100%;
    }
}

.related-job-card {
    transition: all var(--transition-base);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: linear-gradient(145deg, var(--timeline-gradient-start), var(--timeline-gradient-end));
    box-shadow:
        0 8px 25px -8px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.05);
}

.related-job-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 15px 35px -8px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .search-input-group {
        flex-direction: column;
        gap: var(--space-3);
    }

    .search-input {
        width: 100%;
    }

    .application-buttons {
        flex-direction: column;
        align-items: center;
    }

    .application-buttons .btn {
        width: 100%;
        max-width: 300px;
    }

    .jobs-grid.modern-grid-3 {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .related-jobs-grid.modern-grid-3 {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}

@media (max-width: 1024px) {
    .jobs-grid.modern-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .related-jobs-grid.modern-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   MODERN LAYOUT COMPONENTS
   ======================================== */

/* モダンなグリッドレイアウト */
.modern-grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.modern-grid-2 {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(2, 1fr);
}

.modern-grid-3 {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(3, 1fr);
}

/* モダンなカードレイアウト */
.modern-card {
    background: #ffffff;
    /* Solid white for clarity */
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-xl);
    /* Stronger shadow */
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.modern-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.modern-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 25px 50px -20px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* モダンなセクション */
.modern-section {
    padding: var(--space-20) 0;
    position: relative;
}

.modern-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

/* モダンなタイムライン */
.modern-timeline {
    position: relative;
    padding-left: var(--space-8);
}

.modern-timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--primary-color), var(--accent-color));
}

.modern-timeline-item {
    position: relative;
    margin-bottom: var(--space-8);
    padding-left: var(--space-6);
}

.modern-timeline-item::before {
    content: '';
    position: absolute;
    left: -var(--space-6);
    top: var(--space-2);
    width: 12px;
    height: 12px;
    background: var(--primary-color);
    border-radius: 50%;
    border: 3px solid var(--background-card);
    box-shadow: 0 0 0 2px var(--primary-color);
}

/* モダンなボタン */
.modern-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-8);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: var(--cta-on-primary);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-full);
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.modern-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left var(--transition-base);
}

.modern-btn:hover::before {
    left: 100%;
}

.modern-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(164, 120, 100, 0.4);
}

/* モダンなアイコン */
.modern-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-radius: var(--radius-xl);
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-4);
}

/* モダンなフォーム */
.modern-form {
    background: linear-gradient(145deg, var(--timeline-gradient-start), var(--timeline-gradient-end));
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.3);
}

.modern-form-group {
    margin-bottom: var(--space-6);
}

.modern-form-label {
    display: block;
    color: var(--card-text-primary);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-2);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.modern-form-input {
    width: 100%;
    padding: var(--space-4);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    color: var(--card-text-primary);
    font-size: var(--font-size-base);
    transition: all var(--transition-base);
}

.modern-form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 3px rgba(164, 120, 100, 0.2);
}

/* レスポンシブ対応 */
@media (max-width: 1023px) {

    .modern-grid-2,
    .modern-grid-3 {
        grid-template-columns: 1fr;
    }

    .modern-card {
        padding: var(--space-6);
    }

    .modern-section {
        padding: var(--space-16) 0;
    }
}

@media (max-width: 767px) {
    .modern-card {
        padding: var(--space-4);
    }

    .modern-section {
        padding: var(--space-12) 0;
    }

    .modern-timeline {
        padding-left: var(--space-6);
    }

    .modern-timeline-item {
        padding-left: var(--space-4);
    }
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 767px) {
    .hero-title {
        font-size: var(--font-size-4xl);
    }

    .hero-description {
        font-size: var(--font-size-lg);
    }

    .section-title {
        font-size: var(--font-size-2xl);
    }

    .container {
        padding: 0 var(--space-4);
    }

    .services-section,
    .news-section,
    .company-section,
    .access-section,
    .contact-section,
    .mission-vision-section,
    .company-info-section,
    .contact-form-section,
    .contact-info-section,
    .faq-section {
        padding: var(--space-12) 0;
    }

    /* 全ページ共通のモバイルレスポンシブ対応強化 */
    .modern-card {
        margin: 0 var(--space-2);
    }

    .modern-grid-2,
    .modern-grid-3 {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .modern-section {
        padding: var(--space-12) 0;
    }

    .modern-hero-content {
        padding: var(--space-8) 0;
    }

    .modern-hero-content .hero-title {
        font-size: var(--font-size-3xl);
    }

    .modern-hero-content .hero-description {
        font-size: var(--font-size-base);
    }

    /* ボタンのモバイル対応 */
    .btn-lg {
        padding: var(--space-3) var(--space-6);
        font-size: var(--font-size-base);
        min-height: 48px;
    }

    .btn-xl {
        padding: var(--space-4) var(--space-8);
        font-size: var(--font-size-lg);
        min-height: 56px;
    }

    /* フォームのモバイル対応 */
    .modern-form-input {
        padding: var(--space-3) var(--space-4);
        font-size: var(--font-size-base);
    }

    .modern-form-group {
        margin-bottom: var(--space-4);
    }

    /* カードのモバイル対応 */
    .modern-card {
        padding: var(--space-4);
        margin-bottom: var(--space-4);
    }

    .modern-card .card-body {
        padding: var(--space-4);
    }

    .modern-card .card-title {
        font-size: var(--font-size-lg);
        margin-bottom: var(--space-3);
    }

    .modern-card .card-content {
        font-size: var(--font-size-sm);
        line-height: 1.5;
    }
}

@media (min-width: 768px) {
    .hero-section {
        padding: var(--space-24) 0;
    }

    .services-grid,
    .news-grid,
    .company-info-grid,
    .contact-info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: var(--space-6);
    }
}

@media (min-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .news-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .company-info-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .contact-info-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Focus styles for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--primary-color);
    color: var(--cta-on-primary);
    padding: var(--space-2) var(--space-4);
    text-decoration: none;
    border-radius: var(--radius-base);
    z-index: var(--z-modal);
}

.skip-link:focus {
    top: 6px;
}

/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   UTILITIES
   ======================================== */

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-2 {
    margin-bottom: var(--space-2);
}

.mb-4 {
    margin-bottom: var(--space-4);
}

.mb-6 {
    margin-bottom: var(--space-6);
}

.mb-8 {
    margin-bottom: var(--space-8);
}

.mt-0 {
    margin-top: 0;
}

.mt-2 {
    margin-top: var(--space-2);
}

.mt-4 {
    margin-top: var(--space-4);
}

.mt-6 {
    margin-top: var(--space-6);
}

.mt-8 {
    margin-top: var(--space-8);
}

.p-0 {
    padding: 0;
}

.p-2 {
    padding: var(--space-2);
}

.p-4 {
    padding: var(--space-4);
}

.p-6 {
    padding: var(--space-6);
}

.p-8 {
    padding: var(--space-8);
}

.hidden {
    display: none;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.flex {
    display: flex;
}

.grid {
    display: grid;
}

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    * {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    .btn-primary,
    .btn-secondary,
    .btn-service,
    .btn-cta {
        border: 1px solid black;
        background: transparent;
        color: black;
    }

    .hero-section {
        background: none;
        color: black;
    }

    .site,
    .site-main,
    main {
        background: none;
        color: black;
    }
}

/* ============================================
   サービスページ共通レイアウトシステム
   ============================================ */

/* サービスページ共通 - ヒーローセクション */
.service-hero.modern-section {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--card-gradient-start), var(--card-gradient-end));
}

.service-hero .hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.service-hero .hero-image-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.service-hero .hero-background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.service-hero .hero-content.modern-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    padding: var(--space-8);
    background: var(--card-background);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.service-hero .hero-title {
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.service-hero .hero-description {
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
    text-shadow: none !important;
    /* Remove text shadow for sharp, clear text */
}

/* サービスページ共通 - サービス概要セクション */
.service-overview-section.modern-section {
    padding: var(--space-16) 0;
    background: linear-gradient(180deg, var(--surface-primary), var(--surface-secondary));
}

.service-overview-card.modern-card {
    max-width: 800px;
    margin: 0 auto;
    background: linear-gradient(145deg, var(--timeline-gradient-start), var(--timeline-gradient-end));
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    box-shadow:
        0 10px 30px -10px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.service-overview-card .card-header {
    padding: var(--space-6) var(--space-8);
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid var(--border-primary);
}

.service-overview-card .card-title {
    color: var(--text-primary);
    margin: 0;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
}

.service-overview-card .card-body {
    padding: var(--space-8);
}

.service-overview-card .service-description {
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
    font-size: var(--font-size-lg);
}

/* サービスページ共通 - 特徴セクション */
.features-section.modern-section {
    padding: var(--space-16) 0;
    background: linear-gradient(180deg, var(--surface-secondary), var(--surface-primary));
}

.features-section .section-title {
    text-align: center;
    margin-bottom: var(--space-12);
    color: var(--text-primary);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
}

.features-grid.modern-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-8);
    max-width: 1200px;
    margin: 0 auto;
}

.feature-card.modern-card {
    background: linear-gradient(145deg, var(--timeline-gradient-start), var(--timeline-gradient-end));
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    box-shadow:
        0 8px 25px -8px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    overflow: hidden;
    transition: all var(--transition-base);
    position: relative;
}

.feature-card.modern-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 12px 35px -8px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

.feature-card.modern-card .card-body {
    padding: var(--space-8);
    text-align: center;
}

.feature-card .feature-icon {
    margin-bottom: var(--space-4);
    display: flex;
    justify-content: center;
    align-items: center;
}

.feature-card .feature-icon .icon {
    font-size: 2.5rem;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.feature-card .feature-title {
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
}

.feature-card .feature-description {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* サービスページ共通 - プロセスセクション */
.process-section.modern-section {
    padding: var(--space-16) 0;
    background: linear-gradient(180deg, var(--surface-primary), var(--surface-secondary));
}

.process-section .section-title {
    text-align: center;
    margin-bottom: var(--space-12);
    color: var(--text-primary);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
}

/* シンプルフローレイアウト */
.process-simple-flow {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-width: 1000px;
    margin: 0 auto;
}

.process-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-6);
    padding: var(--space-6);
    border-left: 4px solid var(--accent-primary);
    background: linear-gradient(135deg, rgba(29, 44, 64, 0.3), rgba(18, 27, 42, 0.5));
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

.process-item:hover {
    transform: translateX(8px);
    background: linear-gradient(135deg, rgba(29, 44, 64, 0.5), rgba(18, 27, 42, 0.7));
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.process-item .step-number {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 50%;
    color: white;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    box-shadow: 0 4px 15px rgba(164, 120, 100, 0.3);
}

.process-item .step-content {
    flex: 1;
}

.process-item .step-title {
    color: var(--text-primary);
    margin-bottom: var(--space-3);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
}

.process-item .step-description {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    font-size: var(--font-size-base);
}

/* 既存のタイムラインレイアウト（後方互換性のため保持） */
.process-timeline.modern-timeline {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.process-timeline.modern-timeline::before {
    content: '';
    position: absolute;
    left: 2rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 1px;
}

.process-step.modern-timeline-item {
    position: relative;
    margin-bottom: var(--space-8);
    padding-left: 5rem;
    background: linear-gradient(145deg, var(--timeline-gradient-start), var(--timeline-gradient-end));
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    box-shadow:
        0 8px 25px -8px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    overflow: hidden;
    transition: all var(--transition-base);
}

.process-step.modern-timeline-item:hover {
    transform: translateX(8px);
    box-shadow:
        0 12px 35px -8px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

.process-step.modern-timeline-item .step-number {
    position: absolute;
    left: -2.5rem;
    top: var(--space-6);
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.process-step.modern-timeline-item .step-content {
    padding: var(--space-8);
}

.process-step.modern-timeline-item .step-title {
    color: var(--text-primary);
    margin-bottom: var(--space-3);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.process-step.modern-timeline-item .step-description {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* サービスページ共通 - CTAセクション */
.cta-section.modern-section {
    padding: var(--space-16) 0;
    background: linear-gradient(180deg, var(--surface-secondary), var(--surface-tertiary));
}

.cta-card.modern-card {
    max-width: 600px;
    margin: 0 auto;
    background: linear-gradient(145deg, var(--timeline-gradient-start), var(--timeline-gradient-end));
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    box-shadow:
        0 10px 30px -10px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.cta-card.modern-card .card-body {
    padding: var(--space-10);
    text-align: center;
}

.cta-card .cta-title {
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
}

.cta-card .cta-description {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-8);
    font-size: var(--font-size-lg);
}

.cta-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
}

/* 後方互換性のためのエイリアス（共通ボタンシステムに統一済み） */

/* ============================================
   お問い合わせページ専用モダンスタイル
   ============================================ */

/* お問い合わせフォームカードの最適化 */
.contact-form-card.modern-card {
    max-width: 800px;
    margin: 0 auto;
    background: linear-gradient(145deg, var(--timeline-gradient-start), var(--timeline-gradient-end));
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    box-shadow:
        0 10px 30px -10px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.contact-form-card.modern-card .card-header {
    background: linear-gradient(135deg, var(--card-gradient-start), var(--card-gradient-end));
    border-bottom: 1px solid var(--border-primary);
    padding: var(--space-6);
}

.contact-form-card.modern-card .card-title {
    color: var(--text-primary);
    margin: 0;
    text-align: center;
}

.contact-form-card.modern-card .card-body {
    padding: var(--space-8);
}

/* お問い合わせフォームタイトル（黒枠なし） */
.contact-form-title {
    color: var(--text-primary);
    margin: 0 0 var(--space-6) 0;
    text-align: center;
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    padding: var(--space-6) 0;
}

/* 連絡先情報リスト（黒枠なし） */
.contact-info-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    max-width: 1200px;
    margin: 0 auto;
}

.contact-info-item {
    text-align: center;
    padding: var(--space-6) 0;
}

.contact-info-item.modern-card {
    transition: all var(--transition-base);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: linear-gradient(145deg, var(--timeline-gradient-start), var(--timeline-gradient-end));
    box-shadow:
        0 8px 25px -8px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    padding: var(--space-6);
    text-align: center;
}

.contact-info-item.modern-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 15px 35px -8px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

.contact-info-title {
    color: var(--text-primary);
    margin: 0 0 var(--space-4) 0;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
}

/* お問い合わせ項目のfieldset余白調整 */

.contact-inquiry-fieldset {
    margin: var(--space-4) 0 var(--space-2);
    border: 1px solid #000000;
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    background: rgba(240, 244, 248, 0.65);
}

.contact-inquiry-fieldset legend {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-2);
    background: transparent;
    padding: 0;
}

.contact-inquiry-fieldset .wpcf7-form-control-wrap {
    display: block;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}


.contact-form-card .wpcf7-form-control.inquiry-check {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.contact-form-card .wpcf7-form-control.inquiry-check .wpcf7-list-item {
    margin: 0;
    width: 100%;
    display: flex;
    align-items: stretch;
}

.contact-form-card .wpcf7-form-control.inquiry-check label {
    position: relative;
    display: flex;
    width: 100%;
}

.contact-form-card .wpcf7-form-control.inquiry-check input[type="checkbox"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.contact-form-card .wpcf7-form-control.inquiry-check .wpcf7-list-item-label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 3.5rem;
    padding: 0.875rem 1rem;
    border: 1.5px solid #d9d9e3;
    border-radius: 12px;
    background: #ffffff;
    text-align: center;
    line-height: 1.4;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 0 rgba(16, 24, 40, 0.04);
}

.contact-form-card .wpcf7-form-control.inquiry-check label:hover .wpcf7-list-item-label {
    border-color: #8a8fb3;
    background: #fafaff;
}

.contact-form-card .wpcf7-form-control.inquiry-check input[type="checkbox"]:focus-visible+.wpcf7-list-item-label {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

.contact-form-card .wpcf7-form-control.inquiry-check .wpcf7-list-item.is-selected .wpcf7-list-item-label {
    border-color: #fc453d !important;
    background: #fc453d !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(252, 69, 61, 0.25);
}

.contact-form-card .wpcf7-not-valid .wpcf7-form-control.inquiry-check .wpcf7-list-item-label,
.contact-form-card .wpcf7-form-control.inquiry-check .wpcf7-not-valid .wpcf7-list-item-label {
    border-color: #ef4444;
    background: #fff5f5;
    color: #ef4444;
}

/* ========================================
   応募フォーム特化スタイル
   ======================================== */
.recruit-application-main fieldset.recruit-style {
    margin: var(--space-4) 0 var(--space-2);
    padding: 0;
    border: none;
}

.recruit-application-main fieldset.recruit-style legend {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}

.recruit-application-main fieldset.recruit-style select {
    width: 100%;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #f5f8fa;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
}

.recruit-application-main fieldset.recruit-style select:focus {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
    border-color: var(--accent-color);
}

.recruit-application-main .modern-section {
    background: #faf3ea;
}

.recruit-application-main .modern-section::before {
    display: none;
}

.recruit-application-main .selection-process-section {
    background: #faf3ea;
}

.recruit-application-main .selection-process-content.modern-card {
    background: #ffffff !important;
    border: 1px solid #f1e4da !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.recruit-application-main .selection-step.modern-card {
    background: #ffffff;
    border: 1px solid #f1e4da;
    border-radius: var(--radius-xl);
    box-shadow: 0 10px 25px -12px rgba(0, 0, 0, 0.15);
}

.recruit-application-main .selection-step .step-icon {
    background: linear-gradient(135deg, rgba(252, 69, 61, 0.15), rgba(255, 210, 184, 0.35));
    border-radius: 50%;
}

/* 送信ボタンの共通レイアウト適用 */
.form-submit {
    text-align: center;
    margin-top: var(--space-8);
}

.form-submit .btn.modern-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    background: var(--accent-color);
    color: var(--text-primary);
    text-decoration: none;
    border-radius: var(--radius-lg);
    font-weight: var(--font-weight-semibold);
    transition: all var(--transition-base);
    box-shadow: 0 8px 25px -8px rgba(255, 107, 53, 0.3);
    border: none;
    padding: var(--space-4) var(--space-8);
    font-size: var(--font-size-lg);
    min-height: 52px;
}

.form-submit .btn.modern-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -8px rgba(255, 107, 53, 0.4);
}

.form-submit .btn.modern-btn:focus-visible {
    outline: 3px solid var(--focus-color);
    outline-offset: 3px;
}


/* 連絡先情報カードの最適化 */
.contact-info-card.modern-card {
    transition: all var(--transition-base);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: linear-gradient(145deg, var(--timeline-gradient-start), var(--timeline-gradient-end));
    box-shadow:
        0 8px 25px -8px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.05);
}

.contact-info-card.modern-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 15px 35px -8px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

.contact-info-card.modern-card .card-header {
    background: linear-gradient(135deg, var(--card-gradient-start), var(--card-gradient-end));
    border-bottom: 1px solid var(--border-primary);
    padding: var(--space-5);
}

.contact-info-card.modern-card .card-title {
    color: var(--text-primary);
    margin: 0;
    text-align: center;
}

.contact-info-card.modern-card .card-body {
    padding: var(--space-6);
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.contact-icon {
    font-size: var(--font-size-2xl);
    flex-shrink: 0;
    margin-top: var(--space-1);
}

.contact-details {
    flex: 1;
}

.contact-label {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
}

.contact-value {
    color: var(--text-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-2);
}

.contact-hours {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

/* FAQアイテムの最適化 */
/* FAQ section: cream background matching home page design */
.faq-section {
    background: #fafbfc !important;
    /* Light gray background matching home page */
    padding: 80px 0;
    margin: 0;
}

.faq-section .section-header {
    text-align: center;
    margin-bottom: 60px;
}

.faq-section .section-label {
    background: #f0f2f5 !important;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    color: #666 !important;
    margin-bottom: 15px;
    font-weight: 500;
    letter-spacing: 0.5px;
    display: inline-block;
}

.faq-section .section-title {
    font-size: 36px !important;
    font-weight: var(--font-weight-bold) !important;
    margin-bottom: 15px;
    color: #1a1a1a !important;
    letter-spacing: -0.5px !important;
}

.faq-section .section-subtitle {
    font-size: 16px !important;
    color: #666 !important;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7 !important;
}

.faq-list {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* FAQ item: stylish card design with hidden answer */
.faq-item.modern-card {
    transition: all 0.3s ease;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff !important;
    /* White card background matching home page */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    /* Soft shadow matching home page */
    margin-bottom: 0;
    padding: 0;
    /* Remove padding to allow button to fill */
}

.faq-item.modern-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 30px -8px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* FAQ question button: stylish design matching home page */
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-6) var(--space-8);
    cursor: pointer;
    border: none;
    background: transparent;
    text-align: left;
    transition: all 0.3s ease;
    position: relative;
}

.faq-question:hover {
    background: #f4f4f4 !important;
    /* Light gray hover matching home page */
}

.faq-question[aria-expanded="true"] {
    background: #f4f4f4 !important;
    /* Light gray when expanded */
}

.faq-title {
    color: #1a1a1a !important;
    /* Dark text color matching home page */
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    flex: 1;
    padding-right: var(--space-4);
    line-height: 1.4;
}

.faq-toggle {
    color: #d40f20 !important;
    /* Red accent color matching home page */
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    transition: transform 0.3s ease;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(212, 15, 32, 0.1);
    line-height: 1;
}

.faq-question[aria-expanded="true"] .faq-toggle {
    transform: rotate(45deg);
    background: rgba(212, 15, 32, 0.2);
}

/* FAQ answer: hidden by default, shown when expanded - black text color */
.faq-answer {
    padding: 0 var(--space-8) var(--space-6);
    color: #000000 !important;
    /* Black text color - unified for mobile and web */
    line-height: 1.8;
    font-size: var(--font-size-base);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
}

.faq-answer p,
.faq-answer span,
.faq-answer div,
.faq-answer * {
    color: #000000 !important;
    /* Ensure all text in FAQ answer is black */
}

.faq-question[aria-expanded="true"]~.faq-answer {
    max-height: 2000px;
    /* Large enough to display full content */
    padding: 0 var(--space-8) var(--space-6);
    opacity: 1;
}

.faq-answer p {
    margin: 0;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .contact-form-card.modern-card .card-body {
        padding: var(--space-6);
    }

    .contact-info-card.modern-card .card-body {
        padding: var(--space-4);
    }

    .contact-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-3);
    }

    .contact-icon {
        margin-top: 0;
    }

    .faq-question {
        padding: var(--space-5) var(--space-6);
    }

    .faq-title {
        font-size: var(--font-size-base);
    }

    .faq-toggle {
        font-size: 24px;
        width: 28px;
        height: 28px;
    }

    .faq-answer {
        padding: 0 var(--space-6) var(--space-5) !important;
        font-size: var(--font-size-sm);
    }

    .faq-question[aria-expanded="true"]~.faq-answer {
        padding: var(--space-5) var(--space-6) !important;
    }

    /* お問い合わせフォームのレスポンシブ調整 */
    .contact-inquiry-fieldset {
        padding: var(--space-1);
    }

    .form-submit {
        margin-top: var(--space-6);
    }

    .contact-form-title {
        font-size: var(--font-size-2xl);
        padding: var(--space-4) 0;
    }

    .contact-info-list {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .contact-info-item {
        padding: var(--space-4) 0;
    }

    .contact-info-item.modern-card {
        padding: var(--space-4);
    }

    .contact-info-title {
        font-size: var(--font-size-xl);
    }
}

@media (max-width: 480px) {

    .contact-form-card.modern-card .card-header,
    .contact-info-card.modern-card .card-header {
        padding: var(--space-4);
    }

    .contact-form-card.modern-card .card-body,
    .contact-info-card.modern-card .card-body {
        padding: var(--space-4);
    }

    .faq-question {
        padding: var(--space-3);
    }

    .faq-answer {
        padding: var(--space-3);
    }

    .contact-form-title {
        font-size: var(--font-size-xl);
        padding: var(--space-3) 0;
    }

    .contact-info-list {
        gap: var(--space-4);
    }

    .contact-info-item {
        padding: var(--space-3) 0;
    }

    .contact-info-item.modern-card {
        padding: var(--space-3);
    }

    .contact-info-title {
        font-size: var(--font-size-lg);
    }
}

/* ============================================
   特定商取引ページ専用モダンスタイル
   ============================================ */

/* 特定商取引ページ専用レイアウト */
.commercial-section.modern-section {
    padding: var(--space-20) 0;
    background: linear-gradient(160deg, var(--section-gradient-start), var(--section-gradient-end));
    min-height: 80vh;
}

.commercial-content.modern-card {
    max-width: 1000px;
    margin: 0 auto;
    background: linear-gradient(145deg, var(--timeline-gradient-start), var(--timeline-gradient-end));
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    box-shadow:
        0 10px 30px -10px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    overflow: hidden;
    padding: var(--space-12);
}

.commercial-header {
    text-align: center;
    margin-bottom: var(--space-12);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--border-primary);
}

.commercial-title {
    color: var(--text-primary);
    margin-bottom: var(--space-6);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
}

.commercial-description {
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    line-height: 1.6;
    margin: 0;
}

.commercial-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-12);
}

.commercial-item.modern-card {
    transition: all var(--transition-base);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: linear-gradient(145deg, var(--timeline-gradient-start), var(--timeline-gradient-end));
    box-shadow:
        0 8px 25px -8px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    padding: var(--space-6);
}

.commercial-item.modern-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 15px 35px -8px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

.commercial-item-title {
    color: var(--text-primary);
    margin: 0 0 var(--space-4) 0;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: var(--space-2);
}

.commercial-item-content {
    color: var(--text-primary);
    font-size: var(--font-size-base);
    line-height: 1.6;
    margin: 0;
}

.commercial-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    padding-top: var(--space-8);
    border-top: 1px solid var(--border-primary);
}

.commercial-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-8);
    font-size: var(--font-size-lg);
    min-height: 52px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .commercial-section.modern-section {
        padding: var(--space-16) 0;
    }

    .commercial-content.modern-card {
        padding: var(--space-8);
        margin: var(--space-4);
    }

    .commercial-title {
        font-size: var(--font-size-3xl);
    }

    .commercial-description {
        font-size: var(--font-size-base);
    }

    .commercial-info {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .commercial-item.modern-card {
        padding: var(--space-4);
    }

    .commercial-item-title {
        font-size: var(--font-size-xl);
    }

    .commercial-actions {
        flex-direction: column;
        gap: var(--space-4);
    }

    .commercial-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .commercial-section.modern-section {
        padding: var(--space-12) 0;
    }

    .commercial-content.modern-card {
        padding: var(--space-6);
        margin: var(--space-2);
    }

    .commercial-title {
        font-size: var(--font-size-2xl);
    }

    .commercial-description {
        font-size: var(--font-size-sm);
    }

    .commercial-item.modern-card {
        padding: var(--space-3);
    }

    .commercial-item-title {
        font-size: var(--font-size-lg);
    }

    .commercial-item-content {
        font-size: var(--font-size-sm);
    }
}

/* ============================================
   プライバシーポリシーページ専用モダンスタイル
   ============================================ */

/* プライバシーポリシーページ専用レイアウト */
.privacy-section.modern-section {
    padding: var(--space-20) 0;
    background: linear-gradient(160deg, var(--section-gradient-start), var(--section-gradient-end));
    min-height: 80vh;
}

.privacy-content.modern-card {
    max-width: 1000px;
    margin: 0 auto;
    background: linear-gradient(145deg, var(--timeline-gradient-start), var(--timeline-gradient-end));
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    box-shadow:
        0 10px 30px -10px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    overflow: hidden;
    padding: var(--space-12);
}

.privacy-header {
    text-align: center;
    margin-bottom: var(--space-12);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--border-primary);
}

.privacy-title {
    color: var(--text-primary);
    margin-bottom: var(--space-6);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
}

.privacy-description {
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    line-height: 1.6;
    margin-bottom: var(--space-4);
}

.privacy-updated {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    margin: 0;
}

.privacy-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-bottom: var(--space-12);
}

.privacy-item.modern-card {
    transition: all var(--transition-base);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: linear-gradient(145deg, var(--timeline-gradient-start), var(--timeline-gradient-end));
    box-shadow:
        0 8px 25px -8px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    padding: var(--space-6);
}

.privacy-item.modern-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 30px -8px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

.privacy-item-title {
    color: var(--text-primary);
    margin: 0 0 var(--space-4) 0;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: var(--space-2);
}

.privacy-item-content {
    color: var(--text-primary);
    font-size: var(--font-size-base);
    line-height: 1.6;
}

.privacy-item-content p {
    margin-bottom: var(--space-4);
}

.privacy-item-content p:last-child {
    margin-bottom: 0;
}

.privacy-list {
    margin: var(--space-4) 0;
    padding-left: var(--space-6);
}

.privacy-list li {
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}

.privacy-contact {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-top: var(--space-4);
}

.privacy-contact p {
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}

.privacy-contact p:last-child {
    margin-bottom: 0;
}

.privacy-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    padding-top: var(--space-8);
    border-top: 1px solid var(--border-primary);
}

.privacy-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-8);
    font-size: var(--font-size-lg);
    min-height: 52px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .privacy-section.modern-section {
        padding: var(--space-16) 0;
    }

    .privacy-content.modern-card {
        padding: var(--space-8);
        margin: var(--space-4);
    }

    .privacy-title {
        font-size: var(--font-size-3xl);
    }

    .privacy-description {
        font-size: var(--font-size-base);
    }

    .privacy-info {
        gap: var(--space-4);
    }

    .privacy-item.modern-card {
        padding: var(--space-4);
    }

    .privacy-item-title {
        font-size: var(--font-size-xl);
    }

    .privacy-actions {
        flex-direction: column;
        gap: var(--space-4);
    }

    .privacy-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .privacy-section.modern-section {
        padding: var(--space-12) 0;
    }

    .privacy-content.modern-card {
        padding: var(--space-6);
        margin: var(--space-2);
    }

    .privacy-title {
        font-size: var(--font-size-2xl);
    }

    .privacy-description {
        font-size: var(--font-size-sm);
    }

    .privacy-item.modern-card {
        padding: var(--space-3);
    }

    .privacy-item-title {
        font-size: var(--font-size-lg);
    }

    .privacy-item-content {
        font-size: var(--font-size-sm);
    }

    .privacy-list {
        padding-left: var(--space-4);
    }
}

/* ============================================
   ニュースページ専用ブログ形式スタイル
   ============================================ */

/* ニュースブログ形式ヘッダー（一覧ページ） */
.news-blog-header {
    padding: var(--space-12) 0;
    background: linear-gradient(160deg, var(--section-gradient-start), var(--section-gradient-end));
    border-bottom: 1px solid var(--border-primary);
}

.blog-header-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.blog-title {
    color: var(--text-primary);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    margin-bottom: var(--space-4);
}

.blog-description {
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    line-height: 1.6;
    margin: 0;
}

/* ニュースブログ形式記事ヘッダー（詳細ページ） */
.news-blog-single-header {
    padding: var(--space-12) 0;
    background: linear-gradient(160deg, var(--section-gradient-start), var(--section-gradient-end));
    border-bottom: 1px solid var(--border-primary);
}

.blog-single-header-content {
    max-width: 800px;
    margin: 0 auto;
}

.blog-single-meta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.blog-single-date {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.blog-single-category {
    background: var(--accent-color);
    color: var(--text-primary);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.blog-single-title {
    color: var(--text-primary);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    margin: 0;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {

    .blog-title,
    .blog-single-title {
        font-size: var(--font-size-3xl);
    }

    .blog-description {
        font-size: var(--font-size-base);
    }

    .blog-single-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
}

@media (max-width: 480px) {

    .blog-title,
    .blog-single-title {
        font-size: var(--font-size-2xl);
    }

    .blog-description {
        font-size: var(--font-size-sm);
    }
}

/* ============================================
   ニュース詳細ページ専用スタイル
   ============================================ */

/* ニュース詳細ヘッダー - シンプルデザイン */
.news-single-header-simple {
    text-align: left;
    max-width: 800px;
    margin: 0 auto var(--space-10);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid #eee;
}

.news-single-header-simple .blog-single-meta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.news-single-header-simple .blog-single-date {
    color: #666 !important;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.news-single-header-simple .blog-single-category {
    background: #f0f0f0 !important;
    color: #333 !important;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.news-single-header-simple .blog-single-title {
    color: #000000 !important;
    font-size: var(--font-size-3xl) !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: 1.3;
    margin: 0;
}

/* ニュース詳細コンテンツ - シンプルデザイン */
.news-single-content.modern-section {
    padding: var(--space-16) 0;
    background: #ffffff !important;
}

.entry-content {
    max-width: 800px;
    margin: 0 auto;
    color: #000000 !important;
    line-height: 1.8;
    font-size: var(--font-size-base);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    color: #000000 !important;
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
    font-weight: var(--font-weight-bold);
}

.entry-content h2 {
    font-size: var(--font-size-2xl);
}

.entry-content h3 {
    font-size: var(--font-size-xl);
}

.entry-content h4 {
    font-size: var(--font-size-lg);
}

.entry-content p {
    margin-bottom: var(--space-6);
    color: #000000 !important;
}

.entry-content ul,
.entry-content ol {
    margin-bottom: var(--space-6);
    padding-left: var(--space-6);
    color: #000000 !important;
}

.entry-content li {
    margin-bottom: var(--space-2);
    color: #000000 !important;
}

.entry-content a {
    color: #000000 !important;
    text-decoration: underline;
}

.entry-content a:hover {
    opacity: 0.7;
    text-decoration: none;
}

/* ニュース詳細ナビゲーション */
.news-navigation-section.modern-section {
    background: #ffffff !important;
    /* White background as requested */
    padding: var(--space-16) 0;
}

.news-navigation-content {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--space-8) 0;
}

/* ニュース詳細サムネイル */
.news-single-thumbnail {
    max-width: 600px;
    margin: 0 auto var(--space-10);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.news-single-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

.news-single-navigation.modern-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.news-navigation-section .nav-link {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    background: #ffffff !important;
    /* White background matching home page */
    border: 1px solid #faf3ed !important;
    /* Light border matching home page */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.news-navigation-section .nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(252, 69, 61, 0.1), transparent);
    transition: left 0.5s ease;
}

.news-navigation-section .nav-link:hover::before {
    left: 100%;
}

.news-navigation-section .nav-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(212, 15, 32, 0.15);
    border-color: #fc453d !important;
    /* Red border on hover */
}

.news-navigation-section .nav-direction {
    font-size: var(--font-size-sm);
    color: #d40f20 !important;
    /* Red color matching home page */
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-2);
}

.news-navigation-section .nav-title {
    font-size: var(--font-size-base);
    color: #26201f !important;
    /* Dark text color matching home page */
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
}

.news-navigation-section .news-back-button {
    background: #fc453d !important;
    /* Red background matching home page */
    color: #ffffff !important;
    /* White text */
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-lg);
    font-weight: var(--font-weight-semibold);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    box-shadow: 0 2px 8px rgba(212, 15, 32, 0.2);
}

.news-navigation-section .news-back-button:hover {
    background: #d40f20 !important;
    /* Darker red on hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 15, 32, 0.3);
}

.nav-direction {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
}

.nav-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    line-height: 1.4;
}

.news-single-back {
    text-align: center;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .news-single-title {
        font-size: var(--font-size-3xl);
    }

    .news-single-navigation.modern-grid-2 {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .news-content-card .entry-content {
        font-size: var(--font-size-base);
    }
}

@media (max-width: 480px) {
    .news-single-title {
        font-size: var(--font-size-2xl);
    }

    .news-single-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .news-content-card .entry-content {
        font-size: var(--font-size-sm);
    }
}

/* サービスページ共通 - レスポンシブ対応 */
@media (max-width: 768px) {
    .service-hero .hero-content.modern-hero-content {
        padding: var(--space-6);
        margin: var(--space-4);
    }

    .service-hero .hero-title {
        font-size: var(--font-size-3xl);
    }

    .service-hero .hero-description {
        font-size: var(--font-size-base);
    }

    .features-grid.modern-grid-2 {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .process-timeline.modern-timeline::before {
        left: 1.5rem;
    }

    .process-step.modern-timeline-item {
        padding-left: 4rem;
    }

    .process-step.modern-timeline-item .step-number {
        left: -1.5rem;
        width: 3rem;
        height: 3rem;
        font-size: var(--font-size-base);
    }

    .cta-card.modern-card .card-body {
        padding: var(--space-8);
    }

    .cta-card .cta-title {
        font-size: var(--font-size-2xl);
    }

    .cta-card .cta-description {
        font-size: var(--font-size-base);
    }
}

@media (max-width: 480px) {
    .service-hero .hero-content.modern-hero-content {
        padding: var(--space-4);
        margin: var(--space-2);
    }

    .service-hero .hero-title {
        font-size: var(--font-size-2xl);
    }

    .process-step.modern-timeline-item {
        padding-left: 3.5rem;
    }

    .process-step.modern-timeline-item .step-number {
        left: -1.25rem;
        width: 2.5rem;
        height: 2.5rem;
        font-size: var(--font-size-sm);
    }

    .cta-card.modern-card .card-body {
        padding: var(--space-6);
    }

    .cta-card .cta-title {
        font-size: var(--font-size-xl);
    }
}

/* ============================================
   SERVICE PAGES STYLES (Career & Marriage)
   Yellow and red color motif, following home page design
   ============================================ */

/* Problem section: cream background following home page design */
.problem-section {
    background: #fafbfc !important;
    /* Light gray background matching reference */
    padding: 80px 0;
    margin: 0;
}

/* Section header styles (common for all sections) */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-label {
    display: inline-block;
    background: #f0f2f5 !important;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    color: #666 !important;
    margin-bottom: 15px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.section-title {
    font-size: 36px !important;
    font-weight: var(--font-weight-bold) !important;
    margin-bottom: 15px;
    color: #333333 !important;
    letter-spacing: -0.5px !important;
}

.section-subtitle {
    font-size: 16px !important;
    color: #666 !important;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7 !important;
}

.problem-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.problem-card.modern-card {
    background: #ffffff !important;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid #e8e8e8;
}

.problem-card.modern-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.problem-number {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: #4bafa6 !important;
    /* Red background matching home page -> Green */
    color: #ffffff !important;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    font-weight: var(--font-weight-bold);
    margin-bottom: 20px;
}

.problem-title {
    color: #1a1a1a !important;
    font-size: 20px !important;
    font-weight: var(--font-weight-bold);
    margin-bottom: 15px;
    line-height: 1.3;
}

.problem-description {
    color: #666 !important;
    line-height: 1.8 !important;
    font-size: 15px !important;
    margin: 0;
}

/* Solution section: white background following home page design */
.solution-section {
    background: #ffffff !important;
    padding: 80px 0;
    margin: 0;
}

.solution-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.solution-item.modern-card {
    padding: 35px;
    background: #fafbfc !important;
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    transition: all 0.3s ease;
}

.solution-item.modern-card:hover {
    background: #ffffff !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.solution-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.solution-icon {
    width: 48px;
    height: 48px;
    background: #4bafa6 !important;
    /* Red gradient matching home page -> Green */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
}

.solution-title {
    color: #1a1a1a !important;
    font-size: 18px !important;
    font-weight: var(--font-weight-bold);
    margin: 0;
    line-height: 1.3;
}

.solution-description {
    color: #666 !important;
    line-height: 1.8 !important;
    font-size: 15px !important;
    margin: 0;
}

/* Achievement section: gradient background with red/yellow accents matching home page */
.achievement-section {
    background: linear-gradient(135deg, #ff8c5a 0%, #ff7043 100%) !important;
    /* Orange gradient with contrast */
    padding: 80px 0;
    margin: 0;
    color: #000000 !important;
}

.achievement-section .section-header {
    color: #000000 !important;
}

.achievement-section .section-label {
    background: rgba(0, 0, 0, 0.1) !important;
    color: #000000 !important;
}

.achievement-section .section-title {
    color: #000000 !important;
}

.achievement-section .section-subtitle {
    color: rgba(0, 0, 0, 0.9) !important;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.stats-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.stat-card.modern-card {
    text-align: center;
    padding: 30px 20px;
    padding: 30px 20px;
    background: rgba(255, 255, 255, 0.5) !important;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: all var(--transition-base);
}

.stat-card.modern-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.8) !important;
}

.stat-number {
    font-size: 42px !important;
    font-weight: var(--font-weight-bold);
    margin-bottom: 10px;
    color: #000000 !important;
    line-height: 1;
}

.stat-label {
    font-size: 14px !important;
    margin-bottom: 10px;
    opacity: 0.9;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: #000000 !important;
}

.stat-description {
    font-size: 13px !important;
    opacity: 0.8;
    line-height: 1.5 !important;
    color: #000000 !important;
    margin: 0;
}

/* ============================================
   TESTIMONIAL SECTION
   User testimonials/reviews section for service pages
   ============================================ */

/* Testimonial section: light gray background matching home page design */
.testimonial-section {
    background: #fafbfc !important;
    /* Light gray background matching home page */
    padding: 80px 0;
    margin: 0;
}

.testimonial-section .section-header {
    text-align: center;
    margin-bottom: 60px;
}

.testimonial-section .section-label {
    background: #f0f2f5 !important;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    color: #666 !important;
    margin-bottom: 15px;
    font-weight: 500;
    letter-spacing: 0.5px;
    display: inline-block;
}

.testimonial-section .section-title {
    font-size: 36px !important;
    font-weight: var(--font-weight-bold) !important;
    margin-bottom: 15px;
    color: #1a1a1a !important;
    letter-spacing: -0.5px !important;
}

.testimonial-section .section-subtitle {
    font-size: 16px !important;
    color: #666 !important;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7 !important;
}

.testimonial-list {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.testimonial-list-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* Testimonial item: left image, right comment layout */
.testimonial-item.modern-card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 40px;
    align-items: center;
    padding: var(--space-8);
    background: #ffffff !important;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid #e8e8e8;
    transition: all 0.3s ease;
}

.testimonial-item.modern-card.no-image {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 20px;
    align-items: flex-start;
}

.testimonial-item.modern-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Testimonial image: left side */
.testimonial-image {
    flex-shrink: 0;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    background: #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Testimonial content: right side */
.testimonial-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.testimonial-quote {
    margin-bottom: var(--space-4);
}

.testimonial-text {
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #1a1a1a !important;
    margin: 0;
    font-style: italic;
}

.testimonial-author {
    margin-top: auto;
}

.testimonial-name {
    font-size: 18px !important;
    font-weight: var(--font-weight-bold) !important;
    color: #1a1a1a !important;
    margin: 0 0 var(--space-1);
}

.testimonial-position {
    font-size: 14px !important;
    color: #666 !important;
    margin: 0;
}

/* Mobile: Stack layout (image on top, content below) */
@media (max-width: 768px) {
    .testimonial-item.modern-card {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        padding: var(--space-6);
        text-align: center;
    }

    .testimonial-image {
        width: 150px;
        height: 150px;
        margin: 0 auto;
    }

    .testimonial-content {
        text-align: left;
    }

    .testimonial-section .section-title {
        font-size: 28px !important;
    }

    .testimonial-text {
        font-size: 15px !important;
    }

    .testimonial-name {
        font-size: 16px !important;
    }
}

/* Consultation flow section: cream background following home page design */
.consultation-flow-section {
    background: #fafbfc !important;
    padding: 80px 0;
    margin: 0;
}

/* Process timeline: white background matching other card designs */
.process-timeline {
    max-width: 900px;
    margin: 0 auto;
    background: #ffffff !important;
    /* White background matching other card designs */
    padding: var(--space-8);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    /* Soft shadow matching other cards */
    border: 1px solid #e8e8e8;
    /* Subtle border matching other cards */
}

/* Consultation flow step: new class name for service pages (career/marriage) */
.consultation-flow-step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 40px;
    position: relative;
    padding: var(--space-6);
    background: #ffffff !important;
    /* White background matching other card designs */
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    /* Subtle border matching other cards */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    /* Soft shadow matching other cards */
    transition: all var(--transition-base);
}

.consultation-flow-step:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    /* Enhanced shadow on hover */
    transform: translateY(-2px);
}

.consultation-flow-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 29px;
    top: 60px;
    width: 2px;
    height: calc(100% + 20px);
    background: #e0e0e0;
    /* Lighter gray connecting line */
    z-index: 0;
}

/* Keep original process-step for other pages that use it */
.process-step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 40px;
    position: relative;
}

.process-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 29px;
    top: 60px;
    width: 2px;
    height: calc(100% + 20px);
    background: #ddd;
}

.step-circle {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: #ffffff !important;
    border: 3px solid #4bafa6 !important;
    /* Red border matching home page -> Green */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    color: #4bafa6 !important;
    /* Red text matching home page -> Green */
    margin-right: 30px;
    position: relative;
    z-index: 1;
}

.step-content {
    flex: 1;
    padding: 10px 0;
}

.step-label {
    display: inline-block;
    background: #4bafa6 !important;
    /* Red background matching home page -> Green */
    color: #ffffff !important;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.step-title {
    font-size: 20px !important;
    font-weight: var(--font-weight-bold);
    margin-bottom: 10px;
    color: #1a1a1a !important;
    line-height: 1.3;
}

.step-description {
    color: #666 !important;
    line-height: 1.8 !important;
    font-size: 15px !important;
    margin: 0;
}

/* Footer CTA section */
.footer-cta-section {
    background: #4bafa6 !important;
    padding: 80px 0;
    margin: 0;
    text-align: center;
    color: #ffffff !important;
}

.footer-cta-title {
    font-size: 36px !important;
    margin-bottom: 20px;
    font-weight: var(--font-weight-bold);
    color: #000000 !important;
}

.footer-cta-description {
    font-size: 18px !important;
    margin-bottom: 40px;
    opacity: 0.9;
    color: #000000 !important;
}

.footer-cta-button {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Mobile responsive adjustments for service pages */
@media (max-width: 768px) {
    .section-title {
        font-size: 28px !important;
    }

    .problem-cards {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .solution-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .stats-grid,
    .stats-grid-3,
    .testimonial-list-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* Consultation flow step: mobile responsive */
    .consultation-flow-step {
        flex-direction: column;
        padding: var(--space-4);
    }

    .consultation-flow-step .step-circle {
        margin-right: 0;
        margin-bottom: 20px;
    }

    .consultation-flow-step:not(:last-child)::after {
        display: none;
    }

    /* Keep original process-step for other pages */
    .process-step {
        flex-direction: column;
    }

    .process-step .step-circle {
        margin-right: 0;
        margin-bottom: 20px;
    }

    .process-step:not(:last-child)::after {
        display: none;
    }

    .footer-cta-title {
        font-size: 28px !important;
    }

    .footer-cta-description {
        font-size: 16px !important;
    }
}

/* ============================================
   後方互換性のためのエイリアス（将来削除予定）
   ============================================ */

/* 各ページ固有のヒーロークラス（共通ヒーローセクションに統一済み） */
.company-hero,
.service-hero,
.recruit-hero,
.news-hero,
.contact-hero {
    /* 共通ヒーローセクションのスタイルを継承 */
}

.contact-inquiry-fieldset .wpcf7-form-control {
    width: 100%;
}

.contact-inquiry-fieldset .wpcf7-list-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    width: auto;
}

.contact-inquiry-fieldset .wpcf7-form-control-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.contact-inquiry-fieldset input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
}

.contact-inquiry-fieldset .wpcf7-list-item>label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

@media (max-width: 767px) {
    .contact-inquiry-fieldset .wpcf7-form-control-wrap {
        flex-direction: column;
        align-items: flex-start;
    }

    .contact-inquiry-fieldset .wpcf7-list-item {
        width: 100%;
    }
}

/* Service Introduction Section */
.service-intro-section.modern-section {
    background: #f7f4fe !important;
}

.service-intro-text {
    max-width: 800px;
    margin: 0 auto;
    color: #000000 !important;
    font-size: var(--font-size-lg);
    line-height: 2.2;
    text-align: left;
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "HGS Mincho E", "MS PMincho", "MS Mincho", serif !important;
    font-weight: 500;
}

/* ========================================
   SECTION: ANIMATIONS
   Scroll-triggered slide-in animations
   ======================================== */
/* Career Values Section Styling */
.career-values-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.career-values-item {
    padding-bottom: 1rem;
}

.career-values-row {
    background-color: #faf3ea;
    padding: 1.25rem 1.5rem;
    border-radius: 999px;
    /* Pill shape for "cut out" look */
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    /* Subtle shadow */
}

.career-values-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: #d40f20;
    /* Brand red */
    line-height: 1;
    font-family: var(--font-heading);
}

.career-values-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
    color: #333;
    line-height: 1.3;
}

.career-values-description {
    padding: 0 1.5rem;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

@media (min-width: 1024px) {
    .fade-up {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1.5s ease-out, transform 1.5s ease-out;
        will-change: opacity, transform;
    }

    .fade-up.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Stagger delays for grid items */
    .fade-up.delay-100 {
        transition-delay: 0.1s;
    }

    .fade-up.delay-200 {
        transition-delay: 0.2s;
    }

    .fade-up.delay-300 {
        transition-delay: 0.3s;
    }
}

/* ========================================
   USER REQUEST: HEADER & FOOTER FONT (Klee One)
   ======================================== */
.site-header,
.site-footer,
.site-header a,
.site-footer a,
.site-footer p,
.site-footer li,
.site-footer h3,
.site-footer h4,
.mobile-menu-content,
.mobile-menu-content a,
.site-header .btn-contact,
.mobile-menu a,
.mobile-parent-btn,
.mobile-submenu a {
    font-family: var(--font-klee-one) !important;
}

/* Single Recruit Page Specifics */
.recruit-page .application-title,
.recruit-page .related-jobs-section .section-title {
    color: #000000 !important;
    font-family: var(--font-heading) !important;
}

/* News Page Specifics & Overrides */
body.news-page,
body.news-page h1,
body.news-page h2,
body.news-page h3,
body.news-page h4,
body.news-page h5,
body.news-page h6,
body.news-page p,
body.news-page a,
body.news-page li,
body.news-page span,
body.news-page .section-title,
body.news-page .news-archive-title,
body.news-page .news-card__title,
body.news-page .news-card__excerpt,
body.news-page .news-card__date,
body.news-page .blog-title,
body.news-page .entry-content {
    font-family: var(--font-klee-one) !important;
}

/* Ensure Montserrat overrides for specific news elements are handled */
.news-page .news-archive-title,
.news-page .section-title,
.news-page .blog-title {
    font-family: var(--font-heading) !important;
}

/* Home Page Specifics */
body.home .news-section__title,
body.home .section-title {
    font-family: var(--font-heading) !important;
}

/* ==========================================================================
   New Message & Values Section Design (Teal Theme)
   ========================================================================== */

/* Teal Theme Colors */
:root {
    --brand-50: #f0fdfa;
    --brand-100: #ccfbf1;
    --brand-200: #99f6e4;
    --brand-500: #14b8a6;
    --brand-600: #0d9488;
    --brand-900: #134e4a;
}

.career-values-section--new {
    padding: var(--space-20) 0;
    min-height: auto;
    background-color: #ffffff !important;
}

/* ========================================
   Zigzag Layout Styles (Message & Values)
   ======================================== */

.zigzag-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    /* space-y-24/32 */
}

.zigzag-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: center;
}

@media (min-width: 768px) {
    .zigzag-item {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-16);
    }
}

/* Image Area */
.zigzag-image-area {
    position: relative;
    z-index: 1;
}

.zigzag-image-container {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-2xl);
    position: relative;
    z-index: 10;
}

.zigzag-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.zigzag-item:hover .zigzag-image {
    transform: scale(1.05);
}

.zigzag-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent);
}

/* Dekorations */
.decor-circle {
    position: absolute;
    bottom: -1.5rem;
    left: -1.5rem;
    width: 6rem;
    height: 6rem;
    border-radius: 9999px;
    background-color: var(--brand-100);
    filter: blur(24px);
    opacity: 0.7;
    z-index: 0;
}

.decor-box {
    position: absolute;
    top: -1.5rem;
    right: -1.5rem;
    width: 8rem;
    height: 8rem;
    border: 1px solid var(--brand-200);
    border-radius: var(--radius-2xl);
    z-index: -10;
    transform: rotate(6deg);
    transition: transform 0.5s;
}

.zigzag-item:hover .decor-box {
    transform: rotate(12deg);
}

.decor-box.reverse {
    transform: rotate(-6deg);
}

.zigzag-item:hover .decor-box.reverse {
    transform: rotate(-12deg);
}

/* Text Area */
.zigzag-text-area {
    padding-left: 0;
}

@media (min-width: 768px) {
    .zigzag-text-area {
        padding-left: var(--space-8);
    }
}

.zigzag-number-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.zigzag-number {
    font-size: 3.75rem;
    /* 6xl */
    font-weight: 300;
    font-family: var(--font-sans);
    /* Use sans as per design, or theme font */
    letter-spacing: -0.05em;
    line-height: 1;
    color: var(--brand-200);
    transition: color 0.3s;
}

.zigzag-item:hover .zigzag-number {
    color: var(--brand-500);
}

.zigzag-divider {
    height: 1px;
    flex-grow: 1;
    background-color: #e5e7eb;
    /* gray-200 */
}

.zigzag-title {
    font-size: 1.5rem;
    /* 2xl */
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-6);
    line-height: 1.375;
}

@media (min-width: 768px) {
    .zigzag-title {
        font-size: 1.875rem;
        /* 3xl */
    }
}

.zigzag-desc {
    color: var(--text-secondary);
    /* gray-600 equivalent */
    line-height: 1.625;
    font-size: 1.125rem;
    /* lg */
}

/* Alternating Order Utilities */
.order-1-md {
    order: 1;
}

.order-2-md {
    order: 2;
}

@media (max-width: 767px) {

    /* Mobile: Image always top (order 1), text bottom (order 2) generally? 
       User reference: 
       Item 1: Image(order 2), Text(order 1)? Wait.
       User Code Item 1: Image(order-2 md:order-1) -> Mobile: Image is BELOW text??
       Let's check user code again.
       Item 1: 
         Image: order-2 md:order-1
         Text: order-1 md:order-2
         Mobile: Text(1) -> Image(2). Text comes first.
       
       Item 2:
         Text: order-1 (md:pl-8)
         Image: order-2
         Mobile: Text(1) -> Image(2).
         
       Wait, usually image first is preferred on mobile?
       But user code specifically put image order-2 on mobile for Item 1.
       I will follow the user's code structure exactly.
    */
    .mobile-order-1 {
        order: 1;
    }

    .mobile-order-2 {
        order: 2;
    }
}

@media (min-width: 768px) {
    .md-order-1 {
        order: 1;
    }

    .md-order-2 {
        order: 2;
    }

    .md-pl-8 {
        padding-left: var(--space-8);
    }

    .md-pr-8 {
        padding-right: var(--space-8);
    }
}

/* Home Page Background Unification */
body.home .services-section,
body.home .news-section,
body.home .access-section {
    background-color: #ffffff !important;
}

/* Career Page Specifics */
.service-intro-text,
.service-intro-section .section-title {
    font-family: var(--font-klee-one) !important;
}

/* Section Header */
.section-header-new {
    margin-bottom: var(--space-20);
    position: relative;
}

.section-label-new {
    display: block;
    color: var(--brand-600);
    font-weight: 700;
    letter-spacing: 0.1em;
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-3);
    font-family: var(--font-heading);
}

.section-title-new {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: #111827;
    /* Gray 900 */
    margin-bottom: var(--space-6);
    font-family: var(--font-heading) !important;
}

@media (min-width: 768px) {
    .section-title-new {
        font-size: var(--font-size-4xl);
    }
}

.section-divider-new {
    width: 80px;
    height: 4px;
    background-color: var(--brand-500);
    display: none;
    /* Hide divider lines */
}

/* Ensure no borders on home page section titles */
body.home .section-title,
body.home .news-section__title {
    border: none !important;
}

/* Service Intro specific line removal */
.service-intro-section.modern-section {
    border: none !important;
}

/* Values List */
.value-card-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

/* Value Card */
.value-card {
    position: relative;
    background-color: #f9fafb;
    /* Gray 50 */
    border-radius: 1rem;
    padding: var(--space-8);
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

@media (min-width: 768px) {
    .value-card {
        padding: var(--space-12);
    }
}

.value-card:hover {
    background-color: #ffffff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    /* shadow-xl */
    border-color: #f3f4f6;
    /* gray-100 */
}

.value-card-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    align-items: flex-start;
}

@media (min-width: 768px) {
    .value-card-content-wrapper {
        flex-direction: row;
        gap: var(--space-12);
    }
}

/* Number */
.value-card-number {
    flex-shrink: 0;
}

.value-card-number span {
    font-size: 3.75rem;
    /* 6xl */
    line-height: 1;
    font-weight: 300;
    color: var(--brand-200);
    letter-spacing: -0.05em;
    transition: color 0.3s ease;
    font-family: var(--font-heading);
    /* Keep font as requested */
}

@media (min-width: 768px) {
    .value-card-number span {
        font-size: 4.5rem;
        /* 7xl */
    }
}

.value-card:hover .value-card-number span {
    color: var(--brand-500);
}

/* Content Text */
.value-card-text {
    flex-grow: 1;
    padding-top: var(--space-2);
}

.value-card-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: #111827;
    margin-bottom: var(--space-4);
    line-height: 1.375;
    font-family: var(--font-heading) !important;
}

@media (min-width: 768px) {
    .value-card-title {
        font-size: var(--font-size-3xl);
    }
}

.value-card-description {
    color: #4b5563;
    /* Gray 600 */
    line-height: 1.625;
    font-size: var(--font-size-lg);
    margin: 0;
    font-family: var(--font-body);
}

/* Arrow Icon */
.value-card-arrow {
    display: none;
}

@media (min-width: 768px) {
    .value-card-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 9999px;
        border: 1px solid #e5e7eb;
        /* gray-200 */
        color: #d1d5db;
        /* gray-300 */
        transition: all 0.3s ease;
        flex-shrink: 0;
    }

    .value-card:hover .value-card-arrow {
        border-color: var(--brand-500);
        color: var(--brand-500);
        background-color: var(--brand-50);
        transform: rotate(45deg);
    }
}

.value-card-arrow .material-icons {
    font-size: 1.125rem;
    /* text-lg */
}

/* ============================================
   Announcement Item (Important Notice) Design
   ============================================ */

:root {
    /* Colors */
    --color-primary-dark-blue: #1C3F78;
    --color-text-light: #FFFFFF;
    --color-background-white: #FFFFFF;
    --color-text-date-grey: #828282;
    --color-text-main-grey: #4A4A4A;
    --color-border-light-grey: #EEEEEE;
    --color-arrow-grey: #A0A0A0;

    /* Spacing */
    --spacing-xxs: 4px;
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 20px;
    --spacing-xl: 24px;
    --spacing-xxl: 32px;

    /* Component Dimensions & Layout */
    --announcement-height-desktop: 64px;
    --category-width-desktop: 180px;

    /* Font variables omitted to preserve site default fonts */
    --font-size-category: 1rem;
    --font-size-date: 0.875rem;
    --font-size-text: 0.9375rem;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
}

/* Announcement Item Component */
.announcement-item {
    display: flex;
    align-items: stretch;
    min-height: var(--announcement-height-desktop);
    border-bottom: 1px solid var(--color-border-light-grey);
    background-color: var(--color-background-white);
    width: 100%;
    box-sizing: border-box;
}

.announcement-item *,
.announcement-item *::before,
.announcement-item *::after {
    box-sizing: inherit;
}

.announcement-item__category {
    background-color: var(--color-primary-dark-blue);
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md) var(--spacing-xl);
    flex-shrink: 0;
    width: var(--category-width-desktop);
    /* Ensure font inheritance */
    font-family: inherit;
}

.announcement-item__category-text {
    font-size: var(--font-size-category);
    font-weight: bold;
    /* User requested bold */
    margin: 0;
    white-space: nowrap;
    color: #ffffff;
    /* Explicitly set to white */
}

.announcement-item__content {
    flex-grow: 1;
    display: flex;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-xl);
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.announcement-item__details {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    flex-grow: 1;
    min-width: 0;
}

.announcement-item__date {
    color: var(--color-text-date-grey);
    font-size: var(--font-size-date);
    font-weight: var(--font-weight-regular);
    flex-shrink: 0;
    white-space: nowrap;
}

.announcement-item__text {
    color: var(--color-text-main-grey);
    font-size: var(--font-size-text);
    font-weight: var(--font-weight-regular);
    margin: 0;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.announcement-item__arrow {
    font-size: var(--font-size-text);
    color: var(--color-arrow-grey);
    margin-left: var(--spacing-xl);
    flex-shrink: 0;
}

/* Responsiveness - Tablet (max-width: 768px) */
@media (max-width: 768px) {
    .announcement-item {
        /* Update root vars locally if needed or just override */
    }

    /* Override vars for this scope if possible, or just use hardcoded overrides if vars are global */
    /* Since vars are in :root, we can't easily change them inside a media query for just this component unless we scope them to .announcement-item. 
     But let's stick to the generated CSS logic. */

    .announcement-item__category {
        padding: 12px 16px;
        /* --spacing-md --spacing-lg approx */
        width: 150px;
        /* --category-width-desktop for tablet */
    }

    .announcement-item__category-text {
        font-size: 0.9375rem;
    }

    .announcement-item__content {
        padding: 12px 16px;
    }

    .announcement-item__details {
        gap: 16px;
        /* --spacing-lg */
    }

    .announcement-item__date {
        font-size: 0.8125rem;
    }

    .announcement-item__text {
        font-size: 0.875rem;
    }

    .announcement-item__arrow {
        margin-left: 16px;
    }
}

/* Responsiveness - Mobile (max-width: 375px) */
@media (max-width: 480px) {

    /* Slightly broader mobile breakpoint */
    .announcement-item {
        flex-direction: column;
        min-height: auto;
    }

    .announcement-item__category {
        width: 100%;
        padding: 10px 12px;
        justify-content: flex-start;
    }

    .announcement-item__category-text {
        font-size: 0.875rem;
    }

    .announcement-item__content {
        padding: 10px 12px;
    }

    .announcement-item__details {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .announcement-item__date {
        font-size: 0.75rem;
        white-space: normal;
    }

    .announcement-item__text {
        font-size: 0.8125rem;
        white-space: normal;
        text-overflow: clip;
    }

    .announcement-item__arrow {
        margin-left: 10px;
        margin-top: 4px;
        /* Adjustment */
    }
}

/* ============================================
   Mobile Horizontal Overflow Fix
   ============================================ */
@media (max-width: 768px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        /* Prevent horizontal scroll */
    }

    #page,
    .site,
    .site-content,
    .wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding-left: 0;
        padding-right: 0;
    }

    /* Method 1: Shrink width to create gutters */
    .container {
        /* 16px gutter * 2 = 32px */
        width: min(calc(100% - 32px), 100%) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Ensure images/videos don't overflow */
    img,
    video,
    iframe {
        max-width: 100%;
        height: auto;
    }
}

/* ============================================
   Hero Section Slider (Carousel) - Modified to Static
   ============================================ */
.hero-slider-section {
    position: relative;
    width: 100%;
    height: 100vh;
    /* Full viewport height */
    overflow: hidden;
    background-color: #000;
}

.hero-slide {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Animation: Fade In (PowerPoint-like) */
    opacity: 0;
    will-change: opacity;
    animation: heroFadeIn 3s ease-out forwards;
}

@keyframes heroFadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Mobile: Reduce hero height/size */
@media (max-width: 768px) {
    .hero-slider-section {
        height: 50vh;
        /* Reduced from 100vh */
        min-height: 300px;
        /* Ensure usage height */
    }

    .hero-slide {
        background-position: center top;
    }
}

/* ============================================
   Scroll Reveal Animation
   ============================================ */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Company Overview Heading Font Fix */
.company-overview-heading {
    font-family: var(--font-klee-one);
    font-weight: 600;
}