@charset "utf-8";
/************************************************

@PC - style.css v5.0.0

(c) ULM Co.,Ltd. - https://www.ulm-design.com
************************************************/
html {
  overflow-y: scroll;
}

body {
  overflow-x: scroll;
  background: #000;
}

* {
  box-sizing: border-box;
}

img {
  width: 100%;
  height: auto;
}

.w70 {
  width: 70%;
  margin: 0 auto;
  min-width: 800px;
}

.w80 {
  width: 80%;
  margin: 0 auto;
}

.w90 {
  width: 90%;
  margin: 0 auto;
}

.w100 {
  width: 100%;
  margin: 0 auto;
}

.w800 {
  width: 800px;
  margin: 0 auto;
}

.w980 {
  width: 980px;
  margin: 0 auto;
}

.w1024 {
  width: 1024px;
  margin: 0 auto;
}

.hover {
  opacity: 1;
  transition: .2s ease-out;
}

.hover:hover {
  opacity: .7;
  cursor: pointer;
}

.min {
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro","Sawarabi Mincho", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

.grad {
  color: #fff;
  background: -webkit-linear-gradient(0deg,#73caff, #379aff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;  
}

.black {
  color: #231815;
}

.white {
  color: #fff;
}

.blue {
  color: #00406e;
}

/*-------------------------------

#top

-------------------------------*/
#top{
}

header {
  height: 70px;
  width: 100%;
  min-width: 1024px;
  background: #000;
  overflow: hidden;
  line-height: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  transition: .2s ease-out;
}

.scroll-change header {
  height: 60px;
}

header nav {
  /* width: 1024px;
  margin: 0 auto; */
  justify-content: space-between;
}

header nav a {
  cursor: pointer;
}

.nav-item {
  position: relative;
}

.nav-item::after {
  position: absolute;
  content: "";
  display: block;
  height: 1px;
  width: 0;
  background: #fff;
  bottom: 31px;
  left: 0;
  right: 0;
  margin: auto;
  transition: .2s ease-out;
}

.scroll-change .nav-item::after {
  bottom: 26px;
}

.nav-item:hover::after {
  width: calc(100% - 28px);
}

.nav-item a {
  display: block;
}

.nav-item img {
  height: 70px;
  width: auto;
  transition: all .2s ease-out;
}

.scroll-change .nav-item img {
  height: 60px;
  width: auto;
}

.head-nav-icon {
  color: #fff;
  font-size: 20px;
}

.sns-ttl {
  margin: 0 10px 0 0;
}

.sns-ttl img {
  width: 103px;
}

.sns-item a {
  display: block;
  padding: 10px;
}

.sns-item,
.sns-ttl {
  display: flex;
  align-items: center;
  height: 60px;
}

#wrapper {
  width: 100%;
  position: relative;
  background: #000;
  min-height: 100vh;
}

.container {
  margin-top: 70px;
  background: #fff;
  transition: all .2s ease-out;
}

.scroll-change .container {
  margin-top: 60px;
}


#wrapper.fixed {
  position: fixed;
}

/*-------------------------------

sound

-------------------------------*/
#sound-btn {
  position: fixed;
  z-index: 210;
  top: 25px;
  right: 18px;
  width: 106px;
  height: 23px;
  background: url(../img/common/sound_off.png) no-repeat left top;
  background-size: 100% auto;
  display: block;
  transition: all .2s ease;
}

#sound-btn:hover {
  cursor: pointer;
}

#sound-btn.on {
  background: url(../img/common/sound_on.png) no-repeat left top;
  background-size: 100% auto;
}

.scroll-change #sound-btn {
  top: 19px;
}




/*-------------------------------

#top-head-txt

-------------------------------*/
#top-head-txt {
  padding: 1.5vw 5% 1vw;
  display: flex;
}

#top-head-txt-0 {
  margin: 0 2% 0 0;
}

#top-head-txt-1 img {
  backface-visibility: hidden;
}

#top-main {
  width: 100%;
  height: calc(100vh /2 *.7 - 70px);
  /* height: auto; */
  overflow: hidden;
  position: relative;
  background: #0b111d;
  line-height: 0;
  min-height: 210px;
}

