@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/*--------------------------------------
リセットCSS
--------------------------------------*/
*, ::before, ::after {-webkit-box-sizing: border-box; box-sizing: border-box; border-style: solid; border-width: 0;}
html { line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;}
body { margin: 0;}
main { display: block;}
p, table, blockquote, address, pre, iframe, form, figure, dl { margin: 0;}
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0;}
ul, ol { margin: 0; padding: 0; list-style: none;}
dt { font-weight: 700;}
dd { margin-left: 0;}
hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; overflow: visible; border-top-width: 1px; margin: 0; clear: both; color: inherit;}
pre { font-family: monospace, monospace; font-size: inherit;}
address { font-style: inherit;}
a { background-color: transparent; text-decoration: none; color: inherit;}
abbr[title] { -webkit-text-decoration: underline dotted;text-decoration: underline dotted;
}
/* b, strong {font-weight: bolder;} */
code, kbd, samp { font-family: monospace, monospace; font-size: inherit;}
small { font-size: 80%;}
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sub { bottom: -0.25em;}
sup { top: -0.5em;}
svg, img, embed, object, iframe { vertical-align: bottom;}
button, input, optgroup, select, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; vertical-align: middle; color: inherit; font: inherit; background: transparent; padding: 0; margin: 0; border-radius: 0; text-align: inherit; text-transform: inherit;}
[type=checkbox] { -webkit-appearance: checkbox; -moz-appearance: checkbox; appearance: checkbox;}
[type=radio] { -webkit-appearance: radio; -moz-appearance: radio; appearance: radio;}
button, [type=button], [type=reset], [type=submit] { cursor: pointer;}
button:disabled, [type=button]:disabled, [type=reset]:disabled, [type=submit]:disabled { cursor: default;}
:-moz-focusring { outline: auto;}
select:disabled { opacity: inherit;}
option { padding: 0;}
fieldset { margin: 0; padding: 0; min-width: 0;}
legend { padding: 0;}
progress { vertical-align: baseline;}
textarea { overflow: auto;}
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto;}
[type=search] { outline-offset: -2px;}
[type=search]::-webkit-search-decoration { -webkit-appearance: none;}
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit;}
label[for] { cursor: pointer;}
details { display: block;}
summary { display: list-item;}
[contenteditable]:focus { outline: auto;}
table { border-color: inherit;}
caption { text-align: left;}
td, th { vertical-align: top; padding: 0;}
th { text-align: left; font-weight: 700;}


/*--------------------------------------
サイト共通定義
--------------------------------------*/
html {scroll-behavior: smooth;}
body {
  line-height: 1.5;
  margin: 0 auto;
  min-height: 800px;
  min-width: 320px;
  width: 100%;
  color: var(--black);
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  position: relative;
  word-break: break-word;
  /*font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;*/
  font-family: "Times New Roman", "Tinos", serif;
}
body.open {overflow: hidden !important;}
@media (min-width: 768px) {
  body{font-size: 1.2vw;}
  body.open {
    overflow: auto !important;
  }
}
body::-webkit-scrollbar {width: 10px;}
body::-webkit-scrollbar-track {background-color: var(--white);}
body::-webkit-scrollbar-thumb {
  background-color: var(--main_color);
  border-radius: 100px;
}
::-moz-selection {
  background: var(--main_color);
  color: var(--white);
}
::selection {
  background: var(--main_color);
  color: var(--white);
}
ul::-webkit-scrollbar {display: none;}
img, video {
  width: 100%;
  height: auto;
  object-fit: contain;
}

a{
  opacity: 1;
  -webkit-transition: opacity 0.4s ease;
  -moz-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
}
a:hover{
  opacity: 0.5;
}


/*ーーーーーーーーーーーーーーーーーーーーーー
見出し
ーーーーーーーーーーーーーーーーーーーーーー*/
h2{
  font-size: 50px;
  color: var(--main_color);
  font-family: "Times New Roman", "Tinos", serif;
  margin: 30px 20px;
}
@media (min-width: 768px) {
  h2{
    font-size: 100px;
    margin: 60px 40px;
  }
}

h3{
  font-size: 20px;
  color: var(--main_color);
}
@media (min-width: 768px) {
  h3{font-size: 24px;}
}

h4{
  font-size: 18px;
  color: var(--main_color);
}
@media (min-width: 768px) {
  h4{font-size: 20px;}
}

