.anim-item .anim-scale,
.anim-item.anim-scale,
.op-item .anim-scale,
.op-item.anim-scale {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition: opacity 0.1s ease 0.1s, -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s;
  transition: opacity 0.1s ease 0.1s, -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s;
  transition: opacity 0.1s ease 0.1s, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s;
  transition: opacity 0.1s ease 0.1s, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s, -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s;
}

.anim-item .anim-show,
.anim-item.anim-show,
.op-item .anim-show,
.op-item.anim-show {
  visibility: visible;
  -webkit-transition: all 0s ease 0s;
  transition: all 0s ease 0s;
}

.anim-item .anim-mask,
.anim-item.anim-mask,
.op-item .anim-mask,
.op-item.anim-mask {
  width: 100%;
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1) 0s;
  transition: all 0.3s cubic-bezier(1, 0, 0, 1) 0s;
}

.anim-item .anim-fade,
.anim-item.anim-fade,
.op-item .anim-fade,
.op-item.anim-fade {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  opacity: 1;
  -webkit-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px);
  -webkit-transition: opacity 1s ease 0s, -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: opacity 1s ease 0s, -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: opacity 1s ease 0s, transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: opacity 1s ease 0s, transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}

.anim-item .anim-fade2,
.anim-item.anim-fade2,
.op-item .anim-fade2,
.op-item.anim-fade2 {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  opacity: 1;
  -webkit-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px);
  -webkit-transition: opacity 1.5s ease 0s, -webkit-transform 4s ease-out 0s;
  transition: opacity 1.5s ease 0s, -webkit-transform 4s ease-out 0s;
  transition: opacity 1.5s ease 0s, transform 4s ease-out 0s;
  transition: opacity 1.5s ease 0s, transform 4s ease-out 0s, -webkit-transform 4s ease-out 0s;
}

.anim-item .anim-blur,
.anim-item.anim-blur,
.op-item .anim-blur,
.op-item.anim-blur {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  opacity: 1;
  -webkit-transition: opacity 1s ease 0s, -webkit-transform 2s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-filter 2s ease-out 0s;
  transition: opacity 1s ease 0s, -webkit-transform 2s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-filter 2s ease-out 0s;
  transition: opacity 1s ease 0s, transform 2s cubic-bezier(0.19, 1, 0.22, 1) 0s, filter 2s ease-out 0s;
  transition: opacity 1s ease 0s, transform 2s cubic-bezier(0.19, 1, 0.22, 1) 0s, filter 2s ease-out 0s, -webkit-transform 2s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-filter 2s ease-out 0s;
}

.anim-item.hide .anim-scale,
.anim-item.hide.anim-scale,
.op-item.hide .anim-scale,
.op-item.hide.anim-scale {
  opacity: 0;
  -webkit-transform: scale3d(0.5, 0.5, 1);
  transform: scale3d(0.5, 0.5, 1);
}

.anim-item.hide .anim-show,
.anim-item.hide.anim-show,
.op-item.hide .anim-show,
.op-item.hide.anim-show {
  visibility: hidden;
}

.anim-item.hide .anim-mask,
.anim-item.hide.anim-mask,
.op-item.hide .anim-mask,
.op-item.hide.anim-mask {
  width: 0;
}

.anim-item.hide .anim-fade,
.anim-item.hide.anim-fade,
.op-item.hide .anim-fade,
.op-item.hide.anim-fade {
  opacity: 0;
  -webkit-transform: translate3d(0px, 10px, 0px);
  transform: translate3d(0px, 10px, 0px);
}

.anim-item.hide .anim-fade2,
.anim-item.hide.anim-fade2,
.op-item.hide .anim-fade2,
.op-item.hide.anim-fade2 {
  opacity: 0;
  -webkit-transform: translate3d(0px, 30px, 0px);
  transform: translate3d(0px, 30px, 0px);
}

