@charset "UTF-8";
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd {
  margin: 0;
  padding: 0;
}

ol, ul {
  list-style-type: none;
}

/*-----------------------------------------------
 root
-----------------------------------------------*/
html {
  overflow-y: scroll;
}

body {
  overflow: hidden;
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif;
  font-weight: 400;
}

/*-----------------------------------------------
 font
-----------------------------------------------*/
html {
  overflow-x: hidden;
  font-size: medium;
}

body {
  min-width: 1200px;
  font-size: 62.5%;
  /* 16px -> 10px */
}

div {
  box-sizing: border-box;
  line-height: 0;
}

dt, dd, li,
caption, th, td,
input, button, textarea, select,
h1, h2, h3, h4, h5, h6, address {
  margin: 0;
  padding: 0;
  font-size: 140%;
  line-height: 0;
}

p {
  margin: 0;
  padding: 0;
  font-size: 140%;
  line-height: 1.5;
}

h1 *, h2 *, h3 *, h4 *, h5 *, h6 *,
p input, p button, p select,
li h1, li h2, li h3, li h4, li h5, li h6, li p, li dt, li dd, li li, li th, li td, li input, li button, li textarea, li select,
dd h1, dd h2, dd h3, dd h4, dd h5, dd h6, dd p, dd dt, dd dd, dd li, dd th, dd td, dd input, dd button, dd textarea, dd select,
tr h1, tr h2, tr h3, tr h4, tr h5, tr h6, tr p, tr dt, tr dd, tr li, tr input, tr button, tr textarea, tr select {
  font-size: 100%;
}

input, button, select, option, textarea {
  font-size: 14px;
}

figure {
  margin: 0;
}

a,
a:link,
a:visited {
  color: #000;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

section {
  box-sizing: border-box;
  position: relative;
}

/*-----------------------------------------------
 cf
-----------------------------------------------*/
.clearfix {
  min-height: 1px;
}

.clearfix::after {
  display: block;
  visibility: hidden;
  height: 0;
  clear: both;
  content: " ";
}

* html .clearfix {
  height: 1px;
  /*¥*/
  /*/
		height: auto;
		overflow: hidden;
		/**/
}

/*-----------------------------------------------
 hover
-----------------------------------------------*/
.hover :hover {
  -webkit-animation: btn 0.5s;
  animation: btn 0.5s;
  opacity: 0.8;
}

@keyframes btn {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 0.4;
  }
  100% {
    opacity: 0.8;
  }
}

@-webkit-keyframes btn {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 0.4;
  }
  100% {
    opacity: 0.8;
  }
}

/*-----------------------------------------------
 body
-----------------------------------------------*/
body {
  background: url("../img/global/bg.png") repeat-y top center;
  background-attachment: local;
}

/*-----------------------------------------------
 keyvisual
-----------------------------------------------*/
#keyvisual .bg {
  width: 1800px;
  height: 1105px;
  margin: 0 auto;
  background: url("../img/keyvisual/bg.jpg") no-repeat top center #fff;
  opacity: 0;
}

#keyvisual .inner {
  z-index: 10;
  position: relative;
  width: 1200px;
  margin: 0 auto;
}

#keyvisual .inner .logo {
  z-index: 10;
  position: absolute;
  top: 11px;
  left: 35px;
}

#keyvisual .inner h1 {
  z-index: 5;
  position: absolute;
  top: 65px;
  left: 36px;
  opacity: 0;
}

#keyvisual .inner .kv-image {
  z-index: 2;
  position: absolute;
  opacity: 0;
}

#keyvisual .inner .catch01 {
  z-index: 5;
  position: absolute;
  top: 10px;
  right: 80px;
  opacity: 0;
}

#keyvisual .inner .catch02 {
  z-index: 5;
  position: absolute;
  top: 25px;
  right: 140px;
  opacity: 0;
}
#keyvisual .inner .btns {
  position: absolute;
  top: 644px;
  right: 50px;
  z-index: 5;
}
#keyvisual .inner .btns ul li {
  position: relative;
  width: 215px;
  height: 58px;
  margin-bottom: 12px;
}
#keyvisual .inner .btns ul li a {
  display: block;
  width: 200px;
  height: 100%;
  padding-left: 15px;
  line-height: 58px;
  border-radius: 5px;
  background-color: #e03795;
  box-shadow: 0 3px #adadad;
  font-size: 26px;
  text-decoration: none;
  text-align: center;
  color: #fff;
  transition: all 0.3s ease;
}
#keyvisual .inner .btns ul li a:hover {
  background-color: rgba(173, 173, 173, 0.8);
}
#keyvisual .inner .btns ul li a::before {
  content: '▶︎';
  position: absolute;
  top: -2%;
  left: 12px;
  font-size: 12px;
}

