/* Slider */
.slick-slider {
  position: relative;
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
}
.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}
[dir="rtl"] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

.slick-prev,
.slick-next {
  position: absolute;
  top: 50%;
  height: 58px;
  width: 36px;
  cursor: pointer;
  display: block;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.6);
  background-repeat: no-repeat;
  background-position: center center;
  color: transparent;
  top: 50%;
  margin-top: -29px;
  padding: 0;
  border: none;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  z-index: 10;
}
.slick-prev:active,
.slick-next:active {
  outline: none;
  background-color: #929292;
  color: transparent;
}
.slick-prev.slick-disabled,
.slick-next.slick-disabled {
  opacity: .5;
}

.slick-prev {
  background-image: url('../images/icon/arrow-prev-s.png?1627461594');
  border-radius: 0 10px 10px 0;
  left: 0;
}

.slick-next {
  background-image: url('../images/icon/arrow-next-s.png?1627461594');
  border-radius: 10px 0 0 10px;
  right: 0;
}

#main {
  padding: 0;
}

#global-header,
#banners,
#other {
  z-index: 10;
}

#global-nav {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 20px rgba(0, 0, 0, 0.3);
  z-index: 10;
  position: relative;
}

#masthead {
  position: relative;
  min-width: 984px;
  height: 720px;
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  padding-top: 30px;
}

#keyvisual {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  min-width: 1280px;
}

.keyvisual_bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center top;
}

.keyvisual_bg {
  left: 60px;
  top: 30px;
  background-image: url("/pc/images/top/key/key_bg.png");
  z-index: 0;
}

/*
.keyvisual_catchcopy {
  background: url('/pc/images/top/key/catchcopy.png') no-repeat 0 0;
  position:absolute;
  width: 552px;
  height: 71px;
  z-index: 1;
  top: 50px;
  left: 0;
  right: 0;
  margin: 0 auto;
  font-size: 0;
  color: rgba(0,0,0,0);
}
*/
#character {
  background: url("/pc/images/top/bg-outside.jpg") no-repeat center center;
  background-size: cover;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: 2;
  display: none;
}

#character {
  position: relative;
}

#masthead #masthead-content {
  display: block;
  position: relative;
  min-width: 768px;
  max-width: 1480px;
  height: 100%;
  margin: 0 auto;
}
#masthead #masthead-content .content-link {
  position: absolute;
  bottom: 66px;
  left: 24px;
  z-index: 10;
}
#masthead #masthead-content .content-link__item {
  display: block;
  overflow: hidden;
  margin-bottom: 12px;
}

.content-link__item img {
  max-width: 298px;
  display: block;
}

.store {
  padding: 8px 0 16px 136px;
  background: url('../images/top/banner/icon.png?1627461594') no-repeat 0 8px;
  height: 146px;
  font-size: 0px;
}
.store a {
  zoom: 0.910;
}

.store__ios {
  margin: 10px 0 8px;
}

#banners {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  height: 64px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-flex-flow: row;
  flex-flow: row;
}

.banners__item {
  width: 276px;
  height: 56px;
  border-radius: 12px;
  margin: 4px 8px;
  padding: 2px;
  border: solid 2px transparent;
  cursor: pointer;
}
.banners__item img {
  display: block;
  width: 268px;
  height: 48px;
}
.banners__item.is-active {
  border: solid 2px #00d8ff;
}

#other {
  position: absolute;
  right: 20px;
  bottom: 84px;
}

#character-detail {
  position: relative;
  width: 984px;
  height: 720px;
  margin: 0 auto;
  overflow: hidden;
}
#character-detail .modal-btn--prev {
  left: 100px;
}
#character-detail .modal-btn--next {
  right: 100px;
}
#character-detail .content-title {
  position: absolute;
  left: 473px;
  top: 120px;
  color: transparent;
  width: 320px;
  height: 124px;
  z-index: 1;
}
#character-detail .character-voice {
  position: absolute;
  left: 473px;
  top: 300px;
  width: 320px;
  background: #fff no-repeat center 16px;
  border-radius: 12px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  padding: 148px 32px 96px;
}

.character-detail__body {
  display: block;
  width: 540px;
  height: 700px;
  position: absolute;
  left: 120px;
  bottom: 0px;
}