.anim-item.hide .anim-blur,
.anim-item.hide.anim-blur,
.op-item.hide .anim-blur,
.op-item.hide.anim-blur {
  opacity: 0;
  -webkit-filter: blur(4px);
  filter: blur(4px);
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

.anim-delay-1 {
  -webkit-transition-delay: 0.1s !important;
  transition-delay: 0.1s !important;
}

.anim-delay-2 {
  -webkit-transition-delay: 0.2s !important;
  transition-delay: 0.2s !important;
}

.anim-delay-3 {
  -webkit-transition-delay: 0.3s !important;
  transition-delay: 0.3s !important;
}

.anim-delay-4 {
  -webkit-transition-delay: 0.4s !important;
  transition-delay: 0.4s !important;
}

.anim-delay-5 {
  -webkit-transition-delay: 0.5s !important;
  transition-delay: 0.5s !important;
}

.anim-delay-6 {
  -webkit-transition-delay: 0.6s !important;
  transition-delay: 0.6s !important;
}

.anim-delay-7 {
  -webkit-transition-delay: 0.7s !important;
  transition-delay: 0.7s !important;
}

.anim-delay-8 {
  -webkit-transition-delay: 0.8s !important;
  transition-delay: 0.8s !important;
}

.anim-delay-9 {
  -webkit-transition-delay: 0.9s !important;
  transition-delay: 0.9s !important;
}

.anim-delay-10 {
  -webkit-transition-delay: 1s !important;
  transition-delay: 1s !important;
}

.anim-delay-11 {
  -webkit-transition-delay: 1.1s !important;
  transition-delay: 1.1s !important;
}

.anim-delay-12 {
  -webkit-transition-delay: 1.2s !important;
  transition-delay: 1.2s !important;
}

.anim-delay-13 {
  -webkit-transition-delay: 1.3s !important;
  transition-delay: 1.3s !important;
}

.anim-delay-14 {
  -webkit-transition-delay: 1.4s !important;
  transition-delay: 1.4s !important;
}

.anim-delay-15 {
  -webkit-transition-delay: 1.5s !important;
  transition-delay: 1.5s !important;
}

.anim-delay-16 {
  -webkit-transition-delay: 1.6s !important;
  transition-delay: 1.6s !important;
}

.anim-delay-17 {
  -webkit-transition-delay: 1.7s !important;
  transition-delay: 1.7s !important;
}

.anim-delay-18 {
  -webkit-transition-delay: 1.8s !important;
  transition-delay: 1.8s !important;
}

.anim-delay-19 {
  -webkit-transition-delay: 1.9s !important;
  transition-delay: 1.9s !important;
}

.anim-delay-20 {
  -webkit-transition-delay: 2s !important;
  transition-delay: 2s !important;
}

.anim-delay-21 {
  -webkit-transition-delay: 2.1s !important;
  transition-delay: 2.1s !important;
}

.anim-delay-22 {
  -webkit-transition-delay: 2.2s !important;
  transition-delay: 2.2s !important;
}

.anim-delay-23 {
  -webkit-transition-delay: 2.3s !important;
  transition-delay: 2.3s !important;
}

.anim-delay-24 {
  -webkit-transition-delay: 2.4s !important;
  transition-delay: 2.4s !important;
}

.anim-delay-25 {
  -webkit-transition-delay: 2.5s !important;
  transition-delay: 2.5s !important;
}

.anim-delay-26 {
  -webkit-transition-delay: 2.6s !important;
  transition-delay: 2.6s !important;
}

.anim-delay-27 {
  -webkit-transition-delay: 2.7s !important;
  transition-delay: 2.7s !important;
}

.anim-delay-28 {
  -webkit-transition-delay: 2.8s !important;
  transition-delay: 2.8s !important;
}

.anim-delay-29 {
  -webkit-transition-delay: 2.9s !important;
  transition-delay: 2.9s !important;
}

.anim-delay-30 {
  -webkit-transition-delay: 3s !important;
  transition-delay: 3s !important;
}

.anim-delay-31 {
  -webkit-transition-delay: 3.1s !important;
  transition-delay: 3.1s !important;
}

.anim-delay-35 {
  -webkit-transition-delay: 3.5s !important;
  transition-delay: 3.5s !important;
}

.anim-delay-36 {
  -webkit-transition-delay: 3.6s !important;
  transition-delay: 3.6s !important;
}

.anim-delay-37 {
  -webkit-transition-delay: 3.7s !important;
  transition-delay: 3.7s !important;
}

.anim-delay-38 {
  -webkit-transition-delay: 3.8s !important;
  transition-delay: 3.8s !important;
}

.anim-delay-39 {
  -webkit-transition-delay: 3.9s !important;
  transition-delay: 3.9s !important;
}

.anim-item.hide,
.anim-item.hide *,
.op-item.hide,
.op-item.hide * {
  -webkit-transition: all  0s 0s !important;
  transition: all  0s 0s !important;
}

body {
  background-color: #000;
  color: #fff;
  font-size: 17px;
  line-height: 2;
  -webkit-font-feature-settings: 'palt';
  font-feature-settings: 'palt';
}

img {
  border: none;
  display: block;
  vertical-align: top;
  max-width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

#container,
#move_area {
  font-size: 16px;
  overflow: hidden;
  position: relative;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  width: 100%;
  min-width: 1100px;
}

.area {
  padding: 0 0;
  text-align: center;
}

.area > .inner {
  margin: 0 auto;
  padding: 100px 0 80px;
  max-width: 1100px;
}

.area h1,
.area h2 {
  color: #fff;
  display: block;
  font-family: "Rokkitt", serif;
  font-size: 42px;
  letter-spacing: .05em;
  line-height: 1;
  padding-bottom: 1em;
  text-align: center;
  text-align: center;
}

.area h1 a,
.area h2 a {
  color: #fff !important;
}

.area h3 {
  font-family: "Rokkitt", serif;
  font-size: 32px;
  letter-spacing: .05em;
}

.area p {
  padding-bottom: 1em;
}

.area .btn {
  background: #131313;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  display: inline-block;
  font-family: "Rokkitt", serif;
  letter-spacing: 0.2em !important;
  line-height: 1.5;
  padding: .8em 1em;
  -webkit-transition: all .2s ease 0s;
  transition: all .2s ease 0s;
  width: 20em;
}

.area .btn:hover {
  background: rgba(255, 255, 255, 0.8);
  color: #000;
}

#move_footer {
  font-size: 10px;
  padding: .5em;
  padding: 0 0 50px;
  text-align: center;
}

#move_footer img {
  display: block;
  margin: 0 auto;
}

.btn_nextprev {
  background: transparent !important;
  border-bottom: 1px solid;
  font-family: "Rokkitt", serif;
  padding: 1em 2em 0.5em 2em !important;
  position: absolute;
  top: 150px;
}

.btn_nextprev.hide {
  opacity: 0;
  visibility: hidden;
}

.special {
  position: absolute;
  top: 30px;
  left: 30px;
}

.bddvd {
  position: absolute;
  top: 550px;
  left: 250px;
}


.btn_prev {
  padding: 1em 0.5em 0.5em 2em !important;
  top: 150px;
  left: 0;
}

.btn_next {
  padding: 1em 2em 0.5em 0.5em !important;
  top: 150px;
  right: 0;
}

.pc_txt {
  display: block;
}

.sp_txt {
  display: none;
}

