html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 76px; } /* 固定ナビに見出しが隠れないように */
body {
  background-color: #F7EFE5;
  overflow-x: hidden;
  /* 和紙の繊維を思わせる、ごく淡いテクスチャ */
  background-image:
    linear-gradient(105deg, rgba(198,154,85,0.035) 0%, transparent 40%),
    linear-gradient(255deg, rgba(74,52,38,0.025) 0%, transparent 45%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(74,52,38,0.012) 3px 4px);
}

/* 読み込み：蒸籠からまんじゅうが蒸し上がる短い導入 */
html.is-loading,
html.is-loading body {
  overflow: hidden;
}
.page-loader {
  display: none;
}
.js .page-loader {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(252,248,241,.96) 0 16rem, transparent 32rem),
    #F7EFE5;
  color: #4A3426;
  opacity: 1;
  visibility: visible;
  transition: opacity .55s ease, visibility 0s linear 0s;
}
.js:not(.is-loading) .page-loader {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease, visibility 0s linear .55s;
}
.page-loader::before,
.page-loader::after {
  content: '';
  position: absolute;
  width: min(70vw, 27rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198,154,85,.2), transparent);
}
.page-loader::before {
  top: 14%;
  transform: rotate(-7deg);
}
.page-loader::after {
  bottom: 14%;
  transform: rotate(6deg);
}
.loader-scene {
  position: relative;
  width: 10rem;
  height: 8.5rem;
  margin-bottom: 1rem;
}
.loader-steam {
  position: absolute;
  z-index: 1;
  top: -.5rem;
  left: 50%;
  width: 6.5rem;
  height: 5rem;
  transform: translateX(-50%);
}
.loader-steam i {
  position: absolute;
  bottom: 0;
  width: 1.5rem;
  height: 4rem;
  border-left: 2px solid rgba(198,154,85,.5);
  border-radius: 50%;
  opacity: 0;
  animation: loaderSteam 1.8s ease-in-out infinite;
}
.loader-steam i:first-child {
  left: .6rem;
  animation-delay: -.35s;
}
.loader-steam i:nth-child(2) {
  left: 2.7rem;
  height: 4.7rem;
}
.loader-steam i:last-child {
  right: .25rem;
  animation-delay: -.75s;
}
.loader-manju {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 2.35rem;
  width: 5.4rem;
  height: 3.8rem;
  border: 1px solid rgba(198,154,85,.3);
  border-radius: 50% 50% 43% 43% / 62% 62% 38% 38%;
  background:
    radial-gradient(circle at 43% 24%, rgba(255,255,255,.85), transparent 22%),
    linear-gradient(145deg, #FFFDF8, #EADBC4);
  box-shadow: 0 12px 24px -18px rgba(74,52,38,.7);
  transform: translateX(-50%);
  animation: loaderManju 1.4s cubic-bezier(.2,.75,.2,1) both;
}
.loader-manju i {
  position: absolute;
  top: .45rem;
  left: 50%;
  width: 1px;
  height: 1rem;
  background: rgba(198,154,85,.3);
  transform-origin: bottom center;
}
.loader-manju i:first-child { transform: translateX(-50%) rotate(-35deg); }
.loader-manju i:nth-child(2) { transform: translateX(-50%); }
.loader-manju i:last-child { transform: translateX(-50%) rotate(35deg); }
.loader-seiro-lid {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 2.25rem;
  width: 8.7rem;
  height: .65rem;
  border: 1px solid rgba(74,52,38,.2);
  border-radius: 50%;
  background: #D9B879;
  box-shadow: inset 0 2px rgba(255,255,255,.24);
  transform: translateX(-50%);
}
.loader-seiro {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: .4rem;
  width: 8rem;
  height: 2.25rem;
  overflow: hidden;
  border: 1px solid rgba(74,52,38,.2);
  border-radius: .25rem .25rem 1rem 1rem / .25rem .25rem .45rem .45rem;
  background:
    repeating-linear-gradient(90deg, transparent 0 1rem, rgba(74,52,38,.07) 1rem 1.08rem),
    linear-gradient(#E2C589, #CDA865);
  box-shadow: 0 18px 28px -20px rgba(74,52,38,.65);
}
.loader-seiro span {
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background: rgba(74,52,38,.18);
}
.loader-seiro span:first-child { top: .55rem; }
.loader-seiro span:last-child { bottom: .5rem; }
.loader-shop-name {
  margin-bottom: .55rem;
  font-family: 'Shippori Mincho', serif;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: .32em;
  text-indent: .32em;
}
.loader-message {
  color: rgba(74,52,38,.56);
  font-family: 'Shippori Mincho', serif;
  font-size: .7rem;
  letter-spacing: .2em;
  text-indent: .2em;
}
.loader-brush {
  position: relative;
  width: 7.5rem;
  height: 2px;
  margin-top: 1.15rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(198,154,85,.16);
}
.loader-brush i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, #B5342C 22% 78%, transparent);
  transform: translateX(-100%);
  animation: loaderBrush 1.5s cubic-bezier(.2,.75,.2,1) infinite;
}
@keyframes loaderSteam {
  0% { opacity: 0; transform: translateY(.8rem) scaleY(.75); }
  35% { opacity: .65; }
  100% { opacity: 0; transform: translateY(-1.4rem) scaleY(1.15); }
}
@keyframes loaderManju {
  from { opacity: 0; transform: translate(-50%, 1rem) scale(.9); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes loaderBrush {
  0% { transform: translateX(-100%); }
  48%, 62% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* セクションの端に、蒸しまんじゅうの丸みとひだを抽象化した地紋を置く */
.section-manju {
  isolation: isolate;
}
.section-manju > div:not([aria-hidden="true"]) {
  position: relative;
  z-index: 1;
}
.section-manju::before,
.section-manju::after {
  content: '';
  position: absolute;
  z-index: 0;
  width: clamp(18rem, 36vw, 34rem);
  aspect-ratio: 1.12;
  border: 1px solid rgba(198,154,85,.12);
  border-radius: 50% 50% 45% 45% / 58% 58% 42% 42%;
  background:
    repeating-conic-gradient(from 255deg at 50% 24%, rgba(198,154,85,.055) 0 2deg, transparent 2deg 12deg),
    radial-gradient(ellipse at 50% 34%, rgba(252,248,241,.72), rgba(241,230,214,.2) 62%, transparent 63%);
  pointer-events: none;
}
.section-manju::before {
  top: -17rem;
  right: -8rem;
  transform: rotate(8deg);
}
.section-manju::after {
  bottom: -20rem;
  left: -10rem;
  transform: rotate(-12deg) scale(.88);
}
.section-manju--menu::before {
  top: 2rem;
  right: -13rem;
  opacity: .72;
}
.section-manju--menu::after {
  bottom: 1rem;
  left: -14rem;
  opacity: .55;
}
.section-manju--dark::before,
.section-manju--dark::after {
  border-color: rgba(247,239,229,.08);
  background:
    repeating-conic-gradient(from 255deg at 50% 24%, rgba(247,239,229,.035) 0 2deg, transparent 2deg 12deg),
    radial-gradient(ellipse at 50% 34%, rgba(247,239,229,.07), rgba(198,154,85,.025) 62%, transparent 63%);
}
.section-manju--dark::before {
  top: -20rem;
  right: 8%;
}
.section-manju--dark::after {
  bottom: -22rem;
  left: 10%;
}
.section-manju--heart::before {
  top: 5rem;
  right: -15rem;
  opacity: .55;
}
.section-manju--heart::after {
  display: none;
}
.section-manju--shop::before {
  top: auto;
  right: -11rem;
  bottom: -15rem;
}
.section-manju--shop::after {
  top: 7rem;
  bottom: auto;
  left: -14rem;
}
.section-manju--closing::before {
  top: 50%;
  right: 50%;
  width: min(42rem, 92vw);
  transform: translate(50%, -52%);
  opacity: .58;
}
.section-manju--closing::after {
  display: none;
}

.washi-card {
  background-color: #FCF8F1;
  box-shadow: 0 1px 0 rgba(74,52,38,0.04) inset, 0 16px 36px -24px rgba(74,52,38,0.45);
  border: 1px solid rgba(74,52,38,0.08);
  transition: transform .35s ease, box-shadow .35s ease;
}
.washi-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 0 rgba(74,52,38,0.04) inset, 0 24px 44px -24px rgba(74,52,38,0.5);
}
.no-lift, .no-lift:hover { transform: none !important; box-shadow: 0 1px 0 rgba(74,52,38,0.04) inset, 0 16px 36px -24px rgba(74,52,38,0.45) !important; }

/* ナビ：最上部では透明、スクロールで背景が現れる */
#siteNav { transition: background-color .4s ease, border-color .4s ease, backdrop-filter .4s ease; background-color: transparent; border-color: transparent; }
#siteNav.scrolled { background-color: rgba(247,239,229,0.92); border-color: rgba(74,52,38,0.1); backdrop-filter: blur(6px); }

/* スクロールを促す湯気の合図 */
.scroll-cue-line { animation: cueDrop 2.2s ease-in-out infinite; transform-origin: top center; }
@keyframes cueDrop { 0% { transform: scaleY(0); opacity: 0; } 30% { opacity: .7; } 70% { transform: scaleY(1); opacity: .7; } 100% { transform: scaleY(1); opacity: 0; } }

/* モバイルメニュー */
#mobileMenu { transition: opacity .3s ease, transform .3s ease; }
#mobileMenu.hidden-menu { opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden; }
#menuBtn span { transform-origin: center; }
#menuBtn[aria-expanded="true"] span:first-child { transform: translateY(7px) rotate(45deg); }
#menuBtn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
#menuBtn[aria-expanded="true"] span:last-child { transform: translateY(-7px) rotate(-45deg); }

/* 落款（らっかん）風の朱印ラベル */
.rakkan {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  background: #B5342C;
  color: #F7EFE5;
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  letter-spacing: 0.35em;
  padding: 0.9em 0.42em 0.6em;
  border-radius: 4px;
  box-shadow: 0 2px 0 rgba(150,40,31,0.6), 0 6px 14px -6px rgba(181,52,44,0.5);
  line-height: 1;
}

/* 筆のかすれ罫線 */
.fude-rule { height: 10px; background-repeat: no-repeat; background-position: center; background-size: contain; }

/* 縦書き */
.tategaki { writing-mode: vertical-rl; text-orientation: mixed; }

.steam-line {
  animation: steamRise 3.4s ease-in-out infinite;
  transform-origin: bottom center;
}
.steam-line:nth-child(2) { animation-delay: .55s; }
.steam-line:nth-child(3) { animation-delay: 1.1s; }
@keyframes steamRise {
  0%   { transform: translateY(0) scaleY(1);   opacity: 0; }
  15%  { opacity: .5; }
  55%  { opacity: .3; }
  100% { transform: translateY(-24px) scaleY(1.22); opacity: 0; }
}

.fade-up { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
.fade-up.in { opacity: 1; transform: translateY(0); }

/* ふう太が歩いて登場（ヒーロー・マスコット紹介） */
.walk-in { opacity: 0; transform: translateX(-46px); transition: opacity .9s ease, transform 1s cubic-bezier(.25,.8,.35,1); }
.walk-in.in { opacity: 1; transform: translateX(0); }

/* 画面下部：ふう太がスクロールに合わせて歩く道 */
#walkTrack { height: 54px; }
#walkLine { height: 2px; background-image: repeating-linear-gradient(90deg, rgba(74,52,38,.3) 0 10px, transparent 10px 20px); }
#walkProgress {
  transform-origin: left center;
  will-change: transform;
  backface-visibility: hidden;
}
#walker {
  contain: layout paint;
  will-change: transform;
  backface-visibility: hidden;
}
#walker img {
  transform: scaleX(-1);
  backface-visibility: hidden;
} /* 進行方向（右）を向かせる */
.stepping {
  animation: step .45s ease-in-out infinite;
  will-change: transform;
}
@keyframes step { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-3px) rotate(1.5deg); } }

