/* General Styles (ダークモードに調整) */
body {
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #e0e0e0; /* テキストの色を明るく */
    background-color: #1a1a1a; /* 背景色を暗く */
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

header {
    background-color: #282828; /* ヘッダーの背景色を暗く */
    color: #ffffff; /* ヘッダーの文字色を白く */
    padding: 1rem 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* 影を強調 */
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* header h1 の既存スタイルを調整（テキストロゴがなくなるため） */
header h1 {
    margin: 0;
    /* font-size: 1.8rem;  テキストロゴがなくなるので不要であればコメントアウトまたは削除 */
    /* color: #ffffff;   テキストロゴがなくなるので不要であればコメントアウトまたは削除 */
}

/* 新規追加: ヘッダーロゴ画像のスタイル */
.header-logo {
    height: 40px; /* ロゴの高さ。必要に応じて調整してください */
    width: auto; /* 幅は高さに合わせて自動調整 */
    vertical-align: middle; /* 上下の中央に配置 */
}
header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

header nav ul li {
    margin-left: 2rem;
}

header nav a {
    color: #ffffff; /* ナビゲーションリンクの色を白く */
    text-decoration: none;
    font-weight: 700;
    transition: color 0.3s;
}

header nav a:hover {
    color: #00c8c8; /* ホバー時の色を水色に */
}

/* Hero Section (背景の文字化けを修正) */
.hero {
    /* 元のbackground-imageの指定を削除またはコメントアウト */
    /* background: url('https://placehold.co/1200x600/36454F/ffffff?text=ORおおみや鉄道') no-repeat center center/cover; */
    background-color: #36454F; /* ダークトーンの背景色を設定 */
    color: #fff;
    text-align: center;
    padding: 8rem 0;
    position: relative;
    overflow: hidden; /* 背景の擬似要素がはみ出さないように */
}

/* 会社のロゴを背景に大きく表示する擬似要素 */
/* Hero Section (背景画像をロゴファイルに変更) */
.hero::before {
    content: ''; /* テキストは不要なので空にする */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; /* 背景画像の幅を調整 */
    height: 100%; /* 背景画像の高さを調整 */
    background-image: url('logo_background.png'); /* ここに画像ファイルを指定 */
    background-size: contain; /* コンテナ内に収まるように調整 */
    background-repeat: no-repeat; /* 画像の繰り返しをオフにする */
    background-position: center; /* 画像を中央に配置 */
    opacity: 1.0; /* 画像の透明度を設定 */
    z-index: 1; /* コンテンツの下に配置 */
    pointer-events: none; /* クリックイベントを透過させる */
}
.hero::after { /* 元々あったオーバーレイの擬似要素は::afterに移動 */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* オーバーレイを少し薄くして背景のORが見えるように */
    z-index: 2; /* ORの文字より上に、コンテンツより下に配置 */
}


.hero-content {
    position: relative;
    z-index: 3; /* コンテンツを一番上に配置 */
}

.hero h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #fff;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: #e0e0e0;
}

/* その他の.hero内のスタイルは変更なし */
.btn {
    display: inline-block;
    background-color: #00c8c8; /* ボタンの色を水色に */
    color: #1a1a1a; /* ボタンの文字色を暗く */
    padding: 0.8rem 2rem;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #003232; /* ホバー時の色を少し濃く */
}

/* Section Styles (ダークモードに調整) */
section {
    padding: 4rem 0;
}

section:nth-of-type(odd) {
    background-color: #222222; /* 奇数セクションの背景色を暗く */
}

h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: #00c8c8; /* 見出しの色を水色に */
}

.content-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.content-wrapper p {
    max-width: 800px;
    margin-bottom: 1rem;
    color: #e0e0e0;
}

/* Service Grid (ダークモードに調整) */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.service-item {
    background-color: #282828; /* サービスアイテムの背景色を暗く */
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* 影を強調 */
    text-align: center;
    transition: transform 0.3s;
}

.service-item:hover {
    transform: translateY(-10px);
}

.service-item h3 {
    color: #00c8c8; /* サービスアイテムの見出しの色を水色に */
    font-size: 1.5rem;
    margin-top: 0;
}

.service-item p {
    color: #e0e0e0;
}

/* Footer (ダークモードに調整) */
footer {
    background-color: #282828; /* フッターの背景色を暗く */
    color: #ffffff;
    text-align: center;
    padding: 1.5rem 0;
    margin-top: 2rem;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.3); /* 上部に影を追加 */
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    header .container {
        flex-direction: column;
    }

    header nav {
        margin-top: 1rem;
    }

    header nav ul {
        flex-direction: column;
        text-align: center;
    }

    header nav ul li {
        margin: 0.5rem 0;
    }

    .hero h2 {
        font-size: 2rem;
    }

    h2 {
        font-size: 2rem;
    }
}

/* 新規追加: サービスリンクのスタイル */
.service-link {
    text-decoration: none; /* 下線をなくす */
    color: inherit; /* 親要素の文字色を継承 */
    display: block; /* ブロック要素にして、.service-item全体にリンクを適用 */
}

.service-link .service-item {
    transition: transform 0.3s, box-shadow 0.3s; /* ホバー効果を滑らかに */
}

.service-link:hover .service-item {
    transform: translateY(-10px); /* ホバー時に上に動く効果 */
    box-shadow: 0 8px 16px rgba(0,0,0,0.3); /* ホバー時に影を濃くする */
}