@charset "UTF-8";
/* =====================================================================
   Best Effort Office 船橋 バーチャルオフィス LP
   - すべて .virtual-office 配下にスコープ（既存WordPressテーマへの干渉防止）
   - SP基準（モバイルファースト）→ min-width:768px でPC展開
   - 実装範囲: FV / Solution（こんなお悩み）
   ===================================================================== */

/* ---------- スコープ内トークン ---------- */
.virtual-office {
  --vo-orange: #ff732d;
  --vo-orange-btn: #ff732d;
  --vo-green: #00b900;
  --vo-ink: #212121;
  --vo-gray: #4a4a4a;
  --vo-shadow: 3px 4px 14.7px rgba(131, 127, 124, .15);
  --vo-cream: #fcf6f1;
  --vo-bubble: #fff3ed;
  --vo-card: #ffffff;
  --vo-card-border: #ffe1d0;
  --vo-reason-card: #fdf6f1; /* Reasons 各理由の背景カード（Figma #fdf6f1） */
  --vo-orange-light: #ff8a4f; /* Reasons WHY CHOOSE US 罫線・文字 */
  --vo-green-line: #259a2e;   /* Reasons LINE小カード見出しの緑 */
  --vo-text: #333333;
  --vo-white: #ffffff;
  --vo-footer-bg: #6e6e6e; /* Access コピーライト帯の背景（Figma #6e6e6e） */
  --vo-max: 1120px;

  color: var(--vo-text);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    YuGothic, "Noto Sans JP", Meiryo, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background: var(--vo-white);
  /* WordPress版のみの追加: 各セクションSPブロックのwidth:100vwフルブリード実装が
     縦スクロールバー分だけ横にはみ出す場合の保険。.virtual-office配下のみに閉じたスコープで
     bodyやhtmlには影響しない。静的版のoverflow挙動・見た目には影響しない。 */
  overflow-x: hidden;
}

/* ---------- スコープ内リセット（reset.css は触らずここで最小限） ---------- */
.virtual-office *,
.virtual-office *::before,
.virtual-office *::after { box-sizing: border-box; }

.virtual-office h1,
.virtual-office h2,
.virtual-office p,
.virtual-office ul,
.virtual-office li,
.virtual-office figure { margin: 0; padding: 0; }

.virtual-office ul { list-style: none; }
.virtual-office img { max-width: 100%; height: auto; vertical-align: bottom; }
.virtual-office a { color: inherit; text-decoration: none; }

/* ---------- 共通ボタン ---------- */
.virtual-office .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--vo-white);
  white-space: nowrap;
  transition: opacity .2s ease;
}
.virtual-office .button:hover { opacity: .88; }
.virtual-office .button__icon { flex: none; width: 26px; height: 26px; }
.virtual-office .button--contact { background: var(--vo-orange-btn); }
.virtual-office .button--line { background: var(--vo-green); }
.virtual-office .button--sm { padding: 8px 14px; font-size: .78rem; gap: 6px; }
.virtual-office .button--sm .button__icon { width: 18px; height: 18px; }

/* =====================================================================
   Header（Figma: 高さ80 / ロゴ x136・幅392高70 / ボタン x976 幅327高57）
   → コンテンツ幅を1168pxコンテナに収め、ロゴ左端・ボタン右端をカンプに合わせる
   ===================================================================== */
.virtual-office .vo-header { background: var(--vo-cream); }
.virtual-office .vo-header__inner {
  max-width: 1168px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 20px;
  min-height: 42px; /* SP: 42px */
}
.virtual-office .vo-header__logo img { height: 31px; width: auto; } /* SP: 31px */

/* =====================================================================
   FV（SP基準。数値はSP版Figma[390幅]の実測）
   ===================================================================== */
.virtual-office .fv {
  position: relative;
  background: var(--vo-cream);
  overflow: hidden;
}
.virtual-office .fv__inner {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px 20px 16px; /* SP: Figma実測（ヘッダー→タイトル32 / お問い合わせCTA→FV下端16）に合わせる */
}
.virtual-office .fv__content { position: relative; z-index: 1; max-width: 340px; }
/* SP（max-width:767px）でのみ中央配置。PC（2カラム非対称レイアウト・左寄せ前提）には
   影響させないため、margin-inline:autoはここではなく下記@media(max-width:767px)内で指定する。 */

/* 写真ビジュアル（完成画像。マスク形状・曲線・見切れは画像に内包。CSSで再現しない）
   SP: 上部コンテンツ背面の円形（Figma x11 y188 ≒ 右寄せ・全幅） */
.virtual-office .fv__visual {
  position: absolute;
  z-index: 0;
  top: 116px;
  right: 0;
  width: 97%;
  pointer-events: none;
}
.virtual-office .fv__visual picture { display: block; }
.virtual-office .fv__visual-img { display: block; width: 100%; height: auto; }

/* 見出し（SP: 通常25px / アクセント30px / 2行目28px） */
.virtual-office .fv__title {
  color: var(--vo-ink);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .01em;
  font-size: 25px;
}
.virtual-office .fv__title-line { display: block; }
.virtual-office .fv__title-line:last-child { font-size: 28px; }
.virtual-office .fv__accent { color: var(--vo-orange); font-size: 30px; }

/* 価格（SP: 箱295x83 r10 / 月額23 / 5,280=65 / 円30 / 税込11 / ～25。
   390px基準のvw+clampで360px幅まで比例縮小し、折り返しを防止（390pxでは従来値と同じ） */
.virtual-office .fv__price {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  margin-top: 18px;
  padding: 8px clamp(14px, 4.103vw, 16px);
  background: rgba(255, 255, 255, .82); /* SP: 写真を透過（Figma 0.8） */
  border-radius: 10px;
  box-shadow: var(--vo-shadow);
  font-weight: 700;
}
.virtual-office .fv__price-label,
.virtual-office .fv__price-num,
.virtual-office .fv__price-unit,
.virtual-office .fv__price-tax,
.virtual-office .fv__price-wave { white-space: nowrap; }
.virtual-office .fv__price-label { font-size: clamp(21px, 5.897vw, 23px); color: var(--vo-gray); }
.virtual-office .fv__price-num {
  color: var(--vo-orange);
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(60px, 16.667vw, 65px);
  line-height: 1;
  letter-spacing: -.01em;
}
.virtual-office .fv__price-unit { font-size: clamp(28px, 7.692vw, 30px); color: var(--vo-orange); }
.virtual-office .fv__price-tax {
  font-size: clamp(10px, 2.821vw, 11px); color: var(--vo-gray); align-self: flex-start; margin-top: .4em;
}
.virtual-office .fv__price-wave { font-size: clamp(23px, 6.410vw, 25px); color: var(--vo-gray); }

/* 特徴カード（SP: 縦＝アイコン上／テキスト下、箱86x117 r10 影のみ） */
.virtual-office .fv__features {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.virtual-office .fv__feature {
  flex: 0 1 88px; /* Figma実測86pxに近づける */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 6px;
  background: rgba(255, 255, 255, .9); /* SP: 写真を透過（Figma 0.88） */
  border-radius: 10px;
  box-shadow: var(--vo-shadow);
  text-align: center;
}
.virtual-office .fv__feature-text {
  font-size: 12.5px; font-weight: 700; color: var(--vo-gray); line-height: 1.3;
  white-space: nowrap; /* 改行は行スパン位置のみ */
}
.virtual-office .fv__feature-line { display: block; }         /* 2行を行スパンで縦積み */
.virtual-office .fv__feature-num { font-size: inherit; }      /* SPは強調なし（PCで上書き） */
/* アイコンはカードごとに実寸が異なる（SP49/53/65 → PC69/79/94） */
.virtual-office .fv__feature-icon { height: auto; }
.virtual-office .fv__feature:nth-child(1) .fv__feature-icon { width: clamp(49px, 4.79vw, 69px); }
.virtual-office .fv__feature:nth-child(2) .fv__feature-icon { width: clamp(53px, 5.49vw, 79px); }
.virtual-office .fv__feature:nth-child(3) .fv__feature-icon { width: clamp(65px, 6.53vw, 94px); }

/* CTA（SP: 縦積み 301x48 r80 / 文字15 / アイコン36） */
.virtual-office .fv__cta {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 93px; /* SP: 写真下部でのCTA位置をFigma実測に近づける（写真自体は非変更） */
}
.virtual-office .fv__cta .button {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  min-height: 48px;
  padding: 0 16px;
  font-size: 15px;
  border-radius: 80px;
  gap: 8px;
}
.virtual-office .fv__cta .button__icon { width: 36px; height: 36px; }


/* =====================================================================
   Solution（こんなお悩み）
   見出し・吹き出し・テキスト・人物イラストを内包した「完成状態の1枚画像」を配置。
   PC/SPで別画像（Figmaカンプ基準）。吹き出し等はCSSで再現しない。
   ===================================================================== */
.virtual-office .solution { position: relative; z-index: 1; background: var(--vo-white); }
.virtual-office .solution__inner {
  max-width: var(--vo-max);
  margin: 0 auto;
  padding: 48px 16px 28px; /* SP: 見出し上の余白（Figma≈64px相当） */
}
/* 見出しはh2テキスト（SP: 20px / Bold / #4a4a4a） */
.virtual-office .solution__title {
  text-align: center;
  color: var(--vo-gray);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  margin-bottom: 16px;
}
.virtual-office .solution__figure { display: block; }
.virtual-office .solution__figure img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  /* SP画像比率でスペースを確保しCLSを抑制（見出し除外後） */
  aspect-ratio: 780 / 1004;
}

/* =====================================================================
   Solution（船橋が解決します／4メリット）※ベースは背景のみ。詳細レイアウトはPC（SPは後工程）
   ===================================================================== */
