@charset "utf-8";

#contents::after {
  position: fixed;
}

@media screen and (max-width: 1199px){
  #contents::after {
    top: 80vh;
    display: none !important;
  }
}

body::before {
  display: block !important;
  content: "" !important;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  opacity: 1;
  background-color: #e9e9e9;
  background-image: 
    url(../../images/main/common/cont_bg.png),
    linear-gradient(45deg, rgba(209, 209, 209, 1) 25%, transparent 25%, transparent 75%, rgba(209, 209, 209, 1) 75%, rgba(209, 209, 209, 1)),
    linear-gradient(45deg, rgba(209, 209, 209, 1) 25%, transparent 25%, transparent 75%, rgba(209, 209, 209, 1) 75%, rgba(209, 209, 209, 1));
  background-position: center,0 0, 60px 60px;
  background-size: cover, 120px 120px,120px 120px;
  background-repeat: repeat;
  animation: fadeIn 1s ease .5s 1 both;
}

body:not(#layout1) #contents {
  background: none;
}

#wrapper::before,
#main_inner::before {
  background-image: 
    linear-gradient(45deg, rgba(0, 0, 0, .15) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .15) 75%, rgba(0, 0, 0, .15)),
    linear-gradient(-45deg, rgba(0, 0, 0, .15) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .15) 75%, rgba(0, 0, 0, .15));
  background-size: 46px 46px;
  background-repeat: repeat;
}

[data-chara="4"] #wrapper::before,
[data-chara="4"] #main_inner::before {
  background-blend-mode: soft-light;
}

#main_inner {
  padding-top: 10px;
}

@media screen and (max-width: 1199px){
  #wrapper::before {
    height: 50vh;
    right: -40vh;
    left: -50vh;
    top: 20vh;
    position: fixed;
  }
}

#footer {
  /* z-index: 2; */
}

#main_inner::after {
  top: 0;
  right: -250px;
  bottom: auto;
  background-size: auto;
  background-position: top center;
}

@media screen and (max-width: 1399px){
  #main_inner::after {
    display: none !important;
  }
}

@media screen and (min-width: 900px){
  #main_inner>div:not(.main_sa08) {
    position: relative;
    z-index: 10;
  }

    #main_inner::before {
    bottom: auto;
    top: 1500px;
  }
}

@media screen and (min-width: 1200px){
  #main_inner {
    padding: 40px 0;
  }

  #contents_inner {
    display: flex;
    flex-direction: row-reverse;
    max-width: 1366px;
    margin: 0 auto;
    padding: 0 20px 1px;
  }

  #contents_main {
    flex-grow: 1;
  }

  #side {
    position: relative;
    z-index: 1;
    width: 310px;
    margin-right: 30px
  }

  #wrapper::before {
    top: 100px;
  }

  #contents::before {
    top: 18%;
    top: 1140px;
  }
}

@media screen and (min-width: 1400px){
  #contents_main_inner {
    min-height: 1000px;
  }
}

@media screen and (min-width: 900px){
  .color-no4 #main_inner::after {
    display: none !important;
  }

  .color-no4 #contents_main_inner {
    min-height: 0;
  }
}

body:not(#layout1) .main_sa01 {
  position: relative;
  z-index: 4;
}

/* ========================================
ニュース、コンテンツ記事
======================================== */

#cms_block,
#news_block {
  color: #fff;
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
}


.c-no1 #cms_block,
.color-no12 #cms_block,
.color-no11 #cms_block,
.color-no5 #cms_block,
.color-no7 #cms_block,
.color-no8 #cms_block,
.color-no9 #cms_block,
.color-no6[class*="contents-"] #cms_block,
#news_block {
  position: relative;
  padding: 0 20px;
  background: rgba(0, 0, 0, .85);
  /* margin-top: 70px; */
  margin-bottom: 50px;
}

.c-no1 #cms_block::before,
.color-no12 #cms_block::before,
.color-no11 #cms_block::before,
.color-no5 #cms_block::before,
.color-no7 #cms_block::before,
.color-no8 #cms_block::before,
.color-no9 #cms_block::before,
.color-no6[class*="contents-"] #cms_block::before,
#news_block::before {
  content: "";
  height: 50px;
  position: absolute;
  top: -50px;
  right: 0;
  left: 0;
  background:
    linear-gradient(135deg, transparent 30px, rgba(0, 0, 0, .85) 30px );
  background-position: left, right;
  background-size: 100%;
  background-repeat: no-repeat;
}

.c-no16 #cms_block::before {
  /* height: 110px; */
  /* top: -110px; */
}

