/* --- Google Fontsの読み込み --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Shippori+Mincho:wght@700&display=swap');

/* ページ全体の基本設定 */
body {
    background-color: #f4f4f4; /* ページの背景を薄い灰色に */
    font-family: 'Noto Sans JP', sans-serif; /* 基本のフォント (ゴシック) */
    color: #333; /* 基本の文字色 (濃い灰色) */
    margin: 0;
    padding: 0;
}

/* 見出し (h1, h2など) */
h1, h2, h3 {
    font-family: 'Shippori Mincho', serif; /* 見出しのフォント (明朝) */
    color: #2c3e50; /* 見出しの色 (メインの青) */
}

/* リンク */
a {
    text-decoration: none; /* 下線を消す */
    color: #3498db; /* リンクの色 (明るめの青) */
    transition: color 0.3s; /* 色が滑らかに変わるアニメーション */
}

/* リンクにマウスを乗せた時 */
a:hover {
    color: #e67e22; /* アクセントのゴールド（オレンジ系） */
    text-decoration: underline;
}

/* ========== ヘッダー (全ページ共通) ========== */
header {
    background-color: #2c3e50; /* メインの濃い青 */
    color: white;
    padding: 10px 20px;
}

header h1 {
    margin: 0;
    font-family: 'Shippori Mincho', serif; /* ヘッダータイトルも明朝 */
    font-size: 24px;
}

header a {
    color: white; /* ヘッダー内のリンクを白に */
    text-decoration: none;
}

header a:hover {
    color: #e67e22; /* ヘッダー内のホバー色もゴールドに */
    text-decoration: none;
}

/* ナビゲーションメニュー */
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav li {
    display: inline-block;
    margin-right: 15px;
}

/* ▼ サブナビゲーション (ルールページ内) */
.global-nav {
    margin-bottom: 25px;
    border-bottom: 2px solid #eee;
}
.global-nav ul {
    padding-bottom: 10px;
}
.global-nav li {
    font-size: 1.1rem;
}

/* ★今いるページ (active) のリンクを目立たせる */
.global-nav a.active {
    color: #e67e22; /* サイトのアクセントカラー（ゴールド） */
    font-weight: bold; /* 太字にする */
    border-bottom: 3px solid #e67e22; /* 下線を引く */
    padding-bottom: 8px;
}

/* ========== カード/プロフィール用 (円形画像) ========== */

/* プロフィール全体を囲うボックス */
.character-profile {
    display: flex; /* ★画像とテキストを横並びにする */
    align-items: center; /* 縦方向を中央揃えに */
    
    background-color: #fdfdfd; /* カテゴリ背景より少し明るい白 */
    border-radius: 8px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* ごく薄い影 */
    margin-bottom: 20px; /* 各カード間の下の余白 */
    padding: 20px; 
    overflow: hidden; 
}

/* ★円形にする画像 (重要) */
.character-profile img {
    width: 120px; /* 画像の幅 (少し小さめに調整) */
    height: 120px; /* 画像の高さ */
    border-radius: 50%; /* ★画像を円形にする */
    object-fit: cover; /* 画像が引き伸ばされないように、比率を保ったまま切り抜く */
    margin-right: 25px; /* 画像の右側に余白 */
    border: 3px solid #f0f0f0; /* 画像のフチに薄い枠線 */
}

/* 画像の右側のテキストエリア */
.character-profile .character-details {
    margin: 0;
}

/* カード名 (h4) の上の余白を消す */
.character-profile .character-details h4 {
    margin-top: 0;
}

/* 説明文 (p) の下の余白を消す */
.character-profile .character-details p {
    margin-bottom: 0;
    font-size: 0.9rem; /* 説明文を少し小さく */
}

/* ========== キャラクター紹介用 (chara-profile-main) ========== */

/* 全体を囲う白いボックス */
.chara-profile-main {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-bottom: 30px;
    padding: 20px;
}

/* 「キャラクター」のタイトル */
.chara-profile-main h3 {
    text-align: center; /* タイトルを中央揃え */
    font-size: 1.5rem; /* 少し大きめに */
    margin-bottom: 20px;
}

/* ★男女の画像を横並びにするための設定 */
.chara-image-group {
    display: flex; /* 横並びにする */
    justify-content: center; /* 2枚の画像を中央に寄せる */
    gap: 20px; /* 画像と画像の間に隙間をあける */
    margin-bottom: 25px;
    flex-wrap: wrap; /* 画面が狭い場合は自動で改行（縦並び） */
}

/* ★主人公の画像サイズ調整 (これが一番重要！) */
.chara-image-group img {
    max-width: 250px; /* ★画像の最大幅を250pxに制限 */
    height: auto; /* 高さは自動 */
    object-fit: contain;
}

/* プロフィール（年齢・所属など）のボックス */
.chara-profile-details {
    background-color: #f9f9f9; /* 少し背景色を変える */
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 20px;
}

.chara-profile-details p {
    margin: 8px 0; /* 行間を少しあける */
}

/* 説明文の小見出し */
.chara-description h4 {
    font-family: 'Shippori Mincho', serif;
    font-size: 1.2rem;
    margin-top: 0;
}

/* ========== カードページ用 (カテゴリ分け) ========== */

.card-category {
    background-color: #ffffff; /* 白い背景 */
    padding: 20px;
    border-radius: 8px; /* 角を丸く */
    margin-bottom: 30px; /* カテゴリ間の余白 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* ごく薄い影 */
}

