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

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

top

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

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

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

	.block-main-top {
		width:100%;
		padding-right:0;
	}
}
/* --------------------------------------------------
mv-container
-------------------------------------------------- */
.mv-container{
	display: flex;
}
.slide-top{
	width:60%;
}
.slide-top .slick-prev{
    left: 0;
	z-index: 5;
}
.slide-top .slick-next{
    right: 0;
	z-index: 5;
}
.slide-top .slick-dots{
	bottom: 1rem;
}
.slide-top.slick-dotted.slick-slider{
	margin-bottom:0;
}
.recommend-list{
	width:40%;
}
.recommend-list ul{
	display: flex;
	flex-wrap: wrap;
}
.recommend-list li{
	width:50%;
}
.recommend-list figure{
	text-align: center;
	position: relative;
}
.recommend-list .frame{
	position: relative;
	padding-bottom: 84.32%;
	height: 0;
	overflow: hidden;
}
.recommend-list .frame img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-height:100%;
	min-width:100%;
}

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

	.mv-container{
		display: block;
	}
	.slide-top{
		width:100%;
	}
	.recommend-list{
		width:100%;
	}
	.recommend-list li{
		width:25%;
	}
	
}
@media screen and (max-width: 500px) {

	.recommend-list li{
		width:50%;
	}
	
}
/* --------------------------------------------------
floating-bnr
-------------------------------------------------- */
.floating-bnr{
	position:fixed;
	right:0;
	top:25%;
	z-index:50;
	width:12vw;
	box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.6);
}
@media screen and (max-width: 800px) {

	.floating-bnr{
		display:none;
	}
}

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

/* quick-search */
.quick-search{
	position:relative;
}
.quick-search .search-box{
	position:relative;
	bottom:auto;
	left:auto;
	width:100%;
	margin-left:0;
	background:rgba(255,255,255,.5);
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	border-radius: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;
	min-height:45px;
}
.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;
	min-height:45px;
}
.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: 600px) {

	.quick-search .search-box .btn-refresh,
	.quick-search .search-box .tagword,
	.quick-search .search-box .btn-go{
		display:none;
	}
}

/* --------------------------------------------------
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);
	position:relative;
	overflow:hidden;
}
.top-quick-link a:after{
	content:"";
	position: absolute;
	top: 150%;
	left: -20%;
	width: 140%;
	height: 100%;
	border-radius: 50% 50% 0 0;
	background-color: rgba(168, 168, 168, 0.1);
	top: 100%;
	transition: all 1s cubic-bezier(0.2, 1, 0.3, 1);
}
.top-quick-link a:hover:after{
	top: -50%;
	height: 200%;
}

.top-quick-link li:nth-of-type(1) a:before,
.top-quick-link li:nth-of-type(2) a:before,
.top-quick-link li:nth-of-type(3) a:before,
.top-quick-link li:nth-of-type(4) a:before,
.top-quick-link li:nth-of-type(5) a:before,
.top-quick-link li:nth-of-type(6) a:before,
.top-quick-link li:nth-of-type(7) a:before,
.top-quick-link li:nth-of-type(8) a:before{
	content:"";
	width:30px;
	height:25px;
	display:block;
	float:left;
}

.top-quick-link li:nth-of-type(1) a:before{
	background:url(../img/top/ico_quick07.png) no-repeat 50% 50%;
	background-size: contain;
}
.top-quick-link li:nth-of-type(2) a:before{
	background:url(../img/top/ico_quick01.png) no-repeat 50% 50%;
	background-size: contain;
}
.top-quick-link li:nth-of-type(3) a:before{
	background:url(../img/top/ico_quick02.png) no-repeat 50% 50%;
	background-size: contain;
}
.top-quick-link li:nth-of-type(4) a:before{
	background:url(../img/top/ico_quick03.png) no-repeat 50% 50%;
	background-size: contain;
}
.top-quick-link li:nth-of-type(5) a:before{
	background:url(../img/top/ico_quick04.png) no-repeat 50% 50%;
	background-size: contain;
}
.top-quick-link li:nth-of-type(6) a:before{
	background:url(../img/top/ico_quick05.png) no-repeat 50% 50%;
	background-size: contain;
}
.top-quick-link li:nth-of-type(7) a:before{
	background:url(../img/top/ico_quick06.png) no-repeat 50% 50%;
	background-size: contain;
}
.top-quick-link li:nth-of-type(8) a:before{
	background:url(../img/top/ico_quick08.png) no-repeat 50% 50%;
	background-size: contain;
}


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

	.top-quick-link{
		width:100%;
		overflow-x:scroll;
		-webkit-overflow-scrolling:touch;
		overflow-scrolling:touch;
	}
	.top-quick-link ul{
		display:flex;
		width:800px;
		flex-wrap: wrap;
	}

}

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

.top-emergency{
	display:flex;
	background:#FFCECE;
	align-items:center;
	justify-content:center;
	padding:10px;
	position:relative;
	padding:10px 5%;
}

.top-emergency > div {
    flex: 1;
}
.top-emergency h3{
	color:#EF3120;
	font-size:2.5rem;
	font-weight:bold;
	margin-right:3%;
}
.top-emergency dl{
	display:flex;
}
.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-news
-------------------------------------------------- */

