/* SG Site Kit 0.4.2 */
:root {
  --sgk-green: var(--wp--preset--color--sg-green, #37a641);
  --sgk-green-dark: var(--wp--preset--color--sg-green-dark, #2a7f32);
  --sgk-ink: var(--wp--preset--color--sg-ink, #101a13);
  --sgk-gray: var(--wp--preset--color--sg-gray, #3d4c43);
  --sgk-tint: var(--wp--preset--color--sg-tint, #f3f6f2);
  --sgk-pale: var(--wp--preset--color--sg-pale, #e4ece5);
  --sgk-line: var(--wp--preset--color--sg-line, #dfe6dc);
  --sgk-white: var(--wp--preset--color--sg-white, #ffffff);
}

/* ---------- 追加ボタン ---------- */
.sgk-add {
  display: inline-flex; align-items: center; gap: .5em;
  min-height: 40px; padding: .45em 1.1em .45em .9em;
  border: 1px solid var(--sgk-ink); border-radius: 999px;
  background: var(--sgk-white); color: var(--sgk-ink);
  font: inherit; font-size: .9375rem; font-weight: 600; line-height: 1.3;
  cursor: pointer; white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s;
}
.sgk-add:hover { background: var(--sgk-tint); }
.sgk-add:focus-visible, .sgk-btn:focus-visible, .sgk-remove:focus-visible, .sgk-dock__link:focus-visible, .sgk-video-toggle:focus-visible, .sgk-share__input:focus-visible,
.sgk-chip:focus-visible, .sgk-gl__search input:focus-visible, .sgk-gl__index a:focus-visible,
.sgk-clear:focus-visible, .sgk-sound:focus-visible, .sgk-quiz__opt:focus-visible, .sgk-quiz__retry:focus-visible, .sgk-next__close:focus-visible, .sgk-next a:focus-visible {
  outline: 3px solid var(--sgk-green); outline-offset: 2px;
}
.sgk-add__mark { position: relative; width: 14px; height: 14px; flex: none; }
.sgk-add__mark::before, .sgk-add__mark::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; border-radius: 1px;
  transform: translate(-50%, -50%);
}
.sgk-add__mark::before { width: 14px; height: 2px; }
.sgk-add__mark::after { width: 2px; height: 14px; }
.sgk-add.is-on { background: var(--sgk-green-dark); border-color: var(--sgk-green-dark); color: var(--sgk-white); }
.sgk-add.is-on:hover { background: var(--sgk-ink); border-color: var(--sgk-ink); }
.sgk-add.is-on .sgk-add__mark::before { width: 7px; height: 2px; transform: translate(-95%, 60%) rotate(45deg); }
.sgk-add.is-on .sgk-add__mark::after { width: 2px; height: 13px; transform: translate(80%, -50%) rotate(45deg); }
.sgk-add--small { min-height: 34px; font-size: .8125rem; padding: .3em .9em .3em .75em; }
/* 0.5.30：保存済みのとき、状態（追加済み）の後ろに、次の操作（外す）を区切って出す */
.sgk-add__act { display: inline-block; margin-left: .3em; padding-left: .55em; border-left: 1px solid currentColor; }

/* ---------- 画面の右下に出る部品 ---------- */
.sgk-dock {
  position: fixed; z-index: 60;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
  max-width: calc(100vw - 32px);
}
.sgk-dock .sgk-add { box-shadow: 0 2px 10px rgba(16, 26, 19, .16); }
.sgk-dock__link {
  display: inline-flex; align-items: center; gap: .55em;
  min-height: 40px; padding: .45em .7em .45em 1.1em; border-radius: 999px;
  background: var(--sgk-ink); color: var(--sgk-white) !important;
  font-size: .9375rem; font-weight: 600; line-height: 1.3; text-decoration: none !important;
  box-shadow: 0 2px 10px rgba(16, 26, 19, .22);
}
.sgk-dock__link:hover { background: var(--sgk-green-dark); }
.sgk-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.75em; height: 1.75em; padding: 0 .45em; border-radius: 999px;
  background: var(--sgk-green); color: var(--sgk-ink); font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.sgk-count.is-empty { background: rgba(255, 255, 255, .22); color: var(--sgk-white); }
/* 種類ごとの件数（製品、コラム、用語）。幅 601px 以上では右下にも出す。スマートフォンの幅では、合計だけ（1行に収まらないため） */
.sgk-split { display: none; }
@media (min-width: 601px) {
  .sgk-split:not([hidden]) { display: inline-flex; align-items: center; gap: .75em; font-size: .75rem; font-weight: 600; white-space: nowrap; }
  .sgk-split__i { display: inline-flex; align-items: baseline; gap: .3em; color: rgba(255, 255, 255, .82); }
  .sgk-split__i b { color: var(--sgk-white); font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
  .sgk-dock__link.has-split .sgk-count { display: none; } /* 分けた数を出しているときは、合計の丸を出さない */
}

.sgk-toast {
  position: fixed; z-index: 70; left: 50%; bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 12px); max-width: calc(100vw - 32px);
  padding: .7em 1.2em; border-radius: 10px; background: var(--sgk-ink); color: var(--sgk-white);
  font-size: .9375rem; line-height: 1.5; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.sgk-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- リストのページ ---------- */
.sgk-mylist { display: grid; gap: 2rem; }
.sgk-note { margin: 0; color: var(--sgk-gray); font-size: .875rem; line-height: 1.8; }
.sgk-empty, .sgk-shared { padding: 1.75rem; border-radius: 16px; background: var(--sgk-tint); display: grid; gap: .75rem; }
.sgk-empty p, .sgk-shared p { margin: 0; line-height: 1.9; }
.sgk-empty__lead, .sgk-shared__label { font-size: 1.25rem; font-weight: 700; }
.sgk-shared__label { color: var(--sgk-green-dark); font-size: 1rem; }

.sgk-panel { padding: 1.75rem; border-radius: 16px; background: var(--sgk-tint); display: grid; gap: 1.25rem; }
.sgk-panel__count { margin: 0; font-size: 1.25rem; font-weight: 700; }
/* すべて外す：主な操作から離して、件数の行の右に、目立たない文字のボタンで置く */
.sgk-panel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1.5rem; }
.sgk-clear { appearance: none; -webkit-appearance: none; border: 0; background: none; min-height: 40px; padding: .4em .25em; font: inherit; font-size: .875rem; font-weight: 600; color: var(--sgk-gray); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; border-radius: 6px; }
.sgk-clear:hover { color: var(--sgk-ink); }
.sgk-undo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding: 1rem 1.25rem 1rem 1.75rem; border-radius: 16px; border: 1px solid var(--sgk-line); background: var(--sgk-white); }
.sgk-undo__text { margin: 0; font-weight: 600; }
#sgk-mylist.is-clearing > * { opacity: 0; transition: opacity .18s ease; }
.sgk-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.sgk-stats__i { display: inline-flex; align-items: baseline; gap: .5em; padding: .4em .9em; border-radius: 999px; background: var(--sgk-white); border: 1px solid var(--sgk-line); font-size: .875rem; line-height: 1.4; }
.sgk-stats__l { color: var(--sgk-gray); font-weight: 600; }
.sgk-stats__n { color: var(--sgk-ink); font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sgk-panel__buttons { display: flex; flex-wrap: wrap; gap: .625rem; }
.sgk-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .55em 1.35em; border: 1px solid var(--sgk-green-dark); border-radius: 999px;
  background: var(--sgk-green-dark); color: var(--sgk-white) !important;
  font: inherit; font-size: .9375rem; font-weight: 600; line-height: 1.3; text-decoration: none !important; cursor: pointer;
}
.sgk-btn:hover { background: var(--sgk-ink); border-color: var(--sgk-ink); }
.sgk-btn:disabled { opacity: .6; cursor: progress; }
.sgk-btn--ghost { background: transparent; border-color: var(--sgk-ink); color: var(--sgk-ink) !important; }
.sgk-btn--ghost:hover { background: var(--sgk-ink); color: var(--sgk-white) !important; }

.sgk-share { display: grid; gap: .5rem; padding-top: 1.25rem; border-top: 1px solid var(--sgk-line); }
.sgk-share__label { font-size: .875rem; font-weight: 700; }
.sgk-share__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.sgk-share__input {
  flex: 1 1 16rem; min-width: 0; min-height: 44px; padding: .5em .9em;
  border: 1px solid var(--sgk-line); border-radius: 10px; background: var(--sgk-white); color: var(--sgk-ink);
  font: inherit; font-size: .875rem;
}

.sgk-filebox { padding: 1.25rem 1.75rem; border: 1px solid var(--sgk-line); border-radius: 16px; }
.sgk-filebox__label { margin: 0 0 .5rem; font-size: .875rem; font-weight: 700; color: var(--sgk-green-dark); }
.sgk-files { margin: 0; padding-left: 1.2em; line-height: 2; }

.sgk-group { display: grid; gap: .5rem; }
.sgk-group__title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--sgk-green-dark); }
.sgk-items { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sgk-line); }
.sgk-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--sgk-line); }
/* 外すとき：押したカードだけを、静かに畳む（一覧の全体は描き直さない） */
.sgk-item.is-leaving { overflow: hidden; opacity: 0; padding-top: 0; padding-bottom: 0; pointer-events: none; transition: height .22s ease, padding .22s ease, opacity .14s ease; }
.sgk-item__body { min-width: 0; display: grid; gap: .3rem; }
.sgk-item__kind { margin: 0; font-size: .75rem; font-weight: 700; color: var(--sgk-gray); letter-spacing: .04em; }
.sgk-item__title { margin: 0; font-size: 1.125rem; line-height: 1.5; }
.sgk-item__title a { color: var(--sgk-ink); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.sgk-item__title a:hover { color: var(--sgk-green-dark); }
.sgk-item__summary, .sgk-item__files { margin: 0; color: var(--sgk-gray); font-size: .9375rem; line-height: 1.8; }
.sgk-item__files { font-size: .8125rem; }
.sgk-item__action { flex: none; }
.sgk-remove {
  position: relative; display: block; width: 40px; height: 40px; padding: 0; margin: -6px -8px 0 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--sgk-gray); cursor: pointer;
  transition: background-color .15s, color .15s;
}
.sgk-remove:hover { background: var(--sgk-tint); color: var(--sgk-ink); }
.sgk-remove__icon { position: absolute; inset: 0; }
.sgk-remove__icon::before, .sgk-remove__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; border-radius: 1px; background: currentColor;
}
.sgk-remove__icon::before { transform: translate(-50%, -50%) rotate(45deg); }
.sgk-remove__icon::after { transform: translate(-50%, -50%) rotate(-45deg); }

.sgk-reader:empty { display: none; }
.sgk-reader { display: grid; gap: 2.5rem; padding-top: 2rem; border-top: 2px solid var(--sgk-ink); }
.sgk-reader__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; }
.sgk-reader__count { margin: 0 auto 0 0; font-weight: 700; }
.sgk-reader__article { max-width: 46rem; }
.sgk-reader__title { margin: 0 0 .5rem; }
.sgk-reader__meta { margin: 0 0 1.5rem; color: var(--sgk-gray); font-size: .8125rem; }
.sgk-reader__content > .alignfull, .sgk-reader__content > .alignwide { margin-left: 0 !important; margin-right: 0 !important; max-width: 100%; }
.sgk-reader__content .sgk-add { display: none; }

.sgk-updated { color: var(--sgk-gray); font-size: .8125rem; }

