/* tokutei-noriai: article design (.tna) shared by the top page and the guide posts. Generated; edit gen/css.py. */
.tna.tna {
  --a-primary: #006c9d;
  --a-primary-strong: #0b4d64;
  --a-primary-soft: #edf4f6;
  --a-accent: #c25000;
  --a-accent-strong: #a84500;
  --a-accent-soft: #fff3e0;
  --a-label: #b04a00;
  --a-line: #02853a;
  --a-line-strong: #026e30;
  --a-text: #1b1f24;
  --a-heading: #0b3b4e;
  --a-muted: #57606a;
  --a-subtle: #6e7781;
  --a-bg: #ffffff;
  --a-surface: #f4f9fb;
  --a-surface-2: #edf4f6;
  --a-border: #cfe0e8;
  --a-border-soft: #e2edf2;
  --a-marker: #ffe58a;
  --a-warn-bg: #fff8c5;
  --a-warn-text: #7a5200;
  --a-ok: #1a7f37;
  --a-ok-bg: #dafbe1;
  --a-radius: 8px;
  --a-radius-lg: 12px;
  --a-shadow: 0 2px 8px rgba(11, 59, 78, .08);
  --a-font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic Medium", "YuGothic", Meiryo, system-ui, -apple-system, "Segoe UI", sans-serif;
  --a-head-offset: calc(var(--tnr-header-live-h, 64px) + var(--tnr-adminbar-h, 0px) + 16px);
  color-scheme: light;
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
  color: var(--a-text);
  background: var(--a-bg);
  font-family: var(--a-font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: .02em;
  text-align: left;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.tna.tna *,
.tna.tna *::before,
.tna.tna *::after {
  box-sizing: border-box;
}

.tna.tna [hidden] {
  display: none !important;
}

.tna.tna [id] {
  scroll-margin-top: var(--a-head-offset);
}

.tna.tna svg {
  max-width: 100%;
  height: auto;
}

/* ---------- Text ---------- */

.tna.tna p {
  margin: 0 0 1.55em;
  color: var(--a-text);
  font-size: 1em;
  line-height: 1.95;
}

.tna.tna a {
  color: var(--a-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

.tna.tna a:hover {
  color: var(--a-accent-strong);
}

.tna.tna a:focus-visible,
.tna.tna summary:focus-visible,
.tna.tna button:focus-visible,
.tna.tna input:focus-visible,
.tna.tna select:focus-visible {
  outline: 3px solid rgba(0, 108, 157, .45);
  outline-offset: 2px;
  border-radius: 4px;
}

.tna.tna strong,
.tna.tna b {
  font-weight: 700;
  color: var(--a-heading);
}

.tna.tna .tna-marker {
  background: linear-gradient(transparent 58%, var(--a-marker) 58%);
  font-weight: 700;
  color: var(--a-heading);
}

.tna.tna small,
.tna.tna .tna-note {
  display: block;
  margin: 0 0 1.4em;
  font-size: .8125rem;
  line-height: 1.75;
  color: var(--a-muted);
}

.tna.tna .tna-src {
  display: block;
  margin: 10px 0 0;
  font-size: .75rem;
  line-height: 1.65;
  color: var(--a-subtle);
}

.tna.tna .tna-src a {
  color: var(--a-subtle);
}

/* ---------- Headings (editorial) ---------- */

.tna.tna h1,
.tna.tna h2,
.tna.tna h3,
.tna.tna h4 {
  font-family: var(--a-font);
  color: var(--a-heading);
  font-feature-settings: "palt";
  letter-spacing: .02em;
  text-transform: none;
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
}

.tna.tna h1 {
  margin: .35em 0 .55em;
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.125rem);
  font-weight: 800;
  line-height: 1.45;
}

.tna.tna h2 {
  position: relative;
  margin: 3.2em 0 1.1em;
  padding: 0 0 .55em;
  font-size: clamp(1.3125rem, 1.15rem + .7vw, 1.5625rem);
  font-weight: 800;
  line-height: 1.5;
  border-bottom: 2px solid var(--a-heading);
}

.tna.tna h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 64px;
  height: 2px;
  background: var(--a-accent);
}

.tna.tna h2 .tna-h-sub {
  display: block;
  margin-top: .2em;
  font-size: .78em;
  font-weight: 700;
  color: var(--a-primary);
}

.tna.tna h3 {
  margin: 2.3em 0 .9em;
  padding: .1em 0 .1em .7em;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.6;
  border-left: 4px solid var(--a-primary);
}

.tna.tna h4 {
  margin: 1.7em 0 .6em;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.6;
}

.tna.tna ul,
.tna.tna ol {
  margin: 0 0 1.6em;
  padding: 0 0 0 1.4em;
}

.tna.tna li {
  margin: .35em 0;
  line-height: 1.85;
}

.tna.tna dl {
  margin: 0 0 1.6em;
}

/* ---------- Article header (Diamond-style) ---------- */

.tna.tna .tna-head {
  padding-top: 8px;
}

.tna.tna .tna-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  font-size: .8125rem;
  line-height: 1.6;
}

.tna.tna .tna-tags li {
  margin: 0;
}

.tna.tna .tna-tags li:first-child {
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--a-label);
}

.tna.tna .tna-tags li + li {
  padding: 0 10px;
  border: 1px solid var(--a-border);
  border-radius: 999px;
  font-size: .75rem;
  color: var(--a-muted);
}

.tna.tna .tna-deck {
  margin: 0 0 14px;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--a-primary);
}

.tna.tna .tna-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0 0 22px;
  padding: 10px 0;
  border-top: 1px solid var(--a-border);
  border-bottom: 1px solid var(--a-border);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--a-subtle);
}

.tna.tna .tna-byline b {
  color: var(--a-heading);
  font-weight: 700;
}

.tna.tna .tna-lead {
  font-size: 1.0625rem;
  line-height: 2;
  color: #30363d;
}

/* ---------- Answer box ---------- */

.tna.tna .tna-answer {
  position: relative;
  margin: 30px 0 24px;
  padding: 26px 20px 16px;
  border: 2px solid var(--a-primary);
  border-radius: var(--a-radius-lg);
  background: #fff;
}

.tna.tna .tna-answer__label {
  position: absolute;
  top: -13px;
  left: 16px;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--a-primary);
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.6;
}

.tna.tna .tna-answer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tna.tna .tna-answer li {
  position: relative;
  margin: .6em 0;
  padding-left: 1.7em;
  line-height: 1.8;
}

