/* ============================================
   Reset & Base
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: #000;
  font-family: 'BIZ UDMincho', 'Noto Serif JP', serif;
}

/* ============================================
   NAVIGATION
   ============================================ */
.nav {
  position: sticky;
  top: 0;
  width: 100%;
  height: 99px;
  background: #000;
  z-index: 100;
  display: flex;
  align-items: center;
  /* about系(nav-inner max-width1440中央寄せ＋20px)と同じ内容幅に揃える */
  padding: 0 max(20px, calc(50% - 700px));
}

/* ブランド（葵紋＋ロゴ）— トップ/検定について と統一 */
.nav-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-mon { width: 54px; height: 54px; display: block; }

.nav-logo {
  width: 248px;
  height: 45px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

/* ハンバーガー（モバイルのみ表示） */
.nav-burger { display: none; }

.nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  height: 100%;
  gap: 0;
}

/* ドロップダウン（検定について / 過去問）— ホバーで開く */
.nav-item { position: relative; display: flex; align-items: center; height: 100%; }
.nav-dropdown-icon { display: inline-block; transition: transform 0.2s ease; }
/* about系と統一：∨ SVGチェブロン */
.nav-chevron { width: 13px; height: 7px; display: block; margin-right: 7px; transition: transform 0.2s ease; }
.nav-item--has-sub:hover .nav-chevron,
.nav-item--has-sub:focus-within .nav-chevron { transform: rotate(180deg); }
.nav-sub {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 12px 26px rgba(0,0,0,0.28);
  padding: 8px 0;
  display: none;
  z-index: 200;
}
.nav-sub__link {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  text-decoration: none;
  padding: 11px 22px;
  white-space: nowrap;
}
.nav-sub__link:hover { background: rgba(0,0,0,0.06); }
.nav-item--has-sub:hover .nav-sub,
.nav-item--has-sub:focus-within .nav-sub { display: block; }
.nav-item--has-sub:hover .nav-dropdown-icon { transform: rotate(180deg); }

.nav-link {
  font-family: 'YuKyokasho Yoko', 'YuKyokasho', '游教科書体 横用', '游教科書体', 'Noto Serif JP', serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  padding: 4px 15px;
  display: inline-flex;
  align-items: center;
}

/* 現在ページの下線は廃止（about系ヘッダーと統一） */
.nav-link--active { text-decoration: none; }
.nav-link--dropdown { display: inline-flex; align-items: center; }
.nav-dropdown-icon { font-size: 10px; margin-right: 4px; opacity: 0.7; }

/* ============================================
   PAGE HEADER
   ============================================ */
.page-header {
  position: relative;
  max-width: 1320px;
  margin: 24px auto 0;
  height: 200px;
  overflow: hidden;
}

.page-header-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.page-header-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.40);
}

