/*レスポンシブ対応*/
.responsive>div{
    border: 1px solid #999;
    background: #f2f2f2;
    padding: 10px;
    margin: 10px;
}
@media(min-width:801px){
    .sp{
        display: none !important;
/*         overflow:hidden */
    }
}
@media(max-width:800px){
    .pc{
        display: none !important;
    }
}



/* FV PC版*/
.box1{
  width:100%;
  height:800px;
/*   opacity: 0.5; */
}

.box2{
  　position: relative;
}

.TOP-img img{
  position: absolute;
  top: 650px;
  right: 62%;
  filter: opacity(100%);
}

.TOP-img2 img{
  position: absolute;
  top: 650px;
  right: 45%;
  filter: opacity(100%);
}

.TOP-img3 img{
  position: absolute;
  top: 650px;
  right: 28%;
  filter: opacity(100%);
}

.top-img-container{
  margin: 60px auto;
  display: flex;
  justify-content:space-between;
  max-width: 700px;
}

.TOP-imgitem{
  margin: 0 20px;
}

.CTA1{
  position: absolute;
  width:30%;
  top: 520px;
  right:34.6%;
}

.CTA01{
 margin: 0 auto;
}


/* FV SP版*/
.box100{
  position: relative;
  width:110%;
  height:400px;
/*   background-image:url("https://21845253.fs1.hubspotusercontent-na1.net/hubfs/21845253/%E8%83%8C%E6%99%AF%20%282%29.jpg"); */
}

.box200 {
  padding: 20px;
  text-align: center;
}

.box300 {
  padding: 20px;
  text-align: center;
}


.TOP-img-sp img{
  position: absolute;
  top: 300px;
  right: 70%;
  filter: opacity(100%);
}

.TOP-img2-sp img{
  position: absolute;
  top: 300px;
  right: 40%;
  filter: opacity(100%);
}

.TOP-img3-sp img{
  position: absolute;
  top: 300px;
  right: 10%;
  filter: opacity(100%);
}

.CTA2{
  position: absolute;
  top: 200px;
  right: 1%;
}



/* こんなお悩みありませんか？ */
.box28 {
    position: relative;
    margin: 2em 0;
    padding: 25px 10px 7px;
    border: solid 4px #fc410e;
  　margin: 2em ;
  　height: 370px;
}
.box28 .box-title {
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #fc410e;
    color: #ffffff;
    font-weight: bold;
}
.box28 p {
    margin: 0; 
    padding: 0;
}

.box29 {
    position: relative;
    margin: 2em 0;
    padding: 25px 10px 7px;
    border: solid 4px #fc410e;
  　margin: 2em ;
    height: 370px;
}
.box29 .box-title {
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #fc410e;
    color: #ffffff;
    font-weight: bold;
}
.box29 p {
    margin: 0; 
    padding: 0;
}

.box30 {
    position: relative;
    margin: 2em 0;
    padding: 25px 10px 7px;
    border: solid 4px #fc410e;
  　margin: 2em ;
    height: 370px;
}
.box30 .box-title {
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #fc410e;
    color: #ffffff;
    font-weight: bold;
}
.box30 p {
    margin: 0; 
    padding: 0;
}



/* お悩み改修中 PC版 */
.tab-4 {
    display: flex;
    flex-wrap: wrap;
    max-width: 1500px;
  border: 3px solid #fc410e;
}

.tab-4 > label {
    flex: 1 1;
    order: -1;
    position: relative;
    min-width: 300px;
    padding: 1em 1em;
    background-color: #f2f2f2;
    color: #999;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
}

.tab-4 > label:hover,
.tab-4 label:has(:checked) {
    background-color: #fc410e;
    color: #fff;
}