.tna.tna .tna-answer li::before {
  content: "";
  position: absolute;
  left: .15em;
  top: .5em;
  width: .95em;
  height: .55em;
  border-left: 3px solid var(--a-accent);
  border-bottom: 3px solid var(--a-accent);
  transform: rotate(-45deg);
}

.tna.tna .tna-answer .tna-src {
  margin-top: 12px;
}

/* ---------- Buttons ---------- */

.tna.tna .tna-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 22px 0 8px;
}

.tna.tna .tna-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  margin: 0;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--a-radius);
  font-family: var(--a-font);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .04em;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  color: #fff !important;
  -webkit-text-fill-color: currentColor;
  transition: background-color .2s ease, transform .2s ease;
  touch-action: manipulation;
}

.tna.tna .tna-btn svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.tna.tna .tna-btn--primary {
  background: var(--a-accent);
}

.tna.tna .tna-btn--primary:hover {
  background: var(--a-accent-strong);
}

.tna.tna .tna-btn--line {
  background: var(--a-line);
}

.tna.tna .tna-btn--line:hover {
  background: var(--a-line-strong);
}

.tna.tna .tna-btn--outline {
  background: #fff;
  color: var(--a-primary) !important;
  border: 2px solid var(--a-primary);
}

.tna.tna .tna-btn--outline:hover {
  background: var(--a-primary-soft);
}

.tna.tna .tna-btn--small {
  min-height: 44px;
  padding: 8px 16px;
  font-size: .9375rem;
}

.tna.tna .tna-micro {
  margin: 6px 0 0;
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--a-muted);
  text-align: center;
}

.tna.tna .tna-textlink {
  margin: 0 0 1.6em;
  font-size: .9375rem;
  text-align: center;
}

/* ---------- Figures ---------- */

.tna.tna .tna-figure {
  margin: 24px 0 32px;
  padding: 20px 16px;
  border: 1px solid var(--a-border);
  border-radius: var(--a-radius-lg);
  background: #fff;
}

.tna.tna .tna-figure__title {
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--a-heading);
}

.tna.tna .tna-figure__title span {
  display: inline-block;
  margin-right: .6em;
  padding: 0 8px;
  border-radius: 4px;
  background: var(--a-primary);
  color: #fff;
  font-size: .75rem;
  letter-spacing: .04em;
  vertical-align: .12em;
}

.tna.tna .tna-figure__cap {
  margin: 14px 0 0;
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--a-muted);
}

/* key numbers */
.tna.tna .tna-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.tna.tna .tna-stat {
  margin: 0;
  padding: 16px 14px;
  border: 1px solid var(--a-border);
  border-radius: var(--a-radius);
  background: #fff;
}

.tna.tna .tna-stat__num {
  display: block;
  font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.7rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--a-primary);
}

.tna.tna .tna-stat__num small {
  display: inline;
  margin: 0;
  font-size: .55em;
  color: var(--a-primary);
}

.tna.tna .tna-stat__label {
  display: block;
  margin-top: 4px;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--a-heading);
}

.tna.tna .tna-stat__note {
  display: block;
  margin-top: 4px;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--a-subtle);
}

/* flow */
.tna.tna .tna-flow {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: tnaflow;
}

.tna.tna .tna-flow li {
  position: relative;
  margin: 0;
  padding: 12px 14px 12px 52px;
  border-radius: var(--a-radius);
  background: var(--a-primary-soft);
  counter-increment: tnaflow;
  line-height: 1.6;
}

.tna.tna .tna-flow li::before {
  content: counter(tnaflow);
  position: absolute;
  left: 12px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--a-primary);
  color: #fff;
  font-size: .875rem;
  font-weight: 700;
  transform: translateY(-50%);
}

.tna.tna .tna-flow b {
  display: block;
  font-size: .9375rem;
  color: var(--a-heading);
}

.tna.tna .tna-flow span {
  display: block;
  font-size: .8125rem;
  color: var(--a-muted);
}

/* topic hub (links to the guide articles) */
.tna.tna .tna-guides {
  margin: 1.2em 0 0;
}

.tna.tna .tna-guide {
  margin: 0 0 8px;
  border: 1px solid var(--a-border);
  border-radius: var(--a-radius);
  background: #fff;
}

.tna.tna .tna-guide > summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 48px 12px 16px;
  font-weight: 700;
  color: var(--a-heading);
  line-height: 1.5;
  list-style: none;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.tna.tna .tna-guide > summary::-webkit-details-marker {
  display: none;
}

.tna.tna .tna-guide > summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--a-accent);
}

.tna.tna .tna-guide[open] > summary::after {
  content: "\2212";
}

.tna.tna .tna-guide__count {
  margin-left: auto;
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--a-surface);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--a-muted);
}

.tna.tna .tna-guide__body {
  padding: 0 16px 14px;
  font-size: .9375rem;
}

.tna.tna .tna-guide__body > p {
  margin: 0;
  line-height: 1.8;
}

.tna.tna .tna-guides__list {
  margin: .5em 0 0;
  padding-left: 1.2em;
  line-height: 1.7;
}

.tna.tna .tna-guides__list li {
  margin: .3em 0;
}

.tna.tna .tna-guides__more {
  margin: .5em 0 0;
  font-size: .875rem;
  font-weight: 700;
}

/* cards */
.tna.tna .tna-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tna.tna .tna-card {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--a-border);
  border-radius: var(--a-radius);
  background: #fff;
  line-height: 1.7;
}

.tna.tna .tna-card > b {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  color: var(--a-heading);
}

.tna.tna .tna-card p {
  margin: .35em 0 0;
  font-size: .9375rem;
  line-height: 1.8;
}

.tna.tna .tna-num {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--a-accent);
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: 0;
}

.tna.tna .tna-num--navy {
  background: var(--a-primary);
}

/* matrix */
.tna.tna .tna-matrix {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tna.tna .tna-matrix li {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--a-border);
  border-radius: var(--a-radius);
  background: #fff;
  line-height: 1.75;
}

.tna.tna .tna-matrix b {
  display: block;
  margin-bottom: 2px;
  font-size: 1rem;
  color: var(--a-primary);
}

/* tables */
.tna.tna .tna-table-wrap {
  margin: 20px 0 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--a-border);
  border-radius: var(--a-radius);
  background: #fff;
}

.tna.tna table.tna-table {
  width: 100%;
  min-width: 560px;
  margin: 0;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: .875rem;
  line-height: 1.7;
  background: #fff;
}

.tna.tna table.tna-table--narrow {
  min-width: 0;
}

