@charset "utf-8";
/* CSS Document */


html{
    font-size: 100%;
}

body {
    position: relative;
    margin:0;
    font-size: 68.75%;
    line-height: 1.6;
    font-feature-settings: "palt";
    font-smoothing: auto;
    color: #fff;
    background: #b1b1b9;
    letter-spacing: 0.1rem;
    font-family: dnp-shuei-mincho-pr6, serif;
    font-weight: 600;
}

*,
*::after,
*::before {
    box-sizing: border-box;
}

div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}

a:link, a:visited, a:active, a:hover {
    text-decoration: none;
	color: #fff;
}

a {
  cursor:pointer;
}

*:focus {
  outline: none;
}

ul,ol{
	list-style: none;
	padding: 0;
}

img{
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

h1,h2,h3,h4,h5{
    font-size: inherit;
}



/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
	position: fixed;
	z-index: 3000;
	width: 100%;
	height: 100%;
	background:#b1b1b9;
	text-align:center;
	color:#fff;
    font-family: 'neue-haas-grotesk-display' ,"sans-serif";
    font-weight: 200;
    font-size: 5rem;
    letter-spacing: 0.5rem;
}



.sp{
    display: block;
}
.pc{
    display: none;
}  

/*========= フェードイン ===============*/
.fadeTrigger,
.fadeslideTrigger{
   opacity: 0;
}

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
from {
    opacity: 0;
    transform: translateY(2rem);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

.fadeslide{
    animation-name:fadeslideAnime;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    opacity:0;
}

@keyframes fadeslideAnime{
from {
    opacity: 0;
    transform: translateX(2rem);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}

/*========= 流れるテキスト ===============*/

/*全共通*/

.slide-in,
.menu-slide-in{
	overflow: hidden;
    display: inline-block;
    width: 100%;
}

.slide-in_inner,
.menu-slide-in_inner{
	display: inline-block;
    width: 100%;
}

/*左右のアニメーション*/
.leftAnime,
.menu-leftAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
    line-height: inherit;
    vertical-align: bottom;
}

.slideAnimeLeftRight {
	animation-name:slideTextX100;
	animation-duration:1.2s;
	animation-fill-mode:forwards;
    opacity: 0;
}

.active .menu-slideAnimeLeftRight {
	animation-name:slideTextX100;
	animation-duration:1.2s;
	animation-fill-mode:forwards;
    opacity: 0;
}


@keyframes slideTextX100 {
  from {
    transform: translateX(-100%); /*要素を左の枠外に移動*/
    opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
	animation-name:slideTextX-100;
	animation-duration:1.2s;
	animation-fill-mode:forwards;
    opacity: 0;
}


.active .menu-slideAnimeRightLeft {
	animation-name:slideTextX-100;
	animation-duration:1.2s;
	animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextX-100 {
  from {
	transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}


.active .menu_contents li:first-child .menu-slideAnimeRightLeft,
.active .menu_contents li:first-child .menu-slideAnimeLeftRight{
    animation-delay: 0;
}
.active .menu_contents li:nth-child(2) .menu-slideAnimeRightLeft,
.active .menu_contents li:nth-child(2) .menu-slideAnimeLeftRight{
    animation-delay: 0.3s;
}
.active .menu_contents li:nth-child(3) .menu-slideAnimeRightLeft,
.active .menu_contents li:nth-child(3) .menu-slideAnimeLeftRight{
    animation-delay: 0.6s;
}
.active .menu_contents li:nth-child(4) .menu-slideAnimeRightLeft,
.active .menu_contents li:nth-child(4) .menu-slideAnimeLeftRight{
    animation-delay: 0.9s;
}
.active .menu_contents li:nth-child(5) .menu-slideAnimeRightLeft,
.active .menu_contents li:nth-child(5) .menu-slideAnimeLeftRight{
    animation-delay: 1.2s;
}
.active .menu_contents li:nth-child(6) .menu-slideAnimeRightLeft,
.active .menu_contents li:nth-child(6) .menu-slideAnimeLeftRight{
    animation-delay: 1.5s;
}

.active .copyright .menu-slideAnimeRightLeft,
.active .copyright .menu-slideAnimeLeftRight{
    animation-delay: 1.8s;
}




header{
    position: fixed;
    display: flex;
    top: 0;
    z-index: 1000;
    padding: 4vw;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
}

.hamburger {
    display: block;
    position: relative;
    z-index: 101;
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
    text-align: center;
    padding: 0;
    box-sizing: content-box;
    background: transparent;
    border: none;
}
	
.hamburger span {
  display : block;
  position: absolute;
  width   : 100%;
  height  : 2px ;
  background : #FFF;
  transition : background 0.7s ease ,transform 0.3s ease-in-out;
}
	
.scroll-nav .hamburger span {
  background : #000;
}

.hamburger span:nth-child(1) {
     top: 6px;
}
.hamburger span:nth-child(2) {
    top: 18px;
}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
    top: 12px;
    left: 0px;
    background: #FFF !important;
    transform: rotate(-45deg);
}

.hamburger.active span:nth-child(2) {
    top: 12px;
    right: 0px;
    background: #FFF !important;
    transform: rotate(45deg);
}

nav.globalMenuSp {
	position: fixed;
	z-index : 100;
	top  : 0;
	left : 0;
	color: #FFF;
	background: #b1b1b9;
	width: 0;
	height:0;
	opacity: 0;
    visibility: hidden;
	transition: opacity .6s ease, visibility .6s ease ,height .1s ease 1s ,width .1s ease 1s ;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  opacity: 100;
	width: 100%;
	height: 100vh;
    visibility: visible;
	transition: opacity .6s ease .2s , visibility .6s ease .2s , height .1s ease ,width .1s ease;
}

#menu_wrap {
    display: grid;
    grid-gap: 2rem;
    margin-left: 2rem;
    padding-bottom: 2rem;
}

.menu_logo img{
    width: 24vw;
}

.menu_link {
    color: #fff !important;
    font-family: 'neue-haas-grotesk-display';
    font-weight: 400;
    font-size: 1rem;
    line-height: 2.5;
}

.copyright {
    margin-top: 3rem;
}


#hero{
    width: 100%;
    height: 100vh;
    position: relative;
}

.hero_bg_img {
    height: 100%;
}
.hero_bg_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero_logo {
    position: absolute;
    top:50%;
    left:1rem;
    transform: translateY(-50%);
    animation-delay: 2s !important;
}

.hero_logo #reag999_logo{
    width: 35vw;
    height: auto;
}

