@charset "UTF-8";
/* CSS Document */

/* ---------------------------------------------------------------------------------------------

　   トップページ

--------------------------------------------------------------------------------------------- */

/*ローディングアニメーション*/
#loading {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 101;
    background-color: #395DAA;
	}
#loading .f_logo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 300px;
    height: 62px;
    text-align: center;
    color: #fff;
    font-size: 30px;
	}
#loading .f_logo img {
    width: 100%;
    height: auto;
	}
#loading .f_logo:before {
    content: "";
    display: block;
    width: 100%;
    height: 110%;
    background-color: #395DAA;
    position: absolute;
    top: 0;
    left: 100%;
    animation: loadLogo 1.5s;
	}
	
@keyframes loadLogo {
  0% {
    left: 0;
  }
  50% {
    left: 0;
  }
  100% {
    left: 100%;
  }
	}
#loading .f_logo:before {
    animation: loadLogo 1.5s;
	}
#loading.open {
    animation-name: slideOut;
    animation-fill-mode: forwards;
    animation-duration: 1.5s;
    animation-delay: 1.5s;
	animation-timing-function: ease-in-out;
	}

@keyframes slideOut {
  0% {
    transform: translateX(0%);
	opacity: 1;
  }
  50% {
    transform: translateX(0%);
	opacity: 1; 
  }
  100% {
    transform: translateX(100%);
	opacity: 0;
  }
}


/*バナースライダー*/
ul.slider{
	}

ul.slider li{}

ul.slider li img{
	width: 100%;
	height: auto;
	}

/*ツアースライダー*/
.top_tour{
	padding-top: 18px;
	padding-bottom: 18px;
	}

/*タイトル*/
.top_tour h2{
	padding:16px 20px;
	font-size:21px;
	}

/*スライダー全体*/
.tour_slider{
	padding: 0;
	margin: 20px 0 0 0;
	display: flex;
	align-items: stretch;
	}

/*スライダー1こずつ*/
.tour_slider .tour_info{
	display: block;
	list-style: none;
	/*width:30%!important;
	max-width:300px;*/
	border:solid #9AA1D1 2px;
	margin: 0 10px;
	}

/*アイキャッチ画像*/
.tour_slider .tour_info .eyecatch{}
.tour_slider .tour_info .eyecatch a img{
	width: 100%;
	height: auto;
	transition: .3s;
	}
.tour_slider .tour_info .eyecatch a:hover img{
	opacity: .7;
	}

/*ツアータイトル*/
.tour_slider .tour_info h4{
	color:#395DAA;
	margin:10px 15px;
	font-size:16px;
	line-height: 140%;
	}

/*ツアー詳細*/
.tour_slider .t_info{
	margin:10px 15px 0 15px;
	font-size:14px;
	}
.tour_slider .t_info > span{
	display: block;
	border-top:dashed #cccccc 1px;
	padding: 7px 0;
	}
.tour_slider .t_info > span.t_i_price{
	display: block;
	}












/*2024年12月追記*/
.t_info p{
	line-height: 120%;
	margin: 2px 0 5px 0;
	}

.t_info span.icon{
	position: relative;
	display: inline-block;
	margin-bottom: 5px;
	color: #fff;
	font-size: 0.75rem;
	font-weight: bold;
	line-height: 130%;
	padding: 2px 5px 1px 5px;
	border-radius: 2px;
	}
.t_info span.manseki{
	background: #e9727c;
	}
.t_info span.manseki::after{
	border-color: #e9727c transparent transparent;
	}
.t_info span.zanwazu{
	background: #ec9000;
	}
.t_info span.zanwazu::after{
	border-color: #ec9000 transparent transparent;
	}
.t_info span.saikou{
	background: #87bc1f;
	}
.t_info span.saikou::after{
	border-color: #87bc1f transparent transparent;
	}
.t_info span.tasuu{
	background: #4cacd2;
	}
.t_info span.tasuu::after{
	border-color: #4cacd2 transparent transparent;
	}

.t_info span.manseki::after,
.t_info span.zanwazu::after,
.t_info span.saikou::after,
.t_info span.tasuu::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 20%;
  border-style: solid;
  border-width: 5px 5px 0 0;
  translate: calc(-50% - 0.4px) 100%;
}











/*項目名（出発日・代金）*/
.tour_slider .tour_info h5{
	display: block;
	color:#395DAA;
	font-size:14px;
	margin:0 10px 0 0;
	white-space: nowrap;
	}

/*このツアーのページへ　ボタン*/
.tour_slider .tour_info .btn{
	text-align: center;
	}
.tour_slider .tour_info .btn a{
	display: block;
	color: #ffffff;
	background: #395DAA;
	margin:6px 15px 15px 15px;
	}
.tour_slider .tour_info .btn a:hover {
	color: #395DAA;
	background-color: #ffffff;
	}

