/*====================================================
  記事の部品（コラム・プレスリリース・固定ページ・企業の本文）
  2026-10-16〜17 に整え直した（洋介さんの確認済み）。雰囲気・色は今のまま、大きさ・余白・角の丸み・枠線・薄い地の色を共通の決まりにそろえた。
  posts.css の後に読み込み、そちらの指定を上書きする。部品を足すときは、下の :root の値を使う
====================================================*/
:root {
  --onv-r-s: var(--onv-photo-r-s);  /* 角の丸み（小）：ラベル・セル。値は style.css の :root（写真と同じ） */
  --onv-r: var(--onv-photo-r);      /* 角の丸み（標準）：サイトのカードと同じ */
  --onv-line: #dde6e5;     /* 枠線は 1 種類（地の色に寄せた薄い灰色） */
  --onv-tint: #f2f8f7;     /* 薄い地の色（サイトの地と同じ） */
  --onv-pink: #faf4f7;     /* 中見出しの色（今のまま） */
  --onv-sub: #666;         /* 補足の文字（キャプション・抜粋） */
  --onv-gap: 1.5em;        /* 部品と部品のあいだ */
}

/* ---------- 本文 ---------- */
.bodyText.default_deco {
  font-size: 15px;
  line-height: 1.85;
}
@media print, screen and (min-width: 769px) {
  .bodyText.default_deco { font-size: 16px; line-height: 1.9; }
}
.bodyText.default_deco * + p,
.bodyText.default_deco * + ul,
.bodyText.default_deco * + ol {
  margin-top: var(--onv-gap);
}

/* ---------- 見出し：大見出しと中見出しの差をはっきりさせる ---------- */
.bodyText.default_deco h2 {
  font-size: 20px;
  line-height: 1.5;
  margin: 3em 0 0.9em;  /* 上の余白は、見出しを .headBox で包む前（JS が動く前）と後で同じ値にする */
  padding: 0 0.2em 0.5em;
}
.bodyText.default_deco h3 {
  /* ピンクの帯は残し、2 行になっても形が崩れない角丸の四角にする */
  border-radius: var(--onv-r);
  font-size: 17px;
  line-height: 1.55;
  margin: 2.5em 0 0.9em;
  padding: 0.5em 0.9em;
}
.bodyText.default_deco h4 {
  /* 今の形（太字だけ）のまま、大きさと余白をそろえる */
  font-size: 16px;
  line-height: 1.55;
  margin: 2.5em 0 0.6em;
}
/* H5・H6 は使わない決まり（エディタでも選べなくする）。残っている分は H4 と同じ見た目にする */
.bodyText.default_deco h5,
.bodyText.default_deco h6 {
  font-size: 15px;
  line-height: 1.55;
  margin: 2.5em 0 0.5em;
}
/* 枠（グループ・カラム）の先頭にある見出しには、上の余白を付けない（掲載依頼のページの枠の中など）。
   見出しは js/common.js が .headBox で包むので、包まれた形と包まれる前の形の両方を指定する */
.bodyText.default_deco :is(.wp-block-group, .wp-block-group__inner-container, .wp-block-column) > :is(h2, h3, h4):first-child,
.bodyText.default_deco :is(.wp-block-group, .wp-block-group__inner-container, .wp-block-column) > .headBox:first-child > :is(h2, h3, h4) { margin-top: 0; }
@media print, screen and (min-width: 769px) {
  .bodyText.default_deco h2 { font-size: 24px; }
  .bodyText.default_deco h3 { font-size: 19px; }
  .bodyText.default_deco h4 { font-size: 18px; }
  .bodyText.default_deco h5,
  .bodyText.default_deco h6 { font-size: 16px; }
}
@media screen and (max-width: 769px) {
  .bodyText.default_deco h2 { padding: 0 0.2em 0.5em; }
}

/* ---------- 箇条書き：枠を外し、薄い地の色だけにする ---------- */
.bodyText.default_deco ul:not(.not_set) {
  background: var(--onv-tint);
  border: none;
  border-radius: var(--onv-r);
  padding: 16px 18px;
}
.bodyText.default_deco ul:not(.markList) li { padding-left: 1.1em; }
.bodyText.default_deco ul:not(.markList) li::before {
  top: 0.7em;
  width: 0.45em;
  height: 0.45em;
}
.bodyText.default_deco ul:not(.not_set) > li + li { margin-top: 0.45em; }
/* 「この記事のポイント」（太字の 1 行＋箇条書き）は、青い枠の囲みにして目立たせる */
.bodyText.default_deco p.has-medium-font-size:has(+ ul) {
  color: var(--mainColor);
  font-size: 15px !important;
  font-weight: 700;
  margin-bottom: 0.4em;
}
.bodyText.default_deco p.has-medium-font-size + ul {
  background: #fff;
  border: 1.5px solid var(--mainColor);
  margin-top: 0;
}
/* 番号付き */
.bodyText.default_deco ol {
  border: 1px solid var(--onv-line);
  border-radius: var(--onv-r);
  padding: 16px 18px;
}
/* 見出し付きの囲み（list-heading） */
.bodyText.default_deco p.list-heading {
  border-radius: var(--onv-r) var(--onv-r) 0 0;
  font-size: 15px;
  padding: 8px 18px;
}
.bodyText.default_deco p.list-heading + ul,
.bodyText.default_deco p.list-heading + ol {
  border-radius: 0 0 var(--onv-r) var(--onv-r);
  padding: 16px 18px;
}

