/* oyatsuya pokke webshop */

:root {
  --white: #FFFFFF;
  --milk: #FDFCFB;
  --pink-pale: #F9EDEC;
  --pink: #EFCFCE;
  --pink-deep: #D9A8AC;
  --ink: #6E6862;
  --ink-strong: #55504B;
  --ink-faint: #A39C95;
  --line: #EDE7E2;
  --panel: rgba(255, 255, 255, 0.82);
  --cream: #F6EFDF;
  --cream-deep: #EFE4CD;
  --blue: #B9C4CE;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { max-width: 100%; overflow-x: clip; }

body {
  background: var(--white);
  color: var(--ink);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-weight: 300;
  font-size: 13.5px;
  line-height: 2.1;
  letter-spacing: 0.08em;
}
img { max-width: 100%; display: block; }
ul { list-style: none; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--pink-deep); outline-offset: 3px; }
/* ⚠️ hidden属性は必ず効かせる（2026-09-07）。
   .item に display:flex を付けたら、ブラウザ既定の [hidden]{display:none} を上書きしてしまい、
   販売停止の商品がスマホでだけ一覧に出ていた。display を指定する要素すべてに効くよう、ここで一括で押さえる。 */
[hidden] { display: none !important; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }

/* ── fixed site header ── */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 10px 22px; border-bottom: 1px solid var(--line);
}
.site-head .head-logo img { width: 92px; }
/* ── ゆるポップな固定メニュー（丸ゴシック＋やわらかいピル） ── */
.site-head nav { padding: 0; gap: 4px 6px; align-items: center; }
.site-head nav a {
  font-family: "Hiragino Maru Gothic ProN", "Zen Maru Gothic", "Rounded Mplus 1c", sans-serif;
  font-size: 12.5px; letter-spacing: 0.1em; color: var(--ink);
  padding: 7px 15px; border-radius: 999px; border-bottom: none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.site-head nav a:hover, .site-head nav a:focus-visible {
  background: var(--cream); color: var(--pink-deep);
  border-bottom: none; transform: translateY(-1px);
}
/* 現在地はcream地でハイライト（スマホの吹き出しメニューと同じ見え方に揃える） */
.site-head nav a[aria-current="page"] { background: var(--cream); color: var(--pink-deep); }
.shop-cta {
  font-family: "Hiragino Maru Gothic ProN", "Zen Maru Gothic", sans-serif;
  background: var(--pink); color: var(--ink-strong); border-radius: 999px;
  padding: 9px 24px; font-size: 12px; letter-spacing: 0.14em;
  text-decoration: none; white-space: nowrap;
  transition: background .2s ease, transform .2s ease;
}
.shop-cta:hover { background: var(--pink-deep); color: #FFF; transform: translateY(-1px); }
.shop-cta[aria-current="page"] { background: var(--pink-deep); color: #FFF; }
/* スマホではonline shop内にいるとき自分自身へのCTAが幅を食うので畳む（吹き出しメニューに導線あり）*/
@media (max-width: 720px) { .shop-cta[aria-current="page"] { display: none; } }
/* スマホでは上部のテキストナビを畳んで、右下の吹き出しメニューに集約 */
@media (max-width: 720px) { nav[aria-label="メイン"] { display: none; } }

/* ── スマホ：右下menuボタン → しっぽ付き吹き出しメニュー ── */
.sp-menu { display: none; }
@media (max-width: 720px) {
  .sp-menu {
    display: block; position: fixed; z-index: 60;
    right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  }
  .menu-btn {
    width: 62px; height: 62px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--pink); color: var(--ink-strong);
    font-family: "Hiragino Maru Gothic ProN", "Zen Maru Gothic", sans-serif;
    font-size: 11.5px; letter-spacing: 0.1em;
    box-shadow: 0 4px 14px rgba(110, 104, 98, 0.18);
    transition: background .2s ease, color .2s ease, transform .2s ease;
  }
  .menu-btn[aria-expanded="true"] { background: var(--pink-deep); color: #FFF; transform: scale(0.94); }

  /* 吹き出し本体（右下のボタンからぽんっと出る） */
  .bubble {
    position: absolute; right: 2px; bottom: calc(100% + 16px);
    display: flex; flex-direction: column; gap: 2px;
    min-width: 196px; padding: 12px; text-align: center;
    background: var(--white); border: 1.5px solid var(--pink); border-radius: 22px;
    box-shadow: 0 8px 24px rgba(110, 104, 98, 0.16);
    transform-origin: bottom right;
    animation: bubblepop .3s cubic-bezier(.34, 1.56, .64, 1);
  }
  .bubble[hidden] { display: none; }
  /* しっぽ（枠線ぶんを2枚重ねで作る） */
  .bubble::before, .bubble::after {
    content: ""; position: absolute; right: 22px; width: 0; height: 0;
    border-left: 9px solid transparent; border-right: 9px solid transparent;
  }
  .bubble::before { bottom: -13px; border-top: 13px solid var(--pink); }
  .bubble::after { bottom: -10px; border-top: 13px solid var(--white); }

  .bubble a {
    font-family: "Hiragino Maru Gothic ProN", "Zen Maru Gothic", sans-serif;
    font-size: 13px; letter-spacing: 0.1em; text-decoration: none; color: var(--ink);
    padding: 10px 16px; border-radius: 999px;
  }
  .bubble a:active, .bubble a[aria-current="page"] { background: var(--cream); color: var(--pink-deep); }
  .bubble .bubble-cta {
    margin-top: 8px; padding-top: 16px; border-top: 1px dashed var(--line);
    border-radius: 0; letter-spacing: 0.14em; color: var(--pink-deep);
  }
  /* CTAは角丸なし＝cream地を敷くと四角く浮くので、現在地は文字色だけで示す */
  .bubble .bubble-cta:active,
  .bubble .bubble-cta[aria-current="page"] { background: transparent; }
}
@keyframes bubblepop { from { opacity: 0; transform: scale(.5) translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .bubble { animation: none; } }

/* ── scroll reveal ── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── photo marquee ── */
.marquee { overflow: hidden; margin-top: 76px; }
.marquee-track { display: flex; gap: 14px; width: max-content; animation: marquee 42s linear infinite; }
.marquee-track img { width: 180px; height: 180px; object-fit: cover; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ── illustration placeholder slots（イラスト完成後に差し替え） ── */
.illo-slot {
  border: 2px dashed var(--pink-deep); background: rgba(239, 207, 206, 0.14);
  display: flex; align-items: center; justify-content: center;
  color: var(--pink-deep); font-size: 11px; letter-spacing: 0.12em;
  text-align: center; line-height: 1.7; border-radius: 6px;
}
.illo-mascot {
  position: fixed; right: 18px; bottom: 24px; z-index: 30;
  width: 110px; height: 110px; border-radius: 50%;
  animation: bob 3.2s ease-in-out infinite;
}
/* スマホではmenuボタンの上に逃がす */
@media (max-width: 720px) { .illo-mascot { right: 22px; bottom: 96px; width: 72px; height: 72px; } }
@keyframes bob { 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .illo-mascot { animation: none; } }
.illo-heading { width: 74px; height: 74px; margin: 0 auto 14px; }
.illo-peek { width: 240px; height: 90px; margin: 0 auto; position: relative; top: 14px; }
.illo-parade { max-width: 820px; height: 110px; margin: 70px auto -20px; }
.illo-tile { width: 180px; height: 180px; flex-shrink: 0; }

/* ── instagram grid ── */
.insta { max-width: 760px; margin: 40px auto 0; padding: 0 28px; }
.insta-head { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 22px; }
.insta-head .ig-mark {
  width: 20px; height: 20px; border-radius: 6px;
  border: 1.6px solid var(--ink-strong); position: relative;
}
.insta-head .ig-mark::before {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1.6px solid var(--ink-strong);
}
.insta-head .ig-mark::after {
  content: ""; position: absolute; top: 3px; right: 3px; width: 2.4px; height: 2.4px;
  border-radius: 50%; background: var(--ink-strong);
}
.insta-head a { font-size: 12.5px; letter-spacing: 0.14em; color: var(--ink-strong); text-decoration: none; }
.insta-head a:hover { color: var(--pink-deep); }
.insta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.insta-grid a { display: block; overflow: hidden; position: relative; }
.insta-grid img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; transition: transform .5s ease, opacity .3s ease; }
.insta-grid a:hover img { transform: scale(1.06); opacity: 0.9; }
@media (prefers-reduced-motion: reduce) { .insta-grid img, .insta-grid a:hover img { transition: none; transform: none; } }
@media (max-width: 480px) { .insta-grid { grid-template-columns: repeat(3, 1fr); gap: 5px; } }

/* ── announce bar ── */
.announce {
  background: var(--pink-pale);
  text-align: right; font-size: 11px; letter-spacing: 0.12em;
  padding: 8px 28px; color: var(--ink);
}
@media (max-width: 720px) { .announce { text-align: center; padding: 8px 14px; } }

/* ── header ── */
header { padding: 34px 0 0; text-align: center; }
.logo-img { margin: 0 auto; width: 150px; }
nav {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 8px 34px; padding: 26px 28px 22px;
  font-size: 12px; letter-spacing: 0.14em;
}
nav a { text-decoration: none; color: var(--ink); padding-bottom: 2px; border-bottom: 1px solid transparent; }
nav a:hover { border-bottom-color: var(--pink-deep); color: var(--ink-strong); }

/* ── hero ── */
.hero img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.hero-dots { display: flex; justify-content: center; gap: 10px; padding: 18px 0 0; }
.hero-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.hero-dots span.on { background: var(--pink-deep); }

/* ── section scaffolding ── */
section { padding: 76px 0 0; }
.sec-head { text-align: center; margin-bottom: 44px; }
.sec-head h2 {
  font-size: 22px; font-weight: 300; letter-spacing: 0.38em;
  color: var(--ink-strong); text-transform: uppercase; text-wrap: balance;
  font-family: "Avenir Next", "Futura", "Century Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
}
.sec-head p { font-size: 11px; letter-spacing: 0.3em; color: var(--ink-faint); margin-top: 6px; }

/* ── news ── */
.news { max-width: 720px; margin: 0 auto; padding: 0 28px; }
.news li { display: flex; gap: 26px; border-bottom: 1px solid var(--line); padding: 12px 4px; }
.news time { color: var(--ink-faint); font-size: 12px; letter-spacing: 0.1em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.news a { text-decoration: none; }
.news a:hover { color: var(--pink-deep); }

/* ── items ── */
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 44px 30px;
}
.item { text-align: center; }
.item a.photo { display: block; overflow: hidden; }
.item img { aspect-ratio: 1 / 1; object-fit: cover; transition: transform .5s ease; }
.item a.photo:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .item img, .item a.photo:hover img { transition: none; transform: none; } }
.item h3 { font-size: 13px; font-weight: 400; color: var(--ink-strong); margin-top: 16px; letter-spacing: 0.1em; }
.item .price { font-size: 12.5px; color: var(--ink); margin-top: 2px; font-variant-numeric: tabular-nums; }
.item .price small { font-size: 10.5px; color: var(--ink-faint); }
.cart-btn {
  display: inline-block; margin-top: 12px; padding: 9px 30px;
  background: var(--pink); color: var(--ink-strong);
  font-size: 11.5px; letter-spacing: 0.2em; text-decoration: none; border-radius: 999px;
  border: none; cursor: pointer;
}
.cart-btn:hover { background: var(--pink-deep); color: #FFF; }
.more-link {
  display: block; width: fit-content; margin: 52px auto 0;
  font-size: 11.5px; letter-spacing: 0.3em; text-decoration: none;
  color: var(--ink); border-bottom: 1px solid var(--ink-faint); padding-bottom: 4px;
}
.more-link:hover { color: var(--pink-deep); border-bottom-color: var(--pink-deep); }

/* ── about ── */
.about {
  position: relative; margin-top: 76px;
  background-image: url(../img/about.jpg);
  background-size: cover; background-position: center;
  padding: 90px 28px;
}
.about-panel {
  background: var(--panel); max-width: 620px; margin: 0 auto;
  padding: 48px 40px; text-align: center;
}
.about-panel h2 { font-size: 19px; font-weight: 300; letter-spacing: 0.3em; color: var(--ink-strong); }
.about-panel .sub { font-size: 11px; letter-spacing: 0.3em; color: var(--ink-faint); margin-bottom: 26px; }
.about-panel p { font-size: 13px; }

/* ── order cake ── */
.duo { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.duo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.duo-text { background: var(--pink-pale); display: flex; flex-direction: column; justify-content: center; padding: 48px; text-align: center; }
.duo-text h2 { font-size: 18px; font-weight: 300; letter-spacing: 0.34em; color: var(--ink-strong); text-transform: uppercase; }
.duo-text .sub { font-size: 11px; letter-spacing: 0.3em; color: var(--ink-faint); margin-bottom: 22px; }
.duo-text p { font-size: 12.5px; }
.duo-flip img { order: 2; }
/* 交互に温かみのクリーム／淡ピンクでリズムを作る */
.duo .duo-text { background: var(--cream); }
.duo-flip .duo-text { background: var(--pink-pale); }
@media (max-width: 720px) {
  .duo { grid-template-columns: 1fr; }
  .duo-flip img { order: 0; }
}

/* ── もこもこ（フッター上フチ／oyaMADE級の大きな半円）── */
/* フッター自身の上フチを半円で盛り上げるので継ぎ目・ずれが出ない */
footer { position: relative; }
footer::before {
  content: ""; position: absolute; left: 0; right: 0;
  /* 真円のまま浅くする：大きな真円(--R)の上端だけを高さ--hぶん見せる。
     --d=横の周期(=もこもこの数)、--h=食い込み(浅さ)。
     --R は真円半径＝ ((d/2)^2 + h^2) / (2h) を手計算した値（calcは面積計算不可のため定数）*/
  --d: 92px;                       /* 周期（数・間隔）*/
  --h: 26px;                       /* 食い込み（浅さ）*/
  --R: 54px;                       /* 真円半径（d,hから算出）*/
  top: calc(-1 * var(--h)); height: var(--h);
  background:
    radial-gradient(circle var(--R) at calc(var(--d) / 2) var(--R),
      var(--pink-pale) calc(var(--R) - 1px), transparent var(--R)) repeat-x;
  background-size: var(--d) var(--h);
}
@media (max-width: 720px) { footer::before { --d: 68px; --h: 19px; --R: 40px; } }

/* ── セクション小見出しに手描き風のドット飾り ── */
.sec-head p::before, .sec-head p::after {
  content: "•"; color: var(--pink-deep); margin: 0 10px; font-size: 9px; vertical-align: middle; opacity: .8;
}

/* ── guide ── */
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px; }
.guide-grid article { border: 1px solid var(--line); padding: 30px 28px; text-align: center; }
.guide-grid h3 { font-size: 13px; font-weight: 400; letter-spacing: 0.22em; color: var(--ink-strong); margin-bottom: 12px; }
.guide-grid p { font-size: 12px; text-align: left; }

/* ── shop info ── */
.shopinfo { max-width: 620px; margin: 0 auto; padding: 0 28px; }
.shopinfo dl { display: grid; grid-template-columns: 90px 1fr; gap: 6px 28px; font-size: 12.5px; }
.shopinfo dt { color: var(--ink-faint); letter-spacing: 0.14em; }
.shopinfo dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .shopinfo dl { grid-template-columns: 78px 1fr; gap: 6px 16px; } }

/* ── 地図（Googleマップ埋め込み） ── */
.map {
  margin-top: 34px; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; line-height: 0;
}
.map iframe { width: 100%; height: 340px; border: 0; display: block; filter: saturate(0.9); }
@media (max-width: 480px) { .map iframe { height: 280px; } }

/* ── footer ── */
footer { background: var(--pink-pale); margin-top: 90px; padding: 54px 28px 44px; text-align: center; }
footer .logo-img { width: 120px; opacity: 0.85; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: 26px 0 18px; font-size: 11px; letter-spacing: 0.16em; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { color: var(--pink-deep); }
.copyright { font-size: 10.5px; color: var(--ink-faint); letter-spacing: 0.2em; }

/* ══ product detail page ══ */
.product-page { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding-top: 56px; align-items: start; }
.product-page .photo img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.product-detail h1 { font-size: 19px; font-weight: 400; color: var(--ink-strong); letter-spacing: 0.12em; }
.product-detail .price { font-size: 17px; margin: 14px 0 26px; font-variant-numeric: tabular-nums; }
.product-detail .price small { font-size: 11px; color: var(--ink-faint); }
.product-detail .desc { border-top: 1px solid var(--line); padding-top: 26px; font-size: 13px; }
.qty-row { display: flex; align-items: center; gap: 16px; margin: 26px 0; }
.qty-row label { font-size: 12px; letter-spacing: 0.16em; }
.qty-row select { padding: 8px 14px; border: 1px solid var(--line); font-size: 13px; color: var(--ink-strong); background: var(--white); }
/* 数量ステッパー（− 1 ＋） */
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--white); }
.qty-btn {
  width: 36px; height: 36px; border: none; border-radius: 999px; background: transparent;
  color: var(--pink-deep); font-size: 17px; line-height: 1; cursor: pointer;
  transition: background .2s ease;
}
.qty-btn:hover { background: var(--pink-pale); }
.qty-input {
  width: 44px; border: none; background: transparent; text-align: center;
  font-size: 14px; color: var(--ink-strong); font-family: inherit;
  appearance: textfield; -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input:focus { outline: none; }
.qty-stepper:focus-within { border-color: var(--pink-deep); }
.product-detail .cart-btn { padding: 13px 64px; font-size: 12.5px; }
/* 商品オプション（メレンゲの種類・手提げ袋・熨斗） */
.option-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin: 14px 0; }
.option-row > label:first-child { font-size: 12px; letter-spacing: 0.16em; min-width: 7.5em; }
.option-row select { padding: 8px 14px; border: 1px solid var(--line); font-size: 13px; color: var(--ink-strong); background: var(--white); }
.option-row .check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.option-row input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--pink-deep); }
.noshi-detail, .text-input { width: 100%; padding: 9px 12px; border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-strong); font-family: inherit; letter-spacing: 0.06em; }
.noshi-detail::placeholder, .text-input::placeholder { color: var(--ink-faint); }
/* 商品ページの注意書き（冷凍配送・店頭受取限定など） */
.product-notice {
  background: var(--pink-pale); border-radius: 8px; padding: 12px 18px;
  font-size: 12px; line-height: 1.9; margin: 0 0 20px; color: var(--ink-strong);
}
/* 商品一覧のカテゴリ見出し */
.cat-head {
  text-align: center; margin: 70px 0 30px; font-size: 14px; font-weight: 400;
  letter-spacing: 0.26em; color: var(--ink-strong);
}
.cat-head::before, .cat-head::after {
  content: "•"; color: var(--pink-deep); margin: 0 12px; font-size: 9px;
  vertical-align: middle; opacity: .8;
}
.grid + .cat-head { margin-top: 90px; }
/* 熨斗の詳細欄は「利用する」にチェックしたときだけ出す */
.noshi-row .noshi-detail, .noshi-row .opt-note { display: none; }
.noshi-row:has(input[type="checkbox"]:checked) .noshi-detail,
.noshi-row:has(input[type="checkbox"]:checked) .opt-note { display: block; }
.opt-note { font-size: 11px; color: var(--ink-faint); line-height: 1.8; margin-top: 4px; }
/* 内容・原材料 */
.spec ul { margin: 2px 0 0; }
.spec ul li { padding-left: 1em; text-indent: -1em; }
.spec ul li::before { content: "○ "; color: var(--pink-deep); }
.ingredients { margin-top: 22px; border-top: 1px solid var(--line); }
.ingredients summary {
  cursor: pointer; list-style: none; padding: 14px 2px; font-size: 12px;
  letter-spacing: 0.16em; color: var(--ink-strong); display: flex; align-items: center; gap: 8px;
}
.ingredients summary::after { content: "＋"; color: var(--pink-deep); margin-left: auto; font-size: 13px; }
.ingredients[open] summary::after { content: "−"; }
.ingredients dl { display: grid; grid-template-columns: 1fr; gap: 10px; font-size: 11.5px; padding: 0 2px 16px; }
.ingredients dt { color: var(--ink-strong); }
.ingredients dd { margin: 0; color: var(--ink); line-height: 1.8; }
.spec { margin-top: 34px; font-size: 12px; }
.spec dl { display: grid; grid-template-columns: 110px 1fr; gap: 4px 20px; }
.spec dt { color: var(--ink-faint); }
.spec dd { margin: 0; }
@media (max-width: 720px) { .product-page { grid-template-columns: 1fr; gap: 30px; } }

