@charset "UTF-8";

/* リセット & 基本設定 */
body { font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; background: #f9f9f9; color: #333; margin: 0; padding: 0; line-height: 1.6; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; padding: 0; margin: 0; }
img { max-width: 100%; height: auto; vertical-align: bottom; }
.container { max-width: 1000px; margin: 0 auto; padding: 0 15px; }

/* ヘッダー */
header { background: #fff; padding: 15px 0; text-align: center; border-bottom: 1px solid #eee; }
.site-logo { font-size: 24px; font-weight: bold; color: #3b4c6b; display: inline-flex; align-items: center; gap: 10px; }
.site-logo span { color: #5a96d6; } /* ロゴの一部を青く */

/* メインビジュアル（スライダー） */
.main-visual { width: 100%; background: #5a96d6; height: 200px; display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 20px; text-align: center; }
.swiper-pagination-bullet-active { background: #fff !important; }

/* 検索フォーム */
.search-area { text-align: center; margin: 20px 0 30px; }
.search-form { position: relative; max-width: 500px; margin: 0 auto; }
.search-input { width: 100%; padding: 12px 20px 12px 45px; border: 2px solid #ddd; border-radius: 30px; font-size: 16px; box-sizing: border-box; outline: none; transition: 0.3s; }
.search-input:focus { border-color: #5a96d6; }
.search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #999; }

/* 見出し */
.section-title { background: #fef200; color: #333; font-size: 16px; font-weight: bold; text-align: center; padding: 10px; margin-bottom: 20px; border-radius: 4px; }

/* 教科ナビゲーション（グリッド） */
/*.subject-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 40px; }*/
/* 教科ナビゲーション（グリッド） */
.subject-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
    
    /* ▼▼▼ 追加コード: 上揃えにして、高さの強制一致を防ぐ ▼▼▼ */
    align-items: start;
}




.subject-box { background: #fff; border: 2px solid #5a96d6; border-radius: 8px; overflow: hidden; }
.subject-header { background: #5a96d6; color: #fff; padding: 10px; font-weight: bold; display: flex; align-items: center; gap: 10px; font-size: 18px; }
.subject-body { padding: 15px; display: flex; flex-wrap: wrap; gap: 10px; }
.grade-btn { flex: 1 1 40%; text-align: center; background: #fff; border: 1px solid #5a96d6; color: #5a96d6; padding: 8px; border-radius: 20px; font-size: 14px; font-weight: bold; }
.grade-btn:hover { background: #5a96d6; color: #fff; }

/* プリントリスト（共通） */
.section-heading { font-size: 18px; font-weight: bold; margin: 40px 0 20px; border-bottom: 2px solid #eee; padding-bottom: 10px; }
.print-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px; margin-bottom: 40px; }
.print-card { background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); overflow: hidden; position: relative; transition: 0.3s; }
.print-card:hover { transform: translateY(-3px); box-shadow: 0 5px 12px rgba(0,0,0,0.1); }

/* ランキング王冠 */
.rank-badge { position: absolute; top: 0; left: 10px; width: 30px; height: 35px; background: #ccc; color: #fff; text-align: center; line-height: 30px; font-weight: bold; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); z-index: 10; font-size: 14px; }
.rank-1 { background: #e6b422; box-shadow: 0 2px 5px rgba(230,180,34,0.4); font-size: 16px; } /* 金 */
.rank-2 { background: #c0c0c0; } /* 銀 */
.rank-3 { background: #b87333; } /* 銅 */

.thumb-area { height: 120px; background: #f0f0f0; display: flex; align-items: center; justify-content: center; color: #aaa; overflow: hidden; }
.thumb-area img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 10px; font-size: 14px; }
.print-title { font-weight: bold; margin-bottom: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 2.8em; }
.print-meta { font-size: 11px; color: #888; display: flex; justify-content: space-between; }

/* 広告枠 */
.ad-space { background: #555; color: #fff; text-align: center; padding: 40px 0; margin: 40px 0; border-radius: 4px; font-size: 14px; }

/* フッター */
footer { background: #fff; padding: 40px 0 20px; text-align: center; border-top: 1px solid #eee; margin-top: 50px; }
.sns-links { display: flex; justify-content: center; gap: 20px; margin-bottom: 30px; }
.sns-icon { width: 40px; height: 40px; background: #eee; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #555; }
.footer-nav { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; font-size: 12px; color: #666; margin-bottom: 20px; }
.footer-nav a::before { content: "▶ "; color: #5a96d6; }
.copyright { background: #3b4c6b; color: #fff; padding: 10px; font-size: 12px; }

/* レスポンシブ */
@media (max-width: 600px) {
    .subject-nav { grid-template-columns: 1fr; }
    .print-list { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}






/* 教科ボックスのヘッダー（青い部分） */
.subject-header {
    background: #5a96d6;
    color: #fff;
    padding: 15px 10px;
    font-weight: bold;
    font-size: 24px;          /* 文字サイズ（大） */
    
    /* ▼▼▼ 配置の指定 ▼▼▼ */
    position: relative;       /* アイコンを配置する基準点にします */
    display: flex;            /* フレックスボックス化 */
    justify-content: center;  /* 中身（文字）を中央揃え */
    align-items: center;      /* 垂直方向も中央揃え */
    line-height: 1;
}

/* アイコン画像のサイズと配置調整 */
.subject-icon {
    width: 70px;              /* アイコンサイズ */
    height: auto;
    
    /* ▼▼▼ 左端に固定する指定 ▼▼▼ */
    position: absolute;       /* 通常の並びから外して自由配置にします */
    left: 15px;               /* 左端から15pxの位置に固定 */
    top: 50%;                 /* 上から50%の位置 */
    transform: translateY(-50%); /* 自身の高さ半分だけ上にずらして完全な垂直中央にする */
}



/* ロゴ画像のサイズ調整 */
.site-logo img {
    height: 80px; /* ←この数字を小さくするとロゴも小さくなります（例: 60px, 80pxなど） */
    width: auto;  /* 横幅は高さに合わせて自動調整 */
    display: block;
}



/* --- ダウンロードボタンエリア（2つ並び対応） --- */
.download-area {
    margin-top: auto; /* カード下部に寄せる */
    padding-top: 10px;
    display: flex;
    gap: 10px; /* ボタン同士の間隔 */
}

.btn-dl {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
    color: white;
    transition: 0.3s;
}

/* 問題ボタン（青） */
.btn-question {
    background: #5a96d6;
}
.btn-question:hover {
    background: #4a86c6;
}

/* 解答ボタン（オレンジ） */
.btn-answer {
    background: #f0a04b;
}
.btn-answer:hover {
    background: #e0903b;
}

/* ボタンが1つしかない場合のデザイン調整 */
.btn-dl.full-width {
    width: 100%;
}


/* --- アコーディオン（開閉）機能のスタイル --- */

/* ▼ デフォルト（トップページなど）は常に表示 ▼ */
.subject-body {
    display: flex; /* 常に表示 */
}

/* ▼ 検索ページ用：アコーディオン機能が有効な場合のみ ▼ */

/* ヘッダーをクリック可能にする */
.subject-box.accordion-mode .subject-header {
    cursor: pointer;
    position: relative;
    transition: 0.2s;
}
.subject-box.accordion-mode .subject-header:hover {
    opacity: 0.9;
}

/* 矢印アイコンを追加 */
.subject-box.accordion-mode .subject-header::after {
    content: '\f078'; /* FontAwesome 下矢印 */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 15px;
    font-size: 18px;
    transition: 0.3s;
    transform: rotate(180deg); /* 開いている時は上向き */
}

/* 「closed」クラスがついている時は中身を隠す */
.subject-box.accordion-mode.closed .subject-body {
    display: none;
}

/* 「closed」クラスがついている時は矢印を下向きに */
.subject-box.accordion-mode.closed .subject-header::after {
    transform: rotate(0deg);
}

/* ふわっと開くアニメーション */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.subject-box.accordion-mode:not(.closed) .subject-body {
    animation: fadeIn 0.3s ease;
}


/* 単元の説明文（SEO用） */
.unit-description {
    width: 100%;
    margin: -15px 0 30px 0; /* 見出しの下に寄せる */
    padding: 0 15px;
    font-size: 0.9em;
    color: #666;
    line-height: 1.6;
    grid-column: 1 / -1; /* グリッドの全幅を使う */
}