@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

/*common*/

html {
    scroll-behavior: smooth;
}

body {
    color: #333;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(10px, 16 / 1200 * 100vw, 16px);
    line-height: 1.8;
    line-break: strict;
    word-break: break-all;
    text-align: justify;
    text-justify: distribute;
    position: relative;
}

a:link {
    text-decoration: none;
    color: #f90;
    -webkit-transition: all 500ms 0s ease;
    transition: all 500ms 0s ease;
}

a:visited {
    text-decoration: none;
    color: #f90;
}

a:hover {
    text-decoration: none;
    opacity: 0.7;
}

p:not(:last-child) {
    margin-bottom: 1.5em;
}

#wrap {
    width: 100%;
    overflow: hidden;
}


/*PC--------------------------------------------------------------------------------------*/

/*common*/

body::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
    width: 100vw;
    height: 100vh;
    background-image:
        url("../images/common/bg.png");
    background-repeat: repeat;
    background-position: center;
    background-size: 24px 24px;
}

body::after {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 15;
    width: 100vw;
    height: 100vh;
    background-image:
        url("../images/common/bgfl01.png"),
        url("../images/common/bgfl02.png"),
        url("../images/common/bgfl03.png"),
        url("../images/common/bgfl04.png");
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: left top, right top, left bottom, right bottom;
    background-size: 15% auto, 15% auto, 15% auto, 15% auto;
}

h2{
            max-width: 538px;
            width: 90%;
            margin: -100px auto 25px auto;
        }

h2 img{
    width: 100%;
}

h3{
    font-size: 1.4em;
    text-align: center;
    color: #e84472;
    border-top: 1px solid #4d85c5;
    border-bottom: 1px solid #4d85c5;
    padding: 0.5em;
    line-height: 1.5;
    font-weight: bold;
    margin: 30px 0 40px 0;
}

h4{
    background: #fbe4e9;
    color: #023894;
    margin: 2em 0;
    padding: 0.5em 1em;
    font-size: 1.1em;
}

h4.book::before {
            display: inline-block;
            font-style: normal;
            color: #e84472;
            font-variant: normal;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            font-family: "Font Awesome 5 Free";
            content: "\f02d";
            margin-right: 0.5em;
        }

h4.star::before {
            display: inline-block;
            font-style: normal;
            color: #e84472;
            font-variant: normal;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            font-family: "Font Awesome 5 Free";
            content: "\f005";
            margin-right: 0.5em;
        }

h5{
    font-size: 1.1em;
    color: #21b0b9;
    font-weight: normal;
}


.text-catch{
    text-align: center;
    font-weight: bold;
    font-size: 1.1em;
}

.cc01{
    color: #f60;
    font-weight: bold;
}

.cc02{
    color: #e84472;
    font-weight: bold;
}

.mini{
    font-size: 0.9em;
    color: #4d85c5
}

.c-btn{
    max-width: 800px;
    width: 100%;
    margin: 2rem auto 0 auto;
}

.c-btn2{
    max-width: 400px;
    width: 100%;
    margin: 1.5rem 0 0 0;
}

.c-btn a,
.c-btn2 a{
    background: #e84472;
    color: #fff;
    border-radius: 100px;
    padding: 0.5em;
    font-size: 1.1em;
    text-align: center;
    display: block;
    overflow: hidden;
    -moz-text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    -webkit-text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    border: 2px solid #fff;
    box-sizing: border-box;
    -webkit-transition: all 500ms 0s ease;
    transition: all 500ms 0s ease;
    width: 100%;
    line-height: 1.5;
}

.c-btn.dummy a{
    opacity: 0.5;
}

/*header*/

.header-wrap {
            max-width: 1200px;
            width: 100%;
            margin: 0 auto;
            padding: 0;
            position: relative;
            z-index: 10;
            box-sizing: border-box;
        }

.header-wrap .header {
            top: 0px;
            left: 0px;
            height: 0;
            padding-top: 68.33333%;
            position: relative;
            width: 100%;
            display: block;
            -webkit-transition: all 500ms 0s ease;
            transition: all 500ms 0s ease;
        }

.header-wrap .header .ill-pos {
            position: absolute;
            top: 0.000000%;
            left: 0.000000%;
            width: 100.000000%;
            -webkit-transition: all 500ms 0s ease;
            transition: all 500ms 0s ease;
            animation: picFadeIn 2s ease 0s 1 normal;
            -webkit-animation: picFadeIn 2s ease 0s 1 normal;
        }

