@charset "utf-8";
/**************************************************************************************************************************/
/**************************************************************************************************************************/
/*PC*/
@media screen and (max-width:1200px) {

/****タイトル（車種）****/
	div.A2-1 {
		width: 100%;     
	}
	body.mx-5.usa.fr div.A2-1, body.eu.fr div.A2-1, body.adr div.A2-1 {
		width: 100%;     
	}
	div.A2-1-3 .menu_title2 {
		margin-right: 5px;
	}
	div.A2-1-2 {
		padding: 0px;
	}
	div.A2-1-2 p.menu_title {
		margin-top: 0px;
	}
	
	
	#container,#container_v {     //330_change
		margin-top: 165px;
	}
	
/****************コンテンツ*****************/

	.body .bodydiv {
		margin: 0.5em 0;
		max-width: 100%;
	}
	.body .bodydiv img.image {
		max-width: 70%;
	}
	.body .bodydiv table td img.image {
		max-width:100%;
	}

}
/**************************************************************************************************************************/
/**************************************************************************************************************************/
@media screen and (max-width:1096px) {

/****タイトル（車種）****/
body.usa.es div.A2-1, body.usa.fr div.A2-1 {
		margin-top:2px;     
	}
	body.usa.es .menu_title, body.usa.fr .menu_title {
		margin-top: 20px;
		text-align: center;
		margin-top: 3px;
	}
	body.usa.es .menu_title img, body.usa.fr .menu_title img {
		display:none;
	}
	body.usa.es div.A2-1-3 .menu_title2, body.usa.fr div.A2-1-3 .menu_title2 {
		margin-top: 23px;
	}
	/******************************/
	body.usa.es div.A2-1-2 .menu_title img+img, body.usa.fr div.A2-1-2 .menu_title img+img{
		width: 340px;
		display:inline-block;
	}

}
/**************************************************************************************************************************/
/**************************************************************************************************************************/
@media screen and (max-width:1040px) {

/****タイトル（車種）****/
body.mx-5.usa.fr #header, body.eu.fr #header, body.adr #header {
		background-size: 37px;
		background-position: 15px 4px;
	}
body.mx-5.usa.fr div.A2-1-3 .menu_title2, body.eu.fr div.A2-1-3 .menu_title2, body.adr div.A2-1-3 .menu_title2 {
		margin-top: 3px;
	}
	body.mx-5.usa.fr.top #header, body.eu.fr.top #header, body.adr.top #header {
		background-size: 60px;
		background-position: 3% 20px;
	}
	body.mx-5.usa.fr div.A2-1, body.eu.fr div.A2-1, body.adr div.A2-1 {
		margin-top:2px;    
	}}
/**************************************************************************************************************************/
/**************************************************************************************************************************/
@media screen and (max-width:1000px) {

/********ここからドロワー********/

/*Mazda rogo of menu*/
	#header {
		background-size: 37px;
		background-position: 15px 4px;
	}
/*Mazda rogo index*/
	.top #header {
		background-size: 60px;
		background-position: 3% 20px;
	}

/****タイトル（車種）****/
	div.A2-1 {
		margin-top:2px;     
	}
	.menu_title {
		margin-top: 20px;
		text-align: center;
		margin-top: 3px;
	}
body.ja .menu_title {
		text-align: center;
		margin-top: 3px;
	}
	.menu_title img {
		display:none;
	}
	body.mx-5.usa.es div.A2-1-3 .menu_title2 {
		margin-top: 3px;
	}
	/******************************/
	div.A2-1-2 .menu_title img+img{
		width: 340px;
		display:inline-block;
	}
	
	body.ja div.A2-1-2 .menu_title img+img{
		width: 340px;
		display:inline-block;
	}

/****Visual search****/
	#visual .box {
		height: 423px;
		width: 752px;
	}
	#container{
		margin-top:154px;
	}

	.clear1{
		display:none;
	}
/****キーワード検索*********/
	#keywords1 {
		font-size: 13px;
		height: 36px;
	}
	body.ja #keywords1 {
		font-size:15px;
	}
	div.movie_search_bt {
		  padding: 0 13px;
	}
	body:not(.ja) div.searchText {
		width: 40%;	
	}
	ul.movie_search input.movie_search_bt{
		width: 12%;
	}
	ul.movie_search input.movie_search_bt {
		padding: 0px 8px;
		font-size: 13px;
	}
}

