/* ==========================================================================
   イベント共通デザイン設定 (style-common.css)
   ========================================================================== */

:root {
    --kikaku-primary: #003366;    /* 博物館カラー（紺） */
    --kikaku-accent: #d4a017;     /* アクセント（金） */
    --kikaku-bg: #f8f9fa;
    --kikaku-text: #333;
    --kikaku-white: #ffffff;
    
    /* ステータスカラー */
    --kikaku-status-ongoing: #e74c3c;  /* 本日開催・開催中 */
    --kikaku-status-upcoming: #3498db; /* 開催予定・申込中 */
    --kikaku-status-finished: #7f8c8d; /* 終了 */
}

/* --- 全体レイアウト --- */
body {
    margin: 0; padding: 0;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    background-color: var(--kikaku-bg); color: var(--kikaku-text);
    line-height: 1.6;
}
.container { max-width: 1000px; margin: 0 auto; padding: 20px 15px; }

/* --- パンくずリスト --- */
.breadcrumb { font-size: 0.85rem; margin-bottom: 20px; color: #666; }
.breadcrumb a { color: var(--kikaku-primary); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* --- ページタイトル --- */
h2.page-title {
    color: var(--kikaku-primary); border-left: 5px solid var(--kikaku-accent);
    padding: 5px 15px; margin-bottom: 30px; font-size: 1.5rem;
}

/* --- 年度切り替えナビ --- */
.year-nav { display: flex; gap: 10px; margin-bottom: 30px; overflow-x: auto; padding-bottom: 10px; }
.year-btn {
    display: inline-block; padding: 8px 18px; background: var(--kikaku-white);
    border: 2px solid var(--kikaku-primary); color: var(--kikaku-primary);
    text-decoration: none; border-radius: 25px; font-weight: bold; font-size: 0.9rem; white-space: nowrap;
    transition: 0.3s; cursor: pointer;
}
.year-btn.active { background: var(--kikaku-primary); color: var(--kikaku-white); }

/* --- イベントグリッド・カード --- */
.exhibition-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 25px; }
.exhibition-card {
    background: var(--kikaku-white); border-radius: 12px; overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); display: flex; flex-direction: column;
    position: relative; transition: transform 0.3s ease; height: 100%;
}
.exhibition-card:hover { transform: translateY(-5px); }
.exhibition-card.finished { filter: grayscale(1); opacity: 0.7; }

