@charset "UTF-8";
/****************************************************************************
****    site-chrome.css
****    OPRION 共通シェル(コーポレート面とメディア面=ワークレシピの両方で読み込む)。
****    ヘッダー/ドロワー/フッター/フォーカス/トークン/書体、両面で同じに見せる部品(ページ見出し帯・パンくず・
****    ボタン・入力・チップ・リンク・購読帯・空状態・ページ送り)と、メディア面だけのサブナビ。
****    コーポレート面の本文は corporate.css、メディア面の本文は docs.css / media.css。それらは
****    この部品を再定義しない(面ごとの差は「色の印(黄)」と配置だけ)。
****    読み込み順は style.css の後(コーポレート面は backoffice-ai.css の後)。
****
****    目次
****      0  Tokens                         5  Page header band + breadcrumb + section rhythm
****      1  Skip link / focus / type        6  Buttons
****      2  Header + mobile drawer          7  Fields
****      3  Footer                          8  Chips / tabs / inline links / meta label
****      4  Scroll-top / tap / motion       9  Subscribe band
****                                        10  Empty state / pagination
****                                        11  Media sub-nav (.wr-subnav)
****************************************************************************/

/* ---- 0. Tokens ---------------------------------------------------------- */
:root {
  /* ---- ブランドカラー(VIガイドライン 2025-11-27 ver.1): スカイ #2a78b3 / ネイビー #1f2c5c。
     この2色だけを基準にし、他の色は「ネイビーを白に混ぜた中性色」か「2色の混色」。紫・藤色は使わない。
     (color-mix の結果は計算済みの16進で書く。ブラウザが color(srgb …) で返すとコントラスト計測ができないため) ---- */
  --corp-ink: #1f2c5c; /* ネイビー: 文字・罫線・濃色の面 */
  --corp-sky: #2a78b3; /* スカイ: アクセント(塗り・枠・フォーカス・hover)。白地で 4.7:1。小さな文字には使わない */
  --corp-sky-text: #2867a0; /* スカイを暗くした文字用(リンクなど)。白で 5.9:1・紙色で 5.4:1 */
  --corp-deep: #203566; /* 濃色面のグラデの明るい側(ネイビー 88% + スカイ 12%) */
  --corp-mid: #234a7f; /* ネイビー 60% + スカイ 40%(事例サムネイルの濃淡) */
  --corp-glow: #9fc2dd; /* 暗い面のフォーカスリング・トグルの光: スカイ 45% + 白 55% */
  --corp-light: #eff0f4; /* 暗い面の上の文字・明色ベタ: ネイビー 7% + 白 */
  --corp-paper: #f4f4f7; /* 紙色: ネイビー 5% + 白 */
  --corp-pale-blue: #edf7ff; /* 目標画面の淡青面。本文面の背景にはこれを使う */
  --corp-grid: #e9eaef; /* 方眼・薄い面: ネイビー 10% + 白 */
  --corp-rule: #ced1db; /* 罫線: ネイビー 22% + 白 */
  --corp-soft: #5e678a; /* 補助文字: ネイビー 72% + 白。白で 5.6:1・紙色で 5.1:1 */
  --corp-dim: #b1b5c6; /* 暗い面の補助文字: ネイビー 35% + 白。ネイビー上で 6.5:1 */
  --corp-core-line: #4c567d; /* 暗い面の上の細い線: ネイビー 80% + 白 */
  --corp-white: #fff;
  --corp-yellow: #ffd233; /* メディア面の印と、スイッチの「入」(トップのトグル、手元ボードのスイッチ、格子を流れる光)と、売りのマーカー(.corp-mark)。文字色・枠・フォーカス・広い背景には使わない */
  --corp-switch: var(--corp-yellow); /* スイッチの「入」の色。色を替えるときはこの2つだけを変える */
  --corp-switch-knob: var(--corp-ink); /* 「入」のスイッチのつまみ */
  --corp-mark: color-mix(in srgb, var(--corp-yellow) 78%, transparent); /* 売りのマーカー。コーポレート面の .corp-mark だけ */
  /* スイッチの質感(色相は変えず、明るさだけを動かす)。黄と紺から導くので、上の2つを替えればここも付いてくる */
  --corp-switch-shade: color-mix(in oklch, var(--corp-switch) 84%, black); /* 溝の内側の影と縁 */
  --corp-switch-cast: color-mix(in oklch, var(--corp-switch) 70%, black); /* つまみが面に落とす広い影 */
  --corp-switch-contact: color-mix(in oklch, var(--corp-switch) 52%, black); /* つまみの接地の影 */
  --corp-switch-knob-light: color-mix(in srgb, var(--corp-white) 15%, var(--corp-switch-knob)); /* つまみの光の当たる側 */
  --corp-switch-knob-shade: color-mix(in srgb, var(--corp-switch-knob) 55%, black); /* つまみの陰の側 */
  /* 面の質感(トグルと同じ言葉: 粒子・影・縁)。当てる所は決まっている(仕様 第9ラウンド §2)。節や一覧には足さない */
  --corp-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .17 0 0 0 0 .36 .7 0 0 0 -.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.6 0 0 0 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); /* 紙色の面に重ねる粒子(紺の粒と白の粒の2枚。面の明るさは変えない)。background の層として使う */
  --corp-grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .7 0 0 0 -.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); /* 紺の面に重ねる粒子(白の粒) */
  --corp-lift: 0 1px 2px color-mix(in srgb, var(--corp-ink) 10%, transparent), 0 14px 34px -10px color-mix(in srgb, var(--corp-ink) 18%, transparent); /* 「届く物」のカードだけ */
  --corp-press: inset 0 -2px 0 color-mix(in srgb, black 28%, transparent), inset 0 1px 0 color-mix(in srgb, var(--corp-white) 16%, transparent), 0 1px 2px color-mix(in srgb, var(--corp-ink) 22%, transparent); /* 紺のボタンの縁 */
  --corp-press-light: inset 0 -2px 0 color-mix(in srgb, var(--corp-ink) 9%, transparent), 0 1px 2px color-mix(in srgb, var(--corp-ink) 10%, transparent); /* 白いボタンの縁 */
  --corp-recess: inset 0 1px 2px color-mix(in srgb, var(--corp-ink) 12%, transparent); /* 入力欄の内側 */
  --corp-error: #c0392b;
  --corp-error-bg: rgba(192, 57, 43, 0.06);
  --corp-error-light: #ffb9c4; /* 暗い帯の上のエラー文字 */
  --corp-line-dark: rgba(239, 240, 244, 0.16);
  --corp-light-a06: rgba(239, 240, 244, 0.06);
  --corp-light-a14: rgba(239, 240, 244, 0.14);
  --corp-light-a38: rgba(239, 240, 244, 0.38);
  --corp-light-a50: rgba(239, 240, 244, 0.5);
  --corp-bar-bg: rgba(255, 255, 255, 0.97);
  --corp-ink-a96: rgba(31, 44, 92, 0.96);
  --corp-ink-a90: rgba(31, 44, 92, 0.9);
  --corp-ink-a72: rgba(31, 44, 92, 0.72);
  --corp-glow-a22: rgba(159, 194, 221, 0.22);
  --corp-glow-a45: rgba(159, 194, 221, 0.45);
  --corp-sky-a90: rgba(42, 120, 179, 0.9);
  --corp-sky-a45: rgba(42, 120, 179, 0.45);

  /* 繰り返し使う背景: 濃色面(方眼 + スカイの光 + ネイビー)、薄色面(方眼 + 紙色)、CTA帯 */
  --corp-dark-bg:
    linear-gradient(rgba(239, 240, 244, 0.055) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(239, 240, 244, 0.055) 1px, transparent 1px) 0 0 / 32px 32px,
    radial-gradient(120% 90% at 100% 0%, var(--corp-sky-a90) 0%, transparent 55%),
    linear-gradient(180deg, var(--corp-deep), var(--corp-ink));

  /* 薄色面(方眼 + 紙色)、CTA帯、縦のリズム(メディア面の本文もこれを使う) */
  --corp-paper-bg:
    linear-gradient(var(--corp-grid) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--corp-grid) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--corp-paper);
  /* 公式グラデーション(VI): 135度 スカイ → ネイビー。CTA帯・購読帯の面 */
  --corp-band-bg: linear-gradient(135deg, var(--corp-sky), var(--corp-ink));
  --corp-section-y: clamp(56px, 8vw, 104px);
  --corp-end-y: 120px; /* 最後のブロックとフッターの間(旧 .page-end の余白) */
  --corp-band-gap: clamp(32px, 4.7vw, 60px); /* ヘッダー(サブナビ)の下端からパンくず/ラベルまで */

  --corp-font: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --corp-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --corp-radius: 4px;
  --corp-radius-lg: 6px;
  --corp-radius-soft: 14px; /* 案内役(チャット)の中だけ。ほかのページの角丸は上の2つ */
  --corp-gutter: 20px;
  --corp-header-h: 68px;

  /* 寸法と文字の基準(仕様 第14ラウンド §1)。トップの値が元。コーポレート面の各ページの CSS はこれを読み、同じ数字を書かない */
  --corp-content-w: min(1200px, calc(100% - 2 * var(--corp-gutter))); /* 本文の幅。左端はヘッダーのロゴと同じ線 */
  --corp-section-y: clamp(40px, 5vw, 64px); /* 節の上下の余白 */
  --corp-h2: clamp(25px, 3.2vw, 40px); /* 節の見出し */
  --corp-h2-lh: 1.35;
  --corp-h2-ls: -.02em;
  --corp-h3-lg: 24px; /* カードの題 */
  --corp-h3: 20px; /* 小見出し */
  --corp-h3-sm: 18px; /* 項目 */
  --corp-body-lh: 1.8; /* 文章 */
  --corp-body-lh-tight: 1.7; /* カードや一覧の中 */
  --corp-label-size: 13px; /* 節のラベル(等幅・Title Case) */
  --corp-label-ls: .04em;

  --corp-btn-h: 56px;
  --corp-btn-minw: 260px;
  --corp-chip-h: 36px;
  --corp-lh-ui: 1.6; /* UI・カード・説明文 */
  --corp-lh-long: 1.9; /* 長文(記事本文・リード) */
  --corp-focus: var(--corp-sky); /* 暗い面では --corp-glow に差し替える */
}

