@charset "UTF-8";
@media screen and (max-width: 667px) {
  /*表示・非表示*/
  .imgPC {
    display: none;
  }
  .imgSP {
    display: block;
  }
  /*-----------------------------------------------------------*/
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  .kinnik {
    width: 90%;
    margin: 0 auto;
  }
  /*-----------------------------------------------------------*/
  /*ページローダー*/
  #loader {
    position: absolute;
    width: 50%;
    top: 50%;
    left: 0;
    right: 0;
    margin: -20% auto 0;
    z-index: 100;
    opacity: 0.9
  }
  /*-----------------------------------------------------------*/
  #page-top {
    position: fixed;
    bottom: 20px;
    right: 1%;
    z-index: 98;
    width: 17%;
  }
  nav#nav1 {
    display: none;
  }
  body#top {
    display: block;
    z-index: -1;
    width: 100%;
    background: none;
  }
  body#top:before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    background: url(../../_img/bg_sp.gif) center;
    background-size: contain;
  }
	
/*-----------------------------------------------------------*/
/*2期キービジュアル*/
/*-----------------------------------------------------------*/
dl.keyvisual {
  width: 100%;
  margin: 0 auto;
}
dl.keyvisual dt {
 display: none;
}
dl.keyvisual dd {
  width: 100%;

  margin: 0 auto;
  float: none;
}	
	
  #wrapper {
    width: 100%;
    overflow: hidden;
  }
  /* ヘッダーロゴ部分 */
  header#top {
    width: 100%;
    height: auto;
    padding-top: 0;
    position: relative;
    overflow: hidden;
  }
  /*-----------------------------------*/
  /*宇崎ちゃんロゴ*/
  header#top #top_logo1 {
    position: absolute;
    width: 60%;
    height: auto;
    right: auto;
    left: 40%;
    top: 72%;
    z-index: 6;
    filter: drop-shadow(1px 1px 0.5px rgba(255, 255, 255, 1));
    opacity: 0;
  }
  /*TVアニメ絶賛放送中！*/
  header#top #top_day {
    width: 60%;
    height: auto;
    position: absolute;
    top: 88%;
    left: 40%;
    right: auto;
    z-index: 6;
    filter: drop-shadow(1px 1px 0.5px rgba(255, 255, 255, 1));
    opacity: 0;
  }
  /*---------------------------------------------------*/
  /*誕生日背景*/
  .birth_bg {
    /*position: absolute;
    width: 100%;
    background: #FFF url("../../_img/birth_bg.png") repeat-x center top /1800px auto;
    top: -1000px;
    z-index: 1;
    opacity: 0;*/
  }
  /*宇崎ちゃん*/
  header#top #mainSP {
    width: 100%;
    height: auto;
    margin: 0 auto 0;
    z-index: 2;
    opacity: 0;
  }
  /*ウザい カワイイ*/
  header#top #mainSP1 {
    width: 33%;
    position: absolute;
    left: auto;
    right: 1%;
    top: 28%;
    margin: 0 auto;
    z-index: 3;
    filter: drop-shadow(1px 1px 0.5px rgba(255, 255, 255, 1));
    opacity: 0;
  }
  /*でもウザい*/
  header#top #mainSP2 {
    width: 36%;
    position: absolute;
    left: 1%;
    right: auto;
    top: 1%;
    margin: 0 auto;
    z-index: 3;
    filter: drop-shadow(1px 1px 0.5px rgba(255, 255, 255, 1));
    opacity: 0;
  }
  /*ドタバタラブコメディー*/
  header#top #mainSP3 {
    width: 18%;
    position: absolute;
    left: -2%;
    right: auto;
    top: 18%;
    margin: 0 auto;
    z-index: 3;
    filter: drop-shadow(1px 1px 0.5px rgba(255, 255, 255, 1));
    opacity: 0;
  }
  /*真一*/
  header#top #mainSP4 {
    width: 28%;
    position: absolute;
    left: 1%;
    right: auto;
    top: 77%;
    margin: 0 auto;
    z-index: -1;
    opacity: 0;
  }
  /*スペシャルPV*/
  header#top #mainSPPV {
    width: 40%;
    position: absolute;
    left: 8%;
    right: auto;
    top: 52%;
    margin: 0 auto;
    z-index: 3;
    filter: drop-shadow(1px 1px 0.5px rgba(255, 255, 255, 1));
    opacity: 0;
  }
  /*スペシャルPV*/
  header#top #mainSPPV2 {
    width: 42%;
    position: absolute;
    right: 12%;
    top: -2%;
    margin: 0 auto;
    z-index: 3;
    filter: drop-shadow(1px 1px 0.5px rgba(255, 255, 255, 1));
    opacity: 0;
  }
  /*2期*/
  #sec {
    width: 100%;
    background: url("../../_img/bg.gif") center top;
    text-align: center;
    z-index: 9999999;
  }
  #sec img {
    display: inline;
    width: 100%;
  }
  #sec a:hover img {
    opacity: 1;
  }
  /*---------------------------------------------------*/
  /* 最新ニュース部分 */
  /*---------------------------------------------------*/
  section#newsBlock {
    width: 100%;
    margin: 0px auto;
    background-color: rgba(75, 165, 203, 0.2);
    position: relative;
    z-index: 10;
    border-radius: 0 0 12px 12px;
  }
  section#newsBlock .inner {
    width: 100%;
    padding: 40px 0px;
  }
  #news {
    width: 92%;
    float: none;
    margin-right: 0px;
    margin: 0 auto;
  }
  #news h2 {
    width: 30%;
    height: 0;
    padding-top: calc(100%*15/143);
    margin: 0 auto 0;
    background: url('../../_img/h2_news.svg') center top no-repeat;
    background-size: 100% auto;
  }
  #news ul.newsList {
    width: 94%;
    font-size: 16px;
    color: #3389ca;
  }
  #news span {
    display: block;
    font-weight: bold;
    font-size: 12px;
    margin-right: 1em;
  }
  #news ul.newsList li a {
    color: #3389ca;
    font-weight: bold;
    text-decoration: none;
  }
  #news ul.newsList li a:hover {
    color: #15517f;
    text-decoration: none;
    font-weight: bold;
  }
  /* ツイッター部分 */
  #twitter {
    width: 92%;
    margin-left: 0%;
    margin: 10% auto 0;
    float: none;
  }
  #twitter h2 {
    width: 35%;
    height: 0;
    padding-top: calc(100%*17/165);
    margin: 0 auto 0;
    background: url('../../_img/h2_twitter.svg') center top no-repeat;
    background-size: 100% auto;
  }
  #scroll {
    position: relative;
    width: 98%;
    margin: 0 auto;
    height: 285px;
  }
  .ps__rail-x, .ps__rail-y {
    opacity: 0.6 !important;
  }
  /*---------------------------------------------------*/
  /* PV部分 */
  /*---------------------------------------------------*/
  section#pv {
    width: 100%;
    height: auto;
    margin: 24px auto;
    background-color: rgba(255, 255, 255, 0.7);
    position: relative;
    border-radius: 12px;
    z-index: 10;
  }
  /*---------------------------------------------------*/
  /* 動画スライド部分 */
  /*---------------------------------------------------*/
  section#pv .inner {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 30px 0;
    text-align: center;
  }
  section#pv .inner h2 {
    font-size: 0;
    width: 242px;
    height: 38px;
    margin: 0 auto 30px;
    background: url('../../_img/h2_game2.svg') center top no-repeat;
  }
  section#pv .inner .swiper-container_mov {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
  }
  section#pv .inner .swiper-container_mov center {
    display: block;
    padding-top: 12px;
    font-size: 12px;
    color: #3389ca;
    letter-spacing: 0.1em;
    text-shadow: 1px 1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, -1px -1px 0 #FFF;
  }
  .swiper-button-next_mov, .swiper-button-prev_mov {
    position: absolute;
    top: 50%;
    width: 52px;
    height: 49px;
    margin-top: -10px;
    z-index: 100;
    cursor: pointer;
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat
  }
  .swiper-button-prev_mov, .swiper-container-rtl .swiper-button-next_mov {
    background-image: url("../../_img/chara_left.png");
    left: -4px;
    right: auto
  }
  .swiper-button-next_mov, .swiper-container-rtl .swiper-button-prev_mov {
    background-image: url("../../_img/chara_right.png");
    right: -4px;
    left: auto
  }
  /*---------------------------------------------------*/
  /* イントロダクション部分 */
  /*---------------------------------------------------*/
  section#intro {
    width: 100%;
    margin: 24px auto;
    background-color: rgba(255, 255, 255, 0.7);
    position: relative;
    border-radius: 12px;
    z-index: 10;
  }
  section#intro .inner {
    width: 100%;
    margin: 0 auto;
    padding: 30px 0 0;
    text-align: center;
  }
  /*スタッフ&キャストタイトル*/
  section#intro h2 {
    display: block;
    width: 56%;
    height: 0;
    padding-top: calc(100%*22/267);
    margin: 0 auto 0;
    background: url('../../_img/h2_intro.svg') center top no-repeat;
    background-size: 100% auto;
  }
  section#intro .ph {
    font-size: 0;
    width: 100%;
    height: 0;
    padding-top: calc(100%*1740/750);
    margin: 0 auto;
    background: url('../../_img/introsp.png') no-repeat center top /100% auto;
  }
  section#intro .ph_s2 {
    font-size: 0;
    width: 100%;
    height: 0;
    padding-top: calc(100%*1680/750);
    margin: 0 auto;
    background: url('../../_img/introsp_s2.png') no-repeat center top /100% auto;
  }
  /*---------------------------------------------------*/
  /* キャラクター紹介部分 */
  /*---------------------------------------------------*/
  section#chara {
    width: 100%;
    margin: 24px auto;
    background-color: rgba(75, 165, 203, 0.2);
    position: relative;
    border-radius: 12px;
    z-index: 10;
  }
  section#chara .inner {
    position: relative;
    width: 96%;
    margin: 0 auto;
    padding: 30px 0;
    text-align: center;
  }
  /*キャラクタータイトル*/
  section#chara h2 {
    width: 50%;
    height: 0;
    padding-top: calc(100%*66/750);
    margin: 0 auto 12px;
    background: url('../../_img/h2_chara.svg') center top no-repeat;
    background-size: 100% auto;
  }
  #chara .uzaki {
    width: 100%;
    height: 0;
    background: url("../../_img/2nd/chara01sp.png")no-repeat left top /100% auto;
    padding-top: calc(100%*1460/750);
  }
  #chara .senpai {
    width: 100%;
    height: 0;
    background: url("../../_img/2nd/chara02sp.png")no-repeat left top /100% auto;
    padding-top: calc(100%*1460/750);
  }
  #chara .ami {
    width: 100%;
    height: 0;
    background: url("../../_img/2nd/chara03sp.png")no-repeat left top /100% auto;
    padding-top: calc(100%*1460/750);
  }
  #chara .sakaki {
    width: 100%;
    height: 0;
    background: url("../../_img/2nd/chara04sp.png")no-repeat left top /100% auto;
    padding-top: calc(100%*1460/750);
  }
  #chara .master {
    width: 100%;
    height: 0;
    background: url("../../_img/2nd/chara05sp.png")no-repeat left top /100% auto;
    padding-top: calc(100%*1460/750);
  }
  #chara .tsuki {
    width: 100%;
    height: 0;
    background: url("../../_img/2nd/chara06sp.png")no-repeat left top /100% auto;
    padding-top: calc(100%*1460/750);
  }
  #chara .yanagi {
    width: 100%;
    height: 0;
    background: url("../../_img/2nd/chara07sp.png")no-repeat left top /100% auto;
    padding-top: calc(100%*1460/750);
  }
  #chara .kiri {
    width: 100%;
    height: 0;
    background: url("../../_img/2nd/chara08sp.png")no-repeat left top /100% auto;
    padding-top: calc(100%*1460/750);
  }
  #chara .fujio {
    width: 100%;
    height: 0;
    background: url("../../_img/2nd/chara09sp.png")no-repeat left top /100% auto;
    padding-top: calc(100%*1460/750);
  }
  #chara .shiro {
    width: 100%;
    height: 0;
    background: url("../../_img/2nd/chara10sp.png")no-repeat left top /100% auto;
    padding-top: calc(100%*1460/750);
  }
  #chara .haruko {
    width: 100%;
    height: 0;
    background: url("../../_img/2nd/chara11sp.png")no-repeat left top /100% auto;
    padding-top: calc(100%*1460/750);
  }
	 #chara .cat {
    width: 100%;
    height: 0;
    background: url("../../_img/2nd/chara12sp.png")no-repeat left top /100% auto;
    padding-top: calc(100%*1460/750);
  }
  /*-----------------------------------------------------------------*/
  .swiper-pagination {
    position: relative;
    display: block;
    width: 96%;
	  margin: 0 auto;
    left: auto;
    bottom: auto;
    z-index: 20;
  }
  /*キャラクター一覧*/
  .swiper-pagination span {
    display: inline-block;
    width: 80px;
    height: 80px;
    margin: 0 2px 12px 2px;
    cursor: pointer;
    transition: all 300ms 0s ease;
    float: none;
  }
  .swiper-pagination span:nth-of-type(1) {
    background: url("../../_img/2nd/charanav01.png") no-repeat center bottom / 100% auto;
    padding: 0;
  }
  /*オンマウス*/
  .swiper-pagination span.swiper-pagination-bullet-active:nth-of-type(1), .swiper-pagination span:nth-of-type(1):hover {
    background: url(../../_img/2nd/charanav01_on.png) no-repeat center bottom / 100% auto;
    padding: 0;
  }
  .swiper-pagination span:nth-of-type(2) {
    background: url("../../_img/2nd/charanav02.png") no-repeat center bottom / 100% auto;
    padding: 0;
  }
  /*オンマウス*/
  .swiper-pagination span.swiper-pagination-bullet-active:nth-of-type(2), .swiper-pagination span:nth-of-type(2):hover {
    background: url(../../_img/2nd/charanav02_on.png) no-repeat center bottom / 100% auto;
    padding: 0;
  }
  .swiper-pagination span:nth-of-type(3) {
    background: url("../../_img/2nd/charanav03.png") no-repeat center bottom / 100% auto;
    padding: 0;
  }
  /*オンマウス*/
  .swiper-pagination span.swiper-pagination-bullet-active:nth-of-type(3), .swiper-pagination span:nth-of-type(3):hover {
    background: url(../../_img/2nd/charanav03_on.png) no-repeat center bottom / 100% auto;
    padding: 0;
  }
  .swiper-pagination span:nth-of-type(4) {
    background: url("../../_img/2nd/charanav04.png") no-repeat center bottom / 100% auto;
    padding: 0;
  }
  /*オンマウス*/
  .swiper-pagination span.swiper-pagination-bullet-active:nth-of-type(4), .swiper-pagination span:nth-of-type(4):hover {
    background: url(../../_img/2nd/charanav04_on.png) no-repeat center bottom / 100% auto;
    padding: 0;
  }
  .swiper-pagination span:nth-of-type(5) {
    background: url("../../_img/2nd/charanav05.png") no-repeat center bottom / 100% auto;
    padding: 0;
  }
  /*オンマウス*/
  .swiper-pagination span.swiper-pagination-bullet-active:nth-of-type(5), .swiper-pagination span:nth-of-type(5):hover {
    background: url(../../_img/2nd/charanav05_on.png) no-repeat center bottom / 100% auto;
    padding: 0;
  }
  .swiper-pagination span:nth-of-type(6) {
    background: url("../../_img/2nd/charanav06.png") no-repeat center bottom / 100% auto;
    padding: 0;
  }
  /*オンマウス*/
  .swiper-pagination span.swiper-pagination-bullet-active:nth-of-type(6), .swiper-pagination span:nth-of-type(6):hover {
    background: url(../../_img/2nd/charanav06_on.png) no-repeat center bottom / 100% auto;
    padding: 0;
  }
  .swiper-pagination span:nth-of-type(7) {
    background: url("../../_img/2nd/charanav07.png") no-repeat center bottom / 100% auto;
    padding: 0;
  }
  /*オンマウス*/
  .swiper-pagination span.swiper-pagination-bullet-active:nth-of-type(7), .swiper-pagination span:nth-of-type(7):hover {
    background: url(../../_img/2nd/charanav07_on.png) no-repeat center bottom / 100% auto;
    padding: 0;
  }
	  .swiper-pagination span:nth-of-type(8) {
    background: url("../../_img/2nd/charanav09.png") no-repeat center bottom / 100% auto;
    padding: 0;
  }
  /*オンマウス*/
  .swiper-pagination span.swiper-pagination-bullet-active:nth-of-type(8), .swiper-pagination span:nth-of-type(8):hover {
    background: url(../../_img/2nd/charanav09_on.png) no-repeat center bottom / 100% auto;
    padding: 0;
  }
	  .swiper-pagination span:nth-of-type(9) {
    background: url("../../_img/2nd/charanav08.png") no-repeat center bottom / 100% auto;
    padding: 0;
  }
  /*オンマウス*/
  .swiper-pagination span.swiper-pagination-bullet-active:nth-of-type(9), .swiper-pagination span:nth-of-type(9):hover {
    background: url(../../_img/2nd/charanav08_on.png) no-repeat center bottom / 100% auto;
    padding: 0;
  }
	  .swiper-pagination span:nth-of-type(10) {
    background: url("../../_img/2nd/charanav11.png") no-repeat center bottom / 100% auto;
    padding: 0;
  }
  /*オンマウス*/
  .swiper-pagination span.swiper-pagination-bullet-active:nth-of-type(10), .swiper-pagination span:nth-of-type(10):hover {
    background: url(../../_img/2nd/charanav11_on.png) no-repeat center bottom / 100% auto;
    padding: 0;
  }
	  .swiper-pagination span:nth-of-type(11) {
    background: url("../../_img/2nd/charanav10.png") no-repeat center bottom / 100% auto;
    padding: 0;
  }
  /*オンマウス*/
  .swiper-pagination span.swiper-pagination-bullet-active:nth-of-type(11), .swiper-pagination span:nth-of-type(11):hover {
    background: url(../../_img/2nd/charanav10_on.png) no-repeat center bottom / 100% auto;
    padding: 0;
  }
	  .swiper-pagination span:nth-of-type(12) {
    background: url("../../_img/2nd/charanav12.png") no-repeat center bottom / 100% auto;
    padding: 0;
  }
  /*オンマウス*/
  .swiper-pagination span.swiper-pagination-bullet-active:nth-of-type(12), .swiper-pagination span:nth-of-type(12):hover {
    background: url(../../_img/2nd/charanav12_on.png) no-repeat center bottom / 100% auto;
    padding: 0;
  }
	
	
  /*キャラクターナビゲーション*/
  .swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: 50%;
    width: 52px;
    height: 49px;
    margin-top: -10px;
    z-index: 100;
    cursor: pointer;
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat
  }
  .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    background-image: url("../../_img/chara_left.png");
    left: -12px;
    right: auto
  }
  .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    background-image: url("../../_img/chara_right.png");
    right: -12px;
    left: auto
  }
  /*---------------------------------------------------*/
  /* スタッフ＆キャスト部分 */
  /*---------------------------------------------------*/
  section#cast h2 {
    width: 60%;
    height: 0;
    padding-top: calc(100%*37/267);
    margin: 0 auto 0;
    background: url('../../_img/h2_cast.svg') center top no-repeat;
    background-size: 100% auto;
  }
  section#cast .inner {
    padding: 40px 0 10px;
    text-align: center;
  }
  /*キャストレイアウト*/
  section#cast ul {
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    margin: 20px auto 0;
    justify-content: center;
    text-shadow: 1px 1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, -1px -1px 0 #FFF;
  }
  section#cast ul li {
    margin: 0 14px 20px 0;
    font-size: 22px;
  }
  section#cast ul#castList li {
    margin: 0 8px 24px;
    font-size: 22px;
    letter-spacing: 0.05em;
  }
  section#cast ul li:last-child {
    margin-right: 0px;
  }
  /*文字小サイズ*/
  section#cast ul li span {
    display: block;
    font-size: 60%;
  }
  /*原作者注釈*/
  section#cast ul li em {
    font-style: normal;
    display: block;
    font-size: 50%;
  }
  /*タブナビ用キャストレイアウト*/
  section#cast ul.index {
    margin: 0 auto 16px;
    padding: 0;
    text-align: center;
    font-size: 0;
  }
  section#cast ul.index li {
    margin: 0 2px 6px;
    padding: 4px 0;
    font-size: 18px;
    box-sizing: border-box;
  }
  /*---------------------------------------------------*/
  /*スタッフ＆キャスト*/
  section#cast h3 span.st {
    display: block;
    width: 100px;
    height: 24px;
    background: url('../../_img/h3_st.svg') center top no-repeat;
    background-size: 100% auto;
    margin: 0 auto;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
  }
  /*キャスト*/
  section#cast h3 span.cas {
    display: block;
    width: 100px;
    height: 24px;
    background: url('../../_img/h3_cas.svg') center top no-repeat;
    background-size: 100% auto;
    margin: 0 auto;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
  }
  /*-----------------------------------------------------------*/
  /* コミックス部分 */
  /*-----------------------------------------------------------*/
  section#comics h2 {
    width: 30%;
    height: 0;
    padding-top: calc(100%*62/750);
    margin: 0 auto 0;
    background: url('../../_img/h2_comics.svg') center top no-repeat;
    background-size: 100% auto;
  }
  /*絶賛発売中*/
  section#comics #comicsText {
    width: 100%;
    margin: -2px auto 0;
  }
  section#comics #comicsText2 {
    width: 96%;
    margin: -20px auto 0;
    padding: 0 0 24px
  }
  section#comics .inner {
    padding: 40px 0px 0px;
    text-align: center;
  }
  section#comics ul {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    width: 92%;
    margin: 12px auto 0;
  }
  section#comics ul li {
    width: 46%;
    margin: 2%;
    margin-bottom: 10%;
    position: relative;
  }
  section#comics ul li .comicsTitle {
    margin-top: 2%;
    font-size: 11px;
    color: #FFF;
    background: #f29b87;
    padding: 4px 0;
    border-radius: 12px;
  }
  section#comics ul li img {
    width: 100%;
  }
  section#comics ul li.new:after {
    content: '';
    display: inline-block;
    width: 60%;
    height: auto;
    padding-top: calc(100%*137/140);
    background-image: url(../../_img/comics_star8.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    vertical-align: top;
    position: absolute;
    right: -30%;
    top: -15%;
  }
  section#comics ul li.new2:after {
    content: '';
    display: inline-block;
    width: 60%;
    height: auto;
    padding-top: calc(100%*137/140);
    background-image: url("../../_img/comics_star5B.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    vertical-align: top;
    position: absolute;
    right: -12%;
    top: -18%;
  }
  section#comics ul li.new3:after {
    content: '';
    display: inline-block;
    width: 60%;
    height: auto;
    padding-top: calc(100%*137/140);
    background-image: url("../../_img/comics_star7.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    vertical-align: top;
    position: absolute;
    right: -12%;
    top: -18%;
  }
  section#comics ul li:last-child {
    /*width: 100%;
    margin-top: 0;*/
  }
  /*---------------------------------------------------*/
  /*  TOPバナー部分 */
  /*---------------------------------------------------*/
  ul.bannerTop {
    width: 100%;
    margin: 12px auto 12px;
    font-size: 0;
    text-align: center;
  }
  ul.bannerTop li {
    display: inline-block;
    width: 100%;
    margin: 5px 0;
    font-size: 0;
  }
  ul.bannerTop li img {
    height: auto;
  }
  ul.bannerTop.foot li img {
    width: auto;
    max-width: 80%;
    margin: 0 auto;
    height: auto;
  }
  /*---------------------------------------------------*/
  /*  banner部分 */
  /*---------------------------------------------------*/
  section#banner {
    width: 100%;
    margin: 0px auto;
    background-color: rgba(255, 255, 255, 0.7);
    position: relative;
    z-index: 10;
    border-radius: 12px;
  }
  section#banner .inner {
    padding: 0;
  }
  section#banner .bn {
    width: 80%;
    display: block;
    margin: 0 auto;
  }
  section#banner .bn a {
    display: inline-block;
    width: 100%;
    margin: 4px;
    font-size: 0;
    vertical-align: middle;
  }
  /* 下層テンプレ部分 */
  header.imgSP {
    padding: 10px;
    background: url(../../_img/bg.gif) center;
  }
  header.imgSP.spspp {
    padding: 10px 10px 90px;
    background: url(../../_img/bg.gif) center;
  }
  header.imgSP h1 {
    width: 50%;
    margin: 0 auto;
  }
  section#temp {
    width: 96%;
    margin: 0 auto 20px;
    padding: 0px;
    background: #FFF;
    box-shadow: 0 0 6px #0f526d;
    box-sizing: border-box;
  }
  section#temp:before {
    content: '';
    display: inline-block;
    width: 100%;
    height: auto;
    background-image: url(../../_img/news_header.png);
    padding-top: calc(100%*14/800);
    background-size: 100% auto;
    vertical-align: top;
  }
  section#temp:after {
    content: '';
    display: inline-block;
    width: 100%;
    height: auto;
    padding-top: calc(100%*80/800);
    background-image: url(../../_img/news_footer.png);
    background-size: 100% auto;
    vertical-align: bottom;
  }
  section#temp .inner .note.chara1:after {
    content: '';
    display: inline-block;
    width: 180px;
    background-image: url(../../_img/news_footer_chara1.png);
    background-size: 100% auto;
    vertical-align: top;
    background-repeat: no-repeat;
    position: absolute;
    bottom: -51px;
    right: 0;
  }
  section#temp .inner .note.chara2:after {
    content: '';
    display: inline-block;
    width: 180px;
    background-image: url(../../_img/news_footer_chara2.png);
    background-size: 100% auto;
    vertical-align: top;
    background-repeat: no-repeat;
    position: absolute;
    bottom: -38px;
    right: 0;
  }
  section#temp .inner .note.chara3:after {
    content: '';
    display: inline-block;
    width: 115px;
    background-image: url(../../_img/news_footer_chara3.png);
    background-size: 100% auto;
    vertical-align: top;
    background-repeat: no-repeat;
    position: absolute;
    bottom: -40px;
    right: 0;
  }
  section#temp .inner .note .vaPict {
    /*height: 8em;*/
    margin: 5px auto;
  }
  section#temp .inner .note .vaBox {
    width: 100%;
    position: relative;
  }
  section#temp .inner .note .vaBox .vaName {
    position: static;
  }
  section#temp .inner .note .vaBox .vaText {
    padding-top: 2em;
  }
  section#temp .inner .note .vaBox dt {
    width: 100%;
    float: none;
  }
  section#temp .inner .note .vaBox dd {
    margin-left: 0;
    margin-top: 1em;
  }
  section#temp .inner {
    padding: 2%;
  }
  h2.newsH2 {
    font-size: 0;
    width: 143px;
    height: 38px;
    margin: 10% auto;
    background: url('../../_img/h2_news.svg') center top no-repeat;
  }
  section#temp h2 {
    font-size: 18px;
    text-align: center;
    color: #3389ca;
    margin-bottom: 10px;
    padding: 0 18px;
  }
  section#temp .inner .note p {
    margin: 0 12px 12px;
    word-break: break-all;
  }
  section#temp a {
    color: #e74291;
  }
  section#temp .inner .note .imgCenter {
    width: 80%;
    text-align: center;
    margin: 2em auto;
  }
  .imgCenter2 {
    width: 94%;
    height: auto;
    margin: -0.5em auto 1.5em;
    padding: 1em 0 0 0;
    border: 1px solid #3389ca;
    background: #FFF;
    box-sizing: border-box;
  }
  .mov {
    width: 96%;
    margin: 0 auto;
  }
  ul.dl {
    width: 90%;
    margin: 0 auto;
    padding: 0;
    font-size: 0;
  }
  ul.dl li {
    width: 100%;
    display: inline-block;
    padding: 0 2px 12px;
    text-align: center;
    font-size: 0;
    box-sizing: border-box;
  }
  ul.dl li .bord {
    margin: 0 0 8px;
    border: 1px solid #CCC;
  }
  /*---------------------------------------------------*/
  /* スペシャル部分 */
  /*---------------------------------------------------*/
  section#pv.special {
    padding: 0;
    width: 100%;
    height: auto;
    margin: 0 auto;
    background-color: rgba(75, 165, 203, 0.2);
    position: relative;
    z-index: 10;
    border-radius: 0;
  }
  section#pv.special .innerSP {
    width: 100%;
    margin: 0 auto;
    padding: 60px 0;
    text-align: left;
    font-size: 0;
  }
  /*タイトル*/
  section#pv.special .innerSP h2 {
    font-size: 0;
    width: 184px;
    height: 39px;
    margin: 0 auto 30px;
    background: url('../../_img/h2_special.svg') center top no-repeat;
  }
  section#pv.special .innerSP .swiper-slide.slide {
    display: inline-block;
    width: 100%;
    margin: 0 auto;
    padding: 24px;
    box-sizing: border-box;
    vertical-align: top;
  }
  section#pv.special .innerSP .swiper-slide.slide center {
    display: block;
    padding: 8px;
    font-size: 16px;
    color: #3389ca;
    letter-spacing: 0.1em;
    text-shadow: 1px 1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, -1px -1px 0 #FFF;
    box-sizing: border-box;
    vertical-align: top;
  }
  /*タイトル*/
  section#pv.special .innerSP h3.pv {
    font-size: 0;
    width: 76px;
    height: 38px;
    margin: 0 auto;
    background: url('../../_img/h3_pv.svg') center top no-repeat;
  }
  /*タイトル*/
  section#pv.special .innerSP h3.game {
    font-size: 0;
    width: 184px;
    height: 38px;
    margin: 36px auto 12px;
    background: url('../../_img/h3_game.svg') center top no-repeat;
  }
  /*タイトル*/
  section#pv.special .innerSP h3.niconico {
    font-size: 0;
    width: 376px;
    height: 38px;
    margin: 36px auto 12px;
    background: url('../../_img/h3_nico.svg') center top no-repeat;
  }
  /*タイトル*/
  section#pv.special .innerSP h3.castcom {
    font-size: 0;
    width: 242px;
    height: 38px;
    margin: 66px auto 12px;
    background: url('../../_img/h3_castcom.svg') center top no-repeat;
  }
  /*タイトル*/
  section#pv.special .innerSP h3.staffcom {
    font-size: 0;
    width: 246px;
    height: 38px;
    margin: 36px auto 12px;
    background: url('../../_img/h3_staffcom.svg') center top no-repeat;
  }
  /*タイトル*/
  section#pv.special .innerSP h3.takecom {
    font-size: 0;
    width: 316px;
    height: 38px;
    margin: 36px auto 12px;
    background: url('../../_img/h3_takecom.svg') center top no-repeat;
  }
  /*タイトル*/
  section#pv.special .innerSP h3.artcom {
    font-size: 0;
    width: 300px;
    height: 38px;
    margin: 36px auto 12px;
    background: url('../../_img/h3_artcom.svg') center top no-repeat;
  }
  /*タイトル*/
  section#pv.special .innerSP h3.nurie {
    font-size: 0;
    width: 384px;
    height: 38px;
    margin: 66px auto 12px;
    background: url('../../_img/h3_nurie.svg') center top no-repeat;
  }
  /*タイトル*/
  section#pv.special .innerSP h3.nurie_kekka {
    font-size: 0;
    width: 384px;
    height: 38px;
    margin: 30px auto 12px;
    background: url('../../_img/h3_nurie.svg') center top no-repeat;
  }
  /*タイトル*/
  section#pv.special .innerSP h3.kabegami {
    font-size: 0;
    width: 376px;
    height: 38px;
    margin: 66px auto 12px;
    background: url('../../_img/h3_kabegami.svg') center top no-repeat;
  }
  .nicowin {
    width: 90%;
    margin: 0 auto;
  }
  .nicowin img {
    max-width: 100%;
  }
  /*---------------------------------------------------*/
  /* スペシャル */
  /*---------------------------------------------------*/
  .specialbox {
    width: 96%;
    background-color: rgba(255, 255, 255, 0.7);
    margin: 0 auto 50px;
    padding: 36px 26px 36px;
    box-sizing: border-box;
    border-radius: 12px;
  }
  .specialbox p {
    width: 100%;
    font-size: 16px;
    color: #3389ca;
    letter-spacing: 0.1em;
    text-shadow: 1px 1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, -1px -1px 0 #FFF;
  }
  .specialbox p.read {
    margin: 0 auto 24px;
    text-align: left;
  }
  .specialbox p strong {
    color: #e74291;
    font-weight: normal;
    font-size: 120%;
    line-height: 120%;
  }
  .specialbox .vaPict {
    height: 8em;
    margin: 5px auto;
  }
  .specialbox .vaBox {
    width: 100%;
    position: relative;
  }
  .specialbox .vaBox .vaName {
    position: static;
  }
  .specialbox .vaBox .vaText {
    padding-top: 12em;
  }
  .specialbox .vaBox .vaText2 {
    padding-top: 8em;
  }
  .specialbox .vaBox dt {
    width: 100%;
    float: none;
  }
  .specialbox .vaBox dd {
    margin-left: 0;
    margin-top: 10em;
  }
  /*マスター*/
  .specialbox .vaBox .vaText.master {
    margin-left: 0;
    padding-top: 8em;
  }
  /*鹿乃*/
  .specialbox .vaBox .vaText.kano {
    margin-left: 0;
    padding-top: 20em;
  }
  section#temp .inner {
    padding: 2%;
  }
  /*ストライプボーダー*/
  .box {
    background: url("../../_img/boxborder.png") repeat;
    padding: 8px;
    width: 94%;
    margin: 0 auto 24px;
  }
  .sch {
    width: 96%;
    margin: 0 auto;
    padding: 0;
    font-size: 0;
  }
  .sch dt {
    width: 100%;
    font-size: 16px;
    line-height: 1.4;
    margin-top: 8px;
    color: #e74291;
    float: none;
    clear: both;
  }
  .sch dd {
    width: 100%;
    line-height: 1.4;
    margin: 0;
    font-size: 16px;
    color: #e74291;
  }
  .sch dt a {
    color: #e74291;
  }
  .sch.txt dt {
    font-size: 20px;
  }
  .sch.txt dd {
    font-size: 20px;
  }
  .cauu {
    font-size: 13px;
  }
  section#pv.special .specialbox p.ttt {
    font-size: 20px;
    font-weight: bold;
  }
  section#pv.special .specialbox .haishin a {
    display: inline-block;
    width: auto;
    margin: 4px;
    font-size: 20px;
    color: #e74291;
    /*border: 1px solid #e74291;*/
    padding: 8px 18px;
    border-radius: 12px;
    font-weight: normal;
    text-align: center;
    box-sizing: border-box;
    vertical-align: top;
  }
  section#pv.special .specialbox .haishin a.fst {
    display: inline-block;
    width: 100%;
  }
  section#pv.special .specialbox p.ssss {
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    line-height: 1.4;
  }
  section#pv.special .specialbox p.ssss span {
    font-size: 14px;
    text-align: center;
    font-weight: normal
  }
  section#pv.special .specialbox p strong.dddd {
    font-size: 20px;
    text-align: center;
  }
  section#pv.special .innerSP h2.music {
    font-size: 0;
    width: 50%;
    height: auto;
    padding-top: calc(100%*66/750);
    margin: 0 auto 30px;
    background: url('../../_img/h2_music.svg') center top no-repeat;
  }
  section#pv.special .innerSP h2.schedule {
    font-size: 0;
    width: 46%;
    height: auto;
    margin: 0 auto 30px;
    padding-top: calc(100%*66/750);
    background: url('../../_img/h2_schrdule.svg') center top no-repeat;
    background-size: 100% auto;
  }
  /*タイトル*/
  section#pv .innerSP h2.dvd {
    font-size: 0;
    width: 238px;
    height: 38px;
    margin: 0 auto 30px;
    background: url('../../_img/h2_dvd.svg') center top no-repeat;
  }
  /*キャスト*/
  section#pv h3.dvd1 {
    display: block;
    width: 211px;
    height: 36px;
    background: url('../../_img/h3_dvd1.svg') center top no-repeat /100% auto;
    margin: 0 auto;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
  }
  /*キャスト*/
  section#pv h3.dvd2 {
    display: block;
    width: 278px;
    height: 36px;
    background: url('../../_img/h3_dvd2.svg') center top no-repeat /100% auto;
    margin: 0 auto;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
  }
  /*キャスト*/
  section#pv h3.dvd3 {
    display: block;
    width: 180px;
    height: 36px;
    background: url('../../_img/h3_dvd3.svg') center top no-repeat /100% auto;
    margin: 0 auto;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
  }
  section#pv .specialbox.package p {
    margin-bottom: 24px;
  }
  section#pv .specialbox.package strong.bl {
    display: block;
    padding: 8px 0 0 0;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #3389ca;
    margin-bottom: 24px;
  }
  section#pv .specialbox.package strong span {
    font-size: 20px;
  }
  section#pv .specialbox.package p em {
    padding: 8px 0 0 0;
    font-size: 16px;
    font-weight: bold;
    color: #3389ca;
    font-style: normal;
  }
  section#pv .specialbox.package strong.border {
    display: block;
    padding: 8px 0;
    margin: 0 0 12px;
    font-size: 18px;
    border-bottom: 1px solid #e4e4e4;
  }
  section#pv .packageBox {
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }
  section#pv .packageBox dt {
    width: 100%;
    /*background-color: rgba(255, 255, 255, 0.7);*/
    background: none;
    padding: 12px 10px 12px;
    box-sizing: border-box;
    border-radius: 12px;
    float: none;
    clear: both;
    font-size: 0;
    text-align: center;
  }
  section#pv .packageBox a {
    display: inline-block;
    margin: 0 auto 24px;
    padding: 0;
    font-size: 0;
    text-align: center;
  }
  section#pv .packageBox a img {
    display: inline;
    height: auto;
    text-align: center;
  }
  section#pv .packageBox dd {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  /*---------------------------------------------------*/
  /* ストーリー部分 */
  /*---------------------------------------------------*/
  section#story {
    position: relative;
    width: 100%;
    margin: 0 auto;
    /*background-color: rgba(75, 165, 203, 0.2);
  border-radius: 12px;*/
    z-index: 10;
  }
  /*レイアウト*/
  section#story .inner {
    position: relative;
    width: 96%;
    background-color: rgba(75, 165, 203, 0.2);
    margin: 0 auto;
    padding: 20px 0;
    text-align: center;
    border-radius: 12px;
  }
  .storyList {
    width: 100%;
    margin: 0 auto;
    font-size: 0;
    box-sizing: border-box;
    text-align: center;
  }
  .storyList li {
    display: inline-block;
    width: 46%;
    margin: 5px;
    font-size: 0;
    box-sizing: border-box;
  }
  /*基本レイアウト*/
  .storyBox {
    width: 96%;
    margin: 0 auto;
  }
  .storyBox dt {
    display: block;
    width: 100%;
    float: none;
    clear: both;
    box-sizing: border-box;
  }
  .storyBox dd {
    position: relative;
    width: 100%;
    margin: auto;
    box-sizing: border-box;
  }
  .swiper-container_story {
    height: auto;
    padding-bottom: calc(100%*320/750);
  }
  .swiper-container_story {
    overflow: hidden;
  }
  .storyBox dd .txt {
    padding: 18px 24px;
    font-size: 18px;
    margin-bottom: 12px;
    background-color: rgba(75, 165, 203, 0.2);
    color: #3389ca;
    text-shadow: 1px 1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, -1px -1px 0 #FFF;
    border-radius: 12px;
    text-align: left;
    box-sizing: border-box;
  }
  .storyBox dd .sttl {
    padding: 0 24px;
    font-size: 24px;
    margin-bottom: 12px;
    color: #3389ca;
    text-shadow: 1px 1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, -1px -1px 0 #FFF;
    border-radius: 12px;
    text-align: center;
    font-weight: bold;
  }
  .storyBox dd .txt a {
    color: #3389ca;
    text-shadow: 1px 1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, -1px -1px 0 #FFF;
  }
  /*タイトル*/
  section#story h2 {
    font-size: 0;
    width: 153px;
    height: 37px;
    margin: 0 auto 12px;
    background: url('../../_img/h2_story.svg') center top no-repeat;
  }
  /*-----------------------------------------------------------------*/
  section#story .swiper-pagination {
    position: absolute;
    width: 98%;
    height: auto;
    margin: 10px 0 0 -49%;
    left: 50%;
    top: auto;
    z-index: 20;
  }
  /*キャラクター一覧*/
  section#story .swiper-pagination span {
    display: block;
    width: 116px;
    height: auto;
    margin: 0 1px;
	padding-bottom: calc(100%*136/750);
    cursor: pointer;
    float: left;
    transition: all 300ms 0s ease;
  }
  
  /*オンマウス*/
  section#story .swiper-pagination span.swiper-pagination-bullet-active, section#story .swiper-pagination span:hover {
    opacity: 0.6;
  }
  /*-----------*/
  section#story .swiper-button-next, section#story .swiper-button-prev {
    position: absolute;
    top: 220px;
    width: 68px;
    height: 65px;
    margin-top: -10px;
    z-index: 100;
    cursor: pointer;
    background-size: 68px 65px;
    background-position: center;
    background-repeat: no-repeat
  }
  .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    background-image: url("../../_img/chara_left.png");
    left: -16px;
    right: auto
  }
  .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    background-image: url("../../_img/chara_right.png");
    right: -16px;
    left: auto
  }
  section#pv.special .interview .box {
    width: 100%;
    margin: 0 auto;
    padding: 8px;
    line-height: 1.8;
    box-sizing: border-box;
  }
  .interview .box p {
    background-color: rgba(255, 255, 255, 0.94);
    width: 100%;
    margin: 0 auto;
    padding: 24px;
    line-height: 1.8;
    box-sizing: border-box;
  }
  .news_music {
    width: 100%;
    height: auto;
    background: url("../../_img/news_musicsp.svg") no-repeat center top /100% auto;
    margin: 0 auto;
    padding-bottom: calc(100%*140/750);
  }
  .news_music2 {
    width: 100%;
    height: auto;
    background: url("../../_img/news_music2sp.svg") no-repeat center top /100% auto;
    margin: 0 auto;
    padding-bottom: calc(100%*90/750);
  }
  .news_music3 {
    width: 100%;
    height: auto;
    background: url("../../_img/news_music3sp.svg") no-repeat center top /100% auto;
    margin: 0 auto;
    padding-bottom: calc(100%*140/750);
  }
  .news_music4 {
    width: 100%;
    height: auto;
    background: url("../../_img/news_music4sp.svg") no-repeat center top /100% auto;
    margin: 0 auto;
    padding-bottom: calc(100%*90/750);
  }
  ul.musicList {
    width: 96%;
    margin: 0 auto;
    padding: 0;
    font-size: 0;
  }
  ul.musicList li {
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0 8px;
    font-size: 16px;
    font-weight: bold;
    color: #3389ca;
    padding: 0 0 36px;
    box-sizing: border-box;
  }
  .ofk {
    font-size: 18px;
    font-weight: bold;
    color: #3389ca;
    text-align: center;
    display: block;
    padding: 0 0 36px
  }
  section#temp .inner .note p.mb {
    margin-bottom: 0;
  }
  section#temp .inner .note dl.ccc {
    margin: 0;
    padding: 0;
  }
  section#temp .inner .note dl.ccc::after {
    content: "";
    display: block;
    clear: both;
  }
  section#temp .inner .note dl.ccc dt {
    margin: 0;
    padding: 0 0 0.1em;
    width: 5em;
    font-size: 15px;
    float: left;
    clear: both;
  }
  section#temp .inner .note dl.ccc dd {
    margin: 0;
    padding: 0;
    margin-left: 5.1em;
    font-size: 15px;
  }
  .div {
    width: 96%;
    margin: 0 auto 0.5em;
  }
  .div b, p b {
    color: #3389ca;
  }
  /*---------------------------------------------------*/
  /*YOUTUBE*/
  .youtube {
    position: relative;
    width: 100%;
    background: #000;
    padding-bottom: calc(100%* 340/560);
    box-sizing: border-box;
  }
  .youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
  }
  /*---------------------------------------------------*/
  /* フッター */
  footer p.copy {
    width: 100%;
    background-color: rgba(75, 165, 203, 0.2);
    z-index: 10;
    border-radius: 12px 12px 0 0;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    padding: 10px 0;
    margin: 0 auto;
  }
  /*--------------------------------------------------------end@media*/
}