@charset "utf-8";

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

- style.css

-------------------- */
.cont-ttl {
  font-size: 30px;
  letter-spacing: 2px;
  margin: 0 auto 40px;
  text-align: center;
  text-indent: 2px;
}

.cmt-btn {
  cursor: pointer;
  transition: .4s;
}

.cmt-btn:hover { opacity: .7; }

@media screen and (max-width: 480px) {

  .cont-ttl {
    font-size: 4.8vw;
    letter-spacing: .5333333333333333vw;
    margin: 0 auto 8vw;
    text-indent: .5333333333333333vw;
  }

  main {
    background: url(../img/staff/staff_footer_bg.png) no-repeat bottom center;
    background-size: 100%;
    padding: 0 0 40vw;
  }

}

/* --------------------
- top
-------------------- */
.top {
  position: relative;
}

.top-movie-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  min-width: 1280px;
}

.top-movie-wrap video {
  width: 100%;
}

#top-movie-sp {
  left: 0;
  position: absolute;
  top: 0;
  z-index: 1;
}

.kv { display: flex; }

.kv-left,
.kv-right {
  position: relative;
  width: 50%;
}

.word,
.copy {
  opacity: 0;
  position: absolute;
  top: 0;
}

.word {
  transform: scale(2);
  transition: .6s cubic-bezier(.165, .84, .44, 1);
  z-index: 1;
}

.copy {
  transform: scale(.1);
  transition: .3s cubic-bezier(.175, .885, .32, 1.275);
  z-index: 2;
}

.word-a,
.copy-a {
  max-width: 249px;
  min-width: 166px;
  right: 10px;
}

.word-b,
.copy-b {
  left: 10px;
  max-width: 260px;
  min-width: 173px;
}

.info {
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
  margin: -30px 0 0;
  padding: 0 30px 30px;
  position: relative;
  width: 100%;
  z-index: 10;
}

h1 {
  left: 50%;
  max-width: 722px;
  position: absolute;
  top: -70px;
  transform: translateX(-50%);
  z-index: 1;
}

.info-cast {
  font-size: 16px;
  letter-spacing: 2px;
  margin: 0 0 15px;
}

.info-cast span {
  display: inline-block;
  font-size: 20px;
  letter-spacing: 4px;
  padding: 0 0 8px;
}

.sato { position: relative; }

.sato span {
  bottom: -1px;
  font-size: 8px;
  left: 50%;
  letter-spacing: 0;
  padding: 0;
  position: absolute;
  transform: translateX(-51%);
}

.info-staff {
  font-size: 12px;
  letter-spacing: 1px;
  margin: 0 0 15px;
}

.info-staff span { font-size: 10px; }

.info-slogan { width: 680px; }

.trailer {
  display: none;
  height: 124px;
  position: relative;
  margin: 0 0 15px auto;
  width: 220px;
}

.play {
  align-items: center;
  background: rgba(0, 0, 0, 0);
  cursor: pointer;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  transition: .4s;
  width: 100%;
  z-index: 1;
}

.play .material-icons {
  color: #fff;
  font-size: 60px;
  opacity: .2;
  transition: .4s;
}

.play:hover { background: rgba(0, 0, 0, .7); }

.play:hover .material-icons { opacity: 1; }

.trailer-player {
  height: 123px;
  margin: 0 0 0 auto;
  width: 220px;
}

.trailer-pc-list {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 20px 30px 60px;
}

.trailer-pc-list li{
  position: relative;
  padding: 20px 10px;
  width: calc(100% / 3);
}

.movie-thumb-box {
  position: relative;
  width: 100%;
  padding-top: 54.25%;
  overflow: hidden;
}

