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


body{
  font-family: "Noto Sans JP";
  background-color: #FFF;
}

/* =========================================================
============================================================
============================================================
  service_page
============================================================
============================================================
========================================================= */

.service_col {
    display: flex;
    max-width: 1008px;
} 

.swiper{
  max-width: 45%;
  position: relative;
  margin-bottom: 32px;
  z-index: 0!important;
   
}
.slider-caption {
    padding: 10px 20px;
    margin: 0;
    line-height: 1.5em;
    background-color: #F3F3F3;
    color: #1b449a;
    font-size: 1.0rem;
    text-align: center;
}
.swiper img {
  height: auto;
  width: 100%;
  border-radius: 16px 16px 0px 0px;
}
.swiper1 .swiper-slide:nth-of-type(1),
.swiper2 .swiper-slide:nth-of-type(3){
}
.swiper1 .swiper-slide:nth-of-type(2),
.swiper2 .swiper-slide:nth-of-type(1){
}
.swiper1 .swiper-slide:nth-of-type(3),
.swiper2 .swiper-slide:nth-of-type(2){
}
.service_col {
    display: flex;
    max-width: 1008px;
    margin-bottom: 32px;
} 
@media screen and (max-width: 1080px) {
.service_col {
    display: block;
}
.swiper{
  max-width: 90%;
}
}



/* =========================================================
============================================================
 PAGES
============================================================
========================================================= */

#page_title {
    width: 100%;
    display: flex;
    padding-top: 240px;
    background-image: url(../img/pagetitle_back.jpg);
    background-size: cover;
}
#page_title .left_area{
    width: 50%;
    background-color: #FFFFFF;
    padding-top: 32px;
}
#page_title span {
  font-size: 1.0rem;
}
.inner {
    max-width: 1008px;
    margin: 0 auto;
}
@media screen and (max-width: 1080px) {
#page_title {
    width: 100%;
    display: block;

}
#page_title .left_area{
    width: 90%;
    margin: auto;
}
.inner {
    max-width: 90%;
    margin: 0 auto;
}
}
/* =========================================================
============================================================
============================================================
  campany_page
============================================================
============================================================
========================================================= */
.campany_inner {
    width: 800px;
    margin: auto auto;
}
.campany_th {
    width: 200px;
    background-color: #1b449a;
    padding: 16px 24px;
    border-bottom: 1px solid #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    letter-spacing: 0.3rem;
}
.campany_td {
    width: 600px;
    padding: 16px 24px;
    border-bottom: 1px solid #CCCCCC;
    letter-spacing: 0.1rem;
}
.portrait_area {
    display: flex;
    justify-content: space-between;
}
.portrait img {
    width: 150px;
}

.campany_mbp_logo {
    width: 150px;
    margin-top: 24px;
}
@media screen and (max-width: 1080px) {
.campany_inner {
    width: 100%;
}
.campany_th {
    width: 100%;
    padding: 8px 0px 8px 12px;
    justify-content: left;
    align-items: left;
}
 .campany_td {
    width: 100%;  
    padding: 12px 24px 24px 0px;
    border-bottom: 0px;
}
.portrait_area {
    display: block;

}
.portrait img {
    width: 50%;
    margin-top: 32px;
}
.campany_mbp_logo {
    width: 80%;
}
}



/* =========================================================
============================================================
 KV-Area
============================================================
========================================================= */
#kv_area{
  background-image: url(../img/main.jpg);
  background-size: cover;
  height: 100vh;
  position: relative;
}
#kv_area .inner{
  width: 1008px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  color: #1b449a;
  font-size: 1.8rem;
  line-height: 3.2rem;
  letter-spacing: 0.2rem;
}

@media screen and (max-width: 1080px) {
#kv_area{
  background-size: cover;
}
#kv_area .inner{
  font-size: 1.5rem;
  line-height: 3.2rem;
  letter-spacing: 0.2rem;
}
#kv_area .en{
  font-size: 0.8rem;
}
}

