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

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

top_fl

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

.block-main-top {
  width: 75%;
	margin-bottom:2%;
	padding-right:5%;
}

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

	.block-main-top {
		width:100%;
		padding-right:0;
	}
}

/* --------------------------------------------------
floating-bnr
-------------------------------------------------- */
.floating-bnr{
	position:fixed;
	right:0;
	top:25%;
	z-index:1;
	box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.6);
}
.floating-bnr a{
	display:block;
}

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

	.floating-bnr{
		width:12vw;
	}
}

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

	.floating-bnr{
		display:none;
	}
}

/* --------------------------------------------------
quick-search
-------------------------------------------------- */

/* quick-search */
.quick-search{
	position:relative;
}
.quick-search .search-box{
	position:absolute;
	bottom:0;
	left:50%;
	width:80%;
	margin-left:-40%;
	background:rgba(255,255,255,.5);
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	border-radius:5px 5px 0 0;
	padding:10px;
	box-shadow: 0px -3px 4px 0px rgba(0,0,0,0.2);
}
.quick-search .keyword{
	width:20%;
	min-width:300px;
	margin:10px;
	position:relative;
}
.quick-search .keyword input{
	padding:.85rem;
	width:100%;
	border-radius:5px;
	border:#CCC solid 1px;
	position:relative;
}
.quick-search .keyword a{
	font-size:2rem;
	width:40px;
	text-align: center;
	position:absolute;
	top:50%;
	right:0;
	margin-top:-1.5rem;
}
.quick-search .tagword{
	width:10%;
	min-width:200px;
	margin:10px;
	position:relative;
}
.quick-search .tagword input{
	padding:.85rem;
	width:100%;
	border-radius:5px;
	border:#CCC solid 1px;
	position:relative;
	text-align:center;
}
.quick-search .tagword a{
	font-size:2rem;
	width:40px;
	text-align: center;
	position:absolute;
	top:50%;
	right:0;
	margin-top:-1.5rem;
}
.quick-search .tags-list{
	width:80%;
	margin:0 auto;
	text-align:center;
}

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

	.quick-search .search-box{
		position: relative;
		bottom:auto;
		left:auto;
		width:100%;
		margin-left:0;
		border-radius:0;
	}

}

/* --------------------------------------------------
top-quick-link
-------------------------------------------------- */

.top-quick-link{
	background:#E8E8E8;
}
.top-quick-link ul{
	text-align:center;
	padding:10px;
}
.top-quick-link li{
	display: inline-block;
	margin:5px;
}
.top-quick-link a{
	background:#fff;
	display:block;
	padding:10px 20px;
	border-radius:30px;
	min-width:150px;
	box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.2);
}
.top-quick-link a:before{
}

/* --------------------------------------------------
top-emergency
-------------------------------------------------- */

.top-emergency{
	display:flex;
	background:#FFCECE;
	align-items:center;
	justify-content:center;
	padding:10px;
	position:relative;
	padding:10px 5%;
}
.top-emergency:after{
	content:"+";
	font-size:4rem;
	font-family:"Montserrat";
	position: absolute;
	right:15px;
	top:50%;
	margin-top:-2rem;
	line-height:1;
	color:#EF3120;
}
.top-emergency h3{
	color:#EF3120;
	font-size:1.8rem;
	font-weight:bold;
	margin-right:3%;
}
.top-emergency dl{
	display:flex;
	flex:1;
}
.top-emergency dt{
	padding:10px;
}
.top-emergency dd{
	flex:1;
	padding:10px;
}
.top-emergency dd a{
	display:block;
}


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

	.top-emergency{
		flex-direction:column;
	}

}

/* --------------------------------------------------
top-season
-------------------------------------------------- */

