@keyframes spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
@keyframes flicker {
  0% {
    opacity: 0.1870100455; }
  5% {
    opacity: 0.1893853277; }
  10% {
    opacity: 0.3708260175; }
  15% {
    opacity: 0.3290358037; }
  20% {
    opacity: 0.5593734342; }
  25% {
    opacity: 0.2989451126; }
  30% {
    opacity: 0.3376988777; }
  35% {
    opacity: 0.832752369; }
  40% {
    opacity: 0.6134020086; }
  45% {
    opacity: 0.0633455174; }
  50% {
    opacity: 0.440056856; }
  55% {
    opacity: 0.5390396868; }
  60% {
    opacity: 0.6692262468; }
  65% {
    opacity: 0.5563073475; }
  70% {
    opacity: 0.4077706111; }
  75% {
    opacity: 0.2854028898; }
  80% {
    opacity: 0.6788749053; }
  85% {
    opacity: 0.0268319907; }
  90% {
    opacity: 0.6410148446; }
  95% {
    opacity: 0.4888144962; }
  100% {
    opacity: 0.7966006018; } }
.siteheader .mainmenu li a[href*='characters'] {
  background-color: rgba(205, 205, 203, 0.5);
  text-decoration: none; }

body.characters #contents {
  font-size: 0;
  line-height: 1;
  min-height: 100vh;
  padding-bottom: 31.25vw; }
  body.characters #contents::before {
    display: none; }
  body.characters #contents .contents_bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 166.602vw; }
    body.characters #contents .contents_bg img {
      width: 100%;
      height: auto; }
    body.characters #contents .contents_bg.details {
      position: absolute;
      top: 0; }
  body.characters #contents .pageheader {
    text-align: center;
    position: relative;
    z-index: 10;
    padding: 41.016vw 0 0; }
    body.characters #contents .pageheader img {
      width: 100%;
      height: auto; }
  body.characters #contents .archives {
    padding: 27.5vw 0 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; }
    body.characters #contents .archives .chara {
      width: 50%;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      position: relative;
      padding: 0 2.637vw; }
      body.characters #contents .archives .chara i {
        width: 35.742vw;
        height: 49.023vw;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        position: relative; }
      body.characters #contents .archives .chara img {
        width: 50vw;
        height: auto; }
      body.characters #contents .archives .chara p {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 35.742vw;
        padding: 2.539vw 0 0; }
        body.characters #contents .archives .chara p span {
          font-family: 'Noto Serif JP';
          font-size: 2.539vw;
          letter-spacing: 0.08em;
          color: #fff;
          background: #000;
          margin: 0 auto;
          padding: 0 2.539vw;
          height: 4.297vw;
          display: flex;
          justify-content: center;
          align-items: center; }
      body.characters #contents .archives .chara.new i::before {
        content: '';
        background: url("/harvestella/assets/img/new.png") no-repeat center center/100% 100%;
        width: 13.184vw;
        height: 13.184vw;
        position: absolute;
        left: 50%;
        bottom: 1.953vw;
        z-index: 10;
        margin-left: 6.836vw; }
    body.characters #contents .archives .chara:nth-child(even) {
      align-items: flex-start; }
    body.characters #contents .archives .chara:last-child,
    body.characters #contents .archives .chara:nth-child(even):last-child {
      align-items: center; }
    body.characters #contents .archives .chara:nth-child(n + 3) {
      margin-top: 23.675vw; }
    body.characters #contents .archives .chara:nth-child(6) {
      align-items: flex-start !important; }
  body.characters #contents .cahracters_detail {
    padding: 39.6vw 0 0;
    overflow: hidden; }
    body.characters #contents .cahracters_detail .bg {
      background: url("/harvestella/assets/img/characters/bg_detail.jpg") repeat-y left top/75.977vw auto;
      padding: 0 0;
      position: relative;
      z-index: 0;
      position: absolute;
      left: 0;
      top: 45.0vw;
      width: 100vw;
      height: 100%; }
    body.characters #contents .cahracters_detail .chara {
      padding: 141.344vw 0 0;
      position: relative; }
      body.characters #contents .cahracters_detail .chara img {
        width: 100%;
        height: auto; }
      body.characters #contents .cahracters_detail .chara .absolute_area {
        position: absolute;
        left: 0;
        top: 0; }
        body.characters #contents .cahracters_detail .chara .absolute_area .character_img, body.characters #contents .cahracters_detail .chara .absolute_area h3 {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
          width: 100vw; }
        body.characters #contents .cahracters_detail .chara .absolute_area h1 {
          z-index: 0;
          position: absolute; }
      body.characters #contents .cahracters_detail .chara .imgs a {
        display: block;
        position: relative; }
        body.characters #contents .cahracters_detail .chara .imgs a::after {
          content: '';
          background: url("/harvestella/assets/img/btn_plus.png") no-repeat center center/cover;
          width: 8.789vw;
          height: 8.789vw;
          z-index: 10;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%); }
      body.characters #contents .cahracters_detail .chara .imgs li ~ li {
        padding: 1.953vw 0 0; }
    body.characters #contents .cahracters_detail[data-name='hero'] {
      padding: 26.367vw 0 0; }
      body.characters #contents .cahracters_detail[data-name='hero'] .chara .absolute_area .character_img {
        height: 123.73vw; }
      body.characters #contents .cahracters_detail[data-name='hero'] .chara .absolute_area h1 {
        left: 4.883vw;
        top: 123.535vw;
        width: 90.234vw;
        height: 10.547vw; }
      body.characters #contents .cahracters_detail[data-name='hero'] .chara .text {
        font-size: 2.832vw;
        line-height: 2;
        padding: 0 7.813vw 0 8.789vw;
        letter-spacing: 0.460em;
        margin-bottom: 7.324vw; }
    body.characters #contents .cahracters_detail[data-name='aria'] {
      padding: 39.6vw 0 0; }
      body.characters #contents .cahracters_detail[data-name='aria'] .chara {
        padding-top: 123.73vw; }
        body.characters #contents .cahracters_detail[data-name='aria'] .chara .absolute_area .character_img {
          height: 123.73vw; }
        body.characters #contents .cahracters_detail[data-name='aria'] .chara .absolute_area h1 {
          left: 9.18vw;
          top: 77.441vw;
          width: 64.551vw;
          height: 22.852vw; }
        body.characters #contents .cahracters_detail[data-name='aria'] .chara .text {
          font-size: 2.832vw;
          line-height: 2;
          padding: 0 8.789vw;
          letter-spacing: 0.460em;
          margin-bottom: 6.348vw; }
        body.characters #contents .cahracters_detail[data-name='aria'] .chara .copy {
          padding-bottom: 11.719vw; }
    body.characters #contents .cahracters_detail[data-name='asyl'] .chara {
      padding-top: 126.563vw; }
      body.characters #contents .cahracters_detail[data-name='asyl'] .chara .absolute_area .character_img {
        height: 126.563vw; }
      body.characters #contents .cahracters_detail[data-name='asyl'] .chara .absolute_area h1 {
        left: 34.766vw;
        top: 96.289vw;
        width: 60.059vw;
        height: 22.559vw; }
      body.characters #contents .cahracters_detail[data-name='asyl'] .chara .text {
        font-size: 2.832vw;
        line-height: 2;
        padding: 0 2.93vw 0 8.789vw;
        letter-spacing: 0.460em;
        margin-bottom: 6.348vw; }
      body.characters #contents .cahracters_detail[data-name='asyl'] .chara .copy {
        padding-bottom: 11.719vw; }
    body.characters #contents .cahracters_detail[data-name='shulika'] {
      padding: 28.125vw 0 0; }
      body.characters #contents .cahracters_detail[data-name='shulika'] .chara {
        padding-top: 135.645vw; }
        body.characters #contents .cahracters_detail[data-name='shulika'] .chara .absolute_area .character_img {
          height: 135.645vw; }
        body.characters #contents .cahracters_detail[data-name='shulika'] .chara .absolute_area h1 {
          left: 9.766vw;
          top: 94.359vw;
          width: 85.84vw;
          height: 20.898vw; }
        body.characters #contents .cahracters_detail[data-name='shulika'] .chara .text {
          font-size: 2.832vw;
          line-height: 2;
          padding: 0 2.93vw 0 8.789vw;
          letter-spacing: 0.460em;
          margin-bottom: 6.348vw; }
        body.characters #contents .cahracters_detail[data-name='shulika'] .chara .copy {
          padding-bottom: 11.719vw; }
    body.characters #contents .cahracters_detail[data-name='istina'] {
      padding: 40.43vw 0 0; }
      body.characters #contents .cahracters_detail[data-name='istina'] .chara {
        padding-top: 131.1vw; }
        body.characters #contents .cahracters_detail[data-name='istina'] .chara .absolute_area .character_img {
          height: 135.645vw; }
        body.characters #contents .cahracters_detail[data-name='istina'] .chara .absolute_area h1 {
          left: 7.227vw;
          top: 87.305vw;
          width: 87.305vw;
          height: 22.852vw; }
        body.characters #contents .cahracters_detail[data-name='istina'] .chara .text {
          font-size: 2.832vw;
          line-height: 2;
          padding: 0 2.93vw 0 8.789vw;
          letter-spacing: 0.460em;
          margin-bottom: 6.348vw; }
        body.characters #contents .cahracters_detail[data-name='istina'] .chara .copy {
          padding-bottom: 11.719vw; }
    body.characters #contents .cahracters_detail[data-name='dianthus'] {
      padding: 28.125vw 0 0; }
      body.characters #contents .cahracters_detail[data-name='dianthus'] .chara {
        padding-top: 135.645vw; }
        body.characters #contents .cahracters_detail[data-name='dianthus'] .chara .absolute_area .character_img {
          height: 135.645vw; }
        body.characters #contents .cahracters_detail[data-name='dianthus'] .chara .absolute_area h1 {
          left: 6.366vw;
          top: 113.159vw;
          width: 85.645vw;
          height: 17.969vw; }
        body.characters #contents .cahracters_detail[data-name='dianthus'] .chara .text {
          font-size: 2.832vw;
          line-height: 2;
          padding: 0 2.93vw 0 8.789vw;
          letter-spacing: 0.460em;
          margin-bottom: 6.348vw; }
        body.characters #contents .cahracters_detail[data-name='dianthus'] .chara .copy {
          padding-bottom: 11.719vw; }
    body.characters #contents .cahracters_detail[data-name='heine'] {
      padding: 35.6vw 0 0; }
      body.characters #contents .cahracters_detail[data-name='heine'] .chara {
        padding-top: 135.156vw; }
        body.characters #contents .cahracters_detail[data-name='heine'] .chara .absolute_area .character_img {
          height: 120.117vw; }
        body.characters #contents .cahracters_detail[data-name='heine'] .chara .absolute_area h1 {
          left: 5.762vw;
          top: 102.246vw;
          width: 86.328vw;
          height: 22.852vw; }
        body.characters #contents .cahracters_detail[data-name='heine'] .chara .text {
          font-size: 2.832vw;
          line-height: 2;
          padding: 0 2.93vw 0 8.789vw;
          letter-spacing: 0.460em;
          margin-bottom: 6.348vw; }
        body.characters #contents .cahracters_detail[data-name='heine'] .chara .copy {
          padding-bottom: 11.719vw; }
    body.characters #contents .cahracters_detail[data-name='emo'] {
      padding: 43.6vw 0 0; }
      body.characters #contents .cahracters_detail[data-name='emo'] .chara {
        padding-top: 129.59vw; }
        body.characters #contents .cahracters_detail[data-name='emo'] .chara .absolute_area .character_img {
          height: 112.598vw; }
        body.characters #contents .cahracters_detail[data-name='emo'] .chara .absolute_area h1 {
          left: 5.566vw;
          top: 94.434vw;
          width: 64.551vw;
          height: 22.852vw; }
        body.characters #contents .cahracters_detail[data-name='emo'] .chara .text {
          font-size: 2.832vw;
          line-height: 2;
          padding: 0 8.789vw;
          letter-spacing: 0.460em;
          margin-bottom: 8.301vw; }
        body.characters #contents .cahracters_detail[data-name='emo'] .chara .copy {
          padding-bottom: 11.719vw; }
    body.characters #contents .cahracters_detail[data-name='brakka'] {
      padding: 32.68vw 0 0; }
      body.characters #contents .cahracters_detail[data-name='brakka'] .chara {
        padding-top: 135.156vw; }
        body.characters #contents .cahracters_detail[data-name='brakka'] .chara .absolute_area .character_img {
          height: 120.117vw; }
        body.characters #contents .cahracters_detail[data-name='brakka'] .chara .absolute_area h1 {
          left: 5.762vw;
          top: 109.863vw;
          width: 88.574vw;
          height: 18.945vw; }
        body.characters #contents .cahracters_detail[data-name='brakka'] .chara .text {
          font-size: 2.832vw;
          line-height: 2;
          padding: 0 2.93vw 0 8.789vw;
          letter-spacing: 0.460em;
          margin-top: 4.004vw;
          margin-bottom: 6.348vw; }
        body.characters #contents .cahracters_detail[data-name='brakka'] .chara .copy {
          padding-bottom: 11.719vw; }
  body.characters #contents .pagenav {
    position: relative;
    background: url("/harvestella/assets/img/characters/btn_character_top.jpg") no-repeat center top/auto 5.273vw;
    height: 5.273vw;
    width: 85.156vw;
    position: relative;
    margin: 17.09vw auto -3.906vw;
    display: flex;
    justify-content: center; }
    body.characters #contents .pagenav a {
      height: 5.273vw;
      width: 50vw;
      display: block; }
    body.characters #contents .pagenav a.next {
      width: 17.578vw;
      background: url("/harvestella/assets/img/characters/btn_next.jpg") no-repeat left top/cover;
      position: absolute;
      right: 0;
      top: 0; }
    body.characters #contents .pagenav a.prev {
      width: 17.578vw;
      background: url("/harvestella/assets/img/characters/btn_prev.jpg") no-repeat left top/cover;
      position: absolute;
      left: 0;
      top: 0; }