.virtual-office .solve { position: relative; background: #ffeee5; overflow: hidden; }

/* =====================================================================
   SP専用微調整（max-width:767px。Figma SP実測[node 2012:479]との差分のみ上書き）
   ===================================================================== */
@media (max-width: 767px) {
  /* 左右フルブリード（WordPress版）：静的版はbodyのUA既定margin(8px)を
     margin-inline:-8pxで相殺してviewport端まで背景を広げていたが、組み込み先の
     bem-templateはcss/style.css（HTML5 Reset）でbody{margin:0}済みのため、
     静的版と同じ-8px手法だとむしろ8px分はみ出して横スクロールの原因になる。
     WordPress側のbody margin値に依存しない一般的なフルブリード手法
     （width:100vw + margin-left:calc(50% - 50vw)）に置き換える。数値・見た目は静的版と同一。
     縦スクロールバー幅によりvwがcontent幅よりわずかに大きくなるケースがあるため、
     はみ出し分は.virtual-office側のoverflow-x:hiddenで吸収する（下記トークン定義部）。
     ヘッダー上端のmargin-top:-8px（body上マージン相殺用）はbody{margin:0}環境では
     不要かつ有害（上端8pxが欠けて見える）なため削除した。 */
  .virtual-office .vo-header,
  .virtual-office .fv {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  /* FVコンテンツ（タイトル／料金／3カード／CTA）の中央配置：
     .fv__contentはmax-width:340pxのみでmargin指定がなかったため、.fv__innerの
     コンテンツ幅（viewport - 40px）が340pxを超える390px超の幅（.fv__inner padding込みで
     380px超のviewport）で左詰めのまま余白が右側だけに残り、タイトル・料金・3カード・
     CTAがまとめて左へ偏って見えていた（360〜380pxでは元々340px以下に収まるため無症状）。
     margin-inline:autoを追加し、340pxを超えた分だけ左右均等に振り分けて中央配置にする。
     360px時（コンテンツ幅320px＜340px）は現状と完全に同一（変化なし）。 */
  .virtual-office .fv__content { margin-inline: auto; }

  /* コンテンツ幅の拡大対応：タイトル・料金・3カードのフォント/サイズを440pxまで
     連続拡大する対応にあわせ、.fv__content自体のmax-width（従来340px固定）も同じ
     360px基準の比率で拡大する。固定340pxのままだと、フォントが大きくなるにつれて
     タイトル1行目（アクセント含む）が箱の440px幅を超えて意図しない位置で追加改行され、
     414→440px付近でタイトル・料金・3カードの縦位置が不連続にジャンプする不具合が
     発生していたため。94.444vwは340÷360×100で算出、360pxでの計算結果は
     元の固定340pxと完全一致するため360pxの見た目に影響しない。 */
  .virtual-office .fv__content { max-width: clamp(340px, 94.444vw, 415.56px); }

  /* ヘッダーCTA（Figma: x226 y8 幅144 高24・アイコンなし） */
  .virtual-office .vo-header__contact.button--sm {
    padding: 4px 12px;
    font-size: 11px;
    gap: 0;
  }
  .virtual-office .vo-header__contact.button--sm .button__icon { display: none; }

  /* タイトル（Figma: 2行とも中央揃え。PCは非対称2カラムのため左揃えのまま） */
  .virtual-office .fv__title { text-align: center; }

  /* タイトル拡大対応：360px時の値（25/28/30px）を基準に、440pxまで比率を保ったまま
     連続拡大する（係数は「360px時の値 ÷ 360 × 100」で算出。360pxでの計算結果は
     元の固定値と完全一致するため360pxの見た目に影響しない）。440px以降は頭打ちにし、
     無制限に拡大しない。 */
  .virtual-office .fv__title { font-size: clamp(25px, 6.944vw, 30.56px); }
  .virtual-office .fv__title-line:last-child { font-size: clamp(28px, 7.778vw, 34.22px); }
  .virtual-office .fv__accent { font-size: clamp(30px, 8.333vw, 36.67px); }

  /* CTAボタン（Figma実測 幅301px。拡大対象外のため固定サイズのまま維持） */
  .virtual-office .fv__cta .button { max-width: 301px; }

  /* CTAグループの配置：タイトル・料金・3カードが拡大対象になったことで、通常フローに
     置いたままだと（それらの高さ変化に応じてCTA位置が連動して動いてしまい、写真基準の
     位置合わせと両立できないため）、Contact/Reasons03と同じ「写真基準のposition:absolute」
     方式に変更する。
     .fv__visual（写真）はwidth:calc(99% - 16px)（.fv__inner基準）・top:136px固定・
     height:autoのため、写真下端の位置は次の式で求まる
     （.fv__innerの実横幅は767px以下では常にviewport幅と一致するため99%を99vwで代替可能。
     457/379は実画像fv-visual-sp.webpの縦横比）：
       写真下端 = 136px + (99vw - 16px) × 457 ÷ 379
     360px時点の実測ギャップ（写真下端からCTA上端まで86.41px）を差し引いた値をCTAのtopとする。
     これによりタイトル・料金・3カードの拡大量に関わらず、CTAは常に写真と一定の relative
     position を保ったまま上下移動する。CTA自体のサイズ（幅・高さ・文字・アイコン・間隔）は
     .fv__cta / .fv__cta .button 側を一切変更していないため、360px時の見た目のまま拡大しない。 */
  .virtual-office .fv__cta {
    position: absolute;
    left: 50%;
    /* .fv__ctaの絶対配置の基準（containing block）は.fv__innerではなく、より近い
       position:relativeの祖先である.fv__content（.fv__inner内で padding-top:32px 分
       下がった位置がその原点）になる。写真下端の式は.fv__inner基準で算出しているため、
       ここでその32pxのオフセット分を追加で差し引いて補正している
       （86.41px + 32px = 118.41px）。 */
    top: calc(136px + (99vw - 16px) * 457 / 379 - 118.41px);
    transform: translateX(-50%);
    width: 301px;
    margin-top: 0;
  }

  /* CTAをposition:absoluteにしたことで.fv__innerの通常フロー高さにCTAが寄与しなくなるため、
     min-heightで「CTAの写真基準の位置＋CTA自身の高さ109px＋下端余白18px」を明示的に確保し、
     セクション全体の高さ・直後のSolutionセクションとの間隔を維持する（従来の
     padding-bottom:18pxはCTAが最後尾の通常フロー要素だった時の名残のため0に変更）。 */
  .virtual-office .fv__inner {
    padding-bottom: 0;
    min-height: calc(136px + (99vw - 16px) * 457 / 379 + 40.61px);
  }

  /* 金額ボックス：baseline整列だと崩れて見えるため、PC版と同じ「絶対配置＋%座標」技法に変更し、
     Figma実測（node 9:39）の位置関係をそのまま再現する。%はboxのwidth/heightに対する比率のため
     360〜390pxの可変幅でも崩れない。 */
  .virtual-office .fv__price {
    display: block;
    position: relative;
    /* 440pxまでの拡大対応：既存の75.641vw（390pxで295pxになる係数）はそのまま維持し、
       上限のみ295px→332.82px（75.641vw×440/100）に延長。360〜390pxの数値・見た目は
       完全に無変更（延長したのは390px以降の頭打ち位置のみ）。 */
    width: clamp(272px, 75.641vw, 332.82px); /* 295/390*100 */
    aspect-ratio: 295 / 83;
    margin: 18px auto 0;
    padding: 0;
  }
  .virtual-office .fv__price-label,
  .virtual-office .fv__price-num,
  .virtual-office .fv__price-unit,
  .virtual-office .fv__price-tax,
  .virtual-office .fv__price-wave {
    position: absolute;
    margin: 0;
    line-height: 1;
  }
  .virtual-office .fv__price-label { left: 7.12%;  top: 36.14%; }
  /* 「5,280」：PC版（.fv__price-num のPCルール／.plan__price-num）と同じDIN代替フォント・
     font-weight:400・letter-spacingに統一。従来はArial Narrowのみ・font-weight700（太字）継承で
     Figmaより太く見えていた。 */
  .virtual-office .fv__price-num   {
    left: 24.75%; top: 6.02%;
    transform: translateY(7px); /* 下端を「円」に近づけ、Figmaの見た目に寄せる（詳細は実装ログ参照） */
    font-family: "Bahnschrift", "DIN Alternate", "DIN Condensed", "Arial Narrow", sans-serif;
    font-weight: 400;
    letter-spacing: -.05em;
  }
  .virtual-office .fv__price-unit  { left: 73.31%; top: 39.84%; }
  .virtual-office .fv__price-tax   { left: 71.19%; top: 30.12%; }
  .virtual-office .fv__price-wave  { left: 85.91%; top: 44.48%; }

  /* 特徴カード：カード自体を少し高くし、イラスト上余白は3枚とも均一（左のカードを基準）に。
     3枚のイラストは実サイズが異なる（49/60/65px）ため、「上余白を揃える」と「下端を揃える」は
     数学的に両立しない（サイズが違う以上、上を揃えれば下は必ずズレる）。今回は
     - イラスト上余白を3枚とも均一にする（指示2）
     - テキストの開始位置を3枚とも揃える＝上揃えに見せる（指示5）
     を優先し、イラストの実寸表示領域を「最大のイラスト（3枚目・65px）」に合わせた
     固定の高さゾーンとして扱う。小さいイラストはゾーン内で上詰め表示になるため、
     見た目の下端の差は残るが、上余白とテキスト位置は完全に揃う。 */
  /* 追加調整：上余白を半分に（20px→10px）。
     イラスト〜テキスト間隔：これまでは3枚共通のダミー表示ゾーン（height:65px・
     object-fit:contain）でイラストを統一していたが、実サイズが異なる（49/60/58px）ため、
     ゾーン下の余白差がそのまま「イラストとテキストの間隔がバラバラ」に見える原因になっていた。
     ゾーンを廃止し、各イラストを実サイズ（height:auto）に戻す（見た目の位置・大きさは
     従来のまま＝top詰めのゾーン内表示と同一）。これによりgapがそのまま「実イラスト下端
     →テキスト」の間隔になり、flexのgapは3枚とも同一値のため、間隔が均等に見える。
     gapは4px→6pxに変更（実質的な間隔は旧ゾーン方式の最大約20pxから約1/3に短縮）。 */
  .virtual-office .fv__feature { justify-content: flex-start; padding: 10px 6px 4px; gap: 6px; }
  .virtual-office .fv__feature-icon { height: auto; }
  /* 契約継続率アイコンのみ、左右とのバランスを保ちつつ少し拡大 */
  .virtual-office .fv__feature:nth-child(2) .fv__feature-icon { width: clamp(60px, 6.22vw, 86px); }
  /* 商談スペースアイコンが左2枚に対して大きすぎたため縮小し、3枚のバランスを整える */
  .virtual-office .fv__feature:nth-child(3) .fv__feature-icon { width: clamp(58px, 6.01vw, 84px); }

  /* 追加調整：3ボックス全体をカンプのサイズ感に合わせて約90%に縮小
     （幅・padding・アイコン間gap・文字サイズ・1/2枚目アイコンを一律で約90%換算）。 */
  .virtual-office .fv__feature {
    flex-basis: 79px;
    padding: 9px 5px 4px;
    gap: 5px;
  }
  .virtual-office .fv__feature-text { font-size: 11.25px; }
  /* 1枚目（最短即日利用OK）：全体を2pxサイズアップ。テキストの上位置はアイコン下端＋gapで
     決まるため、font-sizeのみの変更では動かない。 */
  .virtual-office .fv__feature:nth-child(1) .fv__feature-text { font-size: 13.25px; }
  /* 2枚目（契約継続率95％以上）：「95」（.fv__feature-num）以外を1pxサイズダウン。
     「95」はさらに2pxサイズアップ（11.25px→13.25px）。 */
  .virtual-office .fv__feature:nth-child(2) .fv__feature-text { font-size: 10.25px; }
  .virtual-office .fv__feature:nth-child(2) .fv__feature-num { font-size: 13.25px; }
  /* 3枚目（商談スペース月2時間無料）：「2」（.fv__feature-num）以外を1pxサイズダウン。
     「2」はさらに2pxサイズアップ（11.25px→13.25px）。 */
  .virtual-office .fv__feature:nth-child(3) .fv__feature-text { font-size: 10.25px; }
  .virtual-office .fv__feature:nth-child(3) .fv__feature-num { font-size: 13.25px; }
  .virtual-office .fv__feature:nth-child(1) .fv__feature-icon { width: 44px; }
  .virtual-office .fv__feature:nth-child(2) .fv__feature-icon { width: 54px; }
  /* 3枚目のみ、上記の一律90%に加えてさらに約90%（＝合計で元の約80%）縮小し、
     左2枚に対して大きすぎた印象を解消する。3枚目イラストは現在の素材の縦横比の関係で
     幅47pxでも高さが2枚目とほぼ同じ（約46px）になるため、追加のmargin調整なしで
     テキスト開始位置が自然に左2枚に近づく（実測のうえ確認）。 */
  .virtual-office .fv__feature:nth-child(3) .fv__feature-icon { width: 47px; }

  /* 3つの特徴カード 拡大対応：ここまでの調整で確定した360px時の値（flex-basis/padding/gap/
     文字サイズ/アイコン幅）を基準に、440pxまで比率を保ったまま連続拡大する
     （係数は各値ごとに「360px時の値 ÷ 360 × 100」で算出。360pxでの計算結果は上記の
     固定値と完全一致するため360pxの見た目に影響しない。440px以降は頭打ちにし、
     無制限に拡大しない）。カード3枚は.fv__features{justify-content:center}のまま
     グループとして中央配置を維持する。 */
  .virtual-office .fv__feature {
    flex-basis: clamp(79px, 21.944vw, 96.56px);
    padding: clamp(9px, 2.5vw, 11px) clamp(5px, 1.389vw, 6.11px) clamp(4px, 1.111vw, 4.89px);
    gap: clamp(5px, 1.389vw, 6.11px);
  }
  .virtual-office .fv__feature:nth-child(1) .fv__feature-text { font-size: clamp(13.25px, 3.681vw, 16.19px); }
  .virtual-office .fv__feature:nth-child(2) .fv__feature-text { font-size: clamp(10.25px, 2.847vw, 12.53px); }
  .virtual-office .fv__feature:nth-child(2) .fv__feature-num  { font-size: clamp(13.25px, 3.681vw, 16.19px); }
  .virtual-office .fv__feature:nth-child(3) .fv__feature-text { font-size: clamp(10.25px, 2.847vw, 12.53px); }
  .virtual-office .fv__feature:nth-child(3) .fv__feature-num  { font-size: clamp(13.25px, 3.681vw, 16.19px); }
  .virtual-office .fv__feature:nth-child(1) .fv__feature-icon { width: clamp(44px, 12.222vw, 53.78px); }
  .virtual-office .fv__feature:nth-child(2) .fv__feature-icon { width: clamp(54px, 15vw, 66px); }
  .virtual-office .fv__feature:nth-child(3) .fv__feature-icon { width: clamp(47px, 13.056vw, 57.44px); }

  /* お問い合わせCTAのメールアイコン：icon-contact.svgは横長（26.1×18.1）のpreserveAspectRatio="none"
     素材のため、これまでの正方形36×36指定だと縦に引き伸ばされていた。widthのみ指定しheight:autoで
     本来の比率のまま縮小する（Figma実測に近い26×18相当）。 */
  .virtual-office .fv__cta .button--contact .button__icon { width: 26px; height: auto; }

  /* FV背景写真：新画像（fv-visual-sp.webp）はアーチ形状・余白を画像内に内包した完成素材のため、
     クロップ／不透明度調整のCSSは不要（そのままの見た目で使用）。
     表示位置のみ、現在位置（top:116px）から合計20px下げる（前回+50px→今回-30pxの結果）。
     widthはcalc(99% - 16px)とし、上記の.fv__innerの実横幅が16px広がった分を差し引いて、
     写真の絶対サイズ（拡大縮小なし）を維持する。 */
  .virtual-office .fv__visual {
    width: calc(99% - 16px);
    top: 136px; /* 116px + 50px - 30px */
  }
  /* 画像外周のリング状の帯に、圧縮由来と見られる明るい帯（白フチ状）が出るため、
     画像ファイルは変更せず、ページ背景色（--vo-cream）へなだらかにフェードする
     放射状グラデーションを画像の上に重ねてなじませる。写真中心部・下部の家具等の
     視認性には影響しない範囲（外周のみ）に留めている。 */
  .virtual-office .fv__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 58% 48%, transparent 62%, var(--vo-cream) 94%);
    pointer-events: none;
  }

  /* 「こんなお悩み、ありませんか？」見出し：全体バランスを見て1段階小さく（20px→18px）。
     text-align/color/font-weight/line-height/margin-bottomはbaseのまま変更しない。 */
  .virtual-office .solution__title { font-size: 18px; }

  /* Solutionセクションの天地余白のみ+20px（左右16pxは変更しない）。
     見出し・吹き出し・イラスト自体のサイズ/位置はbaseのまま。 */
  .virtual-office .solution__inner { padding-top: 68px; padding-bottom: 48px; }

  /* =====================================================================
     Solve（船橋が解決します／4メリット）SP実装（Figma SP_Solution / node 2012:482実測）
     PC版（min-width:768px側）のHTML・クラスをそのまま再利用し、SP用の見た目のみ
     このブロック内で新規に定義する（PC側の既存ルールは一切変更しない）。
     ===================================================================== */
  /* 背景（#ffeee5）をFVと同じ手法でviewport端まで拡張する（WordPress版：width:100vw方式。
     理由はFVブロック冒頭のコメント参照）。中のコンテンツは.solve__innerのpaddingで余白を確保する。 */
  .virtual-office .solve { width: 100vw; margin-left: calc(50% - 50vw); }

  .virtual-office .solve__inner {
    padding: 49px 20px 64px;
    text-align: center;
  }

  /* 前セクション（こんなお悩み、白背景）の下端中央から突き出す白い三角形（Figma node 9:124、約27×27）。
     PC版と同じ「前セクション側の疑似要素として実装」技法をSPサイズで再現。 */
  .virtual-office .solution::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: -1px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 13.5px solid transparent;
    border-right: 13.5px solid transparent;
    border-top: 20px solid var(--vo-white); /* 27px×3/4。top位置(flat edge)は変えず、先端側だけ縮める */
  }

  /* メイン見出し：「ベストエフォートオフィス船橋が／解決します！」でFigmaと同じ位置に
     自然改行させるため、max-width:320pxで実測検証済み（390px/360pxいずれも同じ幅に
     クランプされるため、両幅で改行位置が揃う）。 */
  .virtual-office .solve__heading {
    max-width: 320px;
    margin: 0 auto;
    color: var(--vo-orange);
    font-weight: 700;
    line-height: 1.2;
    font-size: 21px;
  }

  /* サブ見出し：左右の斜線はPC版と同じ疑似要素技法をSPサイズで再現 */
  .virtual-office .solve__lead {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 33px; /* 50px×2/3。タイトルと本文ブロックの間隔のみ縮める */
    color: var(--vo-gray);
    font-weight: 700;
    font-size: 16px;
  }
  .virtual-office .solve__lead::before,
  .virtual-office .solve__lead::after {
    content: "";
    width: 2px;
    height: 20px;
    background: var(--vo-gray);
  }
  .virtual-office .solve__lead::before { transform: rotate(-26.57deg); }
  .virtual-office .solve__lead::after  { transform: rotate(26.57deg); }

  /* 説明文：Figmaと同じ「…船橋なら、／ビジネスに…備えながら、／コストを…できます。」の
     3行改行になるよう、max-width:215pxで実測検証済み（390px/360pxとも同じ改行位置）。 */
  .virtual-office .solve__desc {
    max-width: 215px;
    margin: 16px auto 0;
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.7;
    font-size: 12px;
  }

  /* 4枚のカードを縦積み（Figma実測：カード間隔11px） */
  .virtual-office .solve__grid {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 16px;
  }

  /* カード：左にイラスト・右に見出し＋本文の横並び。大枠はgridで、
     イラストをcolumn1（1〜2行目にrow-span）、見出し/本文をcolumn2の1行目/2行目に配置。
     幅は.solve__innerの左右paddingを前提に100%（=カード幅350px @390px）とし、
     767px近辺までの間口対策としてmax-width:350pxで頭打ちにする。 */
  .virtual-office .solve__card {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 110px 1fr;
    column-gap: 8px;
    row-gap: 6px;
    align-items: center;
    padding: 14px 12px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 5px 14px 7.8px 1px rgba(96, 60, 42, .1);
    text-align: left;
  }

  /* イラスト：カードごとに実サイズが異なる（Figma実測：101/101/110/97px）ため個別指定。
     column1の枠内（最大110px）で中央寄せする。 */
  .virtual-office .solve__visual {
    grid-column: 1;
    grid-row: 1 / 3;
    justify-self: center;
    height: auto;
    display: block;
  }
  .virtual-office .solve__card:nth-child(1) .solve__visual { width: 101px; }
  .virtual-office .solve__card:nth-child(2) .solve__visual { width: 101px; }
  .virtual-office .solve__card:nth-child(3) .solve__visual { width: 110px; }
  .virtual-office .solve__card:nth-child(4) .solve__visual { width: 97px; }

  .virtual-office .solve__title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.3;
    font-size: 13px; /* 390px時にテキスト列(208px)内で1行に収まる実測値 */
    white-space: normal; /* 360px等の狭幅でも折り返して収まるようにする（はみ出し防止） */
    transform: translateY(2px); /* タイトルのみ2px下へ（グリッドの行位置・イラストは不変） */
  }
  .virtual-office .solve__title .solve__accent { color: var(--vo-orange); }

  .virtual-office .solve__text {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.5;
    font-size: 10.5px; /* 390px時にテキスト列(208px)内でFigmaどおり2行に収まる実測値 */
    white-space: normal;
    transform: translateY(-2px); /* 本文のみ2px上へ（タイトルとの間隔を合計4px詰める） */
  }
  /* 本文中の<br class="solve__br-pc">はPC版の強制改行専用（PC側はwhite-space:nowrapのため
     このbrで2行に分割している）。SPでは非表示にし、カード幅に応じた自然な折り返しに任せる。 */
  .virtual-office .solve__br-pc { display: none; }

  /* =====================================================================
     Reasons（選ばれる5つの理由）SP実装（Figma SP_Reasons / node 2013:8実測）
     PC版（min-width:768px側）のHTML・クラスをそのまま再利用するが、PC側のルールは
     すべてmin-width:768px内に閉じておりSPには一切継承されないため、ここではPC値の
     差分ではなく「表示に必要な全プロパティ」を自己完結でSP用に指定する。
     ===================================================================== */
  /* 背景をFV/Solveと同じ手法でviewport端まで拡張（WordPress版：width:100vw方式）。
     .reasonsの背景は白でbody既定と同色のため見た目の変化はほぼないが、
     他セクションとの整合のため同じ手法を適用しておく。 */
  .virtual-office .reasons { width: 100vw; margin-left: calc(50% - 50vw); }

  .virtual-office .reasons__inner {
    padding: 42px 20px 20px;
  }

  /* ---- 上部タイトル ---- */
  .virtual-office .reasons__header { text-align: center; }
  .virtual-office .reasons__eyebrow {
    display: inline-block;
    padding: 4px 10px;
    border-top: 1px solid var(--vo-orange-light);
    border-bottom: 1px solid var(--vo-orange-light);
    color: var(--vo-orange-light);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .08em;
    font-size: 11px;
  }
  .virtual-office .reasons__heading {
    margin-top: 20px;
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.3;
    font-size: 14px;
  }
  .virtual-office .reasons__count {
    margin-top: 16px; /* 下側（説明文までの余白16px）に合わせ、上下のバランスを揃える */
    color: var(--vo-gray);
    font-weight: 500;
    line-height: 1;
    font-size: 22px;
  }
  .virtual-office .reasons__count-num {
    color: var(--vo-orange);
    font-weight: 500;
    font-size: 36px;
  }
  .virtual-office .reasons__lead {
    max-width: 250px; /* 左右の余白を現状(25px/辺)の約2倍(50px/辺)に拡大 */
    margin: 16px auto 0;
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.6;
    font-size: 11px; /* 12px→1段階小さく */
  }
  /* PC版は.reasons__leadにwhite-space:nowrapを指定していないためbrの有無で改行が変わり得る。
     SPだけ強制改行を外して自然な折り返しにするため、既存のbrをPC専用にしてSPで非表示にする。 */
  .virtual-office .reasons__br-pc { display: none; }

  /* ---- 理由リスト（縦積み） ---- */
  .virtual-office .reasons__list {
    list-style: none;
    padding: 0;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 56px;
  }

  /* 各カード：写真はカード上端＋片側の端に沿わせ、テキストは中央寄せ。
     大きな番号（01〜05）はカード背景より背面・カード枠の外にも一部はみ出すため
     overflow:visibleを維持する。 */
  .virtual-office .reasons__item {
    position: relative;
    display: block;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    padding: 0 0 30px;
    background: var(--vo-reason-card);
    border-radius: 16px;
  }
  /* Reason03（お客様に好評！バッジ＋下段3カードを含むワイドカード）専用。
     .reasons__mail-listを通常フローから外し絶対配置にしたため（詳細は下記
     .reasons__mail-listのコメント参照）、カード自身の高さがフロー計算に
     mail-listの高さを含まなくなる。min-heightで「mail-listのtop位置＋
     mail-list自身の高さ268px＋下端余白30px（.reasons__itemのpadding-bottomと
     同じ意図）」を明示的に確保し、カードの高さ・次カードとの間隔を維持する。 */
  .virtual-office .reasons__item--wide {
    min-height: 675.63px;
  }

  /* 大きな番号：カード上部の写真がない側の隙間に見せる（PC版と同じ左/右の出し分けを流用） */
  .virtual-office .reasons__number {
    position: absolute;
    top: -6px;
    z-index: 0;
    color: var(--vo-white);
    font-family: "Bahnschrift", "DIN Alternate", "DIN Condensed", "Arial Narrow", sans-serif;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .02em;
    font-size: 64px;
    pointer-events: none;
  }
  .virtual-office .reasons__item--text-left  > .reasons__number { left: 0; }
  .virtual-office .reasons__item--photo-left > .reasons__number { right: 0; }

  /* 写真＋本文：縦積みに組み替え、写真の左右位置だけカードごとに出し分ける */
  .virtual-office .reasons__row {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 0;
  }
  .virtual-office .reasons__item--text-left  > .reasons__row { align-items: flex-end; }
  .virtual-office .reasons__item--photo-left > .reasons__row { align-items: flex-start; }

  .virtual-office .reasons__media { flex: 0 0 auto; width: 263px; max-width: 75%; }
  .virtual-office .reasons__photo {
    display: block;
    width: 100%;
    aspect-ratio: 263 / 148;
    object-fit: cover;
    border-radius: 16px;
  }
  /* SP用トリミング基準（PC側のobject-positionは変更せず、SP専用に個別指定） */
  .virtual-office .reasons__photo--address { object-position: left center; }
  .virtual-office .reasons__photo--access  { object-position: center center; }
  .virtual-office .reasons__photo--mail     { object-position: center center; }
  .virtual-office .reasons__photo--meeting  { object-position: 60% center; }
  .virtual-office .reasons__photo--event    { object-position: center center; }

  .virtual-office .reasons__body { flex: 1 1 auto; min-width: 0; width: 100%; padding: 0 28px; text-align: center; }
  .virtual-office .reasons__label {
    margin-top: 18px;
    color: var(--vo-orange);
    font-weight: 700;
    line-height: 1.2;
    font-size: 13px;
  }
  .virtual-office .reasons__title {
    margin-top: 8px;
    color: var(--vo-ink);
    font-weight: 700;
    line-height: 1.4;
    font-size: 17px;
  }
  .virtual-office .reasons__text {
    margin-top: 12px;
    width: 100%;
    padding: 0 14px; /* .reasons__body側の28pxに14pxを追加し、本文だけ合計42px（現状28pxの約1.5倍）に。
                         ラベル・タイトル・タグ等はbodyの28pxのまま変更しない */
    color: var(--vo-gray);
    font-weight: 700;
    text-align: left; /* 段落全体を左揃えに（ラベル・タイトルは.reasons__body側のcenterのまま） */
    line-height: 1.7;
    font-size: 11.5px; /* 12.5px→1段階小さく */
  }

  /* タグ（法人登記OK等）：固定幅をやめ内容に応じた幅で3つ横並びを維持。
     コンテナはカード幅いっぱいまで広げ（margin側では視覚位置は変わらないため）、
     実際の左右余白はタグ自体のpadding（＝表示グループの幅）で調整する。 */
  .virtual-office .reasons__tags {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 6px;
    margin: 12px -28px 0;
  }
  .virtual-office .reasons__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: auto;
    min-height: 26px;
    padding: 0 13px; /* 6px→13px。表示グループ幅を広げ、カード端との余白を約半分にする */
    border: 1.5px solid var(--vo-orange);
    border-radius: 90px;
    color: var(--vo-orange);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    font-size: 10.5px;
  }
  /* Reason05のタグ文字はReason01より短く、同じpaddingだと見た目のタググループ幅が
     狭く見えるため、paddingのみ広げて表示グループ全体の左右端をReason01と揃える。
     文字サイズ・高さ・gapは変更しない。 */
  .virtual-office .reasons__item:nth-child(5) .reasons__tag {
    padding: 0 22px; /* 15px→22px（Reason01と同じ+7pxの拡張幅） */
  }

  /* Reason04注意事項：本文と同じmax-width＋中央寄せブロックで左揃えにし、本文の左端と揃える */
  .virtual-office .reasons__notes {
    display: block;
    max-width: 300px;
    margin: 12px auto 0;
    text-align: left;
  }
  .virtual-office .reasons__note {
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.6;
    font-size: 11px;
  }

  /* 「お客様に好評！」バッジ：カード左側にはみ出す配置（PC版と同じz-index構造を流用）。
     本文（.reasons__text）にかからないよう下へずらしつつ、少し縮小する。
     配置の基準は.reasons__item--wide（position:relativeのカード本体。3枚のカード群を
     含む親要素）で、position:absoluteのleft/topはすべてこのカード基準の相対値のため、
     カード自体が幅に応じてmargin:0 auto で中央追従しても、バッジとカードの相対位置
     （実測：カード左端から-24.54px、カード上端から325.46px）は360〜767pxの全幅で
     完全に一定に保たれる。 */
  .virtual-office .reasons__badge {
    position: absolute;
    left: -18px;
    top: 332px; /* 337px→さらに5px上へ（342px→さらに5px上へ、362px→20px上へ、の続き） */
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--vo-orange);
    color: var(--vo-white);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    font-size: 10px; /* 9px→1px大きく */
    transform: rotate(-13.9deg);
  }

  /* Reason03 下段3カード：SPでは縦3段に組み替え */
  /* 【375px不具合の修正】従来は.reasons__row（写真＋説明文）の直後に通常フローで
     margin-top:26px配置していたため、説明文（.reasons__text）の折り返し行数が
     376〜378px付近で1行分だけ変化する影響をそのまま受けていた（360〜376pxでは
     説明文が長め＝1行多く折り返るため下段3カードが約7〜13px余分に下がり、
     オレンジ丸との相対距離が375px付近で最大に広がって見えていた）。
     テキストの折り返し行数から完全に独立させるため、丸（.reasons__badge）と
     同じ「.reasons__item--wide基準のposition:absolute」に変更。
     top値（377.63px）は説明文の折り返しが安定している390px以降の実測値をそのまま
     採用し、360〜767pxの全幅で共通の固定値とする。左右はleft:0/right:0とし、
     従来のwidth:100%（カード幅にぴったり合わせる）と同じ見え方を維持する。 */
  .virtual-office .reasons__mail-list {
    position: absolute;
    z-index: 2;
    list-style: none;
    padding: 0 20px; /* オレンジ背景(.reasons__item)の内側からカードまでの余白を左右20pxにする */
    display: flex;
    flex-direction: column;
    left: 0;
    right: 0;
    top: 377.63px;
    gap: 14px;
    box-sizing: border-box;
  }
  /* カード（外枠）：左右余白を広げるため309px→260pxに縮小（タイトルが1行を維持できる下限）。
     左にイラストがはみ出し、右にテキスト2行という横並びに組み替えるため、
     内部要素（head/note/illust）はすべて絶対配置で個別に位置決めする。 */
  .virtual-office .reasons__mail-card {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: unset;
    height: 80px;
    margin: 0; /* list側のpadding(20px)がそのままオレンジ背景内側からの余白になるよう、
                  カード自身には追加のmargin/width制限を持たせない */
    padding-top: 0;
    overflow: visible;
    background: var(--vo-white);
    border: 2px solid var(--vo-orange);
    border-radius: 15px;
    text-align: left;
  }
  .virtual-office .reasons__mail-head {
    position: absolute;
    z-index: 1;
    left: 112px;
    top: 14px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
  }
  .virtual-office .reasons__mail-icon { flex: none; width: 18px; height: auto; }
  .virtual-office .reasons__mail-title {
    color: var(--vo-orange);
    font-weight: 700;
    line-height: 1.3;
    white-space: normal;
    font-size: 14px;
  }
  .virtual-office .reasons__mail-title--line { color: var(--vo-green-line); }
  .virtual-office .reasons__mail-note {
    position: absolute;
    z-index: 1;
    left: 112px;
    right: 12px;
    top: 43px;
    margin: 0;
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.3;
    white-space: normal;
    text-align: left;
    font-size: 10px;
  }
  /* イラスト：PC版の中央寄せ(left:50%)配置を解除し、カード左端からはみ出す個別位置に上書き。
     見た目の占有率を揃える方針で、3枚それぞれ実寸に近いサイズをFigma実測から指定。 */
  .virtual-office .reasons__mail-illust {
    position: absolute;
    z-index: 0;
    right: auto;
    bottom: auto;
    transform: none;
    height: auto;
    max-width: none;
  }
  /* 実画像の縦横比（0.923/1.185/1.526）を維持したままwidthのみ個別指定（height:autoで比率を保持）。
     Figma実測（node 2009:202/208/213）のイラストボックスに寄せてサイズ・位置を調整。
     Figma側は写真を矩形にトリミングした比率のため実画像とは縦横比が異なり、完全一致はしない
     （画像差し替え・トリミングはせず、実画像全体を見せる方針を維持）。 */
  .virtual-office .reasons__mail-illust--1 { left: 15px; top: 0; width: 77.9px; } /* 右へ15px移動、サイズ95%（82px→77.9px） */
  .virtual-office .reasons__mail-illust--2 { left: 15px; top: 5px; width: 80px;  } /* 右へ15px・下へ5px移動、サイズ変更なし */
  .virtual-office .reasons__mail-illust--3 { left: 5px;  top: 5px; width: 102px; } /* さらに右へ5px移動（上下・サイズは変更なし） */
}

