@charset "utf-8";


img {
	display: inline;
}

.carImgAreaApp img {
	display: block;
}

.carImgAreaApp .innerApp {
	top: 580px;
}


.carSmartphoneIntegrationWrap{
	width: 100%;
	height: 625px;
	background-color: #020202;
	color: #fff;
	overflow: hidden;
	position: relative;
}
.carSmartphoneIntegrationBG{
	position: absolute;
	background: url(../img/si_001.png) center top no-repeat;
	width: 100%;
	height: 821px;
	left: 0;
	right: 0;
	margin: auto;
	top: 0px;
}
.carSmartphoneIntegrationTextBlock{
	position: absolute;
	width: 980px;
	left: 0;
	right: 0;
	margin: auto;
}
.carSmartphoneIntegrationWrap h3{
	position: absolute;
	left: 0;
	top: 148px;
	font-size: 42px;
	font-weight: bold;
	line-height: 42px;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	opacity: 0;
	-webkit-transform: translateX(-100px);
	-ms-transform: translateX(-100px);
	transform: translateX(-100px);
}
.carSmartphoneIntegrationWrap h3.show{
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	opacity: 1;
	-webkit-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);
}
.carSmartphoneIntegrationWrap div.block{
	position: absolute;
	left: 0;
	top: 262px;
	font-size: 15px;
	width: 275px;
	line-height: 27px;
	-webkit-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
	opacity: 0;
}
.carSmartphoneIntegrationWrap div.show{
	-webkit-transition: all 0.5s ease 0.3s;
	transition: all 0.5s ease 0.3s;
	opacity: 1;
}
.carSmartphoneIntegrationWrap div.block span.title{
	display: inline-block;
	border: 1px solid #fff;
	text-align: center;
	width: 83px;
	margin: 18px 10px 7px 0;
}
.carSmartphoneIntegrationWrap div.block span.android{
	/*width: 178px;*/
	margin-right: 0;
}
.carSmartphoneIntegrationWrap div.block a{
	width: 205px;
	display: block;
	margin-top: 5px;
	-webkit-transition: opacity 0.2s linear 0s;
	transition: opacity 0.2s linear 0s;
	opacity: 1;
}
/*.carSmartphoneIntegrationWrap div.block a:hover{
	opacity: 0.5;
}*/
.carSmartphoneIntegrationWrap div.block a:last-child{
	margin-right: 0;
}
.carSmartphoneIntegrationHand{
	position: absolute;
	right: -70px;
	top: 342px;
	z-index: 10;
	-webkit-transition: all 0.8s ease 0s;
	transition: all 0.8s ease 0s;
	opacity: 0;
}
.carSmartphoneIntegrationTextBlock div.showHand{
	-webkit-transition: all 0.8s ease 0.6s;
	transition: all 0.8s ease 0.6s;
	opacity: 1;
	top: 207px;
}












/* Common - MotionBlock */
.carMotionBlock {
	width: 100%;
	/* background-color: #161519;
	color: #fff; */
}
.carMotionBlock > div {
	padding: 50px 0 0 0;
	text-align: center;
	border-bottom: 1px solid #c9cacb;
}
.carMotionBlock h3 {
	font-size: 35px;
	padding: 0 0 25px 0;
}
.carMotionBlock h3.carSlideIn, .scrlFeatureSection h3.scrlSlideIn{
	-webkit-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
	opacity: 0;
	-webkit-transform: translateX(-150px);
	-ms-transform: translateX(-150px);
	transform: translateX(-150px);
}
.carMotionBlock h3.show, .scrlFeatureSection h3.show{
	-webkit-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
	opacity: 1;
	-webkit-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);
}
.carMotionBlock div.carFadeIn, .scrlFeatureSection div.scrlFadeIn{
	-webkit-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
	opacity: 0;
}
.carMotionBlock div.showCarFadeIn, .scrlFeatureSection div.showCarFadeIn{
	-webkit-transition: all 0.5s ease 0.2s;
	transition: all 0.5s ease 0.2s;
	opacity: 1;
}
.carMotionBlock h3.low {
	padding: 0 0 0px 0;
}
.carMotionBlock h3 span {
	font-size: 30px;
}
.carMotionBlock p {
	display: block;
	margin: 0 auto;
}
.carMotionBlock p.b25 {
	padding-bottom: 25px;
}
.carMotionBlock p.w786 {
	font-size: 15px;
	width: 786px;
}
.carMotionBlock p.small {
	font-size: 13px;
	padding: 15px 0 15px 0;
}
.carMotionBlock p.t25 {
	padding-top: 25px;
}
.carLastSection {
	border-bottom: none !important;
}
.carFadeIn h4 {
	font-size: 25px;
	padding-bottom: 15px;
}
.carMotionBlock .carMotionImages{
	position: relative;
	/*height: 350px;*/
	width: 980px;
	margin-left: auto;
	margin-right: auto;
	border-bottom: 1px solid #fff;
	-webkit-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
	opacity: 0;
	overflow: hidden;
}
.carMotionBlock .showCarMotionImages{
	-webkit-transition: all 0.5s ease 0.5s;
	transition: all 0.5s ease 0.5s;
	opacity: 1;
}
.carMotionBlock .carMotionImages .iconList{
	margin-top: 30px;
	margin-bottom: 30px;
}
.carMotionBlock .carMotionImages .iconList p{
	margin-bottom: 10px;
}
.carMotionBlock .carMotionImages .iconList ul{
	display: flex;
	justify-content: center;
}
.carMotionBlock .carMotionImages .iconList ul li{
	margin: 0 5px;
}
.carMotionBlock .carMotionImages .app {
	display: flex;
	justify-content: center;
	padding-bottom: 50px;
}
.carMotionBlock .carMotionImages .app p{
	margin: 0 0 0 10px;
	text-align: left;
}
.carMotionBlock .carMotionImages .app p a{
	color: #fff;
	text-decoration: underline;
}

