/* -------------------------------------------------------------------
   Design Tokens
------------------------------------------------------------------- */
:root {
    /* Colors (青ベース) */
    --color-bg: #FFFFFF;
    --color-text: #2C2C2C;
    --color-text-light: #666666;
    --color-accent: #193E65;
    --color-primary: #2B70D6;
    --color-accent-hover: #132D4A;
    --color-blue-light: #F0F6FC;
    --color-secondary-light: #E6EFF8;
    --color-service-bg: #6B7A99;
    --color-border: #EAEAEA;
    --color-form-bg: #F9FBFC;
    --color-required: #FF5A5F;
    --color-optional: #94A3B8;

    /* Typography */
    --font-ja: 'Noto Sans JP', sans-serif;
    --font-en: 'Poppins', sans-serif;

    /* Layout */
    --container-width: 1160px;
    --header-height: 80px;
    --radius-lg: 24px;
    --radius-sm: 8px;

    /* Transitions */
    --transition-smooth: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-fast: all 0.3s ease;
}

/* -------------------------------------------------------------------
   Reset & Base
------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-ja);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.8;
    letter-spacing: 0.05em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    position: relative;
    isolation: isolate;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-fast);
}

ul { list-style: none; }

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 40px;
}

/* -------------------------------------------------------------------
   Utility Classes
------------------------------------------------------------------- */
br.pc-only { display: block; }
br.sp-only { display: none; }
br.sp-xs   { display: none; }

@media (max-width: 768px) {
    .container { padding: 0 24px; }
    br.pc-only { display: none; }
    br.sp-only { display: block; }
}
@media (max-width: 400px) {
    br.sp-xs { display: block; }
}

/* 1200px以下: ヘッダーとヒーローの重なり防止 */
@media (max-width: 1200px) {
    .hero,
    .about-hero,
    .hero-service,
    .hero-product,
    .hero-recruit {
        padding-top: calc(var(--header-height) + 40px);
    }
}

/* -------------------------------------------------------------------
   Background Effects
------------------------------------------------------------------- */
.bg-noise {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: -1;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.pattern-dots-wrap {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -2;
    background-color: var(--color-bg);
    background-image: radial-gradient(circle, rgba(25, 62, 101, 0.05) 1.5px, transparent 2px);
    background-size: 36px 36px;
    pointer-events: none;
}

/* SP: 重いエフェクトを無効化してパフォーマンス改善 */
@media (max-width: 768px) {
    .bg-noise { display: none; }
}

/* -------------------------------------------------------------------
   Typography Utilities & Section Title
------------------------------------------------------------------- */
.text-en {
    font-family: var(--font-en);
    letter-spacing: 0.15em;
}

.sec-title { margin-bottom: 60px; }
.sec-title.center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.sec-title .en {
    display: flex; align-items: center; font-family: var(--font-en); color: var(--color-accent);
    font-size: 13px; font-weight: 500; letter-spacing: 0.25em; margin-bottom: 12px; text-transform: uppercase;
}
.sec-title.center .en { justify-content: center; }
.sec-title .en::before {
    content: ''; display: inline-block; width: 24px; height: 2px;
    background-color: var(--color-primary); opacity: 0.6; transform: rotate(-45deg); margin-right: 16px;
}
.sec-title .ja {
    font-size: clamp(28px, 4vw, 36px); font-weight: 500;
    letter-spacing: 0.1em; line-height: 1.4; color: var(--color-text);
}

@media (max-width: 768px) {
    .sec-title .ja { font-size: 28px; }
    .sec-title { margin-bottom: 40px; }
}

/* -------------------------------------------------------------------
   Sections General
------------------------------------------------------------------- */
.section { padding: 140px 0; }
@media (max-width: 768px) { .section { padding: 70px 0; } }

/* -------------------------------------------------------------------
   Breadcrumb
------------------------------------------------------------------- */
.breadcrumb {
    font-family: var(--font-en); font-size: 13px;
    color: var(--color-text-light); letter-spacing: 0.1em;
}
.breadcrumb a { transition: var(--transition-fast); }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb span { margin: 0 12px; opacity: 0.4; }

/* -------------------------------------------------------------------
   UI Components (Buttons)
------------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 16px 20px 16px 36px; font-family: var(--font-en); font-weight: 500;
    font-size: 14px; letter-spacing: 0.1em; border-radius: 500px;
    background: var(--color-accent); color: #fff; border: 1px solid var(--color-accent);
    transition: var(--transition-smooth); position: relative; overflow: hidden; cursor: pointer;
}
.btn::after {
    content: ''; display: inline-block; width: 36px; height: 36px; margin-left: 24px;
    border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
    background-size: 16px; background-position: center; background-repeat: no-repeat;
    transition: var(--transition-smooth);
}
.btn:hover {
    background: var(--color-accent-hover); border-color: var(--color-accent-hover);
    box-shadow: 0 8px 20px rgba(25, 62, 101, 0.15);
}
.btn:hover::after { border-color: rgba(255, 255, 255, 0.8); }

/* Outline Button (light bg) */
.btn--outline { background: #fff; color: var(--color-text); border: 1px solid #C8C8C8; }
.btn--outline::after {
    border-color: #C8C8C8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C2C2C' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
}
.btn--outline:hover { background: var(--color-bg); border-color: var(--color-text); }
.btn--outline:hover::after { border-color: var(--color-text); }

/* Outline White Button (dark bg) */
.btn--outline-white { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.5); }
.btn--outline-white::after {
    border-color: rgba(255, 255, 255, 0.5);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
}
.btn--outline-white:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; }
.btn--outline-white:hover::after { border-color: #fff; }

/* Ghost Button */
.btn--ghost { background: rgba(255, 255, 255, 0.4); color: var(--color-text); border: 1px solid rgba(255, 255, 255, 0.6); }
.btn--ghost::after {
    border-color: rgba(44, 44, 44, 0.2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C2C2C' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
}
.btn--ghost:hover { background: #fff; border-color: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.04); }
.btn--ghost:hover::after { border-color: rgba(44, 44, 44, 0.4); }