.st0{
    fill:#FFF;
}

.content{
    padding: 6rem 1rem 7rem;
    position: relative;
}

.text_box{
    width: 60vw;
}

.content_title{
    font-size: 0.875rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #FFF;
}

.content_title_en{
    display: block;
    font-size: 1.5rem;
    line-height: 1.5rem;
    font-family:'neue-haas-grotesk-display';
    font-weight: 600;
    letter-spacing: 0;
}

.text_box p{
    text-align: justify;
    text-justify: inter-ideograph;
}

#about {
    padding: 0 1rem 7rem;
}


#For_the_earth .image_box {
    width: 60vw;
    max-width: 720px;
    position: absolute;
    top: 6rem;
    left: 1rem;
    z-index: 0;
}

#For_the_earth_text{
    margin-top: 45vw;
    margin-left: auto;
    position: relative;
}

.count-up_box {
    position: absolute;
    z-index: 2;
    line-height: 1;
    top: 6rem;
    left: 2rem;
    opacity: 0.6;
}

.count-size{
    font-size: 5rem;
    color: #FFF;
    line-height: initial;
    font-family: 'neue-haas-grotesk-display';
    letter-spacing: 0;
    font-weight: 600;
}

.counter {
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
    text-align: center;
}

ruby{
    font-size: 0.8em;
}


#For_the_people_contents_box{
    display: grid;
    grid-gap:2rem;
    width: 80vw;
    padding: 1rem 0 0;
}


#For_the_people_text {
    width: 80vw;
}

.For_the_people_content p {
    width: 80vw;
    text-align: justify;
    text-justify: inter-ideograph;
}
#For_the_people_text .content_title_box,
.For_the_people_content:nth-child(2) p {
    width: 70vw;
}


#For_the_people_count {
    transform: rotate(90deg);
    transform-origin: top left;
    top: 6rem;
    left: 100vw;
}

.For_the_people_content {
    display: grid;
    grid-gap: 1rem;
}

.For_the_people_content h3 {
    font-size: 0.875rem;
}

.For_the_people_content h3 .For_the_people_content_num{
    font-size: 1.625rem;
    line-height: 1.625rem;
    display: inline-block;
    font-family: 'neue-haas-grotesk-display';
    font-weight: 600;
    vertical-align: middle;
    margin-right: 0.5rem;
}

.attention_1 p {
    font-size: 0.625rem;
    width: 80vw;
}

