@charset "utf-8";

/*-------------------------*/
/*  base
/*-------------------------*/
body {
    font-family: "メイリオ", Meiryo, 'Kosugi Maru', sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-family: quasimoda, sans-serif;
    position: relative;
    line-height: 1.8;
    font-size: 14px;
    color: #333;
    font-family: 'Jost', 'Questrial', sans-serif;
    background: #f1efeb;
}

/*-------------------------*/
/*  common
/*-------------------------*/
h2 {
    margin-bottom: 60px;
}

.posab {
    position: absolute !important;
}

.inlineb {
    display: inline-block !important;
}

.ovh {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

::selection {
    background: #333;
    color: #fff;
}

dt {
    width: 150px;
    padding: 5px;
    font-size: 11px;
    opacity: 0.5;
    position: relative;
    top: 3px;
}

dd {
    font-weight: bold;
}

/*-------------------------*/
/*  header
/*-------------------------*/
header {
    width: 100%;
    z-index: 99999;
    padding: 10px 0 0;
    box-sizing: border-box;
    -webkit-transition: all 0.3s 0s ease;
    -moz-transition: all 0.3s 0s ease;
    transition: all 0.3s 0s ease;
    position: absolute;
    top: 0;
}

header h1 {
    position: relative;
    left: 25px;
    top: 4px;
}

header h1 img {
    width: auto;
    max-height: 50px;
}

header nav {
    width: 100%;
    margin: 0 auto;
}

header nav ul {
    box-sizing: border-box;
    position: relative;
    top: 80px;
}

header nav ul li {
    display: inline-block;
}

header nav ul a.baranimate {
    padding: 0;
}

/*-------------------------*/
/*  section
/*-------------------------*/
#top {
    text-align: center;
}

#cnt {
    padding: 175px 0 0;
}

.inner {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 25px;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}

.overinner {
    width: 100%;
    margin: 0 auto;
    padding: 0 25px;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    overflow-x: hidden;
}

section.bgright {
    background: #e1e1e0;
    position: relative;
    margin: 120px 0;
}

section.bgright:before,
section.bgright:after {
    display: block;
    content: "";
    height: 120px;
    width: 100%;
    background: #e1e1e0;
    position: absolute;
}

section.bgright:before {
    top: -119px;
    -webkit-clip-path: polygon(0% 101%, 100% 100%, 100% 0%, 0% 100%);
    clip-path: polygon(0% 101%, 100% 100%, 100% 0%, 0% 100%);
}

section.bgright:after {
    bottom: -119px;
    -webkit-clip-path: polygon(0% 100%, 100% 0%, 100% 0%, 0% 0%);
    clip-path: polygon(0% 100%, 100% 0%, 100% 0%, 0% 0%);
}

section.bgleft {
    background: #e1e1e0;
    position: relative;
    margin: 120px 0;
}

section#contact,
section#goods,
section#news {
    margin: 0 0 60px;
    padding-bottom: 60px;
    border-bottom: 1px solid #b9b9b9;
}

section#news a .text {
    text-decoration: underline;
}

section.bgleft:before,
section.bgleft:after {
    display: block;
    content: "";
    height: 120px;
    width: 100%;
    background: #e1e1e0;
    position: absolute;
}

section.bgleft:before {
    top: -119px;
    -webkit-clip-path: polygon(0 0, 100% 100%, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 100%, 100% 100%, 0 100%);
}

section.bgleft:after {
    bottom: -119px;
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 0%);
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 0%);
}

#cnt section.bgright {
    padding: 60px 0;
    margin: 0;
}

#cnt h3 {
    font-size: 24px;
    font-weight: bold;
    border-bottom: 1px solid #333;
    padding-bottom: 20px;
    margin-bottom: 27px;
}

/*-------------------------
/*  mv
/*-------------------------*/
#mv .inner,
#mv {
    position: relative;
}

#mv {
    padding: 80px 0 0;
}

.mvwrap:after {
    content: '';
    background: inherit;
    -webkit-filter: blur(11px);
    -moz-filter: blur(11px);
    -o-filter: blur(11px);
    -ms-filter: blur(11px);
    filter: blur(11px);
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
}

.mvwrap:before {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    background: transparent;
    background-image: radial-gradient(#e7e7e7 5%, transparent 0%), radial-gradient(#707070 0%, transparent 6%);
    background-size: 20px 20px;
    background-position: 0 0, 2px 2px;
    z-index: 1;
}

.mvwrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url("../images/mv_02.png") no-repeat top center;
    background-size: cover;
    position: absolute;
    z-index: -1;
}