/* カテゴリ内のカード名（h3だと大きすぎるのでh4を使う） */
.character-details h4 {
    font-family: 'Shippori Mincho', serif; /* 見出しフォント */
    font-size: 1.2rem; /* h3より少し小さく */
    margin: 0 0 10px 0; /* 名前と説明文の間の余白 */
}

/* ========== キャラクター全身画像用 (chara-full) ========== */
.chara-full {
    display: flex; /* 画像とテキストを横並びに */
    flex-direction: column; /* 縦に並べる（画面幅が広いときは変更可） */
    align-items: center; /* 中央揃えに */
    
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-bottom: 30px;
    padding: 20px;
    text-align: center; /* テキストも中央揃え */
}

.chara-full img {
   max-width: 250px; /* ★主人公に合わせて最大幅を250pxに統一 */
   height: auto; /* ★高さは自動調整 */
   border-radius: 0; /* 角を丸めない（全身画像なので） */
   object-fit: contain; /* 全体が収まるように調整 */
   margin: 0 auto 20px auto; /* 中央寄せにして、下に余白 */
   border: none; /* 枠線を消す */
}

.chara-full .character-details {
    margin-left: 0; /* 左の余白を消す */
    }
    
    /* 画面幅が広いPCで見る場合（横並びにする） */
    @media (min-width: 768px) {
    .chara-full {
            flex-direction: row; /* 横並びに戻す */
            text-align: left; /* テキストを左揃えに */
            align-items: flex-start; /* 上揃えに */
            }
            .chara-full img {
            margin: 0 30px 0 0; /* 右側に余白 */
            }
     }

/* ========== メインコンテンツ ========== */
main {
    padding: 20px;
    min-height: 60vh;
}

/* ========== フッター (全ページ共通) ========== */
footer {
    background-color: #333; /* フッターは濃いグレー */
    color: #aaa;
    text-align: center;
    padding: 20px;
    margin-top: 30px;
}

footer a {
    color: #fff;
}

footer a:hover {
    color: #e67e22;
}

/* クラス概要カードの画像にマウスが乗ったら */
.class-summary-card:hover .class-summary-img {
    transform: scale(1.1); /* 1.1倍にフワッと拡大 */
    opacity: 0.8; /* （例）少し透明にする */
    transition: transform 0.3s ease, opacity 0.3s ease; /* 滑らかに変化 */
}

/* ▼ アコーディオンの中身 (画像や説明文) */
/* (summary 以外の要素に適用) */
details > *:not(summary) {
    padding: 0 20px 20px 20px; /* 上は0、左右下は余白 */
    
    /* (おまけ) 中身がフワッと表示されるアニメーション */
    animation: fadeIn 0.4s ease-out;
}

/* ▼ 挿絵の画像スタイル (以前の提案を微調整) */
details img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px 0 15px 0; /* 左寄せ (上下余白、左右0) */
    border-radius: 4px; /* 画像の角も少し丸める */
}

/* ▼ (おまけ) フワッと表示させるアニメーションの定義 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== (クラスセクション) 共通ルール ========== */

/* ▼ 「★ クラスの基本ルール (重要)」のハイライトボックス */
.rule-highlight {
    background-color: #f0f8ff; /* 薄い青の背景 */
    border: 1px solid #cce5ff; /* 少し濃い青の枠線 */
    border-radius: 8px; /* 角丸 (他と統一) */
    padding: 15px;
    margin-bottom: 20px;
}

/* ▼ ハイライトボックス内のh4 (★ クラスの基本ルール) */
.rule-highlight h4 {
    font-family: 'Shippori Mincho', serif; /* 明朝体 */
    margin-top: 0; /* 上の余白を削除 */
    color: #2c3e50; /* 見出しの色 */
}

/* ▼ ハイライトボックス内のリスト (ul) */
.rule-highlight ul {
    margin-bottom: 0; /* 下の余白を削除 */
}

/* ========== (アコーディオン内部) 汎用スタイル ========== */

/* ▼ アコーディオン内部の小見出し (h4) */
details h4 {
    font-family: 'Shippori Mincho', serif; /* ★明朝体に統一 */
    font-size: 1.1rem; /* 少し小さめに */
    color: #444; /* メインの見出しより少し薄く */
    border-bottom: 2px solid #f0f0f0; /* 薄い下線 */
    padding-bottom: 5px;
    margin-top: 20px; /* 前の要素との間に余白 */
}

/* ▼ アコーディオン内部のリスト (ul, ol) */
details ul,
details ol {
    background-color: #fcfcfc; /* リストの背景をほんのり変える */
    border-radius: 5px;
    padding: 10px 10px 10px 40px; /* 内側の余白 */
    margin-bottom: 15px;
}

/* ▼ リストの各項目 (li) */
details li {
    margin-bottom: 8px; /* 項目間の余白 */
}

details li:last-child {
    margin-bottom: 0; /* 最後の項目の余白は消す */
}

/* ========== (クラス紹介) リッチ・アコーディオン ========== */

/* ▼ アコーディオン全体（<details>） */
.class-accordion {
    background-color: #ffffff; /* 白い背景 */
    border-radius: 8px; /* 角を丸く */
    margin-bottom: 20px; /* 他のクラスとの間隔 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 薄い影 */
    border: 1px solid #f0f0f0;
    overflow: hidden; /* ★重要★ */
}

/* ▼ クリックする部分（<summary>） */
.class-summary-card {
    display: flex; /* ★これがキモ！ 中身を横並びにする */
    align-items: center; /* 上下中央揃え */
    padding: 15px;
    cursor: pointer;
    position: relative; /* アイコン配置のため */
    transition: background-color 0.3s;
    
    /* (デフォルトの矢印を消す) */
    list-style: none;
}
.class-summary-card::-webkit-details-marker {
    display: none;
}
.class-summary-card:hover {
    background-color: #f9f9f9;
}