/* 固定ヘッダーの下にアンカー先が潜り込まないように。メディア面の --wr-header-offset(sticky/TOC/アンカー)も同じ高さに揃える */
:root {
  --wr-header-offset: var(--corp-header-h);
}

html {
  scroll-padding-top: calc(var(--corp-header-h) + 24px);
}

/* 画面の下に固定で重なる部品(案内役のランチャー、スマホの固定 CTA バー)の下にフォーカス先が潜り込まないよう、
   その高さぶんを下にも空ける。高さの式は site-assistant.css の --corp-assistant-base と同じ */
html:has(body.has-site-assistant) {
  scroll-padding-bottom: calc(var(--corp-assistant-edge, 24px) + var(--corp-assistant-launcher-h, 52px) + 12px);
}

@media screen and (max-width: 780px) {
  html:has(body.has-corporate-cta-bar) {
    scroll-padding-bottom: calc(var(--corp-bar-h, 73px) + 12px + env(safe-area-inset-bottom));
  }

  html:has(body.has-site-assistant.has-corporate-cta-bar) {
    scroll-padding-bottom: calc(var(--corp-bar-h, 73px) + 12px + var(--corp-assistant-launcher-h, 52px) + 12px + env(safe-area-inset-bottom));
  }
}

/* ---- 1. Skip link / focus / base type ------------------------------------ */
.wr-skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10000; /* #header(9999)より上。フォーカスされたとき、ロゴの下に隠れない */
  padding: 10px 14px;
  background: var(--corp-white);
  color: var(--corp-ink);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-150%);
  --corp-focus: var(--corp-glow); /* 紺のヘッダーの上に出るので、暗い面のリング */
}

.wr-skip-link:focus {
  transform: translateY(0);
}

/* ヘッダー/フッター/サブナビの書体。:where() で詳細度を 0 にし、個別ルールの邪魔をしない */
:where(#header, #footer, .wr-subnav) {
  font-family: var(--corp-font);
}

/* 旧 reset の「全要素 letter-spacing .08em」は和文には広すぎる(body 全体の同じルールは corporate.css) */
body :where(#header, #footer, .wr-subnav) :is(h1, h2, h3, h4, h5, h6, p, li, div, span) {
  letter-spacing: 0.02em;
}

/* フォーカスリングは全ページ・全部品で1種類: 3px のスカイ(暗い面では明るいスカイ)。黄色は白地で読めないので使わない */
:is(.home-hero-sec, .home-statement-sec, .corporate-cta, .wr-band, .about-security_box,
  .recruit-position-sec, .diagnostic-cta, .nav-menu_list) {
  --corp-focus: var(--corp-glow);
}

:where(a, button, summary, [tabindex], input, select, textarea):focus-visible {
  outline: 3px solid var(--corp-focus);
  outline-offset: 3px;
}

/* button / input は font を継承しない(ブラウザ既定の Arial 13px になる) */
body :is(button, input, select, textarea) {
  font-family: inherit;
}

/* 見出しは行末の1〜2文字残りを避ける(和文の孤立行)。balance だけだと語の途中で折れるので、文節単位の auto-phrase を併せる */
:where(h1, h2, h3, .sec-title_jp, .corporate-cta_title, .wr-band_title) {
  text-wrap: balance;
  word-break: auto-phrase;
}

/* 視覚的には隠し、読み上げにだけ出す(両面共通)。表の caption など、クラスを足せない要素にも同じ宣言を当てる */
.sr-only,
.ms-table_caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- 2. Header + mobile drawer ---------------------------------------------------------- */
/* 追従。script.js は #header のロゴ色クラスしか触らないので、背景と文字色は corporate.js の
   .is-stuck とここで決める。--h-* は「いまの背景の上で読める色」。 */
