@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@charset "UTF-8";


html {
    scroll-behavior: smooth;
}

.navbar .change-color{
	/*background:transparent;*/
	background:black;
}

.li_con{margin-left:30px;}
.con_nav{
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 0 auto;
    width: 170px;
	color:#fff;
	padding:10px 0;
	font-size:14px;
}
.con_nav::before{
    transform: skewX(-25deg);
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    z-index: -1;
    background: #33b741;
}

.con_nav a{
	color:#fff;
	width:300px;
	display:inline-block;
}

.con_nav i{
	margin-right:15px;
}

#company {
    height: 112px;
    margin-top: -1px;
    pointer-events: none;
    text-align: center;
   	padding:10px 0 0;
}

#company .company_logo {
    height: 100px;
    width: 100%;
    background: url(/index/images/company.png) repeat-x 50%;
    background-size: auto 80px;
    animation: bg-complogo 150s linear infinite;
	margin-inline:auto;
}
@keyframes bg-complogo{0%{background-position:0 0}to{background-position:-3800px 0}}

.top_video{
	padding:0; 
	background:#000;
	position:relative;
}
video{
	opacity: 0.5;
}

.video_txt{
	position:absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	padding:27% 0 40%;
	text-align:center;
	color:#fff;
}
.video_txt h1{
	margin-bottom:60px;
}

/* 車検PROとは */
.about img{
	width:37%;
}
.about{position:relative;}
.about_txt_area{
	width: 55%;
    position: absolute;
    right: 0;
    padding-top: 9%;
	line-height:40px;
}
.about_txt_area h2{
	color:#12803b;
	font-size:26px;
	font-weight:600;
}

.about_txt_area p{
	margin:25px 0 0;
	line-height:30px;
}



/* 実現できること */
.point img{
	width:60%;
}

.point_txt_area{
	width:40%;
	padding: 0 5%;
	background:#12803b;
}

.point_txt_area h2{
	font-family: "Roboto", sans-serif;
	font-weight: bold;
	font-style: italic;
	color:#6da57b;
	font-size:40px;
}
.point_txt_area h3{
	color:#f9c029;
	margin: 10px 0;
	font-weight: 400;
	font-size: 26px;
}
.point_txt_area p{
	color:#fff;
	line-height:30px;
	font-weight:300;
}

.point_box{
	display: flex;
  	justify-content: space-around;
	align-items: center;
	background:#12803b;
}
		

/* 車検PROの主な機能 */
.popup_list h2{
	color:#12803b;
	font-size:22px;
	font-weight:700;
	margin:10px 0;
}

.popup_list p{
	color:#000;
}

/* popup_list */