#keyvisual .inner #information {
  z-index: 6;
  position: absolute;
  top: 755px;
  left: 50px;
  width: 1100px;
  height: 213px;
  background-image: url(../img/keyvisual/bg-information.png);
}

#keyvisual .inner #information ul {
  position: absolute;
  top: 68px;
  left: 35px;
  width: 1030px;
  height: 124px;
  overflow: hidden;
  overflow-y: scroll;
}

#keyvisual .inner #information ul li {
  padding: 5px 0;
  border-bottom: 1px dotted #e03795;
  font-size: 16px;
  line-height: 2;
}

#keyvisual .inner #information ul li time {
  position: relative;
  padding: 4px;
  background-color: #000;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

#keyvisual .inner #information ul li time::after {
  position: absolute;
  top: 0;
  left: 98px;
  color: #000;
  font-size: 10px;
  content: '▶︎';
}

#keyvisual .inner #information ul li a {
  margin-left: 10px;
}

/*-----------------------------------------------
 twitter
-----------------------------------------------*/
#twitter {
  position: relative;
}

#twitter::before {
  display: block;
  z-index: -1;
  position: absolute;
  top: -75px;
  left: 50%;
  width: 1471px;
  height: 561px;
  transform: translateX(-50%);
  background: url(../img/twitter/bg.png) 50% 0 no-repeat;
  content: "";
}

#twitter h2 {
  margin-bottom: 12px;
  text-align: center;
}

#twitter .inner {
  width: 1200px;
  margin: 0 auto;
}

#twitter .timeline {
  width: 798px;
  margin: 0 auto;
  padding: 12px 20px 20px;
  background-color: #d3b9de;
}

#twitter .timeline p {
  margin-bottom: 5px;
  text-align: center;
}

#twitter .timeline iframe {
  height: 338px !important;
}

/*-----------------------------------------------
 PV
-----------------------------------------------*/
#pv h2 {
  margin-bottom: 58px;
  text-align: center;
}

#pv .inner {
  width: 900px;
  margin: 0 auto;
}

#pv #main-movie {
  margin-bottom: 35px;
  padding: 13px;
  background: url(../img/pv/pv-movie-bg.png) center center no-repeat;
}

#pv #main-movie iframe {
  width: 868px;
  height: 487px;
  border: 3px solid #fcbcd3;
}

#pv .movie-list {
  position: relative;
  margin-bottom: 42px;
}

#pv .movie-list ul {
  width: 745px;
  margin: 0 auto;
  padding: 10px 0 0 0;
  overflow: hidden;
}

#pv .movie-list ul li {
  display: inline-block;
  transform: scale(0.8356);
  outline: none;
  text-align: center;
  transition: transform 0.3s ease;
}

#pv .movie-list ul li a {
  display: inline-block;
  pointer-events: none;
}

#pv .movie-list ul li img {
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
}

#pv .movie-list ul li p {
  padding-top: 10px;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
}

#pv .movie-list ul li:hover {
  transform: scale(0.9);
}

#pv .movie-list ul li.slick-current {
  transform: scale(1);
}

#pv .movie-list ul li.slick-current a {
  box-shadow: 0 0 10px 3px rgba(252, 188, 211, 0.8);
}

#pv .movie-list .slick-prev {
  left: 0;
  overflow: hidden;
  background: url(../img/pv/pv-prev.png) center right no-repeat;
  text-indent: 100%;
  white-space: nowrap;
}

#pv .movie-list .slick-next {
  right: 0;
  overflow: hidden;
  background: url(../img/pv/pv-next.png) center left no-repeat;
  text-indent: 100%;
  white-space: nowrap;
}

#pv .movie-list .slick-arrow {
  position: absolute;
  top: 46px;
  width: 19px;
  height: 42px;
  border: none;
  cursor: pointer;
}

/*-----------------------------------------------
 story
-----------------------------------------------*/
#story {
  z-index: 10;
  position: relative;
  height: 950px;
  margin-top: -80px;
  background: url("../img/story/bg.png") top center no-repeat;
  background-size: auto;
}

#story .inner {
  width: 1200px;
  margin: 0 auto;
  padding-top: 260px;
}

#story .inner h2 {
  text-align: center;
}

/*-----------------------------------------------
 character
-----------------------------------------------*/
#character {
  margin-bottom: 75px;
}

#character .sp {
  display: none;
}

#character .inner {
  width: 1200px;
  margin: 0 auto;
}

#character .inner h2 {
  margin-bottom: 46px;
  text-align: center;
}

#character .inner .list1 {
  margin-bottom: 30px;
  font-size: 0;
  text-align: center;
}

#character .inner .list1 li {
  display: inline-block;
  margin: 0 41px;
}

#character .inner .list1 li:nth-child(1) .image {
  position: relative;
}

