/* データ検証（医療機関検索）固有の追加スタイル
   ヘッダー・フッター・グロナビ・パンくず・.wrap/.wfcontent・h2・ボタン等の
   コーポレートサイト共通部分は ../assets/css/style.css（本体と共通ファイル）を参照。
   このファイルは本体CSSの後に読み込むこと（同じセレクタは本体側を上書きする）。 */

/* 本体側はh2の前に必ず本文・画像等が来る想定のため、h2:first-childの余白調整が無い。
   詳細ページの「基本情報／アクセス」のみ、上マージンをPC版で60pxにする */
.wfcontent h2:first-child {
  margin-top: 60px;
}

/* 詳細ページ冒頭文（正式名称・略式名称カナ・略式名称英語・URL）：
   本体の.wfcontent pは上下12pxマージンだが、行間を詰めるためmargin-topを0にし、
   margin-bottomも6pxに縮める（margin-topが0のままだとマージン相殺で12pxのまま変わらないため） */
#detail-identity-container p {
  margin-top: 0;
  margin-bottom: 6px;
}

/* 詳細ページh1のアイコン（病院／診療所／歯科診療所の区分）
   高さをフォントサイズ(1em)程度に抑えてh1の行の高さ(line-height:1.35)を変えないようにし、
   flexで組むことでテキストが複数行になってもアイコンの下に回り込まず常に横に並ぶようにする */
.pgh1-with-icon {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
}

.pgh1-icon {
  flex: none;
  width: 1em;
  height: 1em;
  margin-top: 0.18em;
}

/* 検索フォーム：外枠線・背景色付き、内側に適切な余白を確保 */
[data-role="form"] {
  border: 1px solid var(--line2);
  background: var(--bg2);
  border-radius: 4px;
  padding: 32px 28px;
}

.form-row {
  margin-bottom: 20px;
}

.form-row label.field-label {
  display: block;
  font-weight: 700;
  color: var(--sub);
  margin-bottom: 8px;
  font-size: 16px;
}

.checkbox-group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  cursor: pointer;
}

select,
input[type="text"] {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line2);
  border-radius: 4px;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: #fff;
}

/* 本体サイト（/service/pr/info/ 等）の .wffield select.b と同じ「くの字」矢印にする */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  padding-right: 36px;
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 11px 7px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'><path d='M1 1l4.5 4.5L10 1' stroke='%2351605F' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

select:focus,
input[type="text"]:focus {
  outline: none;
  border-color: var(--teal);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 640px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

.hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.actions {
  margin-top: 24px;
  display: flex;
  gap: 12px;
}

@media (min-width: 901px) {
  .actions {
    margin-top: 36px;
  }
}

/* 検索・ページング用ボタン（コーポレートサイト本体の.btnとは別系統） */
button,
.pagebtn {
  cursor: pointer;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: 2px;
  padding: 0 24px;
  height: 48px;
  border: 1px solid var(--line2);
  background: #fff;
  color: var(--primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

button:hover,
.pagebtn:hover {
  border-color: var(--teal);
  background: var(--bg2);
}

button.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

button.primary:hover {
  background: var(--primary-d);
  border-color: var(--primary-d);
  transform: translateY(-1px);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 一覧表示：「○件該当」は冒頭文(.wfcontent p)と同じレイアウトで配置するが、
   フォントサイズは20pxを維持し、強調（太字）にする */
.result-summary {
  margin: 12px 0;
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
}

@media (min-width: 901px) {
  .result-summary {
    font-size: 20px;
  }
}

/* 検索結果の先頭（検索フォーム部との間）にPC版で40px程度のスペースを設ける */
#result-container {
  margin-top: 16px;
}

@media (min-width: 901px) {
  #result-container {
    margin-top: 40px;
  }
}

.result-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.result-card {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 18px 22px;
}

.result-card:first-child {
  border-top: 1px solid var(--line);
}

.result-card .name {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 700;
}

.result-card .name a {
  color: var(--primary);
  text-decoration: none;
}

.result-card .name a:hover {
  text-decoration: underline;
}

/* 施設区分アイコン（四角囲み） */
.facility-icon-box {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 4px;
}

.facility-icon-box img {
  width: 22px;
  height: 22px;
  display: block;
}

.result-card .meta {
  margin-top: 10px;
  font-size: 13px;
  color: var(--sub);
}

.result-card .meta div {
  margin: 2px 0;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 24px;
}

/* 前後送り（1ページ移動）：フォント・記号は既存の.pagebtnのまま */
.pagebtn-arrow {
  margin: 0 8px;
}

/* 中央の数字（1・前後1ページ・最終ページ） */
.pagebtn-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  font-size: 14px;
  color: var(--primary);
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.2s;
}

.pagebtn-num:hover {
  background: var(--bg2);
}

/* 現在地：リンクなしで強調表示 */
.pagebtn-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--primary);
  border-radius: 2px;
}

