@charset "utf-8";

.ttl1,
.ttl1.sale,
.ttl1.buy {
    display: block;
    position: relative;
    margin: 0 auto 2rem;
    padding: 0 1rem;
    width: 100%;
    height: 3rem;
    line-height: 3rem;
    background-color: #f0f0f0
}

.ttl1.sale {
    color: #fff;
    background-color: #ff3d98
}

.ttl1.buy {
    color: #fff;
    background-color: #6283c2
}

.ttl1::before,
.ttl1.sale::before,
.ttl1.buy::before,
.ttl1::after,
.ttl1.sale::after,
.ttl1.buy::after {
    content: '';
    position: absolute
}

.ttl1::before,
.ttl1.sale::before,
.ttl1.buy::before {
    top: 100%;
    left: 0;
    border-width: 0 1rem 1rem 0;
    border-style: solid;
    border-color: transparent;
    border-right-color: #ccc
}

.ttl1.sale::before {
    border-right-color: #ff0f4b
}

.ttl1.buy::before {
    border-right-color: #1a4472
}

.ttl1::after,
.ttl1.sale::after,
.ttl1.buy::after {
    top: 0;
    right: 0;
    z-index: 2;
    border-width: 1.5rem 2rem;
    border-style: solid;
    border-color: transparent;
    border-right-color: #fff
}

.ttl2 {
    display: block;
    margin: 0 auto 2rem;
    padding: .2rem 0 .1rem;
    width: 100%;
    line-height: 2rem;
    color: #ff7fbf;
    text-align: left;
    text-indent: 1rem;
    border-left: 10px solid #ff7fbf;
    border-bottom: 2px solid #ff7fbf
}

.ttl3 {
    display: block;
    margin: 0 auto 2rem;
    padding: .2rem 0;
    width: 100%;
    line-height: 2rem;
    color: #fff;
    text-align: left;
    text-indent: 1rem;
    background-color: #ec0714
}

