@charset "UTF-8";
/* CSS Document */

@media screen and (min-width:701px) and ( max-width:1050px)  {
	/*ファーストビュー*/
	#fv{width: 100%;margin: 0 auto;}
	#fv .wrapper{width: 100%;background: url("../img/fv_photo.jpg") no-repeat;background-size:cover;background-position:50% 50%;}
	#fv .wrapper .photo_area{display: none}
	#fv .wrapper .shape_area{display: none}
	
	#fv .wrapper .container_primary{width: 100%;height: 100%;margin: 0 auto;}
	
	#fv .wrapper .container_primary .message{width: 70%;margin:0 auto 50px auto;padding: 150px 0 0 0 }
	#fv .wrapper .container_primary .message .bubble{position: relative;background:linear-gradient(90deg, #1903bd, #008dff);text-align: center;font-size: clamp(16px, 1.2vw, 25px);letter-spacing: 1px;color: white;font-weight: 700;padding: 5px 0;margin: 0 auto 20px auto}
	#fv .wrapper .container_primary .message .bubble::before{position: absolute;top: 100%;left: 50%;transform: translateX(-50%);content: '';background:linear-gradient(90deg, #1903bd, #008dff);height: calc(tan(40deg) * 30px / 2);  width: 30px; clip-path: polygon(0 0, 100% 0, 50% 100%);}
	#fv .wrapper .container_primary .message h1{width: 100%;margin: 0;padding: 0}
	#fv .wrapper .container_primary .message h1 img{width: 100%}
	#fv .wrapper .container_primary .message h2{margin: 0 auto 10px auto;padding: 0;font-size: clamp(26px, 2.5vw, 38px);letter-spacing: 0px;font-weight: 700;text-align: center}
	#fv .wrapper .container_primary .message h2 span{color: #0d47dd}
	#fv .wrapper .container_primary .message p{width: 100%;margin: 0 auto;padding: 0;font-size: clamp(16px, 1.5vw, 20px);letter-spacing: 0px;font-weight: 600;line-height: 1.5;text-align: center}
	
	#fv .wrapper .container_primary .product{width: 100%;margin: 0 auto;padding: 0 0 50px 0;background:url("../img/fv_shape_sp.png") no-repeat;background-size:100% 80%;background-position: 50% 100%}
	#fv .wrapper .container_primary .product figure{margin: 0 auto 20px auto;padding: 0;width: 20%;min-width: 200px}
	#fv .wrapper .container_primary .product figure img{width: 100%}
	#fv .wrapper .container_primary .product .caption{width:60%;margin: 0 auto 0px auto;}	
	#fv .wrapper .container_primary .product .caption .inner{padding: 20px 20px;color: white;text-align: center;border-radius: 5px;background:linear-gradient(0deg, #1903bd, #0054ff);box-shadow: 0px 0px 15px 0px rgba(27, 20, 100, 1.0);}
	#fv .wrapper .container_primary .product .caption .inner .sub{width: 30%;min-width: 200px;border: 1px solid white;margin: 0 auto 10px auto;padding: 5px 0;font-size: clamp(12px, 0.9vw, 14px);font-weight:600;letter-spacing:1px;}
	#fv .wrapper .container_primary .product .caption .inner h2{margin: 0 auto 10px auto;padding: 0;font-size: clamp(16px, 0.8vw, 20px);letter-spacing:0px;line-height: 1.2}
	#fv .wrapper .container_primary .product .caption .inner h2 span{display:block;font-size: clamp(16px, 1.2vw, 24px);}
	#fv .wrapper .container_primary .product .caption .inner .note{margin: 0;padding: 0 0 0 14px;font-size: clamp(12px, 0.6vw, 16px);letter-spacing:0px;line-height: 1.4;}
	
	#fv .wrapper .container_primary .cta_fv{display:none;}
	
	#fv .wrapper .container_primary .cta_fv_sp{background:#f6ff00;width: 100%;margin: 0 auto;}	
	#fv .wrapper .container_primary .cta_fv_sp .inner{}
	#fv .wrapper .container_primary .cta_fv_sp .inner .text_area{position: relative;background:linear-gradient(0deg, #c8fe3e, #faff57);padding: 36px 0}
	#fv .wrapper .container_primary .cta_fv_sp .inner .text_area::before{position: absolute;top: 20%;left: 80%;content: '';width: 10%;height: 200px;background: url("../img/cta_memo.png") no-repeat;background-position: 50% 50%;background-size: 100% auto;}
	#fv .wrapper .container_primary .cta_fv_sp .inner .text_area::after{position: absolute;top:-10%;left:8%;content: '';width: 12%;height: 230px;background:url("../img/cta_illustration01.png") no-repeat;background-position: 50% 0%;background-size: 100% auto}
	#fv .wrapper .container_primary .cta_fv_sp .inner .text_area p{margin:0;padding: 0;text-align: center;font-size:26px;font-weight: 700;line-height: 1.2}
	#fv .wrapper .container_primary .cta_fv_sp .inner .text_area p span{display:block;font-size: 22px;}
		
	#fv .wrapper .container_primary .cta_fv_sp .inner .banner_area{background: url("../img/cta_bg_image.jpg") no-repeat;background-position: 50% 50%;background-size: cover;padding: 50px 0;}
	
	#fv .wrapper .container_primary .cta_fv_sp .inner .banner_area a{position: relative;display: block;width:60% ; margin: 0 auto 10px auto;padding: 20px 0px;border-radius: 50px; color: white;font-size: clamp(18px, 1.8vw, 24px);font-weight:600;letter-spacing:0px;text-align: center;text-decoration: none; z-index:0;}	
	#fv .wrapper .container_primary .cta_fv_sp .inner .banner_area a::before{  content:"";  width:100%;  height:100%;  position:absolute;  z-index:-1;  top: 0;left:0;border-radius: 50px;  transition:0.5s;background:linear-gradient(0deg, #1736cb, #1d63d8);}
	#fv .wrapper .container_primary .cta_fv_sp .inner .banner_area a::after{  content:"";  width:100%;  height:100%;  position:absolute;  z-index:-2; top: 0; left:0;  border-radius: 50px;background:linear-gradient(#ffa20f,#ffbf00);}
	#fv .wrapper .container_primary .cta_fv_sp .inner .banner_area a:hover:before{  opacity:0;}
	
	#fv .wrapper .container_primary .cta_fv_sp .inner .banner_area a span{position: relative;padding-left: 20px}
	#fv .wrapper .container_primary .cta_fv_sp .inner .banner_area a span.diagnosis::before{position: absolute;top: 50%;transform: translateY(-50%);right:95%;content: '';width: 8%;height: 80px;background: url("../img/cta_icon_diagnosis.png") no-repeat;background-position: 50% 50%;background-size: 100% auto}
	#fv .wrapper .container_primary .cta_fv_sp .inner .banner_area a span.case::before{position: absolute;top: 50%;transform: translateY(-50%);right:95%;content: '';width: 8%;height: 80px;background: url("../img/cta_icon_case_study.png") no-repeat;background-position: 50% 50%;background-size: 100% auto}
	
	
	
	/*お悩み*/
	#problem{background:linear-gradient(0deg, #ffffff, #d1d5d6);padding: 80px 0}
	#problem .wrapper{position: relative;width: 100%;margin: 0 auto;}
	#problem .wrapper .shape01{position: absolute;top: 20%;left: 10%;width: 50%;}
	#problem .wrapper .shape01 img{width:100%;}
	
	#problem .wrapper .shape02{position: absolute;top: 70%;right:10%;width: 50%;}
	#problem .wrapper .shape02 img{width:100%;}
	
	#problem .wrapper .container_primary{width: 100%;position: relative}
	
	
	#problem .wrapper .container_primary .bubble{position: relative;opacity: 0; transform: translateY(-20px);  transition: all .5s ease-in-out 0.5s;width: 80%;margin: 0 auto 50px auto; background: white;border-radius: 50px;box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.35);}	
	#problem .wrapper .container_primary .bubble::before{position: absolute;top: 100%;left: 50%;transform: translateX(-50%);content: '';background:white;  height: calc(tan(40deg) * 20px / 2);  width: 20px; clip-path: polygon(0 0, 100% 0, 50% 100%);}
	#problem .wrapper .container_primary .bubble.active{	opacity: 1;		transform: translateY(0);    }
	#problem .wrapper .container_primary .bubble h3{text-align: center;padding: 15px 0;margin: 0;color: #4d4c6b;font-size: 20px;letter-spacing: 1px;line-height: 1;opacity: 0;  clip-path: inset(100% 0 0 0);  transition: clip-path 1s ease-in-out 0.8s, opacity 1s ease-in-out;}
	#problem .wrapper .container_primary .bubble h3.active {  opacity: 1;  clip-path: inset(0 0 0 0);}
	
	#problem .wrapper .container_primary figure{width: 20%;margin: 0 auto 10px auto}
	#problem .wrapper .container_primary figure img{width:100%;}
	
	#problem .wrapper .container_primary .word{background:linear-gradient(0deg, #5987ab, #86aabb);width:55%;margin: 0 auto 20px auto;color: white;font-size: clamp(16px, 1.0vw, 22px);letter-spacing: 0px;line-height: 1;font-weight: 500;padding: 22px 0;text-align: center;}
	
	#problem .wrapper .container_primary .word01{border-radius: 30px 30px 30px 0px;opacity: 0; transition: all .2s ease-in-out 0.9s;transform: translateX(50px);}
	#problem .wrapper .container_primary .word01.active{opacity:1;transform: translateX(30px); }	
	
	#problem .wrapper .container_primary .word02{border-radius: 30px 30px 0 30px;opacity: 0; transition: all .2s ease-in-out 0.9s;transform: translateX(-50px);}
	#problem .wrapper .container_primary .word02.active{opacity:1;transform: translateX(-30px);}
	
	#problem .wrapper .container_primary .word03{border-radius: 30px 30px 30px 0;opacity: 0; transition: all .2s ease-in-out 0.9s;transform: translateX(50px);}
	#problem .wrapper .container_primary .word03.active{opacity:1;transform: translateX(30px);}
	
	#problem .wrapper .container_primary .word04{border-radius: 30px 30px 0 30px;opacity: 0; transition: all .2s ease-in-out 0.9s;transform: translateX(-50px);}
	#problem .wrapper .container_primary .word04.active{opacity:1;transform: translateX(-30px);}
	
	#problem .wrapper .container_primary .word05{border-radius: 30px 30px 30px 0;opacity: 0; transition: all .2s ease-in-out 0.9s;transform: translateX(50px);}
	#problem .wrapper .container_primary .word05.active{opacity:1;transform: translateX(30px);}
	
	#problem .wrapper .container_primary .word06{border-radius: 30px 30px 0 30px;opacity: 0; transition: all .2s ease-in-out 0.9s;transform: translateX(-50px);}
	#problem .wrapper .container_primary .word06.active{opacity:1;transform: translateX(-30px);}
	
	#problem .wrapper .container_primary .word span{opacity: 0;  clip-path: inset(100% 0 0 0);  transition: clip-path 0.5s ease-in-out 1.3s, opacity 1s ease-in-out;}
	#problem .wrapper .container_primary .word span.active {  opacity: 1;  clip-path: inset(0 0 0 0);}	
	
	
	/*JCSの紹介*/
	#introduction{position: relative;padding: 80px 0 100px 0;	background: url(../img/introduction_bg.png) , -moz-linear-gradient(90deg, #1903bd, #008dff);  background:url(../img/introduction_bg.png) , -webkit-linear-gradient(90deg, #1903bd, #008dff);background-repeat: no-repeat;	background-position: 50% 100%;background-size:100% auto;	}	
	
	#introduction::before{ position: absolute;top: 0%;left:50%;transform: translateX(-50%);content: '';width:50%;max-width: 500px;margin:0 auto;background:white;height: 0;clip-path: polygon(0 0, 100% 0, 50% 0);transition: height 0.8s ease 1.2s;}
	#introduction.active::before{height: calc(tan(40deg) * 150px / 2);  clip-path: polygon(0 0, 100% 0, 50% 100%); }
	
	#introduction .container{position: relative;width:95%;margin: 30px auto 0px auto; padding: 0px 0 0px 0}
	#introduction .container::before{position: absolute;top: 4%;left:0%;content: '';width: 100%;height: 100%;border: 2px solid #7bcbff;border-radius: 10px;transform: scaleY(0);    transform-origin: top;  transition: transform 0.5s ease 1.6s; }
	#introduction .container.active::before {  transform: scaleY(1);       /* activeで元の高さに伸びる */}
	
	#introduction .container .title_area{position: relative;width: 80%;margin: 0 auto;padding:20px 0;background: white;border-radius: 10px;}
	#introduction .container .title_area::before{position: absolute;top: 20%;right: -3%;content: '';width: 30%;height: 200px;background: url("../img/introduction_illustration.png") no-repeat;background-position: 50% 50%;background-size: 100% auto}
	#introduction .container .title_area .title{width:90%;margin: 0 auto;position:relative;overflow: hidden}
	#introduction .container .title_area .title::before{ content: "";  position: absolute; bottom: 0%;left: 0%;  width:100%;  height: 40%;background:linear-gradient(90deg, #ffff93, #ffff00);transition: all .3s linear 1.9s; transform: translateX(-100%);z-index: 0}
	#introduction .container .title_area .title.active::before{transform: translateX(0%);}
	#introduction .container .title_area h3{position:relative;margin: 0 auto;padding: 0;text-align: center;color: #0044d7;font-size: clamp(22px, 2.2vw,30px);letter-spacing: 1px; opacity: 0;  clip-path: inset(100% 0 0 0);  transition: clip-path 1s ease-in-out 2.2s, opacity 1s ease-in-out;}
	#introduction .container .title_area h3.active {  opacity: 1;  clip-path: inset(0 0 0 0);}
	
	#introduction .container .inner{width: 100%;margin: 50px auto 0 auto;}
	#introduction .container .inner figure{width: 40%;margin: 0px auto 0 auto;}
	#introduction .container .inner figure img{width: 100%;opacity: 0; transition: all .3s linear 1.5s; transform: scale(0.8);}
	#introduction .container .inner figure img.active{opacity: 1;  transform: scale(1); 	}
	
	#introduction .container .inner .text_area{width: 80%;margin: 0px auto 0 auto;color: white}
	#introduction .container .inner .text_area .sub_title{width: 300px;margin: 0 auto 20px 0;padding:6px 0;border: 1px solid #fffff3;text-align: center;border-radius: 50px;font-size: 18px;letter-spacing: 1px;}
	#introduction .container .inner .text_area h4{margin: 0 auto 10px auto;padding:0px 0;font-size: 24px;letter-spacing: 1px;line-height:35px;}
	#introduction .container .inner .text_area .note{font-size: 13px;letter-spacing: 1px;margin: 0 auto 30px auto;}
	#introduction .container .inner .text_area .attention_area{font-size: clamp(26px, 2.8vw,32px);letter-spacing: 1px;line-height:1;font-weight: 700;margin: 0 auto 30px auto;color: #00326d}
	
	#introduction .container .inner .text_area .attention_area .first{display: inline-block;position:relative;overflow: hidden}
	#introduction .container .inner .text_area .attention_area .first::before{content:"";position:absolute;bottom:0;left:0;width:100%;height:100%;background:linear-gradient(90deg, #ffff93, #ffff00);transition:all .6s linear 1.7s; transform:translateX(-100%);z-index:0}
	#introduction .container .inner .text_area .attention_area .first.active::before{transform: translateX(0%);}
	#introduction .container .inner .text_area .attention_area .first span{display: block;position: relative;padding:10px 10px ; opacity: 0;  clip-path: inset(100% 0 0 0);  transition: clip-path 1s ease-in-out 1.8s, opacity 1s ease-in-out;}
	#introduction .container .inner .text_area .attention_area .first span.active {  opacity: 1;  clip-path: inset(0 0 0 0);}
	
	
	#introduction .container .inner .text_area .attention_area .second{display: inline-block;position:relative;overflow: hidden}
	#introduction .container .inner .text_area .attention_area .second::before{content:"";position:absolute;bottom:0;left:0;width:100%;height:100%;background:linear-gradient(90deg, #ffff93, #ffff00);transition:all .6s linear 1.8s; transform:translateX(-100%);z-index:0}
	#introduction .container .inner .text_area .attention_area .second.active::before{transform: translateX(0%);}
	#introduction .container .inner .text_area .attention_area .second span{display: block;position: relative;padding: 10px 10px ; opacity: 0;  clip-path: inset(100% 0 0 0);  transition: clip-path 1s ease-in-out 1.8s, opacity 1s ease-in-out;}
	#introduction .container .inner .text_area .attention_area .second span.active {  opacity: 1;  clip-path: inset(0 0 0 0);}
	
	#introduction .container .inner .text_area .attention_area .third{display: inline-block;position:relative;overflow: hidden}
	#introduction .container .inner .text_area .attention_area .third::before{content:"";position:absolute;bottom:0;left:0;width:100%;height:100%;background:linear-gradient(90deg, #ffff93, #ffff00);transition:all .6s linear 1.9s; transform:translateX(-101%);z-index:0}
	#introduction .container .inner .text_area .attention_area .third.active::before{transform: translateX(0%);}
	#introduction .container .inner .text_area .attention_area .third span{display: block;position: relative;padding: 10px 10px ; opacity: 0;  clip-path: inset(100% 0 0 0);  transition: clip-path 1s ease-in-out 1.8s, opacity 1s ease-in-out;}
	#introduction .container .inner .text_area .attention_area .third span.active {  opacity: 1;  clip-path: inset(0 0 0 0);}
	
	#introduction .container .inner .text_area p{margin: 0 auto ;padding:0px 0;font-size: 16px;letter-spacing: 1px;line-height:30px;}
	
	/*JCSの解説*/
	#explanation{padding:80px 0;}
	#explanation .title_area{width: 100%;margin: 0px auto 30px auto;}	
	#explanation .title_area .bubble{position: relative;width: 500px;margin: 0px auto 30px auto;padding:10px 0;background: #f8f641;border-radius: 30px;text-align: center;font-size: 20px;letter-spacing: 1px;font-weight:600;line-height: 20px;opacity: 0; transition: all .5s ease-in-out 0.2s; transform: translateY(-30px); }
	#explanation .title_area .bubble::before{position: absolute;top: 100%;left: 50%;transform: translateX(-50%);content: '';background:#f8f641;  height: calc(tan(60deg) * 20px / 2);  width: 20px; clip-path: polygon(0 0, 100% 0, 50% 100%);}
	#explanation .title_area .bubble.active{	opacity: 1;		transform: translateY(0);     }
	
	#explanation .title_area .bubble span{  opacity: 0;  clip-path: inset(100% 0 0 0);  transition: clip-path 1s ease-in-out 0.5s/*←開始*/, opacity 1s ease-in-out;}
	#explanation .title_area .bubble span.active {  opacity: 1;  clip-path: inset(0 0 0 0);}
	
	#explanation .title_area h3{position: relative;margin: 0px auto 0 auto;padding:0;text-align: center;font-size: clamp(24px, 2.8vw,32px);letter-spacing: 1px;color: #0044a1;}
	#explanation .title_area h3::before{position: absolute;top: -100%;left: 80%;content: '';width:6%;height: 150px;background: url("../img/explanation_illustration.png") no-repeat;background-position: 50% 0%;background-size: 100% auto}
	
	
	#explanation .fee_calculation{width: 85%;margin: 0px auto 50px auto;padding:30px 0;background:linear-gradient(0deg, #1736cb, #1d63d8);border-radius: 10px}
	#explanation .fee_calculation h4{margin: 0px auto 10px auto;padding:0;text-align: center;font-size:22px;letter-spacing: 1px;color: white;}
	#explanation .fee_calculation .inner{margin: 0px auto 0 auto;display: flex;justify-content:center;font-size: clamp(18px, 2.0vw,20px);letter-spacing: 0px;line-height: 20px;text-align: center;}
	#explanation .fee_calculation .inner .kw{border: 3px dashed #ffff4c;padding:18px 20px 16px 20px;margin: 0 25px 0 20px;color: #ffff4c;border-radius: 10px;}
	#explanation .fee_calculation .inner .value_normal{position: relative;border: 1px solid #ffffff;padding: 20px 20px;margin: 0 20px;color: #ffffff;border-radius: 10px}
	#explanation .fee_calculation .inner .value_normal::before{position: absolute;top: 50%;transform: translateY(-50%);right: 108%;content: '×';font-size: 40px;}
	
	#explanation .contract_type{position: relative;width: 85%;margin: 0px auto 80px auto;padding: 20px 0 40px 0;background: #e3f6fc;border-radius: 10px}
	
	#explanation .contract_type::before{position:absolute;bottom:95%;left:25%;content:'';width:28%;max-width: 220px;min-width: 180px;height:100px;background:url("../img/explanation_arrow.png") no-repeat;background-position:50% 50%;background-size:100% auto;opacity:0;clip-path: inset(0 0 100% 0);  transition: clip-path 0.5s ease-in-out 1.6s/*←開始*/, opacity 1s ease-in-out;}
	#explanation .contract_type.active::before {  opacity: 1;  clip-path: inset(0 0 0 0);}	
	
	#explanation .contract_type::after{position:absolute;top:100%;left:50%;transform: translateX(-50%);content:''; width:50%;max-width: 500px;background:linear-gradient(0deg, #8fe1fc, #e3f6fc);height: 0;clip-path: polygon(0 0, 100% 0, 50% 0);transition: height 0.4s ease 2.9s; }	
	#explanation .contract_type.active::after{height: calc(tan(40deg) * 150px / 2);  clip-path: polygon(0 0, 100% 0, 50% 100%); }
	
	#explanation .contract_type h5{width:360px;margin:20px auto 20px auto;padding:0px 0 0 0;text-align:center;font-size:22px;letter-spacing: 1px;color: #003e99;background: url("../img/icon_light_bulb.png") no-repeat;background-position: 0 0%;background-size: auto 100%}
	#explanation .contract_type .inner{width: 95%;margin: 0px auto 0 auto;display: flex;justify-content: space-between}
	#explanation .contract_type .inner .detail{width: 49%;background: white}
	#explanation .contract_type .inner .detail .name{text-align: center;font-size: 20px;color: white;letter-spacing: 1px;padding: 10px 0;font-weight: 600;}
	#explanation .contract_type .inner .type01 .name{background: #999999}
	#explanation .contract_type .inner .type02 .name{background:linear-gradient(0deg, #1736cb, #1d63d8);}
	#explanation .contract_type .inner .detail .text{width: 80%;margin: 20px auto 20px auto;font-size: 16px;letter-spacing: 0px;line-height: 26px;font-weight: 600;}
	#explanation .contract_type .inner .detail .text span{color: #0075d6;}
	#explanation .contract_type .inner .detail .note{position: relative;width: 80%;margin: 0 auto 20px auto;padding: 6px 0;text-align: center;font-size:16px;color: white;letter-spacing: 0px;font-weight: 600;border-radius: 30px}
	#explanation .contract_type .inner .type01 .note{background: #4d4d4d;}
	#explanation .contract_type .inner .type02 .note{background:linear-gradient(0deg, #ff9747, #ffba49);}
	#explanation .contract_type .inner .type01 .note::before{position: absolute;bottom: 100%;left: 50%;transform: translateX(-50%);content: '';background:#4d4d4d;  height: calc(tan(50deg) * 20px / 2);  width: 20px; clip-path: polygon(50% 0, 100% 100%, 0 100%);}
	#explanation .contract_type .inner .type02 .note::before{position: absolute;bottom: 100%;left: 50%;transform: translateX(-50%);content: '';background:#ffba49;  height: calc(tan(50deg) * 20px / 2);  width: 20px; clip-path: polygon(50% 0, 100% 100%, 0 100%);}
	
	#explanation .comparison_image{position: relative;width: 85%;margin: 0px auto 0 auto;}
	#explanation .comparison_image::before{position: absolute;top: 5%;left:0%;content: '';width: 100%;height: 100%;border: 2px solid #7bcbff;border-radius: 10px}
	
	#explanation .comparison_image .title_area{position: relative; width: 95%;margin: 0 auto 20px auto;padding:10px 0;background:linear-gradient(0deg, #1736cb, #1d63d8);border-radius: 50px;}
	#explanation .comparison_image .title_area h6{margin: 0 auto;padding: 0;text-align: center;color: white;font-size:22px;letter-spacing: 0px; display: flex;  justify-content: center;  align-items: center;  flex-wrap: wrap}
	
	
	#explanation .comparison_image .title_area h6 .attention{display: inline-block;position:relative;overflow: hidden;color: #2e3192;margin: 0 10px;padding: 0;}
	#explanation .comparison_image .title_area h6 .attention::before{display: block;content:"";position:absolute;top:0px;left:0;width:100%;height:100%;background:linear-gradient(90deg, #ffff93, #ffff00);transition:all .3s linear 2.0s; transform:translateX(-100%);z-index:0;line-height: 1}
	#explanation .comparison_image .title_area h6 .attention.active::before{transform: translateX(0%);}

	#explanation .comparison_image .title_area h6 .attention span{display: block;position:relative;padding: 0px 10px;;margin: 0 ; opacity: 0;  clip-path: inset(100% 0 0 0);  transition: clip-path 1s ease-in-out 2.3s, opacity 1s ease-in-out;}
	#explanation .comparison_image .title_area h6 .attention span.active {  opacity: 1;  clip-path: inset(0 0 0 0);}
	
	
	#explanation .comparison_image .note{margin: 0 auto 20px auto;text-align: center;color: #00467a;font-size:16px;letter-spacing: 1px;font-weight: 500;}
	#explanation .comparison_image .note span{border-bottom:1px solid #1736cb;}
	
	#explanation .comparison_image .inner .name_area{width:90%;margin: 0px auto 20px auto;display: flex;justify-content:space-between;}
	
	#explanation .comparison_image .inner .name_area .bubble{position: relative;width:42%;padding:10px 0;border-radius: 30px;text-align: center;font-size: 18px;letter-spacing: 1px;font-weight:600;line-height: 20px;color: white}	
	#explanation .comparison_image .inner .name_area .type01{background: #4d4d4d;margin-left: 0px ;}
	#explanation .comparison_image .inner .name_area .type02{background:linear-gradient(0deg, #ff9747, #ffba49);margin-right: 0px ;}
	#explanation .comparison_image .inner .name_area .type01::before{position: absolute;top:100%;left:50%;transform:translateX(-50%);content: '';background:#4d4d4d;  height: calc(tan(50deg) * 20px / 2);  width: 20px;clip-path: polygon(0 0, 100% 0, 50% 100%);}
	#explanation .comparison_image .inner .name_area .type02::before{position: absolute;top:100%;left:50%;transform:translateX(-50%);content: '';background:#ff9747;  height: calc(tan(50deg) * 20px / 2);  width: 20px;clip-path: polygon(0 0, 100% 0, 50% 100%);}
	
	#explanation .comparison_image .inner figure{width: 90%;margin: 0 auto}
	#explanation .comparison_image .inner figure img{width: 100%;}
	
	/*CTA（中間）*/
	#cta01{position: relative;background:linear-gradient(0deg, #302eff, #00aeff);padding:120px 0 80px 0;}
	
	#cta01::after{position:absolute;top:0%;left:50%;transform: translateX(-50%);content:''; width:50%;max-width: 500px;background:white;height: 0;clip-path: polygon(0 0, 100% 0, 50% 0);transition: height 0.4s ease 0.2s; }	
	#cta01.active::after{height: calc(tan(40deg) * 150px / 2);  clip-path: polygon(0 0, 100% 0, 50% 100%); }
	
	#cta01 .bubble_area{width: 600px;margin: 0px auto 20px auto;}
	#cta01 .bubble_area .first{position: relative;background: white;margin: 0 auto 40px auto;padding: 10px 0;border-radius: 50px;text-align: center;font-size: 22px;letter-spacing: 1px;font-weight:700;line-height: 20px;color:#00478e;}
	#cta01 .bubble_area .first::before{position: absolute;top:80%;left:50%;content: '';background:white; width: 40px; height:20px;border-radius: 50%;}
	#cta01 .bubble_area .first::after{position: absolute;top:140%;left:50%;transform:translateX(-50%);content: '';background:white; width: 20px; height:10px;border-radius: 50%;}
	#cta01 .bubble_area .second{text-align: center;color: white;font-size: 22px;font-weight:600;} 

	#cta01 .lead_area{position: relative;width:80%;margin: 0px auto 50px auto;opacity: 0; transition: all .3s linear 1.2s/*←開始時間*/; transform: scale(0.6);}
	#cta01 .lead_area.active{opacity: 1;  transform: scale(1); 	}

	#cta01 .lead_area::before{position: absolute;top:50%;transform: translateY(-50%) skewX(-20deg);left:105%;content: '';background:white; width: 1px; height:80px;}
	#cta01 .lead_area::after{position: absolute;top:50%;transform: translateY(-50%) skewX(20deg);right:105%;content: '';background:white; width: 1px; height:80px;}
	#cta01 .lead_area p{text-align: center;color: white;font-size: clamp(18px, 1.8vw, 22px);font-weight:600;margin: 0 auto 0px auto;padding: 0px 0;letter-spacing: 1px;}
	#cta01 .lead_area h3{text-align: center;color: white;font-size: clamp(24px, 3.8vw, 36px);font-weight:600;margin: 0 auto 40px auto;padding: 0px 0;letter-spacing: 1px;}
	
	#cta01 .cta_area{width: 70%;min-width: 600px;margin: 0px auto 0px auto;border: 2px solid white}
	#cta01 .cta_area .text_area{position: relative;width: 100%;background:linear-gradient(0deg, #c8fe3e, #faff57);padding: 30px 0 20px 0}
	#cta01 .cta_area .text_area::before{position: absolute;bottom:0%;right:65%;content: '';background:url("../img/cta_illustration02.png") no-repeat;background-position: 0% 100%;background-size: auto 100%; width:35%; height:110%;}
	#cta01 .cta_area .text_area .inner{width: 70%;margin: 0 auto 0 auto;text-align: center;}
	#cta01 .cta_area .text_area .inner h4{color:#242433;font-size: clamp(26px, 3.0vw, 30px);font-weight:800;margin: 0 auto 10px auto;padding: 0px 0 5px 0;letter-spacing: 2px;border-bottom: 1px solid #1736cb}
	#cta01 .cta_area .text_area .inner .sub{color:#242433;font-size: clamp(20px, 2.2vw, 28px);font-weight:800;margin: 0 auto 0px auto;padding: 0px 0;letter-spacing: 1px;line-height: 1.4}
	#cta01 .cta_area .text_area .inner .sub span{display: block;font-size: clamp(20px, 1.2vw, 22px);}
	
	#cta01 .cta_area .banner_area{position: relative;width: 100%;background: url("../img/cta_bg_image.jpg") no-repeat;background-position: 50% 50%;background-size: cover;padding: 50px 0}
	#cta01 .cta_area .banner_area::before{position: absolute;bottom:70%;left:92%;content: '';background:url("../img/cta_memo.png") no-repeat;background-position: 50% 50%;background-size: 100% auto; width:15%; height:60%;}
	
	#cta01 .cta_area .banner_area a{position:relative;display:block;width: 80%;margin: 0 auto;padding: 30px 0;background:linear-gradient(0deg, #1736cb, #1d63d8);border-radius: 50px; color: white;font-size: clamp(20px, 1.8vw, 26px);font-weight:600;letter-spacing:2px;text-align: center;text-decoration: none; z-index:0;}
	
	#cta01 .cta_area .banner_area a:before{  content:"";  width:100%;  height:100%;  position:absolute;  z-index:-1;  top: 0;left:0;border-radius: 50px;  transition:0.5s;background:linear-gradient(0deg, #0064dc, #0095ff);}
	#cta01 .cta_area .banner_area a:after{  content:"";  width:100%;  height:100%;  position:absolute;  z-index:-2; top: 0; left:0;  border-radius: 50px;background:linear-gradient(#ffa20f,#ffbf00);}
	#cta01 .cta_area .banner_area a:hover:before{  opacity:0;}
	
	#cta01 .cta_area .banner_area a span{position: relative;padding-left: 20px}
	#cta01 .cta_area .banner_area a span::before{position: absolute;top: 50%;transform: translateY(-50%);right:95%;content: '';width: 10%;height: 80px;background: url("../img/cta_icon_diagnosis.png") no-repeat;background-position: 50% 50%;background-size: 100% auto}
	
	/*導入のメリット*/
	#merit{padding: 80px 0 150px 0;background: url("../img/merit_bg.jpg")no-repeat;background-attachment: fixed;  background-size: cover;  background-position: center;}
	#merit .container{width:85%;margin: 0px auto 0px auto;padding:80px 0 50px 0;background: linear-gradient(rgba(255,255,255,0.9),rgba(180,233,255,0.9));border-radius: 30px}
	#merit .container .title_area{width: 100%;margin: 0px auto 120px auto;opacity: 0;  clip-path: inset(100% 0 0 0);  transition: clip-path 1s ease-in-out 1.0s, opacity 1s ease-in-out;}
	#merit .container .title_area.active {  opacity: 1;  clip-path: inset(0 0 0 0);}
	#merit .container .title_area h3{margin: 0px auto 0px auto;text-align: center;font-size: 40px;padding: 0px 0;letter-spacing: 2px; }
	#merit .container .title_area p{margin: 0px auto 0px auto;text-align: center;font-size: 25px;font-weight:600;padding: 0px 0;letter-spacing: 0px;color: #0679da}	
	
	#merit .container .list_area{width: 90%;margin: 0px auto 0px auto;}	
	
	#merit .container .list_area .unit{margin: 100px auto 0px auto;}	
	
	#merit .container .list_area .unit .inner{position: relative;width: 100%; background: white;padding: 130px 0 30px 0;border-radius: 20px;box-shadow: -5px -5px 15px 5px rgba(0, 90, 255, 0.2), 5px 5px 15px 7px rgba(0, 213, 83, 0.2);z-index: 1}
	#merit .container .list_area .unit .inner::before{content: '';  position: absolute;   top: -35%;left: 50%;width: 200px;height: 90px;border-radius: 100px 100px 0 0; background:linear-gradient(90deg,rgba(0, 90, 255, 0.2),rgba(0, 213, 83, 0.2));filter: blur(10px);  transform: translateY(0px) translateX(-50%) scale(1.0);   mix-blend-mode: multiply;z-index: -2}
	
	#merit .container .list_area .unit .inner .circle{position: absolute;top: -30%;left: 50%;transform: translateX(-50%);width: 200px;height: 200px;margin: 0 auto;background:white;border-radius: 100px; }
	
	#merit .container .list_area .unit .inner .icon{position: absolute;top: -25%;left: 50%;transform: translateX(-50%);width: 170px;height: 170px;margin: 0 auto;background:linear-gradient(0deg, #007cff, #00b8ff);border-radius:85px;display: flex;align-items: center;text-align:center;  justify-content:center;}
	#merit .container .list_area .unit .inner .icon img{width: 60%;}
	#merit .container .list_area .unit .inner h4{margin: 0px auto 10px auto;text-align: center;font-size: 30px;padding: 0px 0;letter-spacing: 2px;color: #0074cb}
	#merit .container .list_area .unit .inner p{width: 90%;margin: 0px auto 0px auto;font-size: 16px;padding: 0px 0;letter-spacing: 1px;line-height: 1.5}
	
	
	/*導入の流れ*/
	#step{background:linear-gradient(0deg, #eaffff, #ffffff);padding: 0 0 80px 0}
	
	#step .title_area{position: relative;width: 80%;margin: 0px auto 50px auto;padding: 150px 0 0 0}
	
	#step .title_area p{position: relative;margin: 0px auto 0px auto;font-size: 20px;padding: 0px 0;letter-spacing: 1px;color: #0074cb;font-weight: 700;opacity: 0;  clip-path: inset(100% 0 0 0);  transition: clip-path 1s ease-in-out 0.8s, opacity 1s ease-in-out;}
	#step .title_area p.active {  opacity: 1;  clip-path: inset(0 0 0 0);}
	#step .title_area h3{position: relative;margin: 0px auto 0px auto;font-size: 40px;padding: 0px 0;letter-spacing: 2px;opacity: 0;  clip-path: inset(100% 0 0 0);  transition: clip-path 1s ease-in-out 0.8s, opacity 1s ease-in-out;}	
	#step .title_area h3.active {  opacity: 1;  clip-path: inset(0 0 0 0);}
	
	#step .title_area .illustration{width: 50%;position: absolute;top: -110px;right: 0}
	#step .title_area .illustration img{width: 100%}
	
	#step .container{position: relative;width: 75%;margin: 0px auto 0px auto;}
	#step .container::before{position: absolute;top:0%;left:50%;transform: translateX(-50%);content: '';background:#007bea;width: 2px;height: 0%;transition: height 1.5s ease;}
	#step .container.active::before{height: 100%;transition-delay: 0.8s;}
	
	#step .container .unit{position: relative;margin: 0 auto 30px auto;padding: 20px 0 20px 0;background:white;border-radius: 20px;box-shadow:    -5px 5px 5px rgba(59, 95, 255, 0.2),   5px -5px 5px rgba(109, 193, 233, 0.2)}
	
	#step .container .unit .number{position: absolute;top: 5%;left: 10%;transform: translateX(-50%);font-size: 60px;color: #b6e9ff;font-weight: 900;}
	#step .container .unit .icon{text-align: center;border: 2px solid #007cff;border-radius: 30px;width: 60px;height: 60px;margin: 0 auto 10px auto;display: flex;align-items: center;justify-content:center;box-sizing: border-box}
	#step .container .unit .icon img{width: 60%;}
	#step .container .unit h4{margin: 0px auto 10px auto;text-align: center;font-size: clamp(20px, 1.5vw, 26px);padding: 0px 0;letter-spacing: 1px;color: #0074cb}
	#step .container .unit p{width:80%;margin: 0px auto 0px auto;font-size: 16px;padding: 0px 0;letter-spacing: 1px;line-height: 1.5}
	
	
	/*FAQ*/
	#faq{padding:80px 0;}
	#faq h3 span{display: block;font-size: 30px;color: #3bb4ff;font-weight: 900;}
	#faq h3{padding:0px 0;margin: 0px auto 40px auto;font-size: 40px;letter-spacing: 2px;text-align: center}
	
	#faq .unit_multi{width: 90%;margin: 0 auto 20px auto;}
	
	
	#faq .unit_multi .button_title{position: relative;cursor: pointer;margin:0 auto 0px auto;padding: 0;padding:20px 0 20px 20px; border: 1px solid #4590d2;background:#faffff;border-radius: 10px;transition: all .5s ease;}
	#faq .unit_multi .button_title:hover{}
	
	#faq .unit_multi .button_title p{position: relative;margin: 0 auto 0px 2%;padding: 0 0 0 40px;font-size:18px;letter-spacing: 1px;font-weight:600;}
	#faq .unit_multi .button_title p::before{content:'Q';position: absolute;top:50%;left:0%;transform: translateY(-50%); font-weight: 900;font-size:22px;color:#4590d2;}
	
	#faq .unit_multi .button_title::before{position:absolute;top: 50%;right: 3%;transform: translateY(-50%); content:'\f067';font-family: "Font Awesome 5 Free";width:40px;height:30px;padding-top: 10px;background:#3bb4ff;color:white;text-align: center;font-weight:900;display: inline-block;font-size: 18px;border-radius:20px; transition: all .5s ease;}
	
	#faq .unit_multi .button_title.close{border: 1px solid #3bb4ff;background:#239fff;color: white}
	#faq .unit_multi .button_title.close::before{content:'\f068';background:#b6e9ff;color:#239fff;}
	#faq .unit_multi .button_title.close p::before{color: white}
	
	/*アコーディオンで現れるエリア*/
	#faq .unit_multi .accordion_area{    display: none; border: 1px solid #4590d2;background:#faffff;border-radius: 10px;margin: 3px auto 0px auto;padding: 30px 20px;box-sizing: border-box;}
	#faq .unit_multi .accordion_area p{position: relative;display: block;margin: 0 auto 0px 2%;padding: 0 0 0 40px;font-size:16px;letter-spacing: 1px;color:#000}
	#faq .unit_multi .accordion_area p::before{content:'A';position: absolute;top:50%;left:0%;transform: translateY(-50%); font-weight: 900;font-size:22px;color:#ff7c50;}
	
	
	/*導入実績*/
	#case{position: relative;padding: 0 0 200px 0;overflow: hidden;}
	
	#case .shape01{position:absolute;top: 5%;left:0%;overflow: hidden;width:35%;aspect-ratio:1.2/1;z-index: -1;}
	#case .shape01 img{width: 100%;   height: 100%;  object-fit: cover;  object-position:right center; }
	
	#case .shape02{position:absolute;top:20%;right:0%;overflow: hidden;width: 30%;aspect-ratio:2/1;z-index: -1;}
	#case .shape02 img{width: 200%;}
	
	#case .lead_group{width:90%; margin: 0 0 0px auto;}
	#case .lead_group .photo_area{width:100%;aspect-ratio:4/1;min-height: 200px;margin: 0 auto 80px auto}
	#case .lead_group .photo_area .inner{width: 100%;height: 100%;display: flex;justify-content: space-between}
	
	#case .lead_group .photo_area .inner .photo01{width: 38%;height: 100%;border-radius: 10px;overflow: hidden}
	#case .lead_group .photo_area .inner .photo01 img{width: 100%;height: 100%;object-fit: cover}
	
	#case .lead_group .photo_area .inner .photo02{width:38%;height: 100%;border-radius: 10px;overflow: hidden;margin-top: 50px}
	#case .lead_group .photo_area .inner .photo02 img{width: 100%;height: 100%;object-fit: cover}
	
	#case .lead_group .photo_area .inner .photo03{width:18%;height:100%;border-radius: 10px 0 0 10px;overflow: hidden}
	#case .lead_group .photo_area .inner .photo03 img{width: 100%;height: 100%;object-fit: cover}
	
	#case .lead_group .text_area{width:90%;margin: 0 auto 0 0;}
	#case .lead_group .text_area .eng{margin: 0 auto ;padding: 0 0 0 0px;font-size:40px;letter-spacing: 2px;font-weight:600;color: #3bb4ff}
	#case .lead_group .text_area h3{margin: 0 auto 20px auto;padding: 0 0 0 0px;font-size:40px;letter-spacing: 1px;}
	#case .lead_group .text_area p{margin: 0 auto ;padding: 0 0 0 0px;font-size:16px;letter-spacing: 1px;font-weight:600;}
	
	
	#case .list_group{position: relative;width:80%;margin: 0 auto;display: flex;flex-wrap: wrap;align-items: stretch;gap: 50px 4%;}
	
	#case .list_group .unit{width: 48%;padding:0 30px 20px 30px;box-sizing: border-box;background: white;border-radius: 10px;box-shadow:0 0 10px 5px #f2f2f2;}
	
	#case .list_group .unit:nth-child(odd){transform: translateY(80px);opacity: 0; transition: all .5s ease-in-out 0.8s; }
	#case .list_group .unit:nth-child(odd).active{	opacity: 1;transform: translateY(50px); }
	
	#case .list_group .unit:nth-child(even){transform: translateY(130px);opacity: 0; transition: all .5s ease-in-out 1.2s;}
	#case .list_group .unit:nth-child(even).active{	opacity: 1;transform: translateY(100px); }
	
	#case .list_group .unit .name{position: relative;margin: 0 auto 10px auto;padding: 30px 0 0 0px;font-size:22px;letter-spacing: 1px;color: #072853;font-weight: 700}
	#case .list_group .unit .name::before{content:'';position: absolute;top:0%;left:0%;width: 5px;height: 20px;background:linear-gradient(0deg, #69c8ff, #6c7dff);}
	#case .list_group .unit p{margin: 0 auto 20px auto;padding: 0 0 0 0px;font-size:16px;letter-spacing: 1px;line-height: 1.5}
	#case .list_group .unit .category{margin: 0 ;padding:5px 20px;font-size:14px;letter-spacing: 0px;background:linear-gradient(0deg, #34aeff, #4985ff);color: white;font-weight: 600;border-radius: 30px}		
	
	/*CTA（下部）*/
	#cta02{padding:100px 0; background:#D1D1D1;width: 100%;background: url("../img/cta_bg_image.jpg") no-repeat;background-position: 50% 50%;background-size: cover;}
	
	#cta02 .cta_area2{position: relative;width: 70%;max-width: 1200px;min-height: 300px;/*aspect-ratio:5.8/1;*/margin: 0px auto 0px auto;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 30px; ;border: 2px solid white;border-radius: 20px;background:linear-gradient(0deg, #c8fe3e, #faff57)}
	#cta02 .cta_area2::before{position: absolute;bottom:70%;right:1%;content: '';background:url("../img/cta_memo.png") no-repeat;background-position: 50% 50%;background-size: 60% auto; width:30%; height:60%;}
	
	#cta02 .cta_area2 .text_area2{position: relative;width: 100%;display: flex;align-items: center;border-radius: 20px;margin-top: 75px}
	#cta02 .cta_area2 .text_area2::before{position: absolute;bottom:0%;right:60%;content: '';background:url("../img/cta_illustration02.png") no-repeat;background-position: 0% 100%;background-size: auto 95%; width:39%; height:180%;}
	
	#cta02 .cta_area2 .text_area2 .inner2{width: 70%;margin: 0 5% 0 auto;text-align: center;}
	#cta02 .cta_area2 .text_area2 .inner2 h3{color:#242433;font-size: clamp(26px, 3.0vw, 30px);font-weight:800;margin: 0 auto 10px auto;padding: 0px 0 5px 0;letter-spacing: 2px;border-bottom: 1px solid #1736cb}
	#cta02 .cta_area2 .text_area2 .inner2 .sub2{color:#242433;font-size: clamp(20px, 2.2vw, 28px);font-weight:800;margin: 0 auto 0px auto;padding: 0px 0;letter-spacing: 1px;line-height: 1.4}
	#cta02 .cta_area2 .text_area2 .inner2 .sub2 span{display: block;font-size: clamp(20px, 1.2vw, 22px);}	
	

	#cta02 .cta_area2 .banner_area2 {display: flex;justify-content: center;align-items: center;width: 100%;height: 120px;margin-top: -20px;}
	
	#cta02 .cta_area2 .banner_area2 a{position:relative;display:inline-block;width: auto;margin: 0 auto;padding: 25px 100px;background:linear-gradient(0deg, #1736cb, #1d63d8);border-radius: 50px; color: white;font-size: clamp(20px, 1.8vw, 26px);font-weight:600;letter-spacing:2px;text-align: center;text-decoration: none; z-index:0;}
	#cta02 .cta_area2 .banner_area2 a:before{  content:"";  width:100%;  height:100%;  position:absolute;  z-index:-1;  top: 0;left:0;border-radius: 50px;  transition:0.5s;background:linear-gradient(0deg, #0064dc, #0095ff);}
	#cta02 .cta_area2 .banner_area2 a:after{  content:"";  width:100%;  height:100%;  position:absolute;  z-index:-2; top: 0; left:0;  border-radius: 50px;background:linear-gradient(#ffa20f,#ffbf00);}
	#cta02 .cta_area2 .banner_area2 a:hover:before{  opacity:0;}
	#cta02 .cta_area2 .banner_area2 a span{position: relative;padding-left: 20px}
	#cta02 .cta_area2 .banner_area2 a span::before{position: absolute;top: 50%;transform: translateY(-50%);right:95%;content: '';width: 10%;height: 80px;background: url("../img/cta_icon_diagnosis.png") no-repeat;background-position: 50% 50%;background-size: 100% auto}
}

