@charset "utf-8";
/* -----------------人気商品----------------- */
.g-popular__nav{
  display: flex;
}
.g-popular_btn{
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  background: var(--c-gray-400);
  font-weight: bold;
  position: relative;
  /* transition: background 0.3s, color 0.3s,opacity 0.3s; */
}
.g-popular_btn.show{
  background: var(--orange-500);
  color: var(--c-white);
}
.g-popular_btn::after{
  content: '';
  background: var(--btn-arrow) no-repeat center center / 100%;
  aspect-ratio: 1/1;
  position: absolute;
  top: 95%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
}
.g-popular_btn.show::after{
  opacity: 1;
}
@media screen and (min-width: 768px){
  .g-popular__nav{
    gap: 10px;
    margin-bottom: 30px;
  }
  .g-popular_btn{
    width: 245px;
    height: 60px;
    font-size: var(--fz-20);
  }
  .g-popular_btn::after{
    width: 16px;
  }
}
@media (hover: hover){
  .g-popular_btn:not(.show):hover{
    opacity: .7;
    transition: .3s;
  }
}
@media screen and (max-width: 767px){
  .g-popular__nav{
    gap: 10px;
    overflow-x: scroll;
    padding-bottom: 15px;
    margin-bottom: 10px;
    margin-right: calc(50% - 50vw);
  }
  .g-popular_btn{
    width: 100px;
    min-width: 100px;
    height: 36px;
    font-size: 14px;
    padding-bottom: 1px;
  }
  .g-popular_btn::after{
    width: 11px;
  }
}

/* -----------------バナー----------------- */
.g-banner{
  display: grid;
}
.g-bannerList{
  display: contents;
}
.g-bannerList .fs-pt-column__image{
  display: block;
  overflow: hidden;
}
.g-bannerList img,
.g-bannerList .fs-pt-column__image{
  border-radius: 4px;
}
@media screen and (min-width: 768px){
  .g-banner{
    grid-template-columns: repeat(3,1fr);
    gap: 15px;
  }
}
@media (hover: hover){
  .g-bannerList a:hover{
    opacity: 1;
  }
  .g-bannerList a:hover img{
    opacity: 1 !important;
    transform: scale(1.1);
  }
}
@media screen and (max-width: 767px){
  .g-banner{
    grid-template-columns: repeat(2,1fr);
    gap: 8px;
  }
}

/* -----------------サイドバー有りレイアウト----------------- */
.g-sideColumnWrap{
  background: var(--c-white);
  box-shadow: var(--bxsd-orange);
}
@media screen and (min-width: 768px){
  .g-sideColumn{
    display: grid;
    align-items: start;
    grid-template-columns: clamp( 200px, 18.333vw, 264px) 1fr;
    gap: clamp( 30px, 3.819vw, 55px);
  }
}

