@charset "utf-8";

/* $Reset
--------------------------------------------------------------------------------------*/
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,font,img,ins,kbd,q,s,samp,small,strike,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{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0;}

/* $body,html
--------------------------------------------------------------------------------------*/
html,
body {width: 100%; height:100%; /* overflow-x: hidden;*/ font-family: Arial,"Meiryo","微軟正黑體","新細明體","蘋果儷黑體",  Verdana, Helvetica, sans-serif; -webkit-text-size-adjust:none; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

/* $共用
--------------------------------------------------------------------------------------*/
/*----清除浮動技巧----*/
.clearfix:before,
.clearfix:after {content: " ";display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
/*----清除浮動技巧----*/

.float_L{float:left;}
.float_R{float:right;}
.clean{ clear:both;}


/* pc */
.wrapper{ 
 width: 100%;
 height: 100vh; }

.bg{
  width: 100%;
  /* height: 100%; */
  background: url("../images/pc_bg.jpg") no-repeat center bottom; 
  background-color: #000;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  background-size:cover;}


footer{ 
  color: #d7d7d7; 
  font-size: 12px;  
/*   position: absolute; 
  left:50%;
  bottom: 5%;
  margin: 0 0 0 -150px;*/
  text-align: center; 
  padding-bottom: 5%;}


.logo{ 
  width: 154px; 
  text-align: center;  
/*   margin: 0px auto;
  padding: 30px 0 30px 0; 
  position: relative;
  position: absolute; 
  left: 50%;
  margin: 0 0 0 -77px;
  top: -15%;*/
  padding:0 0 1.5% 0;
}
.main_title { padding:0 0 50px 0;}

.logo img , .title img , .main_title img{ width: 100%; }

.title{ 
  display: inline-block;
  margin: 0 auto;
}

.title_coffee{
  font-size: 3em;
  color: #c9a063;
  border: 1px solid #c9a063;
  border-radius: 99px;
  text-align: center;
  margin: 24px 0;
  padding: 8px 24px;
}

.area{ /*width: 1280px;   position: absolute; left: 50%; top: 50%; margin: -230px 0 0 -640px; */ display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 8% 0; }

.content{ width: 1066px;   margin: 20px auto 40px auto; }
.content_l{float: left; width: 485px; }
.content_r{float: right;  width: 490px; }
.content table, .content td, .content th{ color: #fff; height: 40px; vertical-align: middle; border:1px solid #fff; font-size: 14px; }
.content th{ text-align: center;}
.content td,.content th{ padding: 0 5px; line-height: 25px; }
.content td:first-child{ width: 50px; text-align: center;}



.content2{ position: relative; width: 100%; }
.r1{ float: left;  }
.r2{  float: right; width: 227px; height: 188px; /* background: url(../images/r2_pcimg.png) no-repeat left top; */   }
.r2 img{ width: 100%;  }

.notice { color: #fff; margin-top: 50px; text-align: center; }

h3{ background: #6e5024 ;color: #fff; font-size: 20px; display: inline-block;  text-align: center; padding: 2px 40px; margin: 15px 0; letter-spacing: 1px; }
ul li{  color: #fff; font-size: 15px; letter-spacing: 1px; line-height: 1.7em; }
p{ color: #fff; font-size: 15px; letter-spacing: 1px; line-height: 2em; }
p.mobile{ display: none; }
.mobile{ display: none; }

/* 手機
--------------------------------------------------------------------------------------*/
@media only screen and (max-width:768px){




body::before {
  background:url('../images/m_bg.jpg') no-repeat center bottom;
  background-size: 100% auto;
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  content: "";
  z-index: -1;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  background-size:cover;
}  


.bg{
 
  background: none; }

.area {
    width: 90%;
    height: auto;
    position: relative;
    left: auto;
    top: auto;
    margin: 0 auto;}


.logo {
    width: 40%;
    text-align: center;
    position: relative;
    left: auto;
    margin: 0  auto;
    padding: 30px 0 15px 0;
    top: 0;
}

.main_title { width: 95%; margin: 0 auto; }

.title{ 
  display: inline-block;
  margin: 80px auto 0 auto;
}

.title_coffee{
  font-size: 1.6em;
  color: #c9a063;
  border: 1px solid #c9a063;
  border-radius: 99px;
  text-align: center;
  margin: 24px 0;
  padding: 8px 24px;
}

.content{ width: 90%; margin: 0 auto; }
h3{ display: block; }
.mobile{ display: block;}
p.mobile{ display: block;  line-height: 1.7em;}
p.pc{ display: none; }

.content_l,.content_r{ width: 100%; }
.r1,.r2{ float: none; }

.r2{margin: 20px auto;}

footer{    
  position: relative; 
  left:auto;
  bottom: auto;
  top: auto;
  width: 100%;
  text-align: center;
  margin: 50px auto;
  text-align: center;}


}