/* =====================================================================
   PC（min-width:768px）
   ===================================================================== */
@media (min-width: 768px) {

  /* Header（PC: ロゴは既存のまま。お問い合わせボタンのみ Figma実測 x976 y11 w327 h57 へ絶対配置）
     1440中央キャンバス右端から137px（＝x976..1303）に一致するよう配置 */
  .virtual-office .vo-header { position: relative; }
  .virtual-office .vo-header__inner { padding: 0 20px; min-height: 80px; }
  .virtual-office .vo-header__logo img { height: clamp(44px, 4.86vw, 70px); }
  .virtual-office .vo-header__contact.button--sm {
    position: absolute;
    top: 11px;
    right: max(16px, calc(50% - 583px));
    width: clamp(220px, 22.708vw, 327px);
    height: clamp(44px, 3.958vw, 57px);
    min-height: 0;
    padding: 0;
    font-size: clamp(13px, 1.389vw, 20px);
    border-radius: 80px;
    letter-spacing: .03em;
    z-index: 3;
  }
  .virtual-office .vo-header__contact.button--sm .button__icon {
    width: clamp(20px, 2.569vw, 37px); height: auto;
  }

  /* FV：左テキスト（通常フロー）＋右に写真ビジュアルを絶対配置（1440基準） */
  .virtual-office .fv__inner {
    max-width: 1440px;
    /* 上88 / 下74 / 左41（右は写真をブリードさせるため0） */
    padding: clamp(40px, 6.1vw, 88px) 0 clamp(32px, 5.1vw, 74px) clamp(20px, 2.85vw, 41px);
    /* セクション下端をお悩み開始(frame 962=inner基準882)に合わせ、写真は overflow:hidden で下端まで見せる */
    min-height: clamp(520px, 61.25vw, 882px);
  }
  .virtual-office .fv__content { min-width: 0; max-width: clamp(480px, 57.6vw, 830px); }

  /* 写真ビジュアル（PC: 右端へブリード。Figma可視域 x732..1440＝約49.2%）
     Figmaでは写真がヘッダー背面（y=-21）まで伸びるため、ヘッダー高(80px)分だけ上へブリード */
  .virtual-office .fv__visual {
    top: -80px;
    right: 0;
    width: clamp(300px, 49.2vw, 708px);
  }
  /* PCは料金・カードとも不透明白（写真は右側のみで背面に敷かないため） */
  .virtual-office .fv__price,
  .virtual-office .fv__feature { background: var(--vo-white); }

  /* 見出し（PC: 通常65 / アクセント90 / 2行目88。各行は改行させない=Figma nowrap）
     1行目 x41 / 2行目 x60（＋19px） */
  .virtual-office .fv__title { font-size: clamp(28px, 4.51vw, 65px); line-height: 1.4; text-align: left; }
  .virtual-office .fv__title-line { white-space: nowrap; }
  .virtual-office .fv__title-line:last-child {
    font-size: clamp(37px, 6.11vw, 88px);
    margin-left: clamp(8px, 1.32vw, 19px); /* x41→x60 */
  }
  .virtual-office .fv__accent { font-size: clamp(38px, 6.25vw, 90px); }

  /* 価格ボックス（PC: 箱 x65 y435 w694 h175。内部要素をFigma実測位置へ絶対配置）
     月額 x103y499 / 5,280 x210y435 / 円 x539y510 / （税込）x588y545 / ～ x683y536 */
  .virtual-office .fv__price {
    display: block;
    position: relative;
    width: clamp(360px, 48.194vw, 694px);
    aspect-ratio: 694 / 175;
    margin-top: clamp(8px, 1.25vw, 18px);    /* 価格ボックス上端を y435 に合わせる */
    margin-left: clamp(10px, 1.667vw, 24px); /* x41→x65 */
    padding: 0;
  }
  .virtual-office .fv__price-label,
  .virtual-office .fv__price-num,
  .virtual-office .fv__price-unit,
  .virtual-office .fv__price-tax,
  .virtual-office .fv__price-wave {
    position: absolute;
    margin: 0;
    line-height: 1;
    white-space: nowrap;
  }
  .virtual-office .fv__price-label { left: 5.48%;  top: 36.6%; font-size: clamp(20px, 3.125vw, 45px); }
  /* 5,280: FigmaのDIN 1451系に近いDINフォント（Win:Bahnschrift / Mac:DIN Alternate）。字幅をFigma実測(≈325px)へ letter-spacing で調整 */
  .virtual-office .fv__price-num {
    left: 20.89%; top: 14%; /* さらに下げて円と下端を自然に揃える */
    font-size: clamp(64px, 10.417vw, 150px);
    font-family: "Bahnschrift", "DIN Alternate", "DIN Condensed", "Arial Narrow", sans-serif;
    font-weight: 400; /* Figmaに寄せてウェイトをさらに下げる */
    letter-spacing: -0.05em;
  }
  .virtual-office .fv__price-unit  { left: 68.30%; top: 50%;   font-size: clamp(28px, 4.167vw, 60px); }
  .virtual-office .fv__price-tax   { left: 75.36%; top: 67%;   font-size: clamp(12px, 1.736vw, 25px); color: var(--vo-orange); }
  .virtual-office .fv__price-wave  { left: 89.05%; top: 62%;   font-size: clamp(20px, 2.778vw, 40px); color: var(--vo-orange); }

  /* 特徴カード（PC: 行 x46 幅782 gap11 / カード 251/251/258 × 高118 / 内部を実測位置へ絶対配置）
     1枚目 icon x63y675 69 / text x144y674 ・ 2枚目 icon x322y670 79 / text x400y676
     3枚目 icon x573y664 94 / text x662y676 */
  .virtual-office .fv__features {
    justify-content: flex-start;
    gap: clamp(6px, .764vw, 11px);
    margin-top: clamp(16px, 2.847vw, 41px); /* カード上端を y651 に合わせる */
    margin-left: clamp(2px, .347vw, 5px); /* x41→x46 */
    width: clamp(420px, 54.306vw, 782px);
  }
  .virtual-office .fv__feature {
    position: relative;
    display: block;
    flex: 251 0 0;
    min-height: 0;
    height: clamp(78px, 8.194vw, 118px);
    padding: 0;
  }
  .virtual-office .fv__feature:nth-child(3) { flex: 258 0 0; }
  .virtual-office .fv__feature-icon { position: absolute; height: auto; }
  /* テキストは各カードの「テキスト中心点」で中央寄せ（Figmaの-translate-x-1/2に対応） */
  .virtual-office .fv__feature-text {
    position: absolute;
    transform: translateX(-50%);
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    font-size: clamp(15px, 2.083vw, 30px); /* 1枚目: 30 */
  }
  .virtual-office .fv__feature-num { font-size: clamp(16px, 2.222vw, 32px); } /* 強調数字 32 */
  /* 2枚目: 1行目28 / 2行目（％以上）24 / 3枚目: 全体25 */
  .virtual-office .fv__feature:nth-child(2) .fv__feature-line:first-child { font-size: clamp(14px, 1.944vw, 28px); }
  .virtual-office .fv__feature:nth-child(2) .fv__feature-line:last-child  { font-size: clamp(12px, 1.667vw, 24px); }
  .virtual-office .fv__feature:nth-child(3) .fv__feature-text { font-size: clamp(13px, 1.736vw, 25px); }

  .virtual-office .fv__feature:nth-child(1) .fv__feature-icon { left: 6.77%; top: 20.3%; }
  .virtual-office .fv__feature:nth-child(1) .fv__feature-text { left: 63.75%; top: 19.5%; }
  .virtual-office .fv__feature:nth-child(2) .fv__feature-icon { left: 5.58%; top: 16.1%; }
  .virtual-office .fv__feature:nth-child(2) .fv__feature-text { left: 65.54%; top: 21.2%; }
  .virtual-office .fv__feature:nth-child(3) .fv__feature-icon { left: 1.16%; top: 11.0%; }
  .virtual-office .fv__feature:nth-child(3) .fv__feature-text { left: 65.12%; top: 21.2%; }
  /* 真ん中（契約継続率）イラストのみ5px下へ。サイズ・横位置は既存のwidth/leftのまま、
     translateYで縦方向のみ相対移動する。 */
  .virtual-office .fv__feature:nth-child(2) .fv__feature-icon { transform: translateY(5px); }
  /* 右（商談スペース）イラストのみ90%に縮小。scale()はデフォルトでtransform-origin:50% 50%
     （要素自身の中心）を基準に拡縮するため、left/topは変更せずに中心位置を保ったまま縮小できる。 */
  .virtual-office .fv__feature:nth-child(3) .fv__feature-icon { transform: scale(.9); }

  /* CTA（PC: 横並び r80 / 文字22 / アイコン54。2つ並べた全体幅を料金ボックス(≈694px)に揃える） */
  .virtual-office .fv__cta {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: clamp(8px, .9vw, 13px);
    margin-top: clamp(20px, 3.54vw, 51px);
    /* 3枚の特徴カード列（x46..828 幅782）と左右端を揃える */
    width: clamp(420px, 54.306vw, 782px);
    margin-left: clamp(2px, .347vw, 5px); /* x41→x46（カード列と同じ） */
  }
  .virtual-office .fv__cta .button {
    width: auto;
    max-width: none;
    margin: 0;
    flex: 1 1 0;
    min-width: 0;
    min-height: clamp(48px, 4.72vw, 68px);
    padding: 0 clamp(10px, 1.4vw, 20px);
    font-size: clamp(15px, 1.53vw, 22px);
    gap: clamp(6px, 1vw, 14px);
  }
  .virtual-office .fv__cta .button__icon { width: clamp(28px, 3.75vw, 54px); height: auto; }
  /* LINE CTA視覚補正：緑ロゴが大きく詰まって見えるため、アイコン縮小＋文字をわずかに小さく＋
     アイコン間隔を詰めて右余白を確保し、テキストを中央寄りに見せる（お問い合わせCTAと大きさを揃える） */
  .virtual-office .fv__cta .button--line { font-size: clamp(14px, 1.46vw, 21px); gap: clamp(6px, .83vw, 12px); }
  /* アイコンは右・テキストは左へ（中央寄りに。レイアウト・ボタン幅は不変） */
  .virtual-office .fv__cta .button--line span { position: relative; left: -2px; }
  /* アイコンを少し左へ（relativeでテキスト位置は不変。左余白の見え方を右余白に揃える） */
  .virtual-office .fv__cta .button--line .button__icon {
    width: clamp(30px, 3.47vw, 50px); /* 44→50 少し大きく（カンプ寄り） */
    position: relative;
    left: clamp(-10px, -0.69vw, -6px);
    transform: translateX(4px); /* 右へ（前回1px+今回3px） */
  }
  /* お問い合わせCTA：メールアイコンを少し小さく（左右marginで占有幅を保ちテキスト位置は不変） */
  .virtual-office .fv__cta .button--contact .button__icon {
    width: clamp(20px, 2.64vw, 38px); /* 44→38 少し小さく（文字高さとバランス） */
    margin: 0 clamp(3px, .56vw, 8px);
  }

  /* Solution：見出しh2＋横長の完成画像（見出し除外後の比率） */
  .virtual-office .solution__inner {
    max-width: 1440px; /* 画像を画面幅いっぱい寄りに */
    padding: clamp(48px, 7vw, 100px) clamp(20px, 2.78vw, 40px) 40px;
  }
  .virtual-office .solution__title {
    font-size: clamp(24px, 2.78vw, 40px);   /* PC: 40px */
    margin-bottom: clamp(16px, 1.7vw, 24px);
  }
  .virtual-office .solution__figure img {
    aspect-ratio: 2880 / 1520;
    max-width: 1360px; /* 1080→1360（左右余白40px程度を残しつつ拡大） */
  }

  /* ===== Solution（船橋が解決します／4メリット）1440基準・vwで実寸に一致 ===== */
  .virtual-office .solve__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(64px, 10.069vw, 145px) clamp(20px, 2.78vw, 40px) clamp(60px, 9.583vw, 138px);
    text-align: center;
  }
  /* お悩みエリア（白）の下端から生える吹き出しのしっぽ＝下向き三角。
     Solution側ではなくお悩み側の疑似要素として実装し、前セクションと一体化させる。 */
  .virtual-office .solution::after {
    content: "";
    position: absolute;
    top: 100%;              /* 白背景の下端に密着 */
    left: 50%;
    margin-top: -1px;       /* サブピクセルの隙間を防ぐため白へ1px食い込ませる */
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: clamp(20px, 2.361vw, 34px) solid transparent;
    border-right: clamp(20px, 2.361vw, 34px) solid transparent;
    border-top: clamp(26px, 3.056vw, 44px) solid var(--vo-white); /* お悩みと同じ白 */
  }
  /* メイン見出し 46 / #ff732d */
  .virtual-office .solve__heading {
    color: var(--vo-orange);
    font-weight: 700;
    line-height: 1.2;
    font-size: clamp(28px, 3.194vw, 46px);
  }
  /* サブ見出し 30 / #4a4a4a ＋ 左右の斜線（＼ ／）はCSS疑似要素 */
  .virtual-office .solve__lead {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 1.667vw, 24px);
    margin-top: clamp(40px, 5.764vw, 83px);
    color: var(--vo-gray);
    font-weight: 700;
    font-size: clamp(20px, 2.083vw, 30px);
  }
  .virtual-office .solve__lead::before,
  .virtual-office .solve__lead::after {
    content: "";
    width: 3px;
    height: clamp(26px, 2.78vw, 40px);
    background: var(--vo-gray);
  }
  .virtual-office .solve__lead::before { transform: rotate(-26.57deg); }
  .virtual-office .solve__lead::after  { transform: rotate(26.57deg); }
  /* 説明文 20 / line-height35 / #4a4a4a */
  .virtual-office .solve__desc {
    margin-top: clamp(20px, 2.361vw, 34px);
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.75;
    font-size: clamp(14px, 1.389vw, 20px);
  }
  /* 4カード 2列×2段（各448×432 r20 影 / gap30） */
  .virtual-office .solve__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(16px, 2.083vw, 30px);
    width: clamp(600px, 64.306vw, 926px);
    margin: clamp(28px, 3.889vw, 56px) auto 0;
  }
  .virtual-office .solve__card {
    position: relative;
    aspect-ratio: 448 / 432;
    background: #fff;
    border-radius: clamp(14px, 1.389vw, 20px);
    box-shadow: 5px 14px 7.8px 1px rgba(96, 60, 42, .1);
  }
  /* カード内画像（カード上部・中央。サイズ/位置はカードごとに実測で異なる） */
  .virtual-office .solve__visual {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: auto;
    display: block;
  }
  .virtual-office .solve__card:nth-child(1) .solve__visual { top: 7.18%; width: 65.18%; }
  .virtual-office .solve__card:nth-child(2) .solve__visual { top: 7.18%; width: 71.65%; }
  .virtual-office .solve__card:nth-child(3) .solve__visual { top: 7.87%; width: 63.62%; }
  .virtual-office .solve__card:nth-child(4) .solve__visual { top: 5.56%; width: 70.98%; }
  /* カード内タイトル 30（部分オレンジ）/ 本文 20・line-height35 */
  .virtual-office .solve__title {
    position: absolute;
    left: 50%;
    top: 63.43%;
    transform: translateX(-50%);
    white-space: nowrap;
    margin: 0; /* h3の既定marginを打ち消し（reset対象外のため縦位置がずれていた） */
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.2; /* Figmaのタイトル行ボックス（約36px）に一致 */
    font-size: clamp(20px, 2.083vw, 30px);
  }
  .virtual-office .solve__title .solve__accent { color: var(--vo-orange); }
  .virtual-office .solve__text {
    position: absolute;
    left: 50%;
    top: 77.3%;
    transform: translateX(-50%);
    white-space: nowrap;
    text-align: center;
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.75;
    font-size: clamp(14px, 1.389vw, 20px);
  }
}