.tab-4 label:has(:checked)::before {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 9px;
    background-color: #fc410e;
    content: '';
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.tab-4 input {
    display: none;
}

.tab-4 > div {
    display: none;
    width: 100%;
    padding: 1.5em 1em;
}

.tab-4 label:has(:checked) + div {
    display: block;
}



/* お悩み改修中 SP版 */
.tab-5 {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    border: 3px solid #fc410e;
    text-align: center;
}

.tab-5 > label {
    flex: 1 1;
    order: -1;
    position: relative;
    min-width: 100%;
    padding: 0.8em 0.8em;
    background-color: #f2f2f2;
    color: #999;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}

/* チェックされたラベルのスタイルを定義 */
.tab-5 > input:checked + label {
    background-color: #fc410e;
    color: #fff;
}

.tab-5 > input:checked + label::before {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 9px;
    background-color: #fc410e;
    content: '';
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.tab-5 input {
    display: none;
}

.tab-5 > div {
    display: none;
    width: 100%;
    padding: 1em 0.5em;
}

/* チェックされたラベルに対応するコンテンツを表示 */
.tab-5 > input:checked + label + div {
    display: block;
}


/* CTA上の文言 */
/*===========
inview
===========*/

/* 回転するアニメーション */
@keyframes fuwafuwa {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* このクラスをつけると回転を無限に繰り返します */
.anime-fuwafuwa {
  animation: 3s fuwafuwa infinite;
}

/*===========
.imgBox
===========*/

.imgBox {
  text-align: center;
  margin: 50px 0;
}
.imgBox img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

/*===========
.txtBox
===========*/

.txtBox {
  text-align: center;
}
.txtBox p {
  font-size: 60px;
  font-weight: bold;
  padding: 2em 0;
  margin: 0;
}

/*===========
base
===========*/

$(function(){
  $(".inview").on("inview", function (event, isInView) {
    if (isInView) {
      $(this).stop().addClass("is-show");
    }
  });
});



/* クリスコートで解決できます！ */
 .kaiketsu {
    font-size: 16px;
    position: relative;
}

.kaiketsu img {
  position: absolute;
  top: 100px;
  right: 28%;
  filter: opacity(100%);
  }

.kaiketsu {
  overflow: hidden;
}

.kaiketsu span {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  animation: slideInFromBottom 1s forwards;
  animation-delay: 2s; /* 0.1秒ずつ遅延して表示 */
}

.kaiketsu span.show {
  opacity: 1;
  transform: translateY(0);
}

@keyframes slideInFromBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.kaiketsu span {
  opacity: 0; /* 初期状態を非表示にする */
}

.animated {
  animation: slideInFromBottom 1s forwards; /* アニメーションを追加 */
}

.kaiketsu2 {
  overflow: hidden;
}

.kaiketsu2 span {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  animation: slideInFromBottom 1s forwards;
  animation-delay: 4.5s; /* 0.1秒ずつ遅延して表示 */
}

.kaiketsu2 span.show {
  opacity: 3;
  transform: translateY(0);
}

@keyframes slideInFromBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}


 .kaiketsu-sp {
    font-size: 16px;
    position: relative;
}

.kaiketsu-sp img {
  position: absolute;
  top: 40px;
  right: 0%;
  filter: opacity(100%);
  }

.kaiketsu-sp {
  overflow: hidden;
}

.kaiketsu-sp span {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  animation: slideInFromBottom 1s forwards;
  animation-delay: 1s; /* 0.1秒ずつ遅延して表示 */
}

@keyframes slideInFromBottom {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kaiketsu2-sp {
  overflow: hidden;
}

.kaiketsu2-sp span {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  animation: slideInFromBottom 1s forwards;
  animation-delay: 2.5s; /* 0.1秒ずつ遅延して表示 */
}

@keyframes slideInFromBottom {
  to {
    opacity: 3;
    transform: translateY(0);
  }
}





/* クリスコートとは？ */
 .what-xcoat2 {
    font-size: 16px;
    position: relative;
}

.what-xcoat2 img {
  position: absolute;
  top: -120px;
  right:60%;
  filter: opacity(40%);
  }




/* クリスコート4つのポイント */
 .POINT {
    font-size: 16px;
    position: relative;
}

.POINT img {
  position: absolute;
  top: -130px;
  right: 3%;
  filter: opacity(100%);
  }


 .what-xcoat2 {
    font-size: 16px;
    position: relative;
}

.what-xcoat2 img {
  position: absolute;
  top: -120px;
  right:60%;
  filter: opacity(40%);
  }


/* クリスコート5つのポイント　改修中 */
/* PC版 */
.accordion-002 {
    max-width: 1200px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border: 3px solid #fc410e;
    border-radius: 5px;
}

.accordion-002 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2028%2028%22%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%2214%22%20style%3D%22fill%3A%23fc410e%3B%22%2F%3E%0A%3C%2Fsvg%3E');
    background-position: right calc(2em - 7px) center;
    background-size: 22px;
    background-repeat: no-repeat;
    color: #fc410e;
    font-weight: 600;
    cursor: pointer;
}

.accordion-002 summary::-webkit-details-marker {
    display: none;
}

.accordion-002 summary::before,
.accordion-002 summary::after {
    position: absolute;
    right: calc(2em + 2.5px);
    width: 3px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    content: '';
}

.accordion-002 summary::before {
    rotate: 90deg;
}

.accordion-002 summary::after {
    transition: rotate .3s;
}

.accordion-002[open] summary::after {
    rotate: 90deg;
}

.accordion-002 p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 0 2em 1.5em;
    color: #333333;
    transition: transform .5s, opacity .5s;
}

.accordion-002[open] p {
    transform: none;
    opacity: 1;
}


/* クリスコート5つのポイント　改修中 */
/* SP版 */
.accordion-003 {
    max-width: 1200px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border: 3px solid #fc410e;
    border-radius: 5px;
}

.accordion-003 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 1em;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2028%2028%22%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%2214%22%20style%3D%22fill%3A%23fc410e%3B%22%2F%3E%0A%3C%2Fsvg%3E');
    background-position: right calc(1em - 7px) bottom;
/*     background-position: top calc(1em - 7px) center; */
    background-size: 22px;
    background-repeat: no-repeat;
    color: #fc410e;
    font-weight: 600;
    cursor: pointer;
}

.accordion-003 summary::-webkit-details-marker {
    display: none;
}

.accordion-003 summary::before,
.accordion-003 summary::after {
    position: absolute;
    right: calc(0.6em + 9px);
    bottom: 6px;
    width: 3px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    content: '';
}

.accordion-003 summary::before {
    rotate: 90deg;
}

.accordion-003 summary::after {
    transition: rotate .3s;
}

.accordion-003[open] summary::after {
    rotate: 90deg;
}

.accordion-003 p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 0 2em 1.5em 1.5em;
    color: #333333;
    transition: transform .5s, opacity .5s;
}

