@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************************************************

  基本設定（共通）

************************************************************************/

.pc{display: block;}
.sp{display: none;}

ul{list-style: none; padding-left: 0;}

a{text-decoration: none;}

button{
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}

.main{
  padding: 0;
}

.content{
  margin: 0 auto;
}

.cf::after{
  content: none;
}

.sec{
  width: 100%;
  padding: 120px 0;
  margin: 0 auto;
}

.sec-wide{
  position: relative;
  width: 100vw;
  padding: 120px 0;
  margin: 0 auto;
  margin-left: calc(50% - 50vw);
  z-index: 1;
}

.sec-wide .inner{
  position: relative;
  width: 90%;
  max-width: 1196px;
  margin: 0 auto;
}

.sec-title{
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  color: #33170e;
}

.sec-title span{
  font-size: 0.3em;
  font-weight: 400;
  display: inline-block;
  margin-left: 2em;
}

.link-btn,
.link-btn2{
  position: relative;
  font-size: 16px;
}

.link-btn a,
.link-btn2 a{
  background: #33170e;
  color: #fff;
  text-decoration: none;
  padding: 0.8em 3em 0.8em 5em;
  display: inline-block;
  transition: ease-in-out 0.5s;
}

.link-btn::before,
.link-btn2::before{
  position: absolute;
  top: 0.8em;
  left: 3em;
  color: #fff;
  font-size: 1em;
}

.link-btn:hover a,
.link-btn2:hover a{
  background: #949593;
}

.readtext{
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
}

.mt2{margin-top: 2em;}
.mt3{margin-top: 3em;}

.fa-file:before,
.fa-folder:before{
  content:"/";
}

.fa-home:before{
  content:"";
}

.breadcrumb-home .fa-fw{
  width: 0;
}

#breadcrumb span.sp{
  display: none!important;
}


/* ふわっと */
.ex{
  opacity: 0;
  transform: translateY(10%);
  transition: 1.4s ease 0.1s;
}
.ex.active{
  opacity: 1;
  transform: translateY(0);
}

ul .ex:nth-of-type(4n+2){transition: 1.4s ease 0.4s;}
ul .ex:nth-of-type(4n+3){transition: 1.4s ease 0.7s;}
ul .ex:nth-of-type(4n+4){transition: 1.4s ease 1.0s;}

@media screen and (max-width: 834px){
  ul .ex:nth-of-type(2n+2){transition: 1.4s ease 0.4s;}
  ul .ex:nth-of-type(4n+3){transition: 1.4s ease 0.1s;}
  ul .ex:nth-of-type(4n+4){transition: 1.4s ease 0.4s;}
}

@media screen and (max-width: 480px){
  ul .ex:nth-of-type(2n+2){transition: 1.4s ease 0.1s;}
  ul .ex:nth-of-type(4n+3){transition: 1.4s ease 0.1s;}
  ul .ex:nth-of-type(4n+4){transition: 1.4s ease 0.1s;}
}

.grecaptcha-badge{
  display: none!important;
}


/************************************************************************

  ヘッダー

************************************************************************/

.header-container{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 10;
  background: none;
  padding: 30px 0;
}

.header-container-in{
  width: calc(100% - 60px);
  /* max-width: 1196px; */
  margin: 0 auto;
}

.header{
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  z-index: 10;
}

.menu-btn{
  position: relative;
  width: 45px;
  height: 45px;
  /* background: #ccc; */
  cursor: pointer;
  /* margin-top: 10px; */
}

.menu-btn span{
  display: block;
  width: 100%;
  height: 5px;
  /* background: #FFA488; */
  background: #fff;
  mix-blend-mode: multiply;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.menu-btn span::before,
.menu-btn span::after{
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 5px;
  /* background: #FFA488; */
  background: #fff;
  display: block;
}

.menu-btn span::before{
  top: -18px;
}

.menu-btn span::after{
  bottom: -18px;
}

.menu-btn.active span,
.menu-btn.active span::before,
.menu-btn.active span::after{
  /* background: #FFA488; */
  background: #949593;
}

.header-menu{
  font-size: 20px;
  position: absolute;
  top: 0;
  right: 0;
  width: 18em;
  max-width: 100%;
  height: 100vh;
  padding: 120px 2em 0 2em;
  box-sizing: border-box;
  background: #33170e;
  z-index: 5;
  transform: translateX(101%);
  transition: linear 0.2s 0.3s;
}
.header-menu.active{
  transform: translateX(0);
  transition: linear 0.2s;
}

.menu{
  transform: translateY(5%);
  opacity: 0;
  transition: linear 0.3s;
}
.active .menu{
  transform: translateY(0);
  opacity: 1;
  transition: linear 0.3s 0.2s;
}

.header-menu li{
  margin-bottom: 1em;
}

.header-menu li a{
  position: relative;
  color: #fff;
  width: 11em;
  display: inline-block;
  padding-bottom: 0.1em;
}

.header-menu li a::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #FFA488;
  transform-origin: top right;
  transform: scale(0,1);
  transition:transform ease 0.3s;
}

.header-menu li a:hover::after{
  transform-origin: top left;
  transform: scale(1,1);
}

.header-menu li a::before{
  content: "\f101";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  margin-right: 0.5em;
}

.header-menu-back{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
  opacity: 0;
  z-index: 4;
  pointer-events: none;
}

.header-menu-back.active{
  pointer-events: all;
}

.sns{
  display: block;
  width: 45px;
  height: 45px;
  background: url(img/icon-insta-a.webp)no-repeat center / contain;
  /* margin-top: 5px; */
  margin-right: 30px;
}

.sns.active{
  background: url(img/icon-insta-b.webp)no-repeat center / contain;
}

.sns:hover{
  opacity: 0.5;
}

body:not(.home) .sns{
  background: url(img/icon-insta-c.webp)no-repeat center / contain;
}

body:not(.home) .sns.active2{
  background: url(img/icon-insta-a.webp)no-repeat center / contain;
}

body.woocommerce-shop .sns{
  background: url(img/icon-insta-a.webp)no-repeat center / contain;
}

body.woocommerce-shop .sns.active{
  background: url(img/icon-insta-c.webp)no-repeat center / contain;
}

/* 商品ページ以外 */
.page-id-123 .sns,
.page-id-125 .sns,
.page-id-128 .sns,
.page-id-130 .sns,
.page-id-132 .sns,
.page-id-367 .sns,
.page-id-368 .sns,
.page-id-3 .sns{
  display: none;
}

.page-id-123 .common-logo,
.page-id-125 .common-logo,
.page-id-128 .common-logo,
.page-id-130 .common-logo,
.page-id-132 .common-logo,
.page-id-367 .common-logo,
.page-id-368 .common-logo,
.page-id-3 .common-logo{
  height: 1.65em;
}

.page-id-123 .dammy-space,
.page-id-125 .dammy-space,
.page-id-128 .dammy-space,
.page-id-130 .dammy-space,
.page-id-132 .dammy-space,
.page-id-367 .dammy-space,
.page-id-368 .dammy-space,
.page-id-3 .dammy-space{
  height: 105px;
}


/************************************************************************

  フッター

************************************************************************/

.footer{
  width: 100vw;
  background: #33170e;
  margin-left: calc(50% - 50vw);
  padding: 60px 0 10px;
  color: #fff;
  font-size: 14px;
}

.footer-in{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1em;
  width: calc(100% - 60px);
}

.footer p,
.footer a{
  font-weight: 300;
  color: #fff;
}

.cr{
  text-align: center;
  font-size: 12px;
  font-weight: 300;
  color: #fff;
}

.footer img{
  width: 20em;
  height: auto;
  margin-bottom: 1em;
}

.footer-menu{
  display: flex;
  align-items: flex-start;
}

.footer-menu ul{
  margin-left: 3em;
}

.footer-menu ul li{
  margin-bottom: 0.5em;
}