.top-news {
    display: flex;
    background: #efefef;
    align-items: center;
    justify-content: center;
    padding: 10px;
    position: relative;
    padding: 10px 5%;
}

.top-news > div {
    flex: 1;
}

.top-news h3 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-right: 3%;
}

.top-news dl {
    display: flex;
}

.top-news dt {
    padding: 10px;
}

.top-news dd {
    flex: 1;
    padding: 10px;
}

.top-news dd a {
    display: block;
}

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

    .top-news {
        flex-direction: column;
        padding: 2%;
    }

    .top-news h3 {
        margin-right: 0;
    }
}

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

    .top-news .btn-area {
        padding-top: 0;
    }
}
/* --------------------------------------------------
top-movie
-------------------------------------------------- */

.top-movie{
	background: #ffe6e6;
	display: flex;
}	
.top-movie .channel{
	flex:1;
	padding: 2% 5%;
	text-align: center;
		display: flex;
	flex-direction: column;
	justify-content: center;
}
.top-movie .channel h4{
	font-size: 2.3rem;
	position: relative;
	margin-bottom: 1em;
}
.top-movie .channel h4:before{
	content: '';
  position: absolute;
  top: 50%;
	right:0;
  display: inline-block;
  width: 3em;
  height: 1px;
  background-color: #333;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
.top-movie .channel h4:after{
	content: '';
  position: absolute;
  top: 50%;
	left:0;
  display: inline-block;
  width: 3em;
  height: 1px;
  background-color: #333;
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}
.top-movie .movie{
	width:50%;
	margin-bottom:0;
}
.top-movie .movie > div{
  position: relative;
  padding-top: 56.25%;
}
.top-movie .movie iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

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

    .top-movie{
		flex-direction: column;
			order:2;
    }
		.top-movie .movie {
			order:2;
		}
		.top-movie .channel {
			order:1;
		}
	.top-movie .channel h4{
		margin: 1em;
	}
	.top-movie .movie{
			width:100%;
			margin-bottom:0;
		}
}
@media screen and (max-width: 600px) {

    .top-movie .channel h4{
			font-size: 2rem;
			margin-bottom: 1em;
		}
}

/* --------------------------------------------------
more-channe
-------------------------------------------------- */

.more-channel{
	padding: 2%;	
	background: #ffe6e6;
	display: flex;
}

.more-channel .btn-area{
	padding: 1%;	
}

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

    .more-channel{
			flex-direction: column;
	}
	.more-channel .btn-area{
	padding: 2%;	
	}
}

