@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 */
body{background: url("../images/pc_bg.jpg") no-repeat center top; background-color: #cfbeb4;}

.cont1{width: 1280px; position: relative; margin: 0 auto; height: 100%;}
.kv{width:100%; height: 438px; background: url("../images/pc_KV.png") no-repeat center top;}
.content{ width: 100%; margin: 80px 0; }
.black_ct{position: relative; width: 50%; float: left; text-align: center; }
.white_ct{position: relative; width: 50%; float: right;  text-align: center;}
.title{ font-size: 35px; letter-spacing: 4px; }
.title .small{ font-size: 22px; }

/* kv */
.logo{ position: absolute; left: 50%; width: 162px; top: 60px; margin: 0 0 0 -81px; }
.logo img{ width: 100%; }
.bubble{ 
  position: absolute; 
  width: 242px; 
  height: 94px;
  left: 50%; 
  top: 100px; 
  margin: 0 0 0 -121px; 
  background: url("../images/bubble_pc.png") no-repeat left top;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  background-size:cover;
}


.bubble_t2 {
    font-size: 15px;
    color: #3c3b3a;
    text-align: center;
    letter-spacing: 3px;
    line-height: 2.3em;
    position: absolute;
    top: 333px;
    left: 50%;
    width: 275px;
    margin: 0 0 0 -127.5px;
}

/* .bubble_t2{ font-size: 15px; color: #3c3b3a; text-align: center; letter-spacing: 2px; line-height: 1.2em; } */

/* .bubble img{ width: 100%; } */



/* black */
.black_area{ width: 75%; margin: 0 auto 30px auto; }
.b_logo{ max-width: 167px;  margin: 0 auto 20px auto; line-height: 60px;  }
.b_logo img{ width: 100%; }
.black_ct .title{ margin: 0 0 0 90px; }

/* .black_bg{ width: 600px; } */
.black_ct:after{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 628px;
	display: block;
	background: url("../images/black_background.png") no-repeat right top;
}

.black_img{ max-width: 66px; float: right; }
.black_img img{ width: 100%; }
.limit{color:#985a37; line-height: 60px; font-size: 15px; float: left; margin:0 0 0 30px;} 

.white_area .limit{  float: right; }


.ct2{ position: relative; }

.circle{
	position: relative;
	-webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%; 
    background: #fff;
    text-align: center;
    vertical-align: middle;
    font-size: 15px;
    color: #202020;
    width: 58px;
    height: 58px;
    display: inline-block;}


.taste_font{	
	position: absolute;
	top: 32%;
	left: 2px;
	width: 100%;}

.taste{
	margin: 0 40px ;
	font-size: 15px;
	display: inline-block;}

.taste span.taste_cc{ letter-spacing: 2px; margin: 0 0 0 10px; }
.check{ width: 22px; margin: 0 5px 0 0;  display: inline-block;}
.check img{ width: 100%; }
.des{ margin: 0 0px 0 0; letter-spacing: 1px; font-size: 15px; }
.price_black{ margin: 90px 0 0 0; }

/* .schedule#price1 li:nth-child(2):before{ display: none; } */


a.btn_style{ 
	display: block;
	text-align: center;
	font-size: 16px;
	padding: 8px ; 
	text-decoration: none;
	z-index: 2;
  position: relative;
  width: 61%;
  margin: 0 auto;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;}

a.btn_city{ background: #ac6743; color: #fff; margin: 100px auto 0 auto; }
a:hover.btn_style.btn_city{ background: #c26636; }


a.btn_tea{ background: #00b287; color: #fff; margin: 35px auto 0 auto;  }
a:hover.btn_style.btn_tea{ background: #16c49a; }


.fa-chevron-right{ margin: 0 0 0 10px; }
/*  white */
.t_logo{ max-width: 128px; margin: 0 auto 20px auto; }
.t_logo img{ width: 100%; }


.white_ct:after{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 628px;
	display: block;
	background: url("../images/white_background.png") no-repeat left top;
}

.depiction{ text-align: left; width: 38%; margin: 40px auto; }
.depiction_area{ display: block; margin: 18px auto; }



.white_area{ width: 75%;  margin: 0 auto 30px auto; }
.white_ct .title{ float: right; margin: 0 52px 0 0;  }
.white_img{ float: left; max-width: 66px; }
.white_img img{ width: 100%; }

.ct3{ width: 80%; margin: 0 auto; }



.cup{ color: #545353; font-size: 13px; margin: 0 10px 0 0; }

.schedule {
/*   margin-left: 0;
  padding: 0; */
  text-align: left;
  margin: 0 auto;
  list-style: none;
  width: 62%;}

.schedule li {
  position: relative;
  line-height: 2em;}


.schedule li:nth-child(1):before ,.schedule li:nth-child(2):before{
  position: absolute; 
  right: 28.5%;
  width: 35%;
  top: 15px;
  height: 1px;
  border-bottom: 1px dotted #727272; 
	content: "";}


.schedule#price2 li:nth-child(1):before ,.schedule#price2 li:nth-child(2):before{
 position: absolute; 
  right: 33%;
  width: 24.5%;
  top: 15px;
  height: 1px;
  border-bottom: 1px dotted #727272;  
  content: "";}


.schedule#price2 li:before {
  position: absolute; 
  right: 33%;
  width: 24.5%;
  height: 1px;
  top: 14px;
  border-bottom: 1px dotted #727272; 
  content: "";}

.schedule span:first-child {padding-right: 10px; }
.schedule span + span {float: right; padding-left: 0; }


.black_ct:before{
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  border-right:1px solid #9a897f; 
  right: 0;
  top: 0;}


/*  黑糖珍珠門市 */
.store_area{
  background: #e4d6cd;
  width: 100%;
  padding: 80px 0 30px 0; }

.store_area h3{ 
  font-size: 30px;
  font-weight: normal; 
  color: #845f4c; 
  text-align: center; 
  width: 100%; 
  margin: 0 auto;
  padding-bottom: 5px; 
  letter-spacing: 2px; 
  border-bottom: 1px solid #a69389;}


.cont2{ width: 785px; margin: 0 auto; }
.select {margin: 20px 0;  display: block;}


.option {
    padding: 4px;
    background: #fff;
    margin: 0 3px;
    border: 1px solid #fff;
    font-size: 15px;
    font-family: "微軟正黑體";
    color: #505050;
    border: 1px dotted #a6a6a6;}

.update{ font-size: 14px; color: #845f4c; float: right; display: inline-block; margin: 23px 0; }



table#store{
  width: 100%;
  margin: 10px 0; }

table#store tr th{ 
  background: #845f4c;
  font-size: 18px;
  color: #fff;
  padding:7px 0;
  font-weight: normal;
  text-align: center;}


table#store tr td{
  color: #252525;
  font-size: 15px;
  text-align: center;
  padding: 10px 8px;
  position: relative;
 /*  background: #fff; */
  /* border-bottom: 1px dotted #464646; */
  vertical-align: middle; }

table#store tr td:after{
   content: "";
   background: url("../images/dot.gif") repeat left top;
   position: absolute;
   left: 0;
   width: 100%;
   height: 2px;
   bottom: 0;}



.new{ 
  font-size: 12px;
  color: #FFF;
  background: #d2573f;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px; 
   text-align: center; 
   padding: 0px 0px;
   width: 35px; 
   height: 20px;
   line-height: 20px;
   display: inline-block; 
   margin: 0 5px 0 0;}


.schedule span.new:first-child{ padding-right: 0px; }
.schedule#price2 .new{  background: #00b287; }
footer{ color: #424242; font-size: 13px; line-height: 3em; text-align: center; background: #e4d6cd ;}

#gotop {
  display: none;
  position: fixed;
  right: 20px;
  bottom: 20px;
  padding: 10px 15px;
  font-size: 20px;
  background: #777;
  color: white;
  cursor: pointer;
}




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

	body{background: url("../images/m_bg.jpg") no-repeat center top; -webkit-background-size:contain; -moz-background-size:contain; background-size:contain; background-color: #cfbeb4; }
  .cont1{width: 100%; }
  .kv{width:100%; height: 0; padding-bottom: 105.46%; background: url("../images/m_KV.png") no-repeat left top; -webkit-background-size:cover; -moz-background-size:cover; background-size:cover; }
  .black_area{ margin: 0 auto 10px auto; }  
  .black_ct,.white_ct{width: 100%; float: none; }
  .content {margin: 12px 0; }
  .black_area {width: 80%;}
  .black_ct .title {margin: 0 0 0 -18%; position: absolute; left: 50%; }
  .taste {margin: 0 0; font-size: 15px; width: 48%; float: left; }
  .depiction {width: 80%; margin: 100px auto 20px auto;  }
  .ct2{ width: 89%; margin: 0 auto; }
  .b_logo{ margin: 0 auto; }
  .price_black {margin: 20px 0 0 0; }
  .schedule{ width: 81%; }

  .schedule li:nth-child(1):before, .schedule li:nth-child(2):before {
    position: absolute;
    right: 36%;
    width: 17%;
    height: 1px;
    top: 13px;   
    content: "";
    border-bottom: 1px dotted #727272; }

    a.btn_city{ margin: 20px auto 30px auto; width: 80%; }
    .t_logo{ margin: 80px auto 20px auto; }


    .white_area{ width: 88%; }
    .white_ct .title {float: none; margin: 0 0px 0 -21%; position: absolute; left: 50%; }

    .black_img{ float: left; margin: -10px 0 0 -18px;}
    .limit{float: right; margin: 0 8px 0 0; } 
    .white_img{ margin: -10px 0 0 6px;  }
    .white_area{ margin: 0 auto 20px auto; }
    .ct3 {width: 93%; }

    .schedule#price2 li:before{
        position: absolute;
        right: 40%;
        width: 6.5%;   
        content: ""; }

    .schedule#price2 li:nth-child(1):before, .schedule#price2 li:nth-child(2):before {
        position: absolute;
        right: 40%;
        width: 6.5%;
        content: ""; }

    a.btn_tea{ width: 80%; margin: 30px auto; }


    .black_ct:before{
        position: absolute;
        content: "";
        width: 90%;
        height: 1px;
        border-right: none;
        border-bottom: 1px dotted #9a897f;
        right: 50%;
        margin: 0 -45% 0 0;
        top: auto;
        bottom: -45px;    }

    .update {
        position: relative;
        float: none;
        margin: 0px auto 11px auto;
        display: block;
        text-align: center;
        padding-bottom: 10px;
        border-bottom: none; }


    .update:after{
        position: absolute;
        content: "";
        width: 100%;
        height: 2px;
        bottom: 0;
        left: 0;    
        background: url(../images/dot.gif) repeat left top;
        background-size:contain; }  


     

     

    .cont2{ width: 90%; margin: 0 auto; }
    .store_area{ padding: 30px 0 0 0; }
    .store_area h3{ border-bottom: none; padding-bottom: 0px;  }
    table#store tr th{ font-size: 16px; }
    table#store tr td{ font-size: 14px; }
    .option{width: 37%;  }
    table#store{ margin: 30px 0 0 0; /* border: 1px solid #a48676; */ }


    table#store tr td:after{
       content: "";
       background: url("../images/dot.gif") repeat left top;
       position: absolute;
       background-size:contain;
       left: 0;
       width: 100%;
       height: 2px;
       bottom: 0;}


    .bubble_t2 {
        font-size: 15px;
        color: #3c3b3a;
        text-align: center;
        letter-spacing: 0px;
        line-height: 1.9em;
        position: absolute;
        top: 176px;
        left: 50%;
        width: 275px;
        margin: 0 0 0 -127.5px;
    }


    .select{ text-align: center; }


}




@media only screen and (max-width:360px){
    .black_area {width: 90%;}
    .ct2{ width: 96%; margin: 0 auto; }
    .taste span.taste_cc{letter-spacing: 0;}

    .black_area {width: 78%; }
    .ct2 {width: 89%; }
      .white_ct .title{ letter-spacing: 0;  font-size: 33px; }

}





@media only screen and (max-width:320px){
  .black_ct .title {
    margin: 0 0 0 -18%;}
   .depiction{ width: 82%; }

   .schedule li:nth-child(1):before, .schedule li:nth-child(2):before {
    right: 43%;
    width: 17%; }

   .schedule#price2 li:nth-child(1):before, .schedule#price2 li:nth-child(2):before {
    right: 49%;
    width: 23.5%; }

    .schedule#price2 li:before {    
    right: 47%;
    width: 6.5%;}
    
    .bubble_t2{ top: 146px; }

    .black_area {width: 81%; }
    .black_ct .title {margin: 0 0 0 -21%; }
    .limit {margin: 0 -7px 0 0; }
    .ct2 {width: 92%; }
    .taste span.taste_cc {letter-spacing: 0px; margin: 0 0 0 0px; }
    .white_ct .title{ letter-spacing: 0;  font-size: 33px; }



}