#header {
  --h-fg: var(--corp-ink);
  --h-btn-bg: var(--corp-ink);
  --h-btn-fg: var(--corp-white);
  --h-focus: var(--corp-sky);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

#header.header-top-dark,
#header.is-stuck {
  --h-fg: var(--corp-light);
  --h-btn-bg: var(--corp-light);
  --h-btn-fg: var(--corp-ink);
  --h-focus: var(--corp-glow);
}

/* 固着時の背景バー(PC/SP共通)。ロゴとメニューが個別に fixed なスマホでも効くよう疑似要素で描く */
#header::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--corp-header-h);
  background: var(--corp-ink-a96);
  border-bottom: 1px solid var(--corp-line-dark);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--corp-white) 8%, transparent); /* 下端の1pxの光(トグルの縁と同じ言葉) */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

@supports (backdrop-filter: blur(1px)) {
  #header::before {
    background: var(--corp-ink-a90);
    backdrop-filter: blur(10px);
  }
}

#header.is-stuck::before {
  opacity: 1;
}

/* ロゴは納品された画像をそのまま使う(色替え・マスク・フィルタ禁止): 明るい上端は公式の横ロゴ(main-logo_b.png)、
   ヒーロー上・固着時・開いたドロワーは公式の白ロゴ(main-logo_w.png)。切り替えは2枚の opacity だけ */
#header.header-top-dark .main-logo_img--dark,
#header.is-stuck .main-logo_img--dark {
  opacity: 0;
}

#header.header-top-dark .main-logo_img--light,
#header.is-stuck .main-logo_img--light {
  opacity: 1;
}

#header a:focus-visible,
#header .menu-icon:focus-visible {
  outline-color: var(--h-focus);
}

.header-container {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: 100%;
  max-width: none;
  padding: 18px max(var(--corp-gutter), calc((100% - 1200px) / 2));
  transition: padding 0.25s ease;
}

#header.is-stuck .header-container {
  padding-top: 10px;
  padding-bottom: 10px;
}

.main-logo {
  transition: width 0.25s ease;
}

#header.is-stuck .pc_part .main-logo {
  width: 140px;
}

/* PC ナビ: 丸いピルをやめ、背景の上に直接置く */
ul.menu-list_area {
  gap: clamp(8px, 1.6vw, 22px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

#header .text-en {
  font-family: var(--corp-font);
}

li.menu-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-bottom: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--h-fg);
  opacity: 0.82;
}

li.menu-list a:hover,
li.menu-list a.menu-list_current {
  color: var(--h-fg);
  opacity: 1;
}

.menu-list a::after {
  bottom: 8px;
  background: currentColor;
}

li.menu-list a.menu-list_current::after {
  width: 100%;
  left: 0;
}

ul.header-contact {
  margin-left: clamp(10px, 1.6vw, 22px);
}

.header-consult a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--corp-radius);
  background: var(--h-btn-bg);
  color: var(--h-btn-fg);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--corp-press-light); /* 帯はいつも濃紺で、ボタンは明色(--h-btn-bg は白か明色) */
  transition: background-color 0.2s ease, color 0.2s ease;
}

.header-consult a:hover {
  background: var(--corp-sky);
  color: var(--corp-white);
}

.header-consult a:active {
  transform: translateY(1px);
  box-shadow: none;
}

@media screen and (max-width: 1024px) and (min-width: 781px) {
  .header-container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .main-logo {
    width: 140px;
    max-width: 140px;
  }

  li.menu-list a {
    font-size: 12px;
  }

  .header-consult a {
    padding: 0 12px;
    font-size: 12px;
  }
}

/* SP: ハンバーガーは背景に合わせた色。ドロワーを開いたら白 */
@media screen and (max-width: 780px) {
  :root {
    --corp-header-h: 64px;
  }

  .main-logo {
    top: 16px;
    left: 20px;
    width: 140px;
    max-width: 140px;
  }

  /* タップ領域を 44x44px にするため、ボタンは 44px 幅(左右に 6px ずつ広げる)。線は 32px のまま同じ位置に置く。
     旧 common.css の .menu-icon span:*-child(left: 0 / 10px)に勝つため、同じ詳細度でこの後に書く */
  .menu-icon {
    top: 24px;
    right: 14px;
    width: 44px;
  }

  .menu-icon span {
    width: 32px;
    background-color: var(--h-fg);
  }

  .menu-icon span:first-child,
  .menu-icon span:nth-child(2),
  .menu-icon span:last-child {
    left: 6px;
  }

  .menu-icon_open span {
    background-color: var(--corp-light);
  }

  .nav-menu_list {
    background:
      radial-gradient(120% 90% at 100% 0%, var(--corp-sky-a90) 0%, transparent 60%),
      linear-gradient(180deg, var(--corp-deep), var(--corp-ink));
  }

  ul.menu-list_area {
    max-width: 340px;
    gap: 0;
    align-items: stretch;
  }

  li.menu-list a {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 12px 0;
    font-size: 15px;
    color: var(--corp-light);
    opacity: 1;
  }

  /* ドロワーは .menu-list_current クラスを持たず aria-current だけ。PC の現在地(下線)と同じ言葉で、淡い水色の文字+下線にする */
  li.menu-list a[aria-current="page"] {
    color: var(--corp-glow);
    font-weight: 900;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }

  li.menu-list {
    border-bottom: 1px solid var(--corp-line-dark);
  }

  .header-consult {
    margin-top: 24px;
  }

  .header-consult a {
    width: 100%;
    min-height: 52px;
    font-size: 15px;
    background: var(--corp-light);
    color: var(--corp-ink);
  }
}

/* メニューを開いた暗いオーバーレイ上では白ロゴを出す。#header の ID 詳細度に合わせる */
#header .sp_part:has(.menu-list_open) .main-logo_img--dark {
  opacity: 0;
}

#header .sp_part:has(.menu-list_open) .main-logo_img--light {
  opacity: 1;
}


/* ---- 3. Footer ------------------------------------------------------------ */
#footer {
  border-radius: 0;
  background: var(--corp-dark-bg);
}

/* 流れる英字はフッターの1箇所だけ、ごく薄く。動かさない(旧CSSにも動きはなく、新規の動きも足さない) */
.footer-text_en {
  font-family: var(--corp-font);
  font-weight: 900;
  opacity: 0.12;
  -webkit-text-stroke-width: 2px;
  pointer-events: none;
  user-select: none;
}

.footer-contact_link {
  padding-left: 32px;
  padding-right: 32px;
  border-radius: var(--corp-radius);
}

/* フッターの主 CTA: 素のリンク(primary-cta-link 部品)。文字と矢印は CSS で与える。
   濃色の面の上の明色ベタ。副(あれば)は枠線。ボタン体系(6)と同じ 4px・16px 以上の文字 */
.footer-contact_link--consultation {
  background: var(--corp-light);
  box-shadow: none;
}

.footer-contact_link--consultation:hover {
  background: var(--corp-white);
  box-shadow: none;
  opacity: 1;
  transform: none;
}