/* ══ legal / text pages ══ */
.legal { max-width: 760px; margin: 0 auto; padding: 56px 28px 0; }
.legal table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.legal th, .legal td { border: 1px solid var(--line); padding: 14px 18px; text-align: left; vertical-align: top; }
.legal th { background: var(--milk); color: var(--ink-strong); font-weight: 400; letter-spacing: 0.1em; width: 200px; }
@media (max-width: 600px) { .legal th { width: 120px; } }

/* ══ cart ══ */
.cart-wrap { max-width: 760px; }
.cart-empty-msg { text-align: center; font-size: 13px; letter-spacing: 0.12em; padding: 30px 0 0; }

.cart-list { border-top: 1px solid var(--line); }
.cart-line { display: flex; gap: 18px; padding: 22px 2px; border-bottom: 1px solid var(--line); }
.cart-thumb img { width: 88px; height: 88px; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.cart-line-body { flex: 1; min-width: 0; }
.cart-line-name { font-size: 13px; letter-spacing: 0.1em; }
.cart-line-name a { color: var(--ink-strong); text-decoration: none; border-bottom: none; }
.cart-line-name a:hover { color: var(--pink-deep); }
.cart-tag {
  display: inline-block; margin-left: 8px; padding: 2px 10px;
  font-size: 10px; letter-spacing: 0.1em; color: var(--pink-deep);
  border: 1px solid var(--pink); border-radius: 999px; vertical-align: 1px;
}
.cart-line-opts { margin-top: 5px; font-size: 11px; color: var(--ink-faint); line-height: 1.8; }
.cart-line-opts span { margin-right: 12px; }
.cart-line-ctrl { display: flex; align-items: center; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.cart-line-price { font-size: 13px; color: var(--ink-strong); font-variant-numeric: tabular-nums; margin-left: auto; }
.cart-remove {
  border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: 11px; letter-spacing: 0.12em; color: var(--ink-faint);
  border-bottom: 1px solid var(--line); padding: 2px 0;
}
.cart-remove:hover { color: var(--pink-deep); border-bottom-color: var(--pink-deep); }

.receive-box { margin-top: 34px; padding: 24px 26px; background: var(--milk); border: 1px solid var(--line); border-radius: 14px; }
.receive-title { font-size: 12px; letter-spacing: 0.16em; color: var(--ink-strong); margin-bottom: 12px; }
.receive-choice { display: flex; gap: 10px; flex-wrap: wrap; }
.receive-opt {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 10px 20px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--white); font-size: 12.5px; letter-spacing: 0.08em;
  transition: border-color .2s ease, background .2s ease;
}
.receive-opt:has(input:checked) { border-color: var(--pink-deep); background: var(--pink-pale); color: var(--ink-strong); }
.receive-opt input { accent-color: var(--pink-deep); width: 15px; height: 15px; }
.receive-box .option-row { margin-top: 16px; }
.cart-warn {
  margin-top: 14px; padding: 12px 16px; font-size: 11.5px; line-height: 1.9;
  color: var(--pink-deep); background: var(--pink-pale); border-radius: 10px;
}
.receive-box > .opt-note { margin-top: 12px; }

.cart-summary { margin-top: 30px; padding: 4px 2px; }
.cart-summary dl { display: flex; justify-content: space-between; gap: 20px; padding: 9px 0; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cart-summary dt { color: var(--ink-faint); letter-spacing: 0.1em; }
.cart-summary dd { margin: 0; color: var(--ink-strong); }
.cart-summary .summary-total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 16px; }
.cart-summary .summary-total dt { color: var(--ink-strong); }
.cart-summary .summary-total dd { font-size: 16px; }

.cart-actions { text-align: center; margin-top: 34px; }
.checkout-btn { padding: 14px 70px; font-size: 12.5px; }
.checkout-btn:disabled { background: var(--line); color: var(--ink-faint); cursor: not-allowed; }
.cart-actions .more-link { margin-top: 26px; }

/* 左下の丸いカートボタン（商品が入っているときだけ表示） */
.cart-fab {
  /* 右下・menuボタンの上に置く。以前は左下・クリーム色で写真に埋もれて見つけられなかった（2026-09-07修正） */
  position: fixed; z-index: 60; right: 18px; bottom: calc(96px + env(safe-area-inset-bottom));
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--pink-deep); color: #FFF; text-decoration: none;
  font-family: "Hiragino Maru Gothic ProN", "Zen Maru Gothic", sans-serif;
  font-size: 11px; letter-spacing: 0.08em;
  box-shadow: 0 6px 18px rgba(110, 104, 98, 0.30);
  transition: background .2s ease, transform .2s ease;
}
.cart-fab:hover { background: var(--ink-strong); transform: translateY(-1px); }
.cart-fab[hidden] { display: none; }
.cart-fab-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--ink-strong); color: #FFF; font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #FFF;
}