#top-visual{
  width: 100%;
  height: 100%;
  min-width: 1024px;
  margin: 0 auto;
}

#visual-img {
  width: 100%;
  margin: 0 auto;
  min-width: 1024px;
  height: 100%;
  position: relative;
  /* opacity: 0; */
  transition: opacity 4s cubic-bezier(0.445, 0.05, 0.55, 0.95);;
}

#visual-img.changed {
  opacity: 1;
}

@keyframes headset-animation{
	0%{ opacity: 0; }
	8.3%{ opacity: 1; }
	16.6%{ opacity: 0; }
	24.9%{ opacity: 1; }
	33.2%{ opacity: 0; }
	41.5%{ opacity: 1; }
	49.8%{ opacity: 0; }
	100%{ opacity: 0; }
}

.visual-off-img,
.visual-on-img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.visual-off-img {
  background: url(../img/top/main_off.jpg) no-repeat center;
  background-size: auto 100%;
  z-index: 1;
}

.visual-on-img {
  background: url(../img/top/main_on.png) no-repeat center;
  background-size: auto 100%;
  z-index: 10;
  animation: headset-animation 4s cubic-bezier(0, 1, 0, 1) infinite;
}

#top-copy {
  position: absolute;
  left: 20px;
  bottom: 20px;
  width: 13vw;
  min-width: 168px;
  max-width: 260px;
  z-index: 11;
}

#top-txt {
  text-align: center;
  padding-top: 30px;
  position: relative;
  min-width: 1024px;
  max-width: 1500px;
  width: 75%;
  margin: 0 auto;
}

#comment-bnr {
  width: 170px;
  position: absolute;
  top: 2.2vw;
  right: 2.8vw;
}

#comment-bnr:hover {
  cursor: pointer;
}

.top-item {
  display: inline-block;
}

#top-logo {
  width: 65%;
  /* opacity: 0; */
}

#top-logo.changed {
  animation: bg-animation 1s .5s forwards;
}

#top-lead {
  /* width: 886px; */
  width: 90%;
  margin: -30px auto 0;
  z-index: 20;
  position: relative;
}

#top-logo-wrapper {
  position: relative;
}

#top-koukai {
  width: 14%;
  position: absolute;
  bottom: 24%;
  right: 0;
}

/*-------------------------------

#top-comment

-------------------------------*/
#top-comment {
  margin: 0 auto;
  position: absolute;
  width: 255px;
  bottom: 10px;
  left: 10px;
}

#top-comment a {
  display: block; 
  width: 100%;
}

#top-comment-list {
  position: relative;
  width: 100%;
  height: 110px;
  background: linear-gradient(to right, rgba(11, 17, 29,.5) 0%,rgba(12, 30, 31) 100%);
  padding: 10px;
  box-shadow: 0px 0px 6px 2px rgba(158, 218, 255, 0.5);
  z-index: 10;
  background: url(../../sp/assets/img/common/stripe_bg.png) repeat,rgba(11, 17, 29,.5);
  background-size: 4px 8px;

}

.top-comment-box {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  padding: 10px 5px;
  align-content: space-between;
  top: 0;
  left: 0;
  flex-wrap: wrap;
}

.top-comment-ttl {
  width: 100%;
  margin: 0 auto 5px;
  z-index: 10;
  position: relative;
}

.top-comment-txt,
.top-comment-name {
  color: #fff;
  width: 100%;
}

.top-comment-txt {
  font-weight: bold;
  font-size: 17px;
  line-height: 1.4;
}

.top-comment-name {
  text-align: right;
  font-size: 14px;
  margin: 0 0 5px;
}

.top-comment-name span {
  font-size: 10px;
  display: inline-block;
  width: 100%;
  height: 10px;
  margin: 0 0 7px;
}

.top-comment-name.img-name {
  margin: 0;
}

.top-comment-name.img-name img {
  height: 14px;
  width: auto;
}

.top-comment-name.img-name span{
  margin: 0 0 2px;
}

.small {
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0;
}


.awards {
  margin: 130px auto;
}

.awards-txt {
  width: 860px;
  margin: 0 auto 30px;
}

.awards-img {
  width: 860px;
  margin: 0 auto;
}

