@charset "UTF-8";
/*------------------------------------------*/
@media screen and (max-width: 639px) {
  /*スマホ設定*/
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  /*----------------------------------------------------*/
  /*アニメレイアウト*/
  .anime {
    font-size: 13px;
  }
  /*----------------------------------------------------*/
  /*トップページ背景*/
  .anime.top {
    background: url("image/cmn_bg_lower.png") repeat center top/200% auto;
  }
  /*----------------------------------------------------*/
  /*キャラクターページ背景：帝国赤レイアウト*/
  .anime.teikoku {
    background-image: url("image/cmn_teikokuBG.png"), url("image/cmn_bg_lower.png");
    background-repeat: no-repeat, repeat;
    background-position: center top 40vw, center top;
    background-size: 100% auto, 2400px auto
  }
  /*----------------------------------------------------*/
  /*キャラクターページ背景：共和国レイアウト*/
  .anime.kyowakoku {
    background-image: url("image/cmn_kyowakokuBG.png"), url("image/cmn_bg_lower.png");
    background-repeat: no-repeat, repeat;
    background-position: center top 40vw, center top;
    background-size: 100% auto, 2400px auto
  }
  /*キャラクターページ背景：共和国レイアウト*/
  .anime.zero {
    background-image: url("image/cmn_kyowakokuBG_.png"), url("image/cmn_bg_lower.png");
    background-repeat: no-repeat, repeat;
    background-position: center top 40vw, center top;
    background-size: 100% auto, 2400px auto
  }
  /*----------------------------------------------------*/
  /*PCと共通部分*/
  /* ヘッダー・フッター */
  .anime dl.header dt, .anime dl.header dd {
    min-height: 16vw;
  }
  /*----------------------------------------------------*/
  /*フッター　帝国軍 レイアウト */
  .anime dl.footer dt {
    padding: 22vw 0 7vw 0;
    text-align: right;
    box-sizing: border-box;
  }
  /*フッター　帝国軍 帝国軍アイコン */
  .anime dl.footer dt .icon {
    position: absolute;
    width: 36%;
    height: auto;
    background: url("image/cmn_teikokuIcon.png") no-repeat center top/100% auto;
    padding-bottom: calc(100%*101/82);
    top: -8vw;
    right: 6vw;
    text-align: right;
  }
  /*フッター　帝国軍 リンク設定 */
  .anime dl.footer dt a {
    position: relative;
    width: 64%;
    display: inline-block;
    margin: 0 -5% 0 -15%;
  }
  /*----------------------------------------------------*/
  /*フッター　共和国 レイアウト */
  .anime dl.footer dd {
    padding: 22vw 0 7vw 0;
    text-align: left;
    box-sizing: border-box;
  }
  /*フッター　共和国 共和国軍アイコン */
  .anime dl.footer dd .icon {
    width: 36%;
    height: auto;
    background: url("image/cmn_kyowakokuIcon.png") no-repeat center top/100% auto;
    padding-bottom: calc(100%*101/82);
    top: -8vw;
    left: 6vw;
    text-align: right;
  }
  /*フッター　共和国軍 リンク設定 */
  .anime dl.footer dd a {
    width: 64%;
    position: relative;
    display: inline-block;
    margin: 0 -20% 0 -5%;
  }
  /*----------------------------------------------------*/
  /*----------------------------------------------------*/
  /*下層ページロゴ*/
  .anime dl.header dt .logo {
    position: absolute;
    width: 150%;
    height: auto;
    background: url("image/cmn_logo.png") no-repeat center top/96% auto;
    margin: 0;
    padding-bottom: calc(100%*274/882);
    top: 2vw;
    right: -75%;
    text-indent: -999999px;
  }
  /*リンクホバー設定*/
  .anime dl.header dt .logo:hover {
    background: url("image/cmn_logo.png") no-repeat center top/96% auto;
  }
  /*----------------------------------------------------*/
  /*トップページロゴ*/
  .anime.top .logo {
    position: relative;
    width: 100%;
    height: auto;
    background: url("image/cmn_logo.png") no-repeat right top/100% auto;
    margin: -8vw auto 0;
    padding-bottom: calc(100%*274/882);
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    text-indent: -999999px;
  }
  /*トップページアオリ*/
  .anime.top .aori {
    position: relative;
    width: 86%;
    height: auto;
    background: url("image/cmn_aori.png") no-repeat center bottom/100% auto;
    margin: 0 auto 4px;
    padding-bottom: calc(100%*86/832);
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    text-indent: -999999px;
    z-index: 2;
  }
  /*----------------------------------------------------*/
  /*----------------------------------------------------*/
  /*あらすじ*/
  .anime .story {
    width: 80%;
    height: auto;
    margin: 0 auto;
    text-align: left;
  }
  .anime .story strong {
    display: block;
    padding: 0 0 24px;
    font-size: 24px;
    line-height: 1.4;
    color: #7a1212;
    text-align: center;
  }
  .anime .storyImg {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 90%;
    margin: 24px auto 80px;
    padding: 0;
    font-size: 0;
    text-align: center;
  }
  .anime .storyImg li {
    width: 33.33%;
    padding: 2px 1px 0 0;
  }
  /*ストーリーナビ*/
  .anime .epNavi {
    margin: 0 auto;
    padding: 20px 0 40px 0;
    text-align: center;
  }
  .anime .epNavi li {
    display: inline-block;
    margin: 0 auto;
    padding: 0 10px 4px;
    text-align: center;
  }
  /*----------------------------------------------------*/
  /*----------------------------------------------------*/
  /*トップキャラクター*/
  .anime.top .character {
    width: 46%;
    height: auto;
    background: url("image/cmn_character.png") no-repeat center top/100% auto;
    margin: 6vw auto 0;
    padding-bottom: calc(100%*32/269);
    text-align: center;
  }
  /*帝国軍キャラクター*/
  .anime.teikoku .character {
    width: 50%;
    height: auto;
    background: url("image/cmn_character.png") no-repeat center top/100% auto;
    margin: 14vw auto 0;
    padding-top: 0;
    padding-bottom: calc(100%*35/269);
    text-align: center;
  }
  /*共和国軍キャラクター*/
  .anime.kyowakoku .character {
    width: 50%;
    height: auto;
    background: url("image/cmn_character2.png") no-repeat center top/100% auto;
    margin: 14vw auto 0;
    padding-top: 0;
    padding-bottom: calc(100%*35/269);
    text-align: center;
  }
  /*ゼロ軍団キャラクター*/
  .anime.zero .character {
    width: 50%;
    height: auto;
    background: url("image/cmn_character3.png") no-repeat center top/100% auto;
    margin: 14vw auto 0;
    padding-top: 0;
    padding-bottom: calc(100%*35/269);
    text-align: center;
  }
  /*----------------------------------------------------*/
  /*帝国軍タイトル*/
  .anime .cmn_teikoku {
    width: 100%;
    height: auto;
    background: url("image/cmn_teikoku.png") no-repeat center top/auto 8.5vw;
    margin: 4vw auto 0;
    padding-bottom: calc(100%*26/155);
    text-align: center;
  }
  /*共和国軍タイトル*/
  .anime .cmn_kyowakoku {
    width: 100%;
    height: auto;
    background: url("image/cmn_kyowakoku.png") no-repeat center top/auto 8.5vw;
    margin: 4vw auto 0;
    padding-bottom: calc(100%*26/155);
    text-align: center;
  }
  /*共和国軍タイトル*/
  .anime .cmn_zero {
    width: 100%;
    height: auto;
    background: url("image/cmn_zero.png") no-repeat center top/auto 8.5vw;
    margin: 4vw auto 0;
    padding-bottom: calc(100%*26/155);
    text-align: center;
  }
  /*----------------------------------------------------*/
  /*キャラクター紹介ページ*/
  /*----------------------------------------------------*/
  /*帝国軍 レイアウト ボックス*/
  .teikoku .charabox {
    position: relative;
    width: 98%;
    min-height: 606px;
    margin: 0 auto 100px;
    border: 3px solid #7a1212;
  }
  /*----------------------------------------------------*/
  /*共和国 レイアウト ボックス*/
  .kyowakoku .charabox {
    position: relative;
    width: 98%;
    min-height: 606px;
    margin: 0 auto 100px;
    border: 3px solid #1d2088;
  }
  /*----------------------------------------------------*/
  /*ゼロ軍団 レイアウト ボックス*/
  .zero .charabox {
    position: relative;
    width: 98%;
    min-height: 606px;
    margin: 0 auto 100px;
    border: 3px solid #620a68;
  }
  /*----------------------------------------------------*/
  /*帝国軍テキスト*/
  .teikoku .charabox p {
    position: relative;
    width: 86%;
    margin: 0 auto;
    padding: 0 0 10%;
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0.5em;
    text-shadow: 1px 1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, -1px -1px 0 #FFF;
    top: auto;
    right: auto;
    transform: translateY(0%);
    -webkit- transform: translateY(0%);
  }
  /*帝国軍画像*/
  .teikoku .charabox figure {
    position: relative;
    width: 90%;
    margin: 10% auto 2%;
    top: auto;
    left: auto;
    transform: translateY(0%);
    -webkit- transform: translateY(0%);
  }
  /*----------------------------------------------------*/
  /*共和国テキスト*/
  .kyowakoku .charabox p {
    position: relative;
    width: 86%;
    margin: 0 auto;
    padding: 0 0 10%;
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0.5em;
    text-shadow: 1px 1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, -1px -1px 0 #FFF;
    top: auto;
    left: auto;
    transform: translateY(0%);
    -webkit- transform: translateY(0%);
  }
  /*共和国画像*/
  .kyowakoku .charabox figure {
    position: relative;
    width: 90%;
    margin: 10% auto 2%;
    top: auto;
    right: auto;
    transform: translateY(0%);
    -webkit- transform: translateY(0%);
  }
  /*ゼロ軍団テキスト*/
  .zero .charabox p {
    position: relative;
    width: 86%;
    margin: 0 auto;
    padding: 0 0 10%;
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0.5em;
    text-shadow: 1px 1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, -1px -1px 0 #FFF;
    top: auto;
    right: auto;
    transform: translateY(0%);
    -webkit- transform: translateY(0%);
  }
  /*ゼロ軍団画像*/
  .zero .charabox figure {
    position: relative;
    width: 90%;
    margin: 0% auto 2%;
    top: auto;
    left: auto;
    transform: translateY(0%);
    -webkit- transform: translateY(0%);
  }
  /*----------------------------------------------------*/
  /*画像サイズ*/
  .zoidswild figure img {
    max-width: 100%;
  }
  /*----------------------------------------------------*/
  /* ヘッダー・フッター */
  .anime ul.footer {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background: transparent;
    margin: 0;
    padding: 0;
  }
  /*帝国軍赤グラデーション*/
  .anime ul.footer li.tBG {
    position: relative;
    display: block;
    flex-basis: auto;
    order: 1;
    width: 100%;
    min-height: 84px;
    margin: 0;
    padding: 0;
    /*グラデーション*/
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#18070b+0,9c0100+100 */
    background: #18070b; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #18070b 0%, #9c0100 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #18070b 0%, #9c0100 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #18070b 0%, #9c0100 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#18070b', endColorstr='#9c0100', GradientType=1); /* IE6-9 fallback on horizontal gradient */
    z-index: 2;
  }
  .anime ul.footer li.tBG a {
    flex-wrap: wrap-reverse;
  }
  /*共和国軍青グラデーション*/
  .anime ul.footer li.kBG {
    position: relative;
    display: block;
    flex-basis: auto;
    order: 2;
    width: 100%;
    min-height: 84px;
    margin: 0;
    padding: 0;
    /*グラデーション*/
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0f3791+0,18092f+100 */
    background: #0f3791; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #0f3791 0%, #18092f 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #0f3791 0%, #18092f 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #0f3791 0%, #18092f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0f3791', endColorstr='#18092f', GradientType=1); /* IE6-9 fallback on horizontal gradient */
    z-index: 3;
  }
  /*ゼロ軍団グラデーション*/
  .anime ul.footer li.zBG {
    position: relative;
    display: block;
    flex-basis: auto;
    order: 3;
    width: 100%;
    min-height: 84px;
    margin: 0;
    padding: 0;
    /*グラデーション*/
    background: rgb(122, 18, 18);
    background: linear-gradient(90deg, rgba(122, 18, 18, 1) 0%, rgba(102, 9, 121, 1) 50%, rgba(16, 47, 132, 1) 100%);
    z-index: 1;
  }
  /*----------------------------------------------------*/
  /*フッター　帝国軍 レイアウト */
  .anime ul.footer li.tBG {
    padding: 88px 0 24px 0;
    text-align: center;
    box-sizing: border-box;
  }
  /*フッター　帝国軍 帝国軍アイコン */
  .anime ul.footer li.tBG .icon {
    position: absolute;
    width: 82px;
    height: 101px;
    background: url("image/cmn_teikokuIcon.png") repeat center top/100% auto;
    top: -16px;
    left: 50%;
    margin-left: -38px;
    text-align: center;
  }
  /*フッター　帝国軍 リンク設定 */
  .anime ul.footer li.tBG a {
    position: relative;
    display: inline-block;
    margin: 0 0 0 0;
  }
  /*----------------------------------------------------*/
  /*フッター　共和国 レイアウト */
  .anime ul.footer li.kBG {
     padding: 88px 0 24px 0;
    text-align: center;
    box-sizing: border-box;
  }
  /*フッター　共和国 共和国軍アイコン */
  .anime ul.footer li.kBG .icon {
    position: absolute;
    width: 77px;
    height: 99px;
    background: url("image/cmn_kyowakokuIcon.png") repeat center top/100% auto;
    top: -16px;
    left: 50%;
    margin-left: -38px;
    text-align: center;
  }
  /*フッター　共和国 リンク設定 */
  .anime ul.footer li.kBG a {
    position: relative;
    display: inline-block;
   margin: 0 3px;
  }
  /*----------------------------------------------------*/
  /*フッター　共和国 レイアウト */
  .anime ul.footer li.zBG {
    padding: 48px 0 40px 0;
    text-align: center;
    box-sizing: border-box;
  }
  /*フッター　共和国 共和国軍アイコン */
  .anime ul.footer li.zBG .icon {
    position: absolute;
    width: 77px;
    height: 99px;
    background: url("image/cmn_zeroIcon.png") repeat center top/100% auto;
    top: -16px;
    left: 50%;
    margin-left: -38px;
    text-align: center;
  }
  /*フッター　共和国 リンク設定 */
  .anime ul.footer li.zBG a {
    position: relative;
    display: inline;
    margin: 0 2px;
    text-align: center;
  }
  .anime ul.footer li.zBG a img {
    display: inline;
  }
  /*----------------------------------------------------*/
  /*リンクホバー設定 光量*/
  .anime ul.footer a:hover {
    opacity: 1;
    filter: brightness(120%);
  }
  .anime ul.footer a img:hover {
    opacity: 1;
  }

	
.castTtl, .staffTtl {
  margin: 48px auto 12px;
}
ul.cast {
width:98%;
	margin: 0 auto;
	padding: 0;
	font-size: 0;
  box-sizing: border-box;
}
ul.cast li {
  display: inline-block;
  width: 100%;
  margin: 0 0 24px;
  padding: 0 12px;
  font-size: 14px;
  text-align: center;
}
ul.cast li:nth-child(odd) {
	  margin: 0 0 8px;
  text-align: center;
}
	
	
  /*--------------------------------------------end media*/
}