/* Subpages1：Editorial Service List（21st.dev @ibrandify/editorial-service-list）を移植。
   原作（React／Tailwind）の構成と寸法：max-width 896px（max-w-4xl）の白い面に 1px 罫線・角丸 16px・shadow-sm、余白 24px（640px 以上 40px）。
   見出し：小さな英字ラベル 10px／.2em／大文字、タイトル 30〜42px、右に短い説明 12〜14px（max-w-xs）。下に 40px。
   行：上に 1px 罫線、上下 24px、番号（mono 12px・幅 48px）、項目名（20／24／30px、medium、詰めた字間）、右に短い説明（640px 以上）、
   右端の chevron（開くと 90°回転）。項目名はポインターを重ねると・開くと右へ 8px（200ms）。本文は grid-template-rows 0fr→1fr と
   opacity の 300ms ease-out で開閉し、左に 48px 下げ、最大 672px。フッターは上に罫線、左右に短い文。
   TOP に合わせて変えたところ：項目名・タイトルの書体を明朝（--hal-serif）、本文を Zen Kaku Gothic New に。黒・灰は TOP の墨色と
   文字色に置き換え（原作 #0a0a0a／#737373 → #1b1813／#6b6356）。罫線は原作の #e5e5e5（Fix2：Subpages1 の紙色系 #ddd5c6 をやめた）。要約は日本語の長さに合わせて
   PC では項目名の右の列、モバイルでは項目名の下に置く。本文は長い日本語のため 12〜14px ではなく 15〜16px、モバイルは字下げなし。
   原作の紹介用デモの自動開閉（showcase）は移植していない。開いた項目は、もう一度押すまで閉じない。 */
.hal-esl{
  --esl-fg:#1b1813;--esl-text:#3d3931;--esl-muted:#6b6356;--esl-line:#e5e5e5;--esl-card:#fff;
  box-sizing:border-box;width:100%;max-width:896px;margin-inline:auto;padding:24px;
  border:1px solid var(--esl-line);border-radius:16px;background:var(--esl-card);color:var(--esl-fg);
  box-shadow:0 1px 2px 0 rgba(0,0,0,.05);text-align:left}
.hal-esl *,.hal-esl *::before,.hal-esl *::after{box-sizing:border-box}
@media (min-width:640px){.hal-esl{padding:40px}}
@media (max-width:639.98px){.hal-esl{padding:18px 16px}}

.hal-esl__header{display:flex;flex-direction:column;gap:24px;margin-bottom:40px;padding-bottom:8px}
@media (min-width:640px){.hal-esl__header{flex-direction:row;align-items:flex-start;justify-content:space-between}}
.hal-esl__kicker{display:block;margin:0 0 8px;font-family:var(--hal-mono,'Space Mono',monospace);font-size:10px;font-weight:700;line-height:1.5;letter-spacing:.2em;text-transform:uppercase;color:var(--esl-muted)}
.hal-esl__title{margin:0;font-family:var(--hal-serif,'Zen Old Mincho',serif);font-size:26px;font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--esl-fg)}
@media (min-width:640px){.hal-esl__title{font-size:32px}}
@media (min-width:768px){.hal-esl__title{font-size:38px}}
.hal-esl__sub{margin:0;max-width:20rem;font-size:13px;line-height:1.8;color:var(--esl-muted)}
@media (min-width:640px){.hal-esl__sub{padding-top:24px;font-size:14px}}