.tna.tna .tna-table caption {
  padding: 10px 12px;
  caption-side: top;
  font-size: .8125rem;
  font-weight: 700;
  text-align: left;
  color: var(--a-heading);
  background: var(--a-surface);
}

.tna.tna .tna-table th,
.tna.tna .tna-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--a-border-soft);
  border-right: 1px solid var(--a-border-soft);
  text-align: left;
  vertical-align: top;
  color: var(--a-text);
  background: #fff;
}

.tna.tna .tna-table thead th {
  background: var(--a-primary);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}

.tna.tna .tna-table tbody th {
  background: var(--a-primary-soft);
  color: var(--a-heading);
  font-weight: 700;
  white-space: nowrap;
}

.tna.tna .tna-table tbody tr:nth-child(even) td {
  background: #fafbfc;
}

.tna.tna .tna-table td.tna-num-cell {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tna.tna .tna-table--sheet td {
  height: 2.8em;
}

.tna.tna .tna-scroll-hint {
  margin: 0 0 24px;
  font-size: .75rem;
  color: var(--a-subtle);
  text-align: right;
}

/* boxes */
.tna.tna .tna-box {
  margin: 24px 0;
  padding: 18px 18px 4px;
  border-left: 5px solid var(--a-primary);
  border-radius: var(--a-radius);
  background: var(--a-primary-soft);
}

.tna.tna .tna-box__title {
  display: block;
  margin: 0 0 .5em;
  font-weight: 700;
  color: var(--a-heading);
}

.tna.tna .tna-box p,
.tna.tna .tna-box ul,
.tna.tna .tna-box ol {
  margin-bottom: 1em;
}

.tna.tna .tna-box--warn {
  border-left-color: #bf8700;
  background: var(--a-warn-bg);
}

.tna.tna .tna-box--warn .tna-box__title {
  color: var(--a-warn-text);
}

.tna.tna .tna-box--accent {
  border-left-color: var(--a-accent);
  background: var(--a-accent-soft);
}

.tna.tna .tna-box--plain {
  border: 1px solid var(--a-border);
  border-left-width: 1px;
  background: var(--a-surface);
}

/* check / cross lists */
.tna.tna .tna-check,
.tna.tna .tna-cross {
  margin: 0 0 1.6em;
  padding: 0;
  list-style: none;
}

.tna.tna .tna-check li,
.tna.tna .tna-cross li {
  position: relative;
  margin: 0;
  padding: 10px 0 10px 2.1em;
  border-bottom: 1px dashed var(--a-border);
}

.tna.tna .tna-check li::before {
  content: "";
  position: absolute;
  left: .1em;
  top: .95em;
  width: 1.15em;
  height: 1.15em;
  border: 2px solid var(--a-primary);
  border-radius: 4px;
  background: #fff;
}

.tna.tna .tna-check li::after {
  content: "";
  position: absolute;
  left: .42em;
  top: 1.1em;
  width: .55em;
  height: .32em;
  border-left: 2px solid var(--a-primary);
  border-bottom: 2px solid var(--a-primary);
  transform: rotate(-45deg);
}

.tna.tna .tna-cross li::before,
.tna.tna .tna-cross li::after {
  content: "";
  position: absolute;
  left: .25em;
  top: 1.35em;
  width: 1em;
  height: 2px;
  background: var(--a-label);
  transform: rotate(45deg);
}

.tna.tna .tna-cross li::after {
  transform: rotate(-45deg);
}

/* horizontal bars (data figures) */
.tna.tna .tna-bars {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tna.tna .tna-bars li {
  display: grid;
  grid-template-columns: minmax(7.5em, 34%) 1fr;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: .8125rem;
  line-height: 1.45;
}

.tna.tna .tna-bars__label {
  color: var(--a-heading);
}

.tna.tna .tna-bars__track {
  position: relative;
  height: 28px;
  border-radius: 6px;
  background: var(--a-surface-2);
  overflow: hidden;
}

.tna.tna .tna-bars__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--v);
  border-radius: 6px;
  background: var(--a-primary);
}

.tna.tna .tna-bars__fill--accent {
  background: var(--a-accent);
}

.tna.tna .tna-bars__fill--muted {
  background: #9aa7b6;
}

.tna.tna .tna-bars__val {
  position: absolute;
  right: 6px;
  top: 50%;
  padding: 1px 8px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--a-border);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--a-heading);
  transform: translateY(-50%);
  font-variant-numeric: tabular-nums;
}

/* meters (cap usage) */
.tna.tna .tna-meters {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tna.tna .tna-meters li {
  margin: 0 0 16px;
}

.tna.tna .tna-meters__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 10px;
  margin-bottom: 6px;
  font-size: .875rem;
  line-height: 1.5;
}

.tna.tna .tna-meters__head b {
  color: var(--a-heading);
}

.tna.tna .tna-meters__head span {
  color: var(--a-muted);
  font-variant-numeric: tabular-nums;
}

.tna.tna .tna-meters__track {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: var(--a-surface-2);
  overflow: hidden;
}

.tna.tna .tna-meters__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--v);
  border-radius: 999px;
  background: var(--a-primary);
}

.tna.tna .tna-meters__fill--high {
  background: var(--a-accent);
}

/* formula */
.tna.tna .tna-formula {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  font-weight: 700;
  text-align: center;
  color: var(--a-heading);
}

.tna.tna .tna-formula span {
  display: inline-block;
  padding: 10px 12px;
  border-radius: var(--a-radius);
  background: var(--a-primary-soft);
  font-size: .9375rem;
  line-height: 1.45;
}

.tna.tna .tna-formula small {
  display: block;
  margin: 2px 0 0;
  font-size: .75rem;
  font-weight: 400;
  color: var(--a-muted);
}

.tna.tna .tna-formula .tna-formula__total {
  background: var(--a-primary);
  color: #fff;
}

.tna.tna .tna-formula i {
  font-style: normal;
  font-size: 1.125rem;
  color: var(--a-accent);
}

/* span chart (who works when) */
.tna.tna .tna-span__steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  font-size: .75rem;
  line-height: 1.4;
  text-align: center;
}

.tna.tna .tna-span__steps li {
  margin: 0;
  padding: 8px 4px;
  border-radius: 6px;
  background: var(--a-surface-2);
  font-weight: 700;
  color: var(--a-heading);
}

.tna.tna .tna-span__bar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0 0 8px;
}

