@charset "utf-8";
/* ==========================================================================
   ITOKI OFFICE AI AGENTS

   数値の出典は XD `ITOKI_OFFICE-AI-AGENTS_data_261013.xd`（デザイン案2 / 2026-10-13）。
   PC は 1366px アートボード、SP は 375px アートボードの実測値をそのまま使っている。
   XD の letterSpacing は 1/1000em 単位なので ls=130 → .13em に変換している。
   lineHeight は px 指定なのでそのまま px で入れている。

   SP（<=767px）は 375 基準の vw 換算。PC は 1140px のコンテンツ幅で固定し、
   1366 未満ではコンテンツ幅だけが縮む。
   ========================================================================== */

/* --------------------------------------------------------------------------
   フォント
   XD 指示「赤文字の箇所だけフォントが異なるのでご注意ください（ISTフォントを指定）」
   data-trekking 直下の共有 fonts/*.woff を参照する。各ページが otf を自前で
   抱えると同じ実体が重複するため（261027）。woff は otf より 25% ほど軽い。
   -------------------------------------------------------------------------- */
@font-face {
  font-display: swap;
  font-family: 'IST Regular';
  font-style: normal;
  font-weight: 400;
  src: url(../../fonts/IST-Regular.woff) format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'IST Light';
  font-style: normal;
  font-weight: 300;
  src: url(../../fonts/IST-Light.woff) format('woff');
}

/* --------------------------------------------------------------------------
   トークン
   -------------------------------------------------------------------------- */
:root {
  --oa-accent: #dd2626;
  --oa-ink: #333333;
  --oa-ink-strong: #000000;
  --oa-ink-devices: #313131;
  --oa-ink-weak: #8d8d8d;

  /* 本文領域の地色。XD はアートボード #dddddd に黒を重ねて落としているので、
     実際に見えている色（計算済み）を入れている。 */
  --oa-base: #dddddd;        /* 素の地 */
  --oa-dark: #6e6e6e;        /* #ddd + 黒50%：エージェント節の地 */
  --oa-contact: #9c9c9c;     /* #ddd + 黒29.5%：お問い合わせ節の地 */
  --oa-service: #f5f5f5;     /* 関連サービス節の地 */
  --oa-white: #ffffff;

  --oa-jp: 'Noto Sans JP', YuGothic, 'Yu Gothic Medium', メイリオ, Meiryo, sans-serif;
  /* XD のデータ上は 19 箇所すべて IST-Regular 指定で、IST-Light は1箇所も無い。
     既存4ページも主役は IST Regular。よって指定どおり Regular を使う。

     一時 Light にしていた経緯: アートボードの書き出し画像（OFFICE-AI-AGENTS_2610_*.jpg）と
     突き合わせると Light のほうが一致して見えた。しかしあの画像は IST を
     インストールしていない環境で書き出された可能性があり、代替フォントに
     置き換わっていれば字形の比較には使えない。データ上の指定を優先する。 */
  --oa-en: 'IST Regular', 'Noto Sans JP', YuGothic, メイリオ, Meiryo, sans-serif;

  --oa-header-h: 70px;
  --oa-content: 1140px;      /* カード幅 */
  --oa-pad: 70px;            /* カード内の左右パディング（183 - 113） */
  --oa-gutter: 100px;        /* 1025px〜 で確保する左右の余白 */
}

@media screen and (min-width: 768px) and (max-width: 1024.98px) {
  :root {
    --oa-gutter: 40px;
  }
}

@media screen and (max-width: 767.98px) {
  :root {
    --oa-header-h: 60px;
    --oa-content: 84vw;      /* 315 / 375 */
    --oa-pad: 8vw;           /* 30 / 375 */
    --oa-gutter: 8vw;        /* 30 / 375 */
  }
}

/* --------------------------------------------------------------------------
   ベース
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background-color: #000;
}

/* 背景動画。固定で常時見えている状態にし、各セクションが上からベールを重ねる。 */
.p-oa-bg {
  inset: 0;
  overflow: hidden;
  position: fixed;
  /* XD は動画をヘッダーの下に置いている（PC y=70 で高さ698、SP y=60 で高さ752。
     いずれも 70+698=768 / 60+752=812 でファーストビューにちょうど収まる）。
     ビューポート全体にすると cover の倍率が上がり、約10%拡大された画角になる。
     ヘッダーは全スクロール位置で不透明・高さ不変なので、上端を下げても隙間は出ない。 */
  top: var(--oa-header-h);
  z-index: -1;
}

.p-oa-bg__video {
  height: 100%;
  object-fit: cover;
  /* XD は動画を左右中央に置いていない。PC は 1667x698 を x=-161（左161/右140 が切れる）
     に配置しているので、中央(50%)ではなく 53.5% になる。
     デザイナーからの「やや右に寄せている」の数値待ちだが、XD の実測値で設置している */
  object-position: 53.5% 50%;
  width: 100%;
}

@media screen and (max-width: 767.98px) {
  /* SP は 1795x752 を x=-1006（左1006/右414 が切れる）= 70.8% */
  .p-oa-bg__video {
    object-position: 70.8% 50%;
  }
}

/* 動画の上に常時のせる黒 30% */
.p-oa-bg::after {
  background-color: rgba(0, 0, 0, 0.3);
  content: '';
  inset: 0;
  position: absolute;
}

body {
  background-color: transparent;
  color: var(--oa-ink);
  font-family: var(--oa-jp);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  margin: 0;
  overflow-x: hidden;
  /* SP の自動折り返しを XD に合わせるための2点。どちらか片方では合わない。
     - text-spacing-trim: Chrome/Safari の既定は「、「」のような約物を詰めるが XD は詰めない
     - line-break: XD は長音「ー」の行頭を許す（弱い禁則）ので既定のまま */
  line-break: normal;
  text-spacing-trim: space-all;
}