.voice-message {
  position: absolute;
  bottom: 16px;
  left: 32px;
  right: 32px;
  background: #00d8ff;
  color: #fff;
  height: 60px;
  display: flex;
  padding: 0 0 0 20px;
  border-radius: 30px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  cursor: pointer;
}
.voice-message.jp-playing {
  background-color: #ff0066;
}
.voice-message > .text {
  color: transparent;
  background: url('../images/top/character/cv-message.png?1627461594') no-repeat 0 0;
  width: 174px;
  height: 60px;
}
.voice-message.disable {
  background: #d8d8d8;
  cursor: default;
  padding: 0;
}
.voice-message.disable > .text {
  background: url('../images/top/character/cv-message_disable.png?1627461594') no-repeat 0 0;
  width: 185px;
  height: 60px;
  margin: auto;
}

.btn-voice {
  position: relative;
  display: block;
  background-color: #00d8ff;
  width: 64px;
  height: 64px;
  border-radius: 32px;
  cursor: pointer;
}
.btn-voice .icon {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.btn-voice.jp-playing {
  background-color: #ff0066;
}
.btn-voice:hover {
  background-color: #ff0066;
}

#yuki_miyaka .content-title {
  background: url('../images/top/character/1-name.png?1627461594') no-repeat 0 0;
}
#yuki_miyaka .character-voice {
  background-image: url('../images/top/character/1-msg.png?1627461594');
}

#arimura_shion .content-title {
  background: url('../images/top/character/2-name.png?1627461594') no-repeat 0 0;
}
#arimura_shion .character-voice {
  background-image: url('../images/top/character/2-msg.png?1627461594');
}

#mano_sakurako .content-title {
  background: url('../images/top/character/3-name.png?1627461594') no-repeat 0 0;
}
#mano_sakurako .character-voice {
  background-image: url('../images/top/character/3-msg.png?1627461594');
}

#tachibana_naomi .content-title {
  background: url('../images/top/character/4-name.png?1627461594') no-repeat 0 0;
}
#tachibana_naomi .character-voice {
  background-image: url('../images/top/character/4-msg.png?1627461594');
}

#orimiya_yui .content-title {
  background: url('../images/top/character/5-name.png?1627461594') no-repeat 0 0;
}
#orimiya_yui .character-voice {
  background-image: url('../images/top/character/5-msg.png?1627461594');
}

#tendo_machi .content-title {
  background: url('../images/top/character/6-name.png?1627461594') no-repeat 0 0;
}
#tendo_machi .character-voice {
  background-image: url('../images/top/character/6-msg.png?1627461594');
}

#asahina_nono .content-title {
  background: url('../images/top/character/7-name.png?1627461594') no-repeat 0 0;
}
#asahina_nono .character-voice {
  background-image: url('../images/top/character/7-msg.png?1627461594');
}

#mizushima_airi .content-title {
  background: url('../images/top/character/8-name.png?1627461594') no-repeat 0 0;
}
#mizushima_airi .character-voice {
  background-image: url('../images/top/character/8-msg.png?1627461594');
}

#hirose_koharu .content-title {
  background: url('../images/top/character/9-name.png?1627461594') no-repeat 0 0;
}
#hirose_koharu .character-voice {
  background-image: url('../images/top/character/9-msg.png?1627461594');
}

#hiiragi_tsumugi .content-title {
  background: url('../images/top/character/10-name.png?1627461594') no-repeat 0 0;
}
#hiiragi_tsumugi .character-voice {
  background-image: url('../images/top/character/10-msg.png?1627461594');
}

#saionji_rei .content-title {
  background: url('../images/top/character/11-name.png?1627461594') no-repeat 0 0;
}
#saionji_rei .character-voice {
  background-image: url('../images/top/character/11-msg.png?1627461594');
}

#sylvia_richter .content-title {
  background: url('../images/top/character/12-name.png?1627461594') no-repeat 0 0;
}
#sylvia_richter .character-voice {
  background-image: url('../images/top/character/12-msg.png?1627461594');
}

#agatsuma_ren .content-title {
  background: url('../images/top/character/14-name.png?1627461594') no-repeat 0 0;
}
#agatsuma_ren .character-voice {
  background-image: url('../images/top/character/14-msg.png?1627461594');
}