#character .inner .list1 li:nth-child(1) .image::after {
  display: block;
  position: absolute;
  top: 171px;
  right: -58px;
  width: 35px;
  height: 35px;
  background: url("../img/character/decoration.png") no-repeat top center;
  content: "";
}

#character .inner .list1 li .image {
  margin-bottom: 28px;
}

#character .inner .list1 li p {
  font-size: 15px;
  line-height: 1.8;
  text-align: center;
}

#character .inner .list2 {
  font-size: 0;
  text-align: center;
}

#character .inner .list2 li {
  display: inline-block;
  margin: 0 34px;
}

#character .inner .list2 li:nth-child(1) .image, #character .inner .list2 li:nth-child(2) .image {
  position: relative;
}

#character .inner .list2 li:nth-child(1) .image::after, #character .inner .list2 li:nth-child(2) .image::after {
  display: block;
  position: absolute;
  top: 224px;
  right: -50px;
  width: 35px;
  height: 35px;
  background: url("../img/character/decoration.png") no-repeat top center;
  content: "";
}

#character .inner .list2 li .image {
  margin-bottom: 26px;
}

#character .inner .list2 li p {
  font-size: 15px;
  line-height: 1.8;
  text-align: center;
}

/*-----------------------------------------------
 books
-----------------------------------------------*/
#books{
    margin-bottom: 75px;
}
#books .inner {
  width: 1200px;
  margin: 0 auto;
}

#books .inner h2 {
  margin-bottom: 50px;
}

#books .inner h2 img {
  width: 100%;
}

#books .inner .book {
  width: 1100px;
  margin: 0 auto 40px;
}

#books .inner .book .cover {
  width: 318px;
  float: left;
  border: 1px solid #d1a612;
}

#books .inner .book .cover img {
  max-width: 100%;
}

#books .inner .book .detail {
  width: 760px;
  float: right;
}

#books .inner .book .detail h3 {
  margin-bottom: 26px;
  padding-bottom: 34px;
  background: url("../img/books/line.png") no-repeat bottom center;
  font-size: 48px;
  line-height: 1.2;
}

#books .inner .book .detail .catch {
  margin-bottom: 2px;
  font-size: 23px;
}

#books .inner .book .detail .story {
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 1.8;
}

#books .inner .book .detail .links {
  font-size: 0;
}

#books .inner .book .detail .links li {
  display: inline-block;
  position: relative;
  margin-right: 10px;
  line-height: 1;
}

#books .inner .book .detail .links li a {
  display: block;
  padding: 15px 60px;
  border-radius: 10px;
  background-color: #e03795;
  box-shadow: 0 3px #adadad;
  color: #fff;
  font-size: 28px;
  text-decoration: none;
  transition: all 0.3s ease;
}

#books .inner .book .detail .links li a:hover {
  background-color: rgba(173, 173, 173, 0.8);
}

#books .inner .book .detail .links li a::before {
  position: absolute;
  top: 50%;
  left: 10px;
  margin-top: -6px;
  font-size: 12px;
  content: '▶︎';
}

#books .inner .store {
  width: 1100px;
  margin: 0 auto 40px;
  padding: 20px 0 0;
  border: 1px solid #e03795;
  background-color: #f6f3eb;
}

#books .inner .store h3 {
  position: relative;
  margin-bottom: 20px;
  color: #e03795;
  font-size: 28px;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}

#books .inner .store h3::before {
  display: block;
  position: absolute;
  top: 4px;
  left: 420px;
  width: 27px;
  height: 27px;
  background: url("../img/books/before-icon.png") no-repeat top center;
  content: "";
}

#books .inner .store h3::after {
  display: block;
  position: absolute;
  top: 10px;
  right: 30px;
  width: 26px;
  height: 17px;
  background: url("../img/books/after-icon1.png") no-repeat top center;
  content: "";
}

#books .inner .store h3.active::after {
  background: url("../img/books/after-icon2.png") no-repeat top center;
}

#books .inner .store .storeLinks {
  display: none;
}

#books .inner .store .storeLinks .banner {
  -ms-flex-wrap: wrap;
  display: flex;
  flex-wrap: wrap;
  margin: 0 10px 10px;
  padding: 0;
  list-style: none;
}

#books .inner .store .storeLinks .banner li {
  box-sizing: border-box;
  width: 20%;
  margin: 0 0 15px 0;
  padding: 0 10px;
}

#books .inner .store .storeLinks .banner li a {
  -ms-flex-pack: center;
  -ms-flex-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 60px;
  border: 1px solid #ccc;
  background: #fff;
}

#books .inner .store .storeLinks .banner li a img {
  max-width: 100%;
  height: auto;
}

#books .inner .bnr{
  width: 100%;
  margin: 40px auto 0;
  text-align: center;
}
#books .inner .bnr a:hover{
opacity: 0.8;
}