/*--------------------------------------
表示・非表示
--------------------------------------*/
.pc,.pc_display{display: none;}
.sp{display: block;}
.mb_10_sp{margin-bottom: 10px;}
.mb_20_sp{margin-bottom: 20px;}
@media (min-width: 768px) {
  .pc{display: block;}
  .pc_display{display: flex;}
  .sp{display: none;}
  .mb_10_sp{margin-bottom: 0;}
  .mb_20_sp{margin-bottom: 0;}
}

/*ーーーーーーーーーーーーーーーーーーーーーー
レイアウト
ーーーーーーーーーーーーーーーーーーーーーー*/
.wrapper{margin-top: 60px;}
@media (min-width: 768px) {
  .wrapper{margin-top: 80px;}
}
.inner {
  max-width: 1040px;
  margin: auto;
}

/*ーーーーーーーーーーーーーーーーーーーーーー
間隔
ーーーーーーーーーーーーーーーーーーーーーー*/
.pb_10{padding-bottom: 10px;}
.pb_20{padding-bottom: 20px;}
.pb_30{padding-bottom: 30px;}

.mb_10{margin-bottom: 10px;}
.mb_20{margin-bottom: 20px;}
.mb_30{margin-bottom: 30px;}
.mb_40{margin-bottom: 40px;}
.mb_60{margin-bottom: 60px;}
.mb_120{margin-bottom: 120px;}

/*ーーーーーーーーーーーーーーーーーーーーーー
フォントサイズ
ーーーーーーーーーーーーーーーーーーーーーー*/
.fs_ss{font-size: 0.7em!important;}
.fs_s{font-size: 0.8em!important;}
.fs_12em{font-size: 1.2em!important;}
.fs_15em{font-size: 1.5em!important;}
.fs_2em{font-size: 2em!important;}

/*ーーーーーーーーーーーーーーーーーーーーーー
カラー
ーーーーーーーーーーーーーーーーーーーーーー*/
:root {
  /*--main_color: #204e79;*/
  --main_color: #67c9d9;
  --black:#252525;
  --gray: #eee;
  --white:#fff;
  --light_blue: #e8edf1;
}
.txt_blue{color: var(--main_color);}
.txt_red{color: #a5233b;}

/*ーーーーーーーーーーーーーーーーーーーーーー
共通のボックス
ーーーーーーーーーーーーーーーーーーーーーー*/
/* 黒いラインのボックス */
.liner_black {
  position: relative;
  border: 2px solid var(--black);
  background-color: var(--white);
  border-radius: 10px;
  box-sizing: border-box;
  padding: 40px 20px;
  text-align: center;
}
@media (min-width: 768px) {
  .liner_black {
    border: 3px solid var(--black);
    border-radius: 20px;
    padding: 40px 60px;
  }
}

/*ーーーーーーーーーーーーーーーーーーーーーー
位置設定
ーーーーーーーーーーーーーーーーーーーーーー*/
.center {text-align: center;}
.right {text-align: right;}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
}
.flex_responsive {
  display: block;
}
.flex,
.flex_responsive {
  gap: 1rem;
  align-items: flex-start;
}
@media (min-width: 768px) {
  .flex_responsive {
    align-items: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}
@media (min-width: 560px) {
    footer .flex_responsive {
        align-items: flex-start;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
}

/*ーーーーーーーーーーーーーーーーーーーーーー
mv
ーーーーーーーーーーーーーーーーーーーーーー*/
#mainvisual{
  position: relative;
}
#mainvisual .mv_catchcopy{
  position: absolute;
  bottom: 2%;
  right: 4%;
  color: var(--white);
  font-size: 24px;
  line-height: 1.2;
  font-family: "Times New Roman", "Tinos", serif;
  text-align: right;
}
#mainvisual .mv_catchcopy span{
  font-size: 32px;
}
@media (min-width: 768px) {
  #mainvisual .mv_catchcopy{
    font-size: 28px;
  }
  #mainvisual .mv_catchcopy span{
    font-size: 40px;
  }
}
@media (min-width: 1200px) {
  #mainvisual .mv_catchcopy{
    font-size: 32px;
  }
  #mainvisual .mv_catchcopy span{
    font-size: 80px;
  }
}