.tna.tna .tna-span__bar span {
  padding: 7px 10px;
  border-radius: 999px;
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tna.tna .tna-span__bar--a span {
  grid-column: 1 / 4;
  background: var(--a-primary);
}

.tna.tna .tna-span__bar--b span {
  grid-column: 3 / 6;
  background: var(--a-accent);
}

/* pillars, lanes */
.tna.tna .tna-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tna.tna .tna-pillars li {
  margin: 0;
  padding: 16px;
  border-top: 4px solid var(--a-primary);
  border-radius: var(--a-radius);
  background: var(--a-surface);
  line-height: 1.75;
}

.tna.tna .tna-pillars b {
  display: block;
  margin-bottom: 4px;
  color: var(--a-heading);
}

.tna.tna .tna-lanes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.tna.tna .tna-lane {
  padding: 14px;
  border: 1px solid var(--a-border);
  border-radius: var(--a-radius);
}

.tna.tna .tna-lane__title {
  margin: 0 0 10px;
  font-weight: 700;
  color: var(--a-heading);
}

.tna.tna .tna-lane ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tna.tna .tna-lane li {
  margin: 0 0 6px;
  padding: 8px 10px 8px 14px;
  border-left: 3px solid var(--a-primary);
  border-radius: 0 6px 6px 0;
  background: var(--a-primary-soft);
  font-size: .875rem;
  line-height: 1.6;
}

.tna.tna .tna-lane--b li {
  border-left-color: var(--a-accent);
  background: var(--a-accent-soft);
}

.tna.tna .tna-lane__note {
  margin: 8px 0 0;
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--a-muted);
}

/* ratio example */
.tna.tna .tna-ratio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tna.tna .tna-ratio li {
  margin: 0;
  padding: 14px 16px;
  border: 1px dashed var(--a-primary);
  border-radius: var(--a-radius);
  background: #fff;
  line-height: 1.75;
}

.tna.tna .tna-ratio b {
  display: block;
  color: var(--a-heading);
}

.tna.tna .tna-ratio em {
  font-style: normal;
  font-weight: 700;
  color: var(--a-accent-strong);
}

/* timeline */
.tna.tna .tna-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 3px solid var(--a-primary-soft);
}

.tna.tna .tna-timeline li {
  position: relative;
  margin: 0;
  padding: 0 0 18px 20px;
}

.tna.tna .tna-timeline li::before {
  content: "";
  position: absolute;
  left: -9px;
  top: .45em;
  width: 15px;
  height: 15px;
  border: 3px solid var(--a-primary);
  border-radius: 50%;
  background: #fff;
}

.tna.tna .tna-timeline .is-future::before {
  border-color: var(--a-accent);
}

.tna.tna .tna-timeline time {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--a-primary);
}

.tna.tna .tna-timeline .is-future time {
  color: var(--a-accent-strong);
}

.tna.tna .tna-timeline b {
  display: block;
  line-height: 1.6;
  color: var(--a-heading);
}

.tna.tna .tna-timeline p {
  margin: .2em 0 0;
  font-size: .9375rem;
  line-height: 1.8;
}

.tna.tna .tna-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--a-surface-2);
  color: var(--a-heading);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.7;
  vertical-align: middle;
  letter-spacing: .02em;
}

.tna.tna .tna-badge--done {
  background: var(--a-ok-bg);
  color: #116329;
}

.tna.tna .tna-badge--decided {
  background: var(--a-accent-soft);
  color: var(--a-accent-strong);
}

.tna.tna .tna-badge--pending {
  background: var(--a-warn-bg);
  color: var(--a-warn-text);
}

/* steps (HowTo) */
.tna.tna .tna-steps {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  counter-reset: tnastep;
}

.tna.tna .tna-steps li {
  position: relative;
  margin: 0;
  padding: 0 0 22px 56px;
  counter-increment: tnastep;
}

.tna.tna .tna-steps li::before {
  content: counter(tnastep);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--a-accent);
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 700;
}

.tna.tna .tna-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 44px;
  bottom: 4px;
  width: 2px;
  background: var(--a-border);
}

.tna.tna .tna-steps .tnr-steps__title {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--a-heading);
}

.tna.tna .tna-steps .tnr-steps__text {
  margin: .3em 0 0;
  font-size: .9375rem;
  line-height: 1.85;
}

.tna.tna .tna-steps--navy li::before {
  background: var(--a-primary);
}

/* chips + TOC */
.tna.tna .tna-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.tna.tna .tna-chips li {
  margin: 0;
}

.tna.tna .tna-chips a {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--a-border);
  border-radius: 999px;
  background: #fff;
  font-size: .8125rem;
  line-height: 1.45;
  text-decoration: none;
  color: var(--a-heading);
}

.tna.tna .tna-chips a:hover {
  border-color: var(--a-primary);
  color: var(--a-primary);
}

.tna.tna .tna-toc {
  margin: 28px 0;
  padding: 16px 20px 6px;
  border: 1px solid var(--a-border);
  border-radius: var(--a-radius);
  background: var(--a-surface);
}

.tna.tna .tna-toc > summary {
  display: block;
  padding: 2px 0 10px;
  list-style: none;
  font-weight: 700;
  color: var(--a-heading);
  cursor: pointer;
  touch-action: manipulation;
}

.tna.tna .tna-toc > summary::-webkit-details-marker {
  display: none;
}

.tna.tna .tna-toc > summary::after {
  content: "閉じる";
  float: right;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--a-primary);
}

.tna.tna .tna-toc:not([open]) > summary::after {
  content: "開く";
}

.tna.tna .tna-toc__group {
  margin: 4px 0 10px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--a-label);
}

.tna.tna .tna-toc ol {
  margin: 0 0 12px;
  padding-left: 1.6em;
  font-size: .9375rem;
}

.tna.tna .tna-toc li {
  margin: .25em 0;
  line-height: 1.7;
}

.tna.tna .tna-toc a.is-active {
  font-weight: 700;
  color: var(--a-accent-strong);
}

/* finder */
.tna.tna .tna-finder {
  margin: 20px 0 8px;
  padding: 18px 16px 8px;
  border: 2px solid var(--a-primary);
  border-radius: var(--a-radius-lg);
  background: #fff;
}

.tna.tna .tna-finder fieldset {
  min-width: 0;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.tna.tna .tna-finder legend {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  font-weight: 700;
  line-height: 1.6;
  color: var(--a-heading);
}

.tna.tna .tna-finder legend span {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 24px;
  margin-right: 8px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--a-primary);
  color: #fff;
  font-size: .75rem;
  vertical-align: .08em;
}