.footer-contact_link--consultation .footer-contact_text {
  color: var(--corp-ink);
}

.footer-contact_link--contact {
  background: transparent;
  border: 1px solid var(--corp-light-a50);
}

.footer-contact_link--contact:hover {
  background: var(--corp-light-a14);
  transform: none;
}

.footer-contact_link--contact .footer-contact_text {
  color: var(--corp-white);
}

.footer-contact_actions > a:first-child {
  font-size: 20px;
  font-weight: 700;
  color: var(--corp-ink);
  text-decoration: none;
}

.footer-contact_actions > a::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

/* width/height 属性を付けた画像は、CSS の表示サイズに合わせて高さを自動にする */
.footer-logo img,
.page-header_img img,
.message-img_area img,
.owner-img_area img {
  height: auto;
}

.footer-logo_text,
.footer-info_text,
.copyright,
.footer-nav_link a {
  color: var(--corp-dim);
}

.footer-nav_link a:hover {
  color: var(--corp-white);
}

/* フッターが横並びになる 781px〜 は標語の列が約 200px まで縮み、14px だと「る。」だけが2行目に落ちる。
   列幅に比例して縮め(860px で 14px に戻る)、780px 以下の縦積みは従来どおり折り返しに任せる。
   common.css の `p.footer-logo_text { font-size: 14px }` に勝つため同じ要素付きセレクタにする */
@media screen and (min-width: 781px) {
  p.footer-logo_text {
    font-size: min(14px, 1.65vw);
  }
}

