@charset "utf-8";
/************************
common
************************/
button{
        background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
}
.contents {
    position: relative;
    overflow: hidden;
}

.backLeft {
    background: url("../../img/back_scroll_left.jpg") repeat-y;
    background-size: 50%;
}
.backRight {
    background: url("../../img/back_scroll_right.jpg") repeat-y;
    background-size: 50%;
}


/* heading */
.heading {
    width: auto;
    height: 190px;
    padding: 40px 0;
}
.heading img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 一覧はこちら */
.btn-linkMore {
    width: 300px;
    margin: 50px auto 0;
    box-shadow: 5px 5px 0px 0px #fff;
}
.btn-linkMore a {
    display: block;
    color: #fff;
    background: #030303;
    text-align: center;
    padding: 20px 0;
    font-size: 110%;
    font-weight: bold;
    letter-spacing: 3px;
}
.btn-linkMore a:hover {
    color: #fff100;
}

/************************
menu
************************/
/* fixed menu link */
.fixed-menu {
    width: 300px;
    z-index: 11;
    cursor: pointer;
    position: fixed;
    right: 0;
    transform: translateX(100%);
}

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

.fixed-menu img {
    display: block;
    width: 100%;
}
.animationOn {
    transform: translateX(0);
    animation: SlideIn .5s;
}

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

.animationOff {
    animation: SlideOff .5s;
}

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

/* mainvisual menu link */
.mainvisual-menu {
    position: absolute;
    top: 30px;
    right: 20px;
    background: #030303;
    width: 150px;
    border-radius: 10px;
    padding: 20px 0;
    cursor: pointer;
    z-index: 1;
}
.mainvisual-menuInner {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.mainvisual-menuInner img {
    width: 70px;
    height: auto;
}
.hamburger {
    display: block;
    z-index: 10;
    margin-right: 15px;
    width: 30px;
    height: 23px;
}
.hamburger hr {
    border: none;
    height: 0;
    margin: 0 0 7px;
    box-sizing: border-box;
    border-bottom: 3px solid #fff;
}

/* menu contents */
.menu-open {
    position: fixed;
    right: -100vw;
    color: #fff;
    background-color: #fff000;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    padding-left: 6.5vw;
    padding-right: 6.5vw;
    z-index: 1000;
    height: 100vh;
    transition: .5s;
}
.menu-open.menu-block {
    right: 0;
    transition: .4s;
}
.menu-sns {

}
.menu-sns ul {
    width: 280px;
    /*width: 80px;*/
    display: flex;
    flex-wrap:wrap;
    justify-content:space-between;
    margin: 16vh auto 8vh;
}
.menu-sns ul li {
    flex-basis: calc((100% - 50px) / 3);
    max-width: calc((100% - 50px) / 3);
    /*
    flex-basis: 100%;
    max-width: 100%;
    */
}
.menu-sns ul li a {
    width: 100%;
    display: block;
}
.menu-sns ul li a img {
    width: 100%;
    display: block;
}
.menu-tit ul {
    width: 500px;
    display: flex;
    flex-wrap:wrap;
    justify-content:space-between;
    border-bottom: 1px #fff solid;
    padding: 20px;
}
.menu-tit ul li {
    flex-basis:calc((100% - 50px) / 2);
    max-width:calc((100% - 50px) / 2);
    font-size: 140%;
    text-align: center;
    font-weight: bold;
}
.menu-tit ul li:first-child {
    position: relative;
    display: flex;
}
.menu-tit ul li:first-child::after {
    content: '';
    display: block;
    background: url("../../img/tit-icon.png") no-repeat right center;
    background-size: contain;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    right: -45px;
    transform: translateY(-50%);
}
.menu-tit ul li:nth-child(2) {
    
}
.menu-tit ul li.noLink {
    color: #a5a5a5;
}
.menu-tit ul li a,
.menu-tit ul li span {
    width: 100%;
    display: block;
}
.close-btn {
    position: absolute;
    top: 35px;
    right: 50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #030303;
    cursor: pointer;
}
.close-line {
    width: 23px;
    height: 23px;
    margin: 14px;
}
.close-line hr {
    border: none;
    height: 0;
    border-bottom: 2px solid #fff;
    margin: 1em 0;
}
.close-line hr:first-child {
    -webkit-transform: translateY(9px) rotate(135deg);
    transform: translateY(9px) rotate(135deg);
}
.close-line hr:nth-child(2) {
    -webkit-transform: translateY(-9px) rotate(-135deg);
    transform: translateY(-9px) rotate(-135deg);
}

/************************
mainvisual
************************/
#mainvisual {
    position: relative;
    overflow: hidden;
    background: url("../../img/mainvisual-pc_back.png") no-repeat center center;
    background-size: cover;
}
.mainvisual-contents {
    padding: 30px 0 0;
    position: relative;
    height: 100vh;
    min-height: 830px;
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
}
.logo {
    max-width: 700px;
    margin: 0 auto;
    width: 60vw;
}
.logo img {
    display: block;
    width: 100%;
}
.shikaru-img {
    max-width: 560px;
    width: 50vw;
    height: auto;
    position: absolute;
    top: 24%;
    right: 0;
}
.shikaru-img img {
    width: 100%;
    display: block;
}
.word {
    max-width: 350px;
    width: 39vw;
    position: absolute;
    top: 28%;
    left: 13%;
}
.word img {
    width: 100%;
    display: block;
}
.shake {
    animation: shake .5s;
}