.tna.tna .tna-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tna.tna .tna-opt {
  position: relative;
  display: inline-flex;
  margin: 0;
  cursor: pointer;
}

.tna.tna .tna-opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.tna.tna .tna-opt span {
  display: inline-block;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--a-border);
  border-radius: 999px;
  background: #fff;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--a-heading);
  touch-action: manipulation;
}

.tna.tna .tna-opt input:checked + span {
  border-color: var(--a-primary);
  background: var(--a-primary);
  color: #fff;
}

.tna.tna .tna-opt input:focus-visible + span {
  outline: 3px solid rgba(0, 108, 157, .45);
  outline-offset: 2px;
}

.tna.tna .tna-finder__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 12px;
}

.tna.tna .tna-finder__actions .tna-btn {
  flex: 1 1 200px;
}

.tna.tna .tna-finder__result {
  margin: 16px 0 24px;
  padding: 18px 18px 6px;
  border-radius: var(--a-radius-lg);
  background: var(--a-primary-soft);
}

.tna.tna .tna-finder__result h3 {
  margin: 0 0 .6em;
  padding: 0;
  border: 0;
  font-size: 1.125rem;
}

.tna.tna .tna-finder__result h4 {
  margin: 1.2em 0 .4em;
}

.tna.tna .tna-finder__result ul {
  margin-bottom: 1em;
}

/* calculator */
.tna.tna .tna-calc {
  margin: 20px 0 8px;
  padding: 18px 16px;
  border: 1px solid var(--a-border);
  border-radius: var(--a-radius-lg);
  background: var(--a-surface);
}

.tna.tna .tna-calc__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

.tna.tna .tna-calc label {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--a-heading);
}

.tna.tna .tna-calc input,
.tna.tna .tna-calc select {
  display: block;
  width: 100%;
  min-height: 46px;
  margin: 6px 0 0;
  padding: 8px 12px;
  border: 1px solid #c5ccd5;
  border-radius: var(--a-radius);
  background: #fff !important;
  color: var(--a-text) !important;
  -webkit-text-fill-color: var(--a-text);
  font-family: var(--a-font);
  font-size: 16px;
  line-height: 1.5;
  box-shadow: none;
}

.tna.tna .tna-calc__out {
  display: block;
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: var(--a-radius);
  background: var(--a-primary);
  color: #fff;
  font-size: .9375rem;
  line-height: 1.8;
}

.tna.tna .tna-calc__out b {
  color: #fff;
  font-size: 1.375rem;
  letter-spacing: 0;
}

.tna.tna .tna-calc__out span {
  display: block;
  font-size: .8125rem;
  color: #dfe6ee;
}

/* interviews (想定ケース) */
.tna.tna .tna-label-note {
  display: block;
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px dashed var(--a-subtle);
  border-radius: var(--a-radius);
  background: var(--a-surface);
  font-size: .875rem;
  line-height: 1.75;
  color: var(--a-muted);
}

.tna.tna .tna-case {
  margin: 0 0 28px;
  padding: 20px 18px 6px;
  border: 1px solid var(--a-border);
  border-radius: var(--a-radius-lg);
  background: #fff;
}

.tna.tna .tna-case__head {
  margin: 0 0 12px;
}

.tna.tna .tna-case__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 6px;
}

.tna.tna .tna-case__no {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--a-primary);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.tna.tna .tna-case__tag {
  padding: 1px 8px;
  border: 1px solid var(--a-subtle);
  border-radius: 4px;
  font-size: .6875rem;
  font-weight: 700;
  color: var(--a-muted);
}

.tna.tna .tna-case__title {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 1.125rem !important;
  font-weight: 800;
  line-height: 1.55;
  color: var(--a-heading);
}

.tna.tna .tna-case__who {
  display: block;
  margin: 6px 0 0;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--a-muted);
}

.tna.tna .tna-case__result {
  margin: 12px 0 16px;
  padding: 14px 16px 4px;
  border-radius: var(--a-radius);
  background: var(--a-accent-soft);
}

.tna.tna .tna-case__result p {
  margin: 0 0 .5em;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--a-accent-strong);
}

.tna.tna .tna-case__result ul {
  margin: 0 0 .8em;
  padding-left: 1.2em;
  font-size: .9375rem;
}

.tna.tna .tna-qa {
  margin: 0;
}

.tna.tna .tna-qa__q {
  margin: 1.3em 0 .5em;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.75;
  color: var(--a-primary);
}

.tna.tna .tna-qa__a {
  margin: 0 0 1em;
  font-size: .9375rem;
  line-height: 1.95;
}

.tna.tna .tna-case__point {
  margin: 16px 0 14px;
  padding: 12px 14px;
  border-left: 4px solid var(--a-primary);
  background: var(--a-surface);
  font-size: .875rem;
  line-height: 1.8;
}

.tna.tna .tna-case__point b {
  display: block;
  margin-bottom: 2px;
  font-size: .8125rem;
  color: var(--a-primary);
}

/* voices */
.tna.tna .tna-voice {
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid var(--a-border);
  border-radius: var(--a-radius);
  background: #fff;
}

.tna.tna .tna-voice p {
  margin: 0 0 .6em;
  font-size: .9375rem;
  line-height: 1.85;
}

.tna.tna .tna-voice cite {
  display: block;
  font-size: .75rem;
  font-style: normal;
  color: var(--a-subtle);
}

/* field cards */
.tna.tna .tna-fieldgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0 0 24px;
}

.tna.tna .tna-field {
  padding: 16px 16px 6px;
  border: 1px solid var(--a-border);
  border-radius: var(--a-radius-lg);
  background: #fff;
}

.tna.tna .tna-field__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 6px;
}

.tna.tna .tna-field__name {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 1.0625rem !important;
  font-weight: 800;
  line-height: 1.5;
}

.tna.tna .tna-field__min {
  font-size: .75rem;
  color: var(--a-subtle);
}

.tna.tna .tna-status {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.7;
  background: var(--a-ok-bg);
  color: #116329;
}

.tna.tna .tna-status--paused {
  background: var(--a-accent-soft);
  color: var(--a-accent-strong);
}

.tna.tna .tna-status--preparing {
  background: var(--a-warn-bg);
  color: var(--a-warn-text);
}

.tna.tna .tna-field p {
  margin: 0 0 .7em;
  font-size: .9375rem;
  line-height: 1.85;
}

.tna.tna .tna-field ul {
  margin: 0 0 .8em;
  padding-left: 1.2em;
  font-size: .875rem;
}

.tna.tna .tna-field__ask {
  font-size: .8125rem !important;
  color: var(--a-muted);
}

