:root {
    --main-blue: #003366;
    --accent-red: #e60012;
    --text-color: #333;
    --light-bg: #f4f7f9;
}

body { font-family: sans-serif; margin: 0; line-height: 1.6; color: var(--text-color); }

/* ヘッダー：ロゴとナビ */
header {
    background: #fff; padding: 0 10px; /* ← 5% から px 指定などに変更 */
    display: flex; justify-content: space-between;
    align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: sticky; top: 0; z-index: 1000; height: 40px;
}

.logo-link { display: flex; align-items: center; text-decoration: none; gap: 15px; }
.logo-img { height: 20px; width: auto; } /* 40pxロゴのサイズ */
.logo-text { color: var(--main-blue); font-size: 16px; font-weight: bold; }

nav ul { list-style: none; display: flex; gap: 10px; margin: 0; padding: 0; }
nav ul li { position: relative; }

/* メニューの文字とボタン */
nav ul li a, .menu-trigger {
    text-decoration: none; color: var(--main-blue); font-weight: bold;
    font-size: 0.95rem; padding: 30px 15px; display: block; 
    background: none; border: none; cursor: pointer; transition: 0.3s;
}
nav ul li a:hover, .menu-trigger:hover { color: var(--accent-red); }

/* プルダウンメニュー */
.dropdown-menu {
    display: none; position: absolute; top: 85px; left: 0;
    background: #fff; box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    min-width: 250px; padding: 0; border-top: 3px solid var(--accent-red);
}
.dropdown-menu.is-show { display: block; }
.dropdown-menu li { border-bottom: 1px solid #eee; }
.dropdown-menu a { padding: 15px 20px !important; }

/* 背景写真付きのヒーローエリア */
/* ヒーローエリアのコンテナ */
.hero {
    position: relative;
    height: 500px; /* 少し高めに設定（お好みで） */
    overflow: hidden;
    color: #fff;
    display: flex;
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    text-align: center;
}

/* 各スライドの共通設定 */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0; /* 通常は透明 */
    transition: opacity 1.5s ease-in-out; /* 切り替わりをふわっとさせる */
    z-index: 1;
}

/* アクティブなスライドだけ表示 */
.slide.active {
    opacity: 1;
    z-index: 2;
}

/* 写真を暗くして文字を見やすくするオーバーレイ */
.slide::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 51, 102, 0.4); /* メインブルーを薄く被せる */
}

/* 文字エリア（最前面に表示） */
.hero-content {
    position: relative;
    z-index: 10;
}

/* 製品グリッド */
.container { padding: 40px 5%; max-width: 1200px; margin: 0 auto; }
.model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.model-item { border: 1px solid #ddd; border-radius: 8px; text-align: center; overflow: hidden; background: #fff; transition: 0.3s; }
.model-item:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.model-name { background: var(--main-blue); color: #fff; padding: 10px; font-weight: bold; }
.model-photo { height: 160px; display: flex; align-items: center; justify-content: center; padding: 10px; }
.model-photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.model-desc { padding: 15px; font-size: 0.85rem; border-top: 1px solid #eee; min-height: 50px; display: flex; align-items: center; justify-content: center; }

footer { background: var(--main-blue); color: #fff; text-align: center; padding: 30px; margin-top: 40px; }

/* 2026.3.28追加*/
.flex-heading {
  display: flex;       /* 横並びにする */
  align-items: center; /* 上下の中央を揃える */
  gap: 10px;           /* 画像と文字の間の余白 */
}

.heading-icon {
  width: 64px;         /* 画像の横幅 */
  height: 64px;        /* 画像の縦幅 */
}

/* 2026.3.30追加*/
/* リンクの下線を消し、文字の色を黒（または指定の色）で固定する */
.model-link {
    text-decoration: none; /* これで下線が消えます */
    color: inherit;        /* 親要素の色を継承（青色にならないようにする） */
    display: block;        /* 枠内全体をクリック可能にする */
}

/* マウスを乗せた時も下線を出さない場合 */
.model-link:hover {
    text-decoration: none;
}
/* --- 会社案内 地図中央寄せ設定 --- */
.map-container {
    display: flex;
    justify-content: center; /* これで中身を中央に寄せます */
    margin: 20px 0 50px;
}

.map-box {
    width: 100%;
    max-width: 600px; /* 大画面でも地図が広がりすぎないサイズ */
    background: #fff;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}