/********spacial table***********/
@media screen and (max-width:800px) {

body.cx-3.usa.fr #id10030100 table{
	table-layout: auto;
}

}
/********spacial table***********/


/**************************************************************************************************************************/
/**************************************************************************************************************************/
/*tablet*/
@media screen and (max-width:768px) {

/****表紙****/
	br.kai {
	    display:block;
        }
        #manual {
	    padding-top: 5px;
        }
	.model_title span{
		display:block;
		font-size:90%;
		padding:0.3em 0 0 0;
	}
	
/****タイトル（車種）****/
	div.A2-1 {
		height: 30px;
	}
	body.mx-5.usa.fr div.A2-1, body.eu.fr div.A2-1, body.adr div.A2-1 {
		height: 30px;    
	}
	div.A2-1-2 p img {
		width: 210px;
	}
	div.A2-1-1 img {
		width: 153px;
	}
	div.A2-1-1 {
		width:10%;
		margin:0;
	}
	div.A2-1-2 {
		width:80%;
		vertical-align:top;
	}
	div.A2-1-3 {
		width:10%;
		margin:0;
	}

/****キーワード検索*********/
	#searchform1 {
		width: 88%;
	}
	#keywords1 {
		font-size: 12px;
		height: 36px;
	}
	.movie_search_bt {
		vertical-align: top;
	}
	#searchBg {
		background-position: 50% 201px;
	}
	body#search div#container {
		margin-top: 210px;
	}
	div.searchText {
		width: 55%;	
	}
	body:not(.ja) div.searchText {
		width: 55%;	
	}
	div.movie_search_bt {
		  padding: 0 13px;
        }
	ul.movie_search input.movie_search_bt{
		width: 17%;
	}
	ul.movie_search input.movie_search_bt {
		padding: 0px 8px;
		font-size: 12px;
}
	
/******動画を見る********/
	#container_v div.box div.boxcol a p.video_link {
		bottom:0em;
	}

	#container{
		margin-top:125px;
	}
	.v_box{
		margin-top: 75px;
	}

/*******その他**********/
	p.menu span {
		display: none;
	}
	div.card_d {
		width: 440px;
		height: auto;
	}
	div.card_e {
		width: 440px;
		height: auto;
	}
	div.set {
		margin-left: 20px;
	}
	div.fontsize div, div.uicolor div {
		width: 100%;
		margin-bottom: 15px;
	}

/* for Galaxy
div.gmenu ul li div a:before {
	position:inline-block;
	content:"aa";
	float:left;
	font-size:0.1px;
	line-height:0.1;
	color:transparent;
	height:1px;
	width:0;
}
*/

/****************コンテンツ*****************/
	#contents {
		margin-top: 140px;
	}
	#header .familylinks	{
		min-height: 22px;
	}
	h1.title {
		padding: 4px 0px;
		height: auto;
	}
	div.small_table {
		font-size:60%;
	}
	.page #id06150100 td.entry p.warningtitle,
	.page #id06150100 td.entry p.cautiontitle,
	.page #id06150100 td.entry p.notetitle,
	.page #id06140103 td.entry p.warningtitle,
	.page #id06140103 td.entry p.cautiontitle,
	.page #id06140103 td.entry p.notetitle {
		height:50px;
	}
	.page #id06150100 td.entry p.warningtitle:after,
	.page #id06150100 td.entry p.cautiontitle:after,
	.page #id06150100 td.entry p.notetitle:after,
	.page #id06140103 td.entry p.warningtitle:after,
	.page #id06140103 td.entry p.cautiontitle:after,
	.page #id06140103 td.entry p.notetitle:after {
		margin-top:5px;
	}
	table ol, table ul {
		padding-left:19px;
	}
	html[lang="en"] table.table ol li p+.caution,
	html[lang="es"] table.table ol li p+.caution,
	html[lang="fr"] table.table ol li p+.caution,
	html[lang="de"] table.table ol li p+.caution,
	html[lang="nl"] table.table ol li p+.caution,
	html[lang="en"] table.table ol li p+.waring,
	html[lang="es"] table.table ol li p+.waring,
	html[lang="fr"] table.table ol li p+.waring,
	html[lang="de"] table.table ol li p+.waring,
	html[lang="nl"] table.table ol li p+.waring,
	html[lang="en"] table.table ol li p+.note,
	html[lang="es"] table.table ol li p+.note,
	html[lang="fr"] table.table ol li p+.note,
	html[lang="de"] table.table ol li p+.note,
	html[lang="nl"] table.table ol li p+.note {
		margin-left:-19px;
	}

}