/* カートのトースト（追加のお知らせ） */
.cart-toast {
  position: fixed; z-index: 70; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  background: var(--white); border: 1.5px solid var(--pink); border-radius: 999px;
  padding: 12px 24px; font-size: 12px; letter-spacing: 0.06em; color: var(--ink-strong);
  box-shadow: 0 8px 24px rgba(110, 104, 98, 0.16); white-space: nowrap;
  transition: opacity .3s ease, transform .3s ease;
}
.cart-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.cart-toast a { color: var(--pink-deep); white-space: nowrap; }
@media (max-width: 720px) {
  .cart-toast { white-space: normal; text-align: center; border-radius: 18px; width: min(92vw, 360px); }
}

/* ══════════════════════════════════════════════════════════════
   v2：トップページ改稿（2026-08-14 まりほラフより）
   ・ナビ＝日本語＋英字の2段／右端は箱入り動物のONLINE SHOPボタン
   ・ヒーロー＝キャッチコピー＋動物たちの横長イラスト
   ・写真は有機的なかたち（ラフの「しゃしん」の形）にマスク
   ・セクションの区切りは手描きの波線
   ══════════════════════════════════════════════════════════════ */

/* ── ナビ（日本語＋英字の2段） ── */
.site-head nav.nav-v2 { gap: 2px; }
.site-head nav.nav-v2 a {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 11px; line-height: 1.3;
}
.site-head nav.nav-v2 .jp { font-size: 9px; letter-spacing: 0.02em; color: var(--ink-faint); }
.site-head nav.nav-v2 .en { font-size: 12.5px; letter-spacing: 0.1em; }
.site-head nav.nav-v2 a:hover .jp,
.site-head nav.nav-v2 a:focus-visible .jp,
.site-head nav.nav-v2 a[aria-current="page"] .jp { color: var(--pink-deep); }
@media (max-width: 980px) { .site-head nav.nav-v2 a { padding: 6px 8px; } }

