@charset "utf-8";

body{
    /*body全体のフォント変更*/
    font-family: "Syne","Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    line-height: 1.5;
    color: #333;
    background-color: #C9C9C9;
}

.animationtext{
  color: #fff;
  font-family: Syne;
  font-style: normal;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 121%; /* 3.3275rem */
  letter-spacing: 0.275rem;
  margin-top: 0;
  word-break: break-all;
}

h2{
  font-size: 1.75rem !important;
}

.animationtext span{opacity: 0;}
.animationtext.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
	0% {opacity:0;}
	100% {opacity:1;}
}

.textArea{
overflow: hidden;
position: relative;
background: none;
padding: 1rem;
}

.textArea .animationtext{
filter: blur(10px);
opacity: 0;
animation: blur 2s both;
}
.is-act .animationtext{
  animation: blur 4s both;
}

@keyframes blur {
0% {
  opacity: 0;
  filter: blur(40px);
}
100% {
  opacity: 1;
  filter: blur(0);
}
}
@keyframes opacity {
100% {
  opacity: 0;
}
}

h4{
  margin-top: 0;
  color: #FFF;
font-family: Syne;
font-size: 2.25rem;
font-style: normal;
font-weight: 700;
line-height: 140%; /* 3.15rem */
letter-spacing: 0.225rem;
}
.contents{
  padding: 2.5rem;
}

.text p{
  max-width: 27.875rem;
  color: #FFF;
  font-family: Syne;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 700;
  line-height: 200%; /* 1.75rem */
  letter-spacing: 0.0875rem;
}

.text{
    animation-name:fadeInAnime;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    opacity:0;
    animation-delay: 1s; /
  }

/*aboutfeatures*/
.about-features{
  display: flex;
  align-items: center;
  gap: 0.875rem;
  animation-name:fadeInAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
  opacity:0;
  animation-delay: 1.5s; /
}

.features-detail{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.maincopy{
  color: #FFF;
  font-family: Syne;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 100%; /* 1.25rem */
  letter-spacing: 0.0625rem;
  margin: 0;
}

.subcopy{
  color: #FFF;
  font-family: Syne;
  font-size: 0.875rem;
  line-height: 100%; /* 0.625rem */
  letter-spacing: 0.15rem;
  font-weight: 700;
  margin: 0;
}

.about-features img{
  width: 0.875rem;
  height: 0.875rem;
}


/*companyinfo*/
.company-info{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  align-self: stretch;

  color: #FFF;
  font-family: Syne;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 700;
  line-height: 200%; /* 1.75rem */
  letter-spacing: 0.0875rem;
}
.info-row{
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.info-title{
  width: 5rem;
}

.info-detail{
  line-height: 175%;
}


 @keyframes fadeInAnime{
      from {
        opacity: 0;
      }
    
      to {
        opacity: 1;
      }
    }

@media screen and (min-width: 768px) and (max-width: 1024px) {
      .animationtext{
        font-size: 1.5rem;
        line-height: 121%; /* 3.3275rem */
        letter-spacing: 0.275rem;
      }
    }

 @media screen and (max-width: 30rem) {
      .contents{
        padding: 1rem;
      }

      .animationtext{
        font-size: 1.1rem;
        line-height: 121%; /* 3.3275rem */
        letter-spacing: 0.125rem;
      }   

      .text h4{
        font-size: 1.35rem;
      }

      .text p{
        font-size: 0.7rem;
      }
      .subcopy{
        color: #FFF;
        font-size: 0.625rem;
        line-height: 100%; /* 0.625rem */
        letter-spacing: 0.0625rem;
        margin: 0;
      }
      
      .maincopy{
        color: #FFF;
        font-family: Syne;
        font-size: 1rem;
        font-weight: 700;
        line-height: 125%; /* 1.25rem */
        letter-spacing: 0.05rem;
        margin: 0;
      }

      .about-features{
        margin-top: 0.5rem;
        gap: 0.5rem;
      }

      .about-features img{
        width: 0.625rem;
        height: 0.625rem;
      }

      /*companyinfo*/
      .company-info{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.625rem;
        align-self: stretch;

        color: #FFF;
        font-family: Syne;
        font-size: 0.65rem;
        font-style: normal;
        font-weight: 700;
        line-height: 200%; /* 1.75rem */
        letter-spacing: 0.0875rem;
      }
      .info-row{
        display: flex;
        align-items: flex-start;
        gap: 0.2rem;
      }

      .info-title{
        width: 4rem;
      }

      .info-detail{
        line-height: 175%;
      }




    }