@keyframes shake {
    0% {
        transform: translate(2px, 0px);
    }
    5% {
        transform: translate(-2px, 0px);
    }
    10% {
        transform: translate(2px, 0px);
    }
    15% {
        transform: translate(-2px, 0px);
    }
    20% {
        transform: translate(2px, 0px);
    }
    25% {
        transform: translate(-2px, 0px);
    }
    30% {
        transform: translate(0px, 0px);
    }
}


.voice-btn {
    position: absolute;
    bottom: 20px;
    left: 0;
    
}
.shikaru-btn {
    width: 130px;
    margin-bottom: 20px;
    cursor: pointer;
}
.sound-btn {
    width: 130px;
    cursor: pointer;
}
.shikaru-btn img,
.voice-btn img {
    width: 100%;
    display: block;
}

/************************
menu
************************/
#menu {
    background: #d71718;
    padding: 30px 0 10px;
}
.menu {
    max-width: 1000px;
    width: 85%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.menu li {
    border: 5px #030303 solid;
    box-shadow: 4px 4px 0px 0px #030303;
    flex-basis: calc((100% - 6%) / 3);
    max-width: calc((100% - 6%) / 3);
    margin-bottom: 20px
}
.menu li:nth-child(3n-1) {
    margin: 0 2% 20px;
}
.menu li a {
    display: block;
    padding: 20px 10px;
    background-color: #fff;
    font-size: 180%;
    font-weight: bold;
    text-align: center;
    height: 100%;
}
.menu li a:hover {
    color: #ff0000;
}

/************************
intriduction
************************/
#introduction {
    background: url("../../img/back-dot.gif") repeat top left;
    padding-bottom: 50px;
}
.introTxt-wrap {
    max-width: 1000px;
    width: 85%;
    background: url("../../img/back_intro-txt.jpg") repeat top left;
    border: 5px #030303 solid;
    box-shadow: 10px 10px 0px 0px #030303;
    padding: 30px 50px;
    margin: 0 auto 80px;
}
.introCopy {
    margin-bottom: 30px;
}
.introCopy span {
    display: inline-block;
    border: 5px #030303 solid;
    background: #fff100;
    font-size: 230%;
    font-weight: bold;
    padding: 10px;
    letter-spacing: 0.1em;
    line-height: 1.1;
}
.introCopy span:first-child {
    margin-bottom: 15px;
}
.introCopy span strong {
    font-size: 120%;
    vertical-align: -1px;
}
.introCopy-img {
    display: inline-block;
    width: auto;
    height: 75px;
    vertical-align: -10px;
    margin-right: 10px;
}
.introTxt {
    font-size: 125%;
    font-weight: bold;
    line-height: 1.7;
}
.introTxt-big {
    font-size: 230%;
    line-height: 1;
    margin-right: 2px;
}
.introSns-wrap {
    margin-bottom: 50px;
}
.sns-heading {
    width: auto;
    height: 150px;
    margin-bottom: 20px;
}
.sns-heading img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.sns-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 760px;
    margin: 0 auto;
}
.sns-block {
    flex-basis: calc((100% - 30px) / 2);
    max-width: calc((100% - 30px) / 2);
    box-shadow: 10px 10px 0px 0px #030303;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    transition-duration: .2s;
}
.sns-block:hover {
    transform: translateY(-10px);
    transition-duration: .2s;
}
/*
.sns-block:hover::after {
    content: '';
    position: absolute;
    top: -10%;
    left: -20%;
    width: 80px;
    height: 100%;
    transform: scale(2) rotate(20deg);
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .5) 100%, rgba(255, 255, 255, 0) 0%);
    animation-name: shiny;
    animation-duration: 3.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes shiny {
    0% { left: -20%; }
    10% { left: 140%; }
    100% { left: 140%; }
}
*/