#gin_no_kobanashi_box {
    display: grid;
    grid-gap: 6rem;
}
.gin_no_kobanashi_text p{
    text-align: justify;
    text-justify: inter-ideograph;
}

.gin_no_kobanashi_text p:first-letter {
    margin-left: 1em;
}

#reag999_teian .image_box {
    width: 60vw;
    max-width: 720px;
    position: absolute;
    top: 6rem;
    left: 1rem;
    z-index: 0;
}

#reag999_teian_text{
    margin-top: 40vw;
    margin-left: auto;
    position: relative;
}

#reag999_teian_text p .reag999_teian_attention {
    display: block;
    margin-top: 3.5rem;
}

.retail_price {
    margin-top: 3.5rem;
    font-family: 'neue-haas-grotesk-display';
    font-weight: 600;
}

.retail_price_title {
    margin-bottom: 1rem;
}

.retail_price_chart {
    display: flex;
    justify-content: space-between;
}
.retail_price_price {
    letter-spacing: normal;
}


.catalog_wrap {
    display: grid;
    grid-gap: 2rem;
}

.product_wrap {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 3rem;
}

.product_box_slide {
    overflow-x: scroll;
}

.product_box {
    display: flex;
    grid-gap: 3rem 1rem;
    line-height: 1.5;
    flex-direction: row;
}

.product_box > div{
    flex:none;
    flex-basis: 60vw;
}

.product_title h3 {
    font-size: 1.25rem;
    line-height: 1;
}


.product_image {
    margin-bottom: 1rem;
    aspect-ratio: 1/1;
    background: #FFF;
}

.product_price,
.product_spec {
    display: block;
}


.information_wrap {
    display: grid;
    grid-gap: 2rem;
}

.information_contents_wrap{
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 3rem;
}

.information_contents_wrap a {
    text-decoration: underline !important;
}

.information_contents_box {
    display: grid;
    grid-gap: 1rem;
}


.information_contents_title {
    margin-bottom: 1rem;
}


.information_contents_img{
    display: flex;
    overflow: hidden;
    aspect-ratio:1.5/1;
}

.information_contents_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact_box {
    display: grid;
    grid-gap: 1rem;
}

.contact_link{
    text-decoration: underline !important;
}

#contact h3,
#contact p {
    display: inline-block;
}

#contact .slide-in{
    overflow: hidden;
    display: inline-block;
    width: auto;
}

#contact .slide-in_inner{
    display: inline-block;
    width: auto;
}


#end {
    padding: 5rem 1rem 3rem;
}

.end_logo #reag999_endlogo{
    width: 30vw;
    height: auto;
    display: block;
    margin: auto;
}


.made_in {
    text-align: center;
    display: block;
    font-family: sans-serif;
    font-weight: 100;
    transform: scale(0.7);
    margin-top: 10vw;
    opacity: 0.5;
}

/* tablet */
@media screen and (min-width: 48rem){
 
    
body {
    font-size: 75%;
    letter-spacing: 0.2rem;
}

.sp{
    display: none;
}  
.pc{
    display: block;
}    
    
.menu_logo img{
    width: 15vw;
}
   
#hero {
    height: 50vh;
    overflow: hidden;
}    
  
.hero_logo {
    left: 2rem;
}    
    
.hero_bg_img img {
    height: 50vh;
    object-fit: cover;
}    

.hero_logo #reag999_logo {
    width: 20vw;
    height: auto;
}    
  
.content {
    padding: 6rem 2rem 12rem;
}   
    
#about {
    padding: 0 2rem 12rem;
}    
    
#about_image {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 85vw;
} 
    
.content_title {
    font-size: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #FFF;
}
    
.text_box {
    width: 40vw;
}    
    
#about_text {
    margin-left: auto;
    margin-top: 10vw;
}    
    
.count-up_box {
    left: 4rem;
}   
    
.count-size {
    font-size: 8rem;
}
 
    
#For_the_earth .image_box {
    width: 48vw;
    left: 2rem;
}    
 
#For_the_earth_text {
    margin-top: 25vw;
}    
 
    
#For_the_people_contents_box {
    grid-template-columns: repeat(4,1fr);
    grid-gap: 2vw;
}
    
.For_the_people_content {
    display: block;
}    
    
.For_the_people_content > * {
    margin-top: 1rem;
}
    
    
.content_title_box ,
.attention_1 {
    grid-column: 1/5;
} 
    

.For_the_people_content p,
.For_the_people_content:nth-child(2) p {
    width: 100%;
}
   
