@charset "UTF-8";

.mainCol {
  text-align: center
}

.mainCol nav.topGNav ul {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  z-index: 1
}

.mainCol .bnrCol {
  width: 100%;
  overflow: hidden
}

.mainCol .bnrCol .bxslider li[aria-hidden=true] {
  opacity: .4;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"
}

.bx-wrapper {
  margin: 0 auto
}

.bx-wrapper a.bx-prev,
.bx-wrapper a.bx-next {
  width: 59px;
  height: 59px;
  background-position: center center;
  background-size: contain;
  z-index: 50;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}

.bx-wrapper a.bx-prev:hover,
.bx-wrapper a.bx-prev:focus,
.bx-wrapper a.bx-next:hover,
.bx-wrapper a.bx-next:focus {
  background-position: center center
}

.bx-wrapper a.bx-prev:hover,
.bx-wrapper a.bx-next:hover {
  opacity: .5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"
}

.bx-wrapper a.bx-prev {
  background-image: url(../images/common/btn_prev.png)
}

.bx-wrapper a.bx-next {
  background-image: url(../images/common/btn_next.png)
}

.mainCol .bx-viewport {
  overflow: visible !important
}

#topics .btnCol .btn {
  max-width: none
}

#topics .btnCol .btnMoreR a {
  background-image: url(../images/top/ico_01.jpg);
  background-position: center left 10px;
  background-repeat: no-repeat
}

#topics ul:not(.btnCol) {
  position: relative
}

#topics ul:not(.btnCol) li {
  position: relative;
  max-width: 235px
}

#topics ul:not(.btnCol) li.new:before {
  display: block;
  position: absolute;
  content: '';
  top: -17.5px;
  left: -10px;
  width: 60px;
  height: 35px;
  background: url(../images/common/ico_new.png) center top no-repeat;
  background-size: 100%;
  pointer-events: none;
  z-index: 10
}

#topics ul:not(.btnCol) li a {
  display: block;
  text-decoration: none
}

#topics ul:not(.btnCol) li a:hover .thumb {
  opacity: .7;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  border: 1px solid #f899ab
}

#topics ul:not(.btnCol) li a .thumb {
  transition: all .2s ease;
  border: 1px solid #ececec;
  overflow: hidden;
  height: 236px;
  position: relative
}

#topics ul:not(.btnCol) li a .thumb img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  max-height: auto;
  height: auto;
  max-width: 100%
}

#topics ul:not(.btnCol) li dl {
  text-align: left
}

#topics ul:not(.btnCol) li dl dt {
  margin-top: 12px;
  margin-top: .75rem;
  font-size: 13px;
  font-size: 20.8px;
  font-size: 1.3rem;
  line-height: 1.53846
}

#topics ul:not(.btnCol) li dl dt.new {
  position: relative
}

#topics ul:not(.btnCol) li dl dt.new:after {
  position: absolute;
  right: 0;
  color: #f899ab;
  content: "new"
}

#topics ul:not(.btnCol) li dl dt span {
  font-size: 10px;
  font-size: 16px;
  font-size: 1rem;
  line-height: 2;
  background: #f899ab;
  padding: 2px 5px;
  border-radius: 100px;
  color: #fff;
  margin-left: 8px;
  margin-left: .5rem
}

#topics ul:not(.btnCol) li dl dd {
  margin-top: 4px;
  margin-top: .25rem;
  font-weight: 700
}

#comic:after {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  content: ''
}

#comic .comicCol {
  border-style: solid;
  border-image: url(../images/common/bg_frame.png) 8 fill repeat;
  border-width: 8px;
  box-sizing: border-box;
  position: relative;
  height: 0;
  overflow: hidden
}

#comic .comicCol img {
  position: relative
}

#goods:after {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  content: ''
}

#goods ul {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap
}

#goods ul li {
  position: relative
}

#shop {
  .entry-content {
    img {
      height: auto;
    }
  }
}

#shop:after {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  content: ''
}

#shop .update {
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  background-image: url(../images/top/border_update.png);
  background-position: right bottom;
  background-repeat: no-repeat;
  text-align: right
}

#shop .shopList ul li {
  box-sizing: border-box
}

#shop .shopList ul li a {
  display: block;
  position: relative;
  text-align: left
}

#shop .shopList ul li a:before {
  display: block;
  position: relative;
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-top: 1px solid rgba(158, 150, 147, .5);
  border-right: 1px solid rgba(158, 150, 147, .5);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transition: .2s all;
  margin-right: .75em;
  top: -2px
}

#shop .bnrCol {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center
}

#movie {
  pointer-events: none
}

#movie:after {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  content: ''
}