.sns-youtube {
    background: #ff0000;
}
.sns-twitter {
    background: #1d9bf0;
}
.sns-instagram {
    background: #de00b3;
}
.sns-tiktok {
    background: #030303;
}
.sns-block a {
    display: block;
}
.sns-block a h4 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 10px 5px;
}
.sns-block a h4 img {
    display: block;
    width: 40px;
    height: 40px;
    margin-right: 10px;
}
.sns-block a h4 span {
    font-size: 150%;
    font-weight: bold;
    color: #fff;
}
.sns-img {
    padding: 4px;
}
.sns-img img {
    display: block;
    width: 100%;
}
.links-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1100px;
    width: 90%;
    margin: 0 auto;
}
.media {
    flex-basis: calc((100% - 50px) / 3);
    max-width: calc((100% - 50px) / 3);
    border: 4px #030303 solid;
    box-shadow: 8px 8px 0px 0px #030303;
    margin-bottom: 25px;
}
.media-remark {
    flex-basis: calc((100% - 30px) / 2);
    max-width: calc((100% - 30px) / 2);
}
.media a {
    position: relative;
    display: block;
    width: 100%;
    background: #fff;
    overflow: hidden;
}
.media a::after {
    content: "";
    position: absolute;
    z-index: 2;
    right: 8px;
    bottom: 6px;
    width: 30px;
    height: 30px;
    background-color: #ff0000;
    background-image: url("../../img/icon-link.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
    border-radius: 50%;
    transition-duration: .3s;
}
/*
.media a:hover::after {
    background-color: #ff0000;
    transition-duration: .3s;
    transform: scale(1.1);
}
*/
.media a:hover::after {
    opacity: 0;
    transition-duration: .3s;
}
.media a::before {
    content: "";
    position: absolute;
    z-index: 2;
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 50%) scale(2);
    width: 30px;
    height: 30px;
    background-color: #ff0000;
    background-image: url("../../img/icon-link.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
    border-radius: 50%;
    opacity: 0;
    transition-duration: .3s;
}
.media a:hover::before {
    opacity: 1;
    transition-duration: .3s;
}
.media a img {
    display: block;
    width: 100%;
    transition-duration: .3s;
}
.media a:hover img {
    opacity: 0.7;
    transform: scale(1.1);
    transition-duration: .3s;
}


/************************
news, work
************************/
#news,
#work {
    background: #a83024;
}
.news-contents {
    padding-bottom: 100px;
}
.notice-wrap {
    max-width: 1000px;
    width: 85%;
    background: #fff;
    border: 5px #030303 solid;
    box-shadow: 10px 10px 0px 0px #030303;
    padding: 30px;
    margin: 0 auto;
}
.notice-list {
    max-height: 400px;
    /*overflow-y: auto;*/
}
/*
.notice-list::-webkit-scrollbar {
    width: 8px;
}
.notice-list::-webkit-scrollbar-track {
    background: #c3c3c3;
}
.notice-list::-webkit-scrollbar-thumb {
    background: #e50213;
}
*/
.notice-list ul li {
    display: flex;
    margin-bottom: 30px;
    min-height: 100px;
    transition-duration: .3s;
    cursor: pointer;
}
.notice-list ul li:last-child {
    margin-bottom: 0;
}
.notice-thumb {
    max-width: 180px;
    margin-right: 20px;
    width: 35%;
    background-size: cover;
    background-position: center center;
}
.notice-thumb img {
    width: 100%;
}
.notice-tit {
    max-width: 722px;
    width: 75%;
}
.notice-tit dt {
    font-size: 115%;
    line-height: 1;
    margin-bottom: 10px;
    color: #e50213;
    font-weight: bold;
}
.notice-tit dd {
    font-size: 100%;
    line-height: 1.3;
}

/************************
character
************************/
#character {
    background-color: #0091c0;
    position: relative;
    overflow: hidden;
    z-index: 0;
}
#character::before,
#character::after {
    content: '';
    display: block;
    position: absolute;
    left: -3%;
    top: -50px;
    background: url("../../img/character-back.svg") no-repeat left top;
    width: 80%;
    height: 80%;
    z-index: -1;
}
#character::after {
    transform: scale(-1, 1);
    left: inherit;
    right: -3%;
}
.character-contents {
    padding-bottom: 100px;
}
.character-wrap {
    position: relative;
    max-width: 1000px;
    width: 85%;
    background-color: #fff;
    border: 5px #030303 solid;
    box-shadow: 10px 10px 0px 0px #030303;
    padding: 40px;
    margin: 0 auto;
    z-index: 0;
}
.character-wrap::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../../img/back-dot.png");
    background-color: rgba(255,255,255,0.9);
    background-blend-mode:lighten;
    z-index: -1;
}
.profile01 {
    display: flex;
    margin-bottom: 20px;
}
.charaDetail {
    width: 60%;
}
.charaName-sp {
    display: none;
}
.charaName-pc {
    width: 80%;
    margin-bottom: 30px;
}
.charaDetail p {
    font-size: 110%;
    line-height: 2;
    font-weight: bold;
}
.charaDetail-txtImg {
    display: inline-block;
    width: auto;
    height: 35px;
    vertical-align: -10px;
}
.profile01-img {
    width: 40%;
}
.profile01-img img {
    display: block;
    max-width: 120%;
    width: 33vw;
    position: relative;
    top: -90px;
    right: -30px;
}
.profile02 {
    
}
.charaInfo-header {
    text-align: center;
    font-size: 160%;
    line-height: 1;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 15px 0;
    border: 3px #030303 solid;
    background: #fff;
}
.charaInfo-detail {
    display: flex;
    justify-content: space-between;
    padding: 30px;
    border: 3px #030303 solid;
    background: #fff;
}
.charaInfo-profile {
    width: 40%;
    margin-right: 5%;
}
.charaInfo-profile dt {
    background: #cdcdcd;
    color: #030303;
    padding: 10px 0 10px 10px;
}
.charaInfo-profile dd {
    padding: 0 0 3px 25px;
    font-size: 95%;
    background: url("../../img/icon-check.svg") no-repeat left top;
    background-size: 20px 20px;
    margin: 10px 0;
    line-height: 1.4;
}
.profile02-img {
    width: 55%;
}
.profile02-img img {
    width: 100%;
}

