@charset "UTF-8";

/* =========================================================
   三大〇〇辞典用 スタイル（青系リニューアル・1カラムデザイン）
========================================================= */

/* ① ボタン類を含め、辞典内の基本フォントをメイリオに統一 */
.dict-header-section,
.dict-tabs button,
.dict-idx-btn,
.dict-title,
.dict-item-name,
.dict-item-note,
.dict-quiz-head,
.dict-quiz-soft-btn,
.dict-kw-tag,
.dict-scroll-top-btn {
    font-family: 'Meiryo', 'メイリオ', sans-serif;
}

/* 辞書ページ専用：1カラム全画面レイアウト化 */
#q_main_content {
    width: 100% !important;
    max-width: 960px;
    margin: 0 auto;
    float: none !important;
}

/* ② 全体の色を青系へリニューアル */

/* ヘッダーセクション */
.dict-header-section {
    text-align: center;
    margin-bottom: 25px;
    padding: 25px 15px;
    background-color: #f4f9ff; /* 淡いブルーグレー */
    border: 2px solid #cce4ff;
    border-radius: 16px;
}

.dict-main-title {
    font-size: 1.6rem;
    color: #1565c0; /* 落ち着いた青 */
    margin-bottom: 10px;
    font-weight: bold;
}

.dict-main-desc {
    font-size: 0.95rem;
    color: #5c6bc0; /* 少し青みがかったグレー */
}

/* エリア切り替えタブ */
.dict-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 25px;
}

.dict-tab {
    padding: 12px 35px;
    font-size: 1.05rem;
    font-weight: bold;
    color: #1976d2;
    background-color: #fff;
    border: 2px solid #1976d2; /* 青の枠線 */
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(25, 118, 210, 0.1);
}

.dict-tab:hover {
    background-color: #e3f2fd;
}

.dict-tab.is-active {
    color: #fff;
    background-color: #1976d2; /* メインブルー */
    border-color: #1976d2;
    box-shadow: 0 4px 8px rgba(25, 118, 210, 0.3);
}

/* 五十音インデックス */
.dict-index-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
    padding: 20px;
    background-color: #fafdff; /* ほんのり青い背景 */
    border: 1px solid #d6eaff;
    border-radius: 12px;
}

.dict-idx-btn {
    padding: 8px 16px;
    font-size: 0.9rem;
    color: #1565c0;
    background-color: #fff;
    border: 1px solid #bbdefb;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s ease;
}

.dict-idx-btn:hover {
    background-color: #e3f2fd;
}

.dict-idx-btn.is-active {
    color: #fff;
    background-color: #1976d2;
    border-color: #1976d2;
}

/* 辞書カード（アコーディオン） */
.dict-list-container {
    margin-bottom: 40px;
}

.dict-card {
    background-color: #fff;
    border: 1px solid #cce4ff;
    border-radius: 12px;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04);
}

.dict-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 25px;
    cursor: pointer;
    background-color: #fff;
    transition: background-color 0.2s;
}

.dict-card-header:hover {
    background-color: #fafdff;
}

.dict-card-header.is-open {
    border-bottom: 1px dashed #cce4ff;
    background-color: #fafdff;
}

.dict-title {
    font-size: 1.4rem;
    color: #0d47a1; /* 深みのあるネイビーブルー */
    font-weight: bold;
    margin: 0;
}

.dict-toggle-icon {
    font-size: 1rem;
    color: #1976d2;
    transition: transform 0.3s ease;
}

/* アコーディオン中身 */
.dict-card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background-color: #fafbfc;
}

.dict-card-inner {
    padding: 25px;
}

.dict-desc {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 20px;
    line-height: 1.6;
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #1976d2; /* 青のアクセント線 */
}

/* 項目リスト */
.dict-items-list {
    list-style-type: none;
    padding: 0;
    margin: 0 0 25px 0;
}

.dict-items-list li {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px dotted #e0e0e0;
}

