@charset "UTF-8";
/*==========================================================================================================
 
	common font
 
===========================================================================================================*/
/*==========================================================================================================
 
	character color
 
===========================================================================================================*/
@keyframes mepachi {
  0% {
    opacity: 0; }
  0.5% {
    opacity: 1; }
  1% {
    opacity: 1; }
  1.5% {
    opacity: 0; }
  70% {
    opacity: 0; }
  71.5% {
    opacity: 1; }
  71.8% {
    opacity: 1; }
  72.5% {
    opacity: 0; }
  72.7% {
    opacity: 0; }
  73.1% {
    opacity: 1; }
  73.3% {
    opacity: 1; }
  73.8% {
    opacity: 0; }
  100% {
    opacity: 0; } }
@keyframes mepachi2 {
  0% {
    opacity: 0; }
  50% {
    opacity: 0; }
  51% {
    opacity: 1; }
  52% {
    opacity: 1; }
  53% {
    opacity: 0; }
  80% {
    opacity: 0; }
  81% {
    opacity: 1; }
  82% {
    opacity: 1; }
  83% {
    opacity: 0; }
  100% {
    opacity: 0; } }
#content {
  max-width: 100%;
  padding: 0; }
  #content .fixed {
    position: fixed;
    z-index: 10;
    top: 40%;
    right: -15px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
    #content .fixed:hover {
      right: -4px; }
    #content .fixed.sp {
      display: none; }
  #content .item {
    position: absolute;
    opacity: 0;
    top: 0;
    right: 0; }
    #content .item.front {
      top: 50px; }
    #content .item.front2 {
      z-index: -1;
      top: -110px; }
    #content .item.c1 {
      top: 80px; }
    #content .item.c2 {
      top: 80px; }
    #content .item.c3 {
      top: 80px; }
    #content .item.c4 {
      top: 80px; }
    #content .item.c5 {
      top: 50px; }
    #content .item.c6 {
      top: 50px; }
    #content .item.c7 {
      top: 70px; }
    #content .item.c8 {
      top: 50px; }
    #content .item.c9 {
      top: 50px; }
    #content .item.c10 {
      top: 50px; }
    #content .item.c11 {
      top: 50px; }
    #content .item.c12 {
      top: 80px; }
    #content .item.c13 {
      top: 80px; }
    #content .item.c14 {
      top: 80px; }
    #content .item.c15 {
      top: 60px; }
    #content .item.c16 {
      top: 60px; }
    #content .item.c17 {
      top: 60px; }

#character .meta {
  position: relative;
  max-width: 1360px;
  margin: 0 auto 60px;
  padding: 0 20px; }
  #character .meta h1 {
    margin-bottom: -15px;
    margin-left: 40px;
    transition: all 0.3s ease; }
  #character .meta .catch {
    margin: 0 0 40px 200px;
    font-size: 20px;
    font-family: A1 Mincho, 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "Sawarabi Mincho", “メイリオ”, Meiryo, serif;
    line-height: 1;
    letter-spacing: .1em;
    text-shadow: 2px 2px 0px #fff;
    			/*
    			text-shadow:
        #fff 2px 0px 2px, #fff -2px 0px 2px,
        #fff 0px -2px 2px, #fff -2px 0px 2px,
        #fff 2px 2px 2px, #fff -2px 2px 2px,
        #fff 2px -2px 2px, #fff -2px -2px 2px,
        #fff 1px 2px 2px, #fff -1px 2px 2px,
        #fff 1px -2px 2px, #fff -1px -2px 2px,
        #fff 2px 1px 2px, #fff -2px 1px 2px,
        #fff 2px -1px 2px, #fff -2px -1px 2px,
        #fff 1px 1px 2px, #fff -1px 1px 2px,
        #fff 1px -1px 2px, #fff -1px -1px 2px;
        */
    color: #08718f;
    transition: all 0.3s ease; }
#character .characterFront {
  margin-bottom: 25px; }
  #character .characterFront .title {
    max-width: 1100px;
    margin: 0 auto 50px; }
    #character .characterFront .title h2 {
      margin-bottom: 5px; }
    #character .characterFront .title .catch {
      margin: 0 0 0 50px;
      font-size: 20px;
      font-family: A1 Mincho, 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "Sawarabi Mincho", “メイリオ”, Meiryo, serif;
      line-height: 1;
      letter-spacing: .1em;
      color: #000f73;
      transition: all 0.3s ease; }
  #character .characterFront ul {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: space-between;
    text-align: center; }
    #character .characterFront ul li {
      position: relative;
      width: 32%;
      border: 1px solid #000F73;
      font-family: A1 Mincho, 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "Sawarabi Mincho", “メイリオ”, Meiryo, serif;
      font-size: 21px;
      line-height: 1;
      background-repeat: no-repeat;
      background-position: left 10px center; }
      #character .characterFront ul li a {
        display: block;
        padding: 20px 0;
        text-decoration: none; }
      #character .characterFront ul li:first-child {
        background-image: url(/assets/img/character/logo1-single@2x.png);
        background-size: 55px auto; }
      #character .characterFront ul li:nth-child(2) {
        background-image: url(/assets/img/character/logo2-single@2x.png);
        background-size: 62px auto; }
      #character .characterFront ul li:nth-child(3) {
        background-image: url(/assets/img/character/logo3-single@2x.png);
        background-size: 64px auto; }
      #character .characterFront ul li img {
        position: absolute;
        top: -23px;
        left: -4px; }
#character .group1 {
  overflow: hidden;
  height: 584px;
  margin-bottom: 50px;
  background-image: url(../img/character/bg-group.jpg);
  background-position: center top;
  background-size: cover; }
  #character .group1 .inner {
    position: relative;
    max-width: 1100px;
    height: 584px;
    margin: 0 auto; }
    #character .group1 .inner a:hover .panel {
      opacity: 1; }
    #character .group1 .inner div.current {
      z-index: 2; }
      #character .group1 .inner div.current img.over {
        opacity: 1; }
    #character .group1 .inner div.notCurrent .char {
      opacity: 0; }
    #character .group1 .inner div img {
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
    #character .group1 .inner div .over {
      position: absolute;
      opacity: 0;
      top: 0;
      left: 0; }
    #character .group1 .inner .c1 {
      position: absolute;
      z-index: 2;
      top: 10px;
      left: 546px;
      background-image: url(../img/character/c1_s.png);
      background-repeat: no-repeat; }
      #character .group1 .inner .c1 .panel {
        position: absolute;
        opacity: 0;
        top: 455px;
        left: 50%;
        margin-left: -105px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
    #character .group1 .inner .c2 {
      position: absolute;
      top: 52px;
      left: 840px;
      background-image: url(../img/character/c2_s.png);
      background-repeat: no-repeat; }
      #character .group1 .inner .c2 .panel {
        position: absolute;
        opacity: 0;
        top: 413px;
        left: 50%;
        margin-left: -105px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
    #character .group1 .inner .c3 {
      position: absolute;
      z-index: 1;
      top: 48px;
      left: 210px;
      background-image: url(../img/character/c3_s.png);
      background-repeat: no-repeat; }
    #character .group1 .inner .c3_hover {
      position: absolute;
      z-index: 2;
      top: 48px;
      left: 210px;
      width: 221px;
      height: 778px; }
      #character .group1 .inner .c3_hover .panel {
        position: absolute;
        opacity: 0;
        top: 417px;
        left: 50%;
        margin-left: -105px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
      #character .group1 .inner .c3_hover a {
        display: block;
        width: 221px;
        height: 778px; }
    #character .group1 .inner .c4 {
      position: absolute;
      z-index: 1;
      top: 112px;
      left: 346px;
      background-image: url(../img/character/c4_s.png);
      background-repeat: no-repeat; }
      #character .group1 .inner .c4 .panel {
        position: absolute;
        opacity: 0;
        top: 353px;
        left: 50%;
        margin-left: -105px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
    #character .group1 .inner .c5 {
      position: absolute;
      z-index: 1;
      top: 31px;
      left: 772px;
      background-image: url(../img/character/c5_s.png);
      background-repeat: no-repeat; }
      #character .group1 .inner .c5 .panel {
        position: absolute;
        opacity: 0;
        top: 434px;
        left: 50%;
        margin-left: -105px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