/*-------------------------------

.bnr-area

-------------------------------*/
.btn_dvd {
  width: 60%;
  margin: 4% auto 0;
  display: flex;
}

.btn_dvd a {
  margin:0 1%;
}
.top-bnr-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 30px auto 30px;
}

.top-bnr-area a {
  display: block;
  height: 60px;
}

.bnr-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto 110px;
}

.bnr-item {
  height: 50px;
  margin: 0 20px 0 0 ;
  border: 1px solid #E1E1E1;
  line-height: 0;
}

.bnr-item:last-child {
  margin: 0;
}
.top-bnr-area a img,
.bnr-item  img {
  height: 100%;
  width: auto;
}

/*-------------------------------

.streaming

-------------------------------*/

#streaming {
  background: none;
  border: 3px solid #00406e;
  border-radius: 3px;
  padding: 30px 40px;
  width: 1100px;
  margin: 50px auto;
  /* background: #a4a6a6; */
}

.streaming-ttl {
  color: #000000;
  text-decoration: underline;
  font-size: 25px;
  margin: 0 0 20px;
  font-weight: bold;
  text-align: center;
  /* text-shadow: 0px 0px 3px rgb(204, 239, 120), 0px 0px 2px rgba(71, 88, 19, 0.2), 0px 1px 3px rgba(0, 0, 0, 0.1); */
}

#streaming-bnr-list {
  justify-content: center;
  max-width: 1200px;
  flex-wrap: wrap;
  margin: 0 auto;
}

.streaming-bnr {max-width: 115px;padding: 5px 5px 0;}

.streaming-bnr img {
border: 1px solid #aaa;
}

@media only screen and (max-width: 770px) {
  #streaming {
    padding: 5vw;
  }

  #streaming-bnr-list {
    flex-wrap: wrap;
    justify-content: center;
  }

  .streaming-bnr {
    padding: 1vw;
    width: 40vw;
  }
}
/*-------------------------------

#info-area

-------------------------------*/
#info-area {
  display: flex;
  min-width: 980px;
  margin: 110px auto 0;
}

#top-news {
  width: calc(100% - 332px);
  display: flex;
  height: 100px;
}

.news-box-ttl {
  width: 72px;
  display: block;
  margin: 12px 17px 0 0;
}

.drawer-sns-container {
  display: flex;
  justify-content: space-between;
  width: 312px;
}

.drawer-sns-box {
  width: 100px;
  height: 100px;
  background: #000;
  line-height: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.drawer-sns-box a {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
}

.drawer-sns-box::after {
  content: "";
  display: block;
  padding-top: 100%;
}

/*-------------------------------

#top-news

-------------------------------*/
.news-list {
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  margin: 0;
  width: calc(100% - 110px);
  height: 100px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch
}

/*スクロールバー表示させる*/
.news-list::-webkit-scrollbar{ 
  width: 3px;
}
.news-list::-webkit-scrollbar-thumb{ 
  background: #231815;
}
.news-list::-webkit-scrollbar-track-piece:start{
  background: #e8e8e8;
}
.news-list::-webkit-scrollbar-track-piece:end{
  background: #e8e8e8;
}

.news-item a {
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  font-size: 14px;
  padding: 14px 10px;
}

.news-item:last-child a {
  border-bottom: none;
}

.news-item time {
  font-size: 12px;
  width: 85px;
  line-height: 1.8;
}

.news-ttl {
  width: calc(100% - 85px);
  line-height: 1.5;
}


/*-------------------------------

intro

-------------------------------*/
#intro {
  margin: 180px auto 0;
}

.intro-txt0 {
  margin: 0 auto 15px;
}

#intro-img-wrapper {
  height: 32vw;
  background: #000;
  width: 100%;
  margin: 0 0 150px;
}

#intro-img {
  background: url(../img/top/intro/img.jpg) no-repeat top;
  background-size: cover;
  height: 100%;
  width: 100%;
  margin: 35px auto 0;
  opacity: 0;
}

.contents-ttl {
  background: url(../img/common/ttl_bg.jpg) no-repeat top center;
  background-size: 100% auto;
  text-align: center;
  padding: 15px 0 60px;
}