/* ▼ (1) クラスの画像 */
.class-summary-img {
    width: 250px;  /* (お好みで調整) */
    height: 250px; /* (お好みで調整) */
    object-fit: contain;
    margin-right: 15px;
    border-radius: 4px;
}

/* ▼ (2) テキストエリア（概要） */
.class-summary-text {
    flex-grow: 1; /* 残りの幅を全部もらう */
}
.class-summary-text h4 {
    font-family: 'Shippori Mincho', serif;
    font-size: 1.2rem;
    color: #2c3e50;
    margin: 0 0 5px 0; /* 上下の余白を詰める */
}
.class-summary-text p {
    font-size: 0.9rem;
    color: #555;
    margin: 0;
}

/* ▼ (3) 開閉アイコン（+ と ×） */
.accordion-icon {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #3498db;
    padding: 0 10px;
    
    transition: transform 0.2s;
}

/* ▼ 開いた時のアイコン（×） */
.class-accordion[open] > .class-summary-card .accordion-icon {
    content: '\00d7'; /* × (バツ) */
    color: #e67e22;
    transform: rotate(90deg);
}

/* ▼ 開いたら見える部分（詳細ルール） */
.class-details-body {
    padding: 0 20px 20px 20px;
    border-top: 1px solid #f0f0f0;
    
    /* (おまけ) フワッと表示されるアニメーション */
    animation: fadeIn 0.4s ease-out;
}

/* ▼ (おまけ) フワッと表示させるアニメーションの定義 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== (クラス紹介) グリッドレイアウト（横並び） ========== */

.class-grid-container {
    display: grid;
    /* (PC) 2列で表示 */
    grid-template-columns: repeat(2, 1fr); 
    gap: 20px; /* カード間の隙間 */
}

/* (スマホ) スマホ幅になったら自動で1列にする */
@media (max-width: 768px) {
    .class-grid-container {
        grid-template-columns: 1fr; /* 1列 */
    }
}

/* ========== (アルカステラページ) 小見出し ========== */
.rule-subhead {
    font-family: 'Shippori Mincho', serif;
    font-size: 1.4rem; /* h3 より小さく、 h4 より大きく */
    color: #2c3e50;
    margin-top: 35px;
    margin-bottom: 15px;
    border-bottom: 3px solid #ccc; /* 軽く区切り線 */
    padding-bottom: 5px;
}

/* ========== (カード/アルカステラ) アルカステラ項目を横並びにする ========== */

.alcastera-subhead-grid {
    display: grid;
    /* 2列で表示 */
    grid-template-columns: repeat(2, 1fr); 
    gap: 20px; /* 間の隙間 */
}

/* (スマホ対応) スマホ幅になったら1列に戻す */
@media (max-width: 768px) {
    .alcastera-subhead-grid {
        grid-template-columns: 1fr;
    }
}

/* ========== (フィールド) グリッドレイアウトの修正 ========== */

/* ========== (フィールド) グリッドレイアウトの修正（自動折り返しを調整） ========== */

.field-grid-container {
    display: grid;
    gap: 20px;
    margin-bottom: 30px;
}

.field-grid-container.unified-grid {
    /* PCでは最大4列まで、カード1枚の最小幅は200px */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
    max-width: 900px; /* カード4枚分＋gap20px*3 + 左右のpadding */
    margin-left: auto;
    margin-right: auto;
}


/* ▼ 専用エリアの見た目に差をつける（オプション） */
.field-area-card.dedicated-area {
    background-color: #fcf0f0; 
    border: 1px solid #e67e22;
}

/* (スマホ対応は auto-fill が自動でやってくれるため、特別な @media は省略) */

/* ========== (用語集) 親アコーディオンのスタイル ========== */
/* 子要素のアコーディオンとの見た目を区別する */

.parent-accordion > .class-summary-card {
    /* 親タブは少し目立たせる */
    background-color: #e8e8e8; /* 灰色背景 */
    border: none;
    border-bottom: 2px solid #ccc; /* 下線を強める */
    
}

.parent-accordion > .class-details-body {
    /* 子アコーディオンの背景を親と区別する */
    background-color: #f7f7f7; /* 薄いグレー */
    padding: 20px 20px 0 20px; /* 上下左右にパディング */
}

.parent-accordion > .class-details-body .class-accordion {
    /* 子アコーディオンの余白を詰める */
    margin-bottom: 15px; 
}

/* ========== (用語集タブ内部) グリッドレイアウト ========== */
.glossary-term-grid {
    display: grid;
    /* PCでは均等な3列で表示 */
    grid-template-columns: repeat(3, 1fr); 
    gap: 15px; /* カード間の隙間を少し詰める */
    padding: 10px 0 10px 0; /* 上下の余白 */
}

/* スマホ対応：画面が狭くなったら自動で1列にする */
@media (max-width: 900px) {
    .glossary-term-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 2〜3列で自動調整 */
    }
}

/* =================================
 ツールチップ (用語の定義をホバーで表示)
================================= */

.glossary-tooltip {
    position: relative;
    display: inline-block;
    cursor: help; 
    border-bottom: 1px dotted #e67e22; 
    font-weight: bold; 
}