/* 中間幅の下限保険（狭いPC〜タブレット） */
@media (min-width: 768px) and (max-width: 900px) {
  .virtual-office .fv__inner { gap: 24px; }
}

/* =====================================================================
   Reasons（選ばれる5つの理由）
   ※今回はPC版（1440px基準）のみ実装。SP版レイアウトは後工程。
   数値はFigma PC版（node 2012:470・幅1440）の実測。vw+px上限で1440に一致。
   ベース（<768px）はセクション背景のみ。詳細は min-width:768px で展開。
   ===================================================================== */
.virtual-office .reasons { position: relative; background: var(--vo-white); }

@media (min-width: 768px) {
  .virtual-office .reasons__inner {
    max-width: 1245px;   /* 左右padding20を含めコンテンツ=カード幅1205px。中央=720pxで見出し類と一致 */
    margin: 0 auto;
    padding: clamp(48px, 5.625vw, 81px) clamp(16px, 1.5vw, 20px) clamp(80px, 12vw, 173px);
  }

  /* ---- 上部タイトル ---- */
  .virtual-office .reasons__header { text-align: center; }
  /* WHY CHOOSE US：上下罫線付き（Figma 幅162 / #ff8a4f / Medium 20） */
  .virtual-office .reasons__eyebrow {
    display: inline-block;
    min-width: 162px;
    padding: clamp(4px, .55vw, 8px) 12px;
    border-top: 1px solid var(--vo-orange-light);
    border-bottom: 1px solid var(--vo-orange-light);
    color: var(--vo-orange-light);
    font-weight: 500;
    font-size: clamp(14px, 1.389vw, 20px);
    letter-spacing: .1em;
    line-height: 1.2;
  }
  /* ベストエフォートオフィス船橋が選ばれる（Bold 35 / #4a4a4a） */
  .virtual-office .reasons__heading {
    margin-top: clamp(14px, 1.6vw, 23px);
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.2;
    font-size: clamp(24px, 2.431vw, 35px);
  }
  /* 5つの理由（5=Medium100/#ff732d ・ つの理由=Medium60/#4a4a4a） */
  .virtual-office .reasons__count {
    margin-top: clamp(2px, .7vw, 10px);
    color: var(--vo-gray);
    font-weight: 500;
    line-height: 1;
    font-size: clamp(38px, 4.167vw, 60px);
  }
  .virtual-office .reasons__count-num {
    color: var(--vo-orange);
    font-weight: 500;
    font-size: clamp(64px, 6.944vw, 100px);
  }
  /* 導入文（Bold 20 / line-height 35 / #4a4a4a） */
  .virtual-office .reasons__lead {
    margin-top: clamp(24px, 3.5vw, 50px);
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.75;
    font-size: clamp(15px, 1.389vw, 20px);
  }

  /* ---- 理由リスト（縦積み） ---- */
  .virtual-office .reasons__list {
    list-style: none;
    padding: 0;
    margin-top: clamp(60px, 9.3vw, 134px);
    display: flex;
    flex-direction: column;
    gap: clamp(48px, 5.4vw, 78px); /* Figmaのカード間は60〜94pxで変動。平均的な78pxを採用 */
  }

  /* 各理由カード（1205×592 / r20 / #fdf6f1）。番号・バッジは絶対配置のため overflow は可視 */
  .virtual-office .reasons__item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: clamp(360px, 41.11vw, 592px);
    padding: clamp(24px, 2.8vw, 40px);
    background: var(--vo-reason-card);
    border-radius: clamp(14px, 1.389vw, 20px);
  }
  .virtual-office .reasons__item--wide {
    min-height: clamp(560px, 64.93vw, 935px);
    justify-content: flex-start;
    padding-top: clamp(24px, 2.9vw, 42px);
    padding-bottom: clamp(12px, 1.1vw, 16px);
    gap: 0; /* 上段と下段カードの間隔は mail-list の負マージンで制御（写真下に重ねる） */
  }

  /* 大きな番号（DIN・150px・白。数字の上端が背景カード上端付近に収まるよう配置） */
  .virtual-office .reasons__number {
    position: absolute;
    top: clamp(-10px, -0.7vw, 0px);
    z-index: 0;
    color: var(--vo-white);
    font-family: "Bahnschrift", "DIN Alternate", "DIN Condensed", "Arial Narrow", sans-serif;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .02em;
    font-size: clamp(90px, 10.417vw, 150px);
    pointer-events: none;
  }
  .virtual-office .reasons__item--text-left  > .reasons__number { left: clamp(3px, 0.55vw, 8px); }
  .virtual-office .reasons__item--photo-left > .reasons__number { right: clamp(3px, 0.55vw, 8px); }

  /* 写真＋テキストの1行 */
  .virtual-office .reasons__row {
    display: flex;
    align-items: center;
    gap: clamp(16px, 1.7vw, 25px);
    width: 100%;
  }
  .virtual-office .reasons__item--text-left  > .reasons__row { flex-direction: row-reverse; } /* 本文左・写真右 */
  .virtual-office .reasons__item--photo-left > .reasons__row { flex-direction: row; }          /* 写真左・本文右 */

  /* 写真（元画像を object-fit:cover。トリミングは各写真で object-position を個別指定） */
  .virtual-office .reasons__media { flex: 0 0 auto; width: clamp(300px, 37.36vw, 538px); }
  .virtual-office .reasons__photo {
    display: block;
    width: 100%;
    aspect-ratio: 538 / 512;
    object-fit: cover;
    border-radius: clamp(12px, 1.389vw, 20px);
  }
  /* PC版カンプに合わせた個別トリミング（Figma表示枠538×512の実測から算出） */
  .virtual-office .reasons__photo--address { object-position: left center; }   /* 看板ロゴを左に見せる */
  .virtual-office .reasons__photo--access  { object-position: center center; }
  .virtual-office .reasons__photo--mail     { object-position: center center; }
  .virtual-office .reasons__photo--meeting  { object-position: 69% center; }    /* 右寄りで人物を見せる */
  .virtual-office .reasons__photo--event    { object-position: center center; }

  /* テキスト側 */
  .virtual-office .reasons__body { flex: 1 1 auto; min-width: 0; text-align: center; }
  .virtual-office .reasons__label {
    color: var(--vo-orange);
    font-weight: 700;
    line-height: 1.2;
    font-size: clamp(18px, 1.806vw, 26px);
  }
  .virtual-office .reasons__title {
    margin-top: clamp(18px, 2.6vw, 38px);
    color: var(--vo-ink);
    font-weight: 700;
    line-height: 1.5;
    font-size: clamp(24px, 2.431vw, 35px);
  }
  .virtual-office .reasons__text {
    margin-top: clamp(12px, 1.4vw, 20px);
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.95; /* Figma 本文18px / line-height35px ≒ 1.94 */
    font-size: clamp(14px, 1.25vw, 18px);
    /* Figmaはハード改行なしのソフトラップ。各理由のテキストボックス幅に合わせて中央寄せの左揃えブロックに */
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    max-width: clamp(300px, 29.2vw, 420px);
  }
  /* 各理由の本文ボックス幅（Figma実測：R1=420 / R2=324 / R3=437 / R4=418 / R5=399） */
  .virtual-office .reasons__item:nth-child(1) .reasons__text { max-width: clamp(300px, 29.17vw, 420px); }
  .virtual-office .reasons__item:nth-child(2) .reasons__text { max-width: clamp(260px, 22.50vw, 324px); }
  .virtual-office .reasons__item:nth-child(3) .reasons__text { max-width: clamp(320px, 30.35vw, 437px); }
  .virtual-office .reasons__item:nth-child(4) .reasons__text { max-width: clamp(300px, 29.03vw, 418px); }
  .virtual-office .reasons__item:nth-child(5) .reasons__text { max-width: clamp(300px, 27.71vw, 399px); }

  /* ピル（透明背景・2px #ff732d 枠・r90 / 文字18 #ff732d）
     Figmaはピル幅を固定（168/168/197・gap5）。R01とR05でタグ群全体幅・左右端を一致させる */
  .virtual-office .reasons__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(4px, .35vw, 5px);
    margin-top: clamp(18px, 2.2vw, 32px);
  }
  .virtual-office .reasons__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-height: clamp(34px, 3.2vw, 46px);
    padding: 0 clamp(8px, 1vw, 14px);
    border: 2px solid var(--vo-orange);
    border-radius: 90px;
    color: var(--vo-orange);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    font-size: clamp(13px, 1.25vw, 18px);
  }
  /* 固定幅（Figma実測：1・2番目=168px / 3番目=197px）。R01・R05のみタグを持つ */
  .virtual-office .reasons__tag:nth-child(1),
  .virtual-office .reasons__tag:nth-child(2) { width: clamp(118px, 11.667vw, 168px); }
  .virtual-office .reasons__tag:nth-child(3) { width: clamp(140px, 13.681vw, 197px); }

  /* Reason04 注意書き（本文と同じ左端に揃える＝本文と同じ最大幅の中央寄せブロックで左揃え） */
  .virtual-office .reasons__notes {
    display: block;
    max-width: clamp(300px, 29.03vw, 418px); /* Reason04本文と同一幅 → 左端が一致 */
    margin: clamp(16px, 2vw, 29px) auto 0;
    text-align: left;
  }
  .virtual-office .reasons__note {
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.8;
    font-size: clamp(12px, 1.042vw, 15px);
  }

  /* 「お客様に好評！」バッジ（円 #ff732d 180 / 回転 -13.9° / 白32 2行）
     z-index:1 で背景カードより前・下段3カード（z-index:2）より後ろに配置し、
     カードの一部がバッジ右側にかぶって見えるようにする */
  .virtual-office .reasons__badge {
    position: absolute;
    left: clamp(-78px, -5.417vw, -40px);
    top: clamp(270px, 29vw, 418px); /* 下段カードのぶんだけ上へ。文字が3カード上端で切れないように */
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(120px, 12.5vw, 180px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--vo-orange);
    color: var(--vo-white);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    font-size: clamp(20px, 2.222vw, 32px);
    transform: rotate(-13.9deg);
  }

  /* Reason03 下段の3カード（Figma354×354より一回り大きく、写真の下端に上部を重ねる）
     z-index:2 でバッジ・写真より前面に。負マージンで上へ持ち上げ左右に広げる */
  .virtual-office .reasons__mail-list {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: clamp(12px, 1.11vw, 16px);
    /* 左右余白を揃える（Figma同様 左右inset≈56px）。中央寄せ */
    width: calc(100% - clamp(0px, 2.22vw, 32px));
    margin-inline: auto;
    margin-top: clamp(-9px, -0.5vw, -4px);        /* 写真へのかかり量を半減（約7px） */
  }
  .virtual-office .reasons__mail-card {
    position: relative;
    flex: 1 1 0;
    max-width: clamp(240px, 24.6vw, 356px);
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--vo-white);
    border: 2px solid var(--vo-orange);
    border-radius: 15px;
    padding-top: clamp(20px, 2.6vw, 38px);
    text-align: center;
  }
  .virtual-office .reasons__mail-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, .7vw, 10px);
  }
  .virtual-office .reasons__mail-icon { flex: none; width: clamp(38px, 3.96vw, 57px); height: auto; }
  .virtual-office .reasons__mail-title {
    color: var(--vo-orange);
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
    font-size: clamp(18px, 1.806vw, 26px);
  }
  .virtual-office .reasons__mail-title--line { color: var(--vo-green-line); }
  /* 黒文字：3カード共通で同じ高さに揃える（絶対配置・カード上端基準の単一値） */
  .virtual-office .reasons__mail-note {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 28.5%;
    margin: 0;
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
    font-size: clamp(12px, 1.25vw, 18px);
  }
  /* イラスト（余白調整済みの現行画像を基準に共通ルールで配置）
     - 共通: カード下部にbottom基準で下端を揃え、中央寄せ・共通の表示幅
     - 個別: 構図差（縦長/横広）のぶんだけ左右の width のみ微調整 */
  .virtual-office .reasons__mail-illust {
    position: absolute;
    left: 50%;
    bottom: clamp(-8px, -0.6vw, -4px); /* 内容下端（点線）をカード下部で揃える基準 */
    transform: translateX(-50%);
    width: 74%;         /* 中央(direct-pickup)を基準にした共通表示幅 */
    height: auto;
    max-width: none;    /* 共通の img{max-width:100%} を解除して%幅を有効化 */
    z-index: 0;
  }
  .virtual-office .reasons__mail-illust--1 { width: 67%; } /* 左(LINE通知)：変更なし */
  .virtual-office .reasons__mail-illust--2 { bottom: calc(clamp(-8px, -0.6vw, -4px) + 5px); } /* 中央(直接受取)：位置のみ5px上へ */
  .virtual-office .reasons__mail-illust--3 { width: 91.3%; bottom: calc(clamp(-8px, -0.6vw, -4px) + 15px); } /* 右(転送)：110%拡大（83%→91.3%）＋15px上へ */
}