#For_the_people_contents_box .For_the_people_content:nth-child(2) .fadeTrigger{
    animation-delay: 0;
}
#For_the_people_contents_box .For_the_people_content:nth-child(3) .fadeTrigger{
    animation-delay: 0.3s;
}
#For_the_people_contents_box .For_the_people_content:nth-child(4) .fadeTrigger{
    animation-delay: 0.6s;
}
#For_the_people_contents_box .For_the_people_content:nth-child(5) .fadeTrigger{
    animation-delay: 0.9s;
}
    
    
    
    
#gin_no_kobanashi_box {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1fr 1fr 1fr;
}    
    
#reag999_teian .image_box {
    width: 48vw;
    left: 2rem;
    top: 6rem;
}
    
#reag999_teian_text{
    margin-top: 25vw;
}
 
    
.catalog_wrap {
    grid-template-columns: 1fr 3fr;
}    
    
.product_wrap {
    grid-template-columns: 1fr;
    grid-gap: 2rem;
} 

.product_box_slide {
    overflow:visible;
}   
.product_box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 2rem 1rem;
}      
 
.product_box > div{
    flex:none;
    flex-basis: auto;
}    
    
.product_title{
    grid-column: 1/4;
}
.product_title h3 {
    font-size: 1.5rem;
    line-height: 1;
}
    
.information_wrap {
    grid-template-columns: 1fr 3fr;
}
    
.information_contents_box {
    grid-template-columns: 25vw 1fr;
}    
.information_contents_img {
    aspect-ratio: 1/1.2;
    order: 2;
} 
  
.information_contents_date {
    order: 1;
    grid-column: 1/3;
}    
.information_contents {
    order: 3;
}    
    
#end {
    padding: 6rem 2rem 5rem;
}
    
.end_logo #reag999_endlogo {
    width: 20vw;
}    
    
    
}





/* tablet landscape */
@media screen and (min-width: 48rem) and (orientation:landscape){
    
    
#hero {
    height: 100vh;
}
.hero_logo {
    left: 6vw;
}
    
.hero_logo #reag999_logo {
    width: 15vw;
}    
    
.hero_bg_img img {
    height: 100vh;
}
    
.content {
    padding: 10vw 6vw 20vw;
}   
    
#about {
    padding: 20vw 6vw 20vw;
}
    
#about_image {
    width: 95vw !important;
    top: 20vw !important;
}
    
#about_text {
    margin-top: 0;
}
    
.text_box {
    width: 30vw;
}    

#For_the_earth .image_box {
    width: 44vw;
    left: 6vw;
    top: 10vw;
}
 
#For_the_earth_text {
    margin-top: 22vw;
}    

.count-up_box {
    top: 10vw;
    left: 12vw;
}    
    
.count-size {
    font-size: 9rem;
}   
 
    
#For_the_people_count {
    transform: none;
    transform-origin: inherit;
    top: 6vw;
    left: 6vw;
}    
    
#For_the_people_text {
    width: 100%;
}    
    
#For_the_people_text {
    width: 100%;
    max-width: 100%;
}    
    
div#For_the_people_contents_box {
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    grid-gap: 2vw;
    width: 100%;
    padding-top: 6vw;
}    
    
#For_the_people_text .content_title_box,
.For_the_people_content:nth-child(2) p {
    width: 100%;
}    
    
.content_title_box {
    grid-column: auto;
    padding-top: 38vw;
} 

.For_the_people_content.attention_1 {
    grid-column: 2/6;
} 
    
#gin_no_kobanashi_box {
    grid-gap: 4vw;
}    
 
#reag999_teian .image_box {
    width: 48vw;
    left: 6vw;
    top: 10vw;
}
    
.catalog_wrap {
    grid-gap: 4vw;
}
    
.product_wrap {
    grid-template-columns: 1fr;
    grid-gap: 6vw;
}
    
.product_box {
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 6vw 3vw;
}
    
.product_image {
    margin-bottom: 2vw;
}    
    
    
.information_wrap {
    grid-gap: 4vw;
}    
    
.information_contents_wrap {
    grid-gap: 6vw;
}
 
.information_contents_box {
    grid-gap: 2vw;
    grid-template-columns: 25vw 1fr;
}
    
.information_contents_title {
    margin-bottom: 2vw;
}    
    
    
    
    
    
#end {
    padding: 10vw 6vw 10vw;
}   
    
.end_logo #reag999_endlogo {
    width: 15vw;
}    
    
}




