@charset "utf-8";

/*----------
CSS -micro clearfix
------------*/
/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;}
.cf:after {clear:both;} 
/* For IE 6/7 (trigger hasLayout) */
.cf {zoom:1;}



@media(max-width: 767px){
	.PC{display:none !important;}
	.SP{display:block !important;}
	#hside{display:none !important;}}

@media(min-width: 768px){
	/*body{min-width: 980px;}*/
	.PC{display:block !important;}
	.SP{display:none !important;}
	#hside{display:block !important;}
	#LpContainer{display:block !important;}}


/*--------------------------------------------------------------------------------*/
@media(min-width: 768px){
#LpContainer h1,#LpContainer h2,#LpContainer h3,#LpContainer{text-align:center!important;}	
figure{margin:0;}
#LpContainer{
	background-color:#fff; text-align:center;
	font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
	padding:0 0 120px 0;}

#hside{
	left:460px !important;
	right:0 !important;
	margin:0 auto !important;}


#LpContainer .Main{
padding-top: 60px;}


/*trouble-block*/
#LpContainer section.trouble-block{
	width:960px;
	margin:0 auto;
	padding:80px 0 120px;
	border-bottom:solid 1px #e9ecee;}

	#LpContainer section.trouble-block h2{
		margin:0 0 40px 0;
		font-size:4rem;
		line-height:5.4rem;
		font-weight:normal;
		color:#005083;}

		
	#LpContainer section.trouble-block p{
		color: #005083;
		font-size: 2.4rem;
		line-height: 3.6rem;
		text-align:center;
		margin:0 0 0 0;}
		
	#LpContainer section.trouble-block .Txt-St{
		font-weight:bold;}

	#LpContainer section.trouble-block p span{
		color: #e60012;}
		
	#LpContainer section.trouble-block p.ex{
		color: #555;
		font-size:1.0rem;
		text-align:right;}				
		
			
			#LpContainer section.trouble-block .graph-block{
				margin:0 0 70px 0;}

				#LpContainer section.trouble-block .graph-block p:first-child{
					margin:0 0 40px 0;}
				
				#LpContainer section.trouble-block .graph-block div{
					padding:30px;
					display: flex;
					justify-content:space-between;
					border-radius:4px;
					background-color:#fef2d7;}
				
				
				#LpContainer section.trouble-block .graph-block div img{
					width:440px;
					height:398px;}		
			

			#LpContainer section.trouble-block .kekka-block{}
			
				#LpContainer section.trouble-block .kekka-block p:first-child{
					margin:0 0 20px 0;}
					
				#LpContainer section.trouble-block .kekka-block ul{
					margin:0 0 50px 0;}
					
				#LpContainer section.trouble-block .kekka-block ul li{
					font-size: 2.4rem;
					color: #e60012;
					text-align:center;}
					
					#LpContainer section.trouble-block .kekka-block ul li:first-child{
						margin:0 0 20px 0;}
				
				#LpContainer section.trouble-block .kekka-block img{
					margin:0 0 60px 0;}


/*DRIVERCOMPASS-block*/
#LpContainer section.DRIVERCOMPASS-block{
	width:960px;
	margin:0 auto;
	padding:60px 0 60px;
	border-bottom:solid 1px #e9ecee;}

	#LpContainer section.DRIVERCOMPASS-block h2{
		margin:0 0 40px 0;
		font-size:4rem;
		line-height:5.4rem;
		font-weight:normal;
		color:#005083;}
		
	#LpContainer section.DRIVERCOMPASS-block h3 img{
		width:346px;
		height:auto;
		margin:0 0 50px 0;}		
		

	#LpContainer section.DRIVERCOMPASS-block p{
		color: #333;
		font-size:1.6rem;
		line-height:3.0rem;
		margin:0 0 40px 0;
		text-align:left;}
		
	#LpContainer section.DRIVERCOMPASS-block .about-block{
		display: flex;
		justify-content:space-between;}
		
	#LpContainer section.DRIVERCOMPASS-block .about-block figure{
		width:468px;}
		#LpContainer section.DRIVERCOMPASS-block .about-block figure img{
			width:100%;
			height:auto;
			margin:0 0 15px 0;}
		#LpContainer section.DRIVERCOMPASS-block .about-block figure figcaption{
			color:#333;
			font-size:1.4rem;
			line-height:2.1rem;}	