.contents-ttl img {
  width: 300px!important;
  margin: 0 auto;
}

.txt-contents {
  font-size: 15px;
  line-height: 1.8;
}

.midashi {
  margin: 0 auto 25px;
}

/*-------------------------------

#story

-------------------------------*/
#story {
  margin: 150px auto 0;
}

/*-------------------------------

#copy

-------------------------------*/
#copy {
  width: 100%;
 height: 80vw;
  position: relative;
  border-bottom: 3px #000 solid;
}

#copy-bg {
  z-index: -0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  
}

#opening-bg  img {
  height: 100%;
  /* filter: blur(4px); */
  opacity: 0;
}

#copy-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#copy-txt {
  font-size: 4vw;
  line-height: 2;
  font-weight: bold;
  color: #000;
  text-align: center;

  line-height: 2;
  letter-spacing: .2em;
  width: 100%;
  height: auto;
  /* opacity: 0; */
}
/*-------------------------------

#call

-------------------------------*/
#call {
  background: #000;
  padding: 5vw 0;
  border-top: 2px #000 solid;
  margin-top: -1px;
  border-bottom: 2px #000 solid;
}

#call-img {
  width: 100%;
  height: 50vw;
  background: url(../img/top/call/img_off.jpg) no-repeat top center;
  background-size: 100% auto;
  transition: all .3s ease;
  position: relative;
  
}

#call-img.holding{
  opacity: .7;
}


#call.on #call-img {
  background: url(../img/top/call/img_on.jpg) no-repeat top center;
  background-size: 100% auto;
}

#call.on #call-img:hover{
  cursor: pointer;
}

#call-txt {
  position: absolute;
  width: 11.8vw;
  right: 22%;
  top: 10%;
  opacity: 0;
}

.on #call-txt {
  animation: call-txt-animation 1s ease infinite;
}

#restart,#return {
  position: absolute;
  z-index: 210;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid #fff;
  left: calc(50% - 40px);
  top: calc(50% - 40px);
  display: none;
}

#restart span,#return span {
  color: #fff;
}

#return span {
  transform: scale(-1, 1);
}

@keyframes call-txt-animation{
	0%{ opacity: .2; }
	50%{ opacity: 1; }
	100%{ opacity: .2; }
}

/*-------------------------------

#special

-------------------------------*/
#special  {
  display: none;
}

#special .bg {
  background: url(../../sp/assets/img/common/stripe_bg.png) repeat,rgba(11, 17, 29,.9);
  background-size: 4px 8px;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 200;
}

#special-video {
  width: 500px;
  height: 500px;
  top: calc(50% - 250px);
  left: calc(50% - 250px);
  position: absolute;
  z-index: 201;
}

#special-inner {
  position: fixed;
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  top: 0;
  left: 0;
  z-index: 200;
}

#special-close {
  color: #fff;
  font-weight: bold;
  font-size: 40px;
  position: absolute;
  z-index: 201;
  display: block;
  width: 40px;
  top: calc(50% - 290px);
  right: calc(50% - 260px);
  height: 40px;
  line-height: 40px;
  text-align: center;
}

#special-link {
  color: #fff;
  background: #1da1f2;
  border-radius: 20px;
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 2px;
  position: absolute;
  z-index: 201;
  width: 180px;
  top: calc(50% + 280px);
  right: calc(50% - 90px);
  height: 40px;
  line-height: 40px;
  text-align: center;
  display: none;
  opacity: 0;
}

#special-link i {
  margin: 0 7px 0 0;
}


/*-------------------------------

#talking

-------------------------------*/
#talking {
  display: none;
}

#talking.on {
  display: block;
}

#talking .bg {
  background: url(../../sp/assets/img/common/stripe_bg.png) repeat,rgba(11, 17, 29,.9);
  background-size: 4px 8px;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 200;
}

#voice-pouse{
  position: fixed;
  z-index: 210;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fff;
  left: calc(50% - 120px);
  bottom: 50px;
}

#turn-off {
  position: fixed;
  z-index: 210;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #ff290e;
  left: calc(50% + 40px);
  bottom: 50px;
}

