#header {
    display: none
}
@media only screen and (max-width: 768px) {
    #header {
        display: block
    }
}
#intro {
    overflow: hidden;
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 593px;
    background: #000
}
#intro .boxWrap {
    position: absolute;
    top: 85px;
    left: 0;
    width: 100%;
    height: 508px
}
#intro .boxWrap .intro1 {
    position: absolute;
    z-index: 1;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 508px;
    background-image: url(../img/top/intro1.jpg);
    background-position: center top
}
#intro .boxWrap .intro2 {
    position: absolute;
    z-index: 2;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 508px;
    background-image: url(../img/top/intro2.jpg);
    background-position: center top
}
#intro .boxWrap .intro3 {
    position: absolute;
    z-index: 3;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 508px;
    background-image: url(../img/top/intro3.jpg);
    background-position: center top
}
#intro .boxWrap .intro4 {
    position: absolute;
    z-index: 4;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 508px;
    background-image: url(../img/top/intro4.jpg);
    background-position: center top
}
@media only screen and (max-width: 768px) {
    #intro {
        position: fixed;
        height: 100vh
    }
    #intro .boxWrap {
        top: 0;
        height: 100vh
    }
    #intro .boxWrap .intro1 {
        height: 100vh;
        background-size: 1500px auto
    }
    #intro .boxWrap .intro2 {
        height: 100vh;
        background-size: 1500px auto
    }
    #intro .boxWrap .intro3 {
        height: 100vh;
        background-size: 1500px auto
    }
    #intro .boxWrap .intro4 {
        height: 100vh;
        background-size: 1500px auto
    }
}
#topMenu {
    z-index: 1;
    top: 0;
    width: 100%;
    min-width: 1000px;
    padding: 19px 0;
    box-sizing: border-box;
    background-color: #000
}
#topMenu nav {
    text-align: center
}
#topMenu nav ul {
    display: inline-block
}
#topMenu nav ul li {
    display: inline-block;
    padding: 0 15px;
    border-right: 2px solid #fff;
    font-size: 16px;
    font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "Sawarabi Mincho", “メイリオ”, Meiryo, serif;
    line-height: 1;
    vertical-align: middle
}
#topMenu nav ul li:first-child {
    border-left: 2px solid #fff
}
#topMenu nav ul li a {
    color: #fff
}
#topMenu nav ul li.twitter {
    border-right: none;
    padding: 0 0 0 20px
}
#topMenu nav ul li.facebook {
    border-right: none;
    padding: 0 0 0 5px
}
@media only screen and (max-width: 768px) {
    #topMenu {
        display: none
    }
}
#keyvisual {
    width: 100%;
    height: 593px;
    background-color: #000
}
#keyvisual .spSlider {
    display: none
}
#keyvisual .slider {
    height: 593px;
    background-image: url(../img/top/bg-slider.jpg);
    background-color: #000;
    background-position: center 85px;
    background-repeat: repeat-x
}
#keyvisual .slider .thumb {
    position: absolute;
    z-index: 199;
    top: 1px;
    width: 100%;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    background-color: #000
}
#keyvisual .slider .thumb div .slick-slide .item img {
    transition: 0.3s ease all
}
#keyvisual .slider .thumb div .slick-slide .item .cover {
    opacity: 0.5
}
#keyvisual .slider .thumb div .slick-center .item .cover {
    opacity: 1
}
#keyvisual .slider .thumb div .item {
    position: relative;
    border-right: 1px solid #000;
    line-height: 0;
    cursor: pointer
}
#keyvisual .slider .thumb div .item img {
    width: auto;
    height: 81px
}
#keyvisual .slider .thumb div .item .overlay {
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0
}
#keyvisual .slider .thumb div .item:hover .overlay {
    opacity: 1
}
#keyvisual .slider .inner {
    position: relative;
    width: 1100px;
    margin: 0 auto;
    background-color: #1d0000
}
#keyvisual .slider .inner .news img {
    margin: 0 auto
}
#keyvisual .slider .inner .detail {
    float: left;
    width: 356px;
    height: 508px;
    margin-top: 85px;
    background-color: #1d0000
}
#keyvisual .slider div.inner div.detail h1 {
    margin: 10px 0 20px 0;
    line-height: 0
}
#keyvisual .slider div.inner div.thumb ul li:first-child {
    width: 113px
}
#keyvisual .slider div.inner div.thumb ul li:hover {
    opacity: 1 !important
}
#keyvisual .slider div.inner div.thumb ul li img.over {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0
}
#keyvisual .slider div.inner div.thumb ul li:hover img.target, #keyvisual .slider div.inner div.thumb ul li.current img.target {
    opacity: 0
}
#keyvisual .slider div.inner div.image {
    position: relative;
    float: right;
    overflow: hidden;
    width: 744px;
    height: 508px;
    margin-top: 85px;
    line-height: 0;
    background-color: #000
}
#keyvisual .slider div.inner div.image .popup {
    position: absolute;
    top: 0;
    left: 0
}
#keyvisual .slider div.inner div.image div.number {
    position: absolute;
    z-index: 6;
    top: 0;
    left: 0
}
#keyvisual .slider div.inner div.image > div:first-child {
    display: block
}
#keyvisual .slider div.inner div.image div#vol0 {
    opacity: 1;
    z-index: 100
}
#keyvisual .slider div.inner div.image div#vol0 div.panel1 img {
    margin-right: 200px;
    width: 100%
}
#keyvisual .slider div.inner div.image div#vol0 div.panel2 {
    opacity: 0;
    left: 597px
}
#keyvisual .slider .obj {
    position: absolute;
    z-index: 100;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 72px;
    background-image: url(../img/top/slider/obj@2x.png);
    background-size: 2400px 72px
}
@media only screen and (max-width: 768px) {
    #content {
        padding-top: 37px
    }
    #keyvisual {
        width: 100%;
        height: auto;
        background: #feda00
    }
    #keyvisual .spSlider {
        display: block;
        position: relative;
        margin: 0 -10px
    }
    #keyvisual .spSlider img {
        width: 100%
    }
    #keyvisual .spSlider .overlay {
        position: absolute;
        z-index: 1;
        top: 0;
        width: 100%
    }
    #keyvisual .slider {
        height: auto;
        margin: 0 -10px
    }
    #keyvisual .slider .thumb {
        position: static
    }
    #keyvisual .slider .inner {
        width: 100%
    }
    #keyvisual .slider .inner .image {
        display: none
    }
    #keyvisual .slider .inner .detail {
        float: none;
        width: 100% !important;
        height: auto;
        margin: 0;
        padding: 10px 0
    }
    #keyvisual .slider .inner .detail h1 {
        display: none
    }
    #keyvisual .slider .obj {
        display: none
    }
}
#topics {
    position: relative;
    width: 1000px;
    margin: 0 auto;
    padding: 40px 0
}
#topics .works {
    margin-bottom: 40px
}
#topics .works a {
    display: block;
    border: 1px solid #30120e;
    text-decoration: none
}
/*2023年1月10日更新のみ適用*/
#topics .works a:first-child {
    margin-bottom: 10px;
}
#topics .works a .springLog {
    position: relative;
    width: 1000px;
    height: 90px;
    background-image: url(../img/top/spring.jpg);
    background-size: 1000px 90px
}
#topics .works a .springLog .update {
    position: absolute;
    top: 28px;
    left: 0;
    width: 134px;
    font-size: 28px;
    font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "Sawarabi Mincho", “メイリオ”, Meiryo, serif;
    text-align: center;
    line-height: 1;
    color: #ffff00
}
#topics .works a .springLog .update span {
    font-size: 16px
}
#topics .works a .springLog .title {
    overflow: hidden;
    position: absolute;
    left: 560px;
    width: 420px;
    font-size: 22px;
    font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "Sawarabi Mincho", “メイリオ”, Meiryo, serif;
    line-height: 90px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #ffff00
}
#topics .topicsList li {
    margin-bottom: 10px
}
#topics .topicsList li.hidden {
    display: none
}
#topics .topicsList li a {
    display: block;
    text-decoration: none
}
#topics .topicsList li a > div {
    min-height: 68px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 2px solid #000;
    border-left: 1px solid #000;
    background-color: #fff;
    background-image: url(../img/top/right.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 18px auto;
    font-size: 0
}
#topics .topicsList li a > div .number {
    display: inline-block;
    width: 68px;
    background-color: #ff0000;
    font-size: 42px;
    font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "Sawarabi Mincho", “メイリオ”, Meiryo, serif;
    line-height: 68px;
    text-align: center;
    color: #fff;
    vertical-align: middle
}
#topics .topicsList li a > div .image {
    display: inline-block;
    vertical-align: middle
}
#topics .topicsList li a > div .text {
    overflow: hidden;
    display: inline-block;
    padding-left: 10px;
    width: 718px;
    font-size: 24px;
    line-height: 68px;
    color: #000;
    vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis
}
#topics .btnTopics {
    cursor: pointer
}
#topics .btnTopics span {
    display: block;
    padding: 5px;
    border: #ffda00 6px double;
    background-color: #2e120e;
    text-align: center
}
#topics .btnTopics span img {
    max-width: 100%
}
#topics h2 {
    margin-bottom: 40px;
    text-align: center
}
@media only screen and (max-width: 768px) {
    #topics {
        width: auto
    }
    #topics h2 img {
        width: calc(752/768*100%)
    }