/* ---- 4. Scroll-top / tap targets / reduced motion ------------------------- */
@media screen and (max-width: 780px) {
  .sp_part .main-logo a,
  .sp_part .menu-icon {
    min-height: 44px;
  }

  li.footer-nav_link {
    margin-bottom: 0;
  }

  li.footer-nav_link a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* スクロールトップ: 旧は水色の丸い画像。角丸のインクの四角に差し替え(画像は読み上げ用に残す) */
/* ページ先頭ではヒーローのCTAやスイッチボードに重なるため、スクロール後(ヘッダーが is-stuck)にだけ出す。 */
.scroll-top {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}

body:has(#header.is-stuck) .scroll-top {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* :has() 非対応ブラウザでは常時表示に戻す */
@supports not selector(:has(*)) {
  .scroll-top {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* スマホでは本文の右端に重なるので、上へスクロールして戻っている間(body.is-scrolling-up。corporate.js)だけ出す。
   :has() 非対応のときも、同じ条件で出し分ける */
@media screen and (max-width: 780px) {
  body:not(.is-scrolling-up):has(#header.is-stuck) .scroll-top {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  @supports not selector(:has(*)) {
    body:not(.is-scrolling-up) .scroll-top {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
  }
}

.scroll-top a {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--corp-radius);
  background: var(--corp-ink);
}

.scroll-top a img {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.scroll-top a::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-top: 2px solid var(--corp-light);
  border-left: 2px solid var(--corp-light);
  transform: rotate(45deg);
}

/* フッターの CTA: スマホで column になると flex-basis が高さになり 360px に伸びる */
@media screen and (max-width: 780px) {
  .footer-contact_link {
    flex: none;
    min-height: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .footer-text_en,
  .main-logo,
  .header-container,
  #header::before {
    animation: none;
    transition: none;
  }
}

/* メニューのボタン: 既定のボタン見た目を消す */
button.menu-icon {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
}

@media screen and (max-width: 780px) {
  /* 閉じたドロワーをフォーカス/支援技術から外す。transition:0.4s(all)により閉じる時は遅延して消える */
  .nav-menu_list:not(.menu-list_open) {
    visibility: hidden;
  }

  body:has(.nav-menu_list.menu-list_open) {
    overflow: hidden;
  }
}

/* ---- 5. Page header band + breadcrumb + section rhythm ------------------------------------ */
/* 両面の内側ページ共通の帯(コーポレート内側ページ・/base/ 一覧・検索・部門・タグ・記事)。
   紙色 + 方眼 + 下の濃紺罫線。固定ヘッダー(--wr-header-top-h)の下に --corp-band-gap だけ空けてパンくず/ラベルが始まる。
   メディア面はサブナビがヘッダー分の余白を持つので、帯は --corp-band-gap だけ。 */
:root {
  --wr-header-top-h: 80px;
}

@media screen and (max-width: 780px) {
  :root {
    --wr-header-top-h: 68px;
  }
}

section.page-header-sec,
section.page-header-sec.case-page-header,
section.page-header-sec.contact-page-header {
  height: auto;
  max-height: none;
  padding: calc(var(--wr-header-top-h) + var(--corp-band-gap)) 0 clamp(32px, 4vw, 48px);
  background: var(--corp-paper-bg);
  border-bottom: 1px solid var(--corp-ink);
  color: var(--corp-ink);
}

body.media-surface section.page-header-sec {
  padding-top: var(--corp-band-gap);
}

.page-header_container {
  position: relative;
  top: auto;
  transform: none;
  width: calc(100% - 2 * var(--corp-gutter));
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 0;
  gap: clamp(24px, 4vw, 56px);
}

.page-title_wrap {
  max-width: 680px;
  padding-left: 0;
}

.page-header-sec .page-title_wrap {
  flex: 1 1 0;
  min-width: 0;
}

/* グラデーション文字は使わない。色は文脈の color に従う */
.text-grad_purple {
  background: none;
  -webkit-text-fill-color: currentColor;
}

/* 英語ラベル: 等幅の小さな注記(原文の大文字小文字のまま) */
p.page-title_en {
  margin: 0 0 14px;
  font-family: var(--corp-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--corp-soft);
}

.page-header-sec h1,
.page-header-sec .mv-copy_top {
  margin: 0;
  font-size: clamp(26px, 3.8vw, 46px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--corp-ink);
  text-wrap: balance;
  word-break: auto-phrase;
}

/* 見出しの下のリード・補足 */
.page-header-sec :is(.page-header_text, .page-header_sub, .page-header_lead, .case-page_header-text, .wr-archive_lead, .wr-article_summary) {
  max-width: 40em;
  margin: 18px 0 0;
  font-size: 15px;
  font-weight: 400;
  line-height: var(--corp-lh-long);
  color: var(--corp-soft);
  text-align: left;
}

.page-header-sec .page-header_img {
  max-width: 440px;
}

/* 781〜1024px: 帯の内側は約 780px で、文字 307 + 余白 33 + 画像 440 だと h1 が 3〜4 行、パンくずが 3 行に割れる。
   画像を 36%(最大 300px)にして文字の列を広くとる */
@media screen and (min-width: 781px) and (max-width: 1024px) {
  .page-header-sec .page-header_img {
    flex: 0 0 36%;
    max-width: 300px;
  }
}

.page-header-sec .page-header_img img {
  border-radius: var(--corp-radius-lg);
}

/* 英字の大きな透かし(.page-text_en)は出さない */
.page-header-sec .page-text_en {
  display: none;
}

/* パンくず (template-parts/site-breadcrumb.php): 帯の中、英語ラベルの上。両面で同じ */
.site-breadcrumb {
  margin: 0 0 20px;
  font-family: var(--corp-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--corp-soft);
}

.site-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-breadcrumb li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--corp-rule);
}

.site-breadcrumb a {
  color: var(--corp-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-breadcrumb a:hover {
  color: var(--corp-sky-text);
}

@media screen and (max-width: 780px) {
  /* パンくずのタップ領域を 44px に(見た目の行間は変えない) */
  .site-breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: -14px 0;
  }

  .page-header_container {
    display: block;
  }

  .page-header-sec .page-title_wrap {
    text-align: left;
  }

  .page-header-sec h1,
  .page-header-sec .mv-copy_top {
    font-size: clamp(24px, 6.8vw, 32px);
    line-height: 1.35;
  }

  .page-header-sec .page-header_img {
    width: 100%;
    margin: 28px 0 0;
  }
}

/* セクション見出し: 日本語が大見出し(900)、英語は上の小さな等幅ラベル(原文の大文字小文字のまま) */
body .sec-main_title {
  text-align: left;
}

body .sec-main_title .sec-title_head {
  display: block;
  margin: 0 0 12px;
  font-family: var(--corp-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-transform: none;
  color: var(--corp-soft);
  opacity: 1;
  background: none;
  -webkit-text-fill-color: currentColor;
}

body .sec-main_title .sec-title_jp {
  margin-top: 0;
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--corp-ink);
  text-wrap: balance;
  word-break: auto-phrase;
}

/* 最後のブロックとフッターの間は両面とも「セクション余白 + 終端余白」 */
.page-end {
  margin-top: var(--corp-end-y);
}

/* 帯の直後の空白 div(旧 120px 固定)は持たない。最初のセクションの上余白 --corp-section-y だけにして、メディア面と同じにする */
.page-start {
  margin-top: 0;
}

.page-end:has(+ .wr-newsletter-fallback) {
  margin-top: 0;
}

body main > :last-child:not(.page-header-sec) {
  padding-bottom: var(--corp-section-y);
}

/* .page-end を持たないページ(/contact/・/news/・/base/ 一覧など)にも同じ終端余白。
   後ろに .page-end や末尾の購読帯(.wr-newsletter-fallback)が続くページは、そちらが余白を持つので足さない */
body main:not(:has(+ .page-end)):not(:has(+ .wr-newsletter-fallback)) {
  padding-bottom: var(--corp-end-y);
}

/* ---- 6. Buttons --------------------------------------------------------------------------- */
/* ボタンは1種類。56px・16px/700・角丸4px・最小幅260px。
   明地は濃紺ベタ(hover スカイ)、暗地(CTA帯・ヒーロー)は明色ベタ(hover 白)、副は1pxの枠線。
   .readmore-btn(ラッパー + a)と .wr-btn / .btn-*(要素そのもの)は同じ見た目。
   旧クラス(.bg-grad_purple / .bg-white / .c-white / .c-purple / .back-btn)は色の指定としては意味を失っており、ここで変種に対応づける。 */
body div.readmore-btn {
  box-sizing: border-box;
  width: auto;
  min-width: var(--corp-btn-minw);
  height: auto;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--corp-radius);
  background: var(--corp-ink);
  color: var(--corp-white);
  font-weight: 700;
  line-height: 1.5;
  box-shadow: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

body div.readmore-btn a {
  display: block;
  height: auto;
  padding: 15px 26px;
  font-size: 16px;
  font-weight: 700;
  text-wrap: balance;
  word-break: auto-phrase;
  border-radius: var(--corp-radius);
}

body :is(.wr-btn, button.readmore-btn, .btn-confirm, .btn-back, .btn-submit) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: var(--corp-btn-minw);
  min-height: var(--corp-btn-h);
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: var(--corp-radius);
  background: var(--corp-ink);
  color: var(--corp-white);
  font-family: var(--corp-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* 入力欄と並ぶ送信ボタンだけは、最小幅を持たず中身の幅(高さ・書体・角丸は同じ) */
body :is(.wr-form, .wr-search, .wr-archive_filters) .wr-btn {
  min-width: 0;
  white-space: nowrap;
}

/* 旧 common.css の .readmore-btn:focus-visible(2px の青)に勝って、共通のリングにする */
body div.readmore-btn:focus-visible,
body div.readmore-btn a:focus-visible {
  outline: 3px solid var(--corp-focus);
  outline-offset: 3px;
}

/* hover: 濃紺 → スカイ */
body div.readmore-btn:hover,
body :is(.wr-btn, button.readmore-btn, .btn-confirm, .btn-submit):hover {
  background: var(--corp-sky);
  border-color: var(--corp-sky);
  color: var(--corp-white);
  transform: none;
  box-shadow: none;
}

/* 副ボタン(枠線): 明地。濃紺の1px枠、hover で塗り */
body div.readmore-btn.home-outline-btn:not(.c-white),
body .wr-btn.wr-btn--outline,
body .btn-back.btn-back,
body div.readmore-btn.back-btn {
  background: transparent;
  border-color: var(--corp-ink);
  color: var(--corp-ink);
}

body div.readmore-btn.home-outline-btn:not(.c-white) a,
body div.readmore-btn.back-btn a {
  color: inherit;
}

body div.readmore-btn.home-outline-btn:not(.c-white):hover,
body .wr-btn.wr-btn--outline:hover,
body .btn-back.btn-back:hover,
body div.readmore-btn.back-btn:hover {
  background: var(--corp-ink);
  border-color: var(--corp-ink);
  color: var(--corp-light);
}

/* 暗地(旧 .bg-white / .c-white / 帯の中): 明色ベタ、副は明色の枠線 */
body div.readmore-btn.bg-white,
body :is(.corporate-cta, .wr-band, .diagnostic-cta, .diagnostic-card--full) :is(div.readmore-btn, .wr-btn) {
  background: var(--corp-light);
  border-color: transparent;
  color: var(--corp-ink);
}

body div.readmore-btn.bg-white:hover,
body :is(.corporate-cta, .wr-band, .diagnostic-cta, .diagnostic-card--full) :is(div.readmore-btn, .wr-btn):hover {
  background: var(--corp-white);
  border-color: transparent;
  color: var(--corp-ink);
}

body div.readmore-btn.home-outline-btn.c-white {
  background: var(--corp-light-a06);
  border-color: var(--corp-light-a50);
  color: var(--corp-light);
}

body div.readmore-btn.home-outline-btn.c-white:hover {
  background: var(--corp-light-a14);
  border-color: var(--corp-light);
  color: var(--corp-white);
}

body .wr-btn--disabled,
body .wr-btn--disabled:hover {
  background: var(--corp-grid);
  border-color: var(--corp-rule);
  color: var(--corp-soft);
  cursor: not-allowed;
}

/* 押せる物の縁(コーポレート面だけ。仕様 第9ラウンド §2): 紺のボタンは --corp-press、明色・枠のボタンは --corp-press-light。
   hover の色替えは上のまま(影は hover でも消さない)。押している間は1px 沈んで、縁の影が消える。動かすのは押している間だけ(transition なし) */
body.corporate-surface :is(div.readmore-btn, button.readmore-btn, .wr-btn:not(.wr-btn--disabled), .btn-confirm, .btn-submit) {
  box-shadow: var(--corp-press);
}

body.corporate-surface
  :is(
    div.readmore-btn:is(.home-outline-btn:not(.c-white), .back-btn, .bg-white),
    .wr-btn--outline,
    .btn-back,
    :is(.corporate-cta, .wr-band, .diagnostic-cta, .diagnostic-card--full) :is(div.readmore-btn, .wr-btn)
  ) {
  box-shadow: var(--corp-press-light);
}

body.corporate-surface
  :is(
    div.readmore-btn,
    button.readmore-btn,
    .wr-btn:not(.wr-btn--disabled),
    .btn-confirm,
    .btn-submit,
    .btn-back,
    :is(.corporate-cta, .wr-band, .diagnostic-cta, .diagnostic-card--full) :is(div.readmore-btn, .wr-btn)
  ):active {
  transform: translateY(1px);
  box-shadow: none;
}

/* ---- 7. Fields ----------------------------------------------------------------------------- */
/* 入力は1種類: 54px(14 + 24 + 14 + 枠)、1px の罫線色、角丸4px、フォーカスは3pxのスカイのリング(暗い面では発光色) */
body :is(.contact-form, .recruit-form, .downloads-form, .events-form, .diagnostic-consult-form)
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select),
body :is(.wr-form_input, .wr-form_select, .docs-search-input, :where(.wr-archive_filters) :where(input:not([type="hidden"]), select)) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--corp-rule);
  border-radius: var(--corp-radius);
  background: var(--corp-white);
  color: var(--corp-ink);
  font-family: var(--corp-font);
  font-size: 16px;
  line-height: 1.5;
}

/* select は入力と同じ 54px に(既定だと 56px になる) */
body :is(.contact-form, .recruit-form, .downloads-form, .events-form, .diagnostic-consult-form) select,
body :is(.wr-form_select, .wr-archive_filters select) {
  height: 54px;
}

body :is(.contact-form, .recruit-form, .downloads-form, .events-form, .diagnostic-consult-form)
  :is(input, textarea, select):focus,
body :is(.wr-form_input, .wr-form_select, .docs-search-input, :where(.wr-archive_filters) :where(input, select)):focus {
  outline: 3px solid var(--corp-focus);
  outline-offset: 2px;
  border-color: var(--corp-sky);
  box-shadow: none;
}

/* へこんだ入力欄(問い合わせフォームだけ。仕様 第9ラウンド §2)。フォーカスのリングは outline なので、へこみはフォーカス中も残す */
body.corporate-surface .contact-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select) {
  box-shadow: var(--corp-recess);
}

