@charset "utf-8";
/* CSS Document */

h1{
    width: 100%;
    height: auto;
    padding-top: 1.2rem;
    padding-bottom: 1rem;
    color: #FFFFFF;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    font-size: 2rem;
    line-height: 1.1;
    text-align: center;
    background-color: var(--main_color);
    margin-top: 0;
}
h1 span{
    color: #FFFFFF;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
    display: block;
}
#expo_img{
    margin-top: 30px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: auto;
    padding: 0;
    display: block;
    max-width: 1300px;
    height: auto;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
@media (max-width:1300px) {
	#expo_img{
	  max-width: 1300px; /* 元の最大幅 */
	  width: 100%;
	  height: auto;      /* 比率維持 */
	  display: block;    /* 余計な隙間対策 */
	}
}

/* =========================================
   展示会一覧：完全版CSS
   - Gridレイアウト（最後の行も綺麗）
   - 画像 190×143 固定（中央トリミング）
   - 説明文ははみ出たら「…」
   - カードホバー：浮く＋影（滑らか）
   - h3 内を2段表示（span推奨）
   ========================================= */


/* ===== 一覧全体 ===== */
#exhibition_list{
    max-width: 1300px;
    margin: 5rem auto 0;
    padding: 0;

    display: grid;
    grid-template-columns: repeat(auto-fill, 190px); /* 190pxの列を自動で詰める */
    gap: 3rem 1.5rem; /* 行間 / 列間 */
    justify-content: center; /* 全体を中央寄せ（左寄せは start） */
}


/* ===== 1カード（各年） ===== */
#exhibition_list > div{
    width: 190px;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;

    /* ホバーアニメ */
    transition: transform 180ms ease, box-shadow 180ms ease;
    will-change: transform;
}

/* ホバー：少し浮く＋影 */
#exhibition_list > div:hover{
    transform: translateY(-6px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

/* キーボード操作でも同じ（aにフォーカスした時など） */
#exhibition_list > div:focus-within{
    transform: translateY(-6px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

/* 押下時：少し沈む（好み） */
#exhibition_list > div:active{
    transform: translateY(-3px);
    box-shadow: 0 7px 16px rgba(0,0,0,0.16);
}

#exhibition_list div h3{
    background-color: var(--main_color);
    color: #FFFFFF;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-weight: bold;
    text-align: center;
    width: 190px;
    margin: 0;
    padding-top: .7rem;
    padding-bottom: .7rem;
    line-height: 1;
}

/* 1行目（タイトル） */
#exhibition_list div h3 .ex_title{
    display: block;
    font-size: 1rem;
}

/* 2行目（日時・会場）→ 1行固定＋… */
#exhibition_list div h3 .ex_place{
    display: block;
    font-size: 0.7rem;
    font-weight: normal;
    margin-top: 5px;
    opacity: 0.9;
    width: 100%;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}


/* ===== 画像枠：190×143 固定（中央トリミング） ===== */
#exhibition_list div a{
    display: block;
    width: 190px;
    height: 143px;
    overflow: hidden;
}

#exhibition_list div img{
    width: 190px;
    height: 143px;
    object-fit: cover;       /* 重要：縦横比を保って切り抜き */
    object-position: center; /* 中央寄せ */
    margin: 0;
    padding: 0;
    display: block;          /* 余計な隙間防止 */
}






/* ===== 400px以下：1カラムで幅を広げる ===== */
@media (max-width: 566px){
    #exhibition_list{
        grid-template-columns: 1fr; /* 1カラム */
        justify-content: stretch;   /* 幅いっぱい */
        padding: 0 12px;            /* 端にくっつきすぎ防止（任意） */
    }

    #exhibition_list > div{
        width: 100%;                /* カードも幅いっぱい */
    }

    /* 中の固定幅も追従させる（あなたの現状CSSに合わせて） */
    #exhibition_list div h3,
    #exhibition_list div a,
    #exhibition_list div img{
        width: 100%;
    }
}