@charset "UTF-8";
/* 
// base
// layout
// header
// footer
// 404 page
*/

@import url('https://cdn.jsdelivr.net/npm/yakuhanjp@3.4.1/dist/css/yakuhanjp.min.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

:root {
  --color-black: #000000;
  --color-yellow: #fff000;
  --color-gray: #4d4d4d;
  --color-exLightGray: #efefef;
  --width-pc: 108rem;
  --width-pc_contents: 93.6rem;
  --width-sp: 100%;
  --width-sp_contents: 88%;
}

html{
  font-size:62.5%;
}

@media screen and (max-width:767px){
  html{
    font-size : 1.333vw;
  }
}

@media screen and (min-width: 768px) and (max-width: 1280px){
  html{
    font-size:0.69444vw;
  }
}

@media screen and (min-width: 1920px){
  html{
    font-size:0.52083vw;
  }
}

body{
  color: var(--color-black);
  font-family: YakuHanJP, 'Montserrat','Zen Kaku Gothic New', sans-serif;
  font-feature-settings: 'palt';
  font-size:1.7rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.8;
  min-width: var(--width-pc);
  overflow-x: hidden;
  width: 100%;
  -webkit-font-smoothing  : antialiased;
	-moz-osx-font-smoothing : grayscale;
  -webkit-text-size-adjust: 100%;
}

.main{
  padding: 9.6rem 0 0;
}


a{
  color:var(--color-black);
  display: block;
  text-decoration:none;
}

a:hover{

}

img{
  display: block;
  max-width: 100%;
}


/*
// header
*/

.header{
  background: #fff;
  left:0;
  height: 9.6rem;
  padding: 0;
  position: fixed;
  top:0;
  transition: .3s;
  transition-timing-function: ease-out;
  z-index: 101;
  width: 100%;
}

.header--scrolled{
  border-bottom:0.1rem solid #eee;
}

.header--scrolling{
  border-bottom:none;
  top:-9.6rem;
}

.header--inner{
  align-items: center;
  display: flex;
  height: 9.6rem;
  margin: auto;
  position: relative;
  width: var(--width-pc);
  z-index: 2;
}

.header__sp-nav-open-btn{
  display: none;
}

.header__sp-nav-open-btn span{}

.header__logo{
  margin: 0 8.6rem 0 0;
  position: relative;
  transition: .2s;
  width: 19.26913rem;
}

.header__logo:hover{
  transform:skew(1.5deg,1deg) scaleX(0.95) scaleY(1.02);
  transform-origin: center;
}

.header__logo:before{
  background: url("../images/logo/logo--discovery_header--shadow.svg") no-repeat center center/100% auto;
  content:'';
  left:0;
  height: 100%;
  opacity: 0;
  position: absolute;
  top:0;
  transition: .1s;
  width: 100%;
  z-index: -1;
}

.header__logo:hover:before{
  opacity: 0.25;
  transform:scaleX(1.02) translate(0.2rem,0.3rem);
  transform-origin: right;
}


.header__nav{
  align-items: center;
  display: flex;
  letter-spacing: -0.05em;
}

.header__nav > dl{
  position: relative;
}

.header__nav > dl:last-child{
  margin: 0;
}

.header__nav > dl > dt{
  align-items: center;
  display: flex;
  font-size:1.4rem;
  height: 9.6rem;
  padding: 0 3rem 0 0;
}

.header__nav > dl > dt > a{
  margin: 0.35em 0 0;
  position: relative;
}

.header__nav > dl > dt > a:before{
  background: var(--color-yellow);
  bottom: 0;
  content:'';
  height: 0.1rem;
  position: absolute;
  left:0;
  transition:.2s;
  width: 0%;
}

.header__nav > dl.active > dt > a:before{
  width: 100%;
}

.header__nav__3rd-level-open-btn{
  display: none;
}

.header__nav > dl > dd{
  /*background: rgba(255,255,255,0.75);*/
  display: block;
  font-size:1.3rem;
  left:0;
  opacity:0;
  padding: 1em 0;
  position: fixed;
  top:9.6rem;
  transition:.2s;
  visibility: hidden;
  width: 100%;
}

.header__nav > dl.active > dd{
  opacity:1;
  visibility: visible;
}

.header__nav__3rd-level{
  margin: auto;
  width: var(--width-pc);
}

.header__nav > dl:nth-child(1) > dd > .header__nav__3rd-level{
  padding-left: 28rem;
}

.header__nav > dl:nth-child(2) > dd > .header__nav__3rd-level{
  padding-left: 39rem;
}

.header__nav > dl:nth-child(3) > dd > .header__nav__3rd-level{
  padding-left: 55rem;
}

.header__nav > dl:nth-child(4) > dd > .header__nav__3rd-level{
  padding-left: 63.5rem;
}

/* javascript add div for background animation*/
#js-3rdLevelNavBgAnim{
  background: rgba(230,230,230,0.9);
  box-sizing: content-box;
  left:0;
  position: fixed;
  top:9.6rem;
  transition: .2s;
  width:100%;
  z-index: -1;
}


