@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/noto-sans-jp-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/noto-sans-jp-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/noto-sans-jp-700.woff2') format('woff2');
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* Match reference storefront (okoku-jp.myshopify.com):
 *   - base font 14px (was 16px)
 *   - "Noto Sans JP" family (Google Fonts, equivalent to ref's "Noto Sans Japanese")
 *   - container max-width 1200px, centered
 *   - brand accent red for 王国 text elements (applied via image logo)
 */
:root {
  --brand-red: #e60012;
  --container-max: 1200px;
  /* Shared header/footer container sizing — matches the reference's --container-gutter
   * breakpoint (16px below 741px, 40px at/above it). */
  --container-max-width: 1600px;
  --container-gutter: 16px;
}
@media screen and (min-width: 741px) {
  :root {
    --container-gutter: 40px;
  }
}
html {
  font-size: 14px;
}
body {
  font-family:
    'Noto Sans JP',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    'Hiragino Sans',
    'Yu Gothic UI',
    sans-serif;
  font-size: 14px;
  margin: 0;
  background: #ffffff;
  color: #1a1a1a;
  /* Sticky-footer frame: site header + main (grows) + site footer */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}
.auth-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 40px 16px;
}
/* Match ref: h1/h2 = 28px weight 700, color #1a1a1a */
h1 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.7333;
  color: #1a1a1a;
  margin: 0 0 8px;
}
h2 {
  font-size: 28px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.14px;
  color: #1a1a1a;
}
.subtitle {
  font-size: 14px;
  color: #555;
  margin: 0 0 24px;
}
form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
label {
  font-size: 13px;
  font-weight: 600;
}
input[type='text'],
input[type='email'],
input[type='password'] {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
}
.field.has-error input {
  border-color: #dc3545;
  border-width: 2px;
}
.field-error {
  color: #dc3545;
  font-size: 12px;
  margin-top: 2px;
}
.global-error {
  background: #fdecea;
  border: 1px solid #dc3545;
  padding: 12px;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 16px;
  color: #7a1a1a;
}
.global-info {
  background: #e7f5ff;
  border: 1px solid #0070d2;
  padding: 12px;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 16px;
  color: #084b83;
}
.auth-container button[type='submit'] {
  padding: 12px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: #007bff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.auth-container button[type='submit']:hover {
  background: #0056b3;
}
.auth-container button[type='submit']:disabled {
  background: #9dc4ef;
  cursor: not-allowed;
}
.links {
  margin-top: 24px;
  font-size: 13px;
  text-align: center;
  color: #666;
  border-top: 1px solid #e4e4e4;
  padding-top: 16px;
}
.links a {
  color: #007bff;
  text-decoration: none;
}
.links a:hover {
  text-decoration: underline;
}

/* ---------- Login page (2-column) ---------- */
.login-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px;
}
.page-title {
  font-size: 24px;
  margin: 0 0 24px;
  font-weight: 700;
  color: #09090b;
}
.login-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.card {
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  padding: 24px;
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}
.card h2 {
  font-size: 24px;
  line-height: 32px;
  margin: 0 0 12px;
  text-align: center;
  font-weight: 700;
  color: #09090b;
}
.card > p {
  font-size: 14px;
  color: #71717a;
  margin: 0 0 24px;
  text-align: center;
  line-height: 20px;
}

/* Form inside login card: 24px gap between inputs group and submit button */
.card form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Stacked form fields (login) */
.login-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.login-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.login-field label {
  font-size: 14px;
  font-weight: 500;
  color: #18181b;
}
.label-hint {
  font-weight: 400;
  color: #71717a;
  font-size: 14px;
}
.input-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.input-icon {
  position: absolute;
  left: 12px;
  color: #71717a;
  pointer-events: none;
  flex-shrink: 0;
}
/* .login-field prefix outweighs the global input[type='email'] rule's specificity so this
 * wins — otherwise its flat 10px 12px padding clobbers the 32px left padding reserved for
 * the icon, and the placeholder text renders underneath it. */
.login-field .input-icon-wrap input {
  width: 100%;
  height: 40px;
  padding: 8px 12px 8px 32px;
  font-size: 14px;
  border: 1px solid #e4e4e7;
  border-radius: 2px;
  background: #fff;
  color: #18181b;
}
.input-icon-wrap input:focus {
  outline: 2px solid #1a1a1a;
  outline-offset: -1px;
}
.login-field > input[type='password'] {
  height: 40px;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #e4e4e7;
  border-radius: 2px;
  background: #fff;
  color: #18181b;
  width: 100%;
}
.login-field > input[type='password']:focus {
  outline: 2px solid #1a1a1a;
  outline-offset: -1px;
}
.login-field input[aria-invalid='true'] {
  border-color: #dc3545;
  border-width: 2px;
}

.forgot-link {
  display: block;
  text-align: left;
  color: #71717a;
  font-size: 14px;
  text-decoration: underline;
  line-height: 1;
}

.btn-login {
  display: flex;
  align-items: center;
  background: #1a1a1a;
  color: #fafafa;
  border: 0;
  border-radius: 9999px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}
.btn-login span {
  flex: 1;
  text-align: center;
}
.btn-login svg {
  position: absolute;
  right: 16px;
}
.btn-login:hover {
  background: #333;
  color: #fafafa;
}
.btn-login:disabled {
  background: #a1a1aa;
  cursor: not-allowed;
}

/* Submit-in-progress spinner (see /submit-spinner.js). Button-class-agnostic: hides the button's
   own label/icon and centres a spinner in currentColor, so it works on .btn-login, .btn-primary,
   etc. without per-button rules. The button keeps its size (visibility:hidden, not display:none). */
button.is-submitting {
  position: relative;
  pointer-events: none;
}
button.is-submitting > * {
  visibility: hidden;
}
button.is-submitting::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: submit-spin 0.6s linear infinite;
}
@keyframes submit-spin {
  to {
    transform: rotate(360deg);
  }
}

.btn-register {
  display: flex;
  align-items: center;
  background: #fff;
  color: #18181b;
  border: 1px solid #1a1a1a;
  border-radius: 9999px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}
.btn-register span {
  flex: 1;
  text-align: center;
}
.btn-register svg {
  position: absolute;
  right: 16px;
}
.btn-register:hover {
  background: #f4f4f5;
  color: #18181b;
}

@media (max-width: 767px) {
  /* ── Login page ── */
  .login-container {
    padding: 16px;
  }
  .login-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    justify-items: center;
  }
  .login-grid .card {
    max-width: 420px;
    width: 100%;
  }
  /* Register card: tighter gap between subtitle and button (Figma mobile spec) */
  .login-grid .card:has(.btn-register) > p {
    margin-bottom: 16px;
  }
}

/* ---------- Form pages (register / forgot / reset) ---------- */
.form-page {
  max-width: 920px;
  margin: 0 auto;
  padding: 24px;
}
.form-page .page-title {
  font-size: 30px;
  font-weight: 700;
  color: #09090b;
  text-align: center;
  margin: 0 0 24px;
}

/* Step indicator */
.step-indicator {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  gap: 24px;
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
}
/* Single horizontal separator running behind step circles (per Figma).
   With 3 equal-width steps + 24px outer padding, each step center sits at
   1/6 of the indicator's width past the left padding. Line starts at the
   right edge of the 1st circle and ends at the left edge of the 3rd:
   offset = (indicator width)/6 + (24px padding - 32px half-circle inset). */
.step-indicator::before {
  content: '';
  position: absolute;
  left: calc(16.6667% + 40px);
  right: calc(16.6667% + 40px);
  top: 56px;
  height: 1px;
  background: #e4e4e7;
  z-index: 0;
}
.step-item {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.step-circle {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 400;
  background: #f4f4f5;
  color: #71717a;
  flex-shrink: 0;
}
/* Done badge: 16px circle (8px icon + 4px padding each side) per Figma #82:6248–6249. */
.step-done-badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 16px;
  background: #fafafa;
  border: 1px solid #1a1a1a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-done-badge svg {
  stroke: #1a1a1a;
  flex-shrink: 0;
}
.step-item.active .step-circle {
  background: #1a1a1a;
  color: #fafafa;
  font-weight: 700;
}
.step-label {
  font-size: 16px;
  font-weight: 400;
  color: #71717a;
  text-align: center;
}
.step-item.active .step-label {
  font-size: 16px;
  font-weight: 700;
  color: #09090b;
}
/* Two-tone progress line (Figma #80:2247): dark = done/active segments, grey = upcoming.
   data-progress="1" → first half dark (step 1 done, step 2 active)
   data-progress="2" → full dark (all steps done) */
.step-indicator[data-progress="1"]::before {
  background: linear-gradient(to right, #1a1a1a 50%, #e4e4e7 50%);
}
.step-indicator[data-progress="2"]::before {
  background: #1a1a1a;
}

/* Legacy connector — replaced by .step-indicator::before single line; kept hidden for safety */
.step-connector {
  display: none;
}

.badge-required {
  display: inline-block;
  position: relative;
  bottom: 0.8px;
  color: #b70000;
  font-size: 12px;
  margin-left: 4px;
  vertical-align: middle;
  font-weight: 400;
}
/* Inline red asterisk used in body text (e.g. instruction-box) */
.required-mark-inline {
  color: #b70000;
  font-weight: 400;
}

.instruction-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 0 24px;
  font-size: 14px;
  line-height: 20px;
  color: #1a1a1a;
}
.instruction-box p {
  margin: 0;
}

/* Form card wrapper */
.form-card {
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
  overflow: hidden;
}
.form-card-header {
  padding: 24px 24px 0px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  color: #09090b;
}