.c-no17 #cms_block::before {
  /* content: ""; */
  /* height: 160px; */
  /* position: absolute; */
  /* top: -160px; */
  /* right: 0; */
  /* left: 0; */
  /* background:
    linear-gradient(135deg, transparent 30px, rgba(0, 0, 0, .85) 30px ); */
  /* background-position: left, right; */
  /* background-size: 100%; */
  /* background-repeat: no-repeat; */
}

.c-no1 #cms_block::after,
.color-no12 #cms_block::after,
.color-no11 #cms_block::after,
.color-no5 #cms_block::after,
.color-no7 #cms_block::after,
.color-no8 #cms_block::after,
.color-no9 #cms_block::after,
.color-no6[class*="contents-"] #cms_block::after,
#news_block::after {
  content: "";
  height: 70px;
  position: absolute;
  bottom: -70px;
  right: 0;
  left: 0;
  background:
    linear-gradient(315deg, transparent 30px, rgba(0, 0, 0, .85) 30px );
  background-position: left, right;
  background-size: 100%;
  background-repeat: no-repeat;
}

@media screen and (min-width: 900px){
  .c-no1 #cms_block,
  .color-no12 #cms_block,
  .color-no11 #cms_block,
  .color-no5 #cms_block,
  .color-no7 #cms_block,
  .color-no8 #cms_block,
  .color-no9 #cms_block,
  .color-no6[class*="contents-"] #cms_block,
  #news_block {
    padding: 0 40px;
  }
}

.c-no16 #cms_block::before {
  /* height: 110px; */
  /* top: -110px; */
}

.c-no17 #cms_block::before {
  /* height: 160px; */
  /* top: -160px; */
}

@media screen and (min-width: 1200px){
  #cms_block {
    margin: 0;
  }

  .c-no1 #cms_block,  
  .color-no12 #cms_block,
  .color-no11 #cms_block,
  .color-no5 #cms_block,
  .color-no7 #cms_block,
  .color-no8 #cms_block,
  .color-no9 #cms_block,
  .color-no6[class*="contents-"] #cms_block,
  #news_block {
    margin: -15px 0 0;
  }
}



#cms_block>div[class^="page_"],
#news_block>div[class^="page_"] {
}

/*
   見出し
======================== */

.articleHead {
  margin: 2.5em 0 1em;
  line-height: 1.4;
}

h2.articleHead {
  position: relative;
  font-size: 2.4rem;
  line-height: 1.2;
}

h2.articleHead--dotted {
  margin-top: 0;
  margin-bottom: 30px;
  padding-top: 40px;
  padding-bottom: 14px;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNzAiIGhlaWdodD0iMzk0IiB2aWV3Qm94PSIwIDAgMzcwIDM5NCI+PGRlZnM+PHN0eWxlPi5hLC5ie2ZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuMik7fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJhIiBkPSJNLjAzLDMwNi40NWMtMS42Ny02Mi4yOCw0OC4wNy0xMjUuNywxMTEuMDgtMTQxLjY2czExNS40NiwyMS41OSwxMTcuMTMsODMuODdTMTgwLjE4LDM3NC4zNywxMTcuMTYsMzkwLjMyLDEuNzEsMzY4LjczLjAzLDMwNi40NVoiPjwvcGF0aD48cGF0aCBjbGFzcz0iYSIgZD0iTTE3NS4wNiwyNy4zM0MyMDQuMjktMS45LDI0NC44LTguNzgsMjY1LjU1LDExLjk3czEzLjg2LDYxLjI2LTE1LjM3LDkwLjQ5LTY5Ljc0LDM2LjEyLTkwLjQ5LDE1LjM3UzE0NS44Myw1Ni41NywxNzUuMDYsMjcuMzNaIj48L3BhdGg+PGNpcmNsZSBjbGFzcz0iYiIgY3g9IjY5LjQyNSIgY3k9IjEwMC43MDUiIHI9IjU1Ljk1NSI+PC9jaXJjbGU+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yNzguNjgsMTEzLjA3YzI1LjE5LTI1LjIyLDYwLjEtMzEuMTUsNzcuOTgtMTMuMjVzMTEuOTUsNTIuODQtMTMuMjQsNzguMDYtNjAuMTEsMzEuMTUtNzcuOTgsMTMuMjVTMjUzLjQ4LDEzOC4yOSwyNzguNjgsMTEzLjA3WiI+PC9wYXRoPjxwYXRoIGNsYXNzPSJhIiBkPSJNMjc1Ljg1LDI0NC41NGMyMi4xNy0yMi4xOSw1Mi44OS0yNy40MSw2OC42My0xMS42NnMxMC41MSw0Ni41LTExLjY2LDY4LjdjLTIyLjE2LDIyLjE4LTUyLjg5LDI3LjQxLTY4LjYyLDExLjY2UzI1My42OCwyNjYuNzMsMjc1Ljg1LDI0NC41NFoiPjwvcGF0aD48L3N2Zz4=) bottom left/contain no-repeat;
}



