@charset "UTF-8";

/* common */
body{overflow-x: hidden;}
.va_cont *{ box-sizing:border-box; }
.va_cont img{ width:auto; max-width:100%; height:auto; }
.va_cont figure{ margin:0; }

.va_cont a,
.va_cont a:link,
.va_cont a:visited,
.va_cont a:hover,
.va_cont a:active{ text-decoration:none; }
.va_cont a,
.va_cont a img{ transition: all 0.3s ease; }
.va_cont a:hover img{ opacity:0.7; }

.va_cont h1,
.va_cont h2{ font-size:32px; line-height: 1.6; text-align:center; }
.va_block p,
.va_block li{ line-height:2; }

/* layout */
.va_cont{ width: 982px; margin-left:auto; margin-right:auto; padding:0 0 60px; box-sizing:border-box; }
.va_block{ margin-top: -100px; padding-top: 100px; margin-bottom:80px; }
.va_block p,
.va_img,
.va_cont .va_block figure{ margin-bottom:40px; font-size:1.2em; }

/* content */
.va_ttl{width:100vw; margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); margin-bottom:60px; position:relative; text-align:center; max-height:500px; overflow:hidden; }
.va_ttl > div{ position:absolute; z-index:2; width:100%; height:100%;display: flex; justify-content: center; align-items: center; max-height:500px; }
.va_ttl img{ z-index:1; width:100%; max-width:none; height:100%; object-fit: cover; }
.va_ttl h1{ color:#fff; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7); }

.va_block figcaption{ font-weight:bold; margin-bottom:10px; }

.va_type{ border:solid 1px #3296ff; color:#3296ff; padding:16px; margin-bottom:40px; }
.va_type li{ padding-bottom:10px; font-weight:bold; }
.va_type li:last-child{ padding-bottom:0; }

.va_lineup{ display: flex; flex-wrap: wrap; }
.va_lineup > li{ display: flex; width:30%; margin:0 5% 30px 0; }
.va_lineup > li:nth-child(3n){ margin:0 0 30px;}
.va_lineup > li > a{ display: flex; flex-direction: column; width:100%; /* IE11のバグ対策 */ }
.va_lineup > li > a:hover{ text-decoration:underline; }
/*.va_lineup > li > a > span{ margin-top: auto; text-align: right; }*/
.thumbnail{ margin-bottom:5px; }
.va_block .model_name{ text-align:center; font-weight:bold; font-size:22px; margin-bottom:5px; }
.va_block .other_list{ margin-bottom:0;font-size:0.8em; }

.va_block ol li{ font-weight:bold; text-align:center; font-size:1.2em; }

/* mobile */
@media screen and (min-width:768px) and (max-width: 982px){
	/* correction */
	main,
	header,
	.footer_box,
	#footer_sitemap{ min-width: auto; }
	#header_inner,
	.Breadcrumb ul,
	.history_box_tab,
	.history_box_inner{ width: auto; }
	.footer_sitemap02,
	.footer_sitemap03{ margin-top:30px; }
	
	/* layout */
	.va_ttl{ margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); }
	.va_cont{ width: 100%; padding:0 20px 60px; }
}

/* mobile */
@media screen and (max-width: 768px){
	/* common */
	.va_cont h1,
	.va_cont h2{ font-size: 140%; }
	.va_cont h2{ text-align:left; }
	.va_cont p,
	.va_cont li{ font-size: 88.75%; line-height: 1.8; }
	
	/* layout */
	.va_cont{ width: 100%; padding:0 20px 40px; }
	.va_block{ padding-bottom:0; margin-bottom:60px; }
	.va_cont p,
	.va_img{ margin-bottom:20px; }

	/* content */
	.va_ttl{ max-height:none; height:400px; }
	@supports (background:paint(id)) {
		.va_ttl { margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); }
	}
	.va_ttl > div{ max-height:400px; }
	.va_ttl h1 > span >span{ white-space: nowrap; }
	
	.va_block figcaption{ font-size:0.8em; }
	
	.va_type{ margin-bottom:20px; }
	.va_type li span{ display:block; }
	
	.va_lineup > li{ width:50%; margin:0; }
	.va_lineup > li:nth-child(3n){ margin:0;}
	.va_lineup > li:nth-child(odd){ padding:0 10px 20px 0;}
	.va_lineup > li:nth-child(even){ padding:0 0 20px 10px;}
	.va_block .model_name {font-size: 90.75%;}
	.va_block .other_list{ line-height:1.6; }
	
	.va_block ol li{ text-align:left; font-size:1em; }
}