#character .group2 {
  overflow: hidden;
  height: 584px;
  margin-bottom: 90px;
  background-image: url(../img/character/bg-group2.jpg);
  background-position: center top;
  background-size: cover; }
  #character .group2 .inner {
    position: relative;
    max-width: 1100px;
    height: 584px;
    margin: 0 auto; }
    #character .group2 .inner a:hover .panel {
      opacity: 1; }
    #character .group2 .inner h3 {
      position: absolute;
      right: 0; }
    #character .group2 .inner div.current {
      z-index: 2; }
      #character .group2 .inner div.current img.over {
        opacity: 1; }
    #character .group2 .inner div.notCurrent .char {
      opacity: 0; }
    #character .group2 .inner div img {
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
    #character .group2 .inner div .over {
      position: absolute;
      opacity: 0;
      top: 0;
      left: 0; }
    #character .group2 .inner .c6 {
      position: absolute;
      z-index: 1;
      top: 60px;
      left: 378px;
      background-image: url(../img/character/c6_s.png);
      background-repeat: no-repeat; }
      #character .group2 .inner .c6 .panel {
        position: absolute;
        opacity: 0;
        top: 402px;
        left: 50%;
        margin-left: -105px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
    #character .group2 .inner .c7 {
      position: absolute;
      top: 31px;
      left: -46px;
      background-image: url(../img/character/c7_s.png);
      background-repeat: no-repeat; }
    #character .group2 .inner .c7_hover {
      position: absolute;
      z-index: 2;
      top: 31px;
      left: -6px; }
      #character .group2 .inner .c7_hover .panel {
        position: absolute;
        opacity: 0;
        top: 431px;
        left: 50%;
        margin-left: -105px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
      #character .group2 .inner .c7_hover a {
        display: block;
        width: 176px;
        height: 758px; }
    #character .group2 .inner .c8 {
      position: absolute;
      z-index: 1;
      top: 96px;
      left: 265px;
      background-image: url(../img/character/c8_s.png);
      background-repeat: no-repeat; }
      #character .group2 .inner .c8 .panel {
        position: absolute;
        opacity: 0;
        top: 366px;
        left: 50%;
        margin-left: -105px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
    #character .group2 .inner .c9 {
      position: absolute;
      top: 29px;
      left: 59px;
      background-image: url(../img/character/c9_s.png);
      background-repeat: no-repeat; }
    #character .group2 .inner .c9_hover {
      position: absolute;
      z-index: 2;
      top: 29px;
      left: 139px; }
      #character .group2 .inner .c9_hover .panel {
        position: absolute;
        opacity: 0;
        top: 433px;
        left: 50%;
        margin-left: -105px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
      #character .group2 .inner .c9_hover a {
        display: block;
        width: 176px;
        height: 758px; }
    #character .group2 .inner .c10 {
      position: absolute;
      z-index: 1;
      top: 49px;
      left: 586px;
      background-image: url(../img/character/c10_s.png);
      background-repeat: no-repeat; }
      #character .group2 .inner .c10 .panel {
        position: absolute;
        opacity: 0;
        top: 414px;
        left: 50%;
        margin-left: -105px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
    #character .group2 .inner .c11 {
      position: absolute;
      top: 27px;
      left: 770px;
      background-image: url(../img/character/c11_s.png);
      background-repeat: no-repeat; }
      #character .group2 .inner .c11 .panel {
        position: absolute;
        opacity: 0;
        top: 435px;
        left: 50%;
        margin-left: -105px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
#character .group3 {
  overflow: hidden;
  height: 584px;
  margin-bottom: 90px;
  background-image: url(../img/character/bg-group3.jpg);
  background-position: center top;
  background-size: cover; }
  #character .group3 .inner {
    position: relative;
    max-width: 1100px;
    height: 584px;
    margin: 0 auto; }
    #character .group3 .inner a:hover .panel {
      opacity: 1; }
    #character .group3 .inner h3 {
      position: absolute;
      left: 0; }
    #character .group3 .inner div.current {
      z-index: 2; }
      #character .group3 .inner div.current img.over {
        opacity: 1; }
    #character .group3 .inner div.notCurrent .char {
      opacity: 0; }
    #character .group3 .inner div img {
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
    #character .group3 .inner div .over {
      position: absolute;
      opacity: 0;
      top: 0;
      left: 0; }
    #character .group3 .inner .c12 {
      position: absolute;
      top: 29px;
      left: 585px;
      background-image: url(../img/character/c12_s.png);
      background-repeat: no-repeat;
      z-index: 6; }
      #character .group3 .inner .c12 .panel {
        position: absolute;
        opacity: 0;
        top: 415px;
        left: 50%;
        margin-left: -105px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
    #character .group3 .inner .c13 {
      position: absolute;
      top: 69px;
      left: 484px;
      background-image: url(../img/character/c13_s.png);
      background-repeat: no-repeat;
      z-index: 5; }
      #character .group3 .inner .c13 .panel {
        position: absolute;
        opacity: 0;
        top: 375px;
        left: 50%;
        margin-left: -105px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
    #character .group3 .inner .c14 {
      position: absolute;
      top: 57px;
      left: 735px;
      background-image: url(../img/character/c14_s.png);
      background-repeat: no-repeat;
      z-index: 4; }
      #character .group3 .inner .c14 .panel {
        position: absolute;
        opacity: 0;
        top: 387px;
        left: 50%;
        margin-left: -105px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
    #character .group3 .inner .c15 {
      position: absolute;
      top: 58px;
      left: 280px;
      background-image: url(../img/character/c15_s.png);
      background-repeat: no-repeat;
      z-index: 3; }
      #character .group3 .inner .c15 .panel {
        position: absolute;
        opacity: 0;
        top: 386px;
        left: 50%;
        margin-left: -105px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
    #character .group3 .inner .c16 {
      position: absolute;
      top: 36px;
      left: 904px;
      background-image: url(../img/character/c16_s.png);
      background-repeat: no-repeat;
      z-index: 2; }
      #character .group3 .inner .c16 .panel {
        position: absolute;
        opacity: 0;
        top: 408px;
        left: 50%;
        margin-left: -105px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
    #character .group3 .inner .c17 {
      position: absolute;
      top: 17px;
      left: 88px;
      background-image: url(../img/character/c17_s.png);
      background-repeat: no-repeat; }
      #character .group3 .inner .c17 .panel {
        position: absolute;
        opacity: 0;
        top: 427px;
        left: 50%;
        margin-left: -105px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
#character .group1SP {
  display: none; }
#character .group2SP {
  display: none; }
#character .group3SP {
  display: none; }