img,
video {
  border: 0;
  display: block;
  height: auto;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, p, figure {
  margin: 0;
}

.u-en {
  font-family: var(--oa-en);
  font-weight: 400;
}

.u-accent {
  color: var(--oa-accent);
}

/* 1140 のコンテンツ枠。縮めてもガター分の余白は残す。 */
.p-oa-wrap {
  margin-inline: auto;
  max-width: var(--oa-content);
  width: calc(100% - var(--oa-gutter) * 2);
}

/* 261022 戻しで関連サービスを 5 カラムのままにした帯。ガター 100px を保つと
   1025px で枠が 825px まで縮み、カード内の字が 8px を切る。この帯は枠を 960 で
   固定し、余白のほうを伸縮させる（可変にすると 1365px のカードが 1366px より
   大きくなる逆転が起きる）。*/
@media screen and (min-width: 1025px) and (max-width: 1365.98px) {
  .p-oa-wrap {
    width: 960px;
  }
}

/* 白いカード */
.p-oa-card {
  background-color: var(--oa-white);
  border-radius: 5px;
  margin-inline: auto;
  max-width: var(--oa-content);
  width: calc(100% - var(--oa-gutter) * 2);
}

.p-oa-card__inner {
  padding-inline: var(--oa-pad);
}

@media screen and (max-width: 767.98px) {
  .p-oa-card {
    border-radius: 1.3333vw;
  }
}

/* --------------------------------------------------------------------------
   ヘッダー（XD: 1366x70 / 白 / shadow 0 0 5 rgba(0,0,0,.05)）
   XD 指示「他サービス同様にスクロール後に以下に切り替わる」
   -------------------------------------------------------------------------- */
.p-oa-header {
  background-color: var(--oa-white);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  height: var(--oa-header-h);
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100;
}

.p-oa-header__body {
  align-items: center;
  display: flex;
  height: 100%;
  padding-inline: 40px 30px;
}

.p-oa-header__logo {
  display: grid;      /* 切替前後の2本のリンクを同じセルに重ねる */
  flex: none;
  line-height: 0;
  padding-top: 2px;   /* XD: ロゴの字 y20〜49 */
}

.p-oa-header__logo [data-logo='top'] img {
  width: 119px;
}

.p-oa-header__logo [data-logo='under'] img {
  width: 291px;
}

/* ロゴのスクロール切り替え。初期は ITOKI、90px 以降で OFFICE AI AGENTS。
   パッと入れ替わらないよう、重ねて不透明度でフェードさせる。 */
.p-oa-header__logo a {
  display: block;
  line-height: 0;
}

.p-oa-header__logo [data-logo] {
  grid-area: 1 / 1;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.p-oa-header__logo [data-logo='under'] {
  opacity: 0;
  visibility: hidden;
}

.p-oa-header__logo[data-logo='change'] [data-logo='top'] {
  opacity: 0;
  visibility: hidden;
}

.p-oa-header__logo[data-logo='change'] [data-logo='under'] {
  opacity: 1;
  visibility: visible;
}

.p-oa-nav {
  margin-left: auto;
}

/* XD: 英字ラベルの字の実描画どうしの間隔は 54px。
   リンクの箱はホバー時の日本語（英字より約24px広い）で決まるので、
   箱の gap はその差を引いた 31px にすると XD の字の位置と一致する。 */
.p-oa-nav__list {
  align-items: center;
  display: flex;
  gap: 0 57px;   /* XD 261020: 項目間 57（意思決定 637-713 / 構築 770-808 / 運用 865-902）*/
}

/* ナビ。XD のホバーステートでは英語名が日本語説明に差し替わり、赤い下線が出る。
   既定と重ねて置き、不透明度で入れ替える。遷移は interactions.json の 0.3s ease-out。 */
/* XD: 文字はヘッダー(70px)の上下中央。赤い下線は y68＝ヘッダー下端に、日本語の文字幅で出る。 */
.p-oa-nav__link {
  display: grid;
  position: relative;
  text-align: center;
  white-space: nowrap;
}

.p-oa-nav__ja {
  grid-area: 1 / 1;
  line-height: 24px;
  transition: transform 0.3s ease-out;
}

/* XD(261020) のホバー見本: 和文が 7px 上がり、その下に英字が小さく出る（日英併記）。
   セル幅は和文で決めたいので、英字は流れから外して重ねる。 */
.p-oa-nav__en {
  left: 50%;
  line-height: 14px;
  opacity: 0;
  position: absolute;
  top: 20px;              /* XD: 英字の字 45〜55。リンク枠（高さ24・ヘッダー中央）の上端からの距離 */
  transform: translateX(-50%);
  transition: opacity 0.2s ease-out;   /* 離れるときは遅延なしですぐ消す */
  white-space: nowrap;
}

/* XD(261020): 製品名 #000 ＋ AI だけ #dd2626 / IST-Regular 10 / ls .015em */
.p-oa-nav__en {
  color: var(--oa-ink-strong);
  font-family: var(--oa-en);
  font-size: 10px;
  letter-spacing: 0.015em;
}

.p-oa-nav__en .u-accent {
  color: var(--oa-accent);
}

/* 既定で出る日本語（XD 261020: Noto Sans JP 18 / #333 / ls .05em） */
.p-oa-nav__ja {
  color: var(--oa-ink);
  font-family: var(--oa-jp);
  font-size: 17px;        /* 2026/10/21 のご指摘で 18 → 17 */
  justify-self: center;   /* 幅を文字幅にして下線をその幅に合わせる */
  /* 2026/10/21 のご指摘で .05em → .2em。字送りの最後の1つ分は text-indent で相殺する */
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}

/* 「リアルデータ取得」だけ字送りが狭い（2026/10/21 のご指摘）*/
.p-oa-nav__ja--device {
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}

@media (hover: hover) {
  .p-oa-nav__link:hover .p-oa-nav__ja {
    transform: translateY(-7px);   /* XD: 既定の字 29〜43 → ホバー 22〜36 */
  }

  /* 和文が上がる動き（0.3s）の途中で英字を出しはじめる。
     離れるときは上の transition がそのまま効くので、遅延なしで消える。 */
  .p-oa-nav__link:hover .p-oa-nav__en {
    opacity: 1;
    transition-delay: 0.1s;
  }
}

/* 赤ボタン（XD: 169x40 / radius 4 / 文字 NotoSansJP-Medium 14 ls .08em + 白矢印） */
.p-oa-header__contact {
  flex: none;
  margin-left: 58px;   /* XD 261020: ナビ右端 1106 → ボタン */
}

.p-oa-btn {
  align-items: center;
  background-color: var(--oa-accent);
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--oa-white);
  display: inline-flex;
  font-size: 14px;
  font-weight: 500;
  gap: 0 7px;          /* XD 261020: 文字と矢印の間隔 7 */
  height: 40px;
  justify-content: center;
  /* XD 261020: 色・罫線の反転はトランジション 0（瞬時）。動くのは矢印だけ */
  letter-spacing: 0.08em;
  line-height: 1;
  padding-inline: 0;
  width: 169px;
}

/* XD 261020: 矢印は 11x10 の山形。ホバーで色が反転し、矢印だけ 5px 右へ動く */
/* 中央寄せだと和文の墨が XD より 1px 下に出るので、文字だけ上げる（矢印はそのまま）*/
.p-oa-btn__label {
  position: relative;
  top: -1px;
}

.p-oa-btn__arrow {
  flex: none;
  height: 10px;
  transition: transform 0.3s ease-out;
  width: 11px;
}

/* ホバー（XD のホバーステート）
   白地に乗るボタン（ヘッダー / ITOKI OFFICE DEVICES の CTA）:
     塗りを白にし、1px #dd2626 の枠線と赤文字・赤矢印に反転
   暗い地に乗るボタン（AI AGENTS の CTA / お問い合わせ節 / SPフローティング）:
     塗りを外して 1px #ffffff の枠線と白文字・白矢印に反転 */
@media (hover: hover) {
  .p-oa-btn:hover {
    background-color: var(--oa-white);
    border-color: var(--oa-accent);
    color: var(--oa-accent);
  }

  /* XD 261020 の指示「色の反転とともにアローのみ5px右に動かす挙動に」 */
  .p-oa-btn:hover .p-oa-btn__arrow {
    transform: translateX(5px);
  }

  /* 暗い地の上でも背景は白。枠線だけ白にして、白い面としてなじませる。 */
  .p-oa-btn--onDark:hover {
    border-color: var(--oa-white);
  }
}

/* ハンバーガー（1259px まで）
   261023 の戻し: iPad Pro 11インチでハンバーガーにならない、というご指摘を受けて
   1024px → 1259px に広げた（Reserve Any 側と同じ境界）。*/
.p-oa-header__toggle {
  display: none;
}

@media screen and (max-width: 1259.98px) {
  .p-oa-nav,
  .p-oa-header__contact {
    display: none;
  }

  .p-oa-header__toggle {
    background: none;
    border: 0;
    display: block;
    height: var(--oa-header-h);
    margin-left: auto;
    padding: 0;
    position: relative;
    width: 68px;
  }

  .p-oa-header__toggle span {
    /* 2026/10/21 のご指摘で黒 → キーカラー */
    background-color: var(--oa-accent);
    display: block;
    height: 1px;
    left: 50%;
    position: absolute;
    transition: transform 0.3s ease, background-color 0.3s ease;
    width: 22px;
  }

  .p-oa-header__toggle span:nth-child(1) {
    top: 50%;
    transform: translate(-50%, -5px);
  }

  .p-oa-header__toggle span:nth-child(2) {
    top: 50%;
    transform: translate(-50%, 4px);
  }

  .p-oa-header[data-open='true'] .p-oa-header__toggle span {
    background-color: var(--oa-accent);
  }

  .p-oa-header[data-open='true'] .p-oa-header__toggle span {
    width: 24px;
  }

  .p-oa-header[data-open='true'] .p-oa-header__toggle span:nth-child(1) {
    transform: translate(-50%, 0) rotate(45deg);
  }

  .p-oa-header[data-open='true'] .p-oa-header__toggle span:nth-child(2) {
    transform: translate(-50%, 0) rotate(-45deg);
  }
}

@media screen and (max-width: 767.98px) {
  .p-oa-header__body {
    padding-inline: 5.3333vw 0;
  }

  /* XD SP: ロゴは x20 / 幅239 で、最初から OFFICE AI AGENTS のロックアップ */
  .p-oa-header__logo [data-logo='top'] {
    display: none;
  }

  .p-oa-header__logo [data-logo='under'] {
    opacity: 1;
    visibility: visible;
  }

  .p-oa-header__logo [data-logo='under'] img {
    max-width: 239px;  /* 375px を超える端末でもこれ以上は大きくしない */
    width: 63.7333vw;  /* 239 / 375 */
  }

  .p-oa-header__toggle {
    background: none;
    border: 0;
    display: block;
    height: var(--oa-header-h);
    margin-left: auto;
    padding: 0;
    position: relative;
    width: 18.1333vw; /* 68 / 375 */
  }

  .p-oa-header__toggle span {
    /* 2026/10/21 のご指摘で黒 → キーカラー */
    background-color: var(--oa-accent);
    display: block;
    height: 1px;
    left: 50%;
    position: absolute;
    transition: transform 0.3s ease, opacity 0.3s ease;
    width: 5.8667vw;
  }

  .p-oa-header__toggle span:nth-child(1) {
    transform: translate(-50%, -5px);
    top: 50%;
  }

  .p-oa-header__toggle span:nth-child(2) {
    top: 50%;
    transform: translate(-50%, 4px);
  }

  .p-oa-header[data-open='true'] .p-oa-header__toggle span {
    background-color: var(--oa-accent);
  }

  .p-oa-header[data-open='true'] .p-oa-header__toggle span {
    width: 6.4vw;
  }

  .p-oa-header[data-open='true'] .p-oa-header__toggle span:nth-child(1) {
    transform: translate(-50%, 0) rotate(45deg);
  }

  .p-oa-header[data-open='true'] .p-oa-header__toggle span:nth-child(2) {
    transform: translate(-50%, 0) rotate(-45deg);
  }
}

/* --------------------------------------------------------------------------
   SP ドロワー（XD: SPメニュー アートボード 375x812）
   XD 指示「SPのメニューは日英併記」
   -------------------------------------------------------------------------- */
/* XD メニューアートボード: ヘッダー(60)の下に白い面。項目は中央揃えで英日併記。 */
.p-oa-menu {
  background-color: var(--oa-white);
  bottom: 0;
  display: flex;
  flex-direction: column;
  left: 0;
  opacity: 0;
  padding: 0 5.3333vw 5.3333vw;   /* 左右 20 ／ 下 20。上下は auto マージンで中央に */
  pointer-events: none;
  position: fixed;
  right: 0;
  text-align: center;
  top: var(--oa-header-h);
  transition: opacity 0.3s ease, visibility 0.3s ease;
  visibility: hidden;
  z-index: 99;
}

.p-oa-menu[aria-hidden='false'] {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.p-oa-menu__list li + li {
  margin-top: 9.1733vw;     /* XD: 項目の送り 93（和文の字 262→355→448→541）*/
}

.p-oa-menu__link {
  display: block;
}

/* XD(261020): 和文が上・英字が下に入れ替わった。IST 16 / ls .015em。
   製品名は #000 ＋ AI だけ #dd2626。「ITOKI OFFICE DEVICES」は 15px で全部 #000。 */
.p-oa-menu__en {
  color: var(--oa-ink-strong);
  display: block;
  font-family: var(--oa-en);
  font-size: 4.2667vw;      /* 16 */
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 5.3333vw;    /* 20 */
  margin-top: 2.2933vw;     /* XD: 和文の字 262 → 英字 293 */
}

.p-oa-menu__en--device {
  color: var(--oa-ink-strong);
  font-size: 4vw;           /* 15 */
}

/* XD: 和 NotoSansJP-Medium 22 #333 ls .1em（2文字の項目だけ .2em）*/
.p-oa-menu__ja {
  color: var(--oa-ink);
  display: block;
  font-size: 5.8667vw;      /* 22 */
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 8vw;         /* 30 */
  text-indent: 0.1em;       /* 字送りの最後の1つ分を相殺して中央に戻す */
}

.p-oa-menu__ja--wide {
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}

/* リストとボタンの両方に margin-top:auto を置くと、余白が
   「ヘッダー下→リスト」と「リスト→ボタン」に等分され、リストが天地中央に来る。
   ボタンは面の下端（下パディング 20 の内側）に残る。XD の 237.4 / 574.5 / 752 と一致。 */
.p-oa-menu__list {
  margin-top: auto;
}

.p-oa-menu__buttons {
  margin-top: auto;
}

/* XD: 335x40 / 文字左 25 / 矢印右 14 */
.p-oa-menu .p-oa-btn {
  font-size: 3.7333vw;      /* 14 */
  height: 10.6667vw;        /* 40 */
  padding-inline: 0;
  width: 100%;
}

/* 768〜1259px のドロワー。SP の vw 値のままだと間延びする（1259px では和文が 74px に
   なってしまう）ので、XD のメニューアートボード（375幅）の px 値で止める。
   261023: このブロックは既定の .p-oa-menu 群より前に置かれていて、詳細度が同じぶん
   後勝ちで丸ごと効いていなかった。ハンバーガーを 1259px まで広げるにあたり、
   既定の後ろへ移動して効くようにしたうえで、値も XD どおりに直している。 */
@media screen and (min-width: 768px) and (max-width: 1259.98px) {
  .p-oa-menu {
    padding: 0 20px 20px;
  }

  .p-oa-menu__list li + li {
    /* 項目の高さ（和30 + 8.6 + 英20 = 58.6）と足して XD の送り 93 になる値 */
    margin-top: 34.4px;
  }

  .p-oa-menu__en {
    font-size: 16px;
    line-height: 20px;
    margin-top: 8.6px;      /* XD: 和文の字 262 → 英字 293 */
  }

  .p-oa-menu__en--device {
    font-size: 15px;
  }

  .p-oa-menu__ja {
    font-size: 22px;
    line-height: 30px;
  }

  .p-oa-menu__buttons {
    margin-inline: auto;
    max-width: 335px;       /* XD: ボタン 335x40 */
    width: 100%;
  }

  .p-oa-menu .p-oa-btn {
    font-size: 14px;
    height: 40px;
    padding-inline: 0;
    width: 100%;
  }
}

@media screen and (min-width: 1260px) {
  .p-oa-menu {
    display: none;
  }
}

/* PC のヘッダーメニューはこの1サイズだけ（261023 の戻し）。
   1259px までハンバーガーになったので、ナビが出るのは 1260px 以上だけになり、
   以前あった 1025〜1365px 用の「詰めたナビ」は不要になったため削除した。 */

/* --------------------------------------------------------------------------
   ファーストビュー
   XD: 動画 1366x698 / 黒 30% / 下に 520px のグラデーション 50%
   XD 指示「背景は別途共有する動画をループ再生」
   XD 指示「ここから以下は薄くグラデーションを乗せて明度を下げています」
   -------------------------------------------------------------------------- */
/* ヘッダー＋ヒーローでちょうど 100vh。XD も（PC 70+698=768 / SP 60+752=812）
   ファーストビュー＝動画が見えている範囲、という作りなのでそれに合わせる。
   svh を優先するのは、モバイルでアドレスバーが出ている状態でも全体が見えるようにするため。 */
.p-oa-mv {
  height: calc(100vh - var(--oa-header-h));
  height: calc(100svh - var(--oa-header-h));
  margin-top: var(--oa-header-h);
  overflow: hidden;
  position: relative;
}

/* 高さが可変になるので、中身は上下中央に置く。
   XD 261023 はヒーロー枠 698 に対し ロゴ上端 209 / リードの行box下端 558.5 で、
   下に 139.5 残る＝34.75px ほど下寄り。padding-top でその位置関係を保つ
   （中央寄せなので padding の半分だけ下がる）。 */
.p-oa-mv__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  padding-top: 69.5px;
  position: relative;
  text-align: center;
  z-index: 2;
}

/* ロゴロックアップ（XD 261023 で2行Ver.に差し替え。実測 641.852x169.996 / 中央 / 上端 279） */
.p-oa-mv__logo {
  margin: 0 auto;
  max-width: 642px;
  width: 46.99%;
}

/* ファーストビューの文字の大きさ。**この節の中だけの話で、本文など他のセクションとは無関係。**
   ロゴが width:46.99% で画面幅に追従して縮むのに文字が 25px 固定のままだと、
   タブレット幅（768〜1024）でキーワード行がロゴより広くなって崩れて見える。
   25px ÷ 1366px = 1.8302vw で、ロゴとまったく同じ比率で縮める（1366 以上は 25px で頭打ち）。
   768px でロゴ 56.3% / 文字 14.1px、1024px で 75% / 18.7px。文字とロゴの比は全幅で 1.00。 */
:root {
  --oa-mv-fs: min(1.8302vw, 25px);
}

/* XD: Noto Sans JP 25 / #fff / lh46 / ls .13em
   間隔・行送り・余白はすべて em／無単位にしてある（32/25=1.28em、46/25=1.84、36/25=1.44em）。
   こうしておくと font-size だけで全体が相似に縮む。1366px では XD の px 値と一致する。 */
.p-oa-mv__keywords {
  align-items: center;
  color: var(--oa-white);
  display: flex;
  font-size: var(--oa-mv-fs);
  gap: 0 1.28em;          /* 32 */
  justify-content: center;
  letter-spacing: 0.13em;
  line-height: 1.84;      /* 46 */
  /* XD 261023: ロゴ下端 449 → キーワードのベースライン 563。行box上端で 81.5px 空く */
  margin-top: 3.26em;     /* 81.5 */
}

.p-oa-mv__keywords li {
  position: relative;
}

/* XD の ✕ は 1px の線を2本交差させたもの。フォントの ✕ だと線が太すぎるので、
   FM ✕ AI と同じく線で描く。幅は対角線なので 16 * √2 = 22.63
   （XD は 18 角だが、2026/10/21 のご指摘で一回り小さくし、2px 下げている）
   位置と大きさは em で持つ。間隔（gap 1.28em）だけが font-size に追従して縮むと
   ✕ が間隔からはみ出して文字に当たるため（1366px では XD の px 値と一致する）。
   線の太さだけは 1px のまま＝ヘアラインなので縮めない。 */
.p-oa-mv__keywords li + li::before,
.p-oa-mv__keywords li + li::after {
  background-color: currentcolor;
  content: '';
  height: 1px;
  left: -0.64em;             /* 16。1.28em の間隔の中央 */
  opacity: 0.9;
  position: absolute;
  top: calc(50% + 0.08em);   /* 2 */
  width: 0.9052em;           /* 22.63 */
}

.p-oa-mv__keywords li + li::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.p-oa-mv__keywords li + li::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.p-oa-mv__lead {
  color: var(--oa-white);
  font-size: var(--oa-mv-fs);
  letter-spacing: 0.13em;
  line-height: 1.84;      /* 46 */
  margin-top: 0.24em;     /* 6 */
}

/* 動画から地色へ落とすグラデーション */
@media screen and (max-width: 767.98px) {
  /* XD 261020: ヒーロー枠 752 に対し 上 213.2 / 下 308.7（中身の分 230.1）。
     中央寄せなので差分の2倍を padding-bottom で下げる。 */
  .p-oa-mv__inner {
    padding-bottom: 25.4667vw;   /* 95.5 */
    padding-top: 0;
  }

  /* XD 261020: SP のファーストビューからロゴが無くなった */
  .p-oa-mv__logo {
    display: none;
  }

  /* リードは XD の値を上限にする（枠が伸びても字だけ大きくならないように）*/
  .p-oa-mv__lead {
    font-size: min(8vw, 30px);            /* 30 */
    letter-spacing: 0.13em;
    line-height: min(14.8vw, 55.5px);     /* 行送り 55.5 */
    margin-top: 0;
  }

  /* XD 261020: リードの下に 意思決定 ✕ 構築 ✕ 運用 が入る */
  .p-oa-mv__keywords--sp {
    font-size: min(5.3333vw, 20px);       /* 20 */
    gap: 0 2.05em;                        /* 41。XD 実測で ✕ の前後が 16px */
    line-height: 1.5;                     /* 30 */
    margin-top: min(8.96vw, 33.6px);      /* XD: リード下端 439.7 → キーワード枠 473.3 */
  }

  /* XD の ✕ は 14x14。対角線は 14 * √2 = 19.8。2026/10/21 のご指摘で 1px 下げている。
     PC と同じく em で持ち、font-size に合わせて相似に縮める（375px で XD の px 値）*/
  .p-oa-mv__keywords--sp li + li::before,
  .p-oa-mv__keywords--sp li + li::after {
    left: -1.025em;                       /* 20.5。2.05em の間隔の中央 */
    opacity: 1;
    top: calc(50% + 0.05em);              /* 1 */
    width: 0.99em;                        /* 19.8 */
  }

  /* 字送りの最後の1つ分が右に残り、行全体が左に寄るのを相殺する */
  .p-oa-mv__keywords--sp li:last-child {
    margin-right: -0.13em;
  }
}

/* --------------------------------------------------------------------------
   ベール区間（リード 〜 CTA）
   XD: y554-1074 のグラデーション（0 → 黒50%）の続きが y768 から始まり、
       y1074 以降は黒 50% のまま y4544 まで続く。
   -------------------------------------------------------------------------- */
/* ヒーロー下端より 215px 上から始める。520px かけて 0 → 黒50%、その下はずっと黒50%。 */
.p-oa-veil {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.5) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.5) 100%);
  background-position: 0 0, 0 520px;
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 520px, 100% calc(100% - 520px);
  margin-top: -215px;
  padding-top: 215px;
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 767.98px) {
  /* SP は 375 基準で 520px 相当 = 138.6667vw、-195px 相当 = -52vw */
  .p-oa-veil {
    background-position: 0 0, 0 138.6667vw;
    background-size: 100% 138.6667vw, 100% calc(100% - 138.6667vw);
    margin-top: -52vw;
    padding-top: 52vw;
  }
}