/*--------------------------------------
共通のテーブル
--------------------------------------*/
/*table_01*/
.table_01 {
  width: 100%;
  margin: 0 auto;
  table-layout: fixed;
}
.table_01 tr {
  border-bottom: 1px solid var(--gray);
}
.table_01 th {
  color: var(--main_color);
  font-weight: bold;
  align-items: center;
  padding: 0 0 10px 0;
}
.table_01 td {
  text-align: left;
  margin-left: 0;
  padding: 0 0 20px 0;
}
.table_01 th,
.table_01 td{
  width: 100%;
  display: grid;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .table_01 tr {
    display: flex;
    justify-content: center;
    align-items: stretch;
  }
  .table_01 th,
  .table_01 td{
    padding: .6em 0;
  }
  .table_01 th {
    width: 40%;
  }
  .table_01 td {
    width: 60%;
  }
}
/*table_02*/
.table_02 {
  border-spacing: 0;
  width: 100%;
  font-size: 14px;
}
.table_02 tr{
  display: block;
  padding-bottom: 10px;
}
.table_02 th,.table_02 td{
  display: block;
  width: 100%;
}
.table_02 td{margin-left: 20px}
@media (min-width: 768px) {
  .table_02 tr{
    display: flex;
    padding-bottom: 0;
  }
  .table_02 th{
    width: 45%;
  }
  .table_02 td{
    width: 55%;
  }
}
/*table_form*/
.table_form {
  width: 100%;
  border-spacing: 0;
  text-align: left;
}
.table_form tr{
  padding-bottom: 20px;
  display: block;
}
.table_form th,
.table_form td {
  width: 100%;
  display: block;
}
.table_form th {
    text-align: left;
    vertical-align: middle;
}
.table_form td {
  display: block;
}
span.icon_required{
    color: red;
}
@media screen and (min-width: 768px){
  span.icon_required {
      font-size: 0.8rem;
  }
}
@media screen and (min-width: 768px) {
  .table_form th,
  .table_form td {
        place-content: center;
    }
}
/*form reset*/
form input[type="text"],
form input[type="email"],
form textarea,
form button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  outline: none;
  font-size: 16px;
}
/*form style*/
form input[type="text"],
form input[type="email"],
form textarea {
  border: 1px solid var(--gray);
  background: var(--white);
  color: #666;
  -webkit-transition: all .3s;
  transition: all .3s;
  padding: 5px 10px;
  margin: 4px 0;
  height: 40px;
  width: 100%;
}
form textarea{
  height: 200px;
  resize: vertical;
}
input[type="submit"] {
  border: none;
  -webkit-appearance: none;
  border-radius: 0;
  display: block;
  margin: 0 auto;
  cursor: pointer;
  max-width: 260px;
  width: 100%;
  padding: 8px 20px;
  color: var(--white);
  background: var(--main_color);
  text-align: center;
  transition: all .5s;
}
input[type="submit"]:hover {
  opacity: .8;
}

/*--------------------------------------
ヘッダー
--------------------------------------*/
header {
  align-items: center;
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  padding: 10px 20px;
  z-index: 90;
  background:rgba(255, 255, 255, .8);
}
header h1{
  z-index: 99;
}
header h1 img {
  width: 100px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  
}
.header_inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 768px) {
  header{
    height: 80px;
    padding: 10px 40px;
}
  header h1 img {
    width: 140px;
  }
}
/* ハンバーガーメニュー */
/*ボタン*/
.btn_toggle {
  border: none;
  padding: 0;
  margin-left: auto;
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  z-index: 99;
  height: 60px;
  width: 60px;
}
.btn_toggle:hover{
  cursor: pointer;
}
.btn_toggle span,
.btn_toggle span:before,
.btn_toggle span:after {
  background: var(--main_color);
  height: 1px;
  width: 20px;
  transition: ease-out 0.3s;
  display: block;
  margin: 0 auto;
}
.btn_toggle span {
  position: relative;
}
.btn_toggle span:before{
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
}
.btn_toggle span:after{
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
}
#btn_open.active span{
  background: transparent;
}
#btn_open.active span:before{
  transform: rotate(-45deg);
  top: 0;
}
#btn_open.active span:after{
  transform: rotate(45deg);
  top: 0;
}
#sp_nav {
  height: 100vh;
  background: var(--white);
  margin: 0;
  padding: 50px 30px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 98;
  display: none;
  align-content: center;
}
#sp_nav.open{
  display: block;
}
.sp_nav_wrap {
  max-width: 400px;
  margin: 0 auto;
}
.nav_menu{
  line-height: 2;
  font-size: 20px;
  color: var(--main_color);
}
.nav_menu li{
  padding-left: 4px;
    font-weight: bold;
    list-style: "-";
}
#pc_nav{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 100px 0 60px 40px;
  transition: all .2s ease-in-out;
  z-index: 90;
  color: var(--main_color);
}
#pc_nav a{
  text-align: left;
  color: var(--main_color);
}
.pc_nav_menu{
  font-size: 16px;
}
.pc_nav_menu li{
  padding-left: 4px;
  list-style: "-";
  text-align: left;
}
.pc_nav_menu a{
  text-decoration: "-";
  font-weight: bold;
  display: flex;
  padding: 0 0 20px;
}


