@charset "utf-8";
/* CSS Document */
.tss_comprehensiveHead,
#adminBox, .acms-admin-box,
.tss_footer{
 position: relative;
 z-index: 150;
 margin-bottom: 0;
}

img{max-width: 100%;}
a{text-decoration: unset;}


/*背景*/
.slt_body{
  position: relative;
  line-height: 1.5;
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  background-color: #000000;
}
.slt_bg{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.slt_bglogo{
  position: absolute;
  left: 0;
  top: 0;
  width: 71.25%;
  aspect-ratio: 76/53;
}


/*本文*/
.slt_main{
  position: relative;
  padding: 116px 0 258px;
  z-index: 100;
}
.slt_logo{
  position: relative;
  padding-left: 46.35%;
  padding-right: 16px;
  margin-bottom: 70px;
  z-index: 80;
}
.slt_logo h1{
  max-width: 600px;
  aspect-ratio: 50/9;
  margin-bottom: 34px;
  opacity: 0;
  transition: all 0.2s linear;
}
.slt_logo.inView h1{opacity: 1;}
.slt_logo h1 img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.slt_logo p{
  max-width: 583px;
  aspect-ratio: 583/101;
  opacity: 0;
  transition: all 0.2s linear 0.1s;
}
.slt_logo.inView p{opacity: 1;}
.slt_logo p img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.slt_wrap{padding: 0 16px;}
.slt_catch{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px 80px;
  margin-bottom: 100px;
  z-index: 80;
}
.slt_catch .slt_video{
  position: relative;
  width: 640px;
  aspect-ratio: 16/9;
  opacity: 0;
  transition: all 0.2s linear 1s;
}
.slt_catch .slt_video.inView{
  opacity: 1;
}
.slt_catch .slt_video iframe{
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: contain;
  transform: scale(1.4);
}
.slt_catch .slt_txt{
  width: 510px;
  opacity: 0;
  transition: all 0.2s linear 0.2s;
}
.slt_catch .slt_txt.inView{
  opacity: 1;
}
.slt_catch .slt_txt p{
  line-height: 2;
  font-weight: bold;
  font-size: clamp(0.875rem, 0.757rem + 0.44vw, 1.125rem);/*14-18 430-1344*/
  color: #FFFFFF;
}
.slt_catch .slt_txt div{
  margin: 26px 0;
  font-weight: bold;
  font-size: clamp(1.25rem, 0.78rem + 1.75vw, 2.25rem);/*20-36 430-1344*/
  color: #9FFFB6;
}

.slt_slidewrap{
  position: fixed;
  right: 0;
  top: 0;
  width: 18.54%;
  z-index: 0;
}

.slt_about{
  position: relative;
  max-width: 900px;
  margin: 0 auto 48px;
  padding: 36px 45px;
  font-weight: bold;
  color: #FFFFFF;
  background: conic-gradient(rgba(23, 181, 181, 0.42) 0%, rgba(0, 0, 0, 0.42) 24.23%, rgba(0, 216, 83, 0.42) 28.49%, rgba(0, 0, 0, 0.42) 63.32%, rgba(0, 38, 189, 0.42) 75.24%, rgba(23, 181, 181, 0.42) 100%);
  z-index: 80;
}
.slt_about .slt_abouttxt1{
  margin-bottom: 28px;
  text-align: center;
  font-size: clamp(1.125rem, 0.89rem + 0.88vw, 1.625rem);/*18-26 430-1344*/
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.2s linear;
}
.slt_about.inView .slt_abouttxt1{
  opacity: 1;
  transform: translateY(0);
}
.slt_about .slt_abouttxt1 span{display: inline-block;}
.slt_about .slt_abouttxt2{
  line-height: 2;
  margin-bottom: 28px;
  font-size: clamp(0.875rem, 0.816rem + 0.22vw, 1rem);/*14-16 430-1344*/
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.2s linear 0.1s;
}
.slt_about.inView .slt_abouttxt2{
  opacity: 1;
  transform: translateY(0);
}
.slt_about div{
  width: fit-content;
  margin: auto;
  text-align: center;
  font-size: clamp(1rem, 0.824rem + 0.66vw, 1.375rem);/*16-22 430-1344*/
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.2s linear 0.2s;
}
.slt_about.inView div{
  opacity: 1;
  transform: translateY(0);
}
.slt_about div::after{
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(to right, #DFFF00 0%, #00D853 14.23%, #5677F9 44.77%, #17B4B4 78.24%, #009874 100%);
}


section{
  position: relative;
  padding: 0 16px;
  z-index: 80;
}
/*理由*/
.slt_reason{margin-bottom: 64px;}
.slt_reason h2{
  width: fit-content;
  margin: 0 auto 24px;
  text-align: center;
  font-size: clamp(1.125rem, 0.772rem + 1.31vw, 1.875rem);/*18-30 430-1344*/
  font-weight: bold;
  color: transparent;
  background: linear-gradient(to right, #DFFF00 0%, #00D853 14.23%, #5677F9 44.77%, #17B4B4 78.24%, #009874 100%);
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.2s linear;
}
.slt_reason h2.inView{
  opacity: 1;
  transform: translateY(0);
}
.slt_reason h2 span{
  vertical-align: baseline;
  font-size: 0.75em;
}
.slt_reason > p{
  max-width: 800px;
  margin: 0 auto 42px;
  font-size: clamp(0.875rem, 0.816rem + 0.22vw, 1rem);/*14-16 430-1344*/
  font-weight: bold;
  color: #FFFFFF;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.2s linear;
}
.slt_reason > p.inView{
  opacity: 1;
  transform: translateY(0);
}
.slt_feature{
  display: flex;
  justify-content: center;
  gap: 24px;
}
.slt_feature div{
  width: 416px;
  padding: 42px 12px 26px;
  border: 4px solid #000000;
  border-image-source: url(../img/il_frame.png);
  border-image-width: 4px;
  border-image-slice: 4;
  border-image-repeat: stretch;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.2s linear;
}
.slt_feature div:nth-of-type(2){transition-delay: 0.1s;}
.slt_feature div:nth-of-type(3){transition-delay: 0.2s;}
.slt_feature.inView div{
  opacity: 1;
  transform: translateY(0);
}
.slt_feature div h3{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2.5em;
  margin-bottom: 16px;
  text-align: center;
  font-weight: bold;
  font-size: clamp(1.125rem, 0.713rem + 1.53vw, 2rem);/*18-32 430-1344*/
  color: #FFFFFF;
  text-shadow: 0px 0px 6px #000000;
}
.slt_feature div p{
  max-width: 340px;
  margin: auto;
  font-size: clamp(0.875rem, 0.816rem + 0.22vw, 1rem);/*14-16 430-1344*/
  font-weight: bold;
  color: #FFFFFF;
}


.slt_sectionttl{
  margin-bottom: 24px;
  text-align: center;
  font-size: clamp(1.125rem, 0.772rem + 1.31vw, 1.875rem);/*18-30 430-1344*/
  font-weight: bold;
  color: #9FFFB6;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.2s linear;
}
.slt_sectionttl.inView{
  opacity: 1;
  transform: translateY(0);
}
/*実績*/
.slt_result{margin-bottom: 88px;}
.slt_resultlist{
  display: flex;
  justify-content: center;
  gap: 50px;
}
.slt_resultbox{
  width: 566px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.2s linear;
}
.slt_resultbox:nth-of-type(2){transition-delay: 0.1s;}
.slt_resultbox:nth-of-type(3){transition-delay: 0.2s;}
.slt_resultlist.inView .slt_resultbox{
  opacity: 1;
  transform: translateY(0);
}
.slt_resultbox div{
  aspect-ratio: 16/9;
  margin-bottom: 18px;
  overflow:hidden;
}
.slt_resultbox div iframe{
  width:100%;
  height:100%;
}
.slt_resultbox h3{
  margin-bottom: 18px;
  text-align: center;
  font-weight: bold;
  font-size: clamp(1rem, 0.882rem + 0.44vw, 1.25rem);/*16-20 430-1344*/
  color: #FFFFFF;
  text-shadow: 0px 0px 6px #000000;
}
.slt_resultbox p{
  font-size: clamp(0.875rem, 0.816rem + 0.22vw, 1rem);/*14-16 430-1344*/
  font-weight: bold;
  color: #FFFFFF;
}


/*流れ*/
.slt_flow{
  width: calc(100% + 32px);
  margin-left: -16px;
  padding: 56px 16px 60px;
  border-top: 1px solid #707070;
  border-bottom: 1px solid #707070;
  background-color: #000000;
}
.slt_flow ol{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px 14px;
  max-width: 1120px;
  margin: auto;
}
.slt_flow ol li{
  position: relative;
  width: 360px;
  padding-left: 16px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.2s linear;
}
.slt_flow ol li:nth-of-type(2){transition-delay: 0.1s;}
.slt_flow ol li:nth-of-type(3){transition-delay: 0.2s;}
.slt_flow ol li:nth-of-type(4){transition-delay: 0.3s;}
.slt_flow ol li:nth-of-type(5){transition-delay: 0.4s;}
.slt_flow ol li:nth-of-type(6){transition-delay: 0.5s;}
.slt_flow ol li:nth-of-type(7){transition-delay: 0.6s;}
.slt_flow ol li:nth-of-type(8){transition-delay: 0.7s;}
.slt_flow ol li:nth-of-type(9){transition-delay: 0.8s;}
.slt_flow ol.inView li{
  opacity: 1;
  transform: translateY(0);
}
.slt_flow ol li::before{
  content: "";
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(#5677F9 0%, #17B4B4 14.23%, #000000 44.77%, #00D853 78.24%, #DFFF00 100%);
}
.slt_flow ol li h3{
  margin-bottom: 12px;
  font-size: clamp(1.125rem, 0.772rem + 1.31vw, 1.875rem);/*18-30 430-1344*/
  font-weight: bold;
  color: #21CCBB;
}
.slt_flow ol li p{
  font-size: clamp(0.75rem, 0.691rem + 0.22vw, 0.875rem);/*12-14 430-1344*/
  font-weight: bold;
  color: #FFFFFF;
}
.slt_flow ol li a{
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 226px;
  margin-top: 16px;
  padding: 14px 30px;
  font-size: clamp(0.875rem, 0.816rem + 0.22vw, 1rem);/*14-16 430-1344*/
  font-weight: bold;
  color: #FFFFFF;
  border: 1px solid #707070;
}
.slt_flow ol li .slt_contact{margin-top: 12px;}
.slt_flow ol li .slt_contact div{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(1.125rem, 0.89rem + 0.88vw, 1.625rem);/*18-26 430-1344*/
  font-weight: bold;
  color: #FFFFFF;
}
.slt_flow ol li .slt_contact div b{
  display: block;
  line-height: 1;
  padding-top: 1px;
}
.slt_flow ol li .slt_contact span{
  margin-left: 24px;
  font-size: 0.625rem;
  color: #FFFFFF;
}

/*よくある質問*/
.slt_faq{
  max-width: 900px;
  margin: 48px auto 202px;
  padding: 30px 16px 48px;
  background: conic-gradient(rgba(23, 181, 181, 0.42) 0%, rgba(0, 0, 0, 0.42) 24.23%, rgba(0, 216, 83, 0.42) 28.49%, rgba(0, 0, 0, 0.42) 63.32%, rgba(0, 38, 189, 0.42) 75.24%, rgba(23, 181, 181, 0.42) 100%);
  border: 1px solid #000000;
}
.slt_faq dl{
  max-width: 704px;
  margin: auto;
}
.slt_faq dl dt,
.slt_faq dl dd{
  display: flex;
  gap: 12px;
  color: #FFFFFF;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.2s linear;
}
.slt_faq dl dt:nth-of-type(2),
.slt_faq dl dd:nth-of-type(2){transition-delay: 0.1s;}
.slt_faq dl dt:nth-of-type(3),
.slt_faq dl dd:nth-of-type(3){transition-delay: 0.2s;}
.slt_faq dl dt:nth-of-type(4),
.slt_faq dl dd:nth-of-type(4){transition-delay: 0.3s;}
.slt_faq dl dt:nth-of-type(5),
.slt_faq dl dd:nth-of-type(5){transition-delay: 0.4s;}
.slt_faq dl dt:nth-of-type(6),
.slt_faq dl dd:nth-of-type(6){transition-delay: 0.5s;}
.slt_faq dl dt:nth-of-type(7),
.slt_faq dl dd:nth-of-type(7){transition-delay: 0.6s;}
.slt_faq dl dt:nth-of-type(8),
.slt_faq dl dd:nth-of-type(8){transition-delay: 0.7s;}
.slt_faq dl dt:nth-of-type(9),
.slt_faq dl dd:nth-of-type(9){transition-delay: 0.8s;}
.slt_faq dl.inView dt,
.slt_faq dl.inView dd{
  opacity: 1;
  transform: translateY(0);
}
.slt_faq dl dt{
  align-items: center;
  margin-bottom: 14px;
}
.slt_faq dl dt:nth-of-type(n+2){
  padding-top: 24px;
  border-top: 1px solid #707070;
}
.slt_faq dl dd:nth-last-of-type(n+2){padding-bottom: 24px;}
.slt_faq dl dt div,
.slt_faq dl dd div{
  width: clamp(1.25rem, 1.074rem + 0.66vw, 1.625rem);/*20-26 430-1344*/
  aspect-ratio: 1;
}
.slt_faq dl dt p{
  width: calc(100% - clamp(1.25rem, 1.074rem + 0.66vw, 1.625rem));
  font-size: clamp(0.875rem, 0.522rem + 1.31vw, 1.625rem);/*14-26 430-1344*/
  font-weight: bold;
}
.slt_faq dl dd p{
  width: calc(100% - 38px);
  font-size: clamp(0.875rem, 0.757rem + 0.44vw, 1.125rem);/*14-18 430-1344*/
}

/*バナー*/
.slt_partner ul{
  display: flex;
  justify-content: center;
  gap: 20px;
  opacity: 0;
  transition: all 0.2s linear;
}
.slt_partner.inView ul{
  opacity: 1;
}

/*追従ボタン*/
.slt_chasebnr{
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.82) 0%, rgba(0, 10, 4, 0.82) 0%, rgba(0, 10, 4, 0.82) 0%, rgba(0, 216, 83, 0.82) 14.23%, rgba(0, 0, 0, 0.82) 38.49%, rgba(0, 38, 189, 0.82) 57.32%, rgba(23, 181, 181, 0.82) 78.24%, rgba(0, 0, 0, 0.82) 100%);
  z-index: 120;
}
.slt_chasebnr.fit{position: relative;}
.slt_chasebnr .slt_ttl p{
  font-size: clamp(1.25rem, 0.956rem + 1.09vw, 1.875rem);/*20-30 430-1344*/
  font-weight: bold;
  color: #21CCBB;
}
.slt_chasebnr .slt_ttl span{
  font-size: clamp(0.875rem, 0.816rem + 0.22vw, 1rem);/*14-16 430-1344*/
  font-weight: bold;
  color: #FFFFFF;
}
.slt_chasebnr .slt_contact a{
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 220px;
  height: 50px;
  padding: 0 clamp(0.5rem, 0.265rem + 0.88vw, 1rem);/*8-16 430-1344*/
  font-weight: bold;
  font-size: clamp(0.75rem, 0.632rem + 0.44vw, 1rem);/*12-16 430-1344*/
  color: #9FFFB6;
  border: 1px solid #9FFFB6;
}
.slt_chasebnr .slt_tel p{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(1rem, 0.588rem + 1.53vw, 1.875rem);/*16-30 430-1344*/
  font-weight: bold;
  color: #FFFFFF;
}
.slt_chasebnr .slt_tel p b{
  display: block;
  line-height: 1;
  padding-top: 1px;
}
.slt_chasebnr .slt_tel span{
  margin-left: 24px;
  font-size: 0.625rem;
  color: #FFFFFF;
}



.tss_footer{background-color: #000000;}
.tss_footer a{font-size: 0.75rem;}



@media (hover: hover) and (pointer: fine){
  .slt_flow ol li a:hover{background-color: rgba(255,255,255,0.6);}
  .slt_chasebnr .slt_contact a:hover{background-color: rgba(0,152,116,0.7);}
}




@media screen and (max-width:1080px){
  .slt_logo{padding-left: clamp(1rem, -43rem + 110vw, 31.25rem);/*16-500 640-1080*/}
  .slt_catch{flex-wrap: wrap;}
  .slt_slidewrap{
    position: static;
    width: 100%;
    margin-bottom: 80px;
  }

  .slt_about{padding: max(16px, 3.33vw) max(16px, 4.16vw);}

  .slt_feature{flex-wrap: wrap;}

  .slt_resultlist{flex-wrap: wrap;}
}



@media screen and (max-width:800px){
  .slt_about div{
    padding: 2px 4px;
    background: linear-gradient(to right, rgba(223, 255, 0, 0.64) 0%, rgba(0, 216, 83, 0.64) 14.23%, rgba(86, 119, 249, 0.64) 44.77%, rgba(23, 180, 180, 0.64) 78.24%, rgba(0, 152, 116, 0.64) 100%);
  }
  .slt_about div::after{content: none;}

  .slt_chasebnr{bottom: calc(15.4vw + 26px);}
}
@media screen and (max-width:640px){
  .slt_main{padding-top: 80px;}
  .slt_chasebnr .slt_ttl{display: none;}
}
@media screen and (max-width:430px){
  .slt_main{padding-top: 40px;}

  .slt_resultbox h3{margin-bottom: 8px;}

  .slt_faq dl dt,
  .slt_faq dl dd{gap: 8px;}

  .slt_chasebnr{
    flex-wrap: wrap;
    gap: 8px;
    height: auto;
    padding: 8px;
  }
  .slt_chasebnr .slt_contact{width: 100%;}
  .slt_chasebnr .slt_contact a{
    height: 40px;
    margin: auto;
  }
  .slt_chasebnr .slt_tel{
    width: 100%;
    text-align: center;
  }
  .slt_chasebnr .slt_tel p{justify-content: center;}
  .slt_chasebnr .slt_tel span{margin-left: 0;}
}