.anchorAdjust{
	margin-top: -51px;
	padding-top: 51px;
}











/* CarPlay */
.carPlayImages{
	height: 382px;
}
.carPlayImages .playIcon{
	position: absolute;
	top: 21px;
}
.carPlayImages #playIcon_1{
	left: 223px;
}
.carPlayImages #playIcon_2{
	left: 295px;
}
.carPlayImages #playIcon_3{
	left: 367px;
}
.carPlayImages #playIcon_4{
	left: 439px;
}
.carPlayImages .showIcon_1{
	-webkit-animation: showIcon_1 7.7s ease 0s 1 normal forwards;
	animation: showIcon_1 7.7s ease 0s 1 normal forwards;
}
.carPlayImages .showIcon_2{
	-webkit-animation: showIcon_2 7.7s ease 0s 1 normal forwards;
	animation: showIcon_2 7.7s ease 0s 1 normal forwards;
}
.carPlayImages .showIcon_3{
	-webkit-animation: showIcon_3 7.7s ease 0s 1 normal forwards;
	animation: showIcon_3 7.7s ease 0s 1 normal forwards;
}
.carPlayImages .showIcon_4{
	-webkit-animation: showIcon_4 7.7s ease 0s 1 normal forwards;
	animation: showIcon_4 7.7s ease 0s 1 normal forwards;
}
.carPlayImages .playBody{
	position: absolute;
	top: 125px;
	left: 173px;
}
.carPlayImages .playPhone{
	position: absolute;
	top: 123px;
	right: 177px;
}
.carPlayImages .playCable{
	position: absolute;
	top: 317px;
	right: 225px;
}
.carPlayImages .showPlayCable{
	-webkit-animation: showCable 7.7s ease 0s 1 normal forwards;
	animation: showCable 7.7s ease 0s 1 normal forwards;
}
.carPlayImages .playScreen{
	position: absolute;
	top: 152px;
    left: 215px;
}
.carPlayImages #playScreen_1, .carPlayImages #playScreen_2, .carPlayImages #playScreen_3, .carPlayImages #playScreen_4, .carPlayImages #playPhone_2{
	opacity: 0;
}
.carPlayImages .showScreen_1{
	-webkit-animation: showScreen_1 7.7s ease 0s 1 normal forwards;
	animation: showScreen_1 7.7s ease 0s 1 normal forwards;
}
.carPlayImages .showScreen_2{
	-webkit-animation: showScreen_2 7.7s ease 0s 1 normal forwards;
	animation: showScreen_2 7.7s ease 0s 1 normal forwards;
}
.carPlayImages .showScreen_3{
	-webkit-animation: showScreen_3 7.7s ease 0s 1 normal forwards;
	animation: showScreen_3 7.7s ease 0s 1 normal forwards;
}
.carPlayImages .showScreen_4{
	-webkit-animation: showScreen_4 7.7s ease 0s 1 normal forwards;
	animation: showScreen_4 7.7s ease 0s 1 normal forwards;
}
.carPlayImages .showPhone_2{
	-webkit-animation: showPhone_2 7.7s ease 0s 1 normal forwards;
	animation: showPhone_2 7.7s ease 0s 1 normal forwards;
}
.carPlayImages .showPlayWifi{
	-webkit-animation: showWifi 7.7s ease 0s 1 normal forwards;
	animation: showWifi 7.7s ease 0s 1 normal forwards;
}
.carPlayImages .showplayWifiWave{
	-webkit-animation:blink .5s ease-in-out 1.7s infinite alternate;
	animation:fade_in .3s ease-in 1.4s forwards,
	blink .7s ease-in-out 4 1.7s alternate;
}
.carPlayImages .playWifi{
	position: absolute;
	top: 30px;
	right: 178px;
}
.carPlayImages .playWifiWave{
	position: absolute;
	top: 175px;
	right: 306px;
	opacity: 0;
}
/*
0% 	初期画面
9% ケーブルが出始める
18% ケーブルが出終わる／スマホ画面が変わり始める
27% スマホ画面が変わり終わる
36% 本体画面1が出始める
45% 本体画面1が出終わる
54% 本体画面2が出始める
63% 本体画面2が出終わる
72% 本体画面3が出始める
81% 本体画面3が出終わる
90% 本体画面4が出始める
100% 本体画面4が出終わる
*/
@-webkit-keyframes showCable{
	from{transform: translateY(65px);}
	9%{transform: translateY(65px);}
	18%{transform: translateY(0px);}
	to{transform: translateY(0px);}
}
@keyframes showCable{
	from{transform: translateY(65px);}
	9%{transform: translateY(65px);}
	18%{transform: translateY(0px);}
	to{transform: translateY(0px);}
}
@-webkit-keyframes showWifi{
	from{transform: scale(1);}
	9%{transform: scale(1);}
	18%{transform: scale(1.1);}
	25%{transform: scale(1);}
	to{transform: scale(1);}
}
@keyframes showWifi{
	from{transform: scale(1);}
	9%{transform: scale(1);}
	18%{transform: scale(1.1);}
	25%{transform: scale(1);}
	to{transform: scale(1);}
}
@-webkit-keyframes blink{
    0% {opacity:1;}
    100% {opacity:.1;}
}
@keyframes blink{
    0% {opacity:1;}
    100% {opacity:.1;}
}
@-webkit-keyframes fade_in{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes fade_in{
    0% {opacity:0;}
    100% {opacity:1;}
}

@keyframes showIcon_1{
	from{transform: scale(1);}
	25%{transform: scale(1);}
	30%{transform: scale(1.2);}
	35%{transform: scale(1);}
	to{transform: scale(1);}
}
@keyframes showIcon_2{
	from{transform: scale(1);}
	40%{transform: scale(1);}
	45%{transform: scale(1.2);}
	50%{transform: scale(1);}
	to{transform: scale(1);}
}
@keyframes showIcon_3{
	from{transform: scale(1);}
	55%{transform: scale(1);}
	60%{transform: scale(1.2);}
	65%{transform: scale(1);}
	to{transform: scale(1);}
}
@keyframes showIcon_4{
	from{transform: scale(1);}
	70%{transform: scale(1);}
	75%{transform: scale(1.2);}
	80%{transform: scale(1);}
	to{transform: scale(1);}
}
@keyframes showIcon_5{
	from{transform: scale(1);}
	85%{transform: scale(1);}
	90%{transform: scale(1.2);}
	95%{transform: scale(1);}
	to{transform: scale(1);}
}
@keyframes showScreen_1{
	from{opacity: 0;}
	25%{opacity: 0;}
	30%{opacity: 1;}
	to{opacity: 1;}
}
@keyframes showScreen_2{
	from{opacity: 0;}
	40%{opacity: 0;}
	45%{opacity: 1;}
	to{opacity: 1;}
}
@keyframes showScreen_3{
	from{opacity: 0;}
	55%{opacity: 0;}
	60%{opacity: 1;}
	to{opacity: 1;}
}
@keyframes showScreen_4{
	from{opacity: 0;}
	70%{opacity: 0;}
	75%{opacity: 1;}
	to{opacity: 1;}
}
@keyframes showScreen_5{
	from{opacity: 0;}
	85%{opacity: 0;}
	90%{opacity: 1;}
	to{opacity: 1;}
}
@keyframes showPhone_2{
	from{opacity: 0;}
	18%{opacity: 0;}
	27%{opacity: 1;}
	to{opacity: 1;}
}









/* AndroidAuto */
.carAndroidImages{
	height: 379px;
}
.carAndroidImages .androidIcon{
	position: absolute;
	top: 21px;
}
.carAndroidImages #androidIcon_1{
	left: 223px;
}
.carAndroidImages #androidIcon_2{
	left: 295px;
}
.carAndroidImages #androidIcon_3{
	left: 367px;
}
.carAndroidImages #androidIcon_4{
	left: 439px;
}
.carAndroidImages .showIcon_1{
	-webkit-animation: showIcon_1 7.7s ease 0s 1 normal forwards;
	animation: showIcon_1 7.7s ease 0s 1 normal forwards;
}
.carAndroidImages .showIcon_2{
	-webkit-animation: showIcon_2 7.7s ease 0s 1 normal forwards;
	animation: showIcon_2 7.7s ease 0s 1 normal forwards;
}
.carAndroidImages .showIcon_3{
	-webkit-animation: showIcon_3 7.7s ease 0s 1 normal forwards;
	animation: showIcon_3 7.7s ease 0s 1 normal forwards;
}
.carAndroidImages .showIcon_4{
	-webkit-animation: showIcon_4 7.7s ease 0s 1 normal forwards;
	animation: showIcon_4 7.7s ease 0s 1 normal forwards;
}
.carAndroidImages .androidBody{
	position: absolute;
	top: 125px;
	left: 173px;
}
.carAndroidImages .androidPhone{
	position: absolute;
	top: 123px;
	right: 177px;
}
.carAndroidImages .androidCable{
	position: absolute;
	top: 317px;
	right: 225px;
}
.carAndroidImages .androidWifi{
	position: absolute;
	top: 30px;
	right: 178px;
}
.carAndroidImages .androidWifiWave{
	position: absolute;
	top: 175px;
  right: 306px;
  opacity: 0;
}
.carAndroidImages .showAndroidCable{
	-webkit-animation: showWifi 7.7s ease 0s 1 normal forwards;
	animation: showWifi 7.7s ease 0s 1 normal forwards;
}
.carAndroidImages .showAndroidWifi{
	-webkit-animation: showWifi 7.7s ease 0s 1 normal forwards;
	animation: showWifi 7.7s ease 0s 1 normal forwards;
}
.carAndroidImages .showAndroidWifiWave{
	-webkit-animation:blink .5s ease-in-out 1.7s infinite alternate;
	animation:fade_in .3s ease-in 1.4s forwards,
						blink .7s ease-in-out 4 1.7s alternate;
}
.carAndroidImages .androidScreen{
	position: absolute;
	top: 152px;
    left: 215px;
}
.carAndroidImages #androidScreen_1, .carAndroidImages #androidScreen_2, .carAndroidImages #androidScreen_3, .carAndroidImages #androidScreen_4, .carAndroidImages #androidPhone_2{
	opacity: 0;
}
.carAndroidImages .showScreen_1{
	-webkit-animation: showScreen_1 7.7s ease 0s 1 normal forwards;
	animation: showScreen_1 7.7s ease 0s 1 normal forwards;
}
.carAndroidImages .showScreen_2{
	-webkit-animation: showScreen_2 7.7s ease 0s 1 normal forwards;
	animation: showScreen_2 7.7s ease 0s 1 normal forwards;
}
.carAndroidImages .showScreen_3{
	-webkit-animation: showScreen_3 7.7s ease 0s 1 normal forwards;
	animation: showScreen_3 7.7s ease 0s 1 normal forwards;
}
.carAndroidImages .showScreen_4{
	-webkit-animation: showScreen_4 7.7s ease 0s 1 normal forwards;
	animation: showScreen_4 7.7s ease 0s 1 normal forwards;
}
.carAndroidImages .showAndroid_2{
	-webkit-animation: showPhone_2 7.7s ease 0s 1 normal forwards;
	animation: showPhone_2 7.7s ease 0s 1 normal forwards;
}



