/* ==========================================================================
   Material Slider (Thumbnail)
   ========================================================================== */

/* =====================================================
   figure ラッパー
===================================================== */
.material_figure {
    width: 100%;
    margin: 0;
	user-select: none;
}

/* =====================================================
   メインスライダー（縦:横 = 9:16 の枠）
===================================================== */

/* aspect-ratio で 縦9:横16 の比率を固定 */
#slider-material {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;     /* 縦:横 = 9:16 */
    overflow: hidden;
    background-color: #f0f0f0;/* 画像読み込み前の背景色 */
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 各スライドを枠いっぱいに重ね合わせ */
#slider-material > li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
	border: 1px solid #CCC;
}

/* 画像：縦＝枠の高さと同じ、横は高さに応じて自動変化 */
#slider-material > li img {
    height: 100%;             /* 枠の高さいっぱいに合わせる */
    width: auto;              /* 横はアスペクト比に応じて自動変化 */
    display: block;
    max-width: 100%;          /* 枠からはみ出さない */
    object-fit: contain;      /* 比率を保ちつつ枠内に収める */
	text-align: center;
}

/* =====================================================
   サムネイルナビゲーション
===================================================== */
#thumb_material {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

/* サムネイル各アイテム：3分割で均等表示 */
#thumb_material > li {
    flex: 1;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s ease;
	border: 1px solid #CCC;
}

/* アクティブなサムネイル（jQuery が .is-active を付与） */
#thumb_material > li.is-active {
    opacity: 1;
}

/* ホバー時 */
#thumb_material > li:hover {
    opacity: 0.8;
}

/* サムネイル枠：メインと同じ 16:9 比率 */
.thumb_inner {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
}

/* サムネイル画像 */
.thumb_inner img {
    height: 100%;
    width: auto;
    display: block;
    max-width: 100%;
    object-fit: contain;
}

/* =====================================================
   説明テキスト
===================================================== */
.thumb_disc {
    color: #888;
    margin: 0 auto;
    text-align: center!important;
}