.footer .fa-angle-right:before{
  color: #fff;
}

.footer-menu ul a{
  margin-left: 0.5em;
}

.footer-menu ul a:hover{
  text-decoration: underline;
}


/************************************************************************

  フロントページ

************************************************************************/

.top{
  position: relative;
  width: 100vw;
  height: 56.25vw;
  max-height: 100vh;
  /* background: #ccc; */
  margin-left: calc(50% - 50vw);
}

.slide01,.slide02,.slide03,.slide04{
  width: 100%;
  height: 100%;
}

.slide01{ background: url(img/front-slide01.webp)no-repeat center / cover;}
.slide02{ background: url(img/front-slide02.webp)no-repeat center / cover;}
.slide03{ background: url(img/front-slide03.webp)no-repeat center / cover;}
.slide04{ background: url(img/front-slide04.webp)no-repeat center / cover;}

.slide-text{
  position: absolute;
  right: 5%;
  bottom: 5%;
  font-size: 4vw;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 0 0.3em rgba(0, 0, 0, 0.5);
}


.top-logo{
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: auto;
  transform: translate(5%,15%);
  mix-blend-mode: difference;
}

/* 以下splide用--------------------------------------------------------- */

.splide{
  width: 100%;
  height: 100%;
}

.splide__track{
  width: 100%;
  height: 100%;
}

.splide__slide .slide-img {
  position: relative;
  transition: 7s 1s ease-out;
}
 
.splide__slide[class*=-active] .slide-img {
  transition-delay: 0s;
  transform: scale(1.05);
}
 
.splide__slide[class*=-active] .slide-text {
  animation: mv01-fadeIn 2s 0.5s var(--easing) both;
}
 
@keyframes mv01-fadeIn {
  0% {
    transform: scale(0.5);
    opacity: 0;
    filter: blur(300px);
  }
 
  100% {
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
  }
}


/* ページネーションの位置 */
.my-pagination {
  position: absolute;
  left: 30px;
  bottom: 30px;
  padding: 0;
  display: block;
}

/* ページネーションのスタイル */
.my-page {
  background-color: #ccc;
  height: 30px;
  transition: .5s all;
  width: 5px;
  display: block;
}
/* 現在表示されているページネーションのスタイル */
.my-page.is-active {
  background-color: #33170e;
  opacity: 1;
}

/* ページネーション間の余白 */
.my-pagination li {
  margin-left: 5px;
  margin-right: 5px;
  display: block;
}


/* ここまでsplide用--------------------------------------------------------- */




#news{
  text-align: center;
}

.news-wrap{
  font-size: 16px;
  width: 100%;
  padding: 3em 0;
  /* background: #ccc; */
}

.news-wrap ul{
  width: auto;
  margin: 0 auto;
  display: inline-block;
  text-align: left;
}

.news-wrap ul li{
  list-style: none;
  display: inline-block;
  margin: 0 auto 1em;
}

.news-wrap ul li:last-of-type{
  margin-bottom: 0;
}

.news-wrap ul li a{
  position: relative;
  display: flex;
  color: #33170e;
  text-decoration: none;
  align-items: center;
  padding-bottom: 0.2em;
}

.news-wrap ul li a .date{
  font-size: 0.85em;
  font-weight: 300;
  width: 9em;
  color: #aaa;
}

.news-wrap ul li a::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #FFA488;
  transform-origin: right top;
  transform: scale(0,1);
  transition: transform 0.3s ease;
}

.news-wrap ul li a:hover::after{
  transform-origin: left top;
  transform: scale(1,1);
}

#about{
  /* background: url(img/front-img02.webp)no-repeat center / cover; */
  text-align: center;
}
#about::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(img/front-img02.webp)no-repeat center / cover;
  opacity: 0.2;
  z-index: -1;
}

#about .sec-title{
  font-size: 40px;
}
#about .sec-title span{
  margin-left: 0;
  font-size: 0.4em;
}

#entremets{
  background: #eee;
}


#petit-gateau{background: url(img/front-img05.webp)no-repeat center / cover;}
#entremets{background: url(img/front-img06.webp)no-repeat center / cover;}
#baked-sweets{background: url(img/front-img03.webp)no-repeat center / cover;}
#frozen-sweets{background: url(img/front-img07.webp)no-repeat center / cover;}
#cafe{background: url(img/front-img04.webp)no-repeat center / cover;}

.sec-textbox,
.sec-textbox3{
  display: inline-block;
  position: relative;
  z-index: 1;
}

.flex-right{
  display: flex;
  justify-content: flex-end;
}

.flex-wide{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#access .inner{
  text-align: center;
}

#access .sec-title span{
  margin-left: 0;
}

.google-map-wrap{
  width: 100%;
  aspect-ratio: 3/1;
  margin: 60px auto 10px;
}

.google-map-wrap iframe{
  width: 100%;
  height: 100%;
}

.sec-textbox2{
  position: relative;
  display: inline-block;
  z-index: 1;
}

.sec-textbox::after,
.sec-textbox2::after{
  content: '';
  position: absolute;
  top: -120px;
  left: -40px;
  width: 100%;
  height: 100%;
  padding: 120px 40px;
  background: #fff;
  opacity: 0.7;
  z-index: -1;
}








/************************************************************************

  個別ページ用

************************************************************************/

.sec01{
  position: relative;
  width: 100vw;
  height: 50vw;
  max-height: 80vh;
  background: #ccc;
  margin-left: calc(50% - 50vw);
}

body:not(.home) .menu-btn span,
body:not(.home) .menu-btn span::before,
body:not(.home) .menu-btn span::after{
  background: #33170e;
}

body:not(.home) .menu-btn.active2 span,
body:not(.home) .menu-btn.active2 span::before,
body:not(.home) .menu-btn.active2 span::after{
  background: #fff;
}

/* body:not(.home) .menu-btn::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  padding: 20%;
  transform: translate(-50%,-50%);
  background: rgba(255, 255, 255, 0.7);
} */
body:not(.home) .menu-btn.active2::before{
  background: none;
}

.sec01 .inner{
  position: relative;
  width: 90%;
  height: 100%;
  max-width: 1196px;
  margin: 0 auto;
}