/*-----------------------------------------------
 comic
-----------------------------------------------*/
#comic {
    margin-bottom: 80px;
/*  background: url("../img/comic/bg.png") no-repeat bottom center #fff;*/
}

#comic .sp {
  display: none;
}

#comic .inner {
  width: 1200px;
  margin: 0 auto;
}

#comic .inner h2 {
  margin-bottom: 50px;
}

#comic .inner .block {
  position: relative;
}

#comic .inner .block .txt {
  position: absolute;
  top: 46px;
  right: -8px;
}

#comic .inner .block .detail {
  position: absolute;
  top: 320px;
  right: 50px;
  padding: 30px 17px;
  background: url("../img/comic/line.png") no-repeat top center, url("../img/comic/line.png") no-repeat bottom center rgba(254, 254, 254, 0.8);
}

#comic .inner .block .detail .cover {
  display: inline-block;
  margin-right: 16px;
}

#comic .inner .block .detail .text {
  display: inline-block;
  vertical-align: top;
}

#comic .inner .block .detail .text p {
  font-size: 16px;
}

#comic .inner .block .detail .text p.release {
  color: #fb8d03;
  font-size: 26px;
  font-weight: bold;
}

#comic .inner .block .detail .text p.title {
  font-size: 33px;
  font-weight: bold;
}

#comic .inner .block .detail .text p.note {
  font-size: 12px;
}

#comic .inner .block .detail .btn {
  position: absolute;
  top: 210px;
  left: 280px;
  width: 340px;
}

#comic .inner .block .detail .btn a {
  display: block;
  height: 34px;
  padding: 14px 0;
  border-radius: 4px;
  background-color: #e03795;
  box-shadow: 2px 3px #adadad;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

#comic .inner .block .detail .btn a:hover {
  background-color: rgba(173, 173, 173, 0.8);
}

#comic .inner .block .detail .btn a::before {
  position: absolute;
  top: 50%;
  left: 10px;
  margin-top: -6px;
  font-size: 12px;
  content: '▶︎';
}
/*-----------------------------------------------
movie
-----------------------------------------------*/
#movie {
  margin-bottom: 80px;
  text-align: center;
}
#movie .inner {
  width: 1200px;
  margin: 0 auto;
}
#movie h2 {
  text-align: center;
  margin-bottom: 35px;
}
#movie .inner .txt{
  text-align: center;
  margin-top: 40px;
}
#movie .inner p.moviebtn{
  text-align: center;
  margin-top: 40px;
}
#movie .inner p.moviebtn :hover{
    opacity: 0.8;
}
/*-----------------------------------------------
anime
-----------------------------------------------*/
#anime {
  margin-bottom: 80px;
  text-align: center;
}
#anime .inner {
  width: 1200px;
  margin: 0 auto;
}
#anime h2 {
  text-align: center;
  margin-bottom: 35px;
}
#anime p {
  text-align: center;
  margin-bottom: 20px;
}
#anime .youtube{
    margin-bottom: 30px;
}
#anime .youtube iframe {
  width: 868px;
  height: 487px;
  border: 3px solid #fcbcd3;
  margin: 0 auto;
}
#anime .inner .txt {
    text-align: center;
}

#anime .inner ul.animebtn {
  margin: 30px 0;
  font-size: 0;
  text-align: center;
}

#anime .inner ul.animebtn li {
  display: inline-block;
  margin-left: 30px;
}
#anime .inner .block .detail {
  position: absolute;
  top: 260px;
  left: 650px;
  display: inline-block;
  vertical-align: top;
  text-align: center;
}

#anime .inner p {
  font-size: 28px;
  margin-top: 10px;
}
#anime .youtube2 iframe {
  width: 400px;
  height: 225px;
  border: 3px solid #fcbcd3;
  margin: 0 auto;
}

/*-----------------------------------------------
 rodoku
-----------------------------------------------*/
#rodoku {
  padding-bottom: 36px;
  /*background: url("../img/comic/bg.png") no-repeat bottom center #fff;*/
}

#rodoku .sp {
  display: none;
}

#rodoku .inner {
  width: 1200px;
  margin: 0 auto;
}
#rodoku .inner h2 {
  margin-bottom: 40px;
}

#rodoku .inner .block {
  position: relative;
}

#rodoku .inner .block .txt {
  position: absolute;
  top: 68px;
  left: 502px;
}

#rodoku .inner .block .detail {
  position: absolute;
  top: 260px;
  left: 650px;
  display: inline-block;
  vertical-align: top;
  text-align: center;
}

#rodoku .inner .block .detail p {
  font-size: 22px;
  margin-top: 5px;
}

#rodoku .inner .block .detail p:nth-child(3) {
  text-indent: 2em;
}

#rodoku .inner .block .detail p span.stxt {
  font-size: 17px;
}