.form-table {
  border-collapse: collapse;
  width: 100%;
  margin: 24px 0 0;
}
.form-table .col-label-main {
  width: 156px;
}
.form-table .col-label-sub {
  width: 156px;
}
.form-table th {
  background: #f4f4f5;
  padding: 16px 24px;
  min-height: 72px;
  text-align: left;
  vertical-align: middle;
  font-weight: 500;
  font-size: 14px;
  color: #18181b;
  border-bottom: 1px solid #e4e4e7;
}
/* Address: main label cell — left-aligned, right+bottom border per Figma strokeWeight 0px 1px 1px 0px */
.form-table th.address-main-th {
  text-align: left;
  vertical-align: middle;
  border-right: 1px solid #e4e4e7;
}
/* Address: sub-label column — inherits standard th styles */
.form-table th.address-sub-th {
  font-size: 14px;
  color: #18181b;
}
.form-table th.address-sub-th-wide {
  white-space: nowrap;
}
/* Override global label rule so <label> inside th inherits cell font */
.form-table th label {
  font-size: inherit;
  font-weight: inherit;
  vertical-align: middle;
}
.form-table td.input-cell {
  border-bottom: 1px solid #e4e4e7;
  padding: 16px 24px;
  min-height: 72px;
  vertical-align: middle;
}
.form-table input[type='text'],
.form-table input[type='email'],
.form-table input[type='password'],
.form-table input[type='tel'] {
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 2px;
  padding: 8px 12px;
  height: 40px;
  font-size: 14px;
  color: #18181b;
}
.form-table input[type='text']:focus,
.form-table input[type='email']:focus,
.form-table input[type='password']:focus,
.form-table input[type='tel']:focus {
  outline: 2px solid #1a1a1a;
  outline-offset: -1px;
}
.form-table input::placeholder,
.form-table select:invalid {
  color: #71717a;
}
.form-table input[aria-invalid='true'] {
  border-color: #dc3545;
  border-width: 2px;
  background: #fdecea;
}
.form-table .helper-text {
  font-size: 14px;
  color: #71717a;
  margin-top: 4px;
}
.form-table .field-error {
  color: #dc3545;
  font-size: 12px;
  margin-top: 4px;
}

/* Inline input + hint badge. Address sub-rows: input fills the cell.
   Top rows use the `--fixed` modifier to lock input width to 392px per Figma. */
.input-with-hint {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
}
.input-with-hint input,
.input-with-hint select {
  flex: 1 1 auto;
  width: auto;
  max-width: 100%;
  min-width: 0;
}
.input-with-hint--fixed input,
.input-with-hint--fixed select {
  flex: 0 0 392px;
  max-width: 392px;
}
.input-hint {
  display: inline-block;
  background: #f4f4f5;
  border-radius: 9999px;
  padding: 2px 10px;
  font-size: 12px;
  color: #18181b;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Same text as 電話番号's real badge so it reserves the identical width — invisible but
 * still takes up layout space, so every field's input/select ends at the same right edge
 * regardless of whether that row has a real badge. */
.input-hint--spacer {
  visibility: hidden;
}
/* お名前's real "全角" badge is shorter than 電話番号's "半角数字・ハイフンなし", so on its
 * own it reserves less trailing space and its input ends up wider than the others. Stack
 * the real badge on top of the same invisible spacer instead of placing them side by side —
 * the slot's width comes from the (longer) spacer, and the real badge just renders over it
 * at its natural size, without adding to the reserved width. */
.input-hint-slot {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.input-hint-slot .input-hint:not(.input-hint--spacer) {
  position: absolute;
  left: 0;
  top: 0;
}
@media (max-width: 767px) {
  /* Badges (and the invisible width-matching spacer) are a desktop-only alignment aid —
   * on mobile they just crowd a narrow row, so hide them and let inputs use the full
   * row width instead of reserving badge space. */
  .input-hint,
  .input-hint-slot {
    display: none;
  }
}
.form-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.btn-primary,
.btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 372px;
  max-width: 100%;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  border-radius: 9999px;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  position: relative;
  -webkit-appearance: none;
  appearance: none;
}
.btn-primary span,
.btn-secondary span {
  flex: 1;
  text-align: center;
}
.btn-primary .btn-arrow-icon {
  position: absolute;
  right: 20px;
}
.btn-secondary .btn-arrow-icon {
  position: absolute;
  left: 20px;
}
.btn-primary {
  background: #1a1a1a;
  color: #fafafa;
  border: 1px solid transparent;
}
.btn-primary:hover {
  background: #333;
  color: #fafafa;
}
.btn-primary:disabled,
.btn-primary.is-disabled {
  background: #a1a1aa;
  color: #fafafa;
  cursor: not-allowed;
}
.btn-primary:disabled:hover,
.btn-primary.is-disabled:hover {
  background: #a1a1aa;
}
.btn-primary .btn-circle-icon {
  position: absolute;
  left: 16px;
}
.btn-secondary {
  background: #fff;
  color: #18181b;
  border: 1px solid #1a1a1a;
}
.btn-secondary:hover {
  background: #f4f4f5;
  color: #18181b;
}

.error-count {
  color: #dc3545;
  font-size: 14px;
  text-align: center;
  margin-top: 12px;
}

.form-table select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  background-image: url('/icons/chevron-down.svg');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  border: 1px solid #e4e4e7;
  border-radius: 2px;
  padding: 8px 36px 8px 12px;
  height: 40px;
  font-size: 14px;
  color: #18181b;
}
.form-table select:focus {
  outline: 2px solid #1a1a1a;
  outline-offset: -1px;
}

.form-table .gender-group input[type='radio'],
.form-table .newsletter-group input[type='checkbox'],
.privacy-box input[type='checkbox'] {
  accent-color: #1a1a1a;
}
.form-table .gender-group {
  display: flex;
  gap: 16px;
  padding: 12px 0px;
}
.form-table .gender-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  color: #18181b;
  cursor: pointer;
}
.form-table .newsletter-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.form-table .newsletter-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  color: #18181b;
  cursor: pointer;
}
.form-table .newsletter-intro {
  margin: 0 0 12px;
  font-size: 14px;
  color: #1a1a1a;
  line-height: 1.6;
}
.form-table .newsletter-group--confirm label {
  cursor: default;
  pointer-events: none;
}

.privacy-box {
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  margin: 0 0 24px;
}
.privacy-box .privacy-header {
  padding: 24px 24px 0px;
}
.privacy-box h2 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  color: #09090b;
  margin: 0;
}
.privacy-box .privacy-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
}
.privacy-box .privacy-scroll {
  max-height: 240px;
  overflow-y: auto;
  font-size: 14px;
  color: #18181b;
  line-height: 1.7;
  padding: 16px;
  background: #f4f4f5;
  border: 1px solid #e4e4e7;
  border-radius: 4px;
}
.privacy-box .privacy-agreement {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.privacy-box .privacy-agreement .consent-text {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #1a1a1a;
}
.privacy-box .privacy-agreement label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #18181b;
  cursor: pointer;
}

/* ---------- Card page (centered single-card: forgot-password, email-sent, reset-password) ---------- */
.card-page {
  /* Vertical centering relies on body's flex frame (main grows via flex: 1) */
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 480px;
  margin: 0 auto;
  padding: 24px;
}
.card-page .card {
  padding: 24px;
}
.card-title {
  font-size: 30px;
  font-weight: 700;
  color: #09090b;
  margin: 0 0 12px;
  text-align: center;
}
.card-desc {
  font-size: 14px;
  color: #71717a;
  line-height: 1.7;
  margin: 0 0 24px;
  text-align: center;
}
.icon-box {
  width: 56px;
  height: 56px;
  background: #1a1a1a;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  color: #fafafa;
}
.card-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-top: 24px;
}
.card-page .card form {
  text-align: left;
}
.card-page .card form .card-actions {
  margin-top: 0;
}
.card-page .card .login-fields {
  margin-bottom: 0;
}
.card-page .form-actions {
  margin-top: 16px;
}

/* Read-only "current → new" summary on the email-change confirm card */
.confirm-list {
  margin: 20px 0 0;
  text-align: left;
}
.confirm-list dt {
  font-size: 13px;
  color: #666666;
  margin-top: 12px;
}
.confirm-list dt:first-child {
  margin-top: 0;
}
.confirm-list dd {
  margin: 4px 0 0;
  font-weight: bold;
  word-break: break-all;
}

/* --- Reset password form (Figma 322:22884) --- */
.reset-pwd-title {
  font-size: 20px;
  font-weight: 700;
  color: #18181b;
  line-height: 28px;
  margin: 0;
}
.reset-pwd-separator {
  border: 0;
  border-top: 1px solid #e4e4e7;
  margin: 16px 0;
}
.reset-pwd-desc {
  font-size: 14px;
  color: #1a1a1a;
  line-height: 20px;
  margin: 0 0 16px;
}
.reset-pwd-fields {
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  margin-bottom: 16px;
}
.reset-pwd-field + .reset-pwd-field {
  border-top: 1px solid #e4e4e7;
}
.reset-pwd-field-label {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 16px;
  background: #f8f8f9;
  border-bottom: 1px solid #e4e4e7;
  font-size: 14px;
  font-weight: 500;
  color: #18181b;
  line-height: 1;
}
.reset-pwd-field-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reset-pwd-field-body input {
  height: 40px;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #e4e4e7;
  border-radius: 2px;
  background: #fff;
  color: #18181b;
  width: 100%;
  box-sizing: border-box;
}
.reset-pwd-field-body input:focus {
  outline: 2px solid #1a1a1a;
  outline-offset: -1px;
}
.reset-pwd-field-body input[aria-invalid='true'] {
  border-color: #dc3545;
  border-width: 2px;
}
/* Input + description column group (mirrors Figma Input/Basic component). */
.reset-pwd-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Description text below the input: 14px, grey #71717A (Figma fill #71717A). */
.reset-pwd-helper {
  font-size: 14px;
  line-height: 20px;
  color: #71717a;
  margin: 0;
}
/* Badge is a flex child of reset-pwd-field-body (stretch default) — limit to content width. */
.reset-pwd-field-body .input-hint {
  align-self: flex-start;
}

/* Email-sent confirmation card (forgot-password-sent) */
.card-email-sent {
  text-align: center;
  gap: 24px;
}
.card-email-sent .icon-box {
  margin: 0 auto;
}
.card-email-sent .card-text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card-email-sent .card-title,
.card-email-sent .card-desc {
  margin: 0;
}
.card-email-sent .card-actions {
  margin-top: 0;
}

/* Step done: dark circle showing the step number, badge overlay at top-right. */
.step-item.done .step-circle {
  background: #1a1a1a;
  color: #fafafa;
  font-weight: 700;
}
.step-item.done .step-label {
  font-weight: 700;
  color: #09090b;
}

/* Success page centered content below step indicator */
.register-success-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px;
  gap: 24px;
}
.register-success-content .icon-box {
  margin: 0 auto;
}
.register-success-content .card-desc {
  margin: 0;
}
.register-success-content .form-actions {
  width: 372px;
  max-width: 100%;
  margin-top: 0;
}

