@charset "utf-8";
/*-----------------------------------------------------------------------------------------
// smart phone
-----------------------------------------------------------------------------------------*/

@media screen and (max-width: 737px) {
  /*========================================================================
  //	html */

  .balloon{
    font-size: 16px !important;
  }

  .balloon:before{
   	margin-left: -5px !important;
  	border: 5px solid transparent !important;
  	border-top: 5px solid #5b711f !important;
  }

  /*========================================================================
  //	space */

  /* common ---------------------------------------------*/

  .sm-br{display: block;}

  /* padding ---------------------------------------------*/


  /*========================================================================
  //	text */

  .sm-text-center{text-align: center !important;}
  .sm-text-left{text-align: left !important;}
  .sm-text-right{text-align: right !important;}

  .text-Leadtext16{font-size: 14px !important; line-height: 1.7 !important;}
  .text-Leadtext18{font-size: 14px !important; line-height: 3 !important;}
  .text-Leadtext20{font-size: 14px !important; line-height: 1.8 !important;}
  .text-Leadtext22{font-size: 14px !important; line-height: 1.8 !important;}

  .text-Leadtext28,.text-Leadtext30,.text-Leadtext35
  {font-size: 18px !important; line-height: 1.8 !important;}

  .text-Leadtext40,.text-Leadtext45,.text-Leadtext-bold45
  {font-size: 22px !important; line-height: 1.8 !important;}

  .text-Leadtext50,.text-Leadtext80
  {font-size: 35px !important; line-height: 1.8 !important;}


  /* align ---------------------------------------------*/
  .sm-text-left{text-align: left !important;}
  .sm-text-center{text-align: center !important;}

  /* border ---------------------------------------------*/

  /* header ---------------------------------------------*/

  /* contents ---------------------------------------------*/

  /*------------------------------------------------
  	01.main-img
  ------------------------------------------------*/
  .main-imgm{
    background: url("../img/main-slide-sp.jpg") no-repeat center -50px !important;
    background-size: cover !important;
  }

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

  .open-info-area_inner {margin-top: 50px;}

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

  .roll-parfait {
    margin-top: 20px;
  }

  .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-parfail/parfait-area-bg.png") no-repeat center bottom;
  }

  .roll-parfait_tooltipArea{
    width: 100%;
    min-width: 640px !important;
  }

/* tool-tip*/
.tipbox {font-size: 16px !important;}

.tip{left: 0;}

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

.tip-right:before{
  content: none;
}

.tip-left:before{margin-right: 20px;}
.tip-left:after {margin-right: 20px;}
.tip-left .fa{font-size: 20px; position: absolute; left: 0; right: -240px;}

.tip-right:before{margin-right: 20px;}
.tip-right:after {margin-right: 20px;}
.tip-right .fa{font-size: 20px; position: absolute; left: 0; right: -240px;}

.tip-text01{width: 270px !important; left: 35px !important; top:150px;}
.tip-text02{width: 270px !important; left: 35px !important; top:260px;}
.tip-text03{width: 270px !important; left: 35px !important; top:350px;}
.tip-text04{width: 270px !important; left: 35px !important; top:400px;}
.tip-text05{width: 270px !important; left: 35px !important; top:500px;}
.tip-text06{width: 270px !important; left: 35px !important; top:550px;}

.jruji-item{
  background: url("../img/shop-only/jruji-item.jpg") no-repeat 0 0 /cover;
  height: 300px;
  z-index: -1;
}

.honten-item{
  background: url("../img/shop-only/honten-item.jpg") no-repeat 50% 0 /cover;
  height: 300px;
  z-index: -1;
}

.byodoin-item{
  background: url("../img/shop-only/byodoin-item.jpg") no-repeat 50% 0 /cover;
  height: 300px;
  z-index: -1;
}

.kyoto-item{
  background: url("../img/shop-only/kyoto-item.jpg") no-repeat 50% 0 /cover;
  height: 300px;
  z-index: -1;
}

.uji-only{
  background:#4a621f;
  color: #FFF;
}

.present-label{
  max-width: 30% !important;
}

.parfait-present{
  /*margin-top: -110px;*/
  margin-top: 0;
}

.shop-only-shopname span{
  width: 50% !important;
}


.open-sale-title{
  background: url("../img/open-sale/open-sale-titlebg.png") no-repeat 0 10px;
  height: auto !important;
  background-size:contain;
  padding-top: 0;
}

/**/
}

@media all and (max-width: 321px) and (orientation: portrait) {

  /* tool-tip*/
  .tipbox {font-size: 12px !important;}

.roll-parfait_tooltipArea{
  width: 100%;
  min-width: 540px !important;
}

.tip-left .fa,
.tip-right .fa{font-size: 20px; position: absolute; left: 0; right: -200px;}

.tip-text01{width: 210px !important; left: 20px; top:150px;}
.tip-text02{width: 210px !important; left: 20px; top:230px;}
.tip-text03{width: 240px !important; left: 20px; top:300px;}
.tip-text04{width: 240px !important; left: 20px; top:360px;}
.tip-text05{width: 240px !important; left: 20px; top:420px;}
.tip-text06{width: 240px !important; left: 20px; top:470px;}

/**/
}


/*-----------------------------------------------------------------------------------------
// landscape & portrait
-----------------------------------------------------------------------------------------*/

/* スマホ横*/
@media all and (max-width: 737px) and (orientation: landscape) {}


/* スマホ縦*/
@media all and (max-width: 737px) and (orientation: portrait) {}

/*-----------------------------------------------------------------------------------------
// tablet only
-----------------------------------------------------------------------------------------*/

@media screen and (min-width: 737px) and (max-width: 1024px) {}

/*-----------------------------------------------------------------------------------------
// tablet landscape & portrait
-----------------------------------------------------------------------------------------*/

/* タブレット横 */

@media screen and (min-width: 737px) and (max-width: 1024px) and (orientation: landscape) {}

/* タブレット縦 */

@media screen and (min-width: 737px) and (max-width: 1024px) and (orientation: portrait) {}

/*-----------------------------------------------------------------------------------------
// tablet up 7inch ～ pc
-----------------------------------------------------------------------------------------*/

@media screen and (min-width: 737px) {

  .mdlg-ext-center{text-align: center !important;}
  .mdlg-text-left{text-align: left !important;}
  .mdlg-text-right{text-align: right !important;}

}

/*-----------------------------------------------------------------------------------------
// pc only
-----------------------------------------------------------------------------------------*/

@media screen and (min-device-width: 1300px) {

}