.sec01 .text-wrap{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.sec01.right .text-wrap{
  left: auto;
  right: 0;
}

.sec01 p {
  color: #fff;
}

.sec01 .sec-title{
  color: #fff;
  font-size: 60px;
}

.sec01 .brown .sec-title{
  color: #33170e;
}

.sec01 .brown p{
  color: #33170e;
}

.sec02{
  width: 100%;
  padding: 60px 0;
}

.item-wrap{
  font-size: 16px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.itembox{
  position: relative;
  width: 25%;
  box-sizing: border-box;
  padding: 1em;
  background: #fff;
  cursor: pointer;
}

.itembox::after{
  position: absolute;
  top: 0;
  left: 0;
  width: 27%;
  max-width: 81px;
  aspect-ratio: 1/1;
  transform: translate(-1%,3%);
}
.itembox.icon01::after{
  content: '';
  background: url(img/icon01.webp)no-repeat center / contain;
}
.itembox.icon02::after{
  content: '';
  background: url(img/icon02.webp)no-repeat center / contain;
}
.itembox.icon03::after{
  content: '';
  background: url(img/icon03.webp)no-repeat center / contain;
}
.itembox.icon04::after{
  content: '';
  background: url(img/icon04.webp)no-repeat center / contain;
}
.itembox.icon05::after{
  content: '';
  background: url(img/icon05.webp)no-repeat center / contain;
}
.itembox.icon06::after{
  content: '';
  background: url(img/icon06.webp)no-repeat center / contain;
}

.main-image{
  width: 100%;
  aspect-ratio: 4/4;
  overflow: hidden;
}

.main-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  /* transform: scale(1); */
  /* transition: ease-in-out 0.5s; */
}

.itembox .name{
  /* font-weight: 600; */
  /* font-size: 16px; */
  margin-top: 0.7em;
  line-height: 1.3;
}

.itembox .price{
  display: block;
  text-align: right;
  font-size: 1.25em;
  font-weight: 600;
}

.itembox .price span,
.modal-price span{
  font-size: 0.8em;
  font-weight: 400;
}

/* .itembox:hover{
  background: #FFA488;
} */
.itembox:hover .main-image img{
  /* transform: scale(1.15); */
  opacity: 0.5;
}

.sec02-window{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 20;
  /* overflow: scroll; */
  opacity: 0;
}

.sec02-window-back{
  width: 100%;
  height: 100%;
  background: #33170e;
  opacity: 0;
}

.sec02-window.active,
.active .sec02-window{
  pointer-events: all;
  opacity: 1;
}

.active .sec02-window-back{
  opacity: 0.7;
  pointer-events: all;
}



.sec02-window .splide{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.sec02-window .splide__track{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 90%;
  height: auto;
  max-width: 700px;
  /* padding: 3em; */
  background: #fff;
  box-sizing: border-box;
  border-radius: 1em;
  box-shadow: 0.5em 0.5em 0.5em rgba(51, 24, 14, 0.3);
}

#modal .splide__slide,
.modal-cafe .splide__slide{
  padding: 7%;
}

#modal .splide__arrows,
.modal-cafe .splide__arrows{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 90%;
  max-width: 700px;
  z-index: 3;
}

#modal .splide__arrow--prev,
.modal-cafe .splide__arrow--prev{
  position: absolute;
  top: 0;
  right: 102%;
  transform: rotate(180deg);
  width: 40px;
  height: 40px;
  background: url(img/common-arrow01a.webp)no-repeat center / contain;
}

#modal .splide__arrow--next,
.modal-cafe .splide__arrow--next{
  position: absolute;
  top: 0;
  left: 102%;
  width: 40px;
  height: 40px;
  background: url(img/common-arrow01a.webp)no-repeat center / contain;
}

#modal .modal-image,
.modal-cafe .modal-image{
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
}

#modal .modal-image::before,
.modal-cafe .modal-image::before{
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
  aspect-ratio: 1/1;
  transform: translate(-17%,-17%);
}

#modal .modal-image.icon01::before,
.modal-cafe .modal-image.icon01::before{
  content: '';
  background: url(img/icon01.webp)no-repeat center / contain;
}
#modal .modal-image.icon02::before,
.modal-cafe .modal-image.icon02::before{
  content: '';
  background: url(img/icon02.webp)no-repeat center / contain;
}
#modal .modal-image.icon03::before,
.modal-cafe .modal-image.icon03::before{
  content: '';
  background: url(img/icon03.webp)no-repeat center / contain;
}
#modal .modal-image.icon04::before,
.modal-cafe .modal-image.icon04::before{
  content: '';
  background: url(img/icon04.webp)no-repeat center / contain;
}
#modal .modal-image.icon05::before,
.modal-cafe .modal-image.icon05::before{
  content: '';
  background: url(img/icon05.webp)no-repeat center / contain;
}
#modal .modal-image.icon06::before,
.modal-cafe .modal-image.icon06::before{
  content: '';
  background: url(img/icon06.webp)no-repeat center / contain;
}

#modal .modal-image img,
.modal-cafe .modal-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#modal .modal-copy,
.modal-cafe .modal-copy{
  margin-top: 1em;
}

#modal .modal-name,
.modal-cafe .modal-name{
  /* font-size: 2em; */
  font-weight: 600;
}

#modal .modal-price,
.modal-cafe .modal-price{
  font-size: 1.25em;
  font-weight: 600;
  text-align: right;
}

.sec02-modal-window.pos0{
  transform: translateX(0);
}

.common-logo{
  position: absolute;
  font-size: 40px;
  top: 0.5em;
  left: 0.5em;
  height: 2em;
  /* width: auto; */
  width: 8.625em;
  z-index: 20;
  display: inline-block;
}

.common-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.common-logo:hover{
  opacity: 0.7;
}

.common-logo img:last-of-type{
  display: none;
}

.home .common-logo,
.woocommerce-shop .common-logo{
  display: none;
}

/* 冷凍菓子のみロゴ色変更 */
/* .page-id-162 .common-logo img{display: none;}
.page-id-162 .common-logo img:last-of-type{display: block;} */
.page-id-256 .common-logo img{display: none;}
.page-id-256 .common-logo img:last-of-type{display: block;}

/* 焼き菓子のみロゴ色変更 */
.page-id-77 .common-logo img{display: none;}
.page-id-77 .common-logo img:last-of-type{display: block;}

#access.sec{
  padding: 0 0 120px 0;
}

.petit_gateau-img,
.entremets-img,
.baked-sweets-img,
.frozen-sweets-img,
.cafe-img{
  display: block;
  width: 100vw;
  height: 100%;
  margin-left: calc(50% - 50vw);
  background: url(img/front-img05.webp)no-repeat center / cover;
}

.entremets-img{background: url(img/front-img06.webp)no-repeat center / cover;}
.baked-sweets-img{background: url(img/front-img03.webp)no-repeat center / cover;}
.frozen-sweets-img{background: url(img/front-img07.webp)no-repeat center / cover;}
.cafe-img{background: url(img/front-img04.webp)no-repeat center / cover;}






/************************************************************************

  投稿ページ用

************************************************************************/

.single .sec01,
.sec01.list{
  height: auto;
  max-height: none;
  margin-bottom: 5vw;
}

.single .sec01 .inner{
  height: auto;
}

.single .sec01 .text-wrap{
  /* top: 150px; */
  transform: none;
}

.single-img{
  display: block;
  width: 100vw;
  height: 280px;
  margin-left: calc(50% - 50vw);
  background: url(img/single-img01.webp)no-repeat center / cover;
}

.blog .pagination-next{
  display: none;
}

.blog .list{
  gap: 0;
}

.blog .list .a-wrap{
  border-bottom: 1px solid #ccc;
  padding: 2.5% 2.5%;
}

@media screen and (max-width: 1195px){
  .single-post .container.wrap{
    width: 90%;
  }
}


/************************************************************************

  共通 shopおすすめ品

************************************************************************/

#coffee{
  position: relative;
  /* margin-top: 60px; */
  overflow: hidden;
}

#coffee .ch-wrap{
  position: relative;
  width: 100%;
  overflow: hidden;
}

.coffee-movie{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.coffee-img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#coffee .flex-wide{
  padding: 60px 0;
}

#coffee .link-btn2 a{
  background: #fff;
  color: #33170e;
}
#coffee .link-btn2::before{
  color: #33170e;
  transition: ease-in-out 0.5s;
}

#coffee .link-btn2 a:hover{
  /* background: #FFA488; */
  background: #949593;
  color: #fff;
}
#coffee .link-btn2:hover::before{
  color: #fff;
}

#coffee .readtext{
  font-size: 1.2em;
  color: #fff;
  font-weight: 500;
  margin-top: -0.5em;
}

.coffee-logo{
  width: 200px;
  height: auto;
}

#coffee .flex{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
  justify-content: center;
  gap: 4%;
  padding: 30px 0 60px;
}

.pickup-wrap{
  width: 22%;
  /* aspect-ratio: 1/1; */
  /* background: #ccc; */
}

.pickup-imgbox{
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
}

.pickup-imgbox img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pickup-price{
  font-size: 1.25em;
  font-weight: 600;
  text-align: right;
}

.pickup-price small{
  font-size: 0.8em;
  font-weight: 400;
}

#coffee .link-btn{
  display: block;
  margin: 0 auto;
}

#coffee .sec-title{
  font-size: 40px;
  margin-top: 60px;
}






/************************************************************************

  サポートページ privacy-policy

************************************************************************/

.privacy-policy .common-logo img:last-of-type,
.normal-page .common-logo img:last-of-type,
.woocommerce-page .common-logo img:last-of-type{
  display: block;
}

