/* 第4段：広告挿入への耐性、記事部品、トップ・料金表 */

/* AdSense が flex コンテナへ挿入する広告は、隠さず専用行に送る。 */
.header-main,
.header-contact-inner { flex-wrap: wrap; }
.header-main > .site-name,
.header-main > .nav-toggle,
.header-main > .site-nav { order: 1; }
.header-main > .site-nav { margin-left: auto; }
.header-main > div.google-auto-placed,
.header-contact-inner > div.google-auto-placed {
  box-sizing: border-box;
  order: 10;
  flex: 0 0 100%;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-top: 8px;
}
.google-auto-placed,
.google-auto-placed ins { max-width: 100% !important; }
main > .google-auto-placed,
main + .google-auto-placed { min-width: 0; max-width: 100% !important; }

/* 記事本文の見出し */
.post-body { counter-reset: article-section; }
.post-body > h2 {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .5em;
  align-items: baseline;
  margin: 3em 0 1.15em;
  padding: 0 0 .55em;
  color: var(--navy);
  background: transparent;
  border-bottom: 3px double var(--navy);
  font-size: clamp(20px, 3vw, 26px);
  counter-increment: article-section;
}
.post-body > h2::before {
  display: block;
  grid-column: 1;
  color: var(--navy);
  font-family: var(--mincho);
  font-size: .95em;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.55;
  content: counter(article-section, decimal-leading-zero);
}
.post-body > h2:not(:first-of-type) {
  padding-top: 1.42em;
  background-image: url("/assets/icons/hk-section-mark.svg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 76px 12px;
  border-top: 1px solid var(--blue-line);
}
.post-body > h3 {
  margin-top: 2em;
  padding: 0 0 .3em .65em;
  border-bottom-color: var(--line);
  border-left-width: 3px;
  font-size: clamp(18px, 2.6vw, 21px);
}

/* 引用枠 */
.post-body blockquote { padding: 1.2em 1.35em 1.1em; }
.post-body blockquote::before { top: .05em; left: .22em; font-size: 3.25em; }
.post-body blockquote.is-conclusion {
  padding: 1.25em 1.4em;
  background: #f1f6fc;
  border-color: #b9cde7;
  border-left-width: 5px;
}
.post-body blockquote.is-conclusion::before { content: none; }
.post-body blockquote.is-conclusion > :first-child {
  display: inline-block;
  margin: 0 0 .7em;
  padding: .14em .7em;
  color: #fff;
  background: var(--navy);
  font-size: .82em;
  line-height: 1.55;
}
.post-body blockquote.is-conclusion > :first-child strong { font-weight: 700; }
.post-body blockquote.is-notice {
  padding: 1.1em 1.3em 1.05em 3.1em;
  color: #414d5d;
  background: #f8fafc;
  border-color: #d8e0eb;
  border-left-width: 1px;
}
.post-body blockquote.is-notice::before {
  top: 1.15em;
  left: 1.15em;
  display: grid;
  width: 1.35em;
  height: 1.35em;
  place-items: center;
  color: var(--navy);
  background: var(--blue-pale);
  border: 1px solid #bfd0e6;
  border-radius: 50%;
  font-family: Georgia, serif;
  font-size: .82em;
  font-weight: 700;
  line-height: 1;
  content: "i";
}
.post-body blockquote.is-notice > :first-child { margin-bottom: .45em; color: var(--navy); font-size: .93em; }
.post-body blockquote.is-law {
  padding: 1.25em 1.45em;
  color: #354052;
  background: #f5f7f8;
  border-color: #d6dde3;
  border-left: 2px solid #9aaabd;
  font-family: var(--mincho);
  font-size: .91em;
  line-height: 1.85;
}
.post-body blockquote.is-law::before {
  position: static;
  display: block;
  width: max-content;
  margin: 0 0 .65em;
  padding-bottom: .15em;
  color: var(--muted);
  border-bottom: 1px solid currentColor;
  font-family: var(--sans);
  font-size: .78em;
  font-weight: 700;
  line-height: 1.4;
  content: "引用文";
}
.post-body blockquote.is-law p,
.post-body blockquote.is-law ol,
.post-body blockquote.is-law dl { margin-bottom: .8em; }

/* 関連記事 */
.post-body aside.read-also {
  max-width: 610px;
  margin: 0 0 1.65em;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--navy);
  box-shadow: 0 2px 8px rgba(16, 37, 72, .06);
}
.post-body aside.read-also > a {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  min-height: 96px;
  padding: 10px;
  color: var(--text);
  text-decoration: none;
}
.post-body aside.read-also > a > .read-also-text:first-child { grid-column: 1 / -1; }
.post-body .read-also img { width: 140px; height: 79px; background: var(--blue-pale); object-fit: cover; }
.post-body .read-also-text { display: flex; min-width: 0; flex-direction: column; justify-content: center; }
.post-body .read-also-label { margin-bottom: .25em; color: var(--navy); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.post-body .read-also-label::before { margin-right: .4em; content: "—"; }
.post-body .read-also-title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--navy-deep);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.post-body aside.read-also > a:hover { background: var(--surface); }
.post-body aside.read-also > a:hover .read-also-title { text-decoration: underline; }

