* {
  font-family: 'Microsoft YaHei';
  margin: 0;
  padding: 0; }

img {
  vertical-align: bottom; }

input, textarea, button {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  padding: 0;
  border-radius: 0; }

a {
  text-decoration: none; }

iframe {
  border: none; }

#root {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; }

@media screen and (min-width: 961px) {
  #skip-button {
    position: absolute;
    bottom: 50px;
    right: 0;
    width: 160px;
    height: 60px;
    background-color: #b9aeda;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    font-size: 30px;
    color: #4A3F55;
    text-align: center;
    line-height: 60px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
    transform: translateX(100%);
    transition: all 0.3s ease 0s;
    border: none;
    cursor: pointer;
    z-index: 1001; } }

@media screen and (min-width: 601px) and (max-width: 960px) {
  #skip-button {
    position: absolute;
    bottom: 50px;
    right: 0;
    width: 160px;
    height: 60px;
    background-color: #b9aeda;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    font-size: 30px;
    color: #4A3F55;
    text-align: center;
    line-height: 60px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
    transform: translateX(100%);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    z-index: 1001; } }

@media screen and (max-width: 600px) {
  #skip-button {
    position: absolute;
    bottom: 50px;
    right: 0;
    width: 100px;
    height: 45px;
    background-color: #A8CBC6;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    font-size: 20px;
    color: #4A3F55;
    text-align: center;
    line-height: 45px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
    transform: translateX(100%);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    z-index: 1001; } }

#skip-button:hover {
  color: #fff;
  background-color: #C2617E; }

#skip-button[data-state="true"] {
  transform: translateX(0%); }

#skip-button[data-state="false"] {
  transform: translateX(100%); }

@media screen and (min-width: 961px) {
  .calling {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 1000px;
    min-height: 650px;
    background-color: #b9aeda;
    overflow: hidden;
    z-index: 998; }
  /*** bg ***/
  .calling__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .calling__bg div {
      position: relative;
      float: left;
      width: 25%;
      height: 25%;
      overflow: hidden; }
      .calling__bg div::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-color: #333;
        transform: translateX(-100%); }
    .calling__bg::after {
      content: "";
      display: block;
      clear: both; }
  /*** controls-btn ***/
  .calling__controls-btn {
    position: absolute;
    bottom: 100px;
    left: calc(50% - 250px);
    width: 500px;
    height: 80px; }
    .calling__controls-btn .btn {
      position: absolute;
      top: 0;
      width: 80px;
      height: 80px;
      overflow: hidden;
      border-radius: 15px;
      transform: rotate(45deg); }
      .calling__controls-btn .btn .fa-phone {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        font-size: 45px;
        text-align: center;
        line-height: 80px;
        display: block;
        opacity: 0; }
      .calling__controls-btn .btn div {
        position: absolute; }
        .calling__controls-btn .btn div::after {
          content: "";
          display: block;
          width: 100%;
          height: 100%;
          background-color: rgba(255, 255, 255, 0.6); }
      .calling__controls-btn .btn div:nth-child(1),
      .calling__controls-btn .btn div:nth-child(3) {
        left: 0;
        width: 100%;
        height: 2px; }
      .calling__controls-btn .btn div:nth-child(2),
      .calling__controls-btn .btn div:nth-child(4) {
        top: 0;
        width: 2px;
        height: 100%; }
      .calling__controls-btn .btn div:nth-child(1) {
        top: 0; }
        .calling__controls-btn .btn div:nth-child(1)::after {
          transform: translateX(100%); }
      .calling__controls-btn .btn div:nth-child(2) {
        left: 0; }
        .calling__controls-btn .btn div:nth-child(2)::after {
          transform: translateY(-100%); }
      .calling__controls-btn .btn div:nth-child(3) {
        bottom: 0; }
        .calling__controls-btn .btn div:nth-child(3)::after {
          transform: translateX(-100%); }
      .calling__controls-btn .btn div:nth-child(4) {
        right: 0; }
        .calling__controls-btn .btn div:nth-child(4)::after {
          transform: translateX(100%); }
    .calling__controls-btn .btn-1 {
      left: 0; }
      .calling__controls-btn .btn-1 .fa-phone {
        color: #af5853;
        transform: rotate(180deg); }
    .calling__controls-btn .btn-2 {
      right: 0; }
      .calling__controls-btn .btn-2 .fa-phone {
        color: #6C9A7B;
        transform: rotate(45deg); }
    .calling__controls-btn .touch {
      position: absolute;
      top: 0;
      right: 0;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      border: solid 40px #fff;
      box-sizing: border-box;
      opacity: 0; }
  /*** icons ***/
  .calling__icons {
    position: absolute;
    top: 100px;
    left: calc(50% - 400px);
    width: 800px;
    height: 150px; }
    .calling__icons .icon-box {
      position: relative;
      margin-right: 100px;
      float: left;
      width: 200px;
      height: 200px; }
      .calling__icons .icon-box .icon {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #fff;
        border-radius: 50%;
        transform: scale(0);
        z-index: 1; }
        .calling__icons .icon-box .icon::after {
          margin: 5px;
          content: "";
          display: block;
          width: calc(100% - 10px);
          height: calc(100% - 10px);
          background-size: cover;
          background-position: center;
          border-radius: 50%;
          transform: scale(0); }
      .calling__icons .icon-box .name {
        position: absolute;
        left: 50px;
        bottom: -50px;
        width: 100px;
        height: 30px;
        font-size: 16px;
        text-align: center;
        line-height: 30px;
        color: #fff;
        overflow: hidden; }
        .calling__icons .icon-box .name span {
          display: block;
          transform: translateY(100%); }
        .calling__icons .icon-box .name::after {
          position: absolute;
          bottom: 0;
          left: 0;
          content: "";
          display: block;
          width: 100%;
          height: 1px;
          transform: translateX(-100%); }
      .calling__icons .icon-box::before, .calling__icons .icon-box::after {
        content: "";
        display: block;
        position: absolute;
        width: calc(100% - 70px);
        height: calc(100% - 70px);
        background-color: #fff;
        border-radius: 50%;
        opacity: 0; }
      .calling__icons .icon-box::before {
        top: -5px;
        left: -5px; }
      .calling__icons .icon-box::after {
        bottom: -5px;
        right: -5px; }
    .calling__icons .icon-box:last-child {
      margin-right: 0; }
    .calling__icons .icon-box:nth-child(1) .icon:after {
      background-color: #817487;
      background-image: url(../images/calling/icons/yui.png); }
    .calling__icons .icon-box:nth-child(1) .name:after {
      background-color: #817487; }
    .calling__icons .icon-box:nth-child(2) .icon:after {
      background-color: #C2617E;
      background-image: url(../images/calling/icons/gab.png); }
    .calling__icons .icon-box:nth-child(2) .name:after {
      background-color: #C2617E; }
    .calling__icons .icon-box:nth-child(3) .icon:after {
      background-color: #A8CBC6;
      background-image: url(../images/calling/icons/eriri.png); }
    .calling__icons .icon-box:nth-child(3) .name:after {
      background-color: #A8CBC6; }
  /*** controls-bar ***/
  .calling__controls-bar {
    position: absolute;
    bottom: 40px;
    left: 50%;
    width: 0px;
    height: 60px;
    background-color: #222;
    border-radius: 30px; }
    .calling__controls-bar .inner {
      width: 280px;
      margin: 0 auto; }
    .calling__controls-bar .btn {
      float: left;
      width: 60px;
      height: 60px;
      font-size: 25px;
      text-align: center;
      line-height: 60px;
      color: #999;
      display: block;
      margin-right: 50px;
      opacity: 0; }
    .calling__controls-bar .btn .fa-phone {
      transform: rotate(225deg);
      color: #af5853;
      font-size: 30px; }
    .calling__controls-bar .btn:last-child {
      margin-right: 0; }
  /*** live-view ***/
  .calling__live-view {
    position: absolute;
    left: calc(50% - 500px);
    top: 0;
    width: 1000px;
    height: calc(100% - 140px); }
    .calling__live-view .view {
      position: absolute;
      width: 50%;
      height: 50%; }
      .calling__live-view .view .char {
        margin-left: 50%;
        margin-top: 10px;
        width: 0;
        height: calc(100% - 20px);
        border-radius: 8px;
        overflow: hidden; }
        .calling__live-view .view .char::after {
          content: "";
          display: block;
          width: 100%;
          height: 100%;
          background-size: auto 100%;
          background-position: center;
          background-repeat: no-repeat;
          opacity: 0; }
      .calling__live-view .view .name {
        position: absolute;
        bottom: 20px;
        left: 20px;
        width: 150px;
        height: 30px; }
        .calling__live-view .view .name::before, .calling__live-view .view .name::after {
          content: "";
          display: block;
          position: absolute;
          width: 80%;
          height: 80%;
          background-color: #6C9A7B;
          border-radius: 20px;
          opacity: 0; }
        .calling__live-view .view .name::before {
          top: -4px;
          left: -4px; }
        .calling__live-view .view .name::after {
          bottom: -4px;
          right: -4px; }
        .calling__live-view .view .name span {
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 0%;
          height: 100%;
          border-radius: 15px;
          background-color: #444;
          font-size: 12px;
          line-height: 30px;
          text-align: center;
          color: #fff;
          overflow: hidden;
          z-index: 1; }
    .calling__live-view .view:nth-child(1) {
      top: 0;
      left: 0; }
      .calling__live-view .view:nth-child(1) .char {
        background-color: #817487; }
        .calling__live-view .view:nth-child(1) .char::after {
          background-image: url(../images/calling/icons/yui_large.png); }
    .calling__live-view .view:nth-child(2) {
      top: 0;
      right: 0; }
      .calling__live-view .view:nth-child(2) .char {
        background-color: #A8CBC6; }
        .calling__live-view .view:nth-child(2) .char::after {
          background-image: url(../images/calling/icons/eriri_large.png); }
    .calling__live-view .view:nth-child(3) {
      bottom: 0;
      left: 25%; }
      .calling__live-view .view:nth-child(3) .char {
        background-color: #C2617E; }
        .calling__live-view .view:nth-child(3) .char::after {
          background-image: url(../images/calling/icons/gab_large.png); }
  .calling__say {
    position: absolute;
    left: -20%;
    top: calc(50% - 200px);
    width: 140%;
    height: 400px;
    transform: rotate(-20deg);
    z-index: 5; }
    .calling__say .line {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform: translateX(-100%); }
    .calling__say .line:nth-child(1) {
      background-color: #817487; }
    .calling__say .line:nth-child(2) {
      background-color: #A8CBC6; }
    .calling__say .line:nth-child(3) {
      background-color: #C2617E; }
    .calling__say .line:nth-child(4) {
      background-color: #4A3F55; }
    .calling__say .img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: auto 35%;
      background-position: center;
      background-repeat: no-repeat;
      background-image: url(../images/calling/say.png);
      opacity: 0; }
  /*** end ***/
  .calling__end {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 6; }
    .calling__end div {
      width: 100%;
      height: 10%;
      overflow: hidden; }
      .calling__end div::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-color: #A8CBC6;
        transform: translateY(-101%); }
  .calling[data-state="start"] {
    /*** bg ***/
    /*** icons ***/
    /*** controls-btn ***/
    /*** controls-bar ***/
    /*** say ***/
    /*** live-view ***/
    /*** end ***/ }
    .calling[data-state="start"] .calling__bg div:nth-child(1):after,
    .calling[data-state="start"] .calling__bg div:nth-child(2):after,
    .calling[data-state="start"] .calling__bg div:nth-child(3):after,
    .calling[data-state="start"] .calling__bg div:nth-child(4):after {
      animation: slide-right 0.4s ease 0s forwards; }
    .calling[data-state="start"] .calling__bg div:nth-child(5):after,
    .calling[data-state="start"] .calling__bg div:nth-child(6):after,
    .calling[data-state="start"] .calling__bg div:nth-child(7):after,
    .calling[data-state="start"] .calling__bg div:nth-child(8):after {
      animation: slide-right 0.4s ease 0.1s forwards; }
    .calling[data-state="start"] .calling__bg div:nth-child(9):after,
    .calling[data-state="start"] .calling__bg div:nth-child(10):after,
    .calling[data-state="start"] .calling__bg div:nth-child(11):after,
    .calling[data-state="start"] .calling__bg div:nth-child(12):after {
      animation: slide-right 0.4s ease 0.2s forwards; }
    .calling[data-state="start"] .calling__bg div:nth-child(13):after,
    .calling[data-state="start"] .calling__bg div:nth-child(14):after,
    .calling[data-state="start"] .calling__bg div:nth-child(15):after,
    .calling[data-state="start"] .calling__bg div:nth-child(16):after {
      animation: slide-right 0.4s ease 0.3s forwards; }
    .calling[data-state="start"] .calling__icons {
      animation: fadeout 0.5s ease 6.6s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box .name {
        animation: fadeout 0.5s ease 6.6s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(1) .icon {
        animation: scale0-0dot5 0.3s ease 2.5s alternate 2 forwards, scale0-1 0.5s ease 3.1s forwards; }
        .calling[data-state="start"] .calling__icons .icon-box:nth-child(1) .icon::after {
          animation: scale0-0dot5 0.3s ease 3.3s alternate 2 forwards, scale0-1 0.5s ease 3.9s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(1) .name span {
        animation: slide-top 0.7s ease 4.5s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(1) .name::after {
        animation: slide-right 0.3s ease 4.6s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(1)::before {
        animation: calling__icon-frame-1 0.8s ease 4s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(1)::after {
        animation: calling__icon-frame-2 0.8s ease 4.1s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(2) .icon {
        animation: scale0-0dot5 0.3s ease 1.5s alternate 2 forwards, scale0-1 0.5s ease 2.1s forwards; }
        .calling[data-state="start"] .calling__icons .icon-box:nth-child(2) .icon::after {
          animation: scale0-0dot5 0.3s ease 2.3s alternate 2 forwards, scale0-1 0.5s ease 2.9s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(2) .name span {
        animation: slide-top 0.7s ease 3.5s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(2) .name::after {
        animation: slide-right 0.3s ease 3.6s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(2)::before {
        animation: calling__icon-frame-1 0.8s ease 3s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(2)::after {
        animation: calling__icon-frame-2 0.8s ease 3.1s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(3) .icon {
        animation: scale0-0dot5 0.3s ease 3.5s alternate 2 forwards, scale0-1 0.5s ease 4.1s forwards; }
        .calling[data-state="start"] .calling__icons .icon-box:nth-child(3) .icon::after {
          animation: scale0-0dot5 0.3s ease 4.3s alternate 2 forwards, scale0-1 0.5s ease 4.9s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(3) .name span {
        animation: slide-top 0.7s ease 5.5s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(3) .name::after {
        animation: slide-right 0.3s ease 5.6s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(3)::before {
        animation: calling__icon-frame-1 0.8s ease 5s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(3)::after {
        animation: calling__icon-frame-2 0.8s ease 5.1s forwards; }
    .calling[data-state="start"] .calling__controls-btn {
      animation: fadeout 0.5s ease 6.6s forwards; }
      .calling[data-state="start"] .calling__controls-btn .btn-1 div:nth-child(1):after {
        animation: slide-left 0.6s ease 0.7s forwards; }
      .calling[data-state="start"] .calling__controls-btn .btn-1 div:nth-child(2):after {
        animation: slide-bottom 0.6s ease 0.7s forwards; }
      .calling[data-state="start"] .calling__controls-btn .btn-1 div:nth-child(3):after {
        animation: slide-right 0.6s ease 0.7s forwards; }
      .calling[data-state="start"] .calling__controls-btn .btn-1 div:nth-child(4):after {
        animation: slide-top 0.6s ease 0.7s forwards; }
      .calling[data-state="start"] .calling__controls-btn .btn-1 .fa-phone {
        animation: calling__show-btn-1 0.7s ease 1s forwards; }
      .calling[data-state="start"] .calling__controls-btn .btn-2 {
        animation: calling__press-btn 0.3s ease 5.9s alternate 2 forwards; }
        .calling[data-state="start"] .calling__controls-btn .btn-2 div:nth-child(1):after {
          animation: slide-left 0.6s ease 0.9s forwards; }
        .calling[data-state="start"] .calling__controls-btn .btn-2 div:nth-child(2):after {
          animation: slide-bottom 0.6s ease 0.9s forwards; }
        .calling[data-state="start"] .calling__controls-btn .btn-2 div:nth-child(3):after {
          animation: slide-right 0.6s ease 0.9s forwards; }
        .calling[data-state="start"] .calling__controls-btn .btn-2 div:nth-child(4):after {
          animation: slide-top 0.6s ease 0.9s forwards; }
        .calling[data-state="start"] .calling__controls-btn .btn-2 .fa-phone {
          animation: calling__show-btn-2 0.7s ease 1.2s forwards; }
      .calling[data-state="start"] .calling__controls-btn .touch {
        animation: calling__touch-btn 0.6s ease 5.9s forwards; }
    .calling[data-state="start"] .calling__controls-bar {
      animation: calling__show-controls-bar 0.4s ease 6.6s forwards; }
      .calling[data-state="start"] .calling__controls-bar div:nth-child(1) {
        animation: fadein 0.8s ease 7s forwards, scale0-1 0.8s ease 7s forwards; }
      .calling[data-state="start"] .calling__controls-bar div:nth-child(2) {
        animation: fadein 0.8s ease 7.4s forwards, scale0-1 0.8s ease 7.4s forwards; }
      .calling[data-state="start"] .calling__controls-bar div:nth-child(3) {
        animation: fadein 0.8s ease 7.2s forwards, scale0-1 0.8s ease 7.2s forwards; }
    .calling[data-state="start"] .calling__say .line:nth-child(1) {
      animation: slide-right 1s ease 11s forwards; }
    .calling[data-state="start"] .calling__say .line:nth-child(2) {
      animation: slide-right 1s ease 11.2s forwards; }
    .calling[data-state="start"] .calling__say .line:nth-child(3) {
      animation: slide-right 1s ease 11.4s forwards; }
    .calling[data-state="start"] .calling__say .line:nth-child(4) {
      animation: slide-right 1s ease 11.6s forwards; }
    .calling[data-state="start"] .calling__say .img {
      animation: calling__show-say 0.5s ease 11.9s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(1) .char {
      animation: calling__show-live-view 0.4s ease 8s forwards; }
      .calling[data-state="start"] .calling__live-view .view:nth-child(1) .char::after {
        animation: fadein 0.3s ease 8.8s forwards, slide-top 0.5s ease 8.8s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(1) .name span {
      animation: width0-100 0.3s ease 9.7s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(1) .name::before {
      animation: calling__char-name-frame-1 0.6s ease 10s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(1) .name::after {
      animation: calling__char-name-frame-2 0.6s ease 10s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(2) .char {
      animation: calling__show-live-view 0.4s ease 8.2s forwards; }
      .calling[data-state="start"] .calling__live-view .view:nth-child(2) .char::after {
        animation: fadein 0.3s ease 9s forwards, slide-right 0.5s ease 9s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(2) .name span {
      animation: width0-100 0.3s ease 9.9s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(2) .name::before {
      animation: calling__char-name-frame-1 0.6s ease 10.2s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(2) .name::after {
      animation: calling__char-name-frame-2 0.6s ease 10.2s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(3) .char {
      animation: calling__show-live-view 0.4s ease 8.4s forwards; }
      .calling[data-state="start"] .calling__live-view .view:nth-child(3) .char::after {
        animation: fadein 0.3s ease 9.2s forwards, slide-left 0.5s ease 9.2s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(3) .name span {
      animation: width0-100 0.3s ease 10.1s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(3) .name::before {
      animation: calling__char-name-frame-1 0.6s ease 10.4s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(3) .name::after {
      animation: calling__char-name-frame-2 0.6s ease 10.4s forwards; }
    .calling[data-state="start"] .calling__end div:nth-child(1):after {
      animation: slide-bottom 0.3s ease 12.6s forwards; }
    .calling[data-state="start"] .calling__end div:nth-child(2):after {
      animation: slide-bottom 0.3s ease 12.65s forwards; }
    .calling[data-state="start"] .calling__end div:nth-child(3):after {
      animation: slide-bottom 0.3s ease 12.75s forwards; }
    .calling[data-state="start"] .calling__end div:nth-child(4):after {
      animation: slide-bottom 0.3s ease 12.8s forwards; }
    .calling[data-state="start"] .calling__end div:nth-child(5):after {
      animation: slide-bottom 0.3s ease 12.85s forwards; }
    .calling[data-state="start"] .calling__end div:nth-child(6):after {
      animation: slide-bottom 0.3s ease 12.9s forwards; }
    .calling[data-state="start"] .calling__end div:nth-child(7):after {
      animation: slide-bottom 0.3s ease 12.95s forwards; }
    .calling[data-state="start"] .calling__end div:nth-child(8):after {
      animation: slide-bottom 0.3s ease 13.0s forwards; }
    .calling[data-state="start"] .calling__end div:nth-child(9):after {
      animation: slide-bottom 0.3s ease 13.05s forwards; }
    .calling[data-state="start"] .calling__end div:nth-child(10):after {
      animation: calling__end 0.3s ease 13.1s forwards; } }

@media screen and (min-width: 961px) {
  .end-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 1000px;
    min-height: 650px;
    overflow: hidden;
    z-index: 997; }
  /*** end-roll ***/
  .end-animation__end-roll {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #b9aeda; }
    .end-animation__end-roll .text-balls {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
      .end-animation__end-roll .text-balls .text-ball {
        position: absolute;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        opacity: 0; }
        .end-animation__end-roll .text-balls .text-ball .inner {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: #F0EFE7;
          border-radius: 50%;
          border: solid 10px #F0EFE7;
          box-sizing: border-box;
          overflow: hidden; }
          .end-animation__end-roll .text-balls .text-ball .inner .bg {
            width: 100%;
            height: 100%; }
          .end-animation__end-roll .text-balls .text-ball .inner .bg div {
            width: 100%;
            height: 10%;
            background-color: #EBC1C7;
            margin-bottom: 10%;
            transform: translateX(-100%); }
          .end-animation__end-roll .text-balls .text-ball .inner::after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: 60%;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 0; }
      .end-animation__end-roll .text-balls .text-ball:nth-child(1) {
        top: 50px;
        left: 50px; }
        .end-animation__end-roll .text-balls .text-ball:nth-child(1) .inner:after {
          background-image: url(../images/end-animation/end-roll/1.png); }
      .end-animation__end-roll .text-balls .text-ball:nth-child(2) {
        top: 50px;
        right: 50px; }
        .end-animation__end-roll .text-balls .text-ball:nth-child(2) .inner:after {
          background-image: url(../images/end-animation/end-roll/2.png); }
      .end-animation__end-roll .text-balls .text-ball:nth-child(3) {
        bottom: 50px;
        left: 50px; }
        .end-animation__end-roll .text-balls .text-ball:nth-child(3) .inner:after {
          background-image: url(../images/end-animation/end-roll/3.png); }
    .end-animation__end-roll .paints {
      position: absolute;
      top: calc(50% - 60px);
      left: calc(50% - 60px);
      width: 120px;
      height: 120px; }
      .end-animation__end-roll .paints div {
        float: left;
        width: calc(50% - 5px);
        height: calc(50% - 5px);
        margin-right: 10px;
        border-radius: 50%;
        opacity: 0; }
      .end-animation__end-roll .paints div:nth-child(1),
      .end-animation__end-roll .paints div:nth-child(2) {
        margin-bottom: 10px; }
      .end-animation__end-roll .paints div:nth-child(2n) {
        margin-right: 0; }
      .end-animation__end-roll .paints div:nth-child(1) {
        background-color: #C2617E; }
      .end-animation__end-roll .paints div:nth-child(2) {
        background-color: #817487; }
      .end-animation__end-roll .paints div:nth-child(3) {
        background-color: #4A3F55; }
      .end-animation__end-roll .paints div:nth-child(4) {
        background-color: #E5B8BD; }
    .end-animation__end-roll .window {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #b9aeda;
      transform: translateY(-100%);
      perspective: 1500px; }
      .end-animation__end-roll .window img {
        display: block;
        height: 200px;
        position: absolute;
        bottom: 30px;
        right: 0px;
        transform: rotateZ(-20deg); }
      .end-animation__end-roll .window::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(../images/bg.png);
        background-size: 15px;
        opacity: 0.4; }
  .end-animation[data-state="start"] {
    /*** end-roll ***/ }
    .end-animation[data-state="start"] .end-animation__end-roll {
      animation: end-animation__end-roll-color-1 0.5s ease 1.2s forwards, end-animation__end-roll-color-2 0.5s ease 2.1s forwards, end-animation__end-roll-color-3 0.5s ease 3s forwards, end-animation__end-roll-color-4 0.5s ease 3.9s forwards; }
      .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(1) {
        animation: end-animation__move-text-ball-1 0.4s ease 1.2s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(1) .inner {
          animation: end-animation__jump-text-ball-1 0.4s ease 1.2s forwards; }
          .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(1) .inner::after {
            animation: fadein 0.5s ease 1.6s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(1) .bg div:nth-child(1) {
          animation: slide-right 0.3s ease 1.6s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(1) .bg div:nth-child(2) {
          animation: slide-right 0.3s ease 1.65s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(1) .bg div:nth-child(3) {
          animation: slide-right 0.3s ease 1.7s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(1) .bg div:nth-child(4) {
          animation: slide-right 0.3s ease 1.75s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(1) .bg div:nth-child(5) {
          animation: slide-right 0.3s ease 1.8s forwards; }
      .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(2) {
        animation: end-animation__move-text-ball-2 0.4s ease 2.1s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(2) .inner {
          animation: end-animation__jump-text-ball-2 0.4s ease 2.1s forwards; }
          .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(2) .inner::after {
            animation: fadein 0.5s ease 2.5s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(2) .bg div:nth-child(1) {
          animation: slide-right 0.3s ease 2.5s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(2) .bg div:nth-child(2) {
          animation: slide-right 0.3s ease 2.55s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(2) .bg div:nth-child(3) {
          animation: slide-right 0.3s ease 2.6s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(2) .bg div:nth-child(4) {
          animation: slide-right 0.3s ease 2.65s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(2) .bg div:nth-child(5) {
          animation: slide-right 0.3s ease 2.7s forwards; }
      .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(3) {
        animation: end-animation__move-text-ball-3 0.4s ease 3s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(3) .inner {
          animation: end-animation__jump-text-ball-3 0.4s ease 3s forwards; }
          .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(3) .inner::after {
            animation: fadein 0.5s ease 3.4s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(3) .bg div:nth-child(1) {
          animation: slide-right 0.3s ease 3.4s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(3) .bg div:nth-child(2) {
          animation: slide-right 0.3s ease 3.45s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(3) .bg div:nth-child(3) {
          animation: slide-right 0.3s ease 3.5s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(3) .bg div:nth-child(4) {
          animation: slide-right 0.3s ease 3.55s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(3) .bg div:nth-child(5) {
          animation: slide-right 0.3s ease 3.6s forwards; }
      .end-animation[data-state="start"] .end-animation__end-roll .paints div:nth-child(1) {
        animation: end-animation__show-paint 0.6s ease 0s forwards, scale0-1 0.5s ease-out 1.2s reverse forwards; }
      .end-animation[data-state="start"] .end-animation__end-roll .paints div:nth-child(2) {
        animation: end-animation__show-paint 0.4s ease 0.2s forwards, scale0-1 0.5s ease-out 2.1s reverse forwards; }
      .end-animation[data-state="start"] .end-animation__end-roll .paints div:nth-child(3) {
        animation: end-animation__show-paint 0.4s ease 0.4s forwards, scale0-1 0.5s ease-out 3s reverse forwards; }
      .end-animation[data-state="start"] .end-animation__end-roll .paints div:nth-child(4) {
        animation: end-animation__show-paint 0.4s ease 0.6s forwards; }
      .end-animation[data-state="start"] .end-animation__end-roll .window {
        animation: end-animation__down-window 0.5s ease-out 4.2s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .window img {
          animation: end-animation__end 0.5s ease 4.7s forwards; } }

@media screen and (min-width: 961px) {
  .gab-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 1000px;
    min-height: 650px;
    background-color: #E5B8BD;
    overflow: hidden;
    z-index: 999; }
  /*** bg ***/
  .gab-animation__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .gab-animation__bg div {
      width: 100%;
      height: 12.5%;
      background-color: #b9aeda;
      transform: translateX(-100%); }
  /*** frame ***/
  .gab-animation__frame {
    position: absolute;
    top: -100px;
    left: calc(50% - 50px);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden; }
    .gab-animation__frame .area {
      position: relative;
      float: left;
      width: 50%;
      height: 100%;
      overflow: hidden; }
      .gab-animation__frame .area::before, .gab-animation__frame .area::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
      .gab-animation__frame .area::before {
        background-color: #E5B8BD; }
      .gab-animation__frame .area::after {
        background-color: #4A3F55; }
    .gab-animation__frame .area:nth-child(1)::after {
      transform: translate(calc(-100% + 5px), -100%); }
    .gab-animation__frame .area:nth-child(2)::after {
      transform: translate(calc(100% - 5px), 100%); }
    .gab-animation__frame::after {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: url(../images/gab-animation/bg.png);
      background-size: 30px;
      opacity: 0; }
  .gab-animation__illust {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .gab-animation__illust .paint-balls {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
      .gab-animation__illust .paint-balls div {
        float: left;
        width: 50%;
        height: 100%; }
        .gab-animation__illust .paint-balls div::after {
          position: absolute;
          top: calc(50% - 50px);
          content: "";
          display: block;
          width: 100px;
          height: 100px;
          background-color: #F0DB9E;
          border-radius: 50%; }
      .gab-animation__illust .paint-balls div:nth-child(1)::after {
        left: -100px; }
      .gab-animation__illust .paint-balls div:nth-child(2)::after {
        right: -100px; }
    .gab-animation__illust .illust {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      perspective: 400px; }
      .gab-animation__illust .illust::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-image: url(../images/gab-animation/gab.png);
        background-size: auto 90%;
        background-repeat: no-repeat;
        background-position: center bottom;
        opacity: 0; }
  .gab-animation__effects {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .gab-animation__effects .ball {
      position: absolute;
      border-radius: 50%; }
    .gab-animation__effects .ball:nth-child(2n - 1) {
      top: -60px;
      width: 60px;
      height: 60px; }
    .gab-animation__effects .ball:nth-child(2n) {
      top: -45px;
      width: 45px;
      height: 45px; }
    .gab-animation__effects .ball:nth-child(1) {
      background-color: #E5B8BD;
      left: calc(50% - 150px); }
    .gab-animation__effects .ball:nth-child(2) {
      background-color: #817487;
      left: calc(50% - 30px); }
    .gab-animation__effects .ball:nth-child(3) {
      background-color: #E4D6CE;
      left: calc(50% + 45px); }
    .gab-animation__effects .ball:nth-child(4) {
      background-color: #E5B8BD;
      left: calc(50% - 150px); }
    .gab-animation__effects .ball:nth-child(5) {
      background-color: #817487;
      left: calc(50% - 30px); }
    .gab-animation__effects .ball:nth-child(6) {
      background-color: #E4D6CE;
      left: calc(50% + 45px); }
    .gab-animation__effects .ball:nth-child(7) {
      background-color: #E5B8BD;
      left: calc(50% - 150px); }
    .gab-animation__effects .ball:nth-child(8) {
      background-color: #817487;
      left: calc(50% - 30px); }
  .gab-animation__gauge {
    position: absolute;
    bottom: 50px;
    left: calc(50% - 150px);
    width: 300px;
    height: 50px;
    overflow: hidden; }
    .gab-animation__gauge .name {
      width: 100px;
      height: 18px;
      font-size: 14px;
      color: #4A3F55;
      line-height: 18px;
      padding: 0 5px;
      font-weight: bold;
      box-sizing: border-box;
      border: solid 2px #4A3F55;
      border-bottom: none;
      background-color: #eee;
      transform: translateX(-100%); }
    .gab-animation__gauge .gauge {
      width: 100%;
      height: 32px;
      box-sizing: border-box;
      border: solid 2px #4A3F55;
      background-color: #ff2600;
      transform: translateX(-100%);
      overflow: hidden; }
      .gab-animation__gauge .gauge::after {
        width: 100%;
        height: 100%;
        content: "";
        display: block;
        background-color: #86c351;
        transform: translateX(0%); }
  .gab-animation__back-overray {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .gab-animation__back-overray section {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
      .gab-animation__back-overray section div {
        float: left;
        content: "";
        display: block;
        width: 50%;
        height: 100%;
        overflow: hidden; }
        .gab-animation__back-overray section div::after {
          content: "";
          display: block;
          width: 100%;
          height: 100%; }
      .gab-animation__back-overray section div:nth-child(1):after {
        transform: translateX(100%); }
      .gab-animation__back-overray section div:nth-child(2):after {
        transform: translateX(-100%); }
    .gab-animation__back-overray section:nth-child(1) div:after {
      background-color: #C2617E; }
    .gab-animation__back-overray section:nth-child(2) div:after {
      background-color: #E5B8BD; }
    .gab-animation__back-overray section:nth-child(3) div:after {
      background-color: #b9aeda; }
  .gab-animation__message {
    position: absolute;
    top: calc(50% - 148.5px);
    left: calc(50% - 400px);
    width: 800px;
    height: 297px;
    background-image: url(../images/gab-animation/message.png);
    background-size: 100%;
    opacity: 0; }
  .gab-animation__front-overray {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .gab-animation__front-overray section {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
      .gab-animation__front-overray section div {
        float: left;
        content: "";
        display: block;
        width: 50%;
        height: 100%;
        overflow: hidden; }
        .gab-animation__front-overray section div::after {
          content: "";
          display: block;
          width: 100%;
          height: 100%;
          background-color: #4A3F55; }
      .gab-animation__front-overray section div:nth-child(1):after {
        transform: translateX(100%); }
      .gab-animation__front-overray section div:nth-child(2):after {
        transform: translateX(-100%); }
  .gab-animation__palette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .gab-animation__palette .paint {
      position: absolute;
      top: -100px;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #b9aeda; }
      .gab-animation__palette .paint div {
        position: absolute;
        top: 50%;
        overflow: hidden; }
        .gab-animation__palette .paint div::after {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: #b9aeda;
          transform: translateY(-100%); }
      .gab-animation__palette .paint div:nth-child(1) {
        left: calc(50% - 5px);
        width: 10px;
        height: 120px; }
        .gab-animation__palette .paint div:nth-child(1)::after {
          border-radius: 10px; }
      .gab-animation__palette .paint div:nth-child(2) {
        left: 2px;
        width: 18px;
        height: 70px; }
        .gab-animation__palette .paint div:nth-child(2)::after {
          border-radius: 15px; }
      .gab-animation__palette .paint div:nth-child(3) {
        right: 20px;
        width: 15px;
        height: 75px; }
        .gab-animation__palette .paint div:nth-child(3)::after {
          border-radius: 10px; }
      .gab-animation__palette .paint div:nth-child(4) {
        right: 0px;
        width: 10px;
        height: 50px; }
        .gab-animation__palette .paint div:nth-child(4)::after {
          border-radius: 10px; }
      .gab-animation__palette .paint .char {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
        background-size: 80%;
        background-position: center;
        background-repeat: no-repeat; }
        .gab-animation__palette .paint .char::after {
          content: "";
          display: block;
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: #b9aeda;
          border-radius: 50%; }
      .gab-animation__palette .paint .char-1 {
        background-image: url(../images/gab-animation/name/1.png); }
      .gab-animation__palette .paint .char-2 {
        background-image: url(../images/gab-animation/name/2.png); }
      .gab-animation__palette .paint .char-3 {
        background-image: url(../images/gab-animation/name/3.png); }
      .gab-animation__palette .paint .char-4 {
        background-image: url(../images/gab-animation/name/4.png); }
      .gab-animation__palette .paint .char-5 {
        background-image: url(../images/gab-animation/name/5.png); }
    .gab-animation__palette .paint:nth-child(1) {
      left: calc(50% - 330px); }
    .gab-animation__palette .paint:nth-child(2) {
      left: calc(50% - 190px); }
    .gab-animation__palette .paint:nth-child(3) {
      left: calc(50% - 50px); }
    .gab-animation__palette .paint:nth-child(4) {
      left: calc(50% + 90px); }
    .gab-animation__palette .paint:nth-child(5) {
      left: calc(50% + 230px); }
    .gab-animation__palette .frame {
      position: absolute;
      left: 0;
      width: 100%;
      height: calc((100% - 300px) / 2);
      overflow: hidden; }
      .gab-animation__palette .frame div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
      .gab-animation__palette .frame div:nth-child(1) {
        background-color: #E4D6CE; }
      .gab-animation__palette .frame div:nth-child(2) {
        background-color: #b9aeda; }
      .gab-animation__palette .frame div:nth-child(3) {
        background-color: #E5B8BD; }
      .gab-animation__palette .frame div:nth-child(4) {
        background-color: #C2617E; }
      .gab-animation__palette .frame div:nth-child(5) {
        background-color: #A8CBC6; }
    .gab-animation__palette .frame-top {
      top: 0; }
      .gab-animation__palette .frame-top div {
        transform: translateY(100%); }
    .gab-animation__palette .frame-bottom {
      bottom: 0; }
      .gab-animation__palette .frame-bottom div {
        transform: translateY(-100%); }
    .gab-animation__palette .clock {
      position: absolute;
      top: calc((100% - 300px) / 2);
      left: 0;
      width: 100%;
      height: 300px; }
      .gab-animation__palette .clock::before, .gab-animation__palette .clock::after {
        content: "";
        display: block;
        position: absolute;
        transform: scale(0); }
      .gab-animation__palette .clock::before {
        top: calc(50% - 100px);
        left: calc(50% - 100px);
        width: 200px;
        height: 200px;
        border-radius: 50%;
        box-sizing: border-box;
        border: dashed 5px #A8CBC6; }
      .gab-animation__palette .clock::after {
        top: calc(50% - 125px);
        left: calc(50% - 125px);
        width: 250px;
        height: 250px;
        border-radius: 50%;
        box-sizing: border-box;
        border: solid 10px #A8CBC6;
        border-top-color: transparent;
        border-bottom-color: transparent; }
      .gab-animation__palette .clock div {
        position: absolute;
        left: calc(50% - 5px);
        top: 50%;
        width: 10px;
        height: 0;
        background-color: #A8CBC6;
        z-index: 1; }
  .gab-animation__camera {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    perspective: 20px;
    z-index: 2; }
    .gab-animation__camera .layer {
      position: absolute;
      top: calc(50% - 225px);
      left: calc(50% - 325px);
      width: 650px;
      height: 450px;
      border-radius: 30px;
      overflow: hidden;
      box-shadow: 0 0 10px #aaa; }
      .gab-animation__camera .layer::before, .gab-animation__camera .layer::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box; }
      .gab-animation__camera .layer::before {
        background-size: cover;
        background-position: center; }
      .gab-animation__camera .layer::after {
        border: solid 25px #fff;
        box-shadow: 0 0 10px #aaa inset; }
    .gab-animation__camera .layer-1 {
      transform: translateZ(20px) scale(calc(1 - (20 / 100))); }
      .gab-animation__camera .layer-1::before {
        background-image: url(../images/gab-animation/comic/1.png); }
    .gab-animation__camera .layer-2 {
      transform: translateZ(120px) scale(calc(1 - (120 / 200))); }
      .gab-animation__camera .layer-2::before {
        transform: translateY(-100%);
        background-image: url(../images/gab-animation/comic/2.png); }
    .gab-animation__camera .layer-3 {
      transform: translateZ(220px) scale(calc(1 - (220 / 300))); }
      .gab-animation__camera .layer-3::before {
        transform: translateY(100%);
        background-image: url(../images/gab-animation/comic/3.png); }
    .gab-animation__camera .layer-4 {
      transform: translateZ(320px) scale(calc(1 - (320 / 400))); }
      .gab-animation__camera .layer-4::before {
        transform: translateY(-100%);
        background-image: url(../images/gab-animation/comic/4.png); }
  .gab-animation__close {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 6; }
    .gab-animation__close .effect {
      position: absolute;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      transform: scale(1.5);
      overflow: hidden; }
      .gab-animation__close .effect div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
        .gab-animation__close .effect div:after {
          content: "";
          display: block;
          position: absolute;
          top: 5px;
          left: calc(50% - 10px);
          width: 0;
          height: 0;
          border: solid 10px transparent;
          border-top: solid 35px #4A3F55;
          opacity: 0; }
      .gab-animation__close .effect div:nth-child(1) {
        transform: rotate(0deg); }
      .gab-animation__close .effect div:nth-child(2) {
        transform: rotate(30deg); }
      .gab-animation__close .effect div:nth-child(3) {
        transform: rotate(60deg); }
      .gab-animation__close .effect div:nth-child(4) {
        transform: rotate(90deg); }
      .gab-animation__close .effect div:nth-child(5) {
        transform: rotate(120deg); }
      .gab-animation__close .effect div:nth-child(6) {
        transform: rotate(150deg); }
      .gab-animation__close .effect div:nth-child(7) {
        transform: rotate(180deg); }
      .gab-animation__close .effect div:nth-child(8) {
        transform: rotate(210deg); }
      .gab-animation__close .effect div:nth-child(9) {
        transform: rotate(240deg); }
      .gab-animation__close .effect div:nth-child(10) {
        transform: rotate(270deg); }
      .gab-animation__close .effect div:nth-child(11) {
        transform: rotate(300deg); }
      .gab-animation__close .effect div:nth-child(12) {
        transform: rotate(330deg); }
    .gab-animation__close .effect-1 {
      top: calc(50% - 100px);
      left: calc(50% - 100px); }
    .gab-animation__close .effect-2 {
      top: 20px;
      right: 20px; }
    .gab-animation__close .effect-3 {
      bottom: 20px;
      left: 20px; }
    .gab-animation__close .ball {
      position: absolute;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      background-color: #4A3F55;
      transform: scale(0); }
      .gab-animation__close .ball::after {
        content: "";
        display: block;
        position: absolute;
        top: 20%;
        left: 20%;
        width: 60%;
        height: 60%;
        border-radius: 50%;
        background-color: #817487; }
    .gab-animation__close .ball-1 {
      top: calc(20px - 312px);
      right: calc(20px - 312px); }
    .gab-animation__close .ball-2 {
      top: calc(50% - 312px);
      left: calc(50% - 312px); }
    .gab-animation__close .ball-3 {
      bottom: calc(20px - 312px);
      left: calc(20px - 312px); }
    .gab-animation__close .end-block {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
      .gab-animation__close .end-block .paint-ball {
        position: absolute;
        top: calc(50% - 20px);
        left: calc(50% - 20px);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #4A3F55;
        transform: scale(0); }
      .gab-animation__close .end-block::before, .gab-animation__close .end-block::after {
        position: absolute;
        content: "";
        display: block; }
      .gab-animation__close .end-block::before {
        left: calc(50% - 1px);
        top: 50%;
        width: 2px;
        height: 0;
        background-color: #4A3F55; }
      .gab-animation__close .end-block::after {
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background-color: #4A3F55;
        top: calc(50% - 200px);
        left: calc(50% - 200px);
        transform: scale(0); }
  /*************************************************************************************************
   * animation
   *************************************************************************************************/
  .gab-animation[data-state="start"] .gab-animation__bg div:nth-child(1) {
    animation: slide-right 0.4s ease 0s forwards; }
  .gab-animation[data-state="start"] .gab-animation__bg div:nth-child(2) {
    animation: slide-right 0.4s ease 0.1s forwards; }
  .gab-animation[data-state="start"] .gab-animation__bg div:nth-child(3) {
    animation: slide-right 0.4s ease 0.2s forwards; }
  .gab-animation[data-state="start"] .gab-animation__bg div:nth-child(4) {
    animation: slide-right 0.4s ease 0.3s forwards; }
  .gab-animation[data-state="start"] .gab-animation__bg div:nth-child(5) {
    animation: slide-right 0.4s ease 0.4s forwards; }
  .gab-animation[data-state="start"] .gab-animation__bg div:nth-child(6) {
    animation: slide-right 0.4s ease 0.5s forwards; }
  .gab-animation[data-state="start"] .gab-animation__bg div:nth-child(7) {
    animation: slide-right 0.4s ease 0.6s forwards; }
  .gab-animation[data-state="start"] .gab-animation__bg div:nth-child(8) {
    animation: slide-right 0.4s ease 0.7s forwards; }
  .gab-animation[data-state="start"] .gab-animation__frame {
    animation: gab-animation__fall-frame 0.5s ease-out 1.1s forwards, gab-animation__scale-frame 0.7s ease-in-out 1.6s forwards, gab-animation__open-frame 0.4s ease-in-out 2.3s forwards, gab-animation__radius-frame 1s ease-in-out 3.8s forwards; }
    .gab-animation[data-state="start"] .gab-animation__frame::after {
      animation: gab-animation__show-bg 0.4s ease 3.8s forwards; }
    .gab-animation[data-state="start"] .gab-animation__frame .area:nth-child(1)::before {
      animation: gab-animation__move-y1-area-1 0.3s ease 2.7s forwards, gab-animation__move-x-area-1 0.4s ease 3s forwards, gab-animation__move-y2-area-1 0.3s ease 3.4s forwards; }
    .gab-animation[data-state="start"] .gab-animation__frame .area:nth-child(1)::after {
      animation: gab-animation__move-y-area-bg-1 0.3s ease 3.5s forwards, gab-animation__move-x-area-bg-1 0.4s ease 3.8s forwards; }
    .gab-animation[data-state="start"] .gab-animation__frame .area:nth-child(2)::before {
      animation: gab-animation__move-y1-area-2 0.3s ease 2.7s forwards, gab-animation__move-x-area-2 0.4s ease 3s forwards, gab-animation__move-y2-area-2 0.3s ease 3.4s forwards; }
    .gab-animation[data-state="start"] .gab-animation__frame .area:nth-child(2)::after {
      animation: gab-animation__move-y-area-bg-2 0.3s ease 3.5s forwards, gab-animation__move-x-area-bg-2 0.4s ease 3.8s forwards; }
  .gab-animation[data-state="start"] .gab-animation__illust .paint-balls div:nth-child(1) {
    animation: gab-animation__x-paint-ball-1 0.4s ease-in-out 4s forwards; }
    .gab-animation[data-state="start"] .gab-animation__illust .paint-balls div:nth-child(1)::after {
      animation: gab-animation__y-paint-ball-1 0.4s ease-in-out 4s forwards, fadeout 0.1s ease 4.4s forwards; }
  .gab-animation[data-state="start"] .gab-animation__illust .paint-balls div:nth-child(2) {
    animation: gab-animation__x-paint-ball-2 0.4s ease-in-out 4s forwards; }
    .gab-animation[data-state="start"] .gab-animation__illust .paint-balls div:nth-child(2)::after {
      animation: gab-animation__y-paint-ball-2 0.4s ease-in-out 4s forwards, gab-animation__scale-frame 0.8s ease-in-out 4.4s forwards, scale10 0.5s ease 5.2s forwards, fadeout 0.5s ease 5.2s forwards; }
  .gab-animation[data-state="start"] .gab-animation__illust .illust::after {
    animation: fadein 0.1s ease 5.2s forwards, gab-animation__rotate-illust 0.6s ease 5.2s forwards, gab-animation__attack-gab 0.1s ease 5.7s alternate 10 forwards, gab-animation__down-gab 0.8s ease 6.7s forwards; }
  .gab-animation[data-state="start"] .gab-animation__effects .ball:nth-child(1) {
    animation: gab-animation__fall-ball-effect 0.2s ease-out 5.6s forwards, gab-animation__scale-ball-effect 0.3s ease 5.8s forwards; }
  .gab-animation[data-state="start"] .gab-animation__effects .ball:nth-child(2) {
    animation: gab-animation__fall-ball-effect 0.2s ease-out 5.7s forwards, gab-animation__scale-ball-effect 0.3s ease 5.9s forwards; }
  .gab-animation[data-state="start"] .gab-animation__effects .ball:nth-child(3) {
    animation: gab-animation__fall-ball-effect 0.2s ease-out 5.8s forwards, gab-animation__scale-ball-effect 0.3s ease 6s forwards; }
  .gab-animation[data-state="start"] .gab-animation__effects .ball:nth-child(6) {
    animation: gab-animation__fall-ball-effect 0.2s ease-out 5.9s forwards, gab-animation__scale-ball-effect 0.3s ease 6.1s forwards; }
  .gab-animation[data-state="start"] .gab-animation__effects .ball:nth-child(5) {
    animation: gab-animation__fall-ball-effect 0.2s ease-out 6s forwards, gab-animation__scale-ball-effect 0.3s ease 6.2s forwards; }
  .gab-animation[data-state="start"] .gab-animation__effects .ball:nth-child(4) {
    animation: gab-animation__fall-ball-effect 0.2s ease-out 6.1s forwards, gab-animation__scale-ball-effect 0.3s ease 6.3s forwards; }
  .gab-animation[data-state="start"] .gab-animation__effects .ball:nth-child(7) {
    animation: gab-animation__fall-ball-effect 0.2s ease-out 6.2s forwards, gab-animation__scale-ball-effect 0.3s ease 6.4s forwards; }
  .gab-animation[data-state="start"] .gab-animation__effects .ball:nth-child(8) {
    animation: gab-animation__fall-ball-effect 0.2s ease-out 6.3s forwards, gab-animation__scale-ball-effect 0.3s ease 6.5s forwards; }
  .gab-animation[data-state="start"] .gab-animation__gauge {
    animation: fadeout 0.8s ease 6.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__gauge .name {
      animation: slide-right 0.35s ease 5.4s forwards; }
    .gab-animation[data-state="start"] .gab-animation__gauge .gauge {
      animation: slide-right 0.35s ease 5.5s forwards; }
      .gab-animation[data-state="start"] .gab-animation__gauge .gauge::after {
        animation: slide-right 1s ease 5.7s reverse forwards; }
  .gab-animation[data-state="start"] .gab-animation__back-overray section:nth-child(1) div:nth-child(1):after {
    animation: slide-left 0.5s ease 7.3s forwards; }
  .gab-animation[data-state="start"] .gab-animation__back-overray section:nth-child(1) div:nth-child(2):after {
    animation: slide-right 0.5s ease 7.3s forwards; }
  .gab-animation[data-state="start"] .gab-animation__back-overray section:nth-child(2) div:nth-child(1):after {
    animation: slide-left 0.5s ease 7.4s forwards; }
  .gab-animation[data-state="start"] .gab-animation__back-overray section:nth-child(2) div:nth-child(2):after {
    animation: slide-right 0.5s ease 7.4s forwards; }
  .gab-animation[data-state="start"] .gab-animation__back-overray section:nth-child(3) div:nth-child(1):after {
    animation: slide-left 0.5s ease 7.5s forwards; }
  .gab-animation[data-state="start"] .gab-animation__back-overray section:nth-child(3) div:nth-child(2):after {
    animation: slide-right 0.5s ease 7.5s forwards; }
  .gab-animation[data-state="start"] .gab-animation__message {
    animation: gab-animation__message 0.4s ease 6.9s forwards; }
  .gab-animation[data-state="start"] .gab-animation__front-overray section div:nth-child(1):after {
    animation: slide-left 0.7s ease 7.8s forwards; }
  .gab-animation[data-state="start"] .gab-animation__front-overray section div:nth-child(2):after {
    animation: slide-right 0.7s ease 7.8s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(1) {
    animation: gab-animation__fall-paint-1 0.2s ease 9s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(1) div:nth-child(1):after {
      animation: slide-bottom 2s ease 9.2s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(1) div:nth-child(2):after {
      animation: slide-bottom 1s ease 9.2s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(1) div:nth-child(3):after {
      animation: slide-bottom 1.8s ease 9.2s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(1) div:nth-child(4):after {
      animation: slide-bottom 0.9s ease 9.2s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(1) .char:after {
      animation: height0-100 1.8s ease-out 9.2s reverse forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(2) {
    animation: gab-animation__fall-paint-2 0.2s ease 10s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(2) div:nth-child(1):after {
      animation: slide-bottom 2s ease 10.2s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(2) div:nth-child(2):after {
      animation: slide-bottom 1s ease 10.2s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(2) div:nth-child(3):after {
      animation: slide-bottom 1.8s ease 10.2s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(2) div:nth-child(4):after {
      animation: slide-bottom 0.9s ease 10.2s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(2) .char:after {
      animation: height0-100 1.8s ease-out 10.2s reverse forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(3) {
    animation: gab-animation__fall-paint-1 0.2s ease 8.5s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(3) div:nth-child(1):after {
      animation: slide-bottom 2s ease 8.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(3) div:nth-child(2):after {
      animation: slide-bottom 1s ease 8.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(3) div:nth-child(3):after {
      animation: slide-bottom 1.8s ease 8.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(3) div:nth-child(4):after {
      animation: slide-bottom 0.9s ease 8.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(3) .char:after {
      animation: height0-100 1.8s ease-out 8.7s reverse forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(4) {
    animation: gab-animation__fall-paint-2 0.2s ease 10.5s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(4) div:nth-child(1):after {
      animation: slide-bottom 2s ease 10.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(4) div:nth-child(2):after {
      animation: slide-bottom 1s ease 10.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(4) div:nth-child(3):after {
      animation: slide-bottom 1.8s ease 10.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(4) div:nth-child(4):after {
      animation: slide-bottom 0.9s ease 10.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(4) .char:after {
      animation: height0-100 1.8s ease-out 10.7s reverse forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(5) {
    animation: gab-animation__fall-paint-1 0.2s ease 9.5s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(5) div:nth-child(1):after {
      animation: slide-bottom 2s ease 9.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(5) div:nth-child(2):after {
      animation: slide-bottom 1s ease 9.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(5) div:nth-child(3):after {
      animation: slide-bottom 1.8s ease 9.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(5) div:nth-child(4):after {
      animation: slide-bottom 0.9s ease 9.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(5) .char:after {
      animation: height0-100 1.8s ease-out 9.7s reverse forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .frame-top div:nth-child(1) {
    animation: slide-top 0.4s ease 12.5s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .frame-top div:nth-child(2) {
    animation: slide-top 0.4s ease 12.6s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .frame-top div:nth-child(3) {
    animation: slide-top 0.4s ease 12.7s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .frame-top div:nth-child(4) {
    animation: slide-top 0.4s ease 12.8s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .frame-top div:nth-child(5) {
    animation: slide-top 0.4s ease 12.9s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .frame-bottom div:nth-child(1) {
    animation: slide-bottom 0.4s ease 12.5s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .frame-bottom div:nth-child(2) {
    animation: slide-bottom 0.4s ease 12.6s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .frame-bottom div:nth-child(3) {
    animation: slide-bottom 0.4s ease 12.7s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .frame-bottom div:nth-child(4) {
    animation: slide-bottom 0.4s ease 12.8s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .frame-bottom div:nth-child(5) {
    animation: slide-bottom 0.4s ease 12.9s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .clock::before {
    animation: gab-animation__show-clock-frame 0.5s ease 13.3s forwards, rotate360 4s linear 13.8s infinite; }
  .gab-animation[data-state="start"] .gab-animation__palette .clock::after {
    animation: gab-animation__show-clock-frame 0.5s ease 13.4s forwards, rotate360 3s linear 13.9s infinite; }
  .gab-animation[data-state="start"] .gab-animation__palette .clock div {
    animation: gab-animation__show-clock-hand 0.3s ease 14s forwards, gab-animation__reverse-clock-hand 0.4s ease 14.3s forwards, gab-animation__rotate-clock-hand 0.3s ease-out 14.7s forwards, gab-animation__scale-clock-hand 0.4s ease 14.8s forwards; }
  .gab-animation[data-state="start"] .gab-animation__camera {
    animation: gab-animation__camera 2.8s ease-in-out 15.2s forwards, fadeout 0.1s ease 19s forwards; }
    .gab-animation[data-state="start"] .gab-animation__camera .layer-2:before {
      animation: slide-bottom 0.6s ease 16.2s forwards; }
    .gab-animation[data-state="start"] .gab-animation__camera .layer-3:before {
      animation: slide-top 0.6s ease 16.6s forwards; }
    .gab-animation[data-state="start"] .gab-animation__camera .layer-4:before {
      animation: gab-animation__show-layer 0.8s ease 17.1s forwards; }
  .gab-animation[data-state="start"] .gab-animation__close .effect-1 div:after {
    animation: gab-animation__effect 0.6s ease-out 18.3s reverse forwards, fadein 0.1s ease 18.3s forwards, fadeout 0.1s ease 18.8s forwards, gab-animation__effect 0.6s ease-out 19.7s forwards, fadein 0.1s ease 19.7s forwards, fadeout 0.1s ease 20.2s forwards; }
  .gab-animation[data-state="start"] .gab-animation__close .effect-2 div:after {
    animation: gab-animation__effect 0.6s ease-out 17.7s reverse forwards, fadein 0.1s ease 17.7s forwards, fadeout 0.1s ease 18.2s forwards, gab-animation__effect 0.6s ease-out 19.1s forwards, fadein 0.1s ease 19.1s forwards, fadeout 0.1s ease 19.6s forwards; }
  .gab-animation[data-state="start"] .gab-animation__close .effect-3 div:after {
    animation: gab-animation__effect 0.6s ease 18s reverse forwards, fadein 0.1s ease 18s forwards, fadeout 0.1s ease 18.5s forwards, gab-animation__effect 0.6s ease 19.4s forwards, fadein 0.1s ease 19.4s forwards, fadeout 0.1s ease 19.9s forwards; }
  .gab-animation[data-state="start"] .gab-animation__close .ball-1 {
    animation: gab-animation__scale-ball 0.5s ease 18.2s alternate 2 forwards; }
    .gab-animation[data-state="start"] .gab-animation__close .ball-1::after {
      animation: gab-animation__scale-ball 0.4s ease 18.3s alternate 2 forwards; }
  .gab-animation[data-state="start"] .gab-animation__close .ball-2 {
    animation: gab-animation__scale-ball 0.5s ease 18.8s alternate 2 forwards; }
    .gab-animation[data-state="start"] .gab-animation__close .ball-2::after {
      animation: gab-animation__scale-ball 0.4s ease 18.9s alternate 2 forwards; }
  .gab-animation[data-state="start"] .gab-animation__close .ball-3 {
    animation: gab-animation__scale-ball 0.5s ease 18.5s alternate 2 forwards; }
    .gab-animation[data-state="start"] .gab-animation__close .ball-3::after {
      animation: gab-animation__scale-ball 0.4s ease 18.6s alternate 2 forwards; }
  .gab-animation[data-state="start"] .gab-animation__close .end-block .paint-ball:nth-child(1) {
    animation: scale0-1 0.4s ease 20s forwards, gab-animation__move-end-block-1 0.4s ease 20.4s forwards; }
  .gab-animation[data-state="start"] .gab-animation__close .end-block .paint-ball:nth-child(2) {
    animation: scale0-1 0.4s ease 20s forwards, gab-animation__move-end-block-2 0.4s ease 20.4s forwards; }
  .gab-animation[data-state="start"] .gab-animation__close .end-block::before {
    animation: gab-animation__show-end-block 0.4s ease 20.4s forwards, rotate360 0.6s ease-in-out 20.8s forwards; }
  .gab-animation[data-state="start"] .gab-animation__close .end-block::after {
    animation: scale0-1 0.6s ease-out 20.8s forwards, scale1dot5 0.3s ease 21.4s 2 alternate forwards, gab-animation__close 0.5s ease 22s forwards; } }

@media screen and (min-width: 961px) {
  .history-page .history-box {
    width: 600px;
    margin: 0 auto;
    margin-top: 50px; }
    .history-page .history-box section {
      width: 90%;
      margin: 20px auto;
      padding: 20px;
      box-sizing: border-box;
      border: dashed 1px #4A3F55;
      border-radius: 10px; }
      .history-page .history-box section .version {
        font-size: 14px;
        color: #817487;
        margin-bottom: 10px; }
      .history-page .history-box section .title {
        font-size: 20px;
        text-align: center;
        padding: 6px 0;
        color: #fff;
        margin-bottom: 8px;
        border-radius: 10px;
        background-color: #817487; }
      .history-page .history-box section img {
        display: block;
        width: 100%;
        border-radius: 10px; }
      .history-page .history-box section a {
        display: block;
        width: 200px;
        height: 40px;
        margin: 0 auto;
        border: dashed 2px #817487;
        border-radius: 10px;
        font-size: 16px;
        color: #4A3F55;
        display: block;
        text-align: center;
        line-height: 40px;
        margin-top: 20px;
        transition: all 0.35s ease 0s; }
      .history-page .history-box section a:hover {
        background-color: #4A3F55;
        color: #b9aeda; } }

@media screen and (min-width: 961px) {
  .load-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 1000px;
    min-height: 650px;
    background-color: #C2617E;
    overflow: hidden;
    z-index: 1000; }
  /**
   * frame
   */
  .load-view__frame {
    position: absolute;
    top: 20px;
    left: 20px;
    width: calc(100% - 40px);
    height: calc(100% - 40px); }
  /*** squares ***/
  .load-view__frame__squares {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .load-view__frame__squares div {
      position: absolute;
      width: 40px;
      height: 40px;
      border: dashed 3px #fff;
      box-sizing: border-box;
      border-radius: 5px; }
    .load-view__frame__squares div:nth-child(1) {
      top: 0;
      left: 0; }
    .load-view__frame__squares div:nth-child(2) {
      top: 0;
      right: 0; }
    .load-view__frame__squares div:nth-child(3) {
      bottom: 0;
      left: 0; }
    .load-view__frame__squares div:nth-child(4) {
      bottom: 0;
      right: 0; }
  /*** lines ***/
  .load-view__frame__lines {
    position: absolute;
    top: 37px;
    left: 37px;
    width: calc(100% - 74px);
    height: calc(100% - 74px); }
    .load-view__frame__lines div {
      position: absolute;
      box-sizing: border-box; }
    .load-view__frame__lines div:nth-child(1),
    .load-view__frame__lines div:nth-child(3) {
      left: 0;
      width: 100%;
      height: 3px;
      border-top: dashed 3px #fff; }
    .load-view__frame__lines div:nth-child(2),
    .load-view__frame__lines div:nth-child(4) {
      top: 0;
      width: 1px;
      height: 100%;
      border-left: dashed 3px #fff; }
    .load-view__frame__lines div:nth-child(1) {
      top: 0; }
    .load-view__frame__lines div:nth-child(3) {
      bottom: 0; }
    .load-view__frame__lines div:nth-child(2) {
      left: 0; }
    .load-view__frame__lines div:nth-child(4) {
      right: 0; }
  /**
   * body
   */
  .load-view__body {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%; }
  /*** bg ***/
  .load-view__body__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .load-view__body__bg::before, .load-view__body__bg::after {
      content: "";
      display: block;
      position: absolute;
      width: calc(100% - 180px);
      height: calc(100% - 180px);
      border-radius: 5px;
      background-color: rgba(255, 255, 255, 0.2); }
    .load-view__body__bg::before {
      top: 80px;
      left: 80px; }
    .load-view__body__bg::after {
      bottom: 80px;
      right: 80px; }
  /*** panel ***/
  .load-view__body__panel {
    position: absolute;
    top: 0;
    left: calc(50% - 450px);
    width: 900px;
    height: 100%; }
  /*** panel__icon ***/
  .load-view__body__panel__icon {
    position: absolute;
    top: calc(50% - 60px);
    width: 120px;
    height: 120px;
    opacity: 0; }
    .load-view__body__panel__icon .box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
      .load-view__body__panel__icon .box::after {
        content: "";
        display: block;
        position: absolute;
        top: 8px;
        left: 8px;
        width: calc(100% - 16px);
        height: calc(100% - 16px);
        box-sizing: border-box;
        border: solid 2px transparent; }
      .load-view__body__panel__icon .box .frame {
        position: absolute;
        width: 40%;
        height: 40%; }
        .load-view__body__panel__icon .box .frame::before, .load-view__body__panel__icon .box .frame::after {
          content: "";
          display: block;
          position: absolute; }
        .load-view__body__panel__icon .box .frame::before {
          width: 100%;
          height: 8px; }
        .load-view__body__panel__icon .box .frame::after {
          width: 8px;
          height: 100%; }
      .load-view__body__panel__icon .box .frame:nth-child(1) {
        top: 0;
        right: 0; }
        .load-view__body__panel__icon .box .frame:nth-child(1)::before, .load-view__body__panel__icon .box .frame:nth-child(1)::after {
          top: 0;
          right: 0; }
      .load-view__body__panel__icon .box .frame:nth-child(2) {
        bottom: 0;
        left: 0; }
        .load-view__body__panel__icon .box .frame:nth-child(2)::before, .load-view__body__panel__icon .box .frame:nth-child(2)::after {
          bottom: 0;
          left: 0; }
    .load-view__body__panel__icon .icon {
      position: absolute;
      top: 25px;
      left: 25px;
      width: calc(100% - 50px);
      height: calc(100% - 50px);
      background-size: 150%;
      background-position: center; }
  .load-view__body__panel__icon_type_1 {
    left: 84px; }
    .load-view__body__panel__icon_type_1 .box::after {
      border-color: #C2617E; }
    .load-view__body__panel__icon_type_1 .box .frame::before, .load-view__body__panel__icon_type_1 .box .frame::after {
      background-color: #C2617E; }
    .load-view__body__panel__icon_type_1 .icon {
      background-image: url(../images/load-view/wait/1.png); }
  .load-view__body__panel__icon_type_2 {
    left: 288px; }
    .load-view__body__panel__icon_type_2 .box::after {
      border-color: #817487; }
    .load-view__body__panel__icon_type_2 .box .frame::before, .load-view__body__panel__icon_type_2 .box .frame::after {
      background-color: #817487; }
    .load-view__body__panel__icon_type_2 .icon {
      background-image: url(../images/load-view/wait/2.png); }
  .load-view__body__panel__icon_type_3 {
    right: 288px; }
    .load-view__body__panel__icon_type_3 .box::after {
      border-color: #E5B8BD; }
    .load-view__body__panel__icon_type_3 .box .frame::before, .load-view__body__panel__icon_type_3 .box .frame::after {
      background-color: #E5B8BD; }
    .load-view__body__panel__icon_type_3 .icon {
      background-image: url(../images/load-view/wait/3.png); }
  .load-view__body__panel__icon_type_4 {
    right: 84px; }
    .load-view__body__panel__icon_type_4 .box::after {
      border-color: #4A3F55; }
    .load-view__body__panel__icon_type_4 .box .frame::before, .load-view__body__panel__icon_type_4 .box .frame::after {
      background-color: #4A3F55; }
    .load-view__body__panel__icon_type_4 .icon {
      background-image: url(../images/load-view/wait/4.png); }
  /*** poster ***/
  .load-view__body__poster {
    position: absolute;
    top: 0;
    left: calc(50% - 450px);
    width: 900px;
    height: 100%; }
    .load-view__body__poster .paint-ball-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden; }
    .load-view__body__poster .paint-ball {
      position: absolute;
      top: calc(50% - 30px);
      left: -60px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: #fff; }
      .load-view__body__poster .paint-ball div {
        position: absolute;
        top: 5px;
        left: 5px;
        width: calc(100% - 10px);
        height: calc(100% - 10px);
        border-radius: 50%;
        border: dashed 2px #C2617E;
        box-sizing: border-box; }
      .load-view__body__poster .paint-ball::before, .load-view__body__poster .paint-ball::after {
        position: absolute;
        content: "";
        display: block;
        width: calc(100% - 40px);
        height: 2px;
        top: calc(50% - 1px);
        left: 20px;
        background-color: #C2617E; }
      .load-view__body__poster .paint-ball::before {
        transform: rotate(45deg); }
      .load-view__body__poster .paint-ball::after {
        transform: rotate(-45deg); }
    .load-view__body__poster .poster {
      position: relative;
      float: left;
      width: 225px;
      height: 100%;
      transform: translateY(calc(-100% + -200px));
      perspective: 500px; }
      .load-view__body__poster .poster .illust {
        position: absolute;
        top: calc(50% - 325px);
        left: 0;
        width: 225px;
        height: 650px;
        transform-origin: center bottom;
        opacity: 0; }
        .load-view__body__poster .poster .illust::after {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-size: 100% auto;
          background-repeat: no-repeat;
          background-position: center;
          transform-origin: center bottom; }
      .load-view__body__poster .poster .ball {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: translateY(calc(-50% + -25px)); }
        .load-view__body__poster .poster .ball::after {
          content: "";
          display: block;
          position: absolute;
          top: calc(50% - 25px);
          left: calc(50% - 25px);
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background-color: #fff; }
      .load-view__body__poster .poster::after {
        content: "";
        display: block;
        position: absolute;
        left: -67.5px;
        bottom: -200px;
        width: 0;
        height: 0;
        border-top: solid 200px transparent;
        border-right: solid 180px transparent;
        border-left: solid 180px transparent; }
    .load-view__body__poster .poster:nth-child(1) {
      background-color: #C2617E; }
      .load-view__body__poster .poster:nth-child(1)::after {
        border-top-color: #C2617E; }
      .load-view__body__poster .poster:nth-child(1) .illust:after {
        background-image: url(../images/load-view/poster/1.png); }
    .load-view__body__poster .poster:nth-child(2) {
      background-color: #817487; }
      .load-view__body__poster .poster:nth-child(2)::after {
        border-top-color: #817487; }
      .load-view__body__poster .poster:nth-child(2) .illust:after {
        background-image: url(../images/load-view/poster/2.png); }
    .load-view__body__poster .poster:nth-child(3) {
      background-color: #E5B8BD; }
      .load-view__body__poster .poster:nth-child(3)::after {
        border-top-color: #E5B8BD; }
      .load-view__body__poster .poster:nth-child(3) .illust:after {
        background-image: url(../images/load-view/poster/3.png); }
    .load-view__body__poster .poster:nth-child(4) {
      background-color: #4A3F55; }
      .load-view__body__poster .poster:nth-child(4)::after {
        border-top-color: #4A3F55; }
      .load-view__body__poster .poster:nth-child(4) .illust:after {
        background-image: url(../images/load-view/poster/4.png); }
    .load-view__body__poster .illust {
      position: absolute;
      top: calc(50% - 650px);
      left: 0;
      width: 225px;
      height: 650px;
      background-size: 100% auto;
      background-repeat: no-repeat;
      background-position: center; }
    .load-view__body__poster::after {
      content: "";
      display: block;
      clear: both; }
  .load-view__body__info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .load-view__body__info .allow {
      position: relative;
      width: 100%;
      height: 25%;
      transform: translateX(-100%); }
      .load-view__body__info .allow .sd {
        position: absolute;
        top: 20px;
        height: calc(100% - 40px);
        display: block;
        opacity: 0;
        transform-origin: center bottom; }
      .load-view__body__info .allow .sd-1 {
        left: 10%; }
      .load-view__body__info .allow .sd-2 {
        right: 10%; }
      .load-view__body__info .allow .text {
        position: absolute;
        top: 30px;
        height: calc(100% - 60px);
        display: block;
        opacity: 0; }
      .load-view__body__info .allow .text-1 {
        right: 10%; }
      .load-view__body__info .allow .text-2 {
        left: 10%; }
      .load-view__body__info .allow .line {
        position: absolute;
        top: 20px;
        left: 0;
        width: 100%;
        height: calc(100% - 40px);
        overflow: hidden; }
        .load-view__body__info .allow .line::after {
          content: "";
          display: block;
          position: absolute;
          bottom: 0;
          left: 0;
          transform: translate(calc(100% - 15px), calc(100% - 5px));
          width: calc(100% + 30px);
          height: 100%;
          background-color: #fff; }
      .load-view__body__info .allow .paint-ball {
        position: absolute;
        bottom: 20px;
        left: -60px;
        width: 60px;
        height: 60px;
        background-color: #fff;
        border-radius: 50%; }
        .load-view__body__info .allow .paint-ball div {
          position: absolute;
          top: 5px;
          left: 5px;
          width: calc(100% - 10px);
          height: calc(100% - 10px);
          border-radius: 50%;
          border: dashed 2px #C2617E;
          box-sizing: border-box; }
        .load-view__body__info .allow .paint-ball::before, .load-view__body__info .allow .paint-ball::after {
          content: "";
          display: block;
          position: absolute;
          left: 20px;
          top: calc(50% - 1px);
          width: calc(100% - 40px);
          height: 2px;
          background-color: #C2617E; }
        .load-view__body__info .allow .paint-ball::before {
          transform: rotate(45deg); }
        .load-view__body__info .allow .paint-ball::after {
          transform: rotate(-45deg); }
    .load-view__body__info .allow:nth-child(1) {
      background-color: #C2617E; }
    .load-view__body__info .allow:nth-child(2) {
      background-color: #817487; }
    .load-view__body__info .allow:nth-child(3) {
      background-color: #E5B8BD; }
    .load-view__body__info .allow:nth-child(4) {
      background-color: #4A3F55; }
  .load-view__body__close {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .load-view__body__close .curtain {
      width: 100%;
      height: 50%;
      background-color: #fff;
      overflow: hidden; }
      .load-view__body__close .curtain::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-color: #C2617E; }
    .load-view__body__close .curtain:nth-child(1) {
      transform: translateY(-100%); }
    .load-view__body__close .curtain:nth-child(2) {
      transform: translateY(100%); }
    .load-view__body__close .message {
      position: absolute;
      top: calc(50% - 20px);
      left: 0;
      width: 100%;
      height: 40px;
      font-size: 30px;
      color: #fff;
      text-align: right;
      line-height: 40px;
      box-sizing: border-box;
      padding: 0 20px;
      opacity: 0; }
    .load-view__body__close::before, .load-view__body__close::after {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      width: 100%;
      height: 50%;
      background-color: #E5B8BD;
      z-index: 1; }
    .load-view__body__close::before {
      top: 0;
      transform: translateY(-100%); }
    .load-view__body__close::after {
      bottom: 0;
      transform: translateY(100%); }
  /********************************************************************************************
   * animation
   ********************************************************************************************/
  /*** panel ***/
  .load-view__body__panel__icon .box {
    animation: rotate360 3s linear 0s infinite; }
  .load-view__body__panel__icon_type_1 {
    animation: fadein 0.8s ease 0s forwards, load-view__show-wait-icon 0.8s ease 0s forwards; }
    .load-view__body__panel__icon_type_1 .icon {
      animation: load-view__scale-wait-icon 1s ease 0s forwards; }
  .load-view__body__panel__icon_type_2 {
    animation: fadein 0.8s ease 0.3s forwards, load-view__show-wait-icon 0.8s ease 0.3s forwards; }
    .load-view__body__panel__icon_type_2 .icon {
      animation: load-view__scale-wait-icon 1s ease 0.3s forwards; }
  .load-view__body__panel__icon_type_3 {
    animation: fadein 0.8s ease 0.6s forwards, load-view__show-wait-icon 0.8s ease 0.6s forwards; }
    .load-view__body__panel__icon_type_3 .icon {
      animation: load-view__scale-wait-icon 1s ease 0.6s forwards; }
  .load-view__body__panel__icon_type_4 {
    animation: fadein 0.8s ease 0.9s forwards, load-view__show-wait-icon 0.8s ease 0.9s forwards; }
    .load-view__body__panel__icon_type_4 .icon {
      animation: load-view__scale-wait-icon 1s ease 0.9s forwards; }
  .load-view[data-state="start"] {
    /*** close ***/
    /*** info ***/
    /*** poster ***/ }
    .load-view[data-state="start"] .load-view__body__close .curtain:nth-child(1) {
      animation: load-view__show-curtain-1 0.5s ease 6s forwards; }
      .load-view[data-state="start"] .load-view__body__close .curtain:nth-child(1)::after {
        animation: load-view__show-curtain-inner-1 1.5s ease 6.2s forwards; }
    .load-view[data-state="start"] .load-view__body__close .curtain:nth-child(2) {
      animation: load-view__show-curtain-2 0.5s ease 6s forwards; }
      .load-view[data-state="start"] .load-view__body__close .curtain:nth-child(2)::after {
        animation: load-view__show-curtain-inner-2 1.5s ease 6.2s forwards; }
    .load-view[data-state="start"] .load-view__body__close .message {
      animation: load-view__show-message 5s ease-out 6.7s forwards; }
    .load-view[data-state="start"] .load-view__body__close::before {
      animation: load-view__close-1 0.6s ease 7.2s forwards; }
    .load-view[data-state="start"] .load-view__body__close::after {
      animation: load-view__close-2 0.6s ease 7.2s forwards; }
    .load-view[data-state="start"] .load-view__body__info .allow:nth-child(1) {
      animation: slide-right 0.4s ease 3.5s forwards; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(1) .sd {
        animation: fadein 0.1s ease 5.1s forwards, load-view__sway-sd 0.8s ease-in-out 5.1s alternate infinite; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(1) .text {
        animation: fadein 0.1s ease 5.1s forwards, load-view__sway-illust 0.8s ease-in-out 5.1s alternate infinite; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(1) .line::after {
        animation: load-view__show-line-1 0.7s ease 4s forwards, load-view__hidden-line-1 0.8s ease 4.7s forwards; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(1) .paint-ball {
        animation: load-view__move-paint-ball-2 0.7s ease 4s forwards; }
    .load-view[data-state="start"] .load-view__body__info .allow:nth-child(2) {
      animation: slide-right 0.4s ease 3.6s forwards; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(2) .text {
        animation: fadein 0.1s ease 5.2s forwards, load-view__sway-illust 0.8s ease-in-out 5.2s alternate infinite; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(2) .sd {
        animation: fadein 0.1s ease 5.2s forwards, load-view__sway-sd 0.8s ease-in-out 5.2s alternate infinite; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(2) .line::after {
        animation: load-view__show-line-2 0.7s ease 4.1s forwards, load-view__hidden-line-2 0.8s ease 4.8s forwards; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(2) .paint-ball {
        animation: load-view__move-paint-ball-1 0.7s ease 4.1s forwards; }
    .load-view[data-state="start"] .load-view__body__info .allow:nth-child(3) {
      animation: slide-right 0.4s ease 3.7s forwards; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(3) .text {
        animation: fadein 0.1s ease 5.3s forwards, load-view__sway-illust 0.8s ease-in-out 5.3s alternate infinite; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(3) .sd {
        animation: fadein 0.1s ease 5.3s forwards, load-view__sway-sd 0.8s ease-in-out 5.3s alternate infinite; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(3) .line::after {
        animation: load-view__show-line-1 0.7s ease 4.2s forwards, load-view__hidden-line-1 0.8s ease 4.9s forwards; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(3) .paint-ball {
        animation: load-view__move-paint-ball-2 0.7s ease 4.2s forwards; }
    .load-view[data-state="start"] .load-view__body__info .allow:nth-child(4) {
      animation: slide-right 0.4s ease 3.8s forwards; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(4) .text {
        animation: fadein 0.1s ease 5.4s forwards, load-view__sway-illust 0.8s ease-in-out 5.4s alternate infinite; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(4) .sd {
        animation: fadein 0.1s ease 5.4s forwards, load-view__sway-sd 0.8s ease-in-out 5.4s alternate infinite; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(4) .line::after {
        animation: load-view__show-line-2 0.7s ease 4.3s forwards, load-view__hidden-line-2 0.8s ease 5s forwards; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(4) .paint-ball {
        animation: load-view__move-paint-ball-1 0.7s ease 4.3s forwards; }
    .load-view[data-state="start"] .load-view__body__poster .paint-ball {
      animation: load-view__move-paint-ball 1s ease 2.6s forwards; }
    .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(1) {
      animation: load-view__show-poster 0.5s ease 0s forwards; }
      .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(1) .ball {
        animation: load-view__fall-ball 0.6s ease 0.6s forwards; }
        .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(1) .ball::after {
          animation: load-view__scale-ball 0.7s ease 1.2s forwards; }
      .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(1) .illust {
        animation: fadein 0.1s ease 1.45s forwards, load-view__rotate-illust 0.7s ease 2.6s forwards, fadeout 0.35s ease 2.95s forwards; }
        .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(1) .illust::after {
          animation: load-view__sway-illust 0.8s ease-in-out 1.2s alternate infinite; }
    .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(2) {
      animation: load-view__show-poster 0.5s ease 0.2s forwards; }
      .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(2) .ball {
        animation: load-view__fall-ball 0.6s ease 0.8s forwards; }
        .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(2) .ball::after {
          animation: load-view__scale-ball 0.7s ease 1.4s forwards; }
      .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(2) .illust {
        animation: fadein 0.1s ease 1.65s forwards, load-view__rotate-illust 0.7s ease 2.8s forwards, fadeout 0.35s ease 3.15s forwards; }
        .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(2) .illust::after {
          animation: load-view__sway-illust 0.8s ease-in-out 1.2s alternate infinite; }
    .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(3) {
      animation: load-view__show-poster 0.5s ease 0.4s forwards; }
      .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(3) .ball {
        animation: load-view__fall-ball 0.6s ease 1s forwards; }
        .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(3) .ball::after {
          animation: load-view__scale-ball 0.7s ease 1.6s forwards; }
      .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(3) .illust {
        animation: fadein 0.1s ease 1.85s forwards, load-view__rotate-illust 0.7s ease 3s forwards, fadeout 0.35s ease 3.35s forwards; }
        .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(3) .illust::after {
          animation: load-view__sway-illust 0.8s ease-in-out 1.2s alternate infinite; }
    .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(4) {
      animation: load-view__show-poster 0.5s ease 0.6s forwards; }
      .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(4) .ball {
        animation: load-view__fall-ball 0.6s ease 1.2s forwards; }
        .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(4) .ball::after {
          animation: load-view__scale-ball 0.7s ease 1.8s forwards; }
      .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(4) .illust {
        animation: fadein 0.1s ease 2.1s forwards, load-view__rotate-illust 0.7s ease 3.2s forwards, fadeout 0.35s ease 3.55s forwards; }
        .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(4) .illust::after {
          animation: load-view__sway-illust 0.8s ease-in-out 1.2s alternate infinite; } }

@media screen and (min-width: 961px) {
  .memories-box {
    width: 600px;
    margin: 0 auto;
    margin-top: 50px;
    padding-bottom: 50px; }
    .memories-box a {
      position: relative;
      float: left;
      display: block;
      width: 290px;
      height: 250px;
      margin-right: 10px;
      margin-bottom: 10px;
      background-color: #817487;
      overflow: hidden;
      padding: 5px;
      box-sizing: border-box;
      transition: all 0.35s ease 0s; }
      .memories-box a img {
        width: 100%;
        display: block; }
      .memories-box a .title {
        font-size: 16px;
        color: #b9aeda;
        padding: 5px;
        box-sizing: border-box;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis; }
      .memories-box a .date {
        position: absolute;
        bottom: 0;
        right: 0;
        font-size: 12px;
        color: #ccc;
        text-align: right;
        display: block;
        padding: 5px;
        box-sizing: border-box; }
    .memories-box a:nth-child(2n) {
      margin-right: 0; }
    .memories-box a:hover {
      background-color: #C2617E; }
    .memories-box:after {
      content: "";
      display: block;
      clear: both; } }

@media screen and (min-width: 961px) {
  .page-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #C2617E;
    transform-origin: right top;
    transform: rotate(90deg);
    overflow: hidden;
    z-index: 1002; }
  /*** bg ***/
  .page-box__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .page-box__bg div {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform-origin: right top;
      transform: rotate(90deg); }
    .page-box__bg div:nth-child(1) {
      background-color: #E5B8BD; }
    .page-box__bg div:nth-child(2) {
      background-color: #b9aeda; }
      .page-box__bg div:nth-child(2)::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-size: 15px;
        background-image: url(../images/bg.png);
        opacity: 0.4; }
  /*** content ***/
  .page-box__content {
    position: absolute;
    top: 40px;
    left: 40px;
    width: calc(100% - 80px);
    height: calc(100% - 80px);
    border: solid 10px #C2617E;
    box-sizing: border-box;
    background-color: #b9aeda;
    border-radius: 15px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6) inset;
    overflow: auto;
    opacity: 0;
    transition: all 0.35s ease 0s; }
    .page-box__content .page-title {
      position: relative;
      margin: 50px auto;
      width: 600px;
      height: 45px; }
      .page-box__content .page-title div {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%; }
      .page-box__content .page-title div:nth-child(1) {
        width: 100%;
        background-color: #E4D6CE; }
      .page-box__content .page-title div:nth-child(2) {
        width: calc(100% - 15px);
        background-color: #817487; }
      .page-box__content .page-title div:nth-child(3) {
        width: calc(100% - 30px);
        background-color: #E5B8BD; }
      .page-box__content .page-title div:nth-child(4) {
        width: calc(100% - 45px);
        background-color: #C2617E; }
      .page-box__content .page-title h2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 45px;
        font-size: 20px;
        color: #fff;
        text-align: center;
        line-height: 45px; }
  /*** close-btn ***/
  .page-box__close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 100px;
    height: 100px;
    display: block;
    transform: translate(calc(100% + 20px), calc(-100% + -20px));
    z-index: 5; }
    .page-box__close-btn section {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
      border-radius: 3px;
      transition: all 0.35s ease 0s; }
    .page-box__close-btn section:nth-child(1) {
      background-color: #C2617E;
      transform: rotate(0deg); }
    .page-box__close-btn section:nth-child(2) {
      background-color: #b9aeda; }
      .page-box__close-btn section:nth-child(2)::before, .page-box__close-btn section:nth-child(2)::after {
        content: "";
        display: block;
        position: absolute;
        top: 49px;
        left: 20px;
        width: 60px;
        height: 1px;
        border-top: dashed 2px #4A3F55;
        box-sizing: border-box;
        opacity: 0.7; }
      .page-box__close-btn section:nth-child(2)::before {
        transform: rotate(45deg); }
      .page-box__close-btn section:nth-child(2)::after {
        transform: rotate(-45deg); }
  .page-box__close-btn:hover section:nth-child(1) {
    background-color: #4A3F55; }
  .page-box__close-btn:hover section:nth-child(2) {
    background-color: #eee; }
  .page-box__close-btn:hover ~ .page-box__content {
    border-color: #4A3F55; }
  .page-box[data-state="true"] {
    animation: page-box__show 0.35s ease 0s forwards;
    /*** bg ***/
    /*** content ***/
    /*** close-btn ***/ }
    .page-box[data-state="true"] .page-box__bg div:nth-child(1) {
      animation: page-box__show 0.35s ease 0.1s forwards; }
    .page-box[data-state="true"] .page-box__bg div:nth-child(2) {
      animation: page-box__show 0.35s ease 0.2s forwards; }
    .page-box[data-state="true"] .page-box__content {
      animation: page-box__show-content 0.6s ease 0.55s forwards; }
    .page-box[data-state="true"] .page-box__close-btn {
      animation: page-box__show-close-btn 0.6s ease 0.9s forwards; }
      .page-box[data-state="true"] .page-box__close-btn section:nth-child(1) {
        animation: page-box__rotate-close-btn 0.6s ease 0.9s forwards; }
  .page-box[data-state="false"] {
    transform: rotate(0deg);
    animation: page-box__hidden 0.35s ease-in-out 0.2s forwards;
    /*** bg ***/
    /*** content ***/ }
    .page-box[data-state="false"] .page-box__bg div {
      transform: rotate(0deg); }
    .page-box[data-state="false"] .page-box__bg div:nth-child(1) {
      animation: page-box__hidden 0.35s ease-in-out 0.1s forwards; }
    .page-box[data-state="false"] .page-box__bg div:nth-child(2) {
      animation: page-box__hidden 0.35s ease-in-out 0s forwards; }
    .page-box[data-state="false"] .page-box__content,
    .page-box[data-state="false"] .page-box__close-btn {
      animation: fadeout 0.2s ease 0s forwards; } }

@media screen and (min-width: 961px) {
  .product-box {
    width: 600px;
    margin: 0 auto;
    margin-top: 50px; }
    .product-box .sub-title {
      position: relative;
      width: 100%;
      height: 50px;
      font-size: 26px;
      color: #817487;
      line-height: 50px;
      text-align: center;
      margin: 0 auto;
      margin-bottom: 20px; }
      .product-box .sub-title:before, .product-box .sub-title::after {
        position: absolute;
        content: "";
        display: block;
        width: 70%;
        height: 1px;
        background-color: #817487;
        opacity: 0.6; }
      .product-box .sub-title::before {
        top: 0;
        left: 0; }
      .product-box .sub-title::after {
        bottom: 0;
        right: 0; }
    .product-box section {
      margin-bottom: 50px; }
      .product-box section a {
        position: relative;
        float: left;
        display: block;
        width: 290px;
        height: 300px;
        background-color: #fff;
        box-shadow: 0 0 5px #999;
        margin-left: 10px;
        margin-bottom: 10px;
        overflow: hidden;
        padding: 5px;
        box-sizing: border-box;
        transition: all 0.35s ease 0s; }
        .product-box section a .name {
          font-size: 16px;
          color: #4A3F55;
          padding: 5px;
          box-sizing: border-box; }
        .product-box section a .description {
          font-size: 12px;
          padding: 15px 10px;
          box-sizing: border-box;
          color: #817487; }
        .product-box section a .date {
          position: absolute;
          bottom: 0;
          right: 0;
          font-size: 12px;
          text-align: right;
          padding: 5px;
          box-sizing: border-box;
          color: #817487; }
        .product-box section a img {
          width: 100%; }
      .product-box section a:nth-child(2n) {
        margin-right: 0; }
      .product-box section a:hover {
        opacity: 0.6; }
      .product-box section::after {
        content: "";
        display: block;
        clear: both; } }

@media screen and (min-width: 961px) {
  /*** body ***/
  .profile-page__body {
    width: 600px;
    margin: 0 auto; }
    .profile-page__body .icon {
      position: relative;
      width: 150px;
      height: 150px;
      margin: 0 auto;
      border: solid 5px #4A3F55;
      background-color: #4A3F55;
      border-radius: 50%;
      box-sizing: border-box; }
      .profile-page__body .icon:after {
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-image: url(../images/calling/icons/gab.png);
        background-size: cover;
        background-position: center; }
      .profile-page__body .icon div {
        position: absolute;
        background-color: #4A3F55; }
      .profile-page__body .icon div:nth-child(1) {
        width: 25px;
        height: 100px;
        left: 0;
        bottom: -5px;
        border-radius: 20px; }
      .profile-page__body .icon div:nth-child(2) {
        width: 10px;
        height: 80px;
        left: 40px;
        bottom: -10px;
        border-radius: 4px; }
      .profile-page__body .icon div:nth-child(3) {
        width: 18px;
        height: 80px;
        left: calc(50% - 6px);
        bottom: -50px;
        border-radius: 10px; }
      .profile-page__body .icon div:nth-child(4) {
        width: 12px;
        height: 80px;
        right: 0px;
        bottom: -3px;
        border-radius: 8px; }
    .profile-page__body .name {
      margin: 0 auto;
      margin-top: 60px;
      width: 150px;
      height: 40px;
      border-left: solid 15px #4A3F55;
      background-color: #fff;
      padding: 0 5px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
      font-size: 25px;
      color: #555;
      font-weight: bold;
      text-align: center;
      line-height: 40px;
      transform: rotate(-5deg); }
    .profile-page__body .info {
      margin: 0 auto;
      margin-top: 40px; }
      .profile-page__body .info .info-li {
        position: relative;
        width: 400px;
        padding: 0 10px;
        margin: 0 auto;
        margin-bottom: 15px;
        border-bottom: solid 1px #E5B8BD; }
        .profile-page__body .info .info-li span {
          font-size: 12px;
          color: #817487;
          margin-right: 5px; }
        .profile-page__body .info .info-li::after {
          position: absolute;
          left: -15px;
          bottom: -5px;
          content: "";
          display: block;
          width: 10px;
          height: 10px;
          background-color: #E5B8BD;
          border-radius: 50%; } }

@media screen and (min-width: 961px) {
  .top-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #b9aeda;
    overflow: hidden;
    z-index: 995; }
    .top-page::after {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background-image: url(../images/bg.png);
      background-size: 15px;
      opacity: 0.5; }
    .top-page::before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #BEB5DD;
      opacity: 0.4;
      transition: all 0.3s ease 0s; }
  .top-page[data-color="pink"]:before {
    background-color: #EEB9AE; }
  .top-page[data-color="light-pink"]:before {
    background-color: #E5B8BD; }
  .top-page[data-color="purple"]:before {
    background-color: #9F98D0; }
  .top-page[data-color="light-purple"]:before {
    background-color: #CBCFF8; }
  /*** ring ***/
  .top-page__ring {
    position: absolute;
    top: calc(50% - 325px);
    left: calc(50% - 325px);
    width: 650px;
    height: 650px;
    border-radius: 50%;
    opacity: 0.6;
    z-index: 1; }
    .top-page__ring .wrap {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
      .top-page__ring .wrap .inner {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
        .top-page__ring .wrap .inner div {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%; }
          .top-page__ring .wrap .inner div::after {
            position: absolute;
            top: 0px;
            left: calc(50% - 50px);
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-top: solid 120px transparent;
            border-left: solid 45px transparent;
            border-right: solid 45px transparent;
            opacity: 0; }
        .top-page__ring .wrap .inner div:nth-child(1n):after {
          border-top-color: #C2617E; }
        .top-page__ring .wrap .inner div:nth-child(2n):after {
          border-top-color: #E5B8BD; }
        .top-page__ring .wrap .inner div:nth-child(3n):after {
          border-top-color: #4A3F55; }
        .top-page__ring .wrap .inner div:nth-child(4n):after {
          border-top-color: #817487; }
        .top-page__ring .wrap .inner div:nth-child(5n):after {
          border-top-color: #E4D6CE; }
        .top-page__ring .wrap .inner div:nth-child(1) {
          transform: rotate(0deg); }
        .top-page__ring .wrap .inner div:nth-child(2) {
          transform: rotate(10deg); }
        .top-page__ring .wrap .inner div:nth-child(3) {
          transform: rotate(30deg); }
        .top-page__ring .wrap .inner div:nth-child(4) {
          transform: rotate(40deg); }
        .top-page__ring .wrap .inner div:nth-child(5) {
          transform: rotate(60deg); }
        .top-page__ring .wrap .inner div:nth-child(6) {
          transform: rotate(70deg); }
        .top-page__ring .wrap .inner div:nth-child(7) {
          transform: rotate(90deg); }
        .top-page__ring .wrap .inner div:nth-child(8) {
          transform: rotate(100deg); }
        .top-page__ring .wrap .inner div:nth-child(9) {
          transform: rotate(120deg); }
        .top-page__ring .wrap .inner div:nth-child(10) {
          transform: rotate(130deg); }
        .top-page__ring .wrap .inner div:nth-child(11) {
          transform: rotate(150deg); }
        .top-page__ring .wrap .inner div:nth-child(12) {
          transform: rotate(160deg); }
        .top-page__ring .wrap .inner div:nth-child(13) {
          transform: rotate(180deg); }
        .top-page__ring .wrap .inner div:nth-child(14) {
          transform: rotate(190deg); }
        .top-page__ring .wrap .inner div:nth-child(15) {
          transform: rotate(210deg); }
        .top-page__ring .wrap .inner div:nth-child(16) {
          transform: rotate(220deg); }
        .top-page__ring .wrap .inner div:nth-child(17) {
          transform: rotate(240deg); }
        .top-page__ring .wrap .inner div:nth-child(18) {
          transform: rotate(250deg); }
        .top-page__ring .wrap .inner div:nth-child(19) {
          transform: rotate(270deg); }
        .top-page__ring .wrap .inner div:nth-child(20) {
          transform: rotate(280deg); }
        .top-page__ring .wrap .inner div:nth-child(21) {
          transform: rotate(300deg); }
        .top-page__ring .wrap .inner div:nth-child(22) {
          transform: rotate(310deg); }
        .top-page__ring .wrap .inner div:nth-child(23) {
          transform: rotate(330deg); }
        .top-page__ring .wrap .inner div:nth-child(24) {
          transform: rotate(340deg); }
      .top-page__ring .wrap .inner {
        transform: scale(1.2); }
  /*** main-illust ***/
  .top-page__main-illust {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(./kokomi.png);
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 1; }
  /*** frame ***/
  .top-page__frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; }
    .top-page__frame section {
      position: absolute;
      width: 45px;
      height: 45px; }
      .top-page__frame section div {
        position: absolute;
        background-color: #4A3F55;
        border-radius: 3px;
        opacity: 0.8;
        transform: scale(0); }
      .top-page__frame section div:nth-child(1),
      .top-page__frame section div:nth-child(3) {
        width: 12px;
        height: 12px; }
      .top-page__frame section div:nth-child(2) {
        width: 25px;
        height: 25px; }
    .top-page__frame section:nth-child(1) {
      top: 20px;
      left: 20px; }
      .top-page__frame section:nth-child(1) div:nth-child(1) {
        top: 0;
        right: 0; }
      .top-page__frame section:nth-child(1) div:nth-child(2) {
        top: 0;
        left: 0; }
      .top-page__frame section:nth-child(1) div:nth-child(3) {
        bottom: 0;
        left: 0; }
    .top-page__frame section:nth-child(2) {
      top: 20px;
      right: 20px; }
      .top-page__frame section:nth-child(2) div:nth-child(1) {
        top: 0;
        left: 0; }
      .top-page__frame section:nth-child(2) div:nth-child(2) {
        top: 0;
        right: 0; }
      .top-page__frame section:nth-child(2) div:nth-child(3) {
        bottom: 0;
        right: 0; }
    .top-page__frame section:nth-child(3) {
      bottom: 20px;
      left: 20px; }
      .top-page__frame section:nth-child(3) div:nth-child(1) {
        top: 0;
        left: 0; }
      .top-page__frame section:nth-child(3) div:nth-child(2) {
        bottom: 0;
        left: 0; }
      .top-page__frame section:nth-child(3) div:nth-child(3) {
        bottom: 0;
        right: 0; }
    .top-page__frame section:nth-child(4) {
      bottom: 20px;
      right: 20px; }
      .top-page__frame section:nth-child(4) div:nth-child(1) {
        top: 0;
        right: 0; }
      .top-page__frame section:nth-child(4) div:nth-child(2) {
        bottom: 0;
        right: 0; }
      .top-page__frame section:nth-child(4) div:nth-child(3) {
        bottom: 0;
        left: 0; }
  /*** globa-nav ***/
  .top-page__global-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; }
    .top-page__global-nav .nav-box {
      position: absolute;
      top: calc(50% - 25px);
      left: calc(50% - 100px);
      width: 200px;
      height: 50px;
      opacity: 0; }
      .top-page__global-nav .nav-box section {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
        .top-page__global-nav .nav-box section a {
          display: block;
          position: absolute;
          top: 0;
          width: 200px;
          height: 50px;
          border-radius: 30px;
          font-size: 17px;
          font-weight: bold;
          color: transparent;
          text-align: center;
          line-height: 50px;
          overflow: hidden;
          transition: all 0.3s ease 0s; }
          .top-page__global-nav .nav-box section a::before, .top-page__global-nav .nav-box section a::after {
            content: "";
            display: block;
            position: absolute;
            width: 60%;
            height: 1px;
            background-color: #fff;
            opacity: 0.6;
            transition: all 0.5s ease 0s; }
          .top-page__global-nav .nav-box section a::before {
            top: 5px;
            left: 5px;
            transform: translateX(calc(-100% + -5px)); }
          .top-page__global-nav .nav-box section a::after {
            bottom: 5px;
            right: 5px;
            transform: translateX(calc(100% + 5px)); }
        .top-page__global-nav .nav-box section a:hover {
          transform: scale(1.2);
          border-radius: 0; }
          .top-page__global-nav .nav-box section a:hover::before, .top-page__global-nav .nav-box section a:hover::after {
            transform: translateX(0); }
        .top-page__global-nav .nav-box section a:nth-child(1) {
          left: 0; }
        .top-page__global-nav .nav-box section a:nth-child(2) {
          right: 0; }
      .top-page__global-nav .nav-box section:nth-child(1) a:nth-child(1) {
        background-color: #C2617E; }
      .top-page__global-nav .nav-box section:nth-child(1) a:nth-child(2) {
        background-color: #E5B8BD; }
      .top-page__global-nav .nav-box section:nth-child(2) a:nth-child(1) {
        background-color: #817487; }
      .top-page__global-nav .nav-box section:nth-child(2) a:nth-child(2) {
        background-color: #4A3F55; }
    .top-page__global-nav .message {
      position: absolute;
      left: calc(50% - 125px);
      top: calc(50% - 25px);
      width: 0px;
      height: 50px;
      border-radius: 30px;
      background-color: #4A3F55;
      box-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
      overflow: hidden; }
      .top-page__global-nav .message h3 {
        width: 250px;
        height: 50px;
        font-size: 15px;
        color: rgba(255, 255, 255, 0.8);
        text-align: center;
        line-height: 50px;
        transform: translateY(100%); }
  /*** logo ***/
  .top-page__logo {
    position: absolute;
    top: calc(50% - 50px);
    left: 0;
    width: 100%;
    height: 100px;
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 0;
    z-index: 1; }
    .top-page__logo img {
      position: absolute;
      left: calc(50% - 150px);
      top: 0;
      display: block;
      background-color: rgba(255, 255, 255, 0);
      height: 100px; }
  /*** sns ***/
  .top-page__sns {
    position: absolute;
    top: calc(50% - 125px);
    left: 0px;
    width: 50px;
    height: 250px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    overflow: hidden;
    transform: translateX(calc(-100% + -5px));
    z-index: 1; }
    .top-page__sns a {
      position: relative;
      display: block;
      width: 50px;
      height: 50px; }
      .top-page__sns a::before {
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        transform: translateX(-100%);
        transition: all 0.25s ease 0s; }
      .top-page__sns a i {
        position: absolute;
        top: 0;
        left: 0;
        width: 50px;
        height: 50px;
        font-size: 25px;
        line-height: 50px;
        text-align: center;
        color: #817487; }
    .top-page__sns a:hover:before {
      transform: translateX(0); }
    .top-page__sns a:nth-child(1)::before {
      background-color: #A8CBC6; }
    .top-page__sns a:nth-child(2)::before {
      background-color: #E4D6CE; }
    .top-page__sns a:nth-child(3) i {
      font-size: 22px; }
    .top-page__sns a:nth-child(3)::before {
      background-color: #F5E0A0; }
    .top-page__sns a:nth-child(4)::before {
      background-color: #E5B8BD; }
    .top-page__sns a:nth-child(5)::before {
      background-color: #C7B3D6; }
  /*** share-btn ***/
  .top-page__share-btn {
    position: absolute;
    right: 0;
    top: calc(50% - 25px);
    width: 140px;
    height: 50px;
    background-color: #A8CBC6;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    transform: translateX(calc(100% + 5px));
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s ease 0s; }
    .top-page__share-btn a {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
      font-size: 13px;
      text-align: center;
      line-height: 50px;
      color: #4A3F55;
      transition: all 0.3s ease 0s; }
      .top-page__share-btn a i {
        font-size: 20px;
        margin-right: 5px; }
  .top-page__share-btn:hover {
    background-color: #C2617E; }
    .top-page__share-btn:hover a {
      color: #fff; }
  .top-page[data-state="start"] {
    /*** ring ***/
    /*** main-illust ***/
    /*** frame ***/
    /*** logo ***/
    /*** global-nav ***/
    /*** sns ***/
    /*** share-btn ***/ }
    .top-page[data-state="start"] .top-page__ring .inner {
      animation: top-page__rotate-ring 150s linear 0s infinite; }
      .top-page[data-state="start"] .top-page__ring .inner div:nth-child(1n):after {
        animation: top-page__show-ring 0.4s ease 0s forwards; }
      .top-page[data-state="start"] .top-page__ring .inner div:nth-child(2n):after {
        animation: top-page__show-ring 0.4s ease 0.05s forwards; }
    .top-page[data-state="start"] .top-page__main-illust {
      animation: scale0-1 0.4s ease 0.2s forwards, fadein 0.4s ease 0.2s forwards; }
    .top-page[data-state="start"] .top-page__frame section div:nth-child(2) {
      animation: scale0-1 0.4s ease 0.6s forwards; }
    .top-page[data-state="start"] .top-page__frame section div:nth-child(1),
    .top-page[data-state="start"] .top-page__frame section div:nth-child(3) {
      animation: scale0-1 0.4s ease 0.7s forwards; }
    .top-page[data-state="start"] .top-page__logo {
      animation: fadein 2s ease 2.7s forwards; }
    .top-page[data-state="start"] .top-page__global-nav .nav-box {
      animation: fadein 0.1s ease 1.4s forwards; }
      .top-page[data-state="start"] .top-page__global-nav .nav-box section:nth-child(1) {
        animation: top-page__scale-nav 0.3s ease 1.4s forwards, top-page__rotate-nav-1 0.5s ease 1.7s forwards; }
        .top-page[data-state="start"] .top-page__global-nav .nav-box section:nth-child(1) a:nth-child(1) {
          animation: top-page__show-nav-text 0.7s ease 2.2s forwards; }
        .top-page[data-state="start"] .top-page__global-nav .nav-box section:nth-child(1) a:nth-child(2) {
          animation: top-page__show-nav-text 0.7s ease 2.5s forwards; }
      .top-page[data-state="start"] .top-page__global-nav .nav-box section:nth-child(2) {
        animation: top-page__scale-nav 0.3s ease 1.4s forwards, top-page__rotate-nav-2 0.5s ease 1.7s forwards; }
        .top-page[data-state="start"] .top-page__global-nav .nav-box section:nth-child(2) a:nth-child(1) {
          animation: top-page__show-nav-text 0.7s ease 2.3s forwards; }
        .top-page[data-state="start"] .top-page__global-nav .nav-box section:nth-child(2) a:nth-child(2) {
          animation: top-page__show-nav-text 0.7s ease 2.4s forwards; }
    .top-page[data-state="start"] .top-page__global-nav .message {
      animation: top-page__show-message 0.4s ease 1s forwards, top-page__hidden-message 0.5s ease 2s forwards; }
      .top-page[data-state="start"] .top-page__global-nav .message h3 {
        animation: slide-top 0.5s ease 1.2s forwards, fadeout 0.1s ease 2s forwards; }
    .top-page[data-state="start"] .top-page__sns {
      animation: slide-right 0.4s ease 3s forwards; }
    .top-page[data-state="start"] .top-page__share-btn {
      animation: slide-left 0.4s ease 3s forwards; } }

@media screen and (max-width: 600px) {
  .calling {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #4A3F55;
    overflow: hidden;
    z-index: 998; }
  /*** bg ***/
  .calling__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .calling__bg div {
      position: relative;
      float: left;
      width: 25%;
      height: 25%;
      overflow: hidden; }
      .calling__bg div::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-color: #333;
        transform: translateX(-100%); }
    .calling__bg::after {
      content: "";
      display: block;
      clear: both; }
  /*** controls-btn ***/
  .calling__controls-btn {
    position: absolute;
    bottom: 100px;
    left: calc(50% - 150px);
    width: 300px;
    height: 60px; }
    .calling__controls-btn .btn {
      position: absolute;
      top: 0;
      width: 60px;
      height: 60px;
      overflow: hidden;
      border-radius: 15px;
      transform: rotate(45deg); }
      .calling__controls-btn .btn .fa-phone {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        font-size: 30px;
        text-align: center;
        line-height: 60px;
        display: block;
        opacity: 0; }
      .calling__controls-btn .btn div {
        position: absolute; }
        .calling__controls-btn .btn div::after {
          content: "";
          display: block;
          width: 100%;
          height: 100%;
          background-color: rgba(255, 255, 255, 0.6); }
      .calling__controls-btn .btn div:nth-child(1),
      .calling__controls-btn .btn div:nth-child(3) {
        left: 0;
        width: 100%;
        height: 2px; }
      .calling__controls-btn .btn div:nth-child(2),
      .calling__controls-btn .btn div:nth-child(4) {
        top: 0;
        width: 2px;
        height: 100%; }
      .calling__controls-btn .btn div:nth-child(1) {
        top: 0; }
        .calling__controls-btn .btn div:nth-child(1)::after {
          transform: translateX(100%); }
      .calling__controls-btn .btn div:nth-child(2) {
        left: 0; }
        .calling__controls-btn .btn div:nth-child(2)::after {
          transform: translateY(-100%); }
      .calling__controls-btn .btn div:nth-child(3) {
        bottom: 0; }
        .calling__controls-btn .btn div:nth-child(3)::after {
          transform: translateX(-100%); }
      .calling__controls-btn .btn div:nth-child(4) {
        right: 0; }
        .calling__controls-btn .btn div:nth-child(4)::after {
          transform: translateX(100%); }
    .calling__controls-btn .btn-1 {
      left: 0; }
      .calling__controls-btn .btn-1 .fa-phone {
        color: #af5853;
        transform: rotate(180deg); }
    .calling__controls-btn .btn-2 {
      right: 0; }
      .calling__controls-btn .btn-2 .fa-phone {
        color: #6C9A7B;
        transform: rotate(45deg); }
    .calling__controls-btn .touch {
      position: absolute;
      top: 0;
      right: 0;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      border: solid 40px #fff;
      box-sizing: border-box;
      opacity: 0; }
  /*** icons ***/
  .calling__icons {
    position: absolute;
    top: 100px;
    left: calc(50% - 160px);
    width: 320px;
    height: 90px; }
    .calling__icons .icon-box {
      position: relative;
      margin-right: 25px;
      float: left;
      width: 90px;
      height: 90px; }
      .calling__icons .icon-box .icon {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #fff;
        border-radius: 50%;
        transform: scale(0);
        z-index: 1; }
        .calling__icons .icon-box .icon::after {
          margin: 5px;
          content: "";
          display: block;
          width: calc(100% - 10px);
          height: calc(100% - 10px);
          background-size: cover;
          background-position: center;
          border-radius: 50%;
          transform: scale(0); }
      .calling__icons .icon-box .name {
        position: absolute;
        left: 10px;
        bottom: -50px;
        width: 70px;
        height: 30px;
        font-size: 10px;
        text-align: center;
        line-height: 30px;
        color: #fff;
        overflow: hidden; }
        .calling__icons .icon-box .name span {
          display: block;
          transform: translateY(100%); }
        .calling__icons .icon-box .name::after {
          position: absolute;
          bottom: 0;
          left: 0;
          content: "";
          display: block;
          width: 100%;
          height: 1px;
          transform: translateX(-100%); }
      .calling__icons .icon-box::before, .calling__icons .icon-box::after {
        content: "";
        display: block;
        position: absolute;
        width: calc(100% - 40px);
        height: calc(100% - 40px);
        background-color: #fff;
        border-radius: 50%;
        opacity: 0; }
      .calling__icons .icon-box::before {
        top: -2px;
        left: -2px; }
      .calling__icons .icon-box::after {
        bottom: -2px;
        right: -2px; }
    .calling__icons .icon-box:last-child {
      margin-right: 0; }
    .calling__icons .icon-box:nth-child(1) .icon:after {
      background-color: #817487;
      background-image: url(../images/calling/icons/yui.png); }
    .calling__icons .icon-box:nth-child(1) .name:after {
      background-color: #817487; }
    .calling__icons .icon-box:nth-child(2) .icon:after {
      background-color: #C2617E;
      background-image: url(../images/calling/icons/gab.png); }
    .calling__icons .icon-box:nth-child(2) .name:after {
      background-color: #C2617E; }
    .calling__icons .icon-box:nth-child(3) .icon:after {
      background-color: #A8CBC6;
      background-image: url(../images/calling/icons/eriri.png); }
    .calling__icons .icon-box:nth-child(3) .name:after {
      background-color: #A8CBC6; }
  /*** controls-bar ***/
  .calling__controls-bar {
    position: absolute;
    bottom: 40px;
    left: 50%;
    width: 0px;
    height: 60px;
    background-color: #222;
    border-radius: 30px; }
    .calling__controls-bar .inner {
      width: 280px;
      margin: 0 auto; }
    .calling__controls-bar .btn {
      float: left;
      width: 60px;
      height: 60px;
      font-size: 25px;
      text-align: center;
      line-height: 60px;
      color: #999;
      display: block;
      margin-right: 50px;
      opacity: 0; }
    .calling__controls-bar .btn .fa-phone {
      transform: rotate(225deg);
      color: #af5853;
      font-size: 30px; }
    .calling__controls-bar .btn:last-child {
      margin-right: 0; }
  /*** live-view ***/
  .calling__live-view {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% - 140px); }
    .calling__live-view .view {
      position: absolute;
      width: 50%;
      height: 50%; }
      .calling__live-view .view .char {
        margin-left: 50%;
        margin-top: 10px;
        width: 0;
        height: calc(100% - 20px);
        border-radius: 8px;
        overflow: hidden; }
        .calling__live-view .view .char::after {
          content: "";
          display: block;
          width: 100%;
          height: 100%;
          background-size: auto 80%;
          background-position: center bottom;
          background-repeat: no-repeat;
          opacity: 0; }
      .calling__live-view .view .name {
        position: absolute;
        bottom: 20px;
        left: 20px;
        width: 100px;
        height: 20px; }
        .calling__live-view .view .name::before, .calling__live-view .view .name::after {
          content: "";
          display: block;
          position: absolute;
          width: 80%;
          height: 80%;
          background-color: #6C9A7B;
          border-radius: 20px;
          opacity: 0; }
        .calling__live-view .view .name::before {
          top: -4px;
          left: -4px; }
        .calling__live-view .view .name::after {
          bottom: -4px;
          right: -4px; }
        .calling__live-view .view .name span {
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 0%;
          height: 100%;
          border-radius: 15px;
          background-color: #444;
          font-size: 10px;
          line-height: 20px;
          text-align: center;
          color: #fff;
          overflow: hidden;
          z-index: 1; }
    .calling__live-view .view:nth-child(1) {
      top: 0;
      left: 0; }
      .calling__live-view .view:nth-child(1) .char {
        background-color: #817487; }
        .calling__live-view .view:nth-child(1) .char::after {
          transform: translateY(100%);
          background-image: url(../images/calling/icons/yui_large.png); }
    .calling__live-view .view:nth-child(2) {
      top: 0;
      right: 0; }
      .calling__live-view .view:nth-child(2) .char {
        background-color: #A8CBC6; }
        .calling__live-view .view:nth-child(2) .char::after {
          transform: translateX(-100%);
          background-image: url(../images/calling/icons/eriri_large.png); }
    .calling__live-view .view:nth-child(3) {
      bottom: 0;
      left: 25%; }
      .calling__live-view .view:nth-child(3) .char {
        background-color: #C2617E; }
        .calling__live-view .view:nth-child(3) .char::after {
          transform: translateX(100%);
          background-image: url(../images/calling/icons/gab_large.png); }
  .calling__say {
    position: absolute;
    left: -20%;
    top: calc(50% - 75px);
    width: 140%;
    height: 150px;
    transform: rotate(-20deg);
    z-index: 5; }
    .calling__say .line {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform: translateX(-100%); }
    .calling__say .line:nth-child(1) {
      background-color: #817487; }
    .calling__say .line:nth-child(2) {
      background-color: #A8CBC6; }
    .calling__say .line:nth-child(3) {
      background-color: #C2617E; }
    .calling__say .line:nth-child(4) {
      background-color: #4A3F55; }
    .calling__say .img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: auto 30%;
      background-position: center;
      background-repeat: no-repeat;
      background-image: url(../images/calling/say.png);
      opacity: 0; }
  /*** end ***/
  .calling__end {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 6; }
    .calling__end div {
      width: 100%;
      height: 10%;
      overflow: hidden; }
      .calling__end div::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-color: #A8CBC6;
        transform: translateY(-101%); }
  .calling[data-state="start"] {
    /*** bg ***/
    /*** icons ***/
    /*** controls-btn ***/
    /*** controls-bar ***/
    /*** say ***/
    /*** live-view ***/
    /*** end ***/ }
    .calling[data-state="start"] .calling__bg div:nth-child(1):after,
    .calling[data-state="start"] .calling__bg div:nth-child(2):after,
    .calling[data-state="start"] .calling__bg div:nth-child(3):after,
    .calling[data-state="start"] .calling__bg div:nth-child(4):after {
      animation: slide-right 0.4s ease 0s forwards; }
    .calling[data-state="start"] .calling__bg div:nth-child(5):after,
    .calling[data-state="start"] .calling__bg div:nth-child(6):after,
    .calling[data-state="start"] .calling__bg div:nth-child(7):after,
    .calling[data-state="start"] .calling__bg div:nth-child(8):after {
      animation: slide-right 0.4s ease 0.1s forwards; }
    .calling[data-state="start"] .calling__bg div:nth-child(9):after,
    .calling[data-state="start"] .calling__bg div:nth-child(10):after,
    .calling[data-state="start"] .calling__bg div:nth-child(11):after,
    .calling[data-state="start"] .calling__bg div:nth-child(12):after {
      animation: slide-right 0.4s ease 0.2s forwards; }
    .calling[data-state="start"] .calling__bg div:nth-child(13):after,
    .calling[data-state="start"] .calling__bg div:nth-child(14):after,
    .calling[data-state="start"] .calling__bg div:nth-child(15):after,
    .calling[data-state="start"] .calling__bg div:nth-child(16):after {
      animation: slide-right 0.4s ease 0.3s forwards; }
    .calling[data-state="start"] .calling__icons {
      animation: fadeout 0.5s ease 6.6s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box .name {
        animation: fadeout 0.5s ease 6.6s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(1) .icon {
        animation: scale0-0dot5 0.3s ease 2.5s alternate 2 forwards, scale0-1 0.5s ease 3.1s forwards; }
        .calling[data-state="start"] .calling__icons .icon-box:nth-child(1) .icon::after {
          animation: scale0-0dot5 0.3s ease 3.3s alternate 2 forwards, scale0-1 0.5s ease 3.9s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(1) .name span {
        animation: slide-top 0.7s ease 4.5s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(1) .name::after {
        animation: slide-right 0.3s ease 4.6s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(1)::before {
        animation: calling__icon-frame-1 0.8s ease 4s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(1)::after {
        animation: calling__icon-frame-2 0.8s ease 4.1s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(2) .icon {
        animation: scale0-0dot5 0.3s ease 1.5s alternate 2 forwards, scale0-1 0.5s ease 2.1s forwards; }
        .calling[data-state="start"] .calling__icons .icon-box:nth-child(2) .icon::after {
          animation: scale0-0dot5 0.3s ease 2.3s alternate 2 forwards, scale0-1 0.5s ease 2.9s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(2) .name span {
        animation: slide-top 0.7s ease 3.5s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(2) .name::after {
        animation: slide-right 0.3s ease 3.6s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(2)::before {
        animation: calling__icon-frame-1 0.8s ease 3s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(2)::after {
        animation: calling__icon-frame-2 0.8s ease 3.1s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(3) .icon {
        animation: scale0-0dot5 0.3s ease 3.5s alternate 2 forwards, scale0-1 0.5s ease 4.1s forwards; }
        .calling[data-state="start"] .calling__icons .icon-box:nth-child(3) .icon::after {
          animation: scale0-0dot5 0.3s ease 4.3s alternate 2 forwards, scale0-1 0.5s ease 4.9s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(3) .name span {
        animation: slide-top 0.7s ease 5.5s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(3) .name::after {
        animation: slide-right 0.3s ease 5.6s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(3)::before {
        animation: calling__icon-frame-1 0.8s ease 5s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(3)::after {
        animation: calling__icon-frame-2 0.8s ease 5.1s forwards; }
    .calling[data-state="start"] .calling__controls-btn {
      animation: fadeout 0.5s ease 6.6s forwards; }
      .calling[data-state="start"] .calling__controls-btn .btn-1 div:nth-child(1):after {
        animation: slide-left 0.6s ease 0.7s forwards; }
      .calling[data-state="start"] .calling__controls-btn .btn-1 div:nth-child(2):after {
        animation: slide-bottom 0.6s ease 0.7s forwards; }
      .calling[data-state="start"] .calling__controls-btn .btn-1 div:nth-child(3):after {
        animation: slide-right 0.6s ease 0.7s forwards; }
      .calling[data-state="start"] .calling__controls-btn .btn-1 div:nth-child(4):after {
        animation: slide-top 0.6s ease 0.7s forwards; }
      .calling[data-state="start"] .calling__controls-btn .btn-1 .fa-phone {
        animation: calling__show-btn-1 0.7s ease 1s forwards; }
      .calling[data-state="start"] .calling__controls-btn .btn-2 {
        animation: calling__press-btn 0.3s ease 5.9s alternate 2 forwards; }
        .calling[data-state="start"] .calling__controls-btn .btn-2 div:nth-child(1):after {
          animation: slide-left 0.6s ease 0.9s forwards; }
        .calling[data-state="start"] .calling__controls-btn .btn-2 div:nth-child(2):after {
          animation: slide-bottom 0.6s ease 0.9s forwards; }
        .calling[data-state="start"] .calling__controls-btn .btn-2 div:nth-child(3):after {
          animation: slide-right 0.6s ease 0.9s forwards; }
        .calling[data-state="start"] .calling__controls-btn .btn-2 div:nth-child(4):after {
          animation: slide-top 0.6s ease 0.9s forwards; }
        .calling[data-state="start"] .calling__controls-btn .btn-2 .fa-phone {
          animation: calling__show-btn-2 0.7s ease 1.2s forwards; }
      .calling[data-state="start"] .calling__controls-btn .touch {
        animation: calling__touch-btn 0.6s ease 5.9s forwards; }
    .calling[data-state="start"] .calling__controls-bar {
      animation: calling__show-controls-bar 0.4s ease 6.6s forwards; }
      .calling[data-state="start"] .calling__controls-bar div:nth-child(1) {
        animation: fadein 0.8s ease 7s forwards, scale0-1 0.8s ease 7s forwards; }
      .calling[data-state="start"] .calling__controls-bar div:nth-child(2) {
        animation: fadein 0.8s ease 7.4s forwards, scale0-1 0.8s ease 7.4s forwards; }
      .calling[data-state="start"] .calling__controls-bar div:nth-child(3) {
        animation: fadein 0.8s ease 7.2s forwards, scale0-1 0.8s ease 7.2s forwards; }
    .calling[data-state="start"] .calling__say .line:nth-child(1) {
      animation: slide-right 1s ease 11s forwards; }
    .calling[data-state="start"] .calling__say .line:nth-child(2) {
      animation: slide-right 1s ease 11.2s forwards; }
    .calling[data-state="start"] .calling__say .line:nth-child(3) {
      animation: slide-right 1s ease 11.4s forwards; }
    .calling[data-state="start"] .calling__say .line:nth-child(4) {
      animation: slide-right 1s ease 11.6s forwards; }
    .calling[data-state="start"] .calling__say .img {
      animation: calling__show-say 0.5s ease 11.9s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(1) .char {
      animation: calling__show-live-view 0.4s ease 8s forwards; }
      .calling[data-state="start"] .calling__live-view .view:nth-child(1) .char::after {
        animation: fadein 0.3s ease 8.8s forwards, slide-top 0.5s ease 8.8s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(1) .name span {
      animation: width0-100 0.3s ease 9.7s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(1) .name::before {
      animation: calling__char-name-frame-1 0.6s ease 10s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(1) .name::after {
      animation: calling__char-name-frame-2 0.6s ease 10s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(2) .char {
      animation: calling__show-live-view 0.4s ease 8.2s forwards; }
      .calling[data-state="start"] .calling__live-view .view:nth-child(2) .char::after {
        animation: fadein 0.3s ease 9s forwards, slide-right 0.5s ease 9s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(2) .name span {
      animation: width0-100 0.3s ease 9.9s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(2) .name::before {
      animation: calling__char-name-frame-1 0.6s ease 10.2s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(2) .name::after {
      animation: calling__char-name-frame-2 0.6s ease 10.2s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(3) .char {
      animation: calling__show-live-view 0.4s ease 8.4s forwards; }
      .calling[data-state="start"] .calling__live-view .view:nth-child(3) .char::after {
        animation: fadein 0.3s ease 9.2s forwards, slide-left 0.5s ease 9.2s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(3) .name span {
      animation: width0-100 0.3s ease 10.1s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(3) .name::before {
      animation: calling__char-name-frame-1 0.6s ease 10.4s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(3) .name::after {
      animation: calling__char-name-frame-2 0.6s ease 10.4s forwards; }
    .calling[data-state="start"] .calling__end div:nth-child(1):after {
      animation: slide-bottom 0.3s ease 12.6s forwards; }
    .calling[data-state="start"] .calling__end div:nth-child(2):after {
      animation: slide-bottom 0.3s ease 12.65s forwards; }
    .calling[data-state="start"] .calling__end div:nth-child(3):after {
      animation: slide-bottom 0.3s ease 12.75s forwards; }
    .calling[data-state="start"] .calling__end div:nth-child(4):after {
      animation: slide-bottom 0.3s ease 12.8s forwards; }
    .calling[data-state="start"] .calling__end div:nth-child(5):after {
      animation: slide-bottom 0.3s ease 12.85s forwards; }
    .calling[data-state="start"] .calling__end div:nth-child(6):after {
      animation: slide-bottom 0.3s ease 12.9s forwards; }
    .calling[data-state="start"] .calling__end div:nth-child(7):after {
      animation: slide-bottom 0.3s ease 12.95s forwards; }
    .calling[data-state="start"] .calling__end div:nth-child(8):after {
      animation: slide-bottom 0.3s ease 13.0s forwards; }
    .calling[data-state="start"] .calling__end div:nth-child(9):after {
      animation: slide-bottom 0.3s ease 13.05s forwards; }
    .calling[data-state="start"] .calling__end div:nth-child(10):after {
      animation: calling__end 0.3s ease 13.1s forwards; } }

@media screen and (min-width: 601px) and (max-width: 960px) {
  .end-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 997; }
  /*** end-roll ***/
  .end-animation__end-roll {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #A8CBC6; }
    .end-animation__end-roll .text-balls {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
      .end-animation__end-roll .text-balls .text-ball {
        position: absolute;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        opacity: 0; }
        .end-animation__end-roll .text-balls .text-ball .inner {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: #F0EFE7;
          border-radius: 50%;
          border: solid 10px #F0EFE7;
          box-sizing: border-box;
          overflow: hidden; }
          .end-animation__end-roll .text-balls .text-ball .inner .bg {
            width: 100%;
            height: 100%; }
          .end-animation__end-roll .text-balls .text-ball .inner .bg div {
            width: 100%;
            height: 10%;
            background-color: #EBC1C7;
            margin-bottom: 10%;
            transform: translateX(-100%); }
          .end-animation__end-roll .text-balls .text-ball .inner::after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: 60%;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 0; }
      .end-animation__end-roll .text-balls .text-ball:nth-child(1) {
        top: 50px;
        left: 50px; }
        .end-animation__end-roll .text-balls .text-ball:nth-child(1) .inner:after {
          background-image: url(../images/end-animation/end-roll/1.png); }
      .end-animation__end-roll .text-balls .text-ball:nth-child(2) {
        top: 50px;
        right: 50px; }
        .end-animation__end-roll .text-balls .text-ball:nth-child(2) .inner:after {
          background-image: url(../images/end-animation/end-roll/2.png); }
      .end-animation__end-roll .text-balls .text-ball:nth-child(3) {
        bottom: 50px;
        left: 50px; }
        .end-animation__end-roll .text-balls .text-ball:nth-child(3) .inner:after {
          background-image: url(../images/end-animation/end-roll/3.png); }
    .end-animation__end-roll .paints {
      position: absolute;
      top: calc(50% - 60px);
      left: calc(50% - 60px);
      width: 120px;
      height: 120px; }
      .end-animation__end-roll .paints div {
        float: left;
        width: calc(50% - 5px);
        height: calc(50% - 5px);
        margin-right: 10px;
        border-radius: 50%;
        opacity: 0; }
      .end-animation__end-roll .paints div:nth-child(1),
      .end-animation__end-roll .paints div:nth-child(2) {
        margin-bottom: 10px; }
      .end-animation__end-roll .paints div:nth-child(2n) {
        margin-right: 0; }
      .end-animation__end-roll .paints div:nth-child(1) {
        background-color: #C2617E; }
      .end-animation__end-roll .paints div:nth-child(2) {
        background-color: #817487; }
      .end-animation__end-roll .paints div:nth-child(3) {
        background-color: #4A3F55; }
      .end-animation__end-roll .paints div:nth-child(4) {
        background-color: #E5B8BD; }
    .end-animation__end-roll .window {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #b9aeda;
      transform: translateY(-100%);
      perspective: 1500px; }
      .end-animation__end-roll .window img {
        display: block;
        height: 200px;
        position: absolute;
        bottom: 30px;
        right: 0px;
        transform: rotateZ(-20deg); }
      .end-animation__end-roll .window::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(../images/bg.png);
        background-size: 15px;
        opacity: 0.4; }
  .end-animation[data-state="start"] {
    /*** end-roll ***/ }
    .end-animation[data-state="start"] .end-animation__end-roll {
      animation: end-animation__end-roll-color-1 0.5s ease 1.2s forwards, end-animation__end-roll-color-2 0.5s ease 2.1s forwards, end-animation__end-roll-color-3 0.5s ease 3s forwards, end-animation__end-roll-color-4 0.5s ease 3.9s forwards; }
      .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(1) {
        animation: end-animation__move-text-ball-1 0.4s ease 1.2s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(1) .inner {
          animation: end-animation__jump-text-ball-1 0.4s ease 1.2s forwards; }
          .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(1) .inner::after {
            animation: fadein 0.5s ease 1.6s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(1) .bg div:nth-child(1) {
          animation: slide-right 0.3s ease 1.6s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(1) .bg div:nth-child(2) {
          animation: slide-right 0.3s ease 1.65s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(1) .bg div:nth-child(3) {
          animation: slide-right 0.3s ease 1.7s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(1) .bg div:nth-child(4) {
          animation: slide-right 0.3s ease 1.75s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(1) .bg div:nth-child(5) {
          animation: slide-right 0.3s ease 1.8s forwards; }
      .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(2) {
        animation: end-animation__move-text-ball-2 0.4s ease 2.1s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(2) .inner {
          animation: end-animation__jump-text-ball-2 0.4s ease 2.1s forwards; }
          .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(2) .inner::after {
            animation: fadein 0.5s ease 2.5s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(2) .bg div:nth-child(1) {
          animation: slide-right 0.3s ease 2.5s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(2) .bg div:nth-child(2) {
          animation: slide-right 0.3s ease 2.55s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(2) .bg div:nth-child(3) {
          animation: slide-right 0.3s ease 2.6s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(2) .bg div:nth-child(4) {
          animation: slide-right 0.3s ease 2.65s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(2) .bg div:nth-child(5) {
          animation: slide-right 0.3s ease 2.7s forwards; }
      .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(3) {
        animation: end-animation__move-text-ball-3 0.4s ease 3s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(3) .inner {
          animation: end-animation__jump-text-ball-3 0.4s ease 3s forwards; }
          .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(3) .inner::after {
            animation: fadein 0.5s ease 3.4s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(3) .bg div:nth-child(1) {
          animation: slide-right 0.3s ease 3.4s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(3) .bg div:nth-child(2) {
          animation: slide-right 0.3s ease 3.45s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(3) .bg div:nth-child(3) {
          animation: slide-right 0.3s ease 3.5s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(3) .bg div:nth-child(4) {
          animation: slide-right 0.3s ease 3.55s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(3) .bg div:nth-child(5) {
          animation: slide-right 0.3s ease 3.6s forwards; }
      .end-animation[data-state="start"] .end-animation__end-roll .paints div:nth-child(1) {
        animation: end-animation__show-paint 0.6s ease 0s forwards, scale0-1 0.5s ease-out 1.2s reverse forwards; }
      .end-animation[data-state="start"] .end-animation__end-roll .paints div:nth-child(2) {
        animation: end-animation__show-paint 0.4s ease 0.2s forwards, scale0-1 0.5s ease-out 2.1s reverse forwards; }
      .end-animation[data-state="start"] .end-animation__end-roll .paints div:nth-child(3) {
        animation: end-animation__show-paint 0.4s ease 0.4s forwards, scale0-1 0.5s ease-out 3s reverse forwards; }
      .end-animation[data-state="start"] .end-animation__end-roll .paints div:nth-child(4) {
        animation: end-animation__show-paint 0.4s ease 0.6s forwards; }
      .end-animation[data-state="start"] .end-animation__end-roll .window {
        animation: end-animation__down-window 0.5s ease-out 4.2s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .window img {
          animation: end-animation__end 0.5s ease 4.7s forwards; } }

@media screen and (max-width: 600px) {
  .gab-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #E5B8BD;
    overflow: hidden;
    z-index: 999; }
  /*** bg ***/
  .gab-animation__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .gab-animation__bg div {
      width: 100%;
      height: 12.5%;
      background-color: #b9aeda;
      transform: translateX(-100%); }
  /*** frame ***/
  .gab-animation__frame {
    position: absolute;
    top: -100px;
    left: calc(50% - 50px);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden; }
    .gab-animation__frame .area {
      position: relative;
      float: left;
      width: 50%;
      height: 100%;
      overflow: hidden; }
      .gab-animation__frame .area::before, .gab-animation__frame .area::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
      .gab-animation__frame .area::before {
        background-color: #E5B8BD; }
      .gab-animation__frame .area::after {
        background-color: #4A3F55; }
    .gab-animation__frame .area:nth-child(1)::after {
      transform: translate(calc(-100% + 5px), -100%); }
    .gab-animation__frame .area:nth-child(2)::after {
      transform: translate(calc(100% - 5px), 100%); }
    .gab-animation__frame::after {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: url(../images/gab-animation/bg.png);
      background-size: 30px;
      opacity: 0; }
  .gab-animation__illust {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .gab-animation__illust .paint-balls {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
      .gab-animation__illust .paint-balls div {
        float: left;
        width: 50%;
        height: 100%; }
        .gab-animation__illust .paint-balls div::after {
          position: absolute;
          top: calc(50% - 50px);
          content: "";
          display: block;
          width: 100px;
          height: 100px;
          background-color: #F0DB9E;
          border-radius: 50%; }
      .gab-animation__illust .paint-balls div:nth-child(1)::after {
        left: -100px; }
      .gab-animation__illust .paint-balls div:nth-child(2)::after {
        right: -100px; }
    .gab-animation__illust .illust {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      perspective: 400px; }
      .gab-animation__illust .illust::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-image: url(../images/gab-animation/gab.png);
        background-size: auto 90%;
        background-repeat: no-repeat;
        background-position: center bottom;
        opacity: 0; }
  .gab-animation__effects {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .gab-animation__effects .ball {
      position: absolute;
      border-radius: 50%; }
    .gab-animation__effects .ball:nth-child(2n - 1) {
      top: -60px;
      width: 60px;
      height: 60px; }
    .gab-animation__effects .ball:nth-child(2n) {
      top: -45px;
      width: 45px;
      height: 45px; }
    .gab-animation__effects .ball:nth-child(1) {
      background-color: #E5B8BD;
      left: calc(50% - 150px); }
    .gab-animation__effects .ball:nth-child(2) {
      background-color: #817487;
      left: calc(50% - 30px); }
    .gab-animation__effects .ball:nth-child(3) {
      background-color: #E4D6CE;
      left: calc(50% + 45px); }
    .gab-animation__effects .ball:nth-child(4) {
      background-color: #E5B8BD;
      left: calc(50% - 150px); }
    .gab-animation__effects .ball:nth-child(5) {
      background-color: #817487;
      left: calc(50% - 30px); }
    .gab-animation__effects .ball:nth-child(6) {
      background-color: #E4D6CE;
      left: calc(50% + 45px); }
    .gab-animation__effects .ball:nth-child(7) {
      background-color: #E5B8BD;
      left: calc(50% - 150px); }
    .gab-animation__effects .ball:nth-child(8) {
      background-color: #817487;
      left: calc(50% - 30px); }
  .gab-animation__gauge {
    position: absolute;
    bottom: 50px;
    left: calc(50% - 150px);
    width: 300px;
    height: 50px;
    overflow: hidden; }
    .gab-animation__gauge .name {
      width: 100px;
      height: 18px;
      font-size: 14px;
      color: #4A3F55;
      line-height: 18px;
      padding: 0 5px;
      font-weight: bold;
      box-sizing: border-box;
      border: solid 2px #4A3F55;
      border-bottom: none;
      background-color: #eee;
      transform: translateX(-100%); }
    .gab-animation__gauge .gauge {
      width: 100%;
      height: 32px;
      box-sizing: border-box;
      border: solid 2px #4A3F55;
      background-color: #ff2600;
      transform: translateX(-100%);
      overflow: hidden; }
      .gab-animation__gauge .gauge::after {
        width: 100%;
        height: 100%;
        content: "";
        display: block;
        background-color: #86c351;
        transform: translateX(0%); }
  .gab-animation__back-overray {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .gab-animation__back-overray section {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
      .gab-animation__back-overray section div {
        float: left;
        content: "";
        display: block;
        width: 50%;
        height: 100%;
        overflow: hidden; }
        .gab-animation__back-overray section div::after {
          content: "";
          display: block;
          width: 100%;
          height: 100%; }
      .gab-animation__back-overray section div:nth-child(1):after {
        transform: translateX(100%); }
      .gab-animation__back-overray section div:nth-child(2):after {
        transform: translateX(-100%); }
    .gab-animation__back-overray section:nth-child(1) div:after {
      background-color: #C2617E; }
    .gab-animation__back-overray section:nth-child(2) div:after {
      background-color: #E5B8BD; }
    .gab-animation__back-overray section:nth-child(3) div:after {
      background-color: #b9aeda; }
  .gab-animation__message {
    position: absolute;
    top: calc(50% - 74.5px);
    left: calc(50% - 200px);
    width: 400px;
    height: 149px;
    background-image: url(../images/gab-animation/message.png);
    background-size: 100%;
    opacity: 0; }
  .gab-animation__front-overray {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .gab-animation__front-overray section {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
      .gab-animation__front-overray section div {
        float: left;
        content: "";
        display: block;
        width: 50%;
        height: 100%;
        overflow: hidden; }
        .gab-animation__front-overray section div::after {
          content: "";
          display: block;
          width: 100%;
          height: 100%;
          background-color: #4A3F55; }
      .gab-animation__front-overray section div:nth-child(1):after {
        transform: translateX(100%); }
      .gab-animation__front-overray section div:nth-child(2):after {
        transform: translateX(-100%); }
  .gab-animation__palette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .gab-animation__palette .paint-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform: scale(0.5); }
    .gab-animation__palette .paint {
      position: absolute;
      top: -100px;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #b9aeda;
      opacity: 0; }
      .gab-animation__palette .paint div {
        position: absolute;
        top: 50%;
        overflow: hidden; }
        .gab-animation__palette .paint div::after {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: #b9aeda;
          transform: translateY(-100%); }
      .gab-animation__palette .paint div:nth-child(1) {
        left: calc(50% - 5px);
        width: 10px;
        height: 120px; }
        .gab-animation__palette .paint div:nth-child(1)::after {
          border-radius: 10px; }
      .gab-animation__palette .paint div:nth-child(2) {
        left: 2px;
        width: 18px;
        height: 70px; }
        .gab-animation__palette .paint div:nth-child(2)::after {
          border-radius: 15px; }
      .gab-animation__palette .paint div:nth-child(3) {
        right: 20px;
        width: 15px;
        height: 75px; }
        .gab-animation__palette .paint div:nth-child(3)::after {
          border-radius: 10px; }
      .gab-animation__palette .paint div:nth-child(4) {
        right: 0px;
        width: 10px;
        height: 50px; }
        .gab-animation__palette .paint div:nth-child(4)::after {
          border-radius: 10px; }
      .gab-animation__palette .paint .char {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
        background-size: 80%;
        background-position: center;
        background-repeat: no-repeat; }
        .gab-animation__palette .paint .char::after {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: #b9aeda;
          border-radius: 50%; }
      .gab-animation__palette .paint .char-1 {
        background-image: url(../images/gab-animation/name/1.png); }
      .gab-animation__palette .paint .char-2 {
        background-image: url(../images/gab-animation/name/2.png); }
      .gab-animation__palette .paint .char-3 {
        background-image: url(../images/gab-animation/name/3.png); }
      .gab-animation__palette .paint .char-4 {
        background-image: url(../images/gab-animation/name/4.png); }
      .gab-animation__palette .paint .char-5 {
        background-image: url(../images/gab-animation/name/5.png); }
    .gab-animation__palette .paint:nth-child(1) {
      left: calc(50% - 330px); }
    .gab-animation__palette .paint:nth-child(2) {
      left: calc(50% - 190px); }
    .gab-animation__palette .paint:nth-child(3) {
      left: calc(50% - 50px); }
    .gab-animation__palette .paint:nth-child(4) {
      left: calc(50% + 90px); }
    .gab-animation__palette .paint:nth-child(5) {
      left: calc(50% + 230px); }
    .gab-animation__palette .frame {
      position: absolute;
      left: 0;
      width: 100%;
      height: calc((100% - 300px) / 2);
      overflow: hidden; }
      .gab-animation__palette .frame div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
      .gab-animation__palette .frame div:nth-child(1) {
        background-color: #E4D6CE; }
      .gab-animation__palette .frame div:nth-child(2) {
        background-color: #b9aeda; }
      .gab-animation__palette .frame div:nth-child(3) {
        background-color: #E5B8BD; }
      .gab-animation__palette .frame div:nth-child(4) {
        background-color: #C2617E; }
      .gab-animation__palette .frame div:nth-child(5) {
        background-color: #A8CBC6; }
    .gab-animation__palette .frame-top {
      top: 0; }
      .gab-animation__palette .frame-top div {
        transform: translateY(100%); }
    .gab-animation__palette .frame-bottom {
      bottom: 0; }
      .gab-animation__palette .frame-bottom div {
        transform: translateY(-100%); }
    .gab-animation__palette .clock {
      position: absolute;
      top: calc((100% - 300px) / 2);
      left: 0;
      width: 100%;
      height: 300px; }
      .gab-animation__palette .clock::before, .gab-animation__palette .clock::after {
        content: "";
        display: block;
        position: absolute;
        transform: scale(0); }
      .gab-animation__palette .clock::before {
        top: calc(50% - 100px);
        left: calc(50% - 100px);
        width: 200px;
        height: 200px;
        border-radius: 50%;
        box-sizing: border-box;
        border: dashed 5px #A8CBC6; }
      .gab-animation__palette .clock::after {
        top: calc(50% - 125px);
        left: calc(50% - 125px);
        width: 250px;
        height: 250px;
        border-radius: 50%;
        box-sizing: border-box;
        border: solid 10px #A8CBC6;
        border-top-color: transparent;
        border-bottom-color: transparent; }
      .gab-animation__palette .clock div {
        position: absolute;
        left: calc(50% - 5px);
        top: 50%;
        width: 10px;
        height: 0;
        background-color: #A8CBC6;
        z-index: 1; }
  .gab-animation__camera {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    perspective: 20px;
    z-index: 2; }
    .gab-animation__camera .layer {
      position: absolute;
      top: calc(50% - 225px);
      left: calc(50% - 325px);
      width: 650px;
      height: 450px;
      border-radius: 30px;
      overflow: hidden;
      box-shadow: 0 0 10px #aaa; }
      .gab-animation__camera .layer::before, .gab-animation__camera .layer::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box; }
      .gab-animation__camera .layer::before {
        background-size: cover;
        background-position: center; }
      .gab-animation__camera .layer::after {
        border: solid 25px #fff;
        box-shadow: 0 0 10px #aaa inset; }
    .gab-animation__camera .layer-1 {
      transform: translateZ(20px) scale(calc(1 - (20 / 100))); }
      .gab-animation__camera .layer-1::before {
        background-image: url(../images/gab-animation/comic/1.png); }
    .gab-animation__camera .layer-2 {
      transform: translateZ(120px) scale(calc(1 - (120 / 200))); }
      .gab-animation__camera .layer-2::before {
        transform: translateY(-100%);
        background-image: url(../images/gab-animation/comic/2.png); }
    .gab-animation__camera .layer-3 {
      transform: translateZ(220px) scale(calc(1 - (220 / 300))); }
      .gab-animation__camera .layer-3::before {
        transform: translateY(100%);
        background-image: url(../images/gab-animation/comic/3.png); }
    .gab-animation__camera .layer-4 {
      transform: translateZ(320px) scale(calc(1 - (320 / 400))); }
      .gab-animation__camera .layer-4::before {
        transform: translateY(-100%);
        background-image: url(../images/gab-animation/comic/4.png); }
  .gab-animation__close {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 6; }
    .gab-animation__close .effect {
      position: absolute;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      transform: scale(1.5);
      overflow: hidden; }
      .gab-animation__close .effect div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
        .gab-animation__close .effect div:after {
          content: "";
          display: block;
          position: absolute;
          top: 5px;
          left: calc(50% - 8.75px);
          width: 0;
          height: 0;
          border: solid 5px transparent;
          border-top: solid 17.5px #4A3F55;
          opacity: 0; }
      .gab-animation__close .effect div:nth-child(1) {
        transform: rotate(0deg); }
      .gab-animation__close .effect div:nth-child(2) {
        transform: rotate(30deg); }
      .gab-animation__close .effect div:nth-child(3) {
        transform: rotate(60deg); }
      .gab-animation__close .effect div:nth-child(4) {
        transform: rotate(90deg); }
      .gab-animation__close .effect div:nth-child(5) {
        transform: rotate(120deg); }
      .gab-animation__close .effect div:nth-child(6) {
        transform: rotate(150deg); }
      .gab-animation__close .effect div:nth-child(7) {
        transform: rotate(180deg); }
      .gab-animation__close .effect div:nth-child(8) {
        transform: rotate(210deg); }
      .gab-animation__close .effect div:nth-child(9) {
        transform: rotate(240deg); }
      .gab-animation__close .effect div:nth-child(10) {
        transform: rotate(270deg); }
      .gab-animation__close .effect div:nth-child(11) {
        transform: rotate(300deg); }
      .gab-animation__close .effect div:nth-child(12) {
        transform: rotate(330deg); }
    .gab-animation__close .effect-1 {
      top: calc(50% - 50px);
      left: calc(50% - 50px); }
    .gab-animation__close .effect-2 {
      top: 20px;
      right: 20px; }
    .gab-animation__close .effect-3 {
      bottom: 20px;
      left: 20px; }
    .gab-animation__close .ball {
      position: absolute;
      width: 250px;
      height: 250px;
      border-radius: 50%;
      background-color: #4A3F55;
      transform: scale(0); }
      .gab-animation__close .ball::after {
        content: "";
        display: block;
        position: absolute;
        top: 20%;
        left: 20%;
        width: 60%;
        height: 60%;
        border-radius: 50%;
        background-color: #817487; }
    .gab-animation__close .ball-1 {
      top: calc(20px - 125px);
      right: calc(20px - 125px); }
    .gab-animation__close .ball-2 {
      top: calc(50% - 125px);
      left: calc(50% - 125px); }
    .gab-animation__close .ball-3 {
      bottom: calc(20px - 125px);
      left: calc(20px - 125px); }
    .gab-animation__close .end-block {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
      .gab-animation__close .end-block .paint-ball {
        position: absolute;
        top: calc(50% - 20px);
        left: calc(50% - 20px);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #4A3F55;
        transform: scale(0); }
      .gab-animation__close .end-block::before, .gab-animation__close .end-block::after {
        position: absolute;
        content: "";
        display: block; }
      .gab-animation__close .end-block::before {
        left: calc(50% - 1px);
        top: 50%;
        width: 2px;
        height: 0;
        background-color: #4A3F55; }
      .gab-animation__close .end-block::after {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: #4A3F55;
        top: calc(50% - 100px);
        left: calc(50% - 100px);
        transform: scale(0); }
  /*************************************************************************************************
   * animation
   *************************************************************************************************/
  .gab-animation[data-state="start"] .gab-animation__bg div:nth-child(1) {
    animation: slide-right 0.4s ease 0s forwards; }
  .gab-animation[data-state="start"] .gab-animation__bg div:nth-child(2) {
    animation: slide-right 0.4s ease 0.1s forwards; }
  .gab-animation[data-state="start"] .gab-animation__bg div:nth-child(3) {
    animation: slide-right 0.4s ease 0.2s forwards; }
  .gab-animation[data-state="start"] .gab-animation__bg div:nth-child(4) {
    animation: slide-right 0.4s ease 0.3s forwards; }
  .gab-animation[data-state="start"] .gab-animation__bg div:nth-child(5) {
    animation: slide-right 0.4s ease 0.4s forwards; }
  .gab-animation[data-state="start"] .gab-animation__bg div:nth-child(6) {
    animation: slide-right 0.4s ease 0.5s forwards; }
  .gab-animation[data-state="start"] .gab-animation__bg div:nth-child(7) {
    animation: slide-right 0.4s ease 0.6s forwards; }
  .gab-animation[data-state="start"] .gab-animation__bg div:nth-child(8) {
    animation: slide-right 0.4s ease 0.7s forwards; }
  .gab-animation[data-state="start"] .gab-animation__frame {
    animation: gab-animation__fall-frame 0.5s ease-out 1.1s forwards, gab-animation__scale-frame 0.7s ease-in-out 1.6s forwards, gab-animation__open-frame 0.4s ease-in-out 2.3s forwards, gab-animation__radius-frame 1s ease-in-out 3.8s forwards; }
    .gab-animation[data-state="start"] .gab-animation__frame::after {
      animation: gab-animation__show-bg 0.4s ease 3.8s forwards; }
    .gab-animation[data-state="start"] .gab-animation__frame .area:nth-child(1)::before {
      animation: gab-animation__move-y1-area-1 0.3s ease 2.7s forwards, gab-animation__move-x-area-1 0.4s ease 3s forwards, gab-animation__move-y2-area-1 0.3s ease 3.4s forwards; }
    .gab-animation[data-state="start"] .gab-animation__frame .area:nth-child(1)::after {
      animation: gab-animation__move-y-area-bg-1 0.3s ease 3.5s forwards, gab-animation__move-x-area-bg-1 0.4s ease 3.8s forwards; }
    .gab-animation[data-state="start"] .gab-animation__frame .area:nth-child(2)::before {
      animation: gab-animation__move-y1-area-2 0.3s ease 2.7s forwards, gab-animation__move-x-area-2 0.4s ease 3s forwards, gab-animation__move-y2-area-2 0.3s ease 3.4s forwards; }
    .gab-animation[data-state="start"] .gab-animation__frame .area:nth-child(2)::after {
      animation: gab-animation__move-y-area-bg-2 0.3s ease 3.5s forwards, gab-animation__move-x-area-bg-2 0.4s ease 3.8s forwards; }
  .gab-animation[data-state="start"] .gab-animation__illust .paint-balls div:nth-child(1) {
    animation: gab-animation__x-paint-ball-1 0.4s ease-in-out 4s forwards; }
    .gab-animation[data-state="start"] .gab-animation__illust .paint-balls div:nth-child(1)::after {
      animation: gab-animation__y-paint-ball-1 0.4s ease-in-out 4s forwards, fadeout 0.1s ease 4.4s forwards; }
  .gab-animation[data-state="start"] .gab-animation__illust .paint-balls div:nth-child(2) {
    animation: gab-animation__x-paint-ball-2 0.4s ease-in-out 4s forwards; }
    .gab-animation[data-state="start"] .gab-animation__illust .paint-balls div:nth-child(2)::after {
      animation: gab-animation__y-paint-ball-2 0.4s ease-in-out 4s forwards, gab-animation__scale-frame 0.8s ease-in-out 4.4s forwards, scale10 0.5s ease 5.2s forwards, fadeout 0.5s ease 5.2s forwards; }
  .gab-animation[data-state="start"] .gab-animation__illust .illust::after {
    animation: fadein 0.1s ease 5.2s forwards, gab-animation__rotate-illust 0.6s ease 5.2s forwards, gab-animation__attack-gab 0.1s ease 5.7s alternate 10 forwards, gab-animation__down-gab 0.8s ease 6.7s forwards; }
  .gab-animation[data-state="start"] .gab-animation__effects .ball:nth-child(1) {
    animation: gab-animation__fall-ball-effect 0.2s ease-out 5.6s forwards, gab-animation__scale-ball-effect 0.3s ease 5.8s forwards; }
  .gab-animation[data-state="start"] .gab-animation__effects .ball:nth-child(2) {
    animation: gab-animation__fall-ball-effect 0.2s ease-out 5.7s forwards, gab-animation__scale-ball-effect 0.3s ease 5.9s forwards; }
  .gab-animation[data-state="start"] .gab-animation__effects .ball:nth-child(3) {
    animation: gab-animation__fall-ball-effect 0.2s ease-out 5.8s forwards, gab-animation__scale-ball-effect 0.3s ease 6s forwards; }
  .gab-animation[data-state="start"] .gab-animation__effects .ball:nth-child(6) {
    animation: gab-animation__fall-ball-effect 0.2s ease-out 5.9s forwards, gab-animation__scale-ball-effect 0.3s ease 6.1s forwards; }
  .gab-animation[data-state="start"] .gab-animation__effects .ball:nth-child(5) {
    animation: gab-animation__fall-ball-effect 0.2s ease-out 6s forwards, gab-animation__scale-ball-effect 0.3s ease 6.2s forwards; }
  .gab-animation[data-state="start"] .gab-animation__effects .ball:nth-child(4) {
    animation: gab-animation__fall-ball-effect 0.2s ease-out 6.1s forwards, gab-animation__scale-ball-effect 0.3s ease 6.3s forwards; }
  .gab-animation[data-state="start"] .gab-animation__effects .ball:nth-child(7) {
    animation: gab-animation__fall-ball-effect 0.2s ease-out 6.2s forwards, gab-animation__scale-ball-effect 0.3s ease 6.4s forwards; }
  .gab-animation[data-state="start"] .gab-animation__effects .ball:nth-child(8) {
    animation: gab-animation__fall-ball-effect 0.2s ease-out 6.3s forwards, gab-animation__scale-ball-effect 0.3s ease 6.5s forwards; }
  .gab-animation[data-state="start"] .gab-animation__gauge {
    animation: fadeout 0.8s ease 6.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__gauge .name {
      animation: slide-right 0.35s ease 5.4s forwards; }
    .gab-animation[data-state="start"] .gab-animation__gauge .gauge {
      animation: slide-right 0.35s ease 5.5s forwards; }
      .gab-animation[data-state="start"] .gab-animation__gauge .gauge::after {
        animation: slide-right 1s ease 5.7s reverse forwards; }
  .gab-animation[data-state="start"] .gab-animation__back-overray section:nth-child(1) div:nth-child(1):after {
    animation: slide-left 0.5s ease 7.3s forwards; }
  .gab-animation[data-state="start"] .gab-animation__back-overray section:nth-child(1) div:nth-child(2):after {
    animation: slide-right 0.5s ease 7.3s forwards; }
  .gab-animation[data-state="start"] .gab-animation__back-overray section:nth-child(2) div:nth-child(1):after {
    animation: slide-left 0.5s ease 7.4s forwards; }
  .gab-animation[data-state="start"] .gab-animation__back-overray section:nth-child(2) div:nth-child(2):after {
    animation: slide-right 0.5s ease 7.4s forwards; }
  .gab-animation[data-state="start"] .gab-animation__back-overray section:nth-child(3) div:nth-child(1):after {
    animation: slide-left 0.5s ease 7.5s forwards; }
  .gab-animation[data-state="start"] .gab-animation__back-overray section:nth-child(3) div:nth-child(2):after {
    animation: slide-right 0.5s ease 7.5s forwards; }
  .gab-animation[data-state="start"] .gab-animation__message {
    animation: gab-animation__message 0.4s ease 6.9s forwards; }
  .gab-animation[data-state="start"] .gab-animation__front-overray section div:nth-child(1):after {
    animation: slide-left 0.7s ease 7.8s forwards; }
  .gab-animation[data-state="start"] .gab-animation__front-overray section div:nth-child(2):after {
    animation: slide-right 0.7s ease 7.8s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(1) {
    animation: fadein 0.1s ease 9s forwards, gab-animation__fall-paint-1 0.2s ease 9s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(1) div:nth-child(1):after {
      animation: slide-bottom 2s ease 9.2s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(1) div:nth-child(2):after {
      animation: slide-bottom 1s ease 9.2s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(1) div:nth-child(3):after {
      animation: slide-bottom 1.8s ease 9.2s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(1) div:nth-child(4):after {
      animation: slide-bottom 0.9s ease 9.2s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(1) .char:after {
      animation: slide-top 1.8s ease-out 9.2s reverse forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(2) {
    animation: fadein 0.1s ease 10s forwards, gab-animation__fall-paint-2 0.2s ease 10s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(2) div:nth-child(1):after {
      animation: slide-bottom 2s ease 10.2s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(2) div:nth-child(2):after {
      animation: slide-bottom 1s ease 10.2s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(2) div:nth-child(3):after {
      animation: slide-bottom 1.8s ease 10.2s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(2) div:nth-child(4):after {
      animation: slide-bottom 0.9s ease 10.2s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(2) .char:after {
      animation: slide-top 1.8s ease-out 10.2s reverse forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(3) {
    animation: fadein 0.1s ease 8.5s forwards, gab-animation__fall-paint-1 0.2s ease 8.5s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(3) div:nth-child(1):after {
      animation: slide-bottom 2s ease 8.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(3) div:nth-child(2):after {
      animation: slide-bottom 1s ease 8.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(3) div:nth-child(3):after {
      animation: slide-bottom 1.8s ease 8.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(3) div:nth-child(4):after {
      animation: slide-bottom 0.9s ease 8.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(3) .char:after {
      animation: slide-top 1.8s ease-out 8.7s reverse forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(4) {
    animation: fadein 0.1s ease 10.5s forwards, gab-animation__fall-paint-2 0.2s ease 10.5s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(4) div:nth-child(1):after {
      animation: slide-bottom 2s ease 10.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(4) div:nth-child(2):after {
      animation: slide-bottom 1s ease 10.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(4) div:nth-child(3):after {
      animation: slide-bottom 1.8s ease 10.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(4) div:nth-child(4):after {
      animation: slide-bottom 0.9s ease 10.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(4) .char:after {
      animation: slide-top 1.8s ease-out 10.7s reverse forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(5) {
    animation: fadein 0.1s ease 9.5s forwards, gab-animation__fall-paint-1 0.2s ease 9.5s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(5) div:nth-child(1):after {
      animation: slide-bottom 2s ease 9.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(5) div:nth-child(2):after {
      animation: slide-bottom 1s ease 9.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(5) div:nth-child(3):after {
      animation: slide-bottom 1.8s ease 9.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(5) div:nth-child(4):after {
      animation: slide-bottom 0.9s ease 9.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(5) .char:after {
      animation: slide-top 1.8s ease-out 9.7s reverse forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .frame-top div:nth-child(1) {
    animation: slide-top 0.4s ease 12.5s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .frame-top div:nth-child(2) {
    animation: slide-top 0.4s ease 12.6s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .frame-top div:nth-child(3) {
    animation: slide-top 0.4s ease 12.7s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .frame-top div:nth-child(4) {
    animation: slide-top 0.4s ease 12.8s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .frame-top div:nth-child(5) {
    animation: slide-top 0.4s ease 12.9s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .frame-bottom div:nth-child(1) {
    animation: slide-bottom 0.4s ease 12.5s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .frame-bottom div:nth-child(2) {
    animation: slide-bottom 0.4s ease 12.6s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .frame-bottom div:nth-child(3) {
    animation: slide-bottom 0.4s ease 12.7s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .frame-bottom div:nth-child(4) {
    animation: slide-bottom 0.4s ease 12.8s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .frame-bottom div:nth-child(5) {
    animation: slide-bottom 0.4s ease 12.9s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .clock::before {
    animation: gab-animation__show-clock-frame 0.5s ease 13.3s forwards, rotate360 4s linear 13.8s infinite; }
  .gab-animation[data-state="start"] .gab-animation__palette .clock::after {
    animation: gab-animation__show-clock-frame 0.5s ease 13.4s forwards, rotate360 3s linear 13.9s infinite; }
  .gab-animation[data-state="start"] .gab-animation__palette .clock div {
    animation: gab-animation__show-clock-hand 0.3s ease 14s forwards, gab-animation__reverse-clock-hand 0.4s ease 14.3s forwards, gab-animation__rotate-clock-hand 0.3s ease-out 14.7s forwards, gab-animation__scale-clock-hand 0.4s ease 14.8s forwards; }
  .gab-animation[data-state="start"] .gab-animation__camera {
    animation: gab-animation__camera 2.8s ease-in-out 15.2s forwards, fadeout 0.1s ease 19s forwards; }
    .gab-animation[data-state="start"] .gab-animation__camera .layer-2:before {
      animation: slide-bottom 0.6s ease 16.2s forwards; }
    .gab-animation[data-state="start"] .gab-animation__camera .layer-3:before {
      animation: slide-top 0.6s ease 16.6s forwards; }
    .gab-animation[data-state="start"] .gab-animation__camera .layer-4:before {
      animation: gab-animation__show-layer 0.8s ease 17.1s forwards; }
  .gab-animation[data-state="start"] .gab-animation__close .effect-1 div:after {
    animation: gab-animation__effect 0.6s ease-out 18.3s reverse forwards, fadein 0.1s ease 18.3s forwards, fadeout 0.1s ease 18.8s forwards, gab-animation__effect 0.6s ease-out 19.7s forwards, fadein 0.1s ease 19.7s forwards, fadeout 0.1s ease 20.2s forwards; }
  .gab-animation[data-state="start"] .gab-animation__close .effect-2 div:after {
    animation: gab-animation__effect 0.6s ease-out 17.7s reverse forwards, fadein 0.1s ease 17.7s forwards, fadeout 0.1s ease 18.2s forwards, gab-animation__effect 0.6s ease-out 19.1s forwards, fadein 0.1s ease 19.1s forwards, fadeout 0.1s ease 19.6s forwards; }
  .gab-animation[data-state="start"] .gab-animation__close .effect-3 div:after {
    animation: gab-animation__effect 0.6s ease 18s reverse forwards, fadein 0.1s ease 18s forwards, fadeout 0.1s ease 18.5s forwards, gab-animation__effect 0.6s ease 19.4s forwards, fadein 0.1s ease 19.4s forwards, fadeout 0.1s ease 19.9s forwards; }
  .gab-animation[data-state="start"] .gab-animation__close .ball-1 {
    animation: gab-animation__scale-ball 0.5s ease 18.2s alternate 2 forwards; }
    .gab-animation[data-state="start"] .gab-animation__close .ball-1::after {
      animation: gab-animation__scale-ball 0.4s ease 18.3s alternate 2 forwards; }
  .gab-animation[data-state="start"] .gab-animation__close .ball-2 {
    animation: gab-animation__scale-ball 0.5s ease 18.8s alternate 2 forwards; }
    .gab-animation[data-state="start"] .gab-animation__close .ball-2::after {
      animation: gab-animation__scale-ball 0.4s ease 18.9s alternate 2 forwards; }
  .gab-animation[data-state="start"] .gab-animation__close .ball-3 {
    animation: gab-animation__scale-ball 0.5s ease 18.5s alternate 2 forwards; }
    .gab-animation[data-state="start"] .gab-animation__close .ball-3::after {
      animation: gab-animation__scale-ball 0.4s ease 18.6s alternate 2 forwards; }
  .gab-animation[data-state="start"] .gab-animation__close .end-block .paint-ball:nth-child(1) {
    animation: scale0-1 0.4s ease 20s forwards, gab-animation__move-end-block-1__sp 0.4s ease 20.4s forwards; }
  .gab-animation[data-state="start"] .gab-animation__close .end-block .paint-ball:nth-child(2) {
    animation: scale0-1 0.4s ease 20s forwards, gab-animation__move-end-block-2__sp 0.4s ease 20.4s forwards; }
  .gab-animation[data-state="start"] .gab-animation__close .end-block::before {
    animation: gab-animation__show-end-block__sp 0.4s ease 20.4s forwards, rotate360 0.6s ease-in-out 20.8s forwards; }
  .gab-animation[data-state="start"] .gab-animation__close .end-block::after {
    animation: scale0-1 0.6s ease-out 20.8s forwards, scale1dot5 0.3s ease 21.4s 2 alternate forwards, gab-animation__close__sp 0.5s ease 22s forwards; } }

@media screen and (max-width: 600px) {
  .history-page .history-box {
    margin-top: 50px; }
    .history-page .history-box section {
      width: 90%;
      margin: 20px auto;
      padding: 20px;
      box-sizing: border-box;
      border: dashed 1px #4A3F55;
      border-radius: 10px; }
      .history-page .history-box section .version {
        font-size: 14px;
        color: #817487;
        margin-bottom: 10px; }
      .history-page .history-box section .title {
        font-size: 15px;
        text-align: center;
        padding: 6px 0;
        color: #fff;
        margin-bottom: 8px;
        border-radius: 10px;
        background-color: #817487; }
      .history-page .history-box section img {
        display: block;
        width: 100%;
        border-radius: 10px; }
      .history-page .history-box section a {
        display: block;
        width: 180px;
        height: 35px;
        margin: 0 auto;
        border: dashed 2px #817487;
        border-radius: 10px;
        font-size: 14px;
        color: #4A3F55;
        display: block;
        text-align: center;
        line-height: 35px;
        margin-top: 20px;
        transition: all 0.35s ease 0s; }
      .history-page .history-box section a:hover {
        background-color: #4A3F55;
        color: #b9aeda; } }

@media screen and (max-width: 600px) {
  .load-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #C2617E;
    overflow: hidden;
    z-index: 1000; }
  /**
   * frame
   */
  .load-view__frame {
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px); }
  /*** squares ***/
  .load-view__frame__squares {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .load-view__frame__squares div {
      position: absolute;
      width: 20px;
      height: 20px;
      border: dashed 1px #fff;
      box-sizing: border-box;
      border-radius: 3px; }
    .load-view__frame__squares div:nth-child(1) {
      top: 0;
      left: 0; }
    .load-view__frame__squares div:nth-child(2) {
      top: 0;
      right: 0; }
    .load-view__frame__squares div:nth-child(3) {
      bottom: 0;
      left: 0; }
    .load-view__frame__squares div:nth-child(4) {
      bottom: 0;
      right: 0; }
  /*** lines ***/
  .load-view__frame__lines {
    position: absolute;
    top: 19px;
    left: 19px;
    width: calc(100% - 38px);
    height: calc(100% - 38px); }
    .load-view__frame__lines div {
      position: absolute;
      box-sizing: border-box; }
    .load-view__frame__lines div:nth-child(1),
    .load-view__frame__lines div:nth-child(3) {
      left: 0;
      width: 100%;
      height: 3px;
      border-top: dashed 1px #fff; }
    .load-view__frame__lines div:nth-child(2),
    .load-view__frame__lines div:nth-child(4) {
      top: 0;
      width: 1px;
      height: 100%;
      border-left: dashed 1px #fff; }
    .load-view__frame__lines div:nth-child(1) {
      top: 0; }
    .load-view__frame__lines div:nth-child(3) {
      bottom: 0; }
    .load-view__frame__lines div:nth-child(2) {
      left: 0; }
    .load-view__frame__lines div:nth-child(4) {
      right: 0; }
  /**
   * body
   */
  .load-view__body {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%; }
  /*** bg ***/
  .load-view__body__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .load-view__body__bg::before, .load-view__body__bg::after {
      content: "";
      display: block;
      position: absolute;
      width: calc(100% - 80px);
      height: calc(100% - 80px);
      border-radius: 3px;
      background-color: rgba(255, 255, 255, 0.2); }
    .load-view__body__bg::before {
      top: 35px;
      left: 35px; }
    .load-view__body__bg::after {
      bottom: 35px;
      right: 35px; }
  /*** panel ***/
  .load-view__body__panel {
    position: absolute;
    top: 0;
    left: calc(50% - 160px);
    width: 320px;
    height: 100%; }
  /*** panel__icon ***/
  .load-view__body__panel__icon {
    position: absolute;
    top: calc(50% - 20px);
    width: 40px;
    height: 40px;
    opacity: 0; }
    .load-view__body__panel__icon .box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
      .load-view__body__panel__icon .box::after {
        content: "";
        display: block;
        position: absolute;
        top: 2px;
        left: 2px;
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        box-sizing: border-box;
        border: solid 1px transparent; }
      .load-view__body__panel__icon .box .frame {
        position: absolute;
        width: 40%;
        height: 40%; }
        .load-view__body__panel__icon .box .frame::before, .load-view__body__panel__icon .box .frame::after {
          content: "";
          display: block;
          position: absolute; }
        .load-view__body__panel__icon .box .frame::before {
          width: 100%;
          height: 3px; }
        .load-view__body__panel__icon .box .frame::after {
          width: 3px;
          height: 100%; }
      .load-view__body__panel__icon .box .frame:nth-child(1) {
        top: 0;
        right: 0; }
        .load-view__body__panel__icon .box .frame:nth-child(1)::before, .load-view__body__panel__icon .box .frame:nth-child(1)::after {
          top: 0;
          right: 0; }
      .load-view__body__panel__icon .box .frame:nth-child(2) {
        bottom: 0;
        left: 0; }
        .load-view__body__panel__icon .box .frame:nth-child(2)::before, .load-view__body__panel__icon .box .frame:nth-child(2)::after {
          bottom: 0;
          left: 0; }
    .load-view__body__panel__icon .icon {
      position: absolute;
      top: 5px;
      left: 5px;
      width: calc(100% - 10px);
      height: calc(100% - 10px);
      background-size: 130%;
      background-position: center; }
  .load-view__body__panel__icon_type_1 {
    left: 32px; }
    .load-view__body__panel__icon_type_1 .box::after {
      border-color: #C2617E; }
    .load-view__body__panel__icon_type_1 .box .frame::before, .load-view__body__panel__icon_type_1 .box .frame::after {
      background-color: #C2617E; }
    .load-view__body__panel__icon_type_1 .icon {
      background-image: url(../images/load-view/wait/1.png); }
  .load-view__body__panel__icon_type_2 {
    left: 104px; }
    .load-view__body__panel__icon_type_2 .box::after {
      border-color: #817487; }
    .load-view__body__panel__icon_type_2 .box .frame::before, .load-view__body__panel__icon_type_2 .box .frame::after {
      background-color: #817487; }
    .load-view__body__panel__icon_type_2 .icon {
      background-image: url(../images/load-view/wait/2.png); }
  .load-view__body__panel__icon_type_3 {
    right: 104px; }
    .load-view__body__panel__icon_type_3 .box::after {
      border-color: #E5B8BD; }
    .load-view__body__panel__icon_type_3 .box .frame::before, .load-view__body__panel__icon_type_3 .box .frame::after {
      background-color: #E5B8BD; }
    .load-view__body__panel__icon_type_3 .icon {
      background-image: url(../images/load-view/wait/3.png); }
  .load-view__body__panel__icon_type_4 {
    right: 32px; }
    .load-view__body__panel__icon_type_4 .box::after {
      border-color: #4A3F55; }
    .load-view__body__panel__icon_type_4 .box .frame::before, .load-view__body__panel__icon_type_4 .box .frame::after {
      background-color: #4A3F55; }
    .load-view__body__panel__icon_type_4 .icon {
      background-image: url(../images/load-view/wait/4.png); }
  /*** poster ***/
  .load-view__body__poster {
    position: absolute;
    top: 0;
    left: calc(50% - 160px);
    width: 320px;
    height: 100%; }
    .load-view__body__poster .paint-ball-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden; }
    .load-view__body__poster .paint-ball {
      position: absolute;
      top: calc(50% - 15px);
      left: -30px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #fff; }
      .load-view__body__poster .paint-ball div {
        position: absolute;
        top: 5px;
        left: 5px;
        width: calc(100% - 10px);
        height: calc(100% - 10px);
        border-radius: 50%;
        border: dashed 1px #C2617E;
        box-sizing: border-box; }
      .load-view__body__poster .paint-ball::before, .load-view__body__poster .paint-ball::after {
        position: absolute;
        content: "";
        display: block;
        width: calc(100% - 40px);
        height: 2px;
        top: calc(50% - 1px);
        left: 20px;
        background-color: #C2617E; }
      .load-view__body__poster .paint-ball::before {
        transform: rotate(45deg); }
      .load-view__body__poster .paint-ball::after {
        transform: rotate(-45deg); }
    .load-view__body__poster .poster {
      position: relative;
      float: left;
      width: 80px;
      height: 100%;
      transform: translateY(calc(-100% + -100px));
      perspective: 500px; }
      .load-view__body__poster .poster .illust {
        position: absolute;
        top: calc(50% - 85.5px);
        left: 0;
        width: 80px;
        height: 171px;
        transform-origin: center bottom;
        opacity: 0; }
        .load-view__body__poster .poster .illust::after {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-size: 100% auto;
          background-repeat: no-repeat;
          background-position: center;
          transform-origin: center bottom; }
      .load-view__body__poster .poster .ball {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: translateY(calc(-50% + -25px)); }
        .load-view__body__poster .poster .ball::after {
          content: "";
          display: block;
          position: absolute;
          top: calc(50% - 25px);
          left: calc(50% - 25px);
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background-color: #fff; }
      .load-view__body__poster .poster::after {
        content: "";
        display: block;
        position: absolute;
        left: -40px;
        bottom: -100px;
        width: 0;
        height: 0;
        border-top: solid 100px transparent;
        border-right: solid 80px transparent;
        border-left: solid 80px transparent; }
    .load-view__body__poster .poster:nth-child(1) {
      background-color: #C2617E; }
      .load-view__body__poster .poster:nth-child(1)::after {
        border-top-color: #C2617E; }
      .load-view__body__poster .poster:nth-child(1) .illust:after {
        background-image: url(../images/load-view/poster/1.png); }
    .load-view__body__poster .poster:nth-child(2) {
      background-color: #817487; }
      .load-view__body__poster .poster:nth-child(2)::after {
        border-top-color: #817487; }
      .load-view__body__poster .poster:nth-child(2) .illust:after {
        background-image: url(../images/load-view/poster/2.png); }
    .load-view__body__poster .poster:nth-child(3) {
      background-color: #E5B8BD; }
      .load-view__body__poster .poster:nth-child(3)::after {
        border-top-color: #E5B8BD; }
      .load-view__body__poster .poster:nth-child(3) .illust:after {
        background-image: url(../images/load-view/poster/3.png); }
    .load-view__body__poster .poster:nth-child(4) {
      background-color: #4A3F55; }
      .load-view__body__poster .poster:nth-child(4)::after {
        border-top-color: #4A3F55; }
      .load-view__body__poster .poster:nth-child(4) .illust:after {
        background-image: url(../images/load-view/poster/4.png); }
    .load-view__body__poster .illust {
      position: absolute;
      top: calc(50% - 650px);
      left: 0;
      width: 225px;
      height: 650px;
      background-size: 100% auto;
      background-repeat: no-repeat;
      background-position: center; }
    .load-view__body__poster::after {
      content: "";
      display: block;
      clear: both; }
  .load-view__body__info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .load-view__body__info .allow {
      position: relative;
      width: 100%;
      height: 25%;
      transform: translateX(-100%); }
      .load-view__body__info .allow .sd {
        position: absolute;
        top: calc(50% - 30px);
        height: 60px;
        display: block;
        opacity: 0;
        transform-origin: center bottom; }
      .load-view__body__info .allow .sd-1 {
        left: 5%; }
      .load-view__body__info .allow .sd-2 {
        right: 5%; }
      .load-view__body__info .allow .text {
        position: absolute;
        top: calc(50% - 30px);
        height: 60px;
        display: block;
        opacity: 0; }
      .load-view__body__info .allow .text-1 {
        right: 5%; }
      .load-view__body__info .allow .text-2 {
        left: 5%; }
      .load-view__body__info .allow .line {
        position: absolute;
        top: 20px;
        left: 0;
        width: 100%;
        height: calc(100% - 40px);
        overflow: hidden; }
        .load-view__body__info .allow .line::after {
          content: "";
          display: block;
          position: absolute;
          bottom: 0;
          left: 0;
          transform: translate(calc(100% - 15px), calc(100% - 5px));
          width: calc(100% + 30px);
          height: 100%;
          background-color: #fff; }
      .load-view__body__info .allow .paint-ball {
        position: absolute;
        bottom: 20px;
        left: -30px;
        width: 30px;
        height: 30px;
        background-color: #fff;
        border-radius: 50%; }
        .load-view__body__info .allow .paint-ball div {
          position: absolute;
          top: 5px;
          left: 5px;
          width: calc(100% - 10px);
          height: calc(100% - 10px);
          border-radius: 50%;
          border: dashed 1px #C2617E;
          box-sizing: border-box; }
        .load-view__body__info .allow .paint-ball::before, .load-view__body__info .allow .paint-ball::after {
          content: "";
          display: block;
          position: absolute;
          left: 10px;
          top: calc(50% - 1px);
          width: calc(100% - 20px);
          height: 2px;
          background-color: #C2617E; }
        .load-view__body__info .allow .paint-ball::before {
          transform: rotate(45deg); }
        .load-view__body__info .allow .paint-ball::after {
          transform: rotate(-45deg); }
    .load-view__body__info .allow:nth-child(1) {
      background-color: #C2617E; }
    .load-view__body__info .allow:nth-child(2) {
      background-color: #817487; }
    .load-view__body__info .allow:nth-child(3) {
      background-color: #E5B8BD; }
    .load-view__body__info .allow:nth-child(4) {
      background-color: #4A3F55; }
  .load-view__body__close {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .load-view__body__close .curtain {
      width: 100%;
      height: 50%;
      background-color: #fff;
      overflow: hidden; }
      .load-view__body__close .curtain::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-color: #C2617E; }
    .load-view__body__close .curtain:nth-child(1) {
      transform: translateY(-100%); }
    .load-view__body__close .curtain:nth-child(2) {
      transform: translateY(100%); }
    .load-view__body__close .message {
      position: absolute;
      top: calc(50% - 20px);
      left: 0;
      width: 100%;
      height: 40px;
      font-size: 14px;
      color: #fff;
      text-align: right;
      line-height: 40px;
      box-sizing: border-box;
      padding: 0 20px;
      opacity: 0; }
    .load-view__body__close::before, .load-view__body__close::after {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      width: 100%;
      height: 50%;
      background-color: #E5B8BD;
      z-index: 1; }
    .load-view__body__close::before {
      top: 0;
      transform: translateY(-100%); }
    .load-view__body__close::after {
      bottom: 0;
      transform: translateY(100%); }
  /********************************************************************************************
   * animation
   ********************************************************************************************/
  /*** panel ***/
  .load-view__body__panel__icon .box {
    animation: rotate360 3s linear 0s infinite; }
  .load-view__body__panel__icon_type_1 {
    animation: fadein 0.8s ease 0s forwards, load-view__show-wait-icon__sp 0.8s ease 0s forwards; }
    .load-view__body__panel__icon_type_1 .icon {
      animation: load-view__scale-wait-icon__sp 1s ease 0s forwards; }
  .load-view__body__panel__icon_type_2 {
    animation: fadein 0.8s ease 0.3s forwards, load-view__show-wait-icon__sp 0.8s ease 0.3s forwards; }
    .load-view__body__panel__icon_type_2 .icon {
      animation: load-view__scale-wait-icon__sp 1s ease 0.3s forwards; }
  .load-view__body__panel__icon_type_3 {
    animation: fadein 0.8s ease 0.6s forwards, load-view__show-wait-icon__sp 0.8s ease 0.6s forwards; }
    .load-view__body__panel__icon_type_3 .icon {
      animation: load-view__scale-wait-icon__sp 1s ease 0.6s forwards; }
  .load-view__body__panel__icon_type_4 {
    animation: fadein 0.8s ease 0.9s forwards, load-view__show-wait-icon__sp 0.8s ease 0.9s forwards; }
    .load-view__body__panel__icon_type_4 .icon {
      animation: load-view__scale-wait-icon__sp 1s ease 0.9s forwards; }
  .load-view[data-state="start"] {
    /*** close ***/
    /*** info ***/
    /*** poster ***/ }
    .load-view[data-state="start"] .load-view__body__close .curtain:nth-child(1) {
      animation: load-view__show-curtain-1__sp 0.5s ease 6s forwards; }
      .load-view[data-state="start"] .load-view__body__close .curtain:nth-child(1)::after {
        animation: load-view__show-curtain-inner-1__sp 1.5s ease 6.2s forwards; }
    .load-view[data-state="start"] .load-view__body__close .curtain:nth-child(2) {
      animation: load-view__show-curtain-2__sp 0.5s ease 6s forwards; }
      .load-view[data-state="start"] .load-view__body__close .curtain:nth-child(2)::after {
        animation: load-view__show-curtain-inner-2__sp 1.5s ease 6.2s forwards; }
    .load-view[data-state="start"] .load-view__body__close .message {
      animation: load-view__show-message__sp 5s ease-out 6.7s forwards; }
    .load-view[data-state="start"] .load-view__body__close::before {
      animation: load-view__close-1 0.6s ease 7.2s forwards; }
    .load-view[data-state="start"] .load-view__body__close::after {
      animation: load-view__close-2 0.6s ease 7.2s forwards; }
    .load-view[data-state="start"] .load-view__body__info .allow:nth-child(1) {
      animation: slide-right 0.4s ease 3.5s forwards; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(1) .sd {
        animation: fadein 0.1s ease 5.1s forwards, load-view__sway-sd__sp 0.8s ease-in-out 5.1s alternate infinite; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(1) .text {
        animation: fadein 0.1s ease 5.1s forwards, load-view__sway-illust__sp 0.8s ease-in-out 5.1s alternate infinite; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(1) .line::after {
        animation: load-view__show-line-1__sp 0.7s ease 4s forwards, load-view__hidden-line-1__sp 0.8s ease 4.7s forwards; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(1) .paint-ball {
        animation: load-view__move-paint-ball-2__sp 0.7s ease 4s forwards; }
    .load-view[data-state="start"] .load-view__body__info .allow:nth-child(2) {
      animation: slide-right 0.4s ease 3.6s forwards; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(2) .text {
        animation: fadein 0.1s ease 5.2s forwards, load-view__sway-illust__sp 0.8s ease-in-out 5.2s alternate infinite; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(2) .sd {
        animation: fadein 0.1s ease 5.2s forwards, load-view__sway-sd__sp 0.8s ease-in-out 5.2s alternate infinite; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(2) .line::after {
        animation: load-view__show-line-2__sp 0.7s ease 4.1s forwards, load-view__hidden-line-2__sp 0.8s ease 4.8s forwards; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(2) .paint-ball {
        animation: load-view__move-paint-ball-1__sp 0.7s ease 4.1s forwards; }
    .load-view[data-state="start"] .load-view__body__info .allow:nth-child(3) {
      animation: slide-right 0.4s ease 3.7s forwards; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(3) .text {
        animation: fadein 0.1s ease 5.3s forwards, load-view__sway-illust__sp 0.8s ease-in-out 5.3s alternate infinite; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(3) .sd {
        animation: fadein 0.1s ease 5.3s forwards, load-view__sway-sd__sp 0.8s ease-in-out 5.3s alternate infinite; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(3) .line::after {
        animation: load-view__show-line-1__sp 0.7s ease 4.2s forwards, load-view__hidden-line-1__sp 0.8s ease 4.9s forwards; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(3) .paint-ball {
        animation: load-view__move-paint-ball-2__sp 0.7s ease 4.2s forwards; }
    .load-view[data-state="start"] .load-view__body__info .allow:nth-child(4) {
      animation: slide-right 0.4s ease 3.8s forwards; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(4) .text {
        animation: fadein 0.1s ease 5.4s forwards, load-view__sway-illust__sp 0.8s ease-in-out 5.4s alternate infinite; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(4) .sd {
        animation: fadein 0.1s ease 5.4s forwards, load-view__sway-sd__sp 0.8s ease-in-out 5.4s alternate infinite; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(4) .line::after {
        animation: load-view__show-line-2__sp 0.7s ease 4.3s forwards, load-view__hidden-line-2__sp 0.8s ease 5s forwards; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(4) .paint-ball {
        animation: load-view__move-paint-ball-1__sp 0.7s ease 4.3s forwards; }
    .load-view[data-state="start"] .load-view__body__poster .paint-ball {
      animation: load-view__move-paint-ball__sp 1s ease 2.6s forwards; }
    .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(1) {
      animation: load-view__show-poster__sp 0.5s ease 0s forwards; }
      .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(1) .ball {
        animation: load-view__fall-ball__sp 0.6s ease 0.6s forwards; }
        .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(1) .ball::after {
          animation: load-view__scale-ball__sp 0.7s ease 1.2s forwards; }
      .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(1) .illust {
        animation: fadein 0.1s ease 1.45s forwards, load-view__rotate-illust__sp 0.7s ease 2.6s forwards, fadeout 0.35s ease 2.95s forwards; }
        .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(1) .illust::after {
          animation: load-view__sway-illust__sp 0.8s ease-in-out 1.2s alternate infinite; }
    .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(2) {
      animation: load-view__show-poster__sp 0.5s ease 0.2s forwards; }
      .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(2) .ball {
        animation: load-view__fall-ball__sp 0.6s ease 0.8s forwards; }
        .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(2) .ball::after {
          animation: load-view__scale-ball__sp 0.7s ease 1.4s forwards; }
      .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(2) .illust {
        animation: fadein 0.1s ease 1.65s forwards, load-view__rotate-illust__sp 0.7s ease 2.8s forwards, fadeout 0.35s ease 3.15s forwards; }
        .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(2) .illust::after {
          animation: load-view__sway-illust__sp 0.8s ease-in-out 1.2s alternate infinite; }
    .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(3) {
      animation: load-view__show-poster__sp 0.5s ease 0.4s forwards; }
      .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(3) .ball {
        animation: load-view__fall-ball__sp 0.6s ease 1s forwards; }
        .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(3) .ball::after {
          animation: load-view__scale-ball__sp 0.7s ease 1.6s forwards; }
      .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(3) .illust {
        animation: fadein 0.1s ease 1.85s forwards, load-view__rotate-illust__sp 0.7s ease 3s forwards, fadeout 0.35s ease 3.35s forwards; }
        .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(3) .illust::after {
          animation: load-view__sway-illust__sp 0.8s ease-in-out 1.2s alternate infinite; }
    .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(4) {
      animation: load-view__show-poster__sp 0.5s ease 0.6s forwards; }
      .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(4) .ball {
        animation: load-view__fall-ball__sp 0.6s ease 1.2s forwards; }
        .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(4) .ball::after {
          animation: load-view__scale-ball__sp 0.7s ease 1.8s forwards; }
      .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(4) .illust {
        animation: fadein 0.1s ease 2.1s forwards, load-view__rotate-illust__sp 0.7s ease 3.2s forwards, fadeout 0.35s ease 3.55s forwards; }
        .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(4) .illust::after {
          animation: load-view__sway-illust__sp 0.8s ease-in-out 1.2s alternate infinite; } }

@media screen and (max-width: 600px) {
  .memories-box {
    margin-top: 50px;
    padding-bottom: 50px; }
    .memories-box a {
      position: relative;
      display: block;
      width: 90%;
      margin: 0 auto;
      margin-bottom: 20px;
      background-color: #817487;
      overflow: hidden;
      padding: 5px;
      box-sizing: border-box;
      transition: all 0.35s ease 0s; }
      .memories-box a img {
        width: 100%;
        display: block; }
      .memories-box a .title {
        font-size: 15px;
        color: #b9aeda;
        padding: 10px 5px;
        box-sizing: border-box;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis; }
      .memories-box a .date {
        font-size: 12px;
        color: #ccc;
        text-align: right;
        display: block;
        padding: 5px;
        box-sizing: border-box; }
    .memories-box a:hover {
      background-color: #C2617E; } }

@media screen and (max-width: 600px) {
  .page-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #C2617E;
    transform-origin: right top;
    transform: rotate(90deg);
    overflow: hidden;
    z-index: 1002; }
  /*** bg ***/
  .page-box__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .page-box__bg div {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform-origin: right top;
      transform: rotate(90deg); }
    .page-box__bg div:nth-child(1) {
      background-color: #E5B8BD; }
    .page-box__bg div:nth-child(2) {
      background-color: #b9aeda; }
      .page-box__bg div:nth-child(2)::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-size: 15px;
        background-image: url(../images/bg.png);
        opacity: 0.4; }
  /*** content ***/
  .page-box__content {
    position: absolute;
    top: 8px;
    left: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    border: solid 5px #C2617E;
    box-sizing: border-box;
    background-color: #b9aeda;
    border-radius: 15px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6) inset;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    transition: all 0.35s ease 0s; }
    .page-box__content .page-title {
      position: relative;
      margin: 50px auto;
      width: 280px;
      height: 40px; }
      .page-box__content .page-title div {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%; }
      .page-box__content .page-title div:nth-child(1) {
        width: 100%;
        background-color: #E4D6CE; }
      .page-box__content .page-title div:nth-child(2) {
        width: calc(100% - 10px);
        background-color: #817487; }
      .page-box__content .page-title div:nth-child(3) {
        width: calc(100% - 20px);
        background-color: #E5B8BD; }
      .page-box__content .page-title div:nth-child(4) {
        width: calc(100% - 30px);
        background-color: #C2617E; }
      .page-box__content .page-title h2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 40px;
        font-size: 20px;
        color: #fff;
        text-align: center;
        line-height: 40px; }
  /*** close-btn ***/
  .page-box__close-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 50px;
    height: 50px;
    display: block;
    transform: translate(calc(100% + 20px), calc(-100% + -20px));
    z-index: 5; }
    .page-box__close-btn section {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
      border-radius: 3px;
      transition: all 0.35s ease 0s; }
    .page-box__close-btn section:nth-child(1) {
      background-color: #C2617E;
      transform: rotate(0deg); }
    .page-box__close-btn section:nth-child(2) {
      background-color: #b9aeda; }
      .page-box__close-btn section:nth-child(2)::before, .page-box__close-btn section:nth-child(2)::after {
        content: "";
        display: block;
        position: absolute;
        top: 24px;
        left: 10px;
        width: 30px;
        height: 1px;
        background-color: #4A3F55;
        box-sizing: border-box;
        opacity: 0.7; }
      .page-box__close-btn section:nth-child(2)::before {
        transform: rotate(45deg); }
      .page-box__close-btn section:nth-child(2)::after {
        transform: rotate(-45deg); }
  .page-box__close-btn:hover section:nth-child(1) {
    background-color: #4A3F55; }
  .page-box__close-btn:hover section:nth-child(2) {
    background-color: #eee; }
  .page-box__close-btn:hover ~ .page-box__content {
    border-color: #4A3F55; }
  .page-box[data-state="true"] {
    animation: page-box__show 0.35s ease 0s forwards;
    /*** bg ***/
    /*** content ***/
    /*** close-btn ***/ }
    .page-box[data-state="true"] .page-box__bg div:nth-child(1) {
      animation: page-box__show 0.35s ease 0.1s forwards; }
    .page-box[data-state="true"] .page-box__bg div:nth-child(2) {
      animation: page-box__show 0.35s ease 0.2s forwards; }
    .page-box[data-state="true"] .page-box__content {
      animation: page-box__show-content 0.6s ease 0.55s forwards; }
    .page-box[data-state="true"] .page-box__close-btn {
      animation: page-box__show-close-btn 0.6s ease 0.9s forwards; }
      .page-box[data-state="true"] .page-box__close-btn section:nth-child(1) {
        animation: page-box__rotate-close-btn 0.6s ease 0.9s forwards; }
  .page-box[data-state="false"] {
    transform: rotate(0deg);
    animation: page-box__hidden 0.35s ease-in-out 0.2s forwards;
    /*** bg ***/
    /*** content ***/ }
    .page-box[data-state="false"] .page-box__bg div {
      transform: rotate(0deg); }
    .page-box[data-state="false"] .page-box__bg div:nth-child(1) {
      animation: page-box__hidden 0.35s ease-in-out 0.1s forwards; }
    .page-box[data-state="false"] .page-box__bg div:nth-child(2) {
      animation: page-box__hidden 0.35s ease-in-out 0s forwards; }
    .page-box[data-state="false"] .page-box__content,
    .page-box[data-state="false"] .page-box__close-btn {
      animation: fadeout 0.2s ease 0s forwards; } }

@media screen and (max-width: 600px) {
  .product-box {
    margin-top: 50px; }
    .product-box .sub-title {
      position: relative;
      width: 100%;
      height: 40px;
      font-size: 20px;
      color: #817487;
      line-height: 40px;
      text-align: center;
      margin: 0 auto;
      margin-bottom: 20px; }
      .product-box .sub-title:before, .product-box .sub-title::after {
        position: absolute;
        content: "";
        display: block;
        width: 70%;
        height: 1px;
        background-color: #817487;
        opacity: 0.6; }
      .product-box .sub-title::before {
        top: 0;
        left: 0; }
      .product-box .sub-title::after {
        bottom: 0;
        right: 0; }
    .product-box section {
      margin-bottom: 50px; }
      .product-box section a {
        position: relative;
        display: block;
        width: 90%;
        background-color: #fff;
        box-shadow: 0 0 5px #999;
        margin: 0 auto;
        margin-bottom: 20px;
        overflow: hidden;
        padding: 5px;
        box-sizing: border-box;
        transition: all 0.35s ease 0s; }
        .product-box section a .name {
          font-size: 18px;
          color: #4A3F55;
          padding: 5px;
          box-sizing: border-box; }
        .product-box section a .description {
          font-size: 13px;
          padding: 15px 10px;
          box-sizing: border-box;
          color: #817487; }
        .product-box section a .date {
          display: block;
          font-size: 11px;
          text-align: right;
          padding: 5px;
          box-sizing: border-box;
          color: #817487; }
        .product-box section a img {
          width: 100%; }
      .product-box section a:hover {
        opacity: 0.6; }
      .product-box section::after {
        content: "";
        display: block;
        clear: both; } }

@media screen and (max-width: 600px) {
  /*** body ***/
  .profile-page__body .icon {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border: solid 5px #4A3F55;
    background-color: #4A3F55;
    border-radius: 50%;
    box-sizing: border-box; }
    .profile-page__body .icon:after {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-image: url(../images/calling/icons/gab.png);
      background-size: cover;
      background-position: center; }
    .profile-page__body .icon div {
      position: absolute;
      background-color: #4A3F55; }
    .profile-page__body .icon div:nth-child(1) {
      width: 25px;
      height: 100px;
      left: 0;
      bottom: -5px;
      border-radius: 20px; }
    .profile-page__body .icon div:nth-child(2) {
      width: 10px;
      height: 80px;
      left: 40px;
      bottom: -10px;
      border-radius: 4px; }
    .profile-page__body .icon div:nth-child(3) {
      width: 18px;
      height: 80px;
      left: calc(50% - 6px);
      bottom: -50px;
      border-radius: 10px; }
    .profile-page__body .icon div:nth-child(4) {
      width: 12px;
      height: 80px;
      right: 0px;
      bottom: -3px;
      border-radius: 8px; }
  .profile-page__body .name {
    margin: 0 auto;
    margin-top: 60px;
    width: 150px;
    height: 40px;
    border-left: solid 15px #4A3F55;
    background-color: #fff;
    padding: 0 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    font-size: 25px;
    color: #555;
    font-weight: bold;
    text-align: center;
    line-height: 40px;
    transform: rotate(-5deg); }
  .profile-page__body .info {
    margin: 0 auto;
    margin-top: 40px;
    padding-bottom: 40px; }
    .profile-page__body .info .info-li {
      position: relative;
      width: 80%;
      padding: 0 10px;
      margin: 0 auto;
      margin-bottom: 15px;
      border-bottom: solid 1px #E5B8BD; }
      .profile-page__body .info .info-li span {
        font-size: 10px;
        color: #817487;
        margin-right: 5px; }
      .profile-page__body .info .info-li::after {
        position: absolute;
        left: -15px;
        bottom: -5px;
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        background-color: #E5B8BD;
        border-radius: 50%; } }

@media screen and (max-width: 600px) {
  .top-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #b9aeda;
    overflow: hidden;
    z-index: 995; }
    .top-page::after {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background-image: url(../images/bg.png);
      background-size: 15px;
      opacity: 0.5; }
    .top-page::before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #dcd0e9;
      opacity: 0.4;
      transition: all 0.3s ease 0s; }
  .top-page[data-color="pink"]:before {
    background-color: #eab6ab; }
  .top-page[data-color="light-pink"]:before {
    background-color: #E5B8BD; }
  .top-page[data-color="purple"]:before {
    background-color: #9b98d4; }
  .top-page[data-color="light-purple"]:before {
    background-color: #817487; }
  /*** ring ***/
  .top-page__ring {
    position: absolute;
    top: calc(50% - 325px);
    left: calc(50% - 325px);
    width: 650px;
    height: 650px;
    border-radius: 50%;
    opacity: 0.6;
    z-index: 1; }
    .top-page__ring .wrap {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
      .top-page__ring .wrap .inner {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
        .top-page__ring .wrap .inner div {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%; }
          .top-page__ring .wrap .inner div::after {
            position: absolute;
            top: 0px;
            left: calc(50% - 50px);
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-top: solid 120px transparent;
            border-left: solid 45px transparent;
            border-right: solid 45px transparent;
            opacity: 0; }
        .top-page__ring .wrap .inner div:nth-child(1n):after {
          border-top-color: #C2617E; }
        .top-page__ring .wrap .inner div:nth-child(2n):after {
          border-top-color: #E5B8BD; }
        .top-page__ring .wrap .inner div:nth-child(3n):after {
          border-top-color: #4A3F55; }
        .top-page__ring .wrap .inner div:nth-child(4n):after {
          border-top-color: #817487; }
        .top-page__ring .wrap .inner div:nth-child(5n):after {
          border-top-color: #E4D6CE; }
        .top-page__ring .wrap .inner div:nth-child(1) {
          transform: rotate(0deg); }
        .top-page__ring .wrap .inner div:nth-child(2) {
          transform: rotate(10deg); }
        .top-page__ring .wrap .inner div:nth-child(3) {
          transform: rotate(30deg); }
        .top-page__ring .wrap .inner div:nth-child(4) {
          transform: rotate(40deg); }
        .top-page__ring .wrap .inner div:nth-child(5) {
          transform: rotate(60deg); }
        .top-page__ring .wrap .inner div:nth-child(6) {
          transform: rotate(70deg); }
        .top-page__ring .wrap .inner div:nth-child(7) {
          transform: rotate(90deg); }
        .top-page__ring .wrap .inner div:nth-child(8) {
          transform: rotate(100deg); }
        .top-page__ring .wrap .inner div:nth-child(9) {
          transform: rotate(120deg); }
        .top-page__ring .wrap .inner div:nth-child(10) {
          transform: rotate(130deg); }
        .top-page__ring .wrap .inner div:nth-child(11) {
          transform: rotate(150deg); }
        .top-page__ring .wrap .inner div:nth-child(12) {
          transform: rotate(160deg); }
        .top-page__ring .wrap .inner div:nth-child(13) {
          transform: rotate(180deg); }
        .top-page__ring .wrap .inner div:nth-child(14) {
          transform: rotate(190deg); }
        .top-page__ring .wrap .inner div:nth-child(15) {
          transform: rotate(210deg); }
        .top-page__ring .wrap .inner div:nth-child(16) {
          transform: rotate(220deg); }
        .top-page__ring .wrap .inner div:nth-child(17) {
          transform: rotate(240deg); }
        .top-page__ring .wrap .inner div:nth-child(18) {
          transform: rotate(250deg); }
        .top-page__ring .wrap .inner div:nth-child(19) {
          transform: rotate(270deg); }
        .top-page__ring .wrap .inner div:nth-child(20) {
          transform: rotate(280deg); }
        .top-page__ring .wrap .inner div:nth-child(21) {
          transform: rotate(300deg); }
        .top-page__ring .wrap .inner div:nth-child(22) {
          transform: rotate(310deg); }
        .top-page__ring .wrap .inner div:nth-child(23) {
          transform: rotate(330deg); }
        .top-page__ring .wrap .inner div:nth-child(24) {
          transform: rotate(340deg); }
  /*** main-illust ***/
  .top-page__main-illust {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(./kokomi.png);
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 1; }
  /*** frame ***/
  .top-page__frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; }
    .top-page__frame section {
      position: absolute;
      width: 45px;
      height: 45px; }
      .top-page__frame section div {
        position: absolute;
        background-color: #4A3F55;
        border-radius: 3px;
        opacity: 0.8;
        transform: scale(0); }
      .top-page__frame section div:nth-child(1),
      .top-page__frame section div:nth-child(3) {
        width: 12px;
        height: 12px; }
      .top-page__frame section div:nth-child(2) {
        width: 25px;
        height: 25px; }
    .top-page__frame section:nth-child(1) {
      top: 10px;
      left: 10px; }
      .top-page__frame section:nth-child(1) div:nth-child(1) {
        top: 0;
        right: 0; }
      .top-page__frame section:nth-child(1) div:nth-child(2) {
        top: 0;
        left: 0; }
      .top-page__frame section:nth-child(1) div:nth-child(3) {
        bottom: 0;
        left: 0; }
    .top-page__frame section:nth-child(2) {
      top: 10px;
      right: 10px; }
      .top-page__frame section:nth-child(2) div:nth-child(1) {
        top: 0;
        left: 0; }
      .top-page__frame section:nth-child(2) div:nth-child(2) {
        top: 0;
        right: 0; }
      .top-page__frame section:nth-child(2) div:nth-child(3) {
        bottom: 0;
        right: 0; }
    .top-page__frame section:nth-child(3) {
      bottom: 10px;
      left: 10px; }
      .top-page__frame section:nth-child(3) div:nth-child(1) {
        top: 0;
        left: 0; }
      .top-page__frame section:nth-child(3) div:nth-child(2) {
        bottom: 0;
        left: 0; }
      .top-page__frame section:nth-child(3) div:nth-child(3) {
        bottom: 0;
        right: 0; }
    .top-page__frame section:nth-child(4) {
      bottom: 10px;
      right: 10px; }
      .top-page__frame section:nth-child(4) div:nth-child(1) {
        top: 0;
        right: 0; }
      .top-page__frame section:nth-child(4) div:nth-child(2) {
        bottom: 0;
        right: 0; }
      .top-page__frame section:nth-child(4) div:nth-child(3) {
        bottom: 0;
        left: 0; }
  /*** globa-nav ***/
  .top-page__global-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; }
    .top-page__global-nav .nav-box {
      position: absolute;
      top: calc(50% - 20px);
      left: calc(50% - 50px);
      width: 100px;
      height: 40px;
      opacity: 0; }
      .top-page__global-nav .nav-box section {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
        .top-page__global-nav .nav-box section a {
          display: block;
          position: absolute;
          top: 0;
          width: 100px;
          height: 40px;
          border-radius: 20px;
          font-size: 11px;
          font-weight: bold;
          color: transparent;
          text-align: center;
          line-height: 40px;
          overflow: hidden;
          transition: all 0.3s ease 0s; }
          .top-page__global-nav .nav-box section a::before, .top-page__global-nav .nav-box section a::after {
            content: "";
            display: block;
            position: absolute;
            width: 60%;
            height: 1px;
            background-color: #fff;
            opacity: 0.6;
            transition: all 0.5s ease 0s; }
          .top-page__global-nav .nav-box section a::before {
            top: 5px;
            left: 5px;
            transform: translateX(calc(-100% + -5px)); }
          .top-page__global-nav .nav-box section a::after {
            bottom: 5px;
            right: 5px;
            transform: translateX(calc(100% + 5px)); }
        .top-page__global-nav .nav-box section a:hover {
          transform: scale(1.2);
          border-radius: 0; }
          .top-page__global-nav .nav-box section a:hover::before, .top-page__global-nav .nav-box section a:hover::after {
            transform: translateX(0); }
        .top-page__global-nav .nav-box section a:nth-child(1) {
          left: 0; }
        .top-page__global-nav .nav-box section a:nth-child(2) {
          right: 0; }
      .top-page__global-nav .nav-box section:nth-child(1) a:nth-child(1) {
        background-color: #C2617E; }
      .top-page__global-nav .nav-box section:nth-child(1) a:nth-child(2) {
        background-color: #E5B8BD; }
      .top-page__global-nav .nav-box section:nth-child(2) a:nth-child(1) {
        background-color: #817487; }
      .top-page__global-nav .nav-box section:nth-child(2) a:nth-child(2) {
        background-color: #4A3F55; }
    .top-page__global-nav .message {
      position: absolute;
      left: calc(50% - 90px);
      top: calc(50% - 25px);
      width: 0px;
      height: 40px;
      border-radius: 30px;
      background-color: #4A3F55;
      box-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
      overflow: hidden; }
      .top-page__global-nav .message h3 {
        width: 180px;
        height: 40px;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.8);
        text-align: center;
        line-height: 40px;
        transform: translateY(100%); }
  /*** logo ***/
  .top-page__logo {
    position: absolute;
    top: calc(50% - 30px);
    left: 0;
    width: 100%;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 0;
    z-index: 1; }
    .top-page__logo img {
      position: absolute;
      left: calc(50% - 90px);
      top: 0;
      display: block;
      background-color: rgba(255, 255, 255, 0);
      height: 60px; }
  /*** sns ***/
  .top-page__sns {
    position: absolute;
    bottom: 0;
    left: calc(50% - 125px);
    width: 250px;
    height: 50px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    overflow: hidden;
    transform: translateY(calc(100% + 5px));
    z-index: 1; }
    .top-page__sns a {
      float: left;
      position: relative;
      display: block;
      width: 50px;
      height: 50px;
      overflow: hidden; }
      .top-page__sns a::before {
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        transform: translateY(100%);
        transition: all 0.25s ease 0s; }
      .top-page__sns a i {
        position: absolute;
        top: 0;
        left: 0;
        width: 50px;
        height: 50px;
        font-size: 25px;
        line-height: 50px;
        text-align: center;
        color: #817487; }
    .top-page__sns a:hover:before {
      transform: translateX(0); }
    .top-page__sns a:nth-child(1)::before {
      background-color: #A8CBC6; }
    .top-page__sns a:nth-child(2)::before {
      background-color: #E4D6CE; }
    .top-page__sns a:nth-child(3) i {
      font-size: 22px; }
    .top-page__sns a:nth-child(3)::before {
      background-color: #F5E0A0; }
    .top-page__sns a:nth-child(4)::before {
      background-color: #E5B8BD; }
    .top-page__sns a:nth-child(5)::before {
      background-color: #C7B3D6; }
  /*** share-btn ***/
  .top-page__share-btn {
    position: absolute;
    right: 0;
    bottom: 65px;
    width: 140px;
    height: 40px;
    background-color: #A8CBC6;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    transform: translateX(calc(100% + 5px));
    overflow: hidden;
    z-index: 1; }
    .top-page__share-btn a {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
      font-size: 13px;
      text-align: center;
      line-height: 40px;
      color: #4A3F55;
      background-color: #A8CBC6; }
      .top-page__share-btn a i {
        font-size: 20px;
        margin-right: 5px; }
  .top-page[data-state="start"] {
    /*** ring ***/
    /*** main-illust ***/
    /*** frame ***/
    /*** logo ***/
    /*** global-nav ***/
    /*** sns ***/
    /*** share-btn ***/ }
    .top-page[data-state="start"] .top-page__ring .inner {
      animation: top-page__rotate-ring__sp 150s linear 0s infinite; }
      .top-page[data-state="start"] .top-page__ring .inner div:nth-child(1n):after {
        animation: top-page__show-ring 0.4s ease 0s forwards; }
      .top-page[data-state="start"] .top-page__ring .inner div:nth-child(2n):after {
        animation: top-page__show-ring 0.4s ease 0.05s forwards; }
    .top-page[data-state="start"] .top-page__main-illust {
      animation: scale0-1 0.4s ease 0.2s forwards, fadein 0.4s ease 0.2s forwards; }
    .top-page[data-state="start"] .top-page__frame section div:nth-child(2) {
      animation: scale0-1 0.4s ease 0.6s forwards; }
    .top-page[data-state="start"] .top-page__frame section div:nth-child(1),
    .top-page[data-state="start"] .top-page__frame section div:nth-child(3) {
      animation: scale0-1 0.4s ease 0.7s forwards; }
    .top-page[data-state="start"] .top-page__logo {
      animation: fadein 2s ease 2.7s forwards; }
    .top-page[data-state="start"] .top-page__global-nav .nav-box {
      animation: fadein 0.1s ease 1.4s forwards; }
      .top-page[data-state="start"] .top-page__global-nav .nav-box section:nth-child(1) {
        animation: top-page__scale-nav__sp 0.3s ease 1.4s forwards, top-page__rotate-nav-1__sp 0.5s ease 1.7s forwards; }
        .top-page[data-state="start"] .top-page__global-nav .nav-box section:nth-child(1) a:nth-child(1) {
          animation: top-page__show-nav-text 0.7s ease 2.2s forwards; }
        .top-page[data-state="start"] .top-page__global-nav .nav-box section:nth-child(1) a:nth-child(2) {
          animation: top-page__show-nav-text 0.7s ease 2.5s forwards; }
      .top-page[data-state="start"] .top-page__global-nav .nav-box section:nth-child(2) {
        animation: top-page__scale-nav__sp 0.3s ease 1.4s forwards, top-page__rotate-nav-2__sp 0.5s ease 1.7s forwards; }
        .top-page[data-state="start"] .top-page__global-nav .nav-box section:nth-child(2) a:nth-child(1) {
          animation: top-page__show-nav-text 0.7s ease 2.3s forwards; }
        .top-page[data-state="start"] .top-page__global-nav .nav-box section:nth-child(2) a:nth-child(2) {
          animation: top-page__show-nav-text 0.7s ease 2.4s forwards; }
    .top-page[data-state="start"] .top-page__global-nav .message {
      animation: top-page__show-message__sp 0.4s ease 1s forwards, top-page__hidden-message__sp 0.5s ease 2s forwards; }
      .top-page[data-state="start"] .top-page__global-nav .message h3 {
        animation: slide-top 0.5s ease 1.2s forwards, fadeout 0.1s ease 2s forwards; }
    .top-page[data-state="start"] .top-page__sns {
      animation: slide-top 0.4s ease 3s forwards; }
    .top-page[data-state="start"] .top-page__share-btn {
      animation: slide-left 0.4s ease 3s forwards; } }

@media screen and (min-width: 601px) and (max-width: 960px) {
  .calling {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #4A3F55;
    overflow: hidden;
    z-index: 998; }
  /*** bg ***/
  .calling__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .calling__bg div {
      position: relative;
      float: left;
      width: 25%;
      height: 25%;
      overflow: hidden; }
      .calling__bg div::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-color: #333;
        transform: translateX(-100%); }
    .calling__bg::after {
      content: "";
      display: block;
      clear: both; }
  /*** controls-btn ***/
  .calling__controls-btn {
    position: absolute;
    bottom: 100px;
    left: calc(50% - 250px);
    width: 500px;
    height: 80px; }
    .calling__controls-btn .btn {
      position: absolute;
      top: 0;
      width: 80px;
      height: 80px;
      overflow: hidden;
      border-radius: 15px;
      transform: rotate(45deg); }
      .calling__controls-btn .btn .fa-phone {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        font-size: 45px;
        text-align: center;
        line-height: 80px;
        display: block;
        opacity: 0; }
      .calling__controls-btn .btn div {
        position: absolute; }
        .calling__controls-btn .btn div::after {
          content: "";
          display: block;
          width: 100%;
          height: 100%;
          background-color: rgba(255, 255, 255, 0.6); }
      .calling__controls-btn .btn div:nth-child(1),
      .calling__controls-btn .btn div:nth-child(3) {
        left: 0;
        width: 100%;
        height: 2px; }
      .calling__controls-btn .btn div:nth-child(2),
      .calling__controls-btn .btn div:nth-child(4) {
        top: 0;
        width: 2px;
        height: 100%; }
      .calling__controls-btn .btn div:nth-child(1) {
        top: 0; }
        .calling__controls-btn .btn div:nth-child(1)::after {
          transform: translateX(100%); }
      .calling__controls-btn .btn div:nth-child(2) {
        left: 0; }
        .calling__controls-btn .btn div:nth-child(2)::after {
          transform: translateY(-100%); }
      .calling__controls-btn .btn div:nth-child(3) {
        bottom: 0; }
        .calling__controls-btn .btn div:nth-child(3)::after {
          transform: translateX(-100%); }
      .calling__controls-btn .btn div:nth-child(4) {
        right: 0; }
        .calling__controls-btn .btn div:nth-child(4)::after {
          transform: translateX(100%); }
    .calling__controls-btn .btn-1 {
      left: 0; }
      .calling__controls-btn .btn-1 .fa-phone {
        color: #af5853;
        transform: rotate(180deg); }
    .calling__controls-btn .btn-2 {
      right: 0; }
      .calling__controls-btn .btn-2 .fa-phone {
        color: #6C9A7B;
        transform: rotate(45deg); }
    .calling__controls-btn .touch {
      position: absolute;
      top: 0;
      right: 0;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      border: solid 40px #fff;
      box-sizing: border-box;
      opacity: 0; }
  /*** icons ***/
  .calling__icons {
    position: absolute;
    top: 100px;
    left: calc(50% - 300px);
    width: 600px;
    height: 150px; }
    .calling__icons .icon-box {
      position: relative;
      margin-right: 75px;
      float: left;
      width: 150px;
      height: 150px; }
      .calling__icons .icon-box .icon {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #fff;
        border-radius: 50%;
        transform: scale(0);
        z-index: 1; }
        .calling__icons .icon-box .icon::after {
          margin: 5px;
          content: "";
          display: block;
          width: calc(100% - 10px);
          height: calc(100% - 10px);
          background-size: cover;
          background-position: center;
          border-radius: 50%;
          transform: scale(0); }
      .calling__icons .icon-box .name {
        position: absolute;
        left: 25px;
        bottom: -50px;
        width: 100px;
        height: 30px;
        font-size: 16px;
        text-align: center;
        line-height: 30px;
        color: #fff;
        overflow: hidden; }
        .calling__icons .icon-box .name span {
          display: block;
          transform: translateY(100%); }
        .calling__icons .icon-box .name::after {
          position: absolute;
          bottom: 0;
          left: 0;
          content: "";
          display: block;
          width: 100%;
          height: 1px;
          transform: translateX(-100%); }
      .calling__icons .icon-box::before, .calling__icons .icon-box::after {
        content: "";
        display: block;
        position: absolute;
        width: calc(100% - 70px);
        height: calc(100% - 70px);
        background-color: #fff;
        border-radius: 50%;
        opacity: 0; }
      .calling__icons .icon-box::before {
        top: -5px;
        left: -5px; }
      .calling__icons .icon-box::after {
        bottom: -5px;
        right: -5px; }
    .calling__icons .icon-box:last-child {
      margin-right: 0; }
    .calling__icons .icon-box:nth-child(1) .icon:after {
      background-color: #817487;
      background-image: url(../images/calling/icons/yui.png); }
    .calling__icons .icon-box:nth-child(1) .name:after {
      background-color: #817487; }
    .calling__icons .icon-box:nth-child(2) .icon:after {
      background-color: #C2617E;
      background-image: url(../images/calling/icons/gab.png); }
    .calling__icons .icon-box:nth-child(2) .name:after {
      background-color: #C2617E; }
    .calling__icons .icon-box:nth-child(3) .icon:after {
      background-color: #A8CBC6;
      background-image: url(../images/calling/icons/eriri.png); }
    .calling__icons .icon-box:nth-child(3) .name:after {
      background-color: #A8CBC6; }
  /*** controls-bar ***/
  .calling__controls-bar {
    position: absolute;
    bottom: 40px;
    left: 50%;
    width: 0px;
    height: 60px;
    background-color: #222;
    border-radius: 30px; }
    .calling__controls-bar .inner {
      width: 280px;
      margin: 0 auto; }
    .calling__controls-bar .btn {
      float: left;
      width: 60px;
      height: 60px;
      font-size: 25px;
      text-align: center;
      line-height: 60px;
      color: #999;
      display: block;
      margin-right: 50px;
      opacity: 0; }
    .calling__controls-bar .btn .fa-phone {
      transform: rotate(225deg);
      color: #af5853;
      font-size: 30px; }
    .calling__controls-bar .btn:last-child {
      margin-right: 0; }
  /*** live-view ***/
  .calling__live-view {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% - 140px); }
    .calling__live-view .view {
      position: absolute;
      width: 50%;
      height: 50%; }
      .calling__live-view .view .char {
        margin-left: 50%;
        margin-top: 10px;
        width: 0;
        height: calc(100% - 20px);
        border-radius: 8px;
        overflow: hidden; }
        .calling__live-view .view .char::after {
          content: "";
          display: block;
          width: 100%;
          height: 100%;
          background-size: auto 100%;
          background-position: center;
          background-repeat: no-repeat;
          opacity: 0; }
      .calling__live-view .view .name {
        position: absolute;
        bottom: 20px;
        left: 20px;
        width: 150px;
        height: 30px; }
        .calling__live-view .view .name::before, .calling__live-view .view .name::after {
          content: "";
          display: block;
          position: absolute;
          width: 80%;
          height: 80%;
          background-color: #6C9A7B;
          border-radius: 20px;
          opacity: 0; }
        .calling__live-view .view .name::before {
          top: -4px;
          left: -4px; }
        .calling__live-view .view .name::after {
          bottom: -4px;
          right: -4px; }
        .calling__live-view .view .name span {
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 0%;
          height: 100%;
          border-radius: 15px;
          background-color: #444;
          font-size: 12px;
          line-height: 30px;
          text-align: center;
          color: #fff;
          overflow: hidden;
          z-index: 1; }
    .calling__live-view .view:nth-child(1) {
      top: 0;
      left: 0; }
      .calling__live-view .view:nth-child(1) .char {
        background-color: #817487; }
        .calling__live-view .view:nth-child(1) .char::after {
          transform: translateY(100%);
          background-image: url(../images/calling/icons/yui_large.png); }
    .calling__live-view .view:nth-child(2) {
      top: 0;
      right: 0; }
      .calling__live-view .view:nth-child(2) .char {
        background-color: #A8CBC6; }
        .calling__live-view .view:nth-child(2) .char::after {
          transform: translateX(-100%);
          background-image: url(../images/calling/icons/eriri_large.png); }
    .calling__live-view .view:nth-child(3) {
      bottom: 0;
      left: 25%; }
      .calling__live-view .view:nth-child(3) .char {
        background-color: #C2617E; }
        .calling__live-view .view:nth-child(3) .char::after {
          transform: translateX(100%);
          background-image: url(../images/calling/icons/gab_large.png); }
  .calling__say {
    position: absolute;
    left: -20%;
    top: calc(50% - 100px);
    width: 140%;
    height: 200px;
    transform: rotate(-20deg);
    z-index: 5; }
    .calling__say .line {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform: translateX(-100%); }
    .calling__say .line:nth-child(1) {
      background-color: #817487; }
    .calling__say .line:nth-child(2) {
      background-color: #A8CBC6; }
    .calling__say .line:nth-child(3) {
      background-color: #C2617E; }
    .calling__say .line:nth-child(4) {
      background-color: #4A3F55; }
    .calling__say .img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: auto 45%;
      background-position: center;
      background-repeat: no-repeat;
      background-image: url(../images/calling/say.png);
      opacity: 0; }
  /*** end ***/
  .calling__end {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 6; }
    .calling__end div {
      width: 100%;
      height: 10%;
      overflow: hidden; }
      .calling__end div::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-color: #A8CBC6;
        transform: translateY(-101%); }
  .calling[data-state="start"] {
    /*** bg ***/
    /*** icons ***/
    /*** controls-btn ***/
    /*** controls-bar ***/
    /*** say ***/
    /*** live-view ***/
    /*** end ***/ }
    .calling[data-state="start"] .calling__bg div:nth-child(1):after,
    .calling[data-state="start"] .calling__bg div:nth-child(2):after,
    .calling[data-state="start"] .calling__bg div:nth-child(3):after,
    .calling[data-state="start"] .calling__bg div:nth-child(4):after {
      animation: slide-right 0.4s ease 0s forwards; }
    .calling[data-state="start"] .calling__bg div:nth-child(5):after,
    .calling[data-state="start"] .calling__bg div:nth-child(6):after,
    .calling[data-state="start"] .calling__bg div:nth-child(7):after,
    .calling[data-state="start"] .calling__bg div:nth-child(8):after {
      animation: slide-right 0.4s ease 0.1s forwards; }
    .calling[data-state="start"] .calling__bg div:nth-child(9):after,
    .calling[data-state="start"] .calling__bg div:nth-child(10):after,
    .calling[data-state="start"] .calling__bg div:nth-child(11):after,
    .calling[data-state="start"] .calling__bg div:nth-child(12):after {
      animation: slide-right 0.4s ease 0.2s forwards; }
    .calling[data-state="start"] .calling__bg div:nth-child(13):after,
    .calling[data-state="start"] .calling__bg div:nth-child(14):after,
    .calling[data-state="start"] .calling__bg div:nth-child(15):after,
    .calling[data-state="start"] .calling__bg div:nth-child(16):after {
      animation: slide-right 0.4s ease 0.3s forwards; }
    .calling[data-state="start"] .calling__icons {
      animation: fadeout 0.5s ease 6.6s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box .name {
        animation: fadeout 0.5s ease 6.6s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(1) .icon {
        animation: scale0-0dot5 0.3s ease 2.5s alternate 2 forwards, scale0-1 0.5s ease 3.1s forwards; }
        .calling[data-state="start"] .calling__icons .icon-box:nth-child(1) .icon::after {
          animation: scale0-0dot5 0.3s ease 3.3s alternate 2 forwards, scale0-1 0.5s ease 3.9s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(1) .name span {
        animation: slide-top 0.7s ease 4.5s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(1) .name::after {
        animation: slide-right 0.3s ease 4.6s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(1)::before {
        animation: calling__icon-frame-1 0.8s ease 4s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(1)::after {
        animation: calling__icon-frame-2 0.8s ease 4.1s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(2) .icon {
        animation: scale0-0dot5 0.3s ease 1.5s alternate 2 forwards, scale0-1 0.5s ease 2.1s forwards; }
        .calling[data-state="start"] .calling__icons .icon-box:nth-child(2) .icon::after {
          animation: scale0-0dot5 0.3s ease 2.3s alternate 2 forwards, scale0-1 0.5s ease 2.9s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(2) .name span {
        animation: slide-top 0.7s ease 3.5s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(2) .name::after {
        animation: slide-right 0.3s ease 3.6s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(2)::before {
        animation: calling__icon-frame-1 0.8s ease 3s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(2)::after {
        animation: calling__icon-frame-2 0.8s ease 3.1s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(3) .icon {
        animation: scale0-0dot5 0.3s ease 3.5s alternate 2 forwards, scale0-1 0.5s ease 4.1s forwards; }
        .calling[data-state="start"] .calling__icons .icon-box:nth-child(3) .icon::after {
          animation: scale0-0dot5 0.3s ease 4.3s alternate 2 forwards, scale0-1 0.5s ease 4.9s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(3) .name span {
        animation: slide-top 0.7s ease 5.5s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(3) .name::after {
        animation: slide-right 0.3s ease 5.6s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(3)::before {
        animation: calling__icon-frame-1 0.8s ease 5s forwards; }
      .calling[data-state="start"] .calling__icons .icon-box:nth-child(3)::after {
        animation: calling__icon-frame-2 0.8s ease 5.1s forwards; }
    .calling[data-state="start"] .calling__controls-btn {
      animation: fadeout 0.5s ease 6.6s forwards; }
      .calling[data-state="start"] .calling__controls-btn .btn-1 div:nth-child(1):after {
        animation: slide-left 0.6s ease 0.7s forwards; }
      .calling[data-state="start"] .calling__controls-btn .btn-1 div:nth-child(2):after {
        animation: slide-bottom 0.6s ease 0.7s forwards; }
      .calling[data-state="start"] .calling__controls-btn .btn-1 div:nth-child(3):after {
        animation: slide-right 0.6s ease 0.7s forwards; }
      .calling[data-state="start"] .calling__controls-btn .btn-1 div:nth-child(4):after {
        animation: slide-top 0.6s ease 0.7s forwards; }
      .calling[data-state="start"] .calling__controls-btn .btn-1 .fa-phone {
        animation: calling__show-btn-1 0.7s ease 1s forwards; }
      .calling[data-state="start"] .calling__controls-btn .btn-2 {
        animation: calling__press-btn 0.3s ease 5.9s alternate 2 forwards; }
        .calling[data-state="start"] .calling__controls-btn .btn-2 div:nth-child(1):after {
          animation: slide-left 0.6s ease 0.9s forwards; }
        .calling[data-state="start"] .calling__controls-btn .btn-2 div:nth-child(2):after {
          animation: slide-bottom 0.6s ease 0.9s forwards; }
        .calling[data-state="start"] .calling__controls-btn .btn-2 div:nth-child(3):after {
          animation: slide-right 0.6s ease 0.9s forwards; }
        .calling[data-state="start"] .calling__controls-btn .btn-2 div:nth-child(4):after {
          animation: slide-top 0.6s ease 0.9s forwards; }
        .calling[data-state="start"] .calling__controls-btn .btn-2 .fa-phone {
          animation: calling__show-btn-2 0.7s ease 1.2s forwards; }
      .calling[data-state="start"] .calling__controls-btn .touch {
        animation: calling__touch-btn 0.6s ease 5.9s forwards; }
    .calling[data-state="start"] .calling__controls-bar {
      animation: calling__show-controls-bar 0.4s ease 6.6s forwards; }
      .calling[data-state="start"] .calling__controls-bar div:nth-child(1) {
        animation: fadein 0.8s ease 7s forwards, scale0-1 0.8s ease 7s forwards; }
      .calling[data-state="start"] .calling__controls-bar div:nth-child(2) {
        animation: fadein 0.8s ease 7.4s forwards, scale0-1 0.8s ease 7.4s forwards; }
      .calling[data-state="start"] .calling__controls-bar div:nth-child(3) {
        animation: fadein 0.8s ease 7.2s forwards, scale0-1 0.8s ease 7.2s forwards; }
    .calling[data-state="start"] .calling__say .line:nth-child(1) {
      animation: slide-right 1s ease 11s forwards; }
    .calling[data-state="start"] .calling__say .line:nth-child(2) {
      animation: slide-right 1s ease 11.2s forwards; }
    .calling[data-state="start"] .calling__say .line:nth-child(3) {
      animation: slide-right 1s ease 11.4s forwards; }
    .calling[data-state="start"] .calling__say .line:nth-child(4) {
      animation: slide-right 1s ease 11.6s forwards; }
    .calling[data-state="start"] .calling__say .img {
      animation: calling__show-say 0.5s ease 11.9s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(1) .char {
      animation: calling__show-live-view 0.4s ease 8s forwards; }
      .calling[data-state="start"] .calling__live-view .view:nth-child(1) .char::after {
        animation: fadein 0.3s ease 8.8s forwards, slide-top 0.5s ease 8.8s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(1) .name span {
      animation: width0-100 0.3s ease 9.7s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(1) .name::before {
      animation: calling__char-name-frame-1 0.6s ease 10s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(1) .name::after {
      animation: calling__char-name-frame-2 0.6s ease 10s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(2) .char {
      animation: calling__show-live-view 0.4s ease 8.2s forwards; }
      .calling[data-state="start"] .calling__live-view .view:nth-child(2) .char::after {
        animation: fadein 0.3s ease 9s forwards, slide-right 0.5s ease 9s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(2) .name span {
      animation: width0-100 0.3s ease 9.9s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(2) .name::before {
      animation: calling__char-name-frame-1 0.6s ease 10.2s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(2) .name::after {
      animation: calling__char-name-frame-2 0.6s ease 10.2s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(3) .char {
      animation: calling__show-live-view 0.4s ease 8.4s forwards; }
      .calling[data-state="start"] .calling__live-view .view:nth-child(3) .char::after {
        animation: fadein 0.3s ease 9.2s forwards, slide-left 0.5s ease 9.2s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(3) .name span {
      animation: width0-100 0.3s ease 10.1s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(3) .name::before {
      animation: calling__char-name-frame-1 0.6s ease 10.4s forwards; }
    .calling[data-state="start"] .calling__live-view .view:nth-child(3) .name::after {
      animation: calling__char-name-frame-2 0.6s ease 10.4s forwards; }
    .calling[data-state="start"] .calling__end div:nth-child(1):after {
      animation: slide-bottom 0.3s ease 12.6s forwards; }
    .calling[data-state="start"] .calling__end div:nth-child(2):after {
      animation: slide-bottom 0.3s ease 12.65s forwards; }
    .calling[data-state="start"] .calling__end div:nth-child(3):after {
      animation: slide-bottom 0.3s ease 12.75s forwards; }
    .calling[data-state="start"] .calling__end div:nth-child(4):after {
      animation: slide-bottom 0.3s ease 12.8s forwards; }
    .calling[data-state="start"] .calling__end div:nth-child(5):after {
      animation: slide-bottom 0.3s ease 12.85s forwards; }
    .calling[data-state="start"] .calling__end div:nth-child(6):after {
      animation: slide-bottom 0.3s ease 12.9s forwards; }
    .calling[data-state="start"] .calling__end div:nth-child(7):after {
      animation: slide-bottom 0.3s ease 12.95s forwards; }
    .calling[data-state="start"] .calling__end div:nth-child(8):after {
      animation: slide-bottom 0.3s ease 13.0s forwards; }
    .calling[data-state="start"] .calling__end div:nth-child(9):after {
      animation: slide-bottom 0.3s ease 13.05s forwards; }
    .calling[data-state="start"] .calling__end div:nth-child(10):after {
      animation: calling__end 0.3s ease 13.1s forwards; } }

@media screen and (max-width: 600px) {
  .end-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 997; }
  /*** end-roll ***/
  .end-animation__end-roll {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #A8CBC6; }
    .end-animation__end-roll .text-balls {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
      .end-animation__end-roll .text-balls .text-ball {
        position: absolute;
        width: 90px;
        height: 90px;
        border-radius: 50%;
        opacity: 0; }
        .end-animation__end-roll .text-balls .text-ball .inner {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: #F0EFE7;
          border-radius: 50%;
          border: solid 5px #F0EFE7;
          box-sizing: border-box;
          overflow: hidden; }
          .end-animation__end-roll .text-balls .text-ball .inner .bg {
            width: 100%;
            height: 100%; }
          .end-animation__end-roll .text-balls .text-ball .inner .bg div {
            width: 100%;
            height: 10%;
            background-color: #EBC1C7;
            margin-bottom: 10%;
            transform: translateX(-100%); }
          .end-animation__end-roll .text-balls .text-ball .inner::after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: 60%;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 0; }
      .end-animation__end-roll .text-balls .text-ball:nth-child(1) {
        top: 25px;
        left: 25px; }
        .end-animation__end-roll .text-balls .text-ball:nth-child(1) .inner:after {
          background-image: url(../images/end-animation/end-roll/1.png); }
      .end-animation__end-roll .text-balls .text-ball:nth-child(2) {
        top: 25px;
        right: 25px; }
        .end-animation__end-roll .text-balls .text-ball:nth-child(2) .inner:after {
          background-image: url(../images/end-animation/end-roll/2.png); }
      .end-animation__end-roll .text-balls .text-ball:nth-child(3) {
        bottom: 25px;
        left: 25px; }
        .end-animation__end-roll .text-balls .text-ball:nth-child(3) .inner:after {
          background-image: url(../images/end-animation/end-roll/3.png); }
    .end-animation__end-roll .paints {
      position: absolute;
      top: calc(50% - 40px);
      left: calc(50% - 40px);
      width: 80px;
      height: 80px; }
      .end-animation__end-roll .paints div {
        float: left;
        width: calc(50% - 5px);
        height: calc(50% - 5px);
        margin-right: 10px;
        border-radius: 50%;
        opacity: 0; }
      .end-animation__end-roll .paints div:nth-child(1),
      .end-animation__end-roll .paints div:nth-child(2) {
        margin-bottom: 10px; }
      .end-animation__end-roll .paints div:nth-child(2n) {
        margin-right: 0; }
      .end-animation__end-roll .paints div:nth-child(1) {
        background-color: #C2617E; }
      .end-animation__end-roll .paints div:nth-child(2) {
        background-color: #817487; }
      .end-animation__end-roll .paints div:nth-child(3) {
        background-color: #4A3F55; }
      .end-animation__end-roll .paints div:nth-child(4) {
        background-color: #E5B8BD; }
    .end-animation__end-roll .window {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #b9aeda;
      transform: translateY(-100%);
      perspective: 1500px; }
      .end-animation__end-roll .window img {
        display: block;
        height: 100px;
        position: absolute;
        bottom: 30px;
        right: 0px;
        transform: rotateZ(-20deg); }
      .end-animation__end-roll .window::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(../images/bg.png);
        background-size: 15px;
        opacity: 0.4; }
  .end-animation[data-state="start"] {
    /*** end-roll ***/ }
    .end-animation[data-state="start"] .end-animation__end-roll {
      animation: end-animation__end-roll-color-1 0.5s ease 1.2s forwards, end-animation__end-roll-color-2 0.5s ease 2.1s forwards, end-animation__end-roll-color-3 0.5s ease 3s forwards, end-animation__end-roll-color-4 0.5s ease 3.9s forwards; }
      .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(1) {
        animation: end-animation__move-text-ball-1 0.4s ease 1.2s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(1) .inner {
          animation: end-animation__jump-text-ball-1 0.4s ease 1.2s forwards; }
          .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(1) .inner::after {
            animation: fadein 0.5s ease 1.6s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(1) .bg div:nth-child(1) {
          animation: slide-right 0.3s ease 1.6s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(1) .bg div:nth-child(2) {
          animation: slide-right 0.3s ease 1.65s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(1) .bg div:nth-child(3) {
          animation: slide-right 0.3s ease 1.7s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(1) .bg div:nth-child(4) {
          animation: slide-right 0.3s ease 1.75s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(1) .bg div:nth-child(5) {
          animation: slide-right 0.3s ease 1.8s forwards; }
      .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(2) {
        animation: end-animation__move-text-ball-2 0.4s ease 2.1s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(2) .inner {
          animation: end-animation__jump-text-ball-2 0.4s ease 2.1s forwards; }
          .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(2) .inner::after {
            animation: fadein 0.5s ease 2.5s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(2) .bg div:nth-child(1) {
          animation: slide-right 0.3s ease 2.5s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(2) .bg div:nth-child(2) {
          animation: slide-right 0.3s ease 2.55s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(2) .bg div:nth-child(3) {
          animation: slide-right 0.3s ease 2.6s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(2) .bg div:nth-child(4) {
          animation: slide-right 0.3s ease 2.65s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(2) .bg div:nth-child(5) {
          animation: slide-right 0.3s ease 2.7s forwards; }
      .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(3) {
        animation: end-animation__move-text-ball-3 0.4s ease 3s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(3) .inner {
          animation: end-animation__jump-text-ball-3 0.4s ease 3s forwards; }
          .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(3) .inner::after {
            animation: fadein 0.5s ease 3.4s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(3) .bg div:nth-child(1) {
          animation: slide-right 0.3s ease 3.4s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(3) .bg div:nth-child(2) {
          animation: slide-right 0.3s ease 3.45s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(3) .bg div:nth-child(3) {
          animation: slide-right 0.3s ease 3.5s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(3) .bg div:nth-child(4) {
          animation: slide-right 0.3s ease 3.55s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .text-balls .text-ball:nth-child(3) .bg div:nth-child(5) {
          animation: slide-right 0.3s ease 3.6s forwards; }
      .end-animation[data-state="start"] .end-animation__end-roll .paints div:nth-child(1) {
        animation: end-animation__show-paint 0.6s ease 0s forwards, scale0-1 0.5s ease-out 1.2s reverse forwards; }
      .end-animation[data-state="start"] .end-animation__end-roll .paints div:nth-child(2) {
        animation: end-animation__show-paint 0.4s ease 0.2s forwards, scale0-1 0.5s ease-out 2.1s reverse forwards; }
      .end-animation[data-state="start"] .end-animation__end-roll .paints div:nth-child(3) {
        animation: end-animation__show-paint 0.4s ease 0.4s forwards, scale0-1 0.5s ease-out 3s reverse forwards; }
      .end-animation[data-state="start"] .end-animation__end-roll .paints div:nth-child(4) {
        animation: end-animation__show-paint 0.4s ease 0.6s forwards; }
      .end-animation[data-state="start"] .end-animation__end-roll .window {
        animation: end-animation__down-window 0.5s ease-out 4.2s forwards; }
        .end-animation[data-state="start"] .end-animation__end-roll .window img {
          animation: end-animation__end 0.5s ease 4.7s forwards; } }

@media screen and (min-width: 601px) and (max-width: 960px) {
  .gab-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #E5B8BD;
    overflow: hidden;
    z-index: 999; }
  /*** bg ***/
  .gab-animation__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .gab-animation__bg div {
      width: 100%;
      height: 12.5%;
      background-color: #b9aeda;
      transform: translateX(-100%); }
  /*** frame ***/
  .gab-animation__frame {
    position: absolute;
    top: -100px;
    left: calc(50% - 50px);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden; }
    .gab-animation__frame .area {
      position: relative;
      float: left;
      width: 50%;
      height: 100%;
      overflow: hidden; }
      .gab-animation__frame .area::before, .gab-animation__frame .area::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
      .gab-animation__frame .area::before {
        background-color: #E5B8BD; }
      .gab-animation__frame .area::after {
        background-color: #4A3F55; }
    .gab-animation__frame .area:nth-child(1)::after {
      transform: translate(calc(-100% + 5px), -100%); }
    .gab-animation__frame .area:nth-child(2)::after {
      transform: translate(calc(100% - 5px), 100%); }
    .gab-animation__frame::after {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: url(../images/gab-animation/bg.png);
      background-size: 30px;
      opacity: 0; }
  .gab-animation__illust {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .gab-animation__illust .paint-balls {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
      .gab-animation__illust .paint-balls div {
        float: left;
        width: 50%;
        height: 100%; }
        .gab-animation__illust .paint-balls div::after {
          position: absolute;
          top: calc(50% - 50px);
          content: "";
          display: block;
          width: 100px;
          height: 100px;
          background-color: #F0DB9E;
          border-radius: 50%; }
      .gab-animation__illust .paint-balls div:nth-child(1)::after {
        left: -100px; }
      .gab-animation__illust .paint-balls div:nth-child(2)::after {
        right: -100px; }
    .gab-animation__illust .illust {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      perspective: 400px; }
      .gab-animation__illust .illust::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-image: url(../images/gab-animation/gab.png);
        background-size: auto 90%;
        background-repeat: no-repeat;
        background-position: center bottom;
        opacity: 0; }
  .gab-animation__effects {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .gab-animation__effects .ball {
      position: absolute;
      border-radius: 50%; }
    .gab-animation__effects .ball:nth-child(2n - 1) {
      top: -60px;
      width: 60px;
      height: 60px; }
    .gab-animation__effects .ball:nth-child(2n) {
      top: -45px;
      width: 45px;
      height: 45px; }
    .gab-animation__effects .ball:nth-child(1) {
      background-color: #E5B8BD;
      left: calc(50% - 150px); }
    .gab-animation__effects .ball:nth-child(2) {
      background-color: #817487;
      left: calc(50% - 30px); }
    .gab-animation__effects .ball:nth-child(3) {
      background-color: #E4D6CE;
      left: calc(50% + 45px); }
    .gab-animation__effects .ball:nth-child(4) {
      background-color: #E5B8BD;
      left: calc(50% - 150px); }
    .gab-animation__effects .ball:nth-child(5) {
      background-color: #817487;
      left: calc(50% - 30px); }
    .gab-animation__effects .ball:nth-child(6) {
      background-color: #E4D6CE;
      left: calc(50% + 45px); }
    .gab-animation__effects .ball:nth-child(7) {
      background-color: #E5B8BD;
      left: calc(50% - 150px); }
    .gab-animation__effects .ball:nth-child(8) {
      background-color: #817487;
      left: calc(50% - 30px); }
  .gab-animation__gauge {
    position: absolute;
    bottom: 50px;
    left: calc(50% - 150px);
    width: 300px;
    height: 50px;
    overflow: hidden; }
    .gab-animation__gauge .name {
      width: 100px;
      height: 18px;
      font-size: 14px;
      color: #4A3F55;
      line-height: 18px;
      padding: 0 5px;
      font-weight: bold;
      box-sizing: border-box;
      border: solid 2px #4A3F55;
      border-bottom: none;
      background-color: #eee;
      transform: translateX(-100%); }
    .gab-animation__gauge .gauge {
      width: 100%;
      height: 32px;
      box-sizing: border-box;
      border: solid 2px #4A3F55;
      background-color: #ff2600;
      transform: translateX(-100%);
      overflow: hidden; }
      .gab-animation__gauge .gauge::after {
        width: 100%;
        height: 100%;
        content: "";
        display: block;
        background-color: #86c351;
        transform: translateX(0%); }
  .gab-animation__back-overray {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .gab-animation__back-overray section {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
      .gab-animation__back-overray section div {
        float: left;
        content: "";
        display: block;
        width: 50%;
        height: 100%;
        overflow: hidden; }
        .gab-animation__back-overray section div::after {
          content: "";
          display: block;
          width: 100%;
          height: 100%; }
      .gab-animation__back-overray section div:nth-child(1):after {
        transform: translateX(100%); }
      .gab-animation__back-overray section div:nth-child(2):after {
        transform: translateX(-100%); }
    .gab-animation__back-overray section:nth-child(1) div:after {
      background-color: #C2617E; }
    .gab-animation__back-overray section:nth-child(2) div:after {
      background-color: #E5B8BD; }
    .gab-animation__back-overray section:nth-child(3) div:after {
      background-color: #b9aeda; }
  .gab-animation__message {
    position: absolute;
    top: calc(50% - 148.5px);
    left: calc(50% - 400px);
    width: 800px;
    height: 297px;
    background-image: url(../images/gab-animation/message.png);
    background-size: 100%;
    opacity: 0; }
  .gab-animation__front-overray {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .gab-animation__front-overray section {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
      .gab-animation__front-overray section div {
        float: left;
        content: "";
        display: block;
        width: 50%;
        height: 100%;
        overflow: hidden; }
        .gab-animation__front-overray section div::after {
          content: "";
          display: block;
          width: 100%;
          height: 100%;
          background-color: #4A3F55; }
      .gab-animation__front-overray section div:nth-child(1):after {
        transform: translateX(100%); }
      .gab-animation__front-overray section div:nth-child(2):after {
        transform: translateX(-100%); }
  .gab-animation__palette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .gab-animation__palette .paint {
      position: absolute;
      top: -100px;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #b9aeda; }
      .gab-animation__palette .paint div {
        position: absolute;
        top: 50%;
        overflow: hidden; }
        .gab-animation__palette .paint div::after {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: #b9aeda;
          transform: translateY(-100%); }
      .gab-animation__palette .paint div:nth-child(1) {
        left: calc(50% - 5px);
        width: 10px;
        height: 120px; }
        .gab-animation__palette .paint div:nth-child(1)::after {
          border-radius: 10px; }
      .gab-animation__palette .paint div:nth-child(2) {
        left: 2px;
        width: 18px;
        height: 70px; }
        .gab-animation__palette .paint div:nth-child(2)::after {
          border-radius: 15px; }
      .gab-animation__palette .paint div:nth-child(3) {
        right: 20px;
        width: 15px;
        height: 75px; }
        .gab-animation__palette .paint div:nth-child(3)::after {
          border-radius: 10px; }
      .gab-animation__palette .paint div:nth-child(4) {
        right: 0px;
        width: 10px;
        height: 50px; }
        .gab-animation__palette .paint div:nth-child(4)::after {
          border-radius: 10px; }
      .gab-animation__palette .paint .char {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
        background-size: 80%;
        background-position: center;
        background-repeat: no-repeat; }
        .gab-animation__palette .paint .char::after {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: #b9aeda;
          border-radius: 50%; }
      .gab-animation__palette .paint .char-1 {
        background-image: url(../images/gab-animation/name/1.png); }
      .gab-animation__palette .paint .char-2 {
        background-image: url(../images/gab-animation/name/2.png); }
      .gab-animation__palette .paint .char-3 {
        background-image: url(../images/gab-animation/name/3.png); }
      .gab-animation__palette .paint .char-4 {
        background-image: url(../images/gab-animation/name/4.png); }
      .gab-animation__palette .paint .char-5 {
        background-image: url(../images/gab-animation/name/5.png); }
    .gab-animation__palette .paint:nth-child(1) {
      left: calc(50% - 330px); }
    .gab-animation__palette .paint:nth-child(2) {
      left: calc(50% - 190px); }
    .gab-animation__palette .paint:nth-child(3) {
      left: calc(50% - 50px); }
    .gab-animation__palette .paint:nth-child(4) {
      left: calc(50% + 90px); }
    .gab-animation__palette .paint:nth-child(5) {
      left: calc(50% + 230px); }
    .gab-animation__palette .frame {
      position: absolute;
      left: 0;
      width: 100%;
      height: calc((100% - 300px) / 2);
      overflow: hidden; }
      .gab-animation__palette .frame div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
      .gab-animation__palette .frame div:nth-child(1) {
        background-color: #E4D6CE; }
      .gab-animation__palette .frame div:nth-child(2) {
        background-color: #b9aeda; }
      .gab-animation__palette .frame div:nth-child(3) {
        background-color: #E5B8BD; }
      .gab-animation__palette .frame div:nth-child(4) {
        background-color: #C2617E; }
      .gab-animation__palette .frame div:nth-child(5) {
        background-color: #A8CBC6; }
    .gab-animation__palette .frame-top {
      top: 0; }
      .gab-animation__palette .frame-top div {
        transform: translateY(100%); }
    .gab-animation__palette .frame-bottom {
      bottom: 0; }
      .gab-animation__palette .frame-bottom div {
        transform: translateY(-100%); }
    .gab-animation__palette .clock {
      position: absolute;
      top: calc((100% - 300px) / 2);
      left: 0;
      width: 100%;
      height: 300px; }
      .gab-animation__palette .clock::before, .gab-animation__palette .clock::after {
        content: "";
        display: block;
        position: absolute;
        transform: scale(0); }
      .gab-animation__palette .clock::before {
        top: calc(50% - 100px);
        left: calc(50% - 100px);
        width: 200px;
        height: 200px;
        border-radius: 50%;
        box-sizing: border-box;
        border: dashed 5px #A8CBC6; }
      .gab-animation__palette .clock::after {
        top: calc(50% - 125px);
        left: calc(50% - 125px);
        width: 250px;
        height: 250px;
        border-radius: 50%;
        box-sizing: border-box;
        border: solid 10px #A8CBC6;
        border-top-color: transparent;
        border-bottom-color: transparent; }
      .gab-animation__palette .clock div {
        position: absolute;
        left: calc(50% - 5px);
        top: 50%;
        width: 10px;
        height: 0;
        background-color: #A8CBC6;
        z-index: 1; }
  .gab-animation__camera {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    perspective: 20px;
    z-index: 2; }
    .gab-animation__camera .layer {
      position: absolute;
      top: calc(50% - 225px);
      left: calc(50% - 325px);
      width: 650px;
      height: 450px;
      border-radius: 30px;
      overflow: hidden;
      box-shadow: 0 0 10px #aaa; }
      .gab-animation__camera .layer::before, .gab-animation__camera .layer::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box; }
      .gab-animation__camera .layer::before {
        background-size: cover;
        background-position: center; }
      .gab-animation__camera .layer::after {
        border: solid 25px #fff;
        box-shadow: 0 0 10px #aaa inset; }
    .gab-animation__camera .layer-1 {
      transform: translateZ(20px) scale(calc(1 - (20 / 100))); }
      .gab-animation__camera .layer-1::before {
        background-image: url(../images/gab-animation/comic/1.png); }
    .gab-animation__camera .layer-2 {
      transform: translateZ(120px) scale(calc(1 - (120 / 200))); }
      .gab-animation__camera .layer-2::before {
        transform: translateY(-100%);
        background-image: url(../images/gab-animation/comic/2.png); }
    .gab-animation__camera .layer-3 {
      transform: translateZ(220px) scale(calc(1 - (220 / 300))); }
      .gab-animation__camera .layer-3::before {
        transform: translateY(100%);
        background-image: url(../images/gab-animation/comic/3.png); }
    .gab-animation__camera .layer-4 {
      transform: translateZ(320px) scale(calc(1 - (320 / 400))); }
      .gab-animation__camera .layer-4::before {
        transform: translateY(-100%);
        background-image: url(../images/gab-animation/comic/4.png); }
  .gab-animation__close {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 6; }
    .gab-animation__close .effect {
      position: absolute;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      transform: scale(1.5);
      overflow: hidden; }
      .gab-animation__close .effect div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
        .gab-animation__close .effect div:after {
          content: "";
          display: block;
          position: absolute;
          top: 5px;
          left: calc(50% - 10px);
          width: 0;
          height: 0;
          border: solid 10px transparent;
          border-top: solid 35px #4A3F55;
          opacity: 0; }
      .gab-animation__close .effect div:nth-child(1) {
        transform: rotate(0deg); }
      .gab-animation__close .effect div:nth-child(2) {
        transform: rotate(30deg); }
      .gab-animation__close .effect div:nth-child(3) {
        transform: rotate(60deg); }
      .gab-animation__close .effect div:nth-child(4) {
        transform: rotate(90deg); }
      .gab-animation__close .effect div:nth-child(5) {
        transform: rotate(120deg); }
      .gab-animation__close .effect div:nth-child(6) {
        transform: rotate(150deg); }
      .gab-animation__close .effect div:nth-child(7) {
        transform: rotate(180deg); }
      .gab-animation__close .effect div:nth-child(8) {
        transform: rotate(210deg); }
      .gab-animation__close .effect div:nth-child(9) {
        transform: rotate(240deg); }
      .gab-animation__close .effect div:nth-child(10) {
        transform: rotate(270deg); }
      .gab-animation__close .effect div:nth-child(11) {
        transform: rotate(300deg); }
      .gab-animation__close .effect div:nth-child(12) {
        transform: rotate(330deg); }
    .gab-animation__close .effect-1 {
      top: calc(50% - 100px);
      left: calc(50% - 100px); }
    .gab-animation__close .effect-2 {
      top: 20px;
      right: 20px; }
    .gab-animation__close .effect-3 {
      bottom: 20px;
      left: 20px; }
    .gab-animation__close .ball {
      position: absolute;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      background-color: #4A3F55;
      transform: scale(0); }
      .gab-animation__close .ball::after {
        content: "";
        display: block;
        position: absolute;
        top: 20%;
        left: 20%;
        width: 60%;
        height: 60%;
        border-radius: 50%;
        background-color: #817487; }
    .gab-animation__close .ball-1 {
      top: calc(20px - 312px);
      right: calc(20px - 312px); }
    .gab-animation__close .ball-2 {
      top: calc(50% - 312px);
      left: calc(50% - 312px); }
    .gab-animation__close .ball-3 {
      bottom: calc(20px - 312px);
      left: calc(20px - 312px); }
    .gab-animation__close .end-block {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
      .gab-animation__close .end-block .paint-ball {
        position: absolute;
        top: calc(50% - 20px);
        left: calc(50% - 20px);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #4A3F55;
        transform: scale(0); }
      .gab-animation__close .end-block::before, .gab-animation__close .end-block::after {
        position: absolute;
        content: "";
        display: block; }
      .gab-animation__close .end-block::before {
        left: calc(50% - 1px);
        top: 50%;
        width: 2px;
        height: 0;
        background-color: #4A3F55; }
      .gab-animation__close .end-block::after {
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background-color: #4A3F55;
        top: calc(50% - 200px);
        left: calc(50% - 200px);
        transform: scale(0); }
  /*************************************************************************************************
   * animation
   *************************************************************************************************/
  .gab-animation[data-state="start"] .gab-animation__bg div:nth-child(1) {
    animation: slide-right 0.4s ease 0s forwards; }
  .gab-animation[data-state="start"] .gab-animation__bg div:nth-child(2) {
    animation: slide-right 0.4s ease 0.1s forwards; }
  .gab-animation[data-state="start"] .gab-animation__bg div:nth-child(3) {
    animation: slide-right 0.4s ease 0.2s forwards; }
  .gab-animation[data-state="start"] .gab-animation__bg div:nth-child(4) {
    animation: slide-right 0.4s ease 0.3s forwards; }
  .gab-animation[data-state="start"] .gab-animation__bg div:nth-child(5) {
    animation: slide-right 0.4s ease 0.4s forwards; }
  .gab-animation[data-state="start"] .gab-animation__bg div:nth-child(6) {
    animation: slide-right 0.4s ease 0.5s forwards; }
  .gab-animation[data-state="start"] .gab-animation__bg div:nth-child(7) {
    animation: slide-right 0.4s ease 0.6s forwards; }
  .gab-animation[data-state="start"] .gab-animation__bg div:nth-child(8) {
    animation: slide-right 0.4s ease 0.7s forwards; }
  .gab-animation[data-state="start"] .gab-animation__frame {
    animation: gab-animation__fall-frame 0.5s ease-out 1.1s forwards, gab-animation__scale-frame 0.7s ease-in-out 1.6s forwards, gab-animation__open-frame 0.4s ease-in-out 2.3s forwards, gab-animation__radius-frame 1s ease-in-out 3.8s forwards; }
    .gab-animation[data-state="start"] .gab-animation__frame::after {
      animation: gab-animation__show-bg 0.4s ease 3.8s forwards; }
    .gab-animation[data-state="start"] .gab-animation__frame .area:nth-child(1)::before {
      animation: gab-animation__move-y1-area-1 0.3s ease 2.7s forwards, gab-animation__move-x-area-1 0.4s ease 3s forwards, gab-animation__move-y2-area-1 0.3s ease 3.4s forwards; }
    .gab-animation[data-state="start"] .gab-animation__frame .area:nth-child(1)::after {
      animation: gab-animation__move-y-area-bg-1 0.3s ease 3.5s forwards, gab-animation__move-x-area-bg-1 0.4s ease 3.8s forwards; }
    .gab-animation[data-state="start"] .gab-animation__frame .area:nth-child(2)::before {
      animation: gab-animation__move-y1-area-2 0.3s ease 2.7s forwards, gab-animation__move-x-area-2 0.4s ease 3s forwards, gab-animation__move-y2-area-2 0.3s ease 3.4s forwards; }
    .gab-animation[data-state="start"] .gab-animation__frame .area:nth-child(2)::after {
      animation: gab-animation__move-y-area-bg-2 0.3s ease 3.5s forwards, gab-animation__move-x-area-bg-2 0.4s ease 3.8s forwards; }
  .gab-animation[data-state="start"] .gab-animation__illust .paint-balls div:nth-child(1) {
    animation: gab-animation__x-paint-ball-1 0.4s ease-in-out 4s forwards; }
    .gab-animation[data-state="start"] .gab-animation__illust .paint-balls div:nth-child(1)::after {
      animation: gab-animation__y-paint-ball-1 0.4s ease-in-out 4s forwards, fadeout 0.1s ease 4.4s forwards; }
  .gab-animation[data-state="start"] .gab-animation__illust .paint-balls div:nth-child(2) {
    animation: gab-animation__x-paint-ball-2 0.4s ease-in-out 4s forwards; }
    .gab-animation[data-state="start"] .gab-animation__illust .paint-balls div:nth-child(2)::after {
      animation: gab-animation__y-paint-ball-2 0.4s ease-in-out 4s forwards, gab-animation__scale-frame 0.8s ease-in-out 4.4s forwards, scale10 0.5s ease 5.2s forwards, fadeout 0.5s ease 5.2s forwards; }
  .gab-animation[data-state="start"] .gab-animation__illust .illust::after {
    animation: fadein 0.1s ease 5.2s forwards, gab-animation__rotate-illust 0.6s ease 5.2s forwards, gab-animation__attack-gab 0.1s ease 5.7s alternate 10 forwards, gab-animation__down-gab 0.8s ease 6.7s forwards; }
  .gab-animation[data-state="start"] .gab-animation__effects .ball:nth-child(1) {
    animation: gab-animation__fall-ball-effect 0.2s ease-out 5.6s forwards, gab-animation__scale-ball-effect 0.3s ease 5.8s forwards; }
  .gab-animation[data-state="start"] .gab-animation__effects .ball:nth-child(2) {
    animation: gab-animation__fall-ball-effect 0.2s ease-out 5.7s forwards, gab-animation__scale-ball-effect 0.3s ease 5.9s forwards; }
  .gab-animation[data-state="start"] .gab-animation__effects .ball:nth-child(3) {
    animation: gab-animation__fall-ball-effect 0.2s ease-out 5.8s forwards, gab-animation__scale-ball-effect 0.3s ease 6s forwards; }
  .gab-animation[data-state="start"] .gab-animation__effects .ball:nth-child(6) {
    animation: gab-animation__fall-ball-effect 0.2s ease-out 5.9s forwards, gab-animation__scale-ball-effect 0.3s ease 6.1s forwards; }
  .gab-animation[data-state="start"] .gab-animation__effects .ball:nth-child(5) {
    animation: gab-animation__fall-ball-effect 0.2s ease-out 6s forwards, gab-animation__scale-ball-effect 0.3s ease 6.2s forwards; }
  .gab-animation[data-state="start"] .gab-animation__effects .ball:nth-child(4) {
    animation: gab-animation__fall-ball-effect 0.2s ease-out 6.1s forwards, gab-animation__scale-ball-effect 0.3s ease 6.3s forwards; }
  .gab-animation[data-state="start"] .gab-animation__effects .ball:nth-child(7) {
    animation: gab-animation__fall-ball-effect 0.2s ease-out 6.2s forwards, gab-animation__scale-ball-effect 0.3s ease 6.4s forwards; }
  .gab-animation[data-state="start"] .gab-animation__effects .ball:nth-child(8) {
    animation: gab-animation__fall-ball-effect 0.2s ease-out 6.3s forwards, gab-animation__scale-ball-effect 0.3s ease 6.5s forwards; }
  .gab-animation[data-state="start"] .gab-animation__gauge {
    animation: fadeout 0.8s ease 6.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__gauge .name {
      animation: slide-right 0.35s ease 5.4s forwards; }
    .gab-animation[data-state="start"] .gab-animation__gauge .gauge {
      animation: slide-right 0.35s ease 5.5s forwards; }
      .gab-animation[data-state="start"] .gab-animation__gauge .gauge::after {
        animation: slide-right 1s ease 5.7s reverse forwards; }
  .gab-animation[data-state="start"] .gab-animation__back-overray section:nth-child(1) div:nth-child(1):after {
    animation: slide-left 0.5s ease 7.3s forwards; }
  .gab-animation[data-state="start"] .gab-animation__back-overray section:nth-child(1) div:nth-child(2):after {
    animation: slide-right 0.5s ease 7.3s forwards; }
  .gab-animation[data-state="start"] .gab-animation__back-overray section:nth-child(2) div:nth-child(1):after {
    animation: slide-left 0.5s ease 7.4s forwards; }
  .gab-animation[data-state="start"] .gab-animation__back-overray section:nth-child(2) div:nth-child(2):after {
    animation: slide-right 0.5s ease 7.4s forwards; }
  .gab-animation[data-state="start"] .gab-animation__back-overray section:nth-child(3) div:nth-child(1):after {
    animation: slide-left 0.5s ease 7.5s forwards; }
  .gab-animation[data-state="start"] .gab-animation__back-overray section:nth-child(3) div:nth-child(2):after {
    animation: slide-right 0.5s ease 7.5s forwards; }
  .gab-animation[data-state="start"] .gab-animation__message {
    animation: gab-animation__message 0.4s ease 6.9s forwards; }
  .gab-animation[data-state="start"] .gab-animation__front-overray section div:nth-child(1):after {
    animation: slide-left 0.7s ease 7.8s forwards; }
  .gab-animation[data-state="start"] .gab-animation__front-overray section div:nth-child(2):after {
    animation: slide-right 0.7s ease 7.8s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(1) {
    animation: gab-animation__fall-paint-1 0.2s ease 9s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(1) div:nth-child(1):after {
      animation: slide-bottom 2s ease 9.2s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(1) div:nth-child(2):after {
      animation: slide-bottom 1s ease 9.2s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(1) div:nth-child(3):after {
      animation: slide-bottom 1.8s ease 9.2s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(1) div:nth-child(4):after {
      animation: slide-bottom 0.9s ease 9.2s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(1) .char:after {
      animation: slide-top 1.8s ease-out 9.2s reverse forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(2) {
    animation: gab-animation__fall-paint-2 0.2s ease 10s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(2) div:nth-child(1):after {
      animation: slide-bottom 2s ease 10.2s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(2) div:nth-child(2):after {
      animation: slide-bottom 1s ease 10.2s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(2) div:nth-child(3):after {
      animation: slide-bottom 1.8s ease 10.2s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(2) div:nth-child(4):after {
      animation: slide-bottom 0.9s ease 10.2s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(2) .char:after {
      animation: slide-top 1.8s ease-out 10.2s reverse forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(3) {
    animation: gab-animation__fall-paint-1 0.2s ease 8.5s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(3) div:nth-child(1):after {
      animation: slide-bottom 2s ease 8.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(3) div:nth-child(2):after {
      animation: slide-bottom 1s ease 8.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(3) div:nth-child(3):after {
      animation: slide-bottom 1.8s ease 8.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(3) div:nth-child(4):after {
      animation: slide-bottom 0.9s ease 8.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(3) .char:after {
      animation: slide-top 1.8s ease-out 8.7s reverse forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(4) {
    animation: gab-animation__fall-paint-2 0.2s ease 10.5s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(4) div:nth-child(1):after {
      animation: slide-bottom 2s ease 10.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(4) div:nth-child(2):after {
      animation: slide-bottom 1s ease 10.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(4) div:nth-child(3):after {
      animation: slide-bottom 1.8s ease 10.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(4) div:nth-child(4):after {
      animation: slide-bottom 0.9s ease 10.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(4) .char:after {
      animation: slide-top 1.8s ease-out 10.7s reverse forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(5) {
    animation: gab-animation__fall-paint-1 0.2s ease 9.5s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(5) div:nth-child(1):after {
      animation: slide-bottom 2s ease 9.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(5) div:nth-child(2):after {
      animation: slide-bottom 1s ease 9.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(5) div:nth-child(3):after {
      animation: slide-bottom 1.8s ease 9.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(5) div:nth-child(4):after {
      animation: slide-bottom 0.9s ease 9.7s forwards; }
    .gab-animation[data-state="start"] .gab-animation__palette .paint:nth-child(5) .char:after {
      animation: slide-top 1.8s ease-out 9.7s reverse forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .frame-top div:nth-child(1) {
    animation: slide-top 0.4s ease 12.5s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .frame-top div:nth-child(2) {
    animation: slide-top 0.4s ease 12.6s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .frame-top div:nth-child(3) {
    animation: slide-top 0.4s ease 12.7s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .frame-top div:nth-child(4) {
    animation: slide-top 0.4s ease 12.8s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .frame-top div:nth-child(5) {
    animation: slide-top 0.4s ease 12.9s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .frame-bottom div:nth-child(1) {
    animation: slide-bottom 0.4s ease 12.5s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .frame-bottom div:nth-child(2) {
    animation: slide-bottom 0.4s ease 12.6s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .frame-bottom div:nth-child(3) {
    animation: slide-bottom 0.4s ease 12.7s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .frame-bottom div:nth-child(4) {
    animation: slide-bottom 0.4s ease 12.8s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .frame-bottom div:nth-child(5) {
    animation: slide-bottom 0.4s ease 12.9s forwards; }
  .gab-animation[data-state="start"] .gab-animation__palette .clock::before {
    animation: gab-animation__show-clock-frame 0.5s ease 13.3s forwards, rotate360 4s linear 13.8s infinite; }
  .gab-animation[data-state="start"] .gab-animation__palette .clock::after {
    animation: gab-animation__show-clock-frame 0.5s ease 13.4s forwards, rotate360 3s linear 13.9s infinite; }
  .gab-animation[data-state="start"] .gab-animation__palette .clock div {
    animation: gab-animation__show-clock-hand 0.3s ease 14s forwards, gab-animation__reverse-clock-hand 0.4s ease 14.3s forwards, gab-animation__rotate-clock-hand 0.3s ease-out 14.7s forwards, gab-animation__scale-clock-hand 0.4s ease 14.8s forwards; }
  .gab-animation[data-state="start"] .gab-animation__camera {
    animation: gab-animation__camera 2.8s ease-in-out 15.2s forwards, fadeout 0.1s ease 19s forwards; }
    .gab-animation[data-state="start"] .gab-animation__camera .layer-2:before {
      animation: slide-bottom 0.6s ease 16.2s forwards; }
    .gab-animation[data-state="start"] .gab-animation__camera .layer-3:before {
      animation: slide-top 0.6s ease 16.6s forwards; }
    .gab-animation[data-state="start"] .gab-animation__camera .layer-4:before {
      animation: gab-animation__show-layer 0.8s ease 17.1s forwards; }
  .gab-animation[data-state="start"] .gab-animation__close .effect-1 div:after {
    animation: gab-animation__effect 0.6s ease-out 18.3s reverse forwards, fadein 0.1s ease 18.3s forwards, fadeout 0.1s ease 18.8s forwards, gab-animation__effect 0.6s ease-out 19.7s forwards, fadein 0.1s ease 19.7s forwards, fadeout 0.1s ease 20.2s forwards; }
  .gab-animation[data-state="start"] .gab-animation__close .effect-2 div:after {
    animation: gab-animation__effect 0.6s ease-out 17.7s reverse forwards, fadein 0.1s ease 17.7s forwards, fadeout 0.1s ease 18.2s forwards, gab-animation__effect 0.6s ease-out 19.1s forwards, fadein 0.1s ease 19.1s forwards, fadeout 0.1s ease 19.6s forwards; }
  .gab-animation[data-state="start"] .gab-animation__close .effect-3 div:after {
    animation: gab-animation__effect 0.6s ease 18s reverse forwards, fadein 0.1s ease 18s forwards, fadeout 0.1s ease 18.5s forwards, gab-animation__effect 0.6s ease 19.4s forwards, fadein 0.1s ease 19.4s forwards, fadeout 0.1s ease 19.9s forwards; }
  .gab-animation[data-state="start"] .gab-animation__close .ball-1 {
    animation: gab-animation__scale-ball 0.5s ease 18.2s alternate 2 forwards; }
    .gab-animation[data-state="start"] .gab-animation__close .ball-1::after {
      animation: gab-animation__scale-ball 0.4s ease 18.3s alternate 2 forwards; }
  .gab-animation[data-state="start"] .gab-animation__close .ball-2 {
    animation: gab-animation__scale-ball 0.5s ease 18.8s alternate 2 forwards; }
    .gab-animation[data-state="start"] .gab-animation__close .ball-2::after {
      animation: gab-animation__scale-ball 0.4s ease 18.9s alternate 2 forwards; }
  .gab-animation[data-state="start"] .gab-animation__close .ball-3 {
    animation: gab-animation__scale-ball 0.5s ease 18.5s alternate 2 forwards; }
    .gab-animation[data-state="start"] .gab-animation__close .ball-3::after {
      animation: gab-animation__scale-ball 0.4s ease 18.6s alternate 2 forwards; }
  .gab-animation[data-state="start"] .gab-animation__close .end-block .paint-ball:nth-child(1) {
    animation: scale0-1 0.4s ease 20s forwards, gab-animation__move-end-block-1 0.4s ease 20.4s forwards; }
  .gab-animation[data-state="start"] .gab-animation__close .end-block .paint-ball:nth-child(2) {
    animation: scale0-1 0.4s ease 20s forwards, gab-animation__move-end-block-2 0.4s ease 20.4s forwards; }
  .gab-animation[data-state="start"] .gab-animation__close .end-block::before {
    animation: gab-animation__show-end-block 0.4s ease 20.4s forwards, rotate360 0.6s ease-in-out 20.8s forwards; }
  .gab-animation[data-state="start"] .gab-animation__close .end-block::after {
    animation: scale0-1 0.6s ease-out 20.8s forwards, scale1dot5 0.3s ease 21.4s 2 alternate forwards, gab-animation__close 0.5s ease 22s forwards; } }

@media screen and (min-width: 601px) and (max-width: 960px) {
  .history-page .history-box {
    margin-top: 50px; 
  }
    .history-page .history-box section {
      width: 90%;
      margin: 20px auto;
      padding: 20px;
      box-sizing: border-box;
      border: dashed 1px #4A3F55;
      border-radius: 10px; }
      .history-page .history-box section .version {
        font-size: 14px;
        color: #817487;
        margin-bottom: 10px; }
      .history-page .history-box section .title {
        font-size: 20px;
        text-align: center;
        padding: 6px 0;
        color: #fff;
        margin-bottom: 8px;
        border-radius: 10px;
        background-color: #817487; }
      .history-page .history-box section img {
        display: block;
        width: 100%;
        border-radius: 10px; }
      .history-page .history-box section a {
        display: block;
        width: 200px;
        height: 40px;
        margin: 0 auto;
        border: dashed 2px #817487;
        border-radius: 10px;
        font-size: 16px;
        color: #4A3F55;
        display: block;
        text-align: center;
        line-height: 40px;
        margin-top: 20px;
        transition: all 0.35s ease 0s; }
      .history-page .history-box section a:hover {
        background-color: #4A3F55;
        color: #b9aeda; } }

@media screen and (min-width: 601px) and (max-width: 960px) {
  .load-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #C2617E;
    overflow: hidden;
    z-index: 1000; }
  /**
   * frame
   */
  .load-view__frame {
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px); }
  /*** squares ***/
  .load-view__frame__squares {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .load-view__frame__squares div {
      position: absolute;
      width: 30px;
      height: 30px;
      border: dashed 2px #fff;
      box-sizing: border-box;
      border-radius: 3px; }
    .load-view__frame__squares div:nth-child(1) {
      top: 0;
      left: 0; }
    .load-view__frame__squares div:nth-child(2) {
      top: 0;
      right: 0; }
    .load-view__frame__squares div:nth-child(3) {
      bottom: 0;
      left: 0; }
    .load-view__frame__squares div:nth-child(4) {
      bottom: 0;
      right: 0; }
  /*** lines ***/
  .load-view__frame__lines {
    position: absolute;
    top: 28px;
    left: 28px;
    width: calc(100% - 56px);
    height: calc(100% - 56px); }
    .load-view__frame__lines div {
      position: absolute;
      box-sizing: border-box; }
    .load-view__frame__lines div:nth-child(1),
    .load-view__frame__lines div:nth-child(3) {
      left: 0;
      width: 100%;
      height: 3px;
      border-top: dashed 2px #fff; }
    .load-view__frame__lines div:nth-child(2),
    .load-view__frame__lines div:nth-child(4) {
      top: 0;
      width: 1px;
      height: 100%;
      border-left: dashed 2px #fff; }
    .load-view__frame__lines div:nth-child(1) {
      top: 0; }
    .load-view__frame__lines div:nth-child(3) {
      bottom: 0; }
    .load-view__frame__lines div:nth-child(2) {
      left: 0; }
    .load-view__frame__lines div:nth-child(4) {
      right: 0; }
  /**
   * body
   */
  .load-view__body {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%; }
  /*** bg ***/
  .load-view__body__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .load-view__body__bg::before, .load-view__body__bg::after {
      content: "";
      display: block;
      position: absolute;
      width: calc(100% - 120px);
      height: calc(100% - 120px);
      border-radius: 5px;
      background-color: rgba(255, 255, 255, 0.2); }
    .load-view__body__bg::before {
      top: 50px;
      left: 50px; }
    .load-view__body__bg::after {
      bottom: 50px;
      right: 50px; }
  /*** panel ***/
  .load-view__body__panel {
    position: absolute;
    top: 0;
    left: calc(50% - 300.5px);
    width: 601px;
    height: 100%; }
  /*** panel__icon ***/
  .load-view__body__panel__icon {
    position: absolute;
    top: calc(50% - 60px);
    width: 80px;
    height: 80px;
    opacity: 0; }
    .load-view__body__panel__icon .box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
      .load-view__body__panel__icon .box::after {
        content: "";
        display: block;
        position: absolute;
        top: 8px;
        left: 8px;
        width: calc(100% - 16px);
        height: calc(100% - 16px);
        box-sizing: border-box;
        border: solid 2px transparent; }
      .load-view__body__panel__icon .box .frame {
        position: absolute;
        width: 40%;
        height: 40%; }
        .load-view__body__panel__icon .box .frame::before, .load-view__body__panel__icon .box .frame::after {
          content: "";
          display: block;
          position: absolute; }
        .load-view__body__panel__icon .box .frame::before {
          width: 100%;
          height: 8px; }
        .load-view__body__panel__icon .box .frame::after {
          width: 8px;
          height: 100%; }
      .load-view__body__panel__icon .box .frame:nth-child(1) {
        top: 0;
        right: 0; }
        .load-view__body__panel__icon .box .frame:nth-child(1)::before, .load-view__body__panel__icon .box .frame:nth-child(1)::after {
          top: 0;
          right: 0; }
      .load-view__body__panel__icon .box .frame:nth-child(2) {
        bottom: 0;
        left: 0; }
        .load-view__body__panel__icon .box .frame:nth-child(2)::before, .load-view__body__panel__icon .box .frame:nth-child(2)::after {
          bottom: 0;
          left: 0; }
    .load-view__body__panel__icon .icon {
      position: absolute;
      top: 25px;
      left: 25px;
      width: calc(100% - 50px);
      height: calc(100% - 50px);
      background-size: 150%;
      background-position: center; }
  .load-view__body__panel__icon_type_1 {
    left: 56.2px; }
    .load-view__body__panel__icon_type_1 .box::after {
      border-color: #C2617E; }
    .load-view__body__panel__icon_type_1 .box .frame::before, .load-view__body__panel__icon_type_1 .box .frame::after {
      background-color: #C2617E; }
    .load-view__body__panel__icon_type_1 .icon {
      background-image: url(../images/load-view/wait/1.png); }
  .load-view__body__panel__icon_type_2 {
    left: 192.4px; }
    .load-view__body__panel__icon_type_2 .box::after {
      border-color: #817487; }
    .load-view__body__panel__icon_type_2 .box .frame::before, .load-view__body__panel__icon_type_2 .box .frame::after {
      background-color: #817487; }
    .load-view__body__panel__icon_type_2 .icon {
      background-image: url(../images/load-view/wait/2.png); }
  .load-view__body__panel__icon_type_3 {
    right: 192.4px; }
    .load-view__body__panel__icon_type_3 .box::after {
      border-color: #E5B8BD; }
    .load-view__body__panel__icon_type_3 .box .frame::before, .load-view__body__panel__icon_type_3 .box .frame::after {
      background-color: #E5B8BD; }
    .load-view__body__panel__icon_type_3 .icon {
      background-image: url(../images/load-view/wait/3.png); }
  .load-view__body__panel__icon_type_4 {
    right: 56.2px; }
    .load-view__body__panel__icon_type_4 .box::after {
      border-color: #4A3F55; }
    .load-view__body__panel__icon_type_4 .box .frame::before, .load-view__body__panel__icon_type_4 .box .frame::after {
      background-color: #4A3F55; }
    .load-view__body__panel__icon_type_4 .icon {
      background-image: url(../images/load-view/wait/4.png); }
  /*** poster ***/
  .load-view__body__poster {
    position: absolute;
    top: 0;
    left: calc(50% - 300.5px);
    width: 601px;
    height: 100%; }
    .load-view__body__poster .paint-ball-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden; }
    .load-view__body__poster .paint-ball {
      position: absolute;
      top: calc(50% - 30px);
      left: -60px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: #fff; }
      .load-view__body__poster .paint-ball div {
        position: absolute;
        top: 5px;
        left: 5px;
        width: calc(100% - 10px);
        height: calc(100% - 10px);
        border-radius: 50%;
        border: dashed 2px #C2617E;
        box-sizing: border-box; }
      .load-view__body__poster .paint-ball::before, .load-view__body__poster .paint-ball::after {
        position: absolute;
        content: "";
        display: block;
        width: calc(100% - 40px);
        height: 2px;
        top: calc(50% - 1px);
        left: 20px;
        background-color: #C2617E; }
      .load-view__body__poster .paint-ball::before {
        transform: rotate(45deg); }
      .load-view__body__poster .paint-ball::after {
        transform: rotate(-45deg); }
    .load-view__body__poster .poster {
      position: relative;
      float: left;
      width: 150.25px;
      height: 100%;
      transform: translateY(calc(-100% + -150px));
      perspective: 500px; }
      .load-view__body__poster .poster .illust {
        position: absolute;
        top: calc(50% - 161px);
        left: 0;
        width: 150.25px;
        height: 322px;
        transform-origin: center bottom;
        opacity: 0; }
        .load-view__body__poster .poster .illust::after {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-size: 100% auto;
          background-repeat: no-repeat;
          background-position: center;
          transform-origin: center bottom; }
      .load-view__body__poster .poster .ball {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: translateY(calc(-50% + -25px)); }
        .load-view__body__poster .poster .ball::after {
          content: "";
          display: block;
          position: absolute;
          top: calc(50% - 25px);
          left: calc(50% - 25px);
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background-color: #fff; }
      .load-view__body__poster .poster::after {
        content: "";
        display: block;
        position: absolute;
        left: -44.875px;
        bottom: -150px;
        width: 0;
        height: 0;
        border-top: solid 150px transparent;
        border-right: solid 120px transparent;
        border-left: solid 120px transparent; }
    .load-view__body__poster .poster:nth-child(1) {
      background-color: #C2617E; }
      .load-view__body__poster .poster:nth-child(1)::after {
        border-top-color: #C2617E; }
      .load-view__body__poster .poster:nth-child(1) .illust:after {
        background-image: url(../images/load-view/poster/1.png); }
    .load-view__body__poster .poster:nth-child(2) {
      background-color: #817487; }
      .load-view__body__poster .poster:nth-child(2)::after {
        border-top-color: #817487; }
      .load-view__body__poster .poster:nth-child(2) .illust:after {
        background-image: url(../images/load-view/poster/2.png); }
    .load-view__body__poster .poster:nth-child(3) {
      background-color: #E5B8BD; }
      .load-view__body__poster .poster:nth-child(3)::after {
        border-top-color: #E5B8BD; }
      .load-view__body__poster .poster:nth-child(3) .illust:after {
        background-image: url(../images/load-view/poster/3.png); }
    .load-view__body__poster .poster:nth-child(4) {
      background-color: #4A3F55; }
      .load-view__body__poster .poster:nth-child(4)::after {
        border-top-color: #4A3F55; }
      .load-view__body__poster .poster:nth-child(4) .illust:after {
        background-image: url(../images/load-view/poster/4.png); }
    .load-view__body__poster .illust {
      position: absolute;
      top: calc(50% - 650px);
      left: 0;
      width: 225px;
      height: 650px;
      background-size: 100% auto;
      background-repeat: no-repeat;
      background-position: center; }
    .load-view__body__poster::after {
      content: "";
      display: block;
      clear: both; }
  .load-view__body__info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .load-view__body__info .allow {
      position: relative;
      width: 100%;
      height: 25%;
      transform: translateX(-100%); }
      .load-view__body__info .allow .sd {
        position: absolute;
        top: calc(50% - 60px);
        height: 120px;
        display: block;
        opacity: 0;
        transform-origin: center bottom; }
      .load-view__body__info .allow .sd-1 {
        left: 5%; }
      .load-view__body__info .allow .sd-2 {
        right: 5%; }
      .load-view__body__info .allow .text {
        position: absolute;
        top: calc(50% - 60px);
        height: 120px;
        display: block;
        opacity: 0; }
      .load-view__body__info .allow .text-1 {
        right: 10%; }
      .load-view__body__info .allow .text-2 {
        left: 10%; }
      .load-view__body__info .allow .line {
        position: absolute;
        top: 20px;
        left: 0;
        width: 100%;
        height: calc(100% - 40px);
        overflow: hidden; }
        .load-view__body__info .allow .line::after {
          content: "";
          display: block;
          position: absolute;
          bottom: 0;
          left: 0;
          transform: translate(calc(100% - 15px), calc(100% - 5px));
          width: calc(100% + 30px);
          height: 100%;
          background-color: #fff; }
      .load-view__body__info .allow .paint-ball {
        position: absolute;
        bottom: 20px;
        left: -60px;
        width: 60px;
        height: 60px;
        background-color: #fff;
        border-radius: 50%; }
        .load-view__body__info .allow .paint-ball div {
          position: absolute;
          top: 5px;
          left: 5px;
          width: calc(100% - 10px);
          height: calc(100% - 10px);
          border-radius: 50%;
          border: dashed 2px #C2617E;
          box-sizing: border-box; }
        .load-view__body__info .allow .paint-ball::before, .load-view__body__info .allow .paint-ball::after {
          content: "";
          display: block;
          position: absolute;
          left: 20px;
          top: calc(50% - 1px);
          width: calc(100% - 40px);
          height: 2px;
          background-color: #C2617E; }
        .load-view__body__info .allow .paint-ball::before {
          transform: rotate(45deg); }
        .load-view__body__info .allow .paint-ball::after {
          transform: rotate(-45deg); }
    .load-view__body__info .allow:nth-child(1) {
      background-color: #C2617E; }
    .load-view__body__info .allow:nth-child(2) {
      background-color: #817487; }
    .load-view__body__info .allow:nth-child(3) {
      background-color: #E5B8BD; }
    .load-view__body__info .allow:nth-child(4) {
      background-color: #4A3F55; }
  .load-view__body__close {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .load-view__body__close .curtain {
      width: 100%;
      height: 50%;
      background-color: #fff;
      overflow: hidden; }
      .load-view__body__close .curtain::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-color: #C2617E; }
    .load-view__body__close .curtain:nth-child(1) {
      transform: translateY(-100%); }
    .load-view__body__close .curtain:nth-child(2) {
      transform: translateY(100%); }
    .load-view__body__close .message {
      position: absolute;
      top: calc(50% - 20px);
      left: 0;
      width: 100%;
      height: 40px;
      font-size: 30px;
      color: #fff;
      text-align: right;
      line-height: 40px;
      box-sizing: border-box;
      padding: 0 20px;
      opacity: 0; }
    .load-view__body__close::before, .load-view__body__close::after {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      width: 100%;
      height: 50%;
      background-color: #E5B8BD;
      z-index: 1; }
    .load-view__body__close::before {
      top: 0;
      transform: translateY(-100%); }
    .load-view__body__close::after {
      bottom: 0;
      transform: translateY(100%); }
  /********************************************************************************************
   * animation
   ********************************************************************************************/
  /*** panel ***/
  .load-view__body__panel__icon .box {
    animation: rotate360 3s linear 0s infinite; }
  .load-view__body__panel__icon_type_1 {
    animation: fadein 0.8s ease 0s forwards, load-view__show-wait-icon__tablet 0.8s ease 0s forwards; }
    .load-view__body__panel__icon_type_1 .icon {
      animation: load-view__scale-wait-icon__tablet 1s ease 0s forwards; }
  .load-view__body__panel__icon_type_2 {
    animation: fadein 0.8s ease 0.3s forwards, load-view__show-wait-icon__tablet 0.8s ease 0.3s forwards; }
    .load-view__body__panel__icon_type_2 .icon {
      animation: load-view__scale-wait-icon__tablet 1s ease 0.3s forwards; }
  .load-view__body__panel__icon_type_3 {
    animation: fadein 0.8s ease 0.6s forwards, load-view__show-wait-icon__tablet 0.8s ease 0.6s forwards; }
    .load-view__body__panel__icon_type_3 .icon {
      animation: load-view__scale-wait-icon__tablet 1s ease 0.6s forwards; }
  .load-view__body__panel__icon_type_4 {
    animation: fadein 0.8s ease 0.9s forwards, load-view__show-wait-icon__tablet 0.8s ease 0.9s forwards; }
    .load-view__body__panel__icon_type_4 .icon {
      animation: load-view__scale-wait-icon__tablet 1s ease 0.9s forwards; }
  .load-view[data-state="start"] {
    /*** close ***/
    /*** info ***/
    /*** poster ***/ }
    .load-view[data-state="start"] .load-view__body__close .curtain:nth-child(1) {
      animation: load-view__show-curtain-1__tablet 0.5s ease 6s forwards; }
      .load-view[data-state="start"] .load-view__body__close .curtain:nth-child(1)::after {
        animation: load-view__show-curtain-inner-1__tablet 1.5s ease 6.2s forwards; }
    .load-view[data-state="start"] .load-view__body__close .curtain:nth-child(2) {
      animation: load-view__show-curtain-2__tablet 0.5s ease 6s forwards; }
      .load-view[data-state="start"] .load-view__body__close .curtain:nth-child(2)::after {
        animation: load-view__show-curtain-inner-2__tablet 1.5s ease 6.2s forwards; }
    .load-view[data-state="start"] .load-view__body__close .message {
      animation: load-view__show-message__tablet 5s ease-out 6.7s forwards; }
    .load-view[data-state="start"] .load-view__body__close::before {
      animation: load-view__close-1 0.6s ease 7.2s forwards; }
    .load-view[data-state="start"] .load-view__body__close::after {
      animation: load-view__close-2 0.6s ease 7.2s forwards; }
    .load-view[data-state="start"] .load-view__body__info .allow:nth-child(1) {
      animation: slide-right 0.4s ease 3.5s forwards; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(1) .sd {
        animation: fadein 0.1s ease 5.1s forwards, load-view__sway-sd__tablet 0.8s ease-in-out 5.1s alternate infinite; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(1) .text {
        animation: fadein 0.1s ease 5.1s forwards, load-view__sway-illust__tablet 0.8s ease-in-out 5.1s alternate infinite; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(1) .line::after {
        animation: load-view__show-line-1__tablet 0.7s ease 4s forwards, load-view__hidden-line-1__tablet 0.8s ease 4.7s forwards; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(1) .paint-ball {
        animation: load-view__move-paint-ball-2__tablet 0.7s ease 4s forwards; }
    .load-view[data-state="start"] .load-view__body__info .allow:nth-child(2) {
      animation: slide-right 0.4s ease 3.6s forwards; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(2) .text {
        animation: fadein 0.1s ease 5.2s forwards, load-view__sway-illust__tablet 0.8s ease-in-out 5.2s alternate infinite; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(2) .sd {
        animation: fadein 0.1s ease 5.2s forwards, load-view__sway-sd__tablet 0.8s ease-in-out 5.2s alternate infinite; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(2) .line::after {
        animation: load-view__show-line-2__tablet 0.7s ease 4.1s forwards, load-view__hidden-line-2__tablet 0.8s ease 4.8s forwards; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(2) .paint-ball {
        animation: load-view__move-paint-ball-1__tablet 0.7s ease 4.1s forwards; }
    .load-view[data-state="start"] .load-view__body__info .allow:nth-child(3) {
      animation: slide-right 0.4s ease 3.7s forwards; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(3) .text {
        animation: fadein 0.1s ease 5.3s forwards, load-view__sway-illust__tablet 0.8s ease-in-out 5.3s alternate infinite; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(3) .sd {
        animation: fadein 0.1s ease 5.3s forwards, load-view__sway-sd__tablet 0.8s ease-in-out 5.3s alternate infinite; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(3) .line::after {
        animation: load-view__show-line-1__tablet 0.7s ease 4.2s forwards, load-view__hidden-line-1__tablet 0.8s ease 4.9s forwards; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(3) .paint-ball {
        animation: load-view__move-paint-ball-2__tablet 0.7s ease 4.2s forwards; }
    .load-view[data-state="start"] .load-view__body__info .allow:nth-child(4) {
      animation: slide-right 0.4s ease 3.8s forwards; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(4) .text {
        animation: fadein 0.1s ease 5.4s forwards, load-view__sway-illust__tablet 0.8s ease-in-out 5.4s alternate infinite; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(4) .sd {
        animation: fadein 0.1s ease 5.4s forwards, load-view__sway-sd__tablet 0.8s ease-in-out 5.4s alternate infinite; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(4) .line::after {
        animation: load-view__show-line-2__tablet 0.7s ease 4.3s forwards, load-view__hidden-line-2__tablet 0.8s ease 5s forwards; }
      .load-view[data-state="start"] .load-view__body__info .allow:nth-child(4) .paint-ball {
        animation: load-view__move-paint-ball-1__tablet 0.7s ease 4.3s forwards; }
    .load-view[data-state="start"] .load-view__body__poster .paint-ball {
      animation: load-view__move-paint-ball__tablet 1s ease 2.6s forwards; }
    .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(1) {
      animation: load-view__show-poster__tablet 0.5s ease 0s forwards; }
      .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(1) .ball {
        animation: load-view__fall-ball__tablet 0.6s ease 0.6s forwards; }
        .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(1) .ball::after {
          animation: load-view__scale-ball__tablet 0.7s ease 1.2s forwards; }
      .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(1) .illust {
        animation: fadein 0.1s ease 1.45s forwards, load-view__rotate-illust__tablet 0.7s ease 2.6s forwards, fadeout 0.35s ease 2.95s forwards; }
        .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(1) .illust::after {
          animation: load-view__sway-illust__tablet 0.8s ease-in-out 1.2s alternate infinite; }
    .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(2) {
      animation: load-view__show-poster__tablet 0.5s ease 0.2s forwards; }
      .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(2) .ball {
        animation: load-view__fall-ball__tablet 0.6s ease 0.8s forwards; }
        .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(2) .ball::after {
          animation: load-view__scale-ball__tablet 0.7s ease 1.4s forwards; }
      .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(2) .illust {
        animation: fadein 0.1s ease 1.65s forwards, load-view__rotate-illust__tablet 0.7s ease 2.8s forwards, fadeout 0.35s ease 3.15s forwards; }
        .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(2) .illust::after {
          animation: load-view__sway-illust__tablet 0.8s ease-in-out 1.2s alternate infinite; }
    .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(3) {
      animation: load-view__show-poster__tablet 0.5s ease 0.4s forwards; }
      .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(3) .ball {
        animation: load-view__fall-ball__tablet 0.6s ease 1s forwards; }
        .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(3) .ball::after {
          animation: load-view__scale-ball__tablet 0.7s ease 1.6s forwards; }
      .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(3) .illust {
        animation: fadein 0.1s ease 1.85s forwards, load-view__rotate-illust__tablet 0.7s ease 3s forwards, fadeout 0.35s ease 3.35s forwards; }
        .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(3) .illust::after {
          animation: load-view__sway-illust__tablet 0.8s ease-in-out 1.2s alternate infinite; }
    .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(4) {
      animation: load-view__show-poster__tablet 0.5s ease 0.6s forwards; }
      .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(4) .ball {
        animation: load-view__fall-ball__tablet 0.6s ease 1.2s forwards; }
        .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(4) .ball::after {
          animation: load-view__scale-ball__tablet 0.7s ease 1.8s forwards; }
      .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(4) .illust {
        animation: fadein 0.1s ease 2.1s forwards, load-view__rotate-illust__tablet 0.7s ease 3.2s forwards, fadeout 0.35s ease 3.55s forwards; }
        .load-view[data-state="start"] .load-view__body__poster .poster:nth-child(4) .illust::after {
          animation: load-view__sway-illust__tablet 0.8s ease-in-out 1.2s alternate infinite; } }

@media screen and (min-width: 601px) and (max-width: 960px) {
  .memories-box {
    margin-top: 50px;
    padding-bottom: 50px; }
    .memories-box a {
      position: relative;
      display: block;
      width: 80%;
      margin: 0 auto;
      margin-bottom: 40px;
      background-color: #817487;
      overflow: hidden;
      padding: 5px;
      box-sizing: border-box;
      transition: all 0.35s ease 0s; }
      .memories-box a img {
        width: 100%;
        display: block; }
      .memories-box a .title {
        font-size: 18px;
        color: #b9aeda;
        padding: 10px 5px;
        box-sizing: border-box;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis; }
      .memories-box a .date {
        font-size: 14px;
        color: #ccc;
        text-align: right;
        display: block;
        padding: 5px;
        box-sizing: border-box; }
    .memories-box a:hover {
      background-color: #C2617E; } }

@media screen and (min-width: 601px) and (max-width: 960px) {
  .page-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #C2617E;
    transform-origin: right top;
    transform: rotate(90deg);
    overflow: hidden;
    z-index: 1002; }
  /*** bg ***/
  .page-box__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .page-box__bg div {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform-origin: right top;
      transform: rotate(90deg); }
    .page-box__bg div:nth-child(1) {
      background-color: #E5B8BD; }
    .page-box__bg div:nth-child(2) {
      background-color: #b9aeda; }
      .page-box__bg div:nth-child(2)::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-size: 15px;
        background-image: url(../images/bg.png);
        opacity: 0.4; }
  /*** content ***/
  .page-box__content {
    position: absolute;
    top: 20px;
    left: 20px;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    border: solid 10px #C2617E;
    box-sizing: border-box;
    background-color: #b9aeda;
    border-radius: 15px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6) inset;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    transition: all 0.35s ease 0s; }
    .page-box__content .page-title {
      position: relative;
      margin: 50px auto;
      width: 500px;
      height: 45px; }
      .page-box__content .page-title div {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%; }
      .page-box__content .page-title div:nth-child(1) {
        width: 100%;
        background-color: #E4D6CE; }
      .page-box__content .page-title div:nth-child(2) {
        width: calc(100% - 15px);
        background-color: #817487; }
      .page-box__content .page-title div:nth-child(3) {
        width: calc(100% - 30px);
        background-color: #E5B8BD; }
      .page-box__content .page-title div:nth-child(4) {
        width: calc(100% - 45px);
        background-color: #C2617E; }
      .page-box__content .page-title h2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 45px;
        font-size: 20px;
        color: #fff;
        text-align: center;
        line-height: 45px; }
  /*** close-btn ***/
  .page-box__close-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 100px;
    height: 100px;
    display: block;
    transform: translate(calc(100% + 20px), calc(-100% + -20px));
    z-index: 5; }
    .page-box__close-btn section {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
      border-radius: 3px;
      transition: all 0.35s ease 0s; }
    .page-box__close-btn section:nth-child(1) {
      background-color: #C2617E;
      transform: rotate(0deg); }
    .page-box__close-btn section:nth-child(2) {
      background-color: #b9aeda; }
      .page-box__close-btn section:nth-child(2)::before, .page-box__close-btn section:nth-child(2)::after {
        content: "";
        display: block;
        position: absolute;
        top: 49px;
        left: 20px;
        width: 60px;
        height: 1px;
        border-top: dashed 2px #4A3F55;
        box-sizing: border-box;
        opacity: 0.7; }
      .page-box__close-btn section:nth-child(2)::before {
        transform: rotate(45deg); }
      .page-box__close-btn section:nth-child(2)::after {
        transform: rotate(-45deg); }
  .page-box__close-btn:hover section:nth-child(1) {
    background-color: #4A3F55; }
  .page-box__close-btn:hover section:nth-child(2) {
    background-color: #eee; }
  .page-box__close-btn:hover ~ .page-box__content {
    border-color: #4A3F55; }
  .page-box[data-state="true"] {
    animation: page-box__show 0.35s ease 0s forwards;
    /*** bg ***/
    /*** content ***/
    /*** close-btn ***/ }
    .page-box[data-state="true"] .page-box__bg div:nth-child(1) {
      animation: page-box__show 0.35s ease 0.1s forwards; }
    .page-box[data-state="true"] .page-box__bg div:nth-child(2) {
      animation: page-box__show 0.35s ease 0.2s forwards; }
    .page-box[data-state="true"] .page-box__content {
      animation: page-box__show-content 0.6s ease 0.55s forwards; }
    .page-box[data-state="true"] .page-box__close-btn {
      animation: page-box__show-close-btn 0.6s ease 0.9s forwards; }
      .page-box[data-state="true"] .page-box__close-btn section:nth-child(1) {
        animation: page-box__rotate-close-btn 0.6s ease 0.9s forwards; }
  .page-box[data-state="false"] {
    transform: rotate(0deg);
    animation: page-box__hidden 0.35s ease-in-out 0.2s forwards;
    /*** bg ***/
    /*** content ***/ }
    .page-box[data-state="false"] .page-box__bg div {
      transform: rotate(0deg); }
    .page-box[data-state="false"] .page-box__bg div:nth-child(1) {
      animation: page-box__hidden 0.35s ease-in-out 0.1s forwards; }
    .page-box[data-state="false"] .page-box__bg div:nth-child(2) {
      animation: page-box__hidden 0.35s ease-in-out 0s forwards; }
    .page-box[data-state="false"] .page-box__content,
    .page-box[data-state="false"] .page-box__close-btn {
      animation: fadeout 0.2s ease 0s forwards; } }

@media screen and (min-width: 601px) and (max-width: 960px) {
  .product-box {
    margin-top: 50px; }
    .product-box .sub-title {
      position: relative;
      width: 100%;
      height: 50px;
      font-size: 26px;
      color: #817487;
      line-height: 50px;
      text-align: center;
      margin: 0 auto;
      margin-bottom: 20px; }
      .product-box .sub-title:before, .product-box .sub-title::after {
        position: absolute;
        content: "";
        display: block;
        width: 70%;
        height: 1px;
        background-color: #817487;
        opacity: 0.6; }
      .product-box .sub-title::before {
        top: 0;
        left: 0; }
      .product-box .sub-title::after {
        bottom: 0;
        right: 0; }
    .product-box section {
      margin-bottom: 50px; }
      .product-box section a {
        position: relative;
        display: block;
        width: 80%;
        background-color: #fff;
        box-shadow: 0 0 5px #999;
        margin: 0 auto;
        margin-bottom: 40px;
        overflow: hidden;
        padding: 5px;
        box-sizing: border-box;
        transition: all 0.35s ease 0s; }
        .product-box section a .name {
          font-size: 22px;
          color: #4A3F55;
          padding: 5px;
          box-sizing: border-box; }
        .product-box section a .description {
          font-size: 16px;
          padding: 15px 10px;
          box-sizing: border-box;
          color: #817487; }
        .product-box section a .date {
          display: block;
          font-size: 14px;
          text-align: right;
          padding: 5px;
          box-sizing: border-box;
          color: #817487; }
        .product-box section a img {
          width: 100%; }
      .product-box section a:hover {
        opacity: 0.6; }
      .product-box section::after {
        content: "";
        display: block;
        clear: both; } }

@media screen and (min-width: 601px) and (max-width: 960px) {
  /*** body ***/
  .profile-page__body {
    width: 600px;
    margin: 0 auto; }
    .profile-page__body .icon {
      position: relative;
      width: 150px;
      height: 150px;
      margin: 0 auto;
      border: solid 5px #4A3F55;
      background-color: #4A3F55;
      border-radius: 50%;
      box-sizing: border-box; }
      .profile-page__body .icon:after {
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-image: url(../images/calling/icons/gab.png);
        background-size: cover;
        background-position: center; }
      .profile-page__body .icon div {
        position: absolute;
        background-color: #4A3F55; }
      .profile-page__body .icon div:nth-child(1) {
        width: 25px;
        height: 100px;
        left: 0;
        bottom: -5px;
        border-radius: 20px; }
      .profile-page__body .icon div:nth-child(2) {
        width: 10px;
        height: 80px;
        left: 40px;
        bottom: -10px;
        border-radius: 4px; }
      .profile-page__body .icon div:nth-child(3) {
        width: 18px;
        height: 80px;
        left: calc(50% - 6px);
        bottom: -50px;
        border-radius: 10px; }
      .profile-page__body .icon div:nth-child(4) {
        width: 12px;
        height: 80px;
        right: 0px;
        bottom: -3px;
        border-radius: 8px; }
    .profile-page__body .name {
      margin: 0 auto;
      margin-top: 60px;
      width: 150px;
      height: 40px;
      border-left: solid 15px #4A3F55;
      background-color: #fff;
      padding: 0 5px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
      font-size: 25px;
      color: #555;
      font-weight: bold;
      text-align: center;
      line-height: 40px;
      transform: rotate(-5deg); }
    .profile-page__body .info {
      margin: 0 auto;
      margin-top: 40px;
      padding-bottom: 40px; }
      .profile-page__body .info .info-li {
        position: relative;
        width: 400px;
        padding: 0 10px;
        margin: 0 auto;
        margin-bottom: 15px;
        border-bottom: solid 1px #E5B8BD; }
        .profile-page__body .info .info-li span {
          font-size: 14px;
          color: #817487;
          margin-right: 5px; }
        .profile-page__body .info .info-li::after {
          position: absolute;
          left: -15px;
          bottom: -5px;
          content: "";
          display: block;
          width: 10px;
          height: 10px;
          background-color: #E5B8BD;
          border-radius: 50%; } }

@media screen and (min-width: 601px) and (max-width: 960px) {
  .top-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #b9aeda;
    overflow: hidden;
    z-index: 995; }
    .top-page::after {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background-image: url(../images/bg.png);
      background-size: 15px;
      opacity: 0.5; }
    .top-page::before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #b9aeda;
      opacity: 0.4;
      transition: all 0.3s ease 0s; }
  .top-page[data-color="pink"]:before {
    background-color: #C2617E; }
  .top-page[data-color="light-pink"]:before {
    background-color: #E5B8BD; }
  .top-page[data-color="purple"]:before {
    background-color: #4A3F55; }
  .top-page[data-color="light-purple"]:before {
    background-color: #817487; }
  /*** ring ***/
  .top-page__ring {
    position: absolute;
    top: calc(50% - 325px);
    left: calc(50% - 325px);
    width: 650px;
    height: 650px;
    border-radius: 50%;
    opacity: 0.6;
    z-index: 1; }
    .top-page__ring .wrap {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
      .top-page__ring .wrap .inner {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
        .top-page__ring .wrap .inner div {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%; }
          .top-page__ring .wrap .inner div::after {
            position: absolute;
            top: 0px;
            left: calc(50% - 50px);
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-top: solid 120px transparent;
            border-left: solid 45px transparent;
            border-right: solid 45px transparent;
            opacity: 0; }
        .top-page__ring .wrap .inner div:nth-child(1n):after {
          border-top-color: #C2617E; }
        .top-page__ring .wrap .inner div:nth-child(2n):after {
          border-top-color: #E5B8BD; }
        .top-page__ring .wrap .inner div:nth-child(3n):after {
          border-top-color: #4A3F55; }
        .top-page__ring .wrap .inner div:nth-child(4n):after {
          border-top-color: #817487; }
        .top-page__ring .wrap .inner div:nth-child(5n):after {
          border-top-color: #E4D6CE; }
        .top-page__ring .wrap .inner div:nth-child(1) {
          transform: rotate(0deg); }
        .top-page__ring .wrap .inner div:nth-child(2) {
          transform: rotate(10deg); }
        .top-page__ring .wrap .inner div:nth-child(3) {
          transform: rotate(30deg); }
        .top-page__ring .wrap .inner div:nth-child(4) {
          transform: rotate(40deg); }
        .top-page__ring .wrap .inner div:nth-child(5) {
          transform: rotate(60deg); }
        .top-page__ring .wrap .inner div:nth-child(6) {
          transform: rotate(70deg); }
        .top-page__ring .wrap .inner div:nth-child(7) {
          transform: rotate(90deg); }
        .top-page__ring .wrap .inner div:nth-child(8) {
          transform: rotate(100deg); }
        .top-page__ring .wrap .inner div:nth-child(9) {
          transform: rotate(120deg); }
        .top-page__ring .wrap .inner div:nth-child(10) {
          transform: rotate(130deg); }
        .top-page__ring .wrap .inner div:nth-child(11) {
          transform: rotate(150deg); }
        .top-page__ring .wrap .inner div:nth-child(12) {
          transform: rotate(160deg); }
        .top-page__ring .wrap .inner div:nth-child(13) {
          transform: rotate(180deg); }
        .top-page__ring .wrap .inner div:nth-child(14) {
          transform: rotate(190deg); }
        .top-page__ring .wrap .inner div:nth-child(15) {
          transform: rotate(210deg); }
        .top-page__ring .wrap .inner div:nth-child(16) {
          transform: rotate(220deg); }
        .top-page__ring .wrap .inner div:nth-child(17) {
          transform: rotate(240deg); }
        .top-page__ring .wrap .inner div:nth-child(18) {
          transform: rotate(250deg); }
        .top-page__ring .wrap .inner div:nth-child(19) {
          transform: rotate(270deg); }
        .top-page__ring .wrap .inner div:nth-child(20) {
          transform: rotate(280deg); }
        .top-page__ring .wrap .inner div:nth-child(21) {
          transform: rotate(300deg); }
        .top-page__ring .wrap .inner div:nth-child(22) {
          transform: rotate(310deg); }
        .top-page__ring .wrap .inner div:nth-child(23) {
          transform: rotate(330deg); }
        .top-page__ring .wrap .inner div:nth-child(24) {
          transform: rotate(340deg); }
  /*** main-illust ***/
  .top-page__main-illust {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(./kokomi.png);
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 1; }
  /*** frame ***/
  .top-page__frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; }
    .top-page__frame section {
      position: absolute;
      width: 45px;
      height: 45px; }
      .top-page__frame section div {
        position: absolute;
        background-color: #4A3F55;
        border-radius: 3px;
        opacity: 0.8;
        transform: scale(0); }
      .top-page__frame section div:nth-child(1),
      .top-page__frame section div:nth-child(3) {
        width: 12px;
        height: 12px; }
      .top-page__frame section div:nth-child(2) {
        width: 25px;
        height: 25px; }
    .top-page__frame section:nth-child(1) {
      top: 20px;
      left: 20px; }
      .top-page__frame section:nth-child(1) div:nth-child(1) {
        top: 0;
        right: 0; }
      .top-page__frame section:nth-child(1) div:nth-child(2) {
        top: 0;
        left: 0; }
      .top-page__frame section:nth-child(1) div:nth-child(3) {
        bottom: 0;
        left: 0; }
    .top-page__frame section:nth-child(2) {
      top: 20px;
      right: 20px; }
      .top-page__frame section:nth-child(2) div:nth-child(1) {
        top: 0;
        left: 0; }
      .top-page__frame section:nth-child(2) div:nth-child(2) {
        top: 0;
        right: 0; }
      .top-page__frame section:nth-child(2) div:nth-child(3) {
        bottom: 0;
        right: 0; }
    .top-page__frame section:nth-child(3) {
      bottom: 20px;
      left: 20px; }
      .top-page__frame section:nth-child(3) div:nth-child(1) {
        top: 0;
        left: 0; }
      .top-page__frame section:nth-child(3) div:nth-child(2) {
        bottom: 0;
        left: 0; }
      .top-page__frame section:nth-child(3) div:nth-child(3) {
        bottom: 0;
        right: 0; }
    .top-page__frame section:nth-child(4) {
      bottom: 20px;
      right: 20px; }
      .top-page__frame section:nth-child(4) div:nth-child(1) {
        top: 0;
        right: 0; }
      .top-page__frame section:nth-child(4) div:nth-child(2) {
        bottom: 0;
        right: 0; }
      .top-page__frame section:nth-child(4) div:nth-child(3) {
        bottom: 0;
        left: 0; }
  /*** globa-nav ***/
  .top-page__global-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; }
    .top-page__global-nav .nav-box {
      position: absolute;
      top: calc(50% - 25px);
      left: calc(50% - 100px);
      width: 200px;
      height: 50px;
      opacity: 0; }
      .top-page__global-nav .nav-box section {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
        .top-page__global-nav .nav-box section a {
          display: block;
          position: absolute;
          top: 0;
          width: 200px;
          height: 50px;
          border-radius: 30px;
          font-size: 17px;
          font-weight: bold;
          color: transparent;
          text-align: center;
          line-height: 50px;
          overflow: hidden;
          transition: all 0.3s ease 0s; }
          .top-page__global-nav .nav-box section a::before, .top-page__global-nav .nav-box section a::after {
            content: "";
            display: block;
            position: absolute;
            width: 60%;
            height: 1px;
            background-color: #fff;
            opacity: 0.6;
            transition: all 0.5s ease 0s; }
          .top-page__global-nav .nav-box section a::before {
            top: 5px;
            left: 5px;
            transform: translateX(calc(-100% + -5px)); }
          .top-page__global-nav .nav-box section a::after {
            bottom: 5px;
            right: 5px;
            transform: translateX(calc(100% + 5px)); }
        .top-page__global-nav .nav-box section a:hover {
          transform: scale(1.2);
          border-radius: 0; }
          .top-page__global-nav .nav-box section a:hover::before, .top-page__global-nav .nav-box section a:hover::after {
            transform: translateX(0); }
        .top-page__global-nav .nav-box section a:nth-child(1) {
          left: 0; }
        .top-page__global-nav .nav-box section a:nth-child(2) {
          right: 0; }
      .top-page__global-nav .nav-box section:nth-child(1) a:nth-child(1) {
        background-color: #C2617E; }
      .top-page__global-nav .nav-box section:nth-child(1) a:nth-child(2) {
        background-color: #E5B8BD; }
      .top-page__global-nav .nav-box section:nth-child(2) a:nth-child(1) {
        background-color: #817487; }
      .top-page__global-nav .nav-box section:nth-child(2) a:nth-child(2) {
        background-color: #4A3F55; }
    .top-page__global-nav .message {
      position: absolute;
      left: calc(50% - 125px);
      top: calc(50% - 25px);
      width: 0px;
      height: 50px;
      border-radius: 30px;
      background-color: #4A3F55;
      box-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
      overflow: hidden; }
      .top-page__global-nav .message h3 {
        width: 250px;
        height: 50px;
        font-size: 15px;
        color: rgba(255, 255, 255, 0.8);
        text-align: center;
        line-height: 50px;
        transform: translateY(100%); }
  /*** logo ***/
  .top-page__logo {
    position: absolute;
    top: calc(50% - 50px);
    left: 0;
    width: 100%;
    height: 100px;
    opacity: 0;
    z-index: 1; }
    .top-page__logo img {
      position: absolute;
      left: calc(50% - 150px);
      top: 0;
      display: block;
      height: 100px; }
  /*** sns ***/
  .top-page__sns {
    position: absolute;
    bottom: 0;
    left: calc(50% - 125px);
    width: 250px;
    height: 50px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    overflow: hidden;
    transform: translateY(calc(100% + 5px));
    z-index: 1; }
    .top-page__sns a {
      float: left;
      position: relative;
      display: block;
      width: 50px;
      height: 50px; }
      .top-page__sns a::before {
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        transform: translateY(100%);
        transition: all 0.25s ease 0s; }
      .top-page__sns a i {
        position: absolute;
        top: 0;
        left: 0;
        width: 50px;
        height: 50px;
        font-size: 25px;
        line-height: 50px;
        text-align: center;
        color: #817487; }
    .top-page__sns a:hover:before {
      transform: translateY(0); }
    .top-page__sns a:nth-child(1)::before {
      background-color: #A8CBC6; }
    .top-page__sns a:nth-child(2)::before {
      background-color: #E4D6CE; }
    .top-page__sns a:nth-child(3) i {
      font-size: 22px; }
    .top-page__sns a:nth-child(3)::before {
      background-color: #F5E0A0; }
    .top-page__sns a:nth-child(4)::before {
      background-color: #E5B8BD; }
    .top-page__sns a:nth-child(5)::before {
      background-color: #C7B3D6; }
  /*** share-btn ***/
  .top-page__share-btn {
    position: absolute;
    right: 0;
    top: calc(50% - 25px);
    width: 140px;
    height: 50px;
    background-color: #A8CBC6;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    transform: translateX(calc(100% + 5px));
    overflow: hidden;
    z-index: 1; }
    .top-page__share-btn a {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
      font-size: 13px;
      text-align: center;
      line-height: 50px;
      color: #4A3F55;
      background-color: #A8CBC6; }
      .top-page__share-btn a i {
        font-size: 20px;
        margin-right: 5px; }
  .top-page[data-state="start"] {
    /*** ring ***/
    /*** main-illust ***/
    /*** frame ***/
    /*** logo ***/
    /*** global-nav ***/
    /*** sns ***/
    /*** share-btn ***/ }
    .top-page[data-state="start"] .top-page__ring .inner {
      animation: top-page__rotate-ring__sp 150s linear 0s infinite; }
      .top-page[data-state="start"] .top-page__ring .inner div:nth-child(1n):after {
        animation: top-page__show-ring 0.4s ease 0s forwards; }
      .top-page[data-state="start"] .top-page__ring .inner div:nth-child(2n):after {
        animation: top-page__show-ring 0.4s ease 0.05s forwards; }
    .top-page[data-state="start"] .top-page__main-illust {
      animation: scale0-1 0.4s ease 0.2s forwards, fadein 0.4s ease 0.2s forwards; }
    .top-page[data-state="start"] .top-page__frame section div:nth-child(2) {
      animation: scale0-1 0.4s ease 0.6s forwards; }
    .top-page[data-state="start"] .top-page__frame section div:nth-child(1),
    .top-page[data-state="start"] .top-page__frame section div:nth-child(3) {
      animation: scale0-1 0.4s ease 0.7s forwards; }
    .top-page[data-state="start"] .top-page__logo {
      animation: fadein 2s ease 2.7s forwards; }
    .top-page[data-state="start"] .top-page__global-nav .nav-box {
      animation: fadein 0.1s ease 1.4s forwards; }
      .top-page[data-state="start"] .top-page__global-nav .nav-box section:nth-child(1) {
        animation: top-page__scale-nav 0.3s ease 1.4s forwards, top-page__rotate-nav-1 0.5s ease 1.7s forwards; }
        .top-page[data-state="start"] .top-page__global-nav .nav-box section:nth-child(1) a:nth-child(1) {
          animation: top-page__show-nav-text 0.7s ease 2.2s forwards; }
        .top-page[data-state="start"] .top-page__global-nav .nav-box section:nth-child(1) a:nth-child(2) {
          animation: top-page__show-nav-text 0.7s ease 2.5s forwards; }
      .top-page[data-state="start"] .top-page__global-nav .nav-box section:nth-child(2) {
        animation: top-page__scale-nav 0.3s ease 1.4s forwards, top-page__rotate-nav-2 0.5s ease 1.7s forwards; }
        .top-page[data-state="start"] .top-page__global-nav .nav-box section:nth-child(2) a:nth-child(1) {
          animation: top-page__show-nav-text 0.7s ease 2.3s forwards; }
        .top-page[data-state="start"] .top-page__global-nav .nav-box section:nth-child(2) a:nth-child(2) {
          animation: top-page__show-nav-text 0.7s ease 2.4s forwards; }
    .top-page[data-state="start"] .top-page__global-nav .message {
      animation: top-page__show-message 0.4s ease 1s forwards, top-page__hidden-message 0.5s ease 2s forwards; }
      .top-page[data-state="start"] .top-page__global-nav .message h3 {
        animation: slide-top 0.5s ease 1.2s forwards, fadeout 0.1s ease 2s forwards; }
    .top-page[data-state="start"] .top-page__sns {
      animation: slide-top 0.4s ease 3s forwards; }
    .top-page[data-state="start"] .top-page__share-btn {
      animation: slide-left 0.4s ease 3s forwards; } }

@keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeout {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@keyframes rotate360 {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }

@keyframes slide-right {
  from {
    transform: translateX(-100%); }
  to {
    transform: translateX(0%); } }

@keyframes slide-left {
  from {
    transform: translateX(100%); }
  to {
    transform: translateX(0%); } }

@keyframes slide-top {
  from {
    transform: translateY(100%); }
  to {
    transform: translateY(0%); } }

@keyframes slide-bottom {
  from {
    transform: translateY(-100%); }
  to {
    transform: translateY(0%); } }

@keyframes scale0-1 {
  from {
    transform: scale(0); }
  to {
    transform: scale(1); } }

@keyframes scale0-0dot5 {
  from {
    transform: scale(0); }
  to {
    transform: scale(0.5); } }

@keyframes scale1-0dot5 {
  from {
    transform: scale(1); }
  to {
    transform: scale(0.5); } }

@keyframes scale10 {
  from {
    transform: scale(1); }
  to {
    transform: scale(10); } }

@keyframes scale1dot5 {
  from {
    transform: scale(1); }
  to {
    transform: scale(1.5); } }

@keyframes width0-100 {
  from {
    width: 0; }
  to {
    width: 100%; } }

@keyframes height0-100 {
  from {
    height: 0; }
  to {
    height: 100%; } }

@keyframes calling__show-btn-1 {
  from {
    transform: rotate(180deg) scale(2);
    opacity: 0; }
  to {
    transform: rotate(180deg) scale(1);
    opacity: 1; } }

@keyframes calling__show-btn-2 {
  from {
    transform: rotate(45deg) scale(2);
    opacity: 0; }
  to {
    transform: rotate(45deg) scale(1);
    opacity: 1; } }

@keyframes calling__touch-btn {
  from {
    border-width: 40px;
    opacity: 0;
    transform: scale(0.6); }
  to {
    border-width: 0px;
    opacity: 0.8;
    transform: scale(3); } }

@keyframes calling__press-btn {
  from {
    transform: scale(1) rotate(45deg);
    opacity: 1; }
  to {
    transform: scale(0.6) rotate(45deg);
    opacity: 0.6; } }

@keyframes calling__icon-frame-1 {
  from {
    transform: scale(0) translate(-5px, 5px);
    opacity: 0; }
  to {
    transform: scale(1) translate(0);
    opacity: 1; } }

@keyframes calling__icon-frame-2 {
  from {
    transform: scale(0) translate(5px, -5px);
    opacity: 0; }
  to {
    transform: scale(1) translate(0);
    opacity: 1; } }

@keyframes calling__show-controls-bar {
  from {
    width: 0;
    left: 50%; }
  to {
    width: 500px;
    left: calc(50% - 250px); } }

@keyframes calling__show-live-view {
  from {
    width: 0;
    margin-left: 50%;
    margin-top: 10px; }
  to {
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-top: 10px; } }

@keyframes calling__char-name-frame-1 {
  0% {
    opacity: 0;
    transform: translate(4px, 4px); }
  10% {
    opacity: 1; }
  100% {
    opacity: 1;
    transform: translate(0px, 0px); } }

@keyframes calling__char-name-frame-2 {
  0% {
    opacity: 0;
    transform: translate(-4px, -4px); }
  10% {
    opacity: 1; }
  100% {
    opacity: 1;
    transform: translate(0px, 0px); } }

@keyframes calling__show-say {
  0% {
    transform: scale(8);
    opacity: 0; }
  70% {
    transform: scale(1);
    opacity: 1; }
  85% {
    transform: scale(1.1);
    opacity: 1; }
  100% {
    transform: scale(1);
    opacity: 1; } }

@keyframes calling__end {
  from {
    transform: translateY(-100%); }
  to {
    transform: translateY(0%); } }

@keyframes end-animation__show-paint {
  0% {
    opacity: 0;
    transform: scale(8);
    border-radius: 50%; }
  40% {
    border-radius: 50%; }
  100% {
    opacity: 1;
    transform: scale(1);
    border-radius: 0%; } }

@keyframes end-animation__end-roll-color-1 {
  from {
    background-color: #A8CBC6; }
  to {
    background-color: #C2617E; } }

@keyframes end-animation__end-roll-color-2 {
  from {
    background-color: #C2617E; }
  to {
    background-color: #817487; } }

@keyframes end-animation__end-roll-color-3 {
  from {
    background-color: #817487; }
  to {
    background-color: #4A3F55; } }

@keyframes end-animation__end-roll-color-4 {
  from {
    background-color: #4A3F55; }
  to {
    background-color: #E5B8BD; } }

@keyframes end-animation__move-text-ball-1 {
  from {
    transform: translateX(800px) rotate(0deg);
    opacity: 0; }
  to {
    transform: translateX(0px) rotate(-15deg);
    opacity: 1; } }

@keyframes end-animation__jump-text-ball-1 {
  0% {
    transform: translateY(300px) scale(0); }
  50% {
    transform: translateY(-150px) scale(0.5); }
  100% {
    transform: translateY(0px) scale(1); } }

@keyframes end-animation__move-text-ball-2 {
  from {
    transform: translateY(800px) rotate(0deg);
    opacity: 0; }
  to {
    transform: translateY(0px) rotate(15deg);
    opacity: 1; } }

@keyframes end-animation__jump-text-ball-2 {
  0% {
    transform: translateX(-300px) scale(0); }
  50% {
    transform: translateX(150px) scale(0.5); }
  100% {
    transform: translateX(0px) scale(1); } }

@keyframes end-animation__move-text-ball-3 {
  from {
    transform: translateX(800px) rotate(0deg);
    opacity: 0; }
  to {
    transform: translateX(0px) rotate(-15deg);
    opacity: 1; } }

@keyframes end-animation__jump-text-ball-3 {
  0% {
    transform: translateY(-300px) scale(0); }
  50% {
    transform: translateY(150px) scale(0.5); }
  100% {
    transform: translateY(0px) scale(1); } }

@keyframes end-animation__down-window {
  0% {
    transform: translateY(-100%); }
  60% {
    transform: translateY(0%); }
  80% {
    transform: translateY(-30px); }
  100% {
    transform: translateY(0%); } }

@keyframes end-animation__end {
  0% {
    transform: rotateZ(-20deg) rotateX(0deg);
    opacity: 1; }
  50% {
    opacity: 1; }
  100% {
    transform: rotateZ(-20deg) rotateX(90deg);
    opacity: 0; } }

@keyframes gab-animation__fall-frame {
  0% {
    top: -100px; }
  50% {
    top: calc(50% + 180px);
    transform: scale(1); }
  60% {
    top: calc(50% + 180px);
    transform: scale(1.4, 0.8); }
  70% {
    transform: scale(1); }
  100% {
    top: calc(50% - 50px); } }

@keyframes gab-animation__scale-frame {
  0% {
    transform: scale(1);
    opacity: 1; }
  25% {
    transform: scale(3, 2);
    opacity: 0.5; }
  50% {
    transform: scale(1);
    opacity: 1; }
  75% {
    transform: scale(2, 3);
    opacity: 0.5; }
  100% {
    transform: scale(1);
    opacity: 1; } }

@keyframes gab-animation__open-frame {
  from {
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    width: 100px;
    height: 100px;
    border-radius: 50%; }
  to {
    top: 40px;
    left: 40px;
    width: calc(100% - 80px);
    height: calc(100% - 80px);
    border-radius: 0%; } }

@keyframes gab-animation__move-y1-area-1 {
  from {
    transform: translate(0, 0); }
  to {
    transform: translate(0, -50px); } }

@keyframes gab-animation__move-y2-area-1 {
  from {
    transform: translate(calc(-100% + 5px), -50px); }
  to {
    transform: translate(calc(-100% + 5px), 100%); } }

@keyframes gab-animation__move-y1-area-2 {
  from {
    transform: translate(0, 0); }
  to {
    transform: translate(0, 50px); } }

@keyframes gab-animation__move-y2-area-2 {
  from {
    transform: translate(calc(100% - 5px), 50px); }
  to {
    transform: translate(calc(100% - 5px), -100%); } }

@keyframes gab-animation__move-x-area-1 {
  from {
    transform: translate(0, -50px); }
  to {
    transform: translate(calc(-100% + 5px), -50px); } }

@keyframes gab-animation__move-x-area-2 {
  from {
    transform: translate(0, 50px); }
  to {
    transform: translate(calc(100% - 5px), 50px); } }

@keyframes gab-animation__move-y-area-bg-1 {
  from {
    transform: translate(calc(-100% + 5px), -100%); }
  to {
    transform: translate(calc(-100% + 5px), 0%); } }

@keyframes gab-animation__move-y-area-bg-2 {
  from {
    transform: translate(calc(100% - 5px), 100%); }
  to {
    transform: translate(calc(100% - 5px), 0%); } }

@keyframes gab-animation__move-x-area-bg-1 {
  from {
    transform: translate(calc(-100% + 5px), 0%); }
  to {
    transform: translate(0, 0%); } }

@keyframes gab-animation__move-x-area-bg-2 {
  from {
    transform: translate(calc(100% - 5px), 0%); }
  to {
    transform: translate(0, 0%); } }

@keyframes gab-animation__radius-frame {
  from {
    border-radius: 0; }
  to {
    border-radius: 8px; } }

@keyframes gab-animation__show-bg {
  from {
    opacity: 0; }
  to {
    opacity: 0.2; } }

@keyframes gab-animation__x-paint-ball-1 {
  from {
    transform: translateX(0); }
  to {
    transform: translateX(calc(100% + 50px)); } }

@keyframes gab-animation__y-paint-ball-1 {
  0% {
    transform: translateY(0); }
  50% {
    transform: translateY(-300px); }
  100% {
    transform: translateY(0px); } }

@keyframes gab-animation__x-paint-ball-2 {
  from {
    transform: translateX(0); }
  to {
    transform: translateX(calc(-100% + -50px)); } }

@keyframes gab-animation__y-paint-ball-2 {
  0% {
    transform: translateY(0); }
  50% {
    transform: translateY(-300px); }
  100% {
    transform: translateY(0px); } }

@keyframes gab-animation__rotate-illust {
  0% {
    transform: rotateY(90deg); }
  50% {
    transform: rotateY(-2deg); }
  100% {
    transform: rotateY(0deg); } }

@keyframes gab-animation__fall-ball-effect {
  from {
    top: -60px; }
  to {
    top: calc(100% - 250px); } }

@keyframes gab-animation__scale-ball-effect {
  from {
    transform: scale(1);
    opacity: 1; }
  to {
    transform: scale(4);
    opacity: 0; } }

@keyframes gab-animation__attack-gab {
  from {
    transform: translateY(0);
    opacity: 1; }
  to {
    transform: translateY(8px);
    opacity: 0.8; } }

@keyframes gab-animation__down-gab {
  from {
    transform-origin: center bottom;
    transform: rotateX(0deg);
    opacity: 1; }
  to {
    transform-origin: center bottom;
    transform: rotateX(90deg);
    opacity: 0; } }

@keyframes gab-animation__message {
  from {
    transform: scale(3) rotate(35deg);
    opacity: 0; }
  to {
    transform: scale(0.7) rotate(-8deg);
    opacity: 1; } }

@keyframes gab-animation__fall-paint-1 {
  0% {
    top: -100px;
    transform: scaleX(1); }
  60% {
    transform: scaleX(1); }
  100% {
    top: calc(50% - 70px);
    transform: scaleX(1.2); } }

@keyframes gab-animation__fall-paint-2 {
  0% {
    top: -100px;
    transform: scaleX(1); }
  60% {
    transform: scaleX(1); }
  100% {
    top: calc(50% - 30px);
    transform: scaleX(1.2); } }

@keyframes gab-animation__show-clock-frame {
  from {
    transform: scale(0); }
  to {
    transform: scale(1); } }

@keyframes gab-animation__show-clock-hand {
  from {
    height: 0;
    top: 50%; }
  to {
    height: 100%;
    top: 0%; } }

@keyframes gab-animation__reverse-clock-hand {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(-30deg); } }

@keyframes gab-animation__rotate-clock-hand {
  from {
    transform: rotate(-30deg); }
  to {
    transform: rotate(360deg); } }

@keyframes gab-animation__scale-clock-hand {
  from {
    width: 10px;
    left: calc(50% - 5px); }
  to {
    width: 100%;
    left: 0; } }

@keyframes gab-animation__camera {
  from {
    perspective: 0px; }
  to {
    perspective: 400px; } }

@keyframes gab-animation__show-layer {
  0% {
    transform: translateY(-100%); }
  70% {
    transform: translateY(0%); }
  85% {
    transform: translateY(-10px); }
  100% {
    transform: translateY(0%); } }

@keyframes gab-animation__effect {
  from {
    transform: translateY(60px); }
  to {
    transform: translateY(-50px); } }

@keyframes gab-animation__scale-ball {
  from {
    transform: scale(0); }
  to {
    transform: scale(1.4); } }

@keyframes gab-animation__move-end-block-1 {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1; }
  90% {
    opacity: 1; }
  100% {
    transform: translateY(-200px) scale(0.4);
    opacity: 0; } }

@keyframes gab-animation__move-end-block-2 {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1; }
  90% {
    opacity: 1; }
  100% {
    transform: translateY(200px) scale(0.4);
    opacity: 0; } }

@keyframes gab-animation__show-end-block {
  from {
    height: 0;
    top: 50%; }
  to {
    height: 400px;
    top: calc(50% - 200px); } }

@keyframes gab-animation__close {
  from {
    width: 400px;
    height: 400px;
    top: calc(50% - 200px);
    left: calc(50% - 200px);
    border-radius: 50%; }
  to {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 0%; } }

@keyframes load-view__show-wait-icon {
  from {
    transform: translateX(-150px) scale(0.8); }
  to {
    transform: translateX(0px) scale(1.3); } }

@keyframes load-view__scale-wait-icon {
  from {
    transform: scale(5) rotate(0deg); }
  to {
    transform: scale(1) rotate(360deg); } }

@keyframes load-view__show-poster {
  from {
    transform: translateY(calc(-100% + -200px)); }
  to {
    transform: translateY(0); } }

@keyframes load-view__fall-ball {
  0% {
    transform: translateY(calc(-50% + -25px)); }
  40% {
    transform: translateY(calc(50% - 25px)); }
  100% {
    transform: translateY(0); } }

@keyframes load-view__scale-ball {
  0% {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    top: calc(50% - 25px);
    left: calc(50% - 25px); }
  50% {
    width: calc(100% - 10px);
    height: 650px;
    border-radius: 0%;
    top: calc(50% - 325px);
    left: 5px; }
  100% {
    width: calc(100% - 10px);
    height: 0;
    border-radius: 0%;
    top: calc(50% - 325px);
    left: 5px; } }

@keyframes load-view__sway-illust {
  from {
    transform: rotate(-2deg); }
  to {
    transform: rotate(2deg); } }

@keyframes load-view__rotate-illust {
  from {
    transform: rotateY(0deg); }
  to {
    transform: rotateY(480deg); } }

@keyframes load-view__move-paint-ball {
  from {
    left: -60px;
    transform: rotate(0deg); }
  to {
    left: calc(100% + 60px);
    transform: rotate(1440deg); } }

@keyframes load-view__move-paint-ball-1 {
  from {
    left: -60px;
    transform: rotate(0deg); }
  to {
    left: calc(100% + 60px);
    transform: rotate(5760deg); } }

@keyframes load-view__move-paint-ball-2 {
  from {
    left: calc(100% + 60px);
    transform: rotate(0deg); }
  to {
    left: -60px;
    transform: rotate(-5760deg); } }

@keyframes load-view__show-line-1 {
  from {
    transform: translate(calc(100% + 15px), calc(100% - 5px)); }
  to {
    transform: translate(-15px, calc(100% - 5px)); } }

@keyframes load-view__show-line-2 {
  from {
    transform: translate(calc(-100% + -15px), calc(100% - 5px)); }
  to {
    transform: translate(-15px, calc(100% - 5px)); } }

@keyframes load-view__hidden-line-1 {
  0% {
    transform: translate(-15px, calc(100% - 5px)); }
  50% {
    transform: translate(-15px, 0); }
  100% {
    transform: translate(calc(100% + 15px), 0); } }

@keyframes load-view__hidden-line-2 {
  0% {
    transform: translate(-15px, calc(100% - 5px)); }
  50% {
    transform: translate(-15px, 0); }
  100% {
    transform: translate(calc(-100% + -15px), 0); } }

@keyframes load-view__sway-sd {
  from {
    transform: rotate(-5deg); }
  to {
    transform: rotate(5deg); } }

@keyframes load-view__show-curtain-1 {
  from {
    transform: translateY(-100%); }
  to {
    transform: translateY(0%); } }

@keyframes load-view__show-curtain-2 {
  from {
    transform: translateY(100%); }
  to {
    transform: translateY(0%); } }

@keyframes load-view__show-curtain-inner-1 {
  0% {
    transform: translateY(0); }
  30% {
    transform: translateY(calc(100% - 15px)); }
  80% {
    transform: translateY(calc(100% - 60px)); }
  100% {
    transform: translateY(100%); } }

@keyframes load-view__show-curtain-inner-2 {
  0% {
    transform: translateY(0); }
  30% {
    transform: translateY(calc(-100% + 15px)); }
  80% {
    transform: translateY(calc(-100% + 60px)); }
  100% {
    transform: translateY(-100%); } }

@keyframes load-view__show-message {
  0% {
    transform: translateX(-200px);
    opacity: 0; }
  8% {
    transform: translateX(-80px);
    opacity: 1; }
  100% {
    transform: translateX(0px);
    opacity: 1; } }

@keyframes load-view__close-1 {
  from {
    transform: translateY(-100%); }
  to {
    transform: translateY(0%); } }

@keyframes load-view__close-2 {
  from {
    transform: translateY(100%); }
  to {
    transform: translateY(0%); } }

@keyframes page-box__show {
  from {
    transform: rotate(90deg); }
  to {
    transform: rotate(0deg); } }

@keyframes page-box__hidden {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(-90deg); } }

@keyframes page-box__show-close-btn {
  from {
    transform: translate(calc(100% + 20px), calc(-100% + -20px)); }
  to {
    transform: translate(0, 0); } }

@keyframes page-box__rotate-close-btn {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(15deg); } }

@keyframes page-box__show-content {
  from {
    transform: scale(0.9);
    opacity: 0; }
  to {
    transform: scale(1);
    opacity: 1; } }

@keyframes top-page__show-ring {
  from {
    transform: translateY(200px);
    opacity: 0; }
  to {
    transform: translateY(0px);
    opacity: 1; } }

@keyframes top-page__rotate-ring {
  from {
    transform: rotate(0deg) scale(1.2); }
  to {
    transform: rotate(360deg) scale(1.2); } }

@keyframes top-page__show-message {
  from {
    width: 0; }
  to {
    width: 250px; } }

@keyframes top-page__hidden-message {
  from {
    width: 250px;
    left: calc(50% - 125px); }
  to {
    width: 0px;
    left: 50%; } }

@keyframes top-page__scale-nav {
  from {
    width: 200px;
    left: calc(50% - 100px); }
  to {
    width: 700px;
    left: calc(50% - 350px); } }

@keyframes top-page__rotate-nav-1 {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(20deg); } }

@keyframes top-page__rotate-nav-2 {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(-20deg); } }

@keyframes top-page__show-nav-text {
  from {
    color: transparent; }
  to {
    color: #fff; } }

@keyframes gab-animation__fall-frame {
  0% {
    top: -100px; }
  50% {
    top: calc(50% + 180px);
    transform: scale(1); }
  60% {
    top: calc(50% + 180px);
    transform: scale(1.4, 0.8); }
  70% {
    transform: scale(1); }
  100% {
    top: calc(50% - 50px); } }

@keyframes gab-animation__scale-frame {
  0% {
    transform: scale(1);
    opacity: 1; }
  25% {
    transform: scale(3, 2);
    opacity: 0.5; }
  50% {
    transform: scale(1);
    opacity: 1; }
  75% {
    transform: scale(2, 3);
    opacity: 0.5; }
  100% {
    transform: scale(1);
    opacity: 1; } }

@keyframes gab-animation__open-frame {
  from {
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    width: 100px;
    height: 100px;
    border-radius: 50%; }
  to {
    top: 40px;
    left: 40px;
    width: calc(100% - 80px);
    height: calc(100% - 80px);
    border-radius: 0%; } }

@keyframes gab-animation__move-y1-area-1 {
  from {
    transform: translate(0, 0); }
  to {
    transform: translate(0, -50px); } }

@keyframes gab-animation__move-y2-area-1 {
  from {
    transform: translate(calc(-100% + 5px), -50px); }
  to {
    transform: translate(calc(-100% + 5px), 100%); } }

@keyframes gab-animation__move-y1-area-2 {
  from {
    transform: translate(0, 0); }
  to {
    transform: translate(0, 50px); } }

@keyframes gab-animation__move-y2-area-2 {
  from {
    transform: translate(calc(100% - 5px), 50px); }
  to {
    transform: translate(calc(100% - 5px), -100%); } }

@keyframes gab-animation__move-x-area-1 {
  from {
    transform: translate(0, -50px); }
  to {
    transform: translate(calc(-100% + 5px), -50px); } }

@keyframes gab-animation__move-x-area-2 {
  from {
    transform: translate(0, 50px); }
  to {
    transform: translate(calc(100% - 5px), 50px); } }

@keyframes gab-animation__move-y-area-bg-1 {
  from {
    transform: translate(calc(-100% + 5px), -100%); }
  to {
    transform: translate(calc(-100% + 5px), 0%); } }

@keyframes gab-animation__move-y-area-bg-2 {
  from {
    transform: translate(calc(100% - 5px), 100%); }
  to {
    transform: translate(calc(100% - 5px), 0%); } }

@keyframes gab-animation__move-x-area-bg-1 {
  from {
    transform: translate(calc(-100% + 5px), 0%); }
  to {
    transform: translate(0, 0%); } }

@keyframes gab-animation__move-x-area-bg-2 {
  from {
    transform: translate(calc(100% - 5px), 0%); }
  to {
    transform: translate(0, 0%); } }

@keyframes gab-animation__radius-frame {
  from {
    border-radius: 0; }
  to {
    border-radius: 8px; } }

@keyframes gab-animation__show-bg {
  from {
    opacity: 0; }
  to {
    opacity: 0.2; } }

@keyframes gab-animation__x-paint-ball-1 {
  from {
    transform: translateX(0); }
  to {
    transform: translateX(calc(100% + 50px)); } }

@keyframes gab-animation__y-paint-ball-1 {
  0% {
    transform: translateY(0); }
  50% {
    transform: translateY(-300px); }
  100% {
    transform: translateY(0px); } }

@keyframes gab-animation__x-paint-ball-2 {
  from {
    transform: translateX(0); }
  to {
    transform: translateX(calc(-100% + -50px)); } }

@keyframes gab-animation__y-paint-ball-2 {
  0% {
    transform: translateY(0); }
  50% {
    transform: translateY(-300px); }
  100% {
    transform: translateY(0px); } }

@keyframes gab-animation__rotate-illust {
  0% {
    transform: rotateY(90deg); }
  50% {
    transform: rotateY(-2deg); }
  100% {
    transform: rotateY(0deg); } }

@keyframes gab-animation__fall-ball-effect {
  from {
    top: -60px; }
  to {
    top: calc(100% - 250px); } }

@keyframes gab-animation__scale-ball-effect {
  from {
    transform: scale(1);
    opacity: 1; }
  to {
    transform: scale(4);
    opacity: 0; } }

@keyframes gab-animation__attack-gab {
  from {
    transform: translateY(0);
    opacity: 1; }
  to {
    transform: translateY(8px);
    opacity: 0.8; } }

@keyframes gab-animation__down-gab {
  from {
    transform-origin: center bottom;
    transform: rotateX(0deg);
    opacity: 1; }
  to {
    transform-origin: center bottom;
    transform: rotateX(90deg);
    opacity: 0; } }

@keyframes gab-animation__message {
  from {
    transform: scale(3) rotate(35deg);
    opacity: 0; }
  to {
    transform: scale(0.7) rotate(-8deg);
    opacity: 1; } }

@keyframes gab-animation__fall-paint-1 {
  0% {
    top: -100px;
    transform: scaleX(1); }
  60% {
    transform: scaleX(1); }
  100% {
    top: calc(50% - 70px);
    transform: scaleX(1.2); } }

@keyframes gab-animation__fall-paint-2 {
  0% {
    top: -100px;
    transform: scaleX(1); }
  60% {
    transform: scaleX(1); }
  100% {
    top: calc(50% - 30px);
    transform: scaleX(1.2); } }

@keyframes gab-animation__show-clock-frame {
  from {
    transform: scale(0); }
  to {
    transform: scale(1); } }

@keyframes gab-animation__show-clock-hand {
  from {
    height: 0;
    top: 50%; }
  to {
    height: 100%;
    top: 0%; } }

@keyframes gab-animation__reverse-clock-hand {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(-30deg); } }

@keyframes gab-animation__rotate-clock-hand {
  from {
    transform: rotate(-30deg); }
  to {
    transform: rotate(360deg); } }

@keyframes gab-animation__scale-clock-hand {
  from {
    width: 10px;
    left: calc(50% - 5px); }
  to {
    width: 100%;
    left: 0; } }

@keyframes gab-animation__camera {
  from {
    perspective: 20px; }
  to {
    perspective: 400px; } }

@keyframes gab-animation__show-layer {
  0% {
    transform: translateY(-100%); }
  70% {
    transform: translateY(0%); }
  85% {
    transform: translateY(-10px); }
  100% {
    transform: translateY(0%); } }

@keyframes gab-animation__effect {
  from {
    transform: translateY(60px); }
  to {
    transform: translateY(-50px); } }

@keyframes gab-animation__scale-ball {
  from {
    transform: scale(0); }
  to {
    transform: scale(1.4); } }

@keyframes gab-animation__move-end-block-1__sp {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1; }
  90% {
    opacity: 1; }
  100% {
    transform: translateY(-100px) scale(0.4);
    opacity: 0; } }

@keyframes gab-animation__move-end-block-2__sp {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1; }
  90% {
    opacity: 1; }
  100% {
    transform: translateY(100px) scale(0.4);
    opacity: 0; } }

@keyframes gab-animation__show-end-block__sp {
  from {
    height: 0;
    top: 50%; }
  to {
    height: 200px;
    top: calc(50% - 100px); } }

@keyframes gab-animation__close__sp {
  from {
    width: 200px;
    height: 200px;
    top: calc(50% - 100px);
    left: calc(50% - 100px);
    border-radius: 50%; }
  to {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 0%; } }

@keyframes load-view__show-wait-icon__sp {
  from {
    transform: translateX(-150px) scale(0.8); }
  to {
    transform: translateX(0px) scale(1.3); } }

@keyframes load-view__scale-wait-icon__sp {
  from {
    transform: scale(5) rotate(0deg); }
  to {
    transform: scale(1) rotate(360deg); } }

@keyframes load-view__show-poster__sp {
  from {
    transform: translateY(calc(-100% + -200px)); }
  to {
    transform: translateY(0); } }

@keyframes load-view__fall-ball__sp {
  0% {
    transform: translateY(calc(-50% + -25px)); }
  40% {
    transform: translateY(calc(50% - 25px)); }
  100% {
    transform: translateY(0); } }

@keyframes load-view__scale-ball__sp {
  0% {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    top: calc(50% - 25px);
    left: calc(50% - 25px); }
  50% {
    width: calc(100% - 10px);
    height: 171px;
    border-radius: 0%;
    top: calc(50% - 85.5px);
    left: 5px; }
  100% {
    width: calc(100% - 10px);
    height: 0;
    border-radius: 0%;
    top: calc(50% - 85.5px);
    left: 5px; } }

@keyframes load-view__sway-illust__sp {
  from {
    transform: rotate(-2deg); }
  to {
    transform: rotate(2deg); } }

@keyframes load-view__rotate-illust__sp {
  from {
    transform: rotateY(0deg); }
  to {
    transform: rotateY(480deg); } }

@keyframes load-view__move-paint-ball__sp {
  from {
    left: -30px;
    transform: rotate(0deg); }
  to {
    left: calc(100% + 30px);
    transform: rotate(1440deg); } }

@keyframes load-view__move-paint-ball-1__sp {
  from {
    left: -30px;
    transform: rotate(0deg); }
  to {
    left: calc(100% + 30px);
    transform: rotate(5760deg); } }

@keyframes load-view__move-paint-ball-2__sp {
  from {
    left: calc(100% + 30px);
    transform: rotate(0deg); }
  to {
    left: -30px;
    transform: rotate(-5760deg); } }

@keyframes load-view__show-line-1__sp {
  from {
    transform: translate(calc(100% + 15px), calc(100% - 2px)); }
  to {
    transform: translate(-15px, calc(100% - 2px)); } }

@keyframes load-view__show-line-2__sp {
  from {
    transform: translate(calc(-100% + -15px), calc(100% - 2px)); }
  to {
    transform: translate(-15px, calc(100% - 2px)); } }

@keyframes load-view__hidden-line-1__sp {
  0% {
    transform: translate(-15px, calc(100% - 2px)); }
  50% {
    transform: translate(-15px, 0); }
  100% {
    transform: translate(calc(100% + 15px), 0); } }

@keyframes load-view__hidden-line-2__sp {
  0% {
    transform: translate(-15px, calc(100% - 2px)); }
  50% {
    transform: translate(-15px, 0); }
  100% {
    transform: translate(calc(-100% + -15px), 0); } }

@keyframes load-view__sway-sd__sp {
  from {
    transform: rotate(-5deg); }
  to {
    transform: rotate(5deg); } }

@keyframes load-view__show-curtain-1__sp {
  from {
    transform: translateY(-100%); }
  to {
    transform: translateY(0%); } }

@keyframes load-view__show-curtain-2__sp {
  from {
    transform: translateY(100%); }
  to {
    transform: translateY(0%); } }

@keyframes load-view__show-curtain-inner-1__sp {
  0% {
    transform: translateY(0); }
  30% {
    transform: translateY(calc(100% - 15px)); }
  80% {
    transform: translateY(calc(100% - 60px)); }
  100% {
    transform: translateY(100%); } }

@keyframes load-view__show-curtain-inner-2__sp {
  0% {
    transform: translateY(0); }
  30% {
    transform: translateY(calc(-100% + 15px)); }
  80% {
    transform: translateY(calc(-100% + 60px)); }
  100% {
    transform: translateY(-100%); } }

@keyframes load-view__show-message__sp {
  0% {
    transform: translateX(-200px);
    opacity: 0; }
  8% {
    transform: translateX(-80px);
    opacity: 1; }
  100% {
    transform: translateX(0px);
    opacity: 1; } }

@keyframes load-view__close-1__sp {
  from {
    transform: translateY(-100%); }
  to {
    transform: translateY(0%); } }

@keyframes load-view__close-2__sp {
  from {
    transform: translateY(100%); }
  to {
    transform: translateY(0%); } }

@keyframes top-page__rotate-ring__sp {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }

@keyframes top-page__show-message__sp {
  from {
    width: 0; }
  to {
    width: 180px; } }

@keyframes top-page__hidden-message__sp {
  from {
    width: 180px;
    left: calc(50% - 90px); }
  to {
    width: 0px;
    left: 50%; } }

@keyframes top-page__scale-nav__sp {
  from {
    width: 100px;
    left: calc(50% - 50px); }
  to {
    width: 360px;
    left: calc(50% - 180px); } }

@keyframes top-page__rotate-nav-1__sp {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(25deg); } }

@keyframes top-page__rotate-nav-2__sp {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(-25deg); } }

@keyframes gab-animation__fall-frame {
  0% {
    top: -100px; }
  50% {
    top: calc(50% + 180px);
    transform: scale(1); }
  60% {
    top: calc(50% + 180px);
    transform: scale(1.4, 0.8); }
  70% {
    transform: scale(1); }
  100% {
    top: calc(50% - 50px); } }

@keyframes gab-animation__scale-frame {
  0% {
    transform: scale(1);
    opacity: 1; }
  25% {
    transform: scale(3, 2);
    opacity: 0.5; }
  50% {
    transform: scale(1);
    opacity: 1; }
  75% {
    transform: scale(2, 3);
    opacity: 0.5; }
  100% {
    transform: scale(1);
    opacity: 1; } }

@keyframes gab-animation__open-frame {
  from {
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    width: 100px;
    height: 100px;
    border-radius: 50%; }
  to {
    top: 40px;
    left: 40px;
    width: calc(100% - 80px);
    height: calc(100% - 80px);
    border-radius: 0%; } }

@keyframes gab-animation__move-y1-area-1 {
  from {
    transform: translate(0, 0); }
  to {
    transform: translate(0, -50px); } }

@keyframes gab-animation__move-y2-area-1 {
  from {
    transform: translate(calc(-100% + 5px), -50px); }
  to {
    transform: translate(calc(-100% + 5px), 100%); } }

@keyframes gab-animation__move-y1-area-2 {
  from {
    transform: translate(0, 0); }
  to {
    transform: translate(0, 50px); } }

@keyframes gab-animation__move-y2-area-2 {
  from {
    transform: translate(calc(100% - 5px), 50px); }
  to {
    transform: translate(calc(100% - 5px), -100%); } }

@keyframes gab-animation__move-x-area-1 {
  from {
    transform: translate(0, -50px); }
  to {
    transform: translate(calc(-100% + 5px), -50px); } }

@keyframes gab-animation__move-x-area-2 {
  from {
    transform: translate(0, 50px); }
  to {
    transform: translate(calc(100% - 5px), 50px); } }

@keyframes gab-animation__move-y-area-bg-1 {
  from {
    transform: translate(calc(-100% + 5px), -100%); }
  to {
    transform: translate(calc(-100% + 5px), 0%); } }

@keyframes gab-animation__move-y-area-bg-2 {
  from {
    transform: translate(calc(100% - 5px), 100%); }
  to {
    transform: translate(calc(100% - 5px), 0%); } }

@keyframes gab-animation__move-x-area-bg-1 {
  from {
    transform: translate(calc(-100% + 5px), 0%); }
  to {
    transform: translate(0, 0%); } }

@keyframes gab-animation__move-x-area-bg-2 {
  from {
    transform: translate(calc(100% - 5px), 0%); }
  to {
    transform: translate(0, 0%); } }

@keyframes gab-animation__radius-frame {
  from {
    border-radius: 0; }
  to {
    border-radius: 8px; } }

@keyframes gab-animation__show-bg {
  from {
    opacity: 0; }
  to {
    opacity: 0.2; } }

@keyframes gab-animation__x-paint-ball-1 {
  from {
    transform: translateX(0); }
  to {
    transform: translateX(calc(100% + 50px)); } }

@keyframes gab-animation__y-paint-ball-1 {
  0% {
    transform: translateY(0); }
  50% {
    transform: translateY(-300px); }
  100% {
    transform: translateY(0px); } }

@keyframes gab-animation__x-paint-ball-2 {
  from {
    transform: translateX(0); }
  to {
    transform: translateX(calc(-100% + -50px)); } }

@keyframes gab-animation__y-paint-ball-2 {
  0% {
    transform: translateY(0); }
  50% {
    transform: translateY(-300px); }
  100% {
    transform: translateY(0px); } }

@keyframes gab-animation__rotate-illust {
  0% {
    transform: rotateY(90deg); }
  50% {
    transform: rotateY(-2deg); }
  100% {
    transform: rotateY(0deg); } }

@keyframes gab-animation__fall-ball-effect {
  from {
    top: -60px; }
  to {
    top: calc(100% - 250px); } }

@keyframes gab-animation__scale-ball-effect {
  from {
    transform: scale(1);
    opacity: 1; }
  to {
    transform: scale(4);
    opacity: 0; } }

@keyframes gab-animation__attack-gab {
  from {
    transform: translateY(0);
    opacity: 1; }
  to {
    transform: translateY(8px);
    opacity: 0.8; } }

@keyframes gab-animation__down-gab {
  from {
    transform-origin: center bottom;
    transform: rotateX(0deg);
    opacity: 1; }
  to {
    transform-origin: center bottom;
    transform: rotateX(90deg);
    opacity: 0; } }

@keyframes gab-animation__message {
  from {
    transform: scale(3) rotate(35deg);
    opacity: 0; }
  to {
    transform: scale(0.7) rotate(-8deg);
    opacity: 1; } }

@keyframes gab-animation__fall-paint-1 {
  0% {
    top: -100px;
    transform: scaleX(1); }
  60% {
    transform: scaleX(1); }
  100% {
    top: calc(50% - 70px);
    transform: scaleX(1.2); } }

@keyframes gab-animation__fall-paint-2 {
  0% {
    top: -100px;
    transform: scaleX(1); }
  60% {
    transform: scaleX(1); }
  100% {
    top: calc(50% - 30px);
    transform: scaleX(1.2); } }

@keyframes gab-animation__show-clock-frame {
  from {
    transform: scale(0); }
  to {
    transform: scale(1); } }

@keyframes gab-animation__show-clock-hand {
  from {
    height: 0;
    top: 50%; }
  to {
    height: 100%;
    top: 0%; } }

@keyframes gab-animation__reverse-clock-hand {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(-30deg); } }

@keyframes gab-animation__rotate-clock-hand {
  from {
    transform: rotate(-30deg); }
  to {
    transform: rotate(360deg); } }

@keyframes gab-animation__scale-clock-hand {
  from {
    width: 10px;
    left: calc(50% - 5px); }
  to {
    width: 100%;
    left: 0; } }

@keyframes gab-animation__camera {
  from {
    perspective: 20px; }
  to {
    perspective: 400px; } }

@keyframes gab-animation__show-layer {
  0% {
    transform: translateY(-100%); }
  70% {
    transform: translateY(0%); }
  85% {
    transform: translateY(-10px); }
  100% {
    transform: translateY(0%); } }

@keyframes gab-animation__effect {
  from {
    transform: translateY(60px); }
  to {
    transform: translateY(-50px); } }

@keyframes gab-animation__scale-ball {
  from {
    transform: scale(0); }
  to {
    transform: scale(1.4); } }

@keyframes gab-animation__move-end-block-1 {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1; }
  90% {
    opacity: 1; }
  100% {
    transform: translateY(-200px) scale(0.4);
    opacity: 0; } }

@keyframes gab-animation__move-end-block-2 {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1; }
  90% {
    opacity: 1; }
  100% {
    transform: translateY(200px) scale(0.4);
    opacity: 0; } }

@keyframes gab-animation__show-end-block {
  from {
    height: 0;
    top: 50%; }
  to {
    height: 400px;
    top: calc(50% - 200px); } }

@keyframes gab-animation__close {
  from {
    width: 400px;
    height: 400px;
    top: calc(50% - 200px);
    left: calc(50% - 200px);
    border-radius: 50%; }
  to {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 0%; } }

@keyframes load-view__show-wait-icon__tablet {
  from {
    transform: translateX(-150px) scale(0.8); }
  to {
    transform: translateX(0px) scale(1.3); } }

@keyframes load-view__scale-wait-icon__tablet {
  from {
    transform: scale(5) rotate(0deg); }
  to {
    transform: scale(1) rotate(360deg); } }

@keyframes load-view__show-poster__tablet {
  from {
    transform: translateY(calc(-100% + -200px)); }
  to {
    transform: translateY(0); } }

@keyframes load-view__fall-ball__tablet {
  0% {
    transform: translateY(calc(-50% + -25px)); }
  40% {
    transform: translateY(calc(50% - 25px)); }
  100% {
    transform: translateY(0); } }

@keyframes load-view__scale-ball__tablet {
  0% {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    top: calc(50% - 25px);
    left: calc(50% - 25px); }
  50% {
    width: calc(100% - 10px);
    height: 322px;
    border-radius: 0%;
    top: calc(50% - 161px);
    left: 5px; }
  100% {
    width: calc(100% - 10px);
    height: 0;
    border-radius: 0%;
    top: calc(50% - 161px);
    left: 5px; } }

@keyframes load-view__sway-illust__tablet {
  from {
    transform: rotate(-2deg); }
  to {
    transform: rotate(2deg); } }

@keyframes load-view__rotate-illust__tablet {
  from {
    transform: rotateY(0deg); }
  to {
    transform: rotateY(480deg); } }

@keyframes load-view__move-paint-ball__tablet {
  from {
    left: -60px;
    transform: rotate(0deg); }
  to {
    left: calc(100% + 60px);
    transform: rotate(1440deg); } }

@keyframes load-view__move-paint-ball-1__tablet {
  from {
    left: -60px;
    transform: rotate(0deg); }
  to {
    left: calc(100% + 60px);
    transform: rotate(5760deg); } }

@keyframes load-view__move-paint-ball-2__tablet {
  from {
    left: calc(100% + 60px);
    transform: rotate(0deg); }
  to {
    left: -60px;
    transform: rotate(-5760deg); } }

@keyframes load-view__show-line-1__tablet {
  from {
    transform: translate(calc(100% + 15px), calc(100% - 5px)); }
  to {
    transform: translate(-15px, calc(100% - 5px)); } }

@keyframes load-view__show-line-2__tablet {
  from {
    transform: translate(calc(-100% + -15px), calc(100% - 5px)); }
  to {
    transform: translate(-15px, calc(100% - 5px)); } }

@keyframes load-view__hidden-line-1__tablet {
  0% {
    transform: translate(-15px, calc(100% - 5px)); }
  50% {
    transform: translate(-15px, 0); }
  100% {
    transform: translate(calc(100% + 15px), 0); } }

@keyframes load-view__hidden-line-2__tablet {
  0% {
    transform: translate(-15px, calc(100% - 5px)); }
  50% {
    transform: translate(-15px, 0); }
  100% {
    transform: translate(calc(-100% + -15px), 0); } }

@keyframes load-view__sway-sd__tablet {
  from {
    transform: rotate(-5deg); }
  to {
    transform: rotate(5deg); } }

@keyframes load-view__show-curtain-1__tablet {
  from {
    transform: translateY(-100%); }
  to {
    transform: translateY(0%); } }

@keyframes load-view__show-curtain-2__tablet {
  from {
    transform: translateY(100%); }
  to {
    transform: translateY(0%); } }

@keyframes load-view__show-curtain-inner-1__tablet {
  0% {
    transform: translateY(0); }
  30% {
    transform: translateY(calc(100% - 15px)); }
  80% {
    transform: translateY(calc(100% - 60px)); }
  100% {
    transform: translateY(100%); } }

@keyframes load-view__show-curtain-inner-2__tablet {
  0% {
    transform: translateY(0); }
  30% {
    transform: translateY(calc(-100% + 15px)); }
  80% {
    transform: translateY(calc(-100% + 60px)); }
  100% {
    transform: translateY(-100%); } }

@keyframes load-view__show-message__tablet {
  0% {
    transform: translateX(-200px);
    opacity: 0; }
  8% {
    transform: translateX(-80px);
    opacity: 1; }
  100% {
    transform: translateX(0px);
    opacity: 1; } }

@keyframes load-view__close-1__tablet {
  from {
    transform: translateY(-100%); }
  to {
    transform: translateY(0%); } }

@keyframes load-view__close-2__tablet {
  from {
    transform: translateY(100%); }
  to {
    transform: translateY(0%); } }

@keyframes top-page__rotate-ring__sp {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }