@charset "UTF-8";
/****************************************************************************
****    corporate.css
****    コーポレート面専用のスタイル(レガシーCSSは触らず、ここで上書きする)。
****    読み込み順は site-chrome.css の後。メディア面(/base/)には出さない。
****    ビジュアル方向: 「スイッチ」(ネイビー×スカイ、方眼と罫線)。丸いのはトグルとロゴだけ。
****
****    共通のヘッダー/ドロワー/フッター/トークンは site-chrome.css(両面で読み込む)。ここは本文用。
****
****    目次(番号は旧構成のまま。0/3/10/14/15 の共通部分は site-chrome.css へ移した)
****      0  Tokens(本文用のみ。共通は site-chrome.css)      8  Light sections / ruled layouts
****      1  Overflow guard            9  Dark sections (statement / CTA)
****      2  Base type                11  Mobile sticky CTA bar
****      4  Home hero + switchboard  12  Contact form
****      5  Home fit diagram         13  Page headers (inner pages)
****      6  Section headings         13 → site-chrome.css へ移動(ページヘッダー)
****                                  15  Reduced motion(本文用のみ)
****      7  Buttons
****************************************************************************/

/* ---- 0. Tokens ---------------------------------------------------------- */
:root {
  --corp-bar-h: 73px; /* 8 + ボタン56 + 8 + 罫線1 */

  /* 旧トークンの付け替え(style.css の :root と、それを参照する既存ルールをまとめて新配色へ) */
  --corp-blue: var(--corp-sky);
  --corp-purple: var(--corp-ink);
  --corp-grad: var(--corp-band-bg);
  --home-card-radius: var(--corp-radius-lg);
  --home-card-border: var(--corp-rule);
  --home-card-shadow: none;
  --home-bg-light: var(--corp-paper);
  --home-text-primary: var(--corp-ink);
  --home-text-secondary: var(--corp-soft);
  --home-accent: var(--corp-sky-text); /* 旧は文字・枠・塗りに共用。文字で読める濃さのスカイにする */
  --home-accent-dark: var(--corp-ink);
}

/* ---- 1. Layout guards ---------------------------------------------------- */
/* /service/ 業界マトリクス: 1fr の min-content で行が広がるのを防ぐ */
.oprion-industry-row,
.oprion-industry-matrix_head {
  min-width: 0;
}

.oprion-industry-cell {
  min-width: 0;
}

.oprion-chip_list li {
  overflow-wrap: anywhere;
}

/* ---- 2. Base type ------------------------------------------------------- */
body {
  font-family: var(--corp-font);
  color: var(--corp-ink);
  background: var(--corp-white);
}

/* 旧 reset の「全要素 letter-spacing .08em」は和文本文には広すぎる */
body :is(h1, h2, h3, h4, h5, h6, p, li, div, span) {
  letter-spacing: 0.02em;
}

/* 英字ラベルは等幅の小さな注記として使う(全大文字にはしない) */
.text-en {
  font-family: var(--corp-mono);
}

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

/* 視覚的には隠し、読み上げにだけ出す */
.corp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- 3. 旧 CSS(style.css / backoffice-ai.css / common.css)の灰・スレート・青リテラルをトークンに付け替える ----
   旧ルールは色だけを持つので、同じセレクタに body を前置して詳細度を 1 つ上げ、色の宣言だけを置き換える。
   (ここより後ろの個別ルールが優先されるよう、本文用ルールの前に置く) */
body li.company-list_wrap {
  border-bottom: dotted 2px var(--corp-rule);
}

/* お知らせカード: 旧 style.css は角丸16px(スマホ12px)+ 影 + hover で浮く。他のカード(case-page_summary-card など)と同じ
   1px の罫線・角丸6px・影なし、hover は枠が濃紺になるだけにする。カテゴリのチップは旧の スカイ→パープル のグラデをやめてネイビー
   (文字は旧の #fff !important のまま。ネイビー上で 13:1 以上) */
body li.news-card_wrap {
  border: 1px solid var(--corp-rule);
  border-radius: var(--corp-radius-lg);
  box-shadow: none;
}

body li.news-card_wrap:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--corp-ink);
}

body .news-card_category {
  background: var(--corp-ink);
}

body .news-card_date {
  color: var(--corp-soft);
}

body .news-card_title {
  color: var(--corp-ink);
}

body .page-contents_area .news-card_date,

body .page-contents_area .news-card_title {
  color: var(--corp-soft);
}

body .appeal-title {
  color: var(--corp-ink);
}

body .appeal-text {
  color: var(--corp-soft);
}

body ul.position-tags li {
  background: var(--corp-paper);
  color: var(--corp-soft);
}

body .flow-title {
  color: var(--corp-ink);
}

body .flow-text {
  color: var(--corp-soft);
}

body section.recruit-numbers-sec {
  background: var(--corp-paper);
}

/* /company/ の灰色の帯は旧 style.css の #fafafa(::before)。紙色トークンにそろえる */
body section.company-sec::before {
  background-color: var(--corp-paper);
  background-image: var(--corp-grain);
}

body .recruit-gallery_item {
  border: 1px solid var(--corp-rule);
}

body .numbers-label {
  color: var(--corp-soft);
}

body .privacy-intro {
  color: var(--corp-soft);
}

body .privacy-text {
  color: var(--corp-soft);
}

body .privacy-list li {
  color: var(--corp-soft);
}

body .privacy-contact {
  background: var(--corp-paper);
}

body .privacy-contact p {
  color: var(--corp-soft);
}

body .privacy-date {
  border-top: 1px solid var(--corp-rule);
}

body .privacy-date p {
  color: var(--corp-soft);
}

body section.recruit-form-sec {
  background: var(--corp-paper);
}

body .recruit-form .radio-label span {
  color: var(--corp-soft);
}

body .recruit-form .file-label {
  background: var(--corp-paper);
  border: 2px dashed var(--corp-rule);
}

body .recruit-form .file-label:hover {
  border-color: var(--corp-sky);
  background: var(--corp-grid);
}

body .recruit-form .file-text {
  color: var(--corp-soft);
}

body .recruit-form .checkbox-label span {
  color: var(--corp-soft);
}

body section.contact-form-sec {
  background: var(--corp-grain), var(--corp-paper);
}

body .contact-form_intro {
  color: var(--corp-soft);
}

body .contact-form .form-section {
  border-bottom: 1px solid var(--corp-rule);
}

body .contact-form .checkbox-label span {
  color: var(--corp-soft);
}

body .contact-form .radio-label span {
  color: var(--corp-soft);
}

body .home-card_title {
  color: var(--corp-ink);
}

body .home-card_text {
  color: var(--corp-soft);
}

/* 日付はサイト全体で 12px の等幅。旧 style.css の 13px(本文書体)を上書きする */
body .home-base_meta time {
  color: var(--corp-soft);
  font-family: var(--corp-mono);
  font-size: 12px;
}

body .case-page_header-text {
  color: var(--corp-soft);
}

body .service-refresh_card,

body .service-process_card,

body .service-plan_card,

body .service-assurance_card,

body .case-page_summary-card,

body .case-page_block,

body .case-page_feature-card {
  border: 1px solid var(--corp-rule);
}

body .service-refresh_title,

body .case-page_summary-title,

body .case-page_detail-title {
  color: var(--corp-ink);
}

body .service-refresh_text,

body .case-page_summary-text,

body .case-page_detail-lead {
  color: var(--corp-soft);
}

body .service-plan_note {
  color: var(--corp-soft);
}

body .case-page_overview-lead {
  color: var(--corp-soft);
}

body .case-page_summary-points li {
  color: var(--corp-soft);
}

/* 箇条書きの丸(::before)とカード上端の 4px の帯は、旧 style.css / backoffice-ai.css では スカイ→パープル(#2f027c)のグラデ。
   紫は使わないので、丸はネイビー、帯は VI のスカイにする。 */
body :is(.case-page_summary-points, .case-page_feature-card) li::before {
  background: var(--corp-ink);
}

body .oprion-types-card::before {
  background: var(--corp-sky);
}

body .case-page_block h3,

body .case-page_feature-card h3 {
  color: var(--corp-ink);
}

body .case-page_block p {
  color: var(--corp-soft);
}

body .about-team_card {
  border: 1px solid var(--corp-rule);
}

body .about-team_role {
  color: var(--corp-ink);
}

body .about-team_text {
  color: var(--corp-soft);
}

body .about-approach_card {
  border: 1px solid var(--corp-rule);
}

body .wp-section_visual {
  background: var(--corp-paper);
}

body .wp-card_visual {
  background: var(--corp-paper);
}

body .oprion-industry-matrix_head span {
  background: var(--corp-grid);
  color: var(--corp-ink);
}

body .oprion-industry-cell {
  border: 1px solid var(--corp-rule);
}

body .oprion-industry-cell--summary .service-refresh_text {
  color: var(--corp-soft);
}

body .oprion-chip_list li {
  border: 1px solid var(--corp-rule);
  background: var(--corp-paper);
  color: var(--corp-soft);
}

body .oprion-types-card .home-card_title {
  color: var(--home-text-primary, var(--corp-ink));
}

body .oprion-types-card .home-card_text {
  color: var(--home-text-secondary, var(--corp-soft));
}

/* 旧が文字色に VI のスカイをそのまま使っている箇所。スカイは薄い地では 4.5:1 に届かないので文字用の --corp-sky-text にする */
body .c-purple,
body li.recruit-flow_arrow,
body .flow-step,
body .privacy-contact a,
body .recruit-form .file-name,
body .recruit-form .checkbox-label a,
body .btn-home,
body .contact-form .checkbox-label a,
body .home-card_label,
body .home-text_link,
body .service-refresh_label,
body .service-plan_price,
body .case-page_summary-cta,
body .case-single_highlight--response h2,
body .about-team_icon,
body span.text-highlight {
  color: var(--corp-sky-text);
}

body .case-page_feature-card li {
  color: var(--corp-soft);
}

/* 同意チェック: 直前の .form-section が下罫線を持つので、自分の上罫線と上余白は持たない。
   旧 style.css(.checkbox-group の margin-top 32 / padding-top 24 / border-top)のままだと罫線が2本並び、間に空白の帯ができる */
body .contact-form .checkbox-group {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* 見出しの太さは 900(旧は 700) */
body :is(.case-page_detail-title, .case-page_block h3, .case-page_feature-card h3) {
  font-weight: 900;
}

body .position-title {
  color: var(--corp-ink);
}

body .position-text,
body .recruit-form_intro,
body table.recruit-table td {
  color: var(--corp-soft);
}

body table.recruit-table tr {
  border-bottom: 1px solid var(--corp-rule);
}

body table.recruit-table th {
  color: var(--corp-ink);
  background: var(--corp-paper);
}

/* ---- 4. Home hero + switchboard ---------------------------------------- */
.home-hero-sec {
  position: relative;
  display: block;
  min-height: 0;
  padding: clamp(112px, 12vw, 152px) 0 clamp(56px, 7vw, 96px);
  overflow: hidden;
  color: var(--corp-light);
  background: var(--corp-dark-bg);
}

/* 旧ヒーローの背景レイヤー(::before/::after)は使わない */
.home-hero-sec::before,
.home-hero-sec::after {
  content: none;
}

.corp-hero_inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  width: calc(100% - 2 * var(--corp-gutter));
  max-width: 1200px;
  margin: 0 auto;
}

.corp-hero_inner > * {
  min-width: 0;
}

.corp-hero_for {
  margin: 0 0 18px;
  color: var(--corp-dim);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  text-wrap: balance;
  word-break: auto-phrase;
}

.corp-hero_title {
  margin: 0;
  font-size: clamp(34px, 5.4vw, 68px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: balance;
  word-break: auto-phrase;
  color: var(--corp-light);
}

.corp-hero_sub {
  max-width: 30em;
  margin: 22px 0 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--corp-light);
  word-break: auto-phrase;
}

.corp-hero_actions {
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.corp-board {
  border: 1px solid var(--corp-light-a38);
  border-radius: var(--corp-radius-lg);
  background: var(--corp-ink-a72);
  padding: 8px 0;
}

@supports (backdrop-filter: blur(1px)) {
  .corp-board {
    backdrop-filter: blur(6px);
  }
}

.corp-board_cap {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 22px 14px;
  border-bottom: 1px solid var(--corp-line-dark);
  font-family: var(--corp-mono);
  font-size: 12px;
  color: var(--corp-dim);
}

.corp-board_list {
  margin: 0;
  padding: 0;
}

.corp-board_row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 15px 22px;
  border-bottom: 1px solid var(--corp-line-dark);
}

.corp-board_row:last-child {
  border-bottom: 0;
}

.corp-board_step {
  display: block;
  font-size: 16px;
  font-weight: 700;
}

.corp-board_note {
  display: block;
  font-size: 13px;
  color: var(--corp-dim);
}

/* トグル: この面で完全に丸いのはこれとロゴだけ。ON が最終(静止)状態 */
.corp-toggle {
  position: relative;
  flex: none;
  width: 52px;
  height: 28px;
  border: 2px solid var(--corp-sky);
  border-radius: 999px;
  background: var(--corp-sky);
  box-shadow: none;
}

.corp-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 27px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--corp-light);
  transform: translateY(-50%);
}

.is-off .corp-toggle {
  border-color: var(--corp-dim);
  background: transparent;
  box-shadow: none;
  opacity: 0.7;
}

.is-off .corp-toggle::after {
  left: 5px;
  background: var(--corp-dim);
}

