/* 受託解析会社：注文の画面（見出しの右に「受注を確定する」） */
.order-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.order-title-row h1 { margin-bottom: 8px; }
.order-title-row .order-title-action { margin: 0; }

/* ==========================================
   VENDOR ORDER DETAIL
   受託会社向け 注文詳細・受注管理
========================================== */

.vord-page {
    --vord-blue: #168cf0;
    --vord-navy: #113565;
    --vord-text: #375a7b;
    --vord-muted: #748da7;
    --vord-border: #dceaf7;
  
    width: 100%;
    min-width: 0;
    padding-bottom: 85px;
    background: #f6fbff;
    color: var(--vord-navy);
  }
  
  .vord-page *,
  .vord-page *::before,
  .vord-page *::after {
    box-sizing: border-box;
  }
  
  .vord-container {
    width: min(100% - 36px, 1100px);
    margin-inline: auto;
  }
  
  /* ==========================================
     ヒーロー
  ========================================== */
  
  .vord-hero {
    padding: 37px 0 68px;
    background-color: #eaf7ff;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  
  .vord-eyebrow {
    display: block;
    margin-bottom: 10px;
    color: #168cf0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .15em;
  }
  
  .vord-hero-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
  
  .vord-hero h1 {
    margin: 0;
    color: #0d3066;
    font-size: clamp(26px, 3.1vw, 36px);
    font-weight: 800;
    line-height: 1.45;
  }
  
  .vord-hero-title-row p {
    margin: 10px 0 0;
    color: #5c7c9a;
    font-size: 13px;
    line-height: 1.85;
  }
  
  .vord-hero-actions {
    flex-shrink: 0;
  }
  
  .vord-hero-actions form {
    margin: 0;
  }
  
  .vord-hero-meta {
    display: grid;
    grid-template-columns: 1fr 1.4fr auto auto;
    gap: 15px;
    margin-top: 25px;
    padding: 10px 21px;
    border: 1px solid #d5e8f8;
    border-radius: 5px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 8px 25px rgba(33, 105, 177, .05);
  }
  
  .vord-hero-meta > div {
    min-width: 0;
  }
  
  .vord-hero-meta > div + div {
    padding-left: 15px;
    border-left: 1px solid #e2edf7;
  }
  
  .vord-hero-meta > div > span:first-child {
    display: block;
    margin-bottom: 7px;
    color: #8297aa;
    font-size: 11px;
  }
  
  .vord-hero-meta strong {
    display: block;
    color: #244b74;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.7;
    overflow-wrap: anywhere;
  }
  
  .vord-hero-meta .vord-code {
    color: #087bdc;
    font-variant-numeric: tabular-nums;
  }
  
  .vord-status {
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 20px;
    background: #e8f4ff;
    color: #137acb;
    font-size: 11px;
    font-weight: 800;
  }
  
  /* ==========================================
     メインカード
  ========================================== */
  
  .vord-main {
    position: relative;
    z-index: 1;
    margin-top: -23px;
  }
  
  .vord-page .vord-card {
    min-width: 0;
    margin: 0 0 19px;
    padding: 28px 31px;
    border: 1px solid #dce9f7;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 9px 32px rgba(35, 102, 171, .06);
  }
  
  .vord-condition-changes {
    margin-bottom: 18px;
  }
  
  .vord-condition-changes:empty {
    display: none;
  }
  
  .vord-card-heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 23px;
  }
  
  .vord-heading-icon {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(140deg, #47b9ff, #087eec);
    color: #fff;
    box-shadow: 0 5px 14px rgba(17, 134, 235, .14);
  }
  
  .vord-heading-icon svg {
    width: 23px;
    height: 23px;
  }
  
  .vord-section-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #168cf0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
  }
  
  .vord-card-heading h2 {
    margin: 0;
    color: #163d6b;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.5;
  }
  
  .vord-card-heading p {
    margin: 0px 0 0;
    color: #7b92aa;
    font-size: 12px;
    line-height: 1.85;
  }
  
  /* ==========================================
     注文サマリー
  ========================================== */
  
  .vord-order-summary {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: 13px;
    margin-bottom: 20px;
  }
  
  .vord-order-summary > div {
    min-width: 0;
    padding: 18px 19px;
    border: 1px solid #dceafa;
    border-radius: 5px;
    background: #f5faff;
  }
  
  .vord-order-summary span,
  .vord-confirmed-summary span {
    display: block;
    margin-bottom: 9px;
    color: #748eaa;
    font-size: 11px;
    font-weight: 800;
  }
  
  .vord-order-summary strong {
    color: #224a76;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.7;
    overflow-wrap: anywhere;
  }
  
  .vord-order-summary .vord-quoted-amount {
    color: #0a4e95;
    font-size: clamp(20px, 2.5vw, 27px);
    font-weight: 600;
  }
  
  /* ==========================================
     情報テーブル
  ========================================== */
  
  .vord-page .vord-table,
  .vord-page .vord-request-summary table {
    width: 100%;
    margin: 0;
    border: 1px solid #dce8f5;
border-collapse: collapse;
    border-spacing: 0;
    border-radius: 5px;
    background: #fff;
  }
  
  .vord-page .vord-table th,
  .vord-page .vord-table td,
  .vord-page .vord-request-summary th,
  .vord-page .vord-request-summary td {
    padding: 5px 17px;
    border: 0;
    border-right: 1px solid #e3edf7;
    border-bottom: 1px solid #e3edf7;
    color: #395978;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.9;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
  }
  
  .vord-page .vord-table tr > :last-child,
  .vord-page .vord-request-summary tr > :last-child {
    border-right: 0;
  }
  
  .vord-page .vord-table tr:last-child > th,
  .vord-page .vord-table tr:last-child > td,
  .vord-page .vord-request-summary tr:last-child > th,
  .vord-page .vord-request-summary tr:last-child > td {
    border-bottom: 0;
  }
  
  .vord-page .vord-table th,
  .vord-page .vord-request-summary th {
    width: 32%;
    background: #f0f7ff;
    color: #25496d;
    font-weight: 800;
  }
  
  .vord-page .vord-table td strong {
    color: #1e4c7a;
  }
  
  .vord-page .vord-table td p,
  .vord-page .vord-request-summary td p {
    margin: 0 0 7px;
  }
  
  .vord-page .vord-table td p:last-child,
  .vord-page .vord-request-summary td p:last-child {
    margin-bottom: 0;
  }
  
  .vord-request-summary {
    min-width: 0;
    overflow-x: auto;
  }
  
  .vord-request-summary details {
    margin-top: 9px;
  }
  
  .vord-request-summary summary {
    color: #087ce0;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
  }
  
  .vord-request-summary pre {
    max-width: 100%;
    padding: 13px;
    border-radius: 8px;
    background: #f4f9ff;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  
  /* ==========================================
     フォーム
  ========================================== */
  
  .vord-page .vord-form {
    display: block;
  }
  
  .vord-page .vord-field {
    margin-bottom: 23px;
  }
  
  .vord-label {
    display: block;
    margin-bottom: 10px;
    color: #23496f;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.8;
  }
  
  .vord-required {
    display: inline-block;
    margin-left: 7px;
    padding: 2px 7px;
    border-radius: 4px;
    background: #fff0ef;
    color: #dd5a61;
    font-size: 10px;
    font-weight: 800;
  }
  
  .vord-optional {
    margin-left: 8px;
    color: #8b9cad;
    font-size: 11px;
    font-weight: 500;
  }
  
  .vord-page .vord-input {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 11px 15px;
    border: 1px solid #cddfeb;
    border-radius: 9px;
    outline: none;
    background: #fff;
    color: #25496b;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.65;
  }
  
  .vord-page .vord-input:focus {
    border-color: #168cf0;
    box-shadow: 0 0 0 4px rgba(22, 140, 240, .1);
  }
  
  .vord-page .vord-input::placeholder {
    color: #9cadbf;
  }
  
  .vord-page .vord-textarea {
    min-height: 96px;
    resize: vertical;
  }
  
  .vord-amount-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
  }
  
  .vord-page .vord-amount-input {
    width: min(100%, 350px);
  }
  
  .vord-yen-preview {
    color: #0878db;
    font-size: 16px;
    font-weight: 800;
  }
  
  .vord-page .vord-field-note {
    margin: 10px 0 0;
    color: #7b91a7;
    font-size: 11px;
    line-height: 1.95;
  }
  
  /* ==========================================
     金額変更
  ========================================== */
  
  .vord-page .vord-change-reason {
    margin-bottom: 23px;
    padding: 20px;
    border: 1px solid #e9d9b4;
    border-radius: 11px;
    background: #fffcf4;
  }
  
  .vord-page .vord-change-reason[hidden],
  .vord-page .vord-change-hint[hidden] {
    display: none !important;
  }
  
  .vord-change-hint {
    margin: 13px 0 0;
    padding: 13px 15px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.85;
  }
  
  .vord-change-hint.is-increase {
    border: 1px solid #f0dbb0;
    background: #fff5df;
    color: #9b6a28;
  }
  
  .vord-change-hint.is-decrease {
    border: 1px solid #cbe6db;
    background: #edf9f2;
    color: #268466;
  }
  
  /* 承認待ち */
  
  .vord-warning-icon {
    background: #fff1d6;
    color: #d69d28;
    box-shadow: none;
  }
  
  .vord-change-pending {
    padding: 22px;
    border: 1px solid #f0dfb9;
    border-radius: 11px;
    background: #fffbf1;
    color: #866e42;
  }
  
  .vord-small-label {
    display: block;
    margin-bottom: 11px;
    color: #96794a;
    font-size: 12px;
  }
  
  .vord-price-change {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 15px;
  }
  
  .vord-price-change > span:first-child {
    color: #8d7859;
    font-size: 20px;
    font-weight: 700;
  }
  
  .vord-price-change > span:nth-child(2) {
    color: #b3976b;
  }
  
  .vord-price-change strong {
    color: #c77c25;
    font-size: 28px;
    font-weight: 900;
  }
  
  .vord-change-pending p {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.85;
  }
  
  /* 変更否認 */
  
  .vord-rejected {
    margin-bottom: 23px;
    padding: 18px 20px;
    border: 1px solid #f0c9c8;
    border-radius: 10px;
    background: #fff5f4;
    color: #9e5657;
    font-size: 12px;
    line-height: 1.9;
  }
  
  .vord-rejected p {
    margin: 8px 0 0;
  }
  
  /* ==========================================
     受注確定後
  ========================================== */
  
  .vord-confirmed-summary {
    margin-bottom: 20px;
    padding: 20px 24px;
    border: 1px solid #cde4f8;
    border-radius: 5px;
    background: #eff8ff;
  }
  
  .vord-confirmed-summary strong {
    display: block;
    color: #0c559d;
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 600;
  }
  .vp-tips strong{
    display: block;
  }
  
  .vord-approved-badge {
    display: inline-block;
    margin-top: 9px;
    padding: 5px 11px;
    border-radius: 20px;
    background: #e7f8ef;
    color: #158e69;
    font-size: 11px;
    font-weight: 800;
  }
  
  /* ==========================================
     ボタン
  ========================================== */
  
  .vord-submit-area {
    margin-top: 20px;
  }
  
  .vord-page .vord-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 49px;
    padding: 11px 26px;
    border: 1px solid #087dea;
    border-radius: 9px;
    background: linear-gradient(180deg, #36adff, #087bef);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 8px 19px rgba(15, 126, 225, .17);
    cursor: pointer;
  }
  
  .vord-page .vord-primary-button:hover {
    filter: brightness(.97);
  }
  
  /* 受注不可 */
  
  .vord-danger-icon {
    border: 1px solid #f1d7d9;
    background: #fff1f2;
    color: #d85c69;
    box-shadow: none;
  }
  
  .vord-page .vord-danger-button {
    min-height: 43px;
    padding: 9px 22px;
    border: 1px solid #e5a3aa;
    border-radius: 8px;
    background: #fff;
    color: #d34e5c;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
  }
  
  .vord-page .vord-danger-button:hover {
    background: #fff2f3;
  }
  
  .vord-state-notice {
    padding: 20px;
    border: 1px solid #dce8f5;
    border-radius: 12px;
    background: #fff;
    color: #5a7896;
    font-size: 13px;
  }
  
  /* ==========================================
     レスポンシブ
  ========================================== */
  
  @media (max-width: 850px) {
    .vord-hero-meta {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  
    .vord-hero-meta > div + div {
      padding-left: 0;
      border-left: 0;
    }
  
    .vord-order-summary {
      grid-template-columns: 1fr 1fr;
    }
  }
  
  @media (max-width: 640px) {
    .vord-page {
      padding-bottom: 45px;
    }
  
    .vord-container {
      width: calc(100% - 26px);
    }
  
    .vord-hero {
      padding: 30px 0 54px;
      background-position: 69% center;
    }
  
    .vord-hero-title-row {
      align-items: flex-start;
      flex-direction: column;
      gap: 15px;
    }
  
    .vord-hero h1 {
      font-size: 25px;
    }
  
    .vord-hero-title-row p {
      font-size: 12px;
    }
  
    .vord-hero-actions,
    .vord-hero-actions form,
    .vord-hero-actions button {
      width: 100%;
    }
  
    .vord-hero-meta {
      grid-template-columns: 1fr;
      gap: 10px;
      padding: 15px;
    }
  
    .vord-hero-meta > div + div {
      padding-top: 10px;
      border-top: 1px solid #e2edf7;
    }
  
    .vord-main {
      margin-top: -13px;
    }
  
    .vord-page .vord-card {
      margin-bottom: 14px;
      padding: 19px 14px;
      border-radius: 12px;
    }
  
    .vord-card-heading {
      gap: 10px;
      margin-bottom: 18px;
    }
  
    .vord-heading-icon {
      flex-basis: 36px;
      width: 36px;
      height: 36px;
    }
  
    .vord-heading-icon svg {
      width: 19px;
      height: 19px;
    }
  
    .vord-card-heading h2 {
      font-size: 18px;
    }
  
    .vord-card-heading p {
      font-size: 11px;
    }
  
    .vord-order-summary {
      grid-template-columns: 1fr;
      gap: 9px;
    }
  
    .vord-order-summary > div {
      padding: 15px;
    }
  
    .vord-page .vord-table th,
    .vord-page .vord-table td,
    .vord-page .vord-request-summary th,
    .vord-page .vord-request-summary td {
      padding: 11px;
      font-size: 11px;
    }
  
    .vord-page .vord-table th,
    .vord-page .vord-request-summary th {
      width: 39%;
    }
  
    .vord-page .vord-input {
      font-size: 16px;
    }
  
    .vord-page .vord-amount-input {
      width: 100%;
    }
  
    .vord-page .vord-change-reason {
      padding: 14px;
    }
  
    .vord-price-change strong {
      font-size: 23px;
    }
  
    .vord-page .vord-primary-button {
      width: 100%;
    }
  }
  
  /* アクセシビリティ */
  
  .vord-page a:focus-visible,
  .vord-page button:focus-visible,
  .vord-page input:focus-visible,
  .vord-page textarea:focus-visible {
    outline: 3px solid #168cf0;
    outline-offset: 3px;
  }
  
  @media (prefers-reduced-motion: reduce) {
    .vord-page *,
    .vord-page *::before,
    .vord-page *::after {
      transition: none !important;
    }
  }
  
/* ==========================================
   VENDOR PORTAL NAVIGATION
   会社マイページ共通ヘッダー
========================================== */

.vpnav-header {
    position: relative;
    z-index: 30;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #dce9f6;
    background: #fff;
    box-shadow: 0 5px 20px rgba(24, 85, 150, .045);
  }
  
  .vpnav-header *,
  .vpnav-operator-bar * {
    box-sizing: border-box;
  }
  
  .vpnav-header .vpnav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    width: min(100% - 36px, 1200px);
    max-width: 1200px;
    min-height: 55px;
    margin: 0 auto;
    padding: 5px 0;
  }
  
  /* ブランド部分 */
  
  .vpnav-header .vpnav-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex: 0 1 270px;
    min-width: 0;
    margin: 0;
    padding: 0;
  }
  
  .vpnav-brand-sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: #168cf0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1.5;
  }
  
  .vpnav-brand-dot {
    display: inline-block;
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #168cf0;
  }
  
  .vpnav-brand-jp {
    color: #8097ae;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0;
  }
  
  .vpnav-header .vpnav-brand > strong {
    display: block;
    max-width: 100%;
    margin: 0;
    color: #123865;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  
  /* メニュー */
  
  .vpnav-header .vpnav-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
  }
  
  .vpnav-header .vpnav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 43px;
    margin: 0;
    padding: 10px 13px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: #55718e;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s, color .2s;
  }
  
  .vpnav-header .vpnav-link:hover {
    background: #f0f8ff;
    color: #087fe5;
    text-decoration: none;
  }
  
  .vpnav-header .vpnav-link.current,
  .vpnav-header .vpnav-link[aria-current="page"] {
    border-color: #d4eafb;
    background: #eaf6ff;
    color: #087fe5;
    box-shadow: inset 0 0 0 1px rgba(22, 140, 240, .03);
  }
  
  /* ログアウト */
  
  .vpnav-header .vpnav-logout-form {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin: 0 0 0 10px;
    padding: 0;
  }
  
  .vpnav-header .vpnav-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 41px;
    margin: 0;
    padding: 9px 15px;
    border: 1px solid #cbddeb;
    border-radius: 9px;
    background: #fff;
    color: #526e8d;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: background .2s, border-color .2s;
  }
  
  .vpnav-header .vpnav-logout:hover {
    border-color: #b8d8f1;
    background: #f2f8ff;
    color: #166eaf;
  }
  
  /* ==========================================
     運営の代理操作バー
  ========================================== */
  
  .vpnav-operator-bar {
    position: relative;
    z-index: 31;
    width: 100%;
    padding: 11px 0;
    border-bottom: 1px solid #e7a8aa;
    background: #fff0f0;
  }
  
  .vpnav-operator-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: min(100% - 36px, 1200px);
    margin: 0 auto;
  }
  
  .vpnav-operator-message {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    color: #a02d35;
    font-size: 12px;
    line-height: 1.8;
  }
  
  .vpnav-operator-message strong {
    color: #8d1e27;
    font-weight: 800;
  }
  
  .vpnav-operator-icon {
    display: grid;
    place-items: center;
    flex: 0 0 27px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #d8424b;
    color: #fff;
    font-size: 16px;
    font-weight: 900;
  }
  
  .vpnav-operator-form {
    flex-shrink: 0;
    margin: 0;
  }
  
  .vpnav-operator-quit {
    min-height: 37px;
    padding: 8px 14px;
    border: 1px solid #ca444c;
    border-radius: 8px;
    background: #fff;
    color: #a92b34;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
  }
  
  .vpnav-operator-quit:hover {
    background: #ffe1e3;
  }
  
  /* ==========================================
     中間サイズ
  ========================================== */
  
  @media (max-width: 1100px) {
    .vpnav-header .vpnav-inner {
      gap: 15px;
    }
  
    .vpnav-header .vpnav-brand {
      flex-basis: 215px;
    }
  
    .vpnav-header .vpnav-link {
      padding: 9px 10px;
      font-size: 11px;
    }
  
    .vpnav-header .vpnav-logout-form {
      margin-left: 3px;
    }
  }
  
  /* ==========================================
     タブレット・スマートフォン
  ========================================== */
  
  @media (max-width: 850px) {
    .vpnav-header .vpnav-inner {
      flex-direction: column;
      align-items: stretch;
      gap: 15px;
      min-height: 0;
      padding: 18px 0 12px;
    }
  
    .vpnav-header .vpnav-brand {
      flex: none;
      width: 100%;
    }
  
    .vpnav-header .vpnav-brand > strong {
      font-size: 17px;
    }
  
    .vpnav-header .vpnav-menu {
      justify-content: flex-start;
      flex: none;
      flex-wrap: nowrap;
      gap: 6px;
      width: 100%;
      padding: 0 0 5px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: #c6ddf0 transparent;
    }
  
    .vpnav-header .vpnav-link {
      flex: 0 0 auto;
      min-height: 40px;
      padding: 8px 12px;
      font-size: 12px;
    }
  
    .vpnav-header .vpnav-logout-form {
      flex: 0 0 auto;
      margin-left: 7px;
    }
  
    .vpnav-header .vpnav-logout {
      min-height: 40px;
    }
  
    .vpnav-operator-inner {
      align-items: flex-start;
      flex-direction: column;
      gap: 10px;
    }
  }
  
  @media (max-width: 640px) {
    .vpnav-header .vpnav-inner,
    .vpnav-operator-inner {
      width: calc(100% - 26px);
    }
  
    .vpnav-header .vpnav-inner {
      gap: 12px;
      padding: 14px 0 10px;
    }
  
    .vpnav-brand-sub {
      font-size: 9px;
      margin-bottom: 5px;
    }
  
    .vpnav-brand-jp {
      font-size: 9px;
    }
  
    .vpnav-header .vpnav-brand > strong {
      font-size: 16px;
    }
  
    .vpnav-header .vpnav-link {
      min-height: 38px;
      padding: 8px 11px;
      font-size: 11px;
    }
  
    .vpnav-header .vpnav-logout {
      min-height: 38px;
      padding: 8px 11px;
      font-size: 11px;
    }
  
    .vpnav-operator-message {
      font-size: 11px;
    }
  
    .vpnav-operator-quit {
      font-size: 11px;
    }
  }
  
  /* ==========================================
     フォーカス・動き
  ========================================== */
  
  .vpnav-header a:focus-visible,
  .vpnav-header button:focus-visible,
  .vpnav-operator-bar button:focus-visible {
    outline: 3px solid #168cf0;
    outline-offset: 3px;
  }
  
  @media (prefers-reduced-motion: reduce) {
    .vpnav-header *,
    .vpnav-operator-bar * {
      transition: none !important;
    }
  }