.logobtn {
  background: transparent !important;
  padding: 0 !important;
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 101;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.logobtn img {
  display: block;
  height: 80px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.logobtn.fixed {
  position: fixed;
}

@media screen and (min-width: 0) and (max-width: 800px) {
  body {
    background: #31261f;
  }
  .area {
    box-sizing: border-box;
    padding: 60px 20px 20px;
  }
  #container,
  #move_area {
    min-width: 0;
  }
  #move_footer {
    background: #000;
    font-size: 3vw;
    line-height: 1.4;
    padding: 1em;
  }
  .pc_txt {
    display: none !important;
  }
  .sp_txt {
    display: block !important;
  }
}

#wb_header {
  position: relative;
  width: 100%;
  height: 59px;
  border-bottom: solid 1px #b2bfcd;
  z-index: 9990;
  background: #FFF;
  overflow: hidden;
}

#wb_header_logo {
  margin-left: 30px;
}

#wb_header_sns {
  position: absolute;
  right: 30px;
  top: 15px;
  width: 163px;
}

#wb_header_sns li {
  float: left;
  margin: 0 5px;
}

#footer_wrap {
  position: relative;
  width: 100%;
  z-index: 990;
  border-top: solid 1px #b2bfcd;
  background: #FFF;
  overflow: hidden;
}

footer {
  position: relative;
  width: 100%;
  color: #b5c7d8;
  padding: 30px 0 20px;
}

#wblogo {
  margin: 54px auto 25px;
  width: 50px;
}

.right {
  position: relative;
}

address {
  position: relative;
  margin-top: 18px;
  text-align: center;
  width: 100%;
  font-size: 14px;
  font-style: normal;
  color: #b5c7d8;
}

#footer_wrap a {
  color: #b5c7d8;
}

.links {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  width: 200px;
  height: 20px;
  line-height: 20px;
  font-size: 10px;
  margin: 20px auto 0;
}

.share {
  padding-top: 20px;
  margin: 0 auto;
}

.banner {
  text-align: center;
}

.banner li {
  display: inline-block;
  padding: 0 0.2em;
}

.banner img {
  height: 52px;
}

footer li {
  font-size: 14px !important;
  color: #b2bfcd !important;
}

@media screen and (min-width: 0px) and (max-width: 800px) {
  #wb_header {
    position: relative;
    width: 100%;
    height: 59px;
    min-width: auto;
    border-bottom: solid 1px #b2bfcd;
  }
  #wb_header_logo {
    margin-left: 15px;
  }
  #wb_header_sns {
    position: absolute;
    right: 5px;
  }
  #footer_wrap {
    min-width: 0;
    height: auto !important;
  }
  footer {
    position: relative !important;
    bottom: auto !important;
    height: auto !important;
    width: 100%;
    color: #2950bf;
  }
  #wblogo {
    margin: 20px auto 0px;
    width: 30px;
    margin-top: 20px !important;
  }
  #wblogo img {
    width: 30px;
    height: auto;
  }
  .links {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    width: 233px;
    width: 200px;
    height: 20px;
    line-height: 20px;
    font-size: 10px;
    margin: 20px auto 0;
  }
  footer li {
    font-size: 14px !important;
    color: #b2bfcd !important;
  }
  address {
    position: relative;
    width: 100%;
    font-style: normal;
    font-size: 10px;
    color: #b2bfcd;
    text-align: center !important;
    margin: 15px auto;
    top: 0;
    color: #d1d1d1;
    font-size: 10px;
    margin-top: 6px;
    font-style: normal;
  }
}

#menu {
  position: absolute;
  top: 0;
  right: -330px;
  z-index: 100;
  -webkit-transition: right 0.5s ease 0s;
  transition: right 0.5s ease 0s;
}

#menu > .inner {
  position: relative;
}

#menu .menu_cont {
  width: 330px;
  height: 100vh;
  background: url(../images/common/menu_bg.png) no-repeat center center;
  background-size: cover;
  padding: 50px;
}

#menu .menu_mark {
  display: block;
  width: 70px;
  height: 70px;
  background: url(../images/common/menu_mark.png) no-repeat center center;
  background-size: cover;
  -webkit-transition: all 0.2s ease 0s;
  transition: all 0.2s ease 0s;
  position: absolute;
  left: -70px;
  top: 20px;
  padding: 0;
}

#menu .logo {
  margin-bottom: 30px;
}

#menu nav a {
  display: block;
  background: transparent;
  letter-spacing: 0.05em;
  font-size: 20px;
  padding: 0.2em 0;
  color: white;
  font-family: "Rokkitt", serif;
}

#menu.fixed {
  position: fixed;
}

#menu.active {
  right: 0;
}

#menu.active .menu_mark {
  left: -90px;
  background-image: url(../images/common/menu_close.png);
}

@media screen and (min-width: 0px) and (max-width: 800px) {
  #menu {
    right: 0;
    height: 0;
  }
  #menu > .inner {
    height: 0;
  }
  #menu .menu_mark {
    width: 60px;
    height: 60px;
    left: auto;
    top: 10px;
    right: 0;
    z-index: 10;
  }
  #menu .logo {
    margin: 0 auto 30px;
    width: 70%;
  }
  #menu .menu_cont {
    width: 100vw;
    text-align: center;
    -webkit-transform: translateY(-100vh);
    -ms-transform: translateY(-100vh);
    transform: translateY(-100vh);
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    padding-top: 80px;
  }
  #menu.active .menu_cont {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  #menu.active .menu_mark {
    left: auto !important;
    background-image: url(../images/common/menu_close.png);
  }
}

#main {
  position: relative;
  width: 100%;
  height: 800px;
  overflow: hidden;
}

#main > div {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#main .pc_view {
  background: url("../images/top/v.jpg") no-repeat center top #000;
  background-size: auto 100%;
}

#main .pc_view > .inner {
  position: relative;
  min-width: 1100px;
  max-width: 1600px;
  height: 100%;
  margin: 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