/* weblink */
.carWeblinkImages{
	height: 379px;
}
.carWeblinkImages .weblinkIcon{
	position: relative;
	margin: 0 5px;
}
.carWeblinkImages .icons{
	position: absolute;
	top: 21px;
	left: 80px;
}

.carWeblinkImages .showIcon_1{
	-webkit-animation: showIcon_1 7.7s ease 0s 1 normal forwards;
	animation: showIcon_1 7.7s ease 0s 1 normal forwards;
}
.carWeblinkImages .showIcon_2{
	-webkit-animation: showIcon_2 7.7s ease 0s 1 normal forwards;
	animation: showIcon_2 7.7s ease 0s 1 normal forwards;
}
.carWeblinkImages .showIcon_3{
	-webkit-animation: showIcon_3 7.7s ease 0s 1 normal forwards;
	animation: showIcon_3 7.7s ease 0s 1 normal forwards;
}
.carWeblinkImages .showIcon_4{
	-webkit-animation: showIcon_4 7.7s ease 0s 1 normal forwards;
	animation: showIcon_4 7.7s ease 0s 1 normal forwards;
}
.carWeblinkImages .showIcon_5{
	-webkit-animation: showIcon_5 7.7s ease 0s 1 normal forwards;
	animation: showIcon_5 7.7s ease 0s 1 normal forwards;
}
.carWeblinkImages .weblinkBody{
	position: absolute;
	top: 125px;
	left: 173px;
}
.carWeblinkImages .weblinkPhone{
	position: absolute;
	top: 123px;
	right: 177px;
}
.carWeblinkImages .weblinkCable{
	position: absolute;
	top: 317px;
	right: 225px;
}
.carWeblinkImages .weblinkWifi{
	position: absolute;
	top: 30px;
	right: 178px;
}
.carWeblinkImages .weblinkWifiWave{
	position: absolute;
	top: 175px;
  right: 306px;
  opacity: 0;
}
.carWeblinkImages .showweblinkCable{
	-webkit-animation: showWifi 7.7s ease 0s 1 normal forwards;
	animation: showWifi 7.7s ease 0s 1 normal forwards;
}
.carWeblinkImages .showweblinkWifi{
	-webkit-animation: showWifi 7.7s ease 0s 1 normal forwards;
	animation: showWifi 7.7s ease 0s 1 normal forwards;
}
.carWeblinkImages .showweblinkWifiWave{
	-webkit-animation:blink .5s ease-in-out 1.7s infinite alternate;
	animation:fade_in .3s ease-in 1.4s forwards,
						blink .7s ease-in-out 4 1.7s alternate;
}
.carWeblinkImages .weblinkScreen{
	position: absolute;
	top: 152px;
	left: 205px;
}
.carWeblinkImages #weblinkScreen_1, .carWeblinkImages #weblinkScreen_2, .carWeblinkImages #weblinkScreen_3, .carWeblinkImages #weblinkScreen_4,.carWeblinkImages #weblinkScreen_5, .carWeblinkImages #weblinkPhone_2{
	opacity: 0;
}
.carWeblinkImages .showScreen_1{
	-webkit-animation: showScreen_1 7.7s ease 0s 1 normal forwards;
	animation: showScreen_1 7.7s ease 0s 1 normal forwards;
}
.carWeblinkImages .showScreen_2{
	-webkit-animation: showScreen_2 7.7s ease 0s 1 normal forwards;
	animation: showScreen_2 7.7s ease 0s 1 normal forwards;
}
.carWeblinkImages .showScreen_3{
	-webkit-animation: showScreen_3 7.7s ease 0s 1 normal forwards;
	animation: showScreen_3 7.7s ease 0s 1 normal forwards;
}
.carWeblinkImages .showScreen_4{
	-webkit-animation: showScreen_4 7.7s ease 0s 1 normal forwards;
	animation: showScreen_4 7.7s ease 0s 1 normal forwards;
}
.carWeblinkImages .showScreen_5{
	-webkit-animation: showScreen_5 7.7s ease 0s 1 normal forwards;
	animation: showScreen_5 7.7s ease 0s 1 normal forwards;
}
.carWeblinkImages .showPhone_2{
	-webkit-animation: showPhone_2 7.7s ease 0s 1 normal forwards;
	animation: showPhone_2 7.7s ease 0s 1 normal forwards;
}