/* =====================================================================
   Usage（USER'S VOICE／利用者の声）
   ※今回はPC版（1440px基準）のみ実装。SP版レイアウトは後工程。
   数値はFigma PC版（node 2012:471・幅1440）の実測。vw+px上限で1440に一致。
   人物画像8枚のみ既存webp（透過）。共通の高さで下端揃え配置。
   ===================================================================== */
.virtual-office .usage { position: relative; background: var(--vo-white); }

@media (min-width: 768px) {
  .virtual-office .usage__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(48px, 6.736vw, 97px) clamp(20px, 2.847vw, 41px) clamp(80px, 11.6vw, 167px);
  }

  /* ---- 上部タイトル ---- */
  .virtual-office .usage__header { text-align: center; }
  .virtual-office .usage__eyebrow {
    display: inline-block;
    min-width: 132px;
    padding: clamp(4px, .55vw, 8px) 12px;
    border-top: 1px solid var(--vo-orange-light);
    border-bottom: 1px solid var(--vo-orange-light);
    color: var(--vo-orange-light);
    font-weight: 500;
    font-size: clamp(14px, 1.389vw, 20px);
    letter-spacing: .1em;
    line-height: 1.2;
  }
  /* さまざまな業種の方に／ご利用いただいています（Bold 40 / 行高64 / #4a4a4a・一部#ff732d） */
  .virtual-office .usage__heading {
    margin-top: clamp(18px, 2.43vw, 35px);
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.6;
    font-size: clamp(26px, 2.778vw, 40px);
  }
  .virtual-office .usage__accent { color: var(--vo-orange); }
  /* 導入文（Bold 20 / 行高35 / #4a4a4a） */
  .virtual-office .usage__lead {
    margin-top: clamp(18px, 2.43vw, 35px);
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.75;
    font-size: clamp(15px, 1.389vw, 20px);
  }
  /* SP専用の改行（.usage__lead-br-sp）はPCでは非表示にし、PC版の折り返しに影響させない */
  .virtual-office .usage__lead-br-sp { display: none; }

  /* ---- カードグリッド（4列×2段） ---- */
  .virtual-office .usage__list {
    list-style: none;
    padding: 0;
    margin: clamp(32px, 3.542vw, 51px) 0 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: clamp(8px, .88vw, 13px);   /* Figmaのカード間 ≈12〜13px */
    row-gap: clamp(28px, 3.125vw, 45px);   /* 2段の間 ≈45px */
  }

  /* カード（330×442 / r15 / 白 / 2px #ff732d） */
  .virtual-office .usage__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: clamp(360px, 30.69vw, 442px);
    padding: clamp(12px, 1.18vw, 17px) clamp(10px, 1.11vw, 16px) clamp(12px, 1.25vw, 18px);
    background: var(--vo-white);
    border: 2px solid var(--vo-orange);
    border-radius: clamp(12px, 1.042vw, 15px);
  }

  /* 業種ラベル（ピル・#ff732d・白文字18・自動幅） */
  .virtual-office .usage__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(22px, 1.944vw, 28px);
    min-width: clamp(70px, 6.94vw, 100px);   /* 「士業」等の短い文字が細くなりすぎないように */
    padding: clamp(1px, .28vw, 4px) clamp(16px, 1.944vw, 28px); /* 左右の余白を拡大し帯端との近さを解消 */
    background: var(--vo-orange);
    border-radius: 90px;
    color: var(--vo-white);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    font-size: clamp(13px, 1.25vw, 18px);
  }
  /* 帯幅の個別調整：文字は justify-content:center により中央配置を維持したまま帯のみ拡幅 */
  .virtual-office .usage__list > .usage__card:nth-child(3) .usage__label { width: clamp(105px, 10.417vw, 150px); }   /* 士業：現状比 1.5倍（100px→150px） */
  .virtual-office .usage__list > .usage__card:nth-child(6) .usage__label { width: clamp(108px, 10.694vw, 154px); }   /* 不動産業：現状比 1.2倍（128px→154px） */

  /* 人物画像（共通の高さ＝下端揃え。透過webpを等倍で中央配置） */
  .virtual-office .usage__figure {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-top: clamp(4px, .42vw, 6px);
  }
  .virtual-office .usage__photo {
    display: block;
    width: auto;
    height: clamp(150px, 13.4vw, 193px);
  }

  /* 利用者コメント（Bold 16 / 行高25 / #4a4a4a・左揃え） */
  .virtual-office .usage__comment {
    margin-top: calc(clamp(6px, .7vw, 10px) - 15px); /* 8カード共通で本文を上へ（累計15px：前回5px＋今回10px） */
    width: clamp(200px, 17.22vw, 248px);
    text-align: left;
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.5625;
    font-size: clamp(13px, 1.111vw, 16px);
  }

  /* 点線（#ff732d・dot 1px / gap 6px 相当）＝下端寄せ */
  .virtual-office .usage__divider {
    margin-top: auto;
    width: clamp(220px, 19.79vw, 285px);
    height: 2px;
    background-image: radial-gradient(circle, var(--vo-orange) 1px, transparent 1.3px);
    background-size: 7px 2px;
    background-repeat: repeat-x;
    background-position: left center;
  }

  /* コメント要約見出し（Bold 18 / #ff732d / letter-spacing .9px） */
  .virtual-office .usage__summary {
    margin-top: clamp(8px, 1.11vw, 16px);
    color: var(--vo-orange);
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1.2;
    text-align: center;
    font-size: clamp(13px, 1.25vw, 18px);
  }
}

/* =====================================================================
   Usage（USER'S VOICE／利用者の声）SP実装（Figma SP_Usage / node 2013:9実測）
   PC版（min-width:768px側）のルールはすべてそちらに閉じておりSPには継承されないため、
   Reasons SP実装と同じ方針で「表示に必要な全プロパティ」をここで自己完結指定する。
   カードは固定289px高にはせず、内容（本文の行数）に応じた自然な高さ＋
   CSS Gridの行揃え（同じ行の2枚は自動で高さが揃う）で構成し、
   長文でも本文が切れない・360pxでも崩れないことを優先した。
   ===================================================================== */
@media (max-width: 767px) {
  /* 背景をFV/Solve/Reasonsと同じ手法でviewport端まで拡張（WordPress版：width:100vw方式）。
     .usageの背景は白でbody既定と同色のため見た目の変化はほぼないが、他セクションとの整合のため適用。 */
  .virtual-office .usage { width: 100vw; margin-left: calc(50% - 50vw); }

  .virtual-office .usage__inner {
    padding: 20px 20px 32px;
  }

  /* ---- 上部タイトル ---- */
  .virtual-office .usage__header { text-align: center; }

  .virtual-office .usage__eyebrow {
    display: inline-block;
    padding: 4px 10px;
    border-top: 1px solid var(--vo-orange-light);
    border-bottom: 1px solid var(--vo-orange-light);
    color: var(--vo-orange-light);
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 1.2;
    font-size: 11px;
  }

  .virtual-office .usage__heading {
    margin-top: 20px;
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.6;
    font-size: 19px;
  }
  .virtual-office .usage__accent { color: var(--vo-orange); }

  .virtual-office .usage__lead {
    max-width: 300px;
    margin: 15px auto 0;
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.5;
    font-size: 12px; /* 13px→12px：指定改行位置（…いただいている／皆さまの声を…）で2行に収めるための微調整 */
  }

  /* ---- カードグリッド（2列×4段） ----
     コンテナ幅（.usage__inner の左右padding 20px を除いた幅）に対して
     minmax(0,1fr) の2列で分割するため、390pxでは約171px、360pxでは約156.5pxへ
     自然に縮小し、固定pxにしないことで横スクロールを防ぐ。 */
  .virtual-office .usage__list {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 7px;
  }

  /* カード：白背景／オレンジ2px枠／角丸15px。高さは固定せず内容に応じて可変。
     Gridの既定挙動（align-items:stretch）により同じ行の2枚は自動で高さが揃う。 */
  .virtual-office .usage__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 9px 8px 10px;
    background: var(--vo-white);
    border: 2px solid var(--vo-orange);
    border-radius: 15px;
  }

  /* 業種ラベル（オレンジ長丸・白文字・自動幅・折り返し禁止） */
  .virtual-office .usage__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    background: var(--vo-orange);
    border-radius: 999px;
    color: var(--vo-white);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    font-size: 11px;
  }
  /* 「士業」「不動産業」のみ、文字数が少なく他カードよりラベルが細く見えるため
     左右paddingだけ広げてバランスを近づける（高さ・縦位置・文字サイズ・文字位置は不変）。 */
  .virtual-office .usage__list > .usage__card:nth-child(3) .usage__label,
  .virtual-office .usage__list > .usage__card:nth-child(6) .usage__label {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* 人物イラスト：8枚とも見た目サイズを統一（本文が最も長いカード＝7枚目ITエンジニアでも
     窮屈にならない高さ100pxを基準に採用）。.usage__figureの高さを100pxに固定し、
     img側はheight:100%（＝100px固定）・width:autoで元画像の縦横比を維持したまま
     表示サイズだけを揃える。高さが8枚とも同一になるため、イラスト上端・下端の位置、
     ひいては本文の開始位置（上端）も自動的に8枚で揃う。 */
  .virtual-office .usage__figure {
    margin-top: 6px;
    height: 100px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
  }
  .virtual-office .usage__photo {
    display: block;
    width: auto;
    height: 100%;
    max-width: 100%;
  }

  /* 利用者コメント：左右の余白をカード自身のpadding（8px）に加えてさらに8px広げ、
     合計約2倍（8px→16px相当）にする。行数はなるべく変えたくないため、
     幅が狭くなった分はfont-sizeを1px下げて（11px→10px）相殺している。 */
  .virtual-office .usage__comment {
    margin-top: 0;
    width: 100%;
    padding: 0 8px 10px;
    text-align: left;
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.6;
    font-size: 10px;
  }

  /* 点線：PC版と同じ「margin-top:autoで下寄せ＋dotted background」の単純な構成を踏襲。
     幅は8枚中もっとも長い下部コピー「Webサイトにも安心して掲載」の実測幅（約140px）に合わせ、
     中央配置（.usage__cardがalign-items:centerのため固定幅で自動的に中央寄せになる）。
     max-width:100%は360px側の安全弁（カード内側幅との比較では実際には効かない）。 */
  .virtual-office .usage__divider {
    margin-top: auto;
    width: 140px;
    max-width: 100%;
    height: 2px;
    background-image: radial-gradient(circle, var(--vo-orange) 1px, transparent 1.3px);
    background-size: 6px 2px;
    background-repeat: repeat-x;
    background-position: left center;
  }

  /* 下部コピー：360px幅でも1行に収まるよう10.5pxへ微調整（カンプ優先で縮小は最小限に留める） */
  .virtual-office .usage__summary {
    margin-top: 20px;
    margin-bottom: 10px;
    color: var(--vo-orange);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
    font-size: 10.5px;
  }
}

/* =====================================================================
   Plan（料金プラン）
   ※今回はPC版（1440px基準）のみ実装。SP版レイアウトは後工程。
   数値はFigma PC版（node 2012:472・幅1440）の実測。vw+px上限で1440に一致。
   料金の「5,280」はFV料金表示と同じDIN代替フォントスタックを流用（新規フォント導入なし）。
   ===================================================================== */
.virtual-office .plan { position: relative; background: var(--vo-white); }