/* ── 右端：箱入り動物のONLINE SHOPボタン ── */
.shop-cta-illo {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-decoration: none; white-space: nowrap; border-bottom: none;
  transition: transform .2s ease;
}
.shop-cta-illo:hover { transform: translateY(-2px); border-bottom: none; }
.shop-cta-illo .en {
  font-family: "Hiragino Maru Gothic ProN", "Zen Maru Gothic", sans-serif;
  font-size: 10.5px; letter-spacing: 0.2em; color: var(--ink-strong);
}
.shop-cta-illo .illo-slot { width: 108px; height: 44px; font-size: 8px; letter-spacing: .04em; }

/* ── ヒーロー：キャッチコピー＋動物たちの横長イラスト ── */
.catch { text-align: center; padding: 42px 24px 20px; }
.catch h1 {
  font-family: "Hiragino Maru Gothic ProN", "Zen Maru Gothic", sans-serif;
  font-size: 21px; font-weight: 400; letter-spacing: 0.22em; color: var(--ink-strong);
}
.hero-illo { width: 100%; aspect-ratio: 1200 / 330; }
@media (max-width: 720px) {
  .catch { padding: 30px 20px 14px; }
  .catch h1 { font-size: 17px; letter-spacing: 0.14em; }
  .hero-illo { aspect-ratio: 1000 / 460; }
}

