@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Lobster&display=swap');

/* メインナビゲーションのアクティブ状態 */
.nav-link.active {
    font-weight: 550;
}

/* 検索ボタンのスタイル */
.search-button {
    background-color: #a4d65e; /* ボタンの背景色 */
    color: #ffffff; /* ボタンの文字色 */
    border: none; /* 枠線をなしに */
    border-radius: 20px; /* 角を丸く */
    padding: 10px 20px; /* 内側の余白 */
    transition: background-color 0.3s, transform 0.2s; /* アニメーション */
}

.search-button:hover {
    background-color: #8cba54; /* ホバー時の背景色 */
    transform: scale(1.05); /* ホバー時の拡大効果 */
}

/* スクロールボタンのスタイル */
#scrollToTopBtn, #scrollToBottomBtn {
    position: fixed; /* 画面に固定表示され、スクロールしても位置が変わらない */
    bottom: 20px; /* 画面下から20pxの位置に配置 */
    right: 20px; /* 画面右から20pxの位置に配置 */
    width: 50px; /* ボタンの幅を50pxに設定 */
    height: 50px; /* ボタンの高さを50pxに設定 */
    background-color: #ff8a80; /* ボタンの背景色を柔らかいピンク系に設定 */
    color: white; /* アイコンの色を白に設定 */
    border: none; /* ボタンの枠線をなしにする */
    border-radius: 50%; /* 丸いボタンにするために半径を50%に設定 */
    cursor: pointer; /* マウスカーソルが指アイコンに変わる */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* ボタンに影をつけて立体感を演出 */
    transition: transform 0.3s, background-color 0.3s; /* 色と位置の変化をアニメーションでスムーズに */
    font-size: 20px; /* アイコンの大きさを設定 */
    display: flex; /* アイコンをボタンの中央に配置するためにフレックスボックスを使用 */
    align-items: center; /* アイコンを垂直方向の中央に配置 */
    justify-content: center; /* アイコンを水平方向の中央に配置 */
}

#scrollToTopBtn {
    bottom: 80px; /* `#scrollToTopBtn`の上に配置 */
}

/* ホバー時のスタイル */
#scrollToTopBtn:hover, #scrollToBottomBtn:hover {
    background-color: #ff5252; /* ホバー時に背景色を少し濃くして視覚的な反応を与える */
    transform: translateY(-5px); /* マウスホバーでボタンが少し上に浮くアニメーションを追加 */
}

/* ユーザーアイコンのドロップダウンメニュー */
.user-dropdown-menu {
    position: absolute !important; /* 親の高さに影響を与えない */
    top: 100% !important; /* トリガーアイコンの下に配置 */
    right: 0 !important; /* 右端に揃える */
    margin-top: 5px !important; /* 少し間隔を空ける */
    border-radius: 8px; /* 角を丸く */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* やわらかな影 */
    z-index: 1000; /* 他の要素より前面に表示 */
}

/* ユーザーアイコンのリンク */
.user-link {
    font-weight: 500; /* 太字 */
    padding: 8px; /* 余白 */
    text-align: center; /* 中央揃え */
}

/* メインナビゲーションのドロップダウンメニュー */
.main-dropdown-menu {
    display: none; /* 初期状態で非表示 */
    position: absolute;
    top: 100%; /* 親要素の下に配置 */
    left: 0;
    margin-top: 5px; /* 少し間隔を空ける */
    border-radius: 8px; /* 角を丸く */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* やわらかな影 */
    background-color: #ffffff; /* 白背景 */
    z-index: 1000; /* 他の要素より前面に表示 */
}

/* メインナビゲーションのホバー時にサブメニューを表示 */
.main-nav .nav-item:hover .main-dropdown-menu {
    display: block; /* ホバー時に表示 */
}

/* メインナビゲーションのリンク */
.main-link {
    color: #4682b4; /* リンクの色を青色に設定 */
    font-weight: 500; /* 太字 */
    padding: 8px 14px; /* 余白を追加 */
    border-radius: 10px; /* 角を丸く */
    transition: transform 0.2s, background-color 0.2s, color 0.2s; /* ホバー時のアニメーション */
    text-align: center; /* 中央揃え */
}

/* メインリンクのホバー時のスタイル */
.main-link:hover {
    color: #376998; /* リンクの色を濃い青に設定 */
    background-color: rgba(173, 216, 230, 0.4); /* 背景色を薄い青に変更 */
    transform: translateY(-3px); /* ホバー時に少し浮かせる */
}