#momoi_hina .content-title {
  background: url('../images/top/character/15-name.png?1627461594') no-repeat 0 0;
}
#momoi_hina .character-voice {
  background-image: url('../images/top/character/15-msg.png?1627461594');
}

#onitsuka_chiho .content-title {
  background: url('../images/top/character/16-name.png?1627461594') no-repeat 0 0;
}
#onitsuka_chiho .character-voice {
  background-image: url('../images/top/character/16-msg.png?1627461594');
}

#usui_miyuki .content-title {
  background: url('../images/top/character/17-name.png?1627461594') no-repeat 0 0;
}
#usui_miyuki .character-voice {
  background-image: url('../images/top/character/17-msg.png?1627461594');
}

#kira_sayuri .content-title {
  background: url('../images/top/character/13-name.png?1627461594') no-repeat 0 0;
}
#kira_sayuri .character-voice {
  background-image: url('../images/top/character/13-msg.png?1627461594');
}

#nakata_natalie .content-title {
  background: url('../images/top/character/18-name.png?1627461594') no-repeat 0 0;
}
#nakata_natalie .character-voice {
  background-image: url('../images/top/character/18-msg.png?1627461594');
}

#yukishiro_wakana .content-title {
  background: url('../images/top/character/19-name.png?1627461594') no-repeat 0 0;
}
#yukishiro_wakana .character-voice {
  background-image: url('../images/top/character/19-msg.png?1627461594');
}

#info {
  position: relative;
  overflow: hidden;
  height: 480px;
  display: flex;
  margin-bottom: 64px;
}
#info > .contents {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-flex-flow: row;
  flex-flow: row;
  position: absolute;
  width: 984px;
  margin: 0px auto;
  top: 16px;
  left: 0px;
  right: 0px;
}

#news {
  width: 984px;
  height: 60px;
  margin: 0;
  background: rgba(255, 255, 255, 0.9);
  padding: 0 16px 16px 16px;
  text-align: center;
}

#broadcast,
#twitter {
  position: relative;
  width: 468px;
  height: 480px;
  margin: 0;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  padding: 16px;
}

#broadcast > h1, #news > h1, #twitter > h1, #sounds > h1 {
  border-bottom: solid 2px #36E8FF;
  margin: 0;
  color: transparent;
  width: 100%;
  height: 27px;
}

#broadcast > h1 {
  background: url('../images/sprite/top/sprite-sd357203f1e.png') no-repeat 0 0;
  background-position: 0 0;
}

#news > h1 {
  background: url('../images/sprite/top/sprite-sd357203f1e.png') no-repeat 0 0;
  background-position: 0 -54px;
}

#twitter > h1 {
  background: url('../images/sprite/top/sprite-sd357203f1e.png') no-repeat 0 0;
  background-position: 0 -111px;
}

#sounds > h1 {
  background: url('../images/sprite/top/sprite-sd357203f1e.png') no-repeat 0 0;
  background-position: 0 -81px;
}

#news {
  display: block;
  margin: 0 auto;
}

.news-list {
  padding-bottom: 16px;
  height: 2.5em;
  overflow: hidden;
}

.news-list__item {
  border-bottom: solid 1px #ececec;
  padding-bottom: 16px;
  margin-bottom: 16px;
}
.news-list__item a {
  color: #00d8ff;
}
.news-list__item.ajax-loader {
  text-align: center;
  padding: 100px;
}

.news-label {
  background: #00d8ff;
  border-radius: 2px;
  color: #fff;
  text-align: center;
  display: inline-block;
  margin-right: 8px;
  font-size: 1rem;
  width: 60px;
  height: 16px;
  line-height: 16px;
}
.news-label.event {
  background: #49c2e5;
}
.news-label.notice {
  background: #6abc45;
}
.news-label.campaign {
  background: #ff80a7;
}
.news-label.bug {
  background: #879aa1;
}
.news-label.gacha {
  background: #f79a36;
}

.news-time {
  color: #a7a7a7;
  font-size: 1.2rem;
}