/* =========================================================
 TOP-second
========================================================= */
#top_second {
    height: 560px;
    background-image: url(../img/top_second_back.jpg);
    background-size: cover;
}
#top_second .inner {
    max-width: 1008px;
    margin-left: auto;
    margin-right: auto;
}
#top_second .inner p {
    max-width: 560px;
    color: #FFFFFF;
}
#top_third {
    width: 100%;
    display: flex;
}

#top_third .left_area{
    width: 50%;
    background-color: #FFFFFF;
    margin-top: -72px;
    padding-top: 72px;
}
#top_third .top_third_box_btn {
    padding-bottom: 88px;
}
#top_third .right_area{
    width: 50%;
    background-color: #FFFFFF;
    padding: 72px 0px;
}

.top_third_box {
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
}
#top_four {
    width: 100%;
    background-image: url(../img/top_four_back.jpg);
    background-size: cover;
}
#top_four .inner {
    max-width: 1008px;
    margin: auto;
    padding: 148px 0px;
}
@media screen and (max-width: 1080px) {

#top_second .inner {
    max-width: 90%;
}
#top_second {
    height: 560px;
    background-image: url(../img/top_second_back.jpg);
    background-size: cover;
    background-position: 80%;
}
#top_third {
    display: block;
}
#top_third .left_area{
    width: 90%;
    margin: -50px auto 0px auto;
}
#top_third .top_third_box_btn {
    padding-bottom: 40px;
}
#top_third .right_area{
    width: 90%;
    margin: auto;
    padding-top: 24px;
}
}

/* =========================================================
============================================================
 Contact-Area
============================================================
========================================================= */


#page_contact  {
    width: 100%;
    background-image: url(../img/contact_back.jpg);
    background-size: cover;
}
#page_contact .inner {
    max-width: 1008px;
    margin: auto;
    padding: 148px 0px;
    text-align: center;
}
@media screen and (max-width: 1080px) {
#page_contact .inner {
    max-width: 90%;
    margin: auto;
    padding: 100px 0px;
}
}


/* ===================================
BTN-TEL
=================================== */
.btn_tel {
  -webkit-transition: all .3s;
  transition: all .3s;
  text-align: center;
  font-size: 1.2rem;
  line-height: 3rem;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 0.1em;
  margin-top: 30px;
  width: 384px;
}
.btn_tel span{
    display: block;
    font-size: 1.0rem;
    text-indent: -30px;
    border-top: 1px solid #FFFFFF;
}
.btn_tel a{
    background-color: #1b449a;
    display: block;
    text-decoration: none;
    border-radius: 16px;
    color: #FFFFFF;
    border: 1px solid #1b449a;
    padding: 12px 16px 0px 16px;
    font-size: 2.5rem;
    text-indent: 30px;
}
.btn_tel a:hover {
  color: #1b449a;
  background-color: #fff;
  border: 1px solid #1b449a;
}
.btn_tel a:visited{
    color: #FFFFFF;
}
.btn_tel:before{
    content: "";
    width: 48px;
    height: 48px;
    background-image: url(../img/icon_tel.svg);
    background-position: left 0px;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 15px;
    top: 34px;
    transform: translateY(-50%);
    transition: all 0.3s;
}
/* ===================================
BTN-MAIL
=================================== */
.btn_mail {
  -webkit-transition: all .3s;
  transition: all .3s;
  text-align: center;
  line-height: 3rem;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 0.1em;
  margin-top: 30px;
  width: 384px;
}
.btn_mail a{
    background-color: #1b449a;
    display: block;
    text-decoration: none;
    border-radius: 16px;
    color: #FFFFFF;
    border: 1px solid #1b449a;
    padding: 30px 16px;
    font-size: 1.2rem;
    text-indent: 28px;
}
.btn_mail a:hover {
  color: #1b449a;
  background-color: #fff;
  border: 1px solid #1b449a;
}
.btn_mail a:visited{
    color: #FFFFFF;

}
.btn_mail:before{
    content: "";
    width: 48px;
    height: 48px;
    background-image: url(../img/icon_mail.svg);
    background-position: left 0px;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 15px;
    top: 56px;
    transform: translateY(-50%);
    transition: all 0.3s;
}