/************************
sns
************************/
.sns-contents {
    padding-bottom: 100px;
}
.tv-wrap,
.net-wrap {
    max-width: 1000px;
    width: 85%;
    border: 5px #030303 solid;
    box-shadow: 10px 10px 0px 0px #030303;
    padding: 20px;
    margin: 0 auto;
}
.tv-wrap {
    background: url("../../img/onair-tv_back.jpg") repeat left top;
    margin-bottom: 50px;
}

.net-wrap {
    background: url("../../img/onair-net_back.jpg") repeat left top;
}
.onair-heading {
    text-align: center;
    font-size: 160%;
    line-height: 1;
    font-weight: bold;
    margin-bottom: 30px;
    padding: 15px 0;
    border: 3px #030303 solid;
    background: #fff;
}
.tv-onairTime {
    text-align: center;
    font-size: 140%;
    font-weight: bold;
    line-height: 1.8;
    letter-spacing: 4px;
    text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff,
                 -2px 2px 0 #fff, 2px -2px 0 #fff,
                 0px 2px 0 #fff,  0-2px 0 #fff,
                 -2px 0 0 #fff, 2px 0 0 #fff;
} 
.net-streamingServices {
    width: 85%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.net-streamingServices li {
    width: 49%;
    margin-bottom: 20px;
}
.net-streamingServices li:last-child {
    margin-bottom: 0;
}
.net-streamingServices li:nth-child(odd) {
    margin-right: 2%;
}
.net-streamingServices li a {
    display: flex;
    align-items: center;
    padding: 10px;
    background: #fff;
    border: 3px #030303 solid;
}
.net-streamingServices li a img {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 3px;
}
.net-streamingServices li a span {
    display: block;
    width: calc(100% - 50px);
    text-align: center;
    font-size: 130%;
}

/************************
movie
************************/
#movie {
    background: url("../../img/movie_back.png") repeat left top;
}
.movie-contents {
    padding-bottom: 100px;
}
.gogoBakachinga {
    margin-bottom: 100px;
}
.movie-heading {
    width: 450px;
    margin: 0 auto;
    padding: 15px 10px;
    text-align: center;
    border: 3px #030303 solid;
    font-size: 160%;
    font-weight: bold;
    line-height: 1;
    color: #fff100;
    text-shadow: 1px 1px 0 #030303, -1px -1px 0 #030303,
                 -1px 1px 0 #030303, 1px -1px 0 #030303,
                 0px 1px 0 #030303,  0 -1px 0 #030303,
                 -1px 0 0 #030303, 1px 0 0 #030303;
}
.bakachingaTheater-heading {
    background: #ff9600;
}
.gogoBakachinga-heading {
    background: #1289b5;
}
.nicetomeetyouBakachinga-heading {
    background: #dc7667;
}
.slider {
    display: none;
}
.slider.slick-initialized {
    display: block;
}
#movie .slider .slick-slide {
    width: 580px;
    padding: 0 40px;
}
.center .slick-center {
    position: relative;
    transform: scale(1.2);
    z-index: 1;
}
.slider .slick-slide {
    transition: all .3s ease;
}
.movie-block {
    position: relative;
    display: block;
    margin: 80px 0 90px;
    box-shadow: 10px 10px 0px 0px #030303;
}
.movie-img {
    position: relative;
    display: block;
}
.movie-img::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../../img/movie-play.svg") no-repeat center center / contain;
    z-index: 10;
    transform: scale(.3);
}
.slider .slick-slide a img {
    width: 100%;
    height: auto;
}
.movie-tit {
    color: #fff;
    padding: 10px;
    font-size: 80%;
    line-height: 1.3;
}
.bakachingaTheater-tit {
    background: #ff9600;
}
.gogoBakachinga-tit {
    background: #1289b5;
}
.nicetomeetyouBakachinga-tit {
    background: #dc7667;
}
.slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 100px;
    cursor: pointer;
    z-index: 1;
}
.bakachingaTheater .slick-arrow {
    background: #ff9600;
}
.gogoBakachinga .slick-arrow {
    background: #1289b5;
}
.nicetomeetyouBakachinga .slick-arrow {
    background: #dc7667;
}
.slick-arrow.prev {
    left: 0;
}
.slick-arrow.next {
    right: 0;
}
.slick-arrow .arrow {
    width: 40%;
    position: relative;
    top: 50%;
    left: 40%;
    transform: translate(-40%, -50%);
}
.slick-arrow.next .arrow {
    transform: rotate(180deg) translate(60%, 50%);
    left: 60%;
    right: 0%;
}
#movie .btn-linkMore {
    margin: 0 auto 0;
}