/* 読み込み時に上から順に ON。一度だけ(fill-mode: both なので終了後も ON のまま) */
@media (prefers-reduced-motion: no-preference) {
  .corp-board_row:not(.is-off) .corp-toggle {
    animation: corp-toggle-on 0.5s ease-out both;
  }

  .corp-board_row:not(.is-off) .corp-toggle::after {
    animation: corp-knob-on 0.5s ease-out both;
  }

  .corp-board_row:nth-child(1) .corp-toggle,
  .corp-board_row:nth-child(1) .corp-toggle::after {
    animation-delay: 0.3s;
  }

  .corp-board_row:nth-child(2) .corp-toggle,
  .corp-board_row:nth-child(2) .corp-toggle::after {
    animation-delay: 0.75s;
  }

  .corp-board_row:nth-child(3) .corp-toggle,
  .corp-board_row:nth-child(3) .corp-toggle::after {
    animation-delay: 1.2s;
  }

  .corp-board_row:nth-child(5) .corp-toggle,
  .corp-board_row:nth-child(5) .corp-toggle::after {
    animation-delay: 1.65s;
  }

  @keyframes corp-toggle-on {
    from {
      border-color: var(--corp-dim);
      background: transparent;
      box-shadow: none;
    }
  }

  @keyframes corp-knob-on {
    from {
      left: 5px;
      background: var(--corp-dim);
    }
  }
}

@media screen and (max-width: 780px) {
  .home-hero-sec {
    padding-top: 100px;
    padding-bottom: 48px;
  }

  .corp-hero_inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .corp-hero_title {
    font-size: clamp(30px, 8.6vw, 40px);
  }

  .corp-hero_actions {
    flex-direction: column;
    align-items: stretch;
  }

  .corp-hero_actions .readmore-btn {
    width: 100%;
  }

  .corp-board_cap,
  .corp-board_row {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ---- 5. Home fit diagram ------------------------------------------------ */
.corp-fit-sec {
  padding: clamp(48px, 7vw, 88px) 0;
  background: var(--corp-paper-bg);
  color: var(--corp-ink);
}

.corp-sec_head {
  margin-bottom: 28px;
}

/* 見出しの主従: 日本語が大見出し(900)、英語は小さな等幅ラベル。ラベルは見出しの上 */
.corp-sec_label {
  margin: 0 0 12px;
  font-family: var(--corp-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--corp-soft);
}

.corp-sec_title {
  margin: 0;
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 900;
  line-height: 1.3;
  text-wrap: balance;
  word-break: auto-phrase;
}

.corp-plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.1fr) auto minmax(0, 1fr);
  align-items: stretch;
  border: 1px solid var(--corp-ink);
  background: var(--corp-white);
}

.corp-plan_col {
  min-width: 0;
  padding: 18px 20px;
}

.corp-plan_cap {
  margin: 0 0 10px;
  font-family: var(--corp-mono);
  font-size: 12px;
  color: var(--corp-soft);
}

.corp-plan_list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.corp-plan_list li {
  padding: 8px 12px;
  border: 1px solid var(--corp-rule);
  background: var(--corp-paper);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}

.corp-plan_col--core {
  background: var(--corp-ink);
  color: var(--corp-white);
}

.corp-plan_col--core .corp-plan_cap {
  color: var(--corp-dim);
}

.corp-plan_col--core .corp-plan_list li {
  border-color: var(--corp-core-line);
  background: transparent;
  color: var(--corp-white);
}

.corp-plan_col--core .corp-plan_list li.is-emphasis {
  border-color: var(--corp-white);
  background: var(--corp-sky);
}

/* 列をつなぐ配線と矢じり。左から右、スマホでは上から下 */
.corp-plan_wire {
  position: relative;
  width: clamp(18px, 3vw, 44px);
  background: linear-gradient(var(--corp-ink), var(--corp-ink)) center / 100% 1.5px no-repeat, var(--corp-white);
}

.corp-plan_wire::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  border: 5px solid transparent;
  border-left-color: var(--corp-ink);
  border-right: 0;
  transform: translateY(-50%);
}

@media screen and (max-width: 780px) {
  .corp-plan {
    grid-template-columns: minmax(0, 1fr);
  }

  .corp-plan_wire {
    width: auto;
    height: 26px;
    background: linear-gradient(var(--corp-ink), var(--corp-ink)) center / 1.5px 100% no-repeat, var(--corp-white);
  }

  .corp-plan_wire::after {
    top: auto;
    right: 50%;
    bottom: 0;
    border: 5px solid transparent;
    border-top-color: var(--corp-ink);
    border-bottom: 0;
    transform: translateX(50%);
  }
}

/* ---- 6. Section headings (corporate surface 共通) ------------------------ */
/* 旧: 巨大な英字グラデ + 小さな日本語。新: 日本語が大見出し、英語は上の小さな等幅ラベル。
   旧ルールは .home-*-sec .sec-title_* (0,2,0) や !important を含むので body 付きで詳細度を上げる。 */

/* 巨大な透かし英字(data-en)は出さない */
body .sec-main_title[data-en]::before,
body .sec-main_title[data-en]::after {
  content: none !important;
  display: none !important;
}

body .home-sec_lead,
body .sec-main_title .home-sec_lead {
  max-width: 44em;
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--corp-soft);
  text-align: left;
}

/* 濃色の面の上では、ラベルは淡色・見出しは明色。スカイ→ネイビーの帯の上は補助色(--corp-dim)だと 2.5:1、
   淡色(--corp-light)でも帯の明るい側で 4.4:1 止まりなので、ラベルは白 */
body :is(.home-statement-sec, .home-cta-sec) .sec-main_title .sec-title_head {
  color: var(--corp-dim);
}

body :is(.recruit-position-sec, .about-security_box, .service-cta_refresh-box, .case-page_cta-box)
  .sec-main_title .sec-title_head {
  color: var(--corp-white);
}

body :is(.about-security_box, .service-cta_refresh-box, .case-page_cta-box) .sec-main_title .sec-title_jp {
  color: var(--corp-light);
}

/* 旧は白 75% の文字。スカイ寄りの地では 3.8:1 まで下がるので淡色トークンにする */
body .about-security_text {
  color: var(--corp-light);
}

/* /news/ の旧「大きな英字」見出し(.page-contents_area 配下、単独で (0,3,0)) */
body .page-contents_area .news-sec .sec-title_head {
  font-size: 12px;
  letter-spacing: 0.04em;
  font-family: var(--corp-mono);
  color: var(--corp-soft);
}

body .page-contents_area .news-sec .sec-title_jp {
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 900;
  color: var(--corp-ink);
}

/* ---- 7. Buttons(ボタン本体は site-chrome.css 6。ここは旧 CSS の hover の上書きだけ) ---- */

body .home-cta_actions .readmore-btn:hover {
  transform: none;
  box-shadow: none;
}

/* 控えめなテキストリンク(カード下の「詳細を見る」など)は矢印やグラデを足さず下線で示す */
body .home-text_link {
  color: var(--corp-sky-text);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---- 8. Light sections / ruled layouts ------------------------------------ */
.home-solution-sec {
  margin-top: 0;
  background: var(--corp-white);
  border-top: 1px solid var(--corp-ink);
}

/* Solutions: 罫線で区切る表(モックの ruled table)。悩み → 名称 → 一文 → リンク。影と角丸は使わない */
.home-solution-sec .home-solution_grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 36px 0 0;
  padding: 0;
  border: 1px solid var(--corp-rule);
  border-right: 0;
  border-bottom: 0;
}

.home-solution_card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px;
  border: 0;
  border-right: 1px solid var(--corp-rule);
  border-bottom: 1px solid var(--corp-rule);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* 悩み(吹き出し)は、表の見出し行の小さな注記に */
.corp-solution_pain {
  position: static;
  display: block;
  min-height: 0;
  margin: 0 0 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--corp-rule);
  border-radius: 0;
  background: none;
  color: var(--corp-soft);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  word-break: auto-phrase;
  text-wrap: balance;
}

.corp-solution_pain::after {
  content: none;
}

.home-solution_card .service-title_jp {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.5;
  color: var(--corp-ink);
}

.home-solution_card .home-card_text {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--corp-soft);
}

.home-solution_card .home-text_link {
  margin-top: auto;
  padding-top: 14px;
}

/* 390px では 3 行になるため、balance をやめて末尾の孤立だけ防ぐ(行が均等に短くならない) */
.home-solution-sec .home-sec_lead {
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* 「こんなお悩み」は表の続きの罫線行(別の枠は作らない) */
.corp-solution_more {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(0, 2.3fr);
  gap: 0 32px;
  align-items: start;
  padding: 20px;
  border: 1px solid var(--corp-rule);
  border-top: 0;
}

.corp-solution_more-title {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.6;
  color: var(--corp-ink);
}

.corp-solution_more-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  margin: 0;
  padding: 0;
}

.corp-solution_more-head {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.6;
  color: var(--corp-ink);
}

.corp-solution_more-list .home-card_text {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--corp-soft);
}