/* --------------------------------------------------------------------------
   隣り合う面の継ぎ目に出る 1px の筋への対策（2026/10/23 のご指摘）

   地は html の黒＋固定の背景動画で、各セクションはその上に重ねた不透明な面。
   面の高さが小数になるウィンドウ幅だと、上の面の下端と下の面の上端が同じ
   デバイスピクセルに丸め込まれず、半ピクセルぶん塗り残しができて後ろの動画が
   透けて筋に見える（1267px / DPR2 のスクショで、白の中に #ddd 相当の 1px、
   白とグレーの境目に両隣より暗い 1px が出ているのを確認）。

   高さを整数に揃える直し方は、写真の縦横比・コンテナクエリ・vw がぶら下がって
   いるぶん幅ごとに破綻するので採らない。下の面の背景を box-shadow で 1px 上へ
   伸ばして塗り残しを塞ぐ。box-shadow はレイアウトに影響しないので、XD と
   突き合わせた余白・座標は一切動かない。
   -------------------------------------------------------------------------- */
.p-oa-devices__body,              /* 黒いKV ↔ 白い本文 */
.p-oa-cta--light {                /* 白い本文 ↔ 白いCTA（ご指摘1） */
  box-shadow: 0 -1px 0 var(--oa-white);
}

.p-oa-service,                    /* 白いCTA ↔ グレーの関連サービス（ご指摘2） */
.p-oa-contact {                   /* 関連サービス ↔ お問い合わせ（半透明なので地が出る） */
  box-shadow: 0 -1px 0 var(--oa-service);
}