#movie .movieCol {
  border-style: solid;
  border-image: url(../images/common/bg_frame.png) 8 fill repeat;
  border-width: 8px;
  box-sizing: border-box
}

#movie .movieCol a {
  display: block;
  position: relative
}

#movie .movieCol a:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: '';
  background-image: url(../images/top/movie/btn_start.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-pointer-events: none
}

#about .charaCol {
  -webkit-transform: none !important;
  transform: none !important
}

#about .charaCol.thumbnail {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center
}

#about .charaCol.thumbnail li a {
  display: block;
  position: relative
}

.author {
  margin-top: 64px;
  margin-top: 4rem
}

header headerInner {
  display: none
}

.fBorder.topFrame {
  top: auto;
  bottom: auto
}

.frameCnt {
  position: absolute
}

.spCnt .btnMenu {
  display: none
}

.headerWrap {
  display: none
}

.topSns {
  display: flex;
  justify-content: center;
}

@media screen and (max-width:768px) {
  .mainCol {
    padding-top: 2vw;
    overflow: hidden
  }

  .mainCol h1 {
    width: 80%;
    margin: auto
  }

  .mainCol nav.topGNav {
    margin-top: 6vw
  }

  .mainCol nav.topGNav ul {
    padding: 0 4vw
  }

  .mainCol nav.topGNav ul li {
    margin: 0 2vw;
    width: calc(33.33% - 4vw)
  }

  .mainCol .bnrCol .bxslider {
    margin-top: 6vw
  }

  .bx-wrapper a.bx-prev {
    left: 1vw
  }

  .bx-wrapper a.bx-next {
    right: 1vw
  }

  #topics ul:not(.btnCol) li {
    margin: 3rem auto 0
  }

  #topics ul:not(.btnCol) {
    margin: 6vw auto 0
  }

  .topSns {
    display: block;
  }

  .twitterInner {
    margin: 0 auto 50px;
    overflow: hidden;
  }

  .twitterInner .twitter-timeline {
    width: 90% !important;
    height: 80vw !important
  }

  #twitter .btnCol {
    margin-top: 6vw
  }

  #comic .comicCol {
    margin: 6vw auto 0;
    width: 100%;
    padding-bottom: calc(65%)
  }

  #comic .comicCol img {
    max-width: calc(100% + 20px);
    width: calc(100% + 20px);
    left: -10px;
    top: -10px
  }

  #goods ul {
    -webkit-justify-content: center;
    justify-content: center;
    margin-top: 6vw
  }

  #goods ul li {
    margin: 1vw
  }

  #shop .update {
    margin-top: 1em
  }

  #shop .shopList {
    margin-top: calc(6vw - 15px)
  }

  #shop .shopList ul {
    margin-top: calc(6vw/2)
  }

  #shop .shopList ul:first-child {
    margin-top: 0
  }

  #shop .shopList ul li {
    border-bottom: 1px dotted rgba(158, 150, 147, .5)
  }

  #shop .shopList ul li:last-child {
    border: none
  }

  #shop .shopList ul li a {
    text-align: left;
    padding: .75em
  }

  #shop .bnrCol {
    margin-top: 6vw
  }

  #shop .bnrCol li {
    margin: 1vw
  }

  #movie .movieCol {
    margin-top: 6vw;
    padding: 2vw
  }

  #movie .movieCol a:after {
    background-size: 30%
  }

  #about .readCol {
    margin-top: 6vw
  }

  #about .charaCol.thumbnail li a.active:after {
    width: 62px;
    height: 62px;
    content: "";
    display: block;
    position: absolute;
    top: 5px;
    left: 6px;
    background: rgba(248, 153, 171, .5);
    border-radius: 100px
  }

  #about .bx-wrapper {
    margin-top: 6vw
  }

  #about .bx-controls {
    margin-top: calc(6vw/2)
  }

  .author a {
    margin-top: .5rem;
    display: block
  }

  .fBorder.topFrame {
    left: calc(1.5vw - 4px);
    right: calc(1.5vw - 4px)
  }

  .wrapColInner {
    margin-top: 6vw;
    padding: 80px 4vw 0
  }
}

