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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
  font-size: 18px;
  line-height: 1.7;
  color: #123456;
  background: #fafffa;
}

body.menu-open {
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: #36a872;
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color: #247248;
  text-decoration: underline;
}

.container {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

.section {
  padding: 60px 0;
}

/* skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #000;
  color: #fff;
  padding: 8px 12px;
  z-index: 2000;
}

.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* header */
.site-header {
  background: #123660;
  border-bottom: none;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-inner {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex-shrink: 0;
  color: #f6faff;
}

.site-logo,
.site-logo:hover,
.site-logo:focus-visible {
  color: #f6faff;
  text-decoration: none;
}

.site-logo img {
  width: 60px;
  height: 60px;
}

.site-logo svg {
  width: 60px;
  height: 60px;
  display: block;
}

.site-logo-text {
  font-size: 1.6rem;
  font-weight: 700;
  color: #f6faff;
  white-space: nowrap;
}

/* nav */
.global-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.global-nav a {
  color: #f6faff;
  font-weight: 600;
  padding: 8px 0;
  position: relative;
  transition: color 0.2s ease;
  text-decoration: none;
}

.global-nav a[aria-current="page"] {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.global-nav a:hover,
.global-nav a:focus-visible {
  color: #eeffee;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* menu toggle */
.menu-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  z-index: 1101;
}

.menu-toggle span {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background: #f6faff;
  border-radius: 999px;
  transition: transform 0.3s ease, opacity 0.25s ease, top 0.3s ease;
}

.menu-toggle span:nth-child(1) {
  top: 14px;
}

.menu-toggle span:nth-child(2) {
  top: 21px;
}

.menu-toggle span:nth-child(3) {
  top: 28px;
}

.menu-toggle.is-open span:nth-child(1) {
  top: 21px;
  transform: rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
  top: 21px;
  transform: rotate(-45deg);
}

.menu-toggle:focus-visible {
  outline: 3px solid rgba(54, 168, 114, 0.6);
  outline-offset: 3px;
  border-radius: 8px;
}

.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 900;
}

.menu-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

/* hero */
.hero {
  background: linear-gradient(
    180deg,
    #eaffea 0%,
    #fafffa 100%
  );
  padding: 36px 0 60px;
}

.hero-content {
  max-width: 900px;
  margin: 0;
  padding: 0 12px;
  text-align: left;
}

.hero-eyebrow-wrap {
  margin-left: 60px;
}

.hero-eyebrow {
  display: inline-block;
  margin: 0 0 12px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #eef5ff;
  color: #0b4ea2;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.hero-title-wrap {
  margin-left: 72px;
}

.hero h1 {
  margin: 0 0 18px;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  line-height: 1.35;
  color: #123456;
}

.hero-note {
  margin: 0 0 24px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #123456;
}

.hero-lead-group {
  margin-left: 60px;
  max-width: 760px;
}

.lead {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.8;
  color: #123456;
}

.lead-sub {
  margin-bottom: 4px;
}

.lead-message {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.7;
  color: #123456;
}

.lead-keyphrase {
  font-size: 1.3rem;
  font-weight: 800;
  color: #0b4ea2;
}

.hero-info-box {
  margin: 0 0 30px;
  padding: 18px 24px;
  background: #ffffff;
  border: 1px solid #d9e3ef;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(10, 42, 84, 0.04);
}

.hero-info-box p {
  margin: 0;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  margin-bottom: 24px;
}

.button-group-center {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.hero-sub-links {
  margin: 0;
  font-weight: 600;
  color: #123456;
}

/* hero cta links */
.hero-cta-links {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.hero-cta-links p {
  margin: 0;
}

.hero-sub-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 340px;
  min-height: 56px;
  padding: 12px 24px;
  border: 2px solid #123660;
  border-radius: 999px;
  background: #fff8d8;
  color: #123660;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(18, 54, 96, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.hero-sub-link:hover,
.hero-sub-link:focus-visible {
  background: #123660;
  color: #fff8d8;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(18, 54, 96, 0.18);
  text-decoration: none;
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  min-width: 240px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
}

.btn-primary {
  background: #bbeebb;
  color: #123456;
  box-shadow: 0 8px 20px rgba(54, 168, 114, 0.25);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: #247248;
  color: #fafffa;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(54, 168, 114, 0.30);
  text-decoration: none;
}

.btn-secondary {
  background: #ffffff;
  color: #36a872;
  border: 1px solid #36a872;
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: #f2fbf7;
  transform: translateY(-1px);
  text-decoration: none;
}

.btn:focus-visible {
  outline: 3px solid rgba(54, 168, 114, 0.6);
  outline-offset: 3px;
}

/* section title */
.kyosai-cards h2,
.section h2 {
  margin: 0 0 12px;
  font-size: clamp(1.8rem, 3vw, 2rem);
  color: #123456;
}

.section-lead {
  margin: 0 0 30px;
  color: #234567;
  font-size: 1rem;
}

/* cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.kyosai-card {
  display: block;
  background: #fffaf0;
  border: 1px solid #e0e6ee;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 6px 18px rgba(15, 35, 60, 0.05);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.22s ease;
  text-decoration: none;
}

.kyosai-card:hover {
  transform: translateY(-3px);
  border-color: #ffeedd;
  background: #fffaf0;
  box-shadow: 0 8px 18px rgba(15, 35, 60, 0.08);
  text-decoration: none;
}

.kyosai-card:focus-visible {
  outline: 3px solid rgba(54, 168, 114, 0.6);
  outline-offset: 3px;
}

.kyosai-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.kyosai-card-header img {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  object-fit: contain;
}

.kyosai-card h3 {
  margin: 0;
  font-size: 1.34rem;
  line-height: 1.35;
  color: #123456;
  font-weight: 720;
  letter-spacing: 0.01em;
}

.kyosai-card p {
  margin: 0;
  color: #234567;
  font-size: 0.96rem;
  line-height: 1.5;
}

/* breadcrumb */
.breadcrumb {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 12px 0 0;
}

.breadcrumb-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
  color: #123456;
}

.breadcrumb-list li {
  display: flex;
  align-items: center;
}

.breadcrumb-list li + li::before {
  content: ">";
  margin-right: 8px;
  color: #8a98a8;
}

.breadcrumb-list a {
  color: #123456;
}

.breadcrumb-list a:hover,
.breadcrumb-list a:focus-visible {
  color: #247248;
  text-decoration: underline;
}

/* kyosai page */
.kyosai-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 16px 36px;
}

.detail-section {
  max-width: 810px;
  margin: 0 auto 24px;
  background: #fffaf0;
  padding: 24px;
  border-radius: 12px;
}

.detail-section-last {
  margin-bottom: 6px;
}

.detail-section h1 {
  margin: 0 0 18px;
  font-size: 2rem;
  line-height: 1.4;
  color: #123456;
}

.detail-section h2 {
  font-size: 1.4rem;
  line-height: 1.4;
  margin: 0 0 18px;
  padding-left: 12px;
  border-left: 6px solid #36a872;
  color: #123456;
}

.detail-lead {
  margin: 12px 0 24px;
  line-height: 1.9;
  font-size: 1rem;
  font-weight: 600;
  color: #123456;
}

.detail-lead p {
  margin: 0 0 1em;
}

.detail-lead p:last-child {
  margin-bottom: 0;
}

.image-card {
  background: #fffaf0;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  padding: 6px;
  box-shadow: none;
}

.image-card-spaced {
  margin-top: 24px;
}

.image-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.image-card h3 {
  margin-top: 24px;
  margin-bottom: 12px;
  font-size: 1.08rem;
  line-height: 1.5;
  color: #123456;
}

.image-card h3:first-of-type {
  margin-top: 18px;
}

.pdf-download {
  text-align: center;
  margin-top: 24px;
}

.pdf-download .btn {
  min-width: 240px;
}

.notice-section {
  margin-top: 6px;
}

.notice-list {
  margin: 0;
  padding-left: 1.4em;
}

.notice-list li {
  line-height: 1.8;
}

.text-link {
  color: #234567;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.text-link:hover,
.text-link:focus-visible {
  color: #1d3f5f;
  text-decoration: underline;
}

/* download page */
.download-list {
  margin: 12px 0 24px;
  padding-left: 1.2em;
}

.download-list li + li {
  margin-top: 12px;
}

.download-list a {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
}

.download-note {
  margin-top: 0;
  margin-bottom: 12px;
}

.download-guide {
  margin-top: 18px;
  margin-bottom: 30px;
  padding: 18px;
  background: #f8fff8;
  border: 1px solid #d6ead6;
  border-radius: 10px;
}

.download-guide-text {
  margin: 0 0 12px;
  line-height: 1.7;
  color: #123456;
}

/* contact */
.contact-card {
  padding: 12px;
  border: 1.2px solid #aabbcc;
}

.contact-table {
  width: 100%;
  border-collapse: collapse;
}

.contact-table th,
.contact-table td {
  padding: 9px 0;
  vertical-align: top;
  font-weight: 720;
  line-height: 1.45;
}

.contact-table th {
  width: auto;
  white-space: nowrap;
  text-align: left;
  padding-right: 1.2em;
  letter-spacing: 0.05em;
}

.contact-table td {
  text-align: left;
}

.contact-table td a {
  font-weight: 720;
}

.contact-mail-btn {
  min-width: 280px;
  font-size: 1.1rem;
}

/* footer */
.site-footer {
  margin-top: 24px;
  background: #123660;
  color: #f6faff;
}

.footer-simple {
  text-align: center;
  padding: 12px 16px;
}

.copyright {
  margin: 0;
  font-size: 0.88rem;
  color: #f6faff;
}

/* responsive */
@media (max-width: 960px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .header-inner {
    min-height: 72px;
  }

  .site-logo img {
    width: 48px;
    height: 48px;
  }

  .site-logo svg {
    width: 48px;
    height: 48px;
    display: block;
  }

  .site-logo-text {
    font-size: 1.2rem;
    font-weight: 720;
    color: #f6faff;
  }

  .menu-toggle {
    display: block;
  }

  .global-nav {
    position: fixed;
    top: 72px;
    right: 0;
    width: min(320px, 85%);
    height: calc(100dvh - 72px);
    background: #123660;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: -8px 0 24px rgba(15, 35, 60, 0.10);
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1001;
    overflow-y: auto;
  }

  .global-nav.is-open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }

  .global-nav ul {
    display: block;
    padding: 20px;
  }

  .global-nav li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  .global-nav a {
    display: block;
    padding: 14px 4px;
  }

  .hero {
    padding: 36px 0 48px;
  }

  .hero-content {
    max-width: none;
    padding: 0 4px;
  }

  .hero-eyebrow-wrap,
  .hero-title-wrap,
  .hero-lead-group {
    margin-left: 0;
  }

  .hero-eyebrow {
    font-size: 1.25rem;
    padding: 11px 20px;
    margin-bottom: 10px;
  }

  .hero h1 {
    margin-bottom: 16px;
    font-size: clamp(1.8rem, 7vw, 2.2rem);
    line-height: 1.3;
  }

  .lead {
    font-size: 1rem;
    line-height: 1.75;
  }

  .lead-message {
    font-size: 1.02rem;
  }

  .lead-keyphrase {
    font-size: 1.12rem;
  }

  .hero-cta-links {
    align-items: stretch;
  }

  .hero-sub-link {
    width: 100%;
    min-width: 0;
  }

  .section {
    padding: 48px 0;
  }

  .card-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .kyosai-card {
    padding: 24px;
    margin-bottom: 24px;
    background: #fffaf0;
  }

  .kyosai-card-header {
    gap: 12px;
    margin-bottom: 12px;
  }

  .kyosai-card-header img {
    width: 48px;
    height: 48px;
  }

  .kyosai-card h3 {
    font-size: 1.2rem;
    color: #123456;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    width: 100%;
  }

  .pdf-download .btn {
    min-width: 100%;
  }

  .kyosai-page {
    padding: 18px 12px 30px;
  }

  .detail-section {
    max-width: none;
    margin-bottom: 24px;
    padding: 24px;
    border-radius: 12px;
  }

  .detail-section h1 {
    font-size: 1.6rem;
    color: #123456;
  }

  .detail-section h2 {
    font-size: 1.2rem;
    color: #123456;
  }

  .detail-lead {
    font-size: 0.98rem;
    margin-bottom: 24px;
  }

  .image-card {
    background: #fffaf0;
    padding: 6px;
    margin-bottom: 24px;
  }

  .download-list {
    margin-bottom: 24px;
  }

  .download-list a {
    font-size: 18px;
  }

  .download-guide {
    padding: 12px;
    margin-bottom: 24px;
  }

  .breadcrumb {
    padding-top: 12px;
  }

  .breadcrumb-list {
    font-size: 0.9rem;
  }

  .footer-simple {
    padding: 12px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .container,
  .header-inner,
  .breadcrumb {
    width: min(1120px, calc(100% - 48px));
  }

  .kyosai-page {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (min-width: 769px) {
  body {
    font-size: 18px;
    line-height: 1.6;
    font-weight: 500;
  }

  .global-nav {
    display: block !important;
    position: static;
    width: auto;
    height: auto;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    border-left: none;
    box-shadow: none;
    overflow: visible;
    background: transparent;
  }
}

@media (min-width: 1025px) {
  body {
    background:
      radial-gradient(
        circle at center,
        rgba(216, 240, 216, 0.90) 0%,
        rgba(216, 240, 216, 0.72) 25%,
        rgba(216, 240, 216, 0.54) 50%,
        rgba(216, 240, 216, 0.36) 75%,
        rgba(216, 240, 216, 0.18) 100%
      ),
      linear-gradient(
        90deg,
        rgba(216, 240, 216, 0.12) 0%,
        rgba(216, 240, 216, 0.24) 25%,
        rgba(216, 240, 216, 0.36) 50%,
        rgba(216, 240, 216, 0.24) 75%,
        rgba(240, 216, 240, 0.12) 100%
      ),
      url('/images/bg-main.jpg') center top / cover no-repeat fixed,
      #fafffa;
  }

  .hero {
    background: transparent;
  }

  .container,
  .header-inner,
  .breadcrumb {
    width: min(1120px, calc(100% - 72px));
  }

  .kyosai-page {
    padding-left: 36px;
    padding-right: 36px;
  }
}

/* soshiki form enter (step 1: application date + union name) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.soshiki-form-enter-section .detail-section {
  max-width: none;
}

/* 操作ボタン行と保存組合名パネルの横位置合わせ */
.soshiki-form-enter-page {
  --soshiki-form-actions-btn-width: 7.5em;
  --soshiki-form-actions-gap: 12px;
  --soshiki-form-actions-pad-inline: 20px;
  --soshiki-form-saved-unions-name-gap: 12px;
  --soshiki-form-saved-unions-btn-col-spacer: calc(
    100% - 2.5 * var(--soshiki-form-actions-btn-width) - 2 * var(--soshiki-form-actions-gap)
  );
}

/* 入力ページのみ: 横スクロールなし・画面幅をほぼ使う（§9.0.1） */
.soshiki-form-enter-page .kyosai-page.soshiki-form-enter-section {
  max-width: none;
  padding-top: 12px;
  padding-bottom: 24px;
  padding-left: 8px;
  padding-right: 8px;
}

.soshiki-form-enter-page .soshiki-form-enter-section .detail-section {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.soshiki-form-enter-page .soshiki-form-enter-wrap {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow-x: hidden;
  padding-bottom: 8px;
}

.soshiki-form-enter-wrap {
  overflow-x: auto;
  padding-bottom: 8px;
}

.soshiki-form-enter-page .soshiki-form-sheet {
  transform: scale(var(--soshiki-form-scale, 1));
  transform-origin: top center;
}

.soshiki-form-sheet {
  position: relative;
  /* A4 横（pdf/soshiki-form-enter.pdf = 841.68×595.2 pt = 297×210 mm） */
  width: 297mm;
  height: 210mm;
  max-width: none;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 2px 12px rgba(18, 52, 86, 0.12);
  --soshiki-form-sheet-row-top: 28.5%;
  --soshiki-form-sheet-row-height: 2.8%;
  /* ページ枚数（PNG 実測: 枠 x450–499 y933–997、入力は内側 2px） */
  --soshiki-form-page-count-left-base: 26.841%;
  --soshiki-form-page-count-top-base: 78.505%;
  --soshiki-form-page-count-left-nudge: -10%;
  --soshiki-form-page-count-top-nudge: 5%;
  --soshiki-form-page-count-left: calc(
    var(--soshiki-form-page-count-left-base) +
      var(--soshiki-form-page-count-left-nudge)
  );
  --soshiki-form-page-count-top: calc(
    var(--soshiki-form-page-count-top-base) + var(--soshiki-form-page-count-top-nudge)
  );
  --soshiki-form-page-count-width: 2.672%;
  --soshiki-form-page-count-box-height-base: 5.038%;
  --soshiki-form-page-count-box-scale: 0.8;
  --soshiki-form-page-count-height: calc(
    var(--soshiki-form-page-count-box-height-base) *
      var(--soshiki-form-page-count-box-scale)
  );
  --soshiki-form-page-count-slash-gap: 1.1em;
  --soshiki-form-page-count-font-size: 14px;
  --soshiki-form-page-count-current-offset-x: -9px;
  --soshiki-form-page-count-current-offset-y: -14px;
  --soshiki-form-page-count-total-offset-x: -20px;
  --soshiki-form-page-count-total-offset-y: 6px;
  /* 前月残・月計（PNG 実測 §5.7: 左罫 x507 が y958–996。外枠 49×39 px、padding 2px） */
  --soshiki-form-prior-month-headcount-left: 30.166%;
  --soshiki-form-prior-month-headcount-top: 80.437%;
  --soshiki-form-prior-month-headcount-width: 2.91%;
  --soshiki-form-prior-month-headcount-height: 3.275%;
  --soshiki-form-prior-month-headcount-width-extra: 22px;
  --soshiki-form-prior-month-headcount-height-extra: 8px;
  --soshiki-form-prior-month-headcount-offset-x: -12px;
  --soshiki-form-prior-month-headcount-offset-y: 29px;
  --soshiki-form-month-total-count-left: 40.381%;
  --soshiki-form-month-total-count-top: 80.437%;
  --soshiki-form-month-total-count-width: 2.91%;
  --soshiki-form-month-total-count-height: 3.275%;
  --soshiki-form-month-total-count-width-extra: 24px;
  --soshiki-form-month-total-count-height-extra: 8px;
  --soshiki-form-month-total-count-offset-x: 0px;
  --soshiki-form-month-total-count-offset-y: 29px;
  --soshiki-form-coverage-month-display-offset-x: -6px;
  --soshiki-form-coverage-month-display-offset-y: -24px;
  --soshiki-form-coverage-month-display-width-extra: 2px;
  --soshiki-form-coverage-month-display-height-extra: 10px;
  --soshiki-form-coverage-month-display-font-size: 16px;
  --soshiki-form-footer-metric-font-size: 18px;
  /* 備考（PNG 実測 §5.8: 外枠 x898–1601 y934–1120。704×187 px、padding 2px） */
  --soshiki-form-remarks-left: 53.325%;
  --soshiki-form-remarks-top: 78.421%;
  --soshiki-form-remarks-width: 41.805%;
  --soshiki-form-remarks-height: 15.701%;
  --soshiki-form-remarks-offset-x: 3px;
  --soshiki-form-remarks-offset-y: 30px;
  --soshiki-form-remarks-width-extra: -6px;
  --soshiki-form-remarks-height-extra: -33px;
  --soshiki-form-remarks-font-size: 14px;
  --soshiki-form-remarks-padding-top: 2px;
  --soshiki-form-remarks-padding-inline: 4px;
  --soshiki-form-remarks-padding-bottom: 2px;
  /* 申込日（年・月・日） */
  --soshiki-form-date-group-top-base: 5.2%;
  --soshiki-form-date-group-top-nudge: 2px;
  /* 組合名 */
  --soshiki-form-union-name-top-base: 13.01%;
  --soshiki-form-union-name-top-nudge: 10px;
}

.soshiki-form-sheet-bg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.soshiki-form-fields {
  position: absolute;
  inset: 0;
}

.soshiki-form-field {
  position: absolute;
  margin: 0;
  padding: 0 4px;
  border: 1px solid rgba(54, 168, 114, 0.42);
  border-radius: 2px;
  background: transparent;
  box-shadow: none;
  color: #000;
  font-family: "Meiryo", "Hiragino Sans", sans-serif;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
}

.soshiki-form-field:hover {
  border-color: rgba(54, 168, 114, 0.65);
  background: transparent;
}

.soshiki-form-field:focus {
  background: transparent;
  border-color: #36a872;
  outline: none;
  box-shadow: 0 0 0 2px rgba(54, 168, 114, 0.25);
}

.soshiki-form-date-group {
  position: absolute;
  left: calc(66.2% + 0.4cm);
  top: calc(
    var(--soshiki-form-date-group-top-base) + var(--soshiki-form-date-group-top-nudge)
  );
  width: 30.6%;
  height: 5.4%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 14px;
  padding: 0 2px 0;
  box-sizing: border-box;
}

.soshiki-form-date-part {
  display: flex;
  align-items: flex-end;
  flex: 0 0 auto;
  gap: 5px;
}

.soshiki-form-date-group .soshiki-form-date-field {
  position: static;
  height: auto;
  min-height: 0;
  padding: 4px 5px 5px;
  font-size: 20px;
  line-height: 1.1;
  text-align: center;
  flex: 0 0 auto;
  box-sizing: border-box;
}

.soshiki-form-date-field--year {
  width: 5.8ch;
  min-width: 5.8ch;
}

.soshiki-form-date-field--month,
.soshiki-form-date-field--day {
  width: 3.2ch;
  min-width: 3.2ch;
}

.soshiki-form-date-label {
  flex: 0 0 auto;
  font-family: "Meiryo", "Hiragino Sans", sans-serif;
  font-size: 19px;
  line-height: 1;
  color: #000;
  padding: 0 0 4px 0;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.soshiki-form-union-name-group {
  position: absolute;
  left: calc(58.2% - 0.1cm);
  right: calc(8.73% + 0.1cm);
  width: auto;
  top: calc(
    var(--soshiki-form-union-name-top-base) + var(--soshiki-form-union-name-top-nudge)
  );
  height: 5.4%;
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
}

.soshiki-form-union-name-group .soshiki-form-field--union-name {
  position: static;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 4px 8px 5px;
  box-sizing: border-box;
  text-align: left;
  font-size: 20px;
  line-height: 1.1;
}

.soshiki-form-code-group {
  position: static;
}

/* 産別・支部・分会コード（見出し下の行・3桁） */
.soshiki-form-code-field {
  width: 5.7%;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.52em;
  text-indent: 0.27em;
  padding: 0;
}

.soshiki-form-code-field.soshiki-form-sheet-row-field {
  padding: 0;
}

.soshiki-form-code-field--industry {
  left: 6%;
}

.soshiki-form-code-field--branch {
  left: 11.7%;
}

.soshiki-form-code-field--subbranch {
  left: 17.4%;
}

.soshiki-form-sheet-row-field {
  position: absolute;
  top: var(--soshiki-form-sheet-row-top);
  height: var(--soshiki-form-sheet-row-height);
  margin: 0;
  padding: 0 2px;
  box-sizing: border-box;
  font-size: 18px;
  line-height: var(--soshiki-form-sheet-row-height);
  text-align: center;
  cursor: default;
}

.soshiki-form-code-field[readonly],
.soshiki-form-sheet-row-field[readonly],
.soshiki-form-unit-field[readonly],
.soshiki-form-premium-field[readonly] {
  background: transparent;
  border-color: transparent;
  color: #000;
}

.soshiki-form-code-field[readonly]:hover,
.soshiki-form-code-field[readonly]:focus,
.soshiki-form-sheet-row-field[readonly]:hover,
.soshiki-form-sheet-row-field[readonly]:focus,
.soshiki-form-unit-field[readonly]:hover,
.soshiki-form-unit-field[readonly]:focus,
.soshiki-form-premium-field[readonly]:hover,
.soshiki-form-premium-field[readonly]:focus {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  outline: none;
}

/* 共済口数欄（見出し下の行） */
.soshiki-form-unit-field {
  top: var(--soshiki-form-sheet-row-top);
  height: var(--soshiki-form-sheet-row-height);
  width: 3.1%;
  line-height: var(--soshiki-form-sheet-row-height);
}

.soshiki-form-unit-field--danketsu {
  left: 29.7%;
}

.soshiki-form-unit-field--soshiki-seimei {
  left: 35.4%;
}

.soshiki-form-unit-field--soshiki-iryo {
  left: 41.1%;
}

.soshiki-form-unit-field--soshiki-kotsu {
  left: 46.8%;
}

.soshiki-form-unit-field--soshiki-kasai {
  left: 52.5%;
}

.soshiki-form-unit-field--keicho {
  left: 58.2%;
}

.soshiki-form-unit-field--sogo-kyosai {
  left: 63.9%;
}

/* 掛金（団結枠幅 3.1% の 2.5 倍） */
.soshiki-form-premium-field {
  top: var(--soshiki-form-sheet-row-top);
  height: var(--soshiki-form-sheet-row-height);
  left: 81.9%;
  width: 7.75%;
  line-height: var(--soshiki-form-sheet-row-height);
  text-align: right;
  padding-right: 6px;
}

/* ページ枚数（「/」左右・PNG 実測 §5.6） */
.soshiki-form-page-count-group {
  position: absolute;
  left: var(--soshiki-form-page-count-left);
  top: var(--soshiki-form-page-count-top);
  width: auto;
  height: var(--soshiki-form-page-count-height);
  display: flex;
  align-items: center;
  gap: var(--soshiki-form-page-count-slash-gap);
  box-sizing: border-box;
}

.soshiki-form-page-count-field {
  position: static;
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  aspect-ratio: 1;
  min-width: 0;
  margin: 0;
  padding: 0 1px;
  box-sizing: border-box;
  font-size: var(--soshiki-form-page-count-font-size);
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.soshiki-form-page-count-field--current {
  order: 1;
  transform: translate(
    var(--soshiki-form-page-count-current-offset-x),
    var(--soshiki-form-page-count-current-offset-y)
  );
}

.soshiki-form-page-count-field--total {
  order: 3;
  transform: translate(
    var(--soshiki-form-page-count-total-offset-x),
    var(--soshiki-form-page-count-total-offset-y)
  );
}

/* 前月残・月計（人数・PNG 実測 §5.7。外枠に合わせてグループ配置＋padding で内側 2px） */
.soshiki-form-footer-metric-group {
  position: absolute;
  box-sizing: border-box;
  padding: 2px;
}

.soshiki-form-footer-metric-group--prior-month-headcount {
  left: calc(
    var(--soshiki-form-prior-month-headcount-left) + var(--soshiki-form-prior-month-headcount-offset-x)
  );
  top: calc(
    var(--soshiki-form-prior-month-headcount-top) + var(--soshiki-form-prior-month-headcount-offset-y)
  );
  width: calc(
    var(--soshiki-form-prior-month-headcount-width) + var(--soshiki-form-prior-month-headcount-width-extra)
  );
  height: calc(
    var(--soshiki-form-prior-month-headcount-height) + var(--soshiki-form-prior-month-headcount-height-extra)
  );
}

.soshiki-form-footer-metric-group--month-total-count {
  left: calc(
    var(--soshiki-form-month-total-count-left) +
      var(--soshiki-form-month-total-count-offset-x)
  );
  top: calc(
    var(--soshiki-form-month-total-count-top) +
      var(--soshiki-form-month-total-count-offset-y)
  );
  width: calc(
    var(--soshiki-form-month-total-count-width) +
      var(--soshiki-form-month-total-count-width-extra)
  );
  height: calc(
    var(--soshiki-form-month-total-count-height) +
      var(--soshiki-form-month-total-count-height-extra)
  );
}

.soshiki-form-footer-metric-group--coverage-month-display {
  padding: 1px;
  left: calc(
    var(--soshiki-form-month-total-count-left) +
      var(--soshiki-form-month-total-count-offset-x) +
      (
        var(--soshiki-form-month-total-count-width) +
          var(--soshiki-form-month-total-count-width-extra)
      ) / 4 +
      var(--soshiki-form-coverage-month-display-offset-x)
  );
  top: calc(
    var(--soshiki-form-month-total-count-top) +
      var(--soshiki-form-month-total-count-offset-y) -
      (
        var(--soshiki-form-month-total-count-height) +
          var(--soshiki-form-month-total-count-height-extra)
      ) / 2 +
      var(--soshiki-form-coverage-month-display-offset-y)
  );
  width: calc(
    (
      var(--soshiki-form-month-total-count-width) +
        var(--soshiki-form-month-total-count-width-extra)
    ) / 2 + var(--soshiki-form-coverage-month-display-width-extra)
  );
  height: calc(
    (
      var(--soshiki-form-month-total-count-height) +
        var(--soshiki-form-month-total-count-height-extra)
    ) / 2 + var(--soshiki-form-coverage-month-display-height-extra)
  );
}


.soshiki-form-footer-metric-field {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0 1px;
  box-sizing: border-box;
  font-size: var(--soshiki-form-footer-metric-font-size);
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.soshiki-form-footer-metric-group--coverage-month-display .soshiki-form-field.soshiki-form-footer-metric-field {
  font-size: var(--soshiki-form-coverage-month-display-font-size);
  padding: 2px 1px 0;
}

/* 備考（PNG 実測 §5.8。外枠に合わせてグループ配置＋padding で内側 2px） */
.soshiki-form-remarks-group {
  position: absolute;
  box-sizing: border-box;
  padding: 2px;
  left: calc(var(--soshiki-form-remarks-left) + var(--soshiki-form-remarks-offset-x));
  top: calc(var(--soshiki-form-remarks-top) + var(--soshiki-form-remarks-offset-y));
  width: calc(var(--soshiki-form-remarks-width) + var(--soshiki-form-remarks-width-extra));
  height: calc(var(--soshiki-form-remarks-height) + var(--soshiki-form-remarks-height-extra));
}

.soshiki-form-remarks-field {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--soshiki-form-remarks-padding-top)
    var(--soshiki-form-remarks-padding-inline)
    var(--soshiki-form-remarks-padding-bottom);
  box-sizing: border-box;
  resize: none;
  overflow: hidden;
  font-size: var(--soshiki-form-remarks-font-size);
  line-height: 1.3;
  text-align: left;
  vertical-align: top;
}

.soshiki-form-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--soshiki-form-actions-gap);
  width: 297mm;
  max-width: 100%;
  margin: 16px auto 0;
  padding: 16px var(--soshiki-form-actions-pad-inline);
  box-sizing: border-box;
  border: 1px solid #e0e6ee;
  border-radius: 18px;
  background: #fffaf0;
  box-shadow: 0 6px 18px rgba(15, 35, 60, 0.05);
}

.soshiki-form-actions .btn {
  min-width: var(--soshiki-form-actions-btn-width);
  min-height: 44px;
  padding: 0 20px;
  font-size: 1rem;
  border-width: 2px;
  box-shadow: 0 6px 16px rgba(18, 54, 96, 0.1);
}

.soshiki-form-actions .btn-secondary,
.soshiki-form-actions .btn-primary {
  background: #fff8d8;
  color: #123660;
  border-color: #123660;
}

.soshiki-form-actions .btn-secondary:hover:not(:disabled),
.soshiki-form-actions .btn-secondary:focus-visible:not(:disabled),
.soshiki-form-actions .btn-primary:hover:not(:disabled),
.soshiki-form-actions .btn-primary:focus-visible:not(:disabled) {
  background: #123660;
  color: #fff8d8;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(18, 54, 96, 0.18);
}

.soshiki-form-actions .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

.soshiki-form-saved-unions-panel {
  display: grid;
  grid-template-columns:
    var(--soshiki-form-saved-unions-btn-col-spacer)
    auto
    minmax(0, 1fr);
  column-gap: var(--soshiki-form-saved-unions-name-gap);
  align-items: center;
  width: 297mm;
  max-width: 100%;
  margin: 10px auto 0;
  padding: 8px var(--soshiki-form-actions-pad-inline);
  box-sizing: border-box;
  border: 1px solid #e0e6ee;
  border-radius: 12px;
  background: #fffaf0;
  box-shadow: 0 4px 12px rgba(15, 35, 60, 0.05);
}

.soshiki-form-saved-unions-header,
.soshiki-form-saved-unions-list,
.soshiki-form-saved-unions-item {
  display: contents;
}

.soshiki-form-saved-unions-title {
  grid-column: 3;
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: #234;
}

.soshiki-form-saved-unions-list {
  list-style: none;
}

.soshiki-form-saved-unions-name {
  grid-column: 3;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 27px;
  height: 27px;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid #e8dfd0;
}

.soshiki-form-saved-unions-list .soshiki-form-saved-unions-name:last-of-type {
  border-bottom: none;
}

.soshiki-form-saved-unions-panel .btn {
  min-width: 0;
  min-height: 0;
  height: 22px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  border-radius: 4px;
  border-width: 1px;
  box-shadow: none;
  transform: none;
}

.soshiki-form-saved-unions-panel .btn-secondary {
  background: #fff8d8;
  color: #123660;
  border-color: #123660;
}

.soshiki-form-saved-unions-panel .btn-secondary:hover,
.soshiki-form-saved-unions-panel .btn-secondary:focus-visible {
  background: #123660;
  color: #fff8d8;
  transform: none;
  box-shadow: none;
}

.soshiki-form-saved-unions-clear-all,
.soshiki-form-saved-unions-remove {
  grid-column: 2;
  justify-self: stretch;
  align-self: center;
}

.soshiki-form-saved-unions-clear-all {
  margin-bottom: 4px;
}

.soshiki-form-send-result {
  width: 297mm;
  max-width: 100%;
  margin: 12px auto 0;
  padding: 12px 20px;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.5;
  text-align: right;
  white-space: pre-line;
  border-radius: 4px;
}

.soshiki-form-send-result--success {
  color: #1a4d2e;
  background: #eef8f0;
  border: 1px solid #b8dcc4;
}

.soshiki-form-send-result-pdf-btn {
  margin-top: 10px;
}

.soshiki-form-send-result--error {
  color: #6b1a1a;
  background: #fdf0f0;
  border: 1px solid #e8b4b4;
}

/* --- 組合員入力（最大5名） --- */
.soshiki-form-sheet {
  /* PNG 実測: 1行目 top 37.45%, 行間 7.66%, 行高 7.55% */
  --soshiki-form-member-first-top: 37.45%;
  --soshiki-form-member-row-step: 7.66%;
  --soshiki-form-member-row-height: 7.55%;
  /* 〒・郵便番号文字の縦中心（PNG 実測: 旧ハイフン y≈465 / 行高 → 約 21.09%） */
  --soshiki-form-member-zip-text-center: 21.09%;
  --soshiki-form-member-zip-text-nudge: -1px;
  --soshiki-form-member-zip-address-row-top: calc(
    var(--soshiki-form-member-zip-text-center) +
      var(--soshiki-form-member-zip-text-nudge) -
      var(--soshiki-form-member-box-height) / 2
  );
  --soshiki-form-member-name-sei-left: 24.5%;
  --soshiki-form-member-name-mei-left: 36%;
  --soshiki-form-member-name-field-width: 8.5%;
  --soshiki-form-member-kanji-name-font-size: 16px;
  --soshiki-form-member-kanji-name-height-extra: 5px;
  --soshiki-form-member-kanji-name-top-offset: -5px;
  /* 組合員コード（6桁1枠）— 分会コード字間を基準に 6 マス目線へ微調整 */
  --soshiki-form-member-union-member-code-left: 11.55%;
  --soshiki-form-member-union-member-code-width: 11.5%;
  --soshiki-form-member-union-member-code-letter-spacing: 0.56em;
  --soshiki-form-member-union-member-code-text-indent: 0.14em;
  --soshiki-form-member-union-member-code-padding-left: 4px;
  /* 生年月日・漢字氏名行の縦中心（旧 top 54% + height 40%/2） */
  --soshiki-form-member-birth-text-center: 74%;
  --soshiki-form-member-birth-year-width: 50px;
  --soshiki-form-member-birth-2digit-width: 30px;
  --soshiki-form-member-birth-month-width: 28px;
  --soshiki-form-member-birth-month-left: 53.1%;
  --soshiki-form-member-birth-month-left-nudge: 1px;
  --soshiki-form-member-birth-day-left: 56.9%;
  --soshiki-form-member-birth-year-left: 47.5%;
  --soshiki-form-member-address-field-gap: 2px;
  --soshiki-form-member-address-block-left: 66.6%;
  --soshiki-form-member-town-area-row-left-nudge: -10px;
  --soshiki-form-member-building-left-nudge: -5px;
  --soshiki-form-member-town-gap-from-zip: 2px;
  --soshiki-form-member-building-gap-from-town: 2px;
  /* 郵便番号枠：文字数に加えて px で幅を微調整（5文字 + extra が目安） */
  --soshiki-form-member-zip-width-extra: 6px;
  /* 異動内容（新規・解約・変更）— 行内 left（2026-08-30: 16.2% から −10%） */
  --soshiki-form-member-transfer-left: 6.2%;
  --soshiki-form-member-transfer-left-nudge: 5px;
  --soshiki-form-member-transfer-btn-width: 5%;
  --soshiki-form-member-transfer-width-nudge: -6px;
  --soshiki-form-member-transfer-btn-height: 26%;
  --soshiki-form-member-transfer-height-nudge: 2px;
  --soshiki-form-member-transfer-top-nudge: 0px;
  --soshiki-form-member-transfer-new-first-row-marker-padding-top: 1px;
  /* 性別（男/女ボタン）— 列位置は PNG 実測 §9.7.1（x1028–1088 / 1683px 基準） */
  --soshiki-form-member-gender-column-left: 61.08%;
  --soshiki-form-member-gender-column-width: 3.63%;
  --soshiki-form-member-gender-width: 2.4%;
  --soshiki-form-member-gender-left: calc(
    var(--soshiki-form-member-gender-column-left) +
      (var(--soshiki-form-member-gender-column-width) -
        var(--soshiki-form-member-gender-width)) /
      2
  );
  --soshiki-form-member-gender-border-width: 1.5px;
  --soshiki-form-member-gender-border-width-selected: 2.4px;
  --soshiki-form-member-gender-border-style: dotted;
  --soshiki-form-member-gender-border-color: #123456;
  --soshiki-form-member-gender-border-color-selected: #123456;
  --soshiki-form-member-gender-text-padding-top: var(
    --soshiki-form-member-box-padding-top
  );
  --soshiki-form-member-gender-btn-height: 33%;
  --soshiki-form-member-gender-male-top: 10%;
  --soshiki-form-member-gender-female-top: 57%;
  /* 組合員・標準枠（§9.11）— 郵便番号・住所など新規枠は必ずここを参照 */
  --soshiki-form-member-box-font-size: 15px;
  --soshiki-form-member-box-font-size-min: 10px;
  --soshiki-form-member-box-line-height: 1;
  --soshiki-form-member-box-padding-top: 3px;
  --soshiki-form-member-box-padding-bottom: 0;
  --soshiki-form-member-box-padding-inline: 3px;
  --soshiki-form-member-box-height: 18px;
  --soshiki-form-member-box-border-width: 1px;
  --soshiki-form-member-box-border-radius: 2px;
  --soshiki-form-member-box-border-color: rgba(54, 168, 114, 0.42);
  --soshiki-form-member-box-border-color-hover: rgba(54, 168, 114, 0.65);
  --soshiki-form-member-box-border-color-focus: #36a872;
  --soshiki-form-member-box-focus-ring: 0 0 0 2px rgba(54, 168, 114, 0.25);
  --soshiki-form-member-box-color: #000;
}

.soshiki-form-member-rows {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.soshiki-form-member-row {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(
    var(--soshiki-form-member-first-top) +
      var(--member-row-index) * var(--soshiki-form-member-row-step)
  );
  height: var(--soshiki-form-member-row-height);
  pointer-events: none;
}

.soshiki-form-member-row > * {
  pointer-events: auto;
}

/* 組合員・標準枠（div / input 共通・§9.11） */
.soshiki-form-member-box {
  box-sizing: border-box;
  margin: 0;
  padding: var(--soshiki-form-member-box-padding-top)
    var(--soshiki-form-member-box-padding-inline)
    var(--soshiki-form-member-box-padding-bottom);
  border: var(--soshiki-form-member-box-border-width) solid
    var(--soshiki-form-member-box-border-color);
  border-radius: var(--soshiki-form-member-box-border-radius);
  background: transparent;
  font-family: "Meiryo", "Hiragino Sans", sans-serif;
  font-size: var(--soshiki-form-member-box-font-size);
  line-height: calc(
    var(--soshiki-form-member-box-height) -
      var(--soshiki-form-member-box-padding-top) -
      var(--soshiki-form-member-box-padding-bottom)
  );
  height: var(--soshiki-form-member-box-height);
  min-height: var(--soshiki-form-member-box-height);
  max-height: var(--soshiki-form-member-box-height);
  color: var(--soshiki-form-member-box-color);
  -webkit-appearance: none;
  appearance: none;
}

.soshiki-form-member-box:hover {
  border-color: var(--soshiki-form-member-box-border-color-hover);
}

.soshiki-form-member-box:focus,
.soshiki-form-member-box:focus-within {
  border-color: var(--soshiki-form-member-box-border-color-focus);
  outline: none;
  box-shadow: var(--soshiki-form-member-box-focus-ring);
}

.soshiki-form-member-box.soshiki-form-field--error,
.soshiki-form-member-box:has(.soshiki-form-field--error) {
  border-color: #c0392b;
  box-shadow: 0 0 0 1px rgba(192, 57, 43, 0.35);
}

/* 異動内容（新規・解約・変更） */
.soshiki-form-transfer-btn {
  position: absolute;
  margin: 0;
  padding: 0;
  border: var(--soshiki-form-member-gender-border-width)
    var(--soshiki-form-member-gender-border-style)
    var(--soshiki-form-member-gender-border-color);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.soshiki-form-transfer-btn:hover {
  border-color: var(--soshiki-form-member-gender-border-color);
}

.soshiki-form-transfer-btn:focus {
  outline: none;
  border-color: var(--soshiki-form-member-gender-border-color);
  box-shadow: 0 0 0 2px rgba(18, 52, 86, 0.25);
}

.soshiki-form-transfer-btn.is-selected {
  border-style: solid;
  border-width: var(--soshiki-form-member-gender-border-width-selected);
  border-color: var(--soshiki-form-member-gender-border-color-selected);
}

.soshiki-form-transfer-btn--new,
.soshiki-form-transfer-btn--cancel,
.soshiki-form-transfer-btn--change {
  left: calc(
    var(--soshiki-form-member-transfer-left) + var(--soshiki-form-member-transfer-left-nudge)
  );
  width: calc(
    var(--soshiki-form-member-transfer-btn-width) +
      var(--soshiki-form-member-transfer-width-nudge)
  );
  height: calc(
    var(--soshiki-form-member-transfer-btn-height) +
      var(--soshiki-form-member-transfer-height-nudge)
  );
}

.soshiki-form-transfer-btn--new {
  top: calc(5% + var(--soshiki-form-member-transfer-top-nudge));
}

.soshiki-form-transfer-btn--cancel {
  top: calc(37% + var(--soshiki-form-member-transfer-top-nudge));
}

.soshiki-form-transfer-btn--change {
  top: calc(69% + var(--soshiki-form-member-transfer-top-nudge));
}

/* 組合員コード（UnionMemberCode・6桁1枠）— 字間・フォントは分会コード（.soshiki-form-code-field）と同系 */
.soshiki-form-member-union-member-code {
  position: absolute;
  left: var(--soshiki-form-member-union-member-code-left);
  top: 5%;
  width: var(--soshiki-form-member-union-member-code-width);
  height: 90%;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--soshiki-form-member-union-member-code-letter-spacing);
  text-indent: var(--soshiki-form-member-union-member-code-text-indent);
  line-height: 1;
}

/* 氏名・生年月日など（行内共通・レガシー。標準枠サイズは §9.11 / .soshiki-form-member-box） */
.soshiki-form-member-field {
  margin: 0;
  padding: 0 3px;
  border: 1px solid rgba(54, 168, 114, 0.42);
  border-radius: 2px;
  background: transparent;
  box-sizing: border-box;
  font-family: "Meiryo", "Hiragino Sans", sans-serif;
  font-size: 15px;
  line-height: 1.2;
  color: #000;
}

.soshiki-form-member-field:focus {
  border-color: #36a872;
  outline: none;
  box-shadow: 0 0 0 2px rgba(54, 168, 114, 0.25);
}

.soshiki-form-member-union-member-code.soshiki-form-member-field {
  font-size: 18px;
  padding-left: var(--soshiki-form-member-union-member-code-padding-left);
}

.soshiki-form-member-union-member-code.soshiki-form-member-field:focus {
  background: #fff;
}

.soshiki-form-member-field.soshiki-form-field--error,
.soshiki-form-member-union-member-code.soshiki-form-field--error {
  border-color: #c0392b;
  box-shadow: 0 0 0 1px rgba(192, 57, 43, 0.35);
}

.soshiki-form-member-kana-sei,
.soshiki-form-member-kana-mei,
.soshiki-form-member-kanji-sei,
.soshiki-form-member-kanji-mei {
  position: absolute;
  text-align: left;
}

.soshiki-form-member-kanji-sei,
.soshiki-form-member-kanji-mei {
  font-size: var(--soshiki-form-member-kanji-name-font-size);
  height: calc(
    var(--soshiki-form-member-box-height) +
      var(--soshiki-form-member-kanji-name-height-extra)
  );
  min-height: calc(
    var(--soshiki-form-member-box-height) +
      var(--soshiki-form-member-kanji-name-height-extra)
  );
  max-height: calc(
    var(--soshiki-form-member-box-height) +
      var(--soshiki-form-member-kanji-name-height-extra)
  );
  line-height: calc(
    var(--soshiki-form-member-box-height) +
      var(--soshiki-form-member-kanji-name-height-extra) -
      var(--soshiki-form-member-box-padding-top) -
      var(--soshiki-form-member-box-padding-bottom)
  );
}

.soshiki-form-member-kana-sei,
.soshiki-form-member-kanji-sei {
  left: var(--soshiki-form-member-name-sei-left);
  width: var(--soshiki-form-member-name-field-width);
}

.soshiki-form-member-kana-mei,
.soshiki-form-member-kanji-mei {
  left: var(--soshiki-form-member-name-mei-left);
  width: var(--soshiki-form-member-name-field-width);
}

.soshiki-form-member-kana-sei,
.soshiki-form-member-kana-mei {
  top: var(--soshiki-form-member-zip-address-row-top);
}

.soshiki-form-member-kanji-sei,
.soshiki-form-member-kanji-mei {
  top: calc(
    var(--soshiki-form-member-birth-text-center) -
      var(--soshiki-form-member-box-height) / 2 +
      var(--soshiki-form-member-kanji-name-top-offset)
  );
}

.soshiki-form-member-birth-year,
.soshiki-form-member-birth-month,
.soshiki-form-member-birth-day {
  position: absolute;
  top: calc(
    var(--soshiki-form-member-birth-text-center) -
      var(--soshiki-form-member-box-height) / 2
  );
  text-align: center;
  font-variant-numeric: tabular-nums;
  width: calc(
    var(--soshiki-form-member-box-chars) *
      var(--soshiki-form-member-box-font-size) +
      2 * var(--soshiki-form-member-box-padding-inline) +
      2 * var(--soshiki-form-member-box-border-width)
  );
  min-width: calc(
    var(--soshiki-form-member-box-chars) *
      var(--soshiki-form-member-box-font-size) +
      2 * var(--soshiki-form-member-box-padding-inline) +
      2 * var(--soshiki-form-member-box-border-width)
  );
  max-width: calc(
    var(--soshiki-form-member-box-chars) *
      var(--soshiki-form-member-box-font-size) +
      2 * var(--soshiki-form-member-box-padding-inline) +
      2 * var(--soshiki-form-member-box-border-width)
  );
}

.soshiki-form-member-birth-year {
  --soshiki-form-member-box-chars: 4;
  left: var(--soshiki-form-member-birth-year-left);
  width: var(--soshiki-form-member-birth-year-width);
  min-width: var(--soshiki-form-member-birth-year-width);
  max-width: var(--soshiki-form-member-birth-year-width);
}

.soshiki-form-member-birth-month {
  --soshiki-form-member-box-chars: 2;
  left: calc(
    var(--soshiki-form-member-birth-month-left) +
      var(--soshiki-form-member-birth-month-left-nudge)
  );
  width: var(--soshiki-form-member-birth-month-width);
  min-width: var(--soshiki-form-member-birth-month-width);
  max-width: var(--soshiki-form-member-birth-month-width);
}

.soshiki-form-member-birth-day {
  --soshiki-form-member-box-chars: 2;
  left: var(--soshiki-form-member-birth-day-left);
  width: var(--soshiki-form-member-birth-2digit-width);
  min-width: var(--soshiki-form-member-birth-2digit-width);
  max-width: var(--soshiki-form-member-birth-2digit-width);
}

/* 性別 */
.soshiki-form-gender-btn {
  position: absolute;
  left: var(--soshiki-form-member-gender-left);
  width: var(--soshiki-form-member-gender-width);
  margin: 0;
  padding: 0;
  border: var(--soshiki-form-member-gender-border-width)
    var(--soshiki-form-member-gender-border-style)
    var(--soshiki-form-member-gender-border-color);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.soshiki-form-gender-btn:hover {
  border-color: var(--soshiki-form-member-gender-border-color);
}

.soshiki-form-gender-btn:focus {
  outline: none;
  border-color: var(--soshiki-form-member-gender-border-color);
  box-shadow: 0 0 0 2px rgba(18, 52, 86, 0.25);
}

.soshiki-form-gender-btn.is-selected {
  border-style: solid;
  border-width: var(--soshiki-form-member-gender-border-width-selected);
  border-color: var(--soshiki-form-member-gender-border-color-selected);
}

.soshiki-form-gender-btn--male {
  top: var(--soshiki-form-member-gender-male-top);
  height: var(--soshiki-form-member-gender-btn-height);
}

.soshiki-form-gender-btn--female {
  top: var(--soshiki-form-member-gender-female-top);
  height: var(--soshiki-form-member-gender-btn-height);
}

/* 郵便番号・住所1〜3（横並び） */
.soshiki-form-member-zip-address-row {
  position: absolute;
  left: 66.6%;
  top: var(--soshiki-form-member-zip-address-row-top);
  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--soshiki-form-member-address-field-gap);
  width: max-content;
}

/* 住所1〜5・文字幅（§9.11）— 幅は max フォント（15px）基準。1em にしない（縮小時に枠が縮む） */
.soshiki-form-member-prefecture,
.soshiki-form-member-city,
.soshiki-form-member-town-area,
.soshiki-form-member-area-number,
.soshiki-form-member-building-name {
  width: calc(
    var(--soshiki-form-member-box-chars) *
      var(--soshiki-form-member-box-font-size) +
      2 * var(--soshiki-form-member-box-padding-inline) +
      2 * var(--soshiki-form-member-box-border-width)
  );
  min-width: calc(
    var(--soshiki-form-member-box-chars) *
      var(--soshiki-form-member-box-font-size) +
      2 * var(--soshiki-form-member-box-padding-inline) +
      2 * var(--soshiki-form-member-box-border-width)
  );
  max-width: calc(
    var(--soshiki-form-member-box-chars) *
      var(--soshiki-form-member-box-font-size) +
      2 * var(--soshiki-form-member-box-padding-inline) +
      2 * var(--soshiki-form-member-box-border-width)
  );
  flex: 0 0 auto;
  overflow-x: visible;
}

.soshiki-form-member-zip-wrap {
  position: relative;
  display: flex;
  align-items: flex-start;
  flex: 0 0 auto;
  width: max-content;
  height: var(--soshiki-form-member-box-height);
  line-height: 0;
  pointer-events: none;
}

.soshiki-form-member-zip-inner {
  --soshiki-form-member-box-chars: 5;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex: 0 0 auto;
  width: calc(
    var(--soshiki-form-member-box-chars) * 1em +
      2 * var(--soshiki-form-member-box-padding-inline) +
      2 * var(--soshiki-form-member-box-border-width) +
      var(--soshiki-form-member-zip-width-extra)
  );
  min-width: calc(
    var(--soshiki-form-member-box-chars) * 1em +
      2 * var(--soshiki-form-member-box-padding-inline) +
      2 * var(--soshiki-form-member-box-border-width) +
      var(--soshiki-form-member-zip-width-extra)
  );
  max-width: calc(
    var(--soshiki-form-member-box-chars) * 1em +
      2 * var(--soshiki-form-member-box-padding-inline) +
      2 * var(--soshiki-form-member-box-border-width) +
      var(--soshiki-form-member-zip-width-extra)
  );
  overflow-x: visible;
  overflow-y: visible;
  pointer-events: auto;
}

.soshiki-form-member-zip-view {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--soshiki-form-member-box-padding-top)
    var(--soshiki-form-member-box-padding-inline)
    var(--soshiki-form-member-box-padding-bottom);
  pointer-events: none;
  white-space: nowrap;
  font-family: "Meiryo", "Hiragino Sans", sans-serif;
  font-size: var(--soshiki-form-member-box-font-size);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--soshiki-form-member-box-color);
}

.soshiki-form-member-zip-part {
  letter-spacing: 0.06em;
}

.soshiki-form-member-zip-hyphen {
  margin-left: 0.12em;
  margin-right: 0.12em;
}

.soshiki-form-member-zip {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: var(--soshiki-form-member-box-padding-top)
    var(--soshiki-form-member-box-padding-inline)
    var(--soshiki-form-member-box-padding-bottom);
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: #000;
  text-align: center;
  font-family: "Meiryo", "Hiragino Sans", sans-serif;
  font-size: var(--soshiki-form-member-box-font-size);
  font-variant-numeric: tabular-nums;
  line-height: calc(
    var(--soshiki-form-member-box-height) -
      var(--soshiki-form-member-box-padding-top) -
      var(--soshiki-form-member-box-padding-bottom) -
      2 * var(--soshiki-form-member-box-border-width)
  );
}

.soshiki-form-member-zip::placeholder {
  color: rgba(18, 52, 86, 0.32);
  -webkit-text-fill-color: rgba(18, 52, 86, 0.32);
  opacity: 1;
  font-weight: 300;
}

.soshiki-form-member-zip:focus {
  outline: none;
  box-shadow: none;
}

.soshiki-form-member-prefecture,
.soshiki-form-member-city,
.soshiki-form-member-town-area,
.soshiki-form-member-area-number,
.soshiki-form-member-building-name {
  text-align: left;
}

.soshiki-form-member-prefecture {
  --soshiki-form-member-box-chars: 3;
  position: relative;
  top: auto;
  left: auto;
  flex: 0 0 auto;
}

.soshiki-form-member-city {
  --soshiki-form-member-box-chars: 10;
  position: relative;
  top: auto;
  left: auto;
  flex: 0 0 auto;
}

.soshiki-form-member-town-area-number-row {
  position: absolute;
  left: calc(
    var(--soshiki-form-member-address-block-left) +
      var(--soshiki-form-member-town-area-row-left-nudge)
  );
  top: calc(
    var(--soshiki-form-member-zip-text-center) +
      var(--soshiki-form-member-zip-text-nudge) -
      var(--soshiki-form-member-box-height) / 2 +
      var(--soshiki-form-member-box-height) +
      var(--soshiki-form-member-town-gap-from-zip)
  );
  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--soshiki-form-member-address-field-gap);
  width: max-content;
}

.soshiki-form-member-town-area {
  --soshiki-form-member-box-chars: 12;
  position: relative;
  top: auto;
  left: auto;
  flex: 0 0 auto;
}

.soshiki-form-member-area-number {
  --soshiki-form-member-box-chars: 8;
  position: relative;
  top: auto;
  left: auto;
  flex: 0 0 auto;
}

.soshiki-form-member-building-name {
  --soshiki-form-member-box-chars: 20;
  position: absolute;
  left: calc(
    var(--soshiki-form-member-address-block-left) +
      var(--soshiki-form-member-building-left-nudge)
  );
  top: calc(
    var(--soshiki-form-member-zip-text-center) +
      var(--soshiki-form-member-zip-text-nudge) -
      var(--soshiki-form-member-box-height) / 2 +
      2 * var(--soshiki-form-member-box-height) +
      var(--soshiki-form-member-town-gap-from-zip) +
      var(--soshiki-form-member-building-gap-from-town)
  );
}

/* 配置確認用ラベル（開発用・本番前に削除） */
.soshiki-form-member-field::placeholder,
.soshiki-form-member-union-member-code::placeholder,
.soshiki-form-member-box::placeholder {
  color: rgba(18, 52, 86, 0.32);
  opacity: 1;
  font-weight: 300;
}

.soshiki-form-dev-marker {
  display: block;
  font-family: "Meiryo", "Hiragino Sans", sans-serif;
  font-size: 11px;
  line-height: 1;
  color: rgba(18, 52, 86, 0.85);
  pointer-events: none;
}

.soshiki-form-transfer-btn .soshiki-form-dev-marker {
  font-size: 12px;
  padding-top: 2px;
  color: #123456;
}

.soshiki-form-member-row:first-child .soshiki-form-transfer-btn--new .soshiki-form-dev-marker {
  padding-top: var(--soshiki-form-member-transfer-new-first-row-marker-padding-top);
}

.soshiki-form-gender-btn .soshiki-form-dev-marker {
  font-size: 13px;
  padding-top: var(--soshiki-form-member-gender-text-padding-top);
  color: #123456;
}

@media print {
  @page {
    size: A4 landscape;
    margin: 0;
  }

  body.soshiki-form-enter-page {
    margin: 0;
    padding: 0;
    background: #fff !important;
  }

  body.soshiki-form-enter-page .skip-link,
  body.soshiki-form-enter-page .site-header,
  body.soshiki-form-enter-page .site-footer,
  body.soshiki-form-enter-page .breadcrumb,
  body.soshiki-form-enter-page .hero,
  body.soshiki-form-enter-page .soshiki-form-actions,
  body.soshiki-form-enter-page .soshiki-form-saved-unions-panel,
  body.soshiki-form-enter-page .soshiki-form-send-result {
    display: none !important;
  }

  body.soshiki-form-enter-page #main-content {
    margin: 0 !important;
    padding: 0 !important;
  }

  body.soshiki-form-enter-page .kyosai-page.soshiki-form-enter-section,
  body.soshiki-form-enter-page .soshiki-form-enter-section .detail-section,
  body.soshiki-form-enter-page .soshiki-form-enter-wrap,
  body.soshiki-form-enter-page .soshiki-form-enter {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.soshiki-form-enter-page .soshiki-form-sheet {
    transform: none !important;
    margin: 0 !important;
    box-shadow: none !important;
    width: 297mm !important;
    height: 210mm !important;
    overflow: visible !important;
    page-break-before: avoid;
    page-break-after: avoid;
    page-break-inside: avoid;
  }

  body.soshiki-form-enter-page .soshiki-form-member-rows,
  body.soshiki-form-enter-page .soshiki-form-member-row {
    overflow: visible !important;
  }

  body.soshiki-form-enter-page .soshiki-form-sheet-bg {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body.soshiki-form-enter-page .soshiki-form-sheet ::placeholder {
    color: transparent !important;
    opacity: 0 !important;
  }

  .soshiki-form-transfer-btn.is-selected,
  .soshiki-form-gender-btn.is-selected {
    border-color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .soshiki-form-sheet .soshiki-form-field,
  .soshiki-form-member-field,
  .soshiki-form-member-union-member-code,
  .soshiki-form-member-box {
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .soshiki-form-dev-marker {
    display: none !important;
  }

  .soshiki-form-transfer-btn.is-selected .soshiki-form-dev-marker,
  .soshiki-form-gender-btn.is-selected .soshiki-form-dev-marker {
    display: block !important;
    color: #000 !important;
  }

  .soshiki-form-member-town-area-number-row--print-joined
    .soshiki-form-member-area-number.is-soshiki-print-area-joined-hidden {
    display: none !important;
  }

  .soshiki-form-member-town-area-number-row--print-joined
    .soshiki-form-member-town-area.is-soshiki-print-town-joined {
    --soshiki-form-member-box-chars: 20;
  }
}