@media screen and (max-width: 1024px) {
  .home-solution-sec .home-solution_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .corp-solution_more {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}

@media screen and (max-width: 780px) {
  .home-solution-sec .home-solution_grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-solution_card {
    padding: 14px 0 4px;
    border-right: 0;
  }

  .corp-solution_pain {
    margin-bottom: 10px;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .home-solution_card .home-card_text {
    font-size: 13px;
    line-height: 1.7;
  }

  .home-solution-sec .home-solution_grid,
  .corp-solution_more {
    border-left: 0;
    border-right: 0;
  }

  .corp-solution_more {
    padding: 16px 0;
  }

  .corp-solution_more-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}

/* プロセス/FAQ など薄灰地の後続セクションは紙色。白との切り替えは細い罫線で */
.faq-sec.home-faq-sec {
  margin-top: 0;
  background: var(--corp-white);
}

/* 8b. 旧カード/ピルの整理 ------------------------------------------------
   旧CSSは「24〜36px の角丸 + 柔らかい影」「999px のピル」が一律に使われている。この面では
   角丸は 4〜6px、影なし、ピルは 4px の角ラベルにそろえる(丸いのはトグルとロゴだけ)。
   旧ルールは単一クラスなので、body を前置して詳細度を 1 つ上げる。 */
body :is(
  .home-base_card, .service-refresh_card, .service-plan_card, .service-assurance_card,
  .service-process_card, .oprion-types-card, .oprion-industry-cell, .service-cta_refresh-box,
  .case-page_cta-box, .case-page_summary-card, .about-team_card, .about-approach_card,
  .about-security_box, .about-security_item, .company-mv_card, .contact-form_area, .recruit-form_area,
  .recruit-appeal_wrap, .recruit-position_wrap, .recruit-flow_wrap, .recruit-gallery_item,
  .downloads-card, .events-card, .wp-hero_layout, .wp-card_visual, .wp-strip_visual,
  .wp-section_visual, .case-page_summary-thumb
) {
  border-radius: var(--corp-radius-lg);
  box-shadow: none;
}

body :is(
  .home-card_label, .service-refresh_label, .home-base_category,
  .case-page_category, .oprion-chip_list li, .oprion-steps_num, .strength-circle, .about-team_icon
) {
  border-radius: var(--corp-radius);
}

/* 入れ子セレクタや img に直接付いた旧ルール(同じ詳細度では負けるので要素を足して上げる) */
body :is(.service-cta_refresh-visual, .case-page_cta-visual, .message-img_area, .owner-img_area, .recruit-gallery_item) img,
body figure.wp-card_visual,
body .strength-circle {
  border-radius: var(--corp-radius-lg);
  box-shadow: none;
}

body :is(.oprion-industry-matrix_head, .case-page_meta) span {
  border-radius: var(--corp-radius);
}

/* /about/ の代表写真は正方形。旧 style.css は列いっぱい(680px)に広げ、隣の本文より縦に長くなるため、PC では本文の高さに収まる幅に抑える(スマホは旧 CSS の幅のまま) */
@media (min-width: 781px) {
  .message-img_area {
    max-width: 440px;
  }
}

/* カード下の「詳細を見る」: 影と色付きの枠をやめ、罫線のリンク行にする */
body .oprion-card_cta {
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid var(--corp-rule);
  border-radius: 0;
  background: none;
  color: var(--corp-sky-text);
  box-shadow: none;
}

body .oprion-card_cta:hover {
  background: none;
  box-shadow: none;
  transform: none;
  border-color: var(--corp-sky);
}

body .home-card_label {
  background: var(--corp-grid);
  color: var(--corp-ink);
  font-family: var(--corp-mono);
  font-weight: 500;
}

body .oprion-strength-list_num {
  background: none;
  -webkit-text-fill-color: currentColor;
}

body .oprion-steps_num {
  background: var(--corp-ink);
  color: var(--corp-white);
  box-shadow: none;
}

/* 旧: 上端のグラデバー(Solutions カードと工程の帯) */
.home-solution_card::before,
.oprion-steps::before {
  content: none;
}

@media (hover: hover) {
  body :is(.home-solution_card, .home-case_card, .home-process_card, .home-base_card):hover {
    transform: none;
    box-shadow: none;
  }
}

body .home-base_category {
  background: var(--corp-ink);
  border-radius: var(--corp-radius);
}

body .oprion-faq-list {
  max-width: none;
}

/* 8c. 旧の青グラデ濃色パネルを新配色へ ----------------------------
   旧は濃紺→青のグラデ + 影。濃色パネルはスカイ→ネイビーの帯にする。 */
body :is(
  .editorial-highlight_panel--service, .service-cta_refresh-box, .case-page_cta-box,
  .about-security_box, .company-mv_card--mission, .company-mv_card--vision,
  section.recruit-position-sec, .case-page_summary-thumb--core
) {
  background: var(--corp-band-bg);
  box-shadow: none;
}

/* 事例サムネイル: 旧は用途ごとに青/緑/紫/橙。ネイビー〜スカイの濃淡にそろえる */
body .case-page_summary-thumb--excel {
  background: linear-gradient(100deg, var(--corp-ink), var(--corp-deep));
}

body .case-page_summary-thumb--ai {
  background: linear-gradient(100deg, var(--corp-sky), var(--corp-ink));
}

body .case-page_summary-thumb--customer {
  background: linear-gradient(100deg, var(--corp-deep), var(--corp-ink));
}

body .case-page_summary-thumb--maintenance {
  background: linear-gradient(100deg, var(--corp-mid), var(--corp-ink));
}

body .case-page_summary-thumb--data {
  background: linear-gradient(100deg, var(--corp-ink), var(--corp-sky));
}

body .contact-form_intro {
  text-align: left;
}

body .file-label,
body .recruit-form .file-label {
  border-radius: var(--corp-radius);
}

body :is(.strength-circle, .about-team_icon, .position-category, .case-page_category.is-active) {
  background: var(--corp-ink);
  box-shadow: none;
}

body li.recruit-position_wrap:hover {
  transform: none;
  box-shadow: none;
}

body .service-refresh_label:not(.service-refresh_label--light) {
  background: var(--corp-grid);
  color: var(--corp-ink);
  font-family: var(--corp-mono);
  font-weight: 500;
}

/* 濃色パネル上のラベル(Mission / Vision)。上の「スカイを暗くした文字色」が当たるとスカイの帯の上で 1.3:1 になるので淡色にする。
   旧の白 12% の地ではスカイの上で 4.5:1 に届かないので、地はネイビーの半透明に */
body .service-refresh_label--light {
  background: var(--corp-ink-a72);
  color: var(--corp-light);
}

body :is(
  .service-plan_price, .case-page_summary-cta, .service-process_num, .about-approach_num,
  .text-highlight, .flow-step, .recruit-flow_arrow
) {
  color: var(--corp-sky-text);
}

/* 見出しが左寄せになったので、続くリード文・補足も左に揃える(旧は中央寄せ) */
body .sec-main_title.text-center :is(.sec-common_text, .service-plan_note),
body .sec-main_title.text-center + :is(.sec-common_text, .service-plan_note),
body .text-center .sec-common_text {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

/* ---- 9. Dark sections (statement / CTA) ----------------------------------- */
.home-statement-sec {
  padding: clamp(56px, 8vw, 104px) 0;
  background: var(--corp-dark-bg);
}

.home-statement-sec::before,
.home-statement_wrap::before {
  content: none;
}

.home-statement_en {
  font-family: var(--corp-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--corp-dim);
}

.home-statement-sec .home-statement_title {
  font-size: clamp(30px, 4.4vw, 56px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--corp-light);
}

.home-statement_body p {
  color: var(--corp-light);
}

.home-statement-sec .oprion-strength-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 56px;
  border-top: 1px solid var(--corp-light-a38);
}

.home-statement-sec .oprion-strength-list_item,
.home-statement-sec .oprion-strength-list_item:nth-child(even),
.home-statement-sec .oprion-strength-list_item:nth-last-child(-n+2) {
  flex-direction: column;
  gap: 12px;
  padding: 24px 20px 0 0;
  border: 0;
}

.home-statement-sec .oprion-strength-list_num {
  font-family: var(--corp-mono);
  font-size: 1.25rem;
  color: var(--corp-glow);
}

.home-statement-sec .oprion-strength-list_title {
  margin-bottom: 6px;
  font-size: 1.0625rem;
  font-weight: 900;
}

.home-statement-sec .oprion-strength-list_text {
  color: var(--corp-dim);
}

@media screen and (max-width: 1024px) {
  .home-statement-sec .oprion-strength-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-statement-sec .oprion-strength-list_item,
  .home-statement-sec .oprion-strength-list_item:nth-child(even),
  .home-statement-sec .oprion-strength-list_item:nth-last-child(-n+2) {
    padding: 24px 16px 8px 0;
  }
}

@media screen and (max-width: 780px) {
  .home-statement-sec .oprion-strength-list {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 40px;
  }

  .home-statement-sec .oprion-strength-list_item,
  .home-statement-sec .oprion-strength-list_item:nth-child(even),
  .home-statement-sec .oprion-strength-list_item:nth-last-child(-n+2) {
    flex-direction: row;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--corp-line-dark);
  }

  .home-statement-sec .oprion-strength-list_item:last-child {
    border-bottom: 0;
  }
}

.home-cta_box::before,
.home-cta_box::after {
  content: none;
}

/* ---- 11. Mobile sticky CTA bar --------------------------------------------- */
.corporate-cta-bar {
  display: none;
}

@media screen and (max-width: 780px) {
  nav.corporate-cta-bar { /* common.css の汎用 nav {height:100%; position:relative} に勝つため要素付き */
    height: auto;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 8100; /* メニュー(9995)より下、スクロールトップ(8000)の上 */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: var(--corp-bar-bg);
    border-top: 1px solid var(--corp-rule);
    box-shadow: none;
  }

  .corporate-cta-bar_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--corp-btn-h);
    border-radius: var(--corp-radius);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
  }

  .corporate-cta-bar_btn--primary {
    background: var(--corp-ink);
    color: var(--corp-white);
    box-shadow: var(--corp-press);
  }

  /* 主CTAだけのとき(問い合わせ一本化)は全幅 */
  .corporate-cta-bar_btn:only-child {
    grid-column: 1 / -1;
  }

  .corporate-cta-bar_btn--sub {
    background: var(--corp-white);
    color: var(--corp-ink);
    border: 1px solid var(--corp-ink);
    box-shadow: var(--corp-press-light);
  }

  .corporate-cta-bar_btn:active {
    transform: translateY(1px);
    box-shadow: none;
  }

  /* 同じ行き先のボタンが画面内に見えている間は、corporate.js が is-hidden を付けてバーを下へ引っ込める(JS が無ければ出しっぱなし)。
     visibility は動きが終わってから切り替え、引っ込んだバーへフォーカスが入らないようにする */
  nav.corporate-cta-bar {
    transition: transform 0.2s ease, visibility 0s;
  }

  nav.corporate-cta-bar.is-hidden {
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
  }

  @media (prefers-reduced-motion: reduce) {
    nav.corporate-cta-bar,
    nav.corporate-cta-bar.is-hidden {
      transition: none;
    }
  }

  /* バーが最終行を隠さないよう余白を確保 */
  body.has-corporate-cta-bar,
  body:has(.corporate-cta-bar) {
    padding-bottom: calc(var(--corp-bar-h) + env(safe-area-inset-bottom));
  }

  /* モバイルメニューを開いている間は隠す */
  body:has(.menu-list_open) .corporate-cta-bar,
  body:has(.menu-icon_open) .corporate-cta-bar {
    display: none;
  }

  /* 固定のスクロールトップをバーの上へ */
  .scroll-top {
    bottom: calc(var(--corp-bar-h) + 12px + env(safe-area-inset-bottom));
    right: 12px;
  }
}

/* ---- 12. Contact form ------------------------------------------------------- */
#contact-form-errors:empty {
  display: none;
}

#contact-form-errors {
  margin-bottom: 24px;
  padding: 14px 16px;
  border: 1px solid var(--corp-error);
  border-left-width: 5px;
  border-radius: var(--corp-radius);
  background: var(--corp-error-bg);
  color: var(--corp-error);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

#contact-form-errors:focus-visible {
  outline: 2px solid var(--corp-error);
  outline-offset: 2px;
}

/* 旧 style.css の #aaa(白で 2.3:1)と #e74c3c(紙色で 3.5:1)は本文の基準 4.5:1 に届かない */
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--corp-soft);
}

.contact-form .error-message {
  color: var(--corp-error);
}

/* 同意チェックのタップ領域: ボックスではなくラベルのパディングで 44px を確保 */
.contact-form .checkbox-label {
  align-items: center;
  min-height: 44px;
  padding: 10px 0;
}

.contact-form .checkbox-label input[type="checkbox"] {
  margin-top: 0;
}

/* 同意チェックの「必須」バッジ(label::after): site-chrome.css の .form-group > label { display: block } が旧 style.css の flex に勝っていて、
   スマホで本文とバッジが 1 行に収まらずバッジだけ次の行に落ちる。flex に戻してバッジを本文の右(1 行目)に置き、収まらない分は本文側が文節で折り返す */
body .contact-form .checkbox-group > .checkbox-label {
  display: flex;
  align-items: flex-start;
}

.contact-form .checkbox-group > .checkbox-label input[type="checkbox"] {
  margin-top: 2px;
}

.contact-form .checkbox-group > .checkbox-label span {
  min-width: 0;
  word-break: auto-phrase;
}

.contact-form .checkbox-group > .checkbox-label::after {
  flex: none;
  margin-top: 2px;
  white-space: nowrap;
}

@media screen and (max-width: 780px) {
  /* 16px 未満だと iOS Safari が入力時にズームする */
  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form textarea {
    font-size: 16px;
  }
}

/* ヘッダー直下の二重マージン(page-start 120px + entry 96px)を詰める。.contact-page-header 配下のみ */
.contact-page-header ~ .page-start {
  margin-top: 0;
}

.contact-page-header ~ .contact-entry-sec {
  margin-top: 40px;
}

/* ---- 16. Vertical rhythm ----------------------------------------------------- */
/* 帯・ヒーロー・ページヘッダーを除く main 直下の section は、上余白を --corp-section-y に統一する。
   旧CSSは section ごとに margin 96/100/120/140 や padding 64/80 を持つので :not() を重ねて詳細度を上げる。
   背景を持つ面(方眼・濃色)だけ下にも余白を取り、余白が二重にならないようにする。 */
body main > section:not(.home-hero-sec):not(.page-header-sec),
body .page-contents_area > section:not(.page-header-sec):not(.home-hero-sec) {
  margin: 0;
  padding: var(--corp-section-y) 0 0;
}

/* .home-solution-sec は白い面だが、直後が濃色の Statement なので下の余白を自分で持つ。
   背景色が切り替わる境目(紙色の面 → 白、白 → 紙色の面)も、本文が面の縁に 0px で接しないよう同じ下余白を取る */
body main > section:is(
  .corp-fit-sec, .home-solution-sec, .home-statement-sec, .recruit-position-sec,
  .home-process-sec, .company-sec, .owner-sec, .recruit-appeal-sec, .recruit-numbers-sec, .recruit-flow-sec
):not(.page-header-sec) {
  padding-bottom: var(--corp-section-y);
}

/* 事例一覧の先頭セクション: 旧 style.css(max-width: 780px)が margin-top: 132px を !important で付けるため、
   スマホだけ帯との間に約190pxの空白ができる。他ページと同じ上 padding(--corp-section-y)だけにする */
@media screen and (max-width: 780px) {
  body .case-page-overview-sec {
    margin-top: 0 !important;
  }
}

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

/* ---- 17. Home sections --------------------------------------------------------- */
.home-statement_body p {
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* 導入事例: 罫線の 1 枚カード。メタ行 → 題名 → 課題/対応/成果の 3 行 */
.corp-case_note {
  margin: 20px 0 0;
  font-size: 13px;
  color: var(--corp-soft);
}

.corp-case_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 28px;
}

.corp-case_card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--corp-rule);
  border-top: 2px solid var(--corp-ink);
  border-radius: var(--corp-radius-lg);
  background: var(--corp-white);
}

.corp-case_meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0 0 12px;
  font-family: var(--corp-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--corp-soft);
}

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

.corp-case_title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.5;
  text-wrap: balance;
  word-break: auto-phrase;
}

.corp-case_rows {
  margin: 0 0 12px;
}

.corp-case_row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--corp-rule);
}

.corp-case_row dt {
  font-size: 13px;
  font-weight: 900;
  line-height: 1.8;
  color: var(--corp-ink);
}

.corp-case_row dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--corp-soft);
}

.corp-case_card .home-text_link {
  align-self: flex-start;
  margin-top: auto;
}

body .home-text_link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 0;
}

/* 矢印を足さず下線だけで示す */
body :is(.home-text_link, .contact-entry_link, .case-page_summary-cta)::after {
  content: none;
}

/* 工程: 5 列の罫線タイムライン。1024px 以下は縦の罫線行(番号 | 題名・説明) */
body ol.oprion-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 24px;
  margin: 40px 0 0;
  padding: 0;
  border-top: 2px solid var(--corp-ink);
  text-align: left;
}

body .oprion-steps_item {
  display: block;
  min-width: 0;
  padding: 20px 0 0;
  border: 0;
  background: none;
  box-shadow: none;
  text-align: left;
}

body .oprion-steps_num {
  display: inline-block;
  margin: 0 0 12px;
  padding: 2px 8px;
  border-radius: var(--corp-radius);
  font-family: var(--corp-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
}

body .oprion-steps_title {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.5;
}

body .oprion-steps_text {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--corp-soft);
}

@media screen and (max-width: 1024px) {
  body ol.oprion-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  body .oprion-steps_item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--corp-rule);
  }

  body .oprion-steps_num {
    grid-row: 1 / 3;
    align-self: start;
    margin: 2px 0 0;
    text-align: center;
  }

  body .oprion-steps_title,
  body .oprion-steps_text {
    grid-column: 2;
  }
}

/* WORK RECIPE: 記事が 1〜3 本でも行が空かないよう、列数を自動で決める */
.corp-base_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
  margin-top: 28px;
}

/* 3 本そろったときは 2+1 で1枚だけ浮かないよう、3 列のまま 780px まで保ち(781px でも 1 枚が約 230px)、
   それ以下は 1 列にする。サイト共通の 780px の切れ目をそのまま使う */