/* PC */
@media screen and (min-width: 64.1rem){
body {
    font-size: 0.8vw;
    line-height: 2;
    letter-spacing: 0.2vw;
}
    
header {
    transform: rotate(90deg);
    transform-origin: top left;
    top: 0;
    left: 100vw;
    padding: 0;
    display: block;
    width: 100vh;
    height: 8vw;
}  
    
#hamburger {
    display: none;
}

#globalMenuSp {
    position: inherit;
    opacity: 1;
    visibility: visible;
    transition: none !important;
    width: 100%;
    height: 8vw;
    background: transparent;
}   
    
#menu_wrap {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
}
    
.menu_logo {
    display: none;
}
    
    
 #menu_wrap .menu_contents {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
     align-items: center;
}   

.menu_contents li a {
    font-size: 1.5vh;
}    
    
.copyright {
    margin-top: 0;
    font-size: 1vh;
    letter-spacing: normal;
}
    
    
/*==================================================
　5-3-2 中心から外に線が伸びる（中央）
===================================*/
.menu_contents li a{
    /*線の基点とするためrelativeを指定*/
	position: relative;
}

.menu_contents li a::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -10%;
    width: 120%;
    height: 1px;
    background: #fff;
    transition: all .3s;
    transform: scale(0, 1);
    transform-origin: center top;
}

/*現在地とhoverの設定*/
.menu_contents li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}
    
.hero_logo {
    left: 8vw;
}    
    
.hero_logo #reag999_logo {
    width: 10vw;
}    

.text_box {
    width: 21vw;
}    
    
.content {
    padding: 10vw 10vw 20vw 5vw;
}  
    
#about_image {
    top: 14vw;
    width: 85vw;
}    
#about {
    padding: 20vw 10vw 20vw 5vw;
}    
    
#For_the_earth .image_box {
    width: 37vw;
    top: 10vw;
    left: 5vw;
}  
  
    
.count-size {
    font-size: 12.5vw;
}    
    
.count-up_box {
    left: 10vw;
    top: 10vw;
}
   
.content_title {
    font-size: 1vw;
    padding-bottom: 1vw;
    margin-bottom: 1vw;
}    
    
.content_title_en {
    font-size: 2.5vw;
    line-height: 1;
} 
    
#For_the_earth_text {
    margin-top: 18vw;
    margin-right: 5vw;
}
    
#For_the_people_count {
    left: 12vw;
    top: 8vw;
}    
    
#For_the_people_text {
    padding: 0 5vw 0 8vw;
}  
    

.content_title_box {
    padding-top: 30vw;
}
    
.For_the_people_content h3 {
    font-size: 0.8vw;
}
    
.For_the_people_content h3 .For_the_people_content_num {
    font-size: 2.5vw;
    line-height: 2.5vw;
    vertical-align: text-top;
}    

.attention_1 p {
    font-size: 0.8vw;
}    
    
#gin_no_kobanashi_box {
    padding: 0 5vw 0 8vw;
    grid-gap: 2vw;
}  

#reag999_teian_text {
    margin-top: 20vw;
    margin-right: 10vw;
}    
    
#reag999_teian .image_box {
    width: 37vw;
    left: 5vw;
    top: 10vw;
}  
    
    
.product_wrap {
    grid-template-columns: 1fr;
    grid-gap: 4vw;
}
.product_box {
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 4vw 2vw;
}  
    
.product_title h3 {
    font-size: 2rem;
}    
    
.product_image {
    margin-bottom: 1vw;
}
    
.information_contents_wrap {
    grid-gap: 8vw;
}
    
.information_contents_box {
    grid-gap: 1vw;
}    
    
.information_contents_title {
    margin-bottom: 1vw;
}    
  
    
 .information_contents_box {
    grid-template-columns: 20vw 1fr;
}   
    
    
.contact_box {
    grid-gap: 2vw;
    margin-left: 8vw;
}    
    
    
    
#end {
    padding: 10vw 6vw 8vw;
}
.end_logo #reag999_endlogo {
    width: 10vw;
}    
  
    
    
.menu-slideAnimeLeftRight {
	animation-name:slideTextX100;
	animation-duration:1.2s;
	animation-fill-mode:forwards;
    opacity: 0;
    animation-delay: 2s !important;
}
    
.menu-slideAnimeRightLeft {
	animation-name:slideTextX-100;
	animation-duration:1.2s;
	animation-fill-mode:forwards;
    opacity: 0;
    animation-delay: 2s !important;
}
    
}