/* ── 有機的なかたちの写真（ラフの「しゃしん」） ── */
.blob { position: relative; }
.blob > img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 58% 42% 47% 53% / 52% 46% 54% 48%;
}
.blob .illo-corner { position: absolute; width: 108px; height: 92px; }
.blob .corner-tr { top: -26px; right: -14px; }
.blob .corner-tl { top: -30px; left: -18px; }
@media (max-width: 720px) { .blob .illo-corner { width: 84px; height: 72px; } }

/* ── 手描きの波線の区切り ── */
.wave { display: block; width: 100%; height: 38px; color: var(--pink); margin: 56px 0 10px; }
.wave svg { width: 100%; height: 100%; display: block; }

/* ── 星の落書き ── */
.doodle { color: var(--pink-deep); opacity: .7; font-size: 15px; line-height: 1; }

/* ── about（左＝テキスト／右＝ブロブ写真） ── */
.about-v2 { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; }
.about-v2 h2 {
  font-size: 21px; font-weight: 300; letter-spacing: 0.38em; color: var(--ink-strong);
  font-family: "Avenir Next", "Futura", "Century Gothic", sans-serif; text-transform: lowercase;
}
.about-v2 .sub { font-size: 11px; letter-spacing: 0.24em; color: var(--ink-faint); margin: 6px 0 20px; }
.about-v2 p { font-size: 13px; line-height: 2.2; }
@media (max-width: 860px) { .about-v2 { grid-template-columns: 1fr; gap: 44px; } }