/*    #topics .works {
        border: 1px solid #30120e
    }*/
    #topics .works a .springLog {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        justify-content: left;
        align-items: center;
        width: auto;
        height: auto;
        background-image: url(../img/top/topics-right.png), url(../img/top/spring-sp.jpg);
        background-size: auto, 100% auto;
        background-repeat: no-repeat;
        background-position: right center, center top;
        background-color: #30120e;
        padding: 5vw 0
    }
    #topics .works a .springLog .update {
        width: 16%;
        position: static;
        font-size: 18px;
        font-size: 2.92969vw;
        line-height: 1.2
    }
    #topics .works a .springLog .title {
        width: 84%;
        position: absolute;
        top: auto;
        right: 0;
        bottom: 1vw;
        left: auto;
        line-height: 1.2;
        text-align: center;
        font-size: 18px;
        font-size: 2.92969vw
    }
    #topics .topicsList li a > div {
        min-height: 0
    }
    #topics .topicsList li a > div .number {
        width: 40px;
        font-size: 24px;
        font-size: 3.90625vw;
        line-height: 52px
    }
    #topics .topicsList li a > div .image {
        width: 140.7px;
        line-height: 0
    }
    #topics .topicsList li a > div .image img {
        width: 100%
    }
    #topics .topicsList li a > div .text {
        width: calc(100% - 180.7px);
        padding-right: 30px;
        box-sizing: border-box;
        font-size: 16px;
        font-size: 2.60417vw;
        line-height: 1.1;
        white-space: inherit;
        text-overflow: inherit
    }
    #topics .btnTopics a {
        padding: 5px 20%
    }
}
#twitter {
    position: absolute;
    top: 40px;
    left: 1020px;
    width: 276px
}
#twitter .timeline-inner {
    overflow: scroll;
    height: 460px
}
#twitter-sp {
    display: none
}
@media only screen and (max-width: 768px) {
    #twitter {
        display: none
    }
    #twitter-sp {
        display: block;
        margin-top: 50px
    }
    #twitter-sp .timeline-inner {
        overflow: scroll;
        height: 600px
    }
    #twitter-sp .account a img {
    max-width: 100%;
}
}
#news {
    width: 1000px;
    margin: 0 auto;
    padding: 40px 0
}
#news h2 {
    margin-bottom: 40px;
    text-align: center
}
#news .btnNews a {
    display: block;
    padding: 5px;
    border: #ffda00 6px double;
    background-color: #2e120e;
    text-align: center
}
#news .btnNews a img {
    max-width: 100%
}
@media only screen and (max-width: 768px) {
    #news {
        width: auto
    }
    #news h2 img {
        width: calc(403/768*100%)
    }
    #news .btnNews a {
        padding: 5px 20%
    }
}
#works {
    width: 1000px;
    margin: 0 auto
}
#works nav ul li {
    overflow: hidden;
    position: relative;
    width: 480px;
    height: 480px;
    border-radius: 6px;
    box-shadow: 0px 0px 5px 1px #999
}
#works nav ul li:first-child {
    float: left
}
#works nav ul li:last-child {
    float: right
}
#works nav ul li a img {
    transition: all 0.3s ease-out
}
#works nav ul li a:hover img {
    transform: scale(1.1)
}
#works nav ul li p {
    position: absolute;
    z-index: 1;
    bottom: 50px;
    width: 100%;
    padding: 30px 0;
    background-color: rgba(0, 0, 0, 0.7);
    font-size: 30px;
    line-height: 1;
    letter-spacing: 0.2em;
    text-align: center;
    color: #fff
}
#works nav ul li p br {
    display: none
}
@media only screen and (max-width: 768px) {
    #works {
        width: auto
    }
    #works nav ul li {
        width: 48%;
        height: auto
    }
    #works nav ul li img {
        width: 100%
    }
    #works nav ul li p {
        bottom: 10%;
        padding: 10px 0;
        font-size: 18px;
        font-size: 2.92969vw
    }
    #works nav ul li p br {
        display: block
    }
}
video {
    display: inline-block;
    vertical-align: baseline
}
.popup {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: .6s
}
.popup.is-show {
    opacity: 1;
    visibility: visible
}
.popup-inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    padding: 50px;
    z-index: 2;
}
.movie-area {
    width: 80%;
    height: 0;
    position: relative;
    padding-bottom: 56.25%;
    margin: 0 auto;
    z-index: 2
}
.popup-inner iframe {
    position: absolute;
    width: 100%;
    height: 80%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto
}

.close-btn {
  position: absolute;
  right: 9%;
  top: 9%;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  z-index: 2; }

.close-btn i {
  font-size: 35px;
  color: #fff; 
}

.black-background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1;
    cursor: pointer;
}
.fa, .fas {
    font-weight: 900;
}
.fa, .far, .fas {
    font-family: "Font Awesome 5 Free";
}
.fa, .fab, .fal, .far, .fas {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}
.fa-times:before {
    content: "\f00d";

}
@media only screen and (max-width: 768px) {
  /*-----------------------------------------------
   .popup
  -----------------------------------------------*/
  .popup-inner {
    width: 90%; }

  .movie-area {
    width: 90%; }

  .popup-inner iframe {
    height: 95%; }

  .close-btn {
    top: 5%;
    right: 5%; }
}