.accordion-003[open] p {
    transform: none;
    opacity: 1;
}



/* PC表示 */
.list-12 {
    list-style-type: none;
    margin: 20px 50px 20px 50px;
    padding: 2em;
    border: 2px solid #d3d3d3;
    background-color: #f2f2f2;
}

.list-12 li {
     display: flex;
    align-items: center;
    gap: 0 5px;
    padding: .3em;
}

.list-12 li::before {
    display: inline-block;
    width: 10px;
    height: 5px;
    border-bottom: 2px solid #2589d0;
    border-left: 2px solid #2589d0;
    transform: rotate(-45deg) translateY(-1.5px);
    content: '';
}

/* SP表示 */
.list-13 {
    list-style-type: none;
    margin: 20px 20px 20px 20px;
    padding: 2em;
    border: 2px solid #d3d3d3;
    background-color: #f2f2f2;
}

.list-13 li {
     display: flex;
    align-items: center;
    gap: 0 5px;
    padding: .3em;
}

.list-13 li::before {
    display: inline-block;
    width: 10px;
    height: 5px;
    border-bottom: 2px solid #2589d0;
    border-left: 2px solid #2589d0;
    transform: rotate(-45deg) translateY(-1.5px);
    content: '';
}


/* pc表示 */
.box-016 {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1em 1.5em;
    border-left: 5px solid #2589d0;
    background-color: #f2f2f2;
    color: #333;
}