@media (min-width: 768px) {
  .virtual-office .plan__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(60px, 7.431vw, 107px) 20px clamp(110px, 13.4vw, 193px);
  }

  /* ---- 上部見出し ---- */
  .virtual-office .plan__header { text-align: center; }
  .virtual-office .plan__eyebrow {
    display: inline-block;
    min-width: 75px;
    padding: clamp(4px, .55vw, 8px) 10px;
    border-top: 1px solid var(--vo-orange-light);
    border-bottom: 1px solid var(--vo-orange-light);
    color: var(--vo-orange-light);
    font-weight: 500;
    font-size: clamp(14px, 1.389vw, 20px);
    letter-spacing: .1em;
    line-height: 1.2;
    text-align: center;
  }
  /* シンプルで始めやすいプラン（Bold 40 / #4a4a4a） */
  .virtual-office .plan__heading {
    margin-top: clamp(28px, 3.229vw, 47px);
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.2;
    font-size: clamp(26px, 2.778vw, 40px);
  }
  /* 必要なサービスをシンプルな料金で（Bold 25 / 行高35 / #4a4a4a）＋左右斜線（CSS疑似要素・Solveと同技法） */
  .virtual-office .plan__lead {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 1.6vw, 23px);
    margin-top: clamp(36px, 3.958vw, 57px);
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.4;
    font-size: clamp(17px, 1.736vw, 25px);
  }
  .virtual-office .plan__lead::before,
  .virtual-office .plan__lead::after {
    content: "";
    width: 3px;
    height: clamp(28px, 2.986vw, 43px);
    background: var(--vo-gray);
  }
  .virtual-office .plan__lead::before { transform: rotate(-26.57deg); }
  .virtual-office .plan__lead::after  { transform: rotate(26.57deg); }

  /* ---- 料金カード（955×424 / r25 / #fff3ed / shadow） ---- */
  .virtual-office .plan__card {
    width: clamp(560px, 66.32vw, 955px);
    margin: clamp(28px, 2.778vw, 40px) auto 0;
    background: var(--vo-bubble);
    border-radius: clamp(16px, 1.736vw, 25px);
    box-shadow: 4px 4px 13.7px 4px rgba(0, 0, 0, .06);
    overflow: hidden; /* タイトル帯の角をカード自体の角丸でクリップ */
  }
  .virtual-office .plan__card-title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(48px, 4.722vw, 68px);
    background: var(--vo-orange);
    color: var(--vo-white);
    font-weight: 700;
    text-align: center;
    font-size: clamp(20px, 2.083vw, 30px);
  }
  .virtual-office .plan__card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(20px, 2.292vw, 33px) clamp(16px, 2.2vw, 32px) clamp(32px, 3.75vw, 54px);
  }

  /* 料金表示（FVの fv__price と同じ「絶対配置＋%座標」技法。DIN代替フォントも同じスタックを流用） */
  .virtual-office .plan__price {
    display: block;
    position: relative;
    width: clamp(300px, 38.68vw, 557px);
    aspect-ratio: 557 / 175;
    margin: 0 auto;
  }
  .virtual-office .plan__price-num,
  .virtual-office .plan__price-unit,
  .virtual-office .plan__price-tax,
  .virtual-office .plan__price-permonth {
    position: absolute;
    margin: 0;
    line-height: 1;
    white-space: nowrap;
    color: var(--vo-orange);
  }
  /* 5,280：FVの fv__price-num と同一のDIN代替フォントスタック（新規フォント導入なし） */
  .virtual-office .plan__price-num {
    left: 0%; top: calc(0% + 20px); /* 「円～」等と下端が揃って見えるよう20px下へ */
    font-size: clamp(66px, 10.417vw, 150px);
    font-family: "Bahnschrift", "DIN Alternate", "DIN Condensed", "Arial Narrow", sans-serif;
    font-weight: 400;
    letter-spacing: -.05em;
  }
  .virtual-office .plan__price-unit {
    left: 59.96%; top: calc(36% + 5px); /* 「5,280」と下端が揃って見えるよう5px下へ */
    font-weight: 700;
    font-size: clamp(31px, 4.861vw, 70px);
  }
  .virtual-office .plan__price-tax {
    left: 59.07%; top: 26.86%;
    font-weight: 700;
    font-size: clamp(9px, 1.389vw, 20px);
  }
  .virtual-office .plan__price-permonth {
    left: 87.07%; top: 48%;
    font-weight: 700;
    font-size: clamp(22px, 3.472vw, 50px);
  }

  /* サービス内容3項目（白背景・3px #ff8a4f 枠・r80のピル。1列横並び／flex） */
  .virtual-office .plan__features {
    list-style: none;
    padding: 0;
    margin: clamp(20px, 2.5vw, 36px) 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(4px, .417vw, 6px);
  }
  .virtual-office .plan__feature {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(40px, 4.028vw, 58px);
    padding: 0 clamp(26px, 3.056vw, 44px);
    background: var(--vo-white);
    border: 3px solid var(--vo-orange-light);
    border-radius: 80px;
    color: var(--vo-orange-light);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
    font-size: clamp(14px, 1.389vw, 20px);
  }

  /* ---- 注意書き（カード左端に揃えた2行） ---- */
  .virtual-office .plan__notes {
    list-style: none;
    padding: 0;
    width: clamp(560px, 66.32vw, 955px);
    margin: clamp(16px, 1.597vw, 23px) auto 0;
    padding-left: clamp(14px, 1.458vw, 21px);
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.25vw, 18px);
  }
  .virtual-office .plan__note {
    color: var(--vo-gray);
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    font-size: clamp(13px, 1.25vw, 18px);
  }

  /* ---- CTA導入見出し（左右斜線はSolveと同技法） ---- */
  .virtual-office .plan__cta-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 1.875vw, 27px);
    margin-top: clamp(70px, 7.639vw, 110px);
    color: var(--vo-orange);
    font-weight: 700;
    text-align: center;
    font-size: clamp(20px, 2.083vw, 30px);
  }
  .virtual-office .plan__cta-heading::before,
  .virtual-office .plan__cta-heading::after {
    content: "";
    width: 3px;
    height: clamp(20px, 2.014vw, 29px);
    background: var(--vo-orange);
  }
  .virtual-office .plan__cta-heading::before { transform: rotate(-26.57deg); }
  .virtual-office .plan__cta-heading::after  { transform: rotate(26.57deg); }

  /* ---- CTAボタン2個（FVの .button / .button--line / .button--contact を流用し、Plan用サイズのみ上書き） ---- */
  .virtual-office .plan__cta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(9px, .903vw, 13px);
    margin-top: clamp(32px, 3.194vw, 46px);
  }
  .virtual-office .plan__cta .plan__cta-button {
    width: clamp(260px, 26.94vw, 388px);
    min-height: clamp(48px, 4.722vw, 68px);
    padding: 0 clamp(12px, 1.25vw, 18px);
    gap: clamp(4px, .556vw, 8px);
    font-size: clamp(16px, 1.528vw, 22px);
  }
  .virtual-office .plan__cta .button--contact.plan__cta-button {
    font-size: clamp(18px, 1.736vw, 25px);
    letter-spacing: .03em;
  }
  .virtual-office .plan__cta .button--line.plan__cta-button .button__icon { width: clamp(38px, 3.75vw, 54px); height: auto; }
  .virtual-office .plan__cta .button--contact.plan__cta-button .button__icon { width: clamp(34px, 3.333vw, 48px); height: auto; }
}

/* =====================================================================
   Plan（PRICE）SP実装（Figma SP_Plan / node 2013:10実測）
   PC版（min-width:768px側）のルールはすべてそちらに閉じておりSPには継承されないため、
   Usage SP実装と同じ方針で「表示に必要な全プロパティ」をここで自己完結指定する。
   料金カード・料金表示（絶対配置＋%座標）・CTAボタンは、PC版／FVで確立済みの技法・
   フォントスタックをそのままSP実測値に置き換えて再利用する（新規技法・新規フォント導入なし）。
   ===================================================================== */
@media (max-width: 767px) {
  /* 背景をFV/Solve/Reasons/Usageと同じ手法でviewport端まで拡張（WordPress版：width:100vw方式）。
     背景は白でbody既定と同色のため見た目上の変化はほぼないが、他セクションとの整合のため適用。 */
  .virtual-office .plan { width: 100vw; margin-left: calc(50% - 50vw); }

  .virtual-office .plan__inner {
    padding: 23px 13px 56px;
  }

  /* ---- 上部見出し（PRICE / シンプルで始めやすいプラン / 必要なサービスを…） ---- */
  .virtual-office .plan__header { text-align: center; }

  .virtual-office .plan__eyebrow {
    display: inline-block;
    padding: 4px 10px;
    border-top: 1px solid var(--vo-orange-light);
    border-bottom: 1px solid var(--vo-orange-light);
    color: var(--vo-orange-light);
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 1.2;
    text-align: center;
    font-size: 11px;
  }

  .virtual-office .plan__heading {
    margin-top: 25px;
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.2;
    font-size: 20px;
  }

  /* サブ見出し：左右斜線はPC版と同じ疑似要素技法をSPサイズで再現 */
  .virtual-office .plan__lead {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 13px;
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.4;
    font-size: 14px;
  }
  .virtual-office .plan__lead::before,
  .virtual-office .plan__lead::after {
    content: "";
    width: 2px;
    height: 18px;
    background: var(--vo-gray);
  }
  .virtual-office .plan__lead::before { transform: rotate(-26.57deg); }
  .virtual-office .plan__lead::after  { transform: rotate(26.57deg); }

  /* ---- 料金カード（Figma実測 363×約167 / r25 / #fff3ed / shadowはPC版と同じ値を流用） ---- */
  .virtual-office .plan__card {
    width: 100%;
    margin-top: 16px;
    background: var(--vo-bubble);
    border-radius: 25px;
    box-shadow: 4px 4px 13.7px 4px rgba(0, 0, 0, .06);
    overflow: hidden; /* タイトル帯の角をカード自体の角丸でクリップ（PC版と同技法） */
  }
  .virtual-office .plan__card-title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    background: var(--vo-orange);
    color: var(--vo-white);
    font-weight: 700;
    text-align: center;
    font-size: 16px;
  }
  .virtual-office .plan__card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 7px 19px;
  }

  /* 料金表示（FV/PC版と同じ「絶対配置＋%座標」技法。DIN代替フォントも同じスタックを流用。
     %値はFigmaノード9:322〜9:328の実測（幅269.136×高さ93）から算出。 */
  .virtual-office .plan__price {
    display: block;
    position: relative;
    width: clamp(248px, 69.01vw, 269px);
    aspect-ratio: 269.14 / 93;
    margin: 0 auto;
    transform: translateY(10px); /* 金額グループ全体を10px下へ。marginだとカード高さが伸びてしまうためtransformで移動 */
  }
  .virtual-office .plan__price-num,
  .virtual-office .plan__price-unit,
  .virtual-office .plan__price-tax,
  .virtual-office .plan__price-permonth {
    position: absolute;
    margin: 0;
    line-height: 1;
    white-space: nowrap;
    color: var(--vo-orange);
  }
  /* 5,280：PC版（.plan__price-num）と同一のDIN代替フォントスタック（新規フォント導入なし） */
  .virtual-office .plan__price-num {
    left: 0%; top: 0%;
    transform: translateY(7px); /* 「5,280」のみを追加で7px下へ（円/税込/～/月・他要素は不変） */
    font-size: clamp(74px, 20.51vw, 80px);
    font-family: "Bahnschrift", "DIN Alternate", "DIN Condensed", "Arial Narrow", sans-serif;
    font-weight: 400;
    letter-spacing: -.05em;
  }
  .virtual-office .plan__price-unit {
    left: 66.07%; top: 42.34%;
    font-weight: 700;
    font-size: clamp(28px, 7.69vw, 30px);
  }
  .virtual-office .plan__price-tax {
    left: 63%; top: 29.27%;
    font-weight: 700;
    font-size: clamp(11px, 3.08vw, 12px);
  }
  .virtual-office .plan__price-permonth {
    left: 89.08%; top: 41.7%;
    font-weight: 700;
    font-size: clamp(28px, 7.69vw, 30px);
  }

  /* サービス内容3項目（白背景・1px #ff8a4f 枠・r80のピル。1行横並び／nowrap維持） */
  .virtual-office .plan__features {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: clamp(2px, .77vw, 3px);
    margin-top: 8px;
  }
  .virtual-office .plan__feature {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 21px;
    padding: 0 clamp(4px, 2.05vw, 8px);
    background: var(--vo-white);
    border: 1px solid var(--vo-orange-light);
    border-radius: 80px;
    color: var(--vo-orange-light);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
    font-size: clamp(8.5px, 2.56vw, 10px);
  }

  /* ---- 注意書き（カード左端よりやや内側＝Figma実測x36に揃えた2行） ---- */
  .virtual-office .plan__notes {
    margin-top: 15px;
    padding-left: 23px;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .virtual-office .plan__note {
    color: var(--vo-gray);
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    font-size: 10px;
  }

  /* ---- CTA導入見出し（左右斜線はサブ見出しと同技法） ---- */
  .virtual-office .plan__cta-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 60px;
    color: var(--vo-orange);
    font-weight: 700;
    text-align: center;
    font-size: 16px;
  }
  .virtual-office .plan__cta-heading::before,
  .virtual-office .plan__cta-heading::after {
    content: "";
    width: 2px;
    height: 15px;
    background: var(--vo-orange);
  }
  .virtual-office .plan__cta-heading::before { transform: rotate(-26.57deg); }
  .virtual-office .plan__cta-heading::after  { transform: rotate(26.57deg); }

  /* ---- CTAボタン2個（FVの.fv__cta .buttonと同じ301×48サイズ・アイコン寸法を再利用） ---- */
  .virtual-office .plan__cta {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-top: 18px;
  }
  .virtual-office .plan__cta .plan__cta-button {
    width: 100%;
    max-width: 301px;
    margin: 0 auto;
    min-height: 48px;
    padding: 0 16px;
    gap: 8px;
    font-size: 15px;
  }
  .virtual-office .plan__cta .button--line.plan__cta-button .button__icon { width: 36px; height: 36px; }
  .virtual-office .plan__cta .button--contact.plan__cta-button .button__icon { width: 26px; height: auto; }
}

/* =====================================================================
   FAQ（よくあるご質問）
   ※今回はPC版（1440px基準）のみ実装。SP版レイアウトは後工程。
   数値はFigma PC版（node 2012:474・幅1440）の実測。vw+px上限で1440に一致。
   カード幅968 / 内側Qカード幅854（左右パディング57で968に一致）。
   アコーディオンはCSS Grid（0fr⇔1fr）の高さトランジション＋Vanilla JSでopen/closeを切替。
   ===================================================================== */
.virtual-office .faq { position: relative; background: var(--vo-white); }

@media (min-width: 768px) {
  .virtual-office .faq__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(40px, 4.306vw, 62px) 20px clamp(46px, 4.583vw, 66px);
  }

  /* ---- 上部見出し（Planと同じeyebrow＋見出しの型） ---- */
  .virtual-office .faq__heading { text-align: center; }
  .virtual-office .faq__eyebrow {
    display: inline-block;
    min-width: 75px;
    padding: clamp(4px, .55vw, 8px) 10px;
    border-top: 1px solid var(--vo-orange-light);
    border-bottom: 1px solid var(--vo-orange-light);
    color: var(--vo-orange-light);
    font-weight: 500;
    font-size: clamp(14px, 1.389vw, 20px);
    letter-spacing: .1em;
    line-height: 1.2;
    text-align: center;
  }
  .virtual-office .faq__title {
    margin-top: clamp(30px, 3.056vw, 44px);
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.2;
    font-size: clamp(26px, 2.778vw, 40px);
  }

  /* ---- 大枠カード（968×可変 / r20 / #fff3ed / shadow） ---- */
  .virtual-office .faq__card {
    width: clamp(680px, 67.22vw, 968px);
    margin: clamp(30px, 3.056vw, 44px) auto 0;
    background: var(--vo-bubble);
    border-radius: clamp(14px, 1.389vw, 20px);
    padding: clamp(34px, 3.333vw, 48px) clamp(40px, 3.958vw, 57px);
  }

  .virtual-office .faq__list {
    display: flex;
    flex-direction: column;
    gap: clamp(30px, 2.917vw, 42px);
  }

  /* ---- Qカード（白 / r14） ---- */
  .virtual-office .faq__item {
    background: var(--vo-white);
    border-radius: clamp(10px, .972vw, 14px);
    overflow: hidden;
  }

  /* ---- 質問行（button リセット＋Figmaデザインに合わせた独自スタイル） ---- */
  .virtual-office .faq__question {
    display: flex;
    align-items: center;
    width: 100%;
    gap: clamp(14px, 1.25vw, 18px);
    margin: 0;
    padding: clamp(22px, 2.222vw, 32px) clamp(28px, 2.778vw, 40px) clamp(22px, 2.222vw, 32px) clamp(24px, 2.361vw, 34px);
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  .virtual-office .faq__question:focus-visible {
    outline: 2px solid var(--vo-orange);
    outline-offset: -2px;
  }

  /* ---- Q/A丸アイコン（画像不使用・CSSの円） ---- */
  .virtual-office .faq__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: clamp(38px, 3.75vw, 54px);
    height: clamp(38px, 3.75vw, 54px);
    border-radius: 50%;
    background: var(--vo-orange);
    color: var(--vo-white);
    font-weight: 700;
    line-height: 1;
    font-size: clamp(21px, 2.083vw, 30px);
  }

  .virtual-office .faq__question-text {
    flex: 1;
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .04em;
    font-size: clamp(17px, 1.667vw, 24px);
  }

  /* ---- ＋／－（2本線をCSSで作成。openで縦線を消して－にする） ---- */
  .virtual-office .faq__toggle {
    position: relative;
    flex-shrink: 0;
    width: clamp(16px, 1.389vw, 20px);
    height: clamp(16px, 1.389vw, 20px);
  }
  .virtual-office .faq__toggle::before,
  .virtual-office .faq__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--vo-gray);
    transform: translate(-50%, -50%);
    transition: transform .25s ease, opacity .25s ease;
  }
  .virtual-office .faq__toggle::before {
    width: 100%;
    height: clamp(2px, .208vw, 3px);
  }
  .virtual-office .faq__toggle::after {
    width: clamp(2px, .208vw, 3px);
    height: 100%;
  }
  .virtual-office .faq__item.is-open .faq__toggle::after {
    transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
    opacity: 0;
  }

  /* ---- 回答（CSS Gridの0fr⇔1frで高さを自然にアニメーション） ---- */
  .virtual-office .faq__answer {
    display: grid;
    grid-template-rows: minmax(0, 0fr);
    overflow: hidden;
    opacity: 0;
    transition: grid-template-rows .3s ease, opacity .3s ease;
  }
  .virtual-office .faq__item.is-open .faq__answer {
    grid-template-rows: minmax(0, 1fr);
    opacity: 1;
  }
  .virtual-office .faq__answer-inner {
    display: flex;
    min-height: 0;
    overflow: hidden;
    gap: clamp(14px, 1.25vw, 18px);
    padding: 0 clamp(28px, 2.778vw, 40px) clamp(22px, 2.222vw, 32px) clamp(24px, 2.361vw, 34px);
  }

  .virtual-office .faq__answer-text {
    flex: 1;
    color: var(--vo-gray);
    font-weight: 500;
    line-height: 1.59;
    font-size: clamp(16px, 1.528vw, 22px);
  }
  .virtual-office .faq__answer-text > * + * { margin-top: 1em; }
}