/************************
music
************************/
.music-contents {
    padding-bottom: 100px;
}
.music-wrap {
    display: flex;
    flex-wrap:wrap;
    justify-content:space-between;
    max-width: 1000px;
    width: 85%;
    margin: 0 auto;
}
.music-block {
    flex-basis:calc((100% - 30px) / 2);
    max-width:calc((100% - 30px) / 2);
    border: 5px #030303 solid;
    box-shadow: 10px 10px 0px 0px #030303;
    padding: 10px;
    background: #fff;
}
.music-heading {
    text-align: center;
    font-size: 160%;
    line-height: 1.4;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 15px 0;
    border: 3px #030303 solid;
    background: #fff100;   
}
.music-subHeading {
    display: block;
    font-size: 80%;
}
.music-img {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 20px;
}
.music-img::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../../img/movie-play.svg") no-repeat center center / contain;
    z-index: 10;
    transform: scale(.3);
}
.music-img img {
    width: 100%;
    display: block;
}
.music-details {
    text-align: center;
}
.music-tit {
    font-size: 130%;
    font-weight: bold;
    line-height: 1.1;
    margin-bottom: 15px;
}
.songWriter {
    margin-bottom: 15px;
}
.songWriter li {
    font-size: 95%;
    line-height: 1.2;
    margin-bottom: 10px;
}
.songWriter li:last-child {
    margin-bottom: 0;
}
.music-staff {
    display: inline-block;
    background: #a83024;
    box-shadow: 2px 2px 0px 0px #ffa79e;
    color: #fff;
    font-size: 100%;
    font-weight: bold;
    padding: 10px 20px;
}
.modaal-content-container {
    background: #a83024;
    box-shadow: 5px 5px 0px 0px #ffa79e;
}
.modaal-content-container li {
    list-style: none;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 15px;
    color: #fff;
}
.modaal-content-container li:last-child {
    margin-bottom: 0;
}
.modaal-content-container li span {
    display: block;
    color: #fff000;
    font-size: 120%;
    font-weight: bold;
}

/************************
download
************************/
#download {
    background-color: #0091c0;
    position: relative;
    overflow: hidden;
    z-index: 0;
}
#download::before {
    content: '';
    display: block;
    background: url("../../img/download-back.svg") no-repeat left top;
    position: absolute;
    left: 50%;
    top: -50px;
    transform: translateX(-50%);
    width: 65%;
    height: 100%;
    z-index: -1;
}
.download-contents {
    padding-bottom: 100px;
}
.download-wrap {
    display: flex;
    flex-wrap:wrap;
    justify-content:space-between;
    max-width: 1000px;
    width: 85%;
    margin: 0 auto;
}
.download-block {
    position: relative;
    flex-basis:calc((100% - 30px) / 2);
    max-width:calc((100% - 30px) / 2);
    border: 5px #030303 solid;
    box-shadow: 10px 10px 0px 0px #030303;
    padding: 10px;
    background: #fff;
    z-index: 0;
}
.download-block::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../../img/back-dot.png);
    background-color: rgba(255,255,255,0.9);
    background-blend-mode: lighten;
    z-index: -1;
}
.download-heading {
    text-align: center;
    font-size: 160%;
    line-height: 1;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 15px 0;
    border: 3px #030303 solid;
    background: #fff;   
}
.download-img {
    width: 100%;
    margin-bottom: 20px;
}
.download-img img {
    width: 100%;
    display: block;
}
.download-btn {
    position: relative;
    display: block;
    background: #030303;
    padding: 15px 10px;
    border-radius: 50px;
    text-align: center;
    color: #fff;
    font-size: 110%;
}
.download-btn img {
    position: absolute;
    top: 50%;
    right: 30px;
    width: 20px;
    transform: translateY(-50%);
}

/************************
work
************************/
.work-contents {
    padding-bottom: 180px;
}

/************************
footer
************************/
footer {
    width: 100%;
    position: relative;
    background: #a83024;
    padding: 60px 0 10px;
    margin-top: 180px;
}
/* page top */
#pagetop {
    position: absolute;
    left: 50%;
    top: -130px;
    z-index: 1;
    transform: translateX(-50%);
    text-align: center;
    cursor: pointer;
}
.pagetop-fukidashi {
    display: block;
    margin: 0 0 8px;
}
.pagetop-illust {
    display: block;
    margin: 0 auto;
    background: #a83024;
    padding: 10px;
    border-radius: 80px;
    transform-origin: 50% 100%;
}
.pagetop-fukidashi img,
.pagetop-illust img {
    display: block;
    margin: 0 auto;
}
#pagetop:hover .pagetop-fukidashi  {
    animation:shake 0.4s ease;
}
 
@keyframes shake {
    0%   { transform:rotate(0); }
    16%  { transform:rotate(12deg); }
    32%  { transform:rotate(-10deg); }
    48%  { transform:rotate(8deg); }
    64%  { transform:rotate(-6deg); }
    80%  { transform:rotate(4deg); }
    96%  { transform:rotate(-2deg); }
    100% { transform:rotate(0deg); }
}
.fbs a {
    display: block;
    width: 100px;
    margin: 0 auto 10px;
}
.fbs a img {
    display: block;
    width: 100%;
}
.fbs small {
    display: block;
    color: #fff;
    font-size: 75%;
    line-height: 1.3;
    text-align: center;
}


