/**
 * 車両詳細：ギャラリー
 * 
 * 役割：
 * ・メイン画像切替
 * ・サムネイルactive表示
 * ・画像切替時フェード
 */


/* ----------------------------------------
 * メイン画像切替アニメ
 * ----------------------------------------
 * ・画像切替時だけフェード
 */
.js-gallery-main img.is-changing{
  animation:fade .2s;
}


/* ----------------------------------------
 * フェードアニメ
 * ----------------------------------------
 */
@keyframes fade{
  from{opacity:.3}
  to{opacity:1}
}


/* ----------------------------------------
 * サムネイル
 * ----------------------------------------
 * ・正方形表示
 * ・active切替用transition
 */
.js-gallery-thumb{
  cursor:pointer;
  padding:.25em;
  aspect-ratio:1/1;
  object-fit:contain;
  border:1px solid #fff;
  border-radius:1rem;
  transition:.2s;
}


/* ----------------------------------------
 * 選択中サムネイル
 * ----------------------------------------
 */
.js-gallery-thumb.is-active{
  border-color:var(--wp--preset--color--primary);
}