/* ---------- 共通ベース ---------- */
[class^="ham_"]{width:40px;height:30px;position:relative;cursor:pointer;background:transparent;border:none}
[class^="ham_"] span{position:absolute;left:0;width:100%;height:4px;background:#000}

/* ---------- ham_line（シンプル変形） ---------- */
.preview .ham_line span:nth-child(1){top:0;animation:ham_line1 2s infinite ease-in-out}
.preview .ham_line span:nth-child(2){top:13px;animation:ham_line2 2s infinite ease-in-out}
.preview .ham_line span:nth-child(3){top:26px;animation:ham_line3 2s infinite ease-in-out}
@keyframes ham_line1{0%,50%{top:0;transform:none}50.001%,100%{top:13px;transform:rotate(45deg)}}
@keyframes ham_line2{0%,50%{opacity:1}50.001%,100%{opacity:0}}
@keyframes ham_line3{0%,50%{top:26px;transform:none}50.001%,100%{top:13px;transform:rotate(-45deg)}}

/* ---------- ham_rotate（回転トグル） ---------- */
.preview .ham_rotate{animation:ham_rotate_btn 2s infinite ease-in-out}
.preview .ham_rotate span:nth-child(1),.preview .ham_rotate span:nth-child(3){animation:ham_rotate_op 2s infinite ease-in-out}
.preview .ham_rotate span:nth-child(1){top:0}.preview .ham_rotate span:nth-child(2){top:13px;animation:ham_rotate_mid 2s infinite ease-in-out}.preview .ham_rotate span:nth-child(3){top:26px}
@keyframes ham_rotate_btn{0%,50%{transform:none}50.001%,100%{transform:rotate(90deg)}}
@keyframes ham_rotate_op{0%,50%{opacity:1}50.001%,100%{opacity:0}}
@keyframes ham_rotate_mid{0%,50%{transform:none}50.001%,100%{transform:rotate(90deg)}}

/* ---------- ham_spin（スピン変化） ---------- */
.preview .ham_spin{animation:ham_spin_btn 2s infinite ease-in-out}
.preview .ham_spin span:nth-child(1){top:0}.preview .ham_spin span:nth-child(2){top:13px;animation:ham_spin_mid 2s infinite ease-in-out}.preview .ham_spin span:nth-child(3){top:26px}
@keyframes ham_spin_btn{0%,50%{transform:none}50.001%,100%{transform:rotate(360deg)}}
@keyframes ham_spin_mid{0%,50%{opacity:1}50.001%,100%{opacity:0}}

/* ---------- ham_bubble（バブル変形） ---------- */
.preview .ham_bubble{height:40px;background:#000;border-radius:4px;animation:ham_bubble_bg 2s infinite ease-in-out}
.preview .ham_bubble span{left:8px;width:24px;background:#fff}
.preview .ham_bubble span:nth-child(1){top:10px;animation:ham_bubble1 2s infinite ease-in-out}
.preview .ham_bubble span:nth-child(2){top:18px;animation:ham_bubble2 2s infinite ease-in-out}
.preview .ham_bubble span:nth-child(3){top:26px;animation:ham_bubble3 2s infinite ease-in-out}
@keyframes ham_bubble_bg{0%,50%{background:#000;border-radius:4px}50.001%,100%{background:#ff4081;border-radius:20px}}
@keyframes ham_bubble1{0%,50%{top:10px;transform:none}50.001%,100%{top:18px;transform:rotate(45deg)}}
@keyframes ham_bubble2{0%,50%{opacity:1}50.001%,100%{opacity:0}}
@keyframes ham_bubble3{0%,50%{top:26px;transform:none}50.001%,100%{top:18px;transform:rotate(-45deg)}}

/* ---------- ham_slide（スライド変化） ---------- */
.preview .ham_slide span:nth-child(1){top:0;animation:ham_slide1 2s infinite ease-in-out}
.preview .ham_slide span:nth-child(2){top:13px;animation:ham_slide2 2s infinite ease-in-out}
.preview .ham_slide span:nth-child(3){top:26px;animation:ham_slide3 2s infinite ease-in-out}
@keyframes ham_slide1{0%,50%{transform:none}50.001%,100%{transform:translateX(40px)}}
@keyframes ham_slide2{0%,50%{opacity:1}50.001%,100%{opacity:0}}
@keyframes ham_slide3{0%,50%{transform:none}50.001%,100%{transform:translateX(-40px)}}

/* ---------- ham_invert（色反転クロス） ---------- */
.preview .ham_invert{background:#000;animation:ham_invert_bg 2s infinite ease-in-out}
.preview .ham_invert span{background:#fff;animation:ham_invert_col 2s infinite ease-in-out}
.preview .ham_invert span:nth-child(1){top:0;animation:ham_invert1 2s infinite ease-in-out}
.preview .ham_invert span:nth-child(2){top:13px;animation:ham_invert2 2s infinite ease-in-out}
.preview .ham_invert span:nth-child(3){top:26px;animation:ham_invert3 2s infinite ease-in-out}
@keyframes ham_invert_bg{0%,50%{background:#000}50.001%,100%{background:#fff}}
@keyframes ham_invert_col{0%,50%{background:#fff}50.001%,100%{background:#000}}
@keyframes ham_invert1{0%,50%{top:0;transform:none}50.001%,100%{top:13px;transform:rotate(45deg)}}
@keyframes ham_invert2{0%,50%{opacity:1}50.001%,100%{opacity:0}}
@keyframes ham_invert3{0%,50%{top:26px;transform:none}50.001%,100%{top:13px;transform:rotate(-45deg)}}

/* ---------- ham_diamond（ダイヤ変形） ---------- */
.preview .ham_diamond{animation:ham_diamond_rot 2s infinite ease-in-out}
.preview .ham_diamond span:nth-child(1){top:0;animation:ham_diamond1 2s infinite ease-in-out}
.preview .ham_diamond span:nth-child(2){top:13px;animation:ham_diamond2 2s infinite ease-in-out}
.preview .ham_diamond span:nth-child(3){top:26px;animation:ham_diamond3 2s infinite ease-in-out}
@keyframes ham_diamond_rot{0%,50%{transform:none}50.001%,100%{transform:rotate(45deg)}}
@keyframes ham_diamond1{0%,50%{top:0}50.001%,100%{top:13px}}
@keyframes ham_diamond2{0%,50%{opacity:1}50.001%,100%{opacity:0}}
@keyframes ham_diamond3{0%,50%{top:26px}50.001%,100%{top:13px}}

/* ---------- ham_crossfade（クロスフェード） ---------- */
.preview .ham_crossfade span:nth-child(1){top:0;animation:ham_cross1 2s infinite ease-in-out}
.preview .ham_crossfade span:nth-child(2){top:13px;animation:ham_cross2 2s infinite ease-in-out}
.preview .ham_crossfade span:nth-child(3){top:26px;animation:ham_cross3 2s infinite ease-in-out}
@keyframes ham_cross1{0%,50%{top:0;transform:none}50.001%,100%{top:13px;transform:rotate(45deg)}}
@keyframes ham_cross2{0%,50%{opacity:1}50.001%,100%{opacity:0}}
@keyframes ham_cross3{0%,50%{top:26px;transform:none}50.001%,100%{top:13px;transform:rotate(-45deg)}}

/* ---------- ham_arrow（矢印変形） ---------- */
.preview .ham_arrow span:nth-child(1){top:0;animation:ham_arrow1 2s infinite ease-in-out}
.preview .ham_arrow span:nth-child(2){top:13px;animation:ham_arrow2 2s infinite ease-in-out}
.preview .ham_arrow span:nth-child(3){top:26px;animation:ham_arrow3 2s infinite ease-in-out}
@keyframes ham_arrow1{0%,50%{transform:none}50.001%,100%{transform:translateY(13px) rotate(135deg)}}
@keyframes ham_arrow2{0%,50%{opacity:1}50.001%,100%{opacity:0}}
@keyframes ham_arrow3{0%,50%{transform:none}50.001%,100%{transform:translateY(-13px) rotate(45deg)}}

/* ---------- ham_wave（波アニメ変形） ---------- */
.preview .ham_wave span:nth-child(1){top:0;animation:ham_wave_up 2s infinite ease-in-out}
.preview .ham_wave span:nth-child(2){top:13px;animation:ham_wave_mid 2s infinite ease-in-out}
.preview .ham_wave span:nth-child(3){top:26px;animation:ham_wave_down 2s infinite ease-in-out}
@keyframes ham_wave_up{0%,50%{top:0;transform:none}50.001%,100%{top:13px;transform:rotate(45deg)}}
@keyframes ham_wave_mid{0%,50%{opacity:1}50.001%,100%{opacity:0}}
@keyframes ham_wave_down{0%,50%{top:26px;transform:none}50.001%,100%{top:13px;transform:rotate(-45deg)}}