@media screen and (min-width:769px) {
  .mainCol {
    padding-top: 20px
  }

  .mainCol h1 {
    min-width: 1080px
  }

  .mainCol nav.topGNav {
    margin-top: 30px
  }

  .mainCol nav.topGNav ul {
    margin: 0 auto;
    padding: 0 40px;
    max-width: 1080px;
    min-width: 1080px
  }

  .mainCol nav.topGNav ul li {
    margin-right: 50px
  }

  .mainCol nav.topGNav ul li:last-child {
    margin-right: 0
  }

  .mainCol .bnrCol {
    min-width: 1080px
  }

  .mainCol .bnrCol .bxslider {
    margin-top: 60px
  }

  .bx-wrapper a.bx-prev {
    left: -40px
  }

  .bx-wrapper a.bx-next {
    right: -40px
  }

  #topics ul:not(.btnCol) {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
  }

  #topics ul:not(.btnCol) li {
    width: calc((100% - 40px)/3);
    margin-right: 20px;
    margin-top: 20px
  }

  #topics ul:not(.btnCol) li:nth-child(3n) {
    margin-right: 0
  }

  #topics ul:not(.btnCol) li:first-child,
  #topics ul:not(.btnCol) li:nth-child(2),
  #topics ul:not(.btnCol) li:nth-child(3) {
    margin-top: 0
  }

  #topics ul:not(.btnCol) {
    margin: 60px auto 0
  }

  #topics ul:not(.btnCol) li {
    width: calc((100% - 60px)/4);
    margin-right: 20px;
    margin-top: 20px
  }

  #topics ul:not(.btnCol) li:nth-child(3n) {
    margin-right: 20px
  }

  #topics ul:not(.btnCol) li:nth-child(4n) {
    margin-right: 0
  }

  #topics ul:not(.btnCol) li:first-child,
  #topics ul:not(.btnCol) li:nth-child(2),
  #topics ul:not(.btnCol) li:nth-child(3),
  #topics ul:not(.btnCol) li:nth-child(4) {
    margin-top: 0
  }

  .twitterInner {
    display: -webkit-flex;
    display: flex;
    min-height: 608px
  }

  #twitter .btnCol {
    -webkit-align-self: center;
    -ms-grid-row-align: center;
    align-self: center
  }

  #comic:after {
    background-image: url(../images/top/bg_illust_01.jpg);
    background-position: right top;
    background-repeat: no-repeat;
    pointer-events: none;
    left: 0;
    right: 0;
    top: -9px
  }

  #comic .comicCol {
    margin: 60px auto 0;
    width: 77%;
    padding-bottom: calc(50%)
  }

  #comic .comicCol img {
    max-width: calc(100% + 40px);
    width: calc(100% + 40px);
    left: -20px;
    top: -20px
  }

  #goods:after {
    background-image: url(../images/top/bg_illust_02.jpg);
    background-position: left top;
    background-repeat: no-repeat;
    pointer-events: none;
    left: 0;
    right: 0;
    top: 56px
  }

  #goods ul {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    margin-top: 60px
  }

  #goods ul li {
    margin-right: 20px;
    margin-bottom: 20px;
    width: calc((100% - 80px)/5)
  }

  #goods ul li:nth-child(5n) {
    margin-right: 0
  }

  #goods ul li:last-child,
  #goods ul li:nth-last-child(2),
  #goods ul li:nth-last-child(3) {
    margin-bottom: 0
  }

  #shop:after {
    background-image: url(../images/top/bg_illust_03.jpg);
    background-position: right top;
    background-repeat: no-repeat;
    pointer-events: none;
    left: 0;
    right: 0;
    top: 0
  }

  #shop .shopList {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    margin: 30px 0
  }

  #shop .shopList ul li {
    border-radius: 20px
  }

  #shop .shopList ul li:nth-child(odd) {
    background-color: rgba(255, 244, 118, .3)
  }

  #shop .shopList ul li a {
    padding: .75em 8em
  }

  #shop .bnrCol {
    margin-top: 60px
  }

  #shop .bnrCol li {
    margin-top: 10px
  }

  #movie:after {
    background-image: url(../images/top/bg_illust_04.jpg);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 29%;
    left: 0;
    right: 0;
    top: 30px
  }

  #movie .movieCol {
    margin-top: 60px;
    padding: 20px
  }

  #about .readCol {
    margin-top: 60px
  }

  #about .charaCol.thumbnail li a.active:after,
  #about .charaCol.thumbnail li a:hover:after {
    width: 62px;
    height: 62px;
    content: "";
    display: block;
    position: absolute;
    top: 5px;
    left: 6px;
    background: rgba(248, 153, 171, .5);
    border-radius: 100px
  }

  #about .bx-wrapper {
    margin-top: 60px
  }

  #about .bx-controls {
    margin-top: calc(60px/2)
  }

  .author a {
    margin-left: 1.5rem;
    display: inline-block
  }

  .fBorder.topFrame {
    left: calc(15px - 4px);
    right: calc(15px - 4px)
  }

  .wrapColInner {
    margin-top: 60px
  }
}