.top-season{
	display:flex;
	align-items:center;
	justify-content:center;
	padding:2%;
	margin:0;
}
.top-season h3{
	display:flex;
	flex-direction:column;
	justify-content:center;
	text-align:center;
	margin:0 3%;
	line-height:1;
	border-bottom:#333 solid 4px;
}
.top-season h3 span{
	display:block;
	text-align:center;
}
.top-season h3 strong{
	font-size:4rem;
}
.top-season h3 span:first-of-type{
	display:block;
	text-align:center;
	font-size:2.8rem;
	letter-spacing:.5rem;
	font-weight:bold;
	margin-bottom:5px;
	margin-top:10px;
}
.top-season .list-4col{
	flex:1;
	margin-bottom:0;
}
.top-season .btn-more-plus{
	margin-left:2%;
}


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

	.top-season{
		flex-direction:column;
	}
	.top-season .list-4col{
		width: 100%;
	}

}


/* --------------------------------------------------
top-tripadvisor
-------------------------------------------------- */

.top-tripadvisor{
	position:relative;
}
.list-tripadvisor{
	display:flex;
	justify-content:center;
}
.list-tripadvisor li{
	width: 17%;
	padding:10px;
	border:#CCC solid 1px;
	margin:5px;
}
.list-tripadvisor .pht-thumb .frame {
	border-radius: 0;
	background: #fff;
}
.cdsROW.narrow.border{
	width:100%;
}
@media screen and (max-width: 767px) {
	.list-tripadvisor li{
		width: 200px;
	}

	.list-tripadvisor{
		overflow-x:scroll;
		-webkit-overflow-scrolling:touch;
		overflow-scrolling:touch;
		justify-content:flex-start;
	}
}

/* --------------------------------------------------
top-event
-------------------------------------------------- */

.top-event{
	display:flex;
	align-items:center;
	justify-content:center;
	padding:2%;
	margin:0;
}
.top-event h3{
	display:flex;
	flex-direction:column;
	justify-content:center;
	width:200px;
	height:200px;
	background: #000;
	color:#FFF;
	text-align:center;
	margin:0 3%;
	border-radius:100px;
	line-height:1;
}
.top-event h3 span{
	display:block;
	text-align:center;
}
.top-event h3 span:first-of-type{
	display:block;
	text-align:center;
	font-size:1.8rem;
	font-weight:bold;
	margin-bottom:5px;
	margin-top:10px;
}
.top-event .list-3col{
	flex:1;
	margin-bottom:0;
	max-width:1000px;
}
.top-event .list-3col ul{
	padding:0;
	flex-wrap: nowrap;
	width:100%;
}
.top-event .btn-more-plus{
	margin-left:2%;
}

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

	.top-event{
		flex-direction:column;
	}
}


/* --------------------------------------------------
top-hand
-------------------------------------------------- */

.top-hand{
	width: 100%;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	margin-top:0;
}
.top-hand > div{
	width: 50%;
}
.top-hand > div img{
	width:100%;
}

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

	.top-hand > div{
		width: 100%;
	}
}

/* --------------------------------------------------
top-accommodations
-------------------------------------------------- */

.top-accommodations .list-4col{
	max-width:1200px;
	margin:0 auto;
}
.top-accommodations .list-3col{
	margin-bottom:0;
}
.top-accommodations .list-3col ul{
	padding:0;
	flex-wrap: nowrap;
	width:100%;
	max-width:1500px;
	margin:0 auto;
}
.top-accommodations .list-3col li{
	margin-top:0;
	margin-right:0;
	padding-bottom:0;
	width: calc(100% / 3);
}
.top-accommodations .list-3col li:nth-child(odd) .pht-case figcaption{
	background:rgba(69,157,173,.5);
	text-shadow:black 0px 0px 2px;
}
.top-accommodations .list-3col li:nth-child(even) .pht-case figcaption{
	background:rgba(44,94,139) ;
	text-shadow:black 0px 0px 2px;
}

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

	.top-accommodations .list-4col{
		padding:2%;
	}
	.top-accommodations .list-4col li{
		width: calc(100% / 4 - 2%);
	}
}
@media screen and (max-width: 767px) {

	.top-accommodations .list-3col ul{
		overflow-x:scroll;
		-webkit-overflow-scrolling:touch;
		overflow-scrolling:touch;
	}
	.top-accommodations .list-3col li{
		min-width:300px;
	}
	.top-accommodations .list-4col li{
		width: calc(100% / 2 - 2%);
	}
}