#character .characterList {
  display: flex;
  position: relative;
  z-index: 5;
  margin: 0 -20px;
  justify-content: space-between;
  flex-wrap: wrap; }
  #character .characterList li {
    padding: 1px;
    background: linear-gradient(#acd1e9, #f6b6c2); }
    #character .characterList li .wrap {
      padding: 5px;
      background-color: #fff; }
      #character .characterList li .wrap a {
        overflow: hidden;
        display: block;
        position: relative;
        background-color: #f6f6f6;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #character .characterList li .wrap a .image {
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #character .characterList li .wrap a .name {
          position: absolute;
          top: 0;
          left: 0; }
    #character .characterList li:hover .wrap a .image {
      transform: scale(1.1); }
  #character .characterList::after {
    display: block;
    content: '';
    width: 182px; }
#character .characterListRed li:nth-child(1) .wrap:hover a {
  background-color: #f08300; }
#character .characterListRed li:nth-child(2) .wrap:hover a {
  background-color: #e60012; }
#character .characterListRed li:nth-child(3) .wrap:hover a {
  background-color: #00afcc; }
#character .characterListRed li:nth-child(4) .wrap:hover a {
  background-color: #f7dc01; }
#character .characterListRed li:nth-child(5) .wrap:hover a {
  background-color: #8e4898; }
#character .characterListBlue li:nth-child(1) .wrap:hover a {
  background-color: #0068b7; }
#character .characterListBlue li:nth-child(2) .wrap:hover a {
  background-color: #e4007f; }
#character .characterListBlue li:nth-child(3) .wrap:hover a {
  background-color: #7d8f9b; }
#character .characterListBlue li:nth-child(4) .wrap:hover a {
  background-color: #7054a0; }
#character .characterListBlue li:nth-child(5) .wrap:hover a {
  background-color: #ece038; }
#character .characterListBlue li:nth-child(6) .wrap:hover a {
  background-color: #afd147; }
#character .characterListYellow li:nth-child(1) .wrap:hover a {
  background-color: #8A2BE2; }
#character .characterListYellow li:nth-child(2) .wrap:hover a {
  background-color: #80989B; }
#character .characterListYellow li:nth-child(3) .wrap:hover a {
  background-color: #D0AF4C; }
#character .characterListYellow li:nth-child(4) .wrap:hover a {
  background-color: #001A43; }
#character .characterListYellow li:nth-child(5) .wrap:hover a {
  background-color: #800000; }
#character .characterListYellow li:nth-child(6) .wrap:hover a {
  background-color: #2CB4AD; }
#character .diagram {
  position: relative;
  margin-bottom: 100px; }
  #character .diagram .title {
    max-width: 1100px;
    margin: 0 auto 50px; }
    #character .diagram .title h2 {
      margin-bottom: 5px; }
    #character .diagram .title .catch {
      margin: 0 0 0 50px;
      font-size: 20px;
      font-family: A1 Mincho, 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "Sawarabi Mincho", “メイリオ”, Meiryo, serif;
      line-height: 1;
      letter-spacing: .1em;
      color: #000f73;
      transition: all 0.3s ease; }
  #character .diagram .image {
    max-width: 1100px;
    margin: 0 auto 50px;
    text-align: center; }
    #character .diagram .image img {
      max-width: 100%; }
    #character .diagram .image.sp {
      display: none; }
    #character .diagram .image .diagramInner {
      position: relative;
      display: inline-block; }
      #character .diagram .image .diagramInner > .shihou {
        position: absolute;
        top: 25%;
        left: 7.6%;
        width: 10.5%;
        height: 21.3%; }
      #character .diagram .image .diagramInner > .kariyazono {
        position: absolute;
        top: 55.5%;
        left: 7.6%;
        width: 10.5%;
        height: 21.3%; }
      #character .diagram .image .diagramInner > .tanba {
        position: absolute;
        top: 19.7%;
        left: 31.45%;
        width: 10.5%;
        height: 21.3%; }
      #character .diagram .image .diagramInner > .suzumiya {
        position: absolute;
        top: 45.2%;
        left: 31.45%;
        width: 10.5%;
        height: 21.3%; }
      #character .diagram .image .diagramInner > .soenji_sayo {
        position: absolute;
        top: 68.7%;
        left: 31.45%;
        width: 10.5%;
        height: 21.3%; }
      #character .diagram .image .diagramInner > .nekoyashiki {
        position: absolute;
        top: 19.7%;
        left: 58.5%;
        width: 10.5%;
        height: 21.3%; }
      #character .diagram .image .diagramInner > .coresawa {
        position: absolute;
        top: 45.2%;
        left: 58.5%;
        width: 10.5%;
        height: 21.3%; }
      #character .diagram .image .diagramInner > .soenji_asaharu {
        position: absolute;
        top: 68.7%;
        left: 58.5%;
        width: 10.5%;
        height: 21.3%; }
      #character .diagram .image .diagramInner > .shigaki {
        position: absolute;
        top: 19.7%;
        left: 79.55%;
        width: 10.5%;
        height: 21.3%; }
      #character .diagram .image .diagramInner > .ayase {
        position: absolute;
        top: 45.2%;
        left: 79.55%;
        width: 10.5%;
        height: 21.3%; }
      #character .diagram .image .diagramInner > .shinkai {
        position: absolute;
        top: 68.7%;
        left: 79.55%;
        width: 10.5%;
        height: 21.3%; }
      @media only screen and (max-width: 768px) {
        #character .diagram .image .diagramInner > .shihou {
          position: absolute;
          top: 5.5%;
          left: 60.2%;
          width: 19.4%;
          height: 12.3%; }
        #character .diagram .image .diagramInner > .kariyazono {
          position: absolute;
          top: 5.5%;
          left: 28.6%;
          width: 19.4%;
          height: 12.3%; }
        #character .diagram .image .diagramInner > .tanba {
          position: absolute;
          top: 29.9%;
          left: 68.15%;
          width: 19.4%;
          height: 12.3%; }
        #character .diagram .image .diagramInner > .suzumiya {
          position: absolute;
          top: 29.9%;
          left: 44.5%;
          width: 19.4%;
          height: 12.3%; }
        #character .diagram .image .diagramInner > .soenji_sayo {
          position: absolute;
          top: 29.9%;
          left: 20%;
          width: 19.4%;
          height: 12.3%; }
        #character .diagram .image .diagramInner > .nekoyashiki {
          position: absolute;
          top: 56.3%;
          left: 68.15%;
          width: 19.4%;
          height: 12.3%; }
        #character .diagram .image .diagramInner > .coresawa {
          position: absolute;
          top: 56.3%;
          left: 44.5%;
          width: 19.4%;
          height: 12.3%; }
        #character .diagram .image .diagramInner > .soenji_asaharu {
          position: absolute;
          top: 56.3%;
          left: 20%;
          width: 19.4%;
          height: 12.3%; }
        #character .diagram .image .diagramInner > .shigaki {
          position: absolute;
          top: 80.1%;
          left: 68.15%;
          width: 19.4%;
          height: 12.3%; }
        #character .diagram .image .diagramInner > .ayase {
          position: absolute;
          top: 80.1%;
          left: 44.5%;
          width: 19.4%;
          height: 12.3%; }
        #character .diagram .image .diagramInner > .shinkai {
          position: absolute;
          top: 80.1%;
          left: 20%;
          width: 19.4%;
          height: 12.3%; } }
  #character .diagram .sp {
    display: none; }