.privacy-policy .common-logo img:first-of-type,
.normal-page .common-logo img:first-of-type,
.woocommerce-page .common-logo img:first-of-type{
  display: none;
}

.dammy-space{
  width: 100%;
  height: 120px;
}

.normal-page .ch{
  width: 100vw;
  padding: 60px 0;
  background: #33170e;
  color: #fff;
  text-align: center;
  margin-left: calc(50% - 50vw);
}

.normal-page .ch h1{
  display: inline-block;
  color: #fff;
  border-bottom: solid 1px #fff;
  padding: 0 1em 0.5em;
}

.normal-page .ch .mt3{
  margin-top: 0.5em;
}

.normal-page .sec02{
  max-width: 800px;
  margin: 0 auto;
}

.woocommerce-page:not(.archive) .content-in{
  max-width: 800px;
  margin: 120px auto 0;
}

.privacy-policy .sec02 p,
.page-id-123 .sec02 p,
.page-id-128 .sec02 p{
  text-align: justify;
  font-weight: 300;
  line-height: 2;
  width: 100%;
  display:grid;
}

.privacy-policy .sec02 p .heading,
.page-id-123 .sec02 p .heading,
/* .page-id-125 .sec02 p .heading, */
.page-id-128 .sec02 p .heading,
.page-id-132 .sec02 p .heading{
  font-size: 1.3em;
  font-weight: 500;
}

.sec02 p .no1,
.sec02 p .no2,
.sec02 p .no3,
.sec02 p .no4,
.sec02 p .no5,
.sec02 p .no6,
.sec02 p .no7,
.sec02 p .no8,
.sec02 p .no9,
.sec02 p .no10,
.sec02 p .no11{
  position: relative;
  padding-left: 3.5em;
  box-sizing: border-box;
}
.sec02 p .no1::before,
.sec02 p .no2::before,
.sec02 p .no3::before,
.sec02 p .no4::before,
.sec02 p .no5::before,
.sec02 p .no6::before,
.sec02 p .no7::before,
.sec02 p .no8::before,
.sec02 p .no9::before,
.sec02 p .no10::before,
.sec02 p .no11::before{
  position: absolute;
  left: 0.5em;
  color: #33170e;
  font-weight: 300;
}
.sec02 p .no1::before{content: '（1）';}
.sec02 p .no2::before{content: '（2）';}
.sec02 p .no3::before{content: '（3）';}
.sec02 p .no4::before{content: '（4）';}
.sec02 p .no5::before{content: '（5）';}
.sec02 p .no6::before{content: '（6）';}
.sec02 p .no7::before{content: '（7）';}
.sec02 p .no8::before{content: '（8）';}
.sec02 p .no9::before{content: '（9）';}
.sec02 p .no10::before{content: '（10）';}
.sec02 p .no11::before{content: '（11）';}

.sec02 p .tar{
  text-align: right;
}

.page-id-123 .sec02 table{
  border: 0;
}

.page-id-123 .sec02 td{
  font-weight: 400;
  padding: 1em 1em;
  line-height: 1.5;
  background: #fff;
  border: solid 1px #33170e;
}

.page-id-123 .sec02 th{
  padding: 1em 1em;
  line-height: 1.5;
  width: 12em;
  background: #eae7e6;
  border: solid 1px #33170e;
}

.sec02 .mt1{
  margin-top: 2em;
}

.sec02.pb0{
  padding-bottom: 0;
}

.sec02 p .sublist{
  padding-left: 3.5em;
}

.page-id-132 .sec02 .obitext{
  margin-top: 1em;
  font-size: 1.3em;
  line-height: 1.7;
  font-weight: 600;
  background: #33170e;
  color: #fff;
  padding: 0.5em 1em;
}

.sec02 .ques{
  position: relative;
  margin-top: 0.5em;
  border: solid 1px #33170e;
  background: #fff;
  /* padding: 0.7em 1em; */
  padding: 0.7em 2.5em 0.7em 1em;
  cursor: pointer;
}
.sec02 .ques::after{
  content: '';
  width: 0.8em;
  height: 0.8em;
  position: absolute;
  right: 1em;
  top: 50%;
  background: url(img/common-arrow01b.webp)no-repeat center / contain;
  transform-origin: center;
  transform:translateY(-50%) rotate(90deg);
  transition: ease 0.3s;
}
.sec02 .ques.active::after{
  transform:translateY(-50%) rotate(-90deg);
}

.sec02 .ques:nth-of-type(4n + 1){
  background: #eae7e6;
}

.sec02 .ans{
  background: #fff;
  cursor: pointer;
  text-align: justify;
  height: 0;
  padding: 0 0.5em;
  overflow: hidden;
  transition: ease 0.3s;
}

.sec02 .ans.active{
  height: auto;
  padding:0.5em 0.5em 1em ;
}

.sec02-openbtn{
  position: relative;
  background: #fff;
  padding: 0.6em 2.5em 0.6em 0.5em;
  border-top: 1px solid #33170e;
  transition: ease 0.3s;
  cursor: pointer;
}
.sec02 .sec02-openbtn:last-of-type{
  border-bottom: 1px solid #33170e;
}

.sec02-openbtn::before{
  content: '';
  position: absolute;
  top: 50%;
  right: 0.5em;
  width: 1em;
  height: 1px;
  background: #33170e;
  transform: translateY(-50%);
}
.sec02-openbtn::after{
  content: '';
  position: absolute;
  top: 50%;
  right: 1em;
  width: 1px;
  height: 1em;
  background: #33170e;
  transform: translateY(-50%);
  transition: ease 0.3s;
}

.sec02-openbtn.active{
  background: #faf3e5;
  border-bottom: 1px solid #33170e;
}

.sec02-openbtn.active::after{
  transform: translateY(-50%) rotate(90deg);
  opacity: 0;
}

.sec02-openarea{
  width: 100%;
  height: 0;
  padding-left: 1.5em;
  padding: 0 1.5em 0 1.5em;
  overflow: hidden;
  transition: ease 0.3s;
}

.sec02-openarea.active{
  height: auto;
  padding: 0em 1.5em 3em 1.5em;
}


.sec02-readtext-ub{
  /* padding-bottom: 0.5em; */
  /* border-bottom: 1px solid #ccc; */
  padding: 0.3em 0.5em 0.4em;
  margin-top: 2em;
  background: #33170e;
  color: #fff;
}

.sec02-readtext{
  line-height: 2;
  font-weight: 300;
  margin-top: 0.5em;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  /* display: inline-block; */
}

.sec02-readtext .strong{
  font-weight: 600;
}

.sec02-readtext a{
  text-decoration: underline;
}

.sec02-flex{
  display: flex;
  align-items: center;
  height: 50px;
  width: 100%;
  gap: 20px;
  margin: 1em 0 2.5em;
  padding-left: 1em;
}

.sec02-flex img{
  height: 100%;
  width: auto;
}

.sec02-readtext-box{
  width: 100%;
  font-weight: 600;
  line-height: 2;
  padding: 0.7em 1em;
  box-sizing: border-box;
  border:solid 0.4em #ccc5c3;
  margin-top: 0.7em;
}
.sec02-openarea table {
  margin-top: 1em;
}
.sec02-openarea table th{
  background: #ccc5c3;
  border: 1px solid #33170e;
}

.sec02-openarea table td{
  background: #fff;
  border: 1px solid #33170e;
}








/************************************************************************

  お問い合わせフォーム用

************************************************************************/

.contact h2{
  font-size: 36px;
  text-align: center;
  margin-bottom: 1em;
}

.contact .sec02-readtext{
  display: inline-block;
}

.contact .boxtext{
  background: #33170e;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  padding: 0.3em 0.8em 0.4em 0.5em;
  border-radius: 0.5em;
  margin: 0 0.3em;
}

.contact .boxtext:hover{
  opacity: 0.5;
}

