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

@style.css

©︎ULM Co.,Ltd. - https://www.ulm-design.com
************************************************/

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

TOP

-------------------------------*/
#index #main {
  padding: 0;
}

#top-main {
  position: relative;
  background: #c0c0c0 ;
  background-size: cover;
  width: 100%;
  left: 0;
  padding: 0 0 0 180px;
}

/*
#top-main-visual
-------------------------------*/
#top-main-visual {
  width: calc(100% - 180px);
  position: relative;
  line-height: 0em;
}

.top-movie-bnr {
  position: absolute;
  z-index: 3;
  top: 2.2625vw;
  left: calc(50% + 14.875vw);
  width: 15.625vw;
  transition: opacity .2s ease;
}

@media all and (min-width:769px) {

  .top-movie-bnr:hover {
    opacity: .8;
  }
}

.top-movie-link {
  display: block;
}

/*
#top-main-contents
-------------------------------*/
#top-main-contents {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  font-family: obvia, sans-serif;
  font-weight: 300;
  padding: 20px 10px 0 0;
  width: 260px;
  height: 100%;
}

#top-main-contents::after {
  content: "";
  display: block;
  width: 180px;
  height: 100%;
  background: rgba(255,255,255,.9);
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
}

.top-contents-inner {
  width: 100%;
}

.top-contents-ttl {
  font-weight: inherit;
  font-size: 12px;
  padding: 0 0 3px;
  margin: 0 0 11px;
  text-align: right;
  line-height: 1em;
  position: relative;
  letter-spacing: 1px;
  border-bottom: 1px solid #000;
}

.top-contents-ttl::after {
  content: "";
  background: #000;
  display: block;
  width: 10px;
  height: 1px;
  position: absolute;
  z-index: 1;
  top: 15px;
  right: -10px;
}

/*
#top-onair
-------------------------------*/
#top-onair-container {
  width: 300px;
  margin: 0 0 50px;
  position: relative;
  right: 40px;
}

#top-onair {
  width: 100%;
  height: 67px;
  background: #010001;
  color: #fff;
  font-size: 18px;
  letter-spacing: 0px;
  font-family: fot-matisse-pron, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";
  font-weight: bold;
  position: relative;
  padding: 9px 35px 0 0;
  text-align: right;
  line-height: 1.2em;
}

#top-onair::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 67px 20px;
  border-color: transparent transparent #010001 transparent;
  position: absolute;
  top: 0;
  left: -20px;
}

#top-netflix-btn {
  width: 180px;
  height: 20px;
  color: #fff;
  background: #e50913;
  text-align: center;
  font-size: 12px;
  padding: 4px 0;
  font-family: obvia, sans-serif;
  font-weight: 500;
  position: absolute;
  z-index: 1;
  bottom: -10px;
  right: 0;
}

#top-netflix-btn::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 20px 10px;
  border-color: transparent transparent #e50913 transparent;
  position: absolute;
  top: 0;
  left: -10px;
}

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

.top-share-box {
  margin: 0 0 0 30px;
}

.top-share-link {
  color: #000;
  font-size: 18px;
}

/*
#top-movie
-------------------------------*/
#top-movie {
  margin: 0 0 50px;
}

.movie-box-inner {
  width: 250px;
  position: relative;
  background: #010001;
}

.movie-box-inner::after {
  content: "";
  display: block;
  padding-top: 56.25%;
}

.movie-icon-box {
  width: 80px;
  height: 80px;
  position: absolute;
  z-index: 1;
  top: calc(50% - 40px);
  left: calc(50% - 40px);
}

.movie-icon-bg0,
.movie-icon-bg1,
.movie-icon {
  position: absolute;
}

.movie-icon-bg0 {
  animation: rotateAnime0 4s infinite linear;
}

.movie-icon-bg1 {
  animation: rotateAnime1 6s infinite linear;
}

.movie-box-thumb {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}

.movie-box-thumb::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  pointer-events: none;
  background: url("../img/common/movie/frame.png") center center no-repeat;
  background-size: cover;
}

.movie-thumb {
  overflow: hidden;
  line-height: 0em;
  width: 100%;
  height: 100%;
}

.movie-thumb-img {
  transition: all .2s ease-in;
  opacity: .5;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media all and (min-width:769px) {

  .movie-box-thumb:hover .movie-thumb-img {
    transform: scale(1.1);
    opacity: 1;
  }

}

.contents-box-caption {
  font-size: 10px;
  letter-spacing: 1px;
  text-align: right;
  position: relative;
  padding: 3px 0;
}

.contents-box-caption a {
  color: #000;
}

.contents-box-caption::after {
  content: "";
  background: #000;
  display: block;
  width: 140px;
  height: 1px;
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 0;
}


@keyframes rotateAnime0 {
  0% {transform: rotate(0deg)}
  100% {transform: rotate(360deg)}
}

@keyframes rotateAnime1 {
  0% {transform: rotate(0deg)}
  100% {transform: rotate(-360deg)}
}

/*
#top-news
-------------------------------*/
#top-news {
  margin: 0 0 50px 0;
}

.top-news-box {
  width: 250px;
  margin: 0 0 10px;
  position: relative;
}

/*@media all and (min-width:769px) {
  .top-news-box:nth-child(3) {
    display: none;
  }
}*/

.top-news-link {
  width: 100%;
  height: 60px;
  border: 1px solid #000;
  font-size: 11px;
  color: #010001;
  background: #fff;
}

.top-news-thumb {
  width: 100px;
  height: 100%;
  overflow: hidden;
  background: #010001;
}

.top-news-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-right: 1px solid #000;
}

.top-news-inner {
  width: calc(100% - 100px);
  padding: 7px;
  line-height: 1.4em;
  word-break: break-all;
}

.top-twitter-box-inner {
  width: 250px;
  height: 160px;
  border: 1px solid #000;
  background: rgba(255,255,255,.9);
}

@media all and (min-width:769px) {

  .top-twitter-box-inner iframe {
    width: 100%;
    min-height: 100% !important;
    height: 100% !important;
  }

}

#top-twitter .contents-box-caption::after {
  width: 118px;
}

/*
#top-link
-------------------------------*/
#top-link {
  position: fixed;
  z-index: 1;
  bottom: auto;
  left: 190px;
  bottom: 10px;
}

#top-link.nofixed {
  position: absolute;
  left: calc(-100vw + 450px);
}

.link-bnr-box {
  width: 255px;
  margin: 0 20px 0 0;
}

@media all and (min-width:769px) and (max-width:1279px) {

  #top-link {
    left: -770px;
  }

}

/*
#intro / #story
-------------------------------*/
.season-container {
  padding: 0 0 0 180px;
}

.top-season-nav {
  display: flex;
  border: 1px solid #000;
}

.top-season-nav-box {
  width: 50%;
  height: 60px;
  text-align: center;
  padding: 22px 0;
  font-size: 14px;
  position: relative;
}

.top-season-nav-box.act {
  background: #000;
  color: #73fbfa;
}

@media all and (min-width:769px) {
  .top-season-nav-box:hover {
    background: #000;
    color: #73fbfa;
  }
}

.top-season-nav-box::after {
  content: "";
  display: block;
  width: 1px;
  height: 0px;
  background: #73fbfa;
  position: absolute;
  top: 40px;
  left: 50%;
  transition: height .3s ease;
}

.top-season-nav-box.act::after {
  height: 15px;
}

.top-season-nav-box:nth-child(1) {
  border-right: 1px solid #000;
}

#intro {
  padding: 0 0 0 179px;
}

#intro,
#story,
#story2 {
  font-family: fot-matisse-pron, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";
  font-style: normal;
  font-weight: 500;
  letter-spacing: 1px;
}

.section-ttl {
  width: 100%;
  height: 260px;
  background: #000;
  color: #fff;
  font-family: obvia, sans-serif;
  font-size: 30px;
  font-weight: 300;
  padding: 235px 0 0;
  text-align: center;
  letter-spacing: 4px;
  line-height: 1em;
  text-indent: 4px;
  box-shadow: 0 0 40px rgba(0,0,0,.5) inset;
}

#intro-section-ttl {
  background: url("../img/top/intro/header_img.jpg") center center no-repeat;
  background-size: cover;
}

#intro-section-ttl-s2 {
  background: url("../img/top/intro/header_img_s2_01.jpg") center center no-repeat;
  background-size: cover;
}

@media all and (min-width:769px) {
  #intro-section-ttl-s2 {
    height: calc(((100vw - 179px)/1920)*899);
    padding-top: calc((((100vw - 179px)/1920)*899) - .8em);
  }
}

#story-section-ttl {
  background: url("../img/top/story/header_img.jpg") center center no-repeat;
  background-size: cover;
}

#story-section-ttl-s2 {
  background: url("../img/top/intro/header_img_s2.jpg") center 35% no-repeat;
  background-size: cover;
}

.section-inner {
}

#intro-container,
#story-container {
  padding: 50px 0;
}

.top-section-img-box {
  width: 600px;
  height: 337px;
  background: #000;
  position: relative;
  margin: 50px auto;
}

.top-section-img-item {
  position: absolute;
  top: 0;
  opacity: 0;
  line-height: 0em;
}

.top-section-img-box::after {
  content: "";
  display: block;
  width: calc((100vw - 180px - 100%)/2 + 100%);
  height: 1px;
  background: rgba(0,0,0,.1);
  position: absolute;
  top: 0;
  right: 0;
}

.top-section-img-box::before {
  content: "";
  display: block;
  width: calc((100vw - 180px - 100%)/2 + 100%);
  height: 1px;
  background: rgba(0,0,0,.1);
  position: absolute;
  bottom: 0;
  left: 0;
}

#top-intro-img-box,
#top-story-img-box {
}

.top-section-img-nav {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: -10px;
}

.top-section-img-nav-box {
  width: 1px;
  height: 30px;
  background: rgba(0,0,0,.1);
  position: relative;
  margin: 10px 0 0;
}

.top-section-img-nav-box-inner {
  width: 1px;
  height: 0;
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: auto;
  background: #000;
  display: block;
  transition: all .5s ease-out;
}

.top-section-img-nav-box.act .top-section-img-nav-box-inner {
  transition: all 7.5s .5s ease-in;
  height: 100%;
  top: auto;
  bottom: 0;
}

.top-intro-lead {
  text-align: center;
  line-height: 1.8em;
  padding: 0 0 50px;
}

.top-intro-lead0 {
  font-size: 20px;
  padding: 0 0 20px;
}

.top-intro-lead1 {
  font-size: 26px;
}

.top-intro-lead-mini {
  font-size: 80%;
}

.top-txt-box {
  width: 900px;
  margin: 0 auto;
  font-size: 13px;
}

.top-txt {
  padding: 0 0 20px;
  line-height: 2em;
}

.ruby {
  position: relative;
}

.kamiyama .ruby-rt {
  font-size: 10px;
  display: block;
  position: absolute;
  z-index: 1;
  bottom: -20px;
  left: -7px;
  white-space: nowrap;
  letter-spacing: 0;
}

.aramaki .ruby-rt {
  font-size: 10px;
  display: block;
  position: absolute;
  z-index: 1;
  bottom: -20px;
  left: 3px;
  white-space: nowrap;
  letter-spacing: 0;
}

.top-intro-container-en {
  font-family: 'Century', Georgia, "Times New Roman", Times, "serif";
}

.top-intro-lead0-en,
.top-intro-lead1-en {
  font-size: 20px;
  line-height: 1.8em;
  letter-spacing: .3px;
}

.top-txt-box-en {
  width: 900px;
  margin: 0 auto;
  font-size: 12px;
  word-break: normal;
}

.kamiyama-en .ruby-rt {
  font-size: 10px;
  display: block;
  position: absolute;
  z-index: 1;
  bottom: -24px;
  left: -28px;
  white-space: nowrap;
  letter-spacing: 0;
  /*transform: scale(.8);*/
}

.aramaki-en .ruby-rt {
  font-size: 10px;
  display: block;
  position: absolute;
  z-index: 1;
  bottom: -24px;
  left: 35px;
  white-space: nowrap;
  letter-spacing: 0;
  /*transform: scale(.8);*/
}

.sp-mini {
  font-size: 80%;
}


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

CONTENTS

-------------------------------*/
.container {
  min-height: calc(100vh - 250px);
}

.contents-nav {
  display: flex;
  justify-content: center;
  font-family: obvia, sans-serif;
  font-weight: 100;
  margin: 0 auto 40px;
}

.contents-nav-box {
  margin: 0 10px;
}

.cotents-nav-link {
  border: 1px solid #000;
  padding: 15px 40px;
  background: #fff;
  color: #000;
  width: 340px;
  text-align: center;
}

.cotents-nav-link.act {
  background: #000;
  color: #73fbfa;
}

/*
ttl
----------*/
#contents-ttl {
  width: 100%;
  height: 100px;
  color: #000;
  text-align: center;
  font-size: 30px;
  font-family: obvia, sans-serif;
  font-weight: 100;
  letter-spacing: 4px;
  margin: 0 0 35px;
  line-height: 1em;
  text-indent: 4px;
  border-bottom: 1px solid rgba(0,0,0,.1);
}