#character .characterImage .charaBg {
  overflow: hidden;
  display: block;
  position: absolute;
  width: 100%;
  height: 770px; }
  #character .characterImage .charaBg div {
    display: block;
    content: '';
    width: 100%;
    height: 770px;
    background-image: url(../img/character/bg2.jpg);
    background-position: center top;
    background-size: cover;
    transform: scale(1.2); }
    #character .characterImage .charaBg div.blue {
      background-image: url(../img/character/bg3.jpg); }
    #character .characterImage .charaBg div.yellow {
      background-image: url(../img/character/bg4.jpg); }
#character .characterImage .inner {
  position: relative;
  max-width: 1360px;
  height: 770px;
  margin: 0 auto; }
  #character .characterImage .inner .image {
    position: absolute;
    z-index: 1;
    opacity: 0;
    top: 0;
    width: 100%;
    text-align: center;
    transform: scale(0.9); }
    #character .characterImage .inner .image.c1 {
      top: -112px; }
    #character .characterImage .inner .image.c2 {
      top: -112px; }
      @media only screen and (max-width: 768px) {
        #character .characterImage .inner .image.c2 .eye {
          position: absolute;
          left: 65%;
          transform: translateX(-50%); } }
    #character .characterImage .inner .image.c3 {
      top: -47px; }
      @media only screen and (max-width: 768px) {
        #character .characterImage .inner .image.c3 .eye {
          position: absolute;
          left: 53%;
          transform: translateX(-50%); } }
    #character .characterImage .inner .image.c4 {
      top: -20px; }
      @media only screen and (max-width: 768px) {
        #character .characterImage .inner .image.c4 .eye {
          position: absolute;
          left: 53.5%;
          transform: translateX(-50%); } }
    #character .characterImage .inner .image.c5 {
      top: -82px; }
    #character .characterImage .inner .image.c6 {
      top: -82px; }
      @media only screen and (max-width: 768px) {
        #character .characterImage .inner .image.c6 .eye {
          position: absolute;
          left: 51.9%;
          transform: translateX(-50%); } }
    #character .characterImage .inner .image.c7 {
      top: -63px; }
    #character .characterImage .inner .image.c8 {
      top: 20px; }
    #character .characterImage .inner .image.c9 {
      top: -82px; }
      @media only screen and (max-width: 768px) {
        #character .characterImage .inner .image.c9 .eye {
          position: absolute;
          left: 52%;
          transform: translateX(-50%); } }
    #character .characterImage .inner .image.c10 {
      top: -82px; }
    #character .characterImage .inner .image.c11 {
      top: -180px; }
    #character .characterImage .inner .image .eye {
      position: absolute;
      opacity: 0;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      animation-name: mepachi2;
      animation-duration: 6s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out; }
    #character .characterImage .inner .image.c12 {
      top: -62px; }
    #character .characterImage .inner .image.c13 {
      top: 32px; }
      @media only screen and (max-width: 768px) {
        #character .characterImage .inner .image.c13 .eye {
          position: absolute;
          left: 57.98%;
          transform: translateX(-50%); } }
    #character .characterImage .inner .image.c14 {
      top: -2px; }
    #character .characterImage .inner .image.c15 {
      top: -40px; }
    #character .characterImage .inner .image.c16 {
      top: -50px; }
      @media only screen and (max-width: 768px) {
        #character .characterImage .inner .image.c16 .eye {
          position: absolute;
          left: 57.98%;
          transform: translateX(-50%); } }
    #character .characterImage .inner .image.c17 {
      top: -80px; }
      @media only screen and (max-width: 768px) {
        #character .characterImage .inner .image.c17 .eye {
          position: absolute;
          left: 56.69%;
          transform: translateX(-50%); } }
  #character .characterImage .inner .serif {
    position: absolute;
    z-index: 2;
    opacity: 0;
    top: -30px;
    left: 0;
    max-height: 770px;
    font-size: 50px;
    font-family: A1 Mincho, 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "Sawarabi Mincho", “メイリオ”, Meiryo, serif;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    color: #000f73;
    transform: translateY(25px); }
    #character .characterImage .inner .serif span {
      writing-mode: horizontal-tb;
      letter-spacing: -0.05em;
      transform: scaleX(0.8); }
  #character .characterImage .inner .serifShadow {
    display: none;
    position: absolute;
    z-index: 1;
    opacity: 0;
    top: -29px;
    left: 1px;
    max-height: 770px;
    font-size: 50px;
    font-family: A1 Mincho, 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "Sawarabi Mincho", “メイリオ”, Meiryo, serif;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    color: #fff;
    transform: translateY(25px); }
    #character .characterImage .inner .serifShadow span {
      writing-mode: horizontal-tb;
      letter-spacing: -0.05em;
      transform: scaleX(0.8); }
  #character .characterImage .inner .name {
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0; }
    #character .characterImage .inner .name img {
      opacity: 0;
      transform: translateY(-100px); }