.corp-base_grid:has(> :nth-child(3)) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media screen and (max-width: 780px) {
  .corp-base_grid:has(> :nth-child(3)) {
    grid-template-columns: minmax(0, 1fr);
  }
}

body .home-base_card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--corp-rule);
  border-top: 2px solid var(--corp-ink);
  background: var(--corp-white);
}

body .home-base_card .home-text_link {
  align-self: flex-start;
  margin-top: auto;
}

@media screen and (max-width: 780px) {
  .corp-case_grid {
    grid-template-columns: minmax(0, 1fr);
  }

  
}

/* ---- 18. Shared components ------------------------------------------------------- */

/* 旧 .scroll / .fadein の 2 秒フェードは、この面では 0.4 秒。動きを減らす設定では最終状態で表示 */
body :is(.scroll, .scroll-left, .scroll-right) {
  transition-duration: 0.4s;
}

@media (prefers-reduced-motion: reduce) {
  body :is(.scroll, .scroll-left, .scroll-right) {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
}

/* ボタンは 1 種類: ラッパーに面と枠、リンクがその全面を埋める(ラッパーに余白を持たせない) */

/* <button class="readmore-btn"> と フォームの各ボタン: リンク型と同じ寸法・書体 */

/* ---- 19. /service/ industry matrix + footer + page header details ------------------------ */
/* 旧 backoffice-ai.css は .oprion-industry-matrix--3col .oprion-industry-row(0,2,0)で 3 列固定にしている */
.oprion-industry-matrix--3col .oprion-industry-row,
.oprion-industry-matrix--3col .oprion-industry-matrix_head {
  grid-template-columns: 220px minmax(0, 1.2fr) minmax(0, 1fr);
}

.oprion-industry-cell .service-refresh_title {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.5;
  word-break: auto-phrase;
}

@media screen and (max-width: 1024px) {
  .oprion-industry-matrix--3col .oprion-industry-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .oprion-industry-matrix--3col .oprion-industry-matrix_head {
    display: none;
  }
}

/* 内側ページのヘッダー: ラベル → 見出し → リード の間隔をそろえる。装飾的な 3D イラストは出さない */

.page-header_img:has(img[src*="page-header_contact"], img[src*="page-header_company"]) {
  display: none;
}

/* 英字の大きな透かし(.page-text_en)は出さない */

/* ---- 20. Legacy card / colour clean-up (radius, shadow, status tints, fonts) -------------- */
/* 角丸は 4〜6px、影なし。旧は 16〜28px + 大きな影、999px のピル、円形の番号 */
body :is(
  .case-single_summary-card, .case-single_highlight, .case-page_detail-card, .case-page_block,
  .case-page_feature-card, .privacy-contact, .events-form_area, .downloads-form_area, .wp-hero_visual
) {
  border-radius: var(--corp-radius-lg);
  box-shadow: none;
}

body .service-refresh_card figure.wp-card_visual {
  border-radius: var(--corp-radius-lg);
  box-shadow: none;
}

body :is(.events-form, .downloads-form) :is(input, textarea, select) {
  border-radius: var(--corp-radius);
}

/* 事例詳細: 青/緑/赤の淡色ブロックをやめ、罫線 + 墨色の見出しにする */
body .case-single_highlight {
  padding: 20px;
  border: 1px solid var(--corp-rule);
  border-top: 2px solid var(--corp-ink);
  background: var(--corp-white);
}

body .case-single_highlight h2 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 900;
  color: var(--corp-ink);
}

body .case-single_highlight-icon {
  display: none;
}

body .case-single_highlight p {
  color: var(--corp-soft);
}

/* /privacy/: 見出しの青い下線、青いリンク、グレーの角丸ボックス */
body .privacy-title {
  border-bottom: 1px solid var(--corp-ink);
  color: var(--corp-ink);
}

body .privacy-contact {
  padding: 24px;
  border: 1px solid var(--corp-rule);
  border-left: 2px solid var(--corp-ink);
  background: var(--corp-white);
}

/* 読み幅: 1 行は全角 44 字(44em)まで。旧は本文欄いっぱいで 56〜75 字になり、行頭へ戻る目の移動が長い。
   中央寄せのブロックは中央のまま(margin-inline: auto)、左寄せは左のまま。お知らせ記事の本文は単独のクラスがないので wrapper から指す */
body :is(.privacy-intro, .privacy-text, .privacy-list),
body :is(.corp-fallback-sec, .page-contents_area) .page-contents :is(p, ul, ol) {
  max-width: 44em;
}

body :is(.company-summary_text, .recruit-form_intro) {
  max-width: 44em;
  margin-inline: auto;
}

/* 中央寄せの長い文は、狭い幅では行末が「捉え、」のように 1 語だけ余って孤立するので左寄せ */
@media screen and (max-width: 780px) {
  body .company-summary_text {
    text-align: left;
  }
}

/* /recruit/: 赤いバッジ、#888 の補足、狭い列で崩れる見出し */
body .position-status {
  border-radius: var(--corp-radius);
  background: var(--corp-ink);
  color: var(--corp-white);
  font-family: var(--corp-mono);
  font-size: 12px;
  font-weight: 500;
}

body :is(.position-location, .position-type, .form-note) {
  color: var(--corp-soft);
}

body .flow-title {
  text-wrap: balance;
  word-break: auto-phrase;
}

/* 番号・ラベルの旧英字フォントは等幅に */
body :is(.strength-label, .service-process_num, .about-approach_num, .home-card_label) {
  font-family: var(--corp-mono);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* ---- 21. Forms (contact / recruit / downloads / events / diagnostic share one field style) ---- */

/* 上の共通指定が旧CSSのエラー枠(.form-group.error input)より強いので、エラー状態を明示的に戻す */

/* index.php のフォールバック(カテゴリ・日付アーカイブ等)。固定ヘッダーの下に本文が潜らないようにする */

body :is(.contact-form, .recruit-form, .downloads-form, .events-form) :is(.form-note, .label-note) {
  color: var(--corp-soft);
}

/* ---- 22. Small legacy leftovers ------------------------------------------------------------- */
/* 事例のメタ: 青グラデのピル → 等幅の小さなラベル */

body .about-team_icon {
  color: var(--corp-light);
}

/* 旧の記事用ラッパー(.page-contents_area): 1080px 幅・青い h2/h3/span・青枠の ul をこの面ではやめる */
body .page-contents_area {
  max-width: 1200px;
  width: calc(100% - 2 * var(--corp-gutter));
}

body .page-contents_area .contents-wrap {
  width: 100%;
}

body .page-contents_area :is(h2, h3, h4) {
  margin-top: 0;
  color: var(--corp-ink);
  font-weight: 900;
}

body .page-contents_area span {
  color: inherit;
  font-weight: inherit;
}

body .page-contents_area ul {
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 0;
  border: 0;
}

/* ---- 23. /diagnostic/ (旧: ページ内 <style>。トークンと罫線カードで組み直し) -------------------- */
body .diagnostic-intro,
body .diagnostic-app-section,
body .diagnostic-pricing,
body .diagnostic-cta,
body .diagnostic-backoffice {
  margin-top: var(--corp-section-y);
  padding: 0;
  text-align: left;
}

body .diagnostic-backoffice {
  margin-bottom: var(--corp-section-y);
}

body .diagnostic-intro_desc {
  max-width: 44em;
  margin: 18px 0 32px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--corp-soft);
}

body .diagnostic-intro .sec-main_title-en,
body .diagnostic-pricing .sec-main_title-en,
body .diagnostic-backoffice .sec-main_title-en {
  display: block;
  margin: 0 0 12px;
  font-family: var(--corp-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--corp-soft);
  background: none;
  -webkit-text-fill-color: currentColor;
}

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

body .diagnostic-menu,
body .pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  max-width: none;
  margin: 0;
  border: 1px solid var(--corp-rule);
  border-right: 0;
  border-bottom: 0;
}

body .pricing-cards {
  margin-top: 32px;
}

body .diagnostic-card,
body .pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px;
  border: 0;
  border-right: 1px solid var(--corp-rule);
  border-bottom: 1px solid var(--corp-rule);
  border-radius: 0;
  background: var(--corp-white);
  box-shadow: none;
  transform: none;
  text-align: left;
}

body .diagnostic-card:hover {
  transform: none;
  box-shadow: none;
}

body .diagnostic-card--full {
  grid-column: 1 / -1;
  background: var(--corp-band-bg);
  color: var(--corp-light);
}

body .pricing-card--featured {
  background: var(--corp-paper);
  border-top: 2px solid var(--corp-ink);
  transform: none;
}

body .diagnostic-card_title,
body .pricing-card_title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.5;
  color: inherit;
}

body .diagnostic-card_desc {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--corp-soft);
}

body .diagnostic-card--full .diagnostic-card_desc,
body .diagnostic-card--full .diagnostic-card_meta {
  color: var(--corp-light);
}

body .diagnostic-card:nth-child(5):not(.diagnostic-card--full) {
  grid-column: span 2;
}

body .diagnostic-card--full .diagnostic-card_title {
  color: var(--corp-light);
}

body .diagnostic-card_meta {
  display: flex;
  gap: 16px;
  margin: 0 0 20px;
  font-family: var(--corp-mono);
  font-size: 12px;
  color: var(--corp-soft);
}

body span.pricing-card_badge {
  position: static;
  align-self: flex-start;
  margin: 0 0 12px;
  padding: 2px 8px;
  border-radius: var(--corp-radius);
  background: var(--corp-ink);
  color: var(--corp-white);
  font-family: var(--corp-mono);
  font-size: 12px;
  font-weight: 500;
  transform: none;
}

body .pricing-card_price {
  margin: 0 0 20px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--corp-ink);
}

body .pricing-card_price span {
  font-size: 15px;
  font-weight: 500;
  color: var(--corp-soft);
}

body .pricing-card_features {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  list-style: none;
  text-align: left;
}

body .pricing-card_features li {
  padding: 10px 0;
  border-top: 1px solid var(--corp-rule);
  font-size: 14px;
  line-height: 1.7;
  color: var(--corp-soft);
}

/* 診断のボタンもサイト共通のボタン(濃紺ベタ / 枠線)に */
body .diagnostic-card_btn,
body .pricing-card_btn,
body .diagnostic-cta_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--corp-btn-h);
  padding: 15px 26px;
  border: 1px solid var(--corp-ink);
  border-radius: var(--corp-radius);
  background: transparent;
  color: var(--corp-ink);
  font-family: var(--corp-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

body .diagnostic-card_btn,
body .pricing-card_btn {
  margin-top: auto;
}

body .diagnostic-card_btn {
  align-self: flex-start;
}

body .pricing-card_btn {
  width: 100%;
}

body .diagnostic-card_btn:hover,
body .pricing-card_btn:hover,
body .diagnostic-cta_btn:hover {
  background: var(--corp-ink);
  color: var(--corp-white);
  transform: none;
}

body .diagnostic-card_btn--primary,
body .pricing-card_btn--primary,
body .diagnostic-consult-form .diagnostic-cta_btn {
  background: var(--corp-ink);
  color: var(--corp-white);
}

body .diagnostic-card_btn--primary:hover,
body .pricing-card_btn--primary:hover,
body .diagnostic-consult-form .diagnostic-cta_btn:hover {
  background: var(--corp-sky);
  border-color: var(--corp-sky);
}

body .diagnostic-card--full .diagnostic-card_btn--primary,
body .diagnostic-cta .diagnostic-cta_btn {
  border-color: transparent;
  background: var(--corp-light);
  color: var(--corp-ink);
}

body .diagnostic-card--full .diagnostic-card_btn--primary:hover,
body .diagnostic-cta .diagnostic-cta_btn:hover {
  background: var(--corp-white);
  border-color: var(--corp-white);
  color: var(--corp-ink);
}

body .diagnostic-cta {
  padding: clamp(28px, 4vw, 44px) clamp(20px, 4vw, 44px);
  border-radius: var(--corp-radius-lg);
  background: var(--corp-band-bg);
  color: var(--corp-light);
}

body .diagnostic-cta h2 {
  margin: 0 0 12px;
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 900;
  line-height: 1.4;
  color: var(--corp-light);
  text-wrap: balance;
}

body .diagnostic-cta p {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.7;
  opacity: 1;
}

body .diagnostic-app-container iframe {
  border: 1px solid var(--corp-rule);
}

body .diagnostic-backoffice {
  padding-top: 0;
  border-top: 0;
}

body .diagnostic-backoffice_actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px;
  margin: 0 0 32px;
}

body .diagnostic-consult-form {
  max-width: none;
  padding: 24px;
  border: 1px solid var(--corp-rule);
  border-top: 2px solid var(--corp-ink);
  border-radius: var(--corp-radius-lg);
  background: var(--corp-white);
  box-shadow: none;
}

body .diagnostic-consult_grid {
  gap: 0 24px;
}

body .diagnostic-backoffice_submit {
  justify-content: flex-start;
}

body .diagnostic-consult-complete {
  padding: 20px;
  border: 1px solid var(--corp-rule);
  border-left: 2px solid var(--corp-ink);
  border-radius: var(--corp-radius-lg);
}

@media screen and (max-width: 1024px) {
  body .diagnostic-card:nth-child(5):not(.diagnostic-card--full) {
    grid-column: auto;
  }

  body .diagnostic-menu,
  body .pricing-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 780px) {
  body .diagnostic-menu,
  body .pricing-cards,
  body .diagnostic-consult_grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body .diagnostic-card,
  body .pricing-card {
    border-right: 0;
  }

  body .diagnostic-menu,
  body .pricing-cards {
    border-right: 0;
    border-left: 0;
  }
}