#contents-ttl-inner {
  display: inline-block;
  margin: 50px 0 0;
  padding: 0 0 19px;
  border-bottom: 1px solid #010001;
  position: relative;
}

#contents-ttl-inner::after {
  content: attr(data-content);
  position: absolute;
  left: 1px;
  text-shadow: -1px 0 #ff7aed;
  top: 0;
  color: #000;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim 2s infinite linear alternate-reverse;
  white-space: nowrap;
}

#contents-ttl-inner::before {
  content: attr(data-content);
  position: absolute;
  left: -1px;
  text-shadow: 1px 0 #73fbfa;
  top: 0;
  color: #000;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim-2 3s infinite linear alternate-reverse;
  white-space: nowrap;
}

@-webkit-keyframes noise-anim {
  0% { clip: rect(75px, 9999px, 128px, 0); }
  5% { clip: rect(102px, 9999px, 90px, 0); }
  10% { clip: rect(184px, 9999px, 106px, 0); }
  15% { clip: rect(80px, 9999px, 17px, 0); }
  20% { clip: rect(37px, 9999px, 194px, 0); }
  25% { clip: rect(129px, 9999px, 11px, 0); }
  30% { clip: rect(64px, 9999px, 65px, 0); }
  35% { clip: rect(2px, 9999px, 83px, 0); }
  40% { clip: rect(186px, 9999px, 195px, 0); }
  45% { clip: rect(31px, 9999px, 21px, 0); }
  50% { clip: rect(155px, 9999px, 71px, 0); }
  55% { clip: rect(179px, 9999px, 195px, 0); }
  60% { clip: rect(63px, 9999px, 78px, 0); }
  65% { clip: rect(81px, 9999px, 35px, 0); }
  70% { clip: rect(70px, 9999px, 20px, 0); }
  75% { clip: rect(48px, 9999px, 154px, 0); }
  80% { clip: rect(19px, 9999px, 200px, 0); }
  85% { clip: rect(165px, 9999px, 83px, 0); }
  90% { clip: rect(96px, 9999px, 197px, 0); }
  95% { clip: rect(192px, 9999px, 131px, 0); }
  100% { clip: rect(160px, 9999px, 153px, 0); }
}

@keyframes noise-anim {
  0% { clip: rect(75px, 9999px, 128px, 0); }
  5% { clip: rect(102px, 9999px, 90px, 0); }
  10% { clip: rect(184px, 9999px, 106px, 0); }
  15% { clip: rect(80px, 9999px, 17px, 0); }
  20% { clip: rect(37px, 9999px, 194px, 0); }
  25% { clip: rect(129px, 9999px, 11px, 0); }
  30% { clip: rect(64px, 9999px, 65px, 0); }
  35% { clip: rect(2px, 9999px, 83px, 0); }
  40% { clip: rect(186px, 9999px, 195px, 0); }
  45% { clip: rect(31px, 9999px, 21px, 0); }
  50% { clip: rect(155px, 9999px, 71px, 0); }
  55% { clip: rect(179px, 9999px, 195px, 0); }
  60% { clip: rect(63px, 9999px, 78px, 0); }
  65% { clip: rect(81px, 9999px, 35px, 0); }
  70% { clip: rect(70px, 9999px, 20px, 0); }
  75% { clip: rect(48px, 9999px, 154px, 0); }
  80% { clip: rect(19px, 9999px, 200px, 0); }
  85% { clip: rect(165px, 9999px, 83px, 0); }
  90% { clip: rect(96px, 9999px, 197px, 0); }
  95% { clip: rect(192px, 9999px, 131px, 0); }
  100% { clip: rect(160px, 9999px, 153px, 0); }
}

@-webkit-keyframes noise-anim-2 {
  0% { clip: rect(82px, 9999px, 59px, 0); }
  5% { clip: rect(97px, 9999px, 127px, 0); }
  10% { clip: rect(51px, 9999px, 28px, 0); }
  15% { clip: rect(20px, 9999px, 91px, 0); }
  20% { clip: rect(14px, 9999px, 146px, 0); }
  25% { clip: rect(110px, 9999px, 81px, 0); }
  30% { clip: rect(132px, 9999px, 194px, 0); }
  35% { clip: rect(35px, 9999px, 112px, 0); }
  40% { clip: rect(13px, 9999px, 127px, 0); }
  45% { clip: rect(145px, 9999px, 27px, 0); }
  50% { clip: rect(39px, 9999px, 181px, 0); }
  55% { clip: rect(115px, 9999px, 199px, 0); }
  60% { clip: rect(26px, 9999px, 177px, 0); }
  65% { clip: rect(183px, 9999px, 25px, 0); }
  70% { clip: rect(149px, 9999px, 120px, 0); }
  75% { clip: rect(71px, 9999px, 7px, 0); }
  80% { clip: rect(150px, 9999px, 55px, 0); }
  85% { clip: rect(69px, 9999px, 136px, 0); }
  90% { clip: rect(155px, 9999px, 10px, 0); }
  95% { clip: rect(16px, 9999px, 145px, 0); }
  100% { clip: rect(79px, 9999px, 131px, 0); }
}

@keyframes noise-anim-2 {
  0% { clip: rect(82px, 9999px, 59px, 0); }
  5% { clip: rect(97px, 9999px, 127px, 0); }
  10% { clip: rect(51px, 9999px, 28px, 0); }
  15% { clip: rect(20px, 9999px, 91px, 0); }
  20% { clip: rect(14px, 9999px, 146px, 0); }
  25% { clip: rect(110px, 9999px, 81px, 0); }
  30% { clip: rect(132px, 9999px, 194px, 0); }
  35% { clip: rect(35px, 9999px, 112px, 0); }
  40% { clip: rect(13px, 9999px, 127px, 0); }
  45% { clip: rect(145px, 9999px, 27px, 0); }
  50% { clip: rect(39px, 9999px, 181px, 0); }
  55% { clip: rect(115px, 9999px, 199px, 0); }
  60% { clip: rect(26px, 9999px, 177px, 0); }
  65% { clip: rect(183px, 9999px, 25px, 0); }
  70% { clip: rect(149px, 9999px, 120px, 0); }
  75% { clip: rect(71px, 9999px, 7px, 0); }
  80% { clip: rect(150px, 9999px, 55px, 0); }
  85% { clip: rect(69px, 9999px, 136px, 0); }
  90% { clip: rect(155px, 9999px, 10px, 0); }
  95% { clip: rect(16px, 9999px, 145px, 0); }
  100% { clip: rect(79px, 9999px, 131px, 0); }
}
    

/*
pager
----------*/
#pager {
  font-family: obvia, sans-serif;
  font-weight: 300;
  padding: 0 0 100px;
}

.posts-nav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  font-family: obvia, sans-serif;
  font-weight: 300;
  margin: 0 0 100px;
}

.pager-btn,
.posts-nav li {
  margin: 5px;
}

.pager-btn a,
.posts-nav li a,
.posts-nav li span {
  width: 30px;
  height: 30px;
  border: 1px solid #000;
  text-align: center;
  background: #fff;
  color: #000;
  padding: 7px 0;
  display: block;
  letter-spacing: 0;
}

.posts-nav li span {
  color: #fff;
  background: #000;
}

.posts-nav li .extend {
  color: #000;
  background: none;
  border: none;
  padding: 0;
  vertical-align: middle;
  display: table-cell;
}

@media all and (min-width:769px) {
  .posts-nav li a:hover {
    color: #fff;
    background: #000;
  }
}

/*
tag
----------*/
#contents-tag-container {
  font-family: obvia, sans-serif;
  font-weight: 300;
  font-size: 14px;
  margin: 0 auto 50px;
  padding: 0 0 35px;
  width: 800px;
  justify-content: space-between;
  position: relative;
}

#contents-tag-container::after {
  content: "";
  display: block;
  width: calc(((100vw - 180px) - 100%)/2 + 100%);
  height: 1px;
  background: rgba(0,0,0,.1);
  position: absolute;
  z-index: 0;
  bottom: 0;
  right: calc(((100vw - 180px) - 100%)/-2);
}

#contents-tag-container::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: rgb(0,0,0);
  background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 20px, rgba(0,0,0,0) 20px, rgba(0,0,0,0) calc(100% - 20px), rgba(0,0,0,1) calc(100% - 20px), rgba(0,0,0,1) 100%);
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: 0;
}

.contents-tag-box {
}

.contents-tag-link {
  display: block;
  text-align: center;
  min-width: 120px;
  height: 30px;
  background: #fff;
  border: 1px solid #000;
  color: #000;
  padding: 8px 10px;
  letter-spacing: 2px;
  text-indent: 2px;
}

.contents-tag-link.sizeM {
  width: 180px;
}

.contents-tag-link.act {
  color: #73fbfa;
  background: #010001;
}



/*
control
----------*/
#news-detail-control {
  padding: 0 0 100px;
  font-family: obvia, sans-serif;
  font-weight: 300;
  font-size: 10px;
}

#next-btn,
#prev-btn,
#home-btn {
  width: 60px;
  height: 60px;
  margin: 10px;
}

.control-btn {
  width: 60px;
  height: 60px;
  background: #fff;
  border: 1px solid #ccc;
  display: block;
  text-align: center;
  color: #000;
}

.control-icon {
  display: block;
  width: 100%;
  height: 40px;
  font-size: 20px;
  position: relative;
  padding: 13px 0 0;
}

.icon-home {
  font-size: 24px;
}

/*
coming
----------*/
.coming-txt {
  text-align: center;
  padding: 100px 0;
  font-size: 14px;
}

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

NEWS

-------------------------------*/
#news {
}

#news-box-container {
  width: 800px;
  margin: 0 auto;
}

.news-box {
  width: 800px;
  margin: 0 0 20px;
  background: #fff;
  position: relative;
}

.news-link {
  width: 100%;
  height: 140px;
  border: 1px solid #000;
  font-size: 11px;
  color: #000;
}

.news-thumb {
  width: 250px;
  height: 100%;
  overflow: hidden;
  background: #010001;
}

.news-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-right: 1px solid #000;
}

.news-inner {
  width: calc(100% - 250px);
  padding: 20px;
  line-height: 1.8em;
}

.news-box-ttl {
  font-size: 16px;
  font-weight: bold;
  padding: 0 0 25px;
}

.news-box-txt {
  font-size: 12px;
  color: #777;
}

.news-date-box {
  font-size: 10px;
  letter-spacing: 1px;
  text-align: right;
  position: relative;
  padding: 3px 0;
  font-family: obvia, sans-serif;
  font-weight: 300;
}

.news-date-box::after {
  content: "";
  background: #000;
  display: block;
  width: calc(100% - 145px);
  height: 1px;
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 0;
}


/*
#news-detail
-------------------------------*/
#news-detail-container {
  width: 800px;
  margin: 0 auto 50px;
  padding: 20px 30px 0;
  position: relative;
  background: #fff;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}

#news-detail-container::after {
  content: "";
  display: block;
  width: 807px;
  height: 134px;
  background: url("../img/news/detail_frame_top.png");
  background-size: 807px auto;
  position: absolute;
  top: -14px;
  left: -1px;
  pointer-events: none;
}

#news-detail-container::before {
  content: "";
  display: block;
  width: 800px;
  height: 14px;
  background: url("../img/news/detail_frame_bottom.png");
  background-size: 800px auto;
  position: absolute;
  bottom: -14px;
  left: -1px;
  pointer-events: none;
}

#news-detail-header {
  margin: 0 0 30px;
  padding: 0 0 20px;
  background: url("../img/news/detail_line.png") center bottom no-repeat;
  background-size: 100% 3px;
}

#news-detail-date {
  font-size: 13px;
  font-family: obvia, sans-serif;
  font-weight: 300;
  position: relative;
  padding: 0 0 10px;
}

#news-detail-date::after {
  content: "";
  background: #000;
  display: block;
  width: calc(100% - 145px);
  height: 1px;
  position: absolute;
  z-index: 1;
  top: 5px;
  right: 0;
}

#news-detail-ttl {
  font-size: 20px;
  font-family: fot-matisse-pron, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";
  font-style: normal;
  font-weight: bold;
  line-height: 1.5em;
}

#news-detail-main {
  font-size: 13px;
  line-height: 1.8em;
  padding: 0 0 30px;
}

#news-detail-main img {
  max-width: 100%;
  height: auto;
}

#news-detail-main iframe {
  width: 100%;
  height: 415px;
}


#news-detail-footer {
  border-top: 1px solid #f1f1f1;
  font-family: obvia, sans-serif;
  font-weight: 300;
  padding: 10px 0 0;
  justify-content: space-between;
}

.news-detail-footer-ttl {
  font-size: 10px;
  padding: 7px 10px 0 0;
}

#news-detail-category {
  font-size: 16px;
  padding: 7px 0 0 0;
}


.detail-share-ttl {
  font-size: 10px;
  padding: 7px 10px 0 0;
}

