@charset "utf-8";
/* CSS Document */
/* ---reset.css--- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

html{
	background:url("../images/bg.jpg") top center repeat;
}



/* PC */
.WRAPPER{ position:relative; width:100%; min-width:1200px; margin:0 auto; overflow:hidden;}
 	@media screen and ( max-width: 991px ){
		.WRAPPER{ min-width:100%;}
		
	}
.container { overflow: hidden; }
.topbox { position: relative; width: 1200px; margin: auto;}
.kv_pc {width: 100%;  position: relative; text-align:center; display: flex;justify-content: center;max-width: 1920px; margin: auto;flex-wrap: wrap-reverse;}
.kv_pc img { display: block; text-align: center; }
.kv_m { display: none; }
.kv_m img { display: block; }
.kv_m a {font-size: 0; display: block; }
.for_pc{ display: block; }
.for_m { display: none; }

/* m */
@media screen and ( max-width: 991px ){
	.kv_m { display: block; width: 100%; }
	.kv_m img {  width: 100%; }
	.kv_pc { display: none; }
	.container {width: 100%; min-width: auto; }
	.for_pc{ display: none; }
	.for_m { display: block; }
}

/*--  共用   --*/
.titleC{
	background: url("../images/h2bg.png") top center no-repeat;
	margin: 0 auto;
	padding: 45px 0;
	color: #ffe58f;
}
.Area_bottom{
	margin-bottom: 20px;
}

@media screen and ( max-width: 991px ){}
@media screen and ( max-width: 640px ){
	.titleC{
		background: url("../images/h2bg.png") top center no-repeat;
		background-size: 120vw;
		padding: 6.3vw 0;
	}
	.Area_bottom{
		margin-bottom: 6vw;
	}
}

/*--  0.攻略   --*/