/*スライダー矢印ボタン*/
.slick-prev:before,
.slick-next:before {
    color: #395DAA!important;
	}

/*-- スライダー 矢印 位置調整 --*/
.slick-prev {
	left: 12px!important;
	z-index: 10;
	}
.slick-next {
	right: 12px!important;
	}

/*-- ツアースライダー 矢印 位置調整 --*/
.tour_slider .slick-prev {
	left: 20px!important;
	z-index: 10;
	}
.tour_slider .slick-next {
	right: 20px!important;
	}

	@media only screen and (max-width: 600px) {
		/*ツアースライダー*/
		.top_tour{
			padding-top: 10px;
			padding-bottom: 8px;
			}
		/*スライダー1こずつ*/
		.tour_slider .tour_info{
			border:solid #9AA1D1 1px;
			margin: 0 4px;
			}
		/*ツアータイトル*/
		.tour_slider .tour_info h4{
			margin:6px 8px;
			font-size:12px;
			}
		/*ツアー詳細*/
		.tour_slider .t_info{
			margin:6px 8px 0 8px;
			font-size:11px;
			line-height: 140%;
			}
		.tour_slider .t_info > span{
			display: block;
			padding: 4px 0;
			}
		/*項目名（出発日・代金）*/
		.tour_slider .tour_info h5{
			font-size:11px;
			margin:0;
			}
		/*このツアーのページへ　ボタン*/
		.tour_slider .tour_info .btn a{
			margin:6px 5px 15px 5px;
			}
		}











/*全体*/
#home-container{
	width: 100%;
	max-width: 1000px;
	padding: 0;
	margin-top: 24px;
	/*display: flex;
	justify-content:space-between;*/
	}




/*トピックス*/
.top_topics{
	margin-bottom: 30px;
	}
.top_topics ul{
    padding: 0; 	
    margin: 0 0 10px 0;
	} 
.top_topics ul li{
	border-bottom: dashed 1px #aaaaaa;
	line-height: 120%;
	padding: 18px 10px;
	display: flex;
	justify-content: flex-start;
	}
.top_topics ul li p{
	color: #555555;
	font-size: 13px;
	margin:0 10px 0 0;
	}
.top_topics ul li a{
	font-size: 16px;
	line-height: 140%;
	font-weight: bold;
	}
	@media only screen and (max-width: 600px) {
		.top_topics ul li{
			line-height: 120%;
			padding: 5px 0 8px 0;
			display: block;
			}
		.top_topics ul li p{
			font-size: 11px;
			margin:0 0 2px 0;
			}
		.top_topics ul li a{
			font-size: 14px;
			}
		}



/*添乗員日記*/
.top_diary{
	width: 100%;
	margin: 30px auto;
	}
.top_diary ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
    padding: 0; 
	} 
.top_diary ul li{
	width: 23%;
	line-height: 120%;
	margin-top: 12px;
	}
.top_diary ul li .trmg{
	position: relative; 
	}
.top_diary ul li .trmg::before{
    display: block;
    content: '';
    padding-top: 100%;
	}
.top_diary ul li .trmg a > img{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    border: solid 1px #cccccc;
	}
.top_diary ul li p.date{
	color: #555555;
	font-size: 12px;
	margin:10px 0 3px 0;
	}
.top_diary ul li p.date::before{
	font-family: "Font Awesome 5 Free";
	content: "\f303";
	margin-right: 5px;
	}
.top_diary ul li h4 a{
	display: block;
	font-size: 16px;
	line-height: 150%;
	margin-bottom: 8px;
	}
.top_diary ul li p.d_txt{
	font-size: 13px;
	line-height: 170%;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	max-height: calc(24px*3);/* webkit以外のフォールバック */
	}
.top_diary ul li a{
	font-size: 15px;
	font-weight: bold;
	}
	@media only screen and (max-width: 800px) {
		.top_diary ul li{
			width: 48%;
			margin-bottom: 24px;
			}
		}
	@media only screen and (max-width: 600px) {
		.top_diary{
			width: 96%;
			}
		.top_diary ul li{
			width: 46%;
			}
		.top_diary ul li p.date{
			font-size: 11px;
			margin:10px 0 1px 0;
			}
		.top_diary ul li p.date::before{
			margin-right: 3px;
			}
		.top_diary ul li h4 a{
			font-size: 14px;
			line-height: 140%;
			margin-bottom: 3px;
			}
		.top_diary ul li p.d_txt{
			font-size: 12px;
			line-height: 150%;
			}
		}



/*中央コンテンツ部分*/
#home-contents{
	/*width:50%;*/
	}

/*右サイド*/
#home-right-sidebar{
	/*width:23%;*/
	}
#home-right-sidebar ul{
    /*padding: 0; 	
    margin: 0;*/
	} 
