@charset "utf-8";

/*====================================================================================================

  TOP

====================================================================================================*/

/*----------------------------------------------------------------------------------------------------

  Main visual
  
----------------------------------------------------------------------------------------------------*/

.mainVisual {
  background:url(../image/mainvisual/bgR.png) no-repeat 50% 20px;
  position:relative;
  z-index:99;
  overflow:hidden;
}
  
.mainVisual:before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:url(../image/mainvisual/bgL.png) no-repeat 50% bottom;
}

.mv-photo {
  width:1260px;
  height:880px;
  position:relative;
  margin-left:auto;
  margin-right:auto;
}

.mv-photo:before {
  content:"";
  background:url(../image/mainvisual/mv-logo.png) no-repeat center top;
  background-size:contain;
  width:260px;
  height:220px;
  position:absolute;
  right:110px;
  top:120px;
}

.mv-photoB {
  position:absolute;
  left:40px;
  top:0;
  overflow:hidden;
}

.mv-photoB,
.mv-slideB__item,
.mv-photoB .photo-bg {
  width:700px !important;
  height:800px !important;
}

.mv-photoS {
  position:absolute;
  right:40px;
  bottom:0;
  overflow:hidden;
}

.mv-photoS,
.mv-slideS__item,
.mv-photoS .photo-bg {
  width:400px!important;
  height:460px!important;
}

.mainVisual .photo-item {
  width:100%;
  height:100%;
  position:relative;
}

.mainVisual .photo-bg {
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  z-index:-1;
}

.mv-photoB .clipped {
  -webkit-clip-path:url("#mv-photoB");
  clip-path:url("#mv-photoB");
}

.mv-photoS .clipped {
  -webkit-clip-path:url("#mv-photoS");
  clip-path:url("#mv-photoS");
}

.mainVisual .slick-slider {
  position:absolute;
}

@media screen and (min-width:641px) and (max-width:1280px) {
  .mainVisual,
  .mainVisual:before {
    background-size:cover;
  }
}

@media print,screen and (min-width:641px) {
  .mainVisual {
    margin-bottom:100px;
    margin-top:-20px;
  }
}

@media screen and (max-width:640px) {
  .mainVisual {
    margin-bottom:3.5em;
    padding-top:2.5em;
    background-size:auto 84%;
    overflow:hidden;
  }
  
  .mainVisual:before {
    background-size:auto 84%;
  }
    
  .mv-photo { width:1280px; }
  
  .mv-photo:before {
    width:300px;
    height:260px;
    top:60px;
    right:105px;
  }
    
  .mv-photoB { left:60px; }
  .mv-photoS { right:60px; }
}


/*----------------------------------------------------------------------------------------------------

  お知らせ
  
----------------------------------------------------------------------------------------------------*/

.sec-info {
  background-color:rgba(160,130,60,0.15);
}

.info-ttl {
  background:url(../image/info-ttl.png) no-repeat center top;
  background-size:contain;
}

.info {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  text-align:left;
}

.info a,
.info a:visited,
.info a:hover { color:inherit; text-decoration:none; }
.ua-pc .info-list li a:hover .ttl { text-decoration:underline; }

.info-left {
  position:relative;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}

.info-slide {
  overflow:hidden;
  -webkit-flex:1;
  flex:1;
}

.info-list {
  list-style:none;
  opacity:0;
}

.info-list.slick-initialized {
  opacity:1;
}

.info-list li {
  line-height:1.6;
}

.info-list li a {
  display:block;
}

.info-list li .photo {
  background-color:rgba(255,255,255,0.4);
}

.info-list li .date {
  color:#bea037;
  font-size:0.88em;
  display:inline-block;
  margin-top:1em;
  margin-bottom:0.25em;
}

@media print,screen and (min-width:1281px) {
  .info-slide {
    padding-left:80px;
  }
}

@media print,screen and (min-width:1015px) and (max-width:1280px) {
  .info-slide {
    padding-left:calc(80 / 1280 * 100vw);
  }
}

@media print,screen and (min-width:641px) and (max-width:1014px) {
  .info-slide {
    padding-left:60px;
  }
}

@media print,screen and (min-width:641px) {
  .sec-info {
    padding-bottom:100px;
  }
  
  .info-left {
    width:130px;
  }
  
  .info-ttl {
    width:120px;
    height:275px;
    position:absolute;
    left:-22px;
    top:-60px;
  }
  
  .info-slide {
    padding-top:80px;
  }
  
  .info-list {
    margin-right:-30px;
  }
  
  .info-list li {
    margin-right:30px;
  }

  .info-list li .photo {
    height:260px;
  }
}