@media screen and (max-width: 1080px) {
.btn_tel,.btn_mail {
  width: 100%;
}
.btn_tel a {
  -webkit-transition: all .3s;
  font-size: 1.8rem;
}
}
/* =========================================================
============================================================
============================================================
  Base-kits
============================================================
============================================================
========================================================= */

.sp {/* PCレイアウトでSPを消す*/
  display: none;
}
.pc {/* SPレイアウトでPCを表示*/
  display: block;
}
@media screen and (max-width: 1080px) {
.sp {/* PCレイアウトでSPを消す*/
  display: block;
}
.pc {/* SPレイアウトでPCを表示*/
  display: none;
 }
}

.center {
  text-align: center;
}
.right {
  text-align: right;
}
.parent {/* 上下センター*/
  display: flex;
  lign-items: center;
}


.col {/* 横並び*/
  display: inline-flex;
  line-height: 2.0rem;
}
@media screen and (max-width: 1080px) {
.col{/* 横並びを解除*/
  display: block;
 }
}
.col_between {/* 横並び*/
  display: inline-flex;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 1080px) {
.col_between {/* 横並びを解除*/
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
 }
}

.m_t_1 {
  margin-top: 1rem;
}
.m_t_2 {
  margin-top: 2rem;
}
.m_t_3 {
  margin-top: 3rem;
}
.m_b_1 {
  margin-bottom: 1rem;
}
.m_b_2 {
  margin-bottom: 2rem;
}
.m_b_3 {
  margin-bottom: 3rem;
}
.m_b_32 {
  margin-bottom: 32px;
}
.m_b_80 {
  margin-bottom: 80px;
}
.m_b_104 {
  margin-bottom: 104px;
}
.m_tb_104 {
  margin-top: 104px;
  margin-bottom: 104px;
}
.p_tb_104 {
  padding-top: 104px;
  padding-bottom: 104px;
}

@media screen and (max-width: 1080px) {
.m_b_80 {
  margin-bottom: 20px;
}
.p_tb_104 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

}

/* =========================================================
============================================================
============================================================
 Fonts
============================================================
============================================================
========================================================= */

a {
  color: #025ABA;
  text-decoration: underline;
  font-weight: normal;
  transition:.3s;
}
a:visited {
  color: #666;
}
a:hover {
  color: #039;
  font-weight: normal;
  text-decoration: none;
  transition:.3s;
}
p{margin-bottom: 0.5rem;}

.txt_size_ss {/* 極小の文字サイズ */
  font-size: 0.60rem;
  line-height: 1.4rem;
  letter-spacing: 0.1rem;
  padding-top: 1rem;
  padding-left: 0.4rem;
}
.txt_size_s {/* 小の文字サイズ */
  font-size: 0.8rem;
  line-height: 1.8rem;
  letter-spacing: 0.2rem;
  padding-top: 1rem;
  padding-left: 0.4rem;
}
.txt_size_m {/* 中の文字サイズ */
  font-size: 0.96rem;
  line-height: 2.0rem;
  letter-spacing: 0.2rem;
  padding-top: 0.8rem;
  padding-left: 0.4rem;	
}
.txt_size_l {/* 大の文字サイズ */
  font-size: 1.05rem;
  line-height: 2.4rem;
  letter-spacing: 0.3rem;
  padding-top: 0.8rem;
  padding-left: 0.4rem;
}
.txt_size_ll {/* 大の文字サイズ */
  font-size: 1.3rem;
  line-height: 2.8rem;
  letter-spacing: 0.3rem;
  padding-top: 0.8rem;
  padding-left: 0.4rem;
  font-weight: bold;
}
.txt_size_big {/* 大の文字サイズ */
  font-family: "Noto Sans JP";
  font-weight: 400;
  font-size: 2.0rem;
  color: #7D7B7B;
  line-height: 3rem;
  margin-bottom: 2rem;
  letter-spacing: 0.3rem;
}