#main .pc_view > .inner .logo {
  padding-bottom: 40px;
}

#main .pc_view > .inner .txt {
  text-align: center;
  width: 55%;
}

#main .pc_view > .inner .txt img {
  margin: 0 auto;
}

#main .pc_view > .inner .v {
  position: absolute;
  bottom: 0;
  left: -137px;
}

#main .pc_view .cast {
  padding: 0px 0px 30px;
}

#main .pc_view .copy1 {
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
}

#main .pc_view .copy1 img {
  display: block;
  margin: 0 auto;
}

#main .pc_view .copy2 {
  position: absolute;
  left: 50%;
  top: 130px;
  margin-left: -40px;
}

#main .sp_view {
  display: none;
}

#main .pc_view {
  display: block;
}

#main .rightbottom {
  position: absolute;
  right: 30px;
  bottom: 30px;
  width: auto;
  height: auto;
}

#main .rightbottom .banner a {
  padding: 0;
}

#main .rightbottom .banner img {
  height: 64px;
}

#main .comment {
  position: relative;
  padding-bottom: 0.5em;
}

#main .comment > a {
  background: #d78354;
  display: block;
  padding: 10px 5px 0;
  padding: 0px 5px 0;
  color: #fff;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
  -webkit-transition: all 0.2s ease 0s;
  transition: all 0.2s ease 0s;
}

#main .comment > a > dl > dt {
  padding-bottom: 8px;
  padding-top: 8px;
  color: #000;
  font-weight: bold;
  font-size: 18px;
  padding-top: 0.3em;
  letter-spacing: 0;
}

#main .comment > a > dl > dt img {
  display: block;
  margin: 0 auto;
  max-width: 85%;
}

#main .comment ul {
  position: relative;
  height: 160px;
  overflow: hidden;
  display: block;
  background: #000;
  font-weight: bold;
  color: #d78354;
}

#main .comment ul li {
  padding: 0.8em 0.5em 0.5em;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

#main .comment ul li.active {
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 0.5s ease 0.5s;
  transition: all 0.5s ease 0.5s;
}

#main .comment ul .n {
  font-size: 17px;
  line-height: 1.4;
}

#main .comment ul .p {
  font-size: 10px;
  line-height: 1.4;
}

#main .comment ul .p:after {
  content: " ";
  display: block;
  width: 20%;
  height: 3px;
  background: #d78354;
  margin: 0.8em auto;
}

#main .comment ul .t {
  line-height: 1.5;
  text-align: left;
  font-weight: normal;
  color: #fff;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

#main .comment .link {
  color: #000;
  font-weight: bold;
  padding: 0.3em 0;
  font-family: "Rokkitt", serif;
}

#main .leftbottom {
  position: absolute;
  left: 30px;
  bottom: 20px;
  width: 15%;
  max-width: 400px;
  height: auto;
}

#main .leftbottom .hash {
  text-align: center;
}

#main .leftbottom .hash a {
  color: #fff;
  background: transparent;
  padding: 0;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 0.05em;
}

#main .leftbottom .ticket {
  padding-top: 0.5em;
}

#main .leftbottom .ticket a {
  color: #ffd200;
  font-size: 18px;
  background: url(../images/common/bg_btn.png) no-repeat center center;
  background-size: cover;
  display: block;
  width: 220px;
  height: 64px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0;
  letter-spacing: 0.2em;
  font-family: "Rokkitt", serif;
}

.kanso_top {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;
  border-top: 5px solid #31261f;
}

.kanso_top > figure {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.kanso_wrap {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  overflow: hidden;
}

.kanso_inner {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.kanso_inner.active {
  -webkit-animation: kanso 100s linear 0s infinite;
  animation: kanso 100s linear 0s infinite;
}

.kanso_inner a {
  color: #d78354;
  font-weight: bold;
}

.kanso_inner dl {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0 12px;
}

.kanso_inner dt {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.kanso_inner dt a {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  color: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.kanso_inner dt figure {
  border-radius: 100%;
  overflow: hidden;
  margin-right: 9px;
  width: 34px;
  height: 34px;
}

.kanso_inner dd {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-left: 15px;
}

@-webkit-keyframes kanso {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes kanso {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@media screen and (min-width: 0px) and (max-width: 800px) {
  #main {
    height: auto;
  }
  #main > div {
    overflow: auto;
  }
  #main .sp_view {
    display: block !important;
  }
  #main .sp_view img {
    display: block;
    width: 100%;
  }
  #main .pc_view {
    display: none !important;
  }
  #main .rightbottom {
    position: relative !important;
    bottom: auto;
    right: auto;
    text-align: center;
    margin: 0 auto;
    padding-top: 20px;
  }
  #main .rightbottom img {
    margin: 0 auto;
  }
  #main .leftbottom {
    position: relative !important;
    bottom: auto;
    left: auto;
    width: auto;
    padding: 30px 30px 0;
    text-align: center;
  }
  #main .leftbottom .hash {
    padding-top: 0.5em;
    font-size: 4.5vw;
    padding-bottom: 0.5em;
  }
  #main .leftbottom .hash a {
    color: rgba(255, 255, 255, 0.8);
  }
  #main .leftbottom .ticket a {
    display: block;
    background: #000;
    width: 100%;
    text-align: center;
    padding: 1em 3em;
    height: auto;
  }
  .kanso_pc {
    display: none;
  }
  .kanso_sp {
    display: block;
  }
  .kanso_wrap {
    border-top: 2px solid #31261f;
    padding: 4.88889vw 0;
    background: #000;
  }
  .kanso_inner {
    font-size: 3.73333vw;
  }
  .kanso_inner dl {
    padding: 0 4.44444vw;
    font-size: 3.5vw;
  }
  .kanso_inner dt {
    font-size: 3.37778vw;
  }
  .kanso_inner dt figure {
    margin-right: 1.77778vw;
    width: 8.26667vw;
    height: 8.26667vw;
  }
  .kanso_inner dd {
    font-weight: bold;
    padding-left: 1em;
  }
}

