@charset "utf-8";
/* 2026/05 update */
html,
body {background: none; margin: 0; width: 100%; height: auto !important;}
header {background: #fff;}
@import url('https://fonts.googleapis.com/css?family=Oswald:400,700');
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,700');

/*** Event - Common ***/
.sp_display{display:none;}
.pc_display{display:block;}
::selection {color: #fff; background-color: #999;}
#wrap {background: none;}
.animated {animation-duration: 1s; animation-fill-mode: both; visibility: visible;}
article{width: 100%; padding: 25px 0;}

/* bgScroll */
#hju__bgScroll{width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: -1; background-image: url(../img/event/cpn_hju/common/bg_hju_challenge.jpg); background-position: 0; background-repeat: repeat; background-size: contain;}

/*** Event - HYPER JUMP UP ***/
/* Common */
#wrap_hju{color: #333333; font-size: 1.8rem; font-weight: 400; line-height: 3.0rem; position: relative; overflow: hidden;}
#wrap_hju h2 {margin: 0; padding: 0;}
#wrap_hju h2.ib_ttl {background-image: url(../img/event/cpn_hju/common/hju_article_ib_ttl.jpg); background-repeat: no-repeat; background-size: cover; margin: 0; padding: 4rem 1.5rem 2rem; font-size: 4rem; font-weight: 600; text-shadow: 2px 2px 0 #ef3100;}
#wrap_hju h3 {color: #F9AE00; font-weight: bold; margin: 0 0 20px 0; font-size: 3.4rem; line-height: 4.2rem; padding: 0 0 15px 0; border-bottom: 3px solid #F9AE00;}
#wrap_hju hr{margin: 30px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.4);}
#wrap_hju .ft_orange {color: #f9ae00;}

#wrap_hju .btnArea{margin: 30px auto; padding: 0;}
#wrap_hju a.hju_btn{display: block; background: #F9AE00; color: #fff; font-size: 1.85rem; text-decoration: none; width: 75%; max-width: 400px; border-radius: 5px; padding: 10px; margin: 0 auto; transition: all .3s; box-shadow: 0 0 0 2px rgba(0,0,0,0.25)inset;}
#wrap_hju a.hju_btn:hover{color: #fff; background: #f08c14; text-decoration: none;}
#wrap_hju a{color: #fff; text-decoration: underline;}
#wrap_hju a:hover{color: #f9ae00;}

#page-top {position: fixed; right: 1.6rem; bottom: 0.8rem; z-index: 10;
-webkit-transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;}
#page-top .scroll.show{bottom: 1rem;}
#page-top a .scroll {width: 1.5rem; height: 5.8rem; position: absolute; right: 0; bottom: -10rem; transition: all 1.0s; z-index: 9;}
#page-top a .scroll .arw::after {content: ""; display: block; position: absolute; right: -17.25px; top: -7px; width: 7px; height: 7px; border-right: 2px solid #F9AE00; border-top: 2px solid #F9AE00; transform: rotate(-45deg);}
#page-top a .scroll .arw {position: absolute; top: 0; left: 50%; margin-left: -1.0rem;}
#page-top a .scroll .txt {color: #fff8e6; font-size: 1rem; font-weight: 700; mix-blend-mode: difference; position: absolute; left: 0.3rem; bottom: 0;
writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;}

