@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
/* ===================================================================
 CSS information
 file name  :  layout.css
 editor :  comlab
=================================================================== */

@media print, screen and (min-width:769px){
* {
    font-family: 'Noto Sans TC';
  }

#container {
  /*background: url(img/bg-house.png);*/
  background-repeat: repeat-y;
  background-size: contain;
}
#house{
  position: absolute;
  z-index: -1;
  width: 100%;
  overflow: hidden;
}
#house div{
  height: 200%;
  width: 100%;
  background: url(img/bg-house.png);
}
.ie #trial .product .item{
      margin: 0 33px 20px 0;
}

/*----------------------------------------------------
  header
----------------------------------------------------*/
header{
  padding: 50px 0 70px;
  color: #7F663F;
}
header a{
  color: #7F663F;
}
header a:hover{
  text-decoration: underline;
}
header .language{
  top: 50px;
  left: 20px;
  position: absolute;
}
header .logo{
  width: 120px;
  margin: 0 auto;
}
header .info{
  width: 171px;
  height: 64px;
  top: 50px;
  right: 20px;
  position: absolute;
}
header .info .tel{
  width: 171px;
  margin-bottom: 10px;
}
header .info .contact{
  width: 105px;
  margin: 0 auto;
}
.drawer {
  display: none;
}
.sp-menu-btn {
  display: none;
}
nav {
  width: 1020px;
  margin: 70px auto 0;
}
nav ul {
  width: 1020px;
  margin: 0 auto;
  overflow: hidden;
}
nav li {
  float: left;
  text-align: center;
  background: url(img/nav-line.png) no-repeat left center;
  padding-left: 1px;
}
nav .first {
  background: none;
  padding-left: 0;
}

/*----------------------------------------------------
  sub
----------------------------------------------------*/
#sub{
  width: 230px;
  float: left;
}
#sub .bnr{
  margin-bottom: 20px;
}
#sub .title_sub{
  border-bottom: 2px solid #E39600;
  padding-bottom: 6px;
  font-size: 100%;
  margin-bottom: 10px;
  font-weight: bold;
}
#sub ul li{
  border-bottom: 1px dotted #000;
  matgin-bottom: 8px;
}
#sub ul li a{
  display: block;
  padding: 8px 0 8px 22px;
  color: #000;
  text-decoration: none;
  background: url(../../../index.html) no-repeat 10px center;
}
#sub ul li a:hover{
  text-decoration: underline;
}


/*----------------------------------------------------
  footer
----------------------------------------------------*/
footer .info{
  background: url(img/footer-bg.jpg) ;
  padding: 20px 0;
  overflow: hidden;
  line-height: 2.0;
}
footer .info .nav-right a:hover, 
footer .info .nav-left a:hover{
  text-decoration: underline;
}
footer .inr{
  width: 1020px;
  margin: 0 auto;
}
footer .logo {
  width: 96px;
  float: left;
  margin-right: 40px;
}
footer .left-col {
  width: 420px;
  float: left;
}
footer .left-col p {
  margin-bottom: 10px;
  line-height: 1.8;
}
footer .left-col .contact {

  display: inline-block;
}
footer .left-col .contact a {
  background: #806640;
  display: block;
  color: #fff;
  padding: 6px 24px;
}
footer .nav-left {
  width: 160px;
  float: right;
  margin-left: 20px;
}
footer .nav-right {
  width: 210px;
  float: right;
  margin-left: 20px;
}
footer ul li {
  background: url(img/footer-arw.png) no-repeat left center; 
  padding-left: 10px;
}
footer .none {
  display: none;
}
footer .copyright{
  text-align: center;
  background: #5a2626;
  padding: 20px 0;
}
footer #pagetop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 100px;
  height: 100px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  z-index: 300;
}
footer #pagetop a {
  display: block;
  height: 100px;
  background: url(img/pagetop-pc.png) no-repeat left top;
}
#pagetop{
  display:none;
}

/*----------------------------------------------------
  index
----------------------------------------------------*/
#index .top-image{
  margin-bottom: 80px;
  position: relative;
}
/*#index .top-slide{
  position: absolute;
  height: 500px!important;
  width: 100%!important;
}*/
#index .top-slide li{
  height: 500px!important;
}
#index .top-image .bx-viewport,
#index .top-image .bx-wrapper{
  position: absolute;
  width: 100%!important;
  top: 0;
}
#index .top-slide .img1{
  background: url(img/top1.jpg) no-repeat center center;
  background-size: cover;
}
#index .top-slide .img2{
  background: url(img/top2.jpg) no-repeat center center;
  background-size: cover;
}
#index .top-slide .img3{
  background: url(img/top3.jpg) no-repeat center center;
  background-size: cover;
}
#index .top-image .inr {
  height: 500px;
  width: 1020px;
  margin: 0 auto;
  padding: 170px 0 0;
  z-index: 100;
  position: relative;
}
#index .top-image .catch-main {
  margin-bottom: 30px;
}
#index .top-image .bx-wrapper img {
  width: 100%!important;
}
#index .top-image .catch-txt {
  height: 68px;
  width: 652px;
  background: url(img/index-catch-sub.png) no-repeat center center; /*輪播圖小字*/
}
#index .top-image .catch-main img,
#index .top-image .catch-txt img{
  width: inherit;
  max-width: inherit;
}

#index .greeting {
  padding-bottom: 100px;
}
#index .greeting .txt{
  height: 535px;
  float: right;
  text-indent: -9999px;
}
#index .greeting .ttl {
  float: right;
  width: 36px;
  height: 127px;
  background: url(img/index-greeting-ttl.png) no-repeat right top;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
#index .greeting .gothic {
  width: 950px;
  float: left;
  background: url(img/index-greeting-image.png) no-repeat left top;
  margin-top: 20px;
}
#index .greeting .kutouten {
  float:none;
  margin:0;
  position:relative;
  left: 0.7em;
  top: -0.7em;
}
#index .greeting .kutouten02 {
  float: none;
  left: 0.7em;
  margin: 0;
  position: relative;
  top: -0.5em;
}
#index .contents {
  min-width: 1020px;
  margin-bottom: 120px;
}
#index .contents ul{
  background: #000;
}
#index .contents li{
  position: relative;
}
#index .contents li img{
  width: auto;
  height: 100%;
}

#index .contents .ttl {
  width: 194px;
  height: 32px;
  margin: 0 auto 40px;
  background: url(img/index-contents-ttl.png) no-repeat left top;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
#index .contents ul {
  overflow: hidden;
}
#index .contents li {
  width: 50%;
  float: left;
  min-width: 510px;
}
#index .contents p {
  max-width: 360px;
  position: absolute;
  left: 50%;
  margin: 0 0 0 -160px;
  z-index: 100;
  display: block;
  padding-top: 133px;
}
#index .contents a {
  display: block;
  height: 100%;
}
#index .contents .trial {
  background: url(img/index-contents-trial.jpg) no-repeat left top;
  background-size: cover;
  height: 315px;
}
#index .contents .spot {
  background: url(img/index-contents-spot.jpg) no-repeat left top;
  background-size: cover;
  height: 315px;
}
#index .contents .business {
  background: url(img/index-contents-business.jpg) no-repeat left top;
  background-size: cover;
  height: 315px;
}
#index .contents .onlineshop {
  background: url(img/index-contents-onlineshop.jpg) no-repeat left top;
  background-size: cover;
  height: 315px;
}
#index .contents .darken{
  overflow:hidden;
}
#index .contents .darken .fade{
  opacity: 1.0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
  -webkit-transform: scale(1.0, 1.0);
  -moz-transform: scale(1.0, 1.0);
  -ms-transform: scale(1.0, 1.0);
  -o-transform: scale(1.0, 1.0);
  transform: scale(1.0, 1.0)
  -webkit-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}
#index .contents .darken .fade.hover{
  opacity: 0.6;
  -webkit-transform: scale(1.05, 1.05);
  -moz-transform: scale(1.05, 1.05);
  -ms-transform: scale(1.05, 1.05);
  -o-transform: scale(1.05, 1.05);
  transform: scale(1.05, 1.05)
}
#index .policy {
  padding-bottom: 120px;
}
#index .policy .ttl {
  float: left;
  width: 86px;
  height: 387px;
  background: url(img/index-policy-ttl.png) no-repeat right top;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
#index .policy ul {
  width: 885px;
  float: left;
  overflow: hidden;
  margin: 40px 0 0 49px;
}
#index .policy li {
  float: left;
  width: 215px;
  margin-left: 80px;
}
#index .policy li a{
  display: block;
}
#index .shop {
  margin-bottom: 120px;
}
#index .shop ul li{
  width: 300px!important;
  margin: 0 5px;
}
#index .shop .ttl {
  width: 173px;
  height: 34px;
  margin: 0 auto 40px;
  background: url(img/index-shop-ttl.png) no-repeat right top;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
.contentsBox{
  position: relative;
}
.headLineBox{
    width: 907px;
    margin: 0 auto 60px;
/*  position: absolute;
    top: 2520px;
    left: 0;
    right: 0;*/
}
.headLineBox h1{
    width: 100%;
    border-bottom: 1px solid #7F663F;
    padding-bottom: 30px;
    text-align: center;
    font-size: 25px;
    color:#ebd9cc;
}
.shop .bx-wrapper{
  max-width: 100%!important;
}
.shop .bx-viewport{
  height: auto!important;
  max-width: 100%!important;
  margin: 0 auto;
  overflow: hidden;
  padding: 30px 0;

}
.scroller li {
  display: none;
}
.shop .bx-viewport .scroller li {
  display: block !important;
}
#index .news {
  margin-bottom: 120px;
}
#index .news .ttl {
  float: left;
  width: 33px;
  height: 165px;
  margin-right: 80px;
  background: url(img/index-news-ttl.png) no-repeat right top;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
#index .news ul {
  width: 907px;
  float: left;
  margin: 40px 0;
}
#index .news li {
  border-bottom: 1px dotted #000;
  margin-bottom: 20px;
}
#index .news li a {
  color: #000;
  text-decoration: none;
  display: block;
  padding: 0 0 20px;
}
#index .news li a:hover {
  color: #000;
  text-decoration: underline;
}
#index .news li dl dt {
  display: inline;
}
#index .news li dl dd {
  display: inline;
}
#index .news .date {
  margin-right: 30px;
}
#index .news .title {
  width: 600px;
}
#index .news .more {
  width: 52px;
  display: inline-block;
  float: right;
}
#index .news .more img {
  vertical-align: middle !important;
}
#index .blog {
  padding-bottom: 120px;
}
#index .blog .ttl {
  float: right;
  width: 33px;
  height: 165px;
  background: url(img/index-blog-ttl.png) no-repeat right top;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