#character .detail {
  position: relative;
  z-index: 3;
  min-height: 1120px;
  background-color: rgba(255, 255, 255, 0.94); }
  #character .detail .inner {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px; }
    #character .detail .inner .column {
      position: relative;
      margin-bottom: 80px; }
    #character .detail .inner .share {
      position: absolute;
      top: 0;
      right: 0;
      text-align: right; }
      #character .detail .inner .share p {
        display: inline-block;
        vertical-align: middle;
        color: #000f73; }
      #character .detail .inner .share .border {
        display: inline-block;
        width: 70px;
        height: 1px;
        margin-left: 5px;
        background-color: #000f73;
        vertical-align: middle; }
      #character .detail .inner .share a {
        display: inline-block;
        margin-left: 5px;
        vertical-align: middle; }
    #character .detail .inner h2 {
      position: relative;
      top: -30px;
      margin-bottom: -30px;
      font-size: 80px;
      font-family: A1 Mincho, 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "Sawarabi Mincho", “メイリオ”, Meiryo, serif;
      font-weight: normal;
      line-height: 1.2;
      color: #000f73; }
    #character .detail .inner h3 {
      margin-bottom: 20px;
      font-size: 26px;
      font-family: 'Oswald';
      font-weight: normal;
      line-height: 1.2;
      color: #000f73; }
    #character .detail .inner .kana {
      margin-bottom: 20px;
      font-size: 16px;
      color: #000f73; }
    #character .detail .inner .cv {
      margin-bottom: 20px;
      font-size: 22px;
      color: #000f73; }
    #character .detail .inner .section {
      overflow: hidden;
      display: inline-block;
      position: relative;
      min-width: 230px;
      padding: 0 5px 0 10px;
      box-sizing: border-box;
      background-color: #f08300;
      font-size: 16px;
      color: #fff; }
      #character .detail .inner .section::before {
        display: block;
        content: '';
        position: absolute;
        top: 0;
        left: 2px;
        width: 1px;
        height: 200px;
        background-color: #fff; }
      #character .detail .inner .section.c2 {
        background-color: #e60012; }
      #character .detail .inner .section.c3 {
        background-color: #8e4898; }
      #character .detail .inner .section.c4 {
        background-color: #77ccc9; }
      #character .detail .inner .section.c5 {
        background-color: #ffd131; }
      #character .detail .inner .section.c6 {
        background-color: #1459d0; }
      #character .detail .inner .section.c7 {
        background-color: #7054a0; }
      #character .detail .inner .section.c8 {
        background-color: #f14379; }
      #character .detail .inner .section.c9 {
        background-color: #7d8f9b; }
      #character .detail .inner .section.c10 {
        background-color: #ece038; }
      #character .detail .inner .section.c11 {
        background-color: #8bbb76; }
      #character .detail .inner .section.c12 {
        background-color: #8A2BE2; }
      #character .detail .inner .section.c13 {
        background-color: #80989B; }
      #character .detail .inner .section.c14 {
        background-color: #D0AF4C; }
      #character .detail .inner .section.c15 {
        background-color: #001A43; }
      #character .detail .inner .section.c16 {
        background-color: #800000; }
      #character .detail .inner .section.c17 {
        background-color: #2CB4AD; }
    #character .detail .inner .position {
      margin-bottom: 20px;
      font-size: 18px;
      font-weight: bold;
      color: #000f73; }
    #character .detail .inner .logo {
      position: absolute;
      bottom: -30px;
      left: 250px; }
    #character .detail .inner .about {
      margin-bottom: 20px;
      font-size: 16px;
      line-height: 1.8;
      color: #000f73; }
    #character .detail .inner .movie {
      overflow: hidden;
      position: absolute;
      right: 0;
      top: -77px;
      border: 1px solid #000f73; }
      #character .detail .inner .movie .wrap {
        padding: 5px;
        background-color: #fff; }
        #character .detail .inner .movie .wrap a {
          display: block;
          overflow: hidden;
          position: relative; }
          #character .detail .inner .movie .wrap a .image {
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
          #character .detail .inner .movie .wrap a .play {
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
          #character .detail .inner .movie .wrap a:hover .image {
            opacity: 0.8;
            transform: scale(1.05); }
          #character .detail .inner .movie .wrap a:hover .play {
            transform: scale(0.9); }
    #character .detail .inner .characterData {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap; }
      #character .detail .inner .characterData dl {
        display: flex;
        width: 50%;
        margin-bottom: 15px; }
        #character .detail .inner .characterData dl dt {
          overflow: hidden;
          float: left;
          position: relative;
          width: 25%;
          padding: 15px;
          box-sizing: border-box;
          background-color: #b2b7d5;
          font-size: 16px;
          line-height: 1.2;
          color: #fff; }
          #character .detail .inner .characterData dl dt::before {
            display: block;
            content: '';
            position: absolute;
            top: 0;
            left: 2px;
            width: 1px;
            height: 200px;
            background-color: #fff; }
        #character .detail .inner .characterData dl.characterData-none dt {
          padding-bottom: 15px;
          margin-top: -15px; }
        #character .detail .inner .characterData dl dd {
          float: left;
          position: relative;
          width: 75%;
          padding: 15px;
          box-sizing: border-box;
          font-size: 16px;
          line-height: 1.2;
          color: #000f73; }

@media only screen and (max-width: 1200px) {
  #character .meta h1 {
    margin-left: 0; }
  #character .meta .catch {
    margin: 0 0 40px 160px; } }
@media only screen and (max-width: 1000px) {
  #character .group1 {
    display: none; }
  #character .group2 {
    display: none; }
  #character .group3 {
    display: none; }
  #character .characterList {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin: 0;
    padding: 0; }
    #character .characterList li {
      width: 32%;
      margin-bottom: 10px; }
      #character .characterList li img {
        width: 100%; }
    #character .characterList::after {
      width: 32%; }
  #character .group1SP {
    display: block;
    margin-bottom: 40px;
    padding: 20px;
    background-image: url(../img/character/bg-group.jpg);
    background-position: center top;
    background-size: cover; }
    #character .group1SP h3 {
      margin-bottom: 20px;
      text-align: center; }
      #character .group1SP h3 img {
        width: calc(538/640*100%); }
  #character .group2SP {
    display: block;
    margin-bottom: 40px;
    padding: 20px;
    background-image: url(../img/character/bg-group2.jpg);
    background-position: center top;
    background-size: cover; }
    #character .group2SP h3 {
      margin-bottom: 20px;
      text-align: center; }
      #character .group2SP h3 img {
        width: calc(578/640*100%); }
  #character .group3SP {
    display: block;
    padding: 20px;
    background-image: url(../img/character/bg-group3.jpg);
    background-position: center top;
    background-size: cover; }
    #character .group3SP h3 {
      margin-bottom: 20px;
      text-align: center; }
      #character .group3SP h3 img {
        width: calc(578/640*100%); } }
