@charset "UTF-8";

/* radioは非表示に */
#flag { display: none; }
/* 見た目 */
[for="flag"] {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}
[class*="scene_"] {
    width: 100%;
    height: 0px;
    background: #ccc;
    overflow: hidden;
}
.scene_1 { background: orange; }
.scene_2 { background: tomato; }

/* チェックされたら色を変更する */
#flag:checked ~ [for="flag"] {
    color: #ccc;
}
/*
  チェックされていなければ.scene_1を表示 
  チェックされたら.scene_2を表示
*/
#flag:not(:checked) ~ .scene_1,
#flag:checked ~ .scene_2 {
    height: 150px;
}
/* クリックされたら0秒後に非表示するように設定する */
#flag:checked ~ .scene_1 {
    -webkit-animation-delay: 0;
    animation-delay: 0;
}
/* クリックされてなければ、5秒後に非表示するように設定する */
#flag:not(:checked) ~ .scene_1 {
    -webkit-animation: 0.1ms hide linear;
    -webkit-animation-delay: 5s;
    -webkit-animation-fill-mode: forwards;
    animation: 0.1ms hide linear;
    animation-delay: 5s;
    animation-fill-mode: forwards;
}
@-webkit-keyframes hide {
    100% {
        height: 0px;
    }
}
@keyframes hide {
    100% {
        height: 0px;
    }
}
/* クリックされたら0秒後に表示するように設定する */
#flag:checked ~ .scene_2 {
    -webkit-animation-delay: 0;
    animation-delay: 0;
}
/* クリックされてなければ、5秒後に表示するように設定する */
#flag:not(:checked) ~ .scene_2 {
    -webkit-animation: 0.1ms show linear;
    -webkit-animation-delay: 5s;
    -webkit-animation-fill-mode: forwards;
    animation: 0.1ms show linear;
    animation-delay: 5s;
    animation-fill-mode: forwards;
}
@-webkit-keyframes show {
    100% {
        height: 150px;
    }
}
@keyframes show {
    100% {
        height: 150px;
    }
}