.detail-share-link {
  width: 30px;
  height: 30px;
  background: url("../img/news/share_btn_bg.png") no-repeat;
  background-size: 30px 30px;
  margin: 0 0 0 10px;
  color: #010001;
  text-align: center;
  font-size: 17px;
  padding: 7px 0 0 2px;
}

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

STAFF&CAST

-------------------------------*/
#staffcast {
}

#staff,
#cast,
#motion-actor {
  line-height: 1em;
  letter-spacing: 0px;
  width: 900px;
  margin: 60px auto 100px;
}

.staff-box,
.cast-box {
  margin: 0 0 30px;
}

.staff-line-jp,
.cast-line-jp {
  font-size: 20px;
  font-family: fot-matisse-pron, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";
  line-height: 40px;
  height: 40px;
  margin: 0 0 10px;
}

.staff-name0-jp,
.cast-name0-jp {
  font-size: 16px;
  border-right: 1px solid rgba(0,0,0,1);
}

.staff-name1-jp,
.cast-name1-jp {
  font-size: 28px;
  height: 100%;
}

.staff-name1-jp.small {
  font-size: 20px;
}

.staff-name-mini {
  font-size: 50%;
}

.staff-line-en,
.cast-line-en {
  font-family: 'Century', Georgia, "Times New Roman", Times, "serif";
  line-height: 20px;
  height: 20px;
}

.staff-name0-en,
.cast-name0-en {
  font-size: 13px;
  border-right: 1px solid rgba(0,0,0,.3);
}

.staff-name1-en,
.cast-name1-en {
  font-size: 14px;

}

.staff-name0-jp,
.staff-name0-en,
.cast-name0-jp,
.cast-name0-en {
  width: 350px;
  text-align: right;
  padding: 0 20px 0 0;
}

.staff-name1-jp,
.staff-name1-en,
.cast-name1-jp,
.cast-name1-en {
  width: 550px;
  padding: 0 0 0 30px;
}

.staff-production-img {
  width: 244px;
}

.staffcast-ttl {
  width: 100%;
  font-size: 20px;
  font-family: obvia, sans-serif;
  font-weight: 300;
  display: block;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  text-align: center;
  padding: 20px;
  margin: 0 0 50px;
  letter-spacing: 4px;
  text-indent: -4px;
}

.line2 {
  height: auto;
}


#cast {}

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

MOVIES

-------------------------------*/
#movies {
}

.contents-main-movies {
  position: relative;
  padding-top: 50vh;
}

#movies #contents-ttl {
  margin: 0 auto;
}

#movies-stage {
  width: calc(100vw - 180px);
  /*height: calc(100vh - 400px);*/
  height: 50vh;
  background: #010001;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}

#movies-stage-inner {
  width: 100%;
  height: 100%;
  position: relative;
  line-height: 0em;
}

/*#movies-stage-inner::after {
  content: "";
  display: block;
  padding-top: 56.25%;
}*/

#movies-player {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#movies-info {
  width: 80%;
  margin: 0 auto 50px;
  padding: 30px 0 20px;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.1);
  position: relative;
  transition: all .2s ease;
  justify-content: space-between;
}

#movies-info::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: rgb(0,0,0);
  background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 20px, rgba(0,0,0,0) 20px, rgba(0,0,0,0) calc(100% - 20px), rgba(0,0,0,1) calc(100% - 20px), rgba(0,0,0,1) 100%);
  position: absolute;
  z-index: 1;
  bottom: -1px;
  right: 0;
}

#movies-ttl {
  font-size: 18px;
  font-family: fot-matisse-pron, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";
  font-weight: bold;
  line-height: 1.5em;
  padding: 0 0 15px;
}

#movies-update {
  font-size: 12px;
  line-height: 1em;
  font-family: obvia, sans-serif;
  font-weight: 300;
}

#movies-list-container {
  width: 840px;
  margin: 0 auto 80px;
}

.movies-list-item {
  cursor: pointer;
  margin: 0 10px 20px;
}

.movies-list-thumb-box {
  width: 400px;
  position: relative;
}

.movies-list-thumb-box::after {
  content: "";
  display: block;
  padding-top: 56.25%;
}

.movies-list-thumb-img {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
}

.movies-list-ttl {
  font-size: 14px;
  font-family: fot-matisse-pron, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";
  font-weight: bold;
  line-height: 1.5em;
}

.movies-list-update {
  font-size: 10px;
  line-height: 1em;
  font-family: obvia, sans-serif;
  font-weight: 300;
}

.movies-list-txt-box {
  padding: 10px 0;
  transition: padding .3s ease;
}

.movies-list-item:hover .movies-list-txt-box {
  padding: 10px;
}

/*
fixed時
--------------------*/
#movies-info.fixed {
  padding: 10px 5%;
  position: fixed;
  width: calc(100vw - 180px);
  top: 50vh;
  z-index: 5;
  height: 55px;
  left: 180px;
  right: 0;
}

#movies-info.fixed #movies-ttl {
  padding: 0 0 5px;
  font-size: 14px;
}

#movies-info.fixed #movies-update {
  font-size: 10px;
}

#movies-list-container.fixed {
  margin: 135px auto 80px;
}

@media all and (min-width:769px) and (max-width:1279px) {
  #movies-stage {
    min-width: 1100px;
  }

}

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

PRODUCTS

-------------------------------*/
#products {
  
}

#bluray #contents-tag-container {
  justify-content: center;
}

.products-tag-btn {
  margin: 0 10px;
  height: 50px;
  width: auto;
  line-height: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
}

#products-box-container {
  width: 1000px;
  margin: 50px auto 100px;
}

.products-box {
  width: 320px;
  padding: 0 20px 20px 0;
  border-bottom: 1px solid rgba(0,0,0,.1);
  border-right: 1px solid rgba(0,0,0,.1);
}

.products-box:nth-child(3n+2) {
  width: 340px;
  padding: 0 20px 20px;
}

.products-box:nth-child(3n+3) {
  width: 320px;
  padding: 0 0 20px 20px;
  border-right: none;
}

.products-box:nth-child(n + 4) {
  padding-top: 20px;
}

.products-box-link {
  color: #000;
}

.products-thumb {
  width: 300px;
  height: 300px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.1);
  overflow: hidden;
}

.products-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  font-family: 'object-fit: contain;';
}

.products-box-ttl {
  font-size: 14px;
  font-family: fot-matisse-pron, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";
  font-weight: bold;
  line-height: 1.5em;
  padding: 15px 0 10px;
}

.products-box-price {
  font-size: 10px;
  line-height: 1em;
  font-family: obvia, sans-serif;
  font-weight: 300;
}

/*
#products-detail
-------------------------------*/
.products-detail-container {
  width: 980px;
  margin: 50px auto;
  justify-content: space-between;
  align-items: flex-start;
}

.products-detail-thumb-container {
  width: 450px;
}

_:-ms-input-placeholder, :root #products-detail-thumb-container {
  display: flex;
  flex-wrap: wrap;
}

.products-detail-thumb {
  width: 450px;
  min-height: 450px;
  background: #eee;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 1px;
}

.products-detail-thumb-img {
  width: 100%;
  height: auto;
  /*height: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  object-fit: contain;
  font-family: 'object-fit: contain;';*/
}

.products-detail-thumb-nav {
  margin: 10px 0;
  flex-wrap: wrap;
}

.products-detail-thumb-nav-box {
  width: 80px;
  height: 80px;
  background: #000;
  border: 1px solid #eee;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  margin: 0 5.5px 10px;
}

.products-detail-thumb-nav-box:nth-child(5n) {
  margin-right: 0;
}

.products-detail-thumb-nav-box.act::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  border: 2px solid #000;
  background: rgba(0,0,0,.3)
}

.products-detail-thumb-nav-box.not::after {
  content: "";
  display: block;
  width: 110px;
  height: 1px;
  background: #fff;
  position: absolute;
  transform: rotate(-45deg);
  top: calc(50% - .5px);
  left: calc(50% - 55px);
  opacity: .2;
}

.products-detail-thumb-nav-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: 'object-fit: cover;';
}

.products-detail-spec-container {
  width: 500px;
  position: relative;
  border: 1px solid rgba(0,0,0,.2);
  padding: 20px;
}

.products-detail-spec-container::after {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  background: url("../img/products/frame_top.png") no-repeat;
  background-size: cover;
  position: absolute;
  top: -5px;
  left: -5px;
  pointer-events: none;
}

.products-detail-spec-container::before {
  content: "";
  display: block;
  width: 75px;
  height: 75px;
  background: url("../img/products/frame_bottom.png") no-repeat;
  background-size: 75px 75px;
  position: absolute;
  bottom: -5px;
  right: -5px;
  pointer-events: none;
}

.products-detail-spec-header {
  width: 100%;
  background: url(../img/news/detail_line.png) center bottom no-repeat;
  background-size: 100% 3px;
}

.products-detail-ttl {
  font-size: 20px;
  font-family: fot-matisse-pron, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";
  font-weight: bold;
  line-height: 1.5em;
  padding: 0 0 20px;
}

.products-detail-spec-main {
  padding: 30px 0 0;
}

.products-detail-spec-main {
  font-size: 13px;
  line-height: 1.5em;
}

.products-detail-spec-main iframe {
  max-width: 100%;
  width: 100%;
  height: calc(458px * .5625);
}

.products-detail-spec {
  padding: 0 0 20px;
}

.products-detail-spec-txt {
  padding: 0 0 30px;
}

.products-detail-spec-item-txt {
  font-size: 110%;
  font-weight: bold;
  line-height: 2em;
  padding: 0 0 30px;
}

.products-detail-spec-item-txt p {
  margin: 0 0 5px;
}

.products-detail-spec-item-txt p span {
  background: #000;
  color: #fff;
  padding: 5px;
  display: inline;
}

.products-detail-spec-item-release {
  font-size: 120%;
  font-weight: bold;
  line-height: 2em;
}

.products-detail-spec-item-price,
.products-detail-spec-item-number {font-size: 110%;font-weight: bold;line-height: 2em;}

.products-detail-spec-item-ttl {
  font-size: 90%;
  font-weight: bold;
  display: table;
  background: #000;
  color: #fff;
  margin: 0 0 5px;
  padding: 1px 10px 2px;
}

.products-detail-spec-link {
  display: table;
  margin: 0 auto 30px;
  border: 1px solid #b2b2b2;
  color: #000;
  width: 50%;
  text-align: center;
  padding: 10px 0;
  font-family: fot-matisse-pron, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";
}

_:-ms-input-placeholder, :root #products-detail-spec-link {
  padding: 15px 0 5px; 
}

.products-detail-spec-footer {
  border-top: 1px solid #f1f1f1;
  padding: 10px 0 0;
}

.products-tokuten-container {
  margin: 0 0 100px;
}

.products-tokuten-ttl {
  font-size: 18px;
  font-family: fot-matisse-pron, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";
  font-weight: bold;
  line-height: 1.5em;
  padding: 0 0 10px;
  text-align: center;
  border-bottom: 1px solid;
  display: table;
  margin: 50px auto;
}

.products-tokuten-box-container {
  width: 980px;
  margin: 0 auto;
}

.products-tokuten-box {
  background: #000;
  width: 450px;
  margin: 0 20px 40px;
  /* padding: 10px; */
}

.products-tokuten-link {
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  height: 100%;
}

.products-tokuten-box-header {
  width: 100%;
}

.products-tokuten-box-ttl {
  color: #fff;
  font-size: 16px;
  padding: 0 0 0 10px;
  border-left: 5px solid #fff;
  margin: 10px 0 20px 0;
  line-height: 1.5em;
}

.products-tokuten-box-txt {
  color: #fff;
  padding: 0 10px 15px;
  line-height: 1.5em;
}

.products-tokuten-box-img {
  display: flex;
  align-items: flex-end;
  width: 430px;
  height: 430px;
  background: #fff;
}

.products-tokuten-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.products-tokuten-notes {
  width: 980px;
  margin: 0 auto;
  font-size: 12px;
  padding: 0 20px;
}

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

MUSIC

-------------------------------*/
#music {}

#music #contents-tag-container {
  justify-content: center;
}

#music #contents-main {
  width: 800px;
  margin: 0 auto;
}

.music-tag-btn {
  margin: 0 10px;
  width: 160px;
}

.music-container {
  margin: 0 auto 30px;
  font-family: fot-matisse-pron, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";
}

.music-ttl {
  font-size: 24px;
  text-align: center;
  line-height: 1.5em;
  width: 300px;
  margin: 0 auto;
}

.music-ttl-sub{
  font-size: 20px;
  font-family: obvia, sans-serif;
  font-weight: 300;
  display: block;
    border-top: 1px solid #000;
  opacity: .5;
}

.music-container-inner {}

.music-container-ttl-box {
  text-align: center;
  padding: 0 0 50px;
}

.music-song-ttl {
  font-size: 40px;
  line-height: 2em;
}

.music-song-artist {
  font-size: 24px;
  line-height: 2em;
}

.music-song-writing {
  font-size: 18px;
  line-height: 1.3em;
}

.music-strong-txt {
  width: 100%;
  text-align: center;
  background: #000;
  color: #fff;
  padding: 10px 0;
}