.hal-esl__list{display:flex;flex-direction:column}
.hal-esl__item{border-top:1px solid var(--esl-line)}
.hal-esl__row{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) 24px;align-items:start;column-gap:8px;padding:24px 0;cursor:pointer}
@media (min-width:640px){.hal-esl__row{grid-template-columns:48px minmax(0,1fr) 24px;align-items:center}}
@media (max-width:639.98px){.hal-esl__row{grid-template-columns:26px minmax(0,1fr) 18px;column-gap:6px;padding:16px 0}.hal-esl__header{gap:10px;margin-bottom:16px;padding-bottom:2px}.hal-esl__title{font-size:22px}.hal-esl__sub{display:none}.hal-esl__no{padding-top:4px;font-size:11px}}
.hal-esl__no{padding-top:5px;font-family:var(--hal-mono,'Space Mono',monospace);font-size:12px;line-height:1.5;color:var(--esl-muted)}
@media (min-width:640px){.hal-esl__no{padding-top:0}}
.hal-esl__head{min-width:0}
@media (min-width:1024px){.hal-esl__head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;column-gap:32px}}
.hal-esl__name{margin:0;padding:0;border:0;background:none;font:inherit}
/* 行全体を押せるよう、ボタンの当たり判定を行いっぱいへ広げる（要約の文はボタン名に含めない） */
.hal-esl__btn{all:unset;box-sizing:border-box;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hal-esl__btn::after{content:'';position:absolute;inset:0;z-index:1}
.hal-esl__btn:focus-visible{outline:none}
.hal-esl__btn:focus-visible::after{border-radius:4px;box-shadow:0 0 0 2px #1b1813}
.hal-esl__name-text{display:inline-block;font-family:var(--hal-serif,'Zen Old Mincho',serif);font-size:20px;font-weight:500;line-height:1.45;letter-spacing:-.005em;color:var(--esl-fg);transition:transform .2s cubic-bezier(.4,0,.2,1),color .2s;word-break:normal;overflow-wrap:anywhere;line-break:strict}
@media (min-width:640px){.hal-esl__name-text{font-size:24px}}
@media (min-width:1024px){.hal-esl__name-text{font-size:26px}}
.hal-esl__summary{margin:8px 0 0;font-size:13.5px;line-height:1.75;color:var(--esl-muted)}
.hal-esl__summary p{margin:0}
@media (min-width:1024px){.hal-esl__summary{margin:0;font-size:13px}}
.hal-esl__chev{position:relative;z-index:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-top:2px;color:var(--esl-muted);transition:transform .2s cubic-bezier(.4,0,.2,1),color .2s}
@media (min-width:640px){.hal-esl__chev{margin-top:0}}
.hal-esl__chev svg{width:16px;height:16px}
@media (hover:hover){
  .hal-esl__row:hover .hal-esl__name-text{transform:translateX(8px)}
  .hal-esl__row:hover .hal-esl__chev{color:var(--esl-fg)}
}
.hal-esl__item.is-open .hal-esl__name-text{transform:translateX(8px);color:var(--esl-fg)}
.hal-esl__item.is-open .hal-esl__chev{transform:rotate(90deg);color:var(--esl-fg)}

/* 開閉：JS が動くときだけ閉じた状態から始める（.hal-sub1-js）。JS 停止時は全文を表示し、chevron は開いた向き。 */
.hal-esl__panel{display:grid;grid-template-rows:1fr;opacity:1}
.hal-sub1-js .hal-esl__panel{grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .3s ease-out,opacity .3s ease-out,visibility 0s linear .3s}
.hal-sub1-js .hal-esl__item.is-open .hal-esl__panel{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows .3s ease-out,opacity .3s ease-out,visibility 0s}
html:not(.hal-sub1-js) .hal-esl__chev{transform:rotate(90deg)}
.hal-esl__panel-inner{min-height:0;overflow:hidden}
.hal-esl__body{max-width:672px;padding:4px 0 24px;font-size:15px;line-height:1.95;color:var(--esl-text)}
@media (min-width:640px){.hal-esl__body{padding-left:48px;font-size:16px}}
@media (prefers-reduced-motion:reduce){
  .hal-esl__name-text,.hal-esl__chev{transition:none}
  .hal-sub1-js .hal-esl__panel,.hal-sub1-js .hal-esl__item.is-open .hal-esl__panel{transition:none}
}

/* ページ内リンク・URL の # の着地：固定ヘッダーの下に見出しが出るよう、この部品の id だけで余白を持つ（既存の調査詳細と同じ 96／76px） */
.hal-esl [id]{scroll-margin-top:96px}
@media (max-width:767.98px){.hal-esl [id]{scroll-margin-top:76px}}

/* 本文（既存ブロックの出力：p／h3／ul／ol／blockquote／目次）。既存の hal-svc の段落規則より後で、編集リストの文字に揃える。 */
.hal-esl__body :is(p,li){font-size:inherit;line-height:inherit;color:inherit;letter-spacing:.02em}
.hal-esl__body p{margin:0 0 1em}
.hal-esl__body p:last-child{margin-bottom:0}
.hal-esl__body h3{margin:1.6em 0 .5em;font-family:var(--hal-serif,'Zen Old Mincho',serif);font-size:17px;font-weight:600;line-height:1.6;color:var(--esl-fg);border:0;padding:0;background:none}
.hal-esl__body h3:first-child{margin-top:0}
.hal-esl__body :is(ul,ol){margin:0 0 1em;padding-left:1.4em}
.hal-esl__body li{margin:0 0 .35em}
/* 引用は字下げだけ（下層の左だけの装飾縦棒は使わない：WordPress Permanent Rules） */
.hal-esl__body blockquote{margin:0 0 1em;padding:0 0 0 1em;border:0;background:none;font-style:normal;color:inherit}
.hal-esl__body a{color:var(--esl-fg);text-decoration:underline;text-underline-offset:3px}

.hal-esl__footer{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:12px;margin-top:16px;padding-top:24px;border-top:1px solid var(--esl-line);font-size:12px;line-height:1.6;color:var(--esl-muted)}
@media (min-width:640px){.hal-esl__footer{flex-direction:row;align-items:center}}
.hal-esl__footer-strong{font-weight:500;color:rgba(27,24,19,.8)}

/* 行の中のリンク（中央区の調査項目の詳細ボタンなど）は、行全体の開閉の当たり判定より前面に置いて、1回で移動できるようにする。
   モバイルは番号の列から行の幅いっぱい、640px 以上は項目名の列に揃える。 */
.hal-esl__summary a{position:relative;z-index:2}
.hal-esl__action{position:relative;z-index:2;grid-column:1 / -1;margin-top:14px}
@media (min-width:640px){.hal-esl__action{grid-column:2 / -1}}
.hal-esl__action .hal-chuo__linkline{margin:0}

/* モバイル（640px 未満）の詰め（上の規則より後に置く） */
@media (max-width:639.98px){.hal-esl__name-text{font-size:17.5px;line-height:1.45}.hal-esl__summary{margin-top:4px;font-size:12.5px;line-height:1.65}.hal-esl__chev{width:18px}.hal-esl__footer{margin-top:8px;padding-top:16px;gap:6px;font-size:11.5px}.hal-esl__body{padding-bottom:18px}}

/* Fix2：テーマ（Astra）の button:hover／:focus（青い地・白い文字、詳細度 0,1,1）が行のボタンに出ないよう、状態ごとに打ち消す */
.hal-esl .hal-esl__btn:is(:hover,:focus,:focus-visible,:active){background:none;color:inherit;box-shadow:none;border:0;text-decoration:none}