/* ---------- 灰色の囲み（段落に背景色）：余白を詰め、サイトの地の色にそろえる ---------- */
.bodyText.default_deco p.has-background {
  background-color: var(--onv-tint) !important;
  border-radius: var(--onv-r);
  font-size: 0.93em;
  line-height: 1.8;
  padding: 14px 16px !important;
}

/* ---------- 画像と説明文 ---------- */
.bodyText.default_deco .wp-block-image { margin-bottom: var(--onv-gap); }
.bodyText.default_deco * + .wp-block-image { margin-top: var(--onv-gap); }
/* 左右寄せの指定が無い画像は中央に置く（本文の幅より画像が小さい、広い画面で左に寄っていた） */
.bodyText .wp-block-image:not(.alignleft):not(.alignright) { text-align: center; }
.bodyText .wp-block-image:not(.alignleft):not(.alignright) img { display: block; margin-inline: auto; }
.bodyText figcaption,
.bodyText .wp-element-caption {
  color: var(--onv-sub);
  font-size: 12px;
  line-height: 1.6;
  margin-top: 6px;
  text-align: center;
}

/* ---------- 表：文字を少し小さく、言葉の途中で折らない ---------- */
.bodyText .wp-block-table,
.bodyText .wp-block-flexible-table-block-table {
  margin: var(--onv-gap) 0;
}
.bodyText .wp-block-table table,
.bodyText .wp-block-flexible-table-block-table table {
  border: 1px solid var(--onv-line);
  border-collapse: separate;
  border-radius: var(--onv-r);
  border-spacing: 0;
  font-size: 13px;
  line-height: 1.6;
  overflow: hidden;
  /* WordPress の表は標準で「列の幅をすべて同じ」（has-fixed-layout）。中身の長さに合わせた列の幅にする */
  table-layout: auto !important;
}
.bodyText .wp-block-table th,
.bodyText .wp-block-table td,
.bodyText .wp-block-flexible-table-block-table th,
.bodyText .wp-block-flexible-table-block-table td {
  border: none !important;
  border-bottom: 1px solid var(--onv-line) !important;
  /* 文節の区切り（<wbr>）で折り返し、1 つの文節が列に収まらないときだけ途中で折る。
     列の幅は中身の長さに比例して決まる（下の table-layout: auto） */
  overflow-wrap: anywhere;
  min-width: 5em;          /* どの列も 4 文字分は取る（「糸満／市」のように細くならない） */
  padding: 9px 10px !important;
  vertical-align: top;
  word-break: keep-all;
}
.bodyText .wp-block-table tr:last-child td,
.bodyText .wp-block-flexible-table-block-table tr:last-child td { border-bottom: none !important; }
.bodyText .wp-block-table thead th,
.bodyText .wp-block-flexible-table-block-table thead th {
  background: var(--onv-tint) !important;
  font-weight: 700;
  text-align: left;
}
/* 左の列（項目名・エリアなど）は細くなりすぎないように */
.bodyText .wp-block-table td:first-child,
.bodyText .wp-block-flexible-table-block-table td:first-child {
  font-weight: 500;
}
/* 2 列の表（項目／内容）：左の列を見出しの形にする */
.bodyText .wp-block-table table:not(:has(tr > :nth-child(3))) td:first-child {
  background: var(--onv-tint);
}
/* 項目名がどれも短い（8 文字以内。所在地・アクセスなど）表は、項目名を 1 行に収め、残りを内容に使う。
   判定は js/article-table.js（.onv-tlabel を付ける）。項目名が長い表（保険の種類など）は、文字の量で幅を分ける */
.bodyText .wp-block-table table.onv-tlabel td:first-child {
  white-space: nowrap;
  width: 1%;
}
/* 右の列（住所・時間など長い文）は、今までどおりどこでも折り返す（数字の途中で切れないように） */
.bodyText .wp-block-table table:not(:has(tr > :nth-child(3))) td:last-child { word-break: normal; }
/* 画面に収まらない表だけ、横にずらして見られるようにする（列を無理に広げない） */
.bodyText .wp-block-table,
.bodyText .wp-block-flexible-table-block-table { overflow-x: auto; }