@media (max-width: 700px) {
	/*ファーストビュー*/
	#fv{width: 100%;margin: 0 auto;}
	#fv .wrapper{width: 100%;background: url("../img/fv_photo.jpg") no-repeat;background-size:auto 80% ;background-position:50% 0%;}
	#fv .wrapper .photo_area{display: none}
	#fv .wrapper .shape_area{display: none}
	
	#fv .wrapper .container_primary{width: 100%;height: 100%;margin: 0 auto;}
	
	#fv .wrapper .container_primary .message{width: 85%;margin:0 auto 20px auto;padding: 110px 0 0 0 }
	#fv .wrapper .container_primary .message .bubble{position:relative;background:linear-gradient(90deg, #1903bd, #008dff);text-align:center;font-size: clamp(14px, 0.8vw, 17px);letter-spacing: 0px;color: white;font-weight: 700;padding: 5px 10px;margin: 0 auto 10px auto}
	#fv .wrapper .container_primary .message .bubble::before{position: absolute;top: 100%;left: 50%;transform: translateX(-50%);content: '';background:linear-gradient(90deg, #1903bd, #008dff);height: calc(tan(40deg) * 30px / 2);  width: 30px; clip-path: polygon(0 0, 100% 0, 50% 100%);}
	#fv .wrapper .container_primary .message h1{width: 100%;margin: 0 auto 0px auto;padding: 0}
	#fv .wrapper .container_primary .message h1 img{width: 100%}
	#fv .wrapper .container_primary .message h2{margin: 0 auto 10px auto;padding: 0;font-size: clamp(22px, 2.0vw, 38px);letter-spacing: 0px;font-weight: 700;text-align: center}
	#fv .wrapper .container_primary .message h2 span{color: #0d47dd}
	#fv .wrapper .container_primary .message p{width: 100%;margin: 0 auto;padding: 0;font-size: clamp(14px,0.9vw, 16px);letter-spacing: 0px;font-weight: 600;line-height: 1.5}
	
	#fv .wrapper .container_primary .product{width: 100%;margin: 0 auto;padding: 0 0 50px 0;background:url("../img/fv_shape_sp.png") no-repeat;background-size:100% 80%;background-position: 50% 100%}
	#fv .wrapper .container_primary .product figure{margin: 0 auto 20px auto;padding: 0;width: 18%;min-width: 120px}
	#fv .wrapper .container_primary .product figure img{width: 100%}
	#fv .wrapper .container_primary .product .caption{width:80%;margin: 0 auto 0px auto;}	
	#fv .wrapper .container_primary .product .caption .inner{padding: 20px 20px;color: white;text-align: center;border-radius: 5px;background:linear-gradient(0deg, #1903bd, #0054ff);box-shadow: 0px 0px 15px 0px rgba(27, 20, 100, 1.0);}
	#fv .wrapper .container_primary .product .caption .inner .sub{width: 30%;min-width: 200px;border: 1px solid white;margin: 0 auto 10px auto;padding: 5px 0;font-size: clamp(12px, 0.9vw, 14px);font-weight:600;letter-spacing:1px;}
	#fv .wrapper .container_primary .product .caption .inner h2{margin: 0 auto 10px auto;padding: 0;font-size: clamp(16px, 0.8vw, 20px);letter-spacing:0px;line-height: 1.2}
	#fv .wrapper .container_primary .product .caption .inner h2 span{display:block;font-size: clamp(16px, 1.2vw, 24px);}
	#fv .wrapper .container_primary .product .caption .inner .note{margin: 0;padding: 0 0 0 14px;font-size: clamp(10px, 0.6vw, 15px);letter-spacing:0px;line-height: 1.4;}
	
	#fv .wrapper .container_primary .cta_fv{display:none;}
	
	#fv .wrapper .container_primary .cta_fv_sp{background:#f6ff00;width: 100%;margin: 0 auto;}	
	#fv .wrapper .container_primary .cta_fv_sp .inner{}
	#fv .wrapper .container_primary .cta_fv_sp .inner .text_area{position: relative;background:linear-gradient(0deg, #c8fe3e, #faff57);padding: 16px 0}
	#fv .wrapper .container_primary .cta_fv_sp .inner .text_area::before{position: absolute;bottom: 10%;left: 80%;content: '';width: 15%;height: 150px;background: url("../img/cta_memo.png") no-repeat;background-position: 50% 50%;background-size: 100% auto;}
	#fv .wrapper .container_primary .cta_fv_sp .inner .text_area::after{position: absolute;top:-10%;left:8%;content: '';width: 12%;height: 100px;background:url("../img/cta_illustration01.png") no-repeat;background-position: 50% 0%;background-size: 100% auto}
	#fv .wrapper .container_primary .cta_fv_sp .inner .text_area p{margin:0;padding: 0;text-align: center;font-size: clamp(18px, 2.8vw, 22px);font-weight: 700;line-height: 1.7}
	#fv .wrapper .container_primary .cta_fv_sp .inner .text_area p span{display:block;font-size: clamp(14px, 1.8vw, 18px);}
		
	#fv .wrapper .container_primary .cta_fv_sp .inner .banner_area{background: url("../img/cta_bg_image.jpg") no-repeat;background-position: 50% 50%;background-size: cover;padding: 20px 0;}
	
	#fv .wrapper .container_primary .cta_fv_sp .inner .banner_area a{position: relative;display: block;width:80% ; margin: 0 auto 5px auto;padding: 20px 0px;border-radius: 50px; color: white;font-size: clamp(15px, 0.8vw, 20px);font-weight:600;letter-spacing:0px;text-align: center;text-decoration: none; z-index:0;}	
	#fv .wrapper .container_primary .cta_fv_sp .inner .banner_area a::before{  content:"";  width:100%;  height:100%;  position:absolute;  z-index:-1;  top: 0;left:0;border-radius: 50px;  transition:0.5s;background:linear-gradient(0deg, #1736cb, #1d63d8);}
	#fv .wrapper .container_primary .cta_fv_sp .inner .banner_area a::after{  content:"";  width:100%;  height:100%;  position:absolute;  z-index:-2; top: 0; left:0;  border-radius: 50px;background:linear-gradient(#ffa20f,#ffbf00);}
	#fv .wrapper .container_primary .cta_fv_sp .inner .banner_area a:hover:before{  opacity:0;}
	
	#fv .wrapper .container_primary .cta_fv_sp .inner .banner_area a span{position: relative;padding-left: 20px}
	#fv .wrapper .container_primary .cta_fv_sp .inner .banner_area a span.diagnosis::before{position: absolute;top: 50%;transform: translateY(-50%);right:95%;content: '';width: 8%;height: 80px;background: url("../img/cta_icon_diagnosis.png") no-repeat;background-position: 50% 50%;background-size: 100% auto}
	#fv .wrapper .container_primary .cta_fv_sp .inner .banner_area a span.case::before{position: absolute;top: 50%;transform: translateY(-50%);right:95%;content: '';width: 8%;height: 80px;background: url("../img/cta_icon_case_study.png") no-repeat;background-position: 50% 50%;background-size: 100% auto}
	
	/*お悩み*/
	#problem{background:linear-gradient(0deg, #ffffff, #d1d5d6);padding: 30px 0}
	#problem .wrapper{position: relative;width: 100%;margin: 0 auto;}
	#problem .wrapper .shape01{position: absolute;top: 5%;left: 10%;width: 40%;}
	#problem .wrapper .shape01 img{width:100%;}
	
	#problem .wrapper .shape02{position: absolute;top: 20%;right:10%;width:40%;}
	#problem .wrapper .shape02 img{width:100%;}
	
	#problem .wrapper .container_primary{width: 100%;position: relative}
	
	
	#problem .wrapper .container_primary .bubble{position: relative;opacity: 0; transform: translateY(-20px);  transition: all .5s ease-in-out 0.5s;width: 80%;margin: 0 auto 20px auto; background: white;border-radius: 50px;box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.35);}	
	#problem .wrapper .container_primary .bubble::before{position: absolute;top: 100%;left: 50%;transform: translateX(-50%);content: '';background:white;  height: calc(tan(40deg) * 20px / 2);  width: 20px; clip-path: polygon(0 0, 100% 0, 50% 100%);}
	#problem .wrapper .container_primary .bubble.active{	opacity: 1;		transform: translateY(0);    }
	#problem .wrapper .container_primary .bubble h3{text-align: center;padding: 15px 0;margin: 0;color: #4d4c6b;font-size: clamp(14px, 0.8vw, 16px);letter-spacing: 0px;line-height: 1;opacity: 0;  clip-path: inset(100% 0 0 0);  transition: clip-path 1s ease-in-out 0.8s, opacity 1s ease-in-out;}
	#problem .wrapper .container_primary .bubble h3.active {  opacity: 1;  clip-path: inset(0 0 0 0);}
	
	#problem .wrapper .container_primary figure{width: 35%;margin: 0 auto 10px auto}
	#problem .wrapper .container_primary figure img{width:100%;}
	
	#problem .wrapper .container_primary .word{background:linear-gradient(0deg, #5987ab, #86aabb);width:70%;margin: 0 auto 10px auto;color: white;font-size: clamp(13px, 0.6vw, 16px);letter-spacing: 0px;line-height: 1;font-weight: 500;padding: 16px 10px;text-align: center;}
	
	#problem .wrapper .container_primary .word01{border-radius: 30px 30px 30px 0px;opacity: 0; transition: all .2s ease-in-out 0.9s;transform: translateX(50px);}
	#problem .wrapper .container_primary .word01.active{opacity:1;transform: translateX(0px); }	
	
	#problem .wrapper .container_primary .word02{border-radius: 30px 30px 0 30px;opacity: 0; transition: all .2s ease-in-out 0.9s;transform: translateX(-50px);}
	#problem .wrapper .container_primary .word02.active{opacity:1;transform: translateX(0px);}
	
	#problem .wrapper .container_primary .word03{border-radius: 30px 30px 30px 0;opacity: 0; transition: all .2s ease-in-out 0.9s;transform: translateX(50px);}
	#problem .wrapper .container_primary .word03.active{opacity:1;transform: translateX(0px);}
	
	#problem .wrapper .container_primary .word04{border-radius: 30px 30px 0 30px;opacity: 0; transition: all .2s ease-in-out 0.9s;transform: translateX(-50px);}
	#problem .wrapper .container_primary .word04.active{opacity:1;transform: translateX(0px);}
	
	#problem .wrapper .container_primary .word05{border-radius: 30px 30px 30px 0;opacity: 0; transition: all .2s ease-in-out 0.9s;transform: translateX(50px);}
	#problem .wrapper .container_primary .word05.active{opacity:1;transform: translateX(0px);}
	
	#problem .wrapper .container_primary .word06{border-radius: 30px 30px 0 30px;opacity: 0; transition: all .2s ease-in-out 0.9s;transform: translateX(-50px);}
	#problem .wrapper .container_primary .word06.active{opacity:1;transform: translateX(0px);}
	
	#problem .wrapper .container_primary .word span{opacity: 0;  clip-path: inset(100% 0 0 0);  transition: clip-path 0.5s ease-in-out 1.3s, opacity 1s ease-in-out;}
	#problem .wrapper .container_primary .word span.active {  opacity: 1;  clip-path: inset(0 0 0 0);}	
	
	
	/*JCSの紹介*/
	#introduction{position: relative;padding: 50px 0 50px 0;	background: url(../img/introduction_bg.png) , -moz-linear-gradient(90deg, #1903bd, #008dff);  background:url(../img/introduction_bg.png) , -webkit-linear-gradient(90deg, #1903bd, #008dff);background-repeat: no-repeat;	background-position: 50% 100%;background-size:100% auto;	}	
	
	#introduction::before{ position: absolute;top: 0%;left:50%;transform: translateX(-50%);content: '';width:30%;margin:0 auto;background:white;height: 0;clip-path: polygon(0 0, 100% 0, 50% 0);transition: height 0.8s ease 1.2s;}
	#introduction.active::before{height: calc(tan(40deg) * 80px / 2);  clip-path: polygon(0 0, 100% 0, 50% 100%); }
	
	#introduction .container{position: relative;width:95%;margin: 0px auto 0px auto; padding: 0px 0 20px 0}
	#introduction .container::before{position: absolute;top: 2%;left:0%;content: '';width: 100%;height: 100%;border: 2px solid #7bcbff;border-radius: 10px;transform: scaleY(0);    transform-origin: top;  transition: transform 0.5s ease 1.6s; }
	#introduction .container.active::before {  transform: scaleY(1);  }
	
	#introduction .container .title_area{position: relative;width: 94%;margin: 0 auto;padding:14px 0;background: white;border-radius:5px;}
	#introduction .container .title_area::before{/*position: absolute;top: -20%;right: -3%;content: '';width: 30%;height: 200px;background: url("../img/introduction_illustration.png") no-repeat;background-position: 50% 50%;background-size: 100% auto*/}
	#introduction .container .title_area .title{width:100%;margin: 0 auto;position:relative;overflow: hidden}
	#introduction .container .title_area .title::before{ content: "";  position: absolute; bottom: 0%;left: 0%;  width:100%;  height: 40%;background:linear-gradient(90deg, #ffff93, #ffff00);transition: all .3s linear 1.9s; transform: translateX(-100%);z-index: 0}
	#introduction .container .title_area .title.active::before{transform: translateX(0%);}
	#introduction .container .title_area h3{position:relative;margin: 0 auto;padding: 0;text-align: center;color: #0044d7;font-size: clamp(15px, 1.0vw,20px);letter-spacing: 0px; opacity: 0;  clip-path: inset(100% 0 0 0);  transition: clip-path 1s ease-in-out 2.2s, opacity 1s ease-in-out;}
	#introduction .container .title_area h3.active {  opacity: 1;  clip-path: inset(0 0 0 0);}
	
	#introduction .container .inner{width: 100%;margin: 20px auto 0 auto;}
	#introduction .container .inner figure{width: 40%;margin: 0px auto 0 auto;}
	#introduction .container .inner figure img{width: 100%;opacity: 0; transition: all .3s linear 1.5s; transform: scale(0.8);}
	#introduction .container .inner figure img.active{opacity: 1;  transform: scale(1); 	}
	
	#introduction .container .inner .text_area{width: 90%;margin: 0px auto 0 auto;color: white}
	#introduction .container .inner .text_area .sub_title{display: inline-block;margin: 0 auto 10px 0;padding:6px 20px;border: 1px solid #fffff3;text-align: center;border-radius: 50px;font-size: clamp(14px, 0.5vw,16px);letter-spacing: 0px;}
	#introduction .container .inner .text_area h4{margin: 0 auto 10px auto;padding:0px 0;font-size: clamp(16px, 1.5vw,22px);letter-spacing: 0px;line-height:1.5;}
	#introduction .container .inner .text_area .note{font-size: 12px;letter-spacing: 0px;margin: 0 auto 30px auto;}
	
	#introduction .container .inner .text_area .attention_area{font-size: clamp(18px,1.8vw,22px);letter-spacing: 0px;line-height:1;font-weight: 700;margin: 0 auto 20px auto;color: #00326d}
	
	#introduction .container .inner .text_area .attention_area .first{display: inline-block;position:relative;overflow: hidden}
	#introduction .container .inner .text_area .attention_area .first::before{content:"";position:absolute;bottom:0;left:0;width:100%;height:100%;background:linear-gradient(90deg, #ffff93, #ffff00);transition:all .6s linear 1.7s; transform:translateX(-100%);z-index:0}
	#introduction .container .inner .text_area .attention_area .first.active::before{transform: translateX(0%);}
	#introduction .container .inner .text_area .attention_area .first span{display: block;position: relative;padding:10px 10px ; opacity: 0;  clip-path: inset(100% 0 0 0);  transition: clip-path 1s ease-in-out 1.8s, opacity 1s ease-in-out;}
	#introduction .container .inner .text_area .attention_area .first span.active {  opacity: 1;  clip-path: inset(0 0 0 0);}
	
	
	#introduction .container .inner .text_area .attention_area .second{display: inline-block;position:relative;overflow: hidden}
	#introduction .container .inner .text_area .attention_area .second::before{content:"";position:absolute;bottom:0;left:0;width:100%;height:100%;background:linear-gradient(90deg, #ffff93, #ffff00);transition:all .6s linear 1.8s; transform:translateX(-100%);z-index:0}
	#introduction .container .inner .text_area .attention_area .second.active::before{transform: translateX(0%);}
	#introduction .container .inner .text_area .attention_area .second span{display: block;position: relative;padding: 10px 10px ; opacity: 0;  clip-path: inset(100% 0 0 0);  transition: clip-path 1s ease-in-out 1.8s, opacity 1s ease-in-out;}
	#introduction .container .inner .text_area .attention_area .second span.active {  opacity: 1;  clip-path: inset(0 0 0 0);}
	
	#introduction .container .inner .text_area .attention_area .third{display: inline-block;position:relative;overflow: hidden}
	#introduction .container .inner .text_area .attention_area .third::before{content:"";position:absolute;bottom:0;left:0;width:100%;height:100%;background:linear-gradient(90deg, #ffff93, #ffff00);transition:all .6s linear 1.9s; transform:translateX(-101%);z-index:0}
	#introduction .container .inner .text_area .attention_area .third.active::before{transform: translateX(0%);}
	#introduction .container .inner .text_area .attention_area .third span{display: block;position: relative;padding: 10px 10px ; opacity: 0;  clip-path: inset(100% 0 0 0);  transition: clip-path 1s ease-in-out 1.8s, opacity 1s ease-in-out;}
	#introduction .container .inner .text_area .attention_area .third span.active {  opacity: 1;  clip-path: inset(0 0 0 0);}
	
	#introduction .container .inner .text_area p{margin: 0 auto ;padding:0px 0;font-size: 14px;letter-spacing: 0px;line-height:1.7;}
	
	/*JCSの解説*/
	#explanation{padding:30px 0;}
	#explanation .title_area{width: 100%;margin: 0px auto 20px auto;}	
	#explanation .title_area .bubble{position: relative;width:70%;margin: 0px auto 20px auto;padding:6px 0;background: #f8f641;border-radius: 30px;text-align: center;font-size: clamp(13px, 0.8vw,16px);letter-spacing:0;font-weight:600;line-height: 1;opacity: 0; transition: all .5s ease-in-out 0.2s; transform: translateY(-30px); }
	#explanation .title_area .bubble::before{position: absolute;top: 100%;left: 50%;transform: translateX(-50%);content: '';background:#f8f641;  height: calc(tan(60deg) * 20px / 2);  width: 20px; clip-path: polygon(0 0, 100% 0, 50% 100%);}
	#explanation .title_area .bubble.active{	opacity: 1;		transform: translateY(0);     }
	
	#explanation .title_area .bubble span{  opacity: 0;  clip-path: inset(100% 0 0 0);  transition: clip-path 1s ease-in-out 0.5s/*←開始*/, opacity 1s ease-in-out;}
	#explanation .title_area .bubble span.active {  opacity: 1;  clip-path: inset(0 0 0 0);}
	
	#explanation .title_area h3{position: relative;margin: 0px auto 0 auto;padding:0;text-align: center;font-size: clamp(16px, 2.2vw,24px);letter-spacing: 1px;color: #0044a1;}
	#explanation .title_area h3::before{position: absolute;top: -100%;left: 85%;content: '';width:8%;height: 80px;background: url("../img/explanation_illustration.png") no-repeat;background-position: 50% 0%;background-size: 100% auto}
	
	
	#explanation .fee_calculation{width: 90%;margin: 0px auto 40px auto;padding:20px 0;background:linear-gradient(0deg, #1736cb, #1d63d8);border-radius: 10px}
	#explanation .fee_calculation h4{margin: 0px auto 10px auto;padding:0;text-align: center;font-size: clamp(16px, 1.2vw,20px);letter-spacing: 0px;color: white;}
	#explanation .fee_calculation .inner{margin: 0px auto 0 auto;padding: 0 20px;display: flex;justify-content:center;font-size: clamp(14px, 0.8vw,18px);letter-spacing: 0px;line-height: 1.2;text-align: center;}
	#explanation .fee_calculation .inner .kw{border: 2px dashed #ffff4c;padding:18px 10px 16px 10px;margin: 0 20px 0 0px;color: #ffff4c;border-radius: 10px;}
	#explanation .fee_calculation .inner .value_normal{position: relative;border: 1px solid #ffffff;padding: 20px 10px;color: #ffffff;border-radius: 10px}
	#explanation .fee_calculation .inner .value_normal:nth-of-type(2){margin: 0 20px 0 0;}
	#explanation .fee_calculation .inner .value_normal::before{position: absolute;top: 50%;transform: translateY(-50%);right: 106%;content: '×';font-size: clamp(18px, 1.8vw,28px);}
	
	#explanation .contract_type{position: relative;width: 100%;margin: 0px auto 50px auto;padding: 20px 0 20px 0;background: #e3f6fc;border-radius: 10px}
	
	#explanation .contract_type::before{position:absolute;bottom:95%;left:25%;content:'';width:28%;max-width: 250px;height:100px;background:url("../img/explanation_arrow.png") no-repeat;background-position:50% 50%;background-size:100% auto;opacity:0;clip-path: inset(0 0 100% 0);  transition: clip-path 0.5s ease-in-out 1.6s/*←開始*/, opacity 1s ease-in-out;}
	#explanation .contract_type.active::before {  opacity: 1;  clip-path: inset(0 0 0 0);}	
	
	#explanation .contract_type::after{position:absolute;top:100%;left:50%;transform: translateX(-50%);content:''; width:30%;max-width: 500px;background:linear-gradient(0deg, #8fe1fc, #e3f6fc);height: 0;clip-path: polygon(0 0, 100% 0, 50% 0);transition: height 0.4s ease 2.9s; }	
	#explanation .contract_type.active::after{height: calc(tan(40deg) * 80px / 2);  clip-path: polygon(0 0, 100% 0, 50% 100%); }
	
	#explanation .contract_type h5{width:60%;margin:0px auto 10px auto;padding:0px 0 0 0;text-align:center;font-size: clamp(16px, 1.2vw,20px);letter-spacing: 0px;color: #003e99;background: url("../img/icon_light_bulb.png") no-repeat;background-position: 0 0%;background-size: auto 100%}
	#explanation .contract_type .inner{width:85%;margin: 0px auto 0 auto;display: flex;justify-content: space-between}
	#explanation .contract_type .inner .detail{width: 49%;background: white}
	#explanation .contract_type .inner .detail .name{text-align: center;font-size: clamp(16px, 1.0vw,18px);color: white;letter-spacing: 0px;padding: 10px 0;font-weight: 600;}
	#explanation .contract_type .inner .type01 .name{background: #999999}
	#explanation .contract_type .inner .type02 .name{background:linear-gradient(0deg, #1736cb, #1d63d8);}
	#explanation .contract_type .inner .detail .text{width: 80%;margin: 20px auto 20px auto;font-size:14px;letter-spacing: 0px;line-height: 1.5;font-weight: 500;}
	#explanation .contract_type .inner .detail .text span{color: #0075d6;}
	#explanation .contract_type .inner .detail .note{position: relative;width: 98%;margin: 0 auto 20px auto;padding: 6px 10px;box-sizing: border-box;text-align: center;font-size:11px;color: white;letter-spacing: 0px;font-weight: 600;border-radius: 30px}
	#explanation .contract_type .inner .type01 .note{background: #4d4d4d;}
	#explanation .contract_type .inner .type02 .note{background:linear-gradient(0deg, #ff9747, #ffba49);}
	#explanation .contract_type .inner .type01 .note::before{position: absolute;bottom: 100%;left: 50%;transform: translateX(-50%);content: '';background:#4d4d4d;  height: calc(tan(50deg) * 20px / 2);  width: 20px; clip-path: polygon(50% 0, 100% 100%, 0 100%);}
	#explanation .contract_type .inner .type02 .note::before{position: absolute;bottom: 100%;left: 50%;transform: translateX(-50%);content: '';background:#ffba49;  height: calc(tan(50deg) * 20px / 2);  width: 20px; clip-path: polygon(50% 0, 100% 100%, 0 100%);}
	
	#explanation .comparison_image{/*position: relative;*/width: 90%;margin: 0px auto 0 auto;}
	#explanation .comparison_image::before{/*position: absolute;top: 5%;left:0%;content: '';width: 100%;height: 100%;border: 2px solid #7bcbff;border-radius: 10px*/}
	
	#explanation .comparison_image .title_area{position: relative;width: 70%;margin: 0 auto 20px auto;padding:6px 20px;background:linear-gradient(0deg, #1736cb, #1d63d8);border-radius: 10px;}
	#explanation .comparison_image .title_area h6{margin: 0 auto;padding: 0;text-align: center;color: white;font-size: clamp(16px, 1.0vw,20px);letter-spacing: 0px; display: flex;  justify-content: center;  align-items: center;  flex-wrap: wrap}
	
	#explanation .comparison_image .title_area h6 .attention{display: inline-block;position:relative;overflow: hidden;color: #2e3192;margin: 0 5px;padding: 0;}
	#explanation .comparison_image .title_area h6 .attention::before{display: block;content:"";position:absolute;top:0px;left:0;width:100%;height:100%;background:linear-gradient(90deg, #ffff93, #ffff00);transition:all .3s linear 2.0s; transform:translateX(-100%);z-index:0;line-height: 1}
	#explanation .comparison_image .title_area h6 .attention.active::before{transform: translateX(0%);}

	#explanation .comparison_image .title_area h6 .attention span{display: block;position:relative;padding: 0px 10px;;margin: 0 ; opacity: 0;  clip-path: inset(100% 0 0 0);  transition: clip-path 1s ease-in-out 2.3s, opacity 1s ease-in-out;}
	#explanation .comparison_image .title_area h6 .attention span.active {  opacity: 1;  clip-path: inset(0 0 0 0);}
	
	
	#explanation .comparison_image .note{margin: 0 auto 20px auto;text-align: center;color: #00467a;font-size:14px;letter-spacing: 0px;font-weight: 500;}
	#explanation .comparison_image .note span{border-bottom:1px solid #1736cb;}
	
	#explanation .comparison_image .inner .name_area{width:100%;margin: 0px auto 20px auto;display: flex;justify-content:space-between;}
	
	#explanation .comparison_image .inner .name_area .bubble{position: relative;width:42%;padding:3px 10px;box-sizing: border-box;border-radius: 30px;text-align: center;font-size: clamp(14px, 0.6vw,16px);letter-spacing: 1px;font-weight:600;color: white}	
	#explanation .comparison_image .inner .name_area .type01{background: #4d4d4d;margin-left: 0px ;}
	#explanation .comparison_image .inner .name_area .type02{background:linear-gradient(0deg, #ff9747, #ffba49);margin-right: 0px ;}
	#explanation .comparison_image .inner .name_area .type01::before{position: absolute;top:100%;left:50%;transform:translateX(-50%);content: '';background:#4d4d4d;  height: calc(tan(50deg) * 20px / 2);  width: 20px;clip-path: polygon(0 0, 100% 0, 50% 100%);}
	#explanation .comparison_image .inner .name_area .type02::before{position: absolute;top:100%;left:50%;transform:translateX(-50%);content: '';background:#ff9747;  height: calc(tan(50deg) * 20px / 2);  width: 20px;clip-path: polygon(0 0, 100% 0, 50% 100%);}
	
	#explanation .comparison_image .inner figure{width: 100%;margin: 0 auto}
	#explanation .comparison_image .inner figure img{width: 100%;}
	
	/*CTA（中間）*/
	#cta01{position: relative;background:linear-gradient(0deg, #302eff, #00aeff);padding:50px 0 30px 0;}
	
	#cta01::after{position:absolute;top:0%;left:50%;transform: translateX(-50%);content:''; width:30%;background:white;height: 0;clip-path: polygon(0 0, 100% 0, 50% 0);transition: height 0.4s ease 0.2s; }	
	#cta01.active::after{height: calc(tan(40deg) * 80px / 2);  clip-path: polygon(0 0, 100% 0, 50% 100%); }
	
	#cta01 .bubble_area{width:80%;margin: 0px auto 20px auto;}
	#cta01 .bubble_area .first{position: relative;background: white;margin: 0 auto 40px auto;padding: 10px 20px;border-radius: 50px;text-align: center;font-size: clamp(14px, 0.6vw,16px);letter-spacing:0;font-weight:700;line-height:1.2;color:#00478e;}
	#cta01 .bubble_area .first::before{position: absolute;top:80%;left:50%;content: '';background:white; width: 40px; height:20px;border-radius: 50%;}
	#cta01 .bubble_area .first::after{position: absolute;top:140%;left:50%;transform:translateX(-50%);content: '';background:white; width: 20px; height:10px;border-radius: 50%;}
	#cta01 .bubble_area .second{text-align: center;color: white;font-size: clamp(14px, 0.6vw,16px);font-weight:600;} 

	#cta01 .lead_area{position: relative;width:70%;margin: 0px auto 10px auto;opacity: 0; transition: all .3s linear 1.2s/*←開始時間*/; transform: scale(0.6);}
	#cta01 .lead_area.active{opacity: 1;  transform: scale(1); 	}

	#cta01 .lead_area::before{position: absolute;top:50%;transform: translateY(-50%) skewX(-10deg);left:108%;content: '';background:white; width: 1px; height:80px;}
	#cta01 .lead_area::after{position: absolute;top:50%;transform: translateY(-50%) skewX(10deg);right:108%;content: '';background:white; width: 1px; height:80px;}
	#cta01 .lead_area p{text-align: center;color: white;font-size: clamp(14px, 1.0vw, 18px);font-weight:400;margin: 0 auto 10px auto;padding: 0px 0;letter-spacing: 0px;}
	#cta01 .lead_area h3{text-align: center;color: white;font-size: clamp(18px, 2.0vw, 30px);font-weight:600;margin: 0 auto 0px auto;padding: 0px 0;letter-spacing: 0px;line-height: 1.2}
	
	#cta01 .cta_area{width: 88%;margin: 0px auto 0px auto;border: 2px solid white}
	#cta01 .cta_area .text_area{position: relative;width: 100%;background:linear-gradient(0deg, #c8fe3e, #faff57);padding: 20px 0 10px 0}
	#cta01 .cta_area .text_area::before{position: absolute;bottom:0%;right:78%;content: '';background:url("../img/cta_illustration02.png") no-repeat;background-position: 50% 100%;background-size: auto 100%; width:30%; height:80%;}
	#cta01 .cta_area .text_area .inner{width: 70%;margin: 0 auto 0 auto;text-align: center;}
	#cta01 .cta_area .text_area .inner h4{color:#242433;font-size: clamp(18px, 1.2vw, 24px);font-weight:700;margin: 0 auto 10px auto;padding: 0px 0 5px 0;letter-spacing: 0px;border-bottom: 1px solid #1736cb}
	#cta01 .cta_area .text_area .inner .sub{color:#242433;font-size: clamp(16px, 1.0vw, 20px);font-weight:700;margin: 0 auto 0px auto;padding: 0px 0;letter-spacing: 0px;line-height: 1.4}
	#cta01 .cta_area .text_area .inner .sub span{display: block;font-size: clamp(13px, 0.3vw, 16px);}
	
	#cta01 .cta_area .banner_area{position: relative;width: 100%;background: url("../img/cta_bg_image.jpg") no-repeat;background-position: 50% 50%;background-size: cover;padding: 20px 0}
	#cta01 .cta_area .banner_area::before{position: absolute;bottom:80%;left:85%;content: '';background:url("../img/cta_memo.png") no-repeat;background-position: 50% 50%;background-size: 100% auto; width:18%; height:60%;}
	
	#cta01 .cta_area .banner_area a{position:relative;display:block;width: 90%;margin: 0 auto;padding: 20px 0;background:linear-gradient(0deg, #1736cb, #1d63d8);border-radius: 50px; color: white;font-size: clamp(16px, 0.8vw, 20px);font-weight:600;letter-spacing:0px;text-align: center;text-decoration: none; z-index:0;}
	
	#cta01 .cta_area .banner_area a:before{  content:"";  width:100%;  height:100%;  position:absolute;  z-index:-1;  top: 0;left:0;border-radius: 50px;  transition:0.5s;background:linear-gradient(0deg, #0064dc, #0095ff);}
	#cta01 .cta_area .banner_area a:after{  content:"";  width:100%;  height:100%;  position:absolute;  z-index:-2; top: 0; left:0;  border-radius: 50px;background:linear-gradient(#ffa20f,#ffbf00);}
	#cta01 .cta_area .banner_area a:hover:before{  opacity:0;}
	
	#cta01 .cta_area .banner_area a span{position: relative;padding-left: 20px}
	#cta01 .cta_area .banner_area a span::before{position: absolute;top: 50%;transform: translateY(-50%);right:95%;content: '';width: 10%;height: 80px;background: url("../img/cta_icon_diagnosis.png") no-repeat;background-position: 50% 50%;background-size: 100% auto}
	
	/*導入のメリット*/
	#merit{padding: 50px 0 150px 0;background: url("../img/merit_bg.jpg")no-repeat;  background-size: cover;  background-position: center;}
	#merit .container{width:85%;margin: 0px auto 0px auto;padding:50px 0 30px 0;background: linear-gradient(rgba(255,255,255,0.9),rgba(180,233,255,0.9));border-radius: 10px}
	#merit .container .title_area{width: 90%;margin: 0px auto 60px auto;opacity: 0;  clip-path: inset(100% 0 0 0);  transition: clip-path 1s ease-in-out 1.0s, opacity 1s ease-in-out;}
	#merit .container .title_area.active {  opacity: 1;  clip-path: inset(0 0 0 0);}
	#merit .container .title_area h3{margin: 0px auto 0px auto;text-align: center;font-size: 24px;padding: 0px 0;letter-spacing: 0px; }
	#merit .container .title_area p{margin: 0px auto 0px auto;text-align: center;font-size: 15px;font-weight:600;padding: 0px 0;letter-spacing: 0px;color: #0679da}	
	
	#merit .container .list_area{width: 90%;margin: 0px auto 0px auto;}	
	
	#merit .container .list_area .unit{margin: 70px auto 0px auto;}	
	
	#merit .container .list_area .unit .inner{position: relative;width: 100%; background: white;padding: 60px 0 30px 0;border-radius: 10px;box-shadow: -5px -5px 15px 5px rgba(0, 90, 255, 0.2), 5px 5px 15px 7px rgba(0, 213, 83, 0.2);z-index: 1}
	#merit .container .list_area .unit .inner::before{content: '';  position: absolute;   top: -24%;left: 50%;width: 110px;height: 55px;border-radius: 55px 55px 0 0; background:linear-gradient(90deg,rgba(0, 90, 255, 0.2),rgba(0, 213, 83, 0.2));filter: blur(10px);  transform: translateY(0px) translateX(-50%) scale(1.0);   mix-blend-mode: multiply;z-index: -2}
	
	#merit .container .list_area .unit .inner .circle{position: absolute;top: -22%;left: 50%;transform: translateX(-50%);width: 110px;height: 110px;margin: 0 auto;background:white;border-radius:55px; }
	
	#merit .container .list_area .unit .inner .icon{position: absolute;top: -18%;left: 50%;transform: translateX(-50%);width:85px;height: 85px;margin: 0 auto;background:linear-gradient(0deg, #007cff, #00b8ff);border-radius:50px;display: flex;align-items: center;text-align:center;  justify-content:center;}
	#merit .container .list_area .unit .inner .icon img{width: 60%;}
	#merit .container .list_area .unit .inner h4{margin: 0px auto 10px auto;text-align: center;font-size: 20px;padding: 0px 0;letter-spacing: 1px;color: #0074cb}
	#merit .container .list_area .unit .inner p{width: 80%;margin: 0px auto 0px auto;font-size: 13px;padding: 0px 0;letter-spacing: 0px;line-height: 1.5}
	
	
	/*導入の流れ*/
	#step{background:linear-gradient(0deg, #eaffff, #ffffff);padding: 0 0 30px 0}
	
	#step .title_area{position: relative;width: 80%;margin: 0px auto 30px auto;padding: 100px 0 0 0}
	
	#step .title_area p{position: relative;margin: 0px auto 0px auto;font-size: 18px;padding: 0px 0;letter-spacing: 0px;color: #0074cb;font-weight:600;text-align: center;opacity: 0;  clip-path: inset(100% 0 0 0);  transition: clip-path 1s ease-in-out 0.8s, opacity 1s ease-in-out;}
	#step .title_area p.active {  opacity: 1;  clip-path: inset(0 0 0 0);}
	#step .title_area h3{position: relative;margin: 0px auto 0px auto;font-size: 24px;padding: 0px 0;letter-spacing: 1px;text-align: center;opacity: 0;  clip-path: inset(100% 0 0 0);  transition: clip-path 1s ease-in-out 0.8s, opacity 1s ease-in-out;}	
	#step .title_area h3.active {  opacity: 1;  clip-path: inset(0 0 0 0);}
	
	#step .title_area .illustration{width: 70%;position: absolute;top: -110px;right: 0}
	#step .title_area .illustration img{width: 100%}
	
	#step .container{position: relative;width: 85%;margin: 0px auto 0px auto;}
	#step .container::before{position: absolute;top:0%;left:50%;transform: translateX(-50%);content: '';background:#007bea;width: 2px;height: 0%;transition: height 1.5s ease;}
	#step .container.active::before{height: 100%;transition-delay: 0.8s;}
	
	#step .container .unit{position: relative;margin: 0 auto 20px auto;padding: 20px 0 20px 0;background:white;border-radius: 10px;box-shadow:    -5px 5px 5px rgba(59, 95, 255, 0.2),   5px -5px 5px rgba(109, 193, 233, 0.2)}
	
	#step .container .unit .number{position: absolute;top: 5%;left: 15%;transform: translateX(-50%);font-size: 40px;color: #b6e9ff;font-weight: 900;}
	#step .container .unit .icon{text-align: center;border: 2px solid #007cff;border-radius: 30px;width: 60px;height: 60px;margin: 0 auto 10px auto;display: flex;align-items: center;justify-content:center;box-sizing: border-box}
	#step .container .unit .icon img{width: 60%;}
	#step .container .unit h4{margin: 0px auto 10px auto;text-align: center;font-size: clamp(17px, 1.0vw, 22px);padding: 0px 0;letter-spacing: 1px;color: #0074cb}
	#step .container .unit p{width:80%;margin: 0px auto 0px auto;font-size: 13px;padding: 0px 0;letter-spacing: 0px;line-height: 1.5}
	
	
	/*FAQ*/
	#faq{padding:30px 0 80px 0;}
	#faq h3 span{display: block;font-size: 18px;color: #3bb4ff;font-weight: 900;}
	#faq h3{padding:0px 0;margin: 0px auto 20px auto;font-size: 24px;letter-spacing: 1px;text-align: center}
	
	#faq .unit_multi{width: 90%;margin: 0 auto 10px auto;}
	
	
	#faq .unit_multi .button_title{position: relative;cursor: pointer;margin:0 auto 0px auto;padding: 0;padding:16px 0 16px 18px; border: 1px solid #4590d2;background:#faffff;border-radius: 10px;transition: all .5s ease;}
	#faq .unit_multi .button_title:hover{}
	
	#faq .unit_multi .button_title p{position: relative;width: 80%;margin: 0 auto 0px 0;padding: 0 0 0 22px;font-size:15px;letter-spacing: 1px;font-weight:500;line-height: 1.2}
	#faq .unit_multi .button_title p::before{content:'Q';position: absolute;top:50%;left:0%;transform: translateY(-50%); font-weight:600;font-size:18px;color:#4590d2;}
	
	#faq .unit_multi .button_title::before{position:absolute;top: 50%;right: 3%;transform: translateY(-50%); content:'\f067';font-family: "Font Awesome 5 Free";width:24px;height:19px;padding-top: 5px;background:#3bb4ff;color:white;text-align: center;font-weight:900;display: inline-block;font-size: 14px;border-radius:12px; transition: all .5s ease;}
	
	#faq .unit_multi .button_title.close{border: 1px solid #3bb4ff;background:#239fff;color: white}
	#faq .unit_multi .button_title.close::before{content:'\f068';background:#b6e9ff;color:#239fff;}
	#faq .unit_multi .button_title.close p::before{color: white}
	
	/*アコーディオンで現れるエリア*/
	#faq .unit_multi .accordion_area{    display: none; border: 1px solid #4590d2;background:#faffff;border-radius: 10px;margin: 3px auto 0px auto;padding: 16px 18px;box-sizing: border-box;}
	#faq .unit_multi .accordion_area p{position: relative;display: block;margin: 0 auto 0px 0;padding: 0 0 0 22px;font-size:13px;letter-spacing: 0px;color:#000;line-height: 1.5}
	#faq .unit_multi .accordion_area p::before{content:'A';position: absolute;top:50%;left:0%;transform: translateY(-50%); font-weight: 900;font-size:18px;color:#ff7c50;}
	
	
	/*導入実績*/
	#case{position: relative;padding: 0 0 30px 0;overflow: hidden;}
	
	#case .shape01{position:absolute;top: 2%;left:0%;overflow: hidden;width:40%;aspect-ratio:1.2/1;z-index: -1;}
	#case .shape01 img{width: 100%;   height: 100%;  object-fit: cover;  object-position:right center; }
	
	#case .shape02{position:absolute;top:8%;right:0%;overflow: hidden;width: 30%;aspect-ratio:2/1;z-index: -1;}
	#case .shape02 img{width: 200%;}
	
	#case .lead_group{width:90%; margin: 0 0 30px auto;}
	#case .lead_group .photo_area{width:100%;aspect-ratio:3/1;margin: 0 auto 30px auto;}
	#case .lead_group .photo_area .inner{width: 100%;height: 100%;display: flex;justify-content: space-between}
	
	#case .lead_group .photo_area .inner .photo01{width: 38%;height: 80%;border-radius: 10px;overflow: hidden}
	#case .lead_group .photo_area .inner .photo01 img{width: 100%;height: 100%;object-fit: cover}
	
	#case .lead_group .photo_area .inner .photo02{width:38%;height:80%;border-radius: 10px;overflow: hidden;margin-top: 20px}
	#case .lead_group .photo_area .inner .photo02 img{width: 100%;height: 100%;object-fit: cover}
	
	#case .lead_group .photo_area .inner .photo03{width:18%;height:80%;border-radius: 10px 0 0 10px;overflow: hidden}
	#case .lead_group .photo_area .inner .photo03 img{width: 100%;height: 100%;object-fit: cover}
	
	#case .lead_group .text_area{width:90%;margin: 0 auto 0 0;}
	#case .lead_group .text_area .eng{margin: 0 auto ;padding: 0 0 0 0px;font-size:20px;letter-spacing: 1px;font-weight:600;color: #3bb4ff}
	#case .lead_group .text_area h3{margin: 0 auto 10px auto;padding: 0 0 0 0px;font-size:24px;letter-spacing: 1px;}
	#case .lead_group .text_area p{margin: 0 auto ;padding: 0 0 0 0px;font-size:14px;letter-spacing: 0px;font-weight:400;line-height: 1.5}
	
	#case .list_group{position: relative;width:80%;margin: 0 auto;}	
	#case .list_group .unit{padding:0 20px 20px 30px;margin: 0 auto 20px auto;box-sizing: border-box;background: white;border-radius: 5px;box-shadow:0 0 10px 5px #f2f2f2;}
	
	#case .list_group .unit .name{position: relative;margin: 0 auto 10px auto;padding: 20px 0 0 0px;font-size:16px;letter-spacing: 0px;color: #072853;font-weight: 600}
	#case .list_group .unit .name::before{content:'';position: absolute;top:0%;left:0%;width: 5px;height: 15px;background:linear-gradient(0deg, #69c8ff, #6c7dff);}
	#case .list_group .unit p{margin: 0 auto 15px auto;padding: 0 0 0 0px;font-size:13px;letter-spacing:0px;line-height: 1.5}
	#case .list_group .unit .category{margin: 0 ;padding:3px 20px;font-size:12px;letter-spacing: 0px;background:linear-gradient(0deg, #34aeff, #4985ff);color: white;font-weight: 600;border-radius: 30px}	
	

	/*CTA（下部）*/
	#cta02{padding:50px 0; background:#D1D1D1;width: 100%;background: url("../img/cta_bg_image.jpg") no-repeat;background-position: 50% 50%;background-size: cover;}
	
	#cta02 .cta_area2{position: relative;width: 90%;max-width: 1200px;min-height: 100px;/*aspect-ratio:5.8/1;*/margin: 0px auto 0px auto;display: flex;flex-direction: column; 
  align-items: center;justify-content: center;gap: 20px; ;border: 2px solid white;border-radius: 20px;background:linear-gradient(0deg, #c8fe3e, #faff57)}
	#cta02 .cta_area2::before{position: absolute;bottom:75%;right:-1%;content: '';background:url("../img/cta_memo.png") no-repeat;background-position: 50% 50%;background-size: 60% auto; width:150px; height:120px;}
	
	#cta02 .cta_area2 .text_area2{position: relative;width: 100%;display: flex;align-items: center;border-radius: 18px;margin-top: 75px}
	
	#cta02 .cta_area2 .text_area2::before{position: absolute;bottom:0%;right:63%;content: '';background:url("../img/cta_illustration02.png") no-repeat;background-position: 0% 100%;background-size: auto 100%; width:38%; height:120%;}
	
	#cta02 .cta_area2 .text_area2 .inner2{width: 70%;margin: 0 5% 0 auto;text-align: center;}
	#cta02 .cta_area2 .text_area2 .inner2 h3{color:#242433;font-size: clamp(20px, 3.0vw, 40px);font-weight:800;margin: 0 auto 10px auto;padding: 0px 0 5px 0;letter-spacing: 2px;border-bottom: 1px solid #1736cb}
	#cta02 .cta_area2 .text_area2 .inner2 .sub2{color:#242433;font-size: clamp(16px, 2.2vw, 28px);font-weight:800;margin: 0 auto 0px auto;padding: 0px 0;letter-spacing: 1px;line-height: 1.4}
	#cta02 .cta_area2 .text_area2 .inner2 .sub2 span{display: block;font-size: clamp(14px, 1.2vw, 22px);}	
	

	#cta02 .cta_area2 .banner_area2 {display: flex;justify-content: center;align-items: center;width: 100%;height: 120px;margin-top: -20px;}
	
	#cta02 .cta_area2 .banner_area2 a{position:relative;display:inline-block;width: auto;margin: 0 auto;padding: 20px 55px;background:linear-gradient(0deg, #1736cb, #1d63d8);border-radius: 50px; color: white;font-size: clamp(17px, 1.8vw, 26px);font-weight:600;letter-spacing:2px;text-align: center;text-decoration: none; z-index:0;}
	#cta02 .cta_area2 .banner_area2 a:before{  content:"";  width:100%;  height:100%;  position:absolute;  z-index:-1;  top: 0;left:0;border-radius: 50px;  transition:0.5s;background:linear-gradient(0deg, #0064dc, #0095ff);}
	#cta02 .cta_area2 .banner_area2 a:after{  content:"";  width:100%;  height:100%;  position:absolute;  z-index:-2; top: 0; left:0;  border-radius: 50px;background:linear-gradient(#ffa20f,#ffbf00);}
	#cta02 .cta_area2 .banner_area2 a:hover:before{  opacity:0;}
	#cta02 .cta_area2 .banner_area2 a span{position: relative;padding-left: 20px}
	#cta02 .cta_area2 .banner_area2 a span::before{position: absolute;top: 50%;transform: translateY(-50%);right:95%;content: '';width: 10%;height: 80px;background: url("../img/cta_icon_diagnosis.png") no-repeat;background-position: 50% 50%;background-size: 100% auto}

}