@charset "utf-8";

/*----------------------------------------------
 フェアページのみ適応
------------------------------------------------*/
.fair_box_wrap {}
.fair_box {
  margin-bottom: 3%;
}

/*キラリエフェクト設定
---------------------------------------------------*/
.fair_mv_box {
  position: relative;
  overflow: hidden;
}
.fair_mv_box img {
  display: block;
  width: 100%;
  height: auto;
}
.fair_mv_title {
  position: absolute;
  top: -8%;
  left: 0;
  width: 100%;
}

.chusen_title_box {
  position: relative;
  overflow: hidden;
}
.chusen_title_box img {
  display: block;
  width: 100%;
  height: auto;
}
.chusen_title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.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_movie_wrap {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}
.fair_movie_box {
	position: relative !important;
  width: 100%;
  aspect-ratio: 16 /9;/*アスペクト比*/
  overflow: hidden;
  isolation: isolate;
}
.fair_movie_box iframe {
  position: absolute !important;
  top: 0;
  left: 0;
	/*position: relative;*/
	width: 100%;
	height: 100%;
  object-fit: cover;
  pointer-events: none; /* iframe自体へのクリックも念のため無効化 */
}
.fair_movie_box .fair_movie_cover {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 2;
  cursor: default;
}


/* あわせておすすめ
------------------------------------------------*/
/*.fair_bn_box {
  background: #EEB5C3;
  overflow: hidden;
  padding: 0 0 5%;
}

.osusume_btn {
  width: calc(710 / 750 * 100%);
  max-width: 710px;
  margin: 0 auto 2%;
}*/

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

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

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

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

.fair_slider .area1 {
  top: calc(40 / 290 * 100%);
  left: calc(20 / 750 * 100%);
  width: calc(710 / 750 * 100%);
  height: calc(180 / 290 * 100%);
}

/*画像のサイズ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%);
}















/*画像のサイズw750ｘh620*/
#service .area1 {
  top: calc(510 / 620 * 100%);
  left: calc(150 / 750 * 100%);
  width: calc(460 / 750 * 100%);
  height: calc(90 / 620 * 100%);
}
/*画像のサイズw750ｘh600*/
#service .area2 {
  top: calc(370 / 600 * 100%);
  left: calc(150 / 750 * 100%);
  width: calc(460 / 750 * 100%);
  height: calc(90 / 600 * 100%);
}

/*画像のサイズw750ｘh550*/
#info .area1 {
  top: calc(390 / 550 * 100%);
  left: calc(150 / 750 * 100%);
  width: calc(460 / 750 * 100%);
  height: calc(120 / 550 * 100%);
}





/*スライダー設定：エルグランドフェア
---------------------------------------------------*/
/*
.fair_slider {
  background: url("../img/fair/fair1/usp_bg1.png") center top / 100% 100%;
  overflow: hidden;
  color: #ccc;
  padding-bottom: 5%;
}
.fairArea .slider .slick-dots {
  bottom: -30px;
}
.fair_slider2 {
  background: url("../img/fair/fair1/usp_bg2.png") center top / 100% 100%;
  overflow: hidden;
  padding-bottom: 5%;
}
.fair_slider2 .slick-slide img {
  background: none;
}

*/

/* slick.js ドットカラー設定
エルグランドフェア・バータイプ */

/*:root {
  --dot_width: 24px;
  --dot_height: 4px;
  --dot_color_default: #ebebeb;
  --dot_color_active: #c3002f;
}
.fair_slider .slick-dots {
  position: absolute;
  bottom: -50px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%;
}

.fair_slider .slick-dots li {
  width: var(--dot_width);
  height: var(--dot_height);
}

.fair_slider .slick-dots li button {
  width: var(--dot_width);
  height: var(--dot_height);
  padding: 0;
}

.fair_slider .slick-dots li button:before {
  content: "";
  width: var(--dot_width);
  height: var(--dot_height);
  background-color: var(--dot_color_default);
  opacity: 1;
}

.fair_slider .slick-dots li.slick-active button:before,
.fair_slider .slick-dots li button:hover:before {
  background-color: var(--dot_color_active);
  opacity: 1;
}*/


/*スライダー設定：抽選会
---------------------------------------------------*/
.fair_slider .slider_fair_wrap {
  background: url("../img/fair/fair1/chusen_slide_bg.png") center top / 100% 100% no-repeat;
  width: 100%;
  max-width: 750px;
	margin: 0 auto;
  padding-bottom: 3%;
  overflow: hidden;
}
.fair_slider .slider_fair_box {
  width: 100%;
  margin: 0 auto;
}
.fair_slider .slider_fair {
}
.fair_slider .slick-slide img {
  background: none;
}

/*画像一つ分*/
.fair_slider .slider_fair div img {
  padding: 0;

}
@media only screen and ( max-width: 749px ) {
  .slider_fair {
  }
}