@media screen and (max-width:640px) {
  .sec-info {
    padding-bottom:3em;
  }
  
  .info-left {
    width:7em;
    padding-left:0.5em;
    min-height:-webkit-calc(400 / 640 * 100vw);
    min-height:calc(400 / 640 * 100vw);
  }
  
  .info-ttl {
    width:5.5em;
    height:100%;
    position:absolute;
    left:0;
    top:-webkit-(-1 * 80 / 800 * 100vw);
    top:calc(-1 * 80 / 800 * 100vw);
  }
  
  .info-slide {
    padding-top:2.5em;
    width:100%;
  }
  
  .info-list li {
    margin-left:1em;
    margin-right:1em;
    transition:opacity 0.2s ease;
  }

  .info-list li .photo {
    height:-webkit-calc(260 / 640 * 100vw);
    height:calc(260 / 640 * 100vw);
  }
  
  .info-list li:not(.is-active) {
    opacity:0.4;
  }
}

@media screen and (max-width:560px) {
  .info-list li .photo {
    height:-webkit-calc(200 / 560 * 100vw);
    height:calc(200 / 560 * 100vw);
  }
  
  .info-list li {
    margin-left:0.5em;
    margin-right:0.5em;
  }
}

@media screen and (max-width:440px) {
  .info-list {
    margin-left:-18%;
  }
  
  .info-list li {
    margin-right:1em;
  }
}


/*-----------------------------------------------------------------------------------
  arrows
-----------------------------------------------------------------------------------*/

.info-arrow { align-self:flex-end; white-space:nowrap; margin-bottom:-0.5em; }
.info-arrow__prev { margin-right:1px; }
.info-arrow__next { margin-left:1px; }

@media print,screen and (min-width:641px) {
  .info[data-item="1"] .info-arrow,
  .info[data-item="2"] .info-arrow,
  .info[data-item="3"] .info-arrow {
    display:none;
  }
}

@media screen and (max-width:640px) {
  .info[data-item="1"] .info-arrow {
    display:none;
  }
}


/*-----------------------------------------------------------------------------------
  more
-----------------------------------------------------------------------------------*/

.info-more {
  white-space:nowrap;
  position:absolute;
}

.info-more .p-lineLink {
  padding-left:0.85em;
  padding-right:0.25em;
}

@media print,screen and (min-width:641px) {
  .info-more {
    top:300px;
    left:0;
  }
}

@media screen and (max-width:640px) {
  .info-more {
    bottom:6em;
    left:0.5em;
  }
}

@media screen and (max-width:560px) {
  .info-more {
    bottom:calc(95 / 560 * 100vw);
  }
}


/*----------------------------------------------------------------------------------------------------

  facebook instagram
  
----------------------------------------------------------------------------------------------------*/

.sec-sns {
  text-align:left;
}

.snsList {
  list-style:none;
  line-height:1.4;
}

.snsList li:not(:first-child) {
  margin-top:1em;
}

.snsList a {
  display:block;
  text-align:left;
  background-color:rgba(255,255,255,0.7);
  border:0;
}

.ua-pc .snsList a:hover {
  color:#fff;
  background-color:#a0823c;
}

/* 矢印アイコン */
.ua-pc .snsList a:hover .p-arrow:after {
  border-top-color:#fff;
  border-right-color:#fff;
}

.snsList li a:before {
  content:"";
  width:1.2em;
  height:1.2em;
  display:inline-block;
  vertical-align:middle;
  margin-bottom:0.2em;
  margin-right:1em;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:contain;
}

.snsList li.fb a:before {
  background-image:url(../image/icon/fb.svg);
}

.snsList li.insta a:before {
  background-image:url(../image/icon/insta.svg);
}

.ua-pc .snsList li.fb a:hover:before {
  background-image:url(../image/icon/fb_white.svg);
}

.ua-pc .snsList li.insta a:hover:before {
  background-image:url(../image/icon/insta_white.svg);
}

.fb-page-wrap {
  width:100%;
  height:500px;
  overflow:hidden;
}

.fb-page-wrap .fb-page {
  margin-left:auto;
  margin-right:auto;
}

