@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(130 / 360 * 100%);
  left: calc(40 / 750 * 100%);
  width: calc(330 / 750 * 100%);
  height: calc(90 / 360 * 100%);
}
.tab1_menu .area2 {
  top: calc(130 / 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のボタン*/
.area_tab1_btn {
  top: calc(10 / 80 * 100%);
  left: calc(130 / 750 * 100%);
  width: calc(490 / 750 * 100%);
  height: calc(40 / 80 * 100%);
}


/*tab2のボタン*/
.area_tab2_btn_kicks {
  top: calc(510 / 730 * 100%);
  left: calc(40 / 750 * 100%);
  width: calc(670 / 750 * 100%);
  height: calc(140 / 730 * 100%);
}
.area_tab2_btn_elgrand {
  top: calc(290 / 470 * 100%);
  left: calc(40 / 750 * 100%);
  width: calc(660 / 750 * 100%);
  height: calc(100 / 470 * 100%);
}
.area_tab2_btn_leaf {
  top: calc(90 / 470 * 100%);
  left: calc(130 / 750 * 100%);
  width: calc(490 / 750 * 100%);
  height: calc(240 / 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;
  background: #000021;
}

.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/fair/fair1/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/fair/fair1/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/fair/fair1/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/fair/fair1/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/fair/fair1/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/fair/fair1/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 {
}


/*決算フェアよりコピペ*/
/*キラリエフェクト設定
---------------------------------------------------*/
.tab1_mv_box {
  position: relative;
  overflow: hidden;
}
.tab1_mv_box img {
  display: block;
  width: 100%;
  height: auto;
}
.tab1_mv_text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.tab2_elgrand_box {
  position: relative;
  overflow: hidden;
}
.tab2_elgrand_box img {
  display: block;
  width: 100%;
  height: auto;
}
.tab2_elgrand_text {
  position: absolute;
  top: 25%;
  left: 0;
  width: 100%;
}
/*キラリエフェクト設定ここまで
---------------------------------------------------*/

.tab1_price_box {
  position: relative;
}
.tab1_price {
  position: absolute;
  top: 13%;
  left: 52.5%;
}
.tab1_price {
  width: calc(290 / 750 * 100%);
  max-width: 290px;
  margin: 0 auto;
}
.tab1_price2 {
  position: absolute;
  top: 22%;
  left: 52.5%;
}
.tab1_price2 {
  width: calc(290 / 750 * 100%);
  max-width: 290px;
  margin: 0 auto;
}

.tab2_price_box {
  position: relative;
}
.tab2_price {
  position: absolute;
  top: 25%;
  left: 9.5%;
}
.tab2_price_ariya {
  position: absolute;
  top: 15%;
  left: 9.5%;
}
.tab2_price {
  width: calc(290 / 750 * 100%);
  max-width: 290px;
  margin: 0 auto;
}
.tab2_price_ariya {
  width: calc(290 / 750 * 100%);
  max-width: 290px;
  margin: 0 auto;
}

.tab2_kicks_box {
  position: relative;
}
.tab2_kicks_text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

/*----------------------------------------------------------
　画像エフェクト
-----------------------------------------------------------*/
/*ふわふわ*/
.fair_floating_img {
  animation: fair_floating 2s ease-in-out infinite;
}

@keyframes fair_floating {
  0% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(10px);
  }
}
.fair_floating_img2 {
  animation: floating2 2s ease-in-out infinite;
}

@keyframes floating2 {
  0% {
    transform: translateY(5px);
  }
  50% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(5px);
  }
}

/* 縮小拡大 */
.fair_bound_img {
  animation: simple-scale 1s ease-in-out infinite;
}

@keyframes simple-scale {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.0);
  }
  100% {
    transform: scale(0.8);
  }
}

.fair_bound_img2 {
  animation: simple-scale 1.5s ease-in-out infinite;
}

@keyframes simple-scale {
  0% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1.0);
  }
  100% {
    transform: scale(0.9);
  }
}












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