h2.articleHead--dotted::after {
  content: "";
  height: 4px;
  position: absolute;
  right: 0;
  bottom: -12px;
  left: 3px;
  background: url(../../images/main/common/line_dot.svg) left  center repeat-x;
}

h3.articleHead {
  font-size: 2.4rem;
}

h4.articleHead {
  font-size: 1.8rem;
  border-bottom: dashed 0.08em;
  padding: 0 0 0.5em;
}

h5.articleHead {
  font-size: 1.6rem;
}

h6.articleHead {
  font-size: 1.6rem;
}

#js-newsDate {
  font-size: 1.6rem;
  font-family: 'Paytone One', sans-serif;
  margin: 0 0 -42px 2px;
}

#js-newsDate+h2.articleHead {
  margin-top: 0;
}

h2.articleHead--paytone {
  font-family: 'Paytone One', sans-serif;
  font-weight: 400;
  font-size: 5.5rem;
}

h3.articleHead.outlineCharacter {
  font-size: 2.8rem;
  color:#000;
  background:#fff;
  transform: skewX(-10deg);
  text-align: center;
  font-weight: 900;
  margin: 2em 0 .4em;
}

.comingsoon {
  font-family: 'Paytone One', sans-serif;
  font-feature-settings: "palt";
  font-size: 20vw;
  line-height: 1;
  letter-spacing: -.05em;
  font-style: italic;
  font-weight: 400;
}

@media screen and (min-width: 900px){
  .comingsoon {
    font-size: 10em;
  }
}

.backToList {
  text-align: center;
  margin: 4em 0 1em 0;
}

.backToList a {
  display: inline-block;
    color: #000;
  text-decoration: none;
  font-family: 'Paytone One', sans-serif;
  line-height: 1;
  padding: .5em 1em;
  position: relative;
  opacity: 1;
}

.backToList a::before,
.backToList a::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  background: #fff;
  transition: .4s;
}

.backToList a::before {
  top: 0;
  bottom: 50%;
  transform: skewX(-25deg);
}

.backToList a::after {
  top: 50%;
  bottom: 0;
  transform: skewX(25deg);
}

.backToList a span{
  position: relative;
  z-index: 2;
}

.backToList a:hover::before {
  transform: skewX(-45deg);
}

.backToList a:hover::after {
  transform: skewX(45deg);
}

/* ========================================
STAFF & CAST
======================================== */


@media screen and (min-width: 900px){
  .page_4 {
    display: flex;
    flex-wrap: wrap;
  }

  .page_4 .line_00{
    flex-basis: 100%;
  }

  .page_4 .line_01{
    flex-basis: 55%;
  }

  .page_4 .line_02{
    flex-basis: 45%;
  }
}


.staffCastList {
  font-family: kaisoSubset;
  font-feature-settings: "palt";
  font-size: 2.2rem;
  line-height: 1.2;
  letter-spacing: -.15em;
  text-shadow: 
    -1px -1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    1px 1px 0 #000,
    0 0 #000,
    1px 1px #000,
    2px 2px #000,
    3px 3px #000;
}

.staffCastList>li {
  margin: 0 0 1em;
}

.staffCastList p{
  margin: 0;
}

.staffCastList p:last-child{
  font-size: 1.4em;
}

.staffCastList i{
  letter-spacing: .05em;
  font-style: normal;
}

.staffCastList span{
  display: inline-block;
}

@media screen and (min-width: 900px){
  .staffCastList {
    font-size: 2.7rem;
  }

/*
  .staffCastList>li {
    display: flex;
    align-items: baseline;
    margin: 0 0 .5em;
  }

  .staffCastList p:first-child::after{
    content: "：";
  }
*/

  .staffCastList p:last-child{
    font-size: 1.5em;
  }
}

/* ========================================
ストーリー
======================================== */

.introStaff,
.introCatch {
  text-align: center;
  margin: 0 0 50px;
}

.introText {
  font-family: kaisoSubset;
  font-size: 2.2rem;
  line-height: 1.6em;
  letter-spacing: -.25em;
  white-space: nowrap;
  text-shadow: -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, 1px 1px 0 #000, 0 0 #000, 1px 1px #000, 2px 2px #000, 3px 3px #000;
}

_:-ms-input-placeholder, :root .introText {
  white-space: normal;
}


.introText b{
  font-weight: 400;
  font-size: 1.4em;
  letter-spacing: -.35em;
  margin-right: .1em;
}

@media screen and (min-width: 900px){
  .introText {
    font-size: 2.9rem;
  }
}

/* ========================================
キャラクター
======================================== */
#layout6 #main_inner .main_sa02 {
  position: relative;
  z-index: 4 !important;
}

.modal_wrap{
  
}

.modal_wrap input {
  display: none;
}

.modal_overlay {
  display: flex;
  justify-content: center;
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.5s, transform 0s 0.5s;
  transform: scale(0);
}

.modal_trigger {
  position: absolute;
  width: 100%;
  height: 100%;
}

.modal_content {
  align-self: auto;
  width: 100%;
  max-width: 800px;
  padding: 11vw 5vw;
  box-sizing: border-box;
  background: rgba(0,0,0,0.6);
  line-height: 1.4em;
  transform: scale(1.2);
  transition: 0.5s;
  position:relative;
  margin: 0;
}
.modal_content::before {
  content:"CAST COMMENT";
  display:block;
  position:absolute;
  top:0;
  left:0;
  line-height:0.70;
  font-weight:900;
  z-index:0;
  opacity: 0.10;
  font-size: 17vw;
}

.modal_content h2{
  font-size: 15vw;
  margin: 1.0em 0 0.7em;
  padding: 0 0 0.5em;
  border-bottom: 0.15em dotted;
  font-family: kaisoSubset;
  line-height: 1;
  /* font-style: italic; */
  font-weight: 400;
  letter-spacing: -.15em;
  text-align: center;
}
.modal_content h2 span{
  font-size:50%;
  font-weight:normal;
  margin-left: 0em;
  margin-top: 0.5em;
  display: block;
}
.modal_content ul li p:first-child{
  font-size:110%;
  font-weight:600;
  color: #ffec59;
}
.modal_content ul li p:last-child{
  margin: 0 0 3em;
}

.close_button {
  position: absolute;
  top: 2rem;
  right: 1.3rem;
  font-size: 6rem;
  cursor: pointer;
}

.modal_wrap input:checked ~ .modal_overlay {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s;
}

.modal_wrap input:checked ~ .modal_overlay .modal_content {
  transform: scale(1);
}

.open_button{display: block;}
.open_button span{
    font-weight:bold;
    font-size: 4.5vw;
    font-family: YakuHanJPs, "Helvetica Neue", "Segoe UI", "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", YuGothic, Meiryo, sans-serif;
    letter-spacing: 0em;
    background: #2f2f2f;
    font-style: normal;
    display: inline-block;
    padding: 0.4em 0.7em 0.55em;
    margin:1em 0 0 0;
    line-height: 1em;
    transform:skewX(-15deg);
    box-shadow: 0.2em 0.2em rgba(255,255,255,0.7);
    transition: all 0.5s ease;
}
.open_button:hover{
  cursor : pointer;
}

@media screen and (min-width:600px) {
  .open_button{
    display: inline-block;
    width:100%;
    margin-left:-0.15em;
    text-align:center;
  }

  .open_button span{
      font-weight:bold;
      position: relative;
      bottom: 0.4em;
      left: 0.5em;
      font-size: 40%;
      font-family: YakuHanJPs, "Helvetica Neue", "Segoe UI", "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", YuGothic, Meiryo, sans-serif;
      letter-spacing: 0em;
      background: #2f2f2f;
      font-style: normal;
      display: block;
      padding: 0.15em 0.7em 0.25em;
      line-height: 1em;
      transform:skewX(-15deg);
      box-shadow: 0.2em 0.2em rgba(255,255,255,0.7);
      transition: all 0.5s ease;
  }

  .modal_content::before {
    font-size:10rem;
  }
  .modal_content {
    align-self: center;
    width: 95%;
    max-width: 800px;
    padding: 2em 4em;
    box-sizing: border-box;
    background: rgba(0,0,0,0.6);
    line-height: 1.4em;
    transform: scale(1.2);
    transition: 0.5s;
    position:relative;
}
.modal_content h2{
  font-size: 400%;
  margin: 1.0em 0 0.7em;
  padding: 0 0 0.5em;
  border-bottom: 0.15em dotted;
  text-align: left;
}
.modal_content h2 span{
  margin-left: 1em;
  margin-top: 0em;
  display: inline-block;
}
}
@media screen and (min-width:1200px) {
  .open_button{
    width:auto;
    margin-left:0em;
    text-align:center;
  }
  .modal_content::before {
    /* font-size:50%; */
  }
}


.charaSection {
  position: relative;
  text-shadow: 
    -1px -1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    1px 1px 0 #000,
    0 0 #000,
    1px 1px #000,
    2px 2px #000,
    3px 3px #000;
}