/* エラー状態(旧CSSの .form-group.error より強くする)。エラー色は --corp-error の1色 */
body :is(.contact-form, .recruit-form, .downloads-form, .events-form, .diagnostic-consult-form)
  :is(.form-group.error, .form-group:has([aria-invalid="true"]))
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select),
body :is(.contact-form, .recruit-form, .downloads-form, .events-form, .diagnostic-consult-form)
  :is(input, textarea, select)[aria-invalid="true"] {
  border-color: var(--corp-error);
}

/* ラベルは1種類 */
body :is(.contact-form, .recruit-form, .downloads-form, .events-form, .diagnostic-consult-form) :is(.form-group > label, .form-group > .form-label),
.wr-search_label,
.wr-archive_filters label > span {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--corp-ink);
}

/* 暗い帯の上のラベルは明色 */
.wr-form_label {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--corp-white);
}

body :is(.contact-form, .recruit-form, .downloads-form, .events-form, .diagnostic-consult-form) .form-group {
  margin-bottom: 24px;
}

body :is(.contact-form, .recruit-form) .form-group.required > label::after,
body :is(.contact-form, .recruit-form, .downloads-form, .events-form, .diagnostic-consult-form) span.required {
  background: var(--corp-ink);
  color: var(--corp-white);
}

body :is(.contact-form, .recruit-form, .downloads-form, .events-form) :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--corp-ink);
}

/* ---- 8. Chips / tabs / inline links / meta label ------------------------------------------------ */
/* チップは1種類: 14px/700、高さ36px(スマホは44px)、1pxの罫線色、角丸4px。hover は枠が濃紺・地が紙色。
   現在地: コーポレートは濃紺ベタ + 白文字、メディア面は黄ベタ + 濃紺文字(黄色は印) */