/* --------------------------------------------------
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-3col{
	margin-bottom:0;
	width: 60%;
}
.top-season .list-4col{
	margin-bottom:0;
	width: 60%;
}
.top-season .list-5col{
	margin-bottom:0;
	width: 75%;
}
.top-season .btn-more-plus{
	margin-left:2%;
}

.top-season .list-3col ul,
.top-season .list-4col ul,
.top-season .list-5col ul {
	flex-wrap: nowrap;
	justify-content: center;
}
.top-season .list-3col li,
.top-season .list-4col li,
.top-season .list-5col li {
	max-width: 250px;
	padding-right: 5px;
}

.top-season .list-3col li.soon,
.top-season .list-4col li.soon,
.top-season .list-5col li.soon {
	opacity: 0.3;
}

.top-season .list-3col li.soon .frame,
.top-season .list-4col li.soon .frame,
.top-season .list-5col li.soon .frame {
	box-shadow: none;
}

.top-season .list-3col li .frame,
.top-season .list-4col li .frame,
.top-season .list-5col li .frame {
	box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.5);
}
.top-season .thumb-list .badge-open {
	right: 2%;
	top: 2%;
}

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

	.top-season{
        flex-flow: column;
    }
    .top-season h3 {
			flex: auto;
    }
    .top-season h3 span {
			display: block;
    }
    .top-season .list-3col,
		.top-season .list-4col,
		.top-season .list-5col{
			width: 100%;
			flex: auto;
    }

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

}

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

    .top-season .list-3col ul,
		.top-season .list-4col ul,
		.top-season .list-5col ul{
			justify-content: center;
			padding: 5% 3%;
			flex-wrap: wrap;
    }
    .top-season .list-3col li,
		.top-season .list-4col li,
		.top-season .list-5col li{
			width: calc(100% / 2 - 2%);
			margin-top: 0;
    }
    .top-season .btn-area {
        padding-top: 0;
    }
}

/* --------------------------------------------------
top-look
-------------------------------------------------- */

.top-look{
	margin:0;
}
.ttl-top-look{
	background:#007AE1;
	text-align:center;
	color:#FFF;
	padding:10px 0;
}
.ttl-top-look span{
	display:block;
}
.ttl-top-look span:first-of-type{
	text-align:center;
	font-size:2.8rem;
	letter-spacing:.5rem;
	font-weight:bold;
}
.ttl-top-look span:last-of-type{
	display: inline-block;
	padding:0 10px;
	border-top:#0065B7 solid 3px;
	line-height:2;
}
.top-look .list-4col{
	max-width:1200px;
	margin:0 auto;
}
.top-look .list-3col{
	margin-bottom:0;
}
.top-look .list-3col ul{
	padding:0;
	flex-wrap: nowrap;
	width:100%;
	max-width:1500px;
	margin:0 auto;
}
.top-look .list-3col li{
	margin-top:0;
	margin-right:0;
	padding-bottom:0;
	width: calc(100% / 3);
}
.top-look .thumb-list .badge-more{
	right:20px;
}

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

	.top-look .list-4col{
		padding:2%;
	}
	.top-look .list-4col li{
		width: calc(100% / 4 - 2%);
	}
}

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

	.top-look .list-3col ul{
		overflow-x:scroll;
		-webkit-overflow-scrolling:touch;
		overflow-scrolling:touch;
	}
	.top-look .list-3col li{
		min-width:380px;
	}
	.top-look .list-4col li{
		width: calc(100% / 2 - 2%);
	}
}
@media screen and (max-width:400px) {

	.top-look .list-3col li{
		min-width:300px;
	}
}


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

.top-stay{
	margin:0;
}
.ttl-top-stay{
	background:#EB4747;
	text-align:center;
	color:#FFF;
	padding:10px 0;
}
.ttl-top-stay span{
	display:block;
}
.ttl-top-stay span:first-of-type{
	text-align:center;
	font-size:2.8rem;
	letter-spacing:.5rem;
	font-weight:bold;
}
.ttl-top-stay span:last-of-type{
	display: inline-block;
	padding:0 10px;
	border-top:#C21414 solid 3px;
	line-height:2;
}
.top-stay .list-4col{
	max-width:1200px;
	margin:0 auto;
}
.top-stay .list-3col{
	margin-bottom:0;
}
.top-stay .list-3col ul{
	padding:0;
	flex-wrap: nowrap;
	width:100%;
	max-width:1500px;
	margin:0 auto;
}
.top-stay .list-3col li{
	margin-top:0;
	margin-right:0;
	padding-bottom:0;
	width: calc(100% / 3);
}
.top-stay .list-3col li:nth-child(odd) .pht-case figcaption{
	background:rgba(173, 69, 69, 0.8);
	text-shadow:black 0px 0px 2px;
}
.top-stay .list-3col li:nth-child(even) .pht-case figcaption{
	background:rgba(139, 44, 65, 0.8);
	text-shadow:black 0px 0px 2px;
}


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

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

	.top-stay .list-3col ul{
		overflow-x:scroll;
		-webkit-overflow-scrolling:touch;
		overflow-scrolling:touch;
	}
	.top-stay .list-3col li{
		min-width:380px;
	}
	.top-stay .list-4col li{
		width: calc(100% / 2 - 2%);
	}
}
@media screen and (max-width:400px) {

	.top-stay .list-3col li{
		min-width:300px;
	}
}