@media only screen and (max-width: 768px) {
  #content .fixed.pc {
    display: none; }
  #content .fixed.sp {
    display: block; }
  #content .item.front {
    top: -21vw;
    right: -12%;
    width: calc(422/640*100%); }
    #content .item.front img {
      width: 100%; }
  #content .item.front2 {
    top: -6vw;
    right: -9%;
    width: calc(478/640*100%); }
    #content .item.front2 img {
      width: 100%; }
  #content .item.c1 {
    top: -21vw;
    right: -8%;
    width: calc(435/640*100%); }
    #content .item.c1 img {
      width: 100%; }
  #content .item.c2 {
    top: -25vw;
    right: -10%;
    width: calc(457/640*100%); }
    #content .item.c2 img {
      width: 100%; }
  #content .item.c3 {
    top: -20vw;
    right: -20%;
    width: calc(460/640*100%); }
    #content .item.c3 img {
      width: 100%; }
  #content .item.c4 {
    top: -20vw;
    right: -9%;
    width: calc(255/640*100%); }
    #content .item.c4 img {
      width: 100%; }
  #content .item.c5 {
    top: -25vw;
    right: -9%;
    width: calc(480/640*100%); }
    #content .item.c5 img {
      width: 100%; }
  #content .item.c6 {
    top: -25vw;
    right: -9%;
    width: calc(410/640*100%); }
    #content .item.c6 img {
      width: 100%; }
  #content .item.c7 {
    top: -23vw;
    right: -3%;
    width: calc(337/640*100%); }
    #content .item.c7 img {
      width: 100%; }
  #content .item.c8 {
    top: -17vw;
    right: -6%;
    width: calc(371/640*100%); }
    #content .item.c8 img {
      width: 100%; }
  #content .item.c9 {
    top: -25vw;
    right: -8%;
    width: calc(312/640*100%); }
    #content .item.c9 img {
      width: 100%; }
  #content .item.c10 {
    top: -23vw;
    right: -16%;
    width: calc(450/640*100%); }
    #content .item.c10 img {
      width: 100%; }
  #content .item.c11 {
    top: -21vw;
    right: -2%;
    width: calc(346/640*100%); }
    #content .item.c11 img {
      width: 100%; }
  #content .item.c12 {
    top: -15vw;
    right: -17%;
    width: calc(443/640*100%); }
    #content .item.c12 img {
      width: 100%; }
  #content .item.c13 {
    top: -20vw;
    right: -12%;
    width: calc(398/640*100%); }
    #content .item.c13 img {
      width: 100%; }
  #content .item.c14 {
    top: -18vw;
    right: -7%;
    width: calc(333/640*100%); }
    #content .item.c14 img {
      width: 100%; }
  #content .item.c15 {
    top: -18vw;
    right: -13%;
    width: calc(473/640*100%); }
    #content .item.c15 img {
      width: 100%; }
  #content .item.c16 {
    top: -18vw;
    right: -14%;
    width: calc(383/640*100%); }
    #content .item.c16 img {
      width: 100%; }
  #content .item.c17 {
    top: -12vw;
    right: -8%;
    width: calc(370/640*100%); }
    #content .item.c17 img {
      width: 100%; }

  #character .meta {
    z-index: 5;
    margin: 0 auto 0; }
    #character .meta h1 {
      margin-bottom: -5px;
      margin-left: 0; }
      #character .meta h1 img {
        width: calc(420/640*100%); }
    #character .meta .catch {
      margin: 0 0 20px 30%;
      font-size: 20px;
      font-size: 3.2552083333vw; }
  #character .diagram {
    padding: 20px 20px 0; }
    #character .diagram .title h2 img {
      width: calc(300/640*100%); }
    #character .diagram .title .catch {
      margin: 0 0 0 10px;
      font-size: 20px;
      font-size: 3.2552083333vw; }
    #character .diagram .image img {
      width: 100%; }
    #character .diagram .image.pc {
      display: none; }
    #character .diagram .image.sp {
      display: block; }
  #character .characterFront {
    margin: 0 20px 20px; }
    #character .characterFront .title h2 img {
      width: calc(366/640*100%); }
    #character .characterFront .title .catch {
      margin: 0 0 0 10px;
      font-size: 20px;
      font-size: 3.2552083333vw; }
    #character .characterFront ul li {
      background-position: center top 10px;
      font-size: 20px;
      font-size: 3.2552083333vw; }
      #character .characterFront ul li a {
        padding: 80px 0 10px; }
      #character .characterFront ul li:nth-child(2) {
        background-position: center top 20px; }
  #character .group1 {
    display: none; }
  #character .group2 {
    display: none; }
  #character .group3 {
    display: none; }
  #character .characterList {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin: 0;
    padding: 0; }
    #character .characterList li {
      width: 32%;
      margin-bottom: 10px; }
      #character .characterList li img {
        width: 100%; }
    #character .characterList::after {
      width: 32%; }
  #character .group1SP {
    display: block;
    margin-bottom: 40px;
    padding: 20px;
    background-image: url(../img/character/bg-group.jpg);
    background-position: center top;
    background-size: cover; }
    #character .group1SP h3 {
      margin-bottom: 20px;
      text-align: center; }
      #character .group1SP h3 img {
        width: calc(538/640*100%); }
  #character .group2SP {
    display: block;
    margin-bottom: 40px;
    padding: 20px;
    background-image: url(../img/character/bg-group2.jpg);
    background-position: center top;
    background-size: cover; }
    #character .group2SP h3 {
      margin-bottom: 20px;
      text-align: center; }
      #character .group2SP h3 img {
        width: calc(578/640*100%); }
  #character .group3SP {
    display: block;
    padding: 20px;
    background-image: url(../img/character/bg-group2.jpg);
    background-position: center top;
    background-size: cover; }
    #character .group3SP h3 {
      margin-bottom: 20px;
      text-align: center; }
      #character .group3SP h3 img {
        width: calc(578/640*100%); }
  #character .characterImage .charaBg {
    height: 120vw; }
  #character .characterImage .inner {
    height: 120vw; }
    #character .characterImage .inner .serif {
      top: -10px;
      font-size: 36px;
      font-size: 5.859375vw; }
      #character .characterImage .inner .serif .nobr {
        display: none; }
    #character .characterImage .inner .serifShadow {
      display: block;
      top: -9px;
      font-size: 36px;
      font-size: 5.859375vw; }
      #character .characterImage .inner .serifShadow .nobr {
        display: none; }
    #character .characterImage .inner .name {
      width: 100%;
      text-align: right; }
      #character .characterImage .inner .name img {
        width: calc(279/640*100%); }
    #character .characterImage .inner .image img {
      width: calc(588/640*100%); }
    #character .characterImage .inner .image.c1 {
      top: -5%; }
    #character .characterImage .inner .image.c2 {
      top: -5%; }
      #character .characterImage .inner .image.c2 img {
        width: calc(829/640*100%);
        margin-left: -10vw; }
    #character .characterImage .inner .image.c3 {
      top: -5%; }
      #character .characterImage .inner .image.c3 img {
        width: calc(529/640*100%);
        margin-right: -6vw; }
    #character .characterImage .inner .image.c4 img {
      width: calc(685/640*100%); }
    #character .characterImage .inner .image.c5 {
      top: -5%; }
      #character .characterImage .inner .image.c5 img {
        width: calc(393/640*100%); }
    #character .characterImage .inner .image.c6 {
      top: -5%; }
      #character .characterImage .inner .image.c6 img {
        width: calc(664/640*100%); }
    #character .characterImage .inner .image.c7 {
      top: -2%; }
      #character .characterImage .inner .image.c7 img {
        width: calc(628/640*100%); }
    #character .characterImage .inner .image.c8 {
      top: 1%; }
      #character .characterImage .inner .image.c8 img {
        width: calc(532/640*100%); }
    #character .characterImage .inner .image.c9 {
      top: -2%; }
      #character .characterImage .inner .image.c9 img {
        width: calc(671/640*100%); }
    #character .characterImage .inner .image.c10 {
      top: -5%; }
      #character .characterImage .inner .image.c10 img {
        width: calc(569/640*100%); }
    #character .characterImage .inner .image.c11 {
      top: -9%; }
      #character .characterImage .inner .image.c11 img {
        width: calc(412/640*100%); }
    #character .characterImage .inner .image.c12 {
      top: -4%; }
      #character .characterImage .inner .image.c12 img {
        width: calc(534/640*100%); }
    #character .characterImage .inner .image.c13 {
      top: 2%; }
      #character .characterImage .inner .image.c13 img {
        width: calc(404/640*100%);
        margin-right: -16vw; }
    #character .characterImage .inner .image.c14 {
      top: -2%; }
      #character .characterImage .inner .image.c14 img {
        width: calc(488/640*100%); }
    #character .characterImage .inner .image.c15 {
      top: -2%; }
      #character .characterImage .inner .image.c15 img {
        width: calc(620/640*100%); }
    #character .characterImage .inner .image.c16 {
      top: -2%; }
      #character .characterImage .inner .image.c16 img {
        width: calc(554/640*100%);
        margin-right: -16vw; }
    #character .characterImage .inner .image.c17 {
      top: -3%; }
      #character .characterImage .inner .image.c17 img {
        width: calc(725/640*100%); }
  #character .detail .inner .column {
    position: static;
    margin-bottom: 10vw; }
  #character .detail .inner .movie {
    top: -10%;
    right: 4%;
    width: 40%;
    height: auto; }
    #character .detail .inner .movie img {
      width: 100%; }
  #character .detail .inner .share {
    position: static; }
    #character .detail .inner .share p {
      font-size: 20px;
      font-size: 3.2552083333vw; }
  #character .detail .inner h2 {
    font-size: 80px;
    font-size: 13.0208333333vw;
    text-shadow: 0px 0px 3px white, 0px 0px 3px white, 0px 0px 3px white; }
  #character .detail .inner .kana {
    font-size: 20px;
    font-size: 3.2552083333vw; }
  #character .detail .inner .cv {
    font-size: 30px;
    font-size: 4.8828125vw; }
  #character .detail .inner .section {
    min-width: 180px;
    font-size: 22px;
    font-size: 3.5807291667vw; }
  #character .detail .inner .logo {
    position: relative;
    bottom: auto;
    left: auto; }
    #character .detail .inner .logo img {
      position: absolute;
      bottom: -30px;
      left: 200px; }
  #character .detail .inner h3 {
    font-size: 40px;
    font-size: 6.5104166667vw; }
  #character .detail .inner .position {
    font-size: 28px;
    font-size: 4.5572916667vw; }
  #character .detail .inner .about {
    font-size: 24px;
    font-size: 3.90625vw; }
  #character .detail .inner .characterData {
    display: block; }
    #character .detail .inner .characterData dl {
      width: 100%;
      margin-bottom: 10px; }
      #character .detail .inner .characterData dl dt {
        width: 25%;
        padding: 15px 8px;
        font-size: 16px;
        font-size: 2.6041666667vw; }
      #character .detail .inner .characterData dl dd {
        width: 75%;
        font-size: 20px;
        font-size: 3.2552083333vw; }
      #character .detail .inner .characterData dl.characterData-none {
        display: none; } }