/* ---------- スマホで列の多い表：横スクロール（js/article-table.js が .onv-tscroll で包む） ---------- */
.bodyText .onv-tscroll { margin: var(--onv-gap) 0; position: relative; }
.bodyText .onv-tscroll > figure {
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--onv-line);
  border-radius: var(--onv-r);
  margin: 0 !important;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.bodyText .onv-tscroll > figure table {
  border: none !important;
  border-radius: 0 !important;
  min-width: var(--onv-tmin, 560px);
  overflow: visible !important;   /* 1 列目を固定するため（overflow: hidden だと固定が効かない） */
}
/* 1 列目を固定して、横にずらしても何の行か分かるようにする */
.bodyText .onv-tscroll td:first-child,
.bodyText .onv-tscroll th:first-child {
  background: #fff;
  left: 0;
  position: sticky;
  z-index: 1;
}
.bodyText .onv-tscroll thead th:first-child { background: var(--onv-tint) !important; }
/* 固定する 1 列目は細めに（広いと、横にずらせる場所が狭くなる） */
.bodyText .onv-tscroll td:first-child,
.bodyText .onv-tscroll th:first-child { max-width: 10em; min-width: 8em; width: 10em; }
.bodyText .onv-tscroll.is-moved td:first-child,
.bodyText .onv-tscroll.is-moved th:first-child { box-shadow: 6px 0 6px -6px rgba(0, 0, 0, 0.18); }
/* 右端をぼかして、続きがあることを見せる（右端まで来たら消す） */
.bodyText .onv-tscroll::after {
  background: linear-gradient(to left, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
  border-radius: 0 var(--onv-r) var(--onv-r) 0;
  bottom: 1px;
  content: "";
  pointer-events: none;
  position: absolute;
  right: 1px;
  top: 1px;
  transition: opacity 0.2s;
  width: 44px;
}
.bodyText .onv-tscroll.is-end::after { opacity: 0; }
/* 横スクロールの表は、文字を 1px 小さく（列が多く、情報が詰まっているため） */
.bodyText .onv-tscroll > figure table { font-size: 12px; }
/* 指のマークの案内（ScrollHint の形）。表の上に重ね、指を左右に動かす。スクロールしたら消える */
.bodyText .onv-tscroll__hint {
  align-items: center;
  background: rgba(51, 51, 51, 0.62);
  border-radius: var(--onv-r);
  color: #fff;
  display: flex;
  flex-direction: column;
  font-size: 11px;
  font-weight: 700;
  gap: 6px;
  left: 50%;
  letter-spacing: 0.04em;
  line-height: 1;
  margin: 0 !important;
  padding: 14px 16px 12px;
  pointer-events: none;   /* 指で触っても、下の表がそのままスクロールする */
  position: absolute;
  top: min(40%, 110px);
  transform: translateX(-50%);
  transition: opacity 0.35s, visibility 0.35s;
  white-space: nowrap;
  z-index: 3;
}
.bodyText .onv-tscroll__hint svg { animation: onv-swipe 1.8s ease-in-out infinite; fill: #fff; height: 30px; width: 30px; }
.bodyText .onv-tscroll.is-moved .onv-tscroll__hint { opacity: 0; visibility: hidden; }
@keyframes onv-swipe {
  0%, 100% { transform: translateX(-8px) rotate(-8deg); }
  50% { transform: translateX(8px) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .bodyText .onv-tscroll__hint svg { animation: none; }
}

@media print, screen and (min-width: 769px) {
  .bodyText .wp-block-table table,
  .bodyText .wp-block-flexible-table-block-table table { font-size: 15px; }
  .bodyText .wp-block-table th,
  .bodyText .wp-block-table td,
  .bodyText .wp-block-flexible-table-block-table th,
  .bodyText .wp-block-flexible-table-block-table td { padding: 11px 14px !important; }
}

/* ---------- 関連記事のカード ---------- */
.bodyText * + .related-post-block { margin-top: 2em; }
.bodyText .related-post-block + * { margin-top: 1.8em !important; }
.bodyText .related-post-link {
  background: var(--onv-tint);
  border: none;
  border-radius: var(--onv-r);
  gap: 8px 14px;
  line-height: 1.6;
  padding: 20px 16px 16px;
}
.bodyText .related-post-icon {
  border-radius: var(--onv-r-s);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  top: -10px;
  left: 12px;
}
/* サムネイルは 16:9（アイキャッチと同じ比率。以前は .coverImg の既定 65% で左右が切れていた） */
.bodyText .related-post-thumbnail .coverImg { padding-top: 56.25%; }
.bodyText .related-post-title { font-size: 14px; line-height: 1.55; }
.bodyText .related-post-excerpt {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--onv-sub);
  display: -webkit-box;
  font-size: 12px;
  line-height: 1.7;
  overflow: hidden;
}
@media print, screen and (min-width: 769px) {
  .bodyText .related-post-link { padding: 22px 20px 18px; }
  .bodyText .related-post-title { font-size: 16px; }
  .bodyText .related-post-excerpt { font-size: 13px; }
}

/* ---------- 吹き出し：枠を外し、地の色にそろえる ---------- */
.bodyText .lzbk_balloon { gap: 14px; }
.bodyText .lzbk_balloon_txt {
  background: var(--onv-tint);
  border: none;
  border-radius: var(--onv-r);
  font-size: 1em;
  line-height: 1.8;
  max-width: calc(100% - 64px - 14px);
  padding: 12px 16px;
}
.bodyText .lzbk_balloon_txt::before {
  background: var(--onv-tint);
  top: 50%;
  right: calc(100% - 1px);
}
.bodyText .lzbk_balloon.balloon-left .lzbk_balloon_txt::before { left: calc(100% - 1px); }
.bodyText .lzbk_balloon_txt::after { display: none; }
.bodyText .lzbk_balloon_img { flex-shrink: 0; width: 64px; }
.bodyText .lzbk_balloon_img_caption { color: var(--onv-sub); font-size: 11px; margin-top: 4px; }
@media print, screen and (min-width: 769px) {
  .bodyText .lzbk_balloon_txt { max-width: calc(100% - 80px - 14px); }
  .bodyText .lzbk_balloon_img { width: 80px; }
}

/* ---------- よくある質問 ---------- */
.bodyText .schema-faq { margin: 1.5em 0 0; }
.bodyText .schema-faq-section {
  border-bottom: 1px solid var(--onv-line);
  padding: 16px 0;
}
.bodyText .schema-faq-section:first-child { border-top: 1px solid var(--onv-line); }
.bodyText .schema-faq-question { display: block; margin-bottom: 0.5em; padding-left: 2em; }
.bodyText .schema-faq-question::before { color: var(--mainColor); font-family: var(--f_en); font-size: 1.25em; top: -2px; width: 1.2em; text-align: left; }
.bodyText .schema-faq-answer { margin-bottom: 0; padding-left: 2em; }
.bodyText .schema-faq-answer::before { color: #e3b7cd; font-family: var(--f_en); font-size: 1.25em; top: -2px; width: 1.2em; text-align: left; }

/* ---------- 引用・区切り線 ---------- */
.bodyText .wp-block-quote {
  background: var(--onv-tint);
  border-radius: var(--onv-r);
  margin: var(--onv-gap) 0;
  padding: 1.4em 1.6em;
  width: 100%;
}
.bodyText hr { background: var(--onv-line); }

/* ---------- 記事のタイトル（H1）：今の形のまま、大きさ・行間・下の線を整える ---------- */
/* 本文では H1 を使わない（エディタで選べない。以前の分は scripts/migrate/fixes.php で H2 にした）ので、H1 はこのタイトルだけ */
#post_title {
  border-bottom-color: var(--onv-line);
  margin-bottom: 28px;
  padding-bottom: 22px;
}
#post_title .date_cate { margin-bottom: 14px; }
#post_title h1 { font-size: 21px; line-height: 1.5; }
@media print, screen and (min-width: 769px) {
  #post_title { margin-bottom: 40px; padding-bottom: 28px; }
  #post_title h1 { font-size: 28px; line-height: 1.45; }
}

/* ---------- ポイントの枠（グループに point を付けたもの）：「この記事のポイント」と同じ枠にそろえる ---------- */
.bodyText .wp-block-group.point {
  border-radius: var(--onv-r) !important;
  border-width: 1.5px !important;
  padding: 16px 18px !important;
}

/* ---------- マーカー（ピンク・水色の 2 つ。js/editor-marker.js のボタンで付ける） ---------- */
/* 強調は太字とこのマーカーだけ。下線（リンクと見分けが付かない）と文字の色は使わない（記事の書き方マニュアル） */
.bodyText mark.onv-marker-pink,
.bodyText mark.onv-marker-blue {
  color: inherit;
  padding: 0 2px;
}
.bodyText mark.onv-marker-pink { background: linear-gradient(transparent 58%, #f7e3ec 58%); }
.bodyText mark.onv-marker-blue { background: linear-gradient(transparent 58%, #cfeefb 58%); }
/* WordPress 標準の「ハイライト」で背景に色を塗ったもの（以前の記事に 1 か所）は、ピンクのマーカーにそろえる */
.bodyText mark.has-inline-color[style*="background-color:#"],
.bodyText mark.has-inline-color[style*="background-color: #"] {
  background: linear-gradient(transparent 58%, #f7e3ec 58%) !important;
  padding: 0 2px;
}