@charset "UTF-8";

/*
Theme Name: shiftec
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 6.4
Requires PHP: 5.6
Version: 2.1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready

Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/


@import url('./layout.css');

/* Variables */
:root {
     --global--color--white: #ffffff;
      --global--color--gray: #f4f4f4;
     --global--color--green: #0d7b3c;
  --global--color--semigray: #bfbebd;


  --global--header--height-sp: 8rem
}


html, body{
          font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
          font-weight: 400;
           font-style: normal;
}

body{
	min-height: 100vh;
	background: url('./assets/images/common/bg.svg') no-repeat 0 0 / auto 100%;
	background-attachment: fixed;
}

.mincho{
            font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
            font-weight: 600;
             font-style: normal;
}

.zen-kaku {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
}


.inner{ max-width: 880px; padding: 0 1rem; margin: 0 auto; }






/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

    ヘッダー

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

header{ position: fixed; width: 100%; z-index: 100; }
header .header-inner{ padding-left: 2rem; }
header .header-inner .logo a{ display: flex; width: 10.5rem; align-items: center; height: var(--global--header--height-sp); }



/* メニューアイコン */
.menu_icon{
     z-index: 1000;
     padding: 0;
      height: var(--global--header--height-sp);
  background: var(--global--color-white);
    position: fixed;
       right: 0;
         top: 0;
     z-index: 100;
}
.menu_icon .menu-trigger,
.menu_icon .menu-trigger span{ display: inline-block; transition: all .4s; box-sizing: border-box;  }
.menu_icon .menu-trigger{ position: relative; width: 8rem; height: var(--global--header--height-sp); }
.menu_icon .menu-trigger span{ background-color: var(--global--color--semigray); width: 30px; height: .2rem; position: absolute; left: calc(50% - 1.5rem); }
.menu_icon .menu-trigger span:nth-of-type(1) { top: 40%; }
.menu_icon .menu-trigger span:nth-of-type(2) { top: 50%; }
.menu_icon .menu-trigger span:nth-of-type(3) { top: 61%; }

.menu_icon .menu-trigger.active span{ width: 30px; }
.menu_icon .menu-trigger.active span:nth-of-type(1) {
                top: 40%;
	-webkit-transform: translateY(11px) rotate(-45deg);
	        transform: translateY(11px) rotate(-45deg);
}
.menu_icon .menu-trigger.active span:nth-of-type(2){
      top: 50%;
  opacity: 0;
}
.menu_icon .menu-trigger.active span:nth-of-type(3) {
                top: 69%;
	-webkit-transform: translateY(-12px) rotate(45deg);
	        transform: translateY(-12px) rotate(45deg);
}



/* メニューページ */
.navigation{ position: fixed; top: 0; left: 0; height: calc(100vh); display: none; z-index: 99; width: 100%; overflow-y: auto; }
.navigation.open{ display: flex; justify-content: flex-end; }

.navigation .navigation-cover{ background-color: rgba(28,147,90,.8); width: calc(100% - 250px); height: calc(100vh); }

