@charset "UTF-8";




.sp-player{
	display: none;
}



.loading{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #666;
	z-index: 200;
	opacity: 1;

	-webkit-transition: opacity 1000ms ease;
	-o-transition: opacity 1000ms ease;
	transition: opacity 1000ms ease;


}

.loading.off{
	opacity: 0;
}




@media screen and (min-width: 751px) {



	#player{
		display: none;
	}


	#kv{
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}


	.slide{
		position: absolute;
		width: 100%;
		overflow: hidden;
		background-position: 50% 50%;
		background-size: cover;
/*		background: #000;
*/	}


	



	.slide img{
		position: relative;
		width: 100%;
		height: auto;
		z-index: 10;

	}
	.slide a{
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		z-index: 50;

		cursor: pointer;
	}

	.slide .player{
		width: 100%;
		height: 100%;
	}
/*	.slide .sp-player{
		display: none;
	}*/

	.slide-inner{
		position: relative;
	}

	.slide iframe{
		position: relative;
		width: 100%;
		height: 100%;

		z-index: 10;
	}
	.slide img.sp{
		display: none;

	}


	.slide-txt{
		position: absolute;
		bottom: 20px;
		left: 20px;
		color: #fff;
		z-index: 40;
	}
	.slide-txt dl dt{
		margin: 0 10px 0 0;
		display: inline-block;
		font-size: 14px;
		line-height: 1.5;
	}
	.slide-txt dl dd{
		display: inline-block;
		font-size: 14px;
		line-height: 1.5;
	}
	.slide-txt dl dd br{
		display: none;
	}






	.slide .icon-play{
		position: absolute;
		margin: auto;
		display: block;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		border-style: solid;
		border-width: 0 4px 0 4px; 
		border-color: #fff;

		width: 100px;
		height: 24px;
		z-index: 20;
	}
	.slide .icon-play:after{
		position: absolute;
		content: "";
		display: block;
		top: 50%;
		left: 50%;
		margin: -10px 0 0 -10px;
		content: "";
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 10px 0 10px 20px;
		border-color: transparent transparent transparent #fff;
	}

	.slide .icon-play em:nth-child(1){
		position: absolute;
		display: inline-block;
		left: 0;
		width: 2px;
		height: 24px;
	}
	.slide .icon-play em:nth-child(1):before{
		content:"";
		position: absolute;
		display: inline-block;
		top: 0;
		left: 0;
		width: 6px;
		height: 4px;
		background: #fff;
	}
	.slide .icon-play em:nth-child(1):after{
		content:"";
		position: absolute;
		display: inline-block;
		bottom: 0;
		left: 0;
		width: 6px;
		height: 4px;
		background: #fff;
	}

	.slide .icon-play em:nth-child(2){
		position: absolute;
		display: inline-block;
		right: 0;
		width: 4px;
		height: 24px;
	}
	.slide .icon-play em:nth-child(2):before{
		content:"";
		position: absolute;
		display: inline-block;
		top: 0;
		right: 0;
		width: 6px;
		height: 4px;
		background: #fff;
	}
	.slide .icon-play em:nth-child(2):after{
		content:"";
		position: absolute;
		display: inline-block;
		bottom: 0;
		right: 0;
		width: 6px;
		height: 4px;
		background: #fff;
	}






	#kv .pager{
		position: absolute;
		bottom: 0;
		right: 20px;
		font-size: 0;
		z-index: 100;
	}

	#kv .pager li{
		display: inline-block;
	}

	#kv .pager li + li{
		margin: 0 0 0 15px;
	}

	#kv .pager li a{
		display: block;
		height: 60px;
		line-height: 60px;
		font-size: 16px;
		color: #bebcb4;
	}

	#kv .pager li.active a{
		color: #000;
	}

	#kv .pager li a:hover{
		color: #000;

		transition: color 200ms ease;
	}



	.popup{
		display: none;
		opacity: 0;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1200;
	}
	.popup-video-inner{
	}

	.popup .sp-movie{
		display: none;
	}


	.popup-video-body{

		position: absolute;
		top: 50%;
		left: 50%;

		-webkit-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);

	}
	.popup-video-body iframe{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.close-layer{
		position: absolute;
		top: 0;
		left: 0;		
		width: 100%;
		height: 100%;
	}


	.overlay-video{
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #d8d6d0;
		z-index: 1100;
	}

	.overlay-video.on{
		display: block;
	}


}


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





	#kv{
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}


	.slide img{
		position: relative;
		width: 100%;
		height: auto;
		z-index: 10;

	}
	.slide a{
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		z-index: 50;

		cursor: pointer;

	}

	.slide{

		position: absolute;
		width: 100%;
		overflow: hidden;
		background-position: 50% 50%;
		background-size: cover;

		overflow: hidden;
/*		background: #000;
*/	}
	
	.slide .player{
		width: 100%;
		height: 100%;
	}
	.slide-inner{
		position: relative;
	}
	.slide iframe{
		position: relative;
		width: 100%;
		height: 100%;

		z-index: 10;
	}

	
	.slide img.pc{
		display: none;

	}



	.slide-txt{
		position: absolute;
		bottom: 45px;
		right: 10px;
		color: #fff;
		z-index: 40;
		text-align: right;
	}

	.slide-txt dl dt{
		font-size: 12px;
	}
	.slide-txt dl dd{
		font-size: 12px;
		line-height: 1.5;
	}


	.slide-txt dl.movie-slide{
		position: relative;
		padding: 0 0 0 25px;
	}

