/* 十干女子図鑑 top.css — tools/build.js が top.css を連結しコメントを除いた生成物。手で編集しない（原本は src/css/） */
@property --t-ml0 { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }
@property --t-ml1 { syntax: "<length-percentage>"; inherits: false; initial-value: 16%; }
@property --t-mr0 { syntax: "<length-percentage>"; inherits: false; initial-value: 70%; }
@property --t-mr1 { syntax: "<length-percentage>"; inherits: false; initial-value: 96%; }
@property --t-mt0 { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }
@property --t-mt1 { syntax: "<length-percentage>"; inherits: false; initial-value: 14%; }
@property --t-mb0 { syntax: "<length-percentage>"; inherits: false; initial-value: 66%; }
@property --t-mb1 { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }
.page-top :is(a, button, summary, select) { scroll-margin-block: var(--space-md); }
.page-top {
  --t-fv-gap-sub: var(--space-md);
  --t-fv-gap-cta: var(--space-sm-plus);
  --t-fv-gap-assure: var(--space-sm);
  --t-fv-gap-end: var(--space-md);
  --t-sub-lh: 26px;
  --t-assure-lh: 20px;
}
.t-fv { position: relative; display: flex; flex-direction: column; }
.t-fv-stage {
  order: 0;
  position: relative;
  height: var(--top-stage-h);
  overflow: hidden;
  container-type: size;
  background: var(--color-neutral);
}
.t-fv-portrait {
  --t-img-w: 166cqw;
  --t-face-x: 40cqw;
  --t-face-y: 40cqw;
  --t-fv-ml: 0%;
  --t-fv-mr0: 74%;
  --t-fv-mr1: 93%;
  --t-fv-mb0: 64%;
  position: absolute;
  inset: 0;
  mix-blend-mode: var(--portrait-blend);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, black var(--t-fv-ml), black var(--t-fv-mr0), transparent var(--t-fv-mr1)),
    linear-gradient(to bottom, black var(--t-fv-mb0), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, black var(--t-fv-ml), black var(--t-fv-mr0), transparent var(--t-fv-mr1)),
    linear-gradient(to bottom, black var(--t-fv-mb0), transparent 100%);
  mask-composite: intersect;
}
.t-fv-portrait picture { position: absolute; inset: 0; }
.t-fv-portrait img {
  position: absolute;
  max-width: none;
  width: var(--t-img-w);
  height: calc(var(--t-img-w) * 1.5);
  left: calc(var(--t-face-x) - var(--t-img-w) * var(--focus-x));
  top: calc(var(--t-face-y) - var(--t-img-w) * 1.5 * var(--focus-y));
  filter: var(--ink-filter);
  color: transparent;
}
.t-title {
  position: absolute;
  z-index: 2;
  top: var(--space-md);
  right: var(--space-sm-plus);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-sm);
  color: var(--color-primary);
  font-weight: inherit;
}
.t-title__main {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: var(--fluid-title-vertical);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-base);
  font-feature-settings: "vpal" 1;
  white-space: nowrap;
}
.t-title__main span { display: inline-block; }
.t-title__reading {
  writing-mode: vertical-rl;
  padding-top: var(--space-2xs);
  font-size: var(--fs-label-xs);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-logo-reading);
  font-feature-settings: "vpal" 1;
  color: var(--color-secondary);
  white-space: nowrap;
  text-shadow: var(--halo-paper);
}
.t-today {
  position: absolute;
  z-index: 2;
  left: var(--gutter-sm);
  bottom: var(--space-sm-plus);
  display: grid;
  gap: var(--space-3xs);
  padding-top: var(--space-2xs);
  border-top: var(--rule-w) solid var(--color-primary);
  color: var(--color-primary);
}
.t-gap { display: inline-block; inline-size: .25em; }
.t-dash {
  font-family: var(--font-mincho);
  font-weight: 600;
  letter-spacing: 0;
  font-feature-settings: normal;
}
.t-today__day {
  display: block;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: var(--fs-headline-sm);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-base);
  font-feature-settings: "palt" 1;
  white-space: nowrap;
}
.t-today__stem {
  font-weight: 800;
  font-size: var(--fs-headline-md);
}
.t-today__one {
  display: block;
  font-size: var(--fs-label-md);
  font-weight: 700;
  line-height: var(--lh-label-md);
  letter-spacing: var(--ls-wide);
  white-space: nowrap;
}
.t-today__one--example { font-family: var(--font-mincho); font-weight: 600; letter-spacing: var(--ls-base); }
.t-today__name {
  position: relative;
  text-decoration: underline;
  text-decoration-thickness: var(--rule-w);
  text-underline-offset: var(--space-xs);
}
.t-today__name::after {
  content: "";
  position: absolute;
  inset: calc((var(--tap-min) - var(--fs-label-md) * var(--lh-label-md)) / -2) calc(-1 * var(--space-2xs));
}
@media (max-width: 767px) {
  .page-top .site-header .logo-reading {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
.t-fv-band { order: 1; position: relative; z-index: 1; }
.t-fv-side {
  order: 2;
  display: flex;
  flex-direction: column;
  padding-inline: var(--gutter-sm);
}
.t-sub {
  order: 1;
  margin-top: var(--t-fv-gap-sub);
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: min(var(--fs-body-md), (100vw - 2 * var(--gutter-sm)) / 18.6);
  line-height: var(--t-sub-lh);
  letter-spacing: var(--ls-base);
  font-feature-settings: "palt" 1;
  text-align: center;
  white-space: nowrap;
}
.t-fv-cta { order: 2; margin-top: var(--t-fv-gap-cta); }
.t-fv-side > .t-assure { order: 3; margin-block: var(--t-fv-gap-assure) var(--t-fv-gap-end); }
.t-assure {
  font-size: var(--fs-body-sm);
  line-height: var(--t-assure-lh);
  letter-spacing: var(--ls-base);
  color: var(--color-secondary);
  text-align: center;
}
.t-shindan { order: 4; }
.t-revisit {
  display: none;
  order: 3;
  margin-bottom: var(--t-fv-gap-end);
  text-align: center;
}
html[data-self] .t-revisit { display: block; }
.t-revisit__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--tap-min);
  color: var(--color-primary);
  font-size: var(--fs-label-md);
  font-weight: 700;
  line-height: var(--lh-label-md);
  letter-spacing: var(--ls-wide);
  text-decoration: underline;
  text-decoration-thickness: var(--rule-w);
  text-underline-offset: var(--space-xs);
}
.t-revisit__link svg { width: var(--icon-size); height: var(--icon-size); flex: none; }
.t-shindan {
  padding-block: var(--space-xl) 0;
  scroll-margin-top: var(--space-md);
}
.t-card {
  container-type: inline-size;
  padding: var(--space-lg) var(--space-md);
  border: var(--rule-w) solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  scroll-margin-top: var(--space-md);
}
.t-fieldset { display: grid; }
.t-legend {
  float: left;
  width: 100%;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: var(--fs-headline-sm);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-base);
  font-feature-settings: "palt" 1;
  color: var(--color-primary);
}
.t-helper {
  clear: both;
  margin-top: var(--space-xs);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-secondary);
}
.t-error-live:empty { display: none; }
.t-error {
  margin-top: var(--space-sm-plus);
  padding: var(--space-sm-plus) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-error-wash);
  color: var(--color-error);
  font-size: var(--fs-body-sm);
  font-weight: 700;
  line-height: var(--lh-body-sm);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.t-error__ph { display: inline-block; }