/* -----------------カテゴリから探す----------------- */
.g-cate__list{
  display: grid;
}
.g-cate__list a{
  display: block;
}
.g-cate__txt{
  font-weight: bold;
  font-size: var(--fz-16);
  text-align: center;
  margin-top: 5px;
  letter-spacing: 0.02em;
  text-align: left;
  text-align: center;
}
.g-cate__list__img{
  overflow: hidden;
}
/* .g-cate .g-cate__inner:nth-child(2){
  padding-bottom: var(--spc-60);
  margin-bottom: var(--spc-60);
  border-bottom: 1px solid var(--orange-450);
} */
@media screen and (min-width: 768px){
  .g-cate__list{
    grid-template-columns: repeat(5,1fr);
    gap: var(--spc-40) var(--spc-15);
  }
  /* .g-cate__list a{
    display: grid;
    grid-template-columns: clamp( 50px, 5.556vw, 80px) 1fr;
    align-items: center;
    gap: 10px;
  } */
  .g-cate__txt{
    font-size: clamp( 12px, 1.111vw, 16px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1000px){
  .g-cate__list{
    grid-template-columns: repeat(4,1fr);
    gap: 15px;
  }
}
@media (hover: hover){
  .g-cate__list a:hover{
    opacity: 1;
  }
  .g-cate__list a:hover img{
    opacity: 1 !important;
    transform: scale(1.1);
  }
}
@media screen and (max-width: 767px){
  .g-cate__list{
    grid-template-columns: repeat(2,1fr);
    gap: 20px 10px;
  }
  /* .g-cate__list a{
    display: grid;
    grid-template-columns: 60px 1fr;
    align-items: center;
    gap: 10px;
  } */
  .g-cate__txt{
    font-size: 14px;
  }
}

/* 新商品 */
@media screen and (min-width: 768px) and (max-width: 900px){
  .g-new .g-reco__inner{
    grid-template-columns: repeat(3,1fr);
  }
}

/* -----------------ギフト----------------- */
.g-gift{
  background: var(--orange-400);
  border-radius: 30px;
}
.g-gift__text{
  font-size: var(--fz-16);
  font-weight: 500;
}
.g-gift .g-headingContainerSub{
  margin-bottom: 10px;
}
@media screen and (min-width: 768px){
  .g-gift{
    padding: var(--spc-40) var(--spc-35);
  }
  .g-gift__con{
    display: grid;
    align-items: center;
    grid-template-columns: 330fr 518fr;
    gap: var(--spc-35);
    margin-bottom: var(--spc-20);
  }
}
@media screen and (min-width: 768px) and (max-width: 900px){
  .g-gift .g-reco__inner{
    grid-template-columns: repeat(3,1fr);
  }
}
@media screen and (max-width: 767px){
  .g-gift{
    padding: 22px 20px;
    border-radius: 20px;
  }
  .g-gift__con{
    margin-bottom: 20px;
  }
  .g-gift__img{
    max-width: 500px;
    margin: 0 auto 15px;
  }
  .g-gift .g-reco__inner{
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
  }
  .g-gift .g-reco__inner .g-reco__item{
    width: 100px;
    min-width: 100px;
  }
}

/* ===== t-bannerScroll ===== */
.t-bannerScroll_track {
  overflow: hidden;
  /* 端をふわっと消す。不要なら削除 */
  /* -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); */
}

.t-bannerScroll_marquee {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: t-bannerScroll-flow var(--flow-duration, 40s) linear infinite;
}

.t-bannerScroll_list {
  display: flex;
  align-items: center;
  gap: var(--flow-gap, 180px);
  padding: 0 var(--flow-gap, 180px) 0 0; /* 継ぎ目のgapを揃える */
  margin: 0;
  list-style: none;
}

.t-bannerScroll_item { flex: 0 0 auto; }

.t-bannerScroll_item figure { margin: 0; }
.t-bannerScroll_item a { display: block; }
.t-bannerScroll_item img {
  display: block;
  height: auto;
  border-radius: 25px;
}

@keyframes t-bannerScroll-flow {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--flow-distance, -50%), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .t-bannerScroll_marquee { animation: none; }
  .t-bannerScroll_track { overflow-x: auto; }
}
@media screen and (min-width: 768px){
  .t-bannerScroll_item:nth-child(odd) img{
    width: 200px;
  }
  .t-bannerScroll_item:nth-child(even) img{
    width: 160px;
  }
}
@media screen and (max-width: 768px) {
  .t-bannerScroll_list { --flow-gap: 40px; }
  .t-bannerScroll_item:nth-child(odd) img{
    width: 100px;
  }
  .t-bannerScroll_item:nth-child(even) img{
    width: 70px;
  }
}

/* -----------------閲覧履歴----------------- */
.g-recoHistry :is(.fs-c-productName,.fs-c-productPrices){
	display: none;
}
@media screen and (min-width: 768px){
	.g-recoHistry .g-reco__inner{
		display: grid;
		grid-template-columns: repeat(8,1fr);
		gap: 13px;
	}
}
@media screen and (max-width: 767px){
  .g-histry{
    overflow: hidden;
    padding-left: calc((100% - var(--inner-w)) / 2);
  }
	.g-recoHistry .g-reco__inner{
		margin-right: calc(50% - 50vw);
		display: flex;
		gap: 10px;
		overflow-x: auto;
	}
	.g-recoHistry .g-reco__inner .g-reco__item{
		width: 85px;
		min-width: 85px;
	}
}

/* -----------------お知らせ----------------- */
.g-news__list{
  width: var(--inner-w);
  margin-inline: auto;
  max-width: 800px;
}
.g-news__item:not(:last-child){
  border-bottom: 1px solid var(--orange-450);
}
.g-news__item:first-child{
  padding-top: 0;
}
.g-news__item:last-child{
  padding-bottom: 0;
}

.g-news__time{
  font-size: var(--fz-18);
  font-weight: 500;
}
.g-news__cate{
  display: inline-block;
  border: 1px solid;
  background: var(--c-white);
  text-align: center;
  font-weight: 500;
  border-radius: 50px;
  padding-block: 8px;
  line-height: 1;
}
.g-news__text{
  display: block;
  font-weight: 500;
  font-size: var(--fz-18);
  overflow: hidden;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}
@media screen and (min-width: 768px){
  .g-news__box{
    display: contents;
  }
  .g-news__item{
    padding: 17px 6px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .g-news__cate{
    width: 120px;
    font-size: var(--fz-14);
  }
  .g-news__text{
    flex: 1;
    -webkit-line-clamp: 1;
  }
}
@media screen and (max-width: 767px){
  .g-news__box{
    display: flex;
    gap: 20px;
    margin-bottom: 8px;
  }
  .g-news__item{
    padding: 17px 6px;
  }
  .g-news__cate{
    width: 100px;
    font-size: var(--fz-14);
    padding-block: 5px;
  }
  .g-news__text{
    -webkit-line-clamp: 2;
  }
}

/* -----------------店舗情報----------------- */
.g-store{
  background: var(--c-white);
  box-shadow: var(--bxsd-orange);
}
.g-store__item{
  display: grid;
  padding: 11px 8px;
}
.g-store__item:not(:last-child){
  border-bottom: 1px solid var(--orange-450);
}
.g-store__item:first-child{
padding-top: 0;
}
.g-store__item:last-child{
  padding-bottom: 0;
}
.g-store__title{
  font-weight: bold;
  font-size: var(--fz-18);
}
.g-store__text{
  font-weight: 500;
  font-size: var(--fz-18);
  line-height: 1.4;
}
.g-store__text__small{
  font-size: var(--fz-13);
}
.g-store__text__small a{
  text-decoration: underline;
}
@media screen and (min-width: 768px){
  .g-store__inner{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: var(--spc-40);
  }
  .g-store__item{
    grid-template-columns: 100px 1fr;
  }
}
@media screen and (max-width: 767px){
  .g-store__img{
    width: 100%;
    margin-inline: auto;
    margin-bottom: 25px;
  }
  .g-store__item{
    grid-template-columns: 90px 1fr;
  }
  .g-store__title{
    font-size: 14px;
  }
  .g-store__text{
    font-size: 13px;
  }
}

/* -----------------ブログ----------------- */
.g-blog__con{
  display: grid;
}
.g-blog__txt{
  margin-top: 8px;
  font-weight: bold;
  font-size: var(--fz-18);
  line-height: 1.5;
  overflow: hidden;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 2;
}
.g-blog__img{
  overflow: hidden;
}
.g-blog__img img{
  aspect-ratio: 386/257;
  object-fit: cover;
}
@media screen and (min-width: 768px){
  .g-blog__con{
    grid-template-columns: repeat(3,1fr);
    gap: var(--spc-20);
  }
  .g-blog__con > :last-child{
    display: none;
  }
}
@media (hover: hover){
  .g-blog__item a:hover{
    opacity: 1;
  }
  .g-blog__item a:hover img{
    opacity: 1 !important;
    transform: scale(1.1);
  }
}
@media screen and (max-width: 767px){
  .g-blog__con{
    grid-template-columns: repeat(2,1fr);
    gap: 15px 10px;
  }
  .g-blog__txt{
    font-size: 12px;
  }
}

/* -----------------ご利用ガイド----------------- */
.g-guide{
  background: var(--c-white);
  box-shadow: var(--bxsd-orange);
}
.g-guide__con{
  display: grid;
}
.g-guide__icon{
  aspect-ratio: 1;
  background: var(--orange-500) no-repeat center center / 70%;
  border-radius: 50%;
}
.g-guide__ttl{
  font-weight: bold;
  letter-spacing: 0.05em;
}
.g-guide__txt{
  letter-spacing: 0.05em;
}
.g-guide__txt a{
  text-decoration: underline;
}
@media screen and (min-width: 768px){
  .g-guide__con{
    grid-template-columns: repeat(3,1fr);
    gap: var(--spc-40);
  }
  .g-guide__icon{
    width: 76px;
    margin: 0 auto 10px;
  }
  .g-guide__ttl{
    font-size: var(--fz-18);
    margin-bottom: 10px;
    text-align: center;
  }
  .g-guide__txt{
    font-size: var(--fz-14);
  }
}
@media screen and (max-width: 767px){
  .g-guide__con > li:not(:last-child){
    border-bottom: 1px solid var(--orange-500);
  }
  .g-guide__con > li{
    padding: 15px 0px;
  }
  .g-guide__con > li:first-child{
  padding-top: 0;
  }
  .g-guide__con > li:last-child{
    padding-bottom: 0;
  }
  .g-guide__con > li{
    display: grid;
    grid-template-columns: 55px 1fr;
    align-items: center;
    gap: 15px;
  }
  .g-guide__ttl{
    font-size: 14px;
    margin-bottom: 5px;
  }
  .g-guide__txt{
    font-size: 12px;
  }
}

/* -----------------フッター・ハンバーガー・バナー----------------- */
.g-bannersList{
  display: contents;
}
.g-banners{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 9px;
}
.g-bannersList a{
  display: block;
}
.g-bannersList .fs-pt-column__image{
  display: block;
  overflow: hidden;
}
@media (hover: hover){
  .g-bannersList a:hover{
    opacity: 1;
  }
  .g-bannersList a:hover img{
    transform: scale(1.1);
    opacity: 1 !important;
  }
}

/* -----------------フッター・ハンバーガー・sns----------------- */
.g-sns{
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: var(--spc-20);
}
.g-sns a{
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: var(--spc-15);
  background: var(--c-white);
  padding: var(--spc-15) var(--spc-20);
  border-radius: 4px;
  height: 100%;
}
.g-sns__body{
  line-height: 1.4;
  letter-spacing: 0.05em;
}
.g-sns__title{
  font-weight: bold;
  font-size: var(--fz-12);
  margin-bottom: 1px;
}
.g-sns__name{
  font-size: var(--fz-12);
}
.g-sns a:has(.g-sns__QR){
  grid-template-columns: 41px 1fr 45px;
}

@media screen and (min-width: 768px) and (max-width: 1250px){
  .g-sns{
    grid-template-columns: repeat(3,1fr);
  }
}

/* --------- パララックス ---------- */
.g-para .fs-pt-column__item {
  height: auto;
  overflow: hidden;
  position: relative;
  align-self: start;
  padding: 0px;
}
.g-para .fs-pt-column__image {
  display: block;
  overflow: hidden;
}
.g-para .fs-pt-column__item img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  transform: translate3d(0, var(--para-y, 0px), 0) scale(1.1);
}
@media screen and (min-width: 768px) {
  .g-para {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .g-para .fs-pt-column__item{
    height: 300px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .g-para .fs-pt-column__item img { transform: none; }
}
@media screen and (max-width: 767px){
    .g-para .fs-pt-column__item{
    aspect-ratio: 720/300;
  }
  .g-para .fs-pt-column__item:nth-child(n+2){
    display: none;
  }
}

/* --------- カレンダー ---------- */
.cl-calendar {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 20px;
  gap: 20px;
  max-width: 100%;
  color: #231815;
}
.cl-month{
  background: var(--c-white);
  padding: 2px 10px 10px;
}
@media screen and (max-width: 767px){
  .cl-calendar{
    display: flex;
    overflow-x: scroll;
  }
  .cl-month{
    width: 200px;
    min-width: 200px;
  }
}
.cl-month-name {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  margin: 0;
  padding: 0 0 4px;
  border-bottom: 1px solid #ccc6bc;
  color: #3c3838;
  font-weight: 700;
  line-height: 1;
}

.cl-month-number {
  font-size: 36px;
  line-height: 40px;
}

.cl-month-unit {
  font-size: 16px;
  line-height: 20px;
}

.cl-table {
  width: 100%;
  margin: 5px 0 0;
  border: 0;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 11px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
}

.cl-table .cl-weekday {
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  font-weight: 500;
  text-align: center;
  vertical-align: middle;
}

.cl-table .cl-day,
.cl-table .cl-empty {
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  vertical-align: middle;
}

.cl-date {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0 auto;
  border: 1px solid transparent;
  border-radius: 50%;
  letter-spacing: 0.05em;
  padding-bottom: 1px;
}

.cl-weekday-0 {
  color: #bb563c;
}

.cl-weekday-6 {
  color: #6999ae;
}

.cl-public-holiday {
  color: #bb563c;
}

.cl-closed .cl-date {
  border-color: #595758;
}

.cl-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin: 0;
  color: #595758;
  font-size: 11px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.05em;
}

.cl-legend-mark {
  box-sizing: border-box;
  display: inline-block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border: 1px solid #595758;
  border-radius: 50%;
}


/* --------- 下層見出し ---------- */
.s-pageHeading {
	max-width: 600px;
	margin-top: var(--spc-30);
	padding: var(--spc-20) var(--spc-30);
	border-radius: 50px;
	background: var(--c-white);
	font-size: clamp(20px, 1.806vw, 26px);
	font-weight: 500;
	line-height: 1.54;
	text-align: center;
}

@media screen and (max-width: 767px) {
	.s-pageHeading {
		max-width: 92%;
		margin-top: 20px;
		padding: 16px 20px;
		font-size: 22px;
	}
}