/*	.slide-movie:after{
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -7px 0 0 -7px;
		content: "";
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 7px 0 7px 14px;
		border-color: transparent transparent transparent #fff;
		z-index: 100;
	}*/

/*

	.slide-txt dl.movie-slide dd{
		display: none;
	}

*/


	.slide .icon-play{
		position: absolute;
		margin: auto;
		display: block;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		border-style: solid;
		border-width: 0 3px 0 3px; 
		border-color: #fff;

		width: 60px;
		height: 20px;
		z-index: 20;
	}
	.slide .icon-play:after{
		position: absolute;
		content: "";
		top: 50%;
		left: 50%;
		margin: -7px 0 0 -7px;
		content: "";
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 7px 0 7px 14px;
		border-color: transparent transparent transparent #fff;
		z-index: 100;
	}

	.slide .icon-play em:nth-child(1){
		position: absolute;
		display: inline-block;
		left: 0;
		width: 2px;
		height: 20px;
	}
	.slide .icon-play em:nth-child(1):before{
		content:"";
		position: absolute;
		display: inline-block;
		top: 0;
		left: 0;
		width: 6px;
		height: 3px;
		background: #fff;
	}
	.slide .icon-play em:nth-child(1):after{
		content:"";
		position: absolute;
		display: inline-block;
		bottom: 0;
		left: 0;
		width: 6px;
		height: 3px;
		background: #fff;
	}

	.slide .icon-play em:nth-child(2){
		position: absolute;
		display: inline-block;
		right: 0;
		width: 4px;
		height: 20px;
	}
	.slide .icon-play em:nth-child(2):before{
		content:"";
		position: absolute;
		display: inline-block;
		top: 0;
		right: 0;
		width: 6px;
		height: 3px;
		background: #fff;
	}
	.slide .icon-play em:nth-child(2):after{
		content:"";
		position: absolute;
		display: inline-block;
		bottom: 0;
		right: 0;
		width: 6px;
		height: 3px;
		background: #fff;
	}








	#kv .pager{
		position: absolute;
		bottom: 0;
		right: 0;
		font-size: 0;
		z-index: 100;
	}

	#kv .pager li{
		display: inline-block;
	}
	#kv .pager li a{
		display: block;
		font-size: 13px;
		padding: 15px 10px;
		text-align: center;
		color: #eae7df;
	}

	#kv .pager li.active a{
		color: #000;
	}


	.popup{
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1200;
	}

	.popup .pc-movie{
		display: none;
	}


	.popup-video-body{

		position: absolute;
		top: 50%;
		left: 50%;

		-webkit-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);

	}

	.popup-video-body iframe{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}


	.close-layer{
		position: absolute;
		top: 0;
		left: 0;		
		width: 100%;
		height: 100%;
	}


	.overlay-video{
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #d8d6d0;
		z-index: 1100;
	}
	.overlay-video.on{
		display: block;
	}

}










@media screen and (min-width: 751px) {
	#topics-top {
		margin: 0 0 80px;
	}
	#topics-top .topics-box {
		width: 100%;
		max-width: 1000px;
		margin: 0 auto;
	}
	#topics-top .topics-box li + li {
		margin-top: 6px;
	}
	#topics-top .topics-box a {
		display: block;
	}
	#topics-top .topics-box a:hover dd {
		text-decoration: underline;
	}
	#topics-top .topics-box dl {
		display: flex;
		flex-wrap: wrap;
	}
	#topics-top .topics-box dt {
		width: 120px;
	}
	
	
	.btm-contents #shops {
		float: none;
		width: 100%;
		min-height: 1px;
		padding: 0;
	}
	.btm-contents #shops .shops-detail {
		margin: 0 150px;
	}
	.btm-contents #shops .shop-list dl {
		float: none;
	}
	.btm-contents #shops .shop-list dl + dl {
		margin: 30px 0 0;
	}
	.btm-contents #shops .shop-list dt {
		margin: 0 0 12px;
	}
	.btm-contents #shops .shop-list dd {
		font-size: 0;
	}
	.btm-contents #shops .shop-list dd li {
		display: inline-block;
		font-size: 13px;
		line-height: 1;
	}
	.btm-contents #shops .shop-list dd li + li {
		margin: 0 0 0 30px;
	}
	.btm-contents .btn {
		position: static;
	}
}
@media screen and (max-width: 750px) {
	#topics-top {
		margin: 0 0 80px;
	}
	#topics-top .topics-box {
		margin: 0 10px;
	}
	#topics-top .topics-box li + li {
		margin-top: 15px;
	}
	#topics-top .topics-box a {
		display: block;
	}
	#topics-top .topics-box dl {
		display: flex;
		flex-wrap: wrap;
	}
	#topics-top .topics-box dt {
		width: 75px;
		font-size: 11px;
	}
	#topics-top .topics-box dd {
		width: calc(100% - 75px);
		line-height: 1.5;
	}
}