body {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400; /* 通常の太さ */
    color: #333; /* 文字色を濃いグレーにしてモダンに */
}
h2, .navbar-brand {
    font-family: 'Noto Serif JP', serif;
    font-weight: 600; /* 太めのウェイト */
    /* border-bottom: 2px solid #007bff; /* セクションタイトルの下にライン */
    /* padding-bottom: 5px; */
    color: #2c3e50; /* 濃い目の色で引き締め */
}
.custom-card:hover{
background-color: #f8f9fa; /* ホバー時の背景色をより控えめに */
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); /* 影を控えめに */
}
.scrollable-news {
max-height: 400px; /* お知らせセクションの最大高さを設定 */
overflow-y: auto;/* 垂直方向のスクロールを可能にする */
padding: 10px;/* コンテナ内部の余白を追加 */
border-radius: 10px;/*枠を〇く*/
background-color: #f4f7f9;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.custom-list-item {
transition: transform .2s, box-shadow .2s;
cursor: pointer;
border: 1px solid #dee2e6; /* 枠線を落ち着いた色に変更 */
border-radius: 8px;
margin-bottom: 8px;
}
.custom-list-item:hover {
transform: translateY(-2px); /* わずかに上に移動する効果を追加 */
box-shadow: 0 6px 15px rgba(0,0,0,.1); /* 影を強調 */
background-color: #e9f5ff; /* ホバー時の背景色を洗練された色に変更 */
}
/* ⭐ ナビゲーションとフッターの調整 ⭐ */
.navbar {
    box-shadow: 0 2px 4px rgba(0,0,0,.05); /* ナビバーに軽い影を追加 */
}

.footer-info {
    background-color: #34495e; /* フッターの色を落ち着いたネイビー系に */
}
        /* 追加するCSS */
.carousel-indicators li {
    background-color: rgba(255, 255, 255, 0.5); /* 半透明の白 */
    border: 1px solid rgba(0, 0, 0, 0.2); /* 境界線を追加 */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* 強い影で浮き上がらせる */
    
    /* インジケーターのサイズをわずかに大きくする（任意） */
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    margin: 0 5px;

    transition: all 0.3s ease;
}

/* アクティブ（現在表示中）のインジケーターをさらに目立たせる */
.carousel-indicators .active {
    background-color: #2c3e50 !important;
    border: 1px solid #2c3e50;
    transform: scale(1.1);
}
/* インジケーターの親要素に位置の基準を設定する */
#carouselExampleIndicators {
    position: relative !important;
}
/* カードに動きの速さを指定（スムーズにするため） */
.custom-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

/* ホバーした時のスタイル */
.custom-card:hover {
    transform: translateY(-5px); /* 5px上に浮かす */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important; /* 影を強くする */
}

/* aタグのデフォルトの色変化を無効化 */
a.text-decoration-none:hover {
    text-decoration: none;
}
/* 画像を少し大きくするエフェクト */
.custom-card:hover .card-img-top {
    filter: brightness(90%); /* 少し暗くして文字を目立たせる等 */
    transition: 0.3s;
}

/* --- アンケートフォーム用の動的表示制御 --- */

/* 初期状態は非表示 */
.dynamic-field { 
    display: none; 
}

/* カテゴリー選択（ラジオボタン）による切り替え */
/* 注意：inputと表示エリアが同じ親要素内にある必要があります */
#radio-sale:checked ~ #field-sale,
#radio-shop:checked ~ #field-shop,
#radio-job:checked ~ #field-job {
    display: block;
    animation: fadeIn 0.3s ease-in; /* 少しふわっと表示 */
}

/* HP掲載チェックボックスによる切り替え */
#show_hp_check:checked ~ #hp_input_area {
    display: block;
    animation: fadeIn 0.3s ease-in;
}

/* シンプルなフェードインアニメーション */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}