.p-oa-footer {                    /* お問い合わせ ↔ フッター */
  box-shadow: 0 -1px 0 var(--oa-white);
}

/* --------------------------------------------------------------------------
   リード（XD: 白カード 1140x516 radius5 / y808）
   -------------------------------------------------------------------------- */
.p-oa-intro {
  padding-top: 40px;   /* XD: 白カードの上端 808 */
  position: relative;
  z-index: 2;
}

.p-oa-intro__inner {
  padding-block: 93px 91px;   /* XD: 白カード 808〜1289 / 上下とも余白100（墨で 108/107）*/
  text-align: center;
}

/* XD: IST 26 #dd2626 / 和文は NotoSansJP-Medium #333・#000 / lh52
   字送りは run ごとに違う（XD rangedStyles）: 英字 cs50 = .05em / 和文 cs150 = .15em */
.p-oa-intro__title {
  color: var(--oa-accent);
  font-family: var(--oa-en);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 52px;
}

.p-oa-intro__title .u-ja {
  color: var(--oa-ink);
  font-family: var(--oa-jp);
  font-weight: 500;
  letter-spacing: 0.15em;
}

.p-oa-intro__title .u-ja-strong {
  color: var(--oa-ink-strong);
  font-family: var(--oa-jp);
  font-weight: 500;
  letter-spacing: 0.15em;
}

/* 261022 戻し: 和文に対して英字が小さく（低く）見えるため、ここだけ 1px 上げる */
.p-oa-intro__title .u-en {
  font-size: 27px;
}

/* XD: NotoSansJP-Regular 16 #333 lh36 ls .1em */
.p-oa-intro__text {
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 38px;  /* XD: 38 */
  margin-top: 35px;   /* XD: 見出しの墨下端 → 本文の墨 */
}

/* 261022 戻し: 見出しと同じ理由で、この英字だけ 1px 上げる */
.p-oa-intro__text .u-en {
  font-size: 17px;
}

@media screen and (max-width: 767.98px) {
  .p-oa-intro {
    padding-top: 18.6667vw;   /* ヒーロー下端 812 → カード上端 882 */
  }

  .p-oa-intro__inner {
    padding-block: 9.6vw 12.5333vw;  /* XD: 白カード 882〜1305（高さ423）*/
    text-align: left;
  }

  .p-oa-intro__title {
    font-size: 5.0667vw;      /* 19 */
    line-height: 8.5333vw;    /* XD: 墨の送り 32（PC の 52 とは別）*/
  }

  /* 261022 戻しは PC への指示。SP は XD どおりの比率を保つ */
  .p-oa-intro__title .u-en,
  .p-oa-intro__text .u-en {
    font-size: inherit;
  }

  .p-oa-intro__text {
    font-size: 4vw;
    letter-spacing: 0.06em;
    line-height: 8vw;         /* XD: 30 */
    margin-top: 6.4vw;
  }
}

/* --------------------------------------------------------------------------
   3つのAIエージェント
   XD: y1074 から 3470px ぶん地色が落ちる（#ddd + 黒50% = #6e6e6e）
   -------------------------------------------------------------------------- */
.p-oa-agents {
  padding-block: 120px 0;   /* XD: リードカード下端 1289 → カード上端 1409 */
}

/* 白カード（XD: 1140x822 radius5）。見出し＋循環図を収める。
   この節だけ中身を「カード幅に対する比率」で組む。カードは
   max-width 1140 で頭打ちなので、1140 以上では XD の px 値そのものになり、
   タブレット幅では位置関係と比率を保ったまま縮む。 */
.p-oa-agents__head {
  container-type: inline-size;
}

.p-oa-agents__headInner {
  padding-block: 6.7105cqw 7.9386cqw;  /* XD 1140基準: 76.5 / 89.5 */
}

/* XD: NotoSansJP-Medium 24 #333 lh42 ls .15em / AI だけ IST #dd2626 */
.p-oa-agents__title {
  /* 図は比率のまま縮めるが、見出しは intro・DEVICES・CTA と同じレベルなので
     他の見出しと同様に固定にする（比率で縮めると 768px で 14.5px まで落ちた）*/
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 44px;
  text-align: center;
  text-indent: 0.15em;          /* 字送りの最後の1つ分を相殺して中央に戻す */
}

/* ── 循環図 ───────────────────────────────────────────────
   円と矢印は XD のジオメトリをそのまま写した SVG（viewBox 0 0 427.8 418）。
   PC と SP で図形は相似なので SVG は共通にし、文字だけ位置と級数を出し分ける。
   文字の位置は図形の外接矩形（XD PC: x469.1-896.9 / y1721.5-2139.5）に対する比率。 */
.p-oa-cycle {
  margin-top: 12.8947cqw;       /* XD 1140基準: 147（図形上端 1721）*/
}

.p-oa-cycle__fig {
  aspect-ratio: 427.8 / 418;
  color: var(--oa-accent);
  container-type: inline-size;  /* 図の中の文字は図形幅（最大427.8）を基準にする */
  margin-inline: auto;
  position: relative;
  width: 42.78%;                /* 427.8 / カード内側 1000 */
}

.p-oa-cycle__svg {
  display: block;
  overflow: visible;
  width: 100%;
}

/* viewBox と一緒に線まで縮むと SP・タブレットで 1px を割って痩せるので、
   線幅は実寸で固定する（XD はどの幅でも 1px）。 */
.p-oa-cycle__svg * {
  vector-effect: non-scaling-stroke;
}

/* FM ✕ AI の ✕（line 2本）。見た目で合わせた微調整 */
.p-oa-cycle__svg line {
  transform: translateY(-4px);
}

.p-oa-cycle p {
  margin: 0;
  position: absolute;
  white-space: nowrap;
}

/* エージェント名（XD: IST 27 ls .025em / AI だけ赤） */
.p-oa-cycle__name {
  color: var(--oa-ink-strong);
  font-family: var(--oa-en);
  font-size: 6.3114cqw;     /* 27 */
  letter-spacing: 0.025em;
  line-height: 7.4801cqw;   /* 32 */
}