#banner_area {
  background: #131313;
  margin: 0 auto;
}

#banner_area > .inner {
  padding-bottom: 0px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-top: 20px;
}

#banner_area .article {
  display: block;
  margin: 0 auto;
  position: relative;
  -webkit-box-align: top;
  -webkit-align-items: top;
  -ms-flex-align: top;
  align-items: top;
}

#banner_area .article.hide {
  display: none !important;
}

#banner_area .banner_article {
  width: calc(100% / 4);
  display: block;
  margin: 0 !important;
  padding: 0px 10px 40px !important;
}

#banner_area .banner_article.hide {
  display: none;
}

#banner_area .banner_article .banner_thumb {
  width: auto !important;
}

#banner_area .banner_article .banner_thumb img {
  width: 100%;
}

#banner_area .banner_article .title {
  padding-top: 1em;
}

#banner_area .banner_article .banner_title {
  padding-top: 0.5em !important;
  margin-left: 0 !important;
  width: auto !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

#banner_area .banner_article .banner_title span {
  padding-bottom: 0.3em !important;
}

#banner_area nav {
  padding-top: 70px;
  padding-bottom: 20px;
}

#banner_area nav ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  max-width: 1100px;
  margin: 0 auto;
}

#banner_area nav ul li {
  width: calc(100% / 3);
  padding: 0 5px;
}

#banner_area nav ul li.cur a {
  color: #d78354 !important;
  border-color: #d78354 !important;
  pointer-events: none;
  cursor: default;
}

#banner_area nav ul li a {
  display: block;
  font-family: "Rokkitt", serif;
  border-bottom: 4px solid rgba(255, 255, 255, 0.8);
  color: rgba(255, 255, 255, 0.8) !important;
  padding-bottom: 0.3em !important;
}

#banner_area nav ul li a:hover {
  color: #d78354 !important;
  border-color: #d78354 !important;
}

#banner_area .thumb {
  position: relative;
  overflow: hidden;
  padding-bottom: 5%;
}

#banner_area .thumb a {
  display: block;
  padding: 0;
}

#banner_area .thumb a img {
  width: 100%;
}

#banner_area .title {
  color: #FFF;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
}

#banner_area .title a {
  padding: 0;
}

#banner_area .title span {
  color: #d78354;
  font-family: "Rokkitt", serif;
  display: block;
}

#banner_area .article a {
  color: #fff;
}

#banner_area .article a:hover {
  color: #d78354;
}

@media screen and (min-width: 0px) and (max-width: 800px) {
  #banner_area {
    padding-bottom: 0;
  }
  #banner_area h2 {
    font-size: 6vw !important;
  }
  #banner_area > .inner {
    padding-top: 0;
  }
  #banner_area .article {
    width: 100%;
  }
  #banner_area .banner_article {
    width: 50%;
    padding: 0 1vw 5vw !important;
  }
  #banner_area .title {
    font-size: 3.3vw;
  }
  #banner_area nav {
    padding-top: 0;
  }
  #banner_area nav ul li {
    padding: 0 0.8vw;
  }
  #banner_area nav ul li a {
    font-size: 3vw;
    letter-spacing: 0;
  }
}

#trailer_area {
  position: relative;
  background: url(../images/common/bg_pc1.jpg) no-repeat center center;
  background-size: cover;
  background: #31261f;
  text-align: center;
  padding-top: 80px;
  padding-bottom: 60px;
}

#trailer_area li dl {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

#trailer_area li dl dd {
  padding-bottom: 5px;
}

#trailer_area li a {
  position: relative;
  display: block;
  width: 356px;
  padding: 0;
}

#trailer_area li a img {
  width: 100%;
}

#trailer_area li a .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background: url(../images/trailer/play_mark.png) no-repeat center center;
  background-color: rgba(0, 0, 0, 0.5);
  background-size: 20%;
  -webkit-transition: all 0.2s ease 0s;
  transition: all 0.2s ease 0s;
}

#trailer_area li a:hover .overlay {
  background-color: rgba(0, 0, 0, 0);
}

#trailer_area #trailer_list_container {
  width: 1110px;
  margin: 0 auto;
  overflow: hidden;
}

#trailer_area #trailer_list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding-bottom: 20px;
  -webkit-transition: all 0.7s cubic-bezier(0.43, 0.01, 0.02, 0.99) 0s;
  transition: all 0.7s cubic-bezier(0.43, 0.01, 0.02, 0.99) 0s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

#trailer_area #trailer_list li {
  padding: 0 7px;
}

#trailer_area #trailer_list dt {
  font-size: 14px;
}

#trailer_area .btn_prev {
  left: 0;
}

#trailer_area .btn_next {
  right: 0;
}

@media screen and (min-width: 0px) and (max-width: 800px) {
  #trailer_area {
    padding-top: 20px;
    padding-bottom: 30px;
    padding-left: 0;
    padding-right: 0;
    background: transparent;
  }
  #trailer_area > a {
    display: block;
    width: 80vw;
    margin: 0 auto;
  }
  #trailer_area #trailer_list_container {
    width: 100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 5px;
  }
  #trailer_area #trailer_list {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    padding-left: 10vw;
    padding-bottom: 10px;
  }
  #trailer_area li {
    padding: 0 10px 0 0 !important;
    -webkit-flex-basis: 80vw !important;
    -ms-flex-preferred-size: 80vw !important;
    flex-basis: 80vw !important;
    box-sizing: content-box;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }
  #trailer_area li a {
    width: 100%;
  }
  #trailer_area li dt {
    font-size: 3.4vw;
  }
  #trailer_area .btn_nextprev {
    display: none;
  }
}

