/* HARITA 用語集UI 1.2.0 */
:root{
  --hgu-navy:#14213d;
  --hgu-copper:#b87333;
  --hgu-line:#dbe3ec;
  --hgu-ink:#1b2733;
  --hgu-sub:#5b6b7c;
}

/* ---- 全体の張り出し（PCでは画面いっぱいまで広げる） ---- */
@media (min-width:900px){
  body .hgu-on{
    width:min(1560px,96vw);
    margin-left:calc(50% - min(780px,48vw));
  }
}

/* 旧UIの隠し要素 */
.hgu-on .hgls-sticky,
.hgu-on .hgls-chips,
.hgu-on .hgls-top{display:none !important;}
.hgu-on .hgls-sec{margin:0 !important;}
.hgu-off,.hgu-pgoff{display:none !important;}

/* ---- ツールバー ---- */
.hgu-bar{
  position:sticky;top:0;z-index:30;
  background:#fff;
  border:1px solid var(--hgu-line);
  border-top:4px solid var(--hgu-navy);
  border-radius:0 0 14px 14px;
  box-shadow:0 6px 18px rgba(20,33,61,.10);
  padding:12px 14px 10px;
  margin:0 0 18px;
}
.hgu-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.hgu-row+.hgu-row{margin-top:9px;}