/*Movie*/
#LpContainer section.Movie{
	width:960px;
	margin:0 auto;
	padding:60px 0 120px;}
	
	#LpContainer section.Movie h3{
		font-size:3rem;
		font-weight:normal;
		color:#005083;
		margin:0 0 30px 0;}
	
	#LpContainer section.Movie .Movie-Box iframe{
			width:586px;
			height:330px;
			margin:0 auto;}


/*Feature1-block - Feature2-block -  Feature3-block*/
#LpContainer section.Feature1-block,
#LpContainer section.Feature2-block,
#LpContainer section.Feature3-block{
	width:960px;
	margin:0 auto;
	padding:0 0 80px 0;}
	
	#LpContainer section.Feature3-block{
		padding:0 0 0 0;}
		

	#LpContainer section.Feature1-block h2,
	#LpContainer section.Feature2-block h2,
	#LpContainer section.Feature3-block h2{
		background-color:#00abc8;
		color:#fff;
		font-size:2.4rem;
		line-height:1;
		text-align:left !important;
		padding:12px 20px;
		margin:0 0 50px 0;}
	
		#LpContainer section.Feature1-block h2 img,
		#LpContainer section.Feature2-block h2 img,
		#LpContainer section.Feature3-block h2 img{
			width:48px;
			height:auto;
			vertical-align: middle !important;
			margin-right:10px;}
		

#LpContainer section.Feature1-block .Point-block,
#LpContainer section.Feature2-block .Point-block,
#LpContainer section.Feature3-block .Point-block{
		display: flex;
		justify-content:space-between;}

	#LpContainer section.Feature1-block .Point-block figure,
	#LpContainer section.Feature2-block .Point-block figure,
	#LpContainer section.Feature3-block .Point-block figure{
		width:270px;}
		
			#LpContainer section.Feature1-block .Point-block figure img,
			#LpContainer section.Feature2-block .Point-block figure img,
			#LpContainer section.Feature3-block .Point-block figure img{
				width:100%;
				height:auto;}	
			
	#LpContainer section.Feature1-block .Point-block .Point,
	#LpContainer section.Feature2-block .Point-block .Point,
	#LpContainer section.Feature3-block .Point-block .Point{
		width:650px;}	


		#LpContainer section.Feature1-block .Point-block .Point a,
		#LpContainer section.Feature2-block .Point-block .Point a{
			display:block;
			width:250px;
			margin:60px auto 0;}
		
		
		#LpContainer section.Feature1-block .Point-block .Point a img,
		#LpContainer section.Feature2-block .Point-block .Point a img{
			width:100%;
			height:auto;}
			
			
		
				#LpContainer section.Feature1-block h3,
				#LpContainer section.Feature2-block h3{
					color:#005083;
					font-size:1.8rem;
					margin:60px 0 15px 0;
					text-align:left !important;}
			
					#LpContainer section.Feature1-block h3:first-child,
					#LpContainer section.Feature2-block h3:first-child{
						margin-top:0;}
			
					
				#LpContainer section.Feature1-block p,
				#LpContainer section.Feature2-block p{
					color:#333;
					font-size:1.4rem;
					line-height:2.4rem;
					text-align:left;}
					
				#LpContainer section.Feature1-block p.ex,
				#LpContainer section.Feature2-block p.ex{
					color: #555;
					font-size:1.2rem;
					margin-top:10px;}
					
					
	#LpContainer section.Feature3-block .Point-block .Point ul{}					
	#LpContainer section.Feature3-block .Point-block .Point ul li{
		color: #333;
		font-size:1.6rem;
		line-height:3.0rem;
		text-align:left;}					

		#LpContainer section.Feature3-block .Point-block .App-block{
			border:solid 1px #e9ecee;
			padding:20px 40px;
			margin:20px 0 10px 0;}
			
		#LpContainer section.Feature3-block .Point-block .App-block ul{
			display: flex;
			justify-content:space-between;}
			
		#LpContainer section.Feature3-block .Point-block .App-block ul li a {
			margin-right:15px;}
					
		#LpContainer section.Feature3-block .Point-block .App-block ul li a img{
			width:auto;
			height:58px;}
			
		#LpContainer section.Feature3-block .Point-block .App-block ul li a:hover img{
				opacity: 0.9;}
	
		#LpContainer section.Feature3-block .Point-block p.ex{
			color: #555;
			font-size:1.0rem;
			line-height:1.6rem;
			text-align:left;}				
		

}