.page-header-inner {
  position: relative;
  z-index: 1;
  padding: 0 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* パンくず（about系 .ab-breadcrumb とデザイン統一） */
.breadcrumb {
  padding-top: 36px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'YuKyokasho Yoko', 'YuKyokasho', '游教科書体 横用', '游教科書体', 'Noto Serif JP', serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.breadcrumb-home { color: #7a6f60; text-decoration: none; }
.breadcrumb-home:hover { text-decoration: underline; }
.breadcrumb-arrow { color: #7a6f60; font-size: 15px; }
.breadcrumb-current { color: #7a6f60; }

.page-title {
  margin-top: 4px;
  font-size: 32px;
  font-weight: 700;
  line-height: 48px;
  color: #000;
}

.page-subtitle {
  margin-top: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #000;
  word-break: break-all;
  overflow-wrap: normal; word-break: normal; line-break: strict;
}

/* ============================================
   CONTENT SECTION
   ============================================ */
.content-section {
  position: relative;
  max-width: 1320px;
  margin: 64px auto 0;
  background: #f1e9de;
  padding: 64px 24px 80px;
  overflow: hidden;
}

/* Decorative mon overlays */
.mon-deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.12;
  width: 697px;
  height: 694px;
  object-fit: contain;
}
/* pos within content-section: mon1 right-side near top (x=768-60=708 from section left) */
.mon-deco-1 { right: -40px; top: 0; }
/* mon2 left-side near middle (x=-9-60=-69 from section left → overflow left) */
.mon-deco-2 { left: -60px; top: 1311px; }
/* mon3 right-side near bottom */
.mon-deco-3 { right: -40px; top: 2648px; }

.content-inner {
  position: relative;
  z-index: 1;
  max-width: 982px;
  margin: 0 auto;
}

/* ============================================
   STEP PROGRESS BAR
   ============================================ */
.step-bar-wrap {
  background: #fff;
  padding: 20px 24px;
  margin-bottom: 24px;
}

.step-bar {
  display: flex;
  align-items: center;
  gap: 0;
}

.step-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #d0d0d0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-circle--active { background: #174732; }

.step-circle span {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.step-label {
  font-size: 16px;
  font-weight: 700;
  color: #d0d0d0;
  white-space: nowrap;
}

.step-label--active { color: #174732; }

.step-line {
  flex: 1;
  min-width: 20px;
  max-width: 60px;
  height: 1px;
  background: #d0d0d0;
  margin: 0 6px;
}

/* ============================================
   NOTICE BOX
   ============================================ */
.notice-box {
  background: #fff;
  padding: 24px 20px;
  margin-bottom: 16px;
}

.notice-title {
  font-size: 16px;
  font-weight: 700;
  color: #000;
  margin-bottom: 8px;
}

.notice-body-wrap { display: flex; flex-direction: column; gap: 4px; }

.notice-body {
  font-size: 16px;
  font-weight: 500;
  color: #000;
  line-height: 24px;
  overflow-wrap: normal; word-break: normal; line-break: strict;
}

/* ============================================
   FORM BASE
   ============================================ */
.apply-form { width: 100%; }

/* ============================================
   SECTION HEADER
   ============================================ */
.section-header {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 59px;
  background: #e9e4dc;
  padding: 12px 20px;
  gap: 12px;
  flex-wrap: wrap;
}

.section-header--gap-top { margin-top: 40px; }
.section-header--gap-top-sm { margin-top: 41px; }
.section-header--agree { background: #e9e4dc; border-top: 1px solid #f0ebe3; }

.section-title {
  font-size: 20px;
  font-weight: 700;
  color: #000;
  line-height: 30px;
}

.section-label {
  font-size: 14px;
  font-weight: 700;
  color: #6d6d6c;
  margin-left: auto;
}

/* ============================================
   FORM ROW
   ============================================ */
.form-row {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 94px;
  background: #fff;
  border-top: 1px solid #f0ebe3;
}

.form-label-col {
  width: 260px;
  min-width: 160px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px 12px 20px 20px;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-content: center;
}

.form-label {
  font-size: 16px;
  font-weight: 700;
  color: #000;
  line-height: 24px;
}

.badge-required {
  display: inline-block;
  background: #6b3333;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.form-field-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  padding: 20px 16px 20px 12px;
  min-width: 0;
}

.form-field-col--name {
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 24px;
  padding-bottom: 24px;
}

/* ============================================
   VENUE ROW
   ============================================ */
.form-row--venue {
  min-height: auto;
  align-items: flex-start;
}

.form-field-col--venue {
  padding-top: 20px;
  padding-bottom: 20px;
  gap: 16px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.venue-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.venue-row--transport { flex-wrap: nowrap; gap: 8px; }

.venue-btn { cursor: pointer; flex-shrink: 0; }
.venue-btn input[type="radio"] { display: none; }

.venue-btn-inner { line-height: 1; /* BIZ UDMincho縦メトリクスの上ずれ補正 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 46px;
  background: #faf9f7;
  border: 1px solid #ddd9d2;
  font-size: 16px;
  font-weight: 700;
  color: #000;
  cursor: pointer;
  white-space: nowrap;
}

.venue-btn-inner--sel,
.venue-btn input[type="radio"]:checked + .venue-btn-inner {
  background: #174732;
  color: #fff;
  border-color: #174732;
}

/* Transport group */
.transport-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  min-width: 0;
  flex: 1;
}

.transport-alert {
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
  overflow-wrap: normal; word-break: normal; line-break: strict;
}

.transport-group--active .transport-alert { color: rgba(190, 30, 30, 1); }
.transport-group--dim   .transport-alert { color: rgba(190, 30, 30, 0.6); }

.transport-checkboxes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.transport-group--dim .transport-checkboxes { opacity: 0.6; }

.transport-cb {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: #000;
  white-space: nowrap;
}
.transport-cb input[type="checkbox"] { display: none; }

.transport-check-box {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #fff;
  border: 1px solid #aaa;
  flex-shrink: 0;
  position: relative;
}

.transport-check-box--checked::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 1px;
  width: 9px;
  height: 6px;
  border-left: 2px solid #174732;
  border-bottom: 2px solid #174732;
  transform: rotate(-45deg);
}

.field-hint {
  font-size: 14px;
  font-weight: 700;
  color: #989898;
  line-height: 21px;
  overflow-wrap: normal; word-break: normal; line-break: strict;
}

/* ============================================
   CATEGORY ROWS
   ============================================ */
.category-rows { display: flex; flex-direction: column; gap: 16px; }

.category-row {
  display: grid;
  grid-template-columns: 200px 80px auto;
  align-items: center;
  gap: 24px;
}

.category-name {
  font-size: 16px;
  font-weight: 700;
  color: #000;
  text-align: left;
}

.category-price {
  font-size: 16px;
  font-weight: 700;
  color: #000;
  text-align: left;
}

.count-input-wrap { display: flex; align-items: center; gap: 6px; }

.count-input {
  width: 80px;
  height: 32px;
  background: #faf9f7;
  border: 1px solid #ccc;
  font-size: 16px;
  font-weight: 700;
  color: #000;
  padding: 0 8px;
  text-align: center;
}

.count-unit { font-size: 16px; font-weight: 700; color: #000; }

/* ============================================
   PAYMENT ROW
   ============================================ */
.form-row--payment { min-height: auto; align-items: flex-start; }

.form-field-col--payment {
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
}

.payment-buttons { display: flex; gap: 16px; flex-shrink: 0; }

.payment-btn { cursor: pointer; }
.payment-btn input[type="radio"] { display: none; }

.payment-btn-inner { line-height: 1; /* BIZ UDMincho縦メトリクスの上ずれ補正 */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  background: #faf9f7;
  border: 1px solid #ddd9d2;
  font-size: 16px;
  font-weight: 700;
  color: #000;
  cursor: pointer;
  white-space: nowrap;
  padding: 0 16px;
}

.payment-btn-inner--online { min-width: 144px; }
.payment-btn-inner--bank   { min-width: 96px; }

.payment-btn-inner--sel {
  background: #174732;
  color: #fff;
  border-color: #174732;
}

.bank-transfer-detail { display: flex; flex-direction: column; gap: 8px; margin-top: 0; }

.bank-hint {
  font-size: 16px;
  font-weight: 700;
  color: rgba(0,0,0,0.6);
}

.bank-options { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }

.bank-label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.bank-label input[type="radio"] { display: none; }

.bank-radio {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #fff;
  border: 1px solid #aaa;
  flex-shrink: 0;
  position: relative;
}

.bank-label input[type="radio"]:checked + .bank-radio {
  border-color: #174732;
}

.bank-label input[type="radio"]:checked + .bank-radio::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 7px;
  height: 11px;
  border-right: 2px solid #174732;
  border-bottom: 2px solid #174732;
  transform: rotate(45deg);
}

.bank-text { font-size: 16px; font-weight: 700; color: rgba(0,0,0,0.6); }

.bank-date-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.bank-date-label { font-size: 16px; font-weight: 700; color: rgba(0,0,0,0.6); }

.bank-date-input {
  width: 131px;
  height: 32px;
  background: #faf9f7;
  border: 1px solid #ccc;
  font-size: 16px;
  font-weight: 700;
  color: rgba(0,0,0,0.6);
  padding: 0 8px;
}
.bank-date-input::placeholder { color: rgba(0,0,0,0.6); }

/* ============================================
   FORM LABEL VARIANTS
   ============================================ */
.form-label-col--stacked {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
}

.form-sub-note {
  font-size: 12px;
  font-weight: 400;
  color: #6d6d6c;
  line-height: 1.5;
  overflow-wrap: normal; word-break: normal; line-break: strict;
}

/* ============================================
   REMARKS ROW
   ============================================ */
.form-row--remarks { min-height: auto; align-items: flex-start; }

.textarea-input {
  width: 100%;
  max-width: 100%;   /* 入力欄エリアいっぱいに広げる */
  min-height: 80px;
  background: #faf9f7;
  border: 1px solid #ccc;
  font-family: 'BIZ UDMincho', 'Noto Serif JP', serif;
  font-size: 14px;
  font-weight: 700;
  color: #000;
  padding: 8px;
  resize: vertical;
}
.textarea-input::placeholder { color: #989898; }

/* ============================================
   TEXT INPUTS
   ============================================ */
.text-input {
  height: 46px;
  background: #faf9f7;
  border: 1px solid #ccc;
  font-family: 'BIZ UDMincho', 'Noto Serif JP', serif;
  font-size: 16px;
  font-weight: 700;
  color: #000;
  padding: 0 12px;
}
.text-input::placeholder { color: #c9c4bc; }

.text-input--sei { width: 200px; max-width: 100%; }
.text-input--mei { width: 220px; max-width: 100%; }
.text-input--full { width: 100%; max-width: 527px; }
.text-input--dob  { width: 196px; max-width: 100%; }
.text-input--age  { width: 110px; max-width: 100%; }

.text-input--readonly {
  background: #d0d0d0;
  color: #888;
  cursor: default;
}

/* ============================================
   ADDRESS ROW
   ============================================ */
.form-row--address { min-height: auto; align-items: flex-start; }

.form-row--address .form-field-col { gap: 10px; justify-content: flex-start; padding-top: 16px; padding-bottom: 16px; }

.address-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
}

.address-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.address-sub-label {
  font-size: 14px;
  font-weight: 700;
  color: #6d6d6c;
  line-height: 21px;
}

.address-zip   { width: 196px; max-width: 100%; }
.address-city  { width: 100%; max-width: 380px; }
.address-street { width: 100%; max-width: 380px; }

.address-auto-btn { line-height: 1; /* BIZ UDMincho縦メトリクスの上ずれ補正 */
  height: 46px;
  padding: 0 12px;
  background: #d1ccc4;
  border: none;
  font-family: 'BIZ UDMincho', 'Noto Serif JP', serif;
  font-size: 14px;
  font-weight: 700;
  color: #000;
  cursor: pointer;
  white-space: nowrap;
}

/* ============================================
   EMAIL ROW
   ============================================ */
.form-row--email { min-height: auto; }

/* ============================================
   3-COLUMN ROW: 生年月日 | 年齢 | 性別
   ============================================ */
.form-row-3col {
  display: grid;
  grid-template-columns: 372fr 310fr 300fr;
  width: 100%;
  min-height: 94px;
  border-top: 1px solid #f0ebe3;
}

.col3-item {
  display: flex;
  align-items: center;
  background: #fff;
  min-height: 94px;
  min-width: 0;
}

.col3-item--dob   { border-right: 1px solid #f0ebe3; }
.col3-item--age   { border-right: 1px solid #f0ebe3; padding: 0 20px; gap: 12px; }
.col3-item--gender { padding: 0 20px; gap: 12px; }

.col3-item--dob .form-label-col {
  width: 160px;
  min-height: 94px;
  padding: 16px 8px 16px 20px;
}

.col3-field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  padding: 16px 8px 16px 0;
}

.col3-field--row { flex-direction: row; align-items: center; justify-content: flex-start; gap: 6px; }

.form-label-col-sm { display: flex; align-items: center; flex-shrink: 0; }

.unit-text { font-size: 16px; font-weight: 700; color: #000; }

/* Gender buttons */
.gender-buttons { display: flex; gap: 8px; }
.gender-btn { cursor: pointer; }
.gender-btn input[type="radio"] { display: none; }

.gender-btn-inner { line-height: 1; /* BIZ UDMincho縦メトリクスの上ずれ補正 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 46px;
  background: #faf9f7;
  border: 1px solid #ddd9d2;
  font-size: 16px;
  font-weight: 700;
  color: #c9c4bc;
  cursor: pointer;
}

.gender-btn-inner--sel,
.gender-btn input[type="radio"]:checked + .gender-btn-inner {
  background: #174732;
  color: #fff;
  border-color: #174732;
}

/* ============================================
   EXAMINEE BLOCK
   ============================================ */
.examinee-block + .examinee-block { margin-top: 24px; }

/* ============================================
   EXAMINEE HEADER BAR
   ============================================ */
.examinee-header {
  width: 100%;
  min-height: 32px;
  background: #174732;
  display: flex;
  align-items: center;
  padding: 6px 20px;
  gap: 12px;
  flex-wrap: wrap;
}

.examinee-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.examinee-circle span {
  font-size: 14px;
  font-weight: 700;
  color: #174732;
  line-height: 1;
}

.examinee-label { font-size: 16px; font-weight: 700; color: #fff; }

.same-as-rep { display: flex; align-items: center; gap: 8px; cursor: pointer; margin-left: auto; }
.same-as-rep input[type="checkbox"] { display: none; }

.same-check {
  width: 20px;
  height: 20px;
  background: #fff;
  border: 1px solid #ccc;
  display: inline-block;
  flex-shrink: 0;
  position: relative;
}

.same-as-rep input[type="checkbox"]:checked + .same-check {
  border-color: #174732;
}

.same-as-rep input[type="checkbox"]:checked + .same-check::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 12px;
  height: 7px;
  border-left: 2px solid #174732;
  border-bottom: 2px solid #174732;
  transform: rotate(-45deg);
}

.same-label { font-size: 16px; font-weight: 700; color: #fff; }

/* ============================================
   TOTAL SECTION
   ============================================ */
.total-header--gap-top { margin-top: 80px; }

.total-header {
  width: 100%;
  min-height: 59px;
  background: #174732;
  display: flex;
  align-items: center;
  padding: 12px 20px;
}

.total-header-text { font-size: 20px; font-weight: 700; color: #fff; }

.total-body {
  width: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 16px 24px;
  justify-content: space-between;
  border-top: 1px solid #f0ebe3;
  flex-wrap: wrap;
  gap: 12px;
}

.total-summary { display: flex; gap: 24px; flex-wrap: wrap; }

.total-item { font-size: 20px; font-weight: 700; color: #174732; line-height: 30px; }

.total-amount-group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.total-label { font-size: 20px; font-weight: 700; color: #174732; line-height: 36px; white-space: nowrap; }

.total-price-row { display: flex; align-items: baseline; gap: 4px; }

.total-price { font-size: 32px; font-weight: 700; color: #174732; line-height: 48px; }

.total-unit { font-size: 16px; font-weight: 700; color: #174732; }

/* ============================================
   AGREE SECTION
   ============================================ */
.agree-body {
  width: 100%;
  background: #fff;
  padding: 20px 20px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid #f0ebe3;
}

.agree-row { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.agree-row input[type="checkbox"] { display: none; }

.agree-check-box {
  width: 24px;
  height: 24px;
  background: #fff;
  border: 1px solid #aaa;
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
}

.agree-row input[type="checkbox"]:checked + .agree-check-box {
  border-color: #174732;
}

.agree-row input[type="checkbox"]:checked + .agree-check-box::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 4px;
  width: 14px;
  height: 8px;
  border-left: 2.5px solid #174732;
  border-bottom: 2.5px solid #174732;
  transform: rotate(-45deg);
}

.agree-text { font-size: 16px; font-weight: 700; line-height: 24px; overflow-wrap: normal; word-break: normal; line-break: strict; }
.agree-text--green { color: #174732; }

.agree-note {
  font-size: 14px;
  font-weight: 500;
  color: #000;
  line-height: 21px;
  padding-left: 32px;
  overflow-wrap: normal; word-break: normal; line-break: strict;
}

/* ============================================
   SUBMIT NOTICE
   ============================================ */
.submit-notice--gap-top { margin-top: 39px; }

.submit-notice {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 48px;
}

.submit-notice-bar { width: 8px; background: #174732; flex-shrink: 0; }

.submit-notice-text {
  font-size: 16px;
  font-weight: 700;
  color: #000;
  line-height: 24px;
  padding: 0 12px;
  word-break: normal;
  overflow-wrap: normal;
  line-break: strict;
}

.submit-notice-text .nobr { white-space: nowrap; }

/* ============================================
   SUBMIT SECTION
   ============================================ */
.submit-section--gap-top { margin-top: 17px; }

.submit-section {
  width: 100%;
  min-height: 105px;
  background: #174732;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
}

.submit-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-decoration: none;
  transition: opacity .2s;
}

.submit-btn.is-disabled {
  opacity: .45;
  cursor: not-allowed;
}

.submit-error {
  display: none;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #ffd9d9;
  text-align: center;
  line-height: 1.5;
}

.submit-error.is-visible { display: block; }

.submit-btn-ja {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  line-height: 36px;
}

.submit-btn-en {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 21px;
  letter-spacing: 0.1em;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: #000;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.footer-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
}

.footer-link {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 16px;
}

.footer-copy {
  font-family: 'AH-Hakushu-Brush-RSW9', 'AH白洲真楷書体W9', 'Kaisei HarunoUmi', serif;
  font-size: 12px;
  font-weight: 400;
  color: #fff;
  text-align: center;
  overflow-wrap: normal; word-break: normal; line-break: strict;
}

/* ============================================
   RESPONSIVE — tablet (≤900px)
   ============================================ */
@media (max-width: 900px) {
  .nav { padding: 0 16px; }
  .nav-logo { width: 162px; height: 29px; }
  .nav-mon { width: 40px; height: 40px; }
  .nav-link { font-size: 13px; padding: 4px 7px; }
  .page-header { margin: 16px auto 0; }
  .content-section { margin: 40px auto 0; padding: 40px 20px 60px; }
  .mon-deco { width: 500px; height: auto; }

  /* 入力欄を全幅に広げる（右側の余白を解消） */
  .text-input--full, .textarea-input, .address-city, .address-street { max-width: 100%; }

  /* 3-col row: stack as 3 full-width rows, keep label|field horizontal */
  .form-row-3col { grid-template-columns: 1fr; }
  .col3-item {
    align-items: stretch;
    min-height: 80px;
    gap: 0;
  }
  .col3-item--dob,
  .col3-item--age,
  .col3-item--gender {
    border-right: none;
    border-top: 1px solid #f0ebe3;
    padding: 0;
  }
  .col3-item .form-label-col,
  .col3-item .form-label-col-sm {
    width: 260px;
    min-width: 160px;
    min-height: unset;
    flex-shrink: 0;
    align-items: center;
    padding: 16px 12px 16px 20px;
  }
  .col3-item .col3-field {
    flex: 1;
    padding: 16px 16px 16px 12px;
  }
}

/* ============================================
   RESPONSIVE — mobile (≤640px)
   ============================================ */
/* ============================================
   RESPONSIVE — モバイル：ハンバーガーメニュー（≤768px）
   ============================================ */
@media (max-width: 768px) {
  .nav { height: 64px; padding: 0 16px; }
  .nav-mon { width: 36px; height: 36px; }
  .nav-logo { width: 168px; height: 30px; }

  .nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 34px; height: 34px;
    margin-left: auto;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
  }
  .nav-burger span { display: block; width: 24px; height: 2px; background: #fff; margin: 0 auto; }

  /* リンクをドロップダウンに */
  .nav-links {
    position: absolute;
    top: 64px; left: 0; right: 0;
    margin: 0;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #000;
    border-top: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 24px rgba(0,0,0,0.5);
    display: none;
    z-index: 200;
  }
  .nav.is-open .nav-links { display: flex; }
  .nav-link {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-size: 16px;
  }
  .nav-link--dropdown { justify-content: flex-start; }
  .nav-item { display: block; height: auto; }
  .nav-item .nav-link { display: flex; }
  /* ドロップダウン（検定について/過去問）はインデント常時表示 */
  .nav-sub {
    position: static;
    transform: none;
    display: none;   /* 初期は閉じる。ホバー/フォーカスで展開（:hover/:focus-within ルールが表示） */
    min-width: 0;
    background: rgba(255,255,255,0.05);
    box-shadow: none;
    padding: 0;
  }
  .nav-sub__link {
    color: #fff;
    font-size: 15px;
    padding: 13px 20px 13px 42px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .nav-sub__link:hover { background: rgba(255,255,255,0.08); }
  /* タッチ/クリックで親を開いた時：サブメニュー展開＋チェブロン反転 */
  .nav-item--has-sub.is-open .nav-sub { display: block; }
  .nav-item--has-sub.is-open .nav-chevron { transform: rotate(180deg); }
  .breadcrumb { font-size: 13px; padding-top: 24px; }
}

@media (max-width: 640px) {
  /* Nav */
  .nav { padding: 0 12px; height: 64px; }
  .nav-mon { width: 36px; height: 36px; }
  .nav-logo { width: 168px; height: 30px; }
  .mon-deco { display: none; }
  .page-header { margin: 8px auto 0; height: 140px; }
  .content-section { margin: 24px auto 0; padding: 24px 12px 48px; }

  /* Page header */
  .page-header { height: 160px; }
  .page-title { font-size: 24px; }
  .page-subtitle { font-size: 13px; }

  /* Content */
  .content-section { padding: 16px 12px 48px; }

  /* Step bar — hide labels on very small screens */
  .step-label { display: none; }
  .step-bar-wrap { padding: 12px 16px; }

  /* Form rows: stack label above field */
  .form-row { flex-direction: column; min-height: auto; }

  .form-label-col {
    width: 100%;
    min-width: unset;
    padding: 12px 16px 4px;
    border-bottom: none;
  }

  .form-field-col { padding: 8px 16px 16px; }

  /* Name: 姓・名 fill width and wrap */
  .form-field-col--name { flex-direction: row; flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px; }
  .text-input--sei,
  .text-input--mei { flex: 1 1 140px; width: auto; }

  /* Venue: buttons fill row evenly */
  .venue-row { gap: 8px; }
  .venue-btn { flex: 1 1 96px; }
  .venue-btn-inner { width: 100%; }
  .venue-row--transport { flex-wrap: wrap; }
  .transport-group { flex: none; width: 100%; margin-top: 4px; }

  /* Category: relax fixed columns */
  .category-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; }

  /* 3-col items: stack label above field (match other rows) */
  .col3-item { flex-direction: column; align-items: flex-start; }
  .col3-item .form-label-col,
  .col3-item .form-label-col-sm { width: 100%; min-width: unset; padding: 12px 16px 4px; }
  .col3-item .col3-field { width: 100%; padding: 4px 16px 12px; }

  /* Inputs: fill width */
  .text-input--full { max-width: 100%; width: 100%; }
  .text-input--dob  { width: 100%; }
  .textarea-input   { max-width: 100%; }

  /* Address */
  .address-zip, .address-city, .address-street { width: 100%; max-width: 100%; }
  .address-input-row { width: 100%; }
  .address-input-row .address-zip { flex: 1 1 auto; }

  /* Payment: stack buttons above bank detail */
  .form-field-col--payment { gap: 16px; }
  .payment-buttons { flex-wrap: wrap; width: 100%; }
  .payment-btn { flex: 1 1 140px; }
  .payment-btn-inner { width: 100%; }
  .bank-transfer-detail { width: 100%; }

  /* Total: spacing when stacked */
  .total-body { flex-direction: column; align-items: flex-start; gap: 16px; }

  /* Footer links */
  .footer-link { font-size: 14px; }
}