#index .blog ul {
  width: 974px;
  float: left;
  font-size: 0;
  margin: 40px 0 0;
}
#index .blog li {
  width: 242px;
  display:inline-block;
  /display:inline;
  /zoom:1;
  vertical-align: top;
  font-size: 14px;
  margin: 0 80px 40px 0;
}
#index .blog .image {
  margin-bottom: 10px;
}
#index .blog .date {
  margin-bottom: 5px;
}
#index .blog a {
  color: #000;
  text-decoration: none;
}
#index .blog a:hover {
  color: #000;
  text-decoration: underline;
}

#index .list-btn {
  width: 200px;
  margin: 0 auto;
}
/*----------------------------------------------------
  content
----------------------------------------------------*/
.content .box {
  width: 1020px;
  margin: 0 auto;
  overflow: hidden;
}
.content .block {
  width: 1020px;
  margin: 0 auto 140px;
  overflow: hidden;
}
.content .min-block {
  width: 780px;
  margin: 0 auto 140px;
  overflow: hidden;
}
.content h2 {
  width: 1020px;
  border-bottom: 1px solid #7F663F;
  padding-bottom: 30px;
  text-align: center;
  font-size: 25px;
  color: #dcf171;
}
.content h2 img{
  width: inherit;
  height: auto;
}
.content h2.headLine2{
  border: none;
}
.content h3 {
  padding-bottom: 40px;
  text-align: center;
}
.content h3 img{
  width: inherit;
  height: auto;
}

.content h4 {
  font-weight: bold;
  color: #806640;
  margin-bottom: 20px;
  border: 1px solid #806640;
  padding: 6px 18px;
  display: inline-block;
}
.content .remarks {
  border: 1px solid #806640;
  padding: 40px;
  overflow: hidden;
}
.content .remarks .ttl {
  text-align: center;
  font-size: 20px;
  color: #806640;
  border-bottom: 1px solid #806640;
  margin-bottom: 20px;
  padding-bottom: 10px;
}
.content .remarks .left-col {
  width: 445px;
  float: left;
}
.content .remarks .right-col {
  width: 250px;
  float: right;
}
.content .remarks ul{
  margin: 20px 0 0;
}
.content .remarks ul li{
  background: url(img/list-arw.png) no-repeat left center;
  background-size: 6px 7px;
  padding: 0 0 0 10px;
}
.content .remarks ul li a{
  color: #806640;
}
.content .remarks ul li a:hover{
  color: #806640;
  text-decoration: underline;
}
.content .pc-none {
  display: none;
}
.btn{
  text-align: center;
}
.btn a,
#submit{
  background: #7F663F url(img/btn-arw.png) no-repeat 20px center;
  background-size: 8px 5px;
  line-height: 50px;
  display: inline-block;
  padding: 0 20px 0 40px;
  color: #fff;
}
/*----------------------------------------------------
  page
----------------------------------------------------*/
/* aboutsakuda */
#aboutsakuda h2 div {
  width: 320px;
  margin: 0 auto;
}
#aboutsakuda .message P {
  width: 680px;
  float: left;
}
#aboutsakuda .message .image {
  width: 300px;
  float: right;
}
#aboutsakuda .outline {
  border: 1px solid #7F663F;
  padding: 35px 40px 50px;
  margin-bottom: 120px;
}
#aboutsakuda .outline table {
  width: 100%;
}
#aboutsakuda .outline table tr {
  margin-bottom: 10px;
}
#aboutsakuda .outline table th {
  width: 121px;
  color: #7F663F;
  padding: 15px 0;
  vertical-align: top;
  border-bottom: 1px dotted #7F663F;
}
#aboutsakuda .outline table td {
  padding: 15px 0;
  vertical-align: top;
  border-bottom: 1px dotted #7F663F;
}
#aboutsakuda .outline table li {
  overflow: hidden;
}
#aboutsakuda .outline table .name {
  width: 180px;
  float: left;
}
#aboutsakuda .outline table .place {
  width: 220px;
  float: left;
}
#aboutsakuda .outline table .tel {
  width: 145px;
  float: right;
}
#aboutsakuda .outline table .year {
  width: 160px;
  float: left;
}
#aboutsakuda .outline table .event {
  width: 415px;
  float: left;
}
#aboutsakuda .shop h3 {
  width: 211px;
  margin: 0 auto;
}
#aboutsakuda .shop ul {
  font-size: 0;
}
#aboutsakuda .shop li {
  width: 490px;
  display: inline-block;
  *display: inline;
  zoom: 1;
  vertical-align: top;
  font-size: 14px;
  margin-bottom: 60px;
}
#aboutsakuda .shop li.last {
  margin-left: 40px;
}
#aboutsakuda .shop .image {
  margin-bottom: 20px;
}
#aboutsakuda .shop .detail {
  border-bottom: 1px solid #000;
  margin-bottom: 20px;
}
#aboutsakuda .shop .name {
  font-size: 20px;
  margin-bottom: 5px;
  color: #7F663F;
}
#aboutsakuda .shop .honten {
  padding: 0 0 10px;
  background: url(img/about-honten.png) no-repeat right bottom;
  height: 190px;
}
#aboutsakuda .shop .chaya {
  padding: 0 0 10px;
  background: url(img/about-chaya.png) no-repeat right bottom;
  height: 190px;
}
#aboutsakuda .shop .anto {
  padding: 0 0 10px;
  background: url(img/about-anto.png) no-repeat right bottom;
  height: 140px;
}
#aboutsakuda .access {
  padding-bottom: 60px;
}
#aboutsakuda .access h3 {
  width: 298px;
  margin: 0 auto;
}
#aboutsakuda .access .gmap{
  margin: 0 0 60px;
  height: 300px;
}
#aboutsakuda .access dl {
  margin-bottom: 20px;
}
#aboutsakuda .access dt {
  font-weight: bold;
}
#aboutsakuda .access .bus {
  overflow: hidden;
}
#aboutsakuda .access .left-col {
  width: 420px;
  float: left;
}
#aboutsakuda .access .left-col .link{
  margin: 10px 0 0;
  display: block;
}
#aboutsakuda .access .left-col th{
  padding: 0 10px 10px;
}
#aboutsakuda .access .left-col td{
  padding: 0 0 10px;
}
#aboutsakuda .access .left-col .link:hover{
  text-decoration: underline;
}
#aboutsakuda .access .bus p {
  width: 400px;
  font-weight: bold;
  margin-bottom: 5px;
}
#aboutsakuda .access .bus .right-col{
  width: 360px;
  float: right;
}
#aboutsakuda .access .bus #busstop{
  width: 360px;
  height: 360px;
  margin: 0 0 10px;
}
#aboutsakuda .access .bus #busstop span{
  font-size: 10px;
}
#aboutsakuda .station{
  width: 780px;
  margin: 0 auto 60px;
  overflow: hidden;
}
#aboutsakuda .station div{
  float: left;
  width: 240px;
  margin: 0 30px 0 0;
  text-align: center;
}
#aboutsakuda .station div.last{
  margin: 0;
}
#aboutsakuda .station div img{
  margin: 0 0 10px;
}
#aboutsakuda .dl-last {
  margin-bottom: 60px !important;
}
#aboutsakuda .min-text {
  font-size: 12px;
  line-height: 12px;
  display: block;
  margin-bottom: 6px;
}

/* mission */
#mission h2 div{
  width: 229px;
  margin: 0 auto;
}
#mission .message .img{
  width: 300px;
  float: left;
}
#mission .message .row{
  overflow: hidden;
  margin: 0 0 60px;
}
#mission .message .img img{
  margin: 0 0 20px;
}
#mission .message p{
  width: 670px;
  float: right;
  line-height: 1.8;
}
#mission .artisan .row1,
#mission .artisan .row2{
  margin: 0 0 60px;
  overflow: hidden;
}
#mission .artisan h3{
  width: 160px;
  margin: 0 auto 40px;
}
#mission .artisan .ttl{
  color: #806640;
  font-size: 20px;
  margin: 0 0 10px;
}
#mission .artisan .img{
  width: 350px;
  float: left
}
#mission .artisan .txt{
  margin: 0 0 10px;
}
#mission .artisan .txt,
#mission .artisan .col{
  width: 620px;
  float: right;
}
#mission .artisan .txt p{
  height: 250px;
  line-height: 1.8;
}
#mission .artisan .col div{
  width: 300px;
  margin: 0 20px 0 0;
  float: left;
}
#mission .artisan .col div.last{
  margin: 0;
}
#mission .artisan .row2 .txt,
#mission .artisan .row1 .img,
#mission .artisan .row2 .txt .img,
#mission .artisan .row2 .col{
  float: left;
}
#mission .artisan .row2 .img,
#mission .artisan .row1 .txt{
  float: right;
}

