@charset "utf-8";

/*=====================================================================
//  template contents
// ***********************************************
//  01.header
//  02.footer
=====================================================================*/
/*------------------------------------------------
	01.main-img
------------------------------------------------*/

.main-imgm{
  background: url("../img/main-slide.jpg") no-repeat fixed center center /cover;
  height: 1200px;
  z-index: -1;
}


/*------------------------------------------------
	02.open-info
------------------------------------------------*/

.open-info-area{
  position: relative;
  overflow: hidden;
  /*top: -350px;*/
  margin-top: -350px;
  z-index: 100;
}

.open-info-area:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 80%;
  margin: 10% -10% 0;
  background: url("../img/open-info/area-bg_01.png") no-repeat center 0 #FFF;
  background-size:contain;
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: skew(0deg, -5deg);
  -ms-transform: skew(0deg, -5deg);
  transform: skew(0deg, -5deg);
  z-index: -1;
}

.open-info-area_inner {
  box-sizing: boder-box;
  width: 100%;
  height: 100%;
  margin-top: 200px;
  text-align: center;
}

.open-info-read{
  padding-top: 55%;
  background: url("../img/open-info/area-bg_02.png") no-repeat center 0;
  background-size:contain;
}

/*------------------------------------------------
	03.roll-parfait
------------------------------------------------*/

.roll-parfait {
  position: relative;
  overflow: hidden;
  /*top:-50%;*/
  z-index: 10000;
}

.roll-parfait:before {
  content: '';
  position: absolute;
  /*top: -500px;*/
  left: 0;
  width: 120%;
  height:80%;
  margin: 0 0 0 -15%;
  padding-top: 3%;
  background: #516b1d !important;
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  transform: rotate(4deg);
  z-index: -1;
}

.roll-parfait_inner {
  box-sizing: boder-box;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding-top: 10%;
  color: #fff;
  text-align: center;
  background: url("../img/roll-parfait/parfait-area-bg.png") no-repeat center bottom;
}

.roll-parfait_tooltipArea{
  width: 100%;
  min-width: 1000px !important;
  display: block;
  position: relative;
}

.tipbox {
	font-size: 20px;
	display: flex;
	align-items: center;
  position: absolute;
}

.tipbox a{
  color: #FFF !important;
}

.tip{
  width: 280px;
  padding: 10px;
  color: #393b36;
  font-size: 14px;
  background: #FFF;
  position: absolute;
  top:-150px;
  text-align: left;
  display: none;
}

.tip img{
  float: left;
  padding-right: 10px;
}

.tip-text01 a:hover + .tip,
.tip-text02 a:hover + .tip,
.tip-text03 a:hover + .tip,
.tip-text04 a:hover + .tip,
.tip-text05 a:hover + .tip,
.tip-text06 a:hover + .tip{
  display: block;
}

.tip-left:after,
.tip-right:before{
	content: "";
	flex-grow: 1;
  width: 30%;
	height: 1px;
	background: #FFF;
	display: block;
}

.tip-left:before{margin-right: .5em;}
.tip-left:after {margin-left: 2em;}
.tip-left .fa{font-size: 30px; position: absolute; right: -25px;}

.tip-right:before{margin-right: 2em;}
.tip-right:after {margin-left: .5em;}
.tip-right .fa{font-size: 30px; position: absolute; left: -25px;}

.tip-text01{width: 380px; left: 0; top:300px;}
.tip-text02{width: 400px; right: 0; top:450px;}
.tip-text03{width: 440px; left: 0; top:560px;}
.tip-text04{width: 480px; right: 0; top:650px;}
.tip-text05{width: 440px; left: 0; top:780px;}
.tip-text06{width: 480px; right: 0; top:860px;}

/*------------------------------------------------
	04.access-map
------------------------------------------------*/

.access-map{
  background: #e7e3c8;
}

.access-icon-text{
  width: 100%;
  display: block;
  background: #f1eed7;
}


/*------------------------------------------------
	04.parfait-present
------------------------------------------------*/

.parfait-present{
  background: #e7e3c8 !important;
  min-height: 1000px;
  z-index: 6000;
  margin-top:-80px;
  transform:skew(0deg, -3deg);
}

.parfait-present-inner{
  padding-top: 0px;
  transform:skew(0deg, 3deg);
}

.parfait-present {
  position: relative;
  overflow: hidden;
  /*top:-50%;*/
  z-index: 10000;
	width: 100%;
}