_:-ms-input-placeholder, :root .music-strong-txt {
  height: 33px;
  padding: 14px 0 0 0 ;
}

.music-comment-box {
  margin: 0 0 50px;
}

.music-comment-name {
  font-size: 20px;
  text-align: center;
  margin: 0px auto -1px;
  display: table;
  padding: 50px 0 10px;
  border-bottom: 1px solid rgba(0,0,0,1);
  position: relative;
}

.music-comment-name-sub {
  font-size: 60%;
  display: block;
  position: absolute;
  bottom: -20px;
  opacity: .5;
}

.music-comment-name-small {
  font-size: 14px;
}

.music-comment-txt {
  font-size: 13px;
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
  line-height: 1.8em;
  opacity: .8;
  text-align: center;
  border: 1px solid rgba(0,0,0,.1);
  padding: 25px 15px;
}

.music-pv-container {
  
}

.music-artist-prof {}

.music-artist-picture {
  position: relative;
  z-index: 2;
}

.music-artist-prof-txt-box {
  width: 960px;
  padding: 90px 80px 40px 80px;
  background: rgba(0,0,0,.03);
  position: relative;
  z-index: 1;
  top: -80px;
  left: -80px;
}

.music-artist-prof-txt-box.ost {
  top: 0;
  padding: 40px 80px;
}


.music-artist-prof-ttl {
  font-size: 12px;
  font-family: obvia, "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";;
  font-weight: 300;
  display: block;
  margin: 0 0 20px;
  padding: 0 0 5px;
  border-bottom: 1px solid rgba(0,0,0,.3);
}

.music-artist-prof-ttl b {
  font-size: 150%;
  line-height: 1.5em;
}

.music-artist-prof-txt {
  font-size: 14px;
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
  line-height: 1.5em;
}

.music-artist-prof-txt-en {
  font-size: 13px;
  font-family: 'Century', Georgia, "Times New Roman", Times, "serif";
}

.music-pv-container {
  margin: 0 auto 20px;
}

.music-pv-caption {
  text-align: center;
  padding: 0 0 10px;
}

.music-pv-box {
  width: 800px;
  background: #000;
  position: relative;
}

.music-pv-box::after {
  content: "";
  display: block;
  padding-top: 56.25%;
}

.music-youtube {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.music-control {
  margin: 0 auto 100px;
}

.music-control-btn {
  width: 42%;
  margin: 0 4%;
}

.music-control-link {
  padding: 10px;
  display: block;
  position: relative;
  color: #000;
}

.music-control-prev {
  text-align: right;
}

.music-control-next-icon {
  width: calc(100% - 150px);
  height: 1px;
  background: #000;
  position: absolute;
  left: 150px;
  top: 16px;
}

.music-control-next-icon::after {
  content: "";
  display: block;
  width: 10px;
  height: 1px;
  background: #000;
  position: absolute;
  right: 0;
  top: -3px;
  transform: rotate(30deg);
}

.music-control-prev-icon {
  width: calc(100% - 150px);
  height: 1px;
  background: #000;
  position: absolute;
  right: 150px;
  top: 16px;
}

.music-control-prev-icon::after {
  content: "";
  display: block;
  width: 10px;
  height: 1px;
  background: #000;
  position: absolute;
  left: 0;
  top: -3px;
  transform: rotate(-30deg);
}

.music-cd {
  margin: 0 auto 50px;
}

.music-cd-ttl {
  font-size: 20px;
  text-align: center;
  margin: 0px auto 30px;
  display: table;
  padding: 50px 0 10px;
  border-bottom: 1px solid rgba(0,0,0,1);
}

.music-cd-container {
  
}

.music-cd-jkt-box {
  margin: 0 auto 20px;
}

.music-cd-jkt {
  width: 380px;
  height: auto;
  overflow: hidden;
  border: 1px solid #000;
  margin: 0 10px;
  line-height: 0;
}

.music-cd-txt-box {
  width: 100%;
  padding: 0 0 30px;
  line-height: 2em;
  text-align: center;
}

.music-cd-txt-box p {
  padding: 0 0 10px;
}

.music-tokuten-link {
  width: 40%;
  height: 50px;
  margin: 0 auto 100px;
  display: block;
  text-align: center;
  border: 1px solid #000;
  padding: 17px 0;
  color: #000;
}

_:-ms-input-placeholder, :root .music-tokuten-link {
  padding: 22px 0 0 0; 
}

.music-cd-txt-mini {
  font-size: 10px;
  line-height: 1em;
  display: table;
  margin: 0 auto 5px;
  border: 1px solid #000;
  padding: 4px 20px 5px
}

_:-ms-input-placeholder, :root .music-cd-txt-mini {
 padding: 7px 20px 0; 
}

.music-cd-haishin-box {
  margin: 0 auto 30px;
  text-align: center;
}

.music-cd-txt-box-ttl {
  background: #000;
  color: #fff;
  padding: 1px 0 0px !important;
  width: 380px;
  margin: 0 auto 20px;
}

_:-ms-input-placeholder, :root .music-cd-txt-box-ttl {
  height: 27px;
  padding: 5px 0 0 0 !important;
}

.music-cd-txt-ttl {
  font-size: 16px;
  font-weight: bold;
}

.music-cd-txt-ttl-sub {
  display: block;
  font-size: 80%;
  font-weight: normal;
}

.music-cd-txt-ttl-notes {
  display: block;
  color: red;
  font-size: 50%;
  font-weight: normal;
}

.music-cd-txt strong {
  text-align: center;
  font-size: 14px;
  display: block;
}

.music-cd-annotation {
  color: red;
  text-align: center;
  padding: 0 0 50px;
}

.music-cd-sub-block {
  display: block;
  font-size: 80%;
  line-height: 1.5em;
  padding: 0 0 10px;
}

#linernotes .music-ttl {
  width: 560px;
}

.ln-container {
  padding: 80px 0 0;
}
  
.ln-box {
  padding: 0 0 50px;
  line-height: 1.5em;
}

.ln-ttl {
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid;
  padding: 0 0 10px;
  margin: 0 0 10px;  
}

.ln-txt {
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}

.ln-notes {
  background: #eee;
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
  padding: 15px 15px 0;
  line-height: 1.2em;
}

.ln-notes-ttl {
  font-weight: bold;
  padding: 0 0 5px;
}

.ln-notes-txt {
  padding: 0 0 15px;
}

.music-cd-thumb {
  justify-content: space-between;
  margin: 10px auto;
  width: 380px;
}

.music-cd-thub-box {
  width: 20%;
  position: relative;
}

.music-cd-thub-box.act::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  border: 2px solid #000;
  background: rgba(0,0,0,.3);
}

@media all and (min-width:769px) {
  
  .music-control-next-icon,
  .music-control-prev-icon {
    transition: all .3s ease;
  }
  
  .music-control-link:hover .music-control-next-icon,
  .music-control-link:hover .music-control-prev-icon {
    width: 50%;
  }
  
  .music-tokuten-link:hover {
    color: #73fbfa;
    background: #000;
  }

}

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

characters

-------------------------------*/
#characters {
  
}

#characters #contents-ttl {
  margin: 0 0 60px;
}

#characters-box-container,
#words-box-container {
  width: 1020px;
  margin: 0 auto 80px;
}

.characters-box {
  width: 320px;
  height: 400px;
  background: #000;
  margin: 10px;
  position: relative;
  overflow: hidden;
}

.words-box {
  width: 320px;
  height: 160px;
  background: #222;
  margin: 10px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.characters-box::after,
.words-box::after {
  content: "";
  display: block;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  border: 1px solid #fff;
  position: absolute;
  top: 10px;
  left: 10px;
  pointer-events: none;
  z-index: 1;
}

.characters-box-name,
.words-box-ttl {
  color: #fff;
  text-align: center;
  font-size: 24px;
  font-family: fot-matisse-pron, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";
  line-height: 1em;
}

_:-ms-input-placeholder, :root .words-box-ttl {
  padding: 20px 0 0 0;
}

.characters-box-name {
  position: absolute;
  width: 100%;
  bottom: 20px;
  left: 0;
  text-shadow: 0 0 15px rgba(0,0,0,1);
}

.characters-box-sub-name {
  font-size: 14px;
  display: block;
}

.show-detail-btn {
  cursor: pointer;
  transition: opacity .3s ease;
}

.show-detail-btn:hover {
  opacity: .8;
}

.words-container-ttl {
  width: 100%;
  font-size: 20px;
  font-family: obvia, sans-serif;
  font-weight: 300;
  display: block;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  text-align: center;
  padding: 20px;
  margin: 0 0 50px;
  letter-spacing: 4px;
  text-indent: -4px;
}

/*
#detail
-------------------------------*/
#characters-detail-container,
#words-detail-container {
  display: none;
}

#characters-detail-container-inner {
  width: 1000px;
  min-height: 40vh;
  margin: 0 auto 50px;
  font-family: fot-matisse-pron, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";
}

.characters-detail-box {
  display: none;
  opacity: 0;
  position: relative;
  margin: 0 0 80px;
}

.characters-detail-box-inner {
  display: grid;
  grid-template-rows: 211px 639px;
  grid-template-columns: 600px 35px 365px;
  display: -ms-grid;
  -ms-grid-rows: 211px 639px;
  -ms-grid-columns: 600px 35px 365px;
}

.characters-detail-txt-box {
  width: 365px;
  grid-row: 1 / 2;
  grid-column: 3 / 4;
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}

.characters-detail-name {
  font-size: 24px;
  margin: 0 0 15px;
  line-height: 1em;
  white-space: nowrap;
}

.characters-detail-name-en {
  font-size: 16px;
  border-left: 1px solid #000;
  margin: 0 0 0 10px;
  padding: 0 0 0 10px;
}

.characters-detail-cv {
  font-size: 14px;
  margin: 0 0 30px;
}

.characters-detail-txt {
  font-size: 13px;
  line-height: 2em;
}

.characters-detail-main {
  width: 600px;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.characters-detail-model {
  width: 365px;
  grid-row: 2 / 3;
  grid-column: 3 / 4;
  -ms-grid-row: 2;
  -ms-grid-column: 3;
  border: 1px solid rgba(0,0,0,.1);
  background: url("../img/characters/bg_pt.png") repeat;
  background-size: 13px 13px;
}

.characters-detail-main-img,
.characters-detail-model-img {
  width: 100%;
  height: auto;
}

#words-detail-container {
  padding: 0 0 100px;
  width: 800px;
  margin: 0 auto;
}

.words-detail-box {
  width: 800px;
  margin: 0 auto 50px;
}

.words-detail-name {
  font-size: 24px;
  padding: 0 0 10px;
  margin: 0 0 20px;
  line-height: 1em;
  border-bottom: 1px solid rgba(0,0,0,.1);
}

.words-detail-name span {
  font-size: 80%;
}

.words-detail-txt {
  font-size: 14px;
  line-height: 1.8em;
}

#words-detail-control {
  font-family: obvia, sans-serif;
  font-weight: 300;
  font-size: 10px;
}

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

supplements

-------------------------------*/
#supplements {
  
}

#supplements-box-container {
  width: 900px;
  margin: 50px auto;
}

.supplements-box {
  width: 400px;
  margin: 0 25px 25px;
  background: #fff;
  position: relative;
}

.supplements-link {
  width: 100%;
  border: 1px solid #000;
  font-size: 11px;
  color: #000;
  overflow: hidden;
}

.supplements-thumb {
  width: 400px;
  height: 400px;
  overflow: hidden;
  border-bottom: 1px solid #000;
  position: relative;
}

.supplements-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.supplements-inner {
  padding: 20px;
  line-height: 1.8em;
}

.supplements-box-ttl {
  font-size: 16px;
  font-weight: bold;
}

.supplements-date-box {
  font-size: 10px;
  letter-spacing: 1px;
  text-align: right;
  position: relative;
  padding: 3px 0;
  font-family: obvia, sans-serif;
  font-weight: 300;
}

.supplements-date-box::after {
  content: "";
  background: #000;
  display: block;
  width: calc(100% - 145px);
  height: 1px;
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 0;
}

@media all and (-ms-high-contrast: none) {

  .supplements-thumb-img {
    width: 100%;
    height: auto;
    object-fit: none;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  
}


/*
#supplements-detail
-------------------------------*/
#supplements-detail-header {
  width: 100%;
  height: 350px;
  overflow: hidden;
  margin: -35px 0 0 0;
  position: relative;
}

.supplements-detail-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#supplements-detail-container-inner {
  width: 800px;
  margin: 30px auto 50px;
  position: relative;
}

#supplements-detail-ttl {
  font-size: 20px;
  font-family: fot-matisse-pron, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";
  line-height: 1.5em;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  margin: 0 0 25px;
  padding: 0 25px;
}

#supplements-detail-main {
  font-size: 13px;
  padding: 0 25px;
  border-left: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
  line-height: 2em;
  position: relative;
}

#supplements-detail-main a {
  display: inline;
}

#supplements-detail-main img {
  max-width: 100%;
  height: auto;
}