.header__nav > dl > dd a{
  align-items: center;
  display: flex;
  line-height: 1;
  margin: 0 0 0.8em;
}

.header__nav > dl > dd a:last-child{
  margin: 0;
}

.header__nav > dl > dd a:hover{
  text-decoration: underline;
}

.header__nav > dl > dd a:before{
  border-right:0.1rem solid var(--color-black);
  border-top:0.1rem solid var(--color-black);
  content:'';
  height: 0.6em;
  margin: 0 1em 0 0;
  transform: rotate(45deg);
  width: 0.6em;
}

.header__nav > dl.header__nav__link--official-site > dt{
  align-items: center;
  display: flex;
  padding: 0;
}

/*
.header__nav > dl.header__nav__link--official-site > dt:after{
  background: url("../images/common/icon--link_target-blank.svg") no-repeat center center/100% auto;
  content:'';
  margin: 0 0 0 0.2em;
  height:1.19446rem; 
  width:1.19446rem; 
}*/

.header__entry-btn{
  align-items: center;
  background: var(--color-yellow);
  border-radius: 2.24rem;
  display: flex;
  font-size: 2.245rem;
  font-weight: 600;
  height: 4.48rem;
  justify-content: center;
  letter-spacing: 0.05em;
  margin: 0 0 0 2.5rem;
  transition: .1s;
  width: 16.8rem;
}

.header__entry-btn:hover{
  box-shadow: 0 0.2rem 0.2rem rgba(0,0,0,0.02);
  transform:scale(1.04) !important;
  transform-origin: center;
}


/*
// footer
*/

.footer{
  letter-spacing: -0.05em;
  padding: 7rem 0 8rem;
  width: 100%;
}

.footer--inner{
  margin: auto;
  width: var(--width-pc_contents);
}

.footer__nav{
  align-items: flex-start;
  display: flex;
  line-height: 1.5;
  margin: 0 0 6rem;
}

.footer__nav > a,
.footer__nav > dl{
  margin: 0 6.3rem 0 0;
}

.footer__nav a{
  transition: .2s;
}
.footer__nav a:hover{
  text-decoration: underline;
  text-shadow: 0 0.1em 0 rgba(0,0,0,0.01);
}

.footer__nav > a:first-child{
  font-weight: 500;
}

.footer__nav > dl:last-child{
  margin: 0;
}

.footer__nav dl > dt{
  font-size: 1.6rem;
  margin: 0 0 2.5rem;
}

.footer__nav dl > dt a{
  font-weight: 500;
}

.footer__nav dl > dd{
  font-size:1.4rem;
}

.footer__nav dl > dd > a{
  margin: 0 0 0.35em;
}

.footer__logo{
  margin: 0 0 1rem auto;
  width: 19.26913rem;
}

