/* ==========================================================
   L&P Hobby BOX 共通スタイル
   - 本体サイトの style.css / studio.css の後に読み込む
   - すべて .hb- 接頭辞。サーバー不要・ブラウザ内保存の小さなアプリ向け
   ========================================================== */
:root{
  --hb-ink:#183c2f;
  --hb-ink-soft:#4d5d52;
  --hb-line:#cbd6cc;
  --hb-line-strong:#9fb3a3;
  --hb-paper:#fbfbf8;
  --hb-paper-2:#f0f4ee;
  --hb-green:#244b3d;
  --hb-green-deep:#143d2f;
  --hb-lime:#9ccc3c;
  --hb-lime-soft:#e6f2cf;
  --hb-danger:#b23a3a;
  --hb-danger-soft:#f7e3e3;
  --hb-radius:6px;
}

.hb-main{ padding-top:calc(var(--header-h) + 28px); min-height:70vh; }
.hb-main .container{ max-width:1180px; }

/* ---------- ページ見出し ---------- */
.hb-head{ padding:36px 0 28px; border-bottom:1px solid var(--hb-line); margin-bottom:32px; }
.hb-crumb{ font:500 11px var(--font-display); letter-spacing:.14em; color:var(--hb-ink-soft); margin-bottom:14px; display:flex; gap:10px; flex-wrap:wrap; }
.hb-crumb a{ color:inherit; text-decoration:none; border-bottom:1px solid transparent; }
.hb-crumb a:hover{ border-color:currentColor; }
.hb-head h1{ font-family:var(--font-jp); font-weight:500; font-size:clamp(28px,4vw,46px); letter-spacing:-.04em; line-height:1.15; margin:0 0 12px; color:var(--hb-ink); }
.hb-head h1 span{ font-family:var(--font-display); color:var(--hb-green); }
.hb-head p{ color:var(--hb-ink-soft); font-size:14px; max-width:640px; margin:0; line-height:1.8; }
.hb-badges{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.hb-badge{ font:500 10px var(--font-display); letter-spacing:.12em; padding:6px 10px; border:1px solid var(--hb-line-strong); border-radius:999px; color:var(--hb-green); background:#fff; }
.hb-badge--lime{ background:var(--hb-lime-soft); border-color:transparent; }

/* ---------- Hobby BOX トップ：ギャラリー ---------- */
.hb-hero{ padding:40px 0 20px; }
.hb-hero-display{ font:400 clamp(44px,8vw,120px)/1 var(--font-display); letter-spacing:-.07em; color:var(--hb-ink); margin:0 0 20px; }
.hb-hero-display em{ font-style:normal; color:var(--hb-green); }
.hb-hero-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:end; padding-bottom:36px; border-bottom:1px solid var(--hb-line); }
.hb-hero-grid p{ font-size:15px; line-height:1.9; color:var(--hb-ink-soft); margin:0; }
.hb-manifest{ font:500 11px/1.9 var(--font-display); letter-spacing:.1em; color:var(--hb-ink-soft); border-left:2px solid var(--hb-lime); padding-left:16px; }
.hb-manifest b{ color:var(--hb-ink); font-weight:700; display:block; font-size:12px; margin-bottom:6px; }

.hb-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:40px; }
.hb-card{ display:flex; flex-direction:column; text-decoration:none; color:inherit; border:1px solid var(--hb-line); background:#fff; border-radius:var(--hb-radius); overflow:hidden; transition:transform .35s var(--ease), border-color .35s; }
.hb-card:hover{ transform:translateY(-4px); border-color:var(--hb-green); }
.hb-card:focus-visible{ outline:2px solid var(--hb-green); outline-offset:3px; }
.hb-card--soon{ opacity:.65; }
.hb-card__art{ aspect-ratio:4/3; position:relative; background:var(--hb-paper-2); border-bottom:1px solid var(--hb-line); overflow:hidden; }
.hb-card__art svg{ width:100%; height:100%; display:block; }
.hb-card__no{ position:absolute; top:12px; left:14px; font:500 11px var(--font-display); letter-spacing:.14em; color:var(--hb-ink-soft); }
.hb-card__body{ padding:20px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.hb-card__tag{ font:500 10px var(--font-display); letter-spacing:.14em; color:var(--hb-green); }
.hb-card__body h3{ margin:0; font-family:var(--font-jp); font-weight:500; font-size:20px; letter-spacing:-.03em; color:var(--hb-ink); }
.hb-card__body p{ margin:0; font-size:13px; line-height:1.8; color:var(--hb-ink-soft); flex:1; }
.hb-card__cta{ margin-top:6px; font:500 12px var(--font-display); letter-spacing:.1em; color:var(--hb-green); display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--hb-line); padding-top:12px; }
.hb-card:hover .hb-card__cta span:last-child{ transform:translateX(4px); }
.hb-card__cta span:last-child{ transition:transform .3s var(--ease); }

.hb-principles{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:56px 0 20px; }
.hb-principle{ border-top:1px solid var(--hb-ink); padding-top:16px; }
.hb-principle b{ display:block; font:500 12px var(--font-display); letter-spacing:.12em; color:var(--hb-green); margin-bottom:8px; }
.hb-principle p{ margin:0; font-size:13px; line-height:1.8; color:var(--hb-ink-soft); }

/* ---------- アプリ共通レイアウト ---------- */
.hb-app{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:32px; align-items:start; }
.hb-app--single{ grid-template-columns:minmax(0,1fr); }
.hb-panel{ background:#fff; border:1px solid var(--hb-line); border-radius:var(--hb-radius); padding:22px; }
.hb-panel + .hb-panel{ margin-top:20px; }
.hb-panel--tint{ background:var(--hb-paper); }
.hb-panel--lime{ background:var(--hb-lime-soft); border-color:transparent; }
.hb-panel h2{ margin:0 0 14px; font:500 12px var(--font-display); letter-spacing:.14em; color:var(--hb-green); text-transform:uppercase; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.hb-panel h2 small{ font-family:var(--font-jp); font-weight:400; letter-spacing:0; text-transform:none; color:var(--hb-ink-soft); font-size:11px; }
.hb-side{ position:sticky; top:calc(var(--header-h) + 20px); }
.hb-note{ font-size:12px; line-height:1.8; color:var(--hb-ink-soft); margin:10px 0 0; }
.hb-note b{ color:var(--hb-ink); font-weight:500; }

/* ---------- フォーム部品 ---------- */
.hb-field{ display:flex; flex-direction:column; gap:6px; }
.hb-field label, .hb-label{ font:500 11px var(--font-display); letter-spacing:.1em; color:var(--hb-ink-soft); }
.hb-input, .hb-select{ width:100%; appearance:none; -webkit-appearance:none; font:400 15px var(--font-jp); color:var(--hb-ink); background:#fff; border:1px solid var(--hb-line-strong); border-radius:4px; padding:10px 12px; min-height:44px; box-sizing:border-box; }
.hb-input:focus, .hb-select:focus{ outline:2px solid var(--hb-green); outline-offset:1px; border-color:var(--hb-green); }
.hb-input--num{ font-family:var(--font-display); font-variant-numeric:tabular-nums; text-align:right; }
.hb-select{ background-image:linear-gradient(45deg,transparent 50%,var(--hb-ink) 50%),linear-gradient(135deg,var(--hb-ink) 50%,transparent 50%); background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-right:34px; }
.hb-row{ display:grid; gap:12px; }
.hb-row--2{ grid-template-columns:1fr 1fr; }
.hb-row--3{ grid-template-columns:repeat(3,1fr); }
.hb-row--4{ grid-template-columns:repeat(4,1fr); }
.hb-stack{ display:flex; flex-direction:column; gap:14px; }
.hb-inline{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* セグメント（トグル） */
.hb-seg{ display:inline-flex; border:1px solid var(--hb-line-strong); border-radius:4px; overflow:hidden; background:#fff; }
.hb-seg button{ appearance:none; border:0; background:transparent; font:500 13px var(--font-jp); color:var(--hb-ink-soft); padding:10px 16px; min-height:42px; cursor:pointer; border-right:1px solid var(--hb-line); }
.hb-seg button:last-child{ border-right:0; }
.hb-seg button[aria-pressed="true"]{ background:var(--hb-green); color:#fff; }
.hb-seg button:focus-visible{ outline:2px solid var(--hb-green); outline-offset:-3px; }
.hb-seg--wrap{ flex-wrap:wrap; }

/* ボタン */
.hb-btn{ appearance:none; border:1px solid var(--hb-green); background:var(--hb-green); color:#fff; font:500 13px var(--font-jp); letter-spacing:.04em; padding:11px 18px; min-height:44px; border-radius:4px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:background .2s,color .2s,transform .2s; text-decoration:none; }
.hb-btn:hover{ background:var(--hb-green-deep); }
.hb-btn:active{ transform:translateY(1px); }
.hb-btn:focus-visible{ outline:2px solid var(--hb-green); outline-offset:3px; }
.hb-btn--ghost{ background:#fff; color:var(--hb-green); }
.hb-btn--ghost:hover{ background:var(--hb-paper-2); }
.hb-btn--lime{ background:var(--hb-lime); border-color:var(--hb-lime); color:var(--hb-ink); }
.hb-btn--lime:hover{ background:#8bbb2f; }
.hb-btn--danger{ background:#fff; color:var(--hb-danger); border-color:var(--hb-danger); }
.hb-btn--danger:hover{ background:var(--hb-danger-soft); }
.hb-btn--sm{ padding:7px 12px; min-height:36px; font-size:12px; }
.hb-btn--block{ width:100%; }
.hb-btn[disabled]{ opacity:.45; cursor:not-allowed; }
.hb-iconbtn{ appearance:none; border:1px solid var(--hb-line-strong); background:#fff; color:var(--hb-ink); width:40px; height:40px; border-radius:4px; cursor:pointer; font:500 18px var(--font-display); display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.hb-iconbtn:hover{ background:var(--hb-paper-2); }
.hb-iconbtn--danger{ color:var(--hb-danger); }
.hb-iconbtn:focus-visible{ outline:2px solid var(--hb-green); outline-offset:2px; }

/* 結果表示 */
.hb-result{ display:grid; grid-template-columns:1fr; gap:10px; }
.hb-result__big{ font:500 clamp(44px,7vw,72px)/1 var(--font-display); letter-spacing:-.04em; color:var(--hb-ink); font-variant-numeric:tabular-nums; }
.hb-result__big small{ font-size:.32em; letter-spacing:.06em; color:var(--hb-ink-soft); margin-left:6px; }
.hb-result__sub{ font-size:13px; color:var(--hb-ink-soft); line-height:1.7; }
.hb-result__sub b{ color:var(--hb-ink); font-weight:500; }
.hb-kv{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px dashed var(--hb-line); font-size:14px; }
.hb-kv:last-child{ border-bottom:0; }
.hb-kv span:first-child{ color:var(--hb-ink-soft); }
.hb-kv span:last-child{ font-family:var(--font-display); font-variant-numeric:tabular-nums; font-weight:500; color:var(--hb-ink); }
.hb-kv--total{ border-top:1px solid var(--hb-ink); margin-top:4px; padding-top:12px; font-size:16px; }

/* テーブル */
.hb-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--hb-line); border-radius:4px; }
.hb-table{ width:100%; border-collapse:collapse; font-size:13px; min-width:480px; }
.hb-table th, .hb-table td{ padding:9px 10px; border-bottom:1px solid var(--hb-line); text-align:left; white-space:nowrap; }
.hb-table th{ font:500 10px var(--font-display); letter-spacing:.12em; color:var(--hb-ink-soft); background:var(--hb-paper); position:sticky; top:0; }
.hb-table td.num, .hb-table th.num{ text-align:right; font-family:var(--font-display); font-variant-numeric:tabular-nums; }
.hb-table tr:last-child td{ border-bottom:0; }
.hb-table tbody tr:hover td{ background:#f7faf5; }
.hb-table .is-hl td{ background:var(--hb-lime-soft); }
.hb-table td .hb-input{ min-height:36px; padding:6px 8px; font-size:14px; }
.hb-table td .hb-input--num{ width:64px; }
.hb-table--sticky-first th:first-child, .hb-table--sticky-first td:first-child{ position:sticky; left:0; background:#fff; z-index:1; }
.hb-table--sticky-first th:first-child{ background:var(--hb-paper); z-index:2; }
.hb-pos{ color:var(--hb-green); }
.hb-neg{ color:var(--hb-danger); }

/* リスト（履歴など） */
.hb-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.hb-list li{ display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--hb-line); border-radius:4px; background:#fff; font-size:13px; }
.hb-list li .grow{ flex:1; min-width:0; }
.hb-list li .meta{ color:var(--hb-ink-soft); font-size:11px; }
.hb-empty{ font-size:13px; color:var(--hb-ink-soft); padding:14px; text-align:center; border:1px dashed var(--hb-line-strong); border-radius:4px; }

/* チップ */
.hb-chip{ display:inline-flex; align-items:center; gap:6px; font:500 11px var(--font-display); letter-spacing:.08em; padding:4px 10px; border-radius:999px; background:var(--hb-paper-2); color:var(--hb-ink); }
.hb-chip--lime{ background:var(--hb-lime-soft); }
.hb-chip--danger{ background:var(--hb-danger-soft); color:var(--hb-danger); }

/* トースト */
.hb-toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(120%); background:var(--hb-ink); color:#fff; font-size:13px; padding:12px 18px; border-radius:4px; z-index:1200; transition:transform .35s var(--ease); max-width:calc(100vw - 32px); }
.hb-toast.is-active{ transform:translateX(-50%) translateY(0); }

/* 早見表 */
.hb-quick{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.hb-quick button{ appearance:none; border:1px solid var(--hb-line); background:#fff; border-radius:4px; padding:12px 12px; text-align:left; cursor:pointer; font-family:var(--font-jp); color:var(--hb-ink); }
.hb-quick button:hover{ border-color:var(--hb-green); background:var(--hb-paper); }
.hb-quick button b{ display:block; font:500 12px var(--font-display); letter-spacing:.08em; color:var(--hb-green); margin-bottom:4px; }
.hb-quick button span{ font-size:12px; color:var(--hb-ink-soft); }

/* 幹事アプリ：参加者行 */
.hb-member{ display:grid; grid-template-columns:minmax(0,1.4fr) 110px 40px; gap:8px; align-items:center; }
.hb-member .hb-select{ min-height:40px; padding:6px 30px 6px 10px; font-size:13px; }
.hb-member .hb-input{ min-height:40px; }
.hb-pay-row{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 12px; border:1px solid var(--hb-line); border-radius:4px; background:#fff; }
.hb-pay-row.is-paid{ background:var(--hb-lime-soft); border-color:transparent; }
.hb-pay-row.is-paid .name{ text-decoration:line-through; color:var(--hb-ink-soft); }
.hb-pay-row .name{ font-size:14px; }
.hb-pay-row .role{ font-size:11px; color:var(--hb-ink-soft); }
.hb-pay-row .amt{ font:500 18px var(--font-display); font-variant-numeric:tabular-nums; color:var(--hb-ink); }
.hb-check{ width:22px; height:22px; accent-color:var(--hb-green); cursor:pointer; }
.hb-progress{ height:8px; background:var(--hb-paper-2); border-radius:999px; overflow:hidden; margin-top:10px; }
.hb-progress i{ display:block; height:100%; background:var(--hb-lime); width:0; transition:width .4s var(--ease); }

/* 麻雀：点棒表示 */
.hb-players{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.hb-player{ border:1px solid var(--hb-line); border-radius:4px; padding:14px; background:#fff; position:relative; }
.hb-player.is-dealer{ border-color:var(--hb-green); box-shadow:inset 0 0 0 1px var(--hb-green); }
.hb-player .wind{ font:500 10px var(--font-display); letter-spacing:.14em; color:var(--hb-ink-soft); }
.hb-player .wind b{ color:var(--hb-green); }
.hb-player .pname{ font-size:14px; margin:6px 0 4px; display:flex; align-items:center; gap:6px; }
.hb-player .pname input{ width:100%; border:0; border-bottom:1px dashed var(--hb-line-strong); background:transparent; font:inherit; color:inherit; padding:2px 0; }
.hb-player .pts{ font:500 26px var(--font-display); font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--hb-ink); }
.hb-player .diff{ font-size:11px; color:var(--hb-ink-soft); font-variant-numeric:tabular-nums; }
.hb-player .pick{ margin-top:8px; }
.hb-player .pick button{ width:100%; }
.hb-player .pick button[aria-pressed="true"]{ background:var(--hb-green); color:#fff; }
.hb-winner-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }

/* ゴルフ */
.hb-golf-players{ display:flex; flex-wrap:wrap; gap:8px; }
.hb-golf-players .hb-input{ max-width:140px; }
.hb-golf-legend{ display:flex; gap:12px; flex-wrap:wrap; font-size:11px; color:var(--hb-ink-soft); margin-top:10px; }
.hb-golf-legend i{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:4px; vertical-align:middle; }
.hb-table td.eagle{ background:#d9ecf7; }
.hb-table td.birdie{ background:#e6f2cf; }
.hb-table td.bogey{ background:#fbeee0; }
.hb-table td.dbogey{ background:#f7e3e3; }
.hb-table td.hidden-hole{ box-shadow:inset 3px 0 0 var(--hb-lime); }

/* Hobby BOX 本体サイト側の導線（index.html 用） */
.hobby-teaser{ display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center; border:1px solid var(--hb-line); background:#fff; padding:clamp(24px,4vw,44px); border-radius:6px; }
.hobby-teaser h3{ margin:0 0 12px; font:400 clamp(30px,4.4vw,56px)/1.05 var(--font-display); letter-spacing:-.06em; color:var(--hb-ink); }
.hobby-teaser h3 em{ font-style:normal; color:var(--hb-green); }
.hobby-teaser p{ margin:0 0 20px; font-size:14px; line-height:1.9; color:var(--hb-ink-soft); }
.hobby-teaser__list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.hobby-teaser__list li{ display:flex; gap:12px; align-items:center; padding:12px 14px; border:1px solid var(--hb-line); border-radius:4px; font-size:13px; background:var(--hb-paper); }
.hobby-teaser__list li b{ font:500 11px var(--font-display); letter-spacing:.12em; color:var(--hb-green); min-width:70px; }
.hobby-teaser__list li a{ color:inherit; text-decoration:none; flex:1; }
.hobby-teaser__list li a:hover{ text-decoration:underline; }

/* ---------- レスポンシブ ---------- */
@media (max-width:1023px){
  .hb-app{ grid-template-columns:1fr; }
  .hb-side{ position:static; }
  .hb-gallery{ grid-template-columns:repeat(2,1fr); }
  .hb-hero-grid{ grid-template-columns:1fr; gap:24px; }
  .hb-principles{ grid-template-columns:1fr; gap:14px; }
  .hobby-teaser{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .hb-main{ padding-top:calc(var(--header-h) + 12px); }
  .hb-head{ padding:22px 0 20px; margin-bottom:22px; }
  .hb-gallery{ grid-template-columns:1fr; gap:18px; }
  .hb-panel{ padding:16px; }
  .hb-row--3, .hb-row--4{ grid-template-columns:1fr 1fr; }
  .hb-players{ grid-template-columns:1fr 1fr; }
  .hb-winner-grid{ grid-template-columns:1fr 1fr; }
  .hb-member{ grid-template-columns:minmax(0,1fr) 96px 40px; }
  .hb-seg button{ padding:10px 12px; font-size:12px; }
  .hb-result__big{ font-size:44px; }
}
@media (prefers-reduced-motion:reduce){
  .hb-card, .hb-toast, .hb-progress i, .hb-card__cta span:last-child{ transition:none; }
}
@media print{
  .header, .footer, .hamburger, .overlay, .hb-toast, .hb-noprint{ display:none !important; }
  .hb-main{ padding-top:0; }
  .hb-panel{ border-color:#999; break-inside:avoid; }
  .hb-app{ grid-template-columns:1fr; }
}

/* Hobby BOX / 2026 edition. Original component toolkit above is retained. */
:root{--font-display:'Space Grotesk',sans-serif;--font-jp:'Noto Sans JP',sans-serif;--ease:cubic-bezier(.2,.7,.2,1);--header-h:80px;--hb-lime:#d0ed8c;--hb-paper:#f5f6ef;--hb-surface:#fff;--hb-green:#244b3d}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}.hb-site{margin:0;background:var(--hb-paper);color:var(--hb-ink);font:400 14px/1.8 var(--font-jp)}.hb-site button,.hb-site input,.hb-site textarea{font:inherit}.hb-site a{color:inherit}.hb-site a.hb-btn{color:#fff}.hb-site a.hb-btn--ghost{color:var(--hb-green)}.hb-site a.hb-btn--lime{color:var(--hb-ink)}.hb-site button{cursor:pointer}.hb-site button,.hb-site .hb-btn,.hb-site .hb-iconbtn{min-height:44px}.hb-site [hidden]{display:none!important}.hb-site :focus-visible{outline:3px solid #718b38;outline-offset:4px}.hb-skip{position:fixed;top:-100px;left:16px;z-index:200;background:var(--hb-lime);padding:14px}.hb-skip:focus{top:12px}.hb-shell{max-width:1360px;margin:auto;padding:0 64px}.hb-topbar{height:88px;max-width:1488px;margin:auto;padding:0 64px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--hb-line);gap:16px}.hb-brand{font:700 28px/.9 var(--font-display);letter-spacing:-2px;text-decoration:none;display:flex;align-items:center;gap:12px}.hb-brand span{font:500 9px/1.3 var(--font-display);letter-spacing:1.5px;max-width:45px}.hb-home{font:500 11px var(--font-display);letter-spacing:1px;text-decoration:none}.hb-home span{font:400 10px var(--font-jp);margin-left:12px}.hb-mode{background:none;color:inherit;border:1px solid var(--hb-line-strong);border-radius:40px;padding:8px 16px;font:500 10px var(--font-display)!important;letter-spacing:1px}.hb-mode[aria-pressed=true]{background:var(--hb-lime);color:#183c2f}.box-eyebrow{display:flex;justify-content:space-between;padding-top:27px;font:500 10px var(--font-display);letter-spacing:1.4px}.box-eyebrow i{display:inline-block;width:7px;height:7px;background:#7d9d46;border-radius:50%;margin-right:8px}.box-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:center;padding:56px 0 54px}.box-overline{margin:0 0 16px;font-size:16px;letter-spacing:.18em}.box-hero h1{font:500 clamp(76px,8.8vw,126px)/.91 var(--font-display);letter-spacing:-.08em;margin:0 0 25px}.box-hero h1>span{display:block}.box-asterisk{display:inline-block;color:#819c46;font-size:.75em;vertical-align:8%;margin-left:24px}.box-intro{font-size:14px;line-height:2;margin:0 0 24px}.box-hero .hb-btn{min-width:200px;justify-content:space-between;border-radius:0;color:#183c2f}.mobile-break{display:none}.box-object{position:relative;aspect-ratio:1.05;max-width:440px;width:100%;justify-self:end;display:flex;flex-direction:column;justify-content:center;perspective:800px;transform:rotate(-9deg)}.box-orbit{position:absolute;inset:4% -3%;border:1px solid var(--hb-line);border-radius:50%;transform:rotate(30deg);z-index:-1}.toolbox-handle{width:32%;height:40px;border:13px solid #234c3a;border-bottom:0;margin:0 auto;border-radius:13px 13px 0 0}.toolbox-lid{position:relative;display:flex;justify-content:space-between;padding:14px 24px;background:#315c45;border:1px solid #163c2e;color:#e4efd9;box-shadow:7px 6px 0 #103426;border-radius:12px 12px 0 0;font:500 9px var(--font-display);letter-spacing:2px}.toolbox-body{position:relative;background:#204935;color:#ecf4df;padding:26px 25px 16px;border:1px solid #143e2c;box-shadow:8px 9px 0 #103426,18px 30px 35px #183c2f20;border-radius:0 0 15px 15px}.toolbox-body>div:first-child{font:400 clamp(35px,5vw,65px)/.94 var(--font-display);letter-spacing:-3px}.toolbox-body b{font-weight:700}.box-sticker{position:absolute;right:26px;top:36px;background:#d0ed8c;color:#183c2f;width:91px;height:91px;display:grid;place-content:center;border-radius:50%;font:700 19px/1.1 var(--font-display);text-align:center;transform:rotate(20deg);border:1px dashed #244b3d;outline:5px solid #d0ed8c}.box-latch{position:absolute;width:24px;height:34px;top:-15px;left:48%;background:linear-gradient(90deg,#bccab7,#eef2e9,#a2b89f);border:3px solid #173e2f;border-radius:3px}.toolbox-foot{display:flex;justify-content:space-between;border-top:1px solid #ffffff30;padding-top:15px;margin-top:23px;font:500 9px var(--font-display);letter-spacing:1px}.toolbox-foot span{font-size:20px}.object-caption{font:500 9px var(--font-display);letter-spacing:2px;position:absolute;bottom:-3%;right:8%;transform:rotate(9deg)}.box-strip{display:flex;justify-content:space-between;border-top:1px solid var(--hb-line-strong);border-bottom:1px solid var(--hb-line-strong);padding:15px 0;font:500 10px var(--font-display);letter-spacing:1.5px}.box-strip span:last-child{font:400 10px var(--font-jp);letter-spacing:.04em}.box-collection{padding:62px 0 55px}.box-section-head{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:27px}.box-label{font:500 10px/1.6 var(--font-display);letter-spacing:1.5px;margin:0 0 12px}.box-section-head h2{font-size:25px;font-weight:500;letter-spacing:-1px;margin:0}.box-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.box-filter,.box-personal{display:flex;gap:5px;flex-wrap:wrap}.box-controls button{border:1px solid transparent;border-radius:3px;padding:8px 13px;color:var(--hb-ink-soft);background:transparent;font-size:12px}.box-filter button[aria-pressed=true]{background:var(--hb-ink);color:var(--hb-paper)}.box-personal button[aria-pressed=true]{border-bottom:1px solid var(--hb-ink);border-radius:0;color:var(--hb-ink)}.hb-gallery{gap:22px;margin-top:24px}.hb-card{background:var(--hb-surface);border-radius:5px;position:relative;min-width:0}.hb-card__art{aspect-ratio:1.4;background:#e4ebd9}.hb-card:nth-child(2) .hb-card__art{background:#e7ebdd}.hb-card:nth-child(3) .hb-card__art{background:#eee6db}.hb-card__art svg{transition:transform .6s}.hb-card:hover .hb-card__art svg{transform:rotate(-3deg) scale(1.04)}.art-piece,.art-float{transition:translate .45s}.hb-card:hover .art-piece{translate:0 -7px}.hb-card:hover .art-float{translate:0 5px}.hb-card__no{color:#244b3d;top:15px}.box-new{position:absolute;top:14px;right:16px;font:700 9px var(--font-display);letter-spacing:1px;border:1px solid #244b3d;color:#244b3d;border-radius:20px;padding:3px 8px}.hb-card__body{padding:23px;gap:8px}.hb-card__body h3{font-size:20px;font-weight:500}.hb-card__tag{font-size:9px}.hb-card__body p{font-size:12px}.hb-card__cta{font-family:var(--font-jp);font-size:11px;letter-spacing:0;margin-top:13px}.card-actions{display:flex;align-items:center;gap:6px}.card-actions button{border:0;color:var(--hb-ink);background:transparent;min-width:44px;padding:8px;font-size:12px}.card-actions .favorite{font-size:24px}.favorite[aria-pressed=true]{color:#687d24}.card-back{padding:25px;min-height:405px;display:flex;flex-direction:column;background:var(--hb-ink);color:var(--hb-paper);flex:1}.card-back .box-label{color:var(--hb-lime)}.card-back h3{font-size:20px;font-weight:500}.card-back p{font-size:13px;line-height:2}.card-back dl{font-size:11px;margin-top:auto}.card-back dl>div{display:flex;justify-content:space-between;border-bottom:1px solid #ffffff30;padding:8px 0;gap:12px}.card-back dd{margin:0}.card-back button{color:inherit;background:none;border:1px solid currentColor;margin-top:16px}.box-storage-note{font-size:11px;color:var(--hb-ink-soft);margin:22px 0 0}.hb-gallery>.hb-empty{grid-column:1/-1;padding:50px 20px}.box-about{border-top:1px solid var(--hb-line-strong);padding:55px 0;display:grid;grid-template-columns:1fr 1fr;gap:40px}.box-about h2{font-size:32px;line-height:1.6;font-weight:500;letter-spacing:-1px;margin:16px 0}.box-about p{font-size:13px;line-height:2.2;margin-top:0}.box-promises{display:flex;gap:24px;flex-wrap:wrap;margin-top:24px}.box-promises span{font:400 10px var(--font-display);display:grid;gap:8px}.box-promises b{font:500 12px var(--font-jp)}.box-install{padding:32px 38px;background:var(--hb-ink);color:var(--hb-paper);display:flex;justify-content:space-between;align-items:center;gap:25px}.box-install .box-label{color:var(--hb-lime)}.box-install h2{font-size:22px;font-weight:500;margin:6px 0}.box-install p{font-size:12px;margin:0}.box-install .hb-btn{white-space:nowrap;border-color:var(--hb-paper);background:transparent;color:var(--hb-paper)}.box-colophon{display:flex;justify-content:space-between;align-items:center;padding:20px 0 35px;font:400 9px var(--font-display);letter-spacing:1px}.hb-text-button{border:0;border-bottom:1px solid var(--hb-line);background:none;color:inherit;font-size:11px!important}.hb-bottom{padding:28px 64px;border-top:1px solid var(--hb-line);display:flex;align-items:center;justify-content:space-between;gap:15px;font:500 10px var(--font-display)}.hb-bottom a{text-decoration:none}.hb-bottom span:nth-child(2){font:400 10px var(--font-jp)}.hb-dialog{margin:auto;max-width:calc(100% - 32px);width:460px;max-height:90dvh;overflow:auto;padding:24px;border:1px solid var(--hb-line);border-radius:8px;color:var(--hb-ink);background:var(--hb-surface)}.hb-dialog::backdrop{background:#071d17ba;backdrop-filter:blur(4px)}.hb-dialog h2{font-size:20px;font-weight:500}.hb-dialog-head{display:flex;justify-content:space-between;align-items:center;gap:14px}.hb-dialog .hb-inline{margin-top:20px}.hb-dialog textarea{resize:vertical;font-size:11px!important;overflow-wrap:anywhere}#qr-output{display:flex;justify-content:center;margin:16px 0}#qr-output svg{width:260px;max-width:100%;height:auto;background:white}.hb-template{padding-top:28px;padding-bottom:60px}.hb-back{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-size:12px}.hb-workspace-head{display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid var(--hb-line);padding-bottom:15px}.hb-workspace-head h2{margin:0}.hb-workspace-head #save-status{font-size:10px;color:var(--hb-ink-soft)}.hb-placeholder{padding:40px 0;text-align:center}.hb-placeholder>span{font-size:60px;color:#87a64d}.hb-placeholder h2{display:block;font:500 21px var(--font-jp);letter-spacing:0;margin:12px}.hb-placeholder p{font-size:13px}.hb-app-actions{display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid var(--hb-line);padding-top:22px;margin-top:25px}.hb-steps{padding-left:22px;margin:0;font-size:13px;line-height:2.5}.hb-disclaimer{font-size:11px;color:var(--hb-ink-soft);padding-top:20px}.hb-panel,.hb-input,.hb-btn--ghost,.hb-iconbtn,.hb-badge{background:var(--hb-surface)}
.hb-site[data-theme=bar]{--hb-ink:#e3ebd9;--hb-ink-soft:#b4c3ad;--hb-line:#3b5345;--hb-line-strong:#61705b;--hb-paper:#11261d;--hb-paper-2:#1c3327;--hb-surface:#193326;--hb-green:#d0ed8c;--hb-green-deep:#365a40;--hb-lime-soft:#3b5127;color-scheme:dark}.hb-site[data-theme=bar] .hb-btn:not(.hb-btn--ghost){color:#183c2f}.hb-site[data-theme=bar] .hb-btn--ghost{color:var(--hb-ink)}.hb-site[data-theme=bar] .box-install{background:#d0ed8c;color:#183c2f}.hb-site[data-theme=bar] .box-install .box-label{color:#244b3d}.hb-site[data-theme=bar] .card-back{background:#233e2e;color:#e3ebd9}.hb-site[data-theme=bar] .hb-toast{color:#183c2f}.hb-site[data-theme=bar] .hb-badge--lime{background:#3b5127}.hb-site[data-theme=bar] .hb-panel--tint{background:var(--hb-paper-2)}
@media(min-width:1600px){.box-hero-grid{padding-block:75px}}
@media(max-width:1023px){.hb-shell{padding-inline:32px}.hb-topbar{padding-inline:32px}.box-hero-grid{gap:40px}.box-hero h1{font-size:88px}.box-sticker{width:65px;height:65px;font-size:15px;right:18px}.toolbox-body{padding:25px 20px 15px}.toolbox-body>div:first-child{font-size:46px}.hb-gallery{grid-template-columns:repeat(3,1fr);gap:14px}.hb-card__body{padding:16px}.hb-card__body h3{font-size:16px}.hb-card__cta{flex-wrap:wrap}.hb-bottom{padding-inline:32px}.hb-home span{display:none}}
@media(max-width:700px){.hb-topbar{height:74px;padding-inline:22px;gap:10px}.hb-brand{font-size:24px;gap:8px}.hb-brand span{font-size:8px}.hb-home{display:none}.hb-mode{padding-inline:12px;font-size:9px!important}.hb-shell{padding-inline:22px}.box-eyebrow{font-size:8px;letter-spacing:.8px;padding-top:22px}.box-eyebrow>span:last-child{display:none}.box-hero-grid{grid-template-columns:1fr;padding:36px 0 34px;gap:5px}.box-overline{font-size:13px;margin-bottom:20px}.box-hero h1{font-size:clamp(76px,24vw,112px);letter-spacing:-.075em;line-height:.92}.box-hero h1>span{display:inline}.box-asterisk{font-size:.55em;margin-left:12px;vertical-align:18%}.box-hero h1>span{display:block}.box-intro{font-size:12px;margin-bottom:20px}.mobile-break{display:block}.box-object{width:74%;max-width:290px;margin:10px 8px 30px 0;aspect-ratio:1.18}.toolbox-handle{height:27px;border-width:10px}.toolbox-lid{padding:11px 15px;font-size:7px;letter-spacing:1px}.toolbox-body{padding:20px 20px 13px}.toolbox-body>div:first-child{font-size:44px}.box-sticker{width:60px;height:60px;font-size:14px;right:19px;top:29px}.toolbox-foot{font-size:6px;letter-spacing:.6px;padding-top:12px;margin-top:18px}.object-caption{font-size:7px;bottom:-11%}.box-strip{font-size:8px;letter-spacing:.6px;gap:8px;flex-wrap:wrap}.box-strip span:last-child{font-size:9px;width:100%;padding-top:4px}.box-collection{padding:38px 0}.box-section-head h2{font-size:22px}.box-section-head{align-items:start}.box-section-head>#app-count{font-size:8px;white-space:nowrap;margin-top:4px}.box-controls{gap:14px}.box-controls button{font-size:11px;padding-inline:10px}.box-filter{gap:1px}.box-personal{width:100%;justify-content:flex-end;gap:8px;border-top:1px solid var(--hb-line);padding-top:8px}.hb-gallery{grid-template-columns:1fr;gap:22px;margin-top:20px}.hb-card__art{aspect-ratio:1.5}.hb-card__body{padding:23px}.hb-card__body h3{font-size:20px}.hb-card__cta{flex-wrap:nowrap}.box-about{grid-template-columns:1fr;gap:12px;padding:38px 0}.box-about h2{font-size:28px}.box-promises{gap:20px}.box-install{padding:25px;flex-direction:column;align-items:start;gap:20px}.box-install h2{font-size:19px}.box-colophon{gap:12px;font-size:7px}.hb-text-button{font-size:10px!important}.hb-bottom{padding:25px 22px;flex-wrap:wrap}.hb-bottom span:nth-child(2){width:100%;order:3}.hb-template{padding-top:15px}.hb-workspace-head{align-items:start;flex-direction:column;gap:8px}.hb-workspace-head h2{width:100%}.hb-placeholder h2{font-size:18px}.hb-app-actions .hb-btn{flex:1;padding-inline:10px;white-space:nowrap}.hb-dialog{padding:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hb-site *{animation:none!important;transition:none!important}.hb-card:hover,.hb-card:hover svg{transform:none}.hb-card:hover .art-piece,.hb-card:hover .art-float{translate:none}}
@media print{.hb-topbar,.hb-bottom,.hb-back,.hb-dialog,.hb-skip{display:none!important}.hb-site{background:white!important;color:#183c2f!important;--hb-ink:#183c2f;--hb-ink-soft:#4d5d52;--hb-surface:white;--hb-paper:white;--hb-green:#244b3d}.hb-shell{padding:0}.hb-input{color:#183c2f!important}.hb-placeholder{padding:20px 0}.hb-template{padding:0}.hb-panel{break-inside:avoid}.hb-app{display:block}}
/* Keep decorative orbits inside the viewport on narrow screens. */
.box-hero{overflow:clip}
.box-hero{overflow:visible}
.hb-site[data-theme=bar] .box-install .hb-btn{color:#183c2f;border-color:#183c2f}
.hb-skip{color:#183c2f!important}
@media(max-width:700px){.box-hero{overflow:clip;margin-inline:-22px;padding-inline:22px}}
.box-hero{overflow:clip;margin-inline:-64px;padding-inline:64px}
@media(max-width:1023px){.box-hero{margin-inline:-32px;padding-inline:32px}}
@media(max-width:700px){.box-hero{margin-inline:-22px;padding-inline:22px}}
@media print{.hb-site,.hb-site[data-theme=bar]{--hb-ink:#183c2f!important;--hb-ink-soft:#4d5d52!important;--hb-surface:#fff!important;--hb-paper:#fff!important;--hb-paper-2:#fff!important;--hb-green:#244b3d!important;--hb-lime-soft:#e6f2cf!important;--hb-line:#999!important;color-scheme:light}.hb-panel{background:#fff!important}.hb-badge{background:#fff!important;color:#183c2f!important}.hb-head{padding-top:10px}.hb-side{margin-top:20px}}
@media print{.hb-site *{transition:none!important;animation:none!important}}

/* Tactile UI — shared controls, including controls inserted after page load. */
.hb-site :is(.hb-btn,.hb-iconbtn,.hb-seg button,.box-filter button,.box-personal button,.hb-mode,.hb-stepper__btn,.favorite){position:relative;touch-action:manipulation;transition:transform 90ms,box-shadow 90ms,background-color 120ms}
.hb-site :is(.hb-btn,.hb-iconbtn,.hb-seg button,.box-filter button,.box-personal button,.hb-mode,.hb-stepper__btn,.favorite).is-pressing{transform:scale(.94);box-shadow:inset 0 2px 5px #0002}
.hb-site .is-releasing{animation:hb-press-release 120ms ease-out}
@keyframes hb-press-release{0%{transform:scale(.94)}60%{transform:scale(1.03)}100%{transform:scale(1)}}
.hb-site .hb-confirm{position:relative}
.hb-site .hb-confirm::after{content:"";position:absolute;inset:0;pointer-events:none;border:2px solid var(--hb-lime,#bee56c);border-radius:inherit;animation:hb-ripple 450ms ease-out}
@keyframes hb-ripple{0%{box-shadow:0 0 0 0 var(--hb-lime,#bee56c);opacity:.9}100%{box-shadow:0 0 0 9px transparent;opacity:0}}
.hb-site [aria-disabled=true]{cursor:default}
.hb-site .hb-stepper{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;gap:8px;align-items:center;max-width:100%;min-width:0;width:240px;padding:8px;border:1px solid var(--hb-line);border-radius:14px;background:var(--hb-paper-2);touch-action:pan-y}
.hb-site .hb-stepper__btn{display:grid;place-items:center;min-width:44px;min-height:48px;padding:0;border:0;border-radius:10px;background:var(--hb-surface);color:var(--hb-green);font:500 26px/1 var(--font-display);user-select:none;-webkit-user-select:none;touch-action:none;-webkit-touch-callout:none}
.hb-site .hb-stepper__btn:disabled{opacity:.35;pointer-events:none}
.hb-site .hb-stepper__value{display:block;min-width:0;text-align:center;color:var(--hb-ink);font:700 23px/1.3 var(--font-display);padding:10px 0;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.hb-site #team-count{width:100%;grid-template-columns:48px minmax(0,1fr) 48px}
.hb-site #team-count .hb-stepper__value{font-size:44px;color:var(--hb-green)}
.hb-site :is(.hb-stepper__value,.hb-stepper__btn,.hb-btn,.hb-iconbtn,.hb-seg button,.box-filter button,.box-personal button,.hb-mode,.shuffle-chip button):focus-visible{outline:3px solid var(--hb-green);outline-offset:3px}
.hb-site .hb-shake{animation:hb-shake 240ms ease-in-out}
@keyframes hb-shake{0%,100%{translate:0}25%,75%{translate:-3px}50%{translate:3px}}
.hb-site :is(.hb-seg,.box-filter,.box-personal){touch-action:pan-y}
.hb-site :is(.hb-seg,.box-filter,.box-personal) button{touch-action:pan-y;min-height:44px}
.hb-site .hb-chip--swipe{position:relative;isolation:isolate;touch-action:pan-y;user-select:none;-webkit-user-select:none;overflow:hidden}
.hb-site .hb-chip--swipe::before{content:'削除';position:absolute;inset:0;display:grid;place-items:center;background:#aa3030;color:white;font-size:11px;opacity:var(--hb-delete-opacity,0);pointer-events:none;z-index:-1}
.hb-site .hb-chip--swipe>*{translate:var(--hb-swipe-x,0px) 0;transition:translate 220ms cubic-bezier(.34,1.56,.64,1);background:inherit}
.hb-site .hb-chip--swipe.is-swiping>*{transition:none}
.hb-site .hb-chip--swipe button{min-height:44px;touch-action:pan-y}
.hb-site .hb-chip--swipe .shuffle-chip__remove{min-width:44px}
@media(prefers-reduced-motion:reduce){
 .hb-site :is(.is-pressing,.is-releasing,.hb-shake,.hb-confirm)::after{animation:none!important}
 .hb-site :is(.hb-btn,.hb-iconbtn,.hb-seg button,.box-filter button,.box-personal button,.hb-mode,.hb-stepper__btn,.favorite,.hb-stepper,.hb-chip--swipe>*){animation:none!important;transition:none!important}
 .hb-site :is(.hb-btn,.hb-iconbtn,.hb-seg button,.box-filter button,.box-personal button,.hb-mode,.hb-stepper__btn,.favorite).is-pressing{transform:translateY(1px)}
 .hb-site .hb-confirm::after{display:none}
}
.hb-site .hb-seg button:focus-visible{outline-offset:-3px}
@media(max-width:360px){.hb-site .gn-unit .hb-stepper__value{font-size:18px}}

/* Generated gallery artwork, 2026-09-27. */
.hb-card__image{display:block;width:100%;height:100%;object-fit:cover;}
.hb-card__art .hb-card__no,.hb-card__art .box-new{z-index:1;background:rgba(249,250,239,.9);}
.hb-card__art .hb-card__no{padding:3px 7px;border-radius:4px;}