/* ===================== */
/* ナビゲーションとリンクの共通スタイル */
/* ===================== */

.bg-light-custom {
    background-color: #d0e7f2; /* 背景色を少し強めの青色に設定 */
    border-radius: 15px; /* 角を丸く */
    border-bottom: 1px solid #a0c4d0; /* 境界線の色をやや濃い青みのグレーに */
    box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.1); /* 軽い影で浮かせる効果 */
    padding: 10px 25px; /* 内側に余白を設定 */
}

.laplus-logo {
    font-family: 'Lobster', cursive; /* フォントをカスタム */
    font-size: 1.8rem; /* サイズを大きめに設定 */
    color: #5bc0de; /* 水色寄りの青色 */
    text-shadow: 1px 1px 4px rgba(173, 216, 230, 0.7); /* 薄い水色の影で柔らかさを出す */
}

.laplus-logo:hover {
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2), 0 0 8px rgba(91, 192, 222, 0.6); /* 影を少し強調 */
    transform: scale(1.05); /* ほんの少し拡大して目立たせる */
    color: #5bc0de; /* 水色寄りの青色 */
}

.section-header {
    background-color: #89c4d9; /* 青色の背景 */
    padding: 8px 15px; /* 余白の設定 */
    border-radius: 10px; /* 角を丸くする */
    color: white; /* 文字の色を白に */
    font-weight: 600; /* 少し太字 */
    font-size: 1.1rem; /* サイズを少し大きくして視認性アップ */
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1); /* 影で立体感を追加 */
}

.btn-custom {
    background-color: #5a9bd6; /* 柔らかい青色 */
    color: white; /* 文字の色を白に */
    margin: 5px; /* ボタン周りの余白 */
    border-radius: 10px; /* 角を丸くして柔らかい印象に */
    padding: 6px 14px; /* ボタン内の余白 */
    font-size: 0.95rem; /* 文字サイズを少し小さめに */
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1); /* 軽い影でボタンを立体的に */
    transition: background-color 0.3s, transform 0.2s; /* ホバー時のアニメーション */
}

.btn-custom:hover {
    background-color: #4a89b5; /* ホバー時に少し濃く */
    transform: translateY(-2px); /* ホバー時に少し浮かせる */
}

.btn-custom:active {
    background-color: #4180a8; /* クリック時にさらに濃く */
}

.info-box {
    background-color: #ffffff; /* 背景を白色に */
    padding: 10px 0; /* 上下に余白、左右を0にして幅を最大に */
    border-radius: 8px; /* 角を丸くして柔らかい印象に */
    margin-bottom: 20px; /* 下に余白を設定 */
    display: flex;
    align-items: flex-start;
    gap: 15px; /* 吹き出しとキャラクター間の間隔 */
}

.characters {
    display: flex; /* キャラクター画像を横並びに */
    align-items: flex-end; /* キャラクターのアイコンを下寄せに */
    gap: 1px; /* キャラクター同士の間隔 */
}

.character {
    width: 170px; /* キャラクター画像の幅 */
    height: 210px;
}

/* 吹き出しのスタイル */
.speech-bubble {
    border-radius: 15px; /* 吹き出しの角を丸く */
    padding: 15px 20px; /* 内側に余白を設定 */
    color: #333; /* 文字色をダークグレーに */
    font-size: 1.1rem; /* 文字サイズを少し大きめに */
    line-height: 1.5; /* 行間を設定 */
    width: 100%; /* 吹き出しがinfo-box内で100%に広がるように */
    position: relative;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1); /* 軽い影で立体感を追加 */
    background-color: #ffffff; /* 背景を白に */
}

/* 発信アイコンのスタイル */
.info-box_character_wave-icon {
    font-size: 30px; /* アイコンのサイズ */
    color: #a2c0d9; /* アイコンの色を柔らかい青に */
    position: relative;
    top: -80px; /* キャラクターより少し上に配置 */
    left: -5px; /* 水平方向にも微調整 */
    opacity: 0.8; /* アイコンの透明度 */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
    transform: rotate(90deg); /* 右に90度回転 */
}

/* ===================== */
/* 小さい画面サイズ用のスタイル調整 */
/* ===================== */

@media (max-width: 576px) {
    .speech-bubble {
        font-size: 0.8rem; /* 文字サイズを調整 */
    }
    .character {
        width: 170px; /* キャラクター画像の幅 */
        height: 210px;
    }
}

