@charset "UTF-8";
@-webkit-keyframes movebg {
  0% {
    background-position: 0 0; }
  100% {
    background-position: 400px 310px; } }
@-moz-keyframes movebg {
  0% {
    background-position: 0 0; }
  100% {
    background-position: 400px 310px; } }
@keyframes movebg {
  0% {
    background-position: 0 0; }
  100% {
    background-position: 400px 310px; } }
/*========= ローディング画面のためのCSS ===============*/
#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, #ffcce5 0%, #e0d9ff 50%, #b3e0df 100%);
  z-index: 9999999;
  color: #f964b2;
  /*font-family: 'Comfortaa', cursive;*/ }

#splash-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; }
  @media screen and (max-width: 749px) {
    #splash-logo {
      width: 16%;
      margin: 0 auto;
      font-size: 1.2rem; } }
  #splash-logo p {
    width: 60px;
    margin: 0 auto 10px; }
    @media screen and (max-width: 749px) {
      #splash-logo p {
        width: 100%; } }

/*========= 画面遷移のためのCSS ===============*/
/*画面遷移アニメーション*/
body {
  background: linear-gradient(to bottom right, #ffcce5 0%, #e0d9ff 50%, #b3e0df 100%);
  /*遷移アニメーションと同じ色を指定*/ }

body.appear {
  background: url("../img/main_bg.png") repeat #fff;
  -webkit-animation: movebg 5s linear infinite;
  -moz-animation: movebg 5s linear infinite;
  animation: movebg 5s linear infinite;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both; }
  @media screen and (max-width: 749px) {
    body.appear {
      background-size: contain; } }

.splashbg {
  display: none;
  content: "";
  position: fixed;
  transform: scale(100);
  background: linear-gradient(to bottom right, #ffcce5 0%, #e0d9ff 50%, #b3e0df 100%);
  /*伸びる背景色の設定*/
  z-index: 999;
  /*丸のスタートの形状*/
  top: calc(50% - 1rem);
  /*50%から円の半径を引いた値*/
  left: calc(50% - 1rem);
  /*50%から円の半径を引いた値*/
  width: 2rem;
  height: 2rem; }

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg {
  display: block;
  border-radius: 50%;
  animation-name: PageAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

@keyframes PageAnime {
  0% {
    /*丸のスタート位置と形状*/
    transform: scale(100); }
  100% {
    /*丸の終了位置と形状*/
    transform: scale(0);
    display: none;
    /*終了時は消える*/ } }
/*画面遷移の後現れるコンテンツ設定*/
#wrapper {
  opacity: 0;
  /*はじめは透過0に*/ }

/*bodyにappearクラスがついたら出現*/
body.appear #wrapper {
  animation-name: PageAnimeAppear;
  animation-duration: 1s;
  animation-delay: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes PageAnimeAppear {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-webkit-keyframes flash {
  0% {
    opacity: .4; }
  100% {
    opacity: 1; } }
@-moz-keyframes flash {
  0% {
    opacity: .4; }
  100% {
    opacity: 1; } }
@keyframes flash {
  0% {
    opacity: .4; }
  100% {
    opacity: 1; } }
figure a:hover img {
  opacity: 1;
  -webkit-animation: flash 1.5s;
  -moz-animation: flash 1.5s;
  animation: flash 1.5s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both; }

@keyframes float_a {
  0% {
    transform: translateY(0); }
  25% {
    transform: translateY(10px); }
  50% {
    transform: translateY(0); }
  75% {
    transform: translateY(10px); }
  100% {
    transform: translateY(0px); } }
@keyframes float_b {
  0% {
    transform: translateY(0); }
  25% {
    transform: translateY(-10px); }
  50% {
    transform: translateY(0); }
  75% {
    transform: translateY(-10px); }
  100% {
    transform: translateY(0px); } }
@keyframes zoomIn {
  0% {
    transform: scale(0); }
  100% {
    transform: scale(1); } }
@keyframes poyon {
  0% {
    transform: scale(1, 1) translate(0%, 0%); }
  15% {
    transform: scale(0.9, 0.9) translate(0%, 5%); }
  30% {
    transform: scale(1.3, 0.8) translate(0%, 10%); }
  50% {
    transform: scale(0.8, 1.3) translate(0%, -10%); }
  70% {
    transform: scale(1.1, 0.9) translate(0%, 5%); }
  100% {
    transform: scale(1, 1) translate(0%, 0%); } }