.charaName,
.charaCV,
.charaProfile,
.charaIntro {
  position: relative;
  z-index: 1;
}

.charaName,
.charaCV {
  font-family: kaisoSubset;
  line-height: 1;
  /* font-style: italic; */
  font-weight: 400;
}

.charaName {
  font-size: 7rem;
  margin: 0 0 14px -.15em;
  letter-spacing: -.3em;
  text-align: center;
}

.charaName span {
  font-size: .5em;
  letter-spacing: -.4em;
  margin: 0 0 0 .5em;
}

.charaName span::before {
  content: "(";
  margin-right: .2em;
}

.charaName span::after {
  content: ")";
  margin-left: .3em;
}

.charaCV {
  font-size: 3rem;
  margin: 0 0 30px;
  letter-spacing: -.15em;
  text-align: center;
}

.charaProfile {
  margin: 30px 0;
}

.charaProfile,
.charaIntro {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 3.4rem;
}

.charaIntro b {
  font-size: 1.4em;
  font-weight: 900;
}

.charaIntro {
  white-space: nowrap;
}

_:-ms-input-placeholder, :root .charaIntro {
  white-space: normal;
}

.charaBody {
  animation: fadeIn 1s ease 1s 1 both, slideIn 1s ease 1s 1 both;
  animation-timing-function: cubic-bezier(0.88, 0.04, 0.13, 0.96);
}

@media screen and (max-width: 1199px){
  .charaSection {
    max-width: 500px;
    margin: 0 auto;
  }

  .charaBody {
    text-align: center;
  }
}

@media screen and (min-width: 600px){
  .charaName {
    font-size: 12rem;
    text-align:left;
  }

  .charaCV {
    font-size: 6rem;
    text-align:left;
  }

  .charaProfile,
  .charaIntro {
    font-size: 2rem;
  }
}

@media screen and (min-width: 1200px){
  /*
  .charaBody {
    position: absolute;
    right: -100px;
    top: 0;
    z-index: 0;
  }
  */

  .charaText {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 100px;
        grid-template-columns: 1fr 100px;
    -ms-grid-rows: auto auto auto auto 1fr;
        grid-template-rows: auto auto auto auto 1fr;
  }

  .charaBody {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1/3;
    -ms-grid-row: 1;
    -ms-grid-row-span: 5;
    grid-row: 1/6;
    
    text-align: right;
    position: relative;
    right: -100px;
  }

  .charaName {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1/3;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
  }

  .charaCV {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1/3;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2/3;
  }

  .charaProfile {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1/3;
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    grid-row: 4/5;
  }

  .charaIntro {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1/3;
    -ms-grid-row: 5;
    -ms-grid-row-span: 1;
    grid-row: 5/6;
  }
}

.c-no5 #container::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: top center;
  pointer-events: none;
  animation: fadeIn 1s ease 0s 1 both, slideIn 1s ease 0s 1 both;
  animation-timing-function: cubic-bezier(0.88, 0.04, 0.13, 0.96);
}

.p-no5 #container::before { background-image: url(../../images/main/cont/chara/silhouette_harami.png); }
.p-no6 #container::before { background-image: url(../../images/main/cont/chara/silhouette_mai.png); background-position: top right 65%; }
.p-no7 #container::before { background-image: url(../../images/main/cont/chara/silhouette_k.png); }
.p-no8 #container::before { background-image: url(../../images/main/cont/chara/silhouette_arnelia.png); background-position: top right 100%; }
.p-no9 #container::before {background-image: url(../../images/main/cont/chara/silhouette_ran.png); background-position: top right 25%; }


@media screen and (min-width: 600px){
  .c-no5 #container::before {
    right: -100px;
    background-position: top right;
  }
}

#contents::before {
  background-size: auto 80%;
  background-position: bottom 10px right 15%;
  background-repeat: no-repeat;
}

.p-no5 #contents::before { background-image: url(../../images/main/cont/chara/name_harami.svg); }
.p-no6 #contents::before { background-image: url(../../images/main/cont/chara/name_mai.svg); }
.p-no7 #contents::before { background-image: url(../../images/main/cont/chara/name_k.svg); }
.p-no8 #contents::before { background-image: url(../../images/main/cont/chara/name_arnelia.svg); }
.p-no9 #contents::before { background-image: url(../../images/main/cont/chara/name_ran.svg); }

.p-no10 #contents::before { background-image: url(../../images/main/cont/chara/name_kumi.svg); }
.p-no11 #contents::before { background-image: url(../../images/main/cont/chara/name_yuko.svg); }
.p-no12 #contents::before { background-image: url(../../images/main/cont/chara/name_ron.svg); }
.p-no13 #contents::before { background-image: url(../../images/main/cont/chara/name_leonard.svg); }


