@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Damion&display=swap');

body{ line-height: 1.8; letter-spacing: 0.05em; }
a, a:link, a:visited { color: #5098d5; text-decoration: none;}
a:hover { color: #5098d5; text-decoration: underline;}
@media screen and (min-width: 768px){
    a:hover { color: #3498DB; text-decoration: underline;}
}
a.icon_window{
	position: relative;
	padding-right: 18px;
	background: url(/_common/images/ico-window.png) right center no-repeat;
	background-size: 13px 10px;
}

.txt.-bold {font-weight: bold;}
.txt_large{ font-size: 1.6rem;}
.txt_large.-bold {font-weight: bold;}
.txt_large.-center {text-align: center;}
.txt_huge{ font-size: 1.8rem;}
.txt_huge.-bold {font-weight: bold;}
.txt_huge-center {text-align: center;}

.txt_caution {
    color: #7F7F7F;
    font-size:1.3rem;
    padding:16px;
}
.txt_caution_timesale {
    color: #7F7F7F;
    font-size:1.3rem;
}
@media screen and (min-width: 960px) {
    .txt_caution {
        font-size:1.5rem;
    padding:16px 24px;
    }
}
@media screen and (min-width: 960px) {
    .txt_large{ font-size: 2.2rem;}
    .txt_huge{ font-size: 2.6rem;}
}

/*  メインビジュアル
============================================================================= */
.header-wrap img{
    max-width: 100%;
    width: 100%;
    height: auto;
}
@media screen and (min-width: 768px){
    .header-wrap{
        margin-top: 16px;
        position: relative;
        width: 100%;
    }
}

/*  ページ内アンカー
============================================================================= */
.pagenav-area__bt li a:after {
    bottom: 0;
    color: #FE5815;
}
.fixed .pagenav-area__bt {
    width: 100%;
}
.pagenav-area__bt li a,
.pagenav-area__bt li a:link,
.pagenav-area__bt li a:visited {
    color: #323743;
}
.fixed .pagenav-area__bt li a,
.fixed .pagenav-area__bt li a:link,
.fixed .pagenav-area__bt li a:visited {
    color: #323743;
}
.subtext {text-align: center; font-weight: bold; padding-top: 28px;}

@media screen and (min-width: 768px){
    .pagenav-area__bt li {
        max-width: 318px;
    }
    .pagenav-area__bt li a {
        background-color: transparent;
        box-shadow: none;
    }
    .pagenav-area__inner {
        padding: 8px 5px;
    }
    .fixed .pagenav-area__bt li:last-child a {
        border-right: solid 1px #ccc;
    }
}

/*  見出し
============================================================================= */
h1{font-size: 18px;font-weight: bold; line-height: 1; margin: 25px auto; max-width: 1236px; text-align: left;}

/*  h2  */
.heading02{
    padding-right: 6px;
}
.heading02 .en{
    display: flex;
    align-items: center;
    color: #323743;
    font-size: 1.8rem;
    letter-spacing: .12em;
    line-height: 1.2;
}
.heading02 .en::before{
    content: '';
    display: inline-block;
    margin-right: 16px;
    width: 24px;
    height: 3px;
    background-color: #FE5815;
}
.heading02 h2.jp{
    display: inline-block;
    font-size: 2.4rem;
    font-weight: bold;
    letter-spacing: .12em;
    padding-left: 40px;
}
@media screen and (min-width: 768px){
    .heading02 .en{
        font-size: 2.2rem;
    }
    .heading02 .en::before{
        margin-right: 32px;
        width: 88px;
        height: 5px;
}
    .heading02 h2.jp{
        font-size: 3.6rem;
        padding-left: 120px;
    }
}
@media screen and (max-width: 767px){
    h1{padding-left: 8px;}
  }

/*  h3  */
h3.brackets {
    position: relative;
    font-size: 2.0rem;
    font-weight: bold;
    line-height: 1.4;
    padding: 0 1em;
    display: inline-block;
    top:0;
    margin: 0 auto;
}
 h3.brackets:before, h3.brackets:after { 
    position: absolute;
    top: 0;
    content:'';
    width: 8px;
    height: 100%;
    display: inline-block;
}
h3.brackets:before {
    border-left: solid 2px #323743;
    border-top: solid 2px #323743;
    border-bottom: solid 2px #323743;
    left: 0;
}
 h3.brackets:after {
    content: '';
    border-top: solid 2px #323743;
    border-right: solid 2px #323743;
    border-bottom: solid 2px #323743;
    right: 0;
}
@media screen and (min-width: 768px){
    h3.brackets {
        font-size: 2.6rem;
    }
 }

 /*  h4  */
h4{
    font-size: 2.2rem;
    font-weight: bold;
}
@media screen and (min-width: 768px){
    h4{ font-size: 2.4rem;}
}
@media (max-width: 320px){
    h4{ font-size: 2.0rem; }
}
h4.case01,h4.case02{
    position: relative;
    display: inline-block;
    text-align: left;
}
h4.case01:before{
    margin-right:6px;
    position:relative;
    content: "";
    background-image: url("/kokunai/theme/jetstar/images/case01.svg");
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 90px;
    height: 46px;
    top:3px;
    left:0;
}
h4.case02:before{
    margin-right:6px;
    position:relative;
    content: url("/kokunai/theme/jetstar/images/case02.svg");
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 90px;
    height: 46px;
    top:3px;
    left:0;
}
h4.case01.-center,h4.case02.-center{
    display: block;
    text-align: center;
}
h4.case01.-center:before, h4.case02.-center:before{
    margin-right:12px;
}

h4.caution{
    display: inline-block;
}
h4.caution:before {
    position:relative;
    content: "";
    background-image: url(/kokunai/theme/jetstar/images/warning_amber_black_24dp.svg);
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    margin-right:6px; 
    width: 24px;
    height: 24px;
    top:3px; 
    left:0;
}
 /*  h5  */
h5.heading05_01{
    display: inline-block;
    font-size: 1.8rem;
    font-weight:bold; 
    line-height: 1.8;
    letter-spacing: 0.07em;
    background: linear-gradient(transparent 60%, rgba(254,88,21,0.2) 60%);
}
@media screen and (min-width: 768px){
    h5{
        font-size: 2.2rem;
    }
}
h5.heading05_01 span {
    padding: 0.5em 0.2em;
}
 h5.heading05_02 {
    position: relative;
    margin-bottom: 40px;
}
h5.heading05_02 span {
    position: relative;
    padding: 1em 2em;
    box-sizing: border-box;
    border-top: 2px #000 solid;
    border-bottom: 2px #000 solid;
    font-size: 1.8rem;
    line-height: 1.8;
    letter-spacing: 0.07em;
}
h5.heading05_02 span::after {
    content: "";
    width: 10px;
    height: 10px;
    border-style: solid;
    background: #fff;
    border-width: 2px;
    border-color: transparent transparent #000 #000;
    transform: rotate(315deg);
    margin-left: -5px;
    position: absolute;
    bottom: -7px;
    left: 50%;
}

/*  レイアウト
============================================================================= */
.section_h2_wrap{
    margin: 0 auto;
    padding: 24px 0;
    width: 100%;
    position: relative;
}
@media screen and (min-width: 960px) {
    .section_h2_wrap{
        padding: 56px 0;
        max-width: 1140px;
  /*      min-width: 960px; */
    }
}
.contents_inner{
    padding: 0 1em;
}
@media screen and (min-width: 768px){ 
    .contents_inner{
        padding: 0 12px;
    }
}
@media screen and (min-width: 960px) {
    .contents_inner{
        padding: 0 8px;
        margin-top: 32px;
    }
}
.ly_center{
    display: flex;
    align-items: center;
}

@media screen and (min-width: 960px){
    .section_wrap{
        padding: 48px 5px;
    }
}

/*  grid
============================================================================= */
.ly_grid.-middle{
    text-align:center!important;
}
@media screen and (min-width: 768px){
    .ly_grid{
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
        margin-left:16px;
        padding:0
    }
    .ly_grid.grid-01{ width: calc(8.33333% - 16px);}
    .ly_grid.grid-02{ width: calc(16.66667% - 16px);}
    .ly_grid.grid-03{ width: calc(25% - 16px);}
    .ly_grid.grid-04{ width: calc(33.33333% - 16px);}
    .ly_grid.grid-05{ width: calc(41.66667% - 16px);}
    .ly_grid.grid-06{ width: calc(50% - 16px)}
    .ly_grid.grid-07{ width: calc(58.33333% - 16px);}
    .ly_grid.grid-08{ width: calc(66.66667% - 16px);}
    .ly_grid.grid-09{ width: calc(75% - 16px);}
    .ly_grid.grid-10{ width: calc(83.33333% - 16px);}
    .ly_grid.grid-11{ width: calc(91.66667% - 16px);}
    .ly_grid.grid-12{ width: calc(100% - 16px);}
    .ly_grid__row{
        -ms-flex-wrap:wrap;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        flex-wrap:wrap;
        margin-left:-16px;
    }
}

/*  キャンペーン
============================================================================= */
.campaign_inner{
    margin-top: 20px;
}
.campaign_list{
    display: flex;
    flex-wrap: wrap;
    margin: 0 10px 0 0;
}
.campaign_list > li{
    width: calc(100% / 2 - 10px);
    margin: 24px 0 0 10px;
}
.campaign_list a{
    position: relative;
    display: block;
    transition: 0.4s ease;
}
.campaign_list img{
    vertical-align: bottom;
}
@media screen and (min-width: 960px){
    .campaign_inner{
        position: relative;
        margin: 50px auto 0;
        padding: 0 5px;
        width: 100%;
        min-width: 960px;
        max-width: 1280px;
    }
    .campaign_list{
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -ms-flex-wrap: wrap;
       flex-wrap: wrap;
       -webkit-box-pack: start;
       -ms-flex-pack: center;
       justify-content: start;
       margin: 0 0 0 -30px;
    }
    .campaign_list > li{
       width: calc(100% / 4 - 30px);
       margin: 0 0 0 30px;
       border-radius: 8px;
       background: #fff;
    }
    .campaign_list a{
       position: relative;
       display: block;
       transition: 0.4s ease;
    }
    .campaign_list a:hover{
       opacity: .6;
    }
    .campaign_image{
       text-align: center;
    }
}    

/*  路線
============================================================================= */
.el_card-route{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    border: #323743 solid 3px;
    padding-bottom: 2em;
    width: 90%;
    margin: 0 auto;
}
.el_card-route h3{
    position: relative;
    top: -20px;
    font-size: 2.2rem;
    font-weight: bold;
    margin: 0;
    text-align: center;
}
@media screen and (min-width: 768px){
    .el_card-route h3{
        font-size: 2.2rem;
    }
}
@media screen and (min-width: 960px) {
    .el_card-route h3{
        font-size: 2.2rem;
    }
}
.el_card-route h3 span{
    background: #fff;
    padding: 0 1em;
    display: inline-block;
}
.el_card-route ul{
    text-align: left;
}
.el_card-route ul li{
    margin-bottom: 2px;
}
.el_card-route ul li span{
    margin-right: 0.5em;
}

/*  その他
============================================================================= */
.img-size {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
.el_box{
    background:#F4F5F5;
    margin-top: 24px;
    padding: 16px;
}
.el_box__caution {
    padding: 20px;
    border: #FE5815 1px solid;
}

/*  レコメンド枠
============================================================================= */
.recommend__cassette_wrap{
    margin-top: 32px;
    padding-bottom: 32px;
    border: 1px solid #323743;
}
.recommend__cassette-images{
    width: 100%;
    position: relative;
}
.recommend__cassette-images img{
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
.recommend__cassette-images span{
    position: absolute;
    top:6px;
    right: 16px;
    color: #fff;
    font-size: 2.6rem;
    font-weight: bold;
    text-shadow: 0 0 9px #000;
    letter-spacing: .3em;
}
@media screen and (min-width: 768px){
    .recommend__cassette-images span{
        font-size: 3.0rem;
    }
 }
.recommend__cassette-detail{
    margin: 0 auto; 
}
.recommend__cassette-detail-list li{
    position: relative;
    margin-top: 6px;
}

  /* timesale
============================================================================= */
.info_timesale {
    position: relative;
    margin: 32px auto 0;
    padding: 16px 0;
    width: 100%;
}
@media screen and (min-width: 768px){
    .info_timesale {
        margin: 32px auto;
        border: 1px solid #323743;
    }
}
.title-info_timesale{
    position: absolute;
    padding: 0;
    left: 0;
    top: -25px;
    font-size: 2.6rem;
    font-weight: bold;
    color: #FE5815;
}
@media screen and (min-width: 768px){
    .title-info_timesale{
        position: absolute;
        padding: 0 .5em;
        left: 20px;
        top: -25px;
        background-color: #fff; /* タイトル背景色 */
        font-size: 2.6rem;
        font-weight: bold;
        color: #FE5815;
    }
}
dl.terms-of-use { width:100%; margin:16px 0 8px; font-size: 1.4rem; display: flex; flex-wrap : wrap; justify-content: space-between; border: 1px solid #d8d8d8; }
dl.terms-of-use div { display: inline-block; }
dl.terms-of-use dt, dl.terms-of-use dd { padding:0; margin:0;}
dl.terms-of-use dt { background-color: #DEDEDE; padding:6px 0 6px 12px; width:100%; box-sizing:border-box; margin-bottom:5px; text-align: left;  font-weight:bold; }
dl.terms-of-use dd { padding:6px 0 6px 12px; width:100%; box-sizing:border-box; margin-bottom:5px; text-align: left; }

@media screen and (min-width: 768px){
    .info_timesale_inner {
        margin: 0 auto;
        padding: 8px 24px;
    }
    dl.terms-of-use {
        font-size: 1.6rem;
        display: flex;
        flex-wrap : wrap;
        justify-content: space-between;
        margin: 16px 0 8px 0; 
        border: none;
    }
    dl.terms-of-use div { display: inline-block; }
    dl.terms-of-use dt, dl.terms-of-use dd { padding:0; margin:0;}
    dl.terms-of-use dt { background-color: #F4F5F5; padding:4px 0 4px 16px; width:15%; box-sizing:border-box; margin-bottom:8px; text-align: left; font-weight:bold; }
    dl.terms-of-use dd { background-color: #FFFFFF; padding:4px 0 4px 16px; width:85%; box-sizing:border-box; margin-bottom:8px; text-align: left; }
}
span.ico_time:before {
    position:relative;
    content: "";
    background-image: url(/kokunai/theme/jetstar/images/access_time_black_24dp.svg);
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    margin-right:6px; 
    width: 24px;
    height: 24px;
    top:3px; 
    left:0;
}
div.txt-timesale{
    display:-webkit-box;
    display:-ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
div.txt-timesale span {
    position: relative;
    display: inline-block;
    font-size: 1.8rem;
    font-weight: bold;
    color: #FE5815;
    padding: 0px 30px;
    white-space: nowrap;
    text-align: center;
    margin-top: 16px;
}
div.txt-timesale span::before,
div.txt-timesale span::after {
    content: "";
    position: absolute; top: 0px;
    display: block;
    width: 2px ;
    height: 100%;
    background: #FE5815;
    }
div.txt-timesale span::before { left: 10px; transform: rotate( -30deg ) }
div.txt-timesale span::after { right: 10px; transform: rotate( 30deg ) }

  /* Spacing
============================================================================= */
.nomargin{ margin:0!important;}
.margin-upper-01{ margin-top:2px!important}
.margin-upper-02{ margin-top:4px!important;}
.margin-upper-03{ margin-top:8px!important;}
.margin-upper-04{ margin-top:16px!important;}
.margin-upper-05{ margin-top:24px!important;}
.margin-upper-06{ margin-top:32px!important;}
.margin-upper-07{ margin-top:48px!important;}
.margin-upper-08{ margin-top:64px!important;}
.margin-upper-09{ margin-top:96px!important;}
.margin-upper-10{ margin-top:128px!important;}
.margin-upper-11{ margin-top:192px!important;}
.margin-upper-12{ margin-top:256px!important;}
.nopadding{ padding:0!important;}
.padding-upper-01{ padding-top:2px!important;}
.padding-upper-02{ padding-top:4px!important;}
.padding-upper-03{ padding-top:8px!important;}
.padding-upper-04{ padding-top:16px!important;}
.padding-upper-05{ padding-top:24px!important;}
.padding-upper-06{ padding-top:32px!important;}
.padding-upper-07{ padding-top:48px!important;}
.padding-upper-08{ padding-top:64px!important;}
.padding-upper-09{ padding-top:96px!important;}
.padding-upper-10{ padding-top:128px!important;}
.padding-upper-11{ padding-top:192px!important;}
.padding-upper-12{ padding-top:256px!important;}

.margin-upper-05_sp { margin-top:6.4vw!important;}
.margin-upper-06_sp { margin-top:8.5333333333vw!important;}
.margin-upper-07_sp { margin-top:12.8vw!important;}
.margin-upper-08_sp { margin-top:17.0666666667vw!important;}
.margin-upper-10_sp { margin-top:25.6vw!important;}

@media screen and (min-width: 768px){
    .margin-upper-05_sp { margin:0!important;}
    .margin-upper-06_sp { margin:0!important;}
    .margin-upper-07_sp { margin:0!important;}
    .margin-upper-08_sp { margin:0!important;}
    .margin-upper-10_sp { margin:0!important;}
    .margin-upper-06_pc { margin-top:32px!important;}
}

.search-tab {
    box-shadow: none;
}

/*  スクロール
============================================================================= */
 #u_top_kv {
  width: 100%;
  height: auto;
  position: relative;
}
 #u_scroll_icon {
  font-family: "Oswald", sans-serif;
  position: absolute;
  left: 24px;
  bottom: 200px;
  z-index: 5;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  font-size: 1.8rem;
  letter-spacing: .2em;
  font-weight: 500;
  color: #ffffff;
  overflow: hidden;
}
 #u_scroll_icon .img {
  position: relative;
  height: 111px;
  width: 13px;
}
 #u_scroll_icon .img .wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0%;
  overflow: hidden;
  -webkit-animation: scroll_animation 2.4s infinite;
          animation: scroll_animation 2.4s infinite;
}
 #u_scroll_icon .img img {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: scroll_animation_img 2.4s infinite;
          animation: scroll_animation_img 2.4s infinite;
}

@-webkit-keyframes scroll_animation {
    0% {
      top: 0;
      bottom: inherit;
      height: 0%;
      -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
              animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    45%, 55% {
      top: 0;
      bottom: inherit;
      height: 100%;
      -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
              animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    55.1% {
      top: inherit;
      bottom: 0;
      height: 100%;
      -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
              animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    100% {
      top: inherit;
      bottom: 0;
      height: 0%;
      -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
              animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    }
  }
  
  @keyframes scroll_animation {
    0% {
      top: 0;
      bottom: inherit;
      height: 0%;
      -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
              animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    45%, 55% {
      top: 0;
      bottom: inherit;
      height: 100%;
      -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
              animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    55.1% {
      top: inherit;
      bottom: 0;
      height: 100%;
      -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
              animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    100% {
      top: inherit;
      bottom: 0;
      height: 0%;
      -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
              animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    }
  }
  
  @-webkit-keyframes scroll_animation_img {
    0% {
      top: 0;
      bottom: inherit;
      -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
              animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    45%, 55% {
      top: 0;
      bottom: inherit;
      -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
              animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    55.1% {
      top: inherit;
      bottom: 0;
      -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
              animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    100% {
      top: inherit;
      bottom: 0;
      -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
              animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    }
  }
  
  @keyframes scroll_animation_img {
    0% {
      top: 0;
      bottom: inherit;
      -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
              animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    45%, 55% {
      top: 0;
      bottom: inherit;
      -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
              animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    55.1% {
      top: inherit;
      bottom: 0;
      -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
              animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    100% {
      top: inherit;
      bottom: 0;
      -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
              animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    }
  }

/*  矢印
============================================================================= */
.arrow_link_more {
    display: block;
    margin: 16px auto 0;
    font-size: 1.8rem;
    color: #323743;
    text-align: left;
    width: 270px;
    overflow: hidden;
}
a.arrow_link_more:link, a.arrow_link_more:visited, a.arrow_link_more:hover {
    color: #323743;
    text-decoration: none;
}
a.arrow_link_more:hover {
    opacity: .6;
}

.arrow_link_more img {
    display: block;
    margin: 0 auto;
    margin-top: -8px;
  }
@media screen and (min-width: 768px){
    .arrow_link_more img {
        margin-top: -5px;
    }
    .arrow_link_more:hover img {
        -webkit-animation: arrow_scroll 1.4s infinite;
        animation: arrow_scroll 1.4s infinite;
    }
}
@-webkit-keyframes arrow_scroll {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  2.1% {
    opacity: 1;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  40%, 80% {
    opacity: 1;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  80.1%, 100% {
    opacity: 0;
  }
}