@charset "UTF-8";

/* 画像全般の設定 */
img {
    border: none;
    max-width: 100%; /* 幅が親要素を超えないように */
    height: auto; /* 高さは自動調整 */
    vertical-align: middle; /* 画像の縦の位置を調整 */
}

/* 詳細ページのサムネイル切り替えブロック */
.thumbnail-view-parts {
    display: flex;
    max-width: 100%; /* 最大幅を100%に設定 */
    overflow: hidden; /* はみ出し部分を隠す */
    margin: 0 auto 1rem; /* ブロックを中央配置 */
    text-align: center; /* 中央揃え */
    flex-wrap: wrap; /* サムネイル画像が横並びになりきれない場合に折り返す */
}

/* サムネイル全体を囲むブロック */
.thumbnail-parts {
    display: flex;
    justify-content: center; /* サムネイルを中央揃え */
    margin-bottom: 2rem; /* 下に余白 */
    flex-wrap: wrap; /* 横並びで収まりきらない場合に折り返す */
    justify-content: space-around; /* サムネイルを均等に配置 */
}

/* サムネイル画像 */
.thumbnail-parts img {
    width: 100px; /* サムネイル画像の幅 */
    margin: 2px; /* サムネイル間のスペース */
    cursor: pointer; /* クリックできることを示す */
    transition: 0.3s; /* ホバー時のアニメーション */
}

.thumbnail-parts img:hover {
    opacity: 0.8; /* ホバー時に画像を少し透明に */
}

/* スマートフォンやタブレット用のレスポンシブ調整 */
@media (max-width: 768px) {
    .thumbnail-view-parts {
        flex-direction: column; /* 縦に並べる */
        align-items: center; /* 中央揃え */
    }

    .thumbnail-parts {
        justify-content: center; /* サムネイルを中央に */
    }

    .thumbnail-parts img {
        width: 80px; /* モバイルではサムネイルを少し小さく */
    }
}

@media (max-width: 480px) {
    .thumbnail-parts img {
        width: 60px; /* より小さな端末ではさらにサムネイルを小さく */
    }
}