/*--------------------------------------------------------------------------------*/
@media(max-width: 767px){
figure{margin:0;}
#LpContainer{
	background-color:#fff; text-align:center;
	font-size:62.5%;
	padding:0 0 60px 0;}


#LpContainer .Main{}
	
	#LpContainer .Main img{
		width: 100%;}


/*trouble-block*/
#LpContainer section.trouble-block{
	padding:60px 10px;
	border-bottom:solid 1px #e9ecee;}


	#LpContainer section.trouble-block h2{
		color:#005083;
		margin:0 0 20px 0;
		font-size:2.4rem;
		line-height:150%;
		font-weight:bold;}

		
	#LpContainer section.trouble-block p{
		color: #005083;
		font-size:1.8rem;
		line-height: 150%;
		text-align:center;
		margin:0 0 0 0;}
		
	#LpContainer section.trouble-block .Txt-St{
		font-weight:bold;}

	#LpContainer section.trouble-block p span{
		color: #e60012;}
		
	#LpContainer section.trouble-block p.ex{
		color: #555;
		font-size:1.0rem;
		text-align:right;}				
		
			
			#LpContainer section.trouble-block .graph-block{
				margin:0 0 60px 0;}

				#LpContainer section.trouble-block .graph-block p:first-child{
					margin:0 0 30px 0;}
				
				#LpContainer section.trouble-block .graph-block div{
					padding:30px 10px;
					border-radius:4px;
					background-color:#fef2d7;
					margin:0 0 10px 0;}
				
				
				#LpContainer section.trouble-block .graph-block div img{
					max-width:100%;
					height:auto;}		
			

			#LpContainer section.trouble-block .kekka-block{}
			
				#LpContainer section.trouble-block .kekka-block p:first-child{
					margin:0 0 10px 0;}
					
				#LpContainer section.trouble-block .kekka-block ul{
					margin:0 0 30px 0;}
					
				#LpContainer section.trouble-block .kekka-block ul li{
					font-size: 1.8rem;
					color: #e60012;
					text-align:center;}
					
					#LpContainer section.trouble-block .kekka-block ul li:first-child{
						margin:0 0 10px 0;}
				
				#LpContainer section.trouble-block .kekka-block img{
					max-width:100%;
					margin:0 0 30px 0;}

/*DRIVERCOMPASS-block*/
#LpContainer section.DRIVERCOMPASS-block{
	padding:60px 10px 60px 10px;
	border-bottom:solid 1px #e9ecee;}

	#LpContainer section.DRIVERCOMPASS-block h2{
		margin:0 0 40px 0;
		font-size:2.4rem;
		line-height:150%;
		font-weight:bold;
		color:#005083;}
		
	#LpContainer section.DRIVERCOMPASS-block h3 img{
		width:80%;
		height:auto;
		margin:0 0 40px 0;}		
		

	#LpContainer section.DRIVERCOMPASS-block p{
		color: #333;
		font-size:1.6rem;
		line-height:180%;
		margin:0 0 40px 0;
		text-align:left;}
		
	#LpContainer section.DRIVERCOMPASS-block .about-block{
		}
		
	#LpContainer section.DRIVERCOMPASS-block .about-block figure{
		max-width:100%;
		margin:0 0 0 0;}
		
	#LpContainer section.DRIVERCOMPASS-block .about-block figure:first-child{
		margin:0 0 40px 0;}
	
		#LpContainer section.DRIVERCOMPASS-block .about-block figure img{
			width:100%;
			height:auto;
			margin:0 0 10px 0;}
		#LpContainer section.DRIVERCOMPASS-block .about-block figure figcaption{
			color:#333;
			font-size:1.2rem;
			line-height:150%;}	


/*Movie*/
#LpContainer section.Movie{
	padding:60px 10px 60px 10px;}
	
	#LpContainer section.Movie h3{
		font-size:2.4rem;
		font-weight:normal;
		color:#005083;
		margin:0 0 20px 0;}

	#LpContainer section.Movie .Movie-Box{
		height: 0;
		overflow: hidden;
		padding-bottom: 56.25%;
		position: relative;}
	
	#LpContainer section.Movie .Movie-Box iframe{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;}

	#LpContainer .Movie .Movie-Box{
		height: 0;
		overflow: hidden;
		padding-bottom: 56.25%;
		position: relative;}
		
		