/**************************************************************************************************************************/
/**************************************************************************************************************************/
@media screen and (max-width: 680px) {

/****タイトル（車種）****/
	div.A2-1 {
		width: 97%;
	}
	body.mx-5.usa.fr div.A2-1, body.eu.fr div.A2-1, body.adr div.A2-1 {
		width: 97%;    
	}
	
	#visual .box {
		height:370px;
		width:480px;
	}
	
/******シーン別検索******/
	div.colm1 img.colm1 {
		display: block;
	}
	div.colm1 { 
		display:block;
		margin: 5px 10px;
		padding-bottom:10px;
		width: 316px;
		height:auto;
		overflow:hidden;
		background:#292929;
	}
	.boxcol p {
		padding-bottom: 0.2em
	}
	div.colm1 p {
		font-size: 1.2em;
		padding: 0.2em 0;
	}
	div.colm1 div p {
		font-size: 1.1em;
		padding: 0.2em 0;
	}
	/***アコーディオンの開閉ボタン***/
	.menu_btn, .menu_btn2 {
		display:none;
	}

/******動画を見る******/
	/*
	#container_v p.l1 {
		font-size: 1.05em;	
	}
	*/
	#container_v div.box div.boxcol a p.video_link {
		font-size: 15px;
	}
	#container_v div.colm1 p {
		padding:0;
	}
	#container_v div.colm1 div p {
		font-size: 15px;
		margin: 15px 10px 5px 10px;
	}
	#container_v div.colm1 {
	hight: auto;
	}
	
	div.aco_content {
		margin-top:50px;
	}
/****************コンテンツ*****************/
	#ajaxLoader {
		width: 17%;
		height: 80%;
	}
	div.small_table {
		font-size:45%;
		margin-left:0.1em;
		margin-right:0.1em;
	}
	#id05030101 div.table {
		font-size:70%;
	}
	#id05030101 div.table+ol+p+img+div.table {
		font-size:70%;
	}
	#id05030101 div.table+ol+p+img+div.table th,
	#id05030101 div.table+ol+p+img+div.table td {
		padding:0;
	}

}


/**************************************************************************************************************************/
/**************************************************************************************************************************/
/* iphone */
@media screen and (max-device-width: 480px) {
	#selector { property: value; }
	div.sec_title_bar01 p.sec,
	div.sec_title_bar02 p.sec,
	div.sec_title_bar03 p.sec,
	div.sec_title_bar04 p.sec,
	div.sec_title_bar05 p.sec{
		padding: 5px 5px 8px 15px;
	}

/*330_add*/
p.SStitle {
 padding:0 0 0 1.8em;
}

/*0404_add*/
h1.title {
	display:none;
}
/*0404_add*/
.familylinks{
	min-height: 40px;
}

#contents{
	margin-top:120px;
}

/*330_add_pankuzu*/
/*330_add*/
.model_title span{
	font-size:80%;
}

/*0403_add*/
/*URL Link modal*/
.ui-dialog-content {
	font-size:0.6em;
}

}


/**************************************************************************************************************************/
/**************************************************************************************************************************/
/* smart_phone */
@media screen and (max-width:480px) {

body {
	overflow-x:hidden;
}

/*Mazda rogo of menu*/
	#header {
		background-size: 30px; 
	}
	body.mx-5.usa.fr #header, body.eu.fr #header, body.adr #header{
		background-size: 30px; 
	}
/*Mazda rogo index*/
	.top #header {
		background-size: 38px;
		background-position: 3% 10px;
	}
	body.mx-5.usa.fr.top #header, body.eu.fr.top #header, body.adr.top #header{
		background-size: 38px;
		background-position: 3% 10px;
	}	
/****表紙****/
	img.carname {
		max-width:1000px;
		width:70%;
	}
	body.cx-5.usa img.carname{
		width:65%;
	}
	.model_title span{
		font-size:80%;
	}