/* regions */
.tna.tna .tna-regions {
  margin: 0 0 1.6em;
  padding: 0;
  list-style: none;
}

.tna.tna .tna-regions li {
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px dashed var(--a-border);
  font-size: .9375rem;
  line-height: 1.8;
}

.tna.tna .tna-regions b {
  display: inline-block;
  min-width: 7em;
  color: var(--a-primary);
}

/* myths */
.tna.tna .tna-myths {
  margin: 0 0 1.6em;
  padding: 0;
  list-style: none;
}

.tna.tna .tna-myths li {
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 1px solid var(--a-border);
  border-radius: var(--a-radius);
  background: #fff;
}

.tna.tna .tna-myths__m {
  display: block;
  margin: 0 0 6px;
  font-weight: 700;
  color: var(--a-label);
}

.tna.tna .tna-myths__m::before {
  content: "思い込み";
  display: inline-block;
  margin-right: 8px;
  padding: 0 8px;
  border-radius: 4px;
  background: var(--a-label);
  color: #fff;
  font-size: .6875rem;
  vertical-align: .12em;
}

.tna.tna .tna-myths__f {
  display: block;
  font-size: .9375rem;
  line-height: 1.85;
}

.tna.tna .tna-myths__f::before {
  content: "実際は";
  display: inline-block;
  margin-right: 8px;
  padding: 0 8px;
  border-radius: 4px;
  background: var(--a-primary);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  vertical-align: .12em;
}

/* glossary */
.tna.tna .tna-glossary dt {
  margin: 1.1em 0 .2em;
  font-weight: 700;
  color: var(--a-heading);
}

.tna.tna .tna-glossary dd {
  margin: 0 0 .4em;
  padding: 0 0 .9em;
  border-bottom: 1px dashed var(--a-border);
  font-size: .9375rem;
  line-height: 1.85;
}

/* FAQ */
.tna.tna .tna-faq-group {
  margin: 0 0 28px;
}

.tna.tna .tna-faq-group h3 {
  margin-top: 1.8em;
}

.tna.tna details.tna-faq__item {
  margin: 0;
  border-bottom: 1px solid var(--a-border);
  background: #fff;
}

.tna.tna details.tna-faq__item:first-of-type {
  border-top: 1px solid var(--a-border);
}

.tna.tna .tna-faq__item > summary {
  position: relative;
  display: block;
  padding: 14px 40px 14px 44px;
  list-style: none;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--a-heading);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 108, 157, .08);
}

.tna.tna .tna-faq__item > summary::-webkit-details-marker {
  display: none;
}

.tna.tna .tna-faq__item > summary::before {
  content: "Q";
  position: absolute;
  left: 4px;
  top: 13px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--a-primary);
  color: #fff;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: 0;
}

.tna.tna .tna-faq__item > summary::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 22px;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--a-primary);
  border-bottom: 2px solid var(--a-primary);
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.tna.tna .tna-faq__item[open] > summary::after {
  top: 26px;
  transform: rotate(-135deg);
}

.tna.tna .tna-faq__a {
  position: relative;
  padding: 0 8px 16px 44px;
}

.tna.tna .tna-faq__a::before {
  content: "A";
  position: absolute;
  left: 4px;
  top: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--a-accent);
  color: #fff;
  font-size: .875rem;
  font-weight: 700;
}

.tna.tna .tna-faq__a p {
  margin: 0 0 .6em;
  font-size: .9375rem;
  line-height: 1.9;
}

.tna.tna .tna-faq__a p:last-child {
  margin-bottom: 0;
}

/* sources */
.tna.tna .tna-sources {
  margin: 0 0 1.6em;
  padding: 0 0 0 1.4em;
  font-size: .875rem;
  line-height: 1.7;
}

.tna.tna .tna-sources li {
  margin: .45em 0;
}

.tna.tna .tna-changelog {
  margin: 0 0 1.6em;
  padding: 0;
  list-style: none;
  font-size: .875rem;
}

.tna.tna .tna-changelog li {
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px dashed var(--a-border);
  line-height: 1.75;
}

.tna.tna .tna-changelog time {
  display: inline-block;
  min-width: 9em;
  font-weight: 700;
  color: var(--a-primary);
}

/* contact band */
.tna.tna .tna-contact {
  margin: 48px 0 0;
  padding: 28px 20px;
  border-radius: var(--a-radius-lg);
  background: var(--a-primary-strong);
  color: #fff;
}

.tna.tna .tna-contact h2 {
  margin-top: 0;
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, .6);
}

.tna.tna .tna-contact p,
.tna.tna .tna-contact li {
  color: #fff;
}

.tna.tna .tna-contact strong {
  color: #fff;
}

.tna.tna .tna-contact ul {
  margin-bottom: 1em;
}

.tna.tna .tna-contact .tna-micro {
  color: #dfe6ee;
}

.tna.tna .tna-contact a:not(.tna-btn) {
  color: #fff;
}

.tna.tna .tna-after-box {
  margin: 20px 0;
  padding: 18px;
  border: 1px solid var(--a-border);
  border-radius: var(--a-radius);
  background: var(--a-surface);
}

.tna.tna .tna-ps {
  margin: 28px 0 40px;
  padding: 18px 20px;
  border-left: 4px solid var(--a-accent);
  background: #fff;
  font-size: .9375rem;
}

.tna.tna .tna-endnav {
  margin: 8px 0 32px;
  padding: 16px 18px;
  border-radius: var(--a-radius);
  background: var(--a-surface);
  font-size: .875rem;
}

.tna.tna .tna-endnav p {
  margin: 0 0 .4em;
  font-weight: 700;
  color: var(--a-heading);
}

.tna.tna .tna-endnav ul {
  margin: 0;
}

/* copy protection follows the theme setting (body.tnr-protect; editors are exempt) */
body.tnr-protect .tna.tna {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body.tnr-protect .tna.tna :is(input, textarea, select, [contenteditable], .tnr-allow-copy) {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}


/* ---------- Contact Form 7 (shortcode widget placed after the article) ---------- */

.elementor-widget-shortcode .wpcf7,
.tna-form-zone .wpcf7,
body .wpcf7 {
  box-sizing: border-box;
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
  padding: 28px 20px 24px;
  color: #1b1f24;
}

body .wpcf7 *,
body .wpcf7 *::before,
body .wpcf7 *::after {
  box-sizing: border-box;
}

body .wpcf7 form p {
  margin: 0 0 4px;
  color: #1b1f24;
}

body .wpcf7 label {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: #0b3b4e !important;
  -webkit-text-fill-color: #0b3b4e;
}

body .wpcf7 input[type=text],
body .wpcf7 input[type=email],
body .wpcf7 input[type=tel],
body .wpcf7 input[type=url],
body .wpcf7 input[type=number],
body .wpcf7 input[type=date],
body .wpcf7 select,
body .wpcf7 textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  margin: 6px 0 16px;
  padding: 12px 14px;
  border: 1px solid #c5ccd5;
  border-radius: 8px;
  background: #ffffff !important;
  color: #1b1f24 !important;
  -webkit-text-fill-color: #1b1f24;
  caret-color: #1b1f24;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.6;
  box-shadow: none;
  opacity: 1;
}