#mission .flow h3{
  width: 212px;
  margin: 0 auto;
}
#mission .flow{
  font-size: 0;
}
#mission .flow .item{
  vertical-align: top;
  width: 300px;
  display: inline-block;
  *display: inline;
  zoom: 1;
  font-size: 14px;
  margin: 0 60px 60px 0;
}
#mission .flow .item .img{
  margin: 0 0 10px;
}
#mission .flow .ttl{
  font-size: 18px;
  border: 1px solid #7F663F;
  color: #7F663F;
  padding: 6px 0;
  width: 100%;
  text-align: center;
  margin: 0 0 20px;
}
#mission .flow .item.last{
  margin: 0 0 60px 0;
}
#mission .flow .box .img{
  margin: 0 0 10px;
}
#mission .flow .image{
  display: inline-block;
  width: 660px;
}
/* trial */
#trial h2 div{
  width: 283px;
  margin: 0 auto;
}
#trial .flow{
  font-size: 0;
}
#trial .flow .item{
  font-size: 14px;
  width: 230px;
  display: inline-block;
  *display: inline;
  zoom: 1;
  vertical-align: top;
}
#trial .flow .item .img {
  margin-bottom: 10px;
}
#trial .flow .row1{
  margin: 0 0 30px;
}
#trial .flow .arw {
  display: inline-block;
  *display: inline;
  zoom: 1;
  height: 153px;
  width: 33.34px;
  background: url(img/list-arw.png) no-repeat center center;
  background-size: 10px 20px;
}
#trial .product{
  font-size: 0;
}
#trial .product .notice{
  font-size: 14px;
  text-align: center;
  margin: 0 0 20px;
}
#trial .product .item{
  font-size: 14px;
  width: 230px;
  display: inline-block;
  vertical-align: top;
  margin: 0 33.34px 20px 0;
}
#trial .product .item.last{
  margin: 0 0 30px 0;
}
#trial .product .item .img{
  margin: 0 0 10px;
}
#trial .product .item .name,
#trial .product .item .info{
  text-align: center;
}
#trial .product .item .name{
  margin: 0 0 5px;
}
#trial .message{
  margin: 0 auto 100px;
}
#trial .message .img{
  margin: 0 0 60px;
}
#trial .message .table{
  border: 1px solid #806640;
  width: 100%;
  padding: 40px;
}
#trial .message table{
  margin: 0 0 40px;
}
#trial .message table th{
  vertical-align: top;
  width: 160px;
  padding: 5px 0;
  color: #806640;
}
#trial .message table td{
  padding: 5px 0;
}
#trial .message .table .txt{
  text-align: center;
  margin: 0 0 40px;
}
#trial .calender .detail{
  text-align: center;
}
#trial .form{
 
}
#trial .form .detail{
  text-align: center;
  margin: 0 0 40px;
}
#trial .form .txt{
  text-align: center;
}
#trial .form .txt a{
  text-decoration: underline;
}
#trial .form .txt .ttl{
  font-weight: bold;
}
#trial .form .notice{
  text-align: center;
}
#trial .form .notice .ttl{
  font-weight: bold;
}
#trial .form span{
  color: red;
}
#trial .form .table{
  border: 1px solid #806640;
  width: 100%;
  padding: 40px;
  margin: 0 0 40px;
}
#trial .form table{
  margin: 0 0 40px;
}
#trial .form table th{
  vertical-align: top;
  width: 160px;
  line-height: 60px;
}
#trial .form table td{
  line-height: 60px;
  text-align: left;
}
#trial .form table td input,
#trial .form table td select,
#trial .form table td textarea{
  border: none;
  padding: 5px;
}
#trial .form table td textarea{
  margin: 12px 0 0;
}
#trial .short {
  width: 60px;
}
#trial .form #submit{
  margin: 40px 0 0 0;
}
#trial .form .table .txt{
  margin: 0 0 20px;
}
#trial .form .ajax-loader{
  width: 16px;
  height: 16px;
  display: block;
}
#trial div.wpcf7-response-output {
  margin: 2em 0.5em 2em;
  padding: 0.2em 1em;
}
#trial .small-container {
  display: none;
}

/*  product  */
#product .abouttxt {
  text-align: center;
  margin-bottom: 80px;
}
#product .abouttxt p {
  margin-bottom: 20px;
}
#product .about .row1,
#product .about .row2{
  overflow: hidden;
}
#product .about .row1{
  margin: 0 0 60px;
}
#product .about .txt{
  width: 640px;
}
#product .about .img{
  width: 350px;
}
#product .about .row1 .txt,
#product .about .row2 .img{
  float: left;
}
#product .about .row2 .txt,
#product .about .row1 .img{
  float: right;
}
#product .about .ttl{
  color: #806640;
  font-size: 20px;
  margin: 0 0 20px;
}
#product .about .row2 .col{
  background: #EDE6DA;
  padding: 30px;
  margin: 20px 0 0;
}
#product .centered .txt{
  margin: 0 0 40px;
}
#product .centered .img img{
  width: inherit;
  float: left;
}
#product .centered .img img.last{
  float: right;
}
#product .material .txt,
#product .food .txt,
#product .sticker .txt{
  width: 640px;
  float: left;
}
#product .material .txt .btn{
  margin: 30px 0 0;
}
#product .material .img,
#product .food .img,
#product .sticker .img{
  width: 350px;
  float: right;
}
#product .sticker .txt p{
  margin: 0 0 20px;
}
#product .sticker .img img{
  margin: 0 0 40px;
}
#product .sticker .img img.last{
  margin: 0;
}
#product .sticker dt{
  font-weight: bold;
}
#product .sticker dd{
  margin: 0 0 20px;
}
#product .remarks{
  text-align: center;
}
#product .remarks .step{
  color: #806640;
  font-size: 16px;
  margin: 0 0 10px;
}
#product .remarks li{
  background: none;
  padding: 0;
}
#product .remarks .arw{
  height: 60px;
 background: url(img/down-arw.png) no-repeat center center;
}

/*  onlineshop  */
#onlineshop a:hover{
  text-decoration: underline;
}
#onlineshop .txt{
  text-align: center;
  margin: 20px 0 40px;
}
#onlineshop .item{
  width: 350px;
  float: left;
}
#onlineshop .min-block{
  margin: 0 auto 100px;
}
#onlineshop .item.last{
  float: right;
}
#onlineshop .ttl{
  font-size: 16px;
  font-weight: bold;
}
#onlineshop .url{
  margin: 0 0 10px;
  font-size: 12px;
}
#onlineshop .img{
  margin: 0 auto 10px;
  max-width: 350px;
}

/*  about-kanazawahaku  */
#about-kanazawahaku .message{
  text-align: center;
  margin: 0 0 60px;
}
#about-kanazawahaku .ttl{
  color: #806640;
  font-size: 20px;
  margin: 0 0 10px;
}
#about-kanazawahaku .row{
  overflow: hidden;
  margin: 0 0 60px;
}
#about-kanazawahaku .row .txt{
  width: 640px;
  float: left;
}
#about-kanazawahaku .row .img{
  width: 350px;
  float: right;
}
#about-kanazawahaku .row.invert .txt{
  float: right;
}
#about-kanazawahaku .row.invert .img{
  float: left;
}

/* recomended-spot */
#recomended-spot {
}
#recomended-spot a:hover {
  text-decoration: underline;
}
#recomended-spot #map-canvas{
  margin: 0 0 40px;
}
#recomended-spot li{
  padding: 0 0 0 60px;
  margin: 0 0 40px;
  overflow: hidden;
}
#recomended-spot li dt{
  border-bottom: 1px dotted #806640;
  padding:0 0 5px 0;
  margin: 0 0 15px;
  color: #806640;
  font-size: 18px;
}
#recomended-spot #flag1{
  background: url(img/flag1.png) no-repeat left top;
}
#recomended-spot #flag2{
  background: url(img/flag2.png) no-repeat left top;
}
#recomended-spot #flag3{
  background: url(img/flag3.png) no-repeat left top;
}
#recomended-spot #flag4{
  background: url(img/flag4.png) no-repeat left top;
}
#recomended-spot #flag5{
  background: url(img/flag5.png) no-repeat left top;
}
#recomended-spot #flag6{
  background: url(img/flag6.png) no-repeat left top;
}
#recomended-spot #flag7{
  background: url(img/flag7.png) no-repeat left top;
}
#recomended-spot #flag8{
  background: url(img/flag8.png) no-repeat left top;
}
#recomended-spot #flag9{
  background: url(img/flag9.png) no-repeat left top;
}
#recomended-spot #flag10{
  background: url(img/flag10.png) no-repeat left top;
}
#recomended-spot #flag11{
  background: url(img/flag11.png) no-repeat left top;
}
#recomended-spot #flag12{
  background: url(img/flag12.png) no-repeat left top;
}
#recomended-spot #flag13{
  background: url(img/flag13.png) no-repeat left top;
}
#recomended-spot #flag14{
  background: url(img/flag14.png) no-repeat left top;
}
#recomended-spot #flag15{
  background: url(img/flag15.png) no-repeat left top;
}
#recomended-spot #flag16{
  background: url(img/flag16.png) no-repeat left top;
}
#recomended-spot #flag17{
  background: url(img/flag17.png) no-repeat left top;
}
#recomended-spot #flag18{
  background: url(img/flag18.png) no-repeat left top;
}
#recomended-spot #flag19{
  background: url(img/flag19.png) no-repeat left top;
}
#recomended-spot .area{
  border: 1px solid #806640;
  padding: 20px;
}
#recomended-spot .area div{
  color: #806640;
  margin: 0 0 5px;
}
#recomended-spot .info{
  margin: 0 0 20px;
}
#recomended-spot .message{
  text-align:center;
  margin: 0 auto 40px;
}
#recomended-spot .col{
  width: 500px;
  float: left;
}
#recomended-spot .img{
  width: 200px;
  float: right;
}
#purchase table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  text-align: center;
  font-size:12px
}
#purchase td{
  border: 1px solid #7F663F;
  padding: 10px 20px;
  line-height: 30px
  text-align: center;
}
#purchase th{
  border: 1px solid #7F663F;
  padding: 10px;
  font-weight: normal;
  background: #EBE3D8;
  text-align: center;
}
#purchase table td .note{
  font-size:10px;
}
#purchase .message .img{
  width: 780px;
  margin: 0 auto 40px;
}
#purchase .message .txt{
  text-align: center;
}
#purchase .left-col{
  float: left;
  width: 640px;
}
#purchase .right-col{
  float: right;
  width: 350px;
}
#purchase .left-col .ttl{
  color: #806640;
  font-size: 20px;
  margin: 0 0 10px;
}
#purchase .table1,
#purchase .table2,
#purchase .table3{
  width: 780px;
  margin: 0 auto;
  padding-top: 40px;
  clear: both;
}
#purchase .table1 .txt,
#purchase .table2 .txt,
#purchase .table3 .txt{
  text-align: center;
}
#purchase table{
  margin: 0 0 20px;
}
#contact .form{
  padding: 0 0 120px;
}
#contact .form .req{
  text-align: center;
}
#contact .form .detail{
  text-align: center;
  margin: 0 0 40px;
}
#contact .form .txt{
  text-align: center;
}
#contact .form .txt .ttl{
  font-weight: bold;
}
#contact .form .req span{
  color: red;
}
#contact .form .table th span{
  color: red;
}
#contact .form .table td span{
  display: block;
}
#contact .form .table td span span{
  display: inline;
}
#contact .table td .doc1{
  margin: 18px 0 0;
}
#contact .table td .doc1,
#contact .table td .doc2,
#contact .table td .doc3,
#contact .table td .doc4{
  line-height: 25px;
}
#contact .form .table{
  border: 1px solid #806640;
  width: 100%;
  padding: 40px;
  margin: 0 0 40px;
}
#contact .form table{
  margin: 0 0 40px;
}
#contact .form table th{
  vertical-align: top;
  width: 160px;
  line-height: 60px;
}
#contact .form table td{
  line-height: 60px;
  text-align: left;
}
#contact .form table td input,
#contact .form table td select,
#contact .form table td textarea{
  display:block;
  border: none;
  padding: 5px;
}
#contact .form table td textarea{
  width: 100%;
}
#contact .form #submit{
  margin: 40px 0 0 0;
}
#contact .form .table .txt{
  margin: 0 0 20px;
}
#contact .form .ajax-loader{
  width: 16px;
  height: 16px;
  display: block;
}
#contact div.wpcf7-response-output {
  margin: 2em 0.5em 2em;
  padding: 0.2em 1em;
}
#contact .tab{
  display: table;
  width: 100%;
  border-left: 1px solid #7F663F;
}
#contact .tab li{
  display:table-cell;
  width: 20%;
  font-size: 14px;
  text-align: center;
  vertical-align: middle;
  background: #F2EDE6;
  padding: 20px 0;
  cursor: pointer;
  border-top: 1px solid #7F663F;
  border-right: 1px solid #7F663F;
}
#contact .tab li:hover {
  background: #7F663F;
}
#contact .tab li.active{
  background: #7F663F;
  color: #fff;
  cursor: default;
}
#contact .page{
  display: none;
}
#contact .page.active{
  display: block;
}
#contact .tel .number{
  text-align: center;
}
#contact .tel .number img{
  width: inherit;
}
#contact .form .notice{
  margin: 0 0 40px;
  text-align: center;
}
#contact .table .ttl{
  color: #7F663F;
  font-size: 16px;
  text-align:center;
  margin: 0 0 20px;
}