.popup_list{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
.popup_list li{
	width:23%;
	margin-bottom:40px;
}
.popup_list li a{
	display:block;
	width:100%;
	height:100%;
}
.popup_list li img{
	width:100%;
	border-radius:3px;
}
   
/* popup_content */
.popup_bg{
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:100%;
	height:100vh;
	background:rgba(64,73,82,0.8);
	transition:0.4s;
	z-index:101;
}
.popup_content2{
	position:relative;	
}
.popup_box{		
	display:none;	
	position:fixed;
	top:50%;
	left:50%;
	transform:translateX(-50%) translateY(-50%);
	z-index:110;
	background:#fff;				
	padding:20px;	
}
.popup_box.tit{
	text-align:center;
	margin:0 auto 20px;
}
.popup_box.tit span{
	display:inline-block;
	width:127px;
	height:27px;
	color:#fff;
	font-size:14px;
	line-height:27px;
	background:#404952;
	border-radius:3px;
}
.popup_box img{
	width:100%;
	border-radius:3px;
	margin-bottom:20px;
}
.popup_box p{
	font-size:14px;
	line-height:1.8;
}
/* popup_nav */
.popup_nav.prev{
	position:absolute;
	top:50%;
	left:-40px;
	transform:translateY(-50%);
	width:30px;
	height:auto;
	z-index:130;
}
.popup_nav.next{
	position:absolute;
	top:50%;
	right:-40px;
	transform:translateY(-50%);
	width:30px;
	height:auto;
}
.popup_nav.prev.disabled,
.popup_nav.next.disabled{
	display:none;
}
/*--close btn--*/
.popup_close{
	width:30px;
	height:30px;
	cursor:pointer;
	position:absolute;
	top: -45px;
	right: 0px;
	z-index:120;
} 
.popup_close span{
	display:block;
	overflow:hidden;
	white-space:nowrap;
	text-indent:100%;
	width:30px;
	height:3px;
	background:#fff;
	position:absolute;
	left:50%;
	top:50%;
}	
.popup_close span:nth-child(1){
	transform:translate(-50%,50%) rotate(45deg);
}	
.popup_close span:nth-child(2){
	transform:translate(-50%,50%) rotate(-45deg);
}	


/*contact1*/
.contact1{
	background: url(/index/images/con_back1.png) repeat;
	padding:64px;
	position:relative;
	margin-top:20px;
}

.contact1 p{
	color:#fff;
	text-align:center;
	font-size:22px;
}


/* 導入事例 */
.case_study{
	padding: 45px 0;
    border-bottom: 1px solid black;
    height: 285px;
	width:1296px;
}
.case_study img{
	float:left;
	width:600px;
}
.case_study p{
	float: left;
    width: 600px;
    border: 1px solid black;
    padding: 13px 25px;
    margin-left: 60px;
	font-size:16px;
}
.case_study p span{
	color:#33b741;
}



/* 導入インタビュー */
.interview_top{
    position: relative;
    z-index: 1;
    text-align: center;
    color:#f9c029;
    padding: 3px;
    margin-bottom: 5px;
    width: 82px;
    margin-top: 15px;
}
.interview_top::before{
    transform: skewX(-25deg);
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background: #000;
}
.in_green{
	color:#12803b;
	font-weight:700;
	font-size:16px;
}

/* slick slider */
.slick-next:before, .slick-prev:before {
	color:#000!important;
	font-size:60px!important;
}

.sliderArea {
	max-width: 100%;
	margin: 0 auto;
	padding: 0 25px;
}
.sliderArea.w300 {
	max-width: 300px;
}
.slick-slide {
	margin: 0 15px;
}
.slick-slide img {
	width: 100%;
	height: auto;
}
.slick-prev, .slick-next {
	z-index: 1;
}
.slick-prev:before, .slick-next:before {
	color: #000;
}
.slick-slide {
	transition: all ease-in-out .3s;
	opacity: .2;
}
.slick-active {
	opacity: 1;
}
.slick-current {
	opacity: 1;
}
.thumb {
	margin: 20px 0 0;
}
.thumb .slick-slide {
	cursor: pointer;
}
.thumb .slick-slide:hover {
	opacity: .7;
}
.slick-prev {
	left:-63px!important;
	top:100px!important;
}
.slick-next {
	top:100px!important;
}


/* ご利用料金 */
.gray_back{
	background:#f2f2f2;
	overflow: auto;
	padding: 40px 0 80px;
}
.price_table{
	border:4px solid #12803b;
	width:48%;
	padding:20px 35px 35px;
	overflow: auto;
	background: #fff;
}
.price_table p{
	color:#12803b;
	font-size:26px;
	text-align:center;
	font-weight:700;
	margin-bottom:20px;
}
.price_green{
	background:#12803b;
	color:#fff;
	text-align:center;
	font-size:18px;
	font-weight:400;
	padding:15px 0;
	width:49.5%;
	float:left;
	border-bottom: 4px solid #fff;
}
.price_gray{
	background:#f2f2f2;
	color:#000;
	text-align:right;
	font-size:18px;
	font-weight:600;
	padding: 8px 8px 8px 0;
	width:49.5%;
	float:right;
	border-bottom: 4px solid #fff;
	border-left: 2px solid #fff;
}
.price_gray span{
	color:#12803b;
	font-weight:900;
	font-size:28px;
}


/* よくある質問 */
.sec11_title{
	position: relative;
	padding: 35px 0;
}

.section11 .card {
  border-radius: 0;
  margin-bottom: 15px;
  padding: 0 0 30px 0px;
  border-bottom: 2px solid #ccc;
}
.question {
	display: block;
	cursor: pointer;
	position: relative;
	padding: 30px 0 30px 80px;
	font-size: 21px;
	font-weight: bold;
	color: #000;
}
.question::before {
	content:'Q';
	position: absolute;
	top: 19px;
	left: 0px;
	background: #12803b;
	font-size: 30px;
	width: 56px;
	height: 56px;
	text-align: center;
	line-height: 49px;
	font-weight: bold;
	color:
	 #FFF;
}

.question span{
	color: #12803b;
}

.ans {
	padding: 15px 0px 15px 80px;
	position: relative;
	font-size: 14px;
	/* font-weight: bold; */
	line-height: 1.5;
}
.ans::before {
	content:'A';
	position: absolute;
	top: 18px;
	left: 0px;
	color: #f9c029;
	font-size: 30px;
	border: 3px solid #000;
	width: 56px;
	height: 56px;
	padding: 0 0 0 2px;
	text-align: center;
	line-height: 47px;
	font-weight: bold;
	background:#000;
}


/*contact2*/
.contact2{
	background: url(/index/images/con_back2.png) repeat;
	padding:80px;
	position:relative;
	margin-top:100px;
}

.contact2 p{
	color:#fff;
	text-align:center;
	font-size:22px;
}

.con2{
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 0 auto;
    width: 315px;
	color:#fff;
	padding:20px;
	margin-top:40px;
	font-size:18px;
}
.con2::before{
    transform: skewX(-25deg);
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    z-index: -1;
    background: #33b741;
}

.con2 a{
	color:#fff;
	width:300px;
	display:inline-block;
}

.con2 i{
	margin-right:15px;
}



/* FOOTER */
footer{
	margin: -1px 0 0;
	position: relative;
	padding: 80px 0 20px;
	margin-inline: auto;
    max-width: 1300px;
}
.cr{
	margin: 80px 0 0 !important;
	text-align:center;
	font-size:14px;
	color:#000;
}
.f_rakuraku_link{
	display: flex;
	flex-wrap: nowrap;
	padding: 16px 0 0;
    justify-content: flex-end;
	font-size:16px;
}
.f_rakuraku_link li{
	padding: 0 10px;
}
.f_rakuraku_link li a{
	color:#000;
}
.f_rakuraku_link li a:hover{
	text-decoration:underline;
}

/***********************************************************************/
.cb{clear:both;}
.fl{float:left;}
.fr{float:right;}

.tc{text-align:center;}

.sub_title_bottom{
	margin-bottom:40px;
}

.sub_title{
	font-size: 32px;
	text-align: center;
	font-weight: bold;
}
.sub_title span{
	font-size: 36px;
	/*color: #22AC38;*/
}

.sub_title_top{
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 0 auto;
    color:#f9c029;
    padding: 3px;
    margin-bottom: 15px;
    font-size: 17px;
    width: 10%;
}
.sub_title_top::before{
    transform: skewX(-25deg);
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    z-index: -1;
    background: #000;
}

.section3 h2{
	font-size: 50px;
	text-align: center;
	font-weight: bold;
}
.section3 h2 span{
	font-size: 50px;
}
.f36{ font-size:50px;}
a.anchor{    display: block;    padding-top: 70px;    margin-top: -70px;}



/*----> MOBILE */
@media (max-width: 980px) {

	.li_con{margin-left:0px;}

	#company {
		height: 90px;
	   padding:5px 0 0;
	}

	#company .company_logo {
		height: 80px;
		background-size: auto 80px;
	}

	/* 車検PROの主な機能 */
	.popup_list li {
		width:100%;
	}
	.gray_back {
		padding:50px 0;
	}


	/* 導入インタビュー */
	.interview_top {
		padding:0;
	}


	/* ご利用料金 */
	.price_table {
		width:100%;
		margin-bottom:30px;
	}
	.price_gray {
		width:100%;
		text-align:center;
	}
	.price_green {
		width:100%;
	}
	
	/* よくある質問 */
	.sec11_title {
		position: relative;
		padding: 0px 0 46px;
	}	
	.sec11_title:before{
		width: 162px;
		height: 215px;
	}
	.sec11_title:after{
		width: 190px;
		height: 219px;
	}

	.question {padding: 20px 0 20px 80px;font-size: 21px;}
	.question::before {content:'Q';top: 8px;left: 10px;}

	.ans {padding: 20px 0 20px 80px;font-size: 18px;}
	.ans::before {left: 10px;}

	/*****/
	.sub_title{
		font-size: 26px;
	}
	.sub_title span{
		font-size: 36px;
	}
	.section3 h2{
		font-size: 36px;
	}
	.section3 h2 span{
		font-size: 36px;
	}
	.f36{font-size: 35px;}


	/* ハンバーガーメニュー sp */
	.header-area{
		display: flex;
		justify-content: space-between;
		height: 65px;
		padding: 0 20px;
		align-items: center;
	  }
	  .hamburger{
		width: 40px;
		height: 25px;
		position: relative;
	  }
	  .hamburger span{
		position: absolute;
		width: 100%;
		height: 2px;
		background-color: #000;
		transition: .5s;
	  }
	  .hamburger span:first-of-type{
		top: 0;
	  }
	  .hamburger span:nth-of-type(2){
		top: 50%;
	  }
	  .hamburger span:last-of-type{
		top: 100%;
	  }
	  .slide-menu{
		background-color: #fff;
		position: fixed;
		top: 65px;
		width: 100%;
		left: 0;
		transform: translateX(100%);
		transition: .5s;
	  }
	  .slide-menu li{
		color: #fff;
		line-height: 300%;
		text-align: center;
	  }
	  .hamburger.active span:first-of-type{
		top: 50%;
		transform: rotate(45deg);
	  }
	  .hamburger.active span:nth-of-type(2){
		opacity: 0;
	  }
	  .hamburger.active span:last-of-type{
		top: 50%;
		transform: rotate(-45deg);
	  }
	  .slide-menu.active{
		transform: translateX(0);
		z-index:9999;
		height:100vh;
	  }

	  .nav-link {padding:0;}

	  .con_nav {
		padding:4px 0;
		margin-top:20px;
	  }
	  header{
		position: fixed;
		top: 0;
		z-index: 9999;
		background: #fff;
		width: 100%;
	  }

	  /* 導入事例 */
	.case_study{
		padding: 45px 0;
		border-bottom: 1px solid black;
		height: auto;
		width:100%;
	}
	.case_study img{
		clear:both;
		width: 100%;
	}
	.case_study p{
		clear:both;
		width: 100%;
		padding: 13px 15px;
		margin-top: 35px;
		margin-left:0px;
		font-size: 14px;
	}
	.case_study p span{
		color:#33b741;
	}

	

}