body .wpcf7 ::placeholder {
  color: #6e7781 !important;
  -webkit-text-fill-color: #6e7781;
  opacity: 1;
}

body .wpcf7 textarea {
  min-height: 170px;
}

body .wpcf7 input:focus,
body .wpcf7 select:focus,
body .wpcf7 textarea:focus {
  border-color: #006c9d;
  outline: 3px solid rgba(0, 108, 157, .35);
  outline-offset: 0;
}

body .wpcf7 .wpcf7-list-item-label,
body .wpcf7 .wpcf7-acceptance,
body .wpcf7 .wpcf7-checkbox,
body .wpcf7 .wpcf7-radio {
  color: #1b1f24 !important;
  -webkit-text-fill-color: #1b1f24;
}

body .wpcf7 input[type=submit],
body .wpcf7 .wpcf7-submit {
  display: block;
  width: 100%;
  min-height: 56px;
  margin: 8px 0 0;
  padding: 12px 20px;
  border: 0;
  border-radius: 8px;
  background: #c25000 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  touch-action: manipulation;
}

body .wpcf7 input[type=submit]:hover,
body .wpcf7 .wpcf7-submit:hover {
  background: #a84500 !important;
}

body .wpcf7 input[type=submit]:disabled {
  opacity: .6;
  cursor: not-allowed;
}

body .wpcf7 .wpcf7-not-valid-tip {
  color: #b04a00 !important;
  font-size: 14px;
}

body .wpcf7 .wpcf7-spinner {
  margin: 8px auto 0;
}

body .wpcf7 form .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: #f4f9fb;
  color: #1b1f24 !important;
  font-size: 15px;
  line-height: 1.7;
}

body .wpcf7 form.sent .wpcf7-response-output {
  border-color: #1a7f37;
  background: #dafbe1;
}

body .wpcf7 form.invalid .wpcf7-response-output,
body .wpcf7 form.failed .wpcf7-response-output,
body .wpcf7 form.spam .wpcf7-response-output {
  border-color: #bf8700;
  background: #fff8c5;
}

/* ---------- Breakpoints ---------- */