/* ── Products：カテゴリカード ── */
.prod-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
  max-width: 1080px; margin: 0 auto; padding: 0 28px;
}
@media (max-width: 860px) { .prod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .prod-grid { grid-template-columns: 1fr; } }
.prod-card {
  border: 1.5px solid var(--line); border-radius: 20px; padding: 26px 22px 22px;
  background: var(--white); text-align: center; text-decoration: none; border-bottom: 1.5px solid var(--line);
  display: flex; flex-direction: column; gap: 9px;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.prod-card:hover {
  transform: translateY(-3px); background: var(--pink-pale);
  border-color: var(--pink-deep); border-bottom-color: var(--pink-deep);
}
.prod-card h3 { font-size: 14.5px; font-weight: 400; letter-spacing: 0.16em; color: var(--ink-strong); }
.prod-card .en { font-size: 9px; letter-spacing: 0.26em; color: var(--ink-faint); }
.prod-card p { font-size: 12px; line-height: 1.95; }
.prod-card .tag {
  font-size: 10px; letter-spacing: .1em; color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 11px; width: fit-content; margin: 0 auto;
}
.prod-card .go { font-size: 11px; letter-spacing: 0.14em; color: var(--pink-deep); margin-top: auto; padding-top: 8px; }
.prod-card.illo-card { border-style: dashed; border-color: var(--pink-deep); background: rgba(239,207,206,.14); min-height: 190px; }

/* ── マルキー：丸版（ラフの「これ流れる」） ── */
.marquee-round .marquee-track img,
.marquee-round .marquee-track .illo-slot {
  width: 152px; height: 152px; border-radius: 50%; flex: none;
}
@media (max-width: 720px) {
  .marquee-round .marquee-track img,
  .marquee-round .marquee-track .illo-slot { width: 116px; height: 116px; }
}
/* スマホはヘッダーが高くなりすぎるので、ONLINE SHOPのイラストを小さく */
@media (max-width: 720px) {
  .shop-cta-illo .illo-slot { width: 84px; height: 30px; font-size: 7px; }
  .shop-cta-illo .en { font-size: 9.5px; letter-spacing: 0.14em; }
}

/* お客様情報（カート画面・2026-09-04 Square＋銀行振込対応で追加） */
.customer-box .option-row { flex-wrap: nowrap; }
.customer-box .option-row .text-input { flex: 1; min-width: 0; }
.customer-box .req { font-size: 9.5px; color: var(--pink-deep); margin-left: 6px; letter-spacing: 0.1em; }
@media (max-width: 560px) {
  .customer-box .option-row { flex-wrap: wrap; }
  .customer-box .option-row > label:first-child { min-width: 0; }
}
.thanks-bank { margin: 26px auto 0; max-width: 460px; padding: 20px 24px; background: var(--milk); border: 1px solid var(--line); border-radius: 14px; text-align: left; font-size: 12.5px; line-height: 2; }
.thanks-bank dt { font-size: 11px; letter-spacing: 0.16em; color: var(--ink-faint); margin-top: 8px; }
.thanks-bank dd { margin: 0; color: var(--ink-strong); }

/* クーポン欄（カート画面・2026-09-04） */
.coupon-row { flex-wrap: nowrap; }
.coupon-row .text-input { flex: 1; min-width: 0; text-transform: uppercase; }
.coupon-btn { padding: 9px 22px; font-size: 12px; white-space: nowrap; }

/* 商品ページのギャラリー（2026-09-05） */
.product-page .photo .thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.product-page .photo .thumb { width: 64px; height: 64px; padding: 0; border: 2px solid transparent; background: none; cursor: pointer; border-radius: 6px; overflow: hidden; }
.product-page .photo .thumb img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; display: block; }
.product-page .photo .thumb.on { border-color: var(--pink-deep); }