/* WiFi */
.carWifiImages{
	height: 350px;
}
.carWifiImages .wifiLogo{
	position: absolute;
	left: 510px;
	top: 0;
}
.carWifiImages .wifiBody_1{
	position: absolute;
	left: 78px;
	-webkit-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
}
/*.carWifiImages .hideBody_1{
	opacity: 0;
}*/
.carWifiImages .showBody_1{
	-webkit-animation: showBody_1 5s ease 0s 1 normal forwards;
	animation: showBody_1 5s ease 0s 1 normal forwards;
}
.carWifiImages .wifiBody_2{
	position: absolute;
	left: 78px;
	-webkit-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
}
/*.carWifiImages .hideBody_2{
	opacity: 0;
}*/
.carWifiImages .showBody_2{
	-webkit-animation: showBody_2 5s ease 0s 1 normal forwards;
	animation: showBody_2 5s ease 0s 1 normal forwards;
}
.carWifiImages .wifiHand_1{
	position: absolute;
	right: 18px;
	top: 182px;
	-webkit-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
}
/*.carWifiImages .hideHand_1{
	opacity: 0;
}*/
.carWifiImages .showHand_1{
	-webkit-animation: showHand_1 5s ease 0s 1 normal forwards;
	animation: showHand_1 5s ease 0s 1 normal forwards;
}
.carWifiImages .wifiHand_2{
	position: absolute;
	right: 50px;
	top: 50px;
	-webkit-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
}