/* ---- 24. Downloads / events sections ---------------------------------------- */
/* 旧 CSS にこれらの section のスタイルは無かった。見出し → 本文の間隔、カード内のボタン余白、3 列のグリッド */
body :is(.downloads-list-sec, .downloads-form-sec, .events-upcoming-sec, .events-ondemand-sec, .events-form-sec) .sec-main_title {
  margin-bottom: 28px;
}

body :is(.downloads-card, .events-card) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  border: 1px solid var(--corp-rule);
  border-top: 2px solid var(--corp-ink);
  background: var(--corp-white);
}

body :is(.downloads-card, .events-card) .home-card_title {
  margin: 12px 0 8px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.5;
}

body :is(.downloads-card, .events-card) .home-card_text {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--corp-soft);
}

body :is(.downloads-card, .events-card) :is(button.readmore-btn, .readmore-btn) {
  margin-top: auto;
}

/* ラベルは行いっぱいに伸ばさず、中身の幅で */
body .home-card_label {
  width: fit-content;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1.6;
}

/* ---- 25. Case studies (list + single) ------------------------------------------------------- */
body .case-page_overview-lead {
  max-width: 44em;
  margin: 18px 0 0;
  text-align: left;
  word-break: auto-phrase;
}

body .case-page_category-list {
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  margin-bottom: 32px;
}

/* 詳細ページ: 外側の大きな箱はやめ、中の罫線ブロックだけにする */
body :is(.case-single_summary-card, .case-page_detail-card) {
  padding: 0;
  border: 0;
  background: none;
}

/* 事例カード: hover で罫線が濃紺になる */
body .case-page_summary-card {
  transition: border-color 0.2s ease;
}

body .case-page_summary-card:hover {
  border-color: var(--corp-ink);
}

body :is(.case-page_block, .case-page_feature-card) {
  border: 1px solid var(--corp-rule);
  border-top: 2px solid var(--corp-ink);
  background: var(--corp-white);
}

/* ---- 26. /about/ -------------------------------------------------------------------------- */
body .strength-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 24px;
  max-width: none;
  margin: 32px 0 0;
  border-top: 2px solid var(--corp-ink);
}

body .strength-item {
  align-items: flex-start;
  padding-top: 20px;
  text-align: left;
}

body .strength-circle {
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  height: auto;
  margin-bottom: 14px;
  padding: 20px;
  text-align: left;
}

body .strength-title {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  color: var(--corp-white);
}

body .strength-label {
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--corp-sky-text);
}

body .strength-text {
  max-width: none;
  font-size: 14px;
  line-height: 1.8;
  color: var(--corp-soft);
}

body .about-team_card {
  text-align: left;
}

body .about-team_icon {
  margin: 0 0 16px;
}

body :is(.about-team_role, .service-refresh_title) {
  text-wrap: balance;
  word-break: auto-phrase;
}

/* メンバー紹介の本文は 3〜4 行になり、balance だと行が均等に短くなって右側が空く(390px で 300px の枠に約 200px)。本文は末尾の孤立だけ防ぐ */
body .about-team_text {
  text-wrap: pretty;
  word-break: auto-phrase;
}

body .about-team_role {
  font-size: 17px;
}

/* 進め方: 6 列 → 3 列(題名が 119px に収まらないため) */
body .about-flow_grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body .service-process_card .service-refresh_title {
  font-size: 18px;
}

@media screen and (max-width: 1024px) {
  body .strength-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
  }
}

@media screen and (max-width: 780px) {
  body .strength-grid,
  body .about-flow_grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 「Build Systems That Work.」は小さな等幅ラベル。本文は contents-wrap の中で左寄せ */
body aside.business-message {
  margin: 0;
  padding: var(--corp-section-y) 0 0;
  text-align: left;
}

body .business-text_en {
  margin: 0 0 12px;
  font-family: var(--corp-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--corp-soft);
}

body .business-title_head {
  max-width: 24em;
  margin: 0 0 18px;
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 900;
  line-height: 1.3;
  color: var(--corp-ink);
  text-wrap: balance;
  word-break: auto-phrase;
}

body .business-message .sec-common_text {
  max-width: 44em;
  margin: 0 0 12px;
  text-align: left;
  word-break: auto-phrase;
}

/* ---- 27. News / recruit illustrations ------------------------------------------------------- */
/* /news/: 既定のグラデーション画像(装飾)は出さず、グレーの角丸パネルも使わない */
.page-header_img:has(img[src*="news-default_img"]) {
  display: none;
}

body .news-sec {
  border-radius: 0;
  background: none;
}

/* 旧の灰色パネル(::before)も出さない */
body section.news-sec::before {
  content: none;
}

/* 空状態の上余白(メディア面で見出しの直後に置くための 24px)は、節の上余白だけにそろえる */
.news-sec .wr-empty-state {
  margin-top: 0;
}

/* /recruit/: 青い 3D イラストは濃紺の単色に寄せる(画像ファイルはそのまま) */
body .recruit-gallery_item {
  background: var(--corp-ink);
}

body .recruit-gallery_item img {
  mix-blend-mode: luminosity;
}

/* 同意チェック内のプライバシーポリシーへのリンク(旧は青) */

body .diagnostic-cta p {
  color: var(--corp-light);
}

/* 業界マトリクス(≤1024px): 行ごとの罫線にし、セルの箱は持たせない */
@media screen and (max-width: 1024px) {
  .oprion-industry-matrix--3col .oprion-industry-row {
    padding: 16px 0;
    border-bottom: 1px solid var(--corp-rule);
  }

  body .oprion-industry-matrix--3col .oprion-industry-cell {
    padding: 6px 0;
    border: 0;
    background: none;
  }
}

/* /company/: Mission / Vision の見出しが 1 文字だけ残らないように */
body .company-mv_card :is(h2, h3, p) {
  text-wrap: balance;
  word-break: auto-phrase;
}

/* 本文まで balance にすると、行が均等に短くなって右側が大きく空く(390px で 302px の枠に約 235px)。本文は末尾の孤立だけ防ぐ */
body .company-mv_card p {
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  .corp-toggle,
  .corp-toggle::after {
    animation: none;
    transition: none;
  }
}

/* ---- 28. 404 ---- */

.not-found-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 20px;
  padding: 0;
  list-style: none;
}

.not-found-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* /contact/ の予約セクション(予約モードのときだけ出る): ボタンを中央に */
.contact-entry-sec .readmore-btn {
  margin: 32px auto 0;
}


/* ---- 29. Monthly services (ms-*) ----------------------------------------------------------------
   /service/it-desk/ /service/pmo/ /pricing/。
   新しい部品は作らない: 帯・パンくず・見出し・ボタン・リンク・CTA 帯は site-chrome.css を使い、ここは配置・表・罫線の行だけ。
   色はトークンのみ。影・強制指定・新しい書体は使わない。ブレークポイントは 780 と 1024。 */

/* 1文1行。段落を1つの塊にせず、文の切れ目で改行する */
.ms-line {
  display: block;
}

.ms-line + .ms-line {
  margin-top: 0.3em;
}

.ms-text--lines {
  line-height: 1.8;
}

.ms-toc_item a:focus-visible {
  outline: 2px solid var(--corp-focus);
  outline-offset: 3px;
}

/* ページ内の目次: 帯の下の細い罫線の行。固定はしない */
.ms-toc {
  background: var(--corp-white);
  border-bottom: 1px solid var(--corp-rule);
}

.ms-toc_list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-toc_item {
  margin: 0;
}

.ms-toc_item a {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--corp-ink);
  text-decoration: none;
  word-break: auto-phrase;
}

.ms-toc_item a:hover {
  border-bottom-color: var(--corp-sky);
}

@media screen and (max-width: 780px) {
}

@media screen and (max-width: 780px) {
  .ms-toc_list {
    gap: 0 24px;
    scroll-padding-inline: 50px; /* 横に流れる目次で、端のリンクが半分欠けたままフォーカスされないよう、端から離して寄せる */
  }

  .ms-toc_item a {
    min-height: 44px;
  }
}

.ms-text {
  max-width: 40em;
  margin: 0;
  font-size: 16px;
  line-height: var(--corp-lh-long);
  color: var(--corp-ink);
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* 要点: 太字の見出し + 本文。節の最初の部品は、節の太罫が上罫を兼ねるので自分の上罫を持たない */
.ms-points {
  max-width: 44em;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--corp-ink);
}

.ms-point {
  margin: 0;
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--corp-rule);
}

.ms-point_head,
.ms-point_body {
  margin: 0;
  word-break: auto-phrase;
  text-wrap: pretty;
}

.ms-point_head {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--corp-ink);
}

.ms-point_body {
  margin-top: 2px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--corp-ink);
}

/* 並べる要点: 列の数は項目の数で決める(3つは3列、4つは2×2。1つだけ行に残さない) */
.ms-points--cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 40px;
  max-width: none;
  border-top: 0;
}

.ms-points--cols:has(> .ms-point:nth-child(3):last-child) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 32px;
}

.ms-points--cols .ms-point {
  padding: 0;
  border-bottom: 0;
}

.ms-checks {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--corp-rule);
}

.ms-check {
  position: relative;
  margin: 0;
  padding: 10px 0 10px 28px;
  border-top: 1px solid var(--corp-rule);
  font-size: 16px;
  line-height: 1.8;
  color: var(--corp-ink);
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* 罫線だけで描く小さな四角の印(アイコンフォントは使わない) */
.ms-check::before {
  content: "";
  position: absolute;
  top: calc(10px + 0.9em - 5px);
  left: 4px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--corp-sky);
  border-radius: 2px;
}

.ms-checks--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
}