.mv_bg {
    height: auto;
    text-align: center;
}

.mv_bg img {
    width: auto;
    height: 100%;
    max-width: 1365px;
    display: inline-block;
}

/*-------------------------/*-------------------------*/
/*  sp
/*-------------------------/*-------------------------*/
@media (max-width: 1365px) {
    .mv_bg img {
        width: 100%;
        ;
        height: auto;
    }
}

.news {
    position: absolute;
    bottom: 200px;
    left: 0;
    text-align: left;
    padding: 0 25px;
}

.news h2 {
    margin-bottom: 0;
}

.data {
    opacity: 0.5;
    font-size: 10px;
    margin-right: 10px;
}

#news ul {
    max-width: 600px;
    margin: 0 auto
}

#news li {
    text-align: left;
    margin-bottom: 10px;
}

#news .col2 span {
    margin-right: 15px;
}

#news .col2 span.data {
    position: relative;
    top: 4px;
    min-width: 100%;
    display: block;
}

#top header .baranimate,
#top #mv .baranimate {
    padding: 0 5px;
}

#top h1.baranimate {
    background: transparent;
}

/*-------------------------
/*  SCHEDULE
/*-------------------------*/
section#schedule {
    margin: -80px 0 120px;
}

#schedule .datawrap {
    max-width: 200px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto 10px;
    text-align: center;
    font-size: 20px;
    position: relative;
    z-index: 1;

}

#schedule .datawrap .next,
#schedule .datawrap .prev {
    width: 10%;
}

#schedule .datawrap .next_arrow,
#schedule .datawrap .prev_arrow {
    cursor: pointer;
    display: block;
}

#schedule .datawrap .month {
    width: 80%;
}

#schedule .table .month {
    position: absolute;
    top: -44px;
    width: 97%;
    font-size: 20px;

}

#schedule .table_wrap {
    position: relative;
    z-index: 0;
}

#schedule .table {
    max-width: 600px;
    margin: 0 auto 30px;
    padding: 10px;
    background: #f3f3f3;
    box-shadow: 2px 2px 8px gray;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%, -0%);
    transform: translate(-50%, -0%);
    width: 100%;
}

#schedule .table.nextm,
#schedule .table.prevm {
    position: absolute;
    top: 0%;
    left: 50%;
    -webkit-transform: translate(-50%, -0%);
    transform: translate(-50%, -0%);
}

#schedule .table.prevm {
    left: 45%;
}

#schedule .table.nextm {
    left: 55%;
}


#schedule .currentday {
    border: 2px solid #333;
    width: 104%;
    height: 43px;
    position: absolute;
    left: 0;
    top: 1063px;
    -webkit-transform: translate(-2%, -0%);
    transform: translate(-2%, -0%);
    z-index: 1;
}

#schedule table {
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 0;
}

#schedule table td p {
    width: 100%;
    min-height: 30px;
    line-height: 30px;
}

#schedule table tr {
    border-bottom: 1px solid #bfbfbf;
}

#schedule table tr.sat {
    background: #ebebfd;
}

#schedule table tr.sun {
    background: #f5e9e9;
}

#schedule table tr:last-child {
    border-bottom: none;
}

#schedule table td>div {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px dotted;
    margin-bottom: 10px;
    padding-bottom: 5px;
}

#schedule table td>div:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

#schedule table td {
    width: 97%;
    line-height: 1;
    padding: 6px 0 3px;
    vertical-align: middle;
    height: 32px;
}

#schedule table .data {
    padding: 10px;
    width: 3%;
}

#schedule table .time {
    padding-left: 5px;
    width: 45px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
    font-size: 10px;
}

#schedule table .time span {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#schedule table .title {
    text-align: left;
    width: calc(100% - 243px);
    position: relative;
    font-size: 14px;
    font-family: 'Kosugi Maru', sans-serif, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#schedule table .title p {
    line-height: 1;
    position: relative;
    box-sizing: border-box;
}

#schedule table .title p a {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding-left: 27px;
    box-sizing: border-box;
    display: block;
    font-size: 12px;
    line-height: 1.3;
}


#schedule table .icon {
    width: 190px;
}

#schedule table .icon ul {}

#schedule table .icon ul li {
    display: inline-block;
}
#schedule table .icon ul li img {
    max-width: 30px;
}


#schedule table .title .live a {
    background: url(../images/icon_live.png) no-repeat left center;
}

#schedule table .title .song a {
    background: url(../images/icon_song.png) no-repeat left center;
}