#rodoku .inner .block .detail p span.cast {
  font-size: 30px;
  color: #206a69;
  font-weight: bold;
}

#rodoku .inner .block .detail .btn {
  position: absolute;
  top: 188px;
  left: 0;
  width: 340px;
}

#rodoku .inner .block .detail .btn a {
  display: block;
  height: 34px;
  padding: 14px 0;
  border-radius: 4px;
  background-color: #e03795;
  box-shadow: 2px 3px #adadad;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

#rodoku .inner .block .detail .btn a:hover {
  background-color: rgba(173, 173, 173, 0.8);
}

#rodoku .inner .block .detail .btn a::before {
  position: absolute;
  top: 50%;
  left: 10px;
  margin-top: -6px;
  font-size: 12px;
  content: '▶︎';
}


/*-----------------------------------------------
 goods
-----------------------------------------------*/
#goods {
  padding-bottom: 36px;
  background: url("../img/comic/bg.png") no-repeat bottom center #fff;
}

#goods .sp {
  display: none;
}
#goods .inner {
  width: 1200px;
  margin: 0 auto;
}
#goods .inner h2 {
  margin-bottom: 40px;
}
#goods .inner div.image{ 
    text-align: center;   
}
#goods .inner p{
margin:0 auto;
}
#goods .inner p.goodsbtn{
position: relative;
padding-left: 25px;
width: 340px;
margin-top: 50px;
margin-bottom: 50px;
}

#goods .inner p.goodsbtn a{
　display: block;
  height: 34px;
  padding: 14px 80px;
  border-radius: 4px;
  background-color: #e03795;
  box-shadow: 2px 3px #adadad;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease; 
}
#goods .inner p.goodsbtn :hover{
    opacity: 0.8;
}
#goods .inner .block p.goodsbtn{
  position: relative;
  padding-left: 30px;
  color: #fff;
}
#goods .inner .block p.goodsbtn::before { /* 三角形の表示設定 */
  content: '▶︎';
  position: absolute;
　top: 5%;
  left: 50px; 
  margin-top: 4px;
  width: 0;
  height: 0;
  font-size: 12px;
}
#goods .inner p.fs14{
    font-size: 14px;
    text-align: center;
    margin: 20px 0;
}
/*-----------------------------------------------
 footer
-----------------------------------------------*/
#footer {
  padding: 1px 0 100px;
  background-color: #ccb694;
}

#footer .banner {
  margin-bottom: 20px;
  background-color: #fff;
  font-size: 0;
  text-align: center;
}

#footer .banner li {
  display: inline-block;
}

#footer small {
  display: block;
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

/*-----------------------------------------------
 navigation
-----------------------------------------------*/
#navigation {
  z-index: 20;
  position: fixed;
  bottom: 0;
  width: 100%;
  background: url("../img/navigation/bg.png");
}

#navigation .inner {
  position: relative;
  width: 1200px;
  margin: 0 auto;
  padding: 5px 0;
  text-align: right;
}

#navigation .inner .logo {
  position: absolute;
  bottom: 0;
  left: 0;
}

#navigation .inner .gnav {
  display: inline-block;
  margin-right: 5px;
  vertical-align: top;
}

#navigation .inner .gnav li {
  display: inline-block;
  border-right: 1px solid #fff;
  font-size: 16px;
  line-height: 68px;
}

#navigation .inner .gnav li a {
  display: block;
/*  padding: 0 20px;*/
  padding: 0 17px;
  color: #fff;
}

#navigation .inner .gnav li:first-child {
  border-left: 1px solid #fff;
}

#navigation .inner .sns {
  display: inline-block;
  font-size: 0;
  vertical-align: top;
}

#navigation .inner .sns li {
  display: inline-block;
  padding: 12px 4px 0;
}

#navigation .inner .menu {
  display: none;
}