.wpcf7{
  margin-top: 2em;
}

.mailform{
  width: 100%;
}

.mailform th{
  position: relative;
  background: #ebe8e7;
  border: solid 1px #33170e;
  text-align: left;
  width: 15em;
  padding: 1em;
}

.mailform td{
  padding: 1em;
}

.mailform .required::after{
  content: '';
  height: 1em;
  width: auto;
  aspect-ratio: 100 / 53;
  background: url(img/required.webp)no-repeat center / contain;
  display: inline-block;
  margin: 0.25em 0 0 0.5em;
}

.mailform .required p{
  display: inline-block;
}

.mailform td{
  background: #fff;
  border: solid 1px #33170e;
}

.contact input[type=submit]{
  margin-top: 2em;
  background: #33170e;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
}

.contact .mail-btnwrap p{
  display: flex;
  gap: 20px;
  align-items: end;
}

.contact .mail-btnwrap p .wpcf7-spinner{
  display: none;
}

.contact input[type=button]{
  display: block!important;
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
  width: 6em;
  padding: 15px 0;
  box-sizing: border-box;
  border: solid 1px #33170e;
  background: #fff;
  cursor: pointer;
}

.contact input[type=submit]:hover,
.contact input[type=button]:hover{
  opacity: 0.5;
}

/************************************************************************

  shop用

************************************************************************/

.woocommerce-shop .menu-btn span,
.woocommerce-shop .menu-btn span::before,
.woocommerce-shop .menu-btn span::after{
  background: #fff!important;
}

.woocommerce-shop .menu-btn.active span,
.woocommerce-shop .menu-btn.active span::before,
.woocommerce-shop .menu-btn.active span::after{
  background: #33170e!important;
}

.woocommerce-shop .content-area{
  width: 90%;
  margin: 0 auto;
}

.shop-ch{
  position: relative;
  width: 100vw;
  height: 56.25vw;
  max-height: 100vh;
  background: url(img/shop-img01.webp)no-repeat center / cover;
  margin-left: calc(50% - 50vw);
}

.shop-ch img{
  margin: 2vw 0 0 2%;
  height: 25%;
  width: auto;
}

.shop-ch-textbox{
  position: absolute;
  left: 50%;
  top: 50%;
  color: #fff;
  transform: translate(-100% , -35%);
}

.shop-title{
  font-size: min(7.2vw,80px);
  font-weight: 800;
  line-height: 1;
}

.shop-title span{
  font-size: 0.4em;
  font-weight: 400;
  display: inline-block;
  margin-left: 1em;
}

.shop-subtitle{
  font-size: min(2.9vw,30px);
  font-weight: 400;
  line-height: 1;
  margin-top: 0.75em;
  background: #fff;
  color: #33170e;
  padding: 0.2em 0 0.25em 0.5em;
  margin-bottom: 1em;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) .woocommerce-breadcrumb,
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) .woocommerce-breadcrumb a{
  color: #999;
  font-size: 13px;
  margin-top: 1.5em;
  margin-bottom: 4em;
}


.woocommerce-shop .sec-title{
  margin-bottom: 1em;
}

.woocommerce ul.products li.product a img{
 margin-bottom: 0.5em;
 transition: linear 0.1s;
}
.woocommerce ul.products li.product a:hover img{
  opacity: 0.5;
}

.woocommerce .woocommerce-loop-product__title {
  color: #33170e;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-weight: 400;
  padding: 0;
  line-height: 1.5;
}

.woocommerce ul.products li.product .price{
  font-size: 20px;
  line-height: 1;
  color: #33170e;
  font-weight: 600;
  text-align: right;
  margin: 0.5em 0;
}