/* ── 商品一覧：カテゴリ切り替え＋スマホ2列（2026-09-06 まりほ指摘「スマホで1列にずらっと並んで見づらい」）── */
.cat-nav {
  position: sticky; top: 56px; z-index: 30;
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  padding: 12px 0 14px; margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(8px);
}
.cat-nav a {
  font-size: 11.5px; letter-spacing: 0.14em; text-decoration: none; white-space: nowrap;
  color: var(--ink-strong); background: var(--pink-pale);
  padding: 8px 17px; border-radius: 999px; transition: background .2s ease, color .2s ease;
}
.cat-nav a:hover, .cat-nav a.on { background: var(--pink-deep); color: #FFF; }
.cat-head { scroll-margin-top: 118px; }

@media (max-width: 720px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 30px 12px; }
  .item h3 { font-size: 12px; margin-top: 10px; letter-spacing: 0.06em; line-height: 1.5; }
  .item .price { font-size: 11.5px; }
  /* 商品名が2行になっても「商品を見る」の高さを揃える */
  .item { display: flex; flex-direction: column; }
  .item .cart-btn { margin-top: auto; padding: 8px 0; width: 100%; font-size: 11px; letter-spacing: 0.12em; }
  .item .price { margin-bottom: 9px; }
  .cat-head { margin: 44px 0 20px; font-size: 13px; letter-spacing: 0.2em; scroll-margin-top: 104px; }
  .grid + .cat-head { margin-top: 54px; }
  .cat-nav { top: 48px; gap: 6px; padding: 10px 0 12px; }
  .cat-nav a { font-size: 11px; padding: 7px 12px; letter-spacing: 0.1em; }
  .wrap { padding: 0 18px; }
}