/*  faq  */
#faq .message{
  margin: 0 auto 60px;
}
#faq .message .txt{
  text-align: center;
  margin: 0 0 60px;
}
#faq .anchor{
  text-align: center;
}
#faq .icon{
  float: left;
}
#faq .anchor ul li{
  display: inline;
background: url(img/footer-arw.png) no-repeat left center;
}
#faq .anchor ul li{
  padding: 0 20px 0 10px;
}
#faq section{
  padding: 0 0 80px;
}
#faq section .question{
  overflow: hidden;
}
#faq section .answer{
  margin: 0 0 40px;
  overflow: hidden;
}
#faq section#experience{
  padding: 0;
}
#faq .min-block p,
#faq .link{
  width: 710px;
  float: right;
  line-height: 30px;
  padding: 5px 0 0 ;
}
#faq section .ttl{
  font-size: 16px;
  padding: 0 0 5px;
  margin: 0 0 20px;
  color: #816842;
  border-bottom: 1px solid #816842;
}
#faq section span{
  background: #7F663F;
  color: #fff;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  width: 50px;
  padding: 5px 0;
  display: inline-block;
  text-align: center;
  margin: 0 20px 0 0;
}
#faq section .question{
  margin: 0 0 15px;
}
#faq .link a{
  text-decoration: underline;
}
#faq .link a:hover{
  text-decoration: none;
  color: #816842;
}
#staff .message{
  font-size: 20px;
  font-size: bold;
  text-align: center;
  margin: 0 auto 60px
}
#staff .img,
#csr .img{
  width: 600px;
  float: left;
}
#staff .txt,
#csr .txt{
  width: 380px;
  float: right;
}
#staff .invert .img,
#csr .invert .img{
  float: right;
}
#staff .invert .txt,
#csr .invert .txt{
  float: left;
}
#staff .txt .ttl,
#csr .txt .ttl{
  color: #816842;
  font-size: 20px;
  margin: 0 0 20px;
}
#staff .txt .name{
  font-size: 12px;
  padding: 0 0 10px;
  border-bottom: 1px solid #000;
  margin: 0 0 10px;
}

/* recruit */
#recruit {
  padding-bottom: 120px;
}
#recruit .table{
  border: 1px solid #806640;
  width: 100%;
  padding: 40px;
}
#recruit tr{
  border-bottom: 1px solid #806640;
}
#recruit table{
  margin: 0 0 40px;
}
#recruit table th{
  vertical-align: top;
  width: 160px;
  padding: 20px 0;
  color: #806640;
}
#recruit table td{
  padding: 20px 0;
}
#recruit .txt{
  text-align: center;
  margin: 0 0 40px;
}

/* privacy */
#privacy .row {
  margin-bottom: 40px;
}
#privacy .ttl {
  color: #806640;
  font-size: 16px;
  margin: 0 0 10px;
  font-weight: bold;
}
#privacy .sub-ttl {
  font-weight: bold;
}
#privacy .txt {
  margin-bottom: 20px;
}

/* blog news */
#blog .name ,
#news .name {
  font-size: 20px;
  text-align: center;
  padding: 0 0 10px;
  margin: 0 0 20px;
  color: #7F663F;
  font-weight: bold;
}
.archive{
  width: 1020px;
  margin: 0 auto;
  overflow: hidden;
}
.archive .main{
  width: 700px;
  float: left;
}
.archive aside{
  width: 260px;
  float: right;
}
.archive .entry{
  margin: 0 0 100px;
}
.archive .entry header{
  overflow: hidden;
  padding: 0;
  margin: 0 0 20px;
}
.archive .entry h3,
.archive aside h3{
  font-size: 16px;
  text-align: left;
  padding: 0 0 10px;
  margin: 0 0 10px;
  border-bottom: 1px solid #7F663F;
  color: #7F663F;
}
.archive aside h3{
  margin: 0;
}
.archive .entry h3 a,
.archive aside h3 a{
  color: #7F663F;
}
.archive .entry .date{
  float: right;
  color: #000;
}
.archive .entry .txt{
  padding: 0 0 60px;
  border-bottom: 1px dotted #7F663F;
}
.archive .entry .rel{
  border-bottom: 1px solid #7F663F;
  padding: 20px 0;
}
.archive .entry .rel .ttl{
  font-weight: bold;
  margin: 0 0 5px; 
}
.archive .entry .rel ul{
  margin: 0;
}
.archive .entry .rel li{
  list-style:none;
  padding: 0 0 0 10px;
  background: url(img/footer-arw.png) no-repeat left center;
}
.archive .entry .rel a:hover {
  text-decoration: underline;
}
.archive aside li{
  list-style: none;
  border-bottom: 1px solid #7F663F;
  background: url(img/archive-arw.png) no-repeat right center;
}
.archive aside li a{
  padding: 10px 20px 10px 0;
  display: block;
}
.archive aside li a:hover{
  text-decoration: underline;
}
.archive aside section {
  margin: 0 0 40px;
}

/* contact-thanks */
#contact-thanks .thanks{
  text-align: center;
  margin-bottom: 100px;
}
#contact-thanks .thanks .ttl{
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}


/*----------------------------------------------------
  entry
----------------------------------------------------*/
.entry{
  margin-bottom: 30px;
}
.entry img{
  margin: 20px 0;
  max-width: 700px;
  height: auto;
  width: auto!important;
}
.entry h1{
  font-size: 197%;
}
.entry h2{
  font-size: 182%;
}
.entry h3{
  font-size: 174%;
}
.entry h4{
  font-size: 167%;
}
.entry h5{
  font-size: 131%;
}
.entry h6{
  font-size: 116%;
}
.entry p{
  margin-bottom: 10px;
}
.entry blockquote{
  background: #EEE;
  padding: 15px 15px 5px 15px;
  margin-bottom: 10px;
}
.entry ul{
  list-style: disc;
  margin-left: 20px;
}
.entry ol{
  margin-left: 20px;
}
.entry strong{
  font-weight: bold;
}
.entry .alignleft{
  display: inline;
  float: left;
  margin-right: 20px;
}
.entry .alignright{
  display: inline;
  float: right;
  margin-left: 20px;
}
.entry .aligncenter{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* foreign language */
.fl h2{
  font-family: Georgia, "Times New Roman", "DFKai-SB","Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif;
  color: #7F663F;
  font-size: 36px;
  font-weight: bold;
}
.fl h3{
  width: 100%!important;
  font-family: Georgia, "Times New Roman", "DFKai-SB","Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif;
  color: #7F663F;
  font-size: 30px;
  font-weight: normal;
  padding: 0;
}
.fl #index .ttl {
  font-family: Georgia, "Times New Roman", "DFKai-SB","Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif;
  background: none;
  text-align: center;
  float: none;
  width: 100%;
  height: auto;
  font-size: 36px;
  font-weight: bold;
  overflow: visible;
  white-space: nowrap;
  text-indent: 0;
}
.fl .h3border{
  background: #7F663F;
  width: 80px;
  height: 3px;
  margin: 10px auto 40px;
}
.fl #aboutsakuda .outline table li{
  margin: 0 0 10px;
}
.fl #aboutsakuda .outline table .name{
  padding: 0 10px 0 0;
}
.fl #index .greeting .txt{
  height: auto;
  width: 600px;
  line-height: 2.5em;
  background: none;
  text-indent: 0px;
}
.fl nav li{
  display: inline-block;
  padding: 0 40px;
}
.fl header .info img{
  width: inherit;
}
.fl #index .greeting .gothic{
  margin: 0 auto;
  float: none;
  min-height: 300px;
  width: 1020px;
}
.fl #index .policy ul{
  width: 805px;
  margin: 40px auto 0;
  float: none;
}
.fl #index .policy li{
  margin: 0 80px 0 0;
}
.fl #index .policy li.last{
  margin: 0;
}
.fl #index .product{
  width: 1020px;
  margin: 0 auto;
}
.fl #index .product ul{
  font-size: 0;
  margin: 40px 0 0 0;
}
.fl #index .product ul li{
  font-size: 14px;
  width: 290px;
  vertical-align: top;
  display: inline-block;
  margin: 0 75px 40px 0;
}
.fl #index .product ul li.last{
  margin: 0 0 40px 0;
}
.fl #index .product ul li .name{
  text-align: center;
  font-family: Georgia, "Times New Roman", "DFKai-SB","Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif;
  font-size: 24px;
  margin: 0 0 10px;
}
.fl #index .product ul li img{
  margin: 0 0 10px;
}
.fl #index .online a:hover{
  text-decoration: underline;
}
.fl #index .online .txt{
  text-align: center;
  margin: 20px 0 40px;
}
.fl #index .online .item{
  width: 350px;
  float: left;
  margin: 40px 0 0 0;
}

