@charset "UTF-8";

/* 全体設定 */
body {
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    line-height: 1.8;
    background-color: #f8f9fa;
}

/* ヘッダー */
header {
    background: #003366; /* 信頼感のあるネイビー */
    color: white;
    padding: 15px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.header-logo img {
    height: 40px; /* ロゴの高さ */
    display: block;
}

nav a {
    margin-left: 25px;
    color: white;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.3s;
}

nav a:hover {
    color: #ffd700; /* ホバー時のアクセントカラー（ゴールド） */
}

/* ヒーローセクション (トップページ用) */
.hero {
    /* 背景画像とネイビーのオーバーレイ */
    background: linear-gradient(rgba(0, 51, 102, 0.7), rgba(0, 51, 102, 0.7)), url('../images/hero.jpg') no-repeat center center/cover;
    height: 80vh; /* 画面の高さの80% */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    padding: 0 20px;
}

.hero-content {
    max-width: 800px;
}

.catchphrase {
    font-size: 3rem;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
    animation: fadeInUp 1.2s ease-out; /* フェードインアニメーション */
}

.company-name-hero {
    font-size: 1.5rem;
    opacity: 0.9;
}

/* コンテンツエリア */
.container {
    max-width: 1000px; /* コンテンツの最大幅 */
    margin: 60px auto;
    padding: 0 20px;
}

h2 {
    font-size: 2rem;
    border-left: 5px solid #003366; /* 左側のアクセント線 */
    padding-left: 15px;
    margin-bottom: 40px;
    color: #003366;
}

/* サービスカード/セクション */
.service-box {
    background: white;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* 柔らかい影 */
    margin-bottom: 40px;
}

.service-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2カラムレイアウト */
    gap: 30px;
    margin-top: 30px;
}

.advisory-item {
    background: #f1f4f8; /* 薄いグレーの背景 */
    padding: 25px;
    border-radius: 5px;
}

.advisory-item h4 {
    color: #003366;
    margin-top: 0;
    border-bottom: 2px solid #ddd;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.advisory-item ul {
    padding-left: 20px;
    margin: 0;
}

.advisory-item li {
    margin-bottom: 10px;
}

/* 警告・注目ボックス */
.status-box {
    background: #eef2f7;
    border-left: 4px solid #003366;
    padding: 25px;
    margin: 30px 0;
}

/* フッター */
footer {
    background: #333;
    color: white;
    text-align: center;
    padding: 30px 0;
    margin-top: 80px;
}

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

/* レスポンシブ対応 (タブレット・スマホ) */
@media (max-width: 768px) {
    .service-grid { grid-template-columns: 1fr; } /* 1カラムに変更 */
    .catchphrase { font-size: 2rem; }
    header { flex-direction: column; padding: 10px; }
    nav { margin-top: 15px; }
    nav a { margin: 0 10px; font-size: 0.9rem; }
    .hero { height: 60vh; }
    .container { margin: 40px auto; }
    .service-box { padding: 25px; }
}