@media (max-width: 575px) {

	.sub_title_top {width:40%;}

	.video_txt h1 {
		margin:0 0 20px;
		font-size:24px;
	}

	.video_txt {padding:51% 0 0;}

	.con2 {
		margin: 0 auto;
        width: 63%;
        padding: 14px;
        font-size: 14px;
	}

	#company {
		height: 60px;
	    padding:5px 0 0;
	}

	#company .company_logo {
		height: 50px;
		background-size: auto 50px;
	}

	/* 車検PROとは */
	.about_txt_area {
		width:100%;
		margin:30px 0 0;
	}
	.about_txt_area h2{
		font-size: 20px;
		padding: 0 14px;
		font-weight:500;
	}
	.about img {
		width: 90%;
		margin-left:5%;
	}

	.about_txt_area {position:relative;}

	/* 実現できること */
	.point img {
		width:100%;
		height:200px;
	}
	.point_txt_area {width:100%;}
	.point_txt_area h2 {font-size:44px;}
	.point_txt_area h3 {font-size:22px;}
	.point_txt_area p {line-height:26px;}
	.point_txt_area {padding: 9% 5% 9% 5%;}
	.point_txt_area {height: auto;}


	/* interview */
	.slick-next {
		right: 6% !important;
		top: 34% !important;
	}
	.slick-prev {
		left: -2% !important;
		top: 34% !important;
	}

	.slick-next:before, .slick-prev:before {
		color: #000 !important;
		font-size: 45px !important;
	}
	.slick-slide img {
		width: 85%;
		height: auto;
		margin-left: 7%;
	}
	.interview_top {margin-left:7%;}
	.in_green {margin-left:7%;}


	/* contact1 */
	.contact1 {
		padding: 60px 12px;
		margin-top: 20px;
	}
	.contact1 p {margin-bottom: 30px;}

	/* contact2 */
	.contact2 {
		padding: 60px 12px;
		margin-top: 20px;
	}
	.contact2 p {margin-bottom: 30px;}

	/* よくある質問 */
	.sec11_title {
		position: relative;
		padding: 0;
	}	
	.sec11_title:before{
		width: 78px;
		height: 104px;
		left: -10px;
	}
	.sec11_title:after{
		width: 88px;
		height: 102px;
		right: -10px;
	}
	.section11 .card {margin-bottom: 10px;}	
	
	.question {padding: 10px 0 10px 56px;font-size: 16px;}
	.question::before {content:'Q';top: 8px;left: 10px;width: 35px;height: 35px;line-height: 31px;font-size: 25px;}

	.ans {padding: 10px 0 10px 56px;font-size: 15px;}
	.ans::before {left: 10px;top: 8px;left: 10px;width: 35px;height: 35px;line-height: 27px;font-size: 25px;}

	
	/*****/
	.sp_scroll{
		position: relative;
		overflow-x: scroll;
	}
	.sub_title{
		font-size: 20px;
	}
	.sub_title span{
		font-size: 22px;
	}
	.section3 h2{
		font-size: 20px;
	}
	.section3 h2 span{
		font-size: 25px;
	}
	.f36{font-size: 25px;}


	/******/

	footer{
		padding:30px 0 10px;
	}
	footer a.f_rakuraku_logo{
		margin: 0 auto 3px;
        width: 100%;
        text-align: center;
        display: inline-block;
		margin-top:30px;
	}
	.f_rakuraku_link li {
		padding: 0 15px 10px;
        float: left;
	}	

	.f_rakuraku_link {
		display: block;
	}

	.cr {
		margin: 30px 0  !important;
	}
}