#schedule table .title .video a {
    background: url(../images/icon_video.png) no-repeat left center;
}

#schedule table .title .info a {
    background: url(../images/icon_info.png) no-repeat left center;
}

#schedule table .title .barth a {
    background: url(../images/icon_barth.png) no-repeat left center;
}

#schedule table .title .other a {
    background: url(../images/icon_other.png) no-repeat left center;
}

/*-------------------------
/*  ABOUT US
/*-------------------------*/
#about h3 {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 30px;
    line-height: 1;
}

#about .text {
    margin-bottom: 60px;
}

/*-------------------------
/*  works
/*-------------------------*/
/*-------------------------
/*  MEMBER
/*-------------------------*/
.charalist {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    width: 125%;
    position: relative;
    left: -9%;
    margin: 0 0 10px;
    padding: 0;
}

.charalist>li {
    width: 22%;
    height: 300px;
    display: inline-block;
    transform: skewX(-20deg);
}
.charalist>li img{
    max-width: inherit;
}
.charalist>li:nth-child(1) {
    background: #D55F58;
}

.charalist>li:nth-child(2) {
    width: 17%;
    background: #48d38a;
}

.charalist>li:nth-child(3) {
    width: 17%;
    background: #31D1E9;
}

.charalist>li:nth-child(4) {
    width: 17%;
    background: #FFD041;
}

.charalist>li:nth-child(5) {
    background: #a5a59e;
}

.charalist>li:nth-child(1) img {
    position: absolute;
    top: 44%;
    left: 89%;
    width: 139%;
}

.charalist>li:nth-child(2) img {
    position: absolute;
    top: 31%;
    left: 76%;
    width: 184%;
}

.charalist>li:nth-child(3) img {
    position: absolute;
    top: 34%;
    left: 76%;
    width: 171%;
}

.charalist>li:nth-child(4) img {
    position: absolute;
    top: 30%;
    left: 79%;
    width: 152%;
}

.charalist>li:nth-child(5) img {
    position: absolute;
    top: 42%;
    left: 57%;
    width: 132%;
}

.charalist>li {
    overflow: hidden;
    position: relative;
}

.charalist>li img {
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%) skewX(20deg) scale(1.6);
}

.charalist>li:last-child {
    margin-right: 0;
}

.charaname {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    width: 105%;
    left: -2.5%;
    margin-bottom: 60px;
}

.charaname li {
    width: 20%;
}

.charaname .name {
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
}

.charaname .name_eng {
    font-size: 10px;
    text-align: center;
    opacity: 0.5;
}

/*-------------------------
/*  CONTACT
/*-------------------------*/
#contact {
    margin-bottom: 60px;
}

#contact .init {
    width: 100%;
    max-width: 410px;
    margin: 0 auto;
    text-align: left;
}

select,
input,
textarea {
    width: 100%;
    box-sizing: border-box;
}

#contact .init p {
    font-size: 11px;
    margin-bottom: 30px;
    color: #666;
}

.wpcf7-submit {
    margin: 0 auto;
}

#cnt #goods {
    padding: 120px 0 60px;
    text-align: center;
    margin: 0;
}
#cnt #contact {
    padding: 60px 0 0;
    text-align: center;
}

.mw_wp_form.mw_wp_form_complete {
    text-align: center;
}

/*-------------------------
/*  footer
/*-------------------------*/
footer {
    position: relative;
    background: #444444;
    text-align: left;
}

footer .inner {
    padding: 60px 0 95px;
}

footer .sub_nav li {
    display: inline-block;
    margin-right: 10px;
    padding-right: 20px;
    position: relative;
}

footer .sub_nav li:after {
    display: block;
    content: "|";
    position: absolute;
    right: 0;
    top: 0;
    color: #fff;
}

footer .sub_nav li:last-child:after {
    display: none;
}

footer .sub_nav li a {
    color: #fff;
}

footer>div:last-child {
    font-size: 10px;
    padding: 10px 0;
    width: 100%;
    color: #fff;
}

footer .menberlist {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    color: #fff;
    margin: 55px 0 0;
    padding: 0;
}

footer .menberlist li {
    width: 16%;
    display: flex;
    flex-wrap: wrap;
}

footer .menberlist li .img {
    width: 95px;
    height: 95px;
    overflow: hidden;
    position: relative;
}

footer .menberlist li .img img {
    width: 300%;
    position: absolute;
    top: 0%;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
}