/* sp表示 */
.box-017 {
    position: relative;
    max-width: 370px;
    margin: 0 auto;
    padding: 1em 1.5em;
    border-left: 5px solid #2589d0;
    background-color: #f2f2f2;
    color: #333;
}

.box3 {
/*   　align-items: center; */
    text-align: center;
    display: inline-block;
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #FFFFFF;
    background: #fc410e;/*背景色*/
}
.box3 p {
    margin: 0; 
    padding: 0;
    color: #FFFFFF;
    text-align:center;
  　
}

.heading01 {
	display: inline;
	font-size: 16px;
	background-image: linear-gradient(rgba(0,0.2,0,0) 70%, rgb(37,137,208,0.5) 70%);
}




/* 下向き矢印 */
.cp_arrows {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cp_arrows .cp_arrow {/*矢印を配置するベースの設定*/
  position: absolute;
  width: 60px;
  animation: arrow-move09 2s infinite ease-in-out;
}
.cp_arrows .cp_arrow::before,
.cp_arrows .cp_arrow::after {/*矢印全体の設定*/
  position: absolute;
  content: '';
  width: 30px;
  height: 3px;
  background: #f4511e;
  border-radius: 10px;
}
.cp_arrows .cp_arrow::before {/*矢印左の線の位置と傾斜*/
  left: 3px;
  transform: rotate(30deg);
}
.cp_arrows .cp_arrow::after {/*矢印左の線の位置と傾斜*/
  right: 3px;
  transform: rotate(-30deg);
}
@keyframes arrow-move09 {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0);}
  48% {transform: translateY(-20px);}
  60% {transform: translateY(-15px);}
}

/* 国内特許取得等の背景部分　PC表示 */
.sample_box3 {
    text-align: center;
    display: flex;
/*     padding: 1em 1em; */
    margin: 30px;
    /*background-color:#fc410e;/*背景色*/
    color:#FFFFFF;/*文字色*/
  position: relative;
 animation-name: sampleAnimation;
 animation-duration: 1s;
 animation-timing-function: ease-in-out;
 animation-delay: 0s;
 animation-fill-mode: forwards;
 height: 100px;
}
}


@keyframes sampleAnimation {
 0% { /* 最初 */
   width: 0;
 }

 100% { /* 最後 */
   width: 300px;
 }

}
/* テキスト部分 */
.sample-txt {
 position:absolute;
 top:50%;
 left:35%;
 transform:translateX(-50%) translateY(-50%);
 color: #ffffff;
 font-size: 30px;
 font-weight: bold;
 width: max-content;
 margin: 0;
 opacity: 0;
/* 一括で指定することもできる */
 animation: sampleTxt 1s ease-in-out 1s forwards;
}



@keyframes sampleTxt {
 0% {
   opacity: 0;
 }
 100% {
   opacity: 1;

 }

}

/* テキスト部分 */
.sample-txt2 {
 position:absolute;
 top:50%;
 left:60%;
 transform:translateX(-50%) translateY(-50%);
 color: #ffffff;
 font-size: 30px;
 font-weight: bold;
 width: max-content;
 margin: 0;
 opacity: 0;
/* 一括で指定することもできる */
 animation: sampleTxt 1s ease-in-out 1s forwards;
}



@keyframes sampleTxt {
 0% {
   opacity: 0;
 }
 100% {
   opacity: 1;

 }

}



/* PC表示 */
.glass {
  display: flex;
}

/* SP表示 */
.glass-sp1 {
  display: flex;
}

.glass-sp2 {
  display: flex;
}



/* 導入流れ sp版*/
.flow04 {
  padding-left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 60px;
}

.flow04 > li {
  list-style-type: none;
  width: 320px;
  max-width: 350px;
/*   height: 400px; */
  display: flex;
}

.flow04 > li .icon04 {
  line-height: 2;
  width: 2em;
  height: 2em;
  text-align: center;
  color: #fff;
  background: #fc410e;
  margin: 0 auto 10px;
  display: block;
  border-radius: 100vh;
  position: relative;
}