/****タイトル（車種）****/
	div.A2-1 {
		width: 99%;
	}
	body.mx-5.usa.fr div.A2-1, body.eu.fr div.A2-1, body.adr div.A2-1 {
		width: 99%;    
	}
	div.A2-1-1 img {
		width: 134px;
	}
	div.A2-1-2  {
		width:70%;
	}
	div.A2-1-2 p.menu_title {
		font-size: 14px;
	}
	div.A2-1-3 ,div.A2-1-3 div.menu_title2 {
		height:30px;
	}
	div.A2-1-3 div {
		margin-left:10px;
	}
	div.A2-1-1,A2-1-3 {
		width:15%;
	}
	div.A2-1-3 div.menu_title2 {
		margin:0;
	}
	/*******************************************************/
	div.A2-1-2 .menu_title img+img {
		 width:233px;
		 height:26px;
	 }
	body.usa.es div.A2-1-2 .menu_title img+img, body.usa.fr div.A2-1-2 .menu_title img+img {
		 width:233px;
		 height:26px;
	 }
	body.ja div.A2-1-2 .menu_title img+img {
		 width:233px;
		 height:26px;
	 }
       /*******************************************************/

/*****シーン別検索*********/
	div.colm1,div.col2 {
		margin-left:0;
		margin-right:0;
	}

/*****ビジュアル検索******/
#visual .box {
	min-height: 300px;
	width:320px;
}

/*****キーワード検索******/
ul.movie_search input.movie_search_bt {
	font-size: 11px;
	padding: 0px 7px;
}
ul.movie_search input.movie_search_bt{
	width: 21%;
}
body.ja ul.movie_search input.movie_search_bt{
	width: 11%;
}


.parentlink{
	height: auto;
}


#searchform1 {
	width: 90%;
}
#keywords1 {
	font-size: 12px;
	height: 36px;
}

body.ja #keywords1 {
	font-size: 12px;
}
div.searchText {
	width: 67%;
}
body:not(.ja) div.searchText {
	width: 67%;	
}


table.set {
	margin: 0px 10px;
}
table.set p {
	margin: 0px;
	font-weight: bold;
	font-family:DefaultBold, Arial, Helvetica, sans-serif;
	font-size: 17px;
	color: #FFFFFF;
}
body.ja table.set p {
	font-weight: bold;
	font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ','Meiryo UI','ＭＳ Ｐゴシック',sans-serif;
}

table.set p.set_text {
	font-size: 23px;
}

div.card_d {
	width: 315px;
	height: auto;
}
div.card_e {
	width: 315px;
	height: auto;
}


/****************コンテンツ*****************/	
#ajaxLoader {
	background-position: 50% 250px;
}
h1.title {
	display:none;
}
#contents {
	font-size:80%;
	margin-top: 107px;
}
/*URL Link modal*/
.ui-dialog-content {
	font-size:0.6em;
}
#header .line_title {
	font-size:16px;
	margin-top:5px;
}
p.cautiontitle:after,
p.cautiontitle.opened:after,
p.warningtitle:after,
p.warningtitle.opened:after,
p.notetitle:after,
p.notetitle.opened:after {
	margin-top:-5px;
	 -webkit-transform: scale(0.9); 
	 -moz-transform: scale(0.9); 
}
div.small_table {
	font-size:25%;
}
div.small_table table colgroup col:nth-child(2) {
	with:20%;
}
.page #id06140102 td.entry p.warningtitle,
.page #id06140102 td.entry p.cautiontitle,
.page #id06140102 td.entry p.notetitle {
	height:50px;
}
.page #id06140101 td.entry p.warningtitle,
.page #id06140101 td.entry p.cautiontitle,
.page #id06140101 td.entry p.notetitle{
	height:50px;
}
.page #id06140102 td.entry p.warningtitle:after,
.page #id06140102 td.entry p.cautiontitle:after,
.page #id06140102 td.entry p.notetitle:after {
	margin-top:5px;
}
.page #id06140101 td.entry p.warningtitle:after,
.page #id06140101 td.entry p.cautiontitle:after,
.page #id06140101 td.entry p.notetitle:after {
	margin-top:12.5px;
	margin-right:20px;
}
div.open_close {
	font-size:12px;
}
div.open_close img {
	width:12px;
}
p.warningtitle {
	position:relative;
}

/*for expect Japanese*/
table.table th,
table.table td {
	padding:0.2em 0.2em 0.2em 0.2em;
}

div.table {
	margin: 0.2em 0em 0.2em 2em;
}

ol.numStep.olStart div.table {
	margin-right:-2.2em;
}

table.table {
	font-size:10px;
}

