@charset "utf-8";
/*!
 * home CSS
 * ---------------------------------------------
 * トップページのcss
 * 
 */
 
@import 'slider-pro.css';

/*  PIE ！パス確認ください！
---------------------------------*/

.menuPc li,
.productsSec {
  position: relative;
  behavior: url(/wp-content/themes/henri-charpentier/resources/js/PIE.php);
}

/*===================================
  font  
=====================================*/

.keyVisual li p,.keyVisual li p a,.keyVisual li p a:visited,
.storySec,.storySec a,.storySec a:visited,
.more a,.more a:visited {
  color: #fff;
}
.langList a,.langList a:visited,.langList li:after {
  color: #333;
}
.productsSec .more a,.productsSec .more a:visited{
  color: #330000;
}
.newsList h3 {
  color: #8a6a40;
}
.newsList time {
  color: #939393;
}
.productList h3 {
  color: #a48e72;
}
.sp-arrow,
.storySec {
  font-size: 12px;
}
.keyVisual li p,
.more,
.newsList h3 {
  font-size: 14px;
}
.newsList time {
  font-size: 11px;
}
.productList h3,
.productList p,
.storySec .sns {
  font-size: 13px;
}
.productList .lg h3 {
  font-size: 18px;
}
.productList .lg h3 span {
  font-size: 10px;
}
.keyVisual li p,
.productList {
  text-align: center;
}
.more {
  text-align: right;
}
.keyVisual li a p,
.more a,
.newsList h3:hover,
.searchShop a {
  text-decoration: underline;
}
.keyVisual li a:hover p,
.more a:hover,
.searchShop a:hover {
  text-decoration: none;
}

/*===================================
  element  
=====================================*/