#about_area {
  background: #fff;
}

#about_area.old {
  background: #131313;
  text-align: left;
}

#about_area.old > .inner {
  max-width: 1100px;
  background: transparent !important;
}

#about_area.old > .inner > .txt {
  background: transparent !important;
}

#about_area header {
  position: relative;
}

#about_area header .v {
  width: 100%;
}

#about_area header > .inner {
  width: 100%;
  height: 100%;
  background-size: auto 60%;
  position: absolute;
  top: 0;
  left: 0;
}

#about_area header h2 {
  width: 1100px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: right;
  font-size: 30px;
  letter-spacing: 0.1em;
}

#about_area header .copy1 {
  position: absolute;
  bottom: 0px;
  left: 0%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding-bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding-bottom: 0.4em;
}

#about_area > .inner {
  margin-top: -1px;
  width: 100%;
  background: url(../images/about/bg1.png) no-repeat left top;
  background-size: 50% auto;
  max-width: none;
  padding-top: 60px;
}

#about_area > .inner > .txt {
  width: 100%;
  background: url(../images/about/bg2.png) no-repeat right bottom;
  background-size: 15% auto;
}

#about_area > .inner > .txt > .inner {
  max-width: 1140px;
  padding: 0 20px;
  margin: 0 auto;
  color: #000;
  text-align: left;
}

#about_area > .inner > .txt > .inner .t {
  padding-top: 10px;
  font-size: 15px;
  font-weight: bold;
  line-height: 2.5;
  text-shadow: 0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff;
}

#about_area > .inner > .txt > .inner .t img {
  display: inline-block;
  padding-left: 0.5em;
  vertical-align: -5px;
}

#about_area > .inner > .txt > .inner .cast {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  padding: 20px 0 60px;
}

#about_area > .inner > .txt > .inner .cast .sp-view {
  color: #946d48;
  font-size: 5vw;
  font-weight: bold;
  line-height: 1.3;
  border: 2px solid #946d48;
  border-width: 3px 0;
  text-align: center;
  margin-bottom: 2.5vw;
  padding: 1.5vw 0;
}

#about_area > .inner > .txt > .inner .imgs {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

#about_area .pc-view {
  display: block;
}

#about_area .sp-view {
  display: none;
}

.about-foot {
  display: block;
  width: 100%;
}

@media screen and (min-width: 0px) and (max-width: 800px) {
  #about_area {
    padding: 0;
    font-size: 3.8vw;
    z-index: 1;
  }
  #about_area.old h2 {
    font-size: 6vw;
  }
  #about_area.old h3 {
    padding: 0 20px;
    font-size: 5vw;
  }
  #about_area.old .txt {
    padding: 10px 20px 30px;
  }
  #about_area .pc-view {
    display: none !important;
  }
  #about_area .sp-view {
    display: block !important;
  }
  #about_area header {
    padding: 0;
  }
  #about_area header > .inner {
    position: relative;
    top: auto;
    left: auto;
    background: #000;
  }
  #about_area header > .inner h2 {
    left: auto;
    top: auto;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    position: relative;
    text-align: center;
    font-size: 5vw;
    padding: 0;
    padding-top: 4vw;
    width: auto;
  }
  #about_area header > .inner .copy1 {
    position: relative;
    width: auto;
    max-width: none;
    display: block;
    padding: 0 5vw 1vw;
    background: transparent;
  }
  #about_area header > .inner .copy1 img {
    margin-top: -2vw;
  }
  #about_area .inner {
    padding-top: 0;
    padding-bottom: 0vw;
  }
  #about_area .v {
    width: 120vw !important;
    max-width: none;
    margin-left: -4vw;
  }
  #about_area .txt {
    padding: 20px 20px 40px;
  }
  #about_area .txt > .inner {
    padding: 0 !important;
  }
  #about_area .txt > .inner .t {
    line-height: 2em !important;
    font-size: 3.6vw !important;
  }
  #about_area .txt > .inner .t img {
    display: block !important;
    padding-left: 0 !important;
    max-width: 320px;
  }
  #about_area .txt > .inner .cast {
    display: block !important;
    padding-bottom: 1vw !important;
  }
  #about_area .txt > .inner .imgs {
    display: block !important;
  }
  #about_area .txt > .inner p {
    padding-bottom: 0;
  }
  #about_area .txt > .inner .jitsuwa {
    display: block;
    margin-left: auto;
    width: 30vw;
    text-align: right;
  }
  .about-foot {
    width: 150%;
    max-width: none;
  }
}

#comment_area {
  background: url(../images/comment/v.jpg) no-repeat center top;
  position: relative;
  padding: 7.27273% 0;
}

#comment_area .caution {
  opacity: .4;
  text-align: right;
  font-size: 12px;
}

.comment_title {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-bottom: 50px;
}

.comment_title .logo {
  margin-left: -22px;
}

.comment_title h1 {
  margin-bottom: 20px;
}

.comment_title h1 img {
  margin: 0 auto;
}

.comment_index {
  font-size: 14px;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.3);
  margin-bottom: 40px;
  padding: 1em 0;
}

.comment_index li {
  display: inline-block;
}

.comment_index li a {
  padding: 0 1em !important;
  background: transparent !important;
  letter-spacing: 0 !important;
  color: #fff !important;
  opacity: 0.7;
  -webkit-transition: all 0.1s ease 0s;
  transition: all 0.1s ease 0s;
}

.comment_index li a:hover {
  opacity: 1;
}

.comment_wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: bold;
  line-height: 2;
}

.comment_wrap h2 {
  color: #facf06;
  font-size: 30px;
  line-height: 1.4;
  margin-bottom: .5em;
  padding-bottom: 0;
  text-align: left;
}

.comment_wrap h2 span {
  display: block;
}

.comment_wrap h2 .p {
  color: #fff;
  font-size: 14px;
  font-weight: normal;
  opacity: .7;
}

.comment_wrap p {
  font-weight: normal;
  line-height: 28px;
}

.comment_wrap p span {
  font-size: 18px;
  color: #facf06;
  font-weight: bold;
}

.comment_wrap article {
  background: url(../images/comment/bg.png) center center no-repeat;
  background-size: cover;
  border: 2px solid #2b3030;
  margin-bottom: 2.72727%;
  padding: 1.81818% 2.54545%;
  width: 48.09091%;
  text-align: left;
}

.comment_wrap article:nth-child(2n) {
  margin-left: auto;
}

@media screen and (min-width: 0px) and (max-width: 800px) {
  #comment_area {
    background-color: #000;
    background-size: 150% auto;
    padding: 30% 5% 10%;
  }
  .comment_title {
    display: block;
    padding-bottom: 5%;
  }
  .comment_title .logo {
    margin-left: 0;
  }
  .comment_title .logo img {
    margin: 0 auto;
  }
  .comment_title p img {
    margin: 0 auto;
  }
  .comment_index li a {
    padding: 0 0.5em !important;
    font-size: 3.8vw;
    opacity: 1 !important;
  }
  .comment_wrap {
    display: block;
    font-size: 3.2vw;
  }
  .comment_wrap h2 {
    font-size: 7vw;
  }
  .comment_wrap h2 span {
    display: block;
  }
  .comment_wrap h2 .p {
    font-size: 3.2vw;
  }
  .comment_wrap article {
    margin-bottom: 5%;
    padding: 5%;
    width: auto;
  }
  .comment_wrap p span {
    font-size: 16px;
    color: #facf06;
    font-weight: bold;
  }
}

body.news.page {
  background-image: url(../images/common/bg1.png), url(../images/common/bg2.png);
  background-repeat: no-repeat,no-repeat;
  background-color: #131313;
  background-size: 40% auto,15% auto;
  background-attachment: fixed,fixed;
  background-position: left top , right bottom;
}

body.news #news_area {
  background-color: transparent;
}

#news_area {
  background-color: #131313;
  margin: 0 auto;
  min-height: calc(100vh - 59px);
}

#news_area .news_list nav ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 70%;
  margin: 0 auto;
}

#news_area .news_list nav ul li {
  width: calc(100% / 3);
  padding: 0 5px;
}

#news_area .news_list nav ul li.cur a {
  color: #d78354 !important;
  border-color: #d78354 !important;
  pointer-events: none;
  cursor: default;
}

#news_area .news_list nav ul li a {
  display: block;
  font-family: "Rokkitt", serif;
  border-bottom: 4px solid #fff;
  color: #fff !important;
  padding-bottom: 0.3em !important;
}

#news_area .news_list nav ul li a:hover {
  color: #d78354 !important;
  border-color: #d78354 !important;
}

#news_area .yt {
  width: 100%;
  height: 480px;
}

#news_area .interview {
  padding-bottom: 2em;
}

#news_area .interview dt {
  clear: both;
  float: left;
  font-weight: bold;
}

#news_area .interview dd {
  padding-left: 3em;
  padding-bottom: 1em;
}

#news_area .news_article {
  position: relative;
  -webkit-box-align: top;
  -webkit-align-items: top;
  -ms-flex-align: top;
  align-items: top;
}

#news_area .news_article.hide {
  display: none !important;
}

#news_area .news_thumb {
  position: relative;
  overflow: hidden;
}

#news_area .news_thumb a {
  display: block;
  padding: 0;
}

#news_area .news_thumb a img {
  width: 100%;
}

#news_area .news_title {
  color: #FFF;
  font-size: 16px;
  line-height: 26px;
  text-align: left;
}

#news_area .news_title a {
  padding: 0;
}

#news_area .news_title span {
  color: #d78354;
  font-family: "Rokkitt", serif;
  display: block;
}

#news_area .news_article a {
  color: #fff;
}

#news_area .news_article a:hover {
  color: #d78354;
}

#news_area .news_pages {
  max-width: 900px;
  margin: 0 auto;
  display: none;
}

#news_area .news_pages article {
  display: none;
  padding-bottom: 7em;
}

#news_area .news_pages article.active {
  display: block;
}

#news_area .news_pages h3 {
  font-size: 24px;
  line-height: 1.6;
  color: #d78354;
  text-align: left;
}

#news_area .news_pages h4 {
  padding-bottom: 1em;
}

#news_area .news_pages h5 {
  font-size: 1em;
}

#news_area .news_pages .date {
  font-size: 16px;
  font-weight: bold;
  font-family: "Rokkitt", serif;
}

#news_area .news_pages .txt {
  text-align: left;
  padding-top: 1em;
}

#news_area .news_pages .txt figure {
  padding-bottom: 1em;
}

#news_area .news_pages.active {
  display: block;
}

#news_area .btn_next,
#news_area .btn_prev,
#news_area .btn_top {
  position: fixed;
  top: 50%;
}

#news_area .btn_top {
  left: 0;
  top: auto;
  bottom: 30px;
  padding-right: 0.5em;
}

#news_area .news_list {
  display: none;
}

#news_area .news_list.active {
  display: block;
}

#news_area .news_list > .inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-top: 50px;
}

#news_area .news_list .news_article {
  width: calc(100% / 3);
  display: block;
  margin: 0 !important;
  padding: 0px 10px 40px !important;
}

