@charset "UTF-8";

body {
    background-color: var(--background-color);
}

.under01 h1 {
    margin-bottom: var(--contents-gutter);
    font-size: var(--size-lg);
}

/* ＝＝＝＝＝min-width:960px＝＝＝＝＝ */
@media screen and (min-width:960px) {
    .under01 h1 {
        text-align: center;
        margin-bottom: var(--contents-gutter-pc);

    }
}


#About {
    background-image: url(../../img/About_title.jpg);
}


/* png画像 */

/* ＝＝＝＝＝min-width:960px＝＝＝＝＝ */
@media screen and (min-width:960px) {
    #png01 {
        width: 1200px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        background-image: url(../../img/hana_left.png);
        background-size: 20%;
        background-repeat: no-repeat;
        background-position: 5% 50%;
        background-attachment: fixed;

        animation-name: rotation;
        animation-duration: 3.5s;
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
        /* easeOutQuintのイージング */
        animation-delay: 0.7s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }

    @keyframes rotation {
        0% {
            background-position: 0 80%;
            transform: rotateX(0);
        }

        100% {
            background-position: 50 100%;
            transform: rotateX(0);
        }
    }

    #png02 {
        width: 1200px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        background-image: url(../../img/hana_right.png);
        background-size: 15%;
        background-repeat: no-repeat;
        background-position: 95% 20%;
        background-attachment: fixed;

        /* animation-name: rotation;
        animation-direction: reverse;
        animation-duration: 3s;

        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);

        animation-delay: 0.7s;
        animation-iteration-count: infinite;
        animation-fill-mode: backwards;
    }

    @keyframes rotation {
        0% {
            background-position: 0 80%;
            transform: rotateX(0);
        }

        20% {
            background-position: 10 60%;
            transform: rotateX(0);
        } */
    }




}





/* ★アイテムリスト */

figure {
    margin-bottom: calc(var(--contents-gutter)*2);
    width: 280px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

figure img {

    box-sizing: border-box;
    margin: 0 auto;
}

.circle {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.circle img {

    width: 280px;
    height: 280px;
    border-radius: 50%;
}


figure figcaption {
    text-align: center;
    margin: 0;
    /* 上側の余白。画像とテキストの間の余白。*/
    line-height: 1.5;
    /* 適当に調整 */
    font-size: 20px;
}

/* ＝＝＝＝＝min-width:960px＝＝＝＝＝ */
@media screen and (min-width:960px) {
    .circle {
        display: grid;
        grid-template-columns: repeat(3, auto);
        row-gap: 30px;
    }

}