/* --------------------------------------------------
top-brand
-------------------------------------------------- */

.top-brand{
	display:flex;
	align-items:center;
	justify-content:center;
	padding:3%;
	margin:0;
	background:#ECC837;
}
.top-brand h3 {
	flex:1;
	text-align:center;
}
.top-brand h3 span{
	display:inline-block;
	margin:5px 30px;
}
.top-brand h3 span:first-of-type{
	text-align:center;
	font-size:2.8rem;
	letter-spacing:.5rem;
	font-weight:bold;
	position:relative;
	padding-bottom:7px;
}
.top-brand h3 span:first-of-type:before{
	content:"";
	width:100%;
	height:3px;
	background:#272727;
	z-index:1;
	position:absolute;
	left:0;
	bottom:0;
}
.top-brand .list-3col{
	margin-bottom:0;
	flex:2;
}
.top-brand .list-3col ul{
	flex-wrap: nowrap;
    justify-content: center;
}

.top-brand .list-3col li {
    max-width: 300px;
    padding-right: 5px;
}
.top-brand .list-3col li .frame{
	box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.5);
}
.top-brand .btn-more-plus{
	position:absolute;
	bottom:5%;
	right:5%;
	opacity:.5;
}

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

	.top-brand{
		flex-flow: column;
	}
	.top-brand h3 {
		flex:auto;
	}
	.top-brand h3 span{
		display:block;
	}
	.top-brand .list-3col{
		width:100%;
		flex:auto;
	}
	.top-brand .list-3col li{
		width: calc(100% / 3 - 2%);
	}
}

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

	.top-brand .list-3col ul {
    justify-content: center;
        padding: 5% 3%;
        flex-wrap: wrap;
        justify-content: flex-start;
	}
	.top-brand .list-3col li{
		width: calc(100% / 2 - 2%);
        margin-top: 0;
	}
}


/* --------------------------------------------------
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:150px;
	height:150px;
	background: #000;
	color:#FFF;
	text-align:center;
	margin:0 3%;
	border-radius:75px;
	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:2.8rem;
	letter-spacing:.5rem;
	font-weight:bold;
	margin-bottom:5px;
	margin-top:10px;
}
.top-event .list-3col{
	margin-bottom:0;
    width: 65%;
}
.top-event .list-3col ul{
    padding-left: 10px;
    margin-right: 0;
	flex-wrap: nowrap;
}

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

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

    .top-event .list-3col {
        width: 100%;
    }

    .top-event .list-3col ul {
        flex-wrap: wrap;
    }
}

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

    .top-event h3 {
        margin: 3%;
    }
}


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

.top-event-local{
	background:#E8E8E8;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:3%;
    margin: 0;
}
.top-event-local h3{
	width:150px;
	margin:0 3%;
	font-size:2rem;
	font-weight:bold;
}
.top-event-local h3 span{
	display:block;
	text-align:center;
}
.top-event-local h3 span:last-of-type{
	border-top:#000 solid 3px;
}
.top-event-local .list-4col{
	margin-bottom:0;
    width: 70%;
}

.top-event-local .list-4col li {
    padding-bottom: 0;
}

@media screen and (max-width: 1200px) {
	.top-event-local{
        flex-flow: column;
	}
	.top-event-local .list-4col{
        width: 100%;
    }

    .top-event-local .list-3col ul {
        flex-wrap: wrap;
    }

}

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

    .top-event h3 {
        margin: 3%;
    }
}



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

.top-ranking{
	padding:2%;
	margin:0 auto;
	max-width:1400px;
}
.top-ranking .block-side{
	margin-top:15px;
}

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

	.top-ranking .list-3col li:first-of-type{
		width:calc(100%);
	}
	.top-ranking .list-3col li:nth-of-type(even){
		margin-right: 2%;
	}
	.top-ranking .list-3col li{
		width:calc(48%);
	}

}

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

.infiniteslide {
    margin-bottom: 3%;
}

/* --------------------------------------------------
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;
	}
}