.oidc-error-container {
  width: min(480px, calc(100% - 32px));
  margin: 40px auto;
  padding: 24px;
  background: #f7f7f7;
  border: 1px solid #e4e4e7;
  border-radius: 4px;
}
.oidc-error-container h1 {
  margin: 0 0 16px;
  text-align: center;
}
.oidc-error-row {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 8px 0 0;
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 767px) {
  /* ── Form pages (register / forgot / reset) ── */
  .form-page {
    padding: 16px;
  }
  .form-page .page-title {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 16px;
  }

  /* Step indicator – smaller circles (40px per Figma mobile) */
  .step-indicator {
    padding: 16px 8px;
    gap: 8px;
    margin-bottom: 16px;
  }
  /* Reposition single connector line: mid-40px-circle on mobile (padding-top 16 + 20) */
  .step-indicator::before {
    top: 36px;
    left: 22%;
    right: 22%;
  }
  .step-item {
    min-width: 0;
    flex: 1;
    gap: 12px;
    padding: 0 4px;
  }
  .step-circle {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  .step-label {
    font-size: 14px;
    line-height: 20px;
  }

  /* Cards – 8px radius on mobile per Figma */
  .form-card,
  .privacy-box {
    border-radius: 8px;
    margin-bottom: 16px;
  }
  /* Form card header */
  .form-card-header {
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    padding: 16px 16px 0;
  }

  /* Form table – stack label (th) above input (td), both full-width */
  .form-table,
  .form-table tbody,
  .form-table tr {
    display: block;
    width: 100%;
  }
  /* Restore hidden attribute: display:block above overrides UA [hidden]=none */
  .form-table tr[hidden] {
    display: none;
  }
  .form-table th,
  .form-table td.input-cell {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .form-table th {
    border-right: none;
    padding: 16px;
    min-height: 0;
  }
  .form-table td.input-cell {
    border-bottom: 1px solid #e4e4e7;
    padding: 16px;
    min-height: 0;
    overflow: hidden;
  }

  /* Standalone inputs (direct child of td, not inside sub-field or dob) fill full width */
  .form-table > tbody > tr > td.input-cell > input[type='text'],
  .form-table > tbody > tr > td.input-cell > input[type='email'],
  .form-table > tbody > tr > td.input-cell > input[type='password'],
  .form-table > tbody > tr > td.input-cell > input[type='tel'] {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
  }

  /* Prevent iOS Safari auto-zoom: any input < 16px triggers zoom on focus.
     Set directly in the mobile breakpoint so it wins regardless of pointer media support. */
  .form-table input[type='text'],
  .form-table input[type='email'],
  .form-table input[type='password'],
  .form-table input[type='tel'],
  .form-table select {
    font-size: 16px;
  }

  /* input + hint badge stack vertically on mobile (Figma column layout) */
  .input-with-hint {
    flex-wrap: wrap;
  }
  .input-with-hint input {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }

  /* Address: main label full-width header, sub-label also full-width on mobile */
  .form-table th.address-main-th {
    width: 100%;
    text-align: left;
    border-right: none;
  }
  .form-table th.address-sub-th {
    width: 100%;
    padding: 16px;
  }

  /* DOB selects: keep on one row, proportional width */
  /* Privacy scroll box: 2px radius on mobile */
  .privacy-box .privacy-scroll {
    border-radius: 2px;
  }
  .privacy-box .privacy-header {
    padding: 16px 16px 0;
  }
  .privacy-box h2 {
    font-size: 18px;
    line-height: 28px;
  }
  .privacy-box .privacy-body {
    padding: 0 16px 16px;
    gap: 16px;
  }

  /* Action buttons – full-width on mobile */
  .btn-primary,
  .btn-secondary {
    width: 100%;
  }
  .btn-primary .btn-arrow-icon,
  .btn-primary .btn-circle-icon {
    position: absolute;
    right: 16px;
  }

  /* ── Register success content ── */
  .register-success-content {
    padding: 28px 0 0;
  }
  .register-success-content .form-actions {
    width: 100%;
  }

  /* ── Card page (forgot / email-sent / reset) ── */
  .card-page {
    padding: 20px 16px;
  }
  .card-page .card {
    padding: 32px 24px;
  }
  .card-title {
    font-size: 24px;
  }
  .card-desc {
    font-size: 13px;
  }
}

/* ---------- Site header (Figma: Header / Desktop / Guest) ----------
 * Scroll behavior:
 *   - The announcement bar is NOT sticky — it scrolls off naturally as the user scrolls down.
 *   - The main header (.site-header-main) is sticky at top: 0 so it pins to the viewport
 *     once the announcement bar has been scrolled past.
 * `display: contents` lets .site-header-main be sticky relative to <body> (initial containing
 * block) instead of being trapped inside a 133px-tall .site-header wrapper.
 */
.site-header {
  display: contents;
}
.announcement-bar {
  background: #1a1a1a;
  display: flex;
  align-items: center;
  /* Match ref site (okoku-jp.myshopify.com): arrows sit ~340px from each edge on a 1280px
   * viewport, so the trio (arrow ← message → arrow) is centered as a cluster. Using
   * justify-content: center with a fixed inner gap gives that look; the message container
   * has a minimum width to keep arrows in a stable position regardless of message length. */
  justify-content: center;
  gap: 164px;
  padding: 12px 16px;
}
/* Messages container — stacks all messages in the same spot; only .--active is shown */
.announcement-messages {
  display: grid;
  place-items: center;
  min-height: 16px;
  min-width: 240px;
  text-align: center;
}
/* Only the active message renders. Use display:none (not visibility/opacity): a visibility:hidden
   sibling still occupies the shared grid cell and, on some mobile browsers, gets painted during the
   opacity transition — showing both messages overlapped. display:none removes it from layout+paint
   entirely, so overlap is impossible. */
.announcement-messages > .announcement-text {
  grid-column: 1;
  grid-row: 1;
  display: none;
}
.announcement-messages > .announcement-text--active {
  display: block;
}
.announcement-arrow {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.announcement-arrow img {
  display: block;
  width: 12px;
  height: 8px;
}
.announcement-arrow--next img {
  transform: rotate(180deg);
}
.announcement-text {
  margin: 0;
  color: #fafafa;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.6px;
  text-align: center;
  white-space: nowrap;
}
.site-header-main {
  /* Sticky at the top of the viewport once the announcement bar has scrolled out of view.
   * The white background is required — without it, the sticky element would show page
   * content bleeding through. z-index keeps it above scrolling content. */
  --header-background: 255, 255, 255;
  --header-text-color: 26, 26, 26;
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}
.container {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
  width: 100%;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Main row: logo — secondary links (cart / logout-or-menu) */
.header__wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}

/* LOGO PART — display: contents keeps .header__logo-link as the direct flex item, so the
 * <h1> wrapper itself never renders a box (no stray margin pushing it out of vertical
 * alignment with the icon row). */
.header__logo {
  display: contents;
}
.header__logo-link {
  display: block;
  flex-shrink: 0;
  width: max-content;
}
.header__logo-image {
  display: block;
  width: auto;
  height: 44px;
  transition: opacity .2s ease-in-out;
}

/* Search bar — the predictive-search classes below are used by
 * src/views/partials/header-search-form.ejs, which isn't currently include()'d anywhere
 * (search bar is out of header.ejs for now). Kept in case that partial gets wired back in. */
.c_header-search-form {
  display: flex;
  align-items: stretch;
  min-height: 36px;
  border: none;
  border-radius: 2px;
  overflow: hidden;
  background: transparent;
  max-width: 100%;
  flex-direction: row;
  margin-inline: auto;
  gap: 0;
}
.c_header-search-category {
  flex-shrink: 0;
  padding: 8px 4px 8px 8px;
  border: 1px solid rgba(26, 26, 26, .12);
  border-right: none;
  border-radius: 2px 0 0 2px;
  background: rgb(var(--header-background));
  color: rgb(var(--header-text-color));
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: .6px;
  cursor: pointer;
  -webkit-appearance: auto;
  appearance: auto;
}
.c_header-search-category:focus {
  outline: none;
}
.c_header-search-input {
  border-radius: 0;
  border-left: 1px solid rgba(26, 26, 26, .08);
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(26, 26, 26, .12);
  border-right: none;
  background: rgb(var(--header-background));
  color: rgb(var(--header-text-color));
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: .6px;
  margin-inline-start: 0;
}
.c_header-search-input::placeholder {
  color: #71717a;
}
.c_header-search-input:focus {
  outline: 2px solid #1a1a1a;
  outline-offset: -2px;
}
.c_header-search-btn {
  background: #1a1a1a;
  border: 0;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fafafa;
}
.c_header-search-icon {
  display: block;
  width: 17px;
  height: 17px;
}

/* SECONDARY LINKS PART: wishlist / mypage / cart / logout-or-menu */
.header__secondary-links {
  justify-content: flex-end;
  align-items: center;
  display: flex;
}
/* header.ejs applies both .header__icon-list (generic reference-theme class) and
 * .c_header-icon-list (this site's custom override) to the same element. Declared last so
 * it wins the cascade — matching the mobile media query below, which only overrides
 * .c_header-icon-list's gap and would otherwise have no visible effect. */
.header__icon-list {
  grid-auto-flow: column;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  display: grid;
}
.c_header-icon-list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 24px;
}
.c_header-icon-item {
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 44px;
  min-height: 44px;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  padding: 0;
  margin: 0;
  color: rgb(var(--header-text-color));
  text-decoration: none;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: .6px;
}
.c_header-icon-item:hover {
  opacity: 0.7;
}
/* Invisible hit-area expansion (6px each side) beyond the visible box — Fitts's-law tap
 * target enlargement, doesn't affect visual size/layout. */
.tap-area {
  position: relative;
}
.tap-area::before {
  content: '';
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: -6px;
  right: -6px;
}
.c_header-icon-item-form {
  margin: 0;
  padding: 0;
}
.c_header-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}
.c_header-icon-wrapper img {
  display: block;
}
.c_header-icon-wrapper--cart {
  position: relative;
}
.header__cart-count {
  position: absolute;
  top: -4px;
  right: -6px;
  background: #1a1a1a;
  color: #fafafa;
  font-size: 10px;
  line-height: 1;
  min-width: 16px;
  height: 16px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  box-sizing: border-box;
}

/* Persistent bottom bar — lives inside the same sticky .site-header-main block,
 * so it scrolls/sticks together with the row above it (no separate sticky offset needed). */
.header__bottom-navigation {
  /* Links are commented out above (content pending) — fixed height keeps the header's
   * total footprint/layout unchanged instead of collapsing to 0. */
  height: 20px;
  align-items: center;
  display: flex;
  justify-content: center;
  border-top: none;
  margin-top: -23px;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 1.12px;
  transition: border-top .2s ease-in-out;
}
@media (max-width: 767px) {
  .header__bottom-navigation {
    display: none;
  }
}

/* Breadcrumbs (optional, shown when the page provides `breadcrumbs`) */
.breadcrumbs {
  background: #f4f4f5;
  width: 100%;
  padding: 0 48px;
}
.breadcrumb-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumb-item,
.breadcrumb-separator {
  display: flex;
  align-items: center;
}
.breadcrumb-item a,
.breadcrumb-item span {
  color: #71717a;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.6px;
  text-decoration: none;
}
.breadcrumb-item a:hover {
  text-decoration: underline;
}
.breadcrumb-item.is-current span {
  color: #18181b;
}

/* ---------- Register email verification pages ---------- */
.reg-email-page { padding: 0; background: #fff; max-width: 1440px; margin: 0 auto; width: 100%; }

.reg-email-body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 64px 48px;
  background: #fff;
}

.reg-email-card {
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  width: 30%;
}

.reg-email-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border-bottom: 1px solid #e4e4e7;
}

