@charset 'UTF-8';
/**
* common
**/
body {
  font-family: sans-serif;
  margin: 0 auto;
  max-width: 640px;
  background-color: #eee;
}
section{
  width: 640px;
  margin: 0 auto;
}
label{
  display: flex;
  align-items: center;
}
button {
  padding: 8px 16px;
  margin-top: 16px;
  margin-bottom: 16px;
}
/**
* button
**/
.radio-button {
  -webkit-appearance: none;
  appearance: none;
}
.radio-button::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 32px;
  background-size: 32px;
  margin-right: -6px;
}
.radio-button.radio-button_noload::before {
  background-image: url("radio_off.png");
}
.radio-button.radio-button_noload:checked:before {
  background-image: url("radio_on.png");
}
.radio-button.radio-button_preload::before {
  background-image: url("radio_off_preload.png");
}
.radio-button.radio-button_preload:checked:before {
  background-image: url("radio_on_preload.png");
}
.image-wrapper {
  width: 400px;
  height: 300px;
}
.image {
  width: 400px;
  height: 300px;
  background-size: 400px 300px;
  display: none;
}
.image.active {
  display: block;
}
.noload-image {
  background-image: url("https://picsum.photos/id/99/1200/900");
}
.preload-image {
  background-image: url("https://picsum.photos/id/120/1200/900");
}