@keyframes picFadeIn {
            0% {
                opacity: 0;
            }

            50% {
                opacity: 1;
            }
        }

@-webkit-keyframes picFadeIn {
            0% {
                opacity: 0;
            }

            50% {
                opacity: 1;
            }
        }

.header-wrap .header .ill-pos .ill {
            top: 0px;
            left: 0px;
            height: 0;
            padding-top: 54.16667%;
            position: relative;
            width: 100%;
            background: url("../images/header/ill.jpg") no-repeat;
            background-size: cover;
            display: block;
            overflow: hidden;
            text-indent: -9999px;
        }

.header-wrap .header .logo-pos {
            position: absolute;
            top: 69.878049%;
            left: 1.250000%;
            width: 60.416667%;
            -webkit-transition: all 500ms 0s ease;
            transition: all 500ms 0s ease;
            animation: logoFadeIn 2s ease 0s 1 normal;
            -webkit-animation: logoFadeIn 2s ease 0s 1 normal;
        }

@keyframes logoFadeIn {
            0% {
                opacity: 0;
                transform: translateY(-15%);
            }

            50% {
                opacity: 0;
                transform: translateY(-15%);
            }

            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

@-webkit-keyframes logoFadeIn {
            0% {
                opacity: 0;
                transform: translateY(-15%);
            }

            50% {
                opacity: 0;
                transform: translateY(-15%);
            }

            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

.header-wrap .header .logo-pos h1 {
            top: 0px;
            left: 0px;
            height: 0;
            padding-top: 34.20690%;
            position: relative;
            width: 100%;
            background: url("../images/header/logo.png") no-repeat;
            background-size: cover;
            display: block;
            overflow: hidden;
            text-indent: -9999px;
        }

        .header-wrap .header .read-pos {
            position: absolute;
            top: 76.707317%;
            left: 63.500000%;
            width: 34.416667%;
            -webkit-transition: all 500ms 0s ease;
            transition: all 500ms 0s ease;
            animation: readFadeIn 2s ease 0s 1 normal;
            -webkit-animation: readFadeIn 2s ease 0s 1 normal;
        }

@keyframes readFadeIn {
            0% {
                opacity: 0;
                transform: translateX(15%);
            }

            50% {
                opacity: 0;
                transform: translateX(15%);
            }

            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }

@-webkit-keyframes readFadeIn {
            0% {
                opacity: 0;
                transform: translateX(15%);
            }

            50% {
                opacity: 0;
                transform: translateX(15%);
            }

            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }

.header-wrap .header .read-pos .read {
            top: 0px;
            left: 0px;
            height: 0;
            padding-top: 42.37288%;
            position: relative;
            width: 100%;
            background: url("../images/header/read.png") no-repeat;
            background-size: cover;
            display: block;
            overflow: hidden;
            text-indent: -9999px;
        }

        .header-wrap .header .catch-pos {
            position: absolute;
            top: 53.292683%;
            left: 16.166667%;
            width: 68.166667%;
            -webkit-transition: all 500ms 0s ease;
            transition: all 500ms 0s ease;
            animation: catchFadeIn 2s ease 0s 1 normal;
            -webkit-animation: catchFadeIn 2s ease 0s 1 normal;
        }

@keyframes catchFadeIn {
            0% {
                opacity: 0;
                transform: translateY(15%);
            }

            50% {
                opacity: 0;
                transform: translateY(15%);
            }

            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

@-webkit-keyframes catchFadeIn {
            0% {
                opacity: 0;
                transform: translateY(15%);
            }

            50% {
                opacity: 0;
                transform: translateY(15%);
            }

            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

.header-wrap .header .catch-pos .catch {
            top: 0px;
            left: 0px;
            height: 0;
            padding-top: 11.98044%;
            position: relative;
            width: 100%;
            background: url("../images/header/catch.png") no-repeat;
            background-size: cover;
            display: block;
            overflow: hidden;
            text-indent: -9999px;
        }

        /*content*/

        .content-bg{
            background: #fff;
            width: 100%;
            position: relative;
            margin-top: -50px;
            overflow: hidden;
        }

        .content-wrap {
            max-width: 1230px;
            width: 100%;
            margin: 0 auto;
            padding: 100px 15px 0 15px;
            position: relative;
            z-index: 20;
            box-sizing: border-box;
        }

        .navi{
            margin: 0 auto 50px auto;
            max-width: 870px;
        }

        .navi ul{
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            margin: 0 -6px -12px -6px;
            justify-content: center;
        }

        .navi ul li{
            max-width: 299px;
            width: calc( 100% / 3);
            padding: 0 6px;
            margin-bottom: 12px;
            box-sizing: border-box;
        }

        .navi ul li img{
            width: 100%;
        }

        .info-wrap{
            background: url(../images/common/bg.png);
            padding: 1em;
            margin: 0 0 50px 0;
            display: flex;
            flex-wrap: wrap;
            font-size: 0.9em;
            align-items: center;
        }

        .info-wrap .title{
            width: 15%;
            text-align: center;
            font-family: "Oswald", sans-serif;
            font-optical-sizing: auto;
            color: #e84472;
            font-weight: bold;
        }

        .info-wrap .list{
            flex: 1;
            border-left: 1px solid #e84472;
            padding-left: 2em;
        }

        .info-wrap .list dl{
            display: flex;
            flex-wrap: wrap;
        }

        .info-wrap .list dl dd{
            width: 8%;
            font-family: "Oswald", sans-serif;
            font-optical-sizing: auto;
        }

        .info-wrap .list dl dt{
            width: 92%;
        }

        section {
            background-image:
                url("../images/common/frame_top_l.png"),
                url("../images/common/frame_top_r.png"),
                url("../images/common/frame_bottom_l.png"),
                url("../images/common/frame_bottom_r.png"),
                url("../images/common/frame_top_c.png"),
                url("../images/common/frame_middle_l.png"),
                url("../images/common/frame_middle_r.png"),
                url("../images/common/frame_bottom_c.png"),
                url("../images/common/frame_middle_c.png");
            background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, repeat-y, repeat-y, repeat-x, repeat;
            background-position: left top, right top, left bottom, right bottom, center top, left top, right top, center bottom, left top;
            background-size: 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px, 40px 40px;
            padding: 50px 50px 50px 50px;
            box-sizing: border-box;
            position: relative;
            margin: 70px 0 50px 0;
        }

        /*anime*/

        .anime-wrap{
            margin-top: 40px;
        }

        .anime-wrap ul{
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            margin: 0 -1.5%;
            justify-content: center;
        }

        .anime-wrap ul li{
            width: calc( 100% / 3 );
            padding: 0 1.5%;
            box-sizing: border-box;
        }

        .anime-wrap ul li img{
            width: 100%;
            -moz-box-shadow: 0px 0px 4px rgba(50, 50, 50, 0.7);
            -webkit-box-shadow: 0px 0px 4px rgba(50, 50, 50, 0.7);
            box-shadow: 0px 0px 4px rgba(50, 50, 50, 0.7);
        }

        /*roguo*/

        .obi{
            max-width: 800px;
            width: 100%;
            margin: 40px auto;
        }

        .obi img{
            width: 100%;
            -moz-box-shadow: 0px 0px 4px rgba(50, 50, 50, 0.7);
            -webkit-box-shadow: 0px 0px 4px rgba(50, 50, 50, 0.7);
            box-shadow: 0px 0px 4px rgba(50, 50, 50, 0.7);
        }

        .schedule{
            border-left: 3px solid #e84472;
            padding-left: 1em;
            line-height: 1.5;
        }

        .schedule span.date
        {
            font-family: "Oswald", sans-serif;
            font-optical-sizing: auto;
            font-style: normal;
            font-weight: bold;
            font-size: 1.4em;
            vertical-align: baseline;
        }

        .book-wrap{
            margin: 40px 0
        }

        .book-wrap ul{
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            margin: 0 -1.5% -3% -1.5%;
            justify-content: center;
        }

        .book-wrap ul li{
            width: calc( 100% / 4 );
            padding: 0 1.5%;
            margin-bottom: 3%;
            box-sizing: border-box;
        }

        .book-wrap ul li img{
            width: 100%;
            -moz-box-shadow: 0px 0px 4px rgba(50, 50, 50, 0.7);
            -webkit-box-shadow: 0px 0px 4px rgba(50, 50, 50, 0.7);
            box-shadow: 0px 0px 4px rgba(50, 50, 50, 0.7);
        }

        .book-wrap ul li .title{
            font-size: 0.9em;
            line-height: 1.5em;
            margin: 0.7em 0 0.5em 0;
        }

        .book-wrap ul li .author{
            font-size: 0.8em;
            line-height: 1.5em;
            color: #4d85c5;
        }

        /*form*/

.password {
    margin: 0;
}

.btn-wrap{
    display: block;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

button{
    background: #e84472;
    color: #fff;
    border-radius: 100px;
    padding: 0.5em;
    font-size: 1.1em;
    text-align: center;
    display: block;
    overflow: hidden;
    -moz-text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    -webkit-text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    border: 2px solid #fff;
    box-sizing: border-box;
    -webkit-transition: all 500ms 0s ease;
    transition: all 500ms 0s ease;
    width: 100%;
}

button:hover {
    opacity: 0.7;
    cursor: pointer;
}

button::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    content: "\f13e";
    margin-right: 0.5em;
    font-weight: bold;
    color: #ff0;
    font-size: 1em;
}

/*event*/

.event-wrap{
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;
    align-items: center;
    border-left: 1px solid #e84472;
}

.event-wrap .cover{
    width: 15%;
    order: 1;
}

.event-wrap .cover img{
            width: 100%;
            -moz-box-shadow: 0px 0px 4px rgba(50, 50, 50, 0.7);
            -webkit-box-shadow: 0px 0px 4px rgba(50, 50, 50, 0.7);
            box-shadow: 0px 0px 4px rgba(50, 50, 50, 0.7);
        }

.event-wrap .details{
    width: 85%;
    box-sizing: border-box;
    padding-left: 2em;
}

.event-wrap .details p{
    line-height: 1.5;
}

.event-wrap .details span.date
        {
            font-family: "Oswald", sans-serif;
            font-optical-sizing: auto;
            font-style: normal;
            font-weight: bold;
            font-size: 1.4em;
            vertical-align: baseline;
        }

        /*print*/

.print-wrap{
            margin: 40px 0
        }

        .print-wrap ul{
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            margin: 0 -1.5% -3% -1.5%;
            justify-content: center;
        }

        .print-wrap ul li{
            width: 23%;
            padding: 0 1.5%;
            margin-bottom: 3%;
            box-sizing: border-box;
        }

        .print-wrap ul li:last-child{
            width: 31%;
        }

        .print-wrap ul li img{
            width: 100%;
            -moz-box-shadow: 0px 0px 4px rgba(50, 50, 50, 0.7);
            -webkit-box-shadow: 0px 0px 4px rgba(50, 50, 50, 0.7);
            box-shadow: 0px 0px 4px rgba(50, 50, 50, 0.7);
        }


        /*shopfair*/

.card-wrap{
            margin: 40px 0
        }

        .card-wrap ul{
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            margin: 0 -1.5% -3% -1.5%;
            justify-content: center;
        }

        .card-wrap ul li{
            width: calc( 100% / 4 );
            padding: 0 1.5%;
            margin-bottom: 3%;
            box-sizing: border-box;
        }

        .card-wrap ul li img{
            width: 100%;
            -moz-box-shadow: 0px 0px 4px rgba(50, 50, 50, 0.7);
            -webkit-box-shadow: 0px 0px 4px rgba(50, 50, 50, 0.7);
            box-shadow: 0px 0px 4px rgba(50, 50, 50, 0.7);
        }

        .shoplist-wrap{
            display: flex;
            flex-wrap: wrap;
        }

        .shoplist-wrap div{
            width: 50%;
        }

        dl.shoplist{
            display: flex;
            flex-wrap: wrap;
            font-size: 0.8em;
        }

        dl.shoplist dt{
            width: 15%;
            color: #4d85c5;
        }

        dl.shoplist dd{
            width: 85%;
        }

        /*goods*/

        .goods-wrap{
            margin: 40px 0
        }

        .goods-wrap ul{
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            margin: 0 -1.5% -3% -1.5%;
            justify-content: center;
        }

        .goods-wrap ul li{
            width: calc( 100% / 4 );
            padding: 0 1.5%;
            margin-bottom: 3%;
            box-sizing: border-box;
        }

        .goods-wrap ul li img{
            width: 100%;
            -moz-box-shadow: 0px 0px 4px rgba(50, 50, 50, 0.7);
            -webkit-box-shadow: 0px 0px 4px rgba(50, 50, 50, 0.7);
            box-shadow: 0px 0px 4px rgba(50, 50, 50, 0.7);
        }

/*footer*/

        footer {
            padding: 50px 15px;
            box-sizing: border-box;
            font-size: 0.8em;
            background: #4d85c5;
            position: relative;
            color: #fff;
        }

        .footer-wrap {
            display: flex;
            flex-wrap: wrap;
            max-width: 1200px;
            width: 100%;
            margin: 0 auto;
            position: relative;
            z-index: 20;
            -moz-text-shadow: 0px 0px 4px rgba(50, 50, 50, 0.7);
            -webkit-text-shadow: 0px 0px 4px rgba(50, 50, 50, 0.7);
            text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8);
        }

        .footer-wrap .fw01 {
            width: 50%;
        }

        .footer-wrap .fw02 {
            width: 50%;
            text-align: right;
        }

        .footer-wrap h5{
            color: #ff0;
        }

        .sns ul {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            margin-bottom: 1em;
        }

        .sns ul li {
            width: 60px;
            padding: 0 5px;
            box-sizing: border-box;
        }

        .sns ul li img {
            width: 100%;
        }



/*RESPONSIVE--------------------------------------------------------------------------------------*/

@media only screen and (max-width: 1200px) {}


/*MOBILE--------------------------------------------------------------------------------------*/

@media only screen and (max-width: 768px) {

    body {
        font-size: clamp(10px, 14 / 375 * 100vw, 14px);
    }

    span.br::before {
                content: "\A";
                white-space: pre;
            }

    h2{
            width: 90%;
            margin: -8vh auto 3vh auto;
        }

        .text-catch{
    text-align: left;
    font-weight: bold;
    font-size: 1.1em;
}

h3{
    font-size: 1.4em;
    text-align: center;
    color: #e84472;
    border-top: 1px solid #4d85c5;
    border-bottom: 1px solid #4d85c5;
    padding: 0.5em;
    line-height: 1.5;
    font-weight: bold;
    margin: 3vh 0 4vh 0;
}

    /*header*/

    .header-wrap .header {
            top: 0px;
            left: 0px;
            height: 0;
            padding-top: 130%;
            position: relative;
            width: 100%;
            display: block;
            -webkit-transition: all 500ms 0s ease;
            transition: all 500ms 0s ease;
        }

        .header-wrap .header .logo-pos {
            position: absolute;
            top: 43.5%;
            left: 0;
            width: 95%;
            -webkit-transition: all 500ms 0s ease;
            transition: all 500ms 0s ease;
            animation: logoFadeIn 2s ease 0s 1 normal;
            -webkit-animation: logoFadeIn 2s ease 0s 1 normal;
        }

        .header-wrap .header .read-pos {
            position: absolute;
            top: auto;
            bottom: 0;
            left: 5%;
            width: 90%;
            -webkit-transition: all 500ms 0s ease;
            transition: all 500ms 0s ease;
            animation: readFadeIn 2s ease 0s 1 normal;
            -webkit-animation: readFadeIn 2s ease 0s 1 normal;
        }

        .header-wrap .header .catch-pos {
            position: absolute;
            top: 37%;
            left: 5%;
            width: 90%;
            -webkit-transition: all 500ms 0s ease;
            transition: all 500ms 0s ease;
            animation: catchFadeIn 2s ease 0s 1 normal;
            -webkit-animation: catchFadeIn 2s ease 0s 1 normal;
        }

        /*content*/

        .content-wrap {
            max-width: 1230px;
            width: 100%;
            margin: 0 auto;
            padding: 90px 15px 0 15px;
            position: relative;
            z-index: 20;
            box-sizing: border-box;
        }

        .navi{
            margin: 0 0 5vh 0;
        }

        .navi ul{
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            margin: 0 -6px -12px -6px;
            justify-content: center;
        }

        .navi ul li{
            max-width: 299px;
            width: calc( 100% / 2);
            padding: 0 6px;
            margin-bottom: 12px;
            box-sizing: border-box;
        }

        .info-wrap{
            background: url(../images/common/bg.png);
            padding: 1em;
            margin: 0 0 5vh 0;
            display: flex;
            flex-wrap: wrap;
            font-size: 0.9em;
            align-items: center;
        }

        .info-wrap .title{
            width: 100%;
            text-align: center;
            font-family: "Oswald", sans-serif;
            font-optical-sizing: auto;
            color: #e84472;
        }

        .info-wrap .list{
            flex: auto;
            width: 100%;
            border-left: none;
            border-top: 1px solid #e84472;
            padding-left: 0;
            padding-top: 1em;
        }

        .info-wrap .list dl dd{
            width: 20%;
            font-family: "Oswald", sans-serif;
            font-optical-sizing: auto;
        }

        .info-wrap .list dl dt{
            width: 80%;
        }

        section {
            background-image:
                url("../images/common/frame_top_l.png"),
                url("../images/common/frame_top_r.png"),
                url("../images/common/frame_bottom_l.png"),
                url("../images/common/frame_bottom_r.png"),
                url("../images/common/frame_top_c.png"),
                url("../images/common/frame_middle_l.png"),
                url("../images/common/frame_middle_r.png"),
                url("../images/common/frame_bottom_c.png"),
                url("../images/common/frame_middle_c.png");
            background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, repeat-y, repeat-y, repeat-x, repeat;
            background-position: left top, right top, left bottom, right bottom, center top, left top, right top, center bottom, left top;
            background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px;
            padding: 5vh 20px;
            box-sizing: border-box;
            position: relative;
            margin: 7vh 0 5vh 0;
        }

        /*anime*/

        .anime-wrap{
            margin-top: 4vh;
        }

        .anime-wrap ul{
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            margin: 0 -2%;
            justify-content: center;
        }

        .anime-wrap ul li{
            width: calc( 100% / 2 );
            padding: 0 2%;
            box-sizing: border-box;
        }

        /*roguo*/

        .obi{
            width: 100%;
            margin: 4vh auto;
        }

        .book-wrap{
            margin: 4vh 0
        }

        .book-wrap ul{
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            margin: 0 -2% -3vh -2%;
            justify-content: center;
        }

        .book-wrap ul li{
            width: calc( 100% / 2 );
            padding: 0 2%;
            margin-bottom: 3vh;
            box-sizing: border-box;
        }

        /*event*/

.event-wrap{
    display: flex;
    flex-wrap: wrap;
    margin-top: 5vh;
    align-items: center;
    border-left: none;
}

.event-wrap .cover{
    width: 50%;
    order: 0;
    margin: 0 auto 3vh auto;
}

.event-wrap .details{
    width: 100%;
    box-sizing: border-box;
    padding-left: 0;
}

/*goods*/

.goods-wrap{
            margin: 4vh 0
        }

        .goods-wrap ul{
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            margin: 0 -2% -3vh -2%;
            justify-content: center;
        }

        .goods-wrap ul li{
            width: calc( 100% / 2 );
            padding: 0 2%;
            margin-bottom: 3vh;
            box-sizing: border-box;
        }

/*print*/

.print-wrap{
            margin: 4vh 0
        }

        .print-wrap ul{
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            margin: 0 -2% -3vh -2%;
            justify-content: center;
        }

        .print-wrap ul li{
            width: calc( 100% / 2 );
            padding: 0 2%;
            margin-bottom: 3vh;
            box-sizing: border-box;
        }

        .print-wrap ul li:last-child{
            width: 65%;
        }


/*shopfair*/

.card-wrap{
            margin: 4vh 0
        }

        .card-wrap ul{
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            margin: 0 -1.5% -3% -1.5%;
            justify-content: center;
        }

        .card-wrap ul li{
            width: calc( 100% / 3 );
            padding: 0 1.5%;
            margin-bottom: 3%;
            box-sizing: border-box;
        }

        .shoplist-wrap div{
            width: 100%;
        }

    /*footer*/

            footer {
                padding: 5vh 15px;
                box-sizing: border-box;
                font-size: 0.9em;
                text-align: left;
                background: #4d85c5;
                position: relative;
            }

            .footer-wrap {
                display: flex;
                flex-wrap: wrap;
                flex-direction: column;
                width: 100%;
                margin: 0 auto;
            }

            .footer-wrap .fw01 {
                width: 100%;
            }

            .footer-wrap .fw02 {
                width: 100%;
                text-align: left;
            }

            .sns ul {
                list-style: none;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                margin: 3vh 0;
            }


}