@charset "utf-8";

/*  トップページ（画像の回転） */

.image,
.image_info {
    display: block;
    width: 500px;
    height: 400px;
    background-size: cover;
    margin: 2em auto 1em;
    box-shadow: inset 0 0 8px 8px white;
    border-radius: 1em;
    
}
.image {
    background-image: url(../img/cycling-1.jpg);
}
.image_info {
    background-image: url(../img/pcwork-1.jpg);
}

label:hover {
    cursor: default;
}
#zoom {
    display: none;
}
#zoom:checked~.image {
    /* width: 400px;
    height: 400px;
    border-radius: 0;
    box-shadow: none;
    background-position: left top;
    animation-duration: 10s;

    animation-name: rotate;
    animation-duration: 20s;
    animation-delay: 0s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-iteration-count: infinite; */
}

@keyframes rotate {
    /* 2枚 */
    /* 0%, 24.9%, 75% {
        background-image: url(../img/ajisai.jpg);
        border: 10px solid violet;
    }
    25%, 74.9% {
        background-image: url(../img/green.jpg);
        border: 10px solid green;
    }

    0%, 12.4%, 87.5% {
        background-image: url(../img/ajisai.jpg);
        border: 10px solid violet;
    } */
    
    /* 4枚 */
    0%, 24.9% {
        background-image: url(../img/pc-1.jpg);
        border-color: violet;
    }
    25%, 49.9% {
        background-image: url(../img/space-1.jpg);
        border-color: purple;
    }
    50%, 74.9% {
        background-image: url(../img/space-3.jpg);
        border-color: green;
    }
    75%, 99.9% {
        background-image: url(../img/camp-2.jpg);
        border-color: #4564ff;
    }

    0% {
        transform: perspective(500px) rotateY(90deg);
    }    
    100% {
        transform:  perspective(500px) rotateY(810deg);
        
    }
}



/* 年金受給の手続きページ */
#anime1 {
    display: none;
}
.anime {
    opacity: 0;
    display: none;
}
.anime p {
    font-size: 30px;
    margin: 100px;
    width: 300px;
    background: #aaf;
    text-align: center;
    color: #222;

    animation-name: rotateAnime;/*1で解説*/
    animation-duration:15s;/*3で解説*/
    animation-iteration-count:infinite;/*4で解説*/
    animation-timing-function:linear;/*5で解説*/
    transition-property: opacity;
    transition-duration: 5s;
    /* opacity: 0; */
}
.anime:hover {
    cursor: default;
}
#anime1:checked ~ p:nth-of-type(1) {
    display: none;
}
#anime1:checked ~ div:nth-of-type(1)
 {
    display: block;
    opacity: 1;
    transition-property: opacity;
    transition-duration: 2s;
    border: 1px solid #000;

}
.anime p.a {
    animation-name: rotateAnime1;
}

/*1で解説*/
@keyframes rotateAnime1{
0% {
    transform: perspective(700px) rotateY(0deg);
}
25%, 76% {
    color: #000;
}
26%, 75% {
    color: silver;
}
50% {
    transform: perspective(700px) rotateY(180deg);
}
100% {
    transform: perspective(700px) rotateY(360deg);
}
}
.anime p.b {
    animation-name: rotateAnime2;
}

/*1で解説*/
@keyframes rotateAnime2{
0% {
    transform: perspective(200px) rotateX(0deg);
}
100% {
    transform: perspective(200px) rotateX(360deg);
}
}
.anime p.c {
    animation-name: rotateAnime3;
    background-color: transparent;
}
@keyframes rotateAnime3{
0% {
    transform: perspective(200px) rotateX(0deg) rotateY(0deg);
}
100% {
    transform: perspective(200px) rotateX(360deg) rotateY(360deg);
}
}
@media screen and (max-width: 640px) { /* 画面サイズ640px以下 */
    .image,
    .image_info {
        width: 300px;
        height: 300px;
    }
}