.carWifiImages .wifiHand_3{
	position: absolute;
	left: 146px;
	top: 151px;
	-webkit-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
}
.carWifiImages .playWifiWave {
	position: absolute;
	left: 515px;
	top: 100px;
	-webkit-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
	opacity: 0;
}
.carWifiImages .showplayWifiWave{
	-webkit-animation:blink .5s ease-in-out 1.7s infinite alternate;
	animation:fade_in .3s ease-in 1.4s forwards,
	blink .7s ease-in-out 4 1.7s alternate;
}
/*.carWifiImages .hideHand_3{
	opacity: 0;
	-webkit-transform: translateY(70px);
	-ms-transform: translateY(70px);
	transform: translateY(70px);
}*/
.carWifiImages .showHand_3{
	-webkit-animation: showHand_3 5s ease 0s 1 normal forwards;
	animation: showHand_3 5s ease 0s 1 normal forwards;
}
.carWifiImages .waves{
	position: absolute;
	left: 0;
	top: 0;
	-webkit-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
}
.carWifiImages .hideWaves{
	-webkit-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
	opacity: 0;
}
.carWifiImages .showWaves{
	-webkit-transition: all 0.5s ease 1.2s;
	transition: all 0.5s ease 1.2s;
	opacity: 1;
}
.carWifiImages .wave{
	position: absolute;
	-webkit-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
}
.carWifiImages .wave img{
	-webkit-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
}

.carWifiImages .hideWave_1{
	opacity: 0;
}
.carWifiImages .singleWave_1{
	opacity: 0;
	-webkit-animation: waveLoop_1 1.4s ease 1.0s 3 normal forwards, waveEnd_1 1.5s ease 5.2s 1 normal forwards;
	animation: waveLoop_1 1.4s ease 1.0s 3 normal forwards, waveEnd_1 1.5s ease 5.2s 1 normal forwards;
}
.carWifiImages .singleWave_2{
	opacity: 0;
	-webkit-animation: waveLoop_2 1.4s ease 1.0s 3 normal forwards, waveEnd_2 1.5s ease 5.2s 1 normal forwards;
	animation: waveLoop_2 1.4s ease 1.0s 3 normal forwards, waveEnd_2 1.5s ease 5.2s 1 normal forwards;
}
.carWifiImages .singleWave_3{
	opacity: 0;
	-webkit-animation: waveLoop_3 1.4s ease 1.0s 3 normal forwards, waveEnd_3 1.5s ease 5.2s 1 normal forwards;
	animation: waveLoop_3 1.4s ease 1.0s 3 normal forwards, waveEnd_3 1.5s ease 5.2s 1 normal forwards;
}
.carWifiImages .showWave_1{
	-webkit-animation: showWave_1 5s ease 0s 1 normal forwards;
	animation: showWave_1 5s ease 0s 1 normal forwards;
}
/*
0% 	初期画面
16% 電波が出はじめる
32% 電波が出終わる
48% 本体画面が切り替わりはじめる
64% 本体画面が切り替わり終わる
80% 手が移動しはじめる
100% 手が移動し終わる
*/
@-webkit-keyframes showBody_1{
	from{opacity: 0;}
	16%{opacity: 1;}
	32%{opacity: 1;}
	48%{opacity: 1;}
	64%{opacity: 0;}
	80%{opacity: 0;}
	to{opacity: 0;}
}
@keyframes showBody_1{
	from{opacity: 0;}
	16%{opacity: 1;}
	32%{opacity: 1;}
	48%{opacity: 1;}
	64%{opacity: 0;}
	80%{opacity: 0;}
	to{opacity: 0;}
}
@-webkit-keyframes showBody_2{
	from{opacity: 0;}
	16%{opacity: 0;}
	32%{opacity: 0;}
	48%{opacity: 0;}
	64%{opacity: 1;}
	80%{opacity: 1;}
	to{opacity: 1;}
}
@keyframes showBody_2{
	from{opacity: 0;}
	16%{opacity: 0;}
	32%{opacity: 0;}
	48%{opacity: 0;}
	64%{opacity: 1;}
	80%{opacity: 1;}
	to{opacity: 1;}
}
@-webkit-keyframes showHand_1{
	from{opacity: 0;}
	16%{opacity: 1;}
	32%{opacity: 1;}
	48%{opacity: 1;}
	64%{opacity: 1;}
	80%{opacity: 1;}
	90%{opacity: 0;}
	to{opacity: 0;}
}
@keyframes showHand_1{
	from{opacity: 0;}
	16%{opacity: 1;}
	32%{opacity: 1;}
	48%{opacity: 1;}
	64%{opacity: 1;}
	80%{opacity: 1;}
	90%{opacity: 0;}
	to{opacity: 0;}
}
@-webkit-keyframes showHand_2{
	from{opacity: 0;}
	16%{opacity: 0;}
	32%{opacity: 0;}
	48%{opacity: 0;}
	64%{opacity: 0;}
	80%{opacity: 0;}
	to{opacity: 1;}
}
@keyframes showHand_2{
	from{opacity: 0;}
	16%{opacity: 0;}
	32%{opacity: 0;}
	48%{opacity: 0;}
	64%{opacity: 0;}
	80%{opacity: 0;}
	to{opacity: 1;}
}
@-webkit-keyframes showHand_3{
	from{opacity: 0; transform: translateY(70px);}
	16%{opacity: 0;}
	32%{opacity: 0;}
	48%{opacity: 0;}
	64%{opacity: 0;}
	90%{opacity: 0; transform: translateY(70px);}
	to{opacity: 1; transform: translateY(0px);}
}
@keyframes showHand_3{
	from{opacity: 0; transform: translateY(70px);}
	16%{opacity: 0;}
	32%{opacity: 0;}
	48%{opacity: 0;}
	64%{opacity: 0;}
	90%{opacity: 0; transform: translateY(70px);}
	to{opacity: 1; transform: translateY(0px);}
}

