/* =========================================================
   コメぶんのパン LP
   ・背景は「文字を抜いた完成図」の画像（img/）
   ・文字は Zen Kaku Gothic New の本物のテキストを、完成図と同じ位置に重ねています
   ・位置や大きさの数字は、すべて 780px アートボード上の px です
     （--x:90 ＝ 左から90px。画面幅に合わせて自動で拡大・縮小）
   ========================================================= */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#efeee8;color:#694e2e;font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500}
h1,h2,h3,p,ul,li{margin:0;padding:0;font-size:inherit;font-weight:inherit}
ul{list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ページ：スマホ幅のまま中央に（最大480px） */
.page{display:block;width:100%;max-width:480px;margin:0 auto;background:#fff;overflow:hidden;
  container-type:inline-size;box-shadow:0 0 40px rgba(105,78,46,.08)}
.page *{--p:.5px}
@supports (width:1cqw){ .page *{--p:calc(100cqw / 780)} }

/* 背景のかたまり */
.cv{position:relative}
.bg{width:100%;height:auto}

/* 文字（1行ずつ） */
.tx{
  position:absolute;white-space:nowrap;transform-origin:0 50%;
  left:calc(var(--x)*var(--p));top:calc(var(--y)*var(--p));
  font-size:calc(var(--s)*var(--p));line-height:calc(var(--h)*var(--p));
  letter-spacing:calc(var(--ls,0)*var(--p));
  font-weight:var(--w,500);color:var(--c,#694e2e);
  font-feature-settings:"palt" 0;
}
.tx .s{font-size:calc(var(--s)*var(--p));font-weight:var(--w,inherit)}

/* 押せる場所 */
.hit,.pill{position:absolute;display:block;
  left:calc(var(--x)*var(--p));top:calc(var(--y)*var(--p));
  width:calc(var(--w2)*var(--p));height:calc(var(--h2)*var(--p))}
.pill{border-radius:999px}
.pill::after{content:"";position:absolute;inset:-8px 0}           /* 押せる範囲を少し広げる */
.pill:active{box-shadow:inset 0 0 0 999px rgba(0,0,0,.08)}
.hit:active{background:rgba(255,255,255,.18)}
a:focus-visible,button:focus-visible{outline:3px solid #694e2e;outline-offset:3px}

/* 読み上げ用（画面には出さない） */
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 商品カルーセル ---------- */
.products{position:relative;height:calc(1034*var(--p));background:#fff}
.carousel__dots{position:absolute;left:0;right:0;top:calc(11*var(--p));display:flex;justify-content:center;gap:calc(17.5*var(--p))}
.carousel__dots button{position:relative;width:calc(21*var(--p));height:calc(21*var(--p));padding:0;border:0;border-radius:50%;
  background:var(--dc);cursor:pointer;transition:transform .2s,box-shadow .2s}
.carousel__dots button::after{content:"";position:absolute;inset:-10px}
.carousel__dots button[aria-current="true"]{box-shadow:0 0 0 calc(3*var(--p)) #fff,0 0 0 calc(5.5*var(--p)) #a69179}

.carousel__track{
  position:absolute;left:0;right:0;top:calc(52*var(--p));height:calc(864*var(--p));
  display:flex;gap:calc(24*var(--p));padding:0 calc(70*var(--p));
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.carousel__track::-webkit-scrollbar{display:none}
.card{position:relative;flex:0 0 calc(640*var(--p));height:calc(864*var(--p));scroll-snap-align:center;scroll-margin-top:40px}
.card__bg{position:absolute;inset:0;width:100%;height:100%}
.card-btn{background:#75854f}

/* PC（マウス）のときだけ左右の矢印 */
.carousel__arrow{display:none}
@media (hover:hover) and (pointer:fine){
  .carousel__arrow{display:flex;align-items:center;justify-content:center;position:absolute;z-index:2;top:calc(450*var(--p));
    width:36px;height:36px;border-radius:50%;border:0;background:rgba(105,78,46,.85);color:#fff;
    font-size:24px;line-height:1;padding:0 0 3px;cursor:pointer;transition:opacity .2s}
  .carousel__arrow.prev{left:8px}.carousel__arrow.next{right:8px}
  .carousel__arrow[disabled]{opacity:0;pointer-events:none}
}

/* 店舗名（Googleのお店情報へ） */
.stores a .tx{padding:calc(6*var(--p)) 0;margin-top:calc(-6*var(--p))}
.stores a:active .tx{opacity:.6}

.stores a .tx::before{content:"";position:absolute;left:calc(-30*var(--p));top:50%;width:calc(19*var(--p));height:calc(25*var(--p));
  transform:translateY(-50%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath fill='%2375854f' d='M12 0C5.4 0 0 5.3 0 11.9 0 20.8 12 32 12 32s12-11.2 12-20.1C24 5.3 18.6 0 12 0zm0 16.5a4.6 4.6 0 1 1 0-9.2 4.6 4.6 0 0 1 0 9.2z'/%3E%3C/svg%3E") center/contain no-repeat}
.stores a .tx::after{content:"›";display:inline-block;margin-left:calc(12*var(--p));color:#75854f;font-weight:700;letter-spacing:0;transform:translateY(-.04em)}