.dict-items-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.dict-item-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.dict-item-icon {
    font-size: 1.4rem;
    line-height: 1;
    margin-right: 4px;
}

.dict-item-name {
    font-size: 1.15rem;
    font-weight: bold;
    color: #333;
}

/* 補足情報の表示（青系のバッジへ） */
.dict-item-note {
    display: inline-block;
    background-color: #e3f2fd; /* 薄い青 */
    color: #0d47a1;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: bold;
    line-height: 1.4;
    word-break: auto-phrase;
}

.dict-item-expl {
    font-size: 0.95rem;
    color: #666;
    margin: 5px 0 0 0;
    line-height: 1.6;
    padding-left: 36px;
}

/* ④ キーワードタグ（検索リンク化対応） */
.dict-keywords {
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dict-kw-tag {
    display: inline-block;
    padding: 6px 12px;
    background-color: #f1f8ff;
    color: #0366d6;
    border: 1px solid #c8e1ff;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: bold;
    text-decoration: none; /* リンクの下線を消す */
    transition: all 0.2s ease;
}

.dict-kw-tag:hover {
    background-color: #0366d6;
    color: #fff;
    border-color: #0366d6;
}

/* ③ 関連クイズバナー領域 */
.dict-quiz-links {
    background-color: #fafdff;
    border: 2px solid #d6eaff;
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
    text-align: left; /* 左寄せに変更 */
}

.dict-quiz-head {
    font-size: 1rem;
    font-weight: bold;
    color: #1565c0;
    margin-bottom: 15px;
}

.dict-quiz-btn-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* ボタンも左寄せに配置 */
    gap: 10px;
}

/* ③ 優しめの色＋細かい点線のクイズボタン */
.dict-quiz-soft-btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 0.95rem;
    font-weight: bold;
    color: #1565c0; /* 濃いめの青文字 */
    background-color: #e3f2fd; /* 優しめのソフトブルー背景 */
    border: 2px dashed #90caf9; /* 細かい点線（少し濃い水色） */
    border-radius: 8px; /* 少し角丸に */
    text-decoration: none;
    transition: all 0.2s ease;
}

.dict-quiz-soft-btn:hover {
    background-color: #bbdefb;
    border-color: #64b5f6;
    color: #0d47a1;
    transform: translateY(-2px);
}

/* データなしメッセージ */
.dict-no-data {
    text-align: center;
    padding: 40px;
    color: #999;
    background-color: #fff;
    border-radius: 12px;
    border: 2px dashed #cce4ff;
}

/* ⑤ 「ページの先頭へ」ボタンの配置と装飾 */
.dict-footer-actions {
    margin-top: 20px;
    margin-bottom: 40px;
    text-align: left; /* 左端に寄せる */
    padding-left: 5px;
}

.dict-scroll-top-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #fff;
    color: #5c6bc0; /* 落ち着いた色 */
    border: 1px solid #c5cae9;
    border-radius: 25px; /* 丸みを持たせる */
    font-size: 0.9rem;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.dict-scroll-top-btn:hover {
    background-color: #e8eaf6;
    color: #3949ab;
    border-color: #9fa8da;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .dict-tabs {
        flex-direction: column;
        padding: 0 10px;
    }
    
    .dict-idx-btn {
        flex-grow: 1;
        text-align: center;
    }
    
    .dict-title {
        font-size: 1.2rem;
    }

    .dict-item-expl {
        padding-left: 0;
    }
}

/* =========================================================
   辞書一覧の「もっと見る」ボタン
========================================================= */
.dict-more-container {
    text-align: center;
    margin-bottom: 40px;
    display: none; /* 初期は非表示 */
}

.dict-show-more-btn {
    background-color: transparent;
    color: #1565c0;
    border: 2px solid #1565c0;
    padding: 12px 35px;
    border-radius: 30px;
    font-size: 1.05rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Meiryo', 'メイリオ', sans-serif;
}

.dict-show-more-btn:hover {
    background-color: #e3f2fd;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(21, 101, 192, 0.15);
}