@charset "utf-8";
/*LOADING*/
.loading {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 800;
  background: #fff;
}
.loading__logo{
  position:absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
}
.loading__logo img{
  max-width:30vw;
}
.loading__img {
  position: relative;
  width: 100%;
  opacity: 0;
  padding-top: 115vw;
}
.loading__img li {
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  opacity:0;
}
.loading__img li img{
  width:100%;
}
.loading__img li:nth-child(1),
.loading__img li:nth-child(2) {
  opacity:1;
}
body::after {
  /* content:""; */
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index:-1;
  width:300px;
  max-width:40%;
  margin:auto;
  background: url(../../images/main/tz/logo.png) center center/ contain no-repeat;
  transition:1s;
  pointer-events:none;
}
body.kvview::after{
  opacity:0;
}

#wrapper{
  opacity:0;
}
#contents_main{overflow:hidden;}
section {
  margin: 0;
  position: relative;
  border: solid #faf6ea;
  border-width: 1px 0;
}
section::before,section::after{
  content:"";
  position:absolute;
  top:0;bottom:0;
  left:0;right:0;
}
section::before{
  background:url(../../images/main/common/bg_pattern.jpg)top center;
  mix-blend-mode: lighten;
  opacity: 0.5;
}
section::after{
  background:linear-gradient(-45deg, #f9f1d9 0%,#fcc5de 32%,#b3b1ff 74%,#fcd8ce 100%);
  mix-blend-mode: color;
}
.inner{position:relative;z-index:1;width:1000px;max-width: 95%;margin:auto;padding: 65px 0;}
h2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction:column;
  line-height: 1;
  font-size:1.5em;
  z-index: 10;
}
h2 b {
  transform: translateY(-50%);
  width: 500px;
  max-width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../../images/main/tz/h2_bg.png)center center no-repeat;
  font-family: 'EB Garamond', serif;
  color:#fff;
  text-shadow: 0 0 5px black;
}
h2 i {
  font-size:0.5em;
  font-family: 'Noto Serif JP', serif;
  color:#8e439a;
  letter-spacing:0.36em;
  display:flex;
  align-items:center;
}
h2 i::before,
h2 i::after {
  content:"◆";
  font-size:0.5em;
  color:#e285b0;
}
@media screen and (max-width:999px){
  .header__logo{
    display:none;
  }
}
#kv{border:none;/* position: sticky; *//* top: 0; */}
#kv::before,#kv::after{display:none;}
.mainVisual{
  content:"";
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  text-align: center;
  /* mix-blend-mode: unset; */
  opacity: 1;
  width: 1920px;
  max-width: 100%;
  height: auto;
  margin: auto;
  padding: 0;
  transition: 0.01s ease;
  /* overflow: hidden; */
}
.mainVisual li{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  overflow:hidden;
  transition: 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mainVisual li img{
  width: 120%;
  max-width: none;
  margin-left: -10%;
}
.kvInner {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: auto;
}
#kvLogo{
  position:relative;
  text-align: center;
  max-width: 70%;
  margin: 2em auto 4em;
}
@media screen and (min-width:1000px){
  #kvLogo{
    display:none;
  }
}
.headTtl {
  width: 35%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.headCatch {
  position: absolute;
  top: 10%;
  right: 5%;
  width: 9.5%;
}
.logo{width:394px;max-width: 100%;}
h1 {
  margin: 0 0 1em;
}
.catch_anime{
  padding-bottom: 40%;
}
.youtube::before,
.youtube::after{
  display:none;
}
.c-youtubeArea {
  width: 100%;
  height: 500px;
  max-height: 56.25vw;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.c-youtubeWrap{
  cursor:pointer;
  position:relative;
  overflow :hidden;
  width: 100%;
}

.c-youtubeWrap::before,
.c-youtubeWrap::after {
  content: "";
  position:absolute;
  top:0;bottom:0;
  left:0;right:0;
  margin:auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-shadow:none;
  font-size:2.2rem;
  transition:.5s;
}
.c-youtubeWrap::before{
  background: url(../../images/main/home/playBt.png) center center /contain no-repeat;
  z-index: 1;
  max-width: 25vw;
  width: 140px;
}
.c-youtubeWrap::after {
  background: url(../../images/main/common/bg_pattern.jpg)top center;
  mix-blend-mode:soft-light;
  opacity:0.5;
}
.c-youtubeArea:hover::before{
  opacity:0;
}
.c-youtubeArea:hover .c-youtubeWrap::before{
  transform:scale(0.8);
  opacity:0.2;

}
.c-youtubeArea:hover .c-youtubeWrap::after{
  opacity:0;
}

.copy {
  margin-bottom: 1em;
}
.comment {cursor: pointer;margin-left: -8px;}
.twTimeline{
  height:250px;
  max-width: 100%;
  overflow:auto;
}

.twTimelineWrap h2{
  background:none;
  width:auto;
  height:auto;
}

/*INFO*/
.info{
  background-color: rgb(251 251 251 / 0.9);
  font-family: 'Noto Serif JP', serif;
}

.info .inner{
  display:flex;
  justify-content: center;
  width: 100%;
  max-width: 1280px;
  padding: 50px 2.5em;
}

.info .inner > div{
  position:relative;
  z-index:0;
  max-width: 550px;
  width:90%;
  padding: 0 1.5%;
}

.info .inner > div h3{
  text-align: center;
  background: linear-gradient(350deg,#ea7ca3 45%,#6342a4 55%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.info .news h3{
  margin-bottom: 1.5em;
}
.info .twitter h3{
  margin-bottom:0;
}
.info .twitter a{
  color:#512d9a;
  display: block;
  text-align: center;
  font-weight: 700;
  text-decoration: none;
  font-size: 0.8em;
  margin-bottom:1em;
}
#nwu_001_t{
  background-color: rgb(251 251 251 / 0.9);
  /* height: 30em; */
  /* padding: 2em; */
  font-family: 'Noto Sans JP',sans-serif;
}

#nwu_001_t table,
#nwu_001_t table tbody,
#nwu_001_t table tr,
#nwu_001_t table td{
  display:block;
  font-size: 1.4rem;
  line-height: 1.5;
}

#nwu_001_t table tr{
  display:flex;
  margin: 0 0 1em;
  padding: 0 0 1em;
  border-bottom: 1px solid #dbd2ff;
}