/* ========================================
配信
======================================== */

.vodList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 0 4em;
}

.vodList>li {
  width: 49%;
  margin: 0 0 0.5em;
  font-size: 2.5vw;
  font-weight: 600;
}

.vodList>li a {
  display: block;
  text-align: center;
  text-decoration: none;
  background: rgba(230, 0, 0, 0.5);
  padding: 1.5em .5em;
  color: #fff;
  height: 100%;
  position: relative;
  line-height: 1.4;
  font-family: YakuHanJPs, 'Roboto Condensed', "Helvetica Neue", "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", YuGothic, Meiryo, sans-serif;
}

.vodList>li>a[target="_blank"]:not([href="#"])::after{
  content: "";
  position: absolute;
  top: 0;
  right: .3em;
  bottom: .1em;
  margin: auto 0;
  width: .8em;
  height: .8em;
  background: url(../../images/main/common/icon_open_tab.svg) center/contain no-repeat;
  opacity: .5;
}

.vodList>li a>span{
  font-size: .85em;
  font-weight: 400;
  display: block;
}

.vodList>li a:hover{
  opacity: 1;
  background: rgba(70, 176, 179, 1);
}

.vodList>li a[href="#"]{

  pointer-events: none;
}

@media screen and (min-width: 900px){
  .vodList {
    justify-content: flex-start;
  }

  .vodList>li {
    width: calc( 33% - 10px );
    margin-bottom: 10px;
    font-size: 1.6rem;
  }

  .vodList>li a {
    padding: 1em .5em;
  }

  .vodList>li:not(:nth-child(3n)) {
    margin-right: 10px;
  }
}

/* ========================================
スペシャル
======================================== */
/*イベント*/
.page_30 .c-customMarkerList{
justify-content: space-between;
}
.page_30 .c-customMarkerList>li {
  width: 49%;
  position: relative;
  padding: 0 0 45% 0;
  margin: 0px 0 12%;
  background: #000;
}
.page_30 .c-customMarkerList>li p{
  text-align:center;
  position: absolute;
  /* top: 0; */
  /* left: 0; */
  /* right: 0; */
  /* bottom: 0; */
  /* vertical-align:middle; */
  display: block;
  height: 100%;
  width: 100%;
  line-height: 1.5;
  margin: 0;
}
.page_30 .c-customMarkerList>li p:last-child{
  bottom: -15%;
  top:auto;
  display: inline-block;
  height: auto;
}
.page_30 .c-customMarkerList>li p img{
  display: block;
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  max-width:initial;
  width:auto;
  max-height: 90%;
  max-width: 90%;
  /* vertical-align:middle; */
  margin: auto;
}
.page_30 .c-customMarkerList>li p span{
  display:block;
}
.page_30 .c-customMarkerList>li p span:first-child{
  font-weight:bold;
}
.page_30 .c-customMarkerList>li p span:last-child{
  font-size:80%;
}

@media screen and (max-width:767px){
.page_30 .c-customMarkerList{
justify-content: space-between;
}
.page_30 .c-customMarkerList>li {
  width: 100%;
  position: relative;
  padding: 0 0 100% 0;
  margin: 0px 0 17vw;
  background: #000;
}
.page_30 .c-customMarkerList>li p{
  text-align:center;
  position: absolute;
  /* top: 0; */
  /* left: 0; */
  /* right: 0; */
  /* bottom: 0; */
  /* vertical-align:middle; */
  display: block;
  height: 100%;
  width: 100%;
  line-height: 1.5;
  margin: 0;
}
.page_30 .c-customMarkerList>li p:last-child{
  bottom: -11vw;
  top:auto;
  display: inline-block;
  height: auto;
  font-size: 3.5vw;
}
.page_30 .c-customMarkerList>li p img{
  display: block;
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  max-width:initial;
  width:auto;
  max-height: 90%;
  max-width: 90%;
  /* vertical-align:middle; */
  margin: auto;
}
.page_30 .c-customMarkerList>li p span{
  display:block;
}
.page_30 .c-customMarkerList>li p span:first-child{
  font-weight:bold;
}
.page_30 .c-customMarkerList>li p span:last-child{
  font-size:80%;
}
}


.eventNav {
  display: flex;
  justify-content: space-between;
}
.eventNav li{
  background:#fff;
  margin: 0 0.4em;
  flex: 1;
  color: #000;
  text-align:center;
  font-weight:800;
  padding:0.1em 0 0.5em;
  transform: skewX(-10deg);
  box-shadow:0.5em 0.5em 0px 0px #000000;
}
.eventNav li a{
  color: #000;
  text-decoration:none;
  line-height:1;
  font-size:1.7rem;
}
.eventNav li a::after{
  content:"▼";
  display:block;
}