@media print,screen and (min-width:641px) {
  .sec-sns {
    max-width:1060px;
    padding-top:80px;
    padding-bottom:80px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
  }
  
  .sns {
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1;
    padding-right:6.8%;
    padding-top:1.5em;
  }
  
  .sns p {
    line-height:2.2;
  }
  
  .snsList {
    padding-top:5em;
  }
  
  .snsList a {
    padding:1.25em 1.5em !important;
  }
  
  .fb-page-wrap {
    width:500px;
    -webkit-box-ordinal-group:2;
    -ms-flex-order:1;
    order:1;
  }
}

@media screen and (max-width:640px) {
  .sec-sns {
    padding-top:2.5em;
    padding-bottom:3em;
  }
  
  .sns {
    padding-top:2.25em;
  }
  
  .snsList {
    padding-top:2em;
  }
  
  .snsList a {
    padding:1em 1.5em !important;
  }
  
  .fb-page-wrap {
    width:100%;
    text-align:center;
  }
}


/*----------------------------------------------------------------------------------------------------

  ショッピング
  
----------------------------------------------------------------------------------------------------*/

.sec-shopping {
  background:url(../image/shopping-bg.jpg) no-repeat center center;
}

.shopping-ttl {
  background:url(../image/shopping-ttl.png) no-repeat center center;
  background-size:contain;
  margin-left:auto;
  margin-right:auto;
}

.shopping {
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
  position:relative;
}

.shopping__cont {
  background:url(../image/pattern/sayagata_green.gif) repeat center top;
  color:#fff;
  position:relative;
  padding-left:2em;
  padding-right:2em;
}

.shopping__cont .p-btn {
  width:50%;
  min-width:200px;
}

@media print,screen and (min-width:641px) {
  .sec-shopping {
    padding-top:80px;
    padding-bottom:120px;
  }
  
  .shopping-ttl {
    width:460px;
    height:110px;
  }
  
  .shopping {
    margin-top:70px;
  }

  .shopping:before {
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    background:url(../image/shopping-photo.jpg) no-repeat center bottom;
  }
  
  .shopping__cont {
    width:480px;
    padding-top:70px;
    padding-bottom:80px;
  }

  .shopping__cont p {
    padding-top:1.5em;
    padding-bottom:2.5em;
  }
}

@media screen and (max-width:640px) {
  .sec-shopping {
    background-position:center bottom;
    background-size:cover;
    padding:3em 0 3.5em 0;
  }
  
  .shopping-ttl {
    width:100%;
    height:5em;
  }
  
  .shopping {
    margin-top:2.5em;
    max-width:480px;
  }

  .shopping:before {
    content:"";
    width:100%;
    height:-webkit-calc(320 / 800 * 100vw);
    height:calc(320 / 800 * 100vw);
    max-height:220px;
    display:block;
    background:url(../image/shopping-photo.jpg) no-repeat right bottom;
    background-size:150% auto;
  }
  
  .shopping__cont {
    padding-top:2em;
    padding-bottom:3em;
  }

  .shopping__cont p {
    padding-top:1em;
    padding-bottom:2em;
  }
}

@media screen and (max-width:560px) {
  .shopping__cont p {
    font-size:0.9em;
  }
}


/*----------------------------------------------------------------------------------------------------

  店舗紹介
  
----------------------------------------------------------------------------------------------------*/

.sec-shop {
  width:100%;
  background:url(../image/shop-bgR.png) no-repeat 50% top;
  position:relative;
  overflow-x:hidden;
}

.shop {
  width:100%;
  overflow:hidden;
}

.shop__cont {
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
  position:relative;
}

@media print,screen and (min-width:641px) {
  .shop {
    background:url(../image/shop-bgL.png) no-repeat 50% bottom;
    padding-left:40px;
    padding-right:40px;
  }
  
  .shop__cont {
    margin-top:100px;
    padding-bottom:100px;
  }
  
  .shop__cont:after {
    content:"";
    width:15%;
    height:0;
    padding-top:16%;
    display:block;
    background:url(../image/shop-teapot.png) no-repeat center top;
    background-size:contain;
    position:absolute;
    right:0;
    bottom:90px;
  } 
}

@media print,screen and (min-width:641px) and (max-width:1280px) {
  .sec-shop {
    background-size:160% auto;
  }
  
  .shop {
    background-size:160% auto;
  }
}

@media screen and (max-width:640px) {
  .sec-shop {
    background-position:right 1.5em top 1em;
    background-size:250% auto;
    padding-top:-webkit-calc(125 / 640 * 100vw  + 1em);
    padding-top:calc(125 / 640 * 100vw  + 1em);
  }
}


