@charset "UTF-8";

html,
body {
  background: url('../img/bg.jpg') no-repeat center center fixed;
  background-size: cover;
  color: #221815;
  font-family: YakuHanJP, 'Noto Sans JP', sans-serif;
  font-weight: 700;
  -webkit-text-size-adjust: 100%;
}

#wrapper {
  background: url('../img/main-bg.jpg') repeat center center fixed;
  background-size: auto;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  display: block;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.21);
}

.sp-only {
  display: none;
}

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

  html,
  body {
    z-index: -2;
  }

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

  .novel-txt {
    font-size: 3.2vw;
    line-height: 2;
    margin: 0 auto 2.6666666666666665vw;
  }

  .pc-only {
    display: none;
  }

  .sp-only {
    display: block;
  }

}

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

font 

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

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

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

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

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

.font-10 span {
  font-size: 21px;
  line-height: 2;
}

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

  .font-18 {
    font-size: 4.2vw;
  }

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

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

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

  .font-10 span {
    font-size: 4.666667vw;
  }

}

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

header 

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

#header {}

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

lead 

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

#lead {
  padding: 60px 0;
  text-align: center;
}

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

.ttl--novel {
  color: #00b9f0;
}


.ttl--comic {
  color: #eb6188;
}


.lead-ttl {
  font-size: 25px;
  letter-spacing: 0;
  margin: 0 auto 30px;
  text-align: center;
  text-indent: 2px;
}

.lead-top {
  color: #ea5d89;
  font-size: 20px;
  font-weight: 900;
  margin: 0 auto 10px;
}

.lead-bottom {
  font-size: 10px;
  color: #656565;
  font-weight: normal;
}

.lead-btn {
  background: #54d0ac;
  border-radius: 6px;
  color: #fff;
  display: block;
  font-size: 14px;
  margin: 0 auto;
  padding: 13px 0;
  width: 220px;
  transition: .1s;
}

#top-btn-box {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 700px;
}

#top-btn-box li {
  list-style: none;
  width: 50%;
}

#top-btn-box li:first-child {
  padding-right: 5px;
}

#top-btn-box li:last-child {
  padding-left: 5px;
}

#top-btn-box li:first-child a {
  background-image: linear-gradient(#00b9f2 0%, #00b9f1 100%);
}

#top-btn-box li:nth-child(2) a {
  background-image: linear-gradient(#ea5d89 0%, #ea5d89 100%);
}

.top-btn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 110px;
  padding: 0.5em 1em;
  text-decoration: none;
  border: 3px solid;
  color: #FFF;
  transition: .4s;
  font-size: 25px;
  letter-spacing: 3px;
  line-height: 1;
  border-radius: 2px;
  transition: .1s;
}


.top-btn--soon {
  position: relative;
}

.top-btn--soon:before {
  content: "coming soon！";
  font-size: 30px;
  letter-spacing: 0;
  color: #221814;
  background: #ffffffad;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: initial;
}

#top-btn-box li:first-child a:hover,
#top-btn-box li:nth-child(2) a:hover {
  opacity: .6;
}

.top-btn--soon:hover {
  opacity: 1 !important;
}

.top-btn span {
  font-size: 15px;
  line-height: 1.4;
  font-weight: normal;
}

@media screen and (max-width:450px) {
  #lead {
    padding: 10vw 0;
  }

  .lead-ttl {
    font-size: 4.8vw;
    letter-spacing: 0;
    text-indent: 0;
    margin: 3vw auto;
    width: 90%;
  }

  .lead-top {
    font-size: 3.466666666666667vw;
    margin: 0 auto;
  }

  .lead-bottom {
    font-size: 2vw;
  }

  .top-btn {
    font-size: 5vw;
    line-height: 8vw;
    min-height: 20vw;
    margin: 0 auto 2vw;
    width: 90%;
    max-width: 530px;
  }

  .top-btn span {
    font-size: 3vw;
    width: 100%;
  }

  #top-btn-box li {
    list-style: none;
    width: 100%;
    padding: 0 30px;
  }

  #top-btn-box li:first-child,
  #top-btn-box li:last-child {
    padding: 0;
  }


}

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

anker-link 

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

.anker-link {}

ul.anker-link-list {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  width: 90%;
  max-width: 430px;
  margin: 0 auto;
}

.anker-link-list li {
  /* margin: 0 2px; */
  padding: 10px 0;
  width: calc(100%/3);
  border: 3px solid #fff;
  text-align: center;
  border-radius: 3px;
}

#comic-anker-link-list li {
  background: #eb6188;
}

#novel-anker-link-list li {
  background: #00b9f0;
}

.anker-link-list li a {
  color: #fff;
}

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

top-main 

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

#top-main {
  padding: 30px 0;
  background: #f7f4e4;
  background: url(../img/top-main-bg.jpg) no-repeat center center;
  background-size: cover;
}