#talking-txt-box {
  position: fixed;
  width: 800px;
  height: 200px;
  top: calc(50% - 50px);
  left: calc(50% - 400px);
  /* border: 1px solid #fff; */
  z-index: 210;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  /* align-items: center; */
  /* overflow: hidden; */
  padding: 10px;
}

#talk-txt-box-inner {
  width: 100%;
}

.talk-txt {
  color: #fff;
  font-weight: bold;
  font-size: 30px;
  width: 100%;
  padding: 20px 0;
  line-height: 1.4;
  display: none;
  height: 90px;
}

.talk-left {
  text-align: left;
  padding: 20px 100px 20px 0;
}

.talk-right {
  text-align: right;
  padding: 20px 0 20px 100px;
}

.icon-phone-hang-up:before {
  content: "\e943";
}

.icon-pause2:before {
  content: "\ea1d";
}

.icon-play3:before {
  content: "\ea1c";
}

.talk-btn {
  text-align: center;
}

.talk-btn span {
  font-size: 32px;
  color: #000;
  margin-top: 22px;
  display: block;  
}

#turn-off span {
  color: #fff;
}


/*-------------------------------

#movie-thumb-container

-------------------------------*/
#cboxOverlay {
  background:rgba(7, 6, 6, .8);
}


#movie-thumb-container{
  width: 300px;
  height: 168px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background-position: center center;
}

#player-overlay{
  width: 100%;
  height: 100%;
  color: #ff0000;
  background: rgba(0,0,0,.6) url(../common/img/overlay.png) repeat;
  background-size: 2px 2px;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  opacity: .5;
}

#player-overlay:hover{
  opacity: 0.8;
}

#play-icon{
  width: 52px;
  height: 58px;
  font-size: 51px;
  margin: auto;
  display: block;
  line-height: 1em;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#player{
  margin-top: -100px;
}


.fm_bnr {
  text-align: center;
  margin: 0 0 70px;

}

.fm_bnr a {
  display: block;
  width: 250px;
  margin: 0 auto;
}

/* #share-container {
  margin: 0 0 160px;
} */

#share-txt {
  width: 62px;
  margin: 0 auto 10px;
}

.share-btn a {
  display: block;
  padding: 15px 20px;
}

.nav-icon, .sns-nav-btn {
  font-size: 28px;
  color: #000;
  text-shadow: none;
}

#share-twitter .nav-icon {
  color: #1da1f2;
}

#share-facebook .nav-icon {
  color: #3b5998;
}

#share-line .nav-icon {
  color: #00c300;
}

/*-------------------------------

opening

-------------------------------*/
#opening {
  width: 100%;
  height:100vh;
  overflow: hidden;
  display: block;
  position: fixed;
  z-index: 8000;
  background: #fff;
}

#opening-cover,
#index-opening-cover {
  background: #000;
  position: fixed;
  width: 0;
  height: 100vh;
  content: "";
  display: block;
  top: 0;
  left: 0;
  z-index: 10000;
}

#index-opening-cover {
  z-index: 10000;
}


#opening-bg {
  z-index: 30;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

#opening-bg  img {
  height: 100%;
  width: auto;

  /* filter: blur(4px); */
  opacity: 0;
}

#opening-bg.changed  img {
  animation: bg-animation 3s forwards,bg-animation-1 15s forwards;
}

@keyframes bg-animation {
  0%{
    opacity: 0;
    /* filter: blur(4px); */
  }
  100%{
    opacity: 1;
    /* filter: blur(0); */
  }
}

@keyframes bg-animation-1 {
  0%{
    transform: scale(1)
  }
  100%{
    transform: scale(1.2)
  }
}

#opening-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 31;
}

#opening-txt {
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro","Sawarabi Mincho", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-size: 4vw;
  line-height: 2;
  font-weight: bold;
  color: #000;
  text-align: center;

  line-height: 2;
  letter-spacing: .2em;
  width: 100%;
  height: auto;
  opacity: 0;
}

#opening-txt.changed {
  opacity: 1;
}

/* カーソル */
.jaticker-cursor {
  color: transparent;
}
/* 入力中 */
.jaticker-input {
  color: #000;
  background-color: transparent;
  text-decoration: none;
}
/* 変換中 */
.jaticker-convert {
  color: #000;
  background-color: transparent;
}