.fl #index .online .item.last{
  margin: 40px 0 0 0;
  float: right;
}
.fl #index .online{
  overflow: hidden;
  width: 780px;
  margin: 0 auto 80px;
}
.fl #index .online .min-block{
  margin: 0 auto 100px;
}
.fl #index .online{
  font-size: 16px;
  font-weight: bold;
}
.fl #index .online .url{
  margin: 0 0 10px;
  font-size: 12px;
}
.fl #index .online .img{
  margin: 0 auto 10px;
  max-width: 350px;
}
.fl footer .nav-left{
  width: 430px;
}
.fl #contact .tel .number{
  text-align: center;
  font-family: Georgia, "Times New Roman", "DFKai-SB","Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif;
  font-size: 36px;
}
.fl #contact .tel .number span{
  font-size: 24px;
}
.fl nav li img{
  width: auto!important;
}
.fl.ie7 #index .product ul{
  overflow: hidden;
  margin: 0 0 40px;
}
.fl.ie7 #index .product ul li{
  float: left;
  display: block;
}
.ie7.fl nav ul li{
  width: auto;
  display: block;
  padding: 0 40px;
}
/* English */
.en nav ul{
  width: 970px;
}
.en footer #pagetop a{
  background: url(img/pagetop-pc-en.png) no-repeat left top;
}
.en #aboutsakuda .shop .honten{
  height: 240px;
}
.en #aboutsakuda .shop .chaya{
  height: 150px;
}
.en #aboutsakuda .shop .anto{
  height: 180px;
}
.en #aboutsakuda .access .left-col th{
  vertical-align: top;
  width: 145px;
}
.en #mission .artisan .txt p{
  height: auto;
}
.en h2 div{
  width: 100%!important;
}
/* Chinese */
.cn #index .greeting{
  padding-bottom: 60px;
}
.cn nav ul{
  width: 790px;
}
.cn footer #pagetop a{
  background: url(img/pagetop-pc-cn.png) no-repeat left top;
}
.cn #mission .message{
  margin: 0 auto;
}
.cn #mission .message .row{
  margin: 0;
}
.cn h2 div{
  width: 100%!important;
}
/*  min-width:768pxここまで
----------------------------------------------------*/
}
@media screen and (max-width:768px){
#house{
  display: none;
}
#wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
}
#container.cover  {
  -webkit-transform:translateX(-260px);
  transform:tranlateX(-260px);
}
#container  {
  -webkit-transition: ease .3s;
  transition: ease .3s;
}
.drawer {
  position: absolute;
  top: 0;
  right: 0;
  width: 260px;
  height: 100%;
  background: #2f2525;
  -webkit-transform:translateX(260px);
  transform:translateX(260px);
  -webkit-transition: ease .3s;
  transition: ease .3s;
  z-index: 1000;
}
.drawer.active {
  -webkit-transform:translateX(0);
  transform:translateXd(0);
}
.btn{
  text-align: center;
}
.btn a,
#submit{
  background: #7F663F url(img/btn-arw.png) no-repeat 20px center;
  background-size: 8px 5px;
  line-height: 50px;
  display: inline-block;
  padding: 0 20px 0 35px;
  color: #fff;
}
#breadcrumb ul{
  padding: 10px;
}
/*----------------------------------------------------
  header
----------------------------------------------------*/
header{
  padding: 20px 0 40px;
  color: #7F663F;
}
header a{
  color: #7F663F;
}
header .language{
  top: 39px;
  left: 20px;
  position: absolute;
}
header .language .jp,
header .language .en {
  display: block;
  border: 1px solid #7F663F;
  text-align: center;
  margin-bottom: 5px;
}
header .language .jp a,
header .language .en a{
  display: block;
  padding: 0 10px;
}
header .language .slash {
  display: none;
}
header .logo{
  width: 96px;
  margin: 0 auto;
}
header .sp-menu-btn{
  width: 40px;
  height: 40px;
  top: 48px;
  right: 20px;
  position: absolute;
  background: url(img/sp-menu-btn.jpg) ;
  background-repeat: no-repeat;
  background-size: 40px;
  text-indent: 100%; 
  white-space: nowrap; 
  overflow: hidden; 
}
.cover .sp-menu-btn{
  width: 40px;
  height: 40px;
  top: 48px;
  right: 20px;
  position: absolute;
  background: url(img/sp-menu-btn-close.jpg) ;
  background-repeat: no-repeat;
  background-size: 40px;
  text-indent: 100%; 
  white-space: nowrap; 
  overflow: hidden; 
}
header .info{
  display: none;
}
nav{
  display: none;
}
.sp-menu {
  margin-bottom: 10px;
}
.sp-menu li {
  background: #B49669;
  border-bottom: 1px solid #806640;
}
.sp-menu li a {
  color: #FFF;
  text-decoration: none;
  display: block;
  padding: 15px 10px;
  position: relative;
}
.sp-menu li a:after {
  content: '';
  display: block;
  width: 6px;
  height: 9px;
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -6px;
  background-image: url(img/sp-menu-arw.png);
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 6px 9px;
  -webkit-background-size: 6px 9px;
  -moz-background-size: 6px 9px;
}
.sp-info li {
  text-align: center;
  line-height: 1.8;
}
.sp-info li a {
  color: #FFF;
}
.sp-info li{
  color: #FFF;
  text-decoration: none;
  display: block;
  padding: 5px 10px;
  position: relative;
}
.sp-info .contact-arw{
  background-image: url(img/sp-info-arw.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 13px;
  padding-left: 16px;
}

/*----------------------------------------------------
  sub
----------------------------------------------------*/

#sub .bnr{
  margin-bottom: 10px;
  padding: 0 10px;
}
#sub .title_sub{
  padding: 15px 10px;
  color: #FFF;
  background: #000;
  font-weight: bold;
}
#sub ul{
  background: #666;
  color: #FFF;
}
#sub ul li{
  border-bottom: 1px solid #444;
}
#sub ul li a{
  color: #FFF;
  text-decoration: none;
  display: block;
  padding: 10px;
  position: relative;
}
#sub ul li a:after{
  content: '';
  display: block;
  width: 5px;
  height: 10px;
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -5px;
  background-image: url(../../../index.html);
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 5px 10px;
  -webkit-background-size: 5px 10px;
  -moz-background-size: 5px 10px;
}


/*----------------------------------------------------
  footer
----------------------------------------------------*/
footer{
}
footer .nav-right li{
  width: 50%;
  float: left;
  background: #B49669;
}
footer .nav-right {
  border-top: 1px solid #806640;
  margin-bottom: 20px;
  overflow: hidden;
}
footer .nav-right li{
  width: 100%;
}
footer .nav-right li a{
  display: block;
  padding: 14px 10px;
  border-bottom: 1px solid #806640;
  color: #fff;
  position: relative;
}
footer .nav-right li a:after{
  content: '';
  display: block;
  width: 3px;
  height: 6px;
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -3px;
  background-image: url(img/footer-arw-sp.png);
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 3px 6px;
  -webkit-background-size: 3px 6px;
  -moz-background-size: 3px 6px;
}
footer .logo {
  width: 96px;
  margin: 0 auto 20px;
}
footer .left-col {
  text-align: center;
  margin-bottom: 20px;
}
footer .left-col p{
  font-size: 12px;
  margin-bottom: 10px;
}
footer .left-col .contact {
  background: #806640;
  display: inline-block;
}
footer .left-col .contact a {
  display: block;
  color: #fff;
  padding: 6px 24px;
}
footer .nav-left {
  display: none;
}
footer .copyright {
  background: #5a2626;
  overflow: hidden;
  line-height: 35px;
  font-size: 11px;
}
footer .copyright p {
  float: left;
  margin-left: 10px;
}
footer #pagetop {
  background: url(img/pagetop-sp.jpg) no-repeat left top;
  background-size: 90px 35px;
  width: 90px;
  float: right;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  z-index: 200;
}
footer #pagetop a{
  display: block;
}
footer .arr {
  display: none;
}

/*----------------------------------------------------
  index
----------------------------------------------------*/
#index .top-image{
  position: relative;
}
#index .top-image .bx-viewport,
#index .top-image .bx-wrapper{
  position: absolute;
  width: 100%!important;
  top: 0;

}
#index .top-slide li{
  height: 200px;
}
/*輪播圖*/
#index .top-slide .img1{
  background: url(img/top1.jpg) no-repeat center center;
  background-size: cover;
}
#index .top-slide .img2{
  background: url(img/top2.jpg) no-repeat center center;
  background-size: cover;
}
#index .top-slide .img3{
  background: url(img/top3.jpg) no-repeat center center;
  background-size: cover;
}
#index .top-image .inr{
  width: 300px;
  height: 200px;
  position: relative;
  z-index: 100;
  padding: 95px 10px 0;
  margin: 0 auto 20px;
}
#index .top-image .catch-main {
  margin-bottom: 10px;
}
#index .top-image .catch-txt {
}
#index .greeting {
  padding-bottom: 40px;
}
#index .greeting .ttl {
  background: url(img/index-greeting-ttl-sp.png) no-repeat right top;
  background-size: 61px 28px;
  height: 28px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  text-align: center;
  width: 61px;
  margin: 0 auto 20px;
}
#index .greeting .textP {
  background: none;
  margin-top: 0;
  padding-left: 0;
}
#index .contents {
  padding-bottom: 40px;
}
#index .contents .ttl {
  margin: 0 auto 40px;
  background: url(img/index-contents-ttl-sp.png) no-repeat left top;
  background-size: 97px 25px;
  height: 25px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  width: 97px;
  margin: 0 auto 20px;
}
#index .contents a {
}
#index .contents p {
  width: 200px;
  margin: 0 0 0 -100px;
  position: absolute;
  left: 50%;
  z-index: 100;
  display: block;
  padding-top: 37px;
}
#index .contents .trial {
  background: url(img/index-contents-trial.jpg) no-repeat left top;
  background-size: cover;
  height: 100px;
}
#index .contents .spot {
  background: url(img/index-contents-spot.jpg) no-repeat left top;
  background-size: cover;
  height: 100px;
}
#index .contents .business {
  background: url(img/index-contents-business.jpg) no-repeat left top;
  background-size: cover;
  height: 100px;
}
#index .contents .onlineshop {
  background: url(img/index-contents-onlineshop.jpg) no-repeat left top;
  background-size: cover;
  height: 100px;
}
#index .policy {
  margin-bottom: 40px;
}
#index .policy .ttl {
  margin: 0 auto 40px;
  background: url(img/index-policy-ttl-sp.png) no-repeat left top;
  background-size: 180px 51px;
  height: 51px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  width: 180px;
  margin: 0 auto 20px;
}
#index .policy li {
  margin-bottom: 20px;
}
#index .shop {
  margin-bottom: 20px;
}
#index .shop .ttl {
  margin: 0 auto 40px;
  background: url(img/index-shop-ttl-sp.png) no-repeat left top;
  background-size: 86px 26px;
  height: 26px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  width: 86px;
  margin: 0 auto 20px;
}

.headLineBox{
  width: auto;
  padding-bottom: 40px;
}
.headLineBox h1{
  font-size: 30px;
  font-family: "微軟正黑體",serif;
  text-align: center;
  margin-bottom: 10px;
}
/*店舗数によって変更*/