@media only screen and (max-width: 768px) {
  body {
    min-width: 0;
  }
  body {
    background-image: none;
  }
  #keyvisual img {
    width: 100%;
  }
  #keyvisual .bg {
    display: none;
  }
  #keyvisual .inner {
    width: auto;
  }
  #keyvisual .inner .logo {
    top: 1.5%;
    left: 2%;
    width: 28%;
  }
  #keyvisual .inner h1 {
    top: 4.5%;
    left: 2%;
    width: 35.2%;
  }
  #keyvisual .inner h1 img {
    width: 100%;
  }
  #keyvisual .inner .catch01 {
    top: 1%;
    right: 2%;
    width: 7%;
  }
  #keyvisual .inner .catch02 {
    top: 4%;
    right: 4.7%;
    width: 17%;
  }
  #keyvisual .inner .kv-image {
    position: relative;
  }
  #keyvisual .inner .btns {
    top: 104vw;
    left: 75%;
    width: 52%;
  }
  #keyvisual .inner .btns ul {
    font-size: 0
  }
  #keyvisual .inner .btns ul li {
    margin-bottom:5%;
    width: 45%;
    height: 9.2vw;
    }
  #keyvisual .inner .btns ul li a {
  width: 90%;
    padding-left: 10%;
    font-size: 3.6vw;
    font-weight: bold;
    height: 100%;
    line-height: 9.2vw;
    }
    #keyvisual .inner .btns ul li a::before {
    top: 0;
    left: 6px;
    font-size: 1.8vw;
    }
  #keyvisual .inner #information {
    top: 63.5%;
    left: 0;
    width: 100%;
    height: 23%;
    background-image: url(../img/keyvisual/bg-information-sp.png);
    background-size: cover;
  }
  #keyvisual .inner #information ul {
    top: 28%;
    left: 3%;
    width: 100%;
    height: 64%;
  }
  #keyvisual .inner #information ul li {
    padding: 1% 0 2%;
    font-size: 16px;
    font-size: 2.08333vw;
  }
  #keyvisual .inner #information ul li time {
    font-size: 14px;
    font-size: 1.82292vw;
  }
  #keyvisual .inner #information ul li time::after {
    position: absolute;
    top: 132%;
    left: 0;
    color: #000;
    font-size: 10px;
    font-size: 1.30208vw;
    content: '▶︎';
  }
  #keyvisual .inner #information ul li a {
    display: block;
  }
  #twitter::before {
    display: block;
    position: static;
    top: 0;
    width: auto;
    height: auto;
    background-image: none;
    content: "";
  }
  #twitter h2 {
    margin-bottom: 1%;
    text-align: center;
  }
  #twitter img {
    width: 100%;
  }
  #twitter .inner {
    width: auto;
  }
  #twitter .timeline {
    width: 94.4%;
    padding: 2% 3.2% 3.2%;
    background-color: #d3b9de;
  }
  #twitter .timeline p {
    margin-bottom: 1%;
    text-align: center;
  }
  #twitter .timeline iframe {
    height: 64.8vw !important;
    width: 740px !important;
  }
  #pv h2 {
    margin-bottom: 1.5%;
  }
  #pv h2 img {
    width: 100%;
  }
  #pv .inner {
    width: auto;
  }
  #pv #main-movie {
    position: relative;
    width: 94.375%;
    height: 0;
    margin: 0 auto 4%;
    padding: 54% 0 0;
  }
  #pv #main-movie iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    transform: translate(-50%, -50%);
    border: 2px solid #fcbcd3;
  }
  #pv .movie-list {
    margin-bottom: 6.5%;
  }
  #pv .movie-list ul {
    width: 84.6875%;
  }
  #pv .movie-list ul li {
    transform: scale(0.8);
  }
  #pv .movie-list ul li p {
    font-size: 15px;
    font-size: 1.95313vw;
  }
  #pv .movie-list ul li.slick-current a {
    box-shadow: 0 0 5px 1px rgba(252, 188, 211, 0.8);
  }
  #pv .movie-list .slick-prev {
    left: 3%;
  }
  #pv .movie-list .slick-next {
    right: 3%;
  }
  #pv .movie-list .slick-arrow {
    top: calc(50% + 10px - 5px - 1em);
    width: 2.1875%;
    height: 0;
    padding-top: 3.75%;
    background-size: 100% auto;
  }
  #story {
    height: auto;
    margin-top: 0%;
    padding-bottom: 14%;
    background: url("../img/story/bg-sp.png") top center no-repeat;
    background-size: cover;
  }
  #story .inner {
    width: auto;
    padding-top: 15%;
  }
  #story .inner img {
    width: 100%;
  }
  #character {
    margin-bottom: 2%;
  }
  #character .sp {
    display: block;
  }
  #character .pc {
    display: none;
  }
  #character img {
    width: 100%;
  }
  #character .inner {
    width: auto;
  }
  #character .inner h2 {
    margin-bottom: 6%;
  }
  #character .inner .list1 li {
    width: 45.3%;
    margin: 0 2%;
  }
  #character .inner .list1 li:nth-child(1) .image::after {
    top: 92%;
    right: -10%;
    width: 12.2%;
    height: 11.2%;
    background-size: cover;
  }
  #character .inner .list1 li .image {
    margin-bottom: 4%;
  }
  #character .inner .list1 li p {
    font-size: 18px;
    font-size: 2.34375vw;
  }
  #character .inner .list2 li {
    width: 36.5%;
    margin: 0 0 5%;
    vertical-align: top;
  }
  #character .inner .list2 li:nth-child(1) {
    margin: 0 15% 5% 0;
  }
  #character .inner .list2 li:nth-child(1) .image::after {
    top: 57%;
    right: -28%;
    width: 15%;
    height: 13%;
    background-size: cover;
  }
  #character .inner .list2 li:nth-child(2) .image::after {
    display: none;
  }
  #character .inner .list2 li:nth-child(3) .image {
    position: relative;
  }
  #character .inner .list2 li:nth-child(3) .image::before {
    display: block;
    position: absolute;
    top: 43%;
    left: -48%;
    width: 15%;
    height: 15%;
    background: url("../img/character/decoration.png") no-repeat top center;
    background-size: cover;
    content: "";
  }
  #character .inner .list2 li:nth-child(3) .image::after {
    display: block;
    position: absolute;
    top: 43%;
    right: -48%;
    width: 15%;
    height: 15%;
    background: url("../img/character/decoration.png") no-repeat top center;
    background-size: cover;
    content: "";
  }
  #character .inner .list2 li .image {
    margin-bottom: 4%;
  }
  #character .inner .list2 li p {
    font-size: 18px;
    font-size: 2.34375vw;
  }
  #books{
    margin-bottom: 36px;
  }
  #books .inner {
    width: auto;
  }
  #books .inner h2 {
    margin-bottom: 30px;
    padding: 5px 0;
    font-size: 36px;
    font-size: 4.6875vw;
  }
  #books .inner .book {
    width: auto;
    margin-bottom: 0;
  }
  #books .inner .book .cover {
    width: 60%;
    margin: 0 auto 30px;
    float: none;
  }
  #books .inner .book .cover img {
    width: 100%;
  }
  #books .inner .book .detail {
    width: auto;
    margin: 0 20px;
    float: none;
  }
  #books .inner .book .detail h3 {
    margin-bottom: 4%;
    padding-bottom: 6%;
    font-size: 48px;
    font-size: 6.25vw;
  }
  #books .inner .book .detail .catch {
    font-size: 23px;
    font-size: 2.99479vw;
  }
  #books .inner .book .detail .story {
    font-size: 20px;
    font-size: 2.60417vw;
  }
  #books .inner .book .detail .links {
    width: auto;
  }
  #books .inner .book .detail .links li {
    display: block;
    margin-bottom: 4%;
  }
  #books .inner .book .detail .links li a {
    width: 100%;
    padding: 3% 0;
    border-radius: 4px;
    font-size: 28px;
    font-size: 3.64583vw;
    font-weight: bold;
    text-align: center;
  }
  #books .inner .book .detail .links li a::before {
    top: 50%;
    left: 3%;
  }
  #books .inner .store {
    width: auto;
    margin: 0 20px 40px;
  }
  #books .inner .store h3 {
    padding-left: 3%;
    font-size: 28px;
    font-size: 3.64583vw;
  }
  #books .inner .store h3::before {
    top: 2%;
    left: 34%;
    width: 4.5%;
    height: 100%;
    background-size: contain;
  }
  #books .inner .store h3::after {
    top: 32%;
    right: 5%;
    width: 2.5%;
    height: 38%;
    background-size: contain;
  }
  #books .inner .store h3.active::after {
    top: 32%;
    right: 5%;
    width: 2.5%;
    height: 38%;
    background-size: contain;
  }
  #books .inner .store .storeLinks .banner li {
    width: 50%;
  }
  #books .inner .bnr img{
  width: 90%;
}
  #comic .sp {
    display: block;
  }
  #comic img {
    max-width: 100%;
  }
  #comic .inner {
    width: auto;
  }
  #comic .inner .block .txt {
    top: -4%;
    left: 0;
  }
  #comic .inner .block .detail {
    top: 62%;
    right: 0;
    width: 94.5%;
    margin: 0 2.8%;
    padding: 4%;
    font-size: 0;
  }
  #comic .inner .block .detail .cover {
    width: 44.4%;
    margin-right: 2.3%;
  }
  #comic .inner .block .detail .text {
    width: 53.2%;
  }
  #comic .inner .block .detail .text p {
    font-size: 16px;
    font-size: 2.08333vw;
  }
  #comic .inner .block .detail .text p.release {
    font-size: 26px;
    font-size: 3.38542vw;
  }
  #comic .inner .block .detail .text p.title {
    font-size: 38px;
    font-size: 4.94792vw;
    line-height: 1.2;
  }
  #comic .inner .block .detail .text p.note {
    font-size: 16px;
    font-size: 2.08333vw;
  }
  #comic .inner .block .detail .btn {
    top: 50%;
    left: 47.5%;
    width: 50%;
  }
  #comic .inner .block .detail .btn a {
    height: auto;
    padding: 5% 0 4%;
    font-size: 28px;
    font-size: 3.64583vw;
  }
  #movie img {
    max-width: 100%;
  }
  #movie h2 {
    margin-bottom: 1%;
  }
  #movie .inner {
    width: auto;
  }
  #movie .inner .txt{
  text-align: center;
  margin-top: 5%;
}
  #movie .inner p.moviebtn{
  width:70%;
  margin: 5% auto;
}
    #anime img {
    max-width: 100%;
  }
  #anime h2 {
    margin-bottom: 1.5%;
  }
  #anime .inner {
    width: auto;
  }
  #anime .youtube {
    position: relative;
    width: 94.375%;
    height: 0;
    margin: 0 auto 4%;
    padding: 54% 0 0;
  }
  #anime .youtube iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    transform: translate(-50%, -50%);
    border: 2px solid #fcbcd3;
  }
