@charset "utf-8";

/* ------------------------------
   TopPage Contents Style
   Responsive Style
   Animation
------------------------------ */

/*==================================================================
   TopPage Contents Style
==================================================================*/
html{font-size:calc(1000vw / 750);}
#container{max-width:100%;overflow:hidden;}
#container main{background: #e6e6e6;font-size:3.2rem;}

/*========== title ==========*/
.secttl_01{color:#fff;font-size:5rem;font-family:'Noto Serif JP';padding:6rem 3rem;background:#00ab79;text-align: center;letter-spacing: 0.18em;}

/*========== text ==========*/
.area_txt > p{margin-bottom: 1em;font-weight: bold;}
.area_txt > p:last-child{margin-bottom: 0;}

/*========== table ==========*/
table.tbl_hitresult{background: #fff;width: 100%;border:solid 2px #04162f;}
table.tbl_hitresult thead tr th{background: #04162f;padding: 1rem 0;font-size: 2.34rem;font-weight: bold;color: #fff;text-align: center;}
table.tbl_hitresult tbody tr td{padding: 1.1rem 0;font-size: 2.2rem;font-weight: bold;text-align: center;line-height: 1;}
table.tbl_hitresult tbody tr:first-child td{padding-top: 2.2rem;}
table.tbl_hitresult tbody tr > td:nth-child(1){width: 15%;}
table.tbl_hitresult tbody tr > td:nth-child(1) span.hit{background: #f00;padding: 0 .5rem;color: #fff;font-weight: bold;}
table.tbl_hitresult tbody tr > td:nth-child(2){width: 27%;}
table.tbl_hitresult tbody tr > td:nth-child(3){width: 27%;font-size: 2.6rem;}
table.tbl_hitresult tbody tr > td:nth-child(4){width: 31%;padding-right: 1.5rem;color: #f00;font-size: 2.6rem;text-align: right;}
table.tbl_hitresult tbody tr:last-child td{padding-bottom: 2.2rem;}

/*========== blc_common ==========*/
main > *[class^="blc_"] .inner{max-width:1000px;margin:0 auto;padding:8rem 5rem;}

/*========== blc_mv ==========*/
.blc_mv{background:#04162f url(/LP/7/top_mv_bg_sp.jpg) center 0 / auto 100% no-repeat;}
.blc_mv > .inner{position: relative;padding:11rem 3rem 0 !important;height:83rem;}
.blc_mv h1{margin-bottom: 5rem;width:40.4rem;}
.blc_mv .btn_login{position:absolute;top:2.8rem;right:3rem;width:20rem;}
.blc_mv .btn_login > a{display:block;color:#FFF;font-size:0.8em;font-weight:bold;line-height:1.2;text-align:center;text-indent:-1.5em;padding:0.6em 0.6em 0.6em 3em;border-radius:0.5rem;
background:#00ab79 url(/LP/7/icon_login.png) left 1em center / 1.2em no-repeat;}
.blc_mv .btn_login > a:hover{color:#fcfa2a;}
.blc_mv dl.hitresult{margin-right: 7.5rem;}
.blc_mv dl.hitresult > dt{margin-bottom: 2.3rem;width: 20.3rem;}
.blc_mv table.tbl_hitresult{border-color: #e6e6e6;}
.blc_mv table.tbl_hitresult thead tr th{background: #e6e6e6;color:#04162f;}

/*========== blc_race ==========*/
.blc_race{text-align: center;}
.blc_race > h2{background:#00ab79;padding: 1rem;
color:#fff;font-size:4rem;font-family:'Noto Serif JP';}
.blc_race > p.racename{background: #fff;padding: 2.2rem 0;
color:#00ab79;font-size:5rem;font-weight:bold;}

/*========== blc_regist ==========*/
.blc_regist{background: #04162f;color: #e6e6e6;text-align: center;}
.blc_regist.first > .inner{padding-top: 3rem;}
.blc_regist > .inner .ttl{font-size: 3.4rem;font-weight:bold;}
.blc_regist > .inner p.btn_regist{width:70%;max-width: 64rem;margin: 2.5rem auto;border-radius: 10rem;}
.blc_regist > .inner p.btn_regist > a{display: block;}
.blc_regist > .inner p.open_mailform{display:inline-block;margin-bottom: 2.5rem;color:#fff;font-size: 2.8rem;cursor: pointer;border-bottom:1px solid #fff;}
.blc_regist > .inner p.open_mailform:hover{color:#fcfa2a;border-color:#fcfa2a;}
.blc_regist > .inner ul.list_notes{font-size:0.7em;}
/*- area_form -*/
.blc_regist .area_form{display: none;margin-bottom:5rem;}
.blc_regist .area_form form input[name="mail_address"]{padding:0.8em 0.5em;font-size:3.2rem;border: 0.5rem solid #b6afa2;}
.blc_regist .area_form form input[name="mail_address"]::placeholder{font-size: 2.6rem;}
/*- area_sns -*/
.blc_regist .area_sns > .ttl{font-size: 3rem;font-weight:bold;}
.blc_regist .area_sns > .list_btn{max-width:310px;width:50%;margin:0 auto;}

/*========== blc_reasons ==========*/
.blc_reasons > .wrap{background: url(/LP/7/top_reasons_bg_img_sp.jpg) no-repeat right 0 / auto 47.1rem;}
.blc_reasons > .wrap .inner{background: url(/LP/7/top_reasons_bg_word.png) no-repeat 3.7rem 4.9rem / 15rem;padding-top: 35.5rem;}
.blc_reasons .txt_lead{background: #e6e6e6;padding-top: 7.8rem;margin-right: 5rem;}
.blc_reasons .txt_lead img{width: 56.5rem;}
.blc_reasons ul.list_reasons{display:flex;flex-wrap:wrap;align-items:center;justify-content: space-between;margin: 7.3rem auto;}
.blc_reasons ul.list_reasons > li{width: 20.7rem;}
.blc_reasons ul.list_data > li{margin-bottom: 1em;padding: .3em;color: #00ab79;font-weight: bold;border:solid 2px #00ab79;text-align: center;}

/*========== blc_hitresult ==========*/
.blc_hitresult{background:#bee0d6;}
.blc_hitresult > .inner .wrap{position: relative;}
.blc_hitresult > .inner .wrap p.btn_regist{position: absolute;bottom: 9rem;left: 0;right: 0;margin: auto;width:70%;max-width: 64rem;}
.blc_hitresult > .inner .wrap p.btn_regist > a{display: block;background: #00ab79;padding: .7em;color:#fff;font-size:2.8rem;text-align: center;border-radius: 3em;line-height: 1.4;}
.blc_hitresult > .inner .wrap .img_more{padding: 0 1.5rem;}

/*========== blc_change ==========*/
.blc_change{padding-bottom: 5rem;}
.blc_change > .wrap{background: url(/LP/7/top_change_bg_img_sp.jpg) no-repeat right 0 / auto 47.1rem;}
.blc_change > .wrap > .inner{background: url(/LP/7/top_change_bg_word.png) no-repeat 4.6rem 5rem / 15rem;padding-top: 36.9rem;padding-bottom: 5rem;}
.blc_change .txt_lead{background: #e6e6e6;margin-bottom: 7.3rem;padding-top: 7.7rem;margin-right: 5rem;}
.blc_change .txt_lead img{width: 54.4rem;}
.blc_change .ff_serif{font-family:'Noto Serif JP';font-size: 4.4rem;}
.blc_change .ff_serif .f_green{font-size: 6rem;}

/*========== blc_explain ==========*/
.blc_explain{padding-top: 4rem;}
.blc_explain .inner{position: relative;padding: 0 3rem 0 0 !important;}
.blc_explain .inner .secttl_01{position: absolute;top: -4rem;padding: 0;width: calc(100% - 5.2rem);font-size: 4rem;letter-spacing: inherit;}
.blc_explain .inner .secttl_01 .wrap{padding: 1rem;}
.blc_explain .inner .area_txt{background:#fff;padding: 8.5rem 2.3rem 4rem 5.2rem;}
.blc_explain .inner .area_txt p{font-size: 3rem;}
.blc_explain .inner .area_txt ul.list_desired{margin-bottom: 1em;padding: 1em;color: #00ab79;border:solid 2px #00ab79;}
.blc_explain .inner .area_txt ul.list_desired > li{position: relative;padding-left: 1em;font-weight: bold;}
.blc_explain .inner .area_txt ul.list_desired > li:before{position: absolute;content: "・";left: 0;top: 0;}

/*========== blc_voice ==========*/
.blc_voice{background: #bee0d6;}
.blc_voice .inner{padding: 5rem !important;}
.blc_voice ul.list_voice > li{background: #fff url(/LP/7/top_voice_bg.png) no-repeat center 9rem / 33.2rem auto;padding: 2rem 3rem;min-height: 32rem;border: solid 2px #04162f;overflow: hidden;}
.blc_voice ul.list_voice > li:not(:first-child){margin-top:5rem;}
.blc_voice ul.list_voice > li > dl{text-align: left;}
.blc_voice ul.list_voice > li > dl > dt{color:#00ab79;font-size:3rem;font-weight:bold;margin-bottom:2.5rem;padding-bottom:1rem;border-bottom: solid 2px #04162f;}
.blc_voice ul.list_voice > li > dl > dd{font-size: 2.2rem;}

/*==================================================================
   Responsive Style 1000px以上 ** PC Only **
==================================================================*/
@media screen and (min-width: 1000px) {
html{font-size: 62.5%;}
#container main{font-size:3.7rem;}

/*========== title ==========*/
.secttl_01{font-size:6.8rem;}

/*========== text ==========*/
.area_txt p{font-weight: normal;}

/*========== table ==========*/
table.tbl_hitresult{border-width:3px;}
table.tbl_hitresult thead tr th{font-size: 3.5rem;}
table.tbl_hitresult tbody tr td{padding: 1.1rem 0;font-size: 3rem;}
table.tbl_hitresult tbody tr:first-child td{padding-top: 2.2rem;}
table.tbl_hitresult tbody tr > td:nth-child(3){font-size: 3.8rem;}
table.tbl_hitresult tbody tr > td:nth-child(4){font-size: 3.8rem;padding-right: 1.5rem;}
table.tbl_hitresult tbody tr:last-child td{padding-bottom: 2.2rem;}

/*========== blc_common ==========*/
main > *[class^="blc_"] .inner{padding:10rem 5rem;}

/*========== blc_mv ==========*/
.blc_mv{background-image:url(/LP/7/top_mv_bg_pc.jpg);}
.blc_mv > .inner{padding:11.6rem 2.5rem 0 !important;height:85.4rem;}
.blc_mv h1{margin-left: 3.5rem;margin-bottom: 3rem;width:34.3rem;}
.blc_mv .btn_login{top:4rem;right:2.5rem;}
.blc_mv .btn_login > a{font-size:2.5rem;}
.blc_mv dl.hitresult{margin-right: 27rem;}
.blc_mv dl.hitresult > dt{margin-bottom: 1.5rem;}
.blc_mv table.tbl_hitresult thead tr th{font-size: 2.6rem;}
.blc_mv table.tbl_hitresult tbody tr td{font-size: 2.4rem;}
.blc_mv table.tbl_hitresult tbody tr > td:nth-child(3),
.blc_mv table.tbl_hitresult tbody tr > td:nth-child(4){font-size: 2.8rem;}

/*========== blc_race ==========*/
.blc_race > h2{font-size:4.5rem;}
.blc_race > p.racename{padding: 3.8rem 0;}

/*========== blc_regist ==========*/
.blc_regist.first > .inner{padding-top: 8rem;}
.blc_regist > .inner .ttl{font-size: 4.4rem;}
.blc_regist > .inner p.btn_regist{margin: 6.5rem auto;}
.blc_regist > .inner p.open_mailform{margin-bottom: 5rem;font-size: 3.2rem;}
.blc_regist > .inner ul.list_notes{font-size:2.5rem;}
/*- area_sns -*/
.blc_regist .area_sns > .ttl{font-size: 3rem;}
.blc_regist .area_sns > .list_btn{max-width:310px;width:50%;margin:0 auto;}

/*========== blc_reasons ==========*/
.blc_reasons > .wrap{background: url(/LP/7/top_reasons_bg_img_pc.jpg) no-repeat calc(50% + 38rem) 0 / auto 55.8rem;}
.blc_reasons > .wrap .inner{background: url(/LP/7/top_reasons_bg_word.png) no-repeat 5rem 6.1rem / 17.8rem;padding-top: 47.2rem;}
.blc_reasons .txt_lead{padding-top: 5rem;margin-right: 4rem;}
.blc_reasons .txt_lead img{width: auto;}
.blc_reasons ul.list_reasons{margin: 9.3rem auto;}
.blc_reasons ul.list_reasons > li{width: auto;}
.blc_reasons ul.list_data > li{font-size: 4.6rem;font-weight: normal;border-width:3px;}

/*========== blc_hitresult ==========*/
.blc_hitresult > .inner .wrap p.btn_regist{bottom: 14.5rem;}
.blc_hitresult > .inner .wrap p.btn_regist > a{padding: 1em;font-size:3.8rem;}

/*========== blc_change ==========*/
.blc_change{padding-bottom: 15rem;}
.blc_change > .wrap{background: url(/LP/7/top_change_bg_img_pc.jpg) no-repeat calc(50% + 38rem) 0 / auto 55.8rem;}
.blc_change > .wrap > .inner{background: url(/LP/7/top_change_bg_word.png) no-repeat 5rem 6.1rem / 17.8rem;padding-top: 43.2rem;padding-bottom: 9rem;}
.blc_change .txt_lead{margin-bottom: 9rem;padding-top: 8.8rem;margin-right: 7.1rem;}
.blc_change .txt_lead img{width: auto;}
.blc_change .ff_serif{font-size: 6.4rem;}
.blc_change .ff_serif .f_green{font-size: 9rem;}

/*========== blc_explain ==========*/
.blc_explain{background:linear-gradient(to right,#fff,#fff 49%,#e6e6e6 50%,#e6e6e6);padding-top: 6.4rem;}
.blc_explain .inner{padding: 0 2.5rem !important;}
.blc_explain .inner .secttl_01{right: 0;top: -6.4rem;padding: 1.5rem;margin-right: 5rem;width: 1000%;font-size: 5.6rem;}
.blc_explain .inner .secttl_01 .wrap{float: right;width: 90rem;}
.blc_explain .inner .area_txt{padding: 8.6rem 2.5rem 8rem;}
.blc_explain .inner .area_txt p{font-size: inherit;}
.blc_explain .inner .area_txt ul.list_desired{margin: 8rem 0;
border-width:3px;}
.blc_explain .inner .area_txt ul.list_desired > li{font-size: 4.6rem;font-weight: normal;}

/*========== blc_voice ==========*/
.blc_voice .inner{padding: 15rem 0 !important;}
.blc_voice ul.list_voice > li{background-position: center 12.5rem;background-size: 52.3rem auto;padding: 3rem 4rem;min-height: 50rem;border-width: 3px;}
.blc_voice ul.list_voice > li > dl > dt{margin-bottom:3rem;font-size:4rem;border-width:3px;}
.blc_voice ul.list_voice > li > dl > dd{font-size: 3rem;}
/**/}/**/

/*==================================================================
   Animation
==================================================================*/
.js_inview{opacity: 0;}

/*-- flash --*/
.animated_flash{
  -webkit-animation: 1.2s ease both flash infinite;
  animation: 1.2s ease both flash infinite;
}
@-webkit-keyframes flash {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes flash {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/*-- smoothLeft inview --*/
.animated_smoothLeft{position: relative;overflow: hidden;}
.animated_smoothLeft::before{content: "";position: absolute;left: 0;right: 0;top: 0;bottom: 0;z-index: 1;background: #00ab79;margin: 3.3rem 0;}
.animated_smoothLeft.active{opacity: 1;
  -webkit-animation: slideInLeft 0.7s ease 1;
  animation: slideInLeft 0.7s ease 1;
}
.animated_smoothLeft.active::before{
  -webkit-animation: smoothLeft 0.8s 0.6s ease forwards;
  animation: smoothLeft 0.8s 0.6s ease forwards;
}
@-webkit-keyframes smoothLeft{
  100%{
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}
@keyframes smoothLeft{
  100%{
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}

/*-- fadeZoomIn inview --*/
.animated_fadeZoomIn.active{opacity: 1;
   -webkit-animation:fadeZoomIn 1.5s ease 1;
   animation: fadeZoomIn 1.5s ease 1;
}
@-webkit-keyframes fadeZoomIn {
   from {
      opacity: 0;
      -webkit-transform: scale3d(0.9, 0.9, 0.9);
      transform: scale3d(0.9, 0.9, 0.9);
   }
   50% {opacity: 1;}
}
@keyframes fadeZoomIn {
   from {
      opacity: 0;
      -webkit-transform: scale3d(0.9, 0.9, 0.9);
      transform: scale3d(0.9, 0.9, 0.9);
   }
   50% {opacity: 1;}
}

/*-- fadeIn inview --*/
.animated_fadeIn.active{opacity: 1;
   -webkit-animation:fadeIn 1.5s ease 1;
   animation: fadeIn 1.5s ease 1;
}
@-webkit-keyframes fadeIn {
   from {opacity: 0;}
   to {opacity: 1;}
}
@keyframes fadeIn {
   from {opacity: 0;}
   to { opacity: 1;}
}

/*-- fadeInUp inview --*/
.animated_fadeInUp.active{opacity: 1;
   -webkit-animation:fadeInUp 0.7s ease 1;
   animation: fadeInUp 0.7s ease 1;
}
@-webkit-keyframes fadeInUp {
   from {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
   }
   to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
   }
}
@keyframes fadeInUp {
   from {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
   }
   to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
   }
}

/*-- fadeInDown inview --*/
.animated_fadeInDown.active{opacity: 1;
   -webkit-animation:fadeInDown 0.7s ease 1;
   animation: fadeInDown 0.7s ease 1;
}
@-webkit-keyframes fadeInDown {
   from {
      opacity: 0;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
   }
   to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
   }
}
@keyframes fadeInDown {
   from {
      opacity: 0;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
   }
   to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
   }
}

/*-- fadeInleft inview --*/
.animated_fadeInLeft.active{opacity: 1;
  -webkit-animation: fadeInLeft 0.7s ease 1;
   animation: fadeInLeft 0.7s ease 1;
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

/*-- fadeInRight inview --*/
.animated_fadeInRight.active{opacity: 1;
  -webkit-animation: fadeInRight 0.7s ease 1;
   animation: fadeInRight 0.7s ease 1;
}
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

/*-- slideInLeft inview --*/
.animated_slideInLeft.active{opacity: 1;
   -webkit-animation:slideInLeft 0.7s ease 1;
   animation: slideInLeft 0.7s ease 1;
}
@-webkit-keyframes slideInLeft {
   from {
     -webkit-transform: translate3d(-100%, 0, 0);
     transform: translate3d(-100%, 0, 0);
     visibility: visible;
   }
    to {
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
 }
 @keyframes slideInLeft {
   from {
     -webkit-transform: translate3d(-100%, 0, 0);
     transform: translate3d(-100%, 0, 0);
     visibility: visible;
   }
   to {
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
 }

/*-- slideInRight inview --*/
.animated_slideInRight.active{opacity: 1;
   -webkit-animation:slideInRight 0.7s ease 1;
   animation: slideInRight 0.7s ease 1;
}
 @-webkit-keyframes slideInRight {
   from {
     -webkit-transform: translate3d(100%, 0, 0);
     transform: translate3d(100%, 0, 0);
     visibility: visible;
   }
   to {
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
 }
 @keyframes slideInRight {
   from {
     -webkit-transform: translate3d(100%, 0, 0);
     transform: translate3d(100%, 0, 0);
     visibility: visible;
   }
   to {
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
 }

/*-- flipInX inview --*/
.animated_flipInX.active{opacity: 1;
   -webkit-animation:flipInX 1s ease 1;
   animation: flipInX 1s ease 1;
}
@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

/*-- shiny --*/
.animated_shiny{position: relative;overflow: hidden;z-index: 1;}
.animated_shiny::after{content: '';position: absolute;top: -10rem;left: -10rem;width: 5rem;height: 5rem;
background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);
   -webkit-animation:shiny 2s ease-in-out infinite;
   animation: shiny 2s ease-in-out infinite;
}
@-webkit-keyframes shiny {
    0% {
        transform: scale(0) rotate(25deg);
        opacity: 0;
    }
    50% {
        transform: scale(1) rotate(25deg);
        opacity: 1;
    }
    100% {
        transform: scale(50) rotate(25deg);
        opacity: 0;
    }
}
@keyframes shiny {
    0% {
        transform: scale(0) rotate(25deg);
        opacity: 0;
    }
    50% {
        transform: scale(1) rotate(25deg);
        opacity: 1;
    }
    100% {
        transform: scale(50) rotate(25deg);
        opacity: 0;
    }
}