footer .menberlist li .detail {
    width: calc(100% - 95px);
    line-height: 1;
    text-align: left;
    padding: 5px;
    box-sizing: border-box;
}

footer .menberlist li .detail .name {
    font-size: 16px;
    font-weight: bold;
}

footer .menberlist li .detail .name_eng {
    opacity: 0.5;
    font-size: 10px;
}

footer .menberlist li .detail ul {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
}

footer .menberlist li .detail ul li {
    min-width: 30px;
    max-width: 40px;
    width: 50%;
}

footer .menberlist>li:nth-child(1) .img {
    background: #D55F58;
}

footer .menberlist>li:nth-child(2) .img {
    background: #48d38a;
}

footer .menberlist>li:nth-child(3) .img {
    background: #31D1E9;
}

footer .menberlist>li:nth-child(4) .img {
    background: #FFD041;
}

footer .menberlist>li:nth-child(5) .img {
    background: #a5a59e;
}

footer .menberlist>li:nth-child(6) .img {
    background: #efefef;
}

footer .menberlist>li:nth-child(1) .img img {
    left: 52%;
}

footer .menberlist>li:nth-child(2) .img img {
    top: -19%;
    left: 52%;
}

footer .menberlist>li:nth-child(3) .img img {
    left: 54%;
    top: -16%;
}

footer .menberlist>li:nth-child(4) .img img {
    top: -23%;
    left: 68%;
}

footer .menberlist>li:nth-child(5) .img img {
    left: 52%;
}

footer .menberlist>li:nth-child(6) .img img {
    width: 140%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

footer .cw {
    text-align: center;
    background: #000000;
}

/*-------------------------*/
/*  cnt
/*-------------------------*/
.guideblock {
    margin-bottom: 60px;
}

.staffblock {
    max-width: 330px;
    margin: 0 auto 60px;
}

#cnt .member h3 {
    font-size: 37px;
    font-weight: bold;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

#cnt .member h4 {
    font-size: 11px;
    opacity: 0.5;
}

#cnt .member .chara {
    position: absolute;
    overflow: hidden;
    right: 0;
    top: 0px;
    width: 1000px;
    height: 1000px;
}

#cnt .member .chara img {
    position: absolute;
    left: 0%;
    top: 0%;
    -webkit-transform: translate(20%, 0%);
    transform: translate(20%, 0%);
}

#cnt .member .text {
    margin: 60px 0 100px;
}

#cnt .member .memberblock {
    margin: 0 0 100px;
}

#cnt .member .memberblock h5 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 20px;
}

#cnt .member .member_sns li {
    display: inline-block;
    margin-right: 5px;
    margin-top: 10px;
}

#cnt #about .aboutblock {
    text-align: center;
    line-height: 2.5;
}

#cnt #about h3 {
    font-weight: bold;
    border-bottom: none;
    padding-bottom: 40px;
    margin-bottom: 47px;
}

@media (max-width: 767px) {
    #cnt .member .chara {
        position: relative;
        overflow: hidden;
        right: 0;
        top: 0px;
        max-width: 100%;
        width: 1000px;
        height: auto;
        margin-top: 20px;
    }

    #cnt .member .chara img {
        max-width: 100%;
        position: relative;
        left: 0%;
        top: 0%;
        -webkit-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
    }
}



/*-------------------------/*-------------------------*/
/*  animate
/*-------------------------/*-------------------------*/
/*-------------------------*/
/*  bar animate
/*-------------------------*/
.baranimate {
    color: #333;
    position: relative;
    display: inline-block;
    letter-spacing: .01em;
    text-decoration: none;
    background: transparent;
    -webkit-transition: all 1s ease .05s;
    transition: all 1s ease .05s;
    /*padding: 0 20px;*/
    color: transparent;
}

.baranimate {
    padding: 0;
}

.baranimate.start {
    animation: bar_text 0.5s normal 1 ease-in-out both;
}

.baranimate:before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
    -webkit-transform-origin: left;
    transform-origin: left;
    transition: transform 1s ease;
    transition: transform 1s ease, -webkit-transform 1s ease;
    position: relative;
    z-index: 0;
    position: absolute;
    content: "";
    display: block;
    background: #333;
}

.baranimate.start:before {
    animation: ಠ_ಠ 0.5s normal 1 ease-in-out both;
}

.baranimate_hover:hover {
    position: relative;
    text-decoration: none;
    -webkit-transition: all 1s ease .05s;
    transition: all 1s ease .05s;
}

