/*-----------------------------------------------
 keyvisual
-----------------------------------------------*/
#keyvisual {
  position: relative;
  z-index: 10; }
  #keyvisual .inner {
    position: relative;
    width: 1300px;
    height: 896px;
    margin: 0 auto; }
  #keyvisual .kv-img {
    background: url("../img/top/kv.jpg") repeat-x bottom center #fff;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0; }
  #keyvisual .kv-bg {
    background: url("../img/top/kv-bg.jpg") repeat-x bottom center #fff;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0; }
  #keyvisual h1 {
    position: absolute;
    bottom: -184px;
    left: 488px;
    z-index: 5;
    width: 310px;
    opacity: 0; }
    #keyvisual h1 img {
      width: 100%; }
  #keyvisual .logo {
    position: absolute;
    top: 0;
    left: 105px; }
  #keyvisual .chara {
    position: absolute;
    bottom: 5px;
    left: 334px;
    opacity: 0; }
  #keyvisual .pop {
    position: absolute;
    top: 86px;
    right: 128px;
    opacity: 0; }

@-webkit-keyframes bgscroll {
  0% {
    background-position: 0 bottom; }
  100% {
    background-position: -2937px bottom; } }
@keyframes bgscroll {
  0% {
    background-position: 0 bottom; }
  100% {
    background-position: -2937px bottom; } }
@media only screen and (max-width: 768px) {
  #keyvisual .inner {
    width: auto;
    height: 139.6vw; }
  #keyvisual .kv-img {
    animation: bgscroll 100s linear infinite;
    background-size: cover; }
  #keyvisual .kv-bg {
    display: none; }
  #keyvisual img {
    width: 100%; }
  #keyvisual h1 {
    bottom: -29vw;
    left: 0;
    width: 100%; }
  #keyvisual .logo {
    width: 38%;
    left: 1.8%; }
  #keyvisual .chara {
    bottom: 0;
    left: 0; }
  #keyvisual .pop {
    width: 28.2%;
    top: 16.5vw;
    right: 2.5%; } }
/*-----------------------------------------------
 content
-----------------------------------------------*/
#content {
  padding: 14px 0 86px; }
  #content::before {
    content: "";
    display: block;
    width: 100%;
    height: 12px;
    border-top: 8px solid #fff;
    border-bottom: 8px solid #fff;
    margin-bottom: 295px; }

#information .bg, #information .ttl, #information .image, #information .txt,
#campaign .bg, #campaign .ttl, #campaign .image, #campaign .txt,
#broadcast .bg, #broadcast .ttl, #broadcast .image, #broadcast .txt,
#special .bg, #special .ttl, #special .image, #special .txt {
  opacity: 0; }

@media only screen and (max-width: 768px) {
  #content {
    padding: 2% 0 13.8%;
    background: url("../img/top/bg_hana-sp.png") no-repeat top center, url("../img/global/bg_bottom-sp.png") no-repeat bottom center, linear-gradient(#1243d5, #32b2f9); }
    #content::before {
      height: 2vw;
      border-top: 1.6vw solid #fff;
      border-bottom: 1.6vw solid #fff;
      margin-bottom: 35%; } }
/*-----------------------------------------------
 information
-----------------------------------------------*/
#information {
  text-align: center;
  margin-bottom: 142px; }
  #information .inner a:hover .btn {
    right: -30px; }
  #information .btn {
    position: absolute;
    top: 200px;
    right: 0;
    transition: all 0.3s ease;
    opacity: 0; }
  #information .ttl {
    position: absolute;
    top: -94px;
    left: 0; }
  #information .deco-box {
    position: absolute;
    top: -93px;
    left: 0;
    width: 143px;
    height: 153px; }
    #information .deco-box .deco1, #information .deco-box .deco2, #information .deco-box .deco3, #information .deco-box .deco4, #information .deco-box .deco5, #information .deco-box .deco6, #information .deco-box .deco7, #information .deco-box .deco8 {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0; }
  #information .image {
    position: absolute;
    top: 132px;
    left: 100px; }
  #information .txt {
    position: absolute;
    top: 84px;
    right: 94px; }

@keyframes deco {
  to {
    background-position-y: -2755px; } }
@media only screen and (max-width: 768px) {
  #information {
    margin-bottom: 29%; }
    #information .btn {
      display: none; }
    #information .ttl {
      top: -20vw;
      left: 0; }
    #information .deco-box {
      width: 22.4%;
      height: 24vw;
      top: -20vw;
      left: 0; }
    #information .image {
      top: 10.5vw;
      left: 0; }
    #information .txt {
      right: 0;
      top: 64.5vw; } }