@media all and (max-width: 1000px) {
.mainvisual-contents {
    min-height: 800px;
}
.logo {
    width: 75%;
    position: absolute;
    top: 25px;
    left: 10px;
}
.shikaru-img {
    width: 60%;
    top: 22vw;
    right: 0;
}
.word {
    width: 39%;
    top: 22vw;
    left: 10%;
}
.shikaru-btn {
    width: 110px;
    margin-bottom: 15px;
}
.sound-btn {
    width: 110px;
}

}

@media all and (max-width: 812px) {
/************************
common
************************/
/* heading */
.heading {
    height: 150px;
    padding: 30px 20px 20px;
}

/* 一覧はこちら */
.btn-linkMore a {
    font-size: 100%;
}

/************************
slide menu
************************/
.fixed-menu {
    width: 230px;
}
.mainvisual-menu {
    top: 40px;
    right: 10px;
    width: 120px;
    padding: 15px 0;
}
.hamburger {
    margin-right: 10px;
    width: 25px;
    height: 18px;
}
.hamburger hr {
    margin: 0 0 6px;
    border-bottom: 2px solid #fff;
}
.mainvisual-menuInner img {
    width: 60px;
}
.menu-open {
    width: 100vw;
}
.close-btn {
    top: 15px;
    right: 30px;
}
.menu-sns ul {
    width: 250px;
    /*width: 80px;*/
    margin: 16vh auto 6vh;
}
.menu-tit ul {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
}
.menu-tit ul li {
    font-size: 130%;
}

/************************
mainvisual
************************/

.mainvisual-contents {
    width: 95%;
}
.shikaru-img {
    width: 80%;
    top: 25vw;
    right: -15%;
}
.word {
    width: 47%;
    top: 24vw;
    left: 4%;
}
.voice-btn {
    left: 2vw;
}
.shikaru-btn {
    width: 110px;
    margin-bottom: 8px;
}
.sound-btn {
    width: 110px;
}

/************************
menu
************************/
#menu {
    padding: 20px 0 10px;
}
.menu {
    width: 90%;
}
.menu li {
    margin-bottom: 15px
}
.menu li:nth-child(3n-1) {
    margin: 0 2% 15px;
}
.menu li a {
    padding: 15px 10px;
    font-size: 160%;
}

/************************
intriduction
************************/
.introTxt-wrap {
    width: 90%;
    padding: 30px;
    margin: 0 auto 60px;
}
.introCopy {
    margin-bottom: 30px;
}
.introCopy span {
    font-size: 190%;
}
.introCopy-img {
    height: 60px;
}
.sns-heading {
    height: 120px;
    margin-bottom: 20px;
}
.sns-wrap {
    width: 90%;
    margin: 0 auto;
}
.sns-block a h4 img {
    width: 35px;
    height: 35px;
}
.sns-block a h4 span {
    font-size: 140%;
}
.media a::before {
    width: 20px;
    height: 20px;
    background-size: 10px 10px;
}

/************************
news, work
************************/
.notice-wrap {
    width: 90%;
    padding: 20px;
}
.notice-list ul li a {
    margin-bottom: 20px;
}
.notice-thumb {
    margin-right: 2%;
    width: 45%;
}
.notice-tit {
    width: 68%;
}
.notice-tit dt {
    font-size: 100%;
}
.notice-tit dd {
    font-size: 95%;
}



/************************
character
************************/
#character::before,
#character::after {
    left: -7%;
    width: 100%;
    height: 100%;
}
#character::after {
    left: inherit;
    right: -7%;
}
.character-wrap {
    width: 90%;
    padding: 30px;
}
.charaDetail {
    width: 60%;
}
.charaName-pc {
    width: 95%;
    margin-bottom: 20px;
}
.charaDetail p {
    font-size: 95%;
}
.charaDetail-txtImg {
    height: 4vw;
    vertical-align: -10px;
}
.profile01-img {
    width: 40%;
}
.profile01-img img {
    max-width: 120%;
    width: 38vw;
    top: -9vw;
    right: -2vw;
}
.charaInfo-header {
    font-size: 140%;
}
.charaInfo-detail {
    display: block;
    justify-content: inherit;
    padding: 20px;
}
.charaInfo-profile {
    width: 100%;
    margin: 0 0 20px 0;
}
.charaInfo-profile dt {
    padding: 10px 0 10px 10px;
    font-size: 95%;
}
.charaInfo-profile dd {
    font-size: 90%;
    background-size: 20px 20px;
}
.profile02-img {
    width: 100%;
}

/************************
sns
************************/
.tv-wrap,
.net-wrap {
    width: 90%;
    padding: 20px;
}
.onair-heading {
    font-size: 140%;
    margin-bottom: 15px;
    padding: 15px 0;
}
.tv-onairTime {
    font-size: 120%;
    line-height: 1.8;
    letter-spacing: 4px;
} 
.net-streamingServices {
    width: 100%;
}
.net-streamingServices li a {
    padding: 5px 10px;
}
.net-streamingServices li a span {
    font-size: 120%;
}

/************************
movie
************************/
.movie-heading {
    width: 80%;
    font-size: 140%;
}
.gogoBakachinga {
    margin-bottom: 70px;
}
#movie .slider .slick-slide {
    max-width: 500px;
    width: 76vw;
    padding: 0 30px;
}
.movie-block {
    margin: 50px 0 50px;
}
.slick-arrow {
    width: 30px;
}