/*Feature1-block - Feature2-block -  Feature3-block*/
#LpContainer section.Feature1-block,
#LpContainer section.Feature2-block,
#LpContainer section.Feature3-block{
	padding:0 0 60px 0;}
	
	#LpContainer section.Feature3-block{
		padding:0 0 0 0;}
		

	#LpContainer section.Feature1-block h2,
	#LpContainer section.Feature2-block h2,
	#LpContainer section.Feature3-block h2{
		display:flex;
		align-items: center;
		background-color:#00abc8;
		color:#fff;
		font-size:1.8rem;
		line-height:1;
		text-align:left !important;
		padding:12px 20px;
		margin:0 0 30px 0;}
		

	#LpContainer section.Feature1-block h2 span,
	#LpContainer section.Feature2-block h2 span,
	#LpContainer section.Feature3-block h2 span{
		display: inline-block}
	
		#LpContainer section.Feature1-block h2 img,
		#LpContainer section.Feature2-block h2 img,
		#LpContainer section.Feature3-block h2 img{
			width:48px;
			height:auto;
			vertical-align: middle !important;
			margin-right:10px;}
		

#LpContainer section.Feature1-block .Point-block,
#LpContainer section.Feature2-block .Point-block,
#LpContainer section.Feature3-block .Point-block{
	margin:0 10px;}

	#LpContainer section.Feature1-block .Point-block figure,
	#LpContainer section.Feature2-block .Point-block figure,
	#LpContainer section.Feature3-block .Point-block figure{}
		
			#LpContainer section.Feature1-block .Point-block figure img{
				max-width:50%;}
			#LpContainer section.Feature2-block .Point-block figure img{
				max-width:50%;}
			#LpContainer section.Feature3-block .Point-block figure img{
				max-width:100%;
				margin:0 0 20px 0;}	

		#LpContainer section.Feature1-block .Point-block .Point a,
		#LpContainer section.Feature2-block .Point-block .Point a{
			display:block;
			width:235px;
			margin:40px auto 0;}
		
		
		#LpContainer section.Feature1-block .Point-block .Point a img,
		#LpContainer section.Feature2-block .Point-block .Point a img{
			width:100%;
			height:auto;
			pointer-events: none;}

			
	#LpContainer section.Feature1-block .Point-block .Point,
	#LpContainer section.Feature2-block .Point-block .Point,
	#LpContainer section.Feature3-block .Point-block .Point{}		
		
				#LpContainer section.Feature1-block h3,
				#LpContainer section.Feature2-block h3{
					color:#005083;
					font-size:1.8rem;
					line-height:150%;
					margin:30px 0 15px 0;
					padding:30px 0 0 0;
					text-align:left !important;
					border-top:solid 1px #e9ecee;
						padding-left:1rem;
						text-indent:-1rem;}
			
					#LpContainer section.Feature1-block h3:first-child,
					#LpContainer section.Feature2-block h3:first-child{
						margin-top:0;
						border-top:none;}
			
					
				#LpContainer section.Feature1-block p,
				#LpContainer section.Feature2-block p{
					color:#333;
					font-size:1.4rem;
					line-height:180%;
					text-align:left;}
					
				#LpContainer section.Feature1-block p.ex,
				#LpContainer section.Feature2-block p.ex{
					color: #555;
					font-size:1.2rem;
					line-height:180%;
					text-align:left;
					margin-top:10px;
						padding-left:1rem;
						text-indent:-1rem;}
					
	
	
			
	#LpContainer section.Feature3-block .Point-block .Point ul{}					
	#LpContainer section.Feature3-block .Point-block .Point ul li{
		color: #333;
		font-size:1.6rem;
		line-height:150%;
		margin:0 0 10px 0;
		text-align:left;
			padding-left:1rem;
			text-indent:-1rem;}

		#LpContainer section.Feature3-block .Point-block .App-block{
			margin:20px 10px 10px 10px;}
			
		#LpContainer section.Feature3-block .Point-block .App-block ul{
			display: flex;
			justify-content:space-between;}
			
		#LpContainer section.Feature3-block .Point-block .App-block ul li {
			width:48%;
			padding-left:0;
			text-indent:0;}
		
		#LpContainer section.Feature3-block .Point-block .App-block ul li a{
			display:block;}	
					
		#LpContainer section.Feature3-block .Point-block .App-block ul li a img{
			width:100%;
			pointer-events: none;}
	
		#LpContainer section.Feature3-block .Point-block p.ex{
			color: #555;
			font-size:1.0rem;
			line-height:180%;
			text-align:left;
				padding-left:1rem;
				text-indent:-1rem;}
			
		#LpContainer section.Feature3-block .QR{
			display:none;}

}