.woocommerce ul.products li.product .price small{
  font-weight: 400;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button{
  background: #33170e;
  color: #fff;
  font-weight: 400;
}

.woocommerce ul.products li.product .button{
  margin-top: 0;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button:hover{
  /* background: #FFA488; */
  background: #949593;
  color: #fff;
}

.kago{
  position: fixed;
  right: 30px;
  top: 110px;
  /* right: calc(3% - 10px);
  right: 2%;
  top: calc(60px + 4vw); */
  width: 70px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: #FFA488 url(img/shop-icon01.webp)no-repeat center / contain;
  border: 2px solid #FFA488;
  z-index: 10;
}

.kago::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid #FFA488;
  transform-origin: center;
}

.kago:hover::after{
  animation: .8s water ease-in-out infinite;
}
@keyframes water{
  0%  { transform: scale(1); opacity: 1;}
  50% { opacity: 1;}
  100%{ transform: scale(2); opacity: 0;}
}

.kago .quantity_badge{
  position: absolute;
  top: -0.5em;
  right: -0.5em;
  font-size: 16px;
  line-height: 1.3;
  background: #33170e;
  color: #fff;
  z-index: 2;
  width: 1.6em;
  height: 1.6em;
  display: block;
  text-align: center;
  border-radius: 50%;
  box-sizing: border-box;
  padding-bottom: 0.2em;
  border: 2px solid #FFA488;
}

.woocommerce ul.products li.product .button{
  width: 100%;
  font-size: min(1.56vw,16px);
}

.woocommerce a.added_to_cart{
  line-height: 1;
}

.woocommerce.single{
  overflow-x: hidden;
}

.woocommerce.single .woocommerce-breadcrumb{
  margin: 1.5em 0;
}

.woocommerce.single .header-container{
  position: relative;
  background: #fff;
  top: 0;
  left: calc(50% - 50vw);
}

.woocommerce.single .summary .price{
  color: #33170e!important;
  font-size: 16px!important;
  font-weight: 400;
  border-top: 1px solid #33170e;
  border-bottom: 1px solid #33170e;
  padding: 0.2em 0 0.2em 0.5em;
}

.woocommerce.single .common-logo img{
  display: block;
}
.woocommerce.single .common-logo img:first-of-type{
  display: none;
}

.woocommerce.single .woocommerce-product-details__short-description{
  padding: 0.8em 0;
  text-align: justify;
}

.woocommerce.single div.product form.cart div.quantity{
  position: relative;
  width: 100%;
  border-top: 1px solid #33170e;
  border-bottom: 1px solid #33170e;
  padding: 0.6em 0 0.5em 1em;
}
.woocommerce.single div.product form.cart div.quantity::before{
  content: '数　量:';
  margin-right: 2em;
}

.woocommerce.single .quantity .qty{
  border: none;
}

.woocommerce.single div.product form.cart .button{
  background: #33170e;
  margin-top: 2em;
  width: 100%;
  padding: 1.3em 0;
  border-radius: 0.5em;
}

.woocommerce.single div.product form.cart .button:hover{
  opacity: 0.5;
}

.woocommerce.single div.product form.cart{
  margin-bottom: 0;
}

.woocommerce.single div.product .woocommerce-tabs .panel{
  margin-bottom: 7em;
}

.woocommerce.single div.product .woocommerce-tabs .panel p{
  margin-bottom: 0;
}

.woocommerce.single .product_meta,
.woocommerce.single .woocommerce-Tabs-panel h2,
.woocommerce.single .wc-tabs{
  display: none;
}

.woocommerce.single .related h2{
  border-bottom: 1px solid #33170e;
  padding-bottom: 0.2em;
  margin-bottom: 1.7em;
}

.woocommerce.single .related h2.woocommerce-loop-product__title{
  border-bottom: none;
}

.shop-btn-wrap{
  position: absolute;
  bottom: 2.5vw;
  right: 2.5%;
  display: flex;
  gap: 20px;
}

.shop-btn-wrap a{
  position: relative;
  font-size: 16px;
  line-height: 1.2em;
  background: #fff;
  color: #33170e;
  width: 10em;
  padding: 0.6em 0.3em 0.6em 3em;
  border: solid 1px #fff;
  box-sizing: border-box;
}

.shop-btn-wrap a::before{
  content: "\f101";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #33170e;
  font-size: 1.2em;
  position: absolute;
  top: 0.5em;
  left: 1em;
}

.shop-btn-wrap a:hover{
  background: #33170e;
  color: #fff;
}
.shop-btn-wrap a:hover::before{
  color: #fff;
}


.woocommerce-page .entry-title{
  text-align: center;
  font-size: 36px;
  padding: 0.5em 0 0.1em;
  /* border-bottom: 2px solid #33170e; */
  margin: 0 auto 0.5em;
}

.u-columns h2{
  font-size: 20px;
  font-weight: 500;
  padding: 0.5em 0;
  letter-spacing: 0.05em;
  background: #33170e;
  color: #fff;
  text-align: center;
  margin-bottom: 0;
}

.woocommerce-page table th,
.woocommerce-page table td,
.woocommerce-page table tr:nth-of-type(2n+1){
  background: none;
}

.woocommerce div.product form.cart .variations label{
  margin-top: 0.25em;
  display: inline-block;
}

.woocommerce.single .single_variation_wrap .price{
  font-size: 2em!important;
  font-weight: 800;
  width: 100%;
  display: block;
  border-bottom: 0;
}

.woocommerce .u-columns form.login,
.woocommerce .u-columns form.register{
  margin: 0;
  border: 1px solid #33170e;
  border-radius: 0;
}

.u-columns .woocommerce-button{
  font-weight: 500;
  background: #33170e;
  padding: 0.5em 1em 0.4em;
  color: #fff;
  min-width: 6em;
}

.woocommerce .woocommerce-form-login .form-row-wide:nth-of-type(2){
  margin-bottom: 1.5em;
}

.woocommerce .woocommerce-form-login .lost_password{
  margin: 1em 0;
}

.woocommerce .u-column2 p{
  font-size: 14px;
}

.woocommerce-account .woocommerce-MyAccount-navigation{
  font-size: 15px;
  width: 10em;
  margin-bottom: 10em;
}

.woocommerce-account .woocommerce-MyAccount-content{
  width: calc(100% - 13em);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul{
  margin-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li{
  background: #fff;
  border-bottom: 1px solid #999;
  padding: 0.7em 0 0.7em 1em;
  margin: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li:first-of-type{
  border-top: 1px solid #999;
}

.woocommerce-account .woocommerce-MyAccount-navigation li{
  color: #33170e;
  font-weight: 600;
}

.woocommerce-account .woocommerce-MyAccount-navigation li:hover{
  background: #ccc5c3;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a{
  color: #33170e;
  width: 100%;
  height: 100%;
  display: block;
}

.woocommerce table.shop_table{
  border: solid 1px #999;
  border-radius: 0;
  border-collapse: collapse;
}

.woocommerce table.shop_table thead th{
  background: #ccc5c3;
  color: #33170e;
  border: solid 1px #999;
  padding: 0.6em;
  /* text-align: center; */
}

.woocommerce table.shop_table tbody th{
  background: #fff;
  color: #33170e;
  border: solid 1px #999;
  padding: 0;
  /* padding: 0.6em; */
}

.woocommerce table.shop_table tbody th a{
  color: #33170e;
  text-decoration: underline;
  width: 100%;
  height: 100%;
  display: block;
  padding: 0.6em;
}

.woocommerce table.shop_table tbody td{
  background: #fff;
  color: #33170e;
  border: solid 1px #999;
}

.woocommerce table.shop_table thead th:last-of-type,
.woocommerce table.shop_table tbody td:last-of-type{
  display: none;
}

.woocommerce table.shop_table thead th.product-total,
.woocommerce table.shop_table tbody td.product-total{
  display: table-cell;
}

.woocommerce-MyAccount-content .woocommerce-Addresses h2{
  font-size: 16px;
  padding: 0.5em 0 0.6em;
  background: #ccc5c3;
  color: #33170e;
}

.woocommerce-MyAccount-content .woocommerce-Addresses a{
  color: #33170e;
  text-decoration: underline;
  margin-top: 0.5em;
}

.woocommerce-MyAccount-content .woocommerce-Addresses address{
  font-style: normal;
}

.woocommerce-account .woocommerce-MyAccount-content h2{
  background: #ccc5c3;
  color: #33170e;
  text-align: center;
  font-size: 20px;
  padding: 0.6em 0 0.7em;
  margin-bottom: 1em;
  font-weight: 500;
}

.woocommerce-MyAccount-content .woocommerce-address-fields .select2-selection{
  padding: 6px;
  height: auto;
  border: solid 1px #ccc;
}

.select2-container--default .select2-selection--single .select2-selection__arrow{
  top: 7px;
}

.woocommerce-MyAccount-content .button{
  background: #33170e;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  padding: 0.5em 1em;
  margin-left: 0.2em;
  margin-top: 1em;
}

.edit-account fieldset{
  margin: 1em 0.15em;
  padding: 0.5em;
}

.woocommerce table.shop_table td.product-name a{
  color: #33170e;
}

.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th{
  background: #fff;
  border: solid 1px #999;
  font-weight: 400;
}

.woocommerce-customer-details .woocommerce-column--billing-address address,
.woocommerce-customer-details .woocommerce-column--shipping-address address{
  border-radius: 0;
  border: solid 1px #999;
}


@media screen and (max-width: 768px){
  
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size: 3vw;
  }
  .woocommerce ul.products li.product .price{
    font-size: 3.43vw;
  }

  .woocommerce ul.products li.product .button{
    font-size: 2.5vw;
  }

  .woocommerce-page:not(.archive) .content-in{
    margin: 0 auto;
  }

  .woocommerce.single .summary .price{
    font-size: min(5vw,20px)!important;
  }

  .woocommerce.single .single_variation_wrap .price{
    font-size: 2em!important;
  }

  .woocommerce div.product form.cart .variations select{
    font-size: min(5vw,20px);
  }

  .woocommerce div.product form.cart .variations label{
    font-size: min(5vw,20px);
    margin-top: 0.5em;
  }


}

@media screen and (max-width: 480px){
  .shop-ch{
    height: 130vw!important;
    background: url(img/shop-img01-sp.webp) no-repeat center / cover;
  }
  .shop-ch img{
    margin: 3vw 0 0 3%;
  }
  .shop-ch-textbox{
    top: auto;
    bottom: 3vw;
    left: 3%;
    transform: unset;
    width: 94%;
  }
  .shop-title{
    font-size: 9.375vw;
  }

  .shop-subtitle{
    font-size: 4.375vw;
    display: inline-block;
    padding: 0.2em 0.5em 0.25em 0.5em;
  }

  .woocommerce .woocommerce-result-count{
    font-size: 4.375vw;
  }

  .woocommerce ul.products li.product .button{
    font-size: 3.4375vw;
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size: 3.43vw;
    /* font-size: 4vw; */
  }

  /* .woocommerce ul.products li.product .price{
    font-size: 5vw;
  } */

  .kago{
    width: 55px;
    right: 4%;
  }

}






/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  .pc{display: none;}
  .sp{display: block;}

  main.main{
    padding: 0;
  }

  .menu-btn{
    width: 40px;
    height: 40px;
  }

  .menu-btn span::before{
    top: -15px;
  }

  .menu-btn span::after{
    bottom: -15px;
  }


  .menu-btn span{
    /* height: 5px; */
  }

  .menu-btn span::before, .menu-btn span::after{
    /* height: 5px; */
  }

  .my-page{
    width: 3px;
  }

  .my-pagination{
    width: 10px;
    bottom: 0;
    left: 3.2%;
  }

  .sec,.sec-wide{
    padding: 0 0 25vw;
  }

  #news.sec,
  #about.sec-wide{
    padding: 12vw 20px;
  }

  #coffee.sec-wide{
    padding: 0 0 12vw 0;
  }

  #coffee .flex-wide{
    padding: 12vw 0;
  }

  .sec-wide .inner{
    text-align: center;
  }

  .flex-right{
    display: block;
  }

  .footer{
    margin-top: 0;
    padding: 7vw 0 10px;
  }

  .footer img{
    width: 100%;
    max-width: 280px;
  }

  .footer-in{
    display: block;
    padding: 0 20px;
    max-width: 600px;
  }

  .footer-menu{
    font-size: min(14px);
    margin-top: 1em;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1em 0;
  }

  .footer-menu ul{
    margin-left: 0;
  }

  .header-menu{
    font-size: min(5vw,20px);
  }

  .header-container{
    padding: 20px 0;
  }

  .header-container-in{
    width: calc(100% - 40px);
  }

  .top{
    height: 100vw;
  }

  .top-logo{
    width: 60%;
  }

  .sec-title{
    font-size: min(8.75vw,46px);
    text-align: center;
  }

  #about .sec-title{
    font-size: min(7.5vw,46px);
  }

  #about .sec-title span{
    font-size: 0.6em;
  }

  .sec-title span{
    font-size: 0.5em;
    margin-left: 0;
    display: block;
    margin-top: 0.7em;
  }

  .news-wrap ul li a{
    display: inline-block;
    line-height: 1.5;
  }

  .news-wrap ul li a p{display: inline-block;}

  .news-wrap{
    padding: 2em 0;
  }

  .readtext{
    font-size: min(4.4vw,16px);
  }

  .readtext.mt3{
    margin-top: 8vw;
  }

  #coffee .sec-title{
    font-size: min(7.5vw, 46px);
    margin-top: 1.1em;
    line-height: 1.3;
  }

  #coffee .flex{
    padding: 5vw 0;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3vw;
  }

  .google-map-wrap{
    margin: 5vw auto 10px;
    aspect-ratio: 2/1;
  }

  #access.sec{
    padding: 12vw 0 12vw 0;
  }

  .pickup-wrap{
    width: calc(50% - 1.5vw);
  }

  .pickup-wrap p{
    font-size: min(4.4vw,16px);
    line-height: 1.5;
    margin-top: 0.3em;
    text-align: left;
  }

  .pickup-wrap .pickup-price{
    text-align: right;
  }

  .img-wrap-sp{
    width: 100%;
    aspect-ratio: 16/7;
    margin-bottom: 7vw;
  }

  #petit-gateau,#baked-sweets,#entremets,#frozen-sweets,#cafe{background: none;}
  #petit-gateau .img-wrap-sp{background: url(img/front-img05-sp.webp)no-repeat center / cover;}
  #entremets .img-wrap-sp{background: url(img/front-img06-sp.webp)no-repeat center / cover;}
  #baked-sweets .img-wrap-sp{background: url(img/front-img03-sp.webp)no-repeat center / cover;}
  #frozen-sweets .img-wrap-sp{background: url(img/front-img07-sp.webp)no-repeat center / cover;}
  #cafe .img-wrap-sp{background: url(img/front-img04-sp.webp)no-repeat center / cover;}

  .sec-textbox::after,.sec-textbox2::after{content: none;}

  .link-btn.mt3{
    margin-top: 2em;
  }



  .sec01{ height: auto;}

  .sec01 .inner{width: 100%;}

  .sec01 .text-wrap{
    width: 100%;
    background: #33170e;
    padding: 5vw;
    top: auto;
    /* bottom: 0; */
    transform: none;
    position: relative;
  }

  .sec01 .readtext.mt3{
    margin-top: 1em;
    text-align: center;
  }

  .sec01 .sec-title{
    font-size: 7.2vw;
    letter-spacing: 0.01em;
  }

  .sec01 .sec-title span{
    font-size: min(0.5em,24px);
  }

  #breadcrumb span.sp{display: inline-block;}

  .sec02{
    padding: 7vw 5%;
  }

  .itembox{width: 50%;}

  .common-logo{
    width: 60%;
    height: auto;
    top: 0;
    left: 0;
    font-size: unset;
    transform: translate(5%, 15%);
  }
  .woocommerce.single .common-logo{
    font-size: min(7.8vw, 30px);
    top: 0.5em;
    left: 0.5em;
    height: 2em;
    width: auto;
    transform: none;
  }


  .itembox .name{
    font-size: min(4.4vw, 16px);
  }

  .itembox .price{
    font-size: min(4.4vw, 16px);
  }

  /* .itembox .price{
    float: right;
  } */

  .petit_gateau-img,
  .entremets-img,
  .baked-sweets-img,
  .frozen-sweets-img,
  .cafe-img{
    display: block;
    width: 100%;
    height: 85vw;
    background: url(img/front-img05-sp.webp)no-repeat center / cover;
  }
  .entremets-img{background: url(img/front-img06-sp.webp)no-repeat center / cover;}
  .baked-sweets-img{background: url(img/front-img03-sp.webp)no-repeat center / cover;}
  .frozen-sweets-img{background: url(img/front-img07-sp.webp)no-repeat center / cover;}
  .cafe-img{background: url(img/front-img04-sp.webp)no-repeat center / cover;}
  

  .sec02-window .splide__track{
    width: 80%;
  }

  #modal .splide__arrow--next{
    width: 5vw;
    height: 5vw;
    left: 97%;
  }

  #modal .splide__arrow--prev{
    width: 5vw;
    height: 5vw;
    right: 97%;
  }

  .sec01 .brown .sec-title,
  .sec01 .brown p{
    color: #fff;
  }

  .woocommerce.single .content-area{
    width: 90%;
    margin: 0 auto;
  }

  .shop-ch{
    height: auto;
    padding-bottom: 5vw;
  }

  .shop-ch img{
    width: 25%;
    max-width: 130px;
  }

  .shop-ch-textbox{
    position: static;
    transform: none;
    margin: 3vw 0 3vw 5%;
  }

  .shop-btn-wrap{
    position: static;
    margin-left: 5%;
  }

  .shop-subtitle{
    display: inline-block;
    padding: 0.2em 0.5em 0.25em 0.5em;
  }

  .shop-btn-wrap a{
    font-size: min(3.75vw,16px);
  }

  .single-post .related-entry-heading{
    font-size: min(5vw,20px);
    margin: 2em 0 0.5em;
  }

  .rect-mini-card .related-entry-card-wrap{
    background: #f5f8fa;
  }

  .sns{
    position: absolute;
    right: 0;
    top: 60px;
    width: 40px;
    height: 40px;
    margin: 0;
  }

  .kago{
    /* top: calc(115px + 4vw); */
    top: 140px;
    right: 15px;
    width: 50px;
  }

  /* 商品ページ以外 */
  .page-id-123 .common-logo,
  .page-id-125 .common-logo,
  .page-id-128 .common-logo,
  .page-id-130 .common-logo,
  .page-id-132 .common-logo,
  .page-id-367 .common-logo,
  .page-id-368 .common-logo,
  .page-id-3 .common-logo{
    height: 60px;
    width: auto;
    transform: none;
    left: 20px;
    top: 10px;
  }

  .page-id-123 .dammy-space,
  .page-id-125 .dammy-space,
  .page-id-128 .dammy-space,
  .page-id-130 .dammy-space,
  .page-id-132 .dammy-space,
  .page-id-367 .dammy-space,
  .page-id-368 .dammy-space,
  .page-id-3 .dammy-space{
    height: 80px;
  }







}