.movie-thumb-box a{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

.movie-thumb-box a img {
    margin: -9.9% 0 0 0;
}

.special-btn{
  width: 340px;
  margin: 0 0 0 auto;
  padding: 20px 0;
}

.coming {
  position: relative;
}

.coming::after {
  content: 'Coming soon...';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.coming a {
  opacity: .2;
  pointer-events: none;
}

.news-sns {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  margin: 0 0 15px;
}

.news {
  margin: 0 20px 0 0;
  width: 170px;
}

.theaters {
  margin: 0 20px 0 0;
  width: 170px;
}

.tw-widgets-btn {
  align-items: center;
  background: #15ace4;
  border-radius: 50%;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, .2);
  cursor: pointer;
  height: 60px;
  justify-content: center;
  position: absolute;
  top: -30px;
  left: -70px;
  width: 60px;
  z-index: 100;
}

.tw-widgets-btn img {
  width: 100%;
}

.tw-widgets-tlbox {
  /* display: none; */
  background: #fff;
  border-radius: 10px 0 0 10px;
  transition: all .5s ease;
  margin-right: -300px;
}

.tw-widgets-tlbox.active {
  display: block;
  margin-right: 0;
}

.tw-widgets {
  z-index: 90;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, .2);
  position: fixed;
  right: 0;
  top: 110px;
}

.enki-pc {
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  max-width: 340px;
  padding: 10px;
  z-index: 100;
}

.trailer-pc-list li:nth-child(6),
.trailer-pc-list li:nth-child(7),
.trailer-pc-list li:nth-child(8),
.trailer-pc-list li:nth-child(9) {
}

@media screen and (max-width: 480px) {

  h1 {
    max-width: 100%;
    position: static;
    transform: translateX(0);
  }

  .sp-ttl {
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
  }

  .word {
    transition: .6s cubic-bezier(.19, 1, .22, 1);
    z-index: 2;
  }

  .copy {
    transition: .4s cubic-bezier(.175, .885, .32, 1.275);
    z-index: 3;
  }

  .word-a,
  .copy-a {
    max-width: none;
    min-width: auto;
  }

  .word-a {
    right: 0;
    top: 1.6vw;
    width: 21.466666666666665vw;
  }

  .copy-a {
    right: 7.2vw;
    top: 7.466666666666667vw;
    width: 14.933333333333334vw;
  }

  .word-b,
  .copy-b {
    max-width: none;
    min-width: auto;
  }

  .word-b {
    left: 0;
    top: 54.666666666666664vw;
    width: 21.6vw;
  }

  .copy-b {
    left: 6.933333333333334vw;
    top: 62.4vw;
    width: 8.533333333333333vw;
  }

  .info {
    display: block;
    margin: 0 auto 5.333333333333333vw;
    padding: 5.333333333333333vw 0 0;
    text-align: center;
  }

  .info-cast {
    font-size: 3.2vw;
    letter-spacing: .5333333333333333vw;
    margin: 0 0 4vw;
  }

  .info-cast span {
    font-size: 5.333333333333333vw;
    letter-spacing: .8vw;
  }

  .sato span {
    bottom: -.26666666666666666vw;
    font-size: 2.1333333333333333vw !important;
    letter-spacing: 0;
  }

  .info-staff {
    font-size: 2.4vw;
    letter-spacing: .26666666666666666vw;
    margin: 0 0 8vw;
  }

  .info-staff span { font-size: 2.1333333333333333vw; }

  .trailer {
    display: block;
    height: auto;
    margin: 0 auto 8vw;
    max-width: none;
    width: 80%;
  }

  .play { display: none; }

  .special-btn {
    width: 100%;
    margin: 0 auto 0 auto;
    padding: 8vw 5vw;
  }

  .news-sns {
    display: block;
    margin: 0;
  }

  .news {
    margin: 0 auto 4vw;
    width: 45.333333333333336vw;
  }

  .theaters {
    margin: 0 auto 8vw;
    width: 45.333333333333336vw;
  }

  #trailer-nav {
    display: flex;
    flex-wrap: wrap;
  }


  #trailer-nav li {
    background: #fff;
    color: #E84E85;
    width: 100%;
    padding: 10px 0;
  }

  #trailer-nav li:nth-child(1) {
    /* width: 100%; */
  }

  #trailer-nav li.selected {
    background: #f276a1;
    color: #fff;
  }

  #trailer-nav li:nth-child(1),
  #trailer-nav li:nth-child(2){
    width: calc(100% / 2);
  }

  #trailer-nav li:nth-child(7),
  #trailer-nav li:nth-child(8),
  #trailer-nav li:nth-child(9),
  #trailer-nav li:nth-child(10) {
    color: #3463AF;
  }

  #trailer-nav li:nth-child(8),
  #trailer-nav li:nth-child(9),
  #trailer-nav li:nth-child(10) {
    /* width: calc(100% / 3); */
  }

   #trailer-nav li:nth-child(7):hover,
   #trailer-nav li:nth-child(8):hover,
   #trailer-nav li:nth-child(9):hover,
   #trailer-nav li:nth-child(10):hover {
    background: #3463AF;
    color: #fff;
  }

   #trailer-nav li:nth-child(7).selected,
   #trailer-nav li:nth-child(8).selected,
   #trailer-nav li:nth-child(9).selected,
   #trailer-nav li:nth-child(10).selected  {
    background: #3463AF !important;
    color: #fff !important;
    cursor: default !important;
  }

  .top-movie-wrap {
    width: 100vw;
    min-width: 100vw;
  }

  .tw-widgets-tlbox {
    background: none;
    border-radius: none;
    position: relative;
    top: auto;
    right: auto;
    margin-right: 0;
  }

  .tw-widgets {
    position: relative;
    top: auto;
    right: auto;
    padding: 2vw 0 8vw 0;
    text-align: center;
    background: none;
    box-shadow: none;
  }

  .enki-sp {
    width: 280px;
    margin: 0 auto;
  }

}