/* 説明（XD: NotoSansJP-Regular 15 #707070 ls .05em） */
.p-oa-cycle__sub {
  color: #707070;
  font-size: 3.5063cqw;     /* 15 */
  letter-spacing: 0.05em;
  line-height: 6.0776cqw;   /* 26 */
}

/* 円の中のラベル */
.p-oa-cycle__label {
  color: var(--oa-ink);
  font-size: 5.1426cqw;     /* 22 */
  font-weight: 500;
  line-height: 7.9476cqw;   /* XD: 34 */
  text-align: center;
}

.p-oa-cycle__label--fp {
  letter-spacing: 0.07em;       /* XD: 意思決定だけ .07em */
  text-indent: 0.07em;
}

.p-oa-cycle__label--sm,
.p-oa-cycle__label--wi {
  letter-spacing: 0.15em;
  text-indent: 0.15em;
}

/* 中心（XD: NotoSansJP-Medium 16 ls .07em） */
.p-oa-cycle__core {
  color: var(--oa-ink);
  font-size: 3.7401cqw;     /* 16 */
  font-weight: 500;
  letter-spacing: 0.07em;
  line-height: 6.0776cqw;   /* 26 */
  text-align: center;
  text-indent: 0.07em;
}

/* FM ✕ AI（✕ は SVG 側の2本の線）。XD: IST 49 ls .13em 赤 */
.p-oa-cycle__fm {
  color: var(--oa-accent);
  font-family: var(--oa-en);
  font-size: 11.4539cqw;    /* 49 */
  letter-spacing: 0.13em;
  line-height: 13.0902cqw;  /* 56 */
}

/* 字送り .13em の末尾ぶんが box 幅に入り、中央寄せが半分（.065em）だけ
   左にずれる。translate 側で戻す（em 指定なので PC・SP 両方に効く）。 */
.p-oa-cycle__fmL,
.p-oa-cycle__fmR { position: absolute; top: 0; transform: translateX(calc(-50% + 0.065em)); }

/* 位置（PC）。すべて図形の外接矩形に対する % */
.p-oa-cycle__name--fp { left: 50%; top: -20.16%; transform: translateX(-50%); }
.p-oa-cycle__sub--fp  { left: 50%; top: -11.01%;  transform: translateX(-50%); }
.p-oa-cycle__label--fp{ left: 50%; top: 4.52%;  transform: translateX(-50%); }
.p-oa-cycle__core     { left: 50%; top: 44.62%;  transform: translateX(-50%); }
.p-oa-cycle__fm       { left: 0; top: 52.42%; width: 100%; }
.p-oa-cycle__fmL      { left: 35.51%; }   /* XD: FM の中心 x621 */
.p-oa-cycle__fmR      { left: 66.83%; }   /* XD: AI の中心 x755 */
.p-oa-cycle__name--sm { right: 107.04%; top: 70.51%; }
.p-oa-cycle__sub--sm  { right: 107.27%; top: 80.13%; }
.p-oa-cycle__label--sm{ left: 12.83%; top: 74.62%; transform: translateX(-50%); }
.p-oa-cycle__name--wi { left: 107.04%; top: 70.51%; }
.p-oa-cycle__sub--wi  { left: 107.04%; top: 80.13%; }
.p-oa-cycle__label--wi{ left: 86.47%; top: 74.62%; transform: translateX(-50%); }

.p-oa-agents__list {
  display: grid;
  gap: 30px;          /* XD: 3126 → 3156 / 4021 → 4051 */
  margin-top: 30px;   /* XD: 見出しカード下端 2231 → 1枚目 2261 */
}

/* ---- エージェント1枚（XD: 1140x865 radius5） ---- */
.p-oa-agent__inner {
  padding-block: 65.7px 71px; /* XD 261020: カテゴリの墨がカード上端から 73 / カード下端 +865 */
}

/* XD: NotoSansJP-Medium 20 #333 lh40 ls .07em */
.p-oa-agent__category {
  font-size: 26px;   /* XD 261020: 20 → 26（指示「サイズも大きく」）*/
  font-weight: 500;
  letter-spacing: 0.07em;
  line-height: 40px;
}

/* XD: 2文字の「構築」「運用」だけ字送りが広い（循環図のラベルと同じ扱い）*/
.p-oa-agent__category--wide {
  letter-spacing: 0.15em;
  text-indent: 0.15em;
}

/* XD: IST 42 / 製品名は #000、AI だけ #dd2626 / lh58 ls .025em */
.p-oa-agent__name {
  color: var(--oa-ink-strong);
  font-family: var(--oa-en);
  font-size: 42px;
  font-weight: 400;
  letter-spacing: 0.025em;
  line-height: 58px;
  margin-top: 11px;    /* XD 261020: カテゴリの墨下端から 28 */
}

/* XD: NotoSansJP-Regular 16 #333 ls .05em */
.p-oa-agent__nameJa {
  color: #707070;    /* XD 261020 の指示どおり #333 → #707070 */
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: 1.4;
  margin-top: 2.1px;   /* XD 261020: 英名の墨下端から 14 */
}

/* XD: 高さ29 / radius3 / 1px #dd2626 / 文字 NotoSansJP-Medium 12 #dd2626 ls0 */
/* XD の枠幅は「字幅 + 24」（PC）。3つ目が内側の幅をわずかに超える行があるので、
   折り返し位置を XD に合わせるため ul だけ数px広く取る。 */
.p-oa-agent__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30.1px;  /* XD 261020: タグの枠 +227 */
  width: calc(100% + 6px);
}

.p-oa-agent__tags li {
  align-items: center;
  border: 1px solid var(--oa-accent);
  border-radius: 3px;
  color: var(--oa-accent);
  display: flex;
  font-size: 12px;
  font-weight: 500;
  height: 29px;
  justify-content: center;
  line-height: 1;
  padding-inline: 11px;   /* XD: 枠幅 = 字幅 + 24（枠線 1px x2 + 余白 11px x2） */
}

/* XD: NotoSansJP-Medium 22 #333 lh40 ls .07em */
.p-oa-agent__headline {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.07em;
  line-height: 40px;
  margin-top: 45.1px;  /* XD: タグの墨下端から見出しの墨まで 58 */
}

/* XD: NotoSansJP-Regular 16 #333 lh30 ls .07em */
.p-oa-agent__text {
  font-size: 16px;
  letter-spacing: 0.07em;
  line-height: 30px;
  margin-top: 9.6px;   /* XD: 見出しの墨下端から本文の墨まで 26 */
}

/* XD: 図版 475x271 radius5 / shadow 0 0 20 rgba(0,0,0,.1) / 間隔 50 */
.p-oa-agent__figures {
  display: grid;
  gap: 0 50px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 74px;   /* XD: 本文の墨下端から図版の枠まで */
}

.p-oa-agent__figures img {
  aspect-ratio: 475 / 271;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  object-fit: cover;
  width: 100%;
}

/* XD: NotoSansJP-Regular 14 #333 lh22 ls .02em */
.p-oa-agent__caption {
  font-size: 13px;   /* XD 261020: 14 → 13（指示「サイズも縮小」）*/
  letter-spacing: 0.02em;
  line-height: 22px;
  margin-top: 14px;    /* XD: 図版の墨下端からキャプションの墨まで 19 */
}