#supplements-detail-main iframe {
  max-width: 100%;
  height: 420px;
}

#supplements-detail-main::before {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  right: -1px;
  background: rgb(0,0,0);
  background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 25px, rgba(0,0,0,0) 25px, rgba(0,0,0,0) calc(100% - 25px), rgba(0,0,0,1) calc(100% - 25px), rgba(0,0,0,1) 100%);
}

#supplements-detail-main::after {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: -1px;
  background: rgb(0,0,0);
  background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 25px, rgba(0,0,0,0) 25px, rgba(0,0,0,0) calc(100% - 25px), rgba(0,0,0,1) calc(100% - 25px), rgba(0,0,0,1) 100%);
}

#supplements-detail-share-box {
  position: absolute;
  z-index: 1;
  top: 512px;
  left: calc(50% + 520px);
}

.supplements-detail-ttl {
  font-size: 10px;
  transform: rotate(90deg) translate(-19px, 4px);
  width: 40px;
}

#supplements-detail-share .detail-share-link {
  margin: 0 0 10px 0;
}


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

404

-------------------------------*/
#notfound {
  background: #fff url("../img/common/bg_pt.png") center center repeat;
  background-size: 44px 44px;
  min-height: calc(100vh - 195px);
}

.txt-404 {
  padding: 200px;
  text-align: center;
  font-size: 120px;
  line-height: 1em;
  font-family: obvia, sans-serif;
  font-weight: 300;
}

.txt-404-sub {
  display: block;
  font-size: 14px;
  font-family: fot-matisse-pron, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";
}

.mb50 {
  margin-bottom: 30px;
}

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

community

-------------------------------*/
#community {
  font-family: fot-matisse-pron, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";
}

.community-header {
  width: 100%;
  margin: 0 auto 70px;
}

.community-section {margin: 0 auto 70px;}

.community-section-ttl {
  font-size: 24px;
  text-align: center;
  line-height: 1.5em;
  margin: 0 auto 60px;
  display: table;
}

.community-section-sub-ttl {
  font-size: 20px;
  font-family: obvia, sans-serif;
  font-weight: 300;
  display: block;
  border-top: 1px solid #000;
  opacity: .5;
  padding: 0 50px;
  white-space: nowrap;
}

.community-section-inner {width: 900px;margin: 0 auto;}

.community-concept-txt {
  text-align: center;
  font-size: 14px;
  line-height: 2em;
  margin: 0 0 80px;
  position: relative;
  z-index: 1;
}

.community-concept-txt::after {
  content: "";
  display: block;
  width: 420px;
  height: 365px;
  position: absolute;
  z-index: -1;
  top: -40px;
  right: -76px;
  background: url(../img/community/concpt_bg.png) no-repeat;
  background-size: 420px auto;
}


.community-link-box {
  width: 450px;
  height: 50px;
  background: #000;
  color: #fff;
  text-align: center;
  margin: 0 auto;
  position: relative;
 }

 .community-link-box::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid #000;
  position: absolute;
  top: -5px;
  left: -5px;
  z-index: -1;
 }
 
 .community-link-box::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid #000;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: -1;
 }

.community-link-btn {
  color: #fff;
  display: block;
  width: 100%;
  height: 100%;
  padding: 16px 0;
  font-size: 18px;
  position: relative;
  z-index: 1;
  line-height: 1em;
}

.community-about-list {/* width: 900px; *//* margin: 0 auto; */}

.community-about-item {margin: 0 auto 30px;position: relative;line-height: 0em;}

.community-about-item::after {
  content: "";
  display: block;
  width: calc(((100vw - 180px) - 900px)/2);
  height: 100%;
  background: #000;
  position: absolute;
  z-index: 1;
  top: 0;
}

.community-about-item:nth-child(2)::after {
  right: calc(((100vw - 180px) - 900px)/-2);
}

.community-about-item:nth-child(1)::after{
  left: calc(((100vw - 180px) - 900px)/-2);
}

.community-signup-txt {display: table;margin: 0 auto 50px;font-size: 16px;line-height: 2em;}

.community-signup-attention-box {/* width: 900px; */margin: 0 auto;padding: 30px 70px;background: rgba(75,143,226,.7);font-size: 14px;line-height: 2em;color: #fff;}

.community-signup-attention-ttl {
  text-align: center;
  margin: 0 auto 30px;
  font-size: 16px;
  border-bottom: 1px solid #fff;
  display: table;
}

.community-signup-attention {margin: 0 0 40px;}

.community-signup-attention-item {

}

.community-qa-box {
    line-height: 1.5em;
}

.community-qa-q {display: flex;flex-wrap: wrap;align-items: center;padding: 25px 25px 25px 0;background: #4b8fe2;color: #fff;}

.community-qa-a {display: flex;flex-wrap: wrap;align-items: center;padding: 25px 0;}

.community-qa-0 {width: 120px;text-align: center;font-size: 30px;font-family: obvia, sans-serif;}

.community-qa-1 {width: 755px;font-size: 16px;}


.community-footer {background: #808080;padding: 30px 0;}

.community-footer-logo {width: 380px;margin: 0 auto 40px;}

.community-footer-nav {display: flex;justify-content: center;}

.community-footer-nav-box {padding: 0 15px;border-right: 1px solid #fff;}

.community-footer-nav-box:nth-last-child(1) {
  border-right: none
  }

.community-footer-nav-link {color: #fff;}

#c-pp {
  padding: 0;
}

#c-pp .pp-item {
  text-indent: 0;
  padding: 0;
}

#c-pp .pp-block:nth-last-child(1) {
  padding: 0 0 100px;
}

.community-sns-container {
  display: flex;
  width: 900px;
  margin: 0 auto;
  justify-content: space-between;
}

.community-sns-box {
  width: 100%;
  max-width: 400px;
  height: 400px;
  border: 1px solid #000;
  /* margin: 0 25px; */
  display: block;
  overflow: hidden;
}

.community-sns-link {
  width: 300px;
  height: 120px;
  border: 1px solid #000;
  text-align: center;
  color: #000;
  padding: 52px 0;
  display: block;
}

.community-sns-link:hover {
  background: #2477f2;
  color: #fff;
}

.community-login-box {
  position: absolute;
  z-index: 10;
  top: 30px;
  right: 30px;
}

.community-login-btn {
  width: 150px;
  height: 30px;
  border: 1px solid #000;
  text-align: center;
  color: #000;
  padding: 8px 0;
}

/*IE*/
@media all and (-ms-high-contrast: none) {
  .community-link-btn {
    padding: 21px 0 11px;
  }
  
  .community-footer-nav-link {
    padding: 6px 0 0 0;
  }
}



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

privacy

-------------------------------*/
#pp {
  padding: 0 0 100px;
}

.pp-block {
  width: 800px;
  margin: 30px auto;
  position: relative;
  line-height: 1.8em;
}

.pp-block-ttl {
  padding: 10px 20px;
  color: #fff;
  background: #000;
  font-size: 18px;
  margin: 0 0 20px;
}

.pp-block-lead {
  padding: 0 0 20px;
  font-size: 14px;
  font-weight: bold;
}

.pp-list {
  
}

.pp-item {
  text-indent: -1.5em;
  padding: 0 0 0 1.5em;
}


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

STREAMING

-------------------------------*/
#streaming {
  line-height: 1.8em;
}

#streaming #contents-main {
  width: 700px;
  margin: 0 auto;
}

#streaming-container {
  padding: 0 0 100px;
}

.streaming-txt-container {
  padding: 0 0 30px;
}

.streaming-platform-container {
  padding: 0 0 50px;
}

.streaming-platform-ttl {
  width: 380px;
  background: #000;
  color: #fff;
  padding: 10px;
  margin: 0 auto 20px;
  text-align: center;
}

.streaming-platform-txt {
  margin: 0 0 30px;
  text-align: center;
}

.streaming-platform-txt h3 {
  font-size: 150%;
  line-height: 2em;
}

.streaming-platform-txt span {
  font-size: 80%;
}

.streaming-platform-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.streaming-platform-link {
  width: 48%;
  height: 50px;
  text-align: center;
  color: #000;
  margin: 1%;
  padding: 13px 0;
  display: block;
  border: 1px solid #000;
  transition: all .2s ease;
}

.streaming-platform-link:hover {
  background: #000;
  color: #73fbfa;
}