/* --------------------
- maeuri
-------------------- */
.maeuri {
  margin: 0 auto 50px;
  padding: 30px 5%;
}

.maeuri-list {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.maeuri-list li {
  padding: 5px;
  width: calc(100% / 2);
  max-width: 200px;
}


/* --------------------
- intro
-------------------- */
.intro {
  background: url('../img/intro/bg.jpg') no-repeat center bottom;
  background-size: cover;
  max-height: 800px;
  min-height: 700px;
  overflow: hidden;
  padding: 80px 0 0;
  position: relative;
  text-align: center;
}

.intro .cont-ttl {
  color: #fff;
  position: relative;
  z-index: 1;
}

.intro p:nth-child(2) {
  margin: 0 auto 15px;
  position: relative;
  width: 890px;
  z-index: 1;
}

.intro p:nth-child(3) {
  color: #fff;
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 1.8;
  position: relative;
  text-shadow: 0 0 4px rgba(0, 0, 0, .8);
  z-index: 1;
}

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

.bubbles .particle {
  animation: bubbles 3s linear infinite;
  background: rgba(255, 253, 174, .7);
  border-radius: 50%;
  filter: blur(1px);
  opacity: 0;
  position: absolute;
}

@keyframes bubbles {
  0% {
    opacity: 0;
    transform: translate(0, 20%);
  }
  20% {
    opacity: 1;
    transform: translate(0, -20%);
  }
  100% {
    opacity: 0;
    transform: translate(0, -1000%);
  }
}

@media screen and (max-width: 480px) {

  .intro {
    background: url('../img/intro/bg_sp.jpg') no-repeat center bottom;
    background-size: cover;
    height: 117.33333333333333vw;
    max-height: none;
    min-height: auto;
    padding: 8vw 0 0;
  }

  .intro .cont-ttl { margin: 0 auto 5.333333333333333vw; }

  .intro p:nth-child(2) {
    margin: 0 auto 4vw;
    width: 100%;
  }

  .intro p:nth-child(3) {
    font-size: 3.2vw;
    letter-spacing: .26666666666666666vw;
    line-height: 1.4;
    margin: 0 auto;
    text-align: justify;
    text-shadow: 0 0 .8vw rgba(0, 0, 0, .8);
    width: 92%;
  }

  .bubbles .particle { filter: blur(.6px); }

  @keyframes bubbles {
    0% {
      opacity: 0;
      transform: translate(0, 20%);
    }
    20% {
      opacity: 1;
      transform: translate(0, -20%);
    }
    100% {
      opacity: 0;
      transform: translate(0, -1600%);
    }
  }

}

/* --------------------
- chara main
-------------------- */
.chara-main { display: flex; }

.ichiya,
.koyurugi {
  position: relative;
  width: 50%;
}

.ichiya p:first-child,
.koyurugi p:first-child {
  bottom: 32%;
  position: absolute;
  width: 140px;
  z-index: 1;
}

.ichiya p:first-child { right: 30px; }

.koyurugi p:first-child { left: 30px; }

@media screen and (max-width: 480px) {

  .chara-main { display: block; }

  .ichiya,
  .koyurugi { width: 100%; }

  .ichiya p:first-child,
  .koyurugi p:first-child {
    bottom: 29.6666666666666665vw;
    width: 21.333333333333332vw;
  }

  .ichiya p:first-child { right: 2.6666666666666665vw; }

  .koyurugi p:first-child { left: 2.6666666666666665vw; }

}

/* --------------------
- story
-------------------- */
.story {
  background: url('../img/story/bg.jpg') no-repeat center center;
  background-size: cover;
  padding: 60px 0;
  position: relative;
}

.story .cont-ttl {
  color: #f5821f;
  margin: 0 auto 20px;
}

.story p {
  letter-spacing: 1px;
  text-align: center;
  text-indent: 1px;
}

.story p:nth-child(2) {
  color: #221815;
  font-size: 16px;
  line-height: 1.8;
  margin: 0 auto 20px;
}

.story p:nth-child(3) {
  color: #ea5d89;
  font-size: 20px;
  font-weight: 900;
  margin: 0 auto 10px;
}

.story p:nth-child(4) {
  background: rgba(255, 255, 255, .7);
  color: #e61a69;
  font-size: 24px;
  font-weight: 900;
  padding: 5px 0 7px;
}

.story p:nth-child(4) span { color: #00A5E5; }

.story p:nth-child(5),
.story p:last-child {
  position: absolute;
  z-index: 1;
}

.story p:nth-child(5) {
  left: 50%;
  top: 105px;
  transform: translateX(-630px);
  width: 361px;
}

.story p:last-child {
  right: 50%;
  top: 120px;
  transform: translateX(620px);
  width: 346px;
}

@media screen and (max-width: 480px) {

  .story {
    background: url('../img/story/bg_sp.jpg') no-repeat center top;
    background-size: cover;
    padding: 8vw 0 5.333333333333333vw;
    position: relative;
  }

  .story .cont-ttl { margin: 0 auto 4vw; }

  .story p {
    letter-spacing: 0;
    text-indent: 0;
  }

  .story p:nth-child(2) {
    font-size: 3.2vw;
    line-height: 2;
    margin: 0 auto 2.6666666666666665vw;
  }

  .story p:nth-child(3) {
    font-size: 3.466666666666667vw;
    margin: 0 auto 2.6666666666666665vw;
  }

  .story p:nth-child(4) {
    font-size: 4.266666666666667vw;
    margin: 0 auto 4vw;
    padding: .8vw 0 1.0666666666666667vw;
  }

  .story p:nth-child(5) {
    position: static;
    transform: translateX(0);
    width: 100%;
  }

}

/* --------------------
- chara sub
-------------------- */
.chara {
  background: url(../img/chara/chart_bg_pc.png) no-repeat top 60px center;
  background-size: 900px;
  margin: 0 auto 30px;
  padding: 40px 0 0;
}

.chara .cont-ttl {
  color: #f5421f;
  margin: 0 auto 60px;
}

.chara-sub ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 20px auto;
  width: 1080px;
}

.chara-sub ul li {
  width: 530px;
  padding: 15px;
}

/* .chara-sub ul li:first-child,
.chara-sub ul li:nth-child(2),
.chara-sub ul li:nth-child(3) { margin: 0 0 30px; } */

.chart-btn {
  width: 50%;
  max-width: 340px;
  margin: 0 auto;
  display: block;
}

@media screen and (max-width: 480px) {

  .chara {
    background: url(../img/chara/chart_bg.png) no-repeat top 5vw center;
    background-size: 100%;
    margin: 0 auto 10.666666666666666vw;
    padding: 8vw 0 0;
  }

  .chara .cont-ttl { margin: 0 auto 8vw; }

  .chara-sub ul {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .chara-sub ul li {
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .chara-sub ul li:first-child,
  .chara-sub ul li:nth-child(2),
  .chara-sub ul li:nth-child(3) { margin: 0; }

}

/* --------------------
- photo
-------------------- */
.photo {
  position: relative;
  width: 1280px;
  height: 480px;
  margin: 100px auto;
}

.photo-txt0 {
  width: 75px;
  position: absolute;
  top: 278px;
  left: 76px;
}

.photo-txt1 {
  width: 75px;
  position: absolute;
  top: 10px;
  right: 76px;
}

.photo-img0 {
  width: 480px;
  position: absolute;
  left: 175px;
  top: 20px;
}

.photo-img1 {
  width: 480px;
  position: absolute;
  right: 175px;
  top: 80px;
}

.ph-line0{
	width: 100%;
	height: 184px;
	background: url(../img/photo/phline0.jpg) repeat-x;
	background-position: top left;
  background-size: auto 184px;
  box-shadow: 0 0 3px rgba(255,255,255,1);
	-webkit-animation-name: photoSlideLeft;
	-webkit-animation-duration: 45s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: photoSlideLeft;
	-moz-animation-duration: 45s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	animation-name: photoSlideLeft;
	animation-duration: 45s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;

}

.ph-line1{
  position: relative;
	width: 100%;
	height: 184px;
	background: url(../img/photo/phline1.jpg) repeat-x;
	background-position: top right;
  background-size: auto 184px;
  box-shadow: 0 0 3px rgba(255,255,255,1);
	-webkit-animation-name: photoSlideRight;
	-webkit-animation-duration: 45s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: photoSlideRight;
	-moz-animation-duration: 45s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	animation-name: photoSlideRight;
	animation-duration: 45s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}


@-webkit-keyframes photoSlideLeft {
	0% {background-position: 0px 0px;}
	100% {background-position: -1280px 0px;}
}
@-moz-keyframes photoSlideLeft {
	0% {background-position: 0px 0px;}
	100% {background-position: -1280px 0px;}
}

@-webkit-keyframes photoSlideRight {
	0% {background-position: 1000px 0px;}
	100% {background-position: 2280px 0px;}
}
@-moz-keyframes photoSlideRight {
	0% {background-position: 1000px 0px;}
	100% {background-position: 2280px 0px;}
}

@media screen and (max-width: 480px) {
  .photo {
    position: relative;
    width: 100%;
    height: auto;
    margin: 60px auto;
  }

  .photo-txt0 {
    width: 17.33vw;
    position: absolute;
    top: 0;
    left: auto;
    right: 5vw;
  }

  .photo-txt1 {
    width: 17.33vw;
    position: absolute;
    top: 54vw;
    right: auto;
    left: 5vw;

  }

  .photo-img0 {
    width: 70vw;
    position: relative;
    left: 5vw;
    top: 0;
  }

  .photo-img1 {
    width: 70vw;
    position: relative;
    right: auto;
    top: 0;
    margin: 0 5vw 0 auto;
  }

  .ph-line0{
    width: 100%;
    height: 92px;
    background: url(../img/photo/phline0.jpg) repeat-x;
    background-position: top left;
    background-size: auto 92px;
  }

  .ph-line1{
    width: 100%;
    height: 92px;
    background: url(../img/photo/phline1.jpg) repeat-x;
    background-position: top right;
    background-size: auto 92px;
  }
}

/* --------------------
- staff
-------------------- */
.staff {
  margin: 100px auto 100px;
  text-align: center;
}

.staff .cont-ttl { color: #b55dde; }

.director {
  align-items: center;
  display: flex;
  justify-content: center;
}

.director p:first-child {
  font-size: 24px;
  letter-spacing: 2px;
  margin: 0 40px 0 0;
}

.director p:first-child span {
  font-size: 14px;
  letter-spacing: 1px;
  margin: 0 5px 0 0;
}

.director p:last-child { width: 190px; }

@media screen and (max-width: 480px) {

  .staff {
    margin: 0 auto 13.333333333333334vw;
    padding: 8vw 0 0;
  }

  .director p:first-child {
    font-size: 4.8vw;
    letter-spacing: .5333333333333333vw;
    margin: 0 5.333333333333333vw 0 0;
  }

  .director p:first-child span {
    font-size: 2.6666666666666665vw;
    letter-spacing: .26666666666666666vw;
    margin: 0 1.3333333333333333vw 0 0;
  }

  .director p:last-child { width: 34.666666666666664vw; }

}

/* --------------------
- original
-------------------- */
.orig {
  margin: 0 auto 100px;
  text-align: center;
}

.orig .cont-ttl { color: #54d0ac; }

.author {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0 auto 40px;
}

.author p:first-child {
  font-size: 24px;
  letter-spacing: 2px;
  margin: 0 40px 0 0;
}

.author p:first-child span {
  font-size: 14px;
  letter-spacing: 1px;
  margin: 0 5px 0 0;
}

.author p:last-child { width: 190px; }

.cover {
  display: flex;
  justify-content: center;
  margin: 0 auto 30px;
  width: 440px;
}

.cover li {
  box-shadow: 2px 2px 3px rgba(0, 0, 0, .4);
  width: 120px;
  margin: 0 5px;
}

.orig-link {
  background: #54d0ac;
  border-radius: 6px;
  color: #fff;
  display: block;
  font-size: 14px;
  margin: 0 auto 60px;
  padding: 13px 0;
  width: 220px;
  text-align: center;
}

.comic p:first-of-type {
  border-bottom: 2px solid #221815;
  border-top: 2px solid #221815;
  display: table;
  font-size: 16px;
  letter-spacing: 1px;
  margin: 0 auto 20px;
  padding: 5px 10px;
  text-indent: 1px;
}

.comic p:last-of-type {
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 1.6;
  margin: 0 auto 20px;
  text-indent: 1px;
}

.comic p:last-of-type span { font-size: 10px; }

.comic a {
  background: #54d0ac;
  border-radius: 6px;
  color: #fff;
  display: block;
  font-size: 14px;
  margin: 0 auto;
  padding: 13px 0;
  width: 220px;
  text-align: center;
}

.cmt-orig {
  margin: 60px 0 40px;
  text-align: center;
}

@media screen and (max-width: 480px) {

  .orig { margin: 0 auto 13.333333333333334vw; }

  .author p:first-child {
    font-size: 4.8vw;
    letter-spacing: .5333333333333333vw;
    margin: 0 5.333333333333333vw 0 0;
  }

  .author p:first-child span {
    font-size: 2.6666666666666665vw;
    letter-spacing: .26666666666666666vw;
    margin: 0 1.3333333333333333vw 0 0;
  }

  .author p:last-child { width: 34.666666666666664vw; }

  .cover {
    margin: 0 auto 5.333333333333333vw;
    width: 92%;
  }

  .cover li { width: 32%; }

  .orig-link {
    border-radius: 1.6vw;
    font-size: 3.2vw;
    margin: 0 auto 8vw;
    padding: 3.466666666666667vw 0;
    width: 48vw;
  }

  .comic p:first-of-type {
    font-size: 3.2vw;
    letter-spacing: 0;
    margin: 0 auto 5.333333333333333vw;
    padding: 2.6666666666666665vw 0;
    text-indent: 0;
    width: 92%;
  }

  .comic p:last-of-type {
    font-size: 3.7333333333333334vw;
    letter-spacing: .26666666666666666vw;
    line-height: 1.4;
    margin: 0 auto 5.333333333333333vw;
    text-indent: .26666666666666666vw;
  }

  .comic p:last-of-type span { font-size: 2.6666666666666665vw; }

  .comic a {
    border-radius: 1.6vw;
    font-size: 3.2vw;
    padding: 3.466666666666667vw 0;
    width: 48vw;
  }

}

/* --------------------
- theme song
-------------------- */
.theme { text-align: center; }

.theme .cont-ttl { color: #1fa7f5; }

.theme-ttl {
  border-bottom: 2px solid #221815;
  border-top: 2px solid #221815;
  display: table;
  font-size: 20px;
  letter-spacing: 1px;
  line-height: 1.6;
  margin: 0 auto 30px;
  padding: 5px 10px;
  text-indent: 1px;
}

.theme-photo {
  margin: 0 auto 10px;
  width: 460px;
}

.theme-singer-box {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0 auto 40px;
}

.theme-singer {
  font-size: 24px;
  letter-spacing: 1px;
  margin: 0 40px 0 0;
  text-indent: 1px;
}

.theme-singer span {
  font-size: 14px;
  letter-spacing: 1px;
  margin: 0 5px 0 0;
}

.theme-btn { width: 190px; }

.theme-song {
  font-size: 18px;
  letter-spacing: 1px;
  line-height: 1.2;
  margin: 0 auto 80px;
  text-indent: 1px;
}

.insert-ttl {
  color: #1f41f5;
  font-size: 30px;
  letter-spacing: 2px;
  margin: 0 auto 40px;
  text-align: center;
  text-indent: 2px;
}

.theme-list {
  /* display: flex; */
  /* flex-wrap: wrap; */
  margin: 0 auto;
  /* width: 700px; */
}

.theme-list li {
  font-size: 18px;
  letter-spacing: 1px;
  line-height: 1.2;
  margin: 0 auto 40px;
  text-indent: 1px;
  width: 350px;
}

/* .theme-list li:last-child { margin: 0; } */

.singer {
  display: inline-block;
  padding: 5px 0 10px;
}

.font-14 { font-size: 14px; }

.font-12 {
  font-size: 12px;
  margin: 0 5px 0 0;
}

.font-10 { font-size: 10px; }

@media screen and (max-width: 480px) {

  .theme {
    margin: 0 auto;
    width: 92%;
  }

  .theme-ttl {
    display: block;
    font-size: 3.7333333333333334vw;
    letter-spacing: .26666666666666666vw;
    line-height: 1.6;
    margin: 0 auto 5.333333333333333vw;
    padding: 2.6666666666666665vw 0;
    text-indent: .26666666666666666vw;
  }

  .theme-photo {
    margin: 0 auto 2.6666666666666665vw;
    width: 80%;
  }

  .theme-singer-box { margin: 0 auto 8vw; }

  .theme-singer {
    font-size: 4.8vw;
    letter-spacing: .5333333333333333vw;
    margin: 0 5.333333333333333vw 0 0;
  }

  .theme-singer span {
    font-size: 2.6666666666666665vw;
    letter-spacing: .26666666666666666vw;
    margin: 0 1.3333333333333333vw 0 0;
  }

  .theme-btn { width: 34.666666666666664vw; }

  .theme-song { margin: 0 auto 13.333333333333334vw; }

  .insert-ttl {
    font-size: 4.8vw;
    letter-spacing: .5333333333333333vw;
    margin: 0 auto 8vw;
    text-indent: .5333333333333333vw;
  }

  .theme-list {
    display: block;
    width: 100%;
  }

  .theme-list li {
    font-size: 4.8vw;
    letter-spacing: .26666666666666666vw;
    line-height: 1;
    margin: 0 auto 10.666666666666666vw;
    text-indent: .26666666666666666vw;
    width: 100%;
  }

  .theme-list li:nth-last-child(2) { margin: 0 auto 10.666666666666666vw; }

  .singer { padding: 1.3333333333333333vw 0 2.6666666666666665vw; }

  .font-14 { font-size: 3.2vw; }

  .font-12 {
    font-size: 2.6666666666666665vw;
    margin: 0 1.3333333333333333vw 0 0;
  }

  .font-10 { font-size: 2.6666666666666665vw;; }

}

/* --------------------
- comment
-------------------- */
.cmt {
  align-items: center;
  background: rgba(0, 0, 0, .9);
  cursor: pointer;
  display: none;
  height: 100%;
  justify-content: center;
  left: 0;
  opacity: 0;
  padding: 80px 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 101;
}

.cmt-box {
  background: url('../img/top/bg.jpg') no-repeat center center fixed;
  background-size: cover;
  border-radius: 10px;
  cursor: default;
  max-height: 500px;
  overflow-y: scroll;
  padding: 60px 40px 40px;
  position: relative;
  width: 600px;
}

.cmt-close {
  cursor: pointer;
  font-size: 48px;
  line-height: .6;
  position: absolute;
  right: 0;
  top: 10px;
  transition: .4s;
  z-index: 1;
}

.cmt-close:hover { opacity: .7; }

.cmt-cont { display: none; }

.cmt-name {
  border-bottom: 2px solid #221815;
  font-size: 20px;
  letter-spacing: 2px;
  margin: 0 auto 10px;
  padding: 0 0 5px;
}

.cmt-name span { font-size: 14px; }

.cmt-ttl {
  margin: 2em 0 .3em;
  display: block;
  color: #f5821f;
}

.cmt-img {
  width: 60%;
  margin: 0 auto 2em;
}

.cmt-txt {
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1.6;
  text-align: justify;
}

.cmt-whbox {
  background: #fff;
  margin: 20px 0 40px;
  padding: 5%;
}

@media screen and (max-width: 480px) {

  .cmt { padding: 0; }

  .cmt-box {
    background: none;
    border-radius: 0;
    height: 100%;
    max-height: 100%;
    padding: 16vw 4% 8vw;
    width: 100%;
  }

  .cmt-box::before {
    background: url('../img/top/bg_sp.jpg') no-repeat center center;
    background-size: cover;
    content: '';
    display: block;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1;
  }

  .cmt-close {
    font-size: 12.8vw;
    position: fixed;
    top: 2.6666666666666665vw;
  }

  .cmt-close:hover { opacity: 1; }

  .cmt-name {
    font-size: 4.8vw;
    letter-spacing: .5333333333333333vw;
    margin: 0 auto 2.6666666666666665vw;
    padding: 0 0 1.3333333333333333vw;
  }

  .cmt-name span { font-size: 3.2vw; }

  .cmt-txt {
    font-size: 3.7333333333333334vw;
    letter-spacing: .26666666666666666vw;
  }

}

/*------------------
footer
------------------*/

.footer-bnr {
  position: fixed;
  bottom: -50vh;
  left: 0;
  z-index: 97;
  width: 100%;
  background: rgba(248, 245, 226,.8);
  transition: .4s;
}

.footer-bnr .special-btn {
  width: 60%;
  margin: 0 auto;
  padding: 10px;
}

.footer-bnr-shift {
  bottom: 0;
}

.special-btn.new a{
  position: relative;
  display: block;
  margin: 0 0 20px;
}

.special-btn.new a:first-child::after {
  content: "NEW";
  background: #f276a1;
  color: #fff;
  font-size: 11px;
  width: 35px;
  height: 35px;
  display: block;
  line-height: 35px;
  text-align: center;
  border-radius: 30px;
  position: absolute;
  top: -10px;
  left: -10px;
}