.reg-email-content--center { align-items: center; text-align: center; }

.reg-email-header { display: flex; flex-direction: column; gap: 12px; text-align: center; }

.reg-email-title {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
  color: #09090b;
  letter-spacing: 0.05em;
}

.reg-email-subtitle {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #71717a;
  letter-spacing: 0.05em;
}

.reg-email-form { display: flex; flex-direction: column; gap: 24px; }

.reg-input-group { display: flex; flex-direction: column; gap: 8px; }

.reg-input-label {
  font-size: 14px;
  font-weight: 500;
  color: #18181b;
  line-height: 100%;
  letter-spacing: 0.05em;
}

.reg-input-icon-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  height: 40px;
  border: 1px solid #e4e4e7;
  border-radius: 2px;
  background: #fff;
  color: #71717a;
}

.reg-input-icon-wrap:focus-within { outline: 2px solid #1a1a1a; outline-offset: -1px; }
.reg-input-icon-wrap.has-error { border-color: #dc3545; border-width: 2px; }

.reg-input-icon-wrap input {
  flex: 1;
  border: 0;
  outline: none;
  padding: 0;
  font-size: 14px;
  line-height: 20px;
  color: #18181b;
  background: transparent;
  letter-spacing: 0.05em;
}

.reg-input-icon-wrap input::placeholder { color: #71717a; }

.reg-btn-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 372px;
  max-width: 100%;
  align-self: center;
}

.btn-pill-primary {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  background: #1a1a1a;
  color: #fafafa;
  border: none;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.05em;
  cursor: pointer;
  text-decoration: none;
}

.btn-pill-primary:hover { background: #333; }

.btn-pill-primary span {
  flex: 1;
  text-align: center;
}

.btn-icon-spacer {
  width: 16px;
  height: 16px;
  visibility: hidden;
  flex-shrink: 0;
}

.btn-pill-outline {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  background: #fff;
  color: #18181b;
  border: 1px solid #1a1a1a;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.05em;
  cursor: pointer;
  text-decoration: none;
}

.btn-pill-outline:hover { background: #f4f4f5; }

.reg-sent-icon-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  background: #1a1a1a;
  border-radius: 2px;
}

@media (max-width: 767px) {
  .reg-email-body { padding: 24px 16px; }
  .reg-email-card { width: 100%; }
  .reg-btn-group { width: 100%; }
}

/* ---------- Site footer (Figma: Footer / Desktop) ---------- */
.site-footer {
  background: rgb(239, 239, 239);
  padding-block-start: 40px;
  padding-block-end: 0px;
}

/* .site-footer-top (gray top wrapper, padding-block-start: 40px per reference inline CSS)
 * needs no rules of its own — container sizing (max-width + gutter) lives solely on the
 * nested .site-container. It used to duplicate max-width/padding-inline here too, which
 * either double-padded the main row or (once .site-container's own padding got dropped in a
 * later edit) silently left the aside bar with zero horizontal gutter at desktop. */

/* Shared container: max-width + responsive gutter via CSS vars (same ones .container uses
 * in the header) — reused directly by .site-footer-aside-inner too, so both the main row
 * and the aside bar get the identical gutter instead of drifting apart. */
.site-container {
  max-width: var(--container-max-width);
  padding-inline: var(--container-gutter);
  margin-inline-start: auto;
  margin-inline-end: auto;
  width: 100%;
}

/* Three-column flex row: logo | banners | rest */
.site-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 80px;
}

/* Logo group */
.site-footer-image-group { flex-shrink: 0; }
.site-footer-logo-link { display: block; line-height: 0; }
/* width: calc(338px / 1440px * 100vw) matches reference responsive logo sizing */
.site-footer-logo {
  width: calc(338px / 1440px * 100vw);
  max-width: 338px;
  min-width: 120px;
  height: auto;
  display: block;
}

/* Banner group: --site-link-image-width: 180px per reference → 180×90px (2:1) */
.site-footer-banners-group { flex-shrink: 0; }
.site-footer-banners {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 12px;
  align-items: center;
}
.site-footer-banner-item { list-style: none; }
.site-footer-banner {
  display: block;
  overflow: hidden;
  border-radius: 2px;
  line-height: 0;
}
.site-footer-banner-img {
  display: block;
  width: 180px;
  max-width: 100%;
  height: auto;
}

/* c_footer__rest: links-group and social-group side by side */
.site-footer-rest {
  display: flex;
  justify-content: flex-end;
  gap: 80px;
  margin-inline-start: auto;
}

/* Two nav link columns side by side */
.site-footer-links-group {
  display: flex;
  flex-direction: row;
  gap: 80px;
  align-items: flex-start;
}
/* flex-shrink: 1 + min-width: 0 let the column actually compress narrower than its longest
 * unbroken label ("特定商取引法に関する表記") so word-break: break-word on the <a> can kick
 * in — flex items default to min-width: auto (content-based), which blocks shrinking/wrap
 * regardless of flex-shrink. Desktop has ample room so this never visibly shrinks there. */
.site-footer-links-item {
  flex-shrink: 1;
  min-width: 0;
  word-break: break-word;
  max-width: 325px;
}
.site-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.site-footer-links a {
  display: inline-block;
  word-break: break-word;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  color: #1a1a1a;
  text-decoration: none;
  line-height: normal;
  letter-spacing: 0.6px;
  transition: opacity .25s ease-in-out;
}
.site-footer-links a:hover { opacity: 0.7; }

/* Social group */
.site-footer-social-group {
  display: flex;
  flex-direction: column;
  word-break: break-word;
  max-width: 325px;
  
}
.site-footer-follow {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: .7px;
  margin: 0 0 16px 0;
}
.site-footer-social-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
  width: auto;
  height: auto;
  transition: opacity .2s ease;
}
.site-footer-social-item { list-style: none; }
/* Icon + visible label, side by side — text stays visible to tell the two accounts apart */
.site-footer-social-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1a1a1a;
  text-decoration: none;
  transition: color .3s cubic-bezier(.215, .61, .355, 1);
}
.site-footer-social-link:hover { color: #4a4a4a; }
.site-footer-social-label {
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: .6px;
}

/* Dark aside (bottom bar) — sibling to site-footer-top */
.site-footer-aside {
  background: #1a1a1a;
  margin-block-start: 64px;
  padding: 20px 0;
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: .6px;
}
.site-footer-aside-inner {
  gap: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
}
.site-footer-legal {
  display: flex;
  gap: 32px;
  align-items: center;
}
.site-footer-legal span {
  font-size: 12px;
  color: #fafafa;
  line-height: normal;
  letter-spacing: 0.6px;
}
.site-footer-copy {
  font-size: 12px;
  color: #fafafa;
  line-height: 16px;
  letter-spacing: 0.02em;
}

/* ---------- Site header / footer — responsive ---------- */
@media (max-width: 1319px) {
  .container {
    padding-inline: 16px;
  }
}
@media (max-width: 999px) {
  /* Tablet-range bridge (per reference's own 999px tier): still the desktop side-by-side
   * row (links-group + social-group), just re-centered instead of pushed to the right edge.
   * Without this, the range between the 767px mobile stack and full desktop fell back to
   * the raw desktop rule (justify-content: flex-end), making .site-footer-rest look
   * squeezed/right-aligned compared to the reference at this width. */
  .site-footer-rest {
    justify-content: center;
    width: 100%;
    margin-inline: auto;
  }
  /* Reference's own ~1000px tier: vertical padding drops from 20px to 12px below this. */
  .header__wrapper {
    padding-block: 12px;
  }
  /* Company-name aside bar: row → stacked/centered below this width. */
  .site-footer-aside-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }
}
@media (max-width: 767px) {
  /* ── Header (Figma: Header / Mobile / Guest) ── */
  /* Announcement bar: arrows pinned to both edges, text centered between them */
  .announcement-bar {
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
  }
  .announcement-text {
    white-space: normal;
  }
  /* max-width: 186px + height: auto (image's own 734/98 aspect-ratio) — mobile-only cap,
   * desktop keeps its own fixed height: 44px above. */
  .header__logo-image {
    width: max-content;
    max-width: 186px;
    height: auto;
  }
  .c_header-icon-list {
    gap: 16px;
  }
  /* Icon-only (24px icons, no labels) per Figma mobile */
  .c_header-icon-label {
    display: none;
  }
  .c_header-icon-wrapper {
    width: 24px;
    height: 24px;
  }
  .c_header-icon-wrapper img {
    max-width: 100%;
    max-height: 100%;
  }
  .breadcrumbs {
    padding: 0 16px;
  }

  /* ── Footer (mobile: max-width 740px per reference) ── */
  .site-footer {
    padding-block-start: 28px;
  }
  .site-footer-row {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
  }
  /* Logo's vw-scaled width (min-width: 120px floor) undershoots badly on phone widths —
   * pin it to the same 270px the <img sizes> attribute already assumes at this breakpoint. */
  .site-footer-logo {
    width: 270px;
    min-width: 0;
  }
  /* Banners stay visible on mobile (unlike the earlier hidden treatment) —
   * --site-link-image-width-sp: 140px per reference. */
  .site-footer-banner-img { width: 140px; }
  /* column-reverse flips visual order without touching the DOM: social-group (last in
   * markup) renders above links-group (first in markup), matching the reference. */
  .site-footer-rest {
    flex-direction: column-reverse;
    gap: 24px;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 375px;
    margin-inline: auto;
  }
  /* Flex row, NOT equal-width grid columns — forcing both columns to the same width made
   * the longest label ("特定商取引法に関する表記", 13 chars) wrap to 2 lines because the
   * available container width (~343px) can't fit two equal ~163px+ columns plus a gap.
   * Shrink-to-content columns let the short column ("ご利用ガイド" etc.) stay narrow so the
   * long column gets the room it needs, matching the reference (no wrap either side). */
  .site-footer-links-group {
    flex-direction: row;
    justify-content: space-between;
    gap: 60px;
    width: 100%;
  }
  .site-footer-links { text-align: left; }
  .site-footer-follow { display: none; }
  .site-footer-social-links {
    flex-direction: row;
    justify-content: center;
    gap: 24px;
  }
  .site-footer-aside-inner {
    padding: 0 16px;
  }
}
/* Reference's own breakpoint for this specific font/spacing/stack change is 740px, not the
 * project's usual 767px mobile cutover — at widths between 741-767 the aside must still
 * render at desktop size (12px, 64px margin, legal text in one row), otherwise it renders
 * an extra wrapped line (taller) that the reference doesn't have at that width. */