.listset-no6 #list_06 .nwu_box {
  margin: 0 0 30px;
}

.listset-no6 #list_06 .nwu_box a{
  text-decoration: none;
  color: inherit;
  line-height: 1.4;
}

@media screen and (min-width: 900px){
  .listset-no6 #list_06 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .listset-no6 #list_06 .nwu_box {
    width: calc(50% - 15px);
  }
}

/* ========================================
シアター
======================================== */
/*物販*/
.buppanNav {
  display: flex;
  justify-content: space-between;
}
.buppanNav li{
  background:#fff;
  margin: 0 0.4em;
  flex: 1;
  color: #000;
  text-align:center;
  font-weight:800;
  padding:0.1em 0 0.5em;
  transform: skewX(-10deg);
  box-shadow:0.5em 0.5em 0px 0px #000000;
}
.buppanNav li a{
  color: #000;
  text-decoration:none;
  line-height:1;
  font-size:1.7rem;
}
.buppanNav li a::after{
  content:"▼";
  display:block;
}


.theaterInfoTable {
  width: 100%;
/*  border: 1px solid; */
  font-size: 1.4rem;
}

.theaterInfoTable thead {
  background: rgba(255, 255, 255, 0.3);
}

.theaterInfoTable thead th {
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 400;
}

.theaterInfoTable tr>* {
  border: 1px solid rgb(60, 60, 60);
  padding: .2em;
}

.theaterInfoTable tbody tr>*:nth-child(4) {
  text-align: center;
  font-family: meiryo, sans-serif;
  vertical-align: middle;
}

.theaterInfoTable a{
  display: block;
}

.theaterInfoTable a::after {
  content: url(../../images/main/common/icon_open_tab.svg);
  margin: 4px;
}

.theaterInfoTable a:hover {
  background: rgb(255, 255, 255);
  color: #000;
}

.theaterInfoTable tr>*:nth-child(1),
.theaterInfoTable tr>*:nth-child(3) {
  white-space: nowrap;
}

@media screen and (max-width: 899px){
  .theaterInfoTable table,
  .theaterInfoTable thead,
  .theaterInfoTable tbody,
  .theaterInfoTable tr,
  .theaterInfoTable th,
  .theaterInfoTable td {
    display: block;
  }

  .theaterInfoTable tr>* {
    text-align: center;
    min-height: 2em;
  }

  .theaterInfoTable tr {
    display: grid;
    gird-template-rows: auto auto auto 1fr;
    grid-template-columns: 50% 20% 30%;
    border: 1px solid;
    margin: 0 0 2em;
  }

  .theaterInfoTable tr>*:nth-child(2) {
    grid-row: 1/2;
    grid-column: 1/4;
    font-size: 1.1em;
    background: rgba(255, 255, 255, 0.2);
  }

  .theaterInfoTable tr>*:nth-child(1) {
    grid-row: 2/3;
    grid-column: 1/2;
  }

  .theaterInfoTable tr>*:nth-child(3) {
    grid-row: 2/3;
    grid-column: 1/2;
    grid-column: 2/4;
  }

  .theaterInfoTable tr>*:nth-child(4) {
    grid-row: 3/4;
    grid-column: 1/2;
  }

/*
  .theaterInfoTable tr>*:nth-child(5) {
    grid-row: 3/4;
    grid-column: 2/4;
  }

  .theaterInfoTable tr>*:nth-child(6) {
    grid-row: 4/5;
    grid-column: 1/4;
  }
*/

  .theaterInfoTable tr>*:nth-child(4) {
    grid-column: 1/4;
  }

  .theaterInfoTable--add>tbody>tr>*:nth-child(4)::before {
    content:"公開日：";
  }

}


.localNav {
  display: flex;
  flex-wrap: wrap;
}

.localNav>li {
  margin: 0 1em 1em 0;
  position: relative;
}

.localNav>li::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  transform: skew(-15deg);
}

.localNav a {
  color: #000;
  font-weight: 600;
  display: block;
  text-decoration: none;
  padding: .3em 1em;
  line-height: 1.2;
  position: relative;
}

.localNav>li:hover::before {
  opacity: .6;
}

/* ========================================
チケット
======================================== */

.ticketBannerList {
  max-width: 400px;
}

@media screen and (min-width: 900px){
  .ticketBannerList {
    max-width: 580px;
  }
}

.ticketBannerList>li {
  margin: 0 0 20px;
}

