/* ==========================================
氷彫刻道具専門サイト 共通スタイルシート (base.css)
========================================== */

/* 全体の基本設定（背景は白、文字は濃いグレー、フッター固定用のflex設定） */
html, body {
height: 100%;
}

body {
color: #333333;
background-color: #FFFFFF;
display: flex;
flex-direction: column;
min-height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
}

/* ヘッダー（ナビゲーションバー）のスタイル */
.custom-header {
background-color: #f5f6f8 !important;
border-bottom: 1px solid #e0e2e6;
}

/* ロゴ部分の文字色 */
.navbar-brand {
color: #222222 !important;
}

/* 上部メニューの文字サイズと余白調整 */
.navbar-nav .nav-link {
font-size: 1.15rem;
color: #444444 !important;
font-weight: 500;
padding: 8px 16px !important;
transition: all 0.2s ease;
}

/* 表示されているページ（アクティブ）を青色背景＋白色文字で強調 */
.navbar-nav .nav-link.active {
background-color: #0000ff !important;
color: #FFFFFF !important;
border-radius: 4px;
}

/* 未アクティブ時のリンクホバー効果（ほんのり青文字に） */
.navbar-nav .nav-link:hover:not(.active) {
color: #0000ff !important;
}

/* メインビジュアル（トップ画像）コンテナ */
.main-visual-container {
border: 1px solid #e0e2e6;
background-color: #f8f9fa;
overflow: hidden;
}

.main-visual-img {
width: 100%;
max-height: 250px;
object-fit: cover;
}

/* 青色（#0000ff）のカスタムアクセント */
.border-primary-custom {
border-color: #0000ff !important;
}

.text-primary-custom {
color: #0000ff !important;
}

.bg-primary-custom {
background-color: #0000ff !important;
}

/* 新着情報のスクロールボックス */
.news-scroll-box {
max-height: 220px;
overflow-y: auto;
border: 1px solid #e0e2e6;
background-color: #ffffff;
border-radius: 6px;
padding: 15px;
}

/* スクロールバーのカスタマイズ（Chrome, Safari, Edge対応） */
.news-scroll-box::-webkit-scrollbar {
width: 8px;
}

.news-scroll-box::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}

.news-scroll-box::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 4px;
}

.news-scroll-box::-webkit-scrollbar-thumb:hover {
background: #0000ff;
}

/* 製品紹介グリッドカードのホバーアニメーション */
.product-card {
transition: transform 0.2s, box-shadow 0.2s;
border: 1px solid #333333;
}

.product-card:hover {
transform: scale(1.03);
box-shadow: 0 4px 15px rgba(0, 0, 255, 0.2);
}

.card-img-top {
height: 140px;
object-fit: contain;
background-color: #f0f0f0;
}

/* --------------------------------------------------
★注意: base.css 内にあった古い .main-image-viewport 関連の
画像非表示(opacity:0)ロジックは、products.cssとの競合を防ぐため
完全に削除されました。
-------------------------------------------------- */

/* フッターのスタイル（薄いグレー背景、常に最下部に配置） */
.custom-footer {
background-color: #f5f6f8 !important;
color: #555555 !important;
border-top: 1px solid #e0e2e6;
margin-top: auto;
}