/************************
music
************************/
.music-wrap {
    width: 90%;
}
.music-block {
    flex-basis: calc((100% - 20px) / 2);
    max-width: calc((100% - 20px) / 2);
}
.music-heading {
    font-size: 130%;
    padding: 10px 5px;
}
.music-img {
    margin-bottom: 15px;
}
.music-tit {
    font-size: 110%;
    margin-bottom: 10px;
}
.songWriter li {
    font-size: 95%;
    margin-bottom: 6px;
}

/************************
download
************************/
#download::before {
    top: -30px;
    width: 90%;
    height: 90%;
}
.download-wrap {
    width: 90%;
}
.download-block {
    flex-basis: calc((100% - 20px) / 2);
    max-width: calc((100% - 20px) / 2);
}
.download-heading {
    font-size: 130%;
    padding: 10px 5px;
}
.download-img {
    margin-bottom: 15px;
}
.download-tit {
    font-size: 110%;
    margin-bottom: 10px;
}
.download-btn {
    padding: 15px 10px;
    font-size: 95%;
}
.download-btn img {
    right: 20px;
    width: 20px;
}

/************************
work
************************/


/************************
footer
************************/
footer {
    padding: 50px 0 10px;
}
/* page top */
#pagetop {
    top: -120px;
}
.pagetop-fukidashi img{
    width: 80px;
    height: auto;
}
.pagetop-illust img {
    width: 70px;
    height: auto;
}
.fbs a {
    width: 100px;
    margin: 0 auto 10px;
}
.fbs small {
    font-size: 65%;
}

}



@media all and (max-width: 580px) {
/************************
common
************************/
/* heading */
.heading {
    height: 32vw;
    padding: 7vw 3vw;
}
/* 一覧はこちら */
.btn-linkMore a {
    font-size: 4.2vw;
}

/************************
menu
************************/
.fixed-menu {
    width: 37.5vw;
}
.mainvisual-menu {
    width: 54px;
    padding: 10px 0;
    top: 15px;
    right: 5px;
}
.mainvisual-menuInner {
    display: block;
}
.hamburger {
    margin: 0 auto 6px;
    width: 18px;
    height: 16px;
}
.hamburger hr {
    margin: 0 0 5px;
}
.mainvisual-menuInner img {
    display: block;
    width: 25px;
    margin: 0 auto;
}
.menu-sns ul {
    width: 200px;
}

.menu-tit ul {
    width: 100%;
}
.menu-tit ul li {
    flex-basis: calc((100% - 35px) / 2);
    max-width: calc((100% - 35px) / 2);
    font-size: 3.7vw;
}
.menu-tit ul li:first-child::after {
    width: 30px;
    height: 30px;
    right: -35px;
}

/************************
mainvisual
************************/
.mainvisual-contents {
    padding: 30px 0 10px;
    width: 95%;
    min-height: 800px;
    height: calc(100vh - 45px);
}
.logo {
    top: 20px;
}
.shikaru-img {
    width: 78%;
    top: 30vw;
    right: -15%;
}
.word {
    width: 53%;
    top: 27vw;
    left: 0%;
}
.voice-btn {
    left: 2vw;
    top: 110vw;
    bottom: inherit;
}
.shikaru-btn {
    width: 110px;
    margin-bottom: 8px;
}
.sound-btn {
    width: 110px;
}

/************************
menu
************************/
#menu {
    padding: 16px 0 6px;
}
.menu {
    width: 96%;
}
.menu li {
    border: 3px #030303 solid;
    box-shadow: 3px 3px 0px 0px #030303;
    margin-bottom: 12px
}
.menu li:nth-child(3n-1) {
    margin: 0 2% 12px;
}
.menu li a {
    padding: 12px 6px;
    font-size: 4.5vw;
}

/************************
introduction
************************/
#introduction {
    padding-bottom: 30px;
}
.introTxt-wrap {
    padding: 10px;
    margin: 0 auto 40px;
}
.introCopy {
    margin-bottom: 20px;
}
.introCopy span {
    border: 3px #030303 solid;
    font-size: 4.5vw;
    padding: 6px;
}
.introCopy span:first-child {
    margin-bottom: 10px;
}
.introCopy-img {
    height: 13vw;
}
.introTxt {
    font-size: 110%;
}
.sns-heading {
    height: 22vw;
    margin-bottom: 10px;
}
.introSns-wrap {
    margin-bottom: 25px;
}
.sns-block {
    flex-basis: calc((100% - 20px) / 2);
    max-width: calc((100% - 20px) / 2);
    box-shadow: 5px 5px 0px 0px #030303;
    margin-bottom: 20px;
}
.sns-block:hover {
    transform: none;
    transition: unset;
}
.sns-block:hover::after {
    transform: none;
    background-image: none;
    animation: none;
}
.sns-block a h4 {
    padding: 5px 5px 0px;
}
.sns-block a h4 img {
    width: 6vw;
    height: 30px;
    margin-right: 1.5vw;
}
.sns-block a h4 span {
    font-size: 3.9vw;
}
.links-wrap {
    width: 95%;
}
.media {
    flex-basis: calc((100% - 25px) / 3);
    max-width: calc((100% - 25px) / 3);
    border: 2px #030303 solid;
    box-shadow: 5px 5px 0px 0px #030303;
    margin-bottom: 15px;
}
.media-remark {
    flex-basis: calc((100% - 15px) / 2);
    max-width: calc((100% - 15px) / 2);
}
.media a::after {
    right: 4px;
    bottom: 3px;
    width: 25px;
    height: 25px;
    background-size: 11px 11px;
}
.media a:hover::after {
    transform: none;
    transition-duration: unset;
    opacity: 1;
}
.media a::before {
    display: none;
}
.media a:hover::before {
    opacity: 0;
    transition-duration: unset;
}
.media a:hover img {
    opacity: 1;
    transform: none;
    transition-duration: unset;
}