.ttl4 {
    display: block;
    position: relative;
    margin: 0 auto 1rem;
    padding-top: .4rem;
    width: 90%;
    height: 60px;
    color: #fff;
    font-size: 2rem;
    font-family: sans-serif;
    text-align: center;
    background: linear-gradient(to right, #ff3d98, #ff0f4b)
}

.ttl4.buy {
    background: linear-gradient(to right, #6283C2, #1A4472)
}

.ttl4:before,
.ttl4.buy:before {
    position: absolute;
    top: 0;
    display: block;
    height: 48px;
    content: '';
    border: 30px solid #ff3d98
}

.ttl4.buy::before {
    border: 30px solid #6283c2
}

.ttl4:after,
.ttl4.buy:after {
    position: absolute;
    top: 0;
    display: block;
    height: 48px;
    content: '';
    border: 30px solid #ff0f4b
}

.ttl4.buy::after {
    border: 30px solid #1a4472
}

.ttl4:before,
.ttl4.buy:before {
    left: -40px;
    border-left-width: 15px;
    border-left-color: transparent
}

.ttl4:after,
.ttl4.buy:after {
    right: -40px;
    border-right-width: 15px;
    border-right-color: transparent
}

.ttl4+p,
.ttl4.buy+p {
    display: block;
    padding: 1rem 2rem 2rem;
    color: #ff0f4b;
    font-size: 1.7rem;
    text-align: center
}

.ttl4.buy+p {
    color: #1a4472
}

@media screen and (min-width:0) and (max-width:960px) {
    .ttl4 {
        padding-top: .7rem;
        font-size: 1.8rem;
        width: 90%
    }

    .ttl4 span {
        text-indent: 2rem
    }

    .ttl4+p,
    .ttl4.buy+p {
        font-size: 1.4rem
    }
}

@media screen and (min-width:0) and (max-width:480px) {
    .ttl4 {
        padding-top: .7rem;
        font-size: 1.6rem;
        width: 85.1%;
        height: 50px
    }

    .ttl4:before,
    .ttl4.buy:before,
    .ttl4:after,
    .ttl4.buy:after {
        height: 38px;
        border: 25px solid #ff3d98
    }

    .ttl4.buy:before,
    .ttl4.buy:after {
        border: 25px solid #6283c2
    }

    .ttl4:after,
    .ttl4.buy:after {
        height: 38px;
        border: 25px solid #ff0f4b
    }

    .ttl4.buy:after {
        border: 25px solid #1a4472
    }

    .ttl4:before,
    .ttl4.buy:before {
        left: -30px;
        border-left-width: 10px;
        border-left-color: transparent
    }

    .ttl4:after,
    .ttl4.buy:after {
        right: -30px;
        border-right-width: 10px;
        border-right-color: transparent
    }

    .ttl4+p,
    .ttl4.buy+p {
        padding: 0 1rem 2rem;
        text-align: left
    }
}

.ttl5 {
    display: block;
    position: relative;
    margin: 0 auto 1rem;
    width: 100%;
    color: #ff0f87;
    font-size: 2rem;
    font-family: sans-serif
}

.ttl5 span.heading {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 3.5rem;
    line-height: 3.5rem;
    -moz-border-radius: .3rem;
    -webkit-border-radius: .3rem;
    border-radius: .3rem;
    border: 1px solid #ff0f87;
    background-color: #fff2f6
}

.ttl5 .heading .caption {
    position: absolute;
    right: 0;
    top: 0;
    height: 3.4rem;
    line-height: 3.4rem;
    padding-left: 2rem;
    padding-right: 2rem;
    color: #fff;
    background: linear-gradient(to right, #ff0f87, #ff0f4b);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ttl5 .heading .caption:before {
    display: block;
    content: ' ';
    width: 0;
    height: 0;
    overflow: hidden;
    position: absolute;
    right: 99.9%;
    top: 0;
    border: 0 solid transparent;
    border-width: 3.4rem 1.75rem 0 0;
    border-right-color: #ff0f87
}

.ttl5 .heading .caption img {
    width: 75%;
    filter: brightness(15);
}

.ttl5 .heading .title {
    float: left;
    padding-left: 1.5rem
}

.ttl5+p {
    display: block;
    padding: 2rem 1rem;
    color: #ff0f87;
    font-size: 1.4rem;
    text-align: center
}

@media screen and (min-width:481px) and (max-width:960px) {

    .ttl5,
    .ttl5+p {
        font-size: 1.3rem
    }
}

@media screen and (min-width:0px) and (max-width:480px) {

    .ttl5,
    .ttl5+p {
        font-size: 1.2rem
    }

    .ttl5 .heading .title {
        padding-left: 1rem
    }

    .ttl5 .heading .caption {
        padding-left: .5rem;
        padding-right: 1rem
    }

    .ttl5+p {
        padding: 1rem;
        text-align: left
    }
}

.ttl6 {
    display: block;
    margin: 0 auto 2rem;
    padding: .4rem 1rem;
    width: 100%;
    font-size: 1.4rem;
    color: #fff;
    text-align: left;
    background-color: #ec0714;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px
}

.tc6-1 {
    margin: 0 auto 1rem;
    padding: .3rem 1rem .4rem;
    font-size: .8rem
}

.ttl7 {
    position: relative;
    display: block;
    padding: .25em 0 .7rem;
    font-size: 1.1rem;
    text-indent: .5rem;
    color: #333
}

.ttl7:after {
    content: "";
    display: block;
    height: 4px;
    background: -webkit-linear-gradient(to right, #e60014, transparent);
    background: linear-gradient(to right, #e60014, transparent)
}

.ttl8 {
    position: relative;
    padding: 1rem .5rem
}

.ttl8:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    content: '';
    background-image: -webkit-gradient(linear, left top, right top, from(#fa709a), to(#fee140));
    background-image: -webkit-linear-gradient(left, #fa709a 0%, #fee140 100%);
    background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%)
}

.ttl10 {
    display: block;
    margin: 0 auto 2rem;
    width: 100%;
    font-size: 1.7rem;
    color: #000;
    text-align: left
}

.tc10-1 {
    margin: 0 auto;
    padding: 1rem;
    color: #333;
    font-size: 1.7rem
}

.tc10-1>img {
    margin-right: 1rem;
    width: 1.8rem;
    vertical-align: middle
}

.tc10-1>p {
    margin-left: 2rem;
    font-size: 1.1rem;
    font-weight: 400;
    border-bottom: 1px solid #1d76be
}

.tc10-1>span {
    display: block;
    margin-left: 2rem;
    font-size: 1.1rem;
    font-weight: 400;
    border-bottom: 1px solid #1d76be
}

.ttl11 {
    position: relative;
    display: block;
    width: 100%;
    font-size: 2rem;
    border-bottom: 3px solid #ccc
}

.ttl11::after {
    position: absolute;
    display: block;
    width: 20%;
    content: " ";
    border-bottom: 3px solid #ff0f87
}

.ttl11::before {
    position: absolute;
    display: inline-block;
    top: calc(50% - 1.5rem);
    left: -1.2rem;
    content: " ";
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    border-radius: 50%;
    background: #ff0f87;
    text-align: center
}

.ttl11 span {
    position: relative;
    display: inline-block;
    width: 2rem;
    height: 2rem;
    color: #fff
}

.btn1 {
    display: block;
    height: 2.5rem;
    line-height: 2rem;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    border: .2rem solid #fff;
    border-radius: .5rem;
    -webkit-border-radius: .5rem;
    -moz-border-radius: .5rem;
    background-color: transparent
}

.btn1:hover {
    background-color: rgba(255, 255, 255, .3)
}

.btn2 {
    display: block;
    color: #1da1f2;
    font-size: .6rem;
    text-align: center;
    line-height: 1.2rem;
    border: 1px solid #1da1f2;
    border-radius: .3rem;
    -webkit-border-radius: .3rem;
    -moz-border-radius: .3rem;
    background-color: transparent
}

.btn2:hover {
    background-color: #afdefc
}

.bc2-1 {
    color: #fff;
    padding: 0 1rem;
    height: 1.4rem;
    line-height: 1.2rem;
    font-size: .8rem;
    border: 1px solid #fff
}

.bc2-1:hover {
    background-color: rgba(255, 255, 255, .5)
}

.bc2-2 {
    padding: .2rem 2rem;
    height: 3.5rem;
    line-height: 2.6rem;
    font-size: 1.4rem;
    color: #ff0f87;
    border-radius: 4rem;
    -webkit-border-radius: 4rem;
    -moz-border-radius: 4rem;
    border: 2px solid #ff0f87
}

.bc2-2:hover {
    color: #fff;
    background-color: #ff0f87;
    transition: .3s
}

.bc2-3 {
    color: #ff0f87;
    font-size: 1.1rem;
    line-height: 2.5rem;
    border: 2px solid #ff0f87;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem
}

.bc2-3:hover {
    color: #fff;
    background-color: #ff0f87
}

.bc2-4 {
    padding: .2rem 2rem;
    height: 3.5rem;
    line-height: 2.6rem;
    font-size: 1.4rem;
    color: #fff;
    border-radius: 4rem;
    -webkit-border-radius: 4rem;
    -moz-border-radius: 4rem;
    border: 2px solid #ff0f87;
    background-color: #ff0f87
}

.bc2-4:hover {
    color: #ff0f87;
    background-color: #fff;
    transition: .3s
}

.btn3 {
    display: block;
    padding: .5rem;
    width: 180px;
    text-align: center;
    font-size: 1.3rem;
    color: #fff;
    background-color: #ec0714;
    border-radius: .3rem;
    -webkit-border-radius: .3rem;
    -moz-border-radius: .3rem
}

.btn3:hover {
    background-color: #3166b6
}

.btn3.bc3-1 {
    background-color: #ccc
}

.btn3.bc3-1:hover {
    background-color: #3166b6
}

.btn11 {
    display: block;
    padding: .4rem 2rem .6rem;
    font-size: .8rem;
    text-align: center;
    color: #fff;
    background: red;
    border-radius: .5rem;
    -webkit-border-radius: .5rem;
    -moz-border-radius: .5rem
}

.btn11:hover {
    background: #f99
}

.btn11.bc11-1 {
    color: #333;
    background-color: #fff;
    border: 1px solid #aaa
}

.btn11.bc11-1:hover {
    background: #f99
}

.cmb1 {
    display: inline-block;
    margin: 0;
    padding: .5rem 3.5rem .5rem 1rem;
    width: 100%;
    font: inherit;
    font-size: 1.2rem;
    line-height: 2rem;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: thin solid red;
    border-radius: .4rem;
    background-color: #fff;
    background-image: linear-gradient(45deg, transparent 50%, red 50%), linear-gradient(135deg, red 50%, transparent 50%), linear-gradient(to right, #f99, #f99);
    background-position: calc(100% - 20px) calc(1.2rem + 0.2rem), calc(100% - 15px) calc(1.2rem + 0.2rem), 100% 0;
    background-size: .5rem .5rem, .5rem .5rem, 2.5em 2.5em;
    background-repeat: no-repeat
}

.cmb1:focus {
    background-image: linear-gradient(45deg, white 50%, transparent 50%), linear-gradient(135deg, transparent 50%, white 50%), linear-gradient(to right, gray, gray);
    background-position: calc(100% - 15px) 1.2em, calc(100% - 20px) 1.2em, 100% 0;
    background-size: .5rem .5rem, .5rem .5rem, 2.5em 2.5em;
    background-repeat: no-repeat;
    border-color: grey;
    outline: 0
}

div.loading {
    display: none;
    float: right;
    margin-right: .5rem;
    color: #777
}

@-webkit-keyframes scale {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }

    45% {
        -webkit-transform: scale(.1);
        transform: scale(.1);
        opacity: .7
    }

    80% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@keyframes scale {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }

    45% {
        -webkit-transform: scale(.1);
        transform: scale(.1);
        opacity: .7
    }

    80% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

.loading>div:nth-child(1) {
    margin-left: 1rem;
    -webkit-animation: scale 1.5s -.4s infinite cubic-bezier(.2, .68, .18, 1.08);
    animation: scale 1.5s -.4s infinite cubic-bezier(.2, .68, .18, 1.08)
}

.loading>div:nth-child(2) {
    -webkit-animation: scale 1.5s -.3s infinite cubic-bezier(.2, .68, .18, 1.08);
    animation: scale 1.5s -.3s infinite cubic-bezier(.2, .68, .18, 1.08)
}

.loading>div:nth-child(3) {
    -webkit-animation: scale 1.5s -.2s infinite cubic-bezier(.2, .68, .18, 1.08);
    animation: scale 1.5s -.2s infinite cubic-bezier(.2, .68, .18, 1.08)
}

.loading>div:nth-child(4) {
    -webkit-animation: scale 1.5s -.1s infinite cubic-bezier(.2, .68, .18, 1.08);
    animation: scale 1.5s -.1s infinite cubic-bezier(.2, .68, .18, 1.08)
}

.loading>div:nth-child(5) {
    -webkit-animation: scale 1.5s 0s infinite cubic-bezier(.2, .68, .18, 1.08);
    animation: scale 1.5s 0s infinite cubic-bezier(.2, .68, .18, 1.08)
}

.loading>div {
    background-color: #aaa;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: inline-block
}

div.frame.error {
    width: 100%
}

div.frame.error h1,
div.frame.error div.section {
    margin: 0 auto;
    width: calc(100% - 4rem)
}

div.frame.error div.section {
    font-size: 1.5rem;
    color: #999
}

div.frame.news.imp1 {
    margin: 0 auto .5rem;
    width: 100%;
    font-size: .9rem
}

div.frame.news.imp1 h2,
div.frame.news.imp1 div.section {
    margin: 0 auto;
    width: calc(100% - 4rem)
}

div.frame.news.imp1 h2>a.back_number {
    float: right;
    margin-top: .2rem;
    margin-right: 1rem;
    height: 1.7rem;
    line-height: 1.5rem;
    width: 8rem;
    font-size: .7rem;
    font-weight: 400;
    text-align: center;
    text-indent: 0;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 10px
}

div.frame.news.imp1 h2>a.back_number:hover {
    color: red;
    background: #fff
}

div.frame.news.imp1 div.section {
    border: 1px solid #ec0714;
    word-break: break-all
}

div.frame.news.imp1 div.section ul {
    padding: .7rem
}

div.frame.news.imp1 div.section li {
    padding: .5rem 1rem;
    width: 100%
}

div.frame.news.imp1 div.section li>div:nth-of-type(2) a,
div.frame.news.imp1 div.section li>div:nth-of-type(2) span,
div.frame.news.imp1 div.section li>div:nth-of-type(2) p {
    display: block;
    width: 100%;
    word-wrap: break-word
}

div.frame.news.imp1 div.section li>div:nth-of-type(2) a,
div.frame.news.imp1 div.section li>div:nth-of-type(2) span {
    padding-bottom: .2rem;
    color: #ec0714;
    font-size: .9rem
}

div.frame.news.imp1 div.section li>div:nth-of-type(2) p {
    padding-top: .7rem;
    border-top: 1px solid #aaa
}

div.frame.news.gen1 {
    padding: 3rem 0 5rem;
    width: 100%;
    background-color: #eee
}

div.frame.news.gen1 h2,
div.frame.news.gen1 div.section {
    margin: 0 auto 1rem;
    width: calc(100% - 4rem);
    max-width: 1024px
}

div.frame.news.gen1 h2 {
    font-size: 2rem;
    text-align: center
}

div.frame.news.gen1 div.section ul,
div.frame.news.gen1 div.section li {
    display: block;
    padding: 1rem 0;
    width: 100%;
    color: #777;
    font-size: 1.3rem
}

div.frame.news.gen1 div.section li>div {
    float: left
}

div.frame.news.gen1 div.section li>div:nth-of-type(1) {
    width: 10rem;
    font-size: 1.3rem
}

div.frame.news.gen1 div.section li>div:nth-of-type(2) {
    width: calc(100% - 10rem)
}

div.frame.news.gen1 div.section li>div:nth-of-type(2) a,
div.frame.news.gen1 div.section li>div:nth-of-type(2) span {
    display: block;
    width: 100%;
    color: #505050
}

div.frame.news.gen1 div.section li>div:nth-of-type(2) a {
    text-decoration: underline
}

div.frame.news.gen1 div.section li>div:nth-of-type(2) p {
    display: block;
    width: 100%;
    font-size: 1.1rem;
    border-top: 1px solid #777
}

div.frame.news.gen2 {
    margin: 0 auto 10rem;
    width: calc(100% - 4rem);
    max-width: 1024px
}

div.frame.news.gen2 h1 {
    margin: 0 auto 2rem;
    width: 100%
}

div.frame.news.gen2 div.section {
    margin: 0 auto;
    width: calc(100% - 4rem)
}

div.frame.news.gen2 div.section ul,
div.frame.news.gen2 div.section li {
    display: block;
    width: 100%
}

div.frame.news.gen2 div.section li span,
div.frame.news.gen2 div.section li a,
div.frame.news.gen2 div.section li p {
    display: block;
    margin-top: .5rem;
    font-size: 1.2rem;
    line-height: 1.6rem
}

div.frame.news.gen2 div.section li>div:nth-of-type(1) {
    float: left;
    width: 10rem
}

div.frame.news.gen2 div.section li>div:nth-of-type(2) {
    float: left;
    margin-bottom: 2rem;
    width: calc(100% - 10rem);
    overflow: hidden
}

div.frame.news.gen2 div.section li>div:nth-of-type(2)>a,
div.frame.news.gen2 div.section li>div:nth-of-type(2)>span {
    display: block;
    margin: .5rem 0;
    padding-bottom: .5rem;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 1px solid #ff0f87
}

div.frame.news.gen2 div.section li>div:nth-of-type(2)>p {
    display: block;
    padding: 1rem 0;
    width: 100%;
    overflow: hidden;
    word-break: break-all
}

div.frame.banners,
div.frame.banners div.section,
div.frame.banners div.section ul,
div.frame.banners div.section li,
div.frame.banners div.section li>a,
div.frame.banners div.section li>span,
div.frame.banners div.section li img {
    display: block;
    width: 100%
}

div.frame.banners {
    margin: 0 auto 1rem
}

div.frame.banners div.section li {
    margin: 0 auto .2rem
}

@media screen and (min-width:481px) and (max-width:960px) {
    div.frame.banners {
        margin: 0 auto .5rem
    }
}

div.frame.banners.sp1 div.section {
    margin: .7rem auto 0;
    width: 100%
}

div.frame.banners.sp1 div.section li {
    float: left;
    width: 50%;
    padding: .7rem 2rem
}

div.frame.banners.sp1 div.section li img {
    display: block;
    width: 100%
}

div.frame.banners.sp1 div.section li:nth-child(2n+1):last-child {
    width: 100%
}

div.frame.banners.sp1 div.section li img.normal {
    display: block
}

div.frame.banners.sp1 div.section li img.wide {
    display: none
}

div.frame.banners.sp1 div.section li:nth-child(2n+1):last-child img.normal {
    display: none
}

div.frame.banners.sp1 div.section li:nth-child(2n+1):last-child img.wide {
    display: block
}

@media screen and (min-width:0px) and (max-width:960px) {
    div.frame.banners.sp1 div.section li {
        width: 100%
    }

    div.frame.banners.sp1 div.section li:nth-child(2n+1):last-child img.normal {
        display: block
    }

    div.frame.banners.sp1 div.section li:nth-child(2n+1):last-child img.wide {
        display: none
    }
}

div.frame.banners.kv1 .swiper-container {
    text-align: center
}

div.frame.banners.kv1 .swiper-container .swiper-slide img {
    width: 90%;
    height: auto;
    margin: 0 auto;
}

@media screen and (min-width: 768px) {
    div.frame.banners.kv1 .swiper-container .swiper-slide img {
        width: 90%;
    }
}

@media screen and (min-width:0px) and (max-width:960px) {

    div.frame.banners.kv1 .swiper-container-thumbs,
    div.frame.banners.kv1 .swiper-button-prev,
    div.frame.banners.kv1 .swiper-button-next {
        display: none
    }
}

div.frame.banners.cb1 {
    margin: 0 auto 6rem;
    width: 100%
}

div.frame.banners.cb1 div.section {
    margin: 0 auto;
    width: calc(100% - 4rem);
    max-width: 1024px
}

div.frame.banners.cb1 li,
div.frame.banners.cb1 li a,
div.frame.banners.cb1 li img {
    width: 100%
}

div.frame.banners.cb1 li:not(:last-of-type) {
    margin-bottom: 1rem
}

@media screen and (min-width:481px) and (max-width:960px) {
    div.frame.banners.cb1 li {
        width: calc(100% - 2rem)
    }
}

@media screen and (min-width:0px) and (max-width:480px) {
    div.frame.banners.cb1 li {
        width: 100%
    }
}

div[class^='frame banners cbb'] {
    margin: 0 auto 6rem;
    width: 100%
}

div[class^='frame banners cbb'] div.section {
    margin: 0 auto;
    width: calc(100% - 4rem)
}

div[class^='frame banners cbb'] div.section li {
    float: left
}

div[class^='frame banners cbb'] div.section li a,
div[class^='frame banners cbb'] div.section li img {
    width: 100%
}

div.frame.banners.cbb1 div.section li {
    width: 100%
}

div.frame.banners.cbb2 div.section li {
    width: 50%
}

div.frame.banners.cbb3 div.section li {
    width: 33%
}

div.frame.banners.cbb4 div.section li {
    width: 25%;
    border: 1px solid red
}

div.frame.banners.cb2 div.section ul li {
    float: left;
    display: block;
    padding: .2rem;
    width: 50%
}

div.frame.banners.cb2.sp {
    display: none
}

@media screen and (min-width:0px) and (max-width:960px) {
    div.frame.banners.cb2.sp {
        display: block
    }
}

div.frame.banners.cb3 div.section li {
    float: left;
    padding: .2rem;
    width: 25%
}

div.frame.snses.tw1 {
    width: 100%
}

div.frame.snses.tw1 div.section {
    position: relative;
    width: 100%;
    height: 17rem;
    background-color: #eee
}

div.frame.snses.tw1 .swiper-container {
    margin: 0 auto;
    width: calc(100% - 10rem);
    height: calc(100% - 5rem)
}

div.frame.snses.tw1 .swiper-slide {
    padding: 1rem 2rem;
    height: 100%;
    line-height: 1rem;
    font-size: .8rem;
    background-color: #fff
}

div.frame.snses.tw1 .swiper-button-prev {
    left: -100%
}

div.frame.snses.tw1 .swiper-button-next {
    right: -100%
}

div.frame.snses.tw1 .new-swiper-button-prev {
    position: absolute;
    top: calc(50% - 1.5rem);
    left: 2rem;
    width: 3rem;
    height: 3rem
}

div.frame.snses.tw1 .new-swiper-button-prev::before {
    position: absolute;
    top: 0;
    width: 2rem;
    height: 2rem;
    box-sizing: border-box;
    border: 2px solid #1da1f2;
    border-radius: 50%;
    -webkit-border-radius: 50%
}

div.frame.snses.tw1 .new-swiper-button-prev::after {
    position: absolute;
    top: .5rem;
    left: .2rem;
    width: .5rem;
    height: .5rem;
    box-sizing: border-box;
    border: .5rem solid transparent;
    border-right: .5rem solid #1da1f2
}

div.frame.snses.tw1 .new-swiper-button-next {
    position: absolute;
    top: calc(50% - 1.5rem);
    right: 1rem;
    width: 3rem;
    height: 3rem
}

div.frame.snses.tw1 .new-swiper-button-next::before {
    position: absolute;
    top: 0;
    width: 2rem;
    height: 2rem;
    box-sizing: border-box;
    border: 2px solid #1da1f2;
    border-radius: 50%;
    -webkit-border-radius: 50%
}

div.frame.snses.tw1 .new-swiper-button-next::after {
    position: absolute;
    top: .5rem;
    left: .75rem;
    width: .5rem;
    height: .5rem;
    box-sizing: border-box;
    border: .5rem solid transparent;
    border-left: .5rem solid #1da1f2
}

div.frame.snses.tw1 .swiper-slide>div {
    width: 100%
}

div.frame.snses.tw1 .swiper-slide>div:nth-of-type(1) {
    display: flex;
    margin-bottom: .3rem;
    height: 2rem;
    vertical-align: top
}

div.frame.snses.tw1 .swiper-slide>div:nth-of-type(1)>div:nth-of-type(1) {
    position: relative;
    float: left;
    overflow: hidden;
    width: 40px;
    height: 40px;
    border-radius: 50%
}

div.frame.snses.tw1 .swiper-slide>div:nth-of-type(1)>div:nth-of-type(1) img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: auto;
    height: 100%
}

div.frame.snses.tw1 .swiper-slide>div:nth-of-type(1)>div:nth-of-type(2) {
    margin-left: 1rem;
    flex-basis: 80%;
    overflow: hidden;
    word-break: break-all
}

div.frame.snses.tw1 .swiper-slide>div:nth-of-type(2) {
    margin-bottom: .5rem;
    color: #1da1f2;
    font-size: .7rem;
    text-align: right
}

div.frame.snses.tw1 .swiper-slide>div:nth-of-type(3) {
    margin-bottom: 1rem;
    height: 4rem;
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis
}

div.frame.snses.tw1 .swiper-slide>div:nth-of-type(4) {
    display: flex
}

div.frame.snses.tw1 .swiper-slide>div:nth-of-type(4)>div:nth-of-type(1) {
    flex-basis: 60%
}

div.frame.snses.tw1 .swiper-slide>div:nth-of-type(4)>div:nth-of-type(2) {
    flex-basis: 40%;
    text-align: right
}

div.frame.snses.tw1 new-swiper-button-prev {
    font-size: .8rem
}

@media screen and (min-width:0px) and (max-width:960px) {
    div.frame.snses.tw1 .swiper-container {
        width: calc(100% - 4rem)
    }

    div.frame.snses.tw1 .new-swiper-button-prev,
    div.frame.snses.tw1 .new-swiper-button-next {
        display: none
    }
}

div.frame.banners.card1 {
    margin: 2rem auto 5rem;
    width: calc(100% - 4rem);
    max-width: 1024px
}

div.frame.banners.card1 div.section {
    margin: 0 auto;
    padding: 0;
    width: 100%
}

div.frame.banners.card1 div.section li {
    float: left;
    width: 33.3%;
    padding: .2rem
}

div.frame.banners.card1 div.section li img {
    display: block;
    width: 100%
}

div.frame.banners.card1 div.section li img:hover {
    box-shadow: 0 0 10px 5px #c9c9c9;
    transform: translateY(-1px);
    transition: .3s
}

@media screen and (min-width:481px) and (max-width:960px) {
    div.frame.banners.card1 {
        margin: 3rem auto 5rem
    }

    div.frame.banners.card1 div.section {
        padding: 0 2rem
    }
}

@media screen and (min-width:0px) and (max-width:480px) {
    div.frame.banners.card1 {
        margin: 2rem auto 5rem
    }

    div.frame.banners.card1 div.section {
        padding: 0
    }

    div.frame.banners.card1 div.section li {
        width: 50%
    }
}

div.frame.events {
    margin: 0 auto 5rem;
    width: calc(100% - 4rem);
    max-width: 1024px
}

@media screen and (min-width:0px) and (max-width:960px) {
    div.frame.events {
        margin: 0 auto 5rem
    }
}

div.frame.articles {
    margin: 0 auto 10rem;
    width: calc(100% - 4rem);
    max-width: 1024px
}

div.frame.articles>p {
    margin: 1rem 0
}

div.frame.articles div.section.swiper {
    position: relative;
    margin: 1rem auto;
    width: 100%;
    height: 27rem;
    background-color: #eee
}

div.frame.articles div.section.swiper .swiper-container {
    margin: 2rem auto;
    width: calc(100% - 6rem);
    height: calc(100% - 4rem)
}

div.frame.articles div.section.swiper .swiper-slide {
    width: 100%;
    height: 100%;
    line-height: 1rem;
    background-color: #fff;
    border: 1px solid #ccc
}

div.frame.articles div.section.swiper .swiper-slide:hover {
    opacity: .7
}

div.frame.articles div.section.swiper .swiper-button-prev {
    left: -100%
}

div.frame.articles div.section.swiper .swiper-button-next {
    right: -100%
}

div.frame.articles div.section.swiper .new-swiper-button-prev {
    position: absolute;
    top: calc(50% - 1.5rem);
    left: .5rem;
    width: 3rem;
    height: 3rem
}

div.frame.articles div.section.swiper .new-swiper-button-prev::before {
    position: absolute;
    top: 0;
    width: 2rem;
    height: 2rem;
    border: 2px solid #1da1f2;
    box-sizing: border-box;
    border-radius: 50%;
    -webkit-border-radius: 50%
}

div.frame.articles div.section.swiper .new-swiper-button-prev::after {
    position: absolute;
    top: .5rem;
    left: .2rem;
    width: .5rem;
    height: .5rem;
    box-sizing: border-box;
    border: .5rem solid transparent;
    border-right: .5rem solid #1da1f2
}

div.frame.articles div.section.swiper .new-swiper-button-next {
    position: absolute;
    top: calc(50% - 1.5rem);
    right: -.5rem;
    width: 3rem;
    height: 3rem
}

div.frame.articles div.section.swiper .new-swiper-button-next::before {
    position: absolute;
    top: 0;
    width: 2rem;
    height: 2rem;
    border: 2px solid #1da1f2;
    box-sizing: border-box;
    border-radius: 50%;
    -webkit-border-radius: 50%
}

div.frame.articles div.section.swiper .new-swiper-button-next::after {
    position: absolute;
    top: .5rem;
    left: .75rem;
    width: .5rem;
    height: .5rem;
    box-sizing: border-box;
    border: .5rem solid transparent;
    border-left: .5rem solid #1da1f2
}

div.frame.articles div.section.swiper .swiper-slide>div div.frame.articles div.section.swiper .swiper-slide>div>a {
    width: 100%;
    height: 100%
}

div.frame.articles div.section.swiper .swiper-slide>div>div,
div.frame.articles div.section.swiper .swiper-slide>div>a>div {
    width: 100%
}

div.frame.articles div.section.swiper .swiper-slide>div>div:nth-of-type(1)>img,
div.frame.articles div.section.swiper .swiper-slide>div>a>div:nth-of-type(1)>img {
    width: 100%
}

div.frame.articles div.section.swiper .swiper-slide>div>div:nth-of-type(2),
div.frame.articles div.section.swiper .swiper-slide>div>a>div:nth-of-type(2) {
    padding: .5rem 1rem 0
}

div.frame.articles div.section.swiper .swiper-slide>div>div:nth-of-type(2) p:first-of-type,
div.frame.articles div.section.swiper .swiper-slide>div>a>div:nth-of-type(2) p:first-of-type {
    display: block;
    float: left;
    margin-right: 1rem;
    padding: .1rem .5rem;
    width: 6rem;
    font-size: .9rem;
    text-align: center;
    color: #fff;
    background-color: #aaa;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px
}

div.frame.articles div.section.swiper .swiper-slide>div>div:nth-of-type(2) p:nth-of-type(2),
div.frame.articles div.section.swiper .swiper-slide>div>a>div:nth-of-type(2) p:nth-of-type(2) {
    display: block;
    float: left;
    font-size: .8rem
}

div.frame.articles div.section.swiper .swiper-slide>div>div:nth-of-type(3),
div.frame.articles div.section.swiper .swiper-slide>div>a>div:nth-of-type(3) {
    padding: .4rem 1rem 0;
    width: 100%
}

div.frame.articles div.section.swiper .swiper-slide>div>div:nth-of-type(3) h3,
div.frame.articles div.section.swiper .swiper-slide>div>a>div:nth-of-type(3) h3 {
    margin: 0 auto;
    width: 100%;
    line-height: 1.2rem;
    height: 3.6rem;
    font-size: 1rem;
    word-wrap: break-word;
    overflow: hidden
}

div.frame.articles div.section.swiper .swiper-slide>div>div:nth-of-type(4),
div.frame.articles div.section.swiper .swiper-slide>div>a>div:nth-of-type(4) {
    padding: 1rem;
    width: 100%
}

div.frame.articles div.section.swiper .swiper-slide>div>div:nth-of-type(4) p,
div.frame.articles div.section.swiper .swiper-slide>div>a>div:nth-of-type(4) p {
    float: left;
    display: block;
    margin-top: 1rem;
    margin-right: 1rem;
    width: calc(100% - 5rem);
    font-size: 1rem;
    line-height: 1.2rem;
    max-height: 2.4rem;
    word-wrap: break-word;
    overflow: hidden
}

div.frame.articles div.section.swiper .swiper-slide>div>div:nth-of-type(4) img,
div.frame.articles div.section.swiper .swiper-slide>div>a>div:nth-of-type(4) img {
    float: right;
    display: block;
    width: 4rem;
    border-radius: 50%;
    vertical-align: top
}

div.frame.articles div.section.operation a {
    margin: 3rem auto 0;
    width: 100%;
    max-width: 24rem
}

@media screen and (min-width:0px) and (max-width:960px) {
    div.frame.articles {
        margin: 0 auto 8rem
    }

    div.frame.articles div.section.swiper .swiper-container {
        width: calc(100% - 2rem)
    }

    div.frame.articles div.section.swiper .new-swiper-button-prev,
    div.frame.articles div.section.swiper .new-swiper-button-next {
        display: none
    }

    div.frame.articles div.section.operation a {
        margin: 2rem auto 0;
        font-size: 1.2rem
    }
}

div.frame.snses.yt1 {
    margin: 0 auto 10rem;
    width: calc(100% - 4rem);
    max-width: 1024px
}

div.frame.snses.yt1>p {
    margin: 1rem 0;
    width: 100%
}

div.frame.snses.yt1 div.section.swiper {
    position: relative;
    margin: 1rem auto;
    width: 100%;
    height: 24rem;
    background-color: #eee
}

div.frame.snses.yt1 div.section.swiper .swiper-container {
    margin: 2rem auto;
    width: calc(100% - 6rem);
    height: calc(100% - 4rem)
}

div.frame.snses.yt1 div.section.swiper .swiper-slide {
    width: 100%;
    height: 100%;
    line-height: 1rem;
    background-color: #fff;
    border: 1px solid #ccc
}

div.frame.snses.yt1 div.section.swiper .swiper-slide:hover {
    opacity: .7
}

div.frame.snses.yt1 div.section.swiper .swiper-button-prev {
    left: -100%
}

div.frame.snses.yt1 div.section.swiper .swiper-button-next {
    right: -100%
}

div.frame.snses.yt1 div.section.swiper .new-swiper-button-prev {
    position: absolute;
    top: calc(50% - 1.5rem);
    left: .5rem;
    width: 3rem;
    height: 3rem
}

div.frame.snses.yt1 div.section.swiper .new-swiper-button-prev::before {
    position: absolute;
    top: 0;
    width: 2rem;
    height: 2rem;
    border: 2px solid #1da1f2;
    box-sizing: border-box;
    border-radius: 50%;
    -webkit-border-radius: 50%
}

div.frame.snses.yt1 div.section.swiper .new-swiper-button-prev::after {
    position: absolute;
    top: .5rem;
    left: .2rem;
    width: .5rem;
    height: .5rem;
    box-sizing: border-box;
    border: .5rem solid transparent;
    border-right: .5rem solid #1da1f2
}

div.frame.snses.yt1 div.section.swiper .new-swiper-button-next {
    position: absolute;
    top: calc(50% - 1.5rem);
    right: -.5rem;
    width: 3rem;
    height: 3rem
}

div.frame.snses.yt1 div.section.swiper .new-swiper-button-next::before {
    position: absolute;
    top: 0;
    width: 2rem;
    height: 2rem;
    border: 2px solid #1da1f2;
    box-sizing: border-box;
    border-radius: 50%;
    -webkit-border-radius: 50%
}

div.frame.snses.yt1 div.section.swiper .new-swiper-button-next::after {
    position: absolute;
    top: .5rem;
    left: .75rem;
    width: .5rem;
    height: .5rem;
    box-sizing: border-box;
    border: .5rem solid transparent;
    border-left: .5rem solid #1da1f2
}

div.frame.snses.yt1 div.section.swiper .swiper-slide>div div.frame.snses.yt1 div.section.swiper .swiper-slide>div>a {
    width: 100%;
    height: 100%
}

div.frame.snses.yt1 div.section.swiper .swiper-slide>div>div,
div.frame.snses.yt1 div.section.swiper .swiper-slide>div>a>div {
    width: 100%
}

div.frame.snses.yt1 div.section.swiper .swiper-slide>div>div:nth-of-type(1)>img,
div.frame.snses.yt1 div.section.swiper .swiper-slide>div>a>div:nth-of-type(1)>img {
    width: 100%;
    height: 100%
}

div.frame.snses.yt1 div.section.swiper .swiper-slide>div>div:nth-of-type(2),
div.frame.snses.yt1 div.section.swiper .swiper-slide>div>a>div:nth-of-type(2) {
    margin: 0 auto 1rem;
    width: calc(100% - 2rem)
}

div.frame.snses.yt1 div.section.swiper .swiper-slide>div>div:nth-of-type(2)>p,
div.frame.snses.yt1 div.section.swiper .swiper-slide>div>a>div:nth-of-type(2)>p {
    display: block;
    width: 100%;
    height: 2rem;
    line-height: 2rem;
    font-size: 1rem;
    text-align: right
}

div.frame.snses.yt1 div.section.swiper .swiper-slide>div>div:nth-of-type(2)>img,
div.frame.snses.yt1 div.section.swiper .swiper-slide>div>a>div:nth-of-type(2)>img {
    float: left;
    display: block;
    margin-right: 1rem;
    width: 3rem
}

div.frame.snses.yt1 div.section.swiper .swiper-slide>div>div:nth-of-type(2)>h3,
div.frame.snses.yt1 div.section.swiper .swiper-slide>div>a>div:nth-of-type(2)>h3 {
    float: left;
    display: block;
    width: calc(100% - 4rem);
    height: 1.2rem;
    line-height: 1.2rem;
    max-height: 3.8rem;
    font-size: 1rem
}

div.frame.snses.yt1 div.section.operation a {
    margin: 3rem auto 0;
    width: 100%;
    max-width: 24rem
}

@media screen and (min-width:0px) and (max-width:960px) {
    div.frame.snses.yt1 {
        margin: 0 auto 8rem
    }

    div.frame.snses.yt1 div.section.swiper .swiper-container {
        width: calc(100% - 2rem)
    }

    div.frame.snses.yt1 div.section.swiper .new-swiper-button-prev,
    div.frame.snses.yt1 div.section.swiper .new-swiper-button-next {
        display: none
    }

    div.frame.snses.yt1 div.section.operation a {
        margin: 2rem auto 0;
        font-size: 1.2rem
    }
}

div.frame.item div,
div.frame.item ul,
div.frame.item li,
div.frame.item a {
    display: block;
    box-sizing: border-box
}

div.frame.item {
    margin: 0 auto 6rem;
    padding: .5rem;
    background-color: #f6f6f6
}

div.frame.item div.section:not(.operation) {
    margin: 0 auto 3rem;
    width: 98%
}

div.frame.item div.section.operation {
    margin: 0 auto 3rem;
    width: 30%;
    min-width: 24rem
}

div.frame.item div.section div.element {
    float: left;
    margin-top: 1rem;
    padding: .5rem;
    width: 14.2%;
    background-color: #fff;
    border: 4px solid #f6f6f6
}

div.frame.item div.section div.element div.content {
    position: relative;
    margin: 0 auto 1rem;
    width: 100%
}

div.frame.item div.section div.element div.content:before {
    content: "";
    padding-top: 142%
}

div.frame.item div.section div.element div.content a {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
}

div.frame.item div.section div.element div.content a img {
    display: block;
    margin: .4rem auto;
    max-width: 100%;
    max-height: 100%
}

div.frame.item div.section div.element div.content a>div.large_image {
    position: absolute;
    z-index: 999;
    display: none;
    margin: 0 auto;
    padding: 8px 8px 2px;
    width: 350px;
    background-color: #fff;
    box-shadow: 0 0 10px #ccc;
    -moz-box-shadow: 0 0 10px #ccc;
    -webkit-box-shadow: 0 0 10px #ccc
}

div.frame.item div.section div.element div.content a>div.large_image img {
    width: 100%
}

div.frame.item div.section div.element div.content>p.condition.sale {
    position: absolute;
    top: 0;
    left: 0;
    width: 3rem
}

div.frame.item div.section div.element div.content>p.condition.sale>img {
    width: 100%
}

div.frame.item div.section div.element div.content>p.condition.play {
    position: absolute;
    right: .2rem;
    bottom: -.7rem;
    width: 3rem
}

div.frame.item div.section div.element div.content>p.condition.play.left {
    right: 42px
}

div.frame.item div.section div.element div.content>p.condition.play>img {
    width: 100%;
    opacity: .9
}

div.frame.item div.section div.element div.content>p.condition.real_img {
    position: absolute;
    right: .2rem;
    bottom: -.7rem;
    width: 3rem
}

div.frame.item div.section div.element div.content>p.condition.real_img>img {
    width: 100%;
    opacity: .9
}

div.frame.item div.section div.element div.content>a.condition.soldout {
    position: absolute;
    top: .4rem;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    background-color: rgba(255, 255, 255, .5)
}

div.frame.item div.section div.element div.content>a.condition.soldout span {
    display: inline-block;
    margin: 4rem auto;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700
}

div.frame.item div.section div.element div.description {
    margin: 0 auto .5rem;
    height: 11.5rem
}

div.frame.item div.section div.element div.description li {
    display: block;
    width: 100%;
    line-height: 1.4rem
}

div.frame.item div.section div.element div.description li:nth-of-type(1) {
    height: 7.5rem
}

div.frame.item div.section div.element div.description li:nth-of-type(1) a,
div.frame.item div.section div.element div.description li:nth-of-type(1) p {
    display: block;
    width: 100%;
    overflow: hidden;
    word-break: break-all
}

div.frame.item div.section div.element div.description li:nth-of-type(1) a {
    max-height: 3rem
}

div.frame.item div.section div.element div.description li:nth-of-type(1) p:nth-of-type(1) {
    max-height: 1.5rem
}

div.frame.item div.section div.element div.description li:nth-of-type(1) p:nth-of-type(2) {
    max-height: 3rem
}

div.frame.item div.section div.element div.description li:nth-of-type(2) {
    margin: 0 auto 1rem;
    font-size: 1.3rem;
    line-height: 1.3rem;
    height: 1.3rem;
    text-align: right
}

div.frame.item div.section div.element div.description li:nth-of-type(3) span {
    float: left;
    width: 3.5rem
}

div.frame.item div.section div.element div.description li:nth-of-type(3) div.soldout {
    width: 100%;
    text-align: center
}

div.frame.item div.section div.element div.description li:nth-of-type(3) div.selectbox {
    margin: 0 auto .5rem;
    position: relative;
    overflow: hidden;
    width: calc(100% - 4rem);
    border-radius: .2rem;
    -moz-border-radius: .2rem;
    -webkit-border-radius: .2rem;
    border: 1px solid #bbb;
    background-color: #fff
}

div.frame.item div.section div.element div.description li:nth-of-type(3) div.selectbox::before {
    position: absolute;
    top: .8em;
    right: .5em;
    width: 0;
    height: 0;
    padding: 0;
    content: '';
    border-left: .3rem solid transparent;
    border-right: .3rem solid transparent;
    border-top: .3rem solid #666;
    pointer-events: none
}

div.frame.item div.section div.element div.description li:nth-of-type(3) div.selectbox select {
    padding: .3rem 1.5rem .3rem .3rem;
    width: 100%;
    color: #666;
    cursor: pointer;
    text-overflow: ellipsis;
    font-size: 1rem;
    border: none;
    outline: none;
    background: 0 0;
    background-image: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none
}

div.frame.item div.section div.element div.description li:nth-of-type(3) div.selectbox select::-ms-expand {
    display: none
}

div.frame.item div.section div.element div.operation {
    height: 2.1rem
}

div.frame.item div.section div.element div.operation p,
div.frame.item div.section div.element div.operation a {
    width: 100%;
    padding: .3rem 0;
    color: #fff;
    font-size: .7rem;
    text-align: center;
    border-radius: .3rem;
    -webkit-border-radius: .3rem;
    -moz-border-radius: .3rem
}

div.frame.item div.section div.element div.operation p {
    background-color: #aaa
}

div.frame.item div.section div.element div.operation a {
    background-color: #1d76be
}

div.frame.item div.section div.element div.operation p img,
div.frame.item div.section div.element div.operation a img {
    width: 1.2rem;
    vertical-align: middle
}

div.frame.item.cb1 h2+p {
    display: block;
    margin: 0;
    width: calc(100% - 2rem);
    text-align: right
}

div.frame.item.cb1 h2+p>img {
    vertical-align: middle;
    width: 2rem
}

div.frame.item.cb2>p {
    display: block;
    margin: 1rem auto 0;
    width: calc(100% - 2rem);
    text-align: right
}

div.frame.item.cb2 p>img {
    vertical-align: middle;
    width: 2rem
}

div.frame.item.cb1 p>img {
    vertical-align: middle;
    width: 2rem
}

div.frame.item.cb1 p.condition_icon {
    padding-right: 1rem;
    width: 8rem;
    float: right
}

div.frame.item.wide div.section div.element {
    width: 20%
}

div.frame.item.wide div.section div.element div.content:before {
    padding-top: 71%
}

div.frame.item.cb1 div.section div.element:nth-child(n+15) {
    display: none
}

@media screen and (min-width:1281px) and (max-width:1440px) {
    div.frame.item div.section div.element {
        width: 16.6%
    }

    div.frame.item.wide div.section div.element {
        width: 20%
    }

    div.frame.item.cb1 div.section div.element:nth-child(n+13) {
        display: none
    }
}

@media screen and (min-width:1031px) and (max-width:1280px) {
    div.frame.item div.section div.element {
        width: 20%
    }

    div.frame.item.wide div.section div.element {
        width: 25%
    }

    div.frame.item.cb1 div.section div.element:nth-child(n+11) {
        display: none
    }
}

@media screen and (min-width:481px) and (max-width:1030px) {
    div.frame.item div.section div.element {
        width: 25%
    }

    div.frame.item.wide div.section div.element {
        width: 33.3%
    }

    div.frame.item.cb1 div.section div.element:nth-child(n+9) {
        display: none
    }
}

@media screen and (min-width:0px) and (max-width:480px) {
    div.frame.item div.section div.element {
        width: 33.3%
    }

    div.frame.item.wide div.section div.element {
        width: 50%
    }

    div.frame.item.cb1 div.section div.element:nth-child(n+7) {
        display: none
    }
}

div.frame.search,
div.frame.serach div.section,
div.frame.search div.section ul,
div.frame.search div.section li,
div.frame.search div.section li>a {
    clear: both;
    display: block;
    width: 100%
}

div.frame.search {
    margin: 0 auto 2rem
}

div.frame.search.ss1 div.section:not(.operation) {
    margin: 1rem auto;
    padding: 1px 2px
}

div.frame.search.ss1 div.section:not(.operation) li {
    margin-bottom: 3px;
    border-bottom: 1px solid #ccc;
    border-left: 4px solid #e60014
}

div.frame.search.ss1 div.section:not(.operation) a {
    display: block;
    position: relative;
    padding: .5rem 0 .5rem .8rem;
    padding-right: 2.5rem;
    color: #333;
    word-break: break-all
}

div.frame.search.ss1 div.section:not(.operation) p {
    line-height: 1.2rem;
    height: 2.4rem;
    overflow: hidden
}

div.frame.search.ss1 div.section:not(.operation) li:hover {
    background-color: #fce9e9
}

div.frame.search.ss1 div.section:not(.operation) a:after {
    position: absolute;
    top: calc(50% - 0.3rem);
    right: 1rem;
    width: 0;
    height: 0;
    content: '';
    border-style: solid;
    border-width: .3rem 0 .3rem .5rem;
    border-color: transparent transparent transparent #666
}

div.frame.search.ss1 div.section:not(.operation) a img {
    display: block;
    float: left;
    margin-right: .4rem;
    width: 2.2rem
}

div.frame.s_menu,
div.frame.s_menu h3,
div.frame.s_menu div.section,
div.frame.s_menu div.section ul,
div.frame.s_menu div.section li,
div.frame.s_menu div.section li>a {
    clear: both;
    display: block;
    width: 100%
}

div.frame.s_menu {
    margin: 0 auto
}

div.frame.s_menu h3 {
    margin-bottom: .5rem;
    font-size: 1.2rem;
    text-align: center
}

div.frame.s_menu div.section li {
    position: relative;
    background-color: #fff;
    border-left: 1px solid #aaa;
    border-right: 1px solid #777
}

div.frame.s_menu div.section li:first-of-type {
    border-top: 1px solid #aaa;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem
}

div.frame.s_menu div.section li:last-of-type {
    border-bottom: 1px solid #aaa;
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem
}

div.frame.s_menu div.section li:not(:last-of-type) {
    border-bottom: 1px solid #aaa
}

div.frame.s_menu div.section li:hover {
    background-color: #eee
}

div.frame.s_menu div.section li::before {
    position: absolute;
    top: calc(50% - 0.3rem);
    right: 1.5rem;
    width: .6rem;
    height: .6rem;
    content: '';
    border: 0;
    border-top: solid 2px #333;
    border-right: solid 2px #333;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

div.frame.s_menu div.section a {
    padding: 1rem 1.5rem;
    color: #333;
    font-size: .9rem;
    font-weight: 700
}

div.frame.s_ac_menu,
div.frame.s_ac_menu h3,
div.frame.s_ac_menu div.section,
div.frame.s_ac_menu div.section label,
div.frame.s_ac_menu div.section div,
div.frame.s_ac_menu div.section div a {
    display: block;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box
}

div.frame.s_ac_menu {
    position: fixed;
    top: 16rem;
    width: calc(250px - 2rem)
}

div.frame.s_ac_menu h3 {
    margin: 0 auto .5rem;
    font-size: 1.2rem;
    text-align: center
}

div.frame.s_ac_menu div.section input.ac-check {
    display: none
}

div.frame.s_ac_menu div.section label.ac-label {
    position: relative;
    padding: 1rem;
    color: #333;
    font-size: .8rem;
    font-weight: 700;
    background-color: #fff;
    border-left: 1px solid #aaa;
    border-right: 1px solid #777
}

div.frame.s_ac_menu div.section label.ac-label:first-of-type {
    border-top: 1px solid #aaa
}

div.frame.s_ac_menu div.section label.ac-label {
    border-bottom: 1px solid #aaa
}

div.frame.s_ac_menu div.section label.ac-label::before {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    width: .6rem;
    height: .6rem;
    content: '＋'
}

div.frame.s_ac_menu div.section input.ac-check:checked+label.ac-label::before {
    content: '－'
}

div.frame.s_ac_menu div.section div.ac-content {
    background-color: #eee
}

div.frame.s_ac_menu div.section input.ac-check:not(:checked)+label.ac-label+div.ac-content {
    display: none
}

div.frame.s_ac_menu div.section div.ac-content a {
    padding: 1rem;
    border-left: 1px solid #aaa;
    border-right: 1px solid #aaa;
    color: #333;
    font-size: .8rem;
    font-weight: 700
}

div.frame.s_ac_menu div.section div.ac-content a:not(:last-of-type) {
    border-bottom: 1px solid #fff
}

div.frame.s_ac_menu div.section div.ac-content a:last-of-type {
    border-bottom: 1px solid #aaa
}

@media screen and (min-width:0px) and (max-width:1280px) {
    div.frame.s_ac_menu {
        width: calc(200px - 1rem)
    }
}

div.frame.privacy {
    padding: 0 0 10rem;
    width: 100%
}

div.frame.privacy h1,
div.frame.privacy h2,
div.frame.privacy div.section {
    margin: 0 auto;
    width: calc(100vw - 4rem);
    max-width: 1024px
}

div.frame.privacy div.section {
    margin-top: 2rem;
    padding: 0 3rem 3rem;
    background-color: #f7f7f7
}

div.frame.privacy h2 {
    padding: 2rem 0 .3rem
}

div.frame.agreemant {
    padding: 0 0 10rem;
    width: 100%
}

div.frame.agreemant h1,
div.frame.agreemant h2,
div.frame.agreemant p,
div.frame.agreemant div.section {
    margin: 0 auto;
    width: calc(100% - 4rem);
    max-width: 1024px
}

div.frame.agreemant div.section {
    margin-top: 2rem;
    padding: 0 3rem 3rem;
    background-color: #f7f7f7
}

div.frame.agreemant h2 {
    padding: 2rem 0 .3rem
}

div.frame.agreemant div.section p {
    width: 100%
}

div.frame.commerce {
    padding: 0 0 10rem;
    width: 100%
}

div.frame.commerce h1,
div.frame.commerce table,
div.frame.commerce div.section {
    margin: 0 auto;
    width: calc(100% - 4rem);
    max-width: 1024px
}

div.frame.commerce table {
    margin-top: 2rem
}

div.frame.commerce table tbody {
    border: 1px solid #e4e4e4
}

div.frame.commerce table tbody th {
    padding: .7rem 1rem;
    width: 12rem;
    font-size: 1rem;
    text-align: left;
    background-color: #f7f7f7;
    border: 1px solid #e4e4e4
}

div.frame.commerce table tbody td {
    padding-left: 1rem;
    font-weight: 400
}

div.frame.entry,
div.frame.confirm,
div.frame.complete {
    margin: 0 auto;
    width: 100%
}

div.frame.entry h1,
div.frame.confirm h1,
div.frame.complete h1,
div.frame.entry div.section,
div.frame.confirm div.section,
div.frame.complete div.section {
    margin: 0 auto;
    width: calc(100% - 4rem);
    max-width: 1024px
}

div.frame.entry h1,
div.frame.confirm h1,
div.frame.complete h1 {
    margin: 0 auto 1rem
}

div.frame.entry div.section.note,
div.frame.confirm div.section.note,
div.frame.complete div.section.note {
    margin: 0 auto 2rem;
    padding: 2rem;
    background-color: #eee
}

div.frame.entry div.section.note a,
div.frame.confirm div.section.note a,
div.frame.complete div.section.note a {
    color: red;
    text-decoration: underline
}

div.frame.entry div.section.note ul {
    padding: 1rem 1rem 0
}

div.frame.entry div.section.note li {
    list-style-type: disc
}

div.frame.entry div.section.error,
div.frame.confirm div.section.error,
div.frame.complete div.section.error {
    margin: 0 auto 2rem;
    padding: 2rem;
    color: red
}

div.frame.entry div.section.content,
div.frame.confirm div.section.content,
div.frame.complete div.section.content {
    margin: 0 auto 3rem
}

div.frame.entry div.section.content dl,
div.frame.confirm div.section.content dl,
div.frame.complete div.section.content dl {
    display: flex;
    flex-wrap: wrap
}

div.frame.entry div.section.content dt,
div.frame.confirm div.section.content dt,
div.frame.complete div.section.content dt {
    padding: 1rem;
    width: 30%;
    box-sizing: border-box;
    background-image: url(/contents/block/bk_strip_gray.png);
    border-bottom: .5rem solid #fff
}

div.frame.entry div.section.content dd,
div.frame.confirm div.section.content dd,
div.frame.complete div.section.content dd {
    padding: 1rem 0 1rem 1rem;
    width: 70%;
    box-sizing: border-box;
    overflow-wrap: break-word
}

div.frame.entry div.section.operation,
div.frame.confirm div.section.operation,
div.frame.complete div.section.operation {
    margin: 0 auto 10rem;
    width: 100%
}

div.frame.entry div.section.operation p,
div.frame.confirm div.section.operation p,
div.frame.complete div.section.operation p {
    margin: 0 auto 2rem;
    width: calc(100% - 4rem)
}

div.frame.entry div.section.operation a,
div.frame.confirm div.section.operation a,
div.frame.complete div.section.operation a {
    display: block;
    margin: 0 auto;
    width: 80%;
    max-width: 20rem
}

div.frame.entry div.section.operation2,
div.frame.confirm div.section.operation2,
div.frame.complete div.section.operation2 {
    margin: 0 auto 10rem;
    width: 50%
}

div.frame.entry div.section.operation2 a,
div.frame.confirm div.section.operation2 a,
div.frame.complete div.section.operation2 a {
    width: 45%;
    max-width: 20rem
}

div.frame.entry div.section.operation2 a:nth-of-type(1),
div.frame.confirm div.section.operation2 a:nth-of-type(1),
div.frame.complete div.section.operation2 a:nth-of-type(1) {
    float: left
}

div.frame.entry div.section.operation2 a:nth-of-type(2),
div.frame.confirm div.section.operation2 a:nth-of-type(2),
div.frame.complete div.section.operation2 a:nth-of-type(2) {
    float: right
}

@media screen and (min-width:0px) and (max-width:960px) {

    div.frame.entry div.section.content dl,
    div.frame.confirm div.section.content dl,
    div.frame.complete div.section.content dl {
        flex-flow: column nowrap
    }

    div.frame.entry div.section.content dt,
    div.frame.confirm div.section.content dt,
    div.frame.complete div.section.content dt,
    div.frame.entry div.section.content dd,
    div.frame.confirm div.section.content dd,
    div.frame.complete div.section.content dd {
        width: 100%
    }

    div.frame.entry div.section.content dd,
    div.frame.confirm div.section.content dd,
    div.frame.complete div.section.content dd {
        padding: 1rem 0
    }
}

div.frame.entry input[type=text],
div.frame.entry input[type=password],
div.frame.entry input[type=email],
div.frame.entry input[type=number] {
    padding: .5rem 3rem .5rem .5rem;
    width: 100%;
    color: #666;
    text-align: left;
    border-radius: .3rem;
    -moz-border-radius: .3rem;
    -webkit-border-radius: .3rem;
    border: 1px solid #bbb;
    background-color: #fff
}

div.frame.entry textarea {
    padding: .5rem 3rem .5rem .5rem;
    width: 100%;
    color: #666;
    text-align: left;
    border-radius: .3rem;
    -moz-border-radius: .3rem;
    -webkit-border-radius: .3rem;
    border: 1px solid #bbb;
    background-color: #fff
}

div.frame.entry div.selectbox {
    position: relative;
    overflow: hidden;
    width: 100%;
    text-align: center;
    border-radius: .3rem;
    -moz-border-radius: .3rem;
    -webkit-border-radius: .3rem;
    border: 1px solid #bbb;
    background-color: #fff
}

div.frame.entry div.selectbox::before {
    position: absolute;
    top: .8em;
    right: .9em;
    width: 0;
    height: 0;
    padding: 0;
    content: '';
    border-left: .4rem solid transparent;
    border-right: .4rem solid transparent;
    border-top: .4rem solid #666;
    pointer-events: none
}

div.frame.entry div.selectbox select {
    padding: .5rem 3rem .5rem .5rem;
    width: 100%;
    color: #666;
    cursor: pointer;
    text-overflow: ellipsis;
    border: none;
    outline: none;
    background: 0 0;
    background-image: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none
}

div.frame.entry div.selectbox select::-ms-expand {
    display: none
}

div.frame.faq {
    margin: 0 auto;
    width: 100%
}

div.frame.faq h1,
div.frame.faq div.section {
    margin: 0 auto;
    width: calc(100% - 4rem);
    max-width: 1024px
}

div.frame.faq h1,
div.frame.faq h2 {
    margin: 0 auto 1rem
}

div.frame.faq h2 {
    padding: .5rem 1rem;
    font-size: 1.4rem;
    background-color: #eee
}

div.frame.faq div.section.note {
    margin: 0 auto 1rem;
    padding: 1rem
}

div.frame.faq div.section label,
div.frame.faq div.section div {
    display: block;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box
}

div.frame.faq div.section input.ac-check {
    display: none
}

div.frame.faq div.section label.ac-label {
    position: relative;
    padding: 1rem 2rem 1rem 1rem;
    color: #f39;
    font-size: 1.1rem;
    background-color: #fff;
    border: 1px solid #f39
}

div.frame.faq div.section label.ac-label::before {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    width: .6rem;
    height: .6rem;
    content: '＋'
}

div.frame.faq div.section input.ac-check:checked+label.ac-label::before {
    content: '－'
}

div.frame.faq div.section label.ac-label span {
    display: inline
}

div.frame.faq div.section label.ac-label span:nth-of-type(1) {
    position: relative;
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    color: #fff;
    line-height: 2.6rem
}

div.frame.faq div.section label.ac-label span:nth-of-type(1)::before {
    position: absolute;
    top: calc(50% - 0.45rem);
    left: 0;
    width: 1.6rem;
    height: 1.6rem;
    line-height: 1.6rem;
    content: 'Q';
    text-align: center;
    border-radius: 50%;
    background-color: #f39
}

div.frame.faq div.section label.ac-label span:nth-of-type(2) {
    margin-left: .5rem
}

div.frame.faq div.section li {
    margin-bottom: 1rem
}

div.frame.faq div.section>ul>li:last-of-type {
    margin-bottom: 3rem
}

div.frame.faq div.section input.ac-check:not(:checked)+label.ac-label+div.ac-content {
    display: none
}

div.frame.faq div.section div.ac-content {
    padding: 2rem;
    font-size: 1.1rem;
    background-color: #fcfcfc;
    border-left: 1px solid #f39;
    border-right: 1px solid #f39;
    border-bottom: 1px solid #f39
}

div.frame.faq div.section div.ac-content a {
    display: inline;
    color: red;
    text-decoration: underline
}

div.frame.faq div.section div.ac-content p span:nth-of-type(1) {
    position: relative;
    display: inline-block;
    width: 2rem;
    height: 1.6rem;
    color: #fff;
    line-height: 2.6rem
}

div.frame.faq div.section div.ac-content p span:nth-of-type(1)::before {
    position: absolute;
    top: calc(50% - 0.45rem);
    left: 0;
    width: 1.6rem;
    height: 1.6rem;
    line-height: 1.6rem;
    content: 'A';
    text-align: center;
    border-radius: 50%;
    background-color: #00acee
}

div.frame.faq div.section div.ac-content p span:nth-of-type(2) {
    float: right;
    display: block;
    width: calc(100% - 2rem)
}

div.frame.faq div.section div.ac-content>ol {
    margin-top: 1rem
}

div.frame.faq div.section div.ac-content>ol img {
    display: block
}

@media screen and (min-width:0px) and (max-width:500px) {
    div.frame.faq div.section div.ac-content>ol {
        padding-left: 2rem
    }
}

div.pager_panel {
    margin: 1rem auto;
    padding: 0 1rem
}

div.pager_panel div.count {
    float: left
}

div.pager_panel div.pager {
    float: right
}

div.pager_panel div.pager span {
    float: left
}

div.pager_panel div.pager a {
    float: left;
    margin-left: 5px
}

div.pager_panel div.pager div.page_num,
div.pager_panel div.pager div.page_num_cur {
    float: left;
    height: 25px;
    min-width: 21px;
    text-align: center
}

div.pager_panel div.pager div.page_num {
    background-color: #fff;
    border: 1px solid #333
}

div.pager_panel div.pager div.page_num_cur {
    margin-left: 5px;
    color: #fff;
    background-color: #333;
    border: 1px solid #333
}

@media screen and (min-width:0px) and (max-width:1100px) {

    div.pager_panel div.pager a:not(.prev):not(.next),
    div.pager_panel div.pager div.page_num_cur,
    div.pager_panel div.pager>span {
        display: none
    }

    div.pager_panel div.pager a span {
        padding: .5rem 3rem;
        border: 1px solid #888;
        -moz-border-radius: .3rem;
        -webkit-border-radius: .3rem;
        border-radius: .3rem
    }

    div.pager_panel div.pager a span:hover {
        color: #fff;
        background-color: #ff7fbf;
        border: 1px solid #ff7fbf
    }
}