@media (min-width: 600px) {
  .tna.tna .tna-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tna.tna .tna-cta {
    flex-direction: row;
  }

  .tna.tna .tna-cta .tna-btn {
    flex: 1 1 0;
  }

  .tna.tna .tna-cards,
  .tna.tna .tna-matrix,
  .tna.tna .tna-lanes,
  .tna.tna .tna-ratio {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tna.tna .tna-pillars {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tna.tna .tna-figure {
    padding: 24px;
  }

  .tna.tna .tna-contact {
    padding: 36px 32px;
  }

  .tna.tna .tna-case {
    padding: 24px 26px 8px;
  }
}

@media (min-width: 768px) {
  .tna.tna {
    padding: 0 24px;
  }

  .tna.tna .tna-flow--row {
    flex-direction: row;
    gap: 14px;
  }

  .tna.tna .tna-flow--row li {
    flex: 1 1 0;
    padding: 46px 10px 12px;
    text-align: center;
  }

  .tna.tna .tna-flow--row li::before {
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
  }
}

@media (max-width: 420px) {
  .tna.tna {
    padding: 0 16px;
    font-size: 16px;
  }

  .tna.tna .tna-span__bar span {
    padding: 6px 8px;
    font-size: .6875rem;
  }

  .tna.tna .tna-calc__grid {
    grid-template-columns: 1fr;
  }

  .tna.tna .tna-bars li {
    grid-template-columns: minmax(6.5em, 38%) 1fr;
  }

  body .wpcf7 {
    padding: 24px 16px 24px;
  }
}

@media (max-width: 767px) {
  body .wpcf7 input[type=submit],
  body .wpcf7 .wpcf7-submit {
    width: calc(100% - 56px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tna.tna *,
  .tna.tna *::before,
  .tna.tna *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Design 1.2: comparison-site look (blue, teal, orange) ---------- */

.tna.tna {
  --a-sky: #01a0e9;
  --a-teal: #36b498;
  --a-orange: #ffa215;
  --a-band: #edf4f6;
  --a-chip: #cde6ed;
  --a-chip-line: #9ccfe3;
  --a-value: #1d7a80;
  --a-grad: linear-gradient(90deg, #36b498 0%, #01a0e9 100%);
  --a-grad-strong: linear-gradient(90deg, #1d7f6c 0%, #036a9e 100%);
  --a-cta: linear-gradient(180deg, #f8991d 0%, #ec7500 52%, #c25000 100%);
  --a-cta-hover: linear-gradient(180deg, #ec8a10 0%, #d86800 52%, #a84500 100%);
}

/* Service name above the title (top page) */
.tna.tna .tna-brandmark {
  margin: 0 0 14px;
  line-height: 1.3;
}

.tna.tna .tna-brandmark__bubble {
  position: relative;
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 12px;
  border: 2px solid var(--a-sky);
  border-radius: 6px;
  background: #fff;
  color: var(--a-primary-strong);
  font-size: .8125rem;
  font-weight: 800;
  line-height: 1.5;
}

.tna.tna .tna-brandmark__bubble > span {
  display: inline-block;
}

.tna.tna .tna-brandmark__bubble::after {
  content: "";
  position: absolute;
  left: 22px;
  bottom: -8px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-right: 2px solid var(--a-sky);
  border-bottom: 2px solid var(--a-sky);
  transform: rotate(45deg);
}

.tna.tna .tna-brandmark__name {
  display: block;
  width: fit-content;
  color: var(--a-primary-strong);
  font-size: clamp(1.625rem, 7.6vw, 2.75rem);
  font-weight: 900;
  letter-spacing: .04em;
  white-space: nowrap;
  background: linear-gradient(transparent 68%, rgba(255, 162, 21, .38) 68%);
}

/* Headings: light band with a teal-to-sky bar */
.tna.tna h2 {
  padding: .7em .9em .7em 1.05em;
  border-bottom: 0;
  border-radius: 8px;
  background: var(--a-band);
}

.tna.tna h2::after {
  top: .6em;
  bottom: .6em;
  left: 0;
  width: 5px;
  height: auto;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #36b498 0%, #01a0e9 100%);
}

.tna.tna h3 {
  border-left-color: var(--a-sky);
}

/* Buttons: orange call to action with a moving shine, LINE in green */
.tna.tna .tna-btn--primary,
.tna.tna .tna-btn--line {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 3px 3px 0 #d8d7d7;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
}

.tna.tna .tna-btn--primary {
  background-color: var(--a-accent);
  background-image: var(--a-cta);
}

.tna.tna .tna-btn--primary:hover {
  background-color: var(--a-accent-strong);
  background-image: var(--a-cta-hover);
}

.tna.tna .tna-btn--line {
  background-color: var(--a-line);
  background-image: linear-gradient(180deg, #08a648 0%, #02853a 100%);
}

.tna.tna .tna-btn--line:hover {
  background-image: none;
}

.tna.tna .tna-btn--primary::after,
.tna.tna .tna-btn--line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 30%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-120%) skewX(-20deg);
  animation: tna-shine 3.6s ease-in-out infinite;
  pointer-events: none;
}

.tna.tna .tna-btn--line::after {
  animation-delay: 1.2s;
}

@keyframes tna-shine {
  0% {
    transform: translateX(-120%) skewX(-20deg);
  }
  28%,
  100% {
    transform: translateX(420%) skewX(-20deg);
  }
}

/* Tabs inside the article (question groups, interviews); without JavaScript every panel is shown */
.tna.tna .tnr-tabs__hint {
  margin: 0 0 10px;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--a-muted);
}

.tna.tna .tnr-tabs:not(.is-tabbed) .tnr-tabs__hint {
  display: none;
}

.tna.tna .tnr-tabs__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.tna.tna .tnr-tabs__list > li {
  min-width: 0;
  margin: 0;
  padding: 0;
}

.tna.tna .tnr-tabs__list > li::before,
.tna.tna .tnr-tabs__list > li::marker {
  content: none;
  display: none;
}

.tna.tna .tnr-tabs__tab,
.tna.tna .tnr-tabs__tab:visited {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  height: 100%;
  min-height: 48px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--a-border);
  border-radius: 10px;
  background: #f4fbfe;
  color: var(--a-primary-strong);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tna.tna .tnr-tabs__tab:hover {
  border-color: var(--a-sky);
  background: #e6f5fb;
  color: var(--a-primary-strong);
}

.tna.tna .tnr-tabs.is-tabbed .tnr-tabs__tab[aria-selected="true"] {
  border-color: transparent;
  color: #fff;
  background: var(--a-grad-strong);
  box-shadow: 0 3px 0 rgba(11, 77, 100, .22);
}

.tna.tna .tnr-tabs__num {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--a-chip);
  border-radius: 50%;
  background: #fff;
  color: var(--a-primary);
  font-size: .75rem;
  font-weight: 800;
  line-height: 1;
}

.tna.tna .tnr-tabs.is-tabbed .tnr-tabs__tab[aria-selected="true"] .tnr-tabs__num {
  border-color: #fff;
  color: #036a9e;
}

.tna.tna .tnr-tabs__text {
  flex: 1 1 auto;
  min-width: 0;
}

.tna.tna .tnr-tabs.is-tabbed > .tnr-tabs__panels > [hidden] {
  display: none !important;
}

.tna.tna .tnr-tabs.is-all > .tnr-tabs__nav {
  display: none;
}

.tna.tna .tnr-tabs.is-all > .tnr-tabs__panels > [hidden] {
  display: block !important;
}

@media (min-width: 640px) {
  .tna.tna .tnr-tabs__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tna.tna .tna-faq-tabs .tna-faq-group,
.tna.tna .tna-case-tabs .tna-case {
  margin-top: 0;
}

.tna.tna .tna-field-tabs .tnr-tabs__list {
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}

.tna.tna .tna-field-tabs .tnr-tabs__tab {
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 6px 8px;
  text-align: center;
}

.tna.tna .tnr-tabs.is-tabbed .tna-fieldgrid {
  display: block;
}

.tna.tna .tnr-tabs:not(.is-tabbed) .tna-faq-group + .tna-faq-group,
.tna.tna .tnr-tabs:not(.is-tabbed) .tna-case + .tna-case {
  margin-top: 28px;
}

/* Figures and small labels in the new colours */
.tna.tna .tna-chips a {
  border-color: var(--a-chip-line);
  background: #f4fbfe;
  color: var(--a-primary-strong);
}

.tna.tna .tna-chips a:hover {
  border-color: var(--a-sky);
  background: var(--a-chip);
}

/* ---------- 1.2 review fixes ---------- */

.tna.tna h1,
.tna.tna h2,
.tna.tna h3,
.tna.tna h4,
.tna.tna th,
.tna.tna .tnr-tabs__text,
.tna.tna .tna-stat__label {
  text-wrap: balance;
  word-break: auto-phrase;
}

.tna.tna .tna-stat__num {
  white-space: nowrap;
}

/* the heading of the dark contact panel keeps its own look */
.tna.tna .tna-contact h2 {
  padding: 0;
  border-radius: 0;
  background: none;
}

.tna.tna .tna-contact h2::after {
  display: none;
}

/* the open/close mark of the questions is drawn with borders only */
.tna.tna .tna-faq__item > summary::after {
  -webkit-mask-image: none;
  mask-image: none;
  background-color: transparent;
}

.tna.tna .tna-toc ol {
  padding-left: 0;
}

/* wide tables on phones: say that they scroll sideways */
@media (max-width: 599.98px) {
  .tna.tna .tna-table-wrap::before {
    content: "表は横にスクロールできます →";
    position: sticky;
    left: 0;
    display: block;
    padding: 6px 10px;
    border-bottom: 1px solid var(--a-border);
    background: #f4fbfe;
    color: var(--a-muted);
    font-size: .75rem;
    line-height: 1.5;
  }
}

@media print {
  .tna.tna .tna-cta,
  .tna.tna .tna-finder__actions,
  .tna.tna .tna-contact .tna-btn,
  .tna.tna .tna-toc > summary::after {
    display: none !important;
  }

  .tna.tna details > *:not(summary) {
    display: block !important;
  }
}