/* 誰が作業するか: エージェント → 確認・操作担当 → 設計者の引き継ぎ。列のあいだを罫線の矢印でつなぐ */
.ms-roles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 56px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media screen and (max-width: 1024px) {
  .ms-checks--grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ms-roles {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media screen and (max-width: 780px) {
  .ms-points--cols,
  .ms-points--cols:has(> .ms-point:nth-child(3):last-child) {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .ms-points--cols .ms-point {
    padding: 14px 0 16px;
    border-top: 1px solid var(--corp-rule);
  }

  .ms-points--cols .ms-point:first-child {
    padding-top: 0;
    border-top: 0;
  }
}

/* -- 表: 罫線の表。見出し行は方眼色の面に濃紺の字、行見出しは太字 -- */
.ms-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid var(--corp-ink);
  font-size: 14px;
  line-height: 1.75;
  text-align: left;
}

.ms-table :is(th, td) {
  padding: 14px;
  border-bottom: 1px solid var(--corp-rule);
  text-align: left;
  vertical-align: top;
  word-break: auto-phrase;
  overflow-wrap: break-word;
  color: var(--corp-ink);
}

.ms-table thead th {
  padding-top: 12px;
  padding-bottom: 12px;
  background: var(--corp-grid);
  border-bottom: 1px solid var(--corp-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

.ms-table tbody th {
  font-size: 15px;
  font-weight: 900;
}

/* 「個別にご相談ください」は欠損ではなく、決まった状態として補助色で示す */
.ms-table .ms-table_ask {
  color: var(--corp-soft);
}

/* 「同左」(.ms-same)は表のまま見えるときだけ。縦積みでは左隣が見えないので、指す値(.ms-same_resolved)に差し替える */
.ms-same_resolved {
  display: none;
}

.ms-plan-table {
  table-layout: fixed;
}

.ms-plan-table :is(th, td):nth-child(1) { width: 18%; }

/* 月額の行: 料金プランの表で最初に読ませる数字 */
.ms-plan-table tbody tr:first-child td:not(.ms-table_ask) {
  color: var(--corp-ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

.ms-simple-table :is(th, td):nth-child(1) {
  width: 22%;
}

/* ≤1024px: 行ごとの縦積み。見出し行は読み上げ用に残し、各セルは data-label を項目名として出す */
@media screen and (max-width: 1024px) {
  .ms-table,
  .ms-table tbody,
  .ms-table tr,
  .ms-table th,
  .ms-table td {
    display: block;
  }

  .ms-table {
    border-top: 0;
  }

  .ms-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .ms-table tr {
    margin: 0 0 24px;
    border-top: 2px solid var(--corp-ink);
    border-bottom: 1px solid var(--corp-rule);
  }

  .ms-table tbody th {
    padding: 14px 0 10px;
    border: 0;
    font-size: 17px;
    line-height: 1.5;
  }

  /* 縦積みの商品名リンクは 44px のタップ領域に(見た目の高さは変えないよう、リンクの高さぶん th の上下 padding を詰める) */
  .ms-table tbody th:has(a) {
    padding-block: 0;
  }

  .ms-table tbody th a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .ms-table td {
    display: grid;
    grid-template-columns: 9em minmax(0, 1fr);
    gap: 0 16px;
    padding: 10px 0;
    border: 0;
    border-top: 1px solid var(--corp-rule);
  }

  .ms-table td::before {
    content: attr(data-label);
    font-family: var(--corp-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 2.05;
    color: var(--corp-soft);
  }

  .ms-plan-table :is(th, td):nth-child(n),
  .ms-simple-table :is(th, td):nth-child(n) {
    width: auto;
  }
}

@media screen and (max-width: 780px) {
  .ms-table td {
    display: block;
  }

  .ms-same {
    display: none;
  }

  .ms-same_resolved {
    display: inline;
  }

  .ms-table td::before {
    display: block;
    margin-bottom: 2px;
  }
}

/* 781〜1024px: 4列・3列で短い文のプラン表と日程表は、縦積みにせず表のまま(7列の価格表だけが縦積み) */
@media screen and (min-width: 781px) and (max-width: 1024px) {
  :is(.ms-plan-table, .ms-simple-table) {
    display: table;
    border-top: 2px solid var(--corp-ink);
  }

  :is(.ms-plan-table, .ms-simple-table) thead {
    position: static;
    display: table-header-group;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
  }

  :is(.ms-plan-table, .ms-simple-table) tbody {
    display: table-row-group;
  }

  :is(.ms-plan-table, .ms-simple-table) tr {
    display: table-row;
    margin: 0;
    border: 0;
  }

  :is(.ms-plan-table, .ms-simple-table) :is(th, td) {
    display: table-cell;
    padding: 14px;
    border: 0;
    border-bottom: 1px solid var(--corp-rule);
  }

  :is(.ms-plan-table, .ms-simple-table) thead th {
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--corp-ink);
  }

  :is(.ms-plan-table, .ms-simple-table) tbody th {
    padding: 14px;
    border-bottom: 1px solid var(--corp-rule);
    font-size: 15px;
    line-height: 1.75;
  }

  :is(.ms-plan-table, .ms-simple-table) td::before {
    content: none;
  }

  .ms-plan-table :is(th, td):nth-child(1) {
    width: 18%;
  }

  .ms-simple-table :is(th, td):nth-child(1) {
    width: 22%;
  }
}

/* -- 見積もり依頼: 単独のボタン、価格表では商品名 | ボタンの罫線行 -- */
.ms-cta {
  display: flex;
  margin: 0;
}

/* -- FAQ: トップと同じ oprion-faq-*。答えが長くても切れないようにする -- */
.ms-faq {
  margin: 0;
}

.ms-faq .oprion-faq-item.is-open .oprion-faq-answer {
  max-height: 40em;
}

.ms-faq .oprion-faq-answer p {
  text-wrap: pretty;
}

/* JS が無いときは開閉できないので、答えを最初から出す(トップの FAQ も同じ) */
@media (scripting: none) {
  .oprion-faq-answer {
    max-height: none;
    padding-bottom: 20px;
  }

  .oprion-faq-icon {
    display: none;
  }
}

/* ---- AI consulting site: editorial home and company pages -----------------
   紙面と罫線を主役にし、相談の入口だけをスカイで示す。影・丸いカード・
   不要な装飾は足さず、4段階の正本データを各ページで同じ見せ方にする。 */
body .corp-home-hero {
  min-height: min(720px, calc(100svh - var(--corp-header-h)));
  padding: clamp(116px, 13vw, 168px) 0 clamp(64px, 8vw, 112px);
}

body .corp-home-hero .corp-hero_inner {
  align-items: end;
  max-width: 1240px;
  gap: clamp(40px, 8vw, 120px);
}

body .corp-home-hero .corp-hero_copy {
  max-width: 700px;
}

body .corp-home-hero .corp-hero_for {
  margin-bottom: 24px;
  font-family: var(--corp-mono);
  font-size: 12px;
  letter-spacing: .05em;
}

body .corp-home-hero .corp-hero_title {
  font-size: clamp(40px, 5.5vw, 68px);
  line-height: 1.1;
  letter-spacing: -.025em;
}

body .corp-home-hero .corp-hero_sub {
  max-width: 35em;
  margin-top: 28px;
  color: var(--corp-light);
  font-size: 16px;
  line-height: 2;
}

body .corp-home-hero .corp-hero_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

body .corp-home-hero .corp-hero_actions .readmore-btn {
  margin: 0;
}

body .corp-hero_route {
  align-self: end;
  min-width: min(100%, 390px);
  padding: 26px 28px 24px;
  border: 1px solid var(--corp-light-a38);
  background: var(--corp-ink-a72);
  color: var(--corp-light);
}

body .corp-hero_route-label {
  margin: 0;
  font-family: var(--corp-mono);
  font-size: 12px;
  letter-spacing: .04em;
}

body .corp-hero_route-label {
  color: var(--corp-dim);
}

body .corp-hero_route-list {
  display: grid;
  gap: 0;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

body .corp-hero_route-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  min-height: 52px;
  border-top: 1px solid var(--corp-line-dark);
}

body .corp-hero_route-number {
  color: var(--corp-glow);
  font-family: var(--corp-mono);
  font-size: 12px;
}

body .corp-hero_route-name {
  font-size: 19px;
  font-weight: 700;
}

body .corp-hero_route-note {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--corp-line-dark);
  color: var(--corp-dim);
  font-size: 13px;
  line-height: 1.75;
}

body .corp-section-intro {
  max-width: 46em;
}

/* 節のラベルと見出しは、トップ(.corp-home-section-label / .corp-home-section-title)と同じ基準 */
body .corp-section-label {
  margin: 0;
  color: var(--corp-sky-text);
  font-family: var(--corp-mono);
  font-size: var(--corp-label-size);
  letter-spacing: var(--corp-label-ls);
  line-height: 1.5;
}

body .corp-section-title {
  margin: 12px 0 0;
  color: var(--corp-ink);
  font-size: var(--corp-h2);
  font-weight: 900;
  line-height: var(--corp-h2-lh);
  letter-spacing: var(--corp-h2-ls);
}

body .corp-section-lead {
  max-width: 44em;
  margin: 18px 0 0;
  color: var(--corp-soft);
  font-size: 15px;
  line-height: 1.9;
}

body .corp-concerns-sec,
body .corp-case-sec,
body .corp-flow-sec,
body .corp-monthly-sec,
body .corp-recipe-sec,
body .corp-faq-sec,
body .corp-about-team-sec,
body .corp-about-security-sec,
body .corp-company-summary-sec {
  padding: var(--corp-section-y) 0;
}

body .corp-concerns-sec,
body .corp-monthly-sec,
body .corp-about-team-sec,
body .corp-company-summary-sec {
  background: var(--corp-grain), var(--corp-paper-bg);
}

body .corp-case-sec,
body .corp-flow-sec,
body .corp-recipe-sec,
body .corp-faq-sec,
body .corp-about-security-sec {
  background: var(--corp-white);
}

body .corp-concerns-sec,
body .corp-case-sec,
body .corp-flow-sec,
body .corp-monthly-sec,
body .corp-recipe-sec,
body .corp-faq-sec {
  border-top: 1px solid var(--corp-rule);
}

body .corp-concerns-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 56px 0 0;
  padding: 0;
  border-top: 1px solid var(--corp-ink);
  list-style: none;
}

body .corp-concerns-list li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  min-height: 148px;
  padding: 24px 28px 24px 0;
  border-bottom: 1px solid var(--corp-rule);
}

body .corp-concerns-list li:nth-child(odd) {
  border-right: 1px solid var(--corp-rule);
}

body .corp-concerns-list li:nth-child(even) {
  padding-left: 28px;
}

body .corp-concern-number,
body .corp-flow-number,
body .corp-team-number {
  color: var(--corp-sky-text);
  font-family: var(--corp-mono);
  font-size: 12px;
  letter-spacing: .04em;
}

body .corp-concerns-list h3,
body .corp-flow-list h3,
body .corp-team-list h3,
body .corp-security-list h3 {
  margin: 0;
  color: var(--corp-ink);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.5;
}

body .corp-concerns-list p,
body .corp-flow-list p,
body .corp-team-list p,
body .corp-security-list p {
  margin: 10px 0 0;
  color: var(--corp-soft);
  font-size: 14px;
  line-height: 1.8;
}

body .corp-case_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 56px;
  border-top: 1px solid var(--corp-ink);
  border-left: 1px solid var(--corp-rule);
}

body .corp-case_card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 24px;
  border-right: 1px solid var(--corp-rule);
  border-bottom: 1px solid var(--corp-rule);
  background: var(--corp-white);
}

body .corp-case_meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  color: var(--corp-soft);
  font-family: var(--corp-mono);
  font-size: 11px;
}

body .corp-case_title {
  margin: 22px 0 24px;
  color: var(--corp-ink);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.55;
}

body .corp-case_rows {
  margin: 0 0 20px;
}

body .corp-case_row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--corp-rule);
}

body .corp-case_row dt {
  color: var(--corp-sky-text);
  font-family: var(--corp-mono);
  font-size: 11px;
}

body .corp-case_row dd {
  margin: 0;
  color: var(--corp-soft);
  font-size: 13px;
  line-height: 1.75;
}

body .corp-case_card .home-text_link {
  margin-top: auto;
}

body .corp-section-link {
  margin: 24px 0 0;
}

body .corp-empty-note {
  margin: 48px 0 0;
  padding: 24px 0;
  border-top: 1px solid var(--corp-rule);
  border-bottom: 1px solid var(--corp-rule);
  color: var(--corp-soft);
}

body .corp-flow-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 56px 0 0;
  padding: 0;
  border-top: 1px solid var(--corp-ink);
  list-style: none;
}

body .corp-flow-list li {
  min-height: 200px;
  padding: 24px 28px 24px 0;
  border-bottom: 1px solid var(--corp-rule);
}

body .corp-flow-list li + li {
  padding-left: 28px;
  border-left: 1px solid var(--corp-rule);
}

body .corp-flow-list h3 {
  margin-top: 54px;
}

body .corp-monthly-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 56px 0 0;
  padding: 0;
  border-top: 1px solid var(--corp-ink);
  border-left: 1px solid var(--corp-rule);
  list-style: none;
}

body .corp-monthly-name {
  margin: 0;
  color: var(--corp-ink);
  font-size: 20px;
  font-weight: 900;
}

body .corp-monthly-price {
  margin: 14px 0 20px;
  color: var(--corp-soft);
  font-size: 14px;
}

body .corp-base_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 56px;
  border-top: 1px solid var(--corp-ink);
  border-left: 1px solid var(--corp-rule);
}

body .corp-recipe-sec .home-base_card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  min-height: 260px;
  margin: 0;
  padding: 24px;
  border: 0;
  border-right: 1px solid var(--corp-rule);
  border-bottom: 1px solid var(--corp-rule);
  border-radius: 0;
  box-shadow:none;
  background: var(--corp-white);
}

body .corp-recipe-sec .home-card_title {
  margin-top: 22px;
  font-size: 19px;
  line-height: 1.6;
}

body .corp-recipe-sec .home-card_text {
  margin-top: 12px;
}

body .corp-recipe-sec .oprion-card_cta {
  margin-top: auto;
  padding-top: 18px;
}

body .corp-faq-sec .oprion-faq-list {
  margin-top: 48px;
}

body .corp-message-sec {
  padding: var(--corp-section-y) 0;
  background: var(--corp-white);
}

body .corp-message-layout {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 7vw, 100px);
  align-items: center;
}

body .corp-message-layout figure {
  margin: 0;
}

body .corp-message-layout img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

body .corp-message-layout .corp-section-title {
  max-width: 17em;
}

body .corp-body-text {
  max-width: 42em;
  margin: 20px 0 0;
  color: var(--corp-soft);
  font-size: 16px;
  line-height: var(--corp-body-lh);
}

body .corp-about-team-sec .corp-team-list,
body .corp-about-security-sec .corp-security-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 48px 0 0;
  padding: 0;
  border-top: 1px solid var(--corp-ink);
  border-left: 1px solid var(--corp-rule);
  list-style: none;
}

body .corp-team-list li,
body .corp-security-list li {
  min-height: 168px;
  padding: 24px 28px;
  border-right: 1px solid var(--corp-rule);
  border-bottom: 1px solid var(--corp-rule);
}

body .corp-team-list h3,
body .corp-security-list h3 {
  margin-top: 36px;
}

body .corp-about-approach-sec {
  padding: var(--corp-section-y) 0;
  background: var(--corp-paper-bg);
}

body .corp-approach-panel {
  padding: clamp(32px, 5vw, 64px);
  background: var(--corp-ink);
  color: var(--corp-light);
}

body .corp-approach-panel .corp-section-label,
body .corp-approach-panel .corp-section-title,
body .corp-approach-panel h3,
body .corp-approach-panel p {
  color: var(--corp-light);
}

body .corp-approach-panel .corp-section-title {
  margin-top: 16px;
}

body .corp-approach-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 54px;
}

body .corp-approach-columns > div {
  padding-top: 18px;
  border-top: 1px solid var(--corp-core-line);
}

body .corp-approach-columns h3 {
  margin: 0;
  font-size: 18px;
}

body .corp-approach-columns p {
  margin: 12px 0 0;
  color: var(--corp-dim);
  font-size: 14px;
  line-height: 1.8;
}

body .corp-company-table {
  margin: 48px 0 0;
  border-top: 1px solid var(--corp-ink);
}

body .corp-company-table > div {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 32px;
  padding: 20px 0;
  border-bottom: 1px solid var(--corp-rule);
}

body .corp-company-table dt {
  color: var(--corp-sky-text);
  font-family: var(--corp-mono);
  font-size: 12px;
}

body .corp-company-table dd {
  margin: 0;
  color: var(--corp-ink);
  font-size: 15px;
  line-height: var(--corp-body-lh-tight);
}

/* /company/ の理念の節: 見出しと本文だけ。罫線の下に静かに置く(2列の枠は持たない) */
body .corp-company-mission-sec {
  background: var(--corp-white);
}

/* 縦のリズム(section 直下は上だけ余白)より後ろで勝たせるため、同じ詳細度に揃える。
   下の余白を節に持たせるので、直後の CTA 帯までの間隔は、この節の下の余白だけ */
body main > section.corp-company-mission-sec:not(.home-hero-sec):not(.page-header-sec) {
  padding: var(--corp-section-y) 0;
}

body .corp-company-mission_title {
  margin: 0;
  color: var(--corp-ink);
  font-size: var(--corp-h2);
  font-weight: 900;
  letter-spacing: var(--corp-h2-ls);
  line-height: var(--corp-h2-lh);
  text-wrap: pretty;
  word-break: auto-phrase;
}

body .corp-company-mission_text {
  max-width: 38em;
  margin: 24px 0 0;
  color: var(--corp-ink);
  font-size: 16px;
  line-height: var(--corp-body-lh);
  text-wrap: pretty;
  word-break: auto-phrase;
}