.parfait-present:before {
  content: '';
  position: absolute;
  /*top: -500px;*/
  left: 0;
  width: 120%;
  height:80%;
  margin: 0 0 0 -15%;
  padding-top: 3%;
  background: #e7e3c8 !important;
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  transform: rotate(4deg);
  z-index: -1;
}



.parfait-present-img{
  background: url("../img/uji-only/parfait-img.jpg") no-repeat fixed 0 0 /cover;
  min-height: 500px;
  z-index: -1;
  margin-top:0px;
  padding:0 50px;
  transform:skew(0deg, 2deg);
}

/*------------------------------------------------
	04.uji-only
------------------------------------------------*/

.uji-only{
  background:linear-gradient(90deg,#4a621f 0%,#4a621f 50%,#FFF 50%,#FFF 100%);
  color: #FFF;
  padding-bottom: 50px;
}

.uji-only-marker{
  min-width: 200px;
  max-width: 250px;
  padding: 5px;
  margin: 0 auto;
  background: #67803b;
  display: block;
}


/*------------------------------------------------
	04.open-sale
------------------------------------------------*/

.open-sale-title{
  width: 100%;
  height: 130px;
  display: block;
  background: url("../img/open-sale/open-sale-titlebg.png") no-repeat 0 0;
  padding-top: 20px;
}

.open-sale-presentbox{
  background: #f6f6f6;
  position: relative;
}

.present-label{
  position: absolute;
  top:0;
  left:0;
}

.open-sale-item {
  height: 100%;
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}
.open-sale-item img {
  vertical-align: top;
  -webkit-transition: all 1s ease-out;
  transition: all 1s ease-out;
}
.open-sale-item:hover img,
.open-sale-item.hover img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}




/*------------------------------------------------
	04.shop-only
------------------------------------------------*/

.shop-only{
  position: relative;
  /*background: #e7e3c8 !important;*/
  background: #fff !important;
  z-index: -1;
  margin-top:20px;
  padding:100px 0 0 0;
  transform:skew(0deg, 3deg);
}

.shop-only-inner{
  transform:skew(0deg, -3deg);
}

.shop-only-inner:before{
  content: "";
  position: absolute;
  bottom: -2.5%;
  /*background: #e7e3c8 !important;*/
  background: #fff !important;
  width: 100%;
  display: block;
  height: 500px;
}

.jruji-item{
  background: url("../img/shop-only/jruji-item.jpg") no-repeat fixed 0 center /cover;
  height: 600px;
  z-index: -1;
  margin-top:0px;
  padding:100px 50px;
  transform:skew(0deg, -3deg);
}

.honten-item{
  background: url("../img/shop-only/honten-item.jpg") no-repeat fixed center center /cover;
  height: 600px;
  z-index: -1;
  margin-top:-20px;
  padding:100px 50px;
  transform:skew(0deg, 2deg);
}

.byodoin-item{
  background: url("../img/shop-only/byodoin-item.jpg") no-repeat fixed center center /cover;
  height: 600px;
  z-index: -1;
  margin-top:-20px;
  padding:100px 50px;
  transform:skew(0deg, -2.5deg);
}

.kyoto-item{
  background: url("../img/shop-only/kyoto-item.jpg") no-repeat fixed center center /cover;
  height: 600px;
  z-index: -1;
  margin-top:20px;
  padding:100px 50px;
  transform:skew(0deg, 2deg);
}

.shop-only-item-box{
  width: 100%;
  display: block;
  position:relative;
}

.shop-only-shopname{
  width: 100%;
  display:block;
  top:-20px;
  position: absolute;
}

.shop-only-shopname span{
  width: 30%;
  display: block;
  color: #FFF;
  background: #5b711f;
  font-size: 20px;
  font-weight: 500;
  padding: 5px;
  margin: 0 auto;
}


/*------------------------------------------------
	04.official-sns
------------------------------------------------*/

.official-sns-textIcon{
  width: 100%;
  padding: 10px;
  background: #eeeeee;
  margin-bottom:20px;
}

.official-sns a{
  font-size: 35px;
  padding-right:20px;
}

a.official-sns-fb{color: #3d5a99 !important;}
a.official-sns-tw{color: #4fadf1 !important;}
a.official-sns-ma{color: #b3ae91 !important;}

.official-sns a:last-child{
  padding-right:0px;
}