/* ==========================================
   新潟県遠隔教育配信センター 共通CSS
   ========================================== */

/* ------------------------------------------
   1. ページ全体の基本設定
------------------------------------------ */
body {
    /* 標準的な日本語フォントの指定（基本はゴシック体） */
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    /* 背景色：青みを排除した、落ち着いた薄いグレー */
    background-color: #f5f7f8; 
    /* 上部ヘッダーが固定（fixed）されているため、コンテンツが下に潜り込まないようにする余白 */
    padding-top: 80px; 
    /* 基本の文字色：ロゴに合わせた深い炭色 */
    color: #2b3637; 
}

/* ------------------------------------------
   2. ヘッダー（ナビゲーションバー）の設定
------------------------------------------ */
.fixed-header-wrapper {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
    background-color: #ffffff !important; /* スクロールしても透けない純白 */
    border-bottom: 3px solid #2F4E51 !important; /* 下部にロゴの紺色のラインを入れて引き締める */
    box-shadow: 0 4px 12px rgba(47, 78, 81, 0.06); /* 上品な影 */
}

/* 通常時のメニューのリンク文字（ロゴの紺色：#2F4E51） */
.navbar-light .navbar-nav .nav-link {
    color: #2F4E51 !important;
    font-weight: bold;
    transition: color 0.2s ease-in-out;
}

/* 現在地のページ（active）と、マウスを載せた時（hover）の色（ロゴの黄緑色：#A3BD42） */
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link:hover {
    color: #A3BD42 !important;
}

