@charset "UTF-8";

/* ==========================================================================
   1. ページ全体の背景（FV以降のすごく薄い青）とフッター下部固定
   ========================================================================== */
body {
    background-color: #FAFBFD; /* すごく薄い青 */
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ==========================================================================
   2. ファーストビュー（FV）
   ========================================================================== */
.firstview {
    /* 【確実】プロパティを分けることで、グラデーションが確実に効くようになります */
    background-image: linear-gradient(to bottom, rgba(240, 245, 250, 0) 70%, #f0f5fa 100%), 
                      url('image/list_back.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 120px 0; 
    color: #002244; 
}

.firstview-content {
    max-width: 800px;
}

.fv-subtext {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 24px;
    padding-left: 16px;
    border-left: 4px solid var(--accent-color);
    letter-spacing: 0.05em;
}

.fv-maintitle {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 32px;
    /* 【変更】文字の影（text-shadow）を削除しました */
}

.fv-description {
    font-size: 18px;
    line-height: 1.8;
    font-weight: 500;
    opacity: 0.95;
}

/* ==========================================================================
   3. メインコンテンツ（FV以降）
   ========================================================================== */
.main-content { 
    padding-top: 80px; 
    padding-bottom: 100px;
    flex-grow: 1; /* フッターを一番下に押しやる */
}

/* もしセクションタイトルを使う場合のスタイル */
.section-title {
    font-size: 24px;
    color: var(--primary-color);
    margin-bottom: 30px;
    position: relative;
    padding-left: 15px;
    border-left: 5px solid var(--accent-color);
}

/* ==========================================================================
   注記テキスト（絞り込みタグの上）
   ========================================================================== */
.list-header-note {
    text-align: right;           /* 右寄せでスッキリ配置 */
    font-size: 13px;             /* 目立ちすぎない小さめのサイズ */
    color: var(--primary-color); /* サイトのベースカラーに合わせる */
    opacity: 0.7;                /* 少し透過させて控えめな印象に */
    margin-bottom: 8px;          /* 下の白い帯（タグコンテナ）との余白 */
    letter-spacing: 0.05em;      /* 少し字間を空けて読みやすく */
    font-weight: 500;
}

/* スマホ表示時の微調整（必要に応じて） */
@media (max-width: 768px) {
    .list-header-note {
        font-size: 12px;         /* スマホではさらに少し小さく */
        margin-bottom: 6px;
    }
}

/* ==========================================================================
   4. 絞り込み用タグフィルター（シャープ＆余白）
   ========================================================================== */
.tag-filter-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 60px; 
    
    /* 【追加】白い帯のデザイン */
    background: #ffffff;         /* 帯の色（白） */
    padding: 20px;               /* 帯の内側の余白（上下左右） */
    border-radius: 4px;          /* カードと合わせたシャープな角丸 */
    border: 1px solid rgba(0, 51, 102, 0.08); /* ほんのり薄い境界線 */
}
.filter-tag {
    background: #ffffff;
    border: 1px solid rgba(0, 51, 102, 0.2);
    color: var(--primary-color);
    padding: 10px 22px;
    border-radius: 4px; /* シャープな角 */
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    font-weight: 500;
}

.filter-tag:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.filter-tag.active {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    font-weight: bold;
}

/* ==========================================================================
   5. カードのグリッド（ゆったりとした余白）
   ========================================================================== */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); 
    gap: 40px; 
}

/* ==========================================================================
   6. シャープなガラス調カード（薄い青背景に映える白）
   ========================================================================== */
.card {
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 4px; /* シャープな角 */
    box-shadow: 0 10px 30px rgba(0, 34, 68, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative; /* 💡 追加：カード全体をリンクの基準位置にする */
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 34, 68, 0.1);
    background: rgba(255, 255, 255, 0.95);
}

/* 💡 画像を枠いっぱいに綺麗に敷き詰める設定 */
/* ==========================================================================
   画像エリア（横長バナー対応）
   ========================================================================== */