/*--------------------------------------
フッター
--------------------------------------*/
footer {
  background: var(--light_blue);
  color: var(--main_color);
}
footer a{
  color: var(--main_color);
}
footer .inner {
  padding: 80px 30px;
}
footer .inner .footer_txt{
  border-bottom: 1px solid var(--main_color);
  margin-bottom: 40px;
  padding-bottom: 40px;
}
footer .nav{
  line-height: 2;
  font-size: 20px;
}
footer .nav li{
  padding-left: 4px;
  font-weight: bold;
  list-style: "-";
}
footer .inner .footer_l .logo{
  width: 120px;
}
footer .flex_responsive {
  gap: 2rem;
}
@media (min-width: 768px) {
  footer {
    padding-left: 160px;
  }
  footer .inner {
    padding: 80px 60px 80px 0;
    max-width: none;
  }
  footer .inner .footer_l .logo{
    width: 180px;
  }
  footer .inner .footer_r ul:first-child li{
    padding: 0;
  }
}
@media (min-width: 1080px) {
  footer .inner .footer_l .logo{
    width: 240px;
  }
}


section{
  padding: 0 20px 50px;
}
@media (min-width: 768px) {
  section{
    padding: 0 40px 60px 20px;
  }
}

/*セクションの区切り線*/
.border{
  border-bottom: 1px solid var(--gray);
  margin-bottom: 50px;
}
@media (min-width: 768px) {
  .border{
    margin-bottom: 60px;
  }
}
.border_table{
  border-bottom: 1px solid var(--gray);
  margin-bottom: 10px;
  padding-bottom: 10px;
}

/*サイドテキスト*/
main{position: relative;}
.side_txt{
  position: fixed;
  top: 50%;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  -webkit- transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: 12px;
  color: var(--main_color);
}
@media (min-width: 768px) {
  .side_txt{
   font-size: initial;
  }
}

/* セクション共通 */
.item{
  align-items: center;
}
@media (min-width: 768px) {
  main {
    padding-left: 200px;
    padding: 0 0 60px 240px;
  }
  section .txt_l{
    width: 45%;
  }
  section .txt_r{
    width: 55%;
  }
  section .half .txt_l,
  section .half .txt_r{
    width:  50%;
  }
  .inner_txt_l{
    width: 70%;
  }
  .inner_txt_r{
    width: 30%;
  }
}

/*ロゴ*/
.company_logo{
  justify-content: left;
}
.company_logo img{
  max-height: 80px;
  width: auto;
  height: 100%;
}

/*挿絵*/
.img_illustrations{
  justify-content: left;
}
.img_illustrations img{
  max-width: 160px;
  width: 100%;
  height: auto;
}


/*--------------------------------------
下層ページ
--------------------------------------*/
/*news*/
#info_box{
  width: 100%;
}
#info_box .toggle_contents{
  border-bottom: 1px solid var(--gray);
}
.toggle_title {
  position: relative;
  padding: 20px 20px 20px 0;
  cursor: pointer;
  text-align: left;
}
.toggle_btn {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: block;
  width: 24px;
  height: 24px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border-radius: 50%;
}
.toggle_contents .toggle_btn:after {
  content:"";
  display:block;
  width:5px;
  height:5px;
  border-top: var(--black) 1px solid;
  border-right: var(--black) 1px solid;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position:absolute;
    right: 8px;
    top: 4px;
  bottom: 15%;
  margin: auto;
}
.toggle_contents .selected .toggle_btn:after {
  content:"";
  display:block;
  width:5px;
  height:5px;
  border-top: var(--black) 1px solid;
  border-right: var(--black) 1px solid;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  position:absolute;
  right: 8px;
  top: 4px;
  bottom: 0;
  margin: auto;
}
.toggle_btn:before {
  width: 2px;
  height: 10px;
}
.toggle_action.selected .toggle_btn:before {
  content: normal;
}
.news_description .toggle_title{
  cursor: auto;
}
.toggle_title .news_tag{
  color: var(--main_color);
  border: solid 1px var(--main_color);
  padding: 0 10px 2px;
  margin-left: 10px;
}
.toggle_title h3{
  margin-bottom: 0;
  font-size: 24px;
}
.toggle_contents dd {
  display: none;
  padding: 0 30px 20px 0;
  text-align: left;
}
.toggle_contents:first-child dd {
  display: block;
}
@media (min-width: 768px) {
  .toggle_contents dd {
    padding: 0 40px 20px 0;
  }
}