.navigation .navigation-inner{ width: 250px; padding-top: 18rem; background-color: #ffffff; }

.navigation ul li a{ padding: .5rem 3rem; display: block; font-weight: 500; }
.navigation ul li a:hover{ color: var(--global--color--green); }










/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

    フッター

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */


footer{ background-color: var(--global--color--gray); padding: 4.7rem 0 7rem; }

footer .footer-inner{ max-width: 770px; margin: 0 auto; display: flex; justify-content: space-between; }

footer .footer-inner .logo{ max-width: 10.2rem; width: 100%; }
footer .footer-inner .logo a{ display: block; }

footer .footer-inner .address{ display: flex; }
footer .footer-inner .address *{ font-size: 1.2rem; color: #808080; }

footer .footer-inner .address .address-box:not(:last-child){ margin-right: 5rem; }



.page-title{ padding: 18rem 0 8rem; text-align: center; }
.page-title h2{ margin: 0 auto; }
.page-title span{ font-size: 2.4rem; margin-top: 6rem; display: block; font-family: "Noto Serif JP", serif; font-weight: 400; }



.index{
  padding-left: 15px;
   font-weight: 500;
   border-left: #007036 3px solid;
     font-size: 2.8rem;
     line-height: 1.4;
       display: flex;
   align-items: center; font-family: "Zen Kaku Gothic New", sans-serif;
}
.index span{ padding-left: 2rem; }



.subtitle{ text-align: center; margin-bottom: 2.5rem; }
.subtitle span{ position: relative; font-size: 2rem; font-weight: 500; }
.subtitle span::after{
  content: "";
  width: calc(100% + 1rem);
  height: .2rem;
  background-color: #0d7b3c;
  position: absolute;
  left: -.5rem;
  bottom: -.5rem;
}










/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

    トップページ

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

body.home{ background: transparent !important; }
body.home .logo{  display: none; }
body.home footer{ display: none; }

main.top .main{ height: 90vh; }
main.top .main .inner{ display: flex; height: 100%; align-items: center; justify-content: center; }

main.top .marks .catch{ margin-bottom: 8rem; }
main.top .marks .catch img{ max-width: 26.2rem; width: 100%; }
main.top .marks h1 img{ max-width: 27.4rem; width: 100%; }

main.top .information{ padding-bottom: 10rem; }
main.top .information-list{ max-width: 70rem; margin: 0 auto; }
main.top .information-list dl{ display: flex; }
main.top .information-list dl dt{ width: 17rem; }
main.top .information-list dl *{ font-size: 1.4rem; }
main.top .information-list dl:not(:last-child){ margin-bottom: 3rem; }










/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

    会社概要

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

main.company{ padding-bottom: 12rem; }
main.company .page-title h2{ width: 24.6rem; }


main.company dl{ display: flex; align-items: baseline; }
main.company dl:not(:last-child){ margin-bottom: 3.5rem; }

main.company dl dt{ width: 250px; padding-left: 15px;	font-weight: 700;	border-left: #007036 3px solid; position: relative; }
main.company dl dt span{ font-size: 2rem; font-weight: 400; font-family: "Zen Kaku Gothic New", sans-serif; }
main.company dl dd{ width: calc(100% - 265px); }

main.company dl dd .place p{ margin-bottom: 1.5rem; }
main.company dl dd .place iframe{ width: 100%; }
main.company dl dd .place:not(:last-child){ margin-bottom: 4rem; }










/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

    建装部 / クリエイティブ事業部

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

main.creative{ padding-bottom: 12rem; }

main.creative .page-title h2 img{ max-width: 24.6rem; }
main.construction .page-title h2{ width: 30.9rem !important; }


/* 事業内容 */
.business-content .content{ margin: 4rem auto; max-width: 78rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 400 !important; }
.business-content .content .indexes{ display: block; font-weight: 700; margin-bottom: 1rem; }
.business-content dl{ display: flex; align-items: center; }
.business-content dl:not(:last-child){ margin-bottom: 3rem; }
.business-content dl dt{ font-size: 2.8rem; width: 25rem; }
.business-content dl dt::before{ content: "■"; color: var(--global--color--green); padding-right: 2rem; }
.business-content dl dd{ width: calc(100% - 25rem); font-size: 1.4rem; }



/* ご依頼からの流れ */
.flow-content .content{ margin: 4rem auto; max-width: 75rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 400 !important; }
.flow-content dl{ display: flex; align-items: center; }
.flow-content dl:not(:last-child){ margin-bottom: 3rem; }
.flow-content dl dt{ font-size: 2.8rem; width: 33rem; min-height: 8.3rem; display: flex; align-items: center; padding-left: 12rem; }
.flow-content dl dd{ width: calc(100% - 33rem); font-size: 1.4rem; }


.flow-content dl.flow01 dt{ background: url('./assets/images/creative/icon01.svg') no-repeat 0 0 / 8.3rem auto; }
.flow-content dl.flow02 dt{ background: url('./assets/images/creative/icon02.svg') no-repeat 0 0 / 8.3rem auto; }
.flow-content dl.flow03 dt{ background: url('./assets/images/creative/icon03.svg') no-repeat 0 0 / 8.3rem auto; }
.flow-content dl.flow04 dt{ background: url('./assets/images/creative/icon04.svg') no-repeat 0 0 / 8.3rem auto; }


.flow-construction-content dl.flow01 dt{ background: url('./assets/images/construction/icon01.svg') no-repeat 0 0 / 8.3rem auto; }
.flow-construction-content dl.flow02 dt{ background: url('./assets/images/construction/icon02.svg') no-repeat 0 0 / 8.3rem auto; }
.flow-construction-content dl.flow03 dt{ background: url('./assets/images/construction/icon03.svg') no-repeat 0 0 / 8.3rem auto; }
.flow-construction-content dl.flow04 dt{ background: url('./assets/images/construction/icon04.svg') no-repeat 0 0 / 8.3rem auto; }
.flow-construction-content dl.flow05 dt{ background: url('./assets/images/construction/icon05.svg') no-repeat 0 0 / 8.3rem auto; }
.flow-construction-content dl.flow06 dt{ background: url('./assets/images/construction/icon06.svg') no-repeat 0 0 / 8.3rem auto; }
.flow-construction-content dl.flow07 dt{ background: url('./assets/images/construction/icon07.svg') no-repeat 0 0 / 8.3rem auto; }
.flow-construction-content dl.flow08 dt{ background: url('./assets/images/construction/icon08.svg') no-repeat 0 0 / 8.3rem auto; }



/* 制作例・制作物紹介 */
.example-content .content{ margin: 4rem auto; max-width: 75rem; }
.example-content .content .header{ width: 100%; margin-bottom: 5.5rem; }

.example-content .content .subheader{ flex-wrap: wrap; display: flex; }
.example-content .content .subheader dl{ width: 49%; margin-right: 2%; margin-bottom: 2.5rem; }
.example-content .content .subheader dl:nth-child(even){ margin-right: 0; }
.example-content .content .subheader dl dd{ text-align: center; }

.example-content .content .bodies{ flex-wrap: wrap; display: flex; }
.example-content .content .bodies dl{ width: 32%; margin-right: 2%; margin-bottom: 2.5rem; }
.example-content .content .bodies dl:nth-child(3n){ margin-right: 0; }
.example-content .content .bodies dl dd{ margin-top: .5rem; font-size: 1.2rem; font-weight: 700; }

.example-content .content dl dd{ font-size: 1.2rem; font-weight: 700; margin-top: .5rem;  font-family: "Zen Kaku Gothic New", sans-serif; }








/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

    お問い合わせ

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

main.contact .inner{
  padding-bottom: 18rem;
}

main.contact h2{
  width: 22.3rem;
}
main.contact .text{
  text-align: center;
  margin-bottom: 4rem;
}
main.contact .text .caution{
  display: block;
  color: #cc0000;
  font-size: 1.4rem;
  margin-top: 1.4rem;
}

main.contact .form{
  max-width: 80rem;
  margin: 0 auto;
}
main.contact .form dl{
  display: flex;
  margin-bottom: 2rem;
  align-items: center;
}
main.contact .form dl dt{
  width: 18rem;
  text-align: right;
  padding-right: 1rem;
}
main.contact .form select,
main.contact .form input,
main.contact .form textarea{
  width: 100%;
  padding: 10px 15px;
  background-color: #e5e5e5;
  border: #000000 1px solid;
  font-size: 1.6rem;
  color: #000;
  -webkit-appearance: none;
  appearance: none;
}

main.contact .form select{
  position: relative;
  background: url('./assets/images/contact/arrow.svg') #e5e5e5 no-repeat 98% 50% / 10px auto;
}


main.contact .form dl dd{
  width: calc(100% - 19rem);
}
main.contact .form .button ul{
  display: flex;
  justify-content: center;
}
main.contact .form .button input{
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20rem;
  height: 6rem;
}

main.contact .form .button .s input{
  background-color: var(--global--color--green);
  color: var(--global--color--white);
  line-height: 1;
}


main.contact .recruit{
  max-width: 80rem;
  margin: 18rem auto 0;
}


main.contact .form-confirm .b input{
  margin-right: 1.5rem;
}
main.contact .form-confirm dl{
  border-bottom: #bfbebd 1px dotted;
  padding-bottom: 1.5rem;
}
main.contact .button{
  margin-top: 5rem;
}



main.contact .form-completion *{
  text-align: center;
}
main.contact .form-completion .button a{
  width: 100%;
  padding: 10px 15px;
  background-color: #e5e5e5;
  border: #000000 1px solid;
  font-size: 1.6rem;
}












@media screen and (min-width: 901px){

    .sp{ display: none !important; }



		/*　上に上がる動き　*/
		header.UpMove:not(.open) .logo{
			animation: UpAnime 0.5s forwards;
		}

		@keyframes UpAnime{
			from {
				opacity: 1;
			transform: translateY(0);
			}
			to {
				opacity: 0;
			transform: translateY(-100px);
			}
		}

		/*　下に下がる動き　*/
		header.DownMove:not(.open) .logo{
			animation: DownAnime 0.5s forwards;
		}
		@keyframes DownAnime{
			from {
				opacity: 0;
			transform: translateY(-100px);
			}
			to {
				opacity: 1;
			transform: translateY(0);
			}
		}




}




@media screen and (max-width: 900px){

    body{
      background: var(--global--color--white);
    }

    .pc{ display: none !important; }


    .inner{ padding: 0 1.5rem; }


    .navigation .navigation-cover{ background: none; width: 0; }
    .navigation .navigation-inner{ width: 100%; padding-top: 9rem; background-color: #ffffff; }
    .navigation .navigation-inner a{  text-align: center}


    .subtitle span{ font-size: 1.6rem; }

    .page-title{ padding: 9rem 0 4rem; }
    .page-title span{ margin-top: 1.5rem; font-size: 1.6rem; }

    .index{ font-size: 1.8rem; }
    .index span{ font-size: 1.4rem; }




    footer .footer-inner{ padding: 0 1.5rem; display: block; }
    footer .footer-inner .logo{ max-width: none; }
    footer .footer-inner .logo a{ text-align: center; }
    footer .footer-inner .logo a img{ max-width: 18rem; }

    footer .footer-inner .address{ margin-top: 3rem; display: block; }
    footer .footer-inner .address .address-box{ width: 100%; }

    footer .footer-inner .address .address-box:not(:last-child){ margin-right: 0; margin-bottom: 2rem; }



    main.top .main{ min-height: 75vh; }
    main.top .marks h1{ text-align: center; }
    main.top .marks h1 img{ width: 20.5rem; }

    main.top .information-list dl{ display: block; }
    main.top .information-list dl dt{ font-weight: 700; }
    main.top .information-list dl dt{ font-weight: 700; }
    main.top .information-list dl dd,
    main.top .information-list dl dd *{ font-size: 1.4rem; }



    /* 建装部 */
    main.construction .page-title h2{ width: 20.9rem !important; }

    /* クリエイティブ事業 */
    main.creative{ padding-bottom: 3rem; }
    main.creative .page-title h2{ width: 17.9rem !important; }




    .business-content .content{ margin: 2rem auto 4rem; }
    .business-content dl{ display: block; }
    .business-content dl dt{ font-size: 1.8rem; width: 100%; }
    .business-content dl dt::before{ padding-right: 1rem; }
    .business-content dl dd{ width: 100%; }
    .business-content dl:not(:last-child){ margin-bottom: 2rem; }


    .flow-content .content{ max-width: none; }
    .flow-content dl{ display: block; }
    .flow-content dl dd{ width: 100%; margin-top: 1.5rem; }

    .flow-content dl dt{ font-size: 1.8rem; width: auto; background-size: 4rem !important; min-height: 4.3rem; padding-left: 5rem; }




    .example-content .content{ margin: 2rem auto 4rem; }
    .example-content .content .header{ margin-bottom: 2rem; }

    .example-content .content .subheader dl{ margin-bottom: 3%; }

    .example-content .content .bodies dl{ width: 48.5%; margin-bottom: 3%; }

    .example-content .content .bodies dl:nth-child(odd){ margin-right: 3%; }
    .example-content .content .bodies dl:nth-child(even){ margin-right: 0; }

    .example-content .content .bodies dl:nth-child(3n){ margin-right: auto; }


    /* 会社概要 */
    main.company .page-title h2{ width: 18.5rem; }

    main.company dl{ display: block; }
    main.company dl dd{ width: 100%; margin-top: 1rem; }
    main.company dl dd,
    main.company dl dd *{ font-size: 1.4rem; }




    /* お問い合わせ */
    main.contact h2{ width: 16.7rem; }
    main.contact .text{ text-align: left; font-size: 1.4rem; }

    main.contact .form dl{ display: block; }
    main.contact .form dl dt{ width: 100%; text-align: left; font-size: 1.4rem; }
    main.contact .form dl dd{ width: 100%; }

    main.contact .form .button ul{ flex-direction: column-reverse; }
    main.contact .form .button input{ width: 100%; }

    main.contact .form-confirm .b input{ margin-top: 1.5rem; margin-right: 0; }

    main.contact .form-completion *{ font-size: 1.4rem; }
    main.contact .form-completion .button a{ display: block; width: calc(100% - 3rem); }

    main.contact .recruit{ margin-top: 4rem; }




    

		/*　上に上がる動き　*/
		header.UpMove:not(.open){
			animation: UpAnime 0.5s forwards;
		}

		@keyframes UpAnime{
			from {
				opacity: 1;
			transform: translateY(0);
			}
			to {
				opacity: 0;
			transform: translateY(-100px);
			}
		}

		/*　下に下がる動き　*/
		header.DownMove:not(.open){
			animation: DownAnime 0.5s forwards;
		}
		@keyframes DownAnime{
			from {
				opacity: 0;
			transform: translateY(-100px);
			}
			to {
				opacity: 1;
			transform: translateY(0);
			}
		}

}








/***************************************************
 * Generated by SVG Artista on 3/5/2024, 10:59:41 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

 @-webkit-keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

@keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

.svg-elem-1 {
  -webkit-animation: animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
          animation: animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
}

@-webkit-keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

@keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

.svg-elem-2 {
  -webkit-animation: animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
          animation: animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
}

@-webkit-keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

@keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

.svg-elem-3 {
  -webkit-animation: animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
          animation: animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
}

@-webkit-keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

@keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

.svg-elem-4 {
  -webkit-animation: animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
          animation: animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
}

@-webkit-keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

@keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

.svg-elem-5 {
  -webkit-animation: animate-svg-fill-5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s both;
          animation: animate-svg-fill-5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s both;
}

@-webkit-keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

@keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

.svg-elem-6 {
  -webkit-animation: animate-svg-fill-6 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s both;
          animation: animate-svg-fill-6 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s both;
}

@-webkit-keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

@keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

.svg-elem-7 {
  -webkit-animation: animate-svg-fill-7 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s both;
          animation: animate-svg-fill-7 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s both;
}

@-webkit-keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

@keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

.svg-elem-8 {
  -webkit-animation: animate-svg-fill-8 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s both;
          animation: animate-svg-fill-8 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s both;
}

@-webkit-keyframes animate-svg-fill-9 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

@keyframes animate-svg-fill-9 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

.svg-elem-9 {
  -webkit-animation: animate-svg-fill-9 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s both;
          animation: animate-svg-fill-9 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s both;
}

@-webkit-keyframes animate-svg-fill-10 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

@keyframes animate-svg-fill-10 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

.svg-elem-10 {
  -webkit-animation: animate-svg-fill-10 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s both;
          animation: animate-svg-fill-10 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s both;
}

@-webkit-keyframes animate-svg-fill-11 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

@keyframes animate-svg-fill-11 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

.svg-elem-11 {
  -webkit-animation: animate-svg-fill-11 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s both;
          animation: animate-svg-fill-11 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s both;
}

@-webkit-keyframes animate-svg-fill-12 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

@keyframes animate-svg-fill-12 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

.svg-elem-12 {
  -webkit-animation: animate-svg-fill-12 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s both;
          animation: animate-svg-fill-12 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s both;
}

@-webkit-keyframes animate-svg-fill-13 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

@keyframes animate-svg-fill-13 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

.svg-elem-13 {
  -webkit-animation: animate-svg-fill-13 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s both;
          animation: animate-svg-fill-13 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s both;
}

@-webkit-keyframes animate-svg-fill-14 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

@keyframes animate-svg-fill-14 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

.svg-elem-14 {
  -webkit-animation: animate-svg-fill-14 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s both;
          animation: animate-svg-fill-14 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s both;
}

@-webkit-keyframes animate-svg-fill-15 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

@keyframes animate-svg-fill-15 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

.svg-elem-15 {
  -webkit-animation: animate-svg-fill-15 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s both;
          animation: animate-svg-fill-15 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s both;
}