@charset "utf-8";

/* **************************************************

  background
  
************************************************** */
@media screen and (max-width:767px) {
#background:before { margin: 0 0 -7.46667% 10.6667%; }
}

@media screen and (min-width:768px) {
#background:before { margin: 0 0 -135px 130px; }
}



/* **************************************************

  level
  
************************************************** */
#level {
  text-align: center;
  position: relative;
}
#level .inner { box-sizing: border-box; }
#level .title {
  font-size: 16px;
  line-height: 1;
  color: #fff;
}
#level .nav li {
  position: relative;
  opacity: 0;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
}
#level .nav li:after {
  background: url(../common/images/level_bg.png) no-repeat center center;
  background-size: 100% 100%;
  display: block;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
#level .nav li a {
  display: block;
  position: relative;
  z-index: 1;
}
#level .nav li img {
  opacity: 0;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
#level .guide .title,
#level .guide .balloon { position: absolute; }
#level .guide .balloon {
  z-index: 10;
  opacity: 0;
  -webkit-transform: translate(-20%,50%);
  transform: translate(-20%,50%);
}

@media screen and (min-width:375px) {
#level .title { font-size: 20px; }
}

@media screen and (max-width:767px) {
#level .inner {
  height: auto !important;
  padding: 28px 0 66.66666666666667%;
}
#level .nav { margin-top: 7.733333333333333%; }
#level .nav li {
  width: 48%;
  margin: 3.333333333333333% auto 0;
}
#level .guide .title {
  width: 57.8667%;
  margin-bottom: -10.26666666666667%;
  left: -2.4%;
  bottom: 0;
}
#level .guide .balloon {
  width: 42.66666666666667%;
  margin-bottom: 34.4%;
  right: 3.466666666666667%;
  bottom: 0;
}
}

@media screen and (min-width:768px) {
#level .inner {
  max-width: 1000px;
  min-height: 500px !important;
  margin: 0 auto;
  padding: 60px 0 415px; 
  position: relative;
}
#level .title { font-size: 32px; }
#level .nav {
  width: 1000px;
  /*margin-top: 50px;*/
  position: absolute;
  left: 50%;
  top: 20.71428571428571%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
#level .nav ul { letter-spacing: -0.4em; }
#level .nav li {
  display: inline-block;
  letter-spacing: 0;
  vertical-align: top;
  width: 240px;
  margin-left: 44px;
}
#level .nav li:first-child { margin-left: 0; }
#level .guide .title {
  width: 338px;
  left: 182px;
  bottom: -133px;
}
#level .guide .balloon {
  width: 270px;
  right: 200px;
  bottom: 117px;
}
}

/*
@keyframes doctor {
0% {
  -webkit-transform: rotate(0);
  transform: rotate(0);
}
100% {
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
}
*/


/* ==============================
  is-complete
============================== */
html.is-complete #level .guide .balloon {
  opacity: 1;
  -webkit-transform: translate(0,0);
  transform: translate(0,0);
  -webkit-transition: -webkit-transform 1.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1s, opacity 0.5s ease-in-out 1s;
  transition: transform 1.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1s, opacity 0.5s ease-in-out 1s;
}
html.is-complete #level .nav li {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1s, opacity 0.5s ease-in-out 1s;
  transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1s, opacity 0.5s ease-in-out 1s;
}
html.is-complete #level .nav li:nth-child(2) {
  -webkit-transition-delay: 1.2s, 1.2s;
  transition-delay: 1.2s, 1.2s;
}
html.is-complete #level .nav li:nth-child(3) {
  -webkit-transition-delay: 1.4s, 1.4s;
  transition-delay: 1.4s, 1.4s;
}
html.is-complete #level .nav li:after {
	-webkit-animation: nav 0.75s ease-in-out infinite alternate both;
	animation: nav 0.75s ease-in-out infinite alternate both;
}
html.is-complete #level .nav li img {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) 1.5s, opacity 0.5s ease-in-out 1.5s;
  transition: transform 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) 1.5s, opacity 0.5s ease-in-out 1.5s;
}
html.is-complete #level .nav li:nth-child(2) img {
  -webkit-transition-delay: 1.7s, 1.7s;
  transition-delay: 1.7s, 1.7s;
}
html.is-complete #level .nav li:nth-child(3) img {
  -webkit-transition-delay: 1.9s, 1.9s;
  transition-delay: 1.9s, 1.9s;
}

@keyframes nav {
0% {
  -webkit-transform: scale(1);
  transform: scale(1);
}
100% {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}
}