.header h1 {
  position: relative;
  z-index: 50;
}
.keyVisual {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.title img {
  margin: 0 auto 40px;
}

/*  sprite
---------------------------------*/

.subst {
  background-image: url(../images/home/sprite_top.png);
}
.subst.t1 {
  width: 200px;
  height: 15px;
  background-position: 0 0;
}
.subst.t2 {
  width: 138px;
  height: 15px;
  background-position: 0 -50px;
}
.subst.f1 {
  width: 75px;
  height: 8px;
  background-position: 0 -100px;
}
.subst.st1 {
  width: 110px;
  height: 35px;
  background-position: 0 -150px;
}
.subst.st2,
.subst.st3 {
  width: 46px;
  height: 14px;
}
.subst.st2 {
  background-position: 0 -200px;
}
.subst.st3 {
  background-position: 0 -250px;
}
.subst.f2 {
  width: 105px;
  height: 11px;
  background-position: 0 -300px;
}
.subst.st4 {
  width: 82px;
  height: 12px;
  background-position: 0 -350px;
}

/*===================================
  header  
=====================================*/

.header {
  padding-top: 148px;
}
.header h1 a {
  margin-bottom: 193px;
}
.header h1 a,
.header .logo {
  width: 411px;
  height: 179px;
}
.header .logo {
  background-image: url(../images/home/logo.png);
  background-position: 0 0;
}

/*  langList
---------------------------------*/

.langList ul {
  top: 12px;
  margin-left: 730px;
  padding: 7px 7px 6px;
  background: rgba(255,255,255,.5);
  z-index: 1000;
}

/*  menu
---------------------------------*/

.menuPc {
  border-top: solid 5px #a47f73;
  border-bottom: none;
}
.menuPc li {
  background: -webkit-gradient(linear, left top, left bottom, from(#563a2e), color-stop(0.81, #563a2e), to(#230e02));
  background: -webkit-linear-gradient(top, #563a2e, #563a2e 81%, #230e02);
  background: -moz-linear-gradient(top, #563a2e, #563a2e 81%, #230e02);
  background: -ms-linear-gradient(top, #563a2e, #563a2e 81%, #230e02);
  background: -o-linear-gradient(top, #563a2e, #563a2e 81%, #230e02);
  background: linear-gradient(top, #563a2e, #563a2e 81%, #230e02);
  -pie-background: linear-gradient(top, #563a2e, #563a2e 81%, #230e02);
}
.menuPc li a,
.menuPc li a:after {
  position: relative;
}
.menuPc li a {
  height: 78px;
}
.menuPc .m1 a,
.menuPc .m1 a:hover {
  background-position: -400px 0;
}
.menuPc .m2 a {
  background-position: -400px -100px;
}
.menuPc .m3 a {
  background-position: -400px -200px;
}
.menuPc .m4 a {
  background-position: -400px -300px;
}
.menuPc .m5 a {
  background-position: -400px -400px;
}
.menuPc .m6 a {
  background-position: -400px -500px;
}
.menuPc .m7 a {
  background-position: -400px -600px;
}
.menuPc .m13 a {
  background-position: -400px -700px;
}
.menuPc .m1 a:hover {
  background-position: -550px 0;
}
.menuPc .m2 a:hover {
  background-position: -550px -100px;
}
.menuPc .m3 a:hover {
  background-position: -550px -200px;
}
.menuPc .m4 a:hover {
  background-position: -550px -300px;
}
.menuPc .m5 a:hover {
  background-position: -550px -400px;
}
.menuPc .m6 a:hover {
  background-position: -550px -500px;
}
.menuPc .m7 a:hover {
  background-position: -550px -600px;
}
.menuPc .m13 a:hover {
  background-position: -550px -700px;
}
.menuPc li.txt {
  display: none;
}

/*===================================
  keyVisual  
=====================================*/

.keyVisual {
  width: 100%;
  height: 520px;
}
.keyVisual li img {
  width: 100%;
}
.keyVisual li a:hover img {
  opacity: 1;
}
.keyVisual li p {
  position: relative;
  width: 100%;
  height: 44px;
  margin-top: -44px;
  background: rgba(0,0,0,.5);
  line-height: 44px;
}
.sp-mask.sp-grab,
.sp-mask.sp-grabbing {
  height: 520px !important;
}
.sp-buttons {
  position: absolute;
  bottom: 52px;
}
.sp-button {
  width: 13px;
  height: 13px;
  margin: 6px;
  padding: 0;
  opacity: .8;
  cursor: pointer;
}
.sp-button.sp-selected-button {
  background-color: #ad145b;
  opacity: 1;
}
.sp-fade-arrows {
  opacity: 1;
}
.sp-horizontal .sp-arrows {
  position: relative;
  width: 1048px;
  left: inherit;
  top: inherit;
  margin: -27px auto 0;
}
.sp-horizontal .sp-previous-arrow {
  left: 73px;
}
.sp-horizontal .sp-next-arrow {
  right: 73px;
}
.sp-previous-arrow:before,
.ios .sp-previous-arrow:before,
.ie9 .sp-previous-arrow:before,
.ie8 .sp-previous-arrow:before,
.ie7 .sp-previous-arrow:before,
.ie8.sp-vertical .sp-previous-arrow:before,
.ie7.sp-vertical .sp-previous-arrow:before {
  content: '<<';
}
.sp-next-arrow:before,
.ios .sp-next-arrow:before,
.ie9 .sp-next-arrow:before,
.ie8 .sp-next-arrow:before,
.ie7 .sp-next-arrow:before,
.ie8.sp-vertical .sp-next-arrow:before,
.ie7.sp-vertical .sp-next-arrow:before {
  content: '>>';
}

/*===================================
  news
=====================================*/

.newsSec {
  padding: 40px 0 29px;
}
.newsSec article {
  position: relative;
}
.newsList {
  margin: 0 -20px 28px 0;
  line-height: 1.6;
}
.newsList::after {
  clear: both;
  content: "";
  display: table;
}
.newsList li {
  width: 186px;
  min-height: 320px;
  margin-right: 20px;
  padding: 0 12px 22px;
  background: #fff;
}
.newsList li li {
  width: inherit;
  min-height: inherit;
  margin: 0;
  padding: 0;
  background: none;
}
.newsList figure {
  overflow: hidden;
  zoom: 1;
  width: 210px;
  height: 150px;
  margin: 0 -12px 14px;
}
.newsList time {
  display: block;
  margin: 1em 0;
}

/*-- sns --*/

.newsSec .sns {
  position: absolute;
  top: -55px;
  right: 0;
}
.newsSec .sns ul {
  margin: -17px 0 0 89px;
}
.newsSec .sns a {
  width: 24px;
  height: 24px;
  margin: 0 0 0 4px;
  background-color: #b60858;
}
.newsSec .sns .fb a {
  background-position: -500px -400px;
}
/*.newsSec .sns .twt a {
  background-position: -550px -400px;
}*/
.newsSec .sns .inst a {
  background-position: -550px -400px;
}

/*===================================
  banner2
=====================================*/

.banner2 img {
	margin: 10px auto 50px;
}

/*===================================
  banner3
=====================================*/

.banner3 img {
	margin: 10px auto 50px;
}

/*===================================
  products
=====================================*/

.productsSec {
  padding: 40px 0 29px;
  background: url(../images/home/bg_products_1.png) no-repeat 0 0, url(../images/home/bg_products_2.png) no-repeat 100% 100%, url(../images/home/bg_products.jpg) repeat 0 0;
}
.productList {
  margin: 0 -24px 0 0;
  line-height: 1.4;
}
.productList li {
  overflow: hidden;
  position: relative;
  width: 130px;
  margin: 0 24px 28px 0;
}
.productList li.lg {
  width: 290px;
  margin-right: 15px;
}
.productList figure {
  margin-bottom: 10px;
}
.productList h3 span {
  padding-left: 1em;
}
.productList p {
  margin: 7px -1em 0 0;
}
.tagIco {
  position: absolute;
  top: 10px;
  left: 8px;
}
.tagIco li {
  display: inline-block;
  width: 40px;
}
a:hover .tagIco img {
  opacity: 1;
}

/*===================================
  story
=====================================*/

.storySec {
  padding: 40px 0 60px;
}
.storySec header {
  position: relative;
  overflow: hidden;
  height: 150px;
  margin-bottom: 40px;
  background: #774c20 url(../images/home/title_story_bg.png) no-repeat 0 0;
}
.storySec header img {
  margin-left: 282px;
}
.storySec header p {
  width: 270px;
  margin: -66px auto 0;
  padding-left: 680px;
  line-height: 1.4;
}
.storySec header a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background: #fff;
  opacity: 0;
}
.storySec header a:hover {
  opacity: .3;
}
.storySec article {
  position: relative;
}
.searchShop {
  width: 537px;
  height: 196px;
  margin-bottom: 20px;
  padding: 24px 0 0 23px;
  background: #503b29 url(../images/home/search_shop_bg.jpg) no-repeat 100% 0;
  line-height: 1.6;
}
.searchShop h3 {
  margin-bottom: 12px;
}
.searchShop dl {
  margin-bottom: 15px;
}
.searchShop dt {
  margin-bottom: 10px;
}
.searchShop li {
  display: inline;
  white-space: nowrap;
}
.searchShop .cafe li:after {
  content: "/";
  padding-left: 5px;
}
.searchShop .cafe li:nth-last-child(1):after {
  display: none;
}
.searchShop .store {
  width: 360px;
}
.searchShop .store li {
  padding-right: 2px;
}
.storySec .asideNavi li {
  float: left;
  margin: 0 20px 18px 0;
}

/*-- sns --*/

.storySec .sns {
  position: relative;
  width: 534px;
  height: 57px;
  padding: 23px 0 0 22px;
  border: solid 2px #644e3a;
}
.storySec .sns h4 {
  margin-bottom: 14px;
}
.storySec .sns ul {
  position: absolute;
  top: 26px;
  right: 26px;
}
.storySec .sns a {
  width: 32px;
  height: 32px;
  margin: 0 0 0 10px;
  background-color: #b60858;
}
.storySec .sns .fb a {
  background-position: -600px -400px;
}
/*.storySec .sns .twt a {
  background-position: -650px -400px;
}*/
.storySec .sns .inst a {
  background-position: -650px -400px;
}
.specialLink {
  position: absolute;
  top: 0;
  right: 0;
  width: 260px;
  height: 398px;
  padding: 20px 30px 0;
  background: url(../images/base/bg_lattice.jpg) repeat 0 0;
}
.specialLink h3 {
  margin-bottom: 20px;
}
.specialLink ul {
  margin-bottom: 10px;
}
.specialLink ul li {
  margin-bottom: 10px;
}

/************************************************************************************
smaller than 660px
*************************************************************************************/
@media screen and (max-width: 660px) {
  
  /*===================================
    font  
  =====================================*/
  
  .langList a,.langList a:visited,.langList li:after {
    color: #a48e72;
  }
  .keyVisual li p,
  .productList .lg h3 span  {
    font-size: 16px;
  }
  .sp-arrow,
  .newsList time,
  .storySec .sns {
    font-size: 18px;
  }
  .storySec header {
    font-size: 13px;
  }
  .more,
  .storySec .more,
  .newsList h3 {
    font-size: 24px;
  }
  .productList h3,
  .storySec dl {
    font-size: 20px;
  }
  .productList .lg h3 {
    font-size: 26px;
  }
  .more {
    text-align: center;
  }
  
  /*===================================
    element  
  =====================================*/
  
  .title img {
    margin-bottom: 43px;
  }
  
  /*  sprite
  ---------------------------------*/
  
  .subst.t1 {
  width: 233px;
    height: 17px;
    background-position: -250px 0;
  }
  .subst.t2 {
    width: 193px;
    height: 17px;
    background-position: -250px -50px;
  }
  .subst.f1 {
    width: 124px;
    height: 10px;
    background-position: -250px -100px;
  }
  .subst.st1 {
    width: 150px;
    height: 44px;
    background-position: -250px -150px;
  }
  .subst.st2,
  .subst.st3 {
    width: 72px;
    height: 21px;
  }
  .subst.st2 {
    background-position: -250px -200px;
  }
  .subst.st3 {
    background-position: -250px -250px;
  }
  .subst.f2 {
    width: 161px;
    height: 15px;
    background-position: -250px -300px;
  }
  .subst.st4 {
    width: 136px;
    height: 18px;
    background-position: -250px -350px;
  }
  
  /*===================================
    header  
  =====================================*/
  
  .header {
    padding-top: 17px;
  }
  .header h1 a {
    margin-bottom: 16px;
  }
  .header h1 a,
  .header .logo {
    width: 219px;
    height: 85px;
  }
  .header .logo {
    background-image: url(../images/base/sprite.png);
    background-position: 0 -100px;
  }
  
  /*  langList
  ---------------------------------*/
  
  .langList ul {
    top: 14px;
    margin: 0;
    padding: 0;
    background: none;
  }
  
  /*===================================
    keyVisual  
  =====================================*/
  
  .keyVisual {
    position: relative;
    top: inherit;
    left: inherit;
    height: 318px;
  }
  .keyVisual li p {
    position: relative;
    width: 90%;
    height: 60px;
    margin-top: -70px;
    padding: 10px 5% 0;
    line-height: 1.4;
  }
  .sp-mask.sp-grab,
  .sp-mask.sp-grabbing {
    height: 318px !important;
  }
  .sp-buttons {
    bottom: 81px;
  }
  .sp-horizontal .sp-arrows {
    position: absolute;
    top: 265px;
    left: 0;
    width: 100%;
    margin-top: 0;
  }
  .sp-horizontal .sp-previous-arrow {
    left: 16px;
  }
  .sp-horizontal .sp-next-arrow {
    right: 16px;
  }
  
  /*===================================
    news
  =====================================*/
  
  .newsSec {
    padding: 40px 0 65px;
  }
  .newsSec .title img {
    margin-bottom: 20px;
  }
  .newsList {
    margin: 60px -35px 28px 0;
    line-height: 1.2;
  }
  .newsList li {
    width: 235px;
    min-height: 470px;
    margin: 0 30px 30px 0;
    padding: 0 20px 19px;
  }
  .newsList figure {
    width: 275px;
    height: 196px;
    margin: 0 -20px 16px;
  }
  .newsList li .cat li {
    float: none;
    margin-bottom: 5px;
  }
  /*-- sns --*/

  .newsSec .sns {
    position: absolute;
    top: 13px;
    right: 30px;
  }
  .newsSec .sns ul {
    margin: -22px 0 0 132px;
  }
  .newsSec .sns a {
    width: 39px;
    height: 39px;
    margin: 0 0 0 5px;
  }
  .newsSec .sns .fb a {
    background-position: -400px -550px;
  }
  /*.newsSec .sns .twt a {
    background-position: -450px -550px;
  }*/
    .newsSec .sns .inst a {
        background-position: -500px -550px;
    }
  .tagIco {
    top: 8px;
    left: 10px;
  }
  .tagIco li {
    width: auto;
  }
  
	/*===================================
	  banner2
	=====================================*/

	.banner2 img {
		margin: 10px auto 80px;
	}
	
  /*===================================
    products
  =====================================*/
  
  .productsSec {
    padding: 60px 0;
    background: none, none, url(../images/home/bg_products.jpg) repeat 0 0;
    -pie-background: none, none, url(../images/home/bg_products.jpg) repeat 0 0;
  }
  .productList {
    margin: 0 -14px 0 0;
    line-height: 1.4;
  }
  .productList li {
    width: 184px;
    margin: 0 14px 10px 0;
  }
  .productList li.lg {
    width: 578px;
    margin: 0 0 20px;
    border: solid 1px #b6a590;
    background: #fff;
  }
  .productList li.lg:nth-child(3) {
    margin-bottom: 40px;
  }
  .productList .lg figure {
    float: left;
    margin: 0 15px 0 0;
  }
  .productList h3 {
    height: 4em;
  }
  .productList h3 span {
    padding-left: 0;
  }
  .productList .lg h3 {
    height: auto;
    margin-top: 1.6em;
  }
  .productList h3 span {
    display: block;
  }
  .productList p {
    display: none;
  }
  
  /*===================================
    story
  =====================================*/
  
  .storySec {
    padding: 30px 0 28px;
  }
  .storySec header {
    overflow: hidden;
    height: 180px;
    margin-bottom: 30px;
    background-image: url(../images/home/title_story_sp_bg.png);
  }
  .storySec header img {
    margin: 0 0 14px 319px;
    padding-top: 42px;
  }
  .storySec header p {
    width: auto;
    margin: 0 -2em 0 0;
    padding-left: 350px;
  }
  .storySec header a {
    height: 180px;
  }
  .searchShop {
    width: auto;
    height: auto;
    padding: 25px 20px 10px;
    background-image: url(../images/home/search_shop_sp_bg.jpg);
  }
  .searchShop h3 {
    margin-bottom: 24px;
  }
  .searchShop dl {
    margin-bottom: 20px;
  }
  .searchShop .cafe {
    width: 370px;
  }
  .searchShop .store {
    width: auto;
  }
  .storySec .asideNavi li {
    float: none;
    margin: 0 0 20px;
  }
  
  /*-- sns --*/
  
  .storySec .sns {
    width: auto;
    height: auto;
    margin-bottom: 20px;
    padding: 23px 0 15px 25px;
    border-width: 4px;
  }
  .storySec .sns h4 {
    margin-bottom: 11px;
  }
  .storySec .sns p {
    width: 320px;
    line-height: 1.4;
  }
  .storySec .sns ul {
    top: 30px;
    right: 29px;
  }
  .storySec .sns a {
    width: 51px;
    height: 51px;
    margin: 0 0 0 15px;
  }
  .storySec .sns .fb a {
    background-position: -550px -550px;
  }
  /*.storySec .sns .twt a {
    background-position: -650px -550px;
  }*/
    .storySec .sns .inst a {
        background-position: -650px -550px;
    }
  
  .specialLink {
    position: relative;
    top: inherit;
    right: inherit;
    width: auto;
    height: auto;
    padding: 22px 0 27px 20px;
  }
  .specialLink ul {
    overflow: hidden;
    margin: 0 -20px 10px 0;
  }
  .specialLink ul li {
    float: left;
    width: 260px;
    margin: 0 20px 18px 0;
  }
  
  /*===================================
    20161104追記
  =====================================*/
  
  .banner {
	  margin: 40px auto 0;
	  text-indent: -9999em;
  }
  .banner a {
	  display: block;
	  width: 580px;
	  height: 130px;
	  margin: auto;
	  background: url(../images/base/ban_online_shop.jpg) no-repeat 0 0;
  }
  
}