@charset "UTF-8";
/*
 * レイアウトの不具合修正。
 * 原本(Wevery)から引き継いだ崩れのうち、表示に実害があるものだけをここで直す。
 * 直した内容は docs/review-log.md に理由付きで記録する。
 */

/* ---- 記事内の表がページ全体を横に伸ばす問題 ----
 * 原本は表を囲む .scroll-table の overflow をスマートフォン(480px 以下)の
 * メディアクエリの中にしか書いていないため、PC・タブレットでは効かない。
 * さらに table 自身に overflow-x を当てているが、table 要素は overflow を
 * 正しく扱えないため、枠(812px)からセルの中身(1240px)が溢れたまま描画され、
 * ページ全体に横スクロールが出ていた。
 * 表には内容ぶんの幅を持たせ、溢れた分は枠の中だけでスクロールさせる。 */
.scroll-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.scroll-table table {
  overflow: visible;
  width: -moz-max-content;
  width: max-content;
  min-width: 100%;
  max-width: none;
}

/* ---- ブログカードがページを横に伸ばす問題 ----
 * WordPress は読み込みが済むまで、埋め込みの iframe を
 * style="position: absolute; clip: rect(1px,1px,1px,1px)" で隠している。
 * この絶対配置の基準が本文ではなく画面全体になるため、幅 100% が画面幅ぶんに広がり、
 * 見えていないのにページだけが横に伸びていた(現行サイトも同じ状態)。
 * 隠れている間だけ幅を殺す。読み込みが済むと WordPress がこの style を外すので、
 * 下の指定は自動的に外れ、通常のカード表示になる。 */
.wp-embedded-content {
  max-width: 100%;
}

/* ---- トップの「ブログ一覧を見る」ボタンの位置 ----
 * legacy CSS に .btn_wrap の定義はなく、.btn_default 自身が幅 186px の flex のため、
 * そのままだと左端に寄る(他のセクションは親側の指定で中央に見えている)。
 * お知らせ・ブログの枠(.b_news)の中だけ中央にそろえる。 */
.b_news .btn_wrap {
  display: flex;
  justify-content: center;
  margin: 26px 0 0;
}

/* 既定幅(186px)では「ブログ一覧を見る」と矢印が詰まるため、この枠だけ広げる */
.b_news .btn_wrap .btn_default {
  width: 232px;
}

iframe.wp-embedded-content[style*="absolute"] {
  width: 1px !important;
  max-width: 1px !important;
}

/* ---- グローバルナビのドロップダウン ----
 * 位置: legacy は `#nav ul { top: 80px }` で、ナビの下端との間に 26px ほど隙間ができていた。
 * 見た目が離れて見えるうえ、マウスが隙間を通るとメニューが閉じてしまうため、ナビのすぐ下に付ける。
 *
 * 開閉: legacy の droppy(jquery.droppy.js)は「マウスが離れてから 500ms 待って閉じる」実装で、
 * 「保険診療」から「自由診療」へマウスを移すと前が開いたまま次が開き、ボックスが重なっていた。
 * droppy の初期化は header.php で外し、ここで CSS だけで開閉する(同時に開くことが起きない)。
 * droppy.css の `display:none` は css.css が `display:block` で上書きしているため、
 * 表示・非表示は opacity と visibility で切り替える。 */
#nav ul {
  /* droppy.css は css.css より後に読まれ、その `#nav ul { display:none }` が効いている。
     droppy の JS が inline で display:block を付けて開いていたので、ここで block に戻す */
  display: block;
  top: 58px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  /* droppy は開くときに z-index を動的に振っていた。JS をやめた分をここで補う
     (無いとドロップダウンがトップのメイン画像の下に隠れる) */
  z-index: 950;
}

/* 通常時のナビ自身も前面に置く(is-fixed のときだけ z-index が指定されていた) */
#gNav {
  z-index: 900;
}

#nav li:hover > ul,
#nav li:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 親項目の色。droppy が付けていた .hover クラスの代わり */
#gNav #nav > li:hover > a {
  color: #499A94;
}


/* ---- トップ「クリニックブログ」の小見出しと NEW ---- */
/* 小見出しは見出しの直下に寄せ、記事リストとの間に余白を取る */
.b_news .ttl_st--with_sub {
  margin-bottom: 14px !important;
}

/* legacy の `#main article p` に負けるので id を含めて詳細度を上げる */
#main article .b_news .ttl_sub {
  margin: 0 0 42px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: #7c8085;
}

/* ---- NEW バッジ(2026-07-31 Codex 相互レビューを反映した最終形) ----
 * dt 側: .news_meta を legacy の .newsdate と同じ座標に絶対配置し、
 *   中で日付とバッジを横に並べる。バッジの位置は日付の実幅に自動で追従する
 *   (旧実装の left:92px 固定は、最長の日付 2026.12.24(約90px)と数 px しか余裕が無かった)。
 *   バッジを .newsdate の中に入れると add0.js の書き換えで消えるため、必ず兄弟に置く。
 * dd 側: PC はバッジを記事名の左(同じ行)。flex 化は NEW のある行(.has-new-badge)だけに
 *   限定し、お知らせ側・NEW の無い行は legacy の表示に一切触れない。 */
.b_news .listNews dl dt .news_meta {
  position: absolute;
  top: 29px;   /* legacy PC の .newsdate と同じ座標 */
  left: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.b_news .listNews dl dt .news_meta .newsdate {
  position: static; /* 絶対配置は .news_meta 側に移した */
}

.b_news .listNews dl dd.has-new-badge {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* 伸ばさない(1 1 auto にすると余白まで広がり、下線が行幅いっぱいに引かれる)。
   狭い画面では縮んで折り返す。切れ目の無い英数字が続いてもはみ出させない */
.b_news .listNews dl dd.has-new-badge > a {
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.news_badge_new {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 3px;
  background: #417571; /* 白文字で 5.2:1。#499a94 は 3.3:1 で小さい文字には不足 */
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
}

.b_news .listNews dl dd.has-new-badge > .news_badge_new--pc {
  flex: 0 0 auto;
  margin-top: 3px;
}

/* SP 用バッジ(日付の横)は PC では出さない */
.news_badge_new--sp {
  display: none;
}

/* 読み上げ専用テキスト(視覚バッジは aria-hidden。リンク内の「新着記事：」で意味を伝える) */
.news_new_sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media screen and (max-width: 480px) {
  .b_news .ttl_st--with_sub {
    margin-bottom: 10px !important;
  }

  #main article .b_news .ttl_sub {
    margin: 0 0 28px;
    font-size: 12px;
  }

  /* 狭い画面では日付が独立した行になるため、バッジは日付の横(右)に出す */
  .b_news .listNews dl dt .news_meta {
    top: 23px;   /* legacy SP の .newsdate と同じ座標 */
    left: 0;
  }

  .news_badge_new--sp {
    display: inline-block;
  }

  .b_news .listNews dl dd.has-new-badge > .news_badge_new--pc {
    display: none;
  }

  /* 記事名は左端から始める(押し出さない) */
  .b_news .listNews dl dd.has-new-badge {
    display: block;
  }
}