/*
Theme Name:eportfolio child
Theme URI:
Description:WordPressテーマ「eportfolio」の自作子テーマです。
Template:eportfolio
Author:
Author URI:
Version:0
*/

/*メニューの濃さ*/
.twp-mobile-menu-section {
    background-color: #2f0000d4;
}





.wp-block-media-text .wp-block-media-text__content {

    padding: 0;

}


/*サイドメニュー　アイキャッチ付き最近の投稿*/

.RecentPost {
    width: 100%;
}

.RecentPost ul li {
    display: flex;
}

.RecentPost ul li .thumbnail {
    width: 85px;
}

.RecentPost .right {
    margin-left: 1rem;
}

.widget-area .widget-title {
    margin: 1rem 0rem;
    padding-top: 0;
}



/*オーダーページ*/
figure.wp-block-table.orderTable {
    text-align: left;
    background-color: #ffe4db;
    padding-left: 1rem;

}

@media screen and (min-width:480px) {
    div#primary {
        padding: 0rem 2rem 0rem 2rem !important;
    }

    .wp-block-media-text .wp-block-media-text__content {

        padding: 0 8%;

    }

}


@media (min-width: 600px) {

    .blocks-gallery-grid.columns-3 .blocks-gallery-image,
    .blocks-gallery-grid.columns-3 .blocks-gallery-item,
    .wp-block-gallery.columns-3 .blocks-gallery-image,
    .wp-block-gallery.columns-3 .blocks-gallery-item {
        width: calc((100% - 32px)/6);

    }

}




.wcb-chan {
    background: url(https://sayaka-illustration.com/wp-content/uploads/2023/11/wcb-animation-img.jpg) no-repeat;
    width: 200px;
    height: 200px;
}

.wcb-chan {
    background: url(https://sayaka-illustration.com/wp-content/uploads/2023/11/wcb-animation-img.jpg) no-repeat;
    width: 200px;
    height: 200px;
    animation: smile 1s steps(4) infinite;
}

@keyframes smile {
    to {
        background-position: -800px 0;
    }
}



.flipbook {
    position: relative;
    width: 100%;
    max-width: 500px;
    overflow: hidden;
}

.flipbook:after {
    content: "";
    display: block;
    padding-top: 100%;
    /*高さを確保*/
}

.flipbook:before {
    content: '';
    animation: flipbook_anime 1s steps(4) infinite;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url("images/anime.svg");
    display: inline-block;
    vertical-align:
        middle;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 400% auto;
    /*4コマなので400%*/
}

@keyframes flipbook_anime {
    from {
        background-position: 0;
    }

    to {
        background-position: 133.33333%;
    }
}