/* =========================================
   BASE SETTINGS (Light Theme with Dark FV)
   ========================================= */
:root {
    --black: #0a0a0a;
    --white: #ffffff;
    --text-main: #111111; /* 本文は黒 */
    --line-color: rgba(0, 0, 0, 0.1); /* 線の色は薄い黒 */
    
    /* フォント設定（Futura風 + Zen角ゴシック） */
    --font-display: 'Jost', sans-serif;
    --font-main: 'Jost', 'Zen Kaku Gothic New', sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    cursor: none; /* カスタムカーソル用 */
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    /* ▼▼▼ ここを変更：基本背景を白に ▼▼▼ */
    background-color: var(--white);
    color: var(--text-main);
    font-family: var(--font-main);
    overflow-x: hidden;
    line-height: 1.8;
    letter-spacing: 0.08em;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
li { list-style: none; }

/* =========================================
   CUSTOM CURSOR (Blend Mode)
   ========================================= */
.cursor, .cursor-follower {
    position: fixed; top: 0; left: 0; border-radius: 50%;
    pointer-events: none; z-index: 9999;
    transform: translate(-50%, -50%); transition: transform 0.1s;
    /* 背景色に合わせて色が変わる魔法の設定 */
    mix-blend-mode: difference;
}
.cursor { width: 8px; height: 8px; background-color: #fff; }
.cursor-follower {
    width: 40px; height: 40px; border: 1px solid #fff;
    transition: transform 0.15s, width 0.3s, height 0.3s;
}
.cursor-hover .cursor-follower {
    width: 60px; height: 60px; background-color: rgba(255,255,255,1);
}

/* =========================================
   GRID LINES (Light Version)
   ========================================= */
.grid-lines {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0; display: flex; justify-content: space-around;
}
.line {
    width: 1px; height: 100%;
    /* 白背景用に薄いグレーの線に変更 */
    background: rgba(0, 0, 0, 0.05);
}

/* =========================================
   HEADER (Dynamic Glass Capsule)
   ========================================= */
.header {
    position: fixed;
    top: 20px; left: 50%;
    transform: translateX(-50%);
    width: 90%; max-width: 1000px;
    height: 64px;
    
    /* ▼▼▼ FVにいる時の設定（変更点） ▼▼▼ */
    /* 透明ではなく、薄いガラスを表示させる */
    background: rgba(255, 255, 255, 0.1); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    /* 枠線と影 */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
    
    border-radius: 100px;
    
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 30px; z-index: 1000;
    
    /* 文字色は「白」 */
    color: #fff;
    transition: all 0.4s ease;
}

/* ▼▼▼ ロゴの設定（FV時は白にする） ▼▼▼ */
.logo img { 
    height: 28px; width: auto; display: block; 
    transition: 0.4s;
    
    /* 黒いロゴ画像を強制的に「真っ白」にするフィルタ */
    filter: brightness(0) invert(1);
}

/* ▼▼▼ スクロール後の設定（FVを越えたら） ▼▼▼ */
.header.scrolled {
    /* 背景を白くして見やすく */
    background: rgba(255, 255, 255, 0.6); 
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    
    /* 文字色を「黒」に戻す */
    color: #000;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

/* スクロール後はロゴを「元の色（黒）」に戻す */
.header.scrolled .logo img {
    filter: none; 
}

/* --- 以下、ナビゲーションのスタイル（そのまま） --- */
.pc-nav ul { display: flex; gap: 40px; }
.pc-nav a {
    font-family: var(--font-display); font-size: 0.8rem; font-weight: 600;
    letter-spacing: 0.05em; position: relative;
    color: inherit; /* 親の色（白or黒）に従う */
}
.pc-nav a::after {
    content: ''; position: absolute; bottom: -4px; left: 0;
    width: 0; height: 1px; background: currentColor; transition: width 0.3s;
}
.pc-nav a:hover::after { width: 100%; }

.hamburger { display: none; width: 30px; height: 14px; position: relative; cursor: none; }
.hamburger span {
    position: absolute; width: 100%; height: 2px;
    background: currentColor; /* 親の色（白or黒）に従う */
    transition: 0.4s;
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { bottom: 0; }

/* =========================================
   HEADER CONTACT BUTTON (High CTR Design)
   ========================================= */

/* 1. ボタンの基本形状（FV時：白背景・黒文字） */
.pc-nav a.nav-btn {
    background: #fff;       /* 背景を白に */
    color: #000 !important; /* 文字を黒に */
    padding: 10px 24px;
    border-radius: 50px;
    border: 1px solid #fff;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.pc-nav a.nav-btn::after { display: none; }

/* ホバー時（少し浮く） */
.pc-nav a.nav-btn:hover {
    background: transparent;
    color: #fff !important;
    transform: translateY(-2px);
}

/* 2. スクロール後 OR 下層ページ（黒背景・白文字に反転） */
/* ▼▼▼ ここを修正：下層ページ(.lower-page)の時も対象にする ▼▼▼ */
.header.scrolled .pc-nav a.nav-btn,
body:has(.lower-page) .pc-nav a.nav-btn {
    background: #000;       /* 背景を黒に */
    color: #fff !important; /* 文字を白に */
    border-color: #000;     /* 枠線も黒に */
}

/* その状態でのホバー（枠線だけのボタンに変化） */
.header.scrolled .pc-nav a.nav-btn:hover,
body:has(.lower-page) .pc-nav a.nav-btn:hover {
    background: transparent;    /* 背景透明 */
    color: #000 !important;     /* 文字は黒 */
    border-color: #000;         /* 枠線は黒 */
}

/* =========================================
   RESPONSIVE SETTINGS (Final Version)
   ========================================= */

/* 1. 基本設定：PC画面ではスマホメニューを「完全に」消す */
/* これがないとPC画面で変な文字が表示されてしまいます */
.sp-nav-menu {
    display: none;
}

/* 2. スマホ画面（768px以下）だけの特別ルール */
@media screen and (max-width: 768px) {
    
    /* ヘッダーをスマホサイズに */
    .header { 
        width: 92%; 
        padding: 0 20px; 
        height: 56px; 
    }

    /* PC用のメニューを消す */
    .pc-nav { display: none; }
    
    /* ハンバーガーボタンを表示する */
    .hamburger { display: block; }
    
    /* 下層ページの余白調整 */
    .contact-page-wrapper, .legal-page {
        padding-top: 120px;
    }

    /* ▼▼▼ 重要：スマホメニューの復活とデザイン ▼▼▼ */
    .sp-nav-menu {
        /* display: none を display: flex に上書きして復活させる */
        display: flex; 
        position: fixed; 
        top: 0; left: 0; width: 100%; height: 100vh;
        background: #fff; /* 背景は白 */
        z-index: 999;
        flex-direction: column;
        justify-content: center; 
        align-items: center;
        
        /* アニメーションの初期状態（隠しておく） */
        opacity: 0; 
        visibility: hidden; 
        transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    }

    /* ハンバーガーが押された時（activeクラスがついた時） */
    .sp-nav-menu.active {
        opacity: 1;
        visibility: visible;
    }
    
    /* メニュー内のリンク文字 */
    .nav-links a {
        display: block; 
        font-family: var(--font-display); 
        font-size: 2.5rem; /* 大きく押しやすく */
        color: #000; 
        margin: 15px 0;
        text-decoration: none;
        font-weight: 500;
    }
}

/* =========================================
   FIRST VIEW (FV) - Always Dark
   ========================================= */
.fv {
    position: relative; height: 100vh; width: 100%; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    /* FVだけは黒背景・白文字の世界 */
    background: #000;
    color: #fff;
}
.video-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.video-wrap video { width: 100%; height: 100%; object-fit: cover; }
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); }

.fv-content { position: relative; z-index: 2; width: 100%; padding: 0 5%; }
.hero-text {
    font-family: var(--font-display); 
    font-size: 8vw; 
    line-height: 0.9;
    font-weight: 500; 
    letter-spacing: 0.1em; 
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,0.9);
    
    /* アニメーション初期状態 */
    opacity: 0; 
    /* ここでは transform を指定しない（個別の設定に任せる） */
    
    animation: textReveal 1.5s forwards 1s ease-out;
}
/* 文字全体を包む枠：ここで画面中央に配置する */
.hero-text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* 左右中央揃え */
    width: 100%;
}

/* 1行目 (ARCHITECTURE): 中央から少し「左」へずらす */
.hero-text:nth-child(1) {
    transform: translateX(-6vw); /* 左へ6vw移動 */
    --final-x: -6vw;
}

/* 2行目 (OF THE FUTURE): 中央から少し「右」へずらす */
.hero-text:nth-child(2) {
    color: #fff;
    -webkit-text-stroke: 0;
    transform: translateX(6vw); /* 右へ6vw移動 */
    --final-x: 6vw;
}
@keyframes textReveal { 
    0% { 
        opacity: 0; 
        transform: translate(var(--final-x), 50px); /* 指定位置より下から */
    }
    100% { 
        opacity: 1; 
        transform: translate(var(--final-x), 0); /* 指定位置へ */
    } 
}

.fv-footer {
    position: absolute; bottom: 40px; left: 5%; right: 5%;
    display: flex; justify-content: space-between; font-size: 0.75rem;
    font-family: var(--font-display); color: rgba(255,255,255,0.7);
}

/* =========================================
   LOWER PAGE HEADER FIX (全メニューの修正)
   ========================================= */

/* 1. 下層ページでは、ヘッダー背景を最初から「白」にする */
body:has(.lower-page) .header {
    background: rgba(255, 255, 255, 0.9); /* 白背景 */
    border-color: rgba(0, 0, 0, 0.1);     /* 枠線は薄い黒 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    top: 10px; /* 位置調整 */
}

/* 2. ロゴの色を「黒」に戻す（フィルター解除） */
body:has(.lower-page) .header .logo img {
    filter: none; /* 反転なし＝元の黒い画像を表示 */
}

/* 3. メニュー文字（SERVICE, COMPANY等）を「黒」にする */
body:has(.lower-page) .header .pc-nav a {
    color: #000;
}
/* ホバー時の下線も黒に */
body:has(.lower-page) .header .pc-nav a::after {
    background: #000;
}

/* 4. ハンバーガーボタン（スマホ用）の線を「黒」にする */
body:has(.lower-page) .header .hamburger span {
    background: #000;
}

/* 5. コンタクトボタン（さきほどの修正の念押し） */
body:has(.lower-page) .header .pc-nav a.nav-btn {
    background: #000;       /* 黒ボタン */
    color: #fff !important; /* 白文字 */
    border-color: #000;
}
body:has(.lower-page) .header .pc-nav a.nav-btn:hover {
    background: transparent;
    color: #000 !important;
}

/* ▼▼▼ 追加：スクロールインジケーター（右下のアニメーション） ▼▼▼ */
.scroll-down {
    position: absolute;
    bottom: 0; /* 50px から 0 に変更して一番下へ */
    right: 50px; 
    z-index: 10;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--font-display);
    gap: 10px;
    padding-bottom: 20px; /* 下端にべったりくっつかないよう少し余白 */
}