@media (max-width: 740px) {
  .site-footer-aside {
    margin-block-start: 40px;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: .5px;
  }
  .site-footer-legal {
    flex-direction: column;
    gap: 5px;
    white-space: nowrap;
  }
  /* Both children hardcode their own font-size/letter-spacing, so the parent
   * .site-footer-aside's mobile values above wouldn't otherwise reach the actual text. */
  .site-footer-legal span,
  .site-footer-copy {
    font-size: 10px;
    letter-spacing: .5px;
  }
}

/* ---------- My Page shared ---------- */
.mp-page-header {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mp-separator {
  border: none;
  border-top: 1px solid #e4e4e7;
  margin: 24px 0 0;
}

/* ---------- Dashboard cards ---------- */
.mp-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mp-card-row {
  display: flex;
  gap: 24px;
}

.mp-card {
  flex: 1;
  max-width: calc(50% - 12px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s;
}

.mp-card:hover {
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
}

.mp-card-flex {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.mp-card-icon {
  flex-shrink: 0;
  color: #18181b;
  margin-top: 2px;
}

.mp-card-header {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mp-card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #09090b;
  letter-spacing: 0.05em;
}

.mp-card-desc {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #71717a;
  letter-spacing: 0.05em;
}

.mp-card-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3f3f46;
  margin-top: 2px;
}

/* ---------- Empty state ---------- */
.mp-empty-state {
  padding: 48px 24px;
  text-align: center;
  color: #71717a;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.05em;
}

.mp-empty-state p {
  margin: 0;
}

/* ---------- Newsletter standalone ---------- */
.newsletter-standalone {
  padding: 16px 24px 24px;
}

/* ---------- Newsletter page cards ---------- */
.nl-card {
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  margin-bottom: 24px;
  align-self: stretch;
}
.nl-card-header {
  padding: 24px 24px 0;
}
.nl-card-title {
  font-size: 20px;
  font-weight: 700;
  color: #18181b;
  line-height: 28px;
  margin: 0;
  letter-spacing: 0.05em;
}
.nl-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.nl-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nl-checkbox-item {
  display: flex;
  gap: 8px;
  font-size: 14px;
  color: #18181b;
  cursor: pointer;
  letter-spacing: 0.05em;
  line-height: 20px;
}
.nl-checkbox-item input[type='checkbox'] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: #1a1a1a;
  cursor: pointer;
}
.nl-terms-scroll {
  background: #f4f4f5;
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  padding: 16px;
  height: 200px;
  overflow-y: auto;
  font-size: 14px;
  color: #18181b;
  line-height: 20px;
  letter-spacing: 0.05em;
}
.nl-terms-scroll p {
  margin: 0 0 12px;
}
.nl-terms-scroll p:last-child {
  margin-bottom: 0;
}
.nl-agree-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nl-agree-label {
  font-size: 14px;
  color: #18181b;
  line-height: 20px;
  letter-spacing: 0.05em;
  margin: 0;
}
.nl-checkbox-item--agree {
  font-weight: 500;
}

/* ---------- My Page ---------- */

.profile-card {
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  margin: 0 0 24px;
}

.profile-table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

.profile-table col.col-label-main {
  width: 156px;
}
.profile-table col.col-label-sub {
  width: 156px;
}

.profile-table th {
  background: #f4f4f5;
  padding: 16px 24px;
  text-align: left;
  vertical-align: middle;
  font-weight: 500;
  font-size: 14px;
  color: #18181b;
  border-bottom: 1px solid #e4e4e7;
  height: 72px;
  letter-spacing: 0.05em;
}

.profile-table th.address-main-th {
  border-right: 1px solid #e4e4e7;
  vertical-align: middle;
}

.profile-table th.address-sub-th {
  border-left: 1px solid #e4e4e7;
}

.profile-table th.newsletter-th {
  vertical-align: middle;
}

.profile-table td {
  padding: 16px 24px;
  font-size: 14px;
  color: #18181b;
  border-bottom: 1px solid #e4e4e7;
  vertical-align: middle;
  min-height: 72px;
  height: 72px;
  font-weight: 400;
  letter-spacing: 0.05em;
  background: #fff;
  word-break: break-word;
}
.profile-table td.input-cell {
  height: auto;
  min-height: 72px;
}

.profile-table td.newsletter-td {
  height: auto;
  vertical-align: top;
  padding: 0;
}

.required-mark {
  color: #b70000;
  font-size: 12px;
  font-weight: 400;
  margin-left: 4px;
}

.newsletter-desc {
  font-size: 14px;
  color: #1a1a1a;
  line-height: 20px;
  margin: 0;
  padding: 16px 24px 0;
  letter-spacing: 0.05em;
}

.newsletter-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 24px;
}

.newsletter-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: #18181b;
  font-weight: 400;
  letter-spacing: 0.05em;
  cursor: default;
}

.newsletter-item input[type='checkbox'] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: default;
  opacity: 0.5;
  accent-color: #1a1a1a;
}
.newsletter-item--editable {
  cursor: pointer;
}
.newsletter-item--editable input[type='checkbox'] {
  cursor: pointer;
  opacity: 1;
}

@media (max-width: 767px) {
  /* Hide col elements — their fixed 156px widths would override our full-width override. */
  .profile-table colgroup,
  .profile-table col {
    display: none;
  }

  .profile-table {
    display: block;
    width: 100%;
  }
  .profile-table tbody {
    display: block;
    width: 100%;
  }

  /* Each row stacks label above value (Figma layout_BVJEW3: mode column). */
  .profile-table tr {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-bottom: 1px solid #e4e4e7;
  }
  .profile-table tr:last-child {
    border-bottom: none;
  }

  /* Cells fill full row width; padding 16px all sides (Figma layout_Y14D35/9X5F5F). */
  .profile-table th,
  .profile-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: auto;
    padding: 16px;
    border-bottom: none;
  }

  /* Remove decorative side borders used only in the two-column desktop layout. */
  .profile-table th.address-main-th {
    border-right: none;
  }
  .profile-table th.address-sub-th {
    border-left: none;
  }

  /* Restore separator between label cell and input cell (Figma: border-bottom on label row). */
  .profile-table th {
    border-bottom: 1px solid #e4e4e7;
  }
}

/* ---------- Site Header ---------- */
.site-header {
  /* Not sticky as a whole — see the earlier .site-header block. Only .site-header-main
   * (defined above) has position: sticky so the announcement bar can scroll away. */
  background: #fff;
}

/* This duplicate block (kept for cascade order) mirrors the first .announcement-bar rule
 * so ref-site arrow position (clustered near center, ~340px from edges @ 1280vp) is applied. */
.announcement-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 164px;
  background: #1a1a1a;
  color: #fafafa;
  padding: 12px 16px;
}

@media (min-width: 768px) {
  .announcement-bar {
    padding: 12px 48px;
  }
}

.announcement-bar p {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.05em;
}

/* ---------- Mypage Layout ---------- */
.mypage-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 64px 48px;
}

.mypage-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 24px;
  /* Prevent the sticky header (announcement 40px + header-main 81px = 121px) from
     covering the top of the sidebar when the browser scrolls to #mp-dashboard. */
  scroll-margin-top: 200px;
}

.mypage-main .page-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  margin: 0;
  color: #18181b;
  letter-spacing: 0.05em;
}

/* ---------- Sidebar ---------- */

/* Breadcrumb bar: hidden on desktop, shown on mobile subpages only. */
.mp-breadcrumb-bar {
  display: none;
}

.sidebar-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sidebar {
  width: 318px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sidebar-user-card {
  background: #1a1a1a;
  padding: 16px;
  border-radius: 4px;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-user-name {
  font-size: 16px;
  font-weight: 700;
  color: #fafafa;
  margin: 0;
  letter-spacing: 0.05em;
  line-height: 24px;
}

.sidebar-points {
  font-size: 14px;
  font-weight: 400;
  color: #fafafa;
  margin: 0;
  letter-spacing: 0.05em;
  line-height: 20px;
}

.sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  color: #3f3f46;
  letter-spacing: 0.05em;
  line-height: 20px;
  border-radius: 6px;
  background: transparent;
  transition:
    background 0.1s,
    color 0.1s;
  white-space: nowrap;
}

/* Label fills remaining space; pushes collapse icon to the right edge. */
.sidebar-menu-label {
  flex: 1;
  white-space: normal;
}

/* Collapse icon (Figma Sidebar/CollapseIcon, layout_ALUSMS: 16×16). */
.sidebar-collapse-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: #a1a1aa;
}

.sidebar-menu-item:hover {
  background: #f4f4f5;
  color: #18181b;
}

.sidebar-menu-item.active {
  background: #f4f4f5;
  color: #18181b;
  font-weight: 700;
  border-radius: 2px;
}

.sidebar-menu-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: inherit;
}