/*480px以下*/
@media screen and (max-width: 480px){
  .pc2{display: none;}
  .sp2{display: block;}

  /* .menu-btn{
    width: 36px;
    height: 36px;
    margin-top: 0;
  } */

  /* .menu-btn span{
    height: 4px;
    margin-top: 16px;
  }

  .menu-btn span::before, .menu-btn span::after{
    height: 4px;
  }

  .menu-btn span::before{
    top: 2px;
  }
  .menu-btn span::after{
    bottom: 2px;
  } */

  .header-menu{width: 100%;}

  .top{ height: 150vw;}

  .slide01 { background: url(img/front-slide01-sp.webp) no-repeat center / cover;}
  .slide02 { background: url(img/front-slide02-sp.webp) no-repeat center / cover;}
  .slide03 { background: url(img/front-slide03-sp.webp) no-repeat center / cover;}
  .slide04 { background: url(img/front-slide04-sp.webp) no-repeat center / cover;}

  #about .readtext{
    text-align: justify;
  }

  #petit-gateau .readtext,
  #entremets .readtext,
  #baked-sweets .readtext,
  #frozen-sweets .readtext,
  #cafe .readtext{
    text-align: justify;
  }

  #coffee .flex-wide{
    display: block;
  }

  .coffee-logo{
    width: 50%;
    margin: 0 auto;
  }

  #coffee .readtext{
    margin-top: 1em;
    font-size: 1em;
  }

  #coffee .flex{
    gap: 5vw;
  }

  .pickup-wrap{
    width: 100%;
    max-width: 300px;
  }
  
  .img-wrap-sp{
    aspect-ratio: 1/1;
  }

  .sec-textbox2 .readtext,.sec-textbox .readtext{
    display: inline-block;
  }


  .sec01{height: 100%;}

  .sec01 .inner{
    height: 130vw;
  }
  .sec01 .sec-title{
    font-size: 8.75vw;
  }

  .blog .sec01 .inner{
    height: auto;
  }

  .sec01 .readtext.mt3{
    font-size: 3.75vw;
    text-align: justify;
  }

  .sec02{
    /* padding: 7vw 5%; */
    padding: 7vw 15%;
  }

  .sec02.other{
    padding: 7vw 5%;
  }

  .itembox{
    padding: 4vw 0;
    /* width: 48%; */
    width: 100%;
  }

  .itembox:hover{
    background: #fff;
  }

  .itembox .name{
    margin-top: 0.5em;
    /* font-size: 4vw; */
  }

  .itembox .price{
    /* font-size: 4.3vw; */
    line-height: 1.3;
    margin-top: 0.3em;
  }

  .sec02-window .splide__track{
    width: 80%;
  }

  #modal .splide__arrow--next{
    left: 97%;
    width: 5%;
    height: 5vw;
  }
  
  #modal .splide__arrow--prev{
    right: 97%;
    width: 5%;
    height: 5vw;
  }

  #modal .splide__slide{
    padding: 5%;
  }

  #modal .modal-copy{
    font-size: 14px;
    margin-top: 0.5em;
  }

  #modal .modal-name{
    font-size: 16px;
  }

  #modal .modal-price{
    font-size: 16px;
  }

  #modal .modal-type{
    font-size: 14px;
  }

  #coffee .ch-wrap .inner{
    width: 80%;
  }

  #coffee .inner{
    width: 70%;
  }

  .news-wrap ul li a .date{
    display: block;
  }

  .itembox::after{
    width: 33%;
    transform: translate(-13%, 13%);
  }

  .woocommerce.single .summary{
    font-size: 14px;
  }

  .woocommerce.single .entry-title{
    font-size: 1.3em;
    margin-bottom: 0.6em;
  }

  /* .woocommerce.single .summary .price{
    font-size: 2em!important;
  } */

  .woocommerce.single div.product .woocommerce-tabs .panel{
    font-size: 14px;
  }

  .link-btn a, .link-btn2 a {
    padding: 0.8em 2em 0.8em 4em;
  }

  .link-btn::before, .link-btn2::before{
    left: 2em;
  }

  .entry-title{
    padding: 0;
  }

  .shop-ch-textbox{
    margin: 17vw 0 0 5%;
  }

  .shop-btn-wrap{
    position: absolute;
    left: 5%;
    bottom: 5vw;
    margin-left: 0;
  }

  /* 商品ページ以外 */
  .page-id-123 .common-logo,
  .page-id-125 .common-logo,
  .page-id-128 .common-logo,
  .page-id-130 .common-logo,
  .page-id-132 .common-logo,
  .page-id-367 .common-logo,
  .page-id-368 .common-logo,
  .page-id-3 .common-logo{
    height: 44px;
    top: 18px;
  }

  .normal-page .ch{
    padding: 8vw;
  }

  .normal-page .ch h1{
    width: 100%;
    padding: 0 0 0.5em 0;
    line-height: 1.3;
  }

  .normal-page .ch h1 .break{
    display: inline-block;
    font-size: 1em;
    margin-top: 0;
    font-weight: 800;
  }

  .normal-page .readtext.mt3{
    font-size: min(4vw,16px);
    line-height: 1.5;
  }

  .normal-page .readtext.mt3 span{
    display: inline-block;
  }

  .normal-page .sec02{
    font-size: 14px;
  }

  .page-id-123 .sec02 th,
  .page-id-123 .sec02 td{
    font-size: 1em;
    width: 100%;
    display: block;
    border-top: solid 1px #33170e;
    border-left: solid 1px #33170e;
    border-right: solid 1px #33170e;
    border-bottom: 0;
  }

  .page-id-123 .sec02 tr:last-of-type{
    border-bottom: solid 1px #33170e;
  }

  .page-id-123 .sec02 th{
    padding: 0.4em 1em;
  }

  .page-id-123 .sec02 th br{
    display: none;
  }

  .sec02-openbtn{
    font-size: 4.68vw;
    line-height: 1.6;
  }

  .sec02-openarea{
    padding: 0 0.5em;
  }

  .sec02-openarea.active{
    padding: 0 0.5em 3em;
  }

  .sec02-readtext-ub{
    margin-top: 1em;
    font-size: 16px;
  }

  .contact h2{
    font-size: 7.5vw;
    line-height: 1.5;
  }

  .contact h2 span{
    display: inline-block;
  }

  .contact .boxtext{
    font-size: 0.9em;
    padding: 0 0.6em 0 0.6em;
    transform: translateY(-0.1em);
    display: inline-block;
  }

  .mailform th,
  .mailform td{
    display: block;
    width: 100%;
    border-bottom: 0;
    font-size: 1em;
  }

  .mailform th{
    padding: 0.6em 1em;
  }

  .mailform tr:last-of-type td{
    border-bottom: solid 1px #33170e;
  }

  .mailform .required::after{
    margin: 0 0 0 0.5em;
    transform: translateY(0.1em);
  }

  
}