.pagebtn-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  font-size: 14px;
  color: var(--muted);
}

.state-message {
  text-align: center;
  padding: 60px 20px;
  color: var(--sub);
}

.state-message.error {
  color: #c0651e;
}

/* 詳細ページ */
table.detail-table {
  border-collapse: collapse;
  width: 100%;
  margin: 12px 0 8px;
  font-size: 13px;
}

/* アクセスマップ（基本情報／アクセスの表の下に表示）：表組と同じ幅にする。
   高さは維持するため、iframe側のheight指定はそのまま */
.map-embed {
  margin: 16px 0 0;
}

.map-embed iframe {
  display: block;
  width: 100%;
  height: 480px;
  border: 0;
}

table.detail-table th,
table.detail-table td {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-left: 0;
  border-right: 0;
  padding: 8px 14px;
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
  background: none;
}

/* 診療科目・専門外来など長文になりやすい項目：ラベル単独行→値は表全幅で表示 */
table.detail-table th[colspan] {
  width: auto;
}

/* 診療科目・専門外来の値部分：背景色ナシ（白）、フォントの強調ナシ */
table.detail-table td.full-row-value {
  background: none;
  font-weight: 400;
  color: var(--ink);
}

table.detail-table th {
  background: var(--bg2);
  width: 220px;
  font-weight: 700;
  color: var(--sub);
  white-space: normal;
  word-break: break-word;
}

/* 医療従事者、専門医、専門看護師：職種区分・人数（常勤換算）は文字数が少ないため
   固定幅にし、職種列に残りの幅を譲る。table-layout:autoだと他列の内容量次第で
   幅が安定しないため、fixedにして固定する */
table.detail-table-staff {
  table-layout: fixed;
}

table.detail-table-staff thead th:first-child,
table.detail-table-staff tbody td:first-child {
  width: 220px;
  max-width: 220px;
  white-space: normal;
  word-break: break-word;
}

/* 中央の「職種」列：幅未指定にして残りの幅を全て引き受けさせる
   （fixedレイアウトでは他列がth{width:220px}を引き継いだままだと按分されてしまうため、
   　widthを明示的にautoで上書きする必要がある） */
table.detail-table-staff thead th:nth-child(2) {
  width: auto;
}

table.detail-table-staff thead th:last-child,
table.detail-table-staff tbody td:last-child {
  width: 300px;
}

/* rowspanでグループ化する横並び一覧テーブル（医療従事者、対応可能な措置・疾患、
   対応可能な在宅医療、診療報酬届出、保有する設備・併設する施設、DPC手術実績）共通：
   本体側の.wfcontent table td:first-childルールは「行の最初のセル」という位置基準のため、
   rowspanで先頭列が省略される行では後続の列がその位置に来てしまい、背景色・強調が
   不揃いになる。そのためPHP側でグループ化列の値に付与したclass="rowspan-group-label"の
   有無だけで判定し、位置に依存しないようにする */
table.detail-table-grouped td:not(.rowspan-group-label) {
  background: none;
  font-weight: 400;
}