.flow04 > li .icon04::before {
  content: "";
  border: solid transparent;
  border-width: 7px;
  border-top-color: #fc410e;
  position: absolute;
  top: calc(100% - 2px);
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.flow04 > li dl {
  padding: 10px 20px;
  margin: 0;
  border: 3px solid #fc410e;
  position: relative;
}

.flow04 > li:not(:first-child) dl::before {
  content: "";
  width: 14px;
  height: 14px;
  margin-right: 10px;
  display: inline-block;
  border-top: 4px solid #fc410e;
  border-right: 4px solid #fc410e;
  position: absolute;
  top: calc(50% - 14px);
  left: -45px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.flow04 > li dl dt {
  font-size: 1.3em;
  font-weight: 600;
  color: #fc410e;
  -ms-flex-preferred-size: 20%;
  flex-basis: 20%;
  margin-bottom: 10px;
  text-align: center;
}

.flow04 > li dl dd {
  margin-left: 0;
}

@media(max-width: 767px){
  .flow04 {
    gap: 20px;
  }
  .flow04 > li {
    max-width: unset;
    display: block;
  }
  .flow04 > li:not(:first-child) dl::before {
    display: none;
  }
}


/* 作業手順　改修中　PC版 */
/* 本体部分 */
.stepbar {
  position: relative;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}

.stepbar li {
  position: relative;
  list-style: none;
  text-align: center;
  color: #000;
  font-weight: bold;
}

.stepbar li p {
  font-weight: normal;
  margin: 10px 20px;
}

.stepbar li:before {
  display: block;
  width: 18px;
  height: 18px;
  margin: 0.5em auto;
  content: "";
  text-align: center;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #000;
}

.stepbar li:after {
  position: absolute;
  z-index: -1;
  top: 1em;
  left: -50%;
  width: 100%;
  height: 1px;
  content: "";
  background-color: #000;
}

.stepbar li:first-child:after {
  content: none;
}

@media screen and (max-width: 960px) {
  .stepbar li p {
    margin: 10px 15px;
    font-size: 12px;
  }
}

/* 作業手順　改修中　sp版 */



/* 25％削減可能 */
.fukidashi {
    position: relative;
    padding: 1rem 1rem 1.2rem;
    border-bottom: 2px solid #333;
    background: linear-gradient(#b0e0e6 0 calc(50% - 0.2rem), white calc(100% - 0.2rem));
}

.fukidashi:before,
.fukidashi:after {
    position: absolute;
    left: 50%;
    content: "";
    height: 0;
    width: 0;
}

.fukidashi:before {
    top: 100%;
    border: 9px solid;
    border-color: transparent;
    border-top-color: #333;
    margin-left: -9px;
}

.fukidashi:after {
    top: 99%;
    border: 8px solid;
    border-color: transparent;
    border-top-color: white;
    margin-left: -8px;
}

.fukidashi p {
    color: #333;
    line-height: 1.5;
}




/* お客様の声 */
.voice_pc {
  border-radius: 10px;
  background: #ffffff;
  border: 3px solid #ffffff;
  font-size: 100%;
  padding: 20px;
  width: 800px;
  height: 550px;
  text-align: left;
  box-shadow: 2px 2px 4px;
}

.voice_sp {
  border-radius: 10px;
  background: #ffffff;
  border: 3px solid #ffffff;
  font-size: 100%;
  padding: 20px;
  width: 100%;
  height: 750px;
  text-align: left;
  box-shadow: 2px 2px 4px;
}


/* アニメーション */
@keyframes fuwafuwa {
  from {
    translateY(0) scale(1)
  }
  to {
    transform: translateY(10px) scale(.9);
  }
}
.anime-object {
  animation: fuwafuwa 1s ease-in-out infinite alternate;
}
.circle {
  width: 550px;
  height: auto;
/*   border-radius: 50px; */
/*   background-color: #fc410e; */
}