@charset "utf-8";

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

.fair_mv_title {
  position: absolute;
  top: 30%;
  left: 0;
}

.fair_cp_box {
  position: relative;
}
.fair_cp_title {
  position: absolute;
  top: 45%;
  left: 0;
}

.fair_point_box {
  position: relative;
}
.fair_point1_title {
  position: absolute;
  top: calc(20 / 160 * 100%);
  left: calc(50 / 750 * 100%);
  width: calc(140 / 750 * 100%);
}
.fair_point2_title {
  position: absolute;
  top: calc(45 / 180 * 100%);
  left: calc(50 / 750 * 100%);
  width: calc(140 / 750 * 100%);
}
.fair_point3_title {
  position: absolute;
  top: calc(45 / 180 * 100%);
  left: calc(50 / 750 * 100%);
  width: calc(140 / 750 * 100%);
}

.fair_slider {
  background: url("../img/fair/fair2/point1_img1.png") center top / 100% 100%;
  overflow: hidden;
}
.fair_slider .slick-slide img {
  background: none;
}
.fairArea .slider .slick-dots {
  bottom: -10px;
}

.fair_point3_serif {
  position: absolute;
  top: 0;
  left: 0;
}

.fair_point_juden {
  position: absolute;
  top: calc(320 / 710 * 100%);
  left: calc(60 / 750 * 100%);
  width: calc(226 / 750 * 100%);
}



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

.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_movie_box .area1 {
  top: calc(220 / 660 * 100%);
  left: calc(60 / 750 * 100%);
  width: calc(630 / 750 * 100%);
  height: calc(360 / 660 * 100%);
}
.fair_cp_btn .area1 {
  top: calc(10 / 130 * 100%);
  left: calc(70 / 750 * 100%);
  width: calc(610 / 750 * 100%);
  height: calc(90 / 130 * 100%);
}
.fair_point2_btn .area1 {
  top: calc(40 / 210 * 100%);
  left: calc(70 / 750 * 100%);
  width: calc(610 / 750 * 100%);
  height: calc(90 / 210 * 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%);
}


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

  }
}
/*タブタイトル部分
---------------------------------*/
.tab_title {
  
}
.tabset1 .tabs ul{
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
}

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

.tabset1 .tabs ul,
.tabset2 .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;
}
.tabset2 .tabs li {
	width: calc(100% / 4);/*タブ数*/
	margin: 0 auto 0;
	display: inline-block;
}

.tabset1 .tabs ul li:nth-child(1) a {
	background: url("../img/fair/fair2/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/fair2/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/fair2/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/fair2/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/fair2/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/fair2/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/fair2/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(2) a {
	background: url("../img/fair/fair2/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(3) a {
	background: url("../img/fair/fair2/tab5.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/fair2/tab6.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/fair2/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(2) a:hover {
	background: url("../img/fair/fair2/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(3) a:hover {
	background: url("../img/fair/fair2/tab5_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/fair2/tab6_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/fair2/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(2).active a {
	background: url("../img/fair/fair2/tab4_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/fair2/tab5_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/fair2/tab6_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 1.5s 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.8);
  }
  50% {
    transform: scale(1.0);
  }
  100% {
    transform: scale(0.8);
  }
}

/* =============================================
   ① 左からスライドイン
   ============================================= */
.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);
}


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