/* HLAB-RULES: /page-hlb-design-template.php
 * 資料・実務ツール一覧の基本デザイン v1.1.0 / 2026-10-17
 * index-template.phpだけで読み込む。TOP・説明ページ・操作画面は対象外。
 */
body.hlab-catalog-page{margin:0}
.hlab-catalog--designed{--catalog-accent:#a45a18;--catalog-tint:#fff4df}
.hlab-catalog--designed.hlab-catalog--tools{--catalog-accent:#745184;--catalog-tint:#f7f0fa}
.hlab-catalog--designed .hlab-catalog__page{padding-top:22px;padding-bottom:48px}
.hlab-catalog--designed .hlab-catalog__breadcrumb{line-height:1.8;overflow-wrap:anywhere}
.hlab-catalog--designed .hlab-catalog__hero{border-radius:28px;margin-bottom:24px}
.hlab-catalog--designed .hlab-catalog__intro{border:0;margin:0;padding:0}
.hlab-catalog--designed .hlab-catalog__intro h1{font-size:clamp(28px,2.7vw,36px);line-height:1.45;margin:0;text-wrap:balance}
.hlab-catalog--designed .hlab-catalog__intro p{font-size:16px;line-height:1.85;font-weight:650}
.hlab-catalog--designed .hlab-button{font-size:16px;min-height:50px;max-width:100%;line-height:1.6;text-align:center;overflow-wrap:anywhere;text-decoration:none}
.hlab-catalog--designed .hlab-public-pages__master-image{border-radius:24px;max-height:280px}
.hlab-catalog--designed .hlab-catalog__jump{gap:10px;margin:24px 0;scroll-margin-top:20px}
.hlab-catalog--designed .hlab-catalog__jump a{display:flex;align-items:center;min-height:48px;padding:10px 16px;border-radius:999px;border-color:#dfccb4;background:#fffdf8;font-size:16px;font-weight:700;line-height:1.6;text-underline-offset:4px}
.hlab-catalog--designed .hlab-catalog__jump a:hover{background:var(--catalog-tint)}
.hlab-catalog--designed .hlab-catalog__group{margin:24px 0;padding:26px;border:2px solid rgba(240,138,0,.38);border-top:5px solid #f08a00;border-radius:26px;background:linear-gradient(145deg,rgba(240,138,0,.07),transparent),linear-gradient(180deg,#fff5e8,#f9ead4);box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 8px 20px rgba(105,63,24,.055)}
.hlab-catalog--designed .hlab-catalog__group-head{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid #ead9c5}
.hlab-catalog--designed .hlab-catalog__group-head h2{flex:1;min-width:min(200px,100%);margin:0;color:var(--hl-brown);font-size:clamp(22px,2.2vw,28px);line-height:1.5;text-wrap:balance}
.hlab-catalog--designed .hlab-catalog__group-number{display:grid;place-items:center;flex:0 0 44px;height:44px;border-radius:14px;background:var(--catalog-accent);color:#fff;font-size:18px;font-weight:900}
.hlab-catalog--designed .hlab-catalog__group-count{font-size:14px;font-weight:700;color:#72523c;white-space:nowrap}
/* 無料一覧と同じ色面・丸い装飾アイコン・横幅のあるCTA。
   既存HTMLの名前、説明、リンク、計測、会員別操作は変更しない。 */
.hlab-catalog--designed .hlab-catalog__grid{gap:14px}
.hlab-catalog--designed .hlab-catalog__card{
  border:2px solid var(--card-border);border-radius:18px;
  background:linear-gradient(145deg,var(--card-tint),#fff);box-shadow:none;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.hlab-catalog--designed .hlab-catalog__card:hover{transform:translateY(-2px);border-color:var(--card-color);box-shadow:0 12px 26px rgba(95,62,31,.10)}
.hlab-catalog--designed .hlab-catalog__explanation{
  display:grid;grid-template-columns:50px minmax(0,1fr);grid-template-rows:auto 1fr auto auto;
  gap:10px 14px;align-content:start;align-items:start;padding:18px;
}
.hlab-catalog--designed .hlab-catalog__explanation::before{
  content:"";grid-column:1;grid-row:1 / span 2;display:block;width:50px;height:50px;
  border-radius:50%;background:var(--card-icon) center / 28px 28px no-repeat,var(--card-icon-bg);
}
.hlab-catalog--designed .hlab-catalog__explanation h3{grid-column:2;grid-row:1;font-size:20px;line-height:1.5;margin:0;overflow-wrap:anywhere;color:var(--hl-brown);font-weight:900}
.hlab-catalog--designed .hlab-catalog__explanation p{grid-column:2;grid-row:2;font-size:16px;line-height:1.8;margin:0;color:#604a39;font-weight:650}
.hlab-catalog--designed .hlab-catalog__device{grid-column:2;grid-row:3;justify-self:start;margin:0;padding:5px 9px;border:1px solid rgba(121,87,57,.14);border-radius:999px;background:#fffaf2;color:#5f432f;font-size:14px;line-height:1.6}
.hlab-catalog--designed .hlab-catalog__explanation strong{
  grid-column:1 / -1;grid-row:4;display:flex;justify-content:center;align-items:center;
  align-self:end;width:100%;min-height:44px;margin-top:4px;padding:9px 16px;
  border:0;border-radius:999px;background:linear-gradient(135deg,#ff9b00,#e68000);
  color:#fff;font-size:16px;font-weight:900;line-height:1.6;text-align:center;text-decoration:none;
  box-shadow:0 8px 18px rgba(240,138,0,.16);
}
.hlab-catalog--designed .hlab-catalog__explanation:hover strong{filter:brightness(.97)}
.hlab-catalog--designed .hlab-catalog__use{display:flex;justify-content:center;align-items:center;align-self:stretch;max-width:none;min-height:44px;margin:0 18px 18px;padding:10px 14px;border:1px solid var(--card-border);border-radius:999px;background:#fffdf8;color:var(--card-color)!important;font-size:16px;line-height:1.7;text-align:center;overflow-wrap:anywhere;text-underline-offset:4px}
.hlab-catalog--designed .hlab-catalog__use:hover{background:var(--card-tint)}
.hlab-catalog--designed .hlab-catalog__explanation:focus-visible{outline-offset:-4px;border-radius:16px}

.hlab-catalog--designed #materials-start .hlab-catalog__card{--card-tint:#fff8ee;--card-color:#9a5200;--card-border:rgba(240,138,0,.30);--card-icon-bg:linear-gradient(145deg,#ffbf2f,#f08a00);--card-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h7l1%202%201-2h7v15h-7l-1%202-1-2H4zM12%207v13M7%209h2M7%2012h2M15%209h2M15%2012h2%22%2F%3E%3C%2Fsvg%3E")}

.hlab-catalog--designed #materials-continue .hlab-catalog__card{--card-tint:#edf8eb;--card-color:#327443;--card-border:rgba(74,145,82,.30);--card-icon-bg:linear-gradient(145deg,#77b86f,#43884d);--card-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%205H5v16h14V5h-3M8%203h8v4H8zM8%2012l2%202%205-4M8%2018h8%22%2F%3E%3C%2Fsvg%3E")}

.hlab-catalog--designed #materials-grow .hlab-catalog__card{--card-tint:#f6f0ff;--card-color:#6552a0;--card-border:rgba(113,104,171,.30);--card-icon-bg:linear-gradient(145deg,#8d7dc4,#6552a0);--card-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%2021v-4c0-5%2012-5%2012%200v4M16%204a3%203%200%200%201%200%206M18%2013c3%200%204%202%204%204v4%22%2F%3E%3C%2Fsvg%3E")}

.hlab-catalog--designed #tool-business-record .hlab-catalog__card{--card-tint:#edfafd;--card-color:#26779b;--card-border:rgba(47,133,166,.30);--card-icon-bg:linear-gradient(145deg,#26779b,#36a9b2);--card-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%204h14v18H5zM8%202v4M16%202v4M8%2017v-3M12%2017v-6M16%2017V9%22%2F%3E%3C%2Fsvg%3E")}

.hlab-catalog--designed #tool-customer-management .hlab-catalog__card{--card-tint:#edf8eb;--card-color:#327443;--card-border:rgba(74,145,82,.30);--card-icon-bg:linear-gradient(145deg,#77b86f,#43884d);--card-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2215%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M5%2016c0-4%206-4%206%200M15%2010h4M15%2014h4%22%2F%3E%3C%2Fsvg%3E")}

.hlab-catalog--designed #tool-business-documents .hlab-catalog__card{--card-tint:#fff8ee;--card-color:#9a5200;--card-border:rgba(240,138,0,.30);--card-icon-bg:linear-gradient(145deg,#ffbf2f,#f08a00);--card-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%202h8l4%204v16H6zM14%202v5h4M9%2011h6M9%2015h6M9%2019h4%22%2F%3E%3C%2Fsvg%3E")}

.hlab-catalog--designed #tool-qr-code .hlab-catalog__card{--card-tint:#fff8ee;--card-color:#9a5200;--card-border:rgba(240,138,0,.30);--card-icon-bg:linear-gradient(145deg,#ffbf2f,#f08a00);--card-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203h6v6H3zM15%203h6v6h-6zM3%2015h6v6H3zM15%2015h3v3h3v3h-6zM12%203v6M3%2012h6M12%2012h4M21%2012v3M12%2017v4%22%2F%3E%3C%2Fsvg%3E")}

.hlab-catalog--designed #tool-mercari-shops .hlab-catalog__card{--card-tint:#fff0eb;--card-color:#a63f2c;--card-border:rgba(214,93,61,.30);--card-icon-bg:linear-gradient(145deg,#ef7b5d,#c84f35);--card-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%207%209-5%209%205v11l-9%205-9-5zM3%207l9%205%209-5M12%2012v11M7%205l10%205%22%2F%3E%3C%2Fsvg%3E")}

.hlab-catalog--designed #tool-event-roulette .hlab-catalog__card{--card-tint:#f6f0ff;--card-color:#6552a0;--card-border:rgba(113,104,171,.30);--card-icon-bg:linear-gradient(145deg,#8d7dc4,#6552a0);--card-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%203v7M4%207l6%204M4%2017l6-4M12%2014v7M14%2013l6%204M14%2011l6-4%22%2F%3E%3C%2Fsvg%3E")}

.hlab-catalog--designed #tool-store-sound .hlab-catalog__card{--card-tint:#edfafd;--card-color:#26779b;--card-border:rgba(47,133,166,.30);--card-icon-bg:linear-gradient(145deg,#26779b,#36a9b2);--card-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%209h4l7-5v16l-7-5H3zM17%208c3%202%203%206%200%208M20%205c5%204%205%2010%200%2014%22%2F%3E%3C%2Fsvg%3E")}
.hlab-catalog--designed .hlab-catalog__footer a{font-size:16px;line-height:1.8;display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere}
.hlab-catalog--designed a:focus-visible{outline:3px solid #985000;outline-offset:4px}
@media(max-width:900px){
  .hlab-catalog--designed .hlab-catalog__hero{grid-template-columns:minmax(0,1fr);gap:20px}
  .hlab-catalog--designed .hlab-public-pages__master-visual{max-width:460px;margin-inline:auto}
}
@media(max-width:760px){
  .hlab-catalog--designed .hlab-catalog__grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){
  .hlab-catalog--designed .hlab-catalog__page{padding-top:16px}
  .hlab-catalog--designed .hlab-catalog__hero{padding:20px 16px;border-radius:24px}
  .hlab-catalog--designed .hlab-catalog__intro h1{font-size:28px}
  .hlab-catalog--designed .hlab-public-pages__master-actions{display:grid;grid-template-columns:minmax(0,1fr)}
  .hlab-catalog--designed .hlab-catalog__jump{display:grid;grid-template-columns:minmax(0,1fr)}
  .hlab-catalog--designed .hlab-catalog__jump a{border-radius:14px}
  .hlab-catalog--designed .hlab-catalog__group{padding:22px 16px;border-radius:22px}
  .hlab-catalog--designed .hlab-catalog__group-head{gap:10px}
  .hlab-catalog--designed .hlab-catalog__group-head h2{min-width:0;flex-basis:calc(100% - 54px)}
  .hlab-catalog--designed .hlab-catalog__group-count{margin-left:54px}
  .hlab-catalog--designed .hlab-catalog__explanation{padding:18px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto auto;gap:12px}
  .hlab-catalog--designed .hlab-catalog__explanation::before{grid-column:1;grid-row:1}
  .hlab-catalog--designed .hlab-catalog__explanation h3{grid-column:1;grid-row:2}
  .hlab-catalog--designed .hlab-catalog__explanation p{grid-column:1;grid-row:3}
  .hlab-catalog--designed .hlab-catalog__device{grid-column:1;grid-row:4}
  .hlab-catalog--designed .hlab-catalog__explanation strong{grid-column:1;grid-row:5}
  .hlab-catalog--designed .hlab-catalog__use{margin-inline:18px}
  .hlab-catalog--designed .sz-field{display:grid;grid-template-columns:minmax(0,1fr)}
  .hlab-catalog--designed .sz-field label,.hlab-catalog--designed .sz-field input{display:block;width:100%}
}

@media(prefers-reduced-motion:reduce){.hlab-catalog--designed .hlab-catalog__card{transition:none}.hlab-catalog--designed .hlab-catalog__card:hover{transform:none}}