#unit {
  position: relative;
  z-index: 3;
  min-height: 504px;
  padding: 0 20px;
  background-image: url(../img/character/bg.jpg);
  background-size: cover;
  background-position: bottom center; }
  #unit .unit {
    margin-bottom: 50px; }
  #unit .inner {
    max-width: 1100px;
    margin: 0 auto 50px;
    padding: 0 0 40px; }
    #unit .inner h2 {
      position: relative;
      z-index: 1;
      top: -20px;
      margin-bottom: -20px; }
    #unit .inner .catch {
      position: relative;
      z-index: 1;
      margin: 0 0 30px 130px;
      font-size: 20px;
      font-family: A1 Mincho, 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "Sawarabi Mincho", “メイリオ”, Meiryo, serif;
      line-height: 1;
      letter-spacing: .1em;
      color: #000f73; }
    #unit .inner .logo {
      position: relative;
      z-index: 1;
      margin-bottom: 10px;
      margin-left: -20px; }
    #unit .inner .character {
      position: absolute;
      right: 0;
      bottom: 0; }

@media only screen and (max-width: 1131px) {
  #unit {
    min-height: 0;
    padding: 0 0 20px; }
    #unit .unit {
      margin-bottom: 0; }
    #unit .inner {
      padding: 0 20px; }
      #unit .inner .character {
        right: -5%;
        top: -5%;
        bottom: auto;
        width: 80%; }
        #unit .inner .character img {
          width: 100%; }
      #unit .inner .characterList {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        margin: 0;
        padding: 0; }
        #unit .inner .characterList li {
          width: 16%;
          margin-bottom: 10px; }
          #unit .inner .characterList li img {
            width: 100%; }
        #unit .inner .characterList::after {
          width: 16%; } }
@media only screen and (max-width: 920px) {
  #unit {
    min-height: 0;
    padding: 0 0 20px; }
    #unit .unit {
      margin-bottom: 0; }
    #unit .inner {
      padding: 0 20px; }
      #unit .inner .character {
        right: -5%;
        top: -5%;
        bottom: auto;
        width: 80%; }
        #unit .inner .character img {
          width: 100%; }
      #unit .inner .characterList {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        margin: 0;
        padding: 0; }
        #unit .inner .characterList li {
          width: 32%;
          margin-bottom: 10px; }
          #unit .inner .characterList li img {
            width: 100%; }
        #unit .inner .characterList::after {
          width: 32%; } }
@media only screen and (max-width: 768px) {
  #unit {
    min-height: 0;
    padding-bottom: 20px; }
    #unit .inner h2 img {
      width: calc(300/640*100%); }
    #unit .inner .catch {
      margin: 0 0 50px 30%;
      font-size: 20px;
      font-size: 3.2552083333vw; }
    #unit .inner .logo img {
      width: 100%; }
    #unit .inner .character {
      right: -3%;
      top: -5%;
      bottom: auto;
      width: 80%; }
      #unit .inner .character img {
        width: 100%; }
    #unit .inner .characterList {
      position: relative;
      top: auto;
      left: auto;
      width: 100%;
      margin: 0;
      padding: 0; }
      #unit .inner .characterList li {
        width: 32%;
        margin-bottom: 10px; }
        #unit .inner .characterList li img {
          width: 100%; }
      #unit .inner .characterList::after {
        width: 32%; } }
#other {
  margin: 0 auto 50px; }
  #other .inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px; }
  #other h2 {
    position: relative; }
  #other .catch {
    margin: 0 0 -100px 130px;
    font-size: 20px;
    font-family: A1 Mincho, 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "Sawarabi Mincho", “メイリオ”, Meiryo, serif;
    line-height: 1;
    letter-spacing: .1em;
    color: #000f73; }
  #other .image {
    margin-bottom: 50px;
    text-align: center; }
    #other .image .pc {
      display: block; }
      #other .image .pc img {
        max-width: 100%; }
    #other .image .sp {
      display: none; }

@media only screen and (max-width: 768px) {
  #other {
    margin-bottom: 0;
    padding: 40px 0; }
    #other .inner {
      padding: 0; }
      #other .inner h2 {
        margin-left: 20px; }
        #other .inner h2 img {
          width: calc(404/640*100%); }
      #other .inner .catch {
        margin: 0 0 10px 30%;
        font-size: 20px;
        font-size: 3.2552083333vw; }
    #other .image .pc {
      display: none; }
    #other .image .sp {
      display: block; }
      #other .image .sp img {
        width: 100%; } }
/*-----------------------------------------------
 comments
-----------------------------------------------*/
.commentSp {
  display: none; }

.c1_1 {
  position: absolute;
  opacity: 0;
  top: 40px;
  left: 40px; }

.c1_2 {
  position: absolute;
  opacity: 0;
  top: -20px;
  left: 40px; }

.c1_3 {
  position: absolute;
  opacity: 0;
  top: -10px;
  left: 180px; }

.c1_4 {
  position: absolute;
  opacity: 0;
  top: 61px;
  left: 130px; }

.c1_5 {
  position: absolute;
  opacity: 0;
  top: 41px;
  left: 40px; }

.c2_1 {
  position: absolute;
  opacity: 0;
  top: -26px;
  left: 35px; }

.c2_2 {
  position: absolute;
  opacity: 0;
  top: 60px;
  left: 35px; }

.c2_3 {
  position: absolute;
  opacity: 0;
  top: -51px;
  left: 94px; }

.c2_4 {
  position: absolute;
  opacity: 0;
  top: -20px;
  left: 120px; }

.c2_5 {
  position: absolute;
  opacity: 0;
  top: 70px;
  left: 161px; }

.c2_6 {
  position: absolute;
  opacity: 0;
  top: 70px;
  left: 60px; }

.c3_1 {
  position: absolute;
  opacity: 0;
  top: 40px;
  left: 29px; }

.c3_2 {
  position: absolute;
  opacity: 0;
  top: 60px;
  left: 29px; }

.c3_3 {
  position: absolute;
  opacity: 0;
  top: 40px;
  left: 29px; }

.c3_4 {
  opacity: 0;
  margin-left: 29px; }

.c3_5 {
  opacity: 0;
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 70px; }

.c4_1 {
  position: absolute;
  opacity: 0;
  top: 42px;
  left: 220px; }

.c4_2 {
  opacity: 0;
  margin-bottom: 20px;
  margin-left: 20px; }

.c4_3 {
  opacity: 0;
  margin-left: 20px; }

.c4_4 {
  opacity: 0;
  margin-left: 100px; }

.c5_1 {
  position: absolute;
  opacity: 0;
  top: 42px;
  left: 40px; }

.c5_2 {
  position: absolute;
  opacity: 0;
  top: 42px;
  left: 140px; }

.c5_3 {
  position: absolute;
  opacity: 0;
  top: 42px;
  left: 80px; }