.glossary-tooltip .tooltip-text {
    /* ツールチップ本体のスタイル */
    visibility: hidden;
    width: 300px; /* ツールチップの幅 */
    background-color: #2c3e50; 
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 10px 15px;
    
    /* 位置調整 */
    position: absolute;
    z-index: 1000;
    
    /* ▼▼▼ ここが v2 のスタイルです ▼▼▼ */
    
    /* デフォルトは「親要素の上、中央」に表示 */
    bottom: 125%; /* 親要素の上 + 矢印の分 */
    left: 50%;
    right: auto;
    /* 親要素に対して中央揃え */
    transform: translateX(-50%); 
    margin-left: 0; /* リセット */
    
    /* ▲▲▲ v2 スタイルここまで ▲▲▲ */
    
    /* アニメーション */
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
    pointer-events: none; 
}

/* ▼▼▼ ここから v2 で新規追加するクラス ▼▼▼ */
/* 画面の「右端」ではみ出す場合にJSがこのクラスを追加 */
.glossary-tooltip .tooltip-text.align-right-edge {
    left: auto;
    right: 0; /* 親要素の右端にツールチップの右端を合わせる */
    transform: translateX(0); /* 中央揃えを解除 */
}

/* 画面の「左端」ではみ出す場合にJSがこのクラスを追加 */
.glossary-tooltip .tooltip-text.align-left-edge {
    left: 0; /* 親要素の左端にツールチップの左端を合わせる */
    right: auto;
    transform: translateX(0); /* 中央揃えを解除 */
}
/* ▲▲▲ 新規追加ここまで ▲▲▲ */


/* マウスがホバーした時の表示 */
.glossary-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* ツールチップの「矢印（しっぽ）」のスタイル */
.glossary-tooltip .tooltip-text::after {
    content: "";
    position: absolute;
    
    /* ▼▼▼ ここが v2 のスタイルです ▼▼▼ */
    
    /* デフォルト（中央表示）の矢印 */
    top: 100%; /* ツールチップの下端に配置 */
    left: 50%; /* ツールチップの中央 */
    margin-left: -5px; /* 矢印の幅の半分だけ左にずらす */
    border-width: 5px;
    border-style: solid;
    border-color: #2c3e50 transparent transparent transparent;

    /* ▲▲▲ v2 スタイルここまで ▲▲▲ */
}

/* ▼▼▼ ここから v2 で新規追加するクラス ▼▼▼ */
/* 右端寄せ (.align-right-edge) された時の矢印 */
.glossary-tooltip .tooltip-text.align-right-edge::after {
    left: auto;
    right: 15px; /* ツールチップの右から15pxの位置に */
    margin-left: 0;
}

/* 左端寄せ (.align-left-edge) された時の矢印 */
.glossary-tooltip .tooltip-text.align-left-edge::after {
    left: 15px; /* ツールチップの左から15pxの位置に */
    right: auto;
    margin-left: 0;
}
/* ▲▲▲ 新規追加ここまで ▲▲▲ */

/* =================================
 タブ切り替え
================================= */

/* タブボタンのスタイル */
.tab-nav {
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
}

.tab-btn {
    padding: 10px 20px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    cursor: pointer;
    font-size: 1em;
    border-bottom: none; /* 下線を消す */
    margin-right: 5px;
    border-radius: 5px 5px 0 0; /* 上の角を丸く */
}

/* アクティブな（選択中）ボタンのスタイル */
.tab-btn.active {
    background-color: #fff; /* 背景を白く */
    font-weight: bold;
    /* 下線をコンテンツとつなげるため、1px分重ねる */
    position: relative;
    top: 1px;
    border-bottom: 1px solid #fff;
}

/* タブコンテンツのスタイル */
.tab-pane {
    display: none; /* JSで切り替えるため、いったん全部非表示に */
}

/* アクティブな（表示中）コンテンツのスタイル */
.tab-pane.active {
    display: block; /* .active が付いたものだけ表示 */
}

/* 元々あった .card-category のスタイルは活かされます。
  もし、タブにしたことで余白などがおかしくなったら、
  以下のように .tab-pane.active に対して調整を加えてください。
  
  .tab-pane.active {
      display: block;
      padding-top: 20px;
  }
*/

/* =================================
 カードグリッドレイアウト
================================= */

/* カードを並べる親要素（コンテナ） */
.card-grid {
    display: grid;
    
    /* 画面幅に応じてカラム数を自動調整します。
      - auto-fit: 入るだけ詰める
      - minmax(180px, 1fr):
        カードの幅は「最低180px」を確保し、
        スペースが余れば「最大1fr（均等幅）」まで広げる。
      
      ※ 180px の部分は、ご自身のカード画像の幅に合わせて調整してください。
        例：カード幅が 200px なら minmax(200px, 1fr)
    */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    
    /* カード間の隙間 */
    gap: 20px; 
    
    margin-top: 20px; /* 説明文との間に余白 */
}