#home-right-sidebar li{
	/*margin:5px;*/
	}


/* 中央 説明エリア */

#home-contents .top_wrap{
	width: 94%;
	max-width: 1000px;
	background-color: #f9f3e8;
	padding: 18px 3%;
	margin: 0 auto 24px auto;
	border-radius: 5px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	}
/*-- 最終行左寄せ 3列用 --*/
/*#home-contents .top_wrap::after {
    content: "";
    display: block;
    width: 30%;
    height: 0;
    }*/

#home-contents .top_inner{
	width: 30%;
	margin-bottom:24px;
	}

#home-contents .top_inner h3{
	display: block;
	background-color: #68b3b9;
	color: #ffffff;
	font-size: 20px;
	border-radius: 2px;
	position: relative;
	padding: 0.3em 0.65em 0.4em 0.8em;
	margin-bottom: 18px;
	}
#home-contents .top_inner h3::before {
	position: absolute;
	content: '';
	top: 100%;
	left: 0;
	border: none;
	border-bottom: solid 7px transparent;
	border-right: solid 20px rgb(149, 158, 155);
	}
#home-contents .top_inner.t_cclub h3{background-color: #a1795d;}
#home-contents .top_inner.t_hm h3{background-color: #dd706b;}
#home-contents .top_inner.t_dantai h3{background-color: #e4a701;}
#home-contents .top_inner.t_service h3{background-color: #c4c400;}
#home-contents .top_inner.t_koken h3{background-color: #B49FCF;}

#home-contents .top_inner h3 span{
	position: absolute;
	top: 8px;
	right: 15px;
	font-size: 10px;
	letter-spacing: 1px;
	}
#home-contents .top_inner img{
	max-width: 100%;
	height: auto;
	margin-bottom: 5px;
	}
#home-contents .top_inner p{
	font-size: 14px;
	}
	@media only screen and (max-width: 600px) {
		#home-contents .top_wrap{
			width: 92%;
			}
		}


.btn a {
	position: relative;
	display: inline-block;
	font-size: 13px;
	font-weight: bold;
	line-height: 120%;
	padding: 0.65em 1em;
	margin: 10px 0;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	text-align: center;
	vertical-align: middle;
	border-radius: 3px;
	color: #777777;
	background-color: #ffffff;
	border-bottom: 3px solid #aaaaaa;
	}
.btn a:hover {
	color: #ffffff;
	background-color: #aaaaaa;
	}

.t_ctour .btn a:hover {background-color: #68b3b9;}
.t_cclub .btn a:hover {background-color: #a1795d;}
.t_hm .btn a:hover {background-color: #dd706b;}
.t_dantai .btn a:hover {background-color: #e4a701;}
.t_service .btn a:hover {background-color: #c4c400;}
.t_koken .btn a:hover {background-color: #B49FCF;}

	@media only screen and (max-width: 800px) {
		#home-contents .top_inner{
			width: 48%;
			margin-bottom:20px;
			}
		}
	@media only screen and (max-width: 600px) {
		#home-contents .top_inner{
			width: 47%;
			}
		#home-contents .top_inner h3{
			font-size: 13px;
			margin-bottom: 12px;
			padding: 0.3em 0.5em 0.3em 0.5em;
			}
		#home-contents .top_inner img{
			margin-top: 3px;
			margin-bottom: 5px;
			}
		#home-contents .top_inner p{
			font-size: 12px;
			}
		}
	@media only screen and (max-width: 480px) {
		#home-contents .top_inner h3{
			font-size: 12px;
			margin-bottom: 10px;
			}
		#home-contents .top_inner p{
			font-size: 11px;
			}
		}



/*他サイトのバナー*/
.top_bnr{
	width: 100%;
	max-width: 1000px;
	margin: 30px auto 15px auto;
	display: flex;
	justify-content:space-between;
	flex-wrap: wrap;
	}
.top_bnr .t_bnr_inner{
	width: 48%;
	/*max-height: 60px;*/
	margin-bottom: 15px;
	text-align: center;
	}
.top_bnr .t_bnr_inner a{
	transition: 0.3s;
	}
.top_bnr .t_bnr_inner img{
	max-width: 100%;
	height: auto;
	}
	@media only screen and (max-width: 800px) {
		.top_bnr .t_bnr_inner{
			/*max-height: auto;*/
			margin-bottom: 5px;
			}
		}
	@media only screen and (max-width: 600px) {
		.top_bnr{
			display: block;
			}
		.top_bnr .t_bnr_inner{
			width: 100%;
			}
		}



/*フリーエリア(マイナビバナー)*/
.free_area{
	width: 95.5%;
	max-width: 1000px;
	margin: 15px auto 30px auto;
	padding:1.5% 2%;
	text-align: center;
	border: solid 1px #dddddd;
	border-radius: 3px;
	font-size: 14px;
	}