@media (prefers-reduced-motion: no-preference) {
  body .corp-home-hero .corp-hero_copy,
  body .corp-home-hero .corp-hero_route {
    animation: corp-editorial-rise .65s ease-out both;
  }

  body .corp-home-hero .corp-hero_route {
    animation-delay: .12s;
  }

  body .corp-hero_route-item {
    transition: color .2s ease, padding-left .2s ease;
  }

  body .corp-hero_route-item:hover {
    padding-left: 6px;
    color: var(--corp-glow);
  }

  @keyframes corp-editorial-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media screen and (max-width: 1024px) {
  body .corp-home-hero .corp-hero_inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  body .corp-hero_route {
    min-width: 0;
    padding: 18px;
  }

  body .corp-hero_route-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: 16px;
  }

  body .corp-hero_route-item {
    display: block;
    min-height: 0;
    padding: 10px 4px 8px;
    border-top: 1px solid var(--corp-line-dark);
    text-align: center;
  }

  body .corp-hero_route-item + .corp-hero_route-item {
    border-left: 1px solid var(--corp-line-dark);
  }

  body .corp-hero_route-number {
    display: block;
    font-size: 10px;
  }

  body .corp-hero_route-name {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
  }

  body .corp-hero_route-note {
    display: none;
  }
}

@media screen and (max-width: 780px) {
  body .corp-home-hero {
    min-height: 0;
    padding-top: 104px;
  }

  body .corp-home-hero .corp-hero_inner,
  body .corp-message-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body .corp-home-hero .corp-hero_title {
    font-size: clamp(38px, 10.5vw, 54px);
  }

  body .corp-home-hero .corp-hero_sub {
    font-size: 14px;
  }

  body .corp-home-hero .corp-hero_actions {
    flex-direction: column;
    align-items: stretch;
  }

  body .corp-home-hero .corp-hero_actions .readmore-btn {
    width: 100%;
  }

  body .corp-hero_route {
    min-width: 0;
    padding: 18px;
  }

  body .corp-hero_route-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: 16px;
  }

  body .corp-hero_route-item {
    display: block;
    min-height: 0;
    padding: 10px 4px 8px;
    border-top: 1px solid var(--corp-line-dark);
    text-align: center;
  }

  body .corp-hero_route-item + .corp-hero_route-item {
    border-left: 1px solid var(--corp-line-dark);
  }

  body .corp-hero_route-number {
    display: block;
    font-size: 10px;
  }

  body .corp-hero_route-name {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
  }

  body .corp-hero_route-note {
    display: none;
  }

  body .corp-concerns-list,
  body .corp-case_grid,
  body .corp-flow-list,
  body .corp-monthly-list,
  body .corp-base_grid,
  body .corp-about-team-sec .corp-team-list,
  body .corp-about-security-sec .corp-security-list,
  body .corp-approach-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  body .corp-concerns-list li,
  body .corp-concerns-list li:nth-child(even),
  body .corp-flow-list li,
  body .corp-flow-list li + li {
    padding: 20px 0;
    border-right: 0;
    border-left: 0;
  }

  body .corp-concerns-list li + li,
  body .corp-flow-list li + li {
    border-top: 1px solid var(--corp-rule);
  }

  body .corp-case_card,
  body .corp-recipe-sec .home-base_card {
    min-height: 0;
    padding: 22px 18px;
  }

  body .corp-message-layout {
    gap: 32px;
  }

  body .corp-message-layout img {
    max-width: 420px;
  }

  body .corp-company-table > div {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 18px;
  }

  body .corp-approach-panel {
    padding: 30px 20px;
  }

  body .corp-approach-columns {
    gap: 0;
    margin-top: 34px;
  }

  body .corp-approach-columns > div {
    padding: 18px 0;
  }
}

/* ---- Monthly service marketing pages ------------------------------------ */
body .ms-design-section {
  padding: var(--corp-section-y) 0;
  background: var(--corp-white);
}

body .ms-design-section:nth-of-type(even) {
  background: var(--corp-paper-bg);
}

body .ms-design-section > .contents-wrap > .sec-title_head {
  margin: 0 0 14px;
}

body .ms-design-title {
  max-width: 26em;
  margin: 0;
  color: var(--corp-ink);
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 900;
  line-height: 1.45;
}

body .ms-design-flow {
  margin: 42px 0 0;
  padding: 0;
  border-top: 1px solid var(--corp-ink);
  list-style: none;
}

body .ms-design-flow li {
  display: grid;
  grid-template-columns: 54px minmax(230px, .8fr) minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  min-height: 68px;
  padding: 12px 0;
  border-bottom: 1px solid var(--corp-rule);
}

body .ms-design-flow li > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--corp-sky);
  border-radius: 50%;
  color: var(--corp-sky-text);
  font-family: var(--corp-mono);
  font-size: 12px;
}

body .ms-design-flow strong {
  color: var(--corp-ink);
  font-size: 16px;
}

body .ms-design-flow p {
  margin: 0;
  color: var(--corp-soft);
  font-size: 14px;
  line-height: 1.75;
}

body .corp-monthly-label {
  margin: 0;
  color: var(--corp-sky-text);
  font-family: var(--corp-mono);
  font-size: 12px;
}

/* -- Home hero: white editorial opening with a concrete service image. */
body .home-hero-sec.corp-home-hero {
  color: var(--corp-ink);
  background: var(--corp-white);
}

body .corp-home-hero .corp-hero_title {
  color: var(--corp-ink);
}

body .corp-home-hero .corp-hero_for {
  color: var(--corp-sky-text);
}

body .corp-home-hero .corp-hero_sub {
  color: var(--corp-soft);
}

body .corp-home-hero .corp-hero_route {
  display: grid;
  align-self: center;
  min-width: 0;
  gap: 20px;
  padding: 0;
  border: 0;
  background: var(--corp-white);
  color: var(--corp-ink);
}

body .corp-home-hero .corp-hero_media {
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--corp-rule);
  background: var(--corp-paper-bg);
}

body .corp-home-hero .corp-hero_media img {
  display: block;
  width: 100%;
  height: clamp(280px, 32vw, 420px);
  object-fit: cover;
  object-position: center;
}

body .corp-home-hero .corp-hero_route-label {
  color: var(--corp-sky-text);
}

body .corp-home-hero .corp-hero_route-item {
  border-color: var(--corp-rule);
}

body .corp-home-hero .corp-hero_route-number {
  color: var(--corp-sky-text);
}

body .corp-home-hero .corp-hero_route-note {
  border-color: var(--corp-rule);
  color: var(--corp-soft);
}

@media screen and (max-width: 1024px) {
  body .corp-home-hero .corp-hero_media img {
    height: 320px;
  }
}

@media screen and (max-width: 780px) {
  body .corp-home-hero .corp-hero_media img {
    height: 230px;
  }
}

/* ---- CTA帯(全コーポレートページで1つの規則。ページ別CSSには持たせない) -------------------------------------
   紺の面いっぱいの帯。紺の上に白のごく薄い32px方眼と粒子を敷き、光(grid-current.js)を少しだけ流す。
   方眼と粒子は帯の背景ではなく ::before に置く。光の canvas(z-index: 0)の下、文字(z-index: 1)の下に並べるため。方眼の原点は帯の左上で、canvas の格子と同じ。
   中の箱(.corporate-cta)は面も角丸も余白も持たない。上下の余白はトップと同じ clamp(28px, 4vw, 50px)、帯の上のマージンは 0。
   帯までの間隔は、直前の節の下の余白が持つ。本文の幅と左端は他の節と同じ(--corp-content-w)。780px 以下は縦積み。 */
body main > section.corporate-cta-sec.corporate-cta-sec {
  position: relative;
  overflow: clip;
  margin: 0;
  padding: clamp(28px, 4vw, 50px) 0;
  background-color: var(--corp-ink);
  --current-core: var(--corp-switch); /* 紺の地では、芯も黄のまま */
}

body main > section.corporate-cta-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    var(--corp-grain-light),
    linear-gradient(var(--corp-light-a06) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--corp-light-a06) 1px, transparent 1px) 0 0 / 32px 32px;
  pointer-events: none;
}

body main > section.corporate-cta-sec > .contents-wrap {
  position: relative;
  z-index: 1;
  width: var(--corp-content-w);
  max-width: none;
  margin: 0 auto;
  padding: 0;
}

/* 帯の直前の節が下の余白を持たないページ(お知らせ・記事・404)でも、帯との間は他のページと同じだけ空ける */
body main > section:not(.home-hero-sec):not(.page-header-sec):has(+ section.corporate-cta-sec) {
  padding-bottom: var(--corp-section-y);
}

/* お知らせ・記事の main は、箱の下に余白(padding-bottom 120px)を持っていた。帯は次のフッターに直に接する */
body main:has(> section.corporate-cta-sec:last-child) {
  padding-bottom: 0;
}

body main > section.corporate-cta-sec .corporate-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body main > section.corporate-cta-sec .corporate-cta_copy {
  min-width: 0;
}

body main > section.corporate-cta-sec .corporate-cta_label {
  margin: 0 0 12px;
  color: var(--corp-white);
  font-family: var(--corp-mono);
  font-size: var(--corp-label-size);
  letter-spacing: var(--corp-label-ls);
}

body main > section.corporate-cta-sec .corporate-cta_title {
  margin: 0;
  color: var(--corp-white);
  font-size: var(--corp-h2);
  font-weight: 900;
  letter-spacing: var(--corp-h2-ls);
  line-height: var(--corp-h2-lh);
}

body main > section.corporate-cta-sec .corporate-cta_text {
  margin: 12px 0 0;
  color: var(--corp-white);
  font-size: 16px;
  line-height: var(--corp-body-lh);
}

body main > section.corporate-cta-sec .corporate-cta_actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex-shrink: 0;
}

body main > section.corporate-cta-sec .corporate-cta_actions .readmore-btn {
  min-width: 180px;
  margin: 0;
  border-radius: var(--corp-radius);
  background: var(--corp-white);
}

body main > section.corporate-cta-sec .corporate-cta_actions .readmore-btn a {
  min-height: 52px;
  color: var(--corp-ink);
}

body main > section.corporate-cta-sec .corporate-cta_sub {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  color: var(--corp-white);
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body main > section.corporate-cta-sec .corporate-cta_sub:hover {
  color: var(--corp-white);
  opacity: 0.85;
}

/* 問い合わせのあとに起きること。ボタンの下に番号つきで小さく並べる(期限は書かない) */
body main > section.corporate-cta-sec .corporate-cta_next {
  max-width: 26em;
  margin: 16px 0 0;
  padding: 0 0 0 1.5em;
  color: var(--corp-light);
  font-size: 15px;
  line-height: var(--corp-body-lh-tight);
  list-style: decimal;
}

body main > section.corporate-cta-sec .corporate-cta_next li {
  list-style: decimal;
}

body main > section.corporate-cta-sec .corporate-cta_next li + li {
  margin-top: 6px;
}

@media screen and (max-width: 780px) {
  body main > section.corporate-cta-sec .corporate-cta {
    align-items: stretch;
    flex-direction: column;
  }

  body main > section.corporate-cta-sec .corporate-cta_actions,
  body main > section.corporate-cta-sec .corporate-cta_actions .readmore-btn,
  body main > section.corporate-cta-sec .corporate-cta_actions .readmore-btn a {
    width: 100%;
  }
}

body .ms-design-role-label {
  margin: 30px 0 0;
  color: var(--corp-sky-text);
  font-family: var(--corp-mono);
  font-size: 12px;
}

body .ms-design-report {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(230px, .7fr);
  gap: 44px;
  margin-top: 42px;
}

body .ms-design-caption {
  margin: 0 0 12px;
  color: var(--corp-sky-text);
  font-size: 13px;
  font-weight: 700;
}

body .ms-design-report table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--corp-rule);
}

body .ms-design-report th,
body .ms-design-report td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--corp-rule);
  text-align: left;
  vertical-align: top;
  font-size: 13px;
  line-height: 1.75;
}

body .ms-design-report th {
  width: 26%;
  color: var(--corp-ink);
  background: var(--corp-paper-bg);
  font-weight: 700;
}

body .ms-design-report td {
  color: var(--corp-soft);
}

body .ms-design-report_note {
  padding: 24px 0 0 28px;
  border-left: 2px solid var(--corp-sky);
}

body .ms-design-report_note strong {
  display: block;
  color: var(--corp-ink);
  font-size: 18px;
  line-height: 1.65;
}

body .ms-design-report_note p {
  margin: 12px 0 28px;
  color: var(--corp-soft);
  font-size: 14px;
  line-height: 1.8;
}

body .ms-design-roles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 42px;
  border-top: 1px solid var(--corp-ink);
  border-left: 1px solid var(--corp-rule);
}

body .ms-design-roles article {
  min-height: 160px;
  padding: 24px;
  border-right: 1px solid var(--corp-rule);
  border-bottom: 1px solid var(--corp-rule);
}

body .ms-design-role_mark {
  color: var(--corp-sky-text);
  font-family: var(--corp-mono);
  font-size: 11px;
}

body .ms-design-roles h3 {
  margin: 18px 0 0;
  color: var(--corp-ink);
  font-size: 20px;
  line-height: 1.5;
}

body .ms-design-roles p {
  margin: 10px 0 0;
  color: var(--corp-soft);
  font-size: 14px;
  line-height: 1.75;
}

body .ms-design-note {
  margin: 20px 0 0;
  padding: 10px 16px;
  background: var(--corp-paper-bg);
  color: var(--corp-soft);
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}