/* 三角背景
----------------------------------------------------------------------*/

.shop__cont .triangleL,
.shop__cont .triangleR {
  content:"";
  display:block;
  width:0;
  height:0;
  position:absolute;
  border-style:solid;
  z-index:-1;
}

.shop__cont .triangleL {
  border-color:transparent transparent transparent rgba(255,255,255,0.3);
  left:-webkit-calc(50% - 1000px);
  left:calc(50% - 1000px);
  border-width:575px 0 0 1000px;
}

.shop__cont .triangleR {
  border-color:transparent transparent rgba(255,255,255,0.3) transparent;
  right:-webkit-calc(50% - 1000px);
  right:calc(50% - 1000px);
  border-width:0 0 575px 1000px;
}

@media print,screen and (min-width:641px) {
  .shop__cont .triangleL,
  .shop__cont .triangleR {
    bottom:-40px;
  }
}

@media screen and (max-width:640px) {
  .shop__cont .triangleL,
  .shop__cont .triangleR {
    bottom:0;
  }
}


/* タイトル・創業
----------------------------------------------------------------------*/

.shop-ttl {
  background:url(../image/shop-ttl.png) no-repeat center top;
  background-size:contain;
}

.shop-est {
  background:url(../image/shop-est.png) no-repeat center top;
  background-size:contain;
}

@media print,screen and (min-width:641px) {
  .shop-ttl {
    width:7em;
    height:100%;
    position:absolute;
    right:2%;
    top:5%;
  }
  
  .shop-est {
    width:11.6%;
    height:0;
    padding-top:11.6%;
    position:absolute;
    right:18%;
    top:10%;
  }
}

@media screen and (max-width:640px) {
  .shop-ttl {
    width:-webkit-calc(122 / 800 * 100vw);
    height:-webkit-calc(400 / 800 * 100vw);
    width:calc(122 / 800 * 100vw);
    height:calc(400 / 800 * 100vw);
    position:absolute;
    right:2.5em;
    top:-webkit-calc(490 / 640 * 100vw);
    top:calc(440 / 640 * 100vw);
  }
  
  .shop-est {
    width:-webkit-calc(120 / 640 * 100vw);
    height:-webkit-calc(120 / 640 * 100vw);
    width:calc(120 / 640 * 100vw);
    height:calc(120 / 640 * 100vw);
    position:absolute;
    right:calc(120 / 640 * 100vw);
    top:calc(410 / 640 * 100vw);
  }
}

@media screen and (max-width:560px) {
  .shop-ttl {
    right:2em;
  }
}


/* 写真
----------------------------------------------------------------------*/

.shop-photo01,
.shop-photo02 {
  line-height:1;
}

@media print,screen and (min-width:641px) {
  .shop-photo01 {
    width:50%;
    position:absolute;
    left:0;
    top:0;
    z-index:2;
  }
  
  .shop-photo02 {
    width:33.3%;
    position:absolute;
    left:45%;
    top:35%;
    z-index:1;
  }
  
  .shop__cont:before {
    content:"";
    width:200px;
    height:-webkit-calc(100% - 150px);
    height:calc(100% - 250px);
    position:absolute;
    left:56%;
    top:150px;
    background:url(../image/pattern/tatenami.svg) repeat center top;
    background-size:auto 10px;
  }
}

@media print,screen and (min-width:641px) and (max-width:1200px) {
  .shop__cont:before {
    width:180px;
  }
}

@media screen and (max-width:640px) {
  .shop-photo01 {
    padding-left:1.5em;
    padding-right:1.5em;
  }
  
  .shop-photo02 {
    width:50%;
    padding-top:1.5em;
    padding-left:1.5em;
  }
}


/* メッセージ
----------------------------------------------------------------------*/

.shop-msg__dname {
  display:block;
  background:url(../image/shop-dname.png) no-repeat center bottom;
  background-size:contain;
  width:3.5em;
  height:100%;
  margin-right:2.5em;
}

@media print,screen and (min-width:641px) {
  .shop-msg {
    width:40%;
    padding-top:38%;
    text-align:right;
    line-height:2;
  }
}

@media screen and (max-width:640px) {
  .shop-msg {
    text-align:center;
    padding-right:-webkit-calc(100 / 640 * 100vw + 1.5em);
    padding-right:calc(100 / 640 * 100vw + 1.5em);
    padding-top:3em;
  }
}