/************************************************************************

  お知らせ投稿カスタム

************************************************************************/

.single-post .article{
  text-align: center;
}

.single-post .article h1{
  font-size: 32px;
  margin-bottom: 1.5em;
}

.single-post .article .entry-categories-tags{
  text-align: right;
}

.single-post .article .size-medium{
  width: 100%;
  max-width: 600px;
  height: auto;
  display: block;
  margin: 0 auto 16px;
}

.single-post .header .menu-btn span,
.single-post .header .menu-btn span::after,
.single-post .header .menu-btn span::before,
.blog .header .menu-btn span,
.blog .header .menu-btn span::after,
.blog .header .menu-btn span::before{
  background: #fff;
}

.single-post .header .menu-btn.active span,
.single-post .header .menu-btn.active span::after,
.single-post .header .menu-btn.active span::before,
.blog .header .menu-btn.active span,
.blog .header .menu-btn.active span::after,
.blog .header .menu-btn.active span::before{
  background: #33170e;
}


.single-post .header .sns,
.blog .header .sns{
  background: url(img/icon-insta-a.webp) no-repeat center / contain;
}

.single-post .header .sns.active,
.blog .header .sns.active{
  background: url(img/icon-insta-c.webp) no-repeat center / contain;
}
    
@media screen and (max-width: 834px){
  .single-post .article h1{
    font-size: min(6.87vw,32px);
    margin-bottom: 1em;
    margin-top: 1em;
    text-align: left;
  }

  .single-post .article .entry-content p{
    text-align: justify;
    font-size: min(4.375vw,32px);
    margin-bottom: 0.8em;
  }
}