table.detail-table-grouped td.rowspan-group-label {
  background: none;
  font-weight: 700;
  vertical-align: top;
}

/* グループ化列（ラベル）は文字数が少ないため狭く固定し、値列に幅を譲る。
   table-layout:autoのままだと共通ルール（th{width:220px}）が全列に同じ幅を
   ヒントしてしまい、内容量に関わらず均等割りされてしまう（例：領域544px:
   対応可能な措置･疾患544px）ため、fixedにする。ただし、fixedレイアウトは
   「幅未指定」の列にだけ残りの幅を回す仕組みのため、値列側もth{width:220px}を
   引き継いだままだと「全列に幅指定あり」の状態になり、220px:200pxの比率で
   按分されるだけで意図通りに広がらない。そのため値列はwidth:autoで明示的に
   上書きし、幅未指定の列として扱わせる */
table.detail-table-grouped {
  table-layout: fixed;
}

table.detail-table-grouped thead th:first-child,
table.detail-table-grouped tbody td.rowspan-group-label {
  width: 220px;
}

table.detail-table-grouped thead th:nth-child(2) {
  width: auto;
}

/* DPC手術実績：MDC名称・疾患名称・値は固定幅にし、術式名称列（3列目、
   長文になりやすい）に残りの幅を譲る */
table.detail-table-dpc thead th:nth-child(1),
table.detail-table-dpc thead th:nth-child(2),
table.detail-table-dpc tbody td.rowspan-group-label {
  width: 220px;
}

table.detail-table-dpc thead th:nth-child(3) {
  width: auto;
}

table.detail-table-dpc thead th:last-child,
table.detail-table-dpc tbody td:last-child {
  width: 220px;
}

/* 予防接種／医療機関の指定、分類、公費負担等：本体側の.wfcontent table td:first-child
   ルール（背景色・強調あり）と同じ詳細度で打ち消す必要があるため、
   同じ:first-childセレクタで明示的に上書きする */
table.detail-table-plain-value td:first-child {
  background: none;
  font-weight: 400;
}

/* rowspanでまとめた職種区分セルは、グループの先頭行の高さに合わせて上詰めにする */
table.detail-table-staff td[rowspan] {
  vertical-align: top;
}

/* 行ホバーでラベル・値ともに背景色を付ける */
table.detail-table tr:hover th,
table.detail-table tr:hover td {
  background: #f2f9f7;
}

table.detail-table tr:hover td.full-row-value {
  background: none;
}

.section-note {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 12px;
}

.back-link {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--primary);
  text-decoration: none;
}

.back-link:hover {
  text-decoration: underline;
}

.loading {
  text-align: center;
  padding: 40px;
  color: var(--sub);
}

/* h1末尾の小さい補助テキスト（例：「の検索結果」） */
h1 .h1-suffix {
  font-size: 0.5em;
  font-weight: 500;
  color: var(--sub);
}

@media (min-width: 901px) {
  h1 .h1-suffix {
    font-size: 20px;
  }
}

/* 再検索フォームのアコーディオン（<details>/<summary>）：背景色ナシ、横罫線のみ（縦罫線ナシ） */
.accordion-toggle {
  position: relative;
  display: block;
  text-align: center;
  cursor: pointer;
  list-style: none;
  padding: 14px 40px;
  background: none;
  border-top: 1px solid var(--line2);
  border-bottom: 1px solid var(--line2);
  font-weight: 700;
  color: var(--sub);
  line-height: 1.5;
}

.accordion-toggle::-webkit-details-marker {
  display: none;
}

.accordion-toggle .chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform 0.2s;
  color: var(--primary);
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center;
}

details[open] > .accordion-toggle .chevron {
  transform: translateY(-50%) rotate(-90deg);
}

.accordion-body {
  padding-top: 16px;
}

/* DPC病院トグル（ラジオボタン） */
.dpc-toggle {
  display: flex;
  gap: 20px;
  align-items: center;
}

.dpc-toggle label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  cursor: pointer;
}