.footer__link--wrap{
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.footer__sns{
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 14.7rem;
}

.footer__sns li{
  transition: .2s;
  width: 3.70166rem;
}

.footer__sns li:hover{
  transform: scale(1.15);
  transform-origin: bottom center;
}

.footer__sns li:nth-child(2){
  width: 3.4rem;
}

.footer__link{
  align-items: center;
  display: flex;
  font-size:1.4rem;
}

.footer__link li{
  align-items: center;
  display: flex;
}

.footer__link li:after{
  content:'|';
  margin: 0 0.4em;
}

.footer__link li:last-child:after{
  content:none;
}

.footer__link li a:hover{
  text-decoration: underline;
}

.footer__copyright{
  font-family: YakuHanJP,'Zen Kaku Gothic New', sans-serif;
  font-size:1.4rem;
  text-align:right;
}


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

sp style

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

@media screen and (max-width:767px){
  body{
    font-size:2.5rem;
    min-width: 320px;
  }
  
  /*body.spNavActive{
    position:fixed;
    touch-action:none;
  }*/
  
  .main{
    padding: 10rem 0 0;
  }
  
  /*
  // header (max1028px is sp style) media query is different
  */
  
  
  /*
  // footer
  */

  .footer{
    padding: 3.8rem 0 3rem;
  }
  
  .footer--inner{
    width: var(--width-sp_contents);
  }

  .footer__nav{
    display: none;
  }
  
  .footer__logo{
    margin: 0 auto 4.8rem;
    width: 27rem;
  }

  .footer__link--wrap{
    display: block;
    text-align: center;
  }

  .footer__sns{
    margin: 0 auto 3.5rem;
    width: 27.2rem;
  }

  .footer__sns li{
    width: 4.96rem;
  }

  .footer__sns li:nth-child(2){
    width: 4.59254rem;
  }

  .footer__link{
    flex-wrap: wrap;
    font-size:2rem;
    justify-content: center;
    margin: 0 auto 3rem;
    width: 62rem;
  }

  .footer__link li{
    align-items: center;
    display: flex;
  }

  .footer__link li:after{
    content:'|';
    margin: 0 0.4em;
  }
  
  .footer__link li:nth-child(3):before{
    content:'|';
    margin: 0 0.4em;
  }

  .footer__link li:last-child:after{
    content:none;
  }

  .footer__copyright{
    font-size:2rem;
    text-align:center;
  }
}


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

header style (max 1028px is sp style)

*******************************/
@media screen and (max-width:1028px){
  /*
  // header
  */

  .header{
    height: 10rem;
    padding: 0;
    width: 100%;
  }

  .header:after{
    content:none;
  }

  .header--inner{
    height: 10rem;
    width: 100%;
    z-index: 2;
  }
  
  .header--scrolled .header--inner{
    border-bottom:0.2rem solid #ddd;
  }
  
  .header--inner:before{
    background: #fff;
    content:'';
    left:0;
    height: 100%;
    position: absolute;
    top:0;
    width: 100%;
    z-index: -1;
  }

  .header__sp-nav-open-btn{
    display: block;
    height: 3.2rem;
    margin: 2.5rem;
    position: relative;
    width: 4.5rem;
  }

  .header__sp-nav-open-btn span{
    background: var(--color-black);
    height: 0.2rem;
    left:0;
    position: absolute;
    transition: .2s;
    width: 4.5rem;
  }
  
  .header__sp-nav-open-btn span:nth-child(1){
    top:0;
  }
  
  .header__sp-nav-open-btn span:nth-child(2){
    top:1.6rem;
  }
  
  .header__sp-nav-open-btn span:nth-child(3){
    top:3.2rem;
  }
  
  .header__sp-nav-open-btn.active  span:nth-child(1){
    top:50%;
    transform: rotate(30deg);
  }
  
  .header__sp-nav-open-btn.active  span:nth-child(2){
    visibility: hidden;
  }
  
  .header__sp-nav-open-btn.active  span:nth-child(3){
    top:50%;
    transform: rotate(-30deg);
  }

  .header__logo{
    margin: 0 0 0 0.5rem;
    width: 19.26913rem;
  }

  .header__nav{
    background: #fff;
    display: block;
    height: calc(100vh - 10rem);
    left:0;
    letter-spacing: -0.05em;
    margin: 0;
    overflow-y: scroll;
    padding: 0 0 16rem;
    position: fixed;
    top:calc(10rem - 100vh);
    transition: .5s;
    transition-timing-function: ease-out;
    width: 100%;
    visibility: hidden;
    z-index: -2;
  }
  
  .header__nav.active{
    top:10rem;
    visibility: visible;
  }
  
  .header__nav > dl{
    margin: 0;
    opacity: 0;
    position: relative;
  }
  
  .header__nav.active > dl{
    opacity: 1;
  }
  
  .header__nav > dl:first-child{
    box-shadow:0 0.8rem 0.8rem -0.8rem rgba(0,0,0,0.2) inset;
  }

  .header__nav > dl:last-child{
    margin: 0;
  }

  .header__nav > dl > dt{
    align-items: center;
    background: #fff;
    border-bottom:0.2rem solid #ccc;
    display: flex;
    font-size:3rem;
    height: 8rem;
    justify-content: space-between;
    padding: 0;
    position: relative;
  }
  
  .header__nav > dl > dt > a{
    align-items: center;
    display: flex;
    font-weight: 600;
    height: 8rem;
    margin: 0;
    padding: 0 1em;
  }
  
  .header__nav > dl > dt > a:before{
    content:none;
  }
  
  .header__nav > dl > dt > a:after{
    border-bottom: 0.5em solid transparent;
    border-left: 0.5em solid var(--color-black);
    border-right: 0.5em solid transparent;
    border-top: 0.5em solid transparent;
    content:'';
    margin: 0 0 0 0.8em;
    height: 1em;
    width: 1em;
  }
  
  .header__nav > dl.header__nav__link--official-site > dt > a:after{
    border:none;
    margin: 0 0 0 0.2em;
    height: 0.8em;
    width: 0.8em;
  }
  
  .header__nav__3rd-level-open-btn{
    border-left: 0.2rem solid #ccc;
    display: block;
    position: relative;
    height: 8rem;
    width: 8rem;
  }
  
  .header__nav__3rd-level-open-btn span{
    background: #666;
    height: 0.2rem;
    left:2.7rem;
    position: absolute;
    top:3.9rem;
    transform-origin: center center;
    transition: .2s;
    width: 2.6rem;
  }
  
  .header__nav__3rd-level-open-btn span:nth-child(2){
    transform: rotate(90deg);
  }
  
  .header__nav > dl > dt.active .header__nav__3rd-level-open-btn span:nth-child(2){
    transform: rotate(0deg);
  }
  
  .header__nav > dl > dd{
    background: #f2f2f2;
    display: none;
    font-size:2.6rem;
    opacity: 1;
    padding: 0;
    position: static;
    visibility: visible;
    width: 100%;
  }
  
  /*
  .header__nav > dl > dt.active + dd{
    display: block;
  }*/
  
  .header__nav__3rd-level{
    margin: auto;
    padding-left: 0 !important;
    width: var(--width-sp);
  }

  .header__nav > dl > dd a{
    align-items: center;
    border-bottom:0.2rem solid #ccc;
    display: flex;
    margin: 0;
    padding: 0.8em 0 0.8em 2em;
    position: relative;
    width: 100%;
  }
  
  .header__nav > dl > dd a:before{
    border-bottom: 0.5em solid transparent;
    border-left: 0.5em solid #999;
    border-right: 0.5em solid transparent;
    border-top: 0.5em solid transparent;
    content:'';
    margin: 0 0 0 0.8em;
    height: 1em;
    position: absolute;
    right: 0.75em;
    top:50%;
    transform: translateY(-50%);
    width: 1em;
  }
  
  .header__nav > dl.header__nav__link--official-site > dt{
    align-items: center;
    display: flex;
  }

  .header__nav > dl.header__nav__link--official-site > dt:after{
    margin: 0 1em 0 0;
    height:2.5rem; 
    width:2.5rem; 
  }

  .header__entry-btn{
    align-items: center;
    background: var(--color-yellow);
    border-radius: 2.75rem;
    display: flex;
    font-size: 2.4rem;
    height: 5.5rem;
    justify-content: center;
    letter-spacing: 0.05em;
    margin: 0 2.5rem 0 auto;
    width: 22rem;
  }
}


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

tablet style  (.isTablet class)

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

body.isTablet{ /* font-size bug for ipad safari */
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

.isTablet .main{
  padding: 10rem 0 0;
}

/*
// header
*/

.isTablet .header{
  height: 10rem;
  padding: 0;
  width: 100%;
}

.isTablet .header:after{
  content:none;
}

.isTablet .header--inner{
  height: 10rem;
  width: 100%;
  z-index: 2;
}
  
.isTablet .header--scrolled .header--inner{
  border-bottom:0.2rem solid #ddd;
}
  
.isTablet .header--inner:before{
  background: #fff;
  content:'';
  left:0;
  height: 100%;
  position: absolute;
  top:0;
  width: 100%;
  z-index: -1;
}

.isTablet .header__sp-nav-open-btn{
  display: block;
  height: 3.2rem;
  margin: 2.5rem;
  position: relative;
  width: 4.5rem;
}

.isTablet .header__sp-nav-open-btn span{
  background: var(--color-black);
  height: 0.2rem;
  left:0;
  position: absolute;
  transition: .2s;
  width: 4.5rem;
}
  
.isTablet .header__sp-nav-open-btn span:nth-child(1){
  top:0;
}
  
.isTablet .header__sp-nav-open-btn span:nth-child(2){
  top:1.6rem;
}
  
.isTablet .header__sp-nav-open-btn span:nth-child(3){
  top:3.2rem;
}
  
.isTablet .header__sp-nav-open-btn.active  span:nth-child(1){
  top:50%;
  transform: rotate(30deg);
}
  
.isTablet .header__sp-nav-open-btn.active  span:nth-child(2){
  visibility: hidden;
}

.isTablet .header__sp-nav-open-btn.active  span:nth-child(3){
  top:50%;
  transform: rotate(-30deg);
}

.isTablet .header__logo{
  margin: 0 0 0 0.5rem;
  width: 19.26913rem;
}

.isTablet .header__nav{
  background: #fff;
  display: block;
  height: calc(100vh - 10rem);
  left:0;
  letter-spacing: -0.05em;
  margin: 0;
  overflow-y: scroll;
  padding: 0 0 16rem;
  position: fixed;
  top:calc(10rem - 100vh);
  transition: .5s;
  transition-timing-function: ease-out;
  width: 100%;
  visibility: hidden;
  z-index: -2;
}

.isTablet .header__nav.active{
  top:10rem;
  visibility: visible;
}

.isTablet .header__nav > dl{
  margin: 0;
  position: relative;
}

.isTablet .header__nav > dl:first-child{
  box-shadow:0 0.8rem 0.8rem -0.8rem rgba(0,0,0,0.2) inset;
}

.isTablet .header__nav > dl:last-child{
  margin: 0;
}

.isTablet .header__nav > dl > dt{
  align-items: center;
  background: #fff;
  border-bottom:0.2rem solid #ccc;
  display: flex;
  font-size:3rem;
  height: 8rem;
  justify-content: space-between;
  padding: 0;
  position: relative;
}

.isTablet .header__nav > dl > dt > a{
  align-items: center;
  display: flex;
  font-weight: 600;
  height: 8rem;
  margin: 0;
  padding: 0 1em;
}

.isTablet .header__nav > dl > dt > a:before{
  content:none;
}

.isTablet .header__nav > dl > dt > a:after{
  border-bottom: 0.5em solid transparent;
  border-left: 0.5em solid var(--color-black);
  border-right: 0.5em solid transparent;
  border-top: 0.5em solid transparent;
  content:'';
  margin: 0 0 0 0.8em;
  height: 1em;
  width: 1em;
}

.isTablet .header__nav > dl.header__nav__link--official-site > dt > a:after{
  content:none;
}

.isTablet .header__nav__3rd-level-open-btn{
  align-items: center;
  border-left: 0.2rem solid #ccc;
  display: flex;
  justify-content: center;
  position: relative;
  height: 8rem;
  width: 8rem;
}

.isTablet .header__nav__3rd-level-open-btn span{
  background: #666;
  height: 0.2rem;
  left:2.7rem;
  position: absolute;
  top:3.9rem;
  transform-origin: center center;
  transition: .2s;
  width: 2.6rem;
}
  
.isTablet .header__nav__3rd-level-open-btn span:nth-child(2){
  transform: rotate(90deg);
}
  
.isTablet .header__nav > dl > dt.active .header__nav__3rd-level-open-btn span:nth-child(2){
  transform: rotate(0deg);
}

.isTablet .header__nav > dl > dd{
  background: #f2f2f2;
  display: none;
  font-size:2.6rem;
  opacity: 1;
  padding: 0;
  position: static;
  visibility: visible;
  width: 100%;
}

.isTablet .header__nav__3rd-level{
  margin: auto;
  padding-left: 0 !important;
  width: var(--width-sp);
}

.isTablet .header__nav > dl > dd a{
  align-items: center;
  border-bottom:0.2rem solid #ccc;
  display: flex;
  margin: 0;
  padding: 0.8em 0 0.8em 2em;
  position: relative;
  width: 100%;
}

.isTablet .header__nav > dl > dd a:before{
  content:none;
}

.isTablet .header__nav > dl > dd a:after{
  border-bottom: 0.5em solid transparent;
  border-left: 0.5em solid #999;
  border-right: 0.5em solid transparent;
  border-top: 0.5em solid transparent;
  content:'';
  margin: 0 0 0 0.8em;
  height: 1em;
  position: absolute;
  right: 0.75em;
  top:50%;
  transform: translateY(-50%);
  width: 1em;
}

.isTablet .header__nav > dl.header__nav__link--official-site > dt{
  align-items: center;
  display: flex;
}

.isTablet .header__nav > dl.header__nav__link--official-site > dt:after{
  margin: 0 1em 0 0;
  height:2.5rem; 
  width:2.5rem; 
}

.isTablet .header__entry-btn{
  align-items: center;
  background: var(--color-yellow);
  border-radius: 2.75rem;
  display: flex;
  font-size: 2.4rem;
  height: 5.5rem;
  justify-content: center;
  letter-spacing: 0.05em;
  margin: 0 2.5rem 0 auto;
  width: 22rem;
}



/*
// footer
*/
.isTablet .footer__nav > a,
.isTablet .footer__nav > dl{
  margin: 0 3.8rem 0 0;
}

.isTablet .footer__nav > dl:last-child{
  margin: 0;
}


/*
// 404 page
*/

.error-404{}
.error-404__contents{
  align-items: center;
  background: var(--color-yellow);
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  overflow: hidden;
  width:100vw;
}

.error-404__contents__heading{
  line-height: 1.05;
  margin: -0.5em 0 0;
}

.error-404__contents__heading__numbers--wrap{
  align-items: center;
  display: flex;
  font-size: 6.2em;
  justify-content: center;
}

.error-404__contents__heading__numbers--wrap.active span{
  opacity:1;
}

.error-404__contents__heading__numbers--wrap.active span:nth-child(1){
  animation: error404ContentsHeadingNumbers--01 1s;
  animation-delay:.2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  transform: translateX(2em);
  transform-origin: bottom left;
  opacity: 0;
}

@keyframes error404ContentsHeadingNumbers--01 {
  0% {
    transform: skewX(-8deg) translateX(2em) scale(1,1);
    opacity:0;
  }
  
  50% {
    transform: skewX(3deg) translateX(0em) scale(1,1);
    opacity:1;
  }
  
  60%{
    transform: skewX(-1deg) translateX(0em) scale(1,1);
    opacity:1;
  }
  
  95%{
    transform: skewX(0.3deg) translateX(0em) scale(1,1);
    opacity:1;
  }
  
  100%{
    transform: skewX(0deg) translateX(0em) scale(1,1);
    opacity:1;
  }
}

.error-404__contents__heading__numbers--wrap.active span:nth-child(2){
  animation: error404ContentsHeadingNumbers--01 1s;
  animation-delay:.4s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  transform: translateX(2em);
  transform-origin: bottom left;
  opacity: 0;
}

.error-404__contents__heading__numbers--wrap.active span:nth-child(3){
  animation: error404ContentsHeadingNumbers--03 1.6s;
  animation-delay:.6s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  transform: translateX(2em);
  transform-origin: bottom left;
  opacity: 0;
}

@keyframes error404ContentsHeadingNumbers--03 {
  0% {
    transform: skewX(-8deg) translateX(2em) scale(1,1) translateY(0);
    opacity:0;
  }
  
  30% {
    transform: skewX(3deg) translateX(-0.1em) scale(1,1) translateY(0);
    opacity:1;
  }
  
  40%{
    transform: skewX(-2deg) translateX(-0.1em) scale(0.97,1) translateY(0);
    opacity:1;
  }
  
  50%{
    transform: skewX(0.3deg) translateX(-0.1em) scale(1,1) translateY(0);
    opacity:1;
  }
  
  60%{
    transform: skewX(0deg) translateX(-0.075em) scale(1,1) translateY(-0.05em);
    opacity:1;
  }
  
  70%{
    transform: skewX(0deg) translateX(-0.05em) scale(1,1) translateY(0);
    opacity:1;
  }
  
  80%{
    transform: skewX(0deg) translateX(-0.025em) scale(1,1) translateY(-0.05em);
    opacity:1;
  }
  
  90%{
    transform: skewX(0deg) translateX(.0em) scale(1,1) translateY(0);
    opacity:1;
  }
  
  100%{
    transform: skewX(0deg) translateX(0em) scale(1,1) translateY(0);
    opacity:1;
  }
}



.error-404__contents__heading__numbers__text{
  font-size: 2.5em;
}

.error-404__contents__description{
  font-size: 1.25em;
  margin: 4em auto;
  text-align: center;
}

.error-404__contents__link{
  
}