.top-accommodations .pht-case figcaption{
	text-align:center;
}

/* --------------------------------------------------
top-stay
-------------------------------------------------- */

.top-stay {
    text-align: center;
}

/* --------------------------------------------------
top-topics
-------------------------------------------------- */

.top-topics .list-3col{
	margin-bottom:0;
}
.top-topics .list-3col ul{
	padding:0;
	flex-wrap: nowrap;
	width:100%;
	max-width:1500px;
	margin:0 auto;
}
.top-topics .list-3col li{
	margin-top:0;
	margin-right:0;
	padding-bottom:0;
	width: calc(100% / 3);
}
.top-topics .list-3col li:nth-child(odd) .pht-case figcaption{
	background:rgba(204,51,51,.7);
	text-shadow:black 0px 0px 2px;
}
.top-topics .list-3col li:nth-child(even) .pht-case figcaption{
	background:rgba(208,119,47,.7);
	text-shadow:black 0px 0px 2px;
}

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

	.top-topics .list-3col ul{
		overflow-x:scroll;
		-webkit-overflow-scrolling:touch;
		overflow-scrolling:touch;
	}
	.top-topics .list-3col li{
		min-width:300px;
	}
}

/* --------------------------------------------------
top-spot-ranking
-------------------------------------------------- */

.top-spot-ranking .list-3col{
	margin-bottom:0;
}
.top-spot-ranking .list-3col ul{
	padding:0;
	width:100%;
	max-width:1500px;
	margin:0 auto;
}
.top-spot-ranking .list-3col li{
	margin-top:0;
	margin-right:0;
	padding-bottom:0;
	width: calc(100% / 3);
}
.top-spot-ranking .pht-case .frame{
	margin: 0;
}
.top-spot-ranking .list-3col li .pht-case figcaption{
	background:rgba(0,0,0,.6);
	text-shadow:black 0px 0px 2px;
	text-align:center;
}

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

	.top-spot-ranking .list-3col li{
		width: calc(100% / 2);
	}
}

/* --------------------------------------------------
top-course
-------------------------------------------------- */
.top-course{
	position:relative;
}
.top-course h3{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	width:200px;
	height:200px;
	background: #000;
	color:#FFF;
	text-align:center;
	margin:0 3%;
	border-radius:100px;
	line-height:1;
	position:absolute;
	left:50%;
	top:50%;
	margin-top:-100px;
	margin-left:-100px;
	z-index:1;
	padding-top:20px;
}
.top-course h3 span{
	display:block;
	text-align:center;
	color:#FFF;
	text-align:center;
	margin:0 3%;
	line-height:1;
	font-size:2.3rem;
}
.top-course .btn-more {
	margin-top:10px;
}
.top-course .btn-more a{
	font-size:1.5rem;
}
.top-course .btn-more a::after{
	font-size:1.5rem;
	position:relative;
	right:auto;
	padding-left:10px;
}
.course-list{
	display:flex;
	flex-wrap:wrap;
}
.course-list li{
	width:calc(50% - 5px);
	margin:2.5px;
}
.course-list figure{
	text-align: center;
	position: relative;
}
.course-list .frame{
	position: relative;
	width: 100%;
  overflow: hidden;
	overflow:hidden;
	padding-top:55%;
}
.course-list figure img{
	width:100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.course-list figcaption{
	position: absolute;
	top: 0;
	left: 0;
	color:#FFF;
	font-size:5rem;
	line-height:1;
	width:100%;
	text-shadow:black 1px 1px 2px, black -1px 1px 2px,black 1px -1px 2px, black -1px -1px 2px;
	padding:10px;
}
.course-list li:nth-of-type(1) figcaption{
	text-align:left;
}
.course-list li:nth-of-type(2) figcaption{
	text-align:right;
}
.course-list li:nth-of-type(3) figcaption{
	top: auto;
	bottom: 0;
	text-align:left;
}
.course-list li:nth-of-type(4) figcaption{
	top: auto;
	bottom: 0;
	text-align:right;
}


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

	.course-list figcaption{
		font-size:2rem;
	}
}

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

	.course-list figcaption{
		font-size:1.8rem;
	}
}
@media screen and (max-width: 600px) {

	.top-course h3{
		position: relative;
		left:0;
		top:0;
		margin:2% auto;
	}
	.course-list figcaption{
		font-size:1.8rem;
	}
	.course-list .frame{
		padding-top:65%;
	}

}



