.wrap_object {
  transform: translateY(0);
  will-change: transform;
  background-image: url();
  width: 300px;
  height: 300px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  will-change: transform;
  position: absolute;
  z-index: -1;
}
.wrap_object_pala {
  transform: translateY(0);
  will-change: transform;
}
.obj1{
  background-image: url(../img/obj-1circle-dot.webp);
}
.obj2{
  background-image: url(../img/obj-2circle-dot.webp);
}
.obj3{
  background-image: url(../img/obj-3-left-border-circle.webp);
}
.obj4{
  background-image: url(../img/obj-4-blur-tri.webp);
}
.obj5{
  background-image: url(../img/obj-5-blur-tri-l.webp);
  top: 20%;
  left:0;
  width: 250px;
  height: 250px;
}
.obj6{
  background-image: url(../img/obj-6circle-dot-right.webp);
  top: 30%;
  left:unset;
  right:-70px;
  width: 550px;
  height: 550px;
  background-position: right;
}
.obj7{
  background-image: url(../img/obj-1circle-dot.webp);
  top: 58%;
  left:5%;
  width: 300px;
  height: 300px;
  background-position: left;
}
.obj8{
  background-image: url(../img/obj-3-left-border-circle.webp);
  top: unset;
  left:0;
  bottom:10%;
  width: 450px;
  height: 450px;
  background-position: left;
}
.obj9{
  background-image: url(../img/obj-7circle-dot-blur.webp);
  top: unset;
  left:unset;
  right:-70px;
  bottom:25%;
  width: 550px;
  height: 550px;
  background-position: right;
}
/**********************/
/*********************/
section.about{
    background-color: var(--background);
    padding: 10vw 5vw 5vw;
}
section.about .border-bottom{
    position: relative;
    padding-bottom: 40px;
    margin-bottom: 5vw;
    text-align: center;
    font-weight: 600;
    font-size: 1.5rem;
    font-size: clamp(1rem, 1.5rem, 1.6rem);
    font-weight: normal;
}
section.about .border-bottom:after{
    content:"";
    position: absolute;
    bottom:0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color:  var(--primary);
}
section.about p{
  margin: 1rem 0;
  font-weight: 500;
}
section.about .flex {
margin-top: 40px;

}
section.about .flex .flex-box{
  flex: 1;
  position: relative;
}
section.about .flex .flex-box:nth-child(1){
  padding-left: 5vw;
} 
section.about .flex .flex-box:nth-child(1) img{
  max-width: 500px;
}
section.about .flex .flex-box:nth-child(2) svg{
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
}
      .cls-1 {
        fill: #b67b4c;
      }

      .cls-2 {
        clip-path: url(#clippath-21);
      }

      .cls-3 {
        clip-path: url(#clippath-6);
      }

      .cls-4 {
        clip-path: url(#clippath-7);
      }

      .cls-5 {
        clip-path: url(#clippath-17);
      }

      .cls-6 {
        fill: #80c7d9;
      }

      .cls-7 {
        fill: #57b1d3;
      }

      .cls-8 {
        fill: #a6c0e6;
      }

      .cls-9 {
        clip-path: url(#clippath-15);
      }

      .cls-10 {
        clip-path: url(#clippath-18);
      }

      .cls-11 {
        clip-path: url(#clippath-4);
      }

      .cls-12 {
        fill: #343232;
      }

      .cls-13 {
        clip-path: url(#clippath-22);
      }

      .cls-14 {
        clip-path: url(#clippath-23);
      }

      .cls-15 {
        fill: #a4cae8;
      }

      .cls-16 {
        fill: #6c99bc;
      }

      .cls-17 {
        fill: #a3dff2;
      }

      .cls-18 {
        clip-path: url(#clippath-9);
      }

      .cls-19 {
        clip-path: url(#clippath-10);
      }

      .cls-20 {
        fill: #fff;
      }

      .cls-21 {
        fill: #d3ecf9;
      }

      .cls-22 {
        fill: #d8512b;
      }

      .cls-23 {
        fill: #679ec6;
      }

      .cls-24 {
        fill: #8abfe7;
      }

      .cls-25 {
        fill: #bfd9f0;
      }

      .cls-26 {
        clip-path: url(#clippath-11);
      }

      .cls-27 {
        fill: #424446;
      }

      .cls-28 {
        fill: none;
      }

      .cls-29 {
        fill: #fafdff;
      }

      .cls-30 {
        fill: #7aafdb;
      }

      .cls-31 {
        fill: #bedaf2;
      }

      .cls-32 {
        clip-path: url(#clippath-1);
      }

      .cls-33 {
        fill: #a1c5ec;
      }

      .cls-34 {
        isolation: isolate;
      }

      .cls-35 {
        clip-path: url(#clippath-5);
      }

      .cls-36 {
        clip-path: url(#clippath-20);
      }

      .cls-37 {
        fill: #a5cdf0;
      }

      .cls-38 {
        clip-path: url(#clippath-8);
      }

      .cls-39 {
        fill: #23201d;
      }

      .cls-40 {
        fill: #b2cceb;
      }

      .cls-41 {
        fill: #bbe0f3;
      }

      .cls-42 {
        clip-path: url(#clippath-3);
      }

      .cls-43 {
        fill: #a6cde8;
      }

      .cls-44 {
        fill: #dee3e4;
      }

      .cls-45 {
        clip-path: url(#clippath-12);
      }

      .cls-46 {
        fill: #b5d6ee;
      }

      .cls-47 {
        clip-path: url(#clippath-14);
      }

      .cls-48 {
        fill: #e9b896;
      }

      .cls-49 {
        fill: #8dbae1;
      }

      .cls-50 {
        fill: #76bbd2;
      }

      .cls-51 {
        clip-path: url(#clippath-19);
      }

      .cls-52 {
        fill: #d1ebff;
      }

      .cls-53 {
        fill: #88bee4;
      }

      .cls-54 {
        fill: #69d6ff;
      }

      .cls-55 {
        fill: #65b5c7;
      }

      .cls-56 {
        clip-path: url(#clippath-16);
      }

      .cls-57 {
        clip-path: url(#clippath-2);
      }

      .cls-58 {
        fill: #8c9aea;
      }

      .cls-59 {
        fill: #b8d2ed;
      }

      .cls-60 {
        clip-path: url(#clippath-13);
      }

      .cls-61 {
        fill: #cfdfeb;
      }

      .cls-62 {
        fill: #dcf0ff;
      }

      .cls-63 {
        clip-path: url(#clippath-24);
      }

      .cls-64 {
        clip-path: url(#clippath);
      }

      .cls-65 {
        fill: #a06b41;
      }

      .cls-66 {
        fill: #2d2a2b;
      }

      .cls-67 {
        fill: #9eafc6;
      }
@media screen and (max-width: 768px) {
section.about{
    padding: 20vw 1rem;
}
section.about .flex {
flex-direction: column-reverse;
}
section.about .section-inner{
padding: 20vw 1rem;
}

section.about .flex .flex-box:nth-child(1){
  padding-left: 0;
} 
section.about .flex .flex-box:nth-child(2) svg{
  position: relative;
  max-width: 100%;
}
section.about .border-bottom{
    font-size: 1.1rem;
}
 }
/*********************/
section.features{
  padding: 10% 5vw;
  background-image: url(../img/obj-dot-bg.webp);
  background-repeat: no-repeat;
  background-size: clamp(300px, 400px, 500px);
background-position: left clamp(-150px, -200px, -250px) top clamp(-150px, -200px, -250px);
overflow: hidden;
}
section.features{
  overflow-x: hidden;
}
section.features .features-box p{
flex-grow: 1;
}
section.features .features-box .wrap_img{
  min-width: 300px;
  aspect-ratio: 1 / 1;
  margin-bottom: 1rem;
  background-image: url();
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0 auto 20px;
}
section.features .features-box h3{
  min-height: 90px;
  background-image: url(../img/top/features1-ttl.svg);
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateY(-45px);
  background-position: center;
  margin: 0;
  position: absolute;
  top:0;
  left: 0;
  z-index: 1;
  min-width: 100%
}
section.features .features-box:nth-child(2) h3{
  background-image: url(../img/top/features2-ttl.svg);
}
section.features .features-box:nth-child(3) h3{
  background-image: url(../img/top/features3-ttl.svg);
}
section.features .features-box:nth-child(1) .wrap_img{
  background-image: url(../img/top/features1.webp);
  background-size: contain;
  background-repeat: no-repeat;
}
section.features .features-box:nth-child(2) .wrap_img{
  background-image: url(../img/top/features2.webp);
}

section.features .features-box:nth-child(3) .wrap_img{
  background-image: url(../img/top/features3.webp);
}
section.features h2:before{
    content: "FEATURES";
}
section.features h2{
  margin-bottom: 100px;
}
section.features .obj2{
  background-image: url(../img/obj-2circle-dot.webp);
  bottom: 5%;
  left: 0;
}
section.features .obj1{
  right: -50px;
  top:0%;
}

.features-flex{
    display: flex;
    flex-direction: row;
    justify-content: center;
  padding-top: 45px;
}
.features-flex .features-box{
  flex: 1;
}
.features-box{
  background-color: #e9faff;
  padding: 45px 2rem 2rem 2rem;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.features-flex {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2vw;
  width: 100%;
}
.features-flex::-webkit-scrollbar {
  height: 8px;
  background-color: rgb(241, 241, 241);
}
.features-flex::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 4px;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.7);
}
.features-box {
  background-color: #e9faff;
  padding: 45px 2rem 2rem 2rem;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  scroll-snap-align: start; 
  width: 33.3333%;
}
/*********/
.parent-scroll {
  text-align: right;
	margin-top:20px;
  display: none;
}
.parent-scroll .scroll {
  display: inline;
	background-color:var(--secondary);
	color:#fff;
	font-weight:bold;
	padding:5px 10px;
	border-radius:4px;
	font-size: 1.2rem;
}
@media (max-width: 1000px) {
  .features-flex {
    overflow-x: auto;
    justify-content: flex-start;
  overflow-x: auto; 
  scroll-snap-type: x mandatory; 
  -webkit-overflow-scrolling: touch; 
  padding-bottom: 20px;
  }

.features-box {
  min-width: 350px;
}
.parent-scroll {
  display: block;
}
}

@media (max-width: 768px) {
section.features{
  padding: 20vw 1rem 30vw;}
  
section.features h2{
  margin-bottom: 50px;
}
.features-box {
  padding: 45px 1rem 1rem 1rem;
}

section.features .features-box .wrap_img{
  min-width: 80%;
  max-width: 80%;
}
section.features .obj1{
  right: -50px;
  top:0%;
  width: 200px;
}

section.features .obj2{
  bottom: 0;
  left: 0;
  max-width: 200px;
}
}
/************/

/********************/


/****/
.fuwa{
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes fuwafuwa {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-15px); }
}
.rotate {
  animation: spin 40s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to 
{
    transform: rotate(360deg);
  }
}
section.howto{
    background-color: var(--background);
    overflow: hidden;
}
section.howto .section-inner{
  padding-bottom: 0;
}
section.howto .obj3{
  top: 2%;
  left: 0;
}
section.howto .obj4{
  top: 0;
  left:unset;
  right: 0;
  width: 150px;
  height: 150px;
}
section.howto h2:before{
    content: "HOW TO USE";
}
section.howto .step{
    margin:  0;
    width: 100%;
}
section.howto .flex{
    gap:30px;
    align-items:center;
}
section.howto .flex-box{
  flex: 1;
}
section.howto .bg_white {
    border-radius: 40px;
    background-color: #fff;
    min-width: 50%;
    padding: 5rem 3rem;
    z-index: -1;
}
section.howto .step3 .flex,
section.howto .step5 .flex{
    flex-direction: row-reverse;
}

section.howto .step .wrap_img{
min-width: 200px;
}
section.howto .step .wrap_img img{
  max-width:300px;

}
h3 span.inv{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
section.howto h3{
  background-image: url();
  background-repeat: no-repeat;
  background-position: left;
  background-size: contain;
  min-height: 120px;
  width: 100%;
  max-width: 400px;
  margin-bottom: 30px;
}
.dot-reverse{
  transform: scaleX(-1);
}
.dot span{
  min-width: 35px;
  max-width: 35px;
  max-height: 35px;
  min-height: 35px;
  background-color: rgb(255, 255, 255);
  display: block;
  margin: 0 auto;
  border-radius: 25px;
  box-shadow: 0px 0px 3px rgba(93, 185, 235, 0.5);
  margin-top: 35px;
}
.dot span:nth-child(2){
  background-color: rgb(255, 255, 255);
  transform: translateX(-40px);
  margin-bottom: 20px;
}
section.howto .step1 h3{
  background-image: url(../img/top/step1-ttl.svg);
  background-repeat: no-repeat;
  background-position: left;
  background-size: contain;
}
section.howto .step2 h3{
  background-image: url(../img/top/step2-ttl.svg);
}
section.howto .step3 h3{
  background-image: url(../img/top/step3-ttl.svg);
}section.howto .step4 h3{
  background-image: url(../img/top/step4-ttl.svg);
}section.howto .step5 h3{
  background-image: url(../img/top/step5-ttl.svg);
}
section.howto .step1 .wrap_right{
  display: flex;
  gap: 7vw;
  text-align: left;
}
section.howto .step1 .flex-box:nth-child(1) {
  flex:unset;
  width: 18%;
}
section.howto .step1 .flex-box img.window{
  max-width: 280px;
}
section.howto .step1 .wrap_dl{
  width: 100%;
  max-width: 420px;
  margin: 20px 0;
}

 @media screen and (max-width: 768px) {
  
section.howto h3{
  min-height: 80px;
  max-width: 100%;
}
  section.howto .step .flex,
section.howto .step:nth-child(odd) .flex{
    flex-direction: column;
    gap:0
}
section.howto .wrap_img{
transform: translateY(100px) translateX(10px);
margin-top:-100px;
  }

section.howto .bg_white {
    border-radius: 30px;
    padding: 5rem 1.5rem 2rem;
}
section.howto .bg_white-step1{
    padding: 2rem 1.5rem;

}
section.howto .step .wrap_img img{
  max-width:250px;
}

.dot span{
  min-width: 20px;
  max-width: 20px;
  max-height: 20px;
  min-height: 20px;
  margin-top: 20px;
}
.dot span:nth-child(2){
  transform: translateX(-30px);
  margin-bottom: 20px;
}
section.howto .obj7{
  left:-20%;
  width: 200px;
  height: 200px;
}
section.howto .obj6{
  right:-70px;
  width: 350px;
  height: 350px;
  top:35%;
}
section.howto .obj9{
  width: 250px;
  height: 250px;
}
section.howto .step1 .wrap_right{
  flex-direction: column;
  align-items: center;
  text-align: center;
}
section.howto .step1 .flex-box:nth-child(1) {
  width: 40%;
}
section.howto .step1 .flex-box img.window{
  max-width: 280px;
  margin: 0 auto;
}
section.howto .step1 .wrap_dl{
  max-width: 100%;
}
 }
/*********/
.for-participants{
  border-radius: 2rem;
  background-color: #fff;
  padding: 5vw;
  box-shadow:3px 3px 20px rgba(93, 185, 235, 0.2);
  max-width: 900px;
  margin: 5vw auto 0;
}
.for-participants p{
  text-align: center;
  margin: 2rem 0;
  font-weight: 500;
}
.wrap_btn a{
  border-radius: 4rem;
  background-color:  var(--primary);
  padding: .8rem;
  min-width: 280px;
  display: inline-block;
  color: #fff;
  background: #9FBFF3;
background: linear-gradient(136deg, rgba(159, 191, 243, 1) 52%, rgba(188, 238, 255, 1) 100%);
transition: ease 0.3s all;
}
.wrap_btn a:hover{filter: brightness(1.1);
}


 @media screen and (max-width: 768px) {
  
.for-participants{
  padding: 10vw 5vw;
}

 }
/******************/
/************************/

section.support{
    background-color: var(--background);
    overflow: hidden;
}

section.support .obj3{
  top: unset;
  left: 0;
  bottom: 20%;
  width: clamp(300px, 450px, 500px);
  height: clamp(300px, 450px, 500px);
}
section.support .obj4{
  top: 5%;
  width: 150px;
  height: 150px;
}
section.support h2:before{
    content: "SUPPORT";
}

section.support .obj1{
  right: 0;
  bottom:5%;
  width: clamp(300px, 450px, 400px);
  height: clamp(300px, 450px, 400px);
  background-position: right;
}
@media screen and (max-width: 768px) {
  section.support{
    padding-bottom: 15vw;
  }
section.support .obj1{
  right: -50px;
  bottom:3%;
  width: 250px;
  height:250px;
}
 }
.tab {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}
.tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.tab__content {
  max-height: 0;
  overflow: hidden;
  transition: all 0.35s;
}
.tab input:checked ~ .tab__content {
  max-height:600px;
}

.tab__label,
.tab__close {
  display: flex;
  color: white;
  background: var(--primary);
  cursor: pointer;
  border-radius: 50px;
}
.tab__label {
  justify-content: space-between;
  padding: 20px;
  margin-bottom: 10px;
  position: relative;
  padding: 20px 40px 20px 60px;
  text-align: left;
}
.tab__label {position: relative;
padding-left: 80px;}
.tab__label span:before{
    content: "Q";
    background-color: #fff;
    border-radius: 50px;
    width: 50px;
    height: 50px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 10px;
    top:50%;
    transform: translateY(-50%);
    color: var(--primary);
    font-weight: bold;
    font-size: 1.4rem;
}
.tab__content p {
  margin: 0;
  padding: 1rem 2rem;
  border:solid var(--primary) 1px;
  border-radius: 5px;
  margin-bottom: 40px;
  background-color: #fff;
    border-radius: 200px;
}
.tab__close {
  justify-content: flex-end;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}
/* ▼ プラスマーク（縦線・横線）を2本の擬似要素で作成 */
.tab__label::before,
.tab__label::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 22px;
  height: 2px;
  background-color: #fff;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

/* ▼ 縦線を after で表現（回転する） */
.tab__label::after {
  transform: rotate(90deg);
}

/* ▼ 開いたとき（checkbox がチェックされたとき） */
.tab input:checked + .tab__label::before {
  opacity: 0; 
}

.tab input:checked + .tab__label::after {
  transform: rotate(0deg); 
}
/****************/
.section-inner{
border:solid 1px rgba(255, 255, 255, 0);
max-width: 1000px;
margin: 0 auto;
padding: 10vw 1.5rem;
}
@media screen and (max-width: 768px) {
.section-inner{
padding: 20vw 2rem;
}
.tab__label span:before{
    width: 36px;
    height: 36px;
    left: 10px;
    font-size: 1.2rem;
}
.tab__label {
    padding-left: 55px;
}
}
/*************/

section.company h2:before{
    content: "COMPANY";
}
.company-info {
    display: flex;
    flex-wrap: wrap; 
    flex-direction: column;
  }
.company-info:last-child{
    border-bottom: none;
    }
.company-item dt,
.company-item dd {
  padding: 0;
  margin: 0;  display: inline-block;
}
  .company-item {
    padding: 1.5rem;
    border-bottom: 1px solid #ccc; 
    display: flex;
    flex-direction: row;
    text-align: left;
    align-items: center;
	gap: 20px;
  }
  .company-item:last-child{
    border-bottom: none; 
  }
  .company-item dt {
    font-weight: bold;
    flex: 3;
    display: inline;
  }

  .company-item dd {
    flex: 7;
    display: inline;
  }
@media (max-width: 767px) {
.company-item {
    padding: 1.5rem 0;
}
.nowrap {
  white-space: nowrap;
}
}