#header .familylinks {
	padding-bottom:5px;
}

table ol,
table ul {
	padding-left:16px;
}
html[lang="en"] table.table ol li p+.caution,
html[lang="es"] table.table ol li p+.caution,
html[lang="fr"] table.table ol li p+.caution,
html[lang="de"] table.table ol li p+.caution,
html[lang="nl"] table.table ol li p+.caution,
html[lang="en"] table.table ol li p+.waring,
html[lang="es"] table.table ol li p+.waring,
html[lang="fr"] table.table ol li p+.waring,
html[lang="de"] table.table ol li p+.waring,
html[lang="nl"] table.table ol li p+.waring,
html[lang="en"] table.table ol li p+.note,
html[lang="es"] table.table ol li p+.note,
html[lang="fr"] table.table ol li p+.note,
html[lang="de"] table.table ol li p+.note,
html[lang="nl"] table.table ol li p+.note {
	margin-left:-16px;
}

p.notetitle,
p.cautiontitle,
p.warningtitle {
	margin-left:0px;
	padding-left:0;
}
p.cautiontitle:before,
p.warningtitle:before,
p.notetitle:before {
	 margin-left:0.8em;
	 margin-top:-10px;
}
p.warningtitle:before {
	content: url(../img/warning_mark_b_sp.png);
}
p.cautiontitle:before {
	content: url(../img/caution_mark_b_sp.png);
}
p.notetitle:before {
	content: url(../img/note_mark_b_sp.png);
}

ol li p.notetitle:before,
ul li p.notetitle:before,
ol li p.warningtitle:before,
ul li p.warningtitle:before,
ol li p.cautiontitle:before,
ul li p.cautiontitle:before {
	margin-left:1.1em;
}

sup.sup {
	bottom:0.2em;
}


/************es*********************/
body.es .page .warning{
	min-width:180px;
}
/************fr*********************/
body.fr .page .warning {
	min-width:135px;
}
body.fr .page .note {
	min-width:150px;
}
/************de*********************/
body.de .page .warning {
	min-width:135px;
}
body.de .page .note {
	min-width:150px;
}
/************nl*********************/
body.nl .page .warning {
	min-width:135px;
}
body.nl .page .note {
	min-width:150px;
}

/************jpn********************/
html[lang="jpn"] .page .cautionframe dl dd {
	min-height:25px;
}

}


/**************************************************************************************************************************/
/**************************************************************************************************************************/
@media screen and (max-width:370px) {

/*Mazda rogo index*/
	.top #header {
		background-size: 33px;
		background-position: 3% 10px;
	}
	body.mx-5.usa.fr.top #header, body.eu.fr.top #header, body.adr.top #header{
		background-size: 33px;
		background-position: 3% 10px;
	}
body.en .menu li,
body.es .menu li,
body.fr .menu li,
body.de .menu li,
body.nl .menu li {
	width: 55px;
}

/******************ES,FR*********************/
body.es div.gmenu ul li div.gmenu_visual_chi img{
	margin-left:11px;
}
body.es div.gmenu ul li div.gmenu_movie_chi img{
	margin-left:11px;
}
/********************************************/


div.A2-1-3 div.menu_title2 a {
	background-size: 69%;
}


#ajaxLoader {
	width: 17%;
	height: 78%;
}

/*330_add infobotton*/
div.A2-1-3 div.menu_title2 a {
	height:100%;
}

div.small_table {
	font-size:60%;
}

p.Subject, p.subject {
	margin-bottom:0.4em;
	line-height:1.5;
}

}



/*表紙*/
@media screen and (max-height:768px) and (orientation:landscape) {
/*for iPad*/

.model_title {
	margin-top:5px;
}

img.carname {
    width: 35%;
}
#manual {
    width: 35%;
}
.start_bn p {
	margin-top:0.3em;
}
body.top .view {
	width:80%;
	margin-top:1.8em;
}

}

@media screen and (max-height:375px) and (orientation:landscape) {
/*for smartphone*/


.top #header {
	background-position:3% 0.1em;
}
 body.mx-5.usa.fr.top #header, body.eu.fr.top #header, body.adr.top #header {
	background-position:3% 0.1em;
}

img.carname {
    width: 35%;
}
#manual {
    width: 25%;
}
.start_bn p {
	margin-top:0.1em;
}
body.top .view {
	width:50%;
	margin-top:1.5em;
}

}