.main-lead {
  font-size: 25px;
  line-height: 0;
  letter-spacing: 0;
  margin: 0 auto 5px;
  text-align: center;
  text-indent: 2px;
  /* letter-spacing: 1px; */
  line-height: 1;
  margin: 0 auto 60px;
  padding: 15px 10px;
  background: rgba(255, 255, 255, .7);
  color: #e61a69;
}

.main-lead span.font-18 {
  padding: 0 2px;
}

.main-sub-lead {
  font-size: 10px;
  line-height: 0;
  letter-spacing: 0;
  margin: 3px auto;
  color: #5d5d5d;
  text-align: center;
  text-indent: 2px;
}

#sp-ill-list,
#sp-comic-list {
  list-style: none;
  margin: 60px auto 0;
  padding: 0;
}

#sp-ill-list li p,
#sp-comic-list li p{
  border-bottom: 2px solid #221815;
  border-top: 2px solid #221815;
  margin: 0 0 30px 0;
  padding: 10px 0 7px;
  text-indent: 2px;
  letter-spacing: 1px;
}

.ill-ttl {
  border-bottom: 2px solid #221815;
  border-top: 2px solid #221815;
  margin: 0 5% 0;
  padding: 10px 0 7px;
  text-indent: 2px;
  letter-spacing: 1px;
  text-align: center;
}

#sp-ill-list li,
#sp-comic-list li {
  text-align: center;
  width: 90%;
  margin: 0 auto 50px;
  max-width: 500px;
}

#sp-ill-list li img,
#sp-comic-list li img {
  width: 100%;
  margin: 5px 0;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, .4);
}

#sp-comic-list li img {
  /* max-width: 350px; */
  margin: 0 auto;
}

#sp-comic-list {
  list-style: none;
}

.sp-sub-ttl {
  border: none !important;
  padding: 0 !important;
  margin: 0 0 10px 0 !important;
}

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

  #top-main {
    padding: 10vw 0;
  }

  .main-lead {
    font-size: 5vw;
    line-height: 1.5;
  }

  #sp-ill-list,
  #sp-comic-list {
    margin: 10vw auto;
  }

}

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

novel-main 

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

#novel-main {
  /* margin: 60px 0 0; */
}

#novel-list {
  padding: 0;
  list-style: none;
}

#novel-list li {
  /* margin: 0 0 100px; */
  padding: 30px 0 0;
}

#novel-list li:last-child {
  margin: 0 0 70px;
}

.novel-ttl {
  text-align: center;
  margin: 0 0 25px;
}

.novel-box {
  font-size: 18px;
  line-height: 2;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  height: 700px;
  font-weight: normal;
  overflow: auto;
  width: 90%;
  max-width: 700px;
  margin: 0 auto;
  padding: 50px;
  background: rgba(255, 255, 255, 0.63);
  box-shadow: 0 0 15px #fff;
  border-radius: 3px;
  writing-mode: tb-rl;
  writing-mode: vertical-rl;
  / writing-mode: tb-rl;
  _writing-mode: tb-rl;
  -ms-writing-mode: tb-rl;
  -moz-writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -o-writing-mode: vertical-rl;
  -webkit-overflow-scrolling: touch
}

.novel-box p {
  padding: 0 0 0 50px;
}

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

comic-main 

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

#comic-main {
  /* padding: 60px 0 0; */
}

#comic-list {
  padding: 0;
  list-style: none;
}

#comic-list li {
  max-width: 750px;
  padding: 30px 0 0;
  margin: 0 auto;
}

#comic-list li:last-child {
  margin: 0 auto 70px;
}

.comic-ttl {
  text-align: center;
  margin: 0 0 20px;
}

.comic-box {
  width: 90%;
  max-width: 430px;
  margin: 0 auto;
  border-radius: 3px;
  / writing-mode: tb-rl;
  _writing-mode: tb-rl;
  -ms-writing-mode: tb-rl;
  -moz-writing-mode: vertical-rl;
  -o-writing-mode: vertical-rl;
}

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

footer

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

#footer {
  padding: 30px 0 5px;
  text-align: center;
  width: 90%;
  max-width: 700px;
  margin: 0 auto;
}

.footer-btn-container {
  /* margin: 0 0 10px; */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.totop-btn {
  background: linear-gradient(-45deg, rgb(114, 222, 255), rgb(255, 119, 158));
  border-radius: 6px;
  border: 2px solid #f9f6e6;
  color: #fff;
  display: block;
  font-size: 14px;
  padding: 13px 0;
  width: 50%;
  text-decoration: none;
  transition: .1s;
}

.totop-btn:hover {
  opacity: .6;
}

.totop-btn--sptop {
  background: #ea5d89;
}

.totop-btn--novel {
  background: #5a5a5a;
}

.totop-btn--comic {
  background: #5a5a5a;
}

.cc {
  margin: 30px 0 0;
  font-size: 10px;
}

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

  #footer {
    padding: 8vw 0 2vw;
  }


  .footer-btn-container {
    margin: 0;
  }

  .totop-btn {
    border-radius: 1.6vw;
    font-size: 3.2vw;
    margin: 0 auto 2vw;
    padding: 3.466666666666667vw 0;
    width: 100%;
  }
}