.baranimate_hover:hover:before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
    -webkit-transform-origin: left;
    transform-origin: left;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
    position: relative;
    z-index: 0;
    animation: ಠ_ಠ 0.5s normal 1 ease-in-out both;
}

.baranimate_hover:hover:before {
    position: absolute;
    content: "";
    display: block;
    background: #e1e1e0;
}

@keyframes bar_text {
    79% {
        color: transparent;
    }

    80% {
        color: #333;
    }

    100% {
        color: #333;
    }
}

@keyframes bar_text_white {
    80% {
        color: #fff;
    }

    100% {
        color: #333;
    }
}

@keyframes ಠ_ಠ {
    50% {
        top: 0;
        left: 0;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
        -webkit-transform-origin: left;
        transform-origin: left;
    }

    50.1% {
        top: 0;
        right: 0;
        -webkit-transform-origin: right;
        transform-origin: right;
    }

    100% {
        top: 0;
        right: 0;
        -webkit-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
        -webkit-transform-origin: right;
        transform-origin: right;
    }
}

/*-------------------------*/
/*  charaname
/*-------------------------*/
.charaname .name {
    position: relative;
    display: inline-block;
    letter-spacing: .01em;
    text-decoration: none;
    background: transparent;
    -webkit-transition: all 0.5s ease .05s;
    transition: all 0.5s ease .05s;
    text-align: center;
    margin: 0 auto;
    padding: 10px 60px;
    width: 100%;
    box-sizing: border-box;
}

.charaname .name:after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-transform-origin: right;
    transform-origin: right;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
    position: relative;
    z-index: 0;
}

.charaname a {
    display: block;
    text-align: center;
}

.charaname .name span {
    font-weight: bold;
}

.charaname .name:after {
    position: absolute;
    content: "";
    display: block;
    background: #333;
}

.charaname a:hover {
    opacity: 1;
}

.charaname .name:hover span {
    color: #fff;
    position: relative;
    z-index: 1;
}

.charaname .name:hover:after {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transform-origin: left;
    transform-origin: left;
}

.charaname li:nth-child(1) .name:after {
    background: #D55F58;
}

.charaname li:nth-child(2) .name:after {
    background: #48d38a;
}

.charaname li:nth-child(3) .name:after {
    background: #31D1E9;
}

.charaname li:nth-child(4) .name:after {
    background: #FFD041;
}

.charaname li:nth-child(5) .name:after {
    background: #a5a59e;
}

/*-------------------------*/
/*  scrolldown animate
/*-------------------------*/
.scrolldown {
    position: absolute;
    left: 50%;
    bottom: 90px;
    height: 80px;
    background: #ddd;
    width: 1px;
}

.scrolldown:after {
    content: "";
    position: absolute;
    top: 0;
    width: 1px;
    height: 80px;
    background: #333;
    animation: pathmove 1.4s ease-in-out infinite;
    opacity: 0;
}

@keyframes pathmove {
    0% {
        height: 0;
        top: 0;
        opacity: 0;
    }

    30% {
        height: 50px;
        opacity: 1;
    }

    100% {
        height: 0;
        top: 80px;
        opacity: 0;
    }
}

/*-------------------------*/
/*  btn
/*-------------------------*/
.init button,
.btn {
    width: 200px;
    color: #333;
    position: relative;
    display: block;
    border: 1px solid #0e192d;
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    -webkit-transition: all 0.5s ease .05s;
    transition: all 0.5s ease .05s;
    text-align: center;
    margin: 0 auto;
}

.init button {
    /*border: none;*/
}

.init button,
.btn a {
    display: block;
    padding: 10px 60px;
}

.init button:after,
.btn:after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-transform-origin: right;
    transform-origin: right;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
    position: relative;
    z-index: 0;
}

.init button:before,
.btn:before {
    top: 50%;
    right: -20px;
    width: 60px;
    height: 1px;
    -webkit-transition: all 0.5s ease .05s;
    transition: all 0.5s ease .05s;
}

.init button:after,
.init button:before,
.btn:after,
.btn:before {
    position: absolute;
    content: "";
    display: block;
    background: #333;
}

.init button:hover span,
.btn:hover a {
    opacity: 1;
    color: #fff;
    position: relative;
    z-index: 1;
}

.init button:hover:after,
.btn:hover:after {
    background: #333;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transform-origin: left;
    transform-origin: left;
}

.init button:hover:before,
.btn:hover:before {
    background: #fff;
    -webkit-transform: translate(20px);
    transform: translate(20px);
    z-index: 1;
}

/*========= Loading ===============*/
#splash {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    text-align: center;
    color: #fff;
}