.bob-soft { animation: bobSoft 5s ease-in-out infinite; }
@keyframes bobSoft { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.bubble { position: relative; }
.bubble::after {
  content: '';
  position: absolute;
  bottom: 24px; left: -9px;
  width: 18px; height: 18px;
  background: inherit;
  border-left: inherit;
  border-bottom: inherit;
  transform: rotate(45deg);
}

/* 商品一覧：スマホでは指で送れるカードレール */
.product-scroller {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-padding-inline: 1.25rem;
}
.product-scroller::-webkit-scrollbar { display: none; }

/* 物語：店主の縦長ポートレートと文章を一枚の和紙に収める */
.story-card {
  display: grid;
  gap: 2rem;
  align-items: start;
}
.owner-profile {
  width: min(100%, 14rem);
  margin-inline: auto;
}
.owner-photo-placeholder,
.owner-photo {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 3 / 4;
  place-items: end center;
  overflow: hidden;
  border: 1px solid rgba(74,52,38,.12);
  border-radius: 50% 50% .45rem .45rem / 10% 10% .45rem .45rem;
  background:
    radial-gradient(circle at 50% 34%, rgba(74,52,38,.16) 0 11%, transparent 11.5%),
    radial-gradient(ellipse at 50% 102%, rgba(74,52,38,.13) 0 38%, transparent 38.5%),
    linear-gradient(145deg, rgba(252,248,241,.85), rgba(232,220,200,.75));
  box-shadow: 0 18px 36px -26px rgba(74,52,38,.55);
}
.owner-photo-placeholder::before {
  content: '';
  position: absolute;
  inset: .55rem;
  border: 1px solid rgba(198,154,85,.22);
  border-radius: inherit;
  pointer-events: none;
}
.owner-photo-placeholder::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 58%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(181,52,44,.65), transparent);
  transform: translateX(-50%);
}
.owner-photo-placeholder span {
  position: relative;
  z-index: 1;
  margin-bottom: 1rem;
  color: rgba(74,52,38,.4);
  font-family: 'Shippori Mincho', serif;
  font-size: .68rem;
  letter-spacing: .28em;
}
.owner-photo {
  object-fit: cover;
}
.owner-profile figcaption {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .65rem;
  margin-top: 1rem;
  font-family: 'Shippori Mincho', serif;
}
.owner-role {
  color: rgba(74,52,38,.52);
  font-size: .72rem;
  letter-spacing: .22em;
}
.owner-name {
  color: #4A3426;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .12em;
}
.story-copy {
  align-self: center;
}