/*-----------------------------------------------
 campaign
-----------------------------------------------*/
#campaign {
  text-align: center;
  margin-bottom: 142px; }
  #campaign .inner a:hover .btn {
    right: -30px; }
  #campaign .btn {
    position: absolute;
    top: 200px;
    right: 0;
    transition: all 0.3s ease;
    opacity: 0; }
  #campaign .deco-box {
    position: absolute;
    top: -75px;
    right: 34px;
    width: 143px;
    height: 153px;
    transform: scale(-1, 1); }
    #campaign .deco-box .deco1, #campaign .deco-box .deco2, #campaign .deco-box .deco3, #campaign .deco-box .deco4, #campaign .deco-box .deco5, #campaign .deco-box .deco6, #campaign .deco-box .deco7, #campaign .deco-box .deco8 {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0; }
  #campaign .ttl {
    position: absolute;
    top: -76px;
    right: 34px; }
  #campaign .image {
    position: absolute;
    top: 135px;
    right: 150px; }
  #campaign .txt {
    position: absolute;
    top: 82px;
    left: 62px; }

@media only screen and (max-width: 768px) {
  #campaign {
    margin-bottom: 29%; }
    #campaign .btn {
      display: none; }
    #campaign .ttl {
      top: -20vw;
      right: 0; }
    #campaign .deco-box {
      width: 22.4%;
      height: 24vw;
      top: -20.5vw;
      right: 0; }
    #campaign .image {
      top: 10.5vw;
      right: 0; }
    #campaign .txt {
      left: 0;
      top: 64.5vw; } }
/*-----------------------------------------------
 broadcast
-----------------------------------------------*/
#broadcast {
  text-align: center;
  margin-bottom: 142px; }
  #broadcast .inner a:hover .btn {
    right: -30px; }
  #broadcast .btn {
    position: absolute;
    top: 200px;
    right: 0;
    transition: all 0.3s ease;
    opacity: 0; }
  #broadcast .deco-box {
    position: absolute;
    top: -93px;
    left: 0;
    width: 143px;
    height: 153px; }
    #broadcast .deco-box .deco1, #broadcast .deco-box .deco2, #broadcast .deco-box .deco3, #broadcast .deco-box .deco4, #broadcast .deco-box .deco5, #broadcast .deco-box .deco6, #broadcast .deco-box .deco7, #broadcast .deco-box .deco8 {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0; }
  #broadcast .ttl {
    position: absolute;
    top: -94px;
    left: 0; }
  #broadcast .image {
    position: absolute;
    top: 132px;
    left: 100px; }
  #broadcast .txt {
    position: absolute;
    top: 84px;
    right: 94px; }

@media only screen and (max-width: 768px) {
  #broadcast {
    margin-bottom: 29%; }
    #broadcast .btn {
      display: none; }
    #broadcast .ttl {
      top: -20vw;
      left: 0; }
    #broadcast .deco-box {
      width: 22.4%;
      height: 24vw;
      top: -20vw;
      left: 0; }
    #broadcast .image {
      top: 10.5vw;
      left: 0; }
    #broadcast .txt {
      right: 0;
      top: 64.5vw; } }
/*-----------------------------------------------
 special
-----------------------------------------------*/
#special {
  text-align: center;
  margin-bottom: 245px; }
  #special .inner a:hover .btn {
    right: -30px; }
  #special .btn {
    position: absolute;
    top: 200px;
    right: 0;
    transition: all 0.3s ease;
    opacity: 0; }
  #special .deco-box {
    position: absolute;
    top: -75px;
    right: 34px;
    width: 143px;
    height: 153px;
    transform: scale(-1, 1); }
    #special .deco-box .deco1, #special .deco-box .deco2, #special .deco-box .deco3, #special .deco-box .deco4, #special .deco-box .deco5, #special .deco-box .deco6, #special .deco-box .deco7, #special .deco-box .deco8 {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0; }
  #special .ttl {
    position: absolute;
    top: -76px;
    right: 34px; }
  #special .image {
    position: absolute;
    top: 135px;
    right: 150px; }
  #special .txt {
    position: absolute;
    top: 82px;
    left: 62px; }

@media only screen and (max-width: 768px) {
  #special {
    margin-bottom: 23.8%; }
    #special .btn {
      display: none; }
    #special .ttl {
      top: -20vw;
      right: 0; }
    #special .deco-box {
      width: 22.4%;
      height: 24vw;
      top: -20.5vw;
      right: 0; }
    #special .image {
      top: 10.5vw;
      right: 0; }
    #special .txt {
      left: 0;
      top: 64.5vw; } }