#nwu_001_t table td.day{
  white-space: nowrap;
  /* font-family: arial sans-serif; */
  color: #be1e1e;
  font-size: 0.85em;
  line-height: 2;
}

#nwu_001_t table td:not(.day){
  flex:1;
  margin: 0 0 0 1em;
  color: #512d9a;
}

#nwu_001_t table .title a{text-decoration: none;color: unset;}


#info .tlWrap{
  height: 30em;
  background-color: rgb(251 251 251 / 0.9);
  overflow-y: auto;
  padding: 2em;
}

#info .tlWrap iframe{/* min-height: initial !important; *//* max-height: initial !important; *//* height: 100% !important; */}

@media screen and (max-width:999px) {
  #nwu_001_t table tr{
    display:block;
  }
  #nwu_001_t table td:not(.day){
    margin-left: 0;
  }
}

@media screen and (max-width:600px) {
  .info .inner{
    flex-direction:column;
    align-items: center;
    padding-top: 5em;
  }
}

/*INTRO*/
#intro {background-color: rgb(251 251 251 / 0.9);}
#intro p {
  font-size: 1.8rem;
  color: #512d9a;
  font-weight: 700;
  line-height:3.5;
  letter-spacing:-0.07em;
  text-align:center;
}
#intro p span,
#story p span{display:inline-block;}
#story {background-color: rgb(230 230 230 / 0.9);}
#story h3 {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-shadow: none;
    color: #fff;
    font-size: 2.84rem;
}

#story h3 span {
    background: #512d9a;
    padding: 0.2em;
    margin-left: 0.5em;
}
#story h3 span span{
  padding:0;
  margin:0;
  display:inline-block;
}
#story p {
  font-size: 1.8rem;
  color: #512d9a;
  font-weight: 700;
  line-height:3.5;
  letter-spacing: 0.1em;
}
#story p b{transform: scale(1,2);display: inline-block;padding: 0.5em 0;}
#charcter {background-color: rgb(251 251 251 / 0.9);}
.charWrap {
    text-align: center;
    display: inline-block;
}
.charWrap:nth-child(2) {
    position: absolute;
    right:0;
    top: 110px;
}
.charWrap p {
    font-family: 'Noto Sans JP';
    position: absolute;
    bottom: 3em;
    font-size: 1.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 14em;
}
.charWrap:nth-child(2) p{
    right:0;
}
.charStand {
    position: relative;
}
#staff{position:relative;margin-top: 70px;}
ul.staffList li {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.8rem;
  color: #310b7f;
  letter-spacing: 0.05em;
}