/************************
news, work
************************/
.news-contents {
    padding-bottom: 60px;
}
.notice-wrap {
    padding: 15px;
}
.notice-list ul li a {
    
}
.notice-thumb {
    margin-right: 2%;
    width: 45%;
}
.notice-tit {
    width: 68%;
}
.notice-tit dt {
    font-size: 3.9vw;
}
.notice-tit dd {
    font-size: 3.5vw;
}
.btn-linkMore {
    width: 85%;
    margin: 30px auto 0;
}

/************************
character
************************/
#character::before,
#character::after {
    left: -6%;
}
#character::after {
    left: inherit;
    right: -6%;
}
.character-contents {
    padding-bottom: 60px;
}
.character-wrap {
    padding: 10px;
}
.profile01 {
    display: flex;
    flex-direction: column;
}
.charaName-sp {
    display: block;
    width: 90%;
    margin: 0 auto 20px;
    order: 1;
}
.charaDetail {
    width: 100%;
    order: 3;
}
.charaName-pc {
    display: none;
}
.charaDetail p {
    font-size: 3.5vw;
}
.charaDetail-txtImg {
    height: 6vw;
    vertical-align: -6px;
}
.profile01-img {
    width: 70%;
    margin: 0 auto 20px;
    order: 2;
}
.profile01-img img {
    max-width: 100%;
    width: 100%;
    top: inherit;
    right: inherit;
}
.charaInfo-header {
    font-size: 5vw;
}
.charaInfo-detail {
    padding: 10px;
}
.charaInfo-profile {
    margin: 0 0 20px 0;
}
.charaInfo-profile dt {
    padding: 10px 0 10px 10px;
    font-size: 3.8vw;
}
.charaInfo-profile dd {
    font-size: 3vw;
    background-size: 15px 15px;
}

/************************
sns
************************/
.sns-contents {
    padding-bottom: 60px;
}
.tv-wrap,
.net-wrap {
    width: 90%;
    padding: 10px;
}
.onair-heading {
    font-size: 5vw;
}
.tv-onairTime {
    font-size: 3.5vw;
    text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff,
                 -1px 1px 0 #fff, 1px -1px 0 #fff,
                 0px 1px 0 #fff,  0-1px 0 #fff,
                 -1px 0 0 #fff, 1px 0 0 #fff;
} 
.net-streamingServices {
    width: 100%;
    display: block;
}
.net-streamingServices li {
    width: 100%;
    margin-bottom: 10px;
}
.net-streamingServices li:nth-child(odd) {
    margin-right: 0;
    margin-bottom: 10px;
}
.net-streamingServices li:last-child {
    margin-bottom: 0;
}
.net-streamingServices li a {
    padding: 5px 10px;
}
.net-streamingServices li a img {
    width: 40px;
    height: 40px;
}
.net-streamingServices li a span {
    font-size: 4.2vw;
}

/************************
movie
************************/
.movie-contents {
    padding-bottom: 60px;
}
.movie-heading {
    width: 85%;
    font-size: 5vw;
}
#movie .slider .slick-slide {
    width: 74vw;
    padding: 0 20px;
}
.movie-block {
    margin: 35px 0 45px;
}
.center .slick-center {
    transform: scale(1.1);
}
.movie-img::before {
    transform: scale(.4);
}

/************************
music
************************/
.music-contents {
    padding-bottom: 60px;
}
.music-wrap {
    display: block;
}
.music-block {
    max-width: 100%;
    width: 100%;
}
.music-opening {
    margin-bottom: 30px;
}
.music-heading {
    font-size: 5vw;
}
.music-tit {
    font-size: 130%;
}

/************************
download
************************/
#download::before {
    top: -55px;
    width: 90%;
    height: 90%;
}
.download-contents {
    padding-bottom: 60px;
}
.download-wrap {
    display: block;
}
.download-block {
    max-width: 100%;
    width: 100%;
}
.mask {
    margin-bottom: 30px;
}
.download-heading {
    font-size: 5vw;
}
.download-btn {
    font-size: 4.5vw;
}
.download-btn img {
    right: 20px;
    width: 5.3vw;
}

/************************
work
************************/
.work-contents {
    padding-bottom: 170px;
}

/************************
footer
************************/

}

@media all and (max-width: 430px) {
.mainvisual-contents {
    min-height:inherit ;
    height: 100vh;
}
}