/* 結び：限定セットを主役にした予約導線 */
.reservation-card {
  display: grid;
  overflow: hidden;
  text-align: left;
}
.reservation-visual {
  position: relative;
  min-height: 15rem;
  overflow: hidden;
  background: #E8DCC8;
}
.reservation-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(74,52,38,.16));
  pointer-events: none;
}
.reservation-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.75,.2,1), filter .5s ease;
}
.reservation-visual figcaption {
  position: absolute;
  z-index: 1;
  top: 1rem;
  left: 1rem;
  padding: .55rem .75rem .5rem;
  border: 1px solid rgba(247,239,229,.45);
  border-radius: 3px;
  background: rgba(181,52,44,.92);
  box-shadow: 0 8px 20px -12px rgba(74,52,38,.65);
  color: #F7EFE5;
  font-family: 'Shippori Mincho', serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  backdrop-filter: blur(4px);
}
.reservation-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem 2.25rem;
  text-align: center;
}
.opening-price {
  width: 100%;
  margin-bottom: 1.5rem;
  padding-block: 1rem;
  border-block: 1px solid rgba(198,154,85,.3);
}
.opening-price > span {
  display: block;
  margin-bottom: .35rem;
  color: #B5342C;
  font-family: 'Shippori Mincho', serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
}
.opening-price strong {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .18rem;
  color: #4A3426;
  font-family: 'Shippori Mincho', serif;
  font-size: .9rem;
  font-weight: 700;
}
.opening-price small {
  margin-right: .15rem;
  color: rgba(74,52,38,.58);
  font-size: .65rem;
  letter-spacing: .08em;
}
.opening-price b {
  color: #B5342C;
  font-size: clamp(2rem, 4vw, 2.7rem);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
}