#splash_text {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 999;
    transform: translate(-50%, -50%);
    color: #fff;
    width: 100%;

}

#splash_text svg {
    height: 2px;
    background: linear-gradient(-90deg, #d55f58, #48d38a, #ffd041, #31d1e9, #a5a59e);
}

.loader_cover {
    width: 100%;
    height: 50%;
    background-color: #333;
    transition: all .2s cubic-bezier(.04, .435, .315, .9);
    transform: scaleY(1);
}

.loader_cover-up {
    transform-origin: center top;
}

.loader_cover-down {
    position: absolute;
    bottom: 0;
    transform-origin: center bottom;
}

.coveranime {
    transform: scaleY(0);
}

/*========= video-container ===============*/
.video-container {
    margin: 0 auto 80px;
    overflow: hidden;
    position: relative;
    width: 100%;
    max-width: 750px;
}

.video-container:after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.video-container>iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
    footer .menberlist>li img {
        max-width: inherit;
    }

/*-------------------------/*-------------------------*/
/*  sp
/*-------------------------/*-------------------------*/
@media (max-width: 767px) {
    .inner {
        max-width: 100%;
    }

    dt {
        width: 100%;
        top: 0;
    }

    header h1 img {
        max-height: 40px;
    }

    h2 {
        margin-bottom: 30px;
    }

    .mvwrap span {
        background: url(../images/mv_bg.png) no-repeat center;
        background-size: 150% 100%;
    }

    section#schedule {
        margin: -10px 0 120px;
    }

    #schedule .inner {
        overflow: hidden;
    }

    #schedule table .data {
        padding-left: 0px;
    }

    #schedule table .icon {
        padding-right: 0px;
        width: 100%;
    }

    #schedule table .title {
        width: calc(100% - 50px);
    }

    #schedule table .title p a {
        padding-left: 25px;
        line-height: 1.3;
    }

    #schedule table .icon ul {
        text-align: right;
        padding: 0 5px 4px;
        /*border-bottom: 1px solid #cecece;*/
        margin-bottom: 10px;
    }

    #schedule table .detail:last-child .icon ul {
        border-bottom: none;
        margin-bottom: 0px;
    }

    .charalist>li {
        height: 150px;
    }

    .charalist {
        width: 136%;
        left: -15%;
    }

    .charalist>li:nth-child(1) img {
        position: absolute;
        top: 46%;
        left: 96%;
        width: 206%;
    }

    .charalist>li:nth-child(2) img {
        position: absolute;
        top: 31%;
        left: 82%;
        width: 275%;
    }

    .charalist>li:nth-child(3) img {
        position: absolute;
        top: 37%;
        left: 92%;
        width: 260%;
    }

    .charalist>li:nth-child(4) img {
        position: absolute;
        top: 30%;
        left: 100%;
        width: 260%;
    }

    .charalist>li:nth-child(5) img {
        position: absolute;
        top: 44%;
        left: 75%;
        width: 217%;
    }

    .charaname {
        width: 112%;
        left: -6%;
    }

    .charaname .name {
        width: 20px;
        padding: 10px 0;
    }

    footer {
        padding: 0;
    }

    footer .inner {
        padding: 60px 10px 95px;
    }

    footer .menberlist li {
        width: 50%;
        margin-bottom: 10px;
    }

    dl {
        text-align: center;
    }

    dt,
    dd {
        padding: 0;
    }

    section.bgright:before,
    section.bgright:after {
        height: 60px;
    }

    section.bgright:before {
        top: -60px;
    }

    section.bgright:after {
        bottom: -60px;
    }

    #schedule table .title p a {
        width: 100%;
        position: relative;
        top: 0%;
        left: 0%;
        -webkit-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
        padding-left: 25px;
        box-sizing: border-box;
    }

    .video-container {
        max-width: 80%;
    }
    #schedule table td {
        width: 50%;
    }

    /*-------------------------*/
    /*  scrolldown animate
    /*-------------------------*/
    .scrolldown {
        height: 40px;
        bottom: 15px;
    }

    .scrolldown:after {
        height: 40px;
    }

    @keyframes pathmove {
        0% {
            height: 0;
            top: 0;
            opacity: 0;
        }

        30% {
            height: 20px;
            opacity: 1;
        }

        100% {
            height: 0;
            top: 40px;
            opacity: 0;
        }
    }
}

/*---------------
    nav
/*---------------*/
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

#hamburger {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    padding: 0;
}

#hamburger .line {
    fill: none;
    stroke: #333;
    stroke-width: 6;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