@media screen and (max-width: 767.98px) {
  .p-oa-agents {
    padding-block: 16vw 44.5333vw;       /* XD: リードカード下端 1305 → カード上端 1365 */
  }

  .p-oa-agents__headInner {
    padding-block: 11.7937cqw 50.0952cqw;  /* XD 315基準: 37.15 / 157.8（見出しの墨がカード上端から46）*/
  }

  .p-oa-agents__title {
    font-size: 5.7143cqw;     /* 18 */
    line-height: 10.1587cqw;  /* 32 */
    text-align: left;         /* XD SP は左寄せ（PC は center）*/
    text-indent: 0;
  }

  /* 循環図。図形は PC と相似（縮尺 0.5597）なので SVG は共通。
     エージェント名と説明だけ、横に置けないので円の下へ回る。 */
  .p-oa-cycle {
    margin-top: 41cqw;        /* XD 315基準: 129.15（見出し枠下端 → 図形上端 1659.3）*/
  }

  .p-oa-cycle__fig {
    width: 93.88%;                      /* 239.4 / カード内側 255 */
  }

  /* ✕ だけは SP の方が相対的に下にある。SVG は共通なので、
     SP のときだけ viewBox 単位でずらす（見た目で合わせた値）。 */
  .p-oa-cycle__svg line {
    transform: translateY(8.25px);
  }

  /* 図の中は図形幅（SP 239.4）基準。PC と同じ組み方で比率を保つ */
  .p-oa-cycle__name { font-size: 8.3542cqw;  line-height: 11.6959cqw; text-align: center; }  /* XD: 20 / 28 */
  .p-oa-cycle__sub  { font-size: 5.4302cqw;  line-height: 7.5188cqw;  text-align: center; }  /* XD: 13 / 18 */
  .p-oa-cycle__label{ font-size: 5.0125cqw;  line-height: 7.1011cqw; }
  .p-oa-cycle__core { font-size: 4.5948cqw;  line-height: 6.6834cqw; }  /* XD: 11 / 16 */
  .p-oa-cycle__fm   { font-size: 10.8605cqw; line-height: 12.5313cqw; }

  .p-oa-cycle__name--fp { top: -39.11%; }
  .p-oa-cycle__sub--fp  { top: -24.77%; }
  .p-oa-cycle__label--fp{ top: 5.84%; }
  .p-oa-cycle__core     { top: 39.23%; }
  .p-oa-cycle__fm       { top: 56.02%; }   /* 墨で合わせて +2px */
  .p-oa-cycle__fmL      { left: 36.47%; }
  .p-oa-cycle__fmR      { left: 66.04%; }
  .p-oa-cycle__label--sm{ left: 13.08%; top: 74.82%; }
  .p-oa-cycle__label--wi{ left: 86.72%; top: 74.82%; }

  .p-oa-cycle__name--sm { left: 17.63%; right: auto; top: 104.48%; transform: translateX(-50%); }
  .p-oa-cycle__sub--sm  { left: 17.63%; right: auto; top: 130.78%; transform: translateX(-50%); }
  .p-oa-cycle__name--wi { left: 81.95%; top: 104.48%; transform: translateX(-50%); }
  .p-oa-cycle__sub--wi  { left: 81.95%; top: 130.78%; transform: translateX(-50%); }

  .p-oa-agents__list {
    gap: 5.3333vw;        /* XD: 3016→3036 / 4007→4027 */
    margin-top: 5.3333vw; /* XD: 見出しカード下端 2053 → 1枚目 2073 */
  }

  .p-oa-agent__inner {
    padding-block: 6.7733vw 11.52vw;    /* XD: カテゴリの墨がカード上端から 36 / カード高さ 943・971・917 */
  }

  .p-oa-agent__category {
    font-size: 5.3333vw;      /* XD SP: 20 */
    line-height: 10.6667vw;
  }

  /* XD SP はカテゴリの字送りが3枚とも .07em（PC の .15em とは別）*/
  .p-oa-agent__category--wide {
    letter-spacing: 0.07em;
    text-indent: 0;
  }

  /* 字送りは PC と同じ XD の .025em。「Workplace Insight AI」だけ 256.0px になり
     テキスト枠 255px を 1.0px あふれるので nowrap で1行に保つ（XD も1行）。
     あふれるのは枠に対してだけで、カードの内側には 29px 余裕がある。
     ＝ IST の字幅は XD と一致している（書き出し実測 252px に対し 252.5px）。 */
  .p-oa-agent__name {
    font-size: 6.9333vw;      /* 26 */
    line-height: 15.4667vw;   /* 58 */
    margin-top: -3.3333vw;    /* XD: カテゴリの墨下から 16 */
    white-space: nowrap;
  }

  .p-oa-agent__nameJa {
    font-size: 3.4667vw;      /* 13 */
    line-height: 13.0667vw;   /* 49 */
    margin-top: -6.6667vw;    /* XD: 英名の墨下から 9 */
  }

  .p-oa-agent__tags {
    gap: 1.3333vw;            /* 5 */
    margin-top: 1.3333vw;     /* XD: タグの枠 +140 */
    width: calc(100% + 1.6vw);
  }

  .p-oa-agent__tags li {
    font-size: 2.6667vw;      /* 10 */
    height: 6.4vw;            /* 24 */
    line-height: 6.4vw;
    padding-inline: 1.8667vw; /* 7。XD: 枠幅 = 字幅 + 16 */
  }

  .p-oa-agent__headline {
    font-size: 4.5333vw;      /* 17 */
    line-height: 7.4667vw;    /* 28 */
    margin-top: 9.0667vw;     /* XD: 見出しの字 +262 */
  }

  .p-oa-agent__text {
    font-size: 4vw;
    letter-spacing: 0.04em;
    line-height: 6.9333vw;
    margin-top: 4.2667vw;
  }

  /* SP は図版を縦積み（XD: 255x145 を 2つ縦に） */
  .p-oa-agent__figures {
    gap: 6.6667vw 0;          /* キャプション下端から次の図版まで 25 */
    grid-template-columns: 1fr;
    margin-top: 7.2vw;        /* 27。本文の墨下端から XD どおり */
  }

  .p-oa-agent__figures img {
    aspect-ratio: 255 / 145;
  }

  .p-oa-agent__caption {
    font-size: 3.2vw;
    line-height: 5.8667vw;
    margin-top: 4vw;
  }
}

/* --------------------------------------------------------------------------
   CTA（XD: 文字 24 #fff lh40 ls .12em / ボタン 300x50 radius5）
   XD 指示「CTAボタンのホバー」あり
   -------------------------------------------------------------------------- */
.p-oa-cta {
  text-align: center;
}

.p-oa-cta--dark {
  color: var(--oa-white);
  padding-block: 90px 120px;   /* XD: カード下端 4916 から 上90 / ボタン下端から 120（帯上端 5296）*/
}

.p-oa-cta--light {
  background-color: var(--oa-white);
  color: var(--oa-ink);
  padding-block: 100px 120px;    /* XD: 白帯 7222〜7613 / 上100・下120 */
}

.p-oa-cta__text {
  font-size: 24px;
  letter-spacing: 0.12em;
  line-height: 40px;
}

/* XD: 英字の run だけ cs50 = .05em（和文は .12em）。PC・SP 共通 */
.p-oa-cta__text .u-en {
  letter-spacing: 0.05em;
}

.p-oa-cta .p-oa-btn {
  font-size: 16px;
  height: 55px;        /* XD: 264x55 */
  margin-top: 33px;
  padding-inline: 25px;
  width: 264px;
}

.p-oa-cta .p-oa-btn {
  border-radius: 5px;
}

/* 文言が3行で IST を含むぶん、字の位置が暗い CTA と少しずれる。XD: ボタン 6645 */
.p-oa-cta--light .p-oa-btn {
  margin-top: 34px;     /* XD: 白帯 7222〜7613（391）に収まる値 */
}

@media screen and (max-width: 767.98px) {
  .p-oa-cta {
    padding-block: 0 32vw;      /* XD: 下 120 */
  }

  .p-oa-cta--dark {
    margin-top: -31.0667vw;  /* XD: 3枚目カード下端 4944 から 上50 */
  }

  .p-oa-cta--light {
    padding-block: 8vw 21.3333vw;  /* XD: CTA②の白帯 7232〜7535（高さ303）*/
  }

  .p-oa-cta__text {
    font-size: 4.8vw;
    line-height: 9.6vw;
  }

  .p-oa-cta .p-oa-btn {
    font-size: 4.2667vw;
    height: 14.6667vw;        /* XD: 244x55 */
    margin-top: 6.9333vw;     /* 26 */
    width: 65.0667vw;
  }

  /* 文言が3行で IST を含むぶん、字の位置が暗い CTA と少しずれる。XD: ボタン 6698 */
  .p-oa-cta--light .p-oa-btn {
    margin-top: 7.4667vw;     /* 28 */
  }
}

/* --------------------------------------------------------------------------
   リアルデータ取得 / ITOKI OFFICE DEVICES
   -------------------------------------------------------------------------- */
/* XD 261020: 帯は 1366x540。ご支給の書き出し（PC / SP で別素材）を全幅に敷き、
   ロゴを右に重ねる。261013 版の「全幅 1366x458」から構成が変わっている。 */
.p-oa-devices__kv {
  background-color: #000000;
  position: relative;
}

.p-oa-devices__kvImg {
  display: block;
}

.p-oa-devices__kvImg img {
  display: block;
  width: 100%;
}

/* KV に重なる ITOKI OFFICE DEVICES ロゴ（XD: 赤 68x68 + 白文字 / x812 y5531） */
.p-oa-devices__kvLogo {
  left: 59.44%;                /* 812 / 1366 */
  position: absolute;
  top: 43.52%;                 /* (5531 - 5296) / 540 */
  width: 22.3%;                /* 赤角 76→68 の縮小に合わせて 24.9% から下げた */
}

.p-oa-devices__body {
  background-color: var(--oa-white);
  padding-block: 100px 0;      /* XD: 帯下端 5836 から 100 で見出しの枠 5936 */
  text-align: center;
}

/* XD: NotoSansJP-Medium 26 #000 ls .2em / 枠の高さ 38
   （帯下端 5836 +100 → 見出しの枠 5936、+38+50 → 本文の枠 6024 で合う）*/
.p-oa-devices__title {
  color: var(--oa-ink-strong);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 38px;
}

/* XD: NotoSansJP-Regular 16 #333 lh36 ls .1em */
.p-oa-devices__text {
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 36px;
  margin-top: 44px;   /* XD: 見出しの墨下端から本文の墨まで 62 */
}

/* XD: PC は英字の run だけ cs50 = .05em（和文は .1em）。SP は和文と同値なので下で戻す */
.p-oa-devices__text .u-en {
  letter-spacing: 0.05em;
}

/* XD 261021: 背景（#f2f2f2）込みの1枚絵。PC は 1000x510 */
/* 261022 戻し: 下の製品写真（itemFig）と同じ R を付ける */
.p-oa-devices__figure {
  aspect-ratio: 1000 / 510;
  border-radius: 5px;
  margin-inline: auto;
  margin-top: 93px;   /* XD: 本文の墨下端から図版の枠まで */
  max-width: 1000px;
  overflow: hidden;
  width: 100%;
}

.p-oa-devices__figure img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

/* 2カラム（XD: 左 x183 / 右 x698） */
.p-oa-devices__items {
  display: grid;
  gap: 0 30px;          /* XD: 668 → 698 */
  grid-template-columns: repeat(2, 1fr);
  margin-inline: auto;
  margin-top: 30px;     /* 全体図との間隔。左右とも 30 で揃える */
  max-width: 1000px;    /* XD: 183 → 1183 */
  text-align: left;
}