@media (min-width: 768px) {
  .story-card {
    grid-template-columns: minmax(11rem, .72fr) minmax(0, 1.8fr);
    gap: clamp(2rem, 5vw, 3.5rem);
  }
  .reservation-card {
    grid-template-columns: minmax(0, 1.25fr) minmax(19rem, .75fr);
  }
  .reservation-visual {
    min-height: 21.5rem;
  }
  .reservation-copy {
    padding: 3rem 2.5rem;
  }
}

/* 御品書：影だけでなく、包み紙・湯気・筆線が応えるカード */
.product-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  contain: layout paint style;
  border-color: rgba(74,52,38,.09);
  transition:
    opacity .8s ease,
    transform .55s cubic-bezier(.2,.75,.2,1),
    border-color .4s ease,
    box-shadow .55s ease;
}
.product-card::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: auto -30% -46% -30%;
  height: 68%;
  border-radius: 50% 50% 0 0;
  background: radial-gradient(ellipse at 50% 0, rgba(198,154,85,.14), rgba(241,230,214,.2) 48%, transparent 70%);
  opacity: 0;
  transform: translateY(18%);
  transition: opacity .45s ease, transform .55s cubic-bezier(.2,.75,.2,1);
}
.product-card::after {
  content: attr(data-mark);
  position: absolute;
  z-index: 2;
  top: .8rem;
  right: .8rem;
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border: 1px solid rgba(181,52,44,.28);
  border-radius: 3px;
  color: rgba(181,52,44,.7);
  font: 700 .7rem/1 'Shippori Mincho', serif;
  transform: rotate(4deg);
  transition: color .35s ease, background-color .35s ease, transform .45s ease;
}
.product-visual {
  position: relative;
  overflow: hidden;
  border-radius: 48% 48% 44% 44% / 42% 42% 50% 50%;
  background:
    radial-gradient(circle at 48% 36%, rgba(255,255,255,.78), transparent 28%),
    linear-gradient(145deg, #F7EFE5, #F1E6D6);
  transition: border-radius .55s ease, border-color .4s ease, background-color .4s ease;
}
.product-visual::after {
  content: '';
  position: absolute;
  inset: 9%;
  border: 1px dashed rgba(198,154,85,.18);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.88) rotate(-8deg);
  transition: opacity .4s ease, transform .65s ease;
}
.product-image {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(.98);
  transition: transform .55s cubic-bezier(.2,.75,.2,1), filter .45s ease;
}
.product-visual .steam-line {
  opacity: .24;
  transition: opacity .35s ease;
}
.product-title {
  position: relative;
  width: fit-content;
  padding-bottom: .35rem;
}
.product-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #B5342C 0 28%, #C69A55 28% 82%, transparent 82%);
  transform: scaleX(.22);
  transform-origin: left center;
  opacity: .38;
  transition: transform .5s cubic-bezier(.2,.75,.2,1), opacity .4s ease;
}
/* 御品書：品名の下に、税込価格を朱で小さく据える */
.product-price {
  display: flex;
  align-items: baseline;
  gap: .12rem;
  margin: 0 0 .85rem;
  color: #B5342C;
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
}
.product-price small {
  margin-right: .2rem;
  color: rgba(74,52,38,.48);
  font-size: .62rem;
  letter-spacing: .12em;
  font-weight: 700;
}
.product-price b {
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.product-price span {
  font-size: .78rem;
  font-weight: 700;
}

/* 三つの心：朱の数字を中心に、控えめな円相が開く */
.heart-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.heart-card::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -5rem;
  left: 50%;
  width: 11rem;
  aspect-ratio: 1;
  border: 1px solid rgba(198,154,85,.2);
  border-radius: 50%;
  transform: translateX(-50%) scale(.72);
  opacity: 0;
  transition: transform .6s cubic-bezier(.2,.75,.2,1), opacity .4s ease;
}