body .ms-design-detail-list {
  margin: 30px 0 0;
  padding: 0;
  border-top: 1px solid var(--corp-rule);
  list-style: none;
}

body .ms-design-detail-list li {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 22px;
  padding: 14px 0;
  border-bottom: 1px solid var(--corp-rule);
}

body .ms-design-detail-list strong {
  color: var(--corp-ink);
  font-size: 14px;
}

body .ms-design-detail-list span {
  color: var(--corp-soft);
  font-size: 13px;
  line-height: 1.75;
}

@media screen and (max-width: 1024px) {
  body .ms-design-flow li {
    grid-template-columns: 48px minmax(180px, .8fr) minmax(0, 1fr);
    gap: 14px;
  }

}

@media screen and (max-width: 780px) {
  body .ms-design-flow li {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
  }

  body .ms-design-flow p {
    grid-column: 2;
  }

  body .ms-design-report,
  body .ms-design-roles {
    grid-template-columns: minmax(0, 1fr);
  }

  body .ms-design-report {
    gap: 28px;
  }

  body .ms-design-report_note {
    padding: 20px 0 0;
    border-top: 2px solid var(--corp-sky);
    border-left: 0;
  }

  body .ms-design-report th,
  body .ms-design-report td {
    display: block;
    width: auto;
    padding: 10px 12px;
  }

  body .ms-design-report th {
    border-bottom: 0;
  }

  body .ms-design-detail-list li {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 780px) {
}

body#top.oprion-virtual-page--it-desk .header-top-light,
body#top.oprion-virtual-page--pmo .header-top-light {
  --h-fg: var(--corp-light);
  --h-btn-bg: var(--corp-light);
  --h-btn-fg: var(--corp-ink);
  --h-focus: var(--corp-glow);
}

body#top.oprion-virtual-page--it-desk .header-top-light::before,
body#top.oprion-virtual-page--pmo .header-top-light::before {
  opacity: 1;
  background: var(--corp-ink);
  border-bottom-color: var(--corp-ink);
}

body#top.oprion-virtual-page--it-desk .header-top-light .main-logo_img--dark,
body#top.oprion-virtual-page--pmo .header-top-light .main-logo_img--dark {
  opacity: 0;
}

body#top.oprion-virtual-page--it-desk .header-top-light .main-logo_img--light,
body#top.oprion-virtual-page--pmo .header-top-light .main-logo_img--light {
  opacity: 1;
}

/* Final home opening: the monthly services are the first concrete route into the site. */
body#top:has(.corp-home-hero) .header-top-dark {
  --h-fg: var(--corp-light);
  --h-btn-bg: var(--corp-light);
  --h-btn-fg: var(--corp-ink);
  --h-focus: var(--corp-glow);
}

body#top:has(.corp-home-hero) .header-top-dark::before {
  opacity: 1;
  background: var(--corp-ink);
  border-bottom-color: var(--corp-ink);
}

body#top:has(.corp-home-hero) .header-top-dark .main-logo_img--dark {
  opacity: 0;
}

body#top:has(.corp-home-hero) .header-top-dark .main-logo_img--light {
  opacity: 1;
}

body .home-hero-sec.corp-home-hero {
  box-sizing: border-box;
  height: 600px;
  min-height: 600px;
  padding: 96px 0 48px;
}

body .corp-home-hero .corp-hero_inner {
  height: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 88px);
}

body .corp-home-hero .corp-hero_copy {
  max-width: 560px;
}

body .corp-home-hero .corp-hero_title {
  font-size: clamp(38px, 3.75vw, 48px);
  line-height: 1.22;
  letter-spacing: 0;
}

body .corp-home-hero .corp-hero_sub {
  max-width: 42em;
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.8;
}

body .corp-home-hero .corp-hero_actions {
  margin-top: 28px;
}

body .corp-home-hero .corp-hero_route {
  display: block;
  align-self: center;
  width: 100%;
  max-width: 560px;
  padding: 0;
  background: transparent;
}

body .corp-home-hero .corp-hero_media {
  width: 100%;
  margin: 0;
  border: 1px solid var(--corp-rule);
}

body .corp-home-hero .corp-hero_media img {
  height: 360px;
}

/* Detail pages use the same compact editorial rhythm as the approved reference. */
body .ms-design-section > .contents-wrap > .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);
  background: none;
  -webkit-text-fill-color: currentColor;
}

/* 問い合わせ前の補助文: 記入内容と相談後の流れを短いブロックで分ける。 */
body .contact-form-guidance {
  margin: 0 auto 28px;
  padding: 18px 20px;
  border-left: 3px solid var(--corp-sky);
  background: var(--corp-pale-blue);
}

body .contact-form-guidance h3 {
  margin: 0;
  color: var(--corp-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.55;
}

body .contact-form-guidance > p,
body .contact-form-guidance li {
  color: var(--corp-soft);
  font-size: 14px;
  line-height: 1.8;
}

body .contact-form-guidance > p {
  margin: 10px 0 0;
}

body .contact-form-guidance ul {
  margin: 14px 0 0;
  padding-left: 1.4em;
  list-style: disc;
}

body .contact-form-guidance li + li {
  margin-top: 6px;
}

body .contact-form-guidance > p:last-child {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--corp-rule);
  color: var(--corp-ink);
}

@media screen and (max-width: 780px) {
  body .contact-form-guidance {
    margin-bottom: 22px;
    padding: 14px 16px;
  }

  body .contact-form-guidance h3 {
    font-size: 16px;
  }

  body .contact-form-guidance > p,
  body .contact-form-guidance li {
    font-size: 13px;
    line-height: 1.75;
  }
}

/* /contact/ は入力を先に始められるよう、導入を詰めてフォームと補助情報を並べる。 */
body main.corp-contact-page > section.corp-statement.corp-statement {
  padding: calc(var(--wr-header-top-h) + 20px) 0 34px;
}

body main.corp-contact-page > section.corp-statement.corp-statement .corp-statement_title {
  font-size: clamp(36px, 4.8vw, 58px);
}

body main.corp-contact-page > section.corp-statement.corp-statement .corp-statement_body {
  margin-top: 16px;
}

body main.corp-contact-page > section.contact-form-sec {
  margin-top: 0;
  padding: var(--corp-section-y) 0;
}

/* 節のラベルと見出しは、ほかのページ(トップの .corp-home-section-label / -title)と同じ基準 */
body main.corp-contact-page > section.contact-form-sec .sec-main_title .sec-title_head {
  color: var(--corp-sky-text);
  font-size: var(--corp-label-size);
  font-weight: 400;
  letter-spacing: var(--corp-label-ls);
}

body main.corp-contact-page > section.contact-form-sec .sec-main_title .sec-title_jp {
  font-size: var(--corp-h2);
  font-weight: 900;
  line-height: var(--corp-h2-lh);
  letter-spacing: var(--corp-h2-ls);
}

body main.corp-contact-page > section.contact-form-sec > .contents-wrap > .sec-main_title {
  max-width: 720px;
  margin-right: auto;
  margin-left: 0;
  text-align: left;
}

body main.corp-contact-page .contact-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.75fr);
  align-items: start;
  gap: clamp(32px, 5vw, 72px);
  margin-top: 28px;
}

body main.corp-contact-page .contact-form_area {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* 送信後の画面。返信を待つ人に、相談の予約も出す(CTA 帯の副リンクと同じもの) */
body main.corp-contact-page .complete-text:has(+ .complete-booking) {
  margin-bottom: 16px;
}

body main.corp-contact-page .complete-text,
body main.corp-contact-page .complete-booking {
  color: var(--corp-soft);
}

body main.corp-contact-page .complete-booking {
  margin: 0 0 32px;
  font-size: 15px;
  line-height: var(--corp-body-lh);
}

body main.corp-contact-page .complete-booking_link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--corp-sky-text);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body main.corp-contact-page .contact-form-support {
  display: grid;
  min-width: 0;
  gap: 28px;
}

body main.corp-contact-page .contact-form-guidance {
  margin: 0;
  padding: 0 0 22px;
  border: 0;
  border-bottom: 1px solid var(--corp-rule);
  background: transparent;
}

body main.corp-contact-page .contact-form-guidance h3,
body main.corp-contact-page .contact-form-next h3 {
  margin: 0;
  color: var(--corp-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.55;
}

/* 項目は「送信後の流れ」の文と同じ左端から始める(点は出さず、字下げしない) */
body main.corp-contact-page .contact-form-guidance ul {
  margin-top: 14px;
  padding-left: 0;
  list-style: none;
}

body main.corp-contact-page .contact-form-next {
  padding: 0;
}

body main.corp-contact-page .contact-form-next p {
  margin: 12px 0 0;
  color: var(--corp-soft);
  font-size: 14px;
  line-height: 1.8;
}

body main.corp-contact-page .contact-form .form-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
  margin-bottom: 24px;
  padding-bottom: 24px;
}

body main.corp-contact-page .contact-form .form-group {
  margin-bottom: 0;
}

body main.corp-contact-page .contact-form .form-group:nth-child(5) {
  grid-column: 1 / -1;
}

body main.corp-contact-page .contact-form .form-actions {
  margin-top: 24px;
}

/* 狭い幅では、送信までのボタンもほかの主ボタンと同じく横いっぱいにする */
@media (max-width: 780px) {
  body main.corp-contact-page .contact-form .form-actions :is(.btn-confirm, .btn-back, .btn-submit) {
    width: 100%;
  }
}

body main.corp-contact-page .contact-assistant-draft-choice:not([hidden]) {
  margin: 0 0 24px;
  padding: 12px 16px;
  border-left: 3px solid var(--corp-sky);
  background: var(--corp-pale-blue);
}

body main.corp-contact-page .contact-assistant-draft-choice p {
  margin: 0 0 10px;
  color: var(--corp-soft);
  font-size: 13px;
  line-height: 1.7;
}

body main.corp-contact-page .contact-assistant-draft-choice button {
  min-height: 36px;
  margin-right: 8px;
  padding: 6px 12px;
  border: 1px solid var(--corp-rule);
  border-radius: var(--corp-radius);
  background: var(--corp-white);
  color: var(--corp-ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

body main.corp-contact-page .contact-assistant-draft-note:not([hidden]) {
  display: block;
  margin: 12px 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--corp-sky);
  background: var(--corp-pale-blue);
  color: var(--corp-soft);
  font-size: 13px;
  line-height: 1.7;
}

@media screen and (max-width: 1024px) {
  body main.corp-contact-page .contact-form-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body main.corp-contact-page .contact-form-support {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  body main.corp-contact-page .contact-form-guidance {
    padding: 0 24px 0 0;
    border-right: 1px solid var(--corp-rule);
    border-bottom: 0;
  }
}

@media screen and (max-width: 780px) {
  body main.corp-contact-page > section.corp-statement.corp-statement {
    padding: calc(var(--wr-header-top-h) + 16px) 0 28px;
  }

  body main.corp-contact-page > section.corp-statement.corp-statement .corp-statement_title {
    font-size: clamp(32px, 10vw, 44px);
  }

  body main.corp-contact-page > section.contact-form-sec > .contents-wrap > .sec-main_title {
    margin-right: 0;
    margin-left: 0;
  }

  body main.corp-contact-page .contact-form-layout {
    gap: 28px;
    margin-top: 20px;
  }

  body main.corp-contact-page .contact-form-support {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  body main.corp-contact-page .contact-form-guidance {
    padding: 0 0 20px;
    border-right: 0;
    border-bottom: 1px solid var(--corp-rule);
  }

  body main.corp-contact-page .contact-form .form-section {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    row-gap: 20px;
  }

  body main.corp-contact-page .contact-form .form-group:nth-child(5) {
    grid-column: auto;
  }
}

@media screen and (max-width: 1024px) {
  body .home-hero-sec.corp-home-hero {
    height: auto;
    min-height: 0;
    padding: 104px 0 56px;
  }

  body .corp-home-hero .corp-hero_inner {
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  body .corp-home-hero .corp-hero_copy,
  body .corp-home-hero .corp-hero_route {
    max-width: none;
  }

  body .corp-home-hero .corp-hero_media img {
    height: 320px;
  }
}

@media screen and (max-width: 780px) {
  body .home-hero-sec.corp-home-hero {
    padding: 96px 0 48px;
  }

  body .corp-home-hero .corp-hero_title {
    font-size: clamp(36px, 10vw, 44px);
  }

  body .corp-home-hero .corp-hero_sub {
    font-size: 14px;
  }

  body .corp-home-hero .corp-hero_actions {
    flex-direction: column;
    align-items: stretch;
  }

  body .corp-home-hero .corp-hero_actions .readmore-btn {
    width: 100%;
  }

  body .corp-home-hero .corp-hero_media img {
    height: 230px;
  }
}

/* ---- 30. 和文の折り返し(コーポレート面の本文) ------------------------------------------------------------
   語の途中で折れず(「詳し/い条件は」)、行末に1字だけ残らない(「ら)」)ように、文節単位(auto-phrase)で折り返し、最後の行を長めに取る(pretty)。
   html の lang が ja のときに効く。見出し(h1〜h3)は site-chrome.css が balance と auto-phrase を持つので、ここでは本文だけ。
   :where() で詳細度を 0 にし、部品ごとの text-wrap: balance などの指定を上書きしない。
   メディア面には効かせない(body.corporate-surface)。入力欄・コード・図の中の文字は対象外。
   overflow-wrap(長い URL・メールアドレスの折り返し)には触れない。 */
:where(body.corporate-surface main) :where(p, li, dd, dt, td, th, figcaption, summary, label, small, a) {
  word-break: auto-phrase;
  text-wrap: pretty;
}

:where(body.corporate-surface main) :where(input, textarea, select, code, svg, svg *) {
  word-break: normal;
  text-wrap: wrap;
}