@media screen and (min-width: 1024px) {
  /*  pc 1024px ~
  ************************************/
  body.characters #contents {
    min-height: inherit; }

  body.characters #contents {
    padding-bottom: 120px; }
    body.characters #contents .contents_bg {
      position: fixed;
      left: 50%;
      top: 0;
      width: 1920px;
      height: 1249px;
      margin-left: -960px; }
      body.characters #contents .contents_bg img {
        width: 100%;
        height: auto; }
      body.characters #contents .contents_bg.details {
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -960px; }
    body.characters #contents .pageheader {
      padding: 48px 0 0; }
      body.characters #contents .pageheader img {
        width: 1024px;
        height: auto; }
    body.characters #contents .archives {
      padding: 164px 0 0;
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      flex-wrap: wrap; }
      body.characters #contents .archives .chara {
        width: 212px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0;
        padding: 0 0; }
        body.characters #contents .archives .chara i {
          width: 212px;
          height: 182px;
          align-items: center; }
        body.characters #contents .archives .chara img {
          width: 256px;
          height: auto; }
        body.characters #contents .archives .chara p {
          width: 212px;
          padding: 76px 0 0; }
          body.characters #contents .archives .chara p span {
            font-size: 13px;
            padding: 0 13px 2px;
            height: 22px; }
        body.characters #contents .archives .chara.new i::before {
          content: '';
          background: url("/harvestella/assets/img/new@pc.png") no-repeat center center/100% 100%;
          width: 106px;
          height: 106px;
          bottom: -78px;
          z-index: 10;
          margin-left: 25px; }
        body.characters #contents .archives .chara a {
          transition: 0.2s; }
        body.characters #contents .archives .chara a:hover {
          transition: 0.3s;
          opacity: 0.8; }
      body.characters #contents .archives .chara:nth-child(even) {
        align-items: center; }
      body.characters #contents .archives .chara:last-child,
      body.characters #contents .archives .chara:nth-child(even):last-child {
        align-items: center; }
      body.characters #contents .archives .chara:nth-child(n + 3) {
        margin-top: 0; }
      body.characters #contents .archives .chara:nth-child(n + 6) {
        margin-top: 144px; }
      body.characters #contents .archives .chara:nth-child(6) {
        align-items: center; }
    .ie11 body.characters #contents .archives .chara {
      /*border:1px solid red;*/ }
      .ie11 body.characters #contents .archives .chara i {
        position: relative;
        left: -22px; }
      .ie11 body.characters #contents .archives .chara p {
        display: block;
        text-align: center; }
        .ie11 body.characters #contents .archives .chara p span {
          display: inline-block;
          margin: 0 auto;
          padding: 4px 13px 2px; }
      .ie11 body.characters #contents .archives .chara.new i::before {
        content: '';
        margin-left: 31px; }
    body.characters #contents .cahracters_detail {
      overflow: visible;
      margin-top: 12px; }
      body.characters #contents .cahracters_detail .bg {
        background: url("/harvestella/assets/img/characters/bg_detail@pc.jpg") repeat-y left top/1235px auto;
        padding: 0 0;
        position: relative;
        z-index: 0;
        position: absolute;
        left: 50%;
        top: 0;
        width: 1920px;
        height: 100%;
        margin-left: -960px; }
      body.characters #contents .cahracters_detail .chara {
        padding: 0 0 0 0;
        position: relative; }
        body.characters #contents .cahracters_detail .chara img {
          width: 771px;
          height: auto; }
        body.characters #contents .cahracters_detail .chara .absolute_area {
          left: 50%;
          width: 1280px;
          height: 651px;
          margin-left: -640px;
          /* border: 1px solid blue;*/
          overflow: visible;
          z-index: 100;
          pointer-events: none; }
          body.characters #contents .cahracters_detail .chara .absolute_area .character_img, body.characters #contents .cahracters_detail .chara .absolute_area h1 {
            left: 50%;
            width: auto; }
          body.characters #contents .cahracters_detail .chara .absolute_area h1 {
            z-index: 0; }
        body.characters #contents .cahracters_detail .chara .text {
          width: 1280px;
          /* border: 1px solid red;*/
          margin: 0 auto; }
        body.characters #contents .cahracters_detail .chara .imgs {
          width: 100vw;
          display: flex;
          justify-content: flex-start;
          min-width: 1280px;
          /* border: 1px solid green;*/
          position: relative; }
          body.characters #contents .cahracters_detail .chara .imgs::before {
            content: '';
            width: 1280px;
            height: 1000px;
            position: absolute;
            left: 50%;
            top: 0;
            margin-left: -640px; }
          body.characters #contents .cahracters_detail .chara .imgs::after {
            content: '';
            width: 150vw;
            position: absolute;
            left: 50%;
            top: 0;
            background: #fff;
            margin-left: -75vw;
            height: 100%;
            z-index: -1; }
          body.characters #contents .cahracters_detail .chara .imgs li ~ li {
            padding: 0 0; }
          body.characters #contents .cahracters_detail .chara .imgs li {
            background-position: center center;
            background-repeat: no-repeat;
            overflow: hidden;
            background-size: cover; }
            body.characters #contents .cahracters_detail .chara .imgs li img {
              width: auto;
              height: 167px;
              opacity: 0; }
          body.characters #contents .cahracters_detail .chara .imgs a {
            display: flex;
            justify-content: center;
            overflow: hidden;
            height: 167px;
            position: relative; }
            body.characters #contents .cahracters_detail .chara .imgs a::after {
              width: 58px;
              height: 58px; }
            body.characters #contents .cahracters_detail .chara .imgs a::before {
              content: '';
              width: 100%;
              height: 100%;
              position: absolute;
              left: 0;
              top: 0;
              z-index: 10;
              opacity: 0;
              background: white;
              background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%); }
            body.characters #contents .cahracters_detail .chara .imgs a::before {
              transition: 1.2s cubic-bezier(0.165, 0.84, 0.44, 1); }
            body.characters #contents .cahracters_detail .chara .imgs a:hover::before {
              opacity: 1;
              transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); }
      body.characters #contents .cahracters_detail[data-name='hero'] {
        padding-top: 0; }
        body.characters #contents .cahracters_detail[data-name='hero'] .chara {
          padding-top: 0; }
          body.characters #contents .cahracters_detail[data-name='hero'] .chara .absolute_area .character_img {
            height: auto;
            margin: -43px 0 0 6px; }
          body.characters #contents .cahracters_detail[data-name='hero'] .chara .absolute_area h1 {
            left: 104px;
            top: 388px;
            width: auto;
            height: auto; }
            body.characters #contents .cahracters_detail[data-name='hero'] .chara .absolute_area h1 img {
              width: 716px;
              height: 84px; }
          body.characters #contents .cahracters_detail[data-name='hero'] .chara .text {
            font-size: 18px;
            line-height: 43px;
            padding: 140px 560px 0 110px;
            margin-bottom: 0;
            width: 1280px;
            height: 623px; }
          body.characters #contents .cahracters_detail[data-name='hero'] .chara .imgs {
            width: 100vw; }
            body.characters #contents .cahracters_detail[data-name='hero'] .chara .imgs li {
              background-image: url("/harvestella/assets/img/top/character/character01_ss01.png");
              width: 100%;
              padding-right: calc(50vw + 34px);
              min-width: 1280px; }
      body.characters #contents .cahracters_detail[data-name='aria'] {
        padding-top: 0; }
        body.characters #contents .cahracters_detail[data-name='aria'] .bg {
          background-position: right top;
          background-image: url("/harvestella/assets/img/characters/bg_detail_right@pc.jpg");
          background-size: 1153px auto; }
        body.characters #contents .cahracters_detail[data-name='aria'] .chara {
          padding-top: 0; }
          body.characters #contents .cahracters_detail[data-name='aria'] .chara .absolute_area {
            margin: 45px 0 0 -550px;
            height: auto; }
            body.characters #contents .cahracters_detail[data-name='aria'] .chara .absolute_area .character_img {
              height: auto;
              left: 0;
              margin-left: -48px;
              margin-top: -97px; }
              body.characters #contents .cahracters_detail[data-name='aria'] .chara .absolute_area .character_img img {
                width: 574px;
                height: auto; }
            body.characters #contents .cahracters_detail[data-name='aria'] .chara .absolute_area h1 {
              left: 412px;
              top: 360px;
              width: auto;
              height: auto; }
              body.characters #contents .cahracters_detail[data-name='aria'] .chara .absolute_area h1 img {
                width: 428px;
                height: auto; }
          body.characters #contents .cahracters_detail[data-name='aria'] .chara .text {
            font-size: 18px;
            line-height: 43px;
            padding: 60px 90px 0 540px;
            margin-bottom: 0;
            width: 1280px;
            height: 621px; }
          body.characters #contents .cahracters_detail[data-name='aria'] .chara .copy {
            padding-bottom: 0;
            position: absolute;
            left: 50%;
            top: 227px;
            margin-left: -96px; }
            body.characters #contents .cahracters_detail[data-name='aria'] .chara .copy img {
              width: 591px;
              height: auto; }
          body.characters #contents .cahracters_detail[data-name='aria'] .chara .imgs {
            width: calc( 100vw - 68px ); }
            body.characters #contents .cahracters_detail[data-name='aria'] .chara .imgs li {
              background-image: url("/harvestella/assets/img/top/character/character02_ss01.png");
              width: calc(100vw - 68px);
              padding-left: calc(50vw - 34px);
              min-width: 1280px;
              position: relative;
              left: 90px; }
      body.characters #contents .cahracters_detail[data-name='asyl'] {
        padding-top: 0; }
        body.characters #contents .cahracters_detail[data-name='asyl'] .chara {
          padding-top: 0; }
          body.characters #contents .cahracters_detail[data-name='asyl'] .chara .absolute_area .character_img {
            height: auto;
            margin: -18px 0 0 59px; }
            body.characters #contents .cahracters_detail[data-name='asyl'] .chara .absolute_area .character_img img {
              width: 797px;
              height: auto; }
          body.characters #contents .cahracters_detail[data-name='asyl'] .chara .absolute_area h1 {
            left: 392px;
            top: 408px;
            width: auto;
            height: auto; }
            body.characters #contents .cahracters_detail[data-name='asyl'] .chara .absolute_area h1 img {
              width: 411px;
              height: 154px; }
          body.characters #contents .cahracters_detail[data-name='asyl'] .chara .text {
            font-size: 18px;
            line-height: 43px;
            padding: 77px 580px 0 120px;
            margin-bottom: 0;
            width: 1280px;
            height: 622px; }
          body.characters #contents .cahracters_detail[data-name='asyl'] .chara .copy {
            padding-bottom: 0;
            position: absolute;
            right: 50%;
            top: 243px;
            margin-right: -75px; }
            body.characters #contents .cahracters_detail[data-name='asyl'] .chara .copy img {
              width: 594px;
              height: auto; }
          body.characters #contents .cahracters_detail[data-name='asyl'] .chara .imgs {
            width: 100vw; }
            body.characters #contents .cahracters_detail[data-name='asyl'] .chara .imgs li {
              background-image: url("/harvestella/assets/img/top/character/character03_ss01.png");
              width: 100%;
              padding-right: calc(50vw + 34px);
              min-width: 1280px; }
      body.characters #contents .cahracters_detail[data-name='shulika'] {
        padding-top: 0; }
        body.characters #contents .cahracters_detail[data-name='shulika'] .bg {
          background-position: right top;
          background-image: url("/harvestella/assets/img/characters/bg_detail_right@pc.jpg");
          background-size: 1153px auto; }
        body.characters #contents .cahracters_detail[data-name='shulika'] .chara {
          padding-top: 0; }
          body.characters #contents .cahracters_detail[data-name='shulika'] .chara .absolute_area {
            margin: 0 0 0 -550px;
            height: auto; }
            body.characters #contents .cahracters_detail[data-name='shulika'] .chara .absolute_area .character_img {
              height: auto;
              right: 50%;
              left: auto;
              margin-right: 255px;
              margin-top: -113px; }
              body.characters #contents .cahracters_detail[data-name='shulika'] .chara .absolute_area .character_img img {
                width: 594px;
                height: auto; }
            body.characters #contents .cahracters_detail[data-name='shulika'] .chara .absolute_area h1 {
              left: 412px;
              top: 406px;
              width: auto;
              height: auto; }
              body.characters #contents .cahracters_detail[data-name='shulika'] .chara .absolute_area h1 img {
                width: 635px;
                height: auto; }
          body.characters #contents .cahracters_detail[data-name='shulika'] .chara .text {
            font-size: 18px;
            line-height: 43px;
            padding: 60px 90px 0 540px;
            margin-bottom: 0;
            width: 1280px;
            height: 621px; }
          body.characters #contents .cahracters_detail[data-name='shulika'] .chara .copy {
            padding-bottom: 0;
            position: absolute;
            left: 50%;
            top: 227px;
            margin-left: -96px; }
            body.characters #contents .cahracters_detail[data-name='shulika'] .chara .copy img {
              width: 681px;
              height: auto; }
          body.characters #contents .cahracters_detail[data-name='shulika'] .chara .imgs {
            width: calc( 100vw - 68px ); }
            body.characters #contents .cahracters_detail[data-name='shulika'] .chara .imgs li {
              background-image: url("/harvestella/assets/img/top/character/character04_ss01.png");
              width: calc(100vw - 68px );
              padding-left: calc(50vw - 34px );
              min-width: 1280px;
              position: relative;
              left: 90px; }
      body.characters #contents .cahracters_detail[data-name='istina'] {
        padding-top: 0; }
        body.characters #contents .cahracters_detail[data-name='istina'] .chara {
          padding-top: 0; }
          body.characters #contents .cahracters_detail[data-name='istina'] .chara .absolute_area .character_img {
            height: auto;
            margin: -31px 0 0 8px; }
            body.characters #contents .cahracters_detail[data-name='istina'] .chara .absolute_area .character_img img {
              width: 625px;
              height: auto; }
          body.characters #contents .cahracters_detail[data-name='istina'] .chara .absolute_area h1 {
            left: 264px;
            top: 433px;
            width: auto;
            height: auto; }
            body.characters #contents .cahracters_detail[data-name='istina'] .chara .absolute_area h1 img {
              width: 576px;
              height: auto; }
          body.characters #contents .cahracters_detail[data-name='istina'] .chara .text {
            font-size: 18px;
            line-height: 43px;
            padding: 77px 580px 0 120px;
            margin-bottom: 0;
            width: 1280px;
            height: 622px; }
          body.characters #contents .cahracters_detail[data-name='istina'] .chara .copy {
            padding-bottom: 0;
            position: absolute;
            right: 50%;
            top: 293px;
            margin-right: 43px; }
            body.characters #contents .cahracters_detail[data-name='istina'] .chara .copy img {
              width: 479px;
              height: auto; }
          body.characters #contents .cahracters_detail[data-name='istina'] .chara .imgs {
            width: 100vw; }
            body.characters #contents .cahracters_detail[data-name='istina'] .chara .imgs li {
              background-image: url("/harvestella/assets/img/characters/character05_ss01.png");
              width: 100%;
              padding-right: calc(50vw);
              min-width: 1280px; }
            body.characters #contents .cahracters_detail[data-name='istina'] .chara .imgs a::after {
              margin-left: -33px; }
      body.characters #contents .cahracters_detail[data-name='dianthus'] {
        padding-top: 0; }
        body.characters #contents .cahracters_detail[data-name='dianthus'] .bg {
          background-position: right top;
          background-image: url("/harvestella/assets/img/characters/bg_detail_right@pc.jpg");
          background-size: 1153px auto; }
        body.characters #contents .cahracters_detail[data-name='dianthus'] .chara {
          padding-top: 0; }
          body.characters #contents .cahracters_detail[data-name='dianthus'] .chara .absolute_area {
            margin: 0 0 0 -550px;
            height: auto; }
            body.characters #contents .cahracters_detail[data-name='dianthus'] .chara .absolute_area .character_img {
              height: auto;
              right: 50%;
              left: auto;
              margin-right: -137px;
              margin-top: -60px; }
              body.characters #contents .cahracters_detail[data-name='dianthus'] .chara .absolute_area .character_img img {
                width: 829px;
                height: auto; }
            body.characters #contents .cahracters_detail[data-name='dianthus'] .chara .absolute_area h1 {
              left: 443px;
              top: 440px;
              width: auto;
              height: auto;
              z-index: 999; }
              body.characters #contents .cahracters_detail[data-name='dianthus'] .chara .absolute_area h1 img {
                width: 635px;
                height: auto; }
          body.characters #contents .cahracters_detail[data-name='dianthus'] .chara .text {
            font-size: 18px;
            line-height: 43px;
            padding: 60px 90px 0 540px;
            margin-bottom: 0;
            width: 1280px;
            height: 621px;
            position: relative;
            z-index: 999; }
          body.characters #contents .cahracters_detail[data-name='dianthus'] .chara .copy {
            padding-bottom: 0;
            position: absolute;
            left: 50%;
            top: 286px;
            margin-left: -96px;
            z-index: 999; }
            body.characters #contents .cahracters_detail[data-name='dianthus'] .chara .copy img {
              width: 589px;
              height: auto; }
          body.characters #contents .cahracters_detail[data-name='dianthus'] .chara .imgs {
            width: calc( 100vw - 68px ); }
            body.characters #contents .cahracters_detail[data-name='dianthus'] .chara .imgs li {
              background-image: url("/harvestella/assets/img/characters/character06_ss01.png");
              width: calc(100vw - 68px );
              padding-left: calc(50vw - 34px );
              min-width: 1280px;
              position: relative;
              left: 90px; }
      body.characters #contents .cahracters_detail[data-name='heine'] {
        padding-top: 0; }
        body.characters #contents .cahracters_detail[data-name='heine'] .chara {
          padding-top: 0; }
          body.characters #contents .cahracters_detail[data-name='heine'] .chara .absolute_area .character_img {
            height: auto;
            margin: -10px 0 0 155px; }
            body.characters #contents .cahracters_detail[data-name='heine'] .chara .absolute_area .character_img img {
              width: 540px;
              height: auto; }
          body.characters #contents .cahracters_detail[data-name='heine'] .chara .absolute_area h1 {
            left: 225px;
            top: 430px;
            width: auto;
            height: auto; }
            body.characters #contents .cahracters_detail[data-name='heine'] .chara .absolute_area h1 img {
              width: 574px;
              height: 151px; }
          body.characters #contents .cahracters_detail[data-name='heine'] .chara .text {
            font-size: 18px;
            line-height: 43px;
            padding: 77px 580px 0 120px;
            margin-bottom: 0;
            width: 1280px;
            height: 622px; }
          body.characters #contents .cahracters_detail[data-name='heine'] .chara .copy {
            padding-bottom: 0;
            position: absolute;
            right: 50%;
            top: 274px;
            margin-right: -157px; }
            body.characters #contents .cahracters_detail[data-name='heine'] .chara .copy img {
              width: 679px;
              height: auto; }
          body.characters #contents .cahracters_detail[data-name='heine'] .chara .imgs {
            width: 100vw; }
            body.characters #contents .cahracters_detail[data-name='heine'] .chara .imgs li {
              background-image: url("/harvestella/assets/img/characters/character07_ss01.png");
              width: 100%;
              padding-right: calc(50vw + 34px);
              min-width: 1280px; }
      body.characters #contents .cahracters_detail[data-name='emo'] {
        padding-top: 0; }
        body.characters #contents .cahracters_detail[data-name='emo'] .bg {
          background-position: right top;
          background-image: url("/harvestella/assets/img/characters/bg_detail_right@pc.jpg");
          background-size: 1153px auto; }
        body.characters #contents .cahracters_detail[data-name='emo'] .chara {
          padding-top: 0; }
          body.characters #contents .cahracters_detail[data-name='emo'] .chara .absolute_area {
            margin: 45px 0 0 -550px;
            height: auto; }
            body.characters #contents .cahracters_detail[data-name='emo'] .chara .absolute_area .character_img {
              height: auto;
              left: 0;
              margin-left: -188px;
              margin-top: -147px; }
              body.characters #contents .cahracters_detail[data-name='emo'] .chara .absolute_area .character_img img {
                width: 696px;
                height: auto; }
            body.characters #contents .cahracters_detail[data-name='emo'] .chara .absolute_area h1 {
              left: 438px;
              top: 300px;
              width: auto;
              height: auto; }
              body.characters #contents .cahracters_detail[data-name='emo'] .chara .absolute_area h1 img {
                width: 413px;
                height: auto; }
          body.characters #contents .cahracters_detail[data-name='emo'] .chara .text {
            font-size: 18px;
            line-height: 43px;
            padding: 60px 90px 0 540px;
            margin-bottom: 0;
            width: 1280px;
            height: 550px; }
          body.characters #contents .cahracters_detail[data-name='emo'] .chara .copy {
            padding-bottom: 0;
            position: absolute;
            left: 50%;
            top: 208px;
            margin-left: -74px; }
            body.characters #contents .cahracters_detail[data-name='emo'] .chara .copy img {
              width: 163px;
              height: auto; }
          body.characters #contents .cahracters_detail[data-name='emo'] .chara .imgs {
            width: calc( 100vw - 68px ); }
            body.characters #contents .cahracters_detail[data-name='emo'] .chara .imgs li {
              background-image: url("/harvestella/assets/img/characters/character08_ss01.png");
              width: calc(100vw - 68px);
              padding-left: calc(50vw - 34px);
              min-width: 1280px;
              position: relative;
              left: 90px; }
      body.characters #contents .cahracters_detail[data-name='brakka'] {
        padding-top: 0; }
        body.characters #contents .cahracters_detail[data-name='brakka'] .chara {
          padding-top: 0; }
          body.characters #contents .cahracters_detail[data-name='brakka'] .chara .absolute_area .character_img {
            height: auto;
            margin: -2px 0 0 -3px; }
            body.characters #contents .cahracters_detail[data-name='brakka'] .chara .absolute_area .character_img img {
              width: 733px;
              height: auto; }
          body.characters #contents .cahracters_detail[data-name='brakka'] .chara .absolute_area h1 {
            left: 112px;
            top: 430px;
            width: auto;
            height: auto; }
            body.characters #contents .cahracters_detail[data-name='brakka'] .chara .absolute_area h1 img {
              width: 691px;
              height: 146px; }
          body.characters #contents .cahracters_detail[data-name='brakka'] .chara .text {
            font-size: 18px;
            line-height: 43px;
            padding: 77px 580px 0 120px;
            margin-bottom: 0;
            width: 1280px;
            height: 622px; }
          body.characters #contents .cahracters_detail[data-name='brakka'] .chara .copy {
            padding-bottom: 0;
            position: absolute;
            right: 50%;
            top: 274px;
            margin-right: -44px; }
            body.characters #contents .cahracters_detail[data-name='brakka'] .chara .copy img {
              width: 565px;
              height: auto; }
          body.characters #contents .cahracters_detail[data-name='brakka'] .chara .imgs {
            width: 100vw; }
            body.characters #contents .cahracters_detail[data-name='brakka'] .chara .imgs li {
              background-image: url("/harvestella/assets/img/characters/character09_ss01.png");
              width: 100%;
              padding-right: calc(50vw + 34px);
              min-width: 1280px; }
    body.characters #contents .pagenav {
      position: relative;
      background: url("/harvestella/assets/img/characters/btn_character_top@pc.jpg") no-repeat center top/auto 26px;
      height: 26px;
      width: 411px;
      position: relative;
      margin: 74px auto -44px;
      z-index: 1000;
      display: flex;
      justify-content: center; }
      body.characters #contents .pagenav a {
        height: 26px;
        width: 211px;
        display: block; }
      body.characters #contents .pagenav a.next {
        width: 100px;
        background: url("/harvestella/assets/img/characters/btn_next@pc.jpg") no-repeat left top/cover;
        position: absolute;
        right: 0;
        top: 0; }
      body.characters #contents .pagenav a.prev {
        width: 100px;
        background: url("/harvestella/assets/img/characters/btn_prev@pc.jpg") no-repeat left top/cover;
        position: absolute;
        left: 0;
        top: 0; }
      body.characters #contents .pagenav a[href*='index']:hover {
        background-color: rgba(255, 255, 255, 0.5); }
      body.characters #contents .pagenav a {
        transition: 0.2s; }
      body.characters #contents .pagenav a:hover {
        transition: 0.3s;
        opacity: 0.7; } }