@-webkit-keyframes waveLoop_1{
	from{opacity: 0;}
	10%{opacity: 0;}
	40%{opacity: 1;}
	80%{opacity: 1;}
	to{opacity: 0;}
}
@keyframes waveLoop_1{
	from{opacity: 0;}
	10%{opacity: 0;}
	40%{opacity: 1;}
	80%{opacity: 1;}
	to{opacity: 0;}
}
@-webkit-keyframes waveLoop_2{
	from{opacity: 0;}
	20%{opacity: 0;}
	50%{opacity: 1;}
	80%{opacity: 1;}
	to{opacity: 0;}
}
@keyframes waveLoop_2{
	from{opacity: 0;}
	20%{opacity: 0;}
	50%{opacity: 1;}
	80%{opacity: 1;}
	to{opacity: 0;}
}
@-webkit-keyframes waveLoop_3{
	from{opacity: 0;}
	30%{opacity: 0;}
	60%{opacity: 1;}
	80%{opacity: 1;}
	to{opacity: 0;}
}
@keyframes waveLoop_3{
	from{opacity: 0;}
	30%{opacity: 0;}
	60%{opacity: 1;}
	80%{opacity: 1;}
	to{opacity: 0;}
}
@-webkit-keyframes waveEnd_1{
	from{opacity: 0;}
	10%{opacity: 0;}
	40%{opacity: 1;}
	to{opacity: 1;}
}
@keyframes waveEnd_1{
	from{opacity: 0;}
	10%{opacity: 0;}
	40%{opacity: 1;}
	to{opacity: 1;}
}
@-webkit-keyframes waveEnd_2{
	from{opacity: 0;}
	20%{opacity: 0;}
	50%{opacity: 1;}
	to{opacity: 1;}
}
@keyframes waveEnd_2{
	from{opacity: 0;}
	20%{opacity: 0;}
	50%{opacity: 1;}
	to{opacity: 1;}
}
@-webkit-keyframes waveEnd_3{
	from{opacity: 0;}
	30%{opacity: 0;}
	60%{opacity: 1;}
	to{opacity: 1;}
}
@keyframes waveEnd_3{
	from{opacity: 0;}
	30%{opacity: 0;}
	60%{opacity: 1;}
	to{opacity: 1;}
}
@-webkit-keyframes showWave_1{
	from{opacity: 0;}
	16%{opacity: 1;}
	32%{opacity: 0;}
	48%{opacity: 0;}
	64%{opacity: 1;}
	80%{opacity: 1;}
	to{opacity: 1;}
}
@keyframes showWave_1{
	from{opacity: 0;}
	16%{opacity: 1;}
	32%{opacity: 0;}
	48%{opacity: 0;}
	64%{opacity: 1;}
	80%{opacity: 1;}
	to{opacity: 1;}
}





.flex {
	display: flex;
	gap: 24px;
	justify-content: center;
	align-items: center;
	span {
		font-weight: bold;
		padding-top:5px;
		display: inline-block;
	}
}




/* Sound Optimization */
#scrlSoundWrap {
	position: relative;
	width: 100%;
	/* height: 625px; */
	overflow: visible;
	/* background-color: #161519; */
}

#scrlSound {
	position: absolute;
	width: 100%;
	height: 625px;
	background: #d9dfe6 url(../img/scrl_18.png) no-repeat;
	background-position: center -190px;
	overflow: visible;
	top: 0;
	left: 0;
}
#scrlSound #scrlSoundInner {
	width: 980px;
	margin: 0 auto;
	line-height: 1.5;
}
#scrlSound #scrlSoundName {
	display: block;
	font-size: 42px;
	font-weight: bold;
	padding: 100px 0 12px 0;
	margin-left: -300px;
	opacity: 0;
	-webkit-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
}
#scrlSound .showSoundName {
	margin-left: 0% !important;
	opacity: 1 !important;
}
#scrlSound #scrlSoundTxt {
	display: block;
	font-size: 15px;
	width: 500px;
	opacity: 0;
	-webkit-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
}
#scrlSound .showSoundTxt {
	-webkit-transition: all 0.5s ease 0.2s !important;
	transition: all 0.5s ease 0.2s !important;
	opacity: 1 !important;
}
#scrlSound #scrlSoundImg {
	position: absolute;
	top: 300px;
	right: 50%;
	padding-right: 92px;
	opacity: 0;
	-webkit-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
}
#scrlSound .showSoundImg {
	-webkit-transition: all 0.8s ease 0.4s !important;
	transition: all 0.8s ease 0.4s !important;
	opacity: 1 !important;
	top: 400px !important;
}