#hamburger .line1 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
}

#hamburger .line2 {
    stroke-dasharray: 60 60;
    stroke-width: 6;
}

#hamburger .line3 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
}

.open #hamburger .line1 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
}

.open #hamburger .line2 {
    stroke-dasharray: 1 60;
    stroke-dashoffset: -30;
    stroke-width: 6;
}

.open #hamburger .line3 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
}

.container {
    align-items: center;
    justify-content: center;
    display: flex;
    position: absolute;
    right: 10px;
    z-index: 9999;
}


nav {
    display: none;
    position: fixed;
    height: 100vh;
    background: #f1efeb;
    text-align: center;
    left: 0;
    top: 0;
}

nav li {
    display: block;
    width: 100%;
    font-size: 3em;
}

/*---------------
    member
/*---------------*/
#cnt .member h3 {
    font-size: 37px;
    font-weight: bold;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

#cnt .member h4 {
    font-size: 11px;
    opacity: 0.5;
}

#cnt .member .chara {
    position: absolute;
    overflow: hidden;
    right: 0;
    top: 0px;
    width: 1000px;
    height: 1000px;
    z-index: -1;
}

#cnt .member .chara img {
    position: absolute;
    left: 0%;
    top: 0%;
    -webkit-transform: translate(20%, 0%);
    transform: translate(20%, 0%);
}

#cnt .member .text {
    margin: 60px 0 100px;
}

#cnt .member .memberblock {
    margin: 0 0 100px;
}

#cnt .member .memberblock h5 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 20px;
}

#cnt .member dl {
    font-size: 12px;
}

#cnt .member dt {
    width: 130px;
    padding: 5px;
    font-size: 12px;
    opacity: 0.5;
    background: #f1efeb;
}

#cnt .member dd span {
    display: inline-block;
    background: #f1efeb;
    padding: 2px 10px;
}

@media (max-width: 767px) {
    #cnt .member .chara {
        overflow: hidden;
        right: 0%;
        top: 0px;
        max-width: 100%;
        width: 1000px;
        height: auto;
        margin-top: 20px;
        z-index: -1;
    }

    #cnt .member .chara img {
        max-width: 100%;
        position: relative;
        left: 30%;
        top: 0%;
        -webkit-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
    }

    #cnt .member .main .text {
        margin: 60px 0 0px;
    }

    #cnt .member dl {
        text-align: left;
    }

    #cnt .member dt {
        width: 130px;
    }

    #cnt .member dd {
        width: calc(100% - 130px);
        margin-bottom: 0px;
    }

    #cnt .logo img {
        max-width: 100%;
    }
}

.member dd a {
    text-decoration: underline;
}

/*-------------------------*/
/*  archivewrap
/*-------------------------*/
.archivewrap {
    font-family: "メイリオ", Meiryo, 'Kosugi Maru', sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    line-height: 1.3;
    font-size: 12px;
}

.archiveblock .tags a,
.sidenav .tagwrap a {
    margin-right: 3px;
    font-size: 10px;
    background: #eee;
    border-radius: 5px;
    padding: 5px;
    line-height: 1;
    display: inline-block;
    margin-bottom: 5px;
}

.col2 .sidenav {
    width: calc(20% - 20px);
    max-width: 200px;
    margin-right: 20px;
}

.col2 .archiveblock {
    width: calc(77%);
    margin-right: 0px;
}

.archiveblock .as {
    font-size: 0.8em;
    opacity: 0.5;
}

.archiveblock .title p {
    display: inline;
    text-decoration: underline;
}

.archiveblock .text>div {
    margin-bottom: 5px;
    word-break: break-all ;
}

.tagwrap {
    border: 1px solid #a0a0a0;
    padding: 10px;
    background: #f1efeb;
}

.tagwrap a {
    margin-bottom: 3px;
}

.checker {
    padding: 10px 5px;
}

.checker input {
    display: inline;
    width: auto;
}

.seachitem {
    border: 1px solid #a0a0a0;
    padding: 10px;
    margin-bottom: 10px;
    background: #f1efeb;
}

.seachitem label {
    cursor: pointer;
}

.seachitem.init button {
    display: block;
    padding: 9px 29px;
    font-size: 12px;
    width: 100%;
    background: #fff;
}

.seachitem.init .reset {
    margin-top: 10px;
    font-size: 12px;
    width: 100%;
    background: #fff;
}

.seachitem.init .reset a {
    display: block;
    padding: 10px 28px;
}