/* ── イラスト待ちの見た目スイッチ（2026-09-06）──
   まりほのイラストが揃うまで、点線のプレースホルダを隠して「完成した見た目」で公開する。
   イラストが届いたら <body class="no-illo"> の no-illo を外し、各 .illo-slot を実画像に差し替える。 */
.no-illo .illo-slot { display: none !important; }

/* ── スマホの文章まわり（2026-09-06 まりほ指摘「文字の改行がはみ出てる」）──
   パネルの左右余白が大きすぎて文章の1行が入りきらず、変なところで折り返していた。
   スマホだけ余白を詰めて行が収まるようにし、それでも長い行は <br class="sp"> で文節で折る。 */
br.sp { display: none; }
@media (max-width: 720px) {
  br.sp { display: inline; }
  .about-panel { padding: 34px 20px; }
  .duo-text { padding: 38px 20px; }
  /* 字間をわずかに詰めて、あと1文字ぶんの折り返しを防ぐ */
  .about-panel p, .duo-text p, .shopinfo + p, .sec-note { letter-spacing: 0.05em; }
}

/* ── ヘッダーのカート（商品が入っているときだけ出る・2026-09-07）── */
.head-cart {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto; padding: 8px 16px; border-radius: 999px;
  background: var(--pink-deep); color: #FFF; text-decoration: none;
  font-family: "Hiragino Maru Gothic ProN", "Zen Maru Gothic", sans-serif;
  font-size: 11.5px; letter-spacing: 0.12em; white-space: nowrap;
}
.head-cart:hover { background: var(--ink-strong); }
.head-cart[hidden] { display: none; }
.head-cart-ico {
  width: 13px; height: 13px; border: 1.6px solid currentColor; border-top: none;
  border-radius: 0 0 4px 4px; position: relative; display: inline-block;
}
.head-cart-ico::before {
  content: ""; position: absolute; left: 50%; top: -6px; transform: translateX(-50%);
  width: 8px; height: 7px; border: 1.6px solid currentColor; border-bottom: none;
  border-radius: 5px 5px 0 0;
}
.head-cart-badge {
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  background: #FFF; color: var(--pink-deep); font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
/* online shopボタンが出ているPCでは、その隣に並べる */
@media (min-width: 721px) { .head-cart { margin-left: 14px; } }

/* ── sold out 表示（2026-09-07）──
   台帳の在庫タブに数を入れた商品が0になったときだけ出る。数を入れていない商品には出ない。 */
.item.soldout a.photo img { filter: grayscale(0.55); opacity: .62; }
.cart-btn.is-soldout,
.cart-btn.is-soldout:hover {
  background: var(--line); color: var(--ink-faint); cursor: default; pointer-events: none;
  letter-spacing: 0.18em;
}
.product-page .photo { position: relative; }
.soldout-tag {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.92); color: var(--ink-strong);
  padding: 10px 26px; border-radius: 999px; font-size: 13px; letter-spacing: 0.2em;
  box-shadow: 0 4px 14px rgba(110, 104, 98, 0.18);
}