#news_area .news_list .news_article .news_thumb {
  width: auto !important;
}

#news_area .news_list .news_article .news_title {
  padding-top: 0.4em !important;
  margin-left: 0 !important;
  width: auto !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

#news_area .news_list .news_article .news_title span {
  padding-bottom: 0.3em !important;
}

#news_area.top {
  min-height: auto;
}

#news_area.top .news_article {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 0px auto 30px;
  padding-bottom: 0;
  border-bottom: none;
  -webkit-box-align: top;
  -webkit-align-items: top;
  -ms-flex-align: top;
  align-items: top;
}

#news_area.top .news_thumb {
  position: relative;
  width: 100px;
  overflow: hidden;
}

#news_area.top .news_thumb a {
  display: block;
  padding: 0;
}

#news_area.top .news_thumb a img {
  width: 100%;
}

#news_area.top .news_title {
  margin-left: 30px;
  color: #FFF;
  font-size: 16px;
  width: 850px;
  line-height: 26px;
  text-align: left;
}

#news_area.top .news_title a {
  padding: 0;
}

#news_area.top .news_title span {
  color: #d78354;
  font-family: "Rokkitt", serif;
  display: block;
}

#news_area.top #news_more {
  position: relative;
  width: 280px;
  height: 46px;
  padding-top: 0;
  line-height: 46px;
  text-align: center;
}

@media screen and (min-width: 0px) and (max-width: 800px) {
  body.page {
    background-image: url(../images/common/bg1.png), url(../images/common/bg2.png);
    background-repeat: no-repeat,no-repeat;
    background-color: #131313;
    background-size: 70% auto, 30% auto !important;
    background-attachment: fixed,fixed;
    background-position: left top , right bottom;
  }
  header {
    display: block;
    text-align: center;
    padding-top: 10vw;
  }
  header .logobtn {
    z-index: 1;
  }
  header .logobtn img {
    height: auto;
    max-width: 50vw;
  }
  .yt {
    width: 100%;
    height: 50vw !important;
  }
  h1 {
    padding-bottom: 5vw !important;
  }
  h1 a {
    font-size: 8vw;
    padding: 0 !important;
  }
  .logobtn {
    position: relative;
    display: inline-block;
    top: auto;
    left: auto;
    margin: 0 auto;
  }
  .logobtn.item-fix {
    position: relative !important;
  }
  #news_area {
    padding-top: 8vw;
  }
  #news_area .news_list nav ul {
    width: auto;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  #news_area .news_list nav ul li {
    padding: 0;
    width: 32%;
  }
  #news_area .news_list nav ul a {
    padding-left: 0;
    padding-right: 0;
    line-height: 1.3;
  }
  #news_area .news_list > .inner {
    display: block;
  }
  #news_area .news_list > .inner .news_article {
    width: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 0 0 6vw 0 !important;
  }
  #news_area .news_list > .inner .news_article .news_thumb {
    width: 22vw !important;
  }
  #news_area .news_list > .inner .news_article .news_title {
    padding: 0 0 0 4vw !important;
  }
  #news_area .news_pages h3 {
    font-size: 5vw;
  }
  #news_area .news_pages .date {
    font-size: 3.5vw;
    padding: 1em 0;
  }
  #news_area .news_pages .txt {
    padding: 0 0px;
  }
  #news_area,
  #news_area.top {
    min-height: none;
    font-size: 3.8vw;
    z-index: 1;
  }
  #news_area .inner,
  #news_area.top .inner {
    padding-top: 0;
    padding-bottom: 5vw;
  }
  #news_area .v,
  #news_area.top .v {
    position: relative;
    width: 100%;
    height: 55vw;
  }
  #news_area h2,
  #news_area.top h2 {
    font-size: 6vw;
  }
  #news_area h2 img,
  #news_area.top h2 img {
    height: 5.5vw;
  }
  #news_area .txt,
  #news_area.top .txt {
    padding: 0 20px 20px;
  }
  #news_area .txt.sp_txt,
  #news_area.top .txt.sp_txt {
    font-size: 4.2vw;
    font-weight: bold;
    line-height: 1.4;
    display: block !important;
  }
  #news_area .news_article,
  #news_area.top .news_article {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 0px auto 30px;
    padding-bottom: 0;
    border-bottom: none;
    -webkit-box-align: top;
    -webkit-align-items: top;
    -ms-flex-align: top;
    align-items: top;
  }
  #news_area .news_article.hide,
  #news_area.top .news_article.hide {
    display: none !important;
  }
  #news_area .news_thumb,
  #news_area.top .news_thumb {
    position: relative;
    width: 22vw !important;
    overflow: hidden;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }
  #news_area .news_thumb a,
  #news_area.top .news_thumb a {
    display: block;
    padding: 0;
  }
  #news_area .news_thumb a img,
  #news_area.top .news_thumb a img {
    width: 100%;
  }
  #news_area .news_title,
  #news_area.top .news_title {
    color: #FFF;
    width: auto;
    text-align: left;
    margin-left: 4vw !important;
    font-size: 3.5vw;
    line-height: 1.6;
  }
  #news_area .news_title a,
  #news_area.top .news_title a {
    padding: 0;
  }
  #news_area .news_title span,
  #news_area.top .news_title span {
    color: #d78354;
    font-family: "Rokkitt", serif;
    display: block;
  }
  #news_area #news_more,
  #news_area.top #news_more {
    position: relative;
    width: 280px;
    height: 46px;
    padding-top: 0;
    line-height: 46px;
    text-align: center;
  }
  .news_pages {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .news_pages article {
    padding-bottom: 2em !important;
  }
  .news_pages a {
    position: relative !important;
    width: calc(100% / 3);
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
  }
  .news_pages a.btn_top {
    padding-right: 2em !important;
  }
}