/* カード画像（子要素）のスタイル */
.card-item img {
    width: 100%; /* 親要素の幅いっぱいに広げる */
    max-width: 200px;
    margin: 0 auto;
    height: auto; /* 高さは自動調整 */
    display: block; /* 画像下の余分な隙間を削除 */

    /* お好みで影や角丸を */
    border-radius: 10px; /* カードの角を丸く */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* ふんわりした影 */

    /* マウスオーバー時のアニメーション（お好みで） */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* カード画像にマウスを乗せた時の動き */
.card-item a:hover img {
    transform: scale(1.05); /* 少し拡大 */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* 影を少し濃く */
}

/* =================================
 フィルター/検索コントロール
================================= */
.filter-controls {
    /* アコーディオンパネルの内側に入ったため、
       以下のスタイルをリセット/変更します */
    background-color: #f5f5f5; 
    padding: 20px;
    
    border-radius: 0; /* 角丸は親の .accordion-panel が担当 */
    margin-bottom: 0; /* マージン不要に */
    border: none; /* borderも親が担当 */
}

.filter-group {
    margin-bottom: 15px;
}
.filter-group:last-child {
    margin-bottom: 0;
}

.filter-group label {
    font-weight: bold;
    display: block;
    margin-bottom: 8px;
}

/* カード名検索ボックス */
.card-search {
    width: 100%;
    padding: 10px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* paddingを含めて幅100%にする */
}

/* ▼▼▼ ここを修正しました ▼▼▼ */
/* 並び替え・フィルター用ドロップダウン */
.card-sort,
.card-cost-filter,
.card-timing-filter,
.card-rarity-filter {
    width: 100%;
    padding: 10px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    box-sizing: border-box; /* 検索ボックスとデザインを統一 */
}
/* ▲▲▲ 修正ここまで ▲▲▲ */


/* クラスフィルターボタン */
.class-filters {
    display: flex;
    flex-wrap: wrap; /* ボタンが多い場合に折り返す */
    gap: 8px; /* ボタン間の隙間 */
}

.class-btn {
    padding: 8px 15px;
    font-size: 0.9em;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 20px; /* 丸みを帯びたボタン */
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.class-btn:hover {
    background-color: #e0e0e0;
}

/* 選択中のクラスボタンのスタイル */
.class-btn.active {
    background-color: #337ab7; /* 色はサイトのテーマに合わせる */
    color: #fff;
    border-color: #337ab7;
}

/* JSでカードを非表示にするためのスタイル */
.card-item.hidden {
    display: none;
}

/* =================================
 アコーディオン
================================= */
.accordion-toggle {
    background-color: #f0f0f0;
    color: #444;
    cursor: pointer;
    padding: 15px 20px;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px 8px 0 0; /* 上の角だけ丸く */
    text-align: left;
    font-size: 1.1em;
    font-weight: bold;
    margin-top: 20px; /* カード一覧とのマージン代わり */
    transition: background-color 0.2s;
    position: relative; /* 矢印アイコンのため */
}

.accordion-toggle:hover {
    background-color: #e0e0e0;
}

/* 矢印アイコン (v) */
.accordion-toggle::after {
    content: 'v'; /* シンプルな矢印 */
    font-family: monospace; /* 記号が綺麗に出るフォント */
    font-size: 1.2em;
    position: absolute;
    right: 20px;
    transition: transform 0.3s;
}

/* アコーディオンが開いている時 (active) の矢印 (^) */
.accordion-toggle.active::after {
    transform: rotate(180deg);
}

.accordion-panel {
    padding: 0; /* .filter-controls が padding を持つ */
    background-color: white;
    max-height: 0; /* JSで .active が無い時は高さを0に */
    /* overflow: hidden; *//* 高さが0の時は中身を隠す */
    transition: max-height 0.3s ease-out; /* スムーズに開閉 */
    border: 1px solid #ddd;
    border-top: none; /* ボタンのborderとくっつける */
    border-radius: 0 0 8px 8px; /* 下の角だけ丸く */
}

/* JSで .active が付いたら開く */
.accordion-panel.active {
    max-height: 1000px; /* フィルターが収まる十分な高さ (自動調整) */
}

/* =================================
 フィルター/検索コントロール (2カラム)
================================= */
.filter-grid-2col {
    display: grid;
    /* 2つの均等なカラムを作成 */
    grid-template-columns: repeat(2, 1fr); 
    /* カラム間の横方向の隙間 */
    column-gap: 20px; 
    /* ※縦の隙間は .filter-group の margin-bottom がそのまま使われます */
}

/* (スマホ対応) 画面が狭い場合 (例: 768px以下) は1カラムに戻す */
@media (max-width: 768px) {
    .filter-grid-2col {
        grid-template-columns: 1fr; /* 1カラムにする */
    }
}

/* =================================
 カード詳細ページ (card-detail)
================================= */

/* メインコンテンツの最大幅（読みやすさのため） */
.card-detail-main {
    max-width: 1000px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px 40px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* (画像1) フレーバーテキスト */
.flavor-quote {
    font-size: 1.25em;
    font-weight: bold;
    color: #005a9c; /* 濃い青 */
    text-align: center;
    margin: 20px 0;
    padding: 15px;
    background-color: #f0f8ff;
    border-radius: 8px;
    line-height: 1.6;
}

/* (画像1) プロフィールレイアウト */
.profile-layout {
    display: flex;
    flex-wrap: wrap; /* スマホで縦並びにする */
    gap: 20px;
    margin: 20px 0;
}
.profile-info {
    flex: 2; /* テキスト側を広めに */
    min-width: 300px;
}
.profile-image {
    flex: 1; /* 画像側を狭めに */
    min-width: 250px;
    text-align: center;
}
.profile-image img {
    max-width: 100%;
    height: auto;
    max-height: 400px; /* 立ち絵が大きすぎないように */
    object-fit: contain;
}
.profile-info ul {
    list-style: none;
    padding: 0;
}
.profile-info li {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

/* (画像2) 設定・性能概要 */
.lore-section {
    line-height: 1.7;
}

/* (画像3, 4) 性能詳細タブ */
.tab-nav-card-level {
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
}
.tab-btn-card-level {
    padding: 10px 20px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    cursor: pointer;
    font-size: 1em;
    border-bottom: none;
    margin-right: 5px;
    border-radius: 5px 5px 0 0;
}
.tab-btn-card-level.active {
    background-color: #fff;
    font-weight: bold;
    position: relative;
    top: 1px;
    border-bottom: 1px solid #fff;
}
.tab-pane-card-level {
    display: none;
}
.tab-pane-card-level.active {
    display: block;
}

/* (画像3, 4) Lv1詳細グリッド */
.level-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 自動折り返し2カラム */
    gap: 25px;
}
.grid-column {
    min-width: 0; /* グリッドのflexバグ対策 */
}
.level-stats {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 15px;
    font-weight: bold;
    font-size: 1.1em;
}
.level-card-image img {
    width: 100%;
    max-width: 250px; /* カード画像が拡大しすぎないように */
    border-radius: 15px; /* カードの角丸 */
    margin-bottom: 15px;
}

/* (画像3, 4) スキルボックス */
.skill-box {
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 5px;
    margin-bottom: 15px;
}
.skill-box h4 {
  font-family: 'Noto Sans JP', sans-serif; /* スキル名はゴシックに */
  font-size: 1em;
  font-weight: bold;
  background-color: #eee;
  padding: 10px;
  margin: 0;
    /* 親の .skill-box の角丸(5px)と合わせる */
  border-radius: 5px 5px 0 0; 
}
.skill-box .skill-type {
    font-size: 0.9em;
    background-color: #555;
    color: white;
    padding: 3px 6px;
    border-radius: 3px;
    margin-right: 5px;
}
.skill-box .skill-prop {
    padding: 5px 10px;
    border-bottom: 1px solid #eee;
    font-size: 0.9em;
}
.skill-box .skill-effect {
    padding: 10px;
    font-size: 0.95em;
    line-height: 1.6;
}
.skill-box .skill-effect strong {
    color: #333;
}

/* 戻るボタン */
.back-button-wrapper {
    text-align: center;
    margin-top: 30px;
}
.back-button {
    display: inline-block;
    padding: 10px 25px;
    background-color: #555;
    color: #fff;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.2s;
}
.back-button:hover {
    background-color: #333;
    color: #fff;
    text-decoration: none;
}

/* =================================
 カード詳細ページ (メインアコーディオン)
================================= */

.detail-accordion-toggle {
    /* フィルター用アコーディオン(accordion-toggle)とは見た目を変える */
    font-family: 'Shippori Mincho', serif; /* 見出しフォント */
    font-size: 1.5em; /* h3 と同じくらいのサイズ */
    color: #2c3e50; /* 見出しの色 */
    background-color: transparent; /* 背景は透明 (親の白が見える) */
    border: none;
    border-bottom: 2px solid #eee;
    padding: 15px 0px; /* 上下だけpadding */
    width: 100%;
    text-align: left;
    cursor: pointer;
    margin-top: 20px; /* アコーディオン間の余白 */
    position: relative; /* 矢印のため */
    transition: background-color 0.2s;
}

.detail-accordion-toggle:hover {
    background-color: #f9f9f9;
}

/* 矢印アイコン (v) */
.detail-accordion-toggle::after {
    content: 'v';
    font-family: monospace;
    font-size: 1em;
    font-weight: bold;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s;
    color: #3498db;
}

/* 開いている時 (active) の矢印 (^) */
.detail-accordion-toggle.active::after {
    transform: translateY(-50%) rotate(180deg);
}

.detail-accordion-panel {
    padding: 0; /* パネル自体にpaddingは不要 */
    max-height: 0;
    /* overflow: hidden; */
    transition: max-height 0.3s ease-out;
}

/* 開いている時 (active) */
.detail-accordion-panel.active {
    max-height: 5000px; /* 十分な高さ（コンテンツ量に応じて調整） */
    padding-top: 10px; /* ボタンとの間に少し隙間 */
}

/* ========== フィルター用アコーディオン (cards.html) ========== */

/* ▼ 閉じた状態 (デフォルト) */
.accordion-panel {
    max-height: 0; /* ★重要：高さを0にする */
    opacity: 0;
    overflow: hidden; /* ★重要：中身を隠す */
    visibility: hidden;
    
    /* 滑らかに閉じるためのアニメーション設定 */
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, visibility 0.3s ease-out, padding 0.3s ease-out;
    
    /* 閉じている時は上下の余白も消す */
    padding-top: 0;
    padding-bottom: 0;
}

/* ▼ 開いた状態 (.active が付いた時) */
.accordion-panel.active {
    max-height: 1000px; /* ★重要：フィルターの高さを十分に確保できる値 */
    opacity: 1;
    visibility: visible;
    overflow: visible;

    /* 滑らかに開くためのアニメーション設定 */
    transition: max-height 0.5s ease-in, opacity 0.5s ease-in, padding 0.3s ease-in;
    
    /* 開いたら余白を戻す */
    padding-top: 20px;
    padding-bottom: 20px;
}

/* ▼ フィルターボタン (おまけ: 開閉で矢印を回す) */
.accordion-toggle {
    transition: transform 0.3s ease;
}

/* =================================
 カード詳細ページ (スキルタイプ別カラー)
================================= */

/* .skill-type に、新しいヘルパークラスが
  追加された時の色を定義します。
*/

/* 紫: アストラルコード */
.skill-box .skill-type.sk-astral {
    background-color: #8e44ad; /* 紫 (Purple) */
}

/* 赤: 攻撃スキル */
.skill-box .skill-type.sk-attack {
    background-color: #c0392b; /* 赤 (Red) */
}

/* 青: 支援スキル */
.skill-box .skill-type.sk-support {
    background-color: #2980b9; /* 青 (Blue) */
}

/* 緑: リーダースキル */
.skill-box .skill-type.sk-leader {
    background-color: #27ae60; /* 緑 (Green) */
}

/* =================================
 カード詳細ページ (スペルカード用)
================================= */

/* 2カラムレイアウト */
.spell-layout-grid {
    display: grid;
    /* 最小300px、最大1fr(均等) の2カラム */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 20px;
    align-items: flex-start; /* 上揃え */
}

/* 左カラム (画像) */
.spell-card-image {
    width: 100%;
    text-align: center; /* スマホで1列になった時に中央寄せ */
}

.spell-card-image img {
    width: 100%;
    max-width: 400px; /* スペルカードの最大サイズ */
    border-radius: 15px; /* カードの角丸 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: block;
    margin: 0 auto; /* 中央寄せ */
}

.rarity-text {
    font-size: 0.9em;
    color: #555;
    margin-top: 10px;
    font-weight: bold;
    text-align: center;
}

/* 右カラム (情報) */
.spell-info-box .skill-box {
    /* 既存の .skill-box を流用 */
    margin-bottom: 0; 
}

/* フレーバーテキスト用のスタイル（おまけ）
.flavor-text-box {
    margin-top: 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 5px;
    border: 1px solid #eee;
}
.flavor-text-box p {
    margin: 0;
    font-style: italic;
    color: #444;
    text-align: center;
}
*/

/* =================================
 レベルアップ条件
================================= */


    .level-up-box {
      background-color: #f7f7f7; /* 画像のボックスに合わせた薄いグレー */
       border: 1px solid #ddd;
       border-radius: 5px;
       padding: 10px 15px;
       margin-bottom: 15px; /* 次のスキルボックスとの間隔 */
    }
    .level-up-box h4 {
        font-size: 1.1em;
        font-weight: bold;
        margin-top: 0;
        margin-bottom: 10px;
        padding-bottom: 5px;
        border-bottom: 1px solid #eee;
    }
    .level-up-box ol {
        padding-left: 20px; /* リストの標準的なインデント */
        margin-top: 0;
        margin-bottom: 0;
    }
    .level-up-box li {
        margin-bottom: 5px;
        line-height: 1.5;
    }
    .level-up-box li:last-child {
        margin-bottom: 0;
    }

/* カード詳細ページ: ステータス */
.level-stats {
    display: flex;
    justify-content: center;
    gap: 20px;
    list-style: none;
    padding: 0;
    font-size: 1.1rem;
    font-weight: bold;
    background: #f9f9f9;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 20px;
}

/* カード詳細ページ: レベルアップ条件 ボックス */
.level-up-box {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin-bottom: 15px; /* スキルボックスとの間隔 */
}
.level-up-box h4 {
    margin-top: 0;
    font-size: 1.1rem;
    border-bottom: 2px solid #6c8ebf; /* 任意の色 */
    padding-bottom: 5px;
}
.level-up-box ol {
    padding-left: 20px;
    margin-bottom: 0;
}


/* カード詳細ページ: スキルアコーディオン */
.skill-accordion-toggle {
    background-color: #f1f1f1;
    color: #444;
    cursor: pointer;
    padding: 12px 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1.1rem;
    font-weight: bold;
    transition: 0.4s;
    margin-top: 15px;
    border-radius: 5px;
}
.skill-accordion-toggle:hover {
    background-color: #e0e0e0;
}
.skill-accordion-toggle.active {
    background-color: #e9e9e9;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.skill-accordion-toggle .skill-count {
    font-weight: normal;
    font-size: 0.9rem;
    color: #555;
    float: right;
    line-height: 1.5;
}

/* 開閉アイコン */
.skill-accordion-toggle::after {
    content: '\002B'; /* + */
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 10px;
}
.skill-accordion-toggle.active::after {
    content: "\2212"; /* - */
}

/* アコーディオンパネル */
.skill-accordion-panel {
    padding: 0;
    background-color: white;
    max-height: 0;
    /* overflow: hidden;*/
    transition: max-height 0.3s ease-out;
    border: 1px solid #f1f1f1;
    border-top: none;
    border-radius: 0 0 5px 5px;
}
.skill-accordion-panel .skill-box {
    /* パネル内のスキルボックスのスタイルを調整 */
    border: none;
    box-shadow: none;
    margin-bottom: 0;
    border-bottom: 1px dashed #eee;
}
.skill-accordion-panel .skill-box:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.skill-accordion-panel.active {
    /* JSで .active を切り替えるので、十分な高さを指定 */
    max-height: 1500px; /* 必要に応じて調整 */
    transition: max-height 0.5s ease-in-out;
    padding: 1px; /* ボックスの枠線が見えるように */
}

/* ========== カード一覧ページ (cards.html) ========== */

/* ▼ カードを並べる親グリッド */
.card-grid {
    display: grid;
    
    /* PC: 5列で表示 */
    grid-template-columns: repeat(5, 1fr);
    
    gap: 16px; /* カード間の隙間 (お好みで調整してください) */
    padding-top: 20px; /* フィルターとの間に余白 */
    
    /* 1. 高さを固定（例: 600px） */
    max-height: 600px; /* ← この数値はお好みの高さに調整してください */
    
    /* 2. 縦方向に溢れた場合のみスクロールバーを表示 */
    overflow-y: auto;
    
    /* 3. (おまけ) スクロールバーの見た目を少し細くする (Firefox用) */
    scrollbar-width: thin;
    scrollbar-color: #aaa #f0f0f0; /* (バーの色 トラックの色) */
}

.card-grid::-webkit-scrollbar {
    width: 8px; /* スクロールバーの幅 */
}
.card-grid::-webkit-scrollbar-track {
    background: #f0f0f0; /* 背景 */
}
.card-grid::-webkit-scrollbar-thumb {
    background-color: #aaa; /* バーの色 */
    border-radius: 4px;
}
.card-grid::-webkit-scrollbar-thumb:hover {
    background-color: #888; /* ホバー時の色 */
}

/* ▼ カード本体（画像がはみ出ないように） */
.card-item {
    width: 100%; /* グリッドのセル幅に合わせる */
}
.card-item img {
    width: 100%;
    height: auto;
    display: block; /* 画像下の余分な隙間を削除 */
    border-radius: 8px; /* カードの角を少し丸めると綺麗です */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ▼ (おまけ) マウスを乗せたら少し浮き上がらせる */
.card-item img:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}


/* --- レスポンシブ対応 (スマホ・タブレット) --- */

/* ▼ 画面幅が 1024px 以下 (タブレットなど) になったら 4列 */
@media (max-width: 1024px) {
    .card-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ▼ 画面幅が 768px 以下 (大きめのスマホ/タブレット縦) になったら 3列 */
@media (max-width: 768px) {
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ▼ 画面幅が 480px 以下 (スマホ) になったら 2列 */
@media (max-width: 480px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px; /* スマホでは隙間を少し詰める */
    }
}

/* ================================== */
/* フレーバーテキスト共通スタイル */
/* ================================== */
.flavor-quote {
  font-style: italic; 
  margin-bottom: 1.5em; 
}

/* ================================== */
/* アルカステラ クラス別カラー (優先度強化版) */
/* ================================== */

/* アウラコンポルタ (赤) */
p.flavor-quote.aura-comporta {
  color: #E60033;
}

/* ホノリウス (緑) */
p.flavor-quote.honorius {
  color: #008000;
}

/* セフィル・イェツィラー (青) */
p.flavor-quote.sephir-yezirah {
  color: #0040E6;
}

/* ピカトリクス (金色) */
p.flavor-quote.picatrix {
  color: #777705;
}

/* グリモワール (紫) */
p.flavor-quote.grimoire {
  color: #800080;
}

/* クトノグラフ (黒) */
p.flavor-quote.chthonograph {
  color: #333333;
}

/* HorizonNotes (水色) */
p.flavor-quote.horizon-notes {
  color: #00BFFF;
}

/* style.css または <style> タグ内に追記・修正 */

/* ------------------------------------- */
/* ギャラリーページの調整 */
/* ------------------------------------- */

/* フォルダグリッドの幅・間隔はそのまま */
.folder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 30px;
    list-style: none;
    padding: 0;
}

/* フォルダアイテム（フォルダアイコンとその下のテキスト）のスタイル */
.folder-item {
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    /* height: 250px; /* 必要に応じて、フォルダアイテム全体の高さを統一 */
}

/* フォルダアイコン自体のスタイル */
.folder-icon {
    width: 100%;
    max-width: 200px;
    height: 150px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    margin-bottom: 10px;
    box-sizing: border-box;
    overflow: hidden;
}

/* ギャラリー内の画像サムネイルのスタイル */
.image-grid {
    display: grid; /* グリッドレイアウトを適用 */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* サムネイルの最小幅を小さく */
    gap: 20px; /* サムネイル間の間隔を調整 */
    list-style: none;
    padding: 0;
    margin-top: 30px; /* フォルダとの間隔 */
}

.image-grid .image-item {
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s;
    height: 200px; /* サムネイルアイテム全体の高さを少し小さく */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 画像とテキストを上下に配置 */
    align-items: center;
    overflow: hidden;
    border: 1px solid #ddd; /* サムネイルの枠線を追加 */
    border-radius: 8px; /* 角を丸める */
    padding: 10px; /* 内側の余白 */
    box-sizing: border-box; /* パディングとボーダーをwidth/heightに含める */
    background-color: #fff; /* 背景色 */
}

.image-grid .image-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* ホバー時の影 */
}

.image-grid .image-item img {
    width: 120px; /* サムネイル画像の固定幅を小さく */
    height: 120px; /* サムネイル画像の固定高さを小さく */
    object-fit: cover; /* アスペクト比を保ちつつ、指定サイズに収まるようにトリミング */
    border-radius: 4px; /* 画像の角を少し丸める */
    margin-bottom: 8px;
    border: 1px solid #eee;
    box-sizing: border-box;
}

.image-grid .image-item p {
    font-size: 0.9em;
    color: #333;
    margin: 0;
    padding: 0 5px;
    white-space: nowrap; /* テキストの折り返しを防ぐ */
    overflow: hidden; /* はみ出したテキストを隠す */
    text-overflow: ellipsis; /* はみ出したテキストを「...」で表示 */
}

/* モーダルウィンドウ関連のCSSは変更なし（必要に応じて調整） */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.8);
    padding-top: 60px;
}

.modal-content {
    margin: 5% auto;
    width: 80%;
    max-width: 800px;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    position: relative;
}

.modal-image {
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 15px;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* フッターとコンテナの定義（これらも本来はstyle.cssに共通化すべきですが、一旦ここに残します） */
#footer-placeholder {
    height: 80px; 
    background-color: #333; 
    position: relative;
    z-index: 10;
}

.faq-container, .contact-container {
    max-width: 800px;
    margin: 0 auto;
}