@charset "utf-8";

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

  sns
  
************************************************** */
#sns {
  font-size: 0;
  z-index: 10;
  position: absolute;
}
#sns dl { letter-spacing: -0.4em; }
#sns dl > * {
  display: inline-block;
  letter-spacing: 0;
  vertical-align: middle;
}
#sns dt { width: 45px; }
#sns dd {
  width: 30px;
  margin-left: 10px;
}

@media screen and (max-width:767px) {
#sns {
  top: 20px;
  right: 24px;
}
}

@media screen and (min-width:768px) {
#sns {
  top: 20px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
}



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

  container
  
************************************************** */
@media screen and (min-width:768px) {
#container:before,
#container:after {
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
}
#container:before {
  background: #3ebeef;
  left: 0;
}
#container:after {
  background: #140650;
  right: 0;
}
}



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

  background
  
************************************************** */
@media screen and (max-width:767px) {
#background {
  background: #3fbff0 url(../images/top/bg@sp.jpg) no-repeat center bottom;
  background-size: 100% auto;
}
#background:before { background: url(../common/images/bg_02@sp.png) no-repeat center bottom; }
}

@media screen and (min-width:768px) {
#background {
  background: url(../images/top/bg.png) no-repeat center center;
  background: -moz-linear-gradient(-45deg, rgba(62,190,239,1) 10%, rgba(61,147,205,1) 45%, rgba(60,103,171,1) 54%, rgba(40,55,126,1) 70%, rgba(20,6,80,1) 90%);
  background: -webkit-linear-gradient(-45deg, rgba(62,190,239,1) 10%,rgba(61,147,205,1) 45%,rgba(60,103,171,1) 54%,rgba(40,55,126,1) 70%,rgba(20,6,80,1) 90%);
  background: linear-gradient(120deg, rgba(62,190,239,1) 10%,rgba(61,147,205,1) 45%,rgba(60,103,171,1) 54%,rgba(40,55,126,1) 70%,rgba(20,6,80,1) 90%);
}
#background:before {
  background: url(../common/images/bg_02.png) no-repeat center bottom;
  margin-left: 53px;
}
}



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

  main
  
************************************************** */
#main {
  font-size: 0;
  position: relative;
  overflow: hidden;
}
#main .content { box-sizing: border-box; }
#main .content .title,
#main .content .balloon { position: absolute; }
#main .content .balloon {
  z-index: 1;
  opacity: 0;
  -webkit-transform: translate(-50%,50%);
  transform: translate(-50%,50%);
}
#main .content .balloon a { display: block; }

@media screen and (max-width:767px) {
#main .content { padding-top: 154.6666666666667%; }
#main .content .title {
  width: 120.5333333333333%;
  margin-bottom: -13.33333333333333%;
  left: -6.4%;
  bottom: 0;
}
#main .content .balloon {
  width: 41.6%;
  margin-bottom: -3.733333333333333%;
  left: 25.33333333333333%;
  bottom: 0;
}
}

@media screen and (min-width:768px) {
#main .inner {
  position: relative;
  z-index: 1;
}
#main .content {
  max-width: 1000px;
  margin: 0 auto;
  height: 600px;
  position: relative;
  z-index: 2;
}
#main .content .title {
  width: 632px;
  right: -12px;
  bottom: -190px;
}
#main .content .balloon {
  width: 216px;
  bottom: 66px;
  left: 228px;
}
}


/* ==============================
  is-complete
============================== */
html.is-complete #main .content .balloon {
  opacity: 1;
  -webkit-transform: translate(0,0);
  transform: translate(0,0);
  -webkit-transition: -webkit-transform 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 1s, opacity 0.5s ease-in-out 1s;
  transition: transform 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 1s, opacity 0.5s ease-in-out 1s;
}
html.is-complete #main .content .balloon img {
	-webkit-animation: balloon 0.75s ease-in-out infinite alternate both;
	animation: balloon 0.75s ease-in-out infinite alternate both;
}

@keyframes balloon {
0% {
  -webkit-transform: translate(0,0);
  transform: translate(0,0);
}
100% {
  -webkit-transform: translate(5%,-5%);
  transform: translate(5%,-5%);
}
}


/* ==============================
  is-move
============================== */
html.is-complete.is-move #main .content .balloon {
  opacity: 0;
  -webkit-transform: translateY(-400%) !important;
  transform: translateY(-400%) !important;
  -webkit-transition: -webkit-transform 2s cubic-bezier(0.55, 0.085, 0.68, 0.53), opacity 1s cubic-bezier(0.645, 0.045, 0.355, 1) 1s !important;
  transition: transform 2s cubic-bezier(0.55, 0.085, 0.68, 0.53), opacity 1s cubic-bezier(0.645, 0.045, 0.355, 1) 1s !important;
}