/*-------------------------------

#comment

-------------------------------*/

#comment-close,
#awards-close {
	width: 60px;
	height: 60px;
	position: fixed;
	right: 20px;
	top: 20px;
	z-index: 201;
	-webkit-backface-visibility:hidden;
  backface-visibility:hidden;
	overflow:hidden;
	display: none;
}

#comment-close::before,
#comment-close::after,
#awards-close::before,
#awards-close::after {
  position: absolute;
  top: 50%;
  left: 0;
  content: "";
  display: block;
  width: 60px;
  border-top: 3px solid #fff;
}
 
#comment-close::before,
#awards-close::before {
  transform: skewY(-45deg);
}
 
#comment-close::after,
#awards-close::after {
  transform: skewY(45deg);
}


#comment-contents {
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro","Sawarabi Mincho", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

#comment-contents,
#awards-contents{
	position: fixed;
	top: 0;
	left: 0;
  width: 100%;
	height: 100%;
	padding: 90px 0;
  box-sizing: border-box;
  background: rgba(7, 6, 6, .8);
	color: #fff;
	z-index: 200;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

#comment-contents .inner,
#awards-contents .inner {
  width: 980px;
  margin: 0 auto;
  padding: 60px 90px;
  background: rgba(7, 6, 6, .9);
  box-shadow: 0px 0px 3px 1px rgba(158, 218, 255, .6);
}

#comment .att {
  margin: 0 0 30px;
  font-size: 12px;
  text-align: center;
}

.comment-ttl {
  margin: 0 auto 30px;
}

.comment-box {
  padding: 30px 10px;
  border-bottom: 1px solid #394855;
}

.comment-box:last-child {
  border: none;
}

.comment-txt {
  font-size: 18px;
  line-height: 1.7em;
}

.comment-txt strong {
  display: inline-block;
  font-weight: bold;
  font-size: 30px;
  line-height: 1.6em;
  background: -webkit-linear-gradient(0deg,#73caff, #379aff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;  
}

.name {
  margin: 20px 0 0;
  text-align: right;
  font-size: 22px;
}

.name span {
  display: inline-block;
  margin: 0 10px 0 0;
  font-size: 13px;
}

#comment .img-name img {
  height: 22px;
  width: auto;
  vertical-align: bottom;
}

.awards-head {
  margin: 0 0 25px;
}

.awards-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style-type: none;
}

.awards-item {
  width: 48%;
  background: url(../../sp/assets/img/awards/bg_0.png) left 50% no-repeat,url(../../sp/assets/img/awards/bg_1.png) right 50% no-repeat;
  background-size: auto 100%;
  height: 65px;
  text-align: center;
  display: flex;
  align-items: center;
  margin: 0 0 20px;
}

.awards-item .grad {
  text-align: center;
  width: 100%;
  padding: 0 20px;
  font-size: 16px;
  line-height: 1.4;
  font-weight: bold;
  background: -webkit-linear-gradient(0deg,#5dbaf7, #349beb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;  
}

/*-------------------------------------------------------------------------------

staffcast.html

-------------------------------------------------------------------------------*/
#staffcast {
  line-height: 24px;
}
#staffcast img {
  width: 100%;
}

/*-------------------------------

#staff

-------------------------------*/
#staff-main {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 1440px;
  margin: 0 auto;
}
#staff-main li:first-child {
  background: #000 url(../img/staff/img.jpg) center 22% / cover no-repeat;
  height: 410px;
  width: 75%;
  position: relative;
}
#staff-main h2 {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
}
#staff-main h2 img {
  width: 670px;
  margin: 0 auto;
  display: block;
}
#staff-main li:last-child {
  width: 25%;
}
#staff-main h1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.w800 {
  margin-left: auto;
  margin-right: auto;
  width: 800px;
}
#staff .w800 {
  margin-top: 72px;
  margin-bottom: 150px;
}
#staff-01 {
  font-size: 14px;
  margin: 0 0 55px;
}
#staff-01 img {
  width: 50%;
}