/* スマホ：スワイプの誘い文（金茶の細線を添えて） */
.product-hint {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: .6rem;
  margin-bottom: .85rem;
  color: rgba(74,52,38,.5);
  font-family: 'Shippori Mincho', serif;
  font-size: .72rem;
  letter-spacing: .14em;
}
.product-hint::after {
  content: '';
  width: 2.4rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198,154,85,.9));
  animation: hintSlide 2.4s ease-in-out infinite;
}
@keyframes hintSlide {
  0%, 100% { transform: translateX(0); opacity: .5; }
  50% { transform: translateX(.35rem); opacity: 1; }
}

/* スマホ：カルーセルの現在地を示す落款色のドット */
.product-dots {
  display: none;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.35rem;
}
.product-dots button {
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: rgba(74,52,38,.22);
  transition: width .4s cubic-bezier(.2,.75,.2,1), background-color .4s ease;
  -webkit-tap-highlight-color: transparent;
}
.product-dots button[aria-selected="true"] {
  width: 1.6rem;
  background: #B5342C;
}

/* スマホ：ヒーロー下部のスクロール誘導 */
.scroll-cue {
  position: absolute;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  color: rgba(74,52,38,.5);
  font-family: 'Shippori Mincho', serif;
  font-size: .68rem;
  letter-spacing: .3em;
  text-indent: .3em;
}
.scroll-cue-rail {
  position: relative;
  width: 1px;
  height: 2.6rem;
  overflow: hidden;
  background: rgba(74,52,38,.12);
}
.scroll-cue-rail .scroll-cue-line {
  position: absolute;
  inset: 0;
  background: #C69A55;
}