/* ---------- My Page form inputs ---------- */
.profile-table input[type='email'],
.profile-table input[type='tel'],
.profile-table input[type='text'] {
  width: 100%;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 2px;
  padding: 8px 12px;
  height: 40px;
  font-size: 14px;
  color: #18181b;
  box-sizing: border-box;
  font-family: inherit;
}
.profile-table input[type='email']:focus,
.profile-table input[type='tel']:focus,
.profile-table input[type='text']:focus {
  outline: 2px solid #1a1a1a;
  outline-offset: -1px;
}
.profile-table input[disabled] {
  background: #f4f4f5;
  color: #71717a;
  cursor: not-allowed;
}
.profile-table input::placeholder {
  color: #71717a;
}
.profile-table select {
  width: 100%;
  height: 40px;
  padding: 8px 36px 8px 12px;
  font-size: 14px;
  color: #18181b;
  border: 1px solid #e4e4e7;
  border-radius: 2px;
  background-color: #fff;
  background-image: url('/icons/chevron-down.svg');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  font-family: inherit;
  letter-spacing: 0.05em;
}
.profile-table select:focus {
  outline: 2px solid #1a1a1a;
  outline-offset: -1px;
}
.profile-table input[aria-invalid='true'],
.profile-table select[aria-invalid='true'] {
  border-color: #dc3545;
  border-width: 2px;
  background: #fdecea;
}
.profile-table .field-error {
  color: #dc3545;
  font-size: 12px;
  margin-top: 4px;
}

/* Row-level input wrapper: input/select + badge on same line.
   Fixed 165px badge column keeps all inputs the same width across every row. */
.input-row-inner {
  display: grid;
  grid-template-columns: 1fr 165px;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.input-row-inner input,
.input-row-inner select {
  width: 100%;
  min-width: 0;
}
.input-row-inner--stacked {
  margin-top: 8px;
}

/* Format hint badge pill (Figma: bg #F4F4F5, border #E4E4E7, radius 9999px) */
.input-badge {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  white-space: nowrap;
  background: #f4f4f5;
  border: 1px solid #e4e4e7;
  border-radius: 9999px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 400;
  color: #18181b;
  line-height: 16px;
  letter-spacing: 0.05em;
}

/* Gender radios in profile form */
.profile-gender-group {
  display: flex;
  align-items: center;
  gap: 24px;
}
.profile-radio-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #18181b;
  cursor: pointer;
  letter-spacing: 0.05em;
}
/* Custom-rendered instead of accent-color — see .mp-inquiry-radio-label for why. */
.profile-radio-item input[type='radio'] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid #d4d4d8;
  border-radius: 50%;
  background: #fff;
  position: relative;
  cursor: pointer;
}
.profile-radio-item input[type='radio']:checked {
  border-color: #1a1a1a;
}
.profile-radio-item input[type='radio']:checked::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1a1a1a;
  transform: translate(-50%, -50%);
}
.profile-radio-item input[type='radio']:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
}

/* Birthday selects row */
/* DOB selects: 3 equal-width columns (Figma #81:5184 — each Select sizing: fill). */
.profile-dob-group {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}
.profile-dob-group select {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  /* Placeholder grey (Figma fill_5ed11aaf = #71717A); JS adds .has-value when a year/month/day is chosen. */
  color: #71717a;
}
.profile-dob-group select.has-value {
  color: #18181b;
}

/* Email change helper link */
.mp-inline-link {
  color: #18181b;
  text-decoration: underline;
}
.mp-inline-link:hover {
  opacity: 0.7;
}

/* Note container above table */
.mp-form-note {
  align-self: stretch;
}

/* Success flash banner */
.global-success {
  background: #ecfdf5;
  border: 1px solid #10b981;
  padding: 12px;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 16px;
  color: #065f46;
  letter-spacing: 0.05em;
}

.mp-input-help {
  margin: 4px 0 0;
  font-size: 14px;
  color: #71717a;
  line-height: 20px;
  letter-spacing: 0.05em;
}

/* Instructional note above table */
.mp-note-text {
  margin: 0;
  font-size: 14px;
  color: #1a1a1a;
  line-height: 20px;
  letter-spacing: 0.05em;
}

/* Centered form action wrapper for mypage forms */
.mp-form-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Narrow centered primary button for mypage (329px per Figma) */
.btn-primary--mp {
  width: 329px;
  /* Center the label: the bare text node is a flex item, and the arrow icon is
     absolutely positioned, so justify-content centers without shifting the icon. */
  justify-content: center;
}

/* Secondary button variant for mypage: same 329px width and centered label as the primary,
   so a bare (non-<span>) text node is centered instead of left-aligned by the default flex. */
.btn-secondary--mp {
  width: 329px;
  justify-content: center;
}

/* ---------- Card section header (withdraw, login-notify) ---------- */
.mp-card-section-header {
  padding: 24px 24px 0;
}
.mp-card-h2 {
  font-size: 20px;
  font-weight: 700;
  color: #18181b;
  line-height: 28px;
  margin: 0;
  letter-spacing: 0.05em;
}

/* ---------- Card-delete info text ---------- */
.mp-info-pad {
  padding: 16px 24px;
}
.mp-info-text {
  margin: 0;
  font-size: 14px;
  color: #1a1a1a;
  line-height: 20px;
  letter-spacing: 0.05em;
}

/* ---------- Withdraw page ---------- */
.mp-intro-text {
  margin: 0;
  font-size: 14px;
  color: #1a1a1a;
  line-height: 20px;
  letter-spacing: 0.05em;
}
.mp-warn-body {
  padding: 24px;
  border-bottom: 1px solid #e4e4e7;
}
.mp-warn-text {
  margin: 0;
  font-size: 14px;
  color: #1a1a1a;
  line-height: 20px;
  letter-spacing: 0.05em;
  white-space: pre-line;
}
.mp-confirm-note {
  padding: 24px 24px 0;
}
.mp-confirm-note p {
  margin: 0;
  font-size: 14px;
  color: #71717a;
  line-height: 20px;
  letter-spacing: 0.05em;
}
.mp-confirm-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  border-bottom: 1px solid #e4e4e7;
}
.mp-confirm-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 0;
  min-width: 200px;
}
.mp-confirm-field-label {
  font-size: 14px;
  font-weight: 500;
  color: #18181b;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 4px;
}
.mp-confirm-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #e4e4e7;
  border-radius: 2px;
  padding: 8px 12px;
  background: #fff;
  height: 40px;
  box-sizing: border-box;
}
.mp-confirm-input-wrap svg {
  flex-shrink: 0;
  color: #71717a;
}
.mp-confirm-input-wrap input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  color: #18181b;
  background: transparent;
  font-family: inherit;
}
.mp-confirm-input-wrap:focus-within {
  outline: 2px solid #1a1a1a;
  outline-offset: -1px;
}
.mp-confirm-actions {
  padding: 24px;
}
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #b70000;
  color: #fafafa;
  border: none;
  border-radius: 9999px;
  padding: 8px 32px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.05em;
  font-family: inherit;
}
.btn-danger:hover {
  background: #9a0000;
}

/* ---------- Login notify page ---------- */
.mp-notify-desc {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mp-notify-desc p {
  margin: 0;
  font-size: 14px;
  color: #1a1a1a;
  line-height: 20px;
  letter-spacing: 0.05em;
}
.mp-notify-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-bottom: 1px solid #e4e4e7;
}
.mp-notify-email-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mp-notify-email-label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #18181b;
  letter-spacing: 0.05em;
}
.mp-notify-email-value {
  margin: 0;
  font-size: 14px;
  color: #71717a;
  letter-spacing: 0.05em;
}
.mp-radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mp-radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #18181b;
  letter-spacing: 0.05em;
  cursor: pointer;
}
/* Custom-rendered instead of accent-color — see .mp-inquiry-radio-label for why. */
.mp-radio-label input[type='radio'] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  border: 1px solid #d4d4d8;
  border-radius: 50%;
  background: #fff;
  position: relative;
  cursor: pointer;
}
.mp-radio-label input[type='radio']:checked {
  border-color: #1a1a1a;
}
.mp-radio-label input[type='radio']:checked::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1a1a1a;
  transform: translate(-50%, -50%);
}
.mp-radio-label input[type='radio']:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
}
.mp-notify-card-actions {
  padding: 24px;
}
.btn-mp-save {
  background: #1a1a1a;
  color: #fafafa;
  border: none;
  border-radius: 9999px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.05em;
  font-family: inherit;
}
.btn-mp-save:hover {
  background: #333;
}

/* ---------- Contact page ---------- */
.mp-contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid #e4e4e7;
  border-radius: 4px;
}
.mp-contact-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 2px;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  color: #18181b;
  flex-shrink: 0;
}
.mp-contact-desc {
  font-size: 14px;
  color: #71717a;
  line-height: 20px;
  margin: 0;
  text-align: center;
  align-self: stretch;
}
.mp-contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #1a1a1a;
  color: #fafafa;
  border: none;
  border-radius: 9999px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.mp-contact-btn:hover {
  background: #333;
}

/* ---------- Inquiry modal ---------- */
.mp-inquiry-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
}
.mp-inquiry-dialog {
  position: fixed;
  inset: 0;
  z-index: 201;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}
/* `display: flex` above otherwise overrides the [hidden] attribute, keeping the modal
   visible on load. Restore hiding when the attribute is present. */
.mp-inquiry-dialog[hidden],
.mp-inquiry-backdrop[hidden] {
  display: none;
}
.mp-inquiry-dialog-inner {
  position: relative;
  width: 100%;
  max-width: 900px;
  /* Cap to the viewport so the modal box stays fixed-size; the body scrolls inside it
     rather than the whole overlay/page scrolling. */
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.mp-inquiry-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: #18181b;
  z-index: 1;
}
.mp-inquiry-close:hover {
  opacity: 0.7;
}
.mp-inquiry-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  flex: 0 0 auto;
}
.mp-inquiry-title {
  font-size: 24px;
  font-weight: 700;
  color: #18181b;
  margin: 0;
  line-height: 32px;
}
.mp-inquiry-sub {
  font-size: 14px;
  color: #71717a;
  line-height: 20px;
  margin: 0;
}
.mp-inquiry-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 16px 16px;
  /* Scroll the dialog content internally instead of the full-screen overlay. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
/* Cards are children of the form, not direct flex children of .mp-inquiry-body — need their own gap. */
#inquiry-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mp-inquiry-form-card {
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
}
/* Remove last row's bottom border so it doesn't double up with the card border. */
.mp-inquiry-form-card .mp-inquiry-table tr:last-child td.input-cell {
  border-bottom: none;
}
/* The type-select card needs a stacking context so its dropdown menu (position:absolute,
   z-index:200) paints above the subsequent form-field card in the DOM. */