#index .bx-clone {
  display: none;
}
.shop .bx-viewport{
  height: auto!important;
}
#index .scroller {
  width: 100%!important;
  padding: 0 10px;
  overflow: hidden;
  position: static;
  left: 0!important;
}
#index .scroller li {
  float: left;
  width: 50%!important;
  padding: 0 5px 0 0;
  margin-bottom: 40px;
}
#index .scroller li:nth-child(2n+0) {
  float: right;
  width: 50%;
  padding: 0 0 0 5px;
}
#index .news {
  margin-bottom: 40px;
}
#index .news .ttl {
  margin: 0 auto 40px;
  background: url(img/index-news-ttl-sp.png) no-repeat left top;
  background-size: 82px 28px;
  height: 28px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  width: 82px;
  margin: 0 auto 20px;
}
#index .news .more {
  display: none;
}
#index .news ul {
  padding-bottom: 10px;
}
#index .news li {
  border-bottom: 1px dotted #000;
  margin-bottom: 10px;
  padding-bottom: 10px;
  background: url(img/index-list-arw.png) no-repeat right center;
  background-size: 5px 10px;
  padding-right: 10px;
}
#index .news .date {
  font-size: 11px;
  display: block;
}
#index .news a {
  color: #000;
  text-decoration: none;
}
#index .blog .ttl {
  margin: 0 auto 40px;
  background: url(img/index-blog-ttl-sp.png) no-repeat left top;
  background-size: 59px 26px;
  height: 26px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  width: 59px;
  margin: 0 auto 20px;
}
#index .blog ul {
  padding-bottom: 10px;
}
#index .blog li {
  border-bottom: 1px dotted #000;
  margin-bottom: 10px;
  padding-bottom: 10px;
  background: url(img/index-list-arw.png) no-repeat right center;
  background-size: 5px 10px;
  padding-right: 10px;
  overflow: hidden;
}
#index .blog .image {
  width: 120px;
  float: left;
  margin-right: 10px;
}
#index .blog .right-col {
  padding-left: 130px;
}
#index .blog .date {
  font-size: 11px;
}
#index .blog a {
  color: #000;
  text-decoration: none;
  display: block;
  overflow: hidden;
}
#index .blog{
  margin: 0 0 40px;
  padding: 0 10px;
}
#index .list-btn {
  width: 100px;
  margin: 0 auto;
}
/*----------------------------------------------------
  content
----------------------------------------------------*/
.content .box {
  margin: 0 10px;
  overflow: hidden;
}
.content .block {
  margin: 0 10px;
  overflow: hidden;
  padding-bottom: 40px;
}
.content .min-block {
  margin: 0 10px;
  overflow: hidden;
  padding-bottom: 40px;
}
.content h2 {
  font-size: 25px;
  text-align: center;
  border-bottom: 1px solid #7F663F;
  margin: 0 10px 20px;
  padding-bottom: 20px;
}
.content h2 div{
  text-align: center;
}
.content h2 img{
  width: inherit;
  height: auto;
}
.content h3 {
  padding-bottom: 10px;
  text-align: center;
  background: url(img/sp_h3_line.jpg) no-repeat bottom center;
}
.content h3 img{
  width: inherit;
  height: auto;
}
.content h4 {
  font-weight: bold;
  color: #806640;
  margin-bottom: 20px;
  border: 1px solid #806640;
  padding: 6px 18px;
  display: inline-block;
}
.content .remarks {
  border: 1px solid #806640;
  padding: 10px;
  margin-bottom: 60px;
  overflow: hidden;
}
.content .remarks .ttl {
  text-align: center;
  color: #806640;
  border-bottom: 1px solid #806640;
  margin-bottom: 20px;
  padding-bottom: 10px;
}
.content .remarks .left-col {
  margin-bottom: 10px;
}
.content .remarks .left-col ul {
  margin-top: 10px;
}
.content .remarks .right-col {
  width: 125px;
  margin: 0 auto;
}
.content .remarks ul li{
  background: url(img/list-arw.png) no-repeat left center;
  background-size: 6px 7px;
  padding: 0 0 0 10px;
}
.sp-none {
  display: none;
}
/*----------------------------------------------------
  page
----------------------------------------------------*/
/* aboutsakuda */
#aboutsakuda .none{
  display: none;
}
#aboutsakuda h2 div {
  width: 160px;
  margin: 0 auto;
}
#aboutsakuda .message P {
}
#aboutsakuda .message .image {
  width: 150px;
  float: right;
  margin-left: 10px;
}
#aboutsakuda .outline {
  border: 1px solid #7F663F;
  padding: 10px 10px 20px;
  margin: 0 10px 40px;
}
#aboutsakuda .outline table {
  width: 100%;
}
#aboutsakuda .outline table th {
  display: block;
  color: #7F663F;
  padding: 10px 0 0;

}
#aboutsakuda .outline table td {
  display: block;
  padding: 0 0 10px;
  vertical-align: top;
  border-bottom: 1px dotted #7F663F;
}
#aboutsakuda .outline table li {
  overflow: hidden;
}
#aboutsakuda .outline table .name {
  margin-right: 10px;
  float: left;
}
#aboutsakuda .outline table .place {
  float: left;
}
#aboutsakuda .outline table .tel {
  clear: left;
  margin-bottom: 5px;
}
#aboutsakuda .outline table .year {
}
#aboutsakuda .outline table .event {
  margin-bottom: 5px;
}
#aboutsakuda .shop h3 {
  width: 105px;
  margin: 0 auto 20px;
}
#aboutsakuda .shop li {
  margin-bottom: 40px;
  overflow: hidden;
}
#aboutsakuda .shop .image {
  width: 100px;
  float: left;
}
#aboutsakuda .shop .info {
  padding-left: 110px;
}
#aboutsakuda .shop .name {
  margin-bottom: 5px;
  color: #7F663F;
}
#aboutsakuda .shop .caption {
  border-top: 1px dotted #806640;
  padding-top: 10px;
  margin-top: 10px;
}
#aboutsakuda .access h3 {
  width: 149px;
  margin: 0 auto 20px;
}
#aboutsakuda .access .gmap{
  margin-bottom: 30px;
  height: 300px;
}
#aboutsakuda .access dl {
  margin-bottom: 20px;
}
#aboutsakuda .access dt {
  font-weight: bold;
}
#aboutsakuda .access .bus {
  overflow: hidden;
}
#aboutsakuda .access .bus th{
  width: 80px;
  vertical-align: top;
}
#aboutsakuda .access .bus #busstop{
  height: 300px;
  margin: 0 0 10px;
}
#aboutsakuda .access .left-col {
  margin-bottom: 10px;
}
#aboutsakuda .access .bus p {
  font-weight: bold;
  margin-bottom: 5px;
}
#aboutsakuda .access .bus .gmap {
}

#aboutsakuda .access .direction{
  max-width: 300px;
  margin: 0 auto 10px;
  
}
#aboutsakuda .access .direction img{
  margin: 0 0 5px;
}
#aboutsakuda .station {
  margin-bottom: 30px;
}
#aboutsakuda .dl-last {
  margin-bottom: 30px !important;
}
#aboutsakuda .min-text {
  font-size: 12px;
  line-height: 12px;
  display: block;
  margin-bottom: 6px;
}

/* mission*/
#mission h2 div {
  width: 143px;
  margin: 0 auto;
}
#mission .artisan h3 {
  width: 106px;
  margin: 0 auto 20px;
}
#mission .flow h3 {
  width: 141px;
  margin: 0 auto 20px;
}
#mission .message .img img{
  width: 48%;
}
#mission .message .img img:first-child{
  float: left;
}
#mission .message .img{
  overflow: hidden;
  margin: 0 0 20px;
}
#mission .message .img img:last-child{
  float: right;
}
#mission .message .row{
  margin: 0 0 40px;
}
#mission .message .btn,
#mission .artisan .btn{
  margin: 0 0 20px;
}
#mission .artisan .ttl {
  color: #806640;
  font-size: 16px;
  margin: 0 0 10px;
}
#mission .artisan .row1,
#mission .artisan .row2{
  margin: 0 0 30px;
  overflow: hidden;
  font-size: 0;
}
#mission .artisan .row2 .img{
  float: right;
}
#mission .artisan .txt{
  margin: 0 0 20px;
  font-size: 14px;
}
#mission .artisan .img{
  vertical-align: top;
  display: inline-block;
  *display: inline;
  zoom: 1;
  width: 48%;
}
#mission .artisan .col{
  vertical-align: top;
  display: inline-block;
  *display: inline;
  zoom: 1;
  width: 48%;
}
#mission .artisan .row1 .img,
#mission .artisan .row2 .col{
  margin: 0 4% 0 0;
}
#mission .artisan .col div:first-child{
  margin: 0 0 10%;
}
#mission .flow .ttl {
  font-size: 12px;
  border: 1px solid #7F663F;
  color: #7F663F;
  padding: 6px 0;
  width: 100%;
  text-align: center;
  margin: 0 0 10px;
}
#mission .flow .item {
  vertical-align: top;
  width: 48%;
  display: inline-block;
  *display: inline;
  zoom: 1;
  font-size: 14px;
  margin: 0 2% 2% 0;
}
#mission .flow .item .img{
  margin: 0 0 10px;
}
#mission .flow .item:nth-of-type(2n) {
  margin: 0 0 2% 0;
}

/*  trial  */
#trial h2 div {
  width: 177px;
  margin: 0 auto;
}
#trial .flow h3 {
  width: 117px;
  margin: 0 auto 20px;
}
#trial .product h3 {
  width: 93px;
  margin: 0 auto 20px;
}
#trial .calender h3 {
  width: 93px;
  margin: 0 auto 20px;
}
#trial .form h3 {
  width: 139px;
  margin: 0 auto 20px;
}
#trial .message .img{
  margin: 0 0 30px;
}
#trial .message .table{
  border: 1px solid #806640;
  width: 100%;
  padding: 20px;
}
#trial .message table{
  margin: 0 0 40px;
}
#trial .message table th{
  vertical-align: top;
  width: 100%;
  padding: 5px 0;
  color: #806640;
  display: block;
}
#trial .message table td{
  padding: 5px 0;
  display: block;
}
#trial .message table br{
}
#trial .message .table .txt{
  text-align: center;
  margin: 0 0 20px;
}
#trial .flow{
  font-size: 0;
}
#trial .flow .arw{
  display: none;
}
#trial .flow .item.sp .img{
  position: relative;
}
#trial .flow .item.sp .img:after{
content: "";
  background: url(img/list-arw.png) no-repeat center center;
  background-size: 60% 70%;
  font-size: 0.75em;
  width: 8.3%;
  height: 16.6%;
  display: inline-block;
  position: absolute;
  top: 41.7%;
  right: -8.3%;
}
#trial .flow .item .img{
  margin: 0 0 10px;
}
#trial .flow .item{
  font-size: 14px;
  width: 48%;
  display: inline-block;
  *display: inline;
  zoom: 1;
  vertical-align: top;
  margin: 0 0 4% 0;
}
#trial .flow .item.sp{
  margin: 0 4% 4% 0;
}