.mi {/* 冒頭にスペース */
	text-indent: 1rem;
}
.mt {/* 2行目からスペース */
  line-height: 1.8rem;
  text-indent: -1rem;
  padding-left: 1rem;
}
.txt_white {color: #FFFFFF;}
.txt_gray {color: #365665;}
.txt_red {color: #D85745;}
.txt_orange {color: #D4A751;}
.txt_blue {color: #1b449a;}

h2{
    font-weight: 200;
    font-size: 2.5rem;
    color: #1b449a;
    display: block;
}
h2 span{
  font-family: "Contrail One", sans-serif;
  font-style: normal;
  font-size: 2.5rem;
  color: #1b449a;
  display:block;
}
h3{
  font-family: 'Dosis', sans-serif;
  font-weight: 200;
  font-size: 6.0rem;
  color: #DFE1E7;
  position: relative;
}
h3 span{
  font-size: 2.0rem;
  font-weight: 400;
  color: #027CC9;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 30px;
}
h4 {
  font-size: 1.4rem;
  position: relative;
  display: inline-block;
  margin-bottom: 1em;
  color: #365665;
  font-weight: 200;
}
h4:before {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 60px;
  height: 2px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #027CC9;
  border-radius: 2px;
}

.en {
  font-family: "Contrail One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto {
  font-family: "Roboto", sans-serif;

}


/*========= スクロールダウンのためのCSS ===============*/

/*スクロールダウン全体の場所*/
.scrolldown3{
  /*描画位置※位置は適宜調整してください*/
  position:absolute;
  bottom:10px;
  right:50%;
  /*マウスの動き1.6秒かけて動く永遠にループ*/
  animation:mousemove 1.6s ease-in-out infinite;
}

/*下からの距離が変化して上から下に動く*/
@keyframes mousemove{
  0%{bottom:10px;}
  50%{bottom:5px;}
  100%{bottom:10px;}
 }

/*Scrollテキストの描写*/
.scrolldown3 span{
  /*描画位置*/
  position: absolute;
  width: 100px;
  left:-15px;
  bottom:45px;
  /*テキストの形状*/
  color: #eee;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}

/*マウスの中の線描写 */
.scrolldown3 span::after{
  content: "";
  /*描画位置*/
  position: absolute;
  top:10px;
  left:17px;
  /*線の形状*/
  width: 1px;
  height: 15px;
  background: #eee;
  /*線の動き1.4秒かけて動く。永遠にループ*/
  animation: mousepathmove 1.4s linear infinite;
  opacity:0;
}

/*上からの距離・不透明度・高さが変化して上から下に流れる*/
@keyframes mousepathmove{
  0%{
  height:0;
  top:10px;
  opacity: 0;
  }
  50%{
  height:15px;
  opacity: 1;
  }
  100%{
  height:0;
  top:30px;
  opacity: 0;
  }
}

/*マウスの描写 */
.scrolldown3:before {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom:0;
  left:-10px;
  /*マウスの形状*/
  width:25px;
  height:37px;
  border-radius: 10px;
  border:1px solid #eee;
}


/*マウスの中の丸の描写*/
.scrolldown3:after{
  content:"";
  /*描画位置*/
  position: absolute;
  bottom:26px;
  left:0;
  /*丸の形状*/
  width:5px;
  height: 5px;
  border-radius: 50%;
  border:1px solid #eee;
}


/* =========================================================
============================================================
 Page-Footer
============================================================
========================================================= */
footer{width: 100%;background-color: #1b449a;height: 400px;padding: 80px 0 80px 0;}
footer .inner{
    width: 1008px;
    margin: 0 auto 0 auto;
    text-align: center;
}
footer .inner .logo img{width: 240px;}
footer .copylight{width: 1008px;border-top: 1px solid #FFFFFF;margin-left: auto;margin-right: auto;text-align: center;}

@media screen and (max-width: 1080px) {
footer .inner{
    width: 90%;
}
footer .copylight{width: 90%;}
}



/* ===================================
BTN-Large
=================================== */
.btn_large {
  -webkit-transition: all .3s;
  transition: all .3s;
  text-align: center;
  font-size: 1.2rem;
  line-height: 3rem;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 0.1em;
  margin-top: 30px;
  width: 384px;
}
.btn_large a{
  background-color: #1b449a;
  display: block;
  text-decoration: none;
  border-radius: 16px;
  color: #FFFFFF;
  border: 1px solid #1b449a;
    padding: 16px;
}
.btn_large a:hover {
  color: #1b449a;
  background-color: #fff;
  border: 1px solid #1b449a;
}
.btn_large:after{
  content: "";
  width: 40px;
  height: 12px;
  background-image: url(../img/link_arrow_white.svg);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: 15px;
  top: 48%;
  transform: translateY(-50%);
  transition: all 0.3s;
}
.btn_large:hover:after{
  right: 10px;
  background-image: url(../img/link_arrow_black.svg);
}
@media screen and (max-width: 1080px) {
.btn_large {width: 90%;}
}
/* ===================================
BTN-Medium
=================================== */
.btn_medium {
  font-family: 'Dosis', sans-serif;
  font-weight: 100;
  line-height: 35px;
  -webkit-transition: all .3s;
  transition: all .3s;
  text-align: center;
  font-size: 16px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 0.1em;
  margin-top: 30px;
  width: 232px;
}
.btn_medium a{
  background-color: #027CC9;
  display: block;
  text-decoration: none;
  border-radius: 45px;
  color: #FFFFFF;
  border: 1px solid #027CC9;
}
.btn_medium a:hover {
  color: #027CC9;
  background-color: #fff;
  border: 1px solid #027CC9;
}
.btn_medium:after{
  content: "";
  width: 20px;
  height: 12px;
  background-image: url(../img/link_arrow_white.svg);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: 15px;
  top: 48%;
  transform: translateY(-50%);
  transition: all 0.3s;
}
.btn_medium:hover:after{
  right: 10px;
  background-image: url(../img/link_arrow_black.svg);
}








/*========= アニメーションの指定 ===============*/

/*動きのきっかけの起点となるクラス名 はじめは非表示に*/
.scale-up-tlTrigger,
.scale-up-blTrigger,
.scale-up-brTrigger,
.fadeInTrigger,
.fadeInUpTrigger,
.fadeInDownTrigger,
.fadeInLeftTrigger,
.zoomInTrigger,
.zoomOutTrigger{
    opacity:0;
}

/* アニメーションの回数を決めるCSS*/

.count2{  
	animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time{  
	animation-delay: 0.5s;
}
.animate__delay-02s{  
	animation-delay: 0.2s;
}
.animate__delay-04s{  
	animation-delay: 0.4s;
}
.animate__delay-06s{  
	animation-delay: 0.6s;
}
.animate__delay-08s{  
	animation-delay: 0.8s;
}
.animate__delay-10s{  
	animation-delay: 1.0s;
}
.animate__delay-20s{ 
	animation-delay: 2.0s;
}
.animate__delay-30s{ 
	animation-delay: 3.0s;
}
.animate__delay-34s{ 
	animation-delay: 3.4s;
}
/* アニメーション自体が変化する時間を決めるCSS*/

.change-time{  
	animation-duration: 4.5s;/*この数字を変化させたい時間に変更*/
}


@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  100% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  100% {
    opacity: 1;
  }
}
.animate__zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomOut {
  from {
    opacity: 0;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  100% {
    opacity: 1;
  }
}
@keyframes zoomOut {
  from {
    opacity: 0;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  100% {
    opacity: 1;
  }
}
.animate__zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20%, 0);
    transform: translate3d(0, 20%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20%, 0);
    transform: translate3d(0, 20%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}


@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-5%, 0, 0);
    transform: translate3d(-5%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-5%, 0, 0);
    transform: translate3d(-5%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInLeft{
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}




/**
 * ----------------------------------------
 * loading animation
 * ----------------------------------------
 */

.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeOut 1.5s 2.5s forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    display: none;
  }
}

.loading__logo {
  opacity: 0;
  animation: logo_fade 2.0s 0.5s forwards;
  width: 200px;
}

@keyframes logo_fade {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  60% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
  }
}