.mp-inquiry-type-card {
  position: relative;
  z-index: 1;
}
.mp-inquiry-table {
  width: 100%;
  table-layout: fixed;
  margin: 0;
}
.mp-inquiry-th {
  width: 312px;
  min-width: 200px;
}
/* Single-line inputs share one fixed width per Figma (324px); only the textarea fills. */
.mp-inquiry-table input[type='text'],
.mp-inquiry-table input[type='tel'] {
  width: 324px;
  max-width: 100%;
  box-sizing: border-box;
}

/* Custom select — replaces native <select> for hover styling */
.mp-cselect {
  position: relative;
  width: 324px;
  max-width: 100%;
}
.mp-cselect-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
  color: #18181b;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 2px;
  cursor: pointer;
  text-align: left;
}
.mp-cselect-trigger:focus {
  outline: 2px solid #007bff;
  outline-offset: -1px;
}
.mp-cselect[data-invalid='true'] .mp-cselect-trigger {
  border-color: #dc3545;
}
.mp-cselect-placeholder {
  color: #71717a;
}
.mp-cselect-chevron {
  flex-shrink: 0;
  margin-left: 8px;
  color: #71717a;
  transition: transform 0.15s;
}
.mp-cselect--open .mp-cselect-chevron {
  transform: rotate(180deg);
}
.mp-cselect-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 200;
  width: 100%;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  box-shadow: 0px 4px 6px -1px rgba(0,0,0,0.1), 0px 2px 4px -1px rgba(0,0,0,0.06);
}
.mp-cselect-item {
  position: relative;
  padding: 6px 8px 6px 32px;
  font-size: 14px;
  color: #09090b;
  cursor: pointer;
  outline: none;
}
.mp-cselect-item:hover,
.mp-cselect-item:focus {
  background: #f4f4f5;
}
.mp-cselect-item[aria-selected='true'] {
  background: #f4f4f5;
  font-weight: 500;
}
.mp-cselect-item[aria-selected='true']:not([data-value=''])::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2309090B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 16px 16px;
}
/* Native select is hidden but stays in the form for submission */
.mp-cselect-native {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* Contact form dialog: column layout (label above input) at ALL viewports per Figma 525-10642.
   Use .mp-inquiry-body parent for specificity (0,0,2,x) > global .mp-inquiry-th (0,0,1,0). */
.mp-inquiry-body .mp-inquiry-table,
.mp-inquiry-body .mp-inquiry-table tbody,
.mp-inquiry-body .mp-inquiry-table tr {
  display: block;
  width: 100%;
}
/* Restore [hidden] rows: display:block above overrides UA [hidden]=none.
   Specificity (0,0,3,1) beats the tr rule above (0,0,2,1). */
.mp-inquiry-body .mp-inquiry-table tr[hidden] {
  display: none;
}
.mp-inquiry-body .mp-inquiry-th {
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 16px;
  background: #f8f8f9;
  border-right: none;
  border-bottom: 1px solid #e4e4e7;
  box-sizing: border-box;
}
.mp-inquiry-body .mp-inquiry-table td.input-cell {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 16px;
  border-bottom: 1px solid #e4e4e7;
  box-sizing: border-box;
}
/* Last row in each card: td has no bottom border (card border acts as separator). */
.mp-inquiry-form-card .mp-inquiry-table tr:last-child td.input-cell,
.mp-inquiry-body .mp-inquiry-table tr:last-child td.input-cell {
  border-bottom: none;
}
/* All text inputs and the type select fill the row width, matching 電話番号 — same
 * treatment across every field instead of some pinned to a narrower fixed width. */
.mp-inquiry-body .mp-inquiry-table input[type='text'],
.mp-inquiry-body .mp-inquiry-table input[type='tel'] {
  width: 100%;
}
.mp-inquiry-table .mp-cselect {
  width: 100%;
}
.mp-inquiry-table .input-with-hint input[type='text'],
.mp-inquiry-table .input-with-hint input[type='tel'],
.mp-inquiry-table .input-with-hint .mp-cselect {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
/* iOS: force 16px to prevent auto-zoom on input focus. */
@media (max-width: 767px) {
  .mp-inquiry-body .mp-inquiry-table input[type='text'],
  .mp-inquiry-body .mp-inquiry-table input[type='tel'] {
    font-size: 16px;
  }
  .mp-inquiry-body .mp-inquiry-textarea {
    font-size: 16px;
  }
}
.mp-inquiry-textarea {
  width: 100%;
  height: 100px;
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid #e4e4e7;
  border-radius: 2px;
  background: #fff;
  color: #18181b;
  resize: vertical;
  box-sizing: border-box;
}
.mp-inquiry-textarea:focus {
  outline: 2px solid #1a1a1a;
  outline-offset: -1px;
}
.mp-inquiry-textarea[aria-invalid='true'] {
  border-color: #dc3545;
  border-width: 2px;
  background: #fdecea;
}
.mp-inquiry-email-display {
  font-size: 14px;
  color: #18181b;
  line-height: 20px;
}
.mp-inquiry-radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mp-inquiry-radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  color: #18181b;
  cursor: pointer;
}
/* Custom-rendered instead of accent-color: Safari has a known bug where accent-color
 * combined with an explicit width/height on input[type=radio] paints a solid square/blob
 * instead of a ring + dot. appearance: none renders identically across browsers. */
.mp-inquiry-radio-label input[type='radio'] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  border: 1px solid #d4d4d8;
  border-radius: 50%;
  background: #fff;
  position: relative;
  cursor: pointer;
}
.mp-inquiry-radio-label input[type='radio']:checked {
  border-color: #1a1a1a;
}
.mp-inquiry-radio-label input[type='radio']:checked::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1a1a1a;
  transform: translate(-50%, -50%);
}
.mp-inquiry-radio-label input[type='radio']:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
}
.mp-inquiry-checkbox-label input[type='checkbox'] {
  accent-color: #1a1a1a;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}
.mp-inquiry-conditional-row td {
  padding: 16px 24px;
}
.mp-inquiry-privacy-card {
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.mp-inquiry-privacy-header {
  padding: 16px 16px 0;
}
.mp-inquiry-privacy-title {
  font-size: 20px;
  font-weight: 700;
  color: #18181b;
  margin: 0;
  line-height: 28px;
}
.mp-inquiry-privacy-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}
.mp-inquiry-privacy-scroll {
  height: 200px;
  overflow-y: auto;
  font-size: 14px;
  color: #18181b;
  line-height: 1.7;
  padding: 16px;
  background: #f8f8f9;
  border: 1px solid #e4e4e7;
  border-radius: 4px;
}
.mp-inquiry-privacy-scroll p {
  margin: 0 0 12px;
}
.mp-inquiry-privacy-scroll p:last-child {
  margin-bottom: 0;
}
.mp-inquiry-agree {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mp-inquiry-agree-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #18181b;
  margin: 0;
}
.mp-inquiry-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #18181b;
  cursor: pointer;
}
/* Figma (506:7194 "Dialog Footer"): row, justify-content: flex-end, padding: 24px —
 * button(s) hug their own content and sit at the right edge, not stacked full-width. */
.mp-inquiry-footer {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 12px;
  padding: 24px;
  background: #fbfbfb;
  border-top: 1px solid #e4e4e7;
  /* Never shrink: footer must stay visible below the scrollable body. */
  flex: 0 0 auto;
}
.mp-inquiry-footer .btn-pill-primary,
.mp-inquiry-footer .btn-pill-outline {
  width: auto;
}
.mp-inquiry-footer .btn-pill-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
@media (max-width: 767px) {
  /* Figma mobile (525:12473 "Dialog Footer"): column, stretch, padding 16px — buttons go
   * back to stacked full-width. column-reverse (not touching DOM order) puts 送信する
   * (last in markup, so it's rightmost in the desktop row) on top and 戻る below, matching
   * the reference's mobile order without needing a different order on desktop. */
  .mp-inquiry-footer {
    flex-direction: column-reverse;
    align-items: stretch;
    padding: 16px;
  }
  .mp-inquiry-footer .btn-pill-primary,
  .mp-inquiry-footer .btn-pill-outline {
    width: 100%;
  }
}
/* Preserve line breaks from textarea in the confirm summary */
.mp-inquiry-confirm-content {
  white-space: pre-wrap;
}
/* Success toast — fixed top-right per Figma 510-9258 (position absolute x:936 y:61, width:480) */
@keyframes mp-toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.mp-contact-alert {
  position: fixed;
  top: 80px;
  right: 24px;
  width: 480px;
  max-width: calc(100vw - 48px);
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 300;
  animation: mp-toast-in 0.3s ease;
}
.mp-contact-alert-title {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
  font-weight: 500;
  color: #18181b;
  line-height: 24px;
}
.mp-contact-alert-icon {
  position: absolute;
  left: 0;
  top: 4px;
  color: #18181b;
}
.mp-contact-alert-desc {
  padding-left: 28px;
  font-size: 14px;
  color: #18181b;
  line-height: 20px;
}

/* ---------- Inquiry history list ---------- */
.mp-inquiry-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mp-inquiry-list-item {
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  margin-bottom: 12px;
}
.mp-inquiry-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  width: 100%;
}
.mp-inquiry-card:hover {
  background: #f4f4f5;
  border-radius: 4px;
}
.mp-inquiry-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.mp-inquiry-card-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #18181b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-inquiry-card-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  line-height: 20px;
  color: #71717a;
}
.mp-inquiry-card-sep {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: #e4e4e7;
  flex-shrink: 0;
}
.mp-inquiry-card-chevron {
  flex-shrink: 0;
  color: #71717a;
}
.mp-inquiry-list-empty {
  font-size: 14px;
  color: #71717a;
  line-height: 20px;
}