/* Loader */
  .stmp-loader{background:#fff8e6; background-size: cover; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 200;}
  .loader{background: rgb(33 9 45 / 1); width: 100%; height: 100%; position: fixed; display: flex; align-items: center; justify-content: center; left: 0; top: 0; z-index: 1000;}
/* Loader - Animation */
  .loader-animation {position: relative;}
/* Loader - Animation */
  .loader-logo {font-size: 10px; margin: -1.5em 0; text-indent: -9999em; width: 5em; height: 5em; border-radius: 50%; position: absolute; top: calc(50% - 60px); left: calc(50% - 25px);
  background: #eb8989;
  background: -moz-linear-gradient(left, #eb8989 10%, rgba(235, 137, 137, 0) 42%);
  background: -webkit-linear-gradient(left, #eb8989 10%, rgba(235, 137, 137, 0) 42%);
  background: -o-linear-gradient(left, #eb8989 10%, rgba(235, 137, 137, 0) 42%);
  background: -ms-linear-gradient(left, #eb8989 10%, rgba(235, 137, 137, 0) 42%);
  background: linear-gradient(to right, #eb8989 10%, rgba(235, 137, 137, 0) 42%);
  -webkit-animation: loader 0.75s infinite linear;
  animation: loader 0.75s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);}
  .loader-logo:before {
  content: ''; width: 50%; height: 50%; background: #eb8989; border-radius: 100% 0 0 0; position: absolute; top: 0; left: 0;}
  .loader-logo:after {content: ''; background: rgb(33 9 45 / 1); width: 70%; height: 70%; border-radius: 50%; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
  .loading-text {width: 100%; font-size: 1.05rem; font-weight: 700; color: #eb3f96; text-align: center; margin: 0 0 0 -3.5em; position: absolute; top: 100%;}
  .loader_letter{
    background: linear-gradient(180deg, #eb3f96 0% 0%, #ff745f 50% 0%, #ffa856 100%);
    background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: rgba(0, 0, 0, 0);
    animation: bound 1.0s infinite; position: absolute; animation-delay: 0s;
  }
  .loader_letter:nth-child(1){left: 0; animation-delay: 0s;}
  .loader_letter:nth-child(2){left: 12px; animation-delay: 0.1s;}
  .loader_letter:nth-child(3){left: 24px; animation-delay: 0.2s;}
  .loader_letter:nth-child(4){left: 36px; animation-delay: 0.3s;}
  .loader_letter:nth-child(5){left: 48px; animation-delay: 0.4s;}
  .loader_letter:nth-child(6){left: 60px; animation-delay: 0.5s;}
  .loader_letter:nth-child(7){left: 72px; animation-delay: 0.6s;}

#wrap_hju .default{color: #fff; background: #ccc; border: 2px solid #aaa; box-shadow: none; border-radius: 40px; font-size: 2rem; position: relative; padding: 5px 80px 10px;}
#wrap_hju .default::before{content: ''; position: absolute; top: 1px; right: 20px; bottom: 0; width: 0; height: 0; margin: auto; border-style: solid; border-width: 6px 0 6px 8px; border-color: transparent transparent transparent #fff; -webkit-transition: -webkit-transform .4s cubic-bezier(0.77, 0, 0.175, 1); transition: transform .4s cubic-bezier(0.77, 0, 0.175, 1);}
#wrap_hju .default div{display: block; font-size: 2.8rem;}
#wrap_hju .default p{display: block; font-size: 1.8rem; background: #aaa; padding: 3px 10px; margin: 0; border-radius: 10px;}

.content-block{width: 970px; color: #fff; margin: 0 auto; padding: 15px; position: relative; background-color: rgba(0,0,0,0.9);}
.hju_inner{background-color: #0a1d30; margin: 0; padding: 0; overflow: hidden;}
.hju_inner .detail{padding: 40px;}
.line_box {padding: 40px; border: 4px solid #F9AE00; border-radius: 10px; box-sizing: border-box; }

.marginbtm{margin-bottom: 40px;}
.marginbtm_s {margin-bottom: 20px;}

/* Navi */
#hju__modal{display: none;}
nav{position: absolute; padding: 35px 0; width: 100%; z-index: 10;}
nav .navi__area{width: 970px; margin: 0 auto; position: relative;}
nav .navi__area h2.logo{position: absolute; top: -15px; left: 15px;}
nav .navi__area .hju__modal__btn{display: none;}
nav.g-nav .checkbox_check,
nav.g-nav .radio_check {display: none;}
nav .navi__area ul{width: 100%; margin: 0; display: flex; justify-content: flex-end; align-items: center;}
nav .navi__area li{width: 25%; text-align: center;}
nav .navi__area li a{color: #fff !important; font-size: 1.8rem; font-weight: 700; text-shadow: 0 3px 1px #000; position: relative; text-decoration: none !important;}
nav .navi__area li a:hover{text-decoration: none !important;}
nav .navi__area li a::after {position: absolute; bottom: -5px; left: 0; content: ''; width: 100%; height: 3px; background: #F9AE00; transform: scale(0, 1); transform-origin: right top; transition: transform .3s;}
nav .navi__area li a:hover::after {transform-origin: left top; transform: scale(1, 1);}
nav.fixed{position: fixed; top: 0; left: 0; background: #050505; border-bottom: 3px solid #F9AE00; padding: 35px 0 25px;}

/* Main image */
article.main__area{
width: 100%; width: 100vw; height: calc(100vh - 120px); min-width: 970px; min-height: 720px; margin: 0 0 25px; position: relative; top: 0; left: 0;
background-image: linear-gradient(45deg, rgb(255 255 255 / 0.05) 5%, rgb(0 0 0 / 0.325) 45%);
background-size: 3px 3px; z-index: 0; overflow: hidden;}
article.main__area .main__image{}
article.main__area .main__image h2{position: absolute; max-width: 780px; top: 50%; left: 50%; margin: -305px 0 0 -380px !important;}
article.main__area .main__image p{width: 65%;font-weight: 700; font-size: 2.6rem; letter-spacing: 1px; line-height: 1; color: #fff; width: 90%; text-align: center; margin: -2.5rem auto 0; padding: 1rem; position: relative; transform: skewY(-5deg);}
article.main__area .main__image p:after {content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.75); z-index: -1;}
article.main__area .main__image a{padding-top: 65px;}
article.main__area .main__image a{display: inline-block; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); text-decoration: none; text-shadow: 0 1px 1px #000; text-decoration: none !important; font-size: 1.15rem; letter-spacing: 3px; position: absolute; bottom: -10px; left: 50%; z-index: 2;}
article.main__area .main__image a:hover{color: #fff !important;}
article.main__area .main__image a span {width: 24px; height: 24px; margin-left: -12px; border-left: 4px solid #fff; border-bottom: 4px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: sdb 2s infinite; animation: sdb 2s infinite; position: absolute; top: 0; left: 50%; opacity: 0; box-sizing: border-box;}
article.main__area .main__image a span:nth-of-type(1) {-webkit-animation-delay: 0s; animation-delay: 0s;}
article.main__area .main__image a span:nth-of-type(2) {top: 16px; -webkit-animation-delay: .15s; animation-delay: .15s;}
article.main__area .main__image a span:nth-of-type(3) {top: 32px; -webkit-animation-delay: .3s; animation-delay: .3s;}

/* Main image */
.bg_movie {width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: -1;}
.bg_movie .video_box {width: 100%; height: 100%;}
.bg_movie .video_box video {width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; pointer-events: none; aspect-ratio: 16/9; opacity: 1.00;}

/* No Login */
article.playData .none{width: 100%;}
article.playData .none p{font-size: 14px; margin: 10px 0; text-align: center;}
article.playData .none a.btn_appli{width: 70%; max-width: 400px; margin: 0 auto; font-size: 2.8rem !important;}

/* About */
article#ev_about{}
article#ev_about .detail .flex{width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
article#ev_about .detail .flex .image{width: 20%; margin: 0 5%;}
article#ev_about .detail .flex .text{width: 70%; margin: 0;}
article#ev_about .detail .flex .text h3{font-size: 3.2rem;}

/* Data */
article#ev_data{}
article#ev_data h2.ib_every_ttl{background-image: url(../img/event/cpn_hju/common/hju_article_ib_ttl_01.jpg); background-repeat: no-repeat; background-size: cover; font-family: Oswald, sans-serif; color: #173f66; font-size: 7.4rem; font-weight: 600; line-height: 1; padding: 1.5rem 1.5rem 1.5rem 37.5rem; margin: 0;}
article#ev_data h2.ib_every_ttl span{font-size: 4rem;}
article#ev_data h2.personal_ttl{background-image: url(../img/event/cpn_hju/common/hju_article_data_info.jpg); background-repeat: no-repeat; background-size: cover; color: #662017; font-size: 3.0rem; font-weight: 600; line-height: 1; padding: 1.5rem 1.5rem 1.25rem; margin: 0; text-align: center;}
article#ev_data .clear_icon {position: absolute; top: 0; left: 0; z-index: 5; width: 13.25%;}
article#ev_data .attention{background: #e1002a; text-align: center; margin: 15px 0 0;}
article#ev_data .attention p{font-size: 1.5rem; font-weight: bold; margin: 0; padding: 5px;}
article#ev_data .notice{text-align: right; margin: 15px 0 0;}
article#ev_data .notice p{font-size: 1.55rem; line-height: 1.55rem; margin: 0; padding: 0;}
#total_score {position: relative;}
#total_score #number {position: absolute; font-family: Oswald, sans-serif; font-size: 84px; line-height: 1; width: 100%; text-align: center; letter-spacing: 0.05em; top: 36px;}
#hju_bar {background: #111; position: relative; height: 77px;}
#hju_bar.billion {height: 85px !important;}
#hju_bar p{width: 96%; display: block; color: #f9ae00; background: rgba(0,0,0,0.75); border: 4px solid #F9AE00; border-radius: 10px; margin: 0 auto; padding: 25px 0 15px; text-align: center; font-size: 2.0rem; font-weight: 700; line-height: 2.8rem;}
#hju_bar p span{font-size: 3.4rem;}
#hju_bar #rate_bar {width: 96%; height: auto; position: absolute; top: 10px; left: 0; margin: 0 2%;}
#hju_bar #rate_bar img{height: 56px;}
#hju_bar #rate {line-height: 75px; font-weight: bold; text-align: center; position: relative; z-index: 5;}
#myscore {background: #fff; box-shadow: 0 0 10px 5px rgba(0,0,0,0.25)inset; font-family: Oswald, sans-serif; color: #163C62; font-weight: bold; padding: 25px 175px; position: relative;}

#myscore a {color: #999999; display: block;}
#myscore ul{display: flex;justify-content: space-between; align-items: center;}
#myscore ul > li{font-size: 56px; line-height: 1;}
#myscore ul > li:first-child{font-size: 2.8rem; line-height: 3.0rem;}
#myscore.none p{font-size: 1.25rem; line-height: 1; font-weight: normal; font-family: initial; margin: 10px 0 0;}
#myscore .achievement{text-align: center; margin: 20px 0 0; font-size: 2.2rem;}
#myscore .achievement i{font-size: 2.4rem; margin-right: 3px;}
#myscore .achievement span{display: inline-block; margin: 0 5px; font-size: 4.0rem; font-weight: 700; line-height: 4.5rem;}
#myscore .achievement span.lebel1{color: #0775e5;}
#myscore .achievement span.lebel2{color: #09c809;}
#myscore .achievement span.lebel3{color: #ed1465;}
#myscore .achievement span.lebel4{
background: linear-gradient(to right, #f00 0%, #f80 14.28%, #dd0 28.56%, #0d0 42.85%, #0dd 57.14%, #00f 71.42%, #e0e 85.71%, #f00 100%) 0% center / 100% auto;
background: -webkit-linear-gradient(left, #f00 0%, #f80 14.28%, #dd0 28.56%, #0d0 42.85%, #0dd 57.14%, #00f 71.42%, #e0e 85.71%, #f00 100%) 0% center / 100% auto;
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-fill-color: transparent;}
#myscore .achievement.complete{font-size: 3.2rem; line-height: 2.8rem; color: #e1002a;}
#myscore .achievement.complete span{font-size: 2.0rem; line-height: 2.2rem; color: #163C62;}

/* Campaign */
article#ev_campaign{}
article#ev_campaign .detail h4{color: #F9AE00; font-weight: bold; font-size: 3.0rem; padding: 0 0 0 17px; margin: 30px 0; position: relative;}
article#ev_campaign .detail h4::before{content: ""; display: block; background: #F9AE00; width: 6px; height: 30px; position: absolute; top: 50%; left: 0; margin: -17px 0 0;}
article#ev_campaign .detail ul.hju_itemBox{margin: 0; padding: 0;}
article#ev_campaign .detail ul.hju_itemBox h5.iB__ttl{background-image: url(../img/event/cpn_hju/common/hju_article_ib_ttl_01.jpg); background-repeat: no-repeat; background-size: cover; font-family: Oswald, sans-serif; color: #fff; font-size: 5.6rem; font-weight: 600; line-height: 1; padding: 1.5rem 1.5rem 3rem 31.5rem; margin: 0; text-shadow: 2px 2px 0 #0065cb;}
article#ev_campaign .detail ul.hju_itemBox h5.iB__ttl.ex{background-image: url(../img/event/cpn_hju/common/hju_article_ib_ttl_01ex.jpg); text-shadow: 2px 2px 0 #cb0000;}
article#ev_campaign .detail ul.hju_itemBox h5.iB_psn_ttl{background-image: url(../img/event/cpn_hju/common/hju_article_ib_ttl_02.jpg); background-repeat: no-repeat; background-size: cover; font-family: Oswald, sans-serif; color: #fff; text-align: right; font-size: 5.6rem; font-weight: 600; line-height: 1; padding: 1.5rem 2.5rem 3rem 31.5rem; margin: 0; text-shadow: 2px 2px 0 #ef0000;}
article#ev_campaign .detail ul.hju_itemBox h5.iB_psn_ttl.ex{background-image: url(../img/event/cpn_hju/common/hju_article_ib_ttl_02ex.jpg); text-shadow: 2px 2px 0 #cb0000;}
article#ev_campaign .detail ul.hju_itemBox h5.iB__ttl span,
article#ev_campaign .detail ul.hju_itemBox h5.iB_psn_ttl span{font-size: 4rem;}

article#ev_campaign .detail ul.hju_itemBox > li{margin: 0 0 40px; position: relative;}
article#ev_campaign .detail ul.hju_itemBox > li:last-of-type{margin: 0;}
article#ev_campaign .detail ul.hju_itemBox .clear_icon {position: absolute; top: 139px; left: 39px; z-index: 5; width: 22.25%;}
article#ev_campaign .detail ul.hju_itemBox .iB__image{background: #fff; padding: 40px 40px 80px; box-shadow: 0 0 10px 5px rgba(0,0,0,0.25)inset; position: relative;}
article#ev_campaign .detail ul.hju_itemBox .iB__image.clear{}
article#ev_campaign .detail ul.hju_itemBox .iB__txt{display: block; width: 100%; color: #173f66; text-align: center; font-size: 3.4rem; font-weight: 700; font-family: Oswald, sans-serif; margin: 0; position: absolute; bottom: 30px; left: 0;}
article#ev_campaign .detail .hju_extra{margin: 35px 0 30px; padding: 0;}
article#ev_campaign .detail.notice{padding: 0 40px;}
article#ev_campaign .line_box .image.pic1{margin: 30px;}
article#ev_campaign #hju_machine .image{margin: 40px 20px 15px;}

/* Strategy */
article#ev_strategy{}
article#ev_strategy .movie-wrap p{margin: 20px 0 0;}
article#ev_strategy .detail hr{margin: 0 auto 2.0rem;}
article#ev_strategy .detail .flex{width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
article#ev_strategy .detail .flex .image{width: 20%; margin: 0 5%;}
article#ev_strategy .detail .flex .text{width: 70%; margin: 0; font-size: 2.4rem; line-height: 1.5em;}

/* Notice */
article#ev_notice {margin-bottom: 25px;}
article#ev_notice .detail{padding: 40px;}
article#ev_notice .detail a{text-decoration: underline;}
article#ev_notice .detail h4{font-size: 3.6rem; font-weight: 700; text-align: center; margin: 0 0 25px; color: #F9AE00; padding: 0 0 15px 0; border-bottom: 3px solid #F9AE00;}
article#ev_notice .detail h5{font-size: 2.4rem; margin: 20px 0;}
article#ev_notice .detail ul{width: 100%; margin: 0 0 20px;}
article#ev_notice .detail ul:last-child{margin: 0;}
article#ev_notice .detail li{font-size: 1.35rem; line-height: 2.0rem; margin: 0 0 10px 25px; list-style: disc;}
article#ev_notice .detail li:last-child{margin:  0 0 0 25px;}


/*responsive ==============================================================================*/
@media (max-width: 1024px) {
  /* Main image */
  .bg_movie .video_box video {width: 215%; height: 100%;}
}

@media (max-width: 767px) {
  /*smart phone*/
  /*Event - Common*/
  .sp_display{display:block !important;}
  .pc_display{display:none !important;}

  /*** Event - HYPER JUMP UP ***/
  /* Common */
  article{padding: 15px 0;}
  #wrap_hju{font-size: 1.5rem; line-height: 2.3rem;}
  #wrap_hju h2.ib_ttl {padding: 2.25rem 1.0rem 1.0rem; font-size: 2.4rem;}
  #wrap_hju h3 {margin: 0 0 20px; font-size: 1.75rem; line-height: 2.35rem; padding: 0 0 7px;}
  #wrap_hju hr{margin: 20px 0;}
  #wrap_hju .btnArea{margin: 25px auto;}
  #wrap_hju a.hju_btn{font-size: 1.4rem; width: 90%;}
  .content-block{width: 100%; padding: 0.75rem;}
  .hju_inner .detail{padding: 5%;}
  .line_box {border: 2px solid #F9AE00; padding: 5%;}
  .marginbtm{margin-bottom: 20px;}
  .marginbtm_s {margin-bottom: 15px;}

  .site_loader_logo {margin: -8em -3em;}

  /* Navi */
  nav{padding: 35px 0;}
  nav .navi__area{width: 100%;}
  nav .navi__area h2.logo{width: 135px; top: -17px; left: 15px;}
  nav .navi__area h2.logo img{width: 100%;}
  nav .navi__area .hju__modal__btn{display: block; width: 36px; height: 36px; position: absolute; top: 50%; right: 20px; margin: -15px 0 0;}
  nav .navi__area ul{display: none; justify-content: flex-start; align-items: normal;}
  nav .navi__area li{width: 100%; text-align: center;}
  nav .navi__area li a{color: #fff !important; font-size: 1.8rem; font-weight: 700; text-shadow: 0 3px 1px #000; position: relative; text-decoration: none !important;}
  nav .navi__area li a::after {display: none;}
  nav .navi__area li a:hover::after {display: none;}
  nav.fixed{position: fixed; padding: 35px 0;}
  nav.g-nav #hju__slideMenu {height: 100%; position: fixed; justify-items: legacy; width: 100%; margin-top: -35px; transform: translateY(-150%); transition: transform 450ms ease-in-out; background: rgba(0,0,0,0.85); z-index: 5;}
  .menu{display: block; width: 30px; height: 30px; position: absolute; top: 50%; right: 0; margin: -10px 15px 0 0; padding: 0; border: none;}
  .menu span:before {bottom: -10px;}
  .menu span:after {bottom: -20px;}
  .menu span,
  .menu span::before,
  .menu span::after {content: ''; display: block; width: 30px; height: 4px; border-radius: 0; background: #fff; transition: 0.5s; position: absolute;}

  /* == Modal ================================================== */
  #hju__modal{display: block;}
  .hju__js-modal__bg {width: 100%; height: 100%;background-color: rgba(0,0,0,0); position: fixed; top: 0; left: 0; z-index: 10; display: none;}
  .hju__js-modal__main {display: none; width: 100%; height: 100vh; padding: 15%; margin: 0; position: fixed; top: 0; left: 0; background-color: rgba(0,0,0,0.95); z-index: 50;}
  .hju__js-modal__main .modal__contentsBox{width: 70%; margin: -180px 0 0 -35%; position: absolute; top: 50%; left: 50%;}
  .hju__js-modal__main .modal__contentsBox h2.logo{width: 100%; text-align: center; margin: 0 auto 20px;}
  .hju__js-modal__main .modal__contentsBox .hju__modal__menu ul{list-style: none; margin: 0; padding: 0;}
  .hju__js-modal__main .modal__contentsBox .hju__modal__menu ul > li{text-align: center; margin-bottom: 10px;}
  .hju__js-modal__main .modal__contentsBox .hju__modal__menu ul > li a{display: block; color: #fff; font-size: 3rem; font-weight: 700; padding: 0.75rem 0;}
  .hju__js-modal__btn--close--fix {display: block; background: #F9AE00; color: #fff; font-size: 1.85rem; text-decoration: none; text-align: center; width: 60%; max-width: 400px; border-radius: 5px; padding: 10px; margin: 25px auto; transition: all .3s; box-shadow: 0 0 0 2px rgba(0,0,0,0.25)inset; cursor: pointer;}
  .hju__js-modal__main._slideUp {animation: SlideUp .5s ease-in-out forwards;}
  .hju__js-modal__main._slideDown {animation: SlideDown .5s ease-in-out forwards;}

  /* Main image */
  article.main__area{
  width: 100vw; height: 80vh; min-width: auto; min-height: auto; margin: 0 0 15px;}
  article.main__area .main__image h2{width: 80%; margin: -30% 0 0 -40% !important;}
  article.main__area .main__image p{font-size: 1.45rem; margin: -1.25rem auto 0;}
  article.main__area .main__image a{margin: 0 0 0 -25px;}
  article.main__area .main__image a span {width: 20px; height: 20px; margin-left: -10px; border-left: 3px solid #fff; border-bottom: 3px solid #fff;}

  /* Main image */
  .bg_movie .video_box video {width: 265%; height: 100%;}

  /* About */
  article#ev_about .detail .image{margin: 15px 0;}
  article#ev_about .detail .flex{flex-direction: column-reverse;}
  article#ev_about .detail .flex .image{width: 40%; margin: 0;}
  article#ev_about .detail .flex .text{width: 100%; margin: 0;}
  article#ev_about .detail .flex .text h3{font-size: 2.0rem; line-height: 1.4em;}

  /* Data */
  article#ev_data h2.ib_every_ttl{font-size: 3.4rem; padding: 1.75rem 2rem 1.75rem 16rem; text-align: right;}
  article#ev_data h2.ib_every_ttl span{font-size: 2rem;}
  article#ev_data h2.personal_ttl{font-size: 2rem; padding: 1.0rem 1.5rem 1.0rem;}
  article#ev_data .clear_icon {width: 18%;}
  article#ev_data .attention{margin: 12px 0 0;}
  article#ev_data .attention p{font-size: 1.2rem; line-height: 1.6rem; padding: 10px;}
  article#ev_data .notice{margin: 12px 0 5px;}
  article#ev_data .notice p{font-size: 1.1rem; line-height: 1.0rem;}
  #total_score #number {font-size: 36px; top: 27%;}
  #hju_bar {height: 48px;}
  #hju_bar.billion {height: 50px !important;}
  #hju_bar #rate_bar {width: 95%; margin: 0 2.5%;}
  #hju_bar #rate_bar img{height: 28px;}
  #hju_bar #rate {line-height: 50px;}
  #hju_bar p{width: 95%; border: 2px solid #F9AE00; padding: 15px 0 10px; font-size: 1.1rem; line-height: 1.75rem;}
  #hju_bar p span{font-size: 2.0rem;}
  #myscore {box-shadow: 0 0 5px 2.5px rgba(0,0,0,0.25)inset; padding: 5%;}
  #myscore ul > li{font-size: 26px; letter-spacing: -0.5px; line-height: 1;}
  #myscore ul > li:first-child{font-size: 1.25rem; line-height: 1.5rem;}
  #myscore .btnArea {margin: 5px auto;}
  #myscore.none p{font-size: 1.2rem; line-height: 1.6rem; margin: 10px 0 0;}
  #myscore .achievement{margin: 10px 0 0; font-size: 1.15rem;}
  #myscore .achievement i{font-size: 1.6rem; margin-right: 1.5px;}
  #myscore .achievement span{margin: 0 5px; font-size: 2.25rem; line-height: 2.9rem; letter-spacing: -0.5px;}
  #myscore .achievement.complete{font-size: 1.95rem; line-height: 1.6rem;}
  #myscore .achievement.complete span{font-size: 1.05rem; line-height: 1.4rem;}

  /* Campaign */
  article#ev_campaign .detail h4{font-size: 1.75rem; padding: 0 0 0 8px; margin: 15px 0;}
  article#ev_campaign .detail h4::before{content: ""; width: 3px; height: 20px; margin: -11px 0 0;}
  article#ev_campaign .detail ul.hju_itemBox h5.iB__ttl{font-size: 2.15rem; padding: 1.75rem 2rem 1.75rem 14rem; text-align: right;}
  article#ev_campaign .detail ul.hju_itemBox h5.iB_psn_ttl{font-size: 2.15rem; padding: 1.75rem 2rem 1.75rem 14rem; text-align: right;}
  article#ev_campaign .detail ul.hju_itemBox h5.iB__ttl span,
  article#ev_campaign .detail ul.hju_itemBox h5.iB_psn_ttl span{font-size: 1.25rem;}
  article#ev_campaign .detail ul.hju_itemBox > li{margin: 0 0 20px;}
  article#ev_campaign .detail ul.hju_itemBox .clear_icon {position: absolute; top: 0; left: 4.5%; width: 100px; margin: 80px 0 0 0;}
  article#ev_campaign .detail ul.hju_itemBox .iB__image{padding: 25px 5% 40px; box-shadow: 0 0 5px 2.5px rgba(0,0,0,0.25)inset;}
  article#ev_campaign .detail ul.hju_itemBox .iB__txt{font-size: 1.75rem; bottom: 8px; letter-spacing: -0.25px;}
  article#ev_campaign .detail .hju_extra{margin: 20px 0;}
  article#ev_campaign .detail.notice{padding: 0 5%;}
  article#ev_campaign .line_box .image.pic1{margin: 15px;}
  article#ev_campaign #hju_machine .image{margin: 20px 0px;}

  /* Strategy */
  article#ev_strategy .movie-wrap p{margin: 15px 0 0;}
  article#ev_strategy .detail .flex{flex-direction: column;}
  article#ev_strategy .detail .flex .image{width: 45%; margin: 0;}
  article#ev_strategy .detail .flex .text{width: 100%; margin: 0; font-size: 1.6rem; line-height: 1.5em;}

  /* Notice */
  article#ev_notice {margin-bottom: 15px;}
  article#ev_notice .detail{padding: 5%;}
  article#ev_notice .detail h4{margin: 0 0 20px; font-size: 1.55rem; line-height: 2.25rem; padding: 0 0 5px;}
  article#ev_notice .detail h5{font-size: 1.45rem; margin: 10px 0;}
  article#ev_notice .detail ul{margin: 0 0 15px;}
  article#ev_notice .detail li{font-size: 1.15rem; line-height: 1.85rem; margin: 0 0 10px 15px;}
  article#ev_notice .detail li:last-child{margin: 0 0 0 15px;}
}

@media (max-width: 479px) {
  /* Main image */
  article.main__area .main__image h2{width: 96%; margin: -35% 0 0 -48% !important;}
  article.main__area .main__image p {font-size: 1.25rem; margin: -1.25rem auto 0;}

  /* Main image */
  .bg_movie .video_box video {width: 275%; height: 100%;}

  /* Common */
  #wrap_hju h2.ib_ttl {font-size: 2.0rem;}
  article#ev_campaign .detail ul.hju_itemBox h5.iB__ttl{font-size: 1.55rem; padding: 1.2rem 1.5rem 1.2rem 12rem;}
  article#ev_campaign .detail ul.hju_itemBox h5.iB_psn_ttl{font-size: 1.55rem; padding: 1.2rem 1.5rem 1.2rem 12rem;}
  article#ev_campaign .detail ul.hju_itemBox h5.iB__ttl span,
  article#ev_campaign .detail ul.hju_itemBox h5.iB_psn_ttl span{font-size: 1.1rem;}

  /* About */
  article#ev_about .detail .flex .text h3{font-size: 1.6rem; line-height: 1.5em;}

  /* Data */
  #total_score #number {font-size: 26.5px; top: 25%;}

  article#ev_data h2.ib_every_ttl{font-size: 2.1rem; padding: 1.5rem 1.5rem 1.5rem 15rem;}
  article#ev_data h2.ib_every_ttl span{font-size: 1.4rem;}
  article#ev_data h2.personal_ttl{font-size: 1.6rem; padding: 1.0rem;}
  article#ev_campaign .detail ul.hju_itemBox .clear_icon {width: 80px; margin: 63px 0 0 0;}
}


/* == keyframes ================================================== */
.animated {animation-duration: 1s; animation-fill-mode: both; visibility: visible; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: both;}
@keyframes SlideUp {
  0%   {opacity: 1; transform: translateX(0%);}
  100% {opacity: 0; transform: translateX(100%);}
}
@keyframes SlideDown {
  0%   {opacity: 0; transform: translateX(100%);}
  100% {opacity: 1; transform: translateX(0%);}
}
@keyframes stroke {
  0%   {fill: #10101e; stroke-dashoffset: 1800;}
  10%  {fill: transparent;}
  20%  {fill: #dbcf6e; stroke-dashoffset: 0;}
  70%  {fill: #dbcf6e; stroke-dashoffset: 0;}
  80%  {fill: transparent;}
  90%  {fill: #10101e; stroke-dashoffset: 1800;}
  100% {fill: #10101e; stroke-dashoffset: 1800;}
}

@keyframes bound{
  0%   {transform: translateY(0px);}
  50%  {transform: translateY(-10px);} 
  60%  {transform: translateY(1px);}
  70%  {transform: translateY(0px);}
  100% {transform: translateY(0px);}
}

@keyframes loader {
  0%   {-webkit-transform: rotate(0deg); transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}

@keyframes sdb {
  0%   {opacity: 0;}
  50%  {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes bgscroll {
  0%   {background-position: 0 0;}
  100% {background-position: 0 -140vh;}
}

@keyframes SlideUp {
  0%   {opacity: 1; transform: translateX(0%);}
  100% {opacity: 0; transform: translateX(100%);}
}

@keyframes SlideDown {
  0%   {opacity: 0; transform: translateX(100%);}
  100% {opacity: 1; transform: translateX(0%);}
}

/*Extra ==============================================================================*/
article.playData .entry__data .ex__app dd li{display: inline-block; font-size: 1.8rem; background: #f54d7c; border: 2px solid #fff; border-radius: 30px; padding: 5px 60px;}
article.main__area .main__image .ex__object__logo{position: absolute;width: 430px; top: 40px; left: 50%; margin: 0 0 0 -235px;}

@media (max-width: 767px) {
/*smart phone*/
article.playData .entry__data .ex__app dt{display: block; font-size: 2.2rem; width: 100%; margin-bottom: 10px;}
article.playData .entry__data .ex__app li div span.diff{display: inline !important; font-size: 1.1rem;}
article.main__area .main__image .ex__object__logo{width: 160px; top: 100px; margin: 0 0 0 -85px;}
}