/* 本文内の線画アイコン */
.post-body .ico {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-right: .28em;
  background: currentColor;
  vertical-align: -.14em;
  -webkit-mask: var(--article-icon) center / contain no-repeat;
  mask: var(--article-icon) center / contain no-repeat;
}
.post-body .ico-memo { --article-icon: url("/assets/icons/hk-memo.svg"); }
.post-body .ico-idea { --article-icon: url("/assets/icons/hk-idea.svg"); }
.post-body .ico-pin { --article-icon: url("/assets/icons/hk-pin.svg"); }
.post-body .ico-doc { --article-icon: url("/assets/icons/hk-doc.svg"); }
.post-body .ico-down { --article-icon: url("/assets/icons/hk-down.svg"); }
.post-body .ico-right { --article-icon: url("/assets/icons/hk-right.svg"); }

/* 料金ページの比較表 */
.hk-doc .hk-compare-wrap { max-width: 52em; margin: 2.3em 0 0; }
.hk-doc .hk-compare-wrap > h3 { margin: 0 0 .75em; color: var(--navy); font-family: var(--mi); font-size: 1.15rem; }
.hk-doc .hk-compare-wrap .hk-scroll { margin: 0; border: 1px solid var(--rule); }
.hk-doc .hk-compare { width: 100%; min-width: 680px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hk-doc .hk-compare th,
.hk-doc .hk-compare td { padding: 13px 15px; border: 0; border-bottom: 1px solid var(--rule); vertical-align: top; font-size: .9rem; line-height: 1.65; }
.hk-doc .hk-compare thead th { color: #fff; background: var(--navy); font-size: .86rem; font-weight: 600; text-align: center; vertical-align: middle; }
.hk-doc .hk-compare thead th:first-child { width: 26%; min-width: 9.5em; }
.hk-doc .hk-compare tbody th { width: 26%; color: var(--ink); background: #f5f4f1; font-weight: 600; }
.hk-doc .hk-compare tbody td { width: 37%; color: var(--ink); }
.hk-doc .hk-compare tbody tr:last-child > * { border-bottom: 0; }
.hk-doc .hk-compare small { display: block; margin-top: .25em; color: var(--sub); font-size: .8em; font-weight: 400; line-height: 1.5; }
.hk-doc .hk-compare thead small { color: rgba(255,255,255,.8); }
.hk-doc .hk-compare-wrap .hint { margin: .55em .8em .7em; }

/* トップ：新着コラムを一覧の調子にそろえ、節のリズムを整える。 */
.card-list .card-thumb { background: var(--blue-pale); }
body #hk-top { --gap: clamp(52px, 6vw, 82px); }
body #hk-top #hk-mitoshi,
body #hk-top #hk-office,
body #hk-top #hk-news,
body #hk-top #hk-access { background: #fff; }
body #hk-top #hk-columns { background: var(--bg); }
body #hk-top #hk-columns .card-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: none; }
body #hk-top #hk-columns .card { min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--rule); box-shadow: 0 3px 10px rgba(16, 37, 72, .06); }
body #hk-top #hk-columns .card-thumb { display: block; overflow: hidden; background: var(--blue-pale); }
body #hk-top #hk-columns .card-thumb img { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; }
body #hk-top #hk-columns .card-body { padding: 15px 16px 17px; }
body #hk-top #hk-columns .card-cat { display: inline-block; margin-bottom: 7px; color: var(--navy); font-size: 12px; font-weight: 700; }
body #hk-top #hk-columns .card-body time { display: block; margin-bottom: 7px; color: var(--sub); font-size: 12px; }
body #hk-top #hk-columns .card-title { color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.65; }
body #hk-top #hk-columns .hk-more { max-width: none; margin: 1.5em 0 0; text-align: right; }

@media (max-width: 800px) {
  .header-main > .site-name,
  .header-main > .nav-toggle { order: 1; }
  .header-main > .site-nav { order: 5; }
  .header-main > div.google-auto-placed { order: 10; }
  .post-body > h2 { grid-template-columns: auto minmax(0, 1fr); gap: .5em; margin-top: 2.55em; padding-bottom: .48em; }
  .post-body > h2:not(:first-of-type) { padding-top: 1.3em; }
  .post-body blockquote.is-conclusion { padding: 1.1em 1.15em; }
  .post-body blockquote.is-notice { padding: 1em 1.05em 1em 2.8em; }
  .post-body blockquote.is-notice::before { top: 1em; left: .9em; }
  .post-body aside.read-also > a { grid-template-columns: 106px minmax(0, 1fr); gap: 10px; min-height: 76px; padding: 8px; }
  .post-body .read-also img { width: 106px; height: 60px; }
  .post-body .read-also-label { font-size: 11px; }
  .post-body .read-also-title { font-size: 14px; }
  body #hk-top #hk-columns .card-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

@media (max-width: 600px) {
  .hk-doc .hk-compare-wrap { margin-top: 2em; }
  .hk-doc .hk-compare th,
  .hk-doc .hk-compare td { padding: 11px 12px; }
  .hk-doc .hk-compare {
    min-width: 0;
    table-layout: fixed;
  }
  .hk-doc .hk-compare th,
  .hk-doc .hk-compare td {
    padding: 8px 6px;
    font-size: .72rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
  }
  .hk-doc .hk-compare thead th { font-size: .68rem; }
  .hk-doc .hk-compare thead th:first-child,
  .hk-doc .hk-compare tbody th { width: 23%; min-width: 0; }
  .hk-doc .hk-compare tbody td { width: 38.5%; }
  .hk-doc .hk-compare-wrap .hint { display: none; }
  .hk-doc .hk-scroll { position: relative; }
  .hk-doc .hk-scroll .hk-compare th:first-child,
  .hk-doc .hk-scroll .hk-tblx th:first-child {
    position: sticky;
    z-index: 1;
    left: 0;
    box-shadow: 2px 0 4px rgba(27, 58, 110, .13);
  }
  .hk-doc .hk-scroll .hk-compare thead th:first-child { background: var(--navy); }
  .hk-doc .hk-scroll .hk-compare tbody th:first-child { background: #f5f4f1; }
  .hk-doc .hk-scroll .hk-tblx thead th:first-child { background: #fff; }
  .hk-doc .hk-scroll .hk-tblx tbody th:first-child { background: #fff; }
}

@media (max-width: 440px) {
  .post-body > h2 { grid-template-columns: auto minmax(0, 1fr); font-size: 20px; letter-spacing: .02em; }
  body #hk-top #hk-columns .card-list { grid-template-columns: 1fr; }
  body #hk-top #hk-columns .card { display: grid; grid-template-columns: 42% 1fr; }
  body #hk-top #hk-columns .card-thumb img { height: 100%; min-height: 128px; aspect-ratio: auto; }
}

@media print {
  .post-body > h2 { display: block; padding: 0 0 .25em; color: #000; background: none; border-color: #000; }
  .post-body > h2::before { display: inline; margin-right: .6em; color: #000; }
  .post-body > h2:not(:first-of-type) { padding-top: 0; background: none; border-top: 0; }
  .post-body blockquote.is-law::before { color: #000; }
}