#anime .inner ul.animebtn {
  font-size: 0;
  text-align: center;
  margin: 0 0 20px 0;
}

#anime .inner ul.animebtn li {
  display:inline-block;
  margin:0 2% 5% 0;
  width:45%;
}
    #anime .inner ul.animebtn li:last-child{
    margin-right:0;    
    } 

#anime .inner p {
  font-size: 16px;
}
#anime .youtube2 {
  position: relative;
    width: 94.375%;
    height: 0;
    margin: 0 auto 4%;
    padding: 54% 0 0;
}
#anime .youtube2 iframe{
  position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    transform: translate(-50%, -50%);
    border: 2px solid #fcbcd3;
    }
  #anime{
    margin-bottom: 36px;
  }
    
  #rodoku .sp {
    display: block;
  }
  #rodoku img {
    max-width: 100%;
  }
  #rodoku .inner {
    width: auto;
  }
  #rodoku .inner .block .txt {
    top: 11vw;
    left: 3.75vw;
    width: 93.75vw;
  }
  #rodoku .inner .block .detail {
   top: 102vw;
    left: 3vw;
    width: 94.5%;
    text-align: center;
    margin: 0 auto;
  }
  #rodoku .inner .block .detail p {
    font-size: 27px;
    font-size: 4.219vw;
    text-align: center;
    margin: 0;
  }
  #rodoku .inner .block .detail p:nth-child(3) {
    text-indent: 2em;
  }
  #rodoku .inner .block .detail p span.stxt {
    font-size: 21px;
    font-size: 3.281vw;   
  }
  #rodoku .inner .block .detail p span.cast {
    font-size: 36px;
    font-size: 5.625vw;
    color: #206a69;
    font-weight: bold;
  }
  #rodoku .inner .block .detail .btn {
    position: static;