.scrlSoundFeatureWrap {
	/* background-color: #d9dfe6; */
	width: 100%;
}
/*.scrlSlideIn{
	opacity: 0;
	margin-left: -100%;
}
.scrlFadeIn {
	opacity: 0;
}*/
.scrlFeatureSection .scrlImgArea{
	position: relative;
	width: 980px;
	margin-left: auto;
	margin-right: auto;
	-webkit-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
	opacity: 0;
	overflow: hidden;
	padding: 26px 0 0 0;
}
.scrlFeatureSection .showCarMotionImages{
	-webkit-transition: all 0.5s ease 0.5s;
	transition: all 0.5s ease 0.5s;
	opacity: 1;
}
.scrlFirstSection {
	padding-top: 98px !important;
}
.scrlFeatureSection {
	width: 980px;
	margin: 0 auto;
	padding: 50px 0 47px 0;
	text-align: center;
	border-bottom: 1px solid #c9cacb;
}
.scrlDarkBorder{
	border-bottom: 1px solid #c9cacb !important;
}
.scrlLastSection {
	border-bottom: none;
}
.scrlNoPadSection {
	padding-bottom: 0 !important;
}
.scrlFeatureSection h3, .scrlOtheSection h3 {
	font-size: 35px;
	padding: 0 0 25px 0;
}
.scrlFeatureSection h3 span, .scrlOtheSection h3 span {
	font-size: 30px;
}
.scrlFeatureSection p, .scrlOtheSection p {
	display: block;
	margin: 0 auto;
	font-size: 15px;
	line-height: 1.6;
}
.scrlFeatureSection p.b25, .scrlOtheSection p.b25 {
	padding-bottom: 25px;
}
.scrlFeatureSection p.w786, .scrlOtheSection p.w786 {
	width: 786px;
	font-size: 15px;
}
.scrlFadeIn h4 {
	font-size: 25px;
	padding-bottom: 15px;
}
h3.scrlSlideIn img.mark-new {
	margin: 0 0 6px 6px;
}









@media screen and (min-width:769px){
	/* Fixed Navigation */
	#scrlNav {
		display: block;
		position: fixed;
		z-index: 800;
		top: 360px;
		right: 16px;
		color: #666464;
		font-size: 12px;
		text-align: right;
	}
	div.scrlBrightText li {
		color: #fff;
	}
	#scrlNav .scrlNavItem .scrlNavLabel {
		height: 24px;
		line-height: 24px;
		opacity: 0;
	}
	#scrlNav .scrlNavItem .scrlNavDot {
		display: block;
		height: 24px;
		width: 24px;
		background: url(../img/scrl_nav01.png) top right no-repeat;
		float: right;
	}
	#scrlNav .scrlNavItem .scrlNavDotActive {
		background-position: bottom right;
	}

	.carSmartphoneIntegrationWrap div.block a:hover{
		opacity: 0.5;
	}
}