/* ========================================
グッズ
======================================== */
.color-no6 .goodsDetail p{
  line-height:1;
  margin: 0 0 0.5em;
}

/*
  リストページ／レイアウト 
======================= */

.color-no6 #list_06 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media screen and (min-width: 600px) {
  .color-no6 #list_06 {
    justify-content: flex-start;
  }
}

/*
  リストページ／ボックス
======================= */

.color-no6 #list_06>.nwu_box {
  margin: 0 0 20px;
  width: calc( (100% - 10px) / 2 );
}

@media screen and (min-width: 600px) and (max-width: 899px) {
  .color-no6 #list_06>.nwu_box {
    margin: 0 0 30px;
    width: calc( (100% - 60px) / 2 - 1px);
    margin-right: 30px;
  }

  .color-no6 #list_06>.nwu_box:nth-child(3n) {
    margin-right: 0;
  }
}


@media screen and (min-width: 900px) {
  .color-no6 #list_06>.nwu_box {
    width: calc( (100% - 90px) / 3 - 1px);
    margin-right: 30px;
  }

  .color-no6 #list_06>.nwu_box:nth-child(3n) {
    margin-right: 0;
  }
}

/*
  リストページ／画像
======================= */

.color-no6 #list_06 .sm {
  position: relative;
  background: #fff;
  margin: 10px 0 18px;
  padding: 0 8px;
}


.color-no6 #list_06 .sm::before,
.color-no6 #list_06 .sm::after {
  content: "";
  height: 10px;
  position: absolute;
  right: 0;
  left: 0;
  background-position: left, right;
  background-size: 100%;
  background-repeat: no-repeat;
}

.color-no6 #list_06 .sm::before {
  top: -10px;
  background-image: linear-gradient(135deg, transparent 5px, #fff 5px );
}

.color-no6 #list_06 .sm::after {
  bottom: -10px;
  background-image: linear-gradient(315deg, transparent 5px, #fff 5px );
}

.color-no6 #list_06 .sm a {
  opacity: 1;
  display: block;
  position: relative;
}

.color-no6 #list_06 .sm a:before {
  content: "";
  display: block;
  padding-top: 100%;
}

.color-no6 #list_06 .sm a::after {
  display: none;
}

.color-no6 #list_06 .sm a img {
  position: absolute !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: 100%;
  max-width: 100%;
  margin: auto;
  display: block;
  transition: .5s;
}

.color-no6 #list_06 .sm a:hover img {
  opacity: .6;
}

@media screen and (min-width: 900px) {
  .color-no6 #list_06 .sm {
    margin: 20px 0 28px;
    padding: 0 15px;
  }

  .color-no6 #list_06 .sm::before,
  .color-no6 #list_06 .sm::after {
    height: 15px;
  }

  .color-no6 #list_06 .sm::before {
    top: -15px;
    background-image: linear-gradient(135deg, transparent 10px, #fff 10px );
  }

  .color-no6 #list_06 .sm::after {
    bottom: -15px;
    background-image: linear-gradient(315deg, transparent 10px, #fff 10px );
  }
}


/*
  リストページ／タイトル
======================= */

.color-no6 #list_06 .title {
  font-size: 1.4rem;
  line-height: 1.4;
  word-break: break-word;
  font-weight: 600;

}

@media screen and (min-width: 900px) {
  .color-no6 #list_06 .title {
    font-size: 1.6rem;
  }
}

.color-no6 #list_06 .title a {
  text-decoration: none;
  text-shadow: 
  -1px -1px 0 #000,
  -1px 1px 0 #000,
  1px -1px 0 #000,
  1px 1px 0 #000,
  0 0 #000,
  1px 1px #000,
  2px 2px #000,
  3px 3px #000;
}

@media screen and (min-width: 600px) {
  .color-no6 .line_00 .img_l,
  .color-no6 .line_01 .img_l {
    max-width: 50%;
    margin: 0 16px 0 0;
  }

  .color-no6 .line_00 .read,
  .color-no6 .line_01 .read {
    overflow: hidden;
  }
}

#list_06 .new_ic {
  position: relative;
  padding-left: 1.7em;
}

#list_06 .new_ic::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0em;
  width: 1.5em;
  height: 1.5em;
  background: url(../../images/main/common/new_mark.svg) center/contain no-repeat;
}

/* ========================================
ミュージック
======================================== */

.musicLink{
  margin: 2em 0 0;
}

.musicLink li a{
  display: inline-block;
  line-height: 1;
  margin: 0 0 .7em;
  padding: .3em .7em;
  background: #c30e0e;
  font-weight: 900;
  transform: skew(-15deg, 0deg);
  text-decoration: none;
  box-shadow: .2em .2em #000;
}