:root { --primary:#0F1C2E; --accent:#6B4FC6; --secondary:#1B3B6F; --light:#F5F7FB; }
* { box-sizing:border-box; }
html,body { margin:0; padding:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Meiryo,"Noto Sans JP",sans-serif; color:#1A1A1A; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.container { max-width:1100px; margin:0 auto; padding:0 20px; }
header { background:linear-gradient(140deg,var(--primary),var(--secondary)); color:#fff; }
.nav { display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
.logo { display:flex; align-items:center; gap:12px; font-weight:700; }
.hero { padding:72px 0 64px; }
h1.hero-title { font-size:clamp(28px,3.2vw,44px); line-height:1.2; margin:0 0 12px; }
.hero-sub { font-size:clamp(15px,2vw,18px); opacity:.95; }
.cta { margin-top:24px; display:inline-block; background:#fff; color:var(--primary); padding:12px 18px; border-radius:999px; font-weight:700; }
.section { padding:56px 0; }
.section.alt { background:var(--light); }
.section h2 { font-size:22px; margin:0 0 16px; color:var(--primary); }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:#fff; border:1px solid #E6E8EE; border-radius:14px; padding:20px; }
.badge { display:inline-block; background:#EEF; color:var(--secondary); font-weight:700; font-size:12px; padding:4px 8px; border-radius:999px; }
.kv { border-left:4px solid var(--accent); padding-left:12px; margin:10px 0 0; color:#333; }
.company dl { display:grid; grid-template-columns:120px 1fr; gap:8px 12px; }
.company dt { color:#4A4F5B; }
.company dd { margin:0; }
footer { background:#0C1624; color:#DDE3F3; padding:28px 0; font-size:14px; }
footer a { color:#DDE3F3; }
@media (max-width:900px) { .grid-3 { grid-template-columns:1fr; } nav ul { display:none; } }

/* 会社情報テーブルのth要素を左揃えにする */
.company table th { text-align: left; }
/* 会社情報セクションのお問い合わせテキストを太字にする */
#contact-info {
    font-weight: 700;
}
/* ナビゲーションリンクの色を明るい白にする */
nav ul li a {
    color: #fff;
}
/* 訪問済みリンクの色を通常のリンクの色に戻す（念のため） */
nav ul li a:visited {
    color: #fff;
} 

/* ヒーローセクションにキャッチーな背景パターンを追加 */
header {
    /* 既存のグラデーションに加えて、背景にドットパターンを重ねる */
    background-image: 
        radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.1) 1px, transparent 0),
        radial-gradient(circle at 90% 90%, rgba(255, 255, 255, 0.1) 1px, transparent 0),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 1px, transparent 0),
        linear-gradient(140deg, var(--primary), var(--secondary)); /* 既存のグラデーション */
    background-size: 50px 50px, 60px 60px, 40px 40px, 100% 100%; /* パターンのサイズを定義 */
    background-repeat: repeat, repeat, repeat, no-repeat;
}

/* ロゴのサイズを少し大きくして、より目立たせる */
.logo svg {
    width: 44px !important;
    height: 44px !important;
}
.logo span {
    font-size: 1.1em;
}

/* アニメーションの定義 */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* タイトルにアニメーションを適用 */
h1.hero-title {
    font-size:clamp(28px,3.2vw,44px); 
    line-height:1.2; 
    margin:0 0 12px;
    animation: fadeInDown 1s ease-out 0.8s forwards; /* 0.8秒に修正 */
    opacity: 0; 
}