.bg01{ background: url("../images/bg01top.jpg") top center no-repeat; padding: 60px 0 0 ;}
@media screen and ( max-width: 640px ){
	.bg01{ padding: 3vw 0 0 ;}
}
.bg_0 .notice{width: 100%;margin: 0 auto;text-align: center;padding: 0px 0 20px;font-size: 0.9rem;line-height: 1.2rem;font-weight: 500;color: #fff;}
.bg_0{background:url("../images/bg-black.jpg")repeat;padding-bottom: 30px;}

.banner-discount{margin: 0 auto; padding:10px 0 10px;}
.banner-discount ul li img{width: 100%;margin: 3px;}
.bg_discount{padding-top: 50px!important;}

@media screen and ( max-width: 991px ){
.banner-discount ul li img{width: 46vw;}
.banner-discount ul li{width: 46vw;}
.banner-discount3 ul{padding: 0;}
.bg_0 .notice{padding: 1vw 5vw;}
.bg_0{padding-bottom:2vw;}
.bg_coupon{margin: 4vw auto 2vw;}
.bg_discount{margin: 0 auto 2vw;padding:2vw 0 !important;}
.titleC-dis{margin: 5vw auto 0; padding: 0 0 2vw;height: 18vw; background: url("../images/titlec-m.png")top center no-repeat;width: 96vw;background-size: 96vw;}
.titleC-dis h2{padding: 0;font-size: 7.8vw;background: transparent;height: auto;}
}



/*文字標題*/
.container > .titleC {margin: 20px auto;}
.container > .titleC p {color: #000; font-size: .9rem; text-align: center;}


/*元件調整*/
.banner, .hightlightAd {padding:0;}
.rectangle, .hightlight, .round_3p, .crosswise_3p, .hightlightAd, .film-genre {margin: 20px auto;}
.hightlightFont, .half ul {border-radius: 20px; padding: 10px;}
.hlfont h2, .hl-font a {border-radius: 100px;}
.hlfont p {
	font-size: 1.1rem;
    margin: 10px auto 30px;
}
.film-genre img {object-position: 0 0;}


/*輪播統一設定*/
.slick-dotted.slick-slider {margin-bottom: 0px !important;}


/*按鈕*/
.button_go {margin: 20px auto 40px;}
.button_go a{
	text-align: center;
	width: 360px;
	height: 80px;
	display: block;
	background: #ff3c4e;
	line-height: 80px;
	margin: 0px auto;
	border-radius: 50px;
	color: #fff;
	box-shadow: 0 7px #c22634;
	transition: .2s;
	font-size: 2.8rem;
}
.button_go a:hover{ 
	filter:brightness(70%);
	transform: translateY(4px);
	box-shadow: 0 2px #c22634;	
}

/*大三品*/
.zasshi3{width:1160px;margin: 20px auto 40px;}
.zasshi3 ul{display: flex;justify-content: space-around;}
.zasshi3 ul li{width:370px;background: #ae2a5b;padding: 10px;text-align: center;position: relative;transition: 0.5s all; border-radius: 15px;}
.zasshi3 ul li:hover{transform: scale(0.96);}
.zasshi3 ul li h4{font-size: 1.4rem;padding-left: 40px;margin: 15px auto;color:#fff;}
.zasshi3 ul li a{display: flex;justify-content:flex-start;flex-wrap: wrap;}
.zasshi3 ul li img{width:330px;height: 330px; object-fit: contain;margin: 5px auto;}
.dis-for-zasshi3{position: absolute;top: 10px;left:  10px;border-radius: 50px;background:#4a2065;width: 80px;height: 80px;color: #fff;display: flex;align-items: center;justify-content: center;font-size: 1rem;font-weight: 500;text-align: center;flex-wrap: wrap;flex-direction: column;}
.dis-for-zasshi3 big{color:#fff;font-size: 2.5rem; }
.zasshi3 ul li .font{text-align: left;margin:-30px 0 10px;display: flex;flex-direction: column;width:auto;}
.zasshi3 ul li .font p{background:#fff224; padding:5px 25px 5px 15px;color: var(--PV-font);text-align: left;border-radius: 0 30px 0 0;}
.zasshi3 ul li .font .price{margin-top: 5px; color: #fff;}
.zasshi3 ul li .font .price big{color: #fff224;}
.zasshi3-buy{position: absolute;bottom: 20px;right: 10px;border-radius: 50px;background:#4a2065;width: 80px;height: 80px;color: #fff;display: flex;align-items: center;justify-content: center;font-size: 1rem;text-align: center;flex-wrap: wrap;flex-direction: column;}


/*五品+標題*/
.special_5p_1 .title_AA h2{color:#ffe58f; font-size: 50px; background: url("../images/h3bg.png") top center no-repeat; margin: 20px 0 0 60px; padding: 20px 0;}
.special_5p_1 .hightlight_5p ul li{height: 360px;}
.special_5p_1 .hightlight_5p ul li:first-child{height: 470px;}
.special_5p_1 { margin: 50px auto 60px;}


/* -------------------------------------m版------------------------------------- */
@media screen and ( max-width: 991px ){
	
	

/*文字標題*/
.container > .titleC {margin:2vw 1vw;}	
		
	
/*元件調整*/
.rectangle, .hightlight, .crosswise_3p, .hightlightAd, .film-genre, .round_5p {margin: 2vw auto;}
.round_3p {margin: 5vw auto;}
.keywordC {padding-bottom: 0;}		
.half ul {padding: 2vw 0; margin: 1vw;}	
.half .scene li {margin: 0;}	
.hightlight_s .scene img {width: 100%;}	
.hlfont h2 {font-size: 1.5rem; margin:-10vw auto 2vw;}
.hightlightFont ul.scene, .hightlightFont ul.hl-font {width:90vw !important; margin-bottom: 4vw;}	
.hlfont p {font-size: 1.1rem; line-height: 1.7rem; margin: 2vw auto 6vw;}	
.hlfont .price {font-size: 1.5rem; line-height: 1.7rem; margin: 1vw auto 3vw;}	
	
	
/*輪播統一設定*/	
.slider {margin: 2vw auto !important;}
.slick-dotted.slick-slider { padding-bottom: 2vw !important;}		
	
	
/*按鈕*/
.button_go {margin: 6vw 0;}
.button_go a{
	text-align: center;
	width: 65vw;
	height: auto;
	line-height: 15vw;
	font-size: 2.2rem;
}	
	


/*大三品*/	
.zasshi3{width:100%;margin:2vw auto;}
.zasshi3 ul{justify-content:center;flex-wrap: wrap;}
.zasshi3 ul li{margin: 1vw auto;width: 96vw;padding: 1vw;}
.zasshi3 ul li a{flex-direction: column}
.zasshi3 ul li img{width:70vw;height: 70vw; object-fit: contain;margin: 1vw auto;}
.zasshi3 ul li .font{margin: 0 auto 2vw;}
.zasshi3 ul li .font p{text-align: center;width:100%;background: transparent;margin: 1vw auto;color: var(--PV-font);}
.zasshi3 ul li .font .price{text-align: center;}
.zasshi3-buy{display: none;}

	
/*五品+標題*/	
.special_5p_1 .hightlight_5p ul li, .special_5p_1 .hightlight_5p ul li:first-child{height: auto;}
.special_5p_1 .title_AA{ height: 13vw; }
.special_5p_1 .title_AA h2{ font-size: 2.5em; background-size:80vw; margin: 0; padding: 3vw 0;}
.special_5p_1 { margin: 3vw auto 0;}
}



/*btn*/
.blk_btn {
	max-width: 900px;
	margin: 20px auto;
	display: flex;
	flex-wrap: wrap;
}
.btn{
    position: relative;
    width: fit-content;
    margin: 20px auto;
    padding: 10px 150px;
    border-radius: 50px;
	background:url("../images/bg-dot.jpg");
	border: 5px #930000 solid; 
	background-clip: padding-box;
}

.btn h2{
    line-height: 60px;
    margin-left: -50px;
	letter-spacing: 2px;
	font-size: 2.5rem;
	color: #930000;
}
.btn span{
    font-size: 1.8rem;
    border-radius: 100%;
    padding: 18px 9px;
    position: absolute;
    right: 80px;
	top:7px;
    animation: pulse 1s infinite;
	color: #fff;
	background: url("../images/bg-dot_r.jpg");
}

.keywordB .keywordA a{
	color: #ffec9f;
}

.keywordB .keywordA li{
	background: url("../images/bg-dot_r.jpg");
	border: solid 1px #ffec9f;
	box-shadow:4px 4px 0px #ffec9f;
}

.keywordB .keywordA li:hover {
    background: url("../images/bg-dot_dr.jpg");
}

@media screen and ( max-width: 991px ){	
	.blk_btn li{
	margin:2vw auto;
	display: flex;
	flex-wrap: wrap;}
}

@media screen and ( max-width: 640px ){	
	.blk_btn li{

	}
}

@media screen and ( max-width: 640px ){	
/*五品+標題*/	
.special_5p_1 .hightlight_5p ul li, .special_5p_1 .hightlight_5p ul li:first-child{height: auto;}
.special_5p_1 .title_AA{ height: 13vw; }
.special_5p_1 .title_AA h2{ font-size: 2em; background-size:140vw; margin: 0; padding: 3vw 0;}
}


/*for mobile*/
menu{display:none;}
@media screen and ( max-width: 991px ){
		menu{ display:block;}
	}
menu ul{
	top:0;
	left:0;
	margin:0;
	width:100%;
	display:flex;
	flex-wrap:wrap;
	list-style: none;
	background:#00317e;
	z-index:999;
	padding:2px 0;
	border-top:none;
}
menu ul li{
	border-right:.75px solid  #fff;
	padding:5px 0 6px;
	width:25%;
	box-sizing:border-box;
	text-align:center;
	letter-spacing:1px;
}
menu ul li a{
	color: #fff;
	font-size:.86rem;
	line-height:1.3rem;
}
menu ul li:nth-child(4) {border-right:none;}
menu ul li a:hover{
	color:  #ffcf00;
}


/*--夢幻大牌來相挺--*/
.slick5itam-2 h4, .slick5itam-2 p{ color: #fff;}


/*--  錨點微調--*/
.target-fix {position: relative;top: 0px;display: block;height: 0;overflow: hidden;}
@media screen and ( max-width: 991px ) {
.target-fix {top:-40px;}
	}





 /*--goto top--*/          
 #gotop {display: inline-block;background-color: #000; width: 40px;height: 40px;text-align: center;border-radius: 100%;position: fixed;bottom: 0px;right: 0px;transition: background-color .3s, opacity .5s, visibility .5s;opacity: 0;visibility: hidden;z-index: 1000;margin: 30px;}          
 #gotop::after {position: absolute;display: block;font-family: FontAwesome;content: '　';font-weight: normal;font-style: normal;font-size: 2em; line-height: 50px;color: #fff;opacity: 0.5;background: url("../images/top.png") center no-repeat;background-size: 50%;background-position: 85% 35%;}         
 #gotop:hover {cursor: pointer;background-color: #666;}          
 #gotop:active {background-color: #ccc;}          
 #gotop.show {opacity: 0.4;visibility: visible;}          
 @media screen and ( max-width: 991px ){          
 #gotop {bottom: 70px;right: 0;margin: 2vw;}
 }         
 /* share url */          
 #share{display: inline-block;background-color: #000;opacity:0.4;width: 40px;height: 40px;text-align: center;border-radius: 100%;position: fixed;bottom: 50px;right: 0px;transition: background-color .3s, opacity .5s, visibility .5s;z-index: 1000;margin: 30px;}
 #share::after{position: absolute;display: block;font-family: FontAwesome;content: '　';font-weight: normal;font-style: normal;font-size: 2em; line-height: 50px;color: #fff;opacity: 0.5;background: url("../images/share.png") center no-repeat;background-size: 50%;background-position: 80% 35%;}
 #share:hover{cursor: pointer;background-color: #666;}
 #share:active{background-color: #666;}
 @media screen and ( max-width: 991px ){
 #share{bottom:115px;right: 0;margin: 2vw;}
 }                    
 @media screen and ( max-width: 991px ){          
 html{padding-bottom: 80px;}          
 }