/* Dots の設定
---------------------------------------------------*/
.fair_slider .slick-dotted.slick-slider {
  margin-bottom: 0;
}

.fair_slider .slick-dots {
  position: absolute;
  bottom: -20px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%;
}
.fair_slider .slick-dots li {
  position: relative;
  display: inline-block;
  height: 20px;
  width: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}
.fair_slider .slick-dots li button {
  border: 0;
  background: transparent;
  display: block;
  height: 20px;
  width: 20px;
  outline: none;
  line-height: 0px;
  font-size: 0px;
  color: transparent;
  padding: 5px;
  cursor: pointer;
}

.fair_slider .slick-dots li button:hover,
.fair_slider .slick-dots li button:focus {
  outline: none;
}
.fair_slider .slick-dots li button:hover:before
/*, .slick-dots li button:focus:before*/ {
  opacity: 1;
}
.fair_slider .slick-dots li button:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "•";
  width: 20px;
  height: 20px;
  font-family: "slick";
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #BA9930;
  opacity: 0.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fair_slider .slick-dots li.slick-active button:before {
  color: #BA9930;
  opacity: 0.75;
}


/*スライダー設定ここまで
---------------------------------------------------*/

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

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


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

  }
}
/*タブ
.tabset_shiharai：おまとめ/BVC
---------------------------------*/
.tab_title {
  
}
.tabset1 .tabs{
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
  background: #000021;
  padding-bottom: 5%;
}



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

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

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

/*共通支払いタブ*/
.tabset_shiharai .tabs li {
	width: calc(100% / 2);/*タブ数*/
	margin: 0 auto 0;
	display: inline-block;
}
/*車種タブなど*/
.tabset1 .tabs li {
	width: calc(100% / 2);/*タブ数*/
	margin: 0 auto 0;
	display: inline-block;
}
.tabset2 .tabs li {
	width: calc(100% / 2);/*タブ数*/
	margin: 0 auto 0;
	display: inline-block;
}

/*共通支払いタブ*/
.tabset_shiharai .tabs ul li:nth-child(1) a {
	background: url("../img/fair/tab1.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	transition:background .3s;
}
.tabset_shiharai .tabs ul li:nth-child(2) a {
	background: url("../img/fair/tab2.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	transition:background .3s;
}
.tabset_shiharai .tabs ul li:nth-child(1) a:hover {
	background: url("../img/fair/tab1_on.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	transition:background .3s;
}
.tabset_shiharai .tabs ul li:nth-child(2) a:hover {
	background: url("../img/fair/tab2_on.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	transition:background .3s;
}
.tabset_shiharai .tabs ul li:nth-child(1).active a {
	background: url("../img/fair/tab1_on.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;  
	-o-background-size: cover; 
}
.tabset_shiharai .tabs ul li:nth-child(2).active a {
	background: url("../img/fair/tab2_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(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; 
}

/*車種情報タブなど
------------------------------------------------------*/
.tabset2 .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;
}
.tabset2 .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;
}
/*.tabset2 .tabs ul li:nth-child(3) a {
	background: url("../img/fair/fair1/tab3.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	transition:background .3s;
}*/

/*.tabset2 .tabs ul li:nth-child(4) a {
	background: url("../img/fair/fair1/tab4.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	transition:background .3s;
}*/

.tabset2 .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;
}
.tabset2 .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;
}
/*.tabset2 .tabs ul li:nth-child(3) a:hover {
	background: url("../img/fair/fair1/tab3_on.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	transition:background .3s;
}*/
/*.tabset2 .tabs ul li:nth-child(4) a:hover {
	background: url("../img/fair/fair1/tab4_on.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	transition:background .3s;
}*/
.tabset2 .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; 
}
.tabset2 .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; 
}
/*.tabset2 .tabs ul li:nth-child(3).active a {
	background: url("../img/fair/fair1/tab3_on.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;  
	-o-background-size: cover; 
}*/
/*.tabset2 .tabs ul li:nth-child(4).active a {
	background: url("../img/fair/fair1/tab4_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 {
}

/*----------------------------------------------------------
　画像エフェクト
-----------------------------------------------------------*/
/*ふわふわ*/
.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);
  }
}

/* =============================================
   ① 左からスライドイン
   ============================================= */
.slidein_left {
  animation: slideInLeft 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* =============================================
   ② 下から上にスライドイン（滑らか・透明から）
   ============================================= */
.slidein_up {
  animation: slideInUp 1s ease-out both;
}
@keyframes slideInUp {
  from {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* =============================================
   共通：アニメーション前の非表示状態
   ============================================= */
.anim-hidden {
  opacity: 0;
  animation: none;
}
.anim-hidden.slidein_left {
  transform: translateX(-100%);
}
.anim-hidden.slidein_up {
  transform: translateY(100px);
}


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