@charset "utf-8";
@import url(https://db.onlinewebfonts.com/c/cd3e10f583ba43f0a37a942e218f159d?family=Aston+Martin+Flare);
@font-face {
    font-family: "Aston Martin Flare";
    src: url("https://db.onlinewebfonts.com/t/cd3e10f583ba43f0a37a942e218f159d.eot");
    src: url("https://db.onlinewebfonts.com/t/cd3e10f583ba43f0a37a942e218f159d.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/cd3e10f583ba43f0a37a942e218f159d.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/cd3e10f583ba43f0a37a942e218f159d.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/cd3e10f583ba43f0a37a942e218f159d.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/cd3e10f583ba43f0a37a942e218f159d.svg#Aston Martin Flare")format("svg");
}

/* CSS Document */
/*★★★★★★★★テンプレート[始]★★★★★★★★*/

/*===============================================
	reset
===============================================*/
*{margin:0; padding:0; color:#000;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
} 
h1,h2,h3,h4,h5,h6,p,address,
ul,ol,li,dl,dt,dd,
table,caption,th,td,img,form{margin:0; padding:0; border:none; font-style:normal; font-weight:normal; font-size:100%; text-align:left;}
textarea{font-size:100%;}
img{vertical-align:bottom;}
li{list-style:none;}
/*===============================================
	a,text
===============================================*/
a:hover{text-decoration:underline;}
a{text-decoration:none; color:#1800ff;}
/*=============================================== 
	base
===============================================*/
html,body{height:100%;}
/*===============================================
	font
===============================================*/
body{font-family: 'Noto Sans JP', sans-serif;}
input,textarea,select{font-family: 'Noto Sans JP', sans-serif; font-size:12px;}
/* for IE6 */
* html body{font-family: 'Noto Sans JP', sans-serif;}
* html input, * html textarea{font-family: 'Noto Sans JP', sans-serif;}
h1,h2,h3,h4{font-family: "Aston Martin Flare"; font-weight: 700; }
p,li,table,th,td,dl,dd{font-family: 'Noto Sans JP', "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3",
 "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
/*===============================================
	align
===============================================*/
.center{text-align:center !important; margin: 0 auto !important;}
.textleft{text-align:left !important;}
.textright{text-align:right !important;}

/*===============================================
	他span
===============================================*/
.underL{text-decoration:underline !important;}
.displayN{display:none !important;}
.bold{font-weight:bold !important;}

/*===============================================
	cFix
===============================================*/
/*Opera Fix*/
body:before{content:""; height:100%; float:left; width:0; margin-top:-32767px;}
/*cFix*/
.cFix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
* html .cFix {height:1%;}
.cFix {display:block;}

/*===============================================
	共通部分
===============================================*/
#wrap{width: 100%;}
/* img mouse hover */
.btn:hover {opacity: 0.7;filter: alpha(opacity=70);-ms-filter: "alpha(opacity=70)";}
a:hover{text-decoration: none;}
.sp{display:none;}
.pc{display: inline;}
p{line-height: 2rem;}
.mb20{margin-bottom: 20px !important;}
.under_red{text-decoration: underline; text-decoration-color: red; text-decoration-style: double; }
select {
  -webkit-appearance: none;
  appearance: none;
}
/*===============================================
	フェードイン
===============================================*/
/* フェードインさせる要素 */
.block {
    opacity: 0; /* 最初は非表示にしておく */
    transition: all 2s; /* 動きを滑らかに */
}
/* フェードイン用のクラス */
.fadeIn {
    opacity: 1;
}


/*===============================================
	個別
===============================================*/

header {
  width: 100%;
	background: url(../img/main_ginza.png) no-repeat top;
	height: 654px;
}
header .in{
	width: 1000px;
	margin: 0 auto;
	position: relative;
}
header .in .logo{
	position: absolute;
	top: 220px;
	left: 0;
	width: 35%;
}
header .in .logo img{
	width: 100%;
}
header .in .catch{
	position: absolute;
	top: 250px;
	right: 0;
	width: 65%;
}
header h1{
	font-size: 2.5rem;
	color: #fff;
	text-align: center;
	letter-spacing: 1px;
	margin-bottom: 10px;
}
header p{
	font-size: 2rem;
	color: #fff;
	text-align: center;
}
header p span{
	font-size: 2.2rem;
	color: #fff;
	text-align: center;
	font-family: "Aston Martin Flare";
}



/*What's Aston Martin*/
.what{
	width: 100%;
	padding: 70px 0;
	background: url(../img/what_bg.png) no-repeat center;
}
.what .in{
	width: 1000px;
	margin: 0 auto;
	position: relative;
}
.what h1{
	text-align: center;
	color: #fff;
	font-size: 3rem;
	letter-spacing: 1px;
	margin-bottom: 30px;
}
.what p{
	color: #fff;
	text-align: center;
	margin-bottom: 30px;
}
.what .btn{
	width: 300px;
	margin: 0 auto;
	display: block;
	background: #000;
	text-align: center;
	position: relative;
}
.what .btn a{
	width: 100%;
	text-align: center;
	color: #fff;
	padding: 20px 0;
	display: block;
}
.triangle-button::after{
	/* 擬似要素で三角アイコンをつくる */
	content: '';
	display: inline-block;
	border-style: solid;
	border-width: 8px 0 8px 8px;
	border-color: transparent transparent transparent #fff;
	display: inline-block;
	width: 0;
	height: 0;
	/* 矢印アイコンの位置を設定 */
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%); /* translateYのみ */
}



/*Line up Vehicles*/
.LineUp{
	width: 100%;
	padding: 70px 0;
}
.LineUp h2{
	text-align: center;
	color: #000;
	font-size: 3rem;
	letter-spacing: 1px;
	margin-bottom: 30px;
}
.LineUp .DBX707{
	width: auto;
	background: url(../img/dbx707.png) no-repeat right top;
	height: 37vw;
	position: relative;
	background-size: cover;
}
.LineUp .DBX707 .tx{
	position: absolute;
	left: 10%;
	top: 11vw;
	width: 30vw;
}
.LineUp .DB12{
	width: auto;
	background: url(../img/db12.png) no-repeat right top;
	height: 37vw;
	position: relative;
	background-size: cover;
}
.LineUp .DB12 .tx{
	position: absolute;
	right: 10%;
	top: 11vw;
	width: 30vw;
}
.LineUp .vantage{
	width: auto;
	background: url(../img/vantage.png) no-repeat right top;
	height: 37vw;
	position: relative;
	background-size: cover;
}
.LineUp .vantage .tx{
	position: absolute;
	left: 10%;
	top: 11vw;
	width: 30vw;
}
.LineUp h3{
	color: #000;
	text-align: center;
	margin-bottom: 10px;
	font-size: 6vw;
}
.LineUp p{
	font-family: "Aston Martin Flare";
	text-align: center;
	font-size: 3vw;
	margin-bottom: 20px;
}
.LineUp .btn{
	width: 300px;
	margin: 0 auto;
	display: block;
	background: #000;
	text-align: center;
	position: relative;
}
.LineUp .btn a{
	width: 100%;
	text-align: center;
	color: #fff;
	padding: 20px 0;
	display: block;
}


/*Financial Plan*/
.plan{
	width: 1000px;
	padding: 50px 0;
	margin: 0 auto;
}
.plan h2{
	text-align: center;
	color: #000;
	font-size: 3rem;
	letter-spacing: 1px;
	margin-bottom: 30px;
}
.plan .in{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.plan .in .img{
	width: 49%;
}
.plan .in .tx{
	width: 48%;
	position: relative;
	padding: 20px 30px;
	display: inline-block;
	top: 130px;
}
.plan .in .tx:before, .plan .in .tx:after { 
  position: absolute;
  top: 0;
  content:'';
  width: 20px;
  height: 330px;
  display: inline-block;
}
.plan .in .tx:before {
  border-top: solid 1px #000;
  border-left: solid 1px #000;
  border-bottom: solid 1px #000;
  left: 0;
}
.plan .in .tx:after {
  content: '';
  border-top: solid 1px #000;
  border-right: solid 1px #000;
  border-bottom: solid 1px #000;
  right: 0;
}
.plan .in .tx p{
	line-height: 2rem;
	margin: 0 auto;
}
.plan .in .tx h3{
	line-height: 2rem;
	margin: 0 auto;
	position: relative;
	margin-bottom: 20px;
	padding-bottom: 10px;
}
.plan .in .tx h3:after{
	position: absolute;
	content: "";
	width: 120px;
	border-bottom: 1px solid #000;
	left: 0;
	bottom: 0;
}


/*CTA*/
.cta{
	width: 100%;
	padding-top: 100px;
	min-height: 520px;
	background: url(../img/cta_bg.png) no-repeat top center;
	margin-bottom: 70px;
}
.cta .in{
	width: 800px;
	min-height: 400px;
	margin: 0 auto;
	background: #fff;
	padding: 50px;
	border: 1px solid #c8c8c8;
}
.cta h2{
	font-size: 3rem;
	text-align: center;
	margin-bottom: 30px;
	position: relative;
	padding-bottom: 10px;
}
.cta h2:after{
	background: url(../img/cta_line.png) no-repeat;
	height: 6px;
	width: 200px;
	position: absolute;
	content: "";
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto ;
}
.cta p{
	text-align: center;
	font-size: 1.2rem;
	margin-bottom: 30px;
}
.cta .btn{
	width: 300px;
	margin: 0 auto;
	display: block;
	background: #000;
	text-align: center;
	position: relative;
}
.cta .btn a{
	width: 100%;
	text-align: center;
	color: #fff;
	padding: 20px 0;
	display: block;
}



/*フッター*/
footer{
	background: #000;
	width: 100%;
	padding: 50px 10% 10px;
}
footer .in{
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 30px;
}
footer .tx{
	width: 75%;
}
footer .tx .left{
	width: 75%;
	float: left;
}
footer .tx .right{
	width: 20%;
	float: right;
	margin-right: 5%;
}
footer .tx .right a img{
	width: 20%;
	margin: 0 2.5%;
}
footer .img{
	width: 25%;
}
footer .img img{
	width: 100%;
}
footer h2{
	color: #fff;
	text-align: center;
	margin-bottom: 10px;
	font-size: 2rem;
}
footer p{
	color: #fff;
}
footer #copy p{
	text-align: center;
}
footer .btn{
	width: 300px;
	border: 1px solid #fff;
	margin: 20px auto 0;
	display: block;
	background: #000;
	text-align: center;
	position: relative;
}
footer .btn a{
	width: 100%;
	text-align: center;
	color: #fff;
	padding: 15px 0;
	display: block;
}


@media screen and (max-width:640px) {
	#wrap{width: 100%;}
	p{font-size: 0.9rem; line-height: 1.8rem;}
	.sp{display:inline;}
	.pc{display:none !important;}


	header {
	  width: 100%;
		background: url(../img/main_ginzaSP.png) no-repeat bottom;
		height: 150vw;
	}
	header .in{
		width: 90%;
		margin: 0 auto;
		position: relative;
	}
	header .in .logo{
		top: 30vw;
		left: 0;
		width: 100%;
	}
	header .in .logo img{
		width: 60%;
		margin: 0 auto;
		display: block;
	}
	header .in .catch{
	position: absolute;
	top: 70vw;
	right: 0;
	width: 100%;
	}
	header h1{
		font-size: 2rem;
		letter-spacing: 1px;
		margin-bottom: 10px;
	}
	header p{
		font-size: 1.5rem;
		font-weight: bold;
	}
	header p span{
		font-size: 1.7rem;
	}

	/*What's Aston Martin*/
	.what{
		padding: 50px 5%;
		background: url(../img/what_bg.png) no-repeat bottom, #000;
	}
	.what .in{
		width: 100%;
		margin: 0 auto;
		position: relative;
	}
	.what h1{
		text-align: center;
		color: #fff;
		font-size: 1.8rem;
		letter-spacing: 1px;
		margin-bottom: 30px;
	}
	.what p{
		color: #fff;
		text-align: center;
		margin-bottom: 30px;
	}
	.what .btn{
		width: 70%;
		margin: 0 auto;
		display: block;
		background: #000;
		text-align: center;
		position: relative;
	}
	.what .btn a{
		width: 100%;
		text-align: center;
		color: #fff;
		padding: 15px 0;
		display: block;
	}
	.triangle-button::after{
		/* 擬似要素で三角アイコンをつくる */
		content: '';
		display: inline-block;
		border-style: solid;
		border-width: 8px 0 8px 8px;
		border-color: transparent transparent transparent #fff;
		display: inline-block;
		width: 0;
		height: 0;
		/* 矢印アイコンの位置を設定 */
		position: absolute;
		top: 50%;
		right: 20px;
		transform: translateY(-50%); /* translateYのみ */
	}



	/*Line up Vehicles*/
	.LineUp{
		width: 100%;
		padding: 70px 0 0;
	}
	.LineUp h2{
		font-size: 1.8rem;
		margin-bottom: 30px;
	}
	.LineUp .DBX707{
		width: auto;
		background: url(../img/dbx707SP.png) no-repeat right top;
		height: 125vw;
		position: relative;
		background-size: cover;
	}
	.LineUp .DBX707 .tx{
		position: absolute;
		left: 0%;
		top: 14vw;
		width: 100%;
	}
	.LineUp .DB12{
		width: auto;
		background: url(../img/db12SP.png) no-repeat right top;
		height: 125vw;
		position: relative;
		background-size: cover;
	}
	.LineUp .DB12 .tx{
		position: absolute;
		right: 0%;
		top: 14vw;
		width: 100%;
	}
	.LineUp .vantage{
		width: auto;
		background: url(../img/vantageSP.png) no-repeat right top;
		height: 125vw;
		position: relative;
		background-size: cover;
	}
	.LineUp .vantage .tx{
		position: absolute;
		left: 0%;
		top: 14vw;
		width: 100%;
	}
	.LineUp h3{
		color: #000;
		text-align: center;
		margin-bottom: 10px;
		font-size: 3rem;
	}
	.LineUp p{
		font-family: "Aston Martin Flare";
		text-align: center;
		font-size: 1.5rem;
		margin-bottom: 20px;
	}
	.LineUp .btn{
		width: 70%;
		margin: 0 auto;
		display: block;
		background: #000;
		text-align: center;
		position: relative;
	}
	.LineUp .btn a{
		width: 100%;
		text-align: center;
		color: #fff;
		padding: 15px 0;
		display: block;
	}


	/*Financial Plan*/
	.plan{
		width: 100%;
		padding: 50px 0 0;
		margin: 0 auto;
	}
	.plan h2{
		text-align: center;
		color: #000;
		font-size: 1.8rem;
		letter-spacing: 1px;
		margin-bottom: 30px;
	}
	.plan .in{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.plan .in .img{
		width: 100%;
	}
	.plan .in .img img{
		width: 100%;
	}
	.plan .in .tx{
		width: 90%;
		margin: 0 auto;
		position: relative;
		padding: 20px 30px;
		display: inline-block;
		top: -100px;
	}
	.plan .in .tx:before, .plan .in .tx:after { 
	  position: absolute;
	  top: 0;
	  content:'';
	  width: 20px;
	  height: 100%;
	  display: inline-block;
	}
	.plan .in .tx:before {
	  border-top: solid 1px #000;
	  border-left: solid 1px #000;
	  border-bottom: solid 1px #000;
	  left: 0;
	}
	.plan .in .tx:after {
	  content: '';
	  border-top: solid 1px #000;
	  border-right: solid 1px #000;
	  border-bottom: solid 1px #000;
	  right: 0;
	}
	.plan .in .tx p{
		line-height: 2rem;
		margin: 0 auto;
	}
	.plan .in .tx h3{
		line-height: 2rem;
		margin: 0 auto;
		position: relative;
		margin-bottom: 20px;
		padding-bottom: 10px;
	}
	.plan .in .tx h3:after{
		position: absolute;
		content: "";
		width: 120px;
		border-bottom: 1px solid #000;
		left: 0;
		bottom: 0;
	}


	/*CTA*/
	.cta{
		width: 100%;
		padding-top: 100px;
		height: auto;
		background: url(../img/cta_bgSP.png) no-repeat top center;
		margin-bottom: 70px;
		background-size: contain;
		min-height: auto;
	}
	.cta .in{
		width: 90%;
		height: auto;
		margin: 0 auto;
		background: #fff;
		padding: 20px 3% 30px;
		border: 1px solid #c8c8c8;
		min-height: auto;
	}
	.cta h2{
		font-size: 1.8rem;
		margin-bottom: 20px;
		padding-bottom: 10px;
	}
	.cta h2:after{
		background: url(../img/cta_line.png) no-repeat;
		background-size: contain;
		height: 6px;
		width: 50%;
		position: absolute;
		content: "";
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0 auto ;
	}
	.cta p{
		text-align: center;
		font-size: 0.9rem;
		margin-bottom: 20px;
		line-height: 1.5rem;
	}
	.cta .btn{
		width: 80%;
		margin: 0 auto;
		display: block;
		background: #000;
		text-align: center;
		position: relative;
	}
	.cta .btn a{
		width: 100%;
		text-align: center;
		color: #fff;
		padding: 15px 0;
		display: block;
		font-size: 0.9rem;
	}


	/*フッター*/
	footer{
		background: #000;
		width: 100%;
		padding: 50px 5% 10px;
	}
	footer .in{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 30px;
	}
	footer .tx{
		width: 100%;
	}
	footer .tx .left span{
		padding-left: 35px;
	}
	footer .tx .left{
		width: 100%;
		float: none;
		padding: 0 0 0 10%;
		line-height: 1.5rem;
		margin-bottom: 10px;
	}
	footer .tx .right{
		width: 100%;
		float: none;
		padding: 0 0 0 10%;
	}
	footer .tx .right a img{
		width: 10%;
		margin: 0 5% 0 0;
	}
	footer .img{
		width: 70%;
		margin: 0 auto 20px;
	}
	footer .img img{
		width: 70%;
		margin: 0 auto;
		display: block;
	}
	footer h2{
		color: #fff;
		text-align: center;
		margin-bottom: 10px;
		font-size: 1.5rem;
	}
	footer p{
		color: #fff;
		font-size: 0.7rem;
	}
	footer #copy p{
		text-align: center;
	}
	footer .btn{
		width: 70%;
		display: block;
		background: #000;
		text-align: center;
		position: relative;
	}
	footer .btn a{
		width: 100%;
		text-align: center;
		color: #fff;
		padding: 15px 0;
		display: block;
		font-size: 0.9rem;
	}

}