<h1><span>CSS Slider</span> <small>CSSスライダー</small></h1>
<h2><span>Non-carousel slider</span> <small>カルーセルでないスライダー</small></h2>
<div class="slide1">
<ul class="slide1_contents">
<li class="slide1_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6h2.239a8%208%200%200013.856%200h2.239zM24%2026.001c2.208%200%204%201.792%204%203.999%200%202.208-1.792%204-4%204a4.001%204.001%200%2001-3.999-4A4.001%204.001%200%200124%2026.001zm16%200A4.001%204.001%200%200143.999%2030c0%202.208-1.792%204-3.999%204-2.208%200-4-1.792-4-4a4.001%204.001%200%20014-3.999z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
<li class="slide1_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6h18.334zM24%2026.001c2.208%200%204%201.792%204%203.999%200%202.208-1.792%204-4%204a4.001%204.001%200%2001-3.999-4A4.001%204.001%200%200124%2026.001zm16%200A4.001%204.001%200%200143.999%2030c0%202.208-1.792%204-3.999%204-2.208%200-4-1.792-4-4a4.001%204.001%200%20014-3.999z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
<li class="slide1_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6H26l2%202%202-2h4l2%202%202-2h3.167zm.479-9.646a4.002%204.002%200%20011.182%206.475%204.004%204.004%200%2001-6.474-1.183l5.292-5.292zm-19.293.001l5.293%205.292a4.004%204.004%200%2001-6.474%201.182%204.002%204.002%200%20011.181-6.474z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
</ul>
</div>
<h2><span>Carousel slider</span> <small>カルーセルスライダー</small></h2>
<div class="slide2">
<ul class="slide2_contents">
<li class="slide2_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6h2.239a8%208%200%200013.856%200h2.239zM24%2026.001c2.208%200%204%201.792%204%203.999%200%202.208-1.792%204-4%204a4.001%204.001%200%2001-3.999-4A4.001%204.001%200%200124%2026.001zm16%200A4.001%204.001%200%200143.999%2030c0%202.208-1.792%204-3.999%204-2.208%200-4-1.792-4-4a4.001%204.001%200%20014-3.999z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
<li class="slide2_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6h18.334zM24%2026.001c2.208%200%204%201.792%204%203.999%200%202.208-1.792%204-4%204a4.001%204.001%200%2001-3.999-4A4.001%204.001%200%200124%2026.001zm16%200A4.001%204.001%200%200143.999%2030c0%202.208-1.792%204-3.999%204-2.208%200-4-1.792-4-4a4.001%204.001%200%20014-3.999z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
<li class="slide2_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6H26l2%202%202-2h4l2%202%202-2h3.167zm.479-9.646a4.002%204.002%200%20011.182%206.475%204.004%204.004%200%2001-6.474-1.183l5.292-5.292zm-19.293.001l5.293%205.292a4.004%204.004%200%2001-6.474%201.182%204.002%204.002%200%20011.181-6.474z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
</ul>
</div>
<h2><span>Carousel slider with control</span> <small>コントロール付きカルーセルスライダー</small></h2>
<h3><span>From right to left</span> <small>右から左へ</small></h3>
<div class="slide3">
<input type="radio" name="slide3-01-radio" id="slide3-01-radio-1" class="slide3_radio select" />
<input type="radio" name="slide3-01-radio" id="slide3-01-radio-2" class="slide3_radio select" />
<input type="radio" name="slide3-01-radio" id="slide3-01-radio-3" class="slide3_radio select" />
<input type="radio" name="slide3-01-radio" id="slide3-01-radio-0" class="slide3_radio unselect" checked="checked" />
<ul class="slide3_contents is-animation-translate-rtl">
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6h2.239a8%208%200%200013.856%200h2.239zM24%2026.001c2.208%200%204%201.792%204%203.999%200%202.208-1.792%204-4%204a4.001%204.001%200%2001-3.999-4A4.001%204.001%200%200124%2026.001zm16%200A4.001%204.001%200%200143.999%2030c0%202.208-1.792%204-3.999%204-2.208%200-4-1.792-4-4a4.001%204.001%200%20014-3.999z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6h18.334zM24%2026.001c2.208%200%204%201.792%204%203.999%200%202.208-1.792%204-4%204a4.001%204.001%200%2001-3.999-4A4.001%204.001%200%200124%2026.001zm16%200A4.001%204.001%200%200143.999%2030c0%202.208-1.792%204-3.999%204-2.208%200-4-1.792-4-4a4.001%204.001%200%20014-3.999z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6H26l2%202%202-2h4l2%202%202-2h3.167zm.479-9.646a4.002%204.002%200%20011.182%206.475%204.004%204.004%200%2001-6.474-1.183l5.292-5.292zm-19.293.001l5.293%205.292a4.004%204.004%200%2001-6.474%201.182%204.002%204.002%200%20011.181-6.474z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
</ul>
<div class="slide3_labels">
<label for="slide3-01-radio-1" class="slide3_label select"></label>
<label for="slide3-01-radio-2" class="slide3_label select"></label>
<label for="slide3-01-radio-3" class="slide3_label select"></label>
<label for="slide3-01-radio-0" class="slide3_label unselect"></label>
</div>
</div>
<h3><span>From left to right</span> <small>左から右へ</small></h3>
<div class="slide3">
<input type="radio" name="slide3-02-radio" id="slide3-02-radio-1" class="slide3_radio select" />
<input type="radio" name="slide3-02-radio" id="slide3-02-radio-2" class="slide3_radio select" />
<input type="radio" name="slide3-02-radio" id="slide3-02-radio-3" class="slide3_radio select" />
<input type="radio" name="slide3-02-radio" id="slide3-02-radio-0" class="slide3_radio unselect" checked="checked" />
<ul class="slide3_contents is-animation-translate-ltr">
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6h2.239a8%208%200%200013.856%200h2.239zM24%2026.001c2.208%200%204%201.792%204%203.999%200%202.208-1.792%204-4%204a4.001%204.001%200%2001-3.999-4A4.001%204.001%200%200124%2026.001zm16%200A4.001%204.001%200%200143.999%2030c0%202.208-1.792%204-3.999%204-2.208%200-4-1.792-4-4a4.001%204.001%200%20014-3.999z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6h18.334zM24%2026.001c2.208%200%204%201.792%204%203.999%200%202.208-1.792%204-4%204a4.001%204.001%200%2001-3.999-4A4.001%204.001%200%200124%2026.001zm16%200A4.001%204.001%200%200143.999%2030c0%202.208-1.792%204-3.999%204-2.208%200-4-1.792-4-4a4.001%204.001%200%20014-3.999z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6H26l2%202%202-2h4l2%202%202-2h3.167zm.479-9.646a4.002%204.002%200%20011.182%206.475%204.004%204.004%200%2001-6.474-1.183l5.292-5.292zm-19.293.001l5.293%205.292a4.004%204.004%200%2001-6.474%201.182%204.002%204.002%200%20011.181-6.474z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
</ul>
<div class="slide3_labels">
<label for="slide3-02-radio-1" class="slide3_label select"></label>
<label for="slide3-02-radio-2" class="slide3_label select"></label>
<label for="slide3-02-radio-3" class="slide3_label select"></label>
<label for="slide3-02-radio-0" class="slide3_label unselect"></label>
</div>
</div>
<h3><span>From bottom to top</span> <small>下から上へ</small></h3>
<div class="slide3">
<input type="radio" name="slide3-03-radio" id="slide3-03-radio-1" class="slide3_radio select" />
<input type="radio" name="slide3-03-radio" id="slide3-03-radio-2" class="slide3_radio select" />
<input type="radio" name="slide3-03-radio" id="slide3-03-radio-3" class="slide3_radio select" />
<input type="radio" name="slide3-03-radio" id="slide3-03-radio-0" class="slide3_radio unselect" checked="checked" />
<ul class="slide3_contents is-animation-translate-btt">
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6h2.239a8%208%200%200013.856%200h2.239zM24%2026.001c2.208%200%204%201.792%204%203.999%200%202.208-1.792%204-4%204a4.001%204.001%200%2001-3.999-4A4.001%204.001%200%200124%2026.001zm16%200A4.001%204.001%200%200143.999%2030c0%202.208-1.792%204-3.999%204-2.208%200-4-1.792-4-4a4.001%204.001%200%20014-3.999z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6h18.334zM24%2026.001c2.208%200%204%201.792%204%203.999%200%202.208-1.792%204-4%204a4.001%204.001%200%2001-3.999-4A4.001%204.001%200%200124%2026.001zm16%200A4.001%204.001%200%200143.999%2030c0%202.208-1.792%204-3.999%204-2.208%200-4-1.792-4-4a4.001%204.001%200%20014-3.999z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6H26l2%202%202-2h4l2%202%202-2h3.167zm.479-9.646a4.002%204.002%200%20011.182%206.475%204.004%204.004%200%2001-6.474-1.183l5.292-5.292zm-19.293.001l5.293%205.292a4.004%204.004%200%2001-6.474%201.182%204.002%204.002%200%20011.181-6.474z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
</ul>
<div class="slide3_labels">
<label for="slide3-03-radio-1" class="slide3_label select"></label>
<label for="slide3-03-radio-2" class="slide3_label select"></label>
<label for="slide3-03-radio-3" class="slide3_label select"></label>
<label for="slide3-03-radio-0" class="slide3_label unselect"></label>
</div>
</div>
<h3><span>From top to bottom</span> <small>上から下へ</small></h3>
<div class="slide3">
<input type="radio" name="slide3-04-radio" id="slide3-04-radio-1" class="slide3_radio select" />
<input type="radio" name="slide3-04-radio" id="slide3-04-radio-2" class="slide3_radio select" />
<input type="radio" name="slide3-04-radio" id="slide3-04-radio-3" class="slide3_radio select" />
<input type="radio" name="slide3-04-radio" id="slide3-04-radio-0" class="slide3_radio unselect" checked="checked" />
<ul class="slide3_contents is-animation-translate-ttb">
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6h2.239a8%208%200%200013.856%200h2.239zM24%2026.001c2.208%200%204%201.792%204%203.999%200%202.208-1.792%204-4%204a4.001%204.001%200%2001-3.999-4A4.001%204.001%200%200124%2026.001zm16%200A4.001%204.001%200%200143.999%2030c0%202.208-1.792%204-3.999%204-2.208%200-4-1.792-4-4a4.001%204.001%200%20014-3.999z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6h18.334zM24%2026.001c2.208%200%204%201.792%204%203.999%200%202.208-1.792%204-4%204a4.001%204.001%200%2001-3.999-4A4.001%204.001%200%200124%2026.001zm16%200A4.001%204.001%200%200143.999%2030c0%202.208-1.792%204-3.999%204-2.208%200-4-1.792-4-4a4.001%204.001%200%20014-3.999z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6H26l2%202%202-2h4l2%202%202-2h3.167zm.479-9.646a4.002%204.002%200%20011.182%206.475%204.004%204.004%200%2001-6.474-1.183l5.292-5.292zm-19.293.001l5.293%205.292a4.004%204.004%200%2001-6.474%201.182%204.002%204.002%200%20011.181-6.474z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
</ul>
<div class="slide3_labels">
<label for="slide3-04-radio-1" class="slide3_label select"></label>
<label for="slide3-04-radio-2" class="slide3_label select"></label>
<label for="slide3-04-radio-3" class="slide3_label select"></label>
<label for="slide3-04-radio-0" class="slide3_label unselect"></label>
</div>
</div>
<h3><span>Fade</span> <small>フェード</small></h3>
<div class="slide3">
<input type="radio" name="slide3-05-radio" id="slide3-05-radio-1" class="slide3_radio select" />
<input type="radio" name="slide3-05-radio" id="slide3-05-radio-2" class="slide3_radio select" />
<input type="radio" name="slide3-05-radio" id="slide3-05-radio-3" class="slide3_radio select" />
<input type="radio" name="slide3-05-radio" id="slide3-05-radio-0" class="slide3_radio unselect" checked="checked" />
<ul class="slide3_contents is-animation-fade">
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6h2.239a8%208%200%200013.856%200h2.239zM24%2026.001c2.208%200%204%201.792%204%203.999%200%202.208-1.792%204-4%204a4.001%204.001%200%2001-3.999-4A4.001%204.001%200%200124%2026.001zm16%200A4.001%204.001%200%200143.999%2030c0%202.208-1.792%204-3.999%204-2.208%200-4-1.792-4-4a4.001%204.001%200%20014-3.999z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6h18.334zM24%2026.001c2.208%200%204%201.792%204%203.999%200%202.208-1.792%204-4%204a4.001%204.001%200%2001-3.999-4A4.001%204.001%200%200124%2026.001zm16%200A4.001%204.001%200%200143.999%2030c0%202.208-1.792%204-3.999%204-2.208%200-4-1.792-4-4a4.001%204.001%200%20014-3.999z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6H26l2%202%202-2h4l2%202%202-2h3.167zm.479-9.646a4.002%204.002%200%20011.182%206.475%204.004%204.004%200%2001-6.474-1.183l5.292-5.292zm-19.293.001l5.293%205.292a4.004%204.004%200%2001-6.474%201.182%204.002%204.002%200%20011.181-6.474z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
</ul>
<div class="slide3_labels">
<label for="slide3-05-radio-1" class="slide3_label select"></label>
<label for="slide3-05-radio-2" class="slide3_label select"></label>
<label for="slide3-05-radio-3" class="slide3_label select"></label>
<label for="slide3-05-radio-0" class="slide3_label unselect"></label>
</div>
</div>
<h3><span>Zoom in</span> <small>ズームイン</small></h3>
<div class="slide3">
<input type="radio" name="slide3-06-radio" id="slide3-06-radio-1" class="slide3_radio select" />
<input type="radio" name="slide3-06-radio" id="slide3-06-radio-2" class="slide3_radio select" />
<input type="radio" name="slide3-06-radio" id="slide3-06-radio-3" class="slide3_radio select" />
<input type="radio" name="slide3-06-radio" id="slide3-06-radio-0" class="slide3_radio unselect" checked="checked" />
<ul class="slide3_contents is-animation-zoom-in">
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6h2.239a8%208%200%200013.856%200h2.239zM24%2026.001c2.208%200%204%201.792%204%203.999%200%202.208-1.792%204-4%204a4.001%204.001%200%2001-3.999-4A4.001%204.001%200%200124%2026.001zm16%200A4.001%204.001%200%200143.999%2030c0%202.208-1.792%204-3.999%204-2.208%200-4-1.792-4-4a4.001%204.001%200%20014-3.999z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6h18.334zM24%2026.001c2.208%200%204%201.792%204%203.999%200%202.208-1.792%204-4%204a4.001%204.001%200%2001-3.999-4A4.001%204.001%200%200124%2026.001zm16%200A4.001%204.001%200%200143.999%2030c0%202.208-1.792%204-3.999%204-2.208%200-4-1.792-4-4a4.001%204.001%200%20014-3.999z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6H26l2%202%202-2h4l2%202%202-2h3.167zm.479-9.646a4.002%204.002%200%20011.182%206.475%204.004%204.004%200%2001-6.474-1.183l5.292-5.292zm-19.293.001l5.293%205.292a4.004%204.004%200%2001-6.474%201.182%204.002%204.002%200%20011.181-6.474z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
</ul>
<div class="slide3_labels">
<label for="slide3-06-radio-1" class="slide3_label select"></label>
<label for="slide3-06-radio-2" class="slide3_label select"></label>
<label for="slide3-06-radio-3" class="slide3_label select"></label>
<label for="slide3-06-radio-0" class="slide3_label unselect"></label>
</div>
</div>
<h3><span>Zoom out</span> <small>ズームアウト</small></h3>
<div class="slide3">
<input type="radio" name="slide3-07-radio" id="slide3-07-radio-1" class="slide3_radio select" />
<input type="radio" name="slide3-07-radio" id="slide3-07-radio-2" class="slide3_radio select" />
<input type="radio" name="slide3-07-radio" id="slide3-07-radio-3" class="slide3_radio select" />
<input type="radio" name="slide3-07-radio" id="slide3-07-radio-0" class="slide3_radio unselect" checked="checked" />
<ul class="slide3_contents is-animation-zoom-out">
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6h2.239a8%208%200%200013.856%200h2.239zM24%2026.001c2.208%200%204%201.792%204%203.999%200%202.208-1.792%204-4%204a4.001%204.001%200%2001-3.999-4A4.001%204.001%200%200124%2026.001zm16%200A4.001%204.001%200%200143.999%2030c0%202.208-1.792%204-3.999%204-2.208%200-4-1.792-4-4a4.001%204.001%200%20014-3.999z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6h18.334zM24%2026.001c2.208%200%204%201.792%204%203.999%200%202.208-1.792%204-4%204a4.001%204.001%200%2001-3.999-4A4.001%204.001%200%200124%2026.001zm16%200A4.001%204.001%200%200143.999%2030c0%202.208-1.792%204-3.999%204-2.208%200-4-1.792-4-4a4.001%204.001%200%20014-3.999z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6H26l2%202%202-2h4l2%202%202-2h3.167zm.479-9.646a4.002%204.002%200%20011.182%206.475%204.004%204.004%200%2001-6.474-1.183l5.292-5.292zm-19.293.001l5.293%205.292a4.004%204.004%200%2001-6.474%201.182%204.002%204.002%200%20011.181-6.474z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
</ul>
<div class="slide3_labels">
<label for="slide3-07-radio-1" class="slide3_label select"></label>
<label for="slide3-07-radio-2" class="slide3_label select"></label>
<label for="slide3-07-radio-3" class="slide3_label select"></label>
<label for="slide3-07-radio-0" class="slide3_label unselect"></label>
</div>
</div>
<h3><span>Rotate-X</span> <small>X軸回転</small></h3>
<div class="slide3">
<input type="radio" name="slide3-08-radio" id="slide3-08-radio-1" class="slide3_radio select" />
<input type="radio" name="slide3-08-radio" id="slide3-08-radio-2" class="slide3_radio select" />
<input type="radio" name="slide3-08-radio" id="slide3-08-radio-3" class="slide3_radio select" />
<input type="radio" name="slide3-08-radio" id="slide3-08-radio-0" class="slide3_radio unselect" checked="checked" />
<ul class="slide3_contents is-animation-rotate-x">
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6h2.239a8%208%200%200013.856%200h2.239zM24%2026.001c2.208%200%204%201.792%204%203.999%200%202.208-1.792%204-4%204a4.001%204.001%200%2001-3.999-4A4.001%204.001%200%200124%2026.001zm16%200A4.001%204.001%200%200143.999%2030c0%202.208-1.792%204-3.999%204-2.208%200-4-1.792-4-4a4.001%204.001%200%20014-3.999z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6h18.334zM24%2026.001c2.208%200%204%201.792%204%203.999%200%202.208-1.792%204-4%204a4.001%204.001%200%2001-3.999-4A4.001%204.001%200%200124%2026.001zm16%200A4.001%204.001%200%200143.999%2030c0%202.208-1.792%204-3.999%204-2.208%200-4-1.792-4-4a4.001%204.001%200%20014-3.999z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6H26l2%202%202-2h4l2%202%202-2h3.167zm.479-9.646a4.002%204.002%200%20011.182%206.475%204.004%204.004%200%2001-6.474-1.183l5.292-5.292zm-19.293.001l5.293%205.292a4.004%204.004%200%2001-6.474%201.182%204.002%204.002%200%20011.181-6.474z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
</ul>
<div class="slide3_labels">
<label for="slide3-08-radio-1" class="slide3_label select"></label>
<label for="slide3-08-radio-2" class="slide3_label select"></label>
<label for="slide3-08-radio-3" class="slide3_label select"></label>
<label for="slide3-08-radio-0" class="slide3_label unselect"></label>
</div>
</div>
<h3><span>Rotate-Y</span> <small>Y軸回転</small></h3>
<div class="slide3">
<input type="radio" name="slide3-09-radio" id="slide3-09-radio-1" class="slide3_radio select" />
<input type="radio" name="slide3-09-radio" id="slide3-09-radio-2" class="slide3_radio select" />
<input type="radio" name="slide3-09-radio" id="slide3-09-radio-3" class="slide3_radio select" />
<input type="radio" name="slide3-09-radio" id="slide3-09-radio-0" class="slide3_radio unselect" checked="checked" />
<ul class="slide3_contents is-animation-rotate-y">
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6h2.239a8%208%200%200013.856%200h2.239zM24%2026.001c2.208%200%204%201.792%204%203.999%200%202.208-1.792%204-4%204a4.001%204.001%200%2001-3.999-4A4.001%204.001%200%200124%2026.001zm16%200A4.001%204.001%200%200143.999%2030c0%202.208-1.792%204-3.999%204-2.208%200-4-1.792-4-4a4.001%204.001%200%20014-3.999z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6h18.334zM24%2026.001c2.208%200%204%201.792%204%203.999%200%202.208-1.792%204-4%204a4.001%204.001%200%2001-3.999-4A4.001%204.001%200%200124%2026.001zm16%200A4.001%204.001%200%200143.999%2030c0%202.208-1.792%204-3.999%204-2.208%200-4-1.792-4-4a4.001%204.001%200%20014-3.999z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6H26l2%202%202-2h4l2%202%202-2h3.167zm.479-9.646a4.002%204.002%200%20011.182%206.475%204.004%204.004%200%2001-6.474-1.183l5.292-5.292zm-19.293.001l5.293%205.292a4.004%204.004%200%2001-6.474%201.182%204.002%204.002%200%20011.181-6.474z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
</ul>
<div class="slide3_labels">
<label for="slide3-09-radio-1" class="slide3_label select"></label>
<label for="slide3-09-radio-2" class="slide3_label select"></label>
<label for="slide3-09-radio-3" class="slide3_label select"></label>
<label for="slide3-09-radio-0" class="slide3_label unselect"></label>
</div>
</div>
<h3><span>Rotate-Z</span> <small>Z軸回転</small></h3>
<div class="slide3">
<input type="radio" name="slide3-10-radio" id="slide3-10-radio-1" class="slide3_radio select" />
<input type="radio" name="slide3-10-radio" id="slide3-10-radio-2" class="slide3_radio select" />
<input type="radio" name="slide3-10-radio" id="slide3-10-radio-3" class="slide3_radio select" />
<input type="radio" name="slide3-10-radio" id="slide3-10-radio-0" class="slide3_radio unselect" checked="checked" />
<ul class="slide3_contents is-animation-rotate-z">
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6h2.239a8%208%200%200013.856%200h2.239zM24%2026.001c2.208%200%204%201.792%204%203.999%200%202.208-1.792%204-4%204a4.001%204.001%200%2001-3.999-4A4.001%204.001%200%200124%2026.001zm16%200A4.001%204.001%200%200143.999%2030c0%202.208-1.792%204-3.999%204-2.208%200-4-1.792-4-4a4.001%204.001%200%20014-3.999z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6h18.334zM24%2026.001c2.208%200%204%201.792%204%203.999%200%202.208-1.792%204-4%204a4.001%204.001%200%2001-3.999-4A4.001%204.001%200%200124%2026.001zm16%200A4.001%204.001%200%200143.999%2030c0%202.208-1.792%204-3.999%204-2.208%200-4-1.792-4-4a4.001%204.001%200%20014-3.999z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6H26l2%202%202-2h4l2%202%202-2h3.167zm.479-9.646a4.002%204.002%200%20011.182%206.475%204.004%204.004%200%2001-6.474-1.183l5.292-5.292zm-19.293.001l5.293%205.292a4.004%204.004%200%2001-6.474%201.182%204.002%204.002%200%20011.181-6.474z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
</ul>
<div class="slide3_labels">
<label for="slide3-10-radio-1" class="slide3_label select"></label>
<label for="slide3-10-radio-2" class="slide3_label select"></label>
<label for="slide3-10-radio-3" class="slide3_label select"></label>
<label for="slide3-10-radio-0" class="slide3_label unselect"></label>
</div>
</div>
<h3><span>Skew-X</span> <small>X軸変形回転</small></h3>
<div class="slide3">
<input type="radio" name="slide3-11-radio" id="slide3-11-radio-1" class="slide3_radio select" />
<input type="radio" name="slide3-11-radio" id="slide3-11-radio-2" class="slide3_radio select" />
<input type="radio" name="slide3-11-radio" id="slide3-11-radio-3" class="slide3_radio select" />
<input type="radio" name="slide3-11-radio" id="slide3-11-radio-0" class="slide3_radio unselect" checked="checked" />
<ul class="slide3_contents is-animation-skew-x">
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6h2.239a8%208%200%200013.856%200h2.239zM24%2026.001c2.208%200%204%201.792%204%203.999%200%202.208-1.792%204-4%204a4.001%204.001%200%2001-3.999-4A4.001%204.001%200%200124%2026.001zm16%200A4.001%204.001%200%200143.999%2030c0%202.208-1.792%204-3.999%204-2.208%200-4-1.792-4-4a4.001%204.001%200%20014-3.999z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6h18.334zM24%2026.001c2.208%200%204%201.792%204%203.999%200%202.208-1.792%204-4%204a4.001%204.001%200%2001-3.999-4A4.001%204.001%200%200124%2026.001zm16%200A4.001%204.001%200%200143.999%2030c0%202.208-1.792%204-3.999%204-2.208%200-4-1.792-4-4a4.001%204.001%200%20014-3.999z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6H26l2%202%202-2h4l2%202%202-2h3.167zm.479-9.646a4.002%204.002%200%20011.182%206.475%204.004%204.004%200%2001-6.474-1.183l5.292-5.292zm-19.293.001l5.293%205.292a4.004%204.004%200%2001-6.474%201.182%204.002%204.002%200%20011.181-6.474z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
</ul>
<div class="slide3_labels">
<label for="slide3-11-radio-1" class="slide3_label select"></label>
<label for="slide3-11-radio-2" class="slide3_label select"></label>
<label for="slide3-11-radio-3" class="slide3_label select"></label>
<label for="slide3-11-radio-0" class="slide3_label unselect"></label>
</div>
</div>
<h3><span>Skew-Y</span> <small>Y軸変形回転</small></h3>
<div class="slide3">
<input type="radio" name="slide3-12-radio" id="slide3-12-radio-1" class="slide3_radio select" />
<input type="radio" name="slide3-12-radio" id="slide3-12-radio-2" class="slide3_radio select" />
<input type="radio" name="slide3-12-radio" id="slide3-12-radio-3" class="slide3_radio select" />
<input type="radio" name="slide3-12-radio" id="slide3-12-radio-0" class="slide3_radio unselect" checked="checked" />
<ul class="slide3_contents is-animation-skew-y">
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6h2.239a8%208%200%200013.856%200h2.239zM24%2026.001c2.208%200%204%201.792%204%203.999%200%202.208-1.792%204-4%204a4.001%204.001%200%2001-3.999-4A4.001%204.001%200%200124%2026.001zm16%200A4.001%204.001%200%200143.999%2030c0%202.208-1.792%204-3.999%204-2.208%200-4-1.792-4-4a4.001%204.001%200%20014-3.999z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6h18.334zM24%2026.001c2.208%200%204%201.792%204%203.999%200%202.208-1.792%204-4%204a4.001%204.001%200%2001-3.999-4A4.001%204.001%200%200124%2026.001zm16%200A4.001%204.001%200%200143.999%2030c0%202.208-1.792%204-3.999%204-2.208%200-4-1.792-4-4a4.001%204.001%200%20014-3.999z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
<li class="slide3_content"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23404040%22%20d%3D%22M32%2016c8.831%200%2016%207.169%2016%2016s-7.169%2016-16%2016-16-7.169-16-16%207.169-16%2016-16zm0%202c7.727%200%2014%206.273%2014%2014s-6.273%2014-14%2014-14-6.273-14-14%206.273-14%2014-14zm9.167%2018c-1.545%203.531-5.07%206-9.167%206-4.097%200-7.622-2.469-9.167-6H26l2%202%202-2h4l2%202%202-2h3.167zm.479-9.646a4.002%204.002%200%20011.182%206.475%204.004%204.004%200%2001-6.474-1.183l5.292-5.292zm-19.293.001l5.293%205.292a4.004%204.004%200%2001-6.474%201.182%204.002%204.002%200%20011.181-6.474z%22%2F%3E%3C%2Fsvg%3E" width="80" height="80" /></li>
</ul>
<div class="slide3_labels">
<label for="slide3-12-radio-1" class="slide3_label select"></label>
<label for="slide3-12-radio-2" class="slide3_label select"></label>
<label for="slide3-12-radio-3" class="slide3_label select"></label>
<label for="slide3-12-radio-0" class="slide3_label unselect"></label>
</div>
</div>/**
* initialize
*/
html {
--sp: 1rem;
font-family: sans-serif;
}
html * {
line-height: calc(1em + var(--sp));
}
h1,
h2,
h3 {
margin: 0;
text-align: center;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.75em;
}
h3 {
font-size: 1.5em;
}
* + h1,
* + h2,
* + h3 {
margin-top: calc(var(--sp) * 4);
}
h1 small,
h2 small,
h3 small {
display: block;
font-size: 0.5em;
}
/**
* .slide1
*/
.slide1_contents {
display: flex;
list-style: none;
margin: 0;
padding: 0;
overflow-x: auto;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}
.slide1_content {
flex: none;
scroll-snap-align: center;
width: 100%;
}
.slide1_content img {
display: block;
margin: auto;
object-fit: cover;
width: calc(100% / 3);
height: auto;
}
/**
* .slide2
*/
@keyframes SLIDE2_2 {
0% {
transform: translateX(100%);
visibility: visible;
}
5%,
50% {
transform: translateX(0%);
}
55% {
visibility: hidden;
}
55%,
100% {
transform: translateX(-100%);
}
}
@keyframes SLIDE2_3 {
0% {
transform: translateX(100%);
visibility: visible;
}
3.333333%,
33.333333% {
transform: translateX(0%);
}
36.666666% {
visibility: hidden;
}
36.666666%,
100% {
transform: translateX(-100%);
}
}
@keyframes SLIDE2_4 {
0% {
transform: translateX(100%);
visibility: visible;
}
2.5%,
25% {
transform: translateX(0%);
}
27.5% {
visibility: hidden;
}
27.5%,
100% {
transform: translateX(-100%);
}
}
.slide2 {
--time: 4s;
}
.slide2_contents {
display: flex;
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.slide2_content {
flex: none;
margin-inline-end: -100%;
visibility: hidden;
width: 100%;
}
.slide2_content:nth-child(1):nth-last-child(2),
:nth-child(1):nth-last-child(2) ~ .slide2_content {
animation: SLIDE2_2 calc(var(--time) * 2) infinite;
}
.slide2_content:nth-child(1):nth-last-child(3),
:nth-child(1):nth-last-child(3) ~ .slide2_content {
animation: SLIDE2_3 calc(var(--time) * 3) infinite;
}
.slide2_content:nth-child(1):nth-last-child(4),
:nth-child(1):nth-last-child(4) ~ .slide2_content {
animation: SLIDE2_4 calc(var(--time) * 4) infinite;
}
.slide2_content:nth-child(1):nth-last-child(n) {
animation-delay: calc(var(--time) / -10);
}
.slide2_content:nth-child(2):nth-last-child(n) {
animation-delay: calc(var(--time) / -10 + var(--time));
}
.slide2_content:nth-child(3):nth-last-child(n) {
animation-delay: calc(var(--time) / -10 + var(--time) * 2);
}
.slide2_content:nth-child(4):nth-last-child(n) {
animation-delay: calc(var(--time) / -10 + var(--time) * 3);
}
.slide2_content img {
display: block;
margin: auto;
object-fit: cover;
width: calc(100% / 3);
height: auto;
}
/**
* .slide3
*/
@keyframes SLIDE3_2 {
0% {
opacity: var(--opacity-1, 1);
transform: var(--transform-1, none);
visibility: var(--visible-1, visible);
}
5%,
50% {
opacity: var(--opacity-2, 1);
transform: var(--transform-2, none);
}
55% {
visibility: var(--visible-2, visible);
}
55%,
100% {
opacity: var(--opacity-3, 1);
transform: var(--transform-3, none);
}
}
@keyframes SLIDE3_3 {
0% {
opacity: var(--opacity-1, 1);
transform: var(--transform-1, none);
visibility: var(--visible-1, visible);
}
3.333333%,
33.333333% {
opacity: var(--opacity-2, 1);
transform: var(--transform-2, none);
}
36.666666% {
visibility: var(--visible-2, visible);
}
36.666666%,
100% {
opacity: var(--opacity-3, 1);
transform: var(--transform-3, none);
}
}
@keyframes SLIDE3_4 {
0% {
opacity: var(--opacity-1, 1);
transform: var(--transform-1, none);
visibility: var(--visible-1, visible);
}
2.5%,
25% {
opacity: var(--opacity-2, 1);
transform: var(--transform-2, none);
}
27.5% {
visibility: var(--visible-2, visible);
}
27.5%,
100% {
opacity: var(--opacity-3, 1);
transform: var(--transform-3, none);
}
}
.slide3 {
--time: 4s;
}
.slide3_contents {
--visibility-2: hidden;
display: flex;
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.slide3_contents:not([class^="is-animation-"]):not([class*=" is-animation-"]):not([style*="--"]),
.slide3_contents.is-animation-translate-rtl {
--transform-1: translateX(100%);
--transform-2: translateX(0%);
--transform-3: translateX(-100%);
}
.slide3_contents.is-animation-translate-ltr {
--transform-1: translateX(-100%);
--transform-2: translateX(0%);
--transform-3: translateX(100%);
}
.slide3_contents.is-animation-translate-btt {
--transform-1: translateY(100%);
--transform-2: translateY(0%);
--transform-3: translateY(-100%);
}
.slide3_contents.is-animation-translate-ttb {
--transform-1: translateY(-100%);
--transform-2: translateY(0%);
--transform-3: translateY(100%);
}
.slide3_contents.is-animation-fade {
--opacity-1: 0;
--opacity-3: 0;
}
.slide3_contents.is-animation-zoom-in {
--opacity-1: 0;
--opacity-3: 0;
--transform-1: scale(0.5);
--transform-2: scale(1);
--transform-3: scale(2);
}
.slide3_contents.is-animation-zoom-out {
--opacity-1: 0;
--opacity-3: 0;
--transform-1: scale(2);
--transform-2: scale(1);
--transform-3: scale(0.5);
}
.slide3_contents.is-animation-rotate-x {
--opacity-1: 0;
--opacity-3: 0;
--transform-1: rotateX(-180deg);
--transform-2: rotateX(0deg);
--transform-3: rotateX(180deg);
}
.slide3_contents.is-animation-rotate-y {
--opacity-1: 0;
--opacity-3: 0;
--transform-1: rotateY(-180deg);
--transform-2: rotateY(0deg);
--transform-3: rotateY(180deg);
}
.slide3_contents.is-animation-rotate-z {
--opacity-1: 0;
--opacity-3: 0;
--transform-1: rotate(-180deg);
--transform-2: rotate(0deg);
--transform-3: rotate(180deg);
}
.slide3_contents.is-animation-skew-x {
--opacity-1: 0;
--opacity-3: 0;
--transform-1: skewX(180deg);
--transform-2: skewX(0deg);
--transform-3: skewX(-180deg);
}
.slide3_contents.is-animation-skew-y {
--opacity-1: 0;
--opacity-3: 0;
--transform-1: skewY(-180deg);
--transform-2: skewY(0deg);
--transform-3: skewY(180deg);
}
.slide3_content {
flex: none;
margin-inline-end: -100%;
visibility: hidden;
width: 100%;
}
.slide3_content img {
display: block;
margin: auto;
object-fit: cover;
width: calc(100% / 3);
height: auto;
}
.slide3_labels {
--opacity-1: 0.25;
--opacity-3: 0.25;
display: flex;
margin: 0 auto;
position: relative;
width: min-content;
}
.slide3_label.select {
aspect-ratio: 1 / 1;
cursor: pointer;
display: grid;
place-items: center;
opacity: 0.25;
width: 40px;
z-index: 2;
}
.slide3_label.select:before {
aspect-ratio: 1 / 1;
background: currentcolor;
border-radius: 50%;
content: "";
display: block;
transition: transform 0.2s;
width: 20%;
}
.slide3_label.select:hover:before {
transform: scale(1.5);
}
.slide3_label.unselect {
cursor: pointer;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
.slide3_content:nth-child(1):nth-last-child(2),
:nth-child(1):nth-last-child(2) ~ .slide3_content,
.slide3_label.select:nth-child(1):nth-last-child(3),
:nth-child(1):nth-last-child(3) ~ .slide3_label.select {
animation: SLIDE3_2 calc(var(--time) * 2) infinite;
}
.slide3_content:nth-child(1):nth-last-child(3),
:nth-child(1):nth-last-child(3) ~ .slide3_content,
.slide3_label.select:nth-child(1):nth-last-child(4),
:nth-child(1):nth-last-child(4) ~ .slide3_label.select {
animation: SLIDE3_3 calc(var(--time) * 3) infinite;
}
.slide3_content:nth-child(1):nth-last-child(4),
:nth-child(1):nth-last-child(4) ~ .slide3_content,
.slide3_label.select:nth-child(1):nth-last-child(5),
:nth-child(1):nth-last-child(5) ~ .slide3_label.select {
animation: SLIDE3_4 calc(var(--time) * 4) infinite;
}
.slide3_content:nth-child(1):nth-last-child(n),
.slide3_label.select:nth-child(1):nth-last-child(n) {
animation-delay: calc(var(--time) / -10);
}
.slide3_content:nth-child(2):nth-last-child(n),
.slide3_label.select:nth-child(2):nth-last-child(n) {
animation-delay: calc(var(--time) / -10 + var(--time));
}
.slide3_content:nth-child(3):nth-last-child(n),
.slide3_label.select:nth-child(3):nth-last-child(n) {
animation-delay: calc(var(--time) / -10 + var(--time) * 2);
}
.slide3_content:nth-child(4):nth-last-child(n),
.slide3_label.select:nth-child(4):nth-last-child(n) {
animation-delay: calc(var(--time) / -10 + var(--time) * 3);
}
.slide3_radio {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
position: absolute;
visibility: hidden;
}
.slide3_radio.select:checked ~ .slide3_contents > .slide3_content,
.slide3_radio.select:checked ~ .slide3_labels > .slide3_label.select {
animation: none;
}
.slide3_radio.select:nth-child(1):checked
~ .slide3_contents
> .slide3_content:nth-child(1),
.slide3_radio.select:nth-child(2):checked
~ .slide3_contents
> .slide3_content:nth-child(2),
.slide3_radio.select:nth-child(3):checked
~ .slide3_contents
> .slide3_content:nth-child(3),
.slide3_radio.select:nth-child(4):checked
~ .slide3_contents
> .slide3_content:nth-child(4) {
visibility: visible;
}
.slide3_radio.select:nth-child(1):checked
~ .slide3_labels
> .slide3_label.select:nth-child(1),
.slide3_radio.select:nth-child(2):checked
~ .slide3_labels
> .slide3_label.select:nth-child(2),
.slide3_radio.select:nth-child(3):checked
~ .slide3_labels
> .slide3_label.select:nth-child(3),
.slide3_radio.select:nth-child(4):checked
~ .slide3_labels
> .slide3_label.select:nth-child(4) {
opacity: 1;
z-index: 0;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.