@charset "utf-8";

/*----------------------------------------------------
  トップページ
----------------------------------------------------*/

@media only screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
}

@media only screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
}



#slick_top{
width: 100%;
} 

.slick-slide {
  position: relative;
   margin: 0px 10px;
}
.slick-list{z-index: 2;}

.slick-dotted.slick-slider{
    margin-bottom: 50px !important;
}
.slick-slide .caption {
	position: relative;
  z-index: 100;
  width: calc(100% - 40px);
  padding:10px 20px;
  color: #333;
  opacity: 0;
  transition: .3s ease;
  text-align: center;
}
.slick-current .caption {
  opacity: 1;
  transition-delay: .5s;
}
.slick-current .caption:after {
	content: "MORE";
	font-family: 'Philosopher', sans-serif;
	margin-left: 20px;
    background: url(../images/line_wave1.gif) bottom repeat-x;
    background-size: 4px;
    padding-bottom: 1px;
}

.slick-current a:hover  {
    background: url(../images/line_wave1.gif) bottom repeat-x;
    background-size: 4px;
    padding-bottom: 1px;
    text-decoration: none;
}



.slick-dots {
	position: relative;
	max-width: 980px;
	text-align: center;
	margin:-25px auto 0  auto;
	z-index: 1;
}
.slick-dots li {
	width:30px;
	height: 4px;
}
.slick-dots li button:before{
	width: 30px;
	height: 4px;
	content: "" !important;
	background:#b39d69;
}




.follow{
  position: fixed;
  right: 1.5%;;
  top: 0;
  z-index: 2000;
    width: 50px;
	padding-top: 170px;
	background: #fff;
	box-shadow: 3px 3px 5px rgb(0 0 0 / 10%);
}
.follow:before{
	content: "";
	background: url("../images/float_followus.png") no-repeat top;
	background-size: 12px 126px;
	top:30px;
	position: absolute;
    width: 100%;
    height: 126px;
}
.follow a{
	display: block;
}
.follow a:hover{
	opacity: 0.6;
}
.follow img{
	width: 23px;
	height: auto;
	margin: 0px 12px 18px;
}





.top_body{
    border-top: 2px solid #98814a;
    padding: 0%;
    background: url(../images/bg_texture.gif);
}

.top_find_tour{
  padding:50px 0 0 0;

}

.top_find_tour h2{
  text-align: center;
  margin-bottom: 0;
}

.top_find_tour h2 img{
  max-width: 278px;
}
.top_body h3{
  color: #98814b;
  margin: 45px 0 25px 0;
}

.top_map{
  width: 60%;
  height: 600px;
  float: left;
  margin-top: 70px;    
}

    #map{max-width: 100%;}

.top_map_area{
  margin: -20px 0 30px 0;
  float: right;
  width: 40%;
}