.scroll-down span {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    writing-mode: vertical-rl; /* 縦書きにする */
    text-transform: uppercase;
}

.scroll-down .line {
    width: 1px;
    height: 80px; /* 線の長さ */
    background: rgba(255, 255, 255, 0.2); /* 背景の薄い線 */
    position: relative;
    overflow: hidden;
}

.scroll-down .line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff; /* 動く線の色 */
    transform: translateY(-100%);
    animation: scrollLine 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

@keyframes scrollLine {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

/* スマホでの位置調整 */
@media screen and (max-width: 768px) {
    .scroll-down {
        right: 20px;
        bottom: 0; /* 30px から 0 に変更 */
        padding-bottom: 15px; /* スマホ用の下の余白 */
    }
    .scroll-down .line {
        height: 60px;
    }
}

/* =========================================
   SECTIONS COMMON (Light)
   ========================================= */
.section { padding: 120px 5%; position: relative; z-index: 2; }
.container { max-width: 1200px; margin: 0 auto; }

/* 見出しも黒に変更 */
.section-header {
    display: flex; align-items: baseline; margin-bottom: 80px;
    border-bottom: 1px solid var(--line-color);
    padding-bottom: 20px;
}
.section-num {
    font-family: var(--font-display); font-size: 1rem; color: #999; margin-right: 20px;
}
.section-title {
    font-family: var(--font-display); font-size: 3rem; font-weight: 500; color: #000;
}

/* =========================================
   SERVICE (Grid - Light Ver)
   ========================================= */
.service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }

.service-card {
    border: 1px solid var(--line-color); /* 薄い黒線 */
    padding: 40px; transition: 0.4s; position: relative; overflow: hidden;
    background: #fff;
}
.service-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: #000; /* ホバー時は黒背景になる */
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.8, 0, 0.2, 1); z-index: 0;
}
.service-card:hover::before { transform: scaleX(1); }

.card-inner { position: relative; z-index: 1; transition: 0.4s; color: #000; }
.service-card:hover .card-inner { color: #fff; /* ホバー時は白文字 */ }

.service-card h4 {
    font-family: var(--font-display); font-size: 1.8rem; margin-bottom: 10px;
    font-weight: 500; letter-spacing: 0.05em;
}
.jp-text { font-size: 0.85rem; color: #666; transition: 0.4s; }
.service-card:hover .jp-text { color: #aaa; }
.arrow { display: block; margin-top: 30px; font-size: 1.5rem; opacity: 0; transform: translateX(-20px); transition: 0.4s; }
.service-card:hover .arrow { opacity: 1; transform: translateX(0); }

/* =========================================
   COMPANY (Table - Light Ver)
   ========================================= */
.company-table { border-top: 1px solid var(--line-color); }
.c-row {
    display: flex; padding: 30px 0; border-bottom: 1px solid var(--line-color);
    transition: 0.3s;
}
.c-row:hover { background: rgba(0,0,0,0.02); padding-left: 20px; }
.c-label { width: 30%; font-family: var(--font-display); color: #666; font-weight: 500; }
.c-data { width: 70%; font-weight: 400; color: #000; }
.status-blink { color: #000; animation: blinkStatus 2s infinite; font-family: monospace; }
@keyframes blinkStatus { 0%,100%{opacity:1;} 50%{opacity:0.3;} }

/* =========================================
   CONTACT (Form - Light Ver)
   ========================================= */
.modern-form { max-width: 800px; margin: 0 auto; }
.input-group { position: relative; margin-bottom: 50px; }
.input-group input, .input-group textarea {
    width: 100%; background: transparent; border: none;
    color: #000; /* 黒文字 */
    font-size: 1.5rem; font-family: var(--font-display);
    padding: 10px 0; outline: none;
}
.input-group textarea { height: 50px; resize: none; }
.input-group input::placeholder, .input-group textarea::placeholder {
    color: rgba(0,0,0,0.3); /* 薄い黒 */
}
.border-line {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 1px;
    background: rgba(0,0,0,0.2);
}
.input-group input:focus + .border-line,
.input-group textarea:focus + .border-line {
    background: #000; height: 2px; transition: 0.3s;
}

.send-btn {
    display: block; width: 100%; padding: 20px; border: 1px solid #000;
    background: transparent; color: #000; font-size: 1.2rem;
    font-family: var(--font-display); position: relative; overflow: hidden;
    transition: 0.4s; margin-top: 60px;
}
.send-btn:hover { color: #fff; }
.btn-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: #000; /* ホバー背景黒 */
    transform: translateY(100%); transition: 0.4s; z-index: -1;
}
.send-btn:hover .btn-bg { transform: translateY(0); }

/* =========================================
   /* =========================================
   FOOTER (Dark Mode)
   ========================================= */
.footer {
    padding: 80px 5% 40px;
    /* ▼変更：背景を黒、文字を白に */
    background: #000;
    color: #fff;
    /* ▼変更：上の線を薄い白に変更 */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 80px;
}

/* 左側：ロゴと住所 */
.footer-info {
    width: 40%;
    padding-right: 40px;
}

.footer-logo a {
    font-family: var(--font-display);
    font-size: 2.5rem;
    margin-bottom: 20px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #fff; /* ロゴは白 */
    display: inline-block;
    height: 40px; 
    margin-bottom: 20px;
}

.footer-logo img {
    height: 100%;
    width: auto;
    display: block;
    
    /* 黒い画像を「真っ白」にするフィルタ */
    filter: brightness(0) invert(1);
}

.footer-address {
    font-style: normal;
    font-size: 0.9rem;
    line-height: 1.8;
    color: #999; /* 住所は少しグレーに */
}
.footer-address a {
    display: inline-block;
    margin-top: 10px;
    color: #fff; /* リンクは白 */
    border-bottom: 1px solid #fff; /* 下線も白 */
}

/* 右側：リンク集 */
.footer-links {
    width: 55%;
    display: flex;
    justify-content: space-between;
}

.footer-col h4 {
    font-family: var(--font-display);
    font-size: 0.9rem;
    margin-bottom: 20px;
    color: #fff; /* 見出しは白 */
    letter-spacing: 0.1em;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a {
    font-size: 0.9rem;
    color: #888; /* リンクはグレー */
    position: relative;
    transition: 0.3s;
    display: inline-block; 
}

/* ホバー時 */
.footer-col ul li a:hover {
    color: #fff; /* ホバーで白く光る */
    transform: translateX(10px); 
}

/* 最下部：コピーライト */
.footer-bottom {
    /* 線を薄い白に変更 */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom p {
    font-size: 0.75rem;
    color: #666; /* コピーライトは暗めのグレー */
    font-family: var(--font-display);
    letter-spacing: 0.05em;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .footer { padding: 60px 5% 30px; }
    
    .footer-content { flex-direction: column; gap: 40px; }
    
    .footer-info { width: 100%; padding-right: 0; }
    
    .footer-links { 
        width: 100%; 
        flex-wrap: wrap; 
        gap: 30px 0;
    }
    
    .footer-col {
        width: 50%;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

@media screen and (max-width: 768px) {
    .header { width: 92%; padding: 0 20px; height: 56px; }
    .pc-nav { display: none; }
    .hamburger { display: block; }
    
    .cursor, .cursor-follower { display: none; }
    *, *::before, *::after { cursor: auto; }

    .hero-text { font-size: 14vw; }
    .service-grid { grid-template-columns: 1fr; }
    .c-row { flex-direction: column; gap: 10px; }
    .c-label { width: 100%; }
    .c-data { width: 100%; }
    
    .sp-nav-menu {
        position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
        background: #fff; /* 白背景 */
        z-index: 999; display: flex; flex-direction: column;
        justify-content: center; align-items: center;
        opacity: 0; visibility: hidden; transition: 0.5s;
    }
    .sp-nav-menu.active { opacity: 1; visibility: visible; }
    .nav-links a {
        display: block; font-family: var(--font-display); font-size: 2.5rem;
        color: #000; margin: 15px 0;
    }
}

/* ▼▼▼ 追加するコード：PCではスマホメニューを完全に消す ▼▼▼ */
.sp-nav-menu {
    display: none;
}

/* =========================================
   LEGAL PAGES (Privacy & Terms)
   ========================================= */
.legal-page {
    padding-top: 180px; /* ヘッダーとかぶらないように下げる */
    min-height: 80vh;   /* コンテンツが少なくても画面を埋める */
}

.legal-content {
    max-width: 800px;
    margin: 0 auto; /* 中央寄せ */
    font-family: var(--font-main);
}

.legal-content p {
    font-size: 0.95rem;
    line-height: 2;
    margin-bottom: 40px;
    color: #333;
}

.legal-content h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 15px;
    padding-left: 15px;
    border-left: 2px solid #000; /* 左に黒いアクセント線 */
    font-family: var(--font-display); /* 見出しは英語フォントの雰囲気で */
}

.contact-info {
    background: #f9f9f9; /* 薄いグレーの背景 */
    padding: 30px;
    border: 1px solid var(--line-color);
}

/* =========================================
   CONTACT PAGE DESIGN
   ========================================= */
/* 固定ヘッダーに被らないように上部に余白を設ける */
.contact-page-wrapper {
    padding-top: 180px; 
    min-height: 80vh; /* コンテンツが少なくても画面下まで白くする */
}

/* フォーム上のリード文のデザイン */
.contact-lead {
    margin-bottom: 60px;
    font-size: 1rem;
    line-height: 2;
    color: #666; /* 本文色より少し薄く上品に */
    font-family: var(--font-main);
}

/* フォームのメッセージエリア（送信完了時の表示） */
.form-message {
    margin-top: 30px;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.1em;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .contact-page-wrapper {
        padding-top: 120px;
        padding-bottom: 60px;
    }
    
    .contact-lead {
        font-size: 0.9rem;
        margin-bottom: 40px;
    }
}

/* =========================================
   CONTACT FORM UPDATE (Pro Version)
   ========================================= */

/* ラベルと必須・任意マーク */
.input-label {
    display: block;
    font-family: var(--font-en);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    color: #999;
}

/* 必須マーク（日本語・赤） */
.required-badge {
    color: #e60012; /* 鮮やかな赤 */
    font-size: 0.7rem; /* 日本語なので少し大きめに */
    margin-left: 8px;
    border: 1px solid #e60012;
    padding: 2px 6px;
    vertical-align: middle;
    font-family: var(--font-ja); /* 日本語フォント */
    font-weight: 500;
}

/* 任意マーク（日本語・グレー） */
.optional-badge {
    color: #999;
    font-size: 0.7rem;
    margin-left: 8px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    padding: 2px 6px;
    vertical-align: middle;
    font-family: var(--font-ja);
    font-weight: 500;
}

/* セレクトボックス（ドロップダウン）のデザイン */
.select-wrap {
    position: relative;
    width: 100%;
}
.select-wrap select {
    width: 100%;
    padding: 10px 0;
    border: none;
    background: transparent;
    font-size: 1.1rem; /* スマホで大きく見やすく */
    color: #000;
    font-family: var(--font-ja);
    appearance: none; /* デフォルトの矢印を消す */
    cursor: pointer;
    outline: none;
    border-radius: 0;
}
/* カスタム矢印 */
.select-wrap::after {
    content: '▼';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    color: #999;
    pointer-events: none;
}

/* プライバシーポリシーチェックボックス */
.privacy-check {
    margin: 40px 0 60px;
    text-align: center;
}

.privacy-check label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    position: relative;
}

.privacy-check input {
    display: none; /* 元のチェックボックスは隠す */
}

/* カスタムチェックボックスの四角 */
.privacy-check .check-box {
    width: 20px;
    height: 20px;
    border: 1px solid #999;
    margin-right: 10px;
    position: relative;
    transition: 0.3s;
}

/* チェックされた時のスタイル */
.privacy-check input:checked + .check-box {
    background: #000;
    border-color: #000;
}

/* チェックマーク */
.privacy-check input:checked + .check-box::after {
    content: '';
    position: absolute;
    top: 45%; left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 5px; height: 10px;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
}

.privacy-text {
    font-size: 0.9rem;
    color: #333;
}
.privacy-text a {
    text-decoration: underline;
    color: #000;
    font-weight: 500;
}

/* =========================================
   FORM ERROR STYLES
   ========================================= */

/* エラー時の入力エリア（赤線にする） */
.input-group.error .border-line {
    background: #e60012 !important;
    height: 2px;
}

/* エラー時のセレクトボックス */
.input-group.error select {
    color: #e60012;
}

/* エラーメッセージ（各項目の下に出す） */
.input-group.error::after {
    content: '※必須項目です';
    display: block;
    color: #e60012;
    font-size: 0.75rem;
    margin-top: 5px;
    font-family: var(--font-ja);
}

/* プライバシーポリシーのチェックボックスのエラー */
.privacy-check.error .check-box {
    border-color: #e60012 !important;
    background: rgba(230, 0, 18, 0.05);
}
.privacy-check.error .privacy-text {
    color: #e60012;
    font-weight: 600;
}

/* フォーム全体のエラーメッセージ */
.form-message.error {
    color: #e60012;
    font-weight: 600;
    margin-top: 20px;
    padding: 15px;
    background: rgba(230, 0, 18, 0.05);
    border: 1px solid rgba(230, 0, 18, 0.2);
}

/* ▼▼▼ プレイスホルダー（薄い文字）の設定を変更 ▼▼▼ */
.input-group input::placeholder, 
.input-group textarea::placeholder {
    color: rgba(0, 0, 0, 0.3); 
    transition: var(--transition-base);
    
    /* サイズを小さくする（入力文字は1.2remですが、これは0.9remに） */
    font-size: 0.9rem; 
    
    /* 薄文字は日本語が多いので、日本語フォントを指定して綺麗に見せる */
    font-family: var(--font-ja);
    
    /* 少し下にズレて見えることがあるので、位置を微調整 */
    line-height: normal;
}

/* （参考）入力した時の文字は大きいまま（1.2rem）です */

/* =========================================
   LOADER: Blueprint Reveal (案A)
   ========================================= */
.loader-architect {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #fff; z-index: 10000;
    display: flex; justify-content: center; align-items: center;
    transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}
.loader-architect.loaded {
    transform: translateY(-100%);
}

.loader-content {
    position: relative;
    overflow: hidden;
    padding: 20px 0;
}

/* =========================================
   LOADER: Blueprint Reveal (線なしver)
   ========================================= */
.loader-architect {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #fff; z-index: 10000;
    display: flex; justify-content: center; align-items: center;
    transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}
.loader-architect.loaded {
    transform: translateY(-100%);
}

.loader-content {
    position: relative;
    overflow: hidden;
    padding: 20px 0;
}

/* 基準線(.horizon-line)の設定は削除しました */

/* テキストマスク */
.text-mask {
    overflow: hidden;
    margin-bottom: 20px;
}
.loader-logo {
    font-family: var(--font-en); font-weight: 500; font-size: 2.5rem; letter-spacing: 0.1em;
    color: #000;
    transform: translateY(110%);
    
    /* ▼▼▼ 線がなくなった分、待ち時間を 0.6s → 0.2s に短縮してテンポ良くしました ▼▼▼ */
    animation: textRise 1s cubic-bezier(0.19, 1, 0.22, 1) forwards 0.2s;
}
@keyframes textRise {
    100% { transform: translateY(0); }
}

/* プログレスバー */
.progress-bar-wrap {
    width: 200px; height: 2px; background: rgba(0,0,0,0.1);
    margin: 0 auto; position: relative; overflow: hidden;
    opacity: 0;
    animation: fadeIn 0.5s ease-out forwards 0.8s; /* ここの開始時間も調整 */
}
.progress-bar {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: #000;
    transform: translateX(-100%);
    animation: fillProgress 1.5s cubic-bezier(0.8, 0, 0.2, 1) forwards 1.0s;
}
@keyframes fadeIn { 100% { opacity: 1; } }
@keyframes fillProgress { 100% { transform: translateX(0); } }


/* =========================================
   RESPONSIVE SETTINGS (Final Version)
   ========================================= */

/* PCではスマホメニューを隠す */
.sp-nav-menu {
    display: none;
}

/* スマホ画面（768px以下） */
@media screen and (max-width: 768px) {
    
    /* ローダー調整 */
    .loader-logo { font-size: 1.8rem; }
    .progress-bar-wrap { width: 150px; }

    /* ヘッダー調整 */
    .header { width: 92%; padding: 0 20px; height: 56px; }
    .pc-nav { display: none; }
    .hamburger { display: block; }
    
    /* エフェクト無効化 */
    .cursor, .cursor-follower { display: none; }
    *, *::before, *::after { cursor: auto; }

    .hero-text { font-size: 14vw; }
    .service-grid { grid-template-columns: 1fr; }
    .c-row { flex-direction: column; gap: 10px; }
    .c-label { width: 100%; }
    .c-data { width: 100%; }
    
    .contact-page-wrapper, .legal-page {
        padding-top: 120px;
    }

    /* スマホメニューの設定 */
    .sp-nav-menu {
        display: flex;
        position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
        background: #fff; z-index: 999;
        flex-direction: column; justify-content: center; align-items: center;
        opacity: 0; visibility: hidden; transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .sp-nav-menu.active { opacity: 1; visibility: visible; }
    .nav-links a {
        display: block; font-family: var(--font-display); font-size: 2.5rem;
        color: #000; margin: 15px 0; text-decoration: none; font-weight: 500;
    }
}

/* --- 英語コピー：横一列のアウトラインデザイン --- */
.hero-text.one-line-outline {
    font-family: var(--font-display);
    font-size: 4.5vw; /* 1行でインパクトのあるサイズ */
    font-weight: 400;
    letter-spacing: 0.1em;
    color: transparent; /* 中を透明に */
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.8); /* 白のアウトライン */
    text-align: center;
    white-space: nowrap;
    
    /* アニメーション：下からふわっと */
    opacity: 0;
    transform: translateY(30px);
    animation: fvReveal 1.2s forwards 1s ease-out;
}

/* --- 日本語コピー：装飾なし・中央配置 --- */
.hero-subtext-jp {
    margin-top: 20px;
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    
    /* 英語の少し後に表示 */
    opacity: 0;
    transform: translateY(20px);
    animation: fvReveal 1.2s forwards 1.6s ease-out;
}

/* 共通のアニメーション */
@keyframes fvReveal {
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* スマホ用の調整 */
@media screen and (max-width: 768px) {
    .hero-text.one-line-outline {
        font-size: 8.5vw; /* スマホでも1行に収まるサイズ */
        -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.8);
    }
    .hero-subtext-jp {
        font-size: 0.9rem;
        letter-spacing: 0.15em;
        margin-top: 15px;
    }
}