/*    top: 30vw;
    left: 0;*/
    width: 45.312vw;
    margin: 5.625vw auto 0;
  }
  #rodoku .inner .block .detail .btn a {
    height: auto;
    padding: 5% 0 4%;
    font-size: 28px;
    font-size: 3.64583vw;
  }
  
  #goods .sp {
    display: block;
  }
  #goods img {
    max-width: 100%;
  }
  #goods .inner {
    width: auto;
  }

#goods .inner .block p.goodsbtn{
position: static;
width: 45.312vw;
margin:5vw auto;
padding-left: 0;
    
}
#goods .inner .block p.goodsbtn::before {
    content: '▶︎';
    position: absolute;
    top: 4%;
    left: 40px;
    margin-top: 3px;
    width: 0;
    height: 0;
    font-size: 12px;
}
#goods  .inner .block p.goodsbtn a {
    height: auto;
    padding: 5% 24%;
    font-size: 28px;
    font-size: 3.64583vw;
    
  }

  #footer {
    padding: 1px 0 80px;
  }
  #footer .banner li {
    width: 50%;
  }
  #footer .banner li img {
    width: 100%;
  }
  #footer small {
    font-size: 24px;
    font-size: 3.125vw;
  }
  #navigation .inner {
    width: 100%;
    padding: 0 0 45px 0;
  }
  #navigation .inner .logo {
    width: 46.5%;
  }
  #navigation .inner .logo img {
    width: 100%;
  }
  #navigation .inner .gnav {
    display: none;
    margin-right: 0;
  }
  #navigation .inner .gnav li {
    display: block;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
    font-size: 24px;
    font-size: 3.125vw;
    line-height: 1;
    text-align: center;
  }
  #navigation .inner .gnav li a {
    padding: 10px 0;
  }
  #navigation .inner .gnav li:first-child {
    border-left: none;
  }
  #navigation .inner .sns {
    display: none;
    padding: 10px 0 6.5%;
    text-align: center;
  }
  #navigation .inner .sns li {
    padding: 0 4px;
  }
  #navigation .inner #menu {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 45px;
    height: 45px;
    background-image: url(../img/navigation/menu.png);
    background-size: 45px;
  }
  #navigation .inner #close {
    display: block;
    position: absolute;
    right: 0;
    bottom: -100px;
    width: 45px;
    height: 45px;
    background-image: url(../img/navigation/close.png);
    background-size: 45px;
  }
}