@charset "utf-8";
/* オープニング時だけスクロールを無効にする */
body{
    height: 100vh;
    overflow: hidden;
    animation: scrollnone 0s both 2.5s;
}
@keyframes scrollnone {
    100%{
        height: auto;
        overflow: visible;
        /* overflow: visible;  →初期値*/
    }
}



.FV {
    background-image: url(../img/Top/FV/New_FV-background@3x.png);
    background-repeat: no-repeat;
    background-position: 128px center;
    background-size: auto 100%;
    padding: 40px var(--padding);

}

.FV-area{
    height: calc(100vh - 110px);
    /* width: 1184px; */
    max-width: 100%;
    /* margin: 0 auto; */
}

.FV-text{
    padding-bottom: 24px;
}

.FV-text h2{
    font-size: 6.0rem;
    font-weight: bold;
    background: linear-gradient(90deg, #13a0f4, #00d5d5, #13a0f4);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 6px;
    line-height: 150%;
}

.FV-text p{
    font-size: 2.4rem;
    font-weight: bold;
    letter-spacing: 4px;
}

.FV .img-area{
    /* padding: 0 var(--padding); */
    display: flex;
    justify-content: right;
    max-width: 100%;
    height: auto;
}

.FV-image{
    width: 70%;
    border-radius: 20px;
    overflow: hidden;
}
.FV-image-item{
    aspect-ratio: 1/0.6;
}
.FV-image-item:nth-child(1){
    background: url(../img/Top/FV/Top_FV_image@3x.png) center/cover;
}
.FV-image-item:nth-child(2){
    background: url(../img/Top/FV/Top_FV_image_2.jpg) center/cover;
}
.FV-image-item:nth-child(3){
    background: url(../img/Top/FV/Top_FV_image-3.png) center/cover;
}

/* .FV-image img{
    display: block; 
    width: 800px;
} */

/* Aboutus */
.Aboutus{
    margin-top: 40px;
    padding: 96px var(--padding);
    display: flex;
    justify-content: center;
}

.Aboutus-area {
    background: linear-gradient(45deg, #13a0f4, #22c1d5, #23dbdb, #22c1d5, #13a0f4);
    padding: 80px max(calc((100% - 1184px) / 2),64px);
    border-radius: 20px;
    display: flex;
    justify-content: center;
}

.Aboutus-area .title{
    padding: 0 calc((100% - 960px) / 2);
}

.title h3{
    font-family: "Montserrat", sans-serif;
    font-size: 2.4rem;
    font-weight: bold;
    color: #e16122;
}

.title p{
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1;
}

.Aboutus-area .text-box{
    padding: 40px calc((100% - 960px) / 2);
}

.Aboutus-area .text-box .main-text{
    font-size: 4.8rem;
    font-weight: bold;
    color: #fcfcfc;
    text-align: center;
    padding-bottom: 40px;
}

.Aboutus-area .text-box p{
    font-size: 2.4rem;
    text-align: center;
}

.Aboutus-area .button-area{
  display: flex;
  justify-content: center;
  transition: all 0.3s ease;
}

.Aboutus-area .button-area .link-button:hover .icon{
    background-color: #fcfcfc;
    border: #00d5d5;
    transition: all 0.5s ease;
}
  
.Aboutus-area .button-area .link-button:hover .arrow{
    border-color: #00d5d5;
    transition: all 0.5s ease;
  }

.Aboutus-area .link-button{
    display: inline-block;
    width: 250px;
    line-height: 64px;
    background-color: #fcfcfc;
    border-radius: 40px;
    border: solid 1px #00d5d5;
    font-weight: bold;
    color: #00d5d5;
    display: flex;
    padding-left: 80px;
}
.Aboutus-area .link-button:hover {
    background-color: #00d5d5;
    color: #fcfcfc;
    border: 1px solid #fcfcfc;
    transition: all 0.5s ease;
  }
.Aboutus-area .icon{
    background-color: #00d5d5;
    width: 50px;
    height: 50px;
    border-radius: 30px;
    margin: 8px 0 8px 28px;
    padding: 16px 12px;
}

.Aboutus-area .arrow{
    display: block;
    width: 18px;
    height: 18px;
    border-bottom: solid 3px;
    border-right: solid 3px;
    border-color: #fcfcfc;
    transform: rotate(-45deg);
    align-items: center;
}

/* Product */
.Product{
    padding: 96px var(--padding);
}

.Product .title{
    padding: 0 calc((100% - 960px) / 2);
}

.title h3{
    font-family: "Montserrat", sans-serif;
    font-size: 2.4rem;
    font-weight: bold;
    color: #e16122;
}

.title p{
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1;
}

.Product .Product-area{
    display: flex;
    justify-content: center;
    padding: 0 calc((100% - 960px) / 2);
}


.Product-area .contents{
    display: flex;
    padding-top: 64px;
    justify-content: center;
    align-items: center;
    gap: 64px;
}

.Product-area .contents .appli-image{
    width: 38%;

}

.Product-area .contents .main-text{
    color: #333333;
    font-size: 3.2rem;
    line-height: 2;
    padding-bottom: 40px;
    font-weight: bold;

}

.Product-area .contents .text-area p{
    font-weight: bold;
}

.Product-area .contents .detail {
    text-align: center;
    /* padding-left: 128px; */
}

.Product-area .contents .detail .dwnlord-button-area{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
}

/* Service */
.Service{
    background-color: #e8edef;
}

.Service-area{
    padding: 96px var(--padding);
}

.Service-area .title{
    padding: 0 calc((100% - 960px) / 2);
}

.title h3{
    font-family: "Montserrat", sans-serif;
    font-size: 2.4rem;
    font-weight: bold;
    color: #e16122;
}

.title p{
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1;
} 

.Service-area .contents .text-area{
    text-align: center;
}

.Service-area .contents .text-area .main-text{
    font-size: 3.6rem;
    font-weight: bold;
    padding: 64px 0;
}

.Service-area .contents .detail{
    padding: 0 calc((100% - 1184px) / 2);
}

.Service-area .contents .detail ul{
    display: flex;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
}

.Service-area .contents .detail ul li{
    background-color: #fcfcfc;
    padding: 40px 40px;
    text-align: center;
    border-radius: 30px 30px 0 0;
}

.Service-area .contents .detail ul li dt{
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1.5;
}

.Service-area .contents .detail ul li dd{
    padding: 40px 0;
}

.Service-area .button-area{
    display: flex;
    justify-content: center;
    padding: 64px 0;
  }
  
  .Service .Service-area .link-button{
      display: inline-block;
      width: 250px;
      line-height: 64px;
      background-color: #fcfcfc;
      border-radius: 40px;
      border: solid 1px #13a0f4;
      font-weight: bold;
      color: #13a0f4;
      display: flex;
      padding-left: 80px;
  }

  .Service-area .link-button:hover {
    background-color: #13a0f4;
    color: #fcfcfc;
    border: 1px solid #fcfcfc;
    transition: all 0.5s ease;
  }
  
  .Service-area .icon{
      background-color: #13a0f4;
      width: 50px;
      height: 50px;
      border-radius: 30px;
      margin: 8px 0 8px 28px;
      padding: 16px 12px;
  }

  .Service-area .button-area .link-button:hover .icon{
    background-color: #fcfcfc;
    border: #00d5d5;
    transition: all 0.5s ease;
}
  
  
  .Service-area .arrow{
      display: block;
      width: 18px;
      height: 18px;
      border-bottom: solid 3px;
      border-right: solid 3px;
      border-color: #fcfcfc;
      transform: rotate(-45deg);
      align-items: center;
  }

  .Service-area .button-area .link-button:hover .arrow{
    border-color: #13a0f4;
    transition: all 0.5s ease;
  }

/* News */

.News{
    /* padding: 96px var(--padding); */
    padding: 96px 0;
}

.News-area{
    padding-left: 240px;
}

.title h3{
    font-family: "Montserrat", sans-serif;
    font-size: 2.4rem;
    font-weight: bold;
    color: #e16122;
}

.title p{
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1;
}

.News-area .contents{
    padding: 80px 0;
}

.News-area .contents ul{
    display: flex;
    gap: 80px;
    overflow: hidden;

}

.News-area .contents ul li{
    flex-shrink: 0;
    width: 20%;
}

.zoom-box {
    display: inline-block;
    overflow: hidden;
    width: 100%;
    border: 1px solid #333;
    border-radius: 10px;
  }
  .zoom {
    display: block;
    transition: all .6s ease;
  }
  .zoom:hover {
    transform: scale(1.2);
  }


.News-area .contents ul li dt{
    font-weight: bold;
    color: #848484;
    padding: 8px;
}

.News-area .contents ul li dd{
    font-weight: bold;
    padding: 0 8px 8px;
}

.News .button-area{
    display: flex;
    justify-content: center;
  }
  
  .News .link-button{
      display: inline-block;
      width: 250px;
      line-height: 64px;
      background-color: #fcfcfc;
      border-radius: 40px;
      border: solid 1px #13a0f4;
      font-weight: bold;
      color: #13a0f4;
      display: flex;
      padding-left: 54px;
  }

  .News .link-button:hover {
    background-color: #13a0f4;
    color: #fcfcfc;
    border: 1px solid #fcfcfc;
    transition: all 0.5s ease;
  }
  
  .News .link-button .icon{
      background-color: #13a0f4;
      width: 50px;
      height: 50px;
      border-radius: 30px;
      margin: 8px 0 8px 24px;
      padding: 16px 12px;
  }

  .News .button-area .link-button:hover .icon{
    background-color: #fcfcfc;
    border: #00d5d5;
    transition: all 0.5s ease;
}
  
  .News .link-button .arrow{
      display: block;
      width: 18px;
      height: 18px;
      border-bottom: solid 3px;
      border-right: solid 3px;
      border-color: #fcfcfc;
      transform: rotate(-45deg);
      align-items: center;
  }

  .News .button-area .link-button:hover .arrow{
    border-color: #13a0f4;
    transition: all 0.5s ease;
  }

  /* OPアニメーション */
  .start.on {
	background: #fcfcfc;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 999999;
}

.start p {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 9999;
	width: 280px;
}
.start.off{
    display: none;
}

/* フェイドアップアニメーション */
.fadeup{
    transform: translateY(150px);
    opacity: 0;
    transition: all 1s;
    transition-timing-function: ease-out;
    
}
.fadeup.on{
    transform: translateY(0px);
    opacity: 1;
}

@media screen and (max-width: 768px) {
br{
    display: none;
}

/* FV */
.FV{
    padding: 0 24px;
}

.FV-area{
    height: calc(100vh - 60px);
}
.FV-image-item{
    aspect-ratio: 1/1.3;
}
.FV-image-item:nth-child(1){
    background: url(../img/Top/FV/SP_FV-img1@3x.png) center/cover;
}
.FV-image-item:nth-child(2){
    background: url(../img/Top/FV/SP_FV_img2.png) center/cover;
}
.FV-image-item:nth-child(3){
    background: url(../img/Top/FV/SP_FV_img3.png) center/cover;
}
.FV-text{
    padding: 16px 0;
}

.FV-text h2{
    font-size: 3.2rem;
}

.FV-text h2 span{
    display: block;
  }

.FV-text p{
    font-size: 2.0rem;
}

.FV-text p span{
    display: block;
  }

.FV .img-area{
    padding: 0;
}

.FV-image{
    width: 100%;
    height: 100%;
}

.FV-image img{
    width: 100%;
    height: 100%;
}

/* タイトル設定 */
.title h3{
    font-size: 1.6rem;
}

.title p{
    font-size: 2.0rem;
}

/* Aboutus */
.Aboutus{
    padding: 40px 24px;
    margin-top: 0;
}

.Aboutus-area{
    padding: 40px 24px;
}

.Aboutus-area .text-box{
    padding: 32px 0;
}

.Aboutus-area .text-box .main-text{
    font-size: 2.8rem;
    padding: 0 0 24px 16px;
    line-height: 160%;
}

.Aboutus-area .main-text span{
    display: block;
}

.Aboutus-area .text-box p{
    font-size: 1.6rem;
    text-align: left;
}

/* Product */
.Product{
    padding: 40px 24px;
}

.Product .title{
    padding: 0 24px;
}

.Product-area .contents .main-text{
    font-size: 2.0rem;
    padding: 24px 0;
}

.Product-area .contents .main-text span{
    display: block;
}

.Product-area .contents .text-area .sub-text{
    text-align: left;
}

.Product .Product-area{
    padding: 0 24px;
}

.Product-area .contents{
    flex-direction: column;
    padding-top: 40px;
    gap: 0;
}

.Product-area .contents .detail .dwnlord-button-area{
    padding: 24px 0;
}

.Product-area .contents .appli-image{
    width: 90%;
}

/* service */
.Service-area{
    padding: 40px 24px;
}

.Service-area .title{
    padding: 0 24px;
}

.Service-area .contents .text-area .main-text{
    font-size: 2.8rem;
    padding: 24px;
    line-height: 160%;
}

.Service-area .contents .detail ul{
    display: flex;
    display: grid;
    grid-template-columns: none;
    gap: 40px;
}

.Service-area .contents .detail ul li dt{
    font-size: 2.0rem;
}

.Service-area .contents .detail ul li dd{
    padding: 16px 0;
}

.Service-area .button-area{
    padding: 24px 0 0 0;
}

/* News */
.News{
    padding: 40px 0;
}

.News-area{
    padding-left: 0px;
}

.News-area .title{
    padding: 0 24px;
}

.News-area .contents{
    padding: 40px 0 40px 24px;
}

.News-area .contents ul{
    gap: 24px;
    overflow-x: auto;  /* 横スクロールの指定 */
    -overflow-scrolling: touch;  /* スクロールを滑らかにする */
    -webkit-overflow-scrolling: touch;  /* スクロールを滑らかにする */
}

.News-area .contents ul .news-01{
    margin-left: 60px;
}

.News-area .contents ul li{
    width: 60%;
    display: inline-block;  /* 横並びにする指定 */
}

}