@charset "Shift_JIS";
/**
 * lineup.css
 * SONY nav-u < https://www.sony.jp/nav-u/lineup/ >
 */

/*--------------------------------------------------------------------------------
	common
--------------------------------------------------------------------------------*/
#Lineup a:link,
#Lineup a:visited,
#Lineup a:hover {
	color: #333;
	text-decoration: none;
}

#Lineup .arrowTxt{
	padding-left: 11px;
	background: url("../../lineup/images/arrow_s_black.gif") no-repeat 0 4px;
}

#Lineup .mod-subTitle {
	_margin-top: -0px;
}

div.section ul {
	margin: 0;
	padding: 0;
}

div.section li {
	margin: 0;
	padding: 0;
	list-style: none;
}

div.section a {
	display: block;
}

@media (max-width:640px) {
	#Lineup .mod-subTitle {
		margin-bottom: 5px;
		padding: 0 5px 5px 5px;
		font-size: 1.385em;
		line-height: 1.4;
		border-bottom: 1px solid #ccc;
		background: none;
	}
}

.vics .clear{
	clear:both;
}

.vics dt,
.vics dd{
	float:left;
	display:inline;
	text-align:left;
	margin:0 10px 0 0;
}

.vics dd{
	color: #666;
	font-size: 85%;
	padding:40px 0 0 0;
}

/*---- notice ----*/
div#notice {
	margin-top:30px;
	margin-bottom:10px;
}

div#notice p {
	margin:0 0 0.3em 0;
	color:#888;
	font-size:80%;
}

/*--------------------------------------------------------------------------------
	div.linup
--------------------------------------------------------------------------------*/
div.section {
	margin-top: 30px;
	padding-bottom: 32px;
	background: url("../../lineup/images/lineup_separator.gif") no-repeat left bottom;
	zoom: 1;
}

div.section:after {
	clear: both;
	content: " ";
	display: block;
	height: 0;
}

@media (max-width:640px) {
	div.section {
		margin-top: 15px;
		padding-bottom: 20px;
	}
}

/*--------------------------------------------------------------------------------
	div.linup div.product
--------------------------------------------------------------------------------*/
div.section .item {
	display: block;
	float: left;
	width: 520px;
	border-right: 1px solid #ddd;
	zoom: 1;
}

div.section .item:after {
	clear: both;
	content: " ";
	display: block;
	height: 0;
}

@media (max-width:640px) {
	div.section .item {
		float: none;
		padding-bottom: 25px;
		width: 100%;
		border-right: none;
	}
}

/* info
--------------------------------------------------------------------------------*/
div.section .info {
	display: block;
	float: left;
	width: 240px;
	color: #222;
}

div.section .info h3 {
	margin: 0;
	padding: 0;
	padding-bottom: 8px;
	font-size: 0.80em;
	font-weight: normal;
	line-height: 1.1;
	letter-spacing: 0.01em;
}

div.section .info h4 {
	margin: 0;
	padding: 0;
	padding-bottom: 10px;
	font-size: 2.45em;
	font-weight: normal;
	line-height: 0.8;
	letter-spacing: -0.02em;
}

div.section .info .mod-iconNew {
	background: url("../images/icon_new.gif") no-repeat;
}

div.section .info p.spec {
	font-size: 0.8em;
	line-height: 1.0;
}

div.section .info p.spec span.num {
	font-size: 1.9em;
	font-weight: bold;
	letter-spacing: -0.08em;
	vertical-align: baseline;
	color: #f25821;
}

div.section .info p.spec span.txt {
	font-size: 1.2em;
	font-weight: bold;
	letter-spacing: 0.02em;
	color: #f25821;
}

div.section .info ul {
	display: none;
	margin-left: -2px;
	padding-bottom: 8px;
	zoom: 1;
}

div.section .info ul:after {
	clear: both;
	content: "";
	display: block;
	height: 0;
}