/* ---------- 背景動画の一時停止 ---------- */
.sgk-video-toggle {
  position: absolute; z-index: 3; left: 32px; bottom: 14px;
  display: inline-flex; align-items: center; gap: .5em;
  min-height: 32px; padding: .2em .9em .2em .75em; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px;
  background: rgba(11, 26, 16, .55); color: #fff; font: inherit; font-size: .75rem; font-weight: 600; line-height: 1.2; cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.sgk-video-toggle:hover { background: rgba(11, 26, 16, .85); }
.sgk-video-toggle__icon { position: relative; width: 10px; height: 10px; flex: none; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.sgk-video-toggle.is-paused .sgk-video-toggle__icon { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 9px solid currentColor; border-right: 0; }

/* ---------- 音のボタン ---------- */
.sgk-sound {
  position: relative; flex: none; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--sgk-line); border-radius: 50%;
  background: var(--sgk-white); color: var(--sgk-ink); cursor: pointer;
  box-shadow: 0 2px 10px rgba(16, 26, 19, .16);
}
.sgk-sound[hidden] { display: none; }
.sgk-sound:hover { background: var(--sgk-tint); }
.sgk-sound.is-off { color: var(--sgk-gray); }
.sgk-sound__icon {
  position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4z'/%3E%3Cpath d='M16 8.5a5 5 0 0 1 0 7M18.6 6a8.5 8.5 0 0 1 0 12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4z'/%3E%3Cpath d='M16 8.5a5 5 0 0 1 0 7M18.6 6a8.5 8.5 0 0 1 0 12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sgk-sound.is-off .sgk-sound__icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4z'/%3E%3Cpath d='M17 9.5l5 5M22 9.5l-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4z'/%3E%3Cpath d='M17 9.5l5 5M22 9.5l-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- 次に読むページ ---------- */
.sgk-next {
  position: fixed; z-index: 65;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  width: min(320px, calc(100vw - 32px)); box-sizing: border-box;
  padding: 1rem 2.75rem 1.125rem 1.125rem; border: 1px solid var(--sgk-line); border-radius: 14px;
  background: var(--sgk-white); color: var(--sgk-ink);
  box-shadow: 0 8px 28px rgba(16, 26, 19, .18);
}
.sgk-next[hidden] { display: none; }
.sgk-next p { margin: 0; }
.sgk-next .sgk-next__done { margin-bottom: .7rem; font-size: .875rem; font-weight: 700; line-height: 1.5; color: var(--sgk-green-dark); }
.sgk-next .sgk-next__label { margin-bottom: .3rem; font-size: .75rem; font-weight: 700; line-height: 1.5; color: var(--sgk-gray); }
.sgk-next__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.sgk-next__list a { color: var(--sgk-ink); font-size: .9375rem; font-weight: 600; line-height: 1.5; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sgk-next__list a:hover { color: var(--sgk-green-dark); }
.sgk-next__close { position: absolute; top: 4px; right: 4px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sgk-gray); cursor: pointer; }
.sgk-next__close:hover { background: var(--sgk-tint); color: var(--sgk-ink); }

/* ---------- 読んだ印、読み進みの線、進み具合 ---------- */
.sgk-read-badge {
  display: inline-flex; align-items: center; gap: .35em; margin-left: .75em; padding: .1em .65em .1em .55em;
  border-radius: 999px; background: var(--sgk-pale); color: var(--sgk-green-dark);
  font-size: .75rem; font-weight: 700; line-height: 1.6; vertical-align: middle; white-space: nowrap;
}
.sgk-read-badge::before {
  content: ""; width: .5em; height: .28em; margin-top: -.15em;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}
.sg-post-meta .sgk-read-badge { margin-left: 0; color: var(--sgk-green-dark); font-size: .75rem; }
.sgk-progress { position: fixed; z-index: 80; left: 0; right: 0; top: 0; height: 3px; pointer-events: none; }
.admin-bar .sgk-progress { top: 32px; }
@media (max-width: 782px) { .admin-bar .sgk-progress { top: 46px; } }
.sgk-progress__bar { display: block; height: 100%; background: var(--sgk-green); transform-origin: 0 50%; transform: scaleX(0); transition: transform .12s linear; }
.sgk-readsum { display: grid; gap: .5rem; max-width: 22rem; margin: 0 0 2rem; }
.sgk-readsum .sgk-readsum__text { margin: 0; font-size: .875rem; font-weight: 700; line-height: 1.5; color: var(--sgk-gray); }
.sgk-readsum__track { height: 6px; border-radius: 999px; background: var(--sgk-pale); overflow: hidden; }
.sgk-readsum__fill { display: block; height: 100%; border-radius: 999px; background: var(--sgk-green); transform-origin: 0 50%; }

/* ---------- 確かめる問い ---------- */
.sgk-quiz {
  display: grid; gap: 1.5rem; margin-top: 4rem !important; padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: 16px; background: var(--sgk-tint); color: var(--sgk-ink);
}
.sgk-quiz .sgk-quiz__title { margin: 0; padding: 0; border: 0; font-size: 1.375rem; line-height: 1.4; }
.sgk-quiz .sgk-quiz__lead { margin: 0; color: var(--sgk-gray); font-size: .9375rem; line-height: 1.8; }
.sgk-quiz__q { display: grid; gap: .875rem; padding-top: 1.5rem; border-top: 1px solid var(--sgk-line); }
.sgk-quiz .sgk-quiz__text { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.7; }
.sgk-quiz__no { display: block; margin-bottom: .15rem; color: var(--sgk-green-dark); font-size: .75rem; }
.sgk-quiz__options { display: grid; gap: .5rem; }
.sgk-quiz__opt {
  display: flex; align-items: center; gap: .75em; width: 100%; min-height: 48px; padding: .7em 1em;
  border: 1px solid #c5cfc7; border-radius: 12px; background: var(--sgk-white); color: var(--sgk-ink);
  font: inherit; font-size: 1rem; font-weight: 400; line-height: 1.6; text-align: left; cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.sgk-quiz__opt::before {
  content: ""; flex: none; display: grid; place-items: center; box-sizing: border-box; width: 1.375em; height: 1.375em;
  border: 1.5px solid #9aa89d; border-radius: 50%; font-size: .875em; font-weight: 700; line-height: 1;
}
.sgk-quiz__opt:hover:not([aria-disabled]) { border-color: var(--sgk-ink); }
.sgk-quiz__opt[aria-disabled] { cursor: default; }
.sgk-quiz__opt.is-correct { border-color: var(--sgk-green-dark); background: #eef6ee; }
.sgk-quiz__opt.is-correct::before { content: "\2713"; border-color: var(--sgk-green-dark); background: var(--sgk-green-dark); color: #fff; }
.sgk-quiz__opt.is-wrong { border-color: #b4600f; background: #fbf3e8; }
.sgk-quiz__opt.is-wrong::before { content: "\2715"; border-color: #b4600f; color: #b4600f; }
.sgk-quiz .sgk-quiz__fb { margin: 0; color: var(--sgk-gray); font-size: .9375rem; line-height: 1.85; }
.sgk-quiz .sgk-quiz__fb[hidden] { display: none; }
.sgk-quiz__verdict { display: block; color: var(--sgk-ink); }
.sgk-quiz .sgk-quiz__sum { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin: 0; padding-top: 1.5rem; border-top: 1px solid var(--sgk-line); font-size: 1rem; font-weight: 700; line-height: 1.6; }
.sgk-quiz .sgk-quiz__sum:empty { display: none; }
.sgk-quiz__retry {
  min-height: 36px; padding: .3em 1em; border: 1px solid var(--sgk-ink); border-radius: 999px;
  background: transparent; color: var(--sgk-ink); font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer;
}
.sgk-quiz__retry:hover { background: var(--sgk-white); }

/* ---------- 小さな動き（「動きを減らす」設定の端末では出さない） ---------- */
@keyframes sgk-bump { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes sgk-pop { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes sgk-press { 0% { transform: scale(1); } 40% { transform: scale(.985); } 100% { transform: scale(1); } }
@keyframes sgk-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .sgk-add__mark::before, .sgk-add__mark::after { transition: transform .24s cubic-bezier(.2, .8, .2, 1), width .24s, height .24s; }
  .sgk-count.is-bump, .sgk-read-badge.is-bump { animation: sgk-bump .34s cubic-bezier(.2, .8, .2, 1); }
  .sgk-add.is-bump { animation: sgk-pop .3s cubic-bezier(.2, .8, .2, 1); }
  .sgk-quiz__opt.is-bump { animation: sgk-press .26s ease-out; }
  .sgk-next:not([hidden]), .sgk-quiz__fb:not([hidden]) { animation: sgk-rise .24s ease-out; }
}

@media (max-width: 600px) {
  .sgk-dock .sgk-add__text { font-size: .8125rem; }
  .sgk-dock .sgk-add, .sgk-dock__link { min-height: 38px; }
  .sgk-dock .sgk-add__long { display: none; }
  .sgk-sound { width: 38px; height: 38px; }
  .sgk-next { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  .sgk-item--shared { flex-direction: column; gap: .75rem; }
  .sgk-panel, .sgk-empty, .sgk-shared { padding: 1.25rem; }
  .sgk-video-toggle { left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .sgk-add, .sgk-toast, .sgk-remove, .sgk-quiz__opt, .sgk-progress__bar, .sgk-chip { transition: none; }
  /* 0.4.0 で足した部品（遷移と動きは、ファイルの終わりで「動きを減らさない設定」のときだけ付けている。ここでも止める） */
  .sgk-gp, .sgk-gp__close, .sgk-fb__btn, .sgk-fb__reason, .sgk-share__btn, .sgk-termchip, .sgk-nextcols__link, .sgk-fb__more, .sgk-consult__btn { transition: none; animation: none; }
  .sgk-video-toggle { display: none; } /* 動きを減らす設定の端末では、動画そのものを出していない */
}

@media print {
  .sgk-dock, .sgk-toast, .sgk-video-toggle, .sgk-reader__bar, .sgk-next, .sgk-progress, .sgk-quiz__retry { display: none !important; }
  body.sgk-reading .wp-site-blocks > header,
  body.sgk-reading .wp-site-blocks > footer,
  body.sgk-reading .sgk-page-head,
  body.sgk-reading .sgk-panel,
  body.sgk-reading .sgk-filebox,
  body.sgk-reading .sgk-group,
  body.sgk-reading .sgk-shared,
  body.sgk-reading .sgk-mylist > .sgk-note { display: none !important; }
  body.sgk-reading .sgk-reader { border-top: 0; padding-top: 0; }
  body.sgk-reading .sgk-reader__article { break-inside: auto; page-break-after: always; max-width: none; }
}

/* ---------- 用語集：一覧 ---------- */
.sgk-gl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.sgk-gl__tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: .875rem; padding: 1.5rem 1.75rem; border-radius: 16px; background: var(--sgk-tint); }
.sgk-gl__searchrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1.5rem; }
.sgk-gl__search { flex: 1 1 22rem; max-width: 44rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .375rem; min-width: 0; }
.sgk-gl__search label, .sgk-gl__flabel { font-size: .875rem; font-weight: 700; color: var(--sgk-ink); }
.sgk-gl__search input {
  width: 100%; min-height: 54px; padding: .5em 1em .5em 2.9em; box-sizing: border-box;
  border: 2px solid var(--sgk-ink); border-radius: 12px; color: var(--sgk-ink);
  background: var(--sgk-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%230B1A10' stroke-width='4' stroke-linecap='round'%3E%3Ccircle cx='21' cy='21' r='13'/%3E%3Cpath d='M31 31L42 42'/%3E%3C/svg%3E") no-repeat .95em 50% / 1.3em 1.3em;
  font: inherit; font-size: 1.0625rem;
}
.sgk-gl__search input:focus-visible { outline: 3px solid var(--sgk-green); outline-offset: 2px; }
.sgk-gl__searchrow .sgk-gl__count { padding-bottom: .75rem; }
.sgk-gl__filter { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sgk-gl__flabel { min-width: 3em; }
.sgk-gl__maplink { margin: 0; font-size: .9375rem; font-weight: 600; }
.sgk-gl__maplink a { color: var(--sgk-green-dark); text-underline-offset: 4px; }
.sgk-gl__maplink a::after { content: " ›"; }
.sgk-gl__more { border-top: 1px solid var(--sgk-line); padding-top: .75rem; }
.sgk-gl__more summary { cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--sgk-gray); min-height: 32px; display: flex; align-items: center; gap: .5em; list-style: none; }
.sgk-gl__more summary::-webkit-details-marker { display: none; }
.sgk-gl__more summary::before { content: "＋"; font-weight: 700; color: var(--sgk-ink); }
.sgk-gl__more[open] summary::before { content: "－"; }
.sgk-gl__more summary:focus-visible { outline: 3px solid var(--sgk-green); outline-offset: 2px; border-radius: 6px; }
.sgk-gl__morebody { display: grid; gap: .75rem; padding-top: .75rem; }
.sgk-gl__morebody .sgk-note { margin: 0; }
@media (max-width: 640px) {
  .sgk-gl__tools { padding: 1.125rem 1rem; }
  .sgk-gl__filter { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .375rem; scrollbar-width: thin; }
  .sgk-gl__filter .sgk-chip { flex: none; }
  .sgk-gl__flabel { flex: none; position: sticky; left: 0; padding-right: .5rem; background: var(--sgk-tint); align-self: stretch; display: flex; align-items: center; }
  .sgk-gl__searchrow .sgk-gl__count { padding-bottom: 0; }
  .sgk-gl__index ul { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .375rem; scrollbar-width: thin; }
  .sgk-gl__index li { flex: none; }
}
.sgk-chip {
  min-height: 40px; padding: .35em 1em; border: 1px solid var(--sgk-ink); border-radius: 999px;
  background: var(--sgk-white); color: var(--sgk-ink);
  font: inherit; font-size: .875rem; font-weight: 600; line-height: 1.3; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.sgk-chip:hover { background: var(--sgk-pale); }
.sgk-chip.is-on { background: var(--sgk-ink); color: var(--sgk-white); }
.sgk-gl__count { margin: 0; font-size: 1.125rem; font-weight: 700; }
.sgk-gl__actions { display: flex; flex-wrap: wrap; gap: .625rem; }
.sgk-gl__actions[hidden], .sgk-gl__group[hidden], .sgk-gl__item[hidden], .sgk-gl__none[hidden] { display: none; }
.sgk-btn:disabled { cursor: default; }
.sgk-gl__index ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .375rem; }
.sgk-gl__index a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 .75em; box-sizing: border-box;
  border: 1px solid var(--sgk-line); border-radius: 10px; color: var(--sgk-ink); font-weight: 700; text-decoration: none;
}
.sgk-gl__index a:hover { border-color: var(--sgk-ink); }
.sgk-gl__index a.is-empty { color: #8a968f; pointer-events: none; }
.sgk-gl__group { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; scroll-margin-top: 6rem; }
.sgk-gl__head { margin: 0; padding-bottom: .5rem; border-bottom: 1.5px solid var(--sgk-ink); font-size: 1.25rem; line-height: 1.5; color: var(--sgk-green-dark); }
.sgk-gl__list { list-style: none; margin: 0; padding: 0; }
.sgk-gl__item { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--sgk-line); scroll-margin-top: 6rem; }
.sgk-gl__body { min-width: 0; display: grid; gap: .375rem; }
.sgk-gl__term { margin: 0; font-size: 1.125rem; line-height: 1.5; display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .75rem; }
.sgk-gl__term a { color: var(--sgk-ink); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.sgk-gl__term a:hover { color: var(--sgk-green-dark); }
.sgk-gl__en { font-size: .8125rem; font-weight: 400; color: var(--sgk-gray); }
.sgk-gl__def { margin: 0; color: var(--sgk-gray); font-size: .9375rem; line-height: 1.8; }
.sgk-gl__tags { margin: 0; display: flex; flex-wrap: wrap; gap: .375rem; }
.sgk-gl__tags span { font-size: .75rem; line-height: 1.6; padding: .1em .7em; border-radius: 999px; background: var(--sgk-pale); color: var(--sgk-ink); }
.sgk-gl__action { flex: none; }
.sgk-gl__none { margin: 0; padding: 1.5rem; border-radius: 16px; background: var(--sgk-tint); line-height: 1.8; }

/* ---------- 用語集：1語のページ ---------- */
.sgk-term__def { font-size: 1.1875rem; font-weight: 600; line-height: 1.9; }
.sgk-term__facts { margin: 2rem 0 0; border-top: 1px solid var(--sgk-line); }
.sgk-term__facts > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--sgk-line); }
.sgk-term__facts dt { font-size: .9375rem; font-weight: 700; }
.sgk-term__facts dd { margin: 0; }
.sgk-term__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.sgk-term__back { font-size: .9375rem; font-weight: 600; }
.sgk-term__sources a, .sgk-term__pages a, .sgk-term__related a { word-break: break-word; }

@media (max-width: 600px) {
  .sgk-gl__tools { padding: 1.25rem; }
  .sgk-gl__item { gap: .75rem; }
  .sgk-term__facts > div { grid-template-columns: 6.5em minmax(0, 1fr); }
}
@media print {
  .sgk-gl__tools, .sgk-gl__index, .sgk-gl__action, .sgk-term__actions { display: none !important; }
}


/* ---------- 本文から用語集へのリンク ---------- */
a.sg-glink, .sg-article a.sg-glink {
  color: inherit;
  text-decoration: underline dotted var(--sgk-green-dark);
  text-decoration-thickness: 1.5px;
  text-underline-offset: .3em;
}
a.sg-glink:hover, a.sg-glink:focus-visible, .sg-article a.sg-glink:hover, .sg-article a.sg-glink:focus-visible {
  color: var(--sgk-green-dark);
  text-decoration-style: solid;
}

/* ---------- 相談のフォーム：「気になる」から引き継いだ欄（引き継いだときだけ出す） ---------- */
.sgk-interest { display: none; }
.sgk-interest.is-on { display: block; }
.sgk-interest textarea { min-height: 9.5rem; font-size: .9375rem; line-height: 1.7; }
.sgk-clear__row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: .6rem; }
.sgk-clear { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem 1rem .45rem .75rem; border: 2px solid #13201A; border-radius: 999px; background: #FFD84D; color: #13201A; font: inherit; font-size: .875rem; font-weight: 700; line-height: 1.2; cursor: pointer; box-shadow: 0 3px 0 #13201A; }
.sgk-clear:hover { background: #FFE27A; }
.sgk-clear:active { transform: translateY(2px); box-shadow: 0 1px 0 #13201A; }
.sgk-clear:focus-visible { outline: 3px solid #1F7A2B; outline-offset: 3px; }
.sgk-clear.is-undo { background: #FFFFFF; }
.sgk-clear__live { font-size: .8125rem; color: #3B4A41; }
@media (prefers-reduced-motion: no-preference) { .sgk-clear svg { transition: transform .2s ease; } .sgk-clear:hover svg { transform: rotate(-12deg); } }

/* ---------- 全体像の図（段階ごとに、略称を並べる。略称は、用語集へのリンク） ---------- */
.sg-map, .sg-map * { box-sizing: border-box; }
.sg-map { position: relative; container-type: inline-size; margin: 0; padding: 1.75rem; border-radius: 16px; background: var(--sgk-tint); color: #0b1a10; }
.sg-map__cap { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.5rem; font-size: 1.0625rem; font-weight: 700; line-height: 1.5; }
.sg-map__tag { flex: none; font-size: .75rem; font-weight: 700; color: var(--sgk-green-dark); border: 1.5px solid var(--sgk-green-dark); border-radius: 999px; padding: .05em .7em; }
.sg-map__flow { position: relative; height: 2px; margin: 0 .5rem 1.25rem; background: #cfdbd2; border-radius: 2px; }
.sg-map__flow::after { content: ""; position: absolute; right: -2px; top: -5px; width: 10px; height: 10px; border-top: 2px solid #0b1a10; border-right: 2px solid #0b1a10; transform: rotate(45deg); }
.sg-map__dot { position: absolute; left: 0; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--sgk-green); opacity: 0; }
.sg-map__stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: .75rem; }
.sg-map__stage { min-width: 0; display: grid; align-content: start; gap: .625rem; }
.sg-map .sg-map__h, .sg-map .sg-map__bh { font-weight: 700; }
.sg-map__h { margin: 0; display: flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 700; line-height: 1.4; min-height: 2.8em; }
.sg-map__n { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid #0b1a10; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .8125rem; }
.sg-map__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.sg-map__chip {
  /* どの箱も、同じ高さにそろえる（説明が2行になる箱に合わせる） */
  display: flex; align-items: center; gap: .625rem; min-height: 5.25rem; padding: .5rem .75rem;
  border: 2px solid #0b1a10; border-radius: 12px; background: #fff; color: #0b1a10 !important; text-decoration: none !important;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.sg-map__chip b { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; letter-spacing: .01em; }
.sg-map__tx { min-width: 0; display: grid; gap: .1rem; }
.sg-map__tx span { font-size: .75rem; line-height: 1.45; color: var(--sgk-gray); }
/* システムごとの絵 */
.sg-map__ico { flex: none; width: 2.375rem; height: 2.375rem; border-radius: 10px; background: var(--sgk-pale); color: var(--sgk-green-dark); display: grid; place-items: center; transition: background-color .18s ease, color .18s ease, transform .2s cubic-bezier(.2, .8, .2, 1); }
.sg-map__ico svg, .sg-map__pop-ico svg { display: block; width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sg-map__chip:hover .sg-map__ico, .sg-map__chip:focus-visible .sg-map__ico { background: var(--sgk-green); color: #0b1a10; transform: scale(1.07) rotate(-4deg); }
.sg-map__chip:hover, .sg-map__chip:focus-visible { border-color: var(--sgk-green-dark); transform: translateY(-2px); box-shadow: 0 4px 0 var(--sgk-pale); }
.sg-map__chip:focus-visible { outline: 3px solid var(--sgk-green); outline-offset: 2px; }
.sg-map__chip:active { transform: translateY(0); box-shadow: none; }
.sg-map__band { margin: 1.25rem -.875rem 0; padding: 1rem .875rem 1.125rem; border-radius: 12px; background: var(--sgk-pale); display: grid; gap: .625rem; }
.sg-map__bh { margin: 0; font-size: .9375rem; font-weight: 700; }
.sg-map__list--row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem .75rem; } /* 上の段と同じ幅の列に並べる */
/* 重ねたときに出る札（絵、名前、説明の1文） */
.sg-map__pop { position: absolute; z-index: 5; width: min(20rem, calc(100% - 16px)); padding: 1rem 1.125rem 1.125rem; border-radius: 14px; background: #0b1a10; color: #fff; box-shadow: 0 12px 32px rgba(11, 26, 16, .28); pointer-events: none; opacity: 0; transform: translateY(6px) scale(.98); transform-origin: top left; }
.sg-map__pop.is-above { transform: translateY(-6px) scale(.98); transform-origin: bottom left; }
.sg-map__pop.is-on { opacity: 1; transform: none; transition: opacity .16s ease, transform .2s cubic-bezier(.2, .8, .2, 1); }
.sg-map__pop-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .625rem; }
.sg-map__pop-ico { flex: none; width: 3rem; height: 3rem; border-radius: 12px; background: var(--sgk-green); color: #0b1a10; display: grid; place-items: center; }
.sg-map__pop-ico svg { width: 1.875rem; height: 1.875rem; }
.sg-map__pop-ttl { min-width: 0; display: grid; gap: .1rem; }
.sg-map__pop-name { font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.sg-map__pop-full { font-size: .75rem; line-height: 1.45; color: rgba(255, 255, 255, .75); }
.sg-map__pop-tip { margin: 0; font-size: .8125rem; line-height: 1.75; color: rgba(255, 255, 255, .92); }
.sg-map__note { margin: 1.25rem 0 0; font-size: .8125rem; line-height: 1.8; color: var(--sgk-gray); }
@container (max-width: 1180px) {
  .sg-map__stages { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem .75rem; }
  .sg-map__list--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sg-map__flow { display: none; }
}
@container (max-width: 600px) {
  .sg-map__stages { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .sg-map__h { min-height: 0; }
  .sg-map__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-map__list--row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  /* 狭い幅では、絵を上、文字を下に置く。高さは、どの箱も同じ */
  .sg-map__chip { flex-direction: column; align-items: flex-start; justify-content: center; gap: .4rem; min-height: 7.25rem; }
  .sg-map__ico { width: 2rem; height: 2rem; border-radius: 8px; }
  .sg-map__ico svg { width: 1.25rem; height: 1.25rem; }
}
@container (max-width: 380px) { .sg-map__chip { min-height: 8.5rem; } } /* ごく狭い幅では、説明が3行になる箱に合わせる */
@media (max-width: 640px) { .sg-map { padding: 1.25rem 1rem; } }
/* 動き：見える位置に来たら、1回だけ（合わせて 3秒以内）。動きを減らす設定のときは、動かさない。 */
@media (prefers-reduced-motion: no-preference) {
  .sg-map.is-ready .sg-map__chip { opacity: 0; transform: translateY(10px); }
  .sg-map.is-ready.is-in .sg-map__chip { opacity: 1; transform: none; transition: opacity .45s ease, transform .45s ease, border-color .15s ease, box-shadow .15s ease; transition-delay: calc(var(--i, 0) * 45ms); }
  .sg-map.is-ready.is-in .sg-map__chip:hover, .sg-map.is-ready.is-in .sg-map__chip:focus-visible { transform: translateY(-2px); transition-delay: 0s; }
  .sg-map.is-ready.is-in .sg-map__dot { animation: sg-map-run 2.6s ease-in-out .2s 1 both; }
  /* 重ねたとき：絵の線を、引き直す */
  .sg-map__chip:hover .sg-map__ico svg > *, .sg-map__chip:focus-visible .sg-map__ico svg > *, .sg-map__pop.is-on .sg-map__pop-ico svg > * { stroke-dasharray: 1; animation: sg-map-draw .5s ease-out both; }
  @keyframes sg-map-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes sg-map-run { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 12px); opacity: 0; } }
}
@media print { .sg-map .sg-map__chip { opacity: 1 !important; transform: none !important; } .sg-map__pop { display: none !important; } }


/* =====================================================================
   0.4.0 で足した部品（ここから下は、新しいクラスだけ）
   ===================================================================== */

/* ---------- 用語の説明の小さな窓（本文の用語を押したとき） ---------- */
.sgk-gp {
  position: absolute; z-index: 66; box-sizing: border-box;
  width: min(22rem, calc(100vw - 16px)); padding: 1.125rem 3.25rem 1.125rem 1.25rem;
  border: 1px solid var(--sgk-line); border-radius: 16px;
  background: var(--sgk-white); color: var(--sgk-ink);
  box-shadow: 0 6px 20px rgba(16, 26, 19, .12);
  font-size: .9375rem; font-weight: 400; line-height: 1.8; text-align: left;
}
.sgk-gp[hidden] { display: none; }
.sgk-gp:focus { outline: none; }
.sgk-gp:focus-visible, .sgk-gp__close:focus-visible, .sgk-gp__more:focus-visible, .sgk-gp__add:focus-visible { outline: 3px solid var(--sgk-green); outline-offset: 2px; }
.sgk-gp p { margin: 0; }
.sgk-gp .sgk-gp__term { margin-bottom: .375rem; font-size: 1.0625rem; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.sgk-gp .sgk-gp__def, .sgk-gp .sgk-gp__wait { color: var(--sgk-gray); overflow-wrap: anywhere; }
.sgk-gp .sgk-gp__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; margin-top: .75rem; }
.sgk-gp__more { display: inline-flex; align-items: center; min-height: 44px; color: var(--sgk-green-dark); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.sgk-gp__more:hover { color: var(--sgk-ink); }
.sgk-gp__add { min-height: 44px; }
.sgk-gp__close { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sgk-gray); cursor: pointer; }
.sgk-gp__close:hover { background: var(--sgk-tint); color: var(--sgk-ink); }
/* 幅の狭い画面：画面の下に付く形 */
.sgk-gp--sheet {
  position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 70vh; overflow-y: auto;
  padding: 1.25rem 3.5rem calc(1.25rem + env(safe-area-inset-bottom, 0px)) 1.25rem;
  border-width: 1px 0 0; border-radius: 16px 16px 0 0;
  box-shadow: 0 -6px 24px rgba(16, 26, 19, .14);
}

/* ---------- 用語のページ：元のページに戻る ---------- */
.sgk-back { font-size: .9375rem; font-weight: 600; line-height: 1.6; }
.sgk-back a { display: inline-block; padding: .65em 0; color: var(--sgk-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.sgk-back a:hover { color: var(--sgk-green-dark); }
.sgk-back a:focus-visible { outline: 3px solid var(--sgk-green); outline-offset: 2px; border-radius: 4px; }

/* ---------- コラムの目次 ---------- */
.sgk-toc {
  box-sizing: border-box; margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; padding: 1.5rem 1.75rem;
  border-radius: 16px; background: var(--sgk-tint); color: var(--sgk-ink);
}
.sgk-toc .sgk-toc__title { margin: 0 0 .5rem; font-size: 1rem; font-weight: 700; line-height: 1.5; }
.sgk-toc .sgk-toc__list { margin: 0; padding: 0 0 0 1.5em; font-size: .9375rem; line-height: 1.7; }
.sgk-toc__list li { margin: 0; padding: 0; }
.sgk-toc__list a { display: inline-block; padding: .3em 0; color: var(--sgk-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.sgk-toc__list a:hover { color: var(--sgk-green-dark); }
.sgk-toc__list a:focus-visible { outline: 3px solid var(--sgk-green); outline-offset: 2px; border-radius: 4px; }
h2[id^="sgk-h-"] { scroll-margin-top: 5.5rem; }

/* ---------- コラムの終わり：出てきた用語、フィードバック、共有、次に読む ---------- */
.sgk-end {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem;
  margin-top: 4rem !important; padding-top: 2.5rem; border-top: 1.5px solid var(--sgk-ink); color: var(--sgk-ink);
}
.sgk-end > *, .sgk-share__inner > *, .sgk-share[data-sgk-share] > * { min-width: 0; }
.sgk-end .sgk-end__title, .sgk-share .sgk-end__title {
  margin: 0; padding: 0; border: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.5; color: var(--sgk-ink);
}
.sgk-end__terms[hidden], .sgk-fb[hidden], .sgk-fb__more[hidden], .sgk-share__btn[hidden] { display: none; }

/* ボタン（はい・いいえ、理由、共有、用語）：白い面、1px の線、角は丸く、高さ 44px 以上 */
.sgk-fb__btn, .sgk-fb__reason, .sgk-share__btn, .sgk-end .sgk-end__chips a.sgk-termchip {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-height: 44px; max-width: 100%; margin: 0; padding: .5em 1.25em;
  border: 1px solid var(--sgk-ink); border-radius: 999px;
  background: var(--sgk-white); color: var(--sgk-ink) !important;
  font: inherit; font-size: .9375rem; font-weight: 600; line-height: 1.35; text-align: center;
  text-decoration: none !important; cursor: pointer;
}
.sgk-fb__btn:hover:not(:disabled), .sgk-fb__reason:hover:not(:disabled), .sgk-share__btn:hover, .sgk-end .sgk-end__chips a.sgk-termchip:hover { background: var(--sgk-pale); }
.sgk-fb__btn:active:not(:disabled), .sgk-fb__reason:active:not(:disabled), .sgk-share__btn:active, .sgk-end .sgk-end__chips a.sgk-termchip:active,
.sgk-fb__btn[aria-pressed="true"], .sgk-fb__reason[aria-pressed="true"] {
  background: var(--sgk-ink); border-color: var(--sgk-ink); color: var(--sgk-white) !important;
}
.sgk-fb__btn:disabled, .sgk-fb__reason:disabled { cursor: default; }
.sgk-fb__btn:disabled:not([aria-pressed="true"]), .sgk-fb__reason:disabled:not([aria-pressed="true"]) { border-color: var(--sgk-line); color: var(--sgk-gray) !important; }
.sgk-fb__btn:focus-visible, .sgk-fb__reason:focus-visible, .sgk-share__btn:focus-visible, .sgk-termchip:focus-visible,
.sgk-nextcols__link:focus-visible, .sgk-nextcols a:focus-visible, .sgk-fb__contact a:focus-visible {
  outline: 3px solid var(--sgk-green); outline-offset: 2px;
}

/* 出てきた用語 */
.sgk-end__terms { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.sgk-end .sgk-end__lead { margin: 0; color: var(--sgk-gray); font-size: .875rem; line-height: 1.8; }
.sgk-end .sgk-end__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.sgk-end__chips li { margin: 0; padding: 0; max-width: 100%; }
/* 0.4.1：テーマの「li + li」の上の余白が、2つめからの箱だけを下げていた。箱の縦の位置をそろえる。 */
.sgk-end .sgk-end__chips > li, .sgk-share[data-sgk-share] .sgk-share__list > li, .sgk-nextcols .sgk-nextcols__list > li { margin: 0 !important; }
.sgk-end .sgk-end__chips { align-items: center; }

/* フィードバック */
.sgk-fb { display: grid; grid-template-columns: minmax(0, 1fr); gap: .875rem; }
.sgk-fb__votes, .sgk-fb__reasons { display: flex; flex-wrap: wrap; gap: .5rem; }
.sgk-fb__btn { min-width: 6.5rem; }
.sgk-fb .sgk-fb__note { margin: 0; color: var(--sgk-gray); font-size: .8125rem; line-height: 1.8; }
.sgk-fb__more { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; padding: 1.25rem; border-radius: 16px; background: var(--sgk-tint); }
.sgk-fb .sgk-fb__ask { margin: 0; font-size: .9375rem; font-weight: 700; line-height: 1.6; }
.sgk-fb .sgk-fb__contact { margin: 0; font-size: .875rem; line-height: 1.6; }
.sgk-fb__contact a { display: inline-block; padding: .5em 0; color: var(--sgk-ink); text-underline-offset: 4px; }
.sgk-fb .sgk-fb__status { margin: 0; min-height: 1.6em; color: var(--sgk-green-dark); font-size: .9375rem; font-weight: 700; line-height: 1.6; }
.sgk-fb__status:focus, .sgk-fb__more:focus { outline: none; }
.sgk-fb__note-form { display: grid; gap: .5rem; padding-top: .25rem; }
.sgk-fb__note-form[hidden] { display: none; }
.sgk-fb .sgk-fb__note-label { font-size: .9375rem; font-weight: 700; line-height: 1.6; }
.sgk-fb__note-label span { font-weight: 400; color: var(--sgk-gray); font-size: .8125rem; }
.sgk-fb .sgk-fb__note-text { width: 100%; box-sizing: border-box; min-height: 5.5rem; padding: .75rem 1rem; border: 1.5px solid var(--sgk-line); border-radius: 14px; background: #fff; font: inherit; font-size: .9375rem; line-height: 1.7; resize: vertical; }
.sgk-fb .sgk-fb__note-text:focus { outline: 3px solid var(--sgk-green); outline-offset: 1px; border-color: transparent; }
.sgk-fb .sgk-fb__note-help { margin: 0; color: var(--sgk-gray); font-size: .8125rem; line-height: 1.7; }
.sgk-fb .sgk-fb__note-act { margin: 0; display: flex; align-items: center; gap: .75rem; }
.sgk-fb__note-send { padding: .6rem 1.6rem; border: 0; border-radius: 999px; background: #13201A; color: #fff; font: inherit; font-size: .9375rem; font-weight: 700; cursor: pointer; }
.sgk-fb__note-send:hover:not(:disabled) { background: #1F7A2B; }
.sgk-fb__note-send:disabled { opacity: .5; cursor: default; }
.sgk-fb__note-send:focus-visible { outline: 3px solid var(--sgk-green); outline-offset: 2px; }
.sgk-fb__note-count { color: var(--sgk-gray); font-size: .8125rem; }
.sgk-fb__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.sgk-fb .sgk-fb__status.is-thanks { justify-self: start; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem .5rem .5rem; border-radius: 999px; background: #FFF4C7; color: #13201A; }
.sgk-fb__status.is-thanks::before { content: ""; flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #1F7A2B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1rem no-repeat; }

/* 共有（「気になる」のページの .sgk-share とは別の部品。data-sgk-share が付いたものだけに当てる） */
.sgk-share[data-sgk-share] { display: grid; grid-template-columns: minmax(0, 1fr); gap: .875rem; padding-top: 0; border-top: 0; }
/* 用語のページ（本文の終わりに、そのまま置くとき）は、上に線と余白を付ける */
.sgk-share[data-sgk-share]:not(.sgk-share--band) { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--sgk-line); }
.sgk-end .sgk-share[data-sgk-share] { margin-top: 0; padding-top: 0; border-top: 0; }
.sgk-share .sgk-share__list { list-style: none; margin: -.25rem; padding: 0; display: flex; flex-wrap: wrap; }
.sgk-share__list li { margin: 0; padding: 0; max-width: 100%; }
.sgk-share__list .sgk-share__btn { margin: .25rem; } /* あいだは、ボタンの余白で空ける（隠れているボタンの分が、空かないように） */
.sgk-share .screen-reader-text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;
}
/* 全幅の帯（ニュース、製品、課題・業種、導入事例のページの終わり） */
.sgk-share--band[data-sgk-share] {
  display: block; box-sizing: border-box;
  padding: 2.5rem var(--wp--style--root--padding-right, 1.25rem) 2.5rem var(--wp--style--root--padding-left, 1.25rem);
  background: var(--sgk-tint);
}
.sgk-share__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: .875rem; box-sizing: border-box; max-width: 1360px; margin: 0 auto; }

/* 次に読む */
.sgk-nextcols { display: grid; grid-template-columns: minmax(0, 1fr); gap: .875rem; }
.sgk-nextcols .sgk-nextcols__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .625rem; }
.sgk-nextcols__list li { margin: 0; padding: 0; }
.sgk-nextcols__link {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; box-sizing: border-box; min-height: 44px; padding: 1.125rem 1.25rem;
  border: 1px solid transparent; border-radius: 16px; background: var(--sgk-tint);
  color: var(--sgk-ink) !important; text-decoration: none !important;
}
.sgk-nextcols__link:hover { border-color: var(--sgk-ink); }
.sgk-nextcols__name { font-size: 1.0625rem; font-weight: 700; line-height: 1.6; overflow-wrap: anywhere; }
.sgk-nextcols__sum { color: var(--sgk-gray); font-size: .875rem; font-weight: 400; line-height: 1.8; }
.sgk-nextcols .sgk-nextcols__label { margin: .5rem 0 0; color: var(--sgk-green-dark); font-size: .875rem; font-weight: 700; line-height: 1.5; }
.sgk-nextcols .sgk-nextcols__pages { margin: 0; padding-left: 1.2em; line-height: 2; }
.sgk-nextcols__pages a { color: var(--sgk-ink); font-weight: 600; text-underline-offset: 4px; overflow-wrap: anywhere; }
.sgk-nextcols__pages a:hover { color: var(--sgk-green-dark); }
.sgk-nextcols .sgk-nextcols__foot { margin: .5rem 0 0; font-size: .9375rem; font-weight: 600; line-height: 1.6; }
.sgk-nextcols__foot a { display: inline-block; padding: .5em 0; color: var(--sgk-ink); text-underline-offset: 4px; }
.sgk-nextcols__foot a:hover { color: var(--sgk-green-dark); }
.sgk-nextcols__foot [data-sgk-readcount] { display: block; margin-bottom: .25rem; color: var(--sgk-gray); font-size: .875rem; font-weight: 700; }
.sgk-nextcols__foot [data-sgk-readcount]:empty { display: none; }

/* 課題を相談する（コラムの終わり。「次に読む」のあと）：濃い面に白い字。ボタンは、緑の面に濃い字 */
.sgk-consult {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .875rem; box-sizing: border-box; padding: 1.75rem;
  border-radius: 16px; background: var(--sgk-ink); color: var(--sgk-white);
}
.sgk-end .sgk-consult .sgk-end__title { color: var(--sgk-white); }
.sgk-consult .sgk-consult__text { margin: 0; color: var(--sgk-white); font-size: 1rem; line-height: 1.9; }
.sgk-consult .sgk-consult__act { margin: .25rem 0 0; }
.sgk-consult__btn {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-height: 48px; max-width: 100%; padding: .6em 1.6em;
  border: 1px solid var(--sgk-green); border-radius: 999px;
  background: var(--sgk-green); color: var(--sgk-ink) !important;
  font-size: 1rem; font-weight: 700; line-height: 1.4; text-align: center; text-wrap: balance;
  text-decoration: none !important;
}
.sgk-consult__btn:hover, .sgk-consult__btn:active { background: var(--sgk-white); border-color: var(--sgk-white); }
.sgk-consult__btn:focus-visible { outline: 3px solid var(--sgk-white); outline-offset: 3px; }

/* ---------- 外部へのリンク：別のタブで開く印（右上への矢印と四角。絵は、この中に書いてあり、外部のファイルは読み込まない） ---------- */
a.sgk-ext::after, .sgk-share__btn[target="_blank"]::after {
  content: ""; display: inline-block; flex: none; width: .75em; height: .75em; margin-left: .25em; vertical-align: baseline;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M5 2.5H2v7.5h7.5V7M7.5 1.5h3v3M10.5 1.5L6 6' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M5 2.5H2v7.5h7.5V7M7.5 1.5h3v3M10.5 1.5L6 6' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 読み上げ用の文（「別のタブで開きます」）。テーマに決まりがあれば、それに任せる。無いときのための、見えなくする決まり */
.sgk-ext .screen-reader-text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;
}
@media (forced-colors: active) {
  a.sgk-ext::after, .sgk-share__btn[target="_blank"]::after { background-color: LinkText; }
}

@media (max-width: 600px) {
  .sgk-toc { padding: 1.25rem; }
  .sgk-end { gap: 2rem; padding-top: 2rem; }
  .sgk-fb__more { padding: 1rem; }
  .sgk-nextcols__link { padding: 1rem; }
  .sgk-share--band[data-sgk-share] { padding-top: 2rem; padding-bottom: 2rem; }
  .sgk-consult { padding: 1.25rem; }
  .sgk-consult__btn { width: 100%; padding-left: 1em; padding-right: 1em; }
}

/* ---------- 0.4.0 の部品の、小さな動き（動きを減らす設定の端末では、付けない） ---------- */
@media (prefers-reduced-motion: no-preference) {
  .sgk-gp:not([hidden]), .sgk-fb__more:not([hidden]) { animation: sgk-rise .2s ease-out; }
  .sgk-fb__status.is-thanks { animation: sgk-rise .25s ease-out; }
  .sgk-gp__close { transition: background-color .15s, color .15s; }
  .sgk-fb__btn, .sgk-fb__reason, .sgk-share__btn, .sgk-end .sgk-end__chips a.sgk-termchip { transition: background-color .15s, color .15s, border-color .15s; }
  .sgk-nextcols__link { transition: border-color .15s; }
  .sgk-consult__btn { transition: background-color .15s, border-color .15s; }
}

@media print {
  .sgk-gp, .sgk-back, .sgk-fb, .sgk-share[data-sgk-share], .sgk-end__terms, .sgk-consult { display: none !important; }
  a.sgk-ext::after, .sgk-share__btn[target="_blank"]::after { display: none; } /* 印刷では、別のタブで開く印を出さない */
}

/* ---------- 0.4.2：広告用の LP（テンプレート sg-lp） ---------- */
.sgk-lp-visual { margin: 0; padding: clamp(.75rem, 2.5vw, 1.5rem); border-radius: 20px; background: var(--sgk-tint); }
.sgk-lp-visual svg { display: block; width: 100%; height: auto; font-family: inherit; }
.sgk-lp-adprefs { margin: 0; }
.sgk-lp-adprefs:empty { display: none; }
.sgk-lp-adprefs button {
  -webkit-appearance: none; appearance: none; min-height: 44px; padding: .5em 0; border: 0; background: none;
  color: inherit; font: inherit; font-size: .8125rem; text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
/* 0.4.6：Cookie についての確認（サイト全体。タグの ID を設定したときだけ出る）。
   はじめは、短い文と 3つのボタンだけの小さな確認（.sgk-cc）。「詳細」を押したときにだけ、項目ごとの説明と切り替え（.sgk-cp）を出す。
   「同意しない」と「同意する」、「すべて拒否」と「すべて同意」は、同じ見た目にしている。動きは付けていない */
.sgk-cc {
  position: fixed; left: clamp(.75rem, 2vw, 1.5rem); bottom: clamp(.75rem, 2vw, 1.5rem); z-index: 9990; box-sizing: border-box;
  width: min(23rem, calc(100vw - 1.5rem)); padding: 1.125rem 1.25rem 1rem; border: 1px solid rgba(255, 255, 255, .16); border-radius: 20px;
  background: var(--sgk-ink); color: var(--sgk-white); box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
}
.sgk-cc .sgk-cc__text { margin: 0 0 .875rem; color: var(--sgk-white); font-size: .9375rem; font-weight: 600; line-height: 1.7; }
.sgk-cc__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sgk-cc__btn {
  -webkit-appearance: none; appearance: none; box-sizing: border-box; flex: 1 1 7rem; min-height: 44px; margin: 0; padding: .5em 1em;
  border: 1px solid var(--sgk-white); border-radius: 999px; background: transparent; color: var(--sgk-white);
  font: inherit; font-size: .9375rem; font-weight: 600; line-height: 1.35; cursor: pointer;
}
.sgk-cc__btn:hover { background: rgba(255, 255, 255, .14); }
.sgk-cc__more {
  -webkit-appearance: none; appearance: none; flex: none; min-height: 44px; margin: 0; padding: .5em .625em; border: 0; background: none;
  color: var(--sgk-white); font: inherit; font-size: .875rem; text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
.sgk-cc__btn:focus-visible, .sgk-cc__more:focus-visible { outline: 3px solid var(--sgk-green); outline-offset: 2px; }

html.sgk-cp-open { overflow: hidden; }
.sgk-cp { position: fixed; inset: 0; z-index: 9995; display: flex; align-items: center; justify-content: center; padding: 1rem; box-sizing: border-box; }
.sgk-cp__backdrop { position: absolute; inset: 0; background: rgba(16, 26, 19, .56); }
.sgk-cp__box {
  position: relative; box-sizing: border-box; display: flex; flex-direction: column; width: min(38rem, 100%); max-height: min(44rem, 100%);
  border-radius: 20px; background: var(--sgk-white); color: var(--sgk-ink); box-shadow: 0 24px 64px rgba(0, 0, 0, .32); overflow: hidden;
}
.sgk-cp__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.125rem 1.25rem 1rem 1.5rem; border-bottom: 1px solid var(--sgk-line); }
.sgk-cp .sgk-cp__title { margin: 0; color: var(--sgk-ink); font-size: 1.1875rem; font-weight: 700; line-height: 1.4; }
.sgk-cp__close {
  -webkit-appearance: none; appearance: none; flex: none; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: var(--sgk-ink); font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.sgk-cp__close:hover { background: var(--sgk-tint); }
.sgk-cp__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1.125rem 1.5rem 1.25rem; }
.sgk-cp .sgk-cp__intro { margin: 0 0 1rem; color: var(--sgk-gray); font-size: .875rem; line-height: 1.8; }
.sgk-cp__intro a { color: var(--sgk-green-dark); text-underline-offset: 4px; }
.sgk-cp__list { border-top: 1px solid var(--sgk-line); }
.sgk-cp__item { border-bottom: 1px solid var(--sgk-line); }
.sgk-cp__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.sgk-cp__toggle {
  -webkit-appearance: none; appearance: none; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .625rem; min-height: 56px; margin: 0; padding: .5rem 0;
  border: 0; background: none; color: var(--sgk-ink); font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.5; text-align: left; cursor: pointer;
}
.sgk-cp__chev { flex: none; width: .5rem; height: .5rem; margin: 0 .25rem 0 .125rem; border-right: 2px solid var(--sgk-ink); border-bottom: 2px solid var(--sgk-ink); transform: rotate(-45deg); }
.sgk-cp__toggle[aria-expanded="true"] .sgk-cp__chev { transform: rotate(45deg); }
.sgk-cp__always { flex: none; color: var(--sgk-green-dark); font-size: .8125rem; font-weight: 700; }
.sgk-cp__switch { position: relative; flex: none; display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; }
.sgk-cp__switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sgk-cp__knob { display: block; position: relative; width: 3rem; height: 1.75rem; border-radius: 999px; background: #6b776f; }
.sgk-cp__knob::after { content: ""; position: absolute; top: .1875rem; left: .1875rem; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--sgk-white); }
.sgk-cp__switch input:checked + .sgk-cp__knob { background: var(--sgk-green-dark); }
.sgk-cp__switch input:checked + .sgk-cp__knob::after { left: 1.4375rem; }
.sgk-cp__detail { padding: 0 0 1rem 1.375rem; }
.sgk-cp__detail[hidden] { display: none; }
.sgk-cp .sgk-cp__lead { margin: 0 0 .5rem; color: var(--sgk-gray); font-size: .875rem; line-height: 1.8; }
.sgk-cp .sgk-cp__dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .125rem; font-size: .8125rem; line-height: 1.75; }
.sgk-cp__dl dt { margin: .375rem 0 0; color: var(--sgk-ink); font-weight: 700; }
.sgk-cp__dl dd { margin: 0; color: var(--sgk-gray); }
.sgk-cp .sgk-cp__id { margin: 1rem 0 0; color: var(--sgk-gray); font-size: .75rem; line-height: 1.7; overflow-wrap: anywhere; }
.sgk-cp__acts { display: flex; flex-wrap: wrap; gap: .5rem; padding: 1rem 1.5rem 1.25rem; border-top: 1px solid var(--sgk-line); background: var(--sgk-tint); }
.sgk-cp__btn {
  -webkit-appearance: none; appearance: none; box-sizing: border-box; flex: 1 1 9rem; min-height: 44px; margin: 0; padding: .5em 1em;
  border: 1px solid var(--sgk-ink); border-radius: 999px; background: var(--sgk-white); color: var(--sgk-ink);
  font: inherit; font-size: .9375rem; font-weight: 600; line-height: 1.35; cursor: pointer;
}
.sgk-cp__btn:hover { background: var(--sgk-pale); }
.sgk-cp__btn:focus-visible, .sgk-cp__close:focus-visible, .sgk-cp__toggle:focus-visible, .sgk-cp__intro a:focus-visible,
.sgk-cp__switch input:focus-visible + .sgk-cp__knob,
.sgk-lp-adprefs button:focus-visible, .sgk-consent-prefs button:focus-visible { outline: 3px solid var(--sgk-green); outline-offset: 2px; }
@media (max-width: 600px) {
  .sgk-cc { left: .75rem; right: .75rem; bottom: .75rem; width: auto; }
  .sgk-cp { align-items: flex-end; padding: 0; }
  .sgk-cp__box { width: 100%; max-height: 92%; border-radius: 20px 20px 0 0; }
  .sgk-cp__top { padding-left: 1.25rem; }
  .sgk-cp__body { padding-left: 1.25rem; padding-right: 1.25rem; }
  .sgk-cp__acts { padding-left: 1.25rem; padding-right: 1.25rem; }
  .sgk-cp__btn { flex: 1 1 100%; } /* 3つのボタンを、同じ幅で縦に並べる */
}
@media (forced-colors: active) { .sgk-cp__knob { border: 1px solid CanvasText; } .sgk-cp__switch input:checked + .sgk-cp__knob { background: Highlight; } }
/* 「Cookie の設定」のボタン（サイトのフッターのすぐ下。フッターと同じ濃い色の帯にする） */
.sgk-consent-prefs { box-sizing: border-box; margin: 0; padding: .25rem clamp(1rem, 4vw, 2.5rem) 1rem; background: var(--wp--preset--color--sg-dark, var(--sgk-ink)); color: rgba(255, 255, 255, .78); }
.sgk-consent-prefs[hidden], .sgk-consent-prefs:empty { display: none; }
.sgk-consent-prefs button {
  -webkit-appearance: none; appearance: none; min-height: 44px; margin: 0; padding: .5em 0; border: 0; background: none;
  color: inherit; font: inherit; font-size: .8125rem; text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
@media (max-width: 600px) { .sgk-consent-prefs { padding-bottom: 5rem; } } /* 右下の「気になる」の帯と、重ならないように */
@media print { .sgk-cc, .sgk-cp, .sgk-consent-prefs, .sgk-lp-adprefs { display: none !important; } }

/* ---------- 折りたたんだ節（0.4.10）：製品ページの「セキュリティとデータの扱い」など ---------- */
details.sg-fold { border-top: 1px solid var(--sgk-line); border-bottom: 1px solid var(--sgk-line); }
details.sg-fold[open] { border-bottom-color: transparent; }
details.sg-fold > summary {
  display: flex; align-items: center; gap: .75rem; box-sizing: border-box; min-height: 3.5rem; padding: .75rem .25rem;
  color: var(--sgk-ink); font-size: 1.0625rem; font-weight: 700; line-height: 1.6; cursor: pointer; list-style: none;
}
details.sg-fold > summary::-webkit-details-marker { display: none; }
details.sg-fold > summary::before {
  content: ""; flex: none; width: .5rem; height: .5rem; margin: 0 .375rem 0 .25rem;
  border-right: 2px solid var(--sgk-green-dark); border-bottom: 2px solid var(--sgk-green-dark); transform: rotate(-45deg);
}
details.sg-fold[open] > summary::before { transform: rotate(45deg); }
details.sg-fold > summary:hover { color: var(--sgk-green-dark); }
details.sg-fold > summary:focus-visible { outline: 2px solid var(--sgk-green-dark); outline-offset: 2px; border-radius: 6px; }
details.sg-fold[open] > summary { margin-bottom: 1.5rem; border-bottom: 1px solid var(--sgk-line); }
details.sg-fold > :not(summary) { margin-top: 0; }

/* ---------- 製品ページの「こんな課題は、ありませんか。」（0.4.10）---------- */
.sg-issues .sg-issue { height: 100%; box-sizing: border-box; }
.sg-issues .sg-issue h3 { margin: 0; font-size: 1.25rem; line-height: 1.6; }
.sg-issues .sg-issue p { margin: 0; }
/* 3つの課題は、広い画面では横に 3つ、狭い画面では縦に並べる（2つと 1つに割れないようにする。0.4.11）*/
.sg-issues > .wp-block-group.is-layout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .sg-issues > .wp-block-group.is-layout-grid { grid-template-columns: minmax(0, 1fr); } }
/* 箇条書きの行の頭に置いた見出し（「費用：」など）を、太くする（0.4.11）*/
.wp-block-list li > strong:first-child { color: var(--sgk-ink); font-weight: 700; }
/* 課題の枠の上に置く、小さな図（0.4.12）。図は SVG（カスタム HTML ブロック）。文字は、ページと同じ書体 */
.sg-issues .sg-issue__fig { margin: 0 0 .5rem; border-radius: 12px; background: var(--sgk-tint); overflow: hidden; }
.sg-issues .sg-issue__fig svg { display: block; width: 100%; height: auto; font-family: inherit; }
@media print { .sg-issues .sg-issue__fig { border: 1px solid #999; } }

/* YouTube の動画（0.4.13）。押すまで接続しない。絵は、このサイトに置いた画像 */
.sgk-yt { margin: 0 auto 2.5rem; max-width: 880px; }
.sgk-yt__frame { position: relative; aspect-ratio: 16 / 9; background: #0B1A10; border-radius: 12px; overflow: hidden; }
.sgk-yt__frame iframe, .sgk-yt__play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sgk-yt__play { padding: 0; margin: 0; cursor: pointer; background: #0B1A10; display: block; }
.sgk-yt__play img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.sgk-yt__play:hover img, .sgk-yt__play:focus-visible img { opacity: 1; }
.sgk-yt__play:focus-visible { outline: 3px solid var(--sgk-green); outline-offset: -3px; }
.sgk-yt__btn { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 4px 18px rgba(0,0,0,.18); transition: background-color .2s; }
.sgk-yt__play:hover .sgk-yt__btn, .sgk-yt__play:focus-visible .sgk-yt__btn { background: rgba(255,255,255,.28); }
@media (prefers-reduced-motion: reduce) { .sgk-yt__btn { transition: none; } }
.sgk-yt__btn::after { content: ""; position: absolute; left: 31px; top: 24px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent #fff; }
.sgk-yt__label { position: absolute; left: 16px; bottom: 14px; color: #fff; background: rgba(0,0,0,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: .3rem .7rem; border-radius: 6px; font-size: .9375rem; line-height: 1.5; }
.sgk-yt__note { margin: .6rem 0 0; font-size: .875rem; line-height: 1.8; color: var(--sgk-gray); }
@media (max-width: 600px) {
  .sgk-yt__btn { width: 56px; height: 56px; margin: -28px 0 0 -28px; top: 42%; }
  .sgk-yt__btn::after { left: 23px; top: 17px; border-width: 11px 0 11px 17px; }
  .sgk-yt__label { left: 8px; right: 8px; bottom: 8px; font-size: .75rem; text-align: center; padding: .2rem .5rem; }
}
@media print { .sgk-yt__btn, .sgk-yt__label { display: none; } }

/* ===== 0.5.0：明るく、言葉の少ないデザイン（トップページから）===== */
:root { --sg2-ink: #13201A; --sg2-sub: #3B4A41; --sg2-green: #2E8F3A; --sg2-deep: #1F7A2B; --sg2-mint: #E9F6E6; --sg2-tint: #F4FAF2; --sg2-sun: #FFD84D; --sg2-cream: #FFF4C7; }
:root body, body :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, th, td, figcaption, blockquote, button, input, textarea, select, .wp-element-button, .wp-block-button__link, .wp-block-navigation, .wp-block-site-title) { font-family: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif; }
.sg2 { color: var(--sg2-ink); margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0; padding-bottom: 0; }
.sg2.alignfull { padding-left: 0 !important; padding-right: 0 !important; }
.sg2 > .sg2-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }
.sg2 h1, .sg2 h2 { font-weight: 900; letter-spacing: -0.01em; margin: 0; }
.sg2 p { margin: 0; }
.sg2-kicker { font-weight: 700; color: var(--sg2-deep); font-size: 1rem; }
.sg2-pill { display: inline-block; background: var(--sg2-sun); color: var(--sg2-ink); padding: .45rem 1rem; border-radius: 999px; font-weight: 700; font-size: .95rem; }
.sg2-h2 { font-size: clamp(1.9rem, 4vw, 3.25rem); line-height: 1.3; }
.sg2 .wp-block-buttons { gap: 14px; flex-wrap: wrap; }
.sg2 .wp-block-button__link { border-radius: 999px; padding: 1.05rem 2rem; font-weight: 700; font-size: 1.05rem; line-height: 1.4; }
.sg2 .is-style-fill .wp-block-button__link, .sg2 .sg2-btn-main .wp-block-button__link { background: var(--sg2-deep); color: #fff; }
.sg2 .is-style-outline .wp-block-button__link { background: #fff; color: var(--sg2-ink); border: 1.5px solid var(--sg2-ink); }
.sg2 .sg2-btn-dark .wp-block-button__link { background: var(--sg2-ink); color: #fff; }
.sg2 .sg2-btn-white .wp-block-button__link { background: #fff; color: var(--sg2-ink); }
/* ヒーロー */
.sg2-hero { background: #fff; padding: 72px 0 88px; }
.sg2-hero .sg2-inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.sg2-hero__text { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.sg2-hero h1 { font-size: clamp(2.75rem, 6vw, 5.25rem); line-height: 1.18; }
.sg2-lead { font-size: clamp(1.1rem, 1.6vw, 1.375rem); line-height: 1.7; font-weight: 500; color: var(--sg2-sub); }
.sg2-layers { position: relative; height: 520px; }
.sg2-layer { position: absolute; height: 120px; border-radius: 28px; display: flex; align-items: center; padding: 0 32px; box-sizing: border-box; font-weight: 900; font-size: 1.9rem; }
.sg2-layer--1 { left: 6%; right: 0; top: 40px; background: var(--sg2-mint); color: var(--sg2-deep); transform: rotate(-3deg); }
.sg2-layer--2 { left: 0; right: 8%; top: 168px; background: var(--sg2-sun); color: var(--sg2-ink); transform: rotate(2deg); }
.sg2-layer--3 { left: 10%; right: 2%; top: 296px; background: var(--sg2-green); color: #fff; transform: rotate(-1.5deg); }
.sg2-dot { position: absolute; right: 4%; top: 0; width: 120px; height: 120px; border-radius: 50%; background: var(--sg2-ink); color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 700; font-size: .95rem; line-height: 1.4; }
.sg2-bubble { position: absolute; left: 4%; bottom: 20px; background: #fff; border: 1.5px solid var(--sg2-ink); border-radius: 20px 20px 20px 4px; padding: 14px 20px; font-weight: 700; font-size: 1.05rem; }
@media (prefers-reduced-motion: no-preference) {
  .sg2-layer { animation: sg2-in .7s ease-out both; }
  .sg2-layer--2 { animation-delay: .12s; } .sg2-layer--3 { animation-delay: .24s; }
  @keyframes sg2-in { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
}
/* あるある */
.sg2-aru { background: var(--sg2-tint); padding: 96px 0; }
.sg2-aru .sg2-inner, .sg2-verbs .sg2-inner { display: flex; flex-direction: column; gap: 48px; }
.sg2-head { display: flex; flex-direction: column; gap: 12px; }
.sg2-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sg2-card { background: #fff; border-radius: 28px; padding: 32px 28px; display: flex; flex-direction: column; gap: 20px; min-height: 300px; box-sizing: border-box; margin: 0 !important; }
.sg2-card__q { font-size: 1.6rem; font-weight: 900; line-height: 1.45; }
.sg2-card__d { font-size: .95rem; line-height: 1.8; color: var(--sg2-sub); flex-grow: 1; }
.sg2-card__a { font-size: .9rem; font-weight: 700; }
.sg2-card__a a { color: var(--sg2-deep); text-decoration: none; }
.sg2-card__a a:hover { text-decoration: underline; }
/* 4つの動詞 */
.sg2-verbs { background: #fff; padding: 112px 0; }
.sg2-verbs .sg2-h2 { text-align: center; }
.sg2-verbgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sg2-verb { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; margin: 0 !important; }
.sg2-verb__icon { width: 140px; height: 140px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--sg2-mint); }
.sg2-verb__icon--sun { background: var(--sg2-cream); }
.sg2-verb__icon svg { width: 64px; height: 64px; }
.sg2-verb__w { font-size: 2.1rem; font-weight: 900; }
.sg2-verb__d { font-size: 1rem; color: var(--sg2-sub); }
.sg2-verb__p a { font-size: .9rem; font-weight: 700; color: var(--sg2-deep); }
/* 気になる */
.sg2-fav { background: var(--sg2-green); color: #fff; padding: 104px 0; }
.sg2-fav .sg2-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; }
.sg2-fav__text { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.sg2-fav h2 { color: #fff; }
.sg2-fav__body { font-size: 1.2rem; line-height: 1.8; color: #fff; }
.sg2-fav .wp-block-button__link { background: #fff; color: var(--sg2-ink); }
.sg2-mock { background: #fff; color: var(--sg2-ink); border-radius: 28px; padding: 28px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 24px 48px rgba(10,40,15,.25); }
.sg2-mock__top { display: flex; justify-content: space-between; align-items: center; font-weight: 900; font-size: 1.25rem; }
.sg2-mock__n { background: var(--sg2-ink); color: #fff; border-radius: 999px; padding: 4px 12px; font-size: .875rem; }
.sg2-mock__row { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 16px; background: var(--sg2-tint); font-weight: 700; }
.sg2-mock__sq { width: 44px; height: 44px; border-radius: 12px; background: var(--sg2-mint); flex: 0 0 44px; }
.sg2-mock__sq--sun { background: var(--sg2-cream); }
.sg2-mock__btn { background: var(--sg2-deep); color: #fff; padding: 16px; border-radius: 999px; font-weight: 700; text-align: center; }
/* 使われています */
.sg2-proof { background: #fff; padding: 104px 0; text-align: center; }
.sg2-proof .sg2-inner { display: flex; flex-direction: column; gap: 28px; align-items: center; }
.sg2-proof__note { font-size: .95rem; color: var(--sg2-sub); }
.sg2-proof__names { display: flex; flex-wrap: wrap; gap: 16px 40px; justify-content: center; font-weight: 700; font-size: 1.25rem; color: var(--sg2-sub); }
.sg2-proof__link a { color: var(--sg2-deep); font-weight: 700; }
/* 目指していること */
.sg2-vision { background: var(--sg2-ink); color: #fff; padding: 120px 0; }
.sg2-vision .sg2-inner { display: flex; flex-direction: column; gap: 28px; }
.sg2-vision .sg2-kicker { color: var(--sg2-sun); }
.sg2-vision h2 { color: #fff; font-size: clamp(2.1rem, 4.6vw, 4rem); line-height: 1.3; }
.sg2-vision__body { font-size: 1.2rem; line-height: 1.9; color: #D8E6DA; max-width: 640px; }
/* 終わりの相談 */
.sg2-cta { background: var(--sg2-sun); padding: 96px 0; text-align: center; }
.sg2-cta .sg2-inner { display: flex; flex-direction: column; gap: 28px; align-items: center; }
.sg2-cta h2 { font-size: clamp(2rem, 4.4vw, 3.75rem); line-height: 1.3; }
.sg2-cta .wp-block-buttons { justify-content: center; }
/* ヒーローの層の仕掛け（0.5.12）：触れると層が少し浮き、中身がのぞく。3つに触れると、層がそろう */
.sg2 a.sg2-layer { text-decoration: none; cursor: pointer; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, left .5s, right .5s; }
.sg2 a.sg2-layer--1, .sg2 a.sg2-layer--1:hover { color: var(--sg2-deep); }
.sg2 a.sg2-layer--2, .sg2 a.sg2-layer--2:hover { color: var(--sg2-ink); }
.sg2 a.sg2-layer--3, .sg2 a.sg2-layer--3:hover { color: #fff; }
.sg2 a.sg2-layer:focus-visible { outline: 3px solid var(--sg2-ink); outline-offset: 4px; }
.sg2-layer.is-peek { transform: rotate(0deg) translateY(-6px) scale(1.02); box-shadow: 0 14px 30px rgba(19, 32, 26, .16); z-index: 2; }
.sg2-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sg2-peek { margin-left: auto; width: 56px; height: 56px; opacity: 0; transform: scale(.8); transition: opacity .25s, transform .25s; }
.sg2-peek svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sg2-layer.is-peek .sg2-peek { opacity: 1; transform: none; }
.sg2-layers__hint, .sg2-layers__info { position: absolute; left: 4%; right: 0; top: calc(100% + 4px); margin: 0; font-size: .875rem; line-height: 1.6; color: var(--sg2-sub); }
.sg2-layers__info { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.sg2-layers__info[hidden], .sg2-layers__hint[hidden] { display: none; }
.sg2-layers__info a { color: var(--sg2-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.sg2-layers__info a.sg2-layers__col { font-weight: 500; color: var(--sg2-sub); }
.sg2-layers.is-done .sg2-layer { left: 3%; right: 3%; transform: none; }
.sg2-layers.is-done .sg2-layer.is-peek { transform: translateY(-4px); }
.sg2-dot__t { display: block; }
.sg2-layers.is-done .sg2-dot { background: var(--sg2-green); }
@media (prefers-reduced-motion: no-preference) {
  .sg2-layer.is-peek .sg2-peek--make .p-slide { animation: sg2-pk-slide 1.6s ease-in-out infinite; }
  .sg2-layer.is-peek .sg2-peek--make .p-play { animation: sg2-pk-play 1.6s ease-in-out infinite; }
  .sg2-layer.is-peek .sg2-peek--send .p-top { animation: sg2-pk-send 1.6s ease-in-out infinite; }
  .sg2-layer.is-peek .sg2-peek--check .p-tick { stroke-dasharray: 30; animation: sg2-pk-tick 1.6s ease-out infinite; }
  .sg2-layers.is-done .sg2-dot { animation: sg2-pop .5s ease-out; }
  @keyframes sg2-pk-slide { 0%, 35% { opacity: 1; } 50%, 100% { opacity: 0; } }
  @keyframes sg2-pk-play { 0%, 40% { opacity: 0; transform: scale(.6); } 60%, 100% { opacity: 1; transform: none; } }
  @keyframes sg2-pk-send { 0%, 20% { transform: none; } 60%, 100% { transform: translate(10px, -8px); } }
  @keyframes sg2-pk-tick { 0%, 25% { stroke-dashoffset: 30; } 70%, 100% { stroke-dashoffset: 0; } }
  @keyframes sg2-pop { 0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } }
}
@media (prefers-reduced-motion: reduce) {
  .sg2 a.sg2-layer, .sg2-peek { transition: none; }
  .sg2-peek--make .p-slide { opacity: 0; }
}
.sg2-peek--make .p-play { transform-origin: 28px 28px; }
@media (max-width: 960px) {
  .sg2-hero .sg2-inner, .sg2-fav .sg2-inner { grid-template-columns: minmax(0, 1fr); }
  .sg2-cards, .sg2-verbgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg2-layers { height: 440px; }
}
@media (max-width: 600px) {
  .sg2 > .sg2-inner { padding: 0 20px; }
  .sg2-hero { padding: 40px 0 56px; } .sg2-aru, .sg2-verbs, .sg2-fav, .sg2-proof, .sg2-vision, .sg2-cta { padding: 56px 0; }
  .sg2-cards { grid-template-columns: minmax(0, 1fr); }
  .sg2-card { min-height: 0; padding: 26px 22px; }
  .sg2-card__q { font-size: 1.35rem; }
  .sg2-verb__icon { width: 96px; height: 96px; } .sg2-verb__icon svg { width: 44px; height: 44px; } .sg2-verb__w { font-size: 1.5rem; }
  .sg2-layers { height: 240px; } .sg2-layer { height: 64px; border-radius: 18px; padding: 0 20px; font-size: 1.25rem; }
  .sg2-layer--1 { top: 10px; } .sg2-layer--2 { top: 82px; } .sg2-layer--3 { top: 154px; }
  .sg2-dot, .sg2-bubble, .sg2-layers__hint, .sg2-layers__info { display: none !important; }
  .sg2-peek { width: 40px; height: 40px; }
  .sg2 .wp-block-buttons, .sg2 .wp-block-button { width: 100%; } .sg2 .wp-block-button__link { width: 100%; box-sizing: border-box; text-align: center; }
}

/* ===== 0.5.3：「気になる製品とコラム」の新しいデザイン（右下の帯、追加ボタン、一覧のページ）===== */
/* 右下の帯：白い1本のカプセルに、音・追加・一覧をまとめる */
.sgk-dock { background: #fff; border-radius: 999px; padding: 6px; gap: 6px; flex-wrap: nowrap; box-shadow: 0 10px 30px rgba(19, 32, 26, .18), 0 0 0 1px rgba(19, 32, 26, .06); }
.sgk-dock .sgk-add, .sgk-dock__link { box-shadow: none; }
.sgk-dock .sgk-sound { width: 44px; height: 44px; border: 0; background: var(--sg2-tint); box-shadow: none; }
.sgk-add { min-height: 44px; border: 0; background: var(--sg2-deep); color: #fff; font-weight: 700; padding: .5em 1.25em .5em 1em; }
.sgk-add:hover { background: var(--sg2-ink); }
.sgk-add.is-on { background: var(--sg2-sun); color: var(--sg2-ink); border-color: transparent; }
.sgk-add.is-on:hover { background: #F2C935; }
.sgk-add--small { min-height: 36px; }
.sgk-dock__link { min-height: 44px; background: #fff; color: var(--sg2-ink) !important; font-weight: 700; padding: .45em .55em .45em 1.1em; }
.sgk-dock__link:hover { background: var(--sg2-tint); }
.sgk-count { background: var(--sg2-sun); color: var(--sg2-ink); min-width: 2em; height: 2em; font-size: .875rem; }
.sgk-count.is-empty { background: var(--sg2-tint); color: var(--sg2-sub); }
@media (min-width: 601px) {
  .sgk-split__i { color: var(--sg2-sub); }
  .sgk-split__i b { color: var(--sg2-ink); }
}
@media (max-width: 600px) {
  .sgk-dock { right: 12px; left: 12px; justify-content: space-between; max-width: none; }
  .sgk-dock .sgk-add { flex: 1 1 auto; justify-content: center; }
  /* 0.5.55：藤松さんの指示（2026-10-11 07:52）。「気になる」の一覧のページなど、音のボタンしか入っていないときは、
     帯を画面の幅いっぱいに広げない（白い帯だけが出て、下のカードに重なっていた）。ボタンの大きさの丸にして、いつもと同じ左下に置く。 */
  .sgk-dock:has(> .sgk-sound:only-child) { right: auto; }
}
/* 一覧のページ */
#sgk-mylist { display: grid; gap: 40px; }
/* 0.5.54：藤松さんの指示（2026-10-11 07:46）。スマートフォン（iPhone の Safari）で、「気になる」の一覧の右側が切れていた。
   1列のグリッドは、列の幅を決めていないと、中身の「これより狭くなれない幅」に合わせて画面より広がる。
   iPhone の Safari では、共有リンクの入力欄がその幅を大きく取るため、上の箱とカードがまとめて右にはみ出していた。
   列の幅を「入れ物の幅まで」に決める（中身は、その中で折り返す・縮む）。 */
.sgk-mylist, .sgk-panel, .sgk-group, .sgk-empty, .sgk-shared, .sgk-reader, .sgk-item__body, .sgk-pop, .sgk-pop__list, .sgk-mylist .sgk-share { grid-template-columns: minmax(0, 1fr); }
.sgk-panel { background: #fff; border-radius: 28px; padding: 32px; gap: 24px; box-shadow: 0 18px 40px rgba(19, 32, 26, .10), 0 0 0 1px rgba(19, 32, 26, .05); }
.sgk-panel__count { display: flex; align-items: baseline; gap: .4em; flex-wrap: wrap; }
.sgk-panel__label { font-size: 1rem; font-weight: 700; color: var(--sg2-sub); margin-right: .4em; }
.sgk-panel__total { font-size: clamp(3rem, 7vw, 4.5rem); font-weight: 900; line-height: 1; color: var(--sg2-ink); font-variant-numeric: tabular-nums; }
.sgk-panel__unit { font-size: 1.25rem; font-weight: 700; }
.sgk-stats { gap: 12px; }
.sgk-stats__i { flex: 1 1 120px; flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px 20px; border: 0; border-radius: 20px; background: var(--sg2-mint); }
.sgk-stats__i[data-kind="column"], .sgk-stats__i[data-kind="case"] { background: var(--sg2-cream); }
.sgk-stats__i[data-kind="term"] { background: var(--sg2-tint); }
.sgk-stats__l { font-size: .875rem; color: var(--sg2-sub); }
.sgk-stats__n { font-size: 2rem; font-weight: 900; line-height: 1.1; }
.sgk-panel__buttons { gap: 10px; }
.sgk-btn { min-height: 48px; padding: .6em 1.5em; font-weight: 700; border-radius: 999px; }
.sgk-btn--main { background: var(--sg2-deep); border-color: var(--sg2-deep); font-size: 1rem; padding: .7em 1.8em; }
#sgk-mylist .sgk-share { background: var(--sg2-tint); border-top: 0; border-radius: 20px; padding: 18px 20px; }
#sgk-mylist .sgk-share__input { border-radius: 999px; padding: .5em 1.1em; }
.sgk-clear { color: var(--sg2-sub); }
.sgk-filebox { border: 0; background: var(--sg2-tint); border-radius: 20px; }
.sgk-group { gap: 16px; }
.sgk-group__title { display: flex; align-items: center; gap: .5em; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 900; color: var(--sg2-ink); }
.sgk-group__n { display: inline-flex; align-items: center; justify-content: center; min-width: 1.7em; height: 1.7em; padding: 0 .4em; border-radius: 999px; background: var(--sg2-sun); font-size: .55em; font-weight: 700; }
.sgk-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; border-top: 0; }
.sgk-item { position: relative; background: #fff; border: 0; border-radius: 24px; padding: 24px 56px 24px 24px; box-shadow: 0 0 0 1px rgba(19, 32, 26, .08); transition: box-shadow .15s, transform .15s; }
.sgk-item:hover { box-shadow: 0 12px 28px rgba(19, 32, 26, .10), 0 0 0 1px rgba(19, 32, 26, .08); }
.sgk-item.is-leaving { padding-top: 0; padding-bottom: 0; }
.sgk-item__kind { display: inline-block; justify-self: start; padding: .2em .8em; border-radius: 999px; background: var(--sg2-mint); color: var(--sg2-deep); font-size: .75rem; font-weight: 700; letter-spacing: .02em; }
.sgk-item[data-kind="column"] .sgk-item__kind, .sgk-item[data-kind="case"] .sgk-item__kind { background: var(--sg2-cream); color: var(--sg2-ink); }
.sgk-item[data-kind="term"] .sgk-item__kind { background: var(--sg2-tint); color: var(--sg2-sub); }
.sgk-item__title { font-size: 1.15rem; font-weight: 700; }
.sgk-item__title a { text-decoration: none; }
.sgk-item__title a:hover { text-decoration: underline; }
.sgk-item__action { position: absolute; top: 14px; right: 14px; }
.sgk-item--shared { padding-right: 24px; }
.sgk-item--shared .sgk-item__action { position: static; margin-top: 8px; }
.sgk-remove { margin: 0; background: var(--sg2-tint); }
.sgk-remove:hover { background: var(--sg2-mint); }
@media (prefers-reduced-motion: reduce) { .sgk-item { transition: none; } }
/* 空のとき */
.sgk-empty { background: #fff; border-radius: 28px; padding: 48px 32px; justify-items: center; text-align: center; gap: 14px; box-shadow: 0 0 0 1px rgba(19, 32, 26, .08); }
.sgk-empty__art { position: relative; width: 180px; height: 96px; margin-bottom: 8px; }
.sgk-empty__art span { position: absolute; left: 0; right: 0; height: 26px; border-radius: 10px; }
.sgk-empty__art span:nth-child(1) { top: 0; background: var(--sg2-mint); transform: rotate(-3deg); }
.sgk-empty__art span:nth-child(2) { top: 34px; background: var(--sg2-sun); transform: rotate(2deg); left: 10px; right: -6px; }
.sgk-empty__art span:nth-child(3) { top: 68px; background: var(--sg2-green); transform: rotate(-1.5deg); left: 18px; right: 4px; }
.sgk-empty__lead { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 900; }
.sgk-empty__text { color: var(--sg2-sub); }
.sgk-empty__links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.sgk-shared { background: var(--sg2-cream); border-radius: 24px; }
@media (max-width: 760px) {
  .sgk-items { grid-template-columns: minmax(0, 1fr); }
  .sgk-panel { padding: 24px 20px; border-radius: 24px; }
  .sgk-panel__buttons .sgk-btn { flex: 1 1 100%; }
}
/* 一覧のページの頭（0.5.3） */
.sg2-listhead { background: #fff; padding: 56px 0 48px; }
.sg2-listhead .sg2-inner { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.sg2-listhead h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.2; }
.sg2-listhead .sg2-crumb { font-size: .875rem; color: var(--sg2-sub); }
.sg2-listhead .sg2-crumb a { color: var(--sg2-sub); }
.sg2-listbody { padding-top: 48px !important; padding-bottom: 96px !important; }

/* ===== 0.5.4：ヒーローの図を「重ねる」から「つなぐ」へ。スプライン曲線で、動画・文書・AI をつなぐ ===== */
.sg2-spline { position: relative; height: 520px; }
.sg2-spline svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sg2-spline__path { fill: none; stroke: var(--sg2-green); stroke-width: 6; stroke-linecap: round; }
.sg2-spline__ghost { fill: none; stroke: var(--sg2-mint); stroke-width: 22; stroke-linecap: round; }
.sg2-node { position: absolute; width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.75rem; box-shadow: 0 10px 24px rgba(19, 32, 26, .12); }
.sg2-node--1 { left: 17.9%; top: 71.2%; background: var(--sg2-mint); color: var(--sg2-deep); }
.sg2-node--2 { left: 50%; top: 30.8%; background: var(--sg2-sun); color: var(--sg2-ink); }
.sg2-node--3 { left: 82.1%; top: 61.5%; background: var(--sg2-green); color: #fff; }
.sg2-spline .sg2-dot { left: 0; right: auto; top: 0; }
.sg2-spline .sg2-bubble { left: auto; right: 0; bottom: auto; top: 8%; border-radius: 20px 20px 4px 20px; }
@media (prefers-reduced-motion: no-preference) {
  .sg2-spline__path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: sg2-draw 1.6s ease-out .2s forwards; }
  .sg2-node { animation: sg2-in .6s ease-out both; }
  .sg2-node--2 { animation-delay: .5s; } .sg2-node--3 { animation-delay: .9s; } .sg2-node--1 { animation-delay: .1s; }
  @keyframes sg2-draw { to { stroke-dashoffset: 0; } }
}
@media (max-width: 960px) { .sg2-spline { height: 440px; } }
@media (max-width: 600px) {
  .sg2-spline { height: 260px; }
  .sg2-node { width: 76px; height: 76px; margin: -38px 0 0 -38px; font-size: 1.1rem; }
  .sg2-spline__path { stroke-width: 4; } .sg2-spline__ghost { stroke-width: 14; }
}
.sg2-vision__lead { font-size: clamp(1.5rem, 2.8vw, 2.25rem); font-weight: 900; line-height: 1.5; color: #fff; }
/* 使われています：製品ごとの札（0.5.5）。札ごとに製品名を付け、大学名の一覧とは分ける */
.sg2-proof__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; width: 100%; max-width: 960px; margin: 8px 0 24px !important; }
.sg2-proof__card { background: var(--sg2-tint); border-radius: 28px; padding: 32px 28px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; text-align: left; margin: 0 !important; }
.sg2-proof__card:nth-child(2) { background: var(--sg2-cream); }
.sg2-proof__tag { display: inline-block; background: #fff; border-radius: 999px; padding: .3em .9em; font-size: .8125rem; font-weight: 700; color: var(--sg2-deep); }
.sg2-proof__num { font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 900; line-height: 1.1; }
.sg2-proof__num small { font-size: .45em; margin-left: .15em; }
.sg2-proof__txt { font-size: 1.05rem; font-weight: 700; line-height: 1.7; }
.sg2-proof__src { font-size: .8125rem; color: var(--sg2-sub); }
.sg2-proof__label { font-size: .875rem; font-weight: 700; color: var(--sg2-sub); margin-top: 8px !important; }
@media (max-width: 760px) { .sg2-proof__cards { grid-template-columns: minmax(0, 1fr); } }
/* ===== 0.5.6：もう一つのコアメッセージ「難しいことを、かんたんに。」と、採用の枠 ===== */
.sg2-promise { background: var(--sg2-mint); padding: 104px 0; }
.sg2-promise .sg2-inner { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.sg2-promise h2 { font-size: clamp(2.25rem, 5.4vw, 4.5rem); line-height: 1.2; }
.sg2-promise__body { font-size: clamp(1.1rem, 1.8vw, 1.375rem); line-height: 1.9; font-weight: 500; color: var(--sg2-ink); }
.sg2-recruit { padding: 96px 0; background: #fff; }
.sg2-recruit__box { position: relative; overflow: hidden; background: var(--sg2-green); color: #fff; border-radius: 36px; padding: clamp(40px, 6vw, 80px); display: flex; flex-direction: column; gap: 22px; align-items: flex-start; margin: 0 !important; }
.sg2-recruit__box::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 280px; height: 280px; border-radius: 50%; background: var(--sg2-sun); opacity: .9; }
.sg2-recruit__box > * { position: relative; z-index: 1; }
.sg2-recruit__box h2 { color: #fff; font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.2; }
.sg2-recruit__body { font-size: 1.2rem; line-height: 1.9; color: #fff; max-width: 640px; }
.sg2-recruit .wp-block-button__link { background: #fff; color: var(--sg2-ink); font-size: 1.1rem; padding: 1.1rem 2.6rem; }
.sg2-recruit .wp-block-button__link:hover { background: var(--sg2-sun); }
.sg2-formbody { padding-top: 48px !important; padding-bottom: 96px !important; }
.sg2-formbody .sg2-inner { max-width: 760px; }
.sg2-formnote { font-size: .95rem; line-height: 1.9; color: var(--sg2-sub); margin-bottom: 24px !important; }
@media (max-width: 600px) { .sg2-recruit__box::after { width: 180px; height: 180px; right: -50px; bottom: -50px; } }
.sg2-formbody > .sg2-inner { max-width: 760px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }
@media (max-width: 600px) { .sg2-formbody > .sg2-inner { padding: 0 20px; } }

/* ---------- よく「気になる」に集められているページ（0.5.16。[sg_popular]） ---------- */
.sgk-pop { display: grid; gap: .75rem; }
.sgk-pop .sgk-pop__t { margin: 0; font-weight: 700; font-size: 1rem; }
.sgk-pop__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; counter-reset: none; }
.sgk-pop__i { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; border-radius: 16px; background: #fff; border: 1.5px solid rgba(19, 32, 26, .12); }
.sgk-pop__n { flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #FFD84D; color: #13201A; font-weight: 900; font-size: .9rem; }
.sgk-pop__i:first-child .sgk-pop__n { background: #1F7A2B; color: #fff; }
.sgk-pop .sgk-pop__a { flex: 1 1 auto; color: #13201A; font-weight: 700; text-decoration: none; line-height: 1.5; }
.sgk-pop .sgk-pop__a:hover { text-decoration: underline; text-underline-offset: 4px; }
.sgk-pop .sgk-pop__a:focus-visible { outline: 3px solid #1F7A2B; outline-offset: 3px; border-radius: 4px; }
.sgk-pop__k { flex: 0 0 auto; font-size: .75rem; color: #3B4A41; background: #F4FAF2; border-radius: 999px; padding: .2rem .6rem; }
.sg2-fav .sgk-pop .sgk-pop__t { color: #fff; }

/* ---------- ヒーローの見出しの改行（0.5.17）：スマートフォンでは 2行に ---------- */
.sg2-nw { white-space: nowrap; }
@media (max-width: 600px) {
  .sg2-hero h1 { font-size: 8.6vw; line-height: 1.32; }
  .sg2-hero h1 .sg2-br-pc { display: none; }
}

/* ---------- スマートフォンでも吹き出し「あ、そういうことか」を出す（0.5.18） ---------- */
@media (max-width: 600px) {
  .sg2-layers { height: 296px; }
  .sg2-layers .sg2-bubble { display: block !important; left: 6%; bottom: 8px; padding: 10px 16px; font-size: .95rem; border-radius: 16px 16px 16px 4px; }
}


/* ---------- 製品ページの浮かぶロゴ（0.5.21。幅 900px 以上だけ） ---------- */
.sgk-plogo { display: none; }
@media (min-width: 900px) {
  .sgk-plogo { position: fixed; left: 20px; bottom: 20px; z-index: 59; display: none; align-items: center; padding: 10px 14px; background: #fff; border-radius: 16px; box-shadow: 0 6px 20px rgba(19, 32, 26, .16); line-height: 0; animation: sgk-plogo-in .5s ease-out both; }
  .sgk-plogo.is-on { display: flex; }
  .sgk-plogo img { display: block; height: 24px; width: auto; max-width: 180px; }
  .sgk-plogo:hover { box-shadow: 0 8px 26px rgba(19, 32, 26, .24); }
  .sgk-plogo:focus-visible { outline: 3px solid #2E8F3A; outline-offset: 3px; }
}
@keyframes sgk-plogo-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sgk-plogo { animation: none; } }
@media print { .sgk-plogo { display: none !important; } }

/* ---------- トップページの「気になる」の箱（0.5.23、[sg_stash]） ---------- */
.sgk-stash { min-width: 0; }
.sgk-stash__card { background: #fff; color: var(--sg2-ink); border-radius: 28px; padding: 26px 26px 22px; box-shadow: 0 24px 48px rgba(10,40,15,.25); display: flex; flex-direction: column; gap: 18px; }
.sgk-stash__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sgk-stash__title { margin: 0; font-weight: 700; font-size: 1.15rem; }
.sgk-stash__where { margin: 4px 0 0; font-size: .8125rem; color: var(--sg2-sub); }
.sgk-stash__n { flex: none; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 999px; background: var(--sg2-ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.15rem; }
.sgk-stash.is-empty .sgk-stash__n { background: var(--sg2-tint); color: var(--sg2-sub); }
a.sgk-stash__n { text-decoration: none; cursor: pointer; transition: background-color .15s ease; }
a.sgk-stash__n:hover { background: var(--sg2-deep); color: #fff; }
a.sgk-stash__n:focus-visible { outline: 3px solid var(--sg2-deep); outline-offset: 3px; }
.sgk-stash__body { display: flex; flex-direction: column; gap: 10px; }
.sgk-stash__lead { margin: 0; font-size: .9375rem; line-height: 1.7; }
.sgk-stash__chips { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.sgk-stash__chips li { margin: 0; padding: 4px 12px; border-radius: 999px; background: var(--sg2-tint); font-size: .8125rem; display: inline-flex; gap: 6px; align-items: baseline; }
.sgk-stash__chips b { font-size: 1rem; }
.sgk-stash__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sgk-stash__row { margin: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--sg2-tint); }
.sgk-stash__kind { flex: none; font-size: .6875rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #fff; color: var(--sg2-deep); }
.sgk-stash__kind[data-kind="column"] { background: var(--sg2-cream); color: var(--sg2-ink); }
.sgk-stash__kind[data-kind="term"] { background: var(--sg2-mint); }
.sgk .sgk-stash__a, .sgk-stash__a { flex: 1 1 auto; min-width: 0; color: var(--sg2-ink); text-decoration: none; font-weight: 700; font-size: .9375rem; line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sgk-stash__a:hover { text-decoration: underline; }
/* 0.5.29：0.5.28 の #1F7A2B は印象が変わるため、藤松さんの判断で #2E8F3A に戻した（白い文字とのコントラストは 4.11:1。13px の通常の文字の 4.5:1 には届かない。残件） */
.sgk-stash__add { flex: none; display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 999px; padding: 7px 12px; background: var(--sg2-green); color: #fff; font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer; }
.sgk-stash__add.is-on { background: var(--sg2-sun); color: var(--sg2-ink); }
.sgk-stash__add:focus-visible, .sgk-stash__act:focus-visible { outline: 3px solid var(--sg2-deep); outline-offset: 2px; }
.sgk-stash__more { font-size: .8125rem; color: var(--sg2-deep); font-weight: 700; }
.sgk-stash__next { border-top: 1px dashed #D5E2D7; padding-top: 10px; }
.sgk-stash__nextl { margin: 0 0 6px; font-size: .75rem; color: var(--sg2-sub); font-weight: 700; }
.sgk-stash__acts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sgk-stash__acts li { margin: 0; display: flex; }
.sgk-stash__act { flex: 1; display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 12px; border-radius: 16px; border: 1.5px solid var(--sg2-green); background: #fff; color: var(--sg2-ink); text-decoration: none; font: inherit; cursor: pointer; transition: background-color .2s; }
a.sgk-stash__act:hover, button.sgk-stash__act:hover { background: var(--sg2-mint); }
.sgk-stash__act.is-off { border-color: #E3EBE4; color: var(--sg2-sub); cursor: default; background: #FAFCFA; }
.sgk-stash__ico { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--sg2-mint); color: var(--sg2-deep); display: inline-flex; align-items: center; justify-content: center; }
.sgk-stash__act.is-off .sgk-stash__ico { background: #EEF2EE; color: #9AA79F; }
.sgk-stash__at { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sgk-stash__at b { font-size: .875rem; }
.sgk-stash__at span { font-size: .75rem; line-height: 1.5; color: var(--sg2-sub); }
.sgk-stash__nav { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8125rem; border-top: 1px solid #E3EBE4; padding-top: 12px; }
.sgk-stash__nav a { color: var(--sg2-deep); font-weight: 700; text-decoration: none; }
.sgk-stash__nav a::after { content: " →"; }
.sgk-stash__nav a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) {
  .sgk-stash__row.is-new { animation: sgk-stash-in .5s ease-out both; }
  .sgk-stash__n.is-bump { animation: sgk-stash-pop .45s ease-out; }
}
@keyframes sgk-stash-in { from { opacity: 0; transform: translateY(-6px); background: var(--sg2-cream); } to { opacity: 1; transform: none; } }
@keyframes sgk-stash-pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@media (max-width: 600px) {
  .sgk-stash__card { padding: 20px 16px 16px; border-radius: 22px; }
  .sgk-stash__acts { grid-template-columns: minmax(0, 1fr); }
}
.sgk-stash__add.is-on .sgk-stash__plus { display: none; }

/* 0.5.26：製品ページの「作り方の流れ」を、絵を使わない 4つの段の流れに（Sylavids） */
.sg-flow-steps { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 2rem !important; }
.sg-flow-steps > .wp-block-group { position: relative; }
.sg-flow-steps > .wp-block-group:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: -1.3rem; width: .7rem; height: .7rem;
  border-top: 2px solid var(--sg2-ink); border-right: 2px solid var(--sg2-ink);
  transform: translateY(-50%) rotate(45deg);
}
.sg-flow-who { display: inline-block; margin-left: .6em; padding: .15em .7em; border-radius: 999px; font-size: .75rem; font-weight: 700; line-height: 1.6; vertical-align: .1em; background: var(--sg2-tint); color: var(--sg2-sub); border: 1px solid #D5E2D7; }
.sg-flow-who--sv { background: var(--sg2-mint); color: var(--sg2-deep); border-color: #BFE0BC; }
.sg-flow-loop { margin: 0; display: flex; align-items: center; gap: .6em; color: var(--sg2-sub); font-size: .9375rem; }
.sg-flow-loop::before { content: ""; flex: none; width: 1.1em; height: 1.1em; border: 2px solid var(--sg2-deep); border-left-color: transparent; border-radius: 50%; }
@media (max-width: 1023px) {
  .sg-flow-steps { grid-template-columns: minmax(0, 1fr) !important; gap: 2.25rem !important; }
  .sg-flow-steps > .wp-block-group:not(:last-child)::after { top: auto; bottom: -1.5rem; right: auto; left: 50%; transform: translateX(-50%) rotate(135deg); }
}

/* 0.5.32（改善指示書 依頼04）：お問い合わせのフォーム。必須の印「*」の色（Fluent Forms の既定 #F56C6C は白地で 2.90:1）を、読める濃さの赤に。印の意味は、フォームの先頭の一文（.sgk-form-note）で説明する */
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after,
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-left label::before { color: #B42318; }
.fluentform .sgk-form-note { margin: 0 0 1rem; font-size: .9375rem; color: #3B4A41; }

/* 0.5.35（改善指示書 依頼05）：ヘッダーのメニュー。押せる範囲を 44px の高さに（設計の目標。WCAG 2.5.8 の最小は 24px）。
   「製品」「課題から探す」は、WordPress のナビゲーションの「クリックでサブメニューを開く」で 1つの開閉ボタンになっている。見た目の大きさは変えない */
header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { min-height: 44px; display: inline-flex; align-items: center; }
header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content { box-sizing: border-box; min-height: 44px; display: flex; align-items: center; }
header .wp-block-navigation__responsive-container-open,
header .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; padding: 10px; display: inline-flex; align-items: center; justify-content: center; }

/* 0.5.37：開発元のサイトへのリンクにするロゴ（Oxygen）。開発元の決まりに合わせ、画像は縮めずに元の大きさ（190×62）で出す */
@media (min-width: 900px) {
  /* 0.5.38：ほかの製品ロゴと同じ枠の大きさ（高さ 44px）。画像は縦横比を保って縮小するだけで、ファイルは加工しない */
  /* 0.5.48：Oxygen だけ（Sylavids もリンクになったので、クラスを分けた） */
  .sgk-plogo--oxygen { padding: 4px 14px; }
  .sgk-plogo--oxygen img { height: 36px; width: auto; max-width: none; }
}
.sgk-plogo .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* 0.5.39：製品ページの「このページの目次」（依頼08）。目次は本文の HTML（普通の a href="#…"）で、JS なしで動く */
/* 0.5.40：左端を、下のセクションの見出し（本文の余白 32px＋8px）にそろえる */
.sg-toc { box-sizing: border-box; max-width: none; margin: 0 !important; padding: 24px 8px 8px; color: var(--sg2-ink); }
.sg-toc__title { margin: 0 0 10px; font-size: .875rem; font-weight: 700; color: var(--sg2-sub); }
.sg-toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sg-toc__list li { margin: 0; }
.sg-toc__list a { box-sizing: border-box; display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px; border: 1.5px solid var(--sg2-green); border-radius: 999px; background: #fff; color: var(--sg2-ink); font-size: .9375rem; font-weight: 600; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
.sg-toc__list a:hover { background: var(--sg2-mint); }
.sg-toc__list a:focus-visible { outline: 3px solid var(--sg2-green); outline-offset: 2px; }
/* 目次から移った見出しが、管理バーや今後の固定ヘッダーに隠れないように */
:where(.wp-block-post-content, main) :where(h2[id], section[id], .wp-block-group[id]) { scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 24px); }

/* 0.5.41：製品ページの紹介動画の小さな窓（video-launcher.php）。押すとモーダルで YouTube を再生（押すまで接続しない） */
.sgk-vl { position: fixed; z-index: 59; left: 12px; bottom: calc(98px + env(safe-area-inset-bottom, 0px)); display: none; }
.sgk-vl.is-on { display: block; animation: sgk-plogo-in .5s ease-out both; }
.sgk-vl__open { box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px 8px 10px; border-radius: 999px; background: var(--sg2-ink, #13201A); color: #fff; font-size: .875rem; font-weight: 700; line-height: 1.3; text-decoration: none; box-shadow: 0 6px 20px rgba(19, 32, 26, .24); }
.sgk-vl__open:hover { background: #24382d; color: #fff; }
.sgk-vl__open:focus-visible { outline: 3px solid var(--sg2-sun, #FFD84D); outline-offset: 3px; }
.sgk-vl__thumb, .sgk-vl__title { display: none; }
.sgk-vl__text { display: inline-flex; align-items: center; gap: 8px; }
.sgk-vl__mini-icon { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--sg2-sun, #FFD84D); position: relative; }
.sgk-vl__mini-icon::after { content: ""; position: absolute; left: 10px; top: 7px; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent var(--sg2-ink, #13201A); }
@media (min-width: 900px) {
  .sgk-vl { left: 20px; bottom: 20px; }
  .sgk-vl__open { flex-direction: column; align-items: stretch; gap: 0; width: 232px; padding: 8px; border-radius: 16px; background: #fff; color: var(--sg2-ink, #13201A); box-shadow: 0 6px 20px rgba(19, 32, 26, .16); }
  .sgk-vl__open:hover { background: #fff; color: var(--sg2-ink, #13201A); box-shadow: 0 8px 26px rgba(19, 32, 26, .24); }
  .sgk-vl__open:focus-visible { outline-color: var(--sg2-green, #2E8F3A); }
  .sgk-vl__thumb { display: block; position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; background: #13201A; }
  .sgk-vl__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .sgk-vl__play { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(19, 32, 26, .78); }
  .sgk-vl__play::after { content: ""; position: absolute; left: 18px; top: 14px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent #fff; }
  .sgk-vl__text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 4px 2px; }
  .sgk-vl__mini-icon { display: none; }
  .sgk-vl__label { font-size: .75rem; color: var(--sg2-sub, #3B4A41); }
  .sgk-vl__title { display: block; font-size: .875rem; }
}
.sgk-vl-dlg { width: min(92vw, 960px); max-width: none; padding: 0; border: 0; border-radius: 16px; background: #13201A; color: #fff; }
.sgk-vl-dlg::backdrop { background: rgba(19, 32, 26, .72); }
.sgk-vl-dlg__box { padding: 12px 12px 14px; }
.sgk-vl-dlg__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sgk-vl-dlg__title { margin: 0; font-size: 1rem; font-weight: 700; color: #fff; }
.sgk-vl-dlg__close { min-width: 44px; min-height: 44px; padding: 8px 16px; border: 1.5px solid #fff; border-radius: 999px; background: transparent; color: #fff; font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; }
.sgk-vl-dlg__close:hover { background: rgba(255, 255, 255, .12); }
.sgk-vl-dlg__close:focus-visible { outline: 3px solid var(--sg2-sun, #FFD84D); outline-offset: 2px; }
.sgk-vl-dlg__frame { aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; }
/* 0.5.51：自社のメディアの動画（<video>）も、YouTube の iframe と同じ枠いっぱいに出す */
.sgk-vl-dlg__frame iframe,
.sgk-vl-dlg__frame video { display: block; width: 100%; height: 100%; border: 0; }
.sgk-vl-dlg__frame video { background: #000; object-fit: contain; }
/* 0.5.51：動画の窓の題のあとの長さ（例「（約1分半）」）は、途中で折り返さない */
.sgk-vl__len { white-space: nowrap; }
.sgk-vl-dlg__note { margin: 10px 2px 0; font-size: .75rem; line-height: 1.6; color: #D5E3D8; }
.sgk-vl-dlg__note a { color: #fff; }
html.sgk-vl-lock { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .sgk-vl.is-on { animation: none; } }
@media print { .sgk-vl, .sgk-vl-dlg { display: none !important; } }

/* 0.5.43：PC で、見えてから 8 秒押されなかったら、スマートフォンと同じ小さな「▶ 動画を見る」にする。
   マウスを乗せる・キーボードで選ぶ（:focus-visible）と、サムネイルのカードに戻る。マウスで押したあとのフォーカスでは戻さない。 */
@media (min-width: 900px) {
  .sgk-vl.is-mini:not(:hover):not(:has(.sgk-vl__open:focus-visible)) .sgk-vl__open { flex-direction: row; align-items: center; gap: 8px; width: auto; min-height: 44px; padding: 8px 16px 8px 10px; border-radius: 999px; background: var(--sg2-ink, #13201A); color: #fff; box-shadow: 0 6px 20px rgba(19, 32, 26, .24); }
  .sgk-vl.is-mini:not(:hover):not(:has(.sgk-vl__open:focus-visible)) .sgk-vl__thumb,
  .sgk-vl.is-mini:not(:hover):not(:has(.sgk-vl__open:focus-visible)) .sgk-vl__title { display: none; }
  .sgk-vl.is-mini:not(:hover):not(:has(.sgk-vl__open:focus-visible)) .sgk-vl__text { flex-direction: row; align-items: center; gap: 8px; padding: 0; }
  .sgk-vl.is-mini:not(:hover):not(:has(.sgk-vl__open:focus-visible)) .sgk-vl__mini-icon { display: inline-block; }
  .sgk-vl.is-mini:not(:hover):not(:has(.sgk-vl__open:focus-visible)) .sgk-vl__label { font-size: .875rem; color: #fff; }
  .sgk-vl.is-mini:hover .sgk-vl__open, .sgk-vl.is-mini:has(.sgk-vl__open:focus-visible) .sgk-vl__open { animation: sgk-plogo-in .25s ease-out both; }
}
@media (min-width: 900px) and (prefers-reduced-motion: reduce) { .sgk-vl.is-mini:hover .sgk-vl__open, .sgk-vl.is-mini:has(.sgk-vl__open:focus-visible) .sgk-vl__open { animation: none; } }

/* 0.5.45：動画ライブラリー（video-library.php）。一覧のカード、1本ごとのページの再生のボタン、モーダルの下の段 */
.sgk-vlib { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.sgk-vcard { display: flex; flex-direction: column; margin: 0; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 12px rgba(19, 32, 26, .08); }
.sgk-vcard__play, .sgk-vsingle__play { display: block; position: relative; color: inherit; text-decoration: none; }
.sgk-vcard__thumb { display: block; position: relative; aspect-ratio: 16 / 9; background: #13201A; overflow: hidden; }
.sgk-vcard__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sgk-vcard__thumb .sgk-vl__play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(19, 32, 26, .78); }
.sgk-vcard__thumb .sgk-vl__play::after { content: ""; position: absolute; left: 22px; top: 17px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent #fff; }
.sgk-vcard__play:hover .sgk-vl__play, .sgk-vsingle__play:hover .sgk-vl__play { background: var(--sg2-green, #2E8F3A); }
.sgk-vcard__play:focus-visible, .sgk-vsingle__play:focus-visible { outline: 3px solid var(--sg2-green, #2E8F3A); outline-offset: 3px; }
.sgk-vcard__len { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 6px; background: rgba(19, 32, 26, .82); color: #fff; font-size: .75rem; font-weight: 700; line-height: 1.6; }
.sgk-vcard__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 18px 20px; flex: 1; }
.sgk-vcard__meta { margin: 0; font-size: .8125rem; color: var(--sg2-sub, #3B4A41); }
.sgk-vcard__title { margin: 0; font-size: 1.0625rem; line-height: 1.5; }
.sgk-vcard__title a { color: var(--sg2-ink, #13201A); text-decoration: none; }
.sgk-vcard__title a:hover { text-decoration: underline; }
.sgk-vcard__sum { margin: 0; font-size: .875rem; line-height: 1.8; color: var(--sg2-sub, #3B4A41); }
.sgk-vcard .sgk-add { margin-top: auto; }
.sgk-vsingle { margin: 0 0 1.5rem; }
.sgk-vsingle .sgk-vcard__thumb { border-radius: 16px; }
.sgk-vsingle__meta { margin: .75rem 0 0; font-size: .875rem; color: var(--sg2-sub, #3B4A41); }
.sgk-vsingle__product { margin-top: 1.5rem; }
.sgk-vl-dlg__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 12px; }
.sgk-vl-dlg__foot:empty { display: none; }
.sgk-vl-dlg__lib { color: #fff; font-size: .875rem; font-weight: 700; }
.sgk-vl-dlg__lib:focus-visible { outline: 3px solid var(--sg2-sun, #FFD84D); outline-offset: 2px; }
.sgk-note--videos { margin-top: 2rem; }

/* 0.5.46：画面の高さが低いときも、モーダルの下の段（「気になる」「ほかの動画を見る」）まで画面に入るように、幅を画面の高さに合わせて縮める */
.sgk-vl-dlg { width: min(92vw, 960px, calc((100vh - 170px) * 16 / 9)); max-height: calc(100vh - 16px); overflow: auto; }
@supports (height: 100dvh) { .sgk-vl-dlg { width: min(92vw, 960px, calc((100dvh - 170px) * 16 / 9)); max-height: calc(100dvh - 16px); } }
@media (max-width: 599px) { .sgk-vl-dlg { width: 94vw; } }

/* 0.5.49：動画のモーダルをシンプルに（文字を出さない）。× の閉じるボタン、下に製品のサムネイルを並べて切り替える */
.sgk-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sgk-vl-dlg__box { display: flex; flex-direction: column; padding: 10px 10px 12px; }
.sgk-vl-dlg__close { align-self: flex-end; position: relative; width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: 0 0 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); cursor: pointer; }
.sgk-vl-dlg__close span::before, .sgk-vl-dlg__close span::after { content: ""; position: absolute; left: 13px; top: 21px; width: 18px; height: 2px; border-radius: 1px; background: #fff; transform: rotate(45deg); }
.sgk-vl-dlg__close span::after { transform: rotate(-45deg); }
.sgk-vl-dlg__close:hover { background: rgba(255, 255, 255, .24); }
.sgk-vl-dlg__tabs { position: relative; display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 10px; margin-top: 12px; padding: 4px 4px 10px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding-inline: 4px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent; } /* 0.5.70：2段にせず、1行で横に送る */
.sgk-vl-dlg__tabs > :first-child { margin-left: auto; } .sgk-vl-dlg__tabs > :last-child { margin-right: auto; } /* はみ出さないときは中央に */
.sgk-vl-dlg__tabs::-webkit-scrollbar { height: 6px; } .sgk-vl-dlg__tabs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.35); border-radius: 3px; }
.sgk-vl-dlg__tabs[hidden] { display: none; }
.sgk-vl-dlg__tab { flex: none; scroll-snap-align: start; width: 112px; aspect-ratio: 16 / 9; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: #000; cursor: pointer; opacity: .55; }
.sgk-vl-dlg__tab img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sgk-vl-dlg__tab:hover { opacity: .85; }
.sgk-vl-dlg__tab[aria-pressed="true"] { opacity: 1; border-color: var(--sg2-sun, #FFD84D); }
.sgk-vl-dlg__tab:focus-visible { outline: 3px solid var(--sg2-sun, #FFD84D); outline-offset: 2px; opacity: 1; }
.sgk-vl-dlg { width: min(92vw, 960px, calc((100vh - 200px) * 16 / 9)); }
@supports (height: 100dvh) { .sgk-vl-dlg { width: min(92vw, 960px, calc((100dvh - 200px) * 16 / 9)); } }
@media (max-width: 599px) { .sgk-vl-dlg { width: 94vw; } .sgk-vl-dlg__tab { width: 88px; } }


/* 0.5.62：「気になる」の用語を QR コードで開く */
.sgk-qr{border:0;border-radius:24px;padding:28px 28px 24px;width:min(92vw,420px);max-width:420px;max-height:92vh;overflow:auto;color:#13201A;background:#fff;box-shadow:0 24px 60px rgba(19,32,26,.28);text-align:left}
.sgk-qr::backdrop{background:rgba(19,32,26,.55)}
.sgk-qr--inline{margin-top:16px;border:1px solid #DCE9D8;box-shadow:none;width:auto}
.sgk-qr__h{margin:0 0 .5rem;font-size:1.25rem;font-weight:800;line-height:1.4}
.sgk-qr__lead{margin:0;font-size:.9375rem;line-height:1.8;color:#3B4A41}
.sgk-qr__img{display:block;width:100%;max-width:280px;height:auto;margin:18px auto;border-radius:12px;border:1px solid #DCE9D8}
.sgk-qr__warn{margin:0 0 .5rem;padding:10px 12px;border-radius:10px;background:#FFF4C7;font-size:.8125rem;line-height:1.7}
.sgk-qr__note{margin:0;font-size:.8125rem;line-height:1.7;color:#3B4A41}
.sgk-qr__acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:18px}
@media (max-width:600px){.sgk-qr{padding:22px 18px 18px;border-radius:18px}}

/* 0.5.74：「気になる」のページの入り口（この30日に公開したコラムと用語） */
.sgk-new { margin: 0 0 2.5rem; padding: 1.75rem; border-radius: 20px; background: var(--sg2-tint, #F1F6EF); }
.sgk-new.is-below { margin: 2.5rem 0 0; }
.sgk-new .sgk-new__title { margin: 0 0 .375rem; font-size: 1.375rem; line-height: 1.4; }
.sgk-new .sgk-new__lead { margin: 0 0 1.25rem; font-size: .9375rem; line-height: 1.7; color: var(--sg2-ink, #13201A); }
.sgk-new__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.25rem; }
.sgk-new__group { padding: 1.25rem; border-radius: 16px; background: #fff; min-width: 0; }
.sgk-new .sgk-new__h { margin: 0 0 .75rem; font-size: 1rem; line-height: 1.5; }
.sgk-new .sgk-new__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.sgk-new .sgk-new__item { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 10px 0; border-top: 1px solid #E2E9DF; }
.sgk-new .sgk-new__item:first-child { border-top: 0; padding-top: 0; }
.sgk-new .sgk-new__a { grid-column: 1; color: var(--sg2-ink, #13201A); font-weight: 700; font-size: .9375rem; line-height: 1.5; text-decoration: none; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sgk-new .sgk-new__a:hover { text-decoration: underline; }
.sgk-new .sgk-new__date { grid-column: 1; font-size: .75rem; color: #4A5A50; }
.sgk-new .sgk-new__add { grid-column: 2; grid-row: 1 / span 2; }
.sgk-new .sgk-new__more { margin: .75rem 0 0; font-size: .8125rem; }
.sgk-new__set { margin: 0 0 1.25rem; padding: .875rem 1.125rem; border-radius: 14px; background: #fff; }
.sgk-new__set summary { cursor: pointer; font-weight: 700; font-size: .875rem; }
.sgk-new__set[open] summary { margin-bottom: .5rem; }
.sgk-new__chips { margin: .75rem 0 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sgk-new__legend { width: 100%; margin-bottom: 6px; font-size: .8125rem; font-weight: 700; }
.sgk-new__chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--sg2-tint, #F1F6EF); font-size: .8125rem; cursor: pointer; }
.sgk-new__chip input { margin: 0; accent-color: var(--sg2-green, #2E8F3A); }
.sgk-new__chip:has(input:checked) { background: var(--sg2-mint, #D6F0D2); font-weight: 700; }
.sgk-new__chip:focus-within { outline: 3px solid var(--sg2-deep, #13201A); outline-offset: 2px; }
.sgk-new__clear { margin-top: .75rem; }
@media (max-width: 600px) { .sgk-new { padding: 1.25rem; } .sgk-new__group { padding: 1rem; } }

.sgk-new__sets { display: grid; gap: .25rem; }

/* 0.5.78：導入のご相談で、製品が未選択のときの一言 */
.sgk-form-hint:empty { display: none; }
.sgk-form-hint { margin: .5rem 0 0; font-size: .875rem; color: #8A4B00; }

/* 0.5.79：コラムの一覧の絞り込み（すべて／未読／既読／新着）と、新着の印 */
.sgk-new-badge {
  display: inline-flex; align-items: center; margin-left: .75em; padding: .1em .65em;
  border-radius: 999px; background: #FFF1C2; color: #6B4A00;
  font-size: .75rem; font-weight: 700; line-height: 1.6; vertical-align: middle; white-space: nowrap;
}
.sgk-colfilter { display: grid; gap: .5rem; margin-top: 1.25rem; }
.sgk-colfilter__row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sgk-colfilter__label { margin-right: .25rem; font-size: .875rem; font-weight: 700; color: var(--sgk-gray); }
.sgk-colfilter__btn {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: .4rem 1rem;
  border: 1.5px solid var(--sgk-green-dark); border-radius: 999px; background: #fff; color: var(--sgk-green-dark);
  font: inherit; font-size: .9375rem; font-weight: 700; line-height: 1.4; cursor: pointer;
}
.sgk-colfilter__btn:hover { background: var(--sgk-pale); }
.sgk-colfilter__btn:focus-visible { outline: 3px solid var(--sgk-green); outline-offset: 2px; }
.sgk-colfilter__btn[aria-pressed="true"] { background: var(--sgk-green-dark); color: #fff; }
.sgk-colfilter__num { font-size: .8125rem; font-weight: 600; opacity: .85; }
.sgk-colfilter .sgk-colfilter__note { margin: 0; font-size: .8125rem; line-height: 1.7; color: var(--sgk-gray); }
.sgk-colfilter .sgk-colfilter__status { margin: 0; font-size: .875rem; font-weight: 700; color: var(--sgk-green-dark); }
.sgk-colfilter__status:empty { display: none; }
.sgk-colfilter__empty { margin: 0; font-size: .9375rem; color: var(--sgk-gray); }
.sgk-colfilter__empty[hidden], .wp-block-post[hidden] { display: none !important; }