/* --- 画像エリアとNo Image設定 --- */
.card-img-wrapper { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background-color: #eee; position: relative; }
.card-img-wrapper img { width: 100%; height: 100%; object-fit: cover; }

/* 既存のNo Image設定を継承 */
.card-img-wrapper.no-image {
    background: linear-gradient(135deg, #e0e4e7 0%, #adb5bd 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center; color: #ffffff;
}
.card-img-wrapper.no-image::before {
    content: '\f03e'; font-family: "Font Awesome 6 Free"; font-weight: 900;
    font-size: 3.5rem; opacity: 0.4; margin-bottom: 5px;
}
.card-img-wrapper.no-image::after {
    content: 'NO IMAGE'; font-size: 0.8rem; font-weight: bold; letter-spacing: 0.1em; opacity: 0.6;
}

/* --- ステータスラベル・バッジ --- */
/* 古いラベル設定を完全に非表示にする */
.status-label {
    display: none !important;
}
.status-today, .status-ongoing { background-color: var(--kikaku-status-ongoing); box-shadow: 0 0 10px rgba(231,76,60,0.5); }
.status-open, .status-upcoming { background-color: var(--kikaku-status-upcoming); }
.status-finished { background-color: var(--kikaku-status-finished); }

.rule-badge {
    align-self: flex-start; font-size: 0.75rem; font-weight: bold;
    color: var(--kikaku-primary); background: #f0f7ff; border: 1px solid var(--kikaku-primary);
    padding: 2px 8px; border-radius: 4px; margin-bottom: 8px;
}

/* --- カード内コンテンツ --- */
.card-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: left; /* カード内のテキスト・項目はすべて左寄せ */
}
.card-title { font-size: 1.1rem; color: var(--kikaku-primary); margin: 0 0 10px 0; font-weight: bold; line-height: 1.4; }
.card-date { font-size: 0.85rem; color: #e67e22; font-weight: bold; margin-bottom: 12px; }

.card-details, .card-details-basic, .card-details-list {
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    list-style: none;
    border-top: 1px dashed #ddd;
    padding-top: 10px !important;
}
.detail-item {
    display: flex;
    align-items: flex-start; /* 上揃え */
    justify-content: flex-start; /* 左寄せ */
    margin-bottom: 5px;
    border-bottom: 1px dotted #eee;
    padding-bottom: 5px;
}

.detail-label {
    flex: 0 0 auto;       /* 幅を固定せず内容に合わせる */
    width: auto;
    min-width: auto;      /* 以前の 85px 指定を完全に上書き */
    margin-right: 8px;    /* コロンの後の隙間 */
    color: #888;
    font-weight: bold;
    white-space: nowrap;
}

.detail-value {
    flex: 1;              /* 残りの幅をすべて使う */
    text-align: left;
    color: #333;
    word-break: break-all;
}
.card-desc { font-size: 0.85rem; color: #555; margin-bottom: 15px; flex-grow: 1; }

/* --- ボタン --- */
.btn-container { display: flex; gap: 8px; margin-top: auto; }
.btn-link {
    display: block; width: 100%; padding: 10px; text-align: center;
    background: var(--kikaku-primary); color: #fff !important; text-decoration: none;
    border-radius: 6px; font-weight: bold; font-size: 0.9rem; transition: 0.3s;
}
.btn-link:hover { opacity: 0.8; }
.btn-apply { background: var(--kikaku-accent); }
/* 特設ページ（S=2 / サイト内リンク）: 博物館カラーの濃紺 */
.btn-internal-page {
    background-color: var(--kikaku-primary); /* 博物館の紺色を使用 */
    color: #fff !important;
}
.btn-internal-page:hover {
    background-color: #002244;
    opacity: 0.9;
}

/* アイコンと文字の間に少し隙間を作る（共通設定） */
.btn-detail i {
    margin-right: 5px;
}

/* --- アーカイブ用テーブル --- */
.archive-year-section {
    background: var(--kikaku-white); border-radius: 10px; padding: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); margin-bottom: 40px;
}
.year-heading {
    font-size: 1.3rem; color: var(--kikaku-primary);
    border-bottom: 2px solid #eee; padding-bottom: 10px; margin-bottom: 20px;
    display: flex; align-items: center;
}
.year-heading i { margin-right: 10px; color: var(--kikaku-accent); }

.archive-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.archive-table tr { border-bottom: 1px solid #eee; }
.archive-table td { padding: 15px 10px; vertical-align: middle; }
.td-date { width: 25%; color: #e67e22; font-weight: bold; white-space: nowrap; }
.td-title { width: 60%; font-weight: bold; }
.td-link { width: 15%; text-align: right; }

/* --- 戻るボタン等 --- */
.back-btn-container { text-align: center; margin: 50px 0; }
.back-btn {
    display: inline-block; padding: 12px 30px; background: var(--kikaku-primary); color: var(--kikaku-white) !important;
    text-decoration: none; border-radius: 5px; font-weight: bold; transition: 0.3s;
}

/* --- レスポンシブ対応 --- */
@media (max-width: 600px) {
    .archive-table td { display: block; width: 100%; padding: 8px 5px; }
    .td-date { border-bottom: none; padding-bottom: 0; }
    .td-title { border-bottom: none; font-size: 1rem; }
    .td-link { text-align: left; padding-top: 0; }
}
/* 詳細・申込ボタンの共通デザイン */
.btn-detail {
    display: inline-block;
    padding: 10px 20px;
    background-color: #e67e22; /* オレンジ */
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
    transition: background 0.3s;
}

.btn-detail:hover {
    background-color: #d35400;
}
/* 「Web申込サイトへ」ボタンの親要素を中央寄せ */
.card-btns {
    text-align: center !important; 
    margin: 15px 0 0 0;
    width: 100%;
}

/* 「詳細を表示」ボタンを中央寄せ・全幅に */
.btn-toggle {
    display: block;
    width: 100%;
    text-align: center; /* 文字を中央に */
    background: none;
    border: 1px solid #ccc;
    padding: 8px 15px;
    margin-top: 15px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.9rem;
    color: #666;
}
/* ボタン自体の設定 */
.btn-detail {
    display: inline-block; /* センタリングを有効にするため inline-block に */
    padding: 10px 24px;
    background-color: #e67e22; /* 自然史博物館のアクセントカラー（オレンジ） */
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 5px;
    font-weight: bold;
    transition: background 0.3s, transform 0.2s;
}

.btn-detail:hover {
    background-color: #d35400;
    transform: translateY(-2px); /* 少し浮き上がる演出 */
}

/* ★画像がない場合のアイコン表示エリア（新規追加） */
.no-image-icon {
    width: 100%;
    height: 100%;
    min-height: 160px;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    color: #cbd5e0;
}
/* --- 項目ラベルのスタイル統一 --- */
.exhibition-info {
    margin: 4px 0;
    font-size: 0.9rem;
    line-height: 1.4;
}

.exhibition-info strong {
    color: var(--kikaku-primary);
    display: inline-block;
    width: 5em; /* ラベルの幅を揃えて読みやすくする */
}

/* --- ボタンの出し分け設定 --- */
.card-btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.btn-detail {
    display: block;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none !important;
    font-weight: bold;
    text-align: center;
    font-size: 0.9rem;
    transition: 0.3s;
}

/* 外部サイト（S=1）: オレンジ */
.btn-external {
    background-color: #e67e22;
    color: #fff !important;
}
.btn-external:hover { background-color: #d35400; }

/* 内部リンク/PDF（S=0）: 博物館カラーの紺系 */
.btn-internal {
    background-color: #ecf0f1;
    color: var(--kikaku-primary) !important;
    border: 1px solid var(--kikaku-primary);
}
.btn-internal:hover { background-color: #d6dbdf; }
/* サブタイトルのスタイル（タイトルの上） */
.exhibition-subtitle {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 2px;
    font-weight: bold;
    display: block;
}

/* タイトルの余白微調整 */
.exhibition-title {
    margin-top: 0;
    line-height: 1.3;
}
/* 紹介文（J列）の文字サイズ調整 */
.exhibition-description p {
    font-size: 0.85rem; /* 標準より少し小さく（標準は1rem程度） */
    color: #555;        /* 真っ黒より少しグレーにすると読みやすくなります */
    line-height: 1.5;   /* 行間を整えて窮屈さを解消 */
    margin-top: 8px;
    margin-bottom: 8px;
}
/* 特設ページ（S=2 / サイト内リンク）用：博物館カラーの濃紺 */
.btn-internal-page {
    background-color: var(--kikaku-primary) !important;
    color: #fff !important;
    display: block;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none !important;
    font-weight: bold;
    text-align: center;
    font-size: 0.9rem;
}
.btn-internal-page:hover {
    background-color: #002244 !important;
    opacity: 0.9;
}
/* 特設ページ用（S=2）: 博物館カラーの濃紺ボタン */
.btn-internal-page {
    background-color: var(--kikaku-primary) !important;
    color: #ffffff !important;
}
.btn-internal-page:hover {
    background-color: #002244 !important;
}
/* --- 三連ラベル競合解消設定 --- */
.status-labels {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important; /* 左固定の設定を解除 */
    width: auto !important;
    z-index: 999 !important; /* 最前面を保証 */
}

.status-labels .status-label {
    position: static !important; /* 絶対配置を解除して並べる */
    display: inline-block !important;
    padding: 4px 10px !important;
    font-size: 0.75rem !important;
    font-weight: bold !important;
    border-radius: 4px !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    margin: 0 !important;
}

/* 色の強制適用 */
.status-label.status-ongoing  { background-color: #e74c3c !important; }
.status-label.status-upcoming { background-color: #3498db !important; }
.status-label.status-finished { background-color: #7f8c8d !important; }
.status-label.status-free     { background-color: #f39c12 !important; }
.status-label.status-direct   { background-color: #27ae60 !important; }
.status-label.status-web, 
.status-label.status-post     { background-color: var(--kikaku-primary) !important; }