@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;
	font-size: 100%;
	font: inherit;
}

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

/* ---reset.css--- */
html, body{	
	font-family:'Noto Serif TC', "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial, sans-serif;
	-webkit-text-size-adjust:none;
}

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

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
	      line-height:1;
}

:focus { outline: 0; }

li{ list-style:none;} 
a { text-decoration:none;}






/* 滑鼠動態效果 */
.container li , .fukuda a {  
	-webkit-transition-duration:.3s;
	        transition-duration:.3s;
	-webkit-transition-property:transform;
	        transition-property:transform;
	-webkit-transition-timing-function:ease-out;
	        transition-timing-function:ease-out}
.container li:hover,.fukuda a:hover{
	-webkit-transform: scale(0.98);;
		    transform: scale(0.98);}



/* PC */
.WRAPPER{ position:relative; width:100%; min-width:1200px; margin:0 auto; overflow:hidden;}
 	@media screen and ( max-width: 768px ){
		.WRAPPER{ min-width:100%;}
		
	}
.container { overflow: hidden; }
.topbox { position: relative; width: 1200px; margin: auto;}
.title01{ top: 88px; left: 69px; position: absolute; z-index: 5;}
.title02{ top: 248px; left: 118px; position: absolute; z-index: 5;}
.title03{ top: 334px; left: 117px; position: absolute; z-index: 5;}


.kv_pc {width: 100%;  position: relative; text-align:center; background:url("../images/kv.jpg") top center no-repeat;}
.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: 768px ){
	.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; }

}


.fukuda { width: 1200px; margin: auto; background:url("../images/fukudabg.jpg") top center no-repeat;padding: 20px 80px 0;}
.fukuda a  { display: flex;  }
.fukuda .font  { color: #710916; text-align: center; }
.fukuda .font h2 { font-size: 46px;  line-height: 70px;}
.fukuda .font h3 { font-size: 26px; background: #d42520;border-radius: 50px;color: #fff; line-height: 40px; text-align: center; }
.fukuda .font p { padding: 10px 20px 35px;font-size: 18px; }
.fukuda .font .price { font-size: 30px; padding: 0 20px; }
.fukuda .font .price big { font-size: 36px; color: #d42520; }
.fukuda .font small { font-size: 12px; padding: 0 0 0 20px; color: #fadea0;display: block;}
	@media screen and ( max-width: 768px ){
		.fukuda { width: 96vw; margin: auto; background:#f9da9d;padding:6vw;border: 7px double #3e0d0d;}
		.fukuda a  { flex-wrap: wrap; justify-content: center; }
		.fukuda a img { width: 100%; }
		.fukuda .font  {   }
		.fukuda .font h2 { font-size: 2.2rem;  line-height: 4rem; text-align: center;}
		.fukuda .font h3 { font-size: 1.2rem;  line-height: 2rem;  }
		.fukuda .font p { padding: 2vw ;font-size: 1rem; }
		.fukuda .font .price { font-size: 1.6rem; padding: 0 2vw; }
		.fukuda .font .price big { font-size: 2rem; }
		.fukuda .font small { font-size: 0.6rem; padding: 0 2vw;color: #bc1625; }

	}


.yang-tze{width: 1160px; display: flex;border: 7px double #e6be8e; padding: 30px; margin: 20px auto 60px;background: #af1814;}
.yang-tze h2{font-size: 22px;color: #fada9c;}
.yang-tze hr {border-left: 1px solid ;border-color: inherit;}
.yang-tze p {width: 840px; color: #fada9c;}
	@media screen and ( max-width: 768px ){
		.yang-tze{width: 96vw; flex-wrap: wrap; padding: 30px; margin:5vw auto;}
		.yang-tze h2{font-size: 1.6rem;}
		.yang-tze hr {width: 90vw; margin: 4vw 0;}
		.yang-tze p {width: 90vw;font-size: 1rem; line-height: 1.8rem }
	}


.red-envelope{width: 1160px; margin: 20px auto 60px;}
.red-envelope ul{ display: flex; justify-content: space-around;}
.red-envelope ul li{ width: 360px;border-radius: 120px 120px 0px 0px;border: 7px double #bc1625;padding: 10px 20px;background:#fadc9f url("../images/fu.png") bottom right no-repeat;margin: 10px;}
.red-envelope ul li a { display: flex; flex-wrap: wrap; justify-content: center;}
.red-envelope ul li a img{ width: 380px;  object-fit: contain; }
.red-envelope ul li a h2{ text-align: center; font-size: 26px; padding: 20px 0 0;color: #710916;line-height: 30px;}
.red-envelope ul li a p{ font-size: 14px; padding:0 0 20px 0;color: #710916;}
.red-envelope ul li a span{ font-size: 20px; color: #710916;}
.red-envelope ul li a span big{ font-size: 30px; color: #d42520;}
	@media screen and ( max-width: 768px ){
		.red-envelope{width: 96vw; margin:5vw auto;}
		.red-envelope ul{ flex-wrap: wrap; }
		.red-envelope ul li{ width: 80vw;padding: 2vw 5vw; margin: 3vw auto;}
		.red-envelope ul li a { }
		.red-envelope ul li a img{ width: 88vw;}
		.red-envelope ul li a h2{ font-size: 1.6rem; padding: 10vw 0 0;}
		.red-envelope ul li a p{ font-size: 0.9rem; line-height: 1.5rem; padding:0 0 2vw 0;}
		.red-envelope ul li a span{ font-size: 1.2rem; }
		.red-envelope ul li a span big{ font-size: 2rem; }
	}





/* bg */
.bg01 { background:#bc1625 url("../images/bg01.jpg") top center no-repeat; }
.bg02 { background:url("../images/bg02.jpg") top center repeat;}
.bg03 { background:url("../images/bg03.jpg") top center repeat;}













/*--goto top--*/
#gotop {
  display: inline-block;
  background-color: #000;
  opacity:0.3;
  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;
}
@media screen and ( max-width: 768px ){
#gotop {
  bottom: 2vw;
  right: 0;
  margin: 2vw;	
	}
  	
}

#gotop::after {
  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:50% 20%;
}
#gotop:hover {
  cursor: pointer;
  background-color: #666;
}
#gotop:active {
  background-color: #666;
}
#gotop.show {
  opacity: 0.4;
  visibility: visible;
}