/*about*/
#about .company .flex_responsive{
  flex-wrap: wrap;
}
#about .company .flex_responsive li{
  margin-bottom:20px
}
#about .company .flex_responsive li img{
  height: 40px;
  width: auto;
  margin-bottom: 10px;
}
#about .example .flex_responsive{
  display: flex;
  flex-wrap: wrap;
}
#about .example .flex_responsive li{
  width: calc((100% / 2) - 15px);
}
#about .company_des img.logo{
  height: 40px;
  width: auto;
}
#about .company_des.about_gas .txt_r img{
  width: 100%;
}
#about .company_des .flex{
  justify-content: flex-start;
}
@media (min-width: 768px) {
  #about .company_des.about_gas .txt_r img{
    width: 44%;
  }
  #about .company .flex_responsive li{
    margin-bottom: 0;
    width: calc((100% / 2) - 15px);
  }
  #about .example .flex_responsive li{
    width: calc((100% / 3) - 20px);
  }
}

/*business*/
.d-flex{
  display: flex;
  justify-content: center;
  align-items: center;
}
.bm-flex{
  display: block;
  gap: 1rem;
  margin-bottom: 20px;
}
.bg-black{
  background: #000;
  color: #fff;
  padding: 2rem 1rem;
  font-size: 1rem;
  aspect-ratio: 787/546;
}
.bg-blue{
  background: #353f4e;
  color: #fff;
  padding: 2rem;
}
.bm-3item{
  width: 100%;
}
.logo_platform{
  width: 70%;
  margin: 0 auto 40px;
  display: block;
}
@media (min-width: 768px) {
  .bm-flex{
    display: flex;
    gap: 1rem;
  }

  .bm-3item{
    width: 50%;
  }

  .w-40p{
    width: 40%;
  }
  .w-60p{
    width: 60%;
  }
}

/*products*/
.products h2{
  line-height: 1.2;
}
.products h2 .subtitle{
  font-size: 20px;
  display: block;
}
.table_number{
  color: var(--main_color);
  font-weight: bold;
}
@media (min-width: 768px) {
  .products h2 .subtitle{
    font-size: 24px;
    text-transform: uppercase;
  }
}

/*--------------------------------------
アニメーション
--------------------------------------*/
/* 左からフェード */
.bgextend{
  animation-name:bgextendAnimeBase;
  animation-duration:1s;
  animation-delay: 0.4s;
  animation-fill-mode:forwards;
  position: relative;
  overflow: hidden; /* はみ出た色要素を隠す */
  opacity:0;
}
@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }
  to {
    opacity:1;  
  }
}
.bgappear{
  animation-name:bgextendAnimeSecond;
  animation-duration:1s;
  animation-delay: 0.6s;
  animation-fill-mode:forwards;
  opacity: 0;
}
@keyframes bgextendAnimeSecond{
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.bgLRextend::before{
  animation-name:bgLRextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--main_color);
  z-index: 1;
}
@keyframes bgLRextendAnime{
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  50% {
    transform-origin:left;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:right;
  }
  100% {
    transform-origin:right;
    transform:scaleX(0);
  }
}

/* 順番にフェードアップ */
.fadeUp {
  animation-name:fadeUpAnime;
  animation-duration:0.5s;
  animation-delay: 0.3s;
  animation-fill-mode:forwards;
  opacity: 0;
}
@media (min-width: 768px) {
  .delay_1 {
    animation-delay: 0.4s;
  }
  .delay_2 {
    animation-delay: 0.5s;
  }
  .delay_3 {
    animation-delay: 0.6s;
  }
  .delay_4 {
    animation-delay: 0.7s;
  }
  .delay_5 {
    animation-delay: 0.8s;
  }
  .delay_6 {
    animation-delay: 0.9s;
  }
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}