.stat-section-header {
    font-size: 1.3rem;
    font-weight: bold;
    color: #333; /* ダークグレーで文字色 */
    margin-bottom: 15px;
    padding-left: 18px; /* 縦線分の余白を設定 */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); /* 軽い影で視認性アップ */
    position: relative;
}

.stat-section-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    background-color: #b0b0b0; /* グレーの縦線 */
    border-radius: 4px;
}

.stat-section-sub-header {
    font-size: 0.9rem;
    font-weight: bold;
    color: #333; /* ダークグレーで文字色 */
    margin-bottom: 5px;
    padding-left: 18px; /* 縦線分の余白を設定 */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); /* 軽い影で視認性アップ */
    position: relative;
}

.stat-section-sub-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    background-color: #b0b0b0; /* グレーの縦線 */
    border-radius: 4px;
}

/* ===================== */
/* トップページ各ボックスのスタイル */
/* ===================== */
/* 基本スタイル */
.card {
    min-width: 100%;
    /* ボックスの最小幅を親要素の100%に設定 */
    white-space: normal;
    /* テキストが必要に応じて折り返されるように設定 */
}

/* 小さい画面サイズ用のスタイル */
@media (max-width: 576px) {
    .card {
        min-width: 150px; /* 小さい画面での最小幅を指定 */
        font-size: 0.7rem;
    }
}

.card {
    font-weight: bold;
}

.card-title-in-text {
    font-size: 0.9rem;
    font-weight: 500;
}

.card-header {
    text-align: center;
}

.card-body {
    background-color: #f5f5f5;
}

/* ===================== */
/* 絞り込み検索のレイアウト
/* ===================== */
.filter-section {
    border: 2px solid #1c82d6; /* 枠線の色 */
    border-radius: 8px; /* 角を丸くする */
    padding: 20px; /* 内側の余白 */
    margin-bottom: 20px; /* 下に余白を追加 */
    background-color: #f8f9fa; /* 背景色 */
    text-align: center; /* 中央寄せ */
}

.filter-header {
    font-size: 1.3em; /* フォントサイズ */
    font-weight: bold; /* 太字 */
    margin-bottom: 15px; /* 下の余白 */
    font-family: 'Arial', sans-serif; /* フォントファミリー */
    color: #007bff; /* 文字色 */
}

.search-filter-sub-section-header {
    font-size: 0.9rem;
    font-weight: bold;
    color: #333; /* ダークグレーで文字色 */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); /* 軽い影で視認性アップ */
    position: relative;
    text-align: left; /* 左寄せ */
    padding-left: 18px; /* 縦線との間隔を調整 */
    margin-bottom: 5px; /* 下に余白を追加 */
}

.search-filter-sub-section-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    background-color: #b0b0b0; /* グレーの縦線 */
    border-radius: 4px;
}

.filter-section .form-select-display {
    margin-left: 10px;
    display: flex;
    flex-wrap: wrap; /* 複数行にまたがる可能性がある場合 */
    justify-content: flex-start; /* アイテムを左端に寄せる */
    align-items: center; /* アイテムを垂直方向に中央揃え */
}

/* 境界線カスタムのスタイル */
.custom-divide {
    display: flex;
    align-items: center;
    font-size: 1.3rem; /* テキストのサイズを調整 */
    color: #0366D6; /* テキストの色 */
    font-weight: bold; /* テキストを太字に */
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); /* テキストに影を追加 */
}

.custom-divide span {
    flex-grow: 1; /* 残りのスペースを全て占める */
    margin-left: 10px; /* テキストと点線の間のマージン */
    height: 2px;
    background-image: linear-gradient(to right, #0366D6 50%, rgba(255, 255, 255, 0) 0%);
    background-size: 10px 2px; /* 点の長さと間隔 */
}

.input-suggest-area.finished {
    background-color: #A9A9A9; /* 入力完了時の背景色を少し濃い青に設定 */
}

/* 絞り込み部分の表示と非表示を制御 */
#filter-display-area {
    border: none;
    background-color: transparent;
    cursor: pointer;
    color: #007bff;
}

#filter-display-area i {
    color: #007bff;
}

/* ドロップダウンメニューのアクティブ項目 */
.nav-link.active {
    pointer-events: none;
    cursor: default;
    opacity: 0.6; /* 任意：見た目で無効とわかるように */
}

.dropdown-item.active {
    pointer-events: none;
    cursor: default;
    opacity: 0.6; /* 任意：見た目で無効とわかるように */
}