#trial .product .notice{
  font-size: 14px;
  text-align: center;
  margin: 0 0 20px;
}
#trial .product .item{
  display: inline-block;
  *display: inline;
  zoom: 1;
  width: 32%;
  margin: 0 2% 4% 0;
  font-size: 10px;
  vertical-align: top;
  text-align: center;
}
#trial .product{
  font-size: 0;
}
#trial .product .item:nth-of-type(3n){
  margin: 0 0 4% 0;
}
#trial .product .item .img{
  margin: 0 0 10px;
}
#trial .form{
}
#trial .form .detail{
  text-align: center;
  margin: 0 0 20px;
  font-size: 11px;
}
#trial .form .txt{
  text-align: center;
}
#trial .form .txt a{
  text-decoration: underline;
}
#trial .form .txt .ttl{
  font-weight: bold;
}
#trial .form .notice{
  text-align: center;
}
#trial .form .notice .ttl{
  font-weight: bold;
}
#trial .form span{
  color: red;
}
#trial .form .table{
  border: 1px solid #806640;
  width: 100%;
  padding: 20px;
  margin: 0 0 40px;
}
#trial .form table{
  margin: 0 0 40px;
  width: 100%;
}
#trial .form table th{
  vertical-align: top;
  display: block;
  line-height: 30px;
}
#trial .form table td{
  line-height: 30px;
  text-align: left;
  display: block;
  margin: 0 0 10px;
}
#trial .form table td input,
#trial .form table td select,
#trial .form table td textarea{
  border: none;
  width: 100%
}
#trial .form .table .txt{
  margin: 0 0 20px;
}
#trial .form #submit{
  margin: 40px auto 0;
  display: block;
}
#trial .form .ajax-loader{
  width: 16px;
  height: 16px;
  display: block;
}
#trial div.wpcf7-response-output {
  margin: 2em 0.5em 2em;
  padding: 0.2em 1em;
}
#trial .gc_wrapper {
  width: 100%;
  margin: 2.0833% auto;
}
#trial .responsive-iframe-container {
  position: relative;
  padding-bottom: 100%;
  height: 0;
  height: 400px;
}
#trial .responsive-iframe-container iframe{
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100% !important;
  min-height: 100% !important;
}
#trial .big-container {
  display: none;
}
#trial .short {
  width: 40px !important;
}

/*  product  */
#product .abouttxt {
  text-align: center;
  margin: 0 10px 40px;
}
#product .abouttxt p {
  margin-bottom: 10px;
}
#product h2 div {
  width: 116px;
  margin: 0 auto;
}
#product .centered h3 {
  width: 212px;
  margin: 0 auto 20px;
}
#product .about h3 {
  width: 212px;
  margin: 0 auto 20px;
}
#product .material h3 {
  width: 179px;
  margin: 0 auto 20px;
}
#product .building h3 {
  width: 188px !important;
  margin: 0 auto 20px;
}
#product .food h3 {
  width: 179px;
  margin: 0 auto 20px;
}
#product .sticker h3 {
  width: 140px;
  margin: 0 auto 20px;
}
#product .about .ttl{
  color: #806640;
  font-size: 16px;
  margin: 0 0 20px;
  text-align: center;
}
#product .about .txt{
  margin: 0 0 20px;
}
#product .about .img,
#product .material .img{
  width: 80%;
  margin: 0 auto 40px;
}
#product .about .col{
  background: #EDE6DA;
  padding: 20px;
}
#product .about .row2 p{
  margin: 0 0 20px;
}
#product .about .row2 .txt{
  margin: 0 0 30px;
}
#product .craft .txt,
#product .accessory .txt,
#product .sticker .txt,
#product .material .txt,
#product .food .txt{
  margin: 0 0 20px;
}
#product .craft .img img,
#product .accessory .img img,
#product .sticker .img img{
  width: 48%;
  float: left;
}
#product .craft .img img:last-child,
#product .accessory .img img:last-child,
#product .sticker .img img:last-child{
  width: 48%;
  float: right;
}
#product .material .txt .btn{
  margin: 20px 0 40px;
}
#product .sticker dt{
  font-weight: bold;
}
#product .sticker dd{
  margin: 0 0 20px;
}
#product .sticker .txt p{
  margin: 0 0 20px;
}
#product .remarks{
  text-align: center;
}
#product .remarks .step{
  color: #806640;
  font-size: 16px;
  margin: 0 0 10px;
}
#product .remarks li{
  background: none;
  padding: 0;
}
#product .remarks .arw{
  height: 60px;
 background: url(img/down-arw.png) no-repeat center center;
}
#product .centered .txt {
  margin-bottom: 10px;
}
#product .centered .img img {
  margin-bottom: 10px;
}

/*  onlineshop  */
#onlineshop h2 div {
  width: 265px;
  margin: 0 auto;
}
#onlineshop .txt{
  text-align: center;
  margin: 20px 0 40px;
}
#onlineshop .min-block{
  margin: 0 10 100px;
}
#onlineshop .item{
  text-align: center;
  margin: 0 0 60px;
}
#onlineshop .ttl{
  font-size: 16px;
  margin: 0 0 10px;
  font-weight: bold;
}
#onlineshop .url{
  margin: 0 0 20px;
  font-size: 12px;
}
#onlineshop .img{
  margin: 0 auto 10px;
  max-width: 350px;
}

/*  about-kanazawahaku  */
#about-kanazawahaku h2 div {
  width: 202px;
  margin: 0 auto;
}
#about-kanazawahaku .message{
  margin: 0 10px 40px;
}
#about-kanazawahaku .message .sp-clear{
  display: none;
}
#about-kanazawahaku .row{
  margin: 0 0 60px;

}
#about-kanazawahaku .img{
  width: 80%;
  margin: 0 auto;
}
#about-kanazawahaku .ttl{
  text-align: center;
  color: #806640;
  font-size: 16px;
  margin: 0 0 10px;
}
#about-kanazawahaku .txt{
  margin: 0 0 20px;
}

/*  recomended-spot  */
#recomended-spot h2 div {
  width: 300px;
  margin: 0 auto;
}
#recomended-spot #map-canvas{
  margin: 0 0 40px;
}
#recomended-spot li{
  padding: 0;
  margin: 0 0 40px;
}
#recomended-spot li dt{
  border-bottom: 1px dotted #806640;
  padding:0 0 5px 0;
  margin: 0 0 15px;
  color: #806640;
  font-size: 18px;
}
#recomended-spot .flag1{
  background: url(img/flag1.png) no-repeat left 3px;
  background-size: 21px 35px;
}
#recomended-spot .flag2{
  background: url(img/flag2.png) no-repeat left 3px;
  background-size: 21px 35px;
}
#recomended-spot .flag3{
  background: url(img/flag3.png) no-repeat left 3px;
  background-size: 21px 35px;
}
#recomended-spot .flag4{
  background: url(img/flag4.png) no-repeat left 3px;
  background-size: 21px 35px;
}
#recomended-spot .flag5{
  background: url(img/flag5.png) no-repeat left 3px;
  background-size: 21px 35px;
}
#recomended-spot .flag6{
  background: url(img/flag6.png) no-repeat left 3px;
  background-size: 21px 35px;
}
#recomended-spot .flag7{
  background: url(img/flag7.png) no-repeat left 3px;
  background-size: 21px 35px;
}
#recomended-spot .flag8{
  background: url(img/flag8.png) no-repeat left 3px;
  background-size: 21px 35px;
}
#recomended-spot .flag9{
  background: url(img/flag9.png) no-repeat left 3px;
  background-size: 21px 35px;
}
#recomended-spot .flag10{
  background: url(img/flag10.png) no-repeat left 3px;
  background-size: 21px 35px;
}
#recomended-spot .flag11{
  background: url(img/flag11.png) no-repeat left 3px;
  background-size: 21px 35px;
}
#recomended-spot .flag12{
  background: url(img/flag12.png) no-repeat left 3px;
  background-size: 21px 35px;
}
#recomended-spot .info{
  margin: 0 0 20px;
  font-size: 12px;
}
#recomended-spot .message{
  text-align:center;
  margin: 0 10px 30px;
}
#recomended-spot .area{
  border: 1px solid #806640;
  padding: 10px;
}
#recomended-spot .area div{
  color: #806640;
  margin: 0 0 5px;
}
#recomended-spot .img{
  width: 200px;
  margin: 10px auto 0;
}

/*  purchase  */
#purchase h2 div {
  width: 214px;
  margin: 0 auto;
}
#purchase table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  text-align: center;
  font-size:10px
}
#purchase td{
  border: 1px solid #7F663F;
  padding: 5px;
  line-height: 30px
  text-align: center;
}
#purchase th{
  border: 1px solid #7F663F;
  padding: 5px;
  font-weight: normal;
  background: #EBE3D8;
  text-align: center;
}
#purchase table td .note{
  font-size:10px;
}
#purchase .message .img{
  margin: 0 auto 20px;
}
#purchase .message .txt{
  text-align: left;
}
#purchase .left-col{
}
#purchase .right-col{
  margin: 20px auto 0;
  max-width: 350px;
}
#purchase .left-col .ttl{
  color: #806640;
  font-size: 16px;
  margin: 0 0 10px;
  text-align: center;
}
#purchase .table1,
#purchase .table2,
#purchase .table3{
  padding-top: 20px;
  clear: both;
}
#purchase .table1 .txt,
#purchase .table2 .txt,
#purchase .table3 .txt{
  text-align: center;
}
#purchase table{
  margin: 0 0 20px;
}
#purchase .block{
  padding: 0 0 40px;
}