/************************************************

SP

************************************************/
@media all and (max-width:768px) {

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

  TOP

  -------------------------------*/
  .section-ttl {
    width: 100%;
    height: 180px;
    background: #000;
    color: #fff;
    font-size: 20px;
    padding: 164px 0 0;
    text-align: center;
    letter-spacing: 4px;
    line-height: 1em;
    text-indent: 4px;
  }

  .section-inner {
    background: #fff url("../img/common/bg_pt.png") center center repeat;
    background-size: 44px 44px;
  }
  
  #top-main {
    padding: 0;
    left: 0;
    background: none;
  }

  /*
  #top-main-visual
  -------------------------------*/
  #top-main-visual {
    width: 100%;
    position: relative;
    left: 0;
  }
  
  #top-main-logo {
    position: absolute;
    top: 109vw;
    width: 78.6vw;
    left: 10.8vw;
  }

  .top-movie-bnr {
    top: 74.5625vw;
    left: 2vw;
    width: 32.1875vw;
    transition: none;
  }  

  /*
  #top-main-contents
  -------------------------------*/
  #top-main-contents {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 0 5%;
    top: 0;
    right: 0;
    display: flex;
    flex-wrap: wrap;
  }
  
  #top-main-contents::after {
    content: none;
    display: none;
  }
  
  .top-main-contents-ttl {
    justify-content: center;
  }
  
  .top-contents-ttl {
    font-weight: inherit;
    font-size: 16px;
    padding: 0;
    margin: 0 0 5vw;
    text-align: center;
    line-height: 1.5em;
    position: relative;
    letter-spacing: 2px;
    text-indent: 2px;
  }

  .top-contents-ttl::after {
    content: "";
    display: block;
    width: 50vw;
    height: 1px;
    background: rgba(0,0,0,.1);
    left: 50%;
    right: 0;
    bottom: -1px;
    top: auto;
  }

  /*
  #top-share
  -------------------------------*/
  #top-share {
    width: 100%;
    order: 3;
  }
  
  #top-share-container {
    margin: 0 0 10%;
    width: 100%;
    justify-content: center;
  }

  .top-share-box {
    margin: 0 8%;
  }

  .top-share-link {
    color: #000;
    font-size: 24px;

  }

  /*
  #top-movie
  -------------------------------*/
  #top-movie {
    margin: 0 0 10%;
    width: 100%;
    order: 3;
  }
  
  .movie-box-inner {
    width: 100%;
    height: calc(90vw*.5625);
  }
  
  .youtube {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
  }

  .movie-icon-box {
    width: 80px;
    height: 80px;
    position: absolute;
    z-index: 1;
    top: calc(50% - 40px);
    left: calc(50% - 40px);
  }

  .movie-icon-bg0,
  .movie-icon-bg1,
  .movie-icon {
    position: absolute;
  }

  .movie-icon-bg0 {
    animation: rotateAnime0 4s infinite linear;
  }

  .movie-icon-bg1 {
    animation: rotateAnime1 6s infinite linear;
  }

  .movie-box-thumb {
  }

  .movie-box-thumb::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    pointer-events: none;
    background: url("../img/common/movie/frame.png") center center no-repeat;
    background-size: cover;
  }

  .movie-thumb {
    overflow: hidden;
    line-height: 0em;
  }

  .movie-thumb-img {
    transition: all .2s ease-in;
    opacity: .5;
  }

  .contents-box-caption {
    font-size: 8px;
    letter-spacing: 1px;
    text-align: right;
    position: relative;
    padding: 3px 0;
  }

  .contents-box-caption::after {
    width: calc(100% - 115px);
  }


  /*
  #top-onair
  -------------------------------*/
  #top-onair-container {
    margin: 0 0 10%;
    width: 100%;
    order: 1;
    right: auto;
  }

  #top-onair {
    width: 100vw;
    height: 50px;
    position: relative;
    left: auto;
    right: 5vw;
    margin: 0 auto;
    padding: 16px 0;
    font-size: 3.8vw;
    letter-spacing: 0;
    text-align: center;
  }
  
  #top-onair::after {
    border-width: 0 0 50px 20px;
  }

  #top-onair::before {
    content: "";
    display: block;
    width: 11vw;
    height: 100%;
    background: #000;
    position: absolute;
    z-index: -1;
    top: 0;
    right: -10vw;
  }

  #top-netflix-btn {
    width: 200px;
    height: 20px;
    /* border: 1px solid #000; */
    font-size: 14px;
    padding: 3px 0;
    margin: 0px auto;
    display: block;
    bottom: -10px;
    right: -5vw;
  }

  #top-netflix-btn .icon--1 {
    margin: 0 0 0 10px;
    position: relative;
    top: 2px;
  }

  /*
  #top-news
  -------------------------------*/
  #top-news {
    width: 100%;
    margin: 0 0 10%;
    order: 4;
  }

  .top-news-box {
    width: 100%;
    margin: 0 0 4%;
    position: relative;
  }

  .top-news-link {
    width: 100%;
    height: 16.8vw;
    border: 1px solid #000;
    font-size: 11px;
    color: #000;
  }

  .top-news-thumb {
    width: 34%;
    height: 100%;
    overflow: hidden;
    background: #010001;
  }

  .top-news-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-right: 1px solid #000;
  }

  .top-news-inner {
    width: 66%;
    padding: 2% 3%;
    background: none;
  }

  .top-news-ttl {
    font-size: 11px;
    font-weight: bold;
    padding: 0;
    line-height: 1.4em;
  }

  /*
  #top-twitter
  -------------------------------*/
  #top-twitter {
    width: 100%;
    order: 5;
    margin: 0 0 10%;
  }

  .top-twitter-box-inner {
    width: 100%;
    height: 200px;
    border: 1px solid #000;
    background: rgba(255,255,255,.9);
  }

  .top-twitter-box-inner iframe {
    width: 100%;
  }

  #top-twitter .contents-box-caption::after {
    width: 140px;
  }

  /*
  #top-twitter
  -------------------------------*/
  #top-menu-sp {
    width: 100%;
    order: 6;
    margin: 0 0 10%;
  }
  
  #top-menu-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .top-menu-nav-box {
    width: 48%;
    height: 60px;
    text-align: center;
    margin: 0 0 4%;
    position: relative;
    border: 1px solid rgba(0,0,0,.1);
  }
  
  .top-menu-nav-box::after {
    content: "";
    display: block;
    width: 14px;
    height: 60px;
    background: url("../img/common/nav_bg_left.png") no-repeat;
    background-size: 14px 60px;
    position: absolute;
    top: -1px;
    left: -1px;
    pointer-events: none;
  }
  
  .top-menu-nav-box::before {
    content: "";
    display: block;
    width: 14px;
    height: 60px;
    background: url("../img/common/nav_bg_right.png") no-repeat;
    background-size: 14px 60px;
    position: absolute;
    top: -1px;
    right: -1px;
    pointer-events: none;
  }
  
  .top-menu-nav-link {
    display: block;
    font-size: 13px;
    letter-spacing: 2px;
    text-indent: 2px;
    padding: 24px 0 23px;
    color: #000;
  }
  
  .top-menu-nav-link.coming {
    opacity: .3;
  }
  
  #top-menu-sns-link {
    
  }
  
  #top-menu-sp-ttl,
  #top-menu-sns-link-ttl {
    margin: 0 0 5%;
    padding: 5% 0 5px;
    text-align: left;
    display: table;
    font-size: 10px;
    border-bottom: 1px solid #000;
    position: relative;
  }

  #top-menu-sp-ttl::after,
  #top-menu-sns-link-ttl::after {
    content: "";
    display: block;
    width: 90vw;
    height: 1px;
    position: absolute;
    background: rgba(0,0,0,.1);
    bottom: -1px;
    left: 0px;
  }

  
  #top-menu-sns-link-container {
    width: 100%;
    margin: 0 auto;
    justify-content: space-between;
  }
  
  .top-menu-sns-link-box {
    
  }
  
  .top-menu-sns-link-btn {
    width: 60px;
    height: 60px;
    background: url("../img/top/sp_sns_bg.png") no-repeat;
    background-size: 100% 100%;
    color: #000;
    font-size: 24px;
    text-align: center;
    padding: 18px 0;
  }
  
  /*
  #top-link
  -------------------------------*/
  #top-link {
    position: relative;
    z-index: 1;
    top: auto;
    bottom: auto;
    left: auto;
    order: 7;
    margin: 0 0 10%;
  }

  #top-link.nofixed {
    position: relative;
    left: auto;
  }
  
  #top-link-ttl {
    margin: 0 0 5%;
    padding: 5% 0 5px;
    text-align: left;
    display: table;
    font-size: 10px;
    border-bottom: 1px solid #000;
    position: relative;
    font-weight: 300;
  }
  
  #top-link-ttl::after {
    content: "";
    display: block;
    width: 90vw;
    height: 1px;
    position: absolute;
    background: rgba(0,0,0,.1);
    bottom: -1px;
    left: 0px;
  }

  .link-bnr-box {
    width: 100%;
    margin: 0 0 5%;
  }


  /*
  #intro
  -------------------------------*/
  .season-container {
    padding: 0;
  }

  #intro {
    font-family: fot-matisse-pron, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";
    font-style: normal;
    font-weight: 500;
    letter-spacing: 1px;
  }
  
  #intro,#story,#story2 {
    padding: 0;
  }

  #intro-container,
  #story-container {
    padding: 5% 0;
  }

  .top-section-img-box {
    width: 80%;
    padding-top: 45.06%;
    height: 0;
    background: #000;
    position: relative;
    margin: 3% auto calc(3% + 20px);
  }
  
  .top-section-img-box::after {
    content: "";
    display: block;
    width: calc((100vw - 100%)/2 + 100%);
    height: 1px;
    background: rgba(0,0,0,.1);
    position: absolute;
    top: 0;
    right: 0;
  }
  
  .top-section-img-box::before {
    content: "";
    display: block;
    width: calc((100vw - 100%)/2 + 100%);
    height: 1px;
    background: rgba(0,0,0,.1);
    position: absolute;
    bottom: 0;
    left: 0;
  } 
  
  .top-intro-lead {
    text-align: center;
    line-height: 1.8em;
    padding: 0 0 5%;
  }

  .top-intro-lead0 {
    font-size: 14px;
    padding: 0 0 5px;
  }

  .top-intro-lead1 {
    font-size: 18px;
    line-height: 1.5em;
    letter-spacing: 1px;
  }

  .top-intro-lead-mini {
    font-size: 80%;
  }

  .top-txt-box {
    width: 90%;
    margin: 0 auto;
    font-size: 12px;
  }

  .top-txt {
    padding: 0 0 20px;
    line-height: 1.8em;
  }

  .ruby {
    position: relative;
  }

  .kamiyama .ruby-rt  {
    font-size: 8px;
    display: block;
    position: absolute;
    z-index: 1;
    bottom: -32px;
    left: -5px;
    white-space: nowrap;
    letter-spacing: 0;
  }

  .aramaki .ruby-rt {
    font-size: 8px;
    display: block;
    position: absolute;
    z-index: 1;
    bottom: -32px;
    left: 5px;
    white-space: nowrap;
    letter-spacing: 0;
  }

  .top-intro-container-en {
    font-family: 'Century', "Times New Roman", Times, Georgia, "serif";
  }

  .top-intro-lead0-en,
  .top-intro-lead1-en {
    font-size: 14px;
    line-height: 1.6em;
    letter-spacing: 0;
  }

  .top-txt-box-en {
    width: 90%;
    margin: 0 auto;
    font-size: 12px;
    letter-spacing: 0;
  }

  .kamiyama-en .ruby-rt  {
    font-size: 10px;
    display: block;
    position: absolute;
    z-index: 1;
    bottom: -20px;
    left: -40px;
    white-space: nowrap;
    letter-spacing: 0;
    transform: scale(.8);
  }

  .aramaki-en .ruby-rt  {
    font-size: 10px;
    display: block;
    position: absolute;
    z-index: 1;
    bottom: -20px;
    left: 15px;
    white-space: nowrap;
    letter-spacing: 0;
    transform: scale(.8);
  }

  .top-intro-lead1-en-sp {
    display: block;
    font-size: 17px;
  }
  
  /*#story .top-intro-lead0 {
    font-size: 18px;
  }*/
  
  #story .top-intro-lead1 {
    font-size: 18px;
    line-height: 1.5em;
  }
  
  /*
  tag
  ----------*/
  #contents-tag-container {
    font-family: obvia, sans-serif;
    font-weight: 300;
    font-size: 12px;
    margin: 0 auto 10%;
    padding: 0 0 calc(20px - 2vw);
    width: 90%;
    justify-content: space-between;
    position: relative;
    border-bottom: 1px solid rgba(0,0,0,.3)
  }

  #contents-tag-container::after {
    content: none;
  }

  #contents-tag-container::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(0,0,0,.3);
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 20px, rgba(0,0,0,0) 20px, rgba(0,0,0,0) calc(100% - 20px), rgba(0,0,0,1) calc(100% - 20px), rgba(0,0,0,1) 100%);
    position: absolute;
    z-index: 1;
    bottom: -1px;
    right: 0;
  }

  .contents-tag-box {
    margin: 0 0 2vw;
  }

  .contents-tag-link {
    min-width: 28vw;
  }

  .contents-tag-link.sizeM {
    width: 39vw;
  }

  .contents-nav {
    margin: 0 auto 5%;
  }
  
  .contents-nav-box {
  
  }
  
  .cotents-nav-link {
    padding: 15px 40px;
    width: 100%;
  }
    

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

  NEWS

  -------------------------------*/
  #news {
    min-height: auto;
  }

  #contents-ttl {
    font-size: 18px;
    margin: 0 0 20px;
    padding: 50px 0 0;
    position: relative;
  }
  
  #contents-ttl::after {
    content: "";
    display: block;
    width: 90vw;
    height: 1px;
    background: rgba(0,0,0,.3);
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 20px, rgba(0,0,0,0) 20px, rgba(0,0,0,0) calc(100% - 20px), rgba(0,0,0,1) calc(100% - 20px), rgba(0,0,0,1) 100%);
    position: absolute;
    z-index: 1;
    bottom: -1px;
    right: 5vw;
  }
  
  
  #contents-ttl-inner {
    display: inline-block;
    margin: 15px 0 0 0;
    padding: 0px 0 16px;
    border-bottom: 1px solid #010001;
    position: relative;
  }
  
  #news-box-container {
    width: 92%;
    margin: 0 auto;
  }

  .news-box {
    width: 100%;
    margin: 0 0 4%;
  }

  .news-link {
    width: 100%;
    height: 16.8vw;
    border: 1px solid #000;
    font-size: 11px;
    color: #000;
  }

  .news-thumb {
    width: 34%;
    height: 100%;
    overflow: hidden;
    background: #010001;
  }

  .news-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-right: 1px solid #000;
  }

  .news-inner {
    width: 66%;
    padding: 2% 3%;
    background: none;
  }

  .news-box-ttl {
    font-size: 11px;
    font-weight: bold;
    padding: 0;
    line-height: 1.2em;
  }

  .news-box-txt {
    display: none;
  }

  .news-date-box {
    font-size: 8px;
  }

  .news-date-box::after {
    width: calc(100% - 135px);
  }

  /*
  #news-detail
  -------------------------------*/
  #news-detail-container {
    width: 90%;
    margin: 0 auto 8%;
    padding: 5% 5% 0;
  }

  #news-detail-container::after {
    content: "";
    display: block;
    width: 92vw;
    height: 25.6vw;
    background: url(../img/news/detail_frame_top_sp.png) no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: -3.2vw;
    left: -1px;
    pointer-events: none;
  }

  #news-detail-container::before {
    content: "";
    display: block;
    width: 90vw;
    height: 2.493vw;
    background: url(../img/news/detail_frame_bottom_sp.png);
    background-size: 100% auto;
    position: absolute;
    bottom: -2.4vw;
    left: -1px;
    pointer-events: none;
  }

  #news-detail-header {
    margin: 0 0 5%;
    padding: 0 0 4%;
  }

  #news-detail-date {
    font-size: 11px;
    padding: 0 0 10px;
  }

  #news-detail-date::after {
    width: calc(100% - 125px);
  }

  #news-detail-ttl {
    font-size: 16px;
    line-height: 1.5em;
  }

  #news-detail-main {
    font-size: 12px;
    padding: 0 0 6%;
  }
  
  
  
  #news-detail-main iframe {
    width: 80vw;
    height: calc(80vw * .5625);
  }


  #news-detail-footer {
    border-top: 1px solid #f1f1f1;
    font-family: obvia, sans-serif;
    font-weight: 300;
    padding: 10px 0 3px;
    justify-content: space-between;
  }

  .news-detail-footer-ttl {
    font-size: 8px;
    padding: 7px 10px 0 0;
  }

  #news-detail-category {
    font-size: 14px;
    padding: 7px 0 0 0;
  }

  .detail-share-link {
    width: 30px;
    height: 30px;
    background: url("../img/news/share_btn_bg.png") no-repeat;
    background-size: 30px 30px;
    margin: 0 0 0 10px;
    color: #010001;
    text-align: center;
    font-size: 17px;
    padding: 7px 0 0 2px;
  }
  
  /*-------------------------------

  STAFF&CAST

  -------------------------------*/
  #staffcast {
  }

  #staff,
  #cast,
  #motion-actor {
    line-height: 1em;
    letter-spacing: 0px;
    width: 90%;
    margin: 0 auto 10%;
  }

  .staff-box,
  .cast-box {
    margin: 0 0 40px;
  }

  .staff-line-jp,
  .cast-line-jp {
    font-size: 14px;
    line-height: 1em;
    height: auto;
    margin: 0 0 10px;
    display: block;
  }

  .staff-name0-jp,
  .cast-name0-jp {
    font-size: 12px;
    border-bottom: 1px solid rgba(0,0,0,1);
    border-right: none;
  }

  .staff-name1-jp,
  .cast-name1-jp {
    font-size: 22px;
    height: 100%;
  }

  .staff-name1-jp.small {
    font-size: 18px;
  }
  
  .staff-name1-en-mini {
    font-size: 10px;
  }

  .staff-name-mini {
    font-size: 50%;
  }

  .staff-line-en,
  .cast-line-en {
    font-family: 'Century', Georgia, "Times New Roman", Times, "serif";
    height: auto;
    line-height: 1em;
  }

  .staff-name0-en,
  .cast-name0-en {
    font-size: 10px;
    border-bottom: 1px solid rgba(0,0,0,.3);
    border-right: none;
  }

  .staff-name1-en,
  .cast-name1-en {
    font-size: 14px;
    line-height: 20px;
    height: 20px;
  }

  .staff-name0-jp,
  .staff-name0-en,
  .cast-name0-jp,
  .cast-name0-en {
    width: auto;
    text-align: left;
    margin: 0 0 5px;
    padding: 0 0 3px;
    display: table;
  }

  .staff-name1-jp,
  .staff-name1-en,
  .cast-name1-jp,
  .cast-name1-en {
    width: 100%;
    height: auto;
    padding: 0;
    line-height: 1.5em;
  }
  
  .staff-line-en.pc,
  .staff-name0-en.pc {
    display: none !important;
  }

  #cast,
  #motion-actor {
    display: flex;
    flex-wrap: wrap;
  }
  
  .cast-box {
    width: 50%;
  }
  
