@charset "utf-8";

.title_wrap{margin-bottom:80px;text-align:center;letter-spacing:-0.025em;word-break:keep-all;box-sizing:border-box;}
.title_main{line-height:1.3;font-size:var(--fs48);font-weight:700;color:var(--color-text-title);letter-spacing:inherit;}
.title_desc{margin-top:36px;font-size:var(--fs20);font-weight:500;color:var(--color-gray-49);letter-spacing:inherit;}
.title_sub{font-size:var(--fs24);font-weight:700;color:var(--color-text-title);letter-spacing:-0.025em;}
.desc_text{font-size:var(--fs16);font-weight:500;color:var(--color-gray-86);letter-spacing:-0.025em;}
.content_desc{font-weight:300;color:#474747;letter-spacing:-0.025em;}

.ani_effect{position:relative;}
.bg_gray:after{content:'';position:absolute;left:0;top:0;z-index:-1;width:100%;height:0;background-color:var(--color-gray-f8) !important;}
.bg_gray.action:after{height:100%;transition:height 1s linear;}

.card{border-radius:20px;background-color:var(--color-white);box-shadow:6px 8px 50px 0 rgba(134, 142, 150, 0.1);}


/* Visual */
#visual{padding:125px 0;width:100%;height:720px;overflow:hidden;box-sizing:border-box;}
#visual .visual_in{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:100%;/*opacity:0;visibility:hidden;*/-webkit-transition:opacity 1s ease;transition:opacity 1s ease;}
.visual_in .title_main{font-size:var(--fs56);}
.visual_swiper{position:relative;height:470px;}
.visual_swiper .img_box{position:absolute;right:0;top:0;}

.visual_in .content_wrap{overflow:hidden;display:flex;flex-direction:column;flex:1;height:100%;}
.visual_in .visual_txt{overflow:hidden;flex:1;}
/*.visual_in .visual_img{position:absolute;right:0;top:-2.5532%;overflow:hidden;height:488px;}*/
.visual_in .visual_img{position:absolute;right:0;top:-15px;overflow:hidden;height:488px;}
/*.visual_in .visual_img .img_box{height:79.6722%;max-height:486px;}*/
.visual_in .visual_img .img_box{height:486px;}
.visual_in .visual_img .img_box img{width:auto;height:100%;}
.visual_in .visual_txt .roll{height:100%;-webkit-animation:scroll 15s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;animation:scroll 15s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;}
.visual_in .visual_img .roll{height:100%;}
/*.visual_in .visual_img .roll{height:100%;-webkit-animation:scroll_img 9s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;animation:scroll_img 9s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;}*/
.visual_in .btn_wrap{height:60px;}
@keyframes scroll {
	0% {
		-webkit-transform: translateY(0px);
		transform: translateY(0px)
	}
	45% {
		-webkit-transform: translateY(0px);
		transform: translateY(0px)
	}
	50% {
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
	}
	95% {
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
	}
	100% {
		-webkit-transform: translateY(-0px);
		transform: translateY(-0px)
	}
}
/* //Visual */


/* Service */
#service01{padding:80px 0;}
#service01 .title_wrap .title_main{position:relative;display:inline-block;}
#service01 .title_wrap .title_main:after{content:'';position:absolute;left:-88px;top:-84px;z-index:-1;display:inline-block;width:161px;aspect-ratio:1/1;background:url(../images/bg_circle.png) no-repeat 50% 50% / 100%;}
#service01 .img_box{margin:0 auto;width:67%;max-width:790px;}
#service01 .img_box img{width:100%;height:auto;object-fit:cover;}

#service02 .title_wrap{margin-bottom:20px;}
.service_swiper{padding:60px 60px 160px 60px;width:94%;max-width:1300px;box-sizing:border-box;}
.service_swiper .card{display:flex;flex-direction:column;align-items:center;padding:64px 28px;/*width:calc((100% - 60px) / 4);*/height:auto;text-align:center;word-break:keep-all;box-sizing:border-box;}
.service_swiper .title_sub{margin-top:42px;}
.service_swiper .desc_text{margin-top:32px;}
.service_swiper .card:after{content:'';order:-1;width:72px;aspect-ratio:1/1;}
.service_swiper .card.platform_01:after{background:url(../images/service01.png) no-repeat 50% 50%;}
.service_swiper .card.platform_02:after{background:url(../images/service02.png) no-repeat 50% 50%;}
.service_swiper .card.platform_03:after{background:url(../images/service03.png) no-repeat 50% 50%;}
.service_swiper .card.platform_04:after{background:url(../images/service04.png) no-repeat 50% 50%;}
/* //Service */


/* Function */
.function_tab .tab_list_wrap{border-radius:20px;background-color:var(--color-gray-f8);}
.function_tab .tab_list{display:flex;width:1180px;}
.function_tab .tab_list li{min-width:0;}
.function_tab .tab_list li .tab{width:100%;min-width:0;border-color:transparent;border-radius:20px;background-color:transparent;font-size:var(--fs18);font-weight:500;color:var(--color-gray-86);letter-spacing:-0.025em;white-space:nowrap;}
.function_tab .tab_list li .tab:hover{border-color:var(--color-primary-hover);}
.function_tab .tab_list li .tab.is_active{border-color:var(--color-primary);background-color:var(--color-primary);font-weight:700;color:var(--color-white);}

.function_tab .tab_panel_wrap{margin-top:68px;}
.function_tab .panel{display:flex;align-items:center;column-gap:100px;}
.function_tab .panel .img_box{flex-shrink:0;width:49.1526%;max-width:580px;border-radius:20px;overflow:hidden;}
.function_tab .panel .img_box img{width:100%;height:auto;}
.function_tab .panel .desc_text{margin-top:8px;font-weight:300;word-break:keep-all;}
.function_tab .panel .desc_text + .title_sub{margin-top:36px;}
.function_tab .panel .btn{margin-top:36px;}
#function .content_desc{margin-top:32px;}
/* //Function */


/* Demo */
#demo .flex_box{display:flex;gap:20px;}
#demo .card{flex:1;display:flex;align-items:flex-start;gap:40px 60px;padding:46px 80px;width:100%;}
#demo .desc_text{margin:6px 0 38px;font-size:var(--fs18);font-weight:300;color:var(--color-gray-49);}
#demo .card:after{content:'';flex-shrink:0;order:-1;width:116px;aspect-ratio:29/20;}
#demo .card:nth-child(1):after{background:url(../images/demo01.png) no-repeat 50% 50% / 100%;}
#demo .card:nth-child(2):after{background:url(../images/demo02.png) no-repeat 50% 50% / 100%;}
/* //Demo */


/* Price */
#price .card{display:flex;justify-content:center;gap:125px;padding:46px;background-color:var(--color-gray-f8);box-shadow:none;/*box-shadow:3px 5px 27px 0 rgba(97, 106, 115, 0.17);*/box-sizing:border-box;}
#price .card .img_box{display:flex;flex-direction:column;align-items:flex-end;gap:24px;width:250px;}
#price .card .img_box img{display:block;width:100%;height:auto;}
#price .card .img_text{display:flex;flex-direction:column;align-items:center;letter-spacing:-0.025em;}
#price .card .img_text .label{line-height:1;font-size:var(--fs16);color:var(--color-gray-49);letter-spacing:inherit;}
#price .card .img_text .dash{position:relative;line-height:1;font-size:var(--fs28);font-weight:500;color:var(--color-gray-86);letter-spacing:inherit;}
#price .card .img_text .dash:after{content:'';position:absolute;left:0;right:0;top:50%;display:block;height:2px;background-color:var(--color-gray-86);transform:translateY(-50%);}
#price .card .img_text .dash b{font-weight:700;}
#price .card .img_text strong{margin-top:6px;line-height:1;font-size:var(--fs36);font-weight:700;letter-spacing:inherit;}
#price .card .text_box .bubble{position:relative;display:inline-block;padding:10px 14px;line-height:1;border:1px solid #dee2e6;border-radius:6px;background-color:var(--color-white);font-size:var(--fs16);font-weight:500;color:var(--color-text-title);letter-spacing:-0.025em;white-space:nowrap;}
#price .card .text_box .bubble:after{content:'';position:absolute;right:32px;bottom:-8px;display:inline-block;width:14px;aspect-ratio:1/1;border-right:1px solid #dee2e6;border-bottom:1px solid #dee2e6;background-color:inherit;transform:rotate(45deg);}
#price .card .text_box .title_sub{margin-top:12px;line-height:1.3;font-size:var(--fs36);}
#price .card .text_box .title_sub strong{font-weight:inherit;}
#price .card .text_box .desc_text{margin-top:28px;font-size:var(--fs28);font-weight:700;color:var(--color-text-title);letter-spacing:-0.025em;}
#price .card .text_box .btn{margin-top:30px;}
#price .content_desc{margin-top:16px;}
/* //Price */


/* Contact */
#contact{position:relative;}
#contact:after{content:'';position:absolute;left:0;top:0;z-index:-1;display:block;width:100%;height:100%;background:url(../images/bg_contact.jpg) no-repeat 50% 50%/cover;}

#contact .content_wrap{text-align:center;}
.content_wrap .contact_form{display:flex;gap:20px;padding-right:20px;border-top:1px solid rgba(255,255,255,.5);border-bottom:1px solid rgba(255,255,255,.5);color:var(--color-white);text-align:left;}
.content_wrap .contact_form .box{flex:1;width:100%;}
.content_wrap .contact_form dl{display:flex;align-items:center;column-gap:20px;padding:15px 20px 15px 0;box-sizing:border-box;}
.content_wrap .contact_form dl + dl{border-top:1px solid rgba(255,255,255,.5);}
.content_wrap .contact_form dl dt{flex-shrink:0;min-width:80px;line-height:1;font-size:var(--fs20);font-weight:500;letter-spacing:-0.025em; }
.content_wrap .contact_form dl dd{width:100%;height:100%;}
.content_wrap .contact_form dl.type_textarea{height:100%;}
.content_wrap .contact_form dl.type_textarea dt{align-self:flex-start;padding-top:12px;}

.content_wrap .contact_form .input{width:100%;padding:16px 18px;line-height:1;border:0;border-radius:10px;background-color:rgba(255,255,255,.2);font-size:1.4rem;color:var(--color-white);letter-spacing:-0.025em;box-sizing:border-box;}
.content_wrap .contact_form .textarea{padding:18px 20px;width:100%;height:100%;border:0;border-radius:10px;background-color:rgba(255,255,255,.2);font-size:1.4rem;color:var(--color-white);letter-spacing:-0.025em;box-sizing:border-box;}
.content_wrap .contact_form .input::placeholder, .content_wrap .contact_form .textarea::placeholder{font-weight:300;color:#ced4da;}

.content_wrap .contact_agree{display:flex;align-items:center;justify-content:center;column-gap:10px;margin-top:40px;font-size:var(--fs16);}
.content_wrap .contact_agree .agree_chk{width:16px;aspect-ratio:1/1;}
.content_wrap .contact_agree .agree_txt{line-height:1;color:var(--color-white);letter-spacing:-0.025em;}
.content_wrap .contact_agree .agree_txt .btn_agree{line-height:inherit;letter-spacing:inherit;text-decoration:underline;cursor:pointer;}
.content_wrap [type='submit']{margin-top:32px;}
/* //Contact */


/* Modal */
#modal_agree{position:fixed;left:0;top:0;z-index:1001;display:none;width:100%;height:100%;}
#modal_agree .modal_bg{position:absolute;left:0;top:0;background:rgba(0,0,0,.7);width:100%;height:100%;cursor:pointer;}
#modal_agree .modal_in{position:absolute;left:50%;top:50%;z-index:1;display:flex;flex-direction:column;padding:70px 50px;width:90%;max-width:800px;max-height:75%;border-radius:10px;background:var(--color-white);transform:translate(-50%, -50%);box-sizing:border-box;}

#modal_agree .modal_close{position:absolute;right:0;top:-50px;width:28px;aspect-ratio:1/1;border:0;background:none;}
#modal_agree .modal_close:before{content:'';position:absolute;left:0;top:5px;display:inline-block;width:36px;height:2px;background:#fff;margin:7px 0;transform:rotate(-45deg);transition:all 0.5s ease;}
#modal_agree .modal_close:after{content:'';position:absolute;left:0;top:5px;display:inline-block;width:36px;height:2px;background:#fff;margin:7px 0;transform: rotate(45deg);transition:all 0.5s ease;}

#modal_agree .modal_in .modal_header{flex-shrink:0;padding:0 0 30px;border-bottom:1px solid var(--color-gray-86);text-align:center;}
#modal_agree .modal_in .modal_header .modal_title{line-height:1.2;font-size:var(--fs28);font-weight:700;color:var(--color-text-title);letter-spacing:-0.025em;}
#modal_agree .modal_in .modal_header p{padding: 12px 0 0;font-size:var(--fs18);color:var(--color-gray-49);letter-spacing:-0.025em;}

#modal_agree .modal_in .modal_body{flex:1;overflow:hidden auto;padding:0 20px 8px;box-sizing:border-box;}
#modal_agree .modal_in .modal_body h5{padding:30px 0 10px;font-size:var(--fs20);color:var(--color-text-title);letter-spacing:-0.025em;}
#modal_agree .modal_in .modal_body .txt{padding:0 0 10px;}
#modal_agree .modal_in .modal_body dl{display:flex;}
#modal_agree .modal_in .modal_body dl dt{display:flex;justify-content:center;align-items:center;padding:10px;width:180px;border:1px solid #ddd;border-bottom:0;background:var(--color-gray-f8);font-size:var(--fs18);text-align:center;letter-spacing:-0.025em;box-sizing:border-box;}
#modal_agree .modal_in .modal_body dl.last dt{border-bottom:1px solid #ddd;}
#modal_agree .modal_in .modal_body dl dd{padding:10px;width:calc(100% - 180px);border:1px solid #ddd;border-bottom:0;border-left:0;font-size:var(--fs18);text-align:left;letter-spacing:-0.025em;box-sizing:border-box;}
#modal_agree .modal_in .modal_body dl.last dd{border-bottom:1px solid #ddd;}
/* //Modal */



/*******************************************************************************
	@media 1280px
******************************************************************************/
@media all and (max-width:1280px) {
	/* Visual */
	#visual{height:660px;}
	.visual_in .visual_img{height:32vw;}
	.visual_in .visual_img .img_box{height:100%;}
	/* //Visual */
	
	
	/* Service */
	#service01 .title_wrap .title_main:after{left:-76px;top:-72px;width:140px;}
	/* //Service */

	
	/* Function */
	.function_tab .panel{gap:80px;}
	/* //Function */

	
	/* Demo */
	#demo .flex_box{flex-wrap:wrap;}
	#demo .card{flex-direction:column;align-items:center;text-align:center;}
	/* //Demo */
}


/*******************************************************************************
	@media 980px
******************************************************************************/
@media all and (max-width:980px) {
	/* Visual */
	.visual_in .visual_img{z-index:-1;height:40vw;opacity:.5;}
	/* //Visual */


	/* Demo */
	#demo .card:after{width:100px;}
	/* //Demo */

	
	/* Price */
	#price .card{flex-direction:column;align-items:center;gap:100px;}
	#price .card .img_box{flex-direction:row;align-items:center;width:auto;}
	#price .card .img_box img{max-width:200px;}
	/* //Price */
	
	
	/* Contact */
	.content_wrap .contact_form{flex-direction:column;gap:0;padding-right:0;}
	.content_wrap .contact_form .box + .box{border-top:1px solid rgba(255,255,255,.5);}
	.content_wrap .contact_form dl{padding-right:0;}
	/* //Contact */

	
	/* Modal */
	#modal_agree .modal_in{padding:40px 25px;}
	#modal_agree .modal_close{top:-40px;}
	#modal_agree .modal_in .modal_header{padding: 0 0 20px;}
	#modal_agree .modal_in .modal_header p{padding:8px 0 0;}
	#modal_agree .modal_in .modal_body dl dt{width:140px;}
	#modal_agree .modal_in .modal_body dl dd{width:calc(100% - 140px);}
	/* //Modal */
}


/*******************************************************************************
	@media 680px
******************************************************************************/
@media all and (max-width:680px) {
	.title_wrap{margin-bottom:60px;padding:0 20px;}
	.title_desc{margin-top:32px;}

	
	/* Service */
	#service01 .title_wrap .title_main:after{left:-64px;top:-60px;width:112px;}

	#service02 .title_wrap{margin-bottom:10px;}
	.service_swiper{padding:50px 50px 60px 50px;}
	/* //Service */

	
	/* Function */
	.function_tab .tab_panel_wrap{margin-top:48px;}
	.function_tab .panel{flex-direction:column;gap:40px;}
	.function_tab .panel .img_box{width:80%;max-width:none;}
	.function_tab .panel .desc_text + .title_sub{margin-top:36px;}
	.function_tab .panel .btn{margin-top:32px;}
	#function .content_desc{margin-top:20px;}
	/* //Function */

	
	/* Demo */
	#demo .flex_box{}
	#demo .card{padding:32px 60px;}
	#demo .card:after{width:80px;}
	/* //Demo */

	
	/* Price */
	#price .card{gap:80px;}
	#price .card .img_box{flex-direction:column;}
	#price .card .text_box .desc_text{margin-top:20px;}
	#price .card .text_box .btn{margin-top:24px;}
	/* //Price */
}


/*******************************************************************************
	@media 480px
******************************************************************************/
@media all and (max-width:480px) {
	.title_main br{display:none;}

	
	/* Service */
	#service01 .title_wrap .title_main:after{left:-20px;top:-48px;width:100px;}
	/* //Service */
}