/*  contact  */
#contact h2 div {
  width: 173px;
  margin: 0 auto;
}
#contact .tel h3 {
  width: 178px;
  margin: 0 auto 20px;
}
#contact .form h3 {
  width: 231px;
  margin: 0 auto 20px;
}
#contact .form{
  padding: 0 0 120px;
}
#contact .form .detail{
  text-align: center;
  margin: 0 0 20px;
}
#contact .form .txt{
  text-align: center;
}
#contact .form .txt .ttl{
  font-weight: bold;
}
#contact .form table th span {
  color: red;
}
#contact .form .table{
  border: 1px solid #806640;
  width: 100%;
  padding: 20px;
  margin: 0 0 40px;
}
#contact .form table{
  margin: 0 0 40px;
  width: 100%;
  font-size: 12px;
}
#contact .form table th{
  vertical-align: top;
  display: block;
  line-height: 30px;
}
#contact .form table td{
  line-height: 30px;
  text-align: left;
  display: block;
  margin: 0 0 10px;
}
#contact .form .wpcf7-text,
#contact .form table td select,
#contact .form table td textarea{
  border: none;
  width: 100%
}
#contact .wpcf7-form-control-wrap {
  display: block;
}
#contact .form .table .txt{
  margin: 0 0 20px;
}
#contact .form #submit{
  margin: 40px 0 0 0;
}
#contact .form .ajax-loader{
  width: 16px;
  height: 16px;
  display: block;
}
#contact .tab{
  font-size: 0;
  width: 100%;
  border-left: 1px solid #7F663F;
}
#contact .tab li{
  display: inline-block;
  font-size: 12px;
  text-align: center;
  vertical-align: middle;
  background: #F2EDE6;
  padding: 10px 0;
  cursor: pointer;
  border-right: 1px solid #7F663F;
  border-top: 1px solid #7F663F;
}
#contact .tab li:first-child{
width: 50%;
}
#contact .tab li:nth-child(2){
width: 50%;
}
#contact .tab li:nth-child(3){
width: 33.3333%;
}
#contact .tab li:nth-child(4){
width: 33.3333%;
}
#contact .tab li:last-child{
width: 33.3333%;
}
#contact .tab li.active{
  background: #7F663F;
  color: #fff;
  cursor: default;
}
#contact .page{
  display: none;
}
#contact .page.active{
  display: block;
}
#contact .tel .number{
  text-align: center;
}
#contact .tel .number img{
  width: inherit;
}
#contact .form .notice{
  margin: 0 0 20px;
  text-align: center;
}
#contact .table .req{
  text-align:center;
}
#contact .table .req span{
  color: red;
}
#contact .table .ttl{
  color: #7F663F;
  font-size: 12px;
  text-align:center;
  margin: 0 0 20px;
}

/* faq  */
#faq h2 div {
  width: 171px;
  margin: 0 auto;
}
#faq .message .txt{
  text-align: center;
  margin: 0 0 30px;
}
#faq .message{
  padding: 0 0 30px;
}
#faq .anchor{
  text-align: center;
  font-size: 0;
}
#faq .anchor ul li{
  text-align: left;
  font-size: 12px;
  display: inline-block;
  width: 50%;
  background: url(img/footer-arw.png) no-repeat left center;
  margin: 0 0 10px;
}
#faq .anchor ul li:nth-child(n+2){
  margin: 0;
}
#faq .anchor ul li{
  padding: 0 20px 0 10px;
}
#faq section{
  padding: 0 0 40px;
  display: table;
}
#faq section .answer{
  margin: 0 0 40px;
}
#faq section .ttl{
  font-size: 16px;
  padding: 0 0 5px;
  margin: 0 0 20px;
  color: #816842;
  border-bottom: 1px solid #816842;
}
#faq .icon{
  display: table-cell;
  width: 50px;
}
#faq section span{
  background: #7F663F;
  color: #fff;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  height: 32px;
  padding: 5px 0;
  text-align: center;
  display: block;
}
#faq section .link{
  margin: 10px 0 0 60px;
}
#faq section p{
  display: table-cell;
  padding: 0 0 0 10px;
}
#faq section .question{
  margin: 0 0 15px;
}
#faq .link a{
  text-decoration: underline;
}
#faq .link a:hover{
  text-decoration: none;
  color: #816842;
}

/*  staff csr */
#staff h2 div {
  width: 233px;
  margin: 0 auto;
}
#staff .message{
  text-align: left;
}
#csr h2 div {
  width: 236px;
  margin: 0 auto;
}
#staff .txt,
#csr .txt{
  margin: 0 0 20px;
}
#staff .img,
#csr .img{
  margin: 0 20px;
}
#staff .txt .ttl,
#csr .txt .ttl{
  color: #816842;
  font-size: 18px;
  margin: 0 0 10px;
}
#staff .txt .name{
  font-size: 12px;
  padding: 0 0 10px;
  border-bottom: 1px solid #000;
  margin: 0 0 10px;
}

/*  recruit  */
#recruit h2 div {
  width: 93px;
  margin: 0 auto;
}
#recruit .table{
  border: 1px solid #806640;
  width: 100%;
  padding: 20px;
}
#recruit tr{
  border-bottom: 1px solid #806640;
}
#recruit table{
  margin: 0 0 40px;
}
#recruit table th{
  padding: 10px 0 0;
  vertical-align: top;
  width: 160px;
  color: #806640;
  display: block;
  oadding: 10px 0 0; 
}
#recruit table td{
  padding: 10px 0;
  display: block;
}
#recruit .txt{
  text-align: center;
  margin: 0 0 20px;
}

/* privacy */
#privacy h2 div {
  width: 294px;
  margin: 0 auto;
}
#privacy .row {
  margin-bottom: 40px;
}
#privacy .ttl {
  color: #806640;
  font-size: 16px;
  margin: 0 0 10px;
  font-weight: bold;
}
#privacy .sub-ttl {
  font-weight: bold;
}
#privacy .txt {
  margin-bottom: 20px;
}

/* blog news */
#blog h2 div {
  width: 81px;
  margin: 0 auto;
}
#news h2 div {
  width: 116px;
  margin: 0 auto;
}
#blog .name ,
#news .name {
  font-size: 16px;
  text-align: center;
  padding: 0 0 10px;
  margin: 0 0 20px;
  color: #7F663F;
  font-weight: bold;
}

.archive{
}
.archive .entry{
  margin: 0 0 60px;
  padding: 0 10px;
}
.archive aside{
  padding: 0 10px;
}
.archive .entry header{
  overflow: hidden;
  padding: 0;
  margin: 0 0 20px;
}
.archive .entry h3,
.archive aside h3{
  font-size: 16px;
  text-align: left;
  padding: 0 0 10px;
  margin: 0 0 10px;
  border-bottom: 1px solid #7F663F;
  color: #7F663F;
  background: none;
}
.archive aside h3{
  margin: 0;
}
.archive .entry h3 a,
.archive aside h3 a{
  color: #7F663F;
}
.archive .entry .date{
  float: right;
  color: #000;
}
.archive .entry .txt{
  padding: 0 0 60px;
  border-bottom: 1px dotted #7F663F;
}
.archive .entry .rel{
  border-bottom: 1px solid #7F663F;
  padding: 20px 0;
}
.archive .tablenav{
  margin: 0 0 60px;
}
.archive aside li{
  list-style: none;
  border-bottom: 1px dotted #7F663F;
  background: url(img/archive-arw.png) no-repeat right center;
}
.archive aside li a{
  padding: 10px 20px 10px 0;
  display: block;
}
.archive aside section {
  margin: 0 0 40px;
}
/* contact-thanks */
#contact-thanks .thanks{
  text-align: center;
  margin-bottom: 40px;
}
#contact-thanks .thanks .ttl{
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}



/*----------------------------------------------------
  entry
----------------------------------------------------*/
.entry{
  margin-bottom: 30px;
}
.entry img{
  max-width: 100%;
  height: auto;
  width: auto!important;
}
.entry h1{
  font-size: 197%;
}
.entry h2{
  font-size: 182%;
}
.entry h3{
  font-size: 174%;
}
.entry h4{
  font-size: 167%;
}
.entry h5{
  font-size: 131%;
}
.entry h6{
  font-size: 116%;
}
.entry p{
  margin-bottom: 10px;
}
.entry blockquote{
  background: #EEE;
  padding: 15px 15px 5px 15px;
  margin-bottom: 10px;
}
.entry ul{
  list-style: disc;
  margin-left: 20px;
}
.entry ol{
  margin-left: 20px;
}
.entry strong{
  font-weight: bold;
}
.entry .alignleft{
  display: inline;
  float: left;
  margin-right: 20px;
}
.entry .alignright{
  display: inline;
  float: right;
  margin-left: 20px;
}
.entry .aligncenter{
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* foreign language */
.fl h2{
  font-family: Georgia, "Times New Roman", "DFKai-SB","Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif;
  color: #7F663F;
  font-size: 24px;
  font-weight: bold;
}
.fl h3{
  width: 100%!important;
  font-family: Georgia, "Times New Roman", "DFKai-SB","Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif;
  color: #7F663F;
  font-size: 20px;
  font-weight: normal;
  padding: 0;
}
.fl #index .ttl {
  font-family: Georgia, "Times New Roman", "DFKai-SB","Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif;
  background: none;
  text-align: center;
  float: none;
  width: 100%;
  height: auto;
  font-size: 24px;
  font-weight: bold;
  overflow: visible;
  white-space: nowrap;
  text-indent: 0;
  margin: 0 0 20px;
}
.fl #index .product,
.fl #index .online{
  margin: 0 10px;
}
.fl #index .product img{
  margin: 0 0 10px;
}
.fl #index .product li{
  margin: 0 0 20px;
}
.fl #index .product li .name{
  font-family: Georgia, "Times New Roman", "DFKai-SB","Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif;
  text-align: center;
  font-size: 18px;
  margin: 0 0 10px;
}
.fl #index .online .item{
  margin: 0 0 20px;
  text-align: center;
}
.fl #index .online .name{
  font-size: 16px;
  margin: 0 0 10px;
  font-weight: bold;
}
.fl #index .online .url {
    margin: 0 0 20px;
    font-size: 12px;
}
.fl #mission .flow .item:nth-of-type(2n) {
    margin: 0 2% 2% 0!important;
}
.fl #mission .flow .item:nth-of-type(2n+1) {
    margin: 0 0 2% 0!important;
}
.fl .content h3{
  background: none;
}
.fl .h3border{
  background: #7F663F;
  width: 80px;
  height: 3px;
  margin: 10px auto 40px;
}
.en footer #pagetop{
  background: url(img/pagetop-sp-en.jpg) no-repeat left top;
  background-size: 90px 35px;
}
.cn footer #pagetop{
  background: url(img/pagetop-sp-cn.jpg) no-repeat left top;
  background-size: 90px 35px;
}


/*  max-width:768px
----------------------------------------------------*/

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}