.staffcast-flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.staffcast-flex li {
  width: 370px;
}
.staffcast-flex li:first-child {
  margin: 0 60px 0 0;
}

#staff-02,
#staff-03,
#staff-04,
#staff-05,
#staff-06 {
  font-size: 12px;
}
#staff-02 {
  margin: 0 0 61px;
}
#staff-03 {
  margin: 0 0 72px;
}
#staff-05 {
  margin: 0 0 42px;
}

/*-------------------------------

#cast

-------------------------------*/
#cast-main {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 1440px;
  margin: 0 auto;
}
#cast-main li:first-child {
  width: 25%;
}
#cast-main h1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
#cast-main li:last-child {
  background: #000 url(../img/cast/img.jpg) center -40px / cover no-repeat;
  height: 410px;
  width: 75%;
  position: relative;
}
#cast-main h2 {
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 100%;
}
#cast-main h2 img {
  width: 670px;
  margin: 0 auto;
  display: block;
}

#cast .w800 {
  margin-top: 68px;
  padding-bottom: 122px;
}
#cast-01 {
  font-size: 14px;
  margin: 0 0 50px;
}
#cast-01 img {
  width: 50%;
}

#cast-02,
#cast-03,
#cast-04 {
  font-size: 12px;
}
#cast-02 {
  margin: 0 0 42px;
}


/*-------------------------------------------------------------------------------

interview.html

-------------------------------------------------------------------------------*/
#interview {
  background-color: #000;
  line-height: 24px;
}
#interview img {
  width: 100%;
}
#interview h1 {
  margin: 0 0 40px;
  padding: 15px 0 60px;
  width: 800px;
}
.interview-h2 {
  border-bottom: 1px solid #394855;
  padding: 0 0 32px;
}

/*-------------------------------

.att

-------------------------------*/
#interview {
  padding-top: 40px;
  min-height: 100vh;
}

#interview .att {
  padding: 30px 130px 45px;
  border: 2px solid #fb0015;
  width: 645px;
  text-align: center;
  margin: 0 auto 0;
  border-radius: 5px;
}
.att-midashi {
  color: #fb0015;
  font-weight: bold;
  font-size: 17px;
  margin: 0 0 17px;
}
.att-midashi2 {
  color: #fff;
  font-size: 17px;
  margin: 0 0 15px;
}
.btn-area {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  font-size: 17px;
}
.a-btn {
  width: 168px;
  text-align: center;
  border-radius: 15px;
  height: 33px;
  line-height: 32px;
}
.a-btn.yes {
  color: #000;
  background: #fff;
}
.a-btn.no {
  color: #fff;
  background: #000;
  border: 1px solid #fff;
}

/*-------------------------------

.interview-list

-------------------------------*/
.interview-list {
  padding: 0 0 64px;
  font-size: 15px;
  line-height: 2;
  /* font-weight: bold; */
}
.interview-list dt {
  /* background: -webkit-linear-gradient(0deg,#73caff, #379aff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */
  margin: 38px 0 12px;
  font-size: 16px;
  font-weight: bold;
}
.interview-list dd {
  color: #fefefe;
  border-bottom: 1px solid #394855;
  padding: 0 0 35px;
}

.contents-ttl.black-bg {
  background: url(../img/common/ttl_bg_b.jpg) no-repeat top center;
  background-size: 100% auto;
}

.interview-h2,
.interview-midashi {
  margin: 30px auto;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  line-height: 1.5;
}

.interview-h2 {
  font-size: 22px;
}

#interview-container {
  display: none;
  opacity: 0;
}

/*-------------------------------

#awards

-------------------------------*/
#awards {
  box-sizing: border-box;
  color: #fff;
  margin: 70px 0 40px;
}

.container.br {
  background-color: #000;
  padding-top: 40px;
  min-height: 100vh;
}

.container.br h1 {
  margin: 0 0 20px;
}

/*-------------------------------

#comment

-------------------------------*/
#comment{
  box-sizing: border-box;
  color: #fff;
  margin: 70px 0 40px;
}

#comment .att {
  margin: 0 0 30px;
  font-size: 12px;
  text-align: center;
}

.comment-ttl-1 {
  width: 640px;
  margin: 0 auto 30px;
}