@charset "utf-8";

/*===========================================================
	アニメーション設定
===========================================================*/

@-webkit-keyframes fadein {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadein {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/*===========================================================
	メインビジュアル
===========================================================*/

#main-visual .layer {
	background-image: url("../images/test_drive/Test_Drive-top_2.jpg");
}

/*========== オープニング動作用のレイヤー ==========*/

#main-visual .opening {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: url("../images/test_drive/Test_Drive-top_1.jpg") no-repeat center center;
	background-size: cover;
}

/*===========================================================
	メインコンテンツ
===========================================================*/

#main_header img {
	margin-top: -50px;
	margin-left: -70px;
	width: 308px;
}

#main_header p {
	position: absolute;
	top: -20px;
	left: calc(50% + 140px);
	font-weight: bold;
	text-align: left;
}

/*===========================================================
	テストドライブ
===========================================================*/

section#test_drive {
	
}

.test_drive_wrapper {
	margin: 0 auto;
	max-width: 775px;
}

.test_drive_text {
	margin: 0 0 30px;
	font-size: 1.2em;
}

.test_drive_text p {
	margin: 10px 0;
	color: #595757;
}

.test_drive_text .text_strong {
	color: #ea5514;
	font-size: 1.54rem;
	font-weight: bold;
}

#test_drive_text_image {
	margin: 80px 0;
}

section#test_drive h4 {
	margin: 20px 0;
	color: #0070bd;
	font-size: 2.8rem;
	font-weight: bold;
}

#shop_image_wrapper {
	display: flex;
	justify-content: space-between;
}

.shop_image01 {
	flex: 0 1 57%;
}

#shop_image_inner {
	flex: 0 1 40%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.shop_image01,
.shop_image02,
.shop_image03 {
	opacity: 0;
}

.show .shop_image01 {animation: fadein ease-out 1000ms forwards;}
.show .shop_image02 {animation: fadein ease-out 1000ms 300ms forwards;}
.show .shop_image03 {animation: fadein ease-out 1000ms 600ms forwards;}
	
#sp_linkicon_wrapper {
	display: none;
}

section#test_drive_movie iframe {
	margin-top: 50px;
	width: 100%;
}

@media print, screen and (max-width:750px) {

	/*===========================================================
		メインビジュアル
	===========================================================*/

	#main-visual .layer {
		background-image: url("../images/test_drive/sp_Test_Drive-top.jpg");
	}

	/*========== オープニング動作用のレイヤー ==========*/

	#main-visual .opening {display: none;
	}

	/*===========================================================
		メインコンテンツ
	===========================================================*/

	#main_header img {
		margin-top: 5px;
		margin-left: auto;
		width: 240px;
	}

	#main_header p {
		margin-top: 30px;
		position: relative;
		top: auto;
		left: auto;
		font-size: 1.6rem;
		text-align: center;
		line-height: 2.333em;
	}

	/*===========================================================
		テストドライブ
	===========================================================*/

	section#test_drive {

	}

	.test_drive_wrapper {
		margin: 0 auto;
		max-width: initial;
	}

	.test_drive_text {
		margin: 90px 30px 0;
		font-size: 0.7em;
	}

	.test_drive_text p {
		margin: 10px 0;
		font-size: 1.3rem;
		line-height: 1.923em;
	}

	.test_drive_text .text_strong {
		font-size: 1.3rem;
		line-height: 1.923em;
	}

	#test_drive_text_image {
		margin: 90px 0 120px;
	}

	section#test_drive h4 {
		margin: 60px 30px 30px;
		font-size: 2rem;
	}

	#shop_image_wrapper {
		margin: 30px 40px 90px;
		display: block;
	}

	.shop_image01 {
	}

	#shop_image_inner {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.shop_image01,
	.shop_image02,
	.shop_image03 {
		margin-top: 30px;
		opacity: 1;
	}

	.show .shop_image01,
	.show .shop_image02,
	.show .shop_image03 {animation: none;}

	#sp_linkicon_wrapper {
		display: block;
		margin: 90px auto 0;
		text-align: center;
	}

	#sp_linkicon_wrapper figure {
		margin-top: 25px;
	}

	#sp_linkicon_wrapper img {
		height: 34px;
	}

	#test_drive_movie iframe {
		margin: -56.25% 0 0;
		padding-top: 56.25%;
		width: 100%
	}

}