/* 季節の予約.com — 青い帯・白いカード・青のアクセント1色。見本は ui-candidates/cand-03-1.png（寸法と色は ui-candidates/spec.md、下層は ui-candidates/inner/）。
   フォントは源ノ角ゴシック（Noto Sans JP）一本。幅1536pxで見本に合わせ、狭い幅（390px）でも同じ部品で組む。 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400..900&display=swap");
:root{--si:clamp(17px,calc(17px + (100vw - 1024px) * .0137),24px);--pr:clamp(33px,calc(33px + (100vw - 1024px) * .029),48px);--blue:#0f57fd;--blue-d:#0b46d6;--ink:#0b1230;--sub:#5b6479;--line:#e4e8f0;--line2:#eef1f5;--tint:#f1f4f9;--bg:#fff;--r:8px;--gut:16px;--px:clamp(36px,calc(36px + (100vw - 1024px) * .035),54px);--ok:#12b066;--lot:#0b6cf5;--soon:#fbc015;--none:#868e9e;color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{word-break:auto-phrase;margin:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans JP","源ノ角ゴシック","Source Han Sans JP",sans-serif;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-wrap:anywhere}
[hidden]{display:none!important}
a{color:var(--blue);text-underline-offset:3px}
img{max-width:100%}
ul,ol{margin:0;padding:0}
button,select,input{font-family:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:4px 8px;z-index:99}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.px{position:absolute;width:1px;height:1px;opacity:0}
.ic{width:24px;height:24px;flex:none}
.chev{width:16px;height:16px;flex:none;color:#7a8196}

/* ---- 青い帯（ヘッダー＋トップのヒーロー） */
.band{background:var(--blue);color:#fff;position:relative}
.band.has-hero,.xband{background:linear-gradient(180deg,#0d57fc 0%,#0e55fd 62%,#1159fd 82%,#276efc 100%)}
.xband{color:#fff}
.hd-in{max-width:1536px;margin:0 auto;padding:0 clamp(33px,calc(33px + (100vw - 1024px) * .029),48px) 0 var(--px);height:clamp(66px,calc(66px + (100vw - 1024px) * .0117),72px);display:grid;grid-template-columns:clamp(220px,calc(254px + (100vw - 1024px) * .355),436px) minmax(0,1fr) clamp(240px,calc(268px + (100vw - 1024px) * .281),412px);align-items:center}
.brand{display:block;color:#fff;text-decoration:none;white-space:nowrap;line-height:1}
/* トップだけ、ロゴを h1 で包む（ページの見出し＝サイト名。福袋とクリスマスケーキの2つの段の見出しは h2。2026-11-02） */
.brand-h{margin:0;min-width:0;font-size:inherit;font-weight:inherit;line-height:1}
.brand .b1{font-size:clamp(28.8px,calc(28.8px + (100vw - 1024px) * .00625),32px);font-weight:700;letter-spacing:0}
.brand .b2{margin-left:8px;font-size:13px;font-weight:500}
/* ロゴ（2026-11-02 ユーザーが gpt-image-2 の案1を選択。青い帯に載せる白抜き版。元は design/logo/） */
.brand .b-logo{display:block;height:clamp(36px,calc(36px + (100vw - 1024px) * .0078),40px);width:auto;max-width:100%}
.gnav{display:flex;align-items:center;gap:clamp(26px,calc(28.5px + (100vw - 1024px) * .038),48px)}
.gnav a{color:#fff;font-size:clamp(12.5px,calc(12.5px + (100vw - 1024px) * .0039),14.5px);font-weight:500;text-decoration:none;white-space:nowrap;line-height:1.4;padding:4px 0 3px;border-bottom:2px solid transparent}
.gnav a[aria-current=page]{border-bottom-color:#fff}
@media (min-width:960px) and (max-width:1279px){.gnav a{font-weight:700}}
.gnav a:hover{border-bottom-color:rgba(255,255,255,.6)}
.search{position:relative;min-width:0}
.search input{display:block;width:100%;height:clamp(36px,calc(36px + (100vw - 1024px) * .0117),42px);margin:0;padding:0 20px 0 clamp(40px,calc(40px + (100vw - 1024px) * .0156),48px);border:0;border-radius:999px;background:#fefefe;color:var(--ink);font-size:clamp(12.5px,calc(12.5px + (100vw - 1024px) * .0049),15px);-webkit-appearance:none;appearance:none}
.search input::placeholder{color:#7e889f;opacity:1}
@media (min-width:1280px){.search input{background:#f6f9fe}.search input::placeholder{color:#7f93c4}}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.s-ic{position:absolute;left:clamp(12px,calc(12px + (100vw - 1024px) * .0039),14px);top:50%;margin-top:calc(var(--si) / -2);width:var(--si);height:var(--si);color:#1c5cf0;stroke-width:2.2;pointer-events:none}
@supports (-webkit-touch-callout:none){.search input{font-size:16px}}
.q-list{position:absolute;z-index:30;top:calc(100% + 8px);left:0;right:0;max-height:min(60vh,420px);overflow-y:auto;list-style:none;margin:0;padding:6px;background:#fff;color:var(--ink);border-radius:12px;box-shadow:0 12px 32px rgba(15,50,160,.28)}
.q-list a{display:block;padding:8px 12px;border-radius:8px;color:var(--ink);text-decoration:none}
.q-list .qt{display:block;font-size:14px;line-height:1.5;font-weight:700}
.q-list small{display:block;font-size:12px;color:var(--sub)}
.q-list [aria-selected=true] a{background:var(--tint)}
.q-none{padding:10px 12px;font-size:13px;color:var(--sub)}

/* ヒーロー（トップだけ）：左に見出し、右に「次の締切」3枚。カードの下端が帯の下端に重なる。
   トップは上下2段（2026-11-02 ユーザー決定）。上の段（福袋）はヘッダーと同じ青い帯の中、下の段（クリスマスケーキ）は本文の中に同じ部品の青い帯（.xband）を置く */
.hero{max-width:1536px;margin:0 auto;padding:0 calc(var(--pr) + 4px) 0 var(--px);height:232px;display:grid;grid-template-columns:365px minmax(0,1fr);column-gap:22px}
.hero.no-nx{grid-template-columns:minmax(0,1fr)}
.hero-l{padding-top:19px}
/* 見本の見出しは42px。こちらの文（クリスマスケーキ 2026）は見本の文より長く、42pxでは次の締切のカードに重なる（右端 x472＞カード x441）。重ならない最大の39pxにした（spec.md） */
.hero-h{margin:0;font-size:39px;line-height:57.5px;font-weight:700;letter-spacing:-.03em;word-spacing:-.05em;font-feature-settings:"palt";white-space:nowrap}
.hero-s{margin:12px 0 0;font-size:16px;line-height:26px;font-weight:400;color:rgba(255,255,255,.94)}
/* 上の段から下の段（クリスマスケーキ）へ移るリンク。スマホでは福袋の段が長いので、帯の中に置く */
.hero-jump{display:inline-flex;align-items:center;gap:10px;height:34px;margin:14px 0 0;padding:0 16px 0 18px;border:1px solid rgba(255,255,255,.62);border-radius:999px;color:#fff;font-size:14px;font-weight:500;line-height:1;text-decoration:none;white-space:nowrap}
.hero-jump::after{content:"";width:7px;height:7px;margin-top:-4px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg)}
@media (hover:hover){.hero-jump:hover{background:rgba(255,255,255,.12)}}
/* 下の段の帯：上の段の帯（ヘッダー72＋ヒーロー232）と同じ部品で、上に余白を足す（カードの下端は帯の下端にそろえる） */
.xband .hero{height:256px;padding-top:24px}
/* 下の段の「次の締切」が無いとき（12月25日を過ぎたあと）は、帯を見出しと2行の高さに縮める（カードの分の空きを残さない） */
.xband .hero.no-nx{height:auto;padding-bottom:30px}
.nx{list-style:none;margin:6px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:17px;align-items:start}
.nx-c{container-type:inline-size;min-width:0}
.nx-a{display:flex;flex-direction:column;height:226px;padding:15px clamp(14px,6cqw,20px) 14px;background:#fff;color:var(--ink);text-decoration:none;border-radius:14px;box-shadow:0 8px 22px rgba(25,70,220,.2)}
.nx-l{display:block;font-size:17px;line-height:22px;font-weight:700;color:#0f2f9e}
.nx-d{display:flex;align-items:flex-end;gap:16px;height:calc(min(23.5cqw,79px) + 9px);padding-bottom:0;border-bottom:1px solid #dbe3f4;margin-bottom:13px}
.nx-d b{font-size:min(23.5cqw,79px);line-height:1;font-weight:900;color:#1c4ccf;letter-spacing:-.03em;display:block;transform:translate(-5px,-11px)}
/* 見本のスラッシュ：数字と同じ高さ（0.734em）・幅 0.443em・横の太さ 0.105em の斜めの棒。文字の「/」は残して（コピー・読み上げ用）、色を透明にして形だけ描く */
/* 「1」の足を隠す（見本の「1」は足がない。フォントは源ノ角ゴシックのまま、字の形を clip-path で切る。2026-11-02 デザイン審査2回目 中5）。
   源ノ角ゴシック 900 の「1」は、幹が x 0.236〜0.414em・足が基準線から上 0.144em まで（字の箱の上から 0.79em）。足の段だけ幹の幅に切る。右の空きは足の分だけ詰める */
.nx-d b .d1{display:inline-block;margin-right:var(--d1r,-.07em);clip-path:polygon(0 0,100% 0,100% var(--d1y,.775em),.414em var(--d1y,.775em),.414em 100%,.236em 100%,.236em var(--d1y,.775em),0 var(--d1y,.775em))}
.nx-d b .sl{display:inline-block;width:.443em;height:.734em;margin:0 0 0 .076em;overflow:hidden;background:#1c4ccf;color:transparent;clip-path:polygon(74% 0,100% 0,23% 100%,0 100%);vertical-align:baseline;letter-spacing:0}
.nx-d i{display:grid;place-items:center;width:clamp(34px,13.1cqw,44px);height:clamp(34px,13.1cqw,44px);margin:0 0 17px -5px;border-radius:10px;background:#2f5bdc;color:#fff;font-style:normal;font-size:clamp(17px,6.5cqw,22px);font-weight:700;line-height:1;flex:none}
.nx-b{display:grid;grid-template-columns:clamp(58px,31cqw,104px) minmax(0,1fr) 14px;column-gap:clamp(8px,4.2cqw,14px);align-items:center}
.nx-p{position:relative;display:block;width:100%;aspect-ratio:104/74;border-radius:12px;overflow:hidden;background:#f2f4f8}
.nx-p::after{content:"イメージ";position:absolute;right:3px;bottom:3px;padding:0 5px;border-radius:7px;background:rgba(15,23,42,.55);color:#fff;font-size:8.5px;line-height:13px;letter-spacing:0}
.nx-p img{display:block;width:100%;height:100%;object-fit:cover}
.nx-t{display:block;min-width:0;transform:translateY(-5px)}
/* 名前と説明の字の大きさは、3枚で同じ（--n＝いちばん長い名前の字数、--m＝いちばん長い説明の字数〔12字まで〕。ul に置く）。--w＝写真の右の文字の幅。
   名前は1行に収まる大きさ（12〜18px）、説明は12字までなら1行、それより長いものは「まで」の前か語の切れ目で2行（2026-11-02 デザイン審査3回目 小3） */
.nx-b{--w:calc(100cqw - 2 * clamp(14px,6cqw,20px) - clamp(58px,31cqw,104px) - 2 * clamp(8px,4.2cqw,14px) - 14px)}
.nx-t b{display:block;margin-bottom:4px;font-size:clamp(12px,calc(var(--w) / var(--n,1)),18px);line-height:1.35;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx-t small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance;font-size:clamp(12px,min(4.5cqw,calc(var(--w) / var(--m,1))),15px);line-height:1.45;font-weight:400;color:#1b2547}
.nx-c2{display:flex;justify-content:center;color:#777d92}.nx-c2 .chev{width:28px;height:28px;flex:none;color:#777d92;stroke-width:1.4}
/* カードが細いとき（幅275px以下＝761〜960px、1180〜1300px ほど）は、矢印を外して写真を小さくし、名前と説明の幅を取る（カード全体がリンク）。
   説明は2行ぶんの高さを取り、3枚で名前の位置をそろえる（768px で「ファミリーマ…」と名前が切れ、「ファミマオンラ／インまで」と語の途中で割れた） */
@container (max-width:275px){
.nx-b{--w:calc(71cqw - 36px);grid-template-columns:clamp(52px,29cqw,72px) minmax(0,1fr);column-gap:8px}
.nx-c2{display:none}
.nx-t small{font-size:clamp(11.5px,calc(var(--w) / var(--m,1)),14px);min-height:2.9em}
}
/* 3枚のうち1枚でも説明が2行になるときは、3枚とも2行ぶんの高さを取って名前の位置をそろえる（home-client.js が nx2 を付ける） */
.nx.nx2 .nx-t small{min-height:2.9em}
@media (hover:hover){.nx-a:hover{box-shadow:0 10px 26px rgba(25,70,220,.3)}}

/* ---- トップの本体（段ごとに .hs-in の中に組む。下の段の青い帯は画面の幅いっぱい） */
.wrap-home{padding:0 0 36px}
.hs-in{max-width:1536px;margin:0 auto;padding:26px var(--px) 0}
.hs-xmas{margin-top:56px}
.hs-end{padding-top:0}
/* 幅が足りないとき（761〜1000px ほど）は、「すべて見る」と並べ替えを次の行の右へ送る（ピルに重ねない） */
.fl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:0 0 18px}
.pills{display:flex;flex:none;max-width:100%;gap:11.5px}
.pills button{flex:none;height:37px;padding:0 23px;border:0;border-radius:999px;background:#f3f5f9;color:var(--ink);font-size:14px;font-weight:500;line-height:1;cursor:pointer}
.pills button[aria-pressed=true]{background:#0f5cfb;color:#fff;font-weight:500;padding:0 27.5px}
@media (hover:hover){.pills button[aria-pressed=false]:hover{background:#e6ebf4}}
.fl-r{display:flex;align-items:center;margin-left:auto}
.more-btn{flex:none;display:inline-flex;align-items:center;margin:0 18px 0 0;padding:0;border:0;background:none;color:var(--blue-d);font-size:14px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer}
.more-btn::after{content:"";width:7px;height:7px;margin:0 3px 0 7px;border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;transform:rotate(45deg)}
.more-btn[aria-expanded=true]::after{margin-top:4px;transform:rotate(-45deg)}
.more-btn:hover{text-decoration:underline}
.sort{flex:none}
.sort select{display:block;width:138px;height:37px;padding:0 30px 0 12px;border:1px solid #dfe4ee;border-radius:8px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23444b60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;color:var(--ink);font-size:14px;-webkit-appearance:none;appearance:none;cursor:pointer}
.bg{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px 18.5px}
.bc{min-width:0;background:#fff;border-radius:6px;box-shadow:0 1px 4px rgba(16,28,64,.16);container-type:inline-size}
.bc-a{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto 28px;grid-template-rows:103px auto auto;align-content:start;height:168px;color:var(--ink);text-decoration:none}
.bc-ph{position:relative;grid-column:1/-1;display:block;overflow:hidden;border-radius:6px 6px 0 0;background:#eef0f4}
.bc-ph img{display:block;width:100%;height:100%;object-fit:cover}
.bc-ph::after{content:"イメージ";position:absolute;right:6px;bottom:5px;padding:0 6px;border-radius:8px;background:rgba(15,23,42,.5);color:#fff;font-size:9.5px;line-height:15px}
/* 名前と種類は1行。カードの幅（100cqw）から、矢印の列（28px）・左の余白（16px）・種類（約38px）を引いた幅に、名前の字数（--n）が入る大きさにする。
   ふつうは 15px（10字の「銀座コージーコーナー」は 14px）で、カードが細い幅（1180px・1440px ほど）だけ小さくなる（「銀座コージーコーナー …」と種類が省略されていた。2026-11-02 デザイン審査3回目 小2） */
.bc-t{grid-column:1/3;height:29px;padding:7px 0 0 16px;font-size:clamp(12px,calc((100cqw - 82px) / var(--n,8)),15px);line-height:21px;font-weight:700;white-space:nowrap;overflow:hidden}
/* 種類（福袋・ケーキ・チキン）はブランド名の右に小さく（2026-11-02 デザイン審査2回目 小11）。10字以上の名前（銀座コージーコーナー）は1段小さく */
.bc-t small{margin-left:2px;font-size:12px;font-weight:500;color:var(--sub)}
.bc-t.lg{font-size:clamp(12px,calc((100cqw - 80px) / var(--n,10)),14px);letter-spacing:-.01em}.bc-t.lg small{margin-left:0;font-size:11.5px}
.bc-p{grid-column:1;padding:7px 0 0 15px;font-size:14px;line-height:22px;white-space:nowrap}
.bc-p small{font-size:11.5px;color:var(--sub)}
.bc-x{color:var(--sub)}
.bc-s{display:inline-flex;align-items:center;justify-content:center;min-width:66px;height:22px;padding:0 9px;border-radius:999px;font-size:11.5px;line-height:1;font-weight:700;letter-spacing:.03em;color:#fff;white-space:nowrap;background:var(--none)}
.bc .bc-s{grid-column:2;margin:9px 4px 0 6px;justify-self:end}
.st-open{background:var(--ok)}.st-lot{background:var(--lot)}.st-soon{background:var(--soon);color:#3a2d00}.st-none{background:var(--none)}
.st-before{background:#e3ecff;color:#1448c8}.st-closed{background:#e9ebf0;color:#5b6479}
.bc-c{grid-column:3;grid-row:2/4;display:flex;align-items:center;justify-content:center;padding-top:6px}
@media (hover:hover){.bc:hover{box-shadow:0 3px 12px rgba(16,28,64,.2)}.bc-a:hover .bc-t{color:var(--blue)}}
.bg-none{margin:12px 0;font-size:14px;color:var(--sub)}
.note-img,.tb-foot{margin:10px 0 0;font-size:12.5px;line-height:1.7;color:var(--sub)}
.tb-sec{margin:26px 0 0}
.tb-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
.tb-hd h3,.sum-h{margin:0;font-size:19px;line-height:1.4;font-weight:700}
.more{display:inline-flex;align-items:center;gap:2px;font-size:14px;font-weight:500;color:var(--blue);text-decoration:none;white-space:nowrap}
.more .chev{width:14px;height:14px;color:var(--blue)}
.tb-wrap{border:1px solid #e6eaf1;border-radius:8px;overflow:hidden;background:#fff}
.tb{width:100%;table-layout:fixed;border-collapse:collapse;font-size:14px;line-height:1.5}
.tb thead th{height:33px;padding:0 16px 0 20px;background:#f1f4f8;color:#232f4f;font-size:13px;font-weight:400;text-align:left}
.tb td,.tb tbody th{text-wrap:balance;height:32.6px;padding:3px 12px 3px 20px;border-top:1px solid #eef1f5;text-align:left;vertical-align:middle;font-weight:400}
.tb tbody th{font-size:15px;font-weight:700}
.tb tbody th a{color:var(--ink);text-decoration:none;white-space:nowrap}
@media (hover:hover){.tb tbody th a:hover{color:var(--blue)}}
.tb small{font-size:12px;color:var(--sub)}
.tb .bc-s{min-width:67px}
/* 列の幅：1536幅（表 1426px）で13行とも1段に収まり、ステータスの列に「まもなく終了」の札（89px）が入る幅（2026-11-02 デザイン審査3回目 中1）。
   見本の列の始まり（75・281・502・667・903・1127・1302）に固定すると、主な商品・締切日・販売方法が2段になった（審査2回目 中1）。
   2回目の直しでステータスを 94px に詰めたら、締切の7日前から出る「まもなく終了」が列に入らず、表の右端で切れた（11/9〜15・11/24〜30・12/10〜31）。
   ステータスは札の最大幅＋左右の余白（20＋15）と端数で 126px。締切日の列（残りの幅。いちばん長い「12/14（月） 最後は12/22（火） 一部は日付なし」で 299px）から取った。
   各列の幅は、日付を進めたときのいちばん長い中身（scripts/check-overflow.mjs の時計を進める回で確かめる）。1536幅での始まりは 56・238・500・638・842・1156・1356（表の左端から） */
.tb th:nth-child(1){width:182px}.tb th:nth-child(2){width:262px}.tb th:nth-child(3){width:138px}.tb th:nth-child(4){width:204px}.tb th:nth-child(5){width:auto}.tb th:nth-child(6){width:200px}.tb th:nth-child(7){width:126px}
.tb td[data-l="ステータス"]{padding-right:15px}
.tb thead th:nth-child(7){white-space:nowrap}
.tb .bc-s{white-space:nowrap}
/* 幅901〜1535px：字を1段小さく（13px）する。1440〜1535px も 14px のままだと、締切日の列が足りずファミリーマートの行が2段になった（審査3回目 中1） */
@media (min-width:901px) and (max-width:1535px){
.tb{font-size:13px}
.tb thead th{padding:0 6px 0 12px;font-size:12.5px}
.tb td,.tb tbody th{padding:3px 6px 3px 12px}
.tb tbody th{font-size:14px}
.tb small{font-size:11.5px}
.tb td[data-l="ステータス"]{padding-right:6px}
}
/* 幅901〜1214px：7列は1段に入りきらない。ブランド名（折り返さない）と札（89px）の列は px で決め、残りは表の幅の比で配る。締切日の列が残りを取る。
   どの列も、中のいちばん長い語（「パーティーセット」「ファミマオンライン」「10/30（金）〜」「最後は12/22（火）」）が入る幅にして、語の途中で割らない。
   以前の比（ステータス 8.5%）では、締切の7日前から出る「まもなく終了」が 81px の列からはみ出した（審査3回目 中1） */
@media (min-width:901px) and (max-width:1214px){
.tb tbody th{font-size:13.5px}
.tb th:nth-child(1){width:156px}.tb th:nth-child(2){width:16%}.tb th:nth-child(3){width:10.5%}.tb th:nth-child(4){width:18.7%}.tb th:nth-child(5){width:auto}.tb th:nth-child(6){width:14.3%}.tb th:nth-child(7){width:110px}
}
/* 幅901〜1023px は、字を 12.5px（ブランド名 13px）にして、同じ決まり（いちばん長い語が入る幅）で配る */
@media (min-width:901px) and (max-width:1023px){
.tb{font-size:12.5px}
.tb tbody th{font-size:13px}
.tb th:nth-child(1){width:148px}.tb th:nth-child(2){width:17.3%}.tb th:nth-child(3){width:8.5%}.tb th:nth-child(4){width:12%}.tb th:nth-child(6){width:15.8%}.tb th:nth-child(7){width:108px}
}
/* 幅1215〜1535px：13px の字で、締切日の列（「11/30（月） 最後は12/16（水）」188px）が1段に収まる配り方。締切日の列が残りの幅を取る。
   ステータスは札（89px）＋左右の余白で 112px。1215〜1339px は販売方法を「ファミマオンライン」が入る 136px に細くして（ファミリーマートの「店頭・ファミマオンライン」だけ2段。同じ行の締切日も2段になる行）、ほかの行の締切日を1段に保つ */
@media (min-width:1215px) and (max-width:1535px){
.tb th:nth-child(1){width:158px}.tb th:nth-child(2){width:232px}.tb th:nth-child(3){width:117px}.tb th:nth-child(4){width:177px}.tb th:nth-child(5){width:auto}.tb th:nth-child(6){width:174px}.tb th:nth-child(7){width:112px}
}
@media (min-width:1215px) and (max-width:1339px){
.tb th:nth-child(6){width:136px}
}
.sum{margin:30px 0 0}
.sum-h{margin:0 0 10px}
.sum .prose{padding:0}
.home-meta{margin:18px 0 0}


/* ---- 下層ページ（記事・一覧・表）。見本は ui-candidates/inner/（幅1024で合わせる。計測は ui-candidates/spec.md §7）。
   見本は6枚で寸法が±10%ずつ違うので、6枚の平均を取って1つの決まりにした。 */
.wrap{max-width:1536px;margin:0 auto;padding:0 var(--px) 56px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;margin:16px 0 20px;font-size:13px;line-height:20px;color:#5f6c92}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--blue)}
.crumbs .sep{margin:0 9px;color:#9aa3bb}
.panel{margin:0}
.art-hd{margin:0 0 20px}
.art-hd h1,.prose>h1,.prose h1{text-wrap:pretty;margin:0;font-size:clamp(25px,3.9vw,40px);line-height:1.3;font-weight:800;letter-spacing:-.02em;word-spacing:.15em;text-spacing-trim:trim-start}
.art-hd h1 .pk{font-feature-settings:"palt";letter-spacing:0}
.wrap>.prose>h1:first-child{margin:28px 0 14px}
.meta{margin:9px 0 0;font-size:14px;line-height:20px;color:#56668a}
.nb{white-space:nowrap}
.toc{margin:0 0 18px;padding:0 18px;border:1px solid #e0e5ee;border-radius:var(--r);font-size:16px;line-height:1.6}
.toc summary{display:flex;align-items:center;justify-content:space-between;padding:12px 0;font-size:17px;line-height:24px;font-weight:700;cursor:pointer;list-style:none}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"";width:9px;height:9px;margin:-5px 4px 0 0;border-right:2px solid #3a4a6d;border-bottom:2px solid #3a4a6d;transform:rotate(45deg);transition:transform .15s}
.toc[open] summary::after{margin-top:4px;transform:rotate(-135deg)}
.toc[open] summary{padding-bottom:6px}
.toc ol{padding:0 0 12px 1.4em;margin:0}
.toc li{margin:0;line-height:28px;text-wrap:balance}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--blue)}
.prose{padding:0;font-size:17px;line-height:28px}
.prose h2,.sources h2,.hd h2{text-wrap:balance;position:relative;margin:35px 0 13px;padding:0 0 0 28px;border:0;font-size:28px;line-height:37px;font-weight:900;font-feature-settings:"palt"}
.prose h2::before,.sources h2::before,.hd h2::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;border-radius:4px;background:#0a66ff}
.prose>h2:first-child{margin-top:0}
.prose h3{margin:26px 0 8px;font-size:20px;line-height:30px;font-weight:700}
.prose p{margin:0 0 18px;max-width:56em}
/* 箇条書きの点は見本の位置（本文の左端から12px・点の中心から文字まで17px） */
.prose ul,.prose ol{padding-left:29px;margin:0 0 18px;max-width:56em}
.prose li{margin:0}
.prose strong{font-weight:700}
.prose blockquote{margin:0 0 18px;padding:2px 0 2px 14px;border-left:3px solid var(--line);color:var(--sub)}
.prose hr{border:0;border-top:1px solid var(--line);margin:28px 0}
/* 表：枠1枚・見出しの行は薄い青灰・縦の区切りあり。見出しの字は折り返さない（列が潰れないように） */
.prose .tbl{max-width:100%;margin:0 0 20px;border:1px solid #e3e8f1;border-radius:var(--r);overflow-x:auto;background:#fff;-webkit-overflow-scrolling:touch}
.prose .tbl table{width:100%;border-collapse:collapse;font-size:16px;line-height:23px;font-variant-numeric:tabular-nums}
.prose .tbl.stk table{font-size:15px;line-height:22px}
/* セルの中の折り返しは行の長さをそろえる（balance。「アプリ予約の案内／なし」のように最後の行に1〜2字だけ残さない） */
.prose th,.prose td{padding:8px 18px;border-top:1px solid #e9edf3;text-align:left;vertical-align:middle;overflow-wrap:normal;word-break:normal;line-break:strict;text-wrap:balance}
/* 4列以上の表のセルは文節で折り返す（「ファミマオンラ／イン」を防ぐ）。入りきらない文節だけ途中で割る（anywhere。列の幅の計算は今までと同じ） */
.prose .tbl.stk td{word-break:auto-phrase;overflow-wrap:anywhere}
/* 2〜3列の表も文節で折り返す（「ミルフィー／ユ」「ノ／エル」「いち／ごの…」を防ぐ。2026-11-02 デザイン審査3回目 小9）。2列の表は全部の幅、3列の表は 641px 以上。
   2列の表の左の列の見出し（「予約終了日（9:00）」）は折り返さない（左の列は日付などの短い語なので、見出しが割れると列が細くなる） */
.prose .tbl.two th,.prose .tbl.two td{word-break:auto-phrase;overflow-wrap:break-word}
.prose .tbl.two thead th:first-child{white-space:nowrap}
@media (min-width:641px){.prose .tbl:not(.stk) th,.prose .tbl:not(.stk) td{word-break:auto-phrase;overflow-wrap:break-word}}
.prose th+th,.prose th+td,.prose td+td,.prose td+th{border-left:1px solid #e9edf3}
/* 表の見出しは 600、本文は 450（見本の表は見出しが太く、本文も少し濃い。1回目の審査で 700 は太すぎ、3回目で 500・400 は軽いとされた中間。2026-11-02 デザイン審査3回目 小11。
   字の太さを途中の値にできるよう、源ノ角ゴシック（Noto Sans JP）は太さが連続で変わる版〔wght 400〜900〕を読む） */
.prose thead th{padding:9px 18px;border-top:0;background:#eff3f8;color:#0e1332;font-size:15px;line-height:22px;font-weight:600}
.prose .tbl td{font-weight:450}
.prose th.nw{white-space:nowrap}
.prose td a{font-weight:500;text-decoration:none}
.prose td a:hover{text-decoration:underline}
/* 本文の幅（17px×56em＝952px）で止めるもの：2列と3列の表・目次・注記・出典の一覧・次の日程の帯。
   1536幅で3列の表と目次が全幅（1426px）に伸び、本文と右端が2通りになった（2026-11-02 デザイン審査2回目 中2）。4列以上の表は列の数が要るので全幅のまま */
.prose .tbl.two,.prose .tbl.nar,.toc,.notice,.sources,.prose .next-dates{max-width:952px}
.prose .tbl.kv td:first-child{width:27.7%;font-weight:700}
.prose .tbl.kvn td:first-child{width:70%;font-weight:400}
.prose .ctr{text-align:center}
/* セルの中の小さい注記は、列の幅の計算に入れない（width:0＋min-width:100%）。長い注記が列を広げて、日付の列が割れるのを防ぐ（2026-11-02 審査 中14） */
.prose td small{display:block;width:0;min-width:100%;margin-top:2px;font-size:13px;line-height:1.5;color:var(--sub);font-weight:400}
/* ブランド名の右の小さい「公式」（確認先へのリンク。ブランド名と同じ行。2026-11-02 デザイン審査2回目 小3） */
.prose td small.ofc{display:inline;width:auto;min-width:0;margin:0 0 0 6px;font-size:12.5px}
.prose td small.ofc a{font-weight:400}
.prose .tbl.dense th,.prose .tbl.dense td{padding-left:10px;padding-right:10px}
.prose td.nw{white-space:nowrap}
.prose td.up{color:#ff7e00;font-weight:700}
.prose td.down{color:#0a8f55;font-weight:700}
.prose td.flat,.prose td.dash{color:#394457}
[data-pg=compare] .prose .tbl td{color:#26385a}
[data-pg=compare] .prose .tbl td a{color:var(--blue)}
[data-pg=compare] .prose .tbl td.up{color:#ff7e00}[data-pg=compare] .prose .tbl td.down{color:#0a8f55}
/* 比較の表の「比べた価格」の列は、補いの列として細く・字を小さく（年版の列と字を見本の大きさに戻す。2026-11-02 デザイン審査2回目 小4） */
@media (min-width:901px){
[data-pg=compare] .prose .tbl.dense th.sub{width:24%}
[data-pg=compare] .prose .tbl.dense td.sub{font-size:13.5px;line-height:20px;color:#5f6c92}
}
/* 動画の枠（{{youtube: ID}}）。16:9・角丸12px・下に1行のキャプション。はじめはサムネイル（i.ytimg.com）のリンク（.yt-f）で、押すと youtube-nocookie.com の埋め込みに替わる（build.mjs の VIDEO_JS）。
   2026-11-02 時点で動画があるのはブランドの詳細ページだけで、その見た目は brand.css（ここは一覧などに入れたときの最低限） */
.video{position:relative;width:100%;max-width:480px;aspect-ratio:16/9;margin:0 0 10px;background:#c3c8d0;border-radius:12px;overflow:hidden}
.video::before{content:"";position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:#3b404b}
.video::after{content:"";position:absolute;left:50%;top:50%;margin:-14px 0 0 -8px;border:14px solid transparent;border-left:24px solid #fff;border-right:0}
.video iframe{position:absolute;inset:0;z-index:1;width:100%;height:100%;border:0;background:#000}
.video .yt-f{position:absolute;inset:0;z-index:1;display:block}.video .yt-f img{display:block;width:100%;height:100%;object-fit:cover}
.video::before,.video::after{z-index:2;pointer-events:none}.video.on::before,.video.on::after{display:none}
.prose .video-cap{margin:0 0 20px;font-size:15px;line-height:22px;color:#1a2342}
/* 注記・出典 */
.notice{position:relative;margin:2px 0 0;padding:13px 20px 13px 54px;border-radius:10px;background:#e8f2fe;color:#0b46d6;font-size:16px;line-height:23px}
.notice::before{content:"i";position:absolute;left:19px;top:13px;width:22px;height:22px;border-radius:50%;background:#165efb;color:#fff;font-size:14px;font-weight:700;line-height:22px;text-align:center;font-style:normal}
.notice a{color:inherit;font-weight:700}
.sources{margin:0 0 20px;padding:0;font-size:16px;line-height:23px}
.sources h2{margin-top:28px}
.sources ul{list-style:none;margin:0;padding:0;border:1px solid #e3e8f1;border-radius:var(--r);overflow:hidden}
.sources li{position:relative;margin:0;border-top:1px solid #eef1f6}
.sources li:first-child{border-top:0}
.sources li::before{content:"";position:absolute;left:23px;top:50%;width:17px;height:21px;margin-top:-10.5px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 21' fill='none' stroke='%23364a6f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 1h8l5 5v13.5a.5.5 0 0 1-.5.5h-12a.5.5 0 0 1-.5-.5v-18a.5.5 0 0 1 .5-.5z'/%3E%3Cpath d='M10.5 1v5h5M5 11h7M5 15h7'/%3E%3C/svg%3E") no-repeat center/contain}
.sources li::after{content:"";position:absolute;right:26px;top:50%;width:8px;height:8px;margin-top:-5px;border-top:2px solid #4a5a7e;border-right:2px solid #4a5a7e;transform:rotate(45deg)}
.sources li a{display:block;padding:9px 52px 9px 63px;color:var(--blue);text-decoration:none}
.sources li a:hover{text-decoration:underline}
.src-m{color:#46557a}
.crosslinks{margin:0 0 20px;font-size:15px;line-height:24px}
/* 一覧ページの下の「記事一覧」：前の注記の箱との間は、ほかの見出しの前と同じ 35px（8px で見出しが箱にくっついていた。2026-11-02 デザイン審査3回目 小6） */
.idx-list{margin:35px 0 0}
.dl{display:grid;grid-template-columns:8em 1fr;gap:6px 12px;font-size:16px;line-height:26px;margin:0 0 22px}.dl dt{color:var(--sub)}.dl dd{margin:0;text-wrap:balance}
.rows,.list,.qrows{list-style:none}
.prose ul.list{padding-left:0;max-width:none}
.prose ul.list.cmp{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));column-gap:28px;margin-bottom:8px}
/* 同じ段の項目の高さをそろえる（1行の項目と2行の項目が並んでも、下線の位置が同じ。2026-11-02 デザイン審査3回目 小7） */
.prose ul.list.cmp>li{display:flex}
.list.cmp .row{flex:1;min-height:44px;padding:4px 0}
.list.cmp .t{font-size:15px;line-height:22px;font-weight:500}
.row,.qrow{display:flex;align-items:center;gap:10px;min-height:46px;padding:6px 0;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line2)}
.row-main{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.row-body{flex:1;min-width:0;display:block;text-wrap:pretty}
.t,.qt{font-size:16px;line-height:1.5;font-weight:700;flex:1;text-wrap:pretty}
.row small{display:block;font-size:13.5px;line-height:1.6;color:var(--sub);font-weight:400}
.qm{font-size:12px;color:var(--sub)}
.qc{display:flex}
@media (hover:hover){.row:hover .t,.qrow:hover .qt{color:var(--blue)}}
.empty{padding:14px;background:var(--tint);border-radius:var(--r);font-size:14px;color:var(--sub)}
.hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 6px}
.site-footer{padding:22px 0 48px;font-size:13px;line-height:1.8;color:var(--sub);border-top:1px solid var(--line)}
.site-footer .wrap-f{max-width:1536px;margin:0 auto;padding:0 var(--px)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:4px 18px;margin-bottom:10px}
.site-footer a{color:var(--sub)}
.site-footer p{margin:0}
.nf-links{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 20px}
.nf-links a{display:inline-flex;align-items:center;height:36px;padding:0 22px;border-radius:999px;background:#f2f4f8;color:var(--ink);font-size:14.5px;font-weight:500;text-decoration:none}
.nf-links a:hover{background:#e6ebf4}

/* 冒頭の「次の日程」の帯と、日付で絞る表（{{tool: …}}） */
.next-dates{margin:0 0 20px;padding:11px 20px;border-radius:var(--r);background:#edf3fd;color:#0b3fd8;font-size:17px;font-weight:700;line-height:25px}
.next-dates a{color:inherit;text-decoration:none}
.next-dates a:hover{text-decoration:underline}
.tool{margin:0 0 20px}
.prose .tool-lead,.prose .tool-foot{margin:0 0 12px;font-size:15px;line-height:24px}
.prose .tool-foot{margin:-8px 0 0;color:var(--sub);font-size:13px;line-height:22px}
.prose .tool-sum{margin:0 0 14px;font-size:13px;font-weight:400;line-height:22px;color:var(--sub)}
.tool-bar{display:flex;flex-wrap:wrap;gap:15px;margin:0 0 20px}
/* 列の幅は中身に合わせる（auto）。注記は行の下の全幅の1行（tr.tool-nt）なので、どの列も1行に収まる（見本の行は1段。2026-11-02 デザイン審査2回目 中3）。
   以前は 28：25：25：22 の固定で、ブランドの列（幅の4分の1）に注記が細切れに入り、行が3〜6段になった */
.prose .tool .tbl table{table-layout:auto}
.tool td:first-child a{white-space:nowrap}
/* 開始・締切・状態の列は折り返さない（短い日付と札だけ）。足りない幅は、ブランドと方法の列が折り返して受け持つ。1000px 未満は折り返しを許す */
@media (min-width:1000px){.tool td[data-l="開始"],.tool td[data-l="締切"],.tool td.tool-st{white-space:nowrap}}
.tool tr:has(+ tr.tool-nt)>td{padding-bottom:4px}
.tool tr.tool-nt>td{padding-top:0;padding-bottom:9px;border-top:0}
.tool tr.tool-nt small{display:block;width:auto;min-width:0;margin:0;font-size:13px;line-height:20px;color:var(--sub);font-weight:400;text-wrap:pretty}
.tool tr.tool-nt .tool-det{display:inline;margin:0;font-size:inherit;line-height:inherit}
.tool-bar button{min-width:104px;height:36px;padding:0 22px;border:0;border-radius:999px;background:#f2f4f8;color:var(--ink);font-size:14.5px;font-weight:500;cursor:pointer}
.tool-bar button[aria-pressed=true]{background:#0a5cfc;color:#fff;font-weight:700}
@media (hover:hover){.tool-bar button[aria-pressed=false]:hover{background:#e6ebf4}}
.tool .tool-ch{font-weight:400}
.tool small{display:block;width:auto;margin-top:2px;font-size:13px;line-height:1.55;color:var(--sub);font-weight:400}
.tool td.tool-st{min-width:0}
.tool .bdg{display:inline-flex;align-items:center;justify-content:center;min-width:104px;height:27px;padding:0 14px;border-radius:999px;background:var(--none);color:#fff;font-size:14px;line-height:1;font-weight:700;white-space:nowrap}
.tool tr[data-state=open] .bdg{background:#17ae65}
.tool tr[data-state=before] .bdg{background:#0d62fd}
.tool tr[data-state=nodate] .bdg{background:#e3ecff;color:#1448c8}
.tool tr[data-state=closed] .bdg{background:#e9ebf0;color:#5b6479}
.tool tr[data-state=closed]{color:var(--sub)}
.tool .tool-det{display:block;margin-top:5px;font-size:13px;line-height:1.55;color:var(--sub);font-weight:400}
.tool .tool-dl{margin-top:1px}
.tool [hidden]{display:none}


/* 幅1280px以上の下層ページ：左の列（本文・表・帯。952px まで）と、右の列（目次と次の締切）。見本は幅1024（本文の幅 952px）だけなので、それより広い画面では
   本文の列を見本と同じ幅に保ち、空いた右側に右の列を置く（以前は本文・帯が 952px で止まり、右に約470pxの空きが出て、カレンダーは全幅の表と帯で右端が2通りだった。
   2026-11-02 デザイン審査3回目 小8）。題名とぱんくずは両方の列の上。右の列は画面に付いてくる（sticky）。上の目次は、右の列に目次があるとき隠す */
.rail{display:none}
@media (min-width:1280px){
.art-grid{display:grid;grid-template-columns:minmax(0,952px) minmax(280px,1fr);column-gap:40px;align-items:start}
.art-main{min-width:0}
.rail{display:block;position:sticky;top:20px;max-height:calc(100vh - 40px);overflow-y:auto;scrollbar-width:thin}
.art-grid:has(.rail-toc) .art-main>.toc{display:none}
}
.rail-sec{margin:0 0 18px;padding:14px 18px 12px;border:1px solid #e3e8f1;border-radius:var(--r);background:#fff}
.rail-h{position:relative;margin:0 0 8px;padding-left:14px;font-size:16px;line-height:24px;font-weight:800}
.rail-h::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:5px;border-radius:3px;background:#0a66ff}
.rail-sec ol{list-style:none;margin:0;padding:0}
.rail-toc li{border-top:1px solid #eef1f6}
.rail-toc li:first-child{border-top:0}
.rail-toc a{display:block;padding:7px 0;font-size:14px;line-height:21px;color:var(--ink);text-decoration:none;text-wrap:pretty}
.rail-toc a:hover{color:var(--blue)}
.rail-nx li{border-top:1px solid #eef1f6}
.rail-nx li:first-child{border-top:0}
.rail-nx a{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:baseline;padding:8px 0;color:var(--ink);text-decoration:none}
.rail-nx .rn-d{font-size:15px;line-height:22px;font-weight:800;color:#1c4ccf;white-space:nowrap;font-variant-numeric:tabular-nums}
.rail-nx .rn-t b{display:block;font-size:14.5px;line-height:21px;font-weight:700}
.rail-nx .rn-t small{display:block;font-size:12.5px;line-height:18px;color:var(--sub)}
.rail-nx a:hover b{color:var(--blue)}
.rail-f{margin:8px 0 0;font-size:11.5px;line-height:17px;color:var(--sub)}

/* 幅901px以上（1280px以上も、表は 952px までの左の列に入る）：表の字はどの表も 15px、見出しは 14.5px にそろえる。4列以上の表はセルの左右を 12px。
   見本の表の字は 14〜17px（カレンダー・クリスマスケーキの一覧は約14px、福袋の一覧は約17px）。以前は4列以上が 14px、2〜3列が 16px で、同じページで2通りになり、
   見本の福袋の一覧と並べると小さく見えた（2026-11-02 デザイン審査3回目 小5）。15px でも、カレンダーの日付の列「11/4(水) 10:00〜11/15(日) 23:59」は1行に収まる（審査 中14） */
@media (min-width:901px){
.prose .tbl table,.prose .tbl.stk table{font-size:15px;line-height:22px}
.prose .tbl.stk th,.prose .tbl.stk td{padding-left:12px;padding-right:12px}
.prose .tbl thead th,.prose .tbl.stk thead th{font-size:14.5px}
.prose .tbl.stk.dense th,.prose .tbl.stk.dense td{padding-left:9px;padding-right:9px}
[data-pg=compare] .prose .tbl.stk.dense table{font-size:15px}
}

/* ---- 狭い幅 */
@media (max-width:1179px){
.hero{height:auto;grid-template-columns:minmax(0,1fr);row-gap:0;padding-bottom:0}
.xband .hero{height:auto;padding-top:12px}
.xband .hero.no-nx{padding-bottom:26px}
.hero-l{padding:18px 0 0}
.hero-h br{display:none}
.hero-h span,.hero-h{font-size:32px;line-height:46px;letter-spacing:-.02em;word-spacing:0}
.nx{margin:22px 0 0;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:14px}
.nx-a{height:100%}
/* 3枚の高さをそろえる（説明の段数が違っても、カードの下端を同じにする） */
.nx{align-items:stretch}
}
@media (max-width:1179px) and (min-width:761px){.hero-h br{display:block}}
@media (max-width:959px){
.hd-in{height:auto;grid-template-columns:minmax(0,1fr) minmax(200px,340px);grid-template-areas:"brand search" "nav nav";row-gap:6px;padding-top:12px;padding-bottom:4px}
.brand,.brand-h{grid-area:brand}.search{grid-area:search}.gnav{grid-area:nav;gap:26px;overflow-x:auto;padding:0 0 2px;scrollbar-width:none}
.gnav::-webkit-scrollbar{display:none}
.gnav a{padding:8px 0 5px;font-size:14px}
.search input{height:40px}
}
@media (max-width:959px){
.prose .tbl table{font-size:15px;line-height:22px}
.prose th,.prose td{padding:7px 10px}
.prose thead th{padding:8px 10px;font-size:14px}
.prose .tbl.dense th,.prose .tbl.dense td{padding-left:8px;padding-right:8px}
}
@media (max-width:900px){
.tb-wrap{border:0;border-radius:0;overflow:visible;background:none}
.tb,.tb tbody{display:block}
.tb thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tb tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 10px;border:1px solid #e6eaf1;border-radius:10px;background:#fff;overflow:hidden}
.tb td,.tb tbody th{display:block;width:auto!important;height:auto;padding:6px 14px;border-top:0;word-break:auto-phrase}
.tb tbody th{grid-column:1;grid-row:1;padding:12px 14px 2px;font-size:16px;white-space:nowrap}
.tb td[data-l="ステータス"]{grid-column:2;grid-row:1;justify-self:end;align-self:center;padding:10px 14px 0}.tb td[data-l="ステータス"]::before{display:none}
.tb td[data-l="主な商品"]{grid-column:1/-1;grid-row:2;padding:0 14px 8px;font-size:13px;color:var(--sub);border-bottom:1px solid #eef1f5}.tb td[data-l="主な商品"]::before{display:none}
.tb td::before{display:block;content:attr(data-l);font-size:11.5px;color:var(--sub);font-weight:400}
.tb td[data-l="価格帯"],.tb td[data-l="受付期間"],.tb td[data-l="締切日"],.tb td[data-l="販売方法"]{padding-top:8px;padding-bottom:6px}
.tb tr td:last-child{padding-bottom:8px}
}
@media (max-width:640px){
/* 札は「見出し名 値」を1行ずつ。日付は途中で折り返さない（nb）ので、曜日だけが次の行に落ちない */
.tb tr{grid-template-columns:minmax(0,1fr) auto}
.tb td[data-l="価格帯"],.tb td[data-l="受付期間"],.tb td[data-l="締切日"],.tb td[data-l="販売方法"]{grid-column:1/-1;display:flow-root;padding:3px 14px 3px 100px;font-size:14px;line-height:22px}
.tb td[data-l="価格帯"]::before,.tb td[data-l="受付期間"]::before,.tb td[data-l="締切日"]::before,.tb td[data-l="販売方法"]::before{float:left;width:80px;margin-left:-86px;font-size:12.5px;line-height:22px}
.tb td[data-l="価格帯"]{padding-top:8px}
.tb tr td:last-child{padding-bottom:8px}
}
/* 4列以上の表は、幅900px以下で「1行＝1枚の札」に組み替える（横に動かさない・右端が切れない。トップの表と同じ境目）。3列以下は折り返して収める。
   641〜900px（タブレットの縦）でも、列の多い表は収まらずに横に動いたため、境目を900pxにした（2026-11-02 審査の後の確認） */
@media (max-width:900px){
.prose .tbl.stk{border:0;border-radius:0;overflow:visible;background:none}
.prose .tbl.stk table,.prose .tbl.stk tbody{display:block;width:auto}
.prose .tbl.stk thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.prose .tbl.stk tr{display:block;margin:0 0 10px;border:1px solid #e3e8f1;border-radius:10px;overflow:hidden;background:#fff}
.prose .tbl.stk td{display:flow-root;padding:3px 14px 3px calc(var(--lw,90px) + 22px);border:0;font-size:14.5px;line-height:22px}
.prose .tbl.stk td+td{border-left:0}
/* 札の中は列の幅の計算が無いので、文節で折り返す（「事前支払／い」を防ぐ） */
.prose .tbl.stk td{word-break:auto-phrase;text-wrap:pretty}
/* 見出し名の幅（--lw）は表ごとに build.mjs が決める（その表のいちばん長い見出し名に合わせる） */
.prose .tbl.stk td::before{content:attr(data-l);white-space:nowrap;float:left;width:var(--lw,90px);margin-left:calc(-8px - var(--lw,90px));font-size:12.5px;line-height:22px;color:var(--sub);font-weight:400}
.prose .tbl.stk td[data-ll]{padding-left:14px}
.prose .tbl.stk td[data-ll]::before{float:none;display:block;width:auto;margin:0 0 -1px;white-space:normal}
.prose .tbl.stk td:first-child{min-width:0;width:auto;padding:9px 14px 7px;margin-bottom:3px;background:#f3f6fb;font-size:16px;font-weight:700}
.prose .tbl.stk td:first-child::before{display:none}
.prose .tbl.stk tr td:last-child{padding-bottom:8px}
.prose .tbl.stk td.tool-st{min-width:0}
/* 増減の列の中央揃え（ctr）はパソコンの表の列のためのもの。札では、ほかの行と同じく左に揃える（「差額」「率」の行だけ中央に寄っていた。2026-11-02 デザイン審査3回目 小10） */
.prose .tbl.stk .ctr{text-align:left}
/* 日付で絞る表の注記の行は、上の行の札の下の端に付ける（札を2枚に分けない） */
.prose .tbl.stk tr:has(+ tr.tool-nt){margin-bottom:0;border-bottom:0;border-radius:10px 10px 0 0}
.prose .tbl.stk tr:has(+ tr.tool-nt)>td:last-child{padding-bottom:4px}
.prose .tbl.stk tr.tool-nt{margin-top:0;border-top:0;border-radius:0 0 10px 10px}
.prose .tbl.stk tr.tool-nt>td:first-child{padding:0 14px 9px;margin:0;background:none;font-size:13px;font-weight:400}
.prose .tbl.stk.dense tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.prose .tbl.stk.dense td{grid-column:1/-1;padding:3px 14px}
.prose .tbl.stk.dense td.nw{grid-column:auto;padding:5px 8px 5px 14px}
.prose .tbl.stk.dense td:first-child{grid-column:1/-1;padding:9px 14px 7px;margin-bottom:0}
.prose .tbl.stk.dense td.sub{grid-column:1/-1;margin-bottom:3px;padding:0 14px 8px;background:#f3f6fb;font-size:13px;line-height:20px;color:var(--sub);font-weight:400}
.prose .tbl.stk.dense td.sub::before{display:none}
.prose .tbl.stk.dense td.dash{display:none}
.prose .tbl.stk.dense td::before{float:none;display:block;width:auto;margin:0;white-space:normal}
.prose .tbl.stk.dense td:first-child::before{display:none}
.prose .tbl.stk.dense td.nw{white-space:normal}
.prose .tbl.stk td[hidden]{display:none}
/* 確認元・出典の列（src）は、札の見出しの帯の右に「確認元 公式」と置く（札ごとに1行を取らない。2026-11-02 審査 中19） */
.prose .tbl.stk.hsrc tr{display:grid;grid-template-columns:minmax(0,1fr) auto}
.prose .tbl.stk.hsrc td{grid-column:1/-1}
.prose .tbl.stk.hsrc td:first-child{grid-column:1;grid-row:1}
.prose .tbl.stk.hsrc td.src{grid-column:2;grid-row:1;display:block;margin-bottom:3px;padding:10px 14px 7px 6px;background:#f3f6fb;font-size:13px;line-height:22px;white-space:nowrap}
.prose .tbl.stk.hsrc td.src::before{float:none;display:inline;width:auto;margin:0 6px 0 0;font-size:12px;line-height:22px}
/* ブランド比較の札：見出しの帯の右に増減（2025→2026・2026→2027）を出し、年版の価格は4つを1行に並べる（いちばん見たい数字を札の底に置かない。2026-11-02 審査 中19） */
[data-pg=compare] .prose .tbl.stk.dense tr{grid-template-columns:repeat(4,minmax(0,1fr))}
[data-pg=compare] .prose .tbl.stk.dense td:first-child{grid-column:1/3;grid-row:1;align-self:stretch;padding-top:13px}
[data-pg=compare] .prose .tbl.stk.dense td:nth-child(7),[data-pg=compare] .prose .tbl.stk.dense td:nth-child(8){grid-row:1;align-self:stretch;padding:8px 14px 6px 0;background:#f3f6fb;text-align:right;font-size:15px;line-height:21px}
[data-pg=compare] .prose .tbl.stk.dense td:nth-child(7){grid-column:3}
[data-pg=compare] .prose .tbl.stk.dense td:nth-child(8){grid-column:4}
[data-pg=compare] .prose .tbl.stk.dense tr:has(td:nth-child(8).dash) td:nth-child(7){grid-column:4}
[data-pg=compare] .prose .tbl.stk.dense tr:has(td:nth-child(7).dash) td:first-child,[data-pg=compare] .prose .tbl.stk.dense tr:has(td:nth-child(8).dash) td:first-child{grid-column:1/4}
[data-pg=compare] .prose .tbl.stk.dense tr:has(td:nth-child(7).dash):has(td:nth-child(8).dash) td:first-child{grid-column:1/-1}
[data-pg=compare] .prose .tbl.stk.dense td:nth-child(7)::before,[data-pg=compare] .prose .tbl.stk.dense td:nth-child(8)::before{font-size:11px;line-height:16px;letter-spacing:-.02em}
[data-pg=compare] .prose .tbl.stk.dense td.nw:not(:nth-child(7)):not(:nth-child(8)){padding:6px 4px 6px 14px}
}
/* 3列以下の表（スマホ幅） */
@media (max-width:640px){
.prose .tbl:not(.stk) table{font-size:14px;line-height:21px}
.prose .tbl:not(.stk) th,.prose .tbl:not(.stk) td,.prose .tbl:not(.stk) thead th{padding-left:6px;padding-right:6px;font-size:14px}
.prose .tbl.wrapnb .nb{white-space:normal}
.prose .tbl .nw .nb{white-space:nowrap}
/* 3列以下の表の見出しは、スマホ幅では語の切れ目で折り返してよい（値の列を広く取る。build.mjs の wrapnb の見積もりと同じ前提） */
.prose .tbl:not(.stk) thead th.nw{white-space:normal}
.prose .tbl:not(.stk) thead th{word-break:auto-phrase}
}
@media (max-width:760px){
:root{--px:16px}
.hd-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"brand" "search" "nav";row-gap:8px;padding-top:12px}
.brand .b1{font-size:26px}
.brand .b-logo{height:30px}
.gnav{gap:clamp(14px,4.4vw,22px);margin:0 calc(var(--gut) * -1);padding:0 var(--gut) 2px}
.gnav a{padding:8px 0 5px;font-size:clamp(11px,3.2vw,14px)}
.hero{padding-left:var(--gut);padding-right:var(--gut)}
.hero-l{padding-top:14px}
.hero-h{font-size:28px;line-height:40px}.hero-h br{display:block}
.hero-s{margin-top:8px;font-size:14px;line-height:22px}
.hero-jump{height:32px;margin-top:12px;font-size:13.5px}
.xband .hero{padding-top:10px}
.nx{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gut);gap:12px;margin:18px calc(var(--gut) * -1) 0;padding:0 var(--gut) 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nx::-webkit-scrollbar{display:none}
.nx-c{flex:0 0 min(82%,336px);scroll-snap-align:start}
.wrap-home{padding:0 0 28px}
.hs-in{padding:20px var(--px) 0}
.hs-xmas{margin-top:40px}
.hs-end{padding-top:0}
.fl{display:flex;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.pills{flex:0 0 calc(100% + var(--gut) * 2);gap:10px;overflow-x:auto;margin:0 calc(var(--gut) * -1);padding:0 var(--gut) 2px;scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}
.fl-r{flex:1 1 100%;justify-content:space-between;margin:0}
.more-btn{margin:0 0 0 2px}
.sort{display:flex;justify-content:flex-end;margin:0 0 0 auto}
.bg{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.bc-a{height:auto;grid-template-columns:minmax(0,1fr) 22px;grid-template-rows:80px auto auto auto;padding-bottom:10px}
/* スマホ幅：名前は1行（カードの幅に入る大きさ。最大 14px）、種類はその下の1行。どのカードも同じ段数にして、同じ段の価格と札の高さをそろえる
   （以前は名前と種類を同じ行に置き、長い名前のカードだけ種類が次の行に落ちて、となりのカードと高さがずれた。2026-11-02 デザイン審査3回目 小2） */
.bc-t{grid-column:1;height:auto;white-space:nowrap;overflow:hidden;font-size:clamp(10px,calc((100cqw - 32px) / var(--n,8)),14px);line-height:20px;padding:8px 0 0 10px}
.bc-t.lg{font-size:clamp(10px,calc((100cqw - 32px) / var(--n,10)),14px)}
.bc-t small,.bc-t.lg small{display:block;margin:1px 0 0;font-size:11.5px;line-height:16px;letter-spacing:0}
.bc-p{grid-column:1/-1;padding:3px 10px 0;font-size:13px;line-height:20px}
.bc .bc-s{grid-column:1/-1;justify-self:start;margin:6px 0 0 10px}
.bc-c{grid-column:2;grid-row:2;padding-top:8px}
.bc-ph::after{font-size:9px;right:4px;bottom:4px}
.tb-hd h3,.sum-h{font-size:17px}
.wrap{padding-bottom:40px}
.crumbs{margin:12px 0 14px;font-size:12.5px;line-height:18px}
.crumbs .sep{margin:0 6px}
.art-hd{margin-bottom:16px}
.art-hd h1,.prose>h1,.prose h1{font-size:25px;line-height:1.35}
.art-hd h1 .bar,.row .t .bar{display:block;width:0;height:0;overflow:hidden}
.meta{margin-top:8px;font-size:13px}
.toc{margin-bottom:16px}
.prose{font-size:16px;line-height:27px}
.prose p,.prose ul,.prose ol{margin-bottom:16px}
.prose ul,.prose ol{padding-left:1.4em}
.prose h2,.sources h2,.hd h2{margin:28px 0 12px;padding-left:20px;font-size:21px;line-height:30px}
.prose h2::before,.sources h2::before,.hd h2::before{width:7px;border-radius:3px}
.prose h3{margin:22px 0 6px;font-size:18px;line-height:28px}
.prose .tbl table{font-size:15px;line-height:22px}
.prose th,.prose td{padding:7px 12px}
.prose thead th{padding:8px 12px;font-size:14px}
.notice{padding:12px 14px 12px 46px;font-size:15px;line-height:22px}
.notice::before{left:14px;top:12px}
.sources li a{padding:9px 40px 9px 50px;font-size:15px}
.sources li::before{left:16px}
.sources li::after{right:16px}
.next-dates{padding:10px 14px;font-size:15px;line-height:23px}
.tool-bar{gap:10px}
.tool-bar button{min-width:0;padding:0 16px}
.video{max-width:none}
.dl{grid-template-columns:6.5em 1fr}
.site-footer .wrap-f{padding:0 var(--px)}
}