/* SP */
@media only screen and (max-width: 768px) {
	/* Fixed Navigation */
	#scrlNav {
		display: none;
	}

	.carSmartphoneIntegrationWrap{
		height: 450px;
	}
	.carSmartphoneIntegrationBG{
		height: 600px;
		background-size: auto 600px;
	}
	.carSmartphoneIntegrationWrap h3{
		left: 10px;
		top: 40px;
		font-size: 36px;
		line-height: 36px;
	}
	.carSmartphoneIntegrationWrap div.block{
		left: 10px;
		top: 134px;
		font-size: 18px;
		width: 275px;
		line-height: 23px;
	}
	.carSmartphoneIntegrationHand{
		right: 0px;
		top: 237px;
	}
	.carSmartphoneIntegrationHand img{
		width: 210px;
	}
	.carSmartphoneIntegrationTextBlock{
		width: 100%;
	}
	.carSmartphoneIntegrationTextBlock div.showHand{
		top: 183px;
	}
	.carMotionBlock .carMotionImages{
		width: 100%;
	}
	.carMotionBlock p{
		font-size: 20px;
		line-height: 1.6;
	}
	.carMotionBlock p.w786 {
		width: 95%;
		font-size: 20px;
	}


	.carPlayImages #playIcon_1{
		left: 13%;
	}
	.carPlayImages #playIcon_2{
		left: 23%;
	}
	.carPlayImages #playIcon_3{
		left: 33%;
	}
	.carPlayImages #playIcon_4{
		left: 43%;
	}
	.carPlayImages .playWifiWave {
		top: 190px;
    right: 180px;
		width: 50px;
	}
	.carPlayImages .playBody{
		top: 125px;
		left: 30px;
		width: 370px;
	}
	.carPlayImages .playPhone{
		top: 123px;
		right: 70px;
	}
	.carPlayImages .playCable{
		top: 317px;
		right: 117px;
	}
	.carPlayImages .playScreen{
		top: 150px;
    left: 69px;
    width: 311px;
	}
	.carAndroidImages #androidIcon_1{
		left: 13%;
	}
	.carAndroidImages #androidIcon_2{
		left: 23%;
	}
	.carAndroidImages #androidIcon_3{
		left: 33%;
	}
	.carAndroidImages #androidIcon_4{
		left: 43%;
	}
	.carAndroidImages .androidBody{
		top: 125px;
		left: 30px;
		width: 370px;
	}
	.carAndroidImages .androidPhone{
		top: 123px;
		right: 70px;
	}
	.carAndroidImages .androidCable{
		top: 317px;
		right: 117px;
	}
	.carAndroidImages .androidWifi{
		top: 30px;
    right: 70px;
	}
	.carAndroidImages .androidWifiWave{
		top: 190px;
    right: 180px;
    width: 50px;
	}
	.carAndroidImages .androidScreen{
		top: 146px;
    left: 67px;
    width: 311px;
	}

	/* car wifi*/
	.carWifiImages {
		height: 230px;
	}
	.carWifiImages .wifiLogo{
		left: 48.5%;
		right: auto;
		width: 80px;
	}
	.carWifiImages .wifiBody_1{
		left: 20px;  /*78 -> 20 = -58*/
		top: 0;
		width: 270px;
	}
	.carWifiImages .wifiBody_2{
		left: 20px;
		top: 0;
		width: 270px;
	}
	.carWifiImages .wifiHand_2{
		right: 3%;
		top: 20px;
		width: 193px;
	}
	.carWifiImages .playWifiWave {
		left: 50.5%;
		top: 60px;
		width: 50px;
	}


	.carMotionImages.carWeblinkImages{
		margin-top: 80px;
		overflow:visible;
	}
	.carWeblinkImages .icons{
		left: 0;
		width: 70%;
		top: -50px;
	}
	.carWeblinkImages .icons .weblinkIcon{
		margin-bottom: 10px;
	}

	.carWeblinkImages .weblinkBody{
		top: 125px;
		left: 30px;
		width: 370px;
	}
	.carWeblinkImages .weblinkPhone{
		top: 123px;
		right: 70px;
	}
	.carWeblinkImages .weblinkCable{
		top: 317px;
		right: 117px;
	}
	.carWeblinkImages .weblinkWifi{
		top: 30px;
    right: 70px;
	}
	.carWeblinkImages .weblinkWifiWave{
		top: 190px;
    right: 180px;
    width: 50px;
	}
	.carWeblinkImages .weblinkScreen{
		top: 143px;
		left: 54px;
		width: 318px;
	}











	#scrlSound #scrlSoundName {
		font-size: 36px;
		padding: 50px 0 12px 20px;
	}
	#scrlSound #scrlSoundTxt {
		font-size: 18px;
		width: 60%;
		padding-left: 20px;
	}
	#scrlSound #scrlSoundImg {
		top: 300px;
		right: auto;
		left: 20px;
		padding-right: 92px;
	}
	.scrlFeatureSection {
		width: 100%;
	}
	.scrlFeatureSection p.w786, .scrlOtheSection p.w786 {
		width: 95%;
		font-size: 20px;
	}
	.scrlFeatureSection p, .scrlOtheSection p {
		font-size: 20px;
	}
	.scrlFeatureSection .scrlImgArea{
		width: 100%;
	}
	.scrlFeatureSection .scrlImgArea img{
		width: 100%;
		height: auto;
	}
	.scrlFeatureSection .scrlImgArea div.underApp img{
		float: left;
		width: 80px;
		margin: -7px 12px 0 0;
	}
}


.m560btFeatureList {
	margin: 30px auto;
	border-top: 1px solid #c9cacb;
	border-bottom: 1px solid #c9cacb;
	padding: 20px 1.5em;
	max-width: 500px;
}
.m560btFeatureList  li{
	list-style: disc;
	text-align: left;
}

.m560btFeatureBlock {
	display: flex;
	justify-content: space-between;
	margin-bottom: 50px;
}
.m560btFeatureBlock .box{
	border:1px solid #c9cacb;
	padding: 20px;
	width: 31%;
	box-sizing: border-box;
}
.m560btFeatureBlock .box .box__ttl{
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid #c9cacb;
}
.m560btFeatureBlock .box .box__fig{
	margin: 0 20px;
}

.m560btFeatureBlock .box img{
	width: 100%;
	height: auto;
}

.m560btFeatureTtl {
	text-align: left;
	border-left: 5px solid #000;
	padding-bottom: 0 !important;
	padding-left: 10px;
	font-size: 16px !important;
	font-weight: bold;
}

.m560btFeatureBlock--fig {
	margin-bottom: 50px;
	display: flex;
	justify-content: space-between;
}

.m560btFeatureBlock--fig .box__fig{
	width: 31%;
}
.m560btFeatureBlock--fig .box__fig img{
	width: 100%;
	height: auto;
}

.m560btFeatureSideBySide {
	display: flex;
	justify-content: space-between;
}

.m560btFeatureSideBySide .block{
	width: 48%;
}
.m560btFeatureSideBySide .block ul{
	text-align: left;
	padding-left: 1.5em;
}

.m560btFeatureSideBySide .block ul li{
	list-style: disc;
	text-align: left;
}
.m560btFeatureSideBySide .block ul li.no-dot{
	list-style: none;
	margin-left: -1.5em;
}


/*add*/
#movie .iframe_wraper{
  position:relative;
  margin: 0 auto;
  width:100%;
  height:0;
  padding-top: 57%;
}
#movie .iframe_wraper iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
@media only screen and (max-width: 768px) {
		#movie .iframe_wraper{
	  padding-top: 56%;
	  margin-bottom: 0;
	  margin-bottom: 20px;
	}
}

.carMotionBlock .figure {
	max-width: 960px;
	margin:  50px auto 0;
	padding-bottom: 20px;
	border-bottom: 1px solid #fff;
	margin-bottom: 20px;
	position: relative;
	z-index: 1;
	img {
		max-width: 100%;
		height: auto;
	}
}

.carMotionBlock .figure.noborder {
	border:none;
}