.staffcast-ttl {
  width: 100%;
  font-size: 20px;
  padding: 20px;
  margin: 30px 0;
}



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

  MOVIES

  -------------------------------*/
  #movies {
  }

  .contents-main-movies {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
  }

  #movies #contents-ttl {
    margin: 0 auto;
  }

  #movies-stage {
    width: 100%;
    height: calc(100vw *.5625);
    background: #010001;
    position: absolute;
    top: 0;
    left: 0 !important;
    z-index: 10;
  }

  #movies-stage-inner {
    width: 100%;
    height: 100%;
    position: relative;
    line-height: 0em;
  }

  /*#movies-stage-inner::after {
    content: "";
    display: block;
    padding-top: 56.25%;
  }*/

  #movies-player {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  #movies-info {
    width: 90%;
    margin: 0 auto 50px;
    padding: 10px 0 20px;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.1);
    position: relative;
    transition: all .2s ease;
    display: block;
  }

  #movies-info::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: rgb(0,0,0);
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 20px, rgba(0,0,0,0) 20px, rgba(0,0,0,0) calc(100% - 20px), rgba(0,0,0,1) calc(100% - 20px), rgba(0,0,0,1) 100%);
    position: absolute;
    z-index: 1;
    bottom: -1px;
    right: 0;
  }
  
  #movies-info-inner {
    width: calc(100% - 130px);
  }

  #movies-ttl {
    font-size: 14px;
    padding: 0 0 5px;
    letter-spacing: 0px;
  }

  #movies-update {
    font-size: 10px;
  }

  #movies-list-container {
    width: 90%;
    margin: 0 auto 80px;
  }

  .movies-list-item {
    width: 100%;
    margin: 0 0 5%;
    display: flex;
    flex-wrap: nowrap;
  }

  .movies-list-thumb-box {
    width: 40%;
    position: relative;
  }
  
  .movies-list-thumb-box .movie-icon-box {
    transform: scale(.5);
  }

  .movies-list-thumb-box::after {
    content: "";
    display: block;
    padding-top: 56.25%;
  }

  .movies-list-thumb-img {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
  }
  
  .movies-list-txt-box {
    width: 60%;
    padding: 3% 5% 0;
    border: 1px solid rgba(0,0,0,.1);
  }

  .movies-list-ttl {
    font-size: 11px;
    line-height: 1.5em;
    padding: 0 0 10px;
    height: 3.9em;
  }

  .movies-list-update {
    font-size: 10px;
  }
  
  #movies-share-box {
    position: absolute;
    z-index: 1;
    bottom: 10px;
    right: 0;
  }
  
  #movies-share-box .detail-share-ttl {
    display: none;
  }

  /*
  fixed時
  --------------------*/
  #movies-info.fixed {
    padding: 5px 5%;
    position: fixed;
    width: 100%;
    top: calc((100vw * .5625) + 50px);
    height: 50px;
    left: 0;
    right: 0;
  }
  
  #movies-info.fixed #movies-info-inner {
    width: calc(100% - 130px);
  }

  #movies-info.fixed #movies-ttl {
    padding: 3px 0 0;
    font-size: 10px;
    line-height: 1.1em;
    height: 3.2em;
  }

  #movies-info.fixed #movies-update {
    font-size: 8px;
  }

  #movies-info.fixed #movies-share-box {
    right: 5%;
  }

  #movies-list-container.fixed {
    margin: 135px auto 80px;
  }


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

  PRODUCTS

  -------------------------------*/
  #products {

  }

  #bluray #contents-tag-container {
    justify-content: space-between;
  }

  #bluray #contents-tag-container .contents-tag-box{
    width: 48%;
  }

  .products-tag-btn {
    margin: 0;
    height: 50px;
    width: 100%;
    font-size: 10px;
    justify-content: center;
  }

  #products-box-container {
    width: 90%;
    margin: 50px auto 100px;
  }

  .products-box {
    width: 50%;
    padding: 0 2% 4% 0;
    border-bottom: 1px solid rgba(0,0,0,.1);
    border-right: 1px solid rgba(0,0,0,.1);
  }

  .products-box:nth-child(3n+2) {
    width: 50%;
    padding: 0 2% 4% 0;
  }
  
  .products-box:nth-child(3n+3) {
    width: 50%;
    padding: 0 2% 4% 0;
    border-bottom: 1px solid rgba(0,0,0,.1);
    border-right: 1px solid rgba(0,0,0,.1);
  }
  
  .products-box:nth-child(2n) {
    width: 50%;
    padding: 0 0 4% 2%;
    border-right: none;
  }

  .products-box:nth-child(n + 4),
  .products-box:nth-child(n + 3) {
    padding-top: 4%;
  }
  
  .products-box-link {
    color: #000;
    display: block;
  }

  .products-thumb {
    width: 100%;
    height: auto;
    background: #000;
    border: 1px solid rgba(0,0,0,.1);
    overflow: hidden;
    position: relative;
  }
  .products-thumb::after {
    content: "";
    display: block;
    padding-top: 100%;
  }
  
  .products-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
  }

  .products-box-ttl {
    font-size: 14px;
    font-family: fot-matisse-pron, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";
    font-weight: bold;
    line-height: 1.5em;
    padding: 10px 0 5px;
  }

  .products-box-price {
    font-size: 10px;
    line-height: 1em;
    font-family: obvia, sans-serif;
    font-weight: 300;
  }

  /*
  #products-detail
  -------------------------------*/
  .products-detail-container {
    width: 90%;
    margin: 50px auto;
    justify-content: space-between;
    align-items: flex-start;
    display: block;
  }

  .products-detail-thumb-container {
    width: 100%;
    margin: 0 0 10%;
  }

  .products-detail-thumb {
    width: 100%;
    min-height: auto;
    background: #eee;
    position: relative;
  }
  
  .products-detail-thumb::after {
    content: "";
    display: block;
    padding-top: 100%;
  }
  
  .products-detail-thumb-img {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: contain;
  }

  .products-detail-thumb-nav {
    margin: 10px 0;
  }

  .products-detail-thumb-nav-box {
    width: 19%;
    height: auto;
    background: #000;
    border: 1px solid #eee;
    position: relative;
    overflow: hidden;
    margin: 0 0.5% 2%;
  }
  
  .products-detail-thumb-nav-box::before {
    content: "";
    display: block;
    padding-top: 100%;
  }


  .products-detail-thumb-nav-box.not::after {
    content: "";
    display: block;
    width: 110px;
    height: 1px;
    background: #fff;
    position: absolute;
    transform: rotate(-45deg);
    top: calc(50% - .5px);
    left: calc(50% - 55px);
    opacity: .2;
  }

  .products-detail-thumb-nav-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }

  .products-detail-spec-container {
    width: 100%;
    position: relative;
    border: 1px solid rgba(0,0,0,.2);
    padding: 5%;
  }

  .products-detail-spec-header {
    width: 100%;
    background: url(../img/news/detail_line.png) center bottom no-repeat;
    background-size: 100% 3px;
  }

  .products-detail-ttl {
    font-size: 16px;
    font-family: fot-matisse-pron, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";
    font-weight: bold;
    line-height: 1.5em;
    padding: 0 0 4%;
  }

  .products-detail-spec-main {
    padding: 5% 0 0;
  }
  
  .products-detail-spec-main iframe {
    height: calc(80vw * .5625);
  }

  .products-detail-spec-main {
    font-size: 12px;
    line-height: 1.5em;
  }

  .products-detail-spec {
    padding: 0 0 20px;
  }

  .products-detail-spec-txt {
    padding: 0 0 30px;
  }

  .products-detail-spec-link {
    display: table;
    margin: 0 auto 30px;
    border: 1px solid #b2b2b2;
    color: #000;
    width: 50%;
    text-align: center;
    padding: 10px 0;
    font-family: fot-matisse-pron, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";
  }

  .products-detail-spec-footer {
    border-top: 1px solid #f1f1f1;
    padding: 10px 0 0;
  }

  .products-tokuten-container {
    margin: 0 0 100px;
  }

  .products-tokuten-ttl {
    font-size: 16px;
    padding: 0 0 10px;
    margin: 15% auto 8%;
  }

  .products-tokuten-box-container {
    width: 90%;
    margin: 0 auto;
  }

  .products-tokuten-box {
    width: 100%;
    margin: 0 auto 5%;
  }

  .products-tokuten-link {
    padding: 5%;
  }

  .products-tokuten-box-ttl {
    font-size: 14px;
    padding: 0 0 0 10px;
    margin: 3% 0 8% 0;
  }
  
  .products-tokuten-box-txt {
    font-size: 12px;
    padding: 0 0 5%;
  }

  .products-tokuten-img {
    width: 100%;
  }

  .products-tokuten-box-img {
    width: 80vw;
    height: 80vw;
  }

  .products-tokuten-notes {
    width: 90%;
    margin: 0 auto;
    font-size: 10px;
    padding: 0;
  }  

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

  MUSIC

  -------------------------------*/
  #music {}

  #music #contents-tag-container {
    justify-content: center;
  }

  #music #contents-main {
    width: 90%;
    margin: 0 auto;
  }
  
  .music-tag-btn {
    width: 34vw;
    letter-spacing: 1px;
  }

  .music-container {
    font-family: fot-matisse-pron, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";
  }

  .music-ttl {
    font-size: 20px;
    text-align: center;
    line-height: 1.5em;
    display: table;
    margin: 0 auto;
    width: auto
  }

  .music-ttl-sub{
    font-size: 16px;
    border-top: 1px solid #000;
  }

  .music-container-inner {}

  .music-container-ttl-box {
    text-align: center;
    padding: 0 0 50px;
  }

  .music-song-ttl {
    font-size: 30px;
    line-height: 2em;
  }

  .music-song-artist {
    font-size: 18px;
    line-height: 1.2em;
    padding: 0 0 10px;
    letter-spacing: 0px;
  }

  .music-song-writing {
    font-size: 13px;
  }

  .music-strong-txt {
    width: 100%;
    text-align: center;
    background: #000;
    color: #fff;
    padding: 6px 0;
    font-size: 11px;
  }

  .music-tokuten-link {
    width: 80%;
    margin: 5% auto 15%;
    font-size: 12px;
  }

  .music-comment-box {
    margin: 0 0 50px;
  }

  .music-comment-name {
    font-size: 18px;
    text-align: center;
    padding: 30px 0 10px;
  }

  .music-comment-name-small {
    font-size: 13px;
  }

  .music-comment-txt {
    font-size: 13px;
    line-height: 1.8em;
    opacity: .8;
    padding: 4%;
    letter-spacing: 0;
  }
  
  .music-comment-txt-left {
    text-align: left;
  }
  
  .music-artist-prof {}

  .music-artist-picture {
    position: relative;
    z-index: 2;
  }

  .music-artist-prof-txt-box {
    width: 100vw;
    padding: 60px 5vw 30px;
    background: rgba(0,0,0,.03);
    position: relative;
    z-index: 1;
    top: -50px;
    left: -5vw;
  }

  .music-artist-prof-txt-box.ost {
    padding: 30px 5vw;
  } 

  .music-artist-prof-ttl {
    font-size: 10px;
    font-family: obvia, sans-serif;
    font-weight: 300;
    display: block;
    margin: 0 0 15px;
    padding: 0 0 5px;
    border-bottom: 1px solid rgba(0,0,0,.3);
  }

  .music-artist-prof-txt {
    font-size: 12px;
    line-height: 1.5em;
  }
  
  .music-pv-container {
    margin: 5% auto 10%;
  }

  .music-pv-caption {
    text-align: center;
    padding: 0 0 10px;
    font-size: 12px;
  }

  .music-pv-box {
    width: 100%;
  }
  
  .music-control {
    margin: 0 auto 100px;
  }

  .music-control-btn {
    width: 48%;
    margin: 0 1%;
  }

  .music-control-link {
    padding: 10px;
    font-size: 11px;
  }

  .music-control-prev {
    text-align: right;
  }

  .music-control-next-icon {
    width: calc(100% - 120px);
    left: 120px;
    top: 16px;
  }

  .music-control-next-icon::after {
    content: "";
    display: block;
    width: 10px;
    height: 1px;
    background: #000;
    position: absolute;
    right: 0;
    top: -3px;
    transform: rotate(30deg);
  }

  .music-control-prev-icon {
    width: calc(100% - 120px);
    right: 120px;
    top: 16px;
  }

  .music-control-prev-icon::after {
    content: "";
    display: block;
    width: 10px;
    height: 1px;
    background: #000;
    position: absolute;
    left: 0;
    top: -3px;
    transform: rotate(-30deg);
  }

  .music-cd {
    margin: 0 auto 10%;
  }

  .music-cd-ttl {
    font-size: 18px;
    margin: 0px auto 5%;
    padding: 30px 0 10px;
  }

  .music-cd-container {
    margin: 0 auto 10%;
  }

  .music-cd-jkt-box {
    margin: 0 auto 10px;
    justify-content: space-between;
  }

  .music-cd-jkt {
    width: 100%;
    height: auto;
    margin: 0 0 10px;
  }

  .music-cd-txt-box {
    width: 100%;
    padding: 0;
    line-height: 2em;
    font-size: 12px;
    letter-spacing: 0px;
  }

  .music-cd-txt-art {
  }

  .music-cd-haishin-box {
    font-size: 12px;
    letter-spacing: 0px;
    margin: 0 auto 3%;
    text-align: center;
  }

  .music-cd-txt-ttl {
    font-size: 14px;
  }

  .music-cd-txt strong {
    font-size: 12px;
  }
  
  .music-cd-txt-mini {
    font-size: 8px;
  }

  .music-cd-txt-box-ttl {
    width: 100%;
  }
  
  .music-control-ost {
    display: block;
    padding: 0 3em;
  }
  .music-cd-annotation {
    padding: 5% 0;
  }
  
  #linernotes .music-ttl {
    width: 100%;
  }

  .ln-container {
    padding: 10% 0 0;
  }

  .ln-box {
    padding: 0 0 8%;
  }

  .ln-ttl {
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid;
    padding: 0 0 10px;
    margin: 0 0 10px;  
  }

  .ln-txt {
  }

  .music-cd-thumb {
    margin: 0 auto 5% auto;
    width: 100%;
  }
  
  .music-cd-thub-box {
    width: 20%;
    position: relative;
  }
  
  

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

  characters

  -------------------------------*/
  #characters {

  }
  
  #characters #contents-ttl {
    margin: 0 0 8%;
  }

  #characters-box-container,
  #words-box-container {
    width: 90%;
    margin: 0 auto 10%;
    justify-content: space-between;
  }

  .characters-box {
    width: 44vw;
    height: 55vw;
    background: #000;
    margin: 0 0 3%;
    position: relative;
  }

  .words-box {
    width: 44vw;
    height: 22vw;
    margin: 0 0 3%;
  }

  .characters-box::after,
  .words-box::after {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    top: 5px;
    left: 5px;
  }

  .characters-box-name {
    font-size: 4vw;
  }
  .words-box-ttl {
    font-size: 3.5vw;
  }

  .characters-box-name {
    bottom: 10px;
  }

  .characters-box-sub-name {
    font-size: 2vw;
    display: block;
  }
  
  .words-container-ttl {
    width: 100%;
    font-size: 20px;
    padding: 20px;
    margin: 30px 0;
  }
  
  /*
  #detail
  -------------------------------*/
  #characters-detail-container {

  }

  #characters-detail-container-inner {
    width: 90%;
    min-height: 60vh;
  }

  .characters-detail-box {
    margin: 0 0 15%;
  }
  
  .characters-detail-box-inner {
    display: block;
  }

  .characters-detail-txt-box {
    width: 100%;
  }

  .characters-detail-name {
    font-size: 20px;
    margin: 0 0 15px;
  }

  .characters-detail-name-en {
    font-size: 14px;
    border-left: 1px solid #000;
    margin: 0 0 0 10px;
    padding: 0 0 0 10px;
  }

  .characters-detail-cv {
    font-size: 13px;
    margin: 0 0 5%;
  }

  .characters-detail-txt {
    font-size: 12px;
    line-height: 2em;
    margin: 0 0 8%;
  }

  .characters-detail-main {
    width: 100%;
    margin: 0 0 5%;
  }

  .characters-detail-model {
    width: 100%;
    padding: 0 10%;
  }

  .characters-detail-main-img,
  .characters-detail-model-img {
    width: 100%;
    height: auto;
  }
  
  #words-detail-container {
    padding: 0 0 100px;
    width: 90%;
    margin: 0 auto;
  }

  .words-detail-box {
    width: 100%;
    margin: 0 auto 10%;
  }

  .words-detail-name {
    font-size: 20px;

  }

  .words-detail-txt {
    font-size: 13px;
  }

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

  supplements

  -------------------------------*/
  #supplements {

  }

  #supplements-box-container {
    width: 90%;
    margin: 50px auto;
  }

  .supplements-box {
    width: 100%;
    margin: 0 0 10%;
  }

  .supplements-link {
    width: 100%;
    font-size: 11px;
    color: #000;
  }

  .supplements-thumb {
    width: 100%;
    height: 90vw;
  }

  .supplements-inner {
    padding: 5%;
  }

  .supplements-box-ttl {
    font-size: 11px;
  }

  .supplements-date-box {
    font-size: 8px;
  }

  .supplements-date-box::after {
    width: calc(100% - 135px);
  }


  /*
  #supplements-detail
  -------------------------------*/
  #supplements-detail-header {
    width: 100%;
    height: 46.67vw;
    margin: -20px 0 0 0;
  }

  #supplements-detail-container-inner {
    width: 90%;
    margin: 5% auto 8%;
  }

  #supplements-detail-ttl {
    font-size: 16px;
    margin: 0 0 5%;
    padding: 0 5%;
  }

  #supplements-detail-main {
    font-size: 12px;
    padding: 0 5%;
  }
  
  #supplements-detail-main iframe {
     width: 80vw;
    height: calc(80vw * .5625);
  }

  #supplements-detail-share-box {
    position: initial;
    top: auto;
    left: auto;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    margin: 0 0 10% auto; 
  }

  .supplements-detail-ttl {
    font-size: 8px;
    transform: none;
    width: auto;
    color: #fff;
  }
  
  #supplements-detail-share {
    display: flex;
  }

  #supplements-detail-share .detail-share-link {
    margin: 0 0 0 10px;
    color: #fff;
    background: none;
  }


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

  404

  -------------------------------*/
  #notfound {
    min-height: auto;
  }

  .txt-404 {
    padding: 20% 0;

    font-size: 100px;
  }

  .txt-404-sub {
    display: block;
    font-size: 14px;
    font-family: fot-matisse-pron, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "serif";
  }

  .mb50 {
    margin-bottom: 8%;
  }
  
  /*-------------------------------

  community

  -------------------------------*/
  #community {
  }

  .community-header {
    width: 100%;
    margin: 0 auto 10%;
  }

  .community-section {
    margin: 0 auto 10%;
  }

  .community-section-ttl {
    font-size: 20px;
    text-align: center;
    line-height: 1.5em;
    display: table;
    margin: 0 auto 5%;
    width: auto;
  }

  .community-section-sub-ttl {
    font-size: 14px;
  }

  .community-section-inner {
    width: 90%;
  }

  .community-concept-txt {
    font-size: 11px;
    margin: 0 0 10%;
  }

  .community-concept-txt::after {
    content: "";
    display: block;
    width: 210px;
    height: 182.5px;
    position: absolute;
    z-index: -1;
    top: 22%;
    right: -20%;
    background: url(../img/community/concpt_bg.png) no-repeat;
    background-size: cover;
  }


  .community-link-box {
    width: 90%;
    height: 40px;
   }

   .community-link-box::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #000;
    position: absolute;
    top: -5px;
    left: -5px;
    z-index: -1;
   }

   .community-link-box::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #000;
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: -1;
   }

  .community-link-btn {
    padding: 13px 0;
    font-size: 14px;
  }

  .community-about-list {/* width: 900px; *//* margin: 0 auto; */}

  .community-about-item {margin: 0 auto 30px;position: relative;line-height: 0em;}

  .community-about-item::after {
    content: "";
    display: block;
    width: calc(((100vw - 180px) - 900px)/2);
    height: 100%;
    background: #000;
    position: absolute;
    z-index: 1;
    top: 0;
  }

  .community-about-item:nth-child(2)::after {
    right: calc(((100vw - 180px) - 900px)/-2);
  }

  .community-about-item:nth-child(1)::after{
    left: calc(((100vw - 180px) - 900px)/-2);
  }

  .community-signup-txt {margin: 0 auto 5%;font-size: 14px;}

  .community-signup-attention-box {/* width: 900px; */padding: 5%;font-size: 12px;}

  .community-signup-attention-ttl {
    margin: 0 auto 8%;
    font-size: 14px;
  }

  .community-signup-attention {margin: 0 0 40px;}

  .community-signup-attention-item {

  }

  .community-qa-box {
      line-height: 1.5em;
  }

  .community-qa-q {display: flex;flex-wrap: wrap;align-items: center;padding: 25px 25px 25px 0;background: #4b8fe2;color: #fff;}

  .community-qa-a {display: flex;flex-wrap: wrap;align-items: center;padding: 25px 0;}

  .community-qa-0 {width: 20%;font-size: 20px;}

  .community-qa-1 {width: 80%;padding: 0 5% 0 0;font-size: 13px;}


  .community-footer {padding: 8% 0;}

  .community-footer-logo {width: 60%;margin: 0 auto 10%;}

  .community-footer-nav {display: flex;justify-content: center;font-size: 10px;}

  .community-footer-nav-box {padding: 0 3%;}

  .community-footer-nav-box:nth-last-child(1) {
    border-right: none
    }

  .community-footer-nav-link {color: #fff;}

  .community-sns-container {
    display: block;
    width: 80%;
    margin: 0 auto;
  }
  
  .community-sns-box {
    width: 100%;
    height: 400px;
    margin: 0 0 10%;
  }
  
  .community-sns-link {
    width: 80%;
    height: 100px;
    border: 1px solid #000;
    text-align: center;
    color: #000;
    padding: 43px 0;
    display: block;
  }
  
  .community-sns-link:hover {
    background: #fff;
    color: #000;
  }

  .community-login-box {
    position: fixed;
    z-index: 10;
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(255,255,255,.9);
    /* padding: 3%; */
    height: 15vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .community-login-btn {
    width: 150px;
    height: 30px;
    border: 1px solid #000;
    text-align: center;
    color: #000;
    padding: 8px 0;
    display: block;
    margin: 0 auto;
  }

  .nofixed .community-login-box {
    position: absolute;
  }
  
  .community-footer {
  }
  
  .nofixed {
    position: relative;
  }

  #community #contents-main {
    padding: 0 0 15vw;
  }
  

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

  privacy

  -------------------------------*/
  #pp {
    padding: 0 0 100px;
  }

  .pp-block {
    width: 90%;
    margin: 10% auto;
  }

  .pp-block-ttl {
    padding: 3% 5%;
    font-size: 16px;
    margin: 0 0 8%;
  }

  .pp-block-lead {
    padding: 0 0 5%;
    font-size: 13px;
  }

  .pp-list {
  }

  .pp-item {
    text-indent: -1.5em;
    padding: 0 0 0 1.5em;
    font-size: 12px;
  }
  
  .pp-txt {
    font-size: 12px;
  }

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

  STREAMING

  -------------------------------*/
  #streaming {
  }

  #streaming #contents-main {
    width: 90%;
    margin: 0 auto;
  }

  #streaming-container {
    padding: 0 0 100px;
  }

  .streaming-txt-container {
    padding: 0 0 30px;
  }

  .streaming-platform-container {
    padding: 0 0 50px;
  }

  .streaming-platform-ttl {
    width: 100%;
    background: #000;
    color: #fff;
    padding: 10px;
    margin: 0 auto 20px;
    text-align: center;
  }

  .streaming-platform-txt {
    margin: 0 0 30px;
    text-align: center;
  }

  .streaming-platform-txt h3 {
    font-size: 150%;
    line-height: 2em;
  }

  .streaming-platform-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .streaming-platform-link {
    width: 48%;
    height: 50px;
    text-align: center;
    color: #000;
    margin: 1%;
    padding: 13px 0;
    display: block;
    border: 1px solid #000;
    transition: all .2s ease;
  }

  .streaming-platform-link:hover {
    background: #000;
    color: #73fbfa;
  }


}