.card-image {
    width: 100%;
    aspect-ratio: 16 / 9; /* 💡 高さを固定せず、16:9の横長比率に自動調整します */
    background: #002244;  /* 💡 画像が極端に横長の場合に上下に隙間ができても、かっこよく見えるようネイビーを敷きます */
    border-bottom: 1px solid rgba(0, 34, 68, 0.05);
    position: relative;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    /* 💡 重要：バナーの「文字切れ」を防ぎたい場合はここを `contain` にしてください。
        枠いっぱいに敷き詰めたい（左右が見切れてもOKな）場合は `cover` にします。 */
    object-fit: contain; 
    transition: transform 0.4s ease;
}

/* ホバーで画像が少しズームする高級感エフェクト */
.card:hover .card-image img {
    transform: scale(1.05);
}

/* 💡 アイコン用の記述（.card-image i { ... }）は削除し、以下の img 用の設定を追加します */
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像の縦横比を保ったまま、枠いっぱいに美しくトリミングします */
    transition: transform 0.4s ease; /* 少しホバーで動かすための準備 */
}

/* おまけ：カードにマウスが乗った時、画像が少しズームすると高級感が出ます */
.card:hover .card-image img {
    transform: scale(1.05);
}
.card-image i { 
    color: var(--primary-color); 
    opacity: 0.75; 
}

.card-content {
    padding: 32px; 
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   7. 文字の強弱
   ========================================================================== */
.card-date { 
    font-size: 11px; 
    color: var(--primary-color); 
    opacity: 0.6;    
    margin-bottom: 16px; 
    letter-spacing: 0.5px;
}

.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.card-tag {
    background: rgba(255, 255, 255, 0.8);
    color: var(--primary-color);
    font-size: 11px; 
    padding: 4px 10px;
    border-radius: 2px; 
    font-weight: 500;
    border: 1px solid rgba(0, 34, 68, 0.1);
}

.card-title { 
    font-size: 20px; 
    color: var(--primary-color); 
    margin-bottom: 16px; 
    font-weight: 700; 
    line-height: 1.5; 
}

.card-desc {
    font-size: 13px;
    color: var(--primary-color);
    opacity: 0.7; 
    margin-bottom: 28px; 
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.6;
}

/* ==========================================================================
   8. ボタンのスタイル（シャープ化 ＆ カード全体クリック対応）
   ========================================================================== */
.card-btn {
    display: block;
    text-align: center;
    background-color: var(--primary-color);
    color: #ffffff;
    padding: 12px; 
    border-radius: 2px; 
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.2s;
    letter-spacing: 1px;
}

/* 💡 カード全体をクリック可能にする透明な膜 */
.card-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* ▼▼ 個別の色設定（ネイビーに負けないように優先度を高くしています） ▼▼ */

/* ① アーカイブ準備中（グレー） */
.card .card-btn.disabled {
    background-color: #94a3b8; 
    cursor: not-allowed;
    pointer-events: none;
}

/* ② 開催予定（オレンジ） */
.card .card-btn.upcoming {
    background-color: #f97316;
}


/* ▼▼ マウスがカードに乗った時（ホバー時）の連動設定 ▼▼ */

/* ① 通常（ネイビー）のホバー */
.card:hover .card-btn { 
    background-color: #002244; 
    box-shadow: 0 4px 12px rgba(0, 33, 102, 0.15);
}

/* ② 準備中（グレー）のホバー（※色は変えない） */
.card:hover .card-btn.disabled {
    background-color: #94a3b8;
    box-shadow: none;
}

/* ③ 開催予定（オレンジ）のホバー */
.card:hover .card-btn.upcoming {
    background-color: #ea580c;
}
/* ==========================================================================
   9. レスポンシブ（スマホ表示）
   ========================================================================== */
@media (max-width: 768px) {
    .fv-maintitle { font-size: 32px; }
    .fv-subtext { font-size: 16px; }
    .firstview { padding: 60px 0; }
    
    .grid { gap: 24px; }
    .card-content { padding: 24px; }
    .main-content { padding-top: 40px; padding-bottom: 60px; }
}