body :is(.case-page_category, .wr-archive_departments a, .wr-pill, .base-article_tag, .base-tag, .wr-author_links a, .wr-share a, .wr-share button, .wr-copy-btn) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  min-height: var(--corp-chip-h);
  padding: 0 14px;
  border: 1px solid var(--corp-rule);
  border-radius: var(--corp-radius);
  background: var(--corp-white);
  color: var(--corp-ink);
  font-family: var(--corp-font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body :is(.case-page_category, .wr-archive_departments a, .wr-pill, .base-article_tag, .base-tag, .wr-author_links a, .wr-share a, .wr-share button, .wr-copy-btn):hover {
  border-color: var(--corp-ink);
  background: var(--corp-paper);
  color: var(--corp-ink);
}

body :is(.case-page_category, .wr-archive_departments a, .wr-pill):is(.is-active, .current, [aria-current]) {
  border-color: var(--corp-ink);
  background: var(--corp-ink);
  color: var(--corp-white);
}

body.media-surface :is(.case-page_category, .wr-archive_departments a, .wr-pill):is(.is-active, .current, [aria-current]) {
  background: var(--corp-yellow);
  color: var(--corp-ink);
}

@media screen and (max-width: 780px) {
  body :is(.case-page_category, .wr-archive_departments a, .wr-pill, .base-article_tag, .base-tag, .wr-author_links a, .wr-share a, .wr-share button, .wr-copy-btn) {
    min-height: 44px;
  }
}

/* 文中リンクは1種類: 文字用のスカイ(--corp-sky-text)・下線・hover でネイビー */
:is(.docs-article, .wr-editorial_section, .wr-article-evidence, .wr-author_bio, .wr-hero_lead, .wr-pillar_lead, .wr-toc-mobile, .privacy-section, .privacy-contact, .contact-form, .recruit-form, .downloads-form, .events-form, .news-sec, .company-list_wrap, .ms-text, .ms-table) a:where(:not([class])),
.wr-form_consent a {
  color: var(--corp-sky-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

:is(.docs-article, .wr-editorial_section, .wr-article-evidence, .wr-author_bio, .wr-hero_lead, .wr-pillar_lead, .privacy-section, .privacy-contact, .contact-form, .recruit-form, .downloads-form, .events-form, .news-sec, .company-list_wrap, .ms-text, .ms-table) a:where(:not([class])):hover,
.wr-form_consent a:hover {
  color: var(--corp-ink);
  text-decoration-thickness: 2px;
}

/* 暗い帯の中の同意文のリンクは明色 */
.wr-band .wr-form_consent a {
  color: inherit;
}

/* 日付・メタは1種類: 等幅 12px/500、淡い文字色 */
body :is(.case-page_meta, .case-page_meta span, .wr-archive_meta, .wr-list_meta, .base-article_meta--secondary, .base-article_date, .base-article_readtime, .base-card_date, .news-card_date) {
  font-family: var(--corp-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--corp-soft);
}

body .case-page_meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

body .case-page_meta span {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

body .case-page_meta span + span {
  padding-left: 16px;
  border-left: 1px solid var(--corp-rule);
}

/* 売りのマーカー(template-parts と inc/emphasis.php の <mark class="corp-mark">)。行の下側 4 割ほどに黄の帯、文字は紺の太字。
   見出し・1画面目・紺の帯・リンクの文字には引かない。画面に入ったとき左から右へ1回だけ引く(assets/js/corporate.js が .is-undrawn を付け外しする。JS が無ければ最初から引いてある) */
body.corporate-surface .corp-mark {
  background-color: transparent;
  background-image: linear-gradient(transparent 58%, var(--corp-mark) 58%, var(--corp-mark) 94%, transparent 94%);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
  color: var(--corp-ink);
  font-weight: 700;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

body.corporate-surface .corp-mark.is-undrawn {
  background-size: 0 100%;
}

@media (prefers-reduced-motion: reduce) {
  body.corporate-surface .corp-mark {
    transition: none;
  }
}

/* ---- 9. Subscribe band ------------------------------------------------------------------------ */
/* メディア面の購読帯 .wr-band(文言 + フォーム): 公式グラデーション(135度 スカイ→ネイビー)、角丸6px。
   コーポレート面の CTA 帯は別の部品で、corporate.css の「CTA帯」が全ページ共通の規則を持つ。 */
.wr-band {
  box-sizing: border-box;
  padding: clamp(28px, 4vw, 44px) clamp(20px, 4vw, 44px);
  border: 0;
  border-radius: var(--corp-radius-lg);
  background: var(--corp-band-bg);
  box-shadow: none;
  color: var(--corp-white);
}

.wr-band .wr-band_title {
  margin: 0;
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 900;
  line-height: 1.4;
  color: var(--corp-white);
}

.wr-band .wr-band_lead {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--corp-white);
}

/* 購読フォーム: 入力 54px と送信 56px を下端でそろえる */
.wr-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-top: 20px;
}

.wr-form_field {
  flex: 1 1 260px;
  min-width: 0;
}

.wr-band .wr-form_consent {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--corp-white);
}

.wr-band .wr-form_done {
  margin: 16px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--corp-white);
}

.wr-band .wr-form_error {
  margin: 16px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--corp-error-light);
}

.wr-form_feedback:empty {
  display: none;
}

:is(.wr-form_done, .wr-form_error):focus {
  outline: 3px solid var(--corp-focus);
  outline-offset: 3px;
}

@media screen and (max-width: 780px) {
  .wr-band {
    padding: 28px 20px;
  }

  .wr-form .wr-btn {
    width: 100%;
  }
}

/* ---- 10. Empty state / pagination ----------------------------------------------------------------- */
/* 空状態: 濃紺の上罫 + 見出し + 次の行き先。メディア面の検索・一覧と、/news/(コーポレート面)で共通 */
.wr-empty-state {
  margin-top: 24px;
  padding: 28px 0;
  border-top: 2px solid var(--corp-ink);
  border-bottom: 1px solid var(--corp-rule);
}

.wr-empty-state h2,
.wr-empty-state_heading {
  margin: 0;
  color: var(--corp-ink);
  font-weight: 900;
}

.wr-empty-state h2 {
  font-size: 20px;
  line-height: 1.5;
}

.wr-empty-state p {
  margin: 10px 0 0;
  color: var(--corp-soft);
  line-height: 1.8;
}

.wr-empty-state_heading {
  margin-top: 26px;
  font-size: 16px;
}

.wr-more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--corp-sky-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wr-more:hover {
  color: var(--corp-ink);
}

/* ページ送り: paginate_links(.wr-pagination)と the_posts_pagination(.navigation.pagination)を同じ見た目に */
.wr-pagination,
.navigation.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}

.navigation.pagination {
  margin-top: 0;
}

.wr-pagination .page-numbers,
.navigation.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: auto;
  min-width: 44px;
  height: auto;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--corp-rule);
  border-radius: var(--corp-radius);
  background: var(--corp-white);
  color: var(--corp-ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.wr-pagination a.page-numbers:hover,
.navigation.pagination a.page-numbers:hover {
  border-color: var(--corp-ink);
  background: var(--corp-paper);
}

.wr-pagination .page-numbers.current,
.navigation.pagination .page-numbers.current {
  border-color: var(--corp-ink);
  background: var(--corp-ink);
  color: var(--corp-white);
}

.wr-pagination .page-numbers.dots,
.navigation.pagination .page-numbers.dots {
  border-color: transparent;
  background: none;
}

/* ---- 11. Media sub-nav (.wr-subnav) ------------------------------------------------------------ */
/* メディア面(ワークレシピ)だけ、固定ヘッダーの直下に通常フローで置く。固着しない。
   上の padding が固定ヘッダーの高さ(ページ先頭の余白)。黄色は記事メディアの印。
   ロゴとリンクは1行(幅が足りなければ折り返す)。 */
.wr-subnav {
  padding-top: var(--wr-header-top-h);
  background: var(--corp-white);
  border-bottom: 1px solid var(--corp-rule);
  color: var(--corp-ink);
}

.wr-subnav_inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 24px;
  padding: 4px max(var(--corp-gutter), calc((100% - 1200px) / 2));
}