/* --------------------------------------------------
top-asoinfo
-------------------------------------------------- */

.top-asoinfo {
	max-width:1000px;
	margin:3% auto;
	position:relative;
	background:url(../img/top_fl/aso_info.jpg) no-repeat center top;
	background-size: cover;
}
.top-asoinfo:before{
	content:"";
	background:rgba(0,0,0,.5);
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
}
.top-asoinfo h3 {
	padding:3% 0 0;
	display: block;
	text-align:center;
	font-size:3rem;
	color: #FFF;
	font-weight:bold;
	letter-spacing:0;
	position: relative;
}
.aso-info-area {
	padding:0 5% 3% 5%;
	position: relative;
}
.aso-info-area li {
	margin: 20px 0;
}
.aso-info-area a {
	color: #fff;
}
.aso-info-area li a:before {
	content: "\f067";
	font-family: fontawesome;
	display: inline-block;
	margin-right: .8rem;
	font-size: 1.6rem;
}
.aso-info-area .btn-more a{
	background:#FFF;
	color:#000;
}

@media screen and (max-width: 800px) {
	.aso-info-area li {
		margin: 8px 0;
	}
}

/* --------------------------------------------------
bnr-list-top
-------------------------------------------------- */

.bnr-list-top{
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	max-width:1400px;
	margin:0 auto;
}
.bnr-list-top li{
	width:25%;
	padding:10px;
}

@media screen and (max-width: 800px) {
	.bnr-list-top {
		padding:3px;
	}
	.bnr-list-top li{
		width:50%;
		padding:3px;
	}
}

/* --------------------------------------------------
top-sns
-------------------------------------------------- */

.top-sns{
	display: flex;
	flex-wrap: wrap;
	max-width:1400px;
	margin:0 auto;
	padding:5%;
}
.top-insta{
	width: 50%;
	padding: 0;
	margin: 5% 0;
}
.top-insta h4{
	font-size:3rem;
	margin-bottom:2rem;
}
.top-insta h4:before{
	content:"\f16d";
	font-family:fontawesome;
	margin-right:1rem;
}
.top-fb{
	width: 50%;
	padding: 0;
	margin: 5% 0;
}
.facebook-area {
	width: 100%;
	padding: 0;
	margin: 5% 0;
}

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

	.top-sns{
		flex-direction:column;
	}
	.top-insta{
		width: 100%;
	}
	.top-fb{
		width: 100%;
	}

}

.top-insta > div{
	overflow:hidden;
	margin-bottom:5%;
}
.top-insta > div ul{
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-start;
	margin-right:-1%;
}
.top-insta > div li{
	width:calc(100% / 3 - 2%);
	margin-right:2%;
	padding-bottom:2%;
}

/* --------------------------------------------------
infiniteslide
-------------------------------------------------- */

.infiniteslide {
	position:relative;
}
.infiniteslide li{
	margin:2px 1px;
}
.more-panel{
	position:absolute;
	z-index:50;
	background:#ECC837;
	width:250px;
	padding:30px;
	height:100%;
	margin-left:10%;
}
.more-panel h3{
	color:#FFF;
	font-size:2.5rem;
	font-weight:bold;
	line-height:1.4;
}