/* =====================================================================
   FAQ（よくあるご質問）SP実装（Figma SP_FAQ / node 2013:11実測）
   PC版（min-width:768px側）のルールはすべてそちらに閉じておりSPには継承されないため、
   Usage/Plan SP実装と同じ方針で「表示に必要な全プロパティ」をここで自己完結指定する。
   アコーディオンの仕組み（.faq__item に is-open クラスをJSでトグル／CSS Gridの
   0fr⇔1frで開閉／assets/js/main.js の initFaqAccordion）はPC版と完全に同一のものを
   そのまま再利用し、新しい開閉方式は追加していない。HTML・JSは無変更。
   Figma SP版は全問の回答が展開された状態で書き出されているが、指示によりPC版と同じ
   アコーディオン仕様（初期状態は5問とも閉じる）で実装する。
   ===================================================================== */
@media (max-width: 767px) {
  /* 背景をFV/Solve/Reasons/Usage/Planと同じ手法でviewport端まで拡張（WordPress版：width:100vw方式） */
  .virtual-office .faq { width: 100vw; margin-left: calc(50% - 50vw); }

  .virtual-office .faq__inner {
    padding: 45px 0 100px; /* 左右0：大枠カード（.faq__card）をviewport端まで届かせるため、
                              左右の余白は見出し（.faq__heading）とカード内側（.faq__card）側で個別に持つ。
                              下100px：FAQ〜Contact間の間隔を広げるため */
  }

  /* ---- 上部見出し（PRICE/Planと同じeyebrow＋見出しの型） ---- */
  .virtual-office .faq__heading {
    padding: 0 20px;
    text-align: center;
  }
  .virtual-office .faq__eyebrow {
    display: inline-block;
    padding: 4px 10px;
    border-top: 1px solid var(--vo-orange-light);
    border-bottom: 1px solid var(--vo-orange-light);
    color: var(--vo-orange-light);
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 1.2;
    font-size: 11px;
  }
  .virtual-office .faq__title {
    margin-top: 20px;
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.2;
    font-size: 20px;
  }

  /* ---- 大枠カード（Figma実測：viewport幅いっぱい／r20／#fff3ed。内側20pxパディングで
     白いQカード幅を390px時350px・360px時320pxへ自然に追従させる） ---- */
  .virtual-office .faq__card {
    width: 100%;
    margin-top: 48px;
    background: var(--vo-bubble);
    border-radius: 20px;
    padding: 22px 20px 24px;
  }

  .virtual-office .faq__list {
    display: flex;
    flex-direction: column;
    gap: 13px; /* Figma実測：各Qカード間13pxで一定 */
  }

  /* ---- Qカード（白 / r12。高さは固定せず内容に応じて可変） ---- */
  .virtual-office .faq__item {
    background: var(--vo-white);
    border-radius: 12px;
    overflow: hidden;
  }

  /* ---- 質問行（PC版と同じbuttonリセット構造。左7px・アイコン29px・
     アイコン〜テキストgap9pxはFigma実測） ---- */
  .virtual-office .faq__question {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 9px;
    margin: 0;
    padding: 20px 6px 20px 7px;
    gap: 0; /* icon-text / text-toggle の間隔はmarginで個別に持つ（Figma実測のicon-text間隔9pxを
                そのまま保ちつつ、Figmaに描かれていない text-toggle 間隔だけをSP用に個別調整するため） */
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  .virtual-office .faq__question:focus-visible {
    outline: 2px solid var(--vo-orange);
    outline-offset: -2px;
  }

  /* ---- Q/A丸アイコン（Figma実測 29×29px・画像不使用・CSSの円） ---- */
  .virtual-office .faq__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    background: var(--vo-orange);
    color: var(--vo-white);
    font-weight: 700;
    line-height: 1;
    font-size: 14px;
  }
  .virtual-office .faq__question .faq__mark { margin-right: 9px; } /* Figma実測：Qアイコン〜質問文 */

  .virtual-office .faq__question-text {
    flex: 1;
    min-width: 0; /* flexアイテムの既定min-widthをリセットし、長い質問文を自然に折り返す */
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .02em;
    font-size: 13px;
  }

  /* ---- ＋／－（PC版と同じ2本線技法をSPサイズで再現。openで縦線を消して－にする） ---- */
  .virtual-office .faq__toggle {
    position: relative;
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    margin-left: 8px; /* 質問文〜トグルの間隔（Figmaに描かれていないためSP用に個別調整） */
  }
  .virtual-office .faq__toggle::before,
  .virtual-office .faq__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--vo-gray);
    transform: translate(-50%, -50%);
    transition: transform .25s ease, opacity .25s ease;
  }
  .virtual-office .faq__toggle::before {
    width: 100%;
    height: 2px;
  }
  .virtual-office .faq__toggle::after {
    width: 2px;
    height: 100%;
  }
  .virtual-office .faq__item.is-open .faq__toggle::after {
    transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
    opacity: 0;
  }

  /* ---- 回答（PC版と同じCSS Gridの0fr⇔1frで高さを自然にアニメーション。
     カード高さは固定せず、文量に応じて可変） ---- */
  .virtual-office .faq__answer {
    display: grid;
    grid-template-rows: minmax(0, 0fr);
    overflow: hidden;
    opacity: 0;
    transition: grid-template-rows .3s ease, opacity .3s ease;
  }
  .virtual-office .faq__item.is-open .faq__answer {
    grid-template-rows: minmax(0, 1fr);
    opacity: 1;
  }
  .virtual-office .faq__answer-inner {
    display: flex;
    min-height: 0;
    overflow: hidden;
    gap: 9px;
    padding: 0 27px 40px 7px; /* 右：Q側の右余白（padding6+toggle13+margin8=27）と揃える／下：40px */
  }

  .virtual-office .faq__answer-text {
    flex: 1;
    min-width: 0; /* 長文の回答（特に5問目）をカード幅に応じて自然に折り返す */
    color: var(--vo-gray);
    font-weight: 500;
    line-height: 1.6;
    font-size: 12px;
  }
  .virtual-office .faq__answer-text > * + * { margin-top: .8em; }
}

/* =====================================================================
   Contact（お問い合わせ誘導）
   ※今回はPC版（1440px基準）のみ実装。SP版レイアウトは後工程。
   数値はFigma PC版（node 2012:476・幅1440・高さ688）の実測。vw+px上限で1440に一致。
   背景写真は contact-background.webp（等倍・opacity非焼き込み）を使用し、
   opacity 58%はCSS側（img要素のみ）で再現。メインコピー・本文の淡い帯は
   白＋blur()の疑似要素で再現（画像化していない）。
   ===================================================================== */
.virtual-office .contact { position: relative; overflow: hidden; background: var(--vo-white); }

.virtual-office .contact__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.1);
  opacity: .58;
  pointer-events: none;
}