@media screen and (max-width:560px) {
  .shop-msg__dname {
    margin-right:1.5em;
  }
}

@media screen and (max-width:480px) {
  .shop-msg {
    font-size:3.1vw;
  }
}


/* 下部・ボタン
----------------------------------------------------------------------*/

.shop-btm {
  width:100%;
  background-color:rgba(255,255,255,0.3);
  position:relative;
}

.shop-btm .p-btn {
  width:50%;
  max-width:240px;
  min-width:200px;
}

@media print,screen and (min-width:641px) {
  .shop-btm {
    padding-bottom:120px;
  }
}

@media screen and (max-width:640px) {
  .shop-btm {
    padding-top:3em;
    padding-bottom:3.5em;
  }
}


/*----------------------------------------------------------------------------------------------------

  お支払いについて
  
----------------------------------------------------------------------------------------------------*/

.sec-payment {
  position:relative;
}

.sec-payment:before {
  content:"";
  width:100%;
  display:block;
  background:url(../image/pattern/tatenami.svg) repeat center top;
  background-size:auto 10px;
}

.payment-ttl {
  width:100%;
  height:3.6em;
  background:url(../image/payment-ttl.png) no-repeat center center;
  background-size:auto 1.3em;
  position:relative;
  padding-top:1em;
}

.payment-ttl:before,
.payment-ttl:after {
  content:"";
  width:17em;
  height:1px;
  display:block;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  background:url(../image/pattern/hasen.svg) repeat center top;
  background-size:contain;
}

.payment-ttl:before { top:0; }
.payment-ttl:after { bottom:0; }

@media print,screen and (min-width:641px) {
  .sec-payment {
    padding-bottom:100px;
  }
  
  .sec-payment:before {
    height:80px;
  }
  
  .payment-ttl {
    margin-top:90px;
  }
}

@media screen and (max-width:640px) { 
  .sec-payment {
    padding-bottom:3.5em;
  }
  
  .sec-payment:before {
    height:-webkit-calc(80 / 800 * 100vw);
    height:calc(80 / 800 * 100vw);
    background-size:auto 8px;
  }
  
  .payment-ttl {
    margin-top:3.5em;
  }
}


/* クレジットカード
----------------------------------------------------------------------*/

.payment-cc .ccList {
  list-style:none;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  padding-top:1em;
}

.payment-cc .ccList li {
  padding-left:0.5em;
  padding-right:0.5em;
  padding-top:1em;
}

@media print,screen and (min-width:641px) {
  .payment-cc {
    padding-top:50px;
    padding-bottom:60px;
  }

  .payment-cc .ccList li img {
    max-height:40px;
  }
}

@media screen and (max-width:640px) {
  .payment-cc {
    padding-top:2.5em;
    padding-bottom:3em;
  }
  
  .payment-cc .ccList {
    padding-left:1em;
    padding-right:1em;
  }
  
  .payment-cc .ccList li img {
    height:-webkit-calc(40 / 640 * 100vw);
    height:calc(40 / 640 * 100vw);
    max-height:35px;
  }
}


/*--------------------------------------------------------------------------------
  支払い方法
--------------------------------------------------------------------------------*/

.payment-pay {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:justify;
  -ms-flex-pack:justify;
  justify-content:space-between;
}

.payment-pay dl {
  background-color:rgba(255,255,255,0.7);
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
}

.payment-pay dt {
  color:#fff;
  padding:0.4em 1em 0.6em 1em;
  font-weight:600;
}

.payment-pay .daibiki dt { background:url(../image/pattern/bg_green.jpg) repeat center top; }
.payment-pay .web dt { background:url(../image/pattern/bg_red.jpg) repeat center top; }

.payment-pay dd {
  padding:2.5em 1.5em 3em 1.5em;
  font-size:0.9em;
  width:100%;
  height:100%;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
  text-align:center;
}

.payment-pay dd img {
  max-height:2.25em;
}

.payment-pay dd p {
  padding-top:1.5em;
  padding-bottom:2em;
}

.payment-pay dd .p-btn {
  margin-top:auto;
}

@media print,screen and (min-width:641px) {
  .payment-pay dl {
    width:50%;
  }
  
  .payment-pay .daibiki {
    border-right:1px solid rgba(160,130,60,0.15);
  }
}

@media screen and (max-width:640px) {
  .payment-pay {
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
  }
  
  .payment-pay .daibiki {
    margin-bottom:1.5em;
  }
}