div.section .info li {
	display: block;
	float: left;
	margin-left: 2px;
	padding: 0 5px;
	height: 28px;
	background: #fff;
	border: 2px solid #ccc;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

div.section .info p {
	margin: 0;
	padding: 0;
	padding-bottom: 10px;
	font-size: 1.0em;
	line-height: 1.3;
	letter-spacing: 0.01em;
}

@media (max-width:640px) {
	div.section .info {
		float: none;
		width: auto;
		max-width: 280px;
		overflow: hidden;
	}
	
	div.section .info h3 {
		font-size: 0.6em;
		letter-spacing: -0.03em;
		padding-bottom: 6px;
	}
	
	div.section .info h4 {
		font-size: 1.6em;
		padding-bottom: 10px;
	}
	
	div.section .info p.spec {
		display: none;
	}
	
	div.section .info ul {
		display: block;
	}
	
	div.section .info li {
		padding: 0;
	}
	
	div.section .info p {
		padding-bottom: 9px;
		font-size: 0.80em;
		letter-spacing: -0.01em;
	}
}

/* image
--------------------------------------------------------------------------------*/
div.section .image {
	display: block;
	float: right;
	width: 245px;
}

@media (max-width:640px) {
	div.section .image {
		margin-left: 15px;
		float: right;
		width: 45%;
		text-align: center;
	}
	div.section div.image img {
		max-width: 170px;
		width: 100%;
	}
}


/*--------------------------------------------------------------------------------
	div.linup div.function-cions
--------------------------------------------------------------------------------*/
div.section .function-icons {
	float: right;
	width: 217px;
	/width: 220px;
}

div.section .function-icons ul:after {
	clear: both;
    content: "";
    display: block;
	height: 0;
}

@media (max-width:640px) {
	div.section .function-icons {
		float: none;
		width: 100%;
	}
}

/* div.function-cions ul.icon1
--------------------------------------------------------------------------------*/
div.function-icons ul.icons1 {
	position: relative;
	margin-left: -15px;
	/margin-left: -30px;
	zoom: 1;
}

div.function-icons ul.icons1:after {
	clear: both;
    content: "";
    display: block;
	height: 0;
}

div.function-icons ul.icons1 li {
	display: block;
	float: left;
	margin-left: 15px;
	padding-bottom: 3px;
	height: 28px;
}

div.function-icons ul.icons1 li.padding-right {
	padding-right: 50px;
	/padding-right: 55px;
}

@media (max-width:640px) {
	div.function-icons ul.icons1 {
		margin-left: -9px;

	}
	div.function-icons ul.icons1 li {
		margin-left: 9px;
		width: auto;
	}
	div.function-icons ul.icons1 li.padding-right {
		padding-right: 0px;
	}
}

/* div.function-cions ul.icon2
--------------------------------------------------------------------------------*/
div.function-icons ul.icons2 {
	margin-top: 3px;
	margin-left: -1px;
	zoom: 1;
}

div.function-icons ul.icons2:after {
	clear: both;
    content: "";
    display: block;
	height: 0;
}

div.function-icons ul.icons2 li {
	display: block;
	float: left;
	margin-left: 1px;
	width: 35px;
	height: 25px;
}

div.function-icons ul.icons2 li span {
	display: none;
}

div.function-icons ul.icons2 li.cradle {
	background: url("../../lineup/images/icon_func_cradle.gif") no-repeat;
}

div.function-icons ul.icons2 li.touch-panel {
	background: url("../../lineup/images/icon_func_touch-panel.gif") no-repeat;
}

div.function-icons ul.icons2 li.auto-reroute {
	background: url("../../lineup/images/icon_func_auto-reroute.gif") no-repeat;
}

div.function-icons ul.icons2 li.detailed-map {
	background: url("../../lineup/images/icon_func_detailed-map.gif") no-repeat;
}

div.function-icons ul.icons2 li.intersection {
	background: url("../../lineup/images/icon_func_intersection.gif") no-repeat;
}

div.function-icons ul.icons2 li.vics-beacon {
	width: 37px;
	background: url("../../lineup/images/icon_func_vics-beacon.gif") no-repeat;
}

@media (max-width:640px) {
	div.function-icons ul.icons2 {
		margin-top: 0;
		margin-left: -3px;
	}
	div.function-icons ul.icons2 li {
		margin-top: 3px;
		margin-left: 3px;
		padding: 2px 0 1px 0;
		height: auto;
		font-size: 9px;
		text-align: center;
		border-radius: 3px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
	}
	div.function-icons ul.icons2 li span {
		display: inline;
	}
	div.function-icons ul.icons2 li.cradle {
		width: 88px;
		border: 1px solid #51b749;
		background: none;
		color: #51b749;
	}
	div.function-icons ul.icons2 li.touch-panel {
		width: 88px;
		border: 1px solid #51b749;
		background: none;
		color: #51b749;
	}
	div.function-icons ul.icons2 li.auto-reroute {
		width: 92px;
		border: 1px solid #2480bc;
		background: none;
		color: #2480bc;
	}
	div.function-icons ul.icons2 li.detailed-map {
		width: 82px;
		border: 1px solid #e3381d;
		background: none;
		color: #e3381d;
	}
	div.function-icons ul.icons2 li.intersection {
		width: 84px;
		border: 1px solid #e3381d;
		background: none;
		color: #e3381d;
	}
	div.function-icons ul.icons2 li.vics-beacon {
		width: 114px;
		border: 1px solid #a647a2;
		background: none;
		color: #a647a2;
	}

}

/*--------------------------------------------------------------------------------
	div.past-lineup
--------------------------------------------------------------------------------*/
div.past-lineup {
	margin-bottom: 40px;
	border: 1px solid #dfdfdf;
}

div.past-lineup ul {
	margin: 0;
	padding: 0;
}

div.past-lineup li {
	margin: 0;
	padding: 0;
	font-size: 0.9em;
	list-style: none;
}

div.past-lineup a {
	padding-left: 11px;
	background: url("../../lineup/images/arrow_s_black.gif") no-repeat 0 4px;
}

@media (max-width:640px) {
	div.past-lineup {
		margin-bottom: 20px;
		border: none;
	}
	div.past-lineup li {
		font-size: 1.0em;
	}
	div.past-lineup a {
		display: block;
		padding-left: 25px;
		background: url("../../lineup/images/arrow_s_black.gif") no-repeat 10px 6px;
	}
}

/* div.past-lineup div.inner
--------------------------------------------------------------------------------*/
div.past-lineup div.inner {
	padding: 17px 17px 35px 17px;
	border: 2px solid #f8f8f8;
	zoom: 1;
}

div.past-lineup div.inner:after {
	clear: both;
	content: "";
	display: block;
	height: 0;
}

div.past-lineup div.inner h3 {
	margin: 0;
	padding: 0;
	padding-bottom: 30px;
}

div.past-lineup div.inner span {
	display: block;
	padding-bottom: 5px;
	text-align: center;
}

div.past-lineup div.inner ul:after {
	clear: both;
	content: "";
	display: block;
	height: 0;
}

@media (max-width:640px) {
	div.past-lineup div.inner {
		padding: 0px;
		border: none;
	}
	div.past-lineup div.inner h3 {
		padding: 3px 3px 3px 5px;
		background: #ccc;
	}
	div.past-lineup div.inner span {
		display: none;
	}
}

/* div.past-lineup div.car-visual
--------------------------------------------------------------------------------*/
div.past-lineup div.car-visual {
	float: left;
	width: 350px;
}

div.past-lineup div.car-visual li {
	float: left;
	margin-left: 15px;
	padding: 6px 0 4px 0;
	width: 190px;
	border-bottom: 1px dotted #ccc;
}

div.past-lineup div.car-visual li.left {
	margin-left: 0;
	width: 140px;
}

@media (max-width:640px) {
	div.past-lineup div.car-visual {
		float: none;
		width: 100%;
		margin-bottom: 10px;
	}
	div.past-lineup div.car-visual li {
		margin-left: 0;
		padding: 11px 0px 9px 0;
		width: 100%;
		border-bottom: 1px solid #ddd;
	}
	div.past-lineup div.car-visual li.left {
		width: 100%;
	}
}

/* div.past-lineup div.car-audio
--------------------------------------------------------------------------------*/
div.past-lineup div.car-audio {
	float: right;
	width: 325px;
}

div.past-lineup div.car-audio ul {
	position: relative;
	margin-left: -15px;
	width: 340px;
}

*html div.past-lineup div.car-audio ul {
	left: -15px;
	width: 355px;
}

div.past-lineup div.car-audio li {
	float: left;
	margin-left: 15px;
	padding: 6px 0 4px 0;
	width: 155px;
	border-bottom: 1px dotted #ccc;
}

@media (max-width:640px) {
	div.past-lineup div.car-audio {
		float: none;
		width: 100%;
	}
	div.past-lineup div.car-audio ul {
		margin-left: 0;
		width: auto;
	}
	div.past-lineup div.car-audio li {
		float: none;
		margin-left: 0;
		padding: 11px 0px 9px 0;
		width: 100%;
		border-bottom: 1px solid #ccc;
	}
}