.c5_4 {
  opacity: 0;
  margin-bottom: 20px;
  margin-left: 20px; }

.c5_5 {
  opacity: 0;
  margin-left: 20px; }

.c5_6 {
  opacity: 0;
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 70px; }

.c6_1 {
  position: absolute;
  opacity: 0;
  top: 42px;
  left: 40px; }

.c6_2 {
  position: absolute;
  opacity: 0;
  top: 62px;
  left: 40px; }

.c6_3 {
  opacity: 0;
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 20px; }

.c6_4 {
  opacity: 0;
  margin-left: 20px; }

.c6_5 {
  opacity: 0;
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 20px; }

.c7_1 {
  opacity: 0;
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 20px; }

.c7_2 {
  position: absolute;
  opacity: 0;
  top: 62px;
  left: 40px; }

.c7_3 {
  position: absolute;
  opacity: 0;
  top: 42px;
  left: 40px; }

.c7_4 {
  opacity: 0;
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 20px; }

.c7_5 {
  opacity: 0;
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 20px; }

.c8_1 {
  position: absolute;
  opacity: 0;
  top: 42px;
  left: 100px; }

.c8_2 {
  position: absolute;
  opacity: 0;
  top: 42px;
  left: 60px; }

.c8_3 {
  position: absolute;
  opacity: 0;
  top: 0;
  left: 160px; }

.c8_4 {
  opacity: 0;
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 20px; }

.c8_5 {
  opacity: 0;
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 20px; }

.c9_1 {
  position: absolute;
  opacity: 0;
  top: 42px;
  left: 100px; }

.c9_2 {
  position: absolute;
  opacity: 0;
  top: 62px;
  left: 100px; }

.c9_3 {
  position: absolute;
  opacity: 0;
  top: 42px;
  left: 100px; }

.c9_4 {
  opacity: 0;
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 20px; }

.c9_5 {
  opacity: 0;
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 20px; }

.c9_6 {
  opacity: 0;
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 20px; }

.c10_1 {
  opacity: 0;
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 20px; }

.c10_2 {
  position: absolute;
  opacity: 0;
  top: 42px;
  left: 100px; }

.c10_3 {
  position: absolute;
  opacity: 0;
  top: 62px;
  left: 100px; }

.c10_4 {
  opacity: 0;
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 20px; }

.c10_5 {
  opacity: 0;
  margin-top: 10px;
  margin-left: 20px; }

.c10_6 {
  position: absolute;
  opacity: 0;
  top: 62px;
  left: 100px; }

.c11_1 {
  opacity: 0;
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 20px; }

.c11_2 {
  opacity: 0;
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 20px; }

.c11_3 {
  opacity: 0;
  margin-top: 10px;
  margin-left: 20px; }

.c11_4 {
  opacity: 0;
  margin-top: 10px;
  margin-left: 20px; }

.c12_1 {
  position: absolute;
  opacity: 0;
  top: -40px;
  left: 41px; }

.c12_2 {
  position: absolute;
  opacity: 0;
  top: 37px;
  left: 131px; }

.c12_3 {
  position: absolute;
  opacity: 0;
  top: 40px;
  left: 100px; }

.c12_4 {
  position: absolute;
  opacity: 0;
  top: 35px;
  left: 94px; }

.c12_5 {
  position: absolute;
  opacity: 0;
  top: 43px;
  left: 43px; }

.c12_6 {
  position: absolute;
  opacity: 0;
  top: 39px;
  left: 28px; }

.c13_1 {
  position: absolute;
  opacity: 0;
  top: -60px;
  left: 62px; }

.c13_2 {
  position: absolute;
  opacity: 0;
  top: -25px;
  left: 102px; }

.c13_3 {
  position: absolute;
  opacity: 0;
  top: 74px;
  left: 89px; }

.c13_4 {
  position: absolute;
  opacity: 0;
  top: 41px;
  left: 20px; }

.c13_5 {
  position: absolute;
  opacity: 0;
  top: 41px;
  left: 40px; }

.c14_1 {
  position: absolute;
  opacity: 0;
  top: -37px;
  left: 100px; }

.c14_2 {
  position: absolute;
  opacity: 0;
  top: 60px;
  left: 13px; }

.c14_3 {
  position: absolute;
  opacity: 0;
  top: -46px;
  left: 50px; }

.c14_4 {
  position: absolute;
  opacity: 0;
  top: 44px;
  left: 90px; }

.c14_5 {
  position: absolute;
  opacity: 0;
  top: 60px;
  left: 20px; }

.c15_1 {
  position: absolute;
  opacity: 0;
  top: -91px;
  left: 20px; }

.c15_2 {
  position: absolute;
  opacity: 0;
  top: -2px;
  left: 68px; }

.c15_3 {
  position: absolute;
  opacity: 0;
  top: 38px;
  left: 50px; }

.c15_4 {
  position: absolute;
  opacity: 0;
  top: 38px;
  left: 50px; }

.c15_5 {
  position: absolute;
  opacity: 0;
  top: 40px;
  left: 20px; }

.c16_1 {
  position: absolute;
  opacity: 0;
  top: -5px;
  left: 20px; }

.c16_2 {
  position: absolute;
  opacity: 0;
  top: 38px;
  left: 20px; }

.c16_3 {
  position: absolute;
  opacity: 0;
  top: -98px;
  left: 20px; }

.c16_4 {
  position: absolute;
  opacity: 0;
  top: 40px;
  left: 20px; }

.c16_5 {
  position: absolute;
  opacity: 0;
  top: 34px;
  left: 40px; }

.c16_6 {
  position: absolute;
  opacity: 0;
  top: -5px;
  left: 20px; }

.c16_7 {
  position: absolute;
  opacity: 0;
  top: 37px;
  left: -57px; }

.c17_1 {
  position: absolute;
  opacity: 0;
  top: -64px;
  left: 61px; }

.c17_2 {
  position: absolute;
  opacity: 0;
  top: 40px;
  left: 20px; }

.c17_3 {
  position: absolute;
  opacity: 0;
  top: 8px;
  left: 45px; }

.c17_4 {
  position: absolute;
  opacity: 0;
  top: 58px;
  left: 30px; }

.c17_5 {
  position: absolute;
  opacity: 0;
  top: -112px;
  left: -10px; }

@media only screen and (max-width: 768px) {
  img.comment {
    display: none; }

  .commentSp {
    display: block;
    opacity: 0;
    width: 100%;
    padding: 10px 0; } }
/* remodal */
.remodal-wrapper {
  padding: 50px 35px 50px; }

.remodal {
  max-width: 1200px;
  padding: 0;
  background: transparent; }
  .remodal img {
    max-width: 100%; }
  .remodal .remodal-cancel {
    display: block;
    position: fixed;
    top: -35px;
    right: -35px;
    width: 35px;
    height: 35px;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-size: 0;
    background: transparent; }
    .remodal .remodal-cancel::before {
      content: '';
      position: absolute;
      height: 2px;
      width: 100%;
      top: 50%;
      left: 0;
      margin-top: -1px;
      background: #fff;
      border-radius: 5px;
      margin-top: -6px;
      transform: rotate(45deg); }
    .remodal .remodal-cancel::after {
      content: '';
      position: absolute;
      height: 2px;
      width: 100%;
      top: 50%;
      left: 0;
      margin-top: -1px;
      background: #fff;
      border-radius: 5px;
      margin-top: -6px;
      transform: rotate(-45deg); }

/*# sourceMappingURL=character.css.map */