/* ---------- Inquiry detail ---------- */
.mp-inquiry-detail-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mp-inquiry-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #71717a;
  text-decoration: none;
}
.mp-inquiry-back-link:hover { color: #18181b; }

.inquiry-page-body {
  width: 100%;
  max-width: 888px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mp-inquiry-detail-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mp-inquiry-detail-card {
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.mp-inquiry-detail-table {
  width: 100%;
  border-collapse: collapse;
}

.mp-inquiry-detail-th {
  width: 312px;
  height: 72px;
  padding: 16px 24px;
  background: #f4f4f5;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  color: #18181b;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid #e4e4e7;
}

.mp-inquiry-detail-td {
  height: 72px;
  padding: 16px 24px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #18181b;
  vertical-align: middle;
  border-bottom: 1px solid #e4e4e7;
}

.mp-inquiry-detail-table tr:last-child .mp-inquiry-detail-th,
.mp-inquiry-detail-table tr:last-child .mp-inquiry-detail-td {
  border-bottom: none;
}

/* message thread separator — spans full card width by cancelling padding */
.mp-inquiry-msg-sep {
  border: none;
  border-top: 1px solid #e4e4e7;
  margin: 16px -24px;
}

/* message card */
.mp-inquiry-msg-card {
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  padding: 16px 24px;
}

.mp-inquiry-msg-row {
  display: flex;
  gap: 12px;
}

.mp-inquiry-msg-icon-wrap {
  padding-top: 6px;
  flex-shrink: 0;
}

.mp-inquiry-msg-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f4f5;
  border-radius: 9999px;
  padding: 6px;
  color: #18181b;
}

.mp-inquiry-msg-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.mp-inquiry-msg-header {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
}

.mp-inquiry-msg-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #18181b;
}

.mp-inquiry-msg-date {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #71717a;
}

/* Collapsed (default): text + toggle button in a row, both bottom-aligned. */
.mp-inquiry-msg-body {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
}
/* Expanded: text above, button below. */
.mp-inquiry-msg-body.is-expanded {
  flex-direction: column;
  align-items: flex-start;
}
.mp-inquiry-msg-text {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #18181b;
  white-space: pre-wrap;
  margin: 0;
  /* Clamp to 4 lines in collapsed state. */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mp-inquiry-msg-body.is-expanded .mp-inquiry-msg-text {
  display: block;
  overflow: visible;
}
.mp-inquiry-msg-toggle {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.05em;
  color: #18181b;
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}

/* action card */
.mp-inquiry-action-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  padding: 24px;
  border: 1px solid #e4e4e7;
  border-radius: 4px;
}

.mp-inquiry-action-desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #71717a;
  margin: 0;
  text-align: center;
}

/* Figma (510:17288): row, hug — buttons sit side by side and size to their own text,
 * not stacked full-width. .btn-pill-primary/.btn-pill-outline default to width:100% for
 * the register flow's stacked CTAs, so override that back to auto in this context only. */
.mp-inquiry-action-buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 12px;
}
.mp-inquiry-action-buttons .btn-pill-primary,
.mp-inquiry-action-buttons .btn-pill-outline {
  width: auto;
}
@media (max-width: 767px) {
  /* Figma mobile (525:16170 "Button group"): column, stretch — buttons go back to
   * stacked full-width here, unlike the desktop row/hug layout above. */
  .mp-inquiry-action-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .mp-inquiry-action-buttons .btn-pill-primary,
  .mp-inquiry-action-buttons .btn-pill-outline {
    width: 100%;
  }
}

.mp-contact-history-header {
  margin-top: 32px;
}

/* ---------- Inquiry reply form ---------- */
.mp-inquiry-reply-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px;
  border: 1px solid #e4e4e7;
  border-radius: 4px;
}

.mp-inquiry-reply-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: #18181b;
  align-self: stretch;
}

.mp-inquiry-reply-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  align-self: stretch;
}

/* Figma (510:16436 "Button group"): column, stretch, fixed 372px — centered by the parent's
 * align-items: center. Distinct from .mp-inquiry-reply-buttons (mypage-inquiry-confirm.ejs),
 * which needs row/flex-end instead — sharing one class between the two screens previously
 * made a fix to one silently break the other. */
.mp-inquiry-reply-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 372px;
  max-width: 100%;
}
@media (max-width: 767px) {
  /* Figma mobile (525:17082 "Button group"): sizing fill instead of the desktop's fixed
   * 372px — the button group takes the card's full width rather than being centered with
   * whitespace on either side. */
  .mp-inquiry-reply-actions {
    width: 100%;
  }
  /* Figma mobile (525:16971 "Card"): padding 16px instead of the desktop 24px. */
  .mp-inquiry-reply-card {
    padding: 16px;
  }
}

.mp-inquiry-reply-inner {
  align-self: stretch;
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.mp-inquiry-reply-td {
  padding: 16px 24px;
  vertical-align: top;
}

/* ---------- Inquiry detail inline success ---------- */
.mp-contact-alert--inline {
  position: static;
  animation: none;
  opacity: 1;
  transform: none;
  margin-bottom: 16px;
  box-shadow: none;
  border: 1px solid #d1fae5;
}

.mp-contact-history-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: #18181b;
}

/* ---------- Dual-view breadcrumb (mypage dashboard mobile) ---------- */
.mp-dual-breadcrumb {
  display: none; /* hidden on desktop and on View 1 */
}

@media (max-width: 767px) {
  /* View 1 (default, no hash): show sidebar as page, hide dashboard content. */
  .has-dual-view .mypage-main {
    display: none;
  }
  .has-dual-view .sidebar {
    position: static !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow-y: visible !important;
  }
  /* Hide drawer-only elements in View 1. */
  .has-dual-view .sidebar-drawer-header {
    display: none !important;
  }
  .has-dual-view .mp-breadcrumb-bar {
    display: none !important;
  }

  /* View 2 (#mp-dashboard): show dashboard, hide sidebar nav. */
  .has-dual-view.mp-show-main .mypage-main {
    display: flex;
  }
  .has-dual-view.mp-show-main .sidebar {
    display: none !important;
  }

  /* Breadcrumb: visible only in View 2 — same flush treatment as subpages. */
  .has-dual-view.mp-show-main .mp-breadcrumb-bar {
    display: flex !important;
    margin-top: -32px;
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
  }
}

@media (max-width: 960px) {
  /* Figma mobile Main padding: 32px 16px */
  .mypage-wrapper {
    flex-direction: column;
    gap: 0;
    padding: 32px 16px;
  }
  /* Sidebar stacks full-width on tablet; hidden entirely on phone (see 767px block) */
  .sidebar {
    width: 100%;
  }
  .mypage-main {
    padding: 24px 0;
  }
  .announcement-bar {
    gap: 24px;
  }
  .mp-confirm-form {
    flex-direction: column;
  }
  .mp-confirm-field {
    min-width: 0;
    width: 100%;
  }
  /* Dashboard cards: single column, 16px gap (Figma layout_D8WVFY: gap 16) */
  .mp-card-row {
    flex-direction: column;
    gap: 16px;
  }
  .mp-cards {
    gap: 16px;
  }
  .mp-card {
    max-width: 100%;
  }
  /* Sidebar menu: allow wrapping on full-width tablet layout */
  .sidebar-menu-item {
    white-space: normal;
  }
}

@media (max-width: 767px) {
  /* Main content below breadcrumb (order 0 → order 1). */
  .mypage-main {
    order: 1;
  }

  /* Breadcrumb bar — Figma: bg #F4F4F5, padding 0 16px, height 36px. */
  .mp-breadcrumb-bar {
    order: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f4f4f5;
    padding: 0 16px;
    height: 36px;
    width: 100%;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.05em;
  }

  /* "マイページ" — looks like a link, triggers the drawer. */
  .mp-bc-menu-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    font-family: inherit;
    color: #71717a;
    cursor: pointer;
    text-decoration: underline;
    letter-spacing: 0.05em;
    line-height: 16px;
  }
  .mp-bc-menu-btn:hover {
    color: #18181b;
  }

  .mp-breadcrumb-bar svg {
    flex-shrink: 0;
    color: #71717a;
  }

  /* Current page label — Figma: #18181B. */
  .mp-bc-current {
    color: #18181b;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── content-view: subpages (added by JS to .mypage-wrapper) ──────────── */
  /* Default: sidebar hidden, content visible. */
  .has-content-view .sidebar {
    display: none;
  }

  /* When nav shown: sidebar visible full-width, content hidden. */
  .has-content-view.mp-show-nav .sidebar {
    display: flex !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    left: auto !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow-y: visible !important;
    order: 0;
  }
  .has-content-view.mp-show-nav .mypage-main {
    display: none !important;
  }
  .has-content-view.mp-show-nav .mp-breadcrumb-bar {
    display: none;
  }

  /* Subpage breadcrumb: flush with header (cancel wrapper padding-top) and full-width. */
  .has-content-view .mp-breadcrumb-bar {
    margin-top: -32px;
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
  }

  /* Sidebar content padding. */
  .sidebar-content {
    padding: 0;
  }
  /* Cards: tighter padding on phones. */
  .mp-card {
    padding: 16px;
  }
  /* Prevent iOS from auto-zooming inputs (font-size < 16px triggers zoom). */
  .mp-confirm-input-wrap input,
  .profile-table input[type='email'],
  .profile-table input[type='tel'],
  .profile-table input[type='text'] { font-size: 16px; }
  .profile-dob-group select { font-size: 16px; }
  /* Keep selects in one row on mobile — Figma shows no wrapping (sizing: fill). */
  .profile-dob-group { flex-wrap: nowrap; }
  /* Badge drops below input (Figma EL-5e371210: mode column, gap 8px). */
  .input-row-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .btn-primary--mp { width: 100%; }
  /* Notification settings: tighter padding. */
  .mp-notify-body {
    padding: 16px;
  }
  /* Page title: 20px (Figma jp-text large/bold: fontSize 20). */
  .mypage-main .page-title {
    font-size: 20px;
  }

  /* Inquiry detail/reply table: stack label above value instead of side-by-side.
     The desktop th width (312px) leaves almost no room for td on a 375px screen. */
  .mp-inquiry-detail-table tr {
    display: block;
  }
  .mp-inquiry-detail-th,
  .mp-inquiry-detail-td {
    display: block;
    width: auto;
    height: auto;
    padding: 16px;
  }
  /* In the stacked layout, the th still needs its bottom border to separate it
     from the td below — restore what the global last-child rule removed. */
  .mp-inquiry-detail-table tr:last-child .mp-inquiry-detail-th {
    border-bottom: 1px solid #e4e4e7;
  }

  /* Message card: tighter padding on mobile (Figma: 16px). */
  .mp-inquiry-msg-card {
    padding: 16px;
  }
  .mp-inquiry-msg-sep {
    margin: 16px -16px;
  }

}

/* Prevent iOS Safari from zooming in when tapping on form inputs.
   iOS auto-zooms when the focused input has font-size < 16px.
   This rule only fires on touch screens (hover:none + pointer:coarse) so
   desktop font sizes are not affected. */
@media (hover: none) and (pointer: coarse) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}