/* ------------------------------------------
   3. ヒーローエリア（ページ上部の大きな帯）
------------------------------------------ */
.hero {
    /* ロゴの紺色（#2F4E51）をベースにした上品なグラデーション */
    background: linear-gradient(135deg, #2F4E51, #1b2f31) !important;
    color: white !important;
    padding: 60px 0;
    margin-bottom: 40px;
}

/* ------------------------------------------
   4. 見出し・装飾パーツの設定
------------------------------------------ */
/* 見出しの左側につく縦線の色をロゴの紺色に */
.border-primary {
    border-color: #2F4E51 !important;
}

/* 「一覧を見る」などのボタン（通常時：ロゴの紺色） */
.btn-outline-primary {
    color: #2F4E51 !important;
    border-color: #2F4E51 !important;
    background-color: transparent !important;
}
/* ボタンにマウスを載せた時の色反転 */
.btn-outline-primary:hover {
    background-color: #2F4E51 !important;
    color: #ffffff !important;
}

/* 「公開」バッジなどの色（ロゴの黄緑色：#A3BD42） */
.bg-info {
    background-color: #A3BD42 !important;
    color: #ffffff !important;
}

/* 「利用ガイド(PDF)」ボタン（ロゴの黄緑色） */
.btn-success {
    background-color: #A3BD42 !important;
    border-color: #A3BD42 !important;
    color: #ffffff !important;
}
.btn-success:hover {
    opacity: 0.9;
    background-color: #92ab36 !important;
}

/* 案内用アイコンの色（ロゴの紺色） */
.text-primary {
    color: #2F4E51 !important;
}

/* ------------------------------------------
   5. カードデザイン（トップページ等で使用）
------------------------------------------ */
.custom-card {
    background-color: #ffffff;
    border: none !important;
    border-radius: 0.5rem;
    padding: 1.5rem;
    height: 100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* ------------------------------------------
   6. フッターの設定
------------------------------------------ */
.footer-custom {
    background-color: #2F4E51 !important; /* ロゴの紺色 */
    color: #ffffff !important;
    padding: 40px 0 20px;
    margin-top: 60px;
}
/* フッター内の補足文字（受付時間など）の色調整 */
.footer-custom .text-secondary {
    color: #cbd5e1 !important; 
}
/* フッター内の区切り線の透過度 */
.border-secondary-subtle {
    border-color: rgba(255, 255, 255, 0.15) !important;
}
/* 住所や電話の文字色 */
.footer-custom p {
    color: #e2e8f0 !important;
    font-size: 0.95rem;
}
/* フッター内のアイコンの色（ロゴの黄緑色） */
.text-logo-green-light {
    color: #A3BD42 !important; 
}

/* ------------------------------------------
   7. アバウトページ（センター概要）専用スタイル
------------------------------------------ */
/* 目次リンクがマウスホバーで少し薄くなるアニメーション */
.list-group-item-action:hover {
    color: #A3BD42 !important;
    background-color: rgba(163, 189, 66, 0.05) !important;
}
/* パソコン画面の時に、顔写真と挨拶文の間に縦線を入れる設定 */
@media (min-width: 768px) {
    .border-end-md {
        border-end: none;
        border-right: 1px solid #dee2e6 !important;
    }
}

/* ==========================================================================
   追加：ロゴのレスポンシブ制御とアクセシビリティ対応調整
   ========================================================================== */

/* 固定ヘッダー周りの位置固定 */
.fixed-header-wrapper {
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* ロゴ画像のレスポンシブサイズ制御（インラインから移行したもの） */
.brand-logo-img {
    width: 33vw;
    max-width: 350px;
    min-width: 200px;
    height: auto;
    object-fit: contain;
}

/* ヒーロー画像のマークサイズ固定（表示のガタつき防止） */
.hero-logo-mark {
    width: 90px;
    height: 90px;
    object-fit: contain;
}

/* キーボード操作時のフォーカス線を視認しやすく（アクセシビリティ対応） */
a:focus-visible, 
button:focus-visible {
    outline: 3px solid #0d6efd;
    outline-offset: 2px;
}

/* ------------------------------------------
   8. リファクタリング用汎用クラス（初心者の編集しやすさ向上）
------------------------------------------ */
/* 本文テキストの段落（両端揃え、ゆったりした行間） */
.about-paragraph {
    text-align: justify;
    line-height: 1.7;
}

/* ロゴの紺色（#2F4E51）のテキスト */
.text-logo-navy {
    color: #2F4E51 !important;
}

/* 所長挨拶の写真フレーム（ロゴの紺色の枠） */
.avatar-frame {
    width: 140px;
    height: 140px;
    border: 3px solid #2F4E51;
    background-color: #f8f9fa; /* bg-light */
}

/* 部署ごとの業務内容カード */
.dept-card {
    height: 100%;
    padding: 1rem;
    border-radius: 0.375rem;
}
.dept-card-navy {
    background-color: rgba(47, 78, 81, 0.03);
    border-top: 3px solid #2F4E51;
}
.dept-card-green {
    background-color: rgba(47, 78, 81, 0.03);
    border-top: 3px solid #A3BD42;
}

/* 目次サイドバーの固定配置設定（インラインから移行） */
.sticky-sidebar {
    top: 100px;
    z-index: 10;
}

/* フッター内の見出し色 */
.footer-custom h5 {
    color: #ffffff !important;
}

/* フッターのGoogleマップ境界線 */
.footer-map-container {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 問い合わせ窓口等の強調テキスト用（インライン font-size 回避用） */
.contact-phone-link,
.contact-email-text {
    font-size: 1.05rem !important;
}
.contact-email-large {
    font-size: 1.1rem !important;
}
.contact-note-small {
    font-size: 0.75rem !important;
    font-weight: normal;
}
.contact-time-small {
    font-size: 0.8rem !important;
}

/* 印刷時専用のスタイル */
@media print {
    .fixed-header-wrapper {
        position: static !important; /* 固定配置を解除 */
    }
    
    /* 必要に応じて：ヘッダーの下に少し余白を作る */
    nav.navbar {
        box-shadow: none !important;
        border-bottom: 1px solid #ccc;
        margin-bottom: 20px;
    }
}