.wr-logo {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  color: var(--corp-ink);
  font-family: var(--corp-font);
  font-weight: 900;
  font-size: 1.15rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.wr-logo_img {
  display: block;
  width: clamp(150px, 18vw, 220px);
  max-width: 100%;
  height: auto;
}

.wr-logo small {
  display: block;
  font-family: var(--corp-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--corp-soft);
}

body .wr-hl,
body .wr-band_title .wr-hl {
  padding: 0 0.15em;
  background: var(--corp-yellow);
  color: var(--corp-ink);
}

.wr-subnav_list {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wr-subnav_link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  border-bottom: 3px solid transparent;
  color: var(--corp-ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.wr-subnav_link:hover {
  border-bottom-color: var(--corp-rule);
  color: var(--corp-sky-text);
}

.wr-subnav_link.is-active {
  border-bottom-color: var(--corp-yellow);
}

@media screen and (max-width: 780px) {
  /* ロゴとリンクを1行に収める。リンクが多い時は行の中だけ横スクロール(ページは広げない) */
  .wr-subnav_inner {
    flex-wrap: nowrap;
    gap: clamp(8px, 2vw, 12px);
    padding-top: 0;
    padding-bottom: 0;
  }

  .wr-logo_img {
    width: 100%;
    max-width: 100%;
  }

  /* 360px で「ワークレシピとは」まで収まるよう、ロゴは比率のまま 120px を下限に縮める */
  .wr-logo {
    flex: 0 0 clamp(120px, 33vw, 150px);
    width: clamp(120px, 33vw, 150px);
    min-width: 120px;
    max-width: 150px;
  }

  .wr-logo small {
    display: none;
  }

  .wr-subnav_list {
    min-width: 0;
    overflow-x: auto;
    gap: clamp(8px, 2vw, 16px);
    scrollbar-width: none;
  }

  .wr-subnav_link {
    padding: 0;
    font-size: clamp(12px, 3.4vw, 13px);
  }

  .wr-subnav_list::-webkit-scrollbar {
    display: none;
  }
}

/* ---- Target shared shell -------------------------------------------------
   目標画面のヘッダーは面をまたいで同じ濃紺の帯にそろえる。ロゴ画像は納品データを
   そのまま使い、表示切り替えは白ロゴの opacity だけで行う。 */
#header {
  min-height: var(--corp-header-h);
  background: var(--corp-ink);
  --h-fg: var(--corp-light);
  --h-btn-bg: var(--corp-white);
  --h-btn-fg: var(--corp-ink);
  --h-focus: var(--corp-glow);
}

#header::before {
  opacity: 1;
  background: var(--corp-ink);
  border-bottom-color: var(--corp-ink);
}

#header .main-logo_img--dark {
  opacity: 0;
}

#header .main-logo_img--light {
  opacity: 1;
}

.header-container {
  min-height: var(--corp-header-h);
  padding: 0 max(var(--corp-gutter), calc((100% - 1200px) / 2));
}

.main-logo,
#header.is-stuck .pc_part .main-logo {
  width: 140px;
  max-width: 140px;
}

#header.is-stuck .header-container {
  min-height: var(--corp-header-h);
  padding-top: 0;
  padding-bottom: 0;
}

/* 目標の購読帯は濃紺で統一し、スカイ→紫の旧グラデーションを残さない。 */
.wr-band {
  background: var(--corp-ink);
}

/* フッターはCTA帯と役割を分け、白地の小さなリンク列にする。リンク自体は既存の
   footer-nav を残して、会社情報・プライバシー・記事導線を失わない。 */
#footer {
  border-top: 1px solid var(--corp-rule);
  background: var(--corp-white);
  color: var(--corp-ink);
  padding-bottom: 0;
}

#footer .footer-text_en,
#footer .footer-contact_actions {
  display: none;
}

#footer .footer-container {
  width: min(1200px, calc(100% - 80px));
  padding: 16px 0 10px;
}

#footer .footer-end_contents {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
}

#footer .footer-info_area {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 16px;
}

#footer .footer-logo {
  width: 108px;
  max-width: 108px;
}

#footer .footer-logo_text,
#footer .footer-info_text {
  margin: 0;
  color: var(--corp-soft);
  font-size: 12px;
  line-height: 1.5;
}

#footer .footer-logo_text {
  display: none;
}

#footer .footer-nav_area {
  min-width: 0;
  margin-left: auto;
}

#footer ul.footer-nav {
  justify-content: flex-end;
  gap: 14px 18px;
  margin: 0;
}

#footer ul.footer-nav + ul.footer-nav {
  margin-top: 5px;
}

#footer .footer-nav_link a {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  color: var(--corp-soft);
  font-size: 12px;
  font-weight: 500;
}

#footer .footer-nav_link a:hover {
  color: var(--corp-ink);
}

#footer .copyright {
  margin: 6px 0 0;
  color: var(--corp-soft);
  font-size: 11px;
}

/* 旧テンプレートの名前付きアイコンも公式Dashiconsで描画する。新規テンプレートは
   oprion_site_icon_class() の戻り値(dashicons-*クラス)を使う。 */
.oprion-icon {
  font-family: dashicons;
  font-style: normal;
  font-weight: 400;
  speak: never;
}

.oprion-icon-chat::before { content: "\f125"; }
.oprion-icon-person::before { content: "\f110"; }
.oprion-icon-document::before { content: "\f497"; }
.oprion-icon-progress::before { content: "\f185"; }
.oprion-icon-list::before { content: "\f163"; }
.oprion-icon-people::before { content: "\f307"; }
.oprion-icon-brain::before { content: "\f339"; }

/* 本文側の末尾にセクション余白があるため、footer直前に旧120pxを重ねない。 */
.page-end {
  margin-top: 0;
}

@media screen and (max-width: 780px) {
  #header {
    min-height: var(--corp-header-h);
  }

  .header-container {
    min-height: var(--corp-header-h);
  }

  #footer .footer-container {
    width: calc(100% - 40px);
    padding: 18px 0 12px;
  }

  #footer .footer-end_contents,
  #footer .footer-info_area {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  #footer .footer-nav_area {
    width: 100%;
    margin-left: 0;
  }

  #footer ul.footer-nav {
    justify-content: flex-start;
  }

  #footer .copyright {
    text-align: left;
  }
}

/* ---- Final mobile shell corrections -------------------------------------
   モバイルでも開閉状態と見た目を同じ瞬間にそろえ、footer は情報量を保ったまま
   2列に収める。企業面の旧ページ帯は本文と同じ白地へ戻す。 */
@media screen and (max-width: 780px) {
  #header .sp_part .main-logo_img--dark {
    opacity: 0;
  }

  #header .sp_part .main-logo_img--light {
    opacity: 1;
  }

  #header .nav-menu_list {
    visibility: hidden;
    right: -100%;
  }

  #header .nav-menu_list.menu-list_open {
    visibility: visible;
    right: 0;
  }

  #footer .footer-end_contents {
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }

  #footer .footer-info_area {
    flex: 0 1 42%;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  #footer .footer-logo {
    width: 86px;
    max-width: 86px;
  }

  #footer .footer-info_text {
    font-size: 12px;
    line-height: 1.45;
  }

  #footer .footer-nav_area {
    flex: 1 1 58%;
    width: auto;
  }

  #footer ul.footer-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 8px;
    margin: 0;
  }

  #footer ul.footer-nav + ul.footer-nav {
    display: block;
    margin-top: 2px;
  }

  #footer .footer-nav_link {
    margin: 0;
  }

  #footer .footer-nav_link a {
    min-height: 24px;
    font-size: 12px;
    white-space: nowrap;
  }
}

body.corporate-surface section.page-header-sec,
body.corporate-surface section.page-header-sec.case-page-header,
body.corporate-surface section.page-header-sec.contact-page-header {
  background: var(--corp-white);
  background-image: none;
  border-bottom: 1px solid var(--corp-rule);
  color: var(--corp-ink);
}

/* common.css の旧 `#header.header-logo-dark` が持つ詳細度を上書きし、
   紺色の共通ヘッダーでは下層ページも納品白ロゴを使う。 */
#header.header-logo-dark .main-logo_img--dark {
  opacity: 0;
}

#header.header-logo-dark .main-logo_img--light {
  opacity: 1;
}