ul.staffList li i {
  width: 13em;
  text-align: right;
}
@media screen and (min-width:601px){
  ul.staffList li i::after {content: "：";}
}
ul.staffList li b {
  width: 16em;
  font-size: 1.5em;
  font-weight:600;
}
ul.staffList li b span{
  font-size:0.5em;
}
#books {
  background-color: rgb(230 230 230 / 0.9);
  font-family: 'Noto Sans JP';
  font-weight:700;
  text-align:center;
}
@media screen and (min-width:1300px){
  #books .inner {
    width: 1300px;
    max-width:100%;
  }
}

#books h3 {
  font-family:'Noto Serif JP';
  display:flex;
  flex-direction:column;
  align-items:center;
  text-shadow: none;
  color: #343434;
  font-size: 2rem;
  letter-spacing: -0.05em;
  margin: 2em auto;
}
#books h3::before {
  content:"";
  display:block;
  width: 660px;
  max-width: 100%;
  height:12px;
  background: url(../../images/main/tz/h3_line.png)center center / 98% 1px no-repeat,
    url(../../images/main/tz/h3_line_sq.png)center left no-repeat,
    url(../../images/main/tz/h3_line_sq.png)center right no-repeat;
}
#books h3 b{order: -1;}
#books h3 i{font-size:50%}
.booksList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}
@media screen and (max-width:1320px){
  .booksList{
    max-width:648px;
    margin:auto
  }
}
.booksList li {
    width: 200px;
    margin: 0 8px;
}
.booksList figcaption {
  margin:1em 0;
}
.road{
  position: relative;
  display: inline-block;
}
.road i{
  font-size: 50%;
  position: absolute;
  bottom: 75%;
  left: -10%;
  right: -10%;
  margin: auto;
}
.booksList p{
  font-size:1.4rem;
  color:#fff;
  text-shadow:none;
  background:#cd2b5d;
  text-align: center;
  padding: 0.2em 0;
}
.booksInfo {
  background:#fffaf9;
  border:1px solid #b6afe9;
  width:600px;
  max-width: 100%;
  margin:20px auto 50px;
  padding:20px 0;
  font-size: 2rem;
}
.booksInfo p{margin-bottom:0.5em;}
.booksTtl{
  margin: 1em 0;
  font-weight: 300;
}
.booksTtl b {font-weight:700;}
.booksInfo span{display:inline-block;}
.booksRelease {color: #cd2b5d;}
.booksInfo p:last-child{
  font-size:80%;
}
ul.links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 30px auto;
}

ul.links li {
    width: 220px;
    margin-bottom: 15px;
}
ul.links.comics li {
    width: 300px;
    max-width: 100%;
    margin-bottom: 15px;
}
section#comment,
section#commentOverlay {
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
  z-index: 3010;
  opacity: 0;
  visibility: hidden;
  transition: .7s;
}
#comment.is-open,
section#commentOverlay.is-open{
  opacity: 1;
  visibility: visible;
}
section#commentOverlay{
  background: rgb(251 251 251 / 0.8);
  mix-blend-mode: hard-light;
  z-index: 3000;
}
section#comment::before,
section#comment::after{display:none;}
section#commentOverlay::after {opacity: 0.8;}
section#comment h2{
  position: relative;
  margin: 70px auto 30px;
  transform: inherit;
}
section#comment .inner{
  max-height: 70%;
  overflow: auto;
  color: #512d9a;
  font-family: 'Noto Sans JP';
  font-weight: 700;
  padding: 0;
}

ul.commentList li{
  display:flex;
  margin-bottom: 3em;
}
.commentList .name {
    font-size: 3rem;
    flex-shrink: 0;
    width: 7em;
}

.commentList .name span {
    font-size: 50%;
}

.commentTxt {
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 2.5;
}

.commentClose {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0px auto;
    cursor: pointer;
}

.commentClose::before,
.commentClose::after {
    content:"";
    position:absolute;
    width:100%;
    height:1px;
    top:0;
    bottom:0;
    margin: auto;
    background:#512d9a;
}
.commentClose::before{transform:rotate(45deg);}
.commentClose::after {transform:rotate(-45deg);}

@media screen and (min-width: 1100px){
  .vertical {
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -ms-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    text-align: left;
    word-break: keep-all;
    display: flex;
    justify-content: center;
  }
  .verticalInner {margin: auto;display: inline-block;}
}
@media screen and (max-width: 1099px){
  #story p{text-align:center;}
}
@media screen and (max-width:999px){
}


@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .c-youtubeWrap::after,section::before {opacity:0.1;}
  *::-ms-backdrop,.info .inner > div h3{
    background:none;
    color:#6342a4;
  }
  *::-ms-backdrop, section::after{
    opacity:0.5;
  }
}