@charset "utf-8";

/*----------------------------------------------
 車両情報ページのみ適応
------------------------------------------------*/
/*フェアはこちら---*/
.newcar_fair_box_wrap {
  background: #212121;
  overflow: hidden;
  padding: 3% 0 10%;
}
.newcar_fair_title {
  padding: 0 0 2%;
}

/*リンク
------------------------------------------------*/
.newcar .image-map {
  position: relative;
  width: 100%;
  max-width: 750px; /* 任意 */
  margin: 0 auto;
}

.newcar .image-map img {
  width: 100%;
  height: auto;
  display: block;
}

.newcar .link-area {
  position: absolute;
  display: block;
  /* 透過で見えなくする */
  background-color: rgba(255, 0, 0, 0); /* テスト時に可視化 */
}

/* 座標は画像の比率で%で指定（例：画像上の位置） */

/*画像のサイズw750ｘh360*/
.tab1_menu .area1 {
  top: calc(140 / 360 * 100%);
  left: calc(40 / 750 * 100%);
  width: calc(330 / 750 * 100%);
  height: calc(90 / 360 * 100%);
}
.tab1_menu .area2 {
  top: calc(140 / 360 * 100%);
  left: calc(380 / 750 * 100%);
  width: calc(330 / 750 * 100%);
  height: calc(90 / 360 * 100%);
}
.tab1_menu .area3 {
  top: calc(235 / 360 * 100%);
  left: calc(40 / 750 * 100%);
  width: calc(330 / 750 * 100%);
  height: calc(90 / 360 * 100%);
}
.tab1_menu .area4 {
  top: calc(235 / 360 * 100%);
  left: calc(380 / 750 * 100%);
  width: calc(330 / 750 * 100%);
  height: calc(90 / 360 * 100%);
}

.tab1_cp .area1 {
  top: calc(430 / 540 * 100%);
  left: calc(30 / 750 * 100%);
  width: calc(330 / 750 * 100%);
  height: calc(70 / 540 * 100%);
}
.tab1_cp .area2 {
  top: calc(430 / 540 * 100%);
  left: calc(385 / 750 * 100%);
  width: calc(330 / 750 * 100%);
  height: calc(70 / 540 * 100%);
}

/*tab1のボタン*/
.area_tab1_btn {
  top: calc(10 / 80 * 100%);
  left: calc(130 / 750 * 100%);
  width: calc(490 / 750 * 100%);
  height: calc(70 / 80 * 100%);
}

/*tab2のボタン*/
.area_tab2_btn_kicks {
  top: calc(630 / 730 * 100%);
  left: calc(40 / 750 * 100%);
  width: calc(670 / 750 * 100%);
  height: calc(90 / 730 * 100%);
}
.area_tab2_btn_elgrand {
  top: calc(110 / 470 * 100%);
  left: calc(90 / 750 * 100%);
  width: calc(570 / 750 * 100%);
  height: calc(310 / 470 * 100%);
}

.area_tab2_btn_leaf {
  top: calc(360 / 470 * 100%);
  left: calc(130 / 750 * 100%);
  width: calc(490 / 750 * 100%);
  height: calc(60 / 470 * 100%);
}


/*タブ全体を囲む
---------------------------------*/
.newcar_contents {
  background: #fff;
}
.tabs_wrap {
	width: 100%;
  margin: 0 auto 0;
}
.tabs {
}
@media only screen and ( max-width: 749px ) {
  .tabs {

  }
}
/*タブタイトル部分
---------------------------------*/
.tabs_control {
  position: relative;
}

/*タブの固定のための設定*/
.tabset1 .tab_topmenu {
  position: sticky;
  top: var(--sticky-top, 0px);
  z-index: 100;
}

.tabset1 .tabs ul{
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
}

.tabset1 .tabs ul {
	list-style: none outside none;
	margin: 0 auto;
	font-size: 0;
}

.tabset1 .tabs li {
	width: calc(100% / 2);/*タブ数*/
	margin: 0 auto 0;
	display: inline-block;
}

.tabset1 .tabs ul li:nth-child(1) a {
	background: url("../img/newcar/tab1.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	transition:background .3s;
}
.tabset1 .tabs ul li:nth-child(2) a {
	background: url("../img/newcar/tab2.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	transition:background .3s;
}
.tabset1 .tabs ul li:nth-child(1) a:hover {
	background: url("../img/newcar/tab1_on.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	transition:background .3s;
}
.tabset1 .tabs ul li:nth-child(2) a:hover {
	background: url("../img/newcar/tab2_on.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	transition:background .3s;
}
.tabset1 .tabs ul li:nth-child(1).active a {
	background: url("../img/newcar/tab1_on.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;  
	-o-background-size: cover; 
}
.tabset1 .tabs ul li:nth-child(2).active a {
	background: url("../img/newcar/tab2_on.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;  
	-o-background-size: cover; 
}

.tab_title a {
	display: block;
}

.tabs a  {
	color: #fff;
	display: block;
	text-decoration: none;
	white-space: nowrap;
}

/*.tabs ul li a img {
	opacity: 1;
}
.tabs ul li a:link img:hover {
	opacity: 1;
}
*/
/*現在のタブ
---------------*/
.active {
}
.active a {
	color: white;
}
.tabs ul li.active a img {
}


/*タブコンテンツを囲む
---------------------------------*/
#tab-1 {
}
#tab-2 {
}


/*非表示 ------------------------------*/