.hgu-searchwrap{position:relative;flex:1 1 260px;min-width:0;}
.hgu-search{
  width:100%;box-sizing:border-box;
  height:46px;padding:0 40px 0 42px;
  font-size:16px;line-height:46px;
  border:2px solid var(--hgu-navy);border-radius:10px;
  background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314213d' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 12px 50%/20px 20px;
  color:var(--hgu-ink);
  -webkit-appearance:none;appearance:none;
}
.hgu-search:focus{outline:none;border-color:var(--hgu-copper);box-shadow:0 0 0 3px rgba(184,115,51,.22);}
.hgu-clear{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border:0;border-radius:50%;
  background:#eef2f7;color:#51617a;font-size:15px;line-height:28px;
  cursor:pointer;display:none;padding:0;
}
.hgu-clear.on{display:block;}
.hgu-clear:hover{background:#dfe7f1;}

.hgu-count{
  flex:0 0 auto;font-size:13px;font-weight:700;color:#fff;
  background:var(--hgu-navy);border-radius:999px;padding:7px 13px;white-space:nowrap;
}
.hgu-count b{color:#ffd9ac;font-size:15px;margin:0 2px;}

.hgu-sort{
  flex:0 0 auto;height:36px;border:1px solid var(--hgu-line);border-radius:8px;
  background:#fff;color:var(--hgu-ink);font-size:13px;font-weight:700;padding:0 8px;
}

/* ラベル */
.hgu-lab{
  flex:0 0 auto;font-size:11px;font-weight:800;letter-spacing:.06em;
  color:#fff;background:var(--hgu-copper);border-radius:4px;padding:3px 7px;
}

/* 50音 */
.hgu-kana{display:flex;gap:5px;flex-wrap:wrap;}
.hgu-kana button{
  min-width:34px;height:32px;padding:0 7px;
  border:1.5px solid #c9d4e2;border-radius:8px;background:#fff;
  color:var(--hgu-navy);font-size:14px;font-weight:800;cursor:pointer;line-height:1;
}
.hgu-kana button:hover{background:#eef3fa;}
.hgu-kana button.on{background:var(--hgu-navy);border-color:var(--hgu-navy);color:#fff;}
.hgu-kana button[disabled]{opacity:.32;cursor:default;}

/* ジャンル */
.hgu-gen{display:flex;gap:6px;flex-wrap:wrap;}
.hgu-gen button{
  border:1.5px solid var(--c,#14213d);border-radius:999px;background:#fff;
  color:var(--c,#14213d);font-size:12.5px;font-weight:800;
  padding:6px 11px;cursor:pointer;line-height:1.15;
}
.hgu-gen button:hover{background:color-mix(in srgb,var(--c,#14213d) 10%,#fff);}
.hgu-gen button.on{background:var(--c,#14213d);color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18);}
.hgu-gen button i{font-style:normal;opacity:.75;font-size:11px;margin-left:3px;}
.hgu-gen button.on i{opacity:.9;}

.hgu-more-toggle{
  border:0;background:none;color:var(--hgu-navy);font-size:12.5px;font-weight:800;
  cursor:pointer;padding:4px 2px;text-decoration:underline;
}

/* ---- グリッド ---- */
.hgu-grid{display:grid;grid-template-columns:1fr;gap:10px;align-items:start;}

.hgu-grid>.hgls-item{margin:0 !important;box-sizing:border-box;display:flex;flex-direction:column;}
.hgu-grid>.hgls-item>p:last-child{margin-top:auto !important;padding-top:10px;}

/* 広い画面では 用語｜説明｜関連リンク の横並びにする */
@media (min-width:1000px){
  .hgu-grid>.hgls-item{
    display:grid;
    grid-template-columns:264px minmax(0,1fr) 236px;
    column-gap:26px;row-gap:2px;align-items:start;
    padding:16px 20px 15px !important;
  }
  .hgu-grid>.hgls-item>.hgu-badge{grid-column:1;margin:0 0 6px;}
  .hgu-grid>.hgls-item>.hgls-term{grid-column:1;}
  .hgu-grid>.hgls-item>.hgls-def{grid-column:2;grid-row:1 / span 6;}
  .hgu-grid>.hgls-item>.hgu-ex{grid-column:2;justify-self:start;}
  .hgu-grid>.hgls-item>p:last-child{
    grid-column:3;grid-row:1 / span 6;
    flex-direction:column;align-items:stretch;gap:7px;
    margin:0 !important;padding:0 !important;
  }
  .hgu-grid>.hgls-item>p:last-child .hgls-more{
    display:block;width:100%;box-sizing:border-box;margin:0 !important;
    text-align:left;font-size:12.4px;line-height:1.5;padding:9px 12px;min-height:0;
    color:var(--c,#2f7d5b);
    background:color-mix(in srgb,var(--c,#2f7d5b) 8%,#fff);
    border-color:color-mix(in srgb,var(--c,#2f7d5b) 32%,#fff);
  }
  .hgu-grid>.hgls-item>p:last-child .hgls-more:hover{background:color-mix(in srgb,var(--c,#2f7d5b) 16%,#fff);}
  .hgu-on .hgls-term .hgls-yomi{display:block;margin:5px 0 0 !important;font-size:12px !important;}
  /* 1カラムなので説明は省略せず全文を出す */
  .hgu-clamp .hgls-def{display:block;-webkit-line-clamp:none;overflow:visible;}
  .hgu-ex{display:none;}
}
.hgu-nobadge .hgu-badge{display:none;}
.hgu-on .hgls-item{
  border:1px solid var(--hgu-line) !important;
  border-left:7px solid var(--c,#14213d) !important;
  border-radius:12px !important;
  padding:13px 15px 12px !important;
  box-shadow:0 1px 3px rgba(20,33,61,.06);
  transition:box-shadow .15s,transform .15s;
}
.hgu-on .hgls-item:hover{box-shadow:0 6px 16px rgba(20,33,61,.13);transform:translateY(-1px);}
.hgu-on .hgls-term{
  font-size:18px !important;font-weight:800 !important;color:var(--hgu-ink) !important;
  margin:0 0 6px !important;padding:0 !important;border:0 !important;background:none !important;
  line-height:1.4;
}
.hgu-on .hgls-term::before,.hgu-on .hgls-term::after{display:none !important;}
.hgu-on .hgls-yomi{font-size:11.5px !important;color:var(--hgu-sub) !important;font-weight:600;margin-left:7px;}
.hgu-on .hgls-def{
  font-size:14.6px !important;line-height:1.95 !important;color:#2f3d4b !important;margin:0 !important;
  max-width:52em;
}
.hgu-clamp .hgls-def{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;
}
.hgu-ex{
  border:0;background:none;padding:4px 0 0;margin:0;cursor:pointer;
  color:var(--c,#14213d);font-size:12px;font-weight:800;
}
.hgu-badge{
  display:inline-block;font-size:10.5px;font-weight:800;color:#fff;background:var(--c,#14213d);
  border-radius:4px;padding:2px 7px;margin:0 0 7px;letter-spacing:.02em;
}
.hgu-on .hgls-item mark{background:#ffe9a8;color:inherit;padding:0 1px;border-radius:2px;}

/* 見出し（ジャンル区切り） */
.hgu-head{grid-column:1/-1;margin:14px 0 2px;}
.hgu-head:first-child{margin-top:0;}
.hgu-on .hgu-head h2{
  margin:0 !important;padding:9px 14px !important;
  background:var(--c,#14213d) !important;color:#fff !important;
  border:0 !important;border-radius:8px !important;
  font-size:17px !important;font-weight:800 !important;line-height:1.4 !important;
}
.hgu-on .hgu-head h2::before,.hgu-on .hgu-head h2::after{display:none !important;}
.hgu-head span{font-size:12px;font-weight:700;opacity:.85;margin-left:8px;}
.hgu-fig{grid-column:1/-1;}
.hgu-fig figure{margin:8px 0 !important;}

/* フッター */
.hgu-foot{margin:18px 0 8px;text-align:center;}
.hgu-more{
  display:inline-block;border:0;border-radius:10px;cursor:pointer;
  background:var(--hgu-navy);color:#fff;font-size:15px;font-weight:800;
  padding:13px 30px;box-shadow:0 3px 10px rgba(20,33,61,.22);
}
.hgu-more:hover{background:#1d2f52;}
.hgu-all{
  display:inline-block;margin-left:10px;border:1.5px solid var(--hgu-line);border-radius:10px;
  background:#fff;color:var(--hgu-navy);font-size:13px;font-weight:800;padding:12px 16px;cursor:pointer;
}
.hgu-pos{display:block;margin:9px 0 0;font-size:12.5px;color:var(--hgu-sub);font-weight:700;}
.hgu-empty{
  grid-column:1/-1;border:2px dashed #c9d4e2;border-radius:12px;background:#f8fafc;
  padding:26px 16px;text-align:center;color:var(--hgu-sub);font-size:14px;font-weight:700;
}
.hgu-empty b{color:var(--hgu-navy);}

/* 用語ジャンプ時の強調 */
.hgu-flash{animation:hguFlash 1.6s ease-out 1;}
@keyframes hguFlash{
  0%{box-shadow:0 0 0 4px rgba(184,115,51,.55);}
  100%{box-shadow:0 1px 3px rgba(20,33,61,.06);}
}

/* 先頭へ戻る */
.hgu-top{
  position:fixed;right:14px;bottom:84px;z-index:29;display:none;
  width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;
  background:var(--hgu-navy);color:#fff;font-size:18px;font-weight:800;
  box-shadow:0 4px 12px rgba(20,33,61,.32);
}
.hgu-top.on{display:block;}

@media (max-width:640px){
  .hgu-bar{padding:10px 10px 8px;border-radius:0 0 10px 10px;}
  .hgu-search{height:42px;line-height:42px;font-size:15px;}
  .hgu-kana{gap:4px;}
  .hgu-kana button{min-width:31px;height:30px;font-size:13px;}
  .hgu-gen button{font-size:11.5px;padding:5px 9px;}
  .hgu-on .hgls-term{font-size:16px !important;}
  .hgu-fold{display:none;}
  .hgu-fold.open{display:flex;}
}
@media (min-width:641px){.hgu-foldbtn{display:none;}}

/* スクロール中はツールバーを細く */
.hgu-bar.hgu-mini{padding:8px 12px;}
.hgu-bar.hgu-mini .hgu-search{height:40px;line-height:40px;font-size:15px;}
.hgu-bar.hgu-mini .hgu-fold{display:none;}
.hgu-bar.hgu-mini .hgu-fold.open{display:flex;}
.hgu-bar.hgu-mini .hgu-foldbtn{display:inline-block;}
.hgu-foldbtn{
  flex:0 0 auto;border:1.5px solid var(--hgu-navy);border-radius:8px;background:#fff;
  color:var(--hgu-navy);font-size:12.5px;font-weight:800;padding:7px 11px;cursor:pointer;
}
.hgu-foldbtn.on{background:var(--hgu-navy);color:#fff;}

.hgu-bar.hgu-away{visibility:hidden;}

/* =========================================================
   方言ブロック（#hgd-app）
   ========================================================= */
#hgd-app{margin:6px 0 0;}
#hgd-app .hgd-lead{
  font-size:14px;line-height:1.85;color:#33414f;margin:0 0 14px;
  background:#f7f9fc;border-left:5px solid var(--hgu-navy);border-radius:0 10px 10px 0;padding:12px 15px;
}
#hgd-app .hgd-lead b{color:var(--hgu-navy);font-size:15px;}

/* 地域セレクタ */
.hgd-map{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:7px;margin:0 0 12px;}
.hgd-map-card{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  border:2px solid var(--rc,#14213d);border-radius:10px;background:#fff;
  padding:9px 6px;cursor:pointer;line-height:1.25;
}
.hgd-map-card:hover{background:color-mix(in srgb,var(--rc,#14213d) 10%,#fff);}
.hgd-map-card.on{background:var(--rc,#14213d);box-shadow:0 3px 9px rgba(0,0,0,.2);}
.hgd-map-region{font-size:13.5px;font-weight:800;color:var(--rc,#14213d);}
.hgd-map-words{font-size:11px;font-weight:700;color:#6b7a8c;}
.hgd-map-card.on .hgd-map-region,.hgd-map-card.on .hgd-map-words{color:#fff;}

/* ツールバー */
.hgd-bar{
  position:sticky;top:0;z-index:28;background:#fff;
  border:1px solid var(--hgu-line);border-top:4px solid var(--hgu-copper);
  border-radius:0 0 12px 12px;box-shadow:0 5px 14px rgba(20,33,61,.09);
  padding:10px 12px;margin:0 0 14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;
}
.hgd-bar .hgd-search{
  flex:1 1 220px;min-width:0;box-sizing:border-box;height:42px;padding:0 14px;
  font-size:15px;border:2px solid var(--hgu-navy);border-radius:10px;background:#fff;color:var(--hgu-ink);
  -webkit-appearance:none;appearance:none;
}
.hgd-bar .hgd-search:focus{outline:none;border-color:var(--hgu-copper);box-shadow:0 0 0 3px rgba(184,115,51,.2);}
.hgd-tabs{display:flex;gap:6px;flex-wrap:wrap;}
.hgd-tabs button{
  border:1.5px solid #c9d4e2;border-radius:999px;background:#fff;color:var(--hgu-navy);
  font-size:12.5px;font-weight:800;padding:7px 12px;cursor:pointer;line-height:1.15;
}
.hgd-tabs button.on{background:var(--hgu-navy);border-color:var(--hgu-navy);color:#fff;}
.hgd-tabs button i{font-style:normal;opacity:.7;margin-left:3px;font-size:11px;}
.hgd-cnt{
  font-size:12.5px;font-weight:800;color:#fff;background:var(--hgu-copper);
  border-radius:999px;padding:6px 12px;white-space:nowrap;
}
.hgd-reset{
  border:1.5px solid var(--hgu-line);border-radius:8px;background:#fff;color:var(--hgu-navy);
  font-size:12.5px;font-weight:800;padding:7px 11px;cursor:pointer;display:none;
}
.hgd-reset.on{display:inline-block;}

/* カード */
.hgd-grid{display:grid;grid-template-columns:1fr;gap:10px;align-items:start;}
@media (min-width:1000px){
  .hgd-grid>.hgd-item,.hgd-extra-grid>.hgd-item{
    display:grid;grid-template-columns:250px minmax(0,1fr);
    column-gap:24px;align-items:start;padding:15px 20px !important;
  }
  .hgd-grid>.hgd-item>.hgd-term,.hgd-extra-grid>.hgd-item>.hgd-term{grid-column:1;margin:0 !important;}
  .hgd-grid>.hgd-item>.hgd-l,.hgd-extra-grid>.hgd-item>.hgd-l{grid-column:2;}
  .hgd-extra-grid>.hgd-item>p:not(.hgd-term){grid-column:2;}
}
/* さらに広い画面では「注意」を右の列に分けて置く */
@media (min-width:1240px){
  .hgd-grid>.hgd-item{grid-template-columns:250px minmax(0,1fr) minmax(0,1fr);}
  .hgd-grid>.hgd-item>.hgd-m,.hgd-grid>.hgd-item>.hgd-u{grid-column:2;}
  .hgd-grid>.hgd-item>.hgd-w{
    grid-column:3;grid-row:1 / span 3;margin:0;
    border-left:3px solid #f2cfc9;padding-left:62px;
  }
  .hgd-grid>.hgd-item>.hgd-w .hgd-k{left:14px;}
}
.hgls .hgd-item{
  margin:0 !important;box-sizing:border-box;
  border:1px solid var(--hgu-line);border-left:7px solid var(--rc,#14213d);
  border-radius:12px;background:#fff;padding:12px 14px;
  box-shadow:0 1px 3px rgba(20,33,61,.06);
}
.hgd-grid>.hgd-item{height:100%;}
.hgls .hgd-item:hover{box-shadow:0 6px 16px rgba(20,33,61,.13);}
.hgls .hgd-term{
  font-size:18px !important;font-weight:800 !important;color:var(--hgu-ink) !important;
  margin:0 0 8px !important;padding:0 !important;background:none !important;border:0 !important;line-height:1.4;
}
.hgls .hgd-yomi{
  display:inline-block;font-size:11px !important;font-weight:800;color:#fff !important;
  background:var(--rc,#14213d);border-radius:4px;padding:2px 7px;margin-left:8px;vertical-align:2px;
}
.hgd-l{font-size:14.4px;line-height:1.9;color:#2f3d4b;margin:0 0 6px;padding-left:48px;position:relative;max-width:52em;}
.hgd-l:last-child{margin-bottom:0;}
.hgd-k{
  position:absolute;left:0;top:2px;width:36px;text-align:center;
  font-size:10.5px;font-weight:800;color:#fff;border-radius:4px;padding:2px 0;
}
.hgd-m .hgd-k{background:#2f6fb5;}
.hgd-u .hgd-k{background:#3f7d20;}
.hgd-w .hgd-k{background:#c0392b;}
.hgd-w{color:#8a2c22;}
.hgls .hgd-item mark{background:#ffe9a8;color:inherit;padding:0 1px;border-radius:2px;}
.hgd-hide{display:none !important;}

/* 番外編（既存マークアップ） */
.hgls .hgd-item p{margin:0 0 6px !important;font-size:14.4px !important;line-height:1.9 !important;max-width:52em;}
.hgls .hgd-item p:last-child{margin-bottom:0 !important;}
.hgls .hgd-item p.hgd-term{font-size:18px !important;max-width:none;}
.hgd-extra{margin-top:6px;}
.hgd-extra-grid{display:grid;grid-template-columns:1fr;gap:10px;}

.hgd-empty{
  grid-column:1/-1;border:2px dashed #c9d4e2;border-radius:12px;background:#f8fafc;
  padding:24px 16px;text-align:center;color:var(--hgu-sub);font-size:14px;font-weight:700;
}
.hgd-flash{animation:hguFlash 1.6s ease-out 1;}
@media (max-width:640px){
  .hgd-map{grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:6px;}
  .hgd-map-region{font-size:12.5px;}
  .hgd-bar{padding:9px 10px;}
  .hgd-l{padding-left:40px;}
}

/* 1.3.0: 解説記事への直リンク（articles.php の対応表で差し替え） */
.hgu-on .hgls-item a.hgls-more--art{
  background:var(--c,#2f7d5b) !important;color:#fff !important;border-color:var(--c,#2f7d5b) !important;
  font-weight:800;box-shadow:0 2px 6px rgba(20,33,61,.18);
}
.hgu-on .hgls-item a.hgls-more--art:hover{filter:brightness(1.08);}
.hgu-on .hgls-item a.hgls-more--art small{display:block;font-size:10.5px;font-weight:600;opacity:.9;margin-top:2px;line-height:1.3;}
.hgu-on .hgls-item a.hgls-more--s{font-size:11.5px !important;opacity:.85;}