@media (min-width: 768px) {
  .virtual-office .contact__inner {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(122px, 14.097vw, 203px) 20px clamp(80px, 9.306vw, 134px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* ---- メインコピー（グラデーション文字。文字自体にフチ・アウトラインは付けず、
       背後に白いぼかし＝霞を敷いて視認性を確保する。Figmaカンプ確認により、
       text-shadow/text-stroke等の文字縁取り表現は撤去。） ---- */
  .virtual-office .contact__title {
    position: relative;
    display: inline-block;
    margin: 0;
  }
  .virtual-office .contact__title::before {
    content: "";
    position: absolute;
    inset: -14px -22px;
    background: #fff;
    filter: blur(16px);
    z-index: -1;
  }
  .virtual-office .contact__title-text {
    display: inline-block;
    font-weight: 900;
    line-height: 1.2;
    font-size: clamp(26px, 2.778vw, 40px);
    background: linear-gradient(90deg, #ff732d 0%, #ff9966 49.519%, #ffb18a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  /* ---- 本文（文字自体にフチは付けず、行ごとに白いぼかしを背後に敷く。
       各行のspanを基準に::beforeで霞を作り、行幅にフィットさせている） ---- */
  .virtual-office .contact__text {
    margin-top: clamp(28px, 3.125vw, 45px);
    font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
      "Yu Gothic", YuGothic, "Noto Sans JP", Meiryo, sans-serif;
    font-weight: 700;
    color: var(--vo-gray);
    line-height: 1.75;
    font-size: clamp(14px, 1.389vw, 20px);
  }
  .virtual-office .contact__text p { margin: 0; }
  .virtual-office .contact__text-line {
    position: relative;
    display: inline-block;
  }
  .virtual-office .contact__text-line::before {
    content: "";
    position: absolute;
    /* 縦方向はinsetで組まず固定heightにしている。.contact__text-lineは
       line-height:1.75（≒35px）をそのまま自身の行ボックス高さとして持つため、
       insetで組むと常にこの35pxが土台になり、insetをどれだけ削っても見た目の
       高さがほとんど縮まなかった（調査済み）。top50%+translateYで行の中央に
       固定サイズを配置することで、line-height（行間・文字位置）は一切変えずに
       ぼかしの縦サイズだけを独立して縮小できる。横方向は行の長さに関わらず
       px固定幅でフェードするlinear-gradientのまま、left/rightで維持。 */
    left: -18px;
    right: -18px;
    top: 50%;
    height: 26px;
    transform: translateY(-50%);
    background: linear-gradient(to right,
      transparent 0,
      rgba(255, 255, 255, .85) 13px,
      rgba(255, 255, 255, .85) calc(100% - 13px),
      transparent 100%);
    filter: blur(3px);
    z-index: -1;
  }

  /* ---- CTA（共通 .button / .button--line / .button--contact を流用し、Contact用サイズのみ上書き） ---- */
  .virtual-office .contact__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(9px, .903vw, 13px);
    margin-top: clamp(45px, 5.208vw, 75px);
  }
  .virtual-office .contact__actions .contact__cta-button {
    width: clamp(260px, 26.94vw, 388px);
    min-height: clamp(48px, 4.722vw, 68px);
    padding: 0 clamp(12px, 1.25vw, 18px);
    gap: clamp(4px, .556vw, 8px);
    font-size: clamp(16px, 1.528vw, 22px);
  }
  .virtual-office .contact__actions .button--contact.contact__cta-button {
    font-size: clamp(18px, 1.736vw, 25px);
    letter-spacing: .03em;
  }
  .virtual-office .contact__actions .button--line.contact__cta-button .button__icon { width: clamp(38px, 3.75vw, 54px); height: auto; }
  .virtual-office .contact__actions .button--contact.contact__cta-button .button__icon { width: clamp(34px, 3.333vw, 48px); height: auto; }
}

/* =====================================================================
   Contact（お問い合わせ誘導）SP実装（Figma SP_Contact / node 2013:12実測）
   PC版（min-width:768px側）のルールはすべてそちらに閉じておりSPには継承されないため、
   Usage/Plan/FAQ SP実装と同じ方針で「表示に必要な全プロパティ」をここで自己完結指定する。
   PC版はメインコピー・本文の背後に白＋blur()の疑似要素（霞）を敷いて視認性を確保しているが、
   Figma実測によりSP版は霞を使わず、背景写真自体の低いopacity（既存の.contact__background、
   ベースルールで opacity:.58 済み・SPにも自動適用）だけで視認性を成立させる設計だったため、
   指示によりSPでは白ぼかしの疑似要素を使用しない（PC側の::beforeルールは削除せず、
   SPでのみ contentを無効化して安全に無効化する）。背景画像ファイル自体・PC側のCSSは無変更。
   ===================================================================== */
@media (max-width: 767px) {
  /* 背景をFV/Solve/Reasons/Usage/Plan/FAQと同じ手法でviewport端まで拡張
     （WordPress版：width:100vw方式）。Figmaの背景写真もviewport端いっぱいに広がる
     設計のため、この対応がないと写真・本文コンテナ幅がともに8px×2だけ狭くなる。 */
  .virtual-office .contact { width: 100vw; margin-left: calc(50% - 50vw); }

  /* 背景写真：PC用の inset:0（セクション全面フィット）をやめ、Figma実測のクロップ位置
     （image 596×305 / left -103 / top -18、いずれも390幅基準のvw換算）で表示する。
     width指定＋height:autoで元画像の縦横比は保ったまま拡大表示し、変形はさせない。
     opacityは.58のままベースルール（メディアクエリ外）を継続利用するためここでは再指定しない。 */
  .virtual-office .contact__background {
    inset: auto;
    top: -4.615vw;   /* -18 / 390 * 100 */
    left: -26.41vw;  /* -103 / 390 * 100 */
    width: 152.82vw; /* 596 / 390 * 100 */
    height: auto;
    max-width: none;
    transform: none; /* PC用のscale(1.1)は使わない。widthで直接クロップ量を指定しているため */
  }

  .virtual-office .contact__inner {
    position: relative;
    z-index: 1;
    padding: 37px 20px 0;
    /* CTA（.contact__actions）を写真基準のposition:absoluteにしたため、通常フローの
       高さ計算にCTAが含まれなくなった。そのままだとセクション全体の高さがCTA分だけ
       縮み、直後のAccessセクションが繰り上がってしまうため、min-heightで
       「CTAの写真基準の位置＋CTA自身の高さ＋CTA下の余白59px」を明示的に確保する。
       計算式は.contact__background・.contact__actionsのtopと同じ写真基準の式を再利用。 */
    min-height: calc(-4.615vw + (152.82vw * 236 / 490) + 146.047px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* ---- メインコピー（PC版と同じグラデーション文字テキストを再利用。
     白ぼかしの::beforeはSPでは使用しないため生成しない＝疑似要素自体を無効化） ---- */
  .virtual-office .contact__title {
    position: relative;
    display: inline-block;
    /* 従来はalign-self:flex-start（.contact__innerの左端=常にx20を基準点）+
       margin-left:-4.82pxという、viewport幅に依存しない「固定px基準」の配置だった。
       一方で.contact__text/.contact__actionsは.contact__innerのalign-items:centerで
       正しく中央追従するため、幅が広がるほど「本文/CTAは中央へ移動」「見出しだけ固定位置」
       という乖離が拡大していた（360pxでは約13px差、440pxでは約34px差まで拡大）。
       align-self指定を外して.contact__innerのalign-items:centerによる中央揃えに戻し、
       その中央基準に対して一定のtranslateXオフセットのみを加える形に変更。
       オフセット値-12.905pxは「360px時に現在と全く同じ見た目になる」よう逆算した値のため、
       360pxの表示は完全に無変更。中央基準からの相対オフセットが固定pxになったことで、
       見出しとCTAグループの中心のズレは常に約12.9px（元は13px→34pxまで拡大）に固定される。 */
    margin: 0;
    transform: translateX(-12.905px);
  }
  .virtual-office .contact__title::before {
    content: none; /* PC用の白ぼかし（background:#fff; filter:blur()）をSPでは無効化。
                       PC側ルール自体（min-width:768px内）は削除・変更していない */
  }
  .virtual-office .contact__title-text {
    display: inline-block;
    font-weight: 700; /* Figma実測（Bold）に合わせてSP用に調整。PC版は900 */
    line-height: 1.2;
    white-space: nowrap; /* 360px幅でも1行を維持するため、font-sizeをvwで追従させる */
    /* 390px時18px（Figma実測）はそのまま維持しつつ、従来405px以降で18pxに頭打ちに
       なっていた上限を440pxまで同じ比率（4.444vw）で延長。360〜405px間の挙動・数値は
       無変更（4.444vw自体を変えていないため360pxの見た目に影響なし）。
       440pxを超えると19.554pxで頭打ちにし、無制限に拡大しない。 */
    font-size: clamp(15.5px, 4.444vw, 19.554px);
    background: linear-gradient(90deg, #ff732d 0%, #ff9966 49.519%, #ffb18a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  /* ---- 本文（PC版のフォントスタックを再利用。白ぼかしの::beforeはSPでは使用しない） ---- */
  .virtual-office .contact__text {
    /* 従来はmax-width:290px/font-size:12pxとも固定値で、幅が広がってもテキストブロックが
       同じ大きさのまま張り付いて見えていた。見出し（.contact__title-text）と同じ比率
       （4.444vw→3.333vw、18px→13.5pxではなく実際は390px到達点18pxに対する比率を流用）で
       360px時の値を起点にclamp化し、440pxまで連続的に拡大。360px時の計算結果は
       いずれも従来の固定値と一致（290px・12px）するため360pxの見た目は無変更。 */
    max-width: clamp(290px, 80.556vw, 354.44px);
    margin: 26px auto 0;
    font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
      "Yu Gothic", YuGothic, "Noto Sans JP", Meiryo, sans-serif;
    font-weight: 700;
    color: var(--vo-gray);
    line-height: 1.65;
    font-size: clamp(12px, 3.333vw, 14.665px);
  }
  .virtual-office .contact__text p { margin: 0; }
  .virtual-office .contact__text-line {
    position: static;
    display: inline;
  }
  .virtual-office .contact__text-line::before {
    content: none; /* PC用の白ぼかし（linear-gradient＋blur()）をSPでは無効化。
                       PC側ルール自体（min-width:768px内）は削除・変更していない */
  }

  /* ---- CTA（Planと同じ301×48サイズ・アイコン寸法をそのまま再利用） ---- */
  /* CTAグループを通常フローから外し、.contact__background（写真）と同じ基準
     （.contact__inner。position:relativeでx0/y0は.contactと一致）を基準にした
     position:absoluteで配置する。
     【経緯】当初はmargin-topのみで「写真下端からの距離を一定にする」対応をしていたが、
     その後.contact__title-text/.contact__textをclamp()で可変フォント化した際、
     本文の行送りが幅に応じて伸びるようになった（360px時98.98px→440px時121.02px）。
     margin-topは「直前要素（.contact__text）の下端」からの相対距離のため、本文が
     伸びるとCTAもそのぶん一緒に下へ引きずられてしまい、写真下端からの距離が
     再び幅依存で崩れる副作用が判明した（375pxで約18px、440pxで約0pxまで縮小）。
     本文・見出しの高さ変化に一切影響されないよう、CTAを絶対配置にして「写真の
     下端位置」の式（.contact__backgroundと同一の計算式）から直接top値を算出する
     方式に変更。左右中央はleft:50%+translateX(-50%)で実現（.contact__innerの
     align-items:centerに依存しないため、本文側の変更の影響を受けない）。
     幅（301px）はボタン側のmax-width:301pxと同じ値を明示し、widthに依存する
     子要素のレイアウトを崩さないようにしている。 */
  .virtual-office .contact__actions {
    display: flex;
    flex-direction: column;
    gap: 13px;
    position: absolute;
    left: 50%;
    /* 写真下端からの距離を21.953px→31.953px（+10px）に変更し、CTAグループを
       写真基準の配置ロジックのまま10px上へ移動。360px時のみの個別調整ではなく
       定数を10px増やしただけのため、375〜767pxでも同じ+10pxが一律に反映される。 */
    top: calc(-4.615vw + (152.82vw * 236 / 490) - 31.953px);
    transform: translateX(-50%);
    width: 301px;
  }
  .virtual-office .contact__actions .contact__cta-button {
    width: 100%;
    max-width: 301px;
    margin: 0 auto;
    min-height: 48px;
    padding: 0 16px;
    gap: 8px;
    font-size: 15px;
  }
  .virtual-office .contact__actions .button--line.contact__cta-button .button__icon { width: 36px; height: 36px; }
  .virtual-office .contact__actions .button--contact.contact__cta-button .button__icon { width: 26px; height: auto; }
}

/* =====================================================================
   Access（所在地・地図・アクセス情報・フッター）
   PC版（1440px基準・下記 @media(min-width:768px)）は完成済みのため今回は無変更。
   SP版（下記 @media(max-width:767px)）を今回実装（Figma SP_Access / node 2013:28）。
   数値はFigma PC版（node 2012:478・幅1440・高さ1120）の実測。vw+px上限で1440に一致。
   Googleマップは実際の埋め込みiframe（Figmaのダミー表示ではなく実データ）を使用し、
   専用クラス（.access__map iframe）で幅1200×高さ356・中央配置を管理する。
   3カラムはgrid、区切り線はborder-leftで再現（画像不使用）。
   ロゴは common/logo-yoko.svg（既存共通素材）を再利用し、新規書き出しはしていない。
   ===================================================================== */
.virtual-office .access { background: var(--vo-white); }
/* SP用アイコン（access-icon-place/train/clock.svg）はPC版に存在しないため、
   base（無条件）でdisplay:noneにしておき、SP側のmedia query内でのみ表示する。 */
.virtual-office .access__info-icon { display: none; }

/* =====================================================================
   SP版Access（Figma SP_Access / node 2013:28、幅390基準の実測値）。
   Googleマップの幅調整は2026-08-15に緊急対応済み（下記ブロックに残置）。
   今回はそれ以外の見出し・住所/駅/営業時間・ロゴ・コピーライトを実装。
   DOM順（駅→営業→住所）はPC版のgrid列順を維持するためあえて変更せず、
   SP表示順（住所→駅→営業）はflexの order のみで切り替えている。
   アイコン3点（access-icon-*.svg）はユーザー手動調整済みの完成素材のため、
   ファイル自体は一切変更せず、width指定＋height:auto（共通スコープリセット）のみで
   表示サイズを調整している（縦横比の変形なし）。 */
@media (max-width: 767px) {
  /* 背景をFV/Solve/Reasons/Usage/Plan/FAQ/Contactと同じ手法でviewport端まで拡張
     （WordPress版：width:100vw方式）。.access__footerは.access__innerの外側の兄弟のため、
     この対応だけでコピーライト帯もviewport端まで自動的に届く。 */
  .virtual-office .access { width: 100vw; margin-left: calc(50% - 50vw); }

  .virtual-office .access__inner {
    padding: 41px 20px 0;
  }

  /* ---- 上部見出し（他セクションと同じeyebrow＋見出しの型を再利用） ---- */
  .virtual-office .access__heading { text-align: center; }
  .virtual-office .access__eyebrow {
    display: inline-block;
    padding: 4px 10px;
    border-top: 1px solid var(--vo-orange-light);
    border-bottom: 1px solid var(--vo-orange-light);
    color: var(--vo-orange-light);
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 1.2;
    font-size: 11px;
  }
  .virtual-office .access__title {
    margin-top: 23px;
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.2;
    font-size: 20px;
  }
  .virtual-office .access__lead {
    margin-top: 17px;
    margin-inline: -20px; /* .access__innerのpadding-inline:20pxを相殺し、
                              テキストブロックの横幅だけをviewport幅いっぱい（390px）まで広げて
                              2行に収める。text-align:centerのため中心位置・文言・line-heightは不変。 */
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.45;
    font-size: 12px;
  }

  /* ---- Googleマップ（幅・高さは2026-08-15の緊急対応値を維持。上マージンのみ追加） ---- */
  .virtual-office .access__map {
    width: min(350px, calc(100vw - 40px));
    margin: 17px auto 0;
  }
  .virtual-office .access__map iframe {
    display: block;
    width: 100%;
    height: 356px;
    border: 0;
  }

  /* ---- アクセス情報（住所／駅から徒歩3分／営業時間）----
     区切り線はDOM順1番目・2番目（＝視覚上2番目・3番目になる項目）の border-top で再現。
     PC版の区切り線（.access__info-item + .access__info-item の border-left）と
     同じ var(--vo-orange-light) を再利用。 */
  .virtual-office .access__info {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    /* 情報ブロック全体の中央配置：従来は.access__innerの内容幅（viewport-40px）に
       100%ストレッチしたうえでpadding-inline:25pxのみで左右45px相当の余白を作っていたため、
       390px超で右側にだけ余白が増え続け、ブロック全体が左に偏って見えていた
       （各行内のアイコン・テキストは左揃えのまま、ブロックという「かたまり」自体が
       中央基準ではなく左基準で配置されていたのが原因）。
       max-width:320px（=360px時の.access__inner内容幅と一致する値。360pxでは
       .access__innerの内容幅がちょうど320pxのため、margin-inline:autoの結果は0となり
       現状と完全に同一の見た目を維持する）+ margin-inline:autoに変更し、
       ブロックというかたまり自体を中央基準で配置する（各行内の左揃えレイアウトは無変更）。 */
    width: auto;
    max-width: 320px;
    margin-inline: auto;
    padding-inline: 25px;
  }
  .virtual-office .access__info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }
  .virtual-office .access__info-item:nth-child(1) {
    order: 2;
    padding: 13px 0 15px;
    border-top: 1px solid transparent; /* 区切り線は非表示。1pxのボーダーボックス自体は
                                           残すことで、テキスト・アイコンの位置と各項目の
                                           上下余白（padding値）を1pxも変えずに線だけを消す。 */
  }
  .virtual-office .access__info-item:nth-child(2) {
    order: 3;
    padding: 20px 0 0;
    border-top: 1px solid transparent;
  }
  .virtual-office .access__info-item:nth-child(3) {
    order: 1;
    padding: 0 0 12px;
  }

  .virtual-office .access__info-icon {
    display: block;
    flex-shrink: 0;
  }
  .virtual-office .access__info-item--train .access__info-icon,
  .virtual-office .access__info-item--address .access__info-icon {
    width: 20.3px; /* 29px の70%。height:autoで縦横比は維持（SVG本体は無編集） */
  }
  .virtual-office .access__info-item--hours .access__info-icon {
    width: 22px; /* 19.6pxのさらに約112%。住所・駅アイコンは1pxも変更していない */
  }

  .virtual-office .access__info-content {
    flex: 1;
    min-width: 0;
  }

  .virtual-office .access__info-heading {
    margin: 0;
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.3;
    font-size: 13px;
  }
  /* Figma SPの住所行には見出しラベルがなく、アイコン＋住所テキストのみのため非表示にする */
  .virtual-office .access__info-item--address .access__info-heading { display: none; }

  .virtual-office .access__info-heading-accent {
    color: var(--vo-orange);
    font-size: 15px;
  }
  /* 「駅」だけ「徒歩3分」と同じfont-sizeにする。colorやfont-weightは
     .access__info-heading（親）からそのまま継承させ、変更しない。 */
  .virtual-office .access__info-heading-eki {
    font-size: 15px;
  }

  /* 「営業時間」見出しと「10：00～19：00」を同一行に配置するため、flexの行にする。
     「定休日：なし」は駅ブロック（見出しブロック＋margin-top:4pxの本文）と全く同じ
     block要素＋margin-topの構造にすることで、行間を駅ブロックと同じ4pxに揃えている。 */
  .virtual-office .access__info-hours-row {
    display: flex;
    align-items: baseline;
    column-gap: 6px;
  }
  .virtual-office .access__info-time {
    color: var(--vo-gray);
    font-weight: 700;
    font-size: 12px;
  }
  .virtual-office .access__info-note {
    margin-top: 4px;
    color: var(--vo-gray);
    font-weight: 500;
    font-size: 11px;
  }

  .virtual-office .access__info-text {
    margin-top: 4px;
    color: var(--vo-gray);
    font-weight: 500;
    line-height: 1.5;
    font-size: 11px;
  }
  .virtual-office .access__info-item--address .access__info-text {
    margin-top: 0;
    margin-right: -8px; /* 「千葉県船橋市本町6-3-18アイランドビル3階」を1行に収めるための
                            横幅拡張。アイコンの位置・サイズ、左右45pxの基準（padding-inline）
                            自体は変更していない。テキストブロックのみ右方向へわずかに広げる。 */
    font-weight: 500;
    line-height: 1.55;
    font-size: 12px;
  }

  /* 住所2行目とアイコンの縦横比を保つため元テキストの<br>構造は変えず、SP版のみ
     2本目の<br>（「…18」と「アイランドビル3階」の間）を無効化して1行にまとめる。
     駅サブテキストも同様に、SPでは1行表示にする。 */
  .virtual-office .access__info-break--sp-hide { display: none; }

  /* ---- 横長ロゴ（common/logo-yoko.svg を再利用。新規書き出しなし） ---- */
  .virtual-office .access__logo {
    margin: 58px auto 0;
    width: 250px; /* Figmaカンプに近づけるための微調整（230px→250px）。中央配置のまま
                      widthのみ拡大するため、位置（左右中心）は変わらない。 */
    text-align: center;
  }
  .virtual-office .access__logo img {
    display: inline-block;
    width: 100%;
    height: auto;
  }

  /* ---- コピーライト（.access__innerの外側の兄弟。.accessのwidth:100vwフルブリードにより
     自動的にviewport端まで届く） ---- */
  .virtual-office .access__footer {
    margin-top: 54px;
    /* 静的版はここでmargin-bottom:-8pxによりbodyの既定margin(8px)を相殺していたが、
       WordPress版はbody{margin:0}のため対象がなく、この指定自体が不要（帯自体の高さ・
       テキスト位置に影響する指定ではないため、削除のみで見た目に変化はない）。 */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    background: var(--vo-footer-bg);
  }
  .virtual-office .access__footer-text {
    color: var(--vo-white);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .02em;
    font-size: 10px;
  }
  .virtual-office .access__copyright-mark {
    display: inline-block;
    font-size: 1.6em;
    line-height: 1;
    vertical-align: -.12em;
  }
}

@media (min-width: 768px) {
  .virtual-office .access__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(38px, 4.097vw, 59px) 20px 0;
  }

  /* ---- 上部見出し（FAQ/Planと同じeyebrow＋見出しの型を再利用） ---- */
  .virtual-office .access__heading { text-align: center; }
  .virtual-office .access__eyebrow {
    display: inline-block;
    min-width: 75px;
    padding: clamp(4px, .55vw, 8px) 10px;
    border-top: 1px solid var(--vo-orange-light);
    border-bottom: 1px solid var(--vo-orange-light);
    color: var(--vo-orange-light);
    font-weight: 500;
    font-size: clamp(14px, 1.389vw, 20px);
    letter-spacing: .1em;
    line-height: 1.2;
    text-align: center;
  }
  .virtual-office .access__title {
    margin-top: clamp(13px, 1.285vw, 19px);
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.2;
    font-size: clamp(26px, 2.778vw, 40px);
  }
  .virtual-office .access__lead {
    margin-top: clamp(17px, 1.736vw, 25px);
    color: var(--vo-gray);
    font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
      "Yu Gothic", YuGothic, "Noto Sans JP", Meiryo, sans-serif;
    font-weight: 700;
    line-height: 1.75;
    font-size: clamp(14px, 1.389vw, 20px);
  }

  /* ---- Googleマップ（実iframe。Figma基準 1200×356・中央配置） ---- */
  .virtual-office .access__map {
    width: clamp(680px, 83.333vw, 1200px);
    margin: clamp(13px, 1.25vw, 18px) auto 0;
  }
  .virtual-office .access__map iframe {
    display: block;
    width: 100%;
    height: clamp(200px, 24.722vw, 356px);
    border: 0;
  }

  /* ---- アクセス情報3カラム（grid＋区切り線border。absolute不使用） ---- */
  .virtual-office .access__info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: clamp(680px, 83.333vw, 1200px);
    margin: clamp(47px, 4.722vw, 68px) auto 0;
  }
  .virtual-office .access__info-item {
    padding-left: clamp(96px, 9.514vw, 137px);
    padding-right: clamp(16px, 1.667vw, 24px);
  }
  .virtual-office .access__info-item + .access__info-item {
    border-left: 1px solid var(--vo-orange-light);
  }
  .virtual-office .access__info-heading {
    color: var(--vo-gray);
    font-weight: 700;
    line-height: 1.2;
    font-size: clamp(16px, 1.597vw, 23px);
  }
  .virtual-office .access__info-text {
    margin-top: clamp(8px, .833vw, 12px);
    color: var(--vo-gray);
    font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
      "Yu Gothic", YuGothic, "Noto Sans JP", Meiryo, sans-serif;
    font-weight: 700;
    line-height: 1.75;
    font-size: clamp(14px, 1.389vw, 20px);
  }
  /* SP版実装（2026-08-16）で営業時間項目のみ.access__info-text（<p>+<br>）から
     .access__info-time/.access__info-note（別要素）へ構造変更したため、PC版が
     従来どおりの見た目（元の.access__info-textと同一のfont-size/font-family/
     line-height/margin-top）で表示されるよう、同じ値をこの2要素にも明示的に指定する。
     これによりPC版の見た目はSP実装前と完全に同一のまま（新規追加のみ・削除0件）。 */
  .virtual-office .access__info-item--hours .access__info-time,
  .virtual-office .access__info-item--hours .access__info-note {
    display: block;
    color: var(--vo-gray);
    font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
      "Yu Gothic", YuGothic, "Noto Sans JP", Meiryo, sans-serif;
    font-weight: 700;
    line-height: 1.75;
    font-size: clamp(14px, 1.389vw, 20px);
  }
  .virtual-office .access__info-item--hours .access__info-time {
    margin-top: clamp(8px, .833vw, 12px);
  }
  .virtual-office .access__info-item--hours .access__info-note {
    margin-top: 0;
  }

  /* ---- 横長ロゴ（common/logo-yoko.svg を再利用。中央配置） ---- */
  .virtual-office .access__logo {
    margin: clamp(46px, 4.653vw, 67px) auto 0;
    width: clamp(340px, 35.417vw, 510px);
    text-align: center;
  }
  .virtual-office .access__logo img {
    display: inline-block;
    width: 100%;
    height: auto;
  }

  /* ---- コピーライト（フッター相当。全幅の背景バー＋中央配置テキスト） ---- */
  .virtual-office .access__footer {
    margin-top: clamp(38px, 3.75vw, 54px);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(70px, 6.667vw, 96px);
    background: var(--vo-footer-bg);
  }
  .virtual-office .access__footer-text {
    color: var(--vo-white);
    font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
      "Yu Gothic", YuGothic, "Noto Sans JP", Meiryo, sans-serif;
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: .02em;
    font-size: clamp(12px, 1.111vw, 16px);
  }
  /* ©は同じfont-sizeだと視覚的に小さく見えるため、baselineを保ったまま個別に拡大 */
  .virtual-office .access__copyright-mark {
    display: inline-block;
    font-size: 1.75em;
    line-height: 1;
    vertical-align: -0.14em;
  }
}