@media screen and (min-width: 1024px) {
  /*  pc 1024px ~
  ************************************/ }
@media screen and (min-width: 1280px) {
  /*  pc 1280px ~
  ************************************/ }
@media screen and (min-width: 1920px) {
  /*  pc 1920px ~
  ************************************/
  body.characters #contents::before {
    content: '';
    width: 100%;
    height: 78.125vw;
    left: 0;
    margin-left: 0; }
  body.characters #contents .contents_bg {
    left: 0%;
    height: auto;
    margin-left: 0;
    width: 100vw; }
    body.characters #contents .contents_bg img {
      width: 100%;
      height: auto; }
  body.characters #contents .contents_bg.details {
    left: 0%;
    height: auto;
    margin-left: 0;
    width: 100vw; }
    body.characters #contents .contents_bg.details img {
      width: 100%;
      height: auto; }
  body.characters #contents .cahracters_detail .bg {
    background: url("/harvestella/assets/img/characters/bg_detail@pc.jpg") repeat-y left top/100% auto;
    left: auto;
    right: 50%;
    top: 0;
    width: 64.323vw;
    height: 100%;
    margin-left: auto;
    margin-right: -275px; }
  body.characters #contents .cahracters_detail[data-name='dianthus'] .bg,
  body.characters #contents .cahracters_detail[data-name='shulika'] .bg,
  body.characters #contents .cahracters_detail[data-name='aria'] .bg {
    background-position: right top;
    background-image: url("/harvestella/assets/img/characters/bg_detail_right@pc.jpg");
    background-size: 100% auto;
    right: auto;
    left: 50%;
    width: 60.052vw;
    margin-left: -193px;
    margin-right: auto; } }