/* HARITA ツール一覧UI 1.0.0 */
.htu-off{display:none !important;}

/* このページは右に追従サイドバー（目次）があるため、本文の幅のまま使う */

/* ツールバー */
.htu-bar{
  position:sticky;top:0;z-index:28;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  background:#fff;border:1px solid #dbe3ec;border-top:4px solid #14213d;
  border-radius:0 0 12px 12px;box-shadow:0 5px 16px rgba(20,33,61,.10);
  padding:11px 13px;margin:0 0 16px;
}
.htu-search{
  flex:1 1 100%;min-width:0;box-sizing:border-box;height:44px;padding:0 14px;
  font-size:15.5px;border:2px solid #14213d;border-radius:10px;background:#fff;color:#1b2733;
  -webkit-appearance:none;appearance:none;
}
.htu-search:focus{outline:none;border-color:#b87333;box-shadow:0 0 0 3px rgba(184,115,51,.2);}
.htu-tabs{display:flex;gap:6px;flex-wrap:wrap;}
.htu-tabs button{
  border:1.5px solid var(--tc,#14213d);border-radius:999px;background:#fff;color:var(--tc,#14213d);
  font-size:12.5px;font-weight:800;padding:7px 12px;cursor:pointer;line-height:1.15;
}
.htu-tabs button:hover{background:color-mix(in srgb,var(--tc,#14213d) 10%,#fff);}
.htu-tabs button.on{background:var(--tc,#14213d);color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.16);}
.htu-tabs button i{font-style:normal;opacity:.75;font-size:11px;margin-left:4px;}
.htu-count{
  font-size:12.5px;font-weight:800;color:#fff;background:#14213d;
  border-radius:999px;padding:6px 12px;white-space:nowrap;
}

/* カード */
.htu-grid{display:grid;grid-template-columns:1fr;gap:10px;margin:0 0 22px;}
.htu-card{
  box-sizing:border-box;background:#fff;
  border:1px solid #dbe3ec;border-left:7px solid var(--tc,#14213d);border-radius:12px;
  padding:13px 16px;box-shadow:0 1px 3px rgba(20,33,61,.06);
  transition:box-shadow .15s,transform .15s;
}
.htu-card:hover{box-shadow:0 6px 16px rgba(20,33,61,.13);transform:translateY(-1px);}
.htu-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 6px;}
.htu-on a.htu-name{
  font-size:17px;font-weight:800;color:#14213d !important;text-decoration:none !important;line-height:1.4;
}
.htu-on a.htu-name:hover{text-decoration:underline !important;}
.htu-cat{
  font-size:10.5px;font-weight:800;color:#fff;background:var(--tc,#14213d);
  border-radius:4px;padding:2px 7px;white-space:nowrap;
}
.htu-flag{font-size:10.5px;font-weight:800;border-radius:4px;padding:2px 7px;white-space:nowrap;}
.htu-new{background:#c0392b;color:#fff;}
.htu-upd{background:#f0d9a8;color:#7a5a12;}
.htu-desc{font-size:14px;line-height:1.85;color:#33414f;margin:0;max-width:56em;}
.htu-desc--none{color:#8a97a5;}
.htu-act{display:flex;align-items:center;gap:8px;margin:10px 0 0;}
.htu-use{
  display:inline-block;border:1.5px solid var(--tc,#14213d);border-radius:9px;
  background:color-mix(in srgb,var(--tc,#14213d) 8%,#fff);
  color:var(--tc,#14213d) !important;text-decoration:none !important;
  font-size:13px;font-weight:800;padding:9px 16px;white-space:nowrap;
}
.htu-use:hover{background:color-mix(in srgb,var(--tc,#14213d) 18%,#fff);}
.htu-pin{
  border:1.5px solid #d7dfe9;border-radius:9px;background:#fff;color:#b9a24a;
  font-size:16px;line-height:1;padding:8px 11px;cursor:pointer;
}
.htu-pin:hover{background:#fdf7e4;}
.htu-pin.on{background:#fdf1cf;border-color:#e2c96b;color:#a9821c;}

/* 広い画面は 名前｜説明｜ボタン の横並び */
@media (min-width:1000px){
  .htu-card{
    display:grid;grid-template-columns:300px minmax(0,1fr) 178px;
    column-gap:24px;align-items:start;padding:15px 20px;
  }
  .htu-head{margin:0;}
  .htu-desc{grid-column:2;}
  .htu-act{grid-column:3;margin:0;justify-content:flex-end;}
}

/* よく使う */
.htu-pinsec{margin:0 0 22px;}
.htu-pintitle{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 9px !important;padding:2px 0 2px 12px;border-left:5px solid #b87333;
  font-size:15px;font-weight:800;color:#243447;
}
.htu-pintitle span{font-size:11.5px;font-weight:600;color:#8a97a5;}

/* 見出しまわり */
.htu-on h2.wp-block-heading{scroll-margin-top:120px;}

@media (max-width:640px){
  .htu-bar{padding:9px 10px;}
  .htu-search{height:42px;font-size:15px;}
  .htu-tabs button{font-size:11.5px;padding:6px 10px;}
  .htu-on a.htu-name{font-size:16px;}
  .htu-desc{font-size:13.6px;}
}