.news-title {
  margin-top: 8px;
  display: inline-block;
}
.news-title > a {
  display: inline-block;
  margin-top: 1rem;
}

.btn-more {
  background: rgba(207, 207, 207, 0.2);
  color: #a7a7a7;
  height: 36px;
  line-height: 36px;
  text-align: center;
  display: block;
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  margin: auto;
  width: calc(100% - 16px);
  border-radius: 4px;
}

#assorted {
  height: 615px;
  overflow: hidden;
}

#sounds {
  margin: 48px 0;
}

#sound-list {
  margin-top: 16px;
}
#sound-list::before, #sound-list::after {
  position: absolute;
  content: "";
  display: block;
  box-shadow: none;
  width: 36px;
  top: 0;
  bottom: 0;
  height: 100%;
  margin: 0;
  z-index: 1;
}
#sound-list::before {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #ffffff), color-stop(100%, rgba(255, 255, 255, 0)));
  background-image: -moz-linear-gradient(left, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -webkit-linear-gradient(left, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  left: 0;
}
#sound-list::after {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #ffffff));
  background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  right: 0;
}
#sound-list .carousel__inner {
  width: calc((417px + 16px) * 7);
  overflow: hidden;
  padding: 16px 0;
}

.sound-list__item {
  padding: 16px 8px;
  outline: none;
}
.sound-list__item .movie-song[data-video]:hover {
  opacity: 0.7;
}

.cd {
  width: 262px;
  height: 450px;
  box-shadow: 0 2px 15px rgba(0, 45, 73, 0.2);
  border-radius: 8px;
  background: #fff;
  position: relative;
}

.cd__title {
  color: #00d8ff;
  font-size: 2rem;
  margin: 16px;
}

.cd__thumb {
  width: 262px;
  height: 262px;
  display: block;
}

.cd__detail {
  line-height: 1.4;
  margin: 16px;
}

.cd__link {
  font-size: 1.3rem;
  display: inline-block;
  position: absolute;
  bottom: 8px;
  text-align: center;
  vertical-align: middle;
  margin: 0.5em 0;
  line-height: 2em;
  height: 2em;
  border-radius: 8px;
  border-color: #00d8ff;
  border-style: solid;
  border-width: 2px;
  width: 90%;
  color: #00d8ff;
}

.movie-song {
  display: inline-block;
  cursor: pointer;
}

#twitter {
  flex-grow: 1;
}

.twitter-timeline {
  margin: 0 auto !important;
  display: block !important;
  background: url("/assets/images/loader.gif") no-repeat center center;
  min-height: 315px;
  margin-top: 16px !important;
}
.twitter-timeline.twitter-timeline-rendered {
  background: none;
}

.twitter-follow {
  position: relative;
  -moz-transition: background 0.2s ease-in-out;
  -o-transition: background 0.2s ease-in-out;
  -webkit-transition: background 0.2s ease-in-out;
  transition: background 0.2s ease-in-out;
  display: block;
  background: #00d8ff;
  color: #fff;
  border-radius: 8px;
  height: 36px;
  line-height: 30px;
  padding: 0;
  position: absolute;
  bottom: 16px;
  left: 8px;
  right: 8px;
  margin: auto;
  text-align: center;
}
.twitter-follow:hover {
  background: #33e0ff;
  color: #fff;
}
.twitter-follow .icon-twitter-bird {
  vertical-align: middle;
}

#broadcast {
  flex-grow: 1;
}

.broadcast-content {
  margin: 0 auto !important;
  display: block !important;
  min-height: 315px;
  margin-top: 32px !important;
}

#movies {
  padding: 49px 0;
  height: 454px;
  background: #000;
  user-select: none;
}
#movies > h1 {
  display: none;
}
#movies .carousel {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}

.movies__item {
  display: block;
  width: calc(635px + 16px);
  height: 357px;
  margin: 0;
  overflow: hidden;
}
.movies__item iframe {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  background: transparent;
}
.movies__item img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.movies__item__inner {
  position: relative;
  height: 100%;
  margin: 0 8px;
  overflow: hidden;
  border-radius: 10px;
}

.movies__title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(65, 65, 65, 0.9);
  color: #fff;
  line-height: 24px;
  padding: 0;
  text-align: center;
  z-index: 2;
}