@media (hover: hover) and (pointer: fine) {
  .product-card:hover {
    transform: translateY(-9px);
    border-color: rgba(198,154,85,.42);
    box-shadow:
      0 1px 0 rgba(255,255,255,.7) inset,
      0 28px 54px -28px rgba(74,52,38,.44),
      0 10px 24px -20px rgba(198,154,85,.8);
  }
  .product-card:nth-child(even):hover {
    transform: translateY(-9px) rotate(.35deg);
  }
  .product-card:hover::before {
    opacity: 1;
    transform: translateY(0);
  }
  .product-card:hover::after {
    color: #F7EFE5;
    background-color: #B5342C;
    transform: rotate(-3deg) scale(1.06);
  }
  .product-card:hover .product-visual {
    border-radius: 50% 50% 46% 46% / 55% 55% 42% 42%;
    border-color: rgba(198,154,85,.28);
  }
  .product-card:hover .product-visual::after {
    opacity: 1;
    transform: scale(1) rotate(3deg);
  }
  .product-card:hover .product-image {
    transform: scale(1.075);
    filter: saturate(1.04) contrast(1.01);
  }
  .product-card:hover .product-visual .steam-line {
    opacity: .72;
  }
  .product-card:hover .product-title::after {
    transform: scaleX(1);
    opacity: .82;
  }
  .heart-card:hover::before {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
  .heart-card:hover > p:first-child {
    transform: translateY(-2px) rotate(-4deg) scale(1.08);
  }
  .heart-card > p:first-child {
    transition: transform .45s cubic-bezier(.2,.75,.2,1);
  }
  .reservation-card:hover .reservation-visual img {
    transform: scale(1.025);
    filter: saturate(1.035);
  }
}

/* スマホ下部の主要導線 */
#mobileDock {
  padding-bottom: max(.5rem, env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px -22px rgba(74,52,38,.7);
}
.mobile-dock-link {
  min-height: 3.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  border-radius: .5rem;
  color: rgba(74,52,38,.78);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.mobile-dock-link:active { background-color: #F1E6D6; }
.mobile-dock-icon {
  font-family: 'Shippori Mincho', serif;
  font-size: 1rem;
  line-height: 1.2;
}
.mobile-dock-primary {
  background-color: #B5342C;
  color: #F7EFE5;
}
.mobile-dock-primary:active { background-color: #96281F; }

@media (max-width: 767px) {
  html { scroll-padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
  section[id] { scroll-margin-top: 64px; }

  .fade-up {
    transform: translate3d(0, 16px, 0);
    transition-duration: .6s;
    backface-visibility: hidden;
  }
  .fade-up.in {
    transform: translate3d(0, 0, 0);
  }

  #siteNav {
    background-color: rgba(247,239,229,.97);
    border-color: rgba(74,52,38,.08);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  #mobileDock {
    background-color: rgba(252,248,241,.98);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  #mobileMenu {
    max-height: calc(100dvh - 5rem - env(safe-area-inset-bottom));
    overflow-y: auto;
    box-shadow: 0 20px 50px -24px rgba(74,52,38,.65);
  }

  .washi-card:hover {
    transform: none;
    box-shadow: 0 1px 0 rgba(74,52,38,0.04) inset, 0 16px 36px -24px rgba(74,52,38,0.45);
  }
  .product-card:active {
    transform: scale(.985);
    border-color: rgba(198,154,85,.32);
  }
  .product-hint { display: flex; }
  .product-dots { display: flex; }
  .scroll-cue { display: flex; }
  .section-manju::before,
  .section-manju::after {
    width: 19rem;
    opacity: .48;
  }
  .section-manju--menu::before,
  .section-manju--menu::after {
    background: radial-gradient(ellipse at 50% 34%, rgba(252,248,241,.68), rgba(241,230,214,.16) 62%, transparent 63%);
  }

  .bubble::after {
    left: 50%;
    top: -9px;
    bottom: auto;
    transform: translateX(-50%) rotate(225deg);
  }

  /* スクロールで中央に来たカードを、PCのhover相当まで“ひらく” */
  .product-card.is-active {
    transform: translateY(-6px);
    border-color: rgba(198,154,85,.42);
    box-shadow:
      0 1px 0 rgba(255,255,255,.7) inset,
      0 24px 46px -26px rgba(74,52,38,.46),
      0 10px 24px -20px rgba(198,154,85,.8);
  }
  .product-card.is-active::before {
    opacity: 1;
    transform: translateY(0);
  }
  .product-card.is-active::after {
    color: #F7EFE5;
    background-color: #B5342C;
    transform: rotate(-3deg) scale(1.06);
  }
  .product-card.is-active .product-visual {
    border-radius: 50% 50% 46% 46% / 55% 55% 42% 42%;
    border-color: rgba(198,154,85,.28);
  }
  .product-card.is-active .product-visual::after {
    opacity: 1;
    transform: scale(1) rotate(3deg);
  }
  .product-card.is-active .product-image {
    transform: scale(1.06);
  }
  .product-card.is-active .product-title::after {
    transform: scaleX(1);
    opacity: .82;
  }

  /* 三つの心：画面中央に入った札の円相がひらき、数字がふわり */
  .heart-card > p:first-child {
    transition: transform .5s cubic-bezier(.2,.75,.2,1);
  }
  .heart-card.is-active::before {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
  .heart-card.is-active > p:first-child {
    transform: translateY(-2px) rotate(-4deg) scale(1.08);
  }

  /* 結び：限定セットの写真がそっと寄る */
  .reservation-card.is-active .reservation-visual img {
    transform: scale(1.04);
  }
  .product-image,
  .reservation-visual img {
    filter: none;
    transition-property: transform;
  }

  /* ふう太の散歩道：ドックの“屋根”として、そのすぐ上を歩かせる */
  #walkTrack {
    bottom: calc(4.15rem + env(safe-area-inset-bottom));
    height: 40px;
    padding-bottom: 0;
    z-index: 39;
    opacity: .92;
  }
  #walkLine {
    background-image: repeating-linear-gradient(90deg, rgba(74,52,38,.22) 0 8px, transparent 8px 16px);
  }
  #walker {
    width: 2.35rem;
    height: 2.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.is-loading,
  html.is-loading body { overflow: auto; }
  .page-loader { display: none !important; }
  .steam-line, .bob-soft, .stepping, .scroll-cue-line { animation: none !important; }
  .fade-up, .walk-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .washi-card, .washi-card:hover, .product-card, .product-card:hover { transform: none !important; }
  .product-card::before,
  .product-card::after,
  .product-visual,
  .product-visual::after,
  .product-image,
  .product-title::after,
  .heart-card::before,
  .heart-card > p:first-child,
  .reservation-visual img { transition: none !important; }
  #walkTrack { display: none !important; }
}

::selection { background: #E8DCC8; color: #4A3426; }
:focus-visible { outline: 3px solid #B5342C; outline-offset: 3px; border-radius: 4px; }