/* 比率で持つ。高さ固定だと縮小時に比が崩れる。
   XD の表示枠は PC・SP とも左右そろって 485:295（PC で x183/x699、幅485・高さ295）。
   素材もその枠で書き出してあるので、枠いっぱいに置くだけでよい。 */
.p-oa-devices__itemFig {
  aspect-ratio: 485 / 295;
  background-color: #f8f8f8;
  border-radius: 5px;
  overflow: hidden;
}

.p-oa-devices__itemFig img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* XD: IST 26 / 製品名（Box・Sensor）が #dd2626、Office は #333 / lh30 */
.p-oa-devices__itemName {
  font-family: var(--oa-en);
  font-size: 26px;
  font-weight: 400;
  line-height: 30px;
  margin-top: 33px;    /* XD: 画像の下端から見出しの字まで 38px（書き出しで実測）*/
}

/* XD: NotoSansJP-Regular 16 #313131 lh28 ls .05em */
/* Safari は行末の「。」を枠内に収めようとして1行増える（Chromium は収まる）。
   allow-end で行末の約物をぶら下げれば XD どおり3行になる。Chromium はこの
   プロパティを解釈しないので PC の見え方は変わらない */
.p-oa-devices__itemText {
  hanging-punctuation: allow-end;
  color: var(--oa-ink-devices);
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: 28px;
  margin-top: 21px;   /* XD: 見出しの字の下端から本文まで 37px（書き出しで実測）*/
}

@media screen and (max-width: 767.98px) {
  /* XD: 帯 375x335 に画像 596x335 を左右へはみ出させて置く。
     261013 版にあった黒帯とグラデーションは無くなり、ロゴも白地側へ移った。 */
  /* SP はご支給の SP 用素材（375x332）をそのまま全幅で敷く */

  .p-oa-devices__body {
    padding-block: 14.6667vw 12.2667vw;   /* XD: 帯下端からロゴまで 55 / 白地 5637〜7232 */
    text-align: left;
  }

  .p-oa-devices__bodyLogo {
    display: block;
    margin-bottom: 13.3333vw;   /* XD: ロゴから見出しまで 50 */
    margin-inline: auto;   /* XD: x=71.5 ＝ (375 - 232) / 2 で左右中央 */
    width: 62.03vw;        /* XD: 赤角 52px ＝ PC 68.083px の 0.7637 倍 */
  }

  .p-oa-devices__title {
    color: var(--oa-ink);     /* SP は #333333（PC は #000000） */
    font-size: 5.0667vw;      /* 19 */
    letter-spacing: 0.1em;    /* XD SP は cs100。PC の .2em とは別 */
    line-height: 9.3333vw;    /* 35 */
  }

  .p-oa-devices__text {
    font-size: 4vw;
    letter-spacing: 0.06em;
    line-height: 8vw;            /* XD: 30 */
    margin-top: 5.9733vw;        /* XD: 見出しの墨から本文の墨まで 91 */
  }

  .p-oa-devices__text .u-en {
    letter-spacing: 0.06em;      /* XD SP は英字も和文と同じ cs60 */
  }

  .p-oa-devices__figure {
    aspect-ratio: 315 / 187;     /* XD 261021: 160 → 187 に変更 */
    margin-top: 13.7333vw;       /* XD: 本文の墨下端 → 図版上端 */
  }

  .p-oa-devices__items {
    gap: 10.2667vw 0;            /* XD: Office Box 本文の墨下端 → Sensor 枠上端 6786 */
    grid-template-columns: 1fr;
    margin-top: 10.6667vw;       /* XD: 図版下端 6311 → 枠上端 6351 */
  }

  .p-oa-devices__itemName {
    font-size: 6.9333vw;
    line-height: 8vw;            /* XD: 30 */
    margin-top: 7.7333vw;        /* XD: 画像から見出しの墨まで */
  }

  .p-oa-devices__itemText {
    font-size: 4vw;
    line-height: 6.9333vw;
    margin-top: 4.8vw;           /* XD: 見出しの墨から本文の墨まで 50 */
  }
}

/* --------------------------------------------------------------------------
   関連サービス（XD: #f5f5f5 / 204px のカードが 5枚・間隔 30）
   XD 指示「ホバー時はサムネイルを拡大表示させる」
   XD 指示「こちらのレイアウトになるかもしれません」
   -------------------------------------------------------------------------- */
.p-oa-service {
  background-color: var(--oa-service);
  padding-block: 100px 120px;     /* XD: 枠→見出し 100 / 見出し→リスト 80 / 下 120 */
  text-align: center;
}

/* XD: IST 50 #333 ls .02em */
.p-oa-service__en {
  font-family: var(--oa-en);
  font-size: 50px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 58px;
}

/* XD: NotoSansJP-Regular 16 #333 ls .2em */
.p-oa-service__ja {
  color: var(--oa-ink-strong);
  font-size: 28px;        /* XD 261020: 「Our Service」が無くなり見出しが和文 28px に */
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 42px;
  text-indent: 0.2em;
}

.p-oa-service__list {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 80px;      /* XD: 見出しからリストまで 80 */
}

.p-oa-service__link {
  border-radius: 4px;
  container-type: inline-size;   /* 白ボックスの中身をカード幅基準で持つため */
  display: block;
  overflow: hidden;
}

/* XD: カードは 204x202（写真 115 ＋ 白ボックス 87）。
   写真は横長の元画像を、カードごとに違う位置で切り出している。 */
.p-oa-service__thumb {
  aspect-ratio: 204 / 115;
  overflow: hidden;
  position: relative;
}

.p-oa-service__img {
  height: auto;
  max-width: none;   /* ベースの max-width:100% が効くと切り出せない */
  position: absolute;
  transition: transform 0.7s ease;
  transform-origin: center;
}

/* カードごとの切り出し位置（XD の配置から換算） */
.p-oa-service__list li:nth-child(1) .p-oa-service__img { width: 210.78%; left: -100.98%; top: -33.04%; }
.p-oa-service__list li:nth-child(2) .p-oa-service__img { width: 182.84%; left: -55.39%;  top: -24.35%; }
.p-oa-service__list li:nth-child(3) .p-oa-service__img { width: 170.59%; left: -46.32%;  top: -17.39%; }
.p-oa-service__list li:nth-child(4) .p-oa-service__img { width: 145.10%; left: -32.84%;  top: -2.61%;  }
/* 5枚目だけ XD が2枚の写真を左右に並べている。サムネイル寸法どおりに組んだ
   1枚（左 img_01 / 右 img_02_retouch）を枠いっぱいに置く。 */
.p-oa-service__list li:nth-child(5) .p-oa-service__img { width: 100%;    left: 0;        top: 0; }

@media (hover: hover) {
  .p-oa-service__link:hover .p-oa-service__img {
    transform: scale(1.08);
  }
}

/* 白ボックスの中身は XD のカード（204px幅）を基準に cqw で持つ。
   px 固定だと 3カラムでカードだけ広がり、ロゴも字も小さく見えてしまう。 */
.p-oa-service__data {
  background-color: var(--oa-white);
  min-height: 61.2745cqw;              /* XD: 白ボックス 204x125 */
  padding: 12.7451cqw 4.902cqw 0;      /* 26 / 10 */
}

/* XD: NotoSansJP-Regular 12 #000 ls .02em */
.p-oa-service__cat {
  color: var(--oa-ink-strong);
  font-size: 5.3922cqw;   /* XD 261020 の指示「11px相当に縮小」*/
  letter-spacing: 0.02em;
  line-height: 1.6;
}

.p-oa-service__logo {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-top: 6.8627cqw;   /* 14。XD: カテゴリの字下端 7211 → ロゴ 7229 */
  min-height: 17.1569cqw;  /* 35 */
}

/* ロゴは XD の実測幅に合わせる。高さ揃えだと1枚ずつ大きさが変わってしまう。 */
.p-oa-service__logo img {
  height: auto;
  max-width: none;
  width: auto;
}

.p-oa-service__list li:nth-child(1) .p-oa-service__logo img { width: 74.5098cqw; }  /* 152 */
.p-oa-service__list li:nth-child(2) .p-oa-service__logo img { width: 56.3725cqw; }  /* 115 */
.p-oa-service__list li:nth-child(3) .p-oa-service__logo img { width: 62.7451cqw; }  /* 128 */
.p-oa-service__list li:nth-child(4) .p-oa-service__logo img { width: 64.2157cqw; }  /* 131 */
.p-oa-service__list li:nth-child(5) .p-oa-service__logo img { width: 69.1176cqw; }  /* 141 */

/* 1365px までは 5枚だと窮屈なので 3カラムに折り返す（5カラムは XD 幅の 1366px から）*/
/* 261022 戻し: 5 カラムを保つ帯では、カードを稼ぐため間隔も詰める（XD は 30）*/
@media screen and (min-width: 1025px) and (max-width: 1365.98px) {
  .p-oa-service__list {
    gap: 20px;
  }
}

/* 261022 戻し: 1025〜1365px は 5カラムのまま。3カラムへ落とすのは 1024px 以下から
   （261023 でハンバーガーの境界は 1259px に移したが、カラム数の境界は 10/22 に
   ご確認いただいた 1024/1025 のまま据え置いている）*/
@media screen and (min-width: 768px) and (max-width: 1024.98px) {
  .p-oa-service__list {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 40px;
  }
}