.t-date {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm-plus);
  margin-top: var(--space-md);
}
.t-field { display: grid; gap: var(--space-xs); min-width: 0; }
.t-field--year { grid-column: 1 / -1; }
.t-label {
  font-size: var(--fs-label-md);
  font-weight: 700;
  line-height: var(--lh-label-md);
  letter-spacing: var(--ls-wide);
  color: var(--color-primary);
}
.t-select {
  width: 100%;
  min-width: 0;
  height: var(--select-h);
  padding: 0 var(--gutter-md) 0 var(--space-sm-plus);
  border: var(--rule-w) solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%232A2522' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right var(--space-sm-plus) center;
  color: var(--color-on-surface);
  font-family: var(--font-gothic);
  font-size: var(--fs-input-md);
  line-height: var(--lh-input);
  letter-spacing: 0;
  font-feature-settings: "palt" 1;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.t-select:hover { border-color: var(--color-secondary); }
.t-select[aria-invalid="true"] {
  border-color: var(--color-error);
  background-color: var(--color-error-wash);
  color: var(--color-error);
}
.t-submit { margin-top: var(--space-lg); }
.t-mode-note {
  display: none;
  margin-top: var(--space-sm-plus);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-secondary);
  text-align: center;
}
.t-mode-note a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: var(--space-xs);
  text-decoration-thickness: var(--rule-w);
}
.t-card.is-other .t-mode-note { display: block; }
.t-noscript { margin-top: var(--space-md); }
.t-noscript a { text-decoration: underline; text-underline-offset: var(--space-xs); }
@container (min-width: 400px) {
  .t-date { grid-template-columns: 2fr 1fr 1fr; }
  .t-field--year { grid-column: auto; }
}
@media (min-width: 768px) {
  .t-card { padding: var(--space-lg); }
}
.t-section { padding-top: var(--space-section-sm); scroll-margin-top: var(--space-md); }
.t-lead,
.t-body {
  margin-top: var(--space-lg);
  max-width: var(--reading-max);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
}
.t-body + .t-body { margin-top: var(--space-md); }
@media (min-width: 768px) {
  .t-lead, .t-body { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
}
@media (min-width: 1024px) {
  .t-section { padding-top: var(--space-section); }
}
.t-grid {
  width: calc(100% + 2 * var(--space-sm));
  margin: var(--space-xl) calc(-1 * var(--space-sm)) 0;
  border-collapse: collapse;
  table-layout: fixed;
}
.t-grid__corner,
.t-grid th[scope="row"] { width: var(--juukei-axis-w); }
.t-grid th { padding: 0; font-weight: inherit; vertical-align: middle; }
.t-grid thead th { padding-bottom: var(--space-sm-plus); }
.t-axis {
  display: block;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: var(--fs-headline-sm);
  line-height: var(--lh-display);
  font-feature-settings: "palt" 1;
  color: var(--color-primary);
}
.t-axis-reading {
  display: none;
  margin-top: var(--space-xs);
  font-size: var(--fs-label-xs);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-logo-reading);
  color: var(--color-secondary);
}
.t-grid td { padding: 0 var(--space-3xs); vertical-align: top; }
.t-row--yang td, .t-row--yang th { padding-bottom: var(--space-sm); }
.t-row--yin td, .t-row--yin th { padding-top: var(--space-sm); border-top: var(--rule-w) solid var(--color-line); }
.t-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: var(--space-2xs) var(--space-3xs) var(--space-sm-plus);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  text-align: center;
}
.t-cell__figure { position: relative; display: block; width: 100%; }
.t-cell .pf {
  container-type: inline-size;
  --pf-at: 50% 40%;
}
.t-cell .pf-layer > picture { position: absolute; inset: 0; width: auto; height: auto; }
.t-cell .pf-layer img {
  position: absolute;
  max-width: none;
  width: 136cqw;
  height: 204cqw;
  left: calc(50cqw - 136cqw * var(--focus-x));
  top: calc(40% - 204cqw * var(--focus-y));
  object-fit: fill;
}
.t-cell .you-mark {
  display: none;
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: 1;
  padding: var(--space-3xs) var(--space-xs);
  font-size: var(--fs-label-xs);
  background: var(--color-neutral);
}
.t-cell__label { display: grid; justify-items: center; margin-top: var(--space-2xs); }
.t-cell .plate-no { font-size: var(--fs-label-plate-sm); line-height: var(--lh-display); }
.t-cell__stem {
  margin-top: var(--space-3xs);
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: var(--fs-headline-md);
  line-height: var(--lh-title);
  font-feature-settings: "palt" 1;
}
.t-cell__reading {
  font-size: var(--fs-label-xs);
  line-height: var(--lh-plate);
  letter-spacing: var(--ls-wide);
  color: var(--color-secondary);
  white-space: nowrap;
}
@media (max-width: 359px) {
  .t-cell__reading { letter-spacing: var(--ls-tight); }
}
.t-cell__nick {
  margin-top: var(--space-3xs);
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: var(--fs-label-md);
  line-height: var(--lh-label-md);
  letter-spacing: var(--ls-base);
}
.t-cell__catch { display: none; }
.t-lines {
  margin-top: var(--space-xl);
  border-top: var(--rule-w) solid var(--color-line);
}
.t-lines li { border-bottom: var(--rule-w) solid var(--color-line); }
.t-lines a {
  display: grid;
  grid-template-columns: var(--space-xl) 1fr;
  align-items: center;
  gap: var(--space-sm-plus);
  min-height: var(--tap-min);
  padding-block: var(--space-sm-plus);
}
.t-lines__stem {
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: var(--fs-headline-md);
  line-height: var(--lh-display);
  text-align: center;
}
.t-lines__catch {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: min(var(--fs-catch-sm), (100vw - 2 * var(--gutter-sm) - var(--space-xl) - var(--space-sm-plus)) / 15);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-base);
  font-feature-settings: "palt" 1;
}
html[data-self="kinoe"] .t-cell[data-slug="kinoe"],
html[data-self="kinoto"] .t-cell[data-slug="kinoto"],
html[data-self="hinoe"] .t-cell[data-slug="hinoe"],
html[data-self="hinoto"] .t-cell[data-slug="hinoto"],
html[data-self="tsuchinoe"] .t-cell[data-slug="tsuchinoe"],
html[data-self="tsuchinoto"] .t-cell[data-slug="tsuchinoto"],
html[data-self="kanoe"] .t-cell[data-slug="kanoe"],
html[data-self="kanoto"] .t-cell[data-slug="kanoto"],
html[data-self="mizunoe"] .t-cell[data-slug="mizunoe"],
html[data-self="mizunoto"] .t-cell[data-slug="mizunoto"] { --t-on: 1; }
@supports selector(:has(*)) {
  .t-cell:focus-visible { --t-on: 1; }
  @media (hover: hover) {
    .t-cell:hover { --t-on: 1; }
    .t-grid:has(.t-cell:hover) .t-cell:focus-visible:not(:hover) { --t-on: 0; }
  }
  html[data-self="kinoe"] .t-grid:has(.t-cell:not([data-slug="kinoe"]):focus-visible) .t-cell[data-slug="kinoe"],
  html[data-self="kinoto"] .t-grid:has(.t-cell:not([data-slug="kinoto"]):focus-visible) .t-cell[data-slug="kinoto"],
  html[data-self="hinoe"] .t-grid:has(.t-cell:not([data-slug="hinoe"]):focus-visible) .t-cell[data-slug="hinoe"],
  html[data-self="hinoto"] .t-grid:has(.t-cell:not([data-slug="hinoto"]):focus-visible) .t-cell[data-slug="hinoto"],
  html[data-self="tsuchinoe"] .t-grid:has(.t-cell:not([data-slug="tsuchinoe"]):focus-visible) .t-cell[data-slug="tsuchinoe"],
  html[data-self="tsuchinoto"] .t-grid:has(.t-cell:not([data-slug="tsuchinoto"]):focus-visible) .t-cell[data-slug="tsuchinoto"],
  html[data-self="kanoe"] .t-grid:has(.t-cell:not([data-slug="kanoe"]):focus-visible) .t-cell[data-slug="kanoe"],
  html[data-self="kanoto"] .t-grid:has(.t-cell:not([data-slug="kanoto"]):focus-visible) .t-cell[data-slug="kanoto"],
  html[data-self="mizunoe"] .t-grid:has(.t-cell:not([data-slug="mizunoe"]):focus-visible) .t-cell[data-slug="mizunoe"],
  html[data-self="mizunoto"] .t-grid:has(.t-cell:not([data-slug="mizunoto"]):focus-visible) .t-cell[data-slug="mizunoto"] { --t-on: 0; }
  @media (hover: hover) {
    html[data-self="kinoe"] .t-grid:has(.t-cell:not([data-slug="kinoe"]):hover) .t-cell[data-slug="kinoe"],
    html[data-self="kinoto"] .t-grid:has(.t-cell:not([data-slug="kinoto"]):hover) .t-cell[data-slug="kinoto"],
    html[data-self="hinoe"] .t-grid:has(.t-cell:not([data-slug="hinoe"]):hover) .t-cell[data-slug="hinoe"],
    html[data-self="hinoto"] .t-grid:has(.t-cell:not([data-slug="hinoto"]):hover) .t-cell[data-slug="hinoto"],
    html[data-self="tsuchinoe"] .t-grid:has(.t-cell:not([data-slug="tsuchinoe"]):hover) .t-cell[data-slug="tsuchinoe"],
    html[data-self="tsuchinoto"] .t-grid:has(.t-cell:not([data-slug="tsuchinoto"]):hover) .t-cell[data-slug="tsuchinoto"],
    html[data-self="kanoe"] .t-grid:has(.t-cell:not([data-slug="kanoe"]):hover) .t-cell[data-slug="kanoe"],
    html[data-self="kanoto"] .t-grid:has(.t-cell:not([data-slug="kanoto"]):hover) .t-cell[data-slug="kanoto"],
    html[data-self="mizunoe"] .t-grid:has(.t-cell:not([data-slug="mizunoe"]):hover) .t-cell[data-slug="mizunoe"],
    html[data-self="mizunoto"] .t-grid:has(.t-cell:not([data-slug="mizunoto"]):hover) .t-cell[data-slug="mizunoto"] { --t-on: 0; }
  }
}
.t-cell { --t-on: 0; }
.t-about__inner { display: grid; gap: var(--space-xl); }
.t-about__today {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--rule-w) solid var(--color-primary);
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: var(--fs-headline-sm);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-base);
  font-feature-settings: "palt" 1;
}
.t-about__today b { font-weight: 800; font-size: var(--fs-headline-md); }
.t-about__today a { text-decoration: underline; text-decoration-thickness: var(--rule-w); text-underline-offset: var(--space-2xs); white-space: nowrap; }
.t-about__figure { margin: 0; }
.t-wheel {
  width: 100%;
  max-width: 380px;
  height: auto;
  margin-inline: auto;
  overflow: visible;
  color: var(--color-primary);
}
.t-wheel__arc { fill: none; stroke: currentColor; stroke-width: var(--rule-w); }
.t-wheel__node circle { fill: var(--color-surface); stroke: currentColor; stroke-width: var(--rule-w); }
.t-wheel text {
  fill: currentColor;
  font-family: var(--font-mincho);
  text-anchor: middle;
  font-feature-settings: "palt" 1;
}
.t-wheel__el { font-weight: 800; font-size: var(--fs-svg-wheel-el); }
.t-wheel__stem rect { stroke: none; }
.t-wheel__stem text { font-weight: 600; font-size: var(--fs-svg-wheel-stem); }
html[data-today="kinoe"] .t-wheel__stem[data-slug="kinoe"],
html[data-today="kinoto"] .t-wheel__stem[data-slug="kinoto"],
html[data-today="hinoe"] .t-wheel__stem[data-slug="hinoe"],
html[data-today="hinoto"] .t-wheel__stem[data-slug="hinoto"],
html[data-today="tsuchinoe"] .t-wheel__stem[data-slug="tsuchinoe"],
html[data-today="tsuchinoto"] .t-wheel__stem[data-slug="tsuchinoto"],
html[data-today="kanoe"] .t-wheel__stem[data-slug="kanoe"],
html[data-today="kanoto"] .t-wheel__stem[data-slug="kanoto"],
html[data-today="mizunoe"] .t-wheel__stem[data-slug="mizunoe"],
html[data-today="mizunoto"] .t-wheel__stem[data-slug="mizunoto"] { --t-today-fill: var(--color-primary); --t-today-text: var(--color-surface); }
.t-wheel__stem rect { fill: var(--t-today-fill, transparent); }
.t-wheel__stem text { fill: var(--t-today-text, currentColor); }
.t-sheng { margin-top: var(--space-lg); }
.t-sheng__title {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: var(--fs-label-lg);
  line-height: var(--lh-headline);
  font-feature-settings: "palt" 1;
}
.t-sheng ul { margin-top: var(--space-sm); border-top: var(--rule-w) solid var(--color-line); }
.t-sheng li {
  display: grid;
  grid-template-columns: var(--space-2xl) 1fr;
  gap: var(--space-sm-plus);
  padding-block: var(--space-sm-plus);
  border-bottom: var(--rule-w) solid var(--color-line);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
}
.t-sheng__pair {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: var(--fs-label-lg);
  white-space: nowrap;
}
.t-sheng__arrow { margin-inline: var(--space-xs); color: var(--color-secondary); }
.t-pairs__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: var(--space-xl);
}
.t-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.t-pair__stem { display: grid; justify-items: center; gap: var(--space-3xs); }
.t-pair__link { position: relative; color: var(--color-primary); }
.t-pair__link::after {
  content: "";
  position: absolute;
  inset: min(calc(-1 * var(--space-2xs)), calc((100% - var(--tap-min)) / 2));
}
.t-pair__link:focus-visible .t-pair__nick { color: var(--color-primary); text-decoration: underline; text-decoration-thickness: var(--rule-w); text-underline-offset: var(--space-xs); }
@media (hover: hover) {
  .t-pair__link:hover .t-pair__nick { color: var(--color-primary); text-decoration: underline; text-decoration-thickness: var(--rule-w); text-underline-offset: var(--space-xs); }
}
@media (hover: none) {
  .t-pair__nick { text-decoration: underline; text-decoration-thickness: var(--rule-w); text-underline-offset: var(--space-xs); }
}
.t-pair__kan {
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: var(--fluid-pair-kan);
  line-height: var(--lh-display);
  font-feature-settings: "palt" 1;
}
.t-pair__nick {
  font-size: var(--fs-label-md);
  font-weight: 700;
  line-height: var(--lh-label-md);
  letter-spacing: var(--ls-wide);
  color: var(--color-secondary);
}
.t-pair__line {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex: 1;
  margin-block: var(--space-sm-plus);
  padding-block: var(--space-lg);
}
.t-pair__line::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 50%;
  border-left: var(--rule-w) solid var(--color-primary);
}
.t-pair__scene {
  position: relative;
  padding-block: var(--space-sm-plus);
  background: var(--color-neutral);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  letter-spacing: var(--ls-wide);
  font-feature-settings: "vpal" 1;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .t-pairs__list { max-width: 880px; margin-inline: auto; }
  .t-pair__scene { font-size: var(--fs-body-md); }
}
.t-faq__list { margin-top: var(--space-xl); border-top: var(--rule-w) solid var(--color-line); }
.t-faq__item { border-bottom: var(--rule-w) solid var(--color-line); }
.t-faq__q {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--space-md) var(--space-xl) var(--space-md) 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: var(--fs-label-lg);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-base);
  font-feature-settings: "palt" 1;
  list-style: none;
  cursor: pointer;
}
.t-faq__q::-webkit-details-marker { display: none; }
.t-faq__q-text { text-wrap: balance; }
@supports (word-break: auto-phrase) {
  .t-faq__q-text { word-break: auto-phrase; }
}
.t-faq__q::before,
.t-faq__q::after {
  content: "";
  position: absolute;
  right: var(--space-sm);
  top: 50%;
  width: 14px;
  height: var(--rule-w-strong);
  background: var(--color-primary);
}
.t-faq__q::after { transform: rotate(90deg); }
.t-faq__item[open] .t-faq__q::after { transform: rotate(0deg); }
.t-faq__a {
  padding-bottom: var(--space-lg);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
}
.t-faq__a p + p { margin-top: var(--space-sm); }
@media (prefers-reduced-motion: no-preference) {
  .t-faq__q::after { transition: transform var(--dur-short) var(--ease-ink); }
}
.t-closing {
  --t-cl-fig-h: clamp(280px, 88vw, 460px);
  --t-cl-img-w: 152cqw;
  --t-cl-face-x: 68cqw;
  --t-cl-face-y: 50cqh;
  --t-cl-ml: 40%;
  --t-cl-mr0: 94%;
  --t-cl-mt: 24%;
  --t-cl-mb0: 58%;
}
.t-closing__figure {
  position: relative;
  height: var(--t-cl-fig-h);
  overflow: hidden;
  container-type: size;
  mix-blend-mode: var(--portrait-blend);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, black var(--t-cl-ml), black var(--t-cl-mr0), transparent 100%),
    linear-gradient(to bottom, transparent 0, black var(--t-cl-mt), black var(--t-cl-mb0), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, black var(--t-cl-ml), black var(--t-cl-mr0), transparent 100%),
    linear-gradient(to bottom, transparent 0, black var(--t-cl-mt), black var(--t-cl-mb0), transparent 100%);
  mask-composite: intersect;
}
.t-closing__figure picture { position: absolute; inset: 0; }
.t-closing__figure img {
  position: absolute;
  max-width: none;
  width: var(--t-cl-img-w);
  height: calc(var(--t-cl-img-w) * 1.5);
  left: calc(var(--t-cl-face-x) - var(--t-cl-img-w) * var(--focus-x));
  top: calc(var(--t-cl-face-y) - var(--t-cl-img-w) * 1.5 * var(--focus-y));
  filter: var(--ink-filter);
  color: transparent;
}
.t-closing__figure + .t-closing__inner { margin-top: calc(-1 * var(--space-2xl)); position: relative; }
.t-closing__inner { display: grid; justify-items: center; text-align: center; }
.t-closing__title {
  margin-top: var(--space-md);
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: var(--fluid-headline-lg);
  line-height: var(--lh-headline-lg);
  letter-spacing: var(--ls-wide);
  font-feature-settings: "palt" 1;
  word-break: keep-all;
  overflow-wrap: normal;
}
.t-closing__lead {
  margin-top: var(--space-md);
  max-width: 28em;
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.t-closing__cta { width: min(100%, 360px); margin-top: var(--space-xl); }
.t-closing .t-assure { margin-top: var(--space-sm); }
@media (min-width: 768px) {
  .t-closing {
    --t-cl-fig-h: clamp(360px, 60vw, 560px);
    --t-cl-img-w: 104cqw;
    --t-cl-face-x: 64cqw;
    --t-cl-face-y: 46cqh;
    --t-cl-ml: 36%;
    --t-cl-mt: 20%;
  }
}
@media (min-width: 1024px) {
  .t-closing {
    --t-cl-fig-h: clamp(480px, 74vh, 700px);
    --t-cl-img-w: max(100cqw, 96cqh);
    --t-cl-face-x: 54cqw;
    --t-cl-face-y: 40cqh;
    --t-cl-ml: 30%;
    --t-cl-mr0: 88%;
    --t-cl-mt: 14%;
    --t-cl-mb0: 64%;
    display: grid;
    grid-template-columns:
      minmax(var(--gutter-md), 1fr)
      minmax(0, calc(var(--content-max) / 2 - var(--gutter-md)))
      minmax(0, calc(var(--content-max) / 2 - var(--gutter-md)))
      minmax(var(--gutter-md), 1fr);
    align-items: center;
    max-width: var(--page-max);
    margin-inline: auto;
  }
  .t-closing__figure { grid-column: 3 / -1; grid-row: 1; }
  .t-closing__figure + .t-closing__inner { margin-top: 0; }
  .t-closing__inner {
    grid-column: 2;
    grid-row: 1;
    z-index: 1;
    max-width: none;
    margin: 0;
    padding: 0 var(--space-xl) 0 0;
    justify-items: start;
    text-align: left;
  }
  .t-closing__inner .chapter-mark { margin: 0; }
}
html:has(.t-pill) { --pill-h: var(--cta-h); }
.t-pill {
  padding: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.t-pill > .btn--primary {
  width: min(var(--pill-cta-w), 100vw - 2 * var(--gutter-sm));
  padding-inline: var(--space-lg);
  background: var(--color-primary);
  font-size: var(--fs-label-lg);
  letter-spacing: var(--ls-label);
}
.t-pill > .btn--primary:hover { background: var(--color-secondary); }
@media (min-width: 768px) {
  .t-pill { display: none !important; }
}
@media (max-width: 767px) and (min-height: 501px) {
  html:has(.t-pill) .site-footer {
    padding-bottom: calc(var(--space-sm-plus) + var(--pill-h) + var(--space-lg) + env(safe-area-inset-bottom));
  }
}
@media (prefers-reduced-motion: no-preference) {
  .t-pill:not([hidden]) { animation: t-pill-in var(--dur-short) var(--ease-ink); }
  @keyframes t-pill-in { from { opacity: 0; transform: translate(-50%, 12px); } }
}
.t-ripple { --t-rip-spread: var(--ripple-spread); position: relative; isolation: isolate; }
.t-ripple.is-rippling::before,
.t-ripple.is-rippling::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: var(--ripple-w) solid var(--color-primary);
  border-radius: inherit;
  filter: blur(var(--ripple-blur));
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .t-ripple.is-rippling::after { animation: t-ripple-1 var(--dur-ripple) var(--ease-ripple) var(--ripple-count) both; }
  .t-ripple.is-rippling::before { animation: t-ripple-2 var(--dur-ripple) var(--ease-ripple) var(--ripple-count) both; }
  .t-ripple:is(:hover, :focus, [aria-disabled="true"])::before,
  .t-ripple:is(:hover, :focus, [aria-disabled="true"])::after { animation: none; }
  @keyframes t-ripple-1 {
    0% { opacity: 0; transform: none; }
    5%, 22% { opacity: var(--ripple-ink); animation-timing-function: linear; }
    72%, 100% { opacity: 0; transform: scale(var(--t-rip-sx, 1), var(--t-rip-sy, 1)); }
  }
  @keyframes t-ripple-2 {
    0%, 24% { opacity: 0; transform: none; }
    29%, 44% { opacity: var(--ripple-ink-2); animation-timing-function: linear; }
    90%, 100% { opacity: 0; transform: scale(var(--t-rip-sx2, 1), var(--t-rip-sy2, 1)); }
  }
}
.t-fv-cta.t-ripple,
.t-closing__cta.t-ripple { --t-rip-spread: var(--ripple-spread-cta); }
@media (min-width: 768px) {
  .page-top { --t-stage-tablet: max(var(--top-stage-h-tablet), 400px); }
  .t-fv-stage { height: var(--t-stage-tablet); }
  .t-fv-portrait {
    --t-img-w: 172cqh;
    --t-face-x: 40cqw;
    --t-face-y: 44cqh;
    --t-fv-mr0: 70%;
    --t-fv-mr1: 90%;
  }
  .t-title { top: var(--space-xl); right: var(--space-xl); }
  .t-title__main { font-size: var(--fluid-title-vertical-tablet); }
  .t-title__reading { font-size: var(--fs-body-sm); }
  .t-today { left: var(--space-xl); bottom: var(--space-lg); }
  .t-fv-side { width: min(100%, 600px); margin-inline: auto; padding-inline: var(--gutter-md); }
  .t-fv-cta { display: none; }
  .t-sub { margin-top: var(--space-xl); font-size: var(--fs-headline-sm); white-space: normal; word-break: keep-all; overflow-wrap: normal; }
  .t-shindan { order: 2; padding-top: var(--space-lg); }
  .t-fv-side > .t-assure { order: 3; margin-block: var(--space-md) 0; }
  .t-revisit { margin-block: var(--space-sm) 0; }
  .t-grid { width: 100%; margin-inline: 0; }
  .t-grid__corner, .t-grid th[scope="row"] { width: var(--space-xl); }
  .t-lines { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-xl); border-top: 0; }
  .t-lines li:nth-child(-n + 2) { border-top: var(--rule-w) solid var(--color-line); }
  .t-axis-reading { display: block; }
  .t-grid td { padding-inline: var(--space-2xs); }
  .t-cell { padding: var(--space-sm-plus) var(--space-2xs) var(--space-md); }
}
@media (min-width: 1024px) {
  .t-fv {
    display: grid;
    grid-template-columns: 7fr 5fr;
    grid-template-rows: minmax(0, 1fr) auto;
    height: var(--top-fv-h-lg);
    max-width: var(--page-max);
    margin-inline: auto;
  }
  .t-fv-stage { grid-column: 1; grid-row: 1; height: auto; }
  .t-fv-portrait {
    --t-img-w: 142cqh;
    --t-face-x: 36cqw;
    --t-face-y: 43cqh;
    --t-fv-mr0: 84%;
    --t-fv-mr1: 99%;
    --t-fv-mb0: 72%;
  }
  .t-title { top: var(--space-xl); right: var(--space-xl); }
  .t-title__main { font-size: var(--fluid-title-vertical-lg); }
  .t-title__reading { padding-top: var(--space-sm); font-size: var(--fs-body-sm); }
  .t-today { left: var(--space-xl); bottom: var(--space-lg); }
  .t-today__day { font-size: var(--fs-headline-md); }
  .t-today__stem { font-size: var(--fs-headline-lg); }
  .t-fv-band { grid-column: 1 / -1; grid-row: 2; margin-inline: var(--space-xl); }
  .t-fv-side {
    grid-column: 2;
    grid-row: 1;
    justify-content: center;
    width: auto;
    margin: 0;
    padding: var(--space-lg) var(--space-xl) var(--space-lg) var(--space-lg);
  }
  .t-sub { margin-top: 0; font-size: var(--fs-headline-md); line-height: var(--lh-headline); text-align: left; }
  .t-shindan { padding-top: var(--space-lg); }
  .t-fv-side > .t-assure { text-align: left; }
  .t-revisit { text-align: left; }
  .t-grid { max-width: 1080px; margin-inline: auto; }
  .t-grid__corner, .t-grid th[scope="row"] { width: 56px; }
  .t-axis { font-size: var(--fs-headline-md); }
  .t-grid td { padding-inline: var(--space-sm); }
  .t-row--yang td, .t-row--yang th { padding-bottom: var(--space-lg); }
  .t-row--yin td, .t-row--yin th { padding-top: var(--space-lg); }
  .t-cell { padding: var(--space-sm-plus) var(--space-sm) var(--space-md); container-type: inline-size; }
  .t-cell .you-mark { font-size: var(--fs-label-md); top: var(--space-sm); left: var(--space-sm); }
  .t-about__inner { grid-template-columns: 5fr 6fr; align-items: center; column-gap: var(--space-2xl); }
  .t-juukei .chapter-mark, .t-juukei .section-heading, .t-juukei .t-lead { max-width: 1080px; margin-inline: auto; }
}
@media (min-width: 1280px) {
  .t-grid,
  .t-juukei .chapter-mark, .t-juukei .section-heading, .t-juukei .t-lead { max-width: var(--content-max); }
  .t-cell__catch {
    display: block;
    margin-top: var(--space-sm-plus);
    padding-top: var(--space-sm-plus);
    border-top: var(--rule-w) solid var(--color-line);
    font-family: var(--font-mincho);
    font-weight: 600;
    font-size: var(--fs-catch-cell);
    line-height: var(--lh-headline);
    letter-spacing: var(--ls-0);
    font-feature-settings: "palt" 1;
  }
  .t-lines { display: none; }
}
@media (min-width: 1441px) {
  .t-fv-portrait {
    --t-fv-ml: 16%;
    -webkit-mask-image:
      linear-gradient(to right, transparent 0, black var(--t-fv-ml), black var(--t-fv-mr0), transparent var(--t-fv-mr1)),
      linear-gradient(to bottom, black var(--t-fv-mb0), transparent 100%),
      linear-gradient(to right, transparent 0, black 12%);
    mask-image:
      linear-gradient(to right, transparent 0, black var(--t-fv-ml), black var(--t-fv-mr0), transparent var(--t-fv-mr1)),
      linear-gradient(to bottom, black var(--t-fv-mb0), transparent 100%),
      linear-gradient(to right, transparent 0, black 12%);
  }
  .page-top .site-header { padding-inline: calc((100% - var(--page-max)) / 2 + var(--space-xl)); }
}
.t-cell { background: color-mix(in srgb, var(--type-wash) calc(var(--t-on) * 100%), transparent); }
.t-cell .pf-layer { --bloom: calc(var(--t-on) * 150%); }
.t-cell .plate-no,
.t-cell__reading { color: color-mix(in srgb, var(--color-primary) calc(var(--t-on) * 100%), var(--color-secondary)); }
.t-cell__stem { color: color-mix(in srgb, var(--type-ink) calc(var(--t-on) * 100%), var(--color-primary)); }
@media (prefers-reduced-motion: no-preference) {
  .t-cell { transition: background-color calc(var(--dur-short) + var(--t-on) * (var(--dur-base) - var(--dur-short))) var(--ease-ink); }
  .t-cell .pf-layer { transition: --bloom calc(var(--dur-short) + var(--t-on) * (var(--dur-base) - var(--dur-short))) var(--ease-bloom); }
}
@media (prefers-reduced-motion: no-preference) and (min-height: 501px) {
  html.js .t-fv-portrait:not(.is-loaded) { opacity: 0; }
  .t-fv-portrait.is-loaded { animation: t-rise var(--dur-long) var(--ease-ink) both; }
  .t-title__main span { animation: t-drop-in var(--dur-fv-drop) var(--ease-ink) both; animation-delay: calc(var(--dur-fv-drop) + var(--i) * var(--stagger)); }
  .t-today { animation: t-fade var(--dur-short) var(--ease-ink) var(--delay-fv-today) both; }
  @keyframes t-rise { from { opacity: 0; transform: translateY(8px); } }
  @keyframes t-drop-in { from { opacity: 0; transform: translateY(-8px); } }
  @keyframes t-fade { from { opacity: 0; } }
}
.t-shizuku {
  --sz-t: var(--shizuku-total);
  --sz-w: min(78vw, (100svh - 232px) * 2 / 3);
  --sz-h: calc(var(--sz-w) * 1.5);
  --sz-left: calc(50% - var(--sz-w) / 2);
  --sz-top: max(var(--space-md), calc(50% - var(--sz-h) / 2 - 40px));
  --sz-x: calc(var(--sz-left) + var(--sz-w) * .4);
  --sz-y: calc(var(--sz-top) + var(--sz-w) * .82);
  --sz-d-curtain: calc(var(--sz-t) * .125);
  --sz-d-swap: calc(var(--sz-t) * .1667);
  --sz-d-drop: calc(var(--sz-t) * .125);
  --sz-d-bloom: calc(var(--sz-t) * .25);
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  overflow: hidden;
  outline: none;
  color: var(--color-primary);
  -webkit-tap-highlight-color: transparent;
}
.t-shizuku.is-short {
  --sz-t: var(--shizuku-total-short);
  --sz-d-curtain: 120ms;
  --sz-d-swap: 300ms;
  --sz-d-drop: 120ms;
  --sz-d-bloom: 260ms;
}
.t-shizuku > * { position: absolute; }
.t-sz-curtain { inset: 0; background: var(--color-neutral); opacity: 0; }
.t-shizuku.is-curtain .t-sz-curtain { opacity: .97; }
.t-shizuku {
  --sz-fill-d: 34vmax;
  --sz-fill-k: 10;
}
.t-sz-fill { inset: 0; }
.t-sz-fill i {
  position: absolute;
  left: calc(var(--sz-x) - var(--sz-fill-d) / 2);
  top: calc(var(--sz-y) - var(--sz-fill-d) / 2);
  width: var(--sz-fill-d);
  height: var(--sz-fill-d);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--type-wash) 80%, transparent 100%);
  transform: scale(0);
  will-change: transform;
}
.t-sz-fill i:nth-child(2) { translate: 7vmin -5vmin; }
.t-sz-fill i:nth-child(3) { translate: -6vmin 6vmin; }
.t-shizuku.is-fill .t-sz-fill i { transform: scale(var(--sz-fill-k)); }
.t-shizuku.is-settle .t-sz-fill { background: var(--type-wash); }
.t-sz-blot {
  left: calc(var(--sz-left) - var(--sz-w) * .22);
  top: calc(var(--sz-top) + var(--sz-w) * .7);
  width: calc(var(--sz-w) * 1.12);
  aspect-ratio: 1;
  mix-blend-mode: multiply;
  opacity: 0;
  transform: scale(.25) rotate(-8deg);
  transform-origin: 70% 20%;
}
.t-sz-blot img { width: 100%; height: 100%; object-fit: contain; }
.t-shizuku.is-bloom .t-sz-blot { opacity: .42; transform: none; }
.t-sz-kanji {
  left: calc(var(--sz-left) + var(--sz-w) * .64);
  top: calc(var(--sz-top) + var(--sz-w) * .02);
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: calc(var(--sz-w) * .74);
  line-height: var(--lh-display);
  color: var(--type-ink);
  opacity: 0;
  transform: scale(.94);
  transform-origin: 30% 30%;
  white-space: nowrap;
}
.t-shizuku.is-bloom .t-sz-kanji { opacity: 1; transform: none; }
.t-sz-stage {
  left: var(--sz-left);
  top: var(--sz-top);
  width: var(--sz-w);
  height: var(--sz-h);
  container-type: inline-size;
  transform-origin: 0 0;
  mix-blend-mode: multiply;
  -webkit-mask-image:
    linear-gradient(to right, transparent var(--t-ml0), black var(--t-ml1), black var(--t-mr0), transparent var(--t-mr1)),
    linear-gradient(to bottom, transparent var(--t-mt0), black var(--t-mt1), black var(--t-mb0), transparent var(--t-mb1));
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent var(--t-ml0), black var(--t-ml1), black var(--t-mr0), transparent var(--t-mr1)),
    linear-gradient(to bottom, transparent var(--t-mt0), black var(--t-mt1), black var(--t-mb0), transparent var(--t-mb1));
  mask-composite: intersect;
}
.t-sz-portrait { position: absolute; inset: 0; transform-origin: 40% 30%; }
.t-sz-layer { position: absolute; inset: 0; }
.t-sz-layer img {
  position: absolute;
  max-width: none;
  width: 166cqw;
  height: 249cqw;
  left: calc(40cqw - 166cqw * var(--focus-x));
  top: calc(40cqw - 249cqw * var(--focus-y));
}
.t-sz-from img, .t-sz-ink img { filter: var(--ink-filter); }
.t-sz-ink { opacity: 0; }
.t-sz-ink.is-same { opacity: 1; }
.t-shizuku.is-swap .t-sz-from { opacity: 0; }
.t-shizuku.is-swap .t-sz-ink { opacity: 1; }
.t-shizuku.is-swap .t-sz-portrait { transform: scale(1.02); }
.t-sz-color {
  --bloom: 0%;
  -webkit-mask-image: radial-gradient(circle at 40% calc(var(--sz-w) * .82), black calc(var(--bloom) - var(--bloom-soft)), transparent var(--bloom));
  mask-image: radial-gradient(circle at 40% calc(var(--sz-w) * .82), black calc(var(--bloom) - var(--bloom-soft)), transparent var(--bloom));
}
.t-shizuku.is-bloom .t-sz-color { --bloom: 150%; }
.t-shizuku.is-enter-fade .t-sz-stage { opacity: 0; translate: 0 12px; }
.t-shizuku.is-enter-fade.is-curtain .t-sz-stage { opacity: 1; translate: 0 0; }
.t-sz-drop {
  left: calc(var(--sz-x) - 4px);
  top: calc(var(--sz-y) - 6px);
  width: 8px;
  height: 12px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: var(--type-pigment);
  opacity: 0;
  transform: translateY(calc(var(--sz-w) * -.9));
}
.t-shizuku.is-drop .t-sz-drop { opacity: 1; transform: none; }
.t-shizuku.is-bloom .t-sz-drop { opacity: 0; transform: scale(3.2); }
.t-sz-caption {
  left: 0;
  right: 0;
  top: calc(var(--sz-top) + var(--sz-h) + var(--space-sm));
  display: grid;
  justify-items: center;
  text-align: center;
}
.t-sz-caption > * { grid-area: 1 / 1; }
.t-sz-status {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-wide);
  color: var(--color-secondary);
  opacity: 0;
}
.t-shizuku.is-swap .t-sz-status { opacity: 1; }
.t-shizuku.is-bloom .t-sz-status { opacity: 0; }
.t-sz-name {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  font-family: var(--font-mincho);
  color: var(--type-ink);
  font-feature-settings: "palt" 1;
  opacity: 0;
}
.t-sz-nick { font-weight: 600; font-size: var(--fs-headline-md); line-height: var(--lh-display); letter-spacing: var(--ls-base); }
.t-sz-stem { font-weight: 800; font-size: var(--fs-type-name-sm); line-height: var(--lh-display); }
.t-sz-reading { font-family: var(--font-gothic); font-size: var(--fs-label-md); letter-spacing: var(--ls-reading); color: var(--color-primary); }
.t-shizuku.is-bloom .t-sz-name { opacity: 1; }
.t-skip {
  right: var(--gutter-sm);
  bottom: calc(var(--gutter-sm) + env(safe-area-inset-bottom));
  min-width: 88px;
  height: var(--tap-min);
  padding-inline: var(--space-md);
  border: var(--rule-w) solid var(--color-line);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: var(--fs-label-md);
  font-weight: 700;
  line-height: var(--lh-label-md);
  letter-spacing: var(--ls-wide);
  opacity: .4;
}
.t-skip[aria-disabled="false"] { opacity: 1; }
.t-shizuku.is-settle :is(.t-sz-stage, .t-sz-kanji, .t-sz-blot, .t-sz-drop, .t-sz-caption) { opacity: 0; }
.t-shizuku.is-skip .t-sz-fill { background: var(--type-wash); }
.t-shizuku.is-skip *, .t-shizuku.is-skip { transition: none !important; animation: none !important; }
.t-shizuku.is-skip :is(.t-sz-stage, .t-sz-kanji, .t-sz-blot, .t-sz-drop, .t-sz-caption) { opacity: 0; }
.t-shizuku.is-reduced :is(.t-sz-stage, .t-sz-kanji, .t-sz-blot, .t-sz-drop, .t-sz-curtain, .t-sz-status) { display: none; }
.t-shizuku.is-reduced .t-sz-fill { background: var(--type-wash); opacity: 0; }
.t-shizuku.is-reduced.is-curtain .t-sz-fill { opacity: 1; }
.t-shizuku.is-reduced .t-sz-caption { top: 50%; transform: translateY(-50%); }
.t-shizuku.is-reduced.is-curtain .t-sz-name { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .t-shizuku.is-reduced :is(.t-sz-fill, .t-sz-name) { transition: opacity var(--shizuku-total-reduced) linear; }
}
@media (min-width: 768px) {
  .t-shizuku { --sz-h: 72svh; --sz-w: calc(var(--sz-h) * 2 / 3); --sz-top: calc(50% - var(--sz-h) / 2 - 32px); }
  .t-sz-kanji { font-size: calc(var(--sz-w) * .8); }
  .t-skip { right: var(--space-xl); bottom: var(--space-xl); }
}
@media (prefers-reduced-motion: no-preference) {
  .t-sz-curtain { transition: opacity var(--sz-d-curtain) var(--ease-ink); }
  .t-sz-stage {
    transition:
      transform var(--sz-d-curtain) var(--ease-ink),
      opacity var(--sz-d-curtain) var(--ease-ink),
      translate var(--sz-d-curtain) var(--ease-ink),
      --t-ml0 var(--sz-d-curtain) var(--ease-ink), --t-ml1 var(--sz-d-curtain) var(--ease-ink),
      --t-mr0 var(--sz-d-curtain) var(--ease-ink), --t-mr1 var(--sz-d-curtain) var(--ease-ink),
      --t-mt0 var(--sz-d-curtain) var(--ease-ink), --t-mt1 var(--sz-d-curtain) var(--ease-ink),
      --t-mb0 var(--sz-d-curtain) var(--ease-ink), --t-mb1 var(--sz-d-curtain) var(--ease-ink);
  }
  .t-sz-layer { transition: opacity var(--sz-d-swap) var(--ease-ink); }
  .t-sz-portrait { transition: transform var(--sz-d-swap) var(--ease-ink); }
  .t-sz-status { transition: opacity var(--dur-short) var(--ease-ink); }
  .t-sz-drop { transition: transform var(--sz-d-drop) var(--ease-drop), opacity var(--dur-instant) linear; }
  .t-shizuku.is-bloom .t-sz-drop { transition: transform var(--dur-short) var(--ease-bloom), opacity var(--dur-short) var(--ease-ink); }
  .t-sz-color { transition: --bloom var(--sz-d-bloom) var(--ease-bloom); }
  .t-sz-blot { transition: opacity var(--sz-d-bloom) var(--ease-ink), transform var(--sz-d-bloom) var(--ease-bloom); }
  .t-sz-kanji { transition: opacity var(--sz-d-bloom) var(--ease-ink), transform var(--sz-d-bloom) var(--ease-bloom); }
  .t-sz-name { transition: opacity calc(var(--sz-t) * .125) var(--ease-ink) calc(var(--sz-t) * .0625); }
  .t-sz-fill i { transition: transform calc(var(--sz-t) * .2083) var(--ease-ink); }
  .t-sz-fill i:nth-child(2) { transition-duration: calc(var(--sz-t) * .23); }
  .t-sz-fill i:nth-child(3) { transition-duration: calc(var(--sz-t) * .25); }
  .t-shizuku.is-settle :is(.t-sz-stage, .t-sz-kanji, .t-sz-blot, .t-sz-caption) { transition: opacity calc(var(--sz-t) * .1) var(--ease-ink); }
  .t-skip { transition: opacity var(--dur-short) var(--ease-ink); }
}