.top_map_area a:hover{text-decoration: none;}
.top_map_area .is-hover .category{ color: #FFF;}
.top_map_area .is-hover .city{opacity: 0.7;}


.top_map_area .is-hover.north .category{background: #88b9cc;}
.top_map_area .is-hover.rajasthan .category{background: #d7a72e;}
.top_map_area .is-hover.gujarat .category{background: #73be67;}
.top_map_area .is-hover.ladak .category{background: #c35966;}
.top_map_area .is-hover.south .category{background: #39a373;}
.top_map_area .is-hover.west .category{background: #dfc44e;}
.top_map_area .is-hover.northeast .category{background: #5f7eb2;}
.top_map_area .is-hover.andaman .category{background: #905fb2;}

.north { background: url(../images/icon_pin1.png) top left no-repeat;}
.rajasthan { background: url(../images/icon_pin2.png) top left no-repeat;}
.gujarat { background: url(../images/icon_pin3.png) top left no-repeat;}
.ladak { background: url(../images/icon_pin4.png) top left no-repeat;}
.south { background: url(../images/icon_pin5.png) top left no-repeat;}
.west { background: url(../images/icon_pin6.png) top left no-repeat;}
.northeast { background: url(../images/icon_pin7.png) top left no-repeat;}
.andaman { background: url(../images/icon_pin8.png) top left no-repeat;}


.category{
    background-color: #fff;
    border-radius: 20px;
    padding: 2px 20px 2px 20px;
    max-width: 220px;
    font-size: 84%;
    font-weight: bold;
    margin: 0 0 10px 0;
    box-shadow: 0 0 8px -4px grey;
}

a:hover div.cateory{
    box-shadow: 2px 2px 4px -2px gray inset;
}

.top_map_area .category{
  margin-left:36px;
}

.top_map_left .category, .top_map_right .category{
  float: left;
  min-width: 170px;
  margin-right: 20px;
}


.city{font-size: 86%;line-height: 130%;margin:8px 0 20px  25px}



.top_whats_new{
  margin: 60px 70px 20px 0;
  display: flex;
}
.top_whats_newsp{
  margin: 20px 0 20px 0;
}
.top_whats_new h4{
 	color: #222222;
  margin: 30px 0 5px 0;
}

.left_news{
	width: 70%;
}
.right_fb{
	width: 30%;
}
    
.top_serch_area{
  border-top:1px solid #999;
  margin-bottom: 100px;
}

.top_map_left{
  float: left;
  max-width: 48%;
  border-right:1px solid #999;
}

.top_map_right{
  float: right;
  max-width: 48%;
}

.top_dom_tour{
  border-top:1px solid #999;
}

.top_inter_tour{
	margin-top: -1px;
  border-top:1px solid #999;
  border-bottom:1px solid #999;
}
.top_dom_tour:after,
.top_inter_tour:after{
	content: "";
	display: block;
	clear: both;
}

.w90per{
    width: 90%;
    max-width: 1446px;
    margin: 0px auto;
    padding: 0%;
	display: flex;
}

.masonry_wrap{
	/*overflow-y: scroll;
	overflow-x: hidden;
	height:85vh;*/
	width: 100%;
	padding-left: 1px;
}
.top_body .top_dom_tour h3{
	width: 210px;
  height: 100vh;
	background: #b39d69;
	text-align: center;
  margin:0;
    position: -webkit-sticky;
    position: sticky;
	top:0;
}
.top_body .top_dom_tour h3 img{
  max-height: 252px;
	position: absolute;
	bottom:50%;
	left:50%;
	transform:translateY(50%) translateX(-50%);
}


.top_body .top_inter_tour h3{
  width:210px;
  height: 100vh;
  background: #b39d69;
  text-align: center;
  margin:0;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}
.top_body .top_inter_tour h3 img{
  max-height: 359px;
	position: absolute;
	bottom:50%;
	left:50%;
	transform:translateY(50%) translateX(-50%);
}
.masonry{
  width:100% !important;
}
.masonry li{
	width:210px;
	padding:18px;
	color:#424242;
	border-left: 1px solid #999;
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
	margin-left:-1px;
}
.masonry li>img{
  width:100%;
}
.masonry .price{
  display: inline;
    background: url("../images/line_wave1.gif") bottom repeat-x;
    background-size: 4px;
    padding-bottom: 5px;
    font-weight: bold;
}




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

.triangle::before {
    content: "";
    top: 0;
    left: 0;
    border-bottom: 4em solid transparent;
    border-left: 4em solid #98814a;
    position: absolute;
    z-index: 100;
}
.triangle::after {
    content: "BEST";
    display: block;
    top: 10px;
    transform: rotate(-45deg);
    color: #fff; 
    left: 0;
    position: absolute;
    z-index: 101;
}




.ribbon-wrapper {  
  display: block;
  position: relative;
  margin: 15px auto;
  padding: 25px 0 20px 0;
  width: 300px;
  background: #f1f1f1;
  box-sizing: border-box;
  }

.ribbon {  
  display: inline-block;
  position: absolute;
  top: -6px;
  left: 15px;
  margin: 0;
  padding: 25px 0 20px 0;
  z-index: 2;
  width: 100px;
  text-align: center;
  color: white;
  font-size: 14px;
  font-family: 'AXIS Std', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'Hiragino Sans', 'sans-serif';
  font-weight: 600 ;
  letter-spacing: 0.1em ;   
  line-height: 1.5;
  background: linear-gradient(#f54260 0%, #c9364f 100%);
  border-radius: 2px 0 0 0;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);    
  }


.ribbon h3 {
  margin: 0;
  padding: 0 30px;
  border-top: dashed 2px rgba(255, 255, 255, 0.5);
  border-bottom: dashed 2px rgba(255, 255, 255, 0.5);
  line-height: 42px;
}


.ribbon:before {
  position: absolute;
  content: '';
  top: 0;
  right: -6px;
  border: none;
  border-bottom: solid 6px #cf4a2d;
  border-right: solid 6px transparent;
}
.ribbon:after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  height: 0;
  width: 0;
  border-left: 50px solid #c9364f;
  border-right: 50px solid #c9364f;
  border-bottom: 12px solid transparent;
}






.box404 {
    padding: 100px;
    margin: 0 auto;
    font-size: 90%;
    font-weight: 500;
    text-align: center;
     
}


.box404 p {
    font-size: 260%;
    font-weight: 700;
    color: #96803C;
    padding-bottom: 20px;
    
}


.box404 span {
     font-size: 150%;
    color: #96803C;
    font-weight: 700;
    
}



.masonry h4{
    font-size: 90%;
    font-weight: 100;
    line-height: 140%;
    margin: 10px 0;
}


.st_list span{
    background-color: #fff;
    padding:0px 5px;
    margin-right: 5px;
    font-size: 82%;
    font-weight: bold;
    display: inline-block;
  }







/*スクロールバー全体*/
::-webkit-scrollbar {
    width: 10px;
}

/*スクロールバーの軌道*/
::-webkit-scrollbar-track {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
}

/*スクロールバーの動く部分*/
::-webkit-scrollbar-thumb {
  background-color: rgba(152, 129, 74, 1);
  border-radius: 10px;
  box-shadow:0 0 0 1px rgba(255, 255, 255, 0);
}

/*スクロールバー　IE*/
.masonry_wrap {
	scrollbar-base-color:#98814A;
	scrollbar-track-color:#E9E3D5;
	scrollbar-arrow-color:#E9E3D5;
}

/*----------------------------------------------------
  レスポンシブ
----------------------------------------------------*/
@media screen and (max-width:767px) {

    /* TOPページ */
    .top_find_tour{padding:0;}
    .top_find_tour h2 {margin-bottom: 15px;}
    .top_map,.top_map_area{float: none;width:100%;}
    .top_map{background-size: contain;height: 400px;}
    .top_map_area{margin-top: -60px;}
    .top_map_left,.top_map_right{float: none;max-width:100%;border-right: 0px;}
    .top_map_left .category, .top_map_right .category{min-width:unset;width: 34%;margin-right: 13px;font-size: 80%;}
    
    .slick-slide .caption {width: 90vw;text-align: left;}
    .slick-dots{width: 90vw;margin-top: -30px}
    .slick-dotted.slick-slider{margin-bottom: 15px !important;}
    .slick-slide img{height: 200px;}

    .masonry{width:90% !important;}
    .masonry li{width:100%;margin-top: -1px;}
	
	.w90per{flex-direction: column;}

    .top_body .top_dom_tour h3{width:100%;background: none;height: inherit;}
	.top_body .top_dom_tour h3 img{position: inherit;padding:0;width:100%;transform:none;}
    .top_body .top_inter_tour h3 {width:100%;background: none;height: inherit;}
    .top_body .top_inter_tour h3 img{position: inherit;padding:0;width:100%;transform:none;}
    .masonry li:first-child{border-top: 1px solid #999}
    .triangle {position: relative;margin-left: -18px;margin-top:-18px;}
    
    
    .box404 { font-size: 80%; padding: 10px;}
    .box404 span { font-size: 135%; line-height: 110%;}
	
	

}

@media screen and (max-width:500px) {

    .top_kimg {
        height: 88%;
    }

    .top_kimg img {
        width: 88%;
    }
    
    

}