@media screen and (max-width: 767.98px) {
  .p-oa-service {
    padding-block: 13.3333vw 13.6267vw;  /* XD: 枠→見出し 50 / 7535〜8212（高さ677）*/
  }


  /* XD の行送り（58 / 42）は枠の高さで、字は枠の上寄りに置かれている。
     そのまま行boxにすると字同士が詰まって見えるので、字の位置を基準に組む。 */
  .p-oa-service__en {
    font-size: 8.5333vw;      /* 32 */
    line-height: 10.1333vw;   /* 38 */
  }

  .p-oa-service__ja {
    font-size: 6.4vw;         /* XD SP: 24 */
    line-height: 9.6vw;       /* 36 */
    margin-top: 0;
  }

  /* SP は横並びカード（XD: 写真 左 / 白ボックス 182x86 右・radius 0 4 4 0） */
  /* XD の SP はカードだけ左右 20px（336px幅）で、本文の 315px より広い */
  .p-oa-service__list {
    gap: 4vw;
    grid-template-columns: 1fr;
    margin-inline: -2.6667vw;
    margin-top: 13.3333vw;  /* XD: 見出しの墨下端 7615 → カード上端 7671 */
  }

  .p-oa-service__link {
    display: grid;
    grid-template-columns: 40.8vw 1fr;     /* 写真 153 / 白ボックス 182 */
    height: 22.9333vw;                     /* 86 */
  }

  .p-oa-service__thumb {
    aspect-ratio: auto;
    height: 100%;
  }

  .p-oa-service__data {
    border-radius: 0 1.0667vw 1.0667vw 0;
    height: 100%;
    min-height: 0;
    padding: 5.6vw 2.6667vw 0;   /* XD: カテゴリ名の字が カード上端+24 */
  }

  .p-oa-service__cat {
    font-size: 2.6667vw;
    font-weight: 500;
  }

  .p-oa-service__logo {
    margin-top: 1.6vw;
    min-height: 7.2vw;
  }

  /* SP は PC の約 0.77 倍。XD の実測幅に合わせる。 */
  .p-oa-service__list li:nth-child(1) .p-oa-service__logo img { width: 30.9333vw; }  /* 116 */
  .p-oa-service__list li:nth-child(2) .p-oa-service__logo img { width: 23.4667vw; }  /* 88 */
  .p-oa-service__list li:nth-child(3) .p-oa-service__logo img { width: 26.1333vw; }  /* 98 */
  .p-oa-service__list li:nth-child(4) .p-oa-service__logo img { width: 26.6667vw; }  /* 100 */
  .p-oa-service__list li:nth-child(5) .p-oa-service__logo img { width: 28.8vw; }     /* 108 */
}

/* --------------------------------------------------------------------------
   お問い合わせ（XD: #ddd + 黒29.5% = #9c9c9c / 1366x510）
   -------------------------------------------------------------------------- */
.p-oa-contact {
  background-color: rgba(0, 0, 0, 0.295);
  color: var(--oa-white);
  padding-block: 91px 124px;   /* XD: お問い合わせ節 8193〜8703（高さ510）*/
  text-align: center;
}

.p-oa-contact__en {
  font-family: var(--oa-en);
  font-size: 50px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 58px;
}

.p-oa-contact__ja {
  font-size: 16px;
  letter-spacing: 0.2em;
  line-height: 42px;
  margin-top: -8px;
}

/* XD: NotoSansJP-Regular 23 #fff lh42 ls .15em */
.p-oa-contact__text {
  font-size: 23px;
  letter-spacing: 0.15em;
  line-height: 42px;
  margin-top: 41px;
}

/* XD: ボタン 230x50 */
.p-oa-contact .p-oa-btn {
  border-radius: 5px;
  font-size: 16px;
  height: 55px;       /* XD: 216x55 */
  margin-top: 23px;
  padding-inline: 25px;
  width: 216px;
}

@media screen and (max-width: 767.98px) {
  .p-oa-contact {
    padding-block: 14.1333vw 16vw;       /* XD: お問い合わせ節 8212〜8677（高さ465）*/
  }

  .p-oa-contact__en {
    font-size: 8.5333vw;      /* 32 */
    line-height: 10.1333vw;   /* 38 */
  }

  .p-oa-contact__ja {
    font-size: 3.7333vw;      /* 14 */
    line-height: 5.8667vw;    /* 22 */
    margin-top: 1.3333vw;
  }

  .p-oa-contact__text {
    font-size: 4.8vw;         /* 18 */
    letter-spacing: 0.07em;
    line-height: 9.6vw;       /* 36 */
    margin-top: 11.4667vw;    /* XD: お問い合わせの字下端 7639 → 本文 7700 */
  }

  .p-oa-contact .p-oa-btn {
    font-size: 4.2667vw;
    height: 14.6667vw;        /* XD: 196x55 */
    margin-top: 11.7333vw;    /* 44 */
    width: 52.2667vw;
  }
}

/* --------------------------------------------------------------------------
   フッター（XD: 白 1366x183 / 文字 NotoSansJP-Light 11 #8d8d8d ls .08em）
   -------------------------------------------------------------------------- */
.p-oa-footer {
  background-color: var(--oa-white);
  padding: 27px 30px 17px;   /* XD: フッター 7926〜8109（高さ183）*/
}

.p-oa-footer__logo img {
  width: 101px;
}

.p-oa-footer__bottom {
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
  margin-top: 84px;   /* XD: ロゴの字下端 7975 → リンクの字 8072 */
}

.p-oa-footer__links {
  display: flex;
  gap: 0 33px;   /* XD: リンクの字 30 / 127 / 224 */
}

.p-oa-footer__links a {
  align-items: center;
  color: var(--oa-ink-weak);
  display: flex;
  font-size: 11px;
  font-weight: 300;
  gap: 0 6px;
  letter-spacing: 0.08em;
  line-height: 30px;
  transition: opacity 0.3s ease;
}

.p-oa-footer__links img {
  width: 10px;
}

@media (hover: hover) {
  .p-oa-footer__links a:hover {
    opacity: 0.6;
  }
}

.p-oa-footer__copy {
  color: var(--oa-ink-weak);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.08em;
  line-height: 30px;
}

@media screen and (max-width: 767.98px) {
  .p-oa-footer {
    padding: 9.0667vw 8.5333vw 6.1333vw;   /* 34 / 32 / 23 */
  }

  /* XD: ロゴの字下端 8043 → リンクの字 8134。行送り 30 のぶん、縦の gap は持たせない */
  .p-oa-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
    margin-top: 21.0667vw;            /* 79 */
  }

  .p-oa-footer__links {
    gap: 0 4.5333vw;   /* 17。XD: リンクの字 32 / 113 / 194 */
  }

  .p-oa-footer__links a,
  .p-oa-footer__copy {
    color: #767676;           /* SP は #767676（PC は #8d8d8d） */
    font-size: 2.9333vw;      /* 11 */
  }
}

/* --------------------------------------------------------------------------
   フローティングのお問い合わせ
   XD 指示「『お問い合わせ』ボタンはフローティング仕様に」
   -------------------------------------------------------------------------- */
/* XD では SP のみ。PC はヘッダーのボタンが同じ役割を持つ。 */
.p-oa-float {
  display: none;
}

@media screen and (max-width: 767.98px) {
  .p-oa-float {
    bottom: 5.3333vw;
    display: block;
    left: 5.3333vw;
    position: fixed;
    right: 5.3333vw;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 98;
  }

  /* お問い合わせ節まで来たら引っ込める */
  .p-oa-float[data-visible='false'] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .p-oa-float .p-oa-btn {
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    font-size: 3.7333vw;
    height: 10.6667vw;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   PC / SP の出し分け
   XD 指示「SP用に出し分けください」
   -------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
  [data-display='sp'] {
    display: none !important;
  }
}

@media screen and (max-width: 767.98px) {
  [data-display='pc'] {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   タブレット（768〜1279）の改行
   XD にデザインが無い幅帯。PC 用の <br> をそのまま効かせると、区切られた
   ひとかたまりがさらに折り返して「す。」のような端数の行ができるので、
   収まらない幅では PC の <br> を止め、必要なところへタブレット用を置く。
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px), screen and (min-width: 1215px) {
  [data-display='tb'] {
    display: none !important;
  }
}

/* DEVICES の見出しは 1行で 781px 要る。タブレットでは枠に入りきらず
   「連携」の途中で折れるので、SP と同じ位置（読点のあと）で改行させる */
@media screen and (min-width: 768px) and (max-width: 899.98px) {
  .p-oa-devices__title br[data-display='sp'] {
    display: inline !important;
  }
}

/* 循環図の見出しは 1024px 以上なら XD どおり2行に収まるので、
   タブレット用の改行は 1023px までに限る */
@media screen and (min-width: 1024px) {
  .p-oa-agents__title br[data-display='tb'] {
    display: none !important;
  }
}

/* DEVICES の本文は 826px 以上なら XD どおり3行に収まる（実測）。
   改行を止めて自動折り返しにする幅では、中央寄せだと行端が揃わないので左寄せにする */
@media screen and (min-width: 768px) and (max-width: 825.98px) {
  .p-oa-devices__text {
    text-align: left;
  }

  .p-oa-devices__text br[data-display='pc'] {
    display: none;
  }
}

/* エージェントの本文は 1215px 以上でないと XD どおり2行に収まらない（実測）*/
@media screen and (min-width: 768px) and (max-width: 1214.98px) {
  .p-oa-agent__text br[data-display='pc'] {
    display: none;
  }
}