#s {
    padding: 5px;
    box-sizing: border-box;
}

.archiveblock .img {
    margin-bottom: 5px;
}

.archiveblock img {
    max-width: 100%;
}

.archiveblock .icon li {
    display: inline;
}

.archiveblock .icon li img {
    display: inline;
    max-width: 30px;
}

.archiveblock .col4>li {
    border-bottom: 1px solid #a0a0a0;
}

.archiveblock .others {
    max-height: 200px;
}
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
}
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 30, .5);
  border-radius: 10px;
  box-shadow:0 0 0 1px rgba(255, 255, 255, .3);
}
.archiveblock .others {
  width: 100%;
  overflow: auto;
}

.archiveblock .others p {
  background-image: url("http://lorempixel.com/800/800/");
  background-repeat: no-repeat;
  width:100%;
}

@media (max-width: 767px) {

    .col2 .sidenav,
    .col2 .archiveblock {
        max-width: calc(100%);
        width: calc(100%);
        margin-right: 0px;
    }

    .col2 .archiveblock {
        width: calc(100%);
        margin-right: 0px;
    }

    .col2 .archiveblock .col4 {
        display: flex;
        margin-right: -15px;
    }

    .col2 .archiveblock .col4>li {
        width: calc(50% - 15px);
        margin-right: 15px;
    }
    .sidenav .sp {
    background: #333;
    color: #fff;
    padding: 7px 7px 5px;
    line-height: 1;
    }
}

/*-------------------------*/
/*  m-pagenation
/*-------------------------*/
.m-pagenation {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 60px 0 0
}

.m-pagenation__next a,
.m-pagenation__prev a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 40px;
    background: #FFD200;
    border-radius: 20px;
    box-sizing: border-box
}

.m-pagenation__next a:before,
.m-pagenation__prev a:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px;
    height: 10px;
    background: url(../images/_common/ico-arrow05.png) 0 0/cover;
    margin: auto
}

.m-pagenation__prev a {
    padding: 0 0 0 15px
}

.m-pagenation__prev a:before {
    left: 15px;
    transform: rotate(180deg)
}

.m-pagenation__next a {
    padding: 0 15px 0 0
}

.m-pagenation__next a:before {
    right: 15px
}

.m-pagenation__body {
    display: flex;
    margin: 0 20px
}

.m-pagenation__body a,
.m-pagenation__body li {
    display: flex;
    align-items: center;
    justify-content: center
}

.m-pagenation__body li {
    width: 40px;
    height: 40px;
    list-style: none;
    margin: 0 5px;
    border-radius: 50%;
    overflow: hidden
}

.m-pagenation__body a {
    width: 100%;
    height: 100%;
    background: #fff;
}

.m-pagenation__body li.current {
    color: #fff;
    background: #333
}
@media screen and (max-width:767px) {

    .m-pagenation__next a,
    .m-pagenation__prev a {
        width: 90px
    }

    .m-pagenation__body {
        margin: 0 10px
    }
}

/*-------------------------*/
/*  dropbox
/*-------------------------*/
.dropwrap a {
    display: block;
    width: 100px;
    height: 100px;
    position: fixed;
    right: 10px;
    bottom: 30px;
    margin: auto;
    text-align: center;
    color: #ffffff;
    font-size: 12px;
    z-index: 9999;
    padding: 30px;
    box-sizing: border-box;
}

.dropwrap a:hover {}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes drop {
    0% {
        bottom: 0px;
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        bottom: -200px;
    }
}

@keyframes wave {
    0% {
        background-position: 0 160px;
        background-size: 170px 300px;
    }

    100% {
        background-position: 500px -18px;
        background-size: 250px 150px;
    }
}


.dropbox {}

.dropbox span {
    z-index: 3;
}

.dropbox-bg span {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-width: 50%;
}


.dropbox-bg span img {
    width: 100%;
}

.dropbox-bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 50%;
    background: transparent repeat-x 0 100px/150px 300px url('data:image/png;base64,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');
    z-index: 2;
    animation: wave 1s ease-out forwards;
}

.drops {
    -webkit-filter: url('#liquid');
    filter: url('#liquid');
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    opacity: 0;
    animation: fade-in .1s linear .4s forwards;
}

.drop1,
.drop2 {
    width: 21px;
    height: 24px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: #10a7c1
}

.drop1 {
    width: 90px;
    height: 16px;
    bottom: 10px;
    border-radius: 0;
}

.drop2 {
    animation: drop 1.3s cubic-bezier(1, .19, .66, .12) .5s infinite;
}