/* 一覧のカードと「この豆について」。SWELL の見た目を崩さないよう imm-so- の名前だけに効かせる */

/* SWELL の本文装飾（見出しの帯・下線・リストの点・表の色）を打ち消す。
   .post_content h2 より強くするため、クラスを2回重ねている */
.imm-so-facts.imm-so-facts :is(h2, h3, h4), .imm-so-lots.imm-so-lots :is(h2, h3, h4) {
  background: none; border: 0; box-shadow: none; padding: 0; color: inherit; letter-spacing: 0.04em; position: static;
}
.imm-so-facts.imm-so-facts :is(h2, h3, h4)::before, .imm-so-facts.imm-so-facts :is(h2, h3, h4)::after,
.imm-so-lots.imm-so-lots :is(h2, h3, h4)::before, .imm-so-lots.imm-so-lots :is(h2, h3, h4)::after,
.imm-so-facts.imm-so-facts li::before, .imm-so-facts.imm-so-facts li::after { content: none; display: none; }
.imm-so-facts.imm-so-facts :is(dl, dd, dt, ul, ol, li, p, th, td) { border: 0; background: none; font-size: inherit; line-height: inherit; letter-spacing: normal; color: inherit; }
.imm-so-facts.imm-so-facts :is(ul, ol) { list-style: none; padding: 0; }
.imm-so-facts.imm-so-facts table { border: 0; margin: 0; }
.imm-so-facts.imm-so-facts :is(th, td) { border: 0; border-bottom: 1px solid #ece4dd; background: none; }
.imm-so-facts.imm-so-facts p { margin: 0 0 1em; }
.imm-so-lots.imm-so-lots a, .imm-so-facts.imm-so-facts .imm-so-facts__buy a { text-decoration: none; }

/* カードの色。ここを変えるだけで、一覧のカードと商品ページの色がそろって変わる */
.imm-so-lots, .imm-so-tabs, .imm-so-item {
  --imm-card-bg: #3b2a21;       /* カードの地（深いコーヒー色） */
  --imm-card-ink: #f6efe8;      /* 名前 */
  --imm-card-soft: #e2d4c8;     /* ひとこと */
  --imm-card-accent: #d2b08c;   /* 産地の行・価格（少し明るい金茶） */
  --imm-card-line: rgba(246, 239, 232, 0.14);
}
.imm-so-lots { display: grid; gap: 18px; margin: 24px 0; }
.imm-so-lots--grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.imm-so-lots--slider { grid-auto-flow: column; grid-auto-columns: min(80%, 300px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.imm-so-lots--slider > * { scroll-snap-align: start; }
.imm-so-card { display: flex; flex-direction: column; gap: 14px; padding: 14px 14px 20px; border-radius: 22px; background: var(--imm-card-bg); color: var(--imm-card-ink); text-decoration: none; transition: transform 0.35s, box-shadow 0.35s; }
.imm-so-card[hidden] { display: none; }
.imm-so-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(40, 26, 18, 0.28); }
.imm-so-card__media { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, 0.06); display: block; touch-action: pan-y; }
.imm-so-card__img, .imm-so-card__noimg { width: 100%; height: 100%; object-fit: cover; display: block; }
.imm-so-card__img[hidden] { display: none; }
.imm-so-card__dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.imm-so-card__dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); transition: width 0.25s, background 0.25s; }
.imm-so-card__dots i.is-on { width: 14px; border-radius: 3px; background: #fff; }
.imm-so-card__badge { position: absolute; left: 10px; top: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(30, 20, 14, 0.78); color: #fff; font-size: 11px; }
.imm-so-card.is-archived .imm-so-card__img { filter: grayscale(0.4); opacity: 0.85; }
.imm-so-card__body { display: flex; flex-direction: column; gap: 8px; padding: 0 6px; }
.imm-so-card__kind { font-size: 10px; letter-spacing: 0.14em; color: var(--imm-card-accent); }
.imm-so-card__name { font-size: 22px; font-weight: 400; line-height: 1.35; letter-spacing: 0.02em; word-break: keep-all; overflow-wrap: anywhere; } /* 「10Pセ／ット」のような途中の折り返しを避け、空白や括弧で折る */
.imm-so-card__tag { font-size: 14px; line-height: 1.7; color: var(--imm-card-soft); }
/* 商品の説明の書き出し（改行はそのまま、5行まで） */
.imm-so-card__lead { font-size: 13px; line-height: 1.8; color: var(--imm-card-soft); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.imm-so-card__facts { font-size: 12px; line-height: 1.9; letter-spacing: 0.03em; color: var(--imm-card-accent); }
.imm-so-card__specs { display: flex; flex-direction: column; gap: 1px; font-size: 12px; line-height: 1.75; letter-spacing: 0.02em; color: var(--imm-card-soft); }
.imm-so-card__specs b { font-weight: 400; color: var(--imm-card-accent); }
.imm-so-card__price { font-size: 13px; letter-spacing: 0.04em; color: var(--imm-card-accent); margin-top: 2px; }

/* 一覧の種類のタブ */
.imm-so-tabs { display: flex; gap: 8px; overflow-x: auto; margin: 24px 0 0; padding-bottom: 4px; }
/* タブと並べ替えの帯。スマホではタブの下に並べ替えが回る */
.imm-so-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 24px 0 16px; }
.imm-so-tools .imm-so-tabs { flex: 1 1 320px; min-width: 0; margin: 0; }
.imm-so-sort { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12px; color: #6f5d52; }
.imm-so-sort select { appearance: none; -webkit-appearance: none; width: auto; height: auto; margin: 0; box-shadow: none; padding: 7px 30px 7px 14px; border-radius: 999px; border: 1px solid #d9ccc1; color: #3a2e28; font-size: 13px; line-height: 1.4; cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236f5d52' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 12px center; }
.imm-so-tabs button { flex: none; padding: 8px 16px; border-radius: 999px; border: 1px solid #d9ccc1; background: transparent; color: #6f5d52; font-size: 13px; cursor: pointer; }
.imm-so-tabs button.is-active { background: var(--imm-card-bg); border-color: var(--imm-card-bg); color: var(--imm-card-ink); }

/* 商品ページ（ドリップバッグ・ギフト・アパレル） */
.imm-so-item { max-width: 1040px; margin: 24px auto 48px; color: #3a2e28; font-size: 14px; line-height: 1.9; }
.imm-so-item__top { display: grid; gap: 20px; padding: 16px; border-radius: 24px; background: var(--imm-card-bg); color: var(--imm-card-ink); }
@media (min-width: 860px) { .imm-so-item__top { grid-template-columns: 1.15fr 1fr; gap: 32px; padding: 24px; align-items: start; } }
.imm-so-item__thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.imm-so-item__thumbs button { flex: none; width: 56px; height: 56px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: none; cursor: pointer; opacity: 0.6; }
.imm-so-item__thumbs button.is-on { border-color: var(--imm-card-accent); opacity: 1; }
.imm-so-item__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imm-so-item__info { display: flex; flex-direction: column; gap: 10px; padding: 4px 6px 8px; }
.imm-so-item.imm-so-item .imm-so-item__name { font-size: 26px; font-weight: 400; line-height: 1.35; margin: 0; color: inherit; background: none; border: 0; padding: 0; }
.imm-so-item.imm-so-item .imm-so-item__name::before, .imm-so-item.imm-so-item .imm-so-item__name::after { content: none; }
.imm-so-item.imm-so-item p { margin: 0; }
.imm-so-item__tag { color: var(--imm-card-soft); }
.imm-so-item__price { font-size: 18px; color: var(--imm-card-accent); }
.imm-so-item__price small { font-size: 11px; margin-left: 4px; }
.imm-so-item__sub { font-size: 11px; letter-spacing: 0.08em; opacity: 0.75; margin-top: 6px !important; }
.imm-so-item.imm-so-item .imm-so-item__variants { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.imm-so-item.imm-so-item .imm-so-item__variants li { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--imm-card-line); font-size: 13px; }
.imm-so-item.imm-so-item .imm-so-item__variants li::before { content: none; }
.imm-so-item__variants small { margin-left: 6px; opacity: 0.7; }
.imm-so-item__variants .is-soldout { opacity: 0.4; text-decoration: line-through; }
.imm-so-item.imm-so-item .imm-so-item__buy { align-self: flex-start; margin-top: 8px; padding: 13px 26px; border-radius: 999px; background: var(--imm-card-ink); color: var(--imm-card-bg); text-decoration: none; font-size: 14px; }
.imm-so-item.is-soldout .imm-so-item__buy { opacity: 0.6; }
.imm-so-item__note { color: var(--imm-card-soft); }
.imm-so-item__body { max-width: 720px; margin: 32px auto 0; padding: 0 4px; }
.imm-so-item.imm-so-item .imm-so-item__body p { margin: 0 0 1em; }
.imm-so-item.imm-so-item .imm-so-item__body h3 { font-size: 16px; font-weight: 500; margin: 28px 0 8px; background: none; border: 0; padding: 0; color: inherit; }
.imm-so-item.imm-so-item .imm-so-item__body h3::before, .imm-so-item.imm-so-item .imm-so-item__body h3::after { content: none; }
.imm-so-item.imm-so-item .imm-so-item__contents { list-style: none; padding: 0; margin: 0; border-top: 1px solid #ece4dd; }
.imm-so-item.imm-so-item .imm-so-item__contents li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #ece4dd; }
.imm-so-item.imm-so-item .imm-so-item__contents li::before { content: none; }
.imm-so-item__contents a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.imm-so-item__contents span { color: #a08672; }
.imm-so-item__body .imm-so-item__sub { color: #a08672; opacity: 1; margin-top: 20px !important; }
.imm-so-item__specs { display: grid; margin: 8px 0 0; border-top: 1px solid #ece4dd; }
.imm-so-item__specs > div { display: grid; grid-template-columns: 7em 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid #ece4dd; }
.imm-so-item__specs dt { color: #a08672; }
.imm-so-item__specs dd { margin: 0; }
.imm-so-archive { margin: 32px 0; }
.imm-so-archive summary { cursor: pointer; font-size: 14px; color: #6f5d52; }
.imm-so-empty { color: #a08672; }

.imm-so-facts { max-width: 720px; margin: 48px auto; padding: 0 16px; color: #3a2e28; font-size: 14px; line-height: 1.9; }
.imm-so-facts.imm-so-facts h2 { font-size: 20px; font-weight: 500; margin: 0 0 8px; }
.imm-so-facts.imm-so-facts h3 { font-size: 16px; font-weight: 500; margin: 28px 0 8px; }
.imm-so-facts.imm-so-facts .imm-so-facts__banner { padding: 12px 16px; border-radius: 14px; background: #f6efe9; color: #6f5d52; }
.imm-so-facts.imm-so-facts .imm-so-facts__lead { color: #6f5d52; }
.imm-so-facts.imm-so-facts .imm-so-facts__table { display: grid; gap: 0; margin: 16px 0; border-top: 1px solid #ece4dd; }
.imm-so-facts.imm-so-facts .imm-so-facts__table > div { display: grid; grid-template-columns: 7em 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid #ece4dd; }
.imm-so-facts.imm-so-facts .imm-so-facts__table dt { color: #a08672; }
.imm-so-facts.imm-so-facts .imm-so-facts__table dd { margin: 0; }
.imm-so-facts__cva { width: 100%; border-collapse: collapse; font-size: 13px; }
.imm-so-facts.imm-so-facts .imm-so-facts__cva :is(th, td) { padding: 6px 8px; border-bottom: 1px solid #ece4dd; text-align: left; font-weight: 400; }
.imm-so-facts.imm-so-facts .imm-so-facts__faq dt { font-weight: 500; margin-top: 12px; }
.imm-so-facts.imm-so-facts .imm-so-facts__faq dd { margin: 4px 0 0; color: #6f5d52; }
.imm-so-facts.imm-so-facts .imm-so-facts__buy { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }
.imm-so-facts.imm-so-facts .imm-so-facts__buy a { padding: 12px 22px; border-radius: 999px; background: #3a2e28; color: #fff; text-decoration: none; }

/* スマホでは豆のページ（React）の背景を、画面の左右の端まで伸ばす（2026-10-24 MASA「白い余白はなし」）。
   文字と背景の間の余白は、ページの中（.so-container）がとる。
   SWELL の .alignfull は left: calc(50% - 50vw) で本文の余白ぶん左へずらす。それが残ると右に白い隙間ができた（2026-10-23）ので left を 0 に戻し、margin で端へ出す。
   クラスを重ねて SWELL の指定（.post_content .alignfull）より強くする */
@media (max-width: 959px) {
  .imm-lot-root.imm-lot-root.imm-lot-root { position: relative; left: 0; right: auto; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0; border-radius: 0; clip-path: none; }
  /* 100vw で横にはみ出した分のスクロールを出さない（clip はスクロールの箱を作らないので、画面に貼り付く演出は動く） */
  body:has(.imm-lot-root) { overflow-x: clip; }
}
/* 豆のページは、ページ全体の地の色もページと同じアイボリーに。
   iPhone でスクロールして上下のバーが縮んだとき、画面の上の端（時計のあたり）や引っぱったときの余白が白く見えないように */
html:has(.imm-lot-root), body:has(.imm-lot-root) { background-color: #fbf8f5; }

/* 特設ページ（React）が描画できたら、すぐ下の「この豆について」は画面から隠す。中身は同じものを React が見せている。
   display: none にせず「見えないけれど HTML にはある」形にして、検索エンジンや AI には読ませる */
.imm-lot-root.is-ready ~ .imm-so-facts {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* 豆のページは右下に自前の「目次」ボタンを出すので、SWELL の「ページの上へ」ボタンは隠す（2026-10-24 MASA） */
body:has(.imm-lot-root) :is(.p-fixBtnWrap, #pagetop) { display: none !important; }

/* 一覧ページ：上下に余白をとり、豆のページと同じ動物の背景（lots.js が並べる）。動物は薄く、左右の余白に */
.imm-so-shelf { position: relative; padding: clamp(48px, 10vh, 120px) 0 clamp(72px, 14vh, 160px); }
.imm-so-shelf__body { position: relative; z-index: 1; }
.imm-so-shelf__ambient { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; z-index: 0; pointer-events: none; overflow: hidden; opacity: 0.35; }
/* 動物はカードの列の外（画面の左右の余白）に置く。幅と左の位置は lots.js が画面に合わせる */
.imm-so-shelf__animal { position: absolute; animation: imm-so-drift 22s ease-in-out infinite; }
.imm-so-shelf__animal i { display: block; width: 100%; height: 100%; background: #3d3431; -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; }
@keyframes imm-so-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, -28px); } }
@media (max-width: 700px) { .imm-so-shelf__ambient { opacity: 0.22; } }
@media (prefers-reduced-motion: reduce) { .imm-so-shelf__animal { animation: none; } }

/* カードの袋（imm-pack.js が中を作る）：背景つきのモックアップ。袋はカードの高さに合わせた大きさ */
.imm-so-card__pack { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 4%; }
.imm-so-card__packbox { width: 30%; max-width: 130px; }
/* ドリップバッグも扱う豆：袋の右手前に、ひとまわり小さいドリップバッグ */
.imm-so-card__pack.is-pair { display: flex; justify-content: center; align-items: flex-end; gap: 2%; padding: 0 0 9%; }
.imm-so-card__packbox.is-drip { width: 24%; max-width: 104px; margin-bottom: -2%; }
/* 豆が売り切れで、ドリップバッグだけのとき（data-only="drip"）：真ん中にひとつ */
.imm-so-card__pack:not(.is-pair) .imm-so-card__packbox.is-drip { width: 28%; max-width: 120px; margin: 0; }

/* 日本語／English（2026-10-30）。PHP が両方出していて、html の data-imm-lang で片方だけ見せる */
.imm-so-en { display: none !important; }
html[data-imm-lang="en"] .imm-so-en { display: revert !important; }
html[data-imm-lang="en"] .imm-so-ja { display: none !important; }
.imm-so-langsw { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid #d9ccc1; background: rgba(255, 255, 255, 0.7); }
.imm-so-langsw button { appearance: none; -webkit-appearance: none; margin: 0; padding: 5px 12px; border: 0; border-radius: 999px; background: none; box-shadow: none; color: #6f5d52; font: inherit; font-size: 12px; line-height: 1.4; cursor: pointer; }